@dogsbay/format-astro 0.2.0-beta.124 → 0.2.0-beta.126

package/dist/diff-decoration.d.ts

@@ -21,58 +21,15 @@
  * decoration layer is invisible until a DiffTree arrives.
  */
 import type { TreeNode } from "@dogsbay/types";
-/** Structural mirror of @dogsbay/tree-diff's DiffNode fields. */
-export interface DiffMarks {
-    diff?: "added" | "removed" | "changed" | "moved";
-    diffInline?: {
-        op: "eq" | "ins" | "del";
-        text: string;
-    }[];
-    diffPeer?: TreeNode;
-    diffMovedFrom?: string[];
-}
-export declare const diffMarksOf: (node: TreeNode) => DiffMarks;
-export declare function hasDiffMarks(node: TreeNode): boolean;
+export { DIFF_CSS, buildMergedCodeDiff, diffMarksOf, hasDiffMarks, inlineSegmentsToHtml, type DiffMarks, type MergedCodeDiff, } from "@dogsbay/render-html/diff";
 /**
  * Inject attributes into the FIRST opening tag of a rendered
  * snippet. Handles components (`<TableRow`), plain tags (`<p`), and
  * skips leading whitespace/JSX expressions.
  */
 export declare function injectAttrs(rendered: string, attrs: string): string;
-/**
- * Render the merged word-level segments of a changed prose node.
- * Formatting inside changed prose flattens to text in this view —
- * the marks are the content (the unchanged siblings keep their full
- * inline rendering).
- */
-export declare function inlineSegmentsToHtml(segments: NonNullable<DiffMarks["diffInline"]>): string;
-export interface MergedCodeDiff {
-    /** Unified code: unchanged lines, removed lines, added lines. */
-    code: string;
-    /** 1-based line numbers, for CodeRich's diffAdd/diffRemove props. */
-    addLines: number[];
-    removeLines: number[];
-}
-/**
- * Merge two code texts into ONE unified block, reporting the changed
- * lines BY NUMBER rather than by `[!code]` comment markers.
- *
- * Markers were the first design and they leak: Shiki can only strip a
- * marker it recognizes as a comment in the grammar, so in `plaintext`
- * — which every unknown language (`package-install`, doc-tool tokens)
- * falls back to — the marker renders as literal text in the reader's
- * code. Line numbers are language-independent and can't leak.
- *
- * Returns null over the line cap; callers fall back to before/after.
- */
-export declare function buildMergedCodeDiff(oldCode: string, newCode: string): MergedCodeDiff | null;
 /**
  * Decorate one rendered node. `renderPeer` renders the other side of
  * a changed pair through the same serializer (code before/after).
  */
 export declare function decorateDiff(node: TreeNode, rendered: string, renderPeer: (peer: TreeNode) => string): string;
