26:Tac80,
type Entry = {
  id: string
  name: string
  folder?: boolean
  children?: Entry[]
}

const folder = (id: string, name: string, children?: Entry[]): Entry => ({
  id,
  name,
  folder: true,
  children,
})
const file = (id: string, name: string): Entry => ({ id, name })

// A library big enough to need the window: 60 days of 80 shots, 4800 rows.
const KINDS = ["mov", "heic", "jpg", "dng", "m4a"]
const DAYS = Array.from({ length: 60 }, (_, d) => {
  const day = `2026-${String(Math.floor(d / 28) + 7).padStart(2, "0")}-${String((d % 28) + 1).padStart(2, "0")}`
  return folder(
    `photos/${day}`,
    day,
    Array.from({ length: 80 }, (_, i) => {
      const name = `img_${String(d * 80 + i).padStart(4, "0")}.${KINDS[(d + i) % KINDS.length]}`
      return file(`photos/${day}/${name}`, name)
    }),
  )
})

const FILES: Entry[] = [
  folder("site", "site", [
    folder("site/app", "app", [
      file("site/app/page.tsx", "page.tsx"),
      file("site/app/globals.css", "globals.css"),
    ]),
    file("site/package.json", "package.json"),
    file("site/readme.md", "readme.md"),
    file("site/brief.pdf", "brief.pdf"),
    file("site/fonts.zip", "fonts.zip"),
    file("site/budget.csv", "budget.csv"),
  ]),
  folder("photos", "photos", DAYS),
  // Children fetched on first open: no `children` yet, `folder` says it has some.
  folder("share", "network share"),
]

const loadShare = (e: Entry): Promise<Entry[]> =>
  new Promise((done) =>
    setTimeout(
      () =>
        done([
          file(`${e.id}/cut-v3.mov`, "cut-v3.mov"),
          file(`${e.id}/score.wav`, "score.wav"),
          file(`${e.id}/notes.txt`, "notes.txt"),
        ]),
      900,
    ),
  )

function Files() {
  const tree = React.useRef<TreeHandle>(null)
  const [filter, setFilter] = React.useState("")
  const [density, setDensity] = React.useState<TreeDensity>("compact")
  return (
    <div className={cn(PANEL, "w-80")}>
      <div className="flex items-center gap-1 px-1 pb-1">
        <Input
          size="sm"
          aria-label="filter"
          placeholder="filter"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="min-w-0 flex-1"
        />
        <Button
          size="sm"
          variant="ghost"
          onClick={() => tree.current?.expandAll()}
        >
          open all
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={() => tree.current?.collapseAll()}
        >
          close
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={() =>
            setDensity((d) => (d === "compact" ? "comfortable" : "compact"))
          }
        >
          {density === "compact" ? "roomy" : "dense"}
        </Button>
      </div>
      <Tree
        ref={tree}
        aria-label="files"
        className="h-80"
        items={FILES}
        label={(e) => e.name}
        icon={(e, s) => (
          <FileIcon name={e.name} folder={e.folder} open={s.expanded} />
        )}
        meta={(e) => e.children?.length}
        isBranch={(e) => !!e.folder}
        loadChildren={loadShare}
        filter={filter}
        remembered={OPEN}
        selection="multi"
        density={density}
        guides
      />
    </div>
  )
}

<Files />
25:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}]