create-zudo-doc 0.2.9 → 0.2.11

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

@@ -35,6 +35,14 @@
 
 @import "@takazudo/zudo-doc/safelist.css";
 
+/* Content typography (`.zd-content` rules + admonitions + mermaid layout).
+   Shipped by @takazudo/zudo-doc as the single source of truth — do not inline
+   these rules here (they used to live here and drifted; see
+   zudolab/zudo-doc#2188). The @layer zd-flow order it relies on is declared
+   above (line 11); the safelist import above generates the component utilities
+   its headings/links/etc. depend on. */
+@import "@takazudo/zudo-doc/content.css";
+
 /* ========================================
  * Tailwind v4 content sources
  *
@@ -290,410 +298,6 @@ body {
   }
 }
 
-/* ========================================
- * Content typography (.zd-content)
- *
- * Direct element styling — no prose plugin.
- * Uses :where() for zero specificity (easy to override).
- * Font size pattern inspired by zpaper: paired size + line-height.
- * ======================================== */
-
-.zd-content {
-  color: var(--color-fg);
-  font-size: var(--text-body);
-  line-height: var(--leading-relaxed);
-}
-
-/* ── Flow spacing (vertical rhythm) ── */
-
-/* In the `zd-flow` cascade layer (declared at the top of this file) so the
- * unlayered `tailwindcss/utilities` import wins over it: unlayered declarations
- * always beat layered ones regardless of specificity or source order. Both this
- * rule and a `mt-*` utility have specificity (0,1,0); without the layer this
- * rule comes later in source order and silently kills every `mt-*` on a
- * `.zd-content` direct child. zd-flow sits ABOVE zd-preflight so this rule still
- * beats preflight's `* { margin: 0 }` reset and the .zd-content rhythm is
- * preserved for plain content blocks. The layer is scoped to ONLY this flow rule
- * — every other `.zd-content` author rule (links, code, lists, headings, the
- * `:first-child` reset, etc.) stays unlayered so utilities do NOT flip those.
- * See zudolab/zudo-doc#2082 / #2109. */
-@layer zd-flow {
-  .zd-content > :where(* + *) {
-    margin-top: var(--flow-space, var(--spacing-vsp-md));
-  }
-}
-
-/* ── Headings ── */
-
-.zd-content :where(h2) {
-  font-size: var(--text-title);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--leading-tight);
-  margin-top: var(--spacing-vsp-2xl);
-  margin-bottom: var(--spacing-vsp-xs);
-  padding-top: var(--spacing-vsp-sm);
-  border-top: 3px solid transparent;
-  border-image: linear-gradient(to right, var(--color-fg), transparent) 1;
-}
-
-.zd-content :where(h3) {
-  font-size: var(--text-body);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--leading-snug);
-  margin-top: var(--spacing-vsp-xl);
-  margin-bottom: var(--spacing-vsp-xs);
-  padding-top: var(--spacing-vsp-xs);
-  border-top: 2px solid transparent;
-  border-image: linear-gradient(to right, var(--color-muted), transparent) 1;
-}
-
-.zd-content :where(h4) {
-  font-size: var(--text-body);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--leading-snug);
-  margin-top: var(--spacing-vsp-lg);
-  margin-bottom: var(--spacing-vsp-xs);
-  padding-top: var(--spacing-vsp-xs);
-  border-top: 1px solid transparent;
-  border-image: linear-gradient(to right, var(--color-muted), transparent) 1;
-}
-
-.zd-content :where(h5, h6) {
-  font-size: var(--text-small);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--leading-snug);
-  margin-top: var(--spacing-vsp-md);
-  margin-bottom: var(--spacing-vsp-2xs);
-}
-
-/* ── Heading auto-links ── */
-
-.zd-content :where(h2, h3, h4, h5, h6) .hash-link {
-  text-decoration: none;
-  margin-left: var(--spacing-hsp-sm);
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.zd-content :where(h2, h3, h4, h5, h6) .hash-link::after {
-  content: "#";
-  color: var(--color-accent);
-}
-
-.zd-content :where(h2, h3, h4, h5, h6):hover .hash-link {
-  opacity: 1;
-}
-
-.zd-content :where(h2, h3, h4, h5, h6) .hash-link:focus-visible {
-  opacity: 1;
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-/* Tighten spacing after headings */
-.zd-content :where(h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
-  margin-top: 0;
-}
-
-/* ── Paragraphs ── */
-
-.zd-content :where(p) {
-  margin-top: 0;
-  margin-bottom: var(--spacing-vsp-md);
-}
-
-/* ── Links ── */
-
-.zd-content :where(a:not(.block):not([data-site-nav] *)) {
-  color: var(--color-accent);
-  text-decoration: underline;
-}
-
-.zd-content :where(a:not(.block):not([data-site-nav] *):hover) {
-  color: var(--color-accent-hover);
-}
-
-/* ── Bold / Strong ── */
-
-.zd-content :where(strong) {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-fg);
-}
-
-/* ── Lists ── */
-
-.zd-content :where(ul) {
-  list-style-type: disc;
-  padding-left: var(--spacing-hsp-xl);
-  margin-bottom: var(--spacing-vsp-md);
-}
-
-.zd-content :where(ol) {
-  list-style-type: decimal;
-  padding-left: var(--spacing-hsp-xl);
-  margin-bottom: var(--spacing-vsp-md);
-}
-
-.zd-content :where(li) {
-  margin-bottom: var(--spacing-vsp-xs);
-}
-
-.zd-content :where(li::marker) {
-  color: var(--color-muted);
-}
-
-.zd-content :where(li > ul, li > ol) {
-  margin-top: var(--spacing-vsp-xs);
-  margin-bottom: 0;
-}
-
-/* ── Blockquotes ── */
-
-.zd-content :where(blockquote) {
-  border-left: 3px solid var(--color-muted);
-  padding-left: var(--spacing-hsp-lg);
-  color: var(--color-muted);
-  font-style: italic;
-  margin-bottom: var(--spacing-vsp-md);
-}
-
-.zd-content :where(blockquote p) {
-  margin-bottom: var(--spacing-vsp-xs);
-}
-
-/* ── Inline code ── */
-
-.zd-content :where(code:not(pre code)) {
-  font-size: var(--text-small);
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-mono);
-  background-color: var(--color-code-bg);
-  color: var(--color-code-fg);
-  border-radius: var(--radius-DEFAULT);
-  padding: 2px var(--spacing-hsp-xs);
-}
-
-/* ── Code blocks (pre) ── */
-
-.zd-content :where(pre) {
-  font-size: var(--text-small);
-  line-height: var(--leading-relaxed);
-  border: 1px solid var(--color-muted);
-  padding: var(--spacing-vsp-sm) var(--spacing-hsp-lg);
-  margin-bottom: var(--spacing-vsp-md);
-  overflow-x: auto;
-}
-
-.zd-content :where(pre code) {
-  background: transparent;
-  padding: 0;
-  border: none;
-  color: inherit;
-  font-size: inherit;
-}
-
-/* ── Tables ── */
-
-.zd-content :where(table) {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--text-small);
-  margin-bottom: var(--spacing-vsp-md);
-}
-
-.zd-content :where(th),
-.zd-content :where(td) {
-  padding: var(--spacing-vsp-xs) var(--spacing-hsp-md);
-  border-bottom: 1px solid var(--color-muted);
-  overflow-wrap: break-word;
-}
-
-.zd-content :where(th) {
-  font-weight: var(--font-weight-semibold);
-  text-align: left;
-  border-bottom-width: 2px;
-}
-
-/* ── Horizontal rules ── */
-
-.zd-content :where(hr) {
-  border: none;
-  border-top: 1px solid var(--color-muted);
-  margin: var(--spacing-vsp-xl) 0;
-}
-
-/* ── Images ── */
-
-.zd-content :where(img) {
-  max-width: 100%;
-  height: auto;
-}
-
-/* ── Definition lists ── */
-
-.zd-content :where(dt) {
-  font-weight: var(--font-weight-semibold);
-  margin-top: var(--spacing-vsp-md);
-}
-
-.zd-content :where(dd) {
-  padding-left: var(--spacing-hsp-xl);
-  margin-bottom: var(--spacing-vsp-xs);
-}
-
-/* ========================================
- * Admonitions ([data-admonition])
- *
- * Variant→color mapping: note→accent, tip→success, info→info,
- * warning→warning, danger→danger. Background tint uses
- * `color-mix(in srgb, var(--color-X) 12%, var(--color-bg))` for an opaque
- * per-theme tinted backdrop. Class names are dynamic (admonition-${variant})
- * so Tailwind cannot scan them; rules must live here explicitly.
- * See zudolab/zudo-doc#1357 / #1444 / #1456.
- * ======================================== */
-
-[data-admonition] {
-  border-left: 4px solid var(--color-muted);
-  /* Asymmetric padding mirrors the Astro reference: generous top, snug bottom. */
-  padding: var(--spacing-vsp-md) var(--spacing-hsp-lg) var(--spacing-vsp-2xs);
-  background-color: color-mix(in srgb, var(--color-muted) 12%, var(--color-bg));
-  border-radius: 0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0;
-}
-
-.admonition-title {
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--text-small);
-  margin-bottom: var(--spacing-vsp-2xs);
-}
-
-/* Variant icon — emoji rendered via ::before so the stub markup stays
- * variant-agnostic and the icon vocabulary lives next to its color rule. */
-.admonition-title::before {
-  margin-right: var(--spacing-hsp-2xs);
-}
-
-.admonition-body > :first-child {
-  margin-top: 0;
-}
-
-.admonition-body > :last-child {
-  margin-bottom: 0;
-}
-
-[data-admonition="note"],
-.admonition-note {
-  border-left-color: var(--color-accent);
-  background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
-}
-
-[data-admonition="note"] .admonition-title,
-.admonition-note .admonition-title {
-  color: var(--color-accent);
-}
-
-[data-admonition="note"] .admonition-title::before,
-.admonition-note .admonition-title::before {
-  content: "📝";
-}
-
-[data-admonition="tip"],
-.admonition-tip {
-  border-left-color: var(--color-success);
-  background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-bg));
-}
-
-[data-admonition="tip"] .admonition-title,
-.admonition-tip .admonition-title {
-  color: var(--color-success);
-}
-
-[data-admonition="tip"] .admonition-title::before,
-.admonition-tip .admonition-title::before {
-  content: "💡";
-}
-
-[data-admonition="info"],
-.admonition-info {
-  border-left-color: var(--color-info);
-  background-color: color-mix(in srgb, var(--color-info) 12%, var(--color-bg));
-}
-
-[data-admonition="info"] .admonition-title,
-.admonition-info .admonition-title {
-  color: var(--color-info);
-}
-
-[data-admonition="info"] .admonition-title::before,
-.admonition-info .admonition-title::before {
-  content: "ℹ️";
-}
-
-[data-admonition="warning"],
-.admonition-warning {
-  border-left-color: var(--color-warning);
-  background-color: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
-}
-
-[data-admonition="warning"] .admonition-title,
-.admonition-warning .admonition-title {
-  color: var(--color-warning);
-}
-
-[data-admonition="warning"] .admonition-title::before,
-.admonition-warning .admonition-title::before {
-  content: "⚠️";
-}
-
-[data-admonition="danger"],
-.admonition-danger {
-  border-left-color: var(--color-danger);
-  background-color: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg));
-}
-
-[data-admonition="danger"] .admonition-title,
-.admonition-danger .admonition-title {
-  color: var(--color-danger);
-}
-
-[data-admonition="danger"] .admonition-title::before,
-.admonition-danger .admonition-title::before {
-  content: "🚨";
-}
-
-/* github-alerts [!IMPORTANT] → magenta/accent-adjacent (p5 = magenta palette slot) */
-[data-admonition="important"],
-.admonition-important {
-  border-left-color: var(--color-p5);
-  background-color: color-mix(in srgb, var(--color-p5) 12%, var(--color-bg));
-}
-
-[data-admonition="important"] .admonition-title,
-.admonition-important .admonition-title {
-  color: var(--color-p5);
-}
-
-[data-admonition="important"] .admonition-title::before,
-.admonition-important .admonition-title::before {
-  content: "❗";
-}
-
-/* github-alerts [!CAUTION] → danger-adjacent (high severity, distinct from danger/🚨) */
-[data-admonition="caution"],
-.admonition-caution {
-  border-left-color: var(--color-danger);
-  background-color: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg));
-}
-
-[data-admonition="caution"] .admonition-title,
-.admonition-caution .admonition-title {
-  color: var(--color-danger);
-}
-
-[data-admonition="caution"] .admonition-title::before,
-.admonition-caution .admonition-title::before {
-  content: "⛔";
-}
-
 /* ========================================
  * Code block buttons (copy + word wrap)
  * ======================================== */
