23:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 24:T936,type Place = { id: string name: string kind: "phone" | "camera" | "disk" | "folder" count?: number online?: boolean children?: Place[] } const PLACES: Place[] = [ { id: "iphone", name: "iphone", kind: "phone", children: [ { id: "iphone/2025", name: "2025", kind: "folder", count: 1 }, { id: "iphone/2026", name: "2026", kind: "folder", count: 9 }, ], }, { id: "camera", name: "camera", kind: "camera", count: 16 }, { id: "archive", name: "archive disk", kind: "disk", count: 4, online: false, }, ] // A place's count is its own files plus everything under it. const COUNTS = rollup(PLACES, ownChildren, (p) => p.count ?? 0) function Locations() { const [selected, setSelected] = React.useState(["iphone/2026"]) const PlaceIcon = (p: Place, open: boolean) => { if (p.kind === "folder") return if (p.kind === "phone") return if (p.kind === "camera") return return p.online === false ? : } return (

p.name} icon={(p, s) => PlaceIcon(p, s.expanded)} meta={(p) => p.online === false ? `offline · ${COUNTS.get(p.id)}` : COUNTS.get(p.id) } dimmed={(p) => p.online === false} disabled={(p) => p.online === false} defaultExpanded={["iphone"]} selected={selected} onSelectedChange={setSelected} />

) } function GlassLocations() { const [selected, setSelected] = React.useState(["camera"]) return (

p.name} meta={(p) => COUNTS.get(p.id)} dimmed={(p) => p.online === false} disabled={(p) => p.online === false} defaultExpanded={["iphone"]} selected={selected} onSelectedChange={setSelected} className="h-full" />

) } 25:T7526,

type Place = {
  id: string
  name: string
  kind: "phone" | "camera" | "disk" | "folder"
  count?: number
  online?: boolean
  children?: Place[]
}

const PLACES: Place[] = [
  {
    id: "iphone",
    name: "iphone",
    kind: "phone",
    children: [
      { id: "iphone/2025", name: "2025", kind: "folder", count: 1 },
      { id: "iphone/2026", name: "2026", kind: "folder", count: 9 },
    ],
  },
  { id: "camera", name: "camera", kind: "camera", count: 16 },
  {
    id: "archive",
    name: "archive disk",
    kind: "disk",
    count: 4,
    online: false,
  },
]

// A place's count is its own files plus everything under it.
const COUNTS = rollup(PLACES, ownChildren, (p) => p.count ?? 0)

function Locations() {
  const [selected, setSelected] = React.useState(["iphone/2026"])
  const PlaceIcon = (p: Place, open: boolean) => {
    if (p.kind === "folder")
      return <FileIcon name={p.name} folder open={open} />
    if (p.kind === "phone") return <ICONS.phone />
    if (p.kind === "camera") return <ICONS.camera />
    return p.online === false ? <ICONS.diskOffline /> : <ICONS.disk />
  }
  return (
    <div className={PANEL}>
      <Tree
        aria-label="locations"
        items={PLACES}
        label={(p) => p.name}
        icon={(p, s) => PlaceIcon(p, s.expanded)}
        meta={(p) =>
          p.online === false
            ? `offline · ${COUNTS.get(p.id)}`
            : COUNTS.get(p.id)
        }
        dimmed={(p) => p.online === false}
        disabled={(p) => p.online === false}
        defaultExpanded={["iphone"]}
        selected={selected}
        onSelectedChange={setSelected}
      />
    </div>
  )
}

function GlassLocations() {
  const [selected, setSelected] = React.useState(["camera"])
  return (
    <div className="rounded-2xl bg-[url(/lightbox/peaks.jpg)] bg-cover bg-center p-8">
      <div className="h-56 w-72">
        <Tree
          material="glass"
          scheme="dark"
          aria-label="locations"
          items={PLACES}
          label={(p) => p.name}
          meta={(p) => COUNTS.get(p.id)}
          dimmed={(p) => p.online === false}
          disabled={(p) => p.online === false}
          defaultExpanded={["iphone"]}
          selected={selected}
          onSelectedChange={setSelected}
          className="h-full"
        />
      </div>
    </div>
  )
}

<GlassLocations />

1f:["$","div","glass",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L23",null,{"value":"$24","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$25"}}],false]}]