perf(ci): eliminate redundant builds and extract shared test helpers

- test and configurator jobs now download the dist artifact from the
  build job instead of running npm run build a second time
- add test:unit script so CI can run unit tests without triggering
  the pretest build hook
- extract resolveTokenLuminance and contrastBetween browser helpers
  into tests/color-helpers.js; remove duplicated bodies from
  color-semantic.spec.js
- fix paletteLuminances to define lin() once outside the map loop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FrqAbbiHbj48rvTiXav54M

Author: claude

.github/workflows/ci.yml

@@ -139,6 +139,7 @@ jobs:
   test:
     name: Regression tests
     runs-on: ubuntu-latest
+    needs: [build]
     steps:
       - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0  # v7.0.0
         with:
@@ -148,14 +149,20 @@ jobs:
           node-version: 22
           cache: npm
       - run: npm ci
-      # `npm test` runs the `pretest` hook (build + unit tests) before Playwright,
-      # so an explicit build step here would just build twice.
+      # Reuse the dist/ artifact from the build job — no need to rebuild.
+      - uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist/
+      # Run unit tests directly (skipping the pretest build hook).
+      - run: npm run test:unit
       - run: npx playwright install --with-deps chromium firefox webkit
-      - run: npm test
+      - run: npx playwright test
 
   configurator:
     name: Configurator tests
     runs-on: ubuntu-latest
+    needs: [build]
     steps:
       - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0  # v7.0.0
         with:
@@ -169,6 +176,13 @@ jobs:
       - run: npm ci
       - run: npm ci
         working-directory: configurator
+      # Reuse the dist/ artifact from the build job so the configurator Vite
+      # build can resolve PreviewPanel.svelte's ?raw CSS import without a
+      # redundant root rebuild.
+      - uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist/
       # Unit suite — the sync tripwire: curated Basic controls, presets, fluid
       # engine scalars and knob defaults all pinned to the live catalogue —
       # plus the Vitest component suite (test runs both via test:unit/components).
@@ -180,14 +194,10 @@ jobs:
       # Type/diagnostics gate (kept at 0 errors / 0 warnings).
       - run: npm run check
         working-directory: configurator
-      # Build root dist/ so PreviewPanel.svelte's ?raw CSS import resolves
-      # during the Vite build. dist/*.css is gitignored and only produced by
-      # `npm run build` at the repo root.
-      - run: npm run build
-      # Browser regression suite (test:e2e prebuilds; Playwright manages the
-      # preview server via its webServer option). Cross-engine: the full suite
-      # runs on Chromium; core behaviour + the dogfood/isolation contract also
-      # run on Firefox and WebKit (see playwright.config.js projects).
+      # Browser regression suite (test:e2e prebuilds the configurator via Vite;
+      # Playwright manages the preview server via its webServer option).
+      # Cross-engine: the full suite runs on Chromium; core behaviour + the
+      # dogfood/isolation contract also run on Firefox and WebKit.
       - run: npx playwright install --with-deps chromium firefox webkit
         working-directory: configurator
       - run: npm run test:e2e

package.json

@@ -53,6 +53,7 @@
     "lint:css:fix": "stylelint \"**/*.css\" --fix",
     "pretest": "npm run build && node --test tests/tier1-p2-coverage.test.js tests/tier1-p7-oldengine.test.js tests/tier1-p10-contrast.test.js tests/api-index-sync.test.js",
     "test": "playwright test",
+    "test:unit": "node --test tests/tier1-p2-coverage.test.js tests/tier1-p7-oldengine.test.js tests/tier1-p10-contrast.test.js tests/api-index-sync.test.js",
     "test:install": "playwright install --with-deps chromium firefox webkit",
     "release": "release-it",
     "release:minor": "release-it --increment minor",

tests/color-helpers.js

