@almadar/ui 6.54.0 → 6.55.0

package/dist/runtime/index.d.ts

@@ -2,8 +2,8 @@ import { EventPayload, OrbitalDefinition, ServiceParams, TraitConfig, UserContex
 export { ResolvedEntity, ResolvedIR, ResolvedPage, ResolvedTrait, ResolvedTraitBinding } from '@almadar/core';
 import { TraitState, EventTransport, PersistenceAdapter, AccessTokenProvider, SchemaLoader } from '@almadar/runtime';
 export { AccessTokenProvider, ClientEventBus, CreateClientEffectHandlersOptions, SlotSetter, createClientEffectHandlers } from '@almadar/runtime';
-import { E as EntityBindingSource, A as AwaitingSkeletonSource, S as ServerBridgeTransport } from '../AwaitingSkeletonContext-Bh399p1x.js';
-export { a as EntitySchemaContextValue, b as EntitySchemaProvider, c as EntitySchemaProviderProps, d as ServerBridgeContextValue, e as ServerBridgeProvider, T as TraitContext, f as TraitContextValue, g as TraitInstance, h as TraitProvider, i as TraitProviderProps, u as useEntitySchema, j as useEntitySchemaOptional, k as useServerBridge, l as useTrait, m as useTraitContext } from '../AwaitingSkeletonContext-Bh399p1x.js';
+import { E as EntityBindingSource, A as AwaitingSkeletonSource, S as ServerBridgeTransport } from '../AwaitingSkeletonContext-DPgW__WV.js';
+export { a as EntitySchemaContextValue, b as EntitySchemaProvider, c as EntitySchemaProviderProps, d as ServerBridgeContextValue, e as ServerBridgeProvider, T as TraitContext, f as TraitContextValue, g as TraitInstance, h as TraitProvider, i as TraitProviderProps, u as useEntitySchema, j as useEntitySchemaOptional, k as useServerBridge, l as useTrait, m as useTraitContext } from '../AwaitingSkeletonContext-DPgW__WV.js';
 import { c as useUISlots } from '../UISlotContext-CS487Uoc.js';
 export { PERF_NAMESPACE, PerfEntry, PreparedPreviewSchema, adjustSchemaForMockData, buildMockData, clearPerf, perfEnd, perfStart, perfTime, prepareSchemaForPreview, wrapCallbackForEvent } from '@almadar/runtime/ui';
 import React__default, { ReactNode } from 'react';
@@ -308,8 +308,12 @@ interface BrowserPlaygroundProps {
     messages?: MessageCatalogs;
     /** The viewer's locale. Default: the schema's first declared locale. */
     locale?: string;
+    /** Loads each `lazyPages` behavior (`uses lazy`): the in-browser runtime runs them with the program, as a server does. */
+    lazyLoader?: SchemaLoader;
+    /** Where `schema` was loaded from — a lazy page's `orbRef` resolves against it. */
+    schemaPath?: string;
 }
-declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, paused, fit, onPageChange, viewer, messages, locale, }: BrowserPlaygroundProps): React__default.ReactElement;
+declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, paused, fit, onPageChange, viewer, messages, locale, lazyLoader, schemaPath, }: BrowserPlaygroundProps): React__default.ReactElement;
 
 /**
  * OrbitalPluginHost — runs an ordinary behavior headless against the

package/dist/runtime/index.js

@@ -1,18 +1,18 @@
-export { BrowserPlayground, OrbPreview, adjustSchemaForMockData, buildMockData, clearSchemaCache, prepareSchemaForPreview, useResolvedSchema, useTraitStateMachine } from '../chunk-U3CGKPOK.js';
+export { BrowserPlayground, OrbPreview, adjustSchemaForMockData, buildMockData, clearSchemaCache, prepareSchemaForPreview, useResolvedSchema, useTraitStateMachine } from '../chunk-FQM37C56.js';
 export { assertUniqueSlotsPerHost } from '../chunk-O2EIWXWE.js';
-import '../chunk-4HC5HRHB.js';
+import '../chunk-QGH4NAQO.js';
 import '../chunk-VHTJRS2N.js';
-export { wrapCallbackForEvent } from '../chunk-U2FGMHQP.js';
-import '../chunk-Z5IYJU44.js';
-import '../chunk-4UP6BZ4R.js';
+export { wrapCallbackForEvent } from '../chunk-XZKGRSIO.js';
+import '../chunk-Y53Q55H5.js';
+import '../chunk-HCSJHRC4.js';
 import '../chunk-JRW33U35.js';
 import '../chunk-XJTHMW4G.js';
 import { useEventBus } from '../chunk-6EV3OEBQ.js';
 export { PERF_NAMESPACE, clearPerf, perfEnd, perfStart, perfTime, profilerOnRender, usePerfBuffer } from '../chunk-KQXXO42S.js';
-import '../chunk-O7OLVVBR.js';
+import '../chunk-Q47ZN2DW.js';
 import '../chunk-64WACXM7.js';
-import '../chunk-MCKFWPT2.js';
-import '../chunk-N2V4LHFQ.js';
+import '../chunk-RNY5LJXJ.js';
+import '../chunk-HRCR53OW.js';
 import '../chunk-PQKU62LK.js';
 import '../chunk-PEST66PN.js';
 import '../chunk-QPXIAUJD.js';

package/dist/ssr/index.cjs

@@ -3273,6 +3273,7 @@ var en_default = {
   "template.ourTeam": "Our Team",
   "template.caseStudies": "Case Studies",
   "versionDiff.compare": "Compare",
+  "versionDiff.changes": "Changes",
   "versionDiff.to": "to",
   "versionDiff.beforeRevision": "Before revision",
   "versionDiff.afterRevision": "After revision",
@@ -3999,6 +4000,7 @@ var en_default = {
   "gridPicker.moreRefine": "+{{count}} more \u2014 refine your search",
   "graphCanvas.noNodes": "No nodes to display.",
   "codeBlock.noCode": "No code to display.",
+  "codeBlock.region": "Code",
   "fab.action": "Action",
   "fab.closeActions": "Close actions",
   "fab.openActions": "Open actions",
@@ -4315,7 +4317,14 @@ var en_default = {
   "agentActivity.earlierConversations": "Earlier conversations ({{count}})",
   "agentActivity.earlierActivity": "Earlier activity",
   "tabs.scrollStart": "Scroll tabs back",
-  "tabs.scrollEnd": "Scroll tabs forward"
+  "tabs.scrollEnd": "Scroll tabs forward",
+  "agentChat.workedThrough": "Worked through {{count}} steps",
+  "agentChat.newMessages": "New messages",
+  "agentChat.copy": "Copy reply",
+  "agentChat.copied": "Copied",
+  "agentChat.today": "Today",
+  "agentChat.yesterday": "Yesterday",
+  "agentChat.emptyDescription": "Ask in your own words \u2014 the assistant can look things up and make changes for you."
 };
 
 // lib/format.ts
@@ -4597,12 +4606,16 @@ function themeStrokeApplies() {
   return familyStrokeApplies(themeIconFamily());
 }
 function scopedIconFamily(el) {
-  for (let node = el; node; node = node.parentElement) {
-    const raw = getComputedStyle(node).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
-    if (raw !== "") return raw;
-  }
-  return "";
+  const scope = el.closest("[data-theme]");
+  if (!scope || scope === document.documentElement) return null;
+  const known = scopedFamilies.get(scope);
+  if (known && known.version === themeVersion) return known.family;
+  const raw = getComputedStyle(scope).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
+  const family = raw === "" ? null : raw;
+  scopedFamilies.set(scope, { version: themeVersion, family });
+  return family;
 }
+var scopedFamilies = /* @__PURE__ */ new WeakMap();
 var cachedFamily = null;
 var cachedStrokeApplies = null;
 var themeVersion = 0;
