@takazudo/zudo-doc 5.28.2 → 6.0.1

package/dist/settings-defaults.js

@@ -0,0 +1,93 @@
+const DEFAULT_SETTINGS = {
+  colorScheme: "Default Dark",
+  colorMode: {
+    defaultMode: "dark",
+    lightScheme: "Default Light",
+    darkScheme: "Default Dark",
+    respectPrefersColorScheme: true
+  },
+  siteName: "Docs",
+  siteDescription: "",
+  logo: "auto",
+  favicon: void 0,
+  base: "/",
+  trailingSlash: false,
+  home: { wide: false, introMarkdown: "", sitemapHeading: "" },
+  siteTreeNavIgnore: [],
+  siteTreeNavSecondary: [],
+  minifyHtml: true,
+  docsDir: "src/content/docs",
+  entryDocSlug: "getting-started",
+  dateFormat: "locale",
+  defaultLocale: "en",
+  locales: {},
+  mermaid: true,
+  transclude: false,
+  noindex: false,
+  editUrl: false,
+  githubUrl: false,
+  siteUrl: "",
+  metaTags: {
+    description: true,
+    keywords: false,
+    ogImage: false,
+    ogSiteName: true,
+    twitterCard: false
+  },
+  sitemap: false,
+  docMetainfo: false,
+  docMetainfoFields: ["created", "updated", "author"],
+  docTags: false,
+  tagPlacement: "after-title",
+  tagGovernance: "off",
+  tagVocabulary: false,
+  agentExport: false,
+  mcp: false,
+  llmsTxt: false,
+  changelogs: false,
+  math: false,
+  cjkFriendly: false,
+  onBrokenMarkdownLinks: "warn",
+  aiAssistant: false,
+  aiChatDemoMode: false,
+  aiChatAllowedOrigins: [],
+  // Exact UTC-day paid-call admission cap; false disables it. An admission is
+  // consumed before provider fetch and is not provider-confirmed accounting.
+  aiChatGlobalDailyLimit: false,
+  designTokenPanel: false,
+  tocMinDepth: 2,
+  tocMaxDepth: 4,
+  searchMaxBodyLength: 3e3,
+  sidebarResizer: false,
+  sidebarToggle: false,
+  tocToggle: false,
+  imageEnlarge: false,
+  findInPage: false,
+  dynamicPageTransition: false,
+  frontmatterPreview: false,
+  docHistory: false,
+  docHistoryUi: true,
+  docHistoryExclude: [],
+  assetViewer: false,
+  assetViewerDir: "assets",
+  assetViewerRoutePrefix: "files",
+  assetViewerExclude: [],
+  assetViewerIndex: false,
+  assetViewerIndexing: false,
+  bodyFootUtilArea: false,
+  htmlPreview: void 0,
+  versions: false,
+  claudeResources: false,
+  codexResources: false,
+  defaultLocaleOnlyPrefixes: [],
+  footer: false,
+  headerNav: [],
+  headerRightItems: [{ type: "component", component: "theme-toggle" }],
+  packageOwnedRoutes: true,
+  themePack: "default",
+  themePackSwitcher: false,
+  themePacks: void 0
+};
+export {
+  DEFAULT_SETTINGS
+};

package/dist/settings.d.ts

