{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"comment-thread","type":"registry:component","title":"Comment thread","description":"A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread.","categories":["display"],"dependencies":["@radix-ui/react-dialog@1.1.23","@radix-ui/react-direction@1.1.4","@radix-ui/react-dropdown-menu@2.1.24","@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/match.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/match.tsx","content":"/** One way to rank and mark matches for every search-as-you-type list (command menu, combobox, multi-select). */\n\n/** How well `label` (and its keywords) answers `query`: label start 100, word start 80, anywhere 60, keyword 45,\n * every word of a several-word query found across label, keywords and description 40 (50 when one starts the label:\n * \"billing city\" finds Billing address › City), description 30, letters in order 15, no match 0. An empty query\n * matches everything with 1. */\nexport function rank(query: string, label: string, keywords?: string[], description?: string): number {\n const q = query.trim().toLowerCase();\n if (!q) return 1;\n const l = label.toLowerCase();\n const at = l.indexOf(q);\n if (at === 0) return 100 - l.length / 100;\n if (at > 0 && /[\\s\\-/(_.]/.test(l[at - 1])) return 80;\n if (at > 0) return 60;\n if (keywords?.some((k) => k.toLowerCase().includes(q))) return 45;\n const words = q.split(/\\s+/);\n if (words.length > 1) {\n const hay = [l, ...(keywords ?? []).map((k) => k.toLowerCase()), description?.toLowerCase() ?? \"\"];\n if (words.every((w) => hay.some((h) => h.includes(w)))) return words.some((w) => l.startsWith(w)) ? 50 : 40;\n }\n if (description?.toLowerCase().includes(q)) return 30;\n let i = 0;\n for (const ch of l) if (ch === q[i]) i++;\n return i === q.length ? 15 : 0;\n}\n\n/** Sorts by rank (best first, original order for ties) and drops non-matches. */\nexport function filterRanked(\n items: T[],\n query: string,\n get: (item: T) => { label: string; keywords?: string[]; description?: string },\n): T[] {\n if (!query.trim()) return items;\n return items\n .map((item, order) => {\n const g = get(item);\n return { item, order, s: rank(query, g.label, g.keywords, g.description) };\n })\n .filter((r) => r.s > 0)\n .sort((a, b) => b.s - a.s || a.order - b.order)\n .map((r) => r.item);\n}\n\n/** The label with the matched run emphasised. */\nexport function Highlight({ text, query }: { text: string; query: string }) {\n const q = query.trim().toLowerCase();\n const at = q ? text.toLowerCase().indexOf(q) : -1;\n if (at < 0) return <>{text};\n return (\n <>\n {text.slice(0, at)}\n {text.slice(at, at + q.length)}\n {text.slice(at + q.length)}\n \n );\n}\n"},{"path":"beamline/components/_shared/menu.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/menu.tsx","content":"\"use client\";\n\nimport {\n Fragment,\n useCallback,\n useRef,\n useState,\n type ComponentType,\n type FocusEvent,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { Check, ChevronRight } from \"lucide-react\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { cn } from \"../../lib/utils\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport overlay from \"./overlay.module.css\";\n\nexport interface MenuClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the trigger part; no override by default. */\n trigger?: string;\n /** Classes for the content part; no override by default. */\n content?: string;\n /** Classes for the submenu part; no override by default. */\n submenu?: string;\n /** Classes for the indicator part; no override by default. */\n indicator?: string;\n /** Classes for the item part; no override by default. */\n item?: string;\n /** Classes for the label part; no override by default. */\n label?: string;\n /** Classes for the shortcut part; no override by default. */\n shortcut?: string;\n /** Classes for the check part; no override by default. */\n check?: string;\n /** Classes for the separator part; no override by default. */\n separator?: string;\n /** Classes for the heading part; no override by default. */\n heading?: string;\n /** Classes for the chevron part; no override by default. */\n chevron?: string;\n}\n\n/** One row of any menu in the system (dropdown, context menu, menu bar). The same data renders the same everywhere. */\nexport interface MenuItem {\n /** Stable key; the label is used when absent. */\n id?: string;\n /** Text displayed for this item. Required. */\n label: ReactNode;\n /** Icon element displayed with this item. Omitted by default. */\n icon?: ReactNode;\n /** A shortcut shown at the end, e.g. \"⌘D\". The app binds the key. */\n shortcut?: string;\n /** Runs when this item is activated. Omitted by default. */\n onSelect?: (event: Event) => void;\n /** Whether this option is unavailable for selection. Omitted by default. */\n disabled?: boolean;\n /** danger: a destructive action (red). */\n tone?: \"danger\";\n /** A line above this item. */\n separatorBefore?: boolean;\n /** A small heading above this item, starting a group. */\n heading?: string;\n /** A checkable item; shows a check when true. */\n checked?: boolean;\n /** checkbox (default when checked is set) stays open when toggled; radio is one of a set and closes the menu. */\n type?: \"checkbox\" | \"radio\";\n /** A submenu. */\n items?: MenuItem[];\n}\n\ntype Part = ComponentType; // eslint-disable-line @typescript-eslint/no-explicit-any -- Radix menu namespaces share part names, not prop types\n/** The Radix parts a menu needs; DropdownMenu, ContextMenu and Menubar all provide them. */\nexport interface MenuKit {\n Content: Part;\n SubContent: Part;\n Item: Part;\n CheckboxItem: Part;\n ItemIndicator: Part;\n Sub: Part;\n SubTrigger: Part;\n Separator: Part;\n Label: Part;\n Portal: Part;\n}\n\n/** The reading direction a menu should open in: an explicit one, else the direction in force around its trigger (read\n * when the trigger mounts and again as it is pressed, right-clicked or keyed), else a Direction provider. Without it\n * Radix falls back to \"ltr\", so a portalled menu on an RTL page reads left to right, opens submenus to the right and\n * answers → instead of ←. Spread `triggerProps` on the Radix trigger and pass `dir` to the Radix root. */\nexport function useMenuDirection(explicit?: \"ltr\" | \"rtl\") {\n const provided = useDirection();\n const [around, setAround] = useState<\"ltr\" | \"rtl\">();\n const read = useCallback((el: Element | null) => {\n if (el) setAround(getComputedStyle(el).direction === \"rtl\" ? \"rtl\" : \"ltr\");\n }, []);\n const measure = useCallback((e: { currentTarget: Element }) => read(e.currentTarget), [read]);\n return {\n dir: explicit ?? around ?? provided,\n triggerProps: {\n ref: read,\n onPointerDownCapture: measure,\n onKeyDownCapture: measure,\n onContextMenuCapture: measure,\n },\n };\n}\n\n/** The floating list: one surface and one highlight plate that glides between rows, under the pointer and the arrow\n * keys alike. Extra props (align, side, sideOffset) go to the Radix content part. */\nexport function MenuSurface({\n kit,\n sub = false,\n label,\n className,\n classNames,\n children,\n ref,\n ...rest\n}: {\n kit: MenuKit;\n sub?: boolean;\n label?: string;\n className?: string;\n classNames?: MenuClassNames;\n children: ReactNode;\n ref?: Ref;\n} & Record) {\n const surface = useRef(null);\n // the portal's presence passes its own ref (it watches the exit animation); keep both\n const attach = useComposedRef(surface, ref);\n const [plate, setPlate] = useState<{ y: number; h: number; jump: boolean } | null>(null);\n const Part = sub ? kit.SubContent : kit.Content;\n const { onFocusOutside, ...others } = rest as { onFocusOutside?: (event: Event) => void };\n return (\n {\n if (surface.current?.dataset.state === \"closed\") event.preventDefault();\n onFocusOutside?.(event);\n }}\n className={cn(\n overlay.surface,\n overlay.menu,\n \"relative min-w-[11rem]\",\n sub ? classNames?.submenu : classNames?.content,\n className,\n )}\n // React events cross portals: only rows of this surface move its plate (a submenu has its own)\n onFocusCapture={(e: FocusEvent) => {\n const item = (e.target as HTMLElement).closest(\"[data-menu-item]\");\n if (item && !surface.current?.contains(item)) return;\n if (!item) {\n setPlate((p) => (p ? { ...p, h: 0 } : p));\n return;\n }\n setPlate((p) => ({ y: item.offsetTop, h: item.offsetHeight, jump: !p?.h }));\n }}\n // while a submenu is open, its trigger keeps the plate\n onPointerLeave={() => {\n if (!surface.current?.querySelector(\":scope > [data-menu-item][data-state=open]\"))\n setPlate((p) => (p ? { ...p, h: 0 } : p));\n }}\n >\n \n {children}\n \n );\n}\n\n/** Rows for a MenuItem list, in any kit. */\nexport function MenuItems({\n kit,\n items,\n container,\n classNames,\n}: {\n kit: MenuKit;\n items: MenuItem[];\n container?: HTMLElement | null;\n classNames?: MenuClassNames;\n}) {\n return items.map((item, i) => {\n const tone = item.tone;\n const common = {\n \"data-menu-item\": \"\",\n \"data-slot\": \"menu-item\",\n \"data-glide\": \"\",\n \"data-tone\": tone,\n className: cn(overlay.item, classNames?.item),\n disabled: item.disabled,\n };\n const content = (\n <>\n {item.icon}\n \n {item.label}\n \n {item.shortcut && (\n \n {item.shortcut}\n \n )}\n \n );\n let node: ReactNode;\n if (item.items?.length) {\n node = (\n \n \n {content}\n \n \n {container !== null && (\n \n \n \n \n \n )}\n \n );\n } else if (item.checked !== undefined && item.type === \"radio\") {\n node = (\n \n {content}\n \n {item.checked && }\n \n \n );\n } else if (item.checked !== undefined) {\n node = (\n {\n e.preventDefault();\n item.onSelect?.(e);\n }}\n >\n {content}\n \n \n \n \n );\n } else {\n node = (\n \n {content}\n \n );\n }\n return (\n \n {item.separatorBefore && i > 0 && (\n \n )}\n {item.heading && (\n \n {item.heading}\n \n )}\n {node}\n \n );\n });\n}\n"},{"path":"beamline/components/_shared/messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n results: {\n one: \"{count} result\",\n other: \"{count} results\",\n },\n noMatch: \"No match for {query}\",\n fieldOver: \"{count} over\",\n fieldFull: \"Limit reached\",\n fieldLeft: \"{count} left\",\n foldMore: \"{list} and {count} more\",\n foldShow: \"Show {count} more {noun}: {list}\",\n statusLabel: \"Checking\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/_shared/overlay.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the source morph's moving parts: the clip's four sides, the radius and the offset back to the trigger */\n@property --ci-t {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-r {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-b {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-l {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@property --ci-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@layer components {\n /* Every floating layer in the system: one surface (painted by the overlay role of the look in force), one menu-item\n look, one scrim, one enter and exit. A layer placed against a trigger opens out of it (the source morph below); one\n without a placement arrives in --pui-motion-in scaling from its origin. Each leaves in --pui-motion-out; Radix keeps\n it mounted until the exit animation ends. Reduced motion makes both instant (the duration tokens become 1ms). */\n .surface {\n z-index: var(--pui-z-popover);\n min-width: 8rem;\n /* never past the screen: as wide and as tall as the room beside the trigger (Radix measures it) */\n max-width: var(--radix-popper-available-width, none);\n max-height: var(--radix-popper-available-height, 70vh);\n overflow: auto;\n border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n color: var(--pui-ink);\n transform-origin: var(--radix-popper-transform-origin, var(--radix-dropdown-menu-content-transform-origin, center));\n outline: none;\n }\n .surface[data-state=\"open\"],\n .surface[data-state=\"delayed-open\"],\n .surface[data-state=\"instant-open\"] {\n animation: pop-in var(--pui-motion-in) var(--pui-ease-default);\n }\n .surface[data-state=\"closed\"] {\n animation: pop-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n\n /* The source morph (research/morphing-interfaces-2026-10-04, M3): a layer placed against a trigger does not fade in\n beside it, it opens out of it. It starts as the trigger's own box (Radix gives its size and the side and alignment\n it was placed on), offset back onto the trigger, and grows: the side nearest the trigger is there at once, the\n sides across follow, the far side arrives last (~200 ms), so the rows by the trigger are readable within the\n ruled 90 ms while the outline settles. Content fades in over those 90 ms. It closes back into the trigger in the\n ruled 180 ms. The clip ends 48px outside the box so the layer's shadow is never cut. Reduced motion: instant. */\n .surface[data-side] {\n --_aw: var(--radix-popper-anchor-width, 0px);\n --_ah: var(--radix-popper-anchor-height, 0px);\n --_gap: 6px;\n --from-t: -48px;\n --from-r: -48px;\n --from-b: -48px;\n --from-l: -48px;\n --from-x: 0px;\n --from-y: 0px;\n --d-near: calc(var(--pui-duration-standard) * 0.55);\n --d-cross: calc(var(--pui-duration-standard) * 0.85);\n --d-far: var(--pui-duration-standard);\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-overlay-radius, var(--pui-radius-card))\n );\n translate: var(--ci-x) var(--ci-y);\n }\n .surface[data-side=\"bottom\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n --from-y: calc(-1 * (var(--_ah) + var(--_gap)));\n --d-t: var(--d-near);\n --d-b: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"top\"] {\n --from-b: 0px;\n --from-t: calc(100% - var(--_ah));\n --from-y: calc(var(--_ah) + var(--_gap));\n --d-b: var(--d-near);\n --d-t: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"right\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n --from-x: calc(-1 * (var(--_aw) + var(--_gap)));\n --d-l: var(--d-near);\n --d-r: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n .surface[data-side=\"left\"] {\n --from-r: 0px;\n --from-l: calc(100% - var(--_aw));\n --from-x: calc(var(--_aw) + var(--_gap));\n --d-r: var(--d-near);\n --d-l: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n /* alignment along the trigger: which part of the layer the trigger sits over */\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"] {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"]:dir(rtl) {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"]:dir(rtl) {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"center\"] {\n --from-l: calc((100% - var(--_aw)) / 2);\n --from-r: calc((100% - var(--_aw)) / 2);\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"start\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"end\"] {\n --from-t: calc(100% - var(--_ah));\n --from-b: 0px;\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"center\"] {\n --from-t: calc((100% - var(--_ah)) / 2);\n --from-b: calc((100% - var(--_ah)) / 2);\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) {\n animation:\n grow-t var(--d-t) var(--pui-ease-out-strong),\n grow-r var(--d-r) var(--pui-ease-out-strong),\n grow-b var(--d-b) var(--pui-ease-out-strong),\n grow-l var(--d-l) var(--pui-ease-out-strong),\n grow-xy var(--d-cross) var(--pui-ease-out-strong),\n settling var(--d-far) step-end;\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) > * {\n animation: content-in var(--pui-motion-in) var(--pui-ease-default) both;\n }\n /* one duration for every part of the exit: the layer unmounts when the first of them ends */\n .surface[data-side][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .surface[data-side][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n @keyframes grow-t {\n from {\n --ci-t: var(--from-t);\n }\n }\n @keyframes grow-r {\n from {\n --ci-r: var(--from-r);\n }\n }\n @keyframes grow-b {\n from {\n --ci-b: var(--from-b);\n }\n }\n @keyframes grow-l {\n from {\n --ci-l: var(--from-l);\n }\n }\n @keyframes grow-xy {\n from {\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n }\n }\n /* it starts over its own trigger: until it has grown, the press that opened it must not land on a row */\n @keyframes settling {\n 0%,\n 100% {\n pointer-events: none;\n }\n }\n @keyframes shrink {\n to {\n --ci-t: var(--from-t);\n --ci-r: var(--from-r);\n --ci-b: var(--from-b);\n --ci-l: var(--from-l);\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n opacity: 0;\n }\n }\n @keyframes content-in {\n from {\n opacity: 0;\n }\n }\n @keyframes content-out {\n to {\n opacity: 0;\n }\n }\n .padded {\n padding: var(--pui-pad-popover);\n }\n .menu {\n padding: var(--pui-space-1);\n }\n @keyframes pop-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes pop-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n\n /* rows (and the gliding plate) nest in the list: its radius minus its padding, never rounder than a chip; on the\n row itself, so any list that uses .item gets it */\n .item,\n .glide {\n --_item-radius: min(\n var(--pui-radius-chip),\n calc(var(--pui-overlay-radius, var(--pui-radius-card)) - var(--pui-space-1))\n );\n }\n\n /* menu rows: shared by dropdown, context menu, menubar, select, combobox lists */\n .item {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--pui-control-height-sm);\n padding: 0 var(--pui-space-2);\n /* nested in the list: the overlay's radius minus its padding, never rounder than a chip */\n border-radius: var(--_item-radius);\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: default;\n user-select: none;\n outline: none;\n }\n /* on a touch screen a row is a finger's target: the touch height (44px) from the tokens; a mouse keeps the dense row */\n @media (pointer: coarse) {\n .item {\n min-height: var(--pui-control-height-touch);\n }\n }\n /* a destructive row speaks in the danger ink only while it can be used: disabled wins (muted ink, no alarm for an\n action that cannot happen) */\n .item[data-tone=\"danger\"]:not([data-disabled]) {\n color: var(--pui-red);\n }\n .item[data-disabled] {\n color: var(--pui-ink-3);\n pointer-events: none;\n }\n .item :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .item[data-tone=\"danger\"]:not([data-disabled]) :where(svg) {\n color: currentColor;\n }\n .item[data-highlighted]:not([data-glide]) {\n background: var(--pui-hover-2);\n }\n /* a press is acknowledged at once, over the plate, before the menu closes or the row toggles */\n .item:active:not([data-disabled]) {\n background: var(--pui-hover);\n }\n .shortcut {\n margin-inline-start: auto;\n padding-inline-start: var(--pui-space-4);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n letter-spacing: var(--pui-tracking-mono-caps);\n }\n .heading {\n padding: var(--pui-space-1-5) var(--pui-space-2) var(--pui-space-1);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n font-weight: var(--pui-weight-medium);\n }\n .separator {\n height: 1px;\n margin: var(--pui-space-1) calc(var(--pui-space-1) * -1);\n background: var(--pui-line);\n }\n .check {\n margin-inline-start: auto;\n color: var(--pui-accent) !important;\n }\n /* a check arrives in its row as the value changes (at once): it grows from the middle over the arrival */\n .check :where(svg) {\n animation: check-in var(--pui-motion-in) var(--pui-ease-out-strong);\n }\n @keyframes check-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.5 * var(--pui-motion-travel, 1));\n }\n }\n /* the gliding highlight: one plate moves between rows for the pointer and the arrow keys; it appears in place */\n .glide {\n position: absolute;\n z-index: 0;\n inset-inline: var(--pui-space-1);\n top: 0;\n border-radius: var(--_item-radius);\n background: var(--pui-hover-2);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--pui-motion-out) var(--pui-ease-default);\n }\n .glide[data-on] {\n opacity: 1;\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n .glide[data-jump] {\n transition: opacity 0ms;\n }\n /* a plate over a row or grid of cells takes each cell's size and travels both ways */\n .glide[data-axis=\"xy\"] {\n inset-inline: auto;\n left: 0;\n }\n .glide[data-axis=\"xy\"][data-on] {\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n width var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n\n /* a layer that has begun to close is out of the way at once: for the length of its exit it takes no pointer, so a tap\n meant for the page behind (the next row, the button the panel covered) lands there, never on the leaving ghost.\n Focus has already gone back (Radix) and it unmounts when the exit ends. */\n .scrim[data-state=\"closed\"],\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n pointer-events: none;\n }\n\n /* modal layers */\n .scrim {\n position: fixed;\n inset: 0;\n z-index: var(--pui-z-overlay);\n background: var(--pui-scrim);\n backdrop-filter: blur(var(--pui-blur-overlay));\n }\n .scrim[data-state=\"open\"] {\n animation: fade-in var(--pui-fade-in) var(--pui-ease-default);\n }\n .scrim[data-state=\"closed\"] {\n animation: fade-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n }\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes fade-out {\n to {\n opacity: 0;\n }\n }\n .dialog {\n /* the content answers to the dialog's own width (a footer's buttons share the row on a phone) */\n container-type: inline-size;\n position: fixed;\n z-index: var(--pui-z-modal);\n left: 50%;\n top: 50%;\n width: min(calc(100vw - var(--pui-space-8)), var(--pui-dialog-width, var(--_dialog-width, 440px)));\n max-height: calc(100dvh - var(--pui-space-12));\n overflow: hidden;\n translate: -50% -50%;\n border-radius: var(--pui-dialog-radius, var(--pui-radius-window));\n color: var(--pui-ink);\n outline: none;\n /* a size chosen while open (a step that needs more room) eases the width in place, centred */\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n .dialog[data-state=\"open\"] {\n animation: dialog-in var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .dialog[data-state=\"closed\"] {\n animation: dialog-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n /* A dialog opened from something (use-open-from.ts) grows out of it: it starts as the opener's box, offset back onto\n it, and grows to its own place over the considered duration while its content fades in; it closes back into the\n opener in the ruled 180 ms. Shares the source morph's moving parts and guard with .surface. */\n .dialog[data-open-from] {\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-dialog-radius, var(--pui-radius-window))\n );\n transform: translate(var(--ci-x), var(--ci-y));\n }\n .dialog[data-open-from][data-state=\"open\"] {\n animation:\n grow-t var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-r var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-b var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-l var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-xy calc(var(--pui-duration-considered) * 0.9) var(--pui-ease-out-strong),\n settling var(--pui-duration-considered) step-end;\n }\n .dialog[data-open-from][data-state=\"open\"] > * {\n animation: content-in var(--pui-duration-standard) var(--pui-ease-default) calc(var(--pui-duration-standard) * 0.35)\n both;\n }\n .dialog[data-open-from][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .dialog[data-open-from][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n /* A sheet: a panel from an edge. It slides in from its edge over the considered duration on the drawer curve and\n goes back out to that edge in the ruled departure (a layer closes back into where it came from). The edge is\n logical: an end (\"right\") sheet comes from the left in a right-to-left page. Its content answers to its width. */\n .sheet {\n --_sx: 0px;\n --_sy: 0px;\n container-type: inline-size;\n /* where a finger has swiped it toward its edge (sheet.tsx); it settles back over the departure */\n translate: var(--_swipe, 0px) 0;\n }\n /* a side panel leaves sideways pans to the swipe and keeps vertical scrolling native, in its body too */\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]),\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) [data-slot=\"sheet-body\"] {\n touch-action: pan-y;\n }\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) {\n transition:\n var(--m-transition),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n .sheet[data-swiping] {\n transition: none;\n }\n .sheet[data-side=\"right\"] {\n --_sx: 100%;\n }\n .sheet[data-side=\"left\"] {\n --_sx: -100%;\n }\n .sheet[data-side=\"right\"]:dir(rtl) {\n --_sx: -100%;\n }\n .sheet[data-side=\"left\"]:dir(rtl) {\n --_sx: 100%;\n }\n .sheet[data-side=\"top\"] {\n --_sy: -100%;\n }\n .sheet[data-side=\"bottom\"] {\n --_sy: 100%;\n }\n .sheet[data-state=\"open\"] {\n animation: sheet-in var(--pui-duration-considered) var(--pui-ease-drawer) both;\n }\n .sheet[data-state=\"closed\"] {\n animation: sheet-out var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n @keyframes sheet-in {\n from {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes sheet-out {\n to {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n }\n @keyframes dialog-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n}\n\n/* Reduced motion: surfaces and dialogs fade without scaling or growing, over the fade tokens (restrained under reduced,\n 1ms under none; APPEARANCE A06). */\n@media (prefers-reduced-motion: reduce) {\n .surface,\n .dialog,\n .sheet {\n animation-name: fade-in !important;\n animation-duration: var(--pui-fade-in) !important;\n }\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n animation-name: fade-out !important;\n animation-duration: var(--pui-fade-out) !important;\n }\n}\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .surface,\n :global(.pui[data-motion=\"none\"]) .surface,\n :global(.pui[data-motion=\"reduced\"]) .dialog,\n :global(.pui[data-motion=\"none\"]) .dialog,\n :global(.pui[data-motion=\"reduced\"]) .sheet,\n :global(.pui[data-motion=\"none\"]) .sheet {\n animation-name: fade-in;\n animation-duration: var(--pui-fade-in);\n }\n :global(.pui[data-motion=\"reduced\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .sheet[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .sheet[data-state=\"closed\"] {\n animation-name: fade-out;\n animation-duration: var(--pui-fade-out);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.surface {\n composes: m-overlay from global;\n}\n.dialog {\n composes: m-overlay from global;\n}\n"},{"path":"beamline/components/_shared/use-return-focus.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/use-return-focus.ts","content":"\"use client\";\n\nimport { useRef } from \"react\";\nimport { useAppearanceRoot } from \"../../runtime/appearance\";\n\n/**\n * Where focus goes when a modal layer closes. Radix returns it to its own Trigger; a layer opened another way (a\n * controlled `open`, a menu item, a shortcut) would drop focus on . Spread the result on the Radix content: it\n * remembers what had focus as the layer opened and returns there, unless the caller's own handler prevents it.\n * If that opener is removed, return to its surviving owning region, or the managed scope's visual root.\n */\nexport function useReturnFocus({\n onOpenAutoFocus,\n onCloseAutoFocus,\n}: { onOpenAutoFocus?: (event: Event) => void; onCloseAutoFocus?: (event: Event) => void } = {}) {\n track();\n const before = useRef(null);\n const regions = useRef([]);\n const scope = useAppearanceRoot();\n return {\n onOpenAutoFocus: (event: Event) => {\n before.current = outside(document.activeElement, event.currentTarget as Element | null);\n const owners: HTMLElement[] = [];\n let ancestor = before.current;\n while (ancestor) {\n if (ancestor !== document.body && ancestor.matches(\"[data-return-region]\")) owners.push(ancestor);\n ancestor = ancestor.parentElement;\n }\n const root = scope ?? before.current?.closest(\".pui\");\n if (root && root !== document.body && !owners.includes(root)) owners.push(root);\n regions.current = owners;\n onOpenAutoFocus?.(event);\n },\n /** `layer` is the layer's own element, for a caller that runs this itself instead of Radix. */\n onCloseAutoFocus: (event: Event, layer: Element | null = event.currentTarget as Element | null) => {\n onCloseAutoFocus?.(event);\n if (event.defaultPrevented) return;\n // a layer whose field took focus as it mounted (autoFocus) never hears that it opened (Radix skips the mount\n // focus): the opener is then the last element focused outside it\n const el =\n before.current && before.current.isConnected && !layer?.contains?.(before.current)\n ? before.current\n : outside(null, layer);\n if (el && el !== document.body && el.isConnected) {\n event.preventDefault();\n el.focus({ preventScroll: true });\n return;\n }\n const region = regions.current.find((owner) => owner.isConnected);\n if (region) {\n event.preventDefault();\n // Regions need not be tab stops, but they must receive programmatic return focus.\n if (!region.hasAttribute(\"tabindex\")) region.tabIndex = -1;\n region.focus({ preventScroll: true });\n }\n },\n };\n}\n\n/** The last elements that took focus or were pressed, newest last, noted as it happened (capture phase, once per\n * page). Presses count too: a click on a button does not focus it everywhere (Safari), and the control that was\n * pressed is the opener a layer should give focus back to. */\nconst trail: Element[] = [];\nlet tracking = false;\nconst PRESSABLE =\n \"button, a[href], [role=button], [role=menuitem], [role=option], [role=tab], [tabindex], input, select, textarea\";\nfunction note(el: Element | null) {\n if (!el || el === document.body) return;\n if (trail.at(-1) === el) return;\n trail.push(el);\n if (trail.length > 24) trail.shift();\n}\nfunction track() {\n if (tracking || typeof document === \"undefined\") return;\n tracking = true;\n // A lazily mounted layer may be the first focus consumer on the page. Remember its opener before child autofocus.\n note(document.activeElement);\n document.addEventListener(\"focusin\", (event) => note(event.target as Element | null), true);\n document.addEventListener(\n \"pointerdown\",\n (event) => note((event.target as Element | null)?.closest?.(PRESSABLE) ?? null),\n true,\n );\n}\n\n/** `active` unless it is inside `layer`; then the most recent element focused outside the layer that still exists. */\nfunction outside(active: Element | null, layer: Element | null): HTMLElement | null {\n if (active && active !== document.body && !layer?.contains?.(active)) return active as HTMLElement;\n for (let i = trail.length - 1; i >= 0; i--) {\n const el = trail[i];\n if (el.isConnected && el !== document.body && !layer?.contains?.(el)) return el as HTMLElement;\n }\n return null;\n}\n"},{"path":"beamline/components/avatar/avatar.module.css","type":"registry:file","target":"src/ui/beamline/components/avatar/avatar.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Avatar: a face (initials on the name's hue, or a photo) and an optional presence mark. The mark is cut out of the\n face with a mask, so the gap around it is truly empty and reads on any ground: a card, a row hover, glass, a photo. */\n .root {\n --_s: 36px;\n --_d: 10px;\n --_g: 2px;\n position: relative;\n display: inline-grid;\n flex: none;\n width: var(--_s);\n height: var(--_s);\n place-items: center;\n /* initials scale with the face (geometry), never below 80% of the smallest type step */\n font-size: max(calc(var(--pui-text-2xs) * 0.8), calc(var(--_s) * 0.36));\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n user-select: none;\n }\n .xs {\n --_s: 20px;\n --_d: 6px;\n --_g: 1.5px;\n }\n .sm {\n --_s: 28px;\n --_d: 8px;\n }\n .lg {\n --_s: 44px;\n --_d: 12px;\n }\n .xl {\n --_s: 56px;\n --_d: 14px;\n --_g: 2.5px;\n }\n .face {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n overflow: hidden;\n border-radius: 50%;\n background: color-mix(in oklab, var(--pui-avatar-hue) 24%, var(--pui-surface-2));\n color: color-mix(in oklab, var(--pui-avatar-hue) 55%, var(--pui-ink));\n }\n /* the initials keep their tint but mix it into black or white, whichever the face's fill reads better against (its\n luminance at WCAG's 0.179 crossover): mixed into the scope's ink they fell to 3.5–4.5 on mid fills, a brand-toned\n sidebar's above all; this keeps every face at 5.5:1 or more in every look */\n @supports (color: color(from red xyz-d65 x y z)) {\n .face {\n --_ink: color(\n from color-mix(in oklab, var(--pui-avatar-hue) 24%, var(--pui-surface-2)) xyz-d65\n calc(0.9505 * round(0.679 - y)) round(0.679 - y) calc(1.089 * round(0.679 - y))\n );\n color: color-mix(in oklab, var(--pui-avatar-hue) 55%, var(--_ink));\n }\n }\n /* a company tile takes the look's card corner, never more than a third of the face, so it stays a square at xs */\n .root[data-shape=\"square\"] .face {\n /* nesting input (O1 §14.1, as Button): a parent that holds this near its rounded corner sets --pui-nest-radius and\n --pui-nest-inset; the corner becomes radius − inset, clamped between a floor (chip) and the part's own role radius (or --pui-nest-ceiling: a pill container sets it to the pill radius). Unset, the declaration is invalid and the own corner\n applies. --pui-avatar-radius wins over both. */\n --_avatar-nest: clamp(\n var(--pui-radius-chip),\n calc(var(--pui-nest-radius) - var(--pui-nest-inset, 0px)),\n var(--pui-nest-ceiling, min(var(--pui-radius-card), calc(var(--_s) / 3)))\n );\n --_r: var(--pui-avatar-radius, var(--_avatar-nest, min(var(--pui-radius-card), calc(var(--_s) / 3))));\n border-radius: var(--_r);\n }\n .photo {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity var(--pui-fade-in) var(--pui-ease-default);\n }\n /* still on its way: the initials hold the place, and the photo fades in over them when it lands */\n .photo[data-pending] {\n opacity: 0;\n }\n /* The mark sits on the bottom inline-end corner; the face loses a disc one gap wider than the mark under it. */\n .root[data-status] .face {\n --_at: calc(var(--_d) / 2 - 1px);\n mask: radial-gradient(\n circle at calc(100% - var(--_at)) calc(100% - var(--_at)),\n transparent calc(var(--_d) / 2 + var(--_g)),\n black calc(var(--_d) / 2 + var(--_g) + 0.5px)\n );\n }\n .root[data-status]:dir(rtl) .face {\n mask: radial-gradient(\n circle at var(--_at) calc(100% - var(--_at)),\n transparent calc(var(--_d) / 2 + var(--_g)),\n black calc(var(--_d) / 2 + var(--_g) + 0.5px)\n );\n }\n .mark {\n position: absolute;\n inset-inline-end: -1px;\n bottom: -1px;\n }\n /* a presence that changed settles into its new mark: the colour and shape arrive at once, the mark grows from a\n little smaller (reduced motion keeps only the fade) */\n .mark[data-changed] {\n animation: presence-settle var(--pui-duration-feedback) var(--pui-ease-standard) both;\n }\n\n /* Presence: colour and shape together, so it reads in greyscale (DESIGN-LANGUAGE: colour is never the only signal).\n online a full disc · away a crescent · busy a disc with a bar through it · offline a hollow ring. */\n .presence {\n --_d: 10px;\n display: inline-block;\n flex: none;\n width: var(--_d);\n height: var(--_d);\n border-radius: 50%;\n background: var(--_c);\n }\n .presence[data-size=\"xs\"] {\n --_d: 6px;\n }\n .presence[data-size=\"sm\"] {\n --_d: 8px;\n }\n .presence[data-size=\"lg\"] {\n --_d: 12px;\n }\n .presence[data-size=\"xl\"] {\n --_d: 14px;\n }\n .presence[data-status=\"online\"] {\n --_c: var(--pui-green);\n }\n .presence[data-status=\"away\"] {\n --_c: var(--pui-orange);\n mask: radial-gradient(circle at 18% 18%, transparent calc(var(--_d) * 0.36), black calc(var(--_d) * 0.36 + 0.5px));\n }\n .presence[data-status=\"away\"]:dir(rtl) {\n mask: radial-gradient(circle at 82% 18%, transparent calc(var(--_d) * 0.36), black calc(var(--_d) * 0.36 + 0.5px));\n }\n .presence[data-status=\"busy\"] {\n --_c: var(--pui-red);\n mask:\n linear-gradient(black 0 0) center / 56% max(1.5px, 22%) no-repeat,\n linear-gradient(black 0 0);\n mask-composite: exclude;\n }\n .presence[data-status=\"offline\"] {\n --_c: var(--pui-ink-3);\n mask: radial-gradient(circle, transparent calc(var(--_d) * 0.24), black calc(var(--_d) * 0.24 + 0.5px));\n }\n}\n@keyframes presence-settle {\n from {\n opacity: 0.4;\n scale: calc(1 - 0.45 * var(--pui-motion-travel, 1));\n }\n}\n"},{"path":"beamline/components/avatar/avatar.tsx","type":"registry:file","target":"src/ui/beamline/components/avatar/avatar.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { AvatarDefaults } from \"./defaults\";\nexport type { AvatarDefaults } from \"./defaults\";\n\nimport { useCallback, useState, type CSSProperties, type HTMLAttributes, type Ref } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./avatar.module.css\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type PresenceStatus = \"online\" | \"away\" | \"busy\" | \"offline\";\n\nconst SIZE: Record = {\n xs: styles.xs,\n sm: styles.sm,\n md: undefined,\n lg: styles.lg,\n xl: styles.xl,\n};\n\n/** A person's (or account's) series hue, the same everywhere their name appears. */\nexport function hueOf(name: string) {\n let h = 0;\n for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) | 0;\n return `var(--pui-series-${(Math.abs(h) % 8) + 1})`;\n}\nexport const initialsOf = (name: string) =>\n name\n .trim()\n .split(/\\s+/)\n .filter((w) => /\\p{L}|\\d/u.test(w[0] ?? \"\"))\n .slice(0, 2)\n .map((w) => w[0].toUpperCase())\n .join(\"\") || \"?\";\n\n/** A presence mark for avatars and lists. Colour and shape together: online a disc, away a crescent, busy a disc with\n * a bar, offline a hollow ring, so the status survives greyscale and colour-blindness. */\nexport function PresenceDot({\n status,\n size = \"md\",\n className,\n style,\n ref,\n ...props\n}: {\n status: PresenceStatus;\n size?: AvatarSize;\n className?: string;\n style?: CSSProperties;\n ref?: Ref;\n} & Omit, \"children\">) {\n const i18n = useMessages(\"avatar\", englishMessages);\n return (\n \n );\n}\n\nexport interface AvatarClassNames {\n root?: string;\n face?: string;\n photo?: string;\n presence?: string;\n}\n\nexport interface AvatarProps extends HTMLAttributes {\n name: string;\n /** A photo; initials show while it loads and if it fails. */\n src?: string;\n size?: AvatarSize;\n /** circle for people, square for companies and workspaces. */\n shape?: \"circle\" | \"square\";\n status?: PresenceStatus;\n ref?: Ref;\n classNames?: AvatarClassNames;\n}\n\n/** A person or account in a small space: a photo, or initials on the colour their name always gets. A photo still on\n * its way fades in over the initials instead of popping; a presence that changes settles into its new mark. */\nexport function Avatar({\n name,\n src,\n size: sizeProp,\n shape = \"circle\",\n status,\n className,\n classNames,\n style,\n ref,\n ...props\n}: AvatarProps) {\n const i18n = useMessages(\"avatar\", englishMessages);\n const scopeDefaults = useComponentDefaults(\"avatar\", [\"size\"]);\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n\n const [failed, setFailed] = useState(null);\n const photo = src && failed !== src;\n // a photo that is not decoded yet when it mounts waits unseen and fades in over the initials when it lands; one that\n // is already there (cached, or loaded before the page hydrated) shows at once, so a server render never hides it\n const [pending, setPending] = useState(null);\n const watch = useCallback((img: HTMLImageElement | null) => {\n if (!img) return;\n if (!img.complete) setPending(img.getAttribute(\"src\"));\n // A cached/decode failure can finish before React attaches onError during hydration.\n else if (img.naturalWidth === 0) setFailed(img.getAttribute(\"src\"));\n }, []);\n // a presence that changes (online → away) settles into its new mark; the first render does not play it\n const [seen, setSeen] = useState(status);\n const [changes, setChanges] = useState(0);\n if (seen !== status) {\n setSeen(status);\n setChanges((n) => n + 1);\n }\n return (\n \n \n {initialsOf(name)}\n {photo && (\n setPending(null)}\n onError={() => setFailed(src)}\n className={cn(styles.photo, classNames?.photo)}\n />\n )}\n \n {status && (\n 0 || undefined}\n className={cn(styles.mark, classNames?.presence)}\n />\n )}\n \n );\n}\n\nexport default Avatar;\n"},{"path":"beamline/components/avatar/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/avatar/defaults.ts","content":"/** Pure allowed presentation defaults for Avatar; no component or runtime imports. */\nexport interface AvatarDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"xs\" | \"lg\" | \"xl\";\n}\n"},{"path":"beamline/components/avatar/messages.ts","type":"registry:file","target":"src/ui/beamline/components/avatar/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 online: \"Online\",\n away: \"Away\",\n busy: \"Do not disturb\",\n offline: \"Offline\",\n presence: \"{name}, {status}\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/bottom-sheet/bottom-sheet.tsx","type":"registry:file","target":"src/ui/beamline/components/bottom-sheet/bottom-sheet.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type Ref, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { animate, motion, useMotionValue, useTransform } from \"motion/react\";\nimport * as RadixDialog from \"@radix-ui/react-dialog\";\nimport { Button } from \"../button/button\";\nimport { useReturnFocus } from \"../_shared/use-return-focus\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useDrag } from \"../../hooks/use-drag\";\nimport { useResolvedAppearance } from \"../../hooks/use-resolved-appearance\";\nimport { motionEase } from \"../../lib/motion-tokens\";\nimport { semanticMotion } from \"../../lib/motion-source\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport overlay from \"../_shared/overlay.module.css\";\n\nexport interface BottomSheetProps {\n /** An element that opens it (uncontrolled use). */\n trigger?: ReactNode;\n /** Controlled open state; omit to use defaultOpen. */\n open?: boolean;\n /** Initial open state when uncontrolled. Defaults to false. */\n defaultOpen?: boolean;\n /** Reports open state after a change; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Heading shown above the content. Required. */\n title: string;\n /** Supporting text beneath the label or heading. Defaults to no supporting text. */\n description?: string;\n /** Resting heights as fractions of the screen, lowest first. Default [0.45, 0.92]. */\n detents?: number[];\n /** Which resting height it opens at. Default 0. */\n initialDetent?: number;\n /** Reports sheet resting height after a change; no callback by default. */\n onDetentChange?: (index: number) => void;\n /** Accessible text for the close control. Defaults to \"Close\". */\n closeLabel?: string;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: Partial<\n Record<\"root\" | \"backdrop\" | \"header\" | \"handle\" | \"title\" | \"description\" | \"close\" | \"body\", string>\n >;\n /** Content rendered inside the component. Defaults to no children. */\n children?: ReactNode;\n}\n\n/**\n * A phone panel that rests at a peek and follows the finger to full height. Drag the handle (or the header) between\n * resting heights; a flick down from the lowest closes it. The handle is a button: Enter cycles heights, ↑ ↓ move.\n * Escape, the scrim and Close also close it: focus goes back at once and the sheet slides away after.\n */\nexport function BottomSheet({\n trigger,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n title,\n description,\n detents = [0.45, 0.92],\n initialDetent = 0,\n onDetentChange,\n closeLabel: closeLabelProp,\n className,\n classNames,\n style,\n ref,\n children,\n}: BottomSheetProps) {\n const i18n = useMessages(\"bottom-sheet\", englishMessages);\n const closeLabel = closeLabelProp === undefined ? i18n(\"close\") : closeLabelProp;\n\n const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);\n const container = usePortalContainer();\n // the panel outlives `open`: focus returns and the trap lets go as `open` turns false, the panel leaves after;\n // opening again starts a fresh panel\n const [shown, setShown] = useState(open);\n const [round, setRound] = useState(0);\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) {\n setShown(true);\n setRound((r) => r + 1);\n }\n }\n return (\n \n {trigger && {trigger}}\n {container !== null && shown && (\n \n setOpen(false)}\n onGone={() => setShown(false)}\n >\n {children}\n \n \n )}\n \n );\n}\n\nfunction Panel({\n open,\n title,\n description,\n detents,\n initialDetent,\n onDetentChange,\n closeLabel,\n className,\n classNames,\n style,\n ref,\n onClose,\n onGone,\n children,\n}: Required> &\n Pick<\n BottomSheetProps,\n \"description\" | \"onDetentChange\" | \"className\" | \"classNames\" | \"style\" | \"ref\" | \"children\"\n > & { open: boolean; onClose: () => void; onGone: () => void }) {\n const i18n = useMessages(\"bottom-sheet\", englishMessages);\n\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n const appearance = useResolvedAppearance(host, { times: [\"duration-considered\"], easings: [\"ease-drawer\"] });\n const entered = useRef(false);\n const [vh, setVh] = useState(() => (typeof window === \"undefined\" ? 800 : window.innerHeight));\n const maxH = Math.round(vh * detents[detents.length - 1]);\n const yOf = (i: number) => maxH - Math.round(vh * detents[i]);\n const [detent, setDetent] = useState(Math.min(initialDetent, detents.length - 1));\n const y = useMotionValue(maxH);\n const scrim = useTransform(y, [yOf(0), maxH], [1, 0]);\n const drag = useRef<{ from: number } | null>(null);\n // held: the handle answers the finger at once (wider and brighter) for as long as the sheet is held\n const [held, setHeld] = useState(false);\n const header = useRef(null);\n // focus goes back as the sheet closes (below), so the unmount after it leaves must not move focus again\n const released = useRef(false);\n const focus = useReturnFocus({\n onCloseAutoFocus: (event) => {\n if (released.current) event.preventDefault();\n },\n });\n // closed from inside (Escape, Close, the scrim, a flick): it slides away; closed by its owner: it goes at once\n const [dismissed, setDismissed] = useState(false);\n const away = !open && !dismissed;\n const [headerH, setHeaderH] = useState(76);\n useLayoutEffect(() => {\n const element = header.current;\n if (!element) return;\n const measure = () => setHeaderH(element.offsetHeight);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(element);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const on = () => setVh(window.innerHeight);\n window.addEventListener(\"resize\", on);\n return () => window.removeEventListener(\"resize\", on);\n }, []);\n // the glide in flight, so a hand that grabs the sheet mid-glide takes it where it is\n const gliding = useRef | null>(null);\n const go = (target: number, after?: () => void) => {\n gliding.current?.stop();\n const run = animate(y, target, {\n duration: appearance.reducedMotion\n ? 0\n : (appearance.times[\"duration-considered\"] ?? semanticMotion.duration.considered),\n // the drawer curve the scope resolves; before it has, the system's entrance curve\n ease: motionEase(appearance.easings[\"ease-drawer\"], semanticMotion.ease.enter),\n });\n gliding.current = run;\n if (after) run.then(after);\n };\n const settle = (i: number) => {\n setDetent(i);\n onDetentChange?.(i);\n go(yOf(i));\n };\n const close = () => {\n setDismissed(true);\n onClose();\n };\n useLayoutEffect(() => {\n if (!appearance.ready || entered.current) return;\n entered.current = true;\n y.set(maxH);\n go(yOf(detent));\n }, [appearance.ready]); // eslint-disable-line react-hooks/exhaustive-deps -- slide in once\n useEffect(() => {\n if (!drag.current && open) y.set(yOf(detent));\n }, [vh]); // eslint-disable-line react-hooks/exhaustive-deps -- keep the resting height on rotation\n // `open` turned false and the trap has let go: focus returns now (not after the slide, never through ), then\n // the panel leaves; an effect, so the trap's own cleanup has already run\n useEffect(() => {\n if (open) return;\n const active = document.activeElement;\n if (!active || active === document.body || host.current?.contains(active))\n focus.onCloseAutoFocus(new Event(\"close\", { cancelable: true }), host.current);\n released.current = true;\n // a leaving panel takes no focus back: not by Tab, not by a child's autofocus that lands a frame late\n if (host.current) host.current.inert = true;\n if (!dismissed) {\n onGone();\n return;\n }\n entered.current = true;\n let live = true;\n go(maxH, () => live && onGone());\n return () => {\n live = false;\n };\n }, [open]); // eslint-disable-line react-hooks/exhaustive-deps -- on close only\n\n // the header drags the sheet through the shared drag (BUILDING §7): it follows the hand, resisting past the top; a\n // release projects 180 ms of the throw and closes past half the way down (or on a fast flick from the lowest detent),\n // else settles on the nearest detent; Escape mid-drag puts the sheet back on its detent and keeps it open\n useDrag(\n header,\n {\n onPress: (_, e) => {\n if ((e.target as HTMLElement).closest(\"button:not([data-handle]), a, input, textarea, select\")) return false;\n // a sheet still settling stops under the hand and is dragged from where it is\n gliding.current?.stop();\n drag.current = { from: y.get() };\n setHeld(true);\n },\n onMove: (p) => {\n const d = drag.current;\n if (!d) return;\n const next = d.from + p.dy;\n y.set(next < 0 ? next * 0.2 : next); // resist past the top\n },\n onEnd: (p) => {\n drag.current = null;\n setHeld(false);\n const v = p.vy / 1000; // px per ms\n const projected = y.get() + v * 180;\n if (projected > yOf(0) + (maxH - yOf(0)) * 0.5 || (v > 0.9 && detentAt(y.get()) === 0)) {\n close();\n return;\n }\n settle(detentAt(projected));\n },\n onTap: () => {\n const d = drag.current;\n drag.current = null;\n setHeld(false);\n if (d && Math.abs(y.get() - yOf(detent)) > 0.5) settle(detent);\n },\n onCancel: () => {\n const d = drag.current;\n drag.current = null;\n setHeld(false);\n if (d) settle(detentAt(d.from));\n },\n // a press the page took before it became a drag (a sideways move scrolls instead): let the handle go, and put a\n // sheet stopped mid-glide on its detent\n onAbandon: () => {\n const d = drag.current;\n drag.current = null;\n setHeld(false);\n if (d && Math.abs(y.get() - yOf(detent)) > 0.5) settle(detent);\n },\n },\n { axis: \"y\" },\n );\n const detentAt = (pos: number) =>\n detents.reduce((best, _, i) => (Math.abs(yOf(i) - pos) < Math.abs(yOf(best) - pos) ? i : best), 0);\n\n return (\n <>\n \n {\n e.preventDefault();\n close();\n }}\n />\n \n {\n e.preventDefault();\n close();\n }}\n onPointerDownOutside={(e) => e.preventDefault()}\n {...focus}\n >\n {\n const last = detents.length - 1;\n if (\n detent < last &&\n !drag.current &&\n (e.target as HTMLElement).getBoundingClientRect().bottom - e.currentTarget.getBoundingClientRect().top >\n Math.round(vh * detents[detent])\n )\n settle(last);\n }}\n className={cn(\n \"m-overlay fixed inset-x-0 bottom-0 z-[var(--pui-z-modal)] mx-auto flex max-w-[640px] flex-col rounded-t-[var(--pui-radius-window)] text-ink outline-none data-[state=closed]:pointer-events-none\",\n // closed by its owner it is gone from the first frame, still focusable until focus has gone back\n away && \"opacity-0\",\n classNames?.root,\n className,\n )}\n >\n \n \n
\n
\n \n {title}\n \n {description ? (\n \n {description}\n \n ) : (\n {title}\n )}\n
\n \n \n \n
\n \n \n {children}\n \n \n \n \n );\n}\n\nexport default BottomSheet;\n"},{"path":"beamline/components/bottom-sheet/messages.ts","type":"registry:file","target":"src/ui/beamline/components/bottom-sheet/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 collapseSheet: \"Collapse sheet\",\n expandSheet: \"Expand sheet\",\n close: \"Close\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/button/button-variants.ts","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts","content":"import { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n/** sm 32 · md 36 · lg 40 · touch 44 (a bottom action bar on a phone). */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"touch\";\n/** Market side: buy fills with --pui-up, sell with --pui-down (a red-up market flips the two tokens, not the code). */\nexport type ButtonTone = \"up\" | \"down\";\n\n/** Which paint role paints each variant: filled variants are solids, the quiet ones keep their own light paint. */\nconst ROLE: Record = {\n primary: \"m-solid\",\n accent: \"m-solid\",\n secondary: \"m-control\",\n outline: undefined,\n ghost: undefined,\n danger: undefined,\n};\n\n/** A variant's paint without the button's layout, for a group that wears one button's look (SplitButton paints the\n * pair as one button and leaves its halves transparent). */\nexport function buttonPaint(variant: ButtonVariant = \"primary\", tone?: ButtonTone) {\n return cn(ROLE[variant], styles[variant], tone && styles[tone]);\n}\n\n/** The classes that make any element look like a Button, for parts that render their own element. */\nexport function buttonClassName({\n variant = \"primary\",\n size = \"md\",\n tone,\n className,\n}: { variant?: ButtonVariant; size?: ButtonSize; tone?: ButtonTone; className?: string } = {}) {\n return cn(styles.root, ROLE[variant], styles[variant], tone && styles[tone], styles[size], className);\n}\n"},{"path":"beamline/components/button/button.module.css","type":"registry:file","target":"src/ui/beamline/components/button/button.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Button. Every colour, size and duration is a token; a variant only sets the four local properties below. */\n .root {\n --_button-bg: transparent;\n --_button-bg-hover: var(--pui-hover);\n --_button-fg: var(--pui-ink);\n --_button-edge: none;\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n position: relative;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pui-space-1-5);\n flex-shrink: 0;\n height: var(--_button-height);\n min-width: var(--_button-height);\n /* never wider than its room: in a narrow card the label ends in an ellipsis instead of spilling (the full words\n stay the accessible name) */\n max-width: 100%;\n padding-inline: var(--_button-pad);\n border: 0;\n /* Nested context: inside a frame that sets --pui-nest-radius and --pui-nest-inset (and --pui-nest-ceiling for pills)\n the corner is the shared nested corner (.nest-corner, utilities.css: radius − inset, or the button's own radius\n where that would fall under the chip radius); elsewhere the control radius. --pui-button-radius wins over both. */\n border-radius: var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control)));\n color: var(--_button-fg);\n font-family: var(--pui-font-body);\n font-size: var(--pui-text-sm);\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n letter-spacing: var(--pui-tracking-body);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n /* frequency law: hover arrives at 0ms (below), leaves over the ruled departure; opacity and translate are listed\n so a button that waits for attention (.reveal) fades away like every reveal instead of vanishing */\n transition:\n var(--m-transition),\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-motion-out) var(--pui-ease-default),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n /* the quiet variants paint themselves; filled and secondary variants are painted by their look role (m-solid,\n m-control), which these zero-specificity rules can never override */\n :where(.root) {\n background: var(--_button-bg);\n box-shadow: var(--_button-edge);\n }\n :where(.root:hover:not(:disabled, [aria-disabled=\"true\"])) {\n background: var(--_button-bg-hover);\n }\n .root:hover:not(:disabled, [aria-disabled=\"true\"]) {\n transition-duration: 0ms;\n }\n /* the asChild form has no motion: a CSS press instead */\n .root:not(button):active {\n transform: scale(0.97);\n }\n .root:disabled,\n .root[aria-disabled=\"true\"]:not([data-loading]) {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .root[data-loading] {\n cursor: progress;\n }\n\n /* Icons: 16px unless the icon says otherwise (zero specificity, so size-5 or an inline size wins) */\n :where(.root) :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n }\n\n .sm {\n --_button-height: var(--pui-control-height-sm);\n --_button-pad: var(--pui-space-2-5);\n /* the base gap (--pui-space-1-5); 5px had no scale step, and 6px also lets the loader's negative margin cancel\n the gap exactly at every size */\n }\n .md {\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n }\n .lg {\n --_button-height: var(--pui-control-height-lg);\n --_button-pad: var(--pui-space-4);\n font-size: var(--pui-text-base);\n }\n /* a bottom action bar on a phone: the 44 px touch target (a platform minimum, not a spacing step, so it holds when\n the spacing parameter changes — O1 §14.2), the large label */\n .touch {\n --_button-height: calc(var(--pui-control-height-lg) + 0.25rem);\n --_button-pad: var(--pui-space-5);\n font-size: var(--pui-text-base);\n }\n .root[data-icon-only] {\n padding-inline: 0;\n width: var(--_button-height);\n }\n\n /* the main action: ink on the page, inverted per theme */\n .primary {\n --m-color: var(--pui-ink);\n --_button-fg: var(--pui-ink-inverse);\n }\n .secondary {\n --_button-fg: var(--pui-ink);\n }\n .outline {\n --_button-edge: inset 0 0 0 1px var(--pui-line-strong);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost {\n --_button-fg: var(--pui-ink-2);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost:hover:not(:disabled) {\n color: var(--pui-ink);\n }\n .danger {\n --_button-fg: var(--pui-red);\n --_button-edge: inset 0 0 0 1px color-mix(in oklab, var(--pui-red) 42%, transparent);\n --_button-bg-hover: var(--pui-red-tint);\n }\n .accent {\n --m-color: var(--pui-accent);\n --_button-fg: var(--pui-accent-foreground);\n }\n\n /* Market side. Declared after the variants so it wins: a filled variant takes the side's colour and its on-colour\n ink; a quiet variant keeps its paint and colours the label. */\n .up {\n --m-color: var(--pui-up);\n --_button-fg: var(--pui-up);\n }\n .down {\n --m-color: var(--pui-down);\n --_button-fg: var(--pui-down);\n }\n .ghost:is(.up, .down):hover:not(:disabled) {\n color: var(--_button-fg);\n }\n .primary.up,\n .accent.up {\n --_button-fg: var(--pui-on-up);\n }\n .primary.down,\n .accent.down {\n --_button-fg: var(--pui-on-down);\n }\n\n /* The main actions' light, where the look provides one, as a spectrum. Glow spills a soft light in the brand's\n spectrum from under the button's bottom edge (clipped at it, so it never tints the face) that brightens under the\n pointer. Prism keeps it inside the glass (--m-solid-glow-fit: 1): the face the light leaves by, the bottom edge,\n splits it into a crisp line with a faint wash rising into the face, only while pointed at. Every other look\n leaves --m-solid-glow at none, so the layer does not exist. */\n .primary::after,\n .accent::after {\n --_fit: var(--m-solid-glow-fit, 0);\n content: var(--m-solid-glow);\n position: absolute;\n z-index: -1;\n top: calc((1 - var(--_fit)) * (100% + var(--m-solid-glow-gap, 0px)));\n inset-inline: var(--m-solid-glow-inset, 14%);\n height: var(--m-solid-glow-height, 14px);\n border-radius: calc(\n var(--_fit) * var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control))) + (1 - var(--_fit)) *\n var(--pui-radius-pill)\n );\n background: var(--m-spectrum);\n background-size: var(--m-spectrum-size, 100% 100%);\n /* the part of the spectrum that shows: this button's own angle (--m-prism-seed, new at every press), turned by\n where the pointer is across the face (--m-prism-x) in a look that turns it (--m-solid-glow-turn) */\n background-position: calc((var(--m-prism-seed, 0.3) + var(--m-prism-x, 0.5) * var(--m-solid-glow-turn, 0)) * 100%) 0;\n filter: blur(var(--m-solid-glow-blur, 9px));\n clip-path: var(--m-solid-glow-clip, inset(0 -32px -32px -32px));\n mask: var(--m-solid-glow-mask, none);\n mask-position:\n 0 0,\n calc(var(--m-prism-seed, 0.3) * 100%) 0;\n mask-composite: intersect;\n opacity: var(--m-solid-glow-rest, 0.75);\n scale: var(--m-solid-glow-scale, 1) 1;\n pointer-events: none;\n transition:\n opacity var(--pui-motion-out) var(--pui-ease-default),\n scale var(--pui-motion-out) var(--pui-ease-default),\n background-position var(--pui-duration-considered) var(--pui-ease-default),\n mask-position var(--pui-duration-considered) var(--pui-ease-default);\n }\n /* pointed at: the light brightens (glow) or grows out from the centre and drifts along while the pointer stays\n (prism) */\n .primary:hover::after,\n .accent:hover::after {\n opacity: 1;\n scale: 1 1;\n transition-duration: var(--m-solid-glow-in, 0ms);\n animation: var(--m-solid-glow-flow, none);\n }\n /* A change of word or colour (Save → Saved, a tone turning green) passes a band of split light across the face once,\n in a look that has one (prism: --m-solid-shift-light; the pen hook's ::before is free on a solid otherwise). */\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: var(--m-solid-shift-light, none);\n position: absolute;\n inset: 0;\n z-index: -1;\n border: 0;\n border-radius: inherit;\n background: var(--m-spectrum) 0 0 / var(--m-spectrum-size, 100% 100%);\n mask: linear-gradient(105deg, transparent 39%, #000 47.5%, #000 52.5%, transparent 61%) 0 0 / 300% 100% no-repeat;\n opacity: 0;\n animation: prism-shift calc(var(--pui-duration-considered) * 2.2) var(--pui-ease-default);\n pointer-events: none;\n }\n @keyframes prism-shift {\n from {\n mask-position: 100% 0;\n opacity: 0.25;\n }\n 35% {\n opacity: 0.55;\n }\n to {\n mask-position: 0 0;\n opacity: 0;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .primary::after,\n .accent::after {\n transition: none;\n animation: none !important;\n }\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: none;\n }\n }\n .root:disabled::after,\n .root[aria-disabled=\"true\"]::after {\n content: none;\n }\n\n /* The loader opens its own width, and the negative margin cancels the gap so the label does not jump */\n .loader {\n display: inline-flex;\n overflow: hidden;\n margin-inline-end: calc(var(--pui-space-1-5) * -1);\n }\n .loader > * {\n margin-inline-end: var(--pui-space-1-5);\n }\n .spinner {\n color: currentColor;\n }\n .root[data-icon-only] .loader {\n margin-inline-end: 0;\n }\n .root[data-icon-only] .loader > * {\n margin-inline-end: 0;\n }\n\n /* The label holds its place while the text inside swaps; the leaving text pops out of flow against it */\n .label {\n position: relative;\n display: inline-flex;\n justify-content: center;\n min-width: 0;\n overflow: visible;\n }\n /* the clip box is let out by a little over a line so descenders are never cut, without changing the layout */\n .text {\n display: inline-block;\n max-width: 100%;\n margin-block: -0.2em;\n padding-block: 0.2em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .label[data-morphing] > .text {\n overflow: visible;\n text-overflow: clip;\n }\n}\n\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .root:not(button):active,\n :global(.pui[data-motion=\"none\"]) .root:not(button):active {\n transform: none;\n }\n @media (prefers-reduced-motion: reduce) {\n .root:not(button):active {\n transform: none;\n }\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: nest-corner from global;\n}\n"},{"path":"beamline/components/button/button.tsx","type":"registry:file","target":"src/ui/beamline/components/button/button.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport {\n Children,\n Fragment,\n isValidElement,\n useLayoutEffect,\n useRef,\n type ButtonHTMLAttributes,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type RefObject,\n type ComponentProps,\n} from \"react\";\nimport { AnimatePresence, LazyMotion, m, spring, useIsPresent } from \"motion/react\";\nimport { animate } from \"motion/mini\";\nimport * as Slot from \"@radix-ui/react-slot\";\nimport { Spinner } from \"../spinner/spinner\";\nimport type { BuiltInLook as Look } from \"../../runtime/preset\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type { ButtonVariant, ButtonSize, ButtonTone } from \"./button-variants\";\nexport { buttonPaint, buttonClassName } from \"./button-variants\";\nimport { buttonClassName, type ButtonVariant, type ButtonSize, type ButtonTone } from \"./button-variants\";\nimport type { ButtonDefaults } from \"./defaults\";\nexport type { ButtonDefaults } from \"./defaults\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\n\ntype NativeProps = Omit<\n ButtonHTMLAttributes,\n \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"\n>;\n\nexport interface ButtonProps extends NativeProps {\n /** Visual weight: primary (ink-filled), secondary, outline, ghost, danger, or accent (filled with the brand). */\n variant?: ButtonVariant;\n /** Height 32 / 36 / 40 px; touch 44 px for a bottom action bar on a phone. */\n size?: ButtonSize;\n /** Market side. On primary/accent the fill becomes --pui-up (buy) or --pui-down (sell); on the quiet variants the\n * label takes that colour. Pair it with a word or arrow: colour is never the only signal. */\n tone?: ButtonTone;\n /** Shows a loader in front of the label, sets aria-busy and ignores clicks; size and focus stay. */\n loading?: boolean;\n classNames?: Partial>;\n /** Paint this button in another look than the one in force around it (DESIGN-LANGUAGE.md \"Looks\"). */\n look?: Look;\n /** Render the single child (a link, a Radix trigger) with the button's look instead of a \n )}\n \n {/* resolving folds the thread to one line in place, and reopening unfolds it: both keep their own height */}\n
\n
\n

\n \n {i18n(\"resolved\", { count: total })}\n

\n
\n
\n \n
\n {list.length > 0 ? (\n
    \n {list.map((c) => item(c, 0))}\n
\n ) : (\n

\n {i18n(\"noCommentsYet\")}\n

\n )}\n add(t)} />\n
\n \n \n );\n}\n\n/** A comment's tools: react, reply and (your own) more. They wait for attention, and stay while one of their menus is\n * open, so the menu never hangs from a trigger that has gone. */\nfunction Tools({\n classNames,\n reactions,\n onReact,\n onReply,\n replying,\n author,\n onDelete,\n}: {\n classNames?: CommentThreadClassNames;\n reactions: string[];\n onReact: (emoji: string) => void;\n onReply?: () => void;\n replying: boolean;\n author: string;\n onDelete?: () => void;\n}) {\n const i18n = useMessages(\"comment-thread\", englishMessages);\n\n const [picking, setPicking] = useState(false);\n const [menu, setMenu] = useState(false);\n return (\n \n \n \n \n \n \n \n \n {reactions.map((e) => (\n {\n onReact(e);\n setPicking(false);\n }}\n className={cn(styles.option, classNames?.reactionOption)}\n >\n {e}\n \n ))}\n \n \n {onReply && (\n \n \n \n )}\n {onDelete && (\n \n }\n size=\"sm\"\n variant=\"ghost\"\n open={menu}\n onOpenChange={setMenu}\n items={[{ label: i18n(\"delete\"), tone: \"danger\", onSelect: onDelete }]}\n />\n \n )}\n \n );\n}\n\n/** Reactions on a comment: a new one grows in, a count rolls, and yours is marked by fill, ring and its label. */\nfunction Reactions({\n list,\n me,\n onReact,\n classNames,\n}: {\n list: { emoji: string; users: string[] }[];\n me: string;\n onReact: (emoji: string) => void;\n classNames?: CommentThreadClassNames;\n}) {\n const i18n = useMessages(\"comment-thread\", englishMessages);\n\n const row = useRef(null);\n useFlip(row);\n return (\n
\n {list.map((r) => {\n const mine = r.users.includes(me);\n return (\n onReact(r.emoji)}\n className={cn(styles.reaction, !mine && \"m-control\", classNames?.reaction)}\n >\n {r.emoji}\n \n \n \n \n );\n })}\n
\n );\n}\n\nfunction Composer({\n classNames,\n people,\n placeholder,\n onSend,\n onCancel,\n autoFocus,\n}: {\n classNames?: CommentThreadClassNames;\n people: CommentAuthor[];\n placeholder: string;\n onSend: (text: string) => void;\n onCancel?: () => void;\n autoFocus?: boolean;\n}) {\n const i18n = useMessages(\"comment-thread\", englishMessages);\n\n const [value, setValue] = useState({ text: \"\", mentions: [] });\n // the buttons wait until someone starts: a thread at rest ends in one quiet field\n const [focused, setFocused] = useState(!!autoFocus);\n const started = focused || !!value.text || !!onCancel;\n const send = () => {\n if (value.text.trim()) {\n onSend(value.text.trim());\n setValue({ text: \"\", mentions: [] });\n }\n };\n return (\n {\n if (e.key === \"Escape\" && onCancel) onCancel();\n }}\n onFocus={() => setFocused(true)}\n onBlur={(e) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) setFocused(false);\n }}\n ref={(el) => {\n if (autoFocus && el && !el.dataset.focused) {\n el.dataset.focused = \"1\";\n el.querySelector(\"textarea\")?.focus();\n }\n }}\n >\n ({ id: p.id, name: p.name, avatarSrc: p.avatar }))}\n value={value}\n onValueChange={setValue}\n onSubmit={send}\n minRows={1}\n maxRows={6}\n />\n
\n
\n \n {onCancel && (\n \n )}\n \n
\n
\n \n \n );\n}\n\nexport default CommentThread;\n"},{"path":"beamline/components/comment-thread/messages.ts","type":"registry:file","target":"src/ui/beamline/components/comment-thread/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: \"Add a comment\",\n nowLabel: \"now\",\n edited: \" · edited\",\n yourComment: \"Your comment\",\n replyTo: \"Reply to {name}\",\n comments: \"Comments\",\n reopen: \"Reopen\",\n resolve: \"Resolve\",\n resolved: {\n one: \"Resolved · {count} comment\",\n other: \"Resolved · {count} comments\",\n },\n noCommentsYet: \"No comments yet.\",\n addAReaction: \"Add a reaction\",\n react: \"React {e}\",\n replyTo2: \"Reply to {author}\",\n reply: \"Reply\",\n actionsForYourComment: \"Actions for your comment\",\n delete: \"Delete\",\n toMention: \"{placeholder} · @ to mention\",\n cancel: \"Cancel\",\n comment2: \"Comment\",\n includingYou: \", including you\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/dropdown-menu/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/dropdown-menu/defaults.ts","content":"/** Pure allowed presentation defaults for DropdownMenu; no component or runtime imports. */\nexport interface DropdownMenuDefaults {\n /** Shared variant setting; omit to inherit the surrounding scope or the component default. */\n variant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\" | \"touch\";\n /** Shared align setting; omit to inherit the surrounding scope or the component default. */\n align?: \"start\" | \"center\" | \"end\";\n}\n"},{"path":"beamline/components/dropdown-menu/dropdown-menu.tsx","type":"registry:file","target":"src/ui/beamline/components/dropdown-menu/dropdown-menu.tsx","content":"\"use client\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { DropdownMenuDefaults } from \"./defaults\";\nexport type { DropdownMenuDefaults } from \"./defaults\";\n\nimport type { CSSProperties, Ref, ReactElement, ReactNode } from \"react\";\nimport * as RadixMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Button, type ButtonSize, type ButtonVariant } from \"../button/button\";\nimport {\n MenuItems,\n MenuSurface,\n useMenuDirection,\n type MenuItem,\n type MenuClassNames,\n} from \"../_shared/menu\";\nimport { cn } from \"../../lib/utils\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\n\nexport type { MenuItem, MenuClassNames };\n\nexport interface DropdownMenuProps {\n /** The menu's name: the trigger's text, or its accessible name when the trigger is an icon. */\n label: string;\n /** Items rendered in the component. Required. */\n items: MenuItem[];\n /** An icon for the built-in trigger (MoreHorizontal for row actions); with it the trigger shows only the icon, and\n * label becomes its accessible name, unless showLabel is set. */\n icon?: ReactNode;\n /** Shows the label beside the icon. Defaults to false. */\n showLabel?: boolean;\n /** Your own trigger (a Button, an avatar); it receives the open state and keyboard handling. */\n trigger?: ReactElement;\n /** Visual weight of the control. Defaults to \"ghost\". */\n variant?: ButtonVariant;\n /** Control size within the supported size steps. Defaults to \"sm\". */\n size?: ButtonSize;\n /** Alignment within the available space. Defaults to \"end\". */\n align?: \"start\" | \"center\" | \"end\";\n /** Edge from which the panel or anchored content opens. Defaults to \"bottom\". */\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n /** Controlled open state; omit to use defaultOpen. */\n open?: boolean;\n /** Initial open state when uncontrolled. Defaults to false. */\n defaultOpen?: boolean;\n /** Reports open state after a change; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: MenuClassNames;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Reading direction; inherits the surrounding direction when omitted. Defaults to the surrounding reading direction. */\n dir?: \"ltr\" | \"rtl\";\n}\n\n/**\n * A list of actions behind a trigger: row actions, \"More\", an account menu. One highlight plate glides between rows\n * under the pointer and jumps with the keyboard; type to jump to an item; → opens a submenu.\n */\nexport function DropdownMenu({\n label,\n items,\n icon,\n showLabel = false,\n trigger,\n variant: variantProp,\n size: sizeProp,\n align: alignProp,\n side = \"bottom\",\n open,\n defaultOpen,\n onOpenChange,\n className,\n classNames,\n style,\n ref,\n dir: direction,\n}: DropdownMenuProps) {\n const scopeDefaults = useComponentDefaults(\"dropdown-menu\", [\"variant\", \"size\", \"align\"]);\n const variant = variantProp ?? scopeDefaults.variant ?? \"ghost\";\n const size = sizeProp ?? scopeDefaults.size ?? \"sm\";\n const align = alignProp ?? scopeDefaults.align ?? \"end\";\n\n const container = usePortalContainer();\n const iconOnly = !!icon && !showLabel;\n const { dir, triggerProps } = useMenuDirection(direction);\n return (\n \n \n {trigger ?? (\n \n {icon}\n {!iconOnly && label}\n \n )}\n \n {container !== null && (\n \n \n \n \n \n )}\n \n );\n}\n\nexport default DropdownMenu;\n"},{"path":"beamline/components/inline-edit/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/inline-edit/defaults.ts","content":"/** Pure allowed presentation defaults for InlineEdit; no component or runtime imports. */\nexport interface InlineEditDefaults {\n /** Shared textStyle setting; omit to inherit the component default. Scoped defaults retain the legacy key variant. */\n variant?: \"body\" | \"title\";\n}\n"},{"path":"beamline/components/inline-edit/inline-edit.module.css","type":"registry:file","target":"src/ui/beamline/components/inline-edit/inline-edit.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Inline edit: the text and the field it turns into share one box (same padding, same type), so nothing moves when\n editing starts. Reading is unpainted text that steps one rung on hover and shows its pencil; editing wears the\n field role of the look, with invalid drawn through the role's inputs like every field (O1 §2). */\n .display {\n position: relative;\n margin-inline: calc(var(--pui-space-1-5) * -1);\n padding: var(--pui-size-0-5, 0.125rem) var(--pui-space-1-5); /* block = size: the line keeps its height */\n border-radius: var(--pui-radius-chip);\n color: var(--pui-ink);\n transition: background-color var(--pui-motion-out) var(--pui-ease-default);\n }\n .display[data-empty] {\n color: var(--pui-ink-3);\n }\n .display:where([role=\"button\"]) {\n cursor: text;\n }\n .display:where([role=\"button\"]):hover {\n background: var(--pui-hover);\n transition-duration: 0ms;\n }\n /* the pencil is the shared reveal (utilities.css): it arrives with the pointer or focus and is always there on touch */\n .pencil {\n display: inline;\n width: var(--pui-icon-sm);\n height: var(--pui-icon-sm);\n margin-inline-start: var(--pui-space-1-5);\n vertical-align: baseline;\n color: var(--pui-ink-3);\n }\n .tail {\n white-space: nowrap;\n }\n /* saved: the text is the new text at once; afterwards a green tint fades from it and a check stands where the pencil\n was, then the pencil comes back (commit at once, explain after) */\n .display[data-saved] {\n animation: saved var(--pui-duration-flash) var(--pui-ease-default);\n }\n @keyframes saved {\n from {\n background-color: var(--pui-green-tint);\n }\n }\n .saved {\n color: var(--pui-green);\n animation: saved-mark var(--pui-motion-in) var(--pui-ease-default);\n }\n @keyframes saved-mark {\n from {\n opacity: 0;\n scale: calc(1 - 0.4 * var(--pui-motion-travel, 1));\n }\n }\n\n /* a number: tabular figures, so a column of them lines up and a digit typed never shifts the rest */\n .numeric,\n .numeric .field {\n font-variant-numeric: tabular-nums;\n }\n [data-align=\"end\"],\n [data-align=\"end\"] .field {\n text-align: end;\n }\n /* cell: the value fills its cell (a block: the whole cell is the target), the field takes the cell's width */\n .editor[data-density=\"cell\"] {\n display: grid;\n width: 100%;\n min-width: 0;\n }\n .editor[data-density=\"cell\"] .field {\n min-width: 0;\n }\n /* a problem in a cell floats under it, so the row never opens */\n .editor[data-density=\"cell\"] .problem {\n position: absolute;\n z-index: 2;\n inset-block-start: calc(100% + var(--pui-space-1));\n inset-inline-end: 0;\n width: max-content;\n max-width: 24ch;\n padding: var(--pui-space-1-5) var(--pui-space-2);\n border-radius: var(--pui-radius-chip);\n background: var(--pui-surface);\n box-shadow:\n var(--pui-shadow-xs),\n 0 0 0 1px var(--pui-line);\n text-align: start;\n contain: none;\n }\n .editor[data-density=\"cell\"]:not([data-align=\"end\"]) .problem {\n inset-inline: 0 auto;\n }\n\n .title {\n /* the heading role: face, size, weight, leading and tracking from the look */\n }\n .body {\n font-size: var(--pui-text-base);\n line-height: var(--pui-leading-body);\n letter-spacing: var(--pui-tracking-body);\n }\n\n .editor {\n position: relative;\n display: grid;\n gap: var(--pui-space-1-5);\n }\n .editor[data-multiline] {\n width: 100%;\n }\n .editor:not([data-multiline]) {\n display: inline-grid;\n min-width: min(24ch, 100%); /* room to type, and a message wraps at a readable width; never past a narrow room */\n max-width: 100%;\n }\n .box {\n position: relative;\n display: grid;\n }\n .field {\n width: calc(100% + 12px);\n margin-inline: calc(var(--pui-space-1-5) * -1);\n padding: var(--pui-size-0-5, 0.125rem) var(--pui-space-1-5); /* block = size: the line keeps its height */\n border: 0;\n border-radius: var(--pui-radius-chip);\n color: var(--pui-ink);\n outline: none;\n resize: none;\n field-sizing: content;\n transition: var(--m-transition);\n }\n .field::placeholder {\n color: var(--pui-ink-3);\n opacity: 1;\n }\n .field:focus-visible {\n outline: none; /* the field role's focus edge is the visible indicator */\n }\n .field[aria-busy=\"true\"] {\n padding-inline-end: var(--pui-space-7);\n color: var(--pui-ink-2);\n }\n .spinner {\n position: absolute;\n inset-inline-end: 0;\n inset-block: 0;\n display: grid;\n place-items: center;\n }\n\n .hint,\n .problem {\n font-size: var(--pui-text-xs);\n line-height: 1.35;\n contain: inline-size; /* the message wraps to the field's width instead of widening it */\n }\n .hint {\n color: var(--pui-ink-3);\n unicode-bidi: plaintext; /* \"⌘Enter saves\" keeps its order in a right-to-left page */\n }\n .problem {\n display: flex;\n align-items: flex-start;\n gap: var(--pui-space-1-5);\n color: var(--pui-red);\n animation: problem-in var(--pui-motion-in) var(--pui-ease-default);\n }\n @keyframes problem-in {\n from {\n opacity: 0;\n translate: 0 calc(-2px * var(--pui-motion-travel, 1));\n }\n }\n .problem svg {\n flex-shrink: 0;\n width: var(--pui-icon-sm);\n height: var(--pui-icon-sm);\n margin-top: calc(var(--pui-space-0-5) / 2);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.title {\n composes: text-heading from global;\n}\n.field {\n composes: m-field from global;\n}\n"},{"path":"beamline/components/inline-edit/inline-edit.tsx","type":"registry:file","target":"src/ui/beamline/components/inline-edit/inline-edit.tsx","content":"\"use client\";\n\nimport { numberFormatter, useLocale, useMessages } from \"../../runtime/localization\";\nimport { parseLocaleNumber } from \"../../lib/number\";\nimport { english as englishMessages } from \"./messages\";\nimport { useDeprecatedProp } from \"../../hooks/use-deprecated-prop\";\n\nimport type { CSSProperties, Ref } from \"react\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { InlineEditDefaults } from \"./defaults\";\nimport { cssEase } from \"../../lib/motion-tokens\";\nexport type { InlineEditDefaults } from \"./defaults\";\n\nimport {\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type AnimationEvent,\n type ElementType,\n type KeyboardEvent,\n} from \"react\";\nimport { AlertCircle, Check, Pencil } from \"lucide-react\";\nimport { Spinner } from \"../spinner/spinner\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport styles from \"./inline-edit.module.css\";\n\nexport type InlineEditClassNames = Partial<\n Record<\"root\" | \"tail\" | \"pencil\" | \"box\" | \"spinner\" | \"problem\" | \"hint\" | \"field\", string>\n>;\n\nexport interface InlineEditProps {\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: InlineEditClassNames;\n /** Controlled committed text; omitted by default to keep accepted edits locally. */\n value?: string;\n /** Initial committed text when uncontrolled; defaults to an empty string. */\n defaultValue?: string;\n /** Reports committed text after onSave succeeds; no callback by default. */\n onValueChange?: (value: string) => void;\n /** Saves the new text; return a promise to show progress, throw to keep editing with the message. */\n onSave: (next: string) => void | Promise;\n /** What is being edited, for assistive tech: \"Report title\". */\n label: string;\n /** Say what is wrong with the text, or nothing to accept it. */\n validate?: (next: string) => string | null | undefined;\n /** Text shown before a value is entered or selected. Defaults to \"Empty\". */\n placeholder?: string;\n /** Wrap and allow line breaks (⌘/Ctrl+Enter saves). */\n multiline?: boolean;\n /** Title or body text treatment; defaults to body. */\n textStyle?: \"title\" | \"body\";\n /** Legacy textStyle setting; omitted by default. @deprecated Use textStyle instead. */\n variant?: \"title\" | \"body\";\n /** The element the text renders as. Default span (title: h2). */\n as?: \"h1\" | \"h2\" | \"h3\" | \"p\" | \"span\";\n /** Prevents interaction with the control. Defaults to false. */\n disabled?: boolean;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the display text or editing root; no ref by default. */\n ref?: Ref;\n /** Receives the native field; no ref by default. */\n fieldRef?: Ref;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /**\n * text (default): a value in running text or a heading, with its pencil and the \"Enter saves\" hint. cell: a value in a\n * table cell or a dense row: fills the cell, no pencil and no hint (the hover tint says it edits), and a problem floats\n * under the cell instead of pushing the row open.\n */\n density?: \"text\" | \"cell\";\n /** Where the text sits in its box: start (default) or end (numbers in a column). */\n align?: \"start\" | \"end\";\n /** The text shown for the committed value (a price written as money); the value itself by default. */\n format?: (value: string) => string;\n /** The text the field starts with when editing begins (a price without its currency sign); the value by default. */\n toDraft?: (value: string) => string;\n /** Turns the typed text, once validate accepts it, into the value saved (a canonical number); the text by default. */\n parse?: (draft: string) => string;\n /** The on-screen keyboard to offer (decimal or numeric for numbers); text by default. */\n inputMode?: \"text\" | \"decimal\" | \"numeric\";\n}\n\n/**\n * Text that becomes a field in the same place, without moving: click it or press Enter to edit, Enter (or ⌘Enter\n * when multiline) saves, Escape cancels, leaving saves. Saving shows progress; a failure keeps the edit and says why.\n */\nexport function InlineEdit({\n value: valueProp,\n defaultValue = \"\",\n onValueChange,\n onSave,\n label,\n validate,\n placeholder: placeholderProp,\n multiline = false,\n textStyle: textStyleProp,\n variant: variantProp,\n as,\n disabled,\n className,\n classNames,\n style,\n ref,\n fieldRef,\n density = \"text\",\n align = \"start\",\n format,\n toDraft,\n parse,\n inputMode,\n}: InlineEditProps) {\n const i18n = useMessages(\"inline-edit\", englishMessages);\n const placeholder = placeholderProp === undefined ? i18n(\"placeholder\") : placeholderProp;\n\n const scopeDefaults = useComponentDefaults(\"inline-edit\", [\"variant\"]);\n useDeprecatedProp(\n \"inline-edit\",\n \"variant\",\n \"textStyle\",\n variantProp !== undefined || (textStyleProp === undefined && scopeDefaults.variant !== undefined),\n );\n const variant = textStyleProp ?? variantProp ?? scopeDefaults.variant ?? \"body\";\n\n const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n const [editing, setEditing] = useState(false);\n const draftOf = (v: string) => (toDraft && v ? toDraft(v) : v);\n const [draft, setDraft] = useState(() => draftOf(value));\n const [state, setState] = useState<\"idle\" | \"saving\">(\"idle\");\n const [problem, setProblem] = useState(null);\n // a save that worked leaves an afterglow on the text: a check where the pencil was and a tint that fades\n const [saved, setSaved] = useState(0);\n const field = useRef(null);\n const display = useRef(null);\n const attach = useComposedRef(display, ref);\n const attachField = useComposedRef(field, fieldRef);\n const problemId = useId();\n // the text becomes the field in place: the frame grows from the text's width to the field's, and shrinks back to\n // the text when the edit ends; the words themselves never move\n const motion = useMotionTokens(display);\n const swapFrom = useRef<{ w: number; h: number } | null>(null);\n const switchTo = (next: boolean) => {\n const el = display.current;\n swapFrom.current = el ? { w: el.offsetWidth, h: el.offsetHeight } : null;\n setEditing(next);\n };\n useLayoutEffect(() => {\n const el = display.current,\n from = swapFrom.current;\n swapFrom.current = null;\n if (!el || !from || motion.reduced) return;\n const ease = motion.ease.standard;\n const timing = {\n duration: motion.duration.considered * 1000 * 0.6,\n easing: cssEase(ease, undefined),\n };\n const w = el.offsetWidth,\n h = el.offsetHeight;\n if (Math.abs(w - from.w) > 1 || Math.abs(h - from.h) > 1)\n el.animate(\n [\n { width: `${from.w}px`, height: `${from.h}px`, overflow: \"clip\" },\n { width: `${w}px`, height: `${h}px`, overflow: \"clip\" },\n ],\n timing,\n );\n el.querySelector(\"[data-slot=inline-edit-hint]\")?.animate(\n [\n { opacity: 0, transform: \"translateY(-4px)\" },\n { opacity: 1, transform: \"none\" },\n ],\n timing,\n );\n }, [editing]); // eslint-disable-line react-hooks/exhaustive-deps -- only a swap of modes morphs\n const Tag = (as ?? (variant === \"title\" ? \"h2\" : \"span\")) as ElementType;\n useEffect(() => {\n if (!editing) setDraft(draftOf(value));\n }, [value, editing]); // eslint-disable-line react-hooks/exhaustive-deps -- toDraft is read with the value it shapes\n useLayoutEffect(() => {\n if (editing) {\n field.current?.focus();\n field.current?.select();\n }\n }, [editing]);\n\n const type = variant === \"title\" ? styles.title : styles.body;\n const cell = density === \"cell\";\n const shown = (value && format ? format(value) : value) || placeholder;\n const cut = shown.search(/\\S+\\s*$/);\n const lead = cut > 0 ? shown.slice(0, cut) : \"\";\n const tail = cut > 0 ? shown.slice(cut) : shown;\n // focus goes back to the value once it shows again, unless it has already moved on to another control (tabbing on,\n // a click into the next field: focusing the value then would blur that field, which saves and closes it)\n const focusBack = () =>\n requestAnimationFrame(() => {\n const now = document.activeElement;\n if (now && now !== document.body && now.isConnected && !display.current?.contains(now)) return;\n display.current?.focus();\n });\n const save = async () => {\n if (state === \"saving\") return;\n const typed = multiline ? draft : draft.trim();\n if (typed === draftOf(value)) {\n switchTo(false);\n setProblem(null);\n return;\n }\n const p = validate?.(typed);\n if (p) {\n setProblem(p);\n field.current?.focus();\n return;\n }\n const next = parse ? parse(typed) : typed;\n if (next === value) {\n switchTo(false);\n setProblem(null);\n return;\n }\n setState(\"saving\");\n try {\n await onSave(next);\n setValue(next);\n switchTo(false);\n setProblem(null);\n setSaved((n) => n + 1);\n focusBack();\n } catch (e) {\n setProblem(e instanceof Error ? e.message : i18n(\"notSavedTryAgain\"));\n field.current?.focus();\n } finally {\n setState(\"idle\");\n }\n };\n const cancel = () => {\n setDraft(draftOf(value));\n setProblem(null);\n switchTo(false);\n focusBack();\n };\n\n if (!editing) {\n return (\n !disabled && switchTo(true)}\n onKeyDown={(e: KeyboardEvent) => {\n if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n switchTo(true);\n }\n }}\n data-empty={value ? undefined : \"\"}\n data-saved={saved ? \"\" : undefined}\n data-density={cell ? \"cell\" : undefined}\n data-align={align === \"end\" ? \"end\" : undefined}\n onAnimationEnd={(e: AnimationEvent) => {\n if (e.target === e.currentTarget) setSaved(0);\n }}\n dir=\"auto\"\n className={cn(\n \"reveal-host\",\n styles.display,\n type,\n multiline ? \"block whitespace-pre-wrap\" : cell ? \"block\" : \"inline-block\",\n classNames?.root,\n className,\n )}\n >\n {disabled ? (\n shown\n ) : (\n <>\n {lead}\n {/* the last word and the pencil never part: a full last line moves both to the next line together */}\n \n {tail}\n {saved ? (\n \n ) : cell ? null : (\n \n )}\n \n \n )}\n \n );\n }\n const common = {\n ref: attachField,\n value: draft,\n \"aria-label\": label,\n \"aria-invalid\": problem ? true : undefined,\n \"aria-errormessage\": problem ? problemId : undefined,\n \"aria-busy\": state === \"saving\" ? true : undefined,\n // saving keeps the field and its focus; it only stops typing until the result arrives\n readOnly: state === \"saving\",\n \"data-slot\": \"inline-edit-field\",\n dir: \"auto\",\n inputMode,\n placeholder,\n onChange: (e: ChangeEvent) => {\n setDraft(e.target.value);\n if (problem) setProblem(null);\n },\n onBlur: () => void save(),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n cancel();\n } else if (e.key === \"Enter\" && (!multiline || e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n void save();\n }\n },\n className: cn(styles.field, type, classNames?.field),\n };\n return (\n \n
\n {multiline ? (\n \n ) : (\n \n )}\n {state === \"saving\" && (\n \n \n \n )}\n
\n {problem ? (\n \n \n {problem}\n \n ) : cell ? null : (\n \n {multiline ? i18n(\"enterSavesEscCancels\") : i18n(\"enterSavesEscCancels2\")}\n \n )}\n \n );\n}\n\nexport interface InlineNumberProps extends Omit<\n InlineEditProps,\n | \"value\"\n | \"defaultValue\"\n | \"onValueChange\"\n | \"onSave\"\n | \"validate\"\n | \"multiline\"\n | \"format\"\n | \"toDraft\"\n | \"parse\"\n | \"inputMode\"\n> {\n /** Controlled committed number; null is no value. Omitted by default to keep accepted edits locally. */\n value?: number | null;\n /** Initial number when uncontrolled; null (no value) by default. */\n defaultValue?: number | null;\n /** Reports the committed number after onSave succeeds. */\n onValueChange?: (value: number | null) => void;\n /** Saves the new number (null when cleared and `optional`); return a promise to show progress, throw to refuse. */\n onSave: (next: number | null) => void | Promise;\n /** A further check on the number read (after the range and step checks); say what is wrong, or nothing. */\n validate?: (next: number | null) => string | null | undefined;\n /** How the number reads, as Intl options: { style: \"unit\", unit: \"kilogram\" }, fraction digits, sign display. */\n formatOptions?: Intl.NumberFormatOptions;\n /** Money in this ISO currency (\"EUR\"): shorthand for formatOptions { style: \"currency\", currency }. */\n currency?: string;\n /** The locale to read and write in; the page's locale by default. */\n locale?: string;\n /** The smallest accepted number; none by default. */\n min?: number;\n /** The largest accepted number; none by default. */\n max?: number;\n /** Accepted numbers are min (or 0) plus whole steps: 1 for counts, 0.01 for cents. None by default. */\n step?: number;\n /** Clearing the field saves null instead of being refused. Default false. */\n optional?: boolean;\n}\n\n/**\n * A number or an amount of money that reads as formatted text and edits in place: typed in the reader's locale (\"1.234,5\"\n * in German, \"1,234.5\" in English, a pasted \"€1,234.50\" too), checked against min, max and step with the reason said,\n * and saved as a number. Tabular figures; `density=\"cell\"` fits it in a table cell with the figures at the end.\n */\nexport function InlineNumber({\n value: valueProp,\n defaultValue = null,\n onValueChange,\n onSave,\n validate,\n formatOptions,\n currency,\n locale: localeProp,\n min,\n max,\n step,\n optional = false,\n density = \"text\",\n align,\n className,\n ...rest\n}: InlineNumberProps) {\n const i18n = useMessages(\"inline-edit\", englishMessages);\n const locale = useLocale(localeProp);\n const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n const show = useMemo(\n () => numberFormatter(locale, currency ? { style: \"currency\", currency, ...formatOptions } : formatOptions),\n [locale, currency, formatOptions],\n );\n // the field holds the bare number in the reader's locale, at least the fraction digits it is shown with (\"12.50\")\n const typed = useMemo(() => {\n const digits = show.resolvedOptions().minimumFractionDigits;\n return numberFormatter(locale, {\n useGrouping: false,\n minimumFractionDigits: digits,\n maximumFractionDigits: 20,\n });\n }, [show, locale]);\n const plain = (n: number) => show.format(n);\n const check = (text: string) => {\n if (!text.trim()) return optional ? validate?.(null) : i18n(\"needed\");\n const n = parseLocaleNumber(text, locale);\n if (n === null) return i18n(\"notANumber\", { example: typed.format(1234.5) });\n if (min !== undefined && n < min) return i18n(\"atLeast\", { min: plain(min) });\n if (max !== undefined && n > max) return i18n(\"atMost\", { max: plain(max) });\n if (step) {\n const k = (n - (min ?? 0)) / step;\n if (Math.abs(k - Math.round(k)) > 1e-9) return i18n(\"inSteps\", { step: plain(step) });\n }\n return validate?.(n);\n };\n const canonical = (n: number | null) => (n === null ? \"\" : String(n));\n return (\n setValue(v === \"\" ? null : Number(v))}\n format={(v) => show.format(Number(v))}\n toDraft={(v) => typed.format(Number(v))}\n parse={(t) => canonical(t.trim() ? parseLocaleNumber(t, locale) : null)}\n validate={check}\n inputMode={step !== undefined && Number.isInteger(step) && (min ?? 0) >= 0 ? \"numeric\" : \"decimal\"}\n onSave={(v) => onSave(v === \"\" ? null : Number(v))}\n />\n );\n}\n\nexport default InlineEdit;\n"},{"path":"beamline/components/inline-edit/messages.ts","type":"registry:file","target":"src/ui/beamline/components/inline-edit/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: \"Empty\",\n edit: \"{label}: {value}. Edit\",\n saving: \"Saving\",\n enterSavesEscCancels: \"⌘Enter saves · Esc cancels\",\n enterSavesEscCancels2: \"Enter saves · Esc cancels\",\n notSavedTryAgain: \"Not saved. Try again.\",\n notANumber: \"Enter a number, like {example}.\",\n needed: \"Enter a value.\",\n atLeast: \"At least {min}.\",\n atMost: \"At most {max}.\",\n inSteps: \"In steps of {step}.\",\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/mention-input/mention-input.module.css","type":"registry:file","target":"src/ui/beamline/components/mention-input/mention-input.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* The composer wears the look's field role; invalid and disabled are drawn the way every field draws them. */\n .root {\n position: relative;\n display: grid;\n border-radius: var(--pui-field-radius, var(--pui-radius-control));\n }\n .root[data-disabled] {\n opacity: var(--pui-opacity-disabled);\n }\n /* a mention is a tint under its own words (people take the accent, channels green); a new one buds: its tint arrives\n over --pui-motion-in, then holds still */\n .mention {\n border-radius: calc(var(--pui-radius-chip) - 2px);\n background: var(--pui-accent-tint);\n color: transparent;\n animation: bud var(--pui-motion-in) var(--pui-ease-default);\n }\n .mention[data-kind=\"channel\"] {\n background: var(--pui-green-tint);\n }\n @keyframes bud {\n from {\n background-color: transparent;\n }\n }\n /* the list stays inside a narrow composer */\n .suggestions {\n position: absolute;\n z-index: var(--pui-z-popover);\n width: min(16rem, 100%);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: m-field from global;\n}\n"},{"path":"beamline/components/mention-input/mention-input.tsx","type":"registry:file","target":"src/ui/beamline/components/mention-input/mention-input.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useDeprecatedProp } from \"../../hooks/use-deprecated-prop\";\n\nimport {\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { Hash } from \"lucide-react\";\nimport { Avatar } from \"../avatar/avatar\";\nimport { Field, useFieldIds } from \"../_shared/field\";\nimport { GlidePlate } from \"../_shared/glide\";\nimport { Highlight, filterRanked } from \"../_shared/match\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport overlay from \"../_shared/overlay.module.css\";\nimport styles from \"./mention-input.module.css\";\n\nexport interface MentionPerson {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Human-readable name of this record. Required. */\n name: string;\n /** Role assigned to this person. Omitted by default. */\n role?: string;\n /** URL of the person avatar. Omitted by default. */\n avatarSrc?: string;\n}\nexport interface MentionChannel {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Human-readable name of this record. Required. */\n name: string;\n /** Supporting content describing this item. Omitted by default. */\n description?: string;\n}\nexport interface Mention {\n /** Kind of record, determining how it is rendered. Required. */\n kind: \"person\" | \"channel\";\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Text displayed for this item. Required. */\n label: string;\n /** Inclusive UTF-16 offset of the mention in the text. Required. */\n start: number;\n /** Exclusive UTF-16 offset of the mention in the text. Required. */\n end: number;\n}\n/** The text and where each mention sits in it (start inclusive, end exclusive). */\nexport interface MentionValue {\n /** Text content of this record. Required. */\n text: string;\n /** Mention tokens with their text offsets. Required. */\n mentions: Mention[];\n}\n\nexport type MentionInputClassNames = Partial<\n Record<\n | \"root\"\n | \"backdrop\"\n | \"mention\"\n | \"field\"\n | \"mirror\"\n | \"suggestions\"\n | \"option\"\n | \"optionBody\"\n | \"optionName\"\n | \"optionDescription\"\n | \"fieldRoot\"\n | \"label\"\n | \"description\"\n | \"error\",\n string\n >\n>;\n\nexport interface MentionInputProps {\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: MentionInputClassNames;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Receives the native textarea; no ref by default. */\n ref?: Ref;\n /** Receives the outer visual root; no ref by default. */\n rootRef?: Ref;\n /** Controlled text together with its mention tokens and offsets; omit to use defaultValue. */\n value?: MentionValue;\n /** Initial text together with its mention tokens and offsets when uncontrolled. Defaults to empty text with no mentions. */\n defaultValue?: MentionValue;\n /** Legacy value-change callback; omitted by default. Prefer onValueChange.\n * @deprecated Use onValueChange; this value callback remains supported and is omitted by default. */\n onChange?: (value: MentionValue) => void;\n /** Reports edited text and mention offsets; no callback by default. */\n onValueChange?: (value: MentionValue) => void;\n /** People offered by mention suggestions. Defaults to an empty list. */\n people?: MentionPerson[];\n /** Channels offered by mention suggestions. Defaults to an empty list. */\n channels?: MentionChannel[];\n /** Receives a mention token after it is inserted; no handler by default. */\n onMentionAdd?: (mention: Mention) => void;\n /** Submits the current value; no handler by default. */\n onSubmit?: (value: MentionValue) => void;\n /** Enter sends (Shift+Enter adds a line). Default false: ⌘/Ctrl+Enter sends. */\n submitOnEnter?: boolean;\n /** Text shown before a value is entered or selected. Defaults to no placeholder. */\n placeholder?: string;\n /** Minimum visible text rows. Defaults to 2. */\n minRows?: number;\n /** Maximum visible text rows before scrolling. Defaults to 8. */\n maxRows?: number;\n /** Suggestions above or below the caret; auto picks the side with room. */\n placement?: \"auto\" | \"top\" | \"bottom\";\n /** Maximum mention suggestions shown at once. Defaults to 6. */\n maxSuggestions?: number;\n /** Prevents interaction with the control. Defaults to false. */\n disabled?: boolean;\n /** Field name used in native form submission. Defaults to no form field name. */\n name?: string;\n /** DOM id used to connect the control and its label. Defaults to an automatically generated control id. */\n id?: string;\n /** Accessible name read by assistive technology. Defaults to the visible label when available. */\n \"aria-label\"?: string;\n /** Ids of elements that describe this control. Defaults to the field help and error ids when present. */\n \"aria-describedby\"?: string;\n /** A visible label above the composer, like every field's (the accessible name too). Without it, pass aria-label. */\n label?: ReactNode;\n /** Shows the label visually while keeping its accessible name; defaults to true. Takes precedence over hideLabel. */\n showLabel?: boolean;\n /** Hides the label; defaults to false. @deprecated Use showLabel={false} instead. */\n hideLabel?: boolean;\n /** One line of help under the composer. */\n description?: ReactNode;\n /** The problem and its fix; marks the composer invalid. */\n error?: ReactNode;\n /** Lands on the composer's frame (its documented root); classNames.fieldRoot addresses the field around it. */\n className?: string;\n}\n\ntype Suggestion = { kind: \"person\"; item: MentionPerson } | { kind: \"channel\"; item: MentionChannel };\nconst TRIGGER = /(^|\\s)([@#])([^\\s@#]{0,30})$/;\n/** The suggestions' width at most (16rem at the default type size), so the list can be kept inside the composer. */\nconst SUGGESTIONS_WIDTH = 256;\n/** Rows of the composer as a height: its own line height (1lh follows the type size) and its block padding. */\nconst rowsHeight = (rows: number) => `calc(${rows} * 1lh + 2 * var(--pui-size-2, 0.5rem))`;\n\n/** Shifts mentions after an edit and drops the ones the edit went through. */\nfunction reconcile(prev: MentionValue, text: string): Mention[] {\n const a = prev.text;\n let p = 0;\n while (p < a.length && p < text.length && a[p] === text[p]) p++;\n let s = 0;\n while (s < a.length - p && s < text.length - p && a[a.length - 1 - s] === text[text.length - 1 - s]) s++;\n const delta = text.length - a.length;\n return prev.mentions.flatMap((m) =>\n m.end <= p ? [m] : m.start >= a.length - s ? [{ ...m, start: m.start + delta, end: m.end + delta }] : [],\n );\n}\n\n/**\n * A composer where @people and #channels become single tokens. Type @ or # for suggestions at the caret (↑ ↓, Enter\n * or Tab to pick, Escape to close); Backspace right after a mention removes it whole. The value keeps the text and\n * where each mention sits, ready for your API.\n */\nexport function MentionInput({\n value: valueProp,\n defaultValue = { text: \"\", mentions: [] },\n onChange,\n onValueChange,\n people = [],\n channels = [],\n onMentionAdd,\n onSubmit,\n submitOnEnter = false,\n placeholder,\n minRows = 2,\n maxRows = 8,\n placement = \"auto\",\n maxSuggestions = 6,\n disabled,\n name,\n id,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": describedBy,\n label,\n hideLabel: hideLabelProp,\n showLabel,\n description,\n error,\n className,\n classNames,\n style,\n ref,\n rootRef,\n}: MentionInputProps) {\n const i18n = useMessages(\"mention-input\", englishMessages);\n\n useDeprecatedProp(\"MentionInput\", \"hideLabel\", \"showLabel={false}\", hideLabelProp !== undefined);\n const hideLabel = showLabel === undefined ? hideLabelProp : !showLabel;\n useDeprecatedProp(\"MentionInput\", \"onChange\", \"onValueChange\", onChange !== undefined);\n const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n const set = (v: MentionValue) => {\n setValue(v);\n onChange?.(v);\n };\n const area = useRef(null);\n const fieldRef = useComposedRef(area, ref);\n const mirror = useRef(null);\n const backdrop = useRef(null);\n const [query, setQuery] = useState<{ char: \"@\" | \"#\"; text: string; at: number } | null>(null);\n const [active, setActive] = useState(0);\n const [caret, setCaret] = useState({ x: 0, y: 0, line: 0, below: true });\n const listId = useId();\n const list = useRef(null);\n const { controlId, descriptionId, errorId, aria } = useFieldIds(id, { description, error });\n const asField = label != null;\n\n const suggestions: Suggestion[] = useMemo(() => {\n if (!query) return [];\n const list: Suggestion[] =\n query.char === \"@\"\n ? filterRanked(people, query.text, (p) => ({ label: p.name, keywords: p.role ? [p.role] : [] })).map(\n (item) => ({ kind: \"person\" as const, item }),\n )\n : filterRanked(channels, query.text, (c) => ({ label: c.name, description: c.description })).map((item) => ({\n kind: \"channel\" as const,\n item,\n }));\n return list.slice(0, maxSuggestions);\n }, [query, people, channels, maxSuggestions]);\n const open = !!query && suggestions.length > 0;\n\n // where the caret is, from a mirror of the textarea's text up to it\n const locate = () => {\n const el = area.current,\n m = mirror.current;\n if (!el || !m) return;\n const before = el.value.slice(0, el.selectionStart);\n const hit = before.match(TRIGGER);\n setQuery(hit ? { char: hit[2] as \"@\" | \"#\", text: hit[3], at: before.length - hit[3].length - 1 } : null);\n if (!hit) return;\n m.textContent = before;\n const mark = document.createElement(\"span\");\n mark.textContent = \"​\";\n m.appendChild(mark);\n const x = mark.offsetLeft,\n y = mark.offsetTop - el.scrollTop;\n const room = window.innerHeight - el.getBoundingClientRect().top - y;\n setCaret({\n x,\n y,\n line: parseFloat(getComputedStyle(el).lineHeight) || mark.offsetHeight,\n below: placement === \"bottom\" || (placement === \"auto\" && room > 240),\n });\n setActive(0);\n };\n useLayoutEffect(() => {\n if (backdrop.current && area.current) backdrop.current.scrollTop = area.current.scrollTop;\n });\n\n const pick = (s: Suggestion) => {\n if (!query) return;\n const label = `${query.char}${s.item.name}`;\n const end = query.at + 1 + query.text.length;\n const text = value.text.slice(0, query.at) + label + \" \" + value.text.slice(end);\n const delta = label.length + 1 - (end - query.at);\n const mention: Mention = { kind: s.kind, id: s.item.id, label, start: query.at, end: query.at + label.length };\n const kept = value.mentions.map((m) => (m.start >= end ? { ...m, start: m.start + delta, end: m.end + delta } : m));\n set({ text, mentions: [...kept, mention].sort((a, b) => a.start - b.start) });\n onMentionAdd?.(mention);\n setQuery(null);\n requestAnimationFrame(() => {\n const el = area.current;\n if (el) {\n const pos = query.at + label.length + 1;\n el.focus();\n el.setSelectionRange(pos, pos);\n }\n });\n };\n const onKey = (e: KeyboardEvent) => {\n if (open) {\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n setActive((i) => (i + (e.key === \"ArrowDown\" ? 1 : -1) + suggestions.length) % suggestions.length);\n return;\n }\n if (e.key === \"Enter\" || e.key === \"Tab\") {\n e.preventDefault();\n pick(suggestions[active]);\n return;\n }\n if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setQuery(null);\n return;\n }\n }\n const el = e.currentTarget;\n if (e.key === \"Backspace\" && el.selectionStart === el.selectionEnd) {\n const m = value.mentions.find((x) => x.end === el.selectionStart);\n if (m) {\n e.preventDefault();\n set({\n text: value.text.slice(0, m.start) + value.text.slice(m.end),\n mentions: reconcile(value, value.text.slice(0, m.start) + value.text.slice(m.end)),\n });\n requestAnimationFrame(() => el.setSelectionRange(m.start, m.start));\n return;\n }\n }\n if (\n e.key === \"Enter\" &&\n onSubmit &&\n ((submitOnEnter && !e.shiftKey) || (!submitOnEnter && (e.metaKey || e.ctrlKey)))\n ) {\n e.preventDefault();\n if (value.text.trim()) onSubmit(value);\n }\n };\n const onText = (e: ChangeEvent) => {\n set({ text: e.target.value, mentions: reconcile(value, e.target.value) });\n requestAnimationFrame(locate);\n };\n\n // the backdrop draws a chip under each mention; the textarea's own text sits on top\n // each mention keeps its identity while the text around it changes (kind, id and which occurrence), so only a new one\n // buds in (its tint arrives) and the others hold still\n const parts: { text: string; mention?: Mention; key: string }[] = [];\n const seen = new Map();\n let i = 0;\n for (const m of value.mentions) {\n if (m.start > i) parts.push({ text: value.text.slice(i, m.start), key: `t${parts.length}` });\n const who = `${m.kind}:${m.id}`;\n seen.set(who, (seen.get(who) ?? 0) + 1);\n parts.push({ text: value.text.slice(m.start, m.end), mention: m, key: `m:${who}:${seen.get(who)}` });\n i = m.end;\n }\n parts.push({ text: value.text.slice(i) + \"\\n\", key: \"tail\" });\n const box =\n \"col-start-1 row-start-1 whitespace-pre-wrap break-words px-3 py-[var(--pui-size-2,0.5rem)] text-base leading-[var(--pui-leading-reading)]\";\n const composer = (\n \n \n {parts.map((p) =>\n p.mention ? (\n \n {p.text}\n \n ) : (\n {p.text}\n ),\n )}\n \n