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:T1bcf,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Dialog, DialogActions, DialogClose, DialogSurface, DialogTrigger, useDialog } from "@/components/ui/dialog" import { Fraction } from "@/components/ui/fraction" /** A sheet from below. Same props and behaviour as Dialog. */ const Drawer = Dialog const DrawerTrigger = DialogTrigger const DrawerClose = DialogClose /** How far the arc is pulled before a let-go puts the drawer away. Solid's is its own silence, measured. */ const AWAY = 90 const KNOBS = ["--pull", "--solid", "--sink"] type Thirds = { third: number; setThird: (n: number) => void } /** The fermata's arc. Drag it down to put the drawer away; a tap or Enter does the same. */ function DrawerHandle({ label, thirds }: { label: string; thirds?: Thirds }) { const { open, setOpen } = useDialog() const button = React.useRef(null) const from = React.useRef(null) const pulled = React.useRef(0) const give = React.useRef(AWAY) // A drawer put away by a drag keeps its pull until it's opened again. React.useEffect(() => { const d = button.current?.closest("dialog") if (open) KNOBS.forEach((p) => d?.style.removeProperty(p)) }, [open]) const surface = (e: React.SyntheticEvent) => e.currentTarget.closest("dialog") as HTMLDialogElement const step = (n: number) => thirds?.setThird(Math.min(3, Math.max(1, n))) const letGo = (e: React.PointerEvent) => { if (from.current === null) return from.current = null const d = surface(e) const moved = Math.abs(pulled.current) >= 4 if (thirds && e.type === "pointerup") { // Land on the nearest third; lower than half a third, it goes away. A tap raises it a third, round to one. const third = parseFloat(getComputedStyle(d).maxHeight) / 3 const at = d.getBoundingClientRect().height / third d.removeAttribute("data-pulling") d.style.removeProperty("--pull") if (!moved) return step((thirds.third % 3) + 1) if (at < 0.5) return setOpen(false) return step(Math.round(at)) } d.removeAttribute("data-pulling") if (e.type === "pointerup" && (pulled.current >= give.current || !moved)) setOpen(false) else KNOBS.forEach((p) => d.style.setProperty(p, p === "--solid" ? "0" : "0px")) } return ( ) } type DrawerContentProps = React.ComponentProps<"dialog"> & { /** The accessible name of the arc that puts the drawer away (in thirds, that sets its height). */ handleLabel?: string /** * arc: it rises and you drag the arc down to put it away. thirds: it stops at a third, two thirds or the * whole height, and the share stands in the corner as a fraction. solid: pulling the arc first takes out * the silence between its parts, as a compositor sets type solid; only then does it go. */ variant?: "arc" | "thirds" | "solid" } function DrawerContent({ className, children, handleLabel, variant = "arc", style, ...props }: DrawerContentProps) { const { open } = useDialog() const [third, setThird] = React.useState(1) // Every opening starts at a third: reset while rendering the change, not in an effect after it. const [was, setWas] = React.useState(open) if (open !== was) { setWas(open) if (open) setThird(1) } const thirds = variant === "thirds" ? { third, setThird } : undefined return ( {thirds && ( )}

{children}

) } function DrawerTitle({ className, ...props }: React.ComponentProps<"h2">) { const { titleId } = useDialog() return

} function DrawerDescription({ className, ...props }: React.ComponentProps<"p">) { const { descriptionId } = useDialog() return
} function DrawerActions(props: React.ComponentProps<"div">) { return } export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerActions, DrawerActions as DrawerFooter, DrawerClose, type DrawerContentProps } 55:T11c0,@layer components { /* ── ot-drawer ── a sheet from below, lifted by the fermata's arc. The backdrop lives in dialog.css. --pull is set while the arc is dragged. / .ot-drawer { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: 85dvh; padding: 0 var(--ot-margin) var(--ot-space-7); overflow: auto; border: 0; border-top: var(--ot-hairline) solid var(--ot-ink); background: var(--ot-paper); color: var(--ot-graphite); box-shadow: 0 12rem 0 var(--ot-paper); / paper under the rebound, not a shadow / translate: 0 100%; transition: translate var(--ot-andante) var(--ot-spiccato), overlay var(--ot-andante) allow-discrete, display var(--ot-andante) allow-discrete; } .ot-drawer[open] { translate: 0 var(--pull, 0px); } @starting-style { .ot-drawer[open] { translate: 0 100%; } } .ot-drawer[data-pulling] { transition: none; } .ot-drawer-handle { display: block; margin: 0 auto var(--ot-space-4); padding: var(--ot-space-4) var(--ot-space-6) var(--ot-space-2); border: 0; background: none; color: var(--ot-ink); cursor: grab; touch-action: none; } .ot-drawer-handle:active { cursor: grabbing; } .ot-drawer-handle svg { width: 40px; height: 22px; overflow: visible; } .ot-drawer-handle path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .ot-drawer-handle circle { fill: var(--ot-accent); } .ot-drawer-body { display: grid; justify-items: start; gap: var(--ot-space-6); max-width: 40rem; margin-inline: auto; } .ot-drawer-title { font-size: var(--ot-mf); line-height: var(--ot-mf-lh); letter-spacing: var(--ot-mf-tr); font-weight: 300; color: var(--ot-ink); } / Thirds (SPECTRA's 1/3): it stops at a third, two thirds or the whole height. The arc follows the hand either way and lets go on the nearest third, or away below half of one; a tap raises it a third, round to one. The share stands in the far corner as a Fraction, yours in italic, turning on its wheel. --third is set by the component. / .ot-drawer[data-variant="thirds"] { --full: calc(100dvh - var(--ot-space-7)); max-height: var(--full); height: calc(var(--third, 1) var(--full) / 3 - var(--pull, 0px)); min-height: var(--ot-space-8); transition: height var(--ot-andante) var(--ot-spiccato), translate var(--ot-andante) var(--ot-spiccato), overlay var(--ot-andante) allow-discrete, display var(--ot-andante) allow-discrete; } .ot-drawer[data-variant="thirds"][open] { translate: 0 0; } .ot-drawer-share { position: absolute; inset-block-start: var(--ot-space-4); inset-inline-end: var(--ot-margin); pointer-events: none; } .ot-drawer-share .ot-fraction { font-size: var(--ot-f); font-weight: 200; } @media (max-width: 40rem) { .ot-drawer-share { inset-block-start: var(--ot-space-3); } .ot-drawer-share .ot-fraction { font-size: var(--ot-mf); } } .ot-drawer:has(> .ot-drawer-handle:is(:hover, :focus-visible, :active)) .ot-drawer-share .ot-fraction > :is(i, :last-child) { color: var(--ot-ink); } /* Solid (the compositor's leads): the silence between the drawer's parts is its give. Pulling the arc takes it out first, so the drawer closes up and sinks as it does, set solid; only past that does it slide. Let go set solid and it goes; short of that, the silence springs back. Opening, it is let in. While the arc is pulled the script sets --solid (0 to 1: the pull over the silence it measured) and --sink (the pull beyond it). / .ot-drawer[data-variant="solid"] { padding-block-end: calc(var(--ot-space-7) (1 - var(--solid, 0))); transition: translate var(--ot-andante) var(--ot-spiccato), padding-block-end var(--ot-andante) var(--ot-spiccato), overlay var(--ot-andante) allow-discrete, display var(--ot-andante) allow-discrete; } .ot-drawer[data-variant="solid"][open] { translate: 0 var(--sink, 0px); } .ot-drawer[data-variant="solid"] .ot-drawer-body { gap: calc(var(--ot-space-6) * (1 - var(--solid, 0))); transition: gap var(--ot-andante) var(--ot-spiccato); } .ot-drawer[data-variant="solid"] .ot-drawer-handle { margin-block-end: calc(var(--ot-space-4) * (1 - var(--solid, 0))); transition: margin var(--ot-andante) var(--ot-spiccato); } @starting-style { .ot-drawer[data-variant="solid"][open] :is(.ot-drawer-body, .ot-drawer-handle) { gap: 0; margin-block-end: 0; } } /* While the arc is held, everything follows the hand at once. */ .ot-drawer[data-pulling], .ot-drawer[data-pulling] :is(.ot-drawer-body, .ot-drawer-handle) { transition: none; } } 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/dialog.json","https://thedirectors.agency/ui/r/fraction.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/drawer.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/drawer.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/drawer.css","content":"$55","type":"registry:file","target":"styles/0nlytype/drawer.css"}],"className":"h-[70svh] min-h-80"}]]}]