@takazudo/zudo-doc 5.28.2 → 6.0.1

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

@@ -1,15 +1,30 @@
 "use client";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { useState, useCallback, useEffect, useMemo, useRef } from "preact/hooks";
-import { memo } from "preact/compat";
-import { INDENT, BASE_PAD, connectorLeft, ConnectorLines, CategoryLinkIcon } from "../tree-nav-shared/index.js";
+import { Fragment, jsx, jsxs } from "@takazudo/zfb/zudo-react/jsx-runtime";
+import {
+  computed,
+  For,
+  getScope,
+  Show,
+  signal
+} from "@takazudo/zfb/zudo-react";
+import {
+  INDENT,
+  BASE_PAD,
+  connectorLeft,
+  ConnectorLines,
+  CategoryLinkIcon
+} from "../tree-nav-shared/index.js";
 import { ChevronRight, ChevronLeft, Search } from "../icons/index.js";
 import { ThemeToggle } from "../theme-toggle/index.js";
 import { smartBreakToHtml } from "../smart-break/index.js";
-import { AFTER_NAVIGATE_EVENT, BEFORE_NAVIGATE_EVENT } from "../transitions/index.js";
+import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
+import { useSidebarScope } from "./scope-state.js";
 import { filterTree } from "../sidebar-filter/index.js";
 import { findActiveSlug, normalizePath } from "../sidebar-active-slug/index.js";
-import { CURRENT_PATH_DATASET_KEY, readCurrentPath } from "../current-path/index.js";
+import {
+  CURRENT_PATH_DATASET_KEY,
+  readCurrentPath
+} from "../current-path/index.js";
 import { ensureSidebarScrollPreserve } from "./sidebar-scroll-preserve.js";
 import {
   formatYearLabel,
@@ -19,19 +34,26 @@ import {
   rankWidth
 } from "../note-tray-model/index.js";
 import { formatMonthDay } from "../format-date/index.js";
-ensureSidebarScrollPreserve();
-function ToggleChevron({ isExpanded, className }) {
+const STORAGE_KEY = "zd-sidebar-open";
+const GROUPED_TRAY_ITEM_DEPTH = 3;
+function ToggleChevron({
+  isExpanded,
+  className
+}) {
   return /* @__PURE__ */ jsx(
-    ChevronRight,
+    For,
     {
-      className: `h-[0.625rem] w-[0.625rem] shrink-0 transition-transform duration-150 ${isExpanded ? "rotate-90" : ""} ${className ?? ""}`
+      each: computed(() => [
+        `h-[0.625rem] w-[0.625rem] shrink-0 transition-transform duration-150 ${isExpanded.value ? "rotate-90" : ""} ${typeof className === "string" ? className : className?.value ?? ""}`
+      ]),
+      by: (value) => value,
+      children: (value) => /* @__PURE__ */ jsx(ChevronRight, { class: value.value })
     }
   );
 }
-const STORAGE_KEY = "zd-sidebar-open";
-const GROUPED_TRAY_ITEM_DEPTH = 3;
 function padLeft(depth, forCategory) {
-  if (depth === 0) return `calc(${BASE_PAD} + ${forCategory ? "0.15rem" : "0rem"})`;
+  if (depth === 0)
+    return `calc(${BASE_PAD} + ${forCategory ? "0.15rem" : "0rem"})`;
   return `calc(${depth} * ${INDENT} + 1.25rem + 5px)`;
 }
 function getOpenSet() {
@@ -39,7 +61,9 @@ function getOpenSet() {
     const raw = sessionStorage.getItem(STORAGE_KEY);
     if (!raw) return /* @__PURE__ */ new Set();
     const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? new Set(parsed.filter((v) => typeof v === "string")) : /* @__PURE__ */ new Set();
+    return Array.isArray(parsed) ? new Set(
+      parsed.filter((value) => typeof value === "string")
+    ) : /* @__PURE__ */ new Set();
   } catch {
     return /* @__PURE__ */ new Set();
   }
@@ -52,186 +76,305 @@ function saveOpenSet(set) {
 }
 function deriveActiveSlug(nodes, pathname) {
   const resolved = readCurrentPath(CURRENT_PATH_DATASET_KEY, pathname);
-  if (!resolved) return void 0;
-  return findActiveSlug(nodes, normalizePath(resolved));
+  return resolved ? findActiveSlug(nodes, normalizePath(resolved)) : void 0;
 }
 function useActiveSlug(nodes, initial, currentPath) {
-  const [slug, setSlug] = useState(
-    () => initial !== void 0 ? initial : deriveActiveSlug(nodes, currentPath)
-  );
-  useEffect(() => {
+  const slug = signal(initial);
+  getScope().onActivate(() => {
     const update = (pathname) => {
       const found = deriveActiveSlug(nodes, pathname);
-      if (found !== void 0) setSlug(found);
+      if (found !== void 0) slug.value = found;
     };
-    const onNavigate = () => update();
     update(currentPath);
+    const onNavigate = () => update();
     document.addEventListener(AFTER_NAVIGATE_EVENT, onNavigate);
     return () => document.removeEventListener(AFTER_NAVIGATE_EVENT, onNavigate);
-  }, [nodes, currentPath]);
+  });
   return slug;
 }
-function RootMenuItemEntry({ item }) {
-  const [expanded, setExpanded] = useState(false);
-  const hasChildren = item.children && item.children.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: "border-t border-muted", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+function RootMenuItemEntry({
+  item
+}) {
+  const expanded = signal(false);
+  const hasChildren = computed(() => !!item.value.children?.length);
+  return /* @__PURE__ */ jsxs("div", { class: "border-t border-muted", children: [
+    /* @__PURE__ */ jsxs("div", { class: "flex items-center", children: [
       /* @__PURE__ */ jsxs(
         "a",
         {
-          href: item.href,
-          className: "flex flex-1 items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-small font-semibold text-fg hover:text-accent hover:underline break-words",
+          href: computed(() => item.value.href ?? ""),
+          class: "flex flex-1 items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-small font-semibold text-fg hover:text-accent hover:underline break-words",
           children: [
-            /* @__PURE__ */ jsx(CategoryLinkIcon, { className: "w-[14px]" }),
-            /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: smartBreakToHtml(item.label) } })
+            /* @__PURE__ */ jsx(CategoryLinkIcon, { class: "w-[14px]" }),
+            /* @__PURE__ */ jsx("span", { rawHtml: computed(() => smartBreakToHtml(item.value.label)) })
           ]
         }
       ),
-      hasChildren && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Show, { when: hasChildren, children: () => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: () => setExpanded((prev) => !prev),
-          className: "flex items-center justify-center px-hsp-sm py-vsp-xs text-muted hover:text-fg",
-          "aria-expanded": expanded,
-          "aria-label": expanded ? `Collapse ${item.label}` : `Expand ${item.label}`,
+          "on:click": () => {
+            expanded.value = !expanded.value;
+          },
+          class: "flex items-center justify-center px-hsp-sm py-vsp-xs text-muted hover:text-fg",
+          "aria-expanded": computed(
+            () => expanded.value ? "true" : "false"
+          ),
+          "aria-label": computed(
+            () => `${expanded.value ? "Collapse" : "Expand"} ${item.value.label}`
+          ),
           children: /* @__PURE__ */ jsx(ToggleChevron, { isExpanded: expanded, className: "text-muted" })
         }
-      )
+      ) })
     ] }),
-    hasChildren && expanded && /* @__PURE__ */ jsx("div", { className: "pb-vsp-xs", children: item.children.map((child) => /* @__PURE__ */ jsx(
-      "a",
+    /* @__PURE__ */ jsx(Show, { when: computed(() => hasChildren.value && expanded.value), children: () => /* @__PURE__ */ jsx("div", { class: "pb-vsp-xs", children: /* @__PURE__ */ jsx(
+      For,
       {
-        href: child.href,
-        className: "block pl-hsp-xl pr-hsp-sm py-vsp-2xs text-small text-muted hover:text-accent hover:underline break-words",
-        children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: smartBreakToHtml(child.label) } })
-      },
-      child.href
-    )) })
+        each: computed(() => item.value.children ?? []),
+        by: (child) => child.href,
+        children: (child) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: computed(() => child.value.href),
+            class: "block pl-hsp-xl pr-hsp-sm py-vsp-2xs text-small text-muted hover:text-accent hover:underline break-words",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                rawHtml: computed(
+                  () => smartBreakToHtml(child.value.label)
+                )
+              }
+            )
+          }
+        )
+      }
+    ) }) })
   ] });
 }
