@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/blocks/navigation-progress-playground.cjs

@@ -0,0 +1,735 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/blocks/navigation-progress-playground.tsx
+var navigation_progress_playground_exports = {};
+__export(navigation_progress_playground_exports, {
+  NavigationProgressPlayground: () => NavigationProgressPlayground
+});
+module.exports = __toCommonJS(navigation_progress_playground_exports);
+var import_button = require("../ui/button.js");
+var import_progress = require("../ui/progress.js");
+var import_tabs = require("../ui/tabs.js");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/blocks/navigation-progress-playground.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var presets = {
+  current: {
+    description: "Current PublishOS navigation-progress settings.",
+    label: "Current",
+    settings: {
+      initialProgress: 0,
+      targetProgress: 98,
+      fastPhaseEnd: 38,
+      minDuration: 48,
+      maxDuration: 1800,
+      exitDuration: 188,
+      timeout: 8e3,
+      sampleMinDuration: 700,
+      sampleMaxDuration: 1800,
+      settleDelay: 100,
+      transitionDuration: 320,
+      curvePower: 3,
+      height: 2,
+      fill: "var(--progress-bar-fill, var(--accent-1, #111111))",
+      track: "var(--progress-bar-background, transparent)",
+      progressEase: "cubic-bezier(0.21, 0.65, 0.35, 1)",
+      exitEase: "cubic-bezier(0.55, 0.06, 0.68, 0.19)",
+      transformOrigin: "left",
+      exitTransformOrigin: "right"
+    }
+  },
+  aave: {
+    description: "Aave docs inspired: thin, calm, left-origin purple bar.",
+    label: "Aave",
+    settings: {
+      initialProgress: 0,
+      targetProgress: 92,
+      fastPhaseEnd: 38,
+      minDuration: 140,
+      maxDuration: 1800,
+      exitDuration: 260,
+      timeout: 7e3,
+      sampleMinDuration: 750,
+      sampleMaxDuration: 1900,
+      settleDelay: 80,
+      transitionDuration: 320,
+      curvePower: 2.2,
+      height: 2,
+      fill: "color(display-p3 0.5960784314 0.5882352941 1 / 1)",
+      track: "transparent",
+      progressEase: "cubic-bezier(0.21, 0.65, 0.35, 1)",
+      exitEase: "cubic-bezier(0.55, 0.06, 0.68, 0.19)",
+      transformOrigin: "left",
+      exitTransformOrigin: "right"
+    }
+  },
+  tuned: {
+    description: "A snappier PublishOS candidate with a shorter long tail.",
+    label: "Tuned",
+    settings: {
+      initialProgress: 8,
+      targetProgress: 94,
+      fastPhaseEnd: 34,
+      minDuration: 90,
+      maxDuration: 4200,
+      exitDuration: 180,
+      timeout: 8e3,
+      sampleMinDuration: 550,
+      sampleMaxDuration: 1600,
+      settleDelay: 70,
+      transitionDuration: 180,
+      curvePower: 2.6,
+      height: 2,
+      fill: "var(--progress-bar-fill, var(--accent-1, #111111))",
+      track: "var(--progress-bar-background, transparent)",
+      progressEase: "cubic-bezier(0.12, 0.72, 0, 1)",
+      exitEase: "cubic-bezier(0.2, 0, 0, 1)",
+      transformOrigin: "left",
+      exitTransformOrigin: "right"
+    }
+  }
+};
+var presetOrder = ["current", "aave", "tuned"];
+function clamp({
+  max,
+  min,
+  value
+}) {
+  return Math.min(max, Math.max(min, value));
+}
+function buildOutput(settings) {
+  return `export const navigationProgressConfig = {
+  initialProgress: ${settings.initialProgress},
+  targetProgress: ${settings.targetProgress},
+  fastPhaseEnd: ${settings.fastPhaseEnd},
+  minDuration: ${settings.minDuration},
+  maxDuration: ${settings.maxDuration},
+  exitDuration: ${settings.exitDuration},
+  timeout: ${settings.timeout},
+};
+
+const sampleDuration =
+  ${settings.sampleMinDuration} +
+  Math.random() * (${settings.sampleMaxDuration} - ${settings.sampleMinDuration});
+
+/* animation.css */
+:root {
+  --animation-ease-progress: ${settings.progressEase};
+  --animation-ease-progress-exit: ${settings.exitEase};
+  --progress-bar-height: ${settings.height}px;
+}
+
+/* NavigationProgress indicator */
+style={{
+  transformOrigin: isExiting ? "${settings.exitTransformOrigin}" : "${settings.transformOrigin}",
+  transition: isExiting
+    ? "transform ${settings.exitDuration}ms var(--animation-ease-progress-exit)"
+    : "transform ${settings.transitionDuration}ms var(--animation-ease-progress)",
+}}
+
+/* Theme tokens */
+--progress-bar-fill: ${settings.fill};
+--progress-bar-background: ${settings.track};`;
+}
+function randomDuration({ max, min }) {
+  const lower = Math.min(min, max);
+  const upper = Math.max(min, max);
+  return Math.round(lower + Math.random() * (upper - lower));
+}
+function NumberControl({
+  label,
+  max,
+  min,
+  onChange,
+  step = 1,
+  unit,
+  value
+}) {
+  const id = (0, import_react.useId)();
+  const handleChange = (event) => {
+    onChange(Number(event.target.value));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "label",
+      {
+        className: "flex items-center justify-between gap-3 text-xs font-medium text-foreground-2",
+        htmlFor: id,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono text-[11px] text-foreground-3", children: [
+            value,
+            unit
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-[1fr_4.75rem] items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          className: "h-1 w-full accent-foreground-1",
+          id,
+          max,
+          min,
+          onChange: handleChange,
+          step,
+          type: "range",
+          value
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          className: "h-8 rounded-button border border-stroke-2 bg-surface-1 px-2 text-right font-mono text-xs text-foreground-1 outline-none focus:border-accent-1",
+          max,
+          min,
+          onChange: handleChange,
+          step,
+          type: "number",
+          value
+        }
+      )
+    ] })
+  ] });
+}
+function TextControl({
+  label,
+  onChange,
+  value
+}) {
+  const id = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      className: "grid gap-2 text-xs font-medium text-foreground-2",
+      htmlFor: id,
+      children: [
+        label,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            className: "h-8 rounded-button border border-stroke-2 bg-surface-1 px-2 font-mono text-xs text-foreground-1 outline-none focus:border-accent-1",
+            id,
+            onChange: (event) => onChange(event.target.value),
+            spellCheck: false,
+            value
+          }
+        )
+      ]
+    }
+  );
+}
+function OriginControl({
+  label,
+  onChange,
+  value
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs font-medium text-foreground-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 rounded-button border border-stroke-2 bg-surface-2 p-1", children: ["left", "right"].map((origin) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: cn(
+          "h-7 rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] text-xs font-medium text-foreground-3 transition-colors",
+          origin === value && "bg-surface-1 text-foreground-1 shadow-sm"
+        ),
+        onClick: () => onChange(origin),
+        type: "button",
+        children: origin
+      },
+      origin
+    )) })
+  ] });
+}
+function ControlSection({
+  children,
+  title
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "grid gap-4 border-b border-stroke-3 px-4 py-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase text-foreground-3", children: title }),
+    children
+  ] });
+}
+function ProgressPreview({
+  isExiting,
+  progress,
+  settings
+}) {
+  const isVisible = progress > 0;
+  const boundedProgress = clamp({ max: 100, min: 0, value: progress });
+  const indicatorStyle = {
+    background: settings.fill,
+    transform: isExiting ? "scaleX(0)" : `scaleX(${boundedProgress / 100})`,
+    transformOrigin: isExiting ? settings.exitTransformOrigin : settings.transformOrigin,
+    transition: isExiting ? `transform ${settings.exitDuration}ms ${settings.exitEase}` : `transform ${settings.transitionDuration}ms ${settings.progressEase}`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_progress.Progress,
+    {
+      "aria-label": "Sample page navigation",
+      className: cn(
+        "pointer-events-none absolute left-0 right-0 top-0 overflow-hidden transition-opacity duration-200",
+        isVisible ? "opacity-100" : "opacity-0"
+      ),
+      style: { height: settings.height },
+      value: isVisible ? boundedProgress : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_progress.ProgressTrack,
+        {
+          className: "h-full rounded-none",
+          style: { background: settings.track },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_progress.ProgressIndicator,
+            {
+              className: "h-full w-full rounded-none transition-none",
+              style: indicatorStyle
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function NavigationProgressPlayground() {
+  const [settings, setSettings] = (0, import_react.useState)(
+    presets.tuned.settings
+  );
+  const [activePreset, setActivePreset] = (0, import_react.useState)("tuned");
+  const [progress, setProgress] = (0, import_react.useState)(0);
+  const [isExiting, setIsExiting] = (0, import_react.useState)(false);
+  const [isRunning, setIsRunning] = (0, import_react.useState)(false);
+  const [copyState, setCopyState] = (0, import_react.useState)("idle");
+  const [sampleDuration, setSampleDuration] = (0, import_react.useState)(null);
+  const animationFrame = (0, import_react.useRef)(null);
+  const completionTimer = (0, import_react.useRef)(null);
+  const settleTimer = (0, import_react.useRef)(null);
+  const exitTimer = (0, import_react.useRef)(null);
+  const activeNavigation = (0, import_react.useRef)(false);
+  const output = (0, import_react.useMemo)(() => buildOutput(settings), [settings]);
+  const clearTimers = (0, import_react.useCallback)(() => {
+    if (animationFrame.current) cancelAnimationFrame(animationFrame.current);
+    if (completionTimer.current) clearTimeout(completionTimer.current);
+    if (settleTimer.current) clearTimeout(settleTimer.current);
+    if (exitTimer.current) clearTimeout(exitTimer.current);
+    animationFrame.current = null;
+    completionTimer.current = null;
+    settleTimer.current = null;
+    exitTimer.current = null;
+  }, []);
+  const resetSample = (0, import_react.useCallback)(() => {
+    clearTimers();
+    activeNavigation.current = false;
+    setProgress(0);
+    setIsExiting(false);
+    setIsRunning(false);
+    setSampleDuration(null);
+  }, [clearTimers]);
+  const completeSample = (0, import_react.useCallback)(() => {
+    if (!activeNavigation.current) return;
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = null;
+    }
+    if (completionTimer.current) {
+      clearTimeout(completionTimer.current);
+      completionTimer.current = null;
+    }
+    setProgress(100);
+    settleTimer.current = setTimeout(() => {
+      if (!activeNavigation.current) return;
+      setIsExiting(true);
+      exitTimer.current = setTimeout(() => {
+        setProgress(0);
+        setIsExiting(false);
+        setIsRunning(false);
+        activeNavigation.current = false;
+        exitTimer.current = null;
+      }, settings.exitDuration);
+    }, settings.settleDelay);
+  }, [settings.exitDuration, settings.settleDelay]);
+  const startSample = (0, import_react.useCallback)(() => {
+    resetSample();
+    activeNavigation.current = true;
+    setIsRunning(true);
+    setIsExiting(false);
+    setProgress(settings.initialProgress);
+    const startTime = performance.now();
+    const routeDuration = randomDuration({
+      max: settings.sampleMaxDuration,
+      min: settings.sampleMinDuration
+    });
+    setSampleDuration(routeDuration);
+    const animate = () => {
+      if (!activeNavigation.current) return;
+      const elapsed = performance.now() - startTime;
+      let progressValue;
+      if (elapsed < settings.minDuration) {
+        progressValue = settings.initialProgress + elapsed / settings.minDuration * (settings.fastPhaseEnd - settings.initialProgress);
+      } else {
+        const remainingProgress = settings.targetProgress - settings.fastPhaseEnd;
+        const normalizedTime = clamp({
+          max: 1,
+          min: 0,
+          value: (elapsed - settings.minDuration) / (settings.maxDuration - settings.minDuration)
+        });
+        const easedTime = 1 - (1 - normalizedTime) ** settings.curvePower;
+        progressValue = settings.fastPhaseEnd + easedTime * remainingProgress;
+      }
+      setProgress(
+        clamp({ max: settings.targetProgress, min: 0, value: progressValue })
+      );
+      animationFrame.current = requestAnimationFrame(animate);
+    };
+    animationFrame.current = requestAnimationFrame(animate);
+    completionTimer.current = setTimeout(completeSample, routeDuration);
+  }, [completeSample, resetSample, settings]);
+  (0, import_react.useEffect)(() => resetSample, [resetSample]);
+  const updateNumber = (key, value) => {
+    setActivePreset("custom");
+    setSettings((current) => ({ ...current, [key]: value }));
+  };
+  const updateText = (key, value) => {
+    setActivePreset("custom");
+    setSettings((current) => ({ ...current, [key]: value }));
+  };
+  const updateOrigin = (key, value) => {
+    setActivePreset("custom");
+    setSettings((current) => ({ ...current, [key]: value }));
+  };
+  const applyPreset = (preset) => {
+    resetSample();
+    setActivePreset(preset);
+    setSettings(presets[preset].settings);
+  };
+  const copyOutput = async () => {
+    await navigator.clipboard.writeText(output);
+    setCopyState("copied");
+    window.setTimeout(() => setCopyState("idle"), 1200);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-screen bg-[#fafafa] text-foreground-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid min-h-screen lg:grid-cols-[1fr_23rem]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "relative min-h-screen overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-5 top-5 text-sm font-medium text-[#b4b4b4]", children: "Inline" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex min-h-screen items-center justify-center px-8 py-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "relative flex h-[15rem] w-full max-w-4xl flex-col items-center justify-center overflow-hidden bg-white shadow-[0_0_28px_rgba(0,0,0,0.012)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ProgressPreview,
+          {
+            isExiting,
+            progress,
+            settings
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid justify-items-center gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-center text-base font-semibold text-black", children: "put progress bars here" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: startSample, size: "sm", children: "Trigger navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: resetSample, size: "sm", variant: "outline", children: "Reset" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-mono text-xs text-foreground-3", children: isRunning ? `${Math.round(progress)}% / ${sampleDuration ?? 0}ms` : "idle" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "flex max-h-screen min-h-screen flex-col border-l border-stroke-3 bg-surface-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-stroke-3 px-4 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-sm font-semibold text-foreground-1", children: "Navigation Progress" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-xs leading-5 text-foreground-3", children: "Tune, trigger, copy." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: copyOutput, size: "xs", variant: "secondary", children: copyState === "copied" ? "Copied" : "Copy" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-b border-stroke-3 px-4 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-1 rounded-button border border-stroke-2 bg-surface-2 p-1", children: presetOrder.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: cn(
+              "h-8 rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] text-xs font-medium text-foreground-3 transition-colors",
+              activePreset === preset && "bg-surface-1 text-foreground-1 shadow-sm"
+            ),
+            onClick: () => applyPreset(preset),
+            type: "button",
+            children: presets[preset].label
+          },
+          preset
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-3 text-xs leading-5 text-foreground-3", children: activePreset === "custom" ? "Custom settings ready to copy into the progress bar." : presets[activePreset].description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.Tabs, { className: "flex min-h-0 flex-1 flex-col", defaultValue: "timing", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-stroke-3 px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsList, { className: "grid w-full grid-cols-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { className: "px-2 text-xs", value: "timing", children: "Timing" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { className: "px-2 text-xs", value: "motion", children: "Motion" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { className: "px-2 text-xs", value: "visual", children: "Visual" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { className: "px-2 text-xs", value: "output", children: "Output" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsPanel, { value: "timing", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ControlSection, { title: "Progress", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Initial",
+                  max: 40,
+                  min: 0,
+                  onChange: (value) => updateNumber("initialProgress", value),
+                  unit: "%",
+                  value: settings.initialProgress
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Fast phase",
+                  max: 80,
+                  min: 0,
+                  onChange: (value) => updateNumber("fastPhaseEnd", value),
+                  unit: "%",
+                  value: settings.fastPhaseEnd
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Target",
+                  max: 99,
+                  min: 50,
+                  onChange: (value) => updateNumber("targetProgress", value),
+                  unit: "%",
+                  value: settings.targetProgress
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ControlSection, { title: "Duration", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Fast duration",
+                  max: 400,
+                  min: 0,
+                  onChange: (value) => updateNumber("minDuration", value),
+                  unit: "ms",
+                  value: settings.minDuration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Tail duration",
+                  max: 3e4,
+                  min: 500,
+                  onChange: (value) => updateNumber("maxDuration", value),
+                  step: 100,
+                  unit: "ms",
+                  value: settings.maxDuration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Sample min",
+                  max: 5e3,
+                  min: 150,
+                  onChange: (value) => updateNumber("sampleMinDuration", value),
+                  step: 50,
+                  unit: "ms",
+                  value: settings.sampleMinDuration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Sample max",
+                  max: 8e3,
+                  min: 150,
+                  onChange: (value) => updateNumber("sampleMaxDuration", value),
+                  step: 50,
+                  unit: "ms",
+                  value: settings.sampleMaxDuration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Timeout",
+                  max: 2e4,
+                  min: 1e3,
+                  onChange: (value) => updateNumber("timeout", value),
+                  step: 250,
+                  unit: "ms",
+                  value: settings.timeout
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsPanel, { value: "motion", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ControlSection, { title: "Transform", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Transition",
+                  max: 700,
+                  min: 0,
+                  onChange: (value) => updateNumber("transitionDuration", value),
+                  unit: "ms",
+                  value: settings.transitionDuration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Curve power",
+                  max: 6,
+                  min: 1,
+                  onChange: (value) => updateNumber("curvePower", value),
+                  step: 0.1,
+                  value: settings.curvePower
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                OriginControl,
+                {
+                  label: "Fill origin",
+                  onChange: (value) => updateOrigin("transformOrigin", value),
+                  value: settings.transformOrigin
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ControlSection, { title: "Exit", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Settle delay",
+                  max: 500,
+                  min: 0,
+                  onChange: (value) => updateNumber("settleDelay", value),
+                  unit: "ms",
+                  value: settings.settleDelay
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NumberControl,
+                {
+                  label: "Exit duration",
+                  max: 700,
+                  min: 0,
+                  onChange: (value) => updateNumber("exitDuration", value),
+                  unit: "ms",
+                  value: settings.exitDuration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                OriginControl,
+                {
+                  label: "Exit origin",
+                  onChange: (value) => updateOrigin("exitTransformOrigin", value),
+                  value: settings.exitTransformOrigin
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ControlSection, { title: "Easing", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TextControl,
+                {
+                  label: "Progress ease",
+                  onChange: (value) => updateText("progressEase", value),
+                  value: settings.progressEase
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TextControl,
+                {
+                  label: "Exit ease",
+                  onChange: (value) => updateText("exitEase", value),
+                  value: settings.exitEase
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { value: "visual", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ControlSection, { title: "Bar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              NumberControl,
+              {
+                label: "Height",
+                max: 8,
+                min: 1,
+                onChange: (value) => updateNumber("height", value),
+                unit: "px",
+                value: settings.height
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TextControl,
+              {
+                label: "Fill",
+                onChange: (value) => updateText("fill", value),
+                value: settings.fill
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TextControl,
+              {
+                label: "Track",
+                onChange: (value) => updateText("track", value),
+                value: settings.track
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { className: "h-full", value: "output", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid h-full grid-rows-[1fr_auto] gap-3 p-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "textarea",
+              {
+                className: "min-h-[26rem] resize-none rounded-panel border border-stroke-2 bg-surface-2 p-3 font-mono text-xs leading-5 text-foreground-1 outline-none focus:border-accent-1",
+                readOnly: true,
+                value: output
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: copyOutput, size: "sm", variant: "secondary", children: copyState === "copied" ? "Copied output" : "Copy output" })
+          ] }) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigationProgressPlayground
+});