@hyperframes/studio 0.8.104 → 0.8.106

package/dist/chunk-NCUBAVGK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/cn.ts","../src/components/ui/Button.tsx","../src/components/ui/IconButton.tsx","../src/components/ui/Tabs.tsx","../src/components/ui/HyperframesMark.tsx","../src/components/ui/HyperframesLoader.tsx","../src/components/ui/Menu.tsx","../src/components/ui/Tooltip.tsx","../src/components/ui/Popover.tsx","../src/components/ui/Input.tsx","../src/components/ui/NumberField.tsx","../src/components/ui/Select.tsx","../src/components/ui/Slider.tsx","../src/components/ui/Toggle.tsx"],"sourcesContent":["/**\n * Studio's tailwind-merge config: teaches it the two scales `theme.css`\n * invents (`text-step-*`, `ctl`/`ctl-sm`/`ctl-lg`) so overrides replace, not stack.\n */\n\nimport { createCn } from \"cn/config\";\n\n/** `text-step-11`, `text-step-9`, … — the type scale from `theme.css`. */\nconst isTypeStep = (value: string) => /^step-\\d+$/.test(value);\n\n/** `ctl`, `ctl-sm`, `ctl-lg` — the control heights from `theme.css`. */\nconst isControlSize = (value: string) => /^ctl(-sm|-lg)?$/.test(value);\n\nexport const cn = createCn({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: [isTypeStep] }],\n      h: [{ h: [isControlSize] }],\n      w: [{ w: [isControlSize] }],\n      size: [{ size: [isControlSize] }],\n      \"min-h\": [{ \"min-h\": [isControlSize] }],\n      \"min-w\": [{ \"min-w\": [isControlSize] }],\n    },\n  },\n});\n","/**\n * Button — a native `<button>` wearing Studio's tokens.\n *\n * Everything visual comes from `theme.css`: the three control heights, the\n * radius scale, the semantic colours, the motion durations. No value is decided\n * here, so a button cannot drift from the rest of the system.\n *\n * Two conventions: classes merge through `cn`, so a caller's `className`\n * always wins within its group; and every interactive look is written twice,\n * once as the real state and once as `data-[preview-state=…]` (CSS-only, for\n * screenshots). `Button.test.tsx` asserts the two stay in sync.\n */\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"./cn\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\n/** Forces one interactive look for a gallery shot. CSS-only; see the header. */\nexport type PreviewState = \"hover\" | \"active\" | \"focus\";\n\nexport interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  \"data-preview-state\"?: PreviewState;\n}\n\ninterface ButtonProps extends ButtonBaseProps {\n  loading?: boolean;\n  icon?: ReactNode;\n}\n\n/**\n * Shared by Button and IconButton. `disabled:` keeps pointer events alive so a\n * wrapping Tooltip can still explain why the control is disabled.\n */\nexport const buttonBase = cn(\n  \"inline-flex items-center justify-center select-none cursor-pointer whitespace-nowrap\",\n  \"transition-[background-color,border-color,color,filter,transform] ease-out-quint duration-press\",\n  \"disabled:opacity-40 disabled:cursor-not-allowed\",\n  \"outline-hidden\",\n  \"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent\",\n  \"data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-1 data-[preview-state=focus]:outline-accent\",\n);\n\n/**\n * One entry per variant. The `data-[preview-state=…]` half of each string\n * repeats the `hover:` and `active:` half exactly; the test pairs them.\n */\nexport const buttonVariants: Record<ButtonVariant, string> = {\n  primary: cn(\n    \"bg-accent text-on-accent font-semibold\",\n    \"enabled:hover:bg-accent-hover data-[preview-state=hover]:bg-accent-hover\",\n    \"enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]\",\n  ),\n  secondary: cn(\n    \"bg-transparent text-text-1 font-medium border border-border-strong\",\n    \"enabled:hover:bg-hover enabled:hover:text-text-0 data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0\",\n    \"enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]\",\n  ),\n  danger: cn(\n    \"bg-danger text-on-danger font-medium\",\n    \"enabled:hover:brightness-95 data-[preview-state=hover]:brightness-95\",\n    \"enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]\",\n  ),\n  ghost: cn(\n    \"bg-transparent text-text-2 font-medium\",\n    \"enabled:hover:bg-hover enabled:hover:text-text-0 data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0\",\n    \"enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]\",\n  ),\n};\n\n/**\n * The three control heights, 24 / 28 / 32 px, from `--spacing-ctl-*`.\n * Exported so the Capture download `<a href>` can wear the same recipe as a Button.\n */\nexport const buttonSizes: Record<ButtonSize, string> = {\n  sm: \"h-ctl-sm px-2 gap-1 rounded-sm text-step-11\",\n  md: \"h-ctl px-3 gap-1.5 rounded-md text-step-12\",\n  lg: \"h-ctl-lg px-4 gap-2 rounded-md text-step-13\",\n};\n\nfunction Spinner() {\n  return (\n    <svg className=\"animate-spin size-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n      />\n    </svg>\n  );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { variant = \"secondary\", size = \"md\", loading, icon, children, className, disabled, ...props },\n    ref,\n  ) => {\n    const isDisabled = disabled || loading;\n    let leading: ReactNode = null;\n    if (loading) leading = <Spinner />;\n    else if (icon) leading = <span className=\"shrink-0\">{icon}</span>;\n    return (\n      <button\n        ref={ref}\n        disabled={isDisabled}\n        // `aria-disabled` as well as `disabled`: assistive tech announces the\n        // state even where the native attribute is filtered out of the tree.\n        aria-disabled={isDisabled || undefined}\n        className={cn(buttonBase, buttonVariants[variant], buttonSizes[size], className)}\n        {...props}\n      >\n        {leading}\n        {children}\n      </button>\n    );\n  },\n);\nButton.displayName = \"Button\";\n","/**\n * IconButton — Button's square sibling; shares its base/variant classes so\n * the two never drift. `aria-label` is required for screen readers.\n */\n\nimport { forwardRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { buttonBase, buttonVariants, type ButtonBaseProps, type ButtonSize } from \"./Button\";\nimport { cn } from \"./cn\";\n\ninterface IconButtonProps extends ButtonBaseProps {\n  icon: ReactNode;\n  \"aria-label\": string;\n}\n\n/** Square boxes on the same 24 / 28 / 32 px control heights as Button. */\nconst iconSizeStyles: Record<ButtonSize, string> = {\n  sm: \"size-ctl-sm rounded-sm\",\n  md: \"size-ctl rounded-md\",\n  lg: \"size-ctl-lg rounded-md\",\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, size = \"md\", variant = \"ghost\", className, disabled, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        disabled={disabled}\n        aria-disabled={disabled || undefined}\n        className={cn(buttonBase, buttonVariants[variant], iconSizeStyles[size], className)}\n        {...props}\n      >\n        {icon}\n      </button>\n    );\n  },\n);\nIconButton.displayName = \"IconButton\";\n","/**\n * Tabs — Base UI's tabs wearing Studio's tokens; replaces six hand-rolled\n * strips with one implementation (roving tabindex, arrow/Home/End, `aria-controls`).\n */\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cn } from \"./cn\";\nimport type { PreviewState } from \"./Button\";\n\n/**\n * Base UI lets `className` be a function of the part's state. Studio's parts\n * merge a string with `cn`, so the string form is the one they accept.\n */\ntype StyledProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, \"className\"> & {\n  className?: string;\n};\n\n/**\n * Groups a tab list with its panels. Uncontrolled by default; pass `value` and\n * `onValueChange` for a strip whose selection lives in a store.\n */\nexport function Tabs(props: ComponentPropsWithoutRef<typeof BaseTabs.Root>) {\n  return <BaseTabs.Root {...props} />;\n}\n\n/** The strip. Give it an `aria-label`: a tablist with no name is unlabelled. */\nexport function TabsList({ className, ...props }: StyledProps<typeof BaseTabs.List>) {\n  return (\n    <BaseTabs.List\n      // Arrow keys move selection, matching today's sidebar strip.\n      activateOnFocus\n      className={cn(\"inline-flex items-center gap-0.5 rounded-lg bg-surface-alt p-1\", className)}\n      {...props}\n    />\n  );\n}\n\ninterface TabProps extends StyledProps<typeof BaseTabs.Tab> {\n  value: string;\n  \"data-preview-state\"?: PreviewState;\n}\n\n/**\n * aria-selected drives the selected look (Base UI sets it) so assistive tech\n * and sighted users match. data-preview-state is for gallery shots only.\n */\nexport function Tab({ value, className, ...props }: TabProps) {\n  return (\n    <BaseTabs.Tab\n      value={value}\n      data-tab-id={value}\n      className={cn(\n        \"inline-flex h-ctl-sm cursor-pointer select-none items-center justify-center rounded-sm px-2.5\",\n        \"text-step-11 font-semibold whitespace-nowrap text-text-3\",\n        \"transition-[background-color,color] ease-out-quint duration-hover\",\n        \"hover:text-text-1 data-[preview-state=hover]:text-text-1\",\n        \"aria-selected:bg-hover aria-selected:text-text-0\",\n        \"outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent\",\n        \"data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-1 data-[preview-state=focus]:outline-accent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The panel for one tab. Base UI wires `aria-labelledby` back to its tab. */\nexport function TabPanel({ className, ...props }: StyledProps<typeof BaseTabs.Panel>) {\n  return <BaseTabs.Panel className={cn(\"outline-hidden\", className)} {...props} />;\n}\n","import { useId, type SVGProps } from \"react\";\n\nexport function HyperframesMark({ viewBox = \"0 0 100 100\", ...props }: SVGProps<SVGSVGElement>) {\n  const gradientId = useId();\n  const leftGradient = `${gradientId}-left`;\n  const rightGradient = `${gradientId}-right`;\n  return (\n    <svg\n      viewBox={viewBox}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <g transform=\"translate(50 50)\" opacity=\".92\">\n        <g transform=\"translate(-50 -50)\">\n          <path\n            d=\"M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z\"\n            fill={`url(#${leftGradient})`}\n          />\n          <path\n            d=\"M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z\"\n            fill={`url(#${rightGradient})`}\n          />\n        </g>\n      </g>\n      <defs>\n        <linearGradient\n          id={leftGradient}\n          x1=\"48.5676\"\n          y1=\"25\"\n          x2=\"44.7804\"\n          y2=\"71.9384\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"#06E3FA\" />\n          <stop offset=\"1\" stopColor=\"#4FDB5E\" />\n        </linearGradient>\n        <linearGradient\n          id={rightGradient}\n          x1=\"54.8282\"\n          y1=\"73.8392\"\n          x2=\"72.0989\"\n          y2=\"32.8932\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"#06E3FA\" />\n          <stop offset=\"1\" stopColor=\"#4FDB5E\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n","import { HyperframesMark } from \"./HyperframesMark\";\n\nexport interface HyperframesLoaderProps {\n  /** Status text shown below the mark. */\n  title: string;\n  /** Optional secondary detail line. */\n  detail?: string;\n  /** Optional monospace third line for IDs, counts, or percentages. */\n  mono?: string;\n  /** Pixel size of the mark itself; status text scales independently. */\n  size?: number;\n  /** Optional normalized progress value from 0 to 1. */\n  progress?: number;\n}\n\nexport function HyperframesLoader({\n  title,\n  detail,\n  mono,\n  size = 64,\n  progress,\n}: HyperframesLoaderProps) {\n  const boundedProgress =\n    typeof progress === \"number\" && Number.isFinite(progress)\n      ? Math.min(1, Math.max(0, progress))\n      : undefined;\n  const markFrameSize = Math.round(size * 1.16);\n\n  return (\n    <div className=\"hf-loader\" role=\"status\" draggable={false}>\n      <div\n        className=\"hf-loader-mark-frame\"\n        style={{ width: markFrameSize, height: markFrameSize }}\n        draggable={false}\n      >\n        <HyperframesMark className=\"hf-loader-mark\" width={size} height={size} />\n      </div>\n      <div className=\"hf-loader-title\">{title}</div>\n      {detail && <div className=\"hf-loader-detail\">{detail}</div>}\n      {boundedProgress !== undefined && (\n        <div\n          className=\"hf-loader-progress\"\n          role=\"progressbar\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(boundedProgress * 100)}\n        >\n          <div\n            className=\"hf-loader-progress__fill\"\n            style={{ transform: `scaleX(${boundedProgress})` }}\n          />\n        </div>\n      )}\n      {mono && <div className=\"hf-loader-mono\">{mono}</div>}\n    </div>\n  );\n}\n\n// fallow-ignore-next-line unused-export\nexport function StatusFrame(props: HyperframesLoaderProps) {\n  return (\n    <div className=\"hf-frame\">\n      <HyperframesLoader {...props} />\n    </div>\n  );\n}\n","/**\n * Menu and ContextMenu on Base UI. Dismissal is plain Base UI (capture-phase listeners survive the overlay's\n * `stopPropagation`); `trigger` is rendered, not wrapped; `container` exists for shadow roots.\n */\n\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"./cn\";\n\n/**\n * Base UI lets `className` be a function of the part's state. Studio's parts\n * merge a string with `cn`, so the string form is the one they accept.\n */\ntype StyledProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, \"className\"> & {\n  className?: string;\n};\n\n/** Forces the settled open look for a gallery shot; CSS-only, open state stays controlled. */\nexport type PopupPreviewState = \"open\";\n\n/** Where the portal puts the popup. `null` keeps it inline, next to its trigger. */\ntype PortalContainer = ComponentPropsWithoutRef<typeof BaseMenu.Portal>[\"container\"];\n\n/** Matches Tooltip's gap from its trigger, and its viewport margin. */\nconst SIDE_OFFSET = 6;\nconst VIEWPORT_MARGIN = 8;\n\n/**\n * Enter and exit shared by menus, popovers, dropdowns, and tooltips.\n * The open duration class differs; the shape does not.\n * `data-starting-style`/`data-ending-style` are Base UI's transition attributes.\n */\nexport function floatingMotion(openDuration: \"duration-open\" | \"duration-tooltip\") {\n  return cn(\n    \"origin-[var(--transform-origin)] outline-hidden\",\n    \"transition-[opacity,transform] ease-out-quint\",\n    openDuration,\n    \"data-[ending-style]:duration-close data-[ending-style]:ease-in\",\n    \"data-[starting-style]:[opacity:var(--popup-enter-opacity)]\",\n    \"data-[starting-style]:[scale:var(--popup-enter-scale)]\",\n    \"data-[ending-style]:opacity-0\",\n  );\n}\n\n/**\n * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.\n */\nexport const popupSurface = cn(\n  \"rounded-lg border border-border-input bg-surface\",\n  floatingMotion(\"duration-open\"),\n  \"data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100\",\n);\n\n/** The popup's own layer: menus sit above panel chrome and below a modal. */\nconst POPUP_LAYER = \"z-200\";\n\nconst menuPopup = cn(popupSurface, \"min-w-36 p-1 shadow-menu\");\n\n/** One row. `data-highlighted` is set by keyboard and pointer alike, so the seen row is the Enter row. */\nconst itemBase = cn(\n  \"flex cursor-default select-none items-center justify-between gap-6 rounded-sm px-2 py-1.5\",\n  \"text-step-11 whitespace-nowrap text-text-1\",\n  \"outline-hidden transition-colors ease-out-quint duration-hover\",\n  \"data-[highlighted]:bg-hover data-[highlighted]:text-text-0\",\n  \"data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:opacity-40\",\n);\n\nconst itemDanger = cn(\n  \"text-danger-ink data-[highlighted]:bg-danger/15 data-[highlighted]:text-danger-ink\",\n);\n\nexport type MenuItemTone = \"default\" | \"danger\";\n\ninterface PositionedProps {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n  /** Portal target. Pass the shadow root when the trigger lives in one. */\n  container?: PortalContainer;\n  /** Names the popup for assistive tech. A menu with no name is unlabelled. */\n  \"aria-label\"?: string;\n  className?: string;\n  \"data-preview-state\"?: PopupPreviewState;\n}\n\ninterface MenuProps\n  extends PositionedProps, Omit<ComponentPropsWithoutRef<typeof BaseMenu.Root>, \"children\"> {\n  /** A single element. It becomes the trigger; no wrapper is added around it. */\n  trigger: ReactElement;\n  /** The items: `MenuItem`, `MenuRadioGroup`, `MenuSeparator`. */\n  children: ReactNode;\n}\n\n/**\n * A menu opened by its trigger. Uncontrolled by default; pass `open` and\n * `onOpenChange` for a menu whose state lives in a store.\n */\nexport function Menu({\n  trigger,\n  children,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = SIDE_OFFSET,\n  container,\n  className,\n  \"aria-label\": ariaLabel,\n  \"data-preview-state\": previewState,\n  ...root\n}: MenuProps) {\n  return (\n    <BaseMenu.Root {...root}>\n      <BaseMenu.Trigger render={trigger} />\n      <BaseMenu.Portal container={container}>\n        <BaseMenu.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          collisionPadding={VIEWPORT_MARGIN}\n          className={POPUP_LAYER}\n        >\n          <BaseMenu.Popup\n            aria-label={ariaLabel}\n            data-preview-state={previewState}\n            className={cn(menuPopup, className)}\n          >\n            {children}\n          </BaseMenu.Popup>\n        </BaseMenu.Positioner>\n      </BaseMenu.Portal>\n    </BaseMenu.Root>\n  );\n}\n\ninterface ContextMenuProps\n  extends PositionedProps, Omit<ComponentPropsWithoutRef<typeof BaseContextMenu.Root>, \"children\"> {\n  /**\n   * The right-clickable area, as the caller's own element. Its children are\n   * kept: the trigger renders that element rather than wrapping it.\n   */\n  trigger: ReactElement;\n  children: ReactNode;\n}\n\n/** Opened by right click or long press at the pointer, so `side` and `align` are not offered. */\nexport function ContextMenu({\n  trigger,\n  children,\n  container,\n  className,\n  \"aria-label\": ariaLabel,\n  \"data-preview-state\": previewState,\n  ...root\n}: Omit<ContextMenuProps, \"side\" | \"align\" | \"sideOffset\">) {\n  return (\n    <BaseContextMenu.Root {...root}>\n      <BaseContextMenu.Trigger render={trigger} />\n      <BaseContextMenu.Portal container={container}>\n        <BaseContextMenu.Positioner collisionPadding={VIEWPORT_MARGIN} className={POPUP_LAYER}>\n          <BaseContextMenu.Popup\n            aria-label={ariaLabel}\n            data-preview-state={previewState}\n            className={cn(menuPopup, className)}\n          >\n            {children}\n          </BaseContextMenu.Popup>\n        </BaseContextMenu.Positioner>\n      </BaseContextMenu.Portal>\n    </BaseContextMenu.Root>\n  );\n}\n\n/** Keyboard shortcut hint, mono and tabular; exported for hints that are not a plain string. */\nexport function MenuShortcut({ className, ...props }: StyledProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"shrink-0 font-mono text-step-10 tabular-nums text-text-4\", className)}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  );\n}\n\ninterface MenuItemProps extends StyledProps<typeof BaseMenu.Item> {\n  /** Rendered as a dim mono hint on the trailing edge. Decorative. */\n  shortcut?: string;\n  /** `danger` for a destructive action (Delete, Remove). */\n  tone?: MenuItemTone;\n  \"data-preview-state\"?: \"hover\";\n}\n\n/** One action. `disabled` items are skipped by the arrow keys, not just dimmed. */\nexport function MenuItem({ shortcut, tone, className, children, ...props }: MenuItemProps) {\n  return (\n    <BaseMenu.Item className={cn(itemBase, tone === \"danger\" && itemDanger, className)} {...props}>\n      <span className=\"truncate\">{children}</span>\n      {shortcut ? <MenuShortcut>{shortcut}</MenuShortcut> : null}\n    </BaseMenu.Item>\n  );\n}\n\n/** Single-choice group; selection is `aria-checked` on each item, which the dot indicator draws from. */\nexport function MenuRadioGroup(props: ComponentPropsWithoutRef<typeof BaseMenu.RadioGroup>) {\n  return <BaseMenu.RadioGroup {...props} />;\n}\n\ninterface MenuRadioItemProps extends StyledProps<typeof BaseMenu.RadioItem> {\n  \"data-preview-state\"?: \"hover\";\n}\n\n/** One choice in a `MenuRadioGroup`. The dot renders only while it is checked. */\nexport function MenuRadioItem({ className, children, ...props }: MenuRadioItemProps) {\n  return (\n    <BaseMenu.RadioItem className={cn(itemBase, className)} {...props}>\n      <span className=\"truncate\">{children}</span>\n      {/* Fixed box so a checked and an unchecked row keep the same width. */}\n      <span className=\"flex size-3 shrink-0 items-center justify-center\">\n        <BaseMenu.RadioItemIndicator className=\"size-1.5 rounded-full bg-accent\" />\n      </span>\n    </BaseMenu.RadioItem>\n  );\n}\n\n/** An on/off row; the tick renders only while `checked`. */\nexport function MenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: StyledProps<typeof BaseMenu.CheckboxItem>) {\n  return (\n    <BaseMenu.CheckboxItem className={cn(itemBase, className)} {...props}>\n      <span className=\"truncate\">{children}</span>\n      <span className=\"flex size-3 shrink-0 items-center justify-center text-accent-ink\">\n        <BaseMenu.CheckboxItemIndicator>✓</BaseMenu.CheckboxItemIndicator>\n      </span>\n    </BaseMenu.CheckboxItem>\n  );\n}\n\n/** A hairline between two groups of items. */\nexport function MenuSeparator({ className, ...props }: StyledProps<typeof BaseMenu.Separator>) {\n  return <BaseMenu.Separator className={cn(\"my-1 h-px bg-hairline\", className)} {...props} />;\n}\n","/**\n * Tooltip: Base UI's tooltip in Studio tokens. The trigger is a box-less\n * `display: contents` wrapper so a disabled control still gets hover.\n */\n\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cloneElement, useId, useRef, useState, type ReactElement } from \"react\";\nimport { cn } from \"./cn\";\nimport { floatingMotion } from \"./Menu\";\n\ninterface TooltipProps {\n  label: string;\n  /** A single element, wrapped in a box-less span so a disabled one still gets hover. */\n  children: ReactElement<{ \"aria-describedby\"?: string }>;\n  /** Hover delay in ms. */\n  delay?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\n/** Matches the old bubble's gap from its trigger, and its viewport margin. */\nconst SIDE_OFFSET = 6;\nconst VIEWPORT_MARGIN = 8;\n\nexport function Tooltip({ label, children, delay = 400, side = \"top\" }: TooltipProps) {\n  const [open, setOpen] = useState(false);\n  const boxRef = useRef<HTMLSpanElement>(null);\n  const tooltipId = useId();\n\n  return (\n    <BaseTooltip.Root open={open} onOpenChange={setOpen}>\n      <BaseTooltip.Trigger delay={delay} render={<span ref={boxRef} className=\"contents\" />}>\n        {cloneElement(children, {\n          \"aria-describedby\": open ? tooltipId : children.props[\"aria-describedby\"],\n        })}\n      </BaseTooltip.Trigger>\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner\n          anchor={() => boxRef.current?.firstElementChild ?? null}\n          side={side}\n          sideOffset={SIDE_OFFSET}\n          collisionPadding={VIEWPORT_MARGIN}\n          className=\"z-200\"\n        >\n          <BaseTooltip.Popup\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(\n              \"pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu\",\n              floatingMotion(\"duration-tooltip\"),\n            )}\n          >\n            {label}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n}\n","/**\n * Popover: `Menu`'s floating chrome (`popupSurface`) without item semantics, so arrow keys\n * stay with whatever is focused inside (rename inputs, forms). Only the shadow differs.\n */\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"./cn\";\nimport { popupSurface, type PopupPreviewState } from \"./Menu\";\n\ntype PortalContainer = ComponentPropsWithoutRef<typeof BasePopover.Portal>[\"container\"];\n\n/** Matches Menu's gap from its trigger, and its viewport margin. */\nconst SIDE_OFFSET = 6;\nconst VIEWPORT_MARGIN = 8;\n\n/** The arrow's 14x8 box overlaps the popup's border by 1px, so its fill hides the border where it meets the popup. */\nconst ARROW_PX = 7;\nconst ARROW_CORNER_CLEARANCE = 10;\nconst arrowPlace = cn(\n  \"data-[side=bottom]:-top-[7px] data-[side=top]:-bottom-[7px] data-[side=top]:rotate-180\",\n  \"data-[side=left]:-right-[10px] data-[side=left]:rotate-90\",\n  \"data-[side=right]:-left-[10px] data-[side=right]:-rotate-90\",\n);\n\ninterface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof BasePopover.Root>, \"children\"> {\n  /** A single element. It becomes the trigger; no wrapper is added around it. */\n  trigger: ReactElement;\n  /** Arbitrary content. The popover owns none of its keys. */\n  children: ReactNode;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n  /** Points the popup at its trigger. Off by default; the default gap from the trigger grows by the arrow's height. */\n  arrow?: boolean;\n  /** Portal target. Pass the shadow root when the trigger lives in one. */\n  container?: PortalContainer;\n  /** Names the popup for assistive tech. */\n  \"aria-label\"?: string;\n  /**\n   * What to focus on open. Defaults to Base UI's behaviour (the first tabbable\n   * element), which is what a rename field wants.\n   */\n  initialFocus?: ComponentPropsWithoutRef<typeof BasePopover.Popup>[\"initialFocus\"];\n  className?: string;\n  \"data-preview-state\"?: PopupPreviewState;\n}\n\nexport function Popover({\n  trigger,\n  children,\n  side = \"bottom\",\n  align = \"center\",\n  arrow = false,\n  sideOffset = arrow ? SIDE_OFFSET + ARROW_PX : SIDE_OFFSET,\n  container,\n  className,\n  initialFocus,\n  \"aria-label\": ariaLabel,\n  \"data-preview-state\": previewState,\n  ...root\n}: PopoverProps) {\n  return (\n    <BasePopover.Root {...root}>\n      <BasePopover.Trigger render={trigger} />\n      <BasePopover.Portal container={container}>\n        <BasePopover.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          collisionPadding={VIEWPORT_MARGIN}\n          arrowPadding={ARROW_CORNER_CLEARANCE}\n          className=\"z-200\"\n        >\n          <BasePopover.Popup\n            aria-label={ariaLabel}\n            initialFocus={initialFocus}\n            data-preview-state={previewState}\n            className={cn(popupSurface, \"p-3 text-step-11 text-text-1 shadow-popover\", className)}\n          >\n            {arrow && (\n              <BasePopover.Arrow className={arrowPlace}>\n                <svg width=\"14\" height=\"8\" viewBox=\"0 0 14 8\" aria-hidden=\"true\" className=\"block\">\n                  <path d=\"M0 8 L7 1 L14 8\" className=\"fill-surface stroke-border-input\" />\n                </svg>\n              </BasePopover.Arrow>\n            )}\n            {children}\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      </BasePopover.Portal>\n    </BasePopover.Root>\n  );\n}\n","/**\n * Input: a boxed text field. Typing edits a local draft; Enter and blur commit it,\n * Escape abandons it. `onTrack` fires once per commit, never per keystroke.\n */\n\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { useEffect, useRef, useState, type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"./cn\";\nimport type { PreviewState } from \"./Button\";\n\n/**\n * Shared field look (also used by NumberField and Select). Each interactive state is written\n * twice, real and `data-[preview-state=...]`; `valueControls.test.tsx` asserts the lists match.\n */\nexport const fieldBase = cn(\n  \"flex min-w-0 items-center gap-1.5 h-ctl px-2 rounded-md\",\n  \"bg-input border border-border-input text-step-11 font-medium text-text-1\",\n  \"transition-[border-color,background-color] ease-standard duration-focus\",\n  \"hover:border-border-strong data-[preview-state=hover]:border-border-strong\",\n  \"outline-hidden\",\n  \"focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent\",\n  \"data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-1 data-[preview-state=focus]:outline-accent\",\n  // `aria-invalid` is not one of Tailwind's built-in aria variants, so the\n  // arbitrary form is the one that compiles. The token gate would have caught\n  // the bare `aria-invalid:` spelling as a class that resolves to nothing.\n  \"aria-[invalid]:border-danger-ink\",\n  \"has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed\",\n);\n\n/** The text itself, inside the box. The box owns the border and the ring. */\nexport const fieldText = cn(\n  \"min-w-0 w-full bg-transparent text-inherit outline-hidden\",\n  \"placeholder:text-text-5 disabled:cursor-not-allowed\",\n);\n\nexport interface InputProps extends Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"value\" | \"onChange\" | \"className\"\n> {\n  /** The committed value. A draft lives inside until Enter or blur. */\n  value: string;\n  /** Called with the draft on Enter and on blur, only when it really changed. */\n  onCommit: (next: string) => void;\n  /** Called once per committed change, for design-input telemetry. */\n  onTrack?: () => void;\n  /** Marks the field invalid: red boundary and `aria-invalid`. */\n  invalid?: boolean;\n  className?: string;\n  \"data-preview-state\"?: PreviewState;\n}\n\nexport function Input({\n  value,\n  onCommit,\n  onTrack,\n  invalid,\n  disabled,\n  className,\n  \"data-preview-state\": previewState,\n  ...props\n}: InputProps) {\n  const [draft, setDraft] = useState(value);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n  const dirtyRef = useRef(false);\n\n  // An external write (a seek, an undo, another panel) is authoritative, but it\n  // must not eat what the user is halfway through typing.\n  useEffect(() => {\n    if (!dirtyRef.current) setDraft(value);\n  }, [value]);\n\n  const commit = (next: string) => {\n    dirtyRef.current = false;\n    if (next === valueRef.current) return;\n    onCommit(next);\n    onTrack?.();\n  };\n\n  return (\n    <div\n      className={cn(fieldBase, className)}\n      aria-invalid={invalid || undefined}\n      data-preview-state={previewState}\n    >\n      <BaseInput\n        value={draft}\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        className={fieldText}\n        onValueChange={(next) => {\n          dirtyRef.current = true;\n          setDraft(next);\n        }}\n        onBlur={() => commit(draft)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commit(draft);\n            return;\n          }\n          if (event.key === \"Escape\") {\n            // Abandon the draft rather than leave it for the blur commit.\n            event.preventDefault();\n            event.stopPropagation();\n            dirtyRef.current = false;\n            setDraft(valueRef.current);\n            event.currentTarget.blur();\n          }\n        }}\n        {...props}\n      />\n    </div>\n  );\n}\n","/**\n * NumberField: the inspector's metric control. Commits only on blur, Enter, or a settled step (KTD11),\n * never per keystroke. The unit is a sibling of the input; unparseable text shows a red boundary and commits nothing.\n */\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"./cn\";\nimport { fieldBase, fieldText } from \"./Input\";\nimport type { PreviewState } from \"./Button\";\n\nexport interface NumberFieldProps {\n  /** Accessible name. The inspector's row label is the usual one. */\n  label: string;\n  /** The committed value. */\n  value: number;\n  /** Called when a commit boundary produces a value different from `value`. */\n  onCommit: (next: number) => void;\n  /** Called once per committed change, for design-input telemetry. */\n  onTrack?: () => void;\n  /** Rendered beside the number: \"px\", \"%\", \"deg\". Never part of the text. */\n  unit?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  className?: string;\n  \"data-preview-state\"?: PreviewState;\n}\n\nexport function NumberField({\n  label,\n  value,\n  onCommit,\n  onTrack,\n  unit,\n  min,\n  max,\n  step,\n  disabled,\n  className,\n  \"data-preview-state\": previewState,\n}: NumberFieldProps) {\n  const [draft, setDraft] = useState<number | null>(value);\n  const [invalid, setInvalid] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What was last handed to `onCommit`, which is not the same as `value`: a\n  // blur can fire both Base UI's commit and ours in one turn, before the parent\n  // has re-rendered with the new prop, and the second must be a no-op.\n  const committedRef = useRef(value);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(() => {\n    committedRef.current = value;\n    setDraft(value);\n    setInvalid(false);\n  }, [value]);\n\n  const commit = (next: number | null) => {\n    if (next === null || !Number.isFinite(next)) {\n      setInvalid(true);\n      return;\n    }\n    setInvalid(false);\n    if (next === committedRef.current) return;\n    committedRef.current = next;\n    onCommit(next);\n    onTrack?.();\n  };\n\n  /** Enter commits what is on screen, which Base UI has not parsed for us yet. */\n  const commitFromText = () => {\n    const text = inputRef.current?.value.trim() ?? \"\";\n    commit(text === \"\" ? null : Number(text));\n  };\n\n  return (\n    <BaseNumberField.Root\n      value={draft}\n      min={min}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(next) => {\n        setDraft(next);\n        if (next !== null) setInvalid(false);\n      }}\n      onValueCommitted={(next) => commit(next)}\n    >\n      <BaseNumberField.Group\n        className={cn(fieldBase, className)}\n        aria-invalid={invalid || undefined}\n        data-preview-state={previewState}\n      >\n        <BaseNumberField.Input\n          ref={inputRef}\n          aria-label={label}\n          aria-invalid={invalid || undefined}\n          className={cn(fieldText, \"tabular-nums\")}\n          onKeyDown={(event) => {\n            if (event.key !== \"Enter\") return;\n            event.preventDefault();\n            commitFromText();\n          }}\n          onBlur={() => {\n            // Base UI's own blur handler returns without committing when the\n            // text does not parse. That is the only case left for us: a valid\n            // blur has already arrived through `onValueCommitted`.\n            const text = inputRef.current?.value.trim() ?? \"\";\n            if (text === \"\" || !Number.isFinite(Number(text))) setInvalid(true);\n          }}\n        />\n        {unit && (\n          <span className=\"shrink-0 select-none text-step-10 text-text-4\" aria-hidden=\"true\">\n            {unit}\n          </span>\n        )}\n      </BaseNumberField.Group>\n    </BaseNumberField.Root>\n  );\n}\n","/**\n * Select: Base UI select in Input's box. The trigger keeps `role=\"combobox\"`, which both hotkey selector\n * lists match. Options are data, not children, so typeahead and the value display can read labels.\n */\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { cn } from \"./cn\";\nimport { fieldBase } from \"./Input\";\nimport { floatingMotion } from \"./Menu\";\nimport type { PreviewState } from \"./Button\";\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n  /** Offered but not choosable; the label stays visible so the reason stays visible too. */\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** Accessible name for the trigger. */\n  label: string;\n  value: string;\n  options: SelectOption[];\n  /** Called when a different option is chosen. */\n  onCommit: (next: string) => void;\n  /** Called once per committed change, for design-input telemetry. */\n  onTrack?: () => void;\n  disabled?: boolean;\n  className?: string;\n  \"data-preview-state\"?: PreviewState;\n}\n\nexport function Select({\n  label,\n  value,\n  options,\n  onCommit,\n  onTrack,\n  disabled,\n  className,\n  \"data-preview-state\": previewState,\n}: SelectProps) {\n  return (\n    <BaseSelect.Root\n      value={value}\n      disabled={disabled}\n      items={options}\n      onValueChange={(next) => {\n        const chosen = String(next);\n        if (chosen === value) return;\n        onCommit(chosen);\n        onTrack?.();\n      }}\n    >\n      <BaseSelect.Trigger\n        aria-label={label}\n        className={cn(\n          fieldBase,\n          \"w-full cursor-pointer justify-between text-left\",\n          \"data-[popup-open]:border-border-strong\",\n          className,\n        )}\n        data-preview-state={previewState}\n      >\n        <BaseSelect.Value className=\"truncate\" />\n        <BaseSelect.Icon className=\"shrink-0 text-text-4\" aria-hidden=\"true\">\n          <svg width=\"8\" height=\"5\" viewBox=\"0 0 8 5\" fill=\"none\">\n            <path\n              d=\"M1 1L4 4L7 1\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </BaseSelect.Icon>\n      </BaseSelect.Trigger>\n\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>\n          <BaseSelect.Popup\n            className={cn(\n              \"min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu\",\n              floatingMotion(\"duration-open\"),\n            )}\n          >\n            <BaseSelect.List>\n              {options.map((option) => (\n                <BaseSelect.Item\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  className={cn(\n                    \"flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5\",\n                    \"text-step-11 text-text-2 outline-hidden\",\n                    \"data-[highlighted]:bg-hover data-[highlighted]:text-text-0\",\n                    \"data-[selected]:text-text-0\",\n                    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40\",\n                  )}\n                >\n                  <BaseSelect.ItemText className=\"truncate\">{option.label}</BaseSelect.ItemText>\n                </BaseSelect.Item>\n              ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\n","/**\n * Slider: `onPreview` fires while the thumb moves and writes nothing durable; `onCommit` (with `onTrack`, once)\n * fires at a boundary. Right-click or Escape aborts a drag via `eventDetails.cancel()` and restores the start value.\n */\n\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"./cn\";\nimport type { PreviewState } from \"./Button\";\n\nexport interface SliderProps {\n  /** Accessible name for the thumb. The inspector's row label is the usual one. */\n  label: string;\n  /** The committed value. */\n  value: number;\n  min: number;\n  max: number;\n  step?: number;\n  /** Every intermediate value while dragging or stepping. Not a commit. */\n  onPreview?: (next: number) => void;\n  /** Called at a commit boundary when the value really changed. */\n  onCommit: (next: number) => void;\n  /** Called once per commit boundary, for design-input telemetry. */\n  onTrack?: () => void;\n  disabled?: boolean;\n  className?: string;\n  \"data-preview-state\"?: PreviewState;\n}\n\nconst first = (next: number | number[]): number => (Array.isArray(next) ? next[0] : next);\n\nexport function Slider({\n  label,\n  value,\n  min,\n  max,\n  step,\n  onPreview,\n  onCommit,\n  onTrack,\n  disabled,\n  className,\n  \"data-preview-state\": previewState,\n}: SliderProps) {\n  const [draft, setDraft] = useState(value);\n  const draggingRef = useRef(false);\n  const abortedRef = useRef(false);\n  // The committed value the current gesture started from, so an abort has\n  // something to put back.\n  const dragStartRef = useRef(value);\n  // What was last handed to `onCommit`. A gesture's own commit lands before the\n  // parent re-renders, so deduping against the `value` prop would double-fire.\n  const committedRef = useRef(value);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  // An external write wins, except mid-drag: the echo is a frame behind, and\n  // applying it would snap the thumb backwards under the pointer.\n  useEffect(() => {\n    if (draggingRef.current) return;\n    committedRef.current = value;\n    setDraft(value);\n  }, [value]);\n\n  const commit = (next: number) => {\n    if (next === committedRef.current) return;\n    committedRef.current = next;\n    onCommit(next);\n  };\n\n  const abort = () => {\n    if (!draggingRef.current) return;\n    abortedRef.current = true;\n    const start = dragStartRef.current;\n    setDraft(start);\n    onPreview?.(start);\n    commit(start);\n  };\n\n  return (\n    <BaseSlider.Root\n      value={draft}\n      min={min}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(next, details) => {\n        if (abortedRef.current) {\n          // The pointer is still down after a right-click abort. Base UI would\n          // otherwise keep applying moves to a gesture the user cancelled.\n          details.cancel();\n          return;\n        }\n        const n = first(next);\n        setDraft(n);\n        onPreview?.(n);\n      }}\n      onValueCommitted={(next) => {\n        draggingRef.current = false;\n        if (abortedRef.current) {\n          abortedRef.current = false;\n          return;\n        }\n        commit(first(next));\n        onTrack?.();\n      }}\n      className={cn(\"flex min-w-0 items-center\", className)}\n      data-preview-state={previewState}\n    >\n      <BaseSlider.Control\n        // A stable hook for the drag tests and for the screenshot script. Base\n        // UI's own marker on this part only exists before hydration.\n        data-slider-control=\"true\"\n        // h-6 is the 24x24 WCAG 2.2 (2.5.8) target: the visible track stays\n        // 2px, only the pointer box grows.\n        className=\"flex h-6 w-full min-w-0 touch-none select-none items-center\"\n        onPointerDown={() => {\n          draggingRef.current = true;\n          abortedRef.current = false;\n          dragStartRef.current = valueRef.current;\n        }}\n        onContextMenu={(event) => {\n          if (!draggingRef.current) return;\n          event.preventDefault();\n          abort();\n        }}\n        onKeyDown={(event) => {\n          if (event.key !== \"Escape\" || !draggingRef.current) return;\n          event.preventDefault();\n          abort();\n        }}\n      >\n        <BaseSlider.Track className=\"h-0.5 w-full rounded-full bg-hover\">\n          <BaseSlider.Indicator className=\"rounded-full bg-text-5\" />\n          <BaseSlider.Thumb\n            aria-label={label}\n            className={cn(\n              // The ring separates the thumb from the track behind it. A drop\n              // shadow would need a raw colour literal, which R5 does not allow\n              // outside the token file, and no shadow token fits a 10px dot.\n              \"size-2.5 rounded-full bg-text-0 ring-2 ring-bg-1\",\n              \"cursor-grab active:cursor-grabbing data-[preview-state=active]:cursor-grabbing\",\n              \"hover:scale-110 data-[preview-state=hover]:scale-110\",\n              \"transition-transform ease-standard duration-hover\",\n              \"has-[:focus-visible]:outline-solid has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent\",\n              \"data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-2 data-[preview-state=focus]:outline-accent\",\n            )}\n          />\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  );\n}\n","/**\n * Toggle: a switch, not a checkbox (immediate effect). `role=\"switch\"` needed an entry in\n * `typingTarget.ts` so Space is not leaked to the global playback shortcut.\n */\n\nimport { Switch } from \"@base-ui/react/switch\";\nimport { cn } from \"./cn\";\nimport type { PreviewState } from \"./Button\";\n\nexport interface ToggleProps {\n  /** Accessible name. */\n  label: string;\n  checked: boolean;\n  /** Called on every flip. */\n  onCommit: (next: boolean) => void;\n  /** Called once per flip, for design-input telemetry. */\n  onTrack?: () => void;\n  disabled?: boolean;\n  className?: string;\n  \"data-preview-state\"?: PreviewState;\n}\n\nexport function Toggle({\n  label,\n  checked,\n  onCommit,\n  onTrack,\n  disabled,\n  className,\n  \"data-preview-state\": previewState,\n}: ToggleProps) {\n  return (\n    <Switch.Root\n      aria-label={label}\n      checked={checked}\n      disabled={disabled}\n      onCheckedChange={(next) => {\n        onCommit(next);\n        onTrack?.();\n      }}\n      data-preview-state={previewState}\n      className={cn(\n        \"relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full p-0.5\",\n        \"border border-border-input bg-input\",\n        \"transition-[background-color,border-color] ease-standard duration-press\",\n        \"hover:border-border-strong data-[preview-state=hover]:border-border-strong\",\n        \"data-[checked]:border-accent data-[checked]:bg-accent\",\n        \"outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent\",\n        \"data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-1 data-[preview-state=focus]:outline-accent\",\n        \"disabled:cursor-not-allowed disabled:opacity-40\",\n        className,\n      )}\n    >\n      <Switch.Thumb\n        className={cn(\n          \"size-3 rounded-full bg-text-3\",\n          \"transition-[transform,background-color] ease-standard duration-press\",\n          \"data-[checked]:translate-x-3 data-[checked]:bg-bg-0\",\n        )}\n      />\n    </Switch.Root>\n  );\n}\n"],"mappings":"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","names":["forwardRef","jsx","forwardRef","jsx","jsx","jsxs","jsx","jsxs","jsx","jsxs","useId","jsx","jsxs","SIDE_OFFSET","VIEWPORT_MARGIN","useId","jsx","jsxs","SIDE_OFFSET","VIEWPORT_MARGIN","useRef","useState","jsx","useState","useRef","useEffect","useRef","useState","jsx","jsxs","useState","useRef","useEffect","jsx","jsxs","useEffect","useRef","useState","jsx","jsxs","useState","useRef","useEffect","jsx"]}