-function SidebarFooter({ links, themeDefaultMode, themeLabels, themeRespectSystem }) {
+function SidebarFooter({
+  links,
+  themeDefaultMode,
+  themeLabels,
+  themeRespectSystem
+}) {
   if (!links && !themeDefaultMode) return null;
-  return (
-    // pb-[50vh] provides scroll room so the footer doesn't sit at the very bottom of the viewport
-    /* @__PURE__ */ jsxs("div", { className: "lg:hidden flex items-center gap-hsp-md border-t border-muted px-hsp-sm py-vsp-xs pb-[50vh] text-small", children: [
-      themeDefaultMode && /* @__PURE__ */ jsx(ThemeToggle, { defaultMode: themeDefaultMode, labels: themeLabels, respectPrefersColorScheme: themeRespectSystem, pendingUntilHydrated: true }),
-      links && links.map((link, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-hsp-xs", children: [
-        i > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted", children: "/" }),
-        link.active ? /* @__PURE__ */ jsx("span", { "aria-current": "true", className: "font-medium text-fg", children: link.label }) : /* @__PURE__ */ jsx("a", { href: link.href, lang: link.code, className: "text-muted hover:text-fg", children: link.label })
-      ] }, link.href))
-    ] })
-  );
+  return /* @__PURE__ */ jsxs("div", { class: "lg:hidden flex items-center gap-hsp-md border-t border-muted px-hsp-sm py-vsp-xs pb-[50vh] text-small", children: [
+    themeDefaultMode ? /* @__PURE__ */ jsx(
+      ThemeToggle,
+      {
+        defaultMode: themeDefaultMode,
+        labels: themeLabels,
+        respectPrefersColorScheme: themeRespectSystem,
+        pendingUntilHydrated: true
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(For, { each: computed(() => links ?? []), by: (link) => link.href, children: (link, index) => /* @__PURE__ */ jsxs("span", { class: "flex items-center gap-hsp-xs", children: [
+      /* @__PURE__ */ jsx(Show, { when: computed(() => index.value > 0), children: () => /* @__PURE__ */ jsx("span", { class: "text-muted", children: "/" }) }),
+      /* @__PURE__ */ jsx(
+        Show,
+        {
+          when: computed(() => link.value.active),
+          fallback: () => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: computed(() => link.value.href),
+              lang: computed(() => link.value.code),
+              class: "text-muted hover:text-fg",
+              children: computed(() => link.value.label)
+            }
+          ),
+          children: () => /* @__PURE__ */ jsx("span", { "aria-current": "true", class: "font-medium text-fg", children: computed(() => link.value.label) })
+        }
+      )
+    ] }) })
+  ] });
 }
