@motion-proto/live-tokens 0.97.0 → 0.99.0

package/src/editor/component-editor/scaffolding/editorContext.ts

@@ -5,6 +5,9 @@ const KEY = Symbol('editor-context');
 
 export type VariantOption = { value: string; label: string };
 
+/** A request to show a variable's row. A group that has to search its tabs adds the search, so the requester can wait for it. */
+export type RevealRequest = { variable: string; searches: Promise<void>[] };
+
 export type EditorContext = {
   /** Per-variable rank for TokenLayout row alignment; null when no linked block. */
   linkedOrder: Readable<Map<string, number> | null>;
@@ -20,6 +23,8 @@ export type EditorContext = {
       on context (not local to CopyFromMenu) so it survives VariantGroup remounts
       when the user changes which variant is focused. */
   preserveColorFamily: Writable<boolean>;
+  /** Rebuilt per request. The VariantGroup holding the variable focuses its variant and opens its tab. */
+  revealVariable: Writable<RevealRequest | null>;
 };
 
 /** Mutable handle for ComponentEditorBase. */
@@ -35,6 +40,7 @@ export function createEditorContext(): EditorContextInternal {
   const focusedState = writable<string | null>(null);
   const hoveredLinkedVariable = writable<string | null>(null);
   const preserveColorFamily = writable<boolean>(false);
+  const revealVariable = writable<RevealRequest | null>(null);
   const ctx: EditorContextInternal = {
     linkedOrder: _linkedOrder,
     focusedVariant,
@@ -42,6 +48,7 @@ export function createEditorContext(): EditorContextInternal {
     focusedState,
     hoveredLinkedVariable,
     preserveColorFamily,
+    revealVariable,
     _linkedOrder,
     _variants,
   };

package/src/editor/core/a11y/a11yReport.ts

@@ -0,0 +1,164 @@
+import { derived, get, writable, type Readable } from 'svelte/store';
+import { API_BASE } from '../storage/apiBase';
+import { openThemeSlug } from '../store/editorConfigStore';
+import type {
+  A11yContrastFailure,
+  A11yFailedReport,
+  A11yFinding,
+  A11yFinishedReport,
+  A11yReport,
+  A11yReportState,
+  A11yRunningReport,
+} from './a11yReportTypes';
+
+/** One component's share of the last finished run, sorted by its fix (decision 6). */
+export interface ComponentA11yIssues {
+  /** Fix with a property: the editor's own contrast failures. */
+  contrast: A11yContrastFailure[];
+  /** Fix with a property: the run's findings whose engine rule measures a property's value. */
+  property: A11yFinding[];
+  /** Fix in the component's code: every other `a11y-*` finding but `a11y-review`. */
+  code: A11yFinding[];
+  /** Check by eye, unmarked. */
+  review: A11yFinding[];
+  /** Check by eye, marked as looking right. They count as no issue. */
+  confirmed: A11yFinding[];
+  /** Contrast failures of the run that pass as the editor now measures them. They count as no issue. */
+  fixed: A11yFixedContrast[];
+}
+
+export interface A11yFixedContrast {
+  failure: A11yContrastFailure;
+  /** The ratio the editor measures now. */
+  ratio: number;
+}
+
+/** Engine rules whose failure a property's value fixes. */
+export const PROPERTY_FIX_RULES: ReadonlySet<string> = new Set(['focus-indicator-contrast', 'control-boundary-contrast']);
+
+const running = writable<A11yRunningReport | null>(null);
+const failed = writable<A11yFailedReport | null>(null);
+const reports = writable<Record<string, A11yFinishedReport>>({});
+const fixedRatios = writable<ReadonlyMap<A11yContrastFailure, number>>(new Map());
+let heard = false;
+
+/** The dev server's latest word for the open theme: a run going (for any theme, since one runs at a time), a failed run, or the theme's last finished report. */
+export const a11yReport: Readable<A11yReport | null> = derived(
+  [running, failed, reports, openThemeSlug],
+  ([$running, $failed, $reports, $open]) => $running ?? ($failed?.theme === $open ? $failed : null) ?? $reports[$open] ?? null,
+);
+
+/** The open theme's last finished run, which the markers follow while a new run goes (decision 7). */
+export const a11yFinishedReport: Readable<A11yFinishedReport | null> = derived(
+  [reports, openThemeSlug],
+  ([$reports, $open]) => $reports[$open] ?? null,
+);
+
+/** Sets the run's contrast failures that pass now, with the ratio each measures. `contrastFixes` measures them. */
+export function setFixedContrast(ratios: ReadonlyMap<A11yContrastFailure, number>): void {
+  fixedRatios.set(ratios);
+}
+
+export const a11yIssues: Readable<Record<string, ComponentA11yIssues>> = derived([a11yFinishedReport, fixedRatios], ([$report, $fixed]) => {
+  const out: Record<string, ComponentA11yIssues> = {};
+  if (!$report) return out;
+  const confirmed = new Set($report.confirmed);
+  const entry = (id: string) => (out[id] ??= { contrast: [], property: [], code: [], review: [], confirmed: [], fixed: [] });
+  for (const failure of $report.contrast) {
+    const ratio = $fixed.get(failure);
+    if (ratio === undefined) entry(failure.component).contrast.push(failure);
+    else entry(failure.component).fixed.push({ failure, ratio });
+  }
+  for (const finding of $report.findings) {
+    if (!finding.component || !finding.rule.startsWith('a11y-')) continue;
+    const issues = entry(finding.component);
+    const group = finding.rule === 'a11y-review'
+      ? (confirmed.has(finding.message) ? issues.confirmed : issues.review)
+      : PROPERTY_FIX_RULES.has(finding.details?.engineRule ?? '') ? issues.property : issues.code;
+    group.push(finding);
+  }
+  return out;
+});
+
+/** The run's findings under each component property they trace to (decision 7). The editor's contrast failures and the results marked as looking right stay out. */
+export const a11yPropertyFindings: Readable<Map<string, A11yFinding[]>> = derived(a11yFinishedReport, ($report) => {
+  const out = new Map<string, A11yFinding[]>();
+  const confirmed = new Set($report?.confirmed);
+  for (const finding of $report?.findings ?? []) {
+    if (!finding.component || !finding.rule.startsWith('a11y-') || confirmed.has(finding.message)) continue;
+    for (const variable of finding.details?.variables ?? []) {
+      const list = out.get(variable);
+      if (list) list.push(finding);
+      else out.set(variable, [finding]);
+    }
+  }
+  return out;
+});
+
+export function receiveA11yReport(report: A11yReport): void {
+  heard = true;
+  if (report.state === 'running') {
+    running.set(report);
+    failed.set(null);
+    return;
+  }
+  running.set(null);
+  if (report.state === 'failed') failed.set(report);
+  else reports.update(($reports) => ({ ...$reports, [report.theme]: report }));
+}
+
+export async function init(): Promise<void> {
+  const res = await fetch(`${API_BASE}/a11y/report`);
+  if (!res.ok) return;
+  const state = (await res.json()) as A11yReportState;
+  // An event that landed while the read was in flight is the newer word.
+  reports.update(($reports) => ({ ...state.reports, ...$reports }));
+  if (!heard) running.set(state.running);
+}
+
+/**
+ * Starts a run with the contrast failures the editor measured. Answers 409
+ * `A11Y_RUN_IN_PROGRESS` while a run goes, and 409 `LEGACY_LAYOUT` on a tree
+ * `live-tokens migrate` has not healed; both arrive as the thrown error's `code`.
+ */
+export async function startA11yRun(contrast: A11yContrastFailure[]): Promise<A11yReport> {
+  const res = await fetch(`${API_BASE}/a11y/run`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ contrast }),
+  });
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string; code?: string };
+    const err = new Error(body.error || 'The accessibility run did not start') as Error & { status?: number; code?: string };
+    err.status = res.status;
+    if (body.code) err.code = body.code;
+    throw err;
+  }
+  const report = (await res.json()) as A11yReport;
+  receiveA11yReport(report);
+  return report;
+}
+
+/** Marks results to check by eye in the open theme's last report as looking right, or clears the mark. */
+export async function confirmReview(findings: A11yFinding[], confirmed: boolean): Promise<void> {
+  const theme = get(a11yFinishedReport)?.theme;
+  if (!theme) return;
+  const res = await fetch(`${API_BASE}/a11y/confirmed`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ theme, messages: findings.map((f) => f.message), confirmed }),
+  });
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string };
+    throw new Error(body.error || 'The mark did not save');
+  }
+  receiveA11yReport((await res.json()) as A11yReport);
+}
+
+export function __resetForTests(): void {
+  heard = false;
+  running.set(null);
+  failed.set(null);
+  reports.set({});
+  fixedRatios.set(new Map());
+}