-/**
- * The diff stylesheet the generated site carries — theme-token based,
- * both color modes, no hardcoded palette (key-decisions doctrine).
- */
-export declare const DIFF_CSS = "/* tree-diff decorations \u2014 one DiffTree, rendered by the normal components.\n   Mark styling is GUARDED by html:not([data-diff-hidden]) rather than\n   force-reset under hidden mode: a reset like \"border-left: none\n   !important\" also clobbers a component's OWN border (an added warning\n   callout lost its left edge \u2014 user find, adapters/mysql). Guarded\n   rules simply stop applying, and component styling survives. */\n[data-diff] { position: relative; }\nhtml:not([data-diff-hidden]) [data-diff=\"added\"] {\n  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 12%, transparent);\n  border-left: 3px solid var(--color-success, oklch(0.72 0.19 150));\n  padding-left: 0.75rem;\n}\nhtml:not([data-diff-hidden]) [data-diff=\"removed\"] {\n  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 10%, transparent);\n  border-left: 3px solid var(--color-destructive, oklch(0.64 0.21 25));\n  padding-left: 0.75rem;\n  opacity: 0.75;\n}\nhtml:not([data-diff-hidden]) [data-diff=\"removed\"] :is(p, li, code, pre) { text-decoration: line-through; text-decoration-thickness: 1px; }\nhtml:not([data-diff-hidden]) [data-diff=\"changed\"] {\n  border-left: 3px solid var(--color-warning, oklch(0.8 0.16 85));\n  padding-left: 0.75rem;\n}\nhtml:not([data-diff-hidden]) [data-diff=\"moved\"] {\n  border-left: 3px dashed var(--color-info, oklch(0.7 0.14 240));\n  padding-left: 0.75rem;\n}\nhtml:not([data-diff-hidden]) [data-diff=\"moved\"][data-diff-from]::after {\n  content: \"moved from \" attr(data-diff-from);\n  display: block;\n  font-size: 0.75rem;\n  color: var(--color-muted-foreground, inherit);\n  opacity: 0.8;\n}\n\n/* Explicit \"added\"/\"removed\" label pills straddling the block's top\n   edge. Components with their own chrome (callouts, code blocks)\n   camouflage a tint-only mark \u2014 a green-tinted warning callout reads\n   as a callout variant, not as new content (user feedback,\n   better-auth adapters/mysql). Table rows are excluded (a pill can't\n   straddle a tr); nested marks defer to the outermost label. */\nhtml:not([data-diff-hidden]) [data-diff=\"added\"]:not(tr, th, td)::before,\nhtml:not([data-diff-hidden]) [data-diff=\"removed\"]:not(tr, th, td)::before {\n  position: absolute;\n  top: 0;\n  right: 0.6rem;\n  transform: translateY(-55%);\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  line-height: 1.4;\n  padding: 0 0.5rem;\n  border-radius: 99px;\n  z-index: 1;\n  text-decoration: none;\n}\nhtml:not([data-diff-hidden]) [data-diff=\"added\"]:not(tr, th, td)::before {\n  content: \"added\";\n  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 25%, var(--color-background, Canvas));\n  border: 1px solid color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 45%, transparent);\n}\nhtml:not([data-diff-hidden]) [data-diff=\"removed\"]:not(tr, th, td)::before {\n  content: \"removed\";\n  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 20%, var(--color-background, Canvas));\n  border: 1px solid color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 45%, transparent);\n}\n[data-diff] [data-diff]::before { content: none !important; }\n\n/* Nav change markers (the sidebar is client-rendered from nav.json, so\n   the styles ship here rather than with the component). Same contract as\n   the tab markers: a GLYPH carries the meaning, colour reinforces it,\n   visually-hidden text announces it. */\n.db-nav-mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  margin-left: auto;\n  border-radius: 99px;\n  font-size: 0.75rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--color-muted-foreground, currentColor);\n}\n.db-nav-mark[data-nav-mark=\"added\"] { color: var(--color-success, oklch(0.72 0.19 150)); }\n.db-nav-mark[data-nav-mark=\"changed\"] { color: var(--color-warning, oklch(0.8 0.16 85)); }\n.db-nav-mark[data-nav-mark=\"removed\"] { color: var(--color-destructive, oklch(0.64 0.21 25)); }\n.db-nav-mark[data-nav-mark=\"moved\"] { color: var(--color-info, oklch(0.7 0.14 240)); }\n/* a subtree marker is a hint about descendants, not a claim about this row */\n.db-nav-mark[data-nav-mark-subtree] { opacity: 0.55; }\n/* removed pages get a SECOND non-colour signal */\n/* Belt-and-braces: a subtree mark must never strike through its own row. */\n[data-nav-mark-row=\"removed\"]:not([data-nav-mark-subtree]) { text-decoration: line-through; opacity: 0.7; }\n@media (forced-colors: active) {\n  .db-nav-mark { color: CanvasText; }\n}\n\n/* Which tab changed? A marked panel is invisible until opened, so its\n   trigger carries a marker (the group's bar says \"in here\", the marker\n   says \"this one\"). The marker is a GLYPH, not a colored dot: colour\n   alone fails WCAG 1.4.1 and background-tinted dots vanish entirely in\n   forced-colors mode. Colour reinforces; shape carries the meaning.\n   Visually-hidden text rides along (emitted by the serializer). */\n.db-tab-mark {\n  display: inline-block;\n  margin-left: 0.35rem;\n  font-size: 0.75rem;\n  font-weight: 700;\n  line-height: 1;\n  vertical-align: middle;\n  color: var(--color-muted-foreground, currentColor);\n}\n[data-diff-hidden] .db-tab-mark { display: none; }\n.db-tab-mark[data-diff-tab=\"changed\"] { color: var(--color-warning, oklch(0.8 0.16 85)); }\n.db-tab-mark[data-diff-tab=\"added\"] { color: var(--color-success, oklch(0.72 0.19 150)); }\n.db-tab-mark[data-diff-tab=\"removed\"] { color: var(--color-destructive, oklch(0.64 0.21 25)); }\n.db-tab-mark[data-diff-tab=\"moved\"] { color: var(--color-info, oklch(0.7 0.14 240)); }\n@media (forced-colors: active) {\n  .db-tab-mark { color: CanvasText; }\n}\nins.db-diff-ins {\n  text-decoration: none;\n  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 22%, transparent);\n  border-radius: 2px;\n  padding: 0 1px;\n}\ndel.db-diff-del {\n  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 18%, transparent);\n  border-radius: 2px;\n  padding: 0 1px;\n}\n.db-diff-pair { display: grid; gap: 0.25rem; margin-block: 1rem; }\n.db-diff-pair-label {\n  font-size: 0.7rem;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--color-muted-foreground, inherit);\n  opacity: 0.8;\n}\ntr[data-diff] { border-left-width: 3px; }\n\n/* Folded unchanged sections are CHROME, not content callouts:\n   dashed, dimmed, compact \u2014 visually \"collapsed context\". */\n.db-diff-fold {\n  border: 1px dashed color-mix(in oklch, currentColor 25%, transparent) !important;\n  border-left-width: 1px !important;\n  background: transparent !important;\n  opacity: 0.7;\n  margin-block: 0.5rem !important;\n}\n.db-diff-fold:hover, .db-diff-fold[open] { opacity: 1; }\n.db-diff-fold summary, .db-diff-fold [data-slot=\"trigger\"] {\n  font-size: 0.85rem;\n}\n\n/* The comparison banner at the top of each reader page. */\n.db-diff-banner-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; width: 100%; }\n.db-diff-banner {\n  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n  margin-block-end: 1.5rem;\n  font-size: 0.85rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.4rem 1rem;\n  align-items: center;\n}\n.db-diff-banner .db-chip {\n  display: inline-block;\n  border-radius: 99px;\n  padding: 0.05rem 0.6rem;\n  font-size: 0.75rem;\n  border: 1px solid transparent;\n}\n.db-chip-added { background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 15%, transparent); }\n.db-chip-removed { background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 12%, transparent); }\n.db-chip-changed { background: color-mix(in oklch, var(--color-warning, oklch(0.8 0.16 85)) 15%, transparent); }\n.db-chip-moved { background: color-mix(in oklch, var(--color-info, oklch(0.7 0.14 240)) 12%, transparent); }\n.db-chip-muted { border-color: color-mix(in oklch, currentColor 25%, transparent); opacity: 0.8; }\n\n/* The persistent view-switcher bar (Reader / Docs-ops / Agent):\n   perspectives on ONE comparison \u2014 tabs are links, verification\n   lives in the chrome, the Monitor CTA sits next to the value. */\n.db-cmp-bar {\n  position: sticky;\n  /* BELOW the docs header, not under it: both were sticky at top:0 and\n     the header's higher z-index simply swallowed this bar on scroll \u2014\n     the chrome carrying the trust contract was the chrome that vanished.\n     --db-header-height is declared by DocsLayout (the header sizes itself\n     from the same variable, so they cannot drift). */\n  top: var(--db-header-height, 3.25rem);\n  z-index: 30;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.4rem 0.9rem;\n  align-items: center;\n  padding: 0.5rem 0.9rem;\n  margin-block-end: 1rem;\n  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);\n  border-radius: 8px;\n  background: var(--color-background, Canvas);\n  font-size: 0.8rem;\n}\n.db-cmp-bar .db-chip {\n  display: inline-block;\n  border-radius: 99px;\n  padding: 0.05rem 0.6rem;\n  font-size: 0.75rem;\n  border: 1px solid transparent;\n}\n.db-cmp-bar button.db-chip { cursor: pointer; background: transparent; font: inherit; font-size: 0.75rem; color: inherit; }\n.db-cmp-tabs {\n  display: inline-flex;\n  gap: 0.15rem;\n  border: 1px solid color-mix(in oklch, currentColor 20%, transparent);\n  border-radius: 99px;\n  padding: 0.1rem;\n}\n.db-cmp-tab {\n  padding: 0.1rem 0.7rem;\n  border-radius: 99px;\n  text-decoration: none;\n  color: inherit;\n}\n.db-cmp-tab[aria-current=\"page\"] {\n  background: color-mix(in oklch, currentColor 12%, transparent);\n  font-weight: 600;\n}\n.db-cmp-pairs { position: relative; display: inline-block; }\n.db-cmp-pairs summary { cursor: pointer; }\n.db-cmp-pairs ul {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  margin: 0.25rem 0 0;\n  padding: 0.35rem 0.75rem;\n  list-style: none;\n  background: var(--color-background, Canvas);\n  border: 1px solid color-mix(in oklch, currentColor 20%, transparent);\n  border-radius: 8px;\n  white-space: nowrap;\n  z-index: 40;\n}\n.db-cmp-monitor { text-decoration: none; border-color: color-mix(in oklch, currentColor 30%, transparent) !important; }\n.db-cmp-monitor:hover { background: color-mix(in oklch, currentColor 10%, transparent); }\n\n/* A wholly added/removed PAGE carries one mark around all its content.\n   The per-block tint would be overwhelming at page scale, so page level\n   gets a stronger edge and a much lighter wash \u2014 legible at a glance,\n   still readable as prose. The \"added\"/\"removed\" pill (the ::before on\n   [data-diff]) rides on this wrapper, which is exactly right: it labels\n   the page, once. */\nhtml:not([data-diff-hidden]) [data-diff].db-diff-page {\n  border-left-width: 5px;\n  padding-left: 1rem;\n  padding-block: 0.5rem;\n  border-radius: 0 6px 6px 0;\n}\nhtml:not([data-diff-hidden]) [data-diff=\"added\"].db-diff-page {\n  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 5%, transparent);\n}\nhtml:not([data-diff-hidden]) [data-diff=\"removed\"].db-diff-page {\n  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 5%, transparent);\n  opacity: 1; /* the page is READABLE \u2014 the mark says removed, not the dimming */\n}\n/* \u2026and a removed PAGE is not struck through \u2014 that is for a deleted line,\n   not for a document the reader still needs to read. */\n[data-diff=\"removed\"].db-diff-page :is(p, li, code, pre) { text-decoration: none; }\n\n/* Changed raw HTML: the faithful new render, plus the previous version\n   one click away. Without it a deletion inside opaque markup (a dropped\n   table column) is simply invisible \u2014 the reader is told \"something\n   changed\" and shown no evidence. */\n.db-diff-html-before {\n  margin-block-start: 0.5rem;\n  font-size: 0.8rem;\n  border: 1px dashed color-mix(in oklch, currentColor 25%, transparent);\n  border-radius: 6px;\n  padding: 0.25rem 0.6rem;\n}\n/* Full-strength text: the summary is a CONTROL \u2014 dimming it (opacity or\n   muted-foreground) drops it below 4.5:1 and axe rightly fails it. */\n.db-diff-html-before summary { cursor: pointer; color: inherit; }\n.db-diff-html-before[open] summary { margin-block-end: 0.5rem; }\n[data-diff-hidden] .db-diff-html-before { display: none; }\n\n/* Merged code diffs carry a hidden clean twin (the post-change\n   render); Hide highlights swaps them. */\n.db-diff-code { position: relative; }\n.db-diff-code-clean { display: none; }\n[data-diff-hidden] .db-diff-code-clean { display: block; }\n[data-diff-hidden] .db-diff-code-merged { display: none; }\n\n/* Whitespace-only code edits are still marked (indentation is\n   semantic in YAML/Python/markdown) \u2014 but NAMED, so the reader\n   is not hunting an invisible 3-space shift. */\nhtml:not([data-diff-hidden]) .db-diff-code-ws .db-diff-code-merged::before {\n  content: \"whitespace only\";\n  position: absolute;\n  top: 0;\n  right: 0.6rem;\n  transform: translateY(-55%);\n  z-index: 1;\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  line-height: 1.4;\n  padding: 0 0.5rem;\n  border-radius: 99px;\n  background: color-mix(in oklch, var(--color-warning, oklch(0.8 0.16 85)) 22%, var(--color-background, Canvas));\n  border: 1px solid color-mix(in oklch, var(--color-warning, oklch(0.8 0.16 85)) 45%, transparent);\n}\n\n/* Hide highlights \u2014 read the target version clean. One attribute on\n   <html>: the guarded mark rules above stop applying by themselves;\n   only content that does not exist in the target version (removed\n   blocks, del runs, the \"before\" code side) needs hiding, plus the\n   ins tint. */\n[data-diff-hidden] :is([data-diff=\"removed\"], del.db-diff-del, .db-diff-pair-label) { display: none !important; }\n[data-diff-hidden] ins.db-diff-ins { background: transparent; padding: 0; }\n";

