@takazudo/zudo-doc 1.0.2 → 1.2.0

package/eject/image-enlarge/index.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+// Image-enlarge island — relocated from src/components/image-enlarge.tsx
+// (host showcase) into the package as part of Package-First Wave 3 (S3,
+// epic #2344). Uses shared hook + constants from S1a foundation:
+//   - useModalDialog  from @takazudo/zudo-doc/use-modal-dialog
+//   - IMAGE_ENLARGE_DIALOG_CLASS / ENLARGE_DIALOG_STYLE from @takazudo/zudo-doc/island-types
+//
+// The `/api/ai-chat` endpoint stays host-side (showcase-only).
+// CSS blocks (.zd-enlargeable, .zd-enlarge-btn, .zd-enlarge-dialog*) are
+// shipped in @takazudo/zudo-doc/features.css (moved from src/styles/global.css).
+
+import { useState, useEffect } from "preact/compat";
+import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
+import { useModalDialog } from "../use-modal-dialog/index.js";
+import {
+  IMAGE_ENLARGE_DIALOG_CLASS,
+  ENLARGE_DIALOG_STYLE,
+} from "../island-types/index.js";
+
+interface ImageData {
+  src: string;
+  currentSrc: string;
+  srcset?: string;
+  sizes?: string;
+  alt: string;
+  naturalWidth: number;
+  naturalHeight: number;
+}
+
+export function ImageEnlarge() {
+  const [imgData, setImgData] = useState<ImageData | null>(null);
+
+  // Eligibility detection: toggle .zd-enlarge-btn[hidden] per image
+  useEffect(() => {
+    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;
+    let loadAbortController = new AbortController();
+
+    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, signal: loadAbortController.signal },
+        );
+      }
+    }
+
+    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;
+      loadAbortController.abort();
+      loadAbortController = new AbortController();
+      startObserving();
+    }
+
+    startObserving();
+    window.addEventListener("resize", handleWindowResize);
+    document.addEventListener(AFTER_NAVIGATE_EVENT, handleAfterSwap);
+
+    return () => {
+      sharedResizeObserver.disconnect();
+      observedImages.clear();
+      mutationObserver?.disconnect();
+      loadAbortController.abort();
+      window.removeEventListener("resize", handleWindowResize);
+      document.removeEventListener(AFTER_NAVIGATE_EVENT, handleAfterSwap);
+      clearTimeout(resizeTimer);
+    };
+  }, []);
+
+  useEffect(() => {
+    function handleDocumentClick(e: MouseEvent) {
+      const sel = window.getSelection();
+      if (sel && !sel.isCollapsed) return;
+      const target = e.target as Element;
+      const container = target.closest(".zd-enlargeable");
+      if (!container) return;
+      if (!target.closest(".zd-enlarge-btn") && !target.closest("img")) return;
+      const btn = container.querySelector(".zd-enlarge-btn") as HTMLElement | null;
+      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);
+  }, []);
+
+  const handleClose = () => setImgData(null);
+
+  const { dialogRef, handleBackdropClick } = useModalDialog({
+    isOpen: imgData !== null,
+    onClose: handleClose,
+    navigateEvent: AFTER_NAVIGATE_EVENT,
+    backdropClickClose: true,
+  });
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onClick={handleBackdropClick}
+      className={IMAGE_ENLARGE_DIALOG_CLASS}
+      style={ENLARGE_DIALOG_STYLE}
+    >
+      {imgData && (
+        <>
+          <div className="relative">
+            <img
+              src={imgData.currentSrc || imgData.src}
+              srcSet={imgData.srcset}
+              sizes={imgData.srcset ? "85vw" : 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>
+  );
+}
+ImageEnlarge.displayName = "ImageEnlarge";
+
+/**
+ * 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. Sources its
+ * class and inline style from the shared constants in island-types so the
+ * SSR fallback cannot drift from the hydrated dialog above.
+ */
+export function ImageEnlargeSsrFallback() {
+  return (
+    <dialog
+      className={IMAGE_ENLARGE_DIALOG_CLASS}
+      style={ENLARGE_DIALOG_STYLE}
+    />
+  );
+}

package/eject/sidebar-toggle-island/index.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+// Use preact hook entrypoints directly — the "react" → "preact/compat" alias
+// lets us consume React-typed components in this Preact app.
+import { useState, useEffect } from "preact/hooks";
+// After zudolab/zudo-doc#1335 the host components pull lifecycle event names
+// from the v2 transitions module rather than hard-coding `astro:*` literals.
+import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
+import { SidebarTree } from "../sidebar-tree-island/index.js";
+import type { SidebarNavNode, SidebarRootMenuItem, SidebarLocaleLink } from "../sidebar/types.js";
+
+const cx = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(" ");
+
+// Mobile drawer hosts the SidebarTree directly (rather than receiving it as
+// JSX children) so the tree's data props ride across the SSR → hydrate
+// boundary inside the Island marker's `data-props` attribute. zfb's
+// `Island()` only serialises a child component's *own* props (excluding
+// `children`); when SidebarTree was passed as `children`, its data was
+// dropped during hydration and Preact wiped the SSR-rendered tree DOM.
+// Mirroring the desktop `<Sidebar treeComponent={SidebarTree} ...>` shape
+// keeps the data attached to the wrapping island. zudolab/zudo-doc#1355
+// wave 13.5.
+
+export interface SidebarToggleProps {
+  nodes: SidebarNavNode[];
+  currentSlug?: string;
+  rootMenuItems?: SidebarRootMenuItem[];
+  backToMenuLabel?: string;
+  localeLinks?: SidebarLocaleLink[];
+  themeDefaultMode?: "light" | "dark";
+}
+
+export function SidebarToggle({
+  nodes,
+  currentSlug,
+  rootMenuItems,
+  backToMenuLabel,
+  localeLinks,
+  themeDefaultMode,
+}: SidebarToggleProps) {
+  // Initial state must match SSR (`open=false`) so the hydration DOM
+  // matches the SSG output byte-for-byte. The backdrop and toggle-icon
+  // are rendered unconditionally below so the hydration tree has the
+  // same shape regardless of `open`, preventing Preact from re-mounting
+  // the subtree (which can drop click handlers on the hamburger button).
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  // Close mobile sidebar on View Transition navigation
+  useEffect(() => {
+    function handleSwap() {
+      setOpen(false);
+    }
+    document.addEventListener(AFTER_NAVIGATE_EVENT, handleSwap);
+    return () => document.removeEventListener(AFTER_NAVIGATE_EVENT, handleSwap);
+  }, []);
+
+  return (
+    <>
+      {/* Hamburger button - visible only on mobile.
+          Both icons are always rendered so the SSR output has the same
+          DOM shape as the post-hydration tree. The closed-state icon is
+          hidden via `hidden` when open=true, and vice versa, so Preact's
+          hydration walk sees byte-stable markup and keeps the click
+          handler attached. */}
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="lg:hidden px-hsp-sm py-vsp-xs -ml-hsp-sm mr-hsp-sm text-muted hover:text-fg"
+        aria-label={open ? "Close sidebar" : "Open sidebar"}
+        aria-expanded={open}
+      >
+        {/* X icon — visible only when open */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={cx("h-icon-lg w-icon-lg", !open && "hidden")}
+          aria-hidden="true"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+        {/* Hamburger icon — visible only when closed */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={cx("h-icon-lg w-icon-lg", open && "hidden")}
+          aria-hidden="true"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+
+      {/* Backdrop overlay - mobile only.
+          Rendered unconditionally; CSS `hidden` toggles visibility so
+          the SSR DOM tree matches the hydrated tree (no subtree
+          mount/unmount across the hydration boundary).
+          `z-modal-backdrop` (50) intentionally sits ABOVE the header
+          (`z-toolbar`, 20): the open mobile drawer is a modal surface that
+          dims the whole viewport, header included. Closing is via tapping the
+          backdrop (onClick below), so the header hamburger being dimmed under
+          it is fine. */}
+      <div
+        className={cx("fixed inset-0 z-modal-backdrop bg-overlay/30 lg:hidden", !open && "hidden")}
+        aria-hidden={!open}
+        onClick={() => setOpen(false)}
+      />
+
+      {/* Sidebar panel - mobile only (desktop sidebar is in doc-layout).
+          `inert` when closed: the panel is only visually hidden via
+          `-translate-x-full`, so without `inert` its links/filter/buttons
+          stay in the tab order and accessibility tree while off-screen
+          (zudolab/zudo-doc#2059). `inert={false}` serialises to no attribute,
+          so the SSR (open=false → `inert`) and initial client render stay
+          byte-stable for hydration. */}
+      <aside
+        inert={!open}
+        className={`
+          fixed top-[3.5rem] left-0 z-modal h-[calc(100vh-3.5rem)] w-[16rem] flex flex-col
+          border-r border-muted bg-bg transition-transform duration-200
+          lg:hidden
+          ${open ? "translate-x-0" : "-translate-x-full"}
+        `}
+      >
+        <div className="flex-1 overflow-y-auto">
+          <SidebarTree
+            nodes={nodes}
+            currentSlug={currentSlug}
+            rootMenuItems={rootMenuItems}
+            backToMenuLabel={backToMenuLabel}
+            localeLinks={localeLinks}
+            themeDefaultMode={themeDefaultMode}
+          />
+        </div>
+      </aside>
+    </>
+  );
+}
+SidebarToggle.displayName = "SidebarToggle";