package/src/editor/core/a11y/a11yReportTypes.ts

@@ -0,0 +1,77 @@
+import type { ContrastRole } from '../palettes/contrast';
+
+/** The SSE event the dev server sends on a run's start and on its end. */
+export const A11Y_EVENT = 'a11y';
+
+/** One failing pair the editor's contrast checker measured when the run started (decision 4). */
+export interface A11yContrastFailure {
+  component: string;
+  /** The foreground property, the row a fix changes. */
+  variable: string;
+  /** Component layers behind the foreground, top first, as the pair declares them. */
+  backdrop: string[];
+  role: ContrastRole;
+  ratio: number;
+  floor: number;
+  context?: string;
+}
+
+/** A finding as `check-component --tests --a11y --json` prints it. */
+export interface A11yFinding {
+  rule: string;
+  file: string;
+  line: number;
+  message: string;
+  /** Absent on a run-level finding such as `tests-not-installed`. */
+  component?: string;
+  details?: {
+    engineRule: string;
+    impact?: string | null;
+    target: string;
+    view?: string;
+    html: string;
+    help: string;
+    helpUrl: string;
+    /** The component properties the result traced to, sorted. Absent when the trace found none. */
+    variables?: string[];
+  };
+  context?: Record<string, unknown>;
+  severity: 'error' | 'warn';
+  guidance?: string;
+  repair: string;
+}
+
+interface A11yReportBase {
+  startedAt: string;
+  /** The theme the run tests, the one open when it started. */
+  theme: string;
+  contrast: A11yContrastFailure[];
+}
+
+export interface A11yRunningReport extends A11yReportBase {
+  state: 'running';
+}
+
+/** Holds every CLI finding except axe's `color-contrast`, which `contrast` covers. */
+export interface A11yFinishedReport extends A11yReportBase {
+  state: 'finished';
+  finishedAt: string;
+  findings: A11yFinding[];
+  /** The messages of the results to check by eye that someone marked as looking right. A new run keeps each one it finds again. */
+  confirmed?: string[];
+}
+
+/** The CLI crashed or printed no report. The theme's last finished report stands. */
+export interface A11yFailedReport extends A11yReportBase {
+  state: 'failed';
+  finishedAt: string;
+  error: string;
+}
+
+export type A11yReport = A11yRunningReport | A11yFinishedReport | A11yFailedReport;
+
+/** `GET /a11y/report`: the run going, if any, and each theme's last finished report by theme name. */
+export interface A11yReportState {
+  running: A11yRunningReport | null;
+  reports: Record<string, A11yFinishedReport>;
+}

