@burdenoff/fe-libs 2026.1021.5 → 2026.1021.7

package/dist/ui/cta-overflow-menu.js

@@ -1,38 +1,38 @@
-import { cn as e } from "../shared-utils.js";
-import { Button as t } from "./button.js";
-import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuItem as i, DropdownMenuTrigger as a } from "./dropdown-menu.js";
-import { useShellLabel as o } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { cn as t } from "../shared-utils.js";
+import { Button as n } from "./button.js";
+import { DropdownMenu as r, DropdownMenuContent as i, DropdownMenuItem as a, DropdownMenuTrigger as o } from "./dropdown-menu.js";
 import { MoreHorizontal as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/ui/cta-overflow-menu.tsx
 function u({ primary: u, actions: d, align: f = "end", className: p }) {
-	let m = o();
+	let m = e();
 	return /* @__PURE__ */ l("div", {
-		className: e("flex items-center gap-2", p),
-		children: [u ? /* @__PURE__ */ l(t, {
+		className: t("flex items-center gap-2", p),
+		children: [u ? /* @__PURE__ */ l(n, {
 			type: "button",
 			variant: "default",
 			onClick: u.onSelect,
 			disabled: u.disabled,
 			children: [u.icon, u.label]
-		}) : null, d.length > 0 ? /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(a, {
+		}) : null, d.length > 0 ? /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(o, {
 			asChild: !0,
-			children: /* @__PURE__ */ c(t, {
+			children: /* @__PURE__ */ c(n, {
 				type: "button",
 				variant: "outline",
 				size: "icon",
 				"aria-label": m("common.moreActions", "More actions"),
 				children: /* @__PURE__ */ c(s, {})
 			})
-		}), /* @__PURE__ */ c(r, {
+		}), /* @__PURE__ */ c(i, {
 			align: f,
-			children: d.map((t, n) => /* @__PURE__ */ l(i, {
-				"data-tour": t.dataTour,
-				disabled: t.disabled,
-				onSelect: t.onSelect,
-				className: e("gap-2", t.intent === "destructive" && "text-status-error-text focus:text-status-error-text focus:bg-status-error-bg-subtle"),
-				children: [t.icon, t.label]
-			}, `${t.label}-${n}`))
+			children: d.map((e, n) => /* @__PURE__ */ l(a, {
+				"data-tour": e.dataTour,
+				disabled: e.disabled,
+				onSelect: e.onSelect,
+				className: t("gap-2", e.intent === "destructive" && "text-status-error-text focus:text-status-error-text focus:bg-status-error-bg-subtle"),
+				children: [e.icon, e.label]
+			}, `${e.label}-${n}`))
 		})] }) : null]
 	});
 }

package/dist/ui/guidance.js

@@ -1,5 +1,5 @@
-import { cn as e } from "../shared-utils.js";
-import { useShellLabel as t } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { cn as t } from "../shared-utils.js";
 import { useEffect as n, useState as r } from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/ui/guidance.tsx
@@ -17,13 +17,13 @@ var s = ({ className: e }) => /* @__PURE__ */ o("svg", {
 		opacity: "0.6"
 	})]
 });
