@takazudo/zudo-doc 5.28.2 → 6.0.1

package/eject/tab-item/tab-item.tsx

@@ -1,6 +1,4 @@
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
 // JSX port of the legacy `tab-item` component.
 //
 // Visual wrapper for one tab panel inside a Tabs group. Server-rendered,
@@ -8,7 +6,7 @@
 // `data-tab-label` / `data-tab-default` to wire interactivity, so the
 // attribute shape here must mirror the Astro original byte-for-byte.
 
-import type { ComponentChildren } from "preact";
+import type { Child } from "@takazudo/zfb/zudo-react";
 
 export interface TabItemProps {
   /** Human-readable label rendered by the parent Tabs trigger row. */
@@ -25,7 +23,7 @@ export interface TabItemProps {
    */
   default?: boolean;
   /** Panel body. */
-  children?: ComponentChildren;
+  children?: Child;
 }
 
 /**

package/eject/theme-toggle/hydration-pending.ts

@@ -1,13 +1,9 @@
-import { useEffect, useState } from "preact/hooks";
-
-/**
- * Keep an interactive control pending until its first successful client mount.
- * Initializing from `enabled` preserves server/client-first-render parity.
- */
-export function useHydrationPending(enabled: boolean): boolean {
-  const [pending, setPending] = useState(enabled);
-
-  useEffect(() => setPending(false), []);
+import { signal } from "@takazudo/zfb/zudo-react";
+import type { ReadonlySignal, Scope } from "@takazudo/zfb/zudo-react";
 
+/** Keep SSR and the first client render pending, then release on activation. */
+export function hydrationPending(scope: Scope, enabled: boolean): ReadonlySignal<boolean> {
+  const pending = signal(enabled);
+  scope.onActivate(() => { pending.value = false; });
   return pending;
 }

package/eject/theme-toggle/index.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import { useState, useEffect, useRef } from "preact/hooks";
-import { createPortal } from "preact/compat";
-import { useHydrationPending } from "./hydration-pending.js";
+import { computed, getScope, Show, signal, type ReadonlySignal, type Ref } from "@takazudo/zfb/zudo-react";
+import { hydrationPending } from "./hydration-pending.js";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
 import {
   applyThemePreference,
@@ -21,16 +18,12 @@ let menuSequence = 0;
 
 function PreferenceIcon({ preference }: { preference: ThemePreference }) {
   return (
-    <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="1.2"
-      strokeLinecap="square" strokeLinejoin="miter">
-      {preference === "light" ? (
-        <><circle cx="12" cy="12" r="3.6" /><path d="M12 2.5V6M12 18V21.5M2.5 12H6M18 12H21.5M5.3 5.3L7.8 7.8M16.2 16.2L18.7 18.7M5.3 18.7L7.8 16.2M16.2 7.8L18.7 5.3" /></>
-      ) : preference === "dark" ? (
-        <path d="M10.2 2.9C5.7 3.9 2.6 7.9 3 12.6C3.4 17.7 7.9 21.5 13 21.1C16.9 20.7 20.1 17.9 21 14.1C18.6 15.7 15.6 15.8 13.2 14.3C9.3 12 8 6.8 10.2 2.9Z" />
-      ) : (
-        <path d="M2.5 3.5H21.5V16.5H2.5ZM12 16.5V20.5M7.5 20.5H16.5" />
-      )}
+    <svg aria-hidden="true" width="20" height="20"
+      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"
+      stroke-linecap="square" stroke-linejoin="miter">
+      <Show when={computed(() => preference === "light")}>{() => <><circle cx="12" cy="12" r="3.6" /><path d="M12 2.5V6M12 18V21.5M2.5 12H6M18 12H21.5M5.3 5.3L7.8 7.8M16.2 16.2L18.7 18.7M5.3 18.7L7.8 16.2M16.2 7.8L18.7 5.3" /></>}</Show>
+      <Show when={computed(() => preference === "dark")}>{() => <path d="M10.2 2.9C5.7 3.9 2.6 7.9 3 12.6C3.4 17.7 7.9 21.5 13 21.1C16.9 20.7 20.1 17.9 21 14.1C18.6 15.7 15.6 15.8 13.2 14.3C9.3 12 8 6.8 10.2 2.9Z" />}</Show>
+      <Show when={computed(() => preference === "system")}>{() => <path d="M2.5 3.5H21.5V16.5H2.5ZM12 16.5V20.5M7.5 20.5H16.5" />}</Show>
     </svg>
   );
 }
@@ -59,198 +52,165 @@ export interface ThemeToggleProps {
   pendingUntilHydrated?: boolean;
 }
 
-// Keep the named export: zfb's island scanner keys on the ThemeToggle name.
-export function ThemeToggle({
-  defaultMode = "dark",
-  respectPrefersColorScheme = true,
-  labels = englishLabels,
-  pendingUntilHydrated = true,
-}: ThemeToggleProps) {
-  const pending = useHydrationPending(pendingUntilHydrated);
-  // The menu exists only after a client interaction; allocate across island roots.
-  const menuId = useRef("");
-  const ensureMenuId = () => {
-    if (!menuId.current) menuId.current = `zd-appearance-${++menuSequence}`;
-  };
-  const rootRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
-  const restoreFocusRef = useRef(false);
-  const [preference, setPreference] = useState<ThemePreference>(
-    respectPrefersColorScheme ? "system" : defaultMode,
-  );
-  const [resolved, setResolved] = useState<ColorSchemeMode>(defaultMode);
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [placement, setPlacement] = useState<{ left: number; top: number; width: number; maxHeight: number } | null>(null);
+interface AppearanceMenuProps {
+  id: string;
+  labels: ThemeToggleLabels;
+  preference: ReadonlySignal<ThemePreference>;
+  resolved: ReadonlySignal<ColorSchemeMode>;
+  activeIndex: ReadonlySignal<number>;
+  triggerRef: Ref<HTMLButtonElement>;
+  rootRef: Ref<HTMLDivElement>;
+  close: (restoreFocus?: boolean) => void;
+  select: (next: ThemePreference) => void;
+  move: (index: number) => void;
+}
 
-  useEffect(() => {
-    const sync = () => {
-      setPreference(readThemePreference(defaultMode, respectPrefersColorScheme));
-      setResolved(readColorSchemeFromDom(defaultMode));
-    };
-    sync();
-    const unsubscribePreference = subscribeThemePreferenceChanged(() => {
-      sync();
-      setOpen(false);
-    });
-    const unsubscribeScheme = subscribeColorSchemeChanged(sync);
-    return () => {
-      unsubscribePreference();
-      unsubscribeScheme();
-    };
-  }, [defaultMode, respectPrefersColorScheme]);
+function AppearanceMenu({ id, labels, preference, resolved, activeIndex, triggerRef, rootRef, close, select, move }: AppearanceMenuProps) {
+  const scope = getScope();
+  const menuRef: Ref<HTMLDivElement> = { current: null };
+  const itemRefs: Ref<HTMLButtonElement>[] = preferences.map(() => ({ current: null }));
+  const placement = signal({ visibility: "hidden", left: "0px", top: "0px", right: "auto", bottom: "auto", margin: "0", width: "260px", "max-height": "none" });
 
-  useEffect(() => {
-    if (!open) return;
-    // A portaled menu still sits below the third-party token panel's very high
-    // stacking tier. The native popover top layer keeps it actionable while
-    // that panel is open, without competing with the host's z-index scale.
+  scope.onActivate(() => {
     const menu = menuRef.current;
-    menu?.showPopover?.();
+    if (!menu) return;
+    menu.showPopover?.();
     const position = () => {
       const rect = triggerRef.current?.getBoundingClientRect();
       if (!rect) return;
       const gap = 8;
-      const width = Math.min(260, window.innerWidth - gap * 2);
-      // Measure after the popover enters the top layer. A fixed guess clips
-      // the System helper once the option rows meet the 44px touch target.
-      const desiredHeight = menu?.scrollHeight ?? 280;
+      const width = Math.max(0, Math.min(260, window.innerWidth - gap * 2));
+      const desiredHeight = menu.scrollHeight || 280;
       const roomBelow = window.innerHeight - rect.bottom - gap * 2;
       const roomAbove = rect.top - gap * 2;
       const above = roomBelow < desiredHeight && roomAbove > roomBelow;
       const maxHeight = Math.max(80, Math.min(desiredHeight, above ? roomAbove : roomBelow));
-      setPlacement({
-        left: Math.max(gap, Math.min(rect.right - width, window.innerWidth - width - gap)),
-        top: above ? Math.max(gap, rect.top - gap - maxHeight) : rect.bottom + gap,
-        width,
-        maxHeight,
-      });
+      const left = Math.max(gap, Math.min(rect.right - width, window.innerWidth - width - gap));
+      const top = above ? Math.max(gap, rect.top - gap - maxHeight) : rect.bottom + gap;
+      placement.value = { visibility: "visible", left: `${left}px`, top: `${top}px`, right: "auto", bottom: "auto", margin: "0", width: `${width}px`, "max-height": `${maxHeight}px` };
     };
     const onPointerDown = (event: PointerEvent) => {
-      if (
-        !rootRef.current?.contains(event.target as Node) &&
-        !menuRef.current?.contains(event.target as Node)
-      ) setOpen(false);
+      if (!rootRef.current?.contains(event.target as Node) && !menu.contains(event.target as Node)) close();
     };
-    const onNavigate = () => setOpen(false);
+    const onNavigate = () => close();
     position();
+    // The placement signal commits visibility after this activation callback.
+    // Focus only after the visible popover has reached the browser layout.
+    const focusFrame = requestAnimationFrame(() => {
+      if (!scope.abortSignal.aborted) itemRefs[activeIndex.value]?.current?.focus();
+    });
     document.addEventListener("pointerdown", onPointerDown);
     window.addEventListener("resize", position);
     window.addEventListener("scroll", position, true);
     document.addEventListener(AFTER_NAVIGATE_EVENT, onNavigate);
     return () => {
-      if (menu?.hidePopover && menu.matches(":popover-open")) menu.hidePopover();
+      cancelAnimationFrame(focusFrame);
+      if (menu.hidePopover && menu.matches(":popover-open")) menu.hidePopover();
       document.removeEventListener("pointerdown", onPointerDown);
       window.removeEventListener("resize", position);
       window.removeEventListener("scroll", position, true);
       document.removeEventListener(AFTER_NAVIGATE_EVENT, onNavigate);
     };
-  }, [open]); // activeIndex is set before opening; arrow movement focuses directly.
+  });
+
+  const onMenuKeyDown = (event: Event) => {
+    const keyboard = event as KeyboardEvent;
+    if (keyboard.isComposing) return;
+    if (keyboard.key === "Escape") {
+      keyboard.preventDefault();
+      keyboard.stopPropagation();
+      close(true);
+    } else if (keyboard.key === "Tab") {
+      window.setTimeout(() => close(), 0);
+    } else if (keyboard.key === "ArrowDown" || keyboard.key === "ArrowUp" || keyboard.key === "Home" || keyboard.key === "End") {
+      keyboard.preventDefault();
+      const next = keyboard.key === "Home" ? 0 : keyboard.key === "End" ? 2 : activeIndex.value + (keyboard.key === "ArrowDown" ? 1 : -1);
+      move(next);
+      itemRefs[(next + preferences.length) % preferences.length]?.current?.focus();
+    }
+  };
 
-  useEffect(() => {
-    if (open && placement) itemRefs.current[activeIndex]?.focus();
-  }, [open, placement]); // Focus once the portaled menu is visible.
+  return <div ref={menuRef} id={id} role="menu" aria-label={labels.appearance}
+    on:keydown={onMenuKeyDown}
+    class="fixed z-tooltip overflow-y-auto rounded-lg border border-muted bg-surface p-hsp-xs text-fg shadow-lg"
+    style={placement} popover="manual">
+    <div class="px-hsp-sm py-vsp-xs text-small font-semibold" aria-hidden="true">{labels.appearance}</div>
+    {preferences.map((option, index) => <button ref={itemRefs[index]} type="button"
+      role="menuitemradio" aria-checked={computed(() => preference.value === option)}
+      on:focus={() => move(index)} on:click={() => select(option)}
+      class={computed(() => `flex min-h-[44px] w-full items-center gap-hsp-sm rounded px-hsp-sm text-left text-small ${preference.value === option ? "bg-accent/10" : ""} hover:bg-accent/10 focus-visible:bg-accent/10 focus-visible:outline-2 focus-visible:outline-accent`)}>
+      <PreferenceIcon preference={option} />
+      <span class="flex-1">{labels[option]}</span>
+      <span aria-hidden="true" class="text-accent">{computed(() => preference.value === option ? "✓" : "")}</span>
+    </button>)}
+    <div class="px-hsp-sm py-vsp-xs text-small text-muted">
+      {computed(() => labels.systemHelper.replace("{mode}", labels[resolved.value]))}
+    </div>
+  </div>;
+}
 
-  useEffect(() => {
-    if (open || !restoreFocusRef.current) return;
-    restoreFocusRef.current = false;
-    requestAnimationFrame(() => triggerRef.current?.focus());
-  }, [open]);
+// Keep the named export: zfb's island scanner keys on the ThemeToggle name.
+export function ThemeToggle({ defaultMode = "dark", respectPrefersColorScheme = true, labels = englishLabels, pendingUntilHydrated = true }: ThemeToggleProps) {
+  const scope = getScope();
+  const pending = hydrationPending(scope, pendingUntilHydrated);
+  const rootRef: Ref<HTMLDivElement> = { current: null };
+  const triggerRef: Ref<HTMLButtonElement> = { current: null };
+  const preference = signal<ThemePreference>(respectPrefersColorScheme ? "system" : defaultMode);
+  const resolved = signal<ColorSchemeMode>(defaultMode);
+  const open = signal(false);
+  const activeIndex = signal(0);
+  let menuId = "";
+  const ensureMenuId = () => { if (!menuId) menuId = `zd-appearance-${++menuSequence}`; };
+
+  scope.onActivate(() => {
+    const sync = () => {
+      preference.value = readThemePreference(defaultMode, respectPrefersColorScheme);
+      resolved.value = readColorSchemeFromDom(defaultMode);
+    };
+    sync();
+    const unsubscribePreference = subscribeThemePreferenceChanged(() => { sync(); open.value = false; });
+    const unsubscribeScheme = subscribeColorSchemeChanged(sync);
+    return () => { unsubscribePreference(); unsubscribeScheme(); };
+  });
 
   const close = (restoreFocus = false) => {
-    restoreFocusRef.current = restoreFocus;
-    setOpen(false);
+    open.value = false;
+    if (restoreFocus) requestAnimationFrame(() => {
+      if (!scope.abortSignal.aborted && !open.value) triggerRef.current?.focus();
+    });
   };
   const select = (next: ThemePreference) => {
     close(true);
     applyThemePreference(next);
-    setPreference(next);
-    setResolved(readColorSchemeFromDom(defaultMode));
-  };
-  const move = (index: number) => {
-    const next = (index + preferences.length) % preferences.length;
-    setActiveIndex(next);
-    itemRefs.current[next]?.focus();
-  };
-  const onMenuKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      // The menu is portaled to document.body (see createPortal below), so this
-      // keydown bubbles all the way to `document` — where the mobile drawer's own
-      // Escape-to-close listener lives (sidebar-toggle-island/index.tsx). Without
-      // stopPropagation, closing just the menu would also close the drawer
-      // (zudolab/zudo-doc#4393).
-      event.stopPropagation();
-      close(true);
-    } else if (event.key === "Tab") {
-      // Let the browser move focus before unmounting the focused menu item.
-      window.setTimeout(() => close(), 0);
-    } else if (event.key === "ArrowDown") {
-      event.preventDefault();
-      move(activeIndex + 1);
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      move(activeIndex - 1);
-    } else if (event.key === "Home") {
-      event.preventDefault();
-      move(0);
-    } else if (event.key === "End") {
-      event.preventDefault();
-      move(2);
-    }
+    preference.value = next;
+    resolved.value = readColorSchemeFromDom(defaultMode);
   };
+  const move = (index: number) => { activeIndex.value = (index + preferences.length) % preferences.length; };
+  const show = (index: number) => { ensureMenuId(); move(index); open.value = true; };
 
-  return (
-    <div ref={rootRef} className="relative inline-flex" data-zd-theme-menu="">
-      <button ref={triggerRef} type="button" aria-haspopup="menu" aria-expanded={open}
-        aria-controls={open ? menuId.current : undefined}
-        aria-label={`${labels.appearance}: ${labels[preference]}`}
-        aria-disabled={pending ? "true" : undefined}
-        data-zd-pending={pending ? "" : undefined}
-        onClick={() => {
-          if (pending) return;
-          if (open) close(true);
-          else { setPlacement(null); ensureMenuId(); setActiveIndex(preferences.indexOf(preference)); setOpen(true); }
-        }}
-        onKeyDown={(event) => {
-          if (pending) { if (event.key === "Enter" || event.key === " ") event.preventDefault(); return; }
-          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault(); setPlacement(null); ensureMenuId(); setActiveIndex(event.key === "ArrowDown" ? 0 : 2); setOpen(true);
-          } else if (event.key === "Escape" && open) {
-            // Same layered-ownership fix as onMenuKeyDown above: the trigger sits
-            // inside the mobile drawer (unlike the portaled menu), so its keydown
-            // bubbles straight to the drawer's document-level Escape listener.
-            event.preventDefault();
-            event.stopPropagation();
-            close(true);
-          }
-        }}
-        className="inline-flex h-[40px] w-[40px] shrink-0 items-center justify-center text-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
-      ><PreferenceIcon preference={preference} /></button>
-      {open && createPortal(<div ref={menuRef} id={menuId.current} role="menu" aria-label={labels.appearance}
-        popover={typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype ? "manual" : undefined}
-        onKeyDown={onMenuKeyDown}
-        className="fixed z-tooltip overflow-y-auto rounded-lg border border-muted bg-surface p-hsp-xs text-fg shadow-lg"
-        style={placement ? { left: placement.left, top: placement.top, right: "auto", bottom: "auto", margin: 0, width: placement.width, maxHeight: placement.maxHeight } : { visibility: "hidden", left: 0, top: 0, right: "auto", bottom: "auto", margin: 0, width: Math.min(260, window.innerWidth - 16) }}>
-        <div className="px-hsp-sm py-vsp-xs text-small font-semibold" aria-hidden="true">{labels.appearance}</div>
-        {preferences.map((option, index) => (
-          <button key={option} ref={(node) => { itemRefs.current[index] = node; }} type="button"
-            role="menuitemradio" aria-checked={preference === option}
-            onFocus={() => setActiveIndex(index)} onClick={() => select(option)}
-            className={`flex min-h-[44px] w-full items-center gap-hsp-sm rounded px-hsp-sm text-left text-small ${preference === option ? "bg-accent/10" : ""} hover:bg-accent/10 focus-visible:bg-accent/10 focus-visible:outline-2 focus-visible:outline-accent`}
-          >
-            <PreferenceIcon preference={option} />
-            <span className="flex-1">{labels[option]}</span>
-            <span aria-hidden="true" className="text-accent">{preference === option ? "✓" : ""}</span>
-          </button>
-        ))}
-        <div className="px-hsp-sm py-vsp-xs text-small text-muted">
-          {labels.systemHelper.replace("{mode}", labels[resolved])}
-        </div>
-      </div>, document.body)}
-    </div>
-  );
+  return <div ref={rootRef} class="relative inline-flex" data-zd-theme-menu="">
+    <button ref={triggerRef} type="button" aria-haspopup="menu" aria-expanded={open}
+      aria-controls={computed(() => open.value ? menuId : undefined)}
+      aria-label={computed(() => `${labels.appearance}: ${labels[preference.value]}`)}
+      aria-disabled={computed(() => pending.value ? "true" : undefined)}
+      data-zd-pending={computed(() => pending.value ? "" : undefined)}
+      on:click={() => { if (pending.value) return; if (open.value) close(true); else show(preferences.indexOf(preference.value)); }}
+      on:keydown={(event: Event) => {
+        const keyboard = event as KeyboardEvent;
+        if (keyboard.isComposing) return;
+        if (pending.value) { if (keyboard.key === "Enter" || keyboard.key === " ") keyboard.preventDefault(); return; }
+        if (keyboard.key === "ArrowDown" || keyboard.key === "ArrowUp") {
+          keyboard.preventDefault(); show(keyboard.key === "ArrowDown" ? 0 : 2);
+        } else if (keyboard.key === "Escape" && open.value) {
+          keyboard.preventDefault(); keyboard.stopPropagation(); close(true);
+        }
+      }}
+      class="inline-flex h-[40px] w-[40px] shrink-0 items-center justify-center text-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
+      <Show when={computed(() => preference.value === "light")}>{() => <PreferenceIcon preference="light" />}</Show>
+      <Show when={computed(() => preference.value === "dark")}>{() => <PreferenceIcon preference="dark" />}</Show>
+      <Show when={computed(() => preference.value === "system")}>{() => <PreferenceIcon preference="system" />}</Show>
+    </button>
+    <Show when={open}>{() => <AppearanceMenu id={menuId} labels={labels} preference={preference} resolved={resolved} activeIndex={activeIndex} triggerRef={triggerRef} rootRef={rootRef} close={close} select={select} move={move} />}</Show>
+  </div>;
 }
 ThemeToggle.displayName = "ThemeToggle";

package/eject/toc/mobile-toc.tsx

@@ -1,10 +1,8 @@
 "use client";
 
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { VNode } from "preact";
-import { useMemo, useState } from "preact/hooks";
+import { computed, signal } from "@takazudo/zfb/zudo-react";
+import type { Child } from "@takazudo/zfb/zudo-react";
 
 import type { HeadingItem } from "./types.js";
 import { SmartBreak } from "../smart-break/index.js";
@@ -16,7 +14,7 @@ export interface MobileTocProps {
 }
 
 /**
- * Collapsible TOC for narrow viewports (`xl:hidden`) — a Preact island
+ * Collapsible TOC for narrow viewports (`xl:hidden`) — a zudo-react island
  * component. Closed by default; tapping the header toggles, and tapping
  * any entry closes the panel after navigation.
  *
@@ -48,12 +46,17 @@ export interface MobileTocProps {
 export function MobileToc({
   headings,
   title = "On this page",
-}: MobileTocProps): VNode {
-  const filtered = useMemo(
-    () => headings.filter((h) => h.depth >= 2 && h.depth <= 4),
-    [headings],
-  );
-  const [open, setOpen] = useState(false);
+}: MobileTocProps): Child {
+  const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 4);
+  const open = signal(false);
+  const chevronClass = computed(() => cx(
+    "h-icon-sm w-icon-sm text-muted transition-transform duration-150",
+    open.value && "rotate-180",
+  ));
+  const itemsClass = computed(() => cx(
+    "border-t border-muted px-hsp-lg py-vsp-xs space-y-vsp-2xs",
+    !open.value && "hidden",
+  ));
 
   // No qualifying headings: emit a CSS-hidden container that still carries
   // the locale title text. The `hidden` class sets display:none visually,
@@ -62,7 +65,7 @@ export function MobileToc({
   // aria-hidden prevents screen readers from announcing the invisible label.
   if (filtered.length === 0) {
     return (
-      <div className="hidden" aria-hidden="true">
+      <div class="hidden" aria-hidden="true">
         {title}
       </div>
     );
@@ -77,29 +80,25 @@ export function MobileToc({
   // branch is a `display:none` placeholder carrying only the locale label, so
   // there is nothing for a pack to style.
   return (
-    <div data-zd-mobile-toc className="xl:hidden border border-muted mb-vsp-lg">
+    <div data-zd-mobile-toc class="xl:hidden border border-muted mb-vsp-lg">
       <button
         type="button"
-        onClick={() => setOpen((prev) => !prev)}
+        on:click={() => { open.value = !open.value; }}
         aria-expanded={open}
-        className="flex w-full items-center justify-between px-hsp-lg py-vsp-xs text-small font-medium text-fg"
+        class="flex w-full items-center justify-between px-hsp-lg py-vsp-xs text-small font-medium text-fg"
       >
         <span>{title}</span>
         <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",
-          )}
+          class={chevronClass}
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
-          strokeWidth={2}
+          stroke-width={2}
         >
           <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
+            stroke-linecap="round"
+            stroke-linejoin="round"
             d="M19 9l-7 7-7-7"
           />
         </svg>
@@ -110,24 +109,21 @@ export function MobileToc({
           elements remain in the static markup, satisfying the a11y requirement
           for keyboard accessibility after hydration. */}
       <ul