package/dist/index.css

@@ -1,10 +1,15 @@
 @import "dockview-react/dist/styles/dockview.css";
 
 /* src/components/dock/dock.css */
+.dv-shell:has(.hf-dock) {
+  color-scheme: inherit;
+}
 .hf-dock {
   --dv-group-view-background-color: var(--panel-card-bg);
   --dv-tabs-and-actions-container-background-color: var(--panel-strip-bg);
   --dv-tabs-and-actions-container-height: 36px;
+  --dv-icon-hover-background-color: var(--color-hover);
+  --dv-tabs-container-scrollbar-color: var(--color-text-muted);
   --dv-activegroup-visiblepanel-tab-background-color: transparent;
   --dv-activegroup-hiddenpanel-tab-background-color: transparent;
   --dv-inactivegroup-visiblepanel-tab-background-color: transparent;
@@ -143,7 +148,7 @@
   opacity: 0;
 }
 .dv-groupview:hover .hf-dock-strip-actions {
-  opacity: 0.5;
+  opacity: 0.8;
 }
 .hf-dock-strip-actions:hover,
 .hf-dock-strip-actions:focus-within {

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dock/dock.css"],"sourcesContent":["@import \"dockview-react/dist/styles/dockview.css\";\n\n.hf-dock {\n  --dv-group-view-background-color: var(--panel-card-bg);\n  --dv-tabs-and-actions-container-background-color: var(--panel-strip-bg);\n  --dv-tabs-and-actions-container-height: 36px;\n  /* The fill paints the shown tab, so every tab state is transparent. */\n  --dv-activegroup-visiblepanel-tab-background-color: transparent;\n  --dv-activegroup-hiddenpanel-tab-background-color: transparent;\n  --dv-inactivegroup-visiblepanel-tab-background-color: transparent;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: var(--color-text-1);\n  --dv-activegroup-hiddenpanel-tab-color: var(--color-text-2);\n  --dv-inactivegroup-visiblepanel-tab-color: var(--color-text-1);\n  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-2);\n  --dv-tab-divider-color: transparent;\n  --dv-tab-margin: 0;\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: transparent;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: var(--color-panel-accent);\n  --dv-drag-over-background-color: color-mix(in srgb, var(--color-panel-accent) 12%, transparent);\n  --dv-drag-over-border-color: var(--color-panel-accent);\n  --dv-tab-font-size: 12.5px;\n  --dv-tabs-and-actions-container-font-size: 12.5px;\n  background-color: var(--panel-shell-bg);\n}\n\n.hf-dock .dv-sash:focus-visible {\n  background-color: var(--dv-active-sash-color);\n  outline: none;\n}\n\n.hf-dock .dv-dockview {\n  background-color: var(--panel-shell-bg);\n}\n\n/* Cards on the shell: 3px around each group's view makes a 6px gutter. The card owns the only border. */\n.hf-dock .dv-view:has(> .dv-groupview) {\n  box-sizing: border-box;\n  padding: 3px;\n}\n\n.hf-dock .dv-groupview {\n  border: 1px solid var(--panel-card-border);\n  border-radius: 10px;\n}\n\n.hf-dock .dv-tabs-and-actions-container {\n  align-items: flex-end;\n  padding: 6px 0 0 4px;\n}\n\n.hf-dock .dv-scrollable {\n  height: 30px;\n  min-width: 0;\n}\n\n/* dockview's own scrollbar lane; the strip scrolls by wheel and keeps the shown tab in view. */\n.hf-dock .dv-scrollbar {\n  display: none;\n}\n\n.hf-dock .dv-tabs-container {\n  --hf-fade-start: 0px;\n  --hf-fade-end: 0px;\n}\n\n/* A mask adds a compositor render pass; only a strip that is actually clipped needs one. */\n.hf-dock .dv-tabs-container[data-clipped] {\n  mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--hf-fade-start),\n    black calc(100% - var(--hf-fade-end)),\n    transparent\n  );\n}\n\n.hf-dock .dv-tabs-container[data-clipped~=\"start\"] {\n  --hf-fade-start: 12px;\n}\n\n.hf-dock .dv-tabs-container[data-clipped~=\"end\"] {\n  --hf-fade-end: 12px;\n}\n\n.hf-dock .dv-tab {\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 6px;\n  border-radius: 6px 6px 0 0;\n  white-space: nowrap;\n}\n\n/* dockview's own state rule paints tabs from these variables, so hover sets them. */\n.hf-dock .dv-tab.dv-inactive-tab:hover {\n  --dv-activegroup-hiddenpanel-tab-background-color: var(--panel-tab-bg-hover);\n  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--panel-tab-bg-hover);\n  --dv-activegroup-hiddenpanel-tab-color: var(--color-text-1);\n  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-1);\n}\n\n.hf-dock .dv-tab:focus-visible {\n  outline: 1.5px solid var(--color-accent);\n  outline-offset: -1.5px;\n}\n\n.hf-dock .dv-tab:focus-visible::after,\n.hf-dock .dv-tab:has(:focus-visible)::after {\n  outline: none !important;\n}\n\n.hf-dock-tab-fill {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 30px;\n  border-radius: 6px 6px 0 0;\n  background-color: var(--panel-card-bg);\n  pointer-events: none;\n}\n\n.hf-dock-tab-fill[data-ready] {\n  transition:\n    transform 140ms ease-out,\n    width 140ms ease-out;\n}\n\n/* Fills dockview's tab part, so the label and icon centre in the tab's full height. */\n.hf-dock-tab {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n}\n\n.hf-dock .dv-inactive-tab .hf-dock-tab-icon,\n.hf-dock .dv-inactive-tab .hf-dock-tab-close {\n  display: none;\n}\n\n.hf-dock-tab-icon {\n  flex: none;\n  animation: hf-dock-tab-icon-in 80ms ease-out;\n}\n\n@keyframes hf-dock-tab-icon-in {\n  from {\n    opacity: 0;\n    transform: translateX(-2px);\n  }\n}\n\n/* Takes its space whenever the tab is shown, so hover never moves the label. */\n.hf-dock-tab-close {\n  display: flex;\n  opacity: 0;\n}\n\n.dv-tab:hover .hf-dock-tab-close,\n.dv-tab:focus-visible .hf-dock-tab-close {\n  opacity: 1;\n}\n\n/* Sized by the actions it draws, so a strip without them gives its tabs the whole width. */\n.hf-dock .dv-right-actions-container {\n  flex: none;\n  align-self: flex-start;\n}\n\n.hf-dock-strip-actions {\n  display: flex;\n  margin-right: 4px;\n  opacity: 0;\n}\n\n.dv-groupview:hover .hf-dock-strip-actions {\n  opacity: 0.5;\n}\n\n.hf-dock-strip-actions:hover,\n.hf-dock-strip-actions:focus-within {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hf-dock-tab-fill[data-ready] {\n    transition: none;\n  }\n\n  .hf-dock-tab-icon {\n    animation: none;\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/dock/dock.css"],"sourcesContent":["@import \"dockview-react/dist/styles/dockview.css\";\n\n.dv-shell:has(.hf-dock) {\n  /* dockview's runtime stylesheet pins `color-scheme: dark` on its theme class, which sits on\n   * the shell around the dock. */\n  color-scheme: inherit;\n}\n\n.hf-dock {\n  --dv-group-view-background-color: var(--panel-card-bg);\n  --dv-tabs-and-actions-container-background-color: var(--panel-strip-bg);\n  --dv-tabs-and-actions-container-height: 36px;\n  --dv-icon-hover-background-color: var(--color-hover);\n  --dv-tabs-container-scrollbar-color: var(--color-text-muted);\n  /* The fill paints the shown tab, so every tab state is transparent. */\n  --dv-activegroup-visiblepanel-tab-background-color: transparent;\n  --dv-activegroup-hiddenpanel-tab-background-color: transparent;\n  --dv-inactivegroup-visiblepanel-tab-background-color: transparent;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: var(--color-text-1);\n  --dv-activegroup-hiddenpanel-tab-color: var(--color-text-2);\n  --dv-inactivegroup-visiblepanel-tab-color: var(--color-text-1);\n  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-2);\n  --dv-tab-divider-color: transparent;\n  --dv-tab-margin: 0;\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: transparent;\n  --dv-sash-color: transparent;\n  --dv-active-sash-color: var(--color-panel-accent);\n  --dv-drag-over-background-color: color-mix(in srgb, var(--color-panel-accent) 12%, transparent);\n  --dv-drag-over-border-color: var(--color-panel-accent);\n  --dv-tab-font-size: 12.5px;\n  --dv-tabs-and-actions-container-font-size: 12.5px;\n  background-color: var(--panel-shell-bg);\n}\n\n.hf-dock .dv-sash:focus-visible {\n  background-color: var(--dv-active-sash-color);\n  outline: none;\n}\n\n.hf-dock .dv-dockview {\n  background-color: var(--panel-shell-bg);\n}\n\n/* Cards on the shell: 3px around each group's view makes a 6px gutter. The card owns the only border. */\n.hf-dock .dv-view:has(> .dv-groupview) {\n  box-sizing: border-box;\n  padding: 3px;\n}\n\n.hf-dock .dv-groupview {\n  border: 1px solid var(--panel-card-border);\n  border-radius: 10px;\n}\n\n.hf-dock .dv-tabs-and-actions-container {\n  align-items: flex-end;\n  padding: 6px 0 0 4px;\n}\n\n.hf-dock .dv-scrollable {\n  height: 30px;\n  min-width: 0;\n}\n\n/* dockview's own scrollbar lane; the strip scrolls by wheel and keeps the shown tab in view. */\n.hf-dock .dv-scrollbar {\n  display: none;\n}\n\n.hf-dock .dv-tabs-container {\n  --hf-fade-start: 0px;\n  --hf-fade-end: 0px;\n}\n\n/* A mask adds a compositor render pass; only a strip that is actually clipped needs one. */\n.hf-dock .dv-tabs-container[data-clipped] {\n  mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--hf-fade-start),\n    black calc(100% - var(--hf-fade-end)),\n    transparent\n  );\n}\n\n.hf-dock .dv-tabs-container[data-clipped~=\"start\"] {\n  --hf-fade-start: 12px;\n}\n\n.hf-dock .dv-tabs-container[data-clipped~=\"end\"] {\n  --hf-fade-end: 12px;\n}\n\n.hf-dock .dv-tab {\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 6px;\n  border-radius: 6px 6px 0 0;\n  white-space: nowrap;\n}\n\n/* dockview's own state rule paints tabs from these variables, so hover sets them. */\n.hf-dock .dv-tab.dv-inactive-tab:hover {\n  --dv-activegroup-hiddenpanel-tab-background-color: var(--panel-tab-bg-hover);\n  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--panel-tab-bg-hover);\n  --dv-activegroup-hiddenpanel-tab-color: var(--color-text-1);\n  --dv-inactivegroup-hiddenpanel-tab-color: var(--color-text-1);\n}\n\n.hf-dock .dv-tab:focus-visible {\n  outline: 1.5px solid var(--color-accent);\n  outline-offset: -1.5px;\n}\n\n.hf-dock .dv-tab:focus-visible::after,\n.hf-dock .dv-tab:has(:focus-visible)::after {\n  outline: none !important;\n}\n\n.hf-dock-tab-fill {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 30px;\n  border-radius: 6px 6px 0 0;\n  background-color: var(--panel-card-bg);\n  pointer-events: none;\n}\n\n.hf-dock-tab-fill[data-ready] {\n  transition:\n    transform 140ms ease-out,\n    width 140ms ease-out;\n}\n\n/* Fills dockview's tab part, so the label and icon centre in the tab's full height. */\n.hf-dock-tab {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n}\n\n.hf-dock .dv-inactive-tab .hf-dock-tab-icon,\n.hf-dock .dv-inactive-tab .hf-dock-tab-close {\n  display: none;\n}\n\n.hf-dock-tab-icon {\n  flex: none;\n  animation: hf-dock-tab-icon-in 80ms ease-out;\n}\n\n@keyframes hf-dock-tab-icon-in {\n  from {\n    opacity: 0;\n    transform: translateX(-2px);\n  }\n}\n\n/* Takes its space whenever the tab is shown, so hover never moves the label. */\n.hf-dock-tab-close {\n  display: flex;\n  opacity: 0;\n}\n\n.dv-tab:hover .hf-dock-tab-close,\n.dv-tab:focus-visible .hf-dock-tab-close {\n  opacity: 1;\n}\n\n/* Sized by the actions it draws, so a strip without them gives its tabs the whole width. */\n.hf-dock .dv-right-actions-container {\n  flex: none;\n  align-self: flex-start;\n}\n\n.hf-dock-strip-actions {\n  display: flex;\n  margin-right: 4px;\n  opacity: 0;\n}\n\n.dv-groupview:hover .hf-dock-strip-actions {\n  opacity: 0.8;\n}\n\n.hf-dock-strip-actions:hover,\n.hf-dock-strip-actions:focus-within {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hf-dock-tab-fill[data-ready] {\n    transition: none;\n  }\n\n  .hf-dock-tab-icon {\n    animation: none;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -2887,6 +2887,9 @@ interface AudioMeterStripProps {
 }
 declare const AudioMeterStrip: react.NamedExoticComponent<AudioMeterStripProps>;
 
