hyperframes 0.8.145 → 0.8.146

package/dist/studio/chunk-Y2OHHNM2.js

@@ -1,970 +0,0 @@
-// 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-on-accent font-semibold",
-    "enabled:hover:bg-accent-hover data-[preview-state=hover]:bg-accent-hover",
-    "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-on-danger font-medium",
-    "enabled:hover:brightness-95 data-[preview-state=hover]:brightness-95",
-    "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 { useRef } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var CONTENTS = { display: "contents" };
-function useInlinePortal(container) {
-  const host = useRef(null);
-  if (container !== null) return { host: null, portal: { container } };
-  return {
-    host: /* @__PURE__ */ jsx6("span", { ref: host, style: CONTENTS }),
-    portal: { container: host, style: CONTENTS }
-  };
-}
-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-ink data-[highlighted]:bg-danger/15 data-[highlighted]:text-danger-ink"
-);
-function Menu({
-  trigger,
-  children,
-  side = "bottom",
-  align = "start",
-  sideOffset = SIDE_OFFSET,
-  container,
-  className,
-  "aria-label": ariaLabel,
-  "data-preview-state": previewState,
-  ...root
-}) {
-  const inline = useInlinePortal(container);
-  return /* @__PURE__ */ jsxs4(BaseMenu.Root, { ...root, children: [
-    /* @__PURE__ */ jsx6(BaseMenu.Trigger, { render: trigger }),
-    inline.host,
-    /* @__PURE__ */ jsx6(BaseMenu.Portal, { ...inline.portal, 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
-}) {
-  const inline = useInlinePortal(container);
-  return /* @__PURE__ */ jsxs4(BaseContextMenu.Root, { ...root, children: [
-    /* @__PURE__ */ jsx6(BaseContextMenu.Trigger, { render: trigger }),
-    inline.host,
-    /* @__PURE__ */ jsx6(BaseContextMenu.Portal, { ...inline.portal, 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-ink", 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 as useRef2, 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",
-  disabled = false
-}) {
-  const [open, setOpen] = useState(false);
-  const boxRef = useRef2(null);
-  const tooltipId = useId2();
-  return /* @__PURE__ */ jsxs5(BaseTooltip.Root, { open, onOpenChange: setOpen, disabled, children: [
-    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay, render: /* @__PURE__ */ jsx7("span", { ref: boxRef, className: "contents" }), children: cloneElement(children, {
-      "aria-describedby": open && !disabled ? 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: POPUP_LAYER,
-        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;
-var ARROW_PX = 7;
-var ARROW_CORNER_CLEARANCE = 10;
-var arrowPlace = cn(
-  "data-[side=bottom]:-top-[7px] data-[side=top]:-bottom-[7px] data-[side=top]:rotate-180",
-  "data-[side=left]:-right-[10px] data-[side=left]:rotate-90",
-  "data-[side=right]:-left-[10px] data-[side=right]:-rotate-90"
-);
-function Popover({
-  trigger,
-  children,
-  side = "bottom",
-  align = "center",
-  arrow = false,
-  sideOffset = arrow ? SIDE_OFFSET3 + ARROW_PX : SIDE_OFFSET3,
-  container,
-  className,
-  initialFocus,
-  "aria-label": ariaLabel,
-  "data-preview-state": previewState,
-  ...root
-}) {
-  const inline = useInlinePortal(container);
-  return /* @__PURE__ */ jsxs6(BasePopover.Root, { ...root, children: [
-    /* @__PURE__ */ jsx8(BasePopover.Trigger, { render: trigger }),
-    inline.host,
-    /* @__PURE__ */ jsx8(BasePopover.Portal, { ...inline.portal, children: /* @__PURE__ */ jsx8(
-      BasePopover.Positioner,
-      {
-        side,
-        align,
-        sideOffset,
-        collisionPadding: VIEWPORT_MARGIN3,
-        arrowPadding: ARROW_CORNER_CLEARANCE,
-        className: POPUP_LAYER,
-        children: /* @__PURE__ */ jsxs6(
-          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: [
-              arrow && /* @__PURE__ */ jsx8(BasePopover.Arrow, { className: arrowPlace, children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "8", viewBox: "0 0 14 8", "aria-hidden": "true", className: "block", children: /* @__PURE__ */ jsx8("path", { d: "M0 8 L7 1 L14 8", className: "fill-surface stroke-border-input" }) }) }),
-              children
-            ]
-          }
-        )
-      }
-    ) })
-  ] });
-}
-
-// src/components/ui/Input.tsx
-import { Input as BaseInput } from "@base-ui/react/input";
-import { useEffect, useRef as useRef3, 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-ink",
-  "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 = useRef3(value);
-  valueRef.current = value;
-  const dirtyRef = useRef3(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 useRef4, 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 = useRef4(null);
-  const committedRef = useRef4(value);
-  const valueRef = useRef4(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, className: POPUP_LAYER, 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 useRef5, 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 = useRef5(false);
-  const abortedRef = useRef5(false);
-  const dragStartRef = useRef5(value);
-  const committedRef = useRef5(value);
-  const valueRef = useRef5(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-Y2OHHNM2.js.map