@takazudo/zudo-doc 5.1.0 → 5.2.0

package/dist/auto-logo/icon.d.ts

@@ -0,0 +1,12 @@
+/** Icon plate color — light plate, pinned by #3286. */
+export declare const ICON_BG = "#ffffff";
+/** Icon ink — the default light scheme fg `oklch(.185 .005 65)` as sRGB. */
+export declare const ICON_INK = "#141210";
+/**
+ * Render the deterministic square icon variant of the AutoLogo design as a
+ * standalone, fully opaque, directly painted SVG string. Same seed always
+ * produces byte-identical output; glyph selection reuses
+ * {@link pickGlyphName} so the icon shows the same glyph as `logo: "auto"`
+ * mode and the ejected logo.
+ */
+export declare function renderAutoLogoIconSvg(seed: string): string;

package/dist/auto-logo/icon.js

@@ -0,0 +1,23 @@
+import { GLYPH_SHAPES, pickGlyphName } from "./shapes.js";
+import { SQUARE_SIZE, SQUARE_PLATE_SHAPES } from "./shapes-square.js";
+import { escapeAttr, renderShape as renderShapeWith } from "./render-shape.js";
+const ICON_BG = "#ffffff";
+const ICON_INK = "#141210";
+const ICON_COLORS = {
+  currentColor: ICON_INK,
+  "var(--color-bg)": ICON_BG
+};
+function renderShape(shape) {
+  return renderShapeWith(shape, ICON_COLORS);
+}
+function renderAutoLogoIconSvg(seed) {
+  const glyphName = pickGlyphName(seed);
+  const glyphShapes = GLYPH_SHAPES[glyphName];
+  const { plate, innerFrame, rays, disc, glyphTransform } = SQUARE_PLATE_SHAPES;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${SQUARE_SIZE} ${SQUARE_SIZE}" data-auto-logo="${glyphName}">` + renderShape(plate) + renderShape(innerFrame) + rays.map(renderShape).join("") + renderShape(disc) + `<g transform="${escapeAttr(glyphTransform)}">${glyphShapes.map(renderShape).join("")}</g></svg>`;
+}
+export {
+  ICON_BG,
+  ICON_INK,
+  renderAutoLogoIconSvg
+};

package/dist/auto-logo/index.d.ts

@@ -4,6 +4,7 @@ import type { JSX } from "preact";
 import { pickGlyphName } from "./shapes.js";
 export { pickGlyphName };
 export { renderAutoLogoStandaloneSvg } from "./standalone.js";