-function SidebarTree({ nodes, currentSlug, currentPath, rootMenuItems, backToMenuLabel, locale: localeProp, localeLinks, themeDefaultMode, themeLabels, themeRespectSystem, dateFormats }) {
-  const activeSlug = useActiveSlug(nodes, currentSlug, currentPath);
-  const [query, setQuery] = useState("");
-  const [showingRootMenu, setShowingRootMenu] = useState(false);
-  const filterRef = useRef(null);
-  const [filterPlaceholder, setFilterPlaceholder] = useState("Filter...");
-  useEffect(() => {
+function SidebarTree({
+  nodes,
+  navigation,
+  currentSlug,
+  currentPath,
+  rootMenuItems,
+  backToMenuLabel,
+  locale: localeProp,
+  localeLinks,
+  themeDefaultMode,
+  themeLabels,
+  themeRespectSystem,
+  dateFormats
+}) {
+  const scope = getScope();
+  const activeSlug = useActiveSlug(navigation?.roots ?? nodes, currentSlug, currentPath);
+  const query = signal("");
+  const { selected, selectedNodes, broader, labels, canRestore, changeScope, save, navRef, scopeControls } = useSidebarScope({
+    nodes,
+    navigation,
+    activeSlug,
+    query,
+    locale: localeProp ?? localeLinks?.find((link) => link.active)?.code ?? "en"
+  });
+  const showingRootMenu = signal(false);
+  const filterRef = { current: null };
+  const filterPlaceholder = signal("Filter...");
+  scope.onActivate(() => {
+    ensureSidebarScrollPreserve();
     const platform = navigator.userAgentData?.platform ?? navigator.platform;
-    const isMac = /mac/i.test(platform);
-    setFilterPlaceholder(isMac ? "Filter... (\u2318 + /)" : "Filter... (Ctrl + /)");
-  }, []);
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.isComposing) return;
-      if (e.key === "/" && (e.metaKey || e.ctrlKey)) {
-        const el = filterRef.current;
-        if (!el || el.offsetParent === null) return;
-        e.preventDefault();
-        el.focus();
-        el.select();
-      }
-    }
+    filterPlaceholder.value = /mac/i.test(platform) ? "Filter... (\u2318 + /)" : "Filter... (Ctrl + /)";
+    const handleKeyDown = (event) => {
+      const keyEvent = event;
+      if (keyEvent.isComposing || keyEvent.key !== "/" || !(keyEvent.metaKey || keyEvent.ctrlKey))
+        return;
+      const input = filterRef.current;
+      if (!input || input.offsetParent === null) return;
+      event.preventDefault();
+      input.focus();
+      input.select();
+    };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
-  const filteredNodes = useMemo(
-    () => query ? filterTree(nodes, query) : nodes,
-    [nodes, query]
-  );
-  const footer = useMemo(
-    () => localeLinks || themeDefaultMode ? /* @__PURE__ */ jsx(SidebarFooter, { links: localeLinks, themeDefaultMode, themeLabels, themeRespectSystem }) : null,
-    [localeLinks, themeDefaultMode, themeLabels, themeRespectSystem]
+  });
+  const filteredNodes = computed(
+    () => query.value ? filterTree(selectedNodes.value, query.value) : selectedNodes.value
   );
-  const noteTrayRoot = nodes.length === 1 && nodes[0]?.shape === "note-tray" ? nodes[0] : void 0;
-  const filteredNoteTrayRoot = noteTrayRoot ? filteredNodes.find((node) => node.slug === noteTrayRoot.slug) : void 0;
   const locale = localeProp ?? localeLinks?.find((link) => link.active)?.code ?? "en";
-  if (showingRootMenu && rootMenuItems) {
-    return /* @__PURE__ */ jsxs("nav", { children: [
-      /* @__PURE__ */ jsxs(
-        "button",
+  const footer = /* @__PURE__ */ jsx(
+    SidebarFooter,
+    {
+      links: localeLinks,
+      themeDefaultMode,
+      themeLabels,
+      themeRespectSystem
+    }
+  );
+  const menu = /* @__PURE__ */ jsx(For, { each: computed(() => rootMenuItems ?? []), by: (item) => item.href, children: (item) => /* @__PURE__ */ jsx(RootMenuItemEntry, { item }) });
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: computed(() => showingRootMenu.value && !!rootMenuItems),
+      fallback: () => /* @__PURE__ */ jsx(
+        Show,
         {
-          type: "button",
-          onClick: () => setShowingRootMenu(false),
-          className: "flex w-full items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-left text-small text-muted hover:text-fg border-b border-muted",
-          children: [
-            /* @__PURE__ */ jsx(ChevronRight, { className: "h-icon-sm w-icon-sm shrink-0" }),
-            backToMenuLabel ?? "Back to main menu"
-          ]
+          when: computed(
+            () => activeSlug.value === void 0 && !!rootMenuItems
+          ),
+          fallback: () => /* @__PURE__ */ jsxs("nav", { ref: navRef, tabindex: -1, children: [
+            rootMenuItems ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "on:click": () => {
+                  showingRootMenu.value = true;
+                },
+                class: "lg:hidden flex w-full items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-left text-small text-muted hover:text-fg border-b border-muted",
+                children: [
+                  /* @__PURE__ */ jsx(ChevronLeft, { class: "h-icon-sm w-icon-sm shrink-0" }),
+                  backToMenuLabel ?? "Back to main menu"
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("div", { class: "px-hsp-sm py-vsp-xs border-b border-muted", "data-sidebar-filter-region": true, children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-hsp-xs bg-surface rounded px-hsp-sm py-vsp-2xs", children: [
+              /* @__PURE__ */ jsx(Search, { class: "h-[14px] w-[14px] text-muted shrink-0" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: filterRef,
+                  type: "text",
+                  "aria-label": "Filter navigation",
+                  placeholder: filterPlaceholder,
+                  modelValue: query,
+                  "on:input": (event) => {
+                    query.value = event.target.value;
+                    save();
+                  },
+                  class: "bg-transparent text-small outline-none w-full text-fg placeholder:text-muted focus-visible:outline-2 focus-visible:outline-accent",
+                  style: "outline-offset:-4px"
+                }
+              )
+            ] }) }),
+            navigation ? /* @__PURE__ */ jsx(Show, { when: computed(() => broader.value !== null), children: () => /* @__PURE__ */ jsx("div", { class: "border-b border-muted px-hsp-md py-vsp-2xs text-small", "data-sidebar-scope-toolbar": true, children: /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between gap-hsp-xs", "data-sidebar-scope-actions": true, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-sidebar-broaden": true,
+                  disabled: computed(() => broader.value === null),
+                  "on:click": () => {
+                    if (broader.value !== null) changeScope(broader.value);
+                  },
+                  style: "min-height:40px",
+                  class: "flex items-center gap-hsp-sm px-hsp-xs font-medium rounded text-fg hover:bg-surface focus-visible:bg-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:text-muted disabled:opacity-50",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" }),
+                    labels.broaden
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Show, { when: canRestore, children: () => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-sidebar-restore": true,
+                  "on:click": () => changeScope(null),
+                  title: labels.restore,
+                  "aria-label": labels.restore,
+                  style: "width:40px;height:40px",
+                  class: "grid place-items-center shrink-0 rounded text-muted hover:text-fg focus-visible:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
+                  ] })
+                }
+              ) })
+            ] }) }) }) : null,
+            /* @__PURE__ */ jsx("div", { "data-sidebar-tree-root": true, children: /* @__PURE__ */ jsx(
+              Show,
+              {
+                when: computed(() => selectedNodes.value.length === 1 && selectedNodes.value[0]?.shape === "note-tray"),
+                fallback: () => /* @__PURE__ */ jsx(NodeList, { nodes: filteredNodes, currentSlug: activeSlug, depth: 0, forceOpen: computed(() => !!query.value), scopeControls }),
+                children: () => /* @__PURE__ */ jsx(Show, { when: computed(() => !!filteredNodes.value[0]), children: () => /* @__PURE__ */ jsx(
+                  TrayList,
+                  {
+                    tray: computed(() => filteredNodes.value[0]),
+                    itemCount: getNoteTrayItems(selectedNodes.value[0]).length,
+                    currentSlug: activeSlug,
+                    forceOpen: computed(() => !!query.value),
+                    locale,
+                    dateFormats,
+                    scopeControls
+                  }
+                ) })
+              }
+            ) }),
+            footer
+          ] }),
+          children: () => /* @__PURE__ */ jsxs("nav", { children: [
+            menu,
+            footer
+          ] })
         }
       ),
