{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"date-range-picker","type":"registry:component","title":"Date range picker","description":"A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days; a range can also be typed in words (\"last 2 weeks\", \"Q3\", \"Mar 3 – Apr 10\").","categories":["forms"],"dependencies":["@radix-ui/react-direction@1.1.4","@radix-ui/react-label@2.1.15","@radix-ui/react-popover@1.1.23","@radix-ui/react-slot@1.3.3","clsx@^2.1.1","lucide-react@^1.48.0","motion@^13.4.4","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/components/_shared/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/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/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/_shared/overlay.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the source morph's moving parts: the clip's four sides, the radius and the offset back to the trigger */\n@property --ci-t {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-r {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-b {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-l {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@property --ci-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@layer components {\n /* Every floating layer in the system: one surface (painted by the overlay role of the look in force), one menu-item\n look, one scrim, one enter and exit. A layer placed against a trigger opens out of it (the source morph below); one\n without a placement arrives in --pui-motion-in scaling from its origin. Each leaves in --pui-motion-out; Radix keeps\n it mounted until the exit animation ends. Reduced motion makes both instant (the duration tokens become 1ms). */\n .surface {\n z-index: var(--pui-z-popover);\n min-width: 8rem;\n /* never past the screen: as wide and as tall as the room beside the trigger (Radix measures it) */\n max-width: var(--radix-popper-available-width, none);\n max-height: var(--radix-popper-available-height, 70vh);\n overflow: auto;\n border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n color: var(--pui-ink);\n transform-origin: var(--radix-popper-transform-origin, var(--radix-dropdown-menu-content-transform-origin, center));\n outline: none;\n }\n .surface[data-state=\"open\"],\n .surface[data-state=\"delayed-open\"],\n .surface[data-state=\"instant-open\"] {\n animation: pop-in var(--pui-motion-in) var(--pui-ease-default);\n }\n .surface[data-state=\"closed\"] {\n animation: pop-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n\n /* The source morph (research/morphing-interfaces-2026-10-04, M3): a layer placed against a trigger does not fade in\n beside it, it opens out of it. It starts as the trigger's own box (Radix gives its size and the side and alignment\n it was placed on), offset back onto the trigger, and grows: the side nearest the trigger is there at once, the\n sides across follow, the far side arrives last (~200 ms), so the rows by the trigger are readable within the\n ruled 90 ms while the outline settles. Content fades in over those 90 ms. It closes back into the trigger in the\n ruled 180 ms. The clip ends 48px outside the box so the layer's shadow is never cut. Reduced motion: instant. */\n .surface[data-side] {\n --_aw: var(--radix-popper-anchor-width, 0px);\n --_ah: var(--radix-popper-anchor-height, 0px);\n --_gap: 6px;\n --from-t: -48px;\n --from-r: -48px;\n --from-b: -48px;\n --from-l: -48px;\n --from-x: 0px;\n --from-y: 0px;\n --d-near: calc(var(--pui-duration-standard) * 0.55);\n --d-cross: calc(var(--pui-duration-standard) * 0.85);\n --d-far: var(--pui-duration-standard);\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-overlay-radius, var(--pui-radius-card))\n );\n translate: var(--ci-x) var(--ci-y);\n }\n .surface[data-side=\"bottom\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n --from-y: calc(-1 * (var(--_ah) + var(--_gap)));\n --d-t: var(--d-near);\n --d-b: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"top\"] {\n --from-b: 0px;\n --from-t: calc(100% - var(--_ah));\n --from-y: calc(var(--_ah) + var(--_gap));\n --d-b: var(--d-near);\n --d-t: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"right\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n --from-x: calc(-1 * (var(--_aw) + var(--_gap)));\n --d-l: var(--d-near);\n --d-r: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n .surface[data-side=\"left\"] {\n --from-r: 0px;\n --from-l: calc(100% - var(--_aw));\n --from-x: calc(var(--_aw) + var(--_gap));\n --d-r: var(--d-near);\n --d-l: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n /* alignment along the trigger: which part of the layer the trigger sits over */\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"] {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"]:dir(rtl) {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"]:dir(rtl) {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"center\"] {\n --from-l: calc((100% - var(--_aw)) / 2);\n --from-r: calc((100% - var(--_aw)) / 2);\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"start\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"end\"] {\n --from-t: calc(100% - var(--_ah));\n --from-b: 0px;\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"center\"] {\n --from-t: calc((100% - var(--_ah)) / 2);\n --from-b: calc((100% - var(--_ah)) / 2);\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) {\n animation:\n grow-t var(--d-t) var(--pui-ease-out-strong),\n grow-r var(--d-r) var(--pui-ease-out-strong),\n grow-b var(--d-b) var(--pui-ease-out-strong),\n grow-l var(--d-l) var(--pui-ease-out-strong),\n grow-xy var(--d-cross) var(--pui-ease-out-strong),\n settling var(--d-far) step-end;\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) > * {\n animation: content-in var(--pui-motion-in) var(--pui-ease-default) both;\n }\n /* one duration for every part of the exit: the layer unmounts when the first of them ends */\n .surface[data-side][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .surface[data-side][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n @keyframes grow-t {\n from {\n --ci-t: var(--from-t);\n }\n }\n @keyframes grow-r {\n from {\n --ci-r: var(--from-r);\n }\n }\n @keyframes grow-b {\n from {\n --ci-b: var(--from-b);\n }\n }\n @keyframes grow-l {\n from {\n --ci-l: var(--from-l);\n }\n }\n @keyframes grow-xy {\n from {\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n }\n }\n /* it starts over its own trigger: until it has grown, the press that opened it must not land on a row */\n @keyframes settling {\n 0%,\n 100% {\n pointer-events: none;\n }\n }\n @keyframes shrink {\n to {\n --ci-t: var(--from-t);\n --ci-r: var(--from-r);\n --ci-b: var(--from-b);\n --ci-l: var(--from-l);\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n opacity: 0;\n }\n }\n @keyframes content-in {\n from {\n opacity: 0;\n }\n }\n @keyframes content-out {\n to {\n opacity: 0;\n }\n }\n .padded {\n padding: var(--pui-pad-popover);\n }\n .menu {\n padding: var(--pui-space-1);\n }\n @keyframes pop-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes pop-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n\n /* rows (and the gliding plate) nest in the list: its radius minus its padding, never rounder than a chip; on the\n row itself, so any list that uses .item gets it */\n .item,\n .glide {\n --_item-radius: min(\n var(--pui-radius-chip),\n calc(var(--pui-overlay-radius, var(--pui-radius-card)) - var(--pui-space-1))\n );\n }\n\n /* menu rows: shared by dropdown, context menu, menubar, select, combobox lists */\n .item {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--pui-control-height-sm);\n padding: 0 var(--pui-space-2);\n /* nested in the list: the overlay's radius minus its padding, never rounder than a chip */\n border-radius: var(--_item-radius);\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: default;\n user-select: none;\n outline: none;\n }\n /* on a touch screen a row is a finger's target: the touch height (44px) from the tokens; a mouse keeps the dense row */\n @media (pointer: coarse) {\n .item {\n min-height: var(--pui-control-height-touch);\n }\n }\n /* a destructive row speaks in the danger ink only while it can be used: disabled wins (muted ink, no alarm for an\n action that cannot happen) */\n .item[data-tone=\"danger\"]:not([data-disabled]) {\n color: var(--pui-red);\n }\n .item[data-disabled] {\n color: var(--pui-ink-3);\n pointer-events: none;\n }\n .item :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .item[data-tone=\"danger\"]:not([data-disabled]) :where(svg) {\n color: currentColor;\n }\n .item[data-highlighted]:not([data-glide]) {\n background: var(--pui-hover-2);\n }\n /* a press is acknowledged at once, over the plate, before the menu closes or the row toggles */\n .item:active:not([data-disabled]) {\n background: var(--pui-hover);\n }\n .shortcut {\n margin-inline-start: auto;\n padding-inline-start: var(--pui-space-4);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n letter-spacing: var(--pui-tracking-mono-caps);\n }\n .heading {\n padding: var(--pui-space-1-5) var(--pui-space-2) var(--pui-space-1);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n font-weight: var(--pui-weight-medium);\n }\n .separator {\n height: 1px;\n margin: var(--pui-space-1) calc(var(--pui-space-1) * -1);\n background: var(--pui-line);\n }\n .check {\n margin-inline-start: auto;\n color: var(--pui-accent) !important;\n }\n /* a check arrives in its row as the value changes (at once): it grows from the middle over the arrival */\n .check :where(svg) {\n animation: check-in var(--pui-motion-in) var(--pui-ease-out-strong);\n }\n @keyframes check-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.5 * var(--pui-motion-travel, 1));\n }\n }\n /* the gliding highlight: one plate moves between rows for the pointer and the arrow keys; it appears in place */\n .glide {\n position: absolute;\n z-index: 0;\n inset-inline: var(--pui-space-1);\n top: 0;\n border-radius: var(--_item-radius);\n background: var(--pui-hover-2);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--pui-motion-out) var(--pui-ease-default);\n }\n .glide[data-on] {\n opacity: 1;\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n .glide[data-jump] {\n transition: opacity 0ms;\n }\n /* a plate over a row or grid of cells takes each cell's size and travels both ways */\n .glide[data-axis=\"xy\"] {\n inset-inline: auto;\n left: 0;\n }\n .glide[data-axis=\"xy\"][data-on] {\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n width var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n\n /* a layer that has begun to close is out of the way at once: for the length of its exit it takes no pointer, so a tap\n meant for the page behind (the next row, the button the panel covered) lands there, never on the leaving ghost.\n Focus has already gone back (Radix) and it unmounts when the exit ends. */\n .scrim[data-state=\"closed\"],\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n pointer-events: none;\n }\n\n /* modal layers */\n .scrim {\n position: fixed;\n inset: 0;\n z-index: var(--pui-z-overlay);\n background: var(--pui-scrim);\n backdrop-filter: blur(var(--pui-blur-overlay));\n }\n .scrim[data-state=\"open\"] {\n animation: fade-in var(--pui-fade-in) var(--pui-ease-default);\n }\n .scrim[data-state=\"closed\"] {\n animation: fade-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n }\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes fade-out {\n to {\n opacity: 0;\n }\n }\n .dialog {\n /* the content answers to the dialog's own width (a footer's buttons share the row on a phone) */\n container-type: inline-size;\n position: fixed;\n z-index: var(--pui-z-modal);\n left: 50%;\n top: 50%;\n width: min(calc(100vw - var(--pui-space-8)), var(--pui-dialog-width, var(--_dialog-width, 440px)));\n max-height: calc(100dvh - var(--pui-space-12));\n overflow: hidden;\n translate: -50% -50%;\n border-radius: var(--pui-dialog-radius, var(--pui-radius-window));\n color: var(--pui-ink);\n outline: none;\n /* a size chosen while open (a step that needs more room) eases the width in place, centred */\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n .dialog[data-state=\"open\"] {\n animation: dialog-in var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .dialog[data-state=\"closed\"] {\n animation: dialog-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n /* A dialog opened from something (use-open-from.ts) grows out of it: it starts as the opener's box, offset back onto\n it, and grows to its own place over the considered duration while its content fades in; it closes back into the\n opener in the ruled 180 ms. Shares the source morph's moving parts and guard with .surface. */\n .dialog[data-open-from] {\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-dialog-radius, var(--pui-radius-window))\n );\n transform: translate(var(--ci-x), var(--ci-y));\n }\n .dialog[data-open-from][data-state=\"open\"] {\n animation:\n grow-t var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-r var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-b var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-l var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-xy calc(var(--pui-duration-considered) * 0.9) var(--pui-ease-out-strong),\n settling var(--pui-duration-considered) step-end;\n }\n .dialog[data-open-from][data-state=\"open\"] > * {\n animation: content-in var(--pui-duration-standard) var(--pui-ease-default) calc(var(--pui-duration-standard) * 0.35)\n both;\n }\n .dialog[data-open-from][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .dialog[data-open-from][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n /* A sheet: a panel from an edge. It slides in from its edge over the considered duration on the drawer curve and\n goes back out to that edge in the ruled departure (a layer closes back into where it came from). The edge is\n logical: an end (\"right\") sheet comes from the left in a right-to-left page. Its content answers to its width. */\n .sheet {\n --_sx: 0px;\n --_sy: 0px;\n container-type: inline-size;\n /* where a finger has swiped it toward its edge (sheet.tsx); it settles back over the departure */\n translate: var(--_swipe, 0px) 0;\n }\n /* a side panel leaves sideways pans to the swipe and keeps vertical scrolling native, in its body too */\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]),\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) [data-slot=\"sheet-body\"] {\n touch-action: pan-y;\n }\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) {\n transition:\n var(--m-transition),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n .sheet[data-swiping] {\n transition: none;\n }\n .sheet[data-side=\"right\"] {\n --_sx: 100%;\n }\n .sheet[data-side=\"left\"] {\n --_sx: -100%;\n }\n .sheet[data-side=\"right\"]:dir(rtl) {\n --_sx: -100%;\n }\n .sheet[data-side=\"left\"]:dir(rtl) {\n --_sx: 100%;\n }\n .sheet[data-side=\"top\"] {\n --_sy: -100%;\n }\n .sheet[data-side=\"bottom\"] {\n --_sy: 100%;\n }\n .sheet[data-state=\"open\"] {\n animation: sheet-in var(--pui-duration-considered) var(--pui-ease-drawer) both;\n }\n .sheet[data-state=\"closed\"] {\n animation: sheet-out var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n @keyframes sheet-in {\n from {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes sheet-out {\n to {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n }\n @keyframes dialog-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n}\n\n/* Reduced motion: surfaces and dialogs fade without scaling or growing, over the fade tokens (restrained under reduced,\n 1ms under none; APPEARANCE A06). */\n@media (prefers-reduced-motion: reduce) {\n .surface,\n .dialog,\n .sheet {\n animation-name: fade-in !important;\n animation-duration: var(--pui-fade-in) !important;\n }\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n animation-name: fade-out !important;\n animation-duration: var(--pui-fade-out) !important;\n }\n}\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .surface,\n :global(.pui[data-motion=\"none\"]) .surface,\n :global(.pui[data-motion=\"reduced\"]) .dialog,\n :global(.pui[data-motion=\"none\"]) .dialog,\n :global(.pui[data-motion=\"reduced\"]) .sheet,\n :global(.pui[data-motion=\"none\"]) .sheet {\n animation-name: fade-in;\n animation-duration: var(--pui-fade-in);\n }\n :global(.pui[data-motion=\"reduced\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .sheet[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .sheet[data-state=\"closed\"] {\n animation-name: fade-out;\n animation-duration: var(--pui-fade-out);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.surface {\n composes: m-overlay from global;\n}\n.dialog {\n composes: m-overlay from global;\n}\n"},{"path":"beamline/components/_shared/row-action.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/row-action.module.css","content":"@layer properties, theme, base, components, utilities;\n/* A row of a list that you press as a whole: a ticket in an inbox, a service on a status page, a key in a table, a\n disclosure header. The caller lays out its content (grid or flex, with utilities); the row owns how it answers:\n the hover plate arrives at once and leaves over --pui-motion-out, a press deepens the plate (a wide row never\n scales), the focus ring sits inside its edge so a clipped list never cuts it, and the current row wears\n .row-current. */\n@layer components {\n .root {\n inline-size: 100%;\n min-inline-size: 0;\n border-radius: var(--pui-radius-control);\n text-align: start;\n outline-offset: calc(-1 * var(--pui-focus-width));\n transition:\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default);\n }\n .root:disabled {\n cursor: default;\n }\n .root[data-plate]:hover:not(:disabled) {\n background-color: var(--pui-hover);\n transition-duration: 0ms;\n }\n .root[data-plate]:active:not(:disabled) {\n background-color: var(--pui-hover-2);\n transition-duration: 0ms;\n }\n /* neutral current: an ink edge on a quiet plate, for a side list whose choice is only \"the one open\" */\n .root[data-current][data-tone=\"neutral\"] {\n background-color: var(--pui-hover-2);\n box-shadow: inset 2px 0 0 var(--pui-ink-2);\n }\n .root[data-current][data-tone=\"neutral\"]:dir(rtl) {\n box-shadow: inset -2px 0 0 var(--pui-ink-2);\n }\n}\n"},{"path":"beamline/components/_shared/row-action.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/row-action.tsx","content":"\"use client\";\n// organism-allow-file: raw-control -- the shared part every pressable row is drawn from\n\nimport type { ButtonHTMLAttributes, Ref } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./row-action.module.css\";\n\nexport interface RowActionProps extends ButtonHTMLAttributes {\n /** The one row open beside the list: the current tint and edge (.row-current; the accent, or the look's own where\n * its accent is a status hue, as in pop). Say which with aria-current or\n * aria-pressed as well; colour is never the only signal. */\n current?: boolean;\n /** How the current row is painted: the accent (default), or neutral (an ink edge on a quiet plate) for a choice in a\n * side list that is only \"the one open\", where a look's accent (red in Pop) would read as an alarm. */\n tone?: \"accent\" | \"neutral\";\n /** The hover plate; off for a row whose list already draws its own (a gliding indicator, an inset card). */\n plate?: boolean;\n ref?: Ref;\n}\n\n/** A row pressed as a whole (a list item, a table's record, a disclosure header); its content is the caller's layout. */\nexport function RowAction({\n current,\n tone = \"accent\",\n plate = true,\n type = \"button\",\n className,\n ref,\n ...props\n}: RowActionProps) {\n return (\n \n );\n}\n"},{"path":"beamline/components/button/button-variants.ts","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts","content":"import { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n/** sm 32 · md 36 · lg 40 · touch 44 (a bottom action bar on a phone). */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"touch\";\n/** Market side: buy fills with --pui-up, sell with --pui-down (a red-up market flips the two tokens, not the code). */\nexport type ButtonTone = \"up\" | \"down\";\n\n/** Which paint role paints each variant: filled variants are solids, the quiet ones keep their own light paint. */\nconst ROLE: Record = {\n primary: \"m-solid\",\n accent: \"m-solid\",\n secondary: \"m-control\",\n outline: undefined,\n ghost: undefined,\n danger: undefined,\n};\n\n/** A variant's paint without the button's layout, for a group that wears one button's look (SplitButton paints the\n * pair as one button and leaves its halves transparent). */\nexport function buttonPaint(variant: ButtonVariant = \"primary\", tone?: ButtonTone) {\n return cn(ROLE[variant], styles[variant], tone && styles[tone]);\n}\n\n/** The classes that make any element look like a Button, for parts that render their own element. */\nexport function buttonClassName({\n variant = \"primary\",\n size = \"md\",\n tone,\n className,\n}: { variant?: ButtonVariant; size?: ButtonSize; tone?: ButtonTone; className?: string } = {}) {\n return cn(styles.root, ROLE[variant], styles[variant], tone && styles[tone], styles[size], className);\n}\n"},{"path":"beamline/components/button/button.module.css","type":"registry:file","target":"src/ui/beamline/components/button/button.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Button. Every colour, size and duration is a token; a variant only sets the four local properties below. */\n .root {\n --_button-bg: transparent;\n --_button-bg-hover: var(--pui-hover);\n --_button-fg: var(--pui-ink);\n --_button-edge: none;\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n position: relative;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pui-space-1-5);\n flex-shrink: 0;\n height: var(--_button-height);\n min-width: var(--_button-height);\n /* never wider than its room: in a narrow card the label ends in an ellipsis instead of spilling (the full words\n stay the accessible name) */\n max-width: 100%;\n padding-inline: var(--_button-pad);\n border: 0;\n /* Nested context: inside a frame that sets --pui-nest-radius and --pui-nest-inset (and --pui-nest-ceiling for pills)\n the corner is the shared nested corner (.nest-corner, utilities.css: radius − inset, or the button's own radius\n where that would fall under the chip radius); elsewhere the control radius. --pui-button-radius wins over both. */\n border-radius: var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control)));\n color: var(--_button-fg);\n font-family: var(--pui-font-body);\n font-size: var(--pui-text-sm);\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n letter-spacing: var(--pui-tracking-body);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n /* frequency law: hover arrives at 0ms (below), leaves over the ruled departure; opacity and translate are listed\n so a button that waits for attention (.reveal) fades away like every reveal instead of vanishing */\n transition:\n var(--m-transition),\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-motion-out) var(--pui-ease-default),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n /* the quiet variants paint themselves; filled and secondary variants are painted by their look role (m-solid,\n m-control), which these zero-specificity rules can never override */\n :where(.root) {\n background: var(--_button-bg);\n box-shadow: var(--_button-edge);\n }\n :where(.root:hover:not(:disabled, [aria-disabled=\"true\"])) {\n background: var(--_button-bg-hover);\n }\n .root:hover:not(:disabled, [aria-disabled=\"true\"]) {\n transition-duration: 0ms;\n }\n /* the asChild form has no motion: a CSS press instead */\n .root:not(button):active {\n transform: scale(0.97);\n }\n .root:disabled,\n .root[aria-disabled=\"true\"]:not([data-loading]) {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .root[data-loading] {\n cursor: progress;\n }\n\n /* Icons: 16px unless the icon says otherwise (zero specificity, so size-5 or an inline size wins) */\n :where(.root) :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n }\n\n .sm {\n --_button-height: var(--pui-control-height-sm);\n --_button-pad: var(--pui-space-2-5);\n /* the base gap (--pui-space-1-5); 5px had no scale step, and 6px also lets the loader's negative margin cancel\n the gap exactly at every size */\n }\n .md {\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n }\n .lg {\n --_button-height: var(--pui-control-height-lg);\n --_button-pad: var(--pui-space-4);\n font-size: var(--pui-text-base);\n }\n /* a bottom action bar on a phone: the 44 px touch target (a platform minimum, not a spacing step, so it holds when\n the spacing parameter changes — O1 §14.2), the large label */\n .touch {\n --_button-height: calc(var(--pui-control-height-lg) + 0.25rem);\n --_button-pad: var(--pui-space-5);\n font-size: var(--pui-text-base);\n }\n .root[data-icon-only] {\n padding-inline: 0;\n width: var(--_button-height);\n }\n\n /* the main action: ink on the page, inverted per theme */\n .primary {\n --m-color: var(--pui-ink);\n --_button-fg: var(--pui-ink-inverse);\n }\n .secondary {\n --_button-fg: var(--pui-ink);\n }\n .outline {\n --_button-edge: inset 0 0 0 1px var(--pui-line-strong);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost {\n --_button-fg: var(--pui-ink-2);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost:hover:not(:disabled) {\n color: var(--pui-ink);\n }\n .danger {\n --_button-fg: var(--pui-red);\n --_button-edge: inset 0 0 0 1px color-mix(in oklab, var(--pui-red) 42%, transparent);\n --_button-bg-hover: var(--pui-red-tint);\n }\n .accent {\n --m-color: var(--pui-accent);\n --_button-fg: var(--pui-accent-foreground);\n }\n\n /* Market side. Declared after the variants so it wins: a filled variant takes the side's colour and its on-colour\n ink; a quiet variant keeps its paint and colours the label. */\n .up {\n --m-color: var(--pui-up);\n --_button-fg: var(--pui-up);\n }\n .down {\n --m-color: var(--pui-down);\n --_button-fg: var(--pui-down);\n }\n .ghost:is(.up, .down):hover:not(:disabled) {\n color: var(--_button-fg);\n }\n .primary.up,\n .accent.up {\n --_button-fg: var(--pui-on-up);\n }\n .primary.down,\n .accent.down {\n --_button-fg: var(--pui-on-down);\n }\n\n /* The main actions' light, where the look provides one, as a spectrum. Glow spills a soft light in the brand's\n spectrum from under the button's bottom edge (clipped at it, so it never tints the face) that brightens under the\n pointer. Prism keeps it inside the glass (--m-solid-glow-fit: 1): the face the light leaves by, the bottom edge,\n splits it into a crisp line with a faint wash rising into the face, only while pointed at. Every other look\n leaves --m-solid-glow at none, so the layer does not exist. */\n .primary::after,\n .accent::after {\n --_fit: var(--m-solid-glow-fit, 0);\n content: var(--m-solid-glow);\n position: absolute;\n z-index: -1;\n top: calc((1 - var(--_fit)) * (100% + var(--m-solid-glow-gap, 0px)));\n inset-inline: var(--m-solid-glow-inset, 14%);\n height: var(--m-solid-glow-height, 14px);\n border-radius: calc(\n var(--_fit) * var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control))) + (1 - var(--_fit)) *\n var(--pui-radius-pill)\n );\n background: var(--m-spectrum);\n background-size: var(--m-spectrum-size, 100% 100%);\n /* the part of the spectrum that shows: this button's own angle (--m-prism-seed, new at every press), turned by\n where the pointer is across the face (--m-prism-x) in a look that turns it (--m-solid-glow-turn) */\n background-position: calc((var(--m-prism-seed, 0.3) + var(--m-prism-x, 0.5) * var(--m-solid-glow-turn, 0)) * 100%) 0;\n filter: blur(var(--m-solid-glow-blur, 9px));\n clip-path: var(--m-solid-glow-clip, inset(0 -32px -32px -32px));\n mask: var(--m-solid-glow-mask, none);\n mask-position:\n 0 0,\n calc(var(--m-prism-seed, 0.3) * 100%) 0;\n mask-composite: intersect;\n opacity: var(--m-solid-glow-rest, 0.75);\n scale: var(--m-solid-glow-scale, 1) 1;\n pointer-events: none;\n transition:\n opacity var(--pui-motion-out) var(--pui-ease-default),\n scale var(--pui-motion-out) var(--pui-ease-default),\n background-position var(--pui-duration-considered) var(--pui-ease-default),\n mask-position var(--pui-duration-considered) var(--pui-ease-default);\n }\n /* pointed at: the light brightens (glow) or grows out from the centre and drifts along while the pointer stays\n (prism) */\n .primary:hover::after,\n .accent:hover::after {\n opacity: 1;\n scale: 1 1;\n transition-duration: var(--m-solid-glow-in, 0ms);\n animation: var(--m-solid-glow-flow, none);\n }\n /* A change of word or colour (Save → Saved, a tone turning green) passes a band of split light across the face once,\n in a look that has one (prism: --m-solid-shift-light; the pen hook's ::before is free on a solid otherwise). */\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: var(--m-solid-shift-light, none);\n position: absolute;\n inset: 0;\n z-index: -1;\n border: 0;\n border-radius: inherit;\n background: var(--m-spectrum) 0 0 / var(--m-spectrum-size, 100% 100%);\n mask: linear-gradient(105deg, transparent 39%, #000 47.5%, #000 52.5%, transparent 61%) 0 0 / 300% 100% no-repeat;\n opacity: 0;\n animation: prism-shift calc(var(--pui-duration-considered) * 2.2) var(--pui-ease-default);\n pointer-events: none;\n }\n @keyframes prism-shift {\n from {\n mask-position: 100% 0;\n opacity: 0.25;\n }\n 35% {\n opacity: 0.55;\n }\n to {\n mask-position: 0 0;\n opacity: 0;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .primary::after,\n .accent::after {\n transition: none;\n animation: none !important;\n }\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: none;\n }\n }\n .root:disabled::after,\n .root[aria-disabled=\"true\"]::after {\n content: none;\n }\n\n /* The loader opens its own width, and the negative margin cancels the gap so the label does not jump */\n .loader {\n display: inline-flex;\n overflow: hidden;\n margin-inline-end: calc(var(--pui-space-1-5) * -1);\n }\n .loader > * {\n margin-inline-end: var(--pui-space-1-5);\n }\n .spinner {\n color: currentColor;\n }\n .root[data-icon-only] .loader {\n margin-inline-end: 0;\n }\n .root[data-icon-only] .loader > * {\n margin-inline-end: 0;\n }\n\n /* The label holds its place while the text inside swaps; the leaving text pops out of flow against it */\n .label {\n position: relative;\n display: inline-flex;\n justify-content: center;\n min-width: 0;\n overflow: visible;\n }\n /* the clip box is let out by a little over a line so descenders are never cut, without changing the layout */\n .text {\n display: inline-block;\n max-width: 100%;\n margin-block: -0.2em;\n padding-block: 0.2em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .label[data-morphing] > .text {\n overflow: visible;\n text-overflow: clip;\n }\n}\n\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .root:not(button):active,\n :global(.pui[data-motion=\"none\"]) .root:not(button):active {\n transform: none;\n }\n @media (prefers-reduced-motion: reduce) {\n .root:not(button):active {\n transform: none;\n }\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: nest-corner from global;\n}\n"},{"path":"beamline/components/button/button.tsx","type":"registry:file","target":"src/ui/beamline/components/button/button.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport {\n Children,\n Fragment,\n isValidElement,\n useLayoutEffect,\n useRef,\n type ButtonHTMLAttributes,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type RefObject,\n type ComponentProps,\n} from \"react\";\nimport { AnimatePresence, LazyMotion, m, spring, useIsPresent } from \"motion/react\";\nimport { animate } from \"motion/mini\";\nimport * as Slot from \"@radix-ui/react-slot\";\nimport { Spinner } from \"../spinner/spinner\";\nimport type { BuiltInLook as Look } from \"../../runtime/preset\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type { ButtonVariant, ButtonSize, ButtonTone } from \"./button-variants\";\nexport { buttonPaint, buttonClassName } from \"./button-variants\";\nimport { buttonClassName, type ButtonVariant, type ButtonSize, type ButtonTone } from \"./button-variants\";\nimport type { ButtonDefaults } from \"./defaults\";\nexport type { ButtonDefaults } from \"./defaults\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\n\ntype NativeProps = Omit<\n ButtonHTMLAttributes,\n \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"\n>;\n\nexport interface ButtonProps extends NativeProps {\n /** Visual weight: primary (ink-filled), secondary, outline, ghost, danger, or accent (filled with the brand). */\n variant?: ButtonVariant;\n /** Height 32 / 36 / 40 px; touch 44 px for a bottom action bar on a phone. */\n size?: ButtonSize;\n /** Market side. On primary/accent the fill becomes --pui-up (buy) or --pui-down (sell); on the quiet variants the\n * label takes that colour. Pair it with a word or arrow: colour is never the only signal. */\n tone?: ButtonTone;\n /** Shows a loader in front of the label, sets aria-busy and ignores clicks; size and focus stay. */\n loading?: boolean;\n classNames?: Partial>;\n /** Paint this button in another look than the one in force around it (DESIGN-LANGUAGE.md \"Looks\"). */\n look?: Look;\n /** Render the single child (a link, a Radix trigger) with the button's look instead of a \n ) : (\n fmtMonth.format(first)\n )}\n \n \n \n \n {weekdays.map((w) => (\n \n {w.short}\n \n ))}\n \n \n \n {Array.from({ length: weeks }, (_, w) => (\n \n {Array.from({ length: 7 }, (_, i) => {\n const d = addDays(start, w * 7 + i);\n const outside = d.getMonth() !== first.getMonth();\n if (outside)\n return (\n \n );\n const isOn = range\n ? !!span && (sameDay(d, span.start) || sameDay(d, span.end))\n : sameDay(d, selected);\n const mid = range && inSpan(d) && !isOn;\n const edgeStart = range && span && sameDay(d, span.start) && !sameDay(span.start, span.end);\n const edgeEnd = range && span && sameDay(d, span.end) && !sameDay(span.start, span.end);\n const disabled = off(d);\n const mark = marks ? marks(d) : undefined;\n const recorded = !marks || (mark !== null && mark !== undefined);\n const dayName = !marks\n ? fmtDay.format(d)\n : !recorded\n ? i18n(\"dayNotRecorded\", { day: fmtDay.format(d) })\n : mark === 0\n ? i18n(\"dayNone\", { day: fmtDay.format(d) })\n : i18n(\"dayCount\", {\n day: fmtDay.format(d),\n count: mark!,\n noun: markNoun ? markNoun[mark === 1 ? 0 : 1] : i18n(mark === 1 ? \"record\" : \"records\"),\n });\n return (\n \n pick(d)}\n onPointerEnter={() => {\n if (anchor) setHover(d);\n }}\n onFocus={() => setFocus(d)}\n className={cn(\n styles.day,\n isOn ? (range ? cn(\"m-solid\", styles.on) : styles.on) : mid ? styles.between : styles.free,\n classNames?.day,\n )}\n >\n {d.getDate()}\n {!!mark && mark > 0 && (\n \n {Array.from({ length: Math.min(3, mark) }, (_, k) => (\n \n ))}\n {mark > 3 && +}\n \n )}\n {showToday && sameDay(d, today) && !(mark && mark > 0) && (\n \n )}\n \n \n );\n })}\n \n ))}\n \n \n \n );\n };\n const canBack = view === \"months\" ? pickYear > yearFrom : !minDate || addMonths(shown, -1) >= firstOfMonth(minDate);\n const canFwd = view === \"months\" ? pickYear < yearTo : !maxDate || addMonths(shown, months) <= startOfDay(maxDate);\n const fmtShortMonth = dateFormatter(locale, { month: \"short\" });\n const fmtLongMonth = dateFormatter(locale, { month: \"long\", year: \"numeric\" });\n const picker = view !== \"days\" && (\n \n \n (view === \"years\" ? setView(\"days\", \"days\") : openYears())}\n className={cn(styles.title, classNames?.title)}\n >\n {view === \"years\" ? fmtMonth.format(shown) : pickYear}\n \n \n \n \n {view === \"years\"\n ? Array.from({ length: yearTo - yearFrom + 1 }, (_, i) => yearFrom + i).map((y) => {\n const on = chosenDate?.getFullYear() === y;\n return (\n openMonths(y)}\n onFocus={() => setPickFocus(y)}\n className={cn(styles.pick, on && cn(\"m-solid\", styles.pickOn), classNames?.pick)}\n >\n {y}\n {showToday && y === thisYear && }\n \n );\n })\n : Array.from({ length: 12 }, (_, m) => {\n const on = chosenDate?.getFullYear() === pickYear && chosenDate.getMonth() === m;\n return (\n toDays(pickYear, m)}\n onFocus={() => setPickFocus(m)}\n className={cn(styles.pick, on && cn(\"m-solid\", styles.pickOn), classNames?.pick)}\n >\n {fmtShortMonth.format(new Date(pickYear, m, 1))}\n {showToday && pickYear === thisYear && m === today.getMonth() && (\n \n )}\n \n );\n })}\n \n \n );\n return (\n setHover(null)}\n className={cn(\"relative inline-grid\", classNames?.root, className)}\n >\n \n {view !== \"years\" && (\n <>\n (view === \"months\" ? openMonths(pickYear - 1) : setShown(addMonths(shown, -1)))}\n >\n \n \n (view === \"months\" ? openMonths(pickYear + 1) : setShown(addMonths(shown, 1)))}\n >\n \n \n \n )}\n \n {/* months sit side by side and wrap onto the next row when the container is too narrow for both */}\n {\n if (turn.n && e.animationName.includes(\"turn-\")) setTurn((t) => ({ ...t, n: 0 }));\n }}\n className={cn(\n styles.months,\n \"relative isolate flex flex-wrap justify-center gap-x-6 gap-y-4\",\n classNames?.months,\n )}\n >\n {view === \"days\" && chosen && (\n \n )}\n {view === \"days\" ? Array.from({ length: months }, (_, i) => month(i)) : picker}\n \n {range && anchor && (\n

\n {i18n(\"startChosenChooseTheEnd\", { value: fmtDay.format(anchor) })}\n

\n )}\n \n );\n}\n\nexport { DAY };\nexport default Calendar;\n"},{"path":"beamline/components/calendar/messages.ts","type":"registry:file","target":"src/ui/beamline/components/calendar/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 chooseAnotherMonthOrYear: \"{value}: choose another month or year\",\n backToTheDays: \"Back to the days\",\n chooseAnotherYear: \"{pickYear}: choose another year\",\n years: \"Years\",\n monthsOf: \"Months of {pickYear}\",\n previousYear: \"Previous year\",\n previousMonth: \"Previous month\",\n nextYear: \"Next year\",\n nextMonth: \"Next month\",\n startChosenChooseTheEnd: \"Start {value} chosen; choose the end.\",\n dayCount: \"{day}, {count} {noun}\",\n dayNone: \"{day}, none\",\n dayNotRecorded: \"{day}, not recorded\",\n record: \"record\",\n records: \"records\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/date-range-picker/date-range-picker.tsx","type":"registry:file","target":"src/ui/beamline/components/date-range-picker/date-range-picker.tsx","content":"\"use client\";\nimport { createTranslator } from \"../../runtime/messages\";\nimport { type Translator } from \"../../runtime/messages\";\nimport { dateFormatter, useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useLocale } from \"../../runtime/localization\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { DateRangePickerDefaults } from \"./defaults\";\nexport type { DateRangePickerDefaults } from \"./defaults\";\n\nimport {\n useId,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent,\n type Ref,\n type ReactNode,\n} from \"react\";\nimport { CalendarRange, Check } from \"lucide-react\";\nimport { FollowPlate } from \"../_shared/glide\";\nimport * as RadixPopover from \"@radix-ui/react-popover\";\nimport { Calendar, DAY, sameDay, startOfDay, type DateRange } from \"../calendar/calendar\";\nimport { Field, FieldFrame, fieldControlClass, useFieldIds, type FieldSize } from \"../_shared/field\";\nimport { parseNaturalRange } from \"../../lib/natural-range\";\nimport type { FieldClassNames } from \"../_shared/field\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { useMediaQuery } from \"../../hooks/use-media-query\";\nimport { cn } from \"../../lib/utils\";\nimport { RowAction } from \"../_shared/row-action\";\nimport { Button } from \"../button/button\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { useToday } from \"../../lib/now\";\nimport field from \"../_shared/field.module.css\";\nimport overlay from \"../_shared/overlay.module.css\";\n\nexport type { DateRange };\nexport interface DateRangePreset {\n label: string;\n /** The range for a given today. */ range: (today: Date) => DateRange;\n}\n\n// ICU versions disagree about thin/nonbreaking spaces around a range. Keep the same visible date text in the\n// server HTML and the browser's first render, including when both already use the same locale and dates.\nconst dateText = (format: Intl.DateTimeFormat, start: Date, end?: Date) =>\n (end ? format.formatRange(start, end) : format.format(start)).replace(/[\\u00a0\\u2009\\u202f]/g, \" \");\n\nexport interface DateRangePickerProps {\n label: ReactNode;\n hideLabel?: boolean;\n /** The range: `{ start, end }` as dates at local midnight, both days included (`DateRange`, exported here:\n * `import { DateRangePicker, type DateRange } from \"@beamline/ui/date-range-picker\"`). */\n value?: DateRange | null;\n defaultValue?: DateRange | null;\n /** The same as onValueChange, kept for earlier code. */\n onChange?: (range: DateRange) => void;\n /** The new range: the name every Beamline field uses. Called the same way for a preset, a range picked in the\n * calendar and a range typed in words (Enter or Apply). */\n onValueChange?: (range: DateRange) => void;\n placeholder?: string;\n /** Default: Today, Last 7 days, Last 30 days, This month, Last month, Quarter to date, Year to date. */\n presets?: DateRangePreset[];\n /** The first day that can be picked: a date, or \"today\" (read in the browser, so a server-rendered page stays valid). */\n minDate?: Date | \"today\";\n /** The last day that can be picked: a date, or \"today\" (a date of birth, a report period). */\n maxDate?: Date | \"today\";\n weekStartsOn?: 0 | 1;\n locale?: string;\n /** Months side by side; auto shows two where the window holds them beside the presets, else one. Default auto. */\n months?: 1 | 2 | \"auto\";\n description?: ReactNode;\n error?: ReactNode;\n disabled?: boolean;\n /** Height 32 / 36 / 40 px, as every field. Default md. */\n size?: FieldSize;\n id?: string;\n className?: string;\n style?: CSSProperties;\n classNames?: Pick &\n Partial>;\n ref?: Ref;\n}\n\nconst lastDays = (\n n: number,\n i18n: Translator = createTranslator(\"date-range-picker\", englishMessages),\n): DateRangePreset => ({\n label: i18n(\"lastDays\", { n: n }),\n range: (t) => ({ start: new Date(+t - (n - 1) * DAY), end: t }),\n});\nexport const DEFAULT_PRESETS = /* @__PURE__ */ localizedDEFAULT_PRESETS(\n /* @__PURE__ */ createTranslator(\"date-range-picker\", englishMessages),\n);\nfunction localizedDEFAULT_PRESETS(i18n: Translator): DateRangePreset[] {\n return [\n { label: i18n(\"today\"), range: (t) => ({ start: t, end: t }) },\n lastDays(7, i18n),\n lastDays(30, i18n),\n { label: i18n(\"thisMonth\"), range: (t) => ({ start: new Date(t.getFullYear(), t.getMonth(), 1), end: t }) },\n {\n label: i18n(\"lastMonth\"),\n range: (t) => ({\n start: new Date(t.getFullYear(), t.getMonth() - 1, 1),\n end: new Date(t.getFullYear(), t.getMonth(), 0),\n }),\n },\n {\n label: i18n(\"quarterToDate\"),\n range: (t) => ({ start: new Date(t.getFullYear(), Math.floor(t.getMonth() / 3) * 3, 1), end: t }),\n },\n { label: i18n(\"yearToDate\"), range: (t) => ({ start: new Date(t.getFullYear(), 0, 1), end: t }) },\n ];\n}\n\n/**\n * A reporting range: presets on one side, two months on the other. The first click starts the range, the second ends\n * it (the span follows the pointer in between) and the picker closes; a preset applies at once.\n */\nexport function DateRangePicker({\n label,\n hideLabel,\n value: valueProp,\n defaultValue = null,\n onChange,\n onValueChange,\n placeholder: placeholderProp,\n presets: presetsInput,\n minDate: minProp,\n maxDate: maxProp,\n weekStartsOn,\n locale: localeProp,\n months = \"auto\",\n description,\n error,\n disabled,\n size: sizeProp,\n id,\n className,\n classNames,\n style,\n ref,\n}: DateRangePickerProps) {\n const i18n = useMessages(\"date-range-picker\", englishMessages);\n const presets = presetsInput === undefined ? localizedDEFAULT_PRESETS(i18n) : presetsInput;\n\n const placeholder = placeholderProp === undefined ? i18n(\"placeholder\") : placeholderProp;\n\n const locale = useLocale(localeProp);\n\n const scopeDefaults = useComponentDefaults(\"date-range-picker\", [\"size\"]);\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n\n const [value, setValue] = useControllable(valueProp, defaultValue, onChange);\n const [open, setOpen] = useState(false);\n // a range half chosen in the calendar: the summary counts its days as the pointer sweeps\n const [pending, setPending] = useState(null);\n // a range typed in words (\"last 2 weeks\", \"Q3\", \"Mar 3 – Apr 10\"): previewed in the calendar, Enter applies it\n const [typed, setTyped] = useState(\"\");\n const typedInput = useRef(null);\n const summaryId = useId();\n // the calendar moves to a typed range's months by remounting on them; after that it keeps its identity (a day then\n // clicked over the preview must not remount it and lose the pick) until the panel closes\n const calendarKey = useRef(\"value\");\n // The panel is a layer: it answers to the window it opens in, not to the room the field sits in. Two months beside\n // the presets need ~47rem; one month beside them ~30rem; under that the presets run along the top of one month.\n const twoFit = useMediaQuery(\"(min-width: 47rem)\");\n const railFits = useMediaQuery(\"(min-width: 30rem)\");\n const shownMonths = months === \"auto\" ? (twoFit ? 2 : 1) : months;\n const presetList = useRef(null);\n const { controlId, descriptionId, errorId, aria } = useFieldIds(id, { description, error });\n const container = usePortalContainer();\n // presets count back from today, or from the last day that can be picked when that is earlier (null on the server)\n const now = useToday();\n const minDate = minProp === \"today\" ? (now ?? undefined) : minProp;\n const maxDate = maxProp === \"today\" ? (now ?? undefined) : maxProp;\n const today = now && (maxDate && maxDate < now ? startOfDay(maxDate) : now);\n const set = (r: DateRange) => {\n setValue(r);\n onValueChange?.(r);\n setOpen(false);\n };\n const fmt = dateFormatter(locale, { day: \"numeric\", month: \"short\", year: \"numeric\" });\n const text = value\n ? sameDay(value.start, value.end)\n ? dateText(fmt, value.start)\n : dateText(fmt, value.start, value.end)\n : placeholder;\n // in the field, a range inside this year leaves the year out (it is the one people assume), so a narrow field still\n // shows both ends; the panel's summary keeps the full form\n const thisYear =\n !!value &&\n !!now &&\n value.start.getFullYear() === now.getFullYear() &&\n value.end.getFullYear() === now.getFullYear();\n const fmtShort = dateFormatter(locale, { day: \"numeric\", month: \"short\" });\n const fieldText = !value\n ? placeholder\n : !thisYear\n ? text\n : sameDay(value.start, value.end)\n ? dateText(fmtShort, value.start)\n : dateText(fmtShort, value.start, value.end);\n const activePreset =\n value &&\n today &&\n presets.find((p) => {\n const r = p.range(today);\n return sameDay(r.start, value.start) && sameDay(r.end, value.end);\n });\n // the typed range, held inside the days that can be picked; null while nothing readable is typed\n const reading = useMemo(() => {\n if (!typed.trim() || !today) return null;\n const r = parseNaturalRange(typed, today, { locale, weekStartsOn: weekStartsOn ?? 1 });\n if (!r) return null;\n const start = minDate && r.start < startOfDay(minDate) ? startOfDay(minDate) : r.start;\n const end = maxDate && r.end > maxDate ? startOfDay(maxDate) : r.end;\n // a range the allowed days shorten says so, rather than quietly showing less than was asked\n return start <= end ? { start, end, cut: start !== r.start || end !== r.end } : null;\n }, [typed, today, locale, weekStartsOn, minDate, maxDate]);\n // written while rendering on purpose: the same typed range always gives the same key, so a repeated render is a no-op\n if (reading) calendarKey.current = `typed-${reading.end.getFullYear()}-${reading.end.getMonth()}`;\n const daysIn = (r: DateRange) => Math.round((startOfDay(r.end).getTime() - startOfDay(r.start).getTime()) / DAY) + 1;\n const days = value ? daysIn(value) : 0;\n const rangeText = (r: DateRange) => dateText(fmt, r.start, sameDay(r.start, r.end) ? undefined : r.end);\n // arrows between the presets (down the rail, along the row on top), Home and End to the ends\n const movePreset = (e: KeyboardEvent, rail: boolean) => {\n const items = [...e.currentTarget.querySelectorAll(\"[data-slot=date-range-preset]\")];\n const i = items.indexOf(document.activeElement as HTMLButtonElement);\n if (i < 0) return;\n const rtl = getComputedStyle(e.currentTarget).direction === \"rtl\";\n const next = rail ? \"ArrowDown\" : rtl ? \"ArrowLeft\" : \"ArrowRight\";\n const prev = rail ? \"ArrowUp\" : rtl ? \"ArrowRight\" : \"ArrowLeft\";\n const to =\n e.key === next\n ? (i + 1) % items.length\n : e.key === prev\n ? (i - 1 + items.length) % items.length\n : e.key === \"Home\"\n ? 0\n : e.key === \"End\"\n ? items.length - 1\n : -1;\n if (to < 0) return;\n e.preventDefault();\n items[to].focus();\n items[to].scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n };\n return (\n \n {\n setOpen(next);\n if (!next) {\n setTyped(\"\");\n calendarKey.current = \"value\";\n }\n }}\n >\n \n \n {/* folds by rank in a narrow field: the preset's name stays whole, the dates give way (ellipsis) first */}\n \n {activePreset ? (\n <>\n {activePreset.label}\n  · {fieldText}\n \n ) : (\n {fieldText}\n )}\n \n \n \n \n {container !== null && (\n \n {\n // in the years or months, Escape returns to the days (the calendar handles it), not out of the picker\n if ((e.target as Element | null)?.closest?.(\"[data-slot=calendar-picker]\")) e.preventDefault();\n }}\n data-slot=\"date-range-panel\"\n align=\"start\"\n sideOffset={6}\n collisionPadding={8}\n aria-label={i18n(\"chooseADateRange\")}\n data-layout={railFits ? \"rail\" : \"stack\"}\n className={cn(\n overlay.surface,\n \"flex max-w-[calc(100vw-16px)] flex-col data-[layout=rail]:flex-row\",\n classNames?.content,\n )}\n // typing a letter or digit anywhere in the panel writes it into the range line (the calendar keeps\n // its arrows, Space and Enter)\n onKeyDown={(e) => {\n if (e.target === typedInput.current || e.key.length !== 1 || e.key === \" \") return;\n if (e.ctrlKey || e.metaKey || e.altKey) return;\n e.preventDefault();\n setTyped((t) => t + e.key);\n typedInput.current?.focus();\n }}\n onOpenAutoFocus={(e) => {\n e.preventDefault();\n (e.currentTarget as HTMLElement).querySelector(\"[data-day][tabindex='0']\")?.focus();\n }}\n >\n {presets.length > 0 && (\n movePreset(e, railFits)}\n className={cn(\n \"relative flex gap-1 overflow-x-auto border-b border-line-soft p-2\",\n railFits && \"w-40 flex-col overflow-visible border-e border-b-0\",\n classNames?.presets,\n )}\n >\n {/* down the rail one plate follows the pointer and focus from preset to preset */}\n {railFits && (\n \n )}\n {presets.map((p) => (\n
  • \n today && set(p.range(today))}\n data-slot=\"date-range-preset\"\n className={cn(\n \"relative z-1 flex h-8 items-center gap-2 rounded-chip px-2.5 text-sm whitespace-nowrap text-ink-2 duration-[var(--pui-motion-out)] hover:text-ink\",\n !railFits && \"hover:bg-hover-2\",\n activePreset === p && \"text-ink\",\n classNames?.preset,\n )}\n >\n {p.label}\n {activePreset === p && (\n \n )}\n \n
    • \n ))}\n \n )}\n
    \n \n {\n // cleared text puts the calendar back on the chosen range's months (a pick that takes over\n // keeps the calendar it was made in)\n if (!e.target.value.trim()) calendarKey.current = \"value\";\n setTyped(e.target.value);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && reading) {\n e.preventDefault();\n set({ start: reading.start, end: reading.end });\n setTyped(\"\");\n }\n }}\n placeholder={i18n(\"typeARange\")}\n aria-label={i18n(\"typedRange\")}\n aria-describedby={summaryId}\n autoComplete=\"off\"\n spellCheck={false}\n className={fieldControlClass}\n />\n \n {\n setPending(r);\n if (r) setTyped(\"\");\n }}\n months={shownMonths}\n minDate={minDate}\n maxDate={maxDate}\n weekStartsOn={weekStartsOn}\n locale={locale}\n defaultMonth={\n (reading ?? value)\n ? new Date(\n (reading ?? value)!.end.getFullYear(),\n (reading ?? value)!.end.getMonth() - (shownMonths === 1 ? 0 : 1),\n 1,\n )\n : undefined\n }\n />\n
    \n

    \n {/* only the typed reading is live, and from the start, so its first reading is announced; a sweep\n over the calendar stays quiet (its days are said by the calendar itself) */}\n \n {typed.trim() &&\n (reading ? (\n <>\n {i18n(\"days\", { count: daysIn(reading) })}{\" \"}\n {i18n(reading.cut ? \"typedAppliesCut\" : \"typedApplies\", { value: rangeText(reading) })}\n \n ) : (\n i18n(\"typedHint\")\n ))}\n \n {typed.trim() ? null : pending ? (\n <>\n {i18n(\"days\", { count: daysIn(pending) })}{\" \"}\n {i18n(\"chooseTheEnd\", { value: rangeText(pending) })}\n \n ) : value ? (\n i18n(\"days2\", { count: days, text: text })\n ) : (\n i18n(\"chooseAStartThenAnEnd\")\n )}\n

    \n {typed.trim() && reading && (\n // a pointer's and a finger's way to apply it; the keyboard's is Enter\n {\n set({ start: reading.start, end: reading.end });\n setTyped(\"\");\n }}\n >\n {i18n(\"apply\")}\n \n )}\n
    \n
    \n \n     \n )}\n \n \n );\n}\n\nexport default DateRangePicker;\n"},{"path":"beamline/components/date-range-picker/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/date-range-picker/defaults.ts","content":"/** Pure allowed presentation defaults for DateRangePicker; no component or runtime imports. */\nexport interface DateRangePickerDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n"},{"path":"beamline/components/date-range-picker/messages.ts","type":"registry:file","target":"src/ui/beamline/components/date-range-picker/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 placeholder: \"Pick a range\",\n chooseADateRange: \"Choose a date range\",\n presets: \"Presets\",\n chooseTheEnd: \"· {value} · choose the end\",\n days: {\n one: \"{count} day\",\n other: \"{count} days\",\n },\n days2: {\n one: \"{count} day · {text}\",\n other: \"{count} days · {text}\",\n },\n chooseAStartThenAnEnd: \"Choose a start, then an end.\",\n /** The range line's placeholder: what can be typed. */\n typeARange: \"Type a range: last 2 weeks, Q3, Mar 3 – Apr 10\",\n typedRange: \"Type a range\",\n typedApplies: \"· {value} · Enter applies\",\n /** A typed range shortened by the days that can be picked (minDate, maxDate). */\n typedAppliesCut: \"· {value}, cut to the days you can pick · Enter applies\",\n apply: \"Apply\",\n typedHint: \"Try “last 2 weeks”, “this quarter”, “Q3” or “Mar 3 – Apr 10”.\",\n lastDays: \"Last {n} days\",\n today: \"Today\",\n thisMonth: \"This month\",\n lastMonth: \"Last month\",\n quarterToDate: \"Quarter to date\",\n yearToDate: \"Year to date\",\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/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/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-contour.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-contour.ts","content":"\"use client\";\n\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport { createContour, type Contour } from \"../lib/contour\";\nimport type { IndicatorBox } from \"./use-indicator\";\n\n/**\n * Puts a decorative surface (a segmented thumb, a tab's pill or line) on the contour engine and moves it to `box`\n * whenever the box changes: the first placement is instant, later ones travel as matter (ui/lib/contour.ts). Returns a\n * ref for the surface. The surface stays aria-hidden; the control's own state has already changed by the time it moves.\n */\nexport function useContour(box: IndicatorBox | null) {\n const contour = useRef(null);\n const ref = useCallback((el: T | null) => {\n contour.current?.destroy();\n contour.current = el ? createContour(el) : null;\n }, []);\n useLayoutEffect(() => {\n // a choice travels; the first placement and a reflow of the same choice are simply there\n if (box) contour.current?.to(box, { instant: !box.ready || box.cause === \"layout\" });\n }, [box]);\n return ref;\n}\n"},{"path":"beamline/hooks/use-controllable.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-controllable.ts","content":"\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\n/**\n * One value in both forms (rules/CONVENTIONS.md): the prop while it is passed, otherwise the element's own copy that\n * starts at `initial` (a value, or a function that makes it once). The setter takes a value or an updater; an updater\n * reads the latest value even twice in one event, and every change reaches `onChange`, controlled or not.\n * `Next` is what a change can carry when it is narrower than the state: a range that starts empty (null) but is only\n * ever changed to a range.\n */\nexport function useControllable(\n value: T | undefined,\n initial: T | (() => T),\n onChange?: (next: Next) => void,\n) {\n const [own, setOwn] = useState(initial);\n const current = value !== undefined ? value : own;\n const latest = useRef(current);\n latest.current = current;\n const set = useCallback(\n (next: Next | ((was: T) => Next)) => {\n const resolved = typeof next === \"function\" ? (next as (was: T) => Next)(latest.current) : next;\n latest.current = resolved;\n if (value === undefined) setOwn(resolved);\n onChange?.(resolved);\n },\n [value, onChange],\n );\n return [current, set] as const;\n}\n"},{"path":"beamline/hooks/use-deprecated-prop.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-deprecated-prop.ts","content":"\"use client\";\n\nimport { useEffect } from \"react\";\n\n// Bundlers replace NODE_ENV for browser builds; this declaration emits no Node dependency.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nconst warned = new Set();\n\n/** Report a legacy prop once after mount in development; production and server renders stay silent. */\nexport function useDeprecatedProp(component: string, prop: string, replacement: string, supplied: boolean) {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"development\" || !supplied) return;\n const key = `${component}.${prop}`;\n if (warned.has(key)) return;\n warned.add(key);\n console.warn(`[Beamline] ${key} is deprecated. Use ${replacement} instead; the legacy prop still works.`);\n }, [component, prop, replacement, supplied]);\n}\n"},{"path":"beamline/hooks/use-indicator.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-indicator.ts","content":"\"use client\";\n\nimport { APPEARANCE_EVENT } from \"../lib/motion-tokens\";\nimport { useLayoutEffect, useRef, useState, type CSSProperties, type RefObject } from \"react\";\n\nexport interface IndicatorBox {\n x: number;\n y: number;\n w: number;\n h: number;\n /** False on the first placement, so the indicator appears in place instead of sliding in from the corner. */\n ready: boolean;\n /** Which way the last move went on each axis (-1 left or up, 1 right or down, 0 still), for the edge that leads. */\n dx: -1 | 0 | 1;\n dy: -1 | 0 | 1;\n /** choice: a selection changed; layout: the same choice moved because the page reflowed (a resize, a font, a\n * type scale). A surface may travel for a choice and should simply be there after a reflow. */\n cause: \"choice\" | \"layout\";\n}\n\ntype Box = Pick;\nconst same = (a: IndicatorBox | null, b: Box) => a !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;\n\n/**\n * Follows the chosen item inside a container: the thumb of a segmented control, the pill or line of tabs, the ring of\n * radio cards. Returns a ref for the container and the box of the first element matching `selector` in it, relative\n * to the container (null when nothing matches). It measures before paint whenever `key` changes, and again when the\n * container resizes or a selection attribute changes inside it (for parts whose choice lives in a library, like tabs).\n */\nexport function useIndicator(\n selector: string,\n key?: unknown,\n onPlace?: (item: HTMLElement, container: T) => void,\n /** offset (default): the item's offset box, for items whose offset parent is the container. rect: measured on screen\n * relative to the container, for items nested in positioned cells (a calendar day in its table cell). */\n measure: \"offset\" | \"rect\" = \"offset\",\n): [RefObject, IndicatorBox | null] {\n const ref = useRef(null);\n const [box, setBox] = useState(null);\n const placed = useRef(onPlace);\n useLayoutEffect(() => {\n placed.current = onPlace;\n });\n useLayoutEffect(() => {\n const container = ref.current;\n if (!container) return;\n const place = (cause: IndicatorBox[\"cause\"] = \"choice\") => {\n const item = container.querySelector(selector);\n if (!item) {\n setBox(null);\n return;\n }\n let next = { x: item.offsetLeft, y: item.offsetTop, w: item.offsetWidth, h: item.offsetHeight };\n if (measure === \"rect\") {\n const a = item.getBoundingClientRect();\n const c = container.getBoundingClientRect();\n next = {\n x: Math.round(a.left - c.left - container.clientLeft + container.scrollLeft),\n y: Math.round(a.top - c.top - container.clientTop + container.scrollTop),\n w: item.offsetWidth,\n h: item.offsetHeight,\n };\n }\n setBox((b) =>\n same(b, next)\n ? b\n : {\n ...next,\n cause,\n ready: b !== null,\n dx: b ? (Math.sign(next.x - b.x) as IndicatorBox[\"dx\"]) : 0,\n dy: b ? (Math.sign(next.y - b.y) as IndicatorBox[\"dy\"]) : 0,\n },\n );\n placed.current?.(item, container);\n };\n const resizes = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(() => place(\"layout\"));\n resizes?.observe(container);\n const observed = new Set();\n const observeItems = () => {\n // A full-width fixed-height list can stay the same size while its tabs/radio choices grow with type or labels.\n // Ignore the decorative indicator itself, whose own dimensions are the output of this measurement.\n const items = new Set([...container.children].filter((child) => child.getAttribute(\"aria-hidden\") !== \"true\"));\n for (const old of observed)\n if (!items.has(old)) {\n resizes?.unobserve(old);\n observed.delete(old);\n }\n for (const item of items)\n if (!observed.has(item)) {\n resizes?.observe(item);\n observed.add(item);\n }\n };\n observeItems();\n place();\n const mutations = new MutationObserver(() => {\n observeItems();\n place(\"choice\");\n });\n mutations.observe(container, {\n subtree: true,\n childList: true,\n attributes: true,\n attributeFilter: [\"data-state\", \"aria-checked\", \"aria-selected\", \"aria-current\", \"data-active\", \"data-open\"],\n });\n const reflow = () => place(\"layout\");\n container.ownerDocument.addEventListener(APPEARANCE_EVENT, reflow);\n container.ownerDocument.fonts?.addEventListener(\"loadingdone\", reflow);\n return () => {\n mutations.disconnect();\n resizes?.disconnect();\n container.ownerDocument.removeEventListener(APPEARANCE_EVENT, reflow);\n container.ownerDocument.fonts?.removeEventListener(\"loadingdone\", reflow);\n };\n }, [selector, key, measure]);\n return [ref, box];\n}\n\n/** The box as custom properties, for a stylesheet to place the indicator with: --pui-indicator-x/-y/-w/-h, and its\n * four edges --pui-glide-l/-r/-t/-b, which the `glide` class moves one at a time. */\nexport function indicatorStyle(box: IndicatorBox): CSSProperties {\n return {\n \"--pui-indicator-x\": `${box.x}px`,\n \"--pui-indicator-y\": `${box.y}px`,\n \"--pui-indicator-w\": `${box.w}px`,\n \"--pui-indicator-h\": `${box.h}px`,\n \"--pui-glide-l\": `${box.x}px`,\n \"--pui-glide-r\": `${box.x + box.w}px`,\n \"--pui-glide-t\": `${box.y}px`,\n \"--pui-glide-b\": `${box.y + box.h}px`,\n } as CSSProperties;\n}\n\nconst AXIS = { x: [\"left\", undefined, \"right\"], y: [\"up\", undefined, \"down\"] } as const;\n\n/** Everything an indicator wearing the `glide` class needs (utilities.css): its place, whether it may move yet, and\n * which way it is going, so the edge on that side leads and the other follows: it stretches toward the new choice and\n * gathers there. */\nexport function glideProps(box: IndicatorBox) {\n return {\n style: indicatorStyle(box),\n \"data-ready\": box.ready ? \"\" : undefined,\n \"data-glide-x\": AXIS.x[box.dx + 1],\n \"data-glide-y\": AXIS.y[box.dy + 1],\n };\n}\n"},{"path":"beamline/hooks/use-media-query.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-media-query.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// one MediaQueryList per query: React reads the snapshot on every render, and a part that renders thirty times a\n// second (a playing audio player's clock) would otherwise ask the browser for a new list each time\nconst lists = new Map();\nconst list = (query: string) => {\n if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return undefined;\n let m = lists.get(query);\n if (!m) lists.set(query, (m = window.matchMedia(query)));\n return m;\n};\n\n/** True while the media query matches; false on the server and in the first client render of SSR output. */\nexport function useMediaQuery(query: string): boolean {\n return useSyncExternalStore(\n (notify) => {\n const m = list(query);\n m?.addEventListener(\"change\", notify);\n return () => m?.removeEventListener(\"change\", notify);\n },\n () => list(query)?.matches ?? false,\n () => false,\n );\n}\n\n/** Phone-width layouts: below 768px. */\nexport const usePhone = () => useMediaQuery(\"(max-width: 767px)\");\n"},{"path":"beamline/hooks/use-motion-tokens.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-motion-tokens.ts","content":"\"use client\";\n\nimport { useMemo, type RefObject } from \"react\";\nimport { useAppearanceRoot } from \"../runtime/appearance\";\nimport { useResolvedAppearance } from \"./use-resolved-appearance\";\nimport { motionAt, motionEase, motionTokens, type MotionTokens } from \"../lib/motion-tokens\";\nimport { semanticMotion } from \"../lib/motion-source\";\n\nconst durationToken = (name: string) =>\n name === \"exit\" ? \"motion-out\" : name === \"in\" || name === \"out\" ? `motion-${name}` : `duration-${name}`;\nconst easeToken = (name: string) => `ease-${name === \"inOut\" ? \"in-out\" : name}`;\nconst REQUEST = {\n times: [\n ...Object.keys(semanticMotion.duration).map(durationToken),\n ...Object.keys(semanticMotion.spring).map((name) => `spring-${name}`),\n ...Object.keys(semanticMotion.stagger).map((name) => `stagger-${name}`),\n \"fade-in\",\n \"fade-out\",\n ],\n easings: [...Object.keys(semanticMotion.ease).map(easeToken), \"ease-spring\", \"ease-spring-bounce\", \"ease-overshoot\"],\n numbers: [\"motion-scale\", \"motion-look\", \"press-scale\"],\n // timing only: the host's own type would make every control resolve differently from the page around it\n typography: false,\n};\n\n/**\n * Resolve each timing at the actual host; omitted host uses the nearest managed root. The first/server snapshot is\n * the pure foundation default. Local CSS values, scope changes, font readiness, OS preference and explicit refresh\n * update the same consumer; no document-wide first-root fallback or persistent global listener.\n */\nexport function useMotionTokens(hostRef?: RefObject): MotionTokens & {\n ready: boolean;\n /** Reduced or none: movement, springs and staggers are instant. */\n reduced: boolean;\n mode: \"full\" | \"reduced\" | \"none\";\n /** Opacity-only arrival and departure (seconds): kept under reduced, instant under none (APPEARANCE A06). */\n fade: { in: number; out: number };\n} {\n const root = useAppearanceRoot();\n const scopeRef = useMemo(() => ({ current: root }), [root]);\n const resolved = useResolvedAppearance(hostRef ?? scopeRef, REQUEST);\n return useMemo(() => {\n if (!resolved.ready)\n return {\n ...motionTokens,\n ready: false,\n reduced: false,\n mode: \"full\" as const,\n fade: { in: motionTokens.duration.in, out: motionTokens.duration.out },\n };\n const reduced = resolved.reducedMotion;\n const speed = (resolved.numbers[\"motion-scale\"] ?? 1) * (resolved.numbers[\"motion-look\"] ?? 1);\n const fade =\n resolved.motionMode === \"none\"\n ? { in: 0.001, out: 0.001 }\n : {\n in: resolved.times[\"fade-in\"] ?? semanticMotion.duration.in * speed,\n out: resolved.times[\"fade-out\"] ?? semanticMotion.duration.out * speed,\n };\n const factor = reduced ? 0.001 / semanticMotion.duration.standard : speed;\n const base = motionAt(factor);\n const duration = Object.fromEntries(\n Object.entries(base.duration).map(([name, fallback]) => [\n name,\n reduced ? 0.001 : (resolved.times[durationToken(name)] ?? fallback),\n ]),\n ) as MotionTokens[\"duration\"];\n const stagger = Object.fromEntries(\n Object.entries(base.stagger).map(([name, fallback]) => [\n name,\n reduced ? 0 : (resolved.times[`stagger-${name}`] ?? fallback),\n ]),\n ) as MotionTokens[\"stagger\"];\n const ease = Object.fromEntries(\n Object.entries(base.ease).map(([name, fallback]) => [\n name,\n motionEase(resolved.easings[easeToken(name)], fallback),\n ]),\n ) as MotionTokens[\"ease\"];\n const spring = { ...base.spring };\n for (const name of Object.keys(semanticMotion.spring) as (keyof typeof semanticMotion.spring)[])\n spring[name] = {\n ...base.spring[name],\n visualDuration: reduced ? 0.001 : (resolved.times[`spring-${name}`] ?? base.spring[name].visualDuration),\n bounce: reduced ? 0 : base.spring[name].bounce,\n };\n return {\n ...base,\n ready: true,\n reduced,\n mode: resolved.motionMode,\n fade,\n duration,\n stagger,\n ease,\n spring,\n pressScale: resolved.numbers[\"press-scale\"] ?? base.pressScale,\n css: {\n spring: resolved.easings[\"ease-spring\"] ?? base.css.spring,\n springBounce: resolved.easings[\"ease-spring-bounce\"] ?? base.css.springBounce,\n overshoot: resolved.easings[\"ease-overshoot\"] ?? base.css.overshoot,\n },\n };\n }, [resolved]);\n}\n"},{"path":"beamline/hooks/use-reduced-motion-safe.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-reduced-motion-safe.ts","content":"\"use client\";\n\nimport { useMediaQuery } from \"./use-media-query\";\nimport { useScopeMotion } from \"../runtime/appearance\";\n\n/** Managed motion policy plus the OS preference, with a stable server snapshot. */\nexport function useReducedMotionSafe() {\n const requested = useScopeMotion();\n const os = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n return requested !== \"auto\" || os;\n}\n"},{"path":"beamline/lib/contour.ts","type":"registry:file","target":"src/ui/beamline/lib/contour.ts","content":"import { readMotionFactor } from \"./motion-tokens\";\n\n/**\n * Contour: a surface whose outline moves like matter instead of a box that resizes. Beamline's own model (research/\n * morphing-interfaces-2026-10-04): a rounded quadrilateral whose four corners each follow their target on a critically\n * damped spring. The corner facing the way it travels answers fastest and the far one slowest, so it leads and gathers;\n * each edge's midpoint heads for where its edge will be a little ahead of its corners and may only bulge outward (the\n * leading edge rounds out like the front of a drop, the tail stays smooth), and while the shape is longer than its target the long edges\n * pinch toward the centre, so a fast move draws a neck; while it is stretched its corners round toward a capsule, as a moving drop does. No spring overshoots: the elasticity is the parts arriving at\n * different moments, never bounce. At rest the surface is its plain CSS box with no clip and no frames.\n *\n * The look decides the material through four inputs on the element (preset-source.css): --m-morph-spread (how unevenly\n * the corners answer; 0 is rigid travel), --m-morph-front (px the leading edge may round out), --m-morph-waist (how much\n * a stretch pinches) and --m-morph-weight (a multiplier on the response time).\n */\nexport interface ContourBox {\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nexport interface Contour {\n /** Move the surface to `box` (in its offset parent's coordinates). `instant` places it with no motion. */\n to(box: ContourBox, options?: { instant?: boolean }): void;\n /** Stop and leave the surface at its target. */\n destroy(): void;\n}\n\ntype Point = [number, number];\ntype Corner = \"tl\" | \"tr\" | \"br\" | \"bl\";\ntype Edge = \"t\" | \"r\" | \"b\" | \"l\";\nconst CORNERS: Corner[] = [\"tl\", \"tr\", \"br\", \"bl\"];\nconst EDGES: Edge[] = [\"t\", \"r\", \"b\", \"l\"];\n/** Outward direction of each corner, for deciding which one leads. */\nconst OUT: Record = { tl: [-1, -1], tr: [1, -1], br: [1, 1], bl: [-1, 1] };\n/** Outward direction of each edge. */\nconst NORMAL: Record = { t: [0, -1], r: [1, 0], b: [0, 1], l: [-1, 0] };\n/** Settles at the motion-token morph spring at the foundation default. */\nconst BASE_RESPONSE = 0.26;\n\ninterface Mechanics {\n spread: number;\n front: number;\n waist: number;\n weight: number;\n /** The colour of the edge drawn along a non-rectangular outline (the look's hairline, which a clip would cut off). */\n rim: string;\n rimWidth: number;\n}\n\n/** One step of a critically damped spring with response time `t` (s), in closed form so a long frame cannot explode. */\nfunction step(x: number, v: number, target: number, t: number, dt: number): [number, number] {\n const w = (2 * Math.PI) / (t * 1.2);\n const d = x - target;\n const e = Math.exp(-w * dt);\n return [target + (d + (v + w * d) * dt) * e, (v - w * (v + w * d) * dt) * e];\n}\n\nconst cornersOf = (b: ContourBox): Record => ({\n tl: [b.x, b.y],\n tr: [b.x + b.w, b.y],\n br: [b.x + b.w, b.y + b.h],\n bl: [b.x, b.y + b.h],\n});\nconst midsOf = (c: Record): Record => ({\n t: [(c.tl[0] + c.tr[0]) / 2, (c.tl[1] + c.tr[1]) / 2],\n r: [(c.tr[0] + c.br[0]) / 2, (c.tr[1] + c.br[1]) / 2],\n b: [(c.br[0] + c.bl[0]) / 2, (c.br[1] + c.bl[1]) / 2],\n l: [(c.bl[0] + c.tl[0]) / 2, (c.bl[1] + c.tl[1]) / 2],\n});\nconst zero = (keys: K[]) => Object.fromEntries(keys.map((k) => [k, [0, 0]])) as Record;\nconst num = (style: CSSStyleDeclaration, name: string, fallback: number) => {\n const value = Number.parseFloat(style.getPropertyValue(name));\n return Number.isFinite(value) ? value : fallback;\n};\n\n/** All moving contours share one frame loop, which stops when the last one settles. */\nconst moving = new Set<(dt: number) => boolean>();\nlet frame = 0;\nlet last = 0;\nfunction tick(now: number) {\n const dt = Math.min(0.032, Math.max(0.001, (now - last) / 1000));\n last = now;\n for (const advance of moving) if (!advance(dt)) moving.delete(advance);\n frame = moving.size ? requestAnimationFrame(tick) : 0;\n}\nfunction run(advance: (dt: number) => boolean) {\n moving.add(advance);\n if (!frame) {\n last = performance.now();\n frame = requestAnimationFrame(tick);\n }\n}\n\n/** One contour per element, so a remount (or React's development double mount) keeps its place and keeps moving. */\nconst contours = new WeakMap();\nexport function createContour(el: HTMLElement): Contour {\n const existing = contours.get(el);\n if (existing) return existing;\n let target: ContourBox | null = null;\n let pos: Record | null = null;\n let vel = zero(CORNERS);\n let mid: Record = { t: [0, 0], r: [0, 0], b: [0, 0], l: [0, 0] };\n let midVel = zero(EDGES);\n let mech: Mechanics = { spread: 0.35, front: 5, waist: 0.16, weight: 1, rim: \"none\", rimWidth: 1 };\n let rimPath: SVGPathElement | null = null;\n const rim = (d: string | null, w = 0, h = 0) => {\n if (!d || mech.rim === \"none\") {\n if (rimPath) (rimPath.ownerSVGElement as SVGSVGElement).style.display = \"none\";\n return;\n }\n if (!rimPath) {\n const ns = \"http://www.w3.org/2000/svg\";\n const svg = el.ownerDocument.createElementNS(ns, \"svg\");\n svg.setAttribute(\"aria-hidden\", \"true\");\n svg.setAttribute(\"data-contour-rim\", \"\");\n svg.style.cssText = \"position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none\";\n rimPath = el.ownerDocument.createElementNS(ns, \"path\");\n rimPath.setAttribute(\"fill\", \"none\");\n svg.appendChild(rimPath);\n el.appendChild(svg);\n }\n const svg = rimPath.ownerSVGElement as SVGSVGElement;\n svg.style.display = \"\";\n svg.setAttribute(\"width\", String(w));\n svg.setAttribute(\"height\", String(h));\n rimPath.setAttribute(\"d\", d);\n // the clip keeps the inner half of the stroke: an edge of rimWidth inside the outline\n rimPath.setAttribute(\"stroke-width\", String(mech.rimWidth * 2));\n rimPath.style.stroke = mech.rim;\n };\n let response = BASE_RESPONSE;\n let radius = 0;\n let running = false;\n\n const rest = () => {\n if (!target) return;\n el.style.transform = `translate(${target.x}px, ${target.y}px)`;\n el.style.width = `${target.w}px`;\n el.style.height = `${target.h}px`;\n el.style.clipPath = \"\";\n rim(null);\n delete el.dataset.morphing;\n };\n\n const draw = () => {\n if (!pos || !target) return;\n const c = pos;\n const w = (c.tr[0] - c.tl[0] + c.br[0] - c.bl[0]) / 2;\n const h = (c.bl[1] - c.tl[1] + c.br[1] - c.tr[1]) / 2;\n // the long edges pinch while the shape is longer than its target (area kept, roughly)\n const pinchY = Math.min(h * mech.waist * 0.5, 4, h * Math.max(0, w / target.w - 1) * mech.waist);\n const pinchX = Math.min(w * mech.waist * 0.5, 4, w * Math.max(0, h / target.h - 1) * mech.waist);\n const edges: Record = {\n t: [mid.t[0], mid.t[1] + pinchY],\n b: [mid.b[0], mid.b[1] - pinchY],\n l: [mid.l[0] + pinchX, mid.l[1]],\n r: [mid.r[0] - pinchX, mid.r[1]],\n };\n // still a rectangle (a rigid look, or a straight move): move the box itself and keep every bit of the look's paint\n const flat = (a: number, b: number) => Math.abs(a - b) < 0.35;\n const corners = midsOf(c);\n if (\n flat(c.tl[1], c.tr[1]) &&\n flat(c.bl[1], c.br[1]) &&\n flat(c.tl[0], c.bl[0]) &&\n flat(c.tr[0], c.br[0]) &&\n EDGES.every((k) => flat(edges[k][0], corners[k][0]) && flat(edges[k][1], corners[k][1]))\n ) {\n el.style.transform = `translate(${c.tl[0]}px, ${c.tl[1]}px)`;\n el.style.width = `${c.tr[0] - c.tl[0]}px`;\n el.style.height = `${c.bl[1] - c.tl[1]}px`;\n el.style.clipPath = \"\";\n rim(null);\n return;\n }\n const all = [...CORNERS.map((k) => c[k]), ...EDGES.map((k) => edges[k])];\n const minX = Math.floor(Math.min(...all.map((p) => p[0]))) - 1;\n const minY = Math.floor(Math.min(...all.map((p) => p[1]))) - 1;\n const maxX = Math.ceil(Math.max(...all.map((p) => p[0]))) + 1;\n const maxY = Math.ceil(Math.max(...all.map((p) => p[1]))) + 1;\n const local = (p: Point): Point => [p[0] - minX, p[1] - minY];\n const C = CORNERS.map((k) => local(c[k]));\n const E = ([\"t\", \"r\", \"b\", \"l\"] as Edge[]).map((k) => local(edges[k]));\n const len = (a: Point, b: Point) => Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;\n const toward = (a: Point, b: Point, d: number): Point => {\n const l = len(a, b);\n return [a[0] + ((b[0] - a[0]) / l) * d, a[1] + ((b[1] - a[1]) / l) * d];\n };\n // each corner backs off its radius along both of its real edges and turns through the corner itself, so a sheared\n // shape never folds over; each edge bows through its midpoint\n // a moving drop is round: corners grow toward a capsule while the shape is stretched or far from home\n const away = Math.max(w / target.w - 1, h / target.h - 1, 0);\n const round = mech.front > 0 ? Math.min(1, away * 2.5) : 0;\n const r = radius + (Math.min(w, h) / 2 - radius) * Math.max(0, round);\n const rr = C.map((p, i) => Math.min(r, len(p, C[(i + 1) % 4]) / 2.2, len(p, C[(i + 3) % 4]) / 2.2));\n const into = C.map((p, i) => toward(p, C[(i + 3) % 4], rr[i]));\n const out = C.map((p, i) => toward(p, C[(i + 1) % 4], rr[i]));\n const through = (a: Point, m: Point, b: Point): Point => [\n 2 * m[0] - (a[0] + b[0]) / 2,\n 2 * m[1] - (a[1] + b[1]) / 2,\n ];\n const f = (p: Point) => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`;\n let d = `M${f(out[0])}`;\n for (let i = 0; i < 4; i++) {\n const j = (i + 1) % 4;\n // an edge the rounded corners have nearly used up can only bow a little, or its middle would point\n const a = out[i];\n const b = into[j];\n const chord: Point = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n const bow: Point = [E[i][0] - chord[0], E[i][1] - chord[1]];\n const most = len(a, b) * 0.18;\n const bowLen = Math.hypot(bow[0], bow[1]);\n const m: Point =\n bowLen > most ? [chord[0] + (bow[0] / bowLen) * most, chord[1] + (bow[1] / bowLen) * most] : E[i];\n d += ` Q${f(through(a, m, b))} ${f(b)} Q${f(C[j])} ${f(out[j])}`;\n }\n el.style.transform = `translate(${minX}px, ${minY}px)`;\n el.style.width = `${maxX - minX}px`;\n el.style.height = `${maxY - minY}px`;\n el.style.clipPath = `path(\"${d}Z\")`;\n rim(`${d}Z`, maxX - minX, maxY - minY);\n };\n\n const advance = (dt: number) => {\n if (!pos || !target || !el.isConnected) return (running = false);\n const goal = cornersOf(target);\n let busy = false;\n for (const k of CORNERS) {\n const p = pos[k];\n const v = vel[k];\n const g = goal[k];\n const dx = g[0] - p[0];\n const dy = g[1] - p[1];\n const dist = Math.hypot(dx, dy);\n // -1 … 1: how squarely this corner faces the way it is going\n const along = dist > 0.5 ? (OUT[k][0] * dx + OUT[k][1] * dy) / (dist * Math.SQRT2) : 0;\n const t = response * (1 + mech.spread * 0.4 - mech.spread * along);\n for (const a of [0, 1] as const) {\n [p[a], v[a]] = step(p[a], v[a], g[a], t, dt);\n if (Math.abs(p[a] - g[a]) > 0.2 || Math.abs(v[a]) > 4) busy = true;\n }\n }\n const now = midsOf(pos);\n const aim = midsOf(goal);\n for (const k of EDGES) {\n for (const a of [0, 1] as const)\n [mid[k][a], midVel[k][a]] = step(mid[k][a], midVel[k][a], aim[k][a], response * 0.75, dt);\n // the lead is a few pixels at most, and never more than a fraction of the edge or of the shape's depth\n const across = k === \"t\" || k === \"b\" ? target.h : target.w;\n const edge =\n k === \"t\" ? [pos.tl, pos.tr] : k === \"b\" ? [pos.br, pos.bl] : k === \"l\" ? [pos.bl, pos.tl] : [pos.tr, pos.br];\n const limit = Math.min(\n mech.front,\n across * 0.3,\n Math.hypot(edge[1][0] - edge[0][0], edge[1][1] - edge[0][1]) * 0.15,\n );\n // edges only ever bulge outward: the front rounds out, the tail stays smooth instead of curling in\n let ox = mid[k][0] - now[k][0];\n let oy = mid[k][1] - now[k][1];\n const [nx, ny] = NORMAL[k];\n const inward = ox * nx + oy * ny;\n if (inward < 0) {\n ox -= inward * nx;\n oy -= inward * ny;\n mid[k][0] = now[k][0] + ox;\n mid[k][1] = now[k][1] + oy;\n }\n const off = Math.hypot(ox, oy);\n if (off > limit) {\n mid[k][0] = now[k][0] + (ox / off) * limit;\n mid[k][1] = now[k][1] + (oy / off) * limit;\n }\n if (Math.abs(mid[k][0] - aim[k][0]) > 0.2 || Math.abs(mid[k][1] - aim[k][1]) > 0.2) busy = true;\n }\n if (!busy) {\n pos = goal;\n vel = zero(CORNERS);\n mid = midsOf(goal);\n midVel = zero(EDGES);\n rest();\n return (running = false);\n }\n draw();\n return true;\n };\n\n const contour: Contour = {\n to(box, options) {\n const same = target && target.x === box.x && target.y === box.y && target.w === box.w && target.h === box.h;\n if (same && !options?.instant) return;\n target = { ...box };\n const style = getComputedStyle(el);\n const r = style.borderTopLeftRadius;\n radius = r.endsWith(\"%\") ? (Number.parseFloat(r) / 100) * Math.min(box.w, box.h) : Number.parseFloat(r) || 0;\n mech = {\n spread: num(style, \"--m-morph-spread\", 0.35),\n front: num(style, \"--m-morph-front\", 6),\n waist: num(style, \"--m-morph-waist\", 0.18),\n weight: num(style, \"--m-morph-weight\", 1),\n rim: style.getPropertyValue(\"--m-morph-rim\").trim() || \"none\",\n rimWidth: num(style, \"--m-morph-rim-width\", 1),\n };\n const factor = readMotionFactor(el);\n response = BASE_RESPONSE * mech.weight * factor;\n // first placement, reduced motion, or a hidden surface: be there, with nothing to watch\n if (!pos || options?.instant || factor < 0.05 || !el.getClientRects().length) {\n pos = cornersOf(target);\n vel = zero(CORNERS);\n mid = midsOf(pos);\n midVel = zero(EDGES);\n moving.delete(advance);\n running = false;\n rest();\n return;\n }\n el.dataset.morphing = \"\";\n if (!running) {\n running = true;\n run(advance);\n }\n },\n destroy() {\n moving.delete(advance);\n running = false;\n if (target) rest();\n },\n };\n contours.set(el, contour);\n return contour;\n}\n"},{"path":"beamline/lib/natural-range.ts","type":"registry:file","target":"src/ui/beamline/lib/natural-range.ts","content":"/**\n * A date range typed the way people say it: \"last 2 weeks\", \"past 30 days\", \"this month\", \"last quarter\", \"Q3\",\n * \"Q1 2025\", \"March\", \"mar 2025\", \"since monday\", \"since Mar 3\", \"Mar 3 – Apr 10\", \"2026-01-05 to 2026-02-01\",\n * \"today\", \"yesterday\". Counts back from `today` (the day the picker treats as now); \"last N days\" includes today, as\n * the presets do. Month names are read in English and in `locale`; the words (last, this, since, to) are English.\n * Returns null for text it cannot read, so the caller can say what it understands instead of guessing.\n */\nexport interface NaturalRange {\n start: Date;\n end: Date;\n}\n\nconst DAY = 86_400_000;\nconst day = (y: number, m: number, d: number) => new Date(y, m, d);\n/** A day that exists: \"Feb 30\" and \"Apr 31\" are refused rather than rolled into the next month. */\nconst real = (y: number, m: number, d: number) => {\n const r = day(y, m, d);\n return r.getMonth() === ((m % 12) + 12) % 12 && r.getDate() === d ? r : null;\n};\nconst NUMBER_WORDS = [\n \"one\",\n \"two\",\n \"three\",\n \"four\",\n \"five\",\n \"six\",\n \"seven\",\n \"eight\",\n \"nine\",\n \"ten\",\n \"eleven\",\n \"twelve\",\n];\nconst startOf = (d: Date) => day(d.getFullYear(), d.getMonth(), d.getDate());\nconst UNITS: Record = {\n d: \"day\",\n day: \"day\",\n days: \"day\",\n w: \"week\",\n wk: \"week\",\n wks: \"week\",\n week: \"week\",\n weeks: \"week\",\n m: \"month\",\n mo: \"month\",\n mos: \"month\",\n month: \"month\",\n months: \"month\",\n q: \"quarter\",\n quarter: \"quarter\",\n quarters: \"quarter\",\n y: \"year\",\n yr: \"year\",\n yrs: \"year\",\n year: \"year\",\n years: \"year\",\n};\nconst WEEKDAYS = [\"sunday\", \"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\"];\n\nconst monthNames = new Map>();\n/** month name → index, English and the locale's long and short forms, lower case, without dots */\nfunction months(locale: string) {\n let map = monthNames.get(locale);\n if (map) return map;\n map = new Map();\n for (const loc of [\"en\", locale])\n for (const form of [\"long\", \"short\"] as const) {\n const f = new Intl.DateTimeFormat(loc, { month: form, timeZone: \"UTC\" });\n for (let i = 0; i < 12; i++)\n map.set(\n f\n .format(Date.UTC(2024, i, 15))\n .toLowerCase()\n .replace(/\\./g, \"\"),\n i,\n );\n }\n map.set(\"sept\", 8);\n monthNames.set(locale, map);\n return map;\n}\n\n/** The first day of the period that contains `d`. */\nfunction periodStart(d: Date, unit: \"week\" | \"month\" | \"quarter\" | \"year\", weekStartsOn: number) {\n if (unit === \"week\") return startOf(new Date(+d - ((d.getDay() - weekStartsOn + 7) % 7) * DAY));\n if (unit === \"month\") return day(d.getFullYear(), d.getMonth(), 1);\n if (unit === \"quarter\") return day(d.getFullYear(), Math.floor(d.getMonth() / 3) * 3, 1);\n return day(d.getFullYear(), 0, 1);\n}\nfunction addPeriod(d: Date, unit: \"day\" | \"week\" | \"month\" | \"quarter\" | \"year\", n: number) {\n if (unit === \"day\") return day(d.getFullYear(), d.getMonth(), d.getDate() + n);\n if (unit === \"week\") return day(d.getFullYear(), d.getMonth(), d.getDate() + 7 * n);\n if (unit === \"month\") return day(d.getFullYear(), d.getMonth() + n, d.getDate());\n if (unit === \"quarter\") return day(d.getFullYear(), d.getMonth() + 3 * n, d.getDate());\n return day(d.getFullYear() + n, d.getMonth(), d.getDate());\n}\n\n/** One day: \"2026-03-03\", \"mar 3\", \"3 mar\", \"march 3 2025\", \"monday\" (the latest one, today included). */\nfunction oneDay(text: string, today: Date, locale: string): Date | null {\n const t = text.trim().toLowerCase().replace(/[.,]/g, \" \").replace(/\\s+/g, \" \");\n if (!t) return null;\n if (t === \"today\") return today;\n if (t === \"yesterday\") return addPeriod(today, \"day\", -1);\n let m = t.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n if (m) return real(+m[1], +m[2] - 1, +m[3]);\n const wd = WEEKDAYS.findIndex((w) => w === t || w.slice(0, 3) === t);\n if (wd >= 0) return addPeriod(today, \"day\", -((today.getDay() - wd + 7) % 7));\n const names = months(locale);\n const year = (s?: string) => (s ? +s : undefined);\n m = t.match(/^(\\p{L}+) (\\d{1,2})(?: (\\d{4}))?$/u);\n if (m && names.has(m[1])) return dated(names.get(m[1])!, +m[2], year(m[3]), today);\n m = t.match(/^(\\d{1,2}) (\\p{L}+)(?: (\\d{4}))?$/u);\n if (m && names.has(m[2])) return dated(names.get(m[2])!, +m[1], year(m[3]), today);\n return null;\n}\n/** A day without a year is the latest one not after today (\"Dec 20\" typed in January is last December). */\nfunction dated(month: number, date: number, year: number | undefined, today: Date) {\n if (year !== undefined) return real(year, month, date);\n const d = real(today.getFullYear(), month, date);\n // Feb 29 in a year without it is the last one that had it\n if (!d) return real(today.getFullYear() - 1, month, date) ?? real(today.getFullYear() - 4, month, date);\n return d > today ? real(today.getFullYear() - 1, month, date) : d;\n}\n\n/** The two ends of \"a to b\", \"a - b\" or \"a-b\" (a bare hyphen only where no ISO date could own it). */\nfunction splitRange(t: string): [string, string] | null {\n for (const sep of [/ (?:to|until|till|through) /, / - /]) {\n const m = t.match(sep);\n if (m && m.index! > 0) return [t.slice(0, m.index), t.slice(m.index! + m[0].length)];\n }\n if (!/\\d{4}-\\d/.test(t)) {\n const i = t.indexOf(\"-\");\n if (i > 0 && i < t.length - 1) return [t.slice(0, i), t.slice(i + 1)];\n }\n return null;\n}\n\nexport function parseNaturalRange(\n text: string,\n today: Date,\n { locale = \"en\", weekStartsOn = 1 }: { locale?: string; weekStartsOn?: number } = {},\n): NaturalRange | null {\n const now = startOf(today);\n const t = text\n .trim()\n .toLowerCase()\n .replace(/[–—]/g, \"-\")\n // \"sep.\" is sep, \"3rd\" is 3, \"two weeks\" is 2 weeks\n .replace(/(\\p{L})\\.(?=\\s|$|-)/gu, \"$1\")\n .replace(/(\\d)(?:st|nd|rd|th)\\b/g, \"$1\")\n .replace(new RegExp(`\\\\b(${NUMBER_WORDS.join(\"|\")})\\\\b`, \"g\"), (w) => String(NUMBER_WORDS.indexOf(w) + 1))\n .replace(/\\s+/g, \" \");\n if (!t) return null;\n // last / past N units, counting today\n let m = t.match(/^(?:last|past|previous) (\\d+) ?(\\p{L}+)$/u);\n if (m && UNITS[m[2]]) {\n const n = +m[1];\n if (n < 1 || n > 1000) return null;\n return { start: addPeriod(addPeriod(now, UNITS[m[2]], -n), \"day\", 1), end: now };\n }\n // past week / month: the last seven days, the last month up to today (a rolling period, unlike \"last week\")\n m = t.match(/^past (week|month|quarter|year)$/);\n if (m) return { start: addPeriod(addPeriod(now, UNITS[m[1]], -1), \"day\", 1), end: now };\n // a year alone\n m = t.match(/^(\\d{4})$/);\n if (m) {\n const y = +m[1];\n if (y > now.getFullYear()) return null;\n return { start: day(y, 0, 1), end: y === now.getFullYear() ? now : day(y, 11, 31) };\n }\n // this / last (previous) period\n m = t.match(/^(this|last|previous) (week|month|quarter|year)$/);\n if (m) {\n const unit = m[2] as \"week\" | \"month\" | \"quarter\" | \"year\";\n const start = periodStart(now, unit, weekStartsOn);\n if (m[1] === \"this\") return { start, end: now };\n const prev = addPeriod(start, unit, -1);\n return { start: prev, end: addPeriod(start, \"day\", -1) };\n }\n if (t === \"today\") return { start: now, end: now };\n if (t === \"yesterday\") return { start: addPeriod(now, \"day\", -1), end: addPeriod(now, \"day\", -1) };\n // Q3, Q1 2025\n m = t.match(/^q([1-4])(?: (\\d{4}))?$/);\n if (m) {\n const y = m[2] ? +m[2] : now.getFullYear();\n const start = day(y, (+m[1] - 1) * 3, 1);\n // this year's quarter still in the future is last year's\n const s = !m[2] && start > now ? day(y - 1, (+m[1] - 1) * 3, 1) : start;\n return { start: s, end: day(s.getFullYear(), s.getMonth() + 3, 0) };\n }\n // a whole month: \"march\", \"mar 2025\"\n m = t.match(/^(\\p{L}+)(?: (\\d{4}))?$/u);\n const names = months(locale);\n if (m && names.has(m[1].replace(/\\./g, \"\"))) {\n const month = names.get(m[1].replace(/\\./g, \"\"))!;\n let y = m[2] ? +m[2] : now.getFullYear();\n if (!m[2] && day(y, month, 1) > now) y--;\n return { start: day(y, month, 1), end: day(y, month + 1, 0) };\n }\n // since a day\n m = t.match(/^since (.+)$/);\n if (m) {\n const from = oneDay(m[1], now, locale);\n return from && from <= now ? { start: from, end: now } : null;\n }\n // a day to a day: \"mar 3 - apr 10\", \"mar 3-apr 10\", \"2026-01-05 to 2026-02-01\"\n const ends = splitRange(t);\n if (ends) {\n let a = oneDay(ends[0], now, locale);\n // the end as a bare day of the start's month, the way the picker itself writes a range (\"Oct 11 – 24, 2026\")\n const bare = ends[1]\n .trim()\n .replace(/,/g, \" \")\n .replace(/\\s+/g, \" \")\n .match(/^(\\d{1,2})(?: (\\d{4}))?$/);\n if (bare) {\n const start = ends[0].trim().replace(/,/g, \" \").replace(/\\s+/g, \" \");\n const sm = start.match(/^(\\p{L}+) (\\d{1,2})(?: (\\d{4}))?$/u) ?? start.match(/^(\\d{1,2}) (\\p{L}+)(?: (\\d{4}))?$/u);\n const name = sm && (names.has(sm[1]) ? sm[1] : sm[2]);\n if (!sm || !names.has(name!)) return null;\n const month = names.get(name!)!;\n const date = +(names.has(sm[1]) ? sm[2] : sm[1]);\n const year = sm[3] ? +sm[3] : bare[2] ? +bare[2] : undefined;\n const s = dated(month, date, year, now);\n const e = s && real(s.getFullYear(), month, +bare[1]);\n return s && e && s <= e ? { start: s, end: e } : null;\n }\n let b = oneDay(ends[1], now, locale);\n // \"friday - monday\" runs forward over the weekend: a weekday start after the end is the week before\n if (a && b && a > b && WEEKDAYS.some((w) => w === ends[0].trim() || w.slice(0, 3) === ends[0].trim()))\n a = addPeriod(a, \"day\", -7);\n // a dated end without a year follows the start (\"Mar 3 2025 – Apr 10\" ends in 2025, \"Dec 20 – Jan 5\" in the next\n // year), and a dated start without a year follows the end; words (today, monday) keep their own day\n const noYear = (t: string) => /\\d/.test(t) && !/\\d{4}/.test(t) && !/^\\d{4}-/.test(t);\n if (a && b && noYear(ends[1]) && /\\d{4}/.test(ends[0])) {\n b = day(a.getFullYear(), b.getMonth(), b.getDate());\n if (b < a) b = day(a.getFullYear() + 1, b.getMonth(), b.getDate());\n } else if (a && b && noYear(ends[0]) && /\\d{4}/.test(ends[1])) {\n a = day(b.getFullYear(), a.getMonth(), a.getDate());\n if (a > b) a = day(b.getFullYear() - 1, a.getMonth(), a.getDate());\n } else if (a && b && noYear(ends[1]) && b < a) b = day(b.getFullYear() + 1, b.getMonth(), b.getDate());\n if (a && b) return a <= b ? { start: a, end: b } : { start: b, end: a };\n return null;\n }\n // one day\n const one = oneDay(t, now, locale);\n return one ? { start: one, end: one } : null;\n}\n"},{"path":"beamline/lib/now.ts","type":"registry:file","target":"src/ui/beamline/lib/now.ts","content":"import { useContext, useLayoutEffect, useMemo, useState, useSyncExternalStore } from \"react\";\nimport { ActivityContext } from \"../runtime/activity\";\n\n/*\n * The time, read only in the browser. A component that reads the clock while it renders breaks server rendering:\n * Next.js refuses to prerender a page that does (\"encountered the unstable value `new Date()` in a Client Component\",\n * create-next-app's default since 16), and any server's time differs from the browser's at hydration. These hooks give\n * null on the server and while hydrating, and the real value in the browser before the first paint.\n */\n\nconst still = () => () => {};\nconst startOfToday = () => {\n const d = new Date();\n return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();\n};\nconst onServer = () => null;\n\n/** Today at 00:00 local time; null on the server and while hydrating. */\nexport function useToday(): Date | null {\n const day = useSyncExternalStore(still, startOfToday, onServer);\n return useMemo(() => (day === null ? null : new Date(day)), [day]);\n}\n\n/** The time in ms, read before the first paint and again every `every` ms while `ticking`; null on the server. */\nexport function useNow(ticking = false, every = 1000, until?: number): number | null {\n const active = useContext(ActivityContext);\n const [now, setNow] = useState(null);\n // A finite deadline must reach its completion callback even when the host is idle, then stop ticking.\n const running = ticking && (until === undefined ? active : now === null || now < until);\n useLayoutEffect(() => {\n setNow(Date.now());\n if (!running) return;\n const id = setInterval(() => setNow(Date.now()), every);\n return () => clearInterval(id);\n }, [running, every, until]);\n return now;\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":"Date range picker is in src/ui/beamline/components/date-range-picker/date-range-picker.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/date-range-picker"}}