@takazudo/zudo-doc 0.2.21 → 1.0.0

package/dist/doc-history/index.js

@@ -0,0 +1,407 @@
+"use client";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef } from "preact/compat";
+import { SmartBreak } from "../smart-break/index.js";
+import { History, Close, ArrowLeft } from "../icons/index.js";
+import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
+import { useModalDialog } from "../use-modal-dialog/index.js";
+function Spinner() {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-vsp-xl", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-block box-border rounded-full animate-spin",
+      style: {
+        width: 48,
+        height: 48,
+        border: "5px solid var(--color-fg, #fff)",
+        borderBottomColor: "transparent"
+      }
+    }
+  ) });
+}
+function buildSideBySideRows(changes) {
+  const rows = [];
+  let leftNum = 0;
+  let rightNum = 0;
+  let i = 0;
+  while (i < changes.length) {
+    const change = changes[i];
+    if (!change) {
+      i++;
+      continue;
+    }
+    if (!change.added && !change.removed) {
+      const lines = change.value.replace(/\n$/, "").split("\n");
+      for (const line of lines) {
+        leftNum++;
+        rightNum++;
+        rows.push({ leftLine: line, rightLine: line, leftNum, rightNum, type: "context" });
+      }
+      i++;
+    } else if (change.removed && i + 1 < changes.length) {
+      const nextChange = changes[i + 1];
+      if (nextChange?.added) {
+        const removedLines = change.value.replace(/\n$/, "").split("\n");
+        const addedLines = nextChange.value.replace(/\n$/, "").split("\n");
+        const maxLen = Math.max(removedLines.length, addedLines.length);
+        for (let j = 0; j < maxLen; j++) {
+          const left = j < removedLines.length ? removedLines[j] ?? null : null;
+          const right = j < addedLines.length ? addedLines[j] ?? null : null;
+          if (left !== null) leftNum++;
+          if (right !== null) rightNum++;
+          rows.push({
+            leftLine: left,
+            rightLine: right,
+            leftNum: left !== null ? leftNum : null,
+            rightNum: right !== null ? rightNum : null,
+            type: "changed"
+          });
+        }
+        i += 2;
+      } else {
+        const lines = change.value.replace(/\n$/, "").split("\n");
+        for (const line of lines) {
+          leftNum++;
+          rows.push({ leftLine: line, rightLine: null, leftNum, rightNum: null, type: "removed" });
+        }
+        i++;
+      }
+    } else if (change.removed) {
+      const lines = change.value.replace(/\n$/, "").split("\n");
+      for (const line of lines) {
+        leftNum++;
+        rows.push({ leftLine: line, rightLine: null, leftNum, rightNum: null, type: "removed" });
+      }
+      i++;
+    } else {
+      const lines = change.value.replace(/\n$/, "").split("\n");
+      for (const line of lines) {
+        rightNum++;
+        rows.push({ leftLine: null, rightLine: line, leftNum: null, rightNum, type: "added" });
+      }
+      i++;
+    }
+  }
+  return rows;
+}
+const DIFF_CACHE_LIMIT = 32;
+const diffCache = /* @__PURE__ */ new Map();
+async function getCachedDiff(olderHash, newerHash, olderContent, newerContent) {
+  const key = `${olderHash}::${newerHash}`;
+  const hit = diffCache.get(key);
+  if (hit) {
+    diffCache.delete(key);
+    diffCache.set(key, hit);
+    return hit;
+  }
+  const { diffLines } = await import("diff");
+  const changes = diffLines(olderContent, newerContent);
+  diffCache.set(key, changes);
+  if (diffCache.size > DIFF_CACHE_LIMIT) {
+    const oldest = diffCache.keys().next().value;
+    if (oldest !== void 0) diffCache.delete(oldest);
+  }
+  return changes;
+}
+function DiffViewer({
+  selection,
+  onBack,
+  showBackButton
+}) {
+  const [changes, setChanges] = useState(null);
+  const [diffError, setDiffError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setDiffError(null);
+    getCachedDiff(
+      selection.older.hash,
+      selection.newer.hash,
+      selection.older.content,
+      selection.newer.content
+    ).then((result) => {
+      if (!cancelled) setChanges(result);
+    }).catch((e) => {
+      if (!cancelled) {
+        setDiffError(e instanceof Error ? e.message : "Failed to compute diff");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selection.older.hash, selection.newer.hash]);
+  const rows = useMemo(
+    () => changes ? buildSideBySideRows(changes) : [],
+    [changes]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-hsp-sm px-hsp-lg py-vsp-xs border-b border-muted", children: [
+      showBackButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "text-muted hover:text-fg lg:hidden",
+          "aria-label": "Back to revisions",
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-icon-sm w-icon-sm" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1/2 text-small text-muted font-mono truncate pr-hsp-sm", children: selection.older.hash.slice(0, 7) }),
+        /* @__PURE__ */ jsx("div", { className: "w-1/2 text-small text-muted font-mono truncate pl-hsp-sm", children: selection.newer.hash.slice(0, 7) })
+      ] })
+    ] }),
+    diffError && /* @__PURE__ */ jsx("div", { className: "px-hsp-lg py-vsp-lg text-danger text-small", children: diffError }),
+    !changes && !diffError && /* @__PURE__ */ jsx(Spinner, {}),
+    /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-auto${!changes ? " hidden" : ""}`, children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", style: { tableLayout: "fixed" }, children: [
+      /* @__PURE__ */ jsxs("colgroup", { children: [
+        /* @__PURE__ */ jsx("col", { style: { width: "2.5rem" } }),
+        /* @__PURE__ */ jsx("col", {}),
+        /* @__PURE__ */ jsx("col", { style: { width: "2.5rem" } }),
+        /* @__PURE__ */ jsx("col", {})
+      ] }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, idx) => {
+        const leftBg = row.type === "removed" || row.type === "changed" ? "diff-line-removed" : "";
+        const rightBg = row.type === "added" || row.type === "changed" ? "diff-line-added" : "";
+        const leftEmpty = row.leftLine === null;
+        const rightEmpty = row.rightLine === null;
+        return /* @__PURE__ */ jsxs("tr", { className: "diff-row", children: [
+          /* @__PURE__ */ jsx("td", { className: `diff-line-num ${leftBg}`, children: row.leftNum ?? "" }),
+          /* @__PURE__ */ jsx("td", { className: `diff-line-content ${leftBg}${leftEmpty ? " diff-line-empty" : ""}`, children: row.leftLine ?? "" }),
+          /* @__PURE__ */ jsx("td", { className: `diff-line-num ${rightBg}`, children: row.rightNum ?? "" }),
+          /* @__PURE__ */ jsx("td", { className: `diff-line-content ${rightBg}${rightEmpty ? " diff-line-empty" : ""}`, children: row.rightLine ?? "" })
+        ] }, idx);
+      }) })
+    ] }) })
+  ] });
+}
+function RevisionList({
+  entries,
+  onSelectDiff
+}) {
+  const [selectedA, setSelectedA] = useState(1);
+  const [selectedB, setSelectedB] = useState(0);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-hsp-lg py-vsp-lg text-muted text-small", children: "No revision history available." });
+  }
+  const canCompare = selectedA !== selectedB && selectedA >= 0 && selectedB >= 0 && selectedA < entries.length && selectedB < entries.length;
+  function handleCompare() {
+    if (!canCompare) return;
+    const idxOlder = Math.max(selectedA, selectedB);
+    const idxNewer = Math.min(selectedA, selectedB);
+    const olderEntry = entries[idxOlder];
+    const newerEntry = entries[idxNewer];
+    if (!olderEntry || !newerEntry) return;
+    onSelectDiff({
+      older: olderEntry,
+      newer: newerEntry
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    entries.length >= 2 && /* @__PURE__ */ jsxs("div", { className: "px-hsp-lg py-vsp-xs border-b border-muted flex items-center gap-hsp-sm", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: !canCompare,
+          onClick: handleCompare,
+          className: canCompare ? "px-hsp-md py-vsp-2xs text-small rounded bg-accent text-bg hover:bg-accent-hover" : "px-hsp-md py-vsp-2xs text-small rounded bg-surface text-muted cursor-not-allowed",
+          children: "Compare"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted", children: "Select two revisions (A / B)" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: entries.map((entry, idx) => {
+      const isA = selectedA === idx;
+      const isB = selectedB === idx;
+      const dateStr = formatDate(entry.date);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: isA || isB ? "px-hsp-lg py-vsp-xs border-b border-muted bg-surface" : "px-hsp-lg py-vsp-xs border-b border-muted hover:bg-surface",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-hsp-sm", children: [
+            entries.length >= 2 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-vsp-2xs pt-[2px] shrink-0", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedA(idx),
+                  className: isA ? "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center bg-accent text-bg" : "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center border border-muted text-muted hover:border-fg hover:text-fg",
+                  "aria-label": `Select revision ${entry.hash.slice(0, 7)} as A`,
+                  children: "A"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedB(idx),
+                  className: isB ? "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center bg-accent text-bg" : "w-[1.5rem] h-[1.25rem] text-caption rounded flex items-center justify-center border border-muted text-muted hover:border-fg hover:text-fg",
+                  "aria-label": `Select revision ${entry.hash.slice(0, 7)} as B`,
+                  children: "B"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-hsp-sm", children: [
+                /* @__PURE__ */ jsx("code", { className: "text-caption text-accent font-mono", children: entry.hash.slice(0, 7) }),
+                /* @__PURE__ */ jsx("span", { className: "text-caption text-muted", children: dateStr })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-small text-fg mt-vsp-2xs truncate", children: /* @__PURE__ */ jsx(SmartBreak, { children: entry.message }) }),
+              /* @__PURE__ */ jsx("div", { className: "text-caption text-muted", children: entry.author })
+            ] })
+          ] })
+        },
+        entry.hash
+      );
+    }) })
+  ] });
+}
+function formatDate(dateStr) {
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return dateStr;
+  return d.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function DocHistory({ slug, locale, basePath = "/" }) {
+  const [view, setView] = useState("closed");
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [diffSelection, setDiffSelection] = useState(
+    null
+  );
+  const returnFocusRef = useRef(null);
+  const base = basePath.replace(/\/+$/, "");
+  const historySlug = slug === "" ? "index" : slug;
+  const fetchPath = locale ? `${base}/doc-history/${locale}/${historySlug}.json` : `${base}/doc-history/${historySlug}.json`;
+  const fetchHistory = useCallback(async () => {
+    if (data) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(fetchPath);
+      if (!res.ok) {
+        throw new Error(`Failed to load history (${res.status})`);
+      }
+      const json = await res.json();
+      if (!json || !Array.isArray(json.entries)) {
+        throw new Error("Malformed history response");
+      }
+      setData(json);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load history");
+    } finally {
+      setLoading(false);
+    }
+  }, [data, fetchPath]);
+  function handleOpen(e) {
+    returnFocusRef.current = e.currentTarget;
+    setView("revisions");
+    fetchHistory();
+  }
+  const handleClose = useCallback(() => {
+    setView("closed");
+    setDiffSelection(null);
+  }, []);
+  function handleSelectDiff(selection) {
+    setDiffSelection(selection);
+    setView("diff");
+  }
+  function handleBackToRevisions() {
+    setDiffSelection(null);
+    setView("revisions");
+  }
+  useEffect(() => {
+    if (view !== "closed") {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [view]);
+  const isOpen = view !== "closed";
+  const hasDiff = view === "diff" && diffSelection;
+  const { dialogRef } = useModalDialog({
+    isOpen,
+    onClose: handleClose,
+    navigateEvent: AFTER_NAVIGATE_EVENT,
+    manageFocus: true,
+    returnFocusRef
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-vsp-xl", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpen,
+        className: "doc-history-trigger flex items-center gap-hsp-xs px-hsp-md py-vsp-xs rounded-lg bg-surface border border-muted text-muted hover:text-fg hover:border-fg transition-colors",
+        "aria-label": "View document history",
+        children: [
+          /* @__PURE__ */ jsx(History, { className: "h-icon-md w-icon-md" }),
+          /* @__PURE__ */ jsx("span", { className: "text-small", children: "History" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        ref: dialogRef,
+        "aria-label": "Document revision history",
+        className: "doc-history-panel z-modal fixed inset-0 m-0 h-full w-full max-h-full max-w-full bg-bg border-none p-0 backdrop:z-modal-backdrop backdrop:bg-bg/30",
+        style: { color: "var(--color-fg)" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-hsp-lg py-vsp-xs border-b border-muted", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-body font-semibold text-fg", children: view === "diff" ? "Diff" : "Revision History" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClose,
+                className: "text-muted hover:text-fg",
+                "aria-label": "Close history panel",
+                children: /* @__PURE__ */ jsx(Close, { className: "h-icon-md w-icon-md" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "h-[calc(100%-3rem)] overflow-hidden", children: [
+            loading && /* @__PURE__ */ jsx(Spinner, {}),
+            error && /* @__PURE__ */ jsx("div", { className: "px-hsp-lg py-vsp-lg text-danger text-small", children: error }),
+            !loading && !error && data && /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: hasDiff ? "hidden lg:flex lg:flex-col lg:w-[clamp(16rem,25%,22rem)] shrink-0 border-r border-muted h-full" : "flex flex-col w-full h-full",
+                  children: /* @__PURE__ */ jsx(
+                    RevisionList,
+                    {
+                      entries: data.entries,
+                      onSelectDiff: handleSelectDiff
+                    }
+                  )
+                }
+              ),
+              hasDiff && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 h-full", children: /* @__PURE__ */ jsx(
+                DiffViewer,
+                {
+                  selection: diffSelection,
+                  onBack: handleBackToRevisions,
+                  showBackButton: true
+                },
+                `${diffSelection.older.hash}:${diffSelection.newer.hash}`
+              ) })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+DocHistory.displayName = "DocHistory";
+export {
+  DocHistory
+};

package/dist/doc-history-area/index.d.ts

@@ -0,0 +1,84 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { VNode } from "preact";
+/** Per-entry metadata shape from the doc-history manifest. */
+export interface DocHistoryMetaEntry {
+    author: string;
+    createdDate: string;
+    updatedDate: string;
+    /** Source file extension (".mdx" | ".md") — optional in older manifests. */
+    ext?: string;
+}
+/** Settings subset read by the DocHistoryArea factory. */
+export interface DocHistoryAreaSettings {
+    docHistory: boolean;
+    bodyFootUtilArea: {
+        viewSourceLink?: boolean;
+    } | false | undefined;
+    base?: string | null;
+}
+/**
+ * DocHistory component constructor type.
+ * Must match the interface of `@takazudo/zudo-doc/doc-history`'s DocHistory.
+ */
+export type DocHistoryComponent = (props: {
+    slug: string;
+    locale?: string;
+    basePath?: string;
+}) => VNode;
+/** Dependencies injected by the host stub. */
+export interface DocHistoryAreaDeps {
+    settings: DocHistoryAreaSettings;
+    /** Default locale code (e.g. "en"). */
+    defaultLocale: string;
+    /** The parsed `#doc-history-meta` JSON manifest (host-side import). */
+    docHistoryMeta: Record<string, DocHistoryMetaEntry>;
+    /** Translate a UI string key for a locale. */
+    t: (key: string, locale: string) => string;
+    /** Convert a canonical route slug to a history slug (sentinel: "" → "index"). */
+    toHistorySlug: (slug: string) => string;
+    /**
+     * Build a view-source GitHub URL, or null when githubUrl is not set.
+     * Host passes a partially applied version binding `settings.githubUrl`.
+     */
+    buildGitHubSourceUrl: (contentDir: string, entryId: string) => string | null;
+    /**
+     * The DocHistory island component (host-side — must be imported in the stub so
+     * zfb's scanner walks page → stub → DocHistory).
+     */
+    DocHistory: DocHistoryComponent;
+}
+export interface DocHistoryAreaProps {
+    /** Page slug, e.g. "getting-started/intro". */
+    slug: string;
+    /** Active locale string, e.g. "en", "ja". */
+    locale: string;
+    /**
+     * Raw zfb entry slug (relative path without extension), e.g.
+     * "getting-started/intro" or "getting-started/index". Appended with
+     * the source extension from the build-time manifest (".mdx" fallback)
+     * to form the file path passed to buildGitHubSourceUrl.
+     * Omit for auto-index pages (no underlying MDX file) — sourceUrl
+     * will be suppressed automatically.
+     */
+    entrySlug?: string;
+    /**
+     * Content directory for the active locale, e.g. "src/content/docs"
+     * or "src/content/docs-ja". Combined with entrySlug to build the
+     * view-source GitHub URL. Omit to suppress the view-source link.
+     */
+    contentDir?: string;
+    /**
+     * True when this locale page falls back to the base EN collection
+     * (i.e. the slug has no translation for the active locale). When true,
+     * the history data-path derivations use defaultLocale so the island
+     * fetches the correct bare-slug JSON and the SSR manifest lookup hits
+     * the bare key — both of which only exist for EN-origin files.
+     */
+    isFallback?: boolean;
+}
+/**
+ * Create a `DocHistoryArea` component bound to the host's settings and
+ * injected dependencies.
+ */
+export declare function createDocHistoryArea(deps: DocHistoryAreaDeps): (props: DocHistoryAreaProps) => VNode | null;