package/dist/diff-decoration.js

@@ -1,8 +1,6 @@
-export const diffMarksOf = (node) => node;
-export function hasDiffMarks(node) {
-    const m = diffMarksOf(node);
-    return Boolean(m.diff || m.diffInline);
-}
+import { diffMarksOf, inlineSegmentsToHtml, mergedCodeNode } from "@dogsbay/render-html/diff";
+// Shared with render-html, which marks the same DiffTree in its HTML
+export { DIFF_CSS, buildMergedCodeDiff, diffMarksOf, hasDiffMarks, inlineSegmentsToHtml, } from "@dogsbay/render-html/diff";
 /**
  * Inject attributes into the FIRST opening tag of a rendered
  * snippet. Handles components (`<TableRow`), plain tags (`<p`), and
@@ -15,103 +13,6 @@ export function injectAttrs(rendered, attrs) {
     const insertAt = m.index + 1 + m[1].length;
     return `${rendered.slice(0, insertAt)} ${attrs}${rendered.slice(insertAt)}`;
 }
-const escapeHtmlText = (s) => s
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/\{/g, "&#123;")
-    .replace(/\}/g, "&#125;");
-/**
- * Render the merged word-level segments of a changed prose node.
- * Formatting inside changed prose flattens to text in this view —
- * the marks are the content (the unchanged siblings keep their full
- * inline rendering).
- */
-export function inlineSegmentsToHtml(segments) {
-    return segments
-        .map((s) => {
-        const text = escapeHtmlText(s.text);
-        if (s.op === "ins")
-            return `<ins class="db-diff-ins">${text}</ins>`;
-        if (s.op === "del")
-            return `<del class="db-diff-del">${text}</del>`;
-        return text;
-    })
-        .join("");
-}
-/** Quadratic-LCS guard, same rationale as tree-diff's word differ. */
-const CODE_DIFF_MAX_LINES = 1500;
-/**
- * Merge two code texts into ONE unified block, reporting the changed
- * lines BY NUMBER rather than by `[!code]` comment markers.
- *
- * Markers were the first design and they leak: Shiki can only strip a
- * marker it recognizes as a comment in the grammar, so in `plaintext`
- * — which every unknown language (`package-install`, doc-tool tokens)
- * falls back to — the marker renders as literal text in the reader's
- * code. Line numbers are language-independent and can't leak.
- *
- * Returns null over the line cap; callers fall back to before/after.
- */
-export function buildMergedCodeDiff(oldCode, newCode) {
-    const a = oldCode.split("\n");
-    const b = newCode.split("\n");
-    if (a.length > CODE_DIFF_MAX_LINES || b.length > CODE_DIFF_MAX_LINES)
-        return null;
-    const m = a.length;
-    const n = b.length;
-    const lcs = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
-    for (let i = m - 1; i >= 0; i--) {
-        for (let j = n - 1; j >= 0; j--) {
-            lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
-        }
-    }
-    const out = [];
-    const addLines = [];
-    const removeLines = [];
-    let i = 0;
-    let j = 0;
-    const emit = (text, kind) => {
-        out.push(text);
-        if (kind === "add")
-            addLines.push(out.length);
-        else if (kind === "remove")
-            removeLines.push(out.length);
-    };
-    while (i < m && j < n) {
-        if (a[i] === b[j]) {
-            emit(b[j]);
-            i++;
-            j++;
-        }
-        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
-            emit(a[i], "remove");
-            i++;
-        }
-        else {
-            emit(b[j], "add");
-            j++;
-        }
-    }
-    while (i < m)
-        emit(a[i++], "remove");
-    while (j < n)
-        emit(b[j++], "add");
-    return { code: out.join("\n"), addLines, removeLines };
-}
-/** [2,3,4,7] → "2-4,7" */
-const toLineSpec = (lines) => {
-    const parts = [];
-    for (let i = 0; i < lines.length;) {
-        let j = i;
-        while (j + 1 < lines.length && lines[j + 1] === lines[j] + 1)
-            j++;
-        parts.push(i === j ? String(lines[i]) : `${lines[i]}-${lines[j]}`);
-        i = j + 1;
-    }
-    return parts.join(",");
-};
-const codeTextOf = (node) => node.props?.code ?? node.html ?? "";
 /**
  * Decorate one rendered node. `renderPeer` renders the other side of
  * a changed pair through the same serializer (code before/after).
@@ -130,26 +31,14 @@ export function decorateDiff(node, rendered, renderPeer) {
     // post-change code only. Falls back to a labeled before/after
     // pair when merging is unsafe (size cap, marker collision).
     if (marks.diff === "changed" && marks.diffPeer && node.type === "code") {
-        const oldCode = codeTextOf(marks.diffPeer);
-        const newCode = codeTextOf(node);
-        const merged = buildMergedCodeDiff(oldCode, newCode);
+        const merged = mergedCodeNode(node);
         if (merged !== null) {
-            const mergedNode = {
-                ...node,
-                html: undefined,
-                props: {
-                    ...node.props,
-                    code: merged.code,
-                    copyText: newCode,
-                    diffAdd: toLineSpec(merged.addLines),
-                    diffRemove: toLineSpec(merged.removeLines),
-                },
-            };
+            const mergedNode = merged.node;
             // Whitespace-only edits stay FULLY marked (indentation is
             // semantic in YAML/Python/markdown — never silently dropped),
             // but they get NAMED: without the label the reader hunts a
             // 3-space shift across two near-identical lines.
-            const wsOnly = oldCode !== newCode && oldCode.replace(/\s+/g, "") === newCode.replace(/\s+/g, "");
+            const wsOnly = merged.whitespaceOnly;
             const cls = `db-diff-code${wsOnly ? " db-diff-code-ws" : ""}`;
             // The clean twin is the already-rendered new side: shiki line
             // spans keep their newlines OUTSIDE the span, so hiding removed
@@ -210,331 +99,3 @@ export function decorateDiff(node, rendered, renderPeer) {
     }
     return injectAttrs(rendered, attrs);
 }
-/**
- * The diff stylesheet the generated site carries — theme-token based,
- * both color modes, no hardcoded palette (key-decisions doctrine).
- */
-export const DIFF_CSS = `/* tree-diff decorations — one DiffTree, rendered by the normal components.
-   Mark styling is GUARDED by html:not([data-diff-hidden]) rather than
-   force-reset under hidden mode: a reset like "border-left: none
-   !important" also clobbers a component's OWN border (an added warning
-   callout lost its left edge — user find, adapters/mysql). Guarded
-   rules simply stop applying, and component styling survives. */
-[data-diff] { position: relative; }
-html:not([data-diff-hidden]) [data-diff="added"] {
-  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 12%, transparent);
-  border-left: 3px solid var(--color-success, oklch(0.72 0.19 150));
-  padding-left: 0.75rem;
-}
-html:not([data-diff-hidden]) [data-diff="removed"] {
-  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 10%, transparent);
-  border-left: 3px solid var(--color-destructive, oklch(0.64 0.21 25));
-  padding-left: 0.75rem;
-  opacity: 0.75;
-}
-html:not([data-diff-hidden]) [data-diff="removed"] :is(p, li, code, pre) { text-decoration: line-through; text-decoration-thickness: 1px; }
-html:not([data-diff-hidden]) [data-diff="changed"] {
-  border-left: 3px solid var(--color-warning, oklch(0.8 0.16 85));
-  padding-left: 0.75rem;
-}
-html:not([data-diff-hidden]) [data-diff="moved"] {
-  border-left: 3px dashed var(--color-info, oklch(0.7 0.14 240));
-  padding-left: 0.75rem;
-}
-html:not([data-diff-hidden]) [data-diff="moved"][data-diff-from]::after {
-  content: "moved from " attr(data-diff-from);
-  display: block;
-  font-size: 0.75rem;
-  color: var(--color-muted-foreground, inherit);
-  opacity: 0.8;
-}
-
-/* Explicit "added"/"removed" label pills straddling the block's top
-   edge. Components with their own chrome (callouts, code blocks)
-   camouflage a tint-only mark — a green-tinted warning callout reads
-   as a callout variant, not as new content (user feedback,
-   better-auth adapters/mysql). Table rows are excluded (a pill can't
-   straddle a tr); nested marks defer to the outermost label. */
-html:not([data-diff-hidden]) [data-diff="added"]:not(tr, th, td)::before,
-html:not([data-diff-hidden]) [data-diff="removed"]:not(tr, th, td)::before {
-  position: absolute;
-  top: 0;
-  right: 0.6rem;
-  transform: translateY(-55%);
-  font-size: 0.65rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 1.4;
-  padding: 0 0.5rem;
-  border-radius: 99px;
-  z-index: 1;
-  text-decoration: none;
-}
-html:not([data-diff-hidden]) [data-diff="added"]:not(tr, th, td)::before {
-  content: "added";
-  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 25%, var(--color-background, Canvas));
-  border: 1px solid color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 45%, transparent);
-}
-html:not([data-diff-hidden]) [data-diff="removed"]:not(tr, th, td)::before {
-  content: "removed";
-  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 20%, var(--color-background, Canvas));
-  border: 1px solid color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 45%, transparent);
-}
-[data-diff] [data-diff]::before { content: none !important; }
-
-/* Nav change markers (the sidebar is client-rendered from nav.json, so
-   the styles ship here rather than with the component). Same contract as
-   the tab markers: a GLYPH carries the meaning, colour reinforces it,
-   visually-hidden text announces it. */
-.db-nav-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  margin-left: auto;
-  border-radius: 99px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-  color: var(--color-muted-foreground, currentColor);
-}
-.db-nav-mark[data-nav-mark="added"] { color: var(--color-success, oklch(0.72 0.19 150)); }
-.db-nav-mark[data-nav-mark="changed"] { color: var(--color-warning, oklch(0.8 0.16 85)); }
-.db-nav-mark[data-nav-mark="removed"] { color: var(--color-destructive, oklch(0.64 0.21 25)); }
-.db-nav-mark[data-nav-mark="moved"] { color: var(--color-info, oklch(0.7 0.14 240)); }
-/* a subtree marker is a hint about descendants, not a claim about this row */
-.db-nav-mark[data-nav-mark-subtree] { opacity: 0.55; }
-/* removed pages get a SECOND non-colour signal */
-/* Belt-and-braces: a subtree mark must never strike through its own row. */
-[data-nav-mark-row="removed"]:not([data-nav-mark-subtree]) { text-decoration: line-through; opacity: 0.7; }
-@media (forced-colors: active) {
-  .db-nav-mark { color: CanvasText; }
-}
-
-/* Which tab changed? A marked panel is invisible until opened, so its
-   trigger carries a marker (the group's bar says "in here", the marker
-   says "this one"). The marker is a GLYPH, not a colored dot: colour
-   alone fails WCAG 1.4.1 and background-tinted dots vanish entirely in
-   forced-colors mode. Colour reinforces; shape carries the meaning.
-   Visually-hidden text rides along (emitted by the serializer). */
-.db-tab-mark {
-  display: inline-block;
-  margin-left: 0.35rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-  vertical-align: middle;
-  color: var(--color-muted-foreground, currentColor);
-}
-[data-diff-hidden] .db-tab-mark { display: none; }
-.db-tab-mark[data-diff-tab="changed"] { color: var(--color-warning, oklch(0.8 0.16 85)); }
-.db-tab-mark[data-diff-tab="added"] { color: var(--color-success, oklch(0.72 0.19 150)); }
-.db-tab-mark[data-diff-tab="removed"] { color: var(--color-destructive, oklch(0.64 0.21 25)); }
-.db-tab-mark[data-diff-tab="moved"] { color: var(--color-info, oklch(0.7 0.14 240)); }
-@media (forced-colors: active) {
-  .db-tab-mark { color: CanvasText; }
-}
-ins.db-diff-ins {
-  text-decoration: none;
-  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 22%, transparent);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-del.db-diff-del {
-  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 18%, transparent);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-.db-diff-pair { display: grid; gap: 0.25rem; margin-block: 1rem; }
-.db-diff-pair-label {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-muted-foreground, inherit);
-  opacity: 0.8;
-}
-tr[data-diff] { border-left-width: 3px; }
-
-/* Folded unchanged sections are CHROME, not content callouts:
-   dashed, dimmed, compact — visually "collapsed context". */
-.db-diff-fold {
-  border: 1px dashed color-mix(in oklch, currentColor 25%, transparent) !important;
-  border-left-width: 1px !important;
-  background: transparent !important;
-  opacity: 0.7;
-  margin-block: 0.5rem !important;
-}
-.db-diff-fold:hover, .db-diff-fold[open] { opacity: 1; }
-.db-diff-fold summary, .db-diff-fold [data-slot="trigger"] {
-  font-size: 0.85rem;
-}
-
-/* The comparison banner at the top of each reader page. */
-.db-diff-banner-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; width: 100%; }
-.db-diff-banner {
-  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  margin-block-end: 1.5rem;
-  font-size: 0.85rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem 1rem;
-  align-items: center;
-}
-.db-diff-banner .db-chip {
-  display: inline-block;
-  border-radius: 99px;
-  padding: 0.05rem 0.6rem;
-  font-size: 0.75rem;
-  border: 1px solid transparent;
-}
-.db-chip-added { background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 15%, transparent); }
-.db-chip-removed { background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 12%, transparent); }
-.db-chip-changed { background: color-mix(in oklch, var(--color-warning, oklch(0.8 0.16 85)) 15%, transparent); }
-.db-chip-moved { background: color-mix(in oklch, var(--color-info, oklch(0.7 0.14 240)) 12%, transparent); }
-.db-chip-muted { border-color: color-mix(in oklch, currentColor 25%, transparent); opacity: 0.8; }
-
-/* The persistent view-switcher bar (Reader / Docs-ops / Agent):
-   perspectives on ONE comparison — tabs are links, verification
-   lives in the chrome, the Monitor CTA sits next to the value. */
-.db-cmp-bar {
-  position: sticky;
-  /* BELOW the docs header, not under it: both were sticky at top:0 and
-     the header's higher z-index simply swallowed this bar on scroll —
-     the chrome carrying the trust contract was the chrome that vanished.
-     --db-header-height is declared by DocsLayout (the header sizes itself
-     from the same variable, so they cannot drift). */
-  top: var(--db-header-height, 3.25rem);
-  z-index: 30;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem 0.9rem;
-  align-items: center;
-  padding: 0.5rem 0.9rem;
-  margin-block-end: 1rem;
-  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);
-  border-radius: 8px;
-  background: var(--color-background, Canvas);
-  font-size: 0.8rem;
-}
-.db-cmp-bar .db-chip {
-  display: inline-block;
-  border-radius: 99px;
-  padding: 0.05rem 0.6rem;
-  font-size: 0.75rem;
-  border: 1px solid transparent;
-}
-.db-cmp-bar button.db-chip { cursor: pointer; background: transparent; font: inherit; font-size: 0.75rem; color: inherit; }
-.db-cmp-tabs {
-  display: inline-flex;
-  gap: 0.15rem;
-  border: 1px solid color-mix(in oklch, currentColor 20%, transparent);
-  border-radius: 99px;
-  padding: 0.1rem;
-}
-.db-cmp-tab {
-  padding: 0.1rem 0.7rem;
-  border-radius: 99px;
-  text-decoration: none;
-  color: inherit;
-}
-.db-cmp-tab[aria-current="page"] {
-  background: color-mix(in oklch, currentColor 12%, transparent);
-  font-weight: 600;
-}
-.db-cmp-pairs { position: relative; display: inline-block; }
-.db-cmp-pairs summary { cursor: pointer; }
-.db-cmp-pairs ul {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin: 0.25rem 0 0;
-  padding: 0.35rem 0.75rem;
-  list-style: none;
-  background: var(--color-background, Canvas);
-  border: 1px solid color-mix(in oklch, currentColor 20%, transparent);
-  border-radius: 8px;
-  white-space: nowrap;
-  z-index: 40;
-}
-.db-cmp-monitor { text-decoration: none; border-color: color-mix(in oklch, currentColor 30%, transparent) !important; }
-.db-cmp-monitor:hover { background: color-mix(in oklch, currentColor 10%, transparent); }
-
-/* A wholly added/removed PAGE carries one mark around all its content.
-   The per-block tint would be overwhelming at page scale, so page level
-   gets a stronger edge and a much lighter wash — legible at a glance,
-   still readable as prose. The "added"/"removed" pill (the ::before on
-   [data-diff]) rides on this wrapper, which is exactly right: it labels
-   the page, once. */
-html:not([data-diff-hidden]) [data-diff].db-diff-page {
-  border-left-width: 5px;
-  padding-left: 1rem;
-  padding-block: 0.5rem;
-  border-radius: 0 6px 6px 0;
-}
-html:not([data-diff-hidden]) [data-diff="added"].db-diff-page {
-  background: color-mix(in oklch, var(--color-success, oklch(0.72 0.19 150)) 5%, transparent);
-}
-html:not([data-diff-hidden]) [data-diff="removed"].db-diff-page {
-  background: color-mix(in oklch, var(--color-destructive, oklch(0.64 0.21 25)) 5%, transparent);
-  opacity: 1; /* the page is READABLE — the mark says removed, not the dimming */
-}
-/* …and a removed PAGE is not struck through — that is for a deleted line,
-   not for a document the reader still needs to read. */
-[data-diff="removed"].db-diff-page :is(p, li, code, pre) { text-decoration: none; }
-
-/* Changed raw HTML: the faithful new render, plus the previous version
-   one click away. Without it a deletion inside opaque markup (a dropped
-   table column) is simply invisible — the reader is told "something
-   changed" and shown no evidence. */
-.db-diff-html-before {
-  margin-block-start: 0.5rem;
-  font-size: 0.8rem;
-  border: 1px dashed color-mix(in oklch, currentColor 25%, transparent);
-  border-radius: 6px;
-  padding: 0.25rem 0.6rem;
-}
-/* Full-strength text: the summary is a CONTROL — dimming it (opacity or
-   muted-foreground) drops it below 4.5:1 and axe rightly fails it. */
-.db-diff-html-before summary { cursor: pointer; color: inherit; }
-.db-diff-html-before[open] summary { margin-block-end: 0.5rem; }
-[data-diff-hidden] .db-diff-html-before { display: none; }
-
-/* Merged code diffs carry a hidden clean twin (the post-change
-   render); Hide highlights swaps them. */
-.db-diff-code { position: relative; }
-.db-diff-code-clean { display: none; }
-[data-diff-hidden] .db-diff-code-clean { display: block; }
-[data-diff-hidden] .db-diff-code-merged { display: none; }
-
-/* Whitespace-only code edits are still marked (indentation is
-   semantic in YAML/Python/markdown) — but NAMED, so the reader
-   is not hunting an invisible 3-space shift. */
-html:not([data-diff-hidden]) .db-diff-code-ws .db-diff-code-merged::before {
-  content: "whitespace only";
-  position: absolute;
-  top: 0;
-  right: 0.6rem;
-  transform: translateY(-55%);
-  z-index: 1;
-  font-size: 0.65rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 1.4;
-  padding: 0 0.5rem;
-  border-radius: 99px;
-  background: color-mix(in oklch, var(--color-warning, oklch(0.8 0.16 85)) 22%, var(--color-background, Canvas));
-  border: 1px solid color-mix(in oklch, var(--color-warning, oklch(0.8 0.16 85)) 45%, transparent);
-}
-
-/* Hide highlights — read the target version clean. One attribute on
-   <html>: the guarded mark rules above stop applying by themselves;
-   only content that does not exist in the target version (removed
-   blocks, del runs, the "before" code side) needs hiding, plus the
-   ins tint. */
-[data-diff-hidden] :is([data-diff="removed"], del.db-diff-del, .db-diff-pair-label) { display: none !important; }
-[data-diff-hidden] ins.db-diff-ins { background: transparent; padding: 0; }
-`;

