@takazudo/zudo-doc 5.6.0 → 5.7.0

package/eject/header/nav-active.ts

@@ -54,12 +54,14 @@ export function pathForMatch(
  * Segment-aware prefix test: nav path `/docs/guides` matches `/docs/guides`
  * and `/docs/guides/...` but NOT `/docs/guideship`.
  *
- * Exported (not just module-private) so `nav-overflow-script.ts` can embed it
- * verbatim via `.toString()` alongside `computeActiveNavPath` — that function
- * closes over this one, so a bare `computeActiveNavPath.toString()` embed
- * would reference an undefined `pathMatchesNavPath` in the browser (see the
- * caution note on `computeActiveNavPath` below). Kept self-contained (no
- * outer references) for the same reason.
+ * Exported (not just module-private) so `scripts/gen-nav-overflow-script.mjs`
+ * can embed it verbatim via `.toString()` alongside `computeActiveNavPath` —
+ * that function closes over this one, so a bare `computeActiveNavPath.toString()`
+ * embed would reference an undefined `pathMatchesNavPath` in the browser (see
+ * the caution note on `computeActiveNavPath` below). Kept self-contained (no
+ * outer references) for the same reason. The generator freezes both into the
+ * committed `nav-overflow-generated-script.ts` literal at package build time
+ * (zudolab/zudo-doc#3534) — this is no longer a live per-module-eval embed.
  */
 export function pathMatchesNavPath(currentPath: string, navPath: string): boolean {
   if (currentPath === navPath) return true;
@@ -69,8 +71,9 @@ export function pathMatchesNavPath(currentPath: string, navPath: string): boolea
 
 /**
  * CAUTION (zudolab/zudo-doc#3398): this closes over `pathMatchesNavPath`
- * above. `nav-overflow-script.ts` embeds both via `.toString()` (never this
- * one alone) so the generated browser script is self-contained.
+ * above. `scripts/gen-nav-overflow-script.mjs` embeds both via `.toString()`
+ * (never this one alone) so the frozen browser script (`./nav-overflow-generated-script.ts`,
+ * zudolab/zudo-doc#3534) is self-contained.
  */
 export function computeActiveNavPath(
   navItems: readonly NavItemLike[],

package/eject/header/nav-class-tokens.ts

@@ -13,11 +13,15 @@
 //
 // Tokens are ARRAYS, not whole strings, because the two consumers need
 // different shapes: `header.tsx` joins them into `class={}` attributes, while
-// the script both spreads them into `classList.add/remove(...)` calls and
-// joins them into `className` assignments. Keeping them composable per-part
-// also lets the overflow-menu recipes (which intentionally differ from the
-// header-bar items in padding/weight/base) reuse the shared color tokens
-// instead of re-typing them.
+// `scripts/gen-nav-overflow-script.mjs` (zudolab/zudo-doc#3534 — the assembly
+// that used to live in `nav-overflow-script.ts` at module-eval time, now
+// frozen into the committed `nav-overflow-generated-script.ts` literal at
+// package build time) reads these arrays off this module's exports and both
+// spreads them into `classList.add/remove(...)` calls and joins them into
+// `className` assignments. Keeping them composable per-part also lets the
+// overflow-menu recipes (which intentionally differ from the header-bar
+// items in padding/weight/base) reuse the shared color tokens instead of
+// re-typing them.
 
 // ── Header-bar top-level item: active-state color toggle ─────────────────
 // setTopActive() (script) ↔ the top-level <a> in renderNavItem() (SSR).

package/eject/header/nav-overflow-generated-script.ts

@@ -0,0 +1,29 @@
+// GENERATED FILE — do not edit by hand.
+// Produced by scripts/gen-nav-overflow-script.mjs (zudolab/zudo-doc#3534,
+// epic #3533) from src/current-path/index.ts (CURRENT_PATH_SCRIPT_PRELUDE),
+// src/header/nav-active.ts (pathMatchesNavPath/computeActiveNavPath,
+// type-stripped), src/header/nav-class-tokens.ts (the twelve class-token
+// arrays), and src/transitions/page-events.ts (AFTER_NAVIGATE_EVENT).
+// Re-run `pnpm --filter @takazudo/zudo-doc gen:nav-overflow-script` (or any
+// build/dev entry point, which already runs it) to regenerate after editing
+// any of those source files.
+//
+// This file is committed to git (mirrors search-widget-script/generated-script.ts,
+// zudolab/zudo-doc#3421 / #3431) — a deliberate departure from this repo's
+// usual gitignored-generated-file convention (routes-src/, virtual-modules.d.ts).
+// Regenerate AND commit the result after editing any of the four source files.
+
+/** Returns the frozen desktop-nav overflow controller IIFE script. NOTE: the
+ * vitest drift guard imports buildNavOverflowScript from
+ * scripts/gen-nav-overflow-script.mjs (a fresh re-generation) — NEVER from
+ * this module: comparing NAV_OVERFLOW_SCRIPT below against this same file's
+ * function would be a vacuous self-comparison. */
+export function buildNavOverflowScript(): string {
+  return "(function () {\n  var cleanupNavOverflow = null;\n\n  function trimSlashes(p) {\n    while (p.length > 1 && p.charAt(p.length - 1) === \"/\") p = p.slice(0, -1);\n    return p || \"/\";\n  }\n\n  function navPathname(a) {\n    try { return trimSlashes(new URL(a.href, location.href).pathname); }\n    catch (e) { return \"\"; }\n  }\n\n  // Explicit current-route override, embedded from current-path/index.ts so\n  // this script cannot drift from the three other read sites\n  // (zudolab/zudo-doc#3398, #3408).\n  var CURRENT_PATH_DATASET_KEY=\"zdCurrentPath\";var readCurrentPath=function readCurrentPath(datasetKey, explicit) {\n  const override = typeof document === \"undefined\" ? void 0 : document.documentElement.dataset[datasetKey];\n  return explicit || override || (typeof window === \"undefined\" ? void 0 : window.location.pathname);\n};\n\n  // Shared matching core (zudolab/zudo-doc#3398): embedded verbatim from\n  // nav-active.ts so this script's longest-match walk cannot drift from the\n  // SSR header's own computeActiveNavPath call (header.tsx). computeActiveNavPath\n  // closes over pathMatchesNavPath, so both are embedded together.\n  var pathMatchesNavPath = function pathMatchesNavPath(currentPath, navPath) {\n  if (currentPath === navPath) return true;\n  const prefix = navPath.endsWith(\"/\") ? navPath : `${navPath}/`;\n  return currentPath.startsWith(prefix);\n};\n  var computeActiveNavPath = function computeActiveNavPath(navItems, pathForMatchValue) {\n  const allNavPaths = navItems.flatMap((item) => {\n    const paths = [item.path];\n    if (item.children) {\n      paths.push(...item.children.map((child) => child.path));\n    }\n    return paths;\n  });\n  return allNavPaths.filter((p) => pathMatchesNavPath(pathForMatchValue, p)).sort((a, b) => b.length - a.length)[0];\n};\n\n  // Recompute which header nav item is \"active\" from the CURRENT URL and\n  // repaint the highlight. SSR sets the active item on first paint, but the\n  // header is persisted across same-locale client-router swaps\n  // (data-zfb-transition-persist), so without this the highlight would stay\n  // frozen on the page where the header was first rendered. Mirrors the\n  // sidebar island's client-side approach (match the current path against\n  // each entry's href) and the SSR longest-match + dropdown-parent rules.\n  // URL-based: hrefs and the current path both carry the base + locale\n  // prefix, so they compare directly without stripping.\n  function applyActiveNav() {\n    var nav = document.querySelector(\"[data-header-nav]\");\n    if (!nav) return;\n    var topItems = Array.from(nav.querySelectorAll(\":scope > [data-nav-item]\"));\n    if (topItems.length === 0) return;\n\n    var cur = trimSlashes(readCurrentPath(CURRENT_PATH_DATASET_KEY));\n\n    // Build NavItemLike-shaped entries from the live DOM so the shared\n    // computeActiveNavPath can do the deepest-match walk — the same call\n    // shape the SSR header uses (matches computeActiveNavPath). A dropdown\n    // missing its own top-level anchor is skipped entirely (path \"\" would\n    // otherwise match every current path — pathMatchesNavPath treats \"\" as\n    // the root \"/\"), mirroring the parentLink guard used below for the same\n    // malformed-markup case.\n    var navItems = [];\n    topItems.forEach(function (it) {\n      var isDropdown = it.hasAttribute(\"data-nav-item-dropdown\");\n      var topA = isDropdown ? it.querySelector(\":scope > a\") : it;\n      if (!topA) return;\n      var children = [];\n      if (isDropdown) {\n        it.querySelectorAll(\":scope > div a\").forEach(function (c) {\n          children.push({ path: navPathname(c) });\n        });\n      }\n      navItems.push({ path: navPathname(topA), children: children });\n    });\n\n    var activePath = computeActiveNavPath(navItems, cur) || \"\";\n\n    function setTopActive(a, active) {\n      if (!a) return;\n      if (active) {\n        a.classList.add(\"bg-fg\", \"text-bg\");\n        a.classList.remove(\"text-muted\", \"hover:text-accent\", \"hover:underline\", \"focus:underline\", \"focus:text-accent\");\n        a.setAttribute(\"aria-current\", \"page\");\n      } else {\n        a.classList.remove(\"bg-fg\", \"text-bg\");\n        a.classList.add(\"text-muted\", \"hover:text-accent\", \"hover:underline\", \"focus:underline\", \"focus:text-accent\");\n        a.removeAttribute(\"aria-current\");\n      }\n    }\n\n    topItems.forEach(function (it) {\n      var isDropdown = it.hasAttribute(\"data-nav-item-dropdown\");\n      var topA = isDropdown ? it.querySelector(\":scope > a\") : it;\n      var topActive = false;\n\n      if (isDropdown) {\n        var parentMatch = !!topA && navPathname(topA) === activePath && activePath !== \"\";\n        var anyChild = false;\n        it.querySelectorAll(\":scope > div a\").forEach(function (c) {\n          var childActive = navPathname(c) === activePath && activePath !== \"\";\n          if (childActive) {\n            anyChild = true;\n            c.setAttribute(\"data-active\", \"\");\n            c.classList.add(\"font-bold\", \"text-accent\");\n            c.classList.remove(\"text-fg\", \"hover:text-accent\", \"focus-visible:text-accent\");\n          } else {\n            c.removeAttribute(\"data-active\");\n            c.classList.remove(\"font-bold\", \"text-accent\");\n            c.classList.add(\"text-fg\", \"hover:text-accent\", \"focus-visible:text-accent\");\n          }\n        });\n        topActive = parentMatch || anyChild;\n        var svg = topA ? topA.querySelector(\"svg\") : null;\n        if (svg) {\n          if (topActive) { svg.classList.add(\"text-bg\"); svg.classList.remove(\"text-muted\"); }\n          else { svg.classList.add(\"text-muted\"); svg.classList.remove(\"text-bg\"); }\n        }\n      } else {\n        topActive = activePath !== \"\" && navPathname(topA) === activePath;\n      }\n\n      setTopActive(topA, topActive);\n    });\n  }\n\n  function initNavOverflow() {\n    if (cleanupNavOverflow) cleanupNavOverflow();\n\n    // Repaint the active highlight for the current URL before measuring /\n    // cloning, so the overflow \"···\" menu mirrors the correct active state.\n    applyActiveNav();\n\n    var nav = document.querySelector(\"[data-header-nav]\");\n    var moreContainer = document.querySelector(\"[data-nav-more]\");\n    var moreMenu = document.querySelector(\"[data-nav-more-menu]\");\n    var moreToggle = document.querySelector(\"[data-nav-more-toggle]\");\n    if (!nav || !moreContainer || !moreMenu || !moreToggle) return;\n\n    var items = Array.from(nav.querySelectorAll(\":scope > [data-nav-item]\"));\n    if (items.length === 0) return;\n\n    var controller = new AbortController();\n\n    function update() {\n      items.forEach(function (el) { el.style.display = \"\"; });\n      moreContainer.style.display = \"\";\n      moreMenu.innerHTML = \"\";\n      moreMenu.classList.add(\"hidden\");\n      moreToggle.setAttribute(\"aria-expanded\", \"false\");\n\n      var itemWidths = items.map(function (el) { return el.offsetWidth; });\n      var moreWidth = moreContainer.offsetWidth;\n      var navGap = parseFloat(getComputedStyle(nav).columnGap) || 0;\n      var available = nav.clientWidth;\n\n      if (available <= 0) {\n        moreContainer.style.display = \"none\";\n        return;\n      }\n\n      var total = 0;\n      for (var i = 0; i < itemWidths.length; i++) {\n        total += itemWidths[i] + (i > 0 ? navGap : 0);\n      }\n\n      if (total <= available) {\n        moreContainer.style.display = \"none\";\n        return;\n      }\n\n      var used = 0;\n      var cutoffIndex = 0;\n\n      for (var i2 = 0; i2 < items.length; i2++) {\n        var w = itemWidths[i2] + (i2 > 0 ? navGap : 0);\n        if (used + w > available - moreWidth - navGap) break;\n        used += w;\n        cutoffIndex = i2 + 1;\n      }\n\n      for (var i3 = cutoffIndex; i3 < items.length; i3++) {\n        items[i3].style.display = \"none\";\n      }\n\n      for (var i4 = cutoffIndex; i4 < items.length; i4++) {\n        var el = items[i4];\n        var isDropdown = el.hasAttribute(\"data-nav-item-dropdown\");\n\n        if (isDropdown) {\n          var parentLink = el.querySelector(\":scope > a\");\n          var childLinks = el.querySelectorAll(\":scope > div a\");\n          if (parentLink) {\n            var li = document.createElement(\"li\");\n            var a = document.createElement(\"a\");\n            a.href = parentLink.href;\n            var parentText = parentLink.textContent ? parentLink.textContent.trim().replace(/\\s+/g, \" \") : \"\";\n            a.textContent = parentText;\n            a.className = \"block px-hsp-md py-vsp-2xs text-small font-bold hover:bg-accent/10 hover:underline focus-visible:underline focus-visible:text-accent text-fg hover:text-accent\";\n            if (parentLink.getAttribute(\"aria-current\") === \"page\") {\n              a.className += \" text-accent\";\n            }\n            li.appendChild(a);\n            moreMenu.appendChild(li);\n          }\n          childLinks.forEach(function (child) {\n            var li = document.createElement(\"li\");\n            var a = document.createElement(\"a\");\n            a.href = child.href;\n            a.textContent = child.textContent ? child.textContent.trim() : \"\";\n            var isChildActive = child.hasAttribute(\"data-active\");\n            a.className = isChildActive\n              ? \"block pl-hsp-xl pr-hsp-md py-vsp-2xs text-small font-bold text-accent hover:bg-accent/10 hover:underline focus-visible:underline\"\n              : \"block pl-hsp-xl pr-hsp-md py-vsp-2xs text-small text-fg hover:bg-accent/10 hover:text-accent hover:underline focus-visible:underline focus-visible:text-accent\";\n            li.appendChild(a);\n            moreMenu.appendChild(li);\n          });\n        } else {\n          var anchor = el;\n          var li2 = document.createElement(\"li\");\n          var a2 = document.createElement(\"a\");\n          a2.href = anchor.href;\n          a2.textContent = anchor.textContent ? anchor.textContent.trim() : \"\";\n          a2.className = \"block px-hsp-md py-vsp-2xs text-small hover:bg-accent/10 hover:underline focus-visible:underline focus-visible:text-accent text-fg hover:text-accent\";\n          if (anchor.getAttribute(\"aria-current\") === \"page\") {\n            a2.className += \" font-bold text-accent\";\n          }\n          li2.appendChild(a2);\n          moreMenu.appendChild(li2);\n        }\n      }\n    }\n\n    moreToggle.addEventListener(\"click\", function () {\n      var isOpen = !moreMenu.classList.contains(\"hidden\");\n      moreMenu.classList.toggle(\"hidden\", isOpen);\n      moreToggle.setAttribute(\"aria-expanded\", String(!isOpen));\n    }, { signal: controller.signal });\n\n    document.addEventListener(\"click\", function (e) {\n      if (!moreContainer.contains(e.target)) {\n        moreMenu.classList.add(\"hidden\");\n        moreToggle.setAttribute(\"aria-expanded\", \"false\");\n      }\n    }, { signal: controller.signal });\n\n    document.addEventListener(\"keydown\", function (e) {\n      if (e.key !== \"Escape\") return;\n      if (!moreMenu.classList.contains(\"hidden\")) {\n        moreMenu.classList.add(\"hidden\");\n        moreToggle.setAttribute(\"aria-expanded\", \"false\");\n        moreToggle.focus();\n        return;\n      }\n      var active = document.activeElement;\n      var dropdown = active && active.closest ? active.closest(\"[data-nav-item-dropdown]\") : null;\n      if (dropdown && active && active.blur) {\n        active.blur();\n      }\n    }, { signal: controller.signal });\n\n    var dropdowns = nav.querySelectorAll(\"[data-nav-item-dropdown]\");\n    dropdowns.forEach(function (dd) {\n      var trigger = dd.querySelector(\":scope > a\");\n      if (!trigger) return;\n      function setExpanded(v) {\n        trigger.setAttribute(\"aria-expanded\", String(v));\n      }\n      dd.addEventListener(\"mouseenter\", function () { setExpanded(true); }, { signal: controller.signal });\n      dd.addEventListener(\"mouseleave\", function () { setExpanded(false); }, { signal: controller.signal });\n      dd.addEventListener(\"focusin\", function () { setExpanded(true); }, { signal: controller.signal });\n      dd.addEventListener(\"focusout\", function (e) {\n        if (!dd.contains(e.relatedTarget)) {\n          setExpanded(false);\n        }\n      }, { signal: controller.signal });\n    });\n\n    var ro = new ResizeObserver(update);\n    ro.observe(nav);\n    controller.signal.addEventListener(\"abort\", function () { ro.disconnect(); });\n\n    document.fonts.ready.then(update);\n\n    update();\n\n    cleanupNavOverflow = function () { controller.abort(); };\n  }\n\n  initNavOverflow();\n  document.addEventListener(\"zfb:after-swap\", initNavOverflow);\n})();";
+}
+
+/** Client-side script string for the desktop header nav overflow controller.
+ * See the module header of this generator for the embedding contract; see
+ * current-path/index.ts / header/nav-active.ts / header/nav-class-tokens.ts /
+ * transitions/page-events.ts for the frozen sources. */
+export const NAV_OVERFLOW_SCRIPT: string = buildNavOverflowScript();

package/eject/header/nav-overflow-script.ts

@@ -29,320 +29,29 @@
 // Kept as a separate module (rather than inlined in `header.tsx`) so
 // the JSX file stays focused on markup and so future edits to the
 // script can be reviewed in isolation.
-
-import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
-import { CURRENT_PATH_SCRIPT_PRELUDE } from "../current-path/index.js";
-import { computeActiveNavPath, pathMatchesNavPath } from "./nav-active.js";
-import {
-  NAV_CHEVRON_ACTIVE,
-  NAV_CHEVRON_INACTIVE,
-  NAV_CHILD_ACTIVE,
-  NAV_CHILD_INACTIVE,
-  NAV_MENU_CHILD_ACTIVE,
-  NAV_MENU_CHILD_INACTIVE,
-  NAV_MENU_PARENT,
-  NAV_MENU_PARENT_ACTIVE_SUFFIX,
-  NAV_MENU_PLAIN,
-  NAV_MENU_PLAIN_ACTIVE_SUFFIX,
-  NAV_TOP_ACTIVE,
-  NAV_TOP_INACTIVE,
-} from "./nav-class-tokens.js";
-
-// The class lists spliced into the script below are the SSR ↔ runtime
-// lockstep: they must match the strings header.tsx renders. Both files import
-// them from ./nav-class-tokens so they cannot drift (zudolab/zudo-doc#3023).
-// The script ships as plain text via dangerouslySetInnerHTML and cannot import
-// the arrays at runtime, so these helpers splice the token lists into the
-// script string at module-eval (build) time instead.
-
-// -> `"bg-fg", "text-bg"` — argument list for a classList.add/remove(...) call.
-const clsArgs = (tokens: readonly string[]): string =>
-  tokens.map((token) => JSON.stringify(token)).join(", ");
-
-// -> `"bg-fg text-bg"` — a single class-string literal for `className = ...`.
-const clsLiteral = (tokens: readonly string[]): string =>
-  JSON.stringify(tokens.join(" "));
-
-// -> `" font-bold text-accent"` — leading-space append for `className += ...`.
-const clsAppend = (tokens: readonly string[]): string =>
-  JSON.stringify(" " + tokens.join(" "));
-
-export const NAV_OVERFLOW_SCRIPT = `(function () {
-  var cleanupNavOverflow = null;
-
-  function trimSlashes(p) {
-    while (p.length > 1 && p.charAt(p.length - 1) === "/") p = p.slice(0, -1);
-    return p || "/";
-  }
-
-  function navPathname(a) {
-    try { return trimSlashes(new URL(a.href, location.href).pathname); }
-    catch (e) { return ""; }
-  }
-
-  // Explicit current-route override, embedded from current-path/index.ts so
-  // this script cannot drift from the three other read sites
-  // (zudolab/zudo-doc#3398, #3408).
-  ${CURRENT_PATH_SCRIPT_PRELUDE}
-
-  // Shared matching core (zudolab/zudo-doc#3398): embedded verbatim from
-  // nav-active.ts so this script's longest-match walk cannot drift from the
-  // SSR header's own computeActiveNavPath call (header.tsx). computeActiveNavPath
-  // closes over pathMatchesNavPath, so both are embedded together.
-  var pathMatchesNavPath = ${pathMatchesNavPath.toString()};
-  var computeActiveNavPath = ${computeActiveNavPath.toString()};
-
-  // Recompute which header nav item is "active" from the CURRENT URL and
-  // repaint the highlight. SSR sets the active item on first paint, but the
-  // header is persisted across same-locale client-router swaps
-  // (data-zfb-transition-persist), so without this the highlight would stay
-  // frozen on the page where the header was first rendered. Mirrors the
-  // sidebar island's client-side approach (match the current path against
-  // each entry's href) and the SSR longest-match + dropdown-parent rules.
-  // URL-based: hrefs and the current path both carry the base + locale
-  // prefix, so they compare directly without stripping.
-  function applyActiveNav() {
-    var nav = document.querySelector("[data-header-nav]");
-    if (!nav) return;
-    var topItems = Array.from(nav.querySelectorAll(":scope > [data-nav-item]"));
-    if (topItems.length === 0) return;
-
-    var cur = trimSlashes(readCurrentPath(CURRENT_PATH_DATASET_KEY));
-
-    // Build NavItemLike-shaped entries from the live DOM so the shared
-    // computeActiveNavPath can do the deepest-match walk — the same call
-    // shape the SSR header uses (matches computeActiveNavPath). A dropdown
-    // missing its own top-level anchor is skipped entirely (path "" would
-    // otherwise match every current path — pathMatchesNavPath treats "" as
-    // the root "/"), mirroring the parentLink guard used below for the same
-    // malformed-markup case.
-    var navItems = [];
-    topItems.forEach(function (it) {
-      var isDropdown = it.hasAttribute("data-nav-item-dropdown");
-      var topA = isDropdown ? it.querySelector(":scope > a") : it;
-      if (!topA) return;
-      var children = [];
-      if (isDropdown) {
-        it.querySelectorAll(":scope > div a").forEach(function (c) {
-          children.push({ path: navPathname(c) });
-        });
-      }
-      navItems.push({ path: navPathname(topA), children: children });
-    });
-
-    var activePath = computeActiveNavPath(navItems, cur) || "";
-
-    function setTopActive(a, active) {
-      if (!a) return;
-      if (active) {
-        a.classList.add(${clsArgs(NAV_TOP_ACTIVE)});
-        a.classList.remove(${clsArgs(NAV_TOP_INACTIVE)});
-        a.setAttribute("aria-current", "page");
-      } else {
-        a.classList.remove(${clsArgs(NAV_TOP_ACTIVE)});
-        a.classList.add(${clsArgs(NAV_TOP_INACTIVE)});
-        a.removeAttribute("aria-current");
-      }
-    }
-
-    topItems.forEach(function (it) {
-      var isDropdown = it.hasAttribute("data-nav-item-dropdown");
-      var topA = isDropdown ? it.querySelector(":scope > a") : it;
-      var topActive = false;
-
-      if (isDropdown) {
-        var parentMatch = !!topA && navPathname(topA) === activePath && activePath !== "";
-        var anyChild = false;
-        it.querySelectorAll(":scope > div a").forEach(function (c) {
-          var childActive = navPathname(c) === activePath && activePath !== "";
-          if (childActive) {
-            anyChild = true;
-            c.setAttribute("data-active", "");
-            c.classList.add(${clsArgs(NAV_CHILD_ACTIVE)});
-            c.classList.remove(${clsArgs(NAV_CHILD_INACTIVE)});
-          } else {
-            c.removeAttribute("data-active");
-            c.classList.remove(${clsArgs(NAV_CHILD_ACTIVE)});
-            c.classList.add(${clsArgs(NAV_CHILD_INACTIVE)});
-          }
-        });
-        topActive = parentMatch || anyChild;
-        var svg = topA ? topA.querySelector("svg") : null;
-        if (svg) {
-          if (topActive) { svg.classList.add(${clsArgs(NAV_CHEVRON_ACTIVE)}); svg.classList.remove(${clsArgs(NAV_CHEVRON_INACTIVE)}); }
-          else { svg.classList.add(${clsArgs(NAV_CHEVRON_INACTIVE)}); svg.classList.remove(${clsArgs(NAV_CHEVRON_ACTIVE)}); }
-        }
-      } else {
-        topActive = activePath !== "" && navPathname(topA) === activePath;
-      }
-
-      setTopActive(topA, topActive);
-    });
-  }
-
-  function initNavOverflow() {
-    if (cleanupNavOverflow) cleanupNavOverflow();
-
-    // Repaint the active highlight for the current URL before measuring /
-    // cloning, so the overflow "···" menu mirrors the correct active state.
-    applyActiveNav();
-
-    var nav = document.querySelector("[data-header-nav]");
-    var moreContainer = document.querySelector("[data-nav-more]");
-    var moreMenu = document.querySelector("[data-nav-more-menu]");
-    var moreToggle = document.querySelector("[data-nav-more-toggle]");
-    if (!nav || !moreContainer || !moreMenu || !moreToggle) return;
-
-    var items = Array.from(nav.querySelectorAll(":scope > [data-nav-item]"));
-    if (items.length === 0) return;
-
-    var controller = new AbortController();
-
-    function update() {
-      items.forEach(function (el) { el.style.display = ""; });
-      moreContainer.style.display = "";
-      moreMenu.innerHTML = "";
-      moreMenu.classList.add("hidden");
-      moreToggle.setAttribute("aria-expanded", "false");
-
-      var itemWidths = items.map(function (el) { return el.offsetWidth; });
-      var moreWidth = moreContainer.offsetWidth;
-      var navGap = parseFloat(getComputedStyle(nav).columnGap) || 0;
-      var available = nav.clientWidth;
-
-      if (available <= 0) {
-        moreContainer.style.display = "none";
-        return;
-      }
-
-      var total = 0;
-      for (var i = 0; i < itemWidths.length; i++) {
-        total += itemWidths[i] + (i > 0 ? navGap : 0);
-      }
-
-      if (total <= available) {
-        moreContainer.style.display = "none";
-        return;
-      }
-
-      var used = 0;
-      var cutoffIndex = 0;
-
-      for (var i2 = 0; i2 < items.length; i2++) {
-        var w = itemWidths[i2] + (i2 > 0 ? navGap : 0);
-        if (used + w > available - moreWidth - navGap) break;
-        used += w;
-        cutoffIndex = i2 + 1;
-      }
-
-      for (var i3 = cutoffIndex; i3 < items.length; i3++) {
-        items[i3].style.display = "none";
-      }
-
-      for (var i4 = cutoffIndex; i4 < items.length; i4++) {
-        var el = items[i4];
-        var isDropdown = el.hasAttribute("data-nav-item-dropdown");
-
-        if (isDropdown) {
-          var parentLink = el.querySelector(":scope > a");
-          var childLinks = el.querySelectorAll(":scope > div a");
-          if (parentLink) {
-            var li = document.createElement("li");
-            var a = document.createElement("a");
-            a.href = parentLink.href;
-            var parentText = parentLink.textContent ? parentLink.textContent.trim().replace(/\\s+/g, " ") : "";
-            a.textContent = parentText;
-            a.className = ${clsLiteral(NAV_MENU_PARENT)};
-            if (parentLink.getAttribute("aria-current") === "page") {
-              a.className += ${clsAppend(NAV_MENU_PARENT_ACTIVE_SUFFIX)};
-            }
-            li.appendChild(a);
-            moreMenu.appendChild(li);
-          }
-          childLinks.forEach(function (child) {
-            var li = document.createElement("li");
-            var a = document.createElement("a");
-            a.href = child.href;
-            a.textContent = child.textContent ? child.textContent.trim() : "";
-            var isChildActive = child.hasAttribute("data-active");
-            a.className = isChildActive
-              ? ${clsLiteral(NAV_MENU_CHILD_ACTIVE)}
-              : ${clsLiteral(NAV_MENU_CHILD_INACTIVE)};
-            li.appendChild(a);
-            moreMenu.appendChild(li);
-          });
-        } else {
-          var anchor = el;
-          var li2 = document.createElement("li");
-          var a2 = document.createElement("a");
-          a2.href = anchor.href;
-          a2.textContent = anchor.textContent ? anchor.textContent.trim() : "";
-          a2.className = ${clsLiteral(NAV_MENU_PLAIN)};
-          if (anchor.getAttribute("aria-current") === "page") {
-            a2.className += ${clsAppend(NAV_MENU_PLAIN_ACTIVE_SUFFIX)};
-          }
-          li2.appendChild(a2);
-          moreMenu.appendChild(li2);
-        }
-      }
-    }
-
-    moreToggle.addEventListener("click", function () {
-      var isOpen = !moreMenu.classList.contains("hidden");
-      moreMenu.classList.toggle("hidden", isOpen);
-      moreToggle.setAttribute("aria-expanded", String(!isOpen));
-    }, { signal: controller.signal });
-
-    document.addEventListener("click", function (e) {
-      if (!moreContainer.contains(e.target)) {
-        moreMenu.classList.add("hidden");
-        moreToggle.setAttribute("aria-expanded", "false");
-      }
-    }, { signal: controller.signal });
-
-    document.addEventListener("keydown", function (e) {
-      if (e.key !== "Escape") return;
-      if (!moreMenu.classList.contains("hidden")) {
-        moreMenu.classList.add("hidden");
-        moreToggle.setAttribute("aria-expanded", "false");
-        moreToggle.focus();
-        return;
-      }
-      var active = document.activeElement;
-      var dropdown = active && active.closest ? active.closest("[data-nav-item-dropdown]") : null;
-      if (dropdown && active && active.blur) {
-        active.blur();
-      }
-    }, { signal: controller.signal });
-
-    var dropdowns = nav.querySelectorAll("[data-nav-item-dropdown]");
-    dropdowns.forEach(function (dd) {
-      var trigger = dd.querySelector(":scope > a");
-      if (!trigger) return;
-      function setExpanded(v) {
-        trigger.setAttribute("aria-expanded", String(v));
-      }
-      dd.addEventListener("mouseenter", function () { setExpanded(true); }, { signal: controller.signal });
-      dd.addEventListener("mouseleave", function () { setExpanded(false); }, { signal: controller.signal });
-      dd.addEventListener("focusin", function () { setExpanded(true); }, { signal: controller.signal });
-      dd.addEventListener("focusout", function (e) {
-        if (!dd.contains(e.relatedTarget)) {
-          setExpanded(false);
-        }
-      }, { signal: controller.signal });
-    });
-
-    var ro = new ResizeObserver(update);
-    ro.observe(nav);
-    controller.signal.addEventListener("abort", function () { ro.disconnect(); });
-
-    document.fonts.ready.then(update);
-
-    update();
-
-    cleanupNavOverflow = function () { controller.abort(); };
-  }
-
-  initNavOverflow();
-  document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)}, initNavOverflow);
-})();`;
+//
+// FROZEN (zudolab/zudo-doc#3534, epic #3533): the script body used to be
+// assembled here, at module-eval time, from three `Function.prototype.toString()`
+// embeddings (`CURRENT_PATH_SCRIPT_PRELUDE`, `pathMatchesNavPath`,
+// `computeActiveNavPath`) plus splice formatters over the twelve
+// `nav-class-tokens.ts` arrays. That made the emitted bytes depend on the
+// CONSUMING bundler (zudolab/zudo-doc#3502), so no CSP hash could be pinned
+// against a stable value. The assembly logic now lives in
+// `scripts/gen-nav-overflow-script.mjs`, which freezes it ONCE at package
+// build time into the committed `./nav-overflow-generated-script.ts` literal
+// re-exported below. Regenerate via
+// `pnpm --filter @takazudo/zudo-doc gen:nav-overflow-script` after editing
+// any of the four source files it reads from (see the generator's header
+// comment for the list); the vitest guard at
+// `src/header/__tests__/nav-overflow-script.test.ts` proves the committed
+// literal still matches a fresh regeneration.
+//
+// EJECTED COPIES (`zudo-doc eject header`): the generator is NOT shipped, so
+// in an ejected tree the re-exported literal is permanently frozen — editing
+// the ejected `./nav-class-tokens.ts` or `./nav-active.ts` changes the SSR
+// markup (header.tsx imports them live) but NOT this client script, breaking
+// the SSR ↔ runtime class lockstep those files exist to guarantee. To change
+// the client script in an ejected copy, edit the literal in
+// `./nav-overflow-generated-script.ts` directly (it is plain JS in a string)
+// and keep it in step with your token edits by hand.
+export { NAV_OVERFLOW_SCRIPT } from "./nav-overflow-generated-script.js";

package/eject/sidebar-toggle-island/index.tsx

@@ -7,10 +7,22 @@
 import { useState, useEffect } from "preact/hooks";
 // After zudolab/zudo-doc#1335 the host components pull lifecycle event names
 // from the v2 transitions module rather than hard-coding `astro:*` literals.
-import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
+// `ensureNestedIslandPropsRefresh` is imported through the barrel (not the
+// deep `./nested-island-props-refresh.js` path) on purpose: eject rewrites
+// EVERY `../transitions/<anything>.js` import to the single specifier
+// `@takazudo/zudo-doc/transitions`, so two distinct relative imports would
+// collapse into duplicate import statements in an ejected copy.
+import { AFTER_NAVIGATE_EVENT, ensureNestedIslandPropsRefresh } from "../transitions/index.js";
 import { SidebarTree } from "../sidebar-tree-island/index.js";
 import type { SidebarNavNode, SidebarRootMenuItem, SidebarLocaleLink } from "../sidebar/types.js";
 
+// This island lives INSIDE the persisted `<header>`, so a same-locale swap
+// lifts it verbatim and would re-mount it from the previous page's serialized
+// props (zudolab/zudo-doc#3525). The refresh has to outlive the island's own
+// mount/unmount cycle across a swap, so it is installed at document lifetime
+// here rather than from an effect. SSR evaluation is a safe no-op.
+ensureNestedIslandPropsRefresh();
+
 const cx = (...classes: Array<string | false | null | undefined>) =>
   classes.filter(Boolean).join(" ");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/zudo-doc",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "type": "module",
   "description": "zudo-doc framework primitives layer that sits on top of zfb's engine — sidebar, theme, TOC, breadcrumb, layouts, head injection, View Transitions, SSR-skip wrappers (per ADR-003).",
   "license": "MIT",
@@ -672,16 +672,19 @@
     "typescript": "^5.0.0",
     "vitest": "^4.1.0",
     "zod": "^4.3.6",
-    "@takazudo/zudo-doc-history-server": "5.6.0"
+    "@takazudo/zudo-doc-history-server": "5.7.0"
   },
   "scripts": {
     "gen:search-widget-script": "node scripts/gen-search-widget-script.mjs",
-    "build": "node scripts/gen-search-widget-script.mjs && tsup && tsc -p tsconfig.build.json",
-    "predev": "node ../../scripts/ensure-workspace-build.mjs && node scripts/gen-search-widget-script.mjs",
+    "gen:nav-overflow-script": "node scripts/gen-nav-overflow-script.mjs",
+    "build": "node scripts/gen-search-widget-script.mjs && node scripts/gen-nav-overflow-script.mjs && tsup && tsc -p tsconfig.build.json",
+    "predev": "node ../../scripts/ensure-workspace-build.mjs && node scripts/gen-search-widget-script.mjs && node scripts/gen-nav-overflow-script.mjs",
     "// dev": "Do NOT add `--continue-on-error` here. It stops a fatal watcher exit from cascading, but the dead watcher then fails silently — a dead dev:dts leaves dist/*.d.ts frozen while the JS keeps updating, which typechecks cleanly against stale types instead of failing loudly like #3113's absent declarations did. See the #3129 section in CLAUDE.md.",
     "dev": "run-p dev:js dev:dts",
     "dev:js": "tsup --watch",
     "dev:dts": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "// check:prepack-contract": "check:search-widget-drift and check:nav-overflow-drift run here (not just b4push/CI) because `prepare` regenerates BOTH frozen literals unconditionally — without a prepack gate, packing from a tree where a source changed but a literal was never re-committed would silently publish new script bytes and break every consumer's pinned CSP hash (#3534/#3535 for nav-overflow; #3540 extended the same gate to search-widget, the exact failure class the freezes exist to prevent).",
+    "check:prepack-contract": "pnpm --dir ../.. check:search-widget-drift && pnpm --dir ../.. check:nav-overflow-drift && pnpm --dir ../.. gen:changelog && node scripts/check-theme-css.mjs && node scripts/check-safelist.mjs && node scripts/check-content-css.mjs && node scripts/check-page-loading-css.mjs && node scripts/check-features-css.mjs && node scripts/check-theme-packs.mjs && node scripts/check-catalog.mjs && node scripts/check-site-schema.mjs && node scripts/check-plugins.mjs && node scripts/check-plugin-resolution.mjs && node scripts/check-eject-sources.mjs && node scripts/check-routes-src.mjs && node scripts/check-shim-artifacts.mjs && node scripts/check-virtual-modules.mjs && node bin/gen-component-tokens.mjs --check",
     "test:plugin-resolution": "node scripts/check-plugin-resolution.mjs",
     "test": "vitest run --config vitest.config.ts",
     "test:slow": "vitest run --config vitest.slow.config.ts",