@takazudo/zudo-doc 0.1.0

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

@@ -0,0 +1,108 @@
+const preflightCss = `
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+
+html,
+:host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  -webkit-tap-highlight-color: transparent;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+code, kbd, samp, pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+ol, ul, menu {
+  list-style: none;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+button, input, select, optgroup, textarea, ::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: 0;
+  background-color: transparent;
+  opacity: 1;
+}
+
+textarea {
+  resize: vertical;
+}
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+`;
+export {
+  preflightCss
+};

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

@@ -0,0 +1,29 @@
+import { VNode } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface CodeBlockData {
+    language: string;
+    title: string;
+    code: string;
+}
+interface PreviewBaseProps {
+    title?: string;
+    height?: number;
+    srcdoc: string;
+    sandbox?: string;
+    syncDelay: number;
+    codeBlocks: CodeBlockData[];
+    defaultOpen?: boolean;
+}
+/**
+ * Interactive preview base: iframe viewport switcher + collapsible code
+ * section.
+ *
+ * JSX port of src/components/html-preview/preview-base.tsx with
+ * React → Preact hook imports and `className` → `class` attribute.
+ */
+declare function PreviewBase({ title, height, srcdoc, sandbox, syncDelay, codeBlocks, defaultOpen, }: PreviewBaseProps): VNode;
+
+export { type CodeBlockData, PreviewBase, type PreviewBaseProps };

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

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useCallback, 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%" }
+];
+function PreviewBase({
+  title,
+  height,
+  srcdoc,
+  sandbox,
+  syncDelay,
+  codeBlocks,
+  defaultOpen
+}) {
+  const [activeViewport, setActiveViewport] = useState(2);
+  const [codeOpen, setCodeOpen] = useState(defaultOpen ?? false);
+  const [iframeHeight, setIframeHeight] = useState(height ?? 200);
+  const iframeRef = useRef(null);
+  const syncHeight = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || height != null) return;
+    try {
+      const doc = iframe.contentDocument;
+      if (doc?.body) {
+        const h = doc.body.scrollHeight;
+        if (h > 0) setIframeHeight(Math.max(h + 16, 200));
+      }
+    } 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);
+    };
+  }, [syncHeight, srcdoc, syncDelay]);
+  useEffect(() => {
+    if (height != null) return;
+    const id = setTimeout(syncHeight, 150);
+    return () => clearTimeout(id);
+  }, [activeViewport, syncHeight, height]);
+  const containerWidth = VIEWPORTS[activeViewport].width;
+  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: [
+      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",
+        {
+          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
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { class: "bg-surface p-hsp-lg", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "resize-x overflow-auto max-w-full mx-auto",
+        style: { width: containerWidth },
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            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"
+          }
+        )
+      }
+    ) }),
+    /* @__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%)]",
+          onClick: () => setCodeOpen((v) => !v),
+          "aria-expanded": codeOpen,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                class: `text-caption transition-transform duration-200 ${codeOpen ? "rotate-90" : ""}`,
+                "aria-hidden": "true",
+                children: "\u25B6"
+              }
+            ),
+            codeOpen ? "Hide code" : "Show code"
+          ]
+        }
+      ),
+      codeOpen && /* @__PURE__ */ jsx("div", { children: codeBlocks.map((block, idx) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          class: `overflow-x-auto ${idx > 0 ? "border-t border-muted" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { class: "block px-hsp-md py-hsp-xs text-caption font-semibold text-muted bg-surface border-b border-muted uppercase tracking-wider", children: block.title }),
+            /* @__PURE__ */ jsx(HighlightedCode, { code: block.code, language: block.language })
+          ]
+        },
+        block.title
+      )) })
+    ] })
+  ] });
+}
+export {
+  PreviewBase
+};

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

@@ -0,0 +1,5 @@
+export { LanguageSwitcher, LanguageSwitcherProps } from './language-switcher.js';
+export { VERSION_SWITCHER_INIT_SCRIPT, VERSION_SWITCHER_VISIBILITY_STYLE, VersionSwitcher, VersionSwitcherProps } from './version-switcher.js';
+export { VersionBanner, VersionBannerLabels, VersionBannerProps } from './version-banner.js';
+export { LocaleLink, VersionEntry, VersionSwitcherLabels } from './types.js';
+import 'preact';

package/dist/i18n-version/index.js

@@ -0,0 +1,14 @@
+import { LanguageSwitcher } from "./language-switcher.js";
+import {
+  VersionSwitcher,
+  VERSION_SWITCHER_INIT_SCRIPT,
+  VERSION_SWITCHER_VISIBILITY_STYLE
+} from "./version-switcher.js";
+import { VersionBanner } from "./version-banner.js";
+export {
+  LanguageSwitcher,
+  VERSION_SWITCHER_INIT_SCRIPT,
+  VERSION_SWITCHER_VISIBILITY_STYLE,
+  VersionBanner,
+  VersionSwitcher
+};

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

@@ -0,0 +1,24 @@
+import { VNode } from 'preact';
+import { LocaleLink } from './types.js';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface LanguageSwitcherProps {
+    /**
+     * Pre-built locale links, ordered as they should appear in the bar.
+     * The host project typically derives this with its own
+     * `buildLocaleLinks(currentPath, currentLang)` helper before passing.
+     */
+    links: LocaleLink[];
+}
+/**
+ * Inline locale switcher rendered in the header / sidebar footer.
+ *
+ * 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).
+ */
+declare function LanguageSwitcher({ links }: LanguageSwitcherProps): VNode | null;
+
+export { LanguageSwitcher, type LanguageSwitcherProps, LocaleLink };

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

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment } from "preact";
+function LanguageSwitcher({ links }) {
+  if (links.length <= 1) return null;
+  return /* @__PURE__ */ jsx("div", { class: "flex items-center gap-x-hsp-xs text-small", 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",
+        {
+          href: link.href,
+          lang: link.code,
+          class: "text-muted hover:text-fg",
+          children: link.label
+        }
+      )
+    ] }, link.code)
+  )) });
+}
+export {
+  LanguageSwitcher
+};

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

@@ -0,0 +1,43 @@
+/**
+ * Single link in the language-switcher's ordered list.
+ *
+ * Mirrors the shape of `LocaleLink` from src/types/locale.ts so existing
+ * call-sites can pass their already-built links straight through.
+ */
+interface LocaleLink {
+    /** BCP-47 code, e.g. "en", "ja". Rendered as the anchor's `lang` attribute. */
+    code: string;
+    /** Display label (typically the uppercased code). */
+    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. */
+    active: boolean;
+}
+/**
+ * Single entry in the version-switcher's drop-down list.
+ *
+ * Slug is the URL-segment identifier; label is the user-visible string
+ * (e.g. "v2.0", "1.x").
+ */
+interface VersionEntry {
+    slug: string;
+    label: string;
+}
+/**
+ * UI strings the version-switcher renders. Kept as a labels bag rather
+ * than wired to a host-side i18n module so the v2 package stays
+ * locale-system agnostic.
+ */
+interface VersionSwitcherLabels {
+    /** Label for the "latest" entry, e.g. "Latest" / "最新". */
+    latest: string;
+    /** Trigger-button prefix, e.g. "Version" / "バージョン". */
+    switcher: string;
+    /** `title` attribute for unavailable items, e.g. "Not available". */
+    unavailable: string;
+    /** Footer link label, e.g. "All versions". */
+    allVersions: string;
+}
+
+export type { LocaleLink, VersionEntry, VersionSwitcherLabels };

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

@@ -0,0 +1,30 @@
+import { VNode } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface VersionBannerLabels {
+    /** Banner body text (e.g. "You are viewing documentation for an older version."). */
+    message: string;
+    /** Link label to the latest version (e.g. "View the latest version"). */
+    latestLink: string;
+}
+interface VersionBannerProps {
+    /** Variant — drives icon/colour selection downstream and is exposed via `data-variant`. */
+    type: "unmaintained" | "unreleased";
+    /** Pre-resolved href to the latest version of the current page. */
+    latestUrl: string;
+    /** UI strings — see `VersionBannerLabels`. */
+    labels: VersionBannerLabels;
+}
+/**
+ * Banner element rendered above the article body on versioned doc
+ * pages. Displays a localized notice and a link to the latest version
+ * of the current page.
+ *
+ * The host typically resolves `labels` via `t("version.banner.*", lang)`
+ * and `latestUrl` via the project's URL helpers.
+ */
+declare function VersionBanner(props: VersionBannerProps): VNode;
+
+export { VersionBanner, type VersionBannerLabels, type VersionBannerProps };

package/dist/i18n-version/version-banner.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+function VersionBanner(props) {
+  const { type, latestUrl, labels } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "note",
+      "data-version-banner": true,
+      "data-variant": type,
+      class: "mb-vsp-md border border-warning/30 bg-warning/5 px-hsp-lg py-vsp-sm text-small text-muted rounded",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: labels.message }),
+        " ",
+        /* @__PURE__ */ jsx("a", { href: latestUrl, class: "underline text-accent hover:text-accent-hover", children: labels.latestLink })
+      ]
+    }
+  );
+}
+export {
+  VersionBanner
+};

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

@@ -0,0 +1,112 @@
+import { VNode } from 'preact';
+import { VersionEntry, VersionSwitcherLabels } from './types.js';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface VersionSwitcherProps {
+    /**
+     * All known versions, in display order (latest at top of the dropdown
+     * is rendered separately via `latestUrl` — this list is the
+     * non-latest versions only).
+     */
+    versions: VersionEntry[];
+    /** Current version slug, or undefined when the page is on "latest". */
+    currentVersion?: string;
+    /** Pre-resolved href for the "Latest" entry. */
+    latestUrl: string;
+    /** Pre-resolved href for the "All versions" footer link. */
+    versionsPageUrl: string;
+    /**
+     * Map of `version slug` → pre-resolved href to that version of the
+     * current page (or the versions index page when no slug is in scope).
+     * Pass an empty object when the current page is not a versionable doc.
+     */
+    versionUrls: Record<string, string>;
+    /**
+     * Slugs of versions where the current page is NOT available. Renders
+     * those entries as muted, non-interactive links with the
+     * `unavailable` title attribute. Omit (or pass `undefined`) when no
+     * availability data is in scope — every entry is then treated as
+     * available, matching the Astro template's `!availability` branch.
+     */
+    unavailableVersions?: ReadonlySet<string>;
+    /** UI strings — see `VersionSwitcherLabels` for the field list. */
+    labels: VersionSwitcherLabels;
+    /**
+     * Optional suffix appended to the menu's DOM id. Used when more than
+     * one version-switcher is rendered on the same page (e.g. one in the
+     * header, one in the sidebar) so each `aria-controls` reference stays
+     * unique.
+     */
+    idSuffix?: string;
+    /**
+     * @deprecated No longer wired — the component never emits an inline
+     * `<style>`. Visibility CSS lives in the consumer's global stylesheet
+     * (see `VERSION_SWITCHER_VISIBILITY_STYLE` for the canonical rule).
+     * Retained on the public interface for backwards compatibility; passing
+     * any value is a no-op.
+     */
+    disableInlineVisibilityStyle?: boolean;
+}
+/**
+ * Canonical CSS rule that backs the responsive visibility of the
+ * version-switcher's host wrapper. **The component itself does NOT
+ * emit a `<style>` carrying this rule** — it lives in the consumer's
+ * global stylesheet to avoid HTML5's `<style>`-as-flow-content
+ * violation (zudolab/zudo-doc#1505). This export remains as a
+ * re-usable canonical string so downstream consumers can drop the
+ * rule into their own `global.css` verbatim or assert against it.
+ *
+ * The selector `.hidden:has(> [data-version-switcher])` keys off the
+ * host header's `<div class="hidden lg:block">` baseline (the `.hidden`
+ * part is always generated by Tailwind because `pages/` directly
+ * references it) and only adds the *desktop* override at viewports
+ * `>= 64rem`. Below 64rem there is no rule, so visibility falls
+ * through to Tailwind's `.hidden` rule — mobile stays hidden the way
+ * the host requested.
+ *
+ * Why scope to `.hidden`: a consumer that wraps `<VersionSwitcher>` in
+ * something *without* the `.hidden` baseline (a flex row, a grid cell, an
+ * unstyled span) is not asking for "hide on mobile, show on desktop" and
+ * shouldn't have this rule rewrite its parent's `display`. Pinning the
+ * selector to the `.hidden` precondition keeps the override surgical to
+ * the documented usage pattern.
+ *
+ * The breakpoint (`64rem` = 1024px) intentionally mirrors the project's
+ * Tailwind `lg` token. If the design system's `lg` boundary moves, update
+ * this value to match.
+ *
+ * Specificity: `.hidden:has(> [data-version-switcher])` resolves to 0,0,2,0
+ * — higher than Tailwind's `.hidden` (0,0,1,0). The unlayered author origin
+ * also wins over `@layer utilities` regardless of specificity, so this rule
+ * reliably overrides the wrapper's `display: none` at `>= 64rem`.
+ */
+declare const VERSION_SWITCHER_VISIBILITY_STYLE = "@media (min-width:64rem){.hidden:has(> [data-version-switcher]){display:block}}";
+/**
+ * Drop-down version switcher rendered in the header.
+ *
+ * The toggle / outside-click / Escape-key behavior lives in
+ * `VERSION_SWITCHER_INIT_SCRIPT` — mount it once at body-end on any
+ * page that includes a `<VersionSwitcher>`.
+ */
+declare function VersionSwitcher(props: VersionSwitcherProps): VNode;
+/**
+ * Self-contained init script for the version-switcher's interactive
+ * behavior. Mount once per page (e.g. inside the layout's body-end
+ * scripts slot) — it idempotently re-binds via an AbortController so
+ * multiple switchers on the page share a single event-listener
+ * generation.
+ *
+ * The post-navigation rebinder uses `AFTER_NAVIGATE_EVENT` from
+ * `transitions/page-events.ts` (today: `zfb:after-swap`) rather than
+ * a hard-coded `astro:*` literal — see that module's header for the
+ * full vocabulary rationale.
+ *
+ * Lifted from the `<script>` block of the original
+ * version-switcher.astro; behaviour is unchanged modulo the lifecycle
+ * vocabulary swap.
+ */
+declare const VERSION_SWITCHER_INIT_SCRIPT: string;
+
+export { VERSION_SWITCHER_INIT_SCRIPT, VERSION_SWITCHER_VISIBILITY_STYLE, VersionEntry, VersionSwitcher, VersionSwitcherLabels, type VersionSwitcherProps };