@takazudo/zudo-doc 5.19.1 → 5.21.0

package/CHANGELOG.md

@@ -4,6 +4,40 @@ All notable changes to `@takazudo/zudo-doc` are documented in this file.
 
 The format is based on Keep a Changelog, and release notes are generated from the changelog MDX pages.
 
+## [Unreleased]
+
+No unreleased changes.
+
+## [5.21.0] - 2026-09-09
+
+### Features
+
+- Added compact Markdown introductions to the home pages. `home.introMarkdown` renders serializable Markdown below the home identity on `/`, and each non-default locale can override it with `LocaleConfig.introMarkdown`. Empty values keep the previous layout, so existing sites are unaffected. (`77ed96b3f`, `8e10ecbc1`)
+- Added `home.sitemapHeading` and `LocaleConfig.sitemapHeading` to override the home sitemap section title. A blank value restores the translated package default. (`77ed96b3f`)
+
+### Bug Fixes
+
+- Rendered the home sitemap and tag section headings through one shared component, so both align with the full-width content band instead of the sitemap heading sitting on the narrower inner column. (`849e04a57`)
+
+## [5.20.0] - 2026-09-09
+
+### Features
+
+- Added `dateFormat` patterns with per-role and per-locale overrides for page metadata, history, note trays, and navigation. Patterns support `YYYY`, `YY`, `MMMM`, `MMM`, `MM`, `M`, `DD`, `D`, and bracketed literal text; omitted roles retain locale-based formatting. (`2eeb42ce2`, `c126ecf8d`, `1d8ba74fa`, `10d5a90dc`, `3a2dc81fe`)
+- Added optional `LocaleConfig.description` for each non-default locale's home hero. Omitted values use `settings.siteDescription`; an empty string intentionally leaves the description blank. This changes hero text only; `llms.txt` retains the global description. (`0ce449ba0`)
+- Added namespaced `--color-zd-*` aliases and `theme-no-reset.css`, which preserves host color namespaces when stylesheet import order cannot be controlled. (`f3aae4442`, `ecdc23800`)
+
+### Bug Fixes
+
+- Rendered sidebar and site-tree dates in the page locale, including single-locale sites without language-switcher links. Japanese month groups now read `2026年8月` rather than `2026 August`; default numeric month/day and year-only labels retain their existing output. (`47bd00ff4`, `3c6c81c38`)
+- Separated history display locale from its storage path and formatted history timestamps in UTC, preventing browser locale or timezone from changing the displayed revision date. (`30bcf88c8`)
+- Let home hero links wrap without squeezing Japanese labels, and wrapped long terminal breadcrumb titles while preserving the version pill's spacing. (`be7b3de3b`, `173fdb77f`)
+- Corrected theme-pack navigation hover contrast, including active items and text inside brutalist link cards. (`6e561da45`, `791ad2c92`, `c83b8bda5`)
+
+### Other Changes
+
+- Expanded the optional `@takazudo/zdtp` peer range to `^0.5.2 || ^0.6.0 || ^0.7.0`. Existing panel integrations need no configuration or storage migration, and downstream pnpm peer-range exceptions can be removed. Continue importing `@takazudo/zdtp/styles.css` explicitly. (`e0fc27fbd`, `9554dbbea`)
+
 ## [5.19.1] - 2026-09-08
 
 ### Other Changes

package/dist/asset-page/index.d.ts

@@ -2,6 +2,7 @@
 /** @jsxImportSource preact */
 import type { ComponentChildren, JSX, VNode } from "preact";
 import type { ChromeContext } from "../factory-context/index.js";
+import type { DateFormatPattern } from "../format-date/index.js";
 import type { AssetRecord } from "../plugins/internal/asset-viewer/types.js";
 import type { Settings } from "../settings.js";
 export { ASSET_DETAILS_HIDDEN_ATTR, ASSET_DETAILS_PREPAINT_SCRIPT, ASSET_DETAILS_STORAGE_KEY, ASSET_PAGE_SCRIPT, } from "./script.js";
