create-zudo-doc 0.2.20 → 0.2.22

package/templates/base/src/styles/global.css

@@ -42,6 +42,11 @@
    above (line 11); the safelist import above generates the component utilities
    its headings/links/etc. depend on. */
 @import "@takazudo/zudo-doc/content.css";
+/* Non-island feature CSS (code block buttons, syntect light-dark token rule,
+   .zd-html-preview-code, KaTeX, sidebar toggle geometry, view-transition chrome,
+   .ai-chat-md, .zd-enlarge*, .zd-mermaid*).
+   Shipped by @takazudo/zudo-doc as single source of truth. See zudolab/zudo-doc#2331. */
+@import "@takazudo/zudo-doc/features.css";
 /* @slot:global-css:imports */
 
 /* ========================================
@@ -308,234 +313,6 @@ body {
   }
 }
 
-/* ========================================
- * Code block buttons (copy + word wrap)
- * ======================================== */
-
-.code-block-wrapper {
-  position: relative;
-}
-
-pre[class^="syntect-"].word-wrap {
-  overflow-x: hidden;
-}
-
-pre[class^="syntect-"].word-wrap code {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.code-block-sr-announce {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-}
-
-.code-buttons {
-  position: absolute;
-  top: var(--spacing-hsp-sm);
-  right: var(--spacing-hsp-sm);
-  display: flex;
-  gap: var(--spacing-hsp-2xs);
-  opacity: 0;
-  transition: opacity 0.15s;
-  z-index: var(--z-index-local-1);
-}
-
-.code-block-wrapper:hover .code-buttons,
-.code-block-wrapper:focus-within .code-buttons {
-  opacity: 1;
-}
-
-.code-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--spacing-hsp-2xl);
-  height: var(--spacing-hsp-2xl);
-  padding: 0;
-  border: 1px solid var(--color-muted);
-  border-radius: var(--radius-lg);
-  background-color: var(--color-surface);
-  color: var(--color-fg);
-  cursor: pointer;
-  transition:
-    color 0.15s,
-    border-color 0.15s,
-    background-color 0.15s;
-}
-
-.code-btn:hover {
-  color: var(--color-fg);
-  border-color: var(--color-fg);
-}
-
-.code-btn .code-icon {
-  width: var(--spacing-hsp-lg);
-  height: var(--spacing-hsp-lg);
-}
-
-/* Copy: icon swap */
-.code-btn-copy .code-icon-check {
-  display: none;
-}
-.code-btn-copy .code-icon-copy {
-  display: block;
-}
-.code-btn-copy.copied .code-icon-check {
-  display: block;
-  color: var(--color-success);
-}
-.code-btn-copy.copied .code-icon-copy {
-  display: none;
-}
-
-/* Word wrap active state */
-.code-btn-wrap.active {
-  color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-@media (scripting: none) {
-  .code-buttons {
-    display: none;
-  }
-}
-
-/* ========================================
- * Code-block syntax-highlight token color rule
- * ======================================== */
-
-/* Build-time: zfb's Rust pipeline runs SyntectPlugin and emits
- * <pre class="syntect-..."> with inline style="color:#hex" on every token
- * span. The inline hex is the desired token color — this rule must NOT
- * override it (so: NO !important on `color`).
- *
- * Runtime (design-token-tweak panel, when enabled): Shiki re-highlights on
- * demand and emits spans with inline style="--shiki-light:#X;--shiki-dark:#Y"
- * — CSS custom properties only, no `color` declaration — depending on this
- * rule to resolve light-dark(var(--shiki-light), var(--shiki-dark)) to the
- * active theme. Shiki spans have no inline `color`, so the rule applies
- * without needing !important. */
-[data-theme] .shiki,
-[data-theme] .shiki span,
-[data-theme] pre[class^="syntect-"],
-[data-theme] pre[class^="syntect-"] span {
-  color: light-dark(var(--shiki-light), var(--shiki-dark));
-  background-color: light-dark(var(--shiki-light-bg), var(--shiki-dark-bg));
-  font-style: light-dark(
-    var(--shiki-light-font-style, inherit),
-    var(--shiki-dark-font-style, inherit)
-  );
-}
-
-/* HtmlPreview component — Shiki code blocks
- * Token colors inherit from the global [data-theme] .shiki rule above.
- * These rules only adjust layout and background for the preview context. */
-.zd-html-preview-code pre.shiki {
-  margin: 0;
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  overflow-x: auto;
-}
-
-.zd-html-preview-code pre.shiki code {
-  font-family: var(--font-mono);
-  white-space: pre;
-}
-
-/* ========================================
- * Code block line highlighting
- * ======================================== */
-
-/* Line highlighting via {1,3-5} meta syntax.
- * zfb emits data-line-highlight="true" on the <span class="line"> element
- * (verified empirically at next.13). The .highlighted class form is kept for
- * forward-compat in case a future zfb version emits both. */
-pre[class^="syntect-"] .line.highlighted,
-pre[class^="syntect-"] [data-line-highlight="true"] {
-  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
-}
-
-/* Word highlighting via /word/ meta syntax */
-pre[class^="syntect-"] .line .highlighted-word {
-  background-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
-  border-bottom: 1px solid var(--color-accent);
-}
-
-/* ========================================
- * Code block titles
- * ======================================== */
-
-.code-block-container {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.code-block-title {
-  font-family: var(--font-mono);
-  font-size: var(--text-small);
-  color: var(--color-muted);
-  background-color: var(--color-code-bg);
-  border: 1px solid var(--color-muted);
-  border-bottom: none;
-  padding: var(--spacing-vsp-2xs) var(--spacing-hsp-lg);
-}
-
-.code-block-container pre[class^="syntect-"] {
-  margin-top: 0 !important;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-/* ========================================
- * CodeGroup raw-code panels (codeTabs Option A)
- *
- * zfb's :::code-group emits <CodeGroup tabs={[...]}> with one
- * <pre data-lang="…">{RAW text}</pre> child per fence. These <pre> elements
- * are NOT syntect-highlighted (the Rust pipeline doesn't highlight inside
- * code-group fences), so they get no `.syntect-*` class. Apply explicit
- * code-block visual treatment via tokens to match the syntect-highlighted
- * code blocks surrounding them.
- * ======================================== */
-
-.code-group-panel pre[data-lang] {
-  font-family: var(--font-mono);
-  font-size: var(--text-small);
-  line-height: var(--leading-relaxed);
-  background-color: var(--color-code-bg);
-  color: var(--color-code-fg);
-  padding: var(--spacing-vsp-xs) var(--spacing-hsp-lg);
-  overflow-x: auto;
-  border-radius: 0 0 var(--radius-DEFAULT) var(--radius-DEFAULT);
-  margin: 0;
-}
-
-/* KaTeX math equations */
-.katex {
-  font-size: 1.1em;
-}
-
-.katex-display {
-  margin: var(--spacing-vsp-md) 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: var(--spacing-vsp-xs) 0;
-}
-
-.katex-display > .katex {
-  white-space: nowrap;
-}
-
-/* Make KaTeX respect our color scheme */
-.katex .base {
-  color: var(--zd-fg);
-}
-
 /* ── Search highlight ── */
 [data-search-results] mark {
   background-color: var(--color-matched-keyword-bg);
@@ -544,30 +321,6 @@ pre[class^="syntect-"] .line .highlighted-word {
   border-radius: 2px;
 }
 
-/* ========================================
- * Page transition animations
- * ======================================== */
-
-@keyframes contentFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-0.75rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes contentFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 /* Version-switcher responsive visibility (moved out of the component to
  * avoid <style>-inside-<div> HTML5 content-model violation; required when
  * the i18nVersion feature ships a <VersionSwitcher> wrapped in
@@ -579,61 +332,6 @@ pre[class^="syntect-"] .line .highlighted-word {
   }
 }
 
-/* ========================================
- * Desktop sidebar toggle (W7A: unconditional — feature gates at runtime)
- * ======================================== */
-
-@media (min-width: 1024px) {
-  #desktop-sidebar {
-    transition:
-      transform var(--zd-transition-slow) ease-in-out,
-      visibility var(--zd-transition-slow);
-  }
-
-  html[data-sidebar-hidden] #desktop-sidebar {
-    transform: translateX(calc(-1 * var(--zd-sidebar-w)));
-    visibility: hidden;
-  }
-
-  .zd-sidebar-content-wrapper {
-    transition: margin-left var(--zd-transition-slow) ease-in-out;
-  }
-
-  html[data-sidebar-hidden] .zd-sidebar-content-wrapper {
-    margin-left: 0;
-  }
-
-  /* When hidden via the toggle, narrow the content band to the
-   * hide_sidebar frontmatter width so it centers (the flex parent already
-   * applies justify-content: center) instead of leaving a dead gap where
-   * the sidebar was. 80rem must match the `max-w-[80rem]` hide_sidebar
-   * branch in doc-layout.tsx. These rules are unlayered, so they win over
-   * the Tailwind `max-w-[clamp(...)]` utility (utilities layer). (#2002) */
-  .zd-doc-content-band {
-    transition: max-width var(--zd-transition-slow) ease-in-out;
-  }
-
-  html[data-sidebar-hidden] .zd-doc-content-band {
-    max-width: 80rem;
-  }
-}
-
-/* Sidebar toggle button — left position uses CSS variable, needs global rule */
-@media (min-width: 1024px) {
-  .zd-desktop-sidebar-toggle {
-    left: var(--zd-sidebar-w);
-  }
-
-  html[data-sidebar-hidden] .zd-desktop-sidebar-toggle {
-    left: 0;
-  }
-}
-
-/* The SPA-swap flash guard (`data-sidebar-no-transition`) was removed once
- * doc-layout adopted <ClientRouter preserveHtmlAttrs={["data-sidebar-hidden",
- * ...]} /> (zfb-runtime >= 0.1.0-next.52): the attribute now survives the swap
- * before paint, so no sidebar geometry transition fires mid-swap. */
-
 /* ── Find-in-page highlight (W7A: unconditional — Tauri feature gates at runtime) ── */
 .find-match {
   background-color: color-mix(in oklch, var(--color-warning) 40%, transparent);
@@ -645,276 +343,4 @@ pre[class^="syntect-"] .line .highlighted-word {
   outline: 2px solid color-mix(in oklch, var(--color-warning) 90%, transparent);
 }
 
-/* ========================================
- * Image enlarge (.zd-enlargeable) — W7A: unconditional, runtime-gated
- * ======================================== */
-
-.zd-enlargeable {
-  position: relative;
-  display: block;
-  margin-inline: 0;
-  margin-block-end: 0;
-  border: 1px solid transparent;
-  transition: border-color var(--default-transition-duration);
-}
-
-/* Eligible images (expand-btn visible): the entire image becomes the click target.
- * Show a subtle border as the interactivity affordance, accent on hover. */
-.zd-enlargeable:has(.zd-enlarge-btn:not([hidden])) {
-  border-color: var(--color-muted);
-  cursor: pointer;
-}
-
-.zd-enlargeable:has(.zd-enlarge-btn:not([hidden])):hover {
-  border-color: var(--color-accent);
-}
-
-.zd-enlargeable img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-.zd-enlarge-btn {
-  position: absolute;
-  top: var(--spacing-image-overlay-inset);
-  right: var(--spacing-image-overlay-inset);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-image-overlay-inset);
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  z-index: var(--z-index-local-1);
-  transition: opacity var(--default-transition-duration);
-}
-
-.zd-enlarge-btn::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: color-mix(in oklch, var(--color-image-overlay-bg) 80%, transparent);
-  z-index: var(--z-index-local-1);
-}
-
-.zd-enlarge-btn > svg {
-  position: relative;
-  z-index: var(--z-index-local-2);
-  width: var(--spacing-icon-sm);
-  height: var(--spacing-icon-sm);
-  color: var(--color-image-overlay-fg);
-  fill: currentColor;
-}
-
-.zd-enlarge-btn:hover {
-  opacity: 0.8;
-}
-
-.zd-enlarge-btn[hidden] {
-  display: none !important;
-}
-
-dialog.zd-enlarge-dialog::backdrop {
-  background: color-mix(in oklch, var(--color-overlay) 80%, transparent);
-}
-
-/* Close button is positioned to the VIEWPORT corner (not the dialog) so it
- * stays visually distinct against any image, regardless of the dialog's size.
- * This relies on the dialog being transform-free (see DIALOG_STYLE in
- * image-enlarge.tsx) — a transform on the dialog would re-anchor this fixed
- * button to the dialog corner. */
-.zd-enlarge-dialog-close {
-  position: fixed;
-  top: 4px;
-  right: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-image-overlay-inset);
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  z-index: var(--z-index-local-1);
-  transition: opacity var(--default-transition-duration);
-}
-
-.zd-enlarge-dialog-close:hover {
-  opacity: 0.8;
-}
-
-.zd-enlarge-dialog-close::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: color-mix(in oklch, var(--color-image-overlay-bg) 80%, transparent);
-  z-index: var(--z-index-local-1);
-}
-
-.zd-enlarge-dialog-close > svg {
-  position: relative;
-  z-index: var(--z-index-local-2);
-  width: var(--spacing-icon-lg);
-  height: var(--spacing-icon-lg);
-  color: var(--color-image-overlay-fg);
-  fill: currentColor;
-}
-
-/* Wide viewport: ~2× larger close button to read clearly against any image. */
-@media (min-width: 1024px) {
-  .zd-enlarge-dialog-close {
-    top: 10px;
-    right: 10px;
-  }
-
-  .zd-enlarge-dialog-close > svg {
-    width: calc(var(--spacing-icon-lg) * 2);
-    height: calc(var(--spacing-icon-lg) * 2);
-  }
-}
-
-/* ========================================
- * Mermaid enlarge (.zd-mermaid-enlargeable) — issue #2176 / #2178
- *
- * Unlike images (SSR-wrapped in figure.zd-enlargeable), mermaid diagrams render
- * client-side, so the mermaid-enlarge island injects the `.zd-enlarge-btn` into
- * each rendered `.mermaid` container and adds `.zd-mermaid-enlargeable` (which
- * makes the container position:relative so the button anchors to it). The
- * button + close-button visuals are SHARED with image-enlarge above
- * (`.zd-enlarge-btn`, `.zd-enlarge-dialog-close`).
- * ======================================== */
-
-.zd-mermaid-enlargeable {
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: var(--radius-DEFAULT);
-  transition: border-color var(--default-transition-duration);
-}
-
-/* The diagram is always enlargeable once the button is injected — show a subtle
- * border affordance, accent on hover (mirrors the image-enlarge affordance). */
-.zd-mermaid-enlargeable:has(.zd-enlarge-btn) {
-  cursor: pointer;
-  border-color: var(--color-muted);
-}
-
-.zd-mermaid-enlargeable:has(.zd-enlarge-btn):hover {
-  border-color: var(--color-accent);
-}
-
-/* Zoom/pan dialog. The `<dialog>` stays transform-free (see DIALOG_STYLE in
- * mermaid-enlarge.tsx); the transform lives on .zd-mermaid-transform. */
-dialog.zd-mermaid-dialog::backdrop {
-  background: color-mix(in oklch, var(--color-overlay) 80%, transparent);
-}
-
-/* Pan viewport — fills the dialog and clips the (possibly zoomed) diagram.
- * touch-action:none so pointer-drag pans on touch without the browser
- * intercepting the gesture for scrolling. */
-.zd-mermaid-viewport {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  touch-action: none;
-}
-
-.zd-mermaid-viewport[data-pan-active] {
-  cursor: grab;
-  /* In pan mode a drag should pan, not select diagram text. Scoped to
-   * [data-pan-active] so text stays selectable when pan mode is off. */
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.zd-mermaid-viewport[data-pan-active]:active {
-  cursor: grabbing;
-}
-
-.zd-mermaid-transform {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  will-change: transform;
-}
-
-/* SVG sizing — fit the cloned mermaid svg inside the dialog like
- * object-fit:contain. The svg fills the viewport box (100% x 100%) and its
- * viewBox content is letterboxed/centered by the default
- * preserveAspectRatio="xMidYMid meet". A TALL diagram (e.g. a state diagram) no
- * longer gets forced to full dialog width with `height:auto` driving the height
- * far past the viewport via its aspect ratio — it now shrinks to fit the height
- * instead. max-width/max-height !important neutralize the inline px sizing
- * mermaid bakes onto the svg (without it the diagram renders tiny). Scoped to
- * .zd-mermaid-transform (the cloned-diagram wrapper) so it does NOT hit the
- * toolbar / close-button icon svgs that also live inside the dialog. */
-.zd-mermaid-transform svg {
-  max-width: 100% !important;
-  max-height: 100% !important;
-  width: 100%;
-  height: 100%;
-}
-
-/* Edge labels (e.g. "Yes"/"No") render inside a tightly-sized <foreignObject>;
- * when the cloned diagram is upscaled to fill the dialog, sub-pixel overflow
- * makes the browser clip the last glyph at the foreignObject's right edge.
- * Letting the foreignObject overflow render keeps the full label visible. */
-.zd-mermaid-transform svg foreignObject {
-  overflow: visible;
-}
-
-/* Toolbar — bottom-right pill of zoom/pan controls (2× sized buttons). */
-.zd-mermaid-toolbar {
-  position: absolute;
-  bottom: var(--spacing-image-overlay-inset);
-  right: var(--spacing-image-overlay-inset);
-  display: flex;
-  gap: var(--spacing-hsp-xs);
-  padding: var(--spacing-hsp-xs);
-  border: 1px solid var(--color-muted);
-  border-radius: var(--radius-DEFAULT);
-  background: color-mix(in oklch, var(--color-surface) 92%, transparent);
-  z-index: var(--z-index-local-2);
-}
-
-.zd-mermaid-tool-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(var(--spacing-icon-lg) * 2);
-  height: calc(var(--spacing-icon-lg) * 2);
-  padding: var(--spacing-vsp-2xs);
-  border: none;
-  border-radius: var(--radius-DEFAULT);
-  background: transparent;
-  color: var(--color-fg);
-  cursor: pointer;
-  transition:
-    background-color var(--default-transition-duration),
-    opacity var(--default-transition-duration);
-}
-
-.zd-mermaid-tool-btn:hover:not([disabled]) {
-  background: color-mix(in oklch, var(--color-muted) 25%, transparent);
-}
-
-.zd-mermaid-tool-btn[aria-pressed="true"] {
-  background: color-mix(in oklch, var(--color-accent) 30%, transparent);
-  color: var(--color-accent);
-}
-
-.zd-mermaid-tool-btn[disabled] {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.zd-mermaid-tool-btn > svg {
-  width: calc(var(--spacing-icon-md) * 2);
-  height: calc(var(--spacing-icon-md) * 2);
-}
-
 /* @slot:global-css:feature-styles */

package/templates/base/src/utils/base.ts

@@ -156,7 +156,7 @@ export function isDefaultLocaleOnlyPath(path: string): boolean {
 }
 
 /** Build a versioned docs URL for the given slug, version, and lang. */
-export function versionedDocsUrl(slug: string, versionSlug: string, lang: Locale = defaultLocale): string {
+export function versionedDocsUrl(slug: string, versionSlug: string, lang: Locale | string = defaultLocale): string {
   const path = lang === defaultLocale
     ? `/v/${versionSlug}/docs/${slug}`
     : `/v/${versionSlug}/${lang}/docs/${slug}`;