@takazudo/zudo-doc 0.1.0

package/dist/theme/theme-toggle.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useState, useEffect } from "preact/hooks";
+import { Island } from "@takazudo/zfb";
+const STORAGE_KEY = "zudo-doc-theme";
+function SunIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+        /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+function ThemeToggleInner({ defaultMode = "dark" }) {
+  const [mode, setMode] = useState(defaultMode);
+  useEffect(() => {
+    const actual = document.documentElement.getAttribute("data-theme") || defaultMode;
+    if (actual !== mode) {
+      setMode(actual);
+    }
+  }, []);
+  function toggle() {
+    const next = mode === "dark" ? "light" : "dark";
+    setMode(next);
+    document.documentElement.setAttribute("data-theme", next);
+    document.documentElement.style.colorScheme = next;
+    localStorage.setItem(STORAGE_KEY, next);
+    localStorage.removeItem("zudo-doc-tweak-state");
+    localStorage.removeItem("zudo-doc-tweak-state-v2");
+    window.dispatchEvent(new CustomEvent("color-scheme-changed"));
+  }
+  const nextMode = mode === "dark" ? "light" : "dark";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: toggle,
+      "aria-label": `Switch to ${nextMode} mode`,
+      className: "text-muted hover:text-fg transition-colors p-hsp-sm focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+      children: mode === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
+    }
+  );
+}
+ThemeToggleInner.displayName = "ThemeToggle";
+function ThemeToggle(props = {}) {
+  const rendered = Island({
+    when: "load",
+    children: /* @__PURE__ */ jsx(ThemeToggleInner, { ...props })
+  });
+  return rendered;
+}
+export {
+  ThemeToggle as default
+};

package/dist/toc/cx.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tiny `clsx`-style class name joiner. Accepts strings, falsy values,
+ * and arrays/objects of the same — only truthy strings survive.
+ *
+ * The host project depends on `clsx`, but framework primitives keep
+ * their dependency surface minimal so that a downstream consumer of
+ * `@takazudo/zudo-doc/toc` does not need an extra runtime dep just
+ * for class name composition. The behavior here is the subset the TOC
+ * primitives use; see clsx for the full feature set.
+ */
+type ClassValue = string | number | bigint | boolean | null | undefined | ClassValue[] | {
+    [key: string]: unknown;
+};
+declare function cx(...args: ClassValue[]): string;
+
+export { cx };

package/dist/toc/cx.js

@@ -0,0 +1,22 @@
+function cx(...args) {
+  const out = [];
+  for (const arg of args) {
+    if (!arg) continue;
+    if (typeof arg === "string") {
+      out.push(arg);
+    } else if (typeof arg === "number" || typeof arg === "bigint") {
+      out.push(String(arg));
+    } else if (Array.isArray(arg)) {
+      const inner = cx(...arg);
+      if (inner) out.push(inner);
+    } else if (typeof arg === "object") {
+      for (const key of Object.keys(arg)) {
+        if (arg[key]) out.push(key);
+      }
+    }
+  }
+  return out.join(" ");
+}
+export {
+  cx
+};

package/dist/toc/index.d.ts

@@ -0,0 +1,5 @@
+export { Toc, TocProps } from './toc.js';
+export { MobileToc, MobileTocProps } from './mobile-toc.js';
+export { UseActiveHeadingResult, getActiveHeadingId, useActiveHeading } from './use-active-heading.js';
+export { HeadingItem, TocItem } from './types.js';
+import 'preact';

package/dist/toc/index.js

@@ -0,0 +1,9 @@
+import { Toc } from "./toc.js";
+import { MobileToc } from "./mobile-toc.js";
+import { useActiveHeading, getActiveHeadingId } from "./use-active-heading.js";
+export {
+  MobileToc,
+  Toc,
+  getActiveHeadingId,
+  useActiveHeading
+};

package/dist/toc/mobile-toc.d.ts

