{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"rich-text-editor","type":"registry:component","title":"Rich text editor","description":"A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste from the web or as markdown; outputs HTML, Markdown and JSON.","categories":["forms"],"dependencies":["@floating-ui/dom@1.8.0","@radix-ui/react-direction@1.1.4","@radix-ui/react-slot@1.3.3","@radix-ui/react-tooltip@1.2.16","@tiptap/core@3.31.3","@tiptap/extension-code-block@3.31.3","@tiptap/extension-code-block-lowlight@3.31.3","@tiptap/extension-drag-handle@3.31.3","@tiptap/extension-drag-handle-react@3.31.3","@tiptap/extension-highlight@3.31.3","@tiptap/extension-image@3.31.3","@tiptap/extension-list@3.31.3","@tiptap/extension-text-style@3.31.3","@tiptap/extension-typography@3.31.3","@tiptap/extensions@3.31.3","@tiptap/markdown@3.31.3","@tiptap/pm@3.31.3","@tiptap/react@3.31.3","@tiptap/starter-kit@3.31.3","@tiptap/suggestion@3.31.3","@types/react@^19.3.0","@types/react-dom@^19.3.0","clsx@^2.1.1","highlight.js@11.11.2","lowlight@3.3.0","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/glide.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/glide.tsx","content":"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport overlay from \"./overlay.module.css\";\n\n/**\n * The gliding highlight for a list whose active row is tracked in state (command menu, listbox): one plate travels to\n * the active row for the arrow keys and the pointer alike, over --pui-duration-fast. It appears in place (no travel)\n * the first time and whenever `reset` changes (a new page or a new query), so typing never sends it flying.\n * The list must be the plate's offset parent (position: relative); rows stay above it (overlay.item is z-index 1).\n */\nexport function GlidePlate({\n list,\n selector,\n reset,\n axis = \"y\",\n className,\n}: {\n list: RefObject;\n /** Finds the active row inside `list`; null when nothing is active. */\n selector: string | null;\n reset?: unknown;\n /** \"y\" for a list (the plate spans the width); \"xy\" for a row or grid of cells (it takes each cell's size). */\n axis?: \"y\" | \"xy\";\n className?: string;\n}) {\n const [plate, setPlate] = useState<{ x: number; y: number; w: number; h: number; jump: boolean } | null>(null);\n const lastReset = useRef(reset);\n const self = useRef(null);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose; setPlate bails out when unchanged\n useLayoutEffect(() => {\n // the list holds the plate, and React attaches a parent's ref only after its children's layout effects: on the\n // first commit the list is the plate's own parent (it placed itself only when something rendered again later)\n const host = list.current ?? self.current?.parentElement;\n const row = selector ? host?.querySelector(selector) : null;\n const fresh = lastReset.current !== reset;\n lastReset.current = reset;\n if (!row) {\n setPlate((p) => (p && p.h ? { ...p, h: 0 } : p));\n return;\n }\n const x = row.offsetLeft,\n y = row.offsetTop,\n w = row.offsetWidth,\n h = row.offsetHeight;\n setPlate((p) =>\n p && p.x === x && p.y === y && p.w === w && p.h === h && !fresh ? p : { x, y, w, h, jump: fresh || !p?.h },\n );\n // every render: rows can arrive or change height without the selector changing; an unchanged place keeps the state\n });\n return (\n \n );\n}\n\n/**\n * A GlidePlate for lists whose highlight is the pointer or keyboard focus rather than state (time picker, plain option\n * lists): it follows the row under the pointer or holding focus, and fades when neither is in the list. Rows drop\n * their own hover and focus tint.\n */\nexport function FollowPlate({\n list,\n rows,\n className,\n}: {\n list: RefObject;\n /** Matches a row inside `list`, e.g. \"[role=option]\". */\n rows: string;\n className?: string;\n}) {\n const [hot, setHot] = useState(null);\n // after the commit, when the list's ref is attached (a layout effect here ran before it and never listened)\n useEffect(() => {\n const el = list.current;\n if (!el) return;\n let n = 0;\n const mark = (target: EventTarget | null) => {\n const row = (target as HTMLElement | null)?.closest?.(rows);\n if (!row || !el.contains(row)) return;\n row.dataset.glideKey ??= String(++n);\n setHot(row.dataset.glideKey);\n };\n const over = (e: Event) => mark(e.target);\n const leave = () => {\n if (!el.contains(document.activeElement)) setHot(null);\n };\n const blur = (e: FocusEvent) => {\n if (!el.contains(e.relatedTarget as Node)) setHot(null);\n };\n el.addEventListener(\"pointerover\", over);\n el.addEventListener(\"focusin\", over);\n el.addEventListener(\"pointerleave\", leave);\n el.addEventListener(\"focusout\", blur);\n return () => {\n el.removeEventListener(\"pointerover\", over);\n el.removeEventListener(\"focusin\", over);\n el.removeEventListener(\"pointerleave\", leave);\n el.removeEventListener(\"focusout\", blur);\n };\n }, [list, rows]);\n return ;\n}\n"},{"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/alert/alert.module.css","type":"registry:file","target":"src/ui/beamline/components/alert/alert.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the tone's tint, registered so a change of tone blends instead of switching */\n@property --pui-alert-tint {\n syntax: \"\";\n inherits: false;\n initial-value: transparent;\n}\n@layer components {\n /* An alert is a surface like any other, so every look frames it (blueprint's rule, pop's ink outline, ink's pen,\n mono's dashes, metal's pocket). The tone is a tint composed over the role's own fill, never a replacement, plus\n the icon in the tone's colour and the words: colour is never the only signal. */\n .alert {\n display: flex;\n gap: var(--pui-space-3);\n padding: var(--pui-space-3);\n border-radius: var(--pui-radius-card);\n background: linear-gradient(var(--pui-alert-tint), var(--pui-alert-tint)), var(--m-surface-bg);\n color: var(--pui-ink-2);\n /* a change of tone (warning → resolved) blends the tint instead of switching it */\n transition:\n var(--m-transition),\n --pui-alert-tint var(--pui-duration-standard) var(--pui-ease-default);\n }\n .alert[data-tone=\"info\"] {\n --_tone: var(--pui-blue);\n }\n .alert[data-tone=\"success\"] {\n --_tone: var(--pui-green);\n }\n .alert[data-tone=\"warning\"] {\n --_tone: var(--pui-orange);\n }\n .alert[data-tone=\"danger\"] {\n --_tone: var(--pui-red);\n }\n .alert[data-tone=\"neutral\"] {\n --_tone: var(--pui-ink-3);\n }\n .alert:not([data-tone=\"neutral\"]) {\n --pui-alert-tint: color-mix(in oklab, var(--_tone) 9%, transparent);\n }\n .icon {\n display: grid;\n flex: none;\n margin-top: var(--pui-space-0-5);\n color: var(--_tone);\n transition: color var(--pui-duration-standard) var(--pui-ease-default);\n }\n /* a new tone's glyph arrives from a little smaller, so the change of meaning is seen as well as the colour */\n .icon[data-changed] > svg {\n animation: glyph var(--pui-duration-standard) var(--pui-ease-default) both;\n }\n @keyframes glyph {\n from {\n opacity: 0;\n scale: calc(1 - 0.4 * var(--pui-motion-travel, 1));\n }\n }\n .action {\n margin-top: var(--pui-space-2);\n }\n /* a wide alert (from 36rem) keeps its action on the message's line, at the end; a narrow one puts it underneath */\n .alert[data-wide] > .body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--pui-space-4);\n align-items: center;\n }\n .alert[data-wide] > .body > :not(.action) {\n grid-column: 1;\n }\n .alert[data-wide] > .body > .action {\n grid-column: 2;\n grid-row: 1 / span var(--_rows, 1);\n margin-top: 0;\n justify-content: flex-end;\n }\n .icon > svg {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n }\n /* the fold: rows collapse to zero and the alert fades, then it unmounts; it arrives the same way, growing to its\n height where it belongs (so what sits below glides down instead of jumping) */\n .wrap {\n display: grid;\n grid-template-rows: 1fr;\n transition:\n grid-template-rows var(--pui-duration-standard) var(--pui-ease-standard),\n opacity var(--pui-duration-standard) var(--pui-ease-standard);\n }\n @starting-style {\n .wrap[data-state=\"open\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n }\n .wrap[data-state=\"closed\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n /* clips the fold, with room for the look's outer edge and shadow (pop's lip, soft's drop) so they are not cut */\n .clip {\n min-height: 0;\n margin: calc(var(--pui-space-1-5) * -1);\n padding: var(--pui-space-1-5);\n overflow: hidden;\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.alert {\n composes: m-surface from global;\n}\n"},{"path":"beamline/components/alert/alert.tsx","type":"registry:file","target":"src/ui/beamline/components/alert/alert.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport type { CSSProperties, Ref } from \"react\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { AlertDefaults } from \"./defaults\";\nexport type { AlertDefaults } from \"./defaults\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from \"lucide-react\";\nimport { Button } from \"../button/button\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useWidthAs } from \"../../hooks/use-content-width\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { focusAfterRemoval } from \"../../lib/focus\";\nimport styles from \"./alert.module.css\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\";\n\nexport interface AlertClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the wrap part; no override by default. */\n wrap?: string;\n /** Classes for the clip part; no override by default. */\n clip?: string;\n /** Classes for the icon part; no override by default. */\n icon?: string;\n /** Classes for the body part; no override by default. */\n body?: string;\n /** Classes for the title part; no override by default. */\n title?: string;\n /** Classes for the description part; no override by default. */\n description?: string;\n /** Classes for the action part; no override by default. */\n action?: string;\n /** Classes for the dismiss part; no override by default. */\n dismiss?: string;\n}\n\nexport interface AlertProps {\n /** Semantic colour of the displayed content. Defaults to \"info\". */\n tone?: AlertTone;\n /** Heading shown above the content. Defaults to no heading. */\n title?: ReactNode;\n /** What happened and what to do. */\n children?: ReactNode;\n /** Buttons or links: Retry, Update card. */\n action?: ReactNode;\n /** Replace the tone's icon, or false for none. */\n icon?: ReactNode | false;\n /** Controlled visibility; omitted by default to keep visibility locally. */\n open?: boolean;\n /** Initial visibility when uncontrolled; defaults to true. */\n defaultOpen?: boolean;\n /** Reports a request to close; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Shows a close button; defaults to whether onDismiss or onOpenChange is supplied. */\n dismissible?: boolean;\n /** Adds a close button; the alert folds away when open turns false. */\n onDismiss?: () => void;\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 /** Classes for the named visual parts; no part overrides by default. */\n classNames?: AlertClassNames;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n}\n\nconst ICON: Record = {\n info: ,\n success: ,\n warning: ,\n danger: ,\n neutral: ,\n};\n\n/** A message that stays until it is dealt with: what happened, what to do, and the action. Danger and warning are\n * announced as they appear; a dismissed alert folds its height away. */\nexport function Alert({\n tone: toneProp,\n title,\n children,\n action,\n icon,\n open: openProp,\n defaultOpen = true,\n onOpenChange,\n dismissible,\n onDismiss,\n className,\n style,\n classNames,\n ref,\n}: AlertProps) {\n const i18n = useMessages(\"alert\", englishMessages);\n\n const scopeDefaults = useComponentDefaults(\"alert\", [\"tone\"]);\n const tone = toneProp ?? scopeDefaults.tone ?? \"info\";\n\n // an older caller that only listens to onDismiss decides the removal itself, so closing is guarded and reported beside\n const [open, setOpen] = useControllable(openProp, defaultOpen);\n const canDismiss = dismissible ?? !!(onDismiss || onOpenChange);\n const [shown, setShown] = useState(open);\n useEffect(() => {\n if (open) setShown(true);\n }, [open]);\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n // a wide alert keeps its action on the message's line (read once per change of that answer)\n const wide = useWidthAs(host, (w) => w >= 576, false, shown);\n // the glyph of a tone it changed to arrives visibly; the first one is simply there\n const firstTone = useRef(tone);\n if (!shown) return null;\n return (\n {\n if (!open && e.target === e.currentTarget) setShown(false);\n }}\n >\n
\n \n {icon !== false && (\n \n {icon ?? ICON[tone]}\n \n )}\n
\n {title && (\n

\n {title}\n

\n )}\n {children && (\n
\n {children}\n
\n )}\n {action && (\n
\n {action}\n
\n )}\n
\n {canDismiss && (\n {\n focusAfterRemoval(e.currentTarget.closest(\"[data-slot=alert-wrap]\"));\n // Existing event-only callers still decide when removal happens; the new state API can close locally.\n if (dismissible !== undefined || onOpenChange !== undefined) setOpen(false);\n onOpenChange?.(false);\n onDismiss?.();\n }}\n >\n \n \n )}\n
\n \n \n );\n}\n\nexport default Alert;\n"},{"path":"beamline/components/alert/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/alert/defaults.ts","content":"/** Pure allowed presentation defaults for Alert; no component or runtime imports. */\nexport interface AlertDefaults {\n /** Shared tone setting; omit to inherit the surrounding scope or the component default. */\n tone?: \"danger\" | \"success\" | \"warning\" | \"info\" | \"neutral\";\n}\n"},{"path":"beamline/components/alert/messages.ts","type":"registry:file","target":"src/ui/beamline/components/alert/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 dismiss: \"Dismiss\",\n} satisfies MessageDefinitions;\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 container ?? document.body,\n );\n}\nfunction localizedTEXT_COLORS(i18n: Translator) {\n return [\n { name: i18n(\"default\"), value: null },\n { name: i18n(\"grey\"), value: \"var(--pui-ink-3)\" },\n { name: i18n(\"red\"), value: \"var(--pui-red)\" },\n { name: i18n(\"orange\"), value: \"var(--pui-orange)\" },\n { name: i18n(\"green\"), value: \"var(--pui-green)\" },\n { name: i18n(\"blue\"), value: \"var(--pui-blue)\" },\n { name: i18n(\"violet\"), value: \"var(--pui-violet)\" },\n ];\n}\nfunction localizedHIGHLIGHTS(i18n: Translator) {\n return [\n { name: i18n(\"none\"), value: null },\n { name: i18n(\"yellow\"), value: \"color-mix(in oklab, var(--pui-orange) 26%, transparent)\" },\n { name: i18n(\"red\"), value: \"var(--pui-red-tint)\" },\n { name: i18n(\"green\"), value: \"var(--pui-green-tint)\" },\n { name: i18n(\"blue\"), value: \"var(--pui-blue-tint)\" },\n { name: i18n(\"violet\"), value: \"var(--pui-violet-tint)\" },\n ];\n}\nfunction localizedTURN_INTO(i18n: Translator) {\n return localizedBLOCKS(i18n).filter((b) =>\n [\"p\", \"h1\", \"h2\", \"h3\", \"ul\", \"ol\", \"todo\", \"quote\", \"code\"].includes(b.id),\n );\n}\n\nfunction currentBlock(e: Editor) {\n if (e.isActive(\"heading\", { level: 1 })) return \"h1\";\n if (e.isActive(\"heading\", { level: 2 })) return \"h2\";\n if (e.isActive(\"heading\", { level: 3 })) return \"h3\";\n if (e.isActive(\"taskList\")) return \"todo\";\n if (e.isActive(\"bulletList\")) return \"ul\";\n if (e.isActive(\"orderedList\")) return \"ol\";\n if (e.isActive(\"blockquote\")) return \"quote\";\n if (e.isActive(\"codeBlock\")) return \"code\";\n return \"p\";\n}\n\n/** Defined at module level so a re-render (every selection change) never remounts a button between press and click. */\nfunction T({\n active,\n expanded,\n label,\n onClick,\n children,\n}: {\n active?: boolean;\n expanded?: boolean;\n label: string;\n onClick: (e: ReactMouseEvent) => void;\n children: ReactNode;\n}) {\n const classNames = useContext(PartsContext);\n return (\n \n \n {children}\n \n \n );\n}\n\n/** Arrow keys between a toolbar's or a menu's buttons (focus moves; the buttons are a roving set). */\nfunction rove(e: ReactKeyboardEvent, keys: { next: string; prev: string }, selector: string) {\n const items = [...e.currentTarget.querySelectorAll(selector)];\n const i = items.indexOf(document.activeElement as HTMLElement);\n const rtl = getComputedStyle(e.currentTarget).direction === \"rtl\" && keys.next === \"ArrowRight\";\n const step = e.key === (rtl ? keys.prev : keys.next) ? 1 : e.key === (rtl ? keys.next : keys.prev) ? -1 : 0;\n let to = -1;\n if (step) to = (i + step + items.length) % items.length;\n else if (e.key === \"Home\") to = 0;\n else if (e.key === \"End\") to = items.length - 1;\n if (to < 0 || !items.length) return false;\n e.preventDefault();\n items[to].focus();\n return true;\n}\n\nfunction Toolbar({ editor, toolbarRef }: { editor: Editor; toolbarRef: RefObject }) {\n const i18n = useMessages(\"rich-text-editor\", englishMessages);\n\n const classNames = useContext(PartsContext);\n const turnMenu = useRef(null);\n const turnButton = useRef(null);\n const viaKeys = useRef(false);\n const s = useEditorState({\n editor,\n selector: ({ editor: e }) => ({\n block: currentBlock(e),\n bold: e.isActive(\"bold\"),\n italic: e.isActive(\"italic\"),\n strike: e.isActive(\"strike\"),\n code: e.isActive(\"code\"),\n link: (e.getAttributes(\"link\").href as string | undefined) ?? null,\n color: (e.getAttributes(\"textStyle\").color as string | undefined) ?? null,\n highlight: (e.getAttributes(\"highlight\").color as string | undefined) ?? null,\n // the selection itself, so the toolbar renders when it moves and an open panel closes with it (without it, a\n // panel opened after the selection had moved quietly was closed on its first render: the first press did nothing)\n at: `${e.state.selection.from}:${e.state.selection.to}`,\n }),\n });\n const [panel, setPanel] = useState(null);\n const [href, setHref] = useState(\"\");\n // the toolbar keeps its place and eases to the link field's width and back, instead of jumping\n useWidthMorph(toolbarRef, panel === \"link\");\n // a panel opened from the keyboard takes focus (the chosen block, the first swatch); one opened by the pointer\n // leaves it in the document, so typing carries on\n useEffect(() => {\n if (!viaKeys.current || !panel || panel === \"link\") return;\n viaKeys.current = false;\n const host = panel === \"turn\" ? turnMenu.current : toolbarRef.current?.parentElement;\n host\n ?.querySelector(panel === \"turn\" ? \"[aria-checked=true]\" : \"[data-slot=rich-text-editor-swatch]\")\n ?.focus();\n }, [panel, toolbarRef]);\n // back to the text at once, the selection kept (the focus command waits a frame, and the toolbar kept focus)\n const back = () => {\n setPanel(null);\n editor.view.focus();\n };\n // A moved selection closes the open panel. Done while rendering, not in an effect after it: the toolbar renders on\n // every keystroke, and an effect's setState queued one more render behind each, until a fast typist chained 50 of\n // them and React stopped the page (\"Maximum update depth exceeded\").\n const at = s.at;\n const [panelAt, setPanelAt] = useState(at);\n if (panelAt !== at) {\n setPanelAt(at);\n if (panel) setPanel(null);\n }\n const label = localizedTURN_INTO(i18n).find((b) => b.id === s.block)?.label ?? i18n(\"text\");\n const applyLink = () => {\n const url = href.trim();\n const chain = editor.chain().focus().extendMarkRange(\"link\");\n if (!url) chain.unsetLink().run();\n else\n chain\n .setLink({\n href: /^[a-z][\\w+.-]*:|^[/#]/i.test(url)\n ? url\n : /@/.test(url) && !/\\//.test(url)\n ? `mailto:${url}`\n : `https://${url}`,\n })\n .run();\n setPanel(null);\n };\n return (\n {\n if ((e.target as HTMLElement).tagName !== \"INPUT\") e.preventDefault();\n }}\n onKeyDown={(e) => {\n if (e.key !== \"Escape\" || (e.target as HTMLElement).tagName === \"INPUT\") return;\n e.preventDefault();\n back();\n }}\n >\n {\n if ((e.target as HTMLElement).tagName === \"INPUT\") return;\n rove(e, { next: \"ArrowRight\", prev: \"ArrowLeft\" }, \"button\");\n }}\n >\n {panel === \"link\" ? (\n <>\n setHref(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n applyLink();\n }\n if (e.key === \"Escape\") {\n e.preventDefault();\n setPanel(null);\n editor.commands.focus();\n }\n }}\n />\n \n \n \n {s.link && (\n {\n editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n setPanel(null);\n }}\n >\n \n \n )}\n \n ) : (\n <>\n {\n viaKeys.current = e.detail === 0;\n setPanel(panel === \"turn\" ? null : \"turn\");\n }}\n onKeyDown={(e) => {\n if (e.key !== \"ArrowDown\") return;\n e.preventDefault();\n viaKeys.current = true;\n setPanel(\"turn\");\n }}\n >\n {label}\n \n \n \n editor.chain().focus().toggleBold().run()}>\n \n \n editor.chain().focus().toggleItalic().run()}>\n \n \n editor.chain().focus().toggleStrike().run()}\n >\n \n \n editor.chain().focus().toggleCode().run()}>\n \n \n {\n setHref(s.link ?? \"\");\n setPanel(\"link\");\n }}\n >\n \n \n \n {\n viaKeys.current = e.detail === 0;\n setPanel(panel === \"color\" ? null : \"color\");\n }}\n >\n \n \n \n )}\n \n {panel === \"turn\" && (\n {\n if (rove(e, { next: \"ArrowDown\", prev: \"ArrowUp\" }, \"[role=menuitemradio]\")) return;\n if (e.key === \"Escape\" || e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n setPanel(null);\n turnButton.current?.focus();\n }\n }}\n >\n \n
\n {i18n(\"turnInto\")}\n
\n {localizedTURN_INTO(i18n).map((b) => (\n {\n b.run(editor);\n setPanel(null);\n }}\n >\n \n {b.icon}\n \n {b.label}\n \n ))}\n \n )}\n {panel === \"color\" && (\n rove(e, { next: \"ArrowRight\", prev: \"ArrowLeft\" }, \"button\")}\n >\n \n {i18n(\"text\")}\n \n {localizedTEXT_COLORS(i18n).map((c) => (\n {\n const ch = editor.chain().focus();\n (c.value ? ch.setColor(c.value) : ch.unsetColor()).run();\n setPanel(null);\n }}\n >\n {i18n(\"a\")}\n \n ))}\n \n {i18n(\"background\")}\n \n {localizedHIGHLIGHTS(i18n).map((c) => (\n {\n const ch = editor.chain().focus();\n (c.value ? ch.setHighlight({ color: c.value }) : ch.unsetHighlight()).run();\n setPanel(null);\n }}\n />\n ))}\n \n )}\n \n );\n}\n\n/* ─────────────────────────────── the editor ─────────────────────────────── */\n\nconst fileToDataUrl = (file: File) =>\n new Promise((resolve, reject) => {\n const r = new FileReader();\n r.onload = () => resolve(String(r.result));\n r.onerror = reject;\n r.readAsDataURL(file);\n });\n\n// Module-level so they keep their identity: Tiptap's BubbleMenu dispatches an \"update options\" transaction whenever\n// either changes, and a new one on every render made each render a transaction (onHistoryChange → setState → render\n// → transaction … without end).\nconst BUBBLE_OPTIONS = { placement: \"top-start\", offset: 8 } as const;\nconst showBubble = ({ editor: e, state }: { editor: Editor; state: Editor[\"state\"] }) =>\n !state.selection.empty &&\n e.isEditable &&\n !e.isActive(\"codeBlock\") &&\n !e.isActive(\"image\") &&\n state.selection.constructor.name !== \"NodeSelection\";\n\nfunction valueOf(e: Editor): RichTextValue {\n return {\n html: e.getHTML(),\n markdown: e.getMarkdown(),\n json: e.getJSON() as Record,\n text: e.getText(),\n };\n}\n\n/**\n * A writing surface that behaves like Notion: type `/` for any block, select text for formatting, drag the handle to\n * move a block, Tab and Shift+Tab to nest, markdown shortcuts as you type (`#`, `-`, `1.`, `[]`, `>`, ``` ``` ```, `---`,\n * `**bold**`), paste from the web or as markdown. Outputs HTML, Markdown and JSON.\n */\nexport const RichTextEditor = forwardRef(function RichTextEditor(\n {\n value,\n defaultValue,\n defaultMarkdown,\n onValueChange,\n onHistoryChange,\n onImageUpload,\n placeholder: placeholderProp,\n blockHint: blockHintProp,\n readOnly = false,\n autoFocus = false,\n \"aria-label\": ariaLabelProp,\n className,\n classNames,\n rootRef,\n style,\n },\n ref,\n) {\n const i18n = useMessages(\"rich-text-editor\", englishMessages);\n\n const ariaLabel = ariaLabelProp === undefined ? i18n(\"ariaLabel\") : ariaLabelProp;\n const placeholder = placeholderProp === undefined ? i18n(\"placeholder\") : placeholderProp;\n const blockHint = blockHintProp === undefined ? i18n(\"blockHint\") : blockHintProp;\n\n const container = usePortalContainer();\n const store = useMemo(createSlashStore, []);\n const fileInput = useRef(null);\n const toolbar = useRef(null);\n const emitted = useRef(null);\n const cb = useRef({ onValueChange, onHistoryChange, onImageUpload, i18n, placeholder, blockHint });\n cb.current = { onValueChange, onHistoryChange, onImageUpload, i18n, placeholder, blockHint };\n\n const [uploadFailure, setUploadFailure] = useState<{ message: string; files: File[]; pos?: number } | null>(null);\n const [uploading, setUploading] = useState(false);\n const insertFiles = useCallback(\n async (editor: Editor, files: File[], pos?: number) => {\n const images = files.filter((f) => f.type.startsWith(\"image/\"));\n setUploadFailure(null);\n setUploading(true);\n try {\n for (let i = 0; i < images.length; i++) {\n const file = images[i];\n try {\n const src = await (cb.current.onImageUpload ?? fileToDataUrl)(file);\n if (editor.isDestroyed) return;\n const chain = editor.chain().focus();\n (pos !== undefined\n ? chain.insertContentAt(pos, { type: \"image\", attrs: { src, alt: file.name } })\n : chain.setImage({ src, alt: file.name })\n ).run();\n } catch (error) {\n if (!editor.isDestroyed)\n setUploadFailure({\n message: error instanceof Error ? error.message : i18n(\"imageUploadFailed\"),\n files: images.slice(i),\n pos,\n });\n break;\n }\n }\n } finally {\n if (!editor.isDestroyed) setUploading(false);\n }\n },\n [i18n],\n );\n\n const editor = useEditor({\n immediatelyRender: false,\n editable: !readOnly,\n autofocus: autoFocus ? \"end\" : false,\n extensions: [\n StarterKit.configure({\n codeBlock: false,\n heading: { levels: [1, 2, 3] },\n link: { openOnClick: readOnly, autolink: true, defaultProtocol: \"https\" },\n }),\n TaskList,\n TaskItem.configure({\n nested: true,\n a11y: {\n checkboxLabel: (node) =>\n cb.current.i18n(\"taskCheckbox\", { text: node.textContent || cb.current.i18n(\"emptyTask\") }),\n },\n }),\n Callout,\n CodeBlockLowlight.configure({ lowlight, defaultLanguage: \"plaintext\" }),\n TextStyle,\n Color,\n Highlight.configure({ multicolor: true }),\n Typography,\n Image.configure({ allowBase64: true }),\n Markdown,\n Placeholder.configure({\n placeholder: ({ editor: e, node }) =>\n e.isEmpty ? cb.current.placeholder : node.type.name === \"paragraph\" ? cb.current.blockHint : \"\",\n showOnlyCurrent: true,\n }),\n localizedSlashCommand(() => cb.current.i18n).configure({ store, pickImage: () => fileInput.current?.click() }),\n ],\n content: value ?? defaultValue ?? defaultMarkdown ?? \"\",\n contentType: (value ?? defaultValue) ? \"html\" : defaultMarkdown ? \"markdown\" : \"html\",\n editorProps: {\n attributes: {\n \"aria-label\": ariaLabel,\n \"aria-multiline\": \"true\",\n role: \"textbox\",\n spellcheck: \"true\",\n class: classNames?.editor ?? \"\",\n // Alt+F10 reaches the formatting toolbar from the keyboard (the editors' convention); Esc comes back\n \"aria-keyshortcuts\": \"Alt+F10\",\n },\n handleKeyDown: (_view, event) => {\n if (!(event.altKey && event.key === \"F10\")) return false;\n const first = toolbar.current?.querySelector(\"button\");\n if (!first) return false;\n event.preventDefault();\n first.focus();\n return true;\n },\n handlePaste: (_view, event) => {\n const files = Array.from(event.clipboardData?.files ?? []);\n if (files.some((f) => f.type.startsWith(\"image/\")) && editorRef.current) {\n void insertFiles(editorRef.current, files);\n return true;\n }\n // Plain text that looks like markdown becomes structure (headings, lists, code), the way Notion treats it.\n const html = event.clipboardData?.getData(\"text/html\");\n const text = event.clipboardData?.getData(\"text/plain\") ?? \"\";\n if (\n !html &&\n editorRef.current &&\n /(^|\\n)(#{1,3} |[-*+] |\\d+[.)] |> |```|- \\[[ x]\\] )|\\*\\*[^*]+\\*\\*/.test(text)\n ) {\n editorRef.current\n .chain()\n .focus()\n .insertContent(editorRef.current.markdown?.parse(text) ?? text)\n .run();\n return true;\n }\n return false;\n },\n handleDrop: (view, event, _slice, moved) => {\n const files = Array.from(event.dataTransfer?.files ?? []);\n if (moved || !files.length || !editorRef.current) return false;\n const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos;\n void insertFiles(editorRef.current, files, pos);\n return true;\n },\n },\n onUpdate: ({ editor: e }) => {\n const v = valueOf(e);\n emitted.current = v.html;\n cb.current.onValueChange?.(v);\n },\n onTransaction: ({ editor: e }) =>\n cb.current.onHistoryChange?.({ canUndo: e.can().undo(), canRedo: e.can().redo() }),\n });\n const editorRef = useRef(null);\n editorRef.current = editor;\n\n // The plugin keeps the editor and its document; only its current copy changes.\n useEffect(() => {\n if (!editor || editor.isDestroyed) return;\n const current = store.get();\n if (current) {\n const items = filterBlocks(current.query, i18n);\n store.set({ ...current, items, index: Math.min(current.index, Math.max(0, items.length - 1)) });\n }\n editor.view.dispatch(editor.state.tr.setMeta(\"addToHistory\", false));\n // Existing task-item node views do not update on a transaction without document changes.\n editor.state.doc.descendants((node, pos) => {\n if (node.type.name !== \"taskItem\") return;\n const dom = editor.view.nodeDOM(pos);\n if (!(dom instanceof HTMLElement)) return;\n const label = i18n(\"taskCheckbox\", { text: node.textContent || i18n(\"emptyTask\") });\n dom.querySelector(\":scope > label > input\")?.setAttribute(\"aria-label\", label);\n const text = dom.querySelector(\":scope > label > span\");\n if (text) text.textContent = label;\n });\n }, [editor, i18n, placeholder, blockHint, store]);\n\n // Controlled value: apply only what did not come from the editor itself.\n useEffect(() => {\n if (!editor || value === undefined || value === emitted.current) return;\n if (value !== editor.getHTML()) editor.commands.setContent(value, { emitUpdate: false });\n emitted.current = value;\n }, [editor, value]);\n useEffect(() => {\n editor?.setEditable(!readOnly);\n }, [editor, readOnly]);\n\n useImperativeHandle(\n ref,\n () => ({ editor, focus: () => editor?.commands.focus(), getValue: () => (editor ? valueOf(editor) : null) }),\n [editor],\n );\n\n return (\n \n \n {editor && !readOnly && (\n \n
\n \n {\n const { $from } = editor.state.selection;\n const end = $from.end($from.depth === 0 ? 0 : 1);\n editor\n .chain()\n .focus()\n .insertContentAt(Math.min(end + 1, editor.state.doc.content.size), {\n type: \"paragraph\",\n content: [{ type: \"text\", text: \"/\" }],\n })\n .run();\n }}\n >\n \n \n \n \n \n \n \n \n
\n \n )}\n \n {uploadFailure && (\n {\n if (editor) void insertFiles(editor, uploadFailure.files, uploadFailure.pos);\n }}\n >\n {i18n(\"retryImageUpload\")}\n \n }\n >\n {uploadFailure.message}\n \n )}\n {editor && !readOnly && container !== null && (\n \n \n \n )}\n {editor && (\n {\n editor.chain().focus().deleteRange(range).run();\n if (item.id === \"image\") fileInput.current?.click();\n else item.run(editor);\n store.set(null);\n }}\n />\n )}\n {\n const files = Array.from(e.target.files ?? []);\n e.target.value = \"\";\n if (editor) void insertFiles(editor, files);\n }}\n />\n \n \n );\n});\n\nexport default RichTextEditor;\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-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-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/hooks/use-width-morph.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-width-morph.ts","content":"\"use client\";\n\nimport { useLayoutEffect, useRef, type RefObject } from \"react\";\nimport { useMotionTokens } from \"./use-motion-tokens\";\nimport { cssEase } from \"../lib/motion-tokens\";\n\n/**\n * A label whose text changes keeps its path: when `key` changes, the element's width eases from what it was to what the\n * new text needs, so whatever sits after it (a chevron, a counter) glides instead of jumping. The element clips while it\n * eases (give it `overflow-clip whitespace-nowrap`). Nothing runs at rest; reduced motion and motion \"none\" switch at\n * once, and so does a label off screen.\n */\nexport function useWidthMorph(ref: RefObject, key: unknown) {\n const motion = useMotionTokens(ref);\n const last = useRef(null);\n const easing = useRef(null);\n // the width it last rested at, kept current when it changes on its own (a web font arriving) so the next ease starts\n // where the label really is; the ease's own frames are not a resting width\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(() => {\n if (!easing.current) last.current = el.getBoundingClientRect().width;\n });\n observer.observe(el);\n return () => observer.disconnect();\n }, [ref]);\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n // mid-way through an earlier change, it starts from where it is now, not from where that change was going\n const from = easing.current ? el.getBoundingClientRect().width : last.current;\n easing.current?.cancel();\n easing.current = null;\n const box = el.getBoundingClientRect();\n const to = box.width;\n last.current = to;\n const ms = motion.duration.morph * 1000;\n if (from === null || Math.abs(from - to) < 0.5 || motion.reduced || ms < 2) return;\n // off screen nobody sees the glide: the label takes its width at once and no frame is spent on it\n if (box.bottom < 0 || box.top > innerHeight || box.right < 0 || box.left > innerWidth) return;\n const ease = motion.ease.default;\n // pixel to pixel: a Web Animations keyframe to \"auto\" (with interpolate-size, or calc-size) jumps straight to the\n // end in Chromium 153 instead of easing (measured: 537 of 537 px at 300 of 1000 ms); a late change of the natural\n // width is caught by the observer above when the ease ends\n const animation = el.animate([{ width: `${from}px` }, { width: `${to}px` }], {\n duration: ms,\n // even in and out: the glide never moves a neighbour more than a pixel or two in one frame\n easing: cssEase(ease, \"ease-in-out\"),\n });\n easing.current = animation;\n void animation.finished.then(\n () => {\n if (easing.current !== animation) return;\n easing.current = null;\n last.current = el.getBoundingClientRect().width;\n },\n () => {},\n );\n }, [key]); // eslint-disable-line react-hooks/exhaustive-deps -- eases on a change of the text it stands for\n}\n"},{"path":"beamline/lib/focus.ts","type":"registry:file","target":"src/ui/beamline/lib/focus.ts","content":"/**\n * Keeping a keyboard user's place when something disappears. Removing the element that has focus (a dismissed alert,\n * a removed chip or file, a deleted row) drops focus on , and the next Tab starts at the top of the page.\n */\n\nconst TABBABLE = \"a[href], button, input:not([type=hidden]), select, textarea, [tabindex], [contenteditable=true]\";\n\nfunction tabbables(scope: Element) {\n // a modal layer (menu, dialog) marks the rest of the page aria-hidden while it is open (data-aria-hidden): that\n // content is still where focus should land once the layer closes\n return [...scope.querySelectorAll(TABBABLE)].filter(\n (e) =>\n e.tabIndex >= 0 &&\n !e.matches(\":disabled\") &&\n !e.closest(\"[inert], [aria-hidden=true]:not([data-aria-hidden])\") &&\n e.getClientRects().length > 0,\n );\n}\n\n/** The control after `item` in reading order (outside it), or the one before it. */\nfunction neighbour(item: Element, scope: Element) {\n const all = tabbables(scope).filter((e) => !item.contains(e));\n return (\n all.find((e) => item.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING) ??\n all.reverse().find((e) => item.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) ??\n null\n );\n}\n\n/**\n * Call just before `item` is removed or hidden: if focus is inside it, focus moves to the next control after it (or\n * the one before). `scope` keeps the search inside a widget (a toolbar, a field); `fallback` is used when the scope has\n * nothing else to focus. Does nothing when focus is elsewhere, so a removal the user did not start never steals focus.\n */\nexport function focusAfterRemoval(\n item: Element | null | undefined,\n { scope, fallback }: { scope?: Element | null; fallback?: HTMLElement | null } = {},\n) {\n if (!item || !item.contains(document.activeElement)) return;\n (neighbour(item, scope ?? document.body) ?? fallback)?.focus();\n}\n\n/**\n * For an action that may or may not remove its item (the app decides, as with a row's Delete): call before running it.\n * If the item is gone afterwards and focus fell to the page, focus moves to the control that followed it.\n */\nexport function keepPlaceIfRemoved(item: Element | null | undefined, { scope }: { scope?: Element | null } = {}) {\n if (!item) return;\n const target = neighbour(item, scope ?? document.body);\n const check = () => {\n if (\n !item.isConnected &&\n (!document.activeElement || document.activeElement === document.body) &&\n target?.isConnected\n )\n target.focus();\n };\n setTimeout(check, 0);\n setTimeout(check, 400); // after an exit animation\n}\n\n/**\n * A press on a part's surface that hands focus to its control (a slider's well, a mark under its track): call from the\n * pointerdown. Focus goes to `control` without the keyboard's ring (`focusVisible: false`, so the part does not switch\n * to its keyboard look after a click). A mouse press is also followed by the browser's own focus step, which moves\n * focus to the nearest focusable ancestor or the page and leaves the arrow keys dead after the click; that step is\n * cancelled for this one press (and the press selects no text). Cancelling the pointerdown instead would also hide the\n * click from the browser, which then reads the focus as the keyboard's. A control a keyboard user already focused keeps\n * its ring.\n */\nexport function focusFromPress(\n control: HTMLElement | null | undefined,\n event: PointerEvent | { nativeEvent: PointerEvent },\n) {\n if (!control) return;\n const pointer = \"nativeEvent\" in event ? event.nativeEvent : event;\n // asserted, not declared globally: shipped source must type-check without this repo's globals.d.ts, on the\n // TypeScript an app already has (create-next-app installs 5.9, whose DOM lib lacks focusVisible)\n control.focus({ preventScroll: true, focusVisible: false } as FocusOptions);\n // the mouse's compatibility events follow the pointerdown in the same task; a finger's arrive only after a tap\n if (pointer.pointerType !== \"mouse\") return;\n const cancel = (e: MouseEvent) => e.preventDefault();\n window.addEventListener(\"mousedown\", cancel, { capture: true, once: true });\n setTimeout(() => window.removeEventListener(\"mousedown\", cancel, { capture: true }), 0);\n}\n"},{"path":"beamline/lib/highlight.ts","type":"registry:file","target":"src/ui/beamline/lib/highlight.ts","content":"import { common, createLowlight } from \"lowlight\";\n\n/** One syntax highlighter for the whole system (editor code blocks and model answers), coloured from tokens. */\nexport const lowlight: ReturnType = createLowlight(common);\n\nconst PALETTE: [RegExp, string][] = [\n [/comment|quote/, \"var(--pui-ink-3)\"],\n [/keyword|selector-tag|built_in|type|doctag/, \"var(--pui-violet)\"],\n [/string|attr|template-tag|regexp|addition/, \"var(--pui-green)\"],\n [/number|literal|symbol|bullet/, \"var(--pui-orange)\"],\n [/title|section|function/, \"var(--pui-blue)\"],\n [/meta|tag|name|deletion/, \"var(--pui-red)\"],\n];\nconst colorOf = (classes: string[]) => {\n const c = classes.join(\" \");\n return PALETTE.find(([re]) => re.test(c))?.[1];\n};\n\nexport type HastNode = { type: string; value?: string; properties?: { className?: string[] }; children?: HastNode[] };\ntype Token = { content: string; htmlStyle?: Record };\n\n/** Flattens lowlight's tree into lines of coloured tokens (the shape Streamdown renders). */\nexport function toLines(root: HastNode) {\n const lines: Token[][] = [[]];\n const walk = (node: HastNode, classes: string[]) => {\n if (node.type === \"text\") {\n const color = colorOf(classes);\n node.value!.split(\"\\n\").forEach((part, i) => {\n if (i) lines.push([]);\n if (part) lines[lines.length - 1].push(color ? { content: part, htmlStyle: { color } } : { content: part });\n });\n return;\n }\n const next = node.properties?.className ? [...classes, ...node.properties.className] : classes;\n node.children?.forEach((c) => walk(c, next));\n };\n walk(root, []);\n return lines;\n}\n\n/** Lines of coloured tokens for a code view; plain text when the language is unknown. */\nexport function highlightLines(code: string, language?: string): Token[][] {\n const tree =\n language && lowlight.registered(language)\n ? lowlight.highlight(language, code)\n : { type: \"root\", children: [{ type: \"text\", value: code }] };\n return toLines(tree as HastNode);\n}\nexport type { Token as HighlightToken };\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":"Rich text editor is in src/ui/beamline/components/rich-text-editor/rich-text-editor.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/rich-text-editor"}}