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

\n
\n \n );\n };\n return (\n
\n {shown && line(shown, true)}\n {current && line(current, false)}\n
\n );\n}\n\n/** What the end of a text field says about its work: a spinner while a value is checked, a drawn check when it works. */\nexport type FieldStatus = \"busy\" | \"success\";\n\n/** The frame a text-like control sits in; clicking anywhere on it focuses the control. */\nexport function FieldFrame({\n size = \"md\",\n invalid,\n disabled,\n readOnly,\n multiline,\n status,\n statusLabel: statusLabelProp,\n leading,\n trailing,\n className,\n classNames,\n children,\n onPointerDown,\n ref,\n}: {\n size?: FieldSize;\n invalid?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n multiline?: boolean;\n /** busy: a spinner at the end while the value is checked or saved; success: the ring closes into a check. */\n status?: FieldStatus;\n /** What the spinner says while busy (\"Checking\", \"Saving\"). */\n statusLabel?: string;\n leading?: ReactNode;\n trailing?: ReactNode;\n className?: string;\n classNames?: FieldClassNames;\n children: ReactNode;\n onPointerDown?: (e: ReactPointerEvent) => void;\n /** The frame itself, for a control that lays out by the frame's width (useWidthAs). */\n ref?: Ref;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const statusLabel = statusLabelProp === undefined ? i18n(\"statusLabel\") : statusLabelProp;\n\n return (\n {\n onPointerDown?.(e);\n // a click on the frame's padding or an adornment that is not itself interactive focuses the control\n const t = e.target as HTMLElement;\n if (t === e.currentTarget || (t.closest(\"[data-adornment]\") && !t.closest(\"button, a, input, [role=button]\"))) {\n e.preventDefault();\n e.currentTarget.querySelector(\"input, textarea\")?.focus();\n }\n }}\n >\n {leading && (\n \n {leading}\n \n )}\n {children}\n {status && (\n // one ring for both: it spins while the value is checked and closes into the check when it works\n \n \n \n )}\n {trailing && (\n \n {trailing}\n \n )}\n \n );\n}\n\n/**\n * A character count for the label's row (Field `aside`): quiet (\"58/140\") and shown while the field has attention,\n * then always shown and in words as the limit nears (\"12 left\", \"Limit reached\", \"3 over\"), so it never competes with\n * the label at rest. Assistive tech hears it only when it crosses into those words, not at every key.\n */\nexport function FieldCount({\n length,\n max,\n near: nearAt,\n slot = \"field-count\",\n className,\n}: {\n length: number;\n max: number;\n /** How many left turns it into words: by default 10 % of the limit, at least 5 (characters); 1 suits a few tags. */\n near?: number;\n slot?: string;\n className?: string;\n}) {\n const i18n = useMessages(\"_shared\", english);\n const left = max - length;\n const near = left <= (nearAt ?? Math.max(5, Math.ceil(max * 0.1)));\n const state = left < 0 ? \"over\" : left === 0 ? \"full\" : near ? \"near\" : \"room\";\n const words =\n state === \"over\"\n ? i18n(\"fieldOver\", { count: -left })\n : state === \"full\"\n ? i18n(\"fieldFull\")\n : i18n(\"fieldLeft\", { count: left });\n return (\n \n {state === \"room\" ? `${i18n.number(length)}/${i18n.number(max)}` : words}\n \n {state === \"room\" ? \"\" : words}\n \n \n );\n}\n\n/** The class a native input or textarea needs inside a FieldFrame. */\nexport const fieldControlClass = styles.control;\n\n/** What a choice group (segmented control, radio cards) spreads onto its own root when it is a form field. */\nexport interface ChoiceFieldAria {\n \"aria-labelledby\": string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: true;\n}\n\n/**\n * Whether a choice control (segmented control, radio cards, chip group) is laid out as a form field, its label shown\n * above like every field's: when asked (`field`), when it has a description, error or required mark, and whenever its\n * label is not hidden. A view switch or a quick filter passes `hideLabel`: its label stays for assistive tech only.\n * (Trials t16 and t19: agents wrote and the question never showed.)\n */\nexport function choiceIsField(\n field: boolean | undefined,\n label: ReactNode,\n hideLabel: boolean | undefined,\n marked: boolean,\n) {\n return field ?? (marked || (label != null && label !== \"\" && !hideLabel));\n}\n\n/**\n * A choice group as a form field: the visible label above (with the required marker), the group, then its help or its\n * problem — the same frame and message every text field has. Groups that name themselves only for assistive tech\n * (a view switch in a toolbar) do not use it.\n */\nexport function ChoiceField({\n slot,\n label,\n hideLabel,\n required,\n description,\n error,\n className,\n style,\n classNames,\n requiredOnControl,\n children,\n}: Omit & {\n slot: string;\n /** The group carries `aria-required` itself (a radiogroup), so the label does not repeat it in the group's name. */\n requiredOnControl?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: Pick;\n children: (aria: ChoiceFieldAria) => ReactNode;\n}) {\n const auto = useId();\n const labelId = `choice-${auto}-label`;\n const messageId = error || description ? `choice-${auto}-message` : undefined;\n return (\n
\n \n {label}\n \n {children({\n \"aria-labelledby\": labelId,\n ...(messageId ? { \"aria-describedby\": messageId } : {}),\n ...(error ? { \"aria-invalid\": true as const } : {}),\n })}\n \n
\n );\n}\n"},{"path":"beamline/components/_shared/glide.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/glide.tsx","content":"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport overlay from \"./overlay.module.css\";\n\n/**\n * The gliding highlight for a list whose active row is tracked in state (command menu, listbox): one plate travels to\n * the active row for the arrow keys and the pointer alike, over --pui-duration-fast. It appears in place (no travel)\n * the first time and whenever `reset` changes (a new page or a new query), so typing never sends it flying.\n * The list must be the plate's offset parent (position: relative); rows stay above it (overlay.item is z-index 1).\n */\nexport function GlidePlate({\n list,\n selector,\n reset,\n axis = \"y\",\n className,\n}: {\n list: RefObject;\n /** Finds the active row inside `list`; null when nothing is active. */\n selector: string | null;\n reset?: unknown;\n /** \"y\" for a list (the plate spans the width); \"xy\" for a row or grid of cells (it takes each cell's size). */\n axis?: \"y\" | \"xy\";\n className?: string;\n}) {\n const [plate, setPlate] = useState<{ x: number; y: number; w: number; h: number; jump: boolean } | null>(null);\n const lastReset = useRef(reset);\n const self = useRef(null);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose; setPlate bails out when unchanged\n useLayoutEffect(() => {\n // the list holds the plate, and React attaches a parent's ref only after its children's layout effects: on the\n // first commit the list is the plate's own parent (it placed itself only when something rendered again later)\n const host = list.current ?? self.current?.parentElement;\n const row = selector ? host?.querySelector(selector) : null;\n const fresh = lastReset.current !== reset;\n lastReset.current = reset;\n if (!row) {\n setPlate((p) => (p && p.h ? { ...p, h: 0 } : p));\n return;\n }\n const x = row.offsetLeft,\n y = row.offsetTop,\n w = row.offsetWidth,\n h = row.offsetHeight;\n setPlate((p) =>\n p && p.x === x && p.y === y && p.w === w && p.h === h && !fresh ? p : { x, y, w, h, jump: fresh || !p?.h },\n );\n // every render: rows can arrive or change height without the selector changing; an unchanged place keeps the state\n });\n return (\n \n );\n}\n\n/**\n * A GlidePlate for lists whose highlight is the pointer or keyboard focus rather than state (time picker, plain option\n * lists): it follows the row under the pointer or holding focus, and fades when neither is in the list. Rows drop\n * their own hover and focus tint.\n */\nexport function FollowPlate({\n list,\n rows,\n className,\n}: {\n list: RefObject;\n /** Matches a row inside `list`, e.g. \"[role=option]\". */\n rows: string;\n className?: string;\n}) {\n const [hot, setHot] = useState(null);\n // after the commit, when the list's ref is attached (a layout effect here ran before it and never listened)\n useEffect(() => {\n const el = list.current;\n if (!el) return;\n let n = 0;\n const mark = (target: EventTarget | null) => {\n const row = (target as HTMLElement | null)?.closest?.(rows);\n if (!row || !el.contains(row)) return;\n row.dataset.glideKey ??= String(++n);\n setHot(row.dataset.glideKey);\n };\n const over = (e: Event) => mark(e.target);\n const leave = () => {\n if (!el.contains(document.activeElement)) setHot(null);\n };\n const blur = (e: FocusEvent) => {\n if (!el.contains(e.relatedTarget as Node)) setHot(null);\n };\n el.addEventListener(\"pointerover\", over);\n el.addEventListener(\"focusin\", over);\n el.addEventListener(\"pointerleave\", leave);\n el.addEventListener(\"focusout\", blur);\n return () => {\n el.removeEventListener(\"pointerover\", over);\n el.removeEventListener(\"focusin\", over);\n el.removeEventListener(\"pointerleave\", leave);\n el.removeEventListener(\"focusout\", blur);\n };\n }, [list, rows]);\n return ;\n}\n"},{"path":"beamline/components/_shared/messages.ts","type":"registry:file","target":"src/ui/beamline/components/_shared/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy for this helper only. */\nexport const english = {\n results: {\n one: \"{count} result\",\n other: \"{count} results\",\n },\n noMatch: \"No match for {query}\",\n fieldOver: \"{count} over\",\n fieldFull: \"Limit reached\",\n fieldLeft: \"{count} left\",\n foldMore: \"{list} and {count} more\",\n foldShow: \"Show {count} more {noun}: {list}\",\n statusLabel: \"Checking\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/_shared/overlay.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the source morph's moving parts: the clip's four sides, the radius and the offset back to the trigger */\n@property --ci-t {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-r {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-b {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-l {\n syntax: \"\";\n inherits: false;\n initial-value: -48px;\n}\n@property --ci-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@property --ci-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0px;\n}\n@layer components {\n /* Every floating layer in the system: one surface (painted by the overlay role of the look in force), one menu-item\n look, one scrim, one enter and exit. A layer placed against a trigger opens out of it (the source morph below); one\n without a placement arrives in --pui-motion-in scaling from its origin. Each leaves in --pui-motion-out; Radix keeps\n it mounted until the exit animation ends. Reduced motion makes both instant (the duration tokens become 1ms). */\n .surface {\n z-index: var(--pui-z-popover);\n min-width: 8rem;\n /* never past the screen: as wide and as tall as the room beside the trigger (Radix measures it) */\n max-width: var(--radix-popper-available-width, none);\n max-height: var(--radix-popper-available-height, 70vh);\n overflow: auto;\n border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n color: var(--pui-ink);\n transform-origin: var(--radix-popper-transform-origin, var(--radix-dropdown-menu-content-transform-origin, center));\n outline: none;\n }\n .surface[data-state=\"open\"],\n .surface[data-state=\"delayed-open\"],\n .surface[data-state=\"instant-open\"] {\n animation: pop-in var(--pui-motion-in) var(--pui-ease-default);\n }\n .surface[data-state=\"closed\"] {\n animation: pop-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n\n /* The source morph (research/morphing-interfaces-2026-10-04, M3): a layer placed against a trigger does not fade in\n beside it, it opens out of it. It starts as the trigger's own box (Radix gives its size and the side and alignment\n it was placed on), offset back onto the trigger, and grows: the side nearest the trigger is there at once, the\n sides across follow, the far side arrives last (~200 ms), so the rows by the trigger are readable within the\n ruled 90 ms while the outline settles. Content fades in over those 90 ms. It closes back into the trigger in the\n ruled 180 ms. The clip ends 48px outside the box so the layer's shadow is never cut. Reduced motion: instant. */\n .surface[data-side] {\n --_aw: var(--radix-popper-anchor-width, 0px);\n --_ah: var(--radix-popper-anchor-height, 0px);\n --_gap: 6px;\n --from-t: -48px;\n --from-r: -48px;\n --from-b: -48px;\n --from-l: -48px;\n --from-x: 0px;\n --from-y: 0px;\n --d-near: calc(var(--pui-duration-standard) * 0.55);\n --d-cross: calc(var(--pui-duration-standard) * 0.85);\n --d-far: var(--pui-duration-standard);\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-overlay-radius, var(--pui-radius-card))\n );\n translate: var(--ci-x) var(--ci-y);\n }\n .surface[data-side=\"bottom\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n --from-y: calc(-1 * (var(--_ah) + var(--_gap)));\n --d-t: var(--d-near);\n --d-b: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"top\"] {\n --from-b: 0px;\n --from-t: calc(100% - var(--_ah));\n --from-y: calc(var(--_ah) + var(--_gap));\n --d-b: var(--d-near);\n --d-t: var(--d-far);\n --d-l: var(--d-cross);\n --d-r: var(--d-cross);\n }\n .surface[data-side=\"right\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n --from-x: calc(-1 * (var(--_aw) + var(--_gap)));\n --d-l: var(--d-near);\n --d-r: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n .surface[data-side=\"left\"] {\n --from-r: 0px;\n --from-l: calc(100% - var(--_aw));\n --from-x: calc(var(--_aw) + var(--_gap));\n --d-r: var(--d-near);\n --d-l: var(--d-far);\n --d-t: var(--d-cross);\n --d-b: var(--d-cross);\n }\n /* alignment along the trigger: which part of the layer the trigger sits over */\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"] {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"] {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"]:dir(rtl) {\n --from-l: calc(100% - var(--_aw));\n --from-r: 0px;\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"]:dir(rtl) {\n --from-l: 0px;\n --from-r: calc(100% - var(--_aw));\n }\n .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"center\"] {\n --from-l: calc((100% - var(--_aw)) / 2);\n --from-r: calc((100% - var(--_aw)) / 2);\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"start\"] {\n --from-t: 0px;\n --from-b: calc(100% - var(--_ah));\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"end\"] {\n --from-t: calc(100% - var(--_ah));\n --from-b: 0px;\n }\n .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"center\"] {\n --from-t: calc((100% - var(--_ah)) / 2);\n --from-b: calc((100% - var(--_ah)) / 2);\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) {\n animation:\n grow-t var(--d-t) var(--pui-ease-out-strong),\n grow-r var(--d-r) var(--pui-ease-out-strong),\n grow-b var(--d-b) var(--pui-ease-out-strong),\n grow-l var(--d-l) var(--pui-ease-out-strong),\n grow-xy var(--d-cross) var(--pui-ease-out-strong),\n settling var(--d-far) step-end;\n }\n .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) > * {\n animation: content-in var(--pui-motion-in) var(--pui-ease-default) both;\n }\n /* one duration for every part of the exit: the layer unmounts when the first of them ends */\n .surface[data-side][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .surface[data-side][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n @keyframes grow-t {\n from {\n --ci-t: var(--from-t);\n }\n }\n @keyframes grow-r {\n from {\n --ci-r: var(--from-r);\n }\n }\n @keyframes grow-b {\n from {\n --ci-b: var(--from-b);\n }\n }\n @keyframes grow-l {\n from {\n --ci-l: var(--from-l);\n }\n }\n @keyframes grow-xy {\n from {\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n }\n }\n /* it starts over its own trigger: until it has grown, the press that opened it must not land on a row */\n @keyframes settling {\n 0%,\n 100% {\n pointer-events: none;\n }\n }\n @keyframes shrink {\n to {\n --ci-t: var(--from-t);\n --ci-r: var(--from-r);\n --ci-b: var(--from-b);\n --ci-l: var(--from-l);\n --ci-x: var(--from-x);\n --ci-y: var(--from-y);\n opacity: 0;\n }\n }\n @keyframes content-in {\n from {\n opacity: 0;\n }\n }\n @keyframes content-out {\n to {\n opacity: 0;\n }\n }\n .padded {\n padding: var(--pui-pad-popover);\n }\n .menu {\n padding: var(--pui-space-1);\n }\n @keyframes pop-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes pop-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n\n /* rows (and the gliding plate) nest in the list: its radius minus its padding, never rounder than a chip; on the\n row itself, so any list that uses .item gets it */\n .item,\n .glide {\n --_item-radius: min(\n var(--pui-radius-chip),\n calc(var(--pui-overlay-radius, var(--pui-radius-card)) - var(--pui-space-1))\n );\n }\n\n /* menu rows: shared by dropdown, context menu, menubar, select, combobox lists */\n .item {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: var(--pui-space-2);\n min-height: var(--pui-control-height-sm);\n padding: 0 var(--pui-space-2);\n /* nested in the list: the overlay's radius minus its padding, never rounder than a chip */\n border-radius: var(--_item-radius);\n color: var(--pui-ink);\n font-size: var(--pui-text-sm);\n cursor: default;\n user-select: none;\n outline: none;\n }\n /* on a touch screen a row is a finger's target: the touch height (44px) from the tokens; a mouse keeps the dense row */\n @media (pointer: coarse) {\n .item {\n min-height: var(--pui-control-height-touch);\n }\n }\n /* a destructive row speaks in the danger ink only while it can be used: disabled wins (muted ink, no alarm for an\n action that cannot happen) */\n .item[data-tone=\"danger\"]:not([data-disabled]) {\n color: var(--pui-red);\n }\n .item[data-disabled] {\n color: var(--pui-ink-3);\n pointer-events: none;\n }\n .item :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .item[data-tone=\"danger\"]:not([data-disabled]) :where(svg) {\n color: currentColor;\n }\n .item[data-highlighted]:not([data-glide]) {\n background: var(--pui-hover-2);\n }\n /* a press is acknowledged at once, over the plate, before the menu closes or the row toggles */\n .item:active:not([data-disabled]) {\n background: var(--pui-hover);\n }\n .shortcut {\n margin-inline-start: auto;\n padding-inline-start: var(--pui-space-4);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n letter-spacing: var(--pui-tracking-mono-caps);\n }\n .heading {\n padding: var(--pui-space-1-5) var(--pui-space-2) var(--pui-space-1);\n color: var(--pui-ink-3);\n font-size: var(--pui-text-xs);\n font-weight: var(--pui-weight-medium);\n }\n .separator {\n height: 1px;\n margin: var(--pui-space-1) calc(var(--pui-space-1) * -1);\n background: var(--pui-line);\n }\n .check {\n margin-inline-start: auto;\n color: var(--pui-accent) !important;\n }\n /* a check arrives in its row as the value changes (at once): it grows from the middle over the arrival */\n .check :where(svg) {\n animation: check-in var(--pui-motion-in) var(--pui-ease-out-strong);\n }\n @keyframes check-in {\n from {\n opacity: 0;\n scale: calc(1 - 0.5 * var(--pui-motion-travel, 1));\n }\n }\n /* the gliding highlight: one plate moves between rows for the pointer and the arrow keys; it appears in place */\n .glide {\n position: absolute;\n z-index: 0;\n inset-inline: var(--pui-space-1);\n top: 0;\n border-radius: var(--_item-radius);\n background: var(--pui-hover-2);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--pui-motion-out) var(--pui-ease-default);\n }\n .glide[data-on] {\n opacity: 1;\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n .glide[data-jump] {\n transition: opacity 0ms;\n }\n /* a plate over a row or grid of cells takes each cell's size and travels both ways */\n .glide[data-axis=\"xy\"] {\n inset-inline: auto;\n left: 0;\n }\n .glide[data-axis=\"xy\"][data-on] {\n transition:\n transform var(--pui-duration-fast) var(--pui-ease-standard),\n width var(--pui-duration-fast) var(--pui-ease-standard),\n height var(--pui-duration-fast) var(--pui-ease-standard),\n opacity 0ms;\n }\n\n /* a layer that has begun to close is out of the way at once: for the length of its exit it takes no pointer, so a tap\n meant for the page behind (the next row, the button the panel covered) lands there, never on the leaving ghost.\n Focus has already gone back (Radix) and it unmounts when the exit ends. */\n .scrim[data-state=\"closed\"],\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n pointer-events: none;\n }\n\n /* modal layers */\n .scrim {\n position: fixed;\n inset: 0;\n z-index: var(--pui-z-overlay);\n background: var(--pui-scrim);\n backdrop-filter: blur(var(--pui-blur-overlay));\n }\n .scrim[data-state=\"open\"] {\n animation: fade-in var(--pui-fade-in) var(--pui-ease-default);\n }\n .scrim[data-state=\"closed\"] {\n animation: fade-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n }\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes fade-out {\n to {\n opacity: 0;\n }\n }\n .dialog {\n /* the content answers to the dialog's own width (a footer's buttons share the row on a phone) */\n container-type: inline-size;\n position: fixed;\n z-index: var(--pui-z-modal);\n left: 50%;\n top: 50%;\n width: min(calc(100vw - var(--pui-space-8)), var(--pui-dialog-width, var(--_dialog-width, 440px)));\n max-height: calc(100dvh - var(--pui-space-12));\n overflow: hidden;\n translate: -50% -50%;\n border-radius: var(--pui-dialog-radius, var(--pui-radius-window));\n color: var(--pui-ink);\n outline: none;\n /* a size chosen while open (a step that needs more room) eases the width in place, centred */\n transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n .dialog[data-state=\"open\"] {\n animation: dialog-in var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .dialog[data-state=\"closed\"] {\n animation: dialog-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n }\n /* A dialog opened from something (use-open-from.ts) grows out of it: it starts as the opener's box, offset back onto\n it, and grows to its own place over the considered duration while its content fades in; it closes back into the\n opener in the ruled 180 ms. Shares the source morph's moving parts and guard with .surface. */\n .dialog[data-open-from] {\n clip-path: inset(\n var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-dialog-radius, var(--pui-radius-window))\n );\n transform: translate(var(--ci-x), var(--ci-y));\n }\n .dialog[data-open-from][data-state=\"open\"] {\n animation:\n grow-t var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-r var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-b var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-l var(--pui-duration-considered) var(--pui-ease-out-strong),\n grow-xy calc(var(--pui-duration-considered) * 0.9) var(--pui-ease-out-strong),\n settling var(--pui-duration-considered) step-end;\n }\n .dialog[data-open-from][data-state=\"open\"] > * {\n animation: content-in var(--pui-duration-standard) var(--pui-ease-default) calc(var(--pui-duration-standard) * 0.35)\n both;\n }\n .dialog[data-open-from][data-state=\"closed\"] {\n animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n .dialog[data-open-from][data-state=\"closed\"] > * {\n animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n }\n /* A sheet: a panel from an edge. It slides in from its edge over the considered duration on the drawer curve and\n goes back out to that edge in the ruled departure (a layer closes back into where it came from). The edge is\n logical: an end (\"right\") sheet comes from the left in a right-to-left page. Its content answers to its width. */\n .sheet {\n --_sx: 0px;\n --_sy: 0px;\n container-type: inline-size;\n /* where a finger has swiped it toward its edge (sheet.tsx); it settles back over the departure */\n translate: var(--_swipe, 0px) 0;\n }\n /* a side panel leaves sideways pans to the swipe and keeps vertical scrolling native, in its body too */\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]),\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) [data-slot=\"sheet-body\"] {\n touch-action: pan-y;\n }\n .sheet:is([data-side=\"left\"], [data-side=\"right\"]) {\n transition:\n var(--m-transition),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n .sheet[data-swiping] {\n transition: none;\n }\n .sheet[data-side=\"right\"] {\n --_sx: 100%;\n }\n .sheet[data-side=\"left\"] {\n --_sx: -100%;\n }\n .sheet[data-side=\"right\"]:dir(rtl) {\n --_sx: -100%;\n }\n .sheet[data-side=\"left\"]:dir(rtl) {\n --_sx: 100%;\n }\n .sheet[data-side=\"top\"] {\n --_sy: -100%;\n }\n .sheet[data-side=\"bottom\"] {\n --_sy: 100%;\n }\n .sheet[data-state=\"open\"] {\n animation: sheet-in var(--pui-duration-considered) var(--pui-ease-drawer) both;\n }\n .sheet[data-state=\"closed\"] {\n animation: sheet-out var(--pui-motion-out) var(--pui-ease-exit) forwards;\n }\n @keyframes sheet-in {\n from {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes sheet-out {\n to {\n translate: var(--_sx) var(--_sy);\n }\n }\n @keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n }\n @keyframes dialog-out {\n to {\n opacity: 0;\n transform: scale(0.98);\n }\n }\n}\n\n/* Reduced motion: surfaces and dialogs fade without scaling or growing, over the fade tokens (restrained under reduced,\n 1ms under none; APPEARANCE A06). */\n@media (prefers-reduced-motion: reduce) {\n .surface,\n .dialog,\n .sheet {\n animation-name: fade-in !important;\n animation-duration: var(--pui-fade-in) !important;\n }\n .surface[data-state=\"closed\"],\n .dialog[data-state=\"closed\"],\n .sheet[data-state=\"closed\"] {\n animation-name: fade-out !important;\n animation-duration: var(--pui-fade-out) !important;\n }\n}\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .surface,\n :global(.pui[data-motion=\"none\"]) .surface,\n :global(.pui[data-motion=\"reduced\"]) .dialog,\n :global(.pui[data-motion=\"none\"]) .dialog,\n :global(.pui[data-motion=\"reduced\"]) .sheet,\n :global(.pui[data-motion=\"none\"]) .sheet {\n animation-name: fade-in;\n animation-duration: var(--pui-fade-in);\n }\n :global(.pui[data-motion=\"reduced\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .surface[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .dialog[data-state=\"closed\"],\n :global(.pui[data-motion=\"reduced\"]) .sheet[data-state=\"closed\"],\n :global(.pui[data-motion=\"none\"]) .sheet[data-state=\"closed\"] {\n animation-name: fade-out;\n animation-duration: var(--pui-fade-out);\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.surface {\n composes: m-overlay from global;\n}\n.dialog {\n composes: m-overlay from global;\n}\n"},{"path":"beamline/components/alert/alert.module.css","type":"registry:file","target":"src/ui/beamline/components/alert/alert.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the tone's tint, registered so a change of tone blends instead of switching */\n@property --pui-alert-tint {\n syntax: \"\";\n inherits: false;\n initial-value: transparent;\n}\n@layer components {\n /* An alert is a surface like any other, so every look frames it (blueprint's rule, pop's ink outline, ink's pen,\n mono's dashes, metal's pocket). The tone is a tint composed over the role's own fill, never a replacement, plus\n the icon in the tone's colour and the words: colour is never the only signal. */\n .alert {\n display: flex;\n gap: var(--pui-space-3);\n padding: var(--pui-space-3);\n border-radius: var(--pui-radius-card);\n background: linear-gradient(var(--pui-alert-tint), var(--pui-alert-tint)), var(--m-surface-bg);\n color: var(--pui-ink-2);\n /* a change of tone (warning → resolved) blends the tint instead of switching it */\n transition:\n var(--m-transition),\n --pui-alert-tint var(--pui-duration-standard) var(--pui-ease-default);\n }\n .alert[data-tone=\"info\"] {\n --_tone: var(--pui-blue);\n }\n .alert[data-tone=\"success\"] {\n --_tone: var(--pui-green);\n }\n .alert[data-tone=\"warning\"] {\n --_tone: var(--pui-orange);\n }\n .alert[data-tone=\"danger\"] {\n --_tone: var(--pui-red);\n }\n .alert[data-tone=\"neutral\"] {\n --_tone: var(--pui-ink-3);\n }\n .alert:not([data-tone=\"neutral\"]) {\n --pui-alert-tint: color-mix(in oklab, var(--_tone) 9%, transparent);\n }\n .icon {\n display: grid;\n flex: none;\n margin-top: var(--pui-space-0-5);\n color: var(--_tone);\n transition: color var(--pui-duration-standard) var(--pui-ease-default);\n }\n /* a new tone's glyph arrives from a little smaller, so the change of meaning is seen as well as the colour */\n .icon[data-changed] > svg {\n animation: glyph var(--pui-duration-standard) var(--pui-ease-default) both;\n }\n @keyframes glyph {\n from {\n opacity: 0;\n scale: calc(1 - 0.4 * var(--pui-motion-travel, 1));\n }\n }\n .action {\n margin-top: var(--pui-space-2);\n }\n /* a wide alert (from 36rem) keeps its action on the message's line, at the end; a narrow one puts it underneath */\n .alert[data-wide] > .body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--pui-space-4);\n align-items: center;\n }\n .alert[data-wide] > .body > :not(.action) {\n grid-column: 1;\n }\n .alert[data-wide] > .body > .action {\n grid-column: 2;\n grid-row: 1 / span var(--_rows, 1);\n margin-top: 0;\n justify-content: flex-end;\n }\n .icon > svg {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n }\n /* the fold: rows collapse to zero and the alert fades, then it unmounts; it arrives the same way, growing to its\n height where it belongs (so what sits below glides down instead of jumping) */\n .wrap {\n display: grid;\n grid-template-rows: 1fr;\n transition:\n grid-template-rows var(--pui-duration-standard) var(--pui-ease-standard),\n opacity var(--pui-duration-standard) var(--pui-ease-standard);\n }\n @starting-style {\n .wrap[data-state=\"open\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n }\n .wrap[data-state=\"closed\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n /* clips the fold, with room for the look's outer edge and shadow (pop's lip, soft's drop) so they are not cut */\n .clip {\n min-height: 0;\n margin: calc(var(--pui-space-1-5) * -1);\n padding: var(--pui-space-1-5);\n overflow: hidden;\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.alert {\n composes: m-surface from global;\n}\n"},{"path":"beamline/components/alert/alert.tsx","type":"registry:file","target":"src/ui/beamline/components/alert/alert.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport type { CSSProperties, Ref } from \"react\";\n\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { AlertDefaults } from \"./defaults\";\nexport type { AlertDefaults } from \"./defaults\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from \"lucide-react\";\nimport { Button } from \"../button/button\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useWidthAs } from \"../../hooks/use-content-width\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { focusAfterRemoval } from \"../../lib/focus\";\nimport styles from \"./alert.module.css\";\n\nexport type AlertTone = \"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\";\n\nexport interface AlertClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the wrap part; no override by default. */\n wrap?: string;\n /** Classes for the clip part; no override by default. */\n clip?: string;\n /** Classes for the icon part; no override by default. */\n icon?: string;\n /** Classes for the body part; no override by default. */\n body?: string;\n /** Classes for the title part; no override by default. */\n title?: string;\n /** Classes for the description part; no override by default. */\n description?: string;\n /** Classes for the action part; no override by default. */\n action?: string;\n /** Classes for the dismiss part; no override by default. */\n dismiss?: string;\n}\n\nexport interface AlertProps {\n /** Semantic colour of the displayed content. Defaults to \"info\". */\n tone?: AlertTone;\n /** Heading shown above the content. Defaults to no heading. */\n title?: ReactNode;\n /** What happened and what to do. */\n children?: ReactNode;\n /** Buttons or links: Retry, Update card. */\n action?: ReactNode;\n /** Replace the tone's icon, or false for none. */\n icon?: ReactNode | false;\n /** Controlled visibility; omitted by default to keep visibility locally. */\n open?: boolean;\n /** Initial visibility when uncontrolled; defaults to true. */\n defaultOpen?: boolean;\n /** Reports a request to close; no callback by default. */\n onOpenChange?: (open: boolean) => void;\n /** Shows a close button; defaults to whether onDismiss or onOpenChange is supplied. */\n dismissible?: boolean;\n /** Adds a close button; the alert folds away when open turns false. */\n onDismiss?: () => void;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: AlertClassNames;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n}\n\nconst ICON: Record = {\n info: ,\n success: ,\n warning: ,\n danger: ,\n neutral: ,\n};\n\n/** A message that stays until it is dealt with: what happened, what to do, and the action. Danger and warning are\n * announced as they appear; a dismissed alert folds its height away. */\nexport function Alert({\n tone: toneProp,\n title,\n children,\n action,\n icon,\n open: openProp,\n defaultOpen = true,\n onOpenChange,\n dismissible,\n onDismiss,\n className,\n style,\n classNames,\n ref,\n}: AlertProps) {\n const i18n = useMessages(\"alert\", englishMessages);\n\n const scopeDefaults = useComponentDefaults(\"alert\", [\"tone\"]);\n const tone = toneProp ?? scopeDefaults.tone ?? \"info\";\n\n // an older caller that only listens to onDismiss decides the removal itself, so closing is guarded and reported beside\n const [open, setOpen] = useControllable(openProp, defaultOpen);\n const canDismiss = dismissible ?? !!(onDismiss || onOpenChange);\n const [shown, setShown] = useState(open);\n useEffect(() => {\n if (open) setShown(true);\n }, [open]);\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n // a wide alert keeps its action on the message's line (read once per change of that answer)\n const wide = useWidthAs(host, (w) => w >= 576, false, shown);\n // the glyph of a tone it changed to arrives visibly; the first one is simply there\n const firstTone = useRef(tone);\n if (!shown) return null;\n return (\n {\n if (!open && e.target === e.currentTarget) setShown(false);\n }}\n >\n
\n \n {icon !== false && (\n \n {icon ?? ICON[tone]}\n \n )}\n
\n {title && (\n

\n {title}\n

\n )}\n {children && (\n
\n {children}\n
\n )}\n {action && (\n
\n {action}\n
\n )}\n
\n {canDismiss && (\n {\n focusAfterRemoval(e.currentTarget.closest(\"[data-slot=alert-wrap]\"));\n // Existing event-only callers still decide when removal happens; the new state API can close locally.\n if (dismissible !== undefined || onOpenChange !== undefined) setOpen(false);\n onOpenChange?.(false);\n onDismiss?.();\n }}\n >\n \n \n )}\n
\n \n \n );\n}\n\nexport default Alert;\n"},{"path":"beamline/components/alert/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/alert/defaults.ts","content":"/** Pure allowed presentation defaults for Alert; no component or runtime imports. */\nexport interface AlertDefaults {\n /** Shared tone setting; omit to inherit the surrounding scope or the component default. */\n tone?: \"danger\" | \"success\" | \"warning\" | \"info\" | \"neutral\";\n}\n"},{"path":"beamline/components/alert/messages.ts","type":"registry:file","target":"src/ui/beamline/components/alert/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n dismiss: \"Dismiss\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/allocation-editor/allocation-editor.module.css","type":"registry:file","target":"src/ui/beamline/components/allocation-editor/allocation-editor.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* The editor has no frame of its own: it sits in the caller's card or dialog like a field. */\n /* a size container: the footer's buttons share a narrow room (see the end) */\n .root {\n container-type: inline-size;\n display: grid;\n gap: var(--pui-gap-stack);\n min-width: 0;\n outline: none;\n }\n .root[data-disabled] {\n opacity: var(--pui-opacity-disabled);\n }\n\n .header {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n column-gap: var(--pui-space-3);\n row-gap: var(--pui-space-1);\n }\n .total {\n margin-inline-start: auto;\n font-family: var(--pui-font-numeric);\n font-variant-numeric: tabular-nums;\n font-size: var(--pui-text-sm);\n color: var(--pui-ink);\n unicode-bidi: isolate;\n }\n .description {\n flex-basis: 100%;\n font-size: var(--pui-text-xs);\n color: var(--pui-ink-3);\n }\n\n /* ── strip ─────────────────────────────────────────────────────────────────────────────────────────────────────── */\n .strip {\n display: grid;\n gap: var(--pui-space-1-5);\n padding-block-start: var(--pui-space-3); /* room for the lock glyph above a fixed seam */\n }\n .track {\n position: relative;\n height: var(--pui-control-height-sm);\n border-radius: var(--pui-radius-control);\n font-size: var(--pui-text-xs);\n isolation: isolate;\n }\n .segment {\n position: absolute;\n inset-block: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: color-mix(in oklab, var(--_fill, transparent) 78%, var(--pui-surface));\n cursor: default;\n }\n .segment:first-child {\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n }\n /* 2 px internal seams between neighbours, drawn on each segment's inline-end edge */\n .segment + .segment {\n box-shadow: inset 2px 0 0 var(--pui-line-soft);\n }\n .segment + .segment:dir(rtl) {\n box-shadow: inset -2px 0 0 var(--pui-line-soft);\n }\n .segment[data-kind=\"gap\"],\n .segment[data-kind=\"unallocated\"] {\n background: transparent;\n color: var(--pui-ink-2);\n }\n .segment[data-kind=\"unallocated\"] {\n background-image: repeating-linear-gradient(\n 135deg,\n transparent 0 6px,\n color-mix(in oklab, var(--pui-orange) 45%, transparent) 6px 7px\n );\n background-color: color-mix(in oklab, var(--pui-orange) 10%, transparent);\n }\n /* the excess sits over the last part's own end: opaque, so it reads red whatever that part's fill */\n .over {\n background: var(--pui-unmeasured-hatch), color-mix(in oklab, var(--pui-red) 34%, var(--pui-surface));\n }\n .limitMark {\n position: absolute;\n inset-block: -4px;\n width: 2px;\n margin-inline-start: -1px;\n background: var(--pui-red);\n border-radius: var(--pui-radius-pill);\n }\n .segmentLabel {\n display: flex;\n min-width: 0;\n align-items: baseline;\n gap: var(--pui-space-1);\n padding-inline: var(--pui-space-2);\n white-space: nowrap;\n color: var(--pui-ink);\n text-overflow: ellipsis;\n }\n /* label ink follows the fill it sits on: black or white, whichever reads better, chosen by the fill's luminance (y)\n at WCAG's crossover 0.179, where both give 4.58:1, so 12px text keeps 4.5:1 on any series in any look (a perceptual\n lightness cut put white on mid blues and teals at 3.65–4.44); browsers without relative colour keep the ink above */\n @supports (color: color(from red xyz-d65 x y z)) {\n .segment[data-kind=\"part\"] .segmentLabel {\n color: color(\n from color-mix(in oklab, var(--_fill, transparent) 78%, var(--pui-surface)) xyz-d65\n calc(0.9505 * round(0.679 - y)) round(0.679 - y) calc(1.089 * round(0.679 - y))\n );\n }\n }\n .segment[data-kind=\"unallocated\"] .segmentLabel,\n .segment[data-kind=\"gap\"] .segmentLabel {\n color: var(--pui-ink-2);\n }\n .segmentLock {\n width: 12px;\n height: 12px;\n flex-shrink: 0;\n align-self: center;\n }\n .segmentName {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .figure {\n font-family: var(--pui-font-numeric);\n font-variant-numeric: tabular-nums;\n unicode-bidi: isolate;\n direction: ltr;\n }\n\n .seam {\n position: absolute;\n inset-block: 0;\n width: 2px;\n margin-inline-start: -1px;\n background: var(--pui-line-strong);\n z-index: 2;\n }\n .seamLock {\n position: absolute;\n inset-block-start: -16px;\n inset-inline-start: -5px;\n width: 12px;\n height: 12px;\n color: var(--pui-ink-3);\n }\n .baseline {\n position: absolute;\n inset-block-start: calc(100% + 1px);\n width: 2px;\n height: 6px;\n margin-inline-start: -1px;\n background: var(--pui-ink-3);\n border-radius: var(--pui-radius-pill);\n }\n\n /* the handle: a grip centred on the boundary with a hit box of at least 24 px (44 on a coarse pointer) */\n .boundary {\n --_hit: var(--pui-hit-min);\n position: absolute;\n inset-block: -4px;\n width: var(--_hit);\n margin-inline-start: calc(var(--_hit) / -2);\n display: grid;\n place-items: center;\n z-index: 3;\n cursor: ew-resize;\n touch-action: pan-y;\n outline: none;\n }\n @media (pointer: coarse) {\n .boundary {\n --_hit: 44px;\n }\n }\n .grip {\n position: relative;\n width: 6px;\n height: calc(100% - 4px);\n border-radius: var(--pui-radius-pill);\n }\n .boundary:focus-visible .grip {\n outline: var(--pui-focus-width) var(--pui-focus-style) var(--pui-focus-ring);\n outline-offset: 2px;\n }\n .boundary[data-limit] .grip {\n box-shadow: 0 0 0 var(--pui-focus-width) color-mix(in oklab, var(--pui-red) 55%, transparent);\n }\n\n /* an applied entry, Cancel or an adopted save move widths without overshoot; keys and drags place at once */\n .root[data-ease] :is(.segment, .boundary, .seam, .baseline) {\n transition:\n inset-inline-start var(--pui-duration-standard) var(--pui-ease-standard),\n width var(--pui-duration-standard) var(--pui-ease-standard);\n }\n\n .scale {\n position: relative;\n height: 16px;\n font-family: var(--pui-font-numeric);\n font-variant-numeric: tabular-nums;\n font-size: var(--pui-text-2xs);\n color: var(--pui-ink-3);\n }\n .tick {\n position: absolute;\n inset-block-start: 2px;\n translate: -50% 0;\n white-space: nowrap;\n unicode-bidi: isolate;\n }\n .tick:dir(rtl) {\n translate: 50% 0;\n }\n .tick[data-edge=\"start\"] {\n translate: 0 0;\n }\n .tick[data-edge=\"end\"] {\n translate: -100% 0;\n }\n .tick[data-edge=\"end\"]:dir(rtl) {\n translate: 100% 0;\n }\n\n /* ── roster: unframed rows with soft seams ─────────────────────────────────────────────────────────────────────── */\n .roster {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .row {\n display: grid;\n gap: var(--pui-space-1);\n padding-block: var(--pui-space-2);\n }\n .row + .row {\n border-top: 1px solid var(--pui-line-soft);\n }\n .rowMain {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 112px;\n align-items: center;\n gap: var(--pui-space-3);\n min-height: 40px;\n }\n .rowLabel {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: var(--pui-space-2);\n font-size: var(--pui-text-sm);\n color: var(--pui-ink);\n }\n .swatch {\n width: 8px;\n height: 8px;\n flex-shrink: 0;\n /* a legend swatch: a third of the chip radius, so it follows roundness without turning into a dot */\n border-radius: calc(var(--pui-radius-chip) / 3);\n }\n .lock {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n color: var(--pui-ink-3);\n }\n .amountFrame {\n width: 112px;\n }\n .amountInput {\n text-align: end;\n font-family: var(--pui-font-numeric);\n font-variant-numeric: tabular-nums;\n unicode-bidi: plaintext;\n }\n .unit {\n font-size: var(--pui-text-xs);\n color: var(--pui-ink-3);\n }\n .amountText {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--pui-space-1-5);\n min-height: var(--pui-control-height-md);\n font-family: var(--pui-font-numeric);\n font-variant-numeric: tabular-nums;\n font-size: var(--pui-text-sm);\n color: var(--pui-ink-2);\n unicode-bidi: isolate;\n }\n .notSet {\n color: var(--pui-ink-3);\n }\n .rowSub {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n column-gap: var(--pui-space-3);\n row-gap: var(--pui-space-0-5);\n font-size: var(--pui-text-xs);\n line-height: 1.4;\n }\n .change {\n display: inline-flex;\n align-items: center;\n gap: var(--pui-space-1);\n font-size: var(--pui-text-xs);\n color: var(--pui-ink-2);\n animation: change-in var(--pui-motion-in) var(--pui-ease-default);\n }\n /* a change mark arrives in --pui-motion-in, rising 2px (a fade under reduced motion) */\n @keyframes change-in {\n from {\n opacity: 0;\n translate: 0 calc(2px * var(--pui-motion-travel, 1));\n }\n }\n .arrow {\n width: 12px;\n height: 12px;\n color: var(--pui-ink-3);\n }\n .arrow:dir(rtl) {\n transform: scaleX(-1);\n }\n .delta {\n font-family: var(--pui-font-numeric);\n font-variant-numeric: tabular-nums;\n color: var(--pui-ink);\n unicode-bidi: isolate;\n direction: ltr;\n }\n .notSetWord {\n color: var(--pui-ink-3);\n }\n .note {\n display: inline-flex;\n align-items: baseline;\n gap: var(--pui-space-1);\n color: var(--pui-ink-3);\n }\n .noteError {\n color: var(--pui-red);\n }\n .noteIcon {\n position: relative;\n inset-block-start: 2px;\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n }\n\n .partner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pui-space-2);\n padding-block-start: var(--pui-space-1);\n }\n .partnerPrompt {\n font-size: var(--pui-text-xs);\n color: var(--pui-ink-2);\n }\n\n .status {\n display: flex;\n align-items: baseline;\n gap: var(--pui-space-1-5);\n margin: 0;\n font-size: var(--pui-text-xs);\n color: var(--pui-ink-2);\n }\n .statusError {\n color: var(--pui-red);\n }\n .statusWarning {\n color: var(--pui-orange);\n }\n\n .footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--pui-space-2);\n }\n @container (max-width: 26rem) {\n .footerButton {\n flex: 1;\n }\n }\n\n .skeleton {\n display: grid;\n gap: var(--pui-space-2);\n }\n .skeletonTrack,\n .skeletonRow {\n display: block;\n border-radius: var(--pui-radius-control);\n background: var(--pui-surface-2);\n }\n .skeletonTrack {\n height: var(--pui-control-height-sm);\n }\n .skeletonRow {\n height: 40px;\n }\n}\n"},{"path":"beamline/components/allocation-editor/allocation-editor.tsx","type":"registry:file","target":"src/ui/beamline/components/allocation-editor/allocation-editor.tsx","content":"\"use client\";\nimport { type Translator } from \"../../runtime/messages\";\nimport { numberFormatter, useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useLocale } from \"../../runtime/localization\";\n\nimport {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { AlertCircle, ArrowRight, Lock } from \"lucide-react\";\nimport { Alert } from \"../alert/alert\";\nimport { Button } from \"../button/button\";\nimport { Select } from \"../select/select\";\nimport { FieldFrame, fieldControlClass } from \"../_shared/field\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useDrag } from \"../../hooks/use-drag\";\nimport { useElementRef } from \"../../hooks/use-element-ref\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\nimport { parseLocaleNumber } from \"../../lib/number\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { useElapsed } from \"../../hooks/use-elapsed\";\nimport {\n UNALLOCATED,\n applyTransfer,\n candidates,\n netTransfers,\n partyLabel,\n reach,\n remainder,\n sumOf,\n tidy,\n walk,\n type AllocationValue,\n type Model,\n type Transfer,\n} from \"./allocation-model\";\nimport styles from \"./allocation-editor.module.css\";\n\nexport { UNALLOCATED } from \"./allocation-model\";\nexport type { AllocationValue } from \"./allocation-model\";\n\n/** A part of the whole, in display order. Order is meaningful only when `order=\"sequence\"`. */\nexport interface AllocationItem {\n /** Stable identity, never derived from the label; must not equal UNALLOCATED. */\n id: string;\n /** Text displayed for this item. Required. */\n label: string;\n /** \"part\" (default) is a share people plan; \"gap\" is caller-declared unassigned time at this position (\"Break\"). */\n kind?: \"part\" | \"gap\";\n /** Least amount. Default 0. */\n min?: number;\n /** Greatest amount. Default `total`. */\n max?: number;\n /** A locked part keeps its amount: no handle beside it, no exact field, never a partner. */\n locked?: boolean;\n /** Why it is locked, shown in its row at rest. */\n lockReason?: ReactNode;\n /** One line under the row's label. */\n description?: ReactNode;\n /** Data colour token name (\"series-2\"), for a part the user matches elsewhere (a chart's legend). Default: one hue in\n * steps by position, so no part reads as a status; a locked part is a neutral ink tone. Gaps take none. */\n color?: string;\n}\n\n/** One zero-sum change. `amount` is a positive whole multiple of `step`. */\nexport type AllocationTransfer = Transfer;\n\nexport interface AllocationChange {\n /** Stable identifier used to match this record across updates. Required. */\n id: string;\n /** Amount before the proposed change; null means unset. Required. */\n from: number | null;\n /** Amount after the proposed change; null means unset. Required. */\n to: number | null;\n}\n\nexport interface AllocationSaveRequest {\n /** Complete allocation amounts proposed for saving. Required. */\n value: AllocationValue;\n /** Items whose amount differs from the saved baseline, in display order. */\n changes: AllocationChange[];\n /** Transfers since the baseline, netted per ordered pair. */\n transfers: Omit[];\n}\n\n/** Throw this (or any Error) from onSave to refuse the save; `itemErrors` mark rows invalid with their own words. */\nexport interface AllocationSaveError extends Error {\n /** Field-specific errors keyed by allocation item id. Omitted by default. */\n itemErrors?: Record;\n}\n\nexport interface AllocationMessages {\n /** Builds the allocated message; defaults to the built-in English wording. */\n allocated: (sum: string, total: string) => string;\n /** Builds the set trades any message; defaults to the built-in English wording. */\n setTradesAny: () => string;\n /** Builds the no neighbour message; defaults to the built-in English wording. */\n noNeighbour: () => string;\n /** Builds the takes from unallocated message; defaults to the built-in English wording. */\n takesFromUnallocated: () => string;\n /** Builds the not neighbours message; defaults to the built-in English wording. */\n notNeighbours: (a: string, b: string) => string;\n /** Builds the not set part message; defaults to the built-in English wording. */\n notSetPart: (label: string) => string;\n /** Builds the enter amount message; defaults to the built-in English wording. */\n enterAmount: (label: string) => string;\n /** Builds the cannot give away message; defaults to the built-in English wording. */\n cannotGiveAway: (label: string) => string;\n /** Builds the choose partner spoken message; defaults to the built-in English wording. */\n choosePartnerSpoken: (amount: string, partners: string[], direction: \"take\" | \"give\") => string;\n /** Builds the not applied message; defaults to the built-in English wording. */\n notApplied: (label: string) => string;\n /** Builds the assign before save message; defaults to the built-in English wording. */\n assignBeforeSave: (amount: string) => string;\n /** Builds the remove before save message; defaults to the built-in English wording. */\n removeBeforeSave: (amount: string) => string;\n /** Builds the over by message; defaults to the built-in English wording. */\n overBy: (amount: string) => string;\n /** Builds the no changes message; defaults to the built-in English wording. */\n noChanges: () => string;\n /** Builds the changed elsewhere message; defaults to the built-in English wording. */\n changedElsewhere: (summary: string) => string;\n /** Builds the items changed message; defaults to the built-in English wording. */\n itemsChanged: () => string;\n /** Builds the saved with changes message; defaults to the built-in English wording. */\n savedWithChanges: (summary: string) => string;\n /** Builds the saving message; defaults to the built-in English wording. */\n saving: (seconds?: number) => string;\n /** Builds the boundary label message; defaults to the built-in English wording. */\n boundaryLabel: (a: string, b: string) => string;\n /** Builds the pair value message; defaults to the built-in English wording. */\n pairValue: (a: string, b: string) => string;\n /** Builds the roster label message; defaults to the built-in English wording. */\n rosterLabel: () => string;\n /** Builds the trades with message; defaults to the built-in English wording. */\n tradesWith: (partners: string[]) => string;\n /** Builds the take from message; defaults to the built-in English wording. */\n takeFrom: (amount: string, partner: string) => string;\n /** Builds the give to message; defaults to the built-in English wording. */\n giveTo: (amount: string, partner: string) => string;\n /** Builds the choose partner message; defaults to the built-in English wording. */\n choosePartner: (amount: string, direction: \"take\" | \"give\") => string;\n /** Builds the moved message; defaults to the built-in English wording. */\n moved: (amount: string, from: string, to: string) => string;\n /** Builds the at min message; defaults to the built-in English wording. */\n atMin: (label: string, amount: string) => string;\n /** Builds the at max message; defaults to the built-in English wording. */\n atMax: (label: string, amount: string) => string;\n /** Builds the locked message; defaults to the built-in English wording. */\n locked: (label: string) => string;\n /** Builds the not step message; defaults to the built-in English wording. */\n notStep: (step: string) => string;\n /** Builds the not number message; defaults to the built-in English wording. */\n notNumber: () => string;\n /** Builds the unallocated message; defaults to the built-in English wording. */\n unallocated: () => string;\n /** Builds the over message; defaults to the built-in English wording. */\n over: () => string;\n /** Builds the not set message; defaults to the built-in English wording. */\n notSet: () => string;\n /** Builds the discarded message; defaults to the built-in English wording. */\n discarded: () => string;\n /** Builds the saved message; defaults to the built-in English wording. */\n saved: () => string;\n /** Builds the save failed message; defaults to the built-in English wording. */\n saveFailed: () => string;\n}\n\nfunction localizedMESSAGES(i18n: Translator): AllocationMessages {\n return {\n allocated: (sum, total) => i18n(\"ofAllocated\", { sum: sum, total: total }),\n setTradesAny: () => i18n(\"tradesWithAnyUnlockedPart\"),\n noNeighbour: () => i18n(\"noUnlockedNeighbour\"),\n takesFromUnallocated: () => i18n(\"takesFromUnallocated\"),\n notNeighbours: (a, b) => i18n(\"andAreNotNeighbours\", { a: a, b: b }),\n notSetPart: (label) => i18n(\"isNotSet\", { label: label }),\n enterAmount: (label) => i18n(\"enterAnAmountFor\", { label: label }),\n cannotGiveAway: (label) => i18n(\"canTGiveTimeAwayHere\", { label: label }),\n choosePartnerSpoken: (amount, partners, direction) =>\n direction === \"take\"\n ? i18n(\"chooseWhereComeFrom\", { amount: amount, value: i18n.list(partners, { type: \"disjunction\" }) })\n : i18n(\"chooseWhereGo\", { amount: amount, value: i18n.list(partners, { type: \"disjunction\" }) }),\n notApplied: (label) => i18n(\"changeNotApplied\", { label: label }),\n assignBeforeSave: (amount) => i18n(\"assignTheUnallocatedBeforeSaving\", { amount: amount }),\n removeBeforeSave: (amount) => i18n(\"removeBeforeSaving\", { amount: amount }),\n overBy: (amount) => i18n(\"overBy\", { amount: amount }),\n noChanges: () => i18n(\"noChangesToSave\"),\n changedElsewhere: (summary) => i18n(\"thisPlanChangedElsewhereCancelToUse\", { summary: summary }),\n itemsChanged: () => i18n(\"thePartsChangedYourUnsavedChangesWere\"),\n savedWithChanges: (summary) => i18n(\"savedWithChanges\", { summary: summary }),\n saving: (seconds) => (seconds ? i18n(\"savingS\", { seconds: seconds }) : i18n(\"saving\")),\n boundaryLabel: (a, b) => i18n(\"betweenAnd\", { a: a, b: b }),\n pairValue: (a, b) => `${a}, ${b}`,\n rosterLabel: () => i18n(\"amounts\"),\n tradesWith: (partners) => i18n(\"tradesWith\", { value: i18n.list(partners, { type: \"disjunction\" }) }),\n takeFrom: (amount, partner) => i18n(\"from\", { amount: amount, partner: partner }),\n giveTo: (amount, partner) => i18n(\"to\", { amount: amount, partner: partner }),\n choosePartner: (amount, direction) =>\n direction === \"take\" ? i18n(\"takeFrom\", { amount: amount }) : i18n(\"giveTo\", { amount: amount }),\n moved: (amount, from, to) => i18n(\"movedFromTo\", { amount: amount, from: from, to: to }),\n atMin: (label, amount) => i18n(\"canTGoBelow\", { label: label, amount: amount }),\n atMax: (label, amount) => i18n(\"canTGoAbove\", { label: label, amount: amount }),\n locked: (label) => i18n(\"isLocked\", { label: label }),\n notStep: (step) => i18n(\"changeInStepsOf\", { step: step }),\n notNumber: () => i18n(\"enterANumber\"),\n unallocated: () => i18n(\"unallocated\"),\n over: () => i18n(\"over\"),\n notSet: () => i18n(\"notSet\"),\n discarded: () => i18n(\"changesDiscarded\"),\n saved: () => i18n(\"saved\"),\n saveFailed: () => i18n(\"couldnTSave\"),\n };\n}\n\nexport type AllocationSlot =\n | \"root\"\n | \"header\"\n | \"title\"\n | \"total\"\n | \"description\"\n | \"strip\"\n | \"track\"\n | \"segment\"\n | \"segmentLabel\"\n | \"boundary\"\n | \"seam\"\n | \"baseline\"\n | \"scale\"\n | \"tick\"\n | \"roster\"\n | \"row\"\n | \"rowLabel\"\n | \"amount\"\n | \"change\"\n | \"note\"\n | \"partner\"\n | \"partnerOption\"\n | \"status\"\n | \"live\"\n | \"error\"\n | \"footer\"\n | \"cancel\"\n | \"save\";\n\nexport interface AllocationEditorProps {\n /** The whole's name and the group's accessible name: \"Session plan\". */\n label: string;\n /** Supporting text beneath the label or heading. Defaults to no supporting text. */\n description?: ReactNode;\n /** Items rendered in the component. Required. */\n items: AllocationItem[];\n /** The fixed whole, in your unit. Never changed by the component. */\n total: number;\n /** Smallest transfer; every transfer is a whole multiple. Default 1. */\n step?: number;\n /** Shift+arrow / Page keys. Default 5 × step. */\n largeStep?: number;\n /** Unit printed after allocation amounts; omitted by default to show amounts without a unit. */\n unit?: string;\n /** Formats allocation amounts; defaults to locale-aware numbers followed by unit when supplied. */\n format?: (amount: number) => string;\n /** Labels at boundaries from the cumulative offset, e.g. clock times. false hides. Default true. */\n scale?: boolean | ((offset: number) => string);\n /** Locale used for number, date or text formatting. Defaults to the runtime locale. */\n locale?: string;\n /** \"sequence\" (default): neighbours trade, boundaries drag. \"set\": no handles; an entry asks who gives. */\n order?: \"sequence\" | \"set\";\n /** Controlled amounts keyed by allocation item id; omit to use defaultValue. */\n value?: AllocationValue;\n /** Initial amounts when uncontrolled; defaults to savedValue, leaving absent item amounts unset. */\n defaultValue?: AllocationValue;\n /** Reports amounts keyed by allocation item id after an edit; no callback by default. */\n onValueChange?: (value: AllocationValue, transfer: AllocationTransfer | null) => void;\n /** Once per completed gesture: drag release, key press, applied entry, Cancel, adopted save. */\n onValueCommit?: (value: AllocationValue) => void;\n /** The persisted baseline; Cancel returns to it. Default: the first draft, moved by an accepted save. */\n savedValue?: AllocationValue;\n /** Your rule for one candidate transfer: true allows, a string refuses with those words. */\n canTransfer?: (transfer: AllocationTransfer, next: AllocationValue) => true | string;\n /** Shows Cancel and Save. Resolve with the persisted value (or nothing); throw to refuse and keep the draft. */\n onSave?: (request: AllocationSaveRequest) => Promise;\n /** Runs the cancellation action; no handler by default. */\n onCancel?: () => void;\n /** Text on the save action. Defaults to \"Save\". */\n saveLabel?: string;\n /** Text after a successful save. Defaults to \"Saved\". */\n savedLabel?: string;\n /** Text on the cancel action. Defaults to \"Cancel\". */\n cancelLabel?: string;\n /** Error message shown in place of the usual supporting text. Defaults to no error message. */\n error?: ReactNode;\n /** Shows the loading state while data or an operation is pending. Defaults to false. */\n loading?: boolean;\n /** Message shown when no data is available. Defaults to \"Nothing to allocate yet.\". */\n emptyLabel?: ReactNode;\n /** Displays the value while preventing edits. Defaults to false. */\n readOnly?: boolean;\n /** Prevents interaction with the control. Defaults to false. */\n disabled?: boolean;\n /** Hidden inputs `${name}.${id}` carry the draft in a native form submit. */\n name?: string;\n /** Functions producing allocation feedback text; defaults to the built-in English messages. */\n messages?: Partial;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: Partial>;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n}\n\nconst decimals = (n: number) => (String(n).split(\".\")[1] ?? \"\").length;\nconst same = (a: AllocationValue, b: AllocationValue, ids: string[]) =>\n ids.every((id) => (a[id] ?? null) === (b[id] ?? null));\nconst fill = (items: AllocationItem[], value: AllocationValue | undefined) =>\n Object.fromEntries(items.map((item) => [item.id, value?.[item.id] ?? null])) as AllocationValue;\n\nlet measureCanvas: CanvasRenderingContext2D | null = null;\n/** Width of a label at the strip's caption size, to decide whether it fits inside its segment. */\nfunction textWidth(text: string, font: string) {\n if (typeof document === \"undefined\") return text.length * 7;\n measureCanvas ??= document.createElement(\"canvas\").getContext(\"2d\");\n if (!measureCanvas) return text.length * 7;\n measureCanvas.font = font;\n return measureCanvas.measureText(text).width;\n}\n\ntype Pending = {\n id: string;\n amount: number;\n direction: \"take\" | \"give\";\n options: { party: string; transfer: Transfer }[];\n};\ntype Drag = { boundary: number; started: boolean; from: AllocationValue; limited: boolean };\n\n/**\n * Parts of a fixed whole, edited as transfers. Every change moves an amount between two named parts, so the whole is\n * right after every operation: drag or step a boundary between neighbours, or type an exact amount and the editor names\n * the part that gives or takes (and asks when more than one could). Locks, limits and your `canTransfer` refuse with\n * words; nothing is clamped, spread or zeroed out of sight, and Save waits for your handler.\n */\nexport function AllocationEditor({\n label,\n description,\n items,\n total,\n step = 1,\n largeStep,\n unit,\n format: formatProp,\n scale = true,\n locale: localeProp,\n order = \"sequence\",\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueCommit,\n savedValue,\n canTransfer,\n onSave,\n onCancel,\n saveLabel: saveLabelProp,\n savedLabel: savedLabelProp,\n cancelLabel: cancelLabelProp,\n error,\n loading,\n emptyLabel: emptyLabelProp,\n readOnly,\n disabled,\n name,\n messages: messagesProp,\n className,\n style,\n classNames,\n ref,\n}: AllocationEditorProps) {\n const i18n = useMessages(\"allocation-editor\", englishMessages);\n const saveLabel = saveLabelProp === undefined ? i18n(\"saveLabel\") : saveLabelProp;\n const savedLabel = savedLabelProp === undefined ? i18n(\"savedLabel\") : savedLabelProp;\n const cancelLabel = cancelLabelProp === undefined ? i18n(\"cancelLabel\") : cancelLabelProp;\n const emptyLabel = emptyLabelProp === undefined ? i18n(\"emptyLabel\") : emptyLabelProp;\n\n const locale = useLocale(localeProp);\n\n const text = useMemo(() => ({ ...localizedMESSAGES(i18n), ...messagesProp }), [messagesProp, i18n]);\n const ids = useMemo(() => items.map((item) => item.id), [items]);\n const idKey = ids.join(\"\\u0000\");\n const numberFormat = useMemo(\n () => numberFormatter(locale, { maximumFractionDigits: Math.max(decimals(step), 2) }),\n [locale, step],\n );\n const format = useCallback(\n (amount: number) => formatProp?.(amount) ?? `${numberFormat.format(amount)}${unit ? ` ${unit}` : \"\"}`,\n [formatProp, numberFormat, unit],\n );\n const big = Math.max(1, Math.round((largeStep ?? step * 5) / step));\n const model: Model = useMemo(\n () => ({\n items,\n total,\n step,\n order,\n format,\n canTransfer,\n text: {\n locked: text.locked,\n atMin: text.atMin,\n atMax: text.atMax,\n notNeighbours: text.notNeighbours,\n notSetPart: text.notSetPart,\n cannotGiveAway: text.cannotGiveAway,\n unallocated: text.unallocated,\n over: text.over,\n },\n }),\n [items, total, step, order, format, canTransfer, text],\n );\n\n // ── state: the draft, its baseline and the transfers between them ─────────────────────────────────────────────\n // a change reports the transfer that made it, and a new set of parts resets the draft without a report: the hook\n // holds the draft and the report is made beside it. The baseline follows savedValue, or what the last save adopted.\n const [held, setHeld] = useControllable(valueProp, () => fill(items, defaultValue ?? savedValue));\n const value = useMemo(() => fill(items, held), [items, held]);\n const [heldBaseline, setBaseline] = useControllable(savedValue, () =>\n fill(items, savedValue ?? defaultValue),\n );\n const baseline = useMemo(() => fill(items, heldBaseline), [items, heldBaseline]);\n const log = useRef([]);\n const dirty = !same(value, baseline, ids);\n const [saving, setSaving] = useState(false);\n const [savedNote, setSavedNote] = useState(null);\n const [saveError, setSaveError] = useState<{ message: ReactNode; items: Record } | null>(null);\n const [reason, setReason] = useState<{ text: string; boundary?: number; row?: string } | null>(null);\n const [limit, setLimit] = useState<{ boundary: number; edge: \"start\" | \"end\" } | null>(null);\n const [live, setLive] = useState(\"\");\n const [drafts, setDrafts] = useState>({});\n const [pending, setPending] = useState(null);\n const [partnerChoice, setPartnerChoice] = useState(\"\");\n const [ease, setEase] = useState(false);\n const [elsewhere, setElsewhere] = useState(null);\n const [drag, setDrag] = useState(null);\n const reduced = useReducedMotionSafe();\n const inert = readOnly || disabled || saving;\n\n const root = useRef(null);\n const attach = useComposedRef(root, ref);\n // the track appears once items have loaded: the boundaries' drag attaches to it then\n const [track, attachTrack] = useElementRef();\n const fields = useRef(new Map());\n const boundaryEls = useRef(new Map());\n const focusOption = useRef(false);\n const [trackWidth, setTrackWidth] = useState(0);\n const [font, setFont] = useState(\"12px sans-serif\");\n useLayoutEffect(() => {\n const el = track.current;\n if (!el) return;\n const style = getComputedStyle(el);\n setFont(`12px ${style.fontFamily}`);\n const observer = new ResizeObserver(() => setTrackWidth(el.getBoundingClientRect().width));\n observer.observe(el);\n setTrackWidth(el.getBoundingClientRect().width);\n return () => observer.disconnect();\n }, [track, loading, items.length, i18n]);\n\n // the set of parts changed: an unsaved draft for other parts would be meaningless\n const lastIds = useRef(idKey);\n useEffect(() => {\n if (lastIds.current === idKey) return;\n lastIds.current = idKey;\n log.current = [];\n setDrafts({});\n setPending(null);\n setHeld(fill(items, heldBaseline));\n setLive(text.itemsChanged());\n }, [idKey]); // eslint-disable-line react-hooks/exhaustive-deps -- only a change of parts resets\n\n // the baseline moved elsewhere: keep the person's draft and say so; follow it when there is no draft\n const lastSaved = useRef(savedValue);\n useEffect(() => {\n const previous = lastSaved.current;\n lastSaved.current = savedValue;\n if (!savedValue || !previous || same(fill(items, previous), fill(items, savedValue), ids)) return;\n if (same(value, fill(items, previous), ids)) {\n setHeld(fill(items, savedValue));\n setElsewhere(null);\n } else\n setElsewhere(\n items\n .map((item) => (savedValue[item.id] == null ? text.notSet() : numberFormat.format(savedValue[item.id]!)))\n .join(\" / \"),\n );\n }, [savedValue]); // eslint-disable-line react-hooks/exhaustive-deps -- reacts to the caller's baseline only\n\n const elapsed = useElapsed(!!saving);\n\n useEffect(() => {\n if (!focusOption.current || !pending) return;\n focusOption.current = false;\n root.current?.querySelector(\"[data-slot=allocation-partner-option]\")?.focus();\n }, [pending]);\n\n const commitValue = (next: AllocationValue, transfer: Transfer | null) => {\n setHeld(next);\n onValueChange?.(next, transfer);\n };\n const labelOf = (id: string, at: AllocationValue = value) => partyLabel(model, id, at);\n const amountText = (id: string, at: AllocationValue) => {\n const amount = at[id];\n return amount == null ? text.notSet() : format(amount);\n };\n const pairText = (a: string, b: string, at: AllocationValue) =>\n text.pairValue(\n `${labelOf(a, at)} ${a === UNALLOCATED ? format(Math.abs(remainder(model, at))) : amountText(a, at)}`,\n `${labelOf(b, at)} ${b === UNALLOCATED ? format(Math.abs(remainder(model, at))) : amountText(b, at)}`,\n );\n const everything = (at: AllocationValue) =>\n items.map((item) => `${item.label} ${amountText(item.id, at)}`).join(\", \");\n /** Any operation other than finishing the pending entry discards it, and says so. */\n const discardPending = (except?: string) => {\n if (!pending || pending.id === except) return null;\n const message = text.notApplied(labelOf(pending.id));\n setPending(null);\n setDrafts((all) => {\n const next = { ...all };\n delete next[pending.id];\n return next;\n });\n return message;\n };\n /** Shared by every input: record the transfers, leave the resolved/saved state, move the draft. */\n const move = (next: AllocationValue, transfers: Transfer[], gentle: boolean) => {\n log.current.push(...transfers);\n setSavedNote(null);\n setEase(gentle && !reduced);\n commitValue(next, transfers.length === 1 ? transfers[0] : (transfers.at(-1) ?? null));\n };\n\n // ── the strip: segments, boundaries (pairs of neighbours) and seams ──────────────────────────────────────────────\n const rest = remainder(model, value);\n const sum = sumOf(items, value);\n const scaleTotal = Math.max(total, sum);\n const pct = (amount: number) => `${(amount / scaleTotal) * 100}%`;\n const drawn = items.filter((item) => value[item.id] != null);\n const offsets = new Map();\n {\n let at = 0;\n for (const item of drawn) {\n offsets.set(item.id, at);\n at = tidy(at + (value[item.id] ?? 0));\n }\n }\n type Boundary = { index: number; a: string; b: string; offset: number };\n const boundaries: Boundary[] = [];\n const seams: { offset: number; locked: string }[] = [];\n if (order === \"sequence\") {\n drawn.forEach((item, i) => {\n const next = drawn[i + 1];\n const offset = tidy((offsets.get(item.id) ?? 0) + (value[item.id] ?? 0));\n if (next) {\n const neighbours = Math.abs(items.indexOf(item) - items.indexOf(next)) === 1;\n if (item.locked || next.locked) seams.push({ offset, locked: item.locked ? item.id : next.id });\n else if (neighbours) boundaries.push({ index: boundaries.length, a: item.id, b: next.id, offset });\n } else if (rest > 0 && !item.locked)\n boundaries.push({ index: boundaries.length, a: item.id, b: UNALLOCATED, offset });\n });\n }\n const stepsInWhole = Math.ceil(scaleTotal / step) + 1;\n const baselineOffsets = useMemo(() => {\n if (!dirty) return [];\n let at = 0;\n const marks: number[] = [];\n for (const item of items) {\n if (baseline[item.id] == null) continue;\n at = tidy(at + (baseline[item.id] ?? 0));\n marks.push(at);\n }\n return marks.filter((mark) => mark > 0 && mark < scaleTotal);\n }, [dirty, items, baseline, scaleTotal]);\n\n // ── directional moves: boundary keys and drag ────────────────────────────────────────────────────────────────────\n /** Positive `steps` grow the part before the boundary (toward the end), negative shrink it. */\n const moveBoundary = (boundary: Boundary, steps: number, from: AllocationValue, via: Transfer[\"via\"]) => {\n const grow = steps > 0;\n const result = walk(\n model,\n from,\n grow ? boundary.b : boundary.a,\n grow ? boundary.a : boundary.b,\n Math.abs(steps),\n via,\n );\n const transfers =\n result.taken > 0\n ? [\n {\n from: grow ? boundary.b : boundary.a,\n to: grow ? boundary.a : boundary.b,\n amount: tidy(result.taken * step),\n via,\n },\n ]\n : [];\n return { ...result, transfers, edge: grow ? (\"end\" as const) : (\"start\" as const) };\n };\n const rtl = () => (root.current ? getComputedStyle(root.current).direction === \"rtl\" : false);\n\n const onBoundaryKey = (boundary: Boundary) => (e: ReactKeyboardEvent) => {\n if (e.key === \"Escape\" && drag) {\n e.preventDefault();\n e.stopPropagation();\n commitValue(drag.from, null);\n setDrag(null);\n return;\n }\n if (inert) return;\n const visual = rtl() ? -1 : 1;\n const amountOf = (n: number) => (e.shiftKey ? n * big : n);\n const map: Record = {\n ArrowRight: amountOf(visual),\n ArrowLeft: amountOf(-visual),\n ArrowUp: amountOf(1),\n ArrowDown: amountOf(-1),\n PageUp: big,\n PageDown: -big,\n End: stepsInWhole,\n Home: -stepsInWhole,\n };\n const steps = map[e.key];\n if (steps === undefined) return;\n e.preventDefault();\n const discarded = discardPending();\n const result = moveBoundary(boundary, steps, value, \"keyboard\");\n if (result.transfers.length) move(result.value, result.transfers, false);\n if (result.reason) {\n setLimit({ boundary: boundary.index, edge: result.edge });\n setReason({ text: result.reason, boundary: boundary.index });\n setLive(result.reason);\n } else {\n setLimit(null);\n setReason(null);\n setLive(discarded ?? \"\");\n }\n if (discarded && result.reason) setLive(`${discarded} ${result.reason}`);\n if (result.transfers.length) onValueCommit?.(result.value);\n };\n\n // every boundary on one shared drag over the track (the boundary found from the press): focus moves to it, the value\n // follows in steps, and Escape or a lost pointer puts back the value from before the press\n const dragging = useRef(null);\n const hold = (d: Drag | null) => {\n dragging.current = d;\n setDrag(d);\n };\n const boundaryOf = (d: Drag) => boundaries.find((candidate) => candidate.index === d.boundary);\n useDrag(\n track,\n {\n onPress: (_, e) => {\n const el = (e.target as Element).closest(\"[data-slot=allocation-boundary]\");\n if (inert || dragging.current || !el?.dataset.index) return false;\n el.focus();\n hold({ boundary: Number(el.dataset.index), started: false, from: value, limited: false });\n },\n onMove: (p) => {\n const d = dragging.current;\n const boundary = d && boundaryOf(d);\n if (!d || !boundary) return;\n const discarded = d.started ? null : discardPending();\n if (discarded) setLive(discarded);\n const width = track.current?.getBoundingClientRect().width || 1;\n const steps = Math.round(((p.dx * (rtl() ? -1 : 1)) / width) * (scaleTotal / step));\n const result = moveBoundary(boundary, steps, d.from, \"drag\");\n if (!same(result.value, value, ids)) {\n setSavedNote(null);\n setEase(false);\n commitValue(result.value, result.transfers[0] ?? null);\n }\n if (result.reason && !d.limited) {\n setReason({ text: result.reason, boundary: boundary.index });\n setLive(result.reason);\n }\n setLimit(result.reason ? { boundary: boundary.index, edge: result.edge } : null);\n hold({ ...d, started: true, limited: d.limited || !!result.reason });\n },\n onEnd: () => {\n const d = dragging.current;\n const boundary = d && boundaryOf(d);\n hold(null);\n if (!d || !boundary || same(value, d.from, ids)) return;\n // the drag moved one pair: record it as one netted transfer from where it started\n const before = d.from[boundary.a] ?? 0;\n const after = value[boundary.a] ?? 0;\n const amount = tidy(after - before);\n if (boundary.a !== UNALLOCATED && amount !== 0)\n log.current.push(\n amount > 0\n ? { from: boundary.b, to: boundary.a, amount, via: \"drag\" }\n : { from: boundary.a, to: boundary.b, amount: -amount, via: \"drag\" },\n );\n if (!d.limited) setLive(pairText(boundary.a, boundary.b, value).replace(/$/, \".\"));\n onValueCommit?.(value);\n },\n onTap: () => hold(null),\n onCancel: () => {\n const d = dragging.current;\n hold(null);\n if (d) commitValue(d.from, null);\n },\n onAbandon: () => hold(null),\n },\n { axis: \"x\" },\n );\n\n // ── exact entry ──────────────────────────────────────────────────────────────────────────────────────────────────\n type Proposal =\n | { kind: \"none\" }\n | { kind: \"error\"; message: string }\n | { kind: \"one\"; transfer: Transfer; partner: string }\n | { kind: \"many\"; options: { party: string; transfer: Transfer }[]; amount: number; direction: \"take\" | \"give\" };\n const propose = (id: string, typed: string): Proposal => {\n const item = items.find((candidate) => candidate.id === id);\n if (!item) return { kind: \"none\" };\n if (!typed.trim()) return { kind: \"error\", message: text.enterAmount(item.label) };\n const proposal = parseLocaleNumber(typed, locale);\n if (proposal === null) return { kind: \"error\", message: text.notNumber() };\n const current = value[id] ?? 0;\n const delta = tidy(proposal - current);\n if (delta === 0 && value[id] != null) return { kind: \"none\" };\n if (Math.abs(delta / step - Math.round(delta / step)) > 1e-6)\n return { kind: \"error\", message: text.notStep(format(step)) };\n if (proposal > (item.max ?? total) + 1e-9)\n return { kind: \"error\", message: text.atMax(item.label, format(item.max ?? total)) };\n if (proposal < (item.min ?? 0) - 1e-9)\n return { kind: \"error\", message: text.atMin(item.label, format(item.min ?? 0)) };\n const all = candidates(model, value, id, delta);\n const allowed = all.filter((candidate) => !candidate.reason);\n if (!allowed.length)\n return {\n kind: \"error\",\n message: all.length ? all.map((candidate) => candidate.reason).join(\" \") : text.noNeighbour(),\n };\n if (allowed.length === 1) return { kind: \"one\", transfer: allowed[0].transfer, partner: allowed[0].party };\n return {\n kind: \"many\",\n options: allowed.map(({ party, transfer }) => ({ party, transfer })),\n amount: Math.abs(delta),\n direction: delta > 0 ? \"take\" : \"give\",\n };\n };\n const applyEntry = (transfer: Transfer, id: string) => {\n const next = applyTransfer(value, transfer);\n const discarded = discardPending(id);\n move(next, [transfer], true);\n setPending(null);\n setDrafts((all) => {\n const copy = { ...all };\n delete copy[id];\n return copy;\n });\n setReason(null);\n setLimit(null);\n const other = transfer.from === id ? transfer.to : transfer.from;\n setLive(\n [\n discarded,\n text.moved(format(transfer.amount), labelOf(transfer.from), labelOf(transfer.to, next)),\n `${pairText(id, other, next)}.`,\n ]\n .filter(Boolean)\n .join(\" \"),\n );\n onValueCommit?.(next);\n };\n const submitEntry = (id: string, fromBlur = false) => {\n const typed = drafts[id];\n if (typed === undefined) return;\n const proposal = propose(id, typed);\n if (proposal.kind === \"none\") {\n setDrafts((all) => {\n const copy = { ...all };\n delete copy[id];\n return copy;\n });\n setReason(null);\n return;\n }\n if (proposal.kind === \"error\") {\n setReason({ text: proposal.message, row: id });\n if (!fromBlur) setLive(proposal.message);\n return;\n }\n if (proposal.kind === \"one\") {\n applyEntry(proposal.transfer, id);\n return;\n }\n if (fromBlur) return;\n const discarded = discardPending(id);\n setReason(null);\n setPartnerChoice(\"\");\n setPending({ id, amount: proposal.amount, direction: proposal.direction, options: proposal.options });\n focusOption.current = true;\n setLive(\n [\n discarded,\n text.choosePartnerSpoken(\n format(proposal.amount),\n proposal.options.map((option) => labelOf(option.party)),\n proposal.direction,\n ),\n ]\n .filter(Boolean)\n .join(\" \"),\n );\n };\n const reachable = (id: string, direction: 1 | -1) => {\n const item = items.find((candidate) => candidate.id === id);\n if (!item) return value[id] ?? 0;\n let best = value[id] ?? 0;\n for (const candidate of candidates(model, value, id, direction * step)) {\n const pair = direction > 0 ? { from: candidate.party, to: id } : { from: id, to: candidate.party };\n const result = walk(model, value, pair.from, pair.to, stepsInWhole, \"entry\");\n const reached = result.value[id] ?? 0;\n best = direction > 0 ? Math.max(best, reached) : Math.min(best, reached);\n }\n return best;\n };\n const onFieldKey = (id: string) => (e: ReactKeyboardEvent) => {\n const current = drafts[id];\n const base = parseLocaleNumber(current ?? \"\", locale) ?? value[id] ?? 0;\n const set = (n: number) => {\n e.preventDefault();\n setDrafts((all) => ({ ...all, [id]: numberFormat.format(tidy(n)) }));\n };\n if (e.key === \"Enter\") {\n e.preventDefault();\n submitEntry(id);\n } else if (e.key === \"Escape\") {\n if (current === undefined && pending?.id !== id) return;\n e.preventDefault();\n e.stopPropagation();\n setDrafts((all) => {\n const copy = { ...all };\n delete copy[id];\n return copy;\n });\n if (pending?.id === id) setPending(null);\n setReason(null);\n } else if (e.key === \"ArrowUp\") set(base + (e.shiftKey ? big : 1) * step);\n else if (e.key === \"ArrowDown\") set(base - (e.shiftKey ? big : 1) * step);\n else if (e.key === \"PageUp\") set(base + big * step);\n else if (e.key === \"PageDown\") set(base - big * step);\n else if (e.key === \"Home\") set(reachable(id, -1));\n else if (e.key === \"End\") set(reachable(id, 1));\n };\n\n // ── save and cancel ──────────────────────────────────────────────────────────────────────────────────────────────\n const blocked =\n rest > 0\n ? text.assignBeforeSave(format(rest))\n : rest < 0\n ? `${text.overBy(format(-rest))} · ${text.removeBeforeSave(format(-rest))}`\n : null;\n const canSave = dirty && !blocked && !saving && !inert;\n const changes: AllocationChange[] = items\n .filter((item) => (value[item.id] ?? null) !== (baseline[item.id] ?? null))\n .map((item) => ({ id: item.id, from: baseline[item.id] ?? null, to: value[item.id] ?? null }));\n const changeSummary = (list: AllocationChange[]) =>\n list\n .map(\n (change) =>\n `${labelOf(change.id)} ${change.from == null ? text.notSet() : numberFormat.format(change.from)} → ${change.to == null ? text.notSet() : numberFormat.format(change.to)}`,\n )\n .join(\" · \");\n const cancel = () => {\n if (!dirty || saving) return;\n discardPending();\n log.current = [];\n setDrafts({});\n setPending(null);\n setReason(null);\n setLimit(null);\n setSaveError(null);\n setElsewhere(null);\n setEase(!reduced);\n commitValue(baseline, null);\n setLive(`${text.discarded()} ${everything(baseline)}.`);\n onValueCommit?.(baseline);\n onCancel?.();\n };\n const save = async () => {\n if (!onSave || !canSave) return;\n const request: AllocationSaveRequest = { value, changes, transfers: netTransfers(log.current) };\n setSaving(true);\n setSaveError(null);\n setReason(null);\n try {\n const persisted = await onSave(request);\n const adopted = persisted ? fill(items, persisted) : value;\n const differs = items\n .filter((item) => (adopted[item.id] ?? null) !== (value[item.id] ?? null))\n .map((item) => ({ id: item.id, from: value[item.id] ?? null, to: adopted[item.id] ?? null }));\n log.current = [];\n setBaseline(adopted);\n setElsewhere(null);\n if (differs.length) {\n setEase(!reduced);\n commitValue(adopted, null);\n onValueCommit?.(adopted);\n }\n const summary = changeSummary(differs);\n setSavedNote(differs.length ? text.savedWithChanges(summary) : text.saved());\n setLive(\n `${text.saved()} ${everything(adopted)}.${differs.length ? ` ${differs.map((d) => i18n(\"wasSavedAs\", { value: labelOf(d.id), value2: amountText(d.id, adopted) })).join(\" \")}` : \"\"}`,\n );\n } catch (thrown) {\n const failure = thrown as AllocationSaveError;\n setSaveError({ message: failure?.message || String(thrown), items: failure?.itemErrors ?? {} });\n } finally {\n setSaving(false);\n }\n };\n\n // ── status line ──────────────────────────────────────────────────────────────────────────────────────────────────\n const statusError = error ?? (reason && !reason.row ? reason.text : null);\n const status: ReactNode =\n statusError ??\n (saving\n ? text.saving(elapsed >= 2 ? elapsed : undefined)\n : (elsewhere && text.changedElsewhere(elsewhere)) ||\n blocked ||\n savedNote ||\n (dirty\n ? changeSummary(changes)\n : `${text.allocated(format(sum), format(total))}${order === \"set\" ? ` · ${text.setTradesAny()}` : \"\"}`));\n const statusIsError = !!statusError || (!!blocked && !saving);\n // short of the whole is a to-do (amber); over it, or a refused save, is an error (red)\n const statusTone = !statusIsError ? undefined : !statusError && rest > 0 ? \"warning\" : \"danger\";\n\n // ── notes under each row (rest), the trade preview while typing, and errors ─────────────────────────────────────\n const noteFor = (item: AllocationItem): ReactNode => {\n if (saveError?.items[item.id]) return saveError.items[item.id];\n if (reason?.row === item.id) return reason.text;\n const typed = drafts[item.id];\n if (typed !== undefined && pending?.id !== item.id) {\n const proposal = propose(item.id, typed);\n if (proposal.kind === \"one\") {\n const take = proposal.transfer.to === item.id;\n return take\n ? text.takeFrom(format(proposal.transfer.amount), labelOf(proposal.partner))\n : text.giveTo(format(proposal.transfer.amount), labelOf(proposal.partner));\n }\n }\n if (item.locked) return item.lockReason ?? text.locked(item.label);\n if (readOnly || disabled) return item.description;\n if (value[item.id] == null) return text.takesFromUnallocated();\n if (order === \"set\") return item.description;\n const index = items.indexOf(item);\n const partners = [items[index - 1], items[index + 1]]\n .filter(\n (neighbour): neighbour is AllocationItem => !!neighbour && !neighbour.locked && value[neighbour.id] != null,\n )\n .map((neighbour) => neighbour.label);\n // which parts it trades with is how the strip works, not what the row says: it waits for the row's attention\n // (hover, focus in its field, a change in flight) and is always there on touch; the description stays in sight\n const trades = (\n \n {item.description ? \"· \" : \"\"}\n {partners.length ? text.tradesWith(partners) : text.noNeighbour()}\n \n );\n return item.description ? (\n <>\n {item.description} {trades}\n \n ) : (\n trades\n );\n };\n const noteIsError = (id: string) => !!saveError?.items[id] || reason?.row === id;\n\n // ── ticks: start, each boundary, end; a middle label that would collide is dropped ──────────────────────────────\n const tickLabel = (offset: number) => (typeof scale === \"function\" ? scale(offset) : numberFormat.format(offset));\n const ticks = useMemo(() => {\n if (scale === false) return [];\n const points = [0, ...drawn.map((item) => tidy((offsets.get(item.id) ?? 0) + (value[item.id] ?? 0)))];\n if (!points.includes(total)) points.push(total);\n const unique = [...new Set(points)].filter((point) => point <= scaleTotal).sort((a, b) => a - b);\n const width = trackWidth || 1;\n const measured = unique.map((offset) => ({\n offset,\n text: tickLabel(offset),\n x: (offset / scaleTotal) * width,\n }));\n const kept: typeof measured = [];\n const last = measured.at(-1);\n for (const tick of measured) {\n const half = textWidth(tick.text, font) / 2 + 6;\n const previous = kept.at(-1);\n const end = tick === last;\n if (previous && tick.x - half < previous.x + textWidth(previous.text, font) / 2 + 6) {\n if (end && kept.length > 1) kept.pop();\n else if (!end) continue;\n }\n if (!end && last && tick.x + half > last.x - textWidth(last.text, font) / 2 - 6) continue;\n kept.push(tick);\n }\n return kept;\n }, [scale, drawn, offsets, value, total, scaleTotal, trackWidth, font]); // eslint-disable-line react-hooks/exhaustive-deps -- derived per render inputs\n\n const slot = (name: AllocationSlot) => classNames?.[name];\n /** Parts are one hue (series-1's) in lightness steps by position: a part is not a status, so it never takes a tone\n * of its own (a red \"Review\" read as an error). Tones stay for what the user acts on: over is red, unallocated\n * amber. A locked part is a neutral ink tone, and its lock glyph says why. */\n const seriesOf = (item: AllocationItem) => {\n if (item.color) return `var(--pui-${item.color})`;\n if (item.locked) return \"var(--pui-ink-3)\";\n const steps = items.filter((candidate) => candidate.kind !== \"gap\" && !candidate.locked && !candidate.color);\n const index = steps.indexOf(item);\n const lightness = steps.length < 2 ? 0.58 : 0.46 + (0.28 * index) / (steps.length - 1);\n return `oklch(from var(--pui-series-1) ${lightness.toFixed(3)} c h)`;\n };\n /** A segment says its name and amount when both fit, then the more useful one (the amount for a part, whose name is in\n * its roster row; the name for a gap, the remainder or the excess), and keeps the name for assistive reading. */\n const segmentLabel = (name: string, amount: string, width: number, nameFirst: boolean, locked = false) => {\n const glyph = locked && width >= 28;\n if (glyph) width -= 16;\n const both = !!amount && textWidth(`${name} ${amount}`, font) + 16 <= width;\n const nameFits = textWidth(name, font) + 12 <= width;\n const amountFits = !!amount && textWidth(amount, font) + 12 <= width;\n const showName = both || ((nameFirst || !amount) && nameFits);\n const showAmount = both || (!showName && amountFits);\n return (\n \n {glyph && }\n {name}\n {showAmount && {amount}}\n \n );\n };\n\n // ── render ───────────────────────────────────────────────────────────────────────────────────────────────────────\n const titleId = `${useStableId()}-title`;\n const editable = !readOnly && !disabled;\n return (\n \n
\n \n {label}\n \n \n {format(total)}\n \n {description && (\n \n {description}\n \n )}\n
\n\n {loading ? (\n
\n \n \n \n \n
\n ) : items.length === 0 ? (\n

{emptyLabel}

\n ) : (\n <>\n \n
\n {drawn.map((item) => {\n const amount = value[item.id] ?? 0;\n const width = (amount / scaleTotal) * trackWidth;\n const gap = item.kind === \"gap\";\n return (\n {\n if (!editable || item.locked) return;\n e.preventDefault();\n const field = fields.current.get(item.id);\n field?.focus();\n field?.select();\n }}\n >\n {segmentLabel(item.label, numberFormat.format(amount), width, gap, item.locked)}\n
\n );\n })}\n {rest > 0 && (\n \n {segmentLabel(text.unallocated(), format(rest), (rest / scaleTotal) * trackWidth, true)}\n \n )}\n {rest < 0 && (\n <>\n \n {segmentLabel(text.overBy(format(-rest)), \"\", (-rest / scaleTotal) * trackWidth, true)}\n \n \n \n )}\n {seams.map((seam) => (\n \n \n \n ))}\n {baselineOffsets\n .filter((mark) => !boundaries.some((boundary) => boundary.offset === mark))\n .map((mark) => (\n \n ))}\n {editable &&\n boundaries.map((boundary) => {\n const range = reach(model, value, boundary.a, boundary.b, stepsInWhole);\n const atLimit = limit?.boundary === boundary.index ? limit.edge : undefined;\n return (\n {\n if (el) boundaryEls.current.set(boundary.index, el);\n else boundaryEls.current.delete(boundary.index);\n }}\n role=\"slider\"\n tabIndex={0}\n aria-label={text.boundaryLabel(labelOf(boundary.a), labelOf(boundary.b))}\n aria-orientation=\"horizontal\"\n aria-valuenow={boundary.offset}\n aria-valuemin={tidy(boundary.offset - range.back * step)}\n aria-valuemax={tidy(boundary.offset + range.ahead * step)}\n aria-valuetext={pairText(boundary.a, boundary.b, value)}\n aria-readonly={saving || undefined}\n data-slot=\"allocation-boundary\"\n data-index={boundary.index}\n data-limit={atLimit}\n data-dragging={drag?.boundary === boundary.index && drag.started ? \"\" : undefined}\n className={cn(styles.boundary, slot(\"boundary\"))}\n style={{ insetInlineStart: pct(boundary.offset) }}\n onKeyDown={onBoundaryKey(boundary)}\n >\n \n \n );\n })}\n \n {ticks.length > 0 && (\n
\n {ticks.map((tick, i) => (\n \n {tick.text}\n \n ))}\n
\n )}\n \n\n \n {items.map((item) => {\n const amount = value[item.id];\n const before = baseline[item.id] ?? null;\n const changed = (amount ?? null) !== before;\n const noteId = `${titleId}-${item.id}-note`;\n const changeId = `${titleId}-${item.id}-change`;\n const invalid = noteIsError(item.id);\n const typed = drafts[item.id];\n const isPending = pending?.id === item.id;\n const note = noteFor(item);\n return (\n \n
\n \n {item.kind !== \"gap\" && (\n \n )}\n {item.locked && }\n {item.label}\n \n {editable && !item.locked ? (\n {unit} : undefined}\n >\n {\n if (el) fields.current.set(item.id, el);\n else fields.current.delete(item.id);\n }}\n data-slot=\"allocation-amount\"\n role=\"spinbutton\"\n inputMode={decimals(step) ? \"decimal\" : \"numeric\"}\n autoComplete=\"off\"\n aria-label={item.label}\n aria-valuenow={amount ?? undefined}\n aria-valuetext={amount == null ? text.notSet() : format(amount)}\n aria-invalid={invalid || undefined}\n aria-errormessage={invalid ? noteId : undefined}\n aria-describedby={[noteId, changed ? changeId : null].filter(Boolean).join(\" \")}\n aria-readonly={saving || undefined}\n readOnly={saving}\n placeholder={amount == null ? \"—\" : undefined}\n value={typed ?? (amount == null ? \"\" : numberFormat.format(amount))}\n onChange={(e) => {\n const typedValue = e.target.value;\n setDrafts((all) => ({ ...all, [item.id]: typedValue }));\n if (pending?.id === item.id) setPending(null);\n if (reason?.row === item.id) setReason(null);\n }}\n onKeyDown={onFieldKey(item.id)}\n onBlur={(e) => {\n const next = e.relatedTarget as HTMLElement | null;\n if (next?.closest(`[data-slot=allocation-partner]`)) return;\n submitEntry(item.id, true);\n }}\n className={cn(fieldControlClass, styles.amountInput, slot(\"amount\"))}\n />\n \n ) : (\n \n {item.locked && }\n {amount == null ? (\n <>\n {\"—\"} {text.notSet()}\n \n ) : (\n format(amount)\n )}\n \n )}\n
\n {(changed || note || (amount == null && editable && !item.locked)) && (\n
\n {changed && (\n \n {before == null ? \"—\" : numberFormat.format(before)}\n \n {amount == null ? \"—\" : numberFormat.format(amount)}\n \n {(() => {\n if (amount == null || before == null) return i18n(\"notMeasured\");\n const delta = tidy(amount - before);\n return `${delta > 0 ? \"+\" : \"−\"}${numberFormat.format(Math.abs(delta))}`;\n })()}\n \n {i18n(\"changed\")}\n \n )}\n {amount == null && editable && !item.locked && (\n {text.notSet()}\n )}\n {note && (\n \n {invalid && }\n {note}\n \n )}\n
\n )}\n {isPending && pending && (\n \n \n {text.choosePartner(format(pending.amount), pending.direction)}\n \n {order === \"set\" && pending.options.length > 4 ? (\n <>\n ({\n value: option.party,\n label: labelOf(option.party),\n }))}\n />\n {\n const option = pending.options.find((candidate) => candidate.party === partnerChoice);\n if (!option) return;\n applyEntry(option.transfer, item.id);\n fields.current.get(item.id)?.focus();\n }}\n >\n {i18n(\"apply\")}\n \n \n ) : (\n pending.options.map((option) => (\n {\n if (e.key !== \"Escape\") return;\n e.preventDefault();\n e.stopPropagation();\n setPending(null);\n setDrafts((all) => {\n const copy = { ...all };\n delete copy[item.id];\n return copy;\n });\n fields.current.get(item.id)?.focus();\n }}\n onClick={() => {\n applyEntry(option.transfer, item.id);\n fields.current.get(item.id)?.focus();\n }}\n >\n {labelOf(option.party)}\n \n ))\n )}\n \n )}\n {name && }\n \n );\n })}\n \n\n \n {statusIsError && }\n {status}\n

\n \n )}\n\n \n {live}\n \n\n {saveError && (\n
\n \n {saveError.message}\n \n
\n )}\n\n {onSave && editable && !loading && items.length > 0 && (\n
\n \n {cancelLabel}\n \n \n {savedNote && !dirty ? savedLabel : saveLabel}\n \n
\n )}\n \n );\n}\n\n/** React's id without its colons, so ids derived from it stay valid in selectors too; stable across server and client. */\nfunction useStableId() {\n return `allocation-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n}\n\nexport default AllocationEditor;\n"},{"path":"beamline/components/allocation-editor/allocation-model.ts","type":"registry:file","target":"src/ui/beamline/components/allocation-editor/allocation-model.ts","content":"// The transfer model behind AllocationEditor: every change is one zero-sum transfer between two named parties. Pure\n// functions only (no React), so drag, boundary keys and exact entry all ask the same questions and get the same answer.\n\n/** Party id of the implicit remainder: the whole minus the sum of the items (shortfall > 0, excess < 0). */\nexport const UNALLOCATED = \"unallocated\" as const;\n\nexport type AllocationValue = Record;\n\nexport interface ModelItem {\n id: string;\n label: string;\n kind?: \"part\" | \"gap\";\n min?: number;\n max?: number;\n locked?: boolean;\n}\n\nexport interface Transfer {\n /** Id of the party giving the amount. Required. */\n from: string;\n /** Id of the party receiving the amount. Required. */\n to: string;\n /** Amount moved between the two parties. Required. */\n amount: number;\n /** Input method that initiated the transfer. Required. */\n via: \"drag\" | \"keyboard\" | \"entry\";\n}\n\nexport interface ModelText {\n locked: (label: string) => string;\n atMin: (label: string, amount: string) => string;\n atMax: (label: string, amount: string) => string;\n notNeighbours: (a: string, b: string) => string;\n notSetPart: (label: string) => string;\n cannotGiveAway: (label: string) => string;\n unallocated: () => string;\n over: () => string;\n}\n\nexport interface Model {\n items: ModelItem[];\n total: number;\n step: number;\n order: \"sequence\" | \"set\";\n format: (amount: number) => string;\n text: ModelText;\n canTransfer?: (transfer: Transfer, next: AllocationValue) => true | string;\n}\n\n/** Floating error never shows: 0.1 + 0.2 reads 0.3. */\nexport const tidy = (n: number) => Number(n.toFixed(9));\n\nexport const sumOf = (items: ModelItem[], value: AllocationValue) =>\n tidy(items.reduce((sum, item) => sum + (value[item.id] ?? 0), 0));\n\n/** Positive while part of the whole is unassigned, negative while the parts exceed it. */\nexport const remainder = (model: Model, value: AllocationValue) => tidy(model.total - sumOf(model.items, value));\n\nexport const partyLabel = (model: Model, id: string, value: AllocationValue) =>\n id === UNALLOCATED\n ? remainder(model, value) < 0\n ? model.text.over()\n : model.text.unallocated()\n : (model.items.find((item) => item.id === id)?.label ?? id);\n\n/** The draft after a transfer; the remainder is implicit, so only item amounts move. */\nexport function applyTransfer(value: AllocationValue, transfer: Pick) {\n const next = { ...value };\n if (transfer.from !== UNALLOCATED) next[transfer.from] = tidy((next[transfer.from] ?? 0) - transfer.amount);\n if (transfer.to !== UNALLOCATED) next[transfer.to] = tidy((next[transfer.to] ?? 0) + transfer.amount);\n return next;\n}\n\n/** Why one candidate transfer is refused, in the person's words, or null when it is allowed. */\nexport function refusal(model: Model, value: AllocationValue, transfer: Transfer): string | null {\n const { items, text, format } = model;\n const item = (id: string) => items.find((candidate) => candidate.id === id);\n const from = item(transfer.from);\n const to = item(transfer.to);\n const rest = remainder(model, value);\n // the remainder is a repair party: it only ever moves toward zero\n if (transfer.from === UNALLOCATED && !(rest > 0 && transfer.amount <= rest + 1e-9))\n return to ? text.cannotGiveAway(text.unallocated()) : text.unallocated();\n if (transfer.to === UNALLOCATED && !(rest < 0 && transfer.amount <= -rest + 1e-9))\n return from ? text.cannotGiveAway(from.label) : text.unallocated();\n if (from?.locked) return text.locked(from.label);\n if (to?.locked) return text.locked(to.label);\n if (from && value[from.id] == null) return text.notSetPart(from.label);\n if (to && value[to.id] == null && transfer.from !== UNALLOCATED) return text.notSetPart(to.label);\n if (from && to && model.order === \"sequence\" && Math.abs(items.indexOf(from) - items.indexOf(to)) !== 1)\n return text.notNeighbours(from.label, to.label);\n if (from) {\n const min = from.min ?? 0;\n if (tidy((value[from.id] ?? 0) - transfer.amount) < min - 1e-9) return text.atMin(from.label, format(min));\n }\n if (to) {\n const max = to.max ?? model.total;\n if (tidy((value[to.id] ?? 0) + transfer.amount) > max + 1e-9) return text.atMax(to.label, format(max));\n }\n if (model.canTransfer) {\n const verdict = model.canTransfer(transfer, applyTransfer(value, transfer));\n if (verdict !== true) return verdict;\n }\n return null;\n}\n\n/**\n * A directional move (drag, arrow, Page, Home/End): checked step by step from `value`, stopping at the last allowed\n * step. Returns the value reached, how many steps were taken and the reason it stopped short (if it did).\n */\nexport function walk(\n model: Model,\n value: AllocationValue,\n from: string,\n to: string,\n steps: number,\n via: Transfer[\"via\"],\n): { value: AllocationValue; taken: number; reason: string | null } {\n let current = value;\n for (let taken = 0; taken < steps; taken++) {\n const transfer = { from, to, amount: model.step, via };\n const reason = refusal(model, current, transfer);\n if (reason) return { value: current, taken, reason };\n current = applyTransfer(current, transfer);\n }\n return { value: current, taken: steps, reason: null };\n}\n\n/** Who may trade with `id` for an exact change `delta` (positive takes, negative gives), in item order, remainder last. */\nexport function candidates(model: Model, value: AllocationValue, id: string, delta: number) {\n const { items } = model;\n const index = items.findIndex((item) => item.id === id);\n const self = items[index];\n const rest = remainder(model, value);\n const others =\n value[id] == null\n ? []\n : model.order === \"sequence\"\n ? [items[index - 1], items[index + 1]].filter((item): item is ModelItem => !!item)\n : items.filter((item) => item.id !== id);\n const parties = others.map((item) => item.id);\n if (rest !== 0 || value[id] == null) parties.push(UNALLOCATED);\n const amount = tidy(Math.abs(delta));\n return parties.map((party) => {\n const transfer: Transfer =\n delta > 0\n ? { from: party, to: self.id, amount, via: \"entry\" }\n : { from: self.id, to: party, amount, via: \"entry\" };\n return { party, transfer, reason: refusal(model, value, transfer) };\n });\n}\n\n/** How far a boundary between `a` (before) and `b` (after) can travel each way, in steps. */\nexport function reach(model: Model, value: AllocationValue, a: string, b: string, limit: number) {\n return {\n back: walk(model, value, a, b, limit, \"keyboard\").taken,\n ahead: walk(model, value, b, a, limit, \"keyboard\").taken,\n };\n}\n\n/** Net transfers per ordered pair: A→B 10 and B→A 5 become A→B 5. */\nexport function netTransfers(log: Pick[]) {\n const net = new Map();\n for (const { from, to, amount } of log) {\n const [first, second] = from < to ? [from, to] : [to, from];\n const key = `${first}\\u0000${second}`;\n net.set(key, tidy((net.get(key) ?? 0) + (from === first ? amount : -amount)));\n }\n return [...net].flatMap(([key, amount]) => {\n const [first, second] = key.split(\"\\u0000\");\n if (amount === 0) return [];\n return [amount > 0 ? { from: first, to: second, amount } : { from: second, to: first, amount: -amount }];\n });\n}\n"},{"path":"beamline/components/allocation-editor/messages.ts","type":"registry:file","target":"src/ui/beamline/components/allocation-editor/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 saveLabel: \"Save\",\n savedLabel: \"Saved\",\n cancelLabel: \"Cancel\",\n emptyLabel: \"Nothing to allocate yet.\",\n changed: \"(changed)\",\n apply: \"Apply\",\n notMeasured: \"Not measured\",\n ofAllocated: \"{sum} of {total} allocated\",\n tradesWithAnyUnlockedPart: \"Trades with any unlocked part\",\n noUnlockedNeighbour: \"No unlocked neighbour\",\n takesFromUnallocated: \"Takes from Unallocated\",\n andAreNotNeighbours: \"{a} and {b} are not neighbours.\",\n isNotSet: \"{label} is not set.\",\n enterAnAmountFor: \"Enter an amount for {label}.\",\n canTGiveTimeAwayHere: \"{label} can't give time away here.\",\n chooseWhereComeFrom: \"Choose where {amount} come from: {value}.\",\n chooseWhereGo: \"Choose where {amount} go: {value}.\",\n changeNotApplied: \"{label} change not applied.\",\n assignTheUnallocatedBeforeSaving: \"Assign the {amount} unallocated before saving.\",\n removeBeforeSaving: \"Remove {amount} before saving.\",\n overBy: \"Over by {amount}\",\n noChangesToSave: \"No changes to save.\",\n thisPlanChangedElsewhereCancelToUse: \"This plan changed elsewhere: {summary}. Cancel to use it.\",\n thePartsChangedYourUnsavedChangesWere: \"The parts changed; your unsaved changes were reset.\",\n savedWithChanges: \"Saved with changes: {summary}.\",\n savingS: \"Saving… {seconds} s\",\n saving: \"Saving…\",\n betweenAnd: \"Between {a} and {b}\",\n amounts: \"Amounts\",\n tradesWith: \"Trades with {value}\",\n from: \"+{amount} from {partner}\",\n to: \"−{amount} to {partner}\",\n takeFrom: \"Take {amount} from\",\n giveTo: \"Give {amount} to\",\n movedFromTo: \"Moved {amount} from {from} to {to}.\",\n canTGoBelow: \"{label} can't go below {amount}.\",\n canTGoAbove: \"{label} can't go above {amount}.\",\n isLocked: \"{label} is locked.\",\n changeInStepsOf: \"Change in steps of {step}.\",\n enterANumber: \"Enter a number.\",\n unallocated: \"Unallocated\",\n over: \"Over\",\n notSet: \"Not set\",\n changesDiscarded: \"Changes discarded.\",\n saved: \"Saved.\",\n couldnTSave: \"Couldn't save.\",\n wasSavedAs: \"{value} was saved as {value2}.\",\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