50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1da1,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Collapsible, CollapsibleContent, CollapsibleList, CollapsibleTrigger } from "@/components/ui/collapsible" import { Item, ItemActions, ItemTitle } from "@/components/ui/item" type TreeNode = { id: string label: React.ReactNode /** A folder holds children; a node without them is a leaf. An empty array is an empty folder. */ children?: TreeNode[] /** Set at the end of the line after a dotted leader, as a contents page sets its page numbers: a size, a count, a folio. */ value?: React.ReactNode /** A leaf that goes somewhere is a link. */ href?: string } type TreeProps = Omit, "children"> & { nodes: TreeNode[] /** * branch: a hairline spine hangs from under each open folder's first letter and every name sits on it at a dot; a * closed folder is a ring, an open one a filled dot, the chosen leaf the accent. outline: the book's decimal * contents, each name numbered by its place (1, 1.2, 1.2.3) in a pencil column, and no lines at all. */ variant?: "branch" | "outline" /** The chosen leaf's id, controlled or not. */ selected?: string | null defaultSelected?: string | null onSelectedChange?: (id: string) => void /** The open folders' ids, controlled or not. */ expanded?: string[] defaultExpanded?: string[] onExpandedChange?: (ids: string[]) => void /** A folder longer than this shows its first rows, then "and 6 more", as a collapsible does. */ limit?: number } type Ctx = { selected: string | null; select: (id: string) => void; open: Set; toggle: (id: string, open: boolean) => void; limit: number; touched: React.RefObject } const TreeCtx = React.createContext(null) const CONTROLS = "summary, .ot-tree-name" /** * A hierarchy you open a folder at a time: native disclosures, so every folder opens with Enter or Space and Tab * walks it. The arrows walk it too, as a tree: up and down through what shows, right to open or step in, left to * close or step out, Home and End to the ends. */ function Tree({ nodes, variant = "branch", selected, defaultSelected = null, onSelectedChange, expanded, defaultExpanded = [], onExpandedChange, limit = Infinity, className, onKeyDown, ...props }: TreeProps) { const [ownSelected, setOwnSelected] = React.useState(defaultSelected) const [ownOpen, setOwnOpen] = React.useState(() => new Set(defaultExpanded)) const touched = React.useRef(false) // a folder that opens before anyone touches the tree (open from the start) doesn't play its arrival const open = React.useMemo(() => (expanded ? new Set(expanded) : ownOpen), [expanded, ownOpen]) const ctx: Ctx = { selected: selected === undefined ? ownSelected : selected, select(id) { if (selected === undefined) setOwnSelected(id) onSelectedChange?.(id) }, open, toggle(id, now) { if (open.has(id) === now) return const next = new Set(open) if (now) next.add(id) else next.delete(id) if (!expanded) setOwnOpen(next) onExpandedChange?.([...next]) }, limit, touched, } function walk(e: React.KeyboardEvent) { onKeyDown?.(e) const at = e.target as HTMLElement if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || !at.matches(CONTROLS)) return const all = [...e.currentTarget.querySelectorAll(CONTROLS)].filter((el) => el.checkVisibility()) const i = all.indexOf(at) const rtl = getComputedStyle(at).direction === "rtl" const key = rtl ? ({ ArrowLeft: "ArrowRight", ArrowRight: "ArrowLeft" } as Record)[e.key] ?? e.key : e.key const folder = at.localName === "summary" ? (at.parentElement as HTMLDetailsElement) : null let to: HTMLElement | null | undefined if (key === "ArrowDown") to = all[i + 1] else if (key === "ArrowUp") to = all[i - 1] else if (key === "Home") to = all[0] else if (key === "End") to = all.at(-1) else if (key === "ArrowRight" && folder) { if (!folder.open) folder.open = true else to = all[i + 1] } else if (key === "ArrowLeft") { if (folder?.open) folder.open = false else to = (folder ?? at).parentElement?.closest("details")?.querySelector(":scope > summary") } else return e.preventDefault() to?.focus() } return (

void (touched.current = true)} onKeyDownCapture={() => void (touched.current = true)} {...props} >

) } function Branch({ nodes }: { nodes: TreeNode[] }) { const { limit } = React.useContext(TreeCtx)! const cut = nodes.length > limit ? Math.max(1, limit) : nodes.length const rest = nodes.slice(cut) return (

))} {rest.length ? (

and {rest.length} more {rest.map((n) => ( ))}

) : null}

) } function Node({ node }: { node: TreeNode }) { const { selected, select, open, toggle, touched } = React.useContext(TreeCtx)! const [arriving, setArriving] = React.useState(false) const end = node.value === undefined ? null : {node.value} if (!node.children) { const current = selected === node.id const name = {node.label} return ( {node.href ? ( select(node.id)}> {name} ) : ( )} {end} ) } const n = node.children.length return (

{ if (e.target !== e.currentTarget) return // a tail's toggle inside bubbles up const now = e.currentTarget.open setArriving(now && touched.current) toggle(node.id, now) }} >

{node.label} , {n === 1 ? "1 item" : `${n} items`} {end}

{n ? :

Empty

}

) } export { Tree, type TreeProps, type TreeNode } 55:T1c77,@layer components { /* ── ot-tree ── a hierarchy set as a contents page: names on hairline branches. Each open folder's branch hangs from under the first letter of its name, and every name sits on it at a dot, so the depth is read off the lines, not from boxes or icons. A leaf is a small graphite dot, a closed folder a ring, an open one a filled dot; the chosen leaf is the one accent and its name turns italic. A value (a size, a folio) is joined to its name by the item's leader. */ .ot-tree { --ot-tree-pad: var(--ot-space-2); /* a row's padding above and below its name */ --ot-tree-indent: var(--ot-space-5); /* from a dot to its name, and so from a branch to the next one in */ --d: 7px; padding-inline-start: calc(var(--d) / 2); min-width: 0; font-size: var(--ot-p); line-height: var(--ot-p-lh); letter-spacing: var(--ot-p-tr); } .ot-tree-list { list-style: none; margin: 0; padding: 0; } .ot-tree-list .ot-tree-list { padding-inline-start: var(--ot-tree-indent); } .ot-tree .ot-tree-node { position: relative; padding: 0; border: 0; } .ot-tree .ot-tree-row { position: relative; display: flex; align-items: baseline; gap: var(--ot-space-4); padding-block: var(--ot-tree-pad); padding-inline-start: var(--ot-tree-indent); border: 0; } .ot-tree-folder > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ot-tree-folder > summary::-webkit-details-marker { display: none; } /* The branch: each row carries its own length of it, the last one stopping at its dot. */ .ot-tree-node::before, .ot-tree-tail::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--ot-hairline) / -2); inline-size: var(--ot-hairline); background: var(--ot-rule-strong); transform-origin: top; } :is(.ot-tree-list, .ot-tree .ot-collapse-list) > :is(.ot-tree-node, .ot-tree-tail):last-child::before { inset-block-end: auto; block-size: calc(var(--ot-tree-pad) + 0.5lh); } .ot-tree > .ot-tree-list > :first-child::before { inset-block-start: calc(var(--ot-tree-pad) + 0.5lh); } /* the root's branch starts at its first name */ .ot-tree > .ot-tree-list > :only-child::before { content: none; } .ot-tree-list > .ot-tree-tail:has(> .ot-collapse[open])::before { block-size: calc(2 * var(--ot-tree-pad) + 1lh); } /* The dots */ .ot-tree-row::after { content: ""; position: absolute; box-sizing: border-box; inset-inline-start: calc(var(--d) / -2); inset-block-start: calc(var(--ot-tree-pad) + 0.5lh - var(--d) / 2); inline-size: var(--d); block-size: var(--d); border-radius: 50%; border: var(--ot-hairline) solid var(--c, var(--ot-graphite)); background: var(--c, var(--ot-graphite)); scale: 0.6; transition: scale var(--ot-moderato) var(--ot-spiccato), background-color var(--ot-allegro), border-color var(--ot-allegro); } .ot-tree-folder > .ot-tree-row::after { --c: var(--ot-ink); scale: 1; background: var(--ot-paper); } .ot-tree-folder[open] > .ot-tree-row::after { background: var(--ot-ink); } .ot-tree-row[data-selected]::after { --c: var(--ot-accent); scale: 1; } /* The names: folders set firm, leaves in graphite that inks as you point; the chosen one italic, as yours. */ .ot-tree-name { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--ot-graphite); text-align: start; text-decoration: none; cursor: pointer; transition: color var(--ot-allegro); } .ot-tree-row:is(:hover, :focus-within, [data-force~="hover"]) .ot-tree-name, .ot-tree-name[aria-current] { color: var(--ot-ink); } .ot-tree-name[aria-current] .ot-item-title { font-style: italic; } .ot-tree-folder > summary .ot-item-title { font-weight: 500; } .ot-tree-count { margin-inline-start: 0.2em; font-size: var(--ot-pp); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ot-pencil); } .ot-tree .ot-item-end { color: var(--ot-graphite); } .ot-tree-folder > summary:is(:hover, :focus-visible, [data-force~="hover"]) .ot-item-leader::after { mask-position: 0 0; mask-size: 100% 100%; } .ot-tree-empty { margin: 0; padding-block: var(--ot-tree-pad); padding-inline-start: calc(2 * var(--ot-tree-indent)); font-size: var(--ot-pp); color: var(--ot-pencil); } /* A long folder ends in the rest of itself, as the collapsible does: "and 6 more" stands on the branch's end. */ .ot-tree-tail { position: relative; } .ot-tree .ot-tree-tail > .ot-collapse:is(*, [open]) > summary { --py: var(--ot-tree-pad); display: flex; inline-size: fit-content; margin-block: 0; margin-inline: var(--ot-tree-indent) 0; line-height: inherit; } .ot-tree .ot-collapse-list > li { padding-block: 0; border: 0; } .ot-tree .ot-tree-tail > .ot-collapse::details-content { overflow-clip-margin: var(--d); } /* the rest's dots and branch stand on its edge */ .ot-tree .ot-collapse-list > .ot-tree-row { padding-block: var(--ot-tree-pad); } /* Opening a folder: its branch draws down and its names arrive in turn under it. Not for folders open from the start. */ .ot-tree-folder::details-content { block-size: 0; overflow: clip; transition: block-size var(--ot-andante) var(--ot-exhale), content-visibility var(--ot-andante) allow-discrete; } .ot-tree-folder[open]::details-content { block-size: auto; } .ot-tree-folder[data-arriving][open] > .ot-tree-list > li { animation: ot-arrive var(--ot-moderato) var(--ot-exhale) backwards; animation-delay: calc(sibling-index() * 2 * var(--ot-arpeggio)); } .ot-tree-folder[data-arriving][open] > .ot-tree-list > li::before { animation: ot-draw-y var(--ot-andante) var(--ot-exhale) backwards; animation-delay: calc((sibling-index() - 1) * 2 * var(--ot-arpeggio)); } /* ── outline ── the book's decimal contents: every name numbered by its place (1, 1.2, 1.2.3) in a pencil column, flush to one edge at every depth, and no lines; the depth is in the numbers. An open folder's number inks; the chosen leaf's is the accent. */ .ot-tree[data-variant="outline"] { --ot-tree-indent: calc(3em + var(--ot-space-4)); padding-inline-start: 0; } .ot-tree[data-variant="outline"] .ot-tree-list { padding-inline-start: 0; counter-reset: ot-tree; } .ot-tree[data-variant="outline"] .ot-tree-node { counter-increment: ot-tree; } .ot-tree[data-variant="outline"] :is(.ot-tree-node, .ot-tree-tail)::before { content: none; } .ot-tree[data-variant="outline"] .ot-tree-row { padding-inline-start: 0; } .ot-tree[data-variant="outline"] .ot-tree-row::after { content: counters(ot-tree, ".") / ""; position: static; order: -1; flex: none; inline-size: 3em; block-size: auto; scale: 1; border: 0; border-radius: 0; background: none; font-variant-numeric: tabular-nums; color: var(--c, var(--ot-pencil)); transition: color var(--ot-allegro); } .ot-tree[data-variant="outline"] .ot-tree-folder[open] > .ot-tree-row::after { --c: var(--ot-ink); } .ot-tree[data-variant="outline"] .ot-tree-row[data-selected]::after { --c: var(--ot-accent); } .ot-tree[data-variant="outline"] .ot-tree-list .ot-tree-list .ot-tree-folder > summary .ot-item-title { font-weight: 400; } .ot-tree[data-variant="outline"] > .ot-tree-list > .ot-tree-node > .ot-tree-folder > summary .ot-item-title { font-weight: 600; } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json","https://thedirectors.agency/ui/r/collapsible.json","https://thedirectors.agency/ui/r/item.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/tree.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/tree.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/tree.css","content":"$55","type":"registry:file","target":"styles/0nlytype/tree.css"}],"className":"h-[70svh] min-h-80"}]]}]