@@ -4666,7 +4679,9 @@ function useThemeIconStrokeApplies(ref) {
   const version = React17.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
   const [scopedApplies, setScopedApplies] = React17.useState(null);
   React17.useLayoutEffect(() => {
-    if (ref.current) setScopedApplies(familyStrokeApplies(scopedIconFamily(ref.current)));
+    if (!ref.current) return;
+    const scoped = scopedIconFamily(ref.current);
+    setScopedApplies(scoped === null ? null : familyStrokeApplies(scoped));
   }, [ref, version]);
   return scopedApplies ?? documentApplies;
 }
@@ -5045,7 +5060,8 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-elevation-pressed"
   ].join(" "),
   secondary: [
-    "bg-transparent text-accent",
+    // The accent is often a signature bright that fails as text on a light page.
+    "bg-transparent text-foreground",
     "border border-accent",
     "hover:bg-accent hover:text-accent-foreground hover:border-accent",
     "active:scale-[var(--active-scale)]"

package/dist/ssr/index.js

@@ -3252,6 +3252,7 @@ var en_default = {
   "template.ourTeam": "Our Team",
   "template.caseStudies": "Case Studies",
   "versionDiff.compare": "Compare",
+  "versionDiff.changes": "Changes",
   "versionDiff.to": "to",
   "versionDiff.beforeRevision": "Before revision",
   "versionDiff.afterRevision": "After revision",
@@ -3978,6 +3979,7 @@ var en_default = {
   "gridPicker.moreRefine": "+{{count}} more \u2014 refine your search",
   "graphCanvas.noNodes": "No nodes to display.",
   "codeBlock.noCode": "No code to display.",
+  "codeBlock.region": "Code",
   "fab.action": "Action",
   "fab.closeActions": "Close actions",
   "fab.openActions": "Open actions",
@@ -4294,7 +4296,14 @@ var en_default = {
   "agentActivity.earlierConversations": "Earlier conversations ({{count}})",
   "agentActivity.earlierActivity": "Earlier activity",
   "tabs.scrollStart": "Scroll tabs back",
-  "tabs.scrollEnd": "Scroll tabs forward"
+  "tabs.scrollEnd": "Scroll tabs forward",
+  "agentChat.workedThrough": "Worked through {{count}} steps",
+  "agentChat.newMessages": "New messages",
+  "agentChat.copy": "Copy reply",
+  "agentChat.copied": "Copied",
+  "agentChat.today": "Today",
+  "agentChat.yesterday": "Yesterday",
+  "agentChat.emptyDescription": "Ask in your own words \u2014 the assistant can look things up and make changes for you."
 };
 
 // lib/format.ts
@@ -4576,12 +4585,16 @@ function themeStrokeApplies() {
   return familyStrokeApplies(themeIconFamily());
 }
 function scopedIconFamily(el) {
-  for (let node = el; node; node = node.parentElement) {
-    const raw = getComputedStyle(node).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
-    if (raw !== "") return raw;
-  }
-  return "";
+  const scope = el.closest("[data-theme]");
+  if (!scope || scope === document.documentElement) return null;
+  const known = scopedFamilies.get(scope);
+  if (known && known.version === themeVersion) return known.family;
+  const raw = getComputedStyle(scope).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
+  const family = raw === "" ? null : raw;
+  scopedFamilies.set(scope, { version: themeVersion, family });
+  return family;
 }
+var scopedFamilies = /* @__PURE__ */ new WeakMap();
 var cachedFamily = null;
 var cachedStrokeApplies = null;
 var themeVersion = 0;
@@ -4645,7 +4658,9 @@ function useThemeIconStrokeApplies(ref) {
   const version = useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
   const [scopedApplies, setScopedApplies] = useState(null);
   useLayoutEffect(() => {
-    if (ref.current) setScopedApplies(familyStrokeApplies(scopedIconFamily(ref.current)));
+    if (!ref.current) return;
+    const scoped = scopedIconFamily(ref.current);
+    setScopedApplies(scoped === null ? null : familyStrokeApplies(scoped));
   }, [ref, version]);
   return scopedApplies ?? documentApplies;
 }
@@ -5024,7 +5039,8 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-elevation-pressed"
   ].join(" "),
   secondary: [
-    "bg-transparent text-accent",
+    // The accent is often a signature bright that fails as text on a light page.
+    "bg-transparent text-foreground",
     "border border-accent",
     "hover:bg-accent hover:text-accent-foreground hover:border-accent",
     "active:scale-[var(--active-scale)]"

package/dist/{themeTokens-Ccu7EmGY.d.ts → themeTokens-D6MFwKrC.d.ts}

@@ -1,4 +1,4 @@
-import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, MotionShapeTokens, SurfaceTokens, TypeScaleTokens, TypeIntentMap, TypeSizeKey, EnterAnimation } from '@almadar/core';
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, DiagramTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, MotionShapeTokens, SceneTokens, SurfaceTokens, TypeScaleTokens, TypeIntentMap, TypeSizeKey, EnterAnimation } from '@almadar/core';
 
 /**
  * themeTokens — runtime mirror of the orbital compiler's theme codegen.
@@ -81,6 +81,10 @@ declare const ELEVATION_VARS: ReadonlyArray<FlatVarEntry<ElevationTokens>>;
 declare const GEOMETRY_VARS: ReadonlyArray<FlatVarEntry<GeometryTokens>>;
 /** Surface axis — panel/page material. */
 declare const SURFACE_VARS: ReadonlyArray<FlatVarEntry<SurfaceTokens>>;
+/** Diagram axis — how marks are drawn on every drawing surface. */
+declare const DIAGRAM_VARS: ReadonlyArray<FlatVarEntry<DiagramTokens>>;
+/** Scene axis — 3D material and lighting. */
+declare const SCENE_VARS: ReadonlyArray<FlatVarEntry<SceneTokens>>;
 /** Legacy free-form map prefixes (`ThemeTokens.colors`/`radii`/`spacing`/`shadows`). `typography` has no prefix — see below. */
 declare const LEGACY_PREFIXES: {
     readonly colors: "--color-";
@@ -117,4 +121,4 @@ declare function enterKeyframe(enter: EnterAnimation): string;
  */
 declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
 
-export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, SURFACE_VARS as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, MOTION_EASING_KEYS as b, MOTION_INTENT_VARS as c, MOTION_SHAPE_VARS as d, type StringValueKey as e, TYPE_FAMILY_VARS as f, TYPE_HEADING_VARS as g, TYPE_INTENT_VARS as h, TYPE_SIZE_KEYS as i, enterKeyframe as j, resolveThemeForRuntime as r, themeTokensToCssVars as t };
+export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, SCENE_VARS as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, DIAGRAM_VARS as b, MOTION_EASING_KEYS as c, MOTION_INTENT_VARS as d, MOTION_SHAPE_VARS as e, SURFACE_VARS as f, type StringValueKey as g, TYPE_FAMILY_VARS as h, TYPE_HEADING_VARS as i, TYPE_INTENT_VARS as j, TYPE_SIZE_KEYS as k, enterKeyframe as l, resolveThemeForRuntime as r, themeTokensToCssVars as t };

