@multiplatform.one/components 7.4.1 → 7.6.0

package/src/charts/charts.spec.tsx

@@ -1,5 +1,11 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset, useChartPalette, type ChartPalette } from "@multiplatform.one/theme";
+import {
+  defaultPreset,
+  Preset,
+  resolveChartPalette,
+  useChartPalette,
+  type ChartPalette,
+} from "@multiplatform.one/theme";
 import { cleanup, fireEvent, screen } from "@testing-library/react";
 import * as React from "react";
 import { Theme } from "tamagui";
@@ -8,6 +14,7 @@ import { AreaChart, LineChart } from "./LineChart";
 import { BarChart } from "./BarChart";
 import { PieChart } from "./PieChart";
 import { Sparkline } from "./Sparkline";
+import { resolveSeriesFills } from "./composeChart";
 import * as ChartExports from "./index";
 import type { ChartDatum } from "./types";
 
@@ -311,6 +318,42 @@ describe("animation knob (A-CONTINUOUS)", () => {
   });
 });
 
+describe("R12 categorical cycle is a third list", () => {
+  it("resolveSeriesFills reads palette.categorical, never preset.tints", () => {
+    const palette = resolveChartPalette({ scheme: "light" });
+    const fills = resolveSeriesFills(
+      [
+        { label: "a", value: 1 },
+        { label: "b", value: 2 },
+        { label: "c", value: 3 },
+      ],
+      palette,
+      { categorical: true },
+    );
+    expect(fills).toEqual(palette.categorical.slice(0, 3));
+    // Tint family is theme names (orange/blue/…); categorical is solids.
+    for (const fill of fills) {
+      expect(defaultPreset.tints).not.toContain(fill);
+    }
+    expect(palette.categorical).not.toEqual(defaultPreset.tints);
+  });
+
+  it("bar categorical marks stay on the palette cycle under a tint theme", () => {
+    const palette: { current?: ChartPalette } = {};
+    renderWithProviders(
+      <Theme name={"orange" as never}>
+        <PaletteProbe into={palette} />
+        <BarChart data={data} width={WIDTH} categorical />
+      </Theme>,
+    );
+    const fills = markRects().map((bar) => bar.getAttribute("fill"));
+    expect(fills).toEqual(palette.current?.categorical.slice(0, data.length));
+    for (const fill of fills) {
+      expect(defaultPreset.tints).not.toContain(fill);
+    }
+  });
+});
+
 describe("charts barrel", () => {
   it("exports the headless core, primitives, and composed charts", () => {
     for (const name of [

package/src/charts/composeChart.ts

@@ -52,6 +52,9 @@ export interface SeriesFillsInput {
  * per-datum `color` > explicit `colors`/`color` props (VALUE IS DATA — pass
  * through untouched) > canonical palette (categorical cycle for categorical
  * data, otherwise the single theme identity for every mark).
+ *
+ * R12: `palette.categorical` is a third list on purpose (distinguishability,
+ * not nest order). Never fold it into `preset.tints`.
  */
 export function resolveSeriesFills(
   data: ChartDatum[],

package/src/charts/useChartTheme.ts

@@ -6,7 +6,9 @@
  * once per chart:
  *
  * - series colors come ONLY from `useChartPalette()` (LC-27) — explicit
- *   data colors pass through untouched at the call sites;
+ *   data colors pass through untouched at the call sites. R12: the
+ *   categorical cycle is a third list (distinguishability), never
+ *   `preset.tints`;
  * - axis/grid/label chrome maps the componentColors roles (border `$color6`,
  *   divider `$color4`, muted text `$color11`) through `useTheme().val`, so
  *   chrome re-anchors under schemes and tints like every other surface;

package/src/code/Code/index.tsx

@@ -39,6 +39,8 @@ export const Code = CodeFrame.styleable((props, ref) => {
       {...props}
       fontFamily="$mono"
       letterSpacing={0}
+      data-code-font="mono"
+      {...({ dataSet: { codeFont: "mono" } } as object)}
     />
   );
 });
@@ -76,6 +78,8 @@ export const CodeInline = CodeInlineFrame.styleable((props, ref) => {
       {...props}
       fontFamily="$mono"
       letterSpacing={0}
+      data-code-font="mono"
+      {...({ dataSet: { codeFont: "mono" } } as object)}
     />
   );
 });

package/src/code/CodeBlock/CodeBlock.copy.spec.tsx

@@ -0,0 +1,108 @@
+import { fireEvent } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { getToasts, resetToasts } from "../../Toast/store";
+import { getFeedback, resetFeedback } from "../../feedback/store";
+import { CodeBlock } from "./index";
+
+vi.mock("../Highlighter", () => ({
+  useShikiTokens: (code: string) => code.split("\n").map((line: string) => [{ content: line }]),
+}));
+
+function copyOf(container: HTMLElement) {
+  return container.querySelector("[aria-label='Copy to clipboard']") as HTMLElement | null;
+}
+
+const SAMPLE = 'export const token = "mpo_live_4f2a…";';
+const writeText = vi.fn();
+
+describe("CodeBlock copy (Input.Button + notify)", () => {
+  beforeEach(() => {
+    writeText.mockReset();
+    writeText.mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      ...(typeof navigator !== "undefined" ? navigator : {}),
+      clipboard: { writeText },
+    });
+    resetToasts();
+    resetFeedback();
+  });
+
+  afterEach(() => {
+    resetToasts();
+    resetFeedback();
+  });
+
+  it("copy is a real tab stop that rings its glyph and stays visible at compact widths", () => {
+    const result = renderWithProviders(<CodeBlock>{SAMPLE}</CodeBlock>);
+    const copy = copyOf(result.container);
+    if (!copy) throw new Error("copy not found");
+    expect(copy.getAttribute("tabindex")).toBe("0");
+    expect(copy.className).toMatch(/mp-chip-dismiss/);
+    expect(copy.querySelector(".mp-chip-dismiss-ring")).not.toBeNull();
+    expect(copy.getAttribute("data-end-cap")).toBe("44");
+    const style = getComputedStyle(copy);
+    expect(style.display).not.toBe("none");
+  });
+
+  it("empty code omits the copy cap", () => {
+    const result = renderWithProviders(<CodeBlock>{""}</CodeBlock>);
+    expect(copyOf(result.container)).toBeNull();
+  });
+
+  it("disableCopy omits the copy cap", () => {
+    const result = renderWithProviders(<CodeBlock disableCopy>{SAMPLE}</CodeBlock>);
+    expect(copyOf(result.container)).toBeNull();
+  });
+
+  it("end-cap tracks size while code text stays knob-immune (LC-07)", () => {
+    const small = renderWithProviders(
+      <Preset cascade={false} overrides={{ bodyFont: "serif", fontWeight: "bold", size: "small" }}>
+        <CodeBlock size="$3">{SAMPLE}</CodeBlock>
+      </Preset>,
+    );
+    const large = renderWithProviders(
+      <Preset cascade={false} overrides={{ bodyFont: "serif", fontWeight: "bold", size: "large" }}>
+        <CodeBlock size="$5">{SAMPLE}</CodeBlock>
+      </Preset>,
+    );
+    expect(copyOf(small.container)?.getAttribute("data-end-cap")).toBe("36");
+    expect(copyOf(large.container)?.getAttribute("data-end-cap")).toBe("52");
+
+    for (const result of [small, large]) {
+      const code = result.container.querySelector("[data-register='code']") as HTMLElement | null;
+      if (!code) throw new Error("code node missing");
+      expect(code.getAttribute("data-register")).toBe("code");
+      const tracking = code.style.letterSpacing || getComputedStyle(code).letterSpacing;
+      expect(tracking === "0px" || tracking === "0" || tracking === "normal").toBe(true);
+      expect(result.container.textContent).toContain("export const token");
+    }
+  });
+
+  it("success confirm is notify() toast Copied to clipboard. and the glyph does not flip", async () => {
+    const result = renderWithProviders(<CodeBlock>{SAMPLE}</CodeBlock>);
+    const copy = copyOf(result.container);
+    if (!copy) throw new Error("copy not found");
+    fireEvent.click(copy);
+    await vi.waitFor(() => expect(getToasts()).toHaveLength(1));
+    expect(getToasts()[0]?.title).toBe("Copied to clipboard.");
+    expect(getToasts()[0]?.intent).toBe("success");
+    expect(getToasts()[0]?.title).not.toMatch(/success/i);
+    expect(getFeedback()).toHaveLength(0);
+    expect(copyOf(result.container)?.getAttribute("aria-label")).toBe("Copy to clipboard");
+  });
+
+  it("copy denied is field-scoped Copy failed. and never a toast", async () => {
+    writeText.mockRejectedValueOnce(new Error("NotAllowedError"));
+    const result = renderWithProviders(<CodeBlock>{SAMPLE}</CodeBlock>);
+    const copy = copyOf(result.container);
+    if (!copy) throw new Error("copy not found");
+    fireEvent.click(copy);
+    await vi.waitFor(() => expect(getFeedback()).toHaveLength(1));
+    expect(getToasts()).toHaveLength(0);
+    expect(getFeedback()[0]?.body).toBe("Copy failed.");
+    expect(getFeedback()[0]?.scope).toBe("field");
+    expect(getFeedback()[0]?.surface).toBe("alert");
+  });
+});

package/src/code/CodeBlock/CodeBlock.spec.tsx

@@ -1,7 +1,18 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { Code } from "../Code";
 import { Pre } from "../Pre";
+import { CodeBlock } from "./index";
+
+vi.mock("../Highlighter", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../Highlighter")>();
+  return {
+    ...actual,
+    useShikiTokens: (code: string) => code.split("\n").map((line) => [{ content: line }]),
+  };
+});
 
 // Test the rendering components directly (Code + Pre) rather than the full
 // CodeBlock which requires heavy dependencies (shiki, linear-gradient, etc.)
@@ -70,3 +81,23 @@ function greet() {
     expect(container.textContent).toContain("function greet()");
   });
 });