-      rootMenuItems.map((item) => /* @__PURE__ */ jsx(RootMenuItemEntry, { item }, item.href)),
-      footer
-    ] });
-  }
-  if (activeSlug === void 0 && rootMenuItems) {
-    return /* @__PURE__ */ jsxs("nav", { children: [
-      rootMenuItems.map((item) => /* @__PURE__ */ jsx(RootMenuItemEntry, { item }, item.href)),
-      footer
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("nav", { children: [
-    rootMenuItems && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setShowingRootMenu(true),
-        className: "lg:hidden flex w-full items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-left text-small text-muted hover:text-fg border-b border-muted",
-        children: [
-          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-icon-sm w-icon-sm shrink-0" }),
-          backToMenuLabel ?? "Back to main menu"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "px-hsp-sm py-vsp-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-hsp-xs bg-surface rounded px-hsp-sm py-vsp-2xs", children: [
-      /* @__PURE__ */ jsx(Search, { className: "h-[14px] w-[14px] text-muted shrink-0" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: filterRef,
-          type: "text",
-          "aria-label": "Filter navigation",
-          placeholder: filterPlaceholder,
-          value: query,
-          onInput: (e) => setQuery(e.currentTarget.value),
-          className: "bg-transparent text-small outline-none w-full text-fg placeholder:text-muted"
-        }
-      )
-    ] }) }),
-    noteTrayRoot ? filteredNoteTrayRoot && /* @__PURE__ */ jsx(
-      TrayList,
-      {
-        tray: filteredNoteTrayRoot,
-        itemCount: getNoteTrayItems(noteTrayRoot).length,
-        currentSlug: activeSlug,
-        forceOpen: !!query,
-        locale,
-        dateFormats
-      }
-    ) : /* @__PURE__ */ jsx(
-      NodeList,
-      {
-        nodes: filteredNodes,
-        currentSlug: activeSlug,
-        depth: 0,
-        forceOpen: !!query
-      }
-    ),
-    footer
-  ] });
+      children: () => /* @__PURE__ */ jsxs("nav", { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "on:click": () => {
+              showingRootMenu.value = false;
+            },
+            class: "flex w-full items-center gap-hsp-xs px-hsp-sm py-vsp-xs text-left text-small text-muted hover:text-fg border-b border-muted",
+            children: [
+              /* @__PURE__ */ jsx(ChevronRight, { class: "h-icon-sm w-icon-sm shrink-0" }),
+              backToMenuLabel ?? "Back to main menu"
+            ]
+          }
+        ),
+        menu,
+        footer
+      ] })
+    }
+  );
 }
 SidebarTree.displayName = "SidebarTree";
 function TrayList({
@@ -239,39 +382,77 @@ function TrayList({
   itemCount,
   currentSlug,
   forceOpen,
+  scopeControls,
   locale,
   dateFormats
 }) {
-  const items = getNoteTrayItems(tray);
-  const sidebarStyle = tray.noteTraySidebar ?? "index";
+  const items = computed(() => getNoteTrayItems(tray.value));
+  const sidebarStyle = computed(() => tray.value.noteTraySidebar ?? "index");
   const width = rankWidth(itemCount);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(LeafNode, { node: tray, currentSlug, depth: 0, isLast: items.length === 0 }),
-    sidebarStyle === "index" ? items.map((item, index) => /* @__PURE__ */ jsx(
-      TrayItem,
+    /* @__PURE__ */ jsx(
+      LeafNode,
       {
-        item,
+        node: tray,
         currentSlug,
-        rankDigits: width,
-        isLast: index === items.length - 1,
-        locale,
-        dateFormats
-      },
-      item.slug
-    )) : groupItems(items, sidebarStyle, tray.sortOrder ?? "asc").map((group, index, groups) => /* @__PURE__ */ jsx(
-      TrayGroupNode,
+        depth: 0,
+        isLast: computed(() => items.value.length === 0),
+        forceOpen
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Show,
       {
-        traySlug: tray.slug,
-        group,
-        grouping: sidebarStyle,
-        locale,
-        dateFormats,
-        currentSlug,
-        forceOpen,
-        isLast: index === groups.length - 1
-      },
-      group.key
-    ))
+        when: computed(() => sidebarStyle.value === "index"),
+        fallback: () => /* @__PURE__ */ jsx(
+          For,
+          {
+            each: computed(
+              () => groupItems(
+                items.value,
+                sidebarStyle.value,
+                tray.value.sortOrder ?? "asc"
+              )
+            ),
+            by: (group) => group.key,
+            children: (group, index) => /* @__PURE__ */ jsx(
+              TrayGroupNode,
+              {
+                traySlug: computed(() => tray.value.slug),
+                trayOccurrence: computed(() => tray.value.occurrenceId ?? tray.value.slug),
+                scopeControls,
+                group,
+                grouping: computed(
+                  () => sidebarStyle.value
+                ),
+                locale,
+                dateFormats,
+                currentSlug,
+                forceOpen,
+                isLast: computed(
+                  () => index.value === groupItems(
+                    items.value,
+                    sidebarStyle.value,
+                    tray.value.sortOrder ?? "asc"
+                  ).length - 1
+                )
+              }
+            )
+          }
+        ),
+        children: () => /* @__PURE__ */ jsx(For, { each: items, by: (item) => item.slug, children: (item, index) => /* @__PURE__ */ jsx(
+          TrayItem,
+          {
+            item,
+            currentSlug,
+            rankDigits: width,
+            isLast: computed(() => index.value === items.value.length - 1),
+            locale,
+            dateFormats
+          }
+        ) })
+      }
+    )
   ] });
 }
 function TrayItem({
@@ -284,34 +465,83 @@ function TrayItem({
   locale,
   dateFormats
 }) {
-  if (!item.href) return null;
-  const isActive = item.slug === currentSlug;
-  const labelHtml = smartBreakToHtml(item.label);
-  const shortDate = item.date ? formatMonthDay(item.date, dateFormats?.numericMonthDay, locale) : void 0;
-  return /* @__PURE__ */ jsx("div", { className: isLast ? "pb-vsp-md" : "", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx(ConnectorLines, { depth, isLast, topPad: "var(--spacing-vsp-2xs)" }),
+  const active = computed(() => item.value.slug === currentSlug.value);
+  const shortDate = computed(
+    () => item.value.date ? formatMonthDay(item.value.date, dateFormats?.numericMonthDay, locale) : void 0
+  );
+  return /* @__PURE__ */ jsx(Show, { when: computed(() => !!item.value.href), children: () => /* @__PURE__ */ jsx("div", { class: computed(() => isLast.value ? "pb-vsp-md" : ""), children: /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+    /* @__PURE__ */ jsx(
+      ConnectorLinesLive,
+      {
+        depth,
+        isLast,
+        topPad: "var(--spacing-vsp-2xs)"
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "a",
       {
-        href: item.href,
-        "aria-current": isActive ? "page" : void 0,
-        "data-nav-active": isActive ? "" : void 0,
-        className: `flex items-start gap-hsp-xs py-vsp-2xs pr-hsp-xs lg:pr-hsp-sm text-small break-words ${isActive ? "bg-fg font-medium text-bg" : "text-muted hover:text-accent hover:underline focus:underline focus:text-accent"}`,
-        style: { paddingLeft: padLeft(depth, false) },
+        href: computed(() => item.value.href ?? ""),
+        "aria-current": computed(() => active.value ? "page" : "false"),
+        "data-nav-active": computed(() => active.value ? "" : null),
+        class: computed(
+          () => `flex items-start gap-hsp-xs py-vsp-2xs pr-hsp-xs lg:pr-hsp-sm text-small break-words ${active.value ? "bg-fg font-medium text-bg" : "text-muted hover:text-accent hover:underline focus:underline focus:text-accent"}`
+        ),
+        style: { "padding-left": padLeft(depth, false) },
         children: [
-          rankDigits !== void 0 && /* @__PURE__ */ jsx("span", { className: `shrink-0 tabular-nums${isActive ? "" : " text-muted"}`, children: item.rank === void 0 ? "" : String(item.rank).padStart(rankDigits, "0") }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", dangerouslySetInnerHTML: { __html: labelHtml } }),
-          showDate && shortDate && /* @__PURE__ */ jsx("span", { className: `shrink-0 tabular-nums${isActive ? "" : " text-muted"}`, children: shortDate })
+          rankDigits !== void 0 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: computed(
+                () => `shrink-0 tabular-nums${active.value ? "" : " text-muted"}`
+              ),
+              children: computed(
+                () => item.value.rank === void 0 ? "" : String(item.value.rank).padStart(rankDigits, "0")
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "min-w-0 flex-1",
+              rawHtml: computed(() => smartBreakToHtml(item.value.label))
+            }
+          ),
+          /* @__PURE__ */ jsx(Show, { when: computed(() => showDate && !!shortDate.value), children: () => /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: computed(
+                () => `shrink-0 tabular-nums${active.value ? "" : " text-muted"}`
+              ),
+              children: shortDate
+            }
+          ) })
         ]
       }
     )
-  ] }) });
+  ] }) }) });
+}
+function ConnectorLinesLive({
+  depth,
+  isLast,
+  topPad
+}) {
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: isLast,
+      fallback: () => /* @__PURE__ */ jsx(ConnectorLines, { depth, isLast: false, topPad }),
+      children: () => /* @__PURE__ */ jsx(ConnectorLines, { depth, isLast: true, topPad })
+    }
+  );
 }
 function noteTrayGroupStorageKey(traySlug, groupKey) {
   return `${traySlug}#${groupKey}`;
 }
 function TrayGroupNode({
   traySlug,
+  trayOccurrence,
+  scopeControls,
   group,
   grouping,
   locale,
@@ -320,274 +550,390 @@ function TrayGroupNode({
   forceOpen,
   isLast
 }) {
-  const containsCurrent = group.items.some((item) => item.slug === currentSlug);
-  const [open, setOpen] = useState(containsCurrent);
-  const storageKey = noteTrayGroupStorageKey(traySlug, group.key);
-  const label = grouping === "year" ? formatYearLabel(group.key, locale, dateFormats?.year) : formatYearMonthLabel(group.key, locale, dateFormats?.yearMonth);
-  useEffect(() => {
-    const stored = getOpenSet();
-    if (stored.has(storageKey) && !open) setOpen(true);
-  }, []);
-  useEffect(() => {
-    if (containsCurrent && !open) {
-      setOpen(true);
-      const stored = getOpenSet();
-      stored.add(storageKey);
-      saveOpenSet(stored);
-    }
-  }, [containsCurrent]);
-  useEffect(() => {
-    if (open) {
+  const scope = getScope();
+  const containsCurrent = computed(
+    () => group.value.items.some((item) => item.slug === currentSlug.value)
+  );
+  const occurrenceKey = computed(() => `${trayOccurrence.value}#${group.value.key}`);
+  const open = signal(scopeControls?.expansion.value[occurrenceKey.value] ?? (scopeControls?.defaultGroupOpen(group.value.items) ?? containsCurrent.value));
+  const storageKey = computed(
+    () => noteTrayGroupStorageKey(traySlug.value, group.value.key)
+  );
+  const label = computed(
+    () => grouping.value === "year" ? formatYearLabel(group.value.key, locale, dateFormats?.year) : formatYearMonthLabel(group.value.key, locale, dateFormats?.yearMonth)
+  );
+  scope.onActivate(() => {
+    if (!scopeControls && getOpenSet().has(storageKey.value)) open.value = true;
+  });
+  scope.effect(() => {
+    if (containsCurrent.value) open.value = true;
+  });
+  scope.effect(() => {
+    if (!scopeControls && open.value) {
       const stored = getOpenSet();
-      if (!stored.has(storageKey)) {
-        stored.add(storageKey);
+      if (!stored.has(storageKey.value)) {
+        stored.add(storageKey.value);
         saveOpenSet(stored);
       }
     }
-  }, [open, storageKey]);
-  const toggle = useCallback(() => {
-    setOpen((previous) => {
-      const next = !previous;
-      const stored = getOpenSet();
-      if (next) stored.add(storageKey);
-      else stored.delete(storageKey);
-      saveOpenSet(stored);
-      return next;
-    });
-  }, [storageKey]);
-  const isExpanded = forceOpen || open;
-  return /* @__PURE__ */ jsxs("div", { className: !isLast && isExpanded ? "relative" : "", children: [
-    !isLast && isExpanded && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute border-l border-solid border-muted z-local-1",
-        style: { left: connectorLeft(1), top: 0, bottom: 0 }
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(ConnectorLines, { depth: 1, isLast, topPad: "var(--spacing-vsp-xs)" }),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: toggle,
-          className: "flex w-full items-center gap-hsp-md py-vsp-xs text-left text-small font-semibold text-fg hover:text-accent hover:underline focus:underline focus:text-accent break-words",
-          style: { paddingLeft: padLeft(1, true) },
-          "aria-expanded": isExpanded,
-          "aria-label": isExpanded ? `Collapse ${label}` : `Expand ${label}`,
-          "data-zd-sidebar-open-key": storageKey,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "aspect-square flex items-center justify-center w-[1.5rem] shrink-0 border border-muted", children: /* @__PURE__ */ jsx(ToggleChevron, { isExpanded, className: "text-muted" }) }),
-            /* @__PURE__ */ jsx("span", { children: label })
-          ]
-        }
-      )
-    ] }),
-    isExpanded && /* @__PURE__ */ jsx("div", { children: group.items.map((item, index) => /* @__PURE__ */ jsx(
-      TrayItem,
-      {
-        item,
-        currentSlug,
-        isLast: index === group.items.length - 1,
-        showDate: true,
-        locale,
-        dateFormats,
-        depth: GROUPED_TRAY_ITEM_DEPTH
-      },
-      item.slug
-    )) })
-  ] });
+  });
+  const toggle = () => {
+    open.value = !open.value;
+    if (scopeControls) {
+      scopeControls.expansion.value = { ...scopeControls.expansion.value, [occurrenceKey.value]: open.value };
+      scopeControls.save();
+      return;
+    }
+    const stored = getOpenSet();
+    if (open.value) stored.add(storageKey.value);
+    else stored.delete(storageKey.value);
+    saveOpenSet(stored);
+  };
+  scope.effect(() => {
+    const stored = scopeControls?.expansion.value[occurrenceKey.value];
+    if (scopeControls) open.value = stored ?? scopeControls.defaultGroupOpen(group.value.items);
+  });
+  const expanded = computed(() => forceOpen.value || open.value);
+  const items = computed(() => group.value.items);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: computed(
+        () => !isLast.value && expanded.value ? "relative" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Show, { when: computed(() => !isLast.value && expanded.value), children: () => /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "absolute border-l border-solid border-muted z-local-1",
+            style: { left: connectorLeft(1), top: "0px", bottom: "0px" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+          /* @__PURE__ */ jsx(
+            ConnectorLinesLive,
+            {
+              depth: 1,
+              isLast,
+              topPad: "var(--spacing-vsp-xs)"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "on:click": toggle,
+              class: "flex w-full items-center gap-hsp-md py-vsp-xs text-left text-small font-semibold text-fg hover:text-accent hover:underline focus:underline focus:text-accent break-words",
+              style: { "padding-left": padLeft(1, true) },
+              "aria-expanded": computed(() => expanded.value ? "true" : "false"),
+              "aria-label": computed(
+                () => `${expanded.value ? "Collapse" : "Expand"} ${label.value}`
+              ),
+              "data-zd-sidebar-open-key": storageKey,
+              children: [
+                /* @__PURE__ */ jsx("span", { class: "aspect-square flex items-center justify-center w-[1.5rem] shrink-0 border border-muted", children: /* @__PURE__ */ jsx(ToggleChevron, { isExpanded: expanded, className: "text-muted" }) }),
+                /* @__PURE__ */ jsx("span", { children: label })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Show, { when: expanded, children: () => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(For, { each: items, by: (item) => item.slug, children: (item, index) => /* @__PURE__ */ jsx(
+          TrayItem,
+          {
+            item,
+            currentSlug,
+            isLast: computed(
+              () => index.value === items.value.length - 1
+            ),
+            showDate: true,
+            locale,
+            dateFormats,
+            depth: GROUPED_TRAY_ITEM_DEPTH
+          }
+        ) }) }) })
+      ]
+    }
+  );
 }
