create-zudo-doc 0.2.21 → 0.2.22

package/templates/features/docTags/files/pages/lib/_tag-pages.tsx

@@ -1,213 +1,47 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource preact */
-// Shared data + renderers for the doc-tags pages (#2010).
-//
-// Collapses the per-locale page pairs:
-//   pages/docs/tags/[tag].tsx   + pages/[locale]/docs/tags/[tag].tsx
-//   pages/docs/tags/index.tsx   + pages/[locale]/docs/tags/index.tsx
-// into locale-parameterized helpers. The page files stay thin shells that own
-// only their paths() param shapes; URL prefixes and the default-vs-locale
-// data path branch live here.
-//
-// Data-path branch (kept exactly as the original pages had it):
-//   - Default locale: the "docs" collection directly, filtered
-//     unlisted/draft/category_no_page before tag collection.
-//   - Non-default locale: locale-first merge with base fallback
-//     (see locale-merge.ts) — draft-filtered inputs, unlisted dropped by the
-//     merge default, category_no_page filtered AFTER the merge so a locale
-//     override carrying the flag first wins the merge (suppressing the base
-//     doc); pre-merge filtering would drop it from localeSlugSet and the
-//     unflagged base doc would resurface as a card linking to a locale route
-//     the docs route never builds.
+// Thin stub — tag-pages moved to the package (epic #2344, S8).
+// Calls `createTagPages(deps)` from @takazudo/zudo-doc/tag-pages with host
+// singletons injected, then re-exports the resulting functions so all existing
+// call sites continue to work unchanged.
 
+import { createTagPages } from "@takazudo/zudo-doc/tag-pages";
+import type { TagInfo } from "@takazudo/zudo-doc/tag-pages";
 import { collectTags } from "@/utils/tags";
-import type { TagInfo } from "@/utils/tags";
-import { toRouteSlug } from "@/utils/slug";
-import { t, defaultLocale } from "@/config/i18n";
+import { defaultLocale, t } from "@/config/i18n";
 import { settings } from "@/config/settings";
 import { withBase, docsUrl } from "@/utils/base";
-import { DocLayoutWithDefaults } from "@takazudo/zudo-doc/doclayout";
-import { Breadcrumb } from "@takazudo/zudo-doc/breadcrumb";
-import type { BreadcrumbItem } from "@takazudo/zudo-doc/breadcrumb";
-import { DocCardGrid, TagNav } from "@takazudo/zudo-doc/nav-indexing";
-import type { TagItem, TagNavLabels } from "@takazudo/zudo-doc/nav-indexing";
-import type { JSX } from "preact";
+import { isDefaultLocaleOnlyPath } from "@/utils/base";
 import { FooterWithDefaults } from "./_footer-with-defaults";
 import { HeaderWithDefaults } from "./_header-with-defaults";
 import { HeadWithDefaults } from "./_head-with-defaults";
 import { composeMetaTitle } from "./_compose-meta-title";
 import { DocHistoryArea } from "./_doc-history-area";
 import { BodyEndIslands } from "./_body-end-islands";