@@ -0,0 +1,46 @@
+import { VNode } from 'preact';
+import { HeadingItem } from './types.js';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface MobileTocProps {
+    headings: readonly HeadingItem[];
+    title?: string;
+}
+/**
+ * Collapsible TOC for narrow viewports (`xl:hidden`) — a Preact island
+ * component. Closed by default; tapping the header toggles, and tapping
+ * any entry closes the panel after navigation.
+ *
+ * Renders the `<div class="xl:hidden …">` panel directly. **The caller
+ * is responsible for wrapping this in `<Island when="load">`** so the
+ * SSG output emits the `data-zfb-island="MobileToc"` hydration marker
+ * around the panel. `<DocLayoutWithDefaults>` does this for you;
+ * consumers who render `<MobileToc>` outside the default layout (e.g.
+ * via the `mobileTocOverride` prop or in a custom layout) must apply
+ * the wrapper themselves — otherwise the open/close toggle never
+ * hydrates on the client and the panel stays in its initial closed
+ * state.
+ *
+ * Wave 13 (zudolab/zudo-doc#1355): previously this module exported a
+ * `MobileToc` wrapper that called `Island(...)` itself; on hydration
+ * the runtime ran `hydrate(<MobileToc/>, dataIslandDiv)` and the
+ * wrapper re-emitted *another* `<div data-zfb-island="MobileToc">…</div>`
+ * inside the existing one, leaving two `xl:hidden …` panels in the
+ * post-hydration DOM. See `./toc.tsx` for the full diagnosis. Moving
+ * the `<Island>` wrapper to the call site lets the bundle hydrate the
+ * bare panel against the existing DOM in-place.
+ *
+ * Like `Toc`, this always includes the `title` text in the SSG HTML
+ * even when no headings qualify. When no headings are present, a
+ * CSS-hidden container carries the title string so no-JS users and
+ * crawlers can still find the locale label in the static markup. When
+ * headings are present the full interactive toggle UI is rendered.
+ */
+declare function MobileToc({ headings, title, }: MobileTocProps): VNode;
+declare namespace MobileToc {
+    var displayName: string;
+}
+
+export { MobileToc, type MobileTocProps };

package/dist/toc/mobile-toc.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useMemo, useState } from "preact/hooks";
+import { SmartBreak } from "./smart-break.js";
+import { cx } from "./cx.js";
+function MobileToc({
+  headings,
+  title = "On this page"
+}) {
+  const filtered = useMemo(
+    () => headings.filter((h) => h.depth >= 2 && h.depth <= 4),
+    [headings]
+  );
+  const [open, setOpen] = useState(false);
+  if (filtered.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "hidden", "aria-hidden": "true", children: title });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "xl:hidden border border-muted mb-vsp-lg", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        "aria-expanded": open,
+        className: "flex w-full items-center justify-between px-hsp-lg py-vsp-xs text-small font-medium text-fg",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              className: cx(
+                "h-icon-sm w-icon-sm text-muted transition-transform duration-150",
+                open && "rotate-180"
+              ),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M19 9l-7 7-7-7"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cx(
+          "border-t border-muted px-hsp-lg py-vsp-xs space-y-vsp-2xs",
+          !open && "hidden"
+        ),
+        "aria-hidden": !open,
+        children: filtered.map((heading, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: cx(
+              heading.depth === 3 && "ml-hsp-lg",
+              heading.depth === 4 && "ml-hsp-2xl"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `#${heading.slug}`,
+                onClick: () => setOpen(false),
+                className: "block py-vsp-2xs text-small text-muted hover:text-fg hover:underline focus-visible:underline",
+                children: /* @__PURE__ */ jsx(SmartBreak, { children: heading.text })
+              }
+            )
+          },
+          `${heading.slug}-${index}`
+        ))
+      }
+    )
+  ] });
+}
+MobileToc.displayName = "MobileToc";
+export {
+  MobileToc
+};

package/dist/toc/smart-break.d.ts

@@ -0,0 +1,27 @@
+import { VNode } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+/**
+ * Local copy of the SmartBreak helper used by TOC entries. Kept inside
+ * the toc primitive folder so the package is self-contained and does
+ * not reach back into the host application's `src/utils/smart-break`.
+ *
+ * The host's full smart-break util exposes additional helpers
+ * (`smartBreakToHtml`, `escapeAndInjectWbr`) that the TOC does not
+ * need; this file ports only `isPathLike`, `smartBreak`, and the
+ * `SmartBreak` Preact wrapper. Keep the heuristic byte-identical to
+ * the host implementation so wbr placement matches everywhere.
+ */
+declare function isPathLike(text: string): boolean;
+declare function smartBreak(text: string): VNode | string;
+/**
+ * Preact function component wrapper — pure, server-renderable.
+ * Stringifies children and defers to smartBreak.
+ */
+declare function SmartBreak({ children }: {
+    children?: unknown;
+}): any;
+
+export { SmartBreak, isPathLike, smartBreak };

package/dist/toc/smart-break.js