@@ -398,6 +398,10 @@ export interface Settings {
     tagGovernance: TagGovernanceMode;
     tagVocabulary: boolean;
     llmsTxt: boolean;
+    /** Generate the package-owned static agent documentation feed. */
+    agentExport?: boolean;
+    /** Add the stateless read-only MCP endpoint; requires agentExport. */
+    mcp?: boolean;
     changelogs?: ChangelogConfig[] | false;
     math: boolean;
     cjkFriendly: boolean;
@@ -555,8 +559,10 @@ export interface Settings {
      * `chromeBindings.DesignTokenPanelBootstrap`, stub-rendered pages now mount
      * NO panel island at all (the injected routes still get the configured one,
      * from any entry page). To get a panel on stub-rendered pages too, thread
-     * your builder through `chromeBindings.DesignTokenPanelBootstrap` — that
-     * binding wins everywhere and is unaffected by this rule. See
+     * your builder through a client bootstrap and expose its fixed-target,
+     * Fragment-wrapped Island server boundary as
+     * `chromeBindings.DesignTokenPanelBootstrap` — that boundary wins everywhere
+     * and is unaffected by this rule. Do not supply a raw client component. See
      * `docs/adr/route-injection-seam.md`.
      *
      * EDGE CASE (zudolab/zudo-doc#3420, diagnostic added #3428, scoped by

package/dist/sidebar/client-data.d.ts

@@ -0,0 +1,18 @@
+import type { SidebarNavNode, SidebarNavigationContext } from "./types.js";
+/** Navigation data needed by the native sidebar islands, without server prose. */
+export type SidebarClientNode = Omit<SidebarNavNode, "description" | "children"> & {
+    children: SidebarClientNode[];
+};
+export type SidebarClientNavigation = Omit<SidebarNavigationContext, "roots"> & {
+    roots: SidebarClientNode[];
+};
+/**
+ * Copy navigation for SSR and hydration at an island boundary. Server builders
+ * retain descriptions; custom island hosts can opt into this same projection.
+ * Validate before selecting fields so discarded data cannot conceal invalid
+ * transport values. Preserve the opaque scope ID and editorial topology.
+ */
+export declare function toSidebarClientData(nodes: SidebarNavNode[], navigation?: SidebarNavigationContext): {
+    nodes: SidebarClientNode[];
+    navigation?: SidebarClientNavigation;
+};

package/dist/sidebar/client-data.js

@@ -0,0 +1,47 @@
+import { normalizeIslandData } from "../chrome/island-data.js";
+const nodeFields = {
+  occurrenceId: true,
+  slug: true,
+  label: true,
+  description: false,
+  position: true,
+  href: true,
+  hasPage: true,
+  children: true,
+  sortOrder: true,
+  collapsed: true,
+  shape: true,
+  noteTrayDated: true,
+  noteTraySidebar: true,
+  date: true,
+  updated: true,
+  rank: true
+};
+function toSidebarClientData(nodes, navigation) {
+  const source = normalizeIslandData({ nodes, navigation });
+  function project(node) {
+    const result = {};
+    for (const key of Object.keys(nodeFields)) {
+      if (nodeFields[key] && key !== "children" && node[key] !== void 0) {
+        result[key] = node[key];
+      }
+    }
+    result.children = node.children.map(project);
+    return result;
+  }
+  return {
+    nodes: source.nodes.map(project),
+    ...source.navigation ? {
+      navigation: {
+        id: source.navigation.id,
+        roots: source.navigation.roots.map(project),
+        parents: source.navigation.parents,
+        ...source.navigation.initialExpansion !== void 0 ? { initialExpansion: source.navigation.initialExpansion } : {},
+        ...source.navigation.localParentId !== void 0 ? { localParentId: source.navigation.localParentId } : {}
+      }
+    } : {}
+  };
+}
+export {
+  toSidebarClientData
+};

package/dist/sidebar/index.d.ts

@@ -17,5 +17,7 @@
  * `treeComponent` prop (or rendered as `children`).
  */
 export { Sidebar } from "./sidebar.js";
+export { toSidebarClientData } from "./client-data.js";
+export type { SidebarClientNode, SidebarClientNavigation } from "./client-data.js";
 export type { SidebarProps } from "./sidebar.js";
-export type { SidebarLocaleLink, SidebarNavNode, SidebarRootMenuItem, SidebarTreeIslandProps, } from "./types.js";
+export type { SidebarLocaleLink, SidebarNavNode, SidebarNavigationContext, SidebarRootMenuItem, SidebarTreeIslandProps, } from "./types.js";

package/dist/sidebar/index.js

@@ -1,4 +1,6 @@
 import { Sidebar } from "./sidebar.js";
+import { toSidebarClientData } from "./client-data.js";
 export {
-  Sidebar
+  Sidebar,
+  toSidebarClientData
 };

package/dist/sidebar/sidebar.d.ts

@@ -1,50 +1,18 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { ComponentChildren, FunctionComponent, VNode } from "preact";
+import type { Child, Component } from "@takazudo/zfb/zudo-react";
 import type { SidebarTreeIslandProps } from "./types.js";
+/**
+ * Props for the server-rendered Sidebar shell. Data preparation stays with the
+ * caller, which may supply a tree component or already-rendered children.
+ */
 export interface SidebarProps extends SidebarTreeIslandProps {
-    /**
-     * The host's SidebarTree component. When present, the shell renders
-     * `<TreeComponent {...islandProps} />` with the typed props below.
-     * Mutually exclusive with `children`: prefer this form so v2 owns the
-     * prop forwarding contract.
-     */
-    treeComponent?: FunctionComponent<SidebarTreeIslandProps>;
-    /**
-     * Pre-rendered tree content — falls back to this when
-     * `treeComponent` is omitted. Useful for tests and for layouts that
-     * compose the tree separately (e.g. inside a host wrapper
-     * that needs `client:load` on the actual island element).
-     */
-    children?: ComponentChildren;
+    /** Component used to render the prepared tree. */
+    treeComponent?: Component<SidebarTreeIslandProps>;
+    /** Pre-rendered tree content for callers that compose the tree separately. */
+    children?: Child;
 }
 /**
- * Sidebar shell — typed wrapper around the SidebarTree island.
- *
- * Two usage shapes (matching the breadcrumb shell's pattern):
- *
- *   1. Pass `treeComponent` plus the data props (`nodes`,
- *      `rootMenuItems`, `localeLinks`, …). The shell forwards them all
- *      to the supplied component.
- *
- *   2. Pass `children` (e.g. a pre-instantiated `<SidebarTree
- *      client:load … />` from an Astro wrapper). The shell renders
- *      them as-is — the typed island props are then unused but kept on
- *      the type signature so call-sites stay self-documenting.
- *
- * **The caller is responsible for wrapping this in `<Island when="load">`**
- * so the SSG output emits the `data-zfb-island="Sidebar"` hydration
- * marker around the rendered tree. `<DocLayoutWithDefaults>` does this
- * for you; consumers who render `<Sidebar>` outside the default layout
- * (e.g. via the `sidebarOverride` prop or in a custom layout) must
- * apply the wrapper themselves — otherwise no hydration marker is
- * emitted, and the runtime walks past the SSR'd tree without claiming
- * it as an island. Either way the actual user-facing interactivity
- * comes from the `treeComponent`'s own island registration; the
- * `<Island>` wrapper here exists so the shell can host data-only
- * variants in the future without losing the marker contract.
+ * Server-rendered shell around prepared navigation content. An empty node list
+ * has no sidebar output and returns null without creating an island boundary.
  */
-export declare function Sidebar(props: SidebarProps): VNode | null;
-export declare namespace Sidebar {
-    var displayName: string;
-}
+export declare function Sidebar(props: SidebarProps): Child;

package/dist/sidebar/sidebar.js

@@ -1,21 +1,23 @@
-"use client";
-import { Fragment, jsx } from "preact/jsx-runtime";
+import { Fragment, jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 function Sidebar(props) {
   const {
     treeComponent: TreeComponent,
     children,
     nodes,
+    navigation,
     currentSlug,
     rootMenuItems,
     backToMenuLabel,
     localeLinks,
     themeDefaultMode
   } = props;
+  if (nodes.length === 0) return null;
   if (TreeComponent) {
     return /* @__PURE__ */ jsx(
       TreeComponent,
       {
         nodes,
+        navigation,
         currentSlug,
         rootMenuItems,
         backToMenuLabel,
@@ -29,7 +31,6 @@ function Sidebar(props) {
   }
   return null;
 }
-Sidebar.displayName = "Sidebar";
 export {
   Sidebar
 };

package/dist/sidebar/types.d.ts

@@ -25,6 +25,8 @@
  * Matches `NavNode` in the host project's `src/utils/docs.ts`.
  */
 export interface SidebarNavNode {
+    /** Stable identity of this editorial occurrence, independent of the page slug. */
+    occurrenceId?: string;
     slug: string;
     label: string;
     description?: string;
@@ -67,9 +69,21 @@ export interface SidebarLocaleLink {
  */
 export interface SidebarTreeIslandProps {
     nodes: SidebarNavNode[];
+    navigation?: SidebarNavigationContext;
     currentSlug?: string;
     rootMenuItems?: SidebarRootMenuItem[];
     backToMenuLabel?: string;
     localeLinks?: SidebarLocaleLink[];
     themeDefaultMode?: "light" | "dark";
 }
+/** Complete editorial topology, captured before local scoping or filtering. */
+export interface SidebarNavigationContext {
+    /** Locale/version/document-context identity including the topology revision. */
+    id: string;
+    roots: SidebarNavNode[];
+    /** Explicit page/index author defaults; resolved against the current destination. */
+    initialExpansion?: Record<string, "collapsed" | "expanded">;
+    parents: Record<string, string | null>;
+    /** Explicit enclosing occurrence for a local forest spanning emitted children. */
+    localParentId?: string;
+}

package/dist/sidebar-prepaint/index.d.ts

@@ -1,6 +1,5 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import type { JSX } from "preact";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 export interface SidebarPrepaintProps {
     /**
      * Mirrors the page's `hide_sidebar: true` frontmatter. When true the desktop

package/dist/sidebar-prepaint/index.js

@@ -1,9 +1,7 @@
-import { Fragment, jsx } from "preact/jsx-runtime";
+import { Fragment, jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { Island } from "@takazudo/zfb";
-import {
-  DesktopSidebarToggle,
-  SIDEBAR_STORAGE_KEY
-} from "../desktop-sidebar-toggle-island/index.js";
+import { DesktopSidebarToggle } from "../desktop-sidebar-toggle-island/index.js";
+import { SIDEBAR_STORAGE_KEY } from "../desktop-sidebar-toggle-island/storage.js";
 function sidebarPrepaintActive(settings, hideSidebar) {
   return Boolean(settings.sidebarToggle) && !hideSidebar;
 }
@@ -18,7 +16,7 @@ function createSidebarVisibilityPrepaint(settings) {
     return /* @__PURE__ */ jsx(
       "script",
       {
-        dangerouslySetInnerHTML: { __html: SIDEBAR_VISIBILITY_PREPAINT_SCRIPT }
+        rawHtml: SIDEBAR_VISIBILITY_PREPAINT_SCRIPT
       }
     );
   }

package/dist/sidebar-resizer/sidebar-resizer-init.d.ts

@@ -1,12 +1,11 @@
-/** @jsxImportSource preact */
-import type { JSX } from "preact";
+import type { JSX } from "@takazudo/zfb/zudo-react/jsx-runtime";
 export declare const SIDEBAR_RESIZER_INIT_SCRIPT: string;
 /**
  * Drop-in JSX body-end script for sidebar resize initialization.
  *
  * Include once in the layout (gated on `settings.sidebarResizer`). Emits
  * the full `initSidebarResizer` implementation as an inline
- * `dangerouslySetInnerHTML` script so it runs without a module import.
+ * static rawHtml script so it runs without a module import.
  *
  * - Calls `initSidebarResizer()` once on first paint.
  * - Re-runs on `AFTER_NAVIGATE_EVENT` (`zfb:after-swap`) for

package/dist/sidebar-resizer/sidebar-resizer-init.js

@@ -1,4 +1,4 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsx } from "@takazudo/zfb/zudo-react/jsx-runtime";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
 const SIDEBAR_RESIZER_INIT_SCRIPT = `(function(){
   var SIDEBAR_ID="desktop-sidebar";
@@ -141,7 +141,7 @@ const SIDEBAR_RESIZER_INIT_SCRIPT = `(function(){
   document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)},initSidebarResizer);
 })();`;
 function SidebarResizerInit() {
-  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: SIDEBAR_RESIZER_INIT_SCRIPT } });
+  return /* @__PURE__ */ jsx("script", { rawHtml: SIDEBAR_RESIZER_INIT_SCRIPT });
 }
 var sidebar_resizer_init_default = SidebarResizerInit;
 const SIDEBAR_RESIZER_RESTORE_SCRIPT = `(function(){try{var w=localStorage.getItem("zudo-doc-sidebar-width");if(!w)return;var n=parseFloat(w);if(!isFinite(n))return;if(n<192)n=192;else if(n>448)n=448;document.documentElement.style.setProperty("--zd-sidebar-w",n+"px");}catch(e){}})();`;
@@ -149,7 +149,7 @@ function SidebarResizerRestore() {
   return /* @__PURE__ */ jsx(
     "script",
     {
-      dangerouslySetInnerHTML: { __html: SIDEBAR_RESIZER_RESTORE_SCRIPT }
+      rawHtml: SIDEBAR_RESIZER_RESTORE_SCRIPT
     }
   );
 }

package/dist/sidebar-toggle-island/index.d.ts

@@ -1,8 +1,9 @@
 import type { ThemeToggleLabels } from "../theme-toggle/index.js";
-import type { SidebarNavNode, SidebarRootMenuItem, SidebarLocaleLink } from "../sidebar/types.js";
+import type { SidebarNavNode, SidebarRootMenuItem, SidebarLocaleLink, SidebarNavigationContext } from "../sidebar/types.js";
 import type { ResolvedDateFormats } from "../settings.js";
 export interface SidebarToggleProps {
     nodes: SidebarNavNode[];
+    navigation?: SidebarNavigationContext;
     currentSlug?: string;
     rootMenuItems?: SidebarRootMenuItem[];
     backToMenuLabel?: string;
@@ -13,19 +14,15 @@ export interface SidebarToggleProps {
     themeLabels?: ThemeToggleLabels;
     themeRespectSystem?: boolean;
     /**
-     * Forwarded verbatim to the hosted `<SidebarTree>`. This island is the one
-     * nested under the persisted `<header>`, so on a same-locale soft navigation
-     * its serialized `data-props` is lifted from the previous page and refreshed
-     * wholesale by `nested-island-props-refresh` — which carries the resolved
-     * patterns along with `nodes`, at no extra cost, because that helper copies
-     * the blob rather than enumerating prop names (#4075). The patterns cannot
-     * actually differ across such a swap (the persist key is `header-${lang}`,
-     * so a locale change is never a persisted swap); what matters is that they
-     * are not LOST from the lifted island.
+     * Forwarded verbatim to the hosted `<SidebarTree>`. The same-locale header
+     * may persist across a soft navigation; zfb 3.1 keeps this island live when
+     * its effective props are unchanged and recreates it from incoming props
+     * when page data changes. The locale-keyed header persistence key prevents
+     * locale-specific props from crossing locales.
      */
     dateFormats?: ResolvedDateFormats;
 }
-export declare function SidebarToggle({ nodes, currentSlug, rootMenuItems, backToMenuLabel, locale, localeLinks, themeDefaultMode, themeLabels, themeRespectSystem, dateFormats, }: SidebarToggleProps): import("preact").JSX.Element;
+export declare function SidebarToggle({ nodes, navigation, currentSlug, rootMenuItems, backToMenuLabel, locale, localeLinks, themeDefaultMode, themeLabels, themeRespectSystem, dateFormats, }: SidebarToggleProps): import("@takazudo/zfb").Description;
 export declare namespace SidebarToggle {
     var displayName: string;
 }

package/dist/sidebar-toggle-island/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useState, useEffect, useRef } from "preact/hooks";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import { computed, getScope, signal } from "@takazudo/zfb/zudo-react";
 import { AFTER_NAVIGATE_EVENT, ensureNestedIslandPropsRefresh } from "../transitions/index.js";
 import { SidebarTree } from "../sidebar-tree-island/index.js";
 ensureNestedIslandPropsRefresh();
@@ -8,6 +8,7 @@ const cx = (...classes) => classes.filter(Boolean).join(" ");
 const HIDDEN_ICON_STYLE = "display:none";
 function SidebarToggle({
   nodes,
+  navigation,
   currentSlug,
   rootMenuItems,
   backToMenuLabel,
@@ -18,78 +19,93 @@ function SidebarToggle({
   themeRespectSystem,
   dateFormats
 }) {
-  const [open, setOpen] = useState(false);
-  const hamburgerRef = useRef(null);
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
+  const open = signal(false);
+  const hamburgerRef = { current: null };
+  const closeIconRef = { current: null };
+  const menuIconRef = { current: null };
+  const scope = getScope();
+  scope.effect(() => {
+    const isOpen = open.value;
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    if (isOpen) closeIconRef.current?.style.removeProperty("display");
+    else closeIconRef.current?.style.setProperty("display", "none");
+    if (isOpen) menuIconRef.current?.style.setProperty("display", "none");
+    else menuIconRef.current?.style.removeProperty("display");
     return () => {
       document.body.style.overflow = "";
     };
-  }, [open]);
-  useEffect(() => {
-    function handleSwap() {
-      setOpen(false);
-    }
+  });
+  scope.onActivate(() => {
+    const handleSwap = () => {
+      open.value = false;
+    };
     document.addEventListener(AFTER_NAVIGATE_EVENT, handleSwap);
     return () => document.removeEventListener(AFTER_NAVIGATE_EVENT, handleSwap);
-  }, []);
-  useEffect(() => {
-    if (!open) return;
+  });
+  scope.effect(() => {
+    if (!open.value) return;
     function handleKeyDown(event) {
-      if (event.isComposing) return;
-      if (event.defaultPrevented) return;
-      if (event.key === "Escape") {
-        setOpen(false);
+      const keyboard = event;
+      if (keyboard.isComposing) return;
+      if (keyboard.defaultPrevented) return;
+      if (keyboard.key === "Escape") {
+        open.value = false;
         hamburgerRef.current?.focus();
       }
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open]);
+  });
+  const isClosed = computed(() => !open.value);
+  const toggleClass = computed(
+    () => cx(
+      "lg:hidden shrink-0 px-hsp-sm py-vsp-xs -ml-hsp-sm mr-hsp-sm text-muted hover:text-fg",
+      open.value && "relative z-modal"
+    )
+  );
+  const backdropClass = computed(
+    () => cx(
+      "fixed inset-0 z-modal-backdrop bg-overlay/30 lg:hidden",
+      !open.value && "hidden"
+    )
+  );
+  const panelClass = computed(() => `
+          fixed top-[3.5rem] left-0 z-modal h-[calc(100vh_-_3.5rem)] w-[16rem] flex flex-col
+          border-r border-muted bg-bg transition-transform duration-200
+          lg:hidden
+          ${open.value ? "translate-x-0" : "-translate-x-full"}
+        `);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         ref: hamburgerRef,
         type: "button",
-        onClick: () => setOpen(!open),
-        className: cx(
-          "lg:hidden shrink-0 px-hsp-sm py-vsp-xs -ml-hsp-sm mr-hsp-sm text-muted hover:text-fg",
-          // While open, the button IS the close control (it shows the X), so it
-          // has to sit in the drawer's own tier rather than under the backdrop —
-          // `z-modal-backdrop` (50) otherwise intercepts every pointer event at
-          // the button's own centre and the X is unclickable
-          // (zudolab/zudo-doc#4369). `relative` is required: a bare `z-index`
-          // has no effect on a statically-positioned element.
-          // Conditioning on `open` is load-bearing, not cosmetic: SSR always
-          // renders `open=false`, so the closed-state markup stays
-          // byte-identical (hydration-stable, and the A2 no-stub parity hashes
-          // for this directory do not move).
-          open && "relative z-modal"
+        "on:click": () => {
+          open.value = !open.value;
+        },
+        class: toggleClass,
+        "aria-label": computed(
+          () => open.value ? "Close sidebar" : "Open sidebar"
         ),
-        "aria-label": open ? "Close sidebar" : "Open sidebar",
-        "aria-expanded": open,
+        "aria-expanded": computed(() => open.value ? "true" : "false"),
         children: [
           /* @__PURE__ */ jsx(
             "svg",
             {
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "h-icon-lg w-icon-lg",
-              style: open ? void 0 : HIDDEN_ICON_STYLE,
+              ref: closeIconRef,
+              class: "h-icon-lg w-icon-lg",
+              style: HIDDEN_ICON_STYLE,
               "aria-hidden": "true",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              strokeWidth: 2,
+              "stroke-width": 2,
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
                   d: "M6 18L18 6M6 6l12 12"
                 }
               )
@@ -98,19 +114,18 @@ function SidebarToggle({
           /* @__PURE__ */ jsx(
             "svg",
             {
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "h-icon-lg w-icon-lg",
-              style: open ? HIDDEN_ICON_STYLE : void 0,
+              ref: menuIconRef,
+              class: "h-icon-lg w-icon-lg",
               "aria-hidden": "true",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              strokeWidth: 2,
+              "stroke-width": 2,
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
                   d: "M4 6h16M4 12h16M4 18h16"
                 }
               )
@@ -122,26 +137,24 @@ function SidebarToggle({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cx("fixed inset-0 z-modal-backdrop bg-overlay/30 lg:hidden", !open && "hidden"),
-        "aria-hidden": !open,
-        onClick: () => setOpen(false)
+        class: backdropClass,
+        "aria-hidden": isClosed,
+        "on:click": () => {
+          open.value = false;
+        }
       }
     ),
     /* @__PURE__ */ jsx(
       "aside",
       {
-        inert: !open,
+        inert: isClosed,
         "data-zd-mobile-sidebar": true,
-        className: `
-          fixed top-[3.5rem] left-0 z-modal h-[calc(100vh-3.5rem)] w-[16rem] flex flex-col
-          border-r border-muted bg-bg transition-transform duration-200
-          lg:hidden
-          ${open ? "translate-x-0" : "-translate-x-full"}
-        `,
-        children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
+        class: panelClass,
+        children: /* @__PURE__ */ jsx("div", { class: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
           SidebarTree,
           {
             nodes,
+            navigation,
             currentSlug,
             rootMenuItems,
             backToMenuLabel,