-        className={cx(
-          "border-t border-muted px-hsp-lg py-vsp-xs space-y-vsp-2xs",
-          !open && "hidden",
-        )}
-        aria-hidden={!open}
+        class={itemsClass}
+        aria-hidden={computed(() => !open.value)}
       >
         {filtered.map((heading, index) => (
           <li
             key={`${heading.slug}-${index}`}
-            className={cx(
+            class={cx(
               heading.depth === 3 && "ml-hsp-lg",
               heading.depth === 4 && "ml-hsp-2xl",
             )}
           >
             <a
               href={`#${heading.slug}`}
-              onClick={() => setOpen(false)}
-              className="block py-vsp-2xs text-small text-muted hover:text-fg hover:underline focus-visible:underline"
+              on:click={() => { open.value = false; }}
+              class="block py-vsp-2xs text-small text-muted hover:text-fg hover:underline focus-visible:underline"
             >
               <SmartBreak>{heading.text}</SmartBreak>
             </a>

package/eject/toc/toc.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 /** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { VNode } from "preact";
-import { useMemo } from "preact/hooks";
+import { computed, getScope, type Child } from "@takazudo/zfb/zudo-react";
 
 import { useActiveHeading } from "./use-active-heading.js";
 import type { HeadingItem } from "./types.js";
@@ -23,7 +20,7 @@ export interface TocProps {
 }
 
 /**
- * Desktop right-rail Table of Contents — a Preact island component.
+ * Desktop right-rail Table of Contents — a zudo-react island component.
  *
  * Renders the `<nav aria-label="Table of contents">` directly. **The
  * caller is responsible for wrapping this in `<Island when="load">`**
@@ -60,47 +57,47 @@ export interface TocProps {
  * `<nav aria-label="Table of contents">` landmark provides the section
  * semantics for screen readers. Issue #1655 / T1.
  */
-export function Toc({ headings, title = "On this page" }: TocProps): VNode {
-  const filtered = useMemo(
-    () => headings.filter((h) => h.depth >= 2 && h.depth <= 4),
-    [headings],
-  );
-  const { activeId, activate } = useActiveHeading(filtered);
+export function Toc({ headings, title = "On this page" }: TocProps): Child {
+  const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 4);
+  const { activeId, activate } = useActiveHeading(getScope(), filtered);
 
   return (
     <nav
       aria-label="Table of contents"
       data-zd-toc
-      className={cx(
+      class={cx(
         "hidden xl:flex flex-col",
         "w-[280px] shrink-0",
         "sticky top-[3.5rem] self-start z-sidebar",
         "pt-vsp-xl lg:pt-vsp-2xl",
-        "h-[calc(100vh-3.5rem)]",
+        "h-[calc(100vh_-_3.5rem)]",
       )}
     >
       {filtered.length > 0 && (
-        <ul className="border-l border-muted pl-hsp-lg overflow-y-auto">
+        <ul class="border-l border-muted pl-hsp-lg overflow-y-auto">
           {filtered.map((heading, index) => {
-            const isActive = heading.slug === activeId;
+            const isActive = computed(() => heading.slug === activeId.value);
+            const linkClass = computed(() =>
+              cx(
+                "block py-vsp-2xs text-small leading-snug transition-colors duration-0",
+                isActive.value
+                  ? "bg-fg text-bg font-medium"
+                  : "text-muted hover:underline focus:underline",
+              ),
+            );
             return (
               <li
                 key={`${heading.slug}-${index}`}
-                className={cx(
+                class={cx(
                   heading.depth === 3 && "ml-hsp-lg",
                   heading.depth === 4 && "ml-hsp-2xl",
                 )}
               >
                 <a
                   href={`#${heading.slug}`}
-                  onClick={() => activate(heading.slug)}
-                  aria-current={isActive ? "true" : undefined}
-                  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",
-                  )}
+                  on:click={() => activate(heading.slug)}
+                  aria-current={computed(() => isActive.value ? "true" : undefined)}
+                  class={linkClass}
                 >
                   <SmartBreak>{heading.text}</SmartBreak>
                 </a>