package/src/editor/core/a11y/contrastFailures.ts

@@ -0,0 +1,22 @@
+import { measurePair, type ContrastPair, type Resolver } from '../palettes/contrastPairs';
+import type { A11yContrastFailure } from './a11yReportTypes';
+
+/** Each pair below its floor. `measurePair` passes an inactive pair, so a disabled state never fails. */
+export function contrastFailures(
+  pairs: { component: string; pair: ContrastPair }[],
+  resolver: Resolver,
+): A11yContrastFailure[] {
+  return pairs.flatMap(({ component, pair }) => {
+    const measure = measurePair(pair, resolver);
+    if (measure.passes) return [];
+    return [{
+      component,
+      variable: pair.foreground,
+      backdrop: pair.backdrop,
+      role: pair.role,
+      ratio: measure.ratio,
+      floor: measure.floor,
+      ...(pair.context ? { context: pair.context } : {}),
+    }];
+  });
+}

package/src/editor/core/a11y/contrastFixes.ts

@@ -0,0 +1,41 @@
+import { get } from 'svelte/store';
+import { getContrastPairs } from '../components/contrastPairRegistry';
+import { measurePair, type ContrastPair, type Resolver } from '../palettes/contrastPairs';
+import { createDomResolver } from '../palettes/resolveColor';
+import { editorState } from '../store/editorStore';
+import { THEME_APPLIED_EVENT } from '../themes/themeDocumentSync';
+import { a11yFinishedReport, setFixedContrast } from './a11yReport';
+import type { A11yContrastFailure } from './a11yReportTypes';
+
+function samePair(pair: ContrastPair, failure: A11yContrastFailure): boolean {
+  return pair.role === failure.role
+    && pair.context === failure.context
+    && pair.backdrop.join('\n') === failure.backdrop.join('\n');
+}
+
+/** Each failure whose pair passes now, with the ratio it measures. */
+export function measureFixes(failures: A11yContrastFailure[], resolver: Resolver): Map<A11yContrastFailure, number> {
+  const out = new Map<A11yContrastFailure, number>();
+  for (const failure of failures) {
+    const pair = getContrastPairs(failure.component, failure.variable).find((p) => samePair(p, failure));
+    if (!pair) continue;
+    const measure = measurePair(pair, resolver);
+    if (measure.passes) out.set(failure, measure.ratio);
+  }
+  return out;
+}
+
+/** Re-measures the last run's contrast failures whenever the editor's state or the open theme changes. */
+export function init(): void {
+  let frame = 0;
+  // Measuring reads the DOM, so it waits a frame for the renderer's CSS variables.
+  const schedule = () => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(() => {
+      setFixedContrast(measureFixes(get(a11yFinishedReport)?.contrast ?? [], createDomResolver()));
+    });
+  };
+  a11yFinishedReport.subscribe(schedule);
+  editorState.subscribe(schedule);
+  document.addEventListener(THEME_APPLIED_EVENT, schedule);
+}