-const NodeList = memo(function NodeList2({
+function NodeList({
   nodes,
   currentSlug,
   depth,
-  forceOpen
+  forceOpen,
+  scopeControls
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node, index) => {
-    const isLast = index === nodes.length - 1;
-    return node.children.length > 0 ? /* @__PURE__ */ jsx(
-      CategoryNode,
+  return /* @__PURE__ */ jsx(For, { each: nodes, by: (node) => node.occurrenceId ?? node.slug, children: (node, index) => {
+    const isLast = computed(() => index.value === nodes.value.length - 1);
+    return /* @__PURE__ */ jsx(
+      Show,
       {
-        node,
-        currentSlug,
-        depth,
-        isLast,
-        forceOpen
-      },
-      node.slug
-    ) : /* @__PURE__ */ jsx(
-      LeafNode,
-      {
-        node,
-        currentSlug,
-        depth,
-        isLast
-      },
-      node.slug
+        when: computed(() => node.value.children.length > 0),
+        fallback: () => /* @__PURE__ */ jsx(
+          LeafNode,
+          {
+            node,
+            currentSlug,
+            depth,
+            isLast,
+            forceOpen,
+            scopeControls
+          }
+        ),
+        children: () => /* @__PURE__ */ jsx(
+          CategoryNode,
+          {
+            node,
+            currentSlug,
+            depth,
+            isLast,
+            forceOpen,
+            scopeControls
+          }
+        )
+      }
     );
-  }) });
-});
+  } });
+}
 function subtreeContainsSlug(node, slug) {
-  if (!slug) return false;
-  if (node.slug === slug) return true;
-  return node.children.some((child) => subtreeContainsSlug(child, slug));
+  return slug !== void 0 && (node.slug === slug || node.children.some((child) => subtreeContainsSlug(child, slug)));
 }