package/dist/doc-history-area/index.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { Island } from "@takazudo/zfb";
+import { BodyFootUtilArea } from "../body-foot-util/index.js";
+function createDocHistoryArea(deps) {
+  const {
+    settings,
+    defaultLocale,
+    docHistoryMeta,
+    t,
+    toHistorySlug,
+    buildGitHubSourceUrl,
+    DocHistory
+  } = deps;
+  DocHistory.displayName = "DocHistory";
+  function DocHistoryArea({
+    slug,
+    locale,
+    entrySlug,
+    contentDir,
+    isFallback
+  }) {
+    if (!settings.docHistory) return null;
+    const historySlug = toHistorySlug(slug);
+    const effectiveHistoryLocale = isFallback ? defaultLocale : locale;
+    const composedSlug = effectiveHistoryLocale === defaultLocale ? historySlug : `${effectiveHistoryLocale}/${historySlug}`;
+    const meta = docHistoryMeta[composedSlug];
+    const createdLabel = t("doc.created", locale);
+    const updatedLabel = t("doc.updated", locale);
+    const historyLabel = t("doc.history", locale);
+    const docHistoryLocale = effectiveHistoryLocale === defaultLocale ? void 0 : effectiveHistoryLocale;
+    const docHistoryBasePath = settings.base ?? "/";
+    const author = meta?.author;
+    const createdDate = meta?.createdDate;
+    const updatedDate = meta?.updatedDate;
+    const fallback = /* @__PURE__ */ jsxs("div", { class: "sr-only", children: [
+      author && /* @__PURE__ */ jsx("span", { children: author }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        createdLabel,
+        createdDate ? `: ${createdDate}` : ""
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        updatedLabel,
+        updatedDate ? `: ${updatedDate}` : ""
+      ] })
+    ] });
+    const docHistoryIsland = Island({
+      when: "idle",
+      ssrFallback: fallback,
+      children: /* @__PURE__ */ jsx(
+        DocHistory,
+        {
+          slug: historySlug,
+          locale: docHistoryLocale,
+          basePath: docHistoryBasePath
+        }
+      )
+    });
+    const utilSettings = settings.bodyFootUtilArea;
+    const sourceExt = meta?.ext ?? ".mdx";
+    const sourceUrl = utilSettings && utilSettings.viewSourceLink && entrySlug && contentDir ? buildGitHubSourceUrl(contentDir, entrySlug + sourceExt) : null;
+    const viewSourceLabel = t("doc.viewSource", locale);
+    void historyLabel;
+    return /* @__PURE__ */ jsx(
+      BodyFootUtilArea,
+      {
+        docHistoryIsland,
+        sourceUrl,
+        viewSourceLabel
+      }
+    );
+  }
+  return DocHistoryArea;
+}
+export {
+  createDocHistoryArea
+};

