{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"slider","type":"registry:component","title":"Slider","description":"A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.","categories":["forms"],"dependencies":["@radix-ui/react-direction@1.1.4","@radix-ui/react-label@2.1.15","@radix-ui/react-slider@1.4.7","@radix-ui/react-tooltip@1.2.16","clsx@^2.1.1","lucide-react@^1.48.0","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/components/_shared/field.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/field.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* A field: label (with an optional aside at the end of its row), the control, then one message line. The gap under\n the control belongs to the message (--pui-field-gap), so a message that arrives or leaves takes its gap with it. */\n /* a column, not a grid: a message (or a fold) that leaves pulls its gap away with a negative margin, which a flex\n column honours and a grid track does not (it would stop at zero and stretch the leaving part back open) */\n .field {\n --pui-field-gap: var(--pui-space-1-5);\n /* positioned: a hidden label or a count's spoken words (sr-only, absolutely placed) stay inside the field */\n position: relative;\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--pui-field-gap);\n }\n .labelRow {\n display: flex;\n min-width: 0;\n align-items: baseline;\n gap: var(--pui-space-2);\n }\n .aside {\n margin-inline-start: auto;\n flex-shrink: 0;\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n }\n\n /* The message: one line at a time. A new line grows in to its own height (0fr to 1fr, no measuring) while the one it\n replaces folds away above it, so the height glides from one to the other; a line that leaves with nothing after it\n takes the gap with it. Arrival over --pui-motion-in, departure over --pui-motion-out; reduced motion keeps the fades. */\n .messages {\n display: grid;\n margin-top: calc(var(--pui-field-gap, var(--pui-space-1-5)) * -1);\n }\n .line {\n display: grid;\n grid-template-rows: 1fr;\n opacity: 1;\n transition:\n grid-template-rows var(--pui-motion-in) var(--pui-ease-default),\n opacity var(--pui-fade-in, var(--pui-motion-in)) var(--pui-ease-default);\n }\n @starting-style {\n .line {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n }\n /* the line a field is first drawn with does not grow in */\n .line[data-initial] {\n transition: none;\n }\n /* a swap is one change of size: the old line folds and the new one grows over the same duration and curve, so their\n sum (the field's height) moves straight from one to the other, with no swell between; the old words fade first */\n .line[data-leaving] {\n grid-template-rows: 0fr;\n opacity: 0;\n transition:\n grid-template-rows var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-fade-in, var(--pui-motion-in)) var(--pui-ease-default);\n pointer-events: none;\n }\n .messages:has(> .line[data-leaving]) > .line:not([data-leaving], [data-initial]) {\n transition-duration: var(--pui-motion-out), var(--pui-fade-in, var(--pui-motion-in));\n }\n .clip {\n min-height: 0;\n overflow: clip;\n overflow-clip-margin: var(--pui-space-1);\n }\n .message {\n display: flex;\n align-items: flex-start;\n gap: var(--pui-space-1-5);\n padding-top: var(--pui-field-gap, var(--pui-space-1-5));\n font-size: var(--pui-text-xs);\n line-height: 1.375;\n }\n .description {\n display: block;\n color: var(--pui-ink-3);\n }\n .error {\n color: var(--pui-red);\n }\n .success {\n color: var(--pui-green);\n }\n .icon {\n flex-shrink: 0;\n width: var(--pui-icon-sm);\n height: var(--pui-icon-sm);\n margin-top: 1px;\n }\n\n /* The count in the label's row: tabular, quiet, shown with attention (.reveal) and in words near the limit. */\n .count {\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n .count[data-state=\"near\"],\n .count[data-state=\"full\"] {\n color: var(--pui-orange);\n }\n .count[data-state=\"over\"] {\n color: var(--pui-red);\n }\n\n /* The status at the end of the frame: the spinner arrives scaled in from its centre, and closes into the check. */\n .status {\n display: inline-grid;\n flex-shrink: 0;\n place-items: center;\n animation: status-in var(--pui-motion-in) var(--pui-ease-default);\n }\n @keyframes status-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.4 * var(--pui-motion-travel, 1));\n }\n }\n\n /* The one frame every text-like control sits in: input, textarea, password, search, number, the select and date\n triggers. Its paint (fill, edge, hover, focus) is the field role of the look in force (looks.css); invalid,\n read-only and disabled are drawn here so they read the same in every look. */\n .frame {\n --_field-height: var(--pui-control-height-md);\n position: relative;\n display: flex;\n min-width: 0; /* a grid or flex parent may make it narrower than the input's natural width */\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--_field-height);\n padding-inline: var(--pui-space-2-5);\n border-radius: var(--pui-field-radius, var(--pui-radius-control));\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: text;\n transition:\n box-shadow var(--pui-motion-out) var(--pui-ease-default),\n background-color var(--pui-motion-out) var(--pui-ease-default);\n }\n .frame:hover:not([data-disabled]) {\n transition-duration: 0ms;\n }\n .frame[data-state=\"open\"] {\n box-shadow: var(--m-field-edge-focus);\n }\n .frame:focus-within {\n transition: none;\n }\n .frame[data-disabled] {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .frame[data-readonly] {\n --m-field-bg: transparent;\n }\n .sm {\n --_field-height: var(--pui-control-height-sm);\n padding-inline: var(--pui-space-2);\n }\n .lg {\n --_field-height: var(--pui-control-height-lg);\n padding-inline: var(--pui-space-3);\n font-size: var(--pui-text-base);\n }\n .multiline {\n align-items: stretch;\n padding-block: var(--pui-space-2);\n }\n\n /* The control itself: borderless, it takes the frame's look. Focus shows on the frame, so the control's own ring is off\n (the frame's ring is the visible focus indicator, which is always present when the control has focus). */\n .control {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: calc(var(--_field-height) - 2px);\n border: 0;\n outline: none;\n background: transparent;\n color: inherit;\n font: inherit;\n letter-spacing: inherit;\n padding: 0;\n }\n .control:focus-visible {\n outline: none;\n }\n .control::placeholder {\n color: var(--pui-ink-3);\n opacity: 1;\n }\n .control:disabled {\n cursor: not-allowed;\n }\n textarea.control {\n min-height: 0;\n resize: none;\n line-height: 1.5;\n field-sizing: content;\n }\n .adornment {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .adornment :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.frame {\n composes: m-field nest-corner from global;\n}\n"},{"path":"beamline/components/_shared/field.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/field.tsx","content":"\"use client\";\nimport { useMessages } from \"../../runtime/localization\";\nimport { english } from \"./messages\";\n\nimport {\n useEffect,\n useId,\n useRef,\n useState,\n type CSSProperties,\n type PointerEvent as ReactPointerEvent,\n type ReactNode,\n type Ref,\n type TransitionEvent,\n} from \"react\";\nimport { AlertCircle, CircleCheck } from \"lucide-react\";\nimport { Label } from \"../label/label\";\nimport { Spinner } from \"../spinner/spinner\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./field.module.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\nexport type FieldClassNames = Partial<\n Record<\"root\" | \"label\" | \"frame\" | \"leading\" | \"trailing\" | \"description\" | \"error\" | \"success\" | \"aside\", string>\n>;\n\nexport interface FieldOptions {\n /** Visible label, also the accessible name. */\n label?: ReactNode;\n /** Keep the label for assistive tech only (dense rows, toolbars). */\n hideLabel?: boolean;\n /** One line of help under the control. */\n description?: ReactNode;\n /** The problem and its fix; replaces the description and marks the control invalid. */\n error?: ReactNode;\n /** The confirmation that the value works (\"@mira is available\"): replaces the description, with a check. */\n success?: ReactNode;\n required?: boolean;\n size?: FieldSize;\n}\n\n/** Ids and aria wiring for one field: the control gets these spread onto it. */\nexport function useFieldIds(\n id?: string,\n { description, error, success }: Pick = {},\n) {\n const auto = useId();\n const controlId = id ?? `field-${auto}`;\n // the line under the field is one of three, and the control points at whichever is there\n const descriptionId = (success || description) && !error ? `${controlId}-description` : undefined;\n const errorId = error ? `${controlId}-error` : undefined;\n return {\n controlId,\n descriptionId,\n errorId,\n aria: {\n id: controlId,\n \"aria-describedby\": [descriptionId, errorId].filter(Boolean).join(\" \") || undefined,\n \"aria-invalid\": error ? true : undefined,\n \"aria-errormessage\": errorId,\n },\n };\n}\n\n/** Label above (with an optional aside at the end of its row: a counter, a link), control frame, then the message. */\nexport function Field({\n label,\n hideLabel,\n description,\n error,\n success,\n required,\n controlId,\n descriptionId,\n errorId,\n aside,\n className,\n classNames,\n style,\n slot = \"field\",\n requiredOnControl,\n children,\n}: FieldOptions & {\n controlId: string;\n descriptionId?: string;\n errorId?: string;\n /** At the end of the label's row: a character count, \"Forgot password?\", \"Optional\". */\n aside?: ReactNode;\n className?: string;\n classNames?: FieldClassNames;\n style?: CSSProperties;\n slot?: string;\n /** The control carries `required` itself, so the label does not repeat it in the control's name. */\n requiredOnControl?: boolean;\n children: ReactNode;\n}) {\n const labelNode = label != null && (\n \n {label}\n \n );\n return (\n \n {aside != null ? (\n
\n {labelNode}\n \n {aside}\n \n
\n ) : (\n labelNode\n )}\n {children}\n \n \n );\n}\n\ntype Tone = \"error\" | \"success\" | \"description\";\ninterface Line {\n key: string;\n tone: Tone;\n content: ReactNode;\n}\nconst ICON = { error: AlertCircle, success: CircleCheck } as const;\n\n/**\n * The line under a field: its problem when there is one, else its confirmation, else its help. Shared by every field\n * and choice group. A change of line keeps its path: the new line grows in under the control while the old one folds\n * away above it, so what sits below glides instead of jumping, and a quick reversal turns around from where it is.\n * The leaving line is a still copy, hidden from assistive tech and inert; ids and aria point only at the line that is\n * there. It is gone when its fold ends, and by the clock as well: a line that leaves in the frame it arrived has no\n * fold to run, so no end is reported.\n */\nexport function FieldMessage({\n error,\n success,\n description,\n errorId,\n descriptionId,\n slot = \"field\",\n classNames,\n}: Pick & {\n errorId?: string;\n descriptionId?: string;\n /** The slot names' prefix: \"checkbox\" names the lines checkbox-error, checkbox-description. */\n slot?: string;\n classNames?: Pick;\n}) {\n const tone: Tone | null = error ? \"error\" : success ? \"success\" : description ? \"description\" : null;\n const content = error || success || description;\n // a new text is a new line (one problem replacing another also folds and grows); rich content changes in place\n const text = typeof content === \"string\" || typeof content === \"number\" ? String(content) : \"\";\n const current: Line | null = tone ? { key: `${tone}\\u0000${text}`, tone, content } : null;\n const [last, setLast] = useState(current);\n const [leaving, setLeaving] = useState(null);\n // the line a field is drawn with is simply there; only a change of line moves\n const [changed, setChanged] = useState(false);\n if ((last?.key ?? null) !== (current?.key ?? null)) {\n // the line that was there leaves (one at a time: a line already leaving is gone at once)\n setLeaving(last && last.key !== current?.key ? last : null);\n setLast(current);\n setChanged(true);\n }\n const box = useRef(null);\n useEffect(() => {\n if (!leaving) return;\n // the clock is the leaving line's own longest transition, read once as it starts to leave (the fold's end event\n // usually comes first), so a field resolves no motion tokens of its own\n const el = box.current?.querySelector(\"[data-leaving]\");\n const longest = el\n ? Math.max(\n 0,\n ...getComputedStyle(el)\n .transitionDuration.split(\",\")\n .map((t) => parseFloat(t) * (t.trim().endsWith(\"ms\") ? 1 : 1000) || 0),\n )\n : 0;\n const id = window.setTimeout(() => setLeaving((l) => (l === leaving ? null : l)), longest + 250);\n return () => window.clearTimeout(id);\n }, [leaving]);\n if (!current && !leaving) return null;\n const shown = leaving && leaving.key === current?.key ? null : leaving;\n const ids = { error: errorId, success: descriptionId, description: descriptionId };\n const line = (l: Line, gone: boolean) => {\n const Icon = l.tone === \"description\" ? null : ICON[l.tone];\n return (\n ) => {\n if (e.target === e.currentTarget && e.propertyName === \"grid-template-rows\") setLeaving(null);\n }\n : undefined\n }\n >\n
\n \n {Icon && }\n {l.content}\n