package/locales/ar.json

@@ -183,6 +183,7 @@
   "template.ourTeam": "فريقنا",
   "template.caseStudies": "دراسات الحالة",
   "versionDiff.compare": "مقارنة",
+  "versionDiff.changes": "التغييرات",
   "versionDiff.to": "إلى",
   "versionDiff.beforeRevision": "المراجعة السابقة",
   "versionDiff.afterRevision": "المراجعة اللاحقة",
@@ -913,6 +914,7 @@
   "gridPicker.moreRefine": "+{{count}} أخرى — دقّق بحثك",
   "graphCanvas.noNodes": "لا توجد عقد لعرضها.",
   "codeBlock.noCode": "لا يوجد كود لعرضه.",
+  "codeBlock.region": "الشيفرة البرمجية",
   "fab.action": "إجراء",
   "fab.closeActions": "إغلاق الإجراءات",
   "fab.openActions": "فتح الإجراءات",
@@ -1229,5 +1231,12 @@
   "agentActivity.earlierConversations": "المحادثات السابقة ({{count}})",
   "agentActivity.earlierActivity": "نشاط سابق",
   "tabs.scrollStart": "مرّر علامات التبويب للخلف",
-  "tabs.scrollEnd": "مرّر علامات التبويب للأمام"
+  "tabs.scrollEnd": "مرّر علامات التبويب للأمام",
+  "agentChat.workedThrough": "أنجز {{count}} خطوات",
+  "agentChat.newMessages": "رسائل جديدة",
+  "agentChat.copy": "نسخ الرد",
+  "agentChat.copied": "تم النسخ",
+  "agentChat.today": "اليوم",
+  "agentChat.yesterday": "أمس",
+  "agentChat.emptyDescription": "اسأل بكلماتك — يستطيع المساعد البحث عن المعلومات وإجراء التغييرات نيابةً عنك."
 }