-const CategoryNode = memo(function CategoryNode2({
+function CategoryNode({
   node,
   currentSlug,
   depth,
   isLast,
-  forceOpen
+  forceOpen,
+  scopeControls
 }) {
-  const containsCurrent = useMemo(
-    () => subtreeContainsSlug(node, currentSlug),
-    [node, currentSlug]
+  const scope = getScope();
+  const containsCurrent = computed(
+    () => subtreeContainsSlug(node.value, currentSlug.value)
   );
-  const isActive = node.slug === currentSlug;
-  const labelHtml = useMemo(() => smartBreakToHtml(node.label), [node.label]);
-  const [open, setOpen] = useState(containsCurrent ? true : !node.collapsed);
-  useEffect(() => {
-    const stored = getOpenSet();
-    if (stored.has(node.slug) && !open) {
-      setOpen(true);
-    }
-  }, []);
-  useEffect(() => {
-    if (subtreeContainsSlug(node, currentSlug) && !open) {
-      setOpen(true);
+  const active = computed(() => node.value.slug === currentSlug.value);
+  const occurrenceKey = () => node.value.occurrenceId ?? node.value.slug;
+  const open = signal(scopeControls?.expansion.value[occurrenceKey()] ?? (scopeControls?.defaultOpen(node.value) ?? (containsCurrent.value || !node.value.collapsed)));
+  scope.onActivate(() => {
+    if (!scopeControls && getOpenSet().has(node.value.slug)) open.value = true;
+  });
+  scope.effect(() => {
+    const slug = currentSlug.value;
+    const revision = scopeControls?.reveal.value;
+    if (slug !== void 0 && subtreeContainsSlug(node.value, slug)) open.value = true;
+    void revision;
+  });
+  scope.effect(() => {
+    if (!scopeControls && open.value) {
       const stored = getOpenSet();
-      stored.add(node.slug);
-      saveOpenSet(stored);
-    }
-  }, [currentSlug]);
-  useEffect(() => {
-    if (open) {
-      const stored = getOpenSet();
-      if (!stored.has(node.slug)) {
-        stored.add(node.slug);
+      if (!stored.has(node.value.slug)) {
+        stored.add(node.value.slug);
         saveOpenSet(stored);
       }
     }
-  }, [open, node.slug]);
-  const toggle = useCallback(() => {
-    setOpen((prev) => {
-      const next = !prev;
-      const stored = getOpenSet();
-      if (next) {
-        stored.add(node.slug);
-      } else {
-        stored.delete(node.slug);
-      }
-      saveOpenSet(stored);
-      return next;
-    });
-  }, [node.slug]);
-  const isExpanded = forceOpen || open;
+  });
+  const toggle = () => {
+    open.value = !open.value;
+    if (scopeControls) {
+      scopeControls.expansion.value = { ...scopeControls.expansion.value, [occurrenceKey()]: open.value };
+      scopeControls.save();
+      return;
+    }
+    const stored = getOpenSet();
+    if (open.value) stored.add(node.value.slug);
+    else stored.delete(node.value.slug);
+    saveOpenSet(stored);
+  };
+  scope.effect(() => {
+    const stored = scopeControls?.expansion.value[occurrenceKey()];
+    if (scopeControls) open.value = stored ?? scopeControls.defaultOpen(node.value);
+  });
+  const expanded = computed(() => forceOpen.value || open.value);
+  const focusButton = scopeControls ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-sidebar-focus": true,
+      "data-sidebar-focus-scope": computed(() => node.value.occurrenceId ?? ""),
+      "on:click": () => scopeControls.focus(node.value),
+      "aria-label": computed(() => `${scopeControls.focusLabel}: ${node.value.label}`),
+      title: computed(() => `${scopeControls.focusLabel}: ${node.value.label}`),
+      class: computed(() => `ml-auto shrink-0 rounded px-hsp-xs py-vsp-2xs ${active.value ? "text-bg hover:bg-bg/10 focus-visible:bg-bg/10" : "text-muted hover:bg-surface hover:text-fg focus-visible:bg-surface focus-visible:text-fg"}`),
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25CE" })
+    }
+  ) : null;
   const paddingLeft = padLeft(depth, true);
-  return /* @__PURE__ */ jsxs("div", { className: `${depth === 0 ? "border-t border-muted" : ""} ${depth >= 1 && !isLast ? "relative" : ""}`, children: [
-    depth >= 1 && !isLast && isExpanded && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute border-l border-solid border-muted z-local-1",
-        style: {
-          left: connectorLeft(depth),
-          top: 0,
-          bottom: 0
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(ConnectorLines, { depth, isLast, topPad: "calc(0.15rem + var(--spacing-vsp-xs))" }),
-      node.href ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `flex w-full items-center text-small font-semibold pt-[0.15rem] ${isActive ? "bg-fg text-bg" : "text-fg"}`,
-          children: [
-            /* @__PURE__ */ jsxs(
-              "a",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: computed(
+        () => `${depth === 0 ? "border-t border-muted first:border-t-0" : ""} ${depth >= 1 && !isLast.value ? "relative" : ""}`
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Show,
+          {
+            when: computed(() => depth >= 1 && !isLast.value && expanded.value),
+            children: () => /* @__PURE__ */ jsx(
+              "div",
               {
-                href: node.href,
-                "aria-current": isActive ? "page" : void 0,
-                className: `flex-1 flex items-start gap-hsp-xs py-vsp-xs hover:underline focus:underline break-words ${isActive ? "text-bg" : "text-fg hover:text-accent focus:text-accent"}`,
-                style: { paddingLeft },
-                children: [
-                  depth === 0 && /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { className: `w-[14px] ${isActive ? "text-bg" : ""}` }) }),
-                  /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: labelHtml } })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: toggle,
-                className: `aspect-square flex items-center justify-center w-[1.5rem] border-y border-l hover:underline focus:underline ${isActive ? "border-bg/30" : "border-muted"}`,
-                "aria-expanded": isExpanded,
-                "aria-label": isExpanded ? `Collapse ${node.label}` : `Expand ${node.label}`,
-                children: /* @__PURE__ */ jsx(ToggleChevron, { isExpanded, className: isActive ? "text-bg" : "text-muted" })
+                class: "absolute border-l border-solid border-muted z-local-1",
+                style: { left: connectorLeft(depth), top: "0px", bottom: "0px" }
               }
             )
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: toggle,
-          className: `flex w-full items-center gap-hsp-md text-left text-small font-semibold py-vsp-xs text-fg hover:text-accent hover:underline focus:underline focus:text-accent break-words`,
-          style: { paddingLeft },
-          "aria-expanded": isExpanded,
-          "aria-label": isExpanded ? `Collapse ${node.label}` : `Expand ${node.label}`,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "aspect-square flex items-center justify-center w-[1.5rem] shrink-0 border border-muted", children: /* @__PURE__ */ jsx(ToggleChevron, { isExpanded, className: "text-muted" }) }),
-            /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: labelHtml } })
-          ]
-        }
-      )
-    ] }),
-    isExpanded && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-      NodeList,
-      {
-        nodes: node.children,
-        currentSlug,
-        depth: depth + 1,
-        forceOpen
-      }
-    ) })
-  ] });
-});
-const LeafNode = memo(function LeafNode2({
-  node,
-  currentSlug,
-  depth,
-  isLast
-}) {
-  const labelHtml = useMemo(() => smartBreakToHtml(node.label), [node.label]);
-  if (!node.href) return null;
-  const isActive = node.slug === currentSlug;
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+          /* @__PURE__ */ jsx(
+            ConnectorLinesLive,
+            {
+              depth,
+              isLast,
+              topPad: "calc(0.15rem + var(--spacing-vsp-xs))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Show,
+            {
+              when: computed(() => !!node.value.href),
+              fallback: () => /* @__PURE__ */ jsxs("div", { class: "flex flex-wrap items-center", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "on:click": toggle,
+                    class: "flex flex-1 max-w-full items-center gap-hsp-md text-left text-small font-semibold py-vsp-xs text-fg hover:text-accent hover:underline focus:underline focus:text-accent break-words",
+                    style: { "padding-left": paddingLeft },
+                    "aria-expanded": computed(
+                      () => expanded.value ? "true" : "false"
+                    ),
+                    "aria-label": computed(
+                      () => `${expanded.value ? "Collapse" : "Expand"} ${node.value.label}`
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { class: "aspect-square flex items-center justify-center w-[1.5rem] shrink-0 border border-muted", children: /* @__PURE__ */ jsx(ToggleChevron, { isExpanded: expanded, className: "text-muted" }) }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          rawHtml: computed(() => smartBreakToHtml(node.value.label))
+                        }
+                      )
+                    ]
+                  }
+                ),
+                focusButton
+              ] }),
+              children: () => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  class: computed(
+                    () => `flex w-full items-center text-small font-semibold pt-[0.15rem] ${active.value ? "bg-fg text-bg" : "text-fg"}`
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: computed(() => node.value.href ?? ""),
+                        "aria-current": computed(() => active.value ? "page" : "false"),
+                        class: computed(
+                          () => `flex-1 flex items-start gap-hsp-xs py-vsp-xs hover:underline focus:underline break-words ${active.value ? "text-bg" : "text-fg hover:text-accent focus:text-accent"}`
+                        ),
+                        style: { "padding-left": paddingLeft },
+                        children: [
+                          depth === 0 ? /* @__PURE__ */ jsx("span", { class: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { class: "w-[14px]" }) }) : null,
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              rawHtml: computed(() => smartBreakToHtml(node.value.label))
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    focusButton,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "on:click": toggle,
+                        class: computed(
+                          () => `aspect-square flex items-center justify-center w-[1.5rem] border-y border-l hover:underline focus:underline ${active.value ? "border-bg/30" : "border-muted"}`
+                        ),
+                        "aria-expanded": computed(
+                          () => expanded.value ? "true" : "false"
+                        ),
+                        "aria-label": computed(
+                          () => `${expanded.value ? "Collapse" : "Expand"} ${node.value.label}`
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          ToggleChevron,
+                          {
+                            isExpanded: expanded,
+                            className: computed(
+                              () => active.value ? "text-bg" : "text-muted"
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Show, { when: expanded, children: () => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          NodeList,
+          {
+            nodes: computed(() => node.value.children),
+            currentSlug,
+            depth: depth + 1,
+            forceOpen,
+            scopeControls
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function LeafNode({ node, currentSlug, depth, isLast }) {
+  const active = computed(() => node.value.slug === currentSlug.value);
   const isRoot = depth === 0;
   const paddingLeft = padLeft(depth, isRoot);
-  const outerClass = isRoot ? "border-t border-muted" : !isRoot && isLast ? "pb-vsp-md" : "";
   const topPad = isRoot ? "calc(var(--spacing-vsp-xs) + 0.15rem)" : "var(--spacing-vsp-2xs)";
-  return /* @__PURE__ */ jsx("div", { className: outerClass, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx(ConnectorLines, { depth, isLast, topPad }),
-    /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: node.href,
-        "aria-current": isActive ? "page" : void 0,
-        "data-nav-active": !isRoot && isActive ? "" : void 0,
-        className: isRoot ? `flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)+0.15rem)] pr-hsp-xs lg:pr-hsp-sm text-small font-semibold break-words ${isActive ? "bg-fg text-bg" : "text-fg hover:text-accent hover:underline focus:underline focus:text-accent"}` : `block py-vsp-2xs pr-hsp-xs lg:pr-hsp-sm text-small break-words ${isActive ? "bg-fg font-medium text-bg" : "text-muted hover:text-accent hover:underline focus:underline focus:text-accent"}`,
-        style: { paddingLeft },
-        children: [
-          isRoot && /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { className: `w-[14px] ${isActive ? "text-bg" : ""}` }) }),
-          /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: labelHtml } })
-        ]
-      }
-    )
-  ] }) });
-});
+  return /* @__PURE__ */ jsx(Show, { when: computed(() => !!node.value.href), children: () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: computed(
+        () => isRoot ? "border-t border-muted first:border-t-0" : isLast.value ? "pb-vsp-md" : ""
+      ),
+      children: /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+        /* @__PURE__ */ jsx(ConnectorLinesLive, { depth, isLast, topPad }),
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: computed(() => node.value.href ?? ""),
+            "aria-current": computed(() => active.value ? "page" : "false"),
+            "data-nav-active": computed(
+              () => !isRoot && active.value ? "" : null
+            ),
+            class: computed(
+              () => isRoot ? `flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)_+_0.15rem)] pr-hsp-xs lg:pr-hsp-sm text-small font-semibold break-words ${active.value ? "bg-fg text-bg" : "text-fg hover:text-accent hover:underline focus:underline focus:text-accent"}` : `block py-vsp-2xs pr-hsp-xs lg:pr-hsp-sm text-small break-words ${active.value ? "bg-fg font-medium text-bg" : "text-muted hover:text-accent hover:underline focus:underline focus:text-accent"}`
+            ),
+            style: { "padding-left": paddingLeft },
+            children: [
+              isRoot ? /* @__PURE__ */ jsx("span", { class: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(CategoryLinkIcon, { class: "w-[14px]" }) }) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  rawHtml: computed(() => smartBreakToHtml(node.value.label))
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
 export {
   SidebarTree
 };