@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/hooks/useScrollOverflow.ts

@@ -6,10 +6,22 @@
  * @file useScrollOverflow.ts
  * @input Uses React useRef, useState, useCallback, useEffect
  * @output Exports useScrollOverflow hook for tracking scroll position edges
- * @position Core hook; used by Carousel for fade-edge and button state
+ * @position Core hook; used by Carousel and TabList for fade-edge and button
+ *   state
  *
  * Observes a scroll container and reports whether content overflows at the
- * start, end, or both edges. Updates on scroll and resize.
+ * start, end, or both edges. Updates on every scroll, and on a resize while
+ * the container is rendered: a layout read on an element the browser is not
+ * rendering (an ancestor with `display: none`, or a `content-visibility:
+ * hidden` subtree) either answers zeros or makes the browser lay out that
+ * whole hidden subtree for the answer, so a resize observation delivered for
+ * a hidden container, and the measurement at registration inside one, are
+ * skipped; the hook keeps its last state until the resize observation that
+ * follows the reveal (one frame after it paints). A scroll is measured
+ * whether or not the container is rendered: a scroll of a hidden container
+ * is script's (a selected tab revealed under a hidden panel), its layout is
+ * already the scroll's, and a reveal at the same size brings no resize to
+ * measure it with.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
@@ -27,6 +39,19 @@ export interface ScrollOverflowState {
   hasOverflow: boolean;
 }
 