-import { stableDocs, memoizeDerived } from "./_nav-source-cache";
-import { mergeLocaleDocs } from "./locale-merge";
-
-// ---------------------------------------------------------------------------
-// Tag collection
-// ---------------------------------------------------------------------------
-
-/**
- * Build the { tag → TagInfo } map for one locale, preserving each original
- * page's exact data path (see the module-header branch notes).
- *
- * Memoized on the snapshot-anchored stableDocs identity (same pattern as
- * _nav-source-cache) so the collection bridging and tag aggregation run once
- * per locale per build rather than once per built tag page.
- */
-export function collectTagMapForLocale(locale: string): Map<string, TagInfo> {
-  if (locale === defaultLocale) {
-    const baseDocs = stableDocs("docs");
-    return memoizeDerived([baseDocs], "tagMap;default", () => {
-      // category_no_page index.mdx builds no route — drop it so a tag it carries
-      // doesn't render a DocCard linking to a non-existent /docs/<cat>/ page.
-      const docs = baseDocs.filter(
-        (doc) =>
-          !doc.data.unlisted && !doc.data.draft && !doc.data.category_no_page,
-      );
-      return collectTags(docs, (id, data) => data.slug ?? toRouteSlug(id));
-    });
-  }
-
-  const baseDocs = stableDocs("docs");
-  const localeDocs = stableDocs(`docs-${locale}`);
-  return memoizeDerived([baseDocs, localeDocs], `tagMap;${locale}`, () => {
-    const { docs: mergedDocs } = mergeLocaleDocs({
-      baseDocs: baseDocs.filter((d) => !d.data.draft),
-      localeDocs: localeDocs.filter((d) => !d.data.draft),
-      applyDefaultLocaleOnlyFilter: true,
-    });
-    const docs = mergedDocs.filter((d) => !d.data.category_no_page);
-    return collectTags(docs, (id, data) => data.slug ?? toRouteSlug(id));
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Shared renderers
-// ---------------------------------------------------------------------------
-
-/** URL prefix for a locale: "" for the default locale, "/{locale}" otherwise. */
-function localePrefix(locale: string): string {
-  return locale === defaultLocale ? "" : `/${locale}`;
-}
-
-/** Per-tag detail page (chip target). */
-export function TagDetailPageView({
-  locale,
-  tag,
-  tagInfo,
-}: {
-  locale: string;
-  tag: string;
-  tagInfo: TagInfo;
-}): JSX.Element {
-  const isDefault = locale === defaultLocale;
-  const prefix = localePrefix(locale);
-
-  const countText =
-    tagInfo.count === 1
-      ? t("doc.pageCountSingle", locale).replace("{count}", String(tagInfo.count))
-      : t("doc.pageCount", locale).replace("{count}", String(tagInfo.count));
-
-  const pageTitle = `${t("doc.taggedWith", locale)}: ${tag}`;
-
-  const breadcrumbItems: BreadcrumbItem[] = [
-    { label: "Docs" },
-    { label: t("doc.allTags", locale), href: withBase(`${prefix}/docs/tags`) },
-    { label: tag },
-  ];
-
-  const cardItems = tagInfo.docs.map((doc) => ({
-    href: docsUrl(doc.slug, locale),
-    title: doc.title,
-    description: doc.description,
-  }));
-
-  return (
-    <DocLayoutWithDefaults
-      title={composeMetaTitle(pageTitle)}
-      head={<HeadWithDefaults title={pageTitle} />}
-      // The original default-locale page omitted `lang` entirely; passing
-      // undefined relies on Preact treating an undefined prop as absent.
-      lang={isDefault ? undefined : locale}
-      noindex={settings.noindex}
-      hideSidebar={true}
-      hideToc={true}
-      // Empty fragment suppresses DocLayoutWithDefaults' empty-data default
-      // Sidebar island — its marker never hydrates for published-package
-      // consumers (zfb#999) and zfb >= next.38 warns about it; the sidebar is
-      // hidden on this page anyway (zudolab/zudo-doc#2057).
-      sidebarOverride={<></>}
-      // Tag segment URL-encoded — emitted href/path sites only; route params
-      // stay raw (e.g. "type:guide" → "type%3Aguide").
-      headerOverride={<HeaderWithDefaults lang={locale} currentPath={withBase(`${prefix}/docs/tags/${encodeURIComponent(tag)}`)} />}
-      breadcrumbOverride={<Breadcrumb items={breadcrumbItems} />}
-      footerOverride={<FooterWithDefaults lang={locale} />}
-      bodyEndComponents={<BodyEndIslands basePath={settings.base ?? "/"} />}
-      enableClientRouter={settings.dynamicPageTransition}
-    >
-      <h1 class="text-heading font-bold mb-vsp-xs">{pageTitle}</h1>
-      <p class="text-muted mb-vsp-lg">{countText}</p>
-      <DocCardGrid ariaLabel={pageTitle} items={cardItems} />
-      <DocHistoryArea slug={`tags/${tag}`} locale={locale} />
-    </DocLayoutWithDefaults>
-  );
-}
-
-/** "All Tags" index page — computes the tag map at render time (matching the
- *  original pages, which had no props from paths()). */
-export function TagsIndexPageView({ locale }: { locale: string }): JSX.Element {
-  const isDefault = locale === defaultLocale;
-  const prefix = localePrefix(locale);
-  const pageTitle = t("doc.allTags", locale);
-
-  const tagMap = collectTagMapForLocale(locale);
-
-  const labels: TagNavLabels = {
-    tags: t("doc.tags", locale),
-    taggedWith: t("doc.taggedWith", locale),
-  };
-
-  // Sort alphabetically using the page locale — matches documented tag-nav sort order.
-  const tags: TagItem[] = [...tagMap.values()]
-    .sort((a, b) => a.tag.localeCompare(b.tag, locale))
-    .map((info) => ({
-      tag: info.tag,
-      count: info.count,
-      // Tag segment URL-encoded — href sites only; route params stay raw.
-      href: withBase(`${prefix}/docs/tags/${encodeURIComponent(info.tag)}`),
-    }));
-
-  const breadcrumbItems: BreadcrumbItem[] = [
-    { label: "Docs" },
-    { label: pageTitle },
-  ];
-
-  return (
-    <DocLayoutWithDefaults
-      title={composeMetaTitle(pageTitle)}
-      head={<HeadWithDefaults title={pageTitle} />}
-      // Same undefined-≡-absent reliance as TagDetailPageView above.
-      lang={isDefault ? undefined : locale}
-      noindex={settings.noindex}
-      hideSidebar={true}
-      hideToc={true}
-      // Empty fragment suppresses DocLayoutWithDefaults' empty-data default
-      // Sidebar island — its marker never hydrates for published-package
-      // consumers (zfb#999) and zfb >= next.38 warns about it; the sidebar is
-      // hidden on this page anyway (zudolab/zudo-doc#2057).
-      sidebarOverride={<></>}
-      headerOverride={<HeaderWithDefaults lang={locale} currentPath={withBase(`${prefix}/docs/tags`)} />}
-      breadcrumbOverride={<Breadcrumb items={breadcrumbItems} />}
-      footerOverride={<FooterWithDefaults lang={locale} />}
-      bodyEndComponents={<BodyEndIslands basePath={settings.base ?? "/"} />}
-      enableClientRouter={settings.dynamicPageTransition}
-    >
-      <h1 class="text-heading font-bold mb-vsp-lg">{pageTitle}</h1>
-      {!settings.docTags || tags.length === 0 ? (
-        <p class="text-muted">{t("doc.noTags", locale)}</p>
-      ) : (
-        <TagNav variant="all" tags={tags} labels={labels} />
-      )}
-      <DocHistoryArea slug="tags" locale={locale} />
-    </DocLayoutWithDefaults>
-  );
-}
+import { stableDocs } from "./_nav-source-cache";
+
+export type { TagInfo };
+
+const { collectTagMapForLocale, TagDetailPageView, TagsIndexPageView } = createTagPages({
+  settings,
+  defaultLocale,
+  t,
+  withBase,
+  docsUrl,
+  composeMetaTitle,
+  collectTags: collectTags as (
+    entries: import("@takazudo/zudo-doc/tag-pages").TagPagesDocsEntry[],
+    slugFn: (id: string, data: { slug?: string }) => string,
+  ) => Map<string, TagInfo>,
+  stableDocs: stableDocs as (collectionName: string) => import("@takazudo/zudo-doc/tag-pages").TagPagesDocsEntry[],
+  isDefaultLocaleOnlyPath,
+  components: {
+    HeadWithDefaults,
+    HeaderWithDefaults,
+    FooterWithDefaults,
+    BodyEndIslands,
+    DocHistoryArea,
+  },
+});
+
+export { collectTagMapForLocale, TagDetailPageView, TagsIndexPageView };

package/templates/features/imageEnlarge/files/src/components/image-enlarge.tsx

@@ -1,272 +1,11 @@
 "use client";
 
-import { useState, useEffect, useRef } from "preact/compat";
-import type { JSX } from "preact";
-
-interface ImageData {
-  src: string;
-  currentSrc: string;
-  srcset?: string;
-  sizes?: string;
-  alt: string;
-  naturalWidth: number;
-  naturalHeight: number;
-}
-
-// Shared shell for the enlarge `<dialog>`. The hydrated component and the
-// SSR fallback (below) render into the same Island container, so they MUST
-// agree on class string and inline style — otherwise the dist HTML and the
-// post-hydration DOM disagree on size / position and the first interaction
-// flashes. Sourcing both from the same constants closes the drift gap.
+// Re-export shim for the ImageEnlarge island.
 //
-// z-modal / backdrop:z-modal-backdrop are defense-in-depth for the SPA-swap
-// window: if this dialog is still open while the page body is swapped, a native
-// showModal() dialog can lose top-layer promotion and fall back to z-index:auto,
-// flashing behind the header/sidebar. `backdrop:z-modal-backdrop` targets the
-// native `::backdrop` (present for every showModal() dialog even with no backdrop
-// tint). The explicit modal-tier z-index keeps it above all chrome during that
-// window. Intentionally redundant in the normal (top-layer) case — do not remove
-// as "redundant".
-const DIALOG_CLASS =
-  "zd-enlarge-dialog z-modal mx-auto max-h-[90vh] max-w-[90vw] overflow-hidden border border-muted bg-surface p-0 backdrop:z-modal-backdrop";
-// Center the modal with `inset: 0; margin: auto` rather than a transform.
-// A `transform` on the dialog would establish a containing block for its
-// `position: fixed` descendants, which would trap the `.zd-enlarge-dialog-close`
-// button at the dialog's corner instead of the viewport's — see the close
-// button's fixed positioning in global.css. Auto-margin centering keeps the
-// dialog transform-free so the close button anchors to the page top-right.
-const DIALOG_STYLE = {
-  position: "fixed",
-  inset: "0",
-  margin: "auto",
-} as const;
-
-export default function ImageEnlarge() {
-  const [imgData, setImgData] = useState<ImageData | null>(null);
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  // Eligibility detection: toggle .zd-enlarge-btn[hidden] per image
-  useEffect(() => {
-    // Single shared ResizeObserver watching all observed images.
-    // One observer for N images is more efficient than N observers.
-    // The callback iterates entries so each image's eligibility is
-    // re-evaluated independently when its size changes.
-    const observedImages = new Set<HTMLImageElement>();
-    const sharedResizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        evaluateEligibility(entry.target as HTMLImageElement);
-      }
-    });
-    let mutationObserver: MutationObserver | null = null;
-    let resizeTimer = 0;
-
-    function evaluateEligibility(img: HTMLImageElement) {
-      const container = img.closest(".zd-enlargeable");
-      if (!container) return;
-      const btn = container.querySelector(".zd-enlarge-btn") as HTMLElement | null;
-      if (!btn) return;
-      const eligible = img.naturalWidth > img.clientWidth * window.devicePixelRatio;
-      if (eligible) {
-        btn.removeAttribute("hidden");
-      } else {
-        btn.setAttribute("hidden", "");
-      }
-    }
-
-    function observeImage(img: HTMLImageElement) {
-      if (observedImages.has(img)) return;
-      observedImages.add(img);
-      sharedResizeObserver.observe(img);
-      if (img.complete) {
-        evaluateEligibility(img);
-      } else {
-        img.addEventListener("load", () => evaluateEligibility(img), { once: true });
-      }
-    }
-
-    function scanContent() {
-      const scope = document.querySelector("main .zd-content");
-      if (!scope) return;
-      scope.querySelectorAll<HTMLImageElement>(".zd-enlargeable img").forEach(observeImage);
-    }
-
-    function startObserving() {
-      const scope = document.querySelector("main .zd-content");
-      if (scope) {
-        mutationObserver = new MutationObserver((mutations) => {
-          for (const mutation of mutations) {
-            for (const node of mutation.addedNodes) {
-              if (!(node instanceof Element)) continue;
-              if (node.matches(".zd-enlargeable")) {
-                node.querySelectorAll<HTMLImageElement>("img").forEach(observeImage);
-              }
-              node.querySelectorAll<HTMLImageElement>(".zd-enlargeable img").forEach(observeImage);
-            }
-          }
-        });
-        mutationObserver.observe(scope, { childList: true, subtree: true });
-      }
-      scanContent();
-    }
-
-    function handleWindowResize() {
-      clearTimeout(resizeTimer);
-      resizeTimer = window.setTimeout(() => {
-        observedImages.forEach((img) => evaluateEligibility(img));
-      }, 150);
-    }
-
-    function handleAfterSwap() {
-      sharedResizeObserver.disconnect();
-      observedImages.clear();
-      mutationObserver?.disconnect();
-      mutationObserver = null;
-      startObserving();
-    }
-
-    startObserving();
-    window.addEventListener("resize", handleWindowResize);
-    document.addEventListener("DOMContentLoaded", handleAfterSwap);
-
-    return () => {
-      sharedResizeObserver.disconnect();
-      observedImages.clear();
-      mutationObserver?.disconnect();
-      window.removeEventListener("resize", handleWindowResize);
-      document.removeEventListener("DOMContentLoaded", handleAfterSwap);
-      clearTimeout(resizeTimer);
-    };
-  }, []);
-
-  useEffect(() => {
-    function handleDocumentClick(e: MouseEvent) {
-      const target = e.target as Element;
-      const container = target.closest(".zd-enlargeable");
-      if (!container) return;
-      const btn = container.querySelector(".zd-enlarge-btn") as HTMLElement | null;
-      // Eligibility gate: only open when the expand button is visible (image is large enough).
-      if (!btn || btn.hasAttribute("hidden")) return;
-      const img = container.querySelector("img") as HTMLImageElement | null;
-      if (!img) return;
-      setImgData({
-        src: img.src,
-        currentSrc: img.currentSrc,
-        srcset: img.srcset || undefined,
-        sizes: img.sizes || undefined,
-        alt: img.alt,
-        naturalWidth: img.naturalWidth,
-        naturalHeight: img.naturalHeight,
-      });
-    }
-    document.addEventListener("click", handleDocumentClick);
-    return () => document.removeEventListener("click", handleDocumentClick);
-  }, []);
-
-  // Open dialog when imgData is set
-  useEffect(() => {
-    if (!imgData) return;
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    dialog.showModal();
-  }, [imgData]);
-
-  // Handle cancel event (ESC key)
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    function handleCancel() {
-      setImgData(null);
-    }
-    dialog.addEventListener("cancel", handleCancel);
-    return () => dialog.removeEventListener("cancel", handleCancel);
-  }, []);
-
-  // Reset state when dialog closes
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    function handleClose() {
-      setImgData(null);
-    }
-    dialog.addEventListener("close", handleClose);
-    return () => dialog.removeEventListener("close", handleClose);
-  }, []);
-
-  // Close and reset on ClientRouter navigation
-  useEffect(() => {
-    function handleAfterSwap() {
-      const dialog = dialogRef.current;
-      if (dialog?.open) dialog.close();
-      setImgData(null);
-    }
-    document.addEventListener("DOMContentLoaded", handleAfterSwap);
-    return () => document.removeEventListener("DOMContentLoaded", handleAfterSwap);
-  }, []);
-
-  function handleBackdropClick(e: JSX.TargetedMouseEvent<HTMLDialogElement>) {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const rect = dialog.getBoundingClientRect();
-    if (
-      e.clientX < rect.left ||
-      e.clientX > rect.right ||
-      e.clientY < rect.top ||
-      e.clientY > rect.bottom
-    ) {
-      dialog.close();
-    }
-  }
-
-  return (
-    <dialog
-      ref={dialogRef}
-      onClick={handleBackdropClick}
-      className={DIALOG_CLASS}
-      style={DIALOG_STYLE}
-    >
-      {imgData && (
-        <>
-          <div className="relative">
-            <img
-              src={imgData.currentSrc || imgData.src}
-              srcSet={imgData.srcset}
-              sizes={imgData.srcset ? "100vw" : undefined}
-              alt={imgData.alt}
-              className="block max-h-[85vh] max-w-[85vw] object-contain"
-            />
-          </div>
-          <button
-            type="button"
-            onClick={() => dialogRef.current?.close()}
-            className="zd-enlarge-dialog-close"
-            aria-label="Close enlarged image"
-          >
-            <svg viewBox="0 0 161.03 161.03" fill="currentColor" aria-hidden="true" focusable="false">
-              <polygon points="161.03 10.27 150.76 0 80.51 70.24 10.27 0 0 10.27 70.24 80.51 0 150.76 10.27 161.03 80.51 90.78 150.76 161.03 161.03 150.76 90.78 80.51 161.03 10.27" />
-            </svg>
-          </button>
-        </>
-      )}
-    </dialog>
-  );
-}
-
-/**
- * Static SSR fallback for the {@link ImageEnlarge} island.
- *
- * Renders an empty, closed `<dialog class="zd-enlarge-dialog ...">` so the
- * dist HTML carries the dialog shell even before hydration. A `<dialog>`
- * without `open` is `display:none` per UA stylesheet, so screen readers
- * and crawlers see the same shape they would post-hydration. Sources its
- * class and inline style from the shared `DIALOG_CLASS` / `DIALOG_STYLE`
- * constants above so the SSR shell cannot drift from the hydrated
- * dialog (a drift would surface as a cosmetic flash on first interaction).
- */
-export function ImageEnlargeSsrFallback() {
-  return (
-    <dialog
-      className={DIALOG_CLASS}
-      style={DIALOG_STYLE}
-    />
-  );
-}
+// The real component and its SSR fallback now ship in the package at
+// @takazudo/zudo-doc/image-enlarge (epic #2344, S3).
+// pages/lib/_body-end-islands.tsx imports them directly from there; this
+// overlay overwrites the base W6A no-op stub so that any project-local
+// code referencing the @/components/image-enlarge path resolves to the
+// real island when the imageEnlarge feature is enabled.
+export { ImageEnlarge, ImageEnlargeSsrFallback } from "@takazudo/zudo-doc/image-enlarge";