package/locales/en.json

@@ -187,6 +187,7 @@
   "template.ourTeam": "Our Team",
   "template.caseStudies": "Case Studies",
   "versionDiff.compare": "Compare",
+  "versionDiff.changes": "Changes",
   "versionDiff.to": "to",
   "versionDiff.beforeRevision": "Before revision",
   "versionDiff.afterRevision": "After revision",
@@ -913,6 +914,7 @@
   "gridPicker.moreRefine": "+{{count}} more — refine your search",
   "graphCanvas.noNodes": "No nodes to display.",
   "codeBlock.noCode": "No code to display.",
+  "codeBlock.region": "Code",
   "fab.action": "Action",
   "fab.closeActions": "Close actions",
   "fab.openActions": "Open actions",
@@ -1229,5 +1231,12 @@
   "agentActivity.earlierConversations": "Earlier conversations ({{count}})",
   "agentActivity.earlierActivity": "Earlier activity",
   "tabs.scrollStart": "Scroll tabs back",
-  "tabs.scrollEnd": "Scroll tabs forward"
+  "tabs.scrollEnd": "Scroll tabs forward",
+  "agentChat.workedThrough": "Worked through {{count}} steps",
+  "agentChat.newMessages": "New messages",
+  "agentChat.copy": "Copy reply",
+  "agentChat.copied": "Copied",
+  "agentChat.today": "Today",
+  "agentChat.yesterday": "Yesterday",
+  "agentChat.emptyDescription": "Ask in your own words — the assistant can look things up and make changes for you."
 }

