v0.9.0: texture (30 presets), aura glow and particles, range sliders, lint, CSS import

Engine-native @texture , @aura-glow, @aura-particles and @slider declarations,
a contrast/focus/tap-target linter, 'dssl import' for CSS, and the packaged
engine rebuilt.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

scripts/lib/browser-harness.mjs

@@ -0,0 +1,72 @@
+/* browser-harness.mjs: the one place the browser tests get a page from.
+ *
+ * Real behaviour (canvas pixels, SVG-filter textures, ::-webkit-slider-thumb,
+ * rAF timing) cannot be checked in Node, so these tests drive a real Chrome.
+ * It uses playwright-core, which ships no browser, and finds one that is
+ * already installed. Point DSSL_CHROME at a binary if yours is somewhere odd.
+ *
+ *   import { withBrowser } from './lib/browser-harness.mjs';
+ *   await withBrowser(async ({ open }) => { const page = await open('/x.html'); ... });
+ */
+import { createServer } from 'node:http';
+import { readFileSync, existsSync } from 'node:fs';
+import { extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { chromium } from 'playwright-core';
+
+export const ROOT = resolve(fileURLToPath(new URL('../..', import.meta.url)));
+
+const MIME = { '.js': 'text/javascript', '.mjs': 'text/javascript', '.html': 'text/html', '.css': 'text/css', '.json': 'application/json', '.dssl': 'text/plain', '.svg': 'image/svg+xml' };
+
+const CANDIDATES = [
+  process.env.DSSL_CHROME,
+  '/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium', '/usr/bin/chromium-browser',
+  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+].filter(Boolean);
+
+export function findChrome() {
+  return CANDIDATES.find((p) => existsSync(p)) || null;
+}
+
+/** static server: /dssl/* is public/dssl/*, /styles/* is public/styles/*, /t/* is a scratch dir of test pages */
+export function startServer(pages = {}) {
+  const server = createServer((req, res) => {
+    const url = req.url.split('?')[0];
+    if (url === '/favicon.ico') { res.writeHead(204); return res.end(); }
+    if (pages[url]) { res.writeHead(200, { 'content-type': 'text/html' }); return res.end(pages[url]); }
+    let file;
+    if (url.startsWith('/dssl/')) file = join(ROOT, 'public', url);
+    else if (url.startsWith('/styles/')) file = join(ROOT, 'public', url);
+    else file = join(ROOT, url);
+    try {
+      const body = readFileSync(file);
+      res.writeHead(200, { 'content-type': MIME[extname(file)] || 'application/octet-stream', 'access-control-allow-origin': '*' });
+      res.end(body);
+    } catch { res.writeHead(404); res.end('not found'); }
+  });
+  return new Promise((ok) => server.listen(0, '127.0.0.1', () => ok({ server, port: server.address().port })));
+}
+
+export async function withBrowser(fn, { pages = {}, viewport = { width: 1000, height: 700 }, reducedMotion = 'no-preference', colorScheme = 'light', deviceScaleFactor = 1 } = {}) {
+  const exe = findChrome();
+  if (!exe) throw new Error('no Chrome found; set DSSL_CHROME to a Chrome or Chromium binary');
+  const { server, port } = await startServer(pages);
+  const browser = await chromium.launch({ executablePath: exe, headless: true, args: ['--no-sandbox', '--disable-gpu', '--hide-scrollbars'] });
+  const context = await browser.newContext({ viewport, reducedMotion, colorScheme, deviceScaleFactor });
+  const base = `http://127.0.0.1:${port}`;
+  const errors = [];
+  try {
+    const open = async (path, { wait = 'load' } = {}) => {
+      const page = await context.newPage();
+      page.on('pageerror', (e) => errors.push(String(e)));
+      page.on('console', (m) => { if (m.type() === 'error') errors.push(m.text()); });
+      await page.goto(base + path, { waitUntil: wait });
+      return page;
+    };
+    return await fn({ open, base, errors, context, browser });
+  } finally {
+    await browser.close();
+    server.close();
+  }
+}

scripts/lib/pixels.mjs

@@ -0,0 +1,29 @@
+/* pixels.mjs: look at what a browser actually drew.
+ *   const img = decodePng(await page.screenshot({ clip }))
+ *   px(img, 10, 20)            -> [r, g, b, a]
+ *   stats(img, x, y, w, h)     -> { mean:[r,g,b], variance, lit, n }  (lit = pixels brighter than the floor)
+ */
+import { PNG } from 'pngjs';
+
+export const decodePng = (buf) => PNG.sync.read(buf);
+
+export const px = (img, x, y) => {
+  const i = (Math.round(y) * img.width + Math.round(x)) * 4;
+  return [img.data[i], img.data[i + 1], img.data[i + 2], img.data[i + 3]];
+};
+
+/** colour distance (0..441) */
+export const dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+
+export function stats(img, x0, y0, w, h, floor = 40) {
+  let n = 0, lit = 0, sr = 0, sg = 0, sb = 0, ssq = 0;
+  for (let y = y0; y < y0 + h && y < img.height; y++) for (let x = x0; x < x0 + w && x < img.width; x++) {
+    const [r, g, b] = px(img, x, y);
+    n++; sr += r; sg += g; sb += b;
+    const l = (r + g + b) / 3;
+    ssq += l * l;
+    if (l > floor) lit++;
+  }
+  const mr = sr / n, mg = sg / n, mb = sb / n, ml = (mr + mg + mb) / 3;
+  return { mean: [mr, mg, mb].map((v) => Math.round(v)), variance: ssq / n - ml * ml, lit, n };
+}

scripts/test-all.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/* test-all.mjs: run every suite and say plainly what passed.
+ *   node scripts/test-all.mjs               everything (needs Chrome for the browser suites)
+ *   node scripts/test-all.mjs --no-browser  the fast ones only
+ * Exit code is 0 only if every suite passed. */
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { join, dirname } from 'node:path';
+import { findChrome } from './lib/browser-harness.mjs';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const skipBrowser = process.argv.includes('--no-browser');
+const SUITES = [
+  ['engine 0.5', 'test-v050.mjs'], ['engine 0.6', 'test-v060.mjs'], ['engine 0.7', 'test-v070.mjs'], ['parser lines 0.7.1', 'test-v071.mjs'],
+  ['review fixes 0.7.2', 'test-v072.mjs'], ['exit lane 0.8.0', 'test-v073.mjs'], ['follow-up 0.8.1', 'test-v081.mjs'], ['cascade 0.8.2', 'test-v082.mjs'],
+  ['color, texture, aura, slider, lint, import, share 0.9.0', 'test-v090.mjs'], ['editor extension', 'test-extension-lib.mjs'],
+  ['site stylesheets compile', 'dssl-styles-check.mjs'], ['guide examples compile', 'test-guide-examples.mjs'],
+  ['designer: state to DSSL and back', 'test-designer.mjs'], ['designer: editor wiring (fake vscode)', 'test-designer-host.mjs'],
+  ['guide examples in a browser', 'test-guide-browser.mjs', true], ['0.9.0 in a browser', 'test-browser-v090.mjs', true], ['designer panel in a browser', 'test-designer-browser.mjs', true],
+];
+
+if (!skipBrowser && !findChrome()) {
+  console.error('No Chrome or Chromium found for the browser suites. Install one, set DSSL_CHROME, or run with --no-browser.');
+  process.exit(2);
+}
+const rows = [];
+for (const [name, file, browser] of SUITES) {
+  if (browser && skipBrowser) { rows.push([name, 'skipped', '']); continue; }
+  const t0 = Date.now();
+  const r = spawnSync(process.execPath, ['--no-warnings', join(here, file)], { encoding: 'utf8', cwd: join(here, '..') });
+  const out = (r.stdout || '') + (r.stderr || '');
+  const all = [...out.matchAll(/(\d+) passed, (\d+) failed/g)];
+  const m = all.length ? all[all.length - 1] : /(\d+) blocks checked/.exec(out);
+  const passed = r.status === 0;
+  rows.push([name, passed ? 'ok' : 'FAILED', `${m ? m[0] : (/CHECK OK/.test(out) ? 'all compile' : '')} ${((Date.now() - t0) / 1000).toFixed(1)}s`]);
+  if (!passed) console.log(`\n---- ${file} ----\n${out.split('\n').filter((l) => /FAIL|rror/.test(l)).slice(0, 12).join('\n')}\n`);
+}
+const w = Math.max(...rows.map((r) => r[0].length));
+console.log('');
+for (const [n, s, d] of rows) console.log(`${s === 'ok' ? '  ok     ' : s === 'skipped' ? '  skipped' : '  FAILED '} ${n.padEnd(w)}  ${d}`);
+const bad = rows.filter((r) => r[1] === 'FAILED').length;
+console.log(`\n${bad ? bad + ' suite(s) failed' : 'everything passed'}`);
+process.exit(bad ? 1 : 0);

scripts/test-browser-v090.mjs

@@ -0,0 +1,423 @@
+#!/usr/bin/env node
+/* test-browser-v090.mjs: the 0.9.0 features in a real browser.
+ *
+ * Aura draws on a canvas, textures are SVG filters, and a slider is vendor
+ * pseudo-elements, so none of it can be checked in Node. This drives headless
+ * Chrome and looks at what was actually drawn. It is written to break things:
+ * removal, hidden elements, off-screen elements, freeze, reduced motion, state
+ * changes, token changes, resize, device pixel ratio, and a stress load.
+ *
+ *   node scripts/test-browser-v090.mjs
+ */
+import { withBrowser } from './lib/browser-harness.mjs';
+import { decodePng, px, dist, stats } from './lib/pixels.mjs';
+import { galleryPage } from './texture-gallery.mjs';
+import { PRESET_NAMES } from '../public/dssl/texture.js';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra !== undefined ? '; ' + extra : ''}`); }
+};
+const section = (t) => console.log(`\n== ${t}`);
+
+/** a page with the engine, a dark body and the given DSSL + markup */
+const page = (dssl, body, bg = '#000') => `<!doctype html><meta charset=utf-8>
+<body style="margin:0;background:${bg};height:4000px;overflow-x:hidden">
+<style type="text/dssl">${dssl}</style>${body}
+<script type="module" src="/dssl/boot.js"></script>`;
+
+const engine = `DSSL.__debug.engines.get('global')`;
+const dbg = (p) => p.evaluate(`(() => { const e = ${engine}; return e && e.aura ? e.aura.debug() : null; })()`);
+const ready = (p) => p.waitForFunction(`window.DSSL && ${engine}`);
+const shot = async (p, clip) => decodePng(await p.screenshot({ clip }));
+const alive = async (p) => { const d = await dbg(p); return d ? d.stats.particles : 0; };
+
+/* ------------------------------------------------------------------ *
+ * AURA
+ * ------------------------------------------------------------------ */
+section('aura: glow');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/glow');
+  await ready(p); await p.waitForTimeout(500);
+  const img = await shot(p, { x: 150, y: 100, width: 420, height: 320 });
+  // element is at 300..420 x 200..320 on the page, so in the clip at (150..270, 100..220)
+  const inside = px(img, 210, 160);
+  ok('the glow never paints over the element itself', dist(inside, [32, 32, 48]) < 6, `inside pixel ${inside}`);
+  const near = px(img, 150 - 12, 160);
+  ok('the glow lights the area right outside the element', near[0] > 40 && near[0] > near[2] * 1.5, `pixel ${near}`);
+  const far = px(img, 5, 5);
+  ok('and fades to nothing far away', dist(far, [0, 0, 0]) < 8, `pixel ${far}`);
+  const above = px(img, 210, 100 - 12);
+  ok('it surrounds the element on every side, not just one', above[0] > 25 && px(img, 210, 220 + 12)[0] > 25 && px(img, 270 + 12, 160)[0] > 25);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/glow': page('.orb { position: absolute; left: 300px; top: 200px; width: 120px; height: 120px; background: #202030; radius: 20; aura-glow: #ff8800 40 }', '<div class="orb"></div>') } });
+
+section('aura: particles');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/p');
+  await ready(p); await p.waitForTimeout(1600);
+  const d = await dbg(p);
+  const n = d.stats.particles;
+  ok('particle count settles at about the configured count (40)', n >= 28 && n <= 40, `alive ${n}`);
+  const s = d.emitters[0].layers[0].sample;
+  ok('speed and direction are what was written (up at 60 px/s, no spread)', s.length && s.every((q) => Math.abs(q.vy + 60) < 1.5 && Math.abs(q.vx) < 1.5), JSON.stringify(s[0]));
+  const y1 = s[0].y; await p.waitForTimeout(150);
+  const s2 = (await dbg(p)).emitters[0].layers[0].sample;
+  ok('particles actually move upward over time', s2.some((q) => q.y < y1 - 3), `${y1} -> ${s2.map((q) => q.y.toFixed(0))}`);
+  ok('the loop is running at a healthy frame time', d.stats.frameMs < 10, `${d.stats.frameMs.toFixed(2)}ms`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/p': page('.src { position: absolute; left: 300px; top: 400px; width: 60px; height: 40px; background: #333; aura-particle: #ffffff count 40 size 4 life 1000 speed 60 dir up spread 0 from bottom seed 3 }', '<div class="src"></div>') } });
+
+section('aura: behind');
+for (const behind of [true, false]) {
+  await withBrowser(async ({ open }) => {
+    const p = await open('/b');
+    await ready(p); await p.waitForTimeout(1200);
+    const img = await shot(p, { x: 280, y: 180, width: 200, height: 160 });
+    // element interior is (300..420) x (200..320) minus the clip origin (280,180): (20..140) x (20..140)
+    const inner = stats(img, 24, 24, 90, 90, 90);
+    if (behind) ok('behind: nothing is drawn over the element\'s face', inner.lit === 0, `lit ${inner.lit}`);
+    else ok('control: without behind the particles DO cover the face', inner.lit > 20, `lit ${inner.lit}`);
+  }, { pages: { '/b': page(`.src { position: absolute; left: 300px; top: 200px; width: 120px; height: 120px; background: #111; aura-particle: #ffffff count 120 size 22 life 3000 speed 0 from center seed 2 ${behind ? 'behind' : ''} }`, '<div class="src"></div>') } });
+}
+
+section('aura: lifecycle');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/l');
+  await ready(p); await p.waitForTimeout(1200);
+  ok('hidden (display:none) elements emit nothing', (await alive(p)) === 0);
+  await p.evaluate(`document.getElementById('h').className = 'src'`); await p.waitForTimeout(1100);
+  ok('showing it starts the aura', (await alive(p)) > 5, `alive ${await alive(p)}`);
+  // removal by removing the rule's class
+  await p.evaluate(`document.getElementById('h').className = 'src off'`); await p.waitForTimeout(2200);
+  let d = await dbg(p);
+  ok('removing the aura lets what is alive finish, then the emitter is gone', d.emitters.length === 0 && d.stats.particles === 0, JSON.stringify(d.stats));
+  const f1 = d.stats.frames; await p.waitForTimeout(300);
+  ok('and the animation loop stops instead of spinning forever', (await dbg(p)).stats.frames === f1, 'frames kept increasing');
+  // delete the element from the DOM mid-flight
+  await p.evaluate(`document.getElementById('h').className = 'src'`); await p.waitForTimeout(700);
+  await p.evaluate(`document.getElementById('h').remove()`); await p.waitForTimeout(700);
+  d = await dbg(p);
+  ok('deleting the element from the DOM drops its emitter', d.emitters.length === 0, JSON.stringify(d.emitters.length));
+  ok('no page errors through all of that', errors.length === 0, errors.join(' | '));
+}, { pages: { '/l': page(`.src { position: absolute; left: 300px; top: 300px; width: 80px; height: 80px; background: #345; aura-particle: #8cf count 40 life 600 speed 40 dir up from top }
+.hide { display: none } .off { aura: none }`, '<div id="h" class="src hide"></div>') } });
+
+section('aura: freeze and unfreeze');
+await withBrowser(async ({ open }) => {
+  const p = await open('/f');
+  await ready(p); await p.waitForTimeout(900);
+  await p.evaluate('DSSL.freeze()'); await p.waitForTimeout(200);
+  const a = (await dbg(p)).stats.frames; await p.waitForTimeout(300);
+  const b = (await dbg(p)).stats.frames;
+  ok('freeze() stops the aura loop', a === b, `${a} -> ${b}`);
+  const painted = await p.evaluate(`(() => { const c = document.querySelector('canvas[data-dssl-aura]'); const d = c.getContext('2d').getImageData(0, 0, c.width, c.height).data; let n = 0; for (let i = 3; i < d.length; i += 4) if (d[i]) n++; return n; })()`);
+  ok('and clears the canvas, so a frozen page is still', painted === 0, `${painted} painted pixels`);
+  await p.evaluate('DSSL.unfreeze()'); await p.waitForTimeout(500);
+  const c = (await dbg(p)).stats.frames; await p.waitForTimeout(300);
+  ok('unfreeze() resumes it', (await dbg(p)).stats.frames > c);
+}, { pages: { '/f': page('.src { position: absolute; left: 300px; top: 400px; width: 80px; height: 40px; background: #345; aura: glow #f80 30, particles #fc4 count 40 life 800 speed 50 dir up from top }', '<div class="src"></div>') } });
+
+section('aura: reduced motion');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/rm');
+  await ready(p); await p.waitForTimeout(1500);
+  ok('particles do not move for visitors who ask for reduced motion', (await alive(p)) === 0, `alive ${await alive(p)}`);
+  const img = await shot(p, { x: 230, y: 200, width: 300, height: 200 });
+  // element is 300..380 x 250..290; in the clip that is (70..150, 50..90); look just left of its middle
+  ok('but the static glow is still drawn', px(img, 58, 70)[0] > 30, `pixel ${px(img, 58, 70)}`);
+  const frames = (await dbg(p)).stats.frames; await p.waitForTimeout(400);
+  ok('and the loop is not spinning for a still picture', (await dbg(p)).stats.frames - frames < 3, 'loop kept running');
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { reducedMotion: 'reduce', pages: { '/rm': page(`.src { position: absolute; left: 300px; top: 250px; width: 80px; height: 40px; background: #345; aura: glow #ff8800 40, particles #fc4 count 50 life 800 speed 50 dir up from top }`, '<div class="src"></div>') } });
+await withBrowser(async ({ open }) => {
+  const p = await open('/rme');
+  await ready(p); await p.waitForTimeout(1200);
+  ok('an `essential` aura ignores the preference', (await alive(p)) > 3, `alive ${await alive(p)}`);
+}, { reducedMotion: 'reduce', pages: { '/rme': page(`.e { position: absolute; left: 300px; top: 250px; width: 80px; height: 40px; background: #345; aura-particle: #fc4 count 50 life 800 speed 50 dir up from top essential }`, '<div class="e"></div>') } });
+
+section('aura: reduced motion still follows the page');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/rs');
+  await ready(p); await p.waitForTimeout(900);
+  const at = async () => { const img = await shot(p, { x: 230, y: 0, width: 300, height: 400 }); let top = -1; for (let y = 0; y < 400; y++) { if (px(img, 58, y)[0] > 40) { top = y; break; } } return top; };
+  const a = await at();
+  await p.evaluate('window.scrollTo(0, 60)'); await p.waitForTimeout(400);
+  const b = await at();
+  ok('after a scroll the still glow has moved with its element (about 60px up)', a > 0 && b > 0 && Math.abs((a - b) - 60) < 6, `${a} -> ${b}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { reducedMotion: 'reduce', pages: { '/rs': page('.src { position: absolute; left: 300px; top: 250px; width: 80px; height: 40px; background: #345; aura-glow: #ff8800 40 }', '<div class="src"></div>') } });
+
+section('aura: currentColor, textured particles');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/cc');
+  await ready(p); await p.waitForTimeout(900);
+  const img = await shot(p, { x: 230, y: 180, width: 300, height: 200 });
+  const c = px(img, 58, 90); // middle of the element's left edge (it spans y 70..110 in this clip)
+  ok('a glow with no colour (or currentColor) takes the element\'s text colour (green)', c[1] > 40 && c[1] > c[0] * 2 && c[1] > c[2] * 2, `pixel ${c}`);
+  ok('particles with texture(grain) render without errors', (await alive(p)) > 3);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/cc': page('.src { position: absolute; left: 300px; top: 250px; width: 80px; height: 40px; background: #345; color: #22dd44; aura-glow: currentColor 40, ; }', '<div class="src"></div>').replace(', ; }', ' }').replace('aura-glow: currentColor 40 }', 'aura-glow: currentColor 40\n  aura-particle: color currentColor count 30 life 600 speed 30 dir up from top texture(grain scale 2) }') } });
+
+section('aura: states, tokens, slots');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/s');
+  await ready(p); await p.waitForTimeout(700);
+  ok('no aura until the pointer is over the element', (await alive(p)) === 0);
+  await p.hover('.btn'); await p.waitForTimeout(900);
+  ok('a hover { } block turns the aura on', (await alive(p)) > 5, `alive ${await alive(p)}`);
+  await p.mouse.move(5, 5); await p.waitForTimeout(1800);
+  ok('and moving away lets it die out', (await alive(p)) === 0, `alive ${await alive(p)}`);
+
+  // slots stack through the cascade: glow from one rule, particles from another, then glow cleared
+  await p.evaluate(`document.getElementById('slots').className = 'g'`); await p.waitForTimeout(500);
+  let d = await dbg(p); let em = d.emitters.find((e) => e.el.id === 'slots') || d.emitters[0];
+  ok('aura-glow alone gives a glow and no particles', em && em.glow === 1 && em.layers.length === 0, JSON.stringify(em && { g: em.glow, l: em.layers.length }));
+  await p.evaluate(`document.getElementById('slots').className = 'g p'`); await p.waitForTimeout(500);
+  d = await dbg(p); em = d.emitters[0];
+  ok('adding a rule with aura-particle keeps the glow and adds the particles', em && em.glow === 1 && em.layers.length === 1, JSON.stringify(em && { g: em.glow, l: em.layers.length }));
+  await p.evaluate(`document.getElementById('slots').className = 'g p noglow'`); await p.waitForTimeout(500);
+  d = await dbg(p); em = d.emitters[0];
+  ok('aura-glow: none clears only the glow slot', em && em.glow === 0 && em.layers.length === 1, JSON.stringify(em && { g: em.glow, l: em.layers.length }));
+
+  // a token change retints the aura
+  await p.evaluate(`document.getElementById('slots').className = 'tok'`); await p.waitForTimeout(500);
+  const rect = await p.evaluate(`(() => { const r = document.getElementById('slots').getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height }; })()`);
+  const clip = { x: rect.x - 60, y: rect.y - 40, width: rect.w + 120, height: rect.h + 80 };
+  let img = await shot(p, clip); let c = px(img, 40, 60);
+  ok('a glow written as a token colour draws that colour (red)', c[0] > c[2] * 2, `pixel ${c}`);
+  await p.evaluate(`DSSL.apply('tokens { color { aurahue: #0044ff } }', { name: 'retint', replace: true })`); await p.waitForTimeout(500);
+  img = await shot(p, clip); c = px(img, 40, 60);
+  ok('changing the token retints the glow live (now blue)', c[2] > c[0] * 2, `pixel ${c}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/s': page(`tokens { color { aurahue: #ff2200 } }
+.btn { position: absolute; left: 300px; top: 300px; width: 100px; height: 40px; background: #222
+  hover { aura-particle: #8cf count 40 life 600 speed 40 dir up from top } }
+#slots { position: absolute; left: 500px; top: 300px; width: 100px; height: 60px; background: #222 }
+.g { aura-glow: #ff8800 24 } .p { aura-particle: #8cf count 20 life 500 speed 30 dir up from top } .noglow { aura-glow: none }
+.tok { aura-glow: color.aurahue 30 }`, '<div class="btn"></div><div id="slots"></div>') } });
+
+section('aura: viewport, scroll, pixel ratio');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/v');
+  await ready(p); await p.waitForTimeout(800);
+  ok('an element far below the fold emits nothing', (await alive(p)) === 0, `alive ${await alive(p)}`);
+  await p.evaluate('window.scrollTo(0, 2900)'); await p.waitForTimeout(900);
+  ok('scrolling it into view starts the aura', (await alive(p)) > 5, `alive ${await alive(p)}`);
+  await p.setViewportSize({ width: 520, height: 420 }); await p.waitForTimeout(400);
+  const dims = await p.evaluate(`(() => { const c = document.querySelector('canvas[data-dssl-aura]'); return [c.width, c.height, innerWidth, innerHeight]; })()`);
+  ok('the canvas follows a window resize', dims[0] === dims[2] && dims[1] === dims[3], JSON.stringify(dims));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/v': page('.far { position: absolute; left: 300px; top: 3100px; width: 80px; height: 40px; background: #345; aura-particle: #fc4 count 40 life 800 speed 40 dir up from top }', '<div class="far"></div>') } });
+await withBrowser(async ({ open }) => {
+  const p = await open('/d');
+  await ready(p); await p.waitForTimeout(500);
+  const dims = await p.evaluate(`(() => { const c = document.querySelector('canvas[data-dssl-aura]'); return [c.width, innerWidth]; })()`);
+  ok('on a 2x display the canvas is drawn at 2x so glow stays sharp', dims[0] === dims[1] * 2, JSON.stringify(dims));
+}, { deviceScaleFactor: 2, pages: { '/d': page('.o { position: absolute; left: 200px; top: 200px; width: 80px; height: 40px; background: #345; aura-glow: #f80 20 }', '<div class="o"></div>') } });
+
+section('aura: range slider thumb anchor');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/t');
+  await ready(p); await p.waitForTimeout(700);
+  const meanX = async () => p.evaluate(`(() => { const L = ${engine}.aura.emitters.get(document.getElementById('r')).layers[0].parts; return L.length ? L.reduce((a, q) => a + q.x, 0) / L.length : -1; })()`);
+  await p.fill('#r', '10'); await p.waitForTimeout(1100); const low = await meanX();
+  await p.fill('#r', '90'); await p.waitForTimeout(1500); const high = await meanX();
+  ok('`from thumb` follows the value: low at 10, high at 90', low > 0 && high > low + 150, `${low.toFixed(0)} vs ${high.toFixed(0)}`);
+  ok('and lands within the slider\'s own width (100..400)', low >= 100 && high <= 400, `${low} ${high}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/t': page('#r { position: absolute; left: 100px; top: 300px; width: 300px; aura-particle: #7fe -> transparent count 30 life 400 speed 10 dir up spread 20 from thumb }', '<input id="r" type="range" min="0" max="100" value="50">') } });
+
+section('aura: many glows');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/glows');
+  await ready(p); await p.waitForTimeout(2500);
+  const d = await dbg(p);
+  ok('40 pulsing, flickering glows of different sizes cost under 6ms a frame (the blur is cached, not redone)', d.stats.frameMs < 6, `${d.stats.frameMs.toFixed(2)}ms`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/glows': page('.c { display: inline-block; margin: 14px; background: #223; radius: 6; aura-glow: #ff8800 30 pulse 1200 flicker 0.3 }', '<div style="width:960px">' + Array.from({ length: 40 }, (_, i) => `<div class="c" style="width:${40 + (i % 7) * 13}px;height:${24 + (i % 5) * 9}px"></div>`).join('') + '</div>') }, viewport: { width: 1000, height: 700 } });
+
+section('aura: stress');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/stress');
+  await ready(p); await p.waitForTimeout(2500);
+  const d = await dbg(p);
+  ok('60 emitters x 100 particles are held to the global budget (1800)', d.stats.particles <= 1800, `alive ${d.stats.particles}`);
+  ok('and the frame time stays workable under that load', d.stats.frameMs < 25, `${d.stats.frameMs.toFixed(1)}ms`);
+  // churn: flip the aura on and off 200 times
+  await p.evaluate(`(async () => { const el = document.querySelector('.cell'); for (let i = 0; i < 200; i++) { el.classList.toggle('x'); await new Promise((r) => setTimeout(r, 4)); } })()`);
+  await p.waitForTimeout(2200);
+  const e = await dbg(p);
+  ok('rapid toggling does not leak emitters (60 elements, 60 emitters at most)', e.emitters.length <= 60, `emitters ${e.emitters.length}`);
+  // refresh keeps what is flying instead of resetting it
+  const before = e.stats.particles; await p.evaluate('DSSL.refresh()'); await p.waitForTimeout(50);
+  ok('DSSL.refresh() does not wipe particles in flight', (await dbg(p)).stats.particles >= before * 0.7, `${before} -> ${(await dbg(p)).stats.particles}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/stress': page('.cell { display: inline-block; width: 40px; height: 20px; margin: 4px; background: #345; aura-particle: #fc4 count 100 life 700 speed 30 dir up from top } .cell.x { aura: none }', '<div style="width:900px;padding:10px">' + '<div class="cell"></div>'.repeat(60) + '</div>') } });
+
+/* ------------------------------------------------------------------ *
+ * TEXTURE
+ * ------------------------------------------------------------------ */
+section('texture: layering over the author\'s own background');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/tx');
+  await ready(p); await p.waitForTimeout(600);
+  const cs = (sel, prop) => p.evaluate(([s, pr]) => getComputedStyle(document.querySelector(s))[pr], [sel, prop]);
+  ok('a plain colour keeps its colour', (await cs('#c', 'backgroundColor')) === 'rgb(200, 30, 30)');
+  ok('and gains one texture layer', (await cs('#c', 'backgroundImage')).split('url("data:').length === 2);
+  const gi = await cs('#g', 'backgroundImage');
+  ok('a gradient keeps its gradient UNDER the texture (shorthand form)', gi.includes('linear-gradient') && gi.includes('url('), gi.slice(0, 80));
+  ok('the texture layer comes first, so it sits on top', gi.indexOf('url(') < gi.indexOf('linear-gradient'));
+  const si = await cs('#s', 'backgroundSize');
+  ok('background-image + background-size: cover keeps `cover` for the author\'s layer (list is aligned)', si.endsWith('cover') && si.split(',').length === 2, si);
+  const bm = await cs('#s', 'backgroundBlendMode');
+  ok('blend modes line up: texture mode first, normal for the author\'s layer', /^overlay, normal$/.test(bm), bm);
+  const before = await cs('#r', 'backgroundImage');
+  await p.evaluate(`document.getElementById('r').className = 'tex'`); await p.waitForTimeout(300);
+  const during = await cs('#r', 'backgroundImage');
+  await p.evaluate(`document.getElementById('r').className = ''`); await p.waitForTimeout(300);
+  const after = await cs('#r', 'backgroundImage');
+  ok('adding then removing a texture leaves the author\'s background exactly as it was', before === after && during !== before, `${before} | ${during.slice(0, 40)} | ${after}`);
+  await p.evaluate(`document.getElementById('l').className = 'a b'`); await p.waitForTimeout(300);
+  ok('a later texture rule replaces an earlier one (later wins)', (await cs('#l', 'backgroundImage')).includes('repeating-linear-gradient') && !(await cs('#l', 'backgroundImage')).includes('feTurbulence'), (await cs('#l', 'backgroundImage')).slice(0, 80));
+  await p.evaluate(`document.getElementById('n').className = 'none'`); await p.waitForTimeout(300);
+  ok('`texture: none` removes it', (await cs('#n', 'backgroundImage')) === 'none');
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/tx': page(`#c { texture: grain }
+#g { background: linear-gradient(red, blue); texture: noise }
+#s { background-image: linear-gradient(red, blue); background-size: cover; texture: grain }
+#r { background-image: linear-gradient(red, blue) } #r.tex { texture: grain }
+.a { texture: grain } .b { texture: lines }
+#n { texture: grain } #n.none { texture: none }
+.box { width: 80px; height: 60px; margin: 4px; display: inline-block }`, '<div id="c" class="box" style="background-color: rgb(200, 30, 30)"></div><div id="g" class="box"></div><div id="s" class="box"></div><div id="r" class="box"></div><div id="l" class="box"></div><div id="n" class="box"></div>') } });
+
+section('texture: states, several author layers, freeze');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/th');
+  await ready(p); await p.waitForTimeout(500);
+  const img = () => p.evaluate(`getComputedStyle(document.getElementById('h')).backgroundImage`);
+  const base = await img();
+  await p.hover('#h'); await p.waitForTimeout(350);
+  const hov = await img();
+  ok('a texture can change on hover', hov !== base && hov.includes('repeating-linear-gradient'), hov.slice(0, 60));
+  await p.mouse.move(2, 2); await p.waitForTimeout(350);
+  ok('and goes back when the pointer leaves', (await img()) === base);
+  const multi = await p.evaluate(`getComputedStyle(document.getElementById('m')).backgroundImage`);
+  ok('an author background with several layers keeps all of them under the texture', multi.split('linear-gradient').length - 1 >= 3 && multi.includes('url("data:'), multi.slice(0, 120));
+  const before = await p.evaluate(`document.getElementById('a').getAnimations().length`);
+  await p.evaluate('DSSL.freeze()'); await p.waitForTimeout(150);
+  const during = await p.evaluate(`document.getElementById('a').getAnimations().length`);
+  await p.evaluate('DSSL.unfreeze()'); await p.waitForTimeout(300);
+  const after = await p.evaluate(`document.getElementById('a').getAnimations().length`);
+  ok('freeze() stops the texture shimmer and unfreeze() brings it back', before === 1 && during === 0 && after === 1, `${before} ${during} ${after}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/th': page('.b { width: 80px; height: 60px; margin: 4px; display: inline-block } #h { texture: grain } #h:hover { texture: lines } #m { background: linear-gradient(red, blue), linear-gradient(green, yellow), linear-gradient(white, black); texture: noise } #a { texture: grain animate 90 }', '<div id="h" class="b"></div><div id="m" class="b"></div><div id="a" class="b"></div>') } });
+
+section('texture: every preset paints something');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/gallery');
+  await p.waitForFunction('window.ready === true'); await p.waitForTimeout(500);
+  const boxes = await p.evaluate(`[...document.querySelectorAll('.sw')].map((e) => { const r = e.getBoundingClientRect(); return { x: r.left, y: r.top + scrollY, w: r.width, h: r.height }; })`);
+  const full = decodePng(await p.screenshot({ fullPage: true }));
+  const flat = [184, 165, 138];
+  let bad = [];
+  boxes.forEach((b, i) => {
+    const name = PRESET_NAMES[i];
+    const seen = new Set();
+    let far = 0;
+    for (let y = Math.round(b.y) + 4; y < b.y + b.h - 4; y++) for (let x = Math.round(b.x) + 4; x < b.x + b.w - 4; x++) {
+      const c = px(full, x, y);
+      seen.add(`${c[0] >> 4},${c[1] >> 4},${c[2] >> 4}`);
+      if (dist(c, flat) > 12) far++;
+    }
+    if (far < 8) bad.push(`${name}(${seen.size} tones, ${far} px changed)`);
+  });
+  ok(`all ${PRESET_NAMES.length} presets draw something distinct from the flat colour`, bad.length === 0, bad.join(', '));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/gallery': galleryPage('#b8a58a', 6) }, viewport: { width: 1100, height: 700 } });
+
+section('texture: tokens and motion');
+await withBrowser(async ({ open }) => {
+  const p = await open('/tt');
+  await ready(p); await p.waitForTimeout(600);
+  const img = () => p.evaluate(`getComputedStyle(document.getElementById('t')).backgroundImage`);
+  const a = await img();
+  await p.evaluate(`DSSL.apply('tokens { color { tint: #00ff55 } }', { name: 'x', replace: true })`); await p.waitForTimeout(500);
+  const b = await img();
+  ok('a texture colour written as a token follows the token', a !== b && decodeURIComponent(a).includes('rgb') !== undefined, 'image did not change');
+  const anims = await p.evaluate(`document.getElementById('m').getAnimations().length`);
+  ok('`animate` shimmers the texture with a real animation', anims === 1, `animations ${anims}`);
+}, { pages: { '/tt': page('tokens { color { tint: #ff0044 } } #t { texture: noise color color.tint color2 #fff } #m { texture: grain animate 90 } .b { width: 80px; height: 60px }', '<div id="t" class="b"></div><div id="m" class="b"></div>') } });
+await withBrowser(async ({ open }) => {
+  const p = await open('/tm');
+  await ready(p); await p.waitForTimeout(600);
+  ok('the shimmer is off when the visitor prefers reduced motion', (await p.evaluate(`document.getElementById('m').getAnimations().length`)) === 0);
+}, { reducedMotion: 'reduce', pages: { '/tm': page('#m { texture: grain animate 90; width: 80px; height: 60px }', '<div id="m"></div>') } });
+
+/* ------------------------------------------------------------------ *
+ * SLIDER
+ * ------------------------------------------------------------------ */
+section('slider: rendering in Chrome (WebKit/Blink pseudo-elements)');
+const FILL = [255, 122, 0], TRACK = [68, 85, 102];
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/sl');
+  await ready(p); await p.waitForTimeout(600);
+  const box = await p.evaluate(`(() => { const r = document.getElementById('s1').getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height }; })()`);
+  const clip = { x: box.x - 4, y: box.y - 4, width: box.w + 8, height: box.h + 8 };
+  const at = async (frac) => { const img = await shot(p, clip); return px(img, 4 + frac * box.w, 4 + box.h / 2); };
+  ok('left of the thumb the track is the fill colour', dist(await at(0.2), FILL) < 24, `pixel ${await at(0.2)}`);
+  ok('right of the thumb it is the track colour', dist(await at(0.9), TRACK) < 24, `pixel ${await at(0.9)}`);
+  await p.fill('#s1', '95'); await p.waitForTimeout(200);
+  ok('moving the thumb moves the fill with it', dist(await at(0.8), FILL) < 24, `pixel ${await at(0.8)}`);
+  await p.evaluate(`(() => { const e = document.getElementById('s1'); e.value = 10; })()`);
+  await p.evaluate('DSSL.refresh()'); await p.waitForTimeout(200);
+  ok('a value set from JavaScript is picked up by DSSL.refresh()', dist(await at(0.5), TRACK) < 24, `pixel ${await at(0.5)}`);
+  ok('--dssl-p tracks the value (0..1)', Math.abs(Number(await p.evaluate(`getComputedStyle(document.getElementById('s1')).getPropertyValue('--dssl-p')`)) - 0.1) < 0.01);
+  ok('native appearance is switched off', (await p.evaluate(`getComputedStyle(document.getElementById('s1')).appearance`)) === 'none');
+  const thumb = await (async () => { await p.fill('#s1', '50'); await p.waitForTimeout(150); const img = await shot(p, clip); return px(img, 4 + 0.5 * box.w, 4 + box.h / 2); })();
+  ok('the thumb is drawn in its own colour (white)', dist(thumb, [255, 255, 255]) < 30, `pixel ${thumb}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/sl': page('#s1 { width: 300px; margin: 40px; slider: track 8 #445566 radius full, fill #ff7a00, thumb 22 #ffffff }', '<input id="s1" type="range" value="60">', '#101018') }, viewport: { width: 500, height: 200 } });
+
+section('slider: min, max and step');
+await withBrowser(async ({ open }) => {
+  const p = await open('/mm');
+  await ready(p); await p.waitForTimeout(500);
+  const pv = () => p.evaluate(`getComputedStyle(document.getElementById('s')).getPropertyValue('--dssl-p')`);
+  ok('min 10, max 50, value 30 is exactly half way (0.5)', Math.abs(Number(await pv()) - 0.5) < 0.001, await pv());
+  await p.fill('#s', '50'); await p.waitForTimeout(100);
+  ok('at the maximum it is 1', Math.abs(Number(await pv()) - 1) < 0.001, await pv());
+  await p.fill('#s', '10'); await p.waitForTimeout(100);
+  ok('at the minimum it is 0', Math.abs(Number(await pv())) < 0.001, await pv());
+}, { pages: { '/mm': page('#s { width: 300px; slider: fill #f80 }', '<input id="s" type="range" min="10" max="50" step="5" value="30">') } });
+
+section('slider: graph (histogram) and shapes');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/g');
+  await ready(p); await p.waitForTimeout(600);
+  const box = await p.evaluate(`(() => { const r = document.getElementById('g1').getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height }; })()`);
+  const clip = { x: box.x, y: box.y, width: box.w, height: box.h };
+  const img = await shot(p, clip);
+  // 12 bars across 300px with 3px gaps: bar i is 22.25px wide and centred at i/11 of the free width
+  const n = 12, bw = (box.w - (n - 1) * 3) / n;
+  const barX = (i) => Math.round((i / (n - 1)) * (box.w - bw) + bw / 2);
+  const topOf = (i) => { for (let y = 0; y < box.h; y++) if (dist(px(img, barX(i), y), [16, 16, 24]) > 40) return y; return -1; };
+  ok('bars left of the value are drawn in the fill colour', dist(px(img, barX(1), box.h - 12), [119, 204, 255]) < 30, `pixel ${px(img, barX(1), box.h - 12)}`);
+  ok('bars right of the value are drawn in the track colour', dist(px(img, barX(10), box.h - 12), [52, 68, 90]) < 30, `pixel ${px(img, barX(10), box.h - 12)}`);
+  const t0 = topOf(0), t7 = topOf(7);
+  ok('bar heights follow the numbers: the 95 bar is far taller than the 20 bar', t0 > 0 && t7 > 0 && t0 - t7 > 20, `tops ${t0} vs ${t7}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/g': page('#g1 { width: 300px; margin: 20px; slider: graph 20 40 70 90 60 30 50 95 40 65 80 45, graph-height 56, graph-gap 3, fill #77ccff, track 3 #34445a, thumb 14 #ffffff, shape bar }', '<input id="g1" type="range" value="40">', '#101018') }, viewport: { width: 400, height: 160 } });
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/sh');
+  await ready(p); await p.waitForTimeout(500);
+  const logs = []; p.on('console', (m) => logs.push(m.text()));
+  await p.evaluate(`DSSL.apply('.notinput { slider: thumb 20 #fff }', { name: 'misuse', replace: true })`);
+  await p.evaluate(`const d = document.createElement('div'); d.className = 'notinput'; document.body.appendChild(d)`); await p.waitForTimeout(400);
+  ok('slider: on something that is not a range input says so instead of failing silently', logs.some((l) => /does nothing, it styles <input type="range">/.test(l)), logs.join(' | '));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/sh': page('', '<div></div>') } });
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

scripts/test-v081.mjs

@@ -12,7 +12,7 @@ import { resolve } from '../public/dssl/resolver.js';
 import { toCSS } from '../public/dssl/static.js';
 import { VERSION } from '../public/dssl/index.js';
 import { execFileSync } from 'node:child_process';
-import { writeFileSync, mkdtempSync, rmSync, mkdirSync, copyFileSync } from 'node:fs';
+import { writeFileSync, mkdtempSync, rmSync, mkdirSync, copyFileSync, readdirSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -155,7 +155,8 @@ const fluidOf = (src) => val(declsOf(compileDoc(src).doc), 'font-size');
   const dir = mkdtempSync(join(tmpdir(), 'dssl-pkg-'));
   mkdirSync(join(dir, 'cli')); mkdirSync(join(dir, 'dssl'));
   copyFileSync(join(root, 'cli', 'dssl.mjs'), join(dir, 'cli', 'dssl.mjs'));
-  for (const f of ['boot', 'engine', 'index', 'parser', 'resolver', 'static', 'utils']) copyFileSync(join(root, 'public', 'dssl', f + '.js'), join(dir, 'dssl', f + '.js'));
+  // the package ships every engine module; a hardcoded list here is how the 0.8.0 package broke
+  for (const f of readdirSync(join(root, 'public', 'dssl'))) if (f.endsWith('.js')) copyFileSync(join(root, 'public', 'dssl', f), join(dir, 'dssl', f));
   const src = join(dir, 'a.dssl');
   writeFileSync(src, 'h1 { font-size: fluid 16 24 }\n');
   const run = (args) => {

scripts/test-v090.mjs

@@ -0,0 +1,307 @@
+/* test-v090.mjs: the pure half of 0.9.0 (no browser needed).
+ *   color, texture, aura, slider: parsing, vocabulary and error messages
+ *   the resolver: properties, slider shadow rules, engine-native declarations
+ *   lint: contrast, focus, tap targets
+ *   import: CSS to DSSL
+ *   share links
+ * The browser half is scripts/test-browser-v090.mjs. */
+import { parseColor, contrast, evalColorExpr, mix, over, toHex } from '../public/dssl/color.js';
+import { PRESETS, PRESET_NAMES, GENERATORS, TEXTURE_KEYS, parseTexture, buildTexture, makeMask, rng } from '../public/dssl/texture.js';
+import { parseAura, resolveLayer, GLOW_KEYS, PARTICLE_KEYS } from '../public/dssl/aura.js';
+import { parseSlider, sliderCss } from '../public/dssl/slider.js';
+import { importCss, parseCss } from '../public/dssl/import.js';
+import { compile, VERSION } from '../public/dssl/index.js';
+import { didYouMean } from '../public/dssl/utils.js';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra !== undefined ? '; ' + extra : ''}`); }
+};
+const section = (t) => console.log(`\n== ${t}`);
+
+const hooks = () => {
+  const errors = [];
+  return { errors, error: (m, h) => errors.push({ message: m, hint: h }), color: (w) => w, suggest: (w, l) => { const h = didYouMean(w, l); return h ? `did you mean "${h}"?` : null; } };
+};
+const decls = (src, i = 0) => compile(src).doc.rules[i]?.decls || [];
+const errs = (src) => compile(src).errors.map((e) => e.message);
+const warns = (src) => compile(src).warnings.map((e) => e.message);
+
+/* ------------------------------------------------------------------ */
+section('color');
+ok('hex, rgb, hsl, oklch and named colours parse', [parseColor('#f00'), parseColor('rgb(0 255 0)'), parseColor('hsl(240 100% 50%)'), parseColor('oklch(0.7 0.1 200)'), parseColor('rebeccapurple')].every(Boolean));
+ok('8-digit hex carries alpha', Math.abs(parseColor('#ff000080').a - 0.502) < 0.01);
+ok('color-mix and color(srgb) (what getComputedStyle returns) parse', parseColor('color-mix(in oklab, #ff0000 40%, transparent)').a > 0.39 && parseColor('color(srgb 1 0 0 / 0.5)').a === 0.5);
+ok('garbage and var() are null, not a crash', parseColor('nonsense') === null && parseColor('var(--x)') === null && parseColor('') === null && parseColor(null) === null);
+ok('contrast matches the WCAG reference points (white/black 21, same colour 1)', Math.abs(contrast(parseColor('#fff'), parseColor('#000')) - 21) < 0.01 && Math.abs(contrast(parseColor('#777'), parseColor('#777')) - 1) < 0.001);
+ok('over() composites alpha onto a background', (() => { const c = over({ r: 255, g: 0, b: 0, a: 0.5 }, { r: 0, g: 0, b: 255, a: 1 }); return c.r === 128 && c.b === 128 && c.a === 1; })());
+ok('mix() halfway between black and white in srgb is mid grey', toHex(mix(parseColor('#000'), parseColor('#fff'), 0.5, 'srgb')) === '#808080');
+ok('evalColorExpr reads tokens, token/alpha and literals', (() => { const lk = (n) => ({ 'color.ink': '#102030', 'color.paper': 'color.ink' })[n]; return toHex(evalColorExpr('color.paper', lk)) === '#102030' && evalColorExpr('color.ink/40', lk).a === 0.4 && evalColorExpr('color.nope', lk) === null; })());
+
+/* ------------------------------------------------------------------ */
+section('texture: vocabulary');
+ok(`there are 28 to 32 presets (${PRESET_NAMES.length})`, PRESET_NAMES.length >= 28 && PRESET_NAMES.length <= 32);
+ok('every preset has a one-line description', PRESET_NAMES.every((n) => PRESETS[n].doc && PRESETS[n].doc.length > 8));
+ok('every preset is built only from known generators and settings', PRESET_NAMES.every((n) => PRESETS[n].layers.every((l) => GENERATORS.includes(l.gen) && Object.keys(l).every((k) => ['gen', 'stagger', 'preset'].includes(k) || k in TEXTURE_KEYS))));
+ok('every setting documents itself', Object.values(TEXTURE_KEYS).every((k) => k.doc));
+{
+  const rc = parseColor;
+  const empty = [];
+  for (const n of PRESET_NAMES) {
+    const h = hooks();
+    const layers = parseTexture(n, h);
+    const b = layers && buildTexture(layers, rc);
+    if (!layers || !b || !b.image || h.errors.length) empty.push(n);
+  }
+  ok('every preset parses and builds CSS', empty.length === 0, empty.join(', '));
+  // split a CSS list at top-level commas, ignoring the commas inside url("data:...,...") and gradients
+  const split = (v) => { const out = []; let d = 0, cur = '', q = null; for (const ch of v) { if (q) { cur += ch; if (ch === q) q = null; continue; } if (ch === '"' || ch === "'") { q = ch; cur += ch; continue; } if (ch === '(') d++; if (ch === ')') d--; if (ch === ',' && d === 0) { out.push(cur); cur = ''; continue; } cur += ch; } out.push(cur); return out; };
+  const lists = PRESET_NAMES.map((n) => { const b = buildTexture(parseTexture(n, hooks()), rc); return [n, b.count, split(b.image).length, split(b.size).length, split(b.blend).length, split(b.position).length, split(b.repeat).length]; });
+  const mismatched = lists.filter((l) => l.slice(2).some((x) => x !== l[1]));
+  ok('every list has one entry per layer (images, sizes, blends, positions, repeats line up)', mismatched.length === 0, JSON.stringify(mismatched[0]));
+  ok('building is deterministic: the same texture gives the same CSS', buildTexture(parseTexture('wood', hooks()), rc).image === buildTexture(parseTexture('wood', hooks()), rc).image);
+}
+section('texture: your own');
+{
+  const h = hooks();
+  const l = parseTexture('noise scale 3 octaves 4 color #112233 color2 #ffffff blend multiply contrast 2 seed 9', h);
+  ok('a bare generator with settings parses', l && l.length === 1 && l[0].gen === 'noise' && l[0].octaves === 4 && l[0].seed === 9 && l[0].blend === 'multiply', JSON.stringify(h.errors));
+  const two = parseTexture('grain, lines angle 30', hooks());
+  ok('comma separated textures stack', two.length === 2 && two[1].angle === 30);
+  const over2 = parseTexture('paper intensity 0.2', hooks());
+  ok('settings on a multi-layer preset apply to every layer', over2.length === 2 && over2.every((x) => x.intensity === 0.2));
+  const keep = parseTexture('paper color #123456', hooks());
+  ok('colour settings only retint the first layer of a preset, so its second tone survives', keep[0].color === '#123456' && keep[1].color === '#000');
+  ok('none clears (an empty list, not an error)', (() => { const x = hooks(); const r = parseTexture('none', x); return Array.isArray(r) && r.length === 0 && !x.errors.length; })());
+  ok('contour draws veins: it changes the SVG', buildTexture(parseTexture('noise contour 0.05', hooks()), parseColor).image !== buildTexture(parseTexture('noise', hooks()), parseColor).image);
+}
+section('texture: errors');
+for (const [src, want] of [
+  ['grian', /unknown texture "grian".*did you mean "grain"/], ['grain intensty 1', /unknown texture setting "intensty".*intensity/],
+  ['grain intensity 9', /between 0 and 2/], ['grain intensity lots', /needs a number/], ['noise blend sparkly', /unknown blend "sparkly"/],
+  ['wood stretch 4', /needs 2 values/], ['', /needs a name/], ['grain octaves 99', /between 1 and 8/], ['noise type fuzzy', /unknown type "fuzzy"/],
+]) {
+  const h = hooks();
+  const r = parseTexture(src, h);
+  const text = h.errors.map((e) => e.message + ' ' + (e.hint || '')).join(' ');
+  ok(`"${src}" is refused with a useful message`, r === null && want.test(text), text);
+}
+ok('the same errors come through the real compiler, with the line', errs('.a { texture: grian }')[0].includes('unknown texture'));
+ok('texture on a pseudo-element is refused, it has no DOM handle', errs('.a::before { texture: grain }').some((m) => /engine-native/.test(m)));
+ok('texture compiles to one engine-native declaration', (() => { const d = decls('.a { texture: grain, lines }'); return d.length === 1 && d[0].prop === '@texture' && d[0].value.length === 2; })());
+ok('a token colour resolves to a CSS var, not a literal', decls('.a { texture: noise color color.ink }')[0].value[0].color === 'var(--dssl-color-ink)');
+ok('an unknown token colour is an error with a suggestion', errs('.a { texture: noise color color.inkk }').some((m) => /color\.inkk/.test(m)));
+
+section('texture: masks (for aura)');
+{
+  const a = makeMask({ gen: 'noise', scale: 3, octaves: 3, seed: 1 }, 64), b = makeMask({ gen: 'noise', scale: 3, octaves: 3, seed: 1 }, 64), c = makeMask({ gen: 'noise', scale: 3, octaves: 3, seed: 2 }, 64);
+  ok('masks are deterministic for a seed', a.every((v, i) => v === b[i]));
+  ok('and differ between seeds', a.some((v, i) => v !== c[i]));
+  const mean = a.reduce((x, y) => x + y, 0) / a.length;
+  ok('a noise mask is neither empty nor solid', mean > 30 && mean < 225, mean.toFixed(0));
+  const lines = makeMask({ gen: 'lines', scale: 8, thickness: 2, angle: 0 }, 32);
+  ok('horizontal lines are constant along a row (angle 0) and vary down the column', lines[0] === lines[31] && (lines[0] !== lines[4 * 32] || lines[0] !== lines[2 * 32]));
+  const r1 = rng(5), r2 = rng(5);
+  ok('the PRNG repeats for a seed', [r1(), r1(), r1()].join() === [r2(), r2(), r2()].join());
+}
+
+/* ------------------------------------------------------------------ */
+section('aura: vocabulary');
+ok('every aura setting documents itself', [...Object.values(GLOW_KEYS), ...Object.values(PARTICLE_KEYS)].every((k) => k.doc));
+ok('there are no built-in aura presets: the vocabulary has no "fire" or "ki"', !('fire' in PARTICLE_KEYS) && !('fire' in GLOW_KEYS) && (() => { const h = hooks(); return parseAura('aura', 'fire', h) === null; })());
+section('aura: parsing');
+{
+  const h = hooks();
+  const g = parseAura('aura-glow', 'color.accent 24 pulse 1600 flicker 0.4', h);
+  ok('aura-glow: positional colour and radius, then named settings', g.glow[0].color === 'color.accent' && g.glow[0].radius === 24 && g.glow[0].pulse === 1600 && g.glow[0].flicker === 0.4 && g.particles === undefined, JSON.stringify(h.errors));
+  const p = parseAura('aura-particle', '#fd0 -> #f60 -> transparent 70 up size 12 6 life 600 1100 from bottom shape flame glowing', hooks());
+  const L = p.particles[0];
+  ok('aura-particle: colour stops, count, direction, ranges, words', L.colors.length === 3 && L.count === 70 && L.dir === -90 && L.size[0] === 6 && L.size[1] === 12 && L.life[0] === 600 && L.from === 'bottom' && L.shape === 'flame' && L.glowing === true, JSON.stringify(L));
+  ok('a single number is a fixed value (a range of one)', parseAura('aura-particle', '#fff size 5', hooks()).particles[0].size.join() === '5,5');
+  const gp = parseAura('glow-particle', '#fff 30 out', hooks());
+  ok('glow-particle is a glowing particles layer', gp.particles[0].glowing === true && gp.particles[0].count === 30 && gp.particles[0].dir === 'out');
+  const both = parseAura('aura-glow-particle', '#ff7a00 28 pulse 900 count 50 up', hooks());
+  ok('aura-glow-particle fills both slots from one description', both.glow.length === 1 && both.particles.length === 1 && both.glow[0].pulse === 900 && both.particles[0].count === 50 && both.particles[0].glowing === true);
+  const full = parseAura('aura', 'glow #f60 30 flicker 0.3, particles #fc4 -> #f30 count 60 shape flame', hooks());
+  ok('aura: takes glow and particles layers, comma separated', full.glow.length === 1 && full.particles.length === 1);
+  const stacked = parseAura('aura', 'glow #f60 30, glow #fff 10, particles #fff count 5, particles #f00 count 9', hooks());
+  ok('you can stack several layers of each kind', stacked.glow.length === 2 && stacked.particles.length === 2);
+  ok('plural spellings are the same property (aura-particles, glow-particles)', parseAura('aura-particles', '#fff 5', hooks()).particles.length === 1 && parseAura('glow-particles', '#fff 5', hooks()).particles[0].glowing);
+  const tex = parseAura('aura-glow', '#fff 20 texture(grain scale 2)', hooks());
+  ok('texture(...) carries its own settings into an aura layer', tex.glow[0].texture[0].gen === 'noise' && tex.glow[0].texture[0].scale === 2);
+  ok('behind and essential are flags', (() => { const x = parseAura('aura-particle', '#fff 5 behind essential', hooks()).particles[0]; return x.behind === true && x.essential === true; })());
+  ok('a particle layer can be given a texture', parseAura('aura-particle', '#fff 5 texture(dots)', hooks()).particles[0].texture.length === 1);
+}
+section('aura: none clears only its own slot');
+ok('aura: none clears both', (() => { const r = parseAura('aura', 'none', hooks()); return r.glow === null && r.particles === null; })());
+ok('aura-glow: none clears only the glow slot (it used to clear both)', (() => { const r = parseAura('aura-glow', 'none', hooks()); return r.glow === null && r.particles === undefined; })());
+ok('aura-particle: none clears only the particles slot', (() => { const r = parseAura('aura-particle', 'none', hooks()); return r.particles === null && r.glow === undefined; })());
+ok('glow-particle: none clears only the particles slot', (() => { const r = parseAura('glow-particle', 'none', hooks()); return r.particles === null && r.glow === undefined; })());
+ok('through the compiler: aura-glow: none writes one slot only', (() => { const d = decls('.a { aura-glow: none }'); return d.length === 1 && d[0].prop === '@aura-glow' && d[0].value === null; })());
+section('aura: errors');
+for (const [prop, src, want] of [
+  ['aura', 'sparkle #fff', /starts with glow or particles/], ['aura-glow', '#fff radius 9999', /between 1 and 400/], ['aura-particle', 'count lots', /needs a number/],
+  ['aura-particle', '#fff shape flaim', /unknown shape "flaim".*flame/], ['aura-particle', '#fff dir sideways', /unknown direction/], ['aura-particle', '#fff speedd 4', /unknown aura setting "speedd".*speed/],
+  ['aura-particle', '#fff from middle', /unknown from "middle"/], ['aura-glow', '#fff pulse -5', /between 0 and 60000/], ['aura-particle', '#fff count 0', /between 1 and 600/],
+  ['aura-particle', '#fff size', /needs a number/], ['aura-glow', '#fff texture(grian)', /unknown texture "grian"/], ['aura-glow', '', /needs a value/],
+]) {
+  const h = hooks();
+  const r = parseAura(prop, src, h);
+  const text = h.errors.map((e) => e.message + ' ' + (e.hint || '')).join(' ');
+  ok(`${prop}: ${src || '(empty)'} is refused clearly`, r === null && want.test(text), text);
+}
+ok('a mistyped token colour in an aura is caught by the compiler with a suggestion', errs('.a { aura-glow: colr.accent 24 }').some((m) => /colr\.accent/.test(m)));
+ok('aura on a pseudo-element is refused', errs('.a::after { aura: glow #f00 10 }').some((m) => /engine-native/.test(m)));
+ok('aura compiles to engine-native declarations, one per slot', (() => { const d = decls('.a { aura: glow #f00 10, particles #fff 5 }'); return d.map((x) => x.prop).join() === '@aura-glow,@aura-particles'; })());
+ok('`dssl build` leaves aura in the runtime and says so', (() => { const r = compile('.a { aura-glow: #f00 10 }'); return r.doc.rules[0].decls.every((d) => d.prop.startsWith('@')); })());
+section('aura: resolving a layer for drawing');
+{
+  const rc = (css) => parseColor(css);
+  const fb = { r: 9, g: 9, b: 9, a: 1 };
+  const glow = resolveLayer(parseAura('aura-glow', '#ff0000 20', hooks()).glow[0], rc, fb);
+  ok('glow: defaults fill in (intensity 1, depth .35, no pulse)', glow.intensity === 1 && glow.pulse === 0 && glow.depth === 0.35 && glow.rgba.r === 255);
+  const none = resolveLayer(parseAura('aura-glow', 'radius 12', hooks()).glow[0], rc, fb);
+  ok('a glow with no colour falls back to the element colour', none.rgba.r === 9);
+  const one = resolveLayer(parseAura('aura-particle', '#ff0000 5', hooks()).particles[0], rc, fb);
+  ok('one colour fades itself out (a second, transparent stop is added)', one.stops.length === 2 && one.stops[1].a === 0);
+  const add = resolveLayer(parseAura('glow-particle', '#fff 5', hooks()).particles[0], rc, fb);
+  ok('glowing particles blend additively by default, plain ones normally', add.blend === 'add' && one.blend === 'normal');
+  ok('defaults: 40 particles, size 4, life 900, speed 40, up', one.count === 5 && one.size[0] === 4 && one.life[0] === 900 && one.speed[0] === 40 && one.dir === -90);
+}
+
+/* ------------------------------------------------------------------ */
+section('slider: parsing');
+{
+  const h = hooks();
+  const s = parseSlider('track 8 #445566 radius full, fill #ff7a00, thumb 24 #fff, shape diamond, ring 3 #000, glow #ff7a00 14, ticks 5 #888 8', h);
+  ok('all clauses parse', s && s.track.h === 8 && s.fill === '#ff7a00' && s.thumb.size === 24 && s.shape === 'diamond' && s.ring.w === 3 && s.glow.r === 14 && s.ticks.n === 5 && s.ticks.len === 8, JSON.stringify(h.errors));
+  ok('track takes its parts in any order', (() => { const a = parseSlider('track #123456 6 radius 2', hooks()); return a.track.h === 6 && a.track.color === '#123456' && a.track.radius === 2; })());
+  const g = parseSlider('graph 10 20 30 40, graph-height 50, graph-gap 2', hooks());
+  ok('graph and its sizing', g.graph.length === 4 && g.graphHeight === 50 && g.graphGap === 2);
+  ok('fill none turns the fill off', parseSlider('fill none', hooks()).fill === null);
+}
+section('slider: errors');
+for (const [src, want] of [
+  ['thumb big', /thumb needs a size/], ['shape cirle', /unknown thumb shape "cirle".*circle/], ['colour red', /unknown slider setting "colour"/],
+  ['thumb 16 #fff shape bar', /unexpected "shape bar" in the thumb setting.*separate settings with commas/], ['fill red blue', /unexpected "blue"/], ['ticks 1', /at least 2/],
+  ['graph 5', /at least two numbers/], ['graph 10 200', /0 to 100/], ['graph-height 3', /at least 8/], ['ring 3', /width and a colour/], ['glow', /colour and a radius/], ['', /needs a description/],
+]) {
+  const h = hooks();
+  const r = parseSlider(src, h);
+  const text = h.errors.map((e) => e.message + ' ' + (e.hint || '')).join(' ');
+  ok(`slider: ${src || '(empty)'} is refused clearly`, r === null && want.test(text), text);
+}
+section('slider: generated CSS');
+{
+  const spec = parseSlider('fill #f80, thumb 20 #fff, ring 2 #000, shape circle', hooks());
+  const css = sliderCss(spec);
+  const pseudos = css.shadow.map((x) => x.pseudo);
+  ok('both engines are covered: -webkit- track and thumb, -moz- track, thumb and progress', ['-webkit-slider-runnable-track', '-webkit-slider-thumb', '-moz-range-track', '-moz-range-thumb', '-moz-range-progress'].every((p) => pseudos.includes(p)), pseudos.join());
+  ok('the input itself loses its native look', css.base.some((d) => d.prop === 'appearance' && d.value === 'none') && css.base.some((d) => d.prop === '-webkit-appearance'));
+  const track = css.shadow.find((x) => x.pseudo === '-webkit-slider-runnable-track').decls.find((d) => d.prop === 'background-image').value;
+  ok('the fill follows --dssl-p with a 0.5 fallback, so it works before the engine sets it', /var\(--dssl-p, 0\.5\)/.test(track));
+  ok('the thumb is vertically centred on the track in WebKit (margin-top)', css.shadow.find((x) => x.pseudo === '-webkit-slider-thumb').decls.some((d) => d.prop === 'margin-top'));
+  const graph = sliderCss(parseSlider('graph 10 50 90', hooks()));
+  ok('a graph draws one layer per bar plus the baseline', graph.shadow[0].decls.find((d) => d.prop === 'background-image').value.split('linear-gradient(').length - 1 === 4);
+  ok('graphs get small corners so the bars are not clipped into a semicircle', /4px/.test(graph.shadow[0].decls.find((d) => d.prop === 'border-radius').value));
+}
+section('slider: through the compiler');
+{
+  const r = compile('input[type=range] { slider: fill #f80, thumb 20 #fff }');
+  ok('one slider rule yields the rule plus five vendor pseudo-element rules', r.ok && r.doc.shadowRules.length === 5 && r.doc.rules.length === 1);
+  ok('the base declarations come FIRST so an author\'s own width wins', (() => { const d = r.doc.rules[0].decls; return d.findIndex((x) => x.prop === 'width') < d.findIndex((x) => x.prop === '@slider'); })());
+  const own = compile('input { width: 200px\n slider: fill #f80 }');
+  ok('an author width written before slider: still wins (declared later in the base order)', own.ok);
+  ok('a selector list gets rules for every part', compile('input.a, input.b { slider: fill #f80 }').doc.shadowRules.length === 10);
+  ok('slider on a pseudo-element is refused', errs('.a::before { slider: fill #f80 }').some((m) => /engine-native/.test(m)));
+  ok('a bad slider rule is dropped as a whole, loudly', (() => { const x = compile('input { slider: thumb big }'); return !x.ok && x.doc.rules.length === 0; })());
+}
+
+/* ------------------------------------------------------------------ */
+section('lint');
+ok('low contrast between colour and background is flagged', warns('.a { color: #999; background: #aaa }').some((m) => /contrast is 1\.2:1/.test(m)));
+ok('good contrast is quiet', warns('.a { color: #111; background: #fff }').length === 0);
+ok('large text is held to 3:1, not 4.5:1', warns('.a { color: #777; background: #fff; font-size: 28 }').length === 0 && warns('.a { color: #777; background: #fff }').length === 1);
+ok('tokens are followed, alpha included', warns('.a { color: color.ink/40; background: color.paper }').some((m) => /contrast/.test(m)));
+ok('rules inside @media or @signal are not judged against the light tokens', warns('.a { @media dark { color: #999; background: #aaa } }').length === 0 && warns('@signal theme == dark { .a { color: #999; background: #aaa } }').length === 0);
+ok('only a colour AND a background in the same rule are compared', warns('.a { color: #fff }').length === 0 && warns('.a { background: #fff }').length === 0);
+ok('a gradient background is not guessed at', warns('.a { color: #fff; background: linear-gradient(red, blue) }').length === 0);
+ok('a removed focus outline on a button is flagged', warns('button { outline: none }').some((m) => /focus outline is removed/.test(m)));
+ok('unless a focus-visible block replaces it', warns('button { outline: none\n focus-visible { outline: 2 solid red } }').length === 0);
+ok('a plain div is not nagged about focus', warns('.card { outline: none }').length === 0);
+ok('outline: 0 and outline-style: none count too', warns('a { outline: 0 }').length === 1 && warns('input { outline-style: none }').length === 1);
+ok('a button smaller than 24px is flagged', warns('button { width: 16; height: 16 }').some((m) => /below 24px/.test(m)));
+ok('a normal button is quiet', warns('button { width: 48; height: 32 }').length === 0);
+ok('lint never makes ok false (warnings only)', compile('.a { color: #999; background: #aaa }').ok === true);
+ok('a lint failure can never break a compile (wrapped)', (() => { try { return compile('.a { color: var(--weird); background: var(--also) }').ok; } catch { return false; } })());
+
+/* ------------------------------------------------------------------ */
+section('import: the CSS parser');
+{
+  const t = parseCss('a{color:red}/*c*/@media (x){b{margin:0 !important}}');
+  ok('rules, comments, at-rules and !important are understood', t[0].type === 'rule' && t[1].type === 'comment' && t[2].type === 'at' && t[2].body[0].body[0].important === true);
+  const nested = parseCss('.a{ color:red; &:hover{ color:blue } .b{ margin:0 } }');
+  ok('modern nesting is parsed', nested[0].body.length === 3 && nested[0].body[1].type === 'rule');
+  ok('semicolons and braces inside strings and url() do not split', (() => { const x = parseCss('a{content:";}{";background:url(a;b.png)}'); return x[0].body.length === 2 && x[0].body[0].value === '";}{"'; })());
+  ok('a declaration with no final semicolon is kept', parseCss('a{color:red}')[0].body[0].value === 'red');
+  ok('an at-rule statement (@import) is understood', parseCss('@import url("x.css");a{b:c}')[0].name === 'import' && parseCss('@import url("x.css");a{b:c}')[0].body === null);
+}
+section('import: conversion');
+{
+  const r = (css) => importCss(css);
+  ok('semicolons go and px becomes a bare number', r('a{margin:0px 16px;padding:8px}').dssl.includes('margin: 0 16') && !/;/.test(r('a{margin:0px 16px;padding:8px}').dssl.replace(/\/\/.*/g, '')));
+  ok('unitless properties keep their px (line-height: 24px is NOT 24)', r('a{line-height:24px;z-index:3}').dssl.includes('line-height: 24px'));
+  ok('px inside calc() is left alone', r('a{width:calc(100% - 20px)}').dssl.includes('calc(100% - 20px)'));
+  ok('transition is rewritten into DSSL order', r('a{transition:color .2s ease, transform 300ms ease-in-out}').dssl.includes('transition: 200 ease color, 300 ease-in-out transform'));
+  ok('transition: all drops the property word', r('a{transition:all .2s ease}').dssl.includes('transition: 200 ease\n'));
+  ok('font: shorthand becomes longhands (DSSL font: means something else)', (() => { const o = r('a{font: italic 700 14px/1.5 Arial, sans-serif}').dssl; return o.includes('font-style: italic') && o.includes('font-weight: 700') && o.includes('font-size: 14') && o.includes('line-height: 1.5') && o.includes('font-family: Arial, sans-serif'); })());
+  ok('@keyframes becomes a motion with from, at N% and to', (() => { const o = r('@keyframes p{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}').dssl; return o.includes('motion p {') && o.includes('from {') && o.includes('at 50% {') && o.includes('to {'); })());
+  ok('!important moves into pin { }', (() => { const o = r('a{color:red !important;margin:0}').dssl; return o.includes('pin {') && /pin \{\s+a \{\s+color: red/.test(o) && !/a \{\s+color: red\s+margin/.test(o); })());
+  ok('@font-face, @supports and @import go to one raw block, verbatim, with their semicolons', (() => { const o = r('@import url("a.css");@font-face{font-family:X;src:url(x.woff2)}@supports (display:grid){a{display:grid}}').dssl; return o.startsWith('//') && o.includes('raw {') && o.includes('font-family:X;src:url(x.woff2)') && o.includes('@supports (display:grid)'); })());
+  ok('@media is kept and its rules converted inside', r('@media (max-width:600px){a{padding:12px}}').dssl.includes('@media (max-width:600px) {') && r('@media (max-width:600px){a{padding:12px}}').dssl.includes('padding: 12'));
+  ok('custom properties are untouched (no px stripping)', r(':root{--gap:16px}').dssl.includes('--gap: 16px'));
+  ok('selectors, pseudo-classes and pseudo-elements pass straight through', r('a:not(.x)::after{content:"x"}').dssl.includes('a:not(.x)::after {'));
+  const rep = r('a{-moz-foo:1;color:red}').report;
+  ok('a property DSSL does not know is commented out and reported, not lost silently', rep.dropped.length === 1 && /-moz-foo/.test(rep.dropped[0].text) && r('a{-moz-foo:1;color:red}').dssl.includes('// dssl import dropped'));
+  ok('what the compiler rejects is commented out so the output always compiles', (() => { const x = r('a{scroll-snap-type:x mandatory;color:red}'); return x.report.compile.ok && x.report.dropped.some((d) => /scroll-snap-type/.test(d.text)); })());
+  ok('a typical stylesheet round-trips into something that compiles', (() => { const x = r('body{margin:0;font:16px/1.5 system-ui}.card{border:1px solid #ddd;border-radius:14px;transition:all .2s ease}.card:hover{transform:translateY(-4px)}@media (max-width:600px){.card{padding:12px}}'); return x.report.compile.ok; })());
+  ok('the report counts what it did', (() => { const x = r('a{margin:0px !important;color:red}@font-face{font-family:Q;src:url(q)}@keyframes k{from{opacity:0}to{opacity:1}}'); return x.report.pinned === 1 && x.report.raw === 1 && x.report.motions === 1; })());
+  ok('empty input gives empty, valid output', (() => { const x = r(''); return x.dssl.trim() === '' && x.report.compile.ok; })());
+  ok('garbage does not throw', (() => { try { return importCss('}}}{{{ ;;; @@@ a{').dssl !== undefined; } catch { return false; } })());
+}
+
+/* ------------------------------------------------------------------ */
+section('share links');
+{
+  const { encodeShare, decodeShare, shareFromHash, MAX_SHARE_URL } = await import('../src/lib/share.ts');
+  const samples = ['', 'a', '.card { color: red }\n', 'üñíçødé ✓ 日本語 😀', '.x { content: "-" }'.repeat(200), 'x'.repeat(20000)];
+  let allOk = true;
+  for (const s of samples) { const back = await decodeShare(await encodeShare(s)); if (back !== s) allOk = false; }
+  ok('text survives a round trip (empty, unicode, 20 KB)', allOk);
+  const big = await encodeShare('.card { color: red }\n'.repeat(400));
+  ok('gzip makes repetitive source much smaller in the URL', big[0] === 'z' && big.length < 400, `${big.length} chars`);
+  ok('the packed form is URL safe (no + / = )', /^[zp][A-Za-z0-9_-]+$/.test(big));
+  ok('a damaged link is null, not a crash', (await decodeShare('zNOTVALID###')) === null && (await decodeShare('')) === null && (await decodeShare('q123')) === null);
+  ok('only #s=... hashes are share links', shareFromHash('#s=zABC') === 'zABC' && shareFromHash('#/docs') === null && shareFromHash('#s=') === null && shareFromHash('') === null);
+  ok('the URL limit is a sane number', MAX_SHARE_URL >= 2000 && MAX_SHARE_URL <= 16000);
+}
+
+/* ------------------------------------------------------------------ */
+section('dssl build: what stays in the runtime');
+{
+  const { toCSS } = await import('../public/dssl/index.js');
+  const r = toCSS('behavior fire { aura-glow: #f80 20\n aura-particle: #fd0 5 up }\n.torch { use fire\n background: #222\n texture: grain }\ninput[type=range] { slider: fill #f80 }');
+  ok('aura, texture and slider are counted as engine-native even in a rule that keeps other declarations', r.report.engineDecls === 4, JSON.stringify(r.report.engineKinds));
+  ok('the report names them', r.report.engineKinds.join() === 'aura-glow,aura-particles,slider,texture');
+  ok('the plain declaration of that rule still reaches the CSS', /\.torch \{\s+background: #222;/.test(r.css));
+  ok('the slider\'s vendor pseudo-element rules ARE emitted as real CSS (only the fill follower needs the engine)', /::-webkit-slider-thumb/.test(r.css) && /::-moz-range-thumb/.test(r.css));
+  ok('the banner states the real version', r.css.includes(`DSSL v${VERSION}`));
+}
+
+/* ------------------------------------------------------------------ */
+section('release');
+ok('the engine version is 0.9.x', /^0\.9\./.test(VERSION), VERSION);
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

scripts/texture-gallery.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/* texture-gallery.mjs: render every texture preset on a swatch and save a PNG.
+ *   node scripts/texture-gallery.mjs out.png [--base "#b8a58a"] [--cols 6]
+ * Useful for eyeballing a new preset, and the tests use the same page to check
+ * that each one actually paints something. */
+import { withBrowser } from './lib/browser-harness.mjs';
+
+const args = process.argv.slice(2);
+const out = args.find((a) => a.endsWith('.png')) || 'texture-gallery.png';
+const flag = (name, d) => { const i = args.indexOf(name); return i === -1 ? d : args[i + 1]; };
+const base = flag('--base', '#b8a58a');
+const cols = Number(flag('--cols', 6));
+
+export const galleryPage = (base, cols) => `<!doctype html><meta charset=utf-8><body style="margin:0;background:#f4f2f7;font:12px system-ui">
+<div id=g style="display:grid;grid-template-columns:repeat(${cols},1fr);gap:10px;padding:10px"></div>
+<script type=module>
+import { PRESET_NAMES, parseTexture, buildTexture } from '/dssl/texture.js';
+import { parseColor } from '/dssl/color.js';
+const hooks = { error: (m) => console.error(m), color: (w) => w, suggest: () => null };
+const g = document.getElementById('g');
+window.report = {};
+for (const name of PRESET_NAMES) {
+  const tex = buildTexture(parseTexture(name, hooks), parseColor);
+  const cell = document.createElement('div');
+  cell.innerHTML = '<div class=sw style="height:96px;border-radius:6px;background-color:${base}"></div><div style="padding:3px 2px">' + name + '</div>';
+  const sw = cell.firstChild;
+  sw.style.backgroundImage = tex.image; sw.style.backgroundSize = tex.size; sw.style.backgroundRepeat = tex.repeat;
+  sw.style.backgroundPosition = tex.position; sw.style.backgroundBlendMode = tex.blend;
+  g.appendChild(cell);
+  window.report[name] = tex.count;
+}
+window.ready = true;
+</script>`;
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  await withBrowser(async ({ open }) => {
+    const page = await open('/gallery');
+    await page.waitForFunction('window.ready === true');
+    await page.waitForTimeout(400);
+    await page.screenshot({ path: out, fullPage: true });
+    console.log('wrote', out);
+  }, { pages: { '/gallery': galleryPage(base, cols) }, viewport: { width: 1100, height: 700 } });
+}