create-zudo-doc 0.2.14 → 0.2.16

package/dist/cli.d.ts

@@ -22,6 +22,7 @@ export interface CliArgs {
     tauri?: boolean;
     tauriDev?: boolean;
     footerNavGroup?: boolean;
+    dynamicPageTransition?: boolean;
     footerCopyright?: boolean;
     changelog?: boolean;
     tagGovernance?: boolean;

package/dist/constants.js

@@ -199,6 +199,13 @@ export const FEATURES = [
         default: true,
         cliFlag: "image-enlarge",
     },
+    {
+        value: "dynamicPageTransition",
+        label: "Dynamic page transition",
+        hint: "SPA-style page transition with history handling",
+        default: true,
+        cliFlag: "dynamic-page-transition",
+    },
     {
         value: "footerCopyright",
         label: "Footer copyright",

package/dist/features/dynamic-page-transition.d.ts

@@ -0,0 +1,21 @@
+import type { FeatureModule } from "../compose.js";
+/**
+ * Dynamic page transition feature.
+ *
+ * When enabled, wires the SPA client-side router (ClientRouterBootstrap
+ * island) and the page-loading overlay (PageLoadingOverlay, pure SSR) into
+ * body-end-islands, and injects the View-Transitions CSS + page-loading
+ * overlay CSS into global.css.
+ *
+ * Bug fix (#2265): the page-loading overlay CSS (.page-loading-overlay /
+ * .page-loading-spinner / @keyframes page-loading-spin / [data-zd-nav-pending])
+ * was never reaching scaffolded projects because it lived unconditionally in
+ * the host global.css but had no corresponding injection for the template.
+ * Gating this feature makes both the JS island and the CSS land together.
+ *
+ * The ClientRouterBootstrap component lives in
+ * templates/features/dynamicPageTransition/files/src/components/ and is
+ * byte-identical to the host src/components/client-router-bootstrap.tsx.
+ * The feature-template drift checker enforces this parity automatically.
+ */
+export declare const dynamicPageTransitionFeature: FeatureModule;

package/dist/features/dynamic-page-transition.js

@@ -0,0 +1,240 @@
+/**
+ * Dynamic page transition feature.
+ *
+ * When enabled, wires the SPA client-side router (ClientRouterBootstrap
+ * island) and the page-loading overlay (PageLoadingOverlay, pure SSR) into
+ * body-end-islands, and injects the View-Transitions CSS + page-loading
+ * overlay CSS into global.css.
+ *
+ * Bug fix (#2265): the page-loading overlay CSS (.page-loading-overlay /
+ * .page-loading-spinner / @keyframes page-loading-spin / [data-zd-nav-pending])
+ * was never reaching scaffolded projects because it lived unconditionally in
+ * the host global.css but had no corresponding injection for the template.
+ * Gating this feature makes both the JS island and the CSS land together.
+ *
+ * The ClientRouterBootstrap component lives in
+ * templates/features/dynamicPageTransition/files/src/components/ and is
+ * byte-identical to the host src/components/client-router-bootstrap.tsx.
+ * The feature-template drift checker enforces this parity automatically.
+ */
+export const dynamicPageTransitionFeature = () => ({
+    name: "dynamicPageTransition",
+    injections: [
+        // 1. Import ClientRouterBootstrap and PageLoadingOverlay.
+        //    Inserted AFTER the `// @slot:body-end-islands:imports` anchor.
+        {
+            file: "pages/lib/_body-end-islands.tsx",
+            anchor: "// @slot:body-end-islands:imports",
+            position: "after",
+            content: `import ClientRouterBootstrap from "@/components/client-router-bootstrap";
+import { PageLoadingOverlay } from "@takazudo/zudo-doc/page-loading";`,
+        },
+        // 2. Stable island marker name for ClientRouterBootstrap.
+        //    Inserted AFTER the `// @slot:body-end-islands:display-names` anchor.
+        {
+            file: "pages/lib/_body-end-islands.tsx",
+            anchor: "// @slot:body-end-islands:display-names",
+            position: "after",
+            content: `(ClientRouterBootstrap as { displayName?: string }).displayName =
+  "ClientRouterBootstrap";`,
+        },
+        // 3. Gated island mount + PageLoadingOverlay.
+        //    Inserted AFTER the `{/* @slot:body-end-islands:extra-islands */}` anchor.
+        //    Gated on `settings.dynamicPageTransition` — mirrors the designTokenPanel
+        //    and aiAssistant gating patterns in the same file.
+        //    ClientRouterBootstrap: hydrates on "load" so the SPA-router click
+        //    intercept is registered as soon as the islands runtime mounts the marker
+        //    (zudolab/zudo-doc#1524 W7A fix). PageLoadingOverlay: pure SSR — the
+        //    component emits its overlay div and the inline script that wires
+        //    zfb:before-preparation / zfb:after-swap listeners at runtime.
+        {
+            file: "pages/lib/_body-end-islands.tsx",
+            anchor: "{/* @slot:body-end-islands:extra-islands */}",
+            position: "after",
+            content: `      {settings.dynamicPageTransition ? (
+        <>
+          {/* Pure SSR — no Island wrap. The component emits its overlay div,
+              inline styles, and a small inline script that self-wires
+              zfb:before-preparation / zfb:after-swap listeners at runtime. */}
+          <PageLoadingOverlay />
+          {Island({
+            when: "load",
+            children: <ClientRouterBootstrap />,
+          }) as unknown as VNode}
+        </>
+      ) : null}`,
+        },
+        // 4. View-Transitions CSS (chrome extraction + cross-fade + reduced motion).
+        //    Injected AFTER `/* @slot:global-css:feature-styles */` in global.css.
+        //    These rules are required for SPA page transitions via ClientRouter.
+        {
+            file: "src/styles/global.css",
+            anchor: "/* @slot:global-css:feature-styles */",
+            position: "after",
+            content: `/* Root cross-fade for same-document View Transitions (Strategy B).
+ *
+ * @view-transition { navigation: auto; } (Strategy A, cross-document) is
+ * deleted — Strategy B uses <ClientRouter /> which drives same-document
+ * transitions via document.startViewTransition on each navigation.
+ *
+ * Chrome extraction via view-transition-name (Strategy B+, zudolab/zudo-doc#1558):
+ * <header>, <aside id="desktop-sidebar">, <footer>, and the desktop-sidebar-toggle
+ * button each carry a data-zfb-transition-persist attribute whose value is keyed
+ * by locale and nav-section. The four attribute selectors below assign a stable
+ * view-transition-name based on the attribute value prefix, extracting those
+ * elements from the root snapshot into their own named layers:
+ *   - header-{lang}          → zfb-header
+ *   - sidebar-{locale}-…     → zfb-sidebar
+ *   - footer-{lang}          → zfb-footer
+ *   - desktop-sidebar-toggle → zfb-sidebar-toggle
+ *
+ * Once extracted, the root cross-fade animates only non-chrome content (main,
+ * article, TOC, etc.). The twelve ::view-transition-{old,new,group}(<name>)
+ * rules disable animation for all four chrome layers. The group pseudo must be
+ * neutralised too — even when old/new are static the group container can still
+ * produce a geometry-morph animation when snapshot size/position differs.
+ *
+ * Entry/exit cross-fade (zudolab/zudo-doc#2072): animation: none is only
+ * correct when the chrome element exists on BOTH pages of a navigation.
+ * When it exists on one side only (docs page with sidebar → top page
+ * without), the named group holds a single snapshot — frozen at full
+ * opacity for the whole transition, then dropped abruptly at finish. The
+ * :only-child rules below detect that one-sided case and cross-fade the
+ * lone snapshot in sync with the root content fade (spec-standard
+ * entry/exit pattern; :only-child outranks the animation: none rules via
+ * the extra pseudo-class specificity). */
+
+/* Chrome extraction — assign view-transition-name from data-zfb-transition-persist */
+[data-zfb-transition-persist^="header-"]               { view-transition-name: zfb-header; }
+[data-zfb-transition-persist^="sidebar-"]              { view-transition-name: zfb-sidebar; }
+[data-zfb-transition-persist^="footer-"]               { view-transition-name: zfb-footer; }
+[data-zfb-transition-persist="desktop-sidebar-toggle"] { view-transition-name: zfb-sidebar-toggle; }
+
+/* Disable animation for all four chrome layers (old, new, and group) */
+::view-transition-old(zfb-header),
+::view-transition-new(zfb-header),
+::view-transition-group(zfb-header),
+::view-transition-old(zfb-sidebar),
+::view-transition-new(zfb-sidebar),
+::view-transition-group(zfb-sidebar),
+::view-transition-old(zfb-footer),
+::view-transition-new(zfb-footer),
+::view-transition-group(zfb-footer),
+::view-transition-old(zfb-sidebar-toggle),
+::view-transition-new(zfb-sidebar-toggle),
+::view-transition-group(zfb-sidebar-toggle) { animation: none; }
+
+/* Entry/exit: chrome element present on one side only (#2072).
+ * Exit — lone old snapshot fades out with the content cross-fade. */
+::view-transition-old(zfb-header):only-child,
+::view-transition-old(zfb-sidebar):only-child,
+::view-transition-old(zfb-footer):only-child,
+::view-transition-old(zfb-sidebar-toggle):only-child {
+  animation: 150ms ease-in both contentFadeOut;
+}
+/* Entry — lone new snapshot fades in with the content cross-fade. */
+::view-transition-new(zfb-header):only-child,
+::view-transition-new(zfb-sidebar):only-child,
+::view-transition-new(zfb-footer):only-child,
+::view-transition-new(zfb-sidebar-toggle):only-child {
+  animation: 300ms ease-out both contentFadeIn;
+}
+
+/* Root cross-fade rules — animate only the non-chrome snapshot */
+::view-transition-old(root) {
+  animation: 150ms ease-in both contentFadeOut;
+}
+::view-transition-new(root) {
+  animation: 300ms ease-out both contentFadeIn;
+}
+
+/* Reduced motion: collapse all view-transition animation to an instant
+ * swap (zudolab/zudo-doc#2086). With every snapshot animation at none the
+ * transition settles immediately — no cross-fade, no translateY slide.
+ * Covers the root cross-fade and the #2072 :only-child entry/exit rules;
+ * the both-sides chrome layers are already animation: none above. Equal
+ * specificity per selector, but later in source order, so these win.
+ * ::view-transition-group(root) must be neutralized too (zudolab/zzmod#845):
+ * the UA animates the root group for its full duration even when the old/new
+ * root snapshots are at animation: none, leaving a brief frozen,
+ * non-interactive frame. The chrome groups are already animation: none in the
+ * unconditional chrome block above, so only the root group is added here. */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  ::view-transition-group(root),
+  ::view-transition-old(zfb-header):only-child,
+  ::view-transition-old(zfb-sidebar):only-child,
+  ::view-transition-old(zfb-footer):only-child,
+  ::view-transition-old(zfb-sidebar-toggle):only-child,
+  ::view-transition-new(zfb-header):only-child,
+  ::view-transition-new(zfb-sidebar):only-child,
+  ::view-transition-new(zfb-footer):only-child,
+  ::view-transition-new(zfb-sidebar-toggle):only-child {
+    animation: none;
+  }
+}
+
+/* Page-loading overlay CSS — moved out of PageLoadingOverlay's inline
+ * <style> block to avoid the <style>-inside-<body> HTML5 content-model
+ * violation flagged by html-validate (same pattern as version-switcher
+ * fix in zudolab/zudo-doc#1505; see W2A confirm zudolab/zudo-doc#1543). */
+.page-loading-overlay {
+  position: fixed;
+  inset: 0;
+  /* Full-screen blocking load overlay — modal tier (was a raw z-index:9999).
+     It sits below the transient \`drag\` tier (sidebar-resizer ghost), which is
+     fine: a full page-load overlay and an active pointer-drag never coexist. */
+  z-index: var(--z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in oklch, var(--color-overlay) 60%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+}
+
+.page-loading-overlay[data-visible] {
+  opacity: 1;
+}
+
+a[data-zd-nav-pending],
+button[data-zd-nav-pending] {
+  color: var(--color-accent);
+}
+
+.page-loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--color-fg, #fff);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: page-loading-spin 1s linear infinite;
+}
+
+@media (min-width: 1024px) {
+  .page-loading-spinner {
+    width: 64px;
+    height: 64px;
+    border-width: 6px;
+  }
+}
+
+@keyframes page-loading-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-loading-spinner {
+    animation: none;
+    border-bottom-color: var(--color-fg, #fff);
+    opacity: 0.5;
+  }
+}`,
+        },
+    ],
+});

package/dist/features/index.js

@@ -19,6 +19,7 @@ import { versioningFeature } from "./versioning.js";
 import { tauriFeature } from "./tauri.js";
 import { tauriDevFeature } from "./tauri-dev.js";
 import { imageEnlargeFeature } from "./image-enlarge.js";
+import { dynamicPageTransitionFeature } from "./dynamic-page-transition.js";
 import { tagGovernanceFeature } from "./tag-governance.js";
 import { footerTaglistFeature } from "./footer-taglist.js";
 import { bodyFootUtilFeature } from "./body-foot-util.js";
@@ -43,6 +44,7 @@ export const featureModules = {
     tauri: tauriFeature,
     tauriDev: tauriDevFeature,
     imageEnlarge: imageEnlargeFeature,
+    dynamicPageTransition: dynamicPageTransitionFeature,
     // skillSymlinker — handled in scaffold.ts
     // claudeSkills — handled in scaffold.ts (copies zudo-doc-* skills from monorepo)
     tagGovernance: tagGovernanceFeature,

package/dist/scaffold.js

@@ -434,20 +434,24 @@ function generatePackageJson(choices) {
         // surface — VNode/VNodeArray/VNodeObject are now exported from
         // "@takazudo/zfb" (#972) — plus removal of the no-op linkValidation.allowExternal
         // knob (#925); both are non-breaking for a fresh scaffold. A fresh scaffold
-        // sets no explicit codeHighlight.theme so the default still applies. No
+        // sets codeHighlight.themeLight/themeDark for dual-theme syntect output. No
         // consumer-facing / CLI breaking change. next.52: adds the
         // `ClientRouter({ preserveHtmlAttrs })` option (zfb#1104) — consumers can
         // declare runtime `<html>` attribute names to preserve across SPA swaps so
         // e.g. `data-sidebar-hidden` / `data-theme` survive (zudolab/zudo-doc#2200).
-        // Additive, non-breaking for a fresh scaffold. next.53 (current pin):
+        // Additive, non-breaking for a fresh scaffold. next.53:
         // zfb-content GFM-autolink fix — terminate the autolink path at CJK
         // boundaries (zfb#1105). Content-rendering bug fix, additive; relevant for
         // CJK (e.g. Japanese) docs. No consumer-facing / CLI breaking change.
-        "@takazudo/zfb": "0.1.0-next.53",
-        "@takazudo/zfb-runtime": "0.1.0-next.53",
+        // next.54 (current pin): bug-fix + perf release — cross-OS CSS hash
+        // stability, multi-valued response headers (e.g. multiple Set-Cookie),
+        // supplementary-plane CJK reading-time, plus CLI/server/runtime hardening
+        // and render perf passes. No consumer-facing / CLI breaking change.
+        "@takazudo/zfb": "0.1.0-next.54",
+        "@takazudo/zfb-runtime": "0.1.0-next.54",
         // zfb-adapter-cloudflare — required for any route with `prerender = false`.
         // Pinned in lockstep with @takazudo/zfb.
-        "@takazudo/zfb-adapter-cloudflare": "0.1.0-next.53",
+        "@takazudo/zfb-adapter-cloudflare": "0.1.0-next.54",
         // @takazudo/zudo-doc — published from this monorepo via
         // .github/workflows/publish-zudo-doc.yml. The pin here is bumped in
         // lockstep by scripts/release-create-zudo-doc.sh whenever zudo-doc's
@@ -459,7 +463,7 @@ function generatePackageJson(choices) {
         // ties this pin to packages/zudo-doc's version, so the lockstep release
         // bumps both together; do not cut a create-zudo-doc release until the
         // matching @takazudo/zudo-doc version (with content.css) is on npm.
-        "@takazudo/zudo-doc": "^0.2.14",
+        "@takazudo/zudo-doc": "^0.2.16",
         // zod — used by the generated zfb.config.ts. zfb-config-gen emits
         // `import { z } from "zod"` for the content-collection schema +
         // `z.toJSONSchema(...)` conversion. Without this dep, the consumer
@@ -513,7 +517,7 @@ function generatePackageJson(choices) {
         // @takazudo/zudo-doc/integrations/doc-history which in turn imports
         // @takazudo/zudo-doc-history-server/git-history. Without this dep the
         // plugin host fails at init with ERR_MODULE_NOT_FOUND — W8A (#1739).
-        deps["@takazudo/zudo-doc-history-server"] = "^0.2.14";
+        deps["@takazudo/zudo-doc-history-server"] = "^0.2.16";
         // W7A (#1736): doc-history-plugin.mjs spawns `tsx -e <inline-script>` to
         // run the v2 runtime in a TS-aware Node subprocess; without tsx the
         // plugin's preBuild step exits with ENOENT before zfb finishes config

package/dist/settings-gen.js

@@ -192,6 +192,12 @@ export function generateSettingsFile(choices) {
     else {
         lines.push(`  imageEnlarge: false as boolean,`);
     }
+    if (choices.features.includes("dynamicPageTransition")) {
+        lines.push(`  dynamicPageTransition: true as boolean,`);
+    }
+    else {
+        lines.push(`  dynamicPageTransition: false as boolean,`);
+    }
     lines.push(`  htmlPreview: undefined as HtmlPreviewConfig | undefined,`);
     if (choices.features.includes("versioning")) {
         lines.push(`  versions: [] satisfies VersionConfig[] as VersionConfig[] | false,`);
@@ -251,6 +257,13 @@ export function generateSettingsFile(choices) {
     }
     lines.push(`  headerNav: [`);
     lines.push(`    { label: "Getting Started", path: "/docs/getting-started", categoryMatch: "getting-started" },`);
+    // The "claude" categoryMatch is load-bearing beyond the header link: getCategoryOrder()
+    // derives the satellite-grouping prefixes from headerNav, so without this entry
+    // groupSatelliteNodes() never nests claude-md/claude-skills/... under the "claude"
+    // overview node and they spread out as separate top-level cards on the index sitemap.
+    if (choices.features.includes("claudeResources")) {
+        lines.push(`    { label: "Claude", path: "/docs/claude", categoryMatch: "claude" },`);
+    }
     if (choices.features.includes("changelog")) {
         lines.push(`    { label: "Changelog", path: "/docs/changelog", categoryMatch: "changelog" },`);
     }

package/dist/zfb-config-gen.js

@@ -190,6 +190,14 @@ export function generateZfbConfig(choices) {
     lines.push(`  },`);
     lines.push(`  base: settings.base,`);
     lines.push(`  trailingSlash: settings.trailingSlash,`);
+    // codeHighlight — dual-theme syntect output so CSS can resolve tokens via
+    // light-dark(var(--shiki-light), var(--shiki-dark)) and code blocks follow
+    // the active light/dark toggle with no client JS. Theme names are syntect
+    // built-ins shipped with zfb (not Shiki names). Matches the host config.
+    lines.push(`  codeHighlight: {`);
+    lines.push(`    themeLight: "base16-ocean.light",`);
+    lines.push(`    themeDark: "base16-ocean.dark",`);
+    lines.push(`  },`);
     // markdown.features block — mirrors the zfb next.13 opt-in model.
     //
     // Value-shape rule (empirically verified against the next.13 Rust loader):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-zudo-doc",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Create a new zudo-doc documentation site",
   "license": "MIT",
   "author": "Takeshi Takatsudo",

package/templates/base/pages/lib/_body-end-islands.tsx

@@ -33,10 +33,8 @@ import { Island } from "@takazudo/zfb";
 import { settings } from "@/config/settings";
 
 import AiChatModal from "@/components/ai-chat-modal";
-import ClientRouterBootstrap from "@/components/client-router-bootstrap";
 import ImageEnlarge, { ImageEnlargeSsrFallback } from "@/components/image-enlarge";
 import MermaidEnlarge, { MermaidEnlargeSsrFallback } from "@/components/mermaid-enlarge";
-import { PageLoadingOverlay } from "@takazudo/zudo-doc/page-loading";
 // @slot:body-end-islands:imports
 
 // Set explicit `displayName` on each default-exported island so zfb's
@@ -47,8 +45,6 @@ import { PageLoadingOverlay } from "@takazudo/zudo-doc/page-loading";
 // function names by default, but the explicit assignment is a
 // belt-and-braces guard for production minification regressions.
 (AiChatModal as { displayName?: string }).displayName = "AiChatModal";
-(ClientRouterBootstrap as { displayName?: string }).displayName =
-  "ClientRouterBootstrap";
 (ImageEnlarge as { displayName?: string }).displayName = "ImageEnlarge";
 (MermaidEnlarge as { displayName?: string }).displayName = "MermaidEnlarge";
 // @slot:body-end-islands:display-names
@@ -104,16 +100,6 @@ export function BodyEndIslands({
   basePath,
   aiChatBodyLabel = DEFAULT_AI_CHAT_BODY_LABEL,
 }: BodyEndIslandsProps): JSX.Element {
-  // Hydrates first (when="load") so the SPA-router click intercept is
-  // registered as soon as the islands runtime mounts the marker. The
-  // component renders nothing visually — the island bundle's top-level
-  // `import "@takazudo/zfb-runtime/client-router"` is what actually
-  // wires up the router (zudolab/zudo-doc#1524 W7A fix).
-  const clientRouterBootstrap = Island({
-    when: "load",
-    children: <ClientRouterBootstrap />,
-  }) as unknown as VNode;
-
   // Gated on `settings.aiAssistant` (zudolab/zudo-doc#2058): when the AI
   // assistant feature is off, neither the AiChatModal island marker nor the
   // sr-only "AI Assistant" landmark heading should reach the SSG output —
@@ -177,11 +163,6 @@ export function BodyEndIslands({
 
   return (
     <>
-      {/* Pure SSR — no Island wrap. The component emits its overlay div,
-          inline styles, and a small inline script that self-wires
-          zfb:before-preparation / zfb:after-swap listeners at runtime. */}
-      <PageLoadingOverlay />
-      {clientRouterBootstrap}
       {aiAssistant}
       {imageEnlarge}
       {mermaidEnlarge}

package/templates/base/src/styles/global.css

@@ -296,6 +296,10 @@ body {
   button {
     cursor: pointer;
   }
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
 }
 
 /* ========================================
@@ -558,104 +562,6 @@ pre[class^="syntect-"] .line .highlighted-word {
   }
 }
 
-/* Root cross-fade for same-document View Transitions (Strategy B).
- *
- * @view-transition { navigation: auto; } (Strategy A, cross-document) is
- * deleted — Strategy B uses <ClientRouter /> which drives same-document
- * transitions via document.startViewTransition on each navigation.
- *
- * Chrome extraction via view-transition-name (Strategy B+, zudolab/zudo-doc#1558):
- * <header>, <aside id="desktop-sidebar">, <footer>, and the desktop-sidebar-toggle
- * button each carry a data-zfb-transition-persist attribute whose value is keyed
- * by locale and nav-section. The four attribute selectors below assign a stable
- * view-transition-name based on the attribute value prefix, extracting those
- * elements from the root snapshot into their own named layers:
- *   - header-{lang}          → zfb-header
- *   - sidebar-{locale}-…     → zfb-sidebar
- *   - footer-{lang}          → zfb-footer
- *   - desktop-sidebar-toggle → zfb-sidebar-toggle
- *
- * Once extracted, the root cross-fade animates only non-chrome content (main,
- * article, TOC, etc.). The twelve ::view-transition-{old,new,group}(<name>)
- * rules disable animation for all four chrome layers. The group pseudo must be
- * neutralised too — even when old/new are static the group container can still
- * produce a geometry-morph animation when snapshot size/position differs.
- *
- * Entry/exit cross-fade (zudolab/zudo-doc#2072): animation: none is only
- * correct when the chrome element exists on BOTH pages of a navigation.
- * When it exists on one side only (docs page with sidebar → top page
- * without), the named group holds a single snapshot — frozen at full
- * opacity for the whole transition, then dropped abruptly at finish. The
- * :only-child rules below detect that one-sided case and cross-fade the
- * lone snapshot in sync with the root content fade (spec-standard
- * entry/exit pattern; :only-child outranks the animation: none rules via
- * the extra pseudo-class specificity). */
-
-/* Chrome extraction — assign view-transition-name from data-zfb-transition-persist */
-[data-zfb-transition-persist^="header-"]               { view-transition-name: zfb-header; }
-[data-zfb-transition-persist^="sidebar-"]              { view-transition-name: zfb-sidebar; }
-[data-zfb-transition-persist^="footer-"]               { view-transition-name: zfb-footer; }
-[data-zfb-transition-persist="desktop-sidebar-toggle"] { view-transition-name: zfb-sidebar-toggle; }
-
-/* Disable animation for all four chrome layers (old, new, and group) */
-::view-transition-old(zfb-header),
-::view-transition-new(zfb-header),
-::view-transition-group(zfb-header),
-::view-transition-old(zfb-sidebar),
-::view-transition-new(zfb-sidebar),
-::view-transition-group(zfb-sidebar),
-::view-transition-old(zfb-footer),
-::view-transition-new(zfb-footer),
-::view-transition-group(zfb-footer),
-::view-transition-old(zfb-sidebar-toggle),
-::view-transition-new(zfb-sidebar-toggle),
-::view-transition-group(zfb-sidebar-toggle) { animation: none; }
-
-/* Entry/exit: chrome element present on one side only (#2072).
- * Exit — lone old snapshot fades out with the content cross-fade. */
-::view-transition-old(zfb-header):only-child,
-::view-transition-old(zfb-sidebar):only-child,
-::view-transition-old(zfb-footer):only-child,
-::view-transition-old(zfb-sidebar-toggle):only-child {
-  animation: 150ms ease-in both contentFadeOut;
-}
-/* Entry — lone new snapshot fades in with the content cross-fade. */
-::view-transition-new(zfb-header):only-child,
-::view-transition-new(zfb-sidebar):only-child,
-::view-transition-new(zfb-footer):only-child,
-::view-transition-new(zfb-sidebar-toggle):only-child {
-  animation: 300ms ease-out both contentFadeIn;
-}
-
-/* Root cross-fade rules — animate only the non-chrome snapshot */
-::view-transition-old(root) {
-  animation: 150ms ease-in both contentFadeOut;
-}
-::view-transition-new(root) {
-  animation: 300ms ease-out both contentFadeIn;
-}
-
-/* Reduced motion: collapse all view-transition animation to an instant
- * swap (zudolab/zudo-doc#2086). With every snapshot animation at none the
- * transition settles immediately — no cross-fade, no translateY slide.
- * Covers the root cross-fade and the #2072 :only-child entry/exit rules;
- * the both-sides chrome layers are already animation: none above. Equal
- * specificity per selector, but later in source order, so these win. */
-@media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(root),
-  ::view-transition-new(root),
-  ::view-transition-old(zfb-header):only-child,
-  ::view-transition-old(zfb-sidebar):only-child,
-  ::view-transition-old(zfb-footer):only-child,
-  ::view-transition-old(zfb-sidebar-toggle):only-child,
-  ::view-transition-new(zfb-header):only-child,
-  ::view-transition-new(zfb-sidebar):only-child,
-  ::view-transition-new(zfb-footer):only-child,
-  ::view-transition-new(zfb-sidebar-toggle):only-child {
-    animation: none;
-  }
-}
-
 /* Version-switcher responsive visibility (moved out of the component to
  * avoid <style>-inside-<div> HTML5 content-model violation; required when
  * the i18nVersion feature ships a <VersionSwitcher> wrapped in