package/locales/sl.json

@@ -183,6 +183,7 @@
   "template.ourTeam": "Naša ekipa",
   "template.caseStudies": "Primeri uporabe",
   "versionDiff.compare": "Primerjaj",
+  "versionDiff.changes": "Spremembe",
   "versionDiff.to": "z",
   "versionDiff.beforeRevision": "Prejšnja revizija",
   "versionDiff.afterRevision": "Naslednja revizija",
@@ -913,6 +914,7 @@
   "gridPicker.moreRefine": "+še {{count}} — zožite iskanje",
   "graphCanvas.noNodes": "Ni vozlišč za prikaz.",
   "codeBlock.noCode": "Ni kode za prikaz.",
+  "codeBlock.region": "Koda",
   "fab.action": "Dejanje",
   "fab.closeActions": "Zapri dejanja",
   "fab.openActions": "Odpri dejanja",
@@ -1229,5 +1231,12 @@
   "agentActivity.earlierConversations": "Prejšnji pogovori ({{count}})",
   "agentActivity.earlierActivity": "Prejšnja dejavnost",
   "tabs.scrollStart": "Pomakni zavihke nazaj",
-  "tabs.scrollEnd": "Pomakni zavihke naprej"
+  "tabs.scrollEnd": "Pomakni zavihke naprej",
+  "agentChat.workedThrough": "Opravil {{count}} korakov",
+  "agentChat.newMessages": "Nova sporočila",
+  "agentChat.copy": "Kopiraj odgovor",
+  "agentChat.copied": "Kopirano",
+  "agentChat.today": "Danes",
+  "agentChat.yesterday": "Včeraj",
+  "agentChat.emptyDescription": "Vprašajte s svojimi besedami — pomočnik lahko poišče podatke in namesto vas naredi spremembe."
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.54.0",
+  "version": "6.55.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -126,11 +126,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.116.0",
+    "@almadar/core": "^10.117.0",
     "@almadar/evaluator": "^2.54.0",
