@hyperframes/studio 0.8.81 → 0.8.83

package/dist/chunk-QZ6HNNFG.js

@@ -0,0 +1,934 @@
+// src/components/ui/cn.ts
+import { createCn } from "cn/config";
+var isTypeStep = (value) => /^step-\d+$/.test(value);
+var isControlSize = (value) => /^ctl(-sm|-lg)?$/.test(value);
+var cn = createCn({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: [isTypeStep] }],
+      h: [{ h: [isControlSize] }],
+      w: [{ w: [isControlSize] }],
+      size: [{ size: [isControlSize] }],
+      "min-h": [{ "min-h": [isControlSize] }],
+      "min-w": [{ "min-w": [isControlSize] }]
+    }
+  }
+});
+
+// src/components/ui/Button.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonBase = cn(
+  "inline-flex items-center justify-center select-none cursor-pointer whitespace-nowrap",
+  "transition-[background-color,border-color,color,filter,transform] ease-out-quint duration-press",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "outline-hidden",
+  "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent",
+  "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"
+);
+var buttonVariants = {
+  primary: cn(
+    "bg-accent text-bg-0 font-semibold",
+    "enabled:hover:brightness-110 data-[preview-state=hover]:brightness-110",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]"
+  ),
+  secondary: cn(
+    "bg-transparent text-text-1 font-medium border border-border-strong",
+    "enabled:hover:bg-hover enabled:hover:text-text-0 data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]"
+  ),
+  danger: cn(
+    "bg-danger text-text-0 font-medium",
+    "enabled:hover:brightness-110 data-[preview-state=hover]:brightness-110",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]"
+  ),
+  ghost: cn(
+    "bg-transparent text-text-2 font-medium",
+    "enabled:hover:bg-hover enabled:hover:text-text-0 data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]"
+  )
+};
+var buttonSizes = {
+  sm: "h-ctl-sm px-2 gap-1 rounded-sm text-step-11",
+  md: "h-ctl px-3 gap-1.5 rounded-md text-step-12",
+  lg: "h-ctl-lg px-4 gap-2 rounded-md text-step-13"
+};
+function Spinner() {
+  return /* @__PURE__ */ jsxs("svg", { className: "animate-spin size-3.5", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      }
+    )
+  ] });
+}
+var Button = forwardRef(
+  ({ variant = "secondary", size = "md", loading, icon, children, className, disabled, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    let leading = null;
+    if (loading) leading = /* @__PURE__ */ jsx(Spinner, {});
+    else if (icon) leading = /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon });
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled || void 0,
+        className: cn(buttonBase, buttonVariants[variant], buttonSizes[size], className),
+        ...props,
+        children: [
+          leading,
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/IconButton.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var iconSizeStyles = {
+  sm: "size-ctl-sm rounded-sm",
+  md: "size-ctl rounded-md",
+  lg: "size-ctl-lg rounded-md"
+};
+var IconButton = forwardRef2(
+  ({ icon, size = "md", variant = "ghost", className, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref,
+        disabled,
+        "aria-disabled": disabled || void 0,
+        className: cn(buttonBase, buttonVariants[variant], iconSizeStyles[size], className),
+        ...props,
+        children: icon
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/ui/Tabs.tsx
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Tabs(props) {
+  return /* @__PURE__ */ jsx3(BaseTabs.Root, { ...props });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    BaseTabs.List,
+    {
+      activateOnFocus: true,
+      className: cn("inline-flex items-center gap-0.5 rounded-lg bg-surface-alt p-1", className),
+      ...props
+    }
+  );
+}
+function Tab({ value, className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    BaseTabs.Tab,
+    {
+      value,
+      "data-tab-id": value,
+      className: cn(
+        "inline-flex h-ctl-sm cursor-pointer select-none items-center justify-center rounded-sm px-2.5",
+        "text-step-11 font-semibold whitespace-nowrap text-text-3",
+        "transition-[background-color,color] ease-out-quint duration-hover",
+        "hover:text-text-1 data-[preview-state=hover]:text-text-1",
+        "aria-selected:bg-hover aria-selected:text-text-0",
+        "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent",
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(BaseTabs.Panel, { className: cn("outline-hidden", className), ...props });
+}
+
+// src/components/ui/HyperframesMark.tsx
+import { useId } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function HyperframesMark({ viewBox = "0 0 100 100", ...props }) {
+  const gradientId = useId();
+  const leftGradient = `${gradientId}-left`;
+  const rightGradient = `${gradientId}-right`;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4("g", { transform: "translate(50 50)", opacity: ".92", children: /* @__PURE__ */ jsxs2("g", { transform: "translate(-50 -50)", children: [
+          /* @__PURE__ */ jsx4(
+            "path",
+            {
+              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",
+              fill: `url(#${leftGradient})`
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "path",
+            {
+              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",
+              fill: `url(#${rightGradient})`
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs2("defs", { children: [
+          /* @__PURE__ */ jsxs2(
+            "linearGradient",
+            {
+              id: leftGradient,
+              x1: "48.5676",
+              y1: "25",
+              x2: "44.7804",
+              y2: "71.9384",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx4("stop", { stopColor: "#06E3FA" }),
+                /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "#4FDB5E" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "linearGradient",
+            {
+              id: rightGradient,
+              x1: "54.8282",
+              y1: "73.8392",
+              x2: "72.0989",
+              y2: "32.8932",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx4("stop", { stopColor: "#06E3FA" }),
+                /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "#4FDB5E" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ui/HyperframesLoader.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function HyperframesLoader({
+  title,
+  detail,
+  mono,
+  size = 64,
+  progress
+}) {
+  const boundedProgress = typeof progress === "number" && Number.isFinite(progress) ? Math.min(1, Math.max(0, progress)) : void 0;
+  const markFrameSize = Math.round(size * 1.16);
+  return /* @__PURE__ */ jsxs3("div", { className: "hf-loader", role: "status", draggable: false, children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "hf-loader-mark-frame",
+        style: { width: markFrameSize, height: markFrameSize },
+        draggable: false,
+        children: /* @__PURE__ */ jsx5(HyperframesMark, { className: "hf-loader-mark", width: size, height: size })
+      }
+    ),
+    /* @__PURE__ */ jsx5("div", { className: "hf-loader-title", children: title }),
+    detail && /* @__PURE__ */ jsx5("div", { className: "hf-loader-detail", children: detail }),
+    boundedProgress !== void 0 && /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "hf-loader-progress",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(boundedProgress * 100),
+        children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "hf-loader-progress__fill",
+            style: { transform: `scaleX(${boundedProgress})` }
+          }
+        )
+      }
+    ),
+    mono && /* @__PURE__ */ jsx5("div", { className: "hf-loader-mono", children: mono })
+  ] });
+}
+
+// src/components/ui/Menu.tsx
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIDE_OFFSET = 6;
+var VIEWPORT_MARGIN = 8;
+function floatingMotion(openDuration) {
+  return cn(
+    "origin-[var(--transform-origin)] outline-hidden",
+    "transition-[opacity,transform] ease-out-quint",
+    openDuration,
+    "data-[ending-style]:duration-close data-[ending-style]:ease-in",
+    "data-[starting-style]:[opacity:var(--popup-enter-opacity)]",
+    "data-[starting-style]:[scale:var(--popup-enter-scale)]",
+    "data-[ending-style]:opacity-0"
+  );
+}
+var popupSurface = cn(
+  "rounded-lg border border-border-input bg-surface",
+  floatingMotion("duration-open"),
+  "data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100"
+);
+var POPUP_LAYER = "z-200";
+var menuPopup = cn(popupSurface, "min-w-36 p-1 shadow-menu");
+var itemBase = cn(
+  "flex cursor-default select-none items-center justify-between gap-6 rounded-sm px-2 py-1.5",
+  "text-step-11 whitespace-nowrap text-text-1",
+  "outline-hidden transition-colors ease-out-quint duration-hover",
+  "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
+  "data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-40"
+);
+var itemDanger = cn("text-danger data-[highlighted]:bg-danger/15 data-[highlighted]:text-danger");
+function Menu({
+  trigger,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = SIDE_OFFSET,
+  container,
+  className,
+  "aria-label": ariaLabel,
+  "data-preview-state": previewState,
+  ...root
+}) {
+  return /* @__PURE__ */ jsxs4(BaseMenu.Root, { ...root, children: [
+    /* @__PURE__ */ jsx6(BaseMenu.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx6(BaseMenu.Portal, { container, children: /* @__PURE__ */ jsx6(
+      BaseMenu.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding: VIEWPORT_MARGIN,
+        className: POPUP_LAYER,
+        children: /* @__PURE__ */ jsx6(
+          BaseMenu.Popup,
+          {
+            "aria-label": ariaLabel,
+            "data-preview-state": previewState,
+            className: cn(menuPopup, className),
+            children
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function ContextMenu({
+  trigger,
+  children,
+  container,
+  className,
+  "aria-label": ariaLabel,
+  "data-preview-state": previewState,
+  ...root
+}) {
+  return /* @__PURE__ */ jsxs4(BaseContextMenu.Root, { ...root, children: [
+    /* @__PURE__ */ jsx6(BaseContextMenu.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx6(BaseContextMenu.Portal, { container, children: /* @__PURE__ */ jsx6(BaseContextMenu.Positioner, { collisionPadding: VIEWPORT_MARGIN, className: POPUP_LAYER, children: /* @__PURE__ */ jsx6(
+      BaseContextMenu.Popup,
+      {
+        "aria-label": ariaLabel,
+        "data-preview-state": previewState,
+        className: cn(menuPopup, className),
+        children
+      }
+    ) }) })
+  ] });
+}
+function MenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: cn("shrink-0 font-mono text-step-10 tabular-nums text-text-4", className),
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+}
+function MenuItem({ shortcut, tone, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs4(BaseMenu.Item, { className: cn(itemBase, tone === "danger" && itemDanger, className), ...props, children: [
+    /* @__PURE__ */ jsx6("span", { className: "truncate", children }),
+    shortcut ? /* @__PURE__ */ jsx6(MenuShortcut, { children: shortcut }) : null
+  ] });
+}
+function MenuRadioGroup(props) {
+  return /* @__PURE__ */ jsx6(BaseMenu.RadioGroup, { ...props });
+}
+function MenuRadioItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs4(BaseMenu.RadioItem, { className: cn(itemBase, className), ...props, children: [
+    /* @__PURE__ */ jsx6("span", { className: "truncate", children }),
+    /* @__PURE__ */ jsx6("span", { className: "flex size-3 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx6(BaseMenu.RadioItemIndicator, { className: "size-1.5 rounded-full bg-accent" }) })
+  ] });
+}
+function MenuCheckboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(BaseMenu.CheckboxItem, { className: cn(itemBase, className), ...props, children: [
+    /* @__PURE__ */ jsx6("span", { className: "truncate", children }),
+    /* @__PURE__ */ jsx6("span", { className: "flex size-3 shrink-0 items-center justify-center text-accent", children: /* @__PURE__ */ jsx6(BaseMenu.CheckboxItemIndicator, { children: "\u2713" }) })
+  ] });
+}
+function MenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(BaseMenu.Separator, { className: cn("my-1 h-px bg-hairline", className), ...props });
+}
+
+// src/components/ui/Tooltip.tsx
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { cloneElement, useId as useId2, useRef, useState } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var SIDE_OFFSET2 = 6;
+var VIEWPORT_MARGIN2 = 8;
+function Tooltip({ label, children, delay = 400, side = "top" }) {
+  const [open, setOpen] = useState(false);
+  const boxRef = useRef(null);
+  const tooltipId = useId2();
+  return /* @__PURE__ */ jsxs5(BaseTooltip.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay, render: /* @__PURE__ */ jsx7("span", { ref: boxRef, className: "contents" }), children: cloneElement(children, {
+      "aria-describedby": open ? tooltipId : children.props["aria-describedby"]
+    }) }),
+    /* @__PURE__ */ jsx7(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx7(
+      BaseTooltip.Positioner,
+      {
+        anchor: () => boxRef.current?.firstElementChild ?? null,
+        side,
+        sideOffset: SIDE_OFFSET2,
+        collisionPadding: VIEWPORT_MARGIN2,
+        className: "z-200",
+        children: /* @__PURE__ */ jsx7(
+          BaseTooltip.Popup,
+          {
+            id: tooltipId,
+            role: "tooltip",
+            className: cn(
+              "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",
+              floatingMotion("duration-tooltip")
+            ),
+            children: label
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+// src/components/ui/Popover.tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var SIDE_OFFSET3 = 6;
+var VIEWPORT_MARGIN3 = 8;
+function Popover({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  sideOffset = SIDE_OFFSET3,
+  container,
+  className,
+  initialFocus,
+  "aria-label": ariaLabel,
+  "data-preview-state": previewState,
+  ...root
+}) {
+  return /* @__PURE__ */ jsxs6(BasePopover.Root, { ...root, children: [
+    /* @__PURE__ */ jsx8(BasePopover.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx8(BasePopover.Portal, { container, children: /* @__PURE__ */ jsx8(
+      BasePopover.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding: VIEWPORT_MARGIN3,
+        className: "z-200",
+        children: /* @__PURE__ */ jsx8(
+          BasePopover.Popup,
+          {
+            "aria-label": ariaLabel,
+            initialFocus,
+            "data-preview-state": previewState,
+            className: cn(popupSurface, "p-3 text-step-11 text-text-1 shadow-popover", className),
+            children
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+// src/components/ui/Input.tsx
+import { Input as BaseInput } from "@base-ui/react/input";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var fieldBase = cn(
+  "flex min-w-0 items-center gap-1.5 h-ctl px-2 rounded-md",
+  "bg-input border border-border-input text-step-11 font-medium text-text-1",
+  "transition-[border-color,background-color] ease-standard duration-focus",
+  "hover:border-border-strong data-[preview-state=hover]:border-border-strong",
+  "outline-hidden",
+  "focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent",
+  "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",
+  // `aria-invalid` is not one of Tailwind's built-in aria variants, so the
+  // arbitrary form is the one that compiles. The token gate would have caught
+  // the bare `aria-invalid:` spelling as a class that resolves to nothing.
+  "aria-[invalid]:border-danger",
+  "has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed"
+);
+var fieldText = cn(
+  "min-w-0 w-full bg-transparent text-inherit outline-hidden",
+  "placeholder:text-text-5 disabled:cursor-not-allowed"
+);
+function Input({
+  value,
+  onCommit,
+  onTrack,
+  invalid,
+  disabled,
+  className,
+  "data-preview-state": previewState,
+  ...props
+}) {
+  const [draft, setDraft] = useState2(value);
+  const valueRef = useRef2(value);
+  valueRef.current = value;
+  const dirtyRef = useRef2(false);
+  useEffect(() => {
+    if (!dirtyRef.current) setDraft(value);
+  }, [value]);
+  const commit = (next) => {
+    dirtyRef.current = false;
+    if (next === valueRef.current) return;
+    onCommit(next);
+    onTrack?.();
+  };
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn(fieldBase, className),
+      "aria-invalid": invalid || void 0,
+      "data-preview-state": previewState,
+      children: /* @__PURE__ */ jsx9(
+        BaseInput,
+        {
+          value: draft,
+          disabled,
+          "aria-invalid": invalid || void 0,
+          className: fieldText,
+          onValueChange: (next) => {
+            dirtyRef.current = true;
+            setDraft(next);
+          },
+          onBlur: () => commit(draft),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              commit(draft);
+              return;
+            }
+            if (event.key === "Escape") {
+              event.preventDefault();
+              event.stopPropagation();
+              dirtyRef.current = false;
+              setDraft(valueRef.current);
+              event.currentTarget.blur();
+            }
+          },
+          ...props
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/NumberField.tsx
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function NumberField({
+  label,
+  value,
+  onCommit,
+  onTrack,
+  unit,
+  min,
+  max,
+  step,
+  disabled,
+  className,
+  "data-preview-state": previewState
+}) {
+  const [draft, setDraft] = useState3(value);
+  const [invalid, setInvalid] = useState3(false);
+  const inputRef = useRef3(null);
+  const committedRef = useRef3(value);
+  const valueRef = useRef3(value);
+  valueRef.current = value;
+  useEffect2(() => {
+    committedRef.current = value;
+    setDraft(value);
+    setInvalid(false);
+  }, [value]);
+  const commit = (next) => {
+    if (next === null || !Number.isFinite(next)) {
+      setInvalid(true);
+      return;
+    }
+    setInvalid(false);
+    if (next === committedRef.current) return;
+    committedRef.current = next;
+    onCommit(next);
+    onTrack?.();
+  };
+  const commitFromText = () => {
+    const text = inputRef.current?.value.trim() ?? "";
+    commit(text === "" ? null : Number(text));
+  };
+  return /* @__PURE__ */ jsx10(
+    BaseNumberField.Root,
+    {
+      value: draft,
+      min,
+      max,
+      step,
+      disabled,
+      onValueChange: (next) => {
+        setDraft(next);
+        if (next !== null) setInvalid(false);
+      },
+      onValueCommitted: (next) => commit(next),
+      children: /* @__PURE__ */ jsxs7(
+        BaseNumberField.Group,
+        {
+          className: cn(fieldBase, className),
+          "aria-invalid": invalid || void 0,
+          "data-preview-state": previewState,
+          children: [
+            /* @__PURE__ */ jsx10(
+              BaseNumberField.Input,
+              {
+                ref: inputRef,
+                "aria-label": label,
+                "aria-invalid": invalid || void 0,
+                className: cn(fieldText, "tabular-nums"),
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter") return;
+                  event.preventDefault();
+                  commitFromText();
+                },
+                onBlur: () => {
+                  const text = inputRef.current?.value.trim() ?? "";
+                  if (text === "" || !Number.isFinite(Number(text))) setInvalid(true);
+                }
+              }
+            ),
+            unit && /* @__PURE__ */ jsx10("span", { className: "shrink-0 select-none text-step-10 text-text-4", "aria-hidden": "true", children: unit })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/Select.tsx
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Select({
+  label,
+  value,
+  options,
+  onCommit,
+  onTrack,
+  disabled,
+  className,
+  "data-preview-state": previewState
+}) {
+  return /* @__PURE__ */ jsxs8(
+    BaseSelect.Root,
+    {
+      value,
+      disabled,
+      items: options,
+      onValueChange: (next) => {
+        const chosen = String(next);
+        if (chosen === value) return;
+        onCommit(chosen);
+        onTrack?.();
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          BaseSelect.Trigger,
+          {
+            "aria-label": label,
+            className: cn(
+              fieldBase,
+              "w-full cursor-pointer justify-between text-left",
+              "data-[popup-open]:border-border-strong",
+              className
+            ),
+            "data-preview-state": previewState,
+            children: [
+              /* @__PURE__ */ jsx11(BaseSelect.Value, { className: "truncate" }),
+              /* @__PURE__ */ jsx11(BaseSelect.Icon, { className: "shrink-0 text-text-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx11("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", children: /* @__PURE__ */ jsx11(
+                "path",
+                {
+                  d: "M1 1L4 4L7 1",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11(BaseSelect.Portal, { children: /* @__PURE__ */ jsx11(BaseSelect.Positioner, { sideOffset: 4, alignItemWithTrigger: false, children: /* @__PURE__ */ jsx11(
+          BaseSelect.Popup,
+          {
+            className: cn(
+              "min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu",
+              floatingMotion("duration-open")
+            ),
+            children: /* @__PURE__ */ jsx11(BaseSelect.List, { children: options.map((option) => /* @__PURE__ */ jsx11(
+              BaseSelect.Item,
+              {
+                value: option.value,
+                disabled: option.disabled,
+                className: cn(
+                  "flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5",
+                  "text-step-11 text-text-2 outline-hidden",
+                  "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
+                  "data-[selected]:text-text-0",
+                  "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40"
+                ),
+                children: /* @__PURE__ */ jsx11(BaseSelect.ItemText, { className: "truncate", children: option.label })
+              },
+              option.value
+            )) })
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Slider.tsx
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var first = (next) => Array.isArray(next) ? next[0] : next;
+function Slider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onPreview,
+  onCommit,
+  onTrack,
+  disabled,
+  className,
+  "data-preview-state": previewState
+}) {
+  const [draft, setDraft] = useState4(value);
+  const draggingRef = useRef4(false);
+  const abortedRef = useRef4(false);
+  const dragStartRef = useRef4(value);
+  const committedRef = useRef4(value);
+  const valueRef = useRef4(value);
+  valueRef.current = value;
+  useEffect3(() => {
+    if (draggingRef.current) return;
+    committedRef.current = value;
+    setDraft(value);
+  }, [value]);
+  const commit = (next) => {
+    if (next === committedRef.current) return;
+    committedRef.current = next;
+    onCommit(next);
+  };
+  const abort = () => {
+    if (!draggingRef.current) return;
+    abortedRef.current = true;
+    const start = dragStartRef.current;
+    setDraft(start);
+    onPreview?.(start);
+    commit(start);
+  };
+  return /* @__PURE__ */ jsx12(
+    BaseSlider.Root,
+    {
+      value: draft,
+      min,
+      max,
+      step,
+      disabled,
+      onValueChange: (next, details) => {
+        if (abortedRef.current) {
+          details.cancel();
+          return;
+        }
+        const n = first(next);
+        setDraft(n);
+        onPreview?.(n);
+      },
+      onValueCommitted: (next) => {
+        draggingRef.current = false;
+        if (abortedRef.current) {
+          abortedRef.current = false;
+          return;
+        }
+        commit(first(next));
+        onTrack?.();
+      },
+      className: cn("flex min-w-0 items-center", className),
+      "data-preview-state": previewState,
+      children: /* @__PURE__ */ jsx12(
+        BaseSlider.Control,
+        {
+          "data-slider-control": "true",
+          className: "flex h-6 w-full min-w-0 touch-none select-none items-center",
+          onPointerDown: () => {
+            draggingRef.current = true;
+            abortedRef.current = false;
+            dragStartRef.current = valueRef.current;
+          },
+          onContextMenu: (event) => {
+            if (!draggingRef.current) return;
+            event.preventDefault();
+            abort();
+          },
+          onKeyDown: (event) => {
+            if (event.key !== "Escape" || !draggingRef.current) return;
+            event.preventDefault();
+            abort();
+          },
+          children: /* @__PURE__ */ jsxs9(BaseSlider.Track, { className: "h-0.5 w-full rounded-full bg-hover", children: [
+            /* @__PURE__ */ jsx12(BaseSlider.Indicator, { className: "rounded-full bg-text-5" }),
+            /* @__PURE__ */ jsx12(
+              BaseSlider.Thumb,
+              {
+                "aria-label": label,
+                className: cn(
+                  // The ring separates the thumb from the track behind it. A drop
+                  // shadow would need a raw colour literal, which R5 does not allow
+                  // outside the token file, and no shadow token fits a 10px dot.
+                  "size-2.5 rounded-full bg-text-0 ring-2 ring-bg-1",
+                  "cursor-grab active:cursor-grabbing data-[preview-state=active]:cursor-grabbing",
+                  "hover:scale-110 data-[preview-state=hover]:scale-110",
+                  "transition-transform ease-standard duration-hover",
+                  "has-[:focus-visible]:outline-solid has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent",
+                  "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"
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/Toggle.tsx
+import { Switch } from "@base-ui/react/switch";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Toggle({
+  label,
+  checked,
+  onCommit,
+  onTrack,
+  disabled,
+  className,
+  "data-preview-state": previewState
+}) {
+  return /* @__PURE__ */ jsx13(
+    Switch.Root,
+    {
+      "aria-label": label,
+      checked,
+      disabled,
+      onCheckedChange: (next) => {
+        onCommit(next);
+        onTrack?.();
+      },
+      "data-preview-state": previewState,
+      className: cn(
+        "relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full p-0.5",
+        "border border-border-input bg-input",
+        "transition-[background-color,border-color] ease-standard duration-press",
+        "hover:border-border-strong data-[preview-state=hover]:border-border-strong",
+        "data-[checked]:border-accent data-[checked]:bg-accent",
+        "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent",
+        "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",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        className
+      ),
+      children: /* @__PURE__ */ jsx13(
+        Switch.Thumb,
+        {
+          className: cn(
+            "size-3 rounded-full bg-text-3",
+            "transition-[transform,background-color] ease-standard duration-press",
+            "data-[checked]:translate-x-3 data-[checked]:bg-bg-0"
+          )
+        }
+      )
+    }
+  );
+}
+
+export {
+  cn,
+  buttonBase,
+  buttonVariants,
+  buttonSizes,
+  Button,
+  IconButton,
+  Tabs,
+  TabsList,
+  Tab,
+  TabPanel,
+  HyperframesMark,
+  HyperframesLoader,
+  popupSurface,
+  Menu,
+  ContextMenu,
+  MenuShortcut,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuCheckboxItem,
+  MenuSeparator,
+  Tooltip,
+  Popover,
+  fieldBase,
+  fieldText,
+  Input,
+  NumberField,
+  Select,
+  Slider,
+  Toggle
+};
+//# sourceMappingURL=chunk-QZ6HNNFG.js.map