+export { renderAutoLogoIconSvg } from "./icon.js";
 /** Props for {@link AutoLogo}. */
 export interface AutoLogoProps {
     /** Deterministic seed — pass `settings.siteName`. */

package/dist/auto-logo/index.js

@@ -12,6 +12,7 @@ import {
   pickGlyphName
 } from "./shapes.js";
 import { renderAutoLogoStandaloneSvg } from "./standalone.js";
+import { renderAutoLogoIconSvg } from "./icon.js";
 function renderShape({ el, attrs }, key) {
   return h(el, key !== void 0 ? { ...attrs, key } : attrs);
 }
@@ -29,5 +30,6 @@ function AutoLogo({ seed, class: className }) {
 export {
   AutoLogo,
   pickGlyphName,
+  renderAutoLogoIconSvg,
   renderAutoLogoStandaloneSvg
 };

package/dist/auto-logo/render-shape.d.ts

@@ -0,0 +1,9 @@
+import type { ShapePrimitive } from "./shapes.js";
+export declare function escapeAttr(value: string): string;
+/**
+ * Serialize one primitive, substituting any attr value found in `colors` —
+ * keyed on the exactly-two color tokens of the shapes.ts color contract
+ * (`currentColor` for ink, `var(--color-bg)` for knockouts), so a full
+ * substitution map guarantees neither token reaches the output.
+ */
+export declare function renderShape(shape: ShapePrimitive, colors: Record<string, string>): string;

package/dist/auto-logo/render-shape.js

@@ -0,0 +1,14 @@
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function renderShape(shape, colors) {
+  const attrs = Object.entries(shape.attrs).map(([key, value]) => {
+    const resolved = typeof value === "string" && value in colors ? colors[value] : value;
+    return `${key}="${escapeAttr(String(resolved))}"`;
+  }).join(" ");
+  return `<${shape.el} ${attrs} />`;
+}
+export {
+  escapeAttr,
+  renderShape
+};

package/dist/auto-logo/shapes-square.d.ts

@@ -0,0 +1,7 @@
+import { type PlateShapes } from "./shapes.js";
+/** Square plate side length (viewBox units). */
+export declare const SQUARE_SIZE = 200;
+/** Disc radius — preserves the rect logo's disc/short-side ratio ≈ 0.65. */
+export declare const SQUARE_DISC_R = 65;
+/** The square plate composition, built from the shared builder. */
+export declare const SQUARE_PLATE_SHAPES: PlateShapes;

package/dist/auto-logo/shapes-square.js

@@ -0,0 +1,14 @@
+import { INSET, buildPlateShapes } from "./shapes.js";
+const SQUARE_SIZE = 200;
+const SQUARE_DISC_R = 65;
+const SQUARE_PLATE_SHAPES = buildPlateShapes({
+  w: SQUARE_SIZE,
+  h: SQUARE_SIZE,
+  inset: INSET,
+  discR: SQUARE_DISC_R
+});
+export {
+  SQUARE_DISC_R,
+  SQUARE_PLATE_SHAPES,
+  SQUARE_SIZE
+};

package/dist/auto-logo/shapes.d.ts

@@ -9,20 +9,46 @@ export declare const INSET = 6;
 export declare const CX: number;
 export declare const CY: number;
 export declare const DISC_R = 34;
-/** Full-bleed plate rect, filled with the page background so the tile
- *  interior reads as the page itself (opaque, not `fill: "none"`, so it also
- *  covers a textured page background). */
+/** Inputs for {@link buildPlateShapes}. */
+export interface PlateParams {
+    w: number;
+    h: number;
+    inset: number;
+    discR: number;
+}
+/** One plate composition (everything except the glyph shape data) as built
+ *  by {@link buildPlateShapes}. */
+export interface PlateShapes {
+    /** Full-bleed plate rect, filled with the page background so the tile
+     *  interior reads as the page itself (opaque, not `fill: "none"`, so it
+     *  also covers a textured page background). */
+    plate: ShapePrimitive;
+    /** Thin inner frame stroke, drawn in ink over the plate. */
+    innerFrame: ShapePrimitive;
+    /** 4 diagonal corner rays in ink, each stopping just short of the disc. */
+    rays: ShapePrimitive[];
+    /** Centered ink disc — the glyph is knocked back out of it. */
+    disc: ShapePrimitive;
+    /** Scale that fits a glyph's 100×100 box onto the disc
+     *  (slight overscan reads better). */
+    glyphScale: number;
+    /** Transform that centers the scaled glyph box on the disc. */
+    glyphTransform: string;
+}
+/**
+ * Build the "decorated plate" composition — plate, inset frame, 4 corner
+ * rays, center disc, glyph transform — for any plate size. The 200×105 rect
+ * logo constants below and the square icon recomposition
+ * (`shapes-square.ts`, epic #3285) are both built from this one function so
+ * their geometry cannot drift.
+ */
+export declare function buildPlateShapes({ w, h, inset, discR }: PlateParams): PlateShapes;
 export declare const PLATE_SHAPE: ShapePrimitive;
-/** Thin inner frame stroke, drawn in ink over the plate. */
 export declare const INNER_FRAME_SHAPE: ShapePrimitive;
-/** 4 diagonal corner rays in ink, each stopping just short of the disc edge. */
 export declare const RAY_SHAPES: ShapePrimitive[];
-/** Centered ink disc — the glyph below is knocked back out of it. */
 export declare const DISC_SHAPE: ShapePrimitive;
-/** Scale + translate that centers a glyph's 100×100 box onto the disc
- *  (slight overscan reads better). */
 export declare const GLYPH_SCALE: number;
-export declare const GLYPH_TRANSFORM = "translate(64.3, 16.799999999999997) scale(0.7140000000000001)";
+export declare const GLYPH_TRANSFORM: string;
 /** Line-art glyphs drawn in a 100×100 box centered at (50,50), as plain
  *  shape data. Every painted `fill`/`stroke` here is the knockout token, so
  *  the glyph reads as a hole punched through the ink disc it sits on.

package/dist/auto-logo/shapes.js

@@ -6,43 +6,55 @@ const CY = H / 2;
 const DISC_R = 34;
 const INK = "currentColor";
 const KO = "var(--color-bg)";
-const PLATE_SHAPE = {
-  el: "rect",
-  attrs: { x: 0, y: 0, width: W, height: H, fill: KO }
-};
-const INNER_FRAME_SHAPE = {
-  el: "rect",
-  attrs: {
-    x: INSET,
-    y: INSET,
-    width: W - INSET * 2,
-    height: H - INSET * 2,
-    fill: "none",
-    stroke: INK,
-    "stroke-width": 1.6
-  }
-};
-const RAY_SHAPES = [
-  [INSET, INSET],
-  [W - INSET, INSET],
-  [INSET, H - INSET],
-  [W - INSET, H - INSET]
-].map(([x, y]) => {
-  const dx = CX - x;
-  const dy = CY - y;
-  const len = Math.hypot(dx, dy);
-  const stop = (len - DISC_R - 7) / len;
-  return {
-    el: "line",
-    attrs: { x1: x, y1: y, x2: x + dx * stop, y2: y + dy * stop, stroke: INK, "stroke-width": 1.4 }
+function buildPlateShapes({ w, h, inset, discR }) {
+  const cx = w / 2;
+  const cy = h / 2;
+  const plate = {
+    el: "rect",
+    attrs: { x: 0, y: 0, width: w, height: h, fill: KO }
   };
-});
-const DISC_SHAPE = {
-  el: "circle",
-  attrs: { cx: CX, cy: CY, r: DISC_R, fill: INK }
-};
-const GLYPH_SCALE = DISC_R * 2 / 100 * 1.05;
-const GLYPH_TRANSFORM = `translate(${CX - 50 * GLYPH_SCALE}, ${CY - 50 * GLYPH_SCALE}) scale(${GLYPH_SCALE})`;
+  const innerFrame = {
+    el: "rect",
+    attrs: {
+      x: inset,
+      y: inset,
+      width: w - inset * 2,
+      height: h - inset * 2,
+      fill: "none",
+      stroke: INK,
+      "stroke-width": 1.6
+    }
+  };
+  const rays = [
+    [inset, inset],
+    [w - inset, inset],
+    [inset, h - inset],
+    [w - inset, h - inset]
+  ].map(([x, y]) => {
+    const dx = cx - x;
+    const dy = cy - y;
+    const len = Math.hypot(dx, dy);
+    const stop = (len - discR - 7) / len;
+    return {
+      el: "line",
+      attrs: { x1: x, y1: y, x2: x + dx * stop, y2: y + dy * stop, stroke: INK, "stroke-width": 1.4 }
+    };
+  });
+  const disc = {
+    el: "circle",
+    attrs: { cx, cy, r: discR, fill: INK }
+  };
+  const glyphScale = discR * 2 / 100 * 1.05;
+  const glyphTransform = `translate(${cx - 50 * glyphScale}, ${cy - 50 * glyphScale}) scale(${glyphScale})`;
+  return { plate, innerFrame, rays, disc, glyphScale, glyphTransform };
+}
+const RECT_PLATE_SHAPES = buildPlateShapes({ w: W, h: H, inset: INSET, discR: DISC_R });
+const PLATE_SHAPE = RECT_PLATE_SHAPES.plate;
+const INNER_FRAME_SHAPE = RECT_PLATE_SHAPES.innerFrame;
+const RAY_SHAPES = RECT_PLATE_SHAPES.rays;
+const DISC_SHAPE = RECT_PLATE_SHAPES.disc;
+const GLYPH_SCALE = RECT_PLATE_SHAPES.glyphScale;
+const GLYPH_TRANSFORM = RECT_PLATE_SHAPES.glyphTransform;
 const GLYPH_SHAPES = {
   book: [
     {
@@ -180,5 +192,6 @@ export {
   PLATE_SHAPE,
   RAY_SHAPES,
   W,
+  buildPlateShapes,
   pickGlyphName
 };

package/dist/auto-logo/standalone.js

@@ -9,20 +9,14 @@ import {
   GLYPH_TRANSFORM,
   pickGlyphName
 } from "./shapes.js";
+import { escapeAttr, renderShape as renderShapeWith } from "./render-shape.js";
 const MASK_ID = "auto-logo-mask";
 const MASK_COLORS = {
   currentColor: "#fff",
   "var(--color-bg)": "#000"
 };
-function escapeAttr(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
 function renderShape(shape) {
-  const attrs = Object.entries(shape.attrs).map(([key, value]) => {
-    const resolved = typeof value === "string" && value in MASK_COLORS ? MASK_COLORS[value] : value;
-    return `${key}="${escapeAttr(String(resolved))}"`;
-  }).join(" ");
-  return `<${shape.el} ${attrs} />`;
+  return renderShapeWith(shape, MASK_COLORS);
 }
 function renderAutoLogoStandaloneSvg(seed) {
   const glyphName = pickGlyphName(seed);

package/dist/design-token-panel-bootstrap.d.ts

@@ -2,13 +2,22 @@
 /** @jsxImportSource preact */
 /**
  * Design-token panel (zdtp) WIRING MECHANISM + PACKAGE-DEFAULT ISLAND (#2658,
- * epic Minimal Scaffold #2651).
+ * epic Minimal Scaffold #2651). zdtp itself is LAZY-LOADED (#3282, epic
+ * #3261): this module carries NO top-level value import of `@takazudo/zdtp` —
+ * the package is `import()`ed on the first dispatch on either resolved toggle
+ * channel (the shared `toggle-design-token-panel`, or this instance's own —
+ * see {@link resolveInstanceToggleEvent}), or eagerly when the persisted-state
+ * probe finds saved tweaks / a previously-open panel, so zdtp's bundle stays
+ * out of the initial page load.
  *
  * `bootstrapDesignTokenPanel` is a callable that configures zdtp's panel and
  * wires its lifecycle hooks to zfb's navigation events via
  * `setLifecycleAdapter()`. It receives a mode-scoped PanelConfig builder —
  * either a project override or the package default from
- * `@takazudo/zudo-doc/design-token-panel-config`.
+ * `@takazudo/zudo-doc/design-token-panel-config`. The builder module is
+ * zdtp-runtime-free (type-only zdtp imports), which is what lets it stay a
+ * STATIC import here without defeating the lazy load — and lets the probe
+ * compute the exact active storage prefix before zdtp exists.
  *
  * The current call shape is a mode-scoped builder. It rebuilds the panel per
  * light/dark mode on every `color-scheme-changed` toggle:
@@ -51,7 +60,7 @@
  * required pull point. See @takazudo/zdtp PORTABLE-CONTRACT.md §7.
  */
 import type { JSX } from "preact";
-import { type PanelConfig } from "@takazudo/zdtp";
+import type { PanelConfig } from "@takazudo/zdtp";
 /** Active color-scheme mode, read from `<html data-theme>`. */
 type ColorSchemeMode = "light" | "dark";
 /**
@@ -79,14 +88,16 @@ export type PanelConfigBuilder = (mode: ColorSchemeMode) => PanelConfig;
  */
 export declare function withPackScopedStoragePrefix(config: PanelConfig, activePack: string): PanelConfig;
 /**
- * Bootstrap zdtp for a project. Configures the panel, drains any pre-hydration
- * click queue, and wires the zdtp lifecycle adapter to zfb's navigation events
- * so persisted token overrides re-apply on every soft navigation.
- *
- * Wires a `color-scheme-changed` listener that rebuilds the panel per
- * light/dark mode (see the toggle sequence below), and a parallel
- * `theme-pack-changed` listener that rebuilds it per theme pack with a
- * pack-scoped storage prefix (ADR theme-packs.md Decision 4, #2822).
+ * Bootstrap zdtp for a project — LAZILY (#3282). At mount this registers the
+ * interim toggle listener on both resolved channels (#3315), drains the
+ * pre-hydration click queue, and probes localStorage for persisted panel
+ * state; the actual
+ * `import("@takazudo/zdtp")` + configure happen on the first toggle (or
+ * immediately on a probe hit). The configure body then wires everything the
+ * pre-lazy version wired eagerly: `configurePanel` with the pack-scoped
+ * mode-config, the `color-scheme-changed` / `theme-pack-changed` rebuild
+ * listeners, `reapplyPersistedOverrides`, and the zfb lifecycle adapter via
+ * `setLifecycleAdapter`.
  *
  * @param buildConfig - The project's `(mode) => PanelConfig` builder for
  *   mode-scoped rebuilds.

package/dist/design-token-panel-bootstrap.js

@@ -1,10 +1,4 @@
 "use client";
-import {
-  configurePanel,
-  reapplyPersistedOverrides,
-  setLifecycleAdapter,
-  showDesignTokenPanel
-} from "@takazudo/zdtp";
 import {
   BEFORE_NAVIGATE_EVENT,
   AFTER_NAVIGATE_EVENT
@@ -16,6 +10,14 @@ import {
 } from "./theme-pack-switcher/theme-pack-sync.js";
 import { buildDesignTokenPanelConfig } from "virtual:zudo-doc-design-token-panel-config";
 const COLOR_SCHEME_CHANGED_EVENT = "color-scheme-changed";
+const TOGGLE_PANEL_EVENT = "toggle-design-token-panel";
+const ZDTP_DEFAULT_STORAGE_PREFIX = "zudo-design-token-panel";
+function resolveInstanceToggleEvent(config) {
+  if (config.storagePrefix === ZDTP_DEFAULT_STORAGE_PREFIX) {
+    return TOGGLE_PANEL_EVENT;
+  }
+  return config.toggleEvent ?? `toggle-${config.storagePrefix}`;
+}
 function openStateKey(instancePrefix) {
   return `${instancePrefix}-open`;
 }
@@ -26,6 +28,41 @@ function readOpenState(instancePrefix) {
     return false;
   }
 }
+const ACTIVATION_FLAG_KEY_SUFFIXES = [
+  ":autoload",
+  ":visible",
+  "-elpath-enabled",
+  "-domtweaker-enabled"
+];
+function isEmptyEnvelope(raw) {
+  if (raw === null) return true;
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return false;
+  }
+  if (parsed === null) return true;
+  if (Array.isArray(parsed)) return parsed.length === 0;
+  if (typeof parsed === "object") return Object.keys(parsed).length === 0;
+  return false;
+}
+function hasPersistedPanelState(instancePrefix) {
+  try {
+    if (localStorage.getItem(openStateKey(instancePrefix)) === "1") return true;
+    for (const suffix of ACTIVATION_FLAG_KEY_SUFFIXES) {
+      if (localStorage.getItem(`${instancePrefix}${suffix}`) === "1") return true;
+    }
+    const stateKeyStem = `${instancePrefix}-state`;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key === null || !key.startsWith(stateKeyStem)) continue;
+      if (!isEmptyEnvelope(localStorage.getItem(key))) return true;
+    }
+  } catch {
+  }
+  return false;
+}
 function readMode() {
   return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
 }
@@ -74,61 +111,156 @@ function bootstrapDesignTokenPanel(buildConfig) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return;
   }
-  let currentConfig = withPackScopedStoragePrefix(
-    buildConfig(readMode()),
-    readThemePackFromDom()
-  );
-  let handle = configurePanel(currentConfig);
-  let pendingMode = readMode();
-  let timer = null;
-  window.addEventListener(COLOR_SCHEME_CHANGED_EVENT, () => {
-    pendingMode = readMode();
-    if (timer !== null) return;
-    timer = setTimeout(() => {
-      timer = null;
-      const mode = pendingMode;
-      const wasOpen = readOpenState(handle.instanceId);
-      handle.destroy();
-      currentConfig = withPackScopedStoragePrefix(
-        buildConfig(mode),
-        readThemePackFromDom()
+  let zdtpImport = null;
+  let activationInFlight = false;
+  let configurePhase = "pending";
+  let pendingToggles = 0;
+  function loadZdtp() {
+    if (zdtpImport === null) {
+      zdtpImport = import("@takazudo/zdtp").catch((err) => {
+        zdtpImport = null;
+        throw err;
+      });
+    }
+    return zdtpImport;
+  }
+  function configureAndWire(zdtp) {
+    const {
+      configurePanel,
+      reapplyPersistedOverrides,
+      setLifecycleAdapter,
+      showDesignTokenPanel
+    } = zdtp;
+    let currentConfig = withPackScopedStoragePrefix(
+      buildConfig(readMode()),
+      readThemePackFromDom()
+    );
+    let handle = configurePanel(currentConfig);
+    let pendingMode = readMode();
+    let timer = null;
+    window.addEventListener(COLOR_SCHEME_CHANGED_EVENT, () => {
+      pendingMode = readMode();
+      if (timer !== null) return;
+      timer = setTimeout(() => {
+        timer = null;
+        const mode = pendingMode;
+        const wasOpen = readOpenState(handle.instanceId);
+        handle.destroy();
+        currentConfig = withPackScopedStoragePrefix(
+          buildConfig(mode),
+          readThemePackFromDom()
+        );
+        handle = configurePanel(currentConfig);
+        if (wasOpen) showDesignTokenPanel();
+      }, 0);
+    });
+    let pendingPack = readThemePackFromDom();
+    let packTimer = null;
+    window.addEventListener(THEME_PACK_CHANGED_EVENT, () => {
+      pendingPack = readThemePackFromDom();
+      if (packTimer !== null) return;
+      packTimer = setTimeout(() => {
+        packTimer = null;
+        const pack = pendingPack;
+        const wasOpen = readOpenState(handle.instanceId);
+        const outgoingConfig = currentConfig;
+        handle.destroy();
+        clearAppliedTokenOverrides(outgoingConfig);
+        currentConfig = withPackScopedStoragePrefix(buildConfig(readMode()), pack);
+        handle = configurePanel(currentConfig);
+        reapplyPersistedOverrides();
+        if (wasOpen) showDesignTokenPanel();
+      }, 0);
+    });
+    reapplyPersistedOverrides();
+    const adapter = {
+      onBeforeSwap(cb) {
+        const handler = () => cb();
+        document.addEventListener(BEFORE_NAVIGATE_EVENT, handler);
+        return () => document.removeEventListener(BEFORE_NAVIGATE_EVENT, handler);
+      },
+      onPageLoad(cb) {
+        const handler = () => cb();
+        document.addEventListener(AFTER_NAVIGATE_EVENT, handler);
+        return () => document.removeEventListener(AFTER_NAVIGATE_EVENT, handler);
+      }
+    };
+    setLifecycleAdapter(adapter);
+  }
+  async function activate() {
+    if (activationInFlight || configurePhase !== "pending") return;
+    activationInFlight = true;
+    let zdtp;
+    try {
+      zdtp = await loadZdtp();
+    } catch (err) {
+      activationInFlight = false;
+      pendingToggles = 0;
+      console.error(
+        "[zudo-doc] design-token-panel: loading @takazudo/zdtp failed; the next toggle retries.",
+        err
       );
-      handle = configurePanel(currentConfig);
-      if (wasOpen) showDesignTokenPanel();
-    }, 0);
-  });
-  let pendingPack = readThemePackFromDom();
-  let packTimer = null;
-  window.addEventListener(THEME_PACK_CHANGED_EVENT, () => {
-    pendingPack = readThemePackFromDom();
-    if (packTimer !== null) return;
-    packTimer = setTimeout(() => {
-      packTimer = null;
-      const pack = pendingPack;
-      const wasOpen = readOpenState(handle.instanceId);
-      const outgoingConfig = currentConfig;
-      handle.destroy();
-      clearAppliedTokenOverrides(outgoingConfig);
-      currentConfig = withPackScopedStoragePrefix(buildConfig(readMode()), pack);
-      handle = configurePanel(currentConfig);
-      reapplyPersistedOverrides();
-      if (wasOpen) showDesignTokenPanel();
-    }, 0);
-  });
-  window.__zdtpReadyClicks?.();
-  const adapter = {
-    onBeforeSwap(cb) {
-      const handler = () => cb();
-      document.addEventListener(BEFORE_NAVIGATE_EVENT, handler);
-      return () => document.removeEventListener(BEFORE_NAVIGATE_EVENT, handler);
-    },
-    onPageLoad(cb) {
-      const handler = () => cb();
-      document.addEventListener(AFTER_NAVIGATE_EVENT, handler);
-      return () => document.removeEventListener(AFTER_NAVIGATE_EVENT, handler);
+      return;
+    }
+    try {
+      configureAndWire(zdtp);
+      configurePhase = "configured";
+    } catch (err) {
+      configurePhase = "failed";
+      console.error(
+        "[zudo-doc] design-token-panel: configure failed; the panel is disabled until the next full page load.",
+        err
+      );
+      return;
+    } finally {
+      activationInFlight = false;
     }
+    if (pendingToggles % 2 === 1) zdtp.showDesignTokenPanel();
+    pendingToggles = 0;
+  }
+  function readActiveConfig() {
+    return withPackScopedStoragePrefix(
+      buildConfig(readMode()),
+      readThemePackFromDom()
+    );
+  }
+  const onInterimToggle = () => {
+    if (configurePhase !== "pending") return;
+    pendingToggles += 1;
+    void activate();
   };
-  setLifecycleAdapter(adapter);
+  const boundToggleChannels = /* @__PURE__ */ new Set();
+  let instanceToggleChannel = null;
+  function bindToggleChannel(name) {
+    if (boundToggleChannels.has(name)) return;
+    boundToggleChannels.add(name);
+    window.addEventListener(name, onInterimToggle);
+  }
+  function refreshInstanceToggleChannel(config) {
+    const resolved = resolveInstanceToggleEvent(config);
+    if (resolved === instanceToggleChannel) return;
+    if (instanceToggleChannel !== null && instanceToggleChannel !== TOGGLE_PANEL_EVENT) {
+      window.removeEventListener(instanceToggleChannel, onInterimToggle);
+      boundToggleChannels.delete(instanceToggleChannel);
+    }
+    instanceToggleChannel = resolved;
+    bindToggleChannel(resolved);
+  }
+  const bootConfig = readActiveConfig();
+  bindToggleChannel(TOGGLE_PANEL_EVENT);
+  refreshInstanceToggleChannel(bootConfig);
+  window.__zdtpReadyClicks?.();
+  if (hasPersistedPanelState(bootConfig.storagePrefix)) void activate();
+  window.addEventListener(THEME_PACK_CHANGED_EVENT, () => {
+    if (configurePhase !== "pending") return;
+    const activeConfig = readActiveConfig();
+    refreshInstanceToggleChannel(activeConfig);
+    if (hasPersistedPanelState(activeConfig.storagePrefix)) void activate();
+  });
+  window.addEventListener(COLOR_SCHEME_CHANGED_EVENT, () => {
+    if (configurePhase !== "pending") return;
+    refreshInstanceToggleChannel(readActiveConfig());
+  });
 }
 let bootstrapped = false;
 function DesignTokenPanelBootstrap() {