-    "@almadar/logger": "^1.15.0",
-    "@almadar/runtime": "^6.102.0",
-    "@almadar/std": "^16.241.0",
+    "@almadar/logger": "^1.16.0",
+    "@almadar/runtime": "^6.103.0",
+    "@almadar/std": "^16.242.0",
     "@almadar/syntax": "^1.19.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -191,7 +191,7 @@
     }
   },
   "devDependencies": {
-    "@almadar-io/behaviors": "^0.16.187",
+    "@almadar-io/behaviors": "^0.16.189",
     "@almadar/eslint-plugin": "^2.21.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",

package/scripts/theme-contrast-audit.mjs

@@ -47,6 +47,16 @@ const PAIRS = [
   ['--color-foreground', '--color-surface'],
 ];
 
+// Drawing surfaces: labels are text (4.5:1); marks are graphics (WCAG 1.4.11, 3:1). Measured
+// against the drawing ground, which falls back to the card when a theme sets none.
+const DIAGRAM_TEXT = ['--color-diagram-label'];
+const DIAGRAM_GRAPHICS = [
+  '--color-diagram-ink',
+  '--color-diagram-axis',
+  '--color-diagram-highlight',
+  ...Array.from({ length: 8 }, (_, i) => `--color-series-${i + 1}`),
+];
+
 let violations = 0;
 for (const mode of loadThemeModes(themesDir, filter)) {
   const results = [];
@@ -57,11 +67,20 @@ for (const mode of loadThemeModes(themesDir, filter)) {
       results.push({ pair: `${fgName} on ${bgName}`, ratio: ratio.toFixed(2), fg: mode.raw(fgName), bg: mode.raw(bgName) });
     }
   }
+  const groundName = mode.color('--surface-diagram') ? '--surface-diagram' : '--color-card';
+  for (const [names, min] of [[DIAGRAM_TEXT, 4.5], [DIAGRAM_GRAPHICS, 3]]) {
+    for (const fgName of names) {
+      const ratio = pairContrast(mode, mode.color(fgName), mode.color(groundName));
+      if (ratio !== null && ratio < min) {
+        results.push({ pair: `${fgName} on ${groundName} (needs ${min}:1)`, ratio: ratio.toFixed(2), fg: mode.raw(fgName), bg: mode.raw(groundName) });
+      }
+    }
+  }
   if (results.length) {
     violations += results.length;
     console.log(`\n${mode.name}  (${mode.file})`);
     for (const r of results) console.log(`  FAIL ${r.ratio}:1  ${r.pair}   fg=${r.fg} bg=${r.bg}`);
   }
 }
-console.log(violations === 0 ? '\nAll theme pairs pass WCAG AA (4.5:1).' : `\n${violations} violation(s).`);
+console.log(violations === 0 ? '\nAll theme pairs pass WCAG AA (text 4.5:1, drawing marks 3:1).' : `\n${violations} violation(s).`);
 process.exit(violations === 0 ? 0 : 1);

package/themes/_base.css

@@ -361,3 +361,64 @@ body {
 .ui-slot-renderer {
     padding-inline-end: var(--almadar-dock-contained-inset, 0px);
 }
+
+/* --------------------------------------------------------------------
+ * Drawing surfaces — canvas, chart, diagram, game board, 3D scene.
+ * Defaults derived from each theme's own tokens, so a theme that sets no
+ * `diagram`/`scene` axis still draws in its own palette, border weight,
+ * faces and corners. Declared on every theme scope (not only :root): a
+ * var() alias resolves where it is declared, so a :root-only default would
+ * freeze the root theme's colors inside a [data-theme] subtree.
+ * -------------------------------------------------------------------- */
+:root,
+[data-theme],
+[data-orbital-theme] {
+    --surface-diagram: var(--color-card);
+
+    --color-diagram-ink: var(--color-foreground);
+    --color-diagram-label: var(--color-muted-foreground);
+    --color-diagram-guide: var(--color-muted-foreground);
+    --color-diagram-axis: var(--color-foreground);
+    --color-diagram-grid: var(--color-border);
+    --color-diagram-highlight: var(--color-primary);
+    --color-diagram-fill: var(--color-muted);
+
+    /* A categorical palette carries no status meaning: the theme's primary
+     * turned around the hue wheel at its own lightness and chroma. */
+    --color-series-1: var(--color-primary);
+    --color-series-2: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 45));
+    --color-series-3: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 90));
+    --color-series-4: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 135));
+    --color-series-5: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 180));
+    --color-series-6: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 225));
+    --color-series-7: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 270));
+    --color-series-8: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 315));
+
+    --diagram-stroke-thin: var(--border-hairline, var(--border-width-thin, 1px));
+    --diagram-stroke-normal: calc(var(--border-standard, var(--border-width, 1px)) * 1.5);
+    --diagram-stroke-bold: calc(var(--border-heavy, var(--border-width-thick, 2px)) * 1.5);
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.18;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: var(--font-weight-medium, 500);
+    --diagram-label-case: none;
+    --diagram-corner: var(--radius-sm, 4px);
+
+    --material-roughness: 0.6;
+    --material-metalness: 0;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1;
+    --light-key-color: #ffffff;
+    --scene-fog: 0;
+}