@@ -0,0 +1,36 @@
+import { Fragment, jsx } from "preact/jsx-runtime";
+function isPathLike(text) {
+  if (!text) return false;
+  if (text.includes("://")) return true;
+  if (/^\.{0,2}\//.test(text)) return true;
+  if (/^[A-Za-z]:[\\/]/.test(text)) return true;
+  const forwardMatches = text.match(/[A-Za-z0-9]\/[A-Za-z0-9]/g);
+  if (forwardMatches && forwardMatches.length >= 2) return true;
+  const backMatches = text.match(/[A-Za-z0-9]\\[A-Za-z0-9]/g);
+  if (backMatches && backMatches.length >= 2) return true;
+  const hasDomainDot = /[A-Za-z0-9]\.[A-Za-z0-9]/.test(text);
+  const hasSlash = /[\\/]/.test(text);
+  if (hasDomainDot && hasSlash) return true;
+  return false;
+}
+const DELIM_SPLIT = /([/\\\-_.:?#&=])/;
+function smartBreak(text) {
+  if (!isPathLike(text)) return text;
+  const parts = text.split(DELIM_SPLIT);
+  const nodes = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (part === "") continue;
+    nodes.push(part);
+    if (i % 2 === 1) nodes.push(/* @__PURE__ */ jsx("wbr", {}, `wbr-${i}`));
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes });
+}
+function SmartBreak({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: smartBreak(String(children ?? "")) });
+}
+export {
+  SmartBreak,
+  isPathLike,
+  smartBreak
+};

package/dist/toc/toc-title.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Return the TOC section label for the given BCP-47 language tag.
+ *
+ * Accepts full tags ("en-US", "ja-JP") by checking the primary subtag
+ * first, then falls back to the full tag, then falls back to the English
+ * default so callers always receive a non-empty string.
+ */
+declare function getTocTitle(lang?: string): string;
+
+export { getTocTitle };

package/dist/toc/toc-title.js

@@ -0,0 +1,14 @@
+const TOC_TITLES = {
+  en: "On this page",
+  ja: "\u76EE\u6B21",
+  de: "Auf dieser Seite"
+};
+const DEFAULT_TOC_TITLE = "On this page";
+function getTocTitle(lang) {
+  if (!lang) return DEFAULT_TOC_TITLE;
+  const primary = lang.split("-")[0];
+  return TOC_TITLES[primary] ?? TOC_TITLES[lang] ?? DEFAULT_TOC_TITLE;
+}
+export {
+  getTocTitle
+};

package/dist/toc/toc.d.ts

@@ -0,0 +1,60 @@
+import { VNode } from 'preact';
+import { HeadingItem } from './types.js';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface TocProps {
+    headings: readonly HeadingItem[];
+    /**
+     * Section label used by MobileToc. The desktop Toc no longer renders
+     * a visible heading (issue #1655 / T1) but the prop is kept so callers
+     * can share a single title value for both desktop and mobile surfaces.
+     * Defaults to "On this page" (English).
+     */
+    title?: string;
+}
+/**
+ * Desktop right-rail Table of Contents — a Preact island component.
+ *
+ * Renders the `<nav aria-label="Table of contents">` directly. **The
+ * caller is responsible for wrapping this in `<Island when="load">`**
+ * so the SSG output emits the `data-zfb-island="Toc"` hydration marker
+ * around the nav. `<DocLayoutWithDefaults>` does this for you; consumers
+ * who render `<Toc>` outside the default layout (e.g. via the
+ * `tocOverride` prop or in a custom layout) must apply the wrapper
+ * themselves — otherwise the active-section scroll-spy never hydrates
+ * on the client and the nav stays static.
+ *
+ * Wave 13 ("smoke-toc duplicate-nav regression", zudolab/zudo-doc#1355):
+ * before this refactor, this module exported a `Toc` wrapper that itself
+ * called `Island(...)` internally and an inner `TocInner` component that
+ * carried `displayName = "Toc"`. The zfb island scanner picked the
+ * exported `Toc` (the wrapper) as the hydration target, so on the
+ * client `mountIslands` ran `hydrate(<Toc/>, dataIslandDiv)` where the
+ * vnode itself rendered to *another* `<div data-zfb-island="Toc">…<nav>…</nav></div>`
+ * — Preact appended the new wrapper-div as a child of the existing
+ * data-zfb-island element instead of in-place hydrating the inner nav,
+ * leaving two `<nav aria-label="Table of contents">` elements in the
+ * post-hydration DOM. The host's Wave 12 prop-serialisation pin
+ * (`data-props`) made hydration succeed where it previously crashed
+ * silently on the missing `headings` prop, which is why the duplicate
+ * only became visible in CI smoke runs after Wave 12. Moving the
+ * `<Island>` wrapper to the call site lets the bundle hydrate the bare
+ * `<nav>` against the existing DOM in-place, eliminating the duplicate.
+ *
+ * Renders only depth 2–4 headings (h2/h3/h4), matching zudo-doc's
+ * historical behavior — the page title (h1) is rendered separately by
+ * the layout and h5+ are deemed too granular for the TOC.
+ *
+ * The `title` prop is kept on the signature (MobileToc and callers still
+ * use it) but the desktop Toc no longer renders a visible heading — the
+ * `<nav aria-label="Table of contents">` landmark provides the section
+ * semantics for screen readers. Issue #1655 / T1.
+ */
+declare function Toc({ headings, title }: TocProps): VNode;
+declare namespace Toc {
+    var displayName: string;
+}
+
+export { Toc, type TocProps };

