@publish.os/nextjs 0.0.1-alpha.5 → 0.0.1-alpha.7

package/dist/kernel/components/blocks/nav-breadcrumb.js

@@ -1,7 +1,5 @@
-// src/kernel/components/blocks/nav-breadcrumb.tsx
-import {
-  BreadcrumbTrail
-} from "../ui/breadcrumb.js";
+// src/components/block/navigation/nav-breadcrumb.tsx
+import { CollapsibleBreadcrumbTrail } from "@publish.os/nextjs/kernel/components/ui/breadcrumb-trail";
 import { jsx } from "react/jsx-runtime";
 function titleFor(node) {
   return node.title;
@@ -9,33 +7,25 @@ function titleFor(node) {
 function pathFor(node) {
   if (node.type === "page") return node.path;
   if (node.type === "link") return node.href;
-  if (node.type === "folder") return node.path;
-  if (node.type === "section") return node.path;
-  return void 0;
+  if (node.type === "folder" || node.type === "section") return node.path;
 }
 function rankFor(node) {
-  if (node.type === "page" || node.type === "section") return 2;
-  if (node.type === "folder") return 1;
-  return 0;
+  return node.type === "page" || node.type === "section" ? 2 : node.type === "folder" ? 1 : 0;
 }
 function findCrumbs(nodes, pathname, parents = []) {
-  const matches = [];
-  for (const node of nodes) {
-    const path = pathFor(node);
-    const nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
-    if (path === pathname) {
-      matches.push({
-        crumbs: nextParents.map((crumb, index) => ({
-          ...crumb,
-          current: index === nextParents.length - 1
-        })),
-        pathLength: path.length,
-        rank: rankFor(node)
-      });
-    }
-    if (node.type === "section" || node.type === "folder") {
-      const childMatch = findCrumbs(node.children, pathname, nextParents);
-      if (childMatch) matches.push(childMatch);
+  let matches = [];
+  for (let node of nodes) {
+    let path = pathFor(node), nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
+    if (path === pathname && matches.push({
+      crumbs: nextParents.map((crumb, index) => ({
+        ...crumb,
+        current: index === nextParents.length - 1
+      })),
+      pathLength: path.length,
+      rank: rankFor(node)
+    }), node.type === "section" || node.type === "folder") {
+      let childMatch = findCrumbs(node.children, pathname, nextParents);
+      childMatch && matches.push(childMatch);
     }
   }
   return matches.sort(
@@ -43,56 +33,42 @@ function findCrumbs(nodes, pathname, parents = []) {
   )[0] ?? null;
 }
 function groupFallback(tree, pathname) {
-  const groups = tree.map((group) => ({ group, path: pathFor(group) })).filter(
-    (entry) => typeof entry.path === "string"
+  let groups = tree.map((group) => ({ group, path: pathFor(group) })).filter(
+    (entry) => typeof entry.path == "string"
   ).sort((a, b) => b.path.length - a.path.length);
-  for (const { group, path } of groups) {
-    if (pathname.startsWith(`${path}/`)) {
+  for (let { group, path } of groups)
+    if (pathname.startsWith(`${path}/`))
       return [{ title: titleFor(group), path }];
-    }
-  }
   return [];
 }
 function buildCrumbs(site, tree, pathname) {
-  const root = {
+  let root = {
     title: site.name,
     path: "/",
     current: pathname === "/"
   };
   if (pathname === "/") return [root];
-  const treeMatch = findCrumbs(tree, pathname);
-  if (treeMatch) return [root, ...treeMatch.crumbs];
-  return [
+  let treeMatch = findCrumbs(tree, pathname);
+  return treeMatch ? [root, ...treeMatch.crumbs] : [
     root,
     ...groupFallback(tree, pathname).map((crumb) => ({
       ...crumb,
-      current: false
+      current: !1
     }))
   ];
 }
 function NavBreadcrumb({
   currentPath = "/",
-  showRoot = true,
+  showRoot = !0,
   site,
   tree
 }) {
-  const crumbs = buildCrumbs(site, tree, currentPath);
-  const visibleCrumbs = showRoot ? crumbs : crumbs.slice(1);
-  const items = visibleCrumbs.map((crumb) => ({
+  let crumbs = buildCrumbs(site, tree, currentPath), items = (showRoot ? crumbs : crumbs.slice(1)).map((crumb) => ({
     current: crumb.current,
     href: crumb.path,
     title: crumb.title
   }));
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    BreadcrumbTrail,
-    {
-      collapseAfter: 1,
-      collapseBefore: 2,
-      items,
-      size: "sm"
-    }
-  );
+  return items.length === 0 ? null : /* @__PURE__ */ jsx(CollapsibleBreadcrumbTrail, { items, size: "sm" });
 }
 export {
   NavBreadcrumb

package/dist/kernel/components/blocks/navbar.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LogoBlockLogo, LogoBlockAsset } from './logo-block.js';
-import { SiteData, TreeNode } from '@publish.os/nextjs/types';
+import { S as SiteData, T as TreeNode } from '../../../types-B_b3C0U6.js';
 
 type NavbarProps = {
     logo?: NavbarLogo;

package/dist/kernel/components/blocks/navbar.js

@@ -1,58 +1,32 @@
 "use client";
 
-// src/kernel/components/blocks/navbar.tsx
+// src/components/block/navigation/navbar.tsx
 import {
   LogoBlock
-} from "./logo-block.js";
-import { NavBreadcrumb } from "./nav-breadcrumb.js";
-import { Search } from "./search.js";
-import { ThemeToggle } from "./theme-toggle.js";
-import { Link } from "../ui/link.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/navbar.tsx
-import { ArrowRight } from "lucide-react";
+} from "@publish.os/nextjs/kernel/components/blocks/logo-block";
+import { NavBreadcrumb } from "@publish.os/nextjs/kernel/components/blocks/nav-breadcrumb";
+import { Search } from "@publish.os/nextjs/kernel/components/blocks/search";
+import { ThemeToggle } from "@publish.os/nextjs/kernel/components/blocks/theme-toggle";
+import { Link } from "@publish.os/nextjs/kernel/components/ui/link";
+import { FrameworkArrowRightIcon as ArrowRight } from "@publish.os/nextjs/kernel/framework-icons";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import NextLink from "next/link";
 import { usePathname } from "next/navigation";
 import { jsx, jsxs } from "react/jsx-runtime";
 function hasPath(node) {
-  return "path" in node && typeof node.path === "string";
+  return "path" in node && typeof node.path == "string";
 }
 function isTopLevelGroup(node) {
-  return node.type === "section" && typeof node.group === "string" && !node.group.includes("/");
+  return node.type === "section" && typeof node.group == "string" && !node.group.includes("/");
 }
 function Navbar({
   logo,
   site,
   siteTitle,
-  showThemeToggle = true,
+  showThemeToggle = !0,
   tree
 }) {
-  const pathname = usePathname() || "/";
-  const headerSite = site ?? { name: siteTitle ?? "Site" };
-  const groups = tree.filter(hasPath).filter(isTopLevelGroup);
-  const activeGroupPath = groups.map((group) => group.path).filter((path) => pathname === path || pathname.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
+  let pathname = usePathname() || "/", headerSite = site ?? { name: siteTitle ?? "Site" }, groups = tree.filter(hasPath).filter(isTopLevelGroup), activeGroupPath = groups.map((group) => group.path).filter((path) => pathname === path || pathname.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
   return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-nav border-b border-stroke-3 bg-surface-2 [anchor-name:--global-navbar]", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-h-[var(--layout-global-nav-height)] w-full max-w-(--layout-site-max-width) flex-col gap-3 border-x border-stroke-3 px-5 py-3 md:flex-row md:items-center md:gap-4 md:py-2 lg:px-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
       /* @__PURE__ */ jsx(
@@ -69,7 +43,7 @@ function Navbar({
         NavBreadcrumb,
         {
           currentPath: pathname,
-          showRoot: false,
+          showRoot: !1,
           site: headerSite,
           tree
         }
@@ -82,8 +56,7 @@ function Navbar({
           "aria-label": "Groups",
           className: "flex min-w-0 flex-wrap items-center gap-2 text-sm",
           children: groups.map((group) => {
-            const path = group.path;
-            const active = path === activeGroupPath;
+            let path = group.path, active = path === activeGroupPath;
             return /* @__PURE__ */ jsx(
               Link,
               {

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

@@ -1,37 +1,14 @@
 "use client";
 
-// src/kernel/components/blocks/navigation-progress-playground.tsx
-import { Button } from "../ui/button.js";
+// src/modules/design-system/navigation-progress-playground.tsx
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
 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
+} from "@publish.os/nextjs/kernel/components/ui/progress";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@publish.os/nextjs/kernel/components/ui/tabs";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import {
   useCallback,
   useEffect,
@@ -59,8 +36,8 @@ var presets = {
       transitionDuration: 320,
       curvePower: 3,
       height: 2,
-      fill: "var(--progress-bar-fill, var(--accent-1, #111111))",
-      track: "var(--progress-bar-background, transparent)",
+      fill: "var(--progress-indicator-surface)",
+      track: "var(--progress-track-surface)",
       progressEase: "cubic-bezier(0.21, 0.65, 0.35, 1)",
       exitEase: "cubic-bezier(0.55, 0.06, 0.68, 0.19)",
       transformOrigin: "left",
@@ -109,16 +86,15 @@ var presets = {
       transitionDuration: 180,
       curvePower: 2.6,
       height: 2,
-      fill: "var(--progress-bar-fill, var(--accent-1, #111111))",
-      track: "var(--progress-bar-background, transparent)",
+      fill: "var(--progress-indicator-surface)",
+      track: "var(--progress-track-surface)",
       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"];
+}, presetOrder = ["current", "aave", "tuned"];
 function clamp({
   max,
   min,
@@ -145,7 +121,7 @@ const sampleDuration =
 :root {
   --animation-ease-progress: ${settings.progressEase};
   --animation-ease-progress-exit: ${settings.exitEase};
-  --progress-bar-height: ${settings.height}px;
+  --progress-height: ${settings.height}px;
 }
 
 /* NavigationProgress indicator */
@@ -157,12 +133,11 @@ style={{
 }}
 
 /* Theme tokens */
---progress-bar-fill: ${settings.fill};
---progress-bar-background: ${settings.track};`;
+--progress-indicator-surface: ${settings.fill};
+--progress-track-surface: ${settings.track};`;
 }
 function randomDuration({ max, min }) {
-  const lower = Math.min(min, max);
-  const upper = Math.max(min, max);
+  let lower = Math.min(min, max), upper = Math.max(min, max);
   return Math.round(lower + Math.random() * (upper - lower));
 }
 function NumberControl({
@@ -174,8 +149,7 @@ function NumberControl({
   unit,
   value
 }) {
-  const id = useId();
-  const handleChange = (event) => {
+  let id = useId(), handleChange = (event) => {
     onChange(Number(event.target.value));
   };
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
@@ -197,7 +171,7 @@ function NumberControl({
       /* @__PURE__ */ jsx(
         "input",
         {
-          className: "h-1 w-full accent-foreground-1",
+          className: "h-1 w-full accent-1-foreground-1",
           id,
           max,
           min,
@@ -227,7 +201,7 @@ function TextControl({
   onChange,
   value
 }) {
-  const id = useId();
+  let id = useId();
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -241,7 +215,7 @@ function TextControl({
             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,
+            spellCheck: !1,
             value
           }
         )
@@ -285,9 +259,7 @@ function ProgressPreview({
   progress,
   settings
 }) {
-  const isVisible = progress > 0;
-  const boundedProgress = clamp({ max: 100, min: 0, value: progress });
-  const indicatorStyle = {
+  let isVisible = progress > 0, boundedProgress = clamp({ max: 100, min: 0, value: progress }), indicatorStyle = {
     background: settings.fill,
     transform: isExiting ? "scaleX(0)" : `scaleX(${boundedProgress / 100})`,
     transformOrigin: isExiting ? settings.exitTransformOrigin : settings.transformOrigin,
@@ -321,125 +293,60 @@ function ProgressPreview({
   );
 }
 function NavigationProgressPlayground() {
-  const [settings, setSettings] = useState(
+  let [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({
+  ), [activePreset, setActivePreset] = useState("tuned"), [progress, setProgress] = useState(0), [isExiting, setIsExiting] = useState(!1), [isRunning, setIsRunning] = useState(!1), [copyState, setCopyState] = useState("idle"), [sampleDuration, setSampleDuration] = useState(null), animationFrame = useRef(null), completionTimer = useRef(null), settleTimer = useRef(null), exitTimer = useRef(null), activeNavigation = useRef(!1), output = useMemo(() => buildOutput(settings), [settings]), clearTimers = useCallback(() => {
+    animationFrame.current && cancelAnimationFrame(animationFrame.current), completionTimer.current && clearTimeout(completionTimer.current), settleTimer.current && clearTimeout(settleTimer.current), exitTimer.current && clearTimeout(exitTimer.current), animationFrame.current = null, completionTimer.current = null, settleTimer.current = null, exitTimer.current = null;
+  }, []), resetSample = useCallback(() => {
+    clearTimers(), activeNavigation.current = !1, setProgress(0), setIsExiting(!1), setIsRunning(!1), setSampleDuration(null);
+  }, [clearTimers]), completeSample = useCallback(() => {
+    activeNavigation.current && (animationFrame.current && (cancelAnimationFrame(animationFrame.current), animationFrame.current = null), completionTimer.current && (clearTimeout(completionTimer.current), completionTimer.current = null), setProgress(100), settleTimer.current = setTimeout(() => {
+      activeNavigation.current && (setIsExiting(!0), exitTimer.current = setTimeout(() => {
+        setProgress(0), setIsExiting(!1), setIsRunning(!1), activeNavigation.current = !1, exitTimer.current = null;
+      }, settings.exitDuration));
+    }, settings.settleDelay));
+  }, [settings.exitDuration, settings.settleDelay]), startSample = useCallback(() => {
+    resetSample(), activeNavigation.current = !0, setIsRunning(!0), setIsExiting(!1), setProgress(settings.initialProgress);
+    let startTime = performance.now(), routeDuration = randomDuration({
       max: settings.sampleMaxDuration,
       min: settings.sampleMinDuration
     });
     setSampleDuration(routeDuration);
-    const animate = () => {
+    let animate = () => {
       if (!activeNavigation.current) return;
-      const elapsed = performance.now() - startTime;
-      let progressValue;
-      if (elapsed < settings.minDuration) {
+      let elapsed = performance.now() - startTime, 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({
+      else {
+        let remainingProgress = settings.targetProgress - settings.fastPhaseEnd, easedTime = 1 - (1 - clamp({
           max: 1,
           min: 0,
           value: (elapsed - settings.minDuration) / (settings.maxDuration - settings.minDuration)
-        });
-        const easedTime = 1 - (1 - normalizedTime) ** settings.curvePower;
+        })) ** settings.curvePower;
         progressValue = settings.fastPhaseEnd + easedTime * remainingProgress;
       }
       setProgress(
         clamp({ max: settings.targetProgress, min: 0, value: progressValue })
-      );
-      animationFrame.current = requestAnimationFrame(animate);
+      ), animationFrame.current = requestAnimationFrame(animate);
     };
-    animationFrame.current = requestAnimationFrame(animate);
-    completionTimer.current = setTimeout(completeSample, routeDuration);
+    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);
+  let updateNumber = (key, value) => {
+    setActivePreset("custom"), setSettings((current) => ({ ...current, [key]: value }));
+  }, updateText = (key, value) => {
+    setActivePreset("custom"), setSettings((current) => ({ ...current, [key]: value }));
+  }, updateOrigin = (key, value) => {
+    setActivePreset("custom"), setSettings((current) => ({ ...current, [key]: value }));
+  }, applyPreset = (preset) => {
+    resetSample(), setActivePreset(preset), setSettings(presets[preset].settings);
+  }, 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: [
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-surface-page 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("div", { className: "absolute left-5 top-5 text-sm font-medium text-foreground-4", children: "Inline" }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center px-8 py-20", children: /* @__PURE__ */ jsxs("section", { className: "border-shadow-3 relative flex h-[15rem] w-full max-w-4xl flex-col items-center justify-center overflow-hidden bg-surface-1", children: [
         /* @__PURE__ */ jsx(
           ProgressPreview,
           {
@@ -449,7 +356,7 @@ function NavigationProgressPlayground() {
           }
         ),
         /* @__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__ */ jsx("div", { className: "text-center text-base font-semibold text-foreground-1", 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" })
@@ -706,7 +613,7 @@ function NavigationProgressPlayground() {
               "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,
+                readOnly: !0,
                 value: output
               }
             ),