{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sidebar","type":"registry:component","title":"Sidebar","description":"The app's main navigation: sections, items with counts and one level of sub-pages, an icon rail with tooltips (⌘B, the trigger or the edge), and a sheet on phones.","categories":["navigation"],"dependencies":["@radix-ui/react-dialog@1.1.23","@radix-ui/react-direction@1.1.4","@radix-ui/react-slot@1.3.3","@radix-ui/react-tooltip@1.2.16","clsx@^2.1.1","lucide-react@^1.48.0","motion@^13.4.4","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/components/_shared/overlay.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the source morph's moving parts: the clip's four sides, the radius and the offset back to the trigger */\n@property --ci-t {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-r {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-b {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-l {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@property --ci-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@layer components {\n /* Every floating layer in the system: one surface (painted by the overlay role of the look in force), one menu-item\n look, one scrim, one enter and exit. A layer placed against a trigger opens out of it (the source morph below); one\n without a placement arrives in --pui-motion-in scaling from its origin. Each leaves in --pui-motion-out; Radix keeps\n it mounted until the exit animation ends. Reduced motion makes both instant (the duration tokens become 1ms). */\n .surface {\n z-index: var(--pui-z-popover);\n min-width: 8rem;\n /* never past the screen: as wide and as tall as the room beside the trigger (Radix measures it) */\n max-width: var(--radix-popper-available-width, none);\n max-height: var(--radix-popper-available-height, 70vh);\n overflow: auto;\n border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n color: var(--pui-ink);\n transform-origin: var(--radix-popper-transform-origin, var(--radix-dropdown-menu-content-transform-origin, center));\n outline: none;\n }\n .surface[data-state=\"open\"],\n .surface[data-state=\"delayed-open\"],\n .surface[data-state=\"instant-open\"] {\n animation: pop-in var(--pui-motion-in) var(--pui-ease-default);\n }\n .surface[data-state=\"closed\"] {\n animation: pop-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n\n /* The source morph (research/morphing-interfaces-2026-10-04, M3): a layer placed against a trigger does not fade in\n beside it, it opens out of it. It starts as the trigger's own box (Radix gives its size and the side and alignment\n it was placed on), offset back onto the trigger, and grows: the side nearest the trigger is there at once, the\n sides across follow, the far side arrives last (~200 ms), so the rows by the trigger are readable within the\n ruled 90 ms while the outline settles. Content fades in over those 90 ms. It closes back into the trigger in the\n ruled 180 ms. The clip ends 48px outside the box so the layer's shadow is never cut. Reduced motion: instant. */\n .surface[data-side] {\n --_aw: var(--radix-popper-anchor-width, 0px);\n --_ah: var(--radix-popper-anchor-height, 0px);\n --_gap: 6px;\n --from-t: -48px;\n --from-r: -48px;\n --from-b: -48px;\n --from-l: -48px;\n --from-x: 0px;\n --from-y: 0px;\n --d-near: calc(var(--pui-duration-standard) * 0.55);\n --d-cross: calc(var(--pui-duration-standard) * 0.85);\n --d-far: var(--pui-duration-standard);\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-overlay-radius, var(--pui-radius-card))\n );\n translate: var(--ci-x) var(--ci-y);\n }\n .surface[data-side=\"bottom\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n --from-y: calc(-1 * (var(--_ah) + var(--_gap)));\n --d-t: var(--d-near);\n --d-b: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"top\"] {\n --from-b: 0px;\n --from-t: calc(100% - var(--_ah));\n --from-y: calc(var(--_ah) + var(--_gap));\n --d-b: var(--d-near);\n --d-t: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"right\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n --from-x: calc(-1 * (var(--_aw) + var(--_gap)));\n --d-l: var(--d-near);\n --d-r: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n .surface[data-side=\"left\"] {\n --from-r: 0px;\n --from-l: calc(100% - var(--_aw));\n --from-x: calc(var(--_aw) + var(--_gap));\n --d-r: var(--d-near);\n --d-l: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n /* alignment along the trigger: which part of the layer the trigger sits over */\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"] {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"]:dir(rtl) {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"]:dir(rtl) {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"center\"] {\n --from-l: calc((100% - var(--_aw)) / 2);\n --from-r: calc((100% - var(--_aw)) / 2);\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"start\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"end\"] {\n --from-t: calc(100% - var(--_ah));\n --from-b: 0px;\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"center\"] {\n --from-t: calc((100% - var(--_ah)) / 2);\n --from-b: calc((100% - var(--_ah)) / 2);\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) {\n animation:\n grow-t var(--d-t) var(--pui-ease-out-strong),\n grow-r var(--d-r) var(--pui-ease-out-strong),\n grow-b var(--d-b) var(--pui-ease-out-strong),\n grow-l var(--d-l) var(--pui-ease-out-strong),\n grow-xy var(--d-cross) var(--pui-ease-out-strong),\n settling var(--d-far) step-end;\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) > * {\n animation: content-in var(--pui-motion-in) var(--pui-ease-default) both;\n }\n /* one duration for every part of the exit: the layer unmounts when the first of them ends */\n .surface[data-side][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .surface[data-side][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n @keyframes grow-t {\n from {\n --ci-t: var(--from-t);\n }\n }\n @keyframes grow-r {\n from {\n --ci-r: var(--from-r);\n }\n }\n @keyframes grow-b {\n from {\n --ci-b: var(--from-b);\n }\n }\n @keyframes grow-l {\n from {\n --ci-l: var(--from-l);\n }\n }\n @keyframes grow-xy {\n from {\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n }\n }\n /* it starts over its own trigger: until it has grown, the press that opened it must not land on a row */\n @keyframes settling {\n 0%,\n 100% {\n pointer-events: none;\n }\n }\n @keyframes shrink {\n to {\n --ci-t: var(--from-t);\n --ci-r: var(--from-r);\n --ci-b: var(--from-b);\n --ci-l: var(--from-l);\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n opacity: 0;\n }\n }\n @keyframes content-in {\n from {\n opacity: 0;\n }\n }\n @keyframes content-out {\n to {\n opacity: 0;\n }\n }\n .padded {\n padding: var(--pui-pad-popover);\n }\n .menu {\n padding: var(--pui-space-1);\n }\n @keyframes pop-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes pop-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n\n /* rows (and the gliding plate) nest in the list: its radius minus its padding, never rounder than a chip; on the\n row itself, so any list that uses .item gets it */\n .item,\n .glide {\n --_item-radius: min(\n var(--pui-radius-chip),\n calc(var(--pui-overlay-radius, var(--pui-radius-card)) - var(--pui-space-1))\n );\n }\n\n /* menu rows: shared by dropdown, context menu, menubar, select, combobox lists */\n .item {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--pui-control-height-sm);\n padding: 0 var(--pui-space-2);\n /* nested in the list: the overlay's radius minus its padding, never rounder than a chip */\n border-radius: var(--_item-radius);\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: default;\n user-select: none;\n outline: none;\n }\n /* on a touch screen a row is a finger's target: the touch height (44px) from the tokens; a mouse keeps the dense row */\n @media (pointer: coarse) {\n .item {\n min-height: var(--pui-control-height-touch);\n }\n }\n /* a destructive row speaks in the danger ink only while it can be used: disabled wins (muted ink, no alarm for an\n action that cannot happen) */\n .item[data-tone=\"danger\"]:not([data-disabled]) {\n color: var(--pui-red);\n }\n .item[data-disabled] {\n color: var(--pui-ink-3);\n pointer-events: none;\n }\n .item :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .item[data-tone=\"danger\"]:not([data-disabled]) :where(svg) {\n color: currentColor;\n }\n .item[data-highlighted]:not([data-glide]) {\n background: var(--pui-hover-2);\n }\n /* a press is acknowledged at once, over the plate, before the menu closes or the row toggles */\n .item:active:not([data-disabled]) {\n background: var(--pui-hover);\n }\n .shortcut {\n margin-inline-start: auto;\n padding-inline-start: var(--pui-space-4);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n letter-spacing: var(--pui-tracking-mono-caps);\n }\n .heading {\n padding: var(--pui-space-1-5) var(--pui-space-2) var(--pui-space-1);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n font-weight: var(--pui-weight-medium);\n }\n .separator {\n height: 1px;\n margin: var(--pui-space-1) calc(var(--pui-space-1) * -1);\n background: var(--pui-line);\n }\n .check {\n margin-inline-start: auto;\n color: var(--pui-accent) !important;\n }\n /* a check arrives in its row as the value changes (at once): it grows from the middle over the arrival */\n .check :where(svg) {\n animation: check-in var(--pui-motion-in) var(--pui-ease-out-strong);\n }\n @keyframes check-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.5 * var(--pui-motion-travel, 1));\n }\n }\n /* the gliding highlight: one plate moves between rows for the pointer and the arrow keys; it appears in place */\n .glide {\n position: absolute;\n z-index: 0;\n inset-inline: var(--pui-space-1);\n top: 0;\n border-radius: var(--_item-radius);\n background: var(--pui-hover-2);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--pui-motion-out) var(--pui-ease-default);\n }\n .glide[data-on] {\n opacity: 1;\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n .glide[data-jump] {\n transition: opacity 0ms;\n }\n /* a plate over a row or grid of cells takes each cell's size and travels both ways */\n .glide[data-axis=\"xy\"] {\n inset-inline: auto;\n left: 0;\n }\n .glide[data-axis=\"xy\"][data-on] {\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n width var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n\n /* a layer that has begun to close is out of the way at once: for the length of its exit it takes no pointer, so a tap\n meant for the page behind (the next row, the button the panel covered) lands there, never on the leaving ghost.\n Focus has already gone back (Radix) and it unmounts when the exit ends. */\n .scrim[data-state=\"closed\"],\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n pointer-events: none;\n }\n\n /* modal layers */\n .scrim {\n position: fixed;\n inset: 0;\n z-index: var(--pui-z-overlay);\n background: var(--pui-scrim);\n backdrop-filter: blur(var(--pui-blur-overlay));\n }\n .scrim[data-state=\"open\"] {\n animation: fade-in var(--pui-fade-in) var(--pui-ease-default);\n }\n .scrim[data-state=\"closed\"] {\n animation: fade-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n }\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes fade-out {\n to {\n opacity: 0;\n }\n }\n .dialog {\n /* the content answers to the dialog's own width (a footer's buttons share the row on a phone) */\n container-type: inline-size;\n position: fixed;\n z-index: var(--pui-z-modal);\n left: 50%;\n top: 50%;\n width: min(calc(100vw - var(--pui-space-8)), var(--pui-dialog-width, var(--_dialog-width, 440px)));\n max-height: calc(100dvh - var(--pui-space-12));\n overflow: hidden;\n translate: -50% -50%;\n border-radius: var(--pui-dialog-radius, var(--pui-radius-window));\n color: var(--pui-ink);\n outline: none;\n /* a size chosen while open (a step that needs more room) eases the width in place, centred */\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n .dialog[data-state=\"open\"] {\n animation: dialog-in var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .dialog[data-state=\"closed\"] {\n animation: dialog-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n /* A dialog opened from something (use-open-from.ts) grows out of it: it starts as the opener's box, offset back onto\n it, and grows to its own place over the considered duration while its content fades in; it closes back into the\n opener in the ruled 180 ms. Shares the source morph's moving parts and guard with .surface. */\n .dialog[data-open-from] {\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-dialog-radius, var(--pui-radius-window))\n );\n transform: translate(var(--ci-x), var(--ci-y));\n }\n .dialog[data-open-from][data-state=\"open\"] {\n animation:\n grow-t var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-r var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-b var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-l var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-xy calc(var(--pui-duration-considered) * 0.9) var(--pui-ease-out-strong),\n settling var(--pui-duration-considered) step-end;\n }\n .dialog[data-open-from][data-state=\"open\"] > * {\n animation: content-in var(--pui-duration-standard) var(--pui-ease-default) calc(var(--pui-duration-standard) * 0.35)\n both;\n }\n .dialog[data-open-from][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .dialog[data-open-from][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n /* A sheet: a panel from an edge. It slides in from its edge over the considered duration on the drawer curve and\n goes back out to that edge in the ruled departure (a layer closes back into where it came from). The edge is\n logical: an end (\"right\") sheet comes from the left in a right-to-left page. Its content answers to its width. */\n .sheet {\n --_sx: 0px;\n --_sy: 0px;\n container-type: inline-size;\n /* where a finger has swiped it toward its edge (sheet.tsx); it settles back over the departure */\n translate: var(--_swipe, 0px) 0;\n }\n /* a side panel leaves sideways pans to the swipe and keeps vertical scrolling native, in its body too */\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]),\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) [data-slot=\"sheet-body\"] {\n touch-action: pan-y;\n }\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) {\n transition:\n var(--m-transition),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n .sheet[data-swiping] {\n transition: none;\n }\n .sheet[data-side=\"right\"] {\n --_sx: 100%;\n }\n .sheet[data-side=\"left\"] {\n --_sx: -100%;\n }\n .sheet[data-side=\"right\"]:dir(rtl) {\n --_sx: -100%;\n }\n .sheet[data-side=\"left\"]:dir(rtl) {\n --_sx: 100%;\n }\n .sheet[data-side=\"top\"] {\n --_sy: -100%;\n }\n .sheet[data-side=\"bottom\"] {\n --_sy: 100%;\n }\n .sheet[data-state=\"open\"] {\n animation: sheet-in var(--pui-duration-considered) var(--pui-ease-drawer) both;\n }\n .sheet[data-state=\"closed\"] {\n animation: sheet-out var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n @keyframes sheet-in {\n from {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes sheet-out {\n to {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n }\n @keyframes dialog-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n}\n\n/* Reduced motion: surfaces and dialogs fade without scaling or growing, over the fade tokens (restrained under reduced,\n 1ms under none; APPEARANCE A06). */\n@media (prefers-reduced-motion: reduce) {\n .surface,\n .dialog,\n .sheet {\n animation-name: fade-in !important;\n animation-duration: var(--pui-fade-in) !important;\n }\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n animation-name: fade-out !important;\n animation-duration: var(--pui-fade-out) !important;\n }\n}\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .surface,\n :global(.pui[data-motion=\"none\"]) .surface,\n :global(.pui[data-motion=\"reduced\"]) .dialog,\n :global(.pui[data-motion=\"none\"]) .dialog,\n :global(.pui[data-motion=\"reduced\"]) .sheet,\n :global(.pui[data-motion=\"none\"]) .sheet {\n animation-name: fade-in;\n animation-duration: var(--pui-fade-in);\n }\n :global(.pui[data-motion=\"reduced\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .sheet[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .sheet[data-state=\"closed\"] {\n animation-name: fade-out;\n animation-duration: var(--pui-fade-out);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.surface {\n composes: m-overlay from global;\n}\n.dialog {\n composes: m-overlay from global;\n}\n"},{"path":"beamline/components/_shared/use-return-focus.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/use-return-focus.ts","content":"\"use client\";\n\nimport { useRef } from \"react\";\nimport { useAppearanceRoot } from \"../../runtime/appearance\";\n\n/**\n * Where focus goes when a modal layer closes. Radix returns it to its own Trigger; a layer opened another way (a\n * controlled `open`, a menu item, a shortcut) would drop focus on . Spread the result on the Radix content: it\n * remembers what had focus as the layer opened and returns there, unless the caller's own handler prevents it.\n * If that opener is removed, return to its surviving owning region, or the managed scope's visual root.\n */\nexport function useReturnFocus({\n onOpenAutoFocus,\n onCloseAutoFocus,\n}: { onOpenAutoFocus?: (event: Event) => void; onCloseAutoFocus?: (event: Event) => void } = {}) {\n track();\n const before = useRef(null);\n const regions = useRef([]);\n const scope = useAppearanceRoot();\n return {\n onOpenAutoFocus: (event: Event) => {\n before.current = outside(document.activeElement, event.currentTarget as Element | null);\n const owners: HTMLElement[] = [];\n let ancestor = before.current;\n while (ancestor) {\n if (ancestor !== document.body && ancestor.matches(\"[data-return-region]\")) owners.push(ancestor);\n ancestor = ancestor.parentElement;\n }\n const root = scope ?? before.current?.closest(\".pui\");\n if (root && root !== document.body && !owners.includes(root)) owners.push(root);\n regions.current = owners;\n onOpenAutoFocus?.(event);\n },\n /** `layer` is the layer's own element, for a caller that runs this itself instead of Radix. */\n onCloseAutoFocus: (event: Event, layer: Element | null = event.currentTarget as Element | null) => {\n onCloseAutoFocus?.(event);\n if (event.defaultPrevented) return;\n // a layer whose field took focus as it mounted (autoFocus) never hears that it opened (Radix skips the mount\n // focus): the opener is then the last element focused outside it\n const el =\n before.current && before.current.isConnected && !layer?.contains?.(before.current)\n ? before.current\n : outside(null, layer);\n if (el && el !== document.body && el.isConnected) {\n event.preventDefault();\n el.focus({ preventScroll: true });\n return;\n }\n const region = regions.current.find((owner) => owner.isConnected);\n if (region) {\n event.preventDefault();\n // Regions need not be tab stops, but they must receive programmatic return focus.\n if (!region.hasAttribute(\"tabindex\")) region.tabIndex = -1;\n region.focus({ preventScroll: true });\n }\n },\n };\n}\n\n/** The last elements that took focus or were pressed, newest last, noted as it happened (capture phase, once per\n * page). Presses count too: a click on a button does not focus it everywhere (Safari), and the control that was\n * pressed is the opener a layer should give focus back to. */\nconst trail: Element[] = [];\nlet tracking = false;\nconst PRESSABLE =\n \"button, a[href], [role=button], [role=menuitem], [role=option], [role=tab], [tabindex], input, select, textarea\";\nfunction note(el: Element | null) {\n if (!el || el === document.body) return;\n if (trail.at(-1) === el) return;\n trail.push(el);\n if (trail.length > 24) trail.shift();\n}\nfunction track() {\n if (tracking || typeof document === \"undefined\") return;\n tracking = true;\n // A lazily mounted layer may be the first focus consumer on the page. Remember its opener before child autofocus.\n note(document.activeElement);\n document.addEventListener(\"focusin\", (event) => note(event.target as Element | null), true);\n document.addEventListener(\n \"pointerdown\",\n (event) => note((event.target as Element | null)?.closest?.(PRESSABLE) ?? null),\n true,\n );\n}\n\n/** `active` unless it is inside `layer`; then the most recent element focused outside the layer that still exists. */\nfunction outside(active: Element | null, layer: Element | null): HTMLElement | null {\n if (active && active !== document.body && !layer?.contains?.(active)) return active as HTMLElement;\n for (let i = trail.length - 1; i >= 0; i--) {\n const el = trail[i];\n if (el.isConnected && el !== document.body && !layer?.contains?.(el)) return el as HTMLElement;\n }\n return null;\n}\n"},{"path":"beamline/components/button/button-variants.ts","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts","content":"import { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n/** sm 32 · md 36 · lg 40 · touch 44 (a bottom action bar on a phone). */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"touch\";\n/** Market side: buy fills with --pui-up, sell with --pui-down (a red-up market flips the two tokens, not the code). */\nexport type ButtonTone = \"up\" | \"down\";\n\n/** Which paint role paints each variant: filled variants are solids, the quiet ones keep their own light paint. */\nconst ROLE: Record = {\n primary: \"m-solid\",\n accent: \"m-solid\",\n secondary: \"m-control\",\n outline: undefined,\n ghost: undefined,\n danger: undefined,\n};\n\n/** A variant's paint without the button's layout, for a group that wears one button's look (SplitButton paints the\n * pair as one button and leaves its halves transparent). */\nexport function buttonPaint(variant: ButtonVariant = \"primary\", tone?: ButtonTone) {\n return cn(ROLE[variant], styles[variant], tone && styles[tone]);\n}\n\n/** The classes that make any element look like a Button, for parts that render their own element. */\nexport function buttonClassName({\n variant = \"primary\",\n size = \"md\",\n tone,\n className,\n}: { variant?: ButtonVariant; size?: ButtonSize; tone?: ButtonTone; className?: string } = {}) {\n return cn(styles.root, ROLE[variant], styles[variant], tone && styles[tone], styles[size], className);\n}\n"},{"path":"beamline/components/button/button.module.css","type":"registry:file","target":"src/ui/beamline/components/button/button.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Button. Every colour, size and duration is a token; a variant only sets the four local properties below. */\n .root {\n --_button-bg: transparent;\n --_button-bg-hover: var(--pui-hover);\n --_button-fg: var(--pui-ink);\n --_button-edge: none;\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n position: relative;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pui-space-1-5);\n flex-shrink: 0;\n height: var(--_button-height);\n min-width: var(--_button-height);\n /* never wider than its room: in a narrow card the label ends in an ellipsis instead of spilling (the full words\n stay the accessible name) */\n max-width: 100%;\n padding-inline: var(--_button-pad);\n border: 0;\n /* Nested context: inside a frame that sets --pui-nest-radius and --pui-nest-inset (and --pui-nest-ceiling for pills)\n the corner is the shared nested corner (.nest-corner, utilities.css: radius − inset, or the button's own radius\n where that would fall under the chip radius); elsewhere the control radius. --pui-button-radius wins over both. */\n border-radius: var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control)));\n color: var(--_button-fg);\n font-family: var(--pui-font-body);\n font-size: var(--pui-text-sm);\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n letter-spacing: var(--pui-tracking-body);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n /* frequency law: hover arrives at 0ms (below), leaves over the ruled departure; opacity and translate are listed\n so a button that waits for attention (.reveal) fades away like every reveal instead of vanishing */\n transition:\n var(--m-transition),\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-motion-out) var(--pui-ease-default),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n /* the quiet variants paint themselves; filled and secondary variants are painted by their look role (m-solid,\n m-control), which these zero-specificity rules can never override */\n :where(.root) {\n background: var(--_button-bg);\n box-shadow: var(--_button-edge);\n }\n :where(.root:hover:not(:disabled, [aria-disabled=\"true\"])) {\n background: var(--_button-bg-hover);\n }\n .root:hover:not(:disabled, [aria-disabled=\"true\"]) {\n transition-duration: 0ms;\n }\n /* the asChild form has no motion: a CSS press instead */\n .root:not(button):active {\n transform: scale(0.97);\n }\n .root:disabled,\n .root[aria-disabled=\"true\"]:not([data-loading]) {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .root[data-loading] {\n cursor: progress;\n }\n\n /* Icons: 16px unless the icon says otherwise (zero specificity, so size-5 or an inline size wins) */\n :where(.root) :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n }\n\n .sm {\n --_button-height: var(--pui-control-height-sm);\n --_button-pad: var(--pui-space-2-5);\n /* the base gap (--pui-space-1-5); 5px had no scale step, and 6px also lets the loader's negative margin cancel\n the gap exactly at every size */\n }\n .md {\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n }\n .lg {\n --_button-height: var(--pui-control-height-lg);\n --_button-pad: var(--pui-space-4);\n font-size: var(--pui-text-base);\n }\n /* a bottom action bar on a phone: the 44 px touch target (a platform minimum, not a spacing step, so it holds when\n the spacing parameter changes — O1 §14.2), the large label */\n .touch {\n --_button-height: calc(var(--pui-control-height-lg) + 0.25rem);\n --_button-pad: var(--pui-space-5);\n font-size: var(--pui-text-base);\n }\n .root[data-icon-only] {\n padding-inline: 0;\n width: var(--_button-height);\n }\n\n /* the main action: ink on the page, inverted per theme */\n .primary {\n --m-color: var(--pui-ink);\n --_button-fg: var(--pui-ink-inverse);\n }\n .secondary {\n --_button-fg: var(--pui-ink);\n }\n .outline {\n --_button-edge: inset 0 0 0 1px var(--pui-line-strong);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost {\n --_button-fg: var(--pui-ink-2);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost:hover:not(:disabled) {\n color: var(--pui-ink);\n }\n .danger {\n --_button-fg: var(--pui-red);\n --_button-edge: inset 0 0 0 1px color-mix(in oklab, var(--pui-red) 42%, transparent);\n --_button-bg-hover: var(--pui-red-tint);\n }\n .accent {\n --m-color: var(--pui-accent);\n --_button-fg: var(--pui-accent-foreground);\n }\n\n /* Market side. Declared after the variants so it wins: a filled variant takes the side's colour and its on-colour\n ink; a quiet variant keeps its paint and colours the label. */\n .up {\n --m-color: var(--pui-up);\n --_button-fg: var(--pui-up);\n }\n .down {\n --m-color: var(--pui-down);\n --_button-fg: var(--pui-down);\n }\n .ghost:is(.up, .down):hover:not(:disabled) {\n color: var(--_button-fg);\n }\n .primary.up,\n .accent.up {\n --_button-fg: var(--pui-on-up);\n }\n .primary.down,\n .accent.down {\n --_button-fg: var(--pui-on-down);\n }\n\n /* The main actions' light, where the look provides one, as a spectrum. Glow spills a soft light in the brand's\n spectrum from under the button's bottom edge (clipped at it, so it never tints the face) that brightens under the\n pointer. Prism keeps it inside the glass (--m-solid-glow-fit: 1): the face the light leaves by, the bottom edge,\n splits it into a crisp line with a faint wash rising into the face, only while pointed at. Every other look\n leaves --m-solid-glow at none, so the layer does not exist. */\n .primary::after,\n .accent::after {\n --_fit: var(--m-solid-glow-fit, 0);\n content: var(--m-solid-glow);\n position: absolute;\n z-index: -1;\n top: calc((1 - var(--_fit)) * (100% + var(--m-solid-glow-gap, 0px)));\n inset-inline: var(--m-solid-glow-inset, 14%);\n height: var(--m-solid-glow-height, 14px);\n border-radius: calc(\n var(--_fit) * var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control))) + (1 - var(--_fit)) *\n var(--pui-radius-pill)\n );\n background: var(--m-spectrum);\n background-size: var(--m-spectrum-size, 100% 100%);\n /* the part of the spectrum that shows: this button's own angle (--m-prism-seed, new at every press), turned by\n where the pointer is across the face (--m-prism-x) in a look that turns it (--m-solid-glow-turn) */\n background-position: calc((var(--m-prism-seed, 0.3) + var(--m-prism-x, 0.5) * var(--m-solid-glow-turn, 0)) * 100%) 0;\n filter: blur(var(--m-solid-glow-blur, 9px));\n clip-path: var(--m-solid-glow-clip, inset(0 -32px -32px -32px));\n mask: var(--m-solid-glow-mask, none);\n mask-position:\n 0 0,\n calc(var(--m-prism-seed, 0.3) * 100%) 0;\n mask-composite: intersect;\n opacity: var(--m-solid-glow-rest, 0.75);\n scale: var(--m-solid-glow-scale, 1) 1;\n pointer-events: none;\n transition:\n opacity var(--pui-motion-out) var(--pui-ease-default),\n scale var(--pui-motion-out) var(--pui-ease-default),\n background-position var(--pui-duration-considered) var(--pui-ease-default),\n mask-position var(--pui-duration-considered) var(--pui-ease-default);\n }\n /* pointed at: the light brightens (glow) or grows out from the centre and drifts along while the pointer stays\n (prism) */\n .primary:hover::after,\n .accent:hover::after {\n opacity: 1;\n scale: 1 1;\n transition-duration: var(--m-solid-glow-in, 0ms);\n animation: var(--m-solid-glow-flow, none);\n }\n /* A change of word or colour (Save → Saved, a tone turning green) passes a band of split light across the face once,\n in a look that has one (prism: --m-solid-shift-light; the pen hook's ::before is free on a solid otherwise). */\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: var(--m-solid-shift-light, none);\n position: absolute;\n inset: 0;\n z-index: -1;\n border: 0;\n border-radius: inherit;\n background: var(--m-spectrum) 0 0 / var(--m-spectrum-size, 100% 100%);\n mask: linear-gradient(105deg, transparent 39%, #000 47.5%, #000 52.5%, transparent 61%) 0 0 / 300% 100% no-repeat;\n opacity: 0;\n animation: prism-shift calc(var(--pui-duration-considered) * 2.2) var(--pui-ease-default);\n pointer-events: none;\n }\n @keyframes prism-shift {\n from {\n mask-position: 100% 0;\n opacity: 0.25;\n }\n 35% {\n opacity: 0.55;\n }\n to {\n mask-position: 0 0;\n opacity: 0;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .primary::after,\n .accent::after {\n transition: none;\n animation: none !important;\n }\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: none;\n }\n }\n .root:disabled::after,\n .root[aria-disabled=\"true\"]::after {\n content: none;\n }\n\n /* The loader opens its own width, and the negative margin cancels the gap so the label does not jump */\n .loader {\n display: inline-flex;\n overflow: hidden;\n margin-inline-end: calc(var(--pui-space-1-5) * -1);\n }\n .loader > * {\n margin-inline-end: var(--pui-space-1-5);\n }\n .spinner {\n color: currentColor;\n }\n .root[data-icon-only] .loader {\n margin-inline-end: 0;\n }\n .root[data-icon-only] .loader > * {\n margin-inline-end: 0;\n }\n\n /* The label holds its place while the text inside swaps; the leaving text pops out of flow against it */\n .label {\n position: relative;\n display: inline-flex;\n justify-content: center;\n min-width: 0;\n overflow: visible;\n }\n /* the clip box is let out by a little over a line so descenders are never cut, without changing the layout */\n .text {\n display: inline-block;\n max-width: 100%;\n margin-block: -0.2em;\n padding-block: 0.2em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .label[data-morphing] > .text {\n overflow: visible;\n text-overflow: clip;\n }\n}\n\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .root:not(button):active,\n :global(.pui[data-motion=\"none\"]) .root:not(button):active {\n transform: none;\n }\n @media (prefers-reduced-motion: reduce) {\n .root:not(button):active {\n transform: none;\n }\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: nest-corner from global;\n}\n"},{"path":"beamline/components/button/button.tsx","type":"registry:file","target":"src/ui/beamline/components/button/button.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport {\n Children,\n Fragment,\n isValidElement,\n useLayoutEffect,\n useRef,\n type ButtonHTMLAttributes,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type RefObject,\n type ComponentProps,\n} from \"react\";\nimport { AnimatePresence, LazyMotion, m, spring, useIsPresent } from \"motion/react\";\nimport { animate } from \"motion/mini\";\nimport * as Slot from \"@radix-ui/react-slot\";\nimport { Spinner } from \"../spinner/spinner\";\nimport type { BuiltInLook as Look } from \"../../runtime/preset\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type { ButtonVariant, ButtonSize, ButtonTone } from \"./button-variants\";\nexport { buttonPaint, buttonClassName } from \"./button-variants\";\nimport { buttonClassName, type ButtonVariant, type ButtonSize, type ButtonTone } from \"./button-variants\";\nimport type { ButtonDefaults } from \"./defaults\";\nexport type { ButtonDefaults } from \"./defaults\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\n\ntype NativeProps = Omit<\n ButtonHTMLAttributes,\n \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"\n>;\n\nexport interface ButtonProps extends NativeProps {\n /** Visual weight: primary (ink-filled), secondary, outline, ghost, danger, or accent (filled with the brand). */\n variant?: ButtonVariant;\n /** Height 32 / 36 / 40 px; touch 44 px for a bottom action bar on a phone. */\n size?: ButtonSize;\n /** Market side. On primary/accent the fill becomes --pui-up (buy) or --pui-down (sell); on the quiet variants the\n * label takes that colour. Pair it with a word or arrow: colour is never the only signal. */\n tone?: ButtonTone;\n /** Shows a loader in front of the label, sets aria-busy and ignores clicks; size and focus stay. */\n loading?: boolean;\n classNames?: Partial>;\n /** Paint this button in another look than the one in force around it (DESIGN-LANGUAGE.md \"Looks\"). */\n look?: Look;\n /** Render the single child (a link, a Radix trigger) with the button's look instead of a \n \n )}\n \n \n );\n}\n\nexport function SheetHeader({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\nexport function SheetTitle({ className, ...props }: ComponentProps) {\n return (\n \n );\n}\nexport function SheetDescription({ className, ...props }: ComponentProps) {\n return (\n \n );\n}\n/** The scrolling middle. */\nexport function SheetBody({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\nexport function SheetFooter({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nexport default Sheet;\n"},{"path":"beamline/components/sidebar/messages.ts","type":"registry:file","target":"src/ui/beamline/components/sidebar/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n label: \"Main\",\n expandSidebar: \"Expand sidebar\",\n collapseSidebar: \"Collapse sidebar\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/sidebar/sidebar.module.css","type":"registry:file","target":"src/ui/beamline/components/sidebar/sidebar.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* The sidebar beside the page: sticky, its width easing between the full sidebar and the rail. In a narrow room\n ([data-over], sidebar.tsx) it keeps the rail's place and its body opens over the page, growing out of the rail\n to the full width with the overlay's shadow, above the page's sticky bars. */\n .aside {\n position: sticky;\n top: 0;\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n height: 100svh;\n overflow: hidden;\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n [data-contained] > .aside {\n height: 100%;\n }\n .aside[data-over] {\n z-index: calc(var(--pui-z-sticky) + 1);\n overflow: visible;\n }\n .body {\n display: flex;\n flex-direction: column;\n width: var(--pui-sidebar-width, 15rem);\n height: 100%;\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n /* over the page the chrome's paint (a look may make it a frosted, see-through pane) lies on the page's own ground,\n so what is under it never shows through */\n .aside[data-over] > .body {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n background:\n linear-gradient(var(--pui-chrome, var(--pui-canvas)), var(--pui-chrome, var(--pui-canvas))), var(--pui-page);\n box-shadow: var(--pui-shadow-overlay);\n color: var(--pui-ink);\n }\n\n /* One destination row: quiet until pointed at (hover arrives at once, leaves over the ruled departure), raised in\n tone and weight when it is the current page, with a short accent rule at its inline start so \"current\" is never\n tone alone. In the icon rail the rule gives way to the raised tone. */\n .item {\n position: relative;\n display: flex;\n width: 100%;\n min-width: 0;\n height: var(--pui-size-8);\n align-items: center;\n gap: var(--pui-space-2-5);\n padding-inline: var(--pui-space-2);\n border-radius: var(--pui-radius-chip);\n color: var(--pui-ink-2);\n font-size: var(--pui-text-sm);\n text-align: start;\n transition:\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n scale var(--pui-motion-out) var(--pui-ease-default);\n }\n .item:hover {\n background: var(--pui-hover);\n color: var(--pui-ink);\n transition-duration: 0ms;\n }\n .item[data-active] {\n background: var(--pui-hover-2);\n color: var(--pui-ink);\n font-weight: var(--pui-weight-medium);\n }\n .item[data-active]::before {\n content: \"\";\n position: absolute;\n inset-block: 8px;\n inset-inline-start: 0;\n width: 2px;\n border-radius: var(--pui-radius-pill);\n background: var(--pui-current-edge, var(--pui-accent-ink));\n }\n [data-slot=\"sidebar\"][data-state=\"collapsed\"] .item[data-active]::before {\n content: none;\n }\n /* With the travelling plate (SidebarNav) the current row's tone and rule belong to the plate, which moves between\n rows as matter instead of one row switching off and another on. */\n .plate {\n position: absolute;\n top: 0;\n left: 0;\n /* under every label it passes (the nav isolates, so this stays above the sidebar's own paint) */\n z-index: -1;\n border-radius: var(--pui-radius-chip);\n background: var(--pui-hover-2);\n pointer-events: none;\n }\n .plate::before {\n content: \"\";\n position: absolute;\n inset-block: 8px;\n inset-inline-start: 0;\n width: 2px;\n border-radius: var(--pui-radius-pill);\n background: var(--pui-accent-ink);\n }\n [data-slot=\"sidebar\"][data-state=\"collapsed\"] .plate::before {\n content: none;\n }\n [data-indicated] .item[data-active] {\n background: transparent;\n }\n [data-indicated] .item[data-active]::before {\n content: none;\n }\n .item > svg {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n }\n .sub {\n height: var(--pui-size-7);\n }\n /* a parent's chevron turns as its sub-pages open (at once, then it settles), and hides in the rail */\n .item > .chevron {\n flex-shrink: 0;\n width: var(--pui-icon-sm);\n height: var(--pui-icon-sm);\n color: var(--pui-ink-3);\n transition: rotate var(--pui-duration-fast) var(--pui-ease-standard);\n }\n .item > .chevron:dir(rtl) {\n rotate: 180deg;\n }\n .item[aria-expanded=\"true\"] > .chevron {\n rotate: 90deg;\n }\n [data-slot=\"sidebar\"][data-state=\"collapsed\"] .chevron {\n display: none;\n }\n /* a press is acknowledged at once (.ix); a full-width row presses a third as deep as a small control */\n .item:active {\n scale: calc(1 - (1 - var(--pui-press-scale)) / 3);\n transition-duration: 0ms;\n }\n}\n@layer components {\n /* tone: the chrome printed in a deep shade of the brand, or near-black, on any look and theme. The look's own chrome\n paint reads --pui-chrome; the inks, rules, hovers and the current-page rule inside are re-set so every part stays\n legible (trial t11: agents re-coloured the sidebar's parts by hand to get this). Every rule, hover and well is the\n tone's own light ink at a strength (or its ground at depth), so nothing here is a fixed colour. */\n [data-slot=\"sidebar\"][data-tone] {\n --pui-chrome: var(--sb-ground);\n --pui-ink: oklch(from var(--sb-tint) 0.97 0.01 h);\n --pui-ink-2: oklch(from var(--sb-tint) 0.85 0.02 h);\n --pui-ink-3: oklch(from var(--sb-tint) 0.74 0.025 h);\n --pui-line: color-mix(in oklab, var(--pui-ink) 14%, transparent);\n --pui-line-soft: color-mix(in oklab, var(--pui-ink) 10%, transparent);\n --pui-line-strong: color-mix(in oklab, var(--pui-ink) 22%, transparent);\n --pui-hover: color-mix(in oklab, var(--pui-ink) 8%, transparent);\n --pui-hover-2: color-mix(in oklab, var(--pui-ink) 14%, transparent);\n --pui-surface: color-mix(in oklab, var(--pui-ink) 6%, transparent);\n --pui-surface-2: color-mix(in oklab, var(--pui-ink) 9%, transparent);\n --pui-inset: oklch(from var(--sb-ground) 0 c h / 0.2);\n --pui-field: oklch(from var(--sb-ground) 0 c h / 0.16);\n --pui-accent-ink: oklch(from var(--pui-accent) 0.88 calc(c * 0.6) h);\n --pui-accent-tint: color-mix(in oklab, var(--pui-ink) 12%, transparent);\n --pui-focus-ring: oklch(from var(--pui-accent) 0.86 calc(c * 0.7) h);\n background: var(--sb-ground);\n color: var(--pui-ink);\n border-color: color-mix(in oklab, var(--pui-ink) 6%, transparent);\n }\n [data-slot=\"sidebar\"][data-tone] > * {\n color-scheme: dark;\n }\n [data-slot=\"sidebar\"][data-tone=\"brand\"] {\n --sb-ground: oklch(from var(--pui-accent) 0.31 calc(c * 0.55) h);\n --sb-tint: var(--pui-accent);\n }\n /* near-black in either theme, from the system's own canvas (its hue and chroma come along, so a look or a brand that\n tints its neutrals tints this ground too) held at a fixed depth so the light inks above keep their contrast. The\n canvas, not the inks: this block redefines the inks from the tint, which would read itself */\n [data-slot=\"sidebar\"][data-tone=\"contrast\"] {\n --sb-ground: light-dark(oklch(from var(--pui-canvas) 0.2 c h), oklch(from var(--pui-canvas) 0.12 c h));\n --sb-tint: oklch(from var(--pui-canvas) 0.5 c h);\n }\n}\n@layer components {\n /* in the phone sheet the list scrolls along, and a sideways swipe belongs to the sheet (it closes it) */\n [data-slot=\"sheet\"] [data-slot=\"sidebar-content\"] {\n touch-action: pan-y;\n }\n}\n"},{"path":"beamline/components/sidebar/sidebar.tsx","type":"registry:file","target":"src/ui/beamline/components/sidebar/sidebar.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useDeprecatedProp } from \"../../hooks/use-deprecated-prop\";\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type ComponentProps,\n type HTMLAttributes,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { ChevronRight, PanelLeft } from \"lucide-react\";\nimport { Button } from \"../button/button\";\nimport { Sheet, SheetContent, SheetTitle, type SheetClassNames } from \"../sheet/sheet\";\nimport { Tooltip, TooltipGroup } from \"../tooltip/tooltip\";\nimport { usePhone } from \"../../hooks/use-media-query\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useWidthAs } from \"../../hooks/use-content-width\";\nimport { useIndicator } from \"../../hooks/use-indicator\";\nimport { useContour } from \"../../hooks/use-contour\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport styles from \"./sidebar.module.css\";\n\ninterface SidebarState {\n /** Expanded on a desktop screen (the person's choice, kept while a narrow room shows the rail). */\n open: boolean;\n setOpen: (open: boolean) => void;\n /** Below 768px the sidebar is a sheet. */\n phone: boolean;\n phoneOpen: boolean;\n setPhoneOpen: (open: boolean) => void;\n /** The layout is narrower than 40rem (a split view, a preview): the sidebar keeps to its rail and opens over the\n * page instead of pushing it. */\n narrow: boolean;\n /** Open over the page in a narrow room. */\n peek: boolean;\n setPeek: (peek: boolean) => void;\n /** The sidebar shows as its icon rail right now. */\n rail: boolean;\n toggle: () => void;\n}\nconst Ctx = createContext(null);\n/** Whether the Sidebar around an item shows as its rail (its own collapsible setting decides, not only the state). */\nconst Rail = createContext(null);\n\n/** The sidebar's state: open, phone, toggle(). */\nexport function useSidebar(): SidebarState {\n const s = useContext(Ctx);\n if (!s) throw new Error(\"useSidebar needs a above it.\");\n return s;\n}\n\nexport interface SidebarProviderProps extends HTMLAttributes {\n /** Initial open state when uncontrolled. Defaults to true. */\n defaultOpen?: boolean;\n /** Controlled open state; omit to use defaultOpen. */\n open?: boolean;\n /** Reports open state after a change; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Remember the choice in localStorage under this key. */\n storageKey?: string;\n /** ⌘B / Ctrl+B toggles the sidebar. Default true. */\n shortcut?: boolean;\n /** Fill the parent box instead of the viewport (a preview, a split view). */\n contained?: boolean;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Content rendered inside the component. Required. */\n children: ReactNode;\n /** The layout's visual root; native data and ARIA attributes address the same element. */\n ref?: Ref;\n}\n\n/** Below this layout width (40rem) the page keeps the room: the sidebar shows as its rail and opens over the page. */\nconst NARROW = 640;\n\n/** Holds the sidebar's open state and lays out the sidebar beside the page (SidebarInset). It answers to the layout's\n * own width: in a room narrower than 40rem the sidebar keeps to its rail (the person's open choice is kept for when\n * the room grows) and the trigger opens it over the page. */\nexport function SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange,\n storageKey,\n shortcut = true,\n contained = false,\n className,\n style,\n children,\n ref,\n ...props\n}: SidebarProviderProps) {\n const [open, setOpenValue] = useControllable(\n openProp,\n () => {\n if (!storageKey || typeof window === \"undefined\") return defaultOpen;\n try {\n const v = localStorage.getItem(storageKey);\n return v === null ? defaultOpen : v === \"1\";\n } catch {\n return defaultOpen;\n }\n },\n onOpenChange,\n );\n const setOpen = useCallback(\n (o: boolean) => {\n setOpenValue(o);\n if (storageKey)\n try {\n localStorage.setItem(storageKey, o ? \"1\" : \"0\");\n } catch {\n /* storage blocked */\n }\n },\n [setOpenValue, storageKey],\n );\n const phone = usePhone();\n const [phoneOpen, setPhoneOpen] = useState(false);\n const layout = useRef(null);\n const attach = useComposedRef(layout, ref);\n const narrow = useWidthAs(layout, (w) => w > 0 && w < NARROW, false);\n const [peek, setPeek] = useState(false);\n // a room that grows back puts the sidebar beside the page again; nothing stays open over it\n if (peek && (!narrow || phone)) setPeek(false);\n const rail = !phone && (narrow ? !peek : !open);\n const toggle = useCallback(\n () => (phone ? setPhoneOpen((o) => !o) : narrow ? setPeek((p) => !p) : setOpen(!open)),\n [phone, narrow, open, setOpen],\n );\n useEffect(() => {\n if (!shortcut) return;\n const on = (e: KeyboardEvent) => {\n if (e.key.toLowerCase() !== \"b\" || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return;\n if ((e.target as HTMLElement).closest(\"input, textarea, [contenteditable=true]\")) return;\n e.preventDefault();\n toggle();\n };\n window.addEventListener(\"keydown\", on);\n return () => window.removeEventListener(\"keydown\", on);\n }, [shortcut, toggle]);\n const value = useMemo(\n () => ({ open, setOpen, phone, phoneOpen, setPhoneOpen, narrow, peek, setPeek, rail, toggle }),\n [open, setOpen, phone, phoneOpen, narrow, peek, rail, toggle],\n );\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport interface SidebarNavItem {\n /** Optional stable navigation-item id; omitted by default. */\n id?: string;\n /** Visible label or accessible name for the control. Required. */\n label: string;\n /** Icon element shown beside the label. Defaults to no leading icon. */\n icon?: ReactNode;\n /** URL opened when the item is activated. Defaults to a non-link item. */\n href?: string;\n /** Called when an item is activated; no handler by default. */\n onSelect?: () => void;\n /** Whether this navigation item is the current page. Defaults to false. */\n active?: boolean;\n /** A count or short text at the end: unread, new. */\n badge?: ReactNode;\n /** One level of sub-pages, shown under the item when it is open or active. */\n items?: SidebarNavItem[];\n}\nexport interface SidebarNavGroup {\n /** Text displayed for this item. Omitted by default. */\n label?: string;\n /** Items in display order. Required. */\n items: SidebarNavItem[];\n /** Action rendered with this group. Omitted by default. */\n action?: ReactNode;\n}\n\nexport type SidebarClassNames = Partial>;\nexport type SidebarSectionClassNames = Partial>;\nexport type SidebarItemClassNames = Partial<\n Record<\"root\" | \"row\" | \"label\" | \"badge\" | \"dot\" | \"chevron\" | \"submenu\" | \"subitem\" | \"sublabel\", string>\n>;\nexport interface SidebarProps {\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: SidebarClassNames;\n /** Classes for the sheet component's named parts; no overrides by default. */\n sheetClassNames?: SheetClassNames;\n /** Classes for the section component's named parts; no overrides by default. */\n sectionClassNames?: SidebarSectionClassNames;\n /** Classes for the item component's named parts; no overrides by default. */\n itemClassNames?: SidebarItemClassNames;\n /** icon: collapses to an icon rail; offcanvas: slides away; none: always open. Default icon. */\n collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n /** Edge from which the panel or anchored content opens. Defaults to \"left\". */\n side?: \"left\" | \"right\";\n /** Top: product mark or workspace switcher. Use SidebarText for words that should hide in the rail. */\n header?: ReactNode;\n /** Bottom: account, plan usage. */\n footer?: ReactNode;\n /** The navigation as data; or pass SidebarSection / SidebarItem children. */\n nav?: SidebarNavGroup[];\n /** Content rendered inside the component. Defaults to no children. */\n children?: ReactNode;\n /** The landmark's name. Default \"Main\". */\n label?: string;\n /**\n * default: the look's chrome. brand: printed in a deep shade of the brand with light inks. contrast: near-black with\n * light inks in either theme. Inks, rules, hovers and the current-page rule inside follow, on every look.\n */\n appearance?: \"default\" | \"brand\" | \"contrast\";\n /** Deprecated surface treatment alias; omitted by default. @deprecated Use appearance instead. */\n tone?: \"default\" | \"brand\" | \"contrast\";\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n}\n\n/**\n * The app's main navigation. On a desktop it collapses to an icon rail (or away) with the trigger, ⌘B or the rail at\n * its edge, and items show their names as tooltips there; in a layout narrower than 40rem it keeps to the rail and\n * opens over the page, growing out of the rail; below 768px it opens as a sheet from the side.\n */\nexport function Sidebar({\n collapsible = \"icon\",\n side = \"left\",\n header,\n footer,\n nav,\n children,\n label: labelProp,\n appearance,\n tone: toneProp,\n className,\n classNames,\n sheetClassNames,\n sectionClassNames,\n itemClassNames,\n style,\n ref,\n}: SidebarProps) {\n const i18n = useMessages(\"sidebar\", englishMessages);\n const label = labelProp === undefined ? i18n(\"label\") : labelProp;\n\n useDeprecatedProp(\"Sidebar\", \"tone\", \"appearance\", toneProp !== undefined);\n const tone = appearance ?? toneProp ?? \"default\";\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n const { open, setOpen, phone, phoneOpen, setPhoneOpen, narrow, peek, setPeek, rail } = useSidebar();\n const collapsed = rail && collapsible !== \"none\";\n // open over the page in a narrow room: it closes on Escape, on a press outside it, or when a page is chosen\n const over = narrow && peek && collapsible !== \"none\";\n useEffect(() => {\n if (!over) return;\n const away = (e: PointerEvent) => {\n if (!host.current?.contains(e.target as Node)) setPeek(false);\n };\n const key = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setPeek(false);\n };\n document.addEventListener(\"pointerdown\", away, true);\n document.addEventListener(\"keydown\", key);\n return () => {\n document.removeEventListener(\"pointerdown\", away, true);\n document.removeEventListener(\"keydown\", key);\n };\n }, [over, setPeek]);\n const body = (rail: boolean) => (\n <>\n {header && (\n
\n {header}\n
\n )}\n \n {nav?.map((g, i) => (\n \n {g.items.map((it) => (\n \n ))}\n \n ))}\n {children}\n \n {footer && (\n
\n {footer}\n
\n )}\n {rail && collapsible !== \"none\" && (\n \n \n ) : href ? (\n \n {content}\n \n ) : (\n \n {content}\n \n );\n return (\n
  • \n {rail ? (\n \n {row}\n \n ) : (\n row\n )}\n {/* sub-pages open to their own height and close the same way (no measuring); closed, they are out of the Tab\n order and the screen reader */}\n {hasSub && !rail && (\n
    \n
    \n \n {items!.map((s) => (\n
  • \n {s.href ? (\n \n \n {s.label}\n \n \n ) : (\n \n \n {s.label}\n \n \n )}\n
    • \n ))}\n \n \n \n )}\n \n );\n}\n\n/** Opens and closes the sidebar (the sheet on a phone). */\nexport function SidebarTrigger({ className, onClick, ...props }: ComponentProps) {\n const i18n = useMessages(\"sidebar\", englishMessages);\n\n const { open, phone, phoneOpen, narrow, peek, toggle } = useSidebar();\n const expanded = phone ? phoneOpen : narrow ? peek : open;\n return (\n \n {\n onClick?.(event);\n if (!event.defaultPrevented) toggle();\n }}\n className={className}\n >\n \n \n \n );\n}\n\n/** The page beside the sidebar. */\nexport function SidebarInset({ className, ...props }: ComponentProps<\"div\">) {\n return
    ;\n}\n\nexport default Sidebar;\n"},{"path":"beamline/components/spinner/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/spinner/defaults.ts","content":"/** Pure allowed presentation defaults for Spinner; no component or runtime imports. */\nexport interface SpinnerDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n"},{"path":"beamline/components/spinner/messages.ts","type":"registry:file","target":"src/ui/beamline/components/spinner/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n label: \"Loading\",\n done: \"Done\",\n error: \"Failed\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/spinner/spinner.module.css","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* With a delay the ring waits unseen and then fades in, so quick work never flashes it; the result (a check or a\n cross) always shows at once. */\n .root[data-delay] {\n animation: appear var(--pui-fade-in) var(--pui-ease-default) var(--_delay) both;\n }\n @keyframes appear {\n from {\n opacity: 0;\n }\n }\n /* The turn runs on the compositor (a CSS animation on the svg box) and costs no JS per frame. When the work ends the\n arc closes into a full ring over the standard duration, so stopping the turn is invisible, and the check or cross\n draws itself a beat later. All timing comes from the motion tokens; the loop period follows --pui-motion-scale. */\n .svg[data-state=\"loading\"] {\n animation: turn calc(0.8s * var(--pui-motion-scale, 1) * var(--pui-motion-look, 1)) linear infinite;\n }\n .track {\n stroke-opacity: 0.18;\n }\n .arc {\n stroke-dasharray: 0.3 1;\n transition: stroke-dasharray var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .svg:not([data-state=\"loading\"]) .arc {\n stroke-dasharray: 1 1;\n }\n .mark {\n stroke-dasharray: 1 1;\n animation: draw var(--pui-duration-standard) var(--pui-ease-enter) var(--pui-duration-fast) both;\n }\n @keyframes turn {\n to {\n transform: rotate(1turn);\n }\n }\n @keyframes draw {\n from {\n stroke-dashoffset: 1;\n }\n to {\n stroke-dashoffset: 0;\n }\n }\n .svg[data-paused] {\n animation-play-state: paused;\n }\n .svg[data-reduced],\n .svg[data-reduced] .mark {\n animation: none;\n }\n /* Reduction retains the loading/result shape without a decorative loop. */\n @media (prefers-reduced-motion: reduce) {\n .svg[data-state=\"loading\"],\n .mark {\n animation: none;\n }\n }\n}\n"},{"path":"beamline/components/spinner/spinner.tsx","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { SpinnerDefaults } from \"./defaults\";\nexport type { SpinnerDefaults } from \"./defaults\";\n\nimport { useRef, type CSSProperties, type Ref } from \"react\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useActive } from \"../../hooks/use-active\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./spinner.module.css\";\n\nexport interface SpinnerClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the svg part; no override by default. */\n svg?: string;\n /** Classes for the track part; no override by default. */\n track?: string;\n /** Classes for the arc part; no override by default. */\n arc?: string;\n /** Classes for the mark part; no override by default. */\n mark?: string;\n}\n\nexport interface SpinnerProps {\n /** `success` draws a check out of the ring, `error` a cross; both stop spinning. */\n state?: \"loading\" | \"success\" | \"error\";\n /** Control size within the supported size steps. Defaults to \"md\". */\n size?: \"sm\" | \"md\" | \"lg\";\n /** Accessible name while loading. */\n label?: string;\n /** ms to wait before it shows: work that ends sooner never flashes a spinner (about 300 is a good start). Default 0. */\n delay?: number;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: SpinnerClassNames;\n}\n\n/** Icon box from the foundation icon steps (§14.2): sm 14, md 16, lg 20. */\nconst PX = { sm: \"var(--pui-icon-sm)\", md: \"var(--pui-icon-md)\", lg: \"var(--pui-icon-lg)\" } as const;\n\n/**\n * A ring that spins while work runs and closes into a drawn check (or cross) when it ends — the result is a shape as\n * well as a colour. With reduced motion the loading ring holds still.\n */\nexport function Spinner({\n state = \"loading\",\n size: sizeProp,\n label: labelProp,\n delay = 0,\n className,\n classNames,\n style,\n ref,\n}: SpinnerProps) {\n const i18n = useMessages(\"spinner\", englishMessages);\n const label = labelProp === undefined ? i18n(\"label\") : labelProp;\n\n const scopeDefaults = useComponentDefaults(\"spinner\", [\"size\"]);\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n const active = useActive(host);\n const tokens = useMotionTokens(host);\n const managedReduced = useReducedMotionSafe();\n const reduced = tokens.reduced || managedReduced;\n\n const box = PX[size];\n const done = state !== \"loading\";\n const tone = state === \"success\" ? \"text-green\" : state === \"error\" ? \"text-red\" : \"text-ink-2\";\n return (\n 0 && state === \"loading\" ? \"\" : undefined}\n role={done ? \"img\" : \"status\"}\n aria-label={state === \"success\" ? i18n(\"done\") : state === \"error\" ? i18n(\"error\") : label}\n className={cn(styles.root, \"relative inline-grid shrink-0 place-items-center\", tone, classNames?.root, className)}\n style={{ width: box, height: box, \"--_delay\": `${delay}ms`, ...style } as CSSProperties}\n >\n \n \n \n {state === \"success\" && (\n \n )}\n {state === \"error\" && (\n \n )}\n \n \n );\n}\n\nexport default Spinner;\n"},{"path":"beamline/components/tooltip/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/tooltip/defaults.ts","content":"/** Pure allowed presentation defaults for Tooltip; no component or runtime imports. */\nexport interface TooltipDefaults {\n /** Shared align setting; omit to inherit the surrounding scope or the component default. */\n align?: \"start\" | \"center\" | \"end\";\n}\n"},{"path":"beamline/components/tooltip/tooltip.module.css","type":"registry:file","target":"src/ui/beamline/components/tooltip/tooltip.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* A tooltip arrives from its control: it starts a step toward the control on the side it opens on and moves away\n into place as it fades in (--pui-motion-in), so on any side it reads as coming out of what it explains. Inside a\n group, the next one opens at once where the last one stood and travels to its own control (--pui-duration-fast),\n while the last one goes in the arrival time: one tooltip moving along the toolbar, not two blinking. It leaves\n over the departure fade. Reduced motion keeps the fades and drops the travel (--pui-motion-travel is 0). */\n .tip {\n --_dx: 0px;\n --_dy: 0px;\n --_tx: 0px;\n --_ty: 0px;\n z-index: var(--pui-z-tooltip);\n transform-origin: var(--radix-tooltip-content-transform-origin);\n }\n .tip[data-side=\"top\"] {\n --_dy: var(--pui-space-1);\n }\n .tip[data-side=\"bottom\"] {\n --_dy: calc(-1 * var(--pui-space-1));\n }\n .tip[data-side=\"left\"] {\n --_dx: var(--pui-space-1);\n }\n .tip[data-side=\"right\"] {\n --_dx: calc(-1 * var(--pui-space-1));\n }\n .tip[data-state=\"delayed-open\"] {\n animation: tip-in var(--pui-motion-in) var(--pui-ease-default);\n }\n .tip[data-state=\"instant-open\"] {\n animation: tip-fade var(--pui-fade-in) var(--pui-ease-default);\n }\n .tip[data-state=\"instant-open\"][data-travel] {\n animation: tip-travel var(--pui-duration-fast) var(--pui-ease-standard);\n }\n .tip[data-state=\"closed\"] {\n animation: tip-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n }\n .tip[data-grouped][data-state=\"closed\"] {\n animation-duration: var(--pui-fade-in);\n }\n}\n@keyframes tip-in {\n from {\n opacity: 0;\n translate: calc(var(--_dx) * var(--pui-motion-travel, 1)) calc(var(--_dy) * var(--pui-motion-travel, 1));\n }\n}\n@keyframes tip-fade {\n from {\n opacity: 0;\n }\n}\n@keyframes tip-travel {\n from {\n translate: calc(var(--_tx) * var(--pui-motion-travel, 1)) calc(var(--_ty) * var(--pui-motion-travel, 1));\n }\n}\n@keyframes tip-out {\n to {\n opacity: 0;\n }\n}\n"},{"path":"beamline/components/tooltip/tooltip.tsx","type":"registry:file","target":"src/ui/beamline/components/tooltip/tooltip.tsx","content":"\"use client\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { TooltipDefaults } from \"./defaults\";\nexport type { TooltipDefaults } from \"./defaults\";\n\nimport {\n createContext,\n useContext,\n useRef,\n useState,\n type CSSProperties,\n type Ref,\n type ReactElement,\n type ReactNode,\n type RefObject,\n} from \"react\";\nimport * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./tooltip.module.css\";\n\n/** How long after one tooltip of a group closes the next opens at once (and travels from where the last one was). */\nconst SKIP = 400;\n/** The last control of a group whose tooltip showed: its centre and when its tooltip opened or closed. */\ntype Last = { el: Element; x: number; y: number; at: number };\nconst Grouped = createContext | null>(null);\n\n/** Tooltips inside a group open instantly one after another (a toolbar): only the first waits, and each next one\n * travels from where the last one stood. */\nexport function TooltipGroup({\n children,\n delay = 500,\n}: {\n /** Content rendered inside the component. Required. */\n children: ReactNode;\n /** Milliseconds before the first tooltip in the group opens. Defaults to 500. */\n delay?: number;\n}) {\n const last = useRef(null);\n return (\n \n {children}\n \n );\n}\n\nexport interface TooltipClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the trigger part; no override by default. */\n trigger?: string;\n /** Classes for the shortcut part; no override by default. */\n shortcut?: string;\n}\n\nexport interface TooltipProps {\n /** What the control does; a few words. */\n content: ReactNode;\n /** A keyboard shortcut shown after the text, e.g. \"⌘B\". */\n shortcut?: string;\n /** The control: one element that can take a ref (a button). */\n children: ReactElement;\n /** Edge from which the panel or anchored content opens. Defaults to \"top\". */\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n /** Alignment within the available space. Defaults to \"center\". */\n align?: \"start\" | \"center\" | \"end\";\n /** Open state, controlled or uncontrolled; the tooltip opens on hover and on keyboard focus either way. */\n open?: boolean;\n /** Initial open state when uncontrolled. Defaults to false. */\n defaultOpen?: boolean;\n /** Reports open state after a change; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: TooltipClassNames;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n}\n\n/**\n * Short supporting text for a control: it opens on hover after a moment and at once on keyboard focus, and closes on\n * Escape. It arrives out of its control on whichever side it opens. Inside a TooltipGroup the next one opens instantly\n * and travels from where the last one stood. Never put essential information or anything clickable in a tooltip.\n */\nexport function Tooltip({\n content,\n shortcut,\n children,\n side = \"top\",\n align: alignProp,\n open,\n defaultOpen,\n onOpenChange,\n className,\n classNames,\n style,\n ref,\n}: TooltipProps) {\n const scopeDefaults = useComponentDefaults(\"tooltip\", [\"align\"]);\n const align = alignProp ?? scopeDefaults.align ?? \"center\";\n\n const group = useContext(Grouped);\n const container = usePortalContainer();\n const trigger = useRef(null); // the control, whatever element it is (Radix types it as a button)\n // in a group, how far this tooltip is from the last one, so it can start there and travel to its own control\n const [travel, setTravel] = useState<{ x: number; y: number } | null>(null);\n const change = (next: boolean) => {\n const el = trigger.current;\n if (group && el) {\n const r = el.getBoundingClientRect();\n const x = r.left + r.width / 2;\n const y = r.top + r.height / 2;\n const last = group.current;\n if (next) {\n const near = last && last.el !== el && performance.now() - last.at < SKIP;\n setTravel(near ? { x: last.x - x, y: last.y - y } : null);\n group.current = { el, x, y, at: Infinity };\n } else if (last?.el === el) last.at = performance.now();\n }\n onOpenChange?.(next);\n };\n const tip = (\n \n \n {children}\n \n {container !== null && (\n \n \n {content}\n {shortcut && (\n \n {shortcut}\n \n )}\n \n \n )}\n \n );\n return group ? tip : {tip};\n}\n\nexport default Tooltip;\n"},{"path":"beamline/hooks/use-active.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-active.ts","content":"\"use client\";\n\nimport { useContext, useEffect, useState, type RefObject } from \"react\";\n\nimport { ActivityContext } from \"../runtime/activity\";\n\n/**\n * Whether an animated element should be doing work: it is (nearly) on screen and the tab is visible. Every\n * continuously animated component gates its loop, shader or CSS animation on this, so an effect scrolled out of view,\n * behind another tab, or in a collapsed panel costs nothing. One IntersectionObserver per element; no polling.\n */\nexport function useActive(\n ref: RefObject,\n {\n margin = \"120px\",\n key,\n idle = true,\n }: {\n margin?: string;\n /** Re-attach when this changes (an element that mounts later). */\n key?: unknown;\n /** Pause continuous work at the host idle boundary. Finite sequences set false so they finish. */\n idle?: boolean;\n } = {},\n) {\n const active = useContext(ActivityContext);\n const [inView, setInView] = useState(false);\n const [visible, setVisible] = useState(\n () => typeof document === \"undefined\" || document.visibilityState === \"visible\",\n );\n useEffect(() => {\n const el = ref.current;\n if (!el || typeof IntersectionObserver === \"undefined\") {\n setInView(true);\n return;\n }\n const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { rootMargin: margin });\n io.observe(el);\n return () => io.disconnect();\n }, [ref, margin, key]);\n useEffect(() => {\n const on = () => setVisible(document.visibilityState === \"visible\");\n document.addEventListener(\"visibilitychange\", on);\n return () => document.removeEventListener(\"visibilitychange\", on);\n }, []);\n return (!idle || active) && inView && visible;\n}\n"},{"path":"beamline/hooks/use-composed-ref.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-composed-ref.ts","content":"\"use client\";\n\nimport { useCallback, type Ref, type RefObject } from \"react\";\n\n/** Keep a control's measurement/focus ref and the caller's ref, including React 19 callback cleanup. */\nexport function useComposedRef(internal: RefObject, external?: Ref) {\n return useCallback(\n (node: T | null) => {\n internal.current = node;\n if (typeof external === \"function\") {\n const cleanup = external(node);\n if (typeof cleanup === \"function\")\n return () => {\n internal.current = null;\n cleanup();\n };\n } else if (external) external.current = node;\n },\n [internal, external],\n );\n}\n"},{"path":"beamline/hooks/use-content-width.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-content-width.ts","content":"\"use client\";\n\nimport { useLayoutEffect, useRef, useState, type RefObject } from \"react\";\n\nconst same = (width: number) => width;\n\n/**\n * The width of an element's content box, kept current with a ResizeObserver. It is first read in a layout effect, so\n * a layout chosen by width (a narrow mode, a chart's scale) is right in the first frame instead of jumping a frame\n * later. `fallback` stands in on the server and until the element exists; `key` re-measures when the element is\n * replaced (one that exists only in one view).\n */\nexport function useContentWidth(ref: RefObject, fallback: number, key?: unknown): number {\n return useWidthAs(ref, same, fallback, key);\n}\n\n/**\n * The same width, kept as what a part needs from it (`(w) => w < 640` for a narrow mode): the part renders again only\n * when that changes, not at every pixel.\n */\nexport function useWidthAs(\n ref: RefObject,\n read: (width: number) => T,\n fallback: T,\n key?: unknown,\n): T {\n const [value, setValue] = useState(fallback);\n const latest = useRef(read);\n latest.current = read;\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n // the computed width is fractional and ignores transforms, like the observer's content box\n const s = getComputedStyle(el);\n const edges = [\"paddingLeft\", \"paddingRight\", \"borderLeftWidth\", \"borderRightWidth\"] as const;\n const box = parseFloat(s.width);\n const outer = Number.isFinite(box) ? box : el.offsetWidth;\n const inner =\n Number.isFinite(box) && s.boxSizing !== \"border-box\" ? 0 : edges.reduce((w, k) => w + parseFloat(s[k]), 0);\n setValue(latest.current(outer - inner));\n if (typeof ResizeObserver === \"undefined\") return;\n const ro = new ResizeObserver(([e]) => setValue(latest.current(e.contentRect.width)));\n ro.observe(el);\n return () => ro.disconnect();\n }, [ref, key]);\n return value;\n}\n\n/**\n * The height of an element's content box, kept current like `useContentWidth`: for parts that lay out at whatever\n * height their parent gives them (a chart, a map or a book that fills its panel). Read in a layout effect, so the first\n * frame is right; with `enabled` false nothing is measured and the fallback stands.\n */\nexport function useContentHeight(\n ref: RefObject,\n fallback: number,\n key?: unknown,\n enabled = true,\n): number {\n const [value, setValue] = useState(fallback);\n useLayoutEffect(() => {\n const el = ref.current;\n if (!enabled || !el) return;\n const s = getComputedStyle(el);\n setValue(el.clientHeight - (parseFloat(s.paddingTop) || 0) - (parseFloat(s.paddingBottom) || 0));\n if (typeof ResizeObserver === \"undefined\") return;\n const ro = new ResizeObserver(([e]) => setValue(e.contentRect.height));\n ro.observe(el);\n return () => ro.disconnect();\n }, [ref, key, enabled]);\n return enabled ? value : fallback;\n}\n"},{"path":"beamline/hooks/use-contour.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-contour.ts","content":"\"use client\";\n\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport { createContour, type Contour } from \"../lib/contour\";\nimport type { IndicatorBox } from \"./use-indicator\";\n\n/**\n * Puts a decorative surface (a segmented thumb, a tab's pill or line) on the contour engine and moves it to `box`\n * whenever the box changes: the first placement is instant, later ones travel as matter (ui/lib/contour.ts). Returns a\n * ref for the surface. The surface stays aria-hidden; the control's own state has already changed by the time it moves.\n */\nexport function useContour(box: IndicatorBox | null) {\n const contour = useRef(null);\n const ref = useCallback((el: T | null) => {\n contour.current?.destroy();\n contour.current = el ? createContour(el) : null;\n }, []);\n useLayoutEffect(() => {\n // a choice travels; the first placement and a reflow of the same choice are simply there\n if (box) contour.current?.to(box, { instant: !box.ready || box.cause === \"layout\" });\n }, [box]);\n return ref;\n}\n"},{"path":"beamline/hooks/use-controllable.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-controllable.ts","content":"\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\n/**\n * One value in both forms (rules/CONVENTIONS.md): the prop while it is passed, otherwise the element's own copy that\n * starts at `initial` (a value, or a function that makes it once). The setter takes a value or an updater; an updater\n * reads the latest value even twice in one event, and every change reaches `onChange`, controlled or not.\n * `Next` is what a change can carry when it is narrower than the state: a range that starts empty (null) but is only\n * ever changed to a range.\n */\nexport function useControllable(\n value: T | undefined,\n initial: T | (() => T),\n onChange?: (next: Next) => void,\n) {\n const [own, setOwn] = useState(initial);\n const current = value !== undefined ? value : own;\n const latest = useRef(current);\n latest.current = current;\n const set = useCallback(\n (next: Next | ((was: T) => Next)) => {\n const resolved = typeof next === \"function\" ? (next as (was: T) => Next)(latest.current) : next;\n latest.current = resolved;\n if (value === undefined) setOwn(resolved);\n onChange?.(resolved);\n },\n [value, onChange],\n );\n return [current, set] as const;\n}\n"},{"path":"beamline/hooks/use-deprecated-prop.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-deprecated-prop.ts","content":"\"use client\";\n\nimport { useEffect } from \"react\";\n\n// Bundlers replace NODE_ENV for browser builds; this declaration emits no Node dependency.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nconst warned = new Set();\n\n/** Report a legacy prop once after mount in development; production and server renders stay silent. */\nexport function useDeprecatedProp(component: string, prop: string, replacement: string, supplied: boolean) {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"development\" || !supplied) return;\n const key = `${component}.${prop}`;\n if (warned.has(key)) return;\n warned.add(key);\n console.warn(`[Beamline] ${key} is deprecated. Use ${replacement} instead; the legacy prop still works.`);\n }, [component, prop, replacement, supplied]);\n}\n"},{"path":"beamline/hooks/use-drag.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-drag.ts","content":"\"use client\";\n\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\nimport { VelocityTracker } from \"../lib/gesture\";\n\n/** Where the pointer is during a drag, relative to where it was pressed, with its velocity (px/s) over the last 100 ms. */\nexport interface DragPoint {\n /** Pointer position in client coordinates. */\n x: number;\n y: number;\n /** Distance from the press. */\n dx: number;\n dy: number;\n /** Velocity in px/s (read from the last 100 ms, so a release carries the flick, not the whole drag). */\n vx: number;\n vy: number;\n pointerType: string;\n /** Shift was held (a part may offer a second mode on it: move one task alone, a finer step). */\n shift: boolean;\n}\n\nexport interface DragHandlers {\n /** A press landed on the element. Return false to leave it alone (a press on a nested button or link). */\n onPress?: (point: DragPoint, event: PointerEvent) => boolean | void;\n /** The pointer moved past the threshold: the drag begins (the press point is in `point.x - point.dx`). */\n onStart?: (point: DragPoint) => void;\n /** The pointer moved during a drag. `event` is the browser's own, for what a point does not carry: a pen's pressure,\n * the coalesced samples a fast stroke packs into one event (a drawing surface). */\n onMove?: (point: DragPoint, event: PointerEvent) => void;\n /** Released after a drag, with the release velocity. */\n onEnd?: (point: DragPoint) => void;\n /** Released without moving past the threshold: a tap or click (the part's tap route, WCAG 2.5.7). */\n onTap?: (point: DragPoint) => void;\n /** Escape, a lost pointer or the browser taking the gesture (a page scroll): put things back as they were. */\n onCancel?: () => void;\n /** A press that ended as neither a drag nor a tap: a finger that went on to scroll the page, or a pointer the browser\n * took before the threshold. Undo whatever `onPress` prepared. */\n onAbandon?: () => void;\n}\n\nexport interface DragOptions {\n /** The axis the part moves on. On touch, a drag that starts mostly across it is left to the page (a scroll). */\n axis?: \"x\" | \"y\" | \"both\";\n /** Pixels before a press becomes a drag: 3 for a mouse, 8 for a finger or pen unless given. */\n threshold?: number;\n disabled?: boolean;\n}\n\n/**\n * The pointer side of a hand on a part, shared by everything dragged, thrown or pulled (a thumb, a puck, a stub, a\n * task, a cable). It listens natively on the element, so moves never render React: the part writes positions in its\n * handlers (a spring, a transform, a custom property) and only `dragging`, which changes at the start and end, is\n * state (for `data-state`).\n *\n * A press becomes a drag past a small threshold, then the pointer is captured so the drag continues outside the\n * element; a release without moving is a tap (`onTap`), the route every drag needs for people who cannot drag. Escape,\n * `pointercancel` and a lost capture call `onCancel`, and the part restores what it showed before the press. On touch the\n * element needs a `touch-action` that leaves the other axis to the page (`pan-y` for a part dragged sideways; never\n * `none` on more than the dragged surface, which would block zoom), and a drag that starts across its axis is dropped\n * so the page can scroll.\n */\nexport function useDrag(\n ref: RefObject,\n handlers: DragHandlers,\n { axis = \"both\", threshold, disabled = false }: DragOptions = {},\n): { dragging: boolean } {\n const [dragging, setDragging] = useState(false);\n const latest = useRef(handlers);\n latest.current = handlers;\n\n useEffect(() => {\n // an SVG part (a chart's brush) is dragged the same way; its pointer events are typed as an HTML element's\n const el = ref.current as HTMLElement | null;\n if (!el || disabled) return;\n const doc = el.ownerDocument;\n // Escape during a drag belongs to the drag: listened on the window's capture phase, it runs before any dialog or\n // popover listening on the document, which would otherwise also close around the cancelled drag\n const win = doc.defaultView ?? window;\n let active: {\n id: number;\n x0: number;\n y0: number;\n type: string;\n started: boolean;\n tracker: VelocityTracker;\n } | null = null;\n\n const point = (e: PointerEvent): DragPoint => {\n const a = active!;\n const [vx, vy] = a.tracker.velocity(e.timeStamp);\n return {\n x: e.clientX,\n y: e.clientY,\n dx: e.clientX - a.x0,\n dy: e.clientY - a.y0,\n vx,\n vy,\n pointerType: e.pointerType,\n shift: e.shiftKey,\n };\n };\n\n const finish = () => {\n if (active?.started && el.hasPointerCapture?.(active.id)) el.releasePointerCapture(active.id);\n active = null;\n doc.removeEventListener(\"pointermove\", move);\n doc.removeEventListener(\"pointerup\", up);\n doc.removeEventListener(\"pointercancel\", cancel);\n win.removeEventListener(\"keydown\", key, true);\n doc.removeEventListener(\"selectstart\", hold, true);\n doc.removeEventListener(\"dragstart\", hold, true);\n el.removeEventListener(\"lostpointercapture\", lost);\n setDragging(false);\n };\n\n const cancel = () => {\n if (!active) return;\n const started = active.started;\n finish();\n if (started) latest.current.onCancel?.();\n else latest.current.onAbandon?.();\n };\n\n // only the part's own capture ending cancels: a finger's press is captured by the child it landed on, and moving\n // the capture to the part fires lostpointercapture on that child, which bubbles here\n const lost = (e: PointerEvent) => {\n if (e.target === el && active?.started && e.pointerId === active.id) cancel();\n };\n\n const key = (e: KeyboardEvent) => {\n if (e.key !== \"Escape\" || !active?.started) return;\n e.preventDefault();\n e.stopImmediatePropagation();\n cancel();\n };\n\n // while the hand holds the part, the page neither selects text nor starts its own drag and drop (a selection left\n // by an earlier drag would otherwise be dragged, and the browser cancels the pointer)\n const hold = (e: Event) => e.preventDefault();\n\n const move = (e: PointerEvent) => {\n if (!active || e.pointerId !== active.id) return;\n active.tracker.add(e.timeStamp, e.clientX, e.clientY);\n const p = point(e);\n if (!active.started) {\n const limit = threshold ?? (active.type === \"mouse\" ? 3 : 8);\n if (Math.hypot(p.dx, p.dy) < limit) return;\n // a finger that starts across the part's axis is scrolling the page\n const across = axis === \"x\" ? Math.abs(p.dy) > Math.abs(p.dx) : axis === \"y\" && Math.abs(p.dx) > Math.abs(p.dy);\n if (active.type !== \"mouse\" && across) {\n finish();\n latest.current.onAbandon?.();\n return;\n }\n active.started = true;\n doc.getSelection()?.removeAllRanges();\n el.setPointerCapture?.(active.id);\n el.addEventListener(\"lostpointercapture\", lost);\n setDragging(true);\n latest.current.onStart?.(p);\n }\n latest.current.onMove?.(p, e);\n };\n\n const up = (e: PointerEvent) => {\n if (!active || e.pointerId !== active.id) return;\n active.tracker.add(e.timeStamp, e.clientX, e.clientY);\n const p = point(e);\n const started = active.started;\n finish();\n if (started) latest.current.onEnd?.(p);\n else latest.current.onTap?.(p);\n };\n\n const down = (e: PointerEvent) => {\n if (active || !e.isPrimary || (e.pointerType === \"mouse\" && e.button !== 0)) return;\n const tracker = new VelocityTracker();\n tracker.add(e.timeStamp, e.clientX, e.clientY);\n active = { id: e.pointerId, x0: e.clientX, y0: e.clientY, type: e.pointerType, started: false, tracker };\n if (latest.current.onPress?.(point(e), e) === false) {\n active = null;\n return;\n }\n doc.addEventListener(\"pointermove\", move);\n doc.addEventListener(\"pointerup\", up);\n doc.addEventListener(\"pointercancel\", cancel);\n win.addEventListener(\"keydown\", key, true);\n doc.addEventListener(\"selectstart\", hold, true);\n doc.addEventListener(\"dragstart\", hold, true);\n };\n\n el.addEventListener(\"pointerdown\", down);\n return () => {\n el.removeEventListener(\"pointerdown\", down);\n if (active) finish();\n };\n }, [ref, axis, threshold, disabled]);\n\n return { dragging };\n}\n"},{"path":"beamline/hooks/use-element-ref.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-element-ref.ts","content":"\"use client\";\n\nimport { useCallback, useMemo, useRef, useState, type Ref, type RefObject } from \"react\";\nimport { useComposedRef } from \"./use-composed-ref\";\n\n/**\n * A ref for an element that mounts after its component, for the engine hooks that attach in an effect (`useDrag`):\n * the returned object changes when the element appears or goes, so the hook attaches to it then (a sheet's panel,\n * mounted when it opens; a track shown once its data has loaded). A plain `useRef` would leave the hook attached to\n * nothing. Spread `attach` as the element's `ref`; `external` is the caller's ref, kept in step.\n */\nexport function useElementRef(external?: Ref): [RefObject, (node: T | null) => void] {\n const [node, setNode] = useState(null);\n const object = useMemo(() => ({ current: node }), [node]);\n const inner = useRef(null);\n const forward = useComposedRef(inner, external);\n const attach = useCallback(\n (el: T | null) => {\n setNode(el);\n return forward(el);\n },\n [forward],\n );\n return [object, attach];\n}\n"},{"path":"beamline/hooks/use-indicator.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-indicator.ts","content":"\"use client\";\n\nimport { APPEARANCE_EVENT } from \"../lib/motion-tokens\";\nimport { useLayoutEffect, useRef, useState, type CSSProperties, type RefObject } from \"react\";\n\nexport interface IndicatorBox {\n x: number;\n y: number;\n w: number;\n h: number;\n /** False on the first placement, so the indicator appears in place instead of sliding in from the corner. */\n ready: boolean;\n /** Which way the last move went on each axis (-1 left or up, 1 right or down, 0 still), for the edge that leads. */\n dx: -1 | 0 | 1;\n dy: -1 | 0 | 1;\n /** choice: a selection changed; layout: the same choice moved because the page reflowed (a resize, a font, a\n * type scale). A surface may travel for a choice and should simply be there after a reflow. */\n cause: \"choice\" | \"layout\";\n}\n\ntype Box = Pick;\nconst same = (a: IndicatorBox | null, b: Box) => a !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;\n\n/**\n * Follows the chosen item inside a container: the thumb of a segmented control, the pill or line of tabs, the ring of\n * radio cards. Returns a ref for the container and the box of the first element matching `selector` in it, relative\n * to the container (null when nothing matches). It measures before paint whenever `key` changes, and again when the\n * container resizes or a selection attribute changes inside it (for parts whose choice lives in a library, like tabs).\n */\nexport function useIndicator(\n selector: string,\n key?: unknown,\n onPlace?: (item: HTMLElement, container: T) => void,\n /** offset (default): the item's offset box, for items whose offset parent is the container. rect: measured on screen\n * relative to the container, for items nested in positioned cells (a calendar day in its table cell). */\n measure: \"offset\" | \"rect\" = \"offset\",\n): [RefObject, IndicatorBox | null] {\n const ref = useRef(null);\n const [box, setBox] = useState(null);\n const placed = useRef(onPlace);\n useLayoutEffect(() => {\n placed.current = onPlace;\n });\n useLayoutEffect(() => {\n const container = ref.current;\n if (!container) return;\n const place = (cause: IndicatorBox[\"cause\"] = \"choice\") => {\n const item = container.querySelector(selector);\n if (!item) {\n setBox(null);\n return;\n }\n let next = { x: item.offsetLeft, y: item.offsetTop, w: item.offsetWidth, h: item.offsetHeight };\n if (measure === \"rect\") {\n const a = item.getBoundingClientRect();\n const c = container.getBoundingClientRect();\n next = {\n x: Math.round(a.left - c.left - container.clientLeft + container.scrollLeft),\n y: Math.round(a.top - c.top - container.clientTop + container.scrollTop),\n w: item.offsetWidth,\n h: item.offsetHeight,\n };\n }\n setBox((b) =>\n same(b, next)\n ? b\n : {\n ...next,\n cause,\n ready: b !== null,\n dx: b ? (Math.sign(next.x - b.x) as IndicatorBox[\"dx\"]) : 0,\n dy: b ? (Math.sign(next.y - b.y) as IndicatorBox[\"dy\"]) : 0,\n },\n );\n placed.current?.(item, container);\n };\n const resizes = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(() => place(\"layout\"));\n resizes?.observe(container);\n const observed = new Set();\n const observeItems = () => {\n // A full-width fixed-height list can stay the same size while its tabs/radio choices grow with type or labels.\n // Ignore the decorative indicator itself, whose own dimensions are the output of this measurement.\n const items = new Set([...container.children].filter((child) => child.getAttribute(\"aria-hidden\") !== \"true\"));\n for (const old of observed)\n if (!items.has(old)) {\n resizes?.unobserve(old);\n observed.delete(old);\n }\n for (const item of items)\n if (!observed.has(item)) {\n resizes?.observe(item);\n observed.add(item);\n }\n };\n observeItems();\n place();\n const mutations = new MutationObserver(() => {\n observeItems();\n place(\"choice\");\n });\n mutations.observe(container, {\n subtree: true,\n childList: true,\n attributes: true,\n attributeFilter: [\"data-state\", \"aria-checked\", \"aria-selected\", \"aria-current\", \"data-active\", \"data-open\"],\n });\n const reflow = () => place(\"layout\");\n container.ownerDocument.addEventListener(APPEARANCE_EVENT, reflow);\n container.ownerDocument.fonts?.addEventListener(\"loadingdone\", reflow);\n return () => {\n mutations.disconnect();\n resizes?.disconnect();\n container.ownerDocument.removeEventListener(APPEARANCE_EVENT, reflow);\n container.ownerDocument.fonts?.removeEventListener(\"loadingdone\", reflow);\n };\n }, [selector, key, measure]);\n return [ref, box];\n}\n\n/** The box as custom properties, for a stylesheet to place the indicator with: --pui-indicator-x/-y/-w/-h, and its\n * four edges --pui-glide-l/-r/-t/-b, which the `glide` class moves one at a time. */\nexport function indicatorStyle(box: IndicatorBox): CSSProperties {\n return {\n \"--pui-indicator-x\": `${box.x}px`,\n \"--pui-indicator-y\": `${box.y}px`,\n \"--pui-indicator-w\": `${box.w}px`,\n \"--pui-indicator-h\": `${box.h}px`,\n \"--pui-glide-l\": `${box.x}px`,\n \"--pui-glide-r\": `${box.x + box.w}px`,\n \"--pui-glide-t\": `${box.y}px`,\n \"--pui-glide-b\": `${box.y + box.h}px`,\n } as CSSProperties;\n}\n\nconst AXIS = { x: [\"left\", undefined, \"right\"], y: [\"up\", undefined, \"down\"] } as const;\n\n/** Everything an indicator wearing the `glide` class needs (utilities.css): its place, whether it may move yet, and\n * which way it is going, so the edge on that side leads and the other follows: it stretches toward the new choice and\n * gathers there. */\nexport function glideProps(box: IndicatorBox) {\n return {\n style: indicatorStyle(box),\n \"data-ready\": box.ready ? \"\" : undefined,\n \"data-glide-x\": AXIS.x[box.dx + 1],\n \"data-glide-y\": AXIS.y[box.dy + 1],\n };\n}\n"},{"path":"beamline/hooks/use-media-query.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-media-query.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// one MediaQueryList per query: React reads the snapshot on every render, and a part that renders thirty times a\n// second (a playing audio player's clock) would otherwise ask the browser for a new list each time\nconst lists = new Map();\nconst list = (query: string) => {\n if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return undefined;\n let m = lists.get(query);\n if (!m) lists.set(query, (m = window.matchMedia(query)));\n return m;\n};\n\n/** True while the media query matches; false on the server and in the first client render of SSR output. */\nexport function useMediaQuery(query: string): boolean {\n return useSyncExternalStore(\n (notify) => {\n const m = list(query);\n m?.addEventListener(\"change\", notify);\n return () => m?.removeEventListener(\"change\", notify);\n },\n () => list(query)?.matches ?? false,\n () => false,\n );\n}\n\n/** Phone-width layouts: below 768px. */\nexport const usePhone = () => useMediaQuery(\"(max-width: 767px)\");\n"},{"path":"beamline/hooks/use-motion-tokens.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-motion-tokens.ts","content":"\"use client\";\n\nimport { useMemo, type RefObject } from \"react\";\nimport { useAppearanceRoot } from \"../runtime/appearance\";\nimport { useResolvedAppearance } from \"./use-resolved-appearance\";\nimport { motionAt, motionEase, motionTokens, type MotionTokens } from \"../lib/motion-tokens\";\nimport { semanticMotion } from \"../lib/motion-source\";\n\nconst durationToken = (name: string) =>\n name === \"exit\" ? \"motion-out\" : name === \"in\" || name === \"out\" ? `motion-${name}` : `duration-${name}`;\nconst easeToken = (name: string) => `ease-${name === \"inOut\" ? \"in-out\" : name}`;\nconst REQUEST = {\n times: [\n ...Object.keys(semanticMotion.duration).map(durationToken),\n ...Object.keys(semanticMotion.spring).map((name) => `spring-${name}`),\n ...Object.keys(semanticMotion.stagger).map((name) => `stagger-${name}`),\n \"fade-in\",\n \"fade-out\",\n ],\n easings: [...Object.keys(semanticMotion.ease).map(easeToken), \"ease-spring\", \"ease-spring-bounce\", \"ease-overshoot\"],\n numbers: [\"motion-scale\", \"motion-look\", \"press-scale\"],\n // timing only: the host's own type would make every control resolve differently from the page around it\n typography: false,\n};\n\n/**\n * Resolve each timing at the actual host; omitted host uses the nearest managed root. The first/server snapshot is\n * the pure foundation default. Local CSS values, scope changes, font readiness, OS preference and explicit refresh\n * update the same consumer; no document-wide first-root fallback or persistent global listener.\n */\nexport function useMotionTokens(hostRef?: RefObject): MotionTokens & {\n ready: boolean;\n /** Reduced or none: movement, springs and staggers are instant. */\n reduced: boolean;\n mode: \"full\" | \"reduced\" | \"none\";\n /** Opacity-only arrival and departure (seconds): kept under reduced, instant under none (APPEARANCE A06). */\n fade: { in: number; out: number };\n} {\n const root = useAppearanceRoot();\n const scopeRef = useMemo(() => ({ current: root }), [root]);\n const resolved = useResolvedAppearance(hostRef ?? scopeRef, REQUEST);\n return useMemo(() => {\n if (!resolved.ready)\n return {\n ...motionTokens,\n ready: false,\n reduced: false,\n mode: \"full\" as const,\n fade: { in: motionTokens.duration.in, out: motionTokens.duration.out },\n };\n const reduced = resolved.reducedMotion;\n const speed = (resolved.numbers[\"motion-scale\"] ?? 1) * (resolved.numbers[\"motion-look\"] ?? 1);\n const fade =\n resolved.motionMode === \"none\"\n ? { in: 0.001, out: 0.001 }\n : {\n in: resolved.times[\"fade-in\"] ?? semanticMotion.duration.in * speed,\n out: resolved.times[\"fade-out\"] ?? semanticMotion.duration.out * speed,\n };\n const factor = reduced ? 0.001 / semanticMotion.duration.standard : speed;\n const base = motionAt(factor);\n const duration = Object.fromEntries(\n Object.entries(base.duration).map(([name, fallback]) => [\n name,\n reduced ? 0.001 : (resolved.times[durationToken(name)] ?? fallback),\n ]),\n ) as MotionTokens[\"duration\"];\n const stagger = Object.fromEntries(\n Object.entries(base.stagger).map(([name, fallback]) => [\n name,\n reduced ? 0 : (resolved.times[`stagger-${name}`] ?? fallback),\n ]),\n ) as MotionTokens[\"stagger\"];\n const ease = Object.fromEntries(\n Object.entries(base.ease).map(([name, fallback]) => [\n name,\n motionEase(resolved.easings[easeToken(name)], fallback),\n ]),\n ) as MotionTokens[\"ease\"];\n const spring = { ...base.spring };\n for (const name of Object.keys(semanticMotion.spring) as (keyof typeof semanticMotion.spring)[])\n spring[name] = {\n ...base.spring[name],\n visualDuration: reduced ? 0.001 : (resolved.times[`spring-${name}`] ?? base.spring[name].visualDuration),\n bounce: reduced ? 0 : base.spring[name].bounce,\n };\n return {\n ...base,\n ready: true,\n reduced,\n mode: resolved.motionMode,\n fade,\n duration,\n stagger,\n ease,\n spring,\n pressScale: resolved.numbers[\"press-scale\"] ?? base.pressScale,\n css: {\n spring: resolved.easings[\"ease-spring\"] ?? base.css.spring,\n springBounce: resolved.easings[\"ease-spring-bounce\"] ?? base.css.springBounce,\n overshoot: resolved.easings[\"ease-overshoot\"] ?? base.css.overshoot,\n },\n };\n }, [resolved]);\n}\n"},{"path":"beamline/hooks/use-reduced-motion-safe.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-reduced-motion-safe.ts","content":"\"use client\";\n\nimport { useMediaQuery } from \"./use-media-query\";\nimport { useScopeMotion } from \"../runtime/appearance\";\n\n/** Managed motion policy plus the OS preference, with a stable server snapshot. */\nexport function useReducedMotionSafe() {\n const requested = useScopeMotion();\n const os = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n return requested !== \"auto\" || os;\n}\n"},{"path":"beamline/lib/contour.ts","type":"registry:file","target":"src/ui/beamline/lib/contour.ts","content":"import { readMotionFactor } from \"./motion-tokens\";\n\n/**\n * Contour: a surface whose outline moves like matter instead of a box that resizes. Beamline's own model (research/\n * morphing-interfaces-2026-10-04): a rounded quadrilateral whose four corners each follow their target on a critically\n * damped spring. The corner facing the way it travels answers fastest and the far one slowest, so it leads and gathers;\n * each edge's midpoint heads for where its edge will be a little ahead of its corners and may only bulge outward (the\n * leading edge rounds out like the front of a drop, the tail stays smooth), and while the shape is longer than its target the long edges\n * pinch toward the centre, so a fast move draws a neck; while it is stretched its corners round toward a capsule, as a moving drop does. No spring overshoots: the elasticity is the parts arriving at\n * different moments, never bounce. At rest the surface is its plain CSS box with no clip and no frames.\n *\n * The look decides the material through four inputs on the element (preset-source.css): --m-morph-spread (how unevenly\n * the corners answer; 0 is rigid travel), --m-morph-front (px the leading edge may round out), --m-morph-waist (how much\n * a stretch pinches) and --m-morph-weight (a multiplier on the response time).\n */\nexport interface ContourBox {\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface Contour {\n /** Move the surface to `box` (in its offset parent's coordinates). `instant` places it with no motion. */\n to(box: ContourBox, options?: { instant?: boolean }): void;\n /** Stop and leave the surface at its target. */\n destroy(): void;\n}\n\ntype Point = [number, number];\ntype Corner = \"tl\" | \"tr\" | \"br\" | \"bl\";\ntype Edge = \"t\" | \"r\" | \"b\" | \"l\";\nconst CORNERS: Corner[] = [\"tl\", \"tr\", \"br\", \"bl\"];\nconst EDGES: Edge[] = [\"t\", \"r\", \"b\", \"l\"];\n/** Outward direction of each corner, for deciding which one leads. */\nconst OUT: Record = { tl: [-1, -1], tr: [1, -1], br: [1, 1], bl: [-1, 1] };\n/** Outward direction of each edge. */\nconst NORMAL: Record = { t: [0, -1], r: [1, 0], b: [0, 1], l: [-1, 0] };\n/** Settles at the motion-token morph spring at the foundation default. */\nconst BASE_RESPONSE = 0.26;\n\ninterface Mechanics {\n spread: number;\n front: number;\n waist: number;\n weight: number;\n /** The colour of the edge drawn along a non-rectangular outline (the look's hairline, which a clip would cut off). */\n rim: string;\n rimWidth: number;\n}\n\n/** One step of a critically damped spring with response time `t` (s), in closed form so a long frame cannot explode. */\nfunction step(x: number, v: number, target: number, t: number, dt: number): [number, number] {\n const w = (2 * Math.PI) / (t * 1.2);\n const d = x - target;\n const e = Math.exp(-w * dt);\n return [target + (d + (v + w * d) * dt) * e, (v - w * (v + w * d) * dt) * e];\n}\n\nconst cornersOf = (b: ContourBox): Record => ({\n tl: [b.x, b.y],\n tr: [b.x + b.w, b.y],\n br: [b.x + b.w, b.y + b.h],\n bl: [b.x, b.y + b.h],\n});\nconst midsOf = (c: Record): Record => ({\n t: [(c.tl[0] + c.tr[0]) / 2, (c.tl[1] + c.tr[1]) / 2],\n r: [(c.tr[0] + c.br[0]) / 2, (c.tr[1] + c.br[1]) / 2],\n b: [(c.br[0] + c.bl[0]) / 2, (c.br[1] + c.bl[1]) / 2],\n l: [(c.bl[0] + c.tl[0]) / 2, (c.bl[1] + c.tl[1]) / 2],\n});\nconst zero = (keys: K[]) => Object.fromEntries(keys.map((k) => [k, [0, 0]])) as Record;\nconst num = (style: CSSStyleDeclaration, name: string, fallback: number) => {\n const value = Number.parseFloat(style.getPropertyValue(name));\n return Number.isFinite(value) ? value : fallback;\n};\n\n/** All moving contours share one frame loop, which stops when the last one settles. */\nconst moving = new Set<(dt: number) => boolean>();\nlet frame = 0;\nlet last = 0;\nfunction tick(now: number) {\n const dt = Math.min(0.032, Math.max(0.001, (now - last) / 1000));\n last = now;\n for (const advance of moving) if (!advance(dt)) moving.delete(advance);\n frame = moving.size ? requestAnimationFrame(tick) : 0;\n}\nfunction run(advance: (dt: number) => boolean) {\n moving.add(advance);\n if (!frame) {\n last = performance.now();\n frame = requestAnimationFrame(tick);\n }\n}\n\n/** One contour per element, so a remount (or React's development double mount) keeps its place and keeps moving. */\nconst contours = new WeakMap();\nexport function createContour(el: HTMLElement): Contour {\n const existing = contours.get(el);\n if (existing) return existing;\n let target: ContourBox | null = null;\n let pos: Record | null = null;\n let vel = zero(CORNERS);\n let mid: Record = { t: [0, 0], r: [0, 0], b: [0, 0], l: [0, 0] };\n let midVel = zero(EDGES);\n let mech: Mechanics = { spread: 0.35, front: 5, waist: 0.16, weight: 1, rim: \"none\", rimWidth: 1 };\n let rimPath: SVGPathElement | null = null;\n const rim = (d: string | null, w = 0, h = 0) => {\n if (!d || mech.rim === \"none\") {\n if (rimPath) (rimPath.ownerSVGElement as SVGSVGElement).style.display = \"none\";\n return;\n }\n if (!rimPath) {\n const ns = \"http://www.w3.org/2000/svg\";\n const svg = el.ownerDocument.createElementNS(ns, \"svg\");\n svg.setAttribute(\"aria-hidden\", \"true\");\n svg.setAttribute(\"data-contour-rim\", \"\");\n svg.style.cssText = \"position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none\";\n rimPath = el.ownerDocument.createElementNS(ns, \"path\");\n rimPath.setAttribute(\"fill\", \"none\");\n svg.appendChild(rimPath);\n el.appendChild(svg);\n }\n const svg = rimPath.ownerSVGElement as SVGSVGElement;\n svg.style.display = \"\";\n svg.setAttribute(\"width\", String(w));\n svg.setAttribute(\"height\", String(h));\n rimPath.setAttribute(\"d\", d);\n // the clip keeps the inner half of the stroke: an edge of rimWidth inside the outline\n rimPath.setAttribute(\"stroke-width\", String(mech.rimWidth * 2));\n rimPath.style.stroke = mech.rim;\n };\n let response = BASE_RESPONSE;\n let radius = 0;\n let running = false;\n\n const rest = () => {\n if (!target) return;\n el.style.transform = `translate(${target.x}px, ${target.y}px)`;\n el.style.width = `${target.w}px`;\n el.style.height = `${target.h}px`;\n el.style.clipPath = \"\";\n rim(null);\n delete el.dataset.morphing;\n };\n\n const draw = () => {\n if (!pos || !target) return;\n const c = pos;\n const w = (c.tr[0] - c.tl[0] + c.br[0] - c.bl[0]) / 2;\n const h = (c.bl[1] - c.tl[1] + c.br[1] - c.tr[1]) / 2;\n // the long edges pinch while the shape is longer than its target (area kept, roughly)\n const pinchY = Math.min(h * mech.waist * 0.5, 4, h * Math.max(0, w / target.w - 1) * mech.waist);\n const pinchX = Math.min(w * mech.waist * 0.5, 4, w * Math.max(0, h / target.h - 1) * mech.waist);\n const edges: Record = {\n t: [mid.t[0], mid.t[1] + pinchY],\n b: [mid.b[0], mid.b[1] - pinchY],\n l: [mid.l[0] + pinchX, mid.l[1]],\n r: [mid.r[0] - pinchX, mid.r[1]],\n };\n // still a rectangle (a rigid look, or a straight move): move the box itself and keep every bit of the look's paint\n const flat = (a: number, b: number) => Math.abs(a - b) < 0.35;\n const corners = midsOf(c);\n if (\n flat(c.tl[1], c.tr[1]) &&\n flat(c.bl[1], c.br[1]) &&\n flat(c.tl[0], c.bl[0]) &&\n flat(c.tr[0], c.br[0]) &&\n EDGES.every((k) => flat(edges[k][0], corners[k][0]) && flat(edges[k][1], corners[k][1]))\n ) {\n el.style.transform = `translate(${c.tl[0]}px, ${c.tl[1]}px)`;\n el.style.width = `${c.tr[0] - c.tl[0]}px`;\n el.style.height = `${c.bl[1] - c.tl[1]}px`;\n el.style.clipPath = \"\";\n rim(null);\n return;\n }\n const all = [...CORNERS.map((k) => c[k]), ...EDGES.map((k) => edges[k])];\n const minX = Math.floor(Math.min(...all.map((p) => p[0]))) - 1;\n const minY = Math.floor(Math.min(...all.map((p) => p[1]))) - 1;\n const maxX = Math.ceil(Math.max(...all.map((p) => p[0]))) + 1;\n const maxY = Math.ceil(Math.max(...all.map((p) => p[1]))) + 1;\n const local = (p: Point): Point => [p[0] - minX, p[1] - minY];\n const C = CORNERS.map((k) => local(c[k]));\n const E = ([\"t\", \"r\", \"b\", \"l\"] as Edge[]).map((k) => local(edges[k]));\n const len = (a: Point, b: Point) => Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;\n const toward = (a: Point, b: Point, d: number): Point => {\n const l = len(a, b);\n return [a[0] + ((b[0] - a[0]) / l) * d, a[1] + ((b[1] - a[1]) / l) * d];\n };\n // each corner backs off its radius along both of its real edges and turns through the corner itself, so a sheared\n // shape never folds over; each edge bows through its midpoint\n // a moving drop is round: corners grow toward a capsule while the shape is stretched or far from home\n const away = Math.max(w / target.w - 1, h / target.h - 1, 0);\n const round = mech.front > 0 ? Math.min(1, away * 2.5) : 0;\n const r = radius + (Math.min(w, h) / 2 - radius) * Math.max(0, round);\n const rr = C.map((p, i) => Math.min(r, len(p, C[(i + 1) % 4]) / 2.2, len(p, C[(i + 3) % 4]) / 2.2));\n const into = C.map((p, i) => toward(p, C[(i + 3) % 4], rr[i]));\n const out = C.map((p, i) => toward(p, C[(i + 1) % 4], rr[i]));\n const through = (a: Point, m: Point, b: Point): Point => [\n 2 * m[0] - (a[0] + b[0]) / 2,\n 2 * m[1] - (a[1] + b[1]) / 2,\n ];\n const f = (p: Point) => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`;\n let d = `M${f(out[0])}`;\n for (let i = 0; i < 4; i++) {\n const j = (i + 1) % 4;\n // an edge the rounded corners have nearly used up can only bow a little, or its middle would point\n const a = out[i];\n const b = into[j];\n const chord: Point = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n const bow: Point = [E[i][0] - chord[0], E[i][1] - chord[1]];\n const most = len(a, b) * 0.18;\n const bowLen = Math.hypot(bow[0], bow[1]);\n const m: Point =\n bowLen > most ? [chord[0] + (bow[0] / bowLen) * most, chord[1] + (bow[1] / bowLen) * most] : E[i];\n d += ` Q${f(through(a, m, b))} ${f(b)} Q${f(C[j])} ${f(out[j])}`;\n }\n el.style.transform = `translate(${minX}px, ${minY}px)`;\n el.style.width = `${maxX - minX}px`;\n el.style.height = `${maxY - minY}px`;\n el.style.clipPath = `path(\"${d}Z\")`;\n rim(`${d}Z`, maxX - minX, maxY - minY);\n };\n\n const advance = (dt: number) => {\n if (!pos || !target || !el.isConnected) return (running = false);\n const goal = cornersOf(target);\n let busy = false;\n for (const k of CORNERS) {\n const p = pos[k];\n const v = vel[k];\n const g = goal[k];\n const dx = g[0] - p[0];\n const dy = g[1] - p[1];\n const dist = Math.hypot(dx, dy);\n // -1 … 1: how squarely this corner faces the way it is going\n const along = dist > 0.5 ? (OUT[k][0] * dx + OUT[k][1] * dy) / (dist * Math.SQRT2) : 0;\n const t = response * (1 + mech.spread * 0.4 - mech.spread * along);\n for (const a of [0, 1] as const) {\n [p[a], v[a]] = step(p[a], v[a], g[a], t, dt);\n if (Math.abs(p[a] - g[a]) > 0.2 || Math.abs(v[a]) > 4) busy = true;\n }\n }\n const now = midsOf(pos);\n const aim = midsOf(goal);\n for (const k of EDGES) {\n for (const a of [0, 1] as const)\n [mid[k][a], midVel[k][a]] = step(mid[k][a], midVel[k][a], aim[k][a], response * 0.75, dt);\n // the lead is a few pixels at most, and never more than a fraction of the edge or of the shape's depth\n const across = k === \"t\" || k === \"b\" ? target.h : target.w;\n const edge =\n k === \"t\" ? [pos.tl, pos.tr] : k === \"b\" ? [pos.br, pos.bl] : k === \"l\" ? [pos.bl, pos.tl] : [pos.tr, pos.br];\n const limit = Math.min(\n mech.front,\n across * 0.3,\n Math.hypot(edge[1][0] - edge[0][0], edge[1][1] - edge[0][1]) * 0.15,\n );\n // edges only ever bulge outward: the front rounds out, the tail stays smooth instead of curling in\n let ox = mid[k][0] - now[k][0];\n let oy = mid[k][1] - now[k][1];\n const [nx, ny] = NORMAL[k];\n const inward = ox * nx + oy * ny;\n if (inward < 0) {\n ox -= inward * nx;\n oy -= inward * ny;\n mid[k][0] = now[k][0] + ox;\n mid[k][1] = now[k][1] + oy;\n }\n const off = Math.hypot(ox, oy);\n if (off > limit) {\n mid[k][0] = now[k][0] + (ox / off) * limit;\n mid[k][1] = now[k][1] + (oy / off) * limit;\n }\n if (Math.abs(mid[k][0] - aim[k][0]) > 0.2 || Math.abs(mid[k][1] - aim[k][1]) > 0.2) busy = true;\n }\n if (!busy) {\n pos = goal;\n vel = zero(CORNERS);\n mid = midsOf(goal);\n midVel = zero(EDGES);\n rest();\n return (running = false);\n }\n draw();\n return true;\n };\n\n const contour: Contour = {\n to(box, options) {\n const same = target && target.x === box.x && target.y === box.y && target.w === box.w && target.h === box.h;\n if (same && !options?.instant) return;\n target = { ...box };\n const style = getComputedStyle(el);\n const r = style.borderTopLeftRadius;\n radius = r.endsWith(\"%\") ? (Number.parseFloat(r) / 100) * Math.min(box.w, box.h) : Number.parseFloat(r) || 0;\n mech = {\n spread: num(style, \"--m-morph-spread\", 0.35),\n front: num(style, \"--m-morph-front\", 6),\n waist: num(style, \"--m-morph-waist\", 0.18),\n weight: num(style, \"--m-morph-weight\", 1),\n rim: style.getPropertyValue(\"--m-morph-rim\").trim() || \"none\",\n rimWidth: num(style, \"--m-morph-rim-width\", 1),\n };\n const factor = readMotionFactor(el);\n response = BASE_RESPONSE * mech.weight * factor;\n // first placement, reduced motion, or a hidden surface: be there, with nothing to watch\n if (!pos || options?.instant || factor < 0.05 || !el.getClientRects().length) {\n pos = cornersOf(target);\n vel = zero(CORNERS);\n mid = midsOf(pos);\n midVel = zero(EDGES);\n moving.delete(advance);\n running = false;\n rest();\n return;\n }\n el.dataset.morphing = \"\";\n if (!running) {\n running = true;\n run(advance);\n }\n },\n destroy() {\n moving.delete(advance);\n running = false;\n if (target) rest();\n },\n };\n contours.set(el, contour);\n return contour;\n}\n"},{"path":"beamline/lib/gesture.ts","type":"registry:file","target":"src/ui/beamline/lib/gesture.ts","content":"import { readMotionFactor } from \"./motion-tokens\";\n\n/**\n * The arithmetic of a hand on a part, shared by every part that is dragged, thrown or pulled (useDrag is the pointer\n * side). Three pieces, each from how real interfaces feel (Apple, \"Designing Fluid Interfaces\", WWDC 2018):\n *\n * - velocity: read from the last ~100 ms of movement, so the release carries the speed of the flick, not of the whole drag;\n * - projection: where a thrown thing would come to rest if it slid on with the look's carry (`project`), so a part\n * can decide on release (the nearest value, step or preset to that point) instead of after an animation;\n * - give: past a limit the part follows the hand less and less (`rubberband`) instead of stopping dead, and springs back.\n *\n * How much a part carries and gives is the look's material, read once per gesture from the element (`readHand`):\n * `--m-hand-carry`, `--m-hand-give` and `--m-hand-bounce` (preset-source.css), with `--m-morph-weight` scaling how\n * long things take to settle (times a motion token's duration, which carries the speed setting). Reduced motion\n * carries nothing, gives nothing and never bounces.\n */\n\nexport interface Hand {\n /** How far a release carries: 0 stops where the hand let go, 1 slides on freely (see `project`). */\n carry: number;\n /** How much a part follows the hand past a limit: 0 is a hard stop, 0.55 a phone's rubber band. */\n give: number;\n /** Bounce of a released held object (0 critically damped). Only for what the pointer held. */\n bounce: number;\n /** The look's weight (`--m-morph-weight`): multiply a motion token's duration by it. The token already carries the\n * speed setting, so the weight never does. */\n weight: number;\n /** Reduced or no motion: land at once. */\n reduced: boolean;\n}\n\n/** The hand the defaults describe; also what a server or a test without styles gets. */\nexport const DEFAULT_HAND: Hand = { carry: 0.8, give: 0.45, bounce: 0.14, weight: 1, reduced: false };\n\nconst num = (style: CSSStyleDeclaration, name: string, fallback: number) => {\n const v = Number.parseFloat(style.getPropertyValue(name));\n return Number.isFinite(v) ? v : fallback;\n};\n\n/** The look's physics at `el`, read once at the start of a gesture (never per frame). */\nexport function readHand(el: Element | null | undefined): Hand {\n if (!el || typeof getComputedStyle === \"undefined\") return DEFAULT_HAND;\n const style = getComputedStyle(el);\n const factor = readMotionFactor(el);\n // the motion factor is ~0.005 under reduced motion and 1 at the foundation default\n const reduced = factor < 0.05;\n if (reduced) return { carry: 0, give: 0, bounce: 0, weight: 1, reduced: true };\n return {\n carry: num(style, \"--m-hand-carry\", DEFAULT_HAND.carry),\n give: num(style, \"--m-hand-give\", DEFAULT_HAND.give),\n bounce: num(style, \"--m-hand-bounce\", DEFAULT_HAND.bounce),\n weight: num(style, \"--m-morph-weight\", 1),\n reduced: false,\n };\n}\n\n/** Samples of a pointer's path, kept for the last `window` ms, to read its velocity at release. */\nexport class VelocityTracker {\n private samples: { t: number; x: number; y: number }[] = [];\n // a declared field, not a parameter property: shipped source must also compile under erasableSyntaxOnly (Vite's\n // TypeScript template turns it on), where TypeScript-only syntax with runtime meaning is refused\n private readonly window: number;\n constructor(window = 100) {\n this.window = window;\n }\n\n add(t: number, x: number, y: number) {\n this.samples.push({ t, x, y });\n const from = t - this.window;\n while (this.samples.length > 2 && this.samples[0].t < from) this.samples.shift();\n }\n\n /** Units per second over the kept window; 0 when the hand stopped before letting go (a pause of more than the window). */\n velocity(now = this.samples.at(-1)?.t ?? 0): [number, number] {\n const s = this.samples.filter((p) => p.t >= now - this.window);\n if (s.length < 2) return [0, 0];\n // least squares slope over the window: one jittery last sample does not decide the throw\n const n = s.length;\n const mt = s.reduce((a, p) => a + p.t, 0) / n;\n const mx = s.reduce((a, p) => a + p.x, 0) / n;\n const my = s.reduce((a, p) => a + p.y, 0) / n;\n let tt = 0;\n let tx = 0;\n let ty = 0;\n for (const p of s) {\n tt += (p.t - mt) ** 2;\n tx += (p.t - mt) * (p.x - mx);\n ty += (p.t - mt) * (p.y - my);\n }\n if (tt === 0) return [0, 0];\n return [(tx / tt) * 1000, (ty / tt) * 1000];\n }\n\n reset() {\n this.samples = [];\n }\n}\n\n/**\n * How far something released at `velocity` (units/s) slides before friction stops it, with the look's carry. `rate` is\n * the speed kept per millisecond: 0.99 (the default) suits controls on a short scale (a thumb, a puck, a cut), where a\n * flick should carry a little way; 0.998 is a phone list's deceleration, for long scrolling content.\n */\nexport function project(velocity: number, carry: number, rate = 0.99): number {\n if (carry <= 0) return 0;\n return (((velocity / 1000) * rate) / (1 - rate)) * carry;\n}\n\n/**\n * Where a part drawn `overshoot` units past its limit sits, given the room `extent` it moves in: it follows less and\n * less the further it goes and never reaches `extent`. `give` 0 is a hard stop.\n */\nexport function rubberband(overshoot: number, extent: number, give: number): number {\n if (give <= 0 || extent <= 0) return 0;\n const sign = Math.sign(overshoot);\n const x = Math.abs(overshoot);\n return sign * (1 - 1 / ((x * give) / extent + 1)) * extent;\n}\n\n/** `value` held inside [min, max], with the part's give past either end. */\nexport function within(value: number, min: number, max: number, extent: number, give: number): number {\n if (value < min) return min + rubberband(value - min, extent, give);\n if (value > max) return max + rubberband(value - max, extent, give);\n return value;\n}\n\n/** The nearest of `stops` to `value` (a projected landing point picks its step or preset this way). */\nexport function nearest(value: number, stops: readonly number[]): number {\n let best = stops[0];\n for (const s of stops) if (Math.abs(s - value) < Math.abs(best - value)) best = s;\n return best;\n}\n"},{"path":"beamline/lib/utils.ts","type":"registry:file","target":"src/ui/beamline/lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads\n `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other.\n Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it,\n and every merged page title lost the look's display face. */\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-weight\": [{ font: [\"title\"] }],\n \"font-family\": [{ font: [\"display\", \"numeric\", \"figure\"] }],\n \"font-size\": [\n {\n text: [\n \"2xs\",\n \"display\",\n \"title\",\n \"heading\",\n \"subheading\",\n \"body\",\n \"body-sm\",\n \"reading\",\n \"label\",\n \"caption\",\n \"overline\",\n \"numeric\",\n \"code\",\n ],\n },\n ],\n },\n },\n});\n\n/** Merge class names, letting later Tailwind utilities win over earlier ones. */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\n/** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */\nexport function rng(seed = 1) {\n let s = seed >>> 0 || 1;\n return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32;\n}\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n"}],"docs":"Sidebar is in src/ui/beamline/components/sidebar/sidebar.tsx. The source is in src/ui/beamline (ui/beamline in a project without src/). After Tailwind, import its styles/beamline.css once, then styles/look-prism.css in your app stylesheet (use relative paths). Keep the shared base before all chosen looks. Wrap your app in with UIRoot from its runtime/appearance and prism from its looks/prism. shadcn replaces files when asked; use the Beamline managed-source CLI from the start for three-way upgrades that preserve edits.","meta":{"free":true,"version":"0.2.0-rc.42","library":"https://beamline.io/components/sidebar"}}