package/dist/doc-metainfo-area/index.d.ts

@@ -0,0 +1,46 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+import type { VNode } from "preact";
+/** Per-entry metadata shape from the doc-history manifest. */
+export interface DocHistoryMetaEntry {
+    author: string;
+    createdDate: string;
+    updatedDate: string;
+}
+/** Settings subset read by the DocMetainfoArea factory. */
+export interface DocMetainfoAreaSettings {
+    docMetainfo: boolean;
+}
+/** Dependencies injected by the host stub. */
+export interface DocMetainfoAreaDeps {
+    settings: DocMetainfoAreaSettings;
+    /** Default locale code (e.g. "en"). */
+    defaultLocale: string;
+    /** The parsed `#doc-history-meta` JSON manifest (host-side import). */
+    docHistoryMeta: Record<string, DocHistoryMetaEntry>;
+    /** Translate a UI string key for a locale. */
+    t: (key: string, locale: string) => string;
+    /** Convert a canonical route slug to a history slug (sentinel: "" → "index"). */
+    toHistorySlug: (slug: string) => string;
+}
+export interface DocMetainfoAreaProps {
+    /** Page slug, e.g. "getting-started/intro". */
+    slug: string;
+    /** Active locale string, e.g. "en", "ja". */
+    locale: string;
+    /**
+     * True when this locale page falls back to the base EN collection
+     * (i.e. the slug has no translation for the active locale). When true,
+     * the manifest lookup uses defaultLocale so the visible block resolves
+     * the bare-slug key — the only key that exists for EN-origin files —
+     * matching the dropdown's `effectiveHistoryLocale` derivation in
+     * _doc-history-area.tsx. Display formatting (dates + labels) still uses
+     * the active locale so JA users see JA formatting on fallback pages.
+     */
+    isFallback?: boolean;
+}
+/**
+ * Create a `DocMetainfoArea` component bound to the host's settings and
+ * injected dependencies.
+ */
+export declare function createDocMetainfoArea(deps: DocMetainfoAreaDeps): (props: DocMetainfoAreaProps) => VNode | null;

