Add @spaceui/icons package, FileThumb, GridItem, SpaceItem, TabBar fix

- New @spaceui/icons package: full Spacedrive icon library (197 PNGs,
  393 bearded SVGs, 17 code SVGs, 12 brand SVGs) with getIcon/
  getBeardedIcon resolution utilities
- New FileThumb component: presentational thumbnail with icon fallback,
  bearded badge overlay, IconSource type for cross-bundler compat
- New GridItem component: presentational grid card composing FileThumb
- New SpaceItem primitive: sidebar item matching SpacesSidebar styling
  (gap-2, rounded-md, polymorphic icon: component/URL/color dot/element)
- TabBar: close button only renders on active tab
- Fix ToggleGroup DTS build (ReactNode bigint compat)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jamiepine

.changeset/config.json

@@ -6,7 +6,7 @@
   "linked": [
     ["@spaceui/primitives", "@spaceui/forms", "@spaceui/ai", "@spaceui/explorer"]
   ],
-  "access": "restricted",
+  "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": []

bun.lock

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import clsx from "clsx";
+
+/** An icon source — either a URL string or an object with a .src property (e.g., Next.js StaticImageData) */
+export type IconSource = string | { src: string };
+
+/** Resolve an IconSource to a URL string */
+function resolveIconSrc(src: IconSource): string {
+	return typeof src === "string" ? src : src.src;
+}
+
+export interface FileThumbProps {
+	/** Kind icon (e.g., Document, Folder PNG). Accepts URL string or StaticImageData. */
+	iconSrc: IconSource;
+	/** Optional thumbnail image (photo, video poster, etc.). Accepts URL string or StaticImageData. */
+	thumbnailSrc?: IconSource | null;
+	/** Optional extension badge overlay (bearded icon SVG URL) */
+	beardedIconSrc?: string | null;
+	/** Size in pixels (width and height) */
+	size?: number;
+	/** Scale factor for fallback icon relative to size (0-1, default 1) */
+	iconScale?: number;
+	/** Custom frame class for the thumbnail image (border, radius, bg) */
+	frameClassName?: string;
+	className?: string;
+}
+
+export function FileThumb({
+	iconSrc,
+	thumbnailSrc,
+	beardedIconSrc,
+	size = 100,
+	iconScale = 1,
+	frameClassName,
+	className,
+}: FileThumbProps) {
+	const [thumbLoaded, setThumbLoaded] = useState(false);
+	const [thumbError, setThumbError] = useState(false);
+
+	const resolvedIcon = resolveIconSrc(iconSrc);
+	const resolvedThumb = thumbnailSrc ? resolveIconSrc(thumbnailSrc) : null;
+
+	const iconSize = size * iconScale;
+
+	// Below 60px, show only bearded icon at full size; above, show as overlay at 40%
+	const isSmallIcon = size < 60;
+	const badgeSize = isSmallIcon ? iconSize : iconSize * 0.4;
+
+	// Scale border radius with size (8% of size, clamped between 2px and 8px)
+	const borderRadius = Math.min(8, Math.max(2, size * 0.08));
+
+	return (
+		<div
+			className={clsx(
+				"relative pointer-events-none flex shrink-0 grow-0 items-center justify-center",
+				className,
+			)}
+			style={{
+				width: size,
+				height: size,
+				minWidth: size,
+				minHeight: size,
+				maxWidth: size,
+				maxHeight: size,
+			}}
+		>
+			{/* Base kind icon — always rendered first (instant), thumbnail loads over it */}
+			{/* Hide document icon if small and showing bearded badge */}
+			{!(isSmallIcon && beardedIconSrc) && (
+				<img
+					src={resolvedIcon}
+					alt=""
+					className={clsx(
+						"object-contain transition-opacity",
+						thumbLoaded && resolvedThumb && "opacity-0",
+					)}
+					style={{
+						width: iconSize,
+						height: iconSize,
+						maxWidth: "100%",
+						maxHeight: "100%",
+					}}
+				/>
+			)}
+
+			{/* Thumbnail image (loads over the icon) */}
+			{resolvedThumb && !thumbError && (
+				<img
+					src={resolvedThumb}
+					alt=""
+					className={clsx(
+						"absolute inset-0 m-auto max-h-full max-w-full object-contain transition-opacity",
+						frameClassName || "border border-app-line/50 bg-app-box/30",
+						!thumbLoaded && "opacity-0",
+					)}
+					style={frameClassName ? undefined : { borderRadius: `${borderRadius}px` }}
+					onLoad={() => setThumbLoaded(true)}
+					onError={() => setThumbError(true)}
+				/>
+			)}
+
+			{/* Bearded icon badge overlay */}
+			{beardedIconSrc && (
+				<img
+					src={beardedIconSrc}
+					alt=""
+					className="absolute left-1/2 top-[55%] -translate-x-1/2 -translate-y-1/2"
+					style={{
+						width: badgeSize,
+						height: badgeSize,
+					}}
+				/>
+			)}
+		</div>
+	);
+}