+/**
+ * Whether the browser is rendering `el`, so a layout read on it answers for a
+ * real box. `checkVisibility()` is false under a `display: none` ancestor and
+ * inside a `content-visibility: hidden` subtree, and it answers without
+ * rendering that subtree. Not `contentVisibilityAuto`: a freshly inserted,
+ * on-screen `content-visibility: auto` section counts as skipped until the
+ * next rendering update, and a strip mounted into one would paint its first
+ * frame unmeasured. A browser without `checkVisibility` measures as before.
+ */
+function isRendered(el: HTMLElement): boolean {
+  return typeof el.checkVisibility !== 'function' || el.checkVisibility();
+}
+
 /**
  * Tracks scroll overflow state for a horizontally scrollable container.
  *
@@ -49,12 +74,7 @@ export function useScrollOverflow() {
     hasOverflow: false,
   });
 
-  const measure = useCallback(() => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-
+  const measureNow = useCallback((el: HTMLElement) => {
     const tolerance = 1;
     const {scrollLeft, scrollWidth, clientWidth} = el;
     const maxScroll = scrollWidth - clientWidth;
@@ -75,22 +95,44 @@ export function useScrollOverflow() {
     });
   }, []);
 
+  // Registration and resize: only a rendered container. A hidden one has no
+  // edges to report, and reading its layout would make the browser render
+  // the hidden subtree it sits in; the resize observation that follows the
+  // reveal measures again.
+  const measure = useCallback(() => {
+    const el = elRef.current;
+    if (el && isRendered(el)) {
+      measureNow(el);
+    }
+  }, [measureNow]);
+
+  // A scroll: measured hidden or not. Script scrolled the hidden container
+  // (its layout is already the scroll's), and a reveal at the same size
+  // brings no resize observation, so this is the read that keeps the edges
+  // right for it.
+  const measureOnScroll = useCallback(() => {
+    const el = elRef.current;
+    if (el) {
+      measureNow(el);
+    }
+  }, [measureNow]);
+
   const scrollRef = useCallback(
     (el: HTMLElement | null) => {
       if (elRef.current) {
         unobserveRef.current?.();
         unobserveRef.current = null;
-        elRef.current.removeEventListener('scroll', measure);
+        elRef.current.removeEventListener('scroll', measureOnScroll);
       }
 
       elRef.current = el;
 
       if (el) {
-        el.addEventListener('scroll', measure, {passive: true});
+        el.addEventListener('scroll', measureOnScroll, {passive: true});
         unobserveRef.current = observeResize(el, measure);
       }
     },
-    [measure],
+    [measure, measureOnScroll],
   );
 
   useEffect(() => {
@@ -98,10 +140,10 @@ export function useScrollOverflow() {
       if (elRef.current) {
         unobserveRef.current?.();
         unobserveRef.current = null;
-        elRef.current.removeEventListener('scroll', measure);
+        elRef.current.removeEventListener('scroll', measureOnScroll);
       }
     };
-  }, [measure]);
+  }, [measureOnScroll]);
 
   return {
     scrollRef,

package/src/hooks/useTreeFocus.test.tsx

@@ -262,6 +262,43 @@ describe('useTreeFocus activation + typeahead', () => {
     expect(screen.getByTestId('c')).toHaveFocus();
   });
 
+  it('typeahead matches whole text for a direct caller, even when an item carries aria-labelledby and the options smuggle the internal flag', () => {
+    function LabelledTree() {
+      // An untyped options object trying to reach the internal flag through
+      // the public hook: it must have no effect.
+      const smuggled = {
+        hasRovingTabIndex: true,
+        matchLabelledBy: true,
+      } as Record<string, unknown>;
+      const {treeRef, handleKeyDown, handleFocus} =
+        useTreeFocus<HTMLUListElement>(smuggled);
+      return (
+        <ul
+          ref={treeRef}
+          role="tree"
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}>
+          <li role="treeitem" tabIndex={0} data-testid="first">
+            First
+          </li>
+          <li
+            role="treeitem"
+            tabIndex={-1}
+            aria-labelledby="lbl"
+            data-testid="labelled">
+            <span>zz</span> <span id="lbl">Budget</span>
+          </li>
+        </ul>
+      );
+    }
+    render(<LabelledTree />);
+    const tree = screen.getByRole('tree');
+    screen.getByTestId('first').focus();
+    // Released behavior: the text content ("zz Budget") is what matches.
+    fireEvent.keyDown(tree, {key: 'z'});
+    expect(screen.getByTestId('labelled')).toHaveFocus();
+  });
+
   it('typeahead cycles through same-letter matches on repeated presses', () => {
     const nodes: Node[] = [
       {id: 'apple', label: 'Apple', level: 1},

package/src/hooks/useTreeFocus.ts

@@ -176,6 +176,28 @@ export interface UseTreeFocusReturn<T extends HTMLElement = HTMLElement> {
   focusLast: () => void;
 }
 
+/**
+ * The text typeahead matches against. With `matchLabelledBy`, the row's
+ * `aria-labelledby` text (the label alone) when it has one; otherwise, and by
+ * default, its text content.
+ */
+function itemLabelText(item: HTMLElement, matchLabelledBy: boolean): string {
+  const labelledBy = matchLabelledBy
+    ? item.getAttribute('aria-labelledby')
+    : null;
+  if (labelledBy != null) {
+    const label = labelledBy
+      .split(/\s+/)
+      .map(id => item.ownerDocument.getElementById(id)?.textContent ?? '')
+      .join(' ')
+      .trim();
+    if (label !== '') {
+      return label;
+    }
+  }
+  return (item.textContent ?? '').trim();
+}
+
 /**
  * Hook for managing roving-tabindex focus + the WAI-ARIA tree keyboard model.
  *
@@ -208,8 +230,38 @@ export interface UseTreeFocusReturn<T extends HTMLElement = HTMLElement> {
  * </ul>
  * ```
  */
