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

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

@@ -1,735 +0,0 @@
-"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
-});