+type InPlace = {
+    inPlace?: boolean;
+};
 interface RecordEditInput$3 {
     label: string;
     coalesceKey?: string;
@@ -2910,9 +2913,9 @@ interface UseClipboardOptions {
 }
 declare function useClipboard({ projectId, activeCompPath, domEditSelectionRef, showToast, writeProjectFile, recordEdit, reloadPreview, handleTimelineElementsDelete, handleDomEditElementDelete, previewIframeRef, waitForPendingDomEditSaves, }: UseClipboardOptions): {
     handleCopy: () => boolean;
-    handlePaste: () => Promise<void>;
+    handlePaste: (options?: InPlace) => Promise<void>;
     handleCut: () => Promise<boolean>;
-    handleDuplicate: () => Promise<boolean>;
+    handleDuplicate: (options?: InPlace) => Promise<boolean>;
     canPaste: () => boolean;
 };
 
@@ -3185,7 +3188,7 @@ interface UseDomEditSessionParams extends DomEditTimelineParams {
     handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
     readOnlyPreview: boolean;
 }
-declare function useDomEditSession({ projectId, activeCompPath, compIdToSrc, captionEditMode, compositionLoading, previewIframeRef, timelineElements, getTimelineSelectionSet, setSelectedTimelineElementId, setTimelineSelectionSet, setRightCollapsed, setRightPanelTab, showToast, isRecordingRef, refreshPreviewDocumentVersion, queueDomEditSave, readProjectFile, writeProjectFile, updateEditingFileContent, editHistory, fileTree, importedFontAssetsRef, projectDir, projectIdRef, previewIframe, refreshKey, previewDocumentVersion, rightPanelTab, applyStudioManualEditsToPreviewRef, syncPreviewHotkeys, reloadPreview, setRefreshKey: _setRefreshKey, openSourceForSelection, sdkSession, publishSdkSession, forceReloadSdkSession, handleTimelineElementsDelete, readOnlyPreview, }: UseDomEditSessionParams): {
+declare function useDomEditSession({ projectId, activeCompPath, compIdToSrc, captionEditMode, compositionLoading, previewIframeRef, timelineElements, getTimelineSelectionSet, setSelectedTimelineElementId, setTimelineSelectionSet, setRightCollapsed, setRightPanelTab, showToast, isRecordingRef, refreshPreviewDocumentVersion, queueDomEditSave, readProjectFile, writeProjectFile, updateEditingFileContent, editHistory, fileTree, importedFontAssetsRef, projectDir, projectIdRef, previewIframe: hostPreviewIframe, refreshKey, previewDocumentVersion, rightPanelTab, applyStudioManualEditsToPreviewRef, syncPreviewHotkeys, reloadPreview, openSourceForSelection, sdkSession, publishSdkSession, forceReloadSdkSession, handleTimelineElementsDelete, readOnlyPreview, }: UseDomEditSessionParams): {
     domEditSelection: DomEditSelection | null;
     domEditGroupSelections: DomEditSelection[];
     domEditHoverSelection: DomEditSelection | null;
@@ -3330,6 +3333,14 @@ declare function useDomEditSession({ projectId, activeCompPath, compIdToSrc, cap
     }) => Promise<void>;
 };
 
+/** The one source for which preview is on screen: the host's iframe, then each reload promoted in its place. */
+declare function useLivePreviewIframe(host: HTMLIFrameElement | null): HTMLIFrameElement | null;
+
+type PreviewPromotion = {
+    retired: HTMLIFrameElement | null;
+    live: HTMLIFrameElement;
+};
+
 interface DomEditSaveQueue {
     enqueue: <T>(save: () => Promise<T>) => Promise<T>;
     waitForIdle: () => Promise<DomEditSaveDrainResult>;
@@ -3629,4 +3640,4 @@ interface MarqueeOverlayProps {
  */
 declare function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayProps): react_jsx_runtime.JSX.Element;
 
-export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, Dock, type DockController, type DomEditCapabilities, type DomEditCommitDeclineReason, type DomEditCommitOutcome, type DomEditGroupPathOffsetCommit, DomEditOverlay, type DomEditOverlayProps, DomEditProvider, type DomEditSelection, type DomEditZOrder, type DomGeometryCommits, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, ImageThumbnail, type ImageThumbnailProps, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, NLEPreview, type PanelId, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, ShortcutsButton, type ShortcutsButtonProps, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, TRACK_H, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipMenuItem, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineTrackPadding, type TimelineZIndexReorderCommit, type UseClipboardOptions, type UseDomEditSessionParams, type UseDomGeometryCommitOptions, type UseDomStyleCommitOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, type ZOrderAction, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, collectSnapContext, extractSnapTargets, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, resolveDomEditSelection, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, snapEngagedForTravel, useClipboard, useCompositionStack, useDockLayoutStore, useDomEditSelectionContext, useDomEditSession, useDomEditZOrder, useDomGeometryCommit, useDomStyleCommit, useEditHistoryActions, useElementPicker, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };
+export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, Dock, type DockController, type DomEditCapabilities, type DomEditCommitDeclineReason, type DomEditCommitOutcome, type DomEditGroupPathOffsetCommit, DomEditOverlay, type DomEditOverlayProps, DomEditProvider, type DomEditSelection, type DomEditZOrder, type DomGeometryCommits, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, ImageThumbnail, type ImageThumbnailProps, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, NLEPreview, type PanelId, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewPromotion, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, ShortcutsButton, type ShortcutsButtonProps, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, TRACK_H, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipMenuItem, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineTrackPadding, type TimelineZIndexReorderCommit, type UseClipboardOptions, type UseDomEditSessionParams, type UseDomGeometryCommitOptions, type UseDomStyleCommitOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, type ZOrderAction, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, collectSnapContext, extractSnapTargets, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, resolveDomEditSelection, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, snapEngagedForTravel, useClipboard, useCompositionStack, useDockLayoutStore, useDomEditSelectionContext, useDomEditSession, useDomEditZOrder, useDomGeometryCommit, useDomStyleCommit, useEditHistoryActions, useElementPicker, useLivePreviewIframe, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };

package/dist/index.html

@@ -5,8 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-De2aO4XM.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CQN3M56N.css">
+    <script>
+      // Before the first paint: the theme the toggle saved, else light (owner: src/utils/studioTheme.ts).
+      try {
+        if (JSON.parse(localStorage.getItem("hf-studio-ui-preferences") || "{}").theme !== "dark")
+          document.documentElement.dataset.theme = "paper";
+      } catch (e) {
+        document.documentElement.dataset.theme = "paper";
+      }
+    </script>
+    <script type="module" crossorigin src="/assets/index-CMiYVGv5.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-lrT-gfHa.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>