package/dist/toc/toc.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "preact/jsx-runtime";
+import { useMemo } from "preact/hooks";
+import { useActiveHeading } from "./use-active-heading.js";
+import { SmartBreak } from "./smart-break.js";
+import { cx } from "./cx.js";
+function Toc({ headings, title = "On this page" }) {
+  const filtered = useMemo(
+    () => headings.filter((h) => h.depth >= 2 && h.depth <= 4),
+    [headings]
+  );
+  const { activeId, activate } = useActiveHeading(filtered);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Table of contents",
+      className: cx(
+        "hidden xl:flex flex-col",
+        "w-[280px] shrink-0",
+        "sticky top-[3.5rem] self-start z-10",
+        "pt-vsp-xl lg:pt-vsp-2xl",
+        "h-[calc(100vh-3.5rem)]"
+      ),
+      children: filtered.length > 0 && /* @__PURE__ */ jsx("ul", { className: "border-l border-muted pl-hsp-lg overflow-y-auto", children: filtered.map((heading, index) => {
+        const isActive = heading.slug === activeId;
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: cx(
+              heading.depth === 3 && "ml-hsp-lg",
+              heading.depth === 4 && "ml-hsp-2xl"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `#${heading.slug}`,
+                onClick: () => activate(heading.slug),
+                "aria-current": isActive ? "true" : void 0,
+                className: cx(
+                  "block py-vsp-2xs text-small leading-snug transition-colors",
+                  isActive ? "bg-fg text-bg font-medium" : "text-muted hover:underline focus:underline"
+                ),
+                children: /* @__PURE__ */ jsx(SmartBreak, { children: heading.text })
+              }
+            )
+          },
+          `${heading.slug}-${index}`
+        );
+      }) })
+    }
+  );
+}
+Toc.displayName = "Toc";
+export {
+  Toc
+};