package/themes/_contract.md

@@ -253,6 +253,37 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 
 ---
 
+### Drawing axes — `diagram`, `scene`, diagram colors, `--surface-diagram`
+
+How every drawing surface (learning canvases, charts, graph canvases, game boards, AVL, 3D
+scenes) draws its marks. Components never hardcode a drawing color, weight or face; they resolve
+these through `useCanvasTheme` (`hooks/useCanvasTheme.ts`). Defaults in `_base.css` derive every
+var from the theme's own tokens, so a preset that sets nothing still draws in its own palette,
+border weight, faces and corners. A preset sets them to give its drawings a hand of their own
+(sketch wobble, neon glow, blueprint dashes, Bauhaus square caps).
+
+| Var | Source key | Meaning |
+|---|---|---|
+| `--surface-diagram` | `surface.diagram` | Ground a drawing sits on (default `--color-card`) |
+| `--color-series-1…8` | `colors.series-N` | Categorical data palette with no status meaning (default: primary turned around the hue wheel) |
+| `--color-diagram-ink` / `-label` / `-guide` / `-axis` / `-grid` / `-highlight` / `-fill` | `colors.diagram-*` | Mark roles: default stroke, label text, construction lines, axes, grid, the one emphasized mark, default fill |
+| `--diagram-stroke-thin` / `-normal` / `-bold` | `diagram.strokeThin/Normal/Bold` | Stroke weights for guides / marks / emphasis (default from the border rhythm) |
+| `--diagram-line-cap` / `-line-join` | `diagram.lineCap/lineJoin` | `butt\|round\|square` / `miter\|round\|bevel` |
+| `--diagram-dash` / `-dot` | `diagram.dash/dot` | Dash patterns (space-separated lengths) of dashed / dotted marks |
+| `--diagram-fill-style` / `-fill-opacity` | `diagram.fillStyle/fillOpacity` | `solid\|tint\|outline\|hatch`; tint strength |
+| `--diagram-roughness` | `diagram.roughness` | Hand-drawn wobble in px (`0` = exact) |
+| `--diagram-glow` | `diagram.glow` | Glow blur in px around strokes (`0` = none) |
+| `--diagram-shadow` | `diagram.shadow` | Shadow recipe on filled marks |
+| `--diagram-marker` | `diagram.marker` | Arrowhead: `triangle\|open\|line\|dot` |
+| `--diagram-label-font` / `-size` / `-weight` / `-case` | `diagram.label*` | Label face (`body\|display\|mono`), type-scale step, weight, `none\|uppercase` |
+| `--diagram-corner` | `diagram.corner` | Corner radius of rects and bars |
+| `--material-roughness` / `-metalness` / `-flat` / `-outline` | `scene.material*` | 3D material response; `flat` `1` = flat shading; `outline` = toon outline px |
+| `--light-ambient` / `-key` / `-key-color` | `scene.light*` | 3D lighting |
+| `--scene-fog` | `scene.fog` | Depth haze 0–1 |
+
+Motion has no drawing-specific vars: animated surfaces use `--duration-*` / `--easing-*` and stop
+when `--motion-enable: off` or `prefers-reduced-motion` is set.
+
 ## Authoring rules
 
 1. **Backfill agents** (B1, B2, B3): copy the defaults above verbatim into each existing theme's light and dark blocks. Do not change any pre-existing variable. The migration must produce pixel-identical output to today for every pre-Layer-1 theme.