@@ -0,0 +1,40 @@
+// Browser-serializable WCAG colour helpers.
+// These functions are passed to page.evaluate() — they must be self-contained
+// (no imports, no closures over Node.js variables). Playwright serialises each
+// function via .toString() before sending it to the browser context.
+
+// Returns WCAG relative luminance for one CSS custom property token.
+// Usage: page.evaluate(resolveTokenLuminance, '--sf-color-bg')
+export function resolveTokenLuminance(tok) {
+  const cv = document.createElement('canvas'); cv.width = cv.height = 1;
+  const ctx = cv.getContext('2d', { willReadFrequently: true });
+  const el = document.createElement('div'); el.style.backgroundColor = `var(${tok})`;
+  document.body.appendChild(el);
+  ctx.clearRect(0, 0, 1, 1); ctx.fillStyle = '#000';
+  ctx.fillStyle = getComputedStyle(el).backgroundColor; el.remove();
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  const lin = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+// Returns WCAG contrast ratio between two CSS custom property tokens.
+// Accepts a two-element array [token1, token2] — page.evaluate only allows one argument.
+// Usage: page.evaluate(contrastBetween, ['--sf-color-text', '--sf-color-bg'])
+export function contrastBetween([token1, token2]) {
+  const cv = document.createElement('canvas'); cv.width = cv.height = 1;
+  const ctx = cv.getContext('2d', { willReadFrequently: true });
+  const toLum = color => {
+    ctx.clearRect(0, 0, 1, 1); ctx.fillStyle = '#000'; ctx.fillStyle = color; ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    const lin = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  };
+  const resolve = tok => {
+    const el = document.createElement('div'); el.style.backgroundColor = `var(${tok})`;
+    document.body.appendChild(el); const c = getComputedStyle(el).backgroundColor; el.remove(); return c;
+  };
+  const a = toLum(resolve(token1));
+  const b = toLum(resolve(token2));
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}

tests/color-semantic.spec.js

@@ -5,54 +5,12 @@
 import { test, expect } from '@playwright/test';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { resolveTokenLuminance, contrastBetween } from './color-helpers.js';
 
 // fixture.html loads slashed.full.css (palette tokens are core)
 const FIXTURE = pathToFileURL(path.join(import.meta.dirname, 'fixture.html')).href;
 
-// ── Serialisable in-browser helpers ─────────────────────────────
-// Functions passed directly to page.evaluate() must be self-contained
-// (no closure over Node.js variables). Single-token helpers are called
-// from Node.js with page.evaluate(fn, tokenName) so callers can compose
-// them without duplicating the canvas boilerplate.
-
-// Returns WCAG luminance of the resolved value of one CSS custom property.
-// Self-contained: safe to pass to page.evaluate(resolveTokenLuminance, tok).
-function resolveTokenLuminance(tok) {
-  const cv = document.createElement('canvas'); cv.width = cv.height = 1;
-  const ctx = cv.getContext('2d', { willReadFrequently: true });
-  const el = document.createElement('div'); el.style.backgroundColor = `var(${tok})`;
-  document.body.appendChild(el);
-  ctx.clearRect(0,0,1,1); ctx.fillStyle='#000'; ctx.fillStyle=getComputedStyle(el).backgroundColor; el.remove();
-  ctx.fillRect(0,0,1,1);
-  const [r,g,b] = ctx.getImageData(0,0,1,1).data;
-  const lin = v => { v/=255; return v<=0.03928 ? v/12.92 : ((v+0.055)/1.055)**2.4; };
-  return 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
-}
-
-// Returns WCAG contrast ratio between two CSS custom property tokens.
-// Accepts a two-element array [token1, token2] for Playwright 1.60 compatibility
-// (page.evaluate only accepts a single argument).
-function contrastBetween([token1, token2]) {
-  // Must be self-contained: re-declare helpers (page.evaluate serialises the fn body).
-  const cv = document.createElement('canvas'); cv.width = cv.height = 1;
-  const ctx = cv.getContext('2d', { willReadFrequently: true });
-  const toLum = (color) => {
-    ctx.clearRect(0,0,1,1); ctx.fillStyle='#000'; ctx.fillStyle=color; ctx.fillRect(0,0,1,1);
-    const [r,g,b] = ctx.getImageData(0,0,1,1).data;
-    const lin = v => { v/=255; return v<=0.03928 ? v/12.92 : ((v+0.055)/1.055)**2.4; };
-    return 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
-  };
-  const resolve = (tok) => {
-    const el = document.createElement('div'); el.style.backgroundColor = `var(${tok})`;
-    document.body.appendChild(el); const c = getComputedStyle(el).backgroundColor; el.remove(); return c;
-  };
-  const a = toLum(resolve(token1));
-  const b = toLum(resolve(token2));
-  return (Math.max(a,b) + 0.05) / (Math.min(a,b) + 0.05);
-}
-
-// Node.js async helpers — compose page.evaluate(resolveTokenLuminance) calls
-// so the canvas boilerplate lives in exactly one place.
+// Node.js async helpers — compose page.evaluate(resolveTokenLuminance) calls.
 
 async function getSurfaceLuminances(page) {
   const [bg, raised, inset] = await Promise.all([
@@ -63,18 +21,19 @@ async function getSurfaceLuminances(page) {
   return { bg, raised, inset };
 }
 
-// Returns {step, lum} pairs for the primary palette steps provided.
+// Returns {step, lum} pairs for the primary palette steps.
+// Self-contained for page.evaluate. One canvas reused across all steps.
 function paletteLuminances(steps) {
   const cv = document.createElement('canvas'); cv.width = cv.height = 1;
   const ctx = cv.getContext('2d', { willReadFrequently: true });
+  const lin = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
   return steps.map(s => {
-    ctx.clearRect(0,0,1,1); ctx.fillStyle='#000';
-    const el=document.createElement('div'); el.style.backgroundColor=`var(--sf-color-primary-${s})`;
-    document.body.appendChild(el); ctx.fillStyle=getComputedStyle(el).backgroundColor; el.remove();
-    ctx.fillRect(0,0,1,1);
-    const [r,g,b]=ctx.getImageData(0,0,1,1).data;
-    const lin=v=>{v/=255;return v<=0.03928?v/12.92:((v+0.055)/1.055)**2.4;};
-    return { step: s, lum: 0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b) };
+    ctx.clearRect(0, 0, 1, 1); ctx.fillStyle = '#000';
+    const el = document.createElement('div'); el.style.backgroundColor = `var(--sf-color-primary-${s})`;
+    document.body.appendChild(el); ctx.fillStyle = getComputedStyle(el).backgroundColor; el.remove();
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    return { step: s, lum: 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b) };
   });
 }