package/templates/features/sidebarToggle/files/src/components/desktop-sidebar-toggle.tsx

@@ -1,99 +1,6 @@
-"use client";
-
-import { useState, useEffect, useRef } from 'preact/hooks';
-
-export const SIDEBAR_STORAGE_KEY = 'zudo-doc-sidebar-visible';
-
-function readState(): boolean {
-  if (typeof window === 'undefined') return true;
-  try {
-    return localStorage.getItem(SIDEBAR_STORAGE_KEY) !== 'false';
-  } catch {
-    return true;
-  }
-}
-
-function setDataAttribute(isVisible: boolean) {
-  if (isVisible) {
-    document.documentElement.removeAttribute('data-sidebar-hidden');
-  } else {
-    document.documentElement.setAttribute('data-sidebar-hidden', '');
-  }
-}
-
-export default function DesktopSidebarToggle() {
-  // Initial state must match server render (always `true`) to avoid a
-  // hydration mismatch when the persisted preference is "hidden". The
-  // doc-layout's pre-paint inline script applies `data-sidebar-hidden`
-  // to <html> from localStorage *before* this island mounts, so the
-  // visual state stays correct; we only need to sync this island's
-  // React state to the persisted preference after hydration.
-  const [visible, setVisible] = useState<boolean>(true);
-  // Tracks whether the hydration sync (below) has run. The persistence
-  // effect below skips the very first mount so we don't overwrite the
-  // user's persisted "hidden" preference with the SSR-safe default
-  // `true` before the hydration sync gets a chance to fire.
-  const hydrated = useRef(false);
-
-  // Persist state changes to localStorage and the <html> data-attribute.
-  // The `hydrated.current` guard is the real protection: it is still
-  // `false` on the very first effect run (the hydration-sync effect
-  // below sets it to `true` only after this one fires, since effects
-  // run in declaration order on mount), so the first run bails out
-  // and we don't clobber the user's persisted "hidden" preference
-  // with the SSR-safe default `true`.
-  useEffect(() => {
-    if (!hydrated.current) return;
-    setDataAttribute(visible);
-    try {
-      localStorage.setItem(SIDEBAR_STORAGE_KEY, String(visible));
-    } catch {
-      // ignore storage errors
-    }
-  }, [visible]);
-
-  // After mount, read the persisted preference and reconcile state
-  // with the SSR default. Sets the ref so subsequent runs of the
-  // persistence effect above start syncing normally.
-  useEffect(() => {
-    hydrated.current = true;
-    const actual = readState();
-    if (actual !== visible) {
-      setVisible(actual);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // The SPA-navigation flash (a collapsed sidebar briefly painting open on
-  // every soft swap) is handled upstream: doc-layout mounts
-  // <ClientRouter preserveHtmlAttrs={["data-sidebar-hidden", ...]} /> so
-  // zfb-runtime (>= 0.1.0-next.52) re-applies the runtime attribute across the
-  // swap before paint. No host-side capture/restore guard is needed.
-
-  return (
-    <button
-      type="button"
-      onClick={() => setVisible((v) => !v)}
-      className="zd-desktop-sidebar-toggle hidden lg:flex fixed bottom-vsp-xl z-sidebar items-center justify-center w-[1.5rem] h-[3rem] bg-surface border border-muted border-l-0 rounded-r-DEFAULT text-muted cursor-pointer transition-[left,color] duration-200 ease-in-out hover:text-fg"
-      aria-label={visible ? 'Hide sidebar' : 'Show sidebar'}
-      aria-pressed={visible}
-      data-zfb-transition-persist="desktop-sidebar-toggle"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-icon-sm w-icon-sm"
-        aria-hidden="true"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        strokeWidth={2}
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d={visible ? 'M15 19l-7-7 7-7' : 'M9 5l7 7-7 7'}
-        />
-      </svg>
-    </button>
-  );
-}
+// Thin re-export shim. DesktopSidebarToggle moved into the package
+// (`@takazudo/zudo-doc/desktop-sidebar-toggle-island`) as part of the
+// package-first migration (#2344, S2). Host code using
+// `@/components/desktop-sidebar-toggle` still resolves correctly;
+// the implementation lives in the package.
+export { DesktopSidebarToggle, SIDEBAR_STORAGE_KEY } from "@takazudo/zudo-doc/desktop-sidebar-toggle-island";