{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"product-tour","type":"registry:component","title":"Product tour","description":"A short guided tour over the real interface: a spotlight that glides from one element to the next while the rest of the screen dims, and a card beside each element that says what it does, with its step and progress, Back, Next and Skip; focus moves into the card and comes back where it was, Escape ends the tour, arrows step through it, and a quieter beacon variant marks one new thing without dimming anything.","categories":["overlays"],"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/_shared/icon-action.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/icon-action.module.css","content":"@layer properties, theme, base, components, utilities;\n/* The small square action that sits inside another element: a field's clear and open buttons, a chip's remove, a\n   toast's close, a carousel's previous and next. One recipe so every one of them answers alike: quiet ink at rest,\n   the hover plate at once, the press at once, both let go over --pui-motion-out. Its corner is the chip radius: under\n   the nested-corner rule (.nest-corner) a part whose own corner is the chip never changes inside a rounded frame. */\n@layer components {\n  .root {\n    position: relative;\n    display: grid;\n    flex-shrink: 0;\n    place-items: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    border-radius: var(--pui-radius-chip);\n    color: var(--pui-ink-3);\n    /* opacity and translate stay in the list so a .reveal action keeps its own arrival whichever rule wins */\n    transition:\n      background-color var(--pui-motion-out) var(--pui-ease-default),\n      color var(--pui-motion-out) var(--pui-ease-default),\n      transform 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  .root:hover:not(:disabled),\n  .root[data-pressed] {\n    background-color: var(--pui-hover);\n    color: var(--pui-ink);\n  }\n  .root:hover {\n    transition-duration: 0ms;\n  }\n  .root:active:not(:disabled) {\n    transform: scale(var(--pui-press-scale));\n    transition-duration: 0ms;\n  }\n  .root:disabled {\n    cursor: default;\n    opacity: 0.4;\n  }\n  .root[data-tone=\"ink-2\"] {\n    color: var(--pui-ink-2);\n  }\n  .root[data-tone=\"inherit\"] {\n    color: inherit;\n  }\n  .root[data-tone=\"inherit\"]:hover:not(:disabled) {\n    color: inherit;\n  }\n  /* on an inverted (ink) surface: inverse ink, a faint inverse plate */\n  .root[data-tone=\"inverse\"] {\n    color: color-mix(in oklab, var(--pui-ink-inverse) 72%, transparent);\n  }\n  .root[data-tone=\"inverse\"]:hover:not(:disabled),\n  .root[data-tone=\"inverse\"][data-pressed] {\n    background-color: color-mix(in oklab, var(--pui-ink-inverse) 12%, transparent);\n    color: var(--pui-ink-inverse);\n  }\n\n  .xs {\n    --_size: 1.25rem;\n  }\n  /* a 20px action still takes a 24px hit (WCAG 2.5.8): the bleed is outside the drawn square */\n  .xs::after {\n    position: absolute;\n    inset: calc((var(--pui-hit-min) - 1.25rem) / -2);\n    content: \"\";\n  }\n  .sm {\n    --_size: 1.5rem;\n  }\n  .md {\n    --_size: 1.75rem;\n  }\n  .lg {\n    --_size: 2rem;\n  }\n}\n"},{"path":"beamline/components/_shared/icon-action.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/icon-action.tsx","content":"\"use client\";\n// organism-allow-file: raw-control -- the shared part every element draws this control from\n\nimport type { ButtonHTMLAttributes, Ref } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./icon-action.module.css\";\n\n/** 20 · 24 · 28 · 32 px. A 20px action keeps a 24px hit outside its square. */\nexport type IconActionSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface IconActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The action's name: the button holds only an icon. */\n  \"aria-label\": string;\n  size?: IconActionSize;\n  /** Rest ink: ink-3 (the default, an action beside content), ink-2 (an action that is the row's point), inverse (on\n   *  an inverted ink surface) or inherit (on a painted surface that brings its own colours). */\n  tone?: \"ink-3\" | \"ink-2\" | \"inverse\" | \"inherit\";\n  /** Holds the hover plate while what it opens is open, or while it is switched on. */\n  pressed?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The small square icon action inside another element (clear, remove, dismiss, previous, next, retry). One recipe for\n * all of them; a full-size action with words is a Button, and Button with iconOnly is the standalone square.\n */\nexport function IconAction({\n  size = \"sm\",\n  tone = \"ink-3\",\n  pressed,\n  type = \"button\",\n  className,\n  ref,\n  ...props\n}: IconActionProps) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-tone={tone === \"ink-3\" ? undefined : tone}\n      data-pressed={pressed ? \"\" : undefined}\n      className={cn(styles.root, styles[size], className)}\n      {...props}\n    />\n  );\n}\n"},{"path":"beamline/components/button/button-variants.ts","type":"registry:file","target":"src/ui/beamline/components/button/button-variants.ts","content":"import { cn } from \"../../lib/utils\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\" | \"accent\";\n/** sm 32 · md 36 · lg 40 · touch 44 (a bottom action bar on a phone). */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"touch\";\n/** Market side: buy fills with --pui-up, sell with --pui-down (a red-up market flips the two tokens, not the code). */\nexport type ButtonTone = \"up\" | \"down\";\n\n/** Which paint role paints each variant: filled variants are solids, the quiet ones keep their own light paint. */\nconst ROLE: Record<ButtonVariant, string | undefined> = {\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<HTMLButtonElement>,\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<Record<\"root\" | \"label\" | \"loader\", string>>;\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 <button>. */\n  asChild?: boolean;\n  /** A square button holding only an icon (give it an aria-label). Decided by the children when left out: icon-only when\n   *  no words sit anywhere among them (an icon, or a frame of icons), so `<span>Close</span>` is a label. */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n// Motion's animation features arrive in a deferred chunk (AT11): the button renders and works at once, and its press,\n// loader and label motion run once they land, a frame or two after mount. Buttons that mount after that get the\n// loaded features directly, so they render once instead of again when a lazy load resolves.\ntype Features = typeof import(\"./motion-features\").default;\nlet loaded: Features | null = null;\nconst features = () =>\n  import(\"./motion-features\").then((module) => {\n    loaded = module.default;\n    return loaded;\n  });\n\n/** Children with fragments opened up, so `{busy ? <><Icon />Saving</> : …}` reads as icon plus text. */\nconst flat = (children: ReactNode): ReactNode[] =>\n  Children.toArray(children).flatMap((c) =>\n    isValidElement<{ children?: ReactNode }>(c) && c.type === Fragment ? flat(c.props.children) : [c],\n  );\n\n/** Whether any words sit anywhere inside (an icon, or a frame of icons, has none). */\nfunction hasText(node: ReactNode): boolean {\n  if (typeof node === \"string\") return node.trim() !== \"\";\n  if (typeof node === \"number\") return true;\n  if (Array.isArray(node)) return node.some(hasText);\n  return isValidElement<{ children?: ReactNode }>(node) && hasText(node.props.children);\n}\n\n/** Splits children into the text run (the label that can change) and everything else (icons), in order, and says\n *  whether any element carries content of its own (a `<span>Close</span>` label, unlike an icon). */\nfunction split(children: ReactNode) {\n  const parts = flat(children);\n  const text = parts\n    .filter((p) => typeof p === \"string\" || typeof p === \"number\")\n    .join(\"\")\n    .trim();\n  const firstText = parts.findIndex((p) => typeof p === \"string\" || typeof p === \"number\");\n  const before = firstText === -1 ? parts : parts.slice(0, firstText).filter(isValidElement);\n  const after = firstText === -1 ? [] : parts.slice(firstText).filter(isValidElement);\n  const content = parts.some((p) => isValidElement<{ children?: ReactNode }>(p) && hasText(p.props.children));\n  return { text, before, after, content };\n}\n\n/**\n * The action control. Hover answers at once and lets go over --pui-motion-out; a press scales down at once, or swells\n * on the snappy spring where the look's --pui-press-scale is above 1 (glass), never on a trigger that anchors a\n * floating layer, which would measure a resized box; a changed label slides in while the\n * width follows on a critically damped spring; loading keeps the size and the focus.\n */\nexport function Button({\n  variant: variantProp,\n  size: sizeProp,\n  tone: toneProp,\n  loading = false,\n  look,\n  asChild = false,\n  iconOnly: iconOnlyProp,\n  className,\n  classNames,\n  children,\n  type,\n  onClick,\n  onPointerMove,\n  onPointerDown,\n  disabled,\n  ref,\n  ...props\n}: ButtonProps) {\n  const i18n = useMessages(\"button\", englishMessages);\n\n  const defaults = useComponentDefaults<ButtonDefaults>(\"button\", [\"variant\", \"size\", \"tone\"]);\n  const variant = variantProp ?? defaults.variant ?? \"primary\";\n  const size = sizeProp ?? defaults.size ?? \"md\";\n  const tone = toneProp ?? defaults.tone;\n  const host = useRef<HTMLButtonElement>(null);\n  const attach = useComposedRef(host, ref);\n  const motionTokens = useMotionTokens(host);\n  const requestedReduced = useReducedMotionSafe();\n  const reduced = requestedReduced || motionTokens.reduced;\n  // Reduced motion keeps a restrained fade; none removes it (APPEARANCE A06).\n  const fade = motionTokens.mode === \"none\" ? 0 : motionTokens.fade.in;\n  // a caller's aria-disabled keeps the button focusable (focus never drops after Save resolves) but inert to presses\n  const softDisabled = props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\";\n  const { text, before, after, content } = split(children);\n  const prism = usePrismLight(host, variant === \"primary\" || variant === \"accent\", `${text}|${tone}|${variant}`);\n  // with asChild the text sits inside the child (the link), not among our own children\n  const inner = asChild && isValidElement<{ children?: ReactNode }>(children) ? split(children.props.children) : null;\n  const iconOnly = iconOnlyProp ?? (inner ? !inner.text && !inner.content : !text && !content);\n  const anchor =\n    (props[\"aria-haspopup\"] != null && props[\"aria-haspopup\"] !== false && props[\"aria-haspopup\"] !== \"false\") ||\n    \"data-state\" in props;\n  const shared = {\n    \"data-slot\": \"button\",\n    \"data-variant\": variant,\n    \"data-size\": size,\n    \"data-tone\": tone,\n    \"data-icon-only\": iconOnly ? \"\" : undefined,\n    \"data-loading\": loading ? \"\" : undefined,\n    \"data-look\": look,\n    className: buttonClassName({ variant, size, tone, className: cn(classNames?.root, className) }),\n  };\n\n  if (asChild)\n    return (\n      <Slot.Root {...shared} {...props} ref={attach}>\n        {children}\n      </Slot.Root>\n    );\n\n  const button = (\n    <m.button\n      ref={attach}\n      type={type ?? \"button\"}\n      {...shared}\n      {...props}\n      disabled={disabled}\n      aria-busy={loading || undefined}\n      aria-disabled={loading || softDisabled || undefined}\n      onPointerMove={(e) => {\n        prism.turn(e);\n        onPointerMove?.(e);\n      }}\n      onPointerDown={(e) => {\n        prism.press();\n        onPointerDown?.(e);\n      }}\n      onClick={(e) => {\n        if (loading || softDisabled) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      whileTap={\n        reduced || anchor || disabled || loading || softDisabled\n          ? undefined\n          : {\n              scale: motionTokens.pressScale,\n              // a press that sinks lands at once; one that swells toward the finger (glass) grows on the spring\n              transition: motionTokens.pressScale > 1 ? motionTokens.spring.snappy : { duration: 0 },\n            }\n      }\n      transition={{ scale: motionTokens.spring.snappy }}\n    >\n      <AnimatePresence initial={false}>\n        {loading && (\n          <m.span\n            key=\"loader\"\n            data-slot=\"button-loader\"\n            className={cn(styles.loader, classNames?.loader)}\n            initial={reduced ? { opacity: 0 } : { width: 0, opacity: 0 }}\n            animate={{ width: \"auto\", opacity: 1 }}\n            exit={reduced ? { opacity: 0 } : { width: 0, opacity: 0 }}\n            transition={{ duration: reduced ? fade : motionTokens.duration.standard, ease: motionTokens.ease.default }}\n          >\n            <Spinner size=\"sm\" label={i18n(\"working\")} className={styles.spinner} />\n          </m.span>\n        )}\n      </AnimatePresence>\n      {iconOnly ? !loading && before : before}\n      {!iconOnly && text && (\n        <Label text={text} reduced={!!reduced} fade={fade} motionTokens={motionTokens} className={classNames?.label} />\n      )}\n      {after}\n    </m.button>\n  );\n  return <LazyMotion features={loaded ?? features}>{button}</LazyMotion>;\n}\n\n/**\n * The main action's light inside the glass, in a look that draws one (prism): its own angle from the start, turned by\n * where the pointer is across the face, a new angle at every press, and a sweep of split light (data-shift) when the\n * button's word, tone or variant changes after it first appears. Writes two style properties and one attribute on the\n * button; nothing runs at rest. Looks without this light ignore all three.\n */\nfunction usePrismLight(host: RefObject<HTMLButtonElement | null>, solid: boolean, state: string) {\n  const frame = useRef(0);\n  const shown = useRef(state);\n  const ending = useRef(0);\n  useLayoutEffect(() => {\n    const el = host.current;\n    if (el && solid) el.style.setProperty(\"--m-prism-seed\", Math.random().toFixed(3));\n  }, [host, solid]);\n  useLayoutEffect(() => {\n    const el = host.current;\n    if (!el || !solid || shown.current === state) return;\n    shown.current = state;\n    // restart the sweep if it is still running\n    delete el.dataset.shift;\n    void el.offsetWidth;\n    el.dataset.shift = \"\";\n    clearTimeout(ending.current);\n    ending.current = window.setTimeout(() => delete el.dataset.shift, 1200);\n  }, [host, solid, state]);\n  useLayoutEffect(\n    () => () => {\n      clearTimeout(ending.current);\n      cancelAnimationFrame(frame.current);\n    },\n    [],\n  );\n  return {\n    turn: (e: PointerEvent<HTMLButtonElement>) => {\n      if (!solid || e.pointerType !== \"mouse\" || frame.current) return;\n      const el = e.currentTarget;\n      const x = e.clientX;\n      frame.current = requestAnimationFrame(() => {\n        frame.current = 0;\n        const r = el.getBoundingClientRect();\n        if (r.width) el.style.setProperty(\"--m-prism-x\", ((x - r.left) / r.width).toFixed(3));\n      });\n    },\n    press: () => {\n      if (solid) host.current?.style.setProperty(\"--m-prism-seed\", Math.random().toFixed(3));\n    },\n  };\n}\n\n/** The text run. When it changes, the old words leave upward and the new ones rise in, while the width moves from the\n *  old measure to the new one; no measuring happens while the label is unchanged. */\nfunction Label({\n  text,\n  reduced,\n  fade,\n  motionTokens,\n  className,\n}: {\n  text: string;\n  reduced: boolean;\n  /** Seconds of the label crossfade under reduced motion (0 under none). */\n  fade: number;\n  /** The button's own, resolved at the button: the label sits inside it, in the same look and motion. */\n  motionTokens: ReturnType<typeof useMotionTokens>;\n  className?: string;\n}) {\n  const slot = useRef<HTMLSpanElement>(null);\n  const latest = useRef(motionTokens);\n  useLayoutEffect(() => {\n    latest.current = motionTokens;\n  }, [motionTokens]);\n  const last = useRef<{ text: string; width: number } | null>(null);\n  useLayoutEffect(() => {\n    const el = slot.current;\n    if (!el) return;\n    const prev = last.current;\n    // first mount: read the width after paint, when layout is already clean, instead of forcing a layout per button\n    if (!prev) {\n      last.current = { text, width: Number.NaN };\n      const id = requestAnimationFrame(() => {\n        if (last.current?.text === text) last.current = { text, width: el.getBoundingClientRect().width };\n      });\n      return () => cancelAnimationFrame(id);\n    }\n    el.style.width = \"\";\n    const width = el.getBoundingClientRect().width;\n    last.current = { text, width };\n    // a label that is not rendered (a hidden toolbar on a phone) has nothing to animate\n    if (prev.text === text || reduced || Number.isNaN(prev.width) || !el.getClientRects().length) return;\n    // The same spring, played natively: motion/mini samples the generator into a linear() easing.\n    const { visualDuration, bounce } = latest.current.spring.morph;\n    // while the width eases the words are clipped, not cut short with an ellipsis (that is for a room too narrow)\n    el.dataset.morphing = \"\";\n    const run = animate(el, { width: [`${prev.width}px`, `${width}px`] }, { type: spring, visualDuration, bounce });\n    run.then(() => {\n      el.style.width = \"\";\n      delete el.dataset.morphing;\n    });\n    // cancel, not stop: stop commits the running value, which throws once the element stops being rendered, and the\n    // next change measures afresh anyway\n    return () => {\n      run.cancel();\n      el.style.width = \"\";\n      delete el.dataset.morphing;\n    };\n  }, [text, reduced]);\n  // A label that changes faster than its words can rise in (a count read live while a hand drags) shows each new\n  // value at once: otherwise every value would start invisible and the button would read blank for the whole drag.\n  const rapid = useRapid(text, motionTokens.duration.standard * 1000);\n  const enter = reduced ? { opacity: 0 } : { opacity: 0, y: \"0.45em\", filter: `blur(${motionTokens.blur.subtle}px)` };\n  const leave = reduced\n    ? { opacity: 0 }\n    : {\n        opacity: 0,\n        y: \"-0.45em\",\n        filter: `blur(${motionTokens.blur.subtle}px)`,\n        transition: { duration: motionTokens.duration.fast },\n      };\n  return (\n    <span ref={slot} data-slot=\"button-label\" className={cn(styles.label, className)}>\n      <AnimatePresence mode=\"popLayout\" initial={false} custom={rapid}>\n        <Words\n          key={text}\n          className={styles.text}\n          custom={rapid}\n          variants={{\n            enter: (fast: boolean) => (fast ? { opacity: 1, y: \"0em\", filter: \"blur(0px)\" } : enter),\n            shown: { opacity: 1, y: \"0em\", filter: \"blur(0px)\" },\n            leave: (fast: boolean) => (fast ? { opacity: 0, transition: { duration: 0 } } : leave),\n          }}\n          initial=\"enter\"\n          animate=\"shown\"\n          exit=\"leave\"\n          transition={{ duration: reduced ? fade : motionTokens.duration.standard, ease: motionTokens.ease.default }}\n        >\n          {text}\n        </Words>\n      </AnimatePresence>\n    </span>\n  );\n}\n\n/** Whether `text` changed again within `ms` of its last change. Read in render: the answer belongs to this text. */\nfunction useRapid(text: string, ms: number) {\n  const seen = useRef({ text, at: Number.NEGATIVE_INFINITY, rapid: false });\n  if (seen.current.text !== text) {\n    const at = performance.now();\n    seen.current = { text, at, rapid: at - seen.current.at < ms };\n  }\n  return seen.current.rapid;\n}\n\n/** One label's words. Leaving, they are already gone for assistive tech: the button's name is the new label at once,\n *  not both while the old words animate away (or for good, where time stands still in a test). */\nfunction Words(props: ComponentProps<typeof m.span>) {\n  const present = useIsPresent();\n  return <m.span {...props} aria-hidden={present ? undefined : true} />;\n}\n\nexport default Button;\n"},{"path":"beamline/components/button/defaults.ts","type":"registry:file","target":"src/ui/beamline/components/button/defaults.ts","content":"import type { ButtonSize, ButtonTone, ButtonVariant } from \"./button-variants\";\n/** Scoped design choices only; no loading, events or domain state. */\nexport interface ButtonDefaults {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  tone?: ButtonTone;\n}\n"},{"path":"beamline/components/button/messages.ts","type":"registry:file","target":"src/ui/beamline/components/button/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  working: \"Working\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/button/motion-features.ts","type":"registry:file","target":"src/ui/beamline/components/button/motion-features.ts","content":"// REASON: Motion's DOM animation features (tween, spring, presence, press) are loaded after the first paint, so a\n// Button costs a small part of Motion on first load; LazyMotion in button.tsx renders until they arrive.\nimport { domAnimation } from \"motion/react\";\n\nexport default domAnimation;\n"},{"path":"beamline/components/product-tour/messages.ts","type":"registry:file","target":"src/ui/beamline/components/product-tour/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  skipTour: \"Skip tour\",\n  dismiss: \"Dismiss\",\n  thisPartIsnTOnTheScreenRightNow: \"This part isn’t on the screen right now.\",\n  stepOf: \"Step {value} of {length}\",\n  previous: \"Back\",\n  done: \"Done\",\n  next: \"Next\",\n  beacon: \"New\",\n  whatsNew: \"what's new\",\n  beaconDescription: \"{label}: {title}\",\n} satisfies MessageDefinitions;\n"},{"path":"beamline/components/product-tour/product-tour.module.css","type":"registry:file","target":"src/ui/beamline/components/product-tour/product-tour.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n  /* The tour lies over the whole window. The dim is the hole's own shadow, so the cut-out and the dim are one thing\n     and travel together; a clear layer under it takes the clicks (all of them, or all but the hole's on an\n     interactive step). The card rides beside the hole. Every move is a transition between two measured places: at\n     rest nothing runs, and reduced motion makes the moves instant (the duration tokens become 1ms). */\n  .root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--pui-z-modal);\n    pointer-events: none;\n  }\n  .blocker {\n    position: fixed;\n    inset: 0;\n    pointer-events: auto;\n  }\n  [data-variant=\"beacon\"] .blocker {\n    display: none;\n  }\n  .hole {\n    position: fixed;\n    /* measured window coordinates are physical: left, not the start edge */\n    top: 0;\n    left: 0;\n    inline-size: var(--_w);\n    block-size: var(--_h);\n    border-radius: var(--_r);\n    box-shadow:\n      0 0 0 1px oklch(from var(--pui-accent) l c h / 0.55),\n      0 0 0 200vmax var(--pui-scrim);\n    translate: var(--_x) var(--_y);\n    pointer-events: none;\n    animation: dim-in var(--pui-duration-standard) var(--pui-ease-default);\n    transition:\n      translate var(--pui-duration-morph) var(--pui-ease-standard),\n      inline-size var(--pui-duration-morph) var(--pui-ease-standard),\n      block-size var(--pui-duration-morph) var(--pui-ease-standard),\n      border-radius var(--pui-duration-morph) var(--pui-ease-standard);\n  }\n  .hole[data-empty] {\n    box-shadow: 0 0 0 200vmax var(--pui-scrim);\n  }\n  @keyframes dim-in {\n    from {\n      opacity: 0;\n    }\n  }\n\n  .card {\n    position: fixed;\n    top: 0;\n    left: 0;\n    display: grid;\n    inline-size: min(22rem, calc(100vw - 16px));\n    gap: var(--pui-space-3);\n    padding: var(--pui-space-4);\n    border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n    color: var(--pui-ink);\n    translate: var(--_cx) var(--_cy);\n    pointer-events: auto;\n    outline: none;\n    animation: card-in var(--pui-duration-standard) var(--pui-ease-enter);\n    transition: translate var(--pui-duration-morph) var(--pui-ease-standard);\n  }\n  @keyframes card-in {\n    from {\n      opacity: 0;\n      scale: 0.97;\n    }\n  }\n  /* a phone: the card docks to the bottom edge as a sheet, or to the top edge when the element sits where a bottom\n     sheet would cover it; the spotlight stays on the element, and a long step scrolls inside the sheet */\n  .card:is([data-side=\"sheet\"], [data-side=\"sheet-top\"]) {\n    inline-size: 100vw;\n    max-block-size: 60dvh;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    translate: none;\n  }\n  .card[data-side=\"sheet\"] {\n    inset-block: auto 0;\n    padding-block-end: max(var(--pui-space-4), env(safe-area-inset-bottom));\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    animation-name: sheet-in;\n  }\n  .card[data-side=\"sheet-top\"] {\n    inset-block: 0 auto;\n    padding-block-start: max(var(--pui-space-4), env(safe-area-inset-top));\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n    animation-name: sheet-top-in;\n  }\n  @keyframes sheet-in {\n    from {\n      translate: 0 100%;\n    }\n  }\n  @keyframes sheet-top-in {\n    from {\n      translate: 0 -100%;\n    }\n  }\n  .content {\n    display: grid;\n    gap: var(--pui-space-2);\n    animation: step-in var(--pui-duration-morph) var(--pui-ease-standard);\n  }\n  @keyframes step-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n  }\n  .media {\n    overflow: hidden;\n    margin-block-end: var(--pui-space-1);\n    border-radius: var(--pui-radius-control);\n  }\n  .media > :is(img, video) {\n    display: block;\n    inline-size: 100%;\n  }\n  .head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--pui-space-2);\n  }\n  .count {\n    color: var(--pui-ink-3);\n    font-size: var(--pui-text-xs);\n    font-variant-numeric: tabular-nums;\n  }\n  .title {\n    margin: 0;\n    color: var(--pui-ink);\n    font-size: var(--pui-text-base);\n    font-weight: var(--pui-weight-semibold);\n    line-height: 1.3;\n    text-wrap: balance;\n  }\n  .body {\n    color: var(--pui-ink-2);\n    font-size: var(--pui-text-sm);\n    line-height: 1.5;\n    text-wrap: pretty;\n  }\n  .note {\n    margin: 0;\n    color: var(--pui-ink-3);\n    font-size: var(--pui-text-xs);\n  }\n  /* what a waited step needs: blue while it waits, red when the entry is refused, green as it is met */\n  .wait {\n    display: flex;\n    align-items: baseline;\n    gap: var(--pui-space-2);\n    margin: 0;\n    padding: var(--pui-space-2) var(--pui-space-3);\n    border-radius: var(--pui-radius-control);\n    background: var(--pui-blue-tint);\n    color: var(--pui-ink);\n    font-size: var(--pui-text-sm);\n    line-height: 1.4;\n    transition: background-color var(--pui-duration-standard) var(--pui-ease-default);\n  }\n  .wait[data-state=\"invalid\"] {\n    background: var(--pui-red-tint);\n  }\n  .wait[data-state=\"done\"] {\n    background: var(--pui-green-tint);\n  }\n  .waitDot {\n    flex: none;\n    inline-size: 7px;\n    block-size: 7px;\n    border-radius: 999px;\n    background: var(--pui-blue);\n    translate: 0 -1px;\n  }\n  .wait[data-state=\"waiting\"] .waitDot {\n    animation: wait-breathe 1.6s var(--pui-ease-default) 3;\n  }\n  .wait[data-state=\"invalid\"] .waitDot {\n    background: var(--pui-red);\n  }\n  .wait[data-state=\"done\"] .waitDot {\n    background: var(--pui-green);\n  }\n  [data-reduced] .wait[data-state=\"waiting\"] .waitDot {\n    animation: none;\n  }\n  @keyframes wait-breathe {\n    50% {\n      scale: 1.6;\n      opacity: 0.55;\n    }\n  }\n  .foot {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--pui-space-3);\n  }\n  .dots {\n    display: flex;\n    gap: 5px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .dots > li {\n    inline-size: 6px;\n    block-size: 6px;\n    border-radius: 999px;\n    background: var(--pui-line);\n    transition:\n      inline-size var(--pui-duration-morph) var(--pui-ease-standard),\n      background-color var(--pui-duration-standard) var(--pui-ease-default);\n  }\n  .dots > li[data-state=\"done\"] {\n    background: oklch(from var(--pui-accent) l c h / 0.5);\n  }\n  .dots > li[data-state=\"current\"] {\n    inline-size: 18px;\n    background: var(--pui-accent);\n  }\n  .buttons {\n    display: flex;\n    gap: var(--pui-space-2);\n    margin-inline-start: auto;\n  }\n\n  /* beacon: a ring on the element's corner that breathes twice when it appears, then rests */\n  .beacon {\n    position: fixed;\n    top: 0;\n    left: 0;\n    display: grid;\n    place-items: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    margin: -0.75rem 0 0 -0.75rem;\n    border-radius: 999px;\n    translate: var(--_x) var(--_y);\n    pointer-events: auto;\n    transition: translate var(--pui-duration-morph) var(--pui-ease-standard);\n  }\n  .ring {\n    inline-size: 0.625rem;\n    block-size: 0.625rem;\n    border-radius: 999px;\n    background: var(--pui-accent);\n    box-shadow: 0 0 0 3px oklch(from var(--pui-accent) l c h / 0.28);\n  }\n  .ring::after {\n    position: absolute;\n    inset: 0.25rem;\n    border: 2px solid var(--pui-accent);\n    border-radius: inherit;\n    opacity: 0;\n    content: \"\";\n    animation: breathe calc(var(--pui-duration-flash) * 2) var(--pui-ease-default) 2;\n  }\n  .beacon[data-state=\"open\"] .ring::after {\n    animation: none;\n  }\n  @keyframes breathe {\n    from {\n      opacity: 0.8;\n      scale: 0.6;\n    }\n    to {\n      opacity: 0;\n      scale: 1.6;\n    }\n  }\n  .beacon:focus-visible {\n    outline: var(--pui-focus-width) var(--pui-focus-style) var(--pui-focus-ring-kbd);\n    outline-offset: 2px;\n  }\n}\n"},{"path":"beamline/components/product-tour/product-tour.tsx","type":"registry:file","target":"src/ui/beamline/components/product-tour/product-tour.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport { Button } from \"../button/button\";\nimport { useReducedMotionSafe } from \"../../hooks/use-reduced-motion-safe\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport { IconAction } from \"../_shared/icon-action\";\nimport styles from \"./product-tour.module.css\";\n\nexport interface TourStep {\n  /** What the step points at: a CSS selector or a ref. None: the card sits in the middle (a welcome, a last word). */\n  target?: string | RefObject<HTMLElement | null>;\n  title: ReactNode;\n  body?: ReactNode;\n  /** A picture or short clip above the words. */\n  media?: ReactNode;\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"auto\";\n  /** The element in the spotlight stays usable (people try it while the card explains it). */\n  interactive?: boolean;\n  /**\n   * The step waits for what the person does instead of offering Next: the card says what is needed (`hint`), the\n   * target stays usable and keeps focus, and the tour moves on by itself once `satisfied` turns true. `invalid` keeps\n   * the step and says why (a name already taken). The tour can still be left at any point.\n   */\n  waitFor?: { satisfied: boolean; hint: ReactNode; invalid?: ReactNode };\n}\n\nexport interface ProductTourClassNames {\n  scrim?: string;\n  hole?: string;\n  card?: string;\n  title?: string;\n  body?: string;\n  progress?: string;\n  actions?: string;\n  beacon?: string;\n}\n\nexport interface ProductTourProps {\n  steps: TourStep[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  step?: number;\n  defaultStep?: number;\n  onStepChange?: (step: number) => void;\n  /** Done on the last step. */\n  onFinish?: () => void;\n  /** Skip tour or Escape, with the step it ended on. */\n  onSkip?: (step: number) => void;\n  /** spotlight (dims the rest, default) or beacon (a ring on the element; its card opens from it, nothing dims). */\n  variant?: \"spotlight\" | \"beacon\";\n  /** Room around the element inside the spotlight, px. Default 6. */\n  padding?: number;\n  labels?: {\n    next?: string;\n    previous?: string;\n    /** @deprecated Use previous. */ back?: string;\n    done?: string;\n    skip?: string;\n    beacon?: string;\n  };\n  className?: string;\n  classNames?: ProductTourClassNames;\n  style?: CSSProperties;\n}\n\ntype Box = { x: number; y: number; w: number; h: number; r: number };\ntype Side = \"top\" | \"bottom\" | \"left\" | \"right\" | \"center\" | \"over\" | \"sheet\" | \"sheet-top\";\n\nconst GAP = 12;\nconst EDGE = 8;\nconst CARD = 352;\nconst PHONE = 576;\nconst FIELD =\n  \"input:not([type=hidden]):not([disabled]), textarea, select, [contenteditable=true], button:not([disabled])\";\n\nfunction resolve(target: TourStep[\"target\"]): HTMLElement | null {\n  if (!target) return null;\n  if (typeof target === \"string\") return typeof document === \"undefined\" ? null : document.querySelector(target);\n  return target.current ?? null;\n}\n\nfunction measure(el: HTMLElement, pad: number): Box {\n  const r = el.getBoundingClientRect();\n  const radius = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;\n  return { x: r.left - pad, y: r.top - pad, w: r.width + pad * 2, h: r.height + pad * 2, r: radius + pad };\n}\n\n/** Taller than the window can show beside a card: the tour brings such an element's top into view, not its middle. */\nfunction tall(height: number, card: number) {\n  return height > window.innerHeight - card - GAP - EDGE * 2;\n}\n\n/**\n * The side with room, the asked one first; the card is then slid along that side to stay inside the window. Room is\n * measured against the part of the element the window shows, so a tall element still gets a card beside its visible\n * part; with no room on any side the card rests on the window's bottom edge, over the element's lower part, and its top\n * stays in view. On a phone the card is a sheet on the bottom edge, or on the top edge when the element sits where the\n * sheet would cover it.\n */\nfunction place(box: Box | null, card: { w: number; h: number }, want: TourStep[\"placement\"]) {\n  const vw = window.innerWidth,\n    vh = window.innerHeight;\n  if (vw < PHONE) {\n    const covered = !!box && box.y + box.h > vh - card.h && box.y >= card.h;\n    return { side: (covered ? \"sheet-top\" : \"sheet\") as Side, x: 0, y: 0 };\n  }\n  if (!box) return { side: \"center\" as Side, x: (vw - card.w) / 2, y: (vh - card.h) / 2 };\n  const top = Math.max(box.y, 0),\n    bottom = Math.min(box.y + box.h, vh);\n  const seen = { x: box.x, y: top, w: box.w, h: Math.max(0, bottom - top) };\n  const room = {\n    bottom: vh - (seen.y + seen.h) - GAP - EDGE >= card.h,\n    top: seen.y - GAP - EDGE >= card.h,\n    right: vw - (seen.x + seen.w) - GAP - EDGE >= card.w,\n    left: seen.x - GAP - EDGE >= card.w,\n  };\n  const order: Side[] =\n    want && want !== \"auto\"\n      ? [want, ...([\"bottom\", \"top\", \"right\", \"left\"] as Side[]).filter((s) => s !== want)]\n      : [\"bottom\", \"top\", \"right\", \"left\"];\n  const side = order.find((s) => room[s as keyof typeof room]) ?? \"over\";\n  const clampX = (x: number) => Math.min(vw - EDGE - card.w, Math.max(EDGE, x));\n  const clampY = (y: number) => Math.min(vh - EDGE - card.h, Math.max(EDGE, y));\n  const cx = seen.x + seen.w / 2 - card.w / 2,\n    cy = seen.y + seen.h / 2 - card.h / 2;\n  if (side === \"bottom\") return { side, x: clampX(cx), y: seen.y + seen.h + GAP };\n  if (side === \"top\") return { side, x: clampX(cx), y: seen.y - GAP - card.h };\n  if (side === \"right\") return { side, x: seen.x + seen.w + GAP, y: clampY(cy) };\n  if (side === \"left\") return { side, x: seen.x - GAP - card.w, y: clampY(cy) };\n  return { side, x: clampX(cx), y: vh - EDGE - card.h };\n}\n\n/**\n * A guided tour over the real interface. The spotlight's hole travels from one element to the next while the rest of\n * the screen dims; the card beside each says what the element does, with its step, Back, Next and Skip. Focus moves\n * into the card and returns where it was; ← → step, Escape ends. The beacon variant marks one thing with a ring whose\n * card opens from it, without dimming anything. Nothing listens or moves while the tour is closed.\n */\nexport function ProductTour({\n  steps,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  step: stepProp,\n  defaultStep = 0,\n  onStepChange,\n  onFinish,\n  onSkip,\n  variant = \"spotlight\",\n  padding = 6,\n  labels,\n  className,\n  classNames,\n  style,\n}: ProductTourProps) {\n  const i18n = useMessages(\"product-tour\", englishMessages);\n\n  const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);\n  const [stepValue, setStepValue] = useControllable(stepProp, defaultStep, onStepChange);\n  const index = Math.max(0, Math.min(steps.length - 1, stepValue));\n  const current = steps[index];\n  const last = index === steps.length - 1;\n  const waiting = !!current?.waitFor && !current.waitFor.satisfied;\n  const usable = !!current?.interactive || !!current?.waitFor;\n  const container = usePortalContainer();\n  const reduced = useReducedMotionSafe();\n  const id = useId();\n  const card = useRef<HTMLDivElement>(null);\n  const primary = useRef<HTMLButtonElement>(null);\n  const before = useRef<HTMLElement | null>(null);\n  const ring = useRef<HTMLButtonElement>(null);\n  const [box, setBox] = useState<Box | null>(null);\n  const [pos, setPos] = useState<{ side: Side; x: number; y: number }>({ side: \"center\", x: 0, y: 0 });\n  const [missing, setMissing] = useState(false);\n  // beacon: the ring shows until it is pressed; the card then opens from it\n  const [expanded, setExpanded] = useState(variant === \"spotlight\");\n  const [announce, setAnnounce] = useState(\"\");\n  const showCard = variant === \"spotlight\" || expanded;\n  const go = (next: number) => {\n    const n = Math.max(0, Math.min(steps.length - 1, next));\n    setStepValue(n);\n  };\n  const end = useCallback(\n    (finished: boolean) => {\n      if (finished) onFinish?.();\n      else onSkip?.(index);\n      setOpen(false);\n    },\n    [onFinish, onSkip, index, setOpen],\n  );\n\n  // a waited step moves on when its check turns true while it is showing, not when it arrives already true (Back)\n  const satisfied = current?.waitFor?.satisfied;\n  const seen = useRef<{ index: number; satisfied?: boolean }>({ index, satisfied });\n  useEffect(() => {\n    const was = seen.current;\n    seen.current = { index, satisfied };\n    if (!open || was.index !== index || was.satisfied !== false || satisfied !== true) return;\n    if (!last) go(index + 1);\n    else primary.current?.focus({ preventScroll: true });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, index, satisfied, last]);\n\n  // An interactive target lives outside the portalled card, so its keys do not reach the card's handler.\n  useEffect(() => {\n    if (!open || !usable) return;\n    const target = resolve(current.target);\n    const dismiss = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== \"Escape\" || event.defaultPrevented) return;\n      event.preventDefault();\n      if (variant === \"beacon\") {\n        setExpanded(false);\n        ring.current?.focus({ preventScroll: true });\n      } else end(false);\n    };\n    target?.addEventListener(\"keydown\", dismiss);\n    return () => target?.removeEventListener(\"keydown\", dismiss);\n  }, [open, current, usable, variant, end]);\n\n  // where the element is now, and where the card fits beside it; read again on scroll, resize and the element's resize\n  const sync = useCallback(() => {\n    const el = resolve(current?.target);\n    const b = el ? measure(el, padding) : null;\n    setMissing(!!current?.target && !el);\n    setBox(b);\n    const c = card.current;\n    const size = { w: c?.offsetWidth || CARD, h: c?.offsetHeight || 200 };\n    setPos(place(b, size, current?.placement));\n  }, [current, padding]);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const el = resolve(current?.target);\n    if (el) {\n      const r = el.getBoundingClientRect();\n      const vh = window.innerHeight;\n      const cardH = card.current?.offsetHeight || 200;\n      const behavior = reduced ? \"instant\" : \"smooth\";\n      if (tall(r.height, cardH)) {\n        // its top, not its middle: the top lands just inside the window, the card beside or over the part below\n        if (r.top < padding + EDGE || r.top > vh / 3) {\n          const margin = el.style.scrollMarginTop;\n          el.style.scrollMarginTop = `${padding + EDGE}px`;\n          el.scrollIntoView({ block: \"start\", inline: \"nearest\", behavior });\n          el.style.scrollMarginTop = margin;\n        }\n      } else if (r.top < 0 || r.bottom > vh || r.left < 0 || r.right > window.innerWidth)\n        el.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior });\n    }\n    sync();\n    let frame = 0;\n    const later = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(sync);\n    };\n    window.addEventListener(\"scroll\", later, true);\n    window.addEventListener(\"resize\", later);\n    const ro = new ResizeObserver(later);\n    if (el) ro.observe(el);\n    if (card.current) ro.observe(card.current);\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener(\"scroll\", later, true);\n      window.removeEventListener(\"resize\", later);\n      ro.disconnect();\n    };\n  }, [open, current, sync, reduced, showCard]);\n\n  // focus: into the card on opening and on each step, back where it was when the tour ends\n  useEffect(() => {\n    if (!open) return;\n    if (!before.current) before.current = document.activeElement as HTMLElement | null;\n  }, [open]);\n  useEffect(() => {\n    if (!open || !showCard) return;\n    if (current?.waitFor && !current.waitFor.satisfied) {\n      // the person acts in the target: its first field takes focus, and the card never pulls it back; a frame later, so\n      // the key that met the step before (Enter) has finished and can't press this one too\n      const el = resolve(current.target);\n      const field = el?.matches(FIELD) ? el : el?.querySelector<HTMLElement>(FIELD);\n      if (field) {\n        const frame = requestAnimationFrame(() => field.focus({ preventScroll: true }));\n        return () => cancelAnimationFrame(frame);\n      }\n    }\n    primary.current?.focus({ preventScroll: true });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, showCard, index]);\n  useEffect(() => {\n    if (open) return;\n    const el = before.current;\n    before.current = null;\n    if (el?.isConnected) el.focus({ preventScroll: true });\n    setExpanded(variant === \"spotlight\");\n  }, [open, variant]);\n  useEffect(() => {\n    if (open && current) setAnnounce(i18n(\"stepOf\", { value: index + 1, length: steps.length }));\n  }, [open, index, current, steps.length, i18n]);\n\n  const onKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === \"Escape\") {\n      if (variant === \"beacon\") {\n        setExpanded(false);\n        ring.current?.focus({ preventScroll: true });\n      } else end(false);\n    } else if (e.key === \"ArrowRight\" && !e.altKey) {\n      if (!last && !waiting) go(index + 1);\n    } else if (e.key === \"ArrowLeft\" && !e.altKey) {\n      if (index > 0) go(index - 1);\n    } else if (e.key === \"Tab\") {\n      // the card keeps focus while the tour is open: Tab goes round its buttons\n      const items = [...(card.current?.querySelectorAll<HTMLElement>(\"button:not([disabled]), a[href]\") ?? [])];\n      if (!items.length) return;\n      const at = items.indexOf(document.activeElement as HTMLElement);\n      const next = e.shiftKey ? (at <= 0 ? items.length - 1 : at - 1) : at === items.length - 1 ? 0 : at + 1;\n      items[next].focus();\n    } else return;\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  if (!open || !current || container === null || typeof document === \"undefined\") return null;\n\n  const spotlight = variant === \"spotlight\";\n  const vw = typeof window === \"undefined\" ? 0 : window.innerWidth;\n  const vh = typeof window === \"undefined\" ? 0 : window.innerHeight;\n  // the scrim takes clicks everywhere except the hole when the step lets people use the element\n  const blocker =\n    box && usable\n      ? `polygon(evenodd, 0 0, ${vw}px 0, ${vw}px ${vh}px, 0 ${vh}px, 0 0, ${box.x}px ${box.y}px, ${box.x}px ${\n          box.y + box.h\n        }px, ${box.x + box.w}px ${box.y + box.h}px, ${box.x + box.w}px ${box.y}px, ${box.x}px ${box.y}px)`\n      : undefined;\n\n  return createPortal(\n    <div\n      data-slot=\"product-tour\"\n      data-variant={variant}\n      data-reduced={reduced ? \"\" : undefined}\n      className={styles.root}\n    >\n      {spotlight && (\n        <>\n          <div\n            aria-hidden\n            data-slot=\"product-tour-scrim\"\n            className={cn(styles.blocker, classNames?.scrim)}\n            style={{ clipPath: blocker }}\n          />\n          <div\n            aria-hidden\n            data-slot=\"product-tour-hole\"\n            data-empty={box ? undefined : \"\"}\n            className={cn(styles.hole, classNames?.hole)}\n            style={\n              (box\n                ? {\n                    \"--_x\": `${box.x}px`,\n                    \"--_y\": `${box.y}px`,\n                    \"--_w\": `${box.w}px`,\n                    \"--_h\": `${box.h}px`,\n                    \"--_r\": `${box.r}px`,\n                  }\n                : {\n                    \"--_x\": `${vw / 2}px`,\n                    \"--_y\": `${vh / 2}px`,\n                    \"--_w\": \"0px\",\n                    \"--_h\": \"0px\",\n                    \"--_r\": \"0px\",\n                  }) as CSSProperties\n            }\n          />\n        </>\n      )}\n      {!spotlight && box && (\n        <button\n          ref={ring}\n          type=\"button\"\n          data-slot=\"product-tour-beacon\"\n          data-state={expanded ? \"open\" : \"closed\"}\n          aria-expanded={expanded}\n          aria-controls={`${id}-card`}\n          aria-label={i18n(\"beaconDescription\", {\n            label: labels?.beacon ?? i18n(\"beacon\"),\n            title: typeof current.title === \"string\" ? current.title : i18n(\"whatsNew\"),\n          })}\n          className={cn(styles.beacon, classNames?.beacon)}\n          style={{ \"--_x\": `${box.x + box.w}px`, \"--_y\": `${box.y}px` } as CSSProperties}\n          onClick={() => setExpanded((v) => !v)}\n        >\n          <span aria-hidden className={styles.ring} />\n        </button>\n      )}\n      {showCard && (\n        <div\n          ref={card}\n          id={`${id}-card`}\n          role=\"dialog\"\n          aria-modal={spotlight}\n          aria-labelledby={`${id}-title`}\n          aria-describedby={current.body ? `${id}-body` : undefined}\n          data-slot=\"product-tour-card\"\n          data-side={pos.side}\n          data-missing={missing ? \"\" : undefined}\n          onKeyDown={onKey}\n          className={cn(styles.card, \"m-overlay\", classNames?.card, className)}\n          style={{ ...style, \"--_cx\": `${pos.x}px`, \"--_cy\": `${pos.y}px` } as CSSProperties}\n        >\n          <div key={index} className={styles.content}>\n            {current.media && <div className={styles.media}>{current.media}</div>}\n            <div className={styles.head}>\n              <span className={styles.count} data-slot=\"product-tour-count\">\n                {index + 1} / {steps.length}\n              </span>\n              <IconAction\n                size=\"md\"\n                className=\"-m-1\"\n                aria-label={labels?.skip ?? (spotlight ? i18n(\"skipTour\") : i18n(\"dismiss\"))}\n                onClick={() => end(false)}\n              >\n                <X aria-hidden className=\"size-4\" />\n              </IconAction>\n            </div>\n            <h2 id={`${id}-title`} className={cn(styles.title, classNames?.title)} data-slot=\"product-tour-title\">\n              {current.title}\n            </h2>\n            {current.body && (\n              <div id={`${id}-body`} className={cn(styles.body, classNames?.body)} data-slot=\"product-tour-body\">\n                {current.body}\n              </div>\n            )}\n            {current.waitFor && (\n              <p\n                className={styles.wait}\n                data-slot=\"product-tour-wait\"\n                data-state={current.waitFor.satisfied ? \"done\" : current.waitFor.invalid ? \"invalid\" : \"waiting\"}\n                role=\"status\"\n              >\n                <span aria-hidden className={styles.waitDot} />\n                <span>{current.waitFor.invalid ?? current.waitFor.hint}</span>\n              </p>\n            )}\n            {missing && (\n              <p className={styles.note} data-slot=\"product-tour-missing\">\n                {i18n(\"thisPartIsnTOnTheScreenRightNow\")}\n              </p>\n            )}\n          </div>\n          <div className={cn(styles.foot, classNames?.actions)}>\n            {steps.length > 1 && (\n              <ol\n                className={cn(styles.dots, classNames?.progress)}\n                aria-label={i18n(\"stepOf\", { value: index + 1, length: steps.length })}\n                data-slot=\"product-tour-progress\"\n              >\n                {steps.map((_, i) => (\n                  <li key={i} data-state={i === index ? \"current\" : i < index ? \"done\" : \"next\"} />\n                ))}\n              </ol>\n            )}\n            <div className={styles.buttons}>\n              {index > 0 ? (\n                <Button size=\"sm\" variant=\"ghost\" onClick={() => go(index - 1)} data-slot=\"product-tour-back\">\n                  {labels?.previous ?? labels?.back ?? i18n(\"previous\")}\n                </Button>\n              ) : (\n                steps.length > 1 && (\n                  <Button size=\"sm\" variant=\"ghost\" onClick={() => end(false)} data-slot=\"product-tour-skip\">\n                    {labels?.skip ?? i18n(\"skipTour\")}\n                  </Button>\n                )\n              )}\n              {waiting ? (\n                // nothing to press while the step waits; with its target gone, the way out takes Next's place\n                missing && (\n                  <Button\n                    ref={primary}\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onClick={() => end(false)}\n                    data-slot=\"product-tour-leave\"\n                  >\n                    {labels?.skip ?? i18n(\"skipTour\")}\n                  </Button>\n                )\n              ) : (\n                <Button\n                  ref={primary}\n                  size=\"sm\"\n                  onClick={() => (last ? end(true) : go(index + 1))}\n                  data-slot=\"product-tour-next\"\n                >\n                  {last ? (labels?.done ?? i18n(\"done\")) : (labels?.next ?? i18n(\"next\"))}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      )}\n      <div aria-live=\"polite\" className=\"sr-only\" data-slot=\"product-tour-live\">\n        {announce}\n      </div>\n    </div>,\n    container ?? document.body,\n  );\n}\n\nexport default ProductTour;\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<HTMLSpanElement>;\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<SpinnerDefaults>(\"spinner\", [\"size\"]);\n  const size = sizeProp ?? scopeDefaults.size ?? \"md\";\n  const host = useRef<HTMLSpanElement>(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    <span\n      ref={attach}\n      data-slot=\"spinner\"\n      data-state={state}\n      data-delay={delay > 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      <svg\n        viewBox=\"0 0 24 24\"\n        width=\"100%\"\n        height=\"100%\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        data-state={state}\n        data-slot=\"spinner-svg\"\n        data-reduced={reduced ? \"\" : undefined}\n        data-paused={active ? undefined : \"\"}\n        className={cn(styles.svg, classNames?.svg)}\n      >\n        <circle\n          data-slot=\"spinner-track\"\n          className={cn(styles.track, classNames?.track)}\n          cx=\"12\"\n          cy=\"12\"\n          r=\"9.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n        />\n        <circle\n          data-slot=\"spinner-arc\"\n          className={cn(styles.arc, classNames?.arc)}\n          cx=\"12\"\n          cy=\"12\"\n          r=\"9.5\"\n          pathLength={1}\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          transform=\"rotate(-90 12 12)\"\n        />\n        {state === \"success\" && (\n          <path\n            data-slot=\"spinner-mark\"\n            className={cn(styles.mark, classNames?.mark)}\n            d=\"M7.5 12.5l3 3 6-6.5\"\n            pathLength={1}\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        )}\n        {state === \"error\" && (\n          <path\n            data-slot=\"spinner-mark\"\n            className={cn(styles.mark, classNames?.mark)}\n            d=\"M8.5 8.5l7 7M15.5 8.5l-7 7\"\n            pathLength={1}\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n          />\n        )}\n      </svg>\n    </span>\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<Element | null>,\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<T>(internal: RefObject<T | null>, external?: Ref<T>) {\n  return useCallback(\n    (node: T | null) => {\n      internal.current = node;\n      if (typeof external === \"function\") {\n        const cleanup = external(node);\n        if (typeof cleanup === \"function\")\n          return () => {\n            internal.current = null;\n            cleanup();\n          };\n      } else if (external) external.current = node;\n    },\n    [internal, external],\n  );\n}\n"},{"path":"beamline/hooks/use-controllable.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-controllable.ts","content":"\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\n/**\n * One value in both forms (rules/CONVENTIONS.md): the prop while it is passed, otherwise the element's own copy that\n * starts at `initial` (a value, or a function that makes it once). The setter takes a value or an updater; an updater\n * reads the latest value even twice in one event, and every change reaches `onChange`, controlled or not.\n * `Next` is what a change can carry when it is narrower than the state: a range that starts empty (null) but is only\n * ever changed to a range.\n */\nexport function useControllable<T, Next extends T = T>(\n  value: T | undefined,\n  initial: T | (() => T),\n  onChange?: (next: Next) => void,\n) {\n  const [own, setOwn] = useState<T>(initial);\n  const current = value !== undefined ? value : own;\n  const latest = useRef(current);\n  latest.current = current;\n  const set = useCallback(\n    (next: Next | ((was: T) => Next)) => {\n      const resolved = typeof next === \"function\" ? (next as (was: T) => Next)(latest.current) : next;\n      latest.current = resolved;\n      if (value === undefined) setOwn(resolved);\n      onChange?.(resolved);\n    },\n    [value, onChange],\n  );\n  return [current, set] as const;\n}\n"},{"path":"beamline/hooks/use-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<string, MediaQueryList>();\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<HTMLElement | null>): 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/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":"Product tour is in src/ui/beamline/components/product-tour/product-tour.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 <UIRoot preset={prism}> 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/product-tour"}}