@@ -14,12 +15,13 @@ export declare function AssetEyebrow({ asset, badge }: {
     asset: AssetRecord;
     badge: string;
 }): VNode;
-export declare function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel }: {
+export declare function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }: {
     asset: AssetRecord;
     locale: string;
     badge: string;
     updatedLabel: string;
     linesLabel?: string;
+    fullPattern?: DateFormatPattern;
 }): VNode;
 export declare function AssetActions({ rawUrl, downloadLabel, openRawLabel, copyLabel, wrapLabel, code, bottom }: {
     rawUrl: string;

package/dist/asset-page/index.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 import { BodyFootUtilArea } from "../body-foot-util/index.js";
-import { deriveBodyEndIslands } from "../chrome/derive.js";
+import { deriveBodyEndIslands, deriveDateFormats } from "../chrome/derive.js";
 import { deriveComposeMetaTitle } from "../chrome/derive.js";
 import { derivePrimaryChromeSlots } from "../chrome/primary-slots.js";
 import { assertChromeContext } from "../chrome/assert-chrome-context.js";
@@ -44,7 +44,7 @@ function AssetEyebrow({ asset, badge }) {
     /* @__PURE__ */ jsx("span", { class: "rounded-full border border-muted px-hsp-sm py-vsp-3xs text-muted", children: kindLabel(asset) })
   ] });
 }
-function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel }) {
+function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel, fullPattern }) {
   const facet = facetLabel(asset, linesLabel);
   return /* @__PURE__ */ jsxs("header", { children: [
     /* @__PURE__ */ jsx(AssetEyebrow, { asset, badge }),
@@ -56,7 +56,7 @@ function AssetHeader({ asset, locale, badge, updatedLabel, linesLabel }) {
       asset.updatedDate && /* @__PURE__ */ jsxs("span", { children: [
         updatedLabel,
         " ",
-        formatDate(asset.updatedDate, locale)
+        formatDate(asset.updatedDate, locale, fullPattern)
       ] }),
       asset.author && /* @__PURE__ */ jsx("span", { children: asset.author })
     ] }),
@@ -202,6 +202,7 @@ function createAssetPageView(ctx) {
   assertChromeContext(ctx, "createAssetPageView");
   const settings = ctx.settings;
   const t = ctx.t;
+  const dateFormatsFor = deriveDateFormats(ctx);
   const composeMetaTitle = deriveComposeMetaTitle(ctx);
   const HeadWithDefaults = createHeadWithDefaults(ctx);
   const { Header: HeaderWithDefaults, Footer: FooterWithDefaults, Breadcrumb: BreadcrumbWithDefaults } = derivePrimaryChromeSlots(ctx);
@@ -269,7 +270,7 @@ function createAssetPageView(ctx) {
         " ",
         backLink.title
       ] }) }),
-      /* @__PURE__ */ jsx(AssetHeader, { asset, locale, badge: t("asset.badge", locale), updatedLabel: t("doc.updated", locale), linesLabel }),
+      /* @__PURE__ */ jsx(AssetHeader, { asset, locale, badge: t("asset.badge", locale), updatedLabel: t("doc.updated", locale), linesLabel, fullPattern: dateFormatsFor(locale).full }),
       /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: t("asset.download", locale), openRawLabel: t("asset.openRaw", locale), copyLabel: t("asset.copy", locale), wrapLabel: t("asset.wrap", locale), code: !isMedia && asset.previewable && asset.sniffOk }),
       body,
       /* @__PURE__ */ jsx(AssetActions, { rawUrl, downloadLabel: t("asset.download", locale), openRawLabel: t("asset.openRaw", locale), copyLabel: t("asset.copy", locale), wrapLabel: t("asset.wrap", locale), bottom: true }),

package/dist/breadcrumb/breadcrumb.js

