@elabs-ai/components-ai 4.0.0

package/src/file-tree.tsx

@@ -0,0 +1,390 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  fileIconFor,
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { LucideIcon } from "lucide-react";
+import {
+  ChevronRightIcon,
+  DatabaseIcon,
+  FileCode2Icon,
+  FileIcon,
+  FileTextIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  ImageIcon,
+  TableIcon,
+} from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import type { ContextAsset, ContextAssetType } from "./context-panel";
+
+interface FileTreeContextType {
+  expandedPaths: Set<string>;
+  togglePath: (path: string) => void;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+}
+
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => {};
+
+const FileTreeContext = createContext<FileTreeContextType>({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: new Set(),
+  togglePath: noop,
+});
+
+/**
+ * Visual axis (#193, research 04 §4 ASSET-1): `code` (default, unchanged) is
+ * the IDE source tree — mono + hard box; `document` is the produced-asset
+ * look — sans body role, no box (section label + spacing separate it,
+ * research 08), for trees of documents rather than source files.
+ */
+const fileTreeVariants = cva("", {
+  variants: {
+    variant: {
+      code: "rounded-lg border bg-background font-mono text-sm",
+      document: "text-body",
+    },
+  },
+  defaultVariants: { variant: "code" },
+});
+
+export type FileTreeVariant = NonNullable<VariantProps<typeof fileTreeVariants>["variant"]>;
+
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> &
+  VariantProps<typeof fileTreeVariants> & {
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selectedPath?: string;
+    onSelect?: (path: string) => void;
+    onExpandedChange?: (expanded: Set<string>) => void;
+  };
+
+export const FileTree = forwardRef<HTMLDivElement, FileTreeProps>(function FileTree(
+  {
+    expanded: controlledExpanded,
+    defaultExpanded = new Set(),
+    selectedPath,
+    onSelect,
+    onExpandedChange,
+    variant,
+    className,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+
+  const togglePath = useCallback(
+    (path: string) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath],
+  );
+
+  return (
+    <FileTreeContext.Provider value={contextValue}>
+      <div
+        ref={ref}
+        className={cn(fileTreeVariants({ variant }), className)}
+        role="tree"
+        {...props}
+      >
+        <div className={cn(variant === "document" ? undefined : "p-2")}>{children}</div>
+      </div>
+    </FileTreeContext.Provider>
+  );
+});
+
+export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeIcon = ({ className, children, ...props }: FileTreeIconProps) => (
+  <span className={cn("shrink-0", className)} {...props}>
+    {children}
+  </span>
+);
+
+export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeName = ({ className, children, ...props }: FileTreeNameProps) => (
+  <span className={cn("truncate", className)} {...props}>
+    {children}
+  </span>
+);
+
+interface FileTreeFolderContextType {
+  path: string;
+  name: string;
+  isExpanded: boolean;
+}
+
+const FileTreeFolderContext = createContext<FileTreeFolderContextType>({
+  isExpanded: false,
+  name: "",
+  path: "",
+});
+
+export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+};
+
+export const FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}: FileTreeFolderProps) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const folderContextValue = useMemo(() => ({ isExpanded, name, path }), [isExpanded, name, path]);
+
+  return (
+    <FileTreeFolderContext.Provider value={folderContextValue}>
+      <Collapsible onOpenChange={handleOpenChange} open={isExpanded}>
+        <div className={cn("", className)} role="treeitem" tabIndex={0} {...props}>
+          <div
+            className={cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-start transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted",
+            )}
+          >
+            <CollapsibleTrigger asChild>
+              <button
+                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
+                type="button"
+              >
+                <ChevronRightIcon
+                  className={cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90",
+                  )}
+                  data-rtl-flip
+                />
+              </button>
+            </CollapsibleTrigger>
+            <button
+              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-start"
+              onClick={handleSelect}
+              type="button"
+            >
+              <FileTreeIcon>
+                {isExpanded ? (
+                  <FolderOpenIcon className="size-4 text-primary" />
+                ) : (
+                  <FolderIcon className="size-4 text-primary" />
+                )}
+              </FileTreeIcon>
+              <FileTreeName>{name}</FileTreeName>
+            </button>
+          </div>
+          <CollapsibleContent>
+            <div className="ms-4 border-s ps-2">{children}</div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </FileTreeFolderContext.Provider>
+  );
+};
+
+interface FileTreeFileContextType {
+  path: string;
+  name: string;
+}
+
+const FileTreeFileContext = createContext<FileTreeFileContextType>({
+  name: "",
+  path: "",
+});
+
+export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+  icon?: ReactNode;
+};
+
+export const FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}: FileTreeFileProps) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path],
+  );
+
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+
+  return (
+    <FileTreeFileContext.Provider value={fileContextValue}>
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted",
+          className,
+        )}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role="treeitem"
+        tabIndex={0}
+        {...props}
+      >
+        {children ?? (
+          <>
+            {/* Spacer for alignment */}
+            <span className="size-4 shrink-0" />
+            <FileTreeIcon>
+              {icon ?? <FileIcon className="size-4 text-muted-foreground" />}
+            </FileTreeIcon>
+            <FileTreeName>{name}</FileTreeName>
+          </>
+        )}
+      </div>
+    </FileTreeFileContext.Provider>
+  );
+};
+
+export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+
+const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
+
+export const FileTreeActions = ({ className, children, ...props }: FileTreeActionsProps) => (
+  <div
+    className={cn("ms-auto flex items-center gap-1", className)}
+    onClick={stopPropagation}
+    onKeyDown={stopPropagation}
+    role="group"
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+/** Asset-type glyphs (lucide, research 04 §4) — doc / code / sql / csv / image. */
+export const PRODUCED_ASSET_ICONS: Record<ContextAssetType, LucideIcon> = {
+  markdown: FileTextIcon,
+  code: FileCode2Icon,
+  sql: DatabaseIcon,
+  csv: TableIcon,
+  image: ImageIcon,
+};
+
+/**
+ * The glyph for one asset.
+ *
+ * A FILE-BACKED asset (`source` set — a PDF, a deck, a video reaching the rail
+ * through `AssetPreview`'s `renderPreview` seam) carries a `type` from a closed
+ * five-member union that cannot describe it, so the type-keyed glyph above
+ * would lie: a PDF typed `code` would draw a code glyph. Its name and MIME do
+ * know, so those go through the shared resolver instead (ADR 0024 §6).
+ *
+ * An asset with inline `content` keeps the type-keyed glyph exactly as before —
+ * for those the author's `type` is the better answer, not a guess from a
+ * filename.
+ */
+function assetIcon(asset: ContextAsset): LucideIcon {
+  return asset.source ? fileIconFor(asset.name, asset.mediaType) : PRODUCED_ASSET_ICONS[asset.type];
+}
+
+export type ProducedAssetTreeProps = Omit<
+  FileTreeProps,
+  "variant" | "onSelect" | "selectedPath"
+> & {
+  /** The produced assets, in display order. */
+  assets: ContextAsset[];
+  /** Selected asset id (mirror `useContextPanel().state.selectedAsset?.id`). */
+  selectedId?: string;
+  /** Called with the chosen asset — wire to `useContextPanel().actions.openDetail`. */
+  onSelect?: (asset: ContextAsset) => void;
+};
+
+/**
+ * ProducedAssetTree — the document-variant preset (#193, research 04 §4):
+ * produced assets are documents, not source code, so the tree reads sans,
+ * box-free, with first-class asset-type icons. Pair with `ContextPanelSection`
+ * for the label; selection drives the ContextPanel drill-in.
+ */
+export const ProducedAssetTree = forwardRef<HTMLDivElement, ProducedAssetTreeProps>(
+  function ProducedAssetTree({ assets, selectedId, onSelect, ...props }, ref) {
+    const assetsById = useMemo(() => new Map(assets.map((asset) => [asset.id, asset])), [assets]);
+    const handleSelect = useCallback(
+      (path: string) => {
+        const asset = assetsById.get(path);
+        if (asset) onSelect?.(asset);
+      },
+      [assetsById, onSelect],
+    );
+    return (
+      <FileTree
+        ref={ref}
+        variant="document"
+        selectedPath={selectedId}
+        onSelect={handleSelect}
+        {...props}
+      >
+        {assets.length === 0 ? (
+          <p className="px-2 py-1 text-body text-muted-foreground">No assets produced yet.</p>
+        ) : (
+          assets.map((asset) => {
+            const Icon = assetIcon(asset);
+            return (
+              <FileTreeFile key={asset.id} path={asset.id} name={asset.name}>
+                <FileTreeIcon>
+                  <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
+                </FileTreeIcon>
+                <FileTreeName>{asset.name}</FileTreeName>
+              </FileTreeFile>
+            );
+          })
+        )}
+      </FileTree>
+    );
+  },
+);

package/src/gallery.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { Badge } from "@elabs-ai/components-ui";
+import { Gallery, type GalleryImage } from "./gallery";
+
+/**
+ * Offline, deterministic placeholder image (inline SVG data URI) so stories
+ * render identically in CI / visual review without a network round-trip.
+ */
+function photo(label: string, bg: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><rect width="600" height="600" fill="${bg}"/><text x="300" y="312" font-family="system-ui,sans-serif" font-size="44" fill="#ffffff" text-anchor="middle">${label}</text></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+const CONCEPTS = [
+  {
+    title: "Fjord at dawn",
+    color: "#1f6f78",
+    alt: "Aurora reflected over a glacial fjord at dawn",
+  },
+  { title: "Desert monolith", color: "#8a5a44", alt: "A lone sandstone monolith under a noon sun" },
+  { title: "Neon arcade", color: "#3b4a6b", alt: "Rain-soaked arcade alley lit by neon signage" },
+  { title: "Coral shelf", color: "#2f7d6b", alt: "Sunlit coral shelf teeming with fish" },
+  { title: "Pine cathedral", color: "#4a6b3b", alt: "Tall pines forming a cathedral of light" },
+  { title: "Brass orrery", color: "#b08949", alt: "A brass orrery modelling the inner planets" },
+  { title: "Salt flats", color: "#6b6f78", alt: "Mirror-still salt flats after rain" },
+  { title: "Harbour fog", color: "#46618a", alt: "Fishing boats fading into harbour fog" },
+  { title: "Terraced rice", color: "#6b7d3b", alt: "Terraced rice paddies at golden hour" },
+  { title: "Obsidian cave", color: "#3a3550", alt: "Glassy obsidian cave with a shaft of light" },
+  { title: "Lavender rows", color: "#7d5a8a", alt: "Endless rows of lavender under a wide sky" },
+  { title: "Dune ridge", color: "#915b3c", alt: "Wind-carved dune ridge at sunset" },
+] as const;
+
+function makeImage(i: number): GalleryImage {
+  const c = CONCEPTS[i % CONCEPTS.length];
+  return {
+    src: photo(c.title, c.color),
+    alt: c.alt,
+    title: c.title,
+    description: `${c.alt}. Rendered with the diffusion-xl model from a single text prompt.`,
+    meta: [
+      { label: "Model", value: "diffusion-xl" },
+      { label: "Dimensions", value: "1024 × 1024" },
+      { label: "Seed", value: String(40000 + i * 137) },
+      { label: "Steps", value: "40" },
+    ],
+    downloadName: `${c.title.toLowerCase().replace(/\s+/g, "-")}.png`,
+  };
+}
+
+const IMAGES: GalleryImage[] = Array.from({ length: 12 }, (_, i) => makeImage(i));
+
+const meta = {
+  title: "AI/Gallery",
+  component: Gallery,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  decorators: [(Story) => <div className="mx-auto max-w-2xl">{Story()}</div>],
+} satisfies Meta<typeof Gallery>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** A single result renders as one framed image with an always-on expand button. */
+export const SingleImage: Story = {
+  args: { images: IMAGES.slice(0, 1) },
+};
+
+/** A handful of results render as a thumbnail grid (no overflow yet). */
+export const SmallGrid: Story = {
+  name: "Small grid (3)",
+  args: { images: IMAGES.slice(0, 3) },
+};
+
+/** Exactly `maxVisible` images fill the grid with no "+N more" tile. */
+export const FullGrid: Story = {
+  name: "Full grid (exactly 5)",
+  args: { images: IMAGES.slice(0, 5) },
+};
+
+/** Beyond the cap, the last cell collapses into "+N more" and opens the carousel. */
+export const Overflow: Story = {
+  name: "Overflow (+N more)",
+  args: { images: IMAGES },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const overflow = canvas.getByRole("button", { name: /show all 12 images/i });
+    await expect(canvas.getByText(/\+7 more/)).toBeInTheDocument();
+    await userEvent.click(overflow);
+    const dialog = await within(document.body).findByRole("dialog");
+    await expect(dialog).toBeInTheDocument();
+    await expect(within(dialog).getByRole("button", { name: /next slide/i })).toBeInTheDocument();
+  },
+};
+
+/** Images with only `alt` — the detail panel shows a graceful "No details". */
+export const NoMetadata: Story = {
+  name: "No metadata",
+  args: {
+    images: CONCEPTS.slice(0, 4).map((c) => ({ src: photo(c.title, c.color), alt: c.alt })),
+  },
+};
+
+/** Long copy + many fields scroll inside the panel; the image stays put. */
+export const LongContent: Story = {
+  name: "Long description + many fields",
+  args: {
+    images: [
+      {
+        ...makeImage(0),
+        description:
+          "A long-exposure render of a green aurora mirrored in glass-still fjord water at first light. The prompt asked for a low camera angle, a faint mist clinging to the waterline, and distant snow-capped peaks catching the earliest sun. Generated, upscaled, then colour-graded toward cool teal shadows and warm highlights.",
+        meta: [
+          { label: "Model", value: "diffusion-xl" },
+          { label: "Sampler", value: "DPM++ 2M Karras" },
+          { label: "Dimensions", value: "1024 × 1024" },
+          { label: "Upscaled to", value: "4096 × 4096" },
+          { label: "Seed", value: "40000" },
+          { label: "Steps", value: "40" },
+          { label: "Guidance", value: "7.5" },
+          { label: "Created", value: "2026-06-22" },
+        ],
+      },
+    ],
+  },
+};
+
+/** `renderMeta` replaces the default panel body with custom content. */
+export const CustomMeta: Story = {
+  name: "Custom metadata (renderMeta)",
+  args: {
+    images: IMAGES.slice(0, 1),
+    renderMeta: (image) => (
+      <div className="flex flex-col gap-3">
+        <Badge>diffusion-xl</Badge>
+        <p className="text-body text-muted-foreground">{image.description}</p>
+      </div>
+    ),
+  },
+};
+
+/** `hideDownload` removes every download affordance (rights-restricted assets). */
+export const HideDownload: Story = {
+  name: "Download hidden",
+  args: { images: IMAGES.slice(0, 3), hideDownload: true },
+};
+
+/**
+ * LOADING — the set is still being generated. `loading` renders skeleton tiles in
+ * the grid footprint (a status live region for AT) instead of the empty state, so
+ * the panel reserves its space and reads as "working" rather than "nothing here"
+ * (loading-states.md).
+ */
+export const Loading: Story = {
+  name: "Loading (from empty)",
+  args: { images: [], loading: true, expectedCount: 6 },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // The live-region label is populated one tick after mount (ARIA22 —
+    // gallery.tsx mounts the region empty, then sets its text so AT announces
+    // the change), so wait for it with a retrying query (#288).
+    await expect(await canvas.findByText(/loading images/i)).toBeInTheDocument();
+  },
+};
+
+/**
+ * PARTIAL SET — images stream in one at a time. With `expectedCount`, the arrived
+ * tiles render alongside skeleton tiles for the ones still coming, so the grid
+ * fills in place with no reflow and no premature "+N more" collapse.
+ */
+export const PartialSet: Story = {
+  name: "Partial set (arriving)",
+  args: { images: IMAGES.slice(0, 2), expectedCount: 6 },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getAllByRole("button", { name: /fjord|desert/i }).length).toBeGreaterThan(
+      0,
+    );
+    // Still arriving → no overflow collapse yet.
+    await expect(canvas.queryByText(/more/i)).not.toBeInTheDocument();
+  },
+};