@@ -262,3 +293,9 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 5. **Wireframe and trait-wars exceptions**. Wireframe's `--easing-standard` is `linear` not the default cubic-bezier; trait-wars's iconography may remain `lucide` even if its visual personality diverges. Document any per-theme override at the top of the theme file.
 6. **Contrast is gated.** Every theme's canonical foreground/fill pairs must pass WCAG AA 4.5:1 — enforced by `scripts/theme-contrast-audit.mjs` (`pnpm verify:themes`), which runs in CI and before every npm publish and exits non-zero on any violation. A new or edited theme that fails the audit blocks the publish. The script also accepts `--dir <themes-dir>` (`scripts/` is published) so another package can audit its own theme dir with the same rules.
 7. **No hardcoded palette colors in components.** Components must consume these tokens only (no `text-white`, `bg-gray-800`, `border-indigo-300`, `text-[#hex]`). Enforced by the `almadar/no-hardcoded-colors` ESLint rule (`@almadar/eslint-plugin`, enabled in this package's `eslint.config.cjs`). The single sanctioned exception is media-overlay chrome (white text / dark scrims painted over images or video), which requires an inline `eslint-disable-next-line almadar/no-hardcoded-colors` comment stating the reason.
+
+**Drawing roles stay apart.** In every theme mode the roles a canvas draws meaning with — `diagram-ink`,
+`diagram-highlight`, `muted-foreground`, `success`, `warning`, `error`, `series-1`…`series-8` — are at least
+ΔE 10 (CIEDE2000) from each other (`@almadar/core` `__tests__/theme-tone-colors.test.ts`; `INDISTINCT_DELTA_E`).
+A monochrome theme keeps its UI monochrome and gives its drawings a small on-identity palette. In an `outline`
+fill-style theme a mark's meaningful fill becomes its (bold) outline, so the outline look never erases a state.

package/themes/almadar-heritage.css

@@ -36,6 +36,21 @@
     --color-info: #00767c;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(15, 23, 42, 0.55);
+    --color-series-1: #00767c;
+    --color-series-2: #7d7d12;
+    --color-series-3: #215eac;
+    --color-series-4: #a4444c;
+    --color-series-5: #536225;
+    --color-series-6: #7a4a8a;
+    --color-series-7: #875c27;
+    --color-series-8: #6b7689;
+    --color-diagram-ink: #1f2d3d;
+    --color-diagram-label: #334155;
+    --color-diagram-guide: #8a8f98;
+    --color-diagram-axis: #64748b;
+    --color-diagram-grid: #e4e0d8;
+    --color-diagram-highlight: #a07a10;
+    --color-diagram-fill: #00767c;
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 6px;
@@ -186,6 +201,32 @@
     --surface-card-image: none;
     --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%2300767c' stroke-opacity='0.07' stroke-width='1'><path d='M24 0V48M0 24H48'/><path d='M24 18L30 24L24 30L18 24Z'/></g></svg>");
     --surface-page-image-size: 48px 48px;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.16;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.55;
+    --material-metalness: 0.25;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1;
+    --light-key-color: #fff4d6;
+    --scene-fog: 0.05;
 }
 
 [data-theme="almadar-heritage-dark"] {
@@ -220,6 +261,21 @@
     --color-info: #2cc7cd;
     --color-info-foreground: #000000;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #0a98a0;
+    --color-series-2: #a9841b;
+    --color-series-3: #568acf;
+    --color-series-4: #b86a60;
+    --color-series-5: #7d9146;
+    --color-series-6: #a379b1;
+    --color-series-7: #b57b43;
+    --color-series-8: #758091;
+    --color-diagram-ink: #e6e1d4;
+    --color-diagram-label: #c9ced8;
+    --color-diagram-guide: #7f8aa0;
+    --color-diagram-axis: #98a2b6;
+    --color-diagram-grid: #2a3650;
+    --color-diagram-highlight: #c3ae41;
+    --color-diagram-fill: #00b1b8;
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;
@@ -370,4 +426,30 @@
     --surface-card-image: none;
     --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%2300b1b8' stroke-opacity='0.06' stroke-width='1'><path d='M24 0V48M0 24H48'/><path d='M24 18L30 24L24 30L18 24Z'/></g></svg>");
     --surface-page-image-size: 72px 72px;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.16;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.55;
+    --material-metalness: 0.25;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1;
+    --light-key-color: #fff4d6;
+    --scene-fog: 0.05;
 }