package/src/editor/core/components/contrastPairRegistry.ts

@@ -0,0 +1,18 @@
+import type { ContrastPair } from '../palettes/contrastPairs';
+
+// The palette selector reads pairs from here. Importing `registry.ts` instead
+// would close a cycle, because every editor imports the palette selector.
+const pairsByComponent = new Map<string, ContrastPair[]>();
+
+/** Replaces the component's pairs, so a custom entry that overrides a built-in drops the built-in's pairs. */
+export function registerContrastPairs(id: string, pairs: ContrastPair[]): void {
+  pairsByComponent.set(id, pairs);
+}
+
+export function getContrastPairs(id: string, variable: string): ContrastPair[] {
+  return (pairsByComponent.get(id) ?? []).filter((pair) => pair.foreground === variable);
+}
+
+export function allContrastPairs(): { component: string; pair: ContrastPair }[] {
+  return [...pairsByComponent].flatMap(([component, pairs]) => pairs.map((pair) => ({ component, pair })));
+}

package/src/editor/core/palettes/contrast.ts

@@ -10,6 +10,50 @@ import { hexToOklch, oklchToHex, gamutClamp } from './oklch';
 export const AA_BODY = 4.5;
 export const AA_LARGE = 3.0;
 
+/** WCAG's large-text sizes: the AA floor drops to 3:1 at either. */
+export const LARGE_TEXT_PX = 24;
+export const LARGE_BOLD_PX = 18.66;
+export const BOLD = 700;
+
+export function isLargeText(px: number, weight: number): boolean {
+  return px >= LARGE_TEXT_PX || (px >= LARGE_BOLD_PX && weight >= BOLD);
+}
+
+export type ContrastRole = 'text' | 'non-text';
+
+export interface ContrastRule {
+  criterion: string;
+  name: string;
+  level: 'AA';
+  floor: number;
+  /** Text only: the floor once `isLargeText` holds. */
+  largeFloor?: number;
+  url: string;
+}
+
+export const CONTRAST_RULES: Record<ContrastRole, ContrastRule> = {
+  text: {
+    criterion: '1.4.3',
+    name: 'Contrast (Minimum)',
+    level: 'AA',
+    floor: AA_BODY,
+    largeFloor: AA_LARGE,
+    url: 'https://www.w3.org/TR/WCAG22/#contrast-minimum',
+  },
+  'non-text': {
+    criterion: '1.4.11',
+    name: 'Non-text Contrast',
+    level: 'AA',
+    floor: 3,
+    url: 'https://www.w3.org/TR/WCAG22/#non-text-contrast',
+  },
+};
+
+export function floorFor(role: ContrastRole, large: boolean): number {
+  const rule = CONTRAST_RULES[role];
+  return large && rule.largeFloor !== undefined ? rule.largeFloor : rule.floor;
+}
+
 function linearizeChannel(v8: number): number {
   const s = v8 / 255;
   return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);