-function c({ children: t, icon: n, learnMoreHref: r, learnMoreLabel: s = "Learn more", className: c }) {
+function c({ children: e, icon: n, learnMoreHref: r, learnMoreLabel: s = "Learn more", className: c }) {
 	return /* @__PURE__ */ o("p", {
-		className: e("flex items-start gap-2 text-sm leading-relaxed text-text-secondary", c),
+		className: t("flex items-start gap-2 text-sm leading-relaxed text-text-secondary", c),
 		children: [n && /* @__PURE__ */ a("span", {
 			className: "mt-0.5 shrink-0 text-text-muted",
 			children: n
-		}), /* @__PURE__ */ o("span", { children: [t, r && /* @__PURE__ */ o(i, { children: [" ", /* @__PURE__ */ a("a", {
+		}), /* @__PURE__ */ o("span", { children: [e, r && /* @__PURE__ */ o(i, { children: [" ", /* @__PURE__ */ a("a", {
 			href: r,
 			className: "font-medium text-text-link underline-offset-2 hover:underline",
 			target: r.startsWith("http") ? "_blank" : void 0,
@@ -35,7 +35,7 @@ function c({ children: t, icon: n, learnMoreHref: r, learnMoreLabel: s = "Learn
 c.displayName = "PagePurpose";
 var l = "boff-nextsteps-";
 function u({ steps: i, title: c, storageKey: u, className: d }) {
-	let f = t(), p = c ?? f("guidance.title", "Suggested next steps"), m = l + u, [h, g] = r(!1);
+	let f = e(), p = c ?? f("guidance.title", "Suggested next steps"), m = l + u, [h, g] = r(!1);
 	n(() => {
 		try {
 			g(localStorage.getItem(m) === "1");
@@ -51,13 +51,13 @@ function u({ steps: i, title: c, storageKey: u, className: d }) {
 	if (h) return /* @__PURE__ */ o("button", {
 		type: "button",
 		onClick: () => _(!1),
-		className: e("inline-flex items-center gap-1.5 rounded-full border border-border-seam bg-[var(--color-surface-glass)] px-3 py-1.5 text-xs font-medium text-text-secondary shadow-elevation-1 backdrop-blur-[var(--blur-glass)] transition-[box-shadow,border-color] hover:border-border-strong hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", d),
+		className: t("inline-flex items-center gap-1.5 rounded-full border border-border-seam bg-[var(--color-surface-glass)] px-3 py-1.5 text-xs font-medium text-text-secondary shadow-elevation-1 backdrop-blur-[var(--blur-glass)] transition-[box-shadow,border-color] hover:border-border-strong hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", d),
 		children: [/* @__PURE__ */ a(s, { className: "size-3.5 text-[var(--color-action-primary-bg)]" }), "Show suggestions"]
 	});
 	let v = i.filter((e) => !e.done).length;
 	return /* @__PURE__ */ o("section", {
 		"aria-label": p,
-		className: e("relative overflow-hidden rounded-card border border-border-seam bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)]", d),
+		className: t("relative overflow-hidden rounded-card border border-border-seam bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)]", d),
 		children: [/* @__PURE__ */ o("div", {
 			className: "flex items-center justify-between gap-3 px-4 pt-3.5",
 			children: [/* @__PURE__ */ o("h3", {
@@ -90,15 +90,15 @@ function u({ steps: i, title: c, storageKey: u, className: d }) {
 			})]
 		}), /* @__PURE__ */ a("ul", {
 			className: "flex flex-col gap-1 p-2.5 pt-2",
-			children: i.map((t) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o(t.href ? "a" : "button", {
-				...t.href ? { href: t.href } : {
+			children: i.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o(e.href ? "a" : "button", {
+				...e.href ? { href: e.href } : {
 					type: "button",
-					onClick: t.onClick
+					onClick: e.onClick
 				},
-				className: e("group flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-[var(--color-surface-glass)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", t.done && "opacity-60"),
+				className: t("group flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-[var(--color-surface-glass)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", e.done && "opacity-60"),
 				children: [/* @__PURE__ */ a("span", {
-					className: e("mt-0.5 grid size-7 shrink-0 place-items-center rounded-full border text-[var(--color-action-primary-bg)]", t.done ? "border-border-subtle bg-bg-muted text-text-muted" : "border-[color-mix(in_oklab,var(--color-action-primary-bg)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-action-primary-bg)_12%,transparent)]"),
-					children: t.done ? /* @__PURE__ */ a("svg", {
+					className: t("mt-0.5 grid size-7 shrink-0 place-items-center rounded-full border text-[var(--color-action-primary-bg)]", e.done ? "border-border-subtle bg-bg-muted text-text-muted" : "border-[color-mix(in_oklab,var(--color-action-primary-bg)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-action-primary-bg)_12%,transparent)]"),
+					children: e.done ? /* @__PURE__ */ a("svg", {
 						viewBox: "0 0 24 24",
 						className: "size-4",
 						fill: "none",
@@ -110,18 +110,18 @@ function u({ steps: i, title: c, storageKey: u, className: d }) {
 							strokeLinecap: "round",
 							strokeLinejoin: "round"
 						})
-					}) : t.icon ?? /* @__PURE__ */ a(s, { className: "size-4" })
+					}) : e.icon ?? /* @__PURE__ */ a(s, { className: "size-4" })
 				}), /* @__PURE__ */ o("span", {
 					className: "min-w-0 flex-1",
 					children: [/* @__PURE__ */ a("span", {
 						className: "block text-sm font-medium text-text-primary",
-						children: t.label
-					}), t.description && /* @__PURE__ */ a("span", {
+						children: e.label
+					}), e.description && /* @__PURE__ */ a("span", {
 						className: "block text-xs text-text-secondary",
-						children: t.description
+						children: e.description
 					})]
 				})]
-			}) }, t.id))
+			}) }, e.id))
 		})]
 	});
 }

package/dist/ui/index.d.ts

@@ -36,7 +36,7 @@ export { GlassCard, glassCardVariants, type GlassCardProps } from './glass-card'
 export { EmphasisPanel, type EmphasisPanelProps } from './emphasis-panel';
 export { ShowMore, type ShowMoreProps } from './show-more';
 export { CTAOverflowMenu, type CTAOverflowMenuProps, type CTAAction, type CTAPrimaryAction, } from './cta-overflow-menu';
-export { BrandedSplash, type BrandedSplashProps } from './branded-splash';
+export { BrandedSplash, type BrandedSplashPhase, type BrandedSplashProps } from './branded-splash';
 export { ModernLanding, type ModernLandingProps, type ModernLandingFeature, } from './modern-landing';
 export { AuroraBackground, type AuroraBackgroundProps } from './aurora-background';
 export { Illustration, type IllustrationProps, IllustratedEmptyState, type IllustratedEmptyStateProps, } from './illustration';

package/dist/utils/index.js

@@ -1,5 +1,6 @@
 import "../shared/utils/apollo.js";
 import "../shared/utils/tokens.js";
+import "../shared/utils/canvasTokens.js";
 import "../shared/utils/format.js";
 import "../shared/utils/lazyWithRetry.js";
 import "../shared/utils/gatewayFetchRewrite.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/fe-libs",
-  "version": "2026.1021.5",
+  "version": "2026.1021.7",
   "description": "Burdenoff frontend primitives and domain libraries",
   "type": "module",
   "bin": {
@@ -232,6 +232,10 @@
       "style": "./src/shared/styles/native.css",
       "default": "./src/shared/styles/native.css"
     },
+    "./shared/styles/canvas-theme.css": {
+      "style": "./src/shared/styles/canvas-theme.css",
+      "default": "./src/shared/styles/canvas-theme.css"
+    },
     "./shared/utils/lazyWithRetry": {
       "types": "./dist/shared/utils/lazyWithRetry.d.ts",
       "import": "./dist/shared/utils/lazyWithRetry.js"
@@ -311,7 +315,7 @@
     "test:package-livekit-optional": "node scripts/validate-livekit-optional.mjs",
     "verify:package": "node scripts/verify-package-contents.mjs",
     "test:handsfree-browser": "node scripts/handsfree-browser-run.mjs",
-    "test": "bun test scripts/graphql-schema-drift/__tests__ scripts/a11y-audit/__tests__ src/credentials src/connections src/storage src/shared/assistant src/shared/components src/shared/graphql/links/sse-link.test.ts src/shared/graphql/fetch.test.ts src/shared/graphql/prepareWorkspaceRequest.test.ts src/shared/graphql/client.test.ts src/shared/utils/apollo.test.ts src/shared/graphql/tourWorkspaceAuth.test.ts src/shared/config/gatewayUrls.test.ts src/shared/config/authBridgeUrls.test.ts src/shared/config/shellRoutes.test.ts src/shared/config/gatewayFallback.test.ts scripts/__tests__ src/shared/config/products.test.ts src/shared/config/productSlug.test.ts src/shared/hooks/shell/useProducts.test.ts src/shared/providers/shell/brandAttribute.test.ts src/chrome/ProductSwitcher.test.ts src/shared/utils/gatewayFetchRewrite.test.ts src/shared/utils/authCookie.test.ts src/shared/utils/redirectAllowlist.test.ts src/shared/providers/shell/ProfileStorageManager.test.ts src/shared/providers/AppShellProvider.test.ts src/shared/providers/shell/interpolate.test.ts src/shared/providers/shell/resolveTranslation.test.ts src/shared/providers/shell/I18nProvider.render.test.tsx src/shared/providers/shell/I18nProvider.client.test.tsx src/shared/providers/shell/translationStore.test.ts src/shared/providers/shell/translationLayers.test.ts src/shared/providers/shell/directionMode.test.ts src/shared/providers/shell/authProvider/ssoRelay.test.ts src/shared/providers/shell/authProvider/useAuthActions.signOut.test.tsx src/shared/providers/shell/personaSurfaceRemote.test.ts src/shared/providers/shell/workspaceSwitch.client.test.tsx src/shared/events/sinks/RybbitSink.test.ts src/shell-native src/shared/native src/shared/navigation src/shared/tours src/chrome/__tests__ src/ui/__tests__",
+    "test": "bun test scripts/graphql-schema-drift/__tests__ scripts/a11y-audit/__tests__ src/credentials src/connections src/storage src/shared/assistant src/shared/components src/shared/graphql/links/sse-link.test.ts src/shared/graphql/fetch.test.ts src/shared/graphql/prepareWorkspaceRequest.test.ts src/shared/graphql/client.test.ts src/shared/utils/apollo.test.ts src/shared/utils/canvasTokens.test.ts src/shared/graphql/tourWorkspaceAuth.test.ts src/shared/config/gatewayUrls.test.ts src/shared/config/authBridgeUrls.test.ts src/shared/config/shellRoutes.test.ts src/shared/config/gatewayFallback.test.ts scripts/__tests__ src/shared/config/products.test.ts src/shared/config/productSlug.test.ts src/shared/hooks/shell/useProducts.test.ts src/shared/providers/shell/brandAttribute.test.ts src/chrome/ProductSwitcher.test.ts src/shared/utils/gatewayFetchRewrite.test.ts src/shared/utils/authCookie.test.ts src/shared/utils/redirectAllowlist.test.ts src/shared/providers/shell/ProfileStorageManager.test.ts src/shared/providers/AppShellProvider.test.ts src/shared/providers/shell/interpolate.test.ts src/shared/providers/shell/resolveTranslation.test.ts src/shared/providers/shell/I18nProvider.render.test.tsx src/shared/providers/shell/I18nProvider.client.test.tsx src/shared/providers/shell/translationStore.test.ts src/shared/providers/shell/translationLayers.test.ts src/shared/providers/shell/directionMode.test.ts src/shared/providers/shell/authProvider/ssoRelay.test.ts src/shared/providers/shell/authProvider/useAuthActions.signOut.test.tsx src/shared/providers/shell/personaSurfaceRemote.test.ts src/shared/providers/shell/workspaceSwitch.client.test.tsx src/shared/events/sinks/RybbitSink.test.ts src/shell-native src/shared/native src/shared/navigation src/shared/tours src/chrome/__tests__ src/ui/__tests__",
     "sanity": "bash scripts/build-limits.sh --gate bash -c 'bun run lint:sanity && bun run format && bun run type:check && bun run test && bun run build && bun run verify:package'",
     "switch:status": "bun scripts/deps-mode.ts status",
     "switch:remote": "bun scripts/deps-mode.ts remote",

package/shared/config/eslint.config.d.mts

@@ -3,8 +3,29 @@ import type { Linter } from 'eslint';
 export interface EslintConfigOptions {
   ignores?: string[];
   additionalRules?: Record<string, unknown>;
+  /**
+   * Severity of the raw-colour / palette-class guard (hex, rgb()/hsl()/oklch()
+   * literals and Tailwind palette classes such as `bg-red-500` or `text-white`
+   * in string literals and template strings). Defaults to `'error'`. `'warn'`
+   * is a visible, temporary opt-out for a repo that has not swept its
+   * raw-colour debt yet.
+   */
+  rawColors?: 'error' | 'warn' | 'off';
 }
 
+/** esquery regex source matching a hex colour or a CSS colour function with literal channels. */
+export const RAW_COLOR_PATTERN: string;
+
+/** esquery regex source matching a Tailwind palette class or a black/white colour class. */
+export const PALETTE_CLASS_PATTERN: string;
+
+/**
+ * The `no-restricted-syntax` entries behind the raw-colour guard, for repos
+ * with a standalone ESLint config:
+ * `'no-restricted-syntax': ['error', ...rawColorRestrictedSyntax()]`.
+ */
+export function rawColorRestrictedSyntax(): { selector: string; message: string }[];
+
 export function createEslintConfig(options?: EslintConfigOptions): Linter.FlatConfig[];
 
 export default createEslintConfig;

package/shared/config/eslint.config.mjs

@@ -4,15 +4,83 @@ import reactHooks from 'eslint-plugin-react-hooks';
 import react from 'eslint-plugin-react';
 import tseslint from 'typescript-eslint';
 
+/*
+ * ── Raw-colour guard ────────────────────────────────────────────────────────
+ * UI code uses the semantic tokens in fe-libs/shared/tokens (bg-*, text-*,
+ * border-*, action-*, status-*, chart-*, node-*, edge-*, canvas-*), never a raw
+ * colour. The guard reads string literals and template-string parts only, so
+ * a comment that quotes a PR number ("#268") or a bad class is never flagged.
+ *
+ * The patterns are esquery regexes: they must not contain "/" and use no flags.
+ */
+
+/**
+ * A hex colour (#rgb, #rgba, #rrggbb, #rrggbbaa) not glued to a word on the
+ * left (so `{` and `page#abc` pass) or the right (so `#1234567` passes),
+ * or a CSS colour function with literal channels. `rgb(var(--x))` builds on a
+ * token and is allowed.
+ */
+export const RAW_COLOR_PATTERN =
+  '(?:^|[^&\\w])#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})(?![\\w-])|\\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\\((?!\\s*var\\()';
+
+/**
+ * A Tailwind palette class (`bg-red-500`, `hover:text-slate-50`,
+ * `border-t-gray-200`, `bg-blue-500/20`) or a named black/white one
+ * (`text-white`, `bg-black/50`) on any colour utility. Token classes such as
+ * `text-text-primary`, `bg-status-error-bg` or `stroke-edge-default` do not match.
+ */
+export const PALETTE_CLASS_PATTERN =
+  '(?:^|[\\s:!])-?(?:bg|text|border(?:-[trblxyse])?|ring(?:-offset)?|inset-ring|outline|fill|stroke|divide|from|via|to|decoration|caret|accent|shadow|inset-shadow|drop-shadow|placeholder)-(?:(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|[1-9]00|950)|black|white)(?![\\w-])';
+
+const RAW_COLOR_MESSAGE =
+  'Use semantic tokens from @burdenoff/fe-libs/shared/tokens/tokens.css (bg-*, text-*, border-*, action-*, status-*, chart-*, node-*, edge-*, canvas-*) — not raw colours.';
+const PALETTE_CLASS_MESSAGE =
+  'Use semantic token classes (bg-bg-surface, text-text-primary, bg-status-error-bg, text-chart-3, bg-node-trigger, stroke-edge-default; scrims bg-bg-overlay; text on an accent fill text-action-primary-text) — not Tailwind palette classes.';
+
+/**
+ * The `no-restricted-syntax` entries that ban raw colours and palette classes
+ * in string literals and template strings. Exported so a repo with its own
+ * standalone ESLint config can apply the same guard:
+ *
+ *   'no-restricted-syntax': ['error', ...rawColorRestrictedSyntax()]
+ *
+ * @returns {{ selector: string, message: string }[]}
+ */
+export function rawColorRestrictedSyntax() {
+  return [
+    { selector: `Literal[value=/${RAW_COLOR_PATTERN}/]`, message: RAW_COLOR_MESSAGE },
+    { selector: `TemplateElement[value.raw=/${RAW_COLOR_PATTERN}/]`, message: RAW_COLOR_MESSAGE },
+    { selector: `Literal[value=/${PALETTE_CLASS_PATTERN}/]`, message: PALETTE_CLASS_MESSAGE },
+    {
+      selector: `TemplateElement[value.raw=/${PALETTE_CLASS_PATTERN}/]`,
+      message: PALETTE_CLASS_MESSAGE,
+    },
+  ];
+}
+
+/** Test files may assert on literal colours; the guard is for shipped UI. */
+const TEST_FILES = ['**/*.{test,spec}.{ts,tsx}', '**/__tests__/**/*.{ts,tsx}'];
+
+const RAW_COLOR_SEVERITIES = ['error', 'warn', 'off'];
+
 /**
  * Creates a shared ESLint configuration for Burdenoff frontend projects.
  * @param {Object} options - Configuration options
- * @param {string[]} options.ignores - Additional ignore patterns
- * @param {Record<string, unknown>} options.additionalRules - Additional ESLint rules
+ * @param {string[]} [options.ignores] - Additional ignore patterns
+ * @param {Record<string, unknown>} [options.additionalRules] - Additional ESLint rules
+ * @param {'error' | 'warn' | 'off'} [options.rawColors] - Severity of the raw-colour /
+ *   palette-class guard. Defaults to 'error'. 'warn' is for a repo that still carries
+ *   raw-colour debt it has not swept yet; it is a visible, temporary opt-out.
  * @returns {import('eslint').Linter.FlatConfig[]} ESLint flat config array
  */
 export function createEslintConfig(options = {}) {
-  const { ignores = [], additionalRules = {} } = options;
+  const { ignores = [], additionalRules = {}, rawColors = 'error' } = options;
+  if (!RAW_COLOR_SEVERITIES.includes(rawColors)) {
+    throw new Error(
+      `createEslintConfig: rawColors must be one of ${RAW_COLOR_SEVERITIES.join(', ')}, got ${String(rawColors)}`
+    );
+  }
+  const colourRule = rawColors === 'off' ? 'off' : [rawColors, ...rawColorRestrictedSyntax()];
 
   return tseslint.config(
     { ignores: ['**/dist', '**/node_modules', '**/*.stories.tsx', ...ignores] },
@@ -63,21 +131,8 @@ export function createEslintConfig(options = {}) {
             ],
           },
         ],
-        'no-restricted-syntax': [
-          'warn',
-          {
-            selector:
-              "Literal[value=/(?:#[0-9a-fA-F]{3,8}\\b)|(?:rgb[a]?\\()|(?:hsl[a]?\\()/]",
-            message:
-              'Use semantic tokens from fe-libs/shared/tokens/tokens.css (bg-*, text-*, action-*, status-*) — not raw colours.',
-          },
-          {
-            selector:
-              "TemplateElement[value.raw=/(?:#[0-9a-fA-F]{3,8}\\b)|(?:rgb[a]?\\()|(?:hsl[a]?\\()/]",
-            message:
-              'Use semantic tokens from fe-libs/shared/tokens/tokens.css — not raw colours in template strings.',
-          },
-        ],
+        // Semantic tokens only — no hex/rgb/hsl and no Tailwind palette class.
+        'no-restricted-syntax': colourRule,
         ...additionalRules,
       },
       settings: {
@@ -85,6 +140,13 @@ export function createEslintConfig(options = {}) {
           version: 'detect',
         },
       },
+    },
+    {
+      // Tests keep any no-restricted-syntax the repo set itself, minus the colour guard.
+      files: TEST_FILES,
+      rules: {
+        'no-restricted-syntax': additionalRules['no-restricted-syntax'] ?? 'off',
+      },
     }
   );
 }

package/src/shared/styles/app-shell.css

@@ -13,6 +13,9 @@
 /* Installed-app (Capacitor / PWA / Electron) look & feel rules. */
 @import './native.css';
 
+/* Canvas / node / edge / data-type utilities (bg-node-*, stroke-edge-*, …). */
+@import './canvas-theme.css';
+
 /* ============================================
  * @theme — Tailwind v4 theme configuration
  * Maps fe-libs design tokens to Tailwind utilities

package/src/shared/styles/canvas-theme.css

@@ -0,0 +1,82 @@
+/**
+ * Canvas / node / edge / data-type token utilities (Tailwind v4).
+ *
+ * Maps the G19 builder tokens from tokens.css to utilities such as
+ * `bg-node-trigger`, `bg-node-logic-subtle`, `border-node-border-selected`,
+ * `ring-node-state-running`, `stroke-edge-default`, `fill-canvas-grid` and
+ * `text-datatype-string`. Imported by app-shell.css; a shell with its own
+ * @theme imports it directly:
+ *
+ *   @import "tailwindcss";
+ *   @import '@burdenoff/fe-libs/shared/tokens/tokens.css';
+ *   @import '@burdenoff/fe-libs/shared/styles/canvas-theme.css';
+ *
+ * For values outside Tailwind (React Flow props, SVG attributes, inline
+ * styles) use `var(--color-…)` directly, or the helpers in
+ * @burdenoff/fe-libs/shared/utils (nodeCategoryColor, edgeColor, …).
+ */
+@theme {
+  --color-canvas-bg: var(--color-canvas-bg);
+  --color-canvas-grid: var(--color-canvas-grid);
+  --color-canvas-selection: var(--color-canvas-selection);
+  --color-canvas-minimap-bg: var(--color-canvas-minimap-bg);
+  --color-canvas-minimap-node: var(--color-canvas-minimap-node);
+  --color-canvas-minimap-mask: var(--color-canvas-minimap-mask);
+  --color-canvas-control-bg: var(--color-canvas-control-bg);
+  --color-node-bg: var(--color-node-bg);
+  --color-node-bg-hover: var(--color-node-bg-hover);
+  --color-node-border: var(--color-node-border);
+  --color-node-border-hover: var(--color-node-border-hover);
+  --color-node-border-selected: var(--color-node-border-selected);
+  --color-node-text: var(--color-node-text);
+  --color-node-text-muted: var(--color-node-text-muted);
+  --color-node-handle: var(--color-node-handle);
+  --color-node-handle-connected: var(--color-node-handle-connected);
+  --color-node-trigger: var(--color-node-trigger);
+  --color-node-trigger-subtle: var(--color-node-trigger-subtle);
+  --color-node-action: var(--color-node-action);
+  --color-node-action-subtle: var(--color-node-action-subtle);
+  --color-node-logic: var(--color-node-logic);
+  --color-node-logic-subtle: var(--color-node-logic-subtle);
+  --color-node-loop: var(--color-node-loop);
+  --color-node-loop-subtle: var(--color-node-loop-subtle);
+  --color-node-data: var(--color-node-data);
+  --color-node-data-subtle: var(--color-node-data-subtle);
+  --color-node-integration: var(--color-node-integration);
+  --color-node-integration-subtle: var(--color-node-integration-subtle);
+  --color-node-ai: var(--color-node-ai);
+  --color-node-ai-subtle: var(--color-node-ai-subtle);
+  --color-node-human: var(--color-node-human);
+  --color-node-human-subtle: var(--color-node-human-subtle);
+  --color-node-utility: var(--color-node-utility);
+  --color-node-utility-subtle: var(--color-node-utility-subtle);
+  --color-node-end: var(--color-node-end);
+  --color-node-end-subtle: var(--color-node-end-subtle);
+  --color-node-default: var(--color-node-default);
+  --color-node-default-subtle: var(--color-node-default-subtle);
+  --color-node-state-idle: var(--color-node-state-idle);
+  --color-node-state-queued: var(--color-node-state-queued);
+  --color-node-state-running: var(--color-node-state-running);
+  --color-node-state-success: var(--color-node-state-success);
+  --color-node-state-warning: var(--color-node-state-warning);
+  --color-node-state-error: var(--color-node-state-error);
+  --color-node-state-skipped: var(--color-node-state-skipped);
+  --color-edge-default: var(--color-edge-default);
+  --color-edge-hover: var(--color-edge-hover);
+  --color-edge-selected: var(--color-edge-selected);
+  --color-edge-active: var(--color-edge-active);
+  --color-edge-success: var(--color-edge-success);
+  --color-edge-error: var(--color-edge-error);
+  --color-edge-compatible: var(--color-edge-compatible);
+  --color-edge-incompatible: var(--color-edge-incompatible);
+  --color-edge-label-bg: var(--color-edge-label-bg);
+  --color-edge-label-text: var(--color-edge-label-text);
+  --color-datatype-string: var(--color-datatype-string);
+  --color-datatype-number: var(--color-datatype-number);
+  --color-datatype-boolean: var(--color-datatype-boolean);
+  --color-datatype-object: var(--color-datatype-object);
+  --color-datatype-array: var(--color-datatype-array);
+  --color-datatype-date: var(--color-datatype-date);
+  --color-datatype-binary: var(--color-datatype-binary);
+  --color-datatype-any: var(--color-datatype-any);
+}

package/src/shared/tokens/build/semantic.css

@@ -506,6 +506,89 @@
   --color-focus-ring: var(--color-action-primary-bg);
 }
 
+/* G19: canvas, node-category, edge and data-type tokens (workflow builders,
+ * graphs, mappers). Every value ALIASES an existing chart-* / status-* /
+ * surface token — no new palette — so light, dark, every brand and the
+ * expressive / high-contrast themes come for free.
+ *
+ * Declared on each element that can carry a theme (not only :root) so a
+ * `.dark` subtree re-resolves the aliases against ITS chart/status values;
+ * a var() alias declared only on :root would inherit the light value. */
+:root,
+[data-theme],
+[data-brand],
+.dark {
+  /* Canvas */
+  --color-canvas-bg: var(--color-bg-canvas);
+  --color-canvas-grid: var(--color-chart-grid);
+  --color-canvas-selection: var(--color-bg-accentSubtle);
+  --color-canvas-minimap-bg: var(--color-bg-surface);
+  --color-canvas-minimap-node: var(--color-chart-axis);
+  --color-canvas-minimap-mask: var(--color-bg-overlay);
+  --color-canvas-control-bg: var(--color-bg-elevated);
+  /* Node surface */
+  --color-node-bg: var(--color-bg-surface);
+  --color-node-bg-hover: var(--color-bg-elevated);
+  --color-node-border: var(--color-border-default);
+  --color-node-border-hover: var(--color-border-strong);
+  --color-node-border-selected: var(--color-action-primary-bg);
+  --color-node-text: var(--color-text-primary);
+  --color-node-text-muted: var(--color-text-muted);
+  --color-node-handle: var(--color-border-strong);
+  --color-node-handle-connected: var(--color-action-primary-bg);
+  /* Node categories (solid accent + subtle tint for headers / icon wells) */
+  --color-node-trigger: var(--color-chart-7); /* starts a run: webhook, schedule, API, event */
+  --color-node-trigger-subtle: color-mix(in oklab, var(--color-node-trigger) 14%, transparent);
+  --color-node-action: var(--color-chart-1); /* does work: an app or service step */
+  --color-node-action-subtle: color-mix(in oklab, var(--color-node-action) 14%, transparent);
+  --color-node-logic: var(--color-chart-3); /* branches: if, switch, router */
+  --color-node-logic-subtle: color-mix(in oklab, var(--color-node-logic) 14%, transparent);
+  --color-node-loop: var(--color-chart-4); /* iterates: loop, batch, map */
+  --color-node-loop-subtle: color-mix(in oklab, var(--color-node-loop) 14%, transparent);
+  --color-node-data: var(--color-chart-2); /* shapes data: set, filter, aggregate, transform, code */
+  --color-node-data-subtle: color-mix(in oklab, var(--color-node-data) 14%, transparent);
+  --color-node-integration: var(--color-chart-12); /* talks to the outside: HTTP, database, connector */
+  --color-node-integration-subtle: color-mix(in oklab, var(--color-node-integration) 14%, transparent);
+  --color-node-ai: var(--color-chart-8); /* model, agent, embedding, assistant */
+  --color-node-ai-subtle: color-mix(in oklab, var(--color-node-ai) 14%, transparent);
+  --color-node-human: var(--color-chart-6); /* waits on a person: approval, form, review */
+  --color-node-human-subtle: color-mix(in oklab, var(--color-node-human) 14%, transparent);
+  --color-node-utility: var(--color-chart-axis); /* wait, no-op, note, merge */
+  --color-node-utility-subtle: color-mix(in oklab, var(--color-node-utility) 14%, transparent);
+  --color-node-end: var(--color-chart-5); /* stops a run: end, error, return */
+  --color-node-end-subtle: color-mix(in oklab, var(--color-node-end) 14%, transparent);
+  --color-node-default: var(--color-chart-1); /* a node with no known category */
+  --color-node-default-subtle: color-mix(in oklab, var(--color-node-default) 14%, transparent);
+  /* Node execution state (ring / badge) */
+  --color-node-state-idle: var(--color-border-default);
+  --color-node-state-queued: var(--color-chart-axis);
+  --color-node-state-running: var(--color-status-info-bg);
+  --color-node-state-success: var(--color-status-success-bg);
+  --color-node-state-warning: var(--color-status-warning-bg);
+  --color-node-state-error: var(--color-status-error-bg);
+  --color-node-state-skipped: var(--color-chart-axis);
+  /* Edges */
+  --color-edge-default: var(--color-chart-axis);
+  --color-edge-hover: var(--color-text-secondary);
+  --color-edge-selected: var(--color-action-primary-bg);
+  --color-edge-active: var(--color-status-info-bg);
+  --color-edge-success: var(--color-status-success-bg);
+  --color-edge-error: var(--color-status-error-bg);
+  --color-edge-compatible: var(--color-status-info-bg);
+  --color-edge-incompatible: var(--color-status-error-bg);
+  --color-edge-label-bg: var(--color-bg-elevated);
+  --color-edge-label-text: var(--color-text-secondary);
+  /* Port / mapper data types */
+  --color-datatype-string: var(--color-chart-3);
+  --color-datatype-number: var(--color-chart-10);
+  --color-datatype-boolean: var(--color-chart-2);
+  --color-datatype-object: var(--color-chart-12);
+  --color-datatype-array: var(--color-chart-4);
+  --color-datatype-date: var(--color-chart-6);
+  --color-datatype-binary: var(--color-chart-11);
+  --color-datatype-any: var(--color-chart-axis);
+}
+
 /* Large Typography Scale - Auto-generated */
 [data-typography="large"] {
   --font-size-body-sm: 16px;

package/src/shared/tokens/build/tailwind.preset.js

@@ -141,6 +141,71 @@ export default {
         'chart-axis': 'var(--color-chart-axis)',
         'chart-positive': 'var(--color-chart-positive)',
         'chart-negative': 'var(--color-chart-negative)',
+
+        // G19 — canvas / node / edge / data-type tokens
+        'canvas-bg': 'var(--color-canvas-bg)',
+        'canvas-grid': 'var(--color-canvas-grid)',
+        'canvas-selection': 'var(--color-canvas-selection)',
+        'canvas-minimap-bg': 'var(--color-canvas-minimap-bg)',
+        'canvas-minimap-node': 'var(--color-canvas-minimap-node)',
+        'canvas-minimap-mask': 'var(--color-canvas-minimap-mask)',
+        'canvas-control-bg': 'var(--color-canvas-control-bg)',
+        'node-bg': 'var(--color-node-bg)',
+        'node-bg-hover': 'var(--color-node-bg-hover)',
+        'node-border': 'var(--color-node-border)',
+        'node-border-hover': 'var(--color-node-border-hover)',
+        'node-border-selected': 'var(--color-node-border-selected)',
+        'node-text': 'var(--color-node-text)',
+        'node-text-muted': 'var(--color-node-text-muted)',
+        'node-handle': 'var(--color-node-handle)',
+        'node-handle-connected': 'var(--color-node-handle-connected)',
+        'node-trigger': 'var(--color-node-trigger)',
+        'node-trigger-subtle': 'var(--color-node-trigger-subtle)',
+        'node-action': 'var(--color-node-action)',
+        'node-action-subtle': 'var(--color-node-action-subtle)',
+        'node-logic': 'var(--color-node-logic)',
+        'node-logic-subtle': 'var(--color-node-logic-subtle)',
+        'node-loop': 'var(--color-node-loop)',
+        'node-loop-subtle': 'var(--color-node-loop-subtle)',
+        'node-data': 'var(--color-node-data)',
+        'node-data-subtle': 'var(--color-node-data-subtle)',
+        'node-integration': 'var(--color-node-integration)',
+        'node-integration-subtle': 'var(--color-node-integration-subtle)',
+        'node-ai': 'var(--color-node-ai)',
+        'node-ai-subtle': 'var(--color-node-ai-subtle)',
+        'node-human': 'var(--color-node-human)',
+        'node-human-subtle': 'var(--color-node-human-subtle)',
+        'node-utility': 'var(--color-node-utility)',
+        'node-utility-subtle': 'var(--color-node-utility-subtle)',
+        'node-end': 'var(--color-node-end)',
+        'node-end-subtle': 'var(--color-node-end-subtle)',
+        'node-default': 'var(--color-node-default)',
+        'node-default-subtle': 'var(--color-node-default-subtle)',
+        'node-state-idle': 'var(--color-node-state-idle)',
+        'node-state-queued': 'var(--color-node-state-queued)',
+        'node-state-running': 'var(--color-node-state-running)',
+        'node-state-success': 'var(--color-node-state-success)',
+        'node-state-warning': 'var(--color-node-state-warning)',
+        'node-state-error': 'var(--color-node-state-error)',
+        'node-state-skipped': 'var(--color-node-state-skipped)',
+        'edge-default': 'var(--color-edge-default)',
+        'edge-hover': 'var(--color-edge-hover)',
+        'edge-selected': 'var(--color-edge-selected)',
+        'edge-active': 'var(--color-edge-active)',
+        'edge-success': 'var(--color-edge-success)',
+        'edge-error': 'var(--color-edge-error)',
+        'edge-compatible': 'var(--color-edge-compatible)',
+        'edge-incompatible': 'var(--color-edge-incompatible)',
+        'edge-label-bg': 'var(--color-edge-label-bg)',
+        'edge-label-text': 'var(--color-edge-label-text)',
+        'datatype-string': 'var(--color-datatype-string)',
+        'datatype-number': 'var(--color-datatype-number)',
+        'datatype-boolean': 'var(--color-datatype-boolean)',
+        'datatype-object': 'var(--color-datatype-object)',
+        'datatype-array': 'var(--color-datatype-array)',
+        'datatype-date': 'var(--color-datatype-date)',
+        'datatype-binary': 'var(--color-datatype-binary)',
+        'datatype-any': 'var(--color-datatype-any)',
       },
       spacing: {
         'page-padding': 'var(--space-pagePadding)',