{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"menubar","type":"registry:component","title":"Menu bar","description":"A desktop-style File / Edit / View bar for editor-like apps; each menu takes the same rows as the dropdown menu, and pointing moves between open menus.","categories":["navigation"],"dependencies":["@radix-ui/react-direction@1.1.4","@radix-ui/react-menubar@1.1.24","clsx@^2.1.1","lucide-react@^1.48.0","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/components/_shared/glide.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/glide.tsx","content":"\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport overlay from \"./overlay.module.css\";\n\n/**\n * The gliding highlight for a list whose active row is tracked in state (command menu, listbox): one plate travels to\n * the active row for the arrow keys and the pointer alike, over --pui-duration-fast. It appears in place (no travel)\n * the first time and whenever `reset` changes (a new page or a new query), so typing never sends it flying.\n * The list must be the plate's offset parent (position: relative); rows stay above it (overlay.item is z-index 1).\n */\nexport function GlidePlate({\n  list,\n  selector,\n  reset,\n  axis = \"y\",\n  className,\n}: {\n  list: RefObject<HTMLElement | null>;\n  /** Finds the active row inside `list`; null when nothing is active. */\n  selector: string | null;\n  reset?: unknown;\n  /** \"y\" for a list (the plate spans the width); \"xy\" for a row or grid of cells (it takes each cell's size). */\n  axis?: \"y\" | \"xy\";\n  className?: string;\n}) {\n  const [plate, setPlate] = useState<{ x: number; y: number; w: number; h: number; jump: boolean } | null>(null);\n  const lastReset = useRef(reset);\n  const self = useRef<HTMLSpanElement>(null);\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose; setPlate bails out when unchanged\n  useLayoutEffect(() => {\n    // the list holds the plate, and React attaches a parent's ref only after its children's layout effects: on the\n    // first commit the list is the plate's own parent (it placed itself only when something rendered again later)\n    const host = list.current ?? self.current?.parentElement;\n    const row = selector ? host?.querySelector<HTMLElement>(selector) : null;\n    const fresh = lastReset.current !== reset;\n    lastReset.current = reset;\n    if (!row) {\n      setPlate((p) => (p && p.h ? { ...p, h: 0 } : p));\n      return;\n    }\n    const x = row.offsetLeft,\n      y = row.offsetTop,\n      w = row.offsetWidth,\n      h = row.offsetHeight;\n    setPlate((p) =>\n      p && p.x === x && p.y === y && p.w === w && p.h === h && !fresh ? p : { x, y, w, h, jump: fresh || !p?.h },\n    );\n    // every render: rows can arrive or change height without the selector changing; an unchanged place keeps the state\n  });\n  return (\n    <span\n      ref={self}\n      aria-hidden\n      data-slot=\"list-highlight\"\n      className={cn(overlay.glide, className)}\n      data-on={plate?.h ? \"\" : undefined}\n      data-jump={plate?.jump ? \"\" : undefined}\n      data-axis={axis}\n      style={\n        !plate\n          ? undefined\n          : axis === \"y\"\n            ? { transform: `translateY(${plate.y}px)`, height: plate.h || undefined }\n            : { transform: `translate(${plate.x}px, ${plate.y}px)`, width: plate.w, height: plate.h || undefined }\n      }\n    />\n  );\n}\n\n/**\n * A GlidePlate for lists whose highlight is the pointer or keyboard focus rather than state (time picker, plain option\n * lists): it follows the row under the pointer or holding focus, and fades when neither is in the list. Rows drop\n * their own hover and focus tint.\n */\nexport function FollowPlate({\n  list,\n  rows,\n  className,\n}: {\n  list: RefObject<HTMLElement | null>;\n  /** Matches a row inside `list`, e.g. \"[role=option]\". */\n  rows: string;\n  className?: string;\n}) {\n  const [hot, setHot] = useState<string | null>(null);\n  // after the commit, when the list's ref is attached (a layout effect here ran before it and never listened)\n  useEffect(() => {\n    const el = list.current;\n    if (!el) return;\n    let n = 0;\n    const mark = (target: EventTarget | null) => {\n      const row = (target as HTMLElement | null)?.closest?.<HTMLElement>(rows);\n      if (!row || !el.contains(row)) return;\n      row.dataset.glideKey ??= String(++n);\n      setHot(row.dataset.glideKey);\n    };\n    const over = (e: Event) => mark(e.target);\n    const leave = () => {\n      if (!el.contains(document.activeElement)) setHot(null);\n    };\n    const blur = (e: FocusEvent) => {\n      if (!el.contains(e.relatedTarget as Node)) setHot(null);\n    };\n    el.addEventListener(\"pointerover\", over);\n    el.addEventListener(\"focusin\", over);\n    el.addEventListener(\"pointerleave\", leave);\n    el.addEventListener(\"focusout\", blur);\n    return () => {\n      el.removeEventListener(\"pointerover\", over);\n      el.removeEventListener(\"focusin\", over);\n      el.removeEventListener(\"pointerleave\", leave);\n      el.removeEventListener(\"focusout\", blur);\n    };\n  }, [list, rows]);\n  return <GlidePlate list={list} selector={hot ? `[data-glide-key=\"${hot}\"]` : null} className={className} />;\n}\n"},{"path":"beamline/components/_shared/menu.tsx","type":"registry:file","target":"src/ui/beamline/components/_shared/menu.tsx","content":"\"use client\";\n\nimport {\n  Fragment,\n  useCallback,\n  useRef,\n  useState,\n  type ComponentType,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { Check, ChevronRight } from \"lucide-react\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { cn } from \"../../lib/utils\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport overlay from \"./overlay.module.css\";\n\nexport interface MenuClassNames {\n  /** Classes for the root part; no override by default. */\n  root?: string;\n  /** Classes for the trigger part; no override by default. */\n  trigger?: string;\n  /** Classes for the content part; no override by default. */\n  content?: string;\n  /** Classes for the submenu part; no override by default. */\n  submenu?: string;\n  /** Classes for the indicator part; no override by default. */\n  indicator?: string;\n  /** Classes for the item part; no override by default. */\n  item?: string;\n  /** Classes for the label part; no override by default. */\n  label?: string;\n  /** Classes for the shortcut part; no override by default. */\n  shortcut?: string;\n  /** Classes for the check part; no override by default. */\n  check?: string;\n  /** Classes for the separator part; no override by default. */\n  separator?: string;\n  /** Classes for the heading part; no override by default. */\n  heading?: string;\n  /** Classes for the chevron part; no override by default. */\n  chevron?: string;\n}\n\n/** One row of any menu in the system (dropdown, context menu, menu bar). The same data renders the same everywhere. */\nexport interface MenuItem {\n  /** Stable key; the label is used when absent. */\n  id?: string;\n  /** Text displayed for this item. Required. */\n  label: ReactNode;\n  /** Icon element displayed with this item. Omitted by default. */\n  icon?: ReactNode;\n  /** A shortcut shown at the end, e.g. \"⌘D\". The app binds the key. */\n  shortcut?: string;\n  /** Runs when this item is activated. Omitted by default. */\n  onSelect?: (event: Event) => void;\n  /** Whether this option is unavailable for selection. Omitted by default. */\n  disabled?: boolean;\n  /** danger: a destructive action (red). */\n  tone?: \"danger\";\n  /** A line above this item. */\n  separatorBefore?: boolean;\n  /** A small heading above this item, starting a group. */\n  heading?: string;\n  /** A checkable item; shows a check when true. */\n  checked?: boolean;\n  /** checkbox (default when checked is set) stays open when toggled; radio is one of a set and closes the menu. */\n  type?: \"checkbox\" | \"radio\";\n  /** A submenu. */\n  items?: MenuItem[];\n}\n\ntype Part = ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any -- Radix menu namespaces share part names, not prop types\n/** The Radix parts a menu needs; DropdownMenu, ContextMenu and Menubar all provide them. */\nexport interface MenuKit {\n  Content: Part;\n  SubContent: Part;\n  Item: Part;\n  CheckboxItem: Part;\n  ItemIndicator: Part;\n  Sub: Part;\n  SubTrigger: Part;\n  Separator: Part;\n  Label: Part;\n  Portal: Part;\n}\n\n/** The reading direction a menu should open in: an explicit one, else the direction in force around its trigger (read\n *  when the trigger mounts and again as it is pressed, right-clicked or keyed), else a Direction provider. Without it\n *  Radix falls back to \"ltr\", so a portalled menu on an RTL page reads left to right, opens submenus to the right and\n *  answers → instead of ←. Spread `triggerProps` on the Radix trigger and pass `dir` to the Radix root. */\nexport function useMenuDirection(explicit?: \"ltr\" | \"rtl\") {\n  const provided = useDirection();\n  const [around, setAround] = useState<\"ltr\" | \"rtl\">();\n  const read = useCallback((el: Element | null) => {\n    if (el) setAround(getComputedStyle(el).direction === \"rtl\" ? \"rtl\" : \"ltr\");\n  }, []);\n  const measure = useCallback((e: { currentTarget: Element }) => read(e.currentTarget), [read]);\n  return {\n    dir: explicit ?? around ?? provided,\n    triggerProps: {\n      ref: read,\n      onPointerDownCapture: measure,\n      onKeyDownCapture: measure,\n      onContextMenuCapture: measure,\n    },\n  };\n}\n\n/** The floating list: one surface and one highlight plate that glides between rows, under the pointer and the arrow\n *  keys alike. Extra props (align, side, sideOffset) go to the Radix content part. */\nexport function MenuSurface({\n  kit,\n  sub = false,\n  label,\n  className,\n  classNames,\n  children,\n  ref,\n  ...rest\n}: {\n  kit: MenuKit;\n  sub?: boolean;\n  label?: string;\n  className?: string;\n  classNames?: MenuClassNames;\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n} & Record<string, unknown>) {\n  const surface = useRef<HTMLDivElement | null>(null);\n  // the portal's presence passes its own ref (it watches the exit animation); keep both\n  const attach = useComposedRef(surface, ref);\n  const [plate, setPlate] = useState<{ y: number; h: number; jump: boolean } | null>(null);\n  const Part = sub ? kit.SubContent : kit.Content;\n  const { onFocusOutside, ...others } = rest as { onFocusOutside?: (event: Event) => void };\n  return (\n    <Part\n      ref={attach}\n      data-slot={sub ? \"menu-submenu\" : \"menu\"}\n      aria-label={label}\n      collisionPadding={8}\n      loop\n      {...(sub ? { sideOffset: 2, alignOffset: -4 } : {})}\n      {...others}\n      // a surface still playing its exit is already closed: the focus that moves into the next menu of a menu bar\n      // must not count as \"outside\" and close the whole bar (Radix would reset the bar's open menu to none)\n      onFocusOutside={(event: Event) => {\n        if (surface.current?.dataset.state === \"closed\") event.preventDefault();\n        onFocusOutside?.(event);\n      }}\n      className={cn(\n        overlay.surface,\n        overlay.menu,\n        \"relative min-w-[11rem]\",\n        sub ? classNames?.submenu : classNames?.content,\n        className,\n      )}\n      // React events cross portals: only rows of this surface move its plate (a submenu has its own)\n      onFocusCapture={(e: FocusEvent<HTMLDivElement>) => {\n        const item = (e.target as HTMLElement).closest<HTMLElement>(\"[data-menu-item]\");\n        if (item && !surface.current?.contains(item)) return;\n        if (!item) {\n          setPlate((p) => (p ? { ...p, h: 0 } : p));\n          return;\n        }\n        setPlate((p) => ({ y: item.offsetTop, h: item.offsetHeight, jump: !p?.h }));\n      }}\n      // while a submenu is open, its trigger keeps the plate\n      onPointerLeave={() => {\n        if (!surface.current?.querySelector(\":scope > [data-menu-item][data-state=open]\"))\n          setPlate((p) => (p ? { ...p, h: 0 } : p));\n      }}\n    >\n      <span\n        aria-hidden\n        data-slot=\"menu-indicator\"\n        className={cn(overlay.glide, classNames?.indicator)}\n        data-on={plate?.h ? \"\" : undefined}\n        data-jump={plate?.jump ? \"\" : undefined}\n        style={plate ? { transform: `translateY(${plate.y}px)`, height: plate.h || undefined } : undefined}\n      />\n      {children}\n    </Part>\n  );\n}\n\n/** Rows for a MenuItem list, in any kit. */\nexport function MenuItems({\n  kit,\n  items,\n  container,\n  classNames,\n}: {\n  kit: MenuKit;\n  items: MenuItem[];\n  container?: HTMLElement | null;\n  classNames?: MenuClassNames;\n}) {\n  return items.map((item, i) => {\n    const tone = item.tone;\n    const common = {\n      \"data-menu-item\": \"\",\n      \"data-slot\": \"menu-item\",\n      \"data-glide\": \"\",\n      \"data-tone\": tone,\n      className: cn(overlay.item, classNames?.item),\n      disabled: item.disabled,\n    };\n    const content = (\n      <>\n        {item.icon}\n        <span data-slot=\"menu-label\" dir=\"auto\" className={cn(\"min-w-0 truncate\", classNames?.label)}>\n          {item.label}\n        </span>\n        {item.shortcut && (\n          <span data-slot=\"menu-shortcut\" dir=\"ltr\" className={cn(overlay.shortcut, classNames?.shortcut)}>\n            {item.shortcut}\n          </span>\n        )}\n      </>\n    );\n    let node: ReactNode;\n    if (item.items?.length) {\n      node = (\n        <kit.Sub>\n          <kit.SubTrigger {...common}>\n            {content}\n            <ChevronRight data-slot=\"menu-chevron\" className={cn(\"ms-auto rtl:rotate-180\", classNames?.chevron)} />\n          </kit.SubTrigger>\n          {container !== null && (\n            <kit.Portal container={container}>\n              <MenuSurface kit={kit} sub classNames={classNames}>\n                <MenuItems kit={kit} items={item.items} container={container} classNames={classNames} />\n              </MenuSurface>\n            </kit.Portal>\n          )}\n        </kit.Sub>\n      );\n    } else if (item.checked !== undefined && item.type === \"radio\") {\n      node = (\n        <kit.Item {...common} role=\"menuitemradio\" aria-checked={item.checked} onSelect={item.onSelect}>\n          {content}\n          <span data-slot=\"menu-check\" className={cn(overlay.check, classNames?.check)}>\n            {item.checked && <Check />}\n          </span>\n        </kit.Item>\n      );\n    } else if (item.checked !== undefined) {\n      node = (\n        <kit.CheckboxItem\n          {...common}\n          checked={item.checked}\n          onSelect={(e: Event) => {\n            e.preventDefault();\n            item.onSelect?.(e);\n          }}\n        >\n          {content}\n          <kit.ItemIndicator data-slot=\"menu-check\" className={cn(overlay.check, classNames?.check)}>\n            <Check />\n          </kit.ItemIndicator>\n        </kit.CheckboxItem>\n      );\n    } else {\n      node = (\n        <kit.Item {...common} onSelect={item.onSelect}>\n          {content}\n        </kit.Item>\n      );\n    }\n    return (\n      <Fragment key={item.id ?? (typeof item.label === \"string\" ? item.label : i)}>\n        {item.separatorBefore && i > 0 && (\n          <kit.Separator data-slot=\"menu-separator\" className={cn(overlay.separator, classNames?.separator)} />\n        )}\n        {item.heading && (\n          <kit.Label data-slot=\"menu-heading\" className={cn(overlay.heading, classNames?.heading)}>\n            {item.heading}\n          </kit.Label>\n        )}\n        {node}\n      </Fragment>\n    );\n  });\n}\n"},{"path":"beamline/components/_shared/overlay.module.css","type":"registry:file","target":"src/ui/beamline/components/_shared/overlay.module.css","content":"@layer properties, theme, base, components, utilities;\n/* the source morph's moving parts: the clip's four sides, the radius and the offset back to the trigger */\n@property --ci-t {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: -48px;\n}\n@property --ci-r {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: -48px;\n}\n@property --ci-b {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: -48px;\n}\n@property --ci-l {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: -48px;\n}\n@property --ci-x {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --ci-y {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@layer components {\n  /* Every floating layer in the system: one surface (painted by the overlay role of the look in force), one menu-item\n   look, one scrim, one enter and exit. A layer placed against a trigger opens out of it (the source morph below); one\n   without a placement arrives in --pui-motion-in scaling from its origin. Each leaves in --pui-motion-out; Radix keeps\n   it mounted until the exit animation ends. Reduced motion makes both instant (the duration tokens become 1ms). */\n  .surface {\n    z-index: var(--pui-z-popover);\n    min-width: 8rem;\n    /* never past the screen: as wide and as tall as the room beside the trigger (Radix measures it) */\n    max-width: var(--radix-popper-available-width, none);\n    max-height: var(--radix-popper-available-height, 70vh);\n    overflow: auto;\n    border-radius: var(--pui-overlay-radius, var(--pui-radius-card));\n    color: var(--pui-ink);\n    transform-origin: var(--radix-popper-transform-origin, var(--radix-dropdown-menu-content-transform-origin, center));\n    outline: none;\n  }\n  .surface[data-state=\"open\"],\n  .surface[data-state=\"delayed-open\"],\n  .surface[data-state=\"instant-open\"] {\n    animation: pop-in var(--pui-motion-in) var(--pui-ease-default);\n  }\n  .surface[data-state=\"closed\"] {\n    animation: pop-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n  }\n\n  /* The source morph (research/morphing-interfaces-2026-10-04, M3): a layer placed against a trigger does not fade in\n     beside it, it opens out of it. It starts as the trigger's own box (Radix gives its size and the side and alignment\n     it was placed on), offset back onto the trigger, and grows: the side nearest the trigger is there at once, the\n     sides across follow, the far side arrives last (~200 ms), so the rows by the trigger are readable within the\n     ruled 90 ms while the outline settles. Content fades in over those 90 ms. It closes back into the trigger in the\n     ruled 180 ms. The clip ends 48px outside the box so the layer's shadow is never cut. Reduced motion: instant. */\n  .surface[data-side] {\n    --_aw: var(--radix-popper-anchor-width, 0px);\n    --_ah: var(--radix-popper-anchor-height, 0px);\n    --_gap: 6px;\n    --from-t: -48px;\n    --from-r: -48px;\n    --from-b: -48px;\n    --from-l: -48px;\n    --from-x: 0px;\n    --from-y: 0px;\n    --d-near: calc(var(--pui-duration-standard) * 0.55);\n    --d-cross: calc(var(--pui-duration-standard) * 0.85);\n    --d-far: var(--pui-duration-standard);\n    clip-path: inset(\n      var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-overlay-radius, var(--pui-radius-card))\n    );\n    translate: var(--ci-x) var(--ci-y);\n  }\n  .surface[data-side=\"bottom\"] {\n    --from-t: 0px;\n    --from-b: calc(100% - var(--_ah));\n    --from-y: calc(-1 * (var(--_ah) + var(--_gap)));\n    --d-t: var(--d-near);\n    --d-b: var(--d-far);\n    --d-l: var(--d-cross);\n    --d-r: var(--d-cross);\n  }\n  .surface[data-side=\"top\"] {\n    --from-b: 0px;\n    --from-t: calc(100% - var(--_ah));\n    --from-y: calc(var(--_ah) + var(--_gap));\n    --d-b: var(--d-near);\n    --d-t: var(--d-far);\n    --d-l: var(--d-cross);\n    --d-r: var(--d-cross);\n  }\n  .surface[data-side=\"right\"] {\n    --from-l: 0px;\n    --from-r: calc(100% - var(--_aw));\n    --from-x: calc(-1 * (var(--_aw) + var(--_gap)));\n    --d-l: var(--d-near);\n    --d-r: var(--d-far);\n    --d-t: var(--d-cross);\n    --d-b: var(--d-cross);\n  }\n  .surface[data-side=\"left\"] {\n    --from-r: 0px;\n    --from-l: calc(100% - var(--_aw));\n    --from-x: calc(var(--_aw) + var(--_gap));\n    --d-r: var(--d-near);\n    --d-l: var(--d-far);\n    --d-t: var(--d-cross);\n    --d-b: var(--d-cross);\n  }\n  /* alignment along the trigger: which part of the layer the trigger sits over */\n  .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"] {\n    --from-l: 0px;\n    --from-r: calc(100% - var(--_aw));\n  }\n  .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"] {\n    --from-l: calc(100% - var(--_aw));\n    --from-r: 0px;\n  }\n  .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"start\"]:dir(rtl) {\n    --from-l: calc(100% - var(--_aw));\n    --from-r: 0px;\n  }\n  .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"end\"]:dir(rtl) {\n    --from-l: 0px;\n    --from-r: calc(100% - var(--_aw));\n  }\n  .surface:is([data-side=\"bottom\"], [data-side=\"top\"])[data-align=\"center\"] {\n    --from-l: calc((100% - var(--_aw)) / 2);\n    --from-r: calc((100% - var(--_aw)) / 2);\n  }\n  .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"start\"] {\n    --from-t: 0px;\n    --from-b: calc(100% - var(--_ah));\n  }\n  .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"end\"] {\n    --from-t: calc(100% - var(--_ah));\n    --from-b: 0px;\n  }\n  .surface:is([data-side=\"left\"], [data-side=\"right\"])[data-align=\"center\"] {\n    --from-t: calc((100% - var(--_ah)) / 2);\n    --from-b: calc((100% - var(--_ah)) / 2);\n  }\n  .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) {\n    animation:\n      grow-t var(--d-t) var(--pui-ease-out-strong),\n      grow-r var(--d-r) var(--pui-ease-out-strong),\n      grow-b var(--d-b) var(--pui-ease-out-strong),\n      grow-l var(--d-l) var(--pui-ease-out-strong),\n      grow-xy var(--d-cross) var(--pui-ease-out-strong),\n      settling var(--d-far) step-end;\n  }\n  .surface[data-side]:is([data-state=\"open\"], [data-state=\"delayed-open\"], [data-state=\"instant-open\"]) > * {\n    animation: content-in var(--pui-motion-in) var(--pui-ease-default) both;\n  }\n  /* one duration for every part of the exit: the layer unmounts when the first of them ends */\n  .surface[data-side][data-state=\"closed\"] {\n    animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n  }\n  .surface[data-side][data-state=\"closed\"] > * {\n    animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n  }\n  @keyframes grow-t {\n    from {\n      --ci-t: var(--from-t);\n    }\n  }\n  @keyframes grow-r {\n    from {\n      --ci-r: var(--from-r);\n    }\n  }\n  @keyframes grow-b {\n    from {\n      --ci-b: var(--from-b);\n    }\n  }\n  @keyframes grow-l {\n    from {\n      --ci-l: var(--from-l);\n    }\n  }\n  @keyframes grow-xy {\n    from {\n      --ci-x: var(--from-x);\n      --ci-y: var(--from-y);\n    }\n  }\n  /* it starts over its own trigger: until it has grown, the press that opened it must not land on a row */\n  @keyframes settling {\n    0%,\n    100% {\n      pointer-events: none;\n    }\n  }\n  @keyframes shrink {\n    to {\n      --ci-t: var(--from-t);\n      --ci-r: var(--from-r);\n      --ci-b: var(--from-b);\n      --ci-l: var(--from-l);\n      --ci-x: var(--from-x);\n      --ci-y: var(--from-y);\n      opacity: 0;\n    }\n  }\n  @keyframes content-in {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes content-out {\n    to {\n      opacity: 0;\n    }\n  }\n  .padded {\n    padding: var(--pui-pad-popover);\n  }\n  .menu {\n    padding: var(--pui-space-1);\n  }\n  @keyframes pop-in {\n    from {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n  @keyframes pop-out {\n    to {\n      opacity: 0;\n      transform: scale(0.98);\n    }\n  }\n\n  /* rows (and the gliding plate) nest in the list: its radius minus its padding, never rounder than a chip; on the\n     row itself, so any list that uses .item gets it */\n  .item,\n  .glide {\n    --_item-radius: min(\n      var(--pui-radius-chip),\n      calc(var(--pui-overlay-radius, var(--pui-radius-card)) - var(--pui-space-1))\n    );\n  }\n\n  /* menu rows: shared by dropdown, context menu, menubar, select, combobox lists */\n  .item {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    gap: var(--pui-space-2);\n    min-height: var(--pui-control-height-sm);\n    padding: 0 var(--pui-space-2);\n    /* nested in the list: the overlay's radius minus its padding, never rounder than a chip */\n    border-radius: var(--_item-radius);\n    color: var(--pui-ink);\n    font-size: var(--pui-text-sm);\n    cursor: default;\n    user-select: none;\n    outline: none;\n  }\n  /* on a touch screen a row is a finger's target: the touch height (44px) from the tokens; a mouse keeps the dense row */\n  @media (pointer: coarse) {\n    .item {\n      min-height: var(--pui-control-height-touch);\n    }\n  }\n  /* a destructive row speaks in the danger ink only while it can be used: disabled wins (muted ink, no alarm for an\n     action that cannot happen) */\n  .item[data-tone=\"danger\"]:not([data-disabled]) {\n    color: var(--pui-red);\n  }\n  .item[data-disabled] {\n    color: var(--pui-ink-3);\n    pointer-events: none;\n  }\n  .item :where(svg) {\n    width: var(--pui-icon-md);\n    height: var(--pui-icon-md);\n    flex-shrink: 0;\n    color: var(--pui-ink-3);\n  }\n  .item[data-tone=\"danger\"]:not([data-disabled]) :where(svg) {\n    color: currentColor;\n  }\n  .item[data-highlighted]:not([data-glide]) {\n    background: var(--pui-hover-2);\n  }\n  /* a press is acknowledged at once, over the plate, before the menu closes or the row toggles */\n  .item:active:not([data-disabled]) {\n    background: var(--pui-hover);\n  }\n  .shortcut {\n    margin-inline-start: auto;\n    padding-inline-start: var(--pui-space-4);\n    color: var(--pui-ink-3);\n    font-size: var(--pui-text-xs);\n    letter-spacing: var(--pui-tracking-mono-caps);\n  }\n  .heading {\n    padding: var(--pui-space-1-5) var(--pui-space-2) var(--pui-space-1);\n    color: var(--pui-ink-3);\n    font-size: var(--pui-text-xs);\n    font-weight: var(--pui-weight-medium);\n  }\n  .separator {\n    height: 1px;\n    margin: var(--pui-space-1) calc(var(--pui-space-1) * -1);\n    background: var(--pui-line);\n  }\n  .check {\n    margin-inline-start: auto;\n    color: var(--pui-accent) !important;\n  }\n  /* a check arrives in its row as the value changes (at once): it grows from the middle over the arrival */\n  .check :where(svg) {\n    animation: check-in var(--pui-motion-in) var(--pui-ease-out-strong);\n  }\n  @keyframes check-in {\n    from {\n      opacity: 0;\n      scale: calc(1 - 0.5 * var(--pui-motion-travel, 1));\n    }\n  }\n  /* the gliding highlight: one plate moves between rows for the pointer and the arrow keys; it appears in place */\n  .glide {\n    position: absolute;\n    z-index: 0;\n    inset-inline: var(--pui-space-1);\n    top: 0;\n    border-radius: var(--_item-radius);\n    background: var(--pui-hover-2);\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity var(--pui-motion-out) var(--pui-ease-default);\n  }\n  .glide[data-on] {\n    opacity: 1;\n    transition:\n      transform var(--pui-duration-fast) var(--pui-ease-standard),\n      height var(--pui-duration-fast) var(--pui-ease-standard),\n      opacity 0ms;\n  }\n  .glide[data-jump] {\n    transition: opacity 0ms;\n  }\n  /* a plate over a row or grid of cells takes each cell's size and travels both ways */\n  .glide[data-axis=\"xy\"] {\n    inset-inline: auto;\n    left: 0;\n  }\n  .glide[data-axis=\"xy\"][data-on] {\n    transition:\n      transform var(--pui-duration-fast) var(--pui-ease-standard),\n      width var(--pui-duration-fast) var(--pui-ease-standard),\n      height var(--pui-duration-fast) var(--pui-ease-standard),\n      opacity 0ms;\n  }\n\n  /* a layer that has begun to close is out of the way at once: for the length of its exit it takes no pointer, so a tap\n     meant for the page behind (the next row, the button the panel covered) lands there, never on the leaving ghost.\n     Focus has already gone back (Radix) and it unmounts when the exit ends. */\n  .scrim[data-state=\"closed\"],\n  .surface[data-state=\"closed\"],\n  .dialog[data-state=\"closed\"],\n  .sheet[data-state=\"closed\"] {\n    pointer-events: none;\n  }\n\n  /* modal layers */\n  .scrim {\n    position: fixed;\n    inset: 0;\n    z-index: var(--pui-z-overlay);\n    background: var(--pui-scrim);\n    backdrop-filter: blur(var(--pui-blur-overlay));\n  }\n  .scrim[data-state=\"open\"] {\n    animation: fade-in var(--pui-fade-in) var(--pui-ease-default);\n  }\n  .scrim[data-state=\"closed\"] {\n    animation: fade-out var(--pui-fade-out) var(--pui-ease-default) forwards;\n  }\n  @keyframes fade-in {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes fade-out {\n    to {\n      opacity: 0;\n    }\n  }\n  .dialog {\n    /* the content answers to the dialog's own width (a footer's buttons share the row on a phone) */\n    container-type: inline-size;\n    position: fixed;\n    z-index: var(--pui-z-modal);\n    left: 50%;\n    top: 50%;\n    width: min(calc(100vw - var(--pui-space-8)), var(--pui-dialog-width, var(--_dialog-width, 440px)));\n    max-height: calc(100dvh - var(--pui-space-12));\n    overflow: hidden;\n    translate: -50% -50%;\n    border-radius: var(--pui-dialog-radius, var(--pui-radius-window));\n    color: var(--pui-ink);\n    outline: none;\n    /* a size chosen while open (a step that needs more room) eases the width in place, centred */\n    transition: width var(--pui-duration-standard) var(--pui-ease-standard);\n  }\n  .dialog[data-state=\"open\"] {\n    animation: dialog-in var(--pui-duration-standard) var(--pui-ease-enter);\n  }\n  .dialog[data-state=\"closed\"] {\n    animation: dialog-out var(--pui-motion-out) var(--pui-ease-default) forwards;\n  }\n  /* A dialog opened from something (use-open-from.ts) grows out of it: it starts as the opener's box, offset back onto\n     it, and grows to its own place over the considered duration while its content fades in; it closes back into the\n     opener in the ruled 180 ms. Shares the source morph's moving parts and guard with .surface. */\n  .dialog[data-open-from] {\n    clip-path: inset(\n      var(--ci-t) var(--ci-r) var(--ci-b) var(--ci-l) round var(--pui-dialog-radius, var(--pui-radius-window))\n    );\n    transform: translate(var(--ci-x), var(--ci-y));\n  }\n  .dialog[data-open-from][data-state=\"open\"] {\n    animation:\n      grow-t var(--pui-duration-considered) var(--pui-ease-out-strong),\n      grow-r var(--pui-duration-considered) var(--pui-ease-out-strong),\n      grow-b var(--pui-duration-considered) var(--pui-ease-out-strong),\n      grow-l var(--pui-duration-considered) var(--pui-ease-out-strong),\n      grow-xy calc(var(--pui-duration-considered) * 0.9) var(--pui-ease-out-strong),\n      settling var(--pui-duration-considered) step-end;\n  }\n  .dialog[data-open-from][data-state=\"open\"] > * {\n    animation: content-in var(--pui-duration-standard) var(--pui-ease-default) calc(var(--pui-duration-standard) * 0.35)\n      both;\n  }\n  .dialog[data-open-from][data-state=\"closed\"] {\n    animation: shrink var(--pui-motion-out) var(--pui-ease-exit) forwards;\n  }\n  .dialog[data-open-from][data-state=\"closed\"] > * {\n    animation: content-out var(--pui-motion-in) var(--pui-ease-default) forwards;\n  }\n  /* A sheet: a panel from an edge. It slides in from its edge over the considered duration on the drawer curve and\n     goes back out to that edge in the ruled departure (a layer closes back into where it came from). The edge is\n     logical: an end (\"right\") sheet comes from the left in a right-to-left page. Its content answers to its width. */\n  .sheet {\n    --_sx: 0px;\n    --_sy: 0px;\n    container-type: inline-size;\n    /* where a finger has swiped it toward its edge (sheet.tsx); it settles back over the departure */\n    translate: var(--_swipe, 0px) 0;\n  }\n  /* a side panel leaves sideways pans to the swipe and keeps vertical scrolling native, in its body too */\n  .sheet:is([data-side=\"left\"], [data-side=\"right\"]),\n  .sheet:is([data-side=\"left\"], [data-side=\"right\"]) [data-slot=\"sheet-body\"] {\n    touch-action: pan-y;\n  }\n  .sheet:is([data-side=\"left\"], [data-side=\"right\"]) {\n    transition:\n      var(--m-transition),\n      translate var(--pui-motion-out) var(--pui-ease-default);\n  }\n  .sheet[data-swiping] {\n    transition: none;\n  }\n  .sheet[data-side=\"right\"] {\n    --_sx: 100%;\n  }\n  .sheet[data-side=\"left\"] {\n    --_sx: -100%;\n  }\n  .sheet[data-side=\"right\"]:dir(rtl) {\n    --_sx: -100%;\n  }\n  .sheet[data-side=\"left\"]:dir(rtl) {\n    --_sx: 100%;\n  }\n  .sheet[data-side=\"top\"] {\n    --_sy: -100%;\n  }\n  .sheet[data-side=\"bottom\"] {\n    --_sy: 100%;\n  }\n  .sheet[data-state=\"open\"] {\n    animation: sheet-in var(--pui-duration-considered) var(--pui-ease-drawer) both;\n  }\n  .sheet[data-state=\"closed\"] {\n    animation: sheet-out var(--pui-motion-out) var(--pui-ease-exit) forwards;\n  }\n  @keyframes sheet-in {\n    from {\n      translate: var(--_sx) var(--_sy);\n    }\n  }\n  @keyframes sheet-out {\n    to {\n      translate: var(--_sx) var(--_sy);\n    }\n  }\n  @keyframes dialog-in {\n    from {\n      opacity: 0;\n      transform: scale(0.96);\n    }\n  }\n  @keyframes dialog-out {\n    to {\n      opacity: 0;\n      transform: scale(0.98);\n    }\n  }\n}\n\n/* Reduced motion: surfaces and dialogs fade without scaling or growing, over the fade tokens (restrained under reduced,\n   1ms under none; APPEARANCE A06). */\n@media (prefers-reduced-motion: reduce) {\n  .surface,\n  .dialog,\n  .sheet {\n    animation-name: fade-in !important;\n    animation-duration: var(--pui-fade-in) !important;\n  }\n  .surface[data-state=\"closed\"],\n  .dialog[data-state=\"closed\"],\n  .sheet[data-state=\"closed\"] {\n    animation-name: fade-out !important;\n    animation-duration: var(--pui-fade-out) !important;\n  }\n}\n@layer components {\n  :global(.pui[data-motion=\"reduced\"]) .surface,\n  :global(.pui[data-motion=\"none\"]) .surface,\n  :global(.pui[data-motion=\"reduced\"]) .dialog,\n  :global(.pui[data-motion=\"none\"]) .dialog,\n  :global(.pui[data-motion=\"reduced\"]) .sheet,\n  :global(.pui[data-motion=\"none\"]) .sheet {\n    animation-name: fade-in;\n    animation-duration: var(--pui-fade-in);\n  }\n  :global(.pui[data-motion=\"reduced\"]) .surface[data-state=\"closed\"],\n  :global(.pui[data-motion=\"none\"]) .surface[data-state=\"closed\"],\n  :global(.pui[data-motion=\"reduced\"]) .dialog[data-state=\"closed\"],\n  :global(.pui[data-motion=\"none\"]) .dialog[data-state=\"closed\"],\n  :global(.pui[data-motion=\"reduced\"]) .sheet[data-state=\"closed\"],\n  :global(.pui[data-motion=\"none\"]) .sheet[data-state=\"closed\"] {\n    animation-name: fade-out;\n    animation-duration: var(--pui-fade-out);\n  }\n}\n/* CSS-module composition only; visual rules stay in the component layer. */\n.surface {\n  composes: m-overlay from global;\n}\n.dialog {\n  composes: m-overlay from global;\n}\n"},{"path":"beamline/components/menubar/menubar.module.css","type":"registry:file","target":"src/ui/beamline/components/menubar/menubar.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n  /* A row of quiet text triggers on one plate that travels to the trigger under the pointer or holding focus (hover\n     arrives at once, the plate glides between neighbours over --pui-duration-fast and fades when the pointer leaves);\n     while a menu is open the plate sits a rung higher under its trigger, so the bar shows which menu the list belongs\n     to. The bar takes its row's free width (the menus stay at its start) so it can measure its room: the menus it\n     cannot hold fold into ⋯. */\n  .root {\n    position: relative;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    align-items: center;\n    gap: var(--pui-space-0-5);\n  }\n  .root > .plate {\n    border-radius: var(--pui-radius-chip);\n    background: var(--pui-hover);\n  }\n  .root > .lit {\n    background: var(--pui-hover-2);\n  }\n  .trigger {\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n    height: var(--pui-size-7);\n    padding-inline: var(--pui-space-2-5);\n    border-radius: var(--pui-radius-chip);\n    color: var(--pui-ink-2);\n    font-size: var(--pui-text-sm);\n    white-space: nowrap;\n    transition:\n      color var(--pui-motion-out) var(--pui-ease-default),\n      scale var(--pui-motion-out) var(--pui-ease-default);\n  }\n  .trigger:hover,\n  .trigger:focus-visible,\n  .trigger[data-state=\"open\"] {\n    color: var(--pui-ink);\n    transition-duration: 0ms;\n  }\n  /* a press is acknowledged at once (.ix) */\n  .trigger:active {\n    scale: var(--pui-press-scale);\n    transition-duration: 0ms;\n  }\n  .more {\n    display: grid;\n    place-items: center;\n    padding-inline: var(--pui-space-1-5);\n  }\n  .more :where(svg) {\n    width: var(--pui-icon-md);\n    height: var(--pui-icon-md);\n  }\n}\n"},{"path":"beamline/components/menubar/menubar.tsx","type":"registry:file","target":"src/ui/beamline/components/menubar/menubar.tsx","content":"\"use client\";\n\nimport { useMessages } from \"../../runtime/localization\";\nimport { english as englishMessages } from \"./messages\";\nimport { useRef, useState, type CSSProperties, type Ref } from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport * as RadixMenubar from \"@radix-ui/react-menubar\";\nimport { useScopeDirection } from \"../../hooks/use-scope-direction\";\nimport { useComposedRef } from \"../../hooks/use-composed-ref\";\nimport { useFit } from \"../../hooks/use-fit\";\nimport { GlidePlate } from \"../_shared/glide\";\nimport { MenuItems, MenuSurface, type MenuItem, type MenuClassNames } from \"../_shared/menu\";\nimport { usePortalContainer } from \"../../runtime/appearance\";\nimport { cn } from \"../../lib/utils\";\nimport { useControllable } from \"../../hooks/use-controllable\";\nimport styles from \"./menubar.module.css\";\n\nexport type { MenuItem, MenuClassNames };\nexport interface MenubarMenu {\n  /** Text displayed for this item. Required. */\n  label: string;\n  /** Items in display order. Required. */\n  items: MenuItem[];\n}\n\nexport interface MenubarProps {\n  /** The bar's accessible name, e.g. \"Report editor\". */\n  label: string;\n  /** File, Edit, View…: each a label and the same rows as DropdownMenu. */\n  menus: MenubarMenu[];\n  /** The open menu's label, controlled or uncontrolled; \"\" when none is open, \"__beamline-more-menus__\" while the ⋯\n   *  of a narrow bar is open. */\n  value?: string;\n  /** Initial id of the open menu when uncontrolled. Defaults to an empty string. */\n  defaultValue?: string;\n  /** Reports id of the open menu after an edit; no callback by default. */\n  onValueChange?: (value: string) => void;\n  /** Classes on the documented visual root; no override by default. */\n  className?: string;\n  /** Classes for the named visual parts; no part overrides by default. */\n  classNames?: MenuClassNames;\n  /** Inline styles on the documented visual root; no inline overrides by default. */\n  style?: CSSProperties;\n  /** Receives the documented root element; no ref by default. */\n  ref?: Ref<HTMLDivElement>;\n  /** Reading direction; inherits the surrounding direction when omitted. Defaults to the surrounding reading direction. */\n  dir?: \"ltr\" | \"rtl\";\n}\n\n/** The value of the menu that holds the menus a narrow bar has no room for. */\nconst MORE = \"__beamline-more-menus__\";\n\n/**\n * A desktop-style menu bar for editor-like apps. Once one menu is open, pointing at a neighbour opens it; ← → move\n * between menus, ↓ opens one, Escape closes and returns focus to its trigger. One plate lights the trigger under the\n * pointer or focus and travels with it, a step brighter while its menu is open. The bar takes its row's free width\n * and answers to it: the menus it has no room for fold, last first, into ⋯, where each opens as a submenu.\n */\nexport function Menubar({\n  label,\n  menus,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  classNames,\n  style,\n  ref,\n  dir,\n}: MenubarProps) {\n  const i18n = useMessages(\"menubar\", englishMessages);\n\n  const container = usePortalContainer();\n  const root = useRef<HTMLDivElement>(null);\n  const [scoped, direction] = useScopeDirection<HTMLDivElement>(ref, dir);\n  const attach = useComposedRef(root, scoped);\n  const [open, setOpen] = useControllable(valueProp, defaultValue, onValueChange);\n  // the trigger under the pointer or holding focus; the open menu's trigger wins\n  const [hot, setHot] = useState<string | null>(null);\n  const lit = open || hot;\n  const shown = useFit(root, { items: menus.length, min: 1 }, menus.map((m) => m.label).join(\"\\u001f\"));\n  const folded = menus.slice(shown);\n  const trigger = (value: string) => ({\n    \"data-menu-value\": value,\n    onPointerEnter: () => setHot(value),\n    onFocus: () => setHot(value),\n  });\n  return (\n    <RadixMenubar.Root\n      ref={attach}\n      dir={direction}\n      data-slot=\"menubar\"\n      aria-label={label}\n      value={open}\n      onValueChange={setOpen}\n      loop\n      className={cn(styles.root, classNames?.root, className)}\n      style={style}\n      onPointerLeave={() => setHot(null)}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setHot(null);\n      }}\n    >\n      <GlidePlate\n        list={root}\n        selector={lit ? `[data-menu-value=\"${CSS.escape(lit)}\"]` : null}\n        axis=\"xy\"\n        className={cn(styles.plate, open && styles.lit)}\n      />\n      {menus.slice(0, shown).map((menu) => (\n        <RadixMenubar.Menu key={menu.label} value={menu.label}>\n          <RadixMenubar.Trigger\n            data-slot=\"menubar-trigger\"\n            data-fit-item\n            {...trigger(menu.label)}\n            className={cn(styles.trigger, classNames?.trigger)}\n          >\n            {menu.label}\n          </RadixMenubar.Trigger>\n          {container !== null && (\n            <RadixMenubar.Portal container={container}>\n              <MenuSurface kit={RadixMenubar} label={menu.label} align=\"start\" sideOffset={6} classNames={classNames}>\n                <MenuItems kit={RadixMenubar} items={menu.items} container={container} classNames={classNames} />\n              </MenuSurface>\n            </RadixMenubar.Portal>\n          )}\n        </RadixMenubar.Menu>\n      ))}\n      {folded.length > 0 && (\n        <RadixMenubar.Menu value={MORE}>\n          <RadixMenubar.Trigger\n            data-slot=\"menubar-more\"\n            data-fit-more\n            aria-label={i18n(\"moreMenus\", { value: i18n.list(folded.map((m) => m.label)) })}\n            {...trigger(MORE)}\n            className={cn(styles.trigger, styles.more, classNames?.trigger)}\n          >\n            <MoreHorizontal aria-hidden />\n          </RadixMenubar.Trigger>\n          {container !== null && (\n            <RadixMenubar.Portal container={container}>\n              <MenuSurface\n                kit={RadixMenubar}\n                label={i18n(\"moreMenus2\")}\n                align=\"start\"\n                sideOffset={6}\n                classNames={classNames}\n              >\n                <MenuItems\n                  kit={RadixMenubar}\n                  items={folded.map((m) => ({ id: m.label, label: m.label, items: m.items }))}\n                  container={container}\n                  classNames={classNames}\n                />\n              </MenuSurface>\n            </RadixMenubar.Portal>\n          )}\n        </RadixMenubar.Menu>\n      )}\n    </RadixMenubar.Root>\n  );\n}\n\nexport default Menubar;\n"},{"path":"beamline/components/menubar/messages.ts","type":"registry:file","target":"src/ui/beamline/components/menubar/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  moreMenus: \"More menus: {value}\",\n  moreMenus2: \"More menus\",\n} satisfies MessageDefinitions;\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-fit.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-fit.ts","content":"\"use client\";\n\nimport { useLayoutEffect, useRef, useState, type RefObject } from \"react\";\n\n/**\n * How many of a row's items fit its room: the one fold every element that lists things in a line uses (chips,\n * avatars, breadcrumbs, filters, tags, actions), so a narrow panel shows fewer and a \"+N\" for the rest, and the rest\n * come back as the room grows. Content-sized items keep their natural width; the row decides how many. Items never\n * change order (a fold that reshuffles breaks the reader's memory of where things are): the last ones fold first.\n *\n * Mark each item `data-fit-item` (direct children of the row) and the overflow control (the \"+N\") `data-fit-more`.\n * Every item is measured once at its natural width — all of them render on the first pass and again whenever `items`\n * or `key` changes, read in a layout effect, so nothing is painted half-measured — and then each change of the row's\n * width lays the widths out with the row's own column gap into `lines` lines, keeping room on the last line for the\n * overflow control. Nothing runs at rest: one ResizeObserver on the row.\n *\n * `key` names the item set and must be a stable primitive (a string of the items' ids and labels), never an array or\n * object built during render: a new identity each render would measure again each render, for ever.\n * `keep[i]` marks items that always show (a chosen chip, the current crumb); room for them is taken first.\n * Returns how many of the other items show, in order (all of them while measuring, when off, and when they fit).\n */\nexport function useFit(\n  row: RefObject<HTMLElement | null>,\n  {\n    items,\n    lines = 1,\n    enabled = true,\n    min = 1,\n    keep,\n    from = \"start\",\n  }: {\n    /** How many items there are; a change (or a different `key`) measures them again. */\n    items: number;\n    /** Lines the row may take before it folds. */\n    lines?: number;\n    enabled?: boolean;\n    /** Never show fewer than this many of the other items. */\n    min?: number;\n    keep?: readonly boolean[];\n    /** Which of the other items the room shows: the first that fit (start, the default: the last fold first), or the\n     *  last that fit (end: a breadcrumb folds the levels nearest the top and keeps the parent). The count returned is\n     *  how many show either way; the caller shows them from its end. */\n    from?: \"start\" | \"end\";\n  },\n  key?: string | number,\n): number {\n  const free = keep ? keep.filter((k) => !k).length : items;\n  const [count, setCount] = useState(free);\n  const widths = useRef<number[] | null>(null);\n  const moreWidth = useRef(0);\n  const measuring = useRef(true);\n  const kept = useRef(keep);\n  kept.current = keep;\n  const end = useRef(from === \"end\");\n  end.current = from === \"end\";\n  const recent = useRef<number[]>([]);\n  const last = useRef(free);\n\n  // a new set of items: show them all for one (unpainted) pass so their natural widths can be read\n  useLayoutEffect(() => {\n    widths.current = null;\n    measuring.current = true;\n    setCount(free);\n  }, [items, key, enabled, free]);\n\n  useLayoutEffect(() => {\n    const el = row.current;\n    if (!el || !enabled || typeof ResizeObserver === \"undefined\") return;\n    const layout = () => {\n      if (!widths.current) return;\n      const cs = getComputedStyle(el);\n      const gap = parseFloat(cs.columnGap) || 0;\n      const room = roomOf(el, cs) - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);\n      // counted from the end, the same placement is read backwards: the last items are the ones that stay\n      const w = end.current ? [...widths.current].reverse() : widths.current;\n      const k = end.current && kept.current ? [...kept.current].reverse() : kept.current;\n      let next = fit(w, room, gap, moreWidth.current, lines, min, k);\n      // a backstop: a row whose room still moves with its own fold (a layout the room reading can't see) settles on\n      // the folded side instead of flipping every frame\n      const now = performance.now();\n      const flips = recent.current.filter((t) => now - t < 500);\n      if (flips.length >= 6) next = Math.min(next, last.current);\n      if (next !== last.current) recent.current = [...flips, now];\n      last.current = next;\n      setCount((c) => (c === next ? c : next));\n    };\n    if (measuring.current) {\n      const found = [...el.querySelectorAll<HTMLElement>(\":scope > [data-fit-item]\")];\n      if (found.length >= items) {\n        widths.current = found.slice(0, items).map((n) => n.getBoundingClientRect().width);\n        const more = el.querySelector<HTMLElement>(\":scope > [data-fit-more]\");\n        // the \"+N\" is not on screen while everything fits: assume a short chip until it has been seen\n        moreWidth.current = more ? more.getBoundingClientRect().width : Math.max(moreWidth.current, 56);\n        measuring.current = false;\n      }\n    }\n    layout();\n    const observer = new ResizeObserver(() => {\n      const more = el.querySelector<HTMLElement>(\":scope > [data-fit-more]\");\n      if (more) moreWidth.current = more.getBoundingClientRect().width;\n      layout();\n    });\n    observer.observe(el);\n    // the room is the parent's line as much as the row's own box: a content-sized row only learns it can grow there\n    if (el.parentElement) observer.observe(el.parentElement);\n    return () => observer.disconnect();\n  });\n\n  return enabled ? count : free;\n}\n\n/**\n * The width a row may take: its own box, or, when it sits content-sized in a flex row (a tab row beside a title in a\n * space-between bar), the line's width less what shares that line with it. Read this way the room never depends on\n * how many items the row shows, so folding can't change the room it was decided by (and flip back).\n */\nfunction roomOf(el: HTMLElement, cs: CSSStyleDeclaration) {\n  const own = el.clientWidth;\n  const parent = el.parentElement;\n  if (!parent) return own;\n  const ps = getComputedStyle(parent);\n  if (!ps.display.includes(\"flex\") || !ps.flexDirection.startsWith(\"row\")) return own;\n  const box = el.getBoundingClientRect();\n  let others = 0;\n  let count = 0;\n  for (const sib of parent.children) {\n    if (sib === el || !(sib instanceof HTMLElement)) continue;\n    const ss = getComputedStyle(sib);\n    if (ss.position === \"absolute\" || ss.position === \"fixed\" || ss.display === \"none\") continue;\n    const r = sib.getBoundingClientRect();\n    // on the row's own line (a wrapped bar puts the others above or below)\n    if (r.bottom <= box.top + 0.5 || r.top >= box.bottom - 0.5) continue;\n    others += r.width + (parseFloat(ss.marginLeft) || 0) + (parseFloat(ss.marginRight) || 0);\n    count++;\n  }\n  const line =\n    parent.clientWidth -\n    (parseFloat(ps.paddingLeft) || 0) -\n    (parseFloat(ps.paddingRight) || 0) -\n    others -\n    count * (parseFloat(ps.columnGap) || 0) -\n    (parseFloat(cs.marginLeft) || 0) -\n    (parseFloat(cs.marginRight) || 0) -\n    // the line is measured outside the row's border; clientWidth is inside it\n    (parseFloat(cs.borderLeftWidth) || 0) -\n    (parseFloat(cs.borderRightWidth) || 0);\n  const cap = cs.maxWidth.endsWith(\"px\") ? parseFloat(cs.maxWidth) : Infinity;\n  return Math.max(own, Math.min(line, cap));\n}\n\n/**\n * How many of the items not kept fit, in order, when the shown ones are laid into `lines` lines of `room` with `gap`\n * between them and `more` kept free on the last line whenever something folds.\n */\nexport function fit(\n  widths: readonly number[],\n  room: number,\n  gap: number,\n  more: number,\n  lines: number,\n  min: number,\n  keep?: readonly boolean[],\n) {\n  const fits = (show: (i: number) => boolean, reserve: number) => {\n    let line = 1;\n    let x = 0;\n    for (let i = 0; i < widths.length; i++) {\n      if (!show(i)) continue;\n      const w = widths[i];\n      const cap = line === lines ? room - reserve : room;\n      const need = x === 0 ? w : x + gap + w;\n      if (need <= cap + 0.5) {\n        x = need;\n        continue;\n      }\n      if (x === 0 || line === lines) return false;\n      line++;\n      if (w > (line === lines ? room - reserve : room) + 0.5) return false;\n      x = w;\n    }\n    return true;\n  };\n  const rank: number[] = [];\n  let free = 0;\n  for (let i = 0; i < widths.length; i++) rank.push(keep?.[i] ? -1 : free++);\n  if (fits(() => true, 0)) return free;\n  // with items that always show, the floor is none of the others (they are what keeps the row from being empty)\n  const floor = keep?.some(Boolean) ? 0 : Math.min(min, free);\n  for (let n = free - 1; n > floor; n--) if (fits((i) => rank[i] < 0 || rank[i] < n, more + gap)) return n;\n  return floor;\n}\n"},{"path":"beamline/hooks/use-scope-direction.ts","type":"registry:file","target":"src/ui/beamline/hooks/use-scope-direction.ts","content":"\"use client\";\n\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState, type Ref } from \"react\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport { useAppearance, useAppearanceRoot } from \"../runtime/appearance\";\nimport { APPEARANCE_EVENT } from \"../lib/motion-tokens\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Preserve Radix direction in managed scopes and read the actual parent in static scopes before Radix stamps dir. */\nexport function useScopeDirection<T extends HTMLElement>(ref?: Ref<T>, explicit?: \"ltr\" | \"rtl\") {\n  const root = useRef<T | null>(null);\n  const provided = useDirection(explicit);\n  const appearance = useAppearance();\n  const managedRoot = useAppearanceRoot();\n  const [inherited, setInherited] = useState<\"ltr\" | \"rtl\">();\n  const read = useCallback(() => {\n    const around = root.current?.parentElement;\n    if (around)\n      setInherited(around.ownerDocument.defaultView?.getComputedStyle(around).direction === \"rtl\" ? \"rtl\" : \"ltr\");\n  }, []);\n  useIsoLayoutEffect(read, [read, provided, appearance]);\n  useEffect(() => {\n    const doc = root.current?.ownerDocument;\n    doc?.addEventListener(APPEARANCE_EVENT, read);\n    return () => doc?.removeEventListener(APPEARANCE_EVENT, read);\n  }, [read]);\n  const attach = useCallback(\n    (node: T | null) => {\n      root.current = node;\n      if (typeof ref === \"function\") {\n        const cleanup = ref(node);\n        if (typeof cleanup === \"function\")\n          return () => {\n            root.current = null;\n            cleanup();\n          };\n      } else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n  return [\n    attach,\n    explicit ?? (managedRoot ? provided : provided === \"rtl\" ? provided : (inherited ?? provided)),\n  ] as const;\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":"Menu bar is in src/ui/beamline/components/menubar/menubar.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/menubar"}}