{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"file-dropzone","type":"registry:component","title":"File drop zone","description":"A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be cancelled or retried.","categories":["forms"],"dependencies":["@radix-ui/react-direction@1.1.4","@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/button/button-variants.ts","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts","content":"import { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n/** sm 32 · md 36 · lg 40 · touch 44 (a bottom action bar on a phone). */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"touch\";\n/** Market side: buy fills with --pui-up, sell with --pui-down (a red-up market flips the two tokens, not the code). */\nexport type ButtonTone = \"up\" | \"down\";\n\n/** Which paint role paints each variant: filled variants are solids, the quiet ones keep their own light paint. */\nconst ROLE: Record = {\n primary: \"m-solid\",\n accent: \"m-solid\",\n secondary: \"m-control\",\n outline: undefined,\n ghost: undefined,\n danger: undefined,\n};\n\n/** A variant's paint without the button's layout, for a group that wears one button's look (SplitButton paints the\n * pair as one button and leaves its halves transparent). */\nexport function buttonPaint(variant: ButtonVariant = \"primary\", tone?: ButtonTone) {\n return cn(ROLE[variant], styles[variant], tone && styles[tone]);\n}\n\n/** The classes that make any element look like a Button, for parts that render their own element. */\nexport function buttonClassName({\n variant = \"primary\",\n size = \"md\",\n tone,\n className,\n}: { variant?: ButtonVariant; size?: ButtonSize; tone?: ButtonTone; className?: string } = {}) {\n return cn(styles.root, ROLE[variant], styles[variant], tone && styles[tone], styles[size], className);\n}\n"},{"path":"beamline/components/button/button.module.css","type":"registry:file","target":"src/ui/beamline/components/button/button.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* Button. Every colour, size and duration is a token; a variant only sets the four local properties below. */\n .root {\n --_button-bg: transparent;\n --_button-bg-hover: var(--pui-hover);\n --_button-fg: var(--pui-ink);\n --_button-edge: none;\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n position: relative;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pui-space-1-5);\n flex-shrink: 0;\n height: var(--_button-height);\n min-width: var(--_button-height);\n /* never wider than its room: in a narrow card the label ends in an ellipsis instead of spilling (the full words\n stay the accessible name) */\n max-width: 100%;\n padding-inline: var(--_button-pad);\n border: 0;\n /* Nested context: inside a frame that sets --pui-nest-radius and --pui-nest-inset (and --pui-nest-ceiling for pills)\n the corner is the shared nested corner (.nest-corner, utilities.css: radius − inset, or the button's own radius\n where that would fall under the chip radius); elsewhere the control radius. --pui-button-radius wins over both. */\n border-radius: var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control)));\n color: var(--_button-fg);\n font-family: var(--pui-font-body);\n font-size: var(--pui-text-sm);\n font-weight: var(--pui-weight-medium);\n line-height: 1;\n letter-spacing: var(--pui-tracking-body);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n /* frequency law: hover arrives at 0ms (below), leaves over the ruled departure; opacity and translate are listed\n so a button that waits for attention (.reveal) fades away like every reveal instead of vanishing */\n transition:\n var(--m-transition),\n background-color var(--pui-motion-out) var(--pui-ease-default),\n color var(--pui-motion-out) var(--pui-ease-default),\n opacity var(--pui-motion-out) var(--pui-ease-default),\n translate var(--pui-motion-out) var(--pui-ease-default);\n }\n /* the quiet variants paint themselves; filled and secondary variants are painted by their look role (m-solid,\n m-control), which these zero-specificity rules can never override */\n :where(.root) {\n background: var(--_button-bg);\n box-shadow: var(--_button-edge);\n }\n :where(.root:hover:not(:disabled, [aria-disabled=\"true\"])) {\n background: var(--_button-bg-hover);\n }\n .root:hover:not(:disabled, [aria-disabled=\"true\"]) {\n transition-duration: 0ms;\n }\n /* the asChild form has no motion: a CSS press instead */\n .root:not(button):active {\n transform: scale(0.97);\n }\n .root:disabled,\n .root[aria-disabled=\"true\"]:not([data-loading]) {\n opacity: var(--pui-opacity-disabled);\n cursor: not-allowed;\n }\n .root[data-loading] {\n cursor: progress;\n }\n\n /* Icons: 16px unless the icon says otherwise (zero specificity, so size-5 or an inline size wins) */\n :where(.root) :where(svg) {\n width: var(--pui-icon-md);\n height: var(--pui-icon-md);\n flex-shrink: 0;\n }\n\n .sm {\n --_button-height: var(--pui-control-height-sm);\n --_button-pad: var(--pui-space-2-5);\n /* the base gap (--pui-space-1-5); 5px had no scale step, and 6px also lets the loader's negative margin cancel\n the gap exactly at every size */\n }\n .md {\n --_button-height: var(--pui-control-height-md);\n --_button-pad: 14px;\n }\n .lg {\n --_button-height: var(--pui-control-height-lg);\n --_button-pad: var(--pui-space-4);\n font-size: var(--pui-text-base);\n }\n /* a bottom action bar on a phone: the 44 px touch target (a platform minimum, not a spacing step, so it holds when\n the spacing parameter changes — O1 §14.2), the large label */\n .touch {\n --_button-height: calc(var(--pui-control-height-lg) + 0.25rem);\n --_button-pad: var(--pui-space-5);\n font-size: var(--pui-text-base);\n }\n .root[data-icon-only] {\n padding-inline: 0;\n width: var(--_button-height);\n }\n\n /* the main action: ink on the page, inverted per theme */\n .primary {\n --m-color: var(--pui-ink);\n --_button-fg: var(--pui-ink-inverse);\n }\n .secondary {\n --_button-fg: var(--pui-ink);\n }\n .outline {\n --_button-edge: inset 0 0 0 1px var(--pui-line-strong);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost {\n --_button-fg: var(--pui-ink-2);\n --_button-bg-hover: var(--pui-hover);\n }\n .ghost:hover:not(:disabled) {\n color: var(--pui-ink);\n }\n .danger {\n --_button-fg: var(--pui-red);\n --_button-edge: inset 0 0 0 1px color-mix(in oklab, var(--pui-red) 42%, transparent);\n --_button-bg-hover: var(--pui-red-tint);\n }\n .accent {\n --m-color: var(--pui-accent);\n --_button-fg: var(--pui-accent-foreground);\n }\n\n /* Market side. Declared after the variants so it wins: a filled variant takes the side's colour and its on-colour\n ink; a quiet variant keeps its paint and colours the label. */\n .up {\n --m-color: var(--pui-up);\n --_button-fg: var(--pui-up);\n }\n .down {\n --m-color: var(--pui-down);\n --_button-fg: var(--pui-down);\n }\n .ghost:is(.up, .down):hover:not(:disabled) {\n color: var(--_button-fg);\n }\n .primary.up,\n .accent.up {\n --_button-fg: var(--pui-on-up);\n }\n .primary.down,\n .accent.down {\n --_button-fg: var(--pui-on-down);\n }\n\n /* The main actions' light, where the look provides one, as a spectrum. Glow spills a soft light in the brand's\n spectrum from under the button's bottom edge (clipped at it, so it never tints the face) that brightens under the\n pointer. Prism keeps it inside the glass (--m-solid-glow-fit: 1): the face the light leaves by, the bottom edge,\n splits it into a crisp line with a faint wash rising into the face, only while pointed at. Every other look\n leaves --m-solid-glow at none, so the layer does not exist. */\n .primary::after,\n .accent::after {\n --_fit: var(--m-solid-glow-fit, 0);\n content: var(--m-solid-glow);\n position: absolute;\n z-index: -1;\n top: calc((1 - var(--_fit)) * (100% + var(--m-solid-glow-gap, 0px)));\n inset-inline: var(--m-solid-glow-inset, 14%);\n height: var(--m-solid-glow-height, 14px);\n border-radius: calc(\n var(--_fit) * var(--pui-button-radius, var(--pui-nested, var(--pui-radius-control))) + (1 - var(--_fit)) *\n var(--pui-radius-pill)\n );\n background: var(--m-spectrum);\n background-size: var(--m-spectrum-size, 100% 100%);\n /* the part of the spectrum that shows: this button's own angle (--m-prism-seed, new at every press), turned by\n where the pointer is across the face (--m-prism-x) in a look that turns it (--m-solid-glow-turn) */\n background-position: calc((var(--m-prism-seed, 0.3) + var(--m-prism-x, 0.5) * var(--m-solid-glow-turn, 0)) * 100%) 0;\n filter: blur(var(--m-solid-glow-blur, 9px));\n clip-path: var(--m-solid-glow-clip, inset(0 -32px -32px -32px));\n mask: var(--m-solid-glow-mask, none);\n mask-position:\n 0 0,\n calc(var(--m-prism-seed, 0.3) * 100%) 0;\n mask-composite: intersect;\n opacity: var(--m-solid-glow-rest, 0.75);\n scale: var(--m-solid-glow-scale, 1) 1;\n pointer-events: none;\n transition:\n opacity var(--pui-motion-out) var(--pui-ease-default),\n scale var(--pui-motion-out) var(--pui-ease-default),\n background-position var(--pui-duration-considered) var(--pui-ease-default),\n mask-position var(--pui-duration-considered) var(--pui-ease-default);\n }\n /* pointed at: the light brightens (glow) or grows out from the centre and drifts along while the pointer stays\n (prism) */\n .primary:hover::after,\n .accent:hover::after {\n opacity: 1;\n scale: 1 1;\n transition-duration: var(--m-solid-glow-in, 0ms);\n animation: var(--m-solid-glow-flow, none);\n }\n /* A change of word or colour (Save → Saved, a tone turning green) passes a band of split light across the face once,\n in a look that has one (prism: --m-solid-shift-light; the pen hook's ::before is free on a solid otherwise). */\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: var(--m-solid-shift-light, none);\n position: absolute;\n inset: 0;\n z-index: -1;\n border: 0;\n border-radius: inherit;\n background: var(--m-spectrum) 0 0 / var(--m-spectrum-size, 100% 100%);\n mask: linear-gradient(105deg, transparent 39%, #000 47.5%, #000 52.5%, transparent 61%) 0 0 / 300% 100% no-repeat;\n opacity: 0;\n animation: prism-shift calc(var(--pui-duration-considered) * 2.2) var(--pui-ease-default);\n pointer-events: none;\n }\n @keyframes prism-shift {\n from {\n mask-position: 100% 0;\n opacity: 0.25;\n }\n 35% {\n opacity: 0.55;\n }\n to {\n mask-position: 0 0;\n opacity: 0;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .primary::after,\n .accent::after {\n transition: none;\n animation: none !important;\n }\n .primary[data-shift]::before,\n .accent[data-shift]::before {\n content: none;\n }\n }\n .root:disabled::after,\n .root[aria-disabled=\"true\"]::after {\n content: none;\n }\n\n /* The loader opens its own width, and the negative margin cancels the gap so the label does not jump */\n .loader {\n display: inline-flex;\n overflow: hidden;\n margin-inline-end: calc(var(--pui-space-1-5) * -1);\n }\n .loader > * {\n margin-inline-end: var(--pui-space-1-5);\n }\n .spinner {\n color: currentColor;\n }\n .root[data-icon-only] .loader {\n margin-inline-end: 0;\n }\n .root[data-icon-only] .loader > * {\n margin-inline-end: 0;\n }\n\n /* The label holds its place while the text inside swaps; the leaving text pops out of flow against it */\n .label {\n position: relative;\n display: inline-flex;\n justify-content: center;\n min-width: 0;\n overflow: visible;\n }\n /* the clip box is let out by a little over a line so descenders are never cut, without changing the layout */\n .text {\n display: inline-block;\n max-width: 100%;\n margin-block: -0.2em;\n padding-block: 0.2em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .label[data-morphing] > .text {\n overflow: visible;\n text-overflow: clip;\n }\n}\n\n@layer components {\n :global(.pui[data-motion=\"reduced\"]) .root:not(button):active,\n :global(.pui[data-motion=\"none\"]) .root:not(button):active {\n transform: none;\n }\n @media (prefers-reduced-motion: reduce) {\n .root:not(button):active {\n transform: none;\n }\n }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.root {\n composes: nest-corner from global;\n}\n"},{"path":"beamline/components/button/button.tsx","type":"registry:file","target":"src/ui/beamline/components/button/button.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport {\n Children,\n Fragment,\n isValidElement,\n useLayoutEffect,\n useRef,\n type ButtonHTMLAttributes,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type RefObject,\n type ComponentProps,\n} from \"react\";\nimport { AnimatePresence, LazyMotion, m, spring, useIsPresent } from \"motion/react\";\nimport { animate } from \"motion/mini\";\nimport * as Slot from \"@radix-ui/react-slot\";\nimport { Spinner } from \"../spinner/spinner\";\nimport type { BuiltInLook as Look } from \"../../runtime/preset\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type { ButtonVariant, ButtonSize, ButtonTone } from \"./button-variants\";\nexport { buttonPaint, buttonClassName } from \"./button-variants\";\nimport { buttonClassName, type ButtonVariant, type ButtonSize, type ButtonTone } from \"./button-variants\";\nimport type { ButtonDefaults } from \"./defaults\";\nexport type { ButtonDefaults } from \"./defaults\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\n\ntype NativeProps = Omit<\n ButtonHTMLAttributes,\n \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"\n>;\n\nexport interface ButtonProps extends NativeProps {\n /** Visual weight: primary (ink-filled), secondary, outline, ghost, danger, or accent (filled with the brand). */\n variant?: ButtonVariant;\n /** Height 32 / 36 / 40 px; touch 44 px for a bottom action bar on a phone. */\n size?: ButtonSize;\n /** Market side. On primary/accent the fill becomes --pui-up (buy) or --pui-down (sell); on the quiet variants the\n * label takes that colour. Pair it with a word or arrow: colour is never the only signal. */\n tone?: ButtonTone;\n /** Shows a loader in front of the label, sets aria-busy and ignores clicks; size and focus stay. */\n loading?: boolean;\n classNames?: Partial>;\n /** Paint this button in another look than the one in force around it (DESIGN-LANGUAGE.md \"Looks\"). */\n look?: Look;\n /** Render the single child (a link, a Radix trigger) with the button's look instead of a \n )}\n {i.status === \"error\" && i.error === \"Cancelled\" && onUpload && (\n void upload(i)}\n >\n \n \n )}\n {\n if (i.status === \"uploading\") {\n controllers.current.get(i.id)?.abort();\n return;\n }\n focusAfterRemoval(e.currentTarget.closest(\"li\"), {\n scope: e.currentTarget.closest(\"[data-slot=file-dropzone]\"),\n });\n remove(i.id);\n }}\n >\n \n \n {i.status === \"uploading\" && (\n \n \n \n )}\n \n );\n })}\n \n );\n\n return (\n // a size container: the zone tightens in a narrow room, and a wide one lays the files out in two columns\n \n {label && (\n \n {label}\n \n )}\n !disabled && input.current?.click()}\n onKeyDown={(e) => {\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n e.preventDefault();\n input.current?.click();\n }\n }}\n onDragEnter={(e) => drag(e, 1)}\n onDragLeave={(e) => drag(e, -1)}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => {\n e.preventDefault();\n setOver(0);\n setHeld(null);\n add([...e.dataTransfer.files]);\n }}\n // files on the clipboard (a screenshot) paste straight in while the zone holds focus\n onPaste={(e) => {\n const files = [...e.clipboardData.files];\n if (!files.length || disabled) return;\n e.preventDefault();\n add(files);\n }}\n data-over={over ? \"\" : undefined}\n data-refused={over && held?.refused ? \"\" : undefined}\n data-disabled={disabled ? \"\" : undefined}\n className={cn(styles.zone, compact && styles.compact, classNames?.zone)}\n >\n \n
\n \n {over ? (\n held?.refused ? (\n i18n(\"thisTypeIsNotAccepted\")\n ) : held && held.count > 1 && multiple && dropLabel === \"Drop to add\" ? (\n i18n(\"dropFilesToAdd\", { count: held.count })\n ) : (\n dropLabel\n )\n ) : (\n <>\n \n {i18n(\"choose\")} {multiple ? i18n(\"files\") : i18n(\"aFile\")}\n {\" \"}\n {i18n(\"orDrop\")} {multiple ? i18n(\"them\") : i18n(\"it\")} {i18n(\"here\")}\n \n )}\n \n {!compact && (\n \n {description}\n \n )}\n {compact && (\n \n {description}\n \n )}\n
\n {listPlacement === \"inside\" && list && (\n e.stopPropagation()}\n >\n {list}\n \n )}\n \n {\n add([...(e.target.files ?? [])]);\n e.target.value = \"\";\n }}\n />\n {note && (\n

\n {note}\n

\n )}\n {listPlacement === \"below\" && list}\n

\n {said}\n

\n \n );\n}\n\n/** An image file's own picture, small, for its row: a blob URL made while the row shows and let go after. */\nfunction Thumb({ file, className }: { file: File; className?: string }) {\n const [src, setSrc] = useState(null);\n useEffect(() => {\n const url = URL.createObjectURL(file);\n setSrc(url);\n return () => URL.revokeObjectURL(url);\n }, [file]);\n return (\n \n {src && \"\"}\n \n );\n}\n\nexport default FileDropzone;\n"},{"path":"beamline/components/file-dropzone/messages.ts","type":"registry:file","target":"src/ui/beamline/components/file-dropzone/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n label: \"Files\",\n dropLabel: \"Drop to add\",\n cancelled: \"Cancelled\",\n uploadFailed: \"Upload failed\",\n uploaded: \"Uploaded\",\n ready: \"Ready\",\n retry: \"Retry {name}\",\n uploadAgain: \"Upload {name} again\",\n thisTypeIsNotAccepted: \"This type is not accepted\",\n dropFilesToAdd: \"Drop {count} files to add\",\n orDrop: \"or drop\",\n choose: \"Choose\",\n files: \"files\",\n aFile: \"a file\",\n them: \"them\",\n it: \"it\",\n here: \"here\",\n largerThan: \"Larger than {value}\",\n onlyFiles: {\n one: \"Only {count} file\",\n other: \"Only {count} files\",\n },\n added: \"{length} added{value}\",\n cancel: \"Cancel\",\n remove: \"Remove\",\n uploaded2: \"{name} uploaded\",\n notUploaded: \"{name} not uploaded\",\n turnedAway: \", {value} turned away\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/spinner/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/spinner/defaults.ts","content":"/** Pure allowed presentation defaults for Spinner; no component or runtime imports. */\nexport interface SpinnerDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n"},{"path":"beamline/components/spinner/messages.ts","type":"registry:file","target":"src/ui/beamline/components/spinner/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n label: \"Loading\",\n done: \"Done\",\n error: \"Failed\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/spinner/spinner.module.css","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n /* With a delay the ring waits unseen and then fades in, so quick work never flashes it; the result (a check or a\n cross) always shows at once. */\n .root[data-delay] {\n animation: appear var(--pui-fade-in) var(--pui-ease-default) var(--_delay) both;\n }\n @keyframes appear {\n from {\n opacity: 0;\n }\n }\n /* The turn runs on the compositor (a CSS animation on the svg box) and costs no JS per frame. When the work ends the\n arc closes into a full ring over the standard duration, so stopping the turn is invisible, and the check or cross\n draws itself a beat later. All timing comes from the motion tokens; the loop period follows --pui-motion-scale. */\n .svg[data-state=\"loading\"] {\n animation: turn calc(0.8s * var(--pui-motion-scale, 1) * var(--pui-motion-look, 1)) linear infinite;\n }\n .track {\n stroke-opacity: 0.18;\n }\n .arc {\n stroke-dasharray: 0.3 1;\n transition: stroke-dasharray var(--pui-duration-standard) var(--pui-ease-enter);\n }\n .svg:not([data-state=\"loading\"]) .arc {\n stroke-dasharray: 1 1;\n }\n .mark {\n stroke-dasharray: 1 1;\n animation: draw var(--pui-duration-standard) var(--pui-ease-enter) var(--pui-duration-fast) both;\n }\n @keyframes turn {\n to {\n transform: rotate(1turn);\n }\n }\n @keyframes draw {\n from {\n stroke-dashoffset: 1;\n }\n to {\n stroke-dashoffset: 0;\n }\n }\n .svg[data-paused] {\n animation-play-state: paused;\n }\n .svg[data-reduced],\n .svg[data-reduced] .mark {\n animation: none;\n }\n /* Reduction retains the loading/result shape without a decorative loop. */\n @media (prefers-reduced-motion: reduce) {\n .svg[data-state=\"loading\"],\n .mark {\n animation: none;\n }\n }\n}\n"},{"path":"beamline/components/spinner/spinner.tsx","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useComponentDefaults } from \"../../runtime/appearance\";\nimport type { SpinnerDefaults } from \"./defaults\";\nexport type { SpinnerDefaults } from \"./defaults\";\n\nimport { useRef, type CSSProperties, type Ref } from \"react\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useActive } from \"../../hooks/use-active\";\nimport { useMotionTokens } from \"../../hooks/use-motion-tokens\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./spinner.module.css\";\n\nexport interface SpinnerClassNames {\n /** Classes for the root part; no override by default. */\n root?: string;\n /** Classes for the svg part; no override by default. */\n svg?: string;\n /** Classes for the track part; no override by default. */\n track?: string;\n /** Classes for the arc part; no override by default. */\n arc?: string;\n /** Classes for the mark part; no override by default. */\n mark?: string;\n}\n\nexport interface SpinnerProps {\n /** `success` draws a check out of the ring, `error` a cross; both stop spinning. */\n state?: \"loading\" | \"success\" | \"error\";\n /** Control size within the supported size steps. Defaults to \"md\". */\n size?: \"sm\" | \"md\" | \"lg\";\n /** Accessible name while loading. */\n label?: string;\n /** ms to wait before it shows: work that ends sooner never flashes a spinner (about 300 is a good start). Default 0. */\n delay?: number;\n /** Classes on the documented visual root; no override by default. */\n className?: string;\n /** Receives the documented root element; no ref by default. */\n ref?: Ref;\n /** Inline styles on the documented visual root; no inline overrides by default. */\n style?: CSSProperties;\n /** Classes for the named visual parts; no part overrides by default. */\n classNames?: SpinnerClassNames;\n}\n\n/** Icon box from the foundation icon steps (§14.2): sm 14, md 16, lg 20. */\nconst PX = { sm: \"var(--pui-icon-sm)\", md: \"var(--pui-icon-md)\", lg: \"var(--pui-icon-lg)\" } as const;\n\n/**\n * A ring that spins while work runs and closes into a drawn check (or cross) when it ends — the result is a shape as\n * well as a colour. With reduced motion the loading ring holds still.\n */\nexport function Spinner({\n state = \"loading\",\n size: sizeProp,\n label: labelProp,\n delay = 0,\n className,\n classNames,\n style,\n ref,\n}: SpinnerProps) {\n const i18n = useMessages(\"spinner\", englishMessages);\n const label = labelProp === undefined ? i18n(\"label\") : labelProp;\n\n const scopeDefaults = useComponentDefaults(\"spinner\", [\"size\"]);\n const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n const host = useRef(null);\n const attach = useComposedRef(host, ref);\n const active = useActive(host);\n const tokens = useMotionTokens(host);\n const managedReduced = useReducedMotionSafe();\n const reduced = tokens.reduced || managedReduced;\n\n const box = PX[size];\n const done = state !== \"loading\";\n const tone = state === \"success\" ? \"text-green\" : state === \"error\" ? \"text-red\" : \"text-ink-2\";\n return (\n 0 && state === \"loading\" ? \"\" : undefined}\n role={done ? \"img\" : \"status\"}\n aria-label={state === \"success\" ? i18n(\"done\") : state === \"error\" ? i18n(\"error\") : label}\n className={cn(styles.root, \"relative inline-grid shrink-0 place-items-center\", tone, classNames?.root, className)}\n style={{ width: box, height: box, \"--_delay\": `${delay}ms`, ...style } as CSSProperties}\n >\n \n \n \n {state === \"success\" && (\n \n )}\n {state === \"error\" && (\n \n )}\n \n \n );\n}\n\nexport default Spinner;\n"},{"path":"beamline/hooks/use-active.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-active.ts","content":"\"use client\";\n\nimport { useContext, useEffect, useState, type RefObject } from \"react\";\n\nimport { ActivityContext } from \"../runtime/activity\";\n\n/**\n * Whether an animated element should be doing work: it is (nearly) on screen and the tab is visible. Every\n * continuously animated component gates its loop, shader or CSS animation on this, so an effect scrolled out of view,\n * behind another tab, or in a collapsed panel costs nothing. One IntersectionObserver per element; no polling.\n */\nexport function useActive(\n ref: RefObject,\n {\n margin = \"120px\",\n key,\n idle = true,\n }: {\n margin?: string;\n /** Re-attach when this changes (an element that mounts later). */\n key?: unknown;\n /** Pause continuous work at the host idle boundary. Finite sequences set false so they finish. */\n idle?: boolean;\n } = {},\n) {\n const active = useContext(ActivityContext);\n const [inView, setInView] = useState(false);\n const [visible, setVisible] = useState(\n () => typeof document === \"undefined\" || document.visibilityState === \"visible\",\n );\n useEffect(() => {\n const el = ref.current;\n if (!el || typeof IntersectionObserver === \"undefined\") {\n setInView(true);\n return;\n }\n const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { rootMargin: margin });\n io.observe(el);\n return () => io.disconnect();\n }, [ref, margin, key]);\n useEffect(() => {\n const on = () => setVisible(document.visibilityState === \"visible\");\n document.addEventListener(\"visibilitychange\", on);\n return () => document.removeEventListener(\"visibilitychange\", on);\n }, []);\n return (!idle || active) && inView && visible;\n}\n"},{"path":"beamline/hooks/use-composed-ref.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-composed-ref.ts","content":"\"use client\";\n\nimport { useCallback, type Ref, type RefObject } from \"react\";\n\n/** Keep a control's measurement/focus ref and the caller's ref, including React 19 callback cleanup. */\nexport function useComposedRef(internal: RefObject, external?: Ref) {\n return useCallback(\n (node: T | null) => {\n internal.current = node;\n if (typeof external === \"function\") {\n const cleanup = external(node);\n if (typeof cleanup === \"function\")\n return () => {\n internal.current = null;\n cleanup();\n };\n } else if (external) external.current = node;\n },\n [internal, external],\n );\n}\n"},{"path":"beamline/hooks/use-flip.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-flip.ts","content":"\"use client\";\n\nimport { useLayoutEffect, useRef, type RefObject } from \"react\";\nimport { useMotionTokens } from \"./use-motion-tokens\";\nimport { cssEase } from \"../lib/motion-tokens\";\n\ntype Seen = { el: HTMLElement; x: number; y: number; w: number; h: number };\n\n/**\n * Items of a collection keep their path (the morph grammar's \"changes keep their size and their path\"): mark each item\n * with `data-flip=\"\"` inside `container`. After a change, an item that is new grows in, items that moved\n * slide from where they were, and an item that left fades out as a ghost where it stood (a still copy, inert and\n * hidden from assistive tech, removed when it has faded). The data and focus change at once; only the picture\n * settles. Nothing runs at rest; reduced motion places at once. Positions are kept in the container's own content\n * (relative to it, plus its scroll) and read at rest, so neither a scroll of the page, nor a scroll of the container\n * itself, nor an item still settling reads as movement.\n *\n * `resize`: an item whose box changed size also scales from its old box (for marks without text, a bar or a segment, so a\n * new value glides on transforms instead of laying out every frame). `origin(key)`: an element a new item grows out of\n * (a ribbon's segment becoming a column, a shared chip dividing into pieces); with `originFirst` it applies on the\n * container's first render too, so a panel that opens unfolds its items from what was already on screen. `inner`: items\n * inside another item that lies outside the container (a merge's rows inside a card that moves itself) are this\n * container's own; nesting is judged inside the container only.\n */\nexport function useFlip(\n container: RefObject | (() => HTMLElement | null),\n {\n ghost = true,\n enter = true,\n resize = false,\n origin,\n originFirst = false,\n inner = false,\n }: {\n ghost?: boolean;\n enter?: boolean;\n resize?: boolean;\n origin?: (key: string) => Element | null | undefined;\n originFirst?: boolean;\n inner?: boolean;\n } = {},\n) {\n const get = typeof container === \"function\" ? container : () => container.current;\n // timing read at the container itself, found when the commit has attached it (a function container has no ref of its\n // own; without a host the timing stayed unresolved where no UIRoot is around, then rendered again to say so)\n const host =\n typeof container === \"function\"\n ? {\n get current() {\n return container();\n },\n }\n : container;\n const motion = useMotionTokens(host);\n const last = useRef | null>(null);\n const lastWidth = useRef(0);\n const flying = useRef(new Set());\n // where every item stands, in the container's own content (relative to it, plus its scroll): a list scrolled since the\n // last render has moved nothing (a row that slid back by the scroll would leave the finger that is tapping it). The\n // items' own grow-ins and slides still in flight are lifted while they are read, so each box is where the layout puts\n // it: a render mid-flight (a live price ticking while a new row grows in) is not a move.\n const read = (root: HTMLElement) => {\n const lifted = [...flying.current].map((a) => a.effect as KeyframeEffect).map((e) => [e, e.target] as const);\n for (const [effect] of lifted) effect.target = null;\n const box = root.getBoundingClientRect();\n const now = new Map();\n for (const el of root.querySelectorAll(\"[data-flip]\")) {\n // only the outermost items move (with `inner`, outermost inside this container)\n const outer = el.parentElement?.closest(\"[data-flip]\");\n if (outer && (!inner || (outer !== root && root.contains(outer)))) continue;\n const r = el.getBoundingClientRect();\n now.set(el.dataset.flip!, {\n el,\n x: r.left - box.left + root.scrollLeft,\n y: r.top - box.top + root.scrollTop,\n w: r.width,\n h: r.height,\n });\n }\n for (const [effect, target] of lifted) effect.target = target;\n return { box, now };\n };\n // a container that changes size at rest, with no render (fonts arriving, a scrollbar appearing, a window resized), has\n // its places read again then: else the first change after it would take the new width for a reflow and move nothing\n const watched = useRef<{ el: HTMLElement; observer: ResizeObserver } | null>(null);\n useLayoutEffect(() => () => watched.current?.observer.disconnect(), []);\n // every render on purpose: a collection changes through its parent's state, not through anything we can depend on\n useLayoutEffect(() => {\n const root = get();\n // a container that is gone (a panel folded) starts over when it comes back: its items are new, not moved\n if (!root) {\n last.current = null;\n return;\n }\n if (watched.current?.el !== root && typeof ResizeObserver !== \"undefined\") {\n watched.current?.observer.disconnect();\n const observer = new ResizeObserver(() => {\n if (flying.current.size || !last.current || !root.isConnected) return;\n const seen = read(root);\n last.current = seen.now;\n lastWidth.current = seen.box.width;\n });\n observer.observe(root);\n watched.current = { el: root, observer };\n }\n const { box, now } = read(root);\n // a container that changed width since the last render reflowed its items by itself (a panel resized, a room\n // step crossed): that is placement, not a change a person made, so this render records the new places and moves\n // nothing (a reflow places, only a choice travels)\n const reflowed = Math.abs(box.width - lastWidth.current) > 0.5;\n lastWidth.current = box.width;\n const before = reflowed ? null : last.current;\n last.current = now;\n const ms = motion.duration.standard * 1000;\n // the first render moves nothing, except items that grow out of an origin already on screen\n if ((!before && !(origin && originFirst)) || motion.reduced || ms < 2) return;\n const easing = cssEase(motion.ease.standard, \"ease-out\");\n // an item in flight says so (`data-flip-flight`: \"far\" when it crosses more than its own size, a slide between groups or\n // a share growing out of another item; \"near\" for a neighbour's step), so a part can lift what travels over other\n // text onto a surface of its own instead of drawing words over words\n const fly = (el: HTMLElement, keyframes: Keyframe[], far = false) => {\n const flight = el.animate(keyframes, { duration: ms, easing });\n flying.current.add(flight);\n if (far || el.dataset.flipFlight !== \"far\") el.dataset.flipFlight = far ? \"far\" : \"near\";\n const land = () => {\n flying.current.delete(flight);\n if (![...flying.current].some((a) => (a.effect as KeyframeEffect | null)?.target === el))\n delete el.dataset.flipFlight;\n };\n flight.finished.then(land, land);\n };\n const boxOf = (key: string) => {\n const from = origin?.(key);\n if (!from || !from.isConnected) return null;\n const r = from.getBoundingClientRect();\n return { x: r.left - box.left + root.scrollLeft, y: r.top - box.top + root.scrollTop, w: r.width, h: r.height };\n };\n // from a box to where the item stands: translate and scale about the top-left corner\n const morph = (was: { x: number; y: number; w: number; h: number }, at: Seen): Keyframe[] => [\n {\n transformOrigin: \"0 0\",\n transform: `translate(${was.x - at.x}px, ${was.y - at.y}px) scale(${was.w / Math.max(at.w, 0.5)}, ${was.h / Math.max(at.h, 0.5)})`,\n },\n { transformOrigin: \"0 0\", transform: \"none\" },\n ];\n for (const [key, at] of now) {\n const was = before?.get(key);\n if (!was) {\n const from = boxOf(key);\n if (from) fly(at.el, morph(from, at), true);\n else if (enter && before)\n fly(at.el, [\n { opacity: 0, transform: \"scale(0.86)\" },\n { opacity: 1, transform: \"none\" },\n ]);\n continue;\n }\n const dx = was.x - at.x,\n dy = was.y - at.y;\n const resized = resize && (Math.abs(was.w - at.w) > 0.5 || Math.abs(was.h - at.h) > 0.5);\n const far = Math.abs(dx) > at.w * 0.5 || Math.abs(dy) > at.h * 1.5;\n if (resized) fly(at.el, morph(was, at), far);\n else if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5)\n fly(at.el, [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: \"none\" }], far);\n }\n if (!ghost || !before) return;\n for (const [key, was] of before) {\n if (now.has(key) || was.el.isConnected) continue;\n const copy = was.el.cloneNode(true) as HTMLElement;\n copy.removeAttribute(\"data-flip\");\n // the ghost is a picture of the item, not the item: nothing that finds parts by slot or id may find it\n for (const n of [copy, ...copy.querySelectorAll(\"[id], [data-slot]\")]) {\n n.removeAttribute(\"id\");\n n.removeAttribute(\"data-slot\");\n }\n copy.setAttribute(\"data-ghost\", \"\");\n copy.setAttribute(\"aria-hidden\", \"true\");\n copy.inert = true;\n if (getComputedStyle(root).position === \"static\") root.style.position = \"relative\";\n Object.assign(copy.style, {\n position: \"absolute\",\n left: `${was.x}px`,\n top: `${was.y}px`,\n width: `${was.w}px`,\n height: `${was.h}px`,\n margin: \"0\",\n pointerEvents: \"none\",\n });\n root.appendChild(copy);\n // the ghost is gone by the time a neighbour slides into its place, so their texts never mix. The clock runs\n // straight and an even curve shapes only the fade: the front-loaded standard curve on the whole timeline passed\n // 0.45 inside the first frame, so what left read as a pop instead of a fade\n const fade = copy.animate(\n [\n { opacity: 1, transform: \"none\", easing: cssEase(motion.ease.default, \"ease-in-out\") },\n { opacity: 0, transform: \"scale(0.9)\", offset: 0.6 },\n { opacity: 0, transform: \"scale(0.86)\" },\n ],\n {\n duration: motion.duration.standard * 1000,\n easing: \"linear\",\n },\n );\n const drop = () => copy.remove();\n fade.finished.then(drop, drop);\n // and by the clock as well: a fade that never reports its end (the page hidden, an animation cancelled from\n // outside) must not leave a copy behind for a person or a test to find\n setTimeout(drop, motion.duration.standard * 1000 + 250);\n }\n });\n}\n"},{"path":"beamline/hooks/use-media-query.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-media-query.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// one MediaQueryList per query: React reads the snapshot on every render, and a part that renders thirty times a\n// second (a playing audio player's clock) would otherwise ask the browser for a new list each time\nconst lists = new Map();\nconst list = (query: string) => {\n if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return undefined;\n let m = lists.get(query);\n if (!m) lists.set(query, (m = window.matchMedia(query)));\n return m;\n};\n\n/** True while the media query matches; false on the server and in the first client render of SSR output. */\nexport function useMediaQuery(query: string): boolean {\n return useSyncExternalStore(\n (notify) => {\n const m = list(query);\n m?.addEventListener(\"change\", notify);\n return () => m?.removeEventListener(\"change\", notify);\n },\n () => list(query)?.matches ?? false,\n () => false,\n );\n}\n\n/** Phone-width layouts: below 768px. */\nexport const usePhone = () => useMediaQuery(\"(max-width: 767px)\");\n"},{"path":"beamline/hooks/use-motion-tokens.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-motion-tokens.ts","content":"\"use client\";\n\nimport { useMemo, type RefObject } from \"react\";\nimport { useAppearanceRoot } from \"../runtime/appearance\";\nimport { useResolvedAppearance } from \"./use-resolved-appearance\";\nimport { motionAt, motionEase, motionTokens, type MotionTokens } from \"../lib/motion-tokens\";\nimport { semanticMotion } from \"../lib/motion-source\";\n\nconst durationToken = (name: string) =>\n name === \"exit\" ? \"motion-out\" : name === \"in\" || name === \"out\" ? `motion-${name}` : `duration-${name}`;\nconst easeToken = (name: string) => `ease-${name === \"inOut\" ? \"in-out\" : name}`;\nconst REQUEST = {\n times: [\n ...Object.keys(semanticMotion.duration).map(durationToken),\n ...Object.keys(semanticMotion.spring).map((name) => `spring-${name}`),\n ...Object.keys(semanticMotion.stagger).map((name) => `stagger-${name}`),\n \"fade-in\",\n \"fade-out\",\n ],\n easings: [...Object.keys(semanticMotion.ease).map(easeToken), \"ease-spring\", \"ease-spring-bounce\", \"ease-overshoot\"],\n numbers: [\"motion-scale\", \"motion-look\", \"press-scale\"],\n // timing only: the host's own type would make every control resolve differently from the page around it\n typography: false,\n};\n\n/**\n * Resolve each timing at the actual host; omitted host uses the nearest managed root. The first/server snapshot is\n * the pure foundation default. Local CSS values, scope changes, font readiness, OS preference and explicit refresh\n * update the same consumer; no document-wide first-root fallback or persistent global listener.\n */\nexport function useMotionTokens(hostRef?: RefObject): MotionTokens & {\n ready: boolean;\n /** Reduced or none: movement, springs and staggers are instant. */\n reduced: boolean;\n mode: \"full\" | \"reduced\" | \"none\";\n /** Opacity-only arrival and departure (seconds): kept under reduced, instant under none (APPEARANCE A06). */\n fade: { in: number; out: number };\n} {\n const root = useAppearanceRoot();\n const scopeRef = useMemo(() => ({ current: root }), [root]);\n const resolved = useResolvedAppearance(hostRef ?? scopeRef, REQUEST);\n return useMemo(() => {\n if (!resolved.ready)\n return {\n ...motionTokens,\n ready: false,\n reduced: false,\n mode: \"full\" as const,\n fade: { in: motionTokens.duration.in, out: motionTokens.duration.out },\n };\n const reduced = resolved.reducedMotion;\n const speed = (resolved.numbers[\"motion-scale\"] ?? 1) * (resolved.numbers[\"motion-look\"] ?? 1);\n const fade =\n resolved.motionMode === \"none\"\n ? { in: 0.001, out: 0.001 }\n : {\n in: resolved.times[\"fade-in\"] ?? semanticMotion.duration.in * speed,\n out: resolved.times[\"fade-out\"] ?? semanticMotion.duration.out * speed,\n };\n const factor = reduced ? 0.001 / semanticMotion.duration.standard : speed;\n const base = motionAt(factor);\n const duration = Object.fromEntries(\n Object.entries(base.duration).map(([name, fallback]) => [\n name,\n reduced ? 0.001 : (resolved.times[durationToken(name)] ?? fallback),\n ]),\n ) as MotionTokens[\"duration\"];\n const stagger = Object.fromEntries(\n Object.entries(base.stagger).map(([name, fallback]) => [\n name,\n reduced ? 0 : (resolved.times[`stagger-${name}`] ?? fallback),\n ]),\n ) as MotionTokens[\"stagger\"];\n const ease = Object.fromEntries(\n Object.entries(base.ease).map(([name, fallback]) => [\n name,\n motionEase(resolved.easings[easeToken(name)], fallback),\n ]),\n ) as MotionTokens[\"ease\"];\n const spring = { ...base.spring };\n for (const name of Object.keys(semanticMotion.spring) as (keyof typeof semanticMotion.spring)[])\n spring[name] = {\n ...base.spring[name],\n visualDuration: reduced ? 0.001 : (resolved.times[`spring-${name}`] ?? base.spring[name].visualDuration),\n bounce: reduced ? 0 : base.spring[name].bounce,\n };\n return {\n ...base,\n ready: true,\n reduced,\n mode: resolved.motionMode,\n fade,\n duration,\n stagger,\n ease,\n spring,\n pressScale: resolved.numbers[\"press-scale\"] ?? base.pressScale,\n css: {\n spring: resolved.easings[\"ease-spring\"] ?? base.css.spring,\n springBounce: resolved.easings[\"ease-spring-bounce\"] ?? base.css.springBounce,\n overshoot: resolved.easings[\"ease-overshoot\"] ?? base.css.overshoot,\n },\n };\n }, [resolved]);\n}\n"},{"path":"beamline/hooks/use-reduced-motion-safe.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-reduced-motion-safe.ts","content":"\"use client\";\n\nimport { useMediaQuery } from \"./use-media-query\";\nimport { useScopeMotion } from \"../runtime/appearance\";\n\n/** Managed motion policy plus the OS preference, with a stable server snapshot. */\nexport function useReducedMotionSafe() {\n const requested = useScopeMotion();\n const os = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n return requested !== \"auto\" || os;\n}\n"},{"path":"beamline/lib/focus.ts","type":"registry:file","target":"src/ui/beamline/lib/focus.ts","content":"/**\n * Keeping a keyboard user's place when something disappears. Removing the element that has focus (a dismissed alert,\n * a removed chip or file, a deleted row) drops focus on , and the next Tab starts at the top of the page.\n */\n\nconst TABBABLE = \"a[href], button, input:not([type=hidden]), select, textarea, [tabindex], [contenteditable=true]\";\n\nfunction tabbables(scope: Element) {\n // a modal layer (menu, dialog) marks the rest of the page aria-hidden while it is open (data-aria-hidden): that\n // content is still where focus should land once the layer closes\n return [...scope.querySelectorAll(TABBABLE)].filter(\n (e) =>\n e.tabIndex >= 0 &&\n !e.matches(\":disabled\") &&\n !e.closest(\"[inert], [aria-hidden=true]:not([data-aria-hidden])\") &&\n e.getClientRects().length > 0,\n );\n}\n\n/** The control after `item` in reading order (outside it), or the one before it. */\nfunction neighbour(item: Element, scope: Element) {\n const all = tabbables(scope).filter((e) => !item.contains(e));\n return (\n all.find((e) => item.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING) ??\n all.reverse().find((e) => item.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) ??\n null\n );\n}\n\n/**\n * Call just before `item` is removed or hidden: if focus is inside it, focus moves to the next control after it (or\n * the one before). `scope` keeps the search inside a widget (a toolbar, a field); `fallback` is used when the scope has\n * nothing else to focus. Does nothing when focus is elsewhere, so a removal the user did not start never steals focus.\n */\nexport function focusAfterRemoval(\n item: Element | null | undefined,\n { scope, fallback }: { scope?: Element | null; fallback?: HTMLElement | null } = {},\n) {\n if (!item || !item.contains(document.activeElement)) return;\n (neighbour(item, scope ?? document.body) ?? fallback)?.focus();\n}\n\n/**\n * For an action that may or may not remove its item (the app decides, as with a row's Delete): call before running it.\n * If the item is gone afterwards and focus fell to the page, focus moves to the control that followed it.\n */\nexport function keepPlaceIfRemoved(item: Element | null | undefined, { scope }: { scope?: Element | null } = {}) {\n if (!item) return;\n const target = neighbour(item, scope ?? document.body);\n const check = () => {\n if (\n !item.isConnected &&\n (!document.activeElement || document.activeElement === document.body) &&\n target?.isConnected\n )\n target.focus();\n };\n setTimeout(check, 0);\n setTimeout(check, 400); // after an exit animation\n}\n\n/**\n * A press on a part's surface that hands focus to its control (a slider's well, a mark under its track): call from the\n * pointerdown. Focus goes to `control` without the keyboard's ring (`focusVisible: false`, so the part does not switch\n * to its keyboard look after a click). A mouse press is also followed by the browser's own focus step, which moves\n * focus to the nearest focusable ancestor or the page and leaves the arrow keys dead after the click; that step is\n * cancelled for this one press (and the press selects no text). Cancelling the pointerdown instead would also hide the\n * click from the browser, which then reads the focus as the keyboard's. A control a keyboard user already focused keeps\n * its ring.\n */\nexport function focusFromPress(\n control: HTMLElement | null | undefined,\n event: PointerEvent | { nativeEvent: PointerEvent },\n) {\n if (!control) return;\n const pointer = \"nativeEvent\" in event ? event.nativeEvent : event;\n // asserted, not declared globally: shipped source must type-check without this repo's globals.d.ts, on the\n // TypeScript an app already has (create-next-app installs 5.9, whose DOM lib lacks focusVisible)\n control.focus({ preventScroll: true, focusVisible: false } as FocusOptions);\n // the mouse's compatibility events follow the pointerdown in the same task; a finger's arrive only after a tap\n if (pointer.pointerType !== \"mouse\") return;\n const cancel = (e: MouseEvent) => e.preventDefault();\n window.addEventListener(\"mousedown\", cancel, { capture: true, once: true });\n setTimeout(() => window.removeEventListener(\"mousedown\", cancel, { capture: true }), 0);\n}\n"},{"path":"beamline/lib/id.ts","type":"registry:file","target":"src/ui/beamline/lib/id.ts","content":"let sequence = 0;\n\n/** An id for something made here and now (a sent message, a dropped file, a toast, a new rule): unique within the page\n * and across reloads, short, and safe in a selector. For an id that must match on the server and the client, useId. */\nexport const localId = (prefix: string) => `${prefix}-${Date.now().toString(36)}${(++sequence).toString(36)}`;\n"},{"path":"beamline/lib/number.ts","type":"registry:file","target":"src/ui/beamline/lib/number.ts","content":"import { createFormatters, FALLBACK_LOCALE } from \"../runtime/messages\";\n/** Reads a number typed in `locale` (\"1.234,5\" in de, \"1,234.5\" in en): group separators dropped, the locale's decimal\n * mark read as the point, currency signs and units ignored. Empty or unreadable text is null; nothing is clamped. */\nexport function parseLocaleNumber(text: string, locale?: string): number | null {\n if (!text.trim()) return null;\n // exponent form: \"1e3\" is a thousand and \"2.5e-3\" a fraction (the digits are never run together into 13)\n const exp = text.trim().match(/^(.*\\d)\\s*e\\s*([+\\u2212-]?\\d+)$/i);\n if (exp) {\n const base = parseLocaleNumber(exp[1], locale);\n return base === null ? null : Number((base * 10 ** Number(exp[2].replace(\"\\u2212\", \"-\"))).toPrecision(15));\n }\n const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);\n const group = parts.find((p) => p.type === \"group\")?.value ?? \",\";\n const decimal = parts.find((p) => p.type === \"decimal\")?.value ?? \".\";\n let ascii = text;\n // one grouping mark that cannot group (not three digits after it) and no decimal mark: the decimal was written the\n // other locale's way (\"1,5\" in English is one and a half, never fifteen)\n const marks = text.split(group).length - 1;\n if (marks === 1 && !text.includes(decimal) && !new RegExp(`\\\\${group}\\\\d{3}(?!\\\\d)`).test(text))\n ascii = text.replace(group, decimal);\n if (/[^\\p{ASCII}]/u.test(text)) {\n const digits = new Intl.NumberFormat(locale, { useGrouping: false });\n for (let value = 0; value < 10; value++) ascii = ascii.replaceAll(digits.format(value), String(value));\n }\n const normalized = ascii\n .replaceAll(group, \"\")\n .replaceAll(\"\\u202f\", \"\")\n .replace(decimal, \".\")\n .replace(/[\\u2212\\u2013]/g, \"-\")\n .replace(/[^\\d.-]/g, \"\");\n if (!/\\d/.test(normalized)) return null;\n const n = Number(normalized);\n return Number.isFinite(n) ? n : null;\n}\n\nconst formatters = new Map();\n/** A number written from serializable settings, so a server component can pass them where a `format` function cannot\n * cross: Intl options in a locale, with words before and after (\"$\" … \" / mo\"). One Intl.NumberFormat per setting. */\nexport function formatNumber(\n value: number,\n { locale, formatOptions, prefix = \"\", suffix = \"\" }: NumberFormatSettings = {},\n): string {\n const key = `${locale ?? \"\"}|${JSON.stringify(formatOptions ?? {})}`;\n let f = formatters.get(key);\n if (!f) formatters.set(key, (f = new Intl.NumberFormat(locale, formatOptions)));\n return `${prefix}${f.format(value)}${suffix}`;\n}\n\nexport interface NumberFormatSettings {\n locale?: string;\n formatOptions?: Intl.NumberFormatOptions;\n /** Written before the number: \"$\". */\n prefix?: string;\n /** Written after the number: \" ms\", \" / mo\". */\n suffix?: string;\n}\n\n/** Binary-scaled file sizes; the digits and unit names follow the supplied locale. */\nexport function formatByteSize(bytes: number, locale = FALLBACK_LOCALE, maximumUnit = 3, fractionDigits?: number) {\n const units = [\"byte\", \"kilobyte\", \"megabyte\", \"gigabyte\"];\n let value = bytes,\n unit = 0;\n while (value >= 1024 && unit < maximumUnit) {\n value /= 1024;\n unit++;\n }\n const digits = fractionDigits ?? (value < 10 && unit > 0 ? 1 : 0);\n return createFormatters(locale).number(value, {\n style: \"unit\",\n unit: units[unit],\n unitDisplay: \"short\",\n minimumFractionDigits: digits,\n maximumFractionDigits: digits,\n });\n}\n"},{"path":"beamline/lib/utils.ts","type":"registry:file","target":"src/ui/beamline/lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads\n `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other.\n Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it,\n and every merged page title lost the look's display face. */\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-weight\": [{ font: [\"title\"] }],\n \"font-family\": [{ font: [\"display\", \"numeric\", \"figure\"] }],\n \"font-size\": [\n {\n text: [\n \"2xs\",\n \"display\",\n \"title\",\n \"heading\",\n \"subheading\",\n \"body\",\n \"body-sm\",\n \"reading\",\n \"label\",\n \"caption\",\n \"overline\",\n \"numeric\",\n \"code\",\n ],\n },\n ],\n },\n },\n});\n\n/** Merge class names, letting later Tailwind utilities win over earlier ones. */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\n/** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */\nexport function rng(seed = 1) {\n let s = seed >>> 0 || 1;\n return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32;\n}\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n"}],"docs":"File drop zone is in src/ui/beamline/components/file-dropzone/file-dropzone.tsx. The source is in src/ui/beamline (ui/beamline in a project without src/). After Tailwind, import its styles/beamline.css once, then styles/look-prism.css in your app stylesheet (use relative paths). Keep the shared base before all chosen looks. Wrap your app in with UIRoot from its runtime/appearance and prism from its looks/prism. shadcn replaces files when asked; use the Beamline managed-source CLI from the start for three-way upgrades that preserve edits.","meta":{"free":true,"version":"0.2.0-rc.42","library":"https://beamline.io/components/file-dropzone"}}