@takazudo/zudo-doc 0.2.17 → 0.2.19

package/dist/content.css

@@ -123,7 +123,7 @@
   text-decoration: none;
   margin-left: var(--spacing-hsp-sm);
   opacity: 0;
-  transition: opacity 150ms;
+  transition: opacity var(--default-transition-duration);
 }
 
 .zd-content :where(h2, h3, h4, h5, h6) .hash-link::after {

package/dist/doclayout/doc-layout.d.ts

@@ -102,6 +102,14 @@ interface DocLayoutProps extends DocLayoutHtmlAttrs {
      * the sidebar resizer) inject into the scripts slot specifically.
      */
     bodyEndScripts?: ComponentChildren;
+    /**
+     * When `false`, the zfb SPA soft-swap router (`ClientRouter`) is not
+     * mounted — the page uses plain full-page navigation instead. This
+     * also omits the `zfb-view-transitions-enabled` /
+     * `zfb-preserve-html-attrs` meta tags and the route-announcer that
+     * `ClientRouter` emits. Defaults to `true` (router enabled).
+     */
+    enableClientRouter?: boolean;
 }
 /**
  * `id` attribute of the desktop sidebar `<aside>`. Used by consumer code

package/dist/doclayout/doc-layout.js

@@ -24,7 +24,8 @@ function DocLayout(props) {
     hideToc = false,
     footer,
     bodyEndComponents,
-    bodyEndScripts
+    bodyEndScripts,
+    enableClientRouter = true
   } = props;
   const hasSidebar = sidebar !== void 0;
   const showSidebar = !hideSidebar && hasSidebar;
@@ -43,9 +44,9 @@ function DocLayout(props) {
       /* @__PURE__ */ jsx("title", { children: title }),
       description !== void 0 && /* @__PURE__ */ jsx("meta", { name: "description", content: description }),
       noindex && /* @__PURE__ */ jsx("meta", { name: "robots", content: "noindex, nofollow" }),
-      ClientRouter({
+      enableClientRouter !== false ? ClientRouter({
         preserveHtmlAttrs: ["data-sidebar-hidden", "data-theme", "style"]
-      }),
+      }) : null,
       head
     ] }),
     /* @__PURE__ */ jsxs("body", { class: "min-h-screen antialiased", children: [

package/dist/page-loading.css

@@ -0,0 +1,82 @@
+/* ============================================================================
+ * @takazudo/zudo-doc — page-loading stylesheet
+ *
+ * Shipped to consumers as `@takazudo/zudo-doc/page-loading.css` (copied to
+ * `dist/page-loading.css` by scripts/copy-page-loading-css.mjs on build).
+ * Provides the full visual contract for the page-loading overlay, pending-link
+ * indicator, and spinner — so consumers can @import a single file rather than
+ * inlining these rules per-project.
+ *
+ * ── Consumer contract ──────────────────────────────────────────────────────
+ * Host tokens consumed (all are optional — sensible fallbacks are built in):
+ *   --color-page-loading-overlay
+ *       Overlay background. Defaults to:
+ *       color-mix(in oklch, var(--color-overlay, #000) 60%, transparent)
+ *       Override to change the scrim colour or opacity independently of the
+ *       host's --color-overlay token.
+ *   --color-overlay   Semi-opaque backdrop colour (used by the fallback chain
+ *                     above when --color-page-loading-overlay is not set).
+ *   --color-fg        Spinner border colour. Falls back to #fff.
+ *   --color-accent    Colour applied to links/buttons with data-zd-nav-pending.
+ *   --z-index-modal   Stack level for the overlay. Falls back to 100.
+ * ========================================================================== */
+
+.page-loading-overlay {
+  position: fixed;
+  inset: 0;
+  /* Full-screen blocking load overlay — modal tier.
+     --z-index-modal fallback (100) ensures the overlay stacks on top even for
+     bare consumers that have not defined the token. */
+  z-index: var(--z-index-modal, 100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(
+    --color-page-loading-overlay,
+    color-mix(in oklch, var(--color-overlay, #000) 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/zudo-doc",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "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",
@@ -157,7 +157,8 @@
     },
     "./safelist.css": "./dist/safelist.css",
     "./safelist": "./dist/safelist.css",
-    "./content.css": "./dist/content.css"
+    "./content.css": "./dist/content.css",
+    "./page-loading.css": "./dist/page-loading.css"
   },
   "files": [
     "dist",
@@ -165,8 +166,8 @@
   ],
   "peerDependencies": {
     "preact": "^10.29.1",
-    "@takazudo/zfb": "^0.1.0-next.55",
-    "@takazudo/zfb-runtime": "^0.1.0-next.55",
+    "@takazudo/zfb": "^0.1.0-next.57",
+    "@takazudo/zfb-runtime": "^0.1.0-next.57",
     "@takazudo/zudo-doc-history-server": "^0.2.15",
     "@takazudo/zdtp": "^0.2.3",
     "shiki": "^4.0.2"
@@ -194,8 +195,8 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^4.1.0",
-    "@takazudo/zfb": "0.1.0-next.55",
-    "@takazudo/zfb-runtime": "0.1.0-next.55"
+    "@takazudo/zfb": "0.1.0-next.57",
+    "@takazudo/zfb-runtime": "0.1.0-next.57"
   },
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 tsup",