package/dist/doc-metainfo-area/index.js

@@ -0,0 +1,41 @@
+import { jsx } from "preact/jsx-runtime";
+import { DocMetainfo } from "../metainfo/index.js";
+const LOCALE_TO_BCP47 = {
+  en: "en-US",
+  ja: "ja-JP",
+  de: "de-DE"
+};
+function formatDate(isoDate, locale) {
+  const d = new Date(isoDate);
+  if (isNaN(d.getTime())) return isoDate;
+  return d.toLocaleDateString(LOCALE_TO_BCP47[locale] ?? "en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function createDocMetainfoArea(deps) {
+  const { settings, defaultLocale, docHistoryMeta, t, toHistorySlug } = deps;
+  function DocMetainfoArea({ slug, locale, isFallback }) {
+    if (!settings.docMetainfo) return null;
+    const historySlug = toHistorySlug(slug);
+    const effectiveHistoryLocale = isFallback ? defaultLocale : locale;
+    const composedSlug = effectiveHistoryLocale === defaultLocale ? historySlug : `${effectiveHistoryLocale}/${historySlug}`;
+    const meta = docHistoryMeta[composedSlug];
+    if (!meta) return null;
+    return /* @__PURE__ */ jsx(
+      DocMetainfo,
+      {
+        createdAt: meta.createdDate ? formatDate(meta.createdDate, locale) : null,
+        updatedAt: meta.updatedDate ? formatDate(meta.updatedDate, locale) : null,
+        author: meta.author || null,
+        createdLabel: t("doc.created", locale),
+        updatedLabel: t("doc.updated", locale)
+      }
+    );
+  }
+  return DocMetainfoArea;
+}
+export {
+  createDocMetainfoArea
+};