+
 export function useTreeFocus<T extends HTMLElement = HTMLElement>(
   options: UseTreeFocusOptions = {},
+): UseTreeFocusReturn<T> {
+  // The flag is pinned off here so an untyped options object cannot smuggle
+  // it through the public hook.
+  return useTreeFocusInternal<T>({...options, matchLabelledBy: false});
+}
+
+/**
+ * Options the package's own components can pass beyond the public hook.
+ *
+ * Not exported from the package: TreeList imports this module directly, so
+ * `UseTreeFocusOptions` stays exactly as released.
+ */
+export type UseTreeFocusInternalOptions = UseTreeFocusOptions & {
+  /**
+   * Match typeahead against the item's `aria-labelledby` text (its label
+   * alone) instead of its whole text content, so start content, a chevron
+   * toggle or a description never takes part. TreeList passes this; the
+   * released text match stays the default for direct callers.
+   * @default false
+   */
+  matchLabelledBy?: boolean;
+};
+
+/**
+ * The implementation behind {@link useTreeFocus}. Not exported from the
+ * package; the public hook calls it without the internal options.
+ */
+export function useTreeFocusInternal<T extends HTMLElement = HTMLElement>(
+  options: UseTreeFocusInternalOptions = {},
 ): UseTreeFocusReturn<T> {
   const {
     itemSelector = '[role="treeitem"]',
@@ -222,6 +274,7 @@ export function useTreeFocus<T extends HTMLElement = HTMLElement>(
     onActivate,
     typeahead = true,
     typeaheadResetMs = DEFAULT_TYPEAHEAD_RESET_MS,
+    matchLabelledBy = false,
     onActiveChange,
     hasRovingTabIndex = false,
   } = options;
@@ -399,14 +452,14 @@ export function useTreeFocus<T extends HTMLElement = HTMLElement>(
       const match = ordered.find(
         item =>
           !itemDisabled(item) &&
-          (item.textContent ?? '').trim().toLowerCase().startsWith(query),
+          itemLabelText(item, matchLabelledBy).toLowerCase().startsWith(query),
       );
       if (match != null) {
         e.preventDefault();
         focusItem(match);
       }
     },
-    [typeaheadResetMs, itemDisabled, focusItem],
+    [typeaheadResetMs, itemDisabled, focusItem, matchLabelledBy],
   );
 
   const handleKeyDown = useCallback(

package/src/i18n/generated-locales/en.generated.ts

@@ -246,6 +246,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.chat.speechRecognition.noSpeechDetected': 'No speech was detected.',
   '@astryx.commandPalette.label': 'Command palette',
   '@astryx.commandPalette.input.placeholder': 'Search…',
+  '@astryx.commandPalette.input.label': 'Search commands',
   '@astryx.commandPalette.list.label': 'Commands',
   '@astryx.contextMenu.label': 'Context menu',
   '@astryx.dateInput.placeholder': 'Select a date',
@@ -353,6 +354,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.numberInput.clearLabel': 'Clear {label}',
   '@astryx.numberInput.decrementLabel': 'Decrement {label}',
   '@astryx.numberInput.incrementLabel': 'Increment {label}',
+  '@astryx.numberInput.invalidNumber': 'Invalid number',
   '@astryx.selector.clearLabel': 'Clear {label}',
   '@astryx.sideNavCollapseButton.expandSidebar': 'Expand sidebar',
   '@astryx.sideNavCollapseButton.collapseSidebar': 'Collapse sidebar',
@@ -386,6 +388,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '{count, number} {count, plural, one {character} other {characters}} remaining',
   '@astryx.textArea.charactersOverLimit':
     '{count, number} {count, plural, one {character} other {characters}} over the limit',
+  '@astryx.inputClearButton.tooltip': 'Clear',
   '@astryx.textInput.clearLabel': 'Clear {label}',
   '@astryx.thumbnail.remove': 'Remove {accessibleName}',
   '@astryx.thumbnail.open': 'Open {accessibleName}',

package/src/i18n/generated-locales/pseudo.generated.ts

@@ -253,6 +253,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '⟦Ñó šþééçĥ ŵàš ðéţéçţéð.⟧',
   '@astryx.commandPalette.label': '⟦Çóɱɱàñð þàłéţţé⟧',
   '@astryx.commandPalette.input.placeholder': '⟦Šéàřçĥ…⟧',
+  '@astryx.commandPalette.input.label': '⟦Šéàřçĥ çóɱɱàñðš⟧',
   '@astryx.commandPalette.list.label': '⟦Çóɱɱàñðš⟧',
   '@astryx.contextMenu.label': '⟦Çóñţéẋţ ɱéñú⟧',
   '@astryx.dateInput.placeholder': '⟦Šéłéçţ à ðàţé⟧',
@@ -360,6 +361,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.numberInput.clearLabel': '⟦Çłéàř {label}⟧',
   '@astryx.numberInput.decrementLabel': '⟦Ðéçřéɱéñţ {label}⟧',
   '@astryx.numberInput.incrementLabel': '⟦Íñçřéɱéñţ {label}⟧',
+  '@astryx.numberInput.invalidNumber': '⟦Íñṽàłíð ñúɱƀéř⟧',
   '@astryx.selector.clearLabel': '⟦Çłéàř {label}⟧',
   '@astryx.sideNavCollapseButton.expandSidebar': '⟦Éẋþàñð šíðéƀàř⟧',
   '@astryx.sideNavCollapseButton.collapseSidebar': '⟦Çółłàþšé šíðéƀàř⟧',
@@ -393,6 +395,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '⟦{count, number} {count, plural, one {character} other {characters}} řéɱàíñíñĝ⟧',
   '@astryx.textArea.charactersOverLimit':
     '⟦{count, number} {count, plural, one {character} other {characters}} óṽéř ţĥé łíɱíţ⟧',
+  '@astryx.inputClearButton.tooltip': '⟦Çłéàř⟧',
   '@astryx.textInput.clearLabel': '⟦Çłéàř {label}⟧',
   '@astryx.thumbnail.remove': '⟦Řéɱóṽé {accessibleName}⟧',
   '@astryx.thumbnail.open': '⟦Óþéñ {accessibleName}⟧',

package/src/reset.a11y.chromium.spec.ts

@@ -72,7 +72,15 @@ test('Chromium keeps every selector the reset writes', async ({page}) => {
   // A forgiving list drops an invalid entry instead of the whole rule, so a
   // dropped pseudo-element shows up as a shorter serialized selector.
   const parsed = await page.evaluate(() => {
-    const layer = document.styleSheets[0].cssRules[0] as CSSLayerBlockRule;
+    // The sheet opens with the `@layer` order statement; the rules live in
+    // the `reset` layer block after it.
+    const layer = [...document.styleSheets[0].cssRules].find(
+      (rule): rule is CSSLayerBlockRule =>
+        rule instanceof CSSLayerBlockRule && rule.name === 'reset',
+    );
+    if (layer == null) {
+      throw new Error('reset.css has no @layer reset block');
+    }
     return [...layer.cssRules].map(rule => (rule as CSSStyleRule).selectorText);
   });
   expect(parsed.map(normalize)).toEqual(

package/src/reset.css

@@ -25,7 +25,8 @@
  *    import '@astryxdesign/core/astryx.css';        // @layer astryx-base — component styles
  *    import '@astryxdesign/theme-neutral/theme.css'; // @layer astryx-theme — theme overrides
  *
- * Layer order: reset → astryx-base → astryx-theme
+ * Layer order: reset → astryx-base → astryx-theme. This file registers that
+ * order itself, like every Astryx stylesheet, so it holds in any load order.
  * Consumer styles (unlayered) always override all Astryx layers.
  * The reset has the lowest priority and can be overridden by any other layer.
  *
@@ -36,6 +37,8 @@
  * - modern-normalize
  */
 
+@layer reset, astryx-base, astryx-theme;
+
 @layer reset {
 
   /* ===========================================================================
@@ -354,9 +357,11 @@
   }
 
   /*
-   * Ensure hidden elements are actually hidden.
+   * Ensure hidden elements are actually hidden. `hidden="until-found"` keeps
+   * the browser's own rendering, `content-visibility: hidden`, so find in page
+   * and text fragment links can still find its content and reveal it.
    */
-  :where([hidden]) {
+  :where([hidden]:not([hidden='until-found' i])) {
     display: none;
   }
 

package/src/reset.until-found.a11y.browser.spec.ts

@@ -0,0 +1,75 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reset.until-found.a11y.browser.spec.ts
+ * @input packages/core/src/reset.css, alone on a blank page
+ * @output Browser evidence that `hidden="until-found"` content stays findable
+ * @position reset.css integration proof. The browser hides until-found content
+ *   with `content-visibility: hidden`, which find in page and text fragments
+ *   can search and reveal; `display: none` takes the content out of both, and
+ *   only a shipping engine shows which one applies.
+ */
+
+import * as fs from 'node:fs';
+import {fileURLToPath} from 'node:url';
+import {expect, test} from '@playwright/test';
+
+const RESET_CSS = fs.readFileSync(
+  fileURLToPath(new URL('./reset.css', import.meta.url)),
+  'utf8',
+);
+
+// Served at a real URL so a text fragment navigation can run against it.
+const ORIGIN = 'http://reset.test';
+const PAGE = `<!doctype html>
+<style>${RESET_CSS}</style>
+<div style="height: 3000px">Above the fold</div>
+<div id="answer" hidden="until-found">The hidden answer</div>
+<div id="closed" hidden>Plain hidden text</div>
+<script>
+  document.getElementById('answer').addEventListener('beforematch', () => {
+    document.body.dataset.beforematch = 'fired';
+  });
+</script>`;
+
+test.beforeEach(async ({page}) => {
+  await page.route(`${ORIGIN}/**`, async route =>
+    route.fulfill({contentType: 'text/html', body: PAGE}),
+  );
+});
+
+test('until-found content keeps the browser rendering', async ({page}) => {
+  await page.goto(`${ORIGIN}/`);
+  const styles = await page.evaluate(() =>
+    ['answer', 'closed'].map(id => {
+      const element = document.getElementById(id);
+      if (!element) {
+        throw new Error(`missing #${id}`);
+      }
+      const style = getComputedStyle(element);
+      return {
+        display: style.display,
+        contentVisibility: style.contentVisibility,
+      };
+    }),
+  );
+  expect(styles).toEqual([
+    {display: 'block', contentVisibility: 'hidden'},
+    {display: 'none', contentVisibility: 'visible'},
+  ]);
+});
+
+test('a text fragment finds until-found content and reveals it', async ({
+  page,
+}) => {
+  await page.goto(`${ORIGIN}/#:~:text=hidden%20answer`);
+  // The browser removes the attribute and fires beforematch when it reveals.
+  await expect(page.locator('#answer')).not.toHaveAttribute('hidden');
+  await expect(page.locator('#answer')).toBeInViewport();
+  await expect(page.locator('body')).toHaveAttribute(
+    'data-beforematch',
+    'fired',
+  );
+  // Plain hidden content stays out of reach.
+  await expect(page.locator('#closed')).toBeHidden();
+});

package/src/reset.until-found.test.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Static guard for the reset's `[hidden]` rule and `hidden="until-found"`.
+ *
+ * The browser hides until-found content with `content-visibility: hidden`,
+ * which find in page and text fragments can search and reveal. A
+ * `display: none` that also matches it takes the content out of both.
+ * reset.until-found.a11y.browser.spec.ts measures the result in a browser.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import {describe, expect, it} from 'vitest';
+
+describe('reset.css and hidden="until-found"', () => {
+  it('sets display: none only on hidden elements that are not until-found', () => {
+    const stripped = fs
+      .readFileSync(path.resolve(__dirname, './reset.css'), 'utf-8')
+      .replace(/\/\*[\s\S]*?\*\//g, '');
+    const hiddenRules = [...stripped.matchAll(/([^{}]+)\{([^{}]*)\}/g)]
+      .map(([, selector, body]) => ({selector: selector.trim(), body}))
+      .filter(({selector}) => selector.includes('[hidden'));
+    expect(hiddenRules.length).toBeGreaterThan(0);
+    for (const {selector, body} of hiddenRules) {
+      if (/display:\s*none/.test(body)) {
+        expect(selector).toContain(":not([hidden='until-found' i])");
+      }
+    }
+  });
+});

package/src/stylexValidation.source-build.test.mjs

@@ -0,0 +1,42 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file stylexValidation.source-build.test.mjs
+ * @input Uses Babel and the core StyleX build config
+ * @output Verifies unsupported StyleX declarations fail the core build
+ * @position Regression test for the core build's propertyValidationMode
+ */
+
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {transformAsync} from '@babel/core';
+import {describe, expect, it} from 'vitest';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const CORE_ROOT = path.resolve(__dirname, '..');
+
+function compile(declaration) {
+  const source = `import * as stylex from '@stylexjs/stylex';
+export const styles = stylex.create({root: {${declaration}}});`;
+  return transformAsync(source, {
+    babelrc: false,
+    configFile: path.join(CORE_ROOT, 'babel.config.json'),
+    filename: path.join(__dirname, 'unsupported-declaration.tsx'),
+  });
+}
+
+describe('core StyleX property validation', () => {
+  // In StyleX's default `silent` mode each of these compiles successfully and
+  // the declaration never reaches the shipped CSS, so a green build proves
+  // nothing. The core build must fail instead.
+  it.each([
+    ['border', "border: 'none'", /border is not supported/],
+    ['background', "background: 'none'", /background is not supported/],
+    ['all', "all: 'unset'", /all is not supported/],
+  ])(
+    'rejects the %s shorthand instead of dropping it',
+    async (_name, declaration, message) => {
+      await expect(compile(declaration)).rejects.toThrow(message);
+    },
+  );
+});

package/src/theme/syntax/SyntaxTheme.tsx

@@ -20,6 +20,8 @@ import {
   type SyntaxThemeTokenKey,
 } from './defineSyntaxTheme';
 import {useMediaQuery} from '../../hooks/useMediaQuery';
+import {useTheme} from '../useTheme';
+import {formatColor, parseColor} from '../../utils/color';
 
 // =============================================================================
 // Context
@@ -59,6 +61,22 @@ export interface UseSyntaxThemeReturn {
 // Hook
 // =============================================================================
 
+/** The strength of the default diff row paints: the muted tokens at 25%. */
+const DIFF_TINT_STRENGTH = 0.25;
+
+/**
+ * The colour `color-mix(in srgb, <colour> <strength>, transparent)` paints, as
+ * a value a canvas can use. Returns undefined for a colour the shared parser
+ * does not read (the CSS default then stands).
+ */
+function mixWithTransparent(
+  colour: string,
+  strength: number,
+): string | undefined {
+  const parsed = parseColor(colour);
+  return parsed ? formatColor({...parsed, a: parsed.a * strength}) : undefined;
+}
+
 /**
  * Access the current syntax theme's token values, resolved for the active
  * color mode. Returns null if no SyntaxTheme provider is present.
@@ -74,6 +92,7 @@ export interface UseSyntaxThemeReturn {
  */
 export function useSyntaxTheme(): UseSyntaxThemeReturn | null {
   const ctx = use(SyntaxThemeContext);
+  const page = useTheme();
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   const effectiveMode: 'light' | 'dark' = prefersDark ? 'dark' : 'light';
 
@@ -83,13 +102,35 @@ export function useSyntaxTheme(): UseSyntaxThemeReturn | null {
     }
     const resolved: Partial<Record<SyntaxThemeTokenKey, string>> = {};
     for (const key of ALL_SYNTAX_KEYS) {
-      resolved[key] = resolveSyntaxTokenForMode(
-        ctx.theme.__inputTokens[key],
-        effectiveMode,
-      );
+      const input = ctx.theme.__inputTokens[key];
+      if (input !== undefined) {
+        resolved[key] = resolveSyntaxTokenForMode(input, effectiveMode);
+      }
+    }
+    // A diff row slot the theme did not set follows its CSS default; a canvas
+    // consumer needs a colour it can paint, so the marker slots take the
+    // theme's own resolved punctuation colour and the row paints derive from
+    // the enclosing page theme's resolved tokens (the same mix the CSS
+    // default makes), never from a probe outside the nearest Theme.
+    for (const key of ALL_SYNTAX_KEYS) {
+      if (resolved[key] !== undefined) {
+        continue;
+      }
+      const fallback = ctx.theme.tokens[key] ?? '';
+      if (key === 'added-marker' || key === 'removed-marker') {
+        resolved[key] = resolved.punctuation ?? fallback;
+      } else if (key === 'added' || key === 'removed') {
+        const base = page.token(
+          key === 'added' ? '--color-success-muted' : '--color-error-muted',
+        );
+        resolved[key] =
+          mixWithTransparent(base, DIFF_TINT_STRENGTH) ?? fallback;
+      } else {
+        resolved[key] = fallback;
+      }
     }
     return resolved as Record<SyntaxThemeTokenKey, string>;
-  }, [ctx, effectiveMode]);
+  }, [ctx, effectiveMode, page]);
 
   if (!ctx || !tokens) {
     return null;