package/src/editor/core/palettes/contrastPairs.ts

@@ -0,0 +1,82 @@
+import { contrastRatio, floorFor, isLargeText, type ContrastRole } from './contrast';
+
+export const PAGE_BG = '--page-bg';
+
+export interface ContrastPair {
+  foreground: string;
+  /** Component layers behind the foreground, top first. `--page-bg` always sits under the last one. */
+  backdrop: string[];
+  role: ContrastRole;
+  /** Text only. Sets the large-text floor. */
+  fontSize?: string;
+  /** Text only. Normal weight when absent. */
+  fontWeight?: string;
+  /** Disabled state: WCAG exempts it, so the pair always passes. */
+  inactive?: boolean;
+  /** Names the context when one foreground has several pairs ("inline", "zoomed"). */
+  context?: string;
+}
+
+/** sRGB channels from 0 to 255 and alpha from 0 to 1, as a canvas pixel reads. */
+export type Rgba = [r: number, g: number, b: number, a: number];
+
+export function over(front: Rgba, back: Rgba): Rgba {
+  const alpha = front[3] + back[3] * (1 - front[3]);
+  if (alpha === 0) return [0, 0, 0, 0];
+  const mix = (f: number, b: number) => (f * front[3] + b * back[3] * (1 - front[3])) / alpha;
+  return [mix(front[0], back[0]), mix(front[1], back[1]), mix(front[2], back[2]), alpha];
+}
+
+export interface Resolver {
+  /** One color for a solid value, one per stop for a gradient. */
+  color(name: string): Rgba[];
+  fontPx(name: string): number;
+  fontWeight(name: string): number;
+}
+
+export interface PairMeasure {
+  pair: ContrastPair;
+  ratio: number;
+  floor: number;
+  large: boolean;
+  passes: boolean;
+}
+
+const NORMAL_WEIGHT = 400;
+
+function hex([r, g, b]: Rgba): string {
+  return `#${[r, g, b].map((c) => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+}
+
+export function measurePair(pair: ContrastPair, resolver: Resolver): PairMeasure {
+  let behind = resolver.color(PAGE_BG);
+  for (const layer of [...pair.backdrop].reverse()) {
+    const below = behind;
+    behind = resolver.color(layer).flatMap((stop) => below.map((back) => over(stop, back)));
+  }
+  const fronts = resolver.color(pair.foreground);
+  let ratio = Infinity;
+  for (const back of behind) {
+    for (const front of fronts) {
+      ratio = Math.min(ratio, contrastRatio(hex(over(front, back)), hex(back)));
+    }
+  }
+  const large = pair.role === 'text'
+    && pair.fontSize !== undefined
+    && isLargeText(
+      resolver.fontPx(pair.fontSize),
+      pair.fontWeight ? resolver.fontWeight(pair.fontWeight) : NORMAL_WEIGHT,
+    );
+  const floor = floorFor(pair.role, large);
+  // A non-text part painted fully transparent, such as an unselected tab's
+  // underline, draws nothing for SC 1.4.11 to measure.
+  const absent = pair.role === 'non-text' && fronts.every((front) => front[3] === 0);
+  return { pair, ratio, floor, large, passes: pair.inactive === true || absent || ratio >= floor };
+}
+
+/** An inactive pair applies no floor, so it ranks only when every pair is inactive. */
+export function closestToFailing(measures: PairMeasure[]): PairMeasure {
+  const active = measures.filter((m) => !m.pair.inactive);
+  const pool = active.length > 0 ? active : measures;
+  return pool.reduce((worst, m) => (m.ratio / m.floor < worst.ratio / worst.floor ? m : worst));
+}

package/src/editor/core/palettes/resolveColor.ts

@@ -0,0 +1,77 @@
+import { splitTopLevel } from '../themes/parsers/gradient';
+import type { Resolver, Rgba } from './contrastPairs';
+
+const GRADIENT = /^(?:repeating-)?(?:linear|radial|conic)-gradient\((.*)\)$/is;
+const DIRECTION = /^(?:to|at|from|in|circle|ellipse|closest-side|closest-corner|farthest-side|farthest-corner)$/i;
+const POSITION = /^(?:[+-]?(?:\d+\.?\d*|\.\d+)(?:[a-z]+|%)?|(?:calc|min|max|clamp)\(.*\))$/is;
+
+const isSpace = (c: string) => /\s/.test(c);
+
+/** The stop colors of a gradient function, or null for any other value. */
+export function gradientStops(value: string): string[] | null {
+  const match = value.trim().match(GRADIENT);
+  if (!match) return null;
+  const stops: string[] = [];
+  splitTopLevel(match[1]).forEach((arg, i) => {
+    const tokens = splitTopLevel(arg, isSpace).filter(Boolean);
+    if (i === 0 && (DIRECTION.test(tokens[0]) || POSITION.test(tokens[0]))) return;
+    const color = tokens.filter((token) => !POSITION.test(token)).join(' ');
+    if (color) stops.push(color);
+  });
+  return stops;
+}
+
+export function createDomResolver(doc: Document = document): Resolver {
+  const view = doc.defaultView!;
+  // The canvas answers with the pixel the screen shows, gamut-clamped, for any
+  // color syntax the probe computes.
+  const canvas = doc.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+  ctx.globalCompositeOperation = 'copy';
+
+  const paint = (css: string): Rgba => {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+    ctx.fillStyle = css;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    return [r, g, b, a / 255];
+  };
+
+  const withProbe = <T>(read: (probe: HTMLElement, style: CSSStyleDeclaration) => T): T => {
+    // A value `color` rejects makes the probe inherit, so the host's
+    // transparent reads as a layer that paints nothing.
+    const host = doc.createElement('div');
+    host.style.display = 'none';
+    host.style.color = 'transparent';
+    const probe = doc.createElement('div');
+    host.appendChild(probe);
+    doc.body.appendChild(host);
+    try {
+      return read(probe, view.getComputedStyle(probe));
+    } finally {
+      host.remove();
+    }
+  };
+
+  return {
+    color: (name) => withProbe((probe, style) => {
+      const stops = gradientStops(style.getPropertyValue(name)) ?? [`var(${name})`];
+      return stops.map((stop) => {
+        // An invalid assignment keeps the previous stop's color.
+        probe.style.color = '';
+        probe.style.color = stop;
+        return paint(style.color);
+      });
+    }),
+    fontPx: (name) => withProbe((probe, style) => {
+      probe.style.fontSize = `var(${name})`;
+      return parseFloat(style.fontSize);
+    }),
+    fontWeight: (name) => withProbe((probe, style) => {
+      probe.style.fontWeight = `var(${name})`;
+      return parseFloat(style.fontWeight);
+    }),
+  };
+}

package/src/editor/core/store/editorStore.ts

@@ -216,6 +216,10 @@ export {
   markComponentSaved,
 } from '../themes/slices/components';
 
+export { a11yReport, a11yFinishedReport, a11yIssues, startA11yRun } from '../a11y/a11yReport';
+export type { ComponentA11yIssues } from '../a11y/a11yReport';
+export type { A11yContrastFailure, A11yFinding, A11yReport } from '../a11y/a11yReportTypes';
+
 export {
   setFontSources,
   setFontStacks,

package/src/editor/core/store/editorViewStore.ts

@@ -1,13 +1,13 @@
 import { writable } from 'svelte/store';
 
-export type EditorView = 'tokens' | 'components' | 'colors' | 'sketch';
+export type EditorView = 'tokens' | 'components' | 'colors' | 'sketch' | 'accessibility';
 export type SidebarCondensed = boolean | 'auto';
 
 const VIEW_KEY = 'lt.editorView';
 const CONDENSED_KEY = 'lt.sidebarCondensed';
 
 function isEditorView(v: unknown): v is EditorView {
-  return v === 'tokens' || v === 'components' || v === 'colors' || v === 'sketch';
+  return v === 'tokens' || v === 'components' || v === 'colors' || v === 'sketch' || v === 'accessibility';
 }
 
 // Session-scoped, not persistent: opening the editor fresh always starts on

package/src/editor/core/store/unsavedEdits.ts

@@ -0,0 +1,10 @@
+import { derived, type Readable } from 'svelte/store';
+import { colorsAndTypeDirty, componentDirty } from './editorStore';
+import { sketchOffTheme } from '../sketch/sketchStore';
+
+/** The open theme differs from its saved file: colors and type, any component, or the sketch layer. */
+export const unsavedEdits: Readable<boolean> = derived(
+  [colorsAndTypeDirty, componentDirty, sketchOffTheme],
+  ([$colorsAndType, $components, $sketch]) =>
+    $colorsAndType || Object.values($components).some(Boolean) || $sketch,
+);

package/src/editor/core/themes/liveStateStream.ts

@@ -2,6 +2,8 @@ import { API_BASE } from '../storage/apiBase';
 import { refreshProductionTheme } from '../productionPulse';
 import { hydrateAppliedTheme } from './themeDocumentSync';
 import type { LiveState } from './themeService';
+import { receiveA11yReport } from '../a11y/a11yReport';
+import { A11Y_EVENT, type A11yReport } from '../a11y/a11yReportTypes';
 
 export const LIVE_STATE_EVENT = 'live-state';
 
@@ -12,7 +14,8 @@ let source: EventSource | null = null;
  * from outside the page (a CLI verb, a branch switch) arrives as one frame,
  * and this document hydrates from it the way it does from an Apply. An outside
  * writer can also save the production theme past its bake (`save-theme` into
- * the open, published theme), so production is re-read too.
+ * the open, published theme), so production is re-read too. The same stream
+ * carries each accessibility run's report on its start and on its end.
  */
 export function init(): void {
   if (source || typeof EventSource === 'undefined') return;
@@ -22,6 +25,9 @@ export function init(): void {
     hydrateAppliedTheme(state.fileName, state);
     void refreshProductionTheme();
   });
+  source.addEventListener(A11Y_EVENT, (event) => {
+    receiveA11yReport(JSON.parse((event as MessageEvent<string>).data) as A11yReport);
+  });
 }
 
 export function __resetForTests(): void {

package/src/editor/core/themes/parsers/gradient.ts

@@ -181,7 +181,10 @@ const VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
 
 /** Split on top-level separators only. Stop colours nest commas inside
  *  `color-mix(…)`, so a plain `split(',')` shreds them. */
-function splitTopLevel(s: string): string[] {
+export function splitTopLevel(
+  s: string,
+  isSeparator: (c: string) => boolean = (c) => c === ',',
+): string[] {
   const parts: string[] = [];
   let depth = 0;
   let start = 0;
@@ -189,7 +192,7 @@ function splitTopLevel(s: string): string[] {
     const c = s[i];
     if (c === '(') depth++;
     else if (c === ')') depth--;
-    else if (c === ',' && depth === 0) {
+    else if (depth === 0 && isSeparator(c)) {
       parts.push(s.slice(start, i));
       start = i + 1;
     }

package/src/editor/docs/chapters.ts

@@ -18,6 +18,7 @@ export const chapters: Chapter[] = [
   { id: 'where-themes-live',   title: 'Where themes live' },
   { id: 'light-and-dark',      title: 'Light and dark' },
   { id: 'creating-components', title: 'Creating components' },
+  { id: 'accessibility',       title: 'Accessibility' },
   { id: 'production-css',      title: 'Production CSS' },
 ];