+
+describe("CodeBlock", () => {
+  it("keeps the copy action reachable at the 44px press floor", () => {
+    renderWithProviders(<CodeBlock>const x = 1;</CodeBlock>);
+    const button = screen.getByLabelText("Copy to clipboard");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("data-press-min")).toBe(String(MIN_PRESS_TARGET));
+    // Default knob: the glyph-ring end-cap square itself meets the floor
+    // (44). Smaller size steps keep the floor by spilling hitSlop instead
+    // (CodeBlock.copy.spec covers the 36/52 cap geometry).
+    expect(Number(button.getAttribute("data-end-cap"))).toBeGreaterThanOrEqual(MIN_PRESS_TARGET);
+    const style = getComputedStyle(button);
+    expect(style.display).not.toBe("none");
+  });
+
+  it("hides the copy action only when disableCopy is set", () => {
+    renderWithProviders(<CodeBlock disableCopy>const x = 1;</CodeBlock>);
+    expect(screen.queryByLabelText("Copy to clipboard")).toBeNull();
+  });
+});

package/src/code/CodeBlock/index.tsx

@@ -7,21 +7,44 @@
  */
 
 import { LinearGradient } from "@tamagui/linear-gradient";
-import { CheckCircleIcon, ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ClipboardIcon } from "@phosphor-icons/react";
+import {
+  MIN_PRESS_TARGET,
+  isTouchSurface,
+  pressTargetHitSlop,
+  sizeRecipeForToken,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "../../shared/i18n";
 import type { TamaguiElement } from "tamagui";
 import { ScrollView } from "tamagui";
-import { Button, zIndex } from "@multiplatform.one/forms";
-import { Spacer, TooltipSimple, XStack, YStack } from "tamagui";
+import { Button, Input, zIndex } from "@multiplatform.one/forms";
+import { Spacer, XStack, YStack } from "tamagui";
 import { settleMs } from "../../AnimateHeight";
 import { ErrorBoundary } from "../../ErrorBoundary";
+import { NotifyRegion } from "../../feedback/NotifyHost";
+import { copyAndNotify } from "../../feedback/copy";
 import { Code } from "../Code";
 import { HighlightedCode } from "../HighlightedCode";
 import { useShikiTokens } from "../Highlighter";
 import { Pre } from "../Pre";
-import { useClipboard } from "../../hooks/useClipboard";
+
+/** Visible lines before the "show more" clamp (content constraint, LC-18). */
+const VISIBLE_LINES = 22;
+
+/** Code line-height px per size-token stop — clamp/fade derive from this. */
+const lineHeightBySize: Record<string, number> = {
+  $2: 16,
+  $3: 16,
+  $4: 18,
+  $5: 20,
+  $6: 22,
+};
+
+function clampHeightForSize(sizeToken: string): number {
+  return VISIBLE_LINES * (lineHeightBySize[sizeToken] ?? 18);
+}
 
 export interface CodeBlockProps {
   /** The code to highlight */
@@ -56,15 +79,17 @@ export function CodeBlock({
   const codeSize = (size ?? knobProps.sizeToken) as any;
   const codeText = children.trim();
   const tokens = useShikiTokens(codeText, language, theme);
+  const clampHeight = clampHeightForSize(String(codeSize));
+  const fadeHeight = Math.round(clampHeight / 2);
 
   const lines = tokens?.length ?? codeText.split("\n").length;
   const showLineNumbers = propShowLineNumbers ?? lines > 10;
-  const isLong = lines > 22;
+  const isLong = lines > VISIBLE_LINES;
   const [isCutoff, setIsCutoff] = useState(isLong);
   // Reveal tween: "Show more" measures the clamped wrapper's full content
-  // height and tweens maxHeight 400 → measured px on the knob transition
-  // (revealing to intrinsic height cannot tween — the AnimationLab
-  // auto-height defect), then releases the clamp entirely once settled.
+  // height and tweens maxHeight (size-derived) → measured px on the knob
+  // transition (revealing to intrinsic height cannot tween — the
+  // AnimationLab auto-height defect), then releases the clamp once settled.
   const [expandTarget, setExpandTarget] = useState<number | null>(null);
   const clampRef = useRef<TamaguiElement | null>(null);
   const revealTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -80,7 +105,7 @@ export function CodeBlock({
     const fullHeight = typeof node?.scrollHeight === "number" ? node.scrollHeight : null;
     // No tween possible (reduced motion / animation=none, native — the RN
     // driver applies layout props directly — or nothing to grow): reveal now.
-    if (!transition || fullHeight == null || fullHeight <= 400) {
+    if (!transition || fullHeight == null || fullHeight <= clampHeight) {
       setIsCutoff(false);
       return;
     }
@@ -93,7 +118,14 @@ export function CodeBlock({
     }, settleMs(transition));
   };
   const clamped = isCutoff || expandTarget != null;
-  const { hasCopied, hasCopyFailed, onCopy } = useClipboard(codeText);
+  // Copy is the same Input.Button glyph-ring cap the CopyField/Password
+  // slot uses (LC-16); confirm is notify() and the glyph does not flip
+  // (DG-FB-01 — the D-copyfield verdict replaces TooltipSimple + icon-swap).
+  const showCopy = Boolean(codeText) && !disableCopy;
+  const activateCopy = () => {
+    void copyAndNotify(codeText);
+  };
+  const capSquare = sizeRecipeForToken(String(codeSize), { touch: isTouchSurface() }).height;
 
   return (
     <YStack position="relative" marginBottom="$4">
@@ -102,7 +134,7 @@ export function CodeBlock({
           ref={clampRef}
           position="relative"
           {...(clamped && {
-            maxHeight: expandTarget ?? 400,
+            maxHeight: expandTarget ?? clampHeight,
             overflow: "hidden" as const,
             ...knobProps.borderRadius,
             ...(transition ? { transition } : {}),
@@ -114,13 +146,13 @@ export function CodeBlock({
               bottom={0}
               left={0}
               right={0}
-              height={200}
+              height={fadeHeight}
               colors={["$backgroundTransparent", "$background"]}
               zIndex={zIndex.localTop}
             >
               <Spacer flex={1} />
               <Button onPress={revealAll} alignSelf="center">
-                Show more
+                {t("Show more")}
               </Button>
               <Spacer size="$4" />
             </LinearGradient>
@@ -138,6 +170,7 @@ export function CodeBlock({
                 borderWidth={0}
                 {...knobProps.panelPadding}
                 size={codeSize}
+                data-register="code"
               >
                 <HighlightedCode
                   tokens={tokens}
@@ -150,33 +183,35 @@ export function CodeBlock({
               </Code>
             </ScrollView>
           </Pre>
-          {!disableCopy && (
-            <XStack position="absolute" top="$3" insetInlineEnd="$3">
-              <TooltipSimple
-                label={
-                  hasCopied
-                    ? t("Copied")
-                    : hasCopyFailed
-                      ? t("Copy failed")
-                      : t("Copy to clipboard")
+          {showCopy && (
+            <XStack position="absolute" top={0} insetInlineEnd={0} zIndex={zIndex.localTop}>
+              <Input.Button
+                glyphRing
+                size={codeSize}
+                type="button"
+                aria-label="Copy to clipboard"
+                data-press-min={MIN_PRESS_TARGET}
+                hitSlop={capSquare < MIN_PRESS_TARGET ? pressTargetHitSlop(capSquare) : undefined}
+                onPress={activateCopy}
+                onKeyDown={
+                  ((e: KeyboardEvent) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      activateCopy();
+                    }
+                  }) as unknown as () => void
                 }
               >
-                <Button
-                  aria-label={t("Copy code to clipboard")}
-                  size="$2"
-                  icon={
-                    hasCopied ? CheckCircleIcon : hasCopyFailed ? WarningCircleIcon : ClipboardIcon
-                  }
-                  onPress={onCopy}
-                  $max-xs={{
-                    display: "none",
-                  }}
-                />
-              </TooltipSimple>
+                <Input.Icon aria-hidden>
+                  <ClipboardIcon />
+                </Input.Icon>
+              </Input.Button>
             </XStack>
           )}
         </YStack>
       </ErrorBoundary>
+      <NotifyRegion scope="field" compact />
     </YStack>
   );
 }

package/src/code/HighlightedCode/index.tsx

@@ -13,6 +13,15 @@ import { Text, isWeb } from "tamagui";
 import type { HighlightLine } from "../Highlighter";
 import { componentColors } from "../../componentColors";
 
+/** Line-number gutter width steps with the size knob (LC-18). */
+const lineNumberGutterBySize: Record<string, number> = {
+  $2: 28,
+  $3: 32,
+  $4: 40,
+  $5: 48,
+  $6: 56,
+};
+
 export interface HighlightedCodeProps {
   /** Array of token lines from shiki */
   tokens: HighlightLine[] | null;
@@ -37,7 +46,12 @@ export function HighlightedCode({
   // Code content scales with the size knob (T-VALUE via sizeToken, LC-18);
   // an explicit fontSize prop from the caller ejects.
   const resolvedFontSize = fontSize ?? knobProps.sizeToken;
+  // Gutter width steps with the type scale so a size-knob flip restyles
+  // it (LC-18). $color8 line-number ink fails AA (SB-M-020); $color11
+  // (text.secondary) is the lowest ramp that stays readable on code surfaces.
+  const gutterWidth = lineNumberGutterBySize[String(resolvedFontSize)] ?? 40;
   // While tokens are loading, show the raw children (plain text fallback)
+  // — geometry rides the surrounding type scale, not a fixed catalog px.
   if (!tokens) {
     return <>{children}</>;
   }
@@ -59,12 +73,15 @@ export function HighlightedCode({
             // fontWeight knobs never restyle code content.
             fontFamily="$mono"
             letterSpacing={0}
+            data-code-font="mono"
+            {...({ dataSet: { codeFont: "mono" } } as object)}
           >
             {showLineNumbers && (
               <Text
                 color={componentColors.text.secondary}
                 fontSize={resolvedFontSize}
-                width={40}
+                width={gutterWidth}
+                data-line-number=""
                 display="inline-flex"
                 // "end" is web-only CSS; native textAlign has no logical values
                 textAlign={(isWeb ? "end" : "right") as any}
@@ -80,6 +97,8 @@ export function HighlightedCode({
                 color={token.color}
                 {...(token.fontStyle && token.fontStyle & 1 ? { fontStyle: "italic" } : {})}
                 {...(token.fontStyle && token.fontStyle & 2 ? { fontWeight: "bold" } : {})}
+                fontFamily="$mono"
+                letterSpacing={0}
                 fontSize={resolvedFontSize}
               >
                 {token.content}

package/src/code/Pre/pre.spec.tsx

@@ -1,4 +1,5 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { describe, expect, it } from "vitest";
 import { Pre } from "./index";
 
@@ -108,6 +109,18 @@ describe("Pre", () => {
     });
   });
 
+  describe("Knobs", () => {
+    it("keeps a pre frame when font knobs change (LC-07)", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ bodyFont: "serif", fontWeight: "bold" }}>
+          <Pre>const x = 1</Pre>
+        </Preset>,
+      );
+      expect(container.querySelector("pre")).toBeTruthy();
+      expect(container.textContent).toContain("const x = 1");
+    });
+  });
+
   describe("Accessibility", () => {
     it("should have proper ARIA attributes", () => {
       const { container } = renderPre({

package/src/code/code.spec.tsx

@@ -1,5 +1,7 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { Code, CodeInline } from "./Code/index";
+import * as CodeExports from "./index";
 
 describe("Code Component", () => {
   it("should render successfully", () => {
@@ -29,4 +31,37 @@ describe("Code Component", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("stays mono with zero tracking under bodyFont/fontWeight knobs (LC-07)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ bodyFont: "serif", headingFont: "serif", fontWeight: "bold" }}>
+        <Code>const x = 10</Code>
+        <CodeInline>inline</CodeInline>
+      </Preset>,
+    );
+    const nodes = Array.from(container.querySelectorAll("code"));
+    expect(nodes.length).toBe(2);
+    expect(container.textContent).toContain("const x = 10");
+    expect(container.textContent).toContain("inline");
+    // Tamagui compiles letterSpacing/fontFamily to atomic classes; happy-dom
+    // computed style is often "". The pin is the class contract + no throw.
+    for (const node of nodes) {
+      expect(node.getAttribute("data-code-font")).toBe("mono");
+    }
+  });
+});
+
+describe("code barrel", () => {
+  it("exports the code family as named exports", () => {
+    for (const name of [
+      "Code",
+      "CodeInline",
+      "CodeBlock",
+      "HighlightedCode",
+      "Pre",
+      "highlightCode",
+    ]) {
+      expect(CodeExports).toHaveProperty(name);
+    }
+  });
 });

package/src/code/highlightedCode.spec.tsx

@@ -6,6 +6,7 @@
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { describe, expect, it } from "vitest";
 import type { HighlightLine } from "./Highlighter";
 import { HighlightedCode } from "./HighlightedCode";
@@ -94,4 +95,29 @@ describe("HighlightedCode", () => {
     // Same token shape, only line 2 highlighted → wrappers must differ in styling.
     expect(lineWrapper("line one").className).not.toBe(lineWrapper("line two").className);
   });
+
+  it("scales the line-number gutter with the size knob (LC-18)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <HighlightedCode tokens={tokens} showLineNumbers />
+      </Preset>,
+    );
+    const gutter = container.querySelector("[data-line-number]") as HTMLElement | null;
+    expect(gutter).toBeTruthy();
+    expect(gutter?.textContent).toMatch(/1/);
+    const width = Number.parseFloat(getComputedStyle(gutter!).width);
+    expect(width).toBeGreaterThanOrEqual(40);
+  });
+
+  it("keeps mono tracking when font knobs change (LC-07)", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ bodyFont: "serif", fontWeight: "bold" }}>
+        <HighlightedCode tokens={tokens} />
+      </Preset>,
+    );
+    const line = container.querySelector("span");
+    expect(line).toBeTruthy();
+    expect(container.textContent).toContain("const");
+    expect(line!.getAttribute("data-code-font")).toBe("mono");
+  });
 });

package/src/componentColors.ts

@@ -8,9 +8,17 @@
  */
 
 export const componentColors = {
-  /** Surface-level backgrounds and borders (cards, panels, containers) */
+  /**
+   * Surface-level backgrounds and borders (cards, panels, containers).
+   *
+   * MPO-19 X5: `background` was `$color2` while `resolveKnobs`' own `surface`
+   * fragment said `$color1` — two answers to "what colour is a surface",
+   * split across two packages. Both now say `$background`, which is also the
+   * token Tamagui addresses and the only one a `surface1`/`surface2`
+   * sub-theme can move.
+   */
   surface: {
-    background: "$color2",
+    background: "$background",
     border: "$color6",
   },
 
@@ -25,7 +33,10 @@ export const componentColors = {
   /** Text color levels. muted sits on the $color11 tier — the lowest ramp
    * step that keeps secondary text AA-readable on color1/2 surfaces. */
   text: {
-    primary: "$color12",
+    // MPO-19 X5: was `$color12`, a second answer to what `resolveKnobs`'
+    // `textAccent: high` already resolves to. `$color` IS the theme's ink,
+    // and it tracks a sub-theme where the raw ramp step does not.
+    primary: "$color",
     secondary: "$color11",
     muted: "$color11",
     subtle: "$color8",
@@ -107,10 +118,12 @@ export const componentColors = {
  * the `$body` scope (Label) but 28px in the `$heading` scope (H2/H4, whose
  * size table is 1.4x) — which put 28px text on this 26px leading (ratio
  * 0.93, wrapped titles overlapped). Fixed values render the same 20px/26px
- * (1.3) in every scope and every headingFont category.
+ * (1.3) in every scope. Family/weight are the subordinate-heading law
+ * (tamagui-rendered-reference.md §9): mono at 400, not Inter 600–800.
  */
 export const sectionHeading = {
+  fontFamily: "$mono",
   fontSize: 20,
   lineHeight: 26,
-  fontWeight: "600",
+  fontWeight: "400",
 } as const;