File browser

import { FileBrowser } from "@/components/blocks/file-browser";

import { FileBrowser } from "@/components/blocks/file-browser";

const items = [
  {
    name: "0. Client Provided Assets",
    children: [
      {
        name: "campus-exterior.jpg",
        src: "https://cdn.example.com/campus-exterior.jpg",
        // Everything the preview lists, as one object. You name the groups
        // and the rows — nothing is derived.
        details: {
          "File info": {
            Size: "4 MB",
            Modified: "Sept 27, 2026",
            Kind: "JPEG image",
            Access: "Church Media Squad",
          },
          "Upload info": {
            "Content-Type": "image/jpeg",
            "x-amz-meta-form_id": "wpnA50mJ",
            "x-amz-meta-submission_id": "771fdcf8-63b1-4366-b746-9b391d7d3717",
          },
        },
      },
    ],
  },
  {
    name: "1. Design",
    children: [
      {
        name: "announcement-key-art.psd",
        src: "https://cdn.example.com/key-art-preview.jpg",
        details: {
          "File info": { Size: "176 MB", Modified: "Sept 28, 2026" },
          "Department info": {
            Department: "Design",
            Designer: "Avery Diaz",
            Stage: "In review",
            Round: 3,
          },
          // A Supabase files.file_metadata row drops straight in.
          "Object metadata": {
            "Content-Type": "image/vnd.adobe.photoshop",
            "x-amz-meta-source": "dropbox",
            "x-amz-meta-dropbox_path": "/Church Media Company Team Folder/…/announcement-key-art.psd",
            "x-amz-meta-synced_at": "2026-09-28T14:16:29.212Z",
          },
        },
      },
    ],
  },
  // A folder with nothing in it yet — an empty children array still reads as
  // a folder, so it draws a caret.
  { name: "3. Delivery", children: [] },
  {
    name: "run-of-show.pdf",
    details: { "File info": { Size: "863 KB", Modified: "Sept 30, 2026" } },
  },
];

export function Example() {
  return (
    <FileBrowser
      items={items}
      breadcrumbs={[{ label: "Project Staging" }, { label: "Video" }]}
      title="1. Source Files"
      defaultExpandedIds={["1. Design"]}
      onSelect={(node, path) => console.log(path.join("/"), node)}
    />
  );
}

FileBrowser                      (records-shell — same container as data grid v3)
├── top bar (.records-toolbar)
│   ├── TextField                search → FileTree's `filter`, or `onSearch`
│   └── actions                  + New (newMenu) · Filters · ⋯ (folderMenu)
├── body
│   ├── FileTree                 items, columns, contextMenu, loadChildren
│   │                            columns → a header row + a cell per row
│   │                            double-click a folder → the tree re-roots there
│   ├── divider                  drag to resize (or ←/→ when focused)
│   └── preview pane             drawn only once a FILE is selected; closes
│                                 on its ✕ without clearing the selection
│       ├── top bar              previewActions, left-aligned, beside the ✕
│       ├── name + art board (60%)  the name over the artwork, flush left;
│       │                        an image keeps its OWN shape — no letterbox
│       └── details cards (40%)  ONE card per group, rows as a stacked
│                                 DescriptionList, a MIME type as a badge;
│                                 stack under the board below lg
└── path bar                     Finder's: full width, at the foot, click any
                                 crumb to climb back out. Always opens with a
                                 duotone house — the ROOT, and the one crumb
                                 the fitter never folds away