package/dist/toc/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Heading metadata consumed by the TOC primitives.
+ *
+ * Shape mirrors the `headings` array exported from MDX modules by the
+ * underlying engine — `depth` (1–6), DOM `slug` (matching the rendered
+ * heading element's id), and the rendered `text`. Keep field names and
+ * types byte-aligned with the engine so a page module's `headings`
+ * export drops in directly.
+ */
+interface HeadingItem {
+    readonly depth: number;
+    readonly slug: string;
+    readonly text: string;
+}
+/**
+ * Alias kept for ergonomic imports — `TocItem` is the same shape the
+ * TOC components consume after filtering by depth. Filtering does not
+ * change the per-item shape, so the alias documents intent without
+ * introducing a structural difference.
+ */
+type TocItem = HeadingItem;
+
+export type { HeadingItem, TocItem };

package/dist/toc/use-active-heading.d.ts

@@ -0,0 +1,30 @@
+import { HeadingItem } from './types.js';
+
+/**
+ * Pure helper that picks the active heading id given the heading slug
+ * order and a slug→element map. Extracted from the hook so it is unit-
+ * testable without DOM event plumbing.
+ *
+ * Algorithm: find the first heading whose top is at or below the
+ * SCROLL_MARGIN_TOP threshold ("first visible"). If none, the user has
+ * scrolled past every heading — return the last one. If the very first
+ * heading is the first visible AND its top is above the viewport
+ * midline, treat it as already active. Otherwise activate the
+ * predecessor of the first visible heading.
+ */
+declare function getActiveHeadingId(headingIds: readonly string[], elementMap: ReadonlyMap<string, HTMLElement>, viewportHeight: number): string | null;
+interface UseActiveHeadingResult {
+    activeId: string | null;
+    activate: (id: string) => void;
+}
+/**
+ * Scroll-spy hook. Tracks which heading slug should be highlighted
+ * based on the current scroll position. Provides an `activate(id)`
+ * imperatively-callable helper used by click handlers — sets the
+ * active id immediately and suppresses the scroll-driven update until
+ * the smooth-scroll completes (`scrollend`, with a timeout fallback
+ * for older Safari).
+ */
+declare function useActiveHeading(headings: readonly HeadingItem[]): UseActiveHeadingResult;
+
+export { type UseActiveHeadingResult, getActiveHeadingId, useActiveHeading };

package/dist/toc/use-active-heading.js

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+const SCROLL_MARGIN_TOP = 80;
+const DEBOUNCE_MS = 200;
+function getActiveHeadingId(headingIds, elementMap, viewportHeight) {
+  if (headingIds.length === 0) return null;
+  let firstVisibleIndex = -1;
+  for (let i = 0; i < headingIds.length; i++) {
+    const el2 = elementMap.get(headingIds[i]);
+    if (!el2) continue;
+    const { top } = el2.getBoundingClientRect();
+    if (top >= SCROLL_MARGIN_TOP) {
+      firstVisibleIndex = i;
+      break;
+    }
+  }
+  if (firstVisibleIndex === -1) {
+    return headingIds[headingIds.length - 1] ?? null;
+  }
+  if (firstVisibleIndex === 0) {
+    const el2 = elementMap.get(headingIds[0]);
+    if (el2) {
+      const { top } = el2.getBoundingClientRect();
+      if (top < viewportHeight / 2) {
+        return headingIds[0] ?? null;
+      }
+    }
+    return null;
+  }
+  const el = elementMap.get(headingIds[firstVisibleIndex]);
+  if (el) {
+    const { top } = el.getBoundingClientRect();
+    if (top < viewportHeight / 2) {
+      return headingIds[firstVisibleIndex] ?? null;
+    }
+  }
+  return headingIds[firstVisibleIndex - 1] ?? null;
+}
+function useActiveHeading(headings) {
+  const [activeId, setActiveId] = useState(null);
+  const headingIdsRef = useRef([]);
+  const elementMapRef = useRef(/* @__PURE__ */ new Map());
+  const suppressedRef = useRef(false);
+  const activate = useCallback((id) => {
+    setActiveId(id);
+    suppressedRef.current = true;
+    setTimeout(() => {
+      suppressedRef.current = false;
+    }, 2e3);
+  }, []);
+  useEffect(() => {
+    const ids = headings.map((h) => h.slug);
+    headingIdsRef.current = ids;
+    const map = /* @__PURE__ */ new Map();
+    for (const id of ids) {
+      const el = document.getElementById(id);
+      if (el) map.set(id, el);
+    }
+    elementMapRef.current = map;
+    let timerId = null;
+    function update() {
+      timerId = null;
+      setActiveId(
+        getActiveHeadingId(
+          headingIdsRef.current,
+          elementMapRef.current,
+          window.innerHeight
+        )
+      );
+    }
+    let fallbackTimerId = null;
+    function onScroll() {
+      if (suppressedRef.current) {
+        if (fallbackTimerId !== null) clearTimeout(fallbackTimerId);
+        fallbackTimerId = setTimeout(onScrollEnd, 1500);
+        return;
+      }
+      if (timerId !== null) clearTimeout(timerId);
+      timerId = setTimeout(update, DEBOUNCE_MS);
+    }
+    function onScrollEnd() {
+      suppressedRef.current = false;
+      if (fallbackTimerId !== null) {
+        clearTimeout(fallbackTimerId);
+        fallbackTimerId = null;
+      }
+      if (timerId !== null) clearTimeout(timerId);
+      update();
+    }
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    window.addEventListener("scrollend", onScrollEnd, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("scrollend", onScrollEnd);
+      if (timerId !== null) clearTimeout(timerId);
+      if (fallbackTimerId !== null) clearTimeout(fallbackTimerId);
+    };
+  }, [headings]);
+  return { activeId, activate };
+}
+export {
+  getActiveHeadingId,
+  useActiveHeading
+};

package/dist/transitions/index.d.ts

@@ -0,0 +1 @@
+export { AFTER_NAVIGATE_EVENT, BEFORE_NAVIGATE_EVENT, onAfterNavigate, onBeforeNavigate } from './page-events.js';

package/dist/transitions/index.js

@@ -0,0 +1,12 @@
+import {
+  BEFORE_NAVIGATE_EVENT,
+  AFTER_NAVIGATE_EVENT,
+  onBeforeNavigate,
+  onAfterNavigate
+} from "./page-events.js";
+export {
+  AFTER_NAVIGATE_EVENT,
+  BEFORE_NAVIGATE_EVENT,
+  onAfterNavigate,
+  onBeforeNavigate
+};