\n
\n \n );\n };\n return (\n
\n {shown && line(shown, true)}\n {current && line(current, false)}\n
\n );\n}\n\n/** What the end of a text field says about its work: a spinner while a value is checked, a drawn check when it works. */\nexport type FieldStatus = \"busy\" | \"success\";\n\n/** The frame a text-like control sits in; clicking anywhere on it focuses the control. */\nexport function FieldFrame({\n size = \"md\",\n invalid,\n disabled,\n readOnly,\n multiline,\n status,\n statusLabel: statusLabelProp,\n leading,\n trailing,\n className,\n classNames,\n children,\n onPointerDown,\n ref,\n}: {\n size?: FieldSize;\n invalid?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n multiline?: boolean;\n /** busy: a spinner at the end while the value is checked or saved; success: the ring closes into a check. */\n status?: FieldStatus;\n /** What the spinner says while busy (\"Checking\", \"Saving\"). */\n statusLabel?: string;\n leading?: ReactNode;\n trailing?: ReactNode;\n className?: string;\n classNames?: FieldClassNames;\n children: ReactNode;\n onPointerDown?: (e: ReactPointerEvent) => void;\n /** The frame itself, for a control that lays out by the frame's width (useWidthAs). */\n ref?: Ref;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const statusLabel = statusLabelProp === undefined ? i18n(\"statusLabel\") : statusLabelProp;\n\n return (\n {\n onPointerDown?.(e);\n // a click on the frame's padding or an adornment that is not itself interactive focuses the control\n const t = e.target as HTMLElement;\n if (t === e.currentTarget || (t.closest(\"[data-adornment]\") && !t.closest(\"button, a, input, [role=button]\"))) {\n e.preventDefault();\n e.currentTarget.querySelector(\"input, textarea\")?.focus();\n }\n }}\n >\n {leading && (\n \n {leading}\n \n )}\n {children}\n {status && (\n // one ring for both: it spins while the value is checked and closes into the check when it works\n \n \n \n )}\n {trailing && (\n \n {trailing}\n \n )}\n \n );\n}\n\n/**\n * A character count for the label's row (Field `aside`): quiet (\"58/140\") and shown while the field has attention,\n * then always shown and in words as the limit nears (\"12 left\", \"Limit reached\", \"3 over\"), so it never competes with\n * the label at rest. Assistive tech hears it only when it crosses into those words, not at every key.\n */\nexport function FieldCount({\n length,\n max,\n near: nearAt,\n slot = \"field-count\",\n className,\n}: {\n length: number;\n max: number;\n /** How many left turns it into words: by default 10 % of the limit, at least 5 (characters); 1 suits a few tags. */\n near?: number;\n slot?: string;\n className?: string;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const left = max - length;\n const near = left <= (nearAt ?? Math.max(5, Math.ceil(max * 0.1)));\n const state = left < 0 ? \"over\" : left === 0 ? \"full\" : near ? \"near\" : \"room\";\n const words =\n state === \"over\"\n ? i18n(\"fieldOver\", { count: -left })\n : state === \"full\"\n ? i18n(\"fieldFull\")\n : i18n(\"fieldLeft\", { count: left });\n return (\n \n {state === \"room\" ? `${i18n.number(length)}/${i18n.number(max)}` : words}\n \n {state === \"room\" ? \"\" : words}\n \n \n );\n}\n\n/** The class a native input or textarea needs inside a FieldFrame. */\nexport const fieldControlClass = styles.control;\n\n/** What a choice group (segmented control, radio cards) spreads onto its own root when it is a form field. */\nexport interface ChoiceFieldAria {\n \"aria-labelledby\": string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: true;\n}\n\n/**\n * Whether a choice control (segmented control, radio cards, chip group) is laid out as a form field, its label shown\n * above like every field's: when asked (`field`), when it has a description, error or required mark, and whenever its\n * label is not hidden. A view switch or a quick filter passes `hideLabel`: its label stays for assistive tech only.\n * (Trials t16 and t19: agents wrote and the question never showed.)\n */\nexport function choiceIsField(\n field: boolean | undefined,\n label: ReactNode,\n hideLabel: boolean | undefined,\n marked: boolean,\n) {\n return field ?? (marked || (label != null && label !== \"\" && !hideLabel));\n}\n\n/**\n * A choice group as a form field: the visible label above (with the required marker), the group, then its help or its\n * problem — the same frame and message every text field has. Groups that name themselves only for assistive tech\n * (a view switch in a toolbar) do not use it.\n */\nexport function ChoiceField({\n slot,\n label,\n hideLabel,\n required,\n description,\n error,\n className,\n style,\n classNames,\n requiredOnControl,\n children,\n}: Omit & {\n slot: string;\n /** The group carries `aria-required` itself (a radiogroup), so the label does not repeat it in the group's name. */\n requiredOnControl?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: Pick;\n children: (aria: ChoiceFieldAria) => ReactNode;\n}) {\n const auto = useId();\n const labelId = `choice-${auto}-label`;\n const messageId = error || description ? `choice-${auto}-message` : undefined;\n return (\n
\n \n {label}\n \n {children({\n \"aria-labelledby\": labelId,\n ...(messageId ? { \"aria-describedby\": messageId } : {}),\n ...(error ? { \"aria-invalid\": true as const } : {}),\n })}\n \n
\n );\n}\n"},{"path":"beamline/components/_shared/messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n results: {\n one: \"{count} result\",\n other: \"{count} results\",\n },\n noMatch: \"No match for {query}\",\n fieldOver: \"{count} over\",\n fieldFull: \"Limit reached\",\n fieldLeft: \"{count} left\",\n foldMore: \"{list} and {count} more\",\n foldShow: \"Show {count} more {noun}: {list}\",\n statusLabel: \"Checking\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/label/label.tsx","type":"registry:file","target":"src/ui/beamline/components/label/label.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport type { ComponentProps } from \"react\";\nimport * as RadixLabel from \"@radix-ui/react-label\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface LabelProps extends ComponentProps {\n /** Shows the marker and announces \"required\". */\n required?: boolean;\n /** The control says \"required\" itself (a native required input, a radiogroup with aria-required): the label shows\n * the marker only, so the control's name stays the label's words and the state is announced once. */\n requiredOnControl?: boolean;\n}\n\n/** The text label tied to a form control. It dims with a disabled control next to it (peer) or inside it (group). */\nexport function Label({ required = false, requiredOnControl = false, className, children, ...props }: LabelProps) {\n const i18n = useMessages(\"label\", englishMessages);\n\n return (\n \n {children}\n {required && (\n <>\n \n *\n \n {!requiredOnControl && {i18n(\"required\")}}\n \n )}\n \n );\n}\n\nexport default Label;\n"},{"path":"beamline/components/label/messages.ts","type":"registry:file","target":"src/ui/beamline/components/label/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 required: \"required\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/slider/messages.ts","type":"registry:file","target":"src/ui/beamline/components/slider/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English defaults; instance labels take precedence. */\nexport const english = {\n minimum: \"Minimum\",\n maximum: \"Maximum\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/slider/slider.module.css","type":"registry:file","target":"src/ui/beamline/components/slider/slider.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Slider: a well (the inset role) with the chosen span filled as a solid and a knob per value. The knob grows a\n little under the pointer and more while dragged; its value floats above it while dragged or keyboard-focused. */\n .control {\n position: relative;\n display: flex;\n width: 100%;\n height: 20px;\n align-items: center;\n touch-action: none;\n user-select: none;\n }\n .track {\n min-width: 0;\n --m-inset-fill: var(--pui-control-track);\n position: relative;\n flex-grow: 1;\n height: 6px;\n overflow: hidden;\n border-radius: var(--pui-radius-pill);\n }\n .range {\n --m-color: var(--pui-accent);\n position: absolute;\n height: 100%;\n border-radius: var(--pui-radius-pill);\n }\n .thumb {\n position: relative;\n display: block;\n width: 16px;\n height: 16px;\n border-radius: var(--pui-radius-pill);\n transition:\n scale var(--pui-duration-fast) var(--pui-ease-default),\n box-shadow var(--pui-duration-fast) var(--pui-ease-default);\n }\n .thumb:hover {\n scale: 1.1;\n }\n .thumb:active {\n scale: 1.25;\n transition: none;\n }\n /* a keyboard step (and a mark pressed) glides the knob and the fill to the new value over --pui-duration-fast;\n under the pointer they follow the finger at once (Radix places the knob's wrapper and the fill with left/right) */\n .control:not([data-live]) > span:has(> .thumb),\n .control:not([data-live]) .range {\n transition:\n left var(--pui-duration-fast) var(--pui-ease-standard),\n right var(--pui-duration-fast) var(--pui-ease-standard);\n }\n .thumb:focus-visible {\n outline: none;\n box-shadow:\n var(--m-knob-edge),\n var(--pui-control-thumb-shadow),\n 0 0 0 4px var(--pui-focus-halo);\n }\n .thumb[data-disabled] {\n pointer-events: none;\n }\n .value {\n min-width: 0;\n font-family: var(--pui-font-numeric);\n font-size: var(--pui-text-xs);\n white-space: normal;\n overflow-wrap: anywhere;\n direction: ltr;\n unicode-bidi: isolate;\n }\n .valueOverlay {\n pointer-events: none;\n }\n /* ticks sit where the thumb centre lands: the knob stays inside the track, so its centre travels from half a\n thumb in at one end to half a thumb in at the other */\n .marks {\n container-type: inline-size;\n position: relative;\n min-height: 16px;\n height: auto;\n display: grid;\n margin-top: var(--pui-space-1);\n margin-inline: var(--pui-space-2);\n }\n .mark {\n position: absolute;\n display: grid;\n width: 0;\n justify-items: start;\n color: var(--pui-ink-3);\n font-size: var(--pui-text-2xs);\n direction: ltr;\n unicode-bidi: isolate; /* \"50×\" stays one figure in a right-to-left page */\n cursor: pointer;\n transition: color var(--pui-motion-out) var(--pui-ease-default);\n }\n .mark:hover {\n color: var(--pui-ink);\n transition: none;\n }\n /* a label folded for room: its tick stays, the words fade (and take no pointer) */\n .markLabel {\n width: max-content;\n max-inline-size: 45cqi;\n white-space: normal;\n overflow-wrap: anywhere;\n transition: opacity var(--pui-motion-in) var(--pui-ease-default);\n }\n .mark[data-folded] {\n pointer-events: none;\n }\n .mark[data-folded] .markLabel {\n opacity: 0;\n transition-duration: var(--pui-motion-out);\n }\n .readout {\n min-width: 0;\n max-width: 50%;\n flex: 0 1 50%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: end;\n color: var(--pui-ink-2);\n font-family: var(--pui-font-numeric);\n font-size: var(--pui-text-xs);\n font-variant-numeric: tabular-nums;\n direction: ltr;\n unicode-bidi: isolate;\n }\n .tick {\n display: block;\n width: 1px;\n height: 4px;\n margin: 0 0 var(--pui-space-0-5);\n background: var(--pui-line-strong);\n }\n /* layout: label over the track; spacing reads the scale so the Spacing parameter reaches it */\n .root {\n min-width: 0;\n max-width: 100%;\n grid-template-columns: minmax(0, 1fr);\n display: grid;\n gap: var(--pui-space-2);\n }\n .label {\n min-width: 0;\n overflow-wrap: anywhere;\n }\n .adornment {\n min-width: 0;\n max-width: 25%;\n overflow-wrap: anywhere;\n }\n .trackWrap {\n position: relative;\n flex: 1;\n min-width: 0;\n container-type: inline-size;\n }\n .head {\n min-width: 0;\n flex-wrap: wrap;\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--pui-space-3);\n }\n .row {\n min-width: 0;\n padding-inline: var(--pui-space-1);\n display: flex;\n align-items: center;\n gap: var(--pui-space-3);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.track {\n composes: m-inset from global;\n}\n.range {\n composes: m-solid from global;\n}\n.thumb {\n composes: m-knob from global;\n}\n"},{"path":"beamline/components/slider/slider.tsx","type":"registry:file","target":"src/ui/beamline/components/slider/slider.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useDeprecatedProp } from \"../../hooks/use-deprecated-prop\";\n\nimport { useId, useLayoutEffect, useRef, useState, type CSSProperties, type Ref, type ReactNode } from \"react\";\nimport * as RadixSlider from \"@radix-ui/react-slider\";\nimport { useScopeDirection } from \"../../hooks/use-scope-direction\";\nimport { cn } from \"../../lib/utils\";\nimport { fitLabels } from \"../../lib/axis\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { FieldMessage } from \"../_shared/field\";\nimport styles from \"./slider.module.css\";\n\nexport interface SliderMark {\n /** Numeric value at which the labelled tick appears. Required. */\n value: number;\n /** Text displayed for this item. Omitted by default. */\n label?: ReactNode;\n}\n\nexport type SliderClassNames = Partial<\n Record<\n | \"root\"\n | \"head\"\n | \"label\"\n | \"readout\"\n | \"row\"\n | \"start\"\n | \"end\"\n | \"control\"\n | \"track\"\n | \"range\"\n | \"thumb\"\n | \"value\"\n | \"marks\"\n | \"mark\"\n | \"tick\"\n | \"description\"\n | \"error\",\n string\n >\n>;\n\nexport interface SliderProps {\n /** Visible label or accessible name for the control. Required. */\n label: ReactNode;\n /** Shows the label visually while keeping its accessible name; defaults to true. Takes precedence over hideLabel. */\n showLabel?: boolean;\n /** Hides the label; defaults to false. @deprecated Use showLabel={false} instead. */\n hideLabel?: boolean;\n /** One line of help under the track, like every field's description. */\n description?: ReactNode;\n /** The problem and its fix; replaces the description and marks the slider invalid. */\n error?: ReactNode;\n /** One number, or [low, high] for a range. */\n value?: T;\n /** Initial number or range when uncontrolled; defaults to min for a single thumb. */\n defaultValue?: T;\n /** Reports number or two-number range after an edit; no callback by default. */\n onValueChange?: (value: T) => void;\n /** When the pointer lets go or a key is released: save here, not on every move. */\n onValueCommit?: (value: T) => void;\n /** Minimum permitted value. Defaults to 0. */\n min?: number;\n /** Maximum permitted value. Defaults to 100. */\n max?: number;\n /** Increment used by the control. Defaults to 1. */\n step?: number;\n /** Ticks under the track; numbers, or { value, label }. */\n marks?: (number | SliderMark)[];\n /** For a range: the least gap between the thumbs, in steps. */\n minStepsBetweenThumbs?: number;\n /** Formats a raw numeric value for display. Defaults to plain number text. */\n format?: (value: number) => string;\n /** The current value beside the label. */\n showValue?: boolean;\n /** Names of the two thumbs of a range. Default \"Minimum\", \"Maximum\". */\n thumbLabels?: [string, string];\n /** Icons or words at the track's ends (a quiet and a loud speaker). */\n start?: ReactNode;\n /** Icon or text after the slider track; omitted by default to show no end adornment. */\n end?: ReactNode;\n /** Field name used in native form submission. Defaults to no form field name. */\n name?: string;\n /** Prevents interaction with the control. Defaults to false. */\n disabled?: boolean;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Reading direction; inherits the surrounding direction when omitted. Defaults to the surrounding reading direction. */\n dir?: \"ltr\" | \"rtl\";\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: SliderClassNames;\n}\n\n/**\n * A value or range on a known scale. The thumb grows under the finger and shows its value while hovered, dragged or\n * focused; arrows step (the thumb glides to each step), Page Up/Down take ten steps, Home and End go to the ends. A\n * mark's label is a shortcut: pressing it moves the nearest thumb there. In a narrow room the mark labels that would\n * touch fold away (the ends stay), and come back as the room grows.\n */\nexport function Slider({\n label,\n hideLabel: hideLabelProp,\n showLabel,\n description,\n error,\n value,\n defaultValue,\n onValueChange,\n onValueCommit,\n min = 0,\n max = 100,\n step = 1,\n marks,\n minStepsBetweenThumbs,\n format = String,\n showValue,\n thumbLabels: thumbLabelsInput,\n start,\n end,\n name,\n disabled,\n className,\n style,\n ref,\n dir: dirProp,\n classNames,\n}: SliderProps) {\n const i18n = useMessages(\"slider\", englishMessages);\n const thumbLabels: [string, string] =\n thumbLabelsInput === undefined ? [i18n(\"minimum\"), i18n(\"maximum\")] : thumbLabelsInput;\n\n useDeprecatedProp(\"Slider\", \"hideLabel\", \"showLabel={false}\", hideLabelProp !== undefined);\n const hideLabel = showLabel === undefined ? hideLabelProp : !showLabel;\n const toArr = (v: T | undefined): number[] | undefined =>\n v === undefined ? undefined : Array.isArray(v) ? [...v] : [v as number];\n const range = Array.isArray(value ?? defaultValue);\n // the thumbs are held as a list and reported in the caller's shape (one number, or a pair), so the report is beside\n const [current, setCurrent] = useControllable(toArr(value), toArr(defaultValue) ?? [min]);\n const out = (a: number[]) => (range ? [a[0], a[1]] : a[0]) as T;\n const labelId = useId();\n const messageId = error || description ? `${labelId}-message` : undefined;\n // the marks lie along the track Radix lays out, which follows the direction context (not the page's dir)\n const [controlRef, dir] = useScopeDirection(ref, dirProp);\n const [live, setLive] = useState(false);\n const [focused, setFocused] = useState(null);\n const [hovered, setHovered] = useState(null);\n const [keyboardFocus, setKeyboardFocus] = useState(false);\n const pct = (v: number) => ((v - min) / (max - min)) * 100;\n const markList = (marks ?? []).map((m) => (typeof m === \"number\" ? { value: m, label: format(m) } : m));\n const set = (a: number[], commit = false) => {\n setCurrent(a);\n onValueChange?.(out(a));\n if (commit) onValueCommit?.(out(a));\n };\n // a mark's label moves the nearest thumb to it (a range keeps its order)\n const jump = (to: number) => {\n if (disabled) return;\n if (!range) return set([to], true);\n const near = Math.abs(current[0] - to) <= Math.abs(current[1] - to) ? 0 : 1;\n const next = [...current];\n next[near] = to;\n set(next[0] <= next[1] ? next : [next[1], next[0]], true);\n };\n // The same ResizeObserver tracks room and label size changes (including text scaling). Labels are clamped\n // inside the track, while each tick stays at its real value; nothing measures at rest.\n const marksRef = useRef(null);\n const marksKey = markList.map((m) => `${m.value}:${typeof m.label === \"string\" ? m.label : \"\"}`).join(\"|\");\n const [shownMarks, setShownMarks] = useState(null);\n useLayoutEffect(() => {\n const el = marksRef.current;\n if (!el || !markList.length || typeof ResizeObserver === \"undefined\") return;\n const at = markList.map((m) => pct(m.value));\n const layout = () => {\n const labels = [...el.querySelectorAll(\"[data-slot=slider-mark-label]\")];\n const widths = labels.map((label) => label.offsetWidth);\n const room = el.clientWidth;\n const keep = fitLabels(at, widths, room, 6);\n labels.forEach((label, index) => {\n const x = ((dir === \"rtl\" ? 100 - at[index] : at[index]) / 100) * room;\n label.style.transform = `translateX(${Math.max(0, Math.min(room - widths[index], x - widths[index] / 2)) - x}px)`;\n });\n el.style.minHeight = `${Math.max(16, ...labels.map((label, index) => (keep[index] ? label.parentElement!.offsetHeight : 0)))}px`;\n setShownMarks((prev) => (prev && prev.join() === keep.join() ? prev : keep));\n };\n layout();\n const observer = new ResizeObserver(layout);\n observer.observe(el);\n el.querySelectorAll(\"[data-slot=slider-mark-label]\").forEach((label) => observer.observe(label));\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- marksKey names the marks; min/max move them\n }, [marksKey, min, max, dir]);\n const text = range ? `${format(current[0])} – ${format(current[1])}` : format(current[0]);\n return (\n \n
\n \n {label}\n \n {showValue && (\n \n {text}\n \n )}\n
\n
\n {start && (\n \n {start}\n \n )}\n
\n set(a)}\n onValueCommit={(a) => onValueCommit?.(out(a))}\n onKeyDown={() => setKeyboardFocus(true)}\n onPointerDown={() => {\n setKeyboardFocus(false);\n setLive(true);\n }}\n onPointerUp={() => setLive(false)}\n onLostPointerCapture={() => setLive(false)}\n data-live={live ? \"\" : undefined}\n className={cn(styles.control, classNames?.control)}\n >\n \n \n \n {current.map((v, i) => (\n \n {format(v)}\n \n }\n className={styles.valueOverlay}\n >\n {\n setFocused(i);\n setKeyboardFocus(event.currentTarget.matches(\":focus-visible\"));\n }}\n onBlur={() => setFocused(null)}\n onPointerEnter={() => setHovered(i)}\n onPointerLeave={() => setHovered(null)}\n aria-label={range ? thumbLabels[i] : undefined}\n aria-labelledby={range ? undefined : labelId}\n aria-valuetext={format(v)}\n aria-describedby={messageId}\n aria-invalid={error ? true : undefined}\n data-slot=\"slider-thumb\"\n className={cn(styles.thumb, classNames?.thumb)}\n />\n \n ))}\n \n {markList.length > 0 && (\n // the keyboard has the arrows, Home and End; the labels are a pointer shortcut, so they stay out of the\n // accessibility tree like the ticks\n \n {markList.map((mk, i) => (\n {\n if (e.button !== 0) return;\n e.preventDefault();\n jump(mk.value);\n }}\n >\n \n \n {mk.label}\n \n \n ))}\n
\n )}\n
\n {end && (\n \n {end}\n \n )}\n \n \n \n );\n}\n\nexport default Slider;\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-controllable.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-controllable.ts","content":"\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\n/**\n * One value in both forms (rules/CONVENTIONS.md): the prop while it is passed, otherwise the element's own copy that\n * starts at `initial` (a value, or a function that makes it once). The setter takes a value or an updater; an updater\n * reads the latest value even twice in one event, and every change reaches `onChange`, controlled or not.\n * `Next` is what a change can carry when it is narrower than the state: a range that starts empty (null) but is only\n * ever changed to a range.\n */\nexport function useControllable(\n value: T | undefined,\n initial: T | (() => T),\n onChange?: (next: Next) => void,\n) {\n const [own, setOwn] = useState(initial);\n const current = value !== undefined ? value : own;\n const latest = useRef(current);\n latest.current = current;\n const set = useCallback(\n (next: Next | ((was: T) => Next)) => {\n const resolved = typeof next === \"function\" ? (next as (was: T) => Next)(latest.current) : next;\n latest.current = resolved;\n if (value === undefined) setOwn(resolved);\n onChange?.(resolved);\n },\n [value, onChange],\n );\n return [current, set] as const;\n}\n"},{"path":"beamline/hooks/use-deprecated-prop.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-deprecated-prop.ts","content":"\"use client\";\n\nimport { useEffect } from \"react\";\n\n// Bundlers replace NODE_ENV for browser builds; this declaration emits no Node dependency.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nconst warned = new Set();\n\n/** Report a legacy prop once after mount in development; production and server renders stay silent. */\nexport function useDeprecatedProp(component: string, prop: string, replacement: string, supplied: boolean) {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"development\" || !supplied) return;\n const key = `${component}.${prop}`;\n if (warned.has(key)) return;\n warned.add(key);\n console.warn(`[Beamline] ${key} is deprecated. Use ${replacement} instead; the legacy prop still works.`);\n }, [component, prop, replacement, supplied]);\n}\n"},{"path":"beamline/hooks/use-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-scope-direction.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-scope-direction.ts","content":"\"use client\";\n\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState, type Ref } from \"react\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { useAppearance, useAppearanceRoot } from \"../runtime/appearance\";\nimport { APPEARANCE_EVENT } from \"../lib/motion-tokens\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Preserve Radix direction in managed scopes and read the actual parent in static scopes before Radix stamps dir. */\nexport function useScopeDirection(ref?: Ref, explicit?: \"ltr\" | \"rtl\") {\n const root = useRef(null);\n const provided = useDirection(explicit);\n const appearance = useAppearance();\n const managedRoot = useAppearanceRoot();\n const [inherited, setInherited] = useState<\"ltr\" | \"rtl\">();\n const read = useCallback(() => {\n const around = root.current?.parentElement;\n if (around)\n setInherited(around.ownerDocument.defaultView?.getComputedStyle(around).direction === \"rtl\" ? \"rtl\" : \"ltr\");\n }, []);\n useIsoLayoutEffect(read, [read, provided, appearance]);\n useEffect(() => {\n const doc = root.current?.ownerDocument;\n doc?.addEventListener(APPEARANCE_EVENT, read);\n return () => doc?.removeEventListener(APPEARANCE_EVENT, read);\n }, [read]);\n const attach = useCallback(\n (node: T | null) => {\n root.current = node;\n if (typeof ref === \"function\") {\n const cleanup = ref(node);\n if (typeof cleanup === \"function\")\n return () => {\n root.current = null;\n cleanup();\n };\n } else if (ref) ref.current = node;\n },\n [ref],\n );\n return [\n attach,\n explicit ?? (managedRoot ? provided : provided === \"rtl\" ? provided : (inherited ?? provided)),\n ] as const;\n}\n"},{"path":"beamline/lib/axis.ts","type":"registry:file","target":"src/ui/beamline/lib/axis.ts","content":"/**\n * One axis for every part that lays values along a line: a scrubber, a replay bar, a timeline, a budget. A linear\n * scale, readable ticks, a lens that magnifies around a point, and snapping with a little pull, so the arithmetic is\n * written once and every part that magnifies or snaps does it the same way.\n *\n * The lens is the graphical fisheye of Sarkar and Brown (CHI 1992) applied on each side of a focus: the point under\n * the focus stays where it is (so the thing under the pointer never runs away from it, the failure fisheye menus are\n * known for; Gutwin, CHI 2002), neighbours spread out, and the far ends stay pinned to the ends of the track, so the\n * whole axis remains on screen. Distortion 0 is no lens.\n */\n\nexport interface Scale {\n (value: number): number;\n domain: readonly [number, number];\n range: readonly [number, number];\n /** The value at a position on the range (clamped to the domain). */\n invert(position: number): number;\n}\n\n/** A linear map from `domain` (values) to `range` (pixels or any position). */\nexport function linearScale(domain: readonly [number, number], range: readonly [number, number]): Scale {\n const [d0, d1] = domain;\n const [r0, r1] = range;\n const k = d1 === d0 ? 0 : (r1 - r0) / (d1 - d0);\n const scale = ((v: number) => r0 + (v - d0) * k) as Scale;\n scale.domain = domain;\n scale.range = range;\n scale.invert = (p: number) => {\n if (k === 0) return d0;\n const v = d0 + (p - r0) / k;\n return Math.min(Math.max(v, Math.min(d0, d1)), Math.max(d0, d1));\n };\n return scale;\n}\n\n/** About `count` round tick values covering [min, max] (1, 2 or 5 times a power of ten apart). */\nexport function niceTicks(min: number, max: number, count: number): number[] {\n if (!(max > min) || count < 1) return [min];\n const raw = (max - min) / count;\n const power = 10 ** Math.floor(Math.log10(raw));\n const unit = [1, 2, 5, 10].map((m) => m * power).find((s) => s >= raw) ?? 10 * power;\n const out: number[] = [];\n // counted in whole steps from a rounded start, so 0.1 + 0.2 never prints as 0.30000000000000004\n const first = Math.ceil(min / unit - 1e-9);\n for (let i = first; i * unit <= max + unit * 1e-9; i++) out.push(Number((i * unit).toPrecision(12)));\n return out;\n}\n\n/**\n * The lens: maps a position on [start, end] to where it is drawn when magnified around `focus` with `distortion`\n * (0 none; 2–4 is a strong lens). The focus and both ends stay put; positions near the focus spread apart.\n */\nexport function fisheye(position: number, focus: number, distortion: number, start: number, end: number): number {\n if (distortion <= 0) return position;\n const side = position < focus ? focus - start : end - focus;\n if (side <= 0) return position;\n const x = Math.abs(position - focus) / side;\n const g = ((distortion + 1) * x) / (distortion * x + 1);\n return focus + Math.sign(position - focus) * g * side;\n}\n\n/** The undistorted position drawn at `drawn` under the same lens: what a press there selects (rule 8). */\nexport function unfisheye(drawn: number, focus: number, distortion: number, start: number, end: number): number {\n if (distortion <= 0) return drawn;\n const side = drawn < focus ? focus - start : end - focus;\n if (side <= 0) return drawn;\n const g = Math.min(1, Math.abs(drawn - focus) / side);\n return focus + Math.sign(drawn - focus) * (g / (distortion + 1 - g * distortion)) * side;\n}\n\n/** How much the lens magnifies at `position` (1 = not at all): the slope of `fisheye` there. */\nexport function magnification(position: number, focus: number, distortion: number, start: number, end: number) {\n if (distortion <= 0) return 1;\n const side = position < focus ? focus - start : end - focus;\n if (side <= 0) return 1;\n const x = Math.abs(position - focus) / side;\n return (distortion + 1) / (distortion * x + 1) ** 2;\n}\n\n/**\n * A value pulled onto the nearest mark when it is within `pull` of it (in the value's units), so marks feel like\n * detents without trapping the hand: past the pull radius the value moves freely again.\n */\nexport function snap(value: number, marks: readonly number[], pull: number): number {\n let best: number | null = null;\n for (const m of marks)\n if (Math.abs(m - value) <= pull && (best === null || Math.abs(m - value) < Math.abs(best - value))) best = m;\n return best ?? value;\n}\n\n/** `value` rounded to the nearest multiple of `step` from `min`, without floating point dust. */\nexport function toStep(value: number, step: number, min = 0): number {\n if (step <= 0) return value;\n const decimals = (String(step).split(\".\")[1] ?? \"\").length;\n return Number((Math.round((value - min) / step) * step + min).toFixed(decimals));\n}\n\n/**\n * Which labels along an axis fit without touching: `at` is each label's position in percent of the `room` (px), `widths`\n * their widths. Both ends always stay; then each label in order that clears the last one kept and the end. Ticks stay\n * for every value; only the words fold (a slider's marks, a scrubber's labels).\n */\nexport function fitLabels(at: readonly number[], widths: readonly number[], room: number, gap: number): boolean[] {\n const n = at.length;\n const keep = at.map((_, i) => i === 0 || i === n - 1);\n if (n < 3) return keep;\n const x = at.map((p) => (p / 100) * room);\n const left = (i: number) => Math.max(0, Math.min(room - widths[i], x[i] - widths[i] / 2));\n const right = (i: number) => left(i) + widths[i];\n let last = 0;\n for (let i = 1; i < n - 1; i++) {\n if (left(i) >= right(last) + gap && right(i) + gap <= left(n - 1)) {\n keep[i] = true;\n last = i;\n }\n }\n return keep;\n}\n\n/**\n * A label's box along the axis: centred on its point, or extending inward from an end (`edge` \"start\" or \"end\" in the\n * reading direction), clamped inside [0, room]. Px.\n */\nexport function labelBox(\n x: number,\n width: number,\n room: number,\n edge?: \"start\" | \"end\",\n rtl = false,\n): readonly [number, number] {\n const inward = edge === \"start\" ? (rtl ? -1 : 1) : edge === \"end\" ? (rtl ? 1 : -1) : 0;\n const left = inward === 1 ? x : inward === -1 ? x - width : x - width / 2;\n const start = Math.max(0, Math.min(room - width, left));\n return [start, start + width];\n}\n\n/**\n * Which labels show when they are kept in `order`, most important first (fold by rank: the label the job needs, then\n * the ends, then the rest): each is kept if its box clears every kept box by `gap`. A label that `shown` already shows\n * needs only `gap`; one that would appear needs `gap + hold`, so a label sitting on the edge of fitting does not flicker.\n */\nexport function fitRanked(\n boxes: readonly (readonly [number, number])[],\n order: readonly number[],\n gap: number,\n shown?: readonly boolean[],\n hold = 6,\n): boolean[] {\n const kept: (readonly [number, number])[] = [];\n const keep = boxes.map(() => false);\n for (const i of order) {\n const [l, r] = boxes[i];\n const need = shown?.[i] ? gap : gap + hold;\n if (kept.every(([kl, kr]) => r + need <= kl || l >= kr + need)) {\n kept.push(boxes[i]);\n keep[i] = true;\n }\n }\n return keep;\n}\n\n/**\n * Labels that keep their order and never overlap, each as near its own anchor as the others allow: neighbours that\n * would overlap pack into one run, centred on the mean of their own places and held inside [0, room]. The answer moves\n * continuously with the anchors, so labels a lens carries slide aside for each other instead of folding and coming\n * back. `items` in drawing order (by centre); returns each one's start, or null when they cannot all fit (fold by rank\n * with `fitRanked` instead).\n */\nexport function dodge(items: readonly { centre: number; width: number }[], gap: number, room: number): number[] | null {\n const total = items.reduce((s, it) => s + it.width, 0) + gap * Math.max(0, items.length - 1);\n if (total > room + 0.5) return null;\n // a run of packed labels: its members' summed wish for the run's start, and where it sits\n type Run = { from: number; to: number; size: number; sum: number; start: number };\n const runs: Run[] = [];\n const place = (r: Run) => {\n r.start = Math.min(Math.max(r.sum / (r.to - r.from), 0), room - r.size);\n };\n items.forEach((it, i) => {\n const run: Run = { from: i, to: i + 1, size: it.width, sum: it.centre - it.width / 2, start: 0 };\n place(run);\n runs.push(run);\n while (runs.length > 1) {\n const b = runs[runs.length - 1];\n const a = runs[runs.length - 2];\n if (a.start + a.size + gap <= b.start + 1e-6) break;\n // b's members sit after a's, so their wish for the run's start moves back by a's size and a gap\n a.sum += b.sum - (b.to - b.from) * (a.size + gap);\n a.size += gap + b.size;\n a.to = b.to;\n runs.pop();\n place(a);\n }\n });\n const out: number[] = new Array(items.length);\n for (const r of runs) {\n let x = r.start;\n for (let i = r.from; i < r.to; i++) {\n out[i] = x;\n x += items[i].width + gap;\n }\n }\n return out;\n}\n"},{"path":"beamline/lib/utils.ts","type":"registry:file","target":"src/ui/beamline/lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads\n `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other.\n Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it,\n and every merged page title lost the look's display face. */\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-weight\": [{ font: [\"title\"] }],\n \"font-family\": [{ font: [\"display\", \"numeric\", \"figure\"] }],\n \"font-size\": [\n {\n text: [\n \"2xs\",\n \"display\",\n \"title\",\n \"heading\",\n \"subheading\",\n \"body\",\n \"body-sm\",\n \"reading\",\n \"label\",\n \"caption\",\n \"overline\",\n \"numeric\",\n \"code\",\n ],\n },\n ],\n },\n },\n});\n\n/** Merge class names, letting later Tailwind utilities win over earlier ones. */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\n/** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */\nexport function rng(seed = 1) {\n let s = seed >>> 0 || 1;\n return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32;\n}\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n"}],"docs":"Slider is in src/ui/beamline/components/slider/slider.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/slider"}}