@@ -901,25 +505,6 @@ pre[class^="syntect-"] .line .highlighted-word {
   margin: 0;
 }
 
-/* ========================================
- * Mermaid diagrams
- * ======================================== */
-
-.zd-content .mermaid {
-  @apply my-vsp-lg flex justify-center;
-}
-
-.zd-content .mermaid svg {
-  max-width: 100%;
-  height: auto;
-  overflow: visible;
-}
-
-/* Prevent mermaid edge labels from clipping text (foreignObject uses overflow:hidden) */
-.zd-content .mermaid foreignObject {
-  overflow: visible;
-}
-
 /* KaTeX math equations */
 .katex {
   font-size: 1.1em;
@@ -1132,6 +717,20 @@ pre[class^="syntect-"] .line .highlighted-word {
   }
 }
 
+/* Suppress sidebar geometry transitions during an SPA swap (#2198).
+ * swapRootAttributes wipes data-sidebar-hidden mid-swap, so without this the
+ * sidebar would animate open (attribute absent) and then animate shut again
+ * when the toggle island restores the attribute on zfb:after-swap — a visible
+ * flash + slide. The island sets data-sidebar-no-transition for the swap
+ * window and removes it (double rAF) after restoring the hidden state, so the
+ * wipe/restore apply instantly and a later user toggle still animates. */
+html[data-sidebar-no-transition] #desktop-sidebar,
+html[data-sidebar-no-transition] .zd-sidebar-content-wrapper,
+html[data-sidebar-no-transition] .zd-doc-content-band,
+html[data-sidebar-no-transition] .zd-desktop-sidebar-toggle {
+  transition: none !important;
+}
+
 /* ── Find-in-page highlight (W7A: unconditional — Tauri feature gates at runtime) ── */
 .find-match {
   background-color: color-mix(in oklch, var(--color-warning) 40%, transparent);
@@ -1271,4 +870,148 @@ dialog.zd-enlarge-dialog::backdrop {
   }
 }
 
+/* ========================================
+ * 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 */