package/dist/serialize.js

@@ -1,6 +1,7 @@
 import { walkInline, applyTextFlags, renderLeaf, indent, isSafeHref, apiPageLayout, apiSymbolLevels, renderAroundGroup, isDetailsSheet, } from "@dogsbay/serialize-core";
 import { parseInline } from "@dogsbay/format-dogsbay-md";
 import { decorateDiff, hasDiffMarks } from "./diff-decoration.js";
+import { TAB_GLYPH, tabDiffSignal } from "@dogsbay/render-html/diff";
 import { TONE_CLASSES, CARD_TONE_CLASSES, TAB_VARIANTS, THEME_SCOPES, lookup } from "./tone-classes.js";
 import { apiBlockHtml, apiPropertiesHtml } from "./api-markdown.js";
 export { TONE_CLASSES };
@@ -1056,24 +1057,12 @@ function tabsToAstro(node, ctx) {
     // as a colored dot by DIFF_CSS) telling the reader WHICH tab to
     // open. Structural read of @dogsbay/tree-diff marks, same as
     // diff-decoration; unmarked trees are unaffected.
-    const tabDiffSignal = (tab) => {
-        const own = tab.diff;
-        if (own)
-            return own;
-        const deep = (n) => Boolean(n.diff || n.diffInline) || (n.children ?? []).some(deep);
-        return (tab.children ?? []).some(deep) ? "changed" : undefined;
-    };
     // The indicator must not live in COLOUR alone (WCAG 1.4.1), and a
     // background-tinted dot disappears in forced-colors mode. So it is a
     // GLYPH (shape carries the meaning) plus visually-hidden text, so the
     // trigger announces "Astro, changed in this comparison" rather than
-    // relying on a `title` screen readers may never speak.
-    const TAB_GLYPH = {
-        added: "+",
-        changed: "•",
-        removed: "−",
-        moved: "→",
-    };
+    // relying on a `title` screen readers may never speak. (TAB_GLYPH and
+    // tabDiffSignal are shared with render-html.)
     // A variant's class strings are complete (TAB_VARIANTS): TabsList and
     // TabsTrigger merge a `class` over their base with tailwind-variants
     const variant = lookup(TAB_VARIANTS, node.props?.variant);

package/dist/theme-css.js

@@ -98,10 +98,11 @@ export function generateGlobalCss() {
 .docs-prose {
   line-height: 1.7;
 
-  & h1:not(.dba-api *) { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -0.025em; }
-  & h2:not(.dba-api *) { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; line-height: 1.3; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; letter-spacing: -0.015em; }
-  & h3:not(.dba-api *) { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; line-height: 1.4; }
-  & h4:not(.dba-api *) { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
+  /* A heading that is part of a component (a card title: h3.not-prose) keeps the component look */
+  & h1:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -0.025em; }
+  & h2:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; line-height: 1.3; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; letter-spacing: -0.015em; }
+  & h3:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; line-height: 1.4; }
+  & h4:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
 
   & p:not(.dba-api *) { margin-top: 0.75rem; margin-bottom: 0.75rem; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/format-astro",
-  "version": "0.2.0-beta.124",
+  "version": "0.2.0-beta.126",
   "description": "Astro format plugin for Dogsbay — export TreeNode[] to Astro component markup",
   "type": "module",
   "main": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "MIT",
   "dependencies": {
     "markdown-it": "^14.3.0",
-    "@dogsbay/format-dogsbay-md": "0.2.0-beta.124",
-    "@dogsbay/render-html": "0.2.0-beta.124",
-    "@dogsbay/serialize-core": "0.2.0-beta.124",
-    "@dogsbay/site-files": "0.2.0-beta.124",
-    "@dogsbay/types": "0.2.0-beta.124",
-    "@dogsbay/ui": "0.2.0-beta.124"
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.126",
+    "@dogsbay/serialize-core": "0.2.0-beta.126",
+    "@dogsbay/site-files": "0.2.0-beta.126",
+    "@dogsbay/render-html": "0.2.0-beta.126",
+    "@dogsbay/types": "0.2.0-beta.126",
+    "@dogsbay/ui": "0.2.0-beta.126"
   },
   "repository": {
     "type": "git",