@hyperframes/studio 0.8.143 → 0.8.144

package/src/hooks/useThumbnailStripSize.test.tsx

@@ -18,9 +18,125 @@ vi.mock("../player/components/timelineZoomInput", () => ({
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
+/** Runs the frames the hook asked for, as the browser does after the observer's delivery. */
+function nextFrames() {
+  vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
+  return () => act(() => vi.advanceTimersToNextFrame());
+}
+
+// A strip that re-rendered inside the observer's delivery resized the timeline Chromium had already measured that
+// frame, which it reported as a ResizeObserver loop on every frame of a trim.
+it("applies a reported size on the next frame, never inside the observer's delivery", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
+  const host = document.createElement("div");
+  document.body.append(host);
+  Object.defineProperty(host, "clientWidth", { configurable: true, value: 300 });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+  const root = createRoot(host);
+  function Harness() {
+    const [size, ref] = useThumbnailStripSize();
+    return <div ref={ref}>{`${size.width}x${size.height}`}</div>;
+  }
+  try {
+    act(() => root.render(<Harness />));
+    reportResize(310, 40);
+    reportResize(320, 40);
+    expect(vi.getTimerCount()).toBe(1);
+    expect(host.textContent).toBe("300x40");
+    runFrames();
+    expect(host.textContent).toBe("320x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
+it("cancels a pending resize frame when the last strip unmounts", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  function Harness() {
+    const [, ref] = useThumbnailStripSize();
+    return <div ref={ref} />;
+  }
+  try {
+    act(() => root.render(<Harness />));
+    reportResize(320, 40);
+    expect(vi.getTimerCount()).toBe(1);
+    act(() => root.unmount());
+    expect(vi.getTimerCount()).toBe(0);
+    runFrames();
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
+it("drops a pending size when its strip unmounts, so a strip remounted on that box keeps its own", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  function Strip() {
+    const [size, ref] = useThumbnailStripSize();
+    return <div ref={ref}>{`${size.width}x${size.height}`}</div>;
+  }
+  function Box({ id }: { id: string }) {
+    const box = (element: HTMLDivElement | null) => {
+      if (!element) return;
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "clientHeight", { configurable: true, value: 40 });
+    };
+    return (
+      <div ref={box} data-testid="box">
+        <Strip key={id} />
+      </div>
+    );
+  }
+  // The other strip keeps the shared observer alive across the remount.
+  const render = (id: string) =>
+    act(() =>
+      root.render(
+        <>
+          <div>
+            <Strip />
+          </div>
+          <Box id={id} />
+        </>,
+      ),
+    );
+  try {
+    render("a");
+    reportResize(320, 40);
+    render("b");
+    runFrames();
+    expect(host.querySelector('[data-testid="box"]')?.textContent).toBe("300x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
 it("does not re-render the strip when the observer reports the size it already holds", () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
   const host = document.createElement("div");
   document.body.append(host);
   Object.defineProperty(host, "clientWidth", { configurable: true, value: 300 });
@@ -45,14 +161,18 @@ it("does not re-render the strip when the observer reports the size it already h
     const settled = stripRenders;
 
     act(() => reportResize(300, 40));
+    runFrames();
     expect(stripRenders).toBe(settled);
 
     act(() => reportResize(320, 40));
+    runFrames();
     expect(stripRenders).toBe(settled + 1);
     expect(host.textContent).toBe("320x40");
   } finally {
     act(() => root.unmount());
     host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
     globalThis.ResizeObserver = originalResizeObserver;
   }
 });
@@ -60,6 +180,7 @@ it("does not re-render the strip when the observer reports the size it already h
 it("measures a strip once a zoom preview ends, not while the preview scales it", () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
   const host = document.createElement("div");
   document.body.append(host);
   let width = 300;
@@ -75,6 +196,7 @@ it("measures a strip once a zoom preview ends, not while the preview scales it",
     zoom.previewing = true;
     width = 600;
     act(() => reportResize(600, 40));
+    runFrames();
     expect(host.textContent).toBe("300x40");
     zoom.previewing = false;
     act(() => zoom.listeners.forEach((listener) => listener()));
@@ -83,6 +205,7 @@ it("measures a strip once a zoom preview ends, not while the preview scales it",
     zoom.previewing = false;
     act(() => root.unmount());
     host.remove();
+    vi.useRealTimers();
     globalThis.ResizeObserver = originalResizeObserver;
   }
 });

package/src/hooks/useThumbnailStripSize.ts

@@ -152,13 +152,20 @@ const measure = (entries: { target: Element; size?: { width: number; height: num
 const onPresence = (entries: IntersectionObserverEntry[]) =>
   measure(entries.filter((entry) => entry.isIntersecting));
 
-const onResize = (entries: ResizeObserverEntry[]) =>
-  measure(
-    entries.map(({ target, contentRect: { width, height } }) => ({
-      target,
-      size: { width, height },
-    })),
-  );
+const pendingSizes = new Map<Element, { width: number; height: number }>();
+let pendingSizesFrame = 0;
+const applyPendingSizes = () => {
+  pendingSizesFrame = 0;
+  const entries = [...pendingSizes].map(([target, size]) => ({ target, size }));
+  pendingSizes.clear();
+  measure(entries);
+};
+
+const applyResizesNextFrame = (entries: ResizeObserverEntry[]) => {
+  for (const { target, contentRect } of entries)
+    pendingSizes.set(target, { width: contentRect.width, height: contentRect.height });
+  pendingSizesFrame ||= requestAnimationFrame(applyPendingSizes);
+};
 
 const observeIntersections = (callback: IntersectionObserverCallback) =>
   typeof IntersectionObserver === "undefined"
@@ -168,7 +175,7 @@ const observeIntersections = (callback: IntersectionObserverCallback) =>
 function acquire() {
   if (users++ === 0) {
     shared = {
-      resize: new ResizeObserver(onResize),
+      resize: new ResizeObserver(applyResizesNextFrame),
       presence: observeIntersections(onPresence),
       gaps: observeIntersections(
         (entries) => entries.some((entry) => entry.isIntersecting) && scheduleRefresh(),
@@ -190,6 +197,9 @@ function release() {
   window.removeEventListener("scroll", scheduleRefresh, { capture: true });
   cancelAnimationFrame(frame);
   frame = 0;
+  cancelAnimationFrame(pendingSizesFrame);
+  pendingSizesFrame = 0;
+  pendingSizes.clear();
 }
 
 const watchGap = (gap: HTMLDivElement | null) => {
@@ -234,6 +244,7 @@ export function useThumbnailStripSize() {
       resize.unobserve(target);
       presence?.unobserve(target);
       strips.delete(target);
+      pendingSizes.delete(target);
       release();
     };
   }, []);

package/src/player/components/CompositionThumbnail.test.ts

@@ -47,6 +47,7 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root?.unmount());
   root = null;
+  vi.useRealTimers();
   thumbnailScheduler.invalidateProject("/api/projects/demo/preview");
   globalThis.ResizeObserver = originalResizeObserver;
   globalThis.Image = originalImage;
@@ -175,7 +176,9 @@ describe("CompositionThumbnail", () => {
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
 
+    vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
     act(() => reportResize(500, 40));
+    act(() => vi.advanceTimersToNextFrame());
 
     expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
   });

package/src/player/components/ImageThumbnail.test.tsx

@@ -2,7 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockResizeObserver, reportResize } from "../../hooks/resizeObserverTestUtils";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { ImageThumbnail } from "./ImageThumbnail";
@@ -64,6 +64,7 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root?.unmount());
   root = null;
+  vi.useRealTimers();
   thumbnailScheduler.invalidateProject("p");
   globalThis.IntersectionObserver = originalIO;
   globalThis.ResizeObserver = originalRO;
@@ -187,7 +188,9 @@ describe("ImageThumbnail", () => {
       probe.onload?.();
     });
 
+    vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
     act(() => reportResize(500, 40));
+    act(() => vi.advanceTimersToNextFrame());
 
     expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
   });

package/src/player/components/VideoThumbnail.test.tsx

@@ -23,6 +23,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  vi.useRealTimers();
   thumbnailScheduler.invalidateProject("p");
   vi.clearAllMocks();
 });
@@ -243,8 +244,10 @@ describe("VideoThumbnail", () => {
     });
     await render(0, 0);
 
+    vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
+    act(() => reportResize(500, 40));
     await act(async () => {
-      reportResize(500, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
 
@@ -264,7 +267,9 @@ describe("VideoThumbnail", () => {
 
 describe("VideoThumbnail during a zoom", () => {
   beforeEach(() => {
-    vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"] });
+    vi.useFakeTimers({
+      toFake: ["setTimeout", "clearTimeout", "requestAnimationFrame", "cancelAnimationFrame"],
+    });
     vi.mocked(decodeVideoThumbnail).mockResolvedValue({
       value: { kind: "filmstrip", urls: ["blob:a", "blob:b"], aspect: 16 / 9 },
       weight: 256,
@@ -308,6 +313,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -326,6 +332,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       root.render(clip(undefined, "overscan"));
       await Promise.resolve();
     });
@@ -371,6 +378,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -411,6 +419,7 @@ describe("VideoThumbnail during a zoom", () => {
     await render(440);
     await act(async () => {
       reportResize(50, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -419,6 +428,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -431,6 +441,7 @@ describe("VideoThumbnail during a zoom", () => {
     await act(async () => {
       markTimelineMotion();
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     expect(decodeVideoThumbnail).not.toHaveBeenCalled();

package/src/player/hooks/timelineSyncHydration.ts

@@ -13,6 +13,7 @@ import { createTimelineDomNodeResolver, findClipElementById } from "../lib/timel
 import { usePlayerStore } from "../store/playerStore";
 import type { TimelineElement, DomClipChild, SubCompositionHostState } from "../store/playerStore";
 import { resolveCssStackingContextId } from "@hyperframes/core/runtime/stacking-context";
+import { LOOP_INFLATED_TIMELINE_SECONDS } from "@hyperframes/core/runtime/composition-length";
 import type { ClipTree } from "@hyperframes/core/runtime/clipTree";
 import { HF_AUDIO_GROUP_ATTR } from "@hyperframes/core/audio-groups";
 import { groupInfoFor } from "../lib/timelineGroupInfo";
@@ -31,7 +32,7 @@ import { inspectStudioRuntimeMessage } from "../lib/runtimeProtocol";
 
 /** Reject non-finite, non-positive, and absurdly large (loop-inflated) values. */
 export function sanitizeDurationSeconds(value: number): number {
-  return Number.isFinite(value) && value > 0 && value < 7200 ? value : 0;
+  return Number.isFinite(value) && value > 0 && value < LOOP_INFLATED_TIMELINE_SECONDS ? value : 0;
 }
 
 /**

package/src/utils/authoredSource.test.ts

@@ -0,0 +1,25 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import {
+  PREVIEW_RASTER_ATTR,
+  STUDIO_PREVIEW_LAZY_ATTR,
+} from "@hyperframes/core/studio-preview-mark";
+import { liveMarkupWithoutPreviewMarks } from "./authoredSource";
+
+describe("liveMarkupWithoutPreviewMarks", () => {
+  it("drops the preview's raster mark from an element and its descendants", () => {
+    const live = document.createElement("div");
+    live.innerHTML = `<div class="line" ${PREVIEW_RASTER_ATTR}><span class="word">LOUD</span></div>`;
+    live.setAttribute(PREVIEW_RASTER_ATTR, "");
+    expect(liveMarkupWithoutPreviewMarks(live)).toBe(
+      '<div><div class="line"><span class="word">LOUD</span></div></div>',
+    );
+    expect(live.hasAttribute(PREVIEW_RASTER_ATTR)).toBe(true);
+  });
+
+  it("gives a lazily previewed image back its authored loading", () => {
+    const live = document.createElement("div");
+    live.innerHTML = `<img src="a.png" loading="lazy" ${STUDIO_PREVIEW_LAZY_ATTR}>`;
+    expect(liveMarkupWithoutPreviewMarks(live)).toBe('<div><img src="a.png"></div>');
+  });
+});

package/src/utils/authoredSource.ts

@@ -1,7 +1,7 @@
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
 import {
+  PREVIEW_ONLY_ATTRS,
   STUDIO_PREVIEW_LAZY_ATTR,
-  STUDIO_PREVIEW_UPCOMING_ATTR,
 } from "@hyperframes/core/studio-preview-mark";
 
 // Stamped as the preview stamps the files it serves, so a live element's hf-id finds its source.
@@ -98,10 +98,8 @@ export function authoredMarkup(authored: Element, live: Element, sourceFile: str
 export function liveMarkupWithoutPreviewMarks(live: Element): string {
   const copy = live.cloneNode(true) as Element;
   for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
-    el.removeAttribute(STUDIO_PREVIEW_UPCOMING_ATTR);
-    if (!el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) continue;
-    el.removeAttribute("loading");
-    el.removeAttribute(STUDIO_PREVIEW_LAZY_ATTR);
+    if (el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) el.removeAttribute("loading");
+    for (const attr of PREVIEW_ONLY_ATTRS) el.removeAttribute(attr);
   }
   return copy.outerHTML;
 }

package/src/utils/rounding.ts

@@ -8,6 +8,13 @@ export function roundToLayoutPx(val: number): number {
   return Math.round(val);
 }
 
+export function roundToLayoutSize(size: { width: number; height: number }) {
+  return {
+    width: roundToLayoutPx(Math.max(1, size.width)),
+    height: roundToLayoutPx(Math.max(1, size.height)),
+  };
+}
+
 /** Round to 2 decimal places (centisecond precision for timeline values). */
 export function roundToCenti(val: number): number {
   return Math.round(val * 100) / 100;

package/dist/chunk-LOVBLSMR.js.map

@@ -1 +0,0 @@
-{"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 type { CnFunction } from \"cn\";\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: CnFunction = 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/** Every floating list, menu, popover and tooltip sits on this layer, above panel chrome and modals. */\nexport const 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, POPUP_LAYER } 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  disabled?: boolean;\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({\n  label,\n  children,\n  delay = 400,\n  side = \"top\",\n  disabled = false,\n}: 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} disabled={disabled}>\n      <BaseTooltip.Trigger delay={delay} render={<span ref={boxRef} className=\"contents\" />}>\n        {cloneElement(children, {\n          \"aria-describedby\": open && !disabled ? 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={POPUP_LAYER}\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 { POPUP_LAYER, 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={POPUP_LAYER}\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, POPUP_LAYER } 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} className={POPUP_LAYER}>\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"]}