@dogsbay/ui 0.2.0-beta.12 → 0.2.0-beta.120

package/package.json

@@ -1,25 +1,30 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.120",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
     "./*": "./src/*"
   },
   "dependencies": {
-    "tailwind-variants": "^0.3.0"
+    "tailwind-variants": "^0.3.1"
   },
-  "peerDependencies": {
-    "astro": "^5.0.0 || ^6.0.0",
-    "@dogsbay/primitives": "0.2.0-beta.12",
-    "@dogsbay/elements": "0.2.0-beta.12",
-    "@dogsbay/icons": "0.2.0-beta.12"
+  "devDependencies": {
+    "vitest": "^4.1.10",
+    "@shikijs/transformers": "^4.3.1",
+    "katex": "^0.16.47",
+    "maplibre-gl": "^5.24.0",
+    "shiki": "^4.3.1"
   },
-  "optionalDependencies": {
-    "shiki": "^4.0.0",
-    "@shikijs/transformers": "^4.0.0",
-    "maplibre-gl": "^5.0.0",
-    "katex": "^0.16.0"
+  "peerDependencies": {
+    "astro": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@shikijs/transformers": "^4.3.1",
+    "katex": "^0.16.47",
+    "maplibre-gl": "^5.24.0",
+    "shiki": "^4.3.1",
+    "@dogsbay/elements": "0.2.0-beta.120",
+    "@dogsbay/icons": "0.2.0-beta.120",
+    "@dogsbay/primitives": "0.2.0-beta.120"
   },
   "files": [
     "src",
@@ -34,5 +39,25 @@
   "homepage": "https://github.com/dogsbay/dogsbay/tree/main/packages/ui",
   "bugs": {
     "url": "https://github.com/dogsbay/dogsbay/issues"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    },
+    "@shikijs/transformers": {
+      "optional": true
+    },
+    "katex": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "vitest run"
   }
 }

package/src/alert/CollapsibleAlert.astro

@@ -18,6 +18,11 @@ const wrapper = tv({
   variants: {
     variant: {
       default: "border-border",
+      // `plain` = a disclosure that is CHROME, not an alert: no tint, no
+      // icon, no ARIA role. Used for collapsed context (e.g. the
+      // comparison view's unchanged-section folds), where announcing a
+      // "note" or a live-region "status" would be a lie.
+      plain: "border-border",
       destructive: "border-destructive/50",
       note: "border-note/50",
       abstract: "border-abstract/50",
@@ -41,6 +46,7 @@ type Variant = VariantProps<typeof wrapper>["variant"];
 /** Title bar: stronger tint (~10%) */
 const titleBg: Record<string, string> = {
   default: "bg-muted",
+  plain: "bg-transparent",
   destructive: "bg-destructive/10 text-destructive",
   note: "bg-note/10", abstract: "bg-abstract/10", info: "bg-info/10",
   tip: "bg-tip/10", success: "bg-success/10", question: "bg-question/10",
@@ -51,6 +57,7 @@ const titleBg: Record<string, string> = {
 /** Body: subtle tint (~3%) */
 const bodyBg: Record<string, string> = {
   default: "bg-background",
+  plain: "bg-transparent",
   destructive: "bg-destructive/3",
   note: "bg-note/3", abstract: "bg-abstract/3", info: "bg-info/3",
   tip: "bg-tip/3", success: "bg-success/3", question: "bg-question/3",
@@ -79,14 +86,23 @@ interface Props {
 const { variant = "note", title, open = false, class: className } = Astro.props;
 const v = variant || "note";
 
-const role = contentVariants.has(v) ? "note" : "status";
+// `plain` is chrome — a disclosure, nothing more. No role at all:
+// role="note"/"status" on collapsed context misinforms assistive tech
+// (and "status" would make it a live region).
+const role = v === "plain" ? undefined : contentVariants.has(v) ? "note" : "status";
 const icon = contentVariants.has(v) ? icons[v] : null;
 ---
 
+{/*
+  The role belongs on the CONTENT, not on <details>. A <details> element
+  has an implicit `group` role, and ARIA does not permit overriding it
+  with `note`/`status` — axe flags it (aria-allowed-role), which is
+  exactly what an accessibility pass found on the comparison site's
+  collapsed sections. Moving it to the body keeps the semantics legal.
+*/}
 <details
   class:list={[wrapper({ variant, class: className }), "group/collapsible"]}
   data-variant={variant}
-  role={role}
   open={open}
 >
   <summary class:list={[
@@ -97,7 +113,7 @@ const icon = contentVariants.has(v) ? icons[v] : null;
     <span class="flex-1 text-foreground" data-part="title">{title || v.charAt(0).toUpperCase() + v.slice(1)}</span>
     <span class="shrink-0 text-muted-foreground group-open/collapsible:rotate-180 transition-transform duration-200" set:html={chevronSvg} />
   </summary>
-  <div class:list={["px-4 py-3 text-sm [&_p]:leading-relaxed", bodyBg[v]]}>
+  <div class:list={["px-4 py-3 text-sm [&_p]:leading-relaxed", bodyBg[v]]} role={role}>
     <slot />
   </div>
 </details>

package/src/api-layout/ApiLayout.astro

@@ -12,17 +12,41 @@
  */
 interface Props {
   class?: string;
+  /**
+   * "page" (default): a dedicated API operation page — full-viewport
+   * min-height, sticky code rail.
+   * "embedded": the layout sits inline among prose (imported MDX docs
+   * with several endpoints per page) — natural height, no sticky.
+   */
+  variant?: "page" | "embedded";
 }
 
-const { class: className } = Astro.props;
+const { class: className, variant = "page" } = Astro.props;
+const isPage = variant === "page";
 ---
 
-<div class:list={["grid grid-cols-1 lg:grid-cols-2 lg:min-h-[calc(100vh-3rem)]", className]}>
-  <div class="px-6 py-10 lg:border-r">
+{/* dba-api marks an API-reference region: the generated .docs-prose
+    typography rules skip everything inside it via :not(.dba-api *), so
+    endpoint cards keep their own utility-class typography even when the
+    page body is wrapped in the prose article. */}
+<div
+  class:list={[
+    "dba-api grid grid-cols-1 lg:grid-cols-2",
+    isPage ? "lg:min-h-[calc(100vh-3rem)]" : "my-6 rounded-lg border overflow-hidden",
+    className,
+  ]}
+>
+  <div class:list={[isPage ? "px-6 py-10" : "p-6", "lg:border-r"]}>
     <slot name="description" />
   </div>
   <div class="bg-[var(--api-panel-bg)] text-[var(--api-panel-fg)]">
-    <div class="px-6 py-10 lg:sticky lg:top-12 lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto">
+    <div
+      class:list={[
+        isPage
+          ? "px-6 py-10 lg:sticky lg:top-12 lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto"
+          : "p-6",
+      ]}
+    >
       <slot name="code" />
     </div>
   </div>

package/src/api-layout/ExampleBlock.astro

@@ -55,9 +55,10 @@ const content = code || (json !== undefined && json !== null ? JSON.stringify(js
 
 {content && (
   <div class={className}>
-    <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-white/60">
+    {/* A label, not a heading: on an operation page it followed the h1 (axe heading-order). */}
+    <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-white/60">
       {title}
-    </h3>
+    </p>
     <CodeBlock code={content} lang={resolvedLang} copy={true} />
   </div>
 )}

package/src/api-symbol/api-symbol.css

@@ -1,4 +1,7 @@
-/* API Symbol badges — colored by kind */
+/* API Symbol badges, coloured by kind. Text on its own 20% tint must reach
+   WCAG AA (4.5:1) on the page background: the light colours were L 0.5–0.6
+   (3.2–4.0:1) and are L 0.44 (5.0:1 or more); render-html's
+   tests/contrast.test.ts measures every kind in both modes. */
 .api-badge {
   display: inline-flex;
   align-items: center;
@@ -13,8 +16,8 @@
 }
 
 .api-badge-class {
-  background-color: oklch(0.55 0.18 265 / 0.2);
-  color: oklch(0.55 0.18 265);
+  background-color: oklch(0.44 0.18 265 / 0.2);
+  color: oklch(0.44 0.18 265);
 }
 .dark .api-badge-class {
   background-color: oklch(0.7 0.15 265 / 0.2);
@@ -22,8 +25,8 @@
 }
 
 .api-badge-meth {
-  background-color: oklch(0.55 0.15 155 / 0.2);
-  color: oklch(0.55 0.15 155);
+  background-color: oklch(0.44 0.15 155 / 0.2);
+  color: oklch(0.44 0.15 155);
 }
 .dark .api-badge-meth {
   background-color: oklch(0.7 0.15 155 / 0.2);
@@ -31,8 +34,8 @@
 }
 
 .api-badge-attr {
-  background-color: oklch(0.6 0.15 55 / 0.2);
-  color: oklch(0.6 0.15 55);
+  background-color: oklch(0.44 0.15 55 / 0.2);
+  color: oklch(0.44 0.15 55);
 }
 .dark .api-badge-attr {
   background-color: oklch(0.75 0.15 55 / 0.2);
@@ -40,8 +43,8 @@
 }
 
 .api-badge-func {
-  background-color: oklch(0.55 0.18 330 / 0.2);
-  color: oklch(0.55 0.18 330);
+  background-color: oklch(0.44 0.18 330 / 0.2);
+  color: oklch(0.44 0.18 330);
 }
 .dark .api-badge-func {
   background-color: oklch(0.7 0.15 330 / 0.2);
@@ -49,8 +52,8 @@
 }
 
 .api-badge-module {
-  background-color: oklch(0.5 0.12 200 / 0.2);
-  color: oklch(0.5 0.12 200);
+  background-color: oklch(0.44 0.12 200 / 0.2);
+  color: oklch(0.44 0.12 200);
 }
 .dark .api-badge-module {
   background-color: oklch(0.65 0.12 200 / 0.2);

package/src/badge/Badge.astro

@@ -1,17 +1,10 @@
 ---
 import { tv, type VariantProps } from "tailwind-variants";
+import { BADGE_BASE, BADGE_VARIANTS } from "./variants.js";
 
 const badge = tv({
-  base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
-  variants: {
-    variant: {
-      default: "border-transparent bg-primary text-primary-foreground",
-      secondary: "border-transparent bg-secondary text-secondary-foreground",
-      destructive:
-        "border-transparent bg-destructive text-destructive-foreground",
-      outline: "text-foreground",
-    },
-  },
+  base: BADGE_BASE,
+  variants: { variant: BADGE_VARIANTS },
   defaultVariants: {
     variant: "default",
   },

package/src/badge/variants.ts

@@ -0,0 +1,37 @@
+/**
+ * Badge classes, shared by Badge.astro, ContentRenderer and @dogsbay/render-html
+ * (which copies this file with scripts/sync-sources.mjs), so a badge
+ * looks the same however a page is produced.
+ */
+export const BADGE_BASE =
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors";
+
+export const BADGE_VARIANTS = {
+  default: "border-transparent bg-primary text-primary-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+  destructive: "border-transparent bg-destructive text-destructive-foreground",
+  outline: "text-foreground",
+  // Status colours, from the callout palette (`:badge[Beta]{variant="warning"}`).
+  // The TEXT is the accent mixed 60% toward --foreground; the tint keeps the
+  // accent at full strength. The accent used raw measured 1.85-2.6:1 in light
+  // mode (danger 3.3-3.9:1 in dark too), from painted pixels. --foreground is
+  // near-black in light and near-white in dark, so one rule serves both themes
+  // (worst case 4.95:1); a fixed dark colour would fail dark mode. The same
+  // rule as the in-cell admonitions in format-astro's theme-css.ts.
+  // The `color:` hint is required: tailwind-merge 2.x (Badge.astro's tv())
+  // reads a bare text-[... 60% ...] as a FONT SIZE and drops text-xs.
+  // Checked per preset by @dogsbay/render-html tests/contrast.test.ts, and
+  // through tv() by ui tests/badge.test.ts.
+  info: "border-transparent bg-info/15 text-[color:color-mix(in_oklab,var(--info)_60%,var(--foreground))]",
+  success: "border-transparent bg-success/15 text-[color:color-mix(in_oklab,var(--success)_60%,var(--foreground))]",
+  warning: "border-transparent bg-warning/15 text-[color:color-mix(in_oklab,var(--warning)_60%,var(--foreground))]",
+  danger: "border-transparent bg-danger/15 text-[color:color-mix(in_oklab,var(--danger)_60%,var(--foreground))]",
+} as const;
+
+export type BadgeVariant = keyof typeof BADGE_VARIANTS;
+
+/** The class list for a variant; an unknown variant gets the base classes only. */
+export function badgeClass(variant: string | undefined): string {
+  const v = BADGE_VARIANTS[(variant ?? "default") as BadgeVariant];
+  return v ? `${BADGE_BASE} ${v}` : BADGE_BASE;
+}

package/src/code-block/CodeBlock.astro

@@ -21,6 +21,10 @@ interface Props {
   lang?: string;
   /** Optional title displayed in the header bar */
   title?: string;
+  /*
+   * A `caption` slot makes the block a figure: the header bar is its
+   * <figcaption>, showing the caption with the language beside it.
+   */
   /** Show copy button (default: true) */
   copy?: boolean;
   /** Show the header title bar. true = always, false = never, "auto" = only when title prop is set (default: true) */
@@ -42,26 +46,51 @@ const {
   ...rest
 } = Astro.props;
 
+// AsciiDoc/docs language tokens that are not Shiki grammars → the nearest real
+// one, so the block actually highlights (and data-language is meaningful)
+// instead of silently falling back to plaintext. The header still shows the
+// original label (`lang` below), only the highlighter input is aliased. #009.
+const LANG_ALIASES: Record<string, string> = {
+  terminal: "bash",
+};
+const shikiLang = LANG_ALIASES[lang.toLowerCase()] ?? lang.toLowerCase();
+
 // Show header bar based on showTitle prop:
 // - true: show when there's a title or a declared language (default, original behavior)
 // - false: never show
 // - "auto": only show when an explicit title is provided (not lang-only)
+const hasCaption = Astro.slots.has("caption");
+const Wrapper = hasCaption ? "figure" : "div";
+const Header = hasCaption ? "figcaption" : "div";
 const showHeader =
-  showTitle === false ? false
+  hasCaption ? true
+  : showTitle === false ? false
   : showTitle === "auto" ? !!title
   : !!title || lang !== "plaintext";
 // When no header, copy button floats inside the code body
 const floatingCopy = copy && !showHeader;
 ---
 
-<div
-  class={codeBlockWrapper({ class: className })}
+<Wrapper
+  class={codeBlockWrapper({ class: [hasCaption && "m-0", className] })}
   data-component="code-block"
   {...rest}
 >
   {showHeader && (
-    <div class={codeBlockHeader()}>
-      <span class="select-none">{title || lang}</span>
+    <Header class={codeBlockHeader()}>
+      {/*
+        Left: what the code is (caption or filename title), or the language when that is
+        all there is. Right: the language beside the copy button, as secondary detail
+      */}
+      {hasCaption ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="caption"><slot name="caption" /></span>
+      ) : title ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="title">{title}</span>
+      ) : (
+        <span class="select-none">{lang}</span>
+      )}
+      <span class="flex shrink-0 items-center gap-2">
+      {(hasCaption || title) && lang !== "plaintext" && <span class="select-none" data-part="language">{lang}</span>}
       {copy && (
         <button
           class={codeBlockCopy()}
@@ -104,10 +133,11 @@ const floatingCopy = copy && !showHeader;
           </svg>
         </button>
       )}
-    </div>
+      </span>
+    </Header>
   )}
   <div class="relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:px-4 [&_pre]:py-3">
-    <Code code={code} lang={lang.toLowerCase()} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
+    <Code code={code} lang={shikiLang} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
     {floatingCopy && (
       <button
         class:list={[codeBlockCopy(), "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"]}
@@ -126,7 +156,7 @@ const floatingCopy = copy && !showHeader;
       </button>
     )}
   </div>
-</div>
+</Wrapper>
 
 <script>
   function setupCodeBlockCopy() {

package/src/code-rich/CodeRich.astro

@@ -1,6 +1,7 @@
 ---
 import "./code-rich.css";
-import { codeToHtml, type BundledLanguage, type BundledTheme } from "shiki";
+import { stripMarkersForCopy, stripUnprocessableMarkers } from "./markers";
+import { codeToHtml, bundledLanguages, type BundledLanguage, type BundledTheme } from "shiki";
 import {
   transformerNotationDiff,
   transformerNotationHighlight,
@@ -32,6 +33,10 @@ interface Props {
   lang?: string;
   /** Optional title/filename displayed in the header bar */
   title?: string;
+  /*
+   * A `caption` slot makes the block a figure: the header bar is its
+   * <figcaption>, showing the caption with the language beside it.
+   */
   /** Show copy button (default: true) */
   copy?: boolean;
   /** Show line numbers (default: false) */
@@ -44,6 +49,21 @@ interface Props {
   wordHighlights?: string;
   /** Shiki theme */
   theme?: string;
+  /**
+   * Override the copy-button text. Diff-annotated blocks copy the
+   * post-change code only — the default (all lines minus annotation
+   * comments) would paste removed lines into the reader's editor.
+   */
+  copyText?: string;
+  /**
+   * Diff lines by NUMBER (1-based, e.g. "2,5-6") instead of `[!code]`
+   * comment markers. Markers only work in languages whose grammar has
+   * comments — in `plaintext` (or any unknown language) Shiki cannot
+   * recognize them and they render as literal text. Line numbers are
+   * language-independent, so a generated diff never leaks markers.
+   */
+  diffAdd?: string;
+  diffRemove?: string;
   class?: string;
   [key: string]: unknown;
 }
@@ -58,10 +78,28 @@ const {
   highlights,
   wordHighlights,
   theme = "github-dark-default",
+  copyText: copyTextOverride,
+  diffAdd,
+  diffRemove,
   class: className,
   ...rest
 } = Astro.props;
 
+// "2,5-6" → Set{2,5,6}
+const parseLineSpec = (spec?: string): Set<number> => {
+  const out = new Set<number>();
+  for (const part of (spec ?? "").split(",")) {
+    const range = part.trim().match(/^(\d+)(?:-(\d+))?$/);
+    if (!range) continue;
+    const start = Number(range[1]);
+    const end = range[2] ? Number(range[2]) : start;
+    for (let n = start; n <= end; n++) out.add(n);
+  }
+  return out;
+};
+const addLines = parseLineSpec(diffAdd);
+const removeLines = parseLineSpec(diffRemove);
+
 // Build transformers list
 const transformers: ShikiTransformer[] = [
   transformerNotationDiff(),
@@ -71,6 +109,19 @@ const transformers: ShikiTransformer[] = [
   transformerNotationWordHighlight(),
 ];
 
+// Line-number diffs (language-independent — see the prop docs)
+if (addLines.size || removeLines.size) {
+  transformers.push({
+    name: "line-diff",
+    line(node, line) {
+      const kind = addLines.has(line) ? "add" : removeLines.has(line) ? "remove" : null;
+      if (!kind) return;
+      const cls = node.properties.class;
+      node.properties.class = `${Array.isArray(cls) ? cls.join(" ") : (cls ?? "")} diff ${kind}`.trim();
+    },
+  });
+}
+
 // Meta-based highlights: ```ts {1,3-5}
 if (highlights) {
   transformers.push(transformerMetaHighlight());
@@ -136,14 +187,25 @@ let metaStr = "";
 if (highlights) metaStr += `{${highlights}} `;
 if (wordHighlights) metaStr += `/${wordHighlights}/ `;
 
-// Strip annotation comments from the copy text
-const copyText = code
-  .replace(/\s*\/\/\s*\[!code\s[^\]]*\]\s*$/gm, "")
-  .replace(/\s*\/\/\s*![a-z]+.*$/gm, "")
-  .trim();
+// Copy text: explicit override (diff blocks pass the post-change code)
+// or the block's own code — either way every annotation form is
+// stripped (see ./markers.ts).
+const copyText = stripMarkersForCopy(copyTextOverride ?? code);
 
-const html = await codeToHtml(code, {
-  lang: lang.toLowerCase() as BundledLanguage,
+// Unknown languages (package-install, mdx-ish doc tokens) fall back
+// to plaintext instead of throwing — same behavior as CodeBlock's
+// <Code>. The header still shows the declared language label.
+const requestedLang = lang.toLowerCase();
+const isPlainGrammar =
+  !(requestedLang in bundledLanguages) || ["plaintext", "text", "txt", "ansi"].includes(requestedLang);
+const shikiLang = isPlainGrammar ? "plaintext" : requestedLang;
+
+// Markers Shiki cannot process would render as literal text — strip
+// exactly those, leave the rest for the notation transformers.
+const highlightCode = stripUnprocessableMarkers(code, isPlainGrammar);
+
+const html = await codeToHtml(highlightCode, {
+  lang: shikiLang as BundledLanguage,
   themes: {
     light: "github-light-default" as BundledTheme,
     dark: (theme || "github-dark-default") as BundledTheme,
@@ -154,21 +216,36 @@ const html = await codeToHtml(code, {
 });
 
 // Show header bar only when there's a title or a declared language
-const hasLabel = !!title || (lang !== "plaintext");
+const hasCaption = Astro.slots.has("caption");
+const Wrapper = hasCaption ? "figure" : "div";
+const Header = hasCaption ? "figcaption" : "div";
+const hasLabel = hasCaption || !!title || (lang !== "plaintext");
 const showHeader = hasLabel;
 // When no header, copy button floats inside the code body
 const floatingCopy = copy && !showHeader;
 ---
 
-<div
-  class={codeRichWrapper({ class: className })}
+<Wrapper
+  class={codeRichWrapper({ class: [hasCaption && "m-0", className] })}
   data-component="code-rich"
   data-line-numbers={lineNumbers || undefined}
   {...rest}
 >
   {showHeader && (
-    <div class={codeRichHeader()}>
-      <span class="select-none">{title || lang}</span>
+    <Header class={codeRichHeader()}>
+      {/*
+        Left: what the code is (caption or filename title), or the language when that is
+        all there is. Right: the language beside the copy button, as secondary detail
+      */}
+      {hasCaption ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="caption"><slot name="caption" /></span>
+      ) : title ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="title">{title}</span>
+      ) : (
+        <span class="select-none">{lang}</span>
+      )}
+      <span class="flex shrink-0 items-center gap-2">
+      {(hasCaption || title) && lang !== "plaintext" && <span class="select-none" data-part="language">{lang}</span>}
       {copy && (
         <button
           class={codeRichCopy()}
@@ -211,7 +288,8 @@ const floatingCopy = copy && !showHeader;
           </svg>
         </button>
       )}
-    </div>
+      </span>
+    </Header>
   )}
   <div class="code-rich-body relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:!bg-transparent [&_pre]:px-4 [&_pre]:py-3">
     <Fragment set:html={html} />
@@ -233,7 +311,7 @@ const floatingCopy = copy && !showHeader;
       </button>
     )}
   </div>
-</div>
+</Wrapper>
 
 <script>
   function setupCodeRichCopy() {

package/src/code-rich/code-rich.css

@@ -2,7 +2,9 @@
 
 /* ── All lines ────────────────────────────────────────── */
 .code-rich-body .line {
-  display: inline-flex;
+  /* inline-block, not inline-flex: a flex line makes each token span a flex item, and
+     browsers then copy a hand-made selection with a line break between tokens. */
+  display: inline-block;
   width: 100%;
 }
 
@@ -12,7 +14,12 @@
   min-width: 4ch;
   margin-right: 1.5ch;
   text-align: right;
-  color: oklch(0.35 0 0 / 0.7);
+  /* Theme-aware, and NO alpha. This was a fixed dark grey at 70%
+     opacity: fine on a light code background, 1.3:1 against the dark
+     one — line numbers were effectively invisible in dark mode.
+     Opacity compounds it, since it blends toward whatever is behind.
+     --muted-foreground already flips per theme (L 0.45 / 0.708). */
+  color: var(--muted-foreground);
   user-select: none;
   flex-shrink: 0;
 }
@@ -23,6 +30,18 @@
   color: oklch(0.55 0.2 25);
 }
 
+/* Dark mode: the diff gutters sit on TINTED line backgrounds, not on
+   the plain code background, and at L0.55 they measure 2.89:1 (add)
+   and 2.63:1 (remove) there — both well under AA. Light mode is
+   unaffected, so these are overrides rather than a changed base.
+   Raised to L0.72 for headroom over the 4.5:1 floor. */
+.dark .code-rich-body .gutter.add {
+  color: oklch(0.72 0.2 145);
+}
+.dark .code-rich-body .gutter.remove {
+  color: oklch(0.72 0.14 25);
+}
+
 /* ── Diff line backgrounds ────────────────────────────── */
 .code-rich-body .line.diff.add {
   background-color: oklch(0.75 0.18 145 / 0.15);