@takazudo/zudo-doc 5.14.0 → 5.16.0

package/dist/html-preview-wrapper/preview-base.d.ts

@@ -6,6 +6,21 @@ export interface CodeBlockData {
     title: string;
     code: string;
 }
+/**
+ * Localized strings rendered by the HTML preview controls.
+ *
+ * Each public layer accepts a partial bag and resolves missing values against
+ * the English defaults before rendering or forwarding the preview.
+ */
+export interface HtmlPreviewLabels {
+    mobile: string;
+    tablet: string;
+    full: string;
+    viewportSize: string;
+    showCode: string;
+    hideCode: string;
+    preview: string;
+}
 export interface PreviewBaseProps {
     title?: string;
     height?: number;
@@ -14,6 +29,11 @@ export interface PreviewBaseProps {
     syncDelay: number;
     codeBlocks: CodeBlockData[];
     defaultOpen?: boolean;
+    labels?: Partial<HtmlPreviewLabels>;
+    showSource?: boolean;
+    showViewportControls?: boolean;
+    /** Internal opt-out for documents whose height derives from the iframe. */
+    autoHeight?: boolean;
 }
 /**
  * Interactive preview base: iframe viewport switcher + collapsible code
@@ -22,4 +42,4 @@ export interface PreviewBaseProps {
  * JSX port of src/components/html-preview/preview-base.tsx with
  * React → Preact hook imports and `className` → `class` attribute.
  */
-export declare function PreviewBase({ title, height, srcdoc, sandbox, syncDelay, codeBlocks, defaultOpen, }: PreviewBaseProps): VNode;
+export declare function PreviewBase({ title, height, srcdoc, sandbox, syncDelay, codeBlocks, defaultOpen, labels, showSource, showViewportControls, autoHeight, }: PreviewBaseProps): VNode;

package/dist/html-preview-wrapper/preview-base.js

@@ -1,11 +1,37 @@
 import { jsx, jsxs } from "preact/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { HighlightedCode } from "./highlighted-code.js";
-const VIEWPORTS = [
-  { label: "Mobile", width: "320px" },
-  { label: "Tablet", width: "768px" },
-  { label: "Full", width: "100%" }
-];
+import {
+  createPreviewAutoHeightController
+} from "./preview-auto-height.js";
+const DEFAULT_LABELS = {
+  mobile: "Mobile",
+  tablet: "Tablet",
+  full: "Full",
+  viewportSize: "Viewport size",
+  showCode: "Show code",
+  hideCode: "Hide code",
+  preview: "Preview"
+};
+function resolveLabels(labels) {
+  return {
+    mobile: labels?.mobile ?? DEFAULT_LABELS.mobile,
+    tablet: labels?.tablet ?? DEFAULT_LABELS.tablet,
+    full: labels?.full ?? DEFAULT_LABELS.full,
+    viewportSize: labels?.viewportSize ?? DEFAULT_LABELS.viewportSize,
+    showCode: labels?.showCode ?? DEFAULT_LABELS.showCode,
+    hideCode: labels?.hideCode ?? DEFAULT_LABELS.hideCode,
+    preview: labels?.preview ?? DEFAULT_LABELS.preview
+  };
+}
+function buildViewports(labels) {
+  return [
+    { label: labels.mobile, width: "320px" },
+    { label: labels.tablet, width: "768px" },
+    { label: labels.full, width: "100%" }
+  ];
+}
+const DEFAULT_VIEWPORTS = buildViewports(DEFAULT_LABELS);
 function PreviewBase({
   title,
   height,
@@ -13,61 +39,84 @@ function PreviewBase({
   sandbox,
   syncDelay,
   codeBlocks,
-  defaultOpen
+  defaultOpen,
+  labels,
+  showSource,
+  showViewportControls,
+  autoHeight
 }) {
+  const resolvedLabels = resolveLabels(labels);
+  const sourceVisible = showSource ?? true;
+  const viewportControlsVisible = showViewportControls ?? true;
+  const viewports = viewportControlsVisible ? buildViewports(resolvedLabels) : DEFAULT_VIEWPORTS;
   const [activeViewport, setActiveViewport] = useState(2);
-  const [codeOpen, setCodeOpen] = useState(defaultOpen ?? false);
+  const [codeOpen, setCodeOpen] = useState(
+    sourceVisible && (defaultOpen ?? false)
+  );
   const [iframeHeight, setIframeHeight] = useState(height ?? 200);
   const iframeRef = useRef(null);
-  const syncHeight = useCallback(() => {
+  const iframeHeightRef = useRef(iframeHeight);
+  const autoHeightControllerRef = useRef(
+    null
+  );
+  iframeHeightRef.current = iframeHeight;
+  const autoHeightEnabled = (autoHeight ?? true) && height == null;
+  useEffect(() => {
     const iframe = iframeRef.current;
-    if (!iframe || height != null) return;
+    if (!iframe || !autoHeightEnabled) return;
+    const controller = createPreviewAutoHeightController({
+      iframe,
+      syncDelay,
+      getCurrentHeight: () => iframeHeightRef.current,
+      setHeight: (nextHeight) => {
+        iframeHeightRef.current = nextHeight;
+        setIframeHeight(nextHeight);
+      }
+    });
+    autoHeightControllerRef.current = controller;
+    const onLoad = () => controller.handleLoad();
+    iframe.addEventListener("load", onLoad);
     try {
-      const doc = iframe.contentDocument;
-      if (doc?.body) {
-        const h = doc.body.scrollHeight;
-        if (h > 0) setIframeHeight(Math.max(h + 16, 200));
+      if (iframe.contentDocument?.readyState === "complete") {
+        controller.handleLoad();
       }
     } catch {
     }
-  }, [height]);
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-    let timeoutId;
-    const onLoad = () => {
-      if (syncDelay > 0) {
-        timeoutId = setTimeout(syncHeight, syncDelay);
-      } else {
-        syncHeight();
-      }
-    };
-    iframe.addEventListener("load", onLoad);
     return () => {
       iframe.removeEventListener("load", onLoad);
-      clearTimeout(timeoutId);
+      controller.destroy();
+      if (autoHeightControllerRef.current === controller) {
+        autoHeightControllerRef.current = null;
+      }
     };
-  }, [syncHeight, srcdoc, syncDelay]);
+  }, [autoHeightEnabled, srcdoc, syncDelay]);
   useEffect(() => {
-    if (height != null) return;
-    const id = setTimeout(syncHeight, 150);
-    return () => clearTimeout(id);
-  }, [activeViewport, syncHeight, height]);
-  const containerWidth = VIEWPORTS[activeViewport]?.width ?? "100%";
+    if (!autoHeightEnabled) return;
+    autoHeightControllerRef.current?.schedule();
+  }, [activeViewport, autoHeightEnabled]);
+  const containerWidth = viewportControlsVisible ? viewports[activeViewport]?.width ?? "100%" : "100%";
   return /* @__PURE__ */ jsxs("div", { class: "border border-muted rounded-lg overflow-hidden my-vsp-md", children: [
-    /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between px-hsp-md py-hsp-sm bg-surface border-b border-muted gap-hsp-sm flex-wrap", children: [
+    (viewportControlsVisible || title) && /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between px-hsp-md py-hsp-sm bg-surface border-b border-muted gap-hsp-sm flex-wrap", children: [
       title && /* @__PURE__ */ jsx("span", { class: "text-caption font-semibold text-fg", children: title }),
-      /* @__PURE__ */ jsx("div", { class: "flex gap-hsp-2xs", role: "group", "aria-label": "Viewport size", children: VIEWPORTS.map((vp, i) => /* @__PURE__ */ jsx(
-        "button",
+      viewportControlsVisible && /* @__PURE__ */ jsx(
+        "div",
         {
-          type: "button",
-          class: `px-hsp-sm py-hsp-2xs text-caption border rounded-full cursor-pointer transition-[background,color,border-color] duration-150 leading-snug ${i === activeViewport ? "bg-accent text-bg border-accent hover:bg-accent-hover hover:border-accent-hover" : "bg-transparent text-muted border-muted hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]"}`,
-          "aria-pressed": i === activeViewport,
-          onClick: () => setActiveViewport(i),
-          children: vp.label
-        },
-        vp.label
-      )) })
+          class: "flex gap-hsp-2xs",
+          role: "group",
+          "aria-label": resolvedLabels.viewportSize,
+          children: viewports.map((vp, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              class: `min-h-[44px] min-w-[44px] px-hsp-sm py-hsp-2xs text-caption border rounded-full cursor-pointer transition-[background,color,border-color] duration-150 leading-snug ${i === activeViewport ? "bg-accent text-bg border-accent hover:bg-accent-hover hover:border-accent-hover" : "bg-transparent text-muted border-muted hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]"}`,
+              "aria-pressed": i === activeViewport,
+              onClick: () => setActiveViewport(i),
+              children: vp.label
+            },
+            vp.label
+          ))
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx("div", { class: "bg-surface p-hsp-lg", children: /* @__PURE__ */ jsx(
       "div",
@@ -81,18 +130,18 @@ function PreviewBase({
             class: "block w-full border-none bg-[#fff] rounded shadow-[0_1px_3px_color-mix(in_srgb,var(--color-fg)_8%,transparent)]",
             srcDoc: srcdoc,
             sandbox,
-            style: { height: iframeHeight },
-            title: title ?? "Preview"
+            style: { height: height ?? iframeHeight },
+            title: title ?? resolvedLabels.preview
           }
         )
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { class: "border-t border-muted", children: [
+    sourceVisible && /* @__PURE__ */ jsxs("div", { class: "border-t border-muted", children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          class: "flex items-center w-full px-hsp-md py-hsp-sm text-caption font-medium text-muted bg-surface border-none cursor-pointer gap-hsp-xs hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]",
+          class: "flex min-h-[44px] min-w-[44px] items-center w-full px-hsp-md py-hsp-sm text-caption font-medium text-muted bg-surface border-none cursor-pointer gap-hsp-xs hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)]",
           onClick: () => setCodeOpen((v) => !v),
           "aria-expanded": codeOpen,
           children: [
@@ -104,7 +153,7 @@ function PreviewBase({
                 children: "\u25B6"
               }
             ),
-            codeOpen ? "Hide code" : "Show code"
+            codeOpen ? resolvedLabels.hideCode : resolvedLabels.showCode
           ]
         }
       ),

package/dist/i18n-defaults/index.d.ts

@@ -8,9 +8,11 @@
  * Locale code → key → translated string. The `en` and `ja` tables carry the
  * complete package surface; `de` remains the documented partial locale. The
  * other locales in the generator's `SUPPORTED_LANGS` list
- * (zh-cn/zh-tw/ko/es/fr/pt) fall back to `en` at lookup time (the template's
- * `t()` helper does `translations[locale]?.[key] ?? translations[defaultLocale]?.[key] ?? key`)
- * rather than shipping their own fully-translated table here.
+ * (zh-cn/zh-tw/ko/es/fr/pt) fall back through the requested locale, configured
+ * default locale, package English, and finally the raw key at lookup time (the
+ * `t()` helper does `translations[locale]?.[key] ??
+ * translations[defaultLocale]?.[key] ?? translations.en?.[key] ?? key`) rather
+ * than shipping their own fully-translated table here.
  *
  * Locale label/derivation (mapping a locale code to its display label,
  * detecting the active locale from a URL, etc.) stays settings-driven and is

package/dist/i18n-defaults/index.js

@@ -25,15 +25,48 @@ const defaultTranslations = {
     "code.copy": "Copy code",
     "code.copied": "Copied!",
     "code.wrapToggle": "Toggle word wrap",
+    "htmlPreview.viewport.mobile": "Mobile",
+    "htmlPreview.viewport.tablet": "Tablet",
+    "htmlPreview.viewport.full": "Full",
+    "htmlPreview.viewport.label": "Viewport size",
+    "htmlPreview.source.show": "Show code",
+    "htmlPreview.source.hide": "Hide code",
+    "htmlPreview.iframe.title": "Preview",
     "doc.editPage": "Edit this page",
     "doc.viewSource": "View source on GitHub",
     "header.github": "GitHub repository",
+    "language.switcher.label": "Language",
     "doc.tags": "Tags",
     "doc.taggedWith": "Pages tagged with",
     "doc.allTags": "All Tags",
     "doc.seeAllTags": "See all tags",
     "doc.created": "Created",
     "doc.updated": "Updated",
+    "resource.claudeMd.label": "CLAUDE.md",
+    "resource.claudeMd.description": "Project-specific instructions",
+    "resource.claudeCommands.label": "Commands",
+    "resource.claudeCommands.description": "Custom slash commands",
+    "resource.claudeSkills.label": "Skills",
+    "resource.claudeSkills.description": "Skill packages",
+    "resource.claudeAgents.label": "Agents",
+    "resource.claudeAgents.description": "Custom subagents",
+    "resource.codexAgentsMd.label": "AGENTS.md",
+    "resource.codexAgentsMd.description": "Project instructions for Codex",
+    "resource.codexConfig.label": "Config",
+    "resource.codexConfig.description": "config.toml and profiles",
+    "resource.codexAgents.label": "Agents",
+    "resource.codexAgents.description": "Custom subagents",
+    "resource.codexHooks.label": "Hooks",
+    "resource.codexHooks.description": "Lifecycle hooks",
+    "resource.codexRules.label": "Rules",
+    "resource.codexRules.description": "Command approval rules",
+    "resource.codexSkills.label": "Skills",
+    "resource.codexSkills.description": "Skill packages",
+    "resource.claude.title": "Claude",
+    "resource.claude.description": "Claude Code configuration reference.",
+    "resource.codex.title": "Codex",
+    "resource.codex.description": "OpenAI Codex configuration reference.",
+    "resource.resources": "Resources",
     "asset.badge": "Asset",
     "asset.crumb": "Assets",
     "asset.indexBadge": "Index",
@@ -55,6 +88,17 @@ const defaultTranslations = {
     "asset.viewFullFile": "View full file",
     "asset.showingLines": "Showing {shown} of {total} lines",
     "asset.truncated": "Preview truncated \u2014 download the file for the rest.",
+    "asset.details": "Details",
+    "asset.type": "Type",
+    "asset.size": "Size",
+    "asset.path": "Path",
+    "asset.dimensions": "Dimensions",
+    "asset.backTo": "Back to",
+    "asset.fit": "Fit",
+    "asset.actualSize": "1:1",
+    "asset.checker": "Checker",
+    "asset.dark": "Dark",
+    "asset.enlarge": "Enlarge image",
     "doc.noTags": "No tags found.",
     "doc.pageCount": "{count} pages",
     "doc.pageCountSingle": "{count} page",
@@ -107,15 +151,48 @@ const defaultTranslations = {
     "code.copy": "\u30B3\u30FC\u30C9\u3092\u30B3\u30D4\u30FC",
     "code.copied": "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01",
     "code.wrapToggle": "\u6298\u308A\u8FD4\u3057\u5207\u66FF",
+    "htmlPreview.viewport.mobile": "\u30E2\u30D0\u30A4\u30EB",
+    "htmlPreview.viewport.tablet": "\u30BF\u30D6\u30EC\u30C3\u30C8",
+    "htmlPreview.viewport.full": "\u30D5\u30EB",
+    "htmlPreview.viewport.label": "\u30D3\u30E5\u30FC\u30DD\u30FC\u30C8\u30B5\u30A4\u30BA",
+    "htmlPreview.source.show": "\u30B3\u30FC\u30C9\u3092\u8868\u793A",
+    "htmlPreview.source.hide": "\u30B3\u30FC\u30C9\u3092\u975E\u8868\u793A",
+    "htmlPreview.iframe.title": "\u30D7\u30EC\u30D3\u30E5\u30FC",
     "doc.editPage": "\u3053\u306E\u30DA\u30FC\u30B8\u3092\u7DE8\u96C6",
     "doc.viewSource": "GitHub \u3067\u30BD\u30FC\u30B9\u3092\u898B\u308B",
     "header.github": "GitHub \u30EA\u30DD\u30B8\u30C8\u30EA",
+    "language.switcher.label": "\u8A00\u8A9E",
     "doc.tags": "\u30BF\u30B0",
     "doc.taggedWith": "\u30BF\u30B0\u4ED8\u304D\u30DA\u30FC\u30B8",
     "doc.allTags": "\u3059\u3079\u3066\u306E\u30BF\u30B0",
     "doc.seeAllTags": "\u3059\u3079\u3066\u306E\u30BF\u30B0\u3092\u898B\u308B",
     "doc.created": "\u4F5C\u6210",
     "doc.updated": "\u66F4\u65B0",
+    "resource.claudeMd.label": "CLAUDE.md",
+    "resource.claudeMd.description": "\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u56FA\u6709\u306E\u6307\u793A",
+    "resource.claudeCommands.label": "\u30B3\u30DE\u30F3\u30C9",
+    "resource.claudeCommands.description": "\u30AB\u30B9\u30BF\u30E0\u30B9\u30E9\u30C3\u30B7\u30E5\u30B3\u30DE\u30F3\u30C9",
+    "resource.claudeSkills.label": "\u30B9\u30AD\u30EB",
+    "resource.claudeSkills.description": "\u30B9\u30AD\u30EB\u30D1\u30C3\u30B1\u30FC\u30B8",
+    "resource.claudeAgents.label": "\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8",
+    "resource.claudeAgents.description": "\u30AB\u30B9\u30BF\u30E0\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8",
+    "resource.codexAgentsMd.label": "AGENTS.md",
+    "resource.codexAgentsMd.description": "Codex \u5411\u3051\u306E\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u6307\u793A",
+    "resource.codexConfig.label": "\u8A2D\u5B9A",
+    "resource.codexConfig.description": "config.toml \u3068\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB",
+    "resource.codexAgents.label": "\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8",
+    "resource.codexAgents.description": "\u30AB\u30B9\u30BF\u30E0\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8",
+    "resource.codexHooks.label": "\u30D5\u30C3\u30AF",
+    "resource.codexHooks.description": "\u30E9\u30A4\u30D5\u30B5\u30A4\u30AF\u30EB\u30D5\u30C3\u30AF",
+    "resource.codexRules.label": "\u30EB\u30FC\u30EB",
+    "resource.codexRules.description": "\u30B3\u30DE\u30F3\u30C9\u627F\u8A8D\u30EB\u30FC\u30EB",
+    "resource.codexSkills.label": "\u30B9\u30AD\u30EB",
+    "resource.codexSkills.description": "\u30B9\u30AD\u30EB\u30D1\u30C3\u30B1\u30FC\u30B8",
+    "resource.claude.title": "Claude",
+    "resource.claude.description": "Claude Code \u306E\u8A2D\u5B9A\u30EA\u30D5\u30A1\u30EC\u30F3\u30B9\u3002",
+    "resource.codex.title": "Codex",
+    "resource.codex.description": "OpenAI Codex \u306E\u8A2D\u5B9A\u30EA\u30D5\u30A1\u30EC\u30F3\u30B9\u3002",
+    "resource.resources": "\u30EA\u30BD\u30FC\u30B9",
     "asset.badge": "\u30A2\u30BB\u30C3\u30C8",
     "asset.crumb": "\u30A2\u30BB\u30C3\u30C8",
     "asset.indexBadge": "\u30A4\u30F3\u30C7\u30C3\u30AF\u30B9",
@@ -137,6 +214,17 @@ const defaultTranslations = {
     "asset.viewFullFile": "\u30D5\u30A1\u30A4\u30EB\u5168\u4F53\u3092\u898B\u308B",
     "asset.showingLines": "{total} \u884C\u4E2D {shown} \u884C\u3092\u8868\u793A",
     "asset.truncated": "\u30D7\u30EC\u30D3\u30E5\u30FC\u306F\u7701\u7565\u3055\u308C\u3066\u3044\u307E\u3059\u3002\u5168\u4F53\u306F\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    "asset.details": "\u8A73\u7D30",
+    "asset.type": "\u7A2E\u985E",
+    "asset.size": "\u30B5\u30A4\u30BA",
+    "asset.path": "\u30D1\u30B9",
+    "asset.dimensions": "\u5BF8\u6CD5",
+    "asset.backTo": "\u623B\u308B",
+    "asset.fit": "\u5168\u4F53\u8868\u793A",
+    "asset.actualSize": "1:1",
+    "asset.checker": "\u30C1\u30A7\u30C3\u30AB\u30FC",
+    "asset.dark": "\u30C0\u30FC\u30AF",
+    "asset.enlarge": "\u753B\u50CF\u3092\u62E1\u5927",
     "doc.noTags": "\u30BF\u30B0\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002",
     "doc.pageCount": "{count}\u30DA\u30FC\u30B8",
     "doc.pageCountSingle": "{count}\u30DA\u30FC\u30B8",
@@ -192,6 +280,7 @@ const defaultTranslations = {
     "doc.editPage": "Diese Seite bearbeiten",
     "doc.viewSource": "Quellcode auf GitHub ansehen",
     "header.github": "GitHub-Repository",
+    "language.switcher.label": "Sprache",
     "doc.tags": "Tags",
     "doc.taggedWith": "Seiten mit Tag",
     "doc.allTags": "Alle Tags",

package/dist/i18n-version/language-switcher.d.ts

@@ -37,9 +37,10 @@ export declare function switchLocaleHref(pathname: string, config: LanguageSwitc
  * first load and re-runs {@link switchLocaleHref} against the live pathname —
  * the same rebind-on-navigate contract `VERSION_SWITCHER_INIT_SCRIPT` uses.
  *
- * `window[FLAG]` makes it idempotent: the tag may re-execute on a hard reload
- * or a cross-locale header repaint, but the listener is registered exactly
- * once per page lifetime.
+ * `window[FLAG]` stores the live-DOM refresh function: the tag may re-execute
+ * after a cross-locale header repaint, but document-level delegation is
+ * registered exactly once per page lifetime and the replacement markup is
+ * refreshed immediately.
  *
  * The pathname fed to `switchLocaleHref` comes from the embedded
  * `readCurrentPath`, which prefers the `data-zd-current-path` override over
@@ -68,13 +69,17 @@ export interface LanguageSwitcherProps {
      * script knows which locale segment to strip. Only read when `config` is set.
      */
     currentLocale?: string;
+    /** Localized accessible name for the disclosure trigger. */
+    accessibleLabel: string;
+    /** Optional suffix used to keep trigger/menu ids unique on the page. */
+    idSuffix?: string;
 }
 /**
- * Inline locale switcher rendered in the header / sidebar footer.
+ * Desktop locale disclosure rendered in the header.
  *
  * Returns `null` when there is one locale or fewer (matches the Astro
  * template's `localeLinks.length > 1 &&` guard so call-sites can mount
  * the component unconditionally).
  */
-export declare function LanguageSwitcher({ links, config, currentLocale, }: LanguageSwitcherProps): VNode | null;
+export declare function LanguageSwitcher({ links, config, currentLocale, accessibleLabel, idSuffix, }: LanguageSwitcherProps): VNode | null;
 export type { LocaleLink };

package/dist/i18n-version/language-switcher.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "preact/jsx-runtime";
-import { Fragment } from "preact";
 import { AFTER_NAVIGATE_EVENT } from "../transitions/index.js";
 import { CURRENT_PATH_SCRIPT_PRELUDE } from "../current-path/index.js";
 function switchLocaleHref(pathname, config, currentLang, targetLang) {
@@ -44,14 +43,26 @@ function switchLocaleHref(pathname, config, currentLang, targetLang) {
 }
 const LANGUAGE_SWITCHER_INIT_SCRIPT = `(function(){
 var FLAG="__zdLanguageSwitcherInit";
-if(window[FLAG])return;
-window[FLAG]=true;
 ${CURRENT_PATH_SCRIPT_PRELUDE}
 var switchLocaleHref=${switchLocaleHref.toString()};
-function rewire(){
+function close(c,restoreFocus){
+var toggle=c.querySelector("[data-language-toggle]");
+var menu=c.querySelector("[data-language-menu]");
+if(!toggle||!menu)return;
+menu.classList.add("hidden");
+toggle.setAttribute("aria-expanded","false");
+if(restoreFocus)toggle.focus();
+}
+function refresh(){
 var containers=document.querySelectorAll("[data-language-switcher]");
 for(var i=0;i<containers.length;i++){
 var c=containers[i];
+close(c,false);
+var menu=c.querySelector("[data-language-menu]");
+if(menu){
+menu.classList.remove("group-hover:block","group-focus-within:block");
+}
+if(!c.hasAttribute("data-default-locale"))continue;
 var config={base:c.getAttribute("data-base")||"",defaultLocale:c.getAttribute("data-default-locale")||"",trailingSlash:c.getAttribute("data-trailing-slash")==="true"};
 var currentLang=c.getAttribute("data-current-locale")||config.defaultLocale;
 var anchors=c.querySelectorAll("a[lang]");
@@ -63,39 +74,121 @@ a.setAttribute("href",switchLocaleHref(readCurrentPath(CURRENT_PATH_DATASET_KEY)
 }
 }
 }
-rewire();
-document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)},rewire);
+if(window[FLAG]){window[FLAG]();return;}
+window[FLAG]=refresh;
+document.addEventListener("click",function(e){
+var target=e.target;
+var toggle=target&&target.closest?target.closest("[data-language-toggle]"):null;
+if(toggle){
+var switcher=toggle.closest("[data-language-switcher]");
+if(switcher){
+var menu=switcher.querySelector("[data-language-menu]");
+var willOpen=toggle.getAttribute("aria-expanded")!=="true";
+document.querySelectorAll("[data-language-switcher]").forEach(function(c){if(c!==switcher)close(c,false);});
+if(menu){menu.classList.toggle("hidden",!willOpen);toggle.setAttribute("aria-expanded",String(willOpen));}
+}
+return;
+}
+document.querySelectorAll("[data-language-switcher]").forEach(function(c){if(!c.contains(target))close(c,false);});
+});
+document.addEventListener("keydown",function(e){
+if(e.key!=="Escape")return;
+document.querySelectorAll('[data-language-toggle][aria-expanded="true"]').forEach(function(toggle){
+var switcher=toggle.closest("[data-language-switcher]");
+if(switcher)close(switcher,true);
+});
+});
+refresh();
+document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)},refresh);
 })();`;
 function LanguageSwitcher({
   links,
   config,
-  currentLocale
+  currentLocale,
+  accessibleLabel,
+  idSuffix = ""
 }) {
   if (links.length <= 1) return null;
+  const menuId = `language-menu${idSuffix ? `-${idSuffix}` : ""}`;
+  const activeLink = links.find((link) => link.active) ?? links[0];
   const rewireAttrs = config ? {
-    "data-language-switcher": true,
     "data-base": config.base,
     "data-default-locale": config.defaultLocale,
     "data-trailing-slash": String(config.trailingSlash),
     "data-current-locale": currentLocale ?? config.defaultLocale
   } : {};
-  return /* @__PURE__ */ jsx("div", { class: "flex items-center gap-x-hsp-xs text-small", ...rewireAttrs, children: links.map((link, i) => (
-    // Fragment is keyed via the locale code so the reconciler keeps
-    // the active/inactive nodes paired correctly across re-renders
-    // (e.g. when the active locale flips after navigation).
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsx("span", { class: "text-muted", children: "/" }),
-      link.active ? /* @__PURE__ */ jsx("span", { "aria-current": "true", class: "font-medium text-fg", children: link.label }) : /* @__PURE__ */ jsx(
-        "a",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: "group relative flex items-center text-small",
+      "data-language-switcher": true,
+      ...rewireAttrs,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "flex max-w-[16rem] cursor-pointer items-center gap-hsp-2xs whitespace-nowrap rounded border border-muted px-hsp-sm py-vsp-3xs text-small text-muted transition-colors hover:border-accent hover:text-accent focus-visible:border-accent focus-visible:text-accent",
+            "aria-label": accessibleLabel,
+            "aria-controls": menuId,
+            "aria-expanded": "false",
+            "data-language-toggle": true,
+            children: [
+              /* @__PURE__ */ jsx("span", { class: "truncate font-medium", children: activeLink?.label }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            id: menuId,
+            class: "absolute right-0 top-full z-dropdown mt-vsp-3xs hidden min-w-[8rem] max-w-[calc(100vw-var(--spacing-hsp-xl))] overflow-x-auto whitespace-nowrap rounded border border-muted bg-surface py-vsp-3xs shadow-lg group-hover:block group-focus-within:block",
+            "data-language-menu": true,
+            children: links.map((link) => /* @__PURE__ */ jsx("li", { children: link.active ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                lang: link.code,
+                "aria-current": "page",
+                class: "block px-hsp-md py-vsp-2xs text-small font-bold text-accent",
+                children: link.label
+              }
+            ) : /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: link.href,
+                lang: link.code,
+                class: "block px-hsp-md py-vsp-2xs text-small text-fg hover:bg-accent/10 hover:text-accent hover:underline focus-visible:text-accent focus-visible:underline",
+                children: link.label
+              }
+            ) }, link.code))
+          }
+        )
+      ]
+    }
+  );
+}
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      class: "h-icon-xs w-icon-xs shrink-0",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
         {
-          href: link.href,
-          lang: link.code,
-          class: "text-muted hover:text-fg",
-          children: link.label
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M19 9l-7 7-7-7"
         }
       )
-    ] }, link.code)
-  )) });
+    }
+  );
 }
 export {
   LANGUAGE_SWITCHER_INIT_SCRIPT,

package/dist/i18n-version/types.d.ts

@@ -11,7 +11,7 @@ export interface LocaleLink {
     label: string;
     /** Pre-resolved href for the locale (already prefixed with the configured base). */
     href: string;
-    /** True for the currently-active locale — rendered as plain text, not a link. */
+    /** True for the currently-active locale — rendered as the disclosure's current row. */
     active: boolean;
 }
 /**

package/dist/mdx-components/index.d.ts

@@ -22,6 +22,10 @@ export interface CreateMdxComponentsOptions {
     settings: Pick<Settings, "base" | "imageEnlarge" | "assetViewerDir" | "assetViewerRoutePrefix">;
     /** Author-facing asset index. Null/omitted keeps all MDX overrides inert. */
     assetManifest?: AssetManifest | null;
+    /** Non-default locale segment used by asset-viewer links. */
+    assetViewerLocale?: string;
+    /** Match asset viewer paths that intentionally remain default-locale-only. */
+    isDefaultLocaleOnlyPath?: (path: string) => boolean;
     /**
      * Active locale for this render. Injected into each `navData` wrapper as the
      * `lang` prop so `/ja` pages resolve the JA collection. Load-bearing — do not