packages/explorer/src/FileThumb.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import clsx from "clsx";
+import { FileThumb, type FileThumbProps } from "./FileThumb";
+
+export interface GridItemTag {
+	color: string;
+	name: string;
+}
+
+export interface GridItemProps {
+	/** File/folder display name */
+	name: string;
+	/** File extension (shown appended to name) */
+	extension?: string | null;
+	/** File size formatted as string (e.g., "1.2 MB") */
+	sizeText?: string | null;
+	/** Whether this item is currently selected */
+	selected?: boolean;
+	/** Tags to display as colored dots below the name */
+	tags?: GridItemTag[];
+	/** Size of the thumbnail area in pixels */
+	thumbSize?: number;
+	/** Props passed through to FileThumb (icon source accepts URL string or StaticImageData) */
+	thumb: Pick<FileThumbProps, "iconSrc" | "thumbnailSrc" | "beardedIconSrc" | "frameClassName">;
+	/** Volume capacity bar (optional, for volume items) */
+	volumeBar?: React.ReactNode;
+	/** Event handlers */
+	onClick?: (e: React.MouseEvent) => void;
+	onDoubleClick?: (e: React.MouseEvent) => void;
+	onContextMenu?: (e: React.MouseEvent) => void;
+	className?: string;
+}
+
+export function GridItem({
+	name,
+	extension,
+	sizeText,
+	selected = false,
+	tags,
+	thumbSize = 80,
+	thumb,
+	volumeBar,
+	onClick,
+	onDoubleClick,
+	onContextMenu,
+	className,
+}: GridItemProps) {
+	const displayName = extension ? `${name}.${extension}` : name;
+
+	return (
+		<div
+			onClick={onClick}
+			onDoubleClick={onDoubleClick}
+			onContextMenu={onContextMenu}
+			tabIndex={-1}
+			className={clsx(
+				"cursor-default transition-colors outline-none focus:outline-none",
+				"flex flex-col items-center gap-2 p-1 rounded-lg",
+				className,
+			)}
+		>
+			{/* Thumbnail container */}
+			<div
+				className={clsx(
+					"rounded-lg p-2",
+					selected ? "bg-app-box" : "bg-transparent",
+				)}
+			>
+				<FileThumb
+					{...thumb}
+					size={thumbSize}
+				/>
+			</div>
+
+			{/* Name + metadata */}
+			<div className="w-full flex flex-col items-center">
+				<div
+					className={clsx(
+						"text-sm truncate px-2 py-0.5 rounded-md inline-block max-w-full",
+						selected ? "bg-accent text-white" : "text-ink",
+					)}
+				>
+					{displayName}
+				</div>
+
+				{/* Volume capacity bar */}
+				{volumeBar}
+
+				{/* File size */}
+				{sizeText && !volumeBar && (
+					<div className="text-xs text-ink-dull mt-0.5">
+						{sizeText}
+					</div>
+				)}
+
+				{/* Tag dots */}
+				{tags && tags.length > 0 && (
+					<div
+						className="flex items-center gap-1 mt-1"
+						title={tags.map((t) => t.name).join(", ")}
+					>
+						{tags.slice(0, 3).map((tag) => (
+							<div
+								key={tag.name}
+								className="size-2 rounded-full"
+								style={{ backgroundColor: tag.color }}
+								title={tag.name}
+							/>
+						))}
+						{tags.length > 3 && (
+							<span className="text-[10px] text-ink-faint font-medium">
+								+{tags.length - 3}
+							</span>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

packages/explorer/src/GridItem.tsx

@@ -1,11 +1,16 @@
-// @spaceui/explorer — small, reusable explorer primitives
+// @spaceui/explorer — presentational file management components
 //
-// Large feature components (Inspector, QuickPreview, PathBar, DragOverlay,
-// FileGrid, FileList, FileThumb, KindIcon) belong in @sd/interface,
-// not in the shared UI library.
+// These are dumb components: props-in, callbacks-out, no data fetching,
+// no context, no business logic. Consumers wire up their own state.
 
 export { TagPill } from "./TagPill";
 export type { TagPillProps } from "./TagPill";
 
 export { RenameInput } from "./RenameInput";
 export type { RenameInputProps } from "./RenameInput";
+
+export { FileThumb } from "./FileThumb";
+export type { FileThumbProps, IconSource } from "./FileThumb";
+
+export { GridItem } from "./GridItem";
+export type { GridItemProps, GridItemTag } from "./GridItem";