@@ -70,20 +70,27 @@ function HomeIcon() {
 function Breadcrumb(props) {
   const items = props.items ?? (props.tree && props.currentId !== void 0 ? buildBreadcrumbItems(props.tree, props.currentId, props.homeHref ?? "/") : []);
   if (items.length === 0) return null;
-  const nav = /* @__PURE__ */ jsx("nav", { class: "mb-vsp-md text-small", "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { class: "flex flex-wrap items-center gap-x-hsp-xs", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { class: "flex items-center gap-x-hsp-xs", children: [
-    i > 0 && /* @__PURE__ */ jsx(ChevronIcon, {}),
-    item.href ? /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: item.href,
-        class: "text-muted underline hover:text-fg flex items-center gap-x-hsp-2xs",
-        children: [
-          i === 0 && /* @__PURE__ */ jsx(HomeIcon, {}),
-          /* @__PURE__ */ jsx(SmartLabel, { label: item.label })
-        ]
-      }
-    ) : /* @__PURE__ */ jsx("span", { class: "text-fg", children: /* @__PURE__ */ jsx(SmartLabel, { label: item.label }) })
-  ] }, `crumb-${i}`)) }) });
+  const nav = /* @__PURE__ */ jsx(
+    "nav",
+    {
+      class: `mb-vsp-md text-small${props.rightSlot !== void 0 ? " min-w-0 w-full" : ""}`,
+      "aria-label": "Breadcrumb",
+      children: /* @__PURE__ */ jsx("ol", { class: "flex flex-wrap items-center gap-x-hsp-xs", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { class: "min-w-0 flex items-center gap-x-hsp-xs", children: [
+        i > 0 && /* @__PURE__ */ jsx(ChevronIcon, {}),
+        item.href ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: item.href,
+            class: "text-muted underline hover:text-fg flex items-center gap-x-hsp-2xs",
+            children: [
+              i === 0 && /* @__PURE__ */ jsx(HomeIcon, {}),
+              /* @__PURE__ */ jsx(SmartLabel, { label: item.label })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("span", { class: "text-fg min-w-0 break-words", children: /* @__PURE__ */ jsx(SmartLabel, { label: item.label }) })
+      ] }, `crumb-${i}`)) })
+    }
+  );
   if (props.rightSlot === void 0) return nav;
   return /* @__PURE__ */ jsxs("div", { class: "mb-vsp-sm flex flex-col items-start gap-vsp-xs sm:flex-row sm:items-center sm:justify-between [&_nav]:mb-0", children: [
     nav,

package/dist/chrome/derive.d.ts

@@ -2,7 +2,7 @@
 /** @jsxImportSource preact */
 import type { JSX, VNode } from "preact";
 import type { ChromeContext, FactoryComponent } from "../factory-context/index.js";
-import type { Settings } from "../settings.js";
+import type { ResolvedDateFormats, Settings } from "../settings.js";
 import { type ColorScheme } from "../color-scheme-utils.js";
 /** Package-default color scheme used when `colorSchemes` is `null` or a key is
  *  missing. Exported so `createChrome` keeps the identical fallback. Base roles
@@ -16,7 +16,29 @@ declare function DocHistoryStub(_props: {
     slug: string;
     locale?: string;
     basePath?: string;
+    displayLocale?: string;
+    dateFormats?: ResolvedDateFormats;
 }): VNode;
+/**
+ * Derive the single settings -> resolved-roles seam for the `dateFormat`
+ * setting (#4075).
+ *
+ * `dateFormat` is per-role AND per-locale, so it can only collapse to a
+ * concrete set of patterns once the render locale is known — hence a
+ * `(locale) => ResolvedDateFormats` lookup rather than a plain value. Every
+ * chrome surface that renders a date resolves through THIS helper so the
+ * layering has exactly one implementation.
+ *
+ * It matters most for islands: `virtual:zudo-doc-route-context` is SSR-only,
+ * so an island has no ambient access to settings. The only channel is zfb's
+ * `<Island>` boundary, which JSON-stringifies the wrapper's props into
+ * `data-props`. Resolving here and passing the RESULT keeps the browser free
+ * of a second copy of the precedence rules.
+ *
+ * Results are memoized per locale: a page renders several dated surfaces and
+ * the roles are locale-invariant within one render.
+ */
+export declare function deriveDateFormats(ctx: ChromeContext): (locale: string) => ResolvedDateFormats;
 /** Derive the meta-title composer from the context's site name. */
 export declare function deriveComposeMetaTitle(ctx: ChromeContext): (title: string) => string;
 /** Derive the single-scheme / light-dark CSS-property generators bound to the

package/dist/chrome/derive.js

@@ -31,6 +31,7 @@ import {
   getThemeDefaultMode as getThemeDefaultModeBase
 } from "../nav-data-prep/index.js";
 import { buildSidebarForSection } from "../sidebar-utils/index.js";
+import { resolveDateFormats } from "../date-format-resolve/index.js";
 const GREY_RAMPS = {
   base: [
     "oklch(0.965 0.000 0)",
@@ -68,6 +69,17 @@ function DocHistoryStub(_props) {
 function IslandPassthrough(props) {
   return props.children ?? null;
 }
+function deriveDateFormats(ctx) {
+  const setting = ctx.settings.dateFormat;
+  const cache = /* @__PURE__ */ new Map();
+  return (locale) => {
+    const cached = cache.get(locale);
+    if (cached) return cached;
+    const resolved = resolveDateFormats(setting, locale);
+    cache.set(locale, resolved);
+    return resolved;
+  };
+}
 function deriveComposeMetaTitle(ctx) {
   return createComposeMetaTitle(ctx.settings.siteName);
 }
@@ -293,7 +305,8 @@ function deriveMdxComponents(ctx) {
     groupSatelliteNodes: ctx.groupSatelliteNodes,
     getCategoryOrder: ctx.getCategoryOrder,
     versionedDocsUrl: ctx.versionedDocsUrl,
-    categoryIgnore: ctx.settings.siteTreeNavIgnore
+    categoryIgnore: ctx.settings.siteTreeNavIgnore,
+    dateFormat: ctx.settings.dateFormat
   });
   const NoteTrayIndexWrapper = createNoteTrayIndexWrapper({
     defaultLocale: ctx.defaultLocale,
@@ -312,7 +325,8 @@ function deriveMdxComponents(ctx) {
       locale === ctx.defaultLocale ? `/docs/tags/${encodeURIComponent(tag)}` : `/${locale}/docs/tags/${encodeURIComponent(tag)}`
     ),
     t: (key, locale) => ctx.t(key, locale),
-    versionedDocsUrl: ctx.versionedDocsUrl
+    versionedDocsUrl: ctx.versionedDocsUrl,
+    dateFormat: ctx.settings.dateFormat
   });
   const assetComponentContext = {
     base: ctx.settings.base,
@@ -395,6 +409,7 @@ export {
   deriveBodyEndIslands,
   deriveColorSchemeGenerators,
   deriveComposeMetaTitle,
+  deriveDateFormats,
   deriveDocHistorySlot,
   deriveGetUnavailableVersions,
   deriveInlineVersionSwitcher,

package/dist/chrome-bindings.d.ts

@@ -4,6 +4,7 @@ import type { DocPageNavNode } from "./doc-page-shell/index.js";
 import type { HeadingItem } from "./toc/index.js";
 import type { ChromeHostBindings } from "./factory-context/index.js";
 import type { HeaderRightComponentRegistry } from "./header/types.js";
+import type { ResolvedDateFormats } from "./settings.js";
 /**
  * Props the header passes to the `SearchWidget` slot — the 7 locale-aware
  * strings from `header-with-defaults`'s `<SearchWidget … />` render (via
@@ -36,12 +37,16 @@ export interface BodyEndIslandsSlotProps {
  * Props the chrome passes to the `DocHistory` island slot — matches
  * `DocHistoryProps` (`doc-history/index.tsx`) / `DocHistoryComponent`
  * (`doc-history-area`), rendered as
- * `<DocHistory slug=… locale=… basePath=… />`.
+ * `<DocHistory slug=… locale=… basePath=… displayLocale=… dateFormats=… />`.
  */
 export interface DocHistorySlotProps {
     slug: string;
     locale?: string;
     basePath?: string;
+    /** Display locale for revision dates — NOT the storage-path `locale` (#4073). */
+    displayLocale?: string;
+    /** Per-role date patterns resolved for `displayLocale` at SSR (#4075). */
+    dateFormats?: ResolvedDateFormats;
 }
 /**
  * Props the chrome passes to the `DesignTokenPanelBootstrap` slot — NONE. It is

package/dist/compiled.css

@@ -2155,6 +2155,11 @@
     max-width: 52.5rem;
   }
 }
+.lg\:flex-1 {
+  @media (width >= 1024px) {
+    flex: 1;
+  }
+}
 .lg\:grid-cols-3 {
   @media (width >= 1024px) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -2342,6 +2347,29 @@
   --radius-DEFAULT: 0.25rem;
   --radius-lg: 0.5rem;
   --radius-full: 9999px;
+  --color-zd-bg: var(--zd-bg);
+  --color-zd-fg: var(--zd-fg);
+  --color-zd-sel-bg: var(--zd-selection-bg);
+  --color-zd-sel-fg: var(--zd-selection-fg);
+  --color-zd-surface: var(--zd-surface);
+  --color-zd-muted: var(--zd-muted);
+  --color-zd-accent: var(--zd-accent);
+  --color-zd-accent-hover: var(--zd-accent-hover);
+  --color-zd-code-bg: var(--zd-code-bg);
+  --color-zd-code-fg: var(--zd-code-fg);
+  --color-zd-success: var(--zd-success);
+  --color-zd-danger: var(--zd-danger);
+  --color-zd-warning: var(--zd-warning);
+  --color-zd-info: var(--zd-info);
+  --color-zd-overlay: #000;
+  --color-zd-image-overlay-bg: var(--zd-image-overlay-bg);
+  --color-zd-image-overlay-fg: var(--zd-image-overlay-fg);
+  --color-zd-chat-user-bg: var(--zd-chat-user-bg);
+  --color-zd-chat-user-text: var(--zd-chat-user-text);
+  --color-zd-chat-assistant-bg: var(--zd-chat-assistant-bg);
+  --color-zd-chat-assistant-text: var(--zd-chat-assistant-text);
+  --color-zd-matched-keyword-bg: var(--zd-matched-keyword-bg);
+  --color-zd-matched-keyword-fg: var(--zd-matched-keyword-fg);
   --z-index-content: 0;
   --z-index-local-1: 1;
   --z-index-local-2: 2;
@@ -2704,6 +2732,73 @@ a.text-accent.underline {
   border-radius: var(--zdc-admonition-radius, 0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0);
   border-left-width: var(--zdc-admonition-border-width, 4px);
 }
+.zd-home-inner {
+  inline-size: 100%;
+  max-inline-size: 60rem;
+  min-inline-size: 0;
+  margin-inline: auto;
+  overflow-wrap: anywhere;
+}
+.zd-home-copy, .zd-home-links {
+  min-inline-size: 0;
+}
+.zd-home-links {
+  overflow-wrap: anywhere;
+}
+.zd-home-rule {
+  inline-size: 100%;
+  margin-block: var(--spacing-vsp-xl);
+  margin-inline: 0;
+  border: 0;
+  border-block-start: 1px solid var(--color-muted);
+}
+.zd-compact-prose {
+  min-inline-size: 0;
+  text-align: left;
+  font-size: 1rem;
+  line-height: 1.75;
+  overflow-wrap: anywhere;
+}
+.zd-compact-prose > :where(* + *) {
+  margin-top: var(--flow-space, 1rem);
+}
+.zd-compact-prose :where(h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-bold, 700);
+  line-height: 1.4;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.zd-compact-prose :where(h2) {
+  font-size: 1.3rem;
+  --flow-space: 1.75rem;
+}
+.zd-compact-prose :where(h3) {
+  font-size: 1.125rem;
+  --flow-space: 1.5rem;
+}
+.zd-compact-prose :where(h4) {
+  font-size: 1rem;
+  --flow-space: 1.25rem;
+}
+.zd-compact-prose :where(h5, h6) {
+  font-size: .9375rem;
+  --flow-space: 1.25rem;
+}
+.zd-compact-prose > :where(h2, h3, h4, h5, h6) + * {
+  margin-top: .5rem;
+}
+.zd-compact-prose > :first-child {
+  margin-top: 0;
+}
+.zd-compact-prose :where(pre) {
+  max-inline-size: 100%;
+  overflow-x: auto;
+}
+.zd-compact-prose :where(img) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
 .page-loading-overlay {
   position: fixed;
   inset: 0;

package/dist/config.d.ts

@@ -67,7 +67,7 @@ import type { ZfbConfig, BundleConfig } from "@takazudo/zfb/config";
 import type { ZodType } from "zod";
 import type { DirectiveVocabulary, PresetTranslations, PresetTagVocabularyEntry } from "./preset.js";
 import type { ColorScheme } from "./color-scheme-utils.js";
-import type { Settings, ColorModeConfig, LocaleConfig, MetaTagsConfig, SiteHeadConfig, TagPlacement, TagGovernanceMode, VersionConfig, FooterConfig, HeaderNavItem, HeaderRightItem, HomeConfig, AssetViewerIndexingConfig, FrontmatterPreviewConfig, BodyFootUtilAreaConfig, HtmlPreviewConfig, FaviconConfig } from "./settings.js";
+import type { Settings, ColorModeConfig, LocaleConfig, MetaTagsConfig, SiteHeadConfig, TagPlacement, TagGovernanceMode, VersionConfig, FooterConfig, HeaderNavItem, HeaderRightItem, HomeConfig, AssetViewerIndexingConfig, FrontmatterPreviewConfig, BodyFootUtilAreaConfig, HtmlPreviewConfig, FaviconConfig, DateFormatSetting } from "./settings.js";
 /** The `settings.claudeResources` block (or `false` when disabled). */
 type ClaudeResourcesConfig = {
     claudeDir: string;
@@ -143,7 +143,7 @@ export interface ZudoDocConfig {
     /**
      * Package-owned home-page layout. Set `wide: true` to let the category grid
      * fill most of the viewport on both `/` and locale home routes.
-     * @default { wide: false }
+     * @default { wide: false, introMarkdown: "", sitemapHeading: "" }
      */
     home?: HomeConfig;
     /**
@@ -174,6 +174,18 @@ export interface ZudoDocConfig {
      * @default "getting-started"
      */
     entryDocSlug?: string;
+    /**
+     * Date-display format. `"locale"` keeps today's `Intl`-based rendering; a
+     * token pattern string (e.g. `"YYYY-MM-DD"`) sets the `full` role only; a
+     * `DateFormatConfig` object sets roles (`full`/`monthDay`/`year`/
+     * `yearMonth`/`numericMonthDay`) — and per-locale overrides — individually.
+     * This is a top-level field, so a supplied object REPLACES the default
+     * wholesale (shallow merge, not deep-merged) — see `zudoDoc()`'s merge note
+     * above; harmless here since the resolver fills every omitted role with
+     * `"locale"`.
+     * @default "locale"
+     */
+    dateFormat?: DateFormatSetting;
     /**
      * Default locale code (unprefixed routes).
      * @default "en"

package/dist/config.js

@@ -45,11 +45,12 @@ const DEFAULT_SETTINGS = {
   favicon: void 0,
   base: "/",
   trailingSlash: false,
-  home: { wide: false },
+  home: { wide: false, introMarkdown: "", sitemapHeading: "" },
   siteTreeNavIgnore: [],
   minifyHtml: true,
   docsDir: "src/content/docs",
   entryDocSlug: "getting-started",
+  dateFormat: "locale",
   defaultLocale: "en",
   locales: {},
   mermaid: true,

package/dist/content.css

@@ -533,3 +533,58 @@ a.text-accent.underline {
 }
 
 /* END --zdc-* component tokens */
+
+/* Compact homepage Markdown uses the same non-heading components and tokens.
+ * Shared width primitive is also available to the home identity group. */
+.zd-home-inner {
+  inline-size: 100%;
+  max-inline-size: 60rem;
+  min-inline-size: 0;
+  margin-inline: auto;
+  overflow-wrap: anywhere;
+}
+
+.zd-home-copy,
+.zd-home-links {
+  min-inline-size: 0;
+}
+
+.zd-home-links {
+  overflow-wrap: anywhere;
+}
+
+.zd-home-rule {
+  inline-size: 100%;
+  margin-block: var(--spacing-vsp-xl);
+  margin-inline: 0;
+  border: 0;
+  border-block-start: 1px solid var(--color-muted);
+}
+
+.zd-compact-prose {
+  min-inline-size: 0;
+  text-align: left;
+  font-size: 1rem;
+  line-height: 1.75;
+  overflow-wrap: anywhere;
+}
+
+.zd-compact-prose > :where(* + *) {
+  margin-top: var(--flow-space, 1rem);
+}
+
+.zd-compact-prose :where(h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-bold, 700);
+  line-height: 1.4;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.zd-compact-prose :where(h2) { font-size: 1.3rem; --flow-space: 1.75rem; }
+.zd-compact-prose :where(h3) { font-size: 1.125rem; --flow-space: 1.5rem; }
+.zd-compact-prose :where(h4) { font-size: 1rem; --flow-space: 1.25rem; }
+.zd-compact-prose :where(h5, h6) { font-size: .9375rem; --flow-space: 1.25rem; }
+.zd-compact-prose > :where(h2, h3, h4, h5, h6) + * { margin-top: .5rem; }
+.zd-compact-prose > :first-child { margin-top: 0; }
+.zd-compact-prose :where(pre) { max-inline-size: 100%; overflow-x: auto; }
+.zd-compact-prose :where(img) { max-inline-size: 100%; block-size: auto; }

package/dist/date-format-resolve/index.d.ts

@@ -0,0 +1,10 @@
+import type { DateFormatSetting, ResolvedDateFormats } from "../settings.js";
+/**
+ * Resolve a `dateFormat` setting into every role's pattern for one locale.
+ *
+ * Precedence per role: `locales[locale][role]` → top-level `[role]` →
+ * `"locale"`. `undefined` input (the setting is optional) resolves to every
+ * role defaulting to `"locale"`. A bare pattern string normalises to `{ full:
+ * <pattern> }` before the same layering applies.
+ */
+export declare function resolveDateFormats(setting: DateFormatSetting | undefined, locale: string): ResolvedDateFormats;

package/dist/date-format-resolve/index.js

@@ -0,0 +1,22 @@
+const DATE_FORMAT_ROLE_PRESENCE = {
+  full: true,
+  monthDay: true,
+  year: true,
+  yearMonth: true,
+  numericMonthDay: true
+};
+const DATE_FORMAT_ROLE_KEYS = Object.keys(
+  DATE_FORMAT_ROLE_PRESENCE
+);
+function resolveDateFormats(setting, locale) {
+  const topLevelRoles = setting === void 0 ? {} : typeof setting === "string" ? { full: setting } : setting;
+  const localeRoles = setting !== void 0 && typeof setting !== "string" ? setting.locales?.[locale] : void 0;
+  const resolved = {};
+  for (const role of DATE_FORMAT_ROLE_KEYS) {
+    resolved[role] = localeRoles?.[role] ?? topLevelRoles[role] ?? "locale";
+  }
+  return resolved;
+}
+export {
+  resolveDateFormats
+};

package/dist/doc-content-header/index.js

@@ -3,6 +3,7 @@ import { FrontmatterPreview } from "../metainfo/index.js";
 import { createDocMetainfoArea } from "../doc-metainfo-area/index.js";
 import { createDocTagsArea } from "../doc-tags-area/index.js";
 import { assertChromeContext } from "../chrome/assert-chrome-context.js";
+import { deriveDateFormats } from "../chrome/derive.js";
 import { formatDate } from "../format-date/index.js";
 function createDocContentHeader(ctx) {
   assertChromeContext(ctx, "createDocContentHeader");
@@ -12,6 +13,7 @@ function createDocContentHeader(ctx) {
   const docContentHeaderExtras = ctx.hostBindings.docContentHeaderExtras;
   const DocMetainfoArea = createDocMetainfoArea(ctx);
   const DocTagsArea = createDocTagsArea(ctx);
+  const dateFormatsFor = deriveDateFormats(ctx);
   function DocContentHeader({
     entry,
     slug,
@@ -29,9 +31,9 @@ function createDocContentHeader(ctx) {
         version
       }),
       (entry.data.date || entry.data.updated) && /* @__PURE__ */ jsxs("p", { class: "text-caption text-muted mb-vsp-md", "data-doc-date": true, children: [
-        entry.data.date ? formatDate(entry.data.date, locale) : null,
+        entry.data.date ? formatDate(entry.data.date, locale, dateFormatsFor(locale).full) : null,
         entry.data.date && entry.data.updated ? " \xB7 " : null,
-        entry.data.updated ? `${t("doc.updated", locale)} ${formatDate(entry.data.updated, locale)}` : null
+        entry.data.updated ? `${t("doc.updated", locale)} ${formatDate(entry.data.updated, locale, dateFormatsFor(locale).full)}` : null
       ] }),
       !version && /* @__PURE__ */ jsx(DocMetainfoArea, { slug, locale, isFallback }),
       !version && /* @__PURE__ */ jsx(DocTagsArea, { slug, locale, tags: entry.data.tags }),

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

@@ -1,9 +1,25 @@
+import type { ResolvedDateFormats } from "../settings.js";
 interface DocHistoryProps {
     slug: string;
     locale?: string;
+    /**
+     * Display locale for revision dates, e.g. "en", "ja". Distinct from
+     * `locale` above, which is a storage-path parameter used only to build
+     * the fetch URL (see doc-history-area's `effectiveHistoryLocale` /
+     * "omitted for the default locale" comment — do not conflate the two).
+     * Populated from the page locale by doc-history-area (#4073).
+     */
+    displayLocale?: string;
+    /**
+     * Per-role date patterns already resolved for `displayLocale` by
+     * `doc-history-area`. Serialized into the island's `data-props` — this
+     * island has no ambient access to settings. Optional and absent-safe:
+     * omitted means every role behaves as `"locale"` (#4075).
+     */
+    dateFormats?: ResolvedDateFormats;
     basePath?: string;
 }
-export declare function DocHistory({ slug, locale, basePath }: DocHistoryProps): import("preact").JSX.Element;
+export declare function DocHistory({ slug, locale, basePath, displayLocale, dateFormats, }: DocHistoryProps): import("preact").JSX.Element;
 export declare namespace DocHistory {
     var displayName: string;
 }

package/dist/doc-history/index.js

@@ -5,6 +5,7 @@ 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";
+import { formatDate } from "../format-date/index.js";
 function Spinner() {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-vsp-xl", children: /* @__PURE__ */ jsx(
     "span",
@@ -176,7 +177,9 @@ function DiffViewer({
 }
 function RevisionList({
   entries,
-  onSelectDiff
+  onSelectDiff,
+  displayLocale,
+  dateFormats
 }) {
   const [selectedA, setSelectedA] = useState(1);
   const [selectedB, setSelectedB] = useState(0);
@@ -213,7 +216,11 @@ function RevisionList({
     /* @__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);
+      const dateStr = formatDate(
+        entry.date,
+        displayLocale ?? "en",
+        dateFormats?.full
+      );
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -256,16 +263,13 @@ function RevisionList({
     }) })
   ] });
 }
-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 = "/" }) {
+function DocHistory({
+  slug,
+  locale,
+  basePath = "/",
+  displayLocale,
+  dateFormats
+}) {
   const [view, setView] = useState("closed");
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -380,7 +384,9 @@ function DocHistory({ slug, locale, basePath = "/" }) {
                     RevisionList,
                     {
                       entries: data.entries,
-                      onSelectDiff: handleSelectDiff
+                      onSelectDiff: handleSelectDiff,
+                      displayLocale,
+                      dateFormats
                     }
                   )
                 }