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

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

@@ -0,0 +1,722 @@
+"use client";
+
+// src/kernel/components/blocks/navigation-progress-playground.tsx
+import { Button } from "../ui/button.js";
+import {
+  Progress,
+  ProgressIndicator,
+  ProgressTrack
+} from "../ui/progress.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "../ui/tabs.js";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/blocks/navigation-progress-playground.tsx
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "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 = useId();
+  const handleChange = (event) => {
+    onChange(Number(event.target.value));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex items-center justify-between gap-3 text-xs font-medium text-foreground-2",
+        htmlFor: id,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11px] text-foreground-3", children: [
+            value,
+            unit
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_4.75rem] items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "h-1 w-full accent-foreground-1",
+          id,
+          max,
+          min,
+          onChange: handleChange,
+          step,
+          type: "range",
+          value
+        }
+      ),
+      /* @__PURE__ */ 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 = useId();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: "grid gap-2 text-xs font-medium text-foreground-2",
+      htmlFor: id,
+      children: [
+        label,
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-foreground-2", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 rounded-button border border-stroke-2 bg-surface-2 p-1", children: ["left", "right"].map((origin) => /* @__PURE__ */ 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__ */ jsxs("section", { className: "grid gap-4 border-b border-stroke-3 px-4 py-5", children: [
+    /* @__PURE__ */ 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__ */ jsx(
+    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__ */ jsx(
+        ProgressTrack,
+        {
+          className: "h-full rounded-none",
+          style: { background: settings.track },
+          children: /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              className: "h-full w-full rounded-none transition-none",
+              style: indicatorStyle
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function NavigationProgressPlayground() {
+  const [settings, setSettings] = useState(
+    presets.tuned.settings
+  );
+  const [activePreset, setActivePreset] = useState("tuned");
+  const [progress, setProgress] = useState(0);
+  const [isExiting, setIsExiting] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
+  const [copyState, setCopyState] = useState("idle");
+  const [sampleDuration, setSampleDuration] = useState(null);
+  const animationFrame = useRef(null);
+  const completionTimer = useRef(null);
+  const settleTimer = useRef(null);
+  const exitTimer = useRef(null);
+  const activeNavigation = useRef(false);
+  const output = useMemo(() => buildOutput(settings), [settings]);
+  const clearTimers = 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 = useCallback(() => {
+    clearTimers();
+    activeNavigation.current = false;
+    setProgress(0);
+    setIsExiting(false);
+    setIsRunning(false);
+    setSampleDuration(null);
+  }, [clearTimers]);
+  const completeSample = 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 = 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]);
+  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__ */ jsx("div", { className: "min-h-screen bg-[#fafafa] text-foreground-1", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-screen lg:grid-cols-[1fr_23rem]", children: [
+    /* @__PURE__ */ jsxs("main", { className: "relative min-h-screen overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-5 top-5 text-sm font-medium text-[#b4b4b4]", children: "Inline" }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center px-8 py-20", children: /* @__PURE__ */ 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__ */ jsx(
+          ProgressPreview,
+          {
+            isExiting,
+            progress,
+            settings
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid justify-items-center gap-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-center text-base font-semibold text-black", children: "put progress bars here" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(Button, { onClick: startSample, size: "sm", children: "Trigger navigation" }),
+            /* @__PURE__ */ jsx(Button, { onClick: resetSample, size: "sm", variant: "outline", children: "Reset" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-foreground-3", children: isRunning ? `${Math.round(progress)}% / ${sampleDuration ?? 0}ms` : "idle" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "flex max-h-screen min-h-screen flex-col border-l border-stroke-3 bg-surface-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-stroke-3 px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold text-foreground-1", children: "Navigation Progress" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-5 text-foreground-3", children: "Tune, trigger, copy." })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick: copyOutput, size: "xs", variant: "secondary", children: copyState === "copied" ? "Copied" : "Copy" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "border-b border-stroke-3 px-4 py-4", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Tabs, { className: "flex min-h-0 flex-1 flex-col", defaultValue: "timing", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-stroke-3 px-4 py-3", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-4", children: [
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "timing", children: "Timing" }),
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "motion", children: "Motion" }),
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "visual", children: "Visual" }),
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "output", children: "Output" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs(TabsPanel, { value: "timing", children: [
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Progress", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Initial",
+                  max: 40,
+                  min: 0,
+                  onChange: (value) => updateNumber("initialProgress", value),
+                  unit: "%",
+                  value: settings.initialProgress
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Fast phase",
+                  max: 80,
+                  min: 0,
+                  onChange: (value) => updateNumber("fastPhaseEnd", value),
+                  unit: "%",
+                  value: settings.fastPhaseEnd
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Target",
+                  max: 99,
+                  min: 50,
+                  onChange: (value) => updateNumber("targetProgress", value),
+                  unit: "%",
+                  value: settings.targetProgress
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Duration", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Fast duration",
+                  max: 400,
+                  min: 0,
+                  onChange: (value) => updateNumber("minDuration", value),
+                  unit: "ms",
+                  value: settings.minDuration
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Tail duration",
+                  max: 3e4,
+                  min: 500,
+                  onChange: (value) => updateNumber("maxDuration", value),
+                  step: 100,
+                  unit: "ms",
+                  value: settings.maxDuration
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Sample min",
+                  max: 5e3,
+                  min: 150,
+                  onChange: (value) => updateNumber("sampleMinDuration", value),
+                  step: 50,
+                  unit: "ms",
+                  value: settings.sampleMinDuration
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Sample max",
+                  max: 8e3,
+                  min: 150,
+                  onChange: (value) => updateNumber("sampleMaxDuration", value),
+                  step: 50,
+                  unit: "ms",
+                  value: settings.sampleMaxDuration
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Timeout",
+                  max: 2e4,
+                  min: 1e3,
+                  onChange: (value) => updateNumber("timeout", value),
+                  step: 250,
+                  unit: "ms",
+                  value: settings.timeout
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(TabsPanel, { value: "motion", children: [
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Transform", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Transition",
+                  max: 700,
+                  min: 0,
+                  onChange: (value) => updateNumber("transitionDuration", value),
+                  unit: "ms",
+                  value: settings.transitionDuration
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Curve power",
+                  max: 6,
+                  min: 1,
+                  onChange: (value) => updateNumber("curvePower", value),
+                  step: 0.1,
+                  value: settings.curvePower
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                OriginControl,
+                {
+                  label: "Fill origin",
+                  onChange: (value) => updateOrigin("transformOrigin", value),
+                  value: settings.transformOrigin
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Exit", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Settle delay",
+                  max: 500,
+                  min: 0,
+                  onChange: (value) => updateNumber("settleDelay", value),
+                  unit: "ms",
+                  value: settings.settleDelay
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Exit duration",
+                  max: 700,
+                  min: 0,
+                  onChange: (value) => updateNumber("exitDuration", value),
+                  unit: "ms",
+                  value: settings.exitDuration
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                OriginControl,
+                {
+                  label: "Exit origin",
+                  onChange: (value) => updateOrigin("exitTransformOrigin", value),
+                  value: settings.exitTransformOrigin
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Easing", children: [
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Progress ease",
+                  onChange: (value) => updateText("progressEase", value),
+                  value: settings.progressEase
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Exit ease",
+                  onChange: (value) => updateText("exitEase", value),
+                  value: settings.exitEase
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "visual", children: /* @__PURE__ */ jsxs(ControlSection, { title: "Bar", children: [
+            /* @__PURE__ */ jsx(
+              NumberControl,
+              {
+                label: "Height",
+                max: 8,
+                min: 1,
+                onChange: (value) => updateNumber("height", value),
+                unit: "px",
+                value: settings.height
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextControl,
+              {
+                label: "Fill",
+                onChange: (value) => updateText("fill", value),
+                value: settings.fill
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextControl,
+              {
+                label: "Track",
+                onChange: (value) => updateText("track", value),
+                value: settings.track
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(TabsPanel, { className: "h-full", value: "output", children: /* @__PURE__ */ jsxs("div", { className: "grid h-full grid-rows-[1fr_auto] gap-3 p-4", children: [
+            /* @__PURE__ */ 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__ */ jsx(Button, { onClick: copyOutput, size: "sm", variant: "secondary", children: copyState === "copied" ? "Copied output" : "Copy output" })
+          ] }) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  NavigationProgressPlayground
+};