VS Code extension 0.9.0: aura, texture and slider designers, CSS conversion

Live webview designers that read and write DSSL, backed by pure modules and
tests against a fake vscode API and a real Chrome.

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

dssl-vscode/PUBLISHING.md

@@ -12,21 +12,20 @@ there, "DSSL" shows up in the tab, searchable, one-click install, updates includ
 One-time, on your side (about 2 minutes):
 
 1. Go to https://open-vsx.org and sign in with your GitHub account.
-2. Top right: your avatar → **Settings** → **Access Tokens** → **Generate token**.
-3. Give it any name, copy the value, and paste it in chat. It gets stored the
-   same way as the HF and Vercel tokens (chmod 600, outside every tracked file,
-   mirrored into `.git/backups/`).
+2. Open your profile, then **Settings**, then **Access Tokens**, and generate a token.
+3. Accept the Eclipse publisher agreement on the same page. Publishing fails without it.
+4. Put the token in a file that is not in the repo, for example `~/Dokumente/tokens/openvsx token`.
 
-Then it is one command on my side:
+Then it is one command:
 
 ```sh
-bash scripts/publish-openvsx.sh
+OPENVSX_TOKEN_FILE="$HOME/Dokumente/tokens/openvsx token" bash scripts/publish-openvsx.sh
 ```
 
-The script reads the token, creates the `ehs-studio` namespace (tolerates "already
-exists"), and publishes the newest `.vsix`. After that:
+(`OPENVSX_TOKEN` or a first argument work too.) The script creates the `ehs-studio` namespace
+(tolerating "already exists") and publishes the newest `.vsix` in this folder. After that:
 
-- VSCodium: Extensions tab → search "DSSL" → Install.
+- VSCodium: Extensions tab, search "DSSL", Install.
 - Future updates: bump `version` in `dssl-vscode/package.json`, repackage with
   `npx @vscode/vsce package --no-dependencies`, rerun the script.
 
@@ -40,7 +39,7 @@ gatekeeper: it requires an Azure DevOps organization and a personal access token
    Suggested ID: `ehs-studio`.
 3. In Azure DevOps: User settings → **Personal access tokens** → New token with
    scope **Marketplace → Manage**.
-4. Hand over the token like the others, then it is:
+4. Keep the token in a file outside the repo, then it is:
 
 ```sh
 cd dssl-vscode && npx @vscode/vsce publish --pat <token>
@@ -58,4 +57,4 @@ This can happen at any time; Open VSX first does not block it.
 
 - `node scripts/sync-extension-engine.mjs` after ANY engine change, so the
   bundled compiler matches the browser compiler.
-- Run the extension lib tests (36 assertions) before packaging.
+- Run `npm run test:fast` and `node scripts/test-designer-host.mjs` before packaging. The second one loads the real `extension.js` against a fake editor API, which is the closest thing to opening it in VS Code. Do also open the packaged `.vsix` in VS Code once.

dssl-vscode/README.md

@@ -8,9 +8,9 @@ Works in **VS Code** and **VSCodium** (same extension API; install the `.vsix` i
 via Extensions panel → ⋯ → *Install from VSIX*).
 
 Extension id: **`ehs-studio.dssl-vscode`**. An Open VSX listing (the registry VSCodium's
-Extensions tab searches) is staged: one Open VSX token from the user and
-`scripts/publish-openvsx.sh` puts it in the tab, searchable. See PUBLISHING.md for both
-that flow and the Microsoft Marketplace flow.
+Extensions tab searches) is staged: it needs an Open VSX access token, then
+`scripts/publish-openvsx.sh` puts it in the tab. See PUBLISHING.md for that flow and the
+Microsoft Marketplace one.
 
 ## Features
 
@@ -22,6 +22,23 @@ that flow and the Microsoft Marketplace flow.
 - **Hover docs** for the semantic vocabulary (`row:`, `bend:`, `stretch:`, `seen`, `pin`...),
   for tokens (resolved value), for workspace motions and behaviors.
 - **Syntax highlighting** via a TextMate grammar for `.dssl`.
+- **Completions for the new vocabulary.** After `texture:` you get the 30 presets, the generators and
+  every setting; after `aura-glow:` only glow settings; after `aura-particle:` only particle settings
+  (shapes, where particles are born, directions); after `slider:` the clauses. Hovering a preset or a
+  setting explains it.
+- **The designer** (*DSSL: Open the designer*, or the paint-can button on a `.dssl` tab). Three tabs:
+  - *Aura*: a slider or picker for every glow and particle setting, colour stops you can add and
+    remove, a live preview drawn by the real renderer, a graph of one particle's opacity and size over
+    its life, and a live graph of particles alive and frame time.
+  - *Texture*: all 30 presets and 10 generators as thumbnails, up to four stacked layers, every setting
+    as a slider, colour pickers.
+  - *Slider*: a live range input with the generated rules, and a bar editor for histogram sliders.
+
+  Each tab writes the DSSL for you and checks it with the real compiler as you go. **Insert at cursor**
+  puts it in your file (indented to match, replacing a selection if there is one). **Load from selection**
+  reads an existing `aura-glow:`, `texture:` or `slider:` declaration back into the controls.
+- **DSSL: Convert a CSS file to DSSL** (right-click a `.css` file). Runs the importer, writes the `.dssl`
+  next to it, and lists in an output channel what it could not carry over.
 
 ## What it does not do (yet)
 
@@ -37,8 +54,8 @@ that flow and the Microsoft Marketplace flow.
 
 ## How it works
 
-`lib/engine/` holds a synced copy of `public/dssl/{parser,resolver,utils}.js` from the
-main repo (keep them identical with `scripts/sync-extension-engine.mjs`). On change, every
+`lib/engine/` holds a synced copy of the engine's modules (`parser`, `resolver`, `utils`, `color`, `texture`,
+`aura`, `slider`, `lint`, `import`) from the main repo (keep them identical with `scripts/sync-extension-engine.mjs`). On change, every
 `.dssl` file in the workspace is parsed once, tokens fold in load order, and the real
 `resolve()` produces the diagnostics. Completions and hovers read the folded registry.
 

dssl-vscode/extension.js

@@ -1,4 +1,4 @@
-/* extension.js — thin vscode wiring over lib/analysis.js.
+/* extension.js - thin vscode wiring over lib/analysis.js.
  * The analysis layer (and the DSSL compiler it wraps) is ESM; the extension
  * host is happy with a dynamic import from CommonJS. Everything testable
  * lives in lib/, this file only talks to the editor. */
@@ -9,6 +9,9 @@ let mod = null;          // lib/analysis.js module
 let analysis = null;     // current workspace analysis result
 let diags = null;        // DiagnosticCollection (created once)
 let debounceTimer = null;
+let designerHost = null;  // lib/designer-host.js
+let designerPanel = null;
+let lastDsslEditor = null; // the panel steals focus, so remember which .dssl editor to insert into
 
 const KIND = {
   property: vscode.CompletionItemKind.Property,
@@ -90,6 +93,88 @@ function registerHover() {
   });
 }
 
+/* ---- the designer panel ---------------------------------------------- */
+
+/** the .dssl editor to talk to: the last one the user was in, if it is still on screen */
+function findDsslEditor() {
+  const visible = vscode.window.visibleTextEditors.filter((e) => e.document.languageId === 'dssl');
+  if (lastDsslEditor && visible.includes(lastDsslEditor)) return lastDsslEditor;
+  return visible[0] || null;
+}
+
+/** the editor, as designer-host.js wants it. New lines keep the indentation of the line you insert on. */
+function editorBridge() {
+  return {
+    activeDsslEditor() {
+      const ed = findDsslEditor();
+      if (!ed) return null;
+      return {
+        async insert(text) {
+          const sel = ed.selection;
+          const indent = (ed.document.lineAt(sel.start.line).text.match(/^\s*/) || [''])[0];
+          const body = text.replace(/\n/g, '\n' + indent);
+          await ed.edit((b) => (sel.isEmpty ? b.insert(sel.active, body) : b.replace(sel, body)));
+        },
+        selectionText() { return ed.document.getText(ed.selection); },
+      };
+    },
+    copy: (text) => vscode.env.clipboard.writeText(text),
+    info: (m) => vscode.window.setStatusBarMessage('DSSL designer: ' + m, 4000),
+    post: (m) => designerPanel && designerPanel.webview.postMessage(m),
+  };
+}
+
+async function openDesigner(context, tab) {
+  if (!designerHost) designerHost = await import('./lib/designer-host.js');
+  if (designerPanel) {
+    designerPanel.reveal(undefined, true);
+    designerPanel.webview.postMessage({ type: 'tab', tab });
+    return;
+  }
+  const column = vscode.window.activeTextEditor ? vscode.ViewColumn.Beside : vscode.ViewColumn.Active;
+  designerPanel = vscode.window.createWebviewPanel('dsslDesigner', 'DSSL designer', { viewColumn: column, preserveFocus: true }, {
+    enableScripts: true,
+    retainContextWhenHidden: true,
+    localResourceRoots: [context.extensionUri],
+  });
+  const uri = (rel) => designerPanel.webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, ...rel.split('/'))).toString();
+  designerPanel.webview.html = designerHost.designerHtml({ cspSource: designerPanel.webview.cspSource, uri, tab });
+  const bridge = editorBridge();
+  designerPanel.webview.onDidReceiveMessage((msg) => designerHost.handleMessage(msg, bridge).catch((e) => vscode.window.showErrorMessage('DSSL designer: ' + e.message)));
+  designerPanel.onDidDispose(() => { designerPanel = null; });
+}
+
+/* ---- CSS to DSSL -------------------------------------------------------- */
+
+let importChannel = null;
+
+async function convertCss(uri) {
+  const target = uri || (vscode.window.activeTextEditor && vscode.window.activeTextEditor.document.uri);
+  if (!target || !/\.css$/i.test(target.fsPath)) { vscode.window.showInformationMessage('DSSL: pick a .css file to convert (right-click it in the Explorer, or open it first).'); return; }
+  const { importCss } = await import('./lib/engine/import.js');
+  const text = Buffer.from(await vscode.workspace.fs.readFile(target)).toString('utf8');
+  const { dssl, report } = importCss(text);
+  const out = vscode.Uri.file(target.fsPath.replace(/\.css$/i, '.dssl'));
+  let exists = true;
+  try { await vscode.workspace.fs.stat(out); } catch { exists = false; }
+  if (exists) {
+    const pick = await vscode.window.showWarningMessage(`${out.fsPath.split(/[\\/]/).pop()} already exists.`, { modal: true }, 'Overwrite');
+    if (pick !== 'Overwrite') return;
+  }
+  await vscode.workspace.fs.writeFile(out, Buffer.from(dssl, 'utf8'));
+  if (!importChannel) importChannel = vscode.window.createOutputChannel('DSSL import');
+  importChannel.clear();
+  importChannel.appendLine(`Converted ${target.fsPath}`);
+  importChannel.appendLine(`  ${report.rules} rule(s), ${report.declarations} declaration(s), ${report.converted} rewritten, ${report.pinned} moved to pin { }, ${report.motions} motion(s), ${report.raw} at-rule(s) kept in raw { }`);
+  for (const d of report.dropped) importChannel.appendLine(`  dropped line ${d.line}: ${d.text}\n    ${d.reason}`);
+  for (const n of report.notes) importChannel.appendLine(`  note line ${n.line}: ${n.message}${n.hint ? '\n    ' + n.hint : ''}`);
+  importChannel.appendLine(report.compile.ok ? '  The result compiles.' : `  The result still has ${report.compile.errors.length} error(s).`);
+  await vscode.window.showTextDocument(await vscode.workspace.openTextDocument(out), { preview: false });
+  const bits = [`${report.converted} values rewritten`];
+  if (report.dropped.length) bits.push(`${report.dropped.length} line(s) dropped`);
+  vscode.window.showInformationMessage(`DSSL: converted to ${out.fsPath.split(/[\\/]/).pop()} (${bits.join(', ')}).`, 'Show the report').then((c) => { if (c) importChannel.show(true); });
+}
+
 async function activate(context) {
   mod = await import('./lib/analysis.js');
   diags = vscode.languages.createDiagnosticCollection('dssl');
@@ -103,7 +188,14 @@ async function activate(context) {
     vscode.workspace.onDidChangeWorkspaceFolders(() => scheduleAnalysis()),
     registerCompletion(),
     registerHover(),
+    vscode.window.onDidChangeActiveTextEditor((ed) => { if (ed && ed.document.languageId === 'dssl') lastDsslEditor = ed; }),
+    vscode.commands.registerCommand('dssl.openDesigner', () => openDesigner(context, 'aura')),
+    vscode.commands.registerCommand('dssl.openAuraDesigner', () => openDesigner(context, 'aura')),
+    vscode.commands.registerCommand('dssl.openTextureDesigner', () => openDesigner(context, 'texture')),
+    vscode.commands.registerCommand('dssl.openSliderDesigner', () => openDesigner(context, 'slider')),
+    vscode.commands.registerCommand('dssl.convertCss', (uri) => convertCss(uri)),
   );
+  if (vscode.window.activeTextEditor && vscode.window.activeTextEditor.document.languageId === 'dssl') lastDsslEditor = vscode.window.activeTextEditor;
 
   // run once so diagnostics are present before the first keystroke
   await runAnalysis();

dssl-vscode/lib/analysis.js

@@ -1,4 +1,4 @@
-/* analysis.js — pure analysis over .dssl text. No vscode imports here; the
+/* analysis.js - pure analysis over .dssl text. No vscode imports here; the
  * extension layer feeds it text and offsets, tests feed it strings.
  * The point of this module: diagnostics come from the REAL parser and
  * resolver (the same code the browser runs), and completions come from the
@@ -7,11 +7,52 @@
 import { parse, PSEUDO_ELEMENTS } from './engine/parser.js';
 import { resolve, DEFAULT_TOKENS, CSS_KEYWORDS } from './engine/resolver.js';
 import { SEMANTIC, CSS, STATES, AT_RULES, BLOCKS, PROPERTY_NAMES } from './props-docs.js';
+import { PRESETS, PRESET_NAMES, GENERATORS, TEXTURE_KEYS, BLEND_MODES } from './engine/texture.js';
+import { GLOW_KEYS, PARTICLE_KEYS, SHAPES, FROM_WORDS, DIR_WORDS } from './engine/aura.js';
+import { SLIDER_CLAUSES, THUMB_SHAPES } from './engine/slider.js';
+
+/* ---- the 0.9.0 vocabulary: what to offer after `texture:`, `aura-glow:`, `slider:` ... ----- */
+const AURA_PROP = /^(aura|aura-glow|aura-particles?|glow-particles?|aura-glow-particles?)$/;
+function domainItems(prop) {
+  const items = [];
+  const add = (label, detail, documentation, kind = 'keyword') => items.push({ label, kind, detail, documentation });
+  if (prop === 'texture') {
+    for (const n of PRESET_NAMES) add(n, 'texture preset', PRESETS[n].doc, 'value');
+    for (const g of GENERATORS) add(g, 'texture generator', 'start from scratch with this generator, then add settings');
+    for (const [k, d] of Object.entries(TEXTURE_KEYS)) add(k, 'texture setting', d.doc);
+    for (const b of BLEND_MODES) add(b, 'blend mode', 'how the texture mixes with what is under it');
+  } else if (prop === 'slider') {
+    for (const [k, usage] of Object.entries(SLIDER_CLAUSES)) add(k, 'slider setting', usage);
+    for (const t of THUMB_SHAPES) add(t, 'thumb shape', 'shape ' + t);
+  } else if (AURA_PROP.test(prop)) {
+    const glowOnly = prop === 'aura-glow';
+    const partsOnly = /particle/.test(prop) && prop !== 'aura-glow-particle' && prop !== 'aura-glow-particles';
+    if (prop === 'aura') { add('glow', 'aura layer', 'a soft light around the element'); add('particles', 'aura layer', 'things that leave the element'); add('none', 'clears', 'remove the whole aura'); }
+    if (!partsOnly) for (const [k, d] of Object.entries(GLOW_KEYS)) add(k, 'glow setting', d.doc);
+    if (!glowOnly) for (const [k, d] of Object.entries(PARTICLE_KEYS)) add(k, 'particle setting', d.doc);
+    if (!glowOnly) {
+      for (const s of SHAPES) add(s, 'particle shape', 'shape ' + s);
+      for (const f of FROM_WORDS) add(f, 'where particles are born', 'from ' + f);
+      for (const d of Object.keys(DIR_WORDS)) add(d, 'direction', 'dir ' + d);
+    }
+    for (const n of PRESET_NAMES) add(`texture(${n})`, 'texture inside an aura', PRESETS[n].doc);
+  }
+  return items;
+}
+function domainHover(word) {
+  if (PRESETS[word]) return `**${word}** _texture preset_ \u2014 ${PRESETS[word].doc}. Use it as \`texture: ${word}\`.`;
+  if (GENERATORS.includes(word)) return `**${word}** _texture generator_ \u2014 start from scratch with it, then add settings.`;
+  if (TEXTURE_KEYS[word]) return `**${word}** _texture setting_ \u2014 ${TEXTURE_KEYS[word].doc}`;
+  if (GLOW_KEYS[word]) return `**${word}** _glow setting_ \u2014 ${GLOW_KEYS[word].doc}`;
+  if (PARTICLE_KEYS[word]) return `**${word}** _particle setting_ \u2014 ${PARTICLE_KEYS[word].doc}`;
+  if (SLIDER_CLAUSES[word]) return `**${word}** _slider setting_ \u2014 \`${SLIDER_CLAUSES[word]}\``;
+  return null;
+}
 
 /* ---- workspace analysis ------------------------------------------------ */
 
 /* docs: Map<absolute path, text>. Fold order: tokens*.dssl first, then
- * alphabetical — the same convention the site uses (tokens first). */
+ * alphabetical - the same convention the site uses (tokens first). */
 export function analyzeWorkspace(docs) {
   const paths = [...docs.keys()].sort((a, b) => {
     const ta = /tokens[^/]*\.dssl$/.test(a) ? 0 : 1;
@@ -174,6 +215,7 @@ export function completionsAt(analysis, path, text, offset) {
         items.push({ label: k, kind: 'keyword', detail: 'animate option', documentation: ANIMATE_EXTRAS[k] || 'animate option' });
       }
     }
+    items.push(...domainItems(prop));
     for (const k of CSS_KEYWORDS) {
       items.push({ label: k, kind: 'keyword', detail: 'keyword' });
     }
@@ -241,6 +283,8 @@ export function hoverAt(analysis, path, text, offset) {
   if (BLOCKS[clean]) return { contents: `**${clean}** \u2014 ${BLOCKS[clean]}` };
   if (AT_RULES[clean]) return { contents: `**${clean}** \u2014 ${AT_RULES[clean]}` };
   if (CSS[clean]) return { contents: `**${clean}** \u2014 ${CSS[clean]}` };
+  const dh = domainHover(clean);
+  if (dh) return { contents: dh };
   if (analysis.motions.has(clean)) {
     return { contents: `**${clean}** _motion_ \u2014 keyframe animation. Run with \`animate: ${clean} 600 ease-out\`.` };
   }

dssl-vscode/lib/designer-host.js

@@ -0,0 +1,48 @@
+/* designer-host.js: the editor-side half of the designer, with no vscode import so it can be tested.
+ * extension.js hands it the real vscode API; the tests hand it a fake one. */
+
+const TABS = ['aura', 'texture', 'slider'];
+
+/** the HTML shell for the panel. `uri('media/designer.js')` turns an extension-relative path into a webview URI. */
+export function designerHtml({ cspSource, uri, tab = 'aura' }) {
+  const t = TABS.includes(tab) ? tab : 'aura';
+  // The panel needs: its own module scripts (script-src), data: images for textures, and
+  // inline <style> for the slider preview (style-src 'unsafe-inline'); nothing from the network.
+  const csp = `default-src 'none'; img-src ${cspSource} data:; style-src ${cspSource} 'unsafe-inline'; script-src ${cspSource}; font-src ${cspSource};`;
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="${csp}">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>DSSL designer</title>
+<link rel="stylesheet" href="${uri('media/designer.css')}">
+</head><body data-tab="${t}">
+<div id="app"></div>
+<script type="module" src="${uri('media/designer.js')}"></script>
+</body></html>`;
+}
+
+/**
+ * Handle a message from the panel. `api` is the editor, however it is spelled:
+ *   api.activeDsslEditor()        -> { insert(text), replaceSelection(text), selectionText() } | null
+ *   api.copy(text)                -> Promise
+ *   api.info(message)             show a small notice
+ *   api.post(message)             send a message to the panel
+ */
+export async function handleMessage(msg, api) {
+  if (!msg || typeof msg !== 'object') return;
+  if (msg.type === 'insert') {
+    const ed = api.activeDsslEditor();
+    if (!ed) { api.info('Open a .dssl file first, then press Insert. The text is still in the box: use Copy.'); return; }
+    if (typeof msg.text !== 'string' || !msg.text) return;
+    await ed.insert(msg.text);
+    api.info('Inserted.');
+  } else if (msg.type === 'copy') {
+    if (typeof msg.text === 'string') await api.copy(msg.text);
+  } else if (msg.type === 'requestSelection') {
+    const ed = api.activeDsslEditor();
+    if (!ed) { api.info('Open a .dssl file and select a declaration (for example aura-glow: ...) to load it.'); return; }
+    api.post({ type: 'selection', text: ed.selectionText() });
+  }
+}
+
+export const DESIGNER_TABS = TABS;

dssl-vscode/lib/engine/aura.js

@@ -0,0 +1,833 @@
+/* =========================================================================
+ * DSSL: aura.js
+ *
+ *   .orb { aura-glow: color.accent 28 pulse 1600 }
+ *   .orb { aura-particle: #7cf -> transparent count 40 dir up from bottom }
+ *   .orb { aura: glow #ff7a00 30 flicker 0.3, particles #fc4 -> #f30 count 60 shape flame glowing }
+ *
+ * An aura is light and particles around an element. It has NO presets: fire,
+ * an energy aura, snow and sparks are all just parameters, and you name your
+ * own with a `behavior` block. What you get is the set of knobs.
+ *
+ * Two kinds of layer:
+ *   glow       a soft light around the element (color, radius, pulse, flicker)
+ *   particles  things that leave the element (count, size, life, speed, dir ...)
+ *
+ * Properties (all of them end up in the same two slots, so they stack with the cascade):
+ *   aura:                 glow and/or particles, comma separated. Replaces both slots.
+ *   aura-glow:            the glow slot
+ *   aura-particle(s):     the particles slot
+ *   glow-particle(s):     the particles slot, every particle glowing
+ *   aura-glow-particle(s): both slots at once; settings are shared
+ *
+ * This file has two halves. The top is PURE (parseAura, no DOM) and runs in the
+ * compiler. The bottom is the canvas RUNTIME (AuraManager) that the engine drives.
+ * ========================================================================= */
+
+import { parseColor, toRgba, withAlpha } from './color.js';
+import { parseTexture, makeMask, splitWords, rng } from './texture.js';
+
+/* ------------------------------------------------------------------ *
+ * vocabulary
+ * ------------------------------------------------------------------ */
+
+export const FROM_WORDS = ['edge', 'bottom', 'top', 'left', 'right', 'center', 'corners', 'thumb'];
+export const SHAPES = ['circle', 'spark', 'square', 'ring', 'star', 'flame', 'smoke', 'line'];
+export const DIR_WORDS = { up: -90, down: 90, left: 180, right: 0, out: 'out', in: 'in' };
+export const AURA_BLENDS = ['add', 'normal'];
+
+const num = (min, max, extra = {}) => ({ kind: 'number', words: 1, min, max, ...extra });
+
+export const GLOW_KEYS = {
+  color:     { kind: 'color', words: 1, doc: 'the light colour (default: the element\'s text colour)' },
+  radius:    num(1, 400, { doc: 'how far the glow reaches, in px' }),
+  intensity: num(0, 4, { doc: 'brightness, 1 is normal' }),
+  pulse:     num(0, 60000, { doc: 'milliseconds for one breath in and out; 0 is steady' }),
+  depth:     num(0, 1, { doc: 'how deep the pulse goes, 0 to 1' }),
+  flicker:   num(0, 1, { doc: 'random flicker, like a flame: 0 is steady, 1 is wild' }),
+  seed:      num(0, 99999, { int: true, doc: 'a different random flicker with the same look' }),
+  texture:   { kind: 'texture', words: 1, doc: 'texture(grain scale 2): break the light up with a texture' },
+  essential: { kind: 'flag', words: 0, doc: 'keep animating even when the visitor prefers reduced motion' },
+};
+
+export const PARTICLE_KEYS = {
+  color:      { kind: 'colors', words: 1, doc: 'colours over a particle\'s life: color #ff0 -> #f60 -> transparent' },
+  count:      num(1, 600, { int: true, doc: 'how many particles are alive at once' }),
+  size:       { kind: 'range', words: 2, min: 0.5, max: 300, doc: 'diameter in px: size 4, or size 10 4 (start and end of a random range)' },
+  life:       { kind: 'range', words: 2, min: 50, max: 60000, doc: 'how long one lives, in ms: life 900, or life 600 1200' },
+  speed:      { kind: 'range', words: 2, min: 0, max: 3000, doc: 'px per second: speed 60, or speed 30 90' },
+  dir:        { kind: 'dir', words: 1, doc: 'where they head: up, down, left, right, out, in, or degrees (-90 is up)' },
+  spread:     num(0, 360, { doc: 'how wide the fan of directions is, in degrees' }),
+  gravity:    num(-2000, 2000, { doc: 'px/s squared; negative pulls up (flames), positive down (snow)' }),
+  drag:       num(0, 10, { doc: 'air resistance: how fast particles slow down' }),
+  turbulence: num(0, 1000, { doc: 'random sideways wobble, px/s' }),
+  from:       { kind: 'word', words: 1, values: FROM_WORDS, doc: 'where they are born: edge, bottom, top, left, right, center, corners, thumb (range sliders)' },
+  shape:      { kind: 'word', words: 1, values: SHAPES, doc: 'circle, spark, square, ring, star, flame, smoke or line' },
+  grow:       num(0, 10, { doc: 'size at the end of life as a multiple of the start: 0.2 shrinks, 3 swells' }),
+  blend:      { kind: 'word', words: 1, values: AURA_BLENDS, doc: 'add makes overlapping particles brighter, normal just stacks them' },
+  glowing:    { kind: 'flag', words: 0, doc: 'soft glowing particles that add light' },
+  behind:     { kind: 'flag', words: 0, doc: 'draw only outside the element\'s box, as if the element hid them' },
+  seed:       num(0, 99999, { int: true, doc: 'a different random pattern with the same look' }),
+  texture:    { kind: 'texture', words: 1, doc: 'texture(grain): grainy particles' },
+  essential:  { kind: 'flag', words: 0, doc: 'keep animating even when the visitor prefers reduced motion' },
+};
+
+/* ------------------------------------------------------------------ *
+ * parsing (compile time, no DOM)
+ * ------------------------------------------------------------------ */
+
+function splitCommas(s) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of s) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+const isNumeric = (w) => w !== '' && !Number.isNaN(Number(w));
+/** could this word be a colour? A bare unknown word (speedd) must NOT be swallowed as one, or the typo
+ *  never gets its "did you mean" */
+const looksLikeColor = (w) => /^#[0-9a-f]{3,8}(\/[\d.]+%?)?$/i.test(w) || /^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|var)\(/i.test(w)
+  || /^[a-z][\w-]*(\.[\w-]+)+(\/[\d.]+%?)?$/i.test(w) || /^(transparent|currentcolor)$/i.test(w) || parseColor(w) !== null;
+
+/**
+ * Parse one layer's words.
+ *   kind: 'glow' | 'particles' | 'both'   which keys are legal
+ *   forceGlowing: glow-particle
+ * Returns { glow?, particles? } layers, or null (an error was reported).
+ */
+function parseLayerWords(words, kind, hooks, opts = {}) {
+  const wantGlow = kind === 'glow' || kind === 'both';
+  const wantParticles = kind === 'particles' || kind === 'both';
+  const keys = kind === 'glow' ? GLOW_KEYS : kind === 'particles' ? PARTICLE_KEYS : { ...GLOW_KEYS, ...PARTICLE_KEYS };
+  const g = {}, p = {};
+  const setBoth = (k, v) => { if (k in GLOW_KEYS && wantGlow) g[k] = v; if (k in PARTICLE_KEYS && wantParticles) p[k] = v; };
+  const textureOf = (inner) => parseTexture(inner, hooks);
+
+  let i = 0;
+  const err = (m, h) => { hooks.error(m, h); return null; };
+
+  // positional shorthand: aura-glow: <color> <radius>   aura-particle: <colors> <count>
+  const isKey = (w) => Object.prototype.hasOwnProperty.call(keys, w) || w in DIR_WORDS;
+  if (words.length && !isKey(words[0]) && words[0] !== '->') {
+    const stops = [];
+    while (i < words.length && !isKey(words[i]) && !isNumeric(words[i]) && (words[i] === '->' || looksLikeColor(words[i]))) {
+      if (words[i] === '->') { i++; continue; }
+      const css = hooks.color(words[i]);
+      if (css === null) return null;
+      stops.push(css);
+      i++;
+    }
+    if (stops.length) {
+      if (wantGlow) g.color = stops[0];
+      if (wantParticles) p.colors = stops;
+    }
+    if (i < words.length && isNumeric(words[i])) {
+      const n = Number(words[i]);
+      if (wantGlow && !wantParticles) g.radius = n;
+      else if (wantParticles && !wantGlow) p.count = n;
+      else { g.radius = n; }
+      i++;
+    }
+  }
+
+  while (i < words.length) {
+    const w = words[i];
+    if (w in DIR_WORDS && !(w in keys)) { if (wantParticles) p.dir = DIR_WORDS[w]; i++; continue; }
+    // texture(grain scale 2) is one function-style word that carries its own settings
+    const fnTex = /^texture\((.*)\)$/s.exec(w);
+    if (fnTex && keys.texture) {
+      i++;
+      const t = textureOf(fnTex[1].trim());
+      if (t === null) return null;
+      setBoth('texture', t);
+      continue;
+    }
+    const def = keys[w];
+    if (!def) {
+      const all = [...Object.keys(keys), ...Object.keys(DIR_WORDS)];
+      return err(`unknown aura setting "${w}"`, hooks.suggest(w, all) || `settings: ${Object.keys(keys).join(', ')}`);
+    }
+    i++;
+    if (def.kind === 'flag') {
+      if (w === 'glowing') { if (wantParticles) p.glowing = true; }
+      else setBoth(w, true);
+      continue;
+    }
+    if (def.kind === 'colors') {
+      const stops = [];
+      while (i < words.length && (words[i] === '->' || (!isKey(words[i]) && !isNumeric(words[i]) && looksLikeColor(words[i])))) {
+        if (words[i] === '->') { i++; continue; }
+        const css = hooks.color(words[i]);
+        if (css === null) return null;
+        stops.push(css);
+        i++;
+      }
+      if (!stops.length) return err('color needs at least one colour', def.doc);
+      if (wantGlow && 'color' in GLOW_KEYS) g.color = stops[0];
+      if (wantParticles) p.colors = stops;
+      continue;
+    }
+    if (def.kind === 'color') {
+      const css = hooks.color(words[i]);
+      if (css === null) return null;
+      i++;
+      setBoth(w, css);
+      if (w === 'color' && wantParticles) p.colors = [css];
+      continue;
+    }
+    if (def.kind === 'texture') {
+      const word = words[i];
+      i++;
+      const m = /^texture\((.*)\)$/s.exec(word || '');
+      const inner = m ? m[1] : word;
+      if (!inner) return err('texture needs a name', def.doc);
+      const t = textureOf(inner);
+      if (t === null) return null;
+      setBoth('texture', t);
+      continue;
+    }
+    if (def.kind === 'dir') {
+      const v = words[i]; i++;
+      if (v in DIR_WORDS) p.dir = DIR_WORDS[v];
+      else if (isNumeric(v)) p.dir = Number(v);
+      else return err(`unknown direction "${v}"`, hooks.suggest(v, Object.keys(DIR_WORDS)) || 'up, down, left, right, out, in, or degrees');
+      continue;
+    }
+    if (def.kind === 'word') {
+      const v = words[i]; i++;
+      if (!def.values.includes(v)) return err(`unknown ${w} "${v}"`, hooks.suggest(v, def.values) || `use one of: ${def.values.join(', ')}`);
+      if (wantParticles) p[w] = v;
+      continue;
+    }
+    if (def.kind === 'range') {
+      const vals = [];
+      while (i < words.length && vals.length < 2 && isNumeric(words[i])) { vals.push(Number(words[i])); i++; }
+      if (!vals.length) return err(`${w} needs a number`, def.doc);
+      if (vals.some((n) => n < def.min || n > def.max)) return err(`${w} must be between ${def.min} and ${def.max}`, def.doc);
+      if (wantParticles) p[w] = vals.length === 1 ? [vals[0], vals[0]] : [Math.min(...vals), Math.max(...vals)];
+      continue;
+    }
+    // plain number
+    const raw = words[i]; i++;
+    if (!isNumeric(raw)) return err(`${w} needs a number, got "${raw ?? ''}"`, def.doc);
+    const n = Number(raw);
+    if (n < def.min || n > def.max) return err(`${w} must be between ${def.min} and ${def.max}`, def.doc);
+    setBoth(w === 'turbulence' ? 'turbulence' : w, def.int ? Math.round(n) : n);
+  }
+
+  if (opts.forceGlowing && wantParticles) p.glowing = true;
+  const out = {};
+  if (wantGlow && (kind === 'glow' || Object.keys(g).length || opts.requireGlow)) out.glow = { kind: 'glow', ...g };
+  if (wantParticles && (kind === 'particles' || Object.keys(p).length || opts.requireParticles)) out.particles = { kind: 'particles', ...p };
+  return out;
+}
+
+/**
+ * Parse the value of one of the aura properties. `prop` decides the shape:
+ *   'aura'                 layers need a leading glow / particles word
+ *   'aura-glow'            one glow layer
+ *   'aura-particle'        one particles layer
+ *   'glow-particle'        one particles layer, glowing
+ *   'aura-glow-particle'   a glow layer AND a glowing particles layer, settings shared
+ * Returns { glow: [layers]|null, particles: [layers]|null } where null means "clear this slot",
+ * or null when invalid.
+ */
+export function parseAura(prop, value, hooks) {
+  const text = String(value || '').trim();
+  if (!text) { hooks.error(`${prop} needs a value`, 'e.g. aura-glow: color.accent 24'); return null; }
+  const base = prop.replace(/s$/, ''); // aura-particles -> aura-particle
+  if (text === 'none') {
+    // `none` clears exactly the slots this property owns, so aura-glow: none leaves particles alone
+    const clears = { 'aura': { glow: null, particles: null }, 'aura-glow': { glow: null }, 'aura-particle': { particles: null }, 'glow-particle': { particles: null }, 'aura-glow-particle': { glow: null, particles: null } };
+    return clears[base] || { glow: null, particles: null };
+  }
+
+  if (prop === 'aura') {
+    const glow = [], particles = [];
+    for (const part of splitCommas(text)) {
+      const words = splitWords(part);
+      const head = words[0];
+      let kind;
+      if (head === 'glow') kind = 'glow';
+      else if (head === 'particles' || head === 'particle') kind = 'particles';
+      else {
+        hooks.error(`an aura layer starts with glow or particles, not "${head}"`, hooks.suggest(head, ['glow', 'particles']) || 'e.g. aura: glow color.accent 24, particles #fc4 count 40');
+        return null;
+      }
+      const r = parseLayerWords(words.slice(1), kind, hooks);
+      if (!r) return null;
+      if (r.glow) glow.push(r.glow);
+      if (r.particles) particles.push(r.particles);
+    }
+    return { glow, particles };
+  }
+
+  const out = { glow: undefined, particles: undefined };
+  const layersOf = (kind, opts) => {
+    const arr = [];
+    for (const part of splitCommas(text)) {
+      const r = parseLayerWords(splitWords(part), kind, hooks, opts);
+      if (!r) return null;
+      if (r.glow) arr.push(r.glow);
+      if (r.particles) arr.push(r.particles);
+    }
+    return arr;
+  };
+
+  if (base === 'aura-glow') { const a = layersOf('glow'); if (!a) return null; out.glow = a; }
+  else if (base === 'aura-particle') { const a = layersOf('particles'); if (!a) return null; out.particles = a; }
+  else if (base === 'glow-particle') { const a = layersOf('particles', { forceGlowing: true }); if (!a) return null; out.particles = a; }
+  else if (base === 'aura-glow-particle') {
+    const glow = [], particles = [];
+    for (const part of splitCommas(text)) {
+      const r = parseLayerWords(splitWords(part), 'both', hooks, { forceGlowing: true, requireGlow: true, requireParticles: true });
+      if (!r) return null;
+      if (r.glow) glow.push(r.glow);
+      if (r.particles) particles.push(r.particles);
+    }
+    out.glow = glow; out.particles = particles;
+  } else { hooks.error(`unknown aura property "${prop}"`, null); return null; }
+  return out;
+}
+
+/* ------------------------------------------------------------------ *
+ * turning a parsed layer into numbers the runtime can use
+ * ------------------------------------------------------------------ */
+
+export const GLOW_DEFAULTS = { radius: 24, intensity: 1, pulse: 0, depth: 0.35, flicker: 0, seed: 1 };
+export const PARTICLE_DEFAULTS = {
+  count: 40, size: [4, 4], life: [900, 900], speed: [40, 40], dir: -90, spread: 30,
+  gravity: 0, drag: 0, turbulence: 0, from: 'edge', shape: 'circle', grow: 0.3, blend: null, glowing: false, seed: 1,
+};
+
+/**
+ * Resolve a parsed layer for drawing. `rc(cssColor)` returns {r,g,b,a} or null,
+ * `fallback` is the colour used when the layer names none (the element's text colour).
+ */
+export function resolveLayer(layer, rc, fallback) {
+  const pick = (css) => (css === undefined || /^currentcolor$/i.test(css) ? fallback : (rc(css) || fallback));
+  if (layer.kind === 'glow') {
+    return { ...GLOW_DEFAULTS, ...layer, rgba: pick(layer.color), tex: layer.texture && layer.texture.length ? layer.texture : null };
+  }
+  const stops = (layer.colors && layer.colors.length ? layer.colors : [undefined]).map(pick);
+  if (stops.length === 1) stops.push(withAlpha(stops[0], 0)); // a single colour fades out
+  const glowing = !!layer.glowing;
+  return {
+    ...PARTICLE_DEFAULTS, ...layer, stops, glowing, behind: !!layer.behind,
+    blend: layer.blend || (glowing ? 'add' : 'normal'),
+    tex: layer.texture && layer.texture.length ? layer.texture : null,
+  };
+}
+
+/* ====================================================================== *
+ * RUNTIME. Everything below needs a browser.
+ * ====================================================================== */
+
+const TAU = Math.PI * 2;
+const lerp = (a, b, t) => a + (b - a) * t;
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+
+function roundRectPath(ctx, x, y, w, h, r) {
+  r = Math.max(0, Math.min(r, w / 2, h / 2));
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+function colorAt(stops, t) {
+  const n = stops.length - 1;
+  if (n <= 0) return stops[0];
+  const f = clamp01(t) * n;
+  const i = Math.min(n - 1, Math.floor(f));
+  const k = f - i;
+  const a = stops[i], b = stops[i + 1];
+  return { r: lerp(a.r, b.r, k), g: lerp(a.g, b.g, k), b: lerp(a.b, b.b, k), a: lerp(a.a, b.a, k) };
+}
+
+/** A tiny signature, used to tell "same settings" from "changed" without deep compares */
+const sigOf = (x) => JSON.stringify(x);
+
+export class AuraManager {
+  /**
+   * opts.reducedMotion: a MediaQueryList (or anything with .matches)
+   * opts.budget: the most particles alive across the whole page
+   */
+  constructor(opts = {}) {
+    this.reducedMotion = opts.reducedMotion || null;
+    this.budget = opts.budget || 1800;
+    this.emitters = new Map();     // element -> emitter
+    this.canvas = null;
+    this.ctx = null;
+    this.dpr = 1;
+    this.vw = 0; this.vh = 0;
+    this.running = false;
+    this.paused = false;
+    this.last = 0;
+    this.sprites = new Map();
+    this.masks = new Map();
+    this.io = null;
+    this.stats = { particles: 0, emitters: 0, frameMs: 0, fps: 0, frames: 0 };
+    this._fpsT = 0; this._fpsN = 0;
+    this._onResize = () => this.resize();
+    // reduced motion draws a still picture, so it only needs a new frame when something could have moved
+    this._onScroll = () => { if (this.reduced && !this.running && !this.paused && this.emitters.size) this.start(); };
+    this._poll = null;
+    this._frame = (t) => this.frame(t);
+  }
+
+  get reduced() { return !!(this.reducedMotion && this.reducedMotion.matches); }
+
+  /* ---- setup ---- */
+
+  ensureCanvas() {
+    if (this.canvas) return;
+    const c = document.createElement('canvas');
+    c.setAttribute('aria-hidden', 'true');
+    c.setAttribute('data-dssl-aura', '');
+    c.style.cssText = 'position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483000;';
+    (document.body || document.documentElement).appendChild(c);
+    this.canvas = c;
+    this.ctx = c.getContext('2d');
+    this.resize();
+    window.addEventListener('resize', this._onResize, { passive: true });
+    window.addEventListener('scroll', this._onScroll, { passive: true, capture: true });
+    if (typeof IntersectionObserver !== 'undefined') {
+      this.io = new IntersectionObserver((entries) => {
+        for (const e of entries) {
+          const em = this.emitters.get(e.target);
+          if (em) { em.visible = e.isIntersecting; if (e.isIntersecting) this.start(); }
+        }
+      }, { rootMargin: '200px' });
+    }
+  }
+
+  resize() {
+    if (!this.canvas) return;
+    this.dpr = Math.min(2, window.devicePixelRatio || 1);
+    this.vw = window.innerWidth; this.vh = window.innerHeight;
+    this.canvas.width = Math.max(1, Math.round(this.vw * this.dpr));
+    this.canvas.height = Math.max(1, Math.round(this.vh * this.dpr));
+    this.dirty = true;
+  }
+
+  /* ---- the engine's interface ---- */
+
+  /** Set (or change) the aura of an element. glow/particles are arrays of resolved layers. */
+  set(el, glow, particles) {
+    const hasGlow = glow && glow.length, hasParts = particles && particles.length;
+    if (!hasGlow && !hasParts) { this.remove(el); return; }
+    this.ensureCanvas();
+    let em = this.emitters.get(el);
+    if (!em) {
+      em = { el, visible: true, rect: null, radius: 0, glow: [], layers: [], dying: false, fade: 1, sig: '', age: 0, radiusAt: -1 };
+      this.emitters.set(el, em);
+      if (this.io) this.io.observe(el);
+    }
+    em.dying = false;
+    const sig = sigOf([glow, particles]);
+    if (sig === em.sig) { this.start(); return; }
+    em.sig = sig;
+    em.glow = (glow || []).map((g, i) => ({ cfg: g, rnd: rng((g.seed || 1) * 7919 + i), flick: 0, flickTarget: 0, t0: performance.now() }));
+    // keep running particles when the layer list keeps its shape; otherwise start fresh
+    const old = em.layers;
+    em.layers = (particles || []).map((cfg, i) => {
+      const prev = old[i];
+      const keep = prev && prev.parts;
+      return { cfg, rnd: keep ? prev.rnd : rng((cfg.seed || 1) * 104729 + i), parts: keep ? prev.parts : [], acc: keep ? prev.acc : 0 };
+    });
+    this.start();
+  }
+
+  remove(el) {
+    const em = this.emitters.get(el);
+    if (!em) return;
+    em.dying = true; // stop emitting, let what is alive finish, fade the glow
+    this.start();
+  }
+
+  pause() { this.paused = true; this.running = false; if (this._poll) { clearTimeout(this._poll); this._poll = null; } if (this.ctx) this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); }
+  resume() { this.paused = false; this.start(); }
+
+  destroy() {
+    this.running = false;
+    window.removeEventListener('resize', this._onResize);
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
+    if (this._poll) { clearTimeout(this._poll); this._poll = null; }
+    if (this.io) this.io.disconnect();
+    if (this.canvas) this.canvas.remove();
+    this.canvas = null; this.ctx = null; this.emitters.clear();
+  }
+
+  /* ---- loop ---- */
+
+  start() {
+    if (this.running || this.paused || !this.canvas) return;
+    this.running = true;
+    this.last = 0;
+    requestAnimationFrame(this._frame);
+  }
+
+  frame(now) {
+    if (!this.running) return;
+    const t0 = performance.now();
+    const dt = this.last ? Math.min(0.05, (now - this.last) / 1000) : 0.016;
+    this.last = now;
+    const reduced = this.reduced;
+    const ctx = this.ctx, dpr = this.dpr;
+
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    // global budget: if everyone asks for more than the page can afford, everyone gets a share
+    let want = 0;
+    for (const em of this.emitters.values()) if (em.visible && !em.dying) for (const l of em.layers) want += l.cfg.count;
+    const share = want > this.budget ? this.budget / want : 1;
+
+    let alive = 0, anyActive = false;
+    for (const [el, em] of this.emitters) {
+      if (!el.isConnected) { this.emitters.delete(el); if (this.io) this.io.unobserve(el); continue; }
+      // read geometry once per frame for visible emitters
+      let rect = null;
+      if (em.visible || em.layers.some((l) => l.parts.length)) {
+        rect = el.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) rect = null;
+      }
+      em.rect = rect;
+      if (em.radiusAt < 0 || (em.age++ % 45) === 0) { em.radius = this.cornerRadius(el, rect); em.radiusAt = 0; }
+
+      if (em.dying) em.fade = Math.max(0, em.fade - dt * 3);
+      else em.fade = Math.min(1, em.fade + dt * 4);
+
+      // glow
+      if (rect && em.fade > 0 && (em.visible || em.dying)) {
+        for (const g of em.glow) { this.drawGlow(ctx, rect, em, g, now, reduced); }
+        if (em.glow.length) anyActive = true;
+      }
+
+      // particles
+      for (const L of em.layers) {
+        const cfg = L.cfg;
+        const moving = !reduced || cfg.essential;
+        if (rect && em.visible && !em.dying && moving) this.emit(L, rect, em, dt, share, el);
+        if (L.parts.length) this.stepAndDraw(ctx, L, dt, moving, cfg.behind && rect ? { rect, radius: em.radius } : null);
+        alive += L.parts.length;
+        if (L.parts.length || (rect && em.visible && !em.dying && moving)) anyActive = true;
+      }
+      if (em.dying && em.fade <= 0 && em.layers.every((l) => !l.parts.length)) {
+        this.emitters.delete(el);
+        if (this.io) this.io.unobserve(el);
+      }
+    }
+
+    this.stats.particles = alive;
+    this.stats.emitters = this.emitters.size;
+    this.stats.frameMs = performance.now() - t0;
+    this.stats.frames++;
+    this._fpsN++;
+    if (now - this._fpsT > 500) { this.stats.fps = Math.round((this._fpsN * 1000) / Math.max(1, now - this._fpsT)); this._fpsT = now; this._fpsN = 0; }
+
+    if (this.emitters.size === 0) { this.running = false; ctx.clearRect(0, 0, this.vw, this.vh); return; }
+    // Normally the loop runs every frame (the glow follows the element, particles move). With reduced
+    // motion nothing moves, so one frame is a complete picture; it is redrawn on scroll, resize, a
+    // style change, and a slow poll for layout shifts. Essential layers and fading-out emitters still loop.
+    let needLoop = !reduced;
+    if (reduced) {
+      for (const em of this.emitters.values()) {
+        if (em.dying) needLoop = true;
+        if (em.glow.some((g) => g.cfg.essential) || em.layers.some((l) => l.cfg.essential && (l.parts.length || (em.visible && !em.dying)))) needLoop = true;
+      }
+    }
+    if (needLoop) { requestAnimationFrame(this._frame); return; }
+    this.running = false;
+    if (!this._poll) this._poll = setTimeout(() => { this._poll = null; this.start(); }, 600);
+  }
+
+  cornerRadius(el, rect) {
+    try {
+      const v = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+      const r = rect ? Math.min(rect.width, rect.height) / 2 : 0;
+      return Math.min(v, r);
+    } catch { return 0; }
+  }
+
+  /* ---- glow ---- */
+
+  drawGlow(ctx, rect, em, g, now, reduced) {
+    const cfg = g.cfg;
+    const moving = !reduced || cfg.essential;
+    let a = cfg.intensity * em.fade;
+    if (moving && cfg.pulse > 0) {
+      const ph = ((now - g.t0) / cfg.pulse) * TAU;
+      a *= 1 - cfg.depth * 0.5 * (1 + Math.sin(ph)) ;
+    }
+    if (moving && cfg.flicker > 0) {
+      // smooth random flicker: ease toward a new random target a few times a second
+      if (Math.random() < 0.18) g.flickTarget = g.rnd();
+      g.flick += (g.flickTarget - g.flick) * 0.35;
+      a *= 1 - cfg.flicker * g.flick * 0.9;
+    }
+    if (a <= 0.004) return;
+    const c = cfg.rgba;
+    const R = cfg.radius;
+    const dpr = this.dpr;
+    const x = rect.left, y = rect.top, w = rect.width, h = rect.height;
+    const pad = Math.ceil(R * 1.6);
+    const lw = Math.ceil(w + pad * 2), lh = Math.ceil(h + pad * 2);
+    if (lw * lh * dpr * dpr > 6e6) return; // a glow bitmap bigger than this would cost more than it is worth
+
+    // The blur is the expensive part, and pulsing and flickering only change how BRIGHT the shape is, not
+    // what it looks like. So the shape is painted once into this glow's own bitmap, and each frame just
+    // draws that bitmap at the current alpha. It repaints only when the shape really changes.
+    const key = `${lw}x${lh}|${dpr}|${c.r | 0},${c.g | 0},${c.b | 0},${c.a.toFixed(2)}|${R}|${em.radius}|${cfg.tex ? sigOf(cfg.tex[0]) : ''}`;
+    if (!g.bitmap || g.bitmapKey !== key) {
+      if (!g.bitmap) g.bitmap = document.createElement('canvas');
+      const off = g.bitmap;
+      off.width = Math.ceil(lw * dpr); off.height = Math.ceil(lh * dpr);
+      const o = off.getContext('2d');
+      o.save();
+      // clip so the light never paints over the element itself
+      o.beginPath();
+      o.rect(0, 0, off.width, off.height);
+      o.scale(dpr, dpr);
+      roundRectPath(o, pad, pad, w, h, em.radius);
+      o.setTransform(1, 0, 0, 1, 0, 0);
+      o.clip('evenodd');
+      const SH = 10000; // draw the shape far off-canvas and let only its blurred shadow land here
+      o.shadowOffsetX = SH * dpr;
+      o.fillStyle = '#000';
+      for (const [k, mul] of [[1, 0.8], [0.55, 0.45], [0.25, 0.4]]) {
+        o.shadowBlur = R * k * dpr;
+        o.shadowColor = `rgba(${c.r | 0},${c.g | 0},${c.b | 0},${clamp01(c.a * mul)})`;
+        o.beginPath();
+        o.scale(dpr, dpr);
+        roundRectPath(o, pad - SH, pad, w, h, em.radius);
+        o.setTransform(1, 0, 0, 1, 0, 0);
+        o.fill();
+      }
+      o.restore();
+      if (cfg.tex) {
+        const mask = this.maskCanvas(cfg.tex[0], 128);
+        o.save();
+        o.globalCompositeOperation = 'destination-in';
+        const pat = o.createPattern(mask, 'repeat');
+        if (pat) { o.fillStyle = pat; o.fillRect(0, 0, off.width, off.height); }
+        o.restore();
+      }
+      g.bitmapKey = key;
+    }
+    ctx.save();
+    ctx.globalCompositeOperation = 'lighter';
+    // intensity above 1 brightens by drawing the same light more than once
+    const passes = Math.max(1, Math.ceil(a));
+    ctx.globalAlpha = clamp01(a / passes);
+    for (let i = 0; i < passes; i++) ctx.drawImage(g.bitmap, 0, 0, g.bitmap.width, g.bitmap.height, x - pad, y - pad, lw, lh);
+    ctx.restore();
+  }
+
+  /* ---- masks and sprites ---- */
+
+  maskCanvas(texLayer, size) {
+    const key = sigOf([texLayer, size]);
+    let c = this.masks.get(key);
+    if (c) return c;
+    const data = makeMask(texLayer, size);
+    c = document.createElement('canvas');
+    c.width = c.height = size;
+    const x = c.getContext('2d');
+    const img = x.createImageData(size, size);
+    for (let i = 0; i < data.length; i++) { img.data[i * 4 + 3] = data[i]; img.data[i * 4] = img.data[i * 4 + 1] = img.data[i * 4 + 2] = 255; }
+    x.putImageData(img, 0, 0);
+    this.masks.set(key, c);
+    return c;
+  }
+
+  /** a soft round sprite in one colour, optionally textured; cached by quantised colour */
+  sprite(c, shape, tex, variant) {
+    const q = (v) => (Math.round(v / 16) * 16) | 0;
+    const key = `${q(c.r)},${q(c.g)},${q(c.b)}|${shape}|${tex ? sigOf(tex[0]) : ''}|${variant}`;
+    let s = this.sprites.get(key);
+    if (s) return s;
+    if (this.sprites.size > 600) this.sprites.clear();
+    const S = 64;
+    s = document.createElement('canvas');
+    s.width = s.height = S;
+    const x = s.getContext('2d');
+    const rgb = `${q(c.r)},${q(c.g)},${q(c.b)}`;
+    if (shape === 'ring') {
+      x.strokeStyle = `rgb(${rgb})`; x.lineWidth = 5; x.beginPath(); x.arc(S / 2, S / 2, S / 2 - 6, 0, TAU); x.stroke();
+    } else if (shape === 'star') {
+      x.fillStyle = `rgb(${rgb})`; x.beginPath();
+      for (let i = 0; i < 8; i++) { const r = i % 2 ? S * 0.1 : S * 0.48, a = (i / 8) * TAU - Math.PI / 2; x.lineTo(S / 2 + Math.cos(a) * r, S / 2 + Math.sin(a) * r); }
+      x.closePath(); x.fill();
+    } else if (shape === 'square') {
+      x.fillStyle = `rgb(${rgb})`; x.fillRect(S * 0.15, S * 0.15, S * 0.7, S * 0.7);
+    } else {
+      const g = x.createRadialGradient(S / 2, S / 2, 0, S / 2, S / 2, S / 2);
+      const hard = shape === 'circle' ? 0.55 : 0.0;
+      g.addColorStop(0, `rgba(${rgb},1)`);
+      g.addColorStop(hard, `rgba(${rgb},${shape === 'circle' ? 0.95 : 0.7})`);
+      g.addColorStop(1, `rgba(${rgb},0)`);
+      x.fillStyle = g; x.fillRect(0, 0, S, S);
+    }
+    if (tex) {
+      // multiply the sprite's alpha by a texture mask, a different offset per variant
+      const m = this.maskCanvas(tex[0], 64);
+      const id = x.getImageData(0, 0, S, S);
+      const mx = m.getContext('2d').getImageData(0, 0, S, S).data;
+      const off = (variant * 13) % S;
+      for (let yy = 0; yy < S; yy++) for (let xx = 0; xx < S; xx++) {
+        const mi = (((yy + off) % S) * S + ((xx + off * 2) % S)) * 4 + 3;
+        const i = (yy * S + xx) * 4 + 3;
+        id.data[i] = (id.data[i] * mx[mi]) / 255;
+      }
+      x.putImageData(id, 0, 0);
+    }
+    this.sprites.set(key, s);
+    return s;
+  }
+
+  /* ---- particles ---- */
+
+  emit(L, rect, em, dt, share, el) {
+    const c = L.cfg;
+    const meanLife = ((c.life[0] + c.life[1]) / 2) / 1000;
+    const rate = (c.count * share) / meanLife; // per second
+    L.acc += rate * dt;
+    const cap = Math.max(1, Math.round(c.count * share));
+    while (L.acc >= 1) {
+      L.acc -= 1;
+      if (L.parts.length >= cap) { L.acc = Math.min(L.acc, 1); break; }
+      L.parts.push(this.spawn(L, rect, el));
+    }
+  }
+
+  spawn(L, rect, el) {
+    const c = L.cfg, r = L.rnd;
+    const between = (a, b) => a + (b - a) * r();
+    let x, y;
+    switch (c.from) {
+      case 'bottom': x = rect.left + r() * rect.width; y = rect.bottom; break;
+      case 'top': x = rect.left + r() * rect.width; y = rect.top; break;
+      case 'left': x = rect.left; y = rect.top + r() * rect.height; break;
+      case 'right': x = rect.right; y = rect.top + r() * rect.height; break;
+      case 'center': x = rect.left + r() * rect.width; y = rect.top + r() * rect.height; break;
+      case 'corners': { const k = (r() * 4) | 0; x = k & 1 ? rect.right : rect.left; y = k & 2 ? rect.bottom : rect.top; break; }
+      case 'thumb': {
+        // the thumb of a range input: where the value is
+        let p = 0.5;
+        try { const mn = Number(el.min || 0), mx = Number(el.max || 100); p = (Number(el.value) - mn) / (mx - mn || 1); } catch { /* not a range */ }
+        const pad = 10;
+        x = rect.left + pad + p * Math.max(0, rect.width - pad * 2); y = rect.top + rect.height / 2 + (r() - 0.5) * 6; break;
+      }
+      default: { // edge: a random point on the perimeter
+        const per = 2 * (rect.width + rect.height);
+        let d = r() * per;
+        if (d < rect.width) { x = rect.left + d; y = rect.top; }
+        else if ((d -= rect.width) < rect.height) { x = rect.right; y = rect.top + d; }
+        else if ((d -= rect.height) < rect.width) { x = rect.right - d; y = rect.bottom; }
+        else { d -= rect.width; x = rect.left; y = rect.bottom - d; }
+      }
+    }
+    let ang;
+    if (c.dir === 'out' || c.dir === 'in') {
+      const cx = rect.left + rect.width / 2, cy = rect.top + rect.height / 2;
+      ang = Math.atan2(y - cy, x - cx);
+      if (c.dir === 'in') ang += Math.PI;
+    } else ang = (c.dir * Math.PI) / 180;
+    ang += ((r() - 0.5) * c.spread * Math.PI) / 180;
+    const sp = between(c.speed[0], c.speed[1]);
+    return {
+      x, y, vx: Math.cos(ang) * sp, vy: Math.sin(ang) * sp,
+      age: 0, life: between(c.life[0], c.life[1]) / 1000,
+      size: between(c.size[0], c.size[1]), rot: r() * TAU, spin: (r() - 0.5) * 4, variant: (r() * 4) | 0, ph: r() * TAU,
+    };
+  }
+
+  stepAndDraw(ctx, L, dt, moving, hide) {
+    const c = L.cfg, parts = L.parts;
+    const additive = c.blend === 'add';
+    ctx.save();
+    if (hide) {
+      // clip the element's own box OUT, so the layer reads as sitting behind it
+      ctx.beginPath();
+      ctx.rect(-50, -50, this.vw + 100, this.vh + 100);
+      roundRectPath(ctx, hide.rect.left, hide.rect.top, hide.rect.width, hide.rect.height, hide.radius);
+      ctx.clip('evenodd');
+    }
+    ctx.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    const drag = Math.exp(-c.drag * dt);
+    for (let i = parts.length - 1; i >= 0; i--) {
+      const p = parts[i];
+      if (moving) {
+        p.age += dt;
+        if (p.age >= p.life) { parts[i] = parts[parts.length - 1]; parts.pop(); continue; }
+        p.vy += c.gravity * dt;
+        if (c.turbulence) { p.vx += Math.sin(p.ph + p.age * 7) * c.turbulence * dt; p.vy += Math.cos(p.ph * 1.3 + p.age * 5) * c.turbulence * 0.3 * dt; }
+        if (c.drag) { p.vx *= drag; p.vy *= drag; }
+        p.x += p.vx * dt; p.y += p.vy * dt;
+        p.rot += p.spin * dt;
+      }
+      const t = p.age / p.life;
+      const col = colorAt(c.stops, t);
+      const alpha = clamp01(col.a);
+      if (alpha <= 0.003) continue;
+      const size = p.size * lerp(1, c.grow, t);
+      this.drawParticle(ctx, c, p, col, alpha, size);
+    }
+    ctx.restore();
+  }
+
+  drawParticle(ctx, c, p, col, alpha, size) {
+    const shape = c.shape;
+    if (shape === 'spark' || shape === 'line') {
+      const len = Math.max(size, Math.hypot(p.vx, p.vy) * 0.06);
+      const sp = Math.hypot(p.vx, p.vy) || 1;
+      ctx.strokeStyle = `rgba(${col.r | 0},${col.g | 0},${col.b | 0},${alpha})`;
+      ctx.lineWidth = Math.max(1, size * 0.3);
+      ctx.lineCap = 'round';
+      ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - (p.vx / sp) * len, p.y - (p.vy / sp) * len); ctx.stroke();
+      if (c.glowing) {
+        const s = this.sprite(col, 'glow', c.tex, p.variant), d = size * 3;
+        ctx.globalAlpha = alpha * 0.5; ctx.drawImage(s, p.x - d / 2, p.y - d / 2, d, d); ctx.globalAlpha = 1;
+      }
+      return;
+    }
+    const kind = shape === 'circle' && c.glowing ? 'glow' : shape === 'flame' ? 'glow' : shape === 'smoke' ? 'glow' : shape;
+    const s = this.sprite(col, kind, c.tex, p.variant);
+    ctx.globalAlpha = alpha;
+    if (shape === 'flame') {
+      // a teardrop: stretched along its travel, narrower at the tip
+      const sp = Math.hypot(p.vx, p.vy) || 1;
+      const ang = Math.atan2(p.vy, p.vx) + Math.PI / 2;
+      ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(ang);
+      const w = size * 2.2, h = size * 3.4;
+      ctx.drawImage(s, -w / 2, -h * 0.65, w, h);
+      ctx.restore();
+    } else if (shape === 'ring' || shape === 'star' || shape === 'square') {
+      ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rot);
+      const d = size * (shape === 'ring' ? 1.2 : 1.4);
+      ctx.drawImage(s, -d / 2, -d / 2, d, d);
+      ctx.restore();
+    } else {
+      const d = size * (c.glowing || shape === 'smoke' ? 2.6 : 1.2);
+      ctx.drawImage(s, p.x - d / 2, p.y - d / 2, d, d);
+    }
+    ctx.globalAlpha = 1;
+  }
+
+  /** for tests and tools: a readable snapshot, never needed in normal use */
+  debug() {
+    const out = [];
+    for (const [el, em] of this.emitters) out.push({ el, visible: em.visible, dying: em.dying, glow: em.glow.length, layers: em.layers.map((l) => ({ alive: l.parts.length, sample: l.parts.slice(0, 5).map((p) => ({ x: p.x, y: p.y, vx: p.vx, vy: p.vy, age: p.age })) })) });
+    return { stats: { ...this.stats }, running: this.running, paused: this.paused, canvas: !!this.canvas, emitters: out };
+  }
+}

dssl-vscode/lib/engine/color.js

@@ -0,0 +1,314 @@
+/* =========================================================================
+ * DSSL: color.js
+ *
+ * One small colour library for everything that has to know what a colour
+ * actually IS: the contrast lint, aura particles painted on a canvas, texture
+ * tints baked into SVG. No dependencies, no DOM.
+ *
+ * Colours are { r, g, b, a } with r/g/b in 0..255 and a in 0..1.
+ *
+ * parseColor handles what the browser hands back as well as what people
+ * write: #rgb #rgba #rrggbb #rrggbbaa, rgb()/rgba(), hsl()/hsla(), oklab(),
+ * oklch(), color(srgb ...), color-mix(in <space> A p%, B), the CSS names, and
+ * transparent. Anything it cannot read returns null, and callers decide
+ * whether that is an error (a texture colour) or silence (a lint check).
+ * ========================================================================= */
+
+const NAMED = {
+  aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000',
+  blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00',
+  chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b',
+  darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493',
+  deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22',
+  fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000',
+  greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c',
+  lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080',
+  lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5',
+  navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500',
+  orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000',
+  rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee',
+  sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa',
+  springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee',
+  wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32',
+};
+
+export const TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
+
+const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));
+const round = (x) => Math.round(x);
+
+/* ---------- colour-space maths ---------- */
+
+const srgbToLinear = (c) => { c /= 255; return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); };
+const linearToSrgb = (c) => { const v = c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055; return clamp(v, 0, 1) * 255; };
+
+function oklabToSrgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+  const l = l_ ** 3, m = m_ ** 3, s = s_ ** 3;
+  return [
+    linearToSrgb(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s),
+  ];
+}
+
+function srgbToOklab(r, g, b) {
+  const lr = srgbToLinear(r), lg = srgbToLinear(g), lb = srgbToLinear(b);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  return [
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+  ];
+}
+
+function hslToRgb(h, s, l) {
+  h = ((h % 360) + 360) % 360; s = clamp(s, 0, 1); l = clamp(l, 0, 1);
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [f(0) * 255, f(8) * 255, f(4) * 255];
+}
+
+/* ---------- parsing ---------- */
+
+/** a number or a percentage; `scale` is what 100% means (255 for rgb, 1 for alpha...) */
+function num(tok, scale = 1) {
+  if (tok === undefined || tok === null) return null;
+  const t = String(tok).trim();
+  if (t === 'none') return 0;
+  if (t.endsWith('%')) { const n = parseFloat(t); return Number.isNaN(n) ? null : (n / 100) * scale; }
+  const n = parseFloat(t);
+  return Number.isNaN(n) ? null : n;
+}
+
+function angle(tok) {
+  const t = String(tok).trim();
+  if (t === 'none') return 0;
+  const n = parseFloat(t);
+  if (Number.isNaN(n)) return null;
+  if (t.endsWith('turn')) return n * 360;
+  if (t.endsWith('rad')) return (n * 180) / Math.PI;
+  if (t.endsWith('grad')) return n * 0.9;
+  return n;
+}
+
+/** split "a b c / d" or "a, b, c, d" function arguments at the top level */
+function splitArgs(body) {
+  const out = [];
+  let depth = 0, cur = '';
+  for (const ch of body) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (depth === 0 && (ch === ',' || ch === '/' || /\s/.test(ch))) {
+      if (cur) out.push(cur);
+      cur = '';
+      if (ch === '/') out.push('/');
+      continue;
+    }
+    cur += ch;
+  }
+  if (cur) out.push(cur);
+  return out;
+}
+
+/** parse any one CSS colour. Returns {r,g,b,a} or null. */
+export function parseColor(input) {
+  if (input === null || input === undefined) return null;
+  let s = String(input).trim().toLowerCase();
+  if (!s) return null;
+  if (s === 'transparent') return { ...TRANSPARENT };
+  if (NAMED[s]) s = NAMED[s];
+
+  if (s[0] === '#') {
+    const h = s.slice(1);
+    if (!/^[0-9a-f]+$/.test(h)) return null;
+    if (h.length === 3 || h.length === 4) {
+      const [r, g, b, a] = [...h].map((c) => parseInt(c + c, 16));
+      return { r, g, b, a: h.length === 4 ? a / 255 : 1 };
+    }
+    if (h.length === 6 || h.length === 8) {
+      return {
+        r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16),
+        a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+      };
+    }
+    return null;
+  }
+
+  const fn = /^([a-z-]+)\((.*)\)$/s.exec(s);
+  if (!fn) return null;
+  const name = fn[1];
+  const body = fn[2];
+
+  if (name === 'color-mix') return parseColorMix(body);
+
+  const parts = splitArgs(body);
+  const slash = parts.indexOf('/');
+  const main = slash === -1 ? parts : parts.slice(0, slash);
+  let alpha = 1;
+  if (slash !== -1) { alpha = num(parts[slash + 1], 1); if (alpha === null) return null; }
+  else if ((name === 'rgba' || name === 'hsla') && main.length === 4) alpha = num(main.pop(), 1);
+  else if ((name === 'rgb' || name === 'hsl') && main.length === 4) alpha = num(main.pop(), 1);
+  alpha = clamp(alpha, 0, 1);
+
+  if (name === 'rgb' || name === 'rgba') {
+    if (main.length !== 3) return null;
+    const [r, g, b] = main.map((t) => num(t, 255));
+    if ([r, g, b].some((v) => v === null)) return null;
+    return { r: clamp(round(r), 0, 255), g: clamp(round(g), 0, 255), b: clamp(round(b), 0, 255), a: alpha };
+  }
+  if (name === 'hsl' || name === 'hsla') {
+    if (main.length !== 3) return null;
+    const h = angle(main[0]), sat = num(main[1], 1), l = num(main[2], 1);
+    if ([h, sat, l].some((v) => v === null)) return null;
+    const [r, g, b] = hslToRgb(h, sat, l);
+    return { r: round(r), g: round(g), b: round(b), a: alpha };
+  }
+  if (name === 'oklab') {
+    if (main.length !== 3) return null;
+    const L = num(main[0], 1), A = num(main[1], 0.4), B = num(main[2], 0.4);
+    if ([L, A, B].some((v) => v === null)) return null;
+    const [r, g, b] = oklabToSrgb(L, A, B);
+    return { r: round(r), g: round(g), b: round(b), a: alpha };
+  }
+  if (name === 'oklch') {
+    if (main.length !== 3) return null;
+    const L = num(main[0], 1), C = num(main[1], 0.4), H = angle(main[2]);
+    if ([L, C, H].some((v) => v === null)) return null;
+    const rad = (H * Math.PI) / 180;
+    const [r, g, b] = oklabToSrgb(L, C * Math.cos(rad), C * Math.sin(rad));
+    return { r: round(r), g: round(g), b: round(b), a: alpha };
+  }
+  if (name === 'color') {
+    // what getComputedStyle returns for colour-mix and wide-gamut colours
+    const space = main[0];
+    if (space !== 'srgb' && space !== 'srgb-linear' && space !== 'display-p3') return null;
+    const [r, g, b] = main.slice(1, 4).map((t) => num(t, 1));
+    if ([r, g, b].some((v) => v === null)) return null;
+    if (space === 'srgb-linear') return { r: round(linearToSrgb(r)), g: round(linearToSrgb(g)), b: round(linearToSrgb(b)), a: alpha };
+    // display-p3 is wider than sRGB; clipping to sRGB is fine for canvas and contrast purposes
+    return { r: round(clamp(r, 0, 1) * 255), g: round(clamp(g, 0, 1) * 255), b: round(clamp(b, 0, 1) * 255), a: alpha };
+  }
+  return null;
+}
+
+/** color-mix(in oklab, red 30%, blue) / (in srgb, ...) , good enough for what DSSL emits */
+function parseColorMix(body) {
+  const parts = splitTopLevelCommas(body);
+  if (parts.length < 3) return null;
+  const spaceM = /^in\s+([a-z-]+)/.exec(parts[0].trim());
+  if (!spaceM) return null;
+  const space = spaceM[1];
+  const one = (txt) => {
+    const m = /^(.*?)(?:\s+([\d.]+)%)?$/s.exec(txt.trim());
+    const color = parseColor(m[1].trim());
+    return color ? { color, pct: m[2] === undefined ? null : parseFloat(m[2]) } : null;
+  };
+  const A = one(parts[1]), B = one(parts[2]);
+  if (!A || !B) return null;
+  let pa = A.pct, pb = B.pct;
+  if (pa === null && pb === null) { pa = 50; pb = 50; }
+  else if (pa === null) pa = 100 - pb;
+  else if (pb === null) pb = 100 - pa;
+  const total = pa + pb;
+  if (total <= 0) return null;
+  const t = pb / total; // share of B
+  const alphaMul = Math.min(1, total / 100);
+  const mixed = mix(A.color, B.color, t, space === 'srgb' ? 'srgb' : 'oklab');
+  return { ...mixed, a: mixed.a * alphaMul };
+}
+
+function splitTopLevelCommas(body) {
+  const out = [];
+  let depth = 0, cur = '';
+  for (const ch of body) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (depth === 0 && ch === ',') { out.push(cur); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}
+
+/* ---------- operations ---------- */
+
+/** premultiplied mix of two colours; t=0 is a, t=1 is b */
+export function mix(a, b, t, space = 'oklab') {
+  t = clamp(t, 0, 1);
+  const alpha = a.a * (1 - t) + b.a * t;
+  if (alpha <= 0) return { r: 0, g: 0, b: 0, a: 0 };
+  const wa = (a.a * (1 - t)) / alpha, wb = (b.a * t) / alpha;
+  if (space === 'srgb') {
+    return { r: round(a.r * wa + b.r * wb), g: round(a.g * wa + b.g * wb), b: round(a.b * wa + b.b * wb), a: alpha };
+  }
+  const A = srgbToOklab(a.r, a.g, a.b), B = srgbToOklab(b.r, b.g, b.b);
+  const [r, g, bl] = oklabToSrgb(A[0] * wa + B[0] * wb, A[1] * wa + B[1] * wb, A[2] * wa + B[2] * wb);
+  return { r: round(r), g: round(g), b: round(bl), a: alpha };
+}
+
+/** paint `fg` over an opaque-or-not `bg` */
+export function over(fg, bg) {
+  const a = fg.a + bg.a * (1 - fg.a);
+  if (a <= 0) return { r: 0, g: 0, b: 0, a: 0 };
+  const f = (x, y) => round((x * fg.a + y * bg.a * (1 - fg.a)) / a);
+  return { r: f(fg.r, bg.r), g: f(fg.g, bg.g), b: f(fg.b, bg.b), a };
+}
+
+export const withAlpha = (c, a) => ({ ...c, a: clamp(a, 0, 1) });
+
+/** WCAG relative luminance */
+export function luminance(c) {
+  return 0.2126 * srgbToLinear(c.r) + 0.7152 * srgbToLinear(c.g) + 0.0722 * srgbToLinear(c.b);
+}
+
+/** WCAG contrast ratio between two colours (alpha must already be composited) */
+export function contrast(a, b) {
+  const L1 = luminance(a), L2 = luminance(b);
+  return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+}
+
+export const toRgba = (c) => `rgba(${c.r}, ${c.g}, ${c.b}, ${+c.a.toFixed(3)})`;
+export const toHex = (c) => '#' + [c.r, c.g, c.b].map((v) => round(v).toString(16).padStart(2, '0')).join('');
+
+/**
+ * Evaluate a colour EXPRESSION as DSSL writes it, using a token lookup:
+ *   color.ink            a token (its value may itself be an expression)
+ *   color.ink/40         a token with alpha
+ *   #d1006f/50           a literal with alpha
+ *   oklch(62% 0.19 35)   anything parseColor reads
+ * `lookup(name)` returns the raw token string or undefined. Returns a colour
+ * or null when it cannot be known at compile time (a runtime-only var()).
+ */
+export function evalColorExpr(expr, lookup, depth = 0) {
+  if (depth > 8 || expr === null || expr === undefined) return null;
+  const s = String(expr).trim();
+  if (!s) return null;
+  const direct = parseColor(s);
+  if (direct) return direct;
+  const m = /^(.*?)\/\s*([\d.]+%?)$/.exec(s);
+  if (m && !s.includes('(')) {
+    const base = evalColorExpr(m[1].trim(), lookup, depth + 1);
+    if (!base) return null;
+    const a = num(m[2], 1);
+    if (a === null) return null;
+    return withAlpha(base, (a > 1 && !m[2].endsWith('%') ? a / 100 : a) * base.a);
+  }
+  if (/^[a-z][a-z0-9-]*(\.[a-z0-9-]+)+$/i.test(s) && lookup) {
+    const raw = lookup(s);
+    return raw === undefined ? null : evalColorExpr(raw, lookup, depth + 1);
+  }
+  return null;
+}

dssl-vscode/lib/engine/import.js

@@ -0,0 +1,372 @@
+/* =========================================================================
+ * DSSL: import.js
+ *
+ *   dssl import styles.css -o styles.dssl
+ *
+ * Turns an existing CSS file into DSSL, and tells you honestly what it could
+ * not carry over. It is a translator for the mechanical differences, not a
+ * magic wand:
+ *
+ *   semicolons dropped, bare numbers for pixel lengths (16px -> 16)
+ *   transition: color .2s ease  ->  transition: 200 ease color
+ *   font: italic 700 14px/1.5 Arial  ->  the five longhands (DSSL's font: means something else)
+ *   @keyframes  ->  motion { from / at 40% / to }
+ *   !important  ->  the same declaration inside pin { }
+ *   @font-face, @supports, @import, @property ...  ->  one raw { } block, verbatim
+ *   properties DSSL does not know  ->  commented out, and listed in the report
+ *
+ * Everything else is kept as written, because DSSL selectors and CSS values are
+ * CSS. The result is then run through the real compiler and any error it still
+ * has is in the report, so you know before you open the file.
+ *
+ * Pure: no DOM, no filesystem. importCss(text) -> { dssl, report }.
+ * ========================================================================= */
+
+import { parse } from './parser.js';
+import { resolve, KNOWN_PROPS, UNITLESS_PROPS, EASINGS } from './resolver.js';
+
+const RAW_AT_RULES = new Set(['font-face', 'supports', 'import', 'property', 'page', 'charset', 'namespace', 'counter-style', 'font-feature-values', 'font-palette-values', 'view-transition', 'scope', 'starting-style', 'position-try']);
+const SEMANTIC_NAMES = new Set(['size', 'place', 'center', 'cover', 'sticky', 'radius', 'shadow', 'circle', 'z', 'grow', 'shrink', 'basis', 'stack', 'fluid', 'texture', 'aura', 'slider', 'bend', 'fold', 'stretch', 'gradient', 'animate', 'stagger', 'overlap']);
+
+/* ------------------------------------------------------------------ *
+ * 1. a small CSS parser
+ * ------------------------------------------------------------------ */
+
+/**
+ * Parse CSS into a tree. Handles comments, strings, url(), parentheses and
+ * nesting. Nodes:
+ *   { type:'decl', prop, value, important, line }
+ *   { type:'rule', sel, body:[nodes], line }
+ *   { type:'at', name, prelude, body:[nodes]|null, raw, line }
+ *   { type:'comment', text, line }
+ */
+export function parseCss(src) {
+  let i = 0;
+  const n = src.length;
+  let line = 1;
+  const lineAt = (idx) => { let l = 1; for (let k = 0; k < idx && k < n; k++) if (src.charCodeAt(k) === 10) l++; return l; };
+
+  function skipString(q) {
+    i++;
+    while (i < n && src[i] !== q) { if (src[i] === '\\') i++; i++; }
+    i++;
+  }
+
+  function parseBody(inBlock) {
+    const nodes = [];
+    let buf = '';
+    let bufStart = i;
+    let paren = 0;
+    const flushDecl = (end) => {
+      const text = buf.trim();
+      buf = '';
+      if (!text) return;
+      const colon = text.indexOf(':');
+      if (colon === -1) { nodes.push({ type: 'junk', text, line: lineAt(end) }); return; }
+      const prop = text.slice(0, colon).trim();
+      let value = text.slice(colon + 1).trim();
+      let important = false;
+      const im = /\s*!\s*important\s*$/i.exec(value);
+      if (im) { important = true; value = value.slice(0, im.index).trim(); }
+      nodes.push({ type: 'decl', prop, value, important, line: lineAt(bufStart) });
+    };
+    while (i < n) {
+      const c = src[i];
+      if (c === '/' && src[i + 1] === '*') {
+        const end = src.indexOf('*/', i + 2);
+        const stop = end === -1 ? n : end + 2;
+        if (!buf.trim()) nodes.push({ type: 'comment', text: src.slice(i + 2, end === -1 ? n : end).trim(), line: lineAt(i) });
+        i = stop;
+        continue;
+      }
+      if (c === '"' || c === "'") { const s = i; skipString(c); buf += src.slice(s, i); continue; }
+      if (c === '(') { paren++; buf += c; i++; continue; }
+      if (c === ')') { paren--; buf += c; i++; continue; }
+      if (paren > 0) { buf += c; i++; continue; }
+      if (c === ';') { const at = i; i++; flushAt(at); continue; }
+      if (c === '{') {
+        const prelude = buf.trim();
+        const startIdx = bufStart;
+        buf = '';
+        const startLine = lineAt(startIdx);
+        i++;
+        const body = parseBody(true);
+        const node = { line: startLine };
+        const atm = prelude.startsWith('@') ? /^@([\w-]+)\s*([\s\S]*)$/.exec(prelude) : null;
+        if (atm) {
+          Object.assign(node, { type: 'at', name: atm[1].toLowerCase(), prelude: atm[2].trim(), body, raw: src.slice(startIdx, i).trim() });
+        } else if (prelude && !prelude.startsWith('@')) {
+          Object.assign(node, { type: 'rule', sel: prelude, body });
+        } else {
+          // "@@@ {" or a block with no selector at all: nothing sensible to convert
+          Object.assign(node, { type: 'junk', text: prelude || '{ ... }' });
+        }
+        nodes.push(node);
+        bufStart = i;
+        continue;
+      }
+      if (c === '}') {
+        if (inBlock) { flushDecl(i); i++; return nodes; }
+        i++; continue; // a stray brace at the top level
+      }
+      if (!buf.trim()) bufStart = i;
+      buf += c; i++;
+    }
+    flushDecl(i);
+    return nodes;
+
+    // a ";" ended something: a declaration, or an at-rule with no block (@import ...;)
+    function flushAt(at) {
+      const text = buf.trim();
+      const m = text.startsWith('@') ? /^@([\w-]+)\s*([\s\S]*)$/.exec(text) : null;
+      if (text.startsWith('@') && !m) { nodes.push({ type: 'junk', text, line: lineAt(bufStart) }); buf = ''; }
+      else if (m) {
+        nodes.push({ type: 'at', name: m[1].toLowerCase(), prelude: m[2].trim(), body: null, raw: text + ';', line: lineAt(bufStart) });
+        buf = '';
+      } else flushDecl(at);
+      bufStart = i;
+    }
+  }
+  return parseBody(false);
+}
+
+/* ------------------------------------------------------------------ *
+ * 2. value conversion
+ * ------------------------------------------------------------------ */
+
+/** split on top-level whitespace or commas, keeping rgb(1 2 3), url(a b) etc. whole */
+function topSplit(s, sep) {
+  const out = []; let depth = 0, cur = '', q = null;
+  for (const ch of s) {
+    if (q) { cur += ch; if (ch === q) q = null; continue; }
+    if (ch === '"' || ch === "'") { q = ch; cur += ch; continue; }
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    const hit = sep === ',' ? ch === ',' : /\s/.test(ch);
+    if (hit && depth === 0) { if (cur.trim()) out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+const PX = /^(-?\d*\.?\d+)px$/;
+
+function stripPx(prop, value) {
+  if (prop.startsWith('--') || UNITLESS_PROPS.has(prop)) return value;
+  // only top-level words: a px inside calc() or min() is left as written
+  return topSplit(value, ' ').map((w) => (PX.test(w) ? w.replace(PX, '$1') : w)).join(' ');
+}
+
+const msOf = (t) => {
+  const m = /^(\d*\.?\d+)(ms|s)$/.exec(t);
+  if (!m) return null;
+  return m[2] === 's' ? Math.round(parseFloat(m[1]) * 1000) : Math.round(parseFloat(m[1]));
+};
+
+function convertTransition(value, note) {
+  if (value.trim() === 'none') return 'none';
+  const out = [];
+  for (const seg of topSplit(value, ',')) {
+    const atoms = topSplit(seg, ' ');
+    const times = atoms.filter((a) => msOf(a) !== null);
+    const ease = atoms.find((a) => EASINGS[a] || /^(cubic-bezier|steps)\(/.test(a));
+    const props = atoms.filter((a) => msOf(a) === null && a !== ease);
+    if (!times.length) { note(`transition "${seg}" has no duration, so it was dropped`); continue; }
+    if (times.length > 1) note('a transition delay has no DSSL form here, so it was dropped (use transition-delay)');
+    const prop = props.join(' ');
+    out.push([String(msOf(times[0])), ease, prop && prop !== 'all' ? prop : ''].filter(Boolean).join(' '));
+  }
+  return out.join(', ');
+}
+
+/** font: [style] [weight] size[/line-height] family  ->  longhands */
+function convertFont(value, note) {
+  const SYSTEM = /^(caption|icon|menu|message-box|small-caption|status-bar|inherit|initial|unset)$/;
+  if (SYSTEM.test(value.trim())) { note(`font: ${value} is a system font keyword with no DSSL equivalent`); return null; }
+  const atoms = topSplit(value, ' ');
+  const sizeIdx = atoms.findIndex((a) => /^(-?\d*\.?\d+)(px|em|rem|%|pt|vw|vh)?(\/.+)?$/.test(a) && !/^\d{3}$/.test(a) && !/^\d00$/.test(a)
+    || /^(xx-small|x-small|small|medium|large|x-large|xx-large)(\/.+)?$/.test(a));
+  if (sizeIdx === -1) { note(`font: ${value} has no size, so it could not be split`); return null; }
+  const out = [];
+  for (const a of atoms.slice(0, sizeIdx)) {
+    if (/^(italic|oblique)$/.test(a)) out.push(['font-style', a]);
+    else if (/^(\d{3}|bold|bolder|lighter)$/.test(a)) out.push(['font-weight', a]);
+    else if (a === 'small-caps') out.push(['font-variant', a]);
+  }
+  const [size, lh] = atoms[sizeIdx].split('/');
+  out.push(['font-size', size]);
+  if (lh) out.push(['line-height', lh]);
+  const fam = atoms.slice(sizeIdx + 1).join(' ');
+  if (fam) out.push(['font-family', fam]);
+  return out;
+}
+
+/* ------------------------------------------------------------------ *
+ * 3. the converter
+ * ------------------------------------------------------------------ */
+
+export function importCss(css, options = {}) {
+  const tree = parseCss(String(css));
+  const report = { rules: 0, declarations: 0, converted: 0, pinned: 0, raw: 0, motions: 0, dropped: [], notes: [], compile: null };
+  const rawChunks = [];
+  const pinBlocks = [];
+  const note = (line, message, hint) => report.notes.push({ line, message, hint });
+  const pad = (d) => '  '.repeat(d);
+
+  const emitDecl = (d, depth, out, collectPin) => {
+    report.declarations++;
+    const line = d.line;
+    const prop = d.prop.toLowerCase();
+    if (!prop.startsWith('--') && !KNOWN_PROPS.has(prop) && prop !== 'transition' && prop !== 'font' && prop !== 'animation' && !SEMANTIC_NAMES.has(prop)) {
+      out.push(`${pad(depth)}// dssl import dropped (unknown to DSSL): ${d.prop}: ${d.value}`);
+      report.dropped.push({ line, text: `${d.prop}: ${d.value}`, reason: 'DSSL does not know this property' });
+      return;
+    }
+    if (SEMANTIC_NAMES.has(prop) && prop !== 'font') {
+      note(line, `"${d.prop}" is also a DSSL shorthand with a different meaning`, 'check this line after import');
+    }
+    if (d.important) {
+      collectPin.push({ prop, value: d.value, line });
+      report.pinned++;
+      return;
+    }
+    let value = d.value;
+    if (prop === 'transition') {
+      value = convertTransition(value, (m) => note(line, m));
+      if (!value) { report.dropped.push({ line, text: `${d.prop}: ${d.value}`, reason: 'no usable duration' }); out.push(`${pad(depth)}// dssl import dropped: ${d.prop}: ${d.value}`); return; }
+      report.converted++;
+      out.push(`${pad(depth)}transition: ${value}`);
+      return;
+    }
+    if (prop === 'font') {
+      const parts = convertFont(value, (m) => note(line, m));
+      if (!parts) { report.dropped.push({ line, text: `${d.prop}: ${d.value}`, reason: 'font shorthand could not be split' }); out.push(`${pad(depth)}// dssl import dropped: ${d.prop}: ${d.value}`); return; }
+      report.converted++;
+      for (const [p, v] of parts) out.push(`${pad(depth)}${p}: ${stripPx(p, v)}`);
+      return;
+    }
+    if (prop === 'grid') note(line, 'grid: is a CSS shorthand here but a different sugar in DSSL', 'it was kept as written; rewrite it with grid-template-* if the compiler complains');
+    const next = stripPx(prop, value);
+    if (next !== value) report.converted++;
+    out.push(`${pad(depth)}${d.prop}: ${next}`);
+  };
+
+  const emitNodes = (nodes, depth, out) => {
+    for (const node of nodes) {
+      if (node.type === 'comment') { if (depth === 0 || true) out.push(`${pad(depth)}// ${node.text.replace(/\n\s*/g, ' ')}`); continue; }
+      if (node.type === 'junk') { note(node.line, `could not read "${node.text.slice(0, 40)}"`); continue; }
+      if (node.type === 'decl') { emitDecl(node, depth, out, out.__pin || (out.__pin = [])); continue; }
+      if (node.type === 'rule') {
+        report.rules++;
+        const lines = [];
+        lines.__pin = [];
+        emitNodes(node.body, depth + 1, lines);
+        out.push(`${pad(depth)}${node.sel} {`, ...lines, `${pad(depth)}}`);
+        if (lines.__pin.length) pinBlocks.push({ sel: node.sel, decls: lines.__pin, depth });
+        continue;
+      }
+      if (node.type === 'at') {
+        const name = node.name;
+        if (name === 'keyframes' || name.endsWith('-keyframes')) {
+          if (name !== 'keyframes') { note(node.line, `@${name} is a vendor copy; the plain @keyframes is used`); continue; }
+          report.motions++;
+          out.push(`${pad(depth)}motion ${node.prelude} {`);
+          for (const fr of node.body || []) {
+            if (fr.type !== 'rule') continue;
+            for (const label of fr.sel.split(',').map((s) => s.trim())) {
+              const key = label === '0%' ? 'from' : label === '100%' ? 'to' : /%$/.test(label) ? `at ${label}` : label;
+              const inner = [];
+              inner.__pin = [];
+              emitNodes(fr.body, depth + 2, inner);
+              out.push(`${pad(depth + 1)}${key} {`, ...inner, `${pad(depth + 1)}}`);
+            }
+          }
+          out.push(`${pad(depth)}}`);
+          continue;
+        }
+        if (RAW_AT_RULES.has(name)) {
+          report.raw++;
+          rawChunks.push(node.raw);
+          if (name === 'import') note(node.line, '@import was moved into raw { }', 'load other stylesheets with <link rel="stylesheet/dssl"> or <link rel="stylesheet"> instead');
+          continue;
+        }
+        if (name === 'media' || name === 'container') {
+          const lines = [];
+          lines.__pin = [];
+          emitNodes(node.body || [], depth + 1, lines);
+          out.push(`${pad(depth)}@${name} ${node.prelude} {`, ...lines, `${pad(depth)}}`);
+          if (lines.__pin.length) note(node.line, `!important inside @${name} was moved to pin { } and loses the media condition`, 'wrap it in @media inside pin by hand');
+          continue;
+        }
+        if (name === 'layer') {
+          if (!node.body) { note(node.line, `@layer ${node.prelude}; is dropped: DSSL's layers are fixed (tokens, base, components, utilities, pin)`); continue; }
+          const lines = [];
+          lines.__pin = [];
+          emitNodes(node.body, depth + 1, lines);
+          out.push(`${pad(depth)}@layer ${node.prelude} {`, ...lines, `${pad(depth)}}`);
+          continue;
+        }
+        report.raw++;
+        rawChunks.push(node.raw);
+        note(node.line, `@${name} was kept verbatim in raw { }`);
+      }
+    }
+  };
+
+  const lines = [];
+  lines.__pin = [];
+  emitNodes(tree, 0, lines);
+
+  let dssl = lines.join('\n');
+  if (pinBlocks.length) {
+    dssl += `\n\n// !important in CSS is pin { } in DSSL: the layer that always wins\npin {\n`;
+    for (const b of pinBlocks) {
+      dssl += `  ${b.sel} {\n${b.decls.map((d) => `    ${d.prop}: ${stripPx(d.prop, d.value)}`).join('\n')}\n  }\n`;
+    }
+    dssl += `}`;
+  }
+  if (rawChunks.length) {
+    dssl = `// raw { } is real CSS, so semicolons are required inside it\nraw {\n${rawChunks.map((c) => '  ' + c.replace(/\n/g, '\n  ')).join('\n')}\n}\n\n` + dssl;
+  }
+  dssl = dssl.trim() + '\n';
+
+  // Run the real compiler on the result. A declaration it rejects (valid CSS that DSSL's
+  // stricter value checking does not accept, like scroll-snap-type: x mandatory) is commented
+  // out and listed, so the file you get always compiles.
+  const check = () => {
+    try {
+      const { ast, errors: parseErrors } = parse(dssl, 'imported.dssl');
+      const doc = resolve(ast, 'imported.dssl');
+      return { errors: [...parseErrors, ...doc.errors], warnings: doc.warnings.length };
+    } catch (e) {
+      return { errors: [{ line: 0, message: `the compiler threw: ${e.message}` }], warnings: 0 };
+    }
+  };
+  let result = check();
+  for (let pass = 0; pass < 4 && result.errors.length; pass++) {
+    const lines = dssl.split('\n');
+    const seen = new Set();
+    let changed = false;
+    for (const e of result.errors) {
+      const idx = (e.line || 0) - 1;
+      if (idx < 0 || idx >= lines.length || seen.has(idx)) continue;
+      const text = lines[idx];
+      if (!/^\s*[-\w]+\s*:/.test(text) || /^\s*\/\//.test(text)) continue; // only declaration lines
+      seen.add(idx);
+      const indent = text.match(/^\s*/)[0];
+      lines[idx] = `${indent}// dssl import dropped (the compiler rejected it: ${e.message}): ${text.trim()}`;
+      report.dropped.push({ line: e.line, text: text.trim(), reason: e.message });
+      changed = true;
+    }
+    if (!changed) break;
+    dssl = lines.join('\n');
+    result = check();
+  }
+  report.compile = {
+    ok: result.errors.length === 0,
+    errors: result.errors.map((e) => ({ line: e.line, message: e.message, hint: e.hint })),
+    warnings: result.warnings,
+  };
+  return { dssl, report };
+}

dssl-vscode/lib/engine/lint.js

@@ -0,0 +1,133 @@
+/* =========================================================================
+ * DSSL: lint.js
+ *
+ * Warnings for things that compile and run and are still wrong for the people
+ * using the page. They fit the language's promise (a mistake should be loud),
+ * and they never stop a build unless you ask for `dssl check --strict`.
+ *
+ *   contrast   text colour against its own background, in the same rule
+ *   focus      an outline removed from something you can tab to, with nothing in its place
+ *   target     a button or link with an explicit size smaller than a thumb can hit
+ *
+ * Only unconditional rules are checked. A rule inside @media or @signal might be
+ * the dark theme, and judging it against the light tokens would be wrong.
+ *
+ * Pure: no DOM. Called by resolve() with the rules it just built.
+ * ========================================================================= */
+
+import { parseColor, evalColorExpr, over, contrast, toRgba, toHex } from './color.js';
+
+/** one design-token lookup closed over the sheet's token map */
+function makeResolver(tokenMap) {
+  const lookup = (name) => tokenMap.get(name);
+  /** CSS value as the resolver emits it ("var(--dssl-color-ink)", "color-mix(...)", "#fff") to a colour */
+  return function cssToColor(css, depth = 0) {
+    if (css === undefined || css === null || depth > 6) return null;
+    const s = String(css).trim();
+    const direct = parseColor(s);
+    if (direct) return direct;
+    if (!s.includes('var(')) return null;
+    let unresolved = false;
+    const expanded = s.replace(/var\(--dssl-([a-z0-9-]+)\)/g, (m, name) => {
+      const key = name.replace('-', '.'); // namespace is the first segment: color-code-bg is color.code-bg
+      const raw = lookup(key);
+      if (raw === undefined) { unresolved = true; return m; }
+      const c = evalColorExpr(raw, lookup);
+      if (!c) { unresolved = true; return m; }
+      return toRgba(c);
+    });
+    if (unresolved) return null;
+    return cssToColor(expanded, depth + 1);
+  };
+}
+
+const lastDecl = (decls, ...props) => { for (let i = decls.length - 1; i >= 0; i--) if (props.includes(decls[i].prop)) return decls[i]; return null; };
+const pxOf = (v) => { const m = /^(-?[\d.]+)px$/.exec(String(v || '').trim()); return m ? parseFloat(m[1]) : null; };
+const finalCompound = (sel) => String(sel).trim().split(/[\s>+~]+/).pop() || '';
+const INTERACTIVE = /^(a|button|input|select|textarea|summary)\b|\[tabindex|\[role=["']?(button|link|tab|menuitem)|^\*$/;
+
+/**
+ * @param {object} p { rules, tokenMap, file }
+ * @returns {Array} warnings in the compiler's {file, line, message, hint} shape
+ */
+export function lintRules({ rules, tokenMap, file }) {
+  const warnings = [];
+  const cssToColor = makeResolver(tokenMap);
+  const pageBg = (() => { const raw = tokenMap.get('color.paper'); return raw ? evalColorExpr(raw, (n) => tokenMap.get(n)) : null; })();
+
+  const killedFocus = [];
+  const focusBases = new Set();
+
+  for (const r of rules) {
+    if (r.pseudo) continue;
+    const conditional = (r.media && r.media.length) || (r.signals && r.signals.length) || (r.containers && r.containers.length);
+    const states = r.states || new Set();
+    const hasFocus = states.has('focus') || states.has('focus-visible');
+
+    // ---- contrast
+    if (!conditional) {
+      const fgD = lastDecl(r.decls, 'color');
+      const bgD = lastDecl(r.decls, 'background-color', 'background');
+      if (fgD && bgD && typeof fgD.value === 'string' && typeof bgD.value === 'string') {
+        let bg = cssToColor(bgD.value);
+        let fg = cssToColor(fgD.value);
+        if (bg && fg) {
+          if (bg.a < 0.999) bg = pageBg ? over(bg, { ...pageBg, a: 1 }) : null;
+          if (bg) {
+            const fgSolid = fg.a < 0.999 ? over(fg, bg) : fg;
+            const ratio = contrast(fgSolid, bg);
+            const size = pxOf((lastDecl(r.decls, 'font-size') || {}).value);
+            const weightRaw = (lastDecl(r.decls, 'font-weight') || {}).value;
+            const weight = weightRaw === 'bold' ? 700 : Number(weightRaw) || 400;
+            const large = size !== null && (size >= 24 || (size >= 18.66 && weight >= 700));
+            const need = large ? 3 : 4.5;
+            if (ratio < need) {
+              warnings.push({
+                file, line: fgD.line,
+                message: `text contrast is ${ratio.toFixed(1)}:1 (${toHex(fgSolid)} on ${toHex(bg)}), below the ${need}:1 that readers need${large ? ' for large text' : ''}`,
+                hint: 'pick a darker or lighter text colour (WCAG AA). Contrast is only checked for a colour and a background written in the same rule',
+              });
+            }
+          }
+        }
+      }
+    }
+
+    // ---- focus
+    if (hasFocus) focusBases.add(r.sel.replace(/:(focus-visible|focus)\b/g, '').trim());
+    if (!hasFocus && INTERACTIVE.test(finalCompound(r.sel).replace(/[.#:][\w-]+.*$/, (m) => m.startsWith('[') ? m : '') || finalCompound(r.sel))) {
+      for (const d of r.decls) {
+        const v = String(d.value).trim();
+        const killed = (d.prop === 'outline' && /^(none|0|0px)(\s|$)/.test(v)) || (d.prop === 'outline-style' && v === 'none') || (d.prop === 'outline-width' && /^0(px)?$/.test(v));
+        if (killed) { killedFocus.push({ sel: r.sel, line: d.line }); break; }
+      }
+    }
+
+    // ---- tap target
+    const tag = finalCompound(r.sel);
+    if (!conditional && /^(button|a)\b|\[role=["']?button/.test(tag)) {
+      for (const dim of ['width', 'height', 'min-width', 'min-height']) {
+        const d = lastDecl(r.decls, dim);
+        const px = d && pxOf(d.value);
+        if (px !== null && px !== undefined && px < 24 && px > 0) {
+          warnings.push({
+            file, line: d.line,
+            message: `${dim}: ${px}px on "${r.sel}" is below 24px, the smallest target WCAG 2.2 allows`,
+            hint: 'give buttons and links at least 24px (44px is comfortable for a thumb), or add padding instead of shrinking the box',
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  for (const k of killedFocus) {
+    if (focusBases.has(k.sel)) continue;
+    warnings.push({
+      file, line: k.line,
+      message: `the focus outline is removed from "${k.sel}" and nothing replaces it, so keyboard users lose their place`,
+      hint: 'add a focus-visible { outline: 2 solid color.accent } block, or `use focus-ring` if you have that behavior',
+    });
+  }
+  return warnings;
+}

dssl-vscode/lib/engine/parser.js

@@ -1,6 +1,6 @@
 /* =========================================================================
- * DSSL — Domain Specific Style Language
- * parser.js — tokenizer + parser for the braces syntax
+ * DSSL - Domain Specific Style Language
+ * parser.js - tokenizer + parser for the braces syntax
  *
  * Line-oriented parser:
  *   - blocks open with `header {` and close with `}`
@@ -18,27 +18,27 @@ export const STATE_WORDS = new Set([
   'placeholder-shown', 'read-only', 'read-write', 'enabled',
   'indeterminate', 'first-child', 'last-child', 'only-child',
   'first-of-type', 'last-of-type', 'link', 'visited',
-  'seen', // v0.4.0 — engine-native: fires once when the element enters the viewport
+  'seen', // v0.4.0 - engine-native: fires once when the element enters the viewport
 ]);
 
-// v0.5.0 — exported so the resolver can validate the `::name` half whenever a
+// v0.5.0 - exported so the resolver can validate the `::name` half whenever a
 // full selector (.card::before) carries a pseudo-element. The resolver splits
-// those into element + pseudo and routes them into shadow CSS — previously a
+// those into element + pseudo and routes them into shadow CSS - previously a
 // top-level `.card::before { }` compiled ok and then matched NOTHING.
 export const PSEUDO_ELEMENTS = new Set([
   'before', 'after', 'placeholder', 'selection', 'marker',
   'first-line', 'first-letter', 'backdrop', 'file-selector-button',
-  // v0.7.2 — ::part() rides the shadow-CSS pipeline (a document stylesheet
+  // v0.7.2 - ::part() rides the shadow-CSS pipeline (a document stylesheet
   // CAN style shadow parts of custom elements). ::slotted() is accepted by
   // the parser but rejected by the resolver with a loud explanation: it only
   // exists inside a shadow tree, which is not a place DSSL styles.
   'part', 'slotted',
 ]);
 
-// v0.4.2 — vendor pseudo-elements pass through verbatim (::-webkit-scrollbar
+// v0.4.2 - vendor pseudo-elements pass through verbatim (::-webkit-scrollbar
 // and friends). The DOM gives you no other way to reach native scrollbars,
 // so they ride the same shadow-CSS exception as ::before/::after. The name
-// may carry trailing state (::hover, :horizontal) — it is emitted as-is.
+// may carry trailing state (::hover, :horizontal) - it is emitted as-is.
 export const VENDOR_PSEUDO = /^-(webkit|moz|ms)-/;
 
 /** find index of first top-level occurrence of `ch` (skips strings + parens) */
@@ -113,7 +113,7 @@ function stripComments(src) {
     if (c === '"' || c === "'") { q = c; out += c; continue; }
     if (c === '/' && n === '/') {
       // v0.7.1 bugfix: this handler used to emit its own '\n' AND rewind so
-      // the main loop emitted the same newline again — every // comment
+      // the main loop emitted the same newline again - every // comment
       // doubled a line, and every line number after the first comment
       // drifted +1 (diagnostics pointed one line late). The newline is now
       // emitted exactly once by the main loop.
@@ -156,13 +156,13 @@ export function parse(source, file = 'inline.dssl') {
     if (h.startsWith('@container')) return { kind: 'container', query: h.slice(10).trim() };
     if (h.startsWith('@signal ')) return { kind: 'signal', expr: h.slice(8).trim() };
     if (h.startsWith('@')) {
-      // v0.8.0 — unknown at-rules are skipped WHOLE (balanced braces). They
+      // v0.8.0 - unknown at-rules are skipped WHOLE (balanced braces). They
       // used to error and then keep parsing inside their block, so the inner
       // rules leaked out unconditionally: `@supports (display:grid) { .a { … } }
-      // applied .a everywhere. The block is now dropped in its entirety —
+      // applied .a everywhere. The block is now dropped in its entirety -
       // and raw { } is the documented escape hatch for CSS DSSL has no sugar
       // for yet (@font-face, @keyframes, @supports, @import…).
-      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'the whole block is skipped — for verbatim CSS like @font-face / @keyframes / @supports, wrap it in raw { }');
+      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'the whole block is skipped - for verbatim CSS like @font-face / @keyframes / @supports, wrap it in raw { }');
       return { kind: 'bogus' };
     }
     if (h.startsWith('::')) {
@@ -198,7 +198,7 @@ export function parse(source, file = 'inline.dssl') {
 
       if (open !== -1) {
         const header = rest.slice(0, open).trim();
-        // v0.7.2 — declarations and a nested block sharing one line:
+        // v0.7.2 - declarations and a nested block sharing one line:
         // `.card { background: red; hover { ... } }`. Everything before the
         // header used to be swallowed whole into it, so `background: red`
         // silently became part of a selector named "background: red; hover"
@@ -234,9 +234,9 @@ export function parse(source, file = 'inline.dssl') {
     }
   };
 
-  /** v0.8.0 — what happens right after a block header opens.
+  /** v0.8.0 - what happens right after a block header opens.
    *  - raw { } (top level): capture the block body VERBATIM as node.css and
-   *    return the remainder of the chunk — or enter multi-line capture mode
+   *    return the remainder of the chunk - or enter multi-line capture mode
    *    (returns '' with rawCapture armed).
    *  - bogus (unknown at-rule / pseudo-element): skip the whole balanced
    *    block so its content can never leak into the parent.
@@ -246,7 +246,7 @@ export function parse(source, file = 'inline.dssl') {
   const openBlock = (meta, node, rest, open, line) => {
     if (meta.kind === 'raw') {
       if (stack.length > 1) {
-        err(line, 'raw { } must be top-level — it drops verbatim CSS into the page stylesheet', 'move it out of the enclosing block');
+        err(line, 'raw { } must be top-level - it drops verbatim CSS into the page stylesheet', 'move it out of the enclosing block');
         const close = matchBrace(rest, open + 1);
         return close === -1 ? '' : rest.slice(close + 1);
       }
@@ -303,13 +303,13 @@ export function parse(source, file = 'inline.dssl') {
       if (!part) continue;
       const colon = scanFor(part, ':');
       if (colon === -1) {
-        // `use behavior-name` — keyword declaration with a name argument
+        // `use behavior-name` - keyword declaration with a name argument
         const useMatch = part.match(/^use\s+([A-Za-z][\w-]*)$/);
         if (useMatch) {
           stack[stack.length - 1].children.push({ kind: 'decl', prop: 'use', value: useMatch[1], line });
           continue;
         }
-        // valueless semantic property (e.g. `truncate`) — resolver decides if legal
+        // valueless semantic property (e.g. `truncate`) - resolver decides if legal
         if (/^[a-z][a-z0-9-]*$/i.test(part)) {
           stack[stack.length - 1].children.push({ kind: 'decl', prop: part.toLowerCase(), value: '', line });
         } else {
@@ -320,9 +320,9 @@ export function parse(source, file = 'inline.dssl') {
       const prop = part.slice(0, colon).trim().toLowerCase();
       const value = part.slice(colon + 1).trim();
       if (!prop) { err(line, 'declaration is missing a property name'); continue; }
-      // v0.7.0 — numeric token keys. `tokens { space { 9: 96 } }` is legal:
+      // v0.7.0 - numeric token keys. `tokens { space { 9: 96 } }` is legal:
       // the built-in spacing scale stops at 8, and real pages need 9, 10, 12…
-      // Numbers are keys ONLY inside a tokens subtree — anywhere else a bare
+      // Numbers are keys ONLY inside a tokens subtree - anywhere else a bare
       // numeric property is a typo, and the error now says exactly that
       // instead of the old "not a valid property name" shrug.
       if (/^[0-9]+(\.[0-9]+)?$/.test(prop)) {
@@ -331,10 +331,10 @@ export function parse(source, file = 'inline.dssl') {
           continue;
         }
         err(line, `"${prop}" is not a valid property name`,
-          'numeric names are token keys only inside tokens { } — e.g. tokens { space { 9: 96 } } — and then referenced as space.9; property names must start with a letter');
+          'numeric names are token keys only inside tokens { } - e.g. tokens { space { 9: 96 } } - and then referenced as space.9; property names must start with a letter');
         continue;
       }
-      // v0.4.0: dotted custom properties are legal — `--color.accent: …` is
+      // v0.4.0: dotted custom properties are legal - `--color.accent: …` is
       // scoped-token sugar (resolver maps it to the engine's token variable)
       if (!/^(-{1,2}[a-z][a-z0-9.-]*|[a-z][a-z0-9-]*)$/i.test(prop)) {
         err(line, `"${prop}" is not a valid property name`,
@@ -380,7 +380,7 @@ export function parse(source, file = 'inline.dssl') {
   });
   if (buf.trim()) processChunk(buf, bufLine);
   if (rawCapture) {
-    err(lines.length, 'the raw { } block was never closed with "}"', 'every "{" needs a matching "}" — the CSS captured so far is discarded');
+    err(lines.length, 'the raw { } block was never closed with "}"', 'every "{" needs a matching "}" - the CSS captured so far is discarded');
   }
 
   if (stack.length > 1) {

dssl-vscode/lib/engine/resolver.js

@@ -1,5 +1,5 @@
 /* =========================================================================
- * DSSL — resolver.js
+ * DSSL - resolver.js
  * Walks the parsed tree and produces flat, engine-ready rules:
  *
  *   rule = {
@@ -7,7 +7,7 @@
  *     media: [query],                // all must match
  *     signals: [{name, op, value}],  // JS-driven conditions
  *     containers: [query],           // container-query conditions
- *     layer, order,                  // cascade: (layer, order) — no specificity
+ *     layer, order,                  // cascade: (layer, order) - no specificity
  *     decls: [{prop, value} | special],
  *     file, line
  *   }
@@ -18,7 +18,13 @@
  * ========================================================================= */
 
 import { levenshtein, didYouMean, composeDeform } from './utils.js';
-// v0.5.0 — the resolver validates the `::name` half of full selectors so a
+// 0.9.0: the three new styling families. Each is a pure module, so the compiler
+// can validate their words (with did-you-mean) without a DOM.
+import { parseTexture } from './texture.js';
+import { parseAura } from './aura.js';
+import { parseSlider, sliderCss } from './slider.js';
+import { lintRules } from './lint.js';
+// v0.5.0 - the resolver validates the `::name` half of full selectors so a
 // typo like .card::befor is a LOUD error, never a silently dead rule.
 import { PSEUDO_ELEMENTS, VENDOR_PSEUDO, STATE_WORDS } from './parser.js';
 
@@ -45,7 +51,7 @@ export const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,
   'serif,sans-serif,monospace,cursive,fantasy,system-ui,ui-sans-serif,ui-monospace,ui-serif,ui-rounded,' +
   'system-ui,-apple-system,Roboto,Helvetica,Arial,Menlo,Consolas,SFMono-Regular,Liberation-Mono,Inter,Noto-Sans,Ubuntu,Cantarell,Oxygen,Fira-Sans,Droid-Sans,' +
   'border-box,content-box,padding-box,fill-box,stroke-box,view-box,' +
-  // v0.8.0 — the background repeat/attachment words the url() fix exposed:
+  // v0.8.0 - the background repeat/attachment words the url() fix exposed:
   // `background: url(a.png) no-repeat` was a false error because "no-repeat"
   // was missing while "repeat" existed
   'no-repeat,repeat-x,repeat-y,space,round,scroll,local,' +
@@ -63,12 +69,12 @@ export const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,
   'isolate,plaintext,sideways,upright,mixed,ltr,rtl,transform,auto,' +
   '-webkit-box,-webkit-inline-box,' +
   'thin,thick,medium,separate,collapse,vertical,horizontal,balance,pretty,orphans,' +
-  // v0.5.0 — hyphens: manual used to be rejected ("unknown value") even though
+  // v0.5.0 - hyphens: manual used to be rejected ("unknown value") even though
   // the property existed; plus the rendering keywords people actually type.
   'manual,pixelated,crisp-edges,optimizeSpeed,optimizeLegibility,geometricPrecision,' +
   'flex-start,flex-end,self-start,self-end,snap-block,snap-inline').split(','));
 
-const UNITLESS_PROPS = new Set([
+export const UNITLESS_PROPS = new Set([
   'opacity', 'line-height', 'z-index', 'font-weight', 'flex-grow', 'flex-shrink',
   'flex', 'order', 'scale', 'widows', 'orphans', 'column-count', 'aspect-ratio',
   'animation-iteration-count', 'flood-opacity', 'fill-opacity', 'stop-opacity',
@@ -77,20 +83,20 @@ const UNITLESS_PROPS = new Set([
   'grid-row', 'grid-column', 'grid-area',
 ]);
 
-// v0.7.2 — time properties: a bare number is milliseconds, never px, and
+// v0.7.2 - time properties: a bare number is milliseconds, never px, and
 // never unitless (both used to emit values the browser silently rejected).
 // transition-delay/animation-delay used to sit in UNITLESS_PROPS, which is
 // why `transition-delay: 200` shipped as invalid unitless 200.
 const TIME_PROPS = new Set([
   'transition-delay', 'transition-duration', 'animation-delay', 'animation-duration',
-  // v0.8.0 — the animation shorthand takes bare numbers as ms too:
+  // v0.8.0 - the animation shorthand takes bare numbers as ms too:
   // `animation: spin 1s infinite` is fine, but `animation: ghost 400` used
   // to become "ghost 400px" (invalid). 400 → 400ms, matching animate:.
   'animation',
 ]);
 
 // A practical whitelist of standard CSS properties (loud errors beat silent ones)
-const KNOWN_PROPS = new Set(('all,appearance,accent-color,align-content,align-items,align-self,align-tracks,aspect-ratio,' +
+export const KNOWN_PROPS = new Set(('all,appearance,accent-color,align-content,align-items,align-self,align-tracks,aspect-ratio,' +
   'backdrop-filter,backface-visibility,background,background-attachment,background-blend-mode,background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size,' +
   'block-size,border,border-block,border-block-color,border-block-end,border-block-end-color,border-block-end-style,border-block-end-width,border-block-start,border-block-start-color,border-block-start-style,border-block-start-width,border-block-style,border-block-width,' +
   'border-bottom,border-bottom-color,border-bottom-left-radius,border-bottom-right-radius,border-bottom-style,border-bottom-width,' +
@@ -129,7 +135,7 @@ export const DEFAULT_TOKENS = {
   'font.mono': 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
 };
 
-const EASINGS = {
+export const EASINGS = {
   snap: 'cubic-bezier(0.2, 0.9, 0.3, 1)',
   smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
   bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
@@ -153,7 +159,7 @@ const PLACE_WORDS = {
 
 const IDENT_RE = /^-?(?:[A-Za-z_]|--[A-Za-z_])[A-Za-z0-9_.\\-]*/;
 
-// functions whose numeric arguments are NOT lengths — numbers stay bare
+// functions whose numeric arguments are NOT lengths - numbers stay bare
 const UNITLESS_FN = new Set(('oklch,oklab,lab,lch,hsl,hsla,rgb,rgba,hwb,color,color-mix,light-dark,' +
   'brightness,saturate,contrast,grayscale,sepia,invert,opacity,' +
   'scale,scalex,scaley,scalez,scale3d,steps,cubic-bezier,linear,radial,conic').split(','));
@@ -166,6 +172,19 @@ const LENGTH_FN = new Set('calc,min,max,clamp,round,mod,rem,abs,sign,hypot,pow,s
  *   - token references become var(--dssl-…), `token/NN` becomes color-mix
  *   - unknown identifiers are errors (with did-you-mean)
  */
+/** split a selector list at top-level commas (not inside :is(...) and friends) */
+function splitTopLevel(sel) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of String(sel)) {
+    if (ch === '(' || ch === '[') depth++;
+    if (ch === ')' || ch === ']') depth--;
+    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
 function resolveValue(raw, ctx) {
   let out = '';
   let i = 0;
@@ -210,7 +229,7 @@ function resolveValue(raw, ctx) {
 
       if (ident.startsWith('--')) { out += ident; continue; } // custom property
 
-      // function call — resolve the inside
+      // function call - resolve the inside
       if (raw[i] === '(') {
         let depth = 1, j = i + 1;
         while (j < n && depth > 0) {
@@ -224,7 +243,7 @@ function resolveValue(raw, ctx) {
         }
         const inner = raw.slice(i + 1, j - 1);
         const fname = ident.toLowerCase();
-        // v0.8.0 — url() is atomic. The validator used to tokenize INSIDE it,
+        // v0.8.0 - url() is atomic. The validator used to tokenize INSIDE it,
         // so `url(a.png)` raised "unknown value a.png" (quoted urls worked
         // only because strings were already consumed whole). CSS allows the
         // unquoted form; DSSL passes it through untouched now.
@@ -233,7 +252,7 @@ function resolveValue(raw, ctx) {
           i = j;
           continue;
         }
-        // v0.3.2 fix: repeat(COUNT, tracks) — the leading count is an integer,
+        // v0.3.2 fix: repeat(COUNT, tracks) - the leading count is an integer,
         // never a length. `repeat(4, 1fr)` used to become `repeat(4px, 1fr)`,
         // which the browser rejected and the whole grid silently collapsed.
         if (fname === 'repeat') {
@@ -243,7 +262,7 @@ function resolveValue(raw, ctx) {
             i = j;
             continue;
           }
-          // auto-fill / auto-fit / nested weirdness — fall through to generic
+          // auto-fill / auto-fit / nested weirdness - fall through to generic
         }
         // color-ish functions keep bare numbers bare; calc-family gets px
         const innerUnitless = UNITLESS_FN.has(fname) ? true : LENGTH_FN.has(fname) ? false : ctx.unitless;
@@ -274,7 +293,7 @@ function resolveValue(raw, ctx) {
         continue;
       }
 
-      // v0.5.0 — font names are proper nouns: JetBrains Mono, IBM Plex Serif.
+      // v0.5.0 - font names are proper nouns: JetBrains Mono, IBM Plex Serif.
       // In font-family values and font.* tokens, bare multi-word names pass
       // through instead of demanding quotes. Everywhere else stays loud.
       if (ctx.bareIdents && /^[A-Za-z][A-Za-z0-9_-]*$/.test(ident)) {
@@ -295,8 +314,8 @@ function resolveValue(raw, ctx) {
       const hex = raw.slice(i, j);
       out += hex;
       i = j;
-      // v0.7.2 — alpha on a raw hex color: #ff0000/50 used to become
-      // #ff0000/50px (the bare number got the generic px treatment) — invalid
+      // v0.7.2 - alpha on a raw hex color: #ff0000/50 used to become
+      // #ff0000/50px (the bare number got the generic px treatment) - invalid
       // CSS, silently dropped by the browser. Tokens always had /NN via
       // color-mix; raw hex now gets the same treatment.
       const am = raw.slice(i).match(/^\s*\/\s*([0-9.]+)\s*%?/);
@@ -312,7 +331,7 @@ function resolveValue(raw, ctx) {
   return out;
 }
 
-/** paren-aware split on the `->` arrow — gradient stops use it as a separator */
+/** paren-aware split on the `->` arrow - gradient stops use it as a separator */
 function splitArrow(s) {
   const out = [];
   let cur = '', depth = 0, q = null;
@@ -329,7 +348,7 @@ function splitArrow(s) {
   return out;
 }
 
-/** split on a top-level separator (parens-aware) — commas inside fn() survive */
+/** split on a top-level separator (parens-aware) - commas inside fn() survive */
 function topSplit(str, sep) {
   const out = [];
   let cur = '', depth = 0;
@@ -345,12 +364,12 @@ function topSplit(str, sep) {
 
 function findToken(tokens, ident) {
   if (tokens.has(ident)) return ident;
-  // try progressive dot paths (a.b.c defined, user typed a.b.c — exact only, plus flat fallback)
+  // try progressive dot paths (a.b.c defined, user typed a.b.c - exact only, plus flat fallback)
   if (ident.includes('.')) {
     const parts = ident.split('.');
     for (let k = parts.length - 1; k > 0; k--) {
       const key = parts.slice(0, k).join('.');
-      if (tokens.has(key)) return key; // hmm — partial match would change meaning; require exact
+      if (tokens.has(key)) return key; // hmm - partial match would change meaning; require exact
     }
   }
   return null;
@@ -363,7 +382,7 @@ function findToken(tokens, ident) {
 const len = (raw, ctx) => resolveValue(raw, { ...ctx, unitless: false });
 const num = (raw, ctx) => resolveValue(raw, { ...ctx, unitless: true });
 
-// v0.6.0 — the deform family speaks degrees, not lengths: bare numbers are
+// v0.6.0 - the deform family speaks degrees, not lengths: bare numbers are
 // angles and `20deg` is accepted for people with CSS muscle memory.
 const degNum = (raw, what, ctx) => {
   const t = String(raw).trim();
@@ -372,16 +391,16 @@ const degNum = (raw, what, ctx) => {
     ctx.errors.push({
       file: ctx.file, line: ctx.line,
       message: `${what} takes a bare number of degrees`,
-      hint: `try  ${what}: 20  or  ${what}: -12  — bare numbers are degrees here`,
+      hint: `try  ${what}: 20  or  ${what}: -12  - bare numbers are degrees here`,
     });
     return null;
   }
   return parseFloat(m[1]);
 };
 
-/** v0.6.0 — shared grammar for gradient / gradient-text: kind · prefix · stops.
+/** v0.6.0 - shared grammar for gradient / gradient-text: kind · prefix · stops.
  *  Stops may be arrow-joined (`a -> b -> c`) or comma-joined (`linear 135, a, b`);
- *  the prefix is whatever the grammar calls direction/shape — everything else is a stop. */
+ *  the prefix is whatever the grammar calls direction/shape - everything else is a stop. */
 // Stops are colors by construction, so a bare word that is not a color name is
 // a typo the browser would only mutter about at apply time. Say it NOW instead.
 const COLOR_WORDS = new Set(('black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua,' +
@@ -431,7 +450,7 @@ function buildGradient(v, ctx) {
     ctx.errors.push({
       file: ctx.file, line: ctx.line,
       message: `gradient needs at least two stops`,
-      hint: 'try  gradient: linear 135, #ff0055 -> #00d4ff  — commas work too: linear 135, #ff0055, #00d4ff',
+      hint: 'try  gradient: linear 135, #ff0055 -> #00d4ff  - commas work too: linear 135, #ff0055, #00d4ff',
     });
     return null;
   }
@@ -472,7 +491,7 @@ function buildGradient(v, ctx) {
         ctx.errors.push({
           file: ctx.file, line: ctx.line,
           message: `"${head}" is not a conic gradient prefix`,
-          hint: 'use  from <angle>  and/or  at <position> — try conic from 45 at center, …',
+          hint: 'use  from <angle>  and/or  at <position> - try conic from 45 at center, …',
         });
         return null;
       }
@@ -504,9 +523,9 @@ function buildGradient(v, ctx) {
 
 function parseFlexWords(value, ctx, dir) {
   const out = [{ prop: 'display', value: 'flex' }, { prop: 'flex-direction', value: dir }];
-  // v0.8.0 — axis roles. Every place word used to write BOTH axes, so
+  // v0.8.0 - axis roles. Every place word used to write BOTH axes, so
   // `row: gap 8 between center` (the guide's own example) compiled to
-  // justify-content: space-between followed by justify-content: center —
+  // justify-content: space-between followed by justify-content: center -
   // and center won, bunching everything in the middle. Words now declare
   // the axis they are actually about: distribution words (between/around/
   // evenly) own the main axis, stretch/baseline own the cross axis, and
@@ -537,8 +556,8 @@ function parseFlexWords(value, ctx, dir) {
       const axisWarn = (prop, prev) => {
         ctx.warnings = ctx.warnings || [];
         ctx.warnings.push(prev === a
-          ? { file: ctx.file, line: ctx.line, message: `"${a}" is written twice in ${dir} — the second copy wins`, hint: `drop the duplicate; one distribution word + one alignment word is the whole grammar` }
-          : { file: ctx.file, line: ctx.line, message: `two words in ${dir} write ${prop}: "${a}" overrides "${prev}"`, hint: `later words win — drop one, or reorder so the distribution word comes first` });
+          ? { file: ctx.file, line: ctx.line, message: `"${a}" is written twice in ${dir} - the second copy wins`, hint: `drop the duplicate; one distribution word + one alignment word is the whole grammar` }
+          : { file: ctx.file, line: ctx.line, message: `two words in ${dir} write ${prop}: "${a}" overrides "${prev}"`, hint: `later words win - drop one, or reorder so the distribution word comes first` });
       };
       let wrote = false;
       if (role === 'main' || (role === 'both' && !mainSet)) {
@@ -556,9 +575,9 @@ function parseFlexWords(value, ctx, dir) {
         ctx.warnings.push({
           file: ctx.file, line: ctx.line,
           message: mainSet === a || crossSet === a
-            ? `"${a}" is written twice in ${dir} — both axes already came from it`
+            ? `"${a}" is written twice in ${dir} - both axes already came from it`
             : `"${a}" has nowhere to go: justify-content came from "${mainSet}", align-items came from "${crossSet}"`,
-          hint: 'one distribution word + one alignment word is the whole grammar — the extra word is dropped',
+          hint: 'one distribution word + one alignment word is the whole grammar - the extra word is dropped',
         });
       }
       continue;
@@ -568,7 +587,7 @@ function parseFlexWords(value, ctx, dir) {
   return out;
 }
 
-// v0.6.0 — deform members all land in the transform channel, so asking for
+// v0.6.0 - deform members all land in the transform channel, so asking for
 // `transition: 200 snap bend` should just work and mean transform.
 const DEFORM_TO_TRANSFORM = {
   bend: 'transform', 'bend-y': 'transform', 'bend-up': 'transform',
@@ -586,7 +605,7 @@ const SEMANTIC = {
   column: (v, ctx) => parseFlexWords(v, ctx, 'column'),
   grid(v, ctx) {
     const atoms = v.split(/\s+/).filter(Boolean);
-    // v0.7.2 — `grid: 3 gap 12` (the documented form) used to die: the gap
+    // v0.7.2 - `grid: 3 gap 12` (the documented form) used to die: the gap
     // atoms were fed into grid-template-columns → "3px gap 12px", invalid.
     // gap and rows are now first-class words of the shorthand.
     let gap = null, rows = null;
@@ -598,7 +617,7 @@ const SEMANTIC = {
     }
     let cols;
     if (!rest.length) {
-      ctx.errors.push({ file: ctx.file, line: ctx.line, message: 'grid needs columns', hint: 'grid: 3 · grid: auto-fill 200 · grid: 200px 1fr — optionally with gap N and rows N' });
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: 'grid needs columns', hint: 'grid: 3 · grid: auto-fill 200 · grid: 200px 1fr - optionally with gap N and rows N' });
       cols = 'none';
     } else if (rest.length === 1 && /^[0-9]+$/.test(rest[0])) {
       cols = `repeat(${rest[0]}, 1fr)`;
@@ -629,7 +648,7 @@ const SEMANTIC = {
     }
     return [{ prop: 'place-items', value: `${p[0]} ${p[1]}` }, { prop: 'place-content', value: `${p[0]} ${p[1]}` }];
   },
-  // v0.3.4 — the one-word centering primitive, because "how do I center this
+  // v0.3.4 - the one-word centering primitive, because "how do I center this
   // thing" is the first question everyone asks. Emits the alignment pair only;
   // the ENGINE guarantees a formatting context for alignment declarations
   // (inline elements → inline-grid, blocks → grid), so `center:` can never
@@ -716,7 +735,7 @@ const SEMANTIC = {
       { prop: 'white-space', value: 'nowrap' },
     ];
   },
-  // v0.4.0 — the accessibility classic: visually hidden, still announced by
+  // v0.4.0 - the accessibility classic: visually hidden, still announced by
   // screen readers. One word instead of nine lines of clip folklore.
   'visually-hidden'() {
     return [
@@ -731,7 +750,7 @@ const SEMANTIC = {
       { prop: 'border', value: '0' },
     ];
   },
-  // v0.4.0 — transition grew per-property specs. Each comma part is
+  // v0.4.0 - transition grew per-property specs. Each comma part is
   //   duration [easing] [property]     (property omitted → all)
   // The one-value form keeps working exactly as before:
   //   transition: 200 snap
@@ -745,7 +764,7 @@ const SEMANTIC = {
       const atoms = part.split(/\s+/);
       const dur = atoms[0];
       if (!/^\d*\.?\d+(ms|s)?$/.test(dur)) {
-        // v0.8.0 — the CSS habit is property-first (`transition: color .2s
+        // v0.8.0 - the CSS habit is property-first (`transition: color .2s
         // ease`). That used to be a generic "not a time" error and the part
         // silently dropped. The error now REWRITES the value into the DSSL
         // order (time · easing · property) so the fix is a copy-paste.
@@ -757,11 +776,11 @@ const SEMANTIC = {
           ctx.errors.push({
             file: ctx.file, line: ctx.line,
             message: `transition: the CSS form (property first) is not DSSL`,
-            hint: `write  transition: ${msOut}${easeAtom ? ' ' + easeAtom : ''}${propAtom ? ' ' + propAtom : ''}  — time first, easing, property last`,
+            hint: `write  transition: ${msOut}${easeAtom ? ' ' + easeAtom : ''}${propAtom ? ' ' + propAtom : ''}  - time first, easing, property last`,
           });
           continue;
         }
-        ctx.errors.push({ file: ctx.file, line: ctx.line, message: `transition duration "${dur}" is not a time`, hint: 'order is duration · easing · property — try 200 or 0.2s' });
+        ctx.errors.push({ file: ctx.file, line: ctx.line, message: `transition duration "${dur}" is not a time`, hint: 'order is duration · easing · property - try 200 or 0.2s' });
         continue;
       }
       const ms = /^\d+$/.test(dur) ? dur + 'ms' : dur;
@@ -801,15 +820,15 @@ const SEMANTIC = {
       }
       if (EASINGS[a]) { spec.easing = EASINGS[a]; continue; }
       if (['both', 'forwards', 'backwards', 'none', 'auto'].includes(a)) { spec.fill = a; continue; }
-      // v0.5.0 — looping: `infinite` runs forever, `alternate` ping-pongs.
-      // animate: pulse 1600 infinite alternate  — was impossible before.
+      // v0.5.0 - looping: `infinite` runs forever, `alternate` ping-pongs.
+      // animate: pulse 1600 infinite alternate  - was impossible before.
       if (a === 'infinite') { spec.iterations = Infinity; continue; }
       if (['alternate', 'alternate-reverse', 'reverse', 'normal'].includes(a)) { spec.direction = a; continue; }
       ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown animate part "${a}"`, hint: didYouMean(a, Object.keys(EASINGS).concat(['both', 'forwards', 'backwards', 'infinite', 'alternate'])) });
     }
     return [{ prop: '@animate', value: spec }];
   },
-  // v0.4.0 — choreography: a parent with `stagger: 60` offsets each element
+  // v0.4.0 - choreography: a parent with `stagger: 60` offsets each element
   // child's animation delay by its DOM position. Pairs with `seen` + `animate`
   // on the children: grids and lists cascade in as they scroll into view.
   stagger(v, ctx) {
@@ -822,7 +841,7 @@ const SEMANTIC = {
     const ms = t.endsWith('s') && !t.endsWith('ms') ? parseFloat(t) * 1000 : parseFloat(t);
     return [{ prop: '@stagger', value: ms }];
   },
-  // v0.5.0 — overlap policy. CSS can stack transparent things all day and say
+  // v0.5.0 - overlap policy. CSS can stack transparent things all day and say
   // nothing; DSSL refuses. `deny` makes the element always yield out of any
   // overlap; `auto` yields only while the element sits below 100% opacity.
   // Both inherit down the tree, so `body { overlap: auto }` is the site-wide
@@ -842,7 +861,7 @@ const SEMANTIC = {
   },
 
   /* ---------------------------------------------------------------- *
-   * v0.6.0 — the deform family: bend, bend-y, bend-up, fold, stretch,
+   * v0.6.0 - the deform family: bend, bend-y, bend-up, fold, stretch,
    * bend-around. All are engine-native (@-props) that compose into the
    * transform channel, so `transition: 200 snap transform` tweens them
    * and `:active { bend: 14 }` makes a button visibly flex under the
@@ -859,7 +878,7 @@ const SEMANTIC = {
     if (Math.abs(n) > 170) {
       ctx.errors.push({
         file: ctx.file, line: ctx.line,
-        message: `bend-around caps at ±170° — past that the arc folds back on itself`,
+        message: `bend-around caps at ±170° - past that the arc folds back on itself`,
         hint: 'try 30..120 for a visible arc',
       });
       return [];
@@ -882,7 +901,7 @@ const SEMANTIC = {
       ctx.errors.push({
         file: ctx.file, line: ctx.line,
         message: `stretch: ${m[1]} would flatten the element to nothing`,
-        hint: 'use a factor above 0 — 1.2 is a gentle pull, 2 is cartoonish',
+        hint: 'use a factor above 0 - 1.2 is a gentle pull, 2 is cartoonish',
       });
       return [];
     }
@@ -891,11 +910,11 @@ const SEMANTIC = {
     return [{ prop: '@stretch', value: { factor: f, axis } }];
   },
 
-  /* v0.6.0 — gradient tools. `gradient` replaces the CSS function soup with
+  /* v0.6.0 - gradient tools. `gradient` replaces the CSS function soup with
    * kind · prefix · stop -> stop; stops may be colors, tokens, alpha mixes
    * (ink/40) and carry a trailing % position. gradient-text clips the same
    * gradient into the glyphs. gradient-flow loops background-position so a
-   * gradient drifts forever — one line instead of keyframe folklore. */
+   * gradient drifts forever - one line instead of keyframe folklore. */
   gradient(v, ctx) {
     const img = buildGradient(v, ctx);
     return img ? [{ prop: 'background-image', value: img }] : [];
@@ -940,10 +959,10 @@ const SEMANTIC = {
   },
 };
 
-/* v0.8.0 — fluid sizing sugar. `fluid: 16, 24` keeps working (font-size),
+/* v0.8.0 - fluid sizing sugar. `fluid: 16, 24` keeps working (font-size),
  * and now any length-ish property takes it inline: `font-size: fluid 16 24`.
  * Both compile to a clamp() that scales linearly between the viewport bounds
- * (360px and 1200px by default) — the formula everyone writes by hand and
+ * (360px and 1200px by default) - the formula everyone writes by hand and
  * gets wrong. */
 const FLUID_PROPS = new Set(('font-size,width,height,inline-size,block-size,min-width,max-width,min-height,max-height,' +
   'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left,' +
@@ -989,14 +1008,59 @@ function buildFluidParts(parts, ctx, prop = 'font-size') {
 }
 
 /* ------------------------------------------------------------------ *
- * resolveDecl — one declaration → zero or more engine decls
+ * 0.9.0: texture, aura and slider
+ *
+ * All three validate their own vocabulary in their own module. Here they only
+ * get hooks: how to report an error on this line, how to turn a colour word
+ * into CSS (tokens, alpha and all), and how to suggest a correction.
+ * ------------------------------------------------------------------ */
+
+function styleHooks(ctx) {
+  return {
+    error: (message, hint) => ctx.errors.push({ file: ctx.file, line: ctx.line, message, hint: hint || undefined }),
+    color: (word) => {
+      const before = ctx.errors.length;
+      const css = resolveValue(word, { ...ctx, unitless: false, bareIdents: false });
+      return ctx.errors.length > before ? null : css;
+    },
+    suggest: (word, list) => { const h = didYouMean(word, list); return h ? `did you mean "${h}"?` : null; },
+  };
+}
+
+SEMANTIC.texture = function texture(v, ctx) {
+  const layers = parseTexture(v, styleHooks(ctx));
+  if (layers === null) return [];
+  return [{ prop: '@texture', value: layers.length ? layers : null }];
+};
+
+function auraDecls(prop, v, ctx) {
+  const r = parseAura(prop, v, styleHooks(ctx));
+  if (!r) return [];
+  const out = [];
+  // an empty list or none clears the slot; undefined means this property does not touch it
+  if (r.glow !== undefined) out.push({ prop: '@aura-glow', value: r.glow && r.glow.length ? r.glow : null });
+  if (r.particles !== undefined) out.push({ prop: '@aura-particles', value: r.particles && r.particles.length ? r.particles : null });
+  return out;
+}
+for (const name of ['aura', 'aura-glow', 'aura-particle', 'aura-particles', 'glow-particle', 'glow-particles', 'aura-glow-particle', 'aura-glow-particles']) {
+  SEMANTIC[name] = (v, ctx) => auraDecls(name, v, ctx);
+}
+
+SEMANTIC.slider = function slider(v, ctx) {
+  const spec = parseSlider(v, styleHooks(ctx));
+  if (!spec) return [];
+  return [{ prop: '@slider', value: spec }];
+};
+
+/* ------------------------------------------------------------------ *
+ * resolveDecl - one declaration → zero or more engine decls
  * ------------------------------------------------------------------ */
 
 function resolveDecl(prop, value, ctx) {
   const errors = ctx.errors;
   const ctx2 = { ...ctx, prop, errors, warnings: ctx.warnings };
 
-  // v0.8.0 — !important does not exist in DSSL. It used to fall through as a
+  // v0.8.0 - !important does not exist in DSSL. It used to fall through as a
   // value: the compiler said "unknown value important" AND still emitted
   // `red !important`, which the browser then silently dropped as an invalid
   // inline value. Now: one loud error, nothing emitted, and the pin { }
@@ -1004,14 +1068,14 @@ function resolveDecl(prop, value, ctx) {
   if (hasImportant(value)) {
     errors.push({
       file: ctx.file, line: ctx.line,
-      message: `!important does not exist in DSSL — "${prop}: ${String(value).replace(/\s*!\s*important\s*/i, '')}" was NOT applied`,
-      hint: 'the cascade is (layer, order) and later wins — put the rule in pin { } when it genuinely must win',
+      message: `!important does not exist in DSSL - "${prop}: ${String(value).replace(/\s*!\s*important\s*/i, '')}" was NOT applied`,
+      hint: 'the cascade is (layer, order) and later wins - put the rule in pin { } when it genuinely must win',
     });
     return [];
   }
 
   if (prop.startsWith('--')) {
-    // v0.4.0 — scoped tokens. Dotted names are token re-declarations:
+    // v0.4.0 - scoped tokens. Dotted names are token re-declarations:
     //   .danger { --color.accent: color.err }
     // sets --dssl-color-accent ON the element, and custom properties inherit,
     // so every var() reference in the subtree re-resolves. Plain names
@@ -1025,7 +1089,7 @@ function resolveDecl(prop, value, ctx) {
   const sem = SEMANTIC[prop];
   if (sem) return sem(value, ctx2);
 
-  // v0.8.0 — the animation shorthand passes through (it is legal CSS), but
+  // v0.8.0 - the animation shorthand passes through (it is legal CSS), but
   // bare motion names must not pay the generic unknown-value tax: "spin"
   // used to error with the surreal suggestion "did you mean span?". Motion
   // names pass silently here and a dedicated warning in the final loop says
@@ -1034,7 +1098,7 @@ function resolveDecl(prop, value, ctx) {
     return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: true }) }];
   }
 
-  // v0.8.0 — inline fluid sugar on any length-ish property:
+  // v0.8.0 - inline fluid sugar on any length-ish property:
   // font-size: fluid 16 24  →  clamp(16px, calc(16px + 0.952vw), 24px)
   const fluidM = /^fluid\s+([\s\S]+)$/.exec(String(value).trim());
   if (fluidM && FLUID_PROPS.has(prop)) {
@@ -1052,7 +1116,7 @@ function resolveDecl(prop, value, ctx) {
   return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
 }
 
-/** string-aware !important scan — quoted content: "!important" must not trip it */
+/** string-aware !important scan - quoted content: "!important" must not trip it */
 function hasImportant(v) {
   const s = String(v);
   let q = null;
@@ -1115,11 +1179,11 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const errors = [];
   const rules = [];
   const shadowRules = [];
-  const raws = []; // v0.8.0 — raw { } / @css { } verbatim passthrough blocks
+  const raws = []; // v0.8.0 - raw { } / @css { } verbatim passthrough blocks
   const motions = {};
   const behaviors = {};
-  // v0.7.0 — compile-time warnings: things that compile and run but are
-  // probably not what the author meant. Separate from errors — ok stays ok —
+  // v0.7.0 - compile-time warnings: things that compile and run but are
+  // probably not what the author meant. Separate from errors - ok stays ok -
   // but the engine prints them loudly so nobody debugs cascade order by hand
   // ever again.
   const warnings = [];
@@ -1155,7 +1219,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       } else if (node.kind === 'motion') {
         motions[node.name] = node;
       } else {
-        // v0.8.0 — defensive `|| []`: a malformed tree can throw from here
+        // v0.8.0 - defensive `|| []`: a malformed tree can throw from here
         // and take the whole stylesheet down (the @font-face crash report).
         // The parser now skips unknown at-rules whole, but the guard stays.
         for (const child of (node.children || [])) if (child.kind !== 'decl') prepass([child]);
@@ -1194,7 +1258,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           continue;
         }
         const props = {};
-        const deform = {};   // v0.6.0 — bend/stretch/fold in keyframes compose into transform
+        const deform = {};   // v0.6.0 - bend/stretch/fold in keyframes compose into transform
         const DEFORM_KEY = { '@bend': 'bend', '@bend-y': 'bendY', '@fold': 'fold', '@bend-up': 'bendUp' };
         for (const d of child.children) {
           if (d.kind !== 'decl') continue;
@@ -1216,7 +1280,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
             deform.fold !== undefined || deform.bendUp !== undefined) {
           // no box exists at resolve time, so edge-pinned members ride a
           // transformOrigin keyframe property instead of baked translates.
-          // Presence (not truthiness) — `bend: 0` in a frame is a real reset.
+          // Presence (not truthiness) - `bend: 0` in a frame is a real reset.
           const c = composeDeform(deform, props.transform || '', null);
           props.transform = c.transform;
           if (c.origin) props.transformOrigin = c.origin;
@@ -1238,7 +1302,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
     for (const key of keys) {
       const raw = tokenMap.get(key);
       const prop = '--dssl-' + key.replace(/\./g, '-');
-      // font.* tokens hold font stacks — proper nouns, not keywords (v0.5.0)
+      // font.* tokens hold font stacks - proper nouns, not keywords (v0.5.0)
       decls.push({ prop, value: resolveValue(raw, { ...ctxBase, prop: key, bareIdents: /^font/.test(key) }) });
     }
     if (!decls.length) return null;
@@ -1257,11 +1321,11 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   /* ---- main recursive walk ---- */
 
   const walk = (children, ctx, ctxRule) => {
-    // v0.7.2 — parent-first flush. Two real bugs lived here. (1) A nested
+    // v0.7.2 - parent-first flush. Two real bugs lived here. (1) A nested
     // block (hover { }, @media, a nested selector) was emitted BEFORE the
     // parent's own declarations got their cascade order, so `background: red`
     // on the parent always beat `hover { background: red }` nested inside it
-    // — the exact pattern the docs taught, and the external review's headline
+    // - the exact pattern the docs taught, and the external review's headline
     // finding. (2) media/container/signal/layer blocks flushed with the
     // PARENT context, dropping the condition or layer entirely: a nested
     // `@media dark` was silently unconditional AND sorted before base.
@@ -1291,7 +1355,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           }
           const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: node.prop, unitless: false });
           for (const r of resolved) {
-            // v0.7.0 — remember WHICH source property wrote a display value,
+            // v0.7.0 - remember WHICH source property wrote a display value,
             // so the ordering linter can tell an explicit "display:" from a
             // shorthand that expanded into one (column: → display: flex).
             if (r.prop === 'display' && node.prop !== 'display') r.via = node.prop;
@@ -1302,7 +1366,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
         case 'selector': {
           if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(node.sel) && ctx.sel) {
             const near = didYouMean(node.sel.toLowerCase(), [...STATE_WORDS]);
-            if (near) warnings.push({ file, line: node.line, message: `"${node.sel}" compiled as a descendant selector ("${combine(ctx.sel, node.sel)}")`, hint: `if you meant the state, it is spelled "${near}" — this block currently styles descendants called <${node.sel}>` });
+            if (near) warnings.push({ file, line: node.line, message: `"${node.sel}" compiled as a descendant selector ("${combine(ctx.sel, node.sel)}")`, hint: `if you meant the state, it is spelled "${near}" - this block currently styles descendants called <${node.sel}>` });
           }
           flushPending(node.line);
           const sel = ctx.sel === '' ? node.sel : combine(ctx.sel, node.sel);
@@ -1319,14 +1383,14 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           }
           flushPending(node.line);
           const childCtx = { ...ctx, sel: ctx.sel + ':' + node.name };
-          // v0.7.2 — the arrow is motion/gradient-stop syntax; inside a seen
+          // v0.7.2 - the arrow is motion/gradient-stop syntax; inside a seen
           // block it compiled into an inline style the browser rejects, so the
           // element just sat at its base style forever. Say so, loudly, and
           // point at the two real patterns (final value, or a motion).
           if (node.name === 'seen') {
             for (const d of node.children) {
               if (d.kind === 'decl' && typeof d.value === 'string' && d.value.includes('->')) {
-                errors.push({ file, line: d.line, message: `"${d.prop}: ${d.value}" — the -> arrow is motion syntax and does nothing inside seen { }`, hint: 'write the final style (seen { opacity: 1 }) or attach a motion (seen { animate: rise-in 400 })' });
+                errors.push({ file, line: d.line, message: `"${d.prop}: ${d.value}" - the -> arrow is motion syntax and does nothing inside seen { }`, hint: 'write the final style (seen { opacity: 1 }) or attach a motion (seen { animate: rise-in 400 })' });
               }
             }
           }
@@ -1383,13 +1447,13 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
             if (d.kind !== 'decl') { errors.push({ file, line: d.line, message: 'only declarations may appear inside a pseudo-element block (v0.2)' }); continue; }
             if (d.prop === 'content' && d.value === '') { srule.decls.push({ prop: 'content', value: '""', line: d.line }); continue; }
             const resolved = resolveDecl(d.prop, d.value, { file, line: d.line, errors, warnings, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
-            // v0.5.0 — engine-native properties have no pseudo-element story:
+            // v0.5.0 - engine-native properties have no pseudo-element story:
             // there is no DOM handle to nudge, animate, stack or stagger. They
             // used to leak into the shadow sheet as junk CSS the browser
-            // silently dropped — exactly the silence this language refuses.
+            // silently dropped - exactly the silence this language refuses.
             for (const r of resolved) {
               if (r.prop.startsWith('@')) {
-                errors.push({ file, line: d.line, message: `"${d.prop}" is engine-native and has no meaning on ::${node.name} — a pseudo-element has no DOM handle`, hint: 'put it on the element itself, not inside the pseudo block' });
+                errors.push({ file, line: d.line, message: `"${d.prop}" is engine-native and has no meaning on ::${node.name} - a pseudo-element has no DOM handle`, hint: 'put it on the element itself, not inside the pseudo block' });
                 continue;
               }
               srule.decls.push({ ...r, line: d.line });
@@ -1409,7 +1473,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           break;
         }
         case 'raw': {
-          // v0.8.0 — verbatim CSS escape hatch (@font-face, @keyframes,
+          // v0.8.0 - verbatim CSS escape hatch (@font-face, @keyframes,
           // @supports, @import, @property…). The parser captured the body
           // untouched; it rides the same document stylesheet as the
           // pseudo-element rules and survives `dssl build` verbatim.
@@ -1445,23 +1509,23 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   function flush(sub, ctx, line) {
     if (!sub.decls.length) return;
     if (!ctx.sel) {
-      errors.push({ file, line, message: 'declarations must live inside a selector', hint: 'top-level blocks are tokens, behavior, motion, @layer, @media… — or a selector like .card' });
+      errors.push({ file, line, message: 'declarations must live inside a selector', hint: 'top-level blocks are tokens, behavior, motion, @layer, @media… - or a selector like .card' });
       return;
     }
-    // v0.5.0 — the pseudo-element trap fix. A full selector like `.card::before`
+    // v0.5.0 - the pseudo-element trap fix. A full selector like `.card::before`
     // used to compile ok and then match NOTHING: inline styles can never reach
     // pseudo-elements. Now the selector is split into element + pseudo halves
-    // and the rule rides the shadow-CSS pipeline — exactly what the nested
+    // and the rule rides the shadow-CSS pipeline - exactly what the nested
     // form (`.card { ::before { } }`) always did. Both forms are now one thing.
     const ps = analyzePseudo(ctx.sel);
     if (ps.mode === 'all') {
       // parity with the nested path: bare `content:` becomes content: ""
-      // v0.5.0 — and engine-native properties fail loud here too (see the
+      // v0.5.0 - and engine-native properties fail loud here too (see the
       // nested pseudo path): no DOM handle means no nudge, animate or stack.
       const decls = [];
       for (const d of sub.decls) {
         if (d.prop && d.prop.startsWith('@')) {
-          errors.push({ file, line, message: `"${d.prop}" is engine-native and has no meaning on ::${ps.parts[0].pseudo.split(/[\s:(]/)[0]} — a pseudo-element has no DOM handle`, hint: 'put it on the element itself, not inside the pseudo rule' });
+          errors.push({ file, line, message: `"${d.prop}" is engine-native and has no meaning on ::${ps.parts[0].pseudo.split(/[\s:(]/)[0]} - a pseudo-element has no DOM handle`, hint: 'put it on the element itself, not inside the pseudo rule' });
           continue;
         }
         decls.push(d.prop === 'content' && d.value === '' ? { ...d, value: '""' } : d);
@@ -1480,7 +1544,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           errors.push({
             file, line,
             message: '::slotted() only exists inside a shadow tree, and DSSL styles the light DOM',
-            hint: 'style the slotted element itself with a normal selector — it IS reachable from the page',
+            hint: 'style the slotted element itself with a normal selector - it IS reachable from the page',
           });
           continue;
         }
@@ -1492,7 +1556,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           });
           continue;
         }
-        // v0.5.0 — parity with the nested path: if every declaration was
+        // v0.5.0 - parity with the nested path: if every declaration was
         // rejected (engine-native props, bad values), emit NOTHING rather
         // than an empty ghost rule that matches and styles zero things.
         if (!decls.length) continue;
@@ -1505,9 +1569,25 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       return;
     }
     if (ps.mode === 'mixed') {
-      errors.push({ file, line, message: `selector list mixes pseudo-element and plain selectors: "${ctx.sel}"`, hint: 'split it into two rules — one for the pseudo-element, one for the rest' });
+      errors.push({ file, line, message: `selector list mixes pseudo-element and plain selectors: "${ctx.sel}"`, hint: 'split it into two rules - one for the pseudo-element, one for the rest' });
       return;
     }
+    // 0.9.0: slider. One description becomes the base decls on the input (put FIRST so the
+    // author's own declarations in the same rule win) and one shadow rule per vendor pseudo.
+    const sliderDecl = sub.decls.find((d) => d.prop === '@slider');
+    if (sliderDecl && sliderDecl.value) {
+      const css = sliderCss(sliderDecl.value);
+      sub.decls.unshift(...css.base.map((d) => ({ ...d, line })));
+      for (const part of splitTopLevel(ctx.sel)) {
+        for (const sh of css.shadow) {
+          shadowRules.push({
+            id: ruleId++, sel: part, pseudo: sh.pseudo,
+            media: ctx.media, signals: ctx.signals, containers: ctx.containers,
+            layer: ctx.layer, order: order++, decls: sh.decls.map((d) => ({ ...d, line })), file, line,
+          });
+        }
+      }
+    }
     warnDisplayClash(sub.decls);
     rules.push({
       id: ruleId++, sel: ctx.sel, media: ctx.media, signals: ctx.signals,
@@ -1517,15 +1597,15 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
     });
   }
 
-  /* v0.7.0 — the ordering linter. Within one rule, later wins; that is the
+  /* v0.7.0 - the ordering linter. Within one rule, later wins; that is the
    * whole cascade model. But "column: gap 2" quietly expanding into
    * display: flex after an explicit "display: none" reads like a menu
-   * toggle and behaves like a bug report — a real reviewer lost an evening
+   * toggle and behaves like a bug report - a real reviewer lost an evening
    * to exactly this ("their own source comments warn about this, but it
    * should be a compiler warning, not a comment"). Agreed. When a
    * shorthand's expansion clobbers an explicit display written earlier in
    * the SAME rule, say so at compile time. Cross-rule overrides are the
-   * documented cascade at work, not an accident — no warning there. */
+   * documented cascade at work, not an accident - no warning there. */
   function warnDisplayClash(decls) {
     let explicit = null;
     for (const d of decls) {
@@ -1534,7 +1614,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       if (explicit && explicit.value !== d.value && warnings.length < 400) {
         warnings.push({
           file, line: d.line,
-          message: `"${d.via}:" expands to display: ${d.value}, which overrides the earlier "display: ${explicit.value}" (line ${explicit.line}) in the same rule — later wins, so the earlier one is dead`,
+          message: `"${d.via}:" expands to display: ${d.value}, which overrides the earlier "display: ${explicit.value}" (line ${explicit.line}) in the same rule - later wins, so the earlier one is dead`,
           hint: `if the override is intended, delete the dead line; otherwise put "${d.via}:" first, or move the display you want to win AFTER it`,
         });
       }
@@ -1557,7 +1637,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           errors.push({
             file, line: d.line,
             message: `unknown motion "${d.value.motion}"`,
-            hint: didYouMean(d.value.motion, Object.keys(motions)) || `define it first:  motion ${d.value.motion} { from { } to { } }  — then "animate: ${d.value.motion} 400" runs it`,
+            hint: didYouMean(d.value.motion, Object.keys(motions)) || `define it first:  motion ${d.value.motion} { from { } to { } }  - then "animate: ${d.value.motion} 400" runs it`,
           });
           d.value.broken = true;
         } else {
@@ -1565,7 +1645,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           d.value.essential = m.essential;
         }
       }
-      // v0.8.0 — the animation shorthand is CSS passthrough, so a motion
+      // v0.8.0 - the animation shorthand is CSS passthrough, so a motion
       // name that matches nothing used to be a SILENT no-op (no @keyframes
       // can exist in DSSL). Warn with the whole story; if the keyframes come
       // from raw { } or another stylesheet, the warning says it can be ignored.
@@ -1575,15 +1655,15 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
         if (words.length && !named) {
           warnings.push({
             file, line: d.line,
-            message: `animation "${d.value}" references no motion defined in this sheet — it will not run`,
-            hint: `motions are defined with  motion name { from { } to { } }  and run with  animate: name 400  — @keyframes does not exist in DSSL; raw { } can carry verbatim keyframes`,
+            message: `animation "${d.value}" references no motion defined in this sheet - it will not run`,
+            hint: `motions are defined with  motion name { from { } to { } }  and run with  animate: name 400  - @keyframes does not exist in DSSL; raw { } can carry verbatim keyframes`,
           });
         }
       }
     }
   }
 
-  // v0.8.0 — pre-parse EVERY motion (not just referenced ones) so the static
+  // v0.8.0 - pre-parse EVERY motion (not just referenced ones) so the static
   // emitter can turn the whole motion vocabulary into real @keyframes.
   const motionFrames = {};
   for (const name of Object.keys(motions)) {
@@ -1591,6 +1671,9 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
     if (m && m.frames.length) motionFrames[name] = m;
   }
 
+  // 0.9.0: the lint pass. Warnings only, so ok stays ok; `dssl check --strict` makes them fatal.
+  try { warnings.push(...lintRules({ rules, tokenMap, file })); } catch { /* a lint bug must never break a compile */ }
+
   const mediaQueries = new Set();
   for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
 
@@ -1603,10 +1686,10 @@ function combine(parent, child) {
   return parent + ' ' + child;
 }
 
-/* v0.5.0 — where does a selector carry a pseudo-element?
- *   'none'  — plain selector, inline-style path
- *   'all'   — every comma-part has one: { parts: [{ el, pseudo }] } → shadow CSS
- *   'mixed' — some parts have one, some don't → loud error (split the list)
+/* v0.5.0 - where does a selector carry a pseudo-element?
+ *   'none'  - plain selector, inline-style path
+ *   'all'   - every comma-part has one: { parts: [{ el, pseudo }] } → shadow CSS
+ *   'mixed' - some parts have one, some don't → loud error (split the list)
  * The `::` scan is string- and paren-aware so [data-x="::a"] can't false-hit. */
 function analyzePseudo(sel) {
   // top-level comma split

dssl-vscode/lib/engine/slider.js

@@ -0,0 +1,250 @@
+/* =========================================================================
+ * DSSL: slider.js
+ *
+ *   input[type=range] {
+ *     slider: track 6 color.line radius full, fill color.accent,
+ *             thumb 24 color.paper shape circle, ring 3 color.accent,
+ *             glow color.accent 14, ticks 10 color.muted
+ *   }
+ *
+ * A range input is styled through vendor pseudo-elements, and every engine has
+ * its own: ::-webkit-slider-runnable-track and ::-webkit-slider-thumb for
+ * Chrome, Edge, Safari and Opera, ::-moz-range-track, ::-moz-range-thumb and
+ * ::-moz-range-progress for Firefox. Writing both sets by hand is the pain.
+ * `slider:` writes both from one description.
+ *
+ * It is plain CSS, with one small helper: the filled part of the track (and
+ * the coloured bars of a graph) follow the value, which CSS cannot know, so
+ * the engine keeps --dssl-p (the value as 0..1) up to date on the input.
+ *
+ * Clauses, comma separated:
+ *   track <height> [color] [radius <n>|full]
+ *   fill <color> | fill none
+ *   thumb <size> [color]
+ *   shape circle | square | diamond | pill | bar
+ *   ring <width> <color>              a border around the thumb
+ *   glow <color> <radius>             a soft light around the thumb
+ *   ticks <count> [color] [length]    little marks along the track
+ *   graph <v1> <v2> ...               bars (0 to 100) behind the track, a histogram slider
+ *   graph-height <px>   graph-gap <px>
+ *
+ * Pure: no DOM.
+ * ========================================================================= */
+
+import { splitWords } from './texture.js';
+
+export const SLIDER_CLAUSES = {
+  track: 'track [height] [color] [radius <n>|full]',
+  fill: 'fill <color> | fill none',
+  thumb: 'thumb <size> [color]',
+  shape: 'shape circle | square | diamond | pill | bar',
+  ring: 'ring <width> <color>',
+  glow: 'glow <color> <radius>',
+  ticks: 'ticks <count> [color] [length]',
+  graph: 'graph <v1> <v2> ... (each 0 to 100)',
+  'graph-height': 'graph-height <px>',
+  'graph-gap': 'graph-gap <px>',
+};
+export const THUMB_SHAPES = ['circle', 'square', 'diamond', 'pill', 'bar'];
+
+function splitCommas(s) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of s) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+const isNum = (w) => w !== undefined && w !== '' && !Number.isNaN(Number(w));
+
+/**
+ * hooks: { error(msg, hint), color(word) -> css | null, suggest(word, list) -> string | null }
+ * Returns a spec object, or null when something was wrong.
+ */
+export function parseSlider(value, hooks) {
+  const text = String(value || '').trim();
+  if (!text) { hooks.error('slider needs a description', 'e.g. slider: track 6 color.line, fill color.accent, thumb 22 color.accent'); return null; }
+  const spec = { track: { h: 6, color: 'var(--dssl-color-line)', radius: 'full' }, fill: 'var(--dssl-color-accent)', thumb: { size: 22, color: 'var(--dssl-color-accent)' }, shape: 'circle', ring: null, glow: null, ticks: null, graph: null, graphHeight: 40, graphGap: 2 };
+  const bad = (m, h) => { hooks.error(m, h); return null; };
+  const col = (w) => hooks.color(w);
+
+  for (const clause of splitCommas(text)) {
+    const w = splitWords(clause);
+    const head = w[0];
+    if (!(head in SLIDER_CLAUSES)) {
+      return bad(`unknown slider setting "${head}"`, hooks.suggest(head, Object.keys(SLIDER_CLAUSES)) || `settings: ${Object.keys(SLIDER_CLAUSES).join(', ')}`);
+    }
+    const rest = w.slice(1);
+    // each clause reports how many words it understood; anything left over is a mistake, not noise
+    let used = rest.length;
+    if (head === 'track') {
+      // any order: a number is the height, "radius <n>|full" the corners, anything else a colour
+      let i = 0;
+      while (i < rest.length) {
+        const x = rest[i];
+        if (x === 'radius') {
+          const r = rest[i + 1];
+          if (r === 'full') spec.track.radius = 'full';
+          else if (isNum(r)) spec.track.radius = Number(r);
+          else return bad('track radius needs a number or "full"', SLIDER_CLAUSES.track);
+          i += 2;
+        } else if (isNum(x)) { spec.track.h = Number(x); i++; }
+        else { const c = col(x); if (c === null) return null; spec.track.color = c; i++; }
+      }
+    } else if (head === 'fill') {
+      used = 1;
+      if (rest[0] === 'none') spec.fill = null;
+      else { const c = col(rest[0]); if (c === null) return null; spec.fill = c; }
+    } else if (head === 'thumb') {
+      if (!isNum(rest[0])) return bad('thumb needs a size in px', SLIDER_CLAUSES.thumb);
+      spec.thumb.size = Number(rest[0]);
+      used = 1;
+      if (rest[1]) { used = 2; const c = col(rest[1]); if (c === null) return null; spec.thumb.color = c; }
+    } else if (head === 'shape') {
+      if (!THUMB_SHAPES.includes(rest[0])) return bad(`unknown thumb shape "${rest[0] ?? ''}"`, hooks.suggest(rest[0] || '', THUMB_SHAPES) || `use one of: ${THUMB_SHAPES.join(', ')}`);
+      spec.shape = rest[0];
+      used = 1;
+    } else if (head === 'ring') {
+      if (!isNum(rest[0]) || !rest[1]) return bad('ring needs a width and a colour', SLIDER_CLAUSES.ring);
+      const c = col(rest[1]); if (c === null) return null;
+      spec.ring = { w: Number(rest[0]), color: c };
+      used = 2;
+    } else if (head === 'glow') {
+      if (!rest[0]) return bad('glow needs a colour and a radius', SLIDER_CLAUSES.glow);
+      const c = col(rest[0]); if (c === null) return null;
+      spec.glow = { color: c, r: isNum(rest[1]) ? Number(rest[1]) : 12 };
+      used = isNum(rest[1]) ? 2 : 1;
+    } else if (head === 'ticks') {
+      if (!isNum(rest[0]) || Number(rest[0]) < 2) return bad('ticks needs a count of at least 2', SLIDER_CLAUSES.ticks);
+      let color = 'var(--dssl-color-muted)', len = 6;
+      for (const x of rest.slice(1)) { if (isNum(x)) len = Number(x); else { const c = col(x); if (c === null) return null; color = c; } }
+      spec.ticks = { n: Math.round(Number(rest[0])), color, len };
+    } else if (head === 'graph') {
+      const vals = rest.map(Number);
+      if (vals.length < 2 || vals.some((n) => Number.isNaN(n))) return bad('graph needs at least two numbers', SLIDER_CLAUSES.graph);
+      if (vals.some((n) => n < 0 || n > 100)) return bad('graph values are 0 to 100', SLIDER_CLAUSES.graph);
+      if (vals.length > 120) return bad('graph is limited to 120 bars', null);
+      spec.graph = vals;
+    } else if (head === 'graph-height') {
+      if (!isNum(rest[0]) || Number(rest[0]) < 8) return bad('graph-height needs a number of px, at least 8', null);
+      spec.graphHeight = Number(rest[0]);
+      used = 1;
+    } else if (head === 'graph-gap') {
+      if (!isNum(rest[0]) || Number(rest[0]) < 0) return bad('graph-gap needs a number of px', null);
+      spec.graphGap = Number(rest[0]);
+      used = 1;
+    }
+    if (used < rest.length) {
+      return bad(`unexpected "${rest.slice(used).join(' ')}" in the ${head} setting`, `separate settings with commas, e.g. thumb 16 #fff, shape bar. ${SLIDER_CLAUSES[head]}`);
+    }
+  }
+  return spec;
+}
+
+const f = (n) => String(+Number(n).toFixed(2));
+
+/**
+ * Build the CSS for a parsed slider.
+ * Returns { base: [{prop,value}], shadow: [{pseudo, decls:[{prop,value}]}] }
+ * `base` goes on the element itself, `shadow` are the vendor pseudo-element rules.
+ */
+export function sliderCss(spec) {
+  const T = spec.track.h;
+  const hasGraph = !!spec.graph;
+  const G = spec.graphHeight;
+  const trackH = hasGraph ? G : T;
+  const S = spec.thumb.size;
+  // thumb box by shape
+  let tw = S, th = S, tr = '0', rot = '';
+  if (spec.shape === 'circle') tr = '50%';
+  else if (spec.shape === 'square') tr = `${f(Math.min(6, S / 4))}px`;
+  else if (spec.shape === 'diamond') { tr = '2px'; rot = 'rotate(45deg)'; tw = th = S * 0.82; }
+  else if (spec.shape === 'pill') { tw = S * 0.7; th = S * 1.3; tr = '999px'; }
+  else if (spec.shape === 'bar') { tw = Math.max(4, S * 0.25); th = hasGraph ? G + 6 : S * 1.4; tr = '2px'; }
+  const ringW = spec.ring ? spec.ring.w : 0;
+  // a fully rounded track would clip a graph's bars into a semicircle, so graphs default to small corners
+  const trackRadius = spec.track.radius === 'full' ? (hasGraph ? '4px' : `${f(trackH / 2)}px`) : `${f(spec.track.radius)}px`;
+  const inputH = Math.max(trackH, th) + (spec.ticks ? spec.ticks.len + 2 : 0);
+
+  const p = 'var(--dssl-p, 0.5)';
+  // where the thumb centre is, as a length along the track
+  const along = `calc(${f(tw / 2)}px + ${p} * (100% - ${f(tw)}px))`;
+  const trackColor = spec.track.color;
+  const fill = spec.fill;
+
+  // ---- the track's background
+  const layers = []; // each: [image, size, position]
+  if (hasGraph) {
+    const n = spec.graph.length;
+    const lineH = Math.max(2, T);
+    const usable = G - lineH - 2;
+    spec.graph.forEach((v, i) => {
+      const x = n === 1 ? 50 : (i / (n - 1)) * 100;
+      const bw = `calc((100% - ${f((n - 1) * spec.graphGap)}px) / ${n})`;
+      const bh = Math.max(1, (usable * v) / 100);
+      const mixer = fill
+        ? `color-mix(in srgb, ${fill} calc(clamp(0, (${p} - ${f((i + 0.5) / n)}) * 1000, 1) * 100%), ${trackColor})`
+        : trackColor;
+      layers.push([`linear-gradient(${mixer}, ${mixer})`, `${bw} ${f(bh)}px`, `${f(x)}% calc(100% - ${f(lineH + 2)}px)`]);
+    });
+    const line = fill ? `linear-gradient(to right, ${fill} 0, ${fill} ${along}, ${trackColor} ${along}, ${trackColor} 100%)` : `linear-gradient(${trackColor}, ${trackColor})`;
+    layers.push([line, `100% ${f(lineH)}px`, '0 100%']);
+  } else if (fill) {
+    layers.push([`linear-gradient(to right, ${fill} 0, ${fill} ${along}, ${trackColor} ${along}, ${trackColor} 100%)`, '100% 100%', '0 0']);
+  } else {
+    layers.push([`linear-gradient(${trackColor}, ${trackColor})`, '100% 100%', '0 0']);
+  }
+  const trackBg = [
+    { prop: 'background-image', value: layers.map((l) => l[0]).join(', ') },
+    { prop: 'background-size', value: layers.map((l) => l[1]).join(', ') },
+    { prop: 'background-position', value: layers.map((l) => l[2]).join(', ') },
+    { prop: 'background-repeat', value: 'no-repeat' },
+  ];
+
+  const thumbCommon = [
+    { prop: 'box-sizing', value: 'border-box' },
+    { prop: 'width', value: `${f(tw)}px` },
+    { prop: 'height', value: `${f(th)}px` },
+    { prop: 'background', value: spec.thumb.color },
+    { prop: 'border-radius', value: tr },
+    { prop: 'border', value: ringW ? `${f(ringW)}px solid ${spec.ring.color}` : '0' },
+    { prop: 'cursor', value: 'pointer' },
+  ];
+  const glow = spec.glow ? [{ prop: 'box-shadow', value: `0 0 ${f(spec.glow.r)}px ${f(spec.glow.r / 3)}px ${spec.glow.color}` }] : [];
+  if (rot) thumbCommon.push({ prop: 'transform', value: rot });
+
+  const base = [
+    { prop: 'appearance', value: 'none' },
+    { prop: '-webkit-appearance', value: 'none' },
+    { prop: 'background-color', value: 'transparent' },
+    { prop: 'margin', value: '0' },
+    { prop: 'width', value: '100%' },
+    { prop: 'height', value: `${f(inputH)}px` },
+    { prop: 'cursor', value: 'pointer' },
+  ];
+  if (spec.ticks) {
+    const n = spec.ticks.n;
+    base.push(
+      { prop: 'background-image', value: `repeating-linear-gradient(to right, ${spec.ticks.color} 0, ${spec.ticks.color} 1px, transparent 1px, transparent calc((100% - 1px) / ${n - 1}))` },
+      { prop: 'background-size', value: `calc(100% - ${f(tw)}px) ${f(spec.ticks.len)}px` },
+      { prop: 'background-position', value: `center bottom` },
+      { prop: 'background-repeat', value: 'no-repeat' },
+    );
+  }
+
+  const shadow = [
+    { pseudo: '-webkit-slider-runnable-track', decls: [{ prop: 'height', value: `${f(trackH)}px` }, { prop: 'border-radius', value: trackRadius }, ...trackBg] },
+    { pseudo: '-webkit-slider-thumb', decls: [
+      { prop: '-webkit-appearance', value: 'none' }, { prop: 'appearance', value: 'none' }, ...thumbCommon, ...glow,
+      { prop: 'margin-top', value: `${f((trackH - th) / 2)}px` },
+    ] },
+    { pseudo: '-moz-range-track', decls: [{ prop: 'height', value: `${f(trackH)}px` }, { prop: 'border-radius', value: trackRadius }, ...trackBg] },
+    { pseudo: '-moz-range-thumb', decls: [...thumbCommon, ...glow] },
+    // Firefox can fill natively, but we paint the fill ourselves (above) so both engines match
+    { pseudo: '-moz-range-progress', decls: [{ prop: 'background', value: 'transparent' }, { prop: 'height', value: `${f(trackH)}px` }] },
+  ];
+  return { base, shadow };
+}

dssl-vscode/lib/engine/texture.js

@@ -0,0 +1,547 @@
+/* =========================================================================
+ * DSSL: texture.js
+ *
+ *   .card  { texture: paper }
+ *   .metal { texture: brushed intensity 0.6 color2 #cfd8e3 }
+ *   .mine  { texture: noise scale 3 octaves 4 color #2a1a0a color2 #c08040 blend multiply }
+ *
+ * A texture is a LAYER of generated image that sits on top of an element's own
+ * background. There are generators (noise, bump, lines, dots, grid, checker,
+ * weave, carbon, waves, hex) and settings (scale, intensity, contrast, color,
+ * color2, blend, ...). Every named preset below is nothing more than a stored
+ * combination of those, so anything a preset does you can write yourself, and
+ * you can name your own with a `behavior` block.
+ *
+ * This file is pure: no DOM. parseTexture() runs in the compiler and checks the
+ * words; buildTexture() turns a parsed layer into CSS background pieces and is
+ * given a function that resolves colour words (the engine passes one that
+ * understands the page's tokens; tests pass parseColor).
+ * ========================================================================= */
+
+import { parseColor, withAlpha, toRgba, mix } from './color.js';
+
+const mix2 = (x, y, t) => mix(x, y, t, 'srgb');
+
+/* ------------------------------------------------------------------ *
+ * vocabulary
+ * ------------------------------------------------------------------ */
+
+export const BLEND_MODES = ['normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-burn', 'color-dodge', 'darken', 'lighten', 'difference', 'exclusion'];
+
+export const GENERATORS = ['noise', 'bump', 'lines', 'dots', 'grid', 'checker', 'weave', 'carbon', 'waves', 'hex'];
+
+/** the settings a texture layer understands, with how many value words each takes */
+export const TEXTURE_KEYS = {
+  scale:     { words: 1, kind: 'number', min: 0.1, max: 2000, doc: 'feature size in px: how big the grains, cells or lines are' },
+  intensity: { words: 1, kind: 'number', min: 0, max: 2, doc: 'how strong the layer is, 0 to 1 (more than 1 over-drives it)' },
+  contrast:  { words: 1, kind: 'number', min: 0, max: 40, doc: 'noise contrast: 1 is as generated, higher is harsher' },
+  threshold: { words: 1, kind: 'number', min: 0, max: 1, doc: 'noise cut-off: only values above it show (glitter uses a high one)' },
+  contour:   { words: 1, kind: 'number', min: 0.005, max: 0.5, doc: 'draw thin lines where the noise crosses the threshold, instead of a plain cut: veins, rings, contours' },
+  octaves:   { words: 1, kind: 'number', min: 1, max: 8, int: true, doc: 'noise detail layers, 1 is smooth, 5 is rough' },
+  seed:      { words: 1, kind: 'number', min: 0, max: 99999, int: true, doc: 'a different random pattern with the same look' },
+  stretch:   { words: 2, kind: 'numbers', min: 0.1, max: 200, doc: 'stretch noise features along x and y, e.g. stretch 40 1 for wood grain' },
+  depth:     { words: 1, kind: 'number', min: 0, max: 30, doc: 'bump height: how deep the relief looks' },
+  light:     { words: 1, kind: 'number', min: -360, max: 360, doc: 'bump light direction in degrees' },
+  angle:     { words: 1, kind: 'number', min: -360, max: 360, doc: 'direction of lines and patterns, in degrees' },
+  thickness: { words: 1, kind: 'number', min: 0.1, max: 500, doc: 'line or grid-line width in px' },
+  radius:    { words: 1, kind: 'number', min: 0.02, max: 1, doc: 'dot size as a fraction of the cell' },
+  softness:  { words: 1, kind: 'number', min: 0, max: 1, doc: 'how soft the edges of dots and lines are' },
+  animate:   { words: 1, kind: 'number', min: 0, max: 60000, doc: 'milliseconds per shimmer step (film-grain flicker); 0 is still' },
+  type:      { words: 1, kind: 'word', values: ['fractal', 'turbulence'], doc: 'noise flavour: fractal is clouds, turbulence is veins' },
+  blend:     { words: 1, kind: 'word', values: BLEND_MODES, doc: 'how the layer mixes with what is under it' },
+  color:     { words: 1, kind: 'color', doc: 'the main colour (dark end of noise, ink of lines and dots)' },
+  color2:    { words: 1, kind: 'color', doc: 'the second colour (light end of noise, background cell of patterns)' },
+  invert:    { words: 0, kind: 'flag', doc: 'swap the two colours' },
+};
+
+/* ------------------------------------------------------------------ *
+ * presets: a name is a stored set of settings, nothing more
+ *   layers: one or more { gen, ...settings }. First entries sit on top.
+ * ------------------------------------------------------------------ */
+
+const K = (r, g, b, a = 1) => `rgba(${r},${g},${b},${a})`;
+
+export const PRESETS = {
+  // ---- grains and noise
+  grain:      { doc: 'fine film grain, neutral on any colour', mask: true,
+    layers: [{ gen: 'noise', scale: 1.1, octaves: 2, contrast: 1.7, intensity: 0.5, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  noise:      { doc: 'coarser static', mask: true,
+    layers: [{ gen: 'noise', scale: 2.6, octaves: 3, contrast: 1.9, intensity: 0.5, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  rough:      { doc: 'gritty relief, like a rough cast wall', mask: true,
+    layers: [{ gen: 'bump', scale: 3, octaves: 4, depth: 3.4, light: 135, intensity: 0.75, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  sand:       { doc: 'warm fine sand grains', mask: true,
+    layers: [{ gen: 'bump', scale: 1.5, octaves: 3, depth: 2.2, light: 130, intensity: 0.7, color: '#5a4426', color2: '#fff1d0', blend: 'overlay' }] },
+  paper:      { doc: 'soft paper fibre with a little unevenness',
+    layers: [
+      { gen: 'noise', scale: 1.5, octaves: 4, contrast: 1.2, intensity: 0.3, color: '#000', color2: '#fff', blend: 'overlay' },
+      { gen: 'noise', scale: 120, octaves: 3, contrast: 1.3, intensity: 0.25, color: '#000', color2: '#fff', blend: 'soft-light', seed: 7 },
+    ] },
+  cloud:      { doc: 'big soft cloudy variation', mask: true,
+    layers: [{ gen: 'noise', scale: 90, octaves: 5, contrast: 1.6, intensity: 0.7, color: '#000', color2: '#fff', blend: 'soft-light' }] },
+  concrete:   { doc: 'pitted concrete',
+    layers: [
+      { gen: 'bump', scale: 6, octaves: 5, depth: 2.6, light: 135, intensity: 0.7, color: '#000', color2: '#fff', blend: 'overlay' },
+      { gen: 'noise', scale: 140, octaves: 4, contrast: 1.5, intensity: 0.45, color: '#000', color2: '#fff', blend: 'soft-light', seed: 3 },
+    ] },
+  stone:      { doc: 'carved stone with broad relief',
+    layers: [{ gen: 'bump', scale: 26, octaves: 5, depth: 2.4, light: 125, intensity: 0.75, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  crumpled:   { doc: 'crumpled foil or paper, big creases',
+    layers: [{ gen: 'bump', scale: 34, octaves: 4, depth: 4, light: 135, intensity: 0.8, color: '#000', color2: '#fff', blend: 'overlay', seed: 11 }] },
+  glitter:    { doc: 'sparse bright sparkles', mask: true,
+    layers: [{ gen: 'noise', scale: 1.2, octaves: 1, contrast: 16, threshold: 0.66, intensity: 1, color: 'rgba(255,255,255,0)', color2: '#fff', blend: 'screen', seed: 5 }] },
+  frost:      { doc: 'fine icy crystals',
+    layers: [{ gen: 'bump', scale: 2.2, octaves: 4, depth: 3.2, light: 140, intensity: 0.95, color: 'rgba(160,210,255,0)', color2: '#ffffff', blend: 'screen' }] },
+  // ---- natural, stretched
+  marble:     { doc: 'veined marble',
+    layers: [
+      { gen: 'noise', scale: 120, octaves: 5, contour: 0.035, threshold: 0.5, intensity: 0.9, color: '#6c6877', color2: 'rgba(247,245,240,0)', blend: 'multiply', seed: 4 },
+      { gen: 'noise', scale: 120, octaves: 5, contour: 0.16, threshold: 0.5, intensity: 0.25, color: '#9b97a6', color2: 'rgba(247,245,240,0)', blend: 'multiply', seed: 4 },
+      { gen: 'noise', scale: 200, octaves: 3, contrast: 1.4, intensity: 0.3, color: '#cfc9c0', color2: '#fbfaf7', blend: 'soft-light', seed: 21 },
+    ] },
+  wood:       { doc: 'long wood grain, along x (use angle 90 for vertical)',
+    layers: [{ gen: 'noise', scale: 4, octaves: 3, contrast: 1.8, stretch: [40, 1], intensity: 1, color: '#7a4b24', color2: '#c99a62', blend: 'multiply' }] },
+  bark:       { doc: 'rough vertical bark',
+    layers: [{ gen: 'bump', scale: 10, octaves: 4, depth: 5, stretch: [1, 6], light: 150, intensity: 0.8, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  leather:    { doc: 'pebbled leather',
+    layers: [{ gen: 'bump', scale: 5, octaves: 2, depth: 4.2, light: 120, intensity: 0.85, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  brushed:    { doc: 'brushed metal, fine lines along x',
+    layers: [{ gen: 'noise', scale: 1.2, octaves: 2, contrast: 1.5, stretch: [60, 1], intensity: 0.5, color: '#000', color2: '#fff', blend: 'overlay' }] },
+  // ---- woven
+  canvas:     { doc: 'artist canvas weave',
+    layers: [
+      { gen: 'weave', scale: 3, thickness: 1, intensity: 0.5, color: '#000', blend: 'multiply' },
+      { gen: 'noise', scale: 1.4, octaves: 3, contrast: 1.3, intensity: 0.3, color: '#000', color2: '#fff', blend: 'overlay' },
+    ] },
+  linen:      { doc: 'loose linen weave with slubs',
+    layers: [
+      { gen: 'weave', scale: 4, thickness: 1.2, intensity: 0.4, color: '#5a4a32', blend: 'multiply' },
+      { gen: 'noise', scale: 80, octaves: 3, contrast: 1.4, stretch: [8, 1], intensity: 0.25, color: '#000', color2: '#fff', blend: 'soft-light', seed: 9 },
+    ] },
+  denim:      { doc: 'diagonal twill, blue by default',
+    layers: [
+      { gen: 'lines', angle: 45, scale: 3, thickness: 1.4, intensity: 0.45, color: '#0d2147', blend: 'multiply' },
+      { gen: 'noise', scale: 1.3, octaves: 3, contrast: 1.4, intensity: 0.3, color: '#000', color2: '#fff', blend: 'overlay', seed: 2 },
+    ] },
+  carbon:     { doc: 'carbon fibre twill',
+    layers: [{ gen: 'carbon', scale: 20, intensity: 1, color: '#151515', color2: '#262626', blend: 'normal' }] },
+  // ---- patterns
+  scanlines:  { doc: 'CRT scanlines',
+    layers: [{ gen: 'lines', angle: 0, scale: 4, thickness: 2, intensity: 0.28, color: '#000', blend: 'normal' }] },
+  halftone:   { doc: 'newsprint dots',
+    layers: [{ gen: 'dots', scale: 8, radius: 0.2, softness: 0.2, intensity: 0.55, color: '#000', blend: 'multiply', stagger: true }] },
+  dots:       { doc: 'a plain dot grid',
+    layers: [{ gen: 'dots', scale: 14, radius: 0.16, softness: 0.05, intensity: 0.35, color: '#000', blend: 'normal' }] },
+  lines:      { doc: 'diagonal hairlines',
+    layers: [{ gen: 'lines', angle: 45, scale: 8, thickness: 1, intensity: 0.3, color: '#000', blend: 'normal' }] },
+  grid:       { doc: 'a square grid, like graph paper',
+    layers: [{ gen: 'grid', scale: 24, thickness: 1, intensity: 0.25, color: '#000', blend: 'normal' }] },
+  checker:    { doc: 'checkerboard',
+    layers: [{ gen: 'checker', scale: 24, intensity: 0.12, color: '#000', blend: 'normal' }] },
+  crosshatch: { doc: 'crossed hairlines',
+    layers: [
+      { gen: 'lines', angle: 45, scale: 6, thickness: 1, intensity: 0.28, color: '#000', blend: 'normal' },
+      { gen: 'lines', angle: -45, scale: 6, thickness: 1, intensity: 0.28, color: '#000', blend: 'normal' },
+    ] },
+  stripes:    { doc: 'bold diagonal stripes',
+    layers: [{ gen: 'lines', angle: 45, scale: 32, thickness: 16, intensity: 0.12, color: '#000', blend: 'normal' }] },
+  waves:      { doc: 'soft repeating waves',
+    layers: [{ gen: 'waves', scale: 40, thickness: 1.2, intensity: 0.3, color: '#000', blend: 'normal' }] },
+  hex:        { doc: 'honeycomb',
+    layers: [{ gen: 'hex', scale: 28, thickness: 1, intensity: 0.28, color: '#000', blend: 'normal' }] },
+};
+
+export const PRESET_NAMES = Object.keys(PRESETS);
+
+/** baseline settings per generator, used when you start from a bare generator name */
+const GEN_DEFAULTS = {
+  noise:   { scale: 3, octaves: 3, contrast: 1.5, intensity: 0.5, color: '#000', color2: '#fff', blend: 'overlay', type: 'fractal' },
+  bump:    { scale: 6, octaves: 4, depth: 3, light: 135, intensity: 0.6, color: '#000', color2: '#fff', blend: 'overlay' },
+  lines:   { scale: 8, thickness: 1, angle: 45, intensity: 0.3, color: '#000', blend: 'normal' },
+  dots:    { scale: 12, radius: 0.2, softness: 0.1, intensity: 0.4, color: '#000', blend: 'normal' },
+  grid:    { scale: 24, thickness: 1, intensity: 0.25, color: '#000', blend: 'normal' },
+  checker: { scale: 24, intensity: 0.15, color: '#000', blend: 'normal' },
+  weave:   { scale: 4, thickness: 1, intensity: 0.4, color: '#000', blend: 'multiply' },
+  carbon:  { scale: 20, intensity: 1, color: '#151515', color2: '#262626', blend: 'normal' },
+  waves:   { scale: 40, thickness: 1.2, intensity: 0.3, color: '#000', blend: 'normal' },
+  hex:     { scale: 28, thickness: 1, intensity: 0.28, color: '#000', blend: 'normal' },
+};
+
+/* ------------------------------------------------------------------ *
+ * parsing (compile time)
+ * ------------------------------------------------------------------ */
+
+/** split on top-level commas ("grain, scanlines" or "rgb(1, 2, 3)" stays whole) */
+function splitCommas(s) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of s) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+/** split on top-level whitespace, keeping rgb(1 2 3) and color.ink/40 as one word */
+export function splitWords(s) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of s.trim()) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (/\s/.test(ch) && depth === 0) { if (cur) out.push(cur); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur) out.push(cur);
+  return out;
+}
+
+/**
+ * Parse the value of `texture:`.
+ *   hooks.error(message, hint)  report a problem
+ *   hooks.color(word)           turn a colour word into the CSS the engine will resolve later
+ *   hooks.suggest(word, list)   did-you-mean
+ * Returns an array of layer specs, [] for `none`, or null when it was invalid.
+ */
+export function parseTexture(value, hooks) {
+  const text = String(value || '').trim();
+  if (!text) { hooks.error('texture needs a name', `try texture: grain, or one of ${PRESET_NAMES.slice(0, 6).join(', ')} ...`); return null; }
+  if (text === 'none') return [];
+  const out = [];
+  for (const part of splitCommas(text)) {
+    const words = splitWords(part);
+    const first = words[0];
+    let base;
+    if (PRESETS[first]) base = PRESETS[first].layers.map((l) => ({ ...l, preset: first }));
+    else if (GENERATORS.includes(first)) base = [{ gen: first, preset: null, ...GEN_DEFAULTS[first] }];
+    else {
+      hooks.error(`unknown texture "${first}"`, hooks.suggest(first, [...PRESET_NAMES, ...GENERATORS]) || `presets: ${PRESET_NAMES.join(', ')}. generators: ${GENERATORS.join(', ')}`);
+      return null;
+    }
+    const over = {};
+    for (let i = 1; i < words.length; i++) {
+      const key = words[i];
+      const def = TEXTURE_KEYS[key];
+      if (!def) {
+        hooks.error(`unknown texture setting "${key}"`, hooks.suggest(key, Object.keys(TEXTURE_KEYS)) || `settings: ${Object.keys(TEXTURE_KEYS).join(', ')}`);
+        return null;
+      }
+      if (def.kind === 'flag') { over[key] = true; continue; }
+      const vals = words.slice(i + 1, i + 1 + def.words);
+      if (vals.length < def.words || vals.some((v) => TEXTURE_KEYS[v])) {
+        hooks.error(`texture setting "${key}" needs ${def.words === 1 ? 'a value' : def.words + ' values'}`, def.doc);
+        return null;
+      }
+      i += def.words;
+      if (def.kind === 'number' || def.kind === 'numbers') {
+        const nums = vals.map((v) => Number(v));
+        if (nums.some((n) => Number.isNaN(n))) { hooks.error(`texture setting "${key}" needs a number, got "${vals.join(' ')}"`, def.doc); return null; }
+        if (nums.some((n) => n < def.min || n > def.max)) { hooks.error(`texture "${key}" must be between ${def.min} and ${def.max}`, def.doc); return null; }
+        over[key] = def.kind === 'numbers' ? nums : (def.int ? Math.round(nums[0]) : nums[0]);
+      } else if (def.kind === 'word') {
+        if (!def.values.includes(vals[0])) {
+          hooks.error(`unknown ${key} "${vals[0]}"`, hooks.suggest(vals[0], def.values) || `use one of: ${def.values.join(', ')}`);
+          return null;
+        }
+        over[key] = vals[0];
+      } else if (def.kind === 'color') {
+        const css = hooks.color(vals[0]);
+        if (css === null) return null;
+        over[key] = css;
+      }
+    }
+    // settings given in a custom texture apply to every layer of a multi-layer preset
+    // (color settings apply to the first layer only when the preset has several, so a
+    // two-layer preset keeps its own second tone)
+    base.forEach((layer, idx) => {
+      const merged = { ...layer };
+      for (const [k, v] of Object.entries(over)) {
+        if ((k === 'color' || k === 'color2') && base.length > 1 && idx > 0) continue;
+        merged[k] = v;
+      }
+      out.push(merged);
+    });
+  }
+  return out;
+}
+
+/* ------------------------------------------------------------------ *
+ * building (run time, in the browser, or in tests)
+ * ------------------------------------------------------------------ */
+
+const svgUrl = (svg) => `url("data:image/svg+xml,${encodeURIComponent(svg).replace(/'/g, '%27')}")`;
+const f = (n, d = 3) => String(+Number(n).toFixed(d));
+const n01 = (x) => Math.max(0, Math.min(1, x));
+
+/** resolve a layer's two colours into rgba objects with intensity applied */
+function layerColors(spec, rc) {
+  let a = rc(spec.color) || parseColor('#000');
+  let b = rc(spec.color2) || (spec.color2 === undefined ? null : parseColor('#fff'));
+  const k = spec.intensity === undefined ? 1 : spec.intensity;
+  if (spec.invert && b) [a, b] = [b, a];
+  const scaleA = (c) => (c ? withAlpha(c, n01(c.a * k)) : null);
+  return { a: scaleA(a), b: scaleA(b), raw: { a, b } };
+}
+
+function noiseFreq(spec) {
+  const base = 1 / Math.max(0.2, spec.scale || 3);
+  const st = spec.stretch || [1, 1];
+  let fx = base / (st[0] || 1), fy = base / (st[1] || 1);
+  if (spec.angle === 90 || spec.angle === -90 || spec.angle === 270) [fx, fy] = [fy, fx];
+  return [Math.max(0.0008, fx), Math.max(0.0008, fy)];
+}
+
+const tileFor = (spec) => {
+  const f2 = noiseFreq(spec);
+  // keep tiles reasonably small, but big enough to hide repetition for coarse noise
+  const feature = 1 / Math.min(f2[0], f2[1]);
+  return Math.round(Math.max(128, Math.min(512, feature * 3)));
+};
+
+/** a lookup table that is 0 right at `level` and rises to 1 by `width` away: contour lines */
+function contourTable(level, width) {
+  const n = 96, out = [];
+  for (let i = 0; i < n; i++) out.push(f(Math.min(1, Math.abs(i / (n - 1) - level) / width), 3));
+  return out.join(' ');
+}
+
+/** noise → contrast curve → two-colour ramp. The workhorse. */
+function buildNoise(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const A = a, B = b || a;
+  const [fx, fy] = noiseFreq(spec);
+  const oct = Math.max(1, Math.round(spec.octaves || 3));
+  const c = spec.contrast === undefined ? 1.5 : spec.contrast;
+  const t = spec.threshold === undefined ? 0.5 : spec.threshold;
+  const off = 0.5 - c * t;
+  const T = tileFor(spec);
+  const ch = (x) => f(x / 255);
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='${T}' height='${T}'>` +
+    `<filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'>` +
+    `<feTurbulence type='${spec.type === 'turbulence' ? 'turbulence' : 'fractalNoise'}' baseFrequency='${f(fx, 5)} ${f(fy, 5)}' numOctaves='${oct}' seed='${spec.seed || 0}' stitchTiles='stitch'/>` +
+    (spec.contour
+      ? `<feColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/>` +
+        `<feComponentTransfer><feFuncR type='table' tableValues='${contourTable(t, spec.contour)}'/><feFuncG type='table' tableValues='${contourTable(t, spec.contour)}'/><feFuncB type='table' tableValues='${contourTable(t, spec.contour)}'/></feComponentTransfer>`
+      : `<feColorMatrix type='matrix' values='${f(c)} 0 0 0 ${f(off)} ${f(c)} 0 0 0 ${f(off)} ${f(c)} 0 0 0 ${f(off)} 0 0 0 0 1'/>`) +
+    `<feColorMatrix type='matrix' values='${f(ch(B.r - A.r))} 0 0 0 ${ch(A.r)} ${f(ch(B.g - A.g))} 0 0 0 ${ch(A.g)} ${f(ch(B.b - A.b))} 0 0 0 ${ch(A.b)} ${f(B.a - A.a)} 0 0 0 ${f(A.a)}'/>` +
+    `</filter><rect width='100%' height='100%' filter='url(#f)'/></svg>`;
+  return [{ image: svgUrl(svg), size: `${T}px ${T}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'overlay', tile: T }];
+}
+
+/**
+ * Noise used as a height map and lit from one side, so it reads as physical
+ * relief. The lighting is a 3x3 directional-derivative convolution with
+ * edgeMode="wrap", which keeps the tile seamless. feDiffuseLighting looks
+ * nicer up close but treats the tile edge specially and leaves a 1px seam.
+ */
+function buildBump(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const A = a, B = b || a;
+  const [fx, fy] = noiseFreq(spec);
+  const oct = Math.max(1, Math.round(spec.octaves || 4));
+  const T = tileFor(spec);
+  const az = ((spec.light === undefined ? 135 : spec.light) * Math.PI) / 180;
+  // relief strength grows slowly with feature size: big features have gentle slopes, but the fine
+  // octaves layered on top keep their steep ones, so a linear rule over-drives anything coarse
+  const m = (spec.depth === undefined ? 3 : spec.depth) * 0.33 * Math.pow(Math.max(0.5, spec.scale || 6), 0.25);
+  const gx = [-1, 0, 1, -2, 0, 2, -1, 0, 1], gy = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
+  const kernel = gx.map((v, i) => f((m * (Math.cos(az) * v + Math.sin(az) * gy[i])) / 4, 4)).join(' ');
+  const ch = (x) => f(x / 255);
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='${T}' height='${T}'>` +
+    `<filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'>` +
+    `<feTurbulence type='fractalNoise' baseFrequency='${f(fx, 5)} ${f(fy, 5)}' numOctaves='${oct}' seed='${spec.seed || 0}' stitchTiles='stitch'/>` +
+    `<feColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/>` +
+    `<feConvolveMatrix order='3' kernelMatrix='${kernel}' divisor='1' bias='0.5' edgeMode='wrap' preserveAlpha='true'/>` +
+    `<feColorMatrix type='matrix' values='${f(ch(B.r - A.r))} 0 0 0 ${ch(A.r)} ${f(ch(B.g - A.g))} 0 0 0 ${ch(A.g)} ${f(ch(B.b - A.b))} 0 0 0 ${ch(A.b)} ${f(B.a - A.a)} 0 0 0 ${f(A.a)}'/>` +
+    `</filter><rect width='100%' height='100%' filter='url(#f)'/></svg>`;
+  return [{ image: svgUrl(svg), size: `${T}px ${T}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'overlay', tile: T }];
+}
+
+function buildLines(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const p = Math.max(1, spec.scale || 8), w = Math.min(p, Math.max(0.2, spec.thickness || 1));
+  const soft = (spec.softness === undefined ? 0.4 : spec.softness) * 1.5;
+  const ink = toRgba(a), bg = b ? toRgba(b) : 'transparent';
+  const ang = spec.angle === undefined ? 45 : spec.angle;
+  const image = `repeating-linear-gradient(${f(-ang, 1)}deg, ${ink} 0, ${ink} ${f(w)}px, ${bg} ${f(w + soft)}px, ${bg} ${f(p)}px)`;
+  return [{ image, size: 'auto', repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: p }];
+}
+
+function buildDots(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const S = Math.max(2, spec.scale || 12), r = (spec.radius === undefined ? 0.2 : spec.radius) * S;
+  const soft = Math.max(0.3, (spec.softness === undefined ? 0.1 : spec.softness) * S);
+  const ink = toRgba(a), bg = b ? toRgba(b) : 'transparent';
+  const dot = `radial-gradient(circle at center, ${ink} 0, ${ink} ${f(Math.max(0, r - soft / 2))}px, ${bg} ${f(r + soft / 2)}px, ${bg} 100%)`;
+  const layers = [{ image: dot, size: `${f(S)}px ${f(S)}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: S }];
+  if (spec.stagger) layers.push({ image: dot, size: `${f(S)}px ${f(S)}px`, repeat: 'repeat', position: `${f(S / 2)}px ${f(S / 2)}px`, blend: spec.blend || 'normal', tile: S });
+  return layers;
+}
+
+function buildGrid(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const S = Math.max(3, spec.scale || 24), w = Math.max(0.3, spec.thickness || 1);
+  const ink = toRgba(a);
+  const blend = spec.blend || 'normal';
+  const out = [
+    { image: `linear-gradient(${ink} ${f(w)}px, transparent 0)`, size: `${f(S)}px ${f(S)}px`, repeat: 'repeat', position: '0 0', blend, tile: S },
+    { image: `linear-gradient(90deg, ${ink} ${f(w)}px, transparent 0)`, size: `${f(S)}px ${f(S)}px`, repeat: 'repeat', position: '0 0', blend, tile: S },
+  ];
+  if (b) out.push({ image: `linear-gradient(${toRgba(b)}, ${toRgba(b)})`, size: 'auto', repeat: 'repeat', position: '0 0', blend, tile: S });
+  return out;
+}
+
+function buildChecker(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const S = Math.max(2, spec.scale || 24);
+  const ink = toRgba(a), bg = b ? toRgba(b) : 'transparent';
+  const image = `conic-gradient(${ink} 25%, ${bg} 0 50%, ${ink} 0 75%, ${bg} 0)`;
+  return [{ image, size: `${f(S * 2)}px ${f(S * 2)}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: S * 2 }];
+}
+
+/** plain-weave threads: horizontal and vertical fine lines */
+function buildWeave(spec, rc) {
+  const { a } = layerColors(spec, rc);
+  const p = Math.max(1.5, spec.scale || 4), w = Math.max(0.4, spec.thickness || 1);
+  const ink = toRgba(a), clear = toRgba(withAlpha(a.r === undefined ? parseColor('#000') : a, 0));
+  const blend = spec.blend || 'multiply';
+  return [
+    { image: `repeating-linear-gradient(0deg, ${ink} 0, ${ink} ${f(w)}px, ${clear} ${f(w + 0.6)}px, ${clear} ${f(p)}px)`, size: 'auto', repeat: 'repeat', position: '0 0', blend, tile: p },
+    { image: `repeating-linear-gradient(90deg, ${ink} 0, ${ink} ${f(w)}px, ${clear} ${f(w + 0.6)}px, ${clear} ${f(p)}px)`, size: 'auto', repeat: 'repeat', position: '0 0', blend, tile: p },
+  ];
+}
+
+/** the classic layered-gradient carbon fibre, recoloured from color and color2 */
+function buildCarbon(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const A = a, B = b || a;
+  const dark = toRgba(A), light = toRgba(B);
+  const mid = toRgba(mix2(A, B, 0.5)), deep = toRgba(mix2(A, parseColor('#000'), 0.25));
+  const S = Math.max(8, spec.scale || 20), h = S / 2, q = S / 4;
+  const blend = spec.blend || 'normal';
+  const sz = `${f(S)}px ${f(S)}px`;
+  const L = (image, size, position) => ({ image, size, repeat: 'repeat', position, blend, tile: S });
+  return [
+    L(`linear-gradient(27deg, ${dark} ${f(q)}px, transparent ${f(q)}px)`, sz, `0 ${f(q)}px`),
+    L(`linear-gradient(207deg, ${dark} ${f(q)}px, transparent ${f(q)}px)`, sz, `${f(h)}px 0`),
+    L(`linear-gradient(27deg, ${light} ${f(q)}px, transparent ${f(q)}px)`, sz, `0 ${f(h)}px`),
+    L(`linear-gradient(207deg, ${light} ${f(q)}px, transparent ${f(q)}px)`, sz, `${f(h)}px ${f(q)}px`),
+    L(`linear-gradient(90deg, ${mid} ${f(h)}px, transparent ${f(h)}px)`, sz, '0 0'),
+    L(`linear-gradient(${light} 25%, ${dark} 25%, ${dark} 50%, transparent 50%, transparent 75%, ${mid} 75%, ${mid})`, sz, '0 0'),
+    L(`linear-gradient(${deep}, ${deep})`, 'auto', '0 0'),
+  ];
+}
+
+function buildWaves(spec, rc) {
+  const { a } = layerColors(spec, rc);
+  const S = Math.max(8, spec.scale || 40), w = Math.max(0.3, spec.thickness || 1.2);
+  const col = toRgba(a);
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${f(S)}' height='${f(S / 2)}' viewBox='0 0 ${f(S)} ${f(S / 2)}'>` +
+    `<path d='M0 ${f(S / 4)} Q ${f(S / 4)} 0 ${f(S / 2)} ${f(S / 4)} T ${f(S)} ${f(S / 4)}' fill='none' stroke='${col}' stroke-width='${f(w)}'/></svg>`;
+  return [{ image: svgUrl(svg), size: `${f(S)}px ${f(S / 2)}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: S }];
+}
+
+function buildHex(spec, rc) {
+  const { a } = layerColors(spec, rc);
+  const W = Math.max(14, spec.scale || 28), k = W / 56;
+  const col = toRgba(a), sw = Math.max(0.3, spec.thickness || 1) / k;
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${f(W)}' height='${f(100 * k)}' viewBox='0 0 56 100'>` +
+    `<path d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='${col}' stroke-width='${f(sw)}'/></svg>`;
+  return [{ image: svgUrl(svg), size: `${f(W)}px ${f(100 * k)}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: W }];
+}
+
+const BUILDERS = { noise: buildNoise, bump: buildBump, lines: buildLines, dots: buildDots, grid: buildGrid, checker: buildChecker, weave: buildWeave, carbon: buildCarbon, waves: buildWaves, hex: buildHex };
+
+/**
+ * Turn parsed layers into the CSS lists for background-image, -size, -repeat,
+ * -position and -blend-mode, top layer first.
+ *   rc(cssColorWord) -> {r,g,b,a} | null
+ */
+export function buildTexture(layers, rc) {
+  const parts = [];
+  for (const spec of layers) {
+    const builder = BUILDERS[spec.gen];
+    if (!builder) continue;
+    for (const piece of builder(spec, rc)) parts.push({ ...piece, animate: spec.animate || 0 });
+  }
+  return {
+    image: parts.map((p) => p.image).join(', '),
+    size: parts.map((p) => p.size).join(', '),
+    repeat: parts.map((p) => p.repeat).join(', '),
+    position: parts.map((p) => p.position).join(', '),
+    blend: parts.map((p) => p.blend).join(', '),
+    count: parts.length,
+    parts,
+  };
+}
+
+/* ------------------------------------------------------------------ *
+ * deterministic value noise, for aura masks and tests
+ * ------------------------------------------------------------------ */
+
+/** small fast seeded PRNG (mulberry32) */
+export function rng(seed) {
+  let a = (seed >>> 0) || 1;
+  return () => {
+    a |= 0; a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * An alpha mask (Uint8Array of size*size) for the textures that make sense as one.
+ * Used by aura so particles and glow can be grainy, dotted, scanned. Tileable.
+ */
+export function makeMask(layer, size = 128) {
+  const out = new Uint8Array(size * size);
+  const gen = layer.gen;
+  const k = layer.intensity === undefined ? 1 : Math.min(1, layer.intensity);
+  if (gen === 'lines') {
+    const p = Math.max(2, layer.scale || 8), w = layer.thickness || 1, ang = ((layer.angle || 0) * Math.PI) / 180;
+    // normal to a line whose direction is (cos a, -sin a) in screen coordinates
+    const c = Math.sin(ang), s = Math.cos(ang);
+    for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+      const d = (((x * c + y * s) % p) + p) % p;
+      out[y * size + x] = d < w ? 255 * k : 0;
+    }
+    return out;
+  }
+  if (gen === 'dots') {
+    const S = Math.max(2, layer.scale || 12), r = (layer.radius === undefined ? 0.2 : layer.radius) * S;
+    for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+      const dx = (x % S) - S / 2, dy = (y % S) - S / 2;
+      out[y * size + x] = Math.hypot(dx, dy) < r ? 255 * k : 0;
+    }
+    return out;
+  }
+  // everything else: value-noise fbm, tiled
+  const rand = rng((layer.seed || 0) + 17);
+  const cell = Math.max(1, Math.round(layer.scale || 3));
+  const gridN = Math.max(2, Math.floor(size / cell));
+  const lat = new Float32Array(gridN * gridN);
+  for (let i = 0; i < lat.length; i++) lat[i] = rand();
+  const oct = Math.max(1, Math.min(6, layer.octaves || 3));
+  const contrast = layer.contrast === undefined ? 1.5 : layer.contrast;
+  const thr = layer.threshold === undefined ? 0.5 : layer.threshold;
+  const smooth = (t) => t * t * (3 - 2 * t);
+  const sample = (u, v, n) => {
+    const g = Math.max(2, Math.round(n));
+    const x = ((u % 1) + 1) % 1 * g, y = ((v % 1) + 1) % 1 * g;
+    const x0 = Math.floor(x), y0 = Math.floor(y), fx = smooth(x - x0), fy = smooth(y - y0);
+    const at = (ix, iy) => lat[(((iy % gridN) + gridN) % gridN) * gridN + (((ix % gridN) + gridN) % gridN)];
+    const a = at(x0, y0), b = at(x0 + 1, y0), c = at(x0, y0 + 1), d = at(x0 + 1, y0 + 1);
+    return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
+  };
+  for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+    let v = 0, amp = 0.5, n = gridN, tot = 0;
+    for (let o = 0; o < oct; o++) { v += sample(x / size, y / size, n) * amp; tot += amp; amp *= 0.5; n *= 2; }
+    v /= tot;
+    const m = Math.max(0, Math.min(1, contrast * (v - thr) + 0.5));
+    out[y * size + x] = 255 * m * k;
+  }
+  return out;
+}

dssl-vscode/lib/engine/utils.js

@@ -1,4 +1,4 @@
-/* DSSL — utils.js — tiny shared helpers */
+/* DSSL - utils.js - tiny shared helpers */
 
 export function levenshtein(a, b) {
   if (a === b) return 0;
@@ -34,13 +34,13 @@ export function didYouMean(word, candidates) {
 }
 
 /* ------------------------------------------------------------------ *
- * v0.6.0 — the deform family (bend / bend-y / bend-up / fold / stretch)
+ * v0.6.0 - the deform family (bend / bend-y / bend-up / fold / stretch)
  *
  * These are engine-native properties (`@bend`, …) that compose into ONE
  * transform string, so transitions and WAAPI tween them like any other
  * transform. Edge-pinned members (fold plants the top edge, bend-up plants
  * the bottom edge) bake their pivot into the transform with the classic
- * translate · rotate · translate trick — that way they never fight a user
+ * translate · rotate · translate trick - that way they never fight a user
  * transform-origin. In keyframe mode there is no box yet, so they emit a
  * transformOrigin for WAAPI instead.
  * ------------------------------------------------------------------ */
@@ -50,10 +50,10 @@ const r4 = (v) => Math.round(v * 1e4) / 1e4;
 
 /**
  * Compose deform parts (+ optional base transform) into a transform string.
- *   d    — { bend, bendY, stretch, stretchAxis, fold, bendUp } numbers, 0 = off
- *   base — an existing transform string to run after the deform parts, or ''
- *   box  — { h } element height for edge-pinned pivots; null in keyframe mode
- * Returns { transform, origin } — origin is only set in keyframe mode.
+ *   d    - { bend, bendY, stretch, stretchAxis, fold, bendUp } numbers, 0 = off
+ *   base - an existing transform string to run after the deform parts, or ''
+ *   box  - { h } element height for edge-pinned pivots; null in keyframe mode
+ * Returns { transform, origin } - origin is only set in keyframe mode.
  */
 export function composeDeform(d, base, box) {
   const parts = [];
@@ -71,7 +71,7 @@ export function composeDeform(d, base, box) {
     if (h > 0) parts.push(`translateY(${r2(h / 2)}px)`, `rotateX(${d.bendUp}deg)`, `translateY(${r2(-h / 2)}px)`);
     else { parts.push(`rotateX(${d.bendUp}deg)`); origin = '50% 100%'; }
   }
-  if (d.stretch && d.stretch !== 1) {   // squash & stretch — volume stays constant
+  if (d.stretch && d.stretch !== 1) {   // squash & stretch - volume stays constant
     const inv = r4(1 / d.stretch);
     parts.push(d.stretchAxis === 'vertical'
       ? `scaleY(${d.stretch}) scaleX(${inv})`
@@ -83,7 +83,7 @@ export function composeDeform(d, base, box) {
 }
 
 /**
- * v0.6.0 — bend-around: lay n children along a circular arc.
+ * v0.6.0 - bend-around: lay n children along a circular arc.
  * Positive deg wraps the row around an invisible ball (a dome, ends dip);
  * negative deg opens it into a smile (ends rise). Returns the pivot radius
  * R (px, measured from each child's center) and one rotation angle per

dssl-vscode/lib/props-docs.js

@@ -1,14 +1,14 @@
-/* props-docs.js — the DSSL vocabulary with one-line docs.
+/* props-docs.js - the DSSL vocabulary with one-line docs.
  * Feeds completions and hovers. Semantic vocabulary entries carry real
  * explanations; passthrough CSS properties get a short reminder that they
  * pass through untouched. */
 
 export const SEMANTIC = {
-  row: 'flex row in one line: `row: gap space.4 between center` sets display:flex, flex-direction, gap, justify-content, align-items. Warning: it writes display — put explicit display: before it, not after.',
+  row: 'flex row in one line: `row: gap space.4 between center` sets display:flex, flex-direction, gap, justify-content, align-items. Warning: it writes display - put explicit display: before it, not after.',
   column: 'flex column in one line: `column: gap 2`. Same display caveat as row: the shorthand wins if it comes later in the rule.',
   grid: 'grid layout in one line: `grid: 3 gap 12` = 3 equal columns with a 12px gap.',
   stack: 'everything stacked and centered: `stack: center`. Flex column + center on both axes.',
-  center: 'alignment that cannot silently no-op — the engine promotes the element to a grid formatting context when needed: `center: both`.',
+  center: 'alignment that cannot silently no-op - the engine promotes the element to a grid formatting context when needed: `center: both`.',
   size: 'width and height in one line: `size: 40 20` = 40 wide, 20 tall. `size: 40` = both.',
   shadow: 'box shadow from the shadow token scale: `shadow: sm | md | lg | xl`. Custom: `shadow: 0 2 4 ink/10, 0 4 12 ink/8`.',
   radius: 'border-radius, bare number or token: `radius: md`, `radius: full`, `radius: 14`.',
@@ -29,6 +29,16 @@ export const SEMANTIC = {
   'visually-hidden': 'hidden from eyes, visible to screen readers.',
   cover: 'fills the containing block absolutely.',
   use: 'apply a behavior: `use focus-ring`. Behaviors are named rule groups declared with `behavior name { }`.',
+  texture: 'a generated texture layered ON TOP of the element\u2019s own background: `texture: grain`, `texture: wood scale 6 intensity 0.8`, `texture: grain, scanlines`. 30 presets (grain, paper, marble, wood, carbon, halftone, ...) or build your own from a generator (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex) plus settings (scale, intensity, contrast, octaves, color, color2, blend, stretch, contour, ...). Open the designer to see them all.',
+  aura: 'light and particles around an element, with NO presets: you describe it. `aura: glow #ff7a00 30 flicker 0.3, particles #fd0 -> #f60 count 60 shape flame glowing behind`. Replaces both slots. `aura: none` clears them.',
+  'aura-glow': 'just the glow slot: `aura-glow: color.accent 24 pulse 1600`. Positional colour and radius, then settings (intensity, pulse, depth, flicker, texture(...), seed, essential). `aura-glow: none` clears only the glow.',
+  'aura-particle': 'just the particles slot: `aura-particle: #7cf -> transparent 40 up size 6 life 800 speed 30 from bottom`. Settings: count, size, life, speed, dir, spread, gravity, drag, turbulence, from, shape, grow, glowing, behind, blend, texture(...), seed, essential.',
+  'aura-particles': 'the same as `aura-particle`.',
+  'glow-particle': 'the particles slot with every particle glowing (additive light): `glow-particle: #fff 30 out`.',
+  'glow-particles': 'the same as `glow-particle`.',
+  'aura-glow-particle': 'both slots at once, settings shared: `aura-glow-particle: #ff7a00 28 pulse 900 count 50 up`. A glow layer AND a glowing particles layer.',
+  'aura-glow-particles': 'the same as `aura-glow-particle`.',
+  slider: 'styles `<input type="range">` through the WebKit/Blink (`::-webkit-slider-*`) and Firefox (`::-moz-range-*`) pseudo-elements at once: `slider: track 6 color.line radius full, fill color.accent, thumb 22 color.paper, ring 3 color.accent, glow color.accent 14, ticks 10`. Add `graph 20 45 70 90 60` for a histogram slider.',
   seen: 'state that fires ONCE when the element first scrolls into view. Reveal-on-scroll with zero JavaScript. Composes with stagger. Cannot be combined with pseudo-elements.',
 };
 

dssl-vscode/media/designer-core.js

@@ -0,0 +1,279 @@
+/* =========================================================================
+ * DSSL designer: designer-core.js
+ *
+ * The state of the Aura, Texture and Slider designers, and the two-way trip
+ * between that state and DSSL text. Pure: no DOM, no vscode. The panel
+ * (designer.js) draws controls for this state; the tests (scripts/test-designer.mjs)
+ * check that what it writes compiles and reads back to the same thing.
+ *
+ * Colours in the state are { hex: '#rrggbb', a: 0..1 }, because that is what a
+ * colour picker plus an alpha slider produces. DSSL text gets #rrggbb, or
+ * rgba(...) when it is see-through.
+ * ========================================================================= */
+
+import { parseColor, toHex } from '../lib/engine/color.js';
+import { PRESETS, PRESET_NAMES, GENERATORS, TEXTURE_KEYS, parseTexture } from '../lib/engine/texture.js';
+import { parseAura, GLOW_DEFAULTS, PARTICLE_DEFAULTS, SHAPES, FROM_WORDS, GLOW_KEYS, PARTICLE_KEYS } from '../lib/engine/aura.js';
+import { parseSlider, THUMB_SHAPES } from '../lib/engine/slider.js';
+
+export { PRESETS, PRESET_NAMES, GENERATORS, TEXTURE_KEYS, SHAPES, FROM_WORDS, THUMB_SHAPES, GLOW_KEYS, PARTICLE_KEYS, GLOW_DEFAULTS, PARTICLE_DEFAULTS };
+
+/* ---------------- small helpers ---------------- */
+
+const fmt = (n) => String(+Number(n).toFixed(3));
+export const colorToDssl = (c) => (c.a >= 0.999 ? c.hex : `rgba(${parseInt(c.hex.slice(1, 3), 16)},${parseInt(c.hex.slice(3, 5), 16)},${parseInt(c.hex.slice(5, 7), 16)},${fmt(c.a)})`);
+export const dsslToColor = (css) => {
+  const p = parseColor(css);
+  return p ? { hex: toHex(p), a: +p.a.toFixed(3) } : null;
+};
+const hooksFor = (warnings) => ({
+  error: (m) => warnings.push(m),
+  color: (w) => w,
+  suggest: () => null,
+});
+/** a range as DSSL writes it: "5" when both ends match, "4 10" (low then high) otherwise */
+const rangeText = (r) => (r[0] === r[1] ? fmt(r[0]) : `${fmt(Math.min(...r))} ${fmt(Math.max(...r))}`);
+
+/* ====================================================================== *
+ * AURA
+ * ====================================================================== */
+
+export const defaultAuraState = () => ({
+  glow: { on: true, color: { hex: '#ff7a00', a: 1 }, radius: GLOW_DEFAULTS.radius, intensity: 1, pulse: 0, depth: GLOW_DEFAULTS.depth, flicker: 0, texture: '', seed: 1, essential: false },
+  particles: {
+    on: true,
+    stops: [{ hex: '#ffd24a', a: 1 }, { hex: '#ff6a00', a: 1 }, { hex: '#ff2800', a: 0 }],
+    count: 60, size: [6, 10], life: [700, 1100], speed: [40, 110], dir: 'up', deg: -90, spread: 40,
+    gravity: -40, drag: 0, turbulence: 60, from: 'top', shape: 'flame', grow: 0.3,
+    glowing: true, behind: true, blend: '', texture: '', seed: 1, essential: false,
+  },
+});
+
+function glowWords(g) {
+  const w = [colorToDssl(g.color), fmt(g.radius)];
+  if (g.intensity !== 1) w.push('intensity', fmt(g.intensity));
+  if (g.pulse) w.push('pulse', fmt(g.pulse));
+  if (g.pulse && g.depth !== GLOW_DEFAULTS.depth) w.push('depth', fmt(g.depth));
+  if (g.flicker) w.push('flicker', fmt(g.flicker));
+  if (g.texture) w.push(`texture(${g.texture})`);
+  if (g.seed !== 1) w.push('seed', fmt(g.seed));
+  if (g.essential) w.push('essential');
+  return w;
+}
+
+function particleWords(p, { bare = false } = {}) {
+  const D = PARTICLE_DEFAULTS;
+  const w = [p.stops.map(colorToDssl).join(' -> ')];
+  w.push('count', fmt(p.count));
+  if (p.size[0] !== D.size[0] || p.size[1] !== D.size[1]) w.push('size', rangeText(p.size));
+  if (p.life[0] !== D.life[0] || p.life[1] !== D.life[1]) w.push('life', p.life[0] === p.life[1] ? fmt(p.life[0]) : `${fmt(Math.min(...p.life))} ${fmt(Math.max(...p.life))}`);
+  if (p.speed[0] !== D.speed[0] || p.speed[1] !== D.speed[1]) w.push('speed', p.speed[0] === p.speed[1] ? fmt(p.speed[0]) : `${fmt(Math.min(...p.speed))} ${fmt(Math.max(...p.speed))}`);
+  const dir = p.dir === 'deg' ? fmt(p.deg) : p.dir;
+  if (!(p.dir === 'up')) w.push('dir', dir);
+  if (p.spread !== D.spread) w.push('spread', fmt(p.spread));
+  if (p.gravity) w.push('gravity', fmt(p.gravity));
+  if (p.drag) w.push('drag', fmt(p.drag));
+  if (p.turbulence) w.push('turbulence', fmt(p.turbulence));
+  if (p.from !== D.from) w.push('from', p.from);
+  if (p.shape !== D.shape) w.push('shape', p.shape);
+  if (p.grow !== D.grow) w.push('grow', fmt(p.grow));
+  if (p.glowing) w.push('glowing');
+  if (p.behind) w.push('behind');
+  if (p.blend) w.push('blend', p.blend);
+  if (p.texture) w.push(`texture(${p.texture})`);
+  if (p.seed !== 1) w.push('seed', fmt(p.seed));
+  if (p.essential) w.push('essential');
+  return w;
+}
+
+/** DSSL for an aura state. style 'separate': one declaration per slot. 'single': one aura: line. */
+export function auraToDssl(state, style = 'separate') {
+  const g = state.glow.on ? glowWords(state.glow).join(' ') : null;
+  const p = state.particles.on ? particleWords(state.particles).join(' ') : null;
+  if (!g && !p) return 'aura: none';
+  if (style === 'single') {
+    const parts = [];
+    if (g) parts.push(`glow ${g}`);
+    if (p) parts.push(`particles ${p}`);
+    return `aura: ${parts.join(',\n      ')}`;
+  }
+  const lines = [];
+  if (g) lines.push(`aura-glow: ${g}`);
+  if (p) lines.push(`aura-particle: ${p}`);
+  return lines.join('\n');
+}
+
+/** what a layer means when nothing is said about a setting: the LANGUAGE's defaults, not the designer's starting look */
+const languageGlow = () => ({ on: false, color: { hex: '#ffffff', a: 1 }, radius: GLOW_DEFAULTS.radius, intensity: GLOW_DEFAULTS.intensity, pulse: 0, depth: GLOW_DEFAULTS.depth, flicker: 0, texture: '', seed: 1, essential: false });
+const languageParticles = () => ({
+  on: false, stops: [{ hex: '#ffffff', a: 1 }, { hex: '#ffffff', a: 0 }], count: PARTICLE_DEFAULTS.count, size: [...PARTICLE_DEFAULTS.size], life: [...PARTICLE_DEFAULTS.life], speed: [...PARTICLE_DEFAULTS.speed],
+  dir: 'up', deg: -90, spread: PARTICLE_DEFAULTS.spread, gravity: 0, drag: 0, turbulence: 0, from: PARTICLE_DEFAULTS.from, shape: PARTICLE_DEFAULTS.shape, grow: PARTICLE_DEFAULTS.grow,
+  glowing: false, behind: false, blend: '', texture: '', seed: 1, essential: false,
+});
+
+/** read an aura back from DSSL text (aura:, aura-glow:, aura-particle: ...). Returns { state, notes }. */
+export function auraFromDssl(text) {
+  const state = { glow: languageGlow(), particles: languageParticles() };
+  const notes = [];
+  const decls = splitDecls(text);
+  for (const [prop, value] of decls) {
+    if (!/^(aura|aura-glow|aura-particles?|glow-particles?|aura-glow-particles?)$/.test(prop)) continue;
+    const warnings = [];
+    const r = parseAura(prop, value, hooksFor(warnings));
+    if (!r) { notes.push(`could not read "${prop}: ${value}": ${warnings.join('; ')}`); continue; }
+    if (r.glow && r.glow[0]) {
+      const g = r.glow[0];
+      Object.assign(state.glow, { on: true });
+      if (g.color) { const c = dsslToColor(g.color); if (c) state.glow.color = c; else notes.push(`the colour "${g.color}" is a token or variable, so the designer used its default`); }
+      for (const k of ['radius', 'intensity', 'pulse', 'depth', 'flicker', 'seed']) if (g[k] !== undefined) state.glow[k] = g[k];
+      if (g.essential) state.glow.essential = true;
+      if (g.texture && g.texture[0]) state.glow.texture = textureLayerName(g.texture[0]);
+    }
+    if (r.particles && r.particles[0]) {
+      const q = r.particles[0];
+      state.particles.on = true;
+      if (q.colors) {
+        const stops = q.colors.map((c) => dsslToColor(c)).filter(Boolean);
+        if (stops.length) state.particles.stops = stops.length === 1 ? [stops[0], { ...stops[0], a: 0 }] : stops;
+        if (stops.length < q.colors.length) notes.push('a token or variable colour could not be shown on a picker and was skipped');
+      }
+      for (const k of ['count', 'spread', 'gravity', 'drag', 'turbulence', 'grow', 'seed']) if (q[k] !== undefined) state.particles[k] = q[k];
+      for (const k of ['size', 'life', 'speed']) if (q[k]) state.particles[k] = q[k];
+      if (q.dir !== undefined) { if (typeof q.dir === 'number') { state.particles.dir = q.dir === -90 ? 'up' : q.dir === 90 ? 'down' : q.dir === 180 ? 'left' : q.dir === 0 ? 'right' : 'deg'; state.particles.deg = q.dir; } else state.particles.dir = q.dir; }
+      for (const k of ['from', 'shape', 'blend']) if (q[k]) state.particles[k] = q[k];
+      for (const k of ['glowing', 'behind', 'essential']) if (q[k]) state.particles[k] = true;
+      if (q.texture && q.texture[0]) state.particles.texture = textureLayerName(q.texture[0]);
+    }
+  }
+  return { state, notes };
+}
+
+/* ====================================================================== *
+ * TEXTURE
+ * ====================================================================== */
+
+export const defaultTextureLayer = (name = 'grain') => ({ name, set: {}, color: null, color2: null });
+export const defaultTextureState = () => ({ layers: [defaultTextureLayer('wood')], base: '#b8a58a' });
+
+const TEXTURE_NUMERIC = ['scale', 'intensity', 'contrast', 'threshold', 'octaves', 'seed', 'depth', 'light', 'angle', 'thickness', 'radius', 'softness', 'contour', 'animate'];
+
+/** what a preset or generator would use with no overrides, to know what to leave out of the output */
+function baselineFor(name) {
+  if (PRESETS[name]) return PRESETS[name].layers[0];
+  return {};
+}
+
+export function textureLayerToDssl(layer) {
+  const w = [layer.name];
+  const base = baselineFor(layer.name);
+  for (const k of TEXTURE_NUMERIC) if (layer.set[k] !== undefined && layer.set[k] !== base[k]) w.push(k, fmt(layer.set[k]));
+  if (layer.set.stretch && (layer.set.stretch[0] !== (base.stretch || [1, 1])[0] || layer.set.stretch[1] !== (base.stretch || [1, 1])[1])) w.push('stretch', fmt(layer.set.stretch[0]), fmt(layer.set.stretch[1]));
+  if (layer.set.type && layer.set.type !== base.type) w.push('type', layer.set.type);
+  if (layer.set.blend && layer.set.blend !== base.blend) w.push('blend', layer.set.blend);
+  if (layer.set.invert) w.push('invert');
+  if (layer.color) w.push('color', colorToDssl(layer.color));
+  if (layer.color2) w.push('color2', colorToDssl(layer.color2));
+  return w.join(' ');
+}
+const textureLayerName = (l) => textureLayerToDssl(fromParsedTexture(l));
+export const textureToDssl = (state) => (state.layers.length ? `texture: ${state.layers.map(textureLayerToDssl).join(', ')}` : 'texture: none');
+
+function fromParsedTexture(parsed) {
+  const layer = defaultTextureLayer(parsed.preset || parsed.gen);
+  const base = baselineFor(layer.name);
+  for (const k of [...TEXTURE_NUMERIC, 'stretch', 'type', 'blend', 'invert']) if (parsed[k] !== undefined && JSON.stringify(parsed[k]) !== JSON.stringify(base[k])) layer.set[k] = parsed[k];
+  if (parsed.color !== undefined && parsed.color !== base.color) layer.color = dsslToColor(parsed.color);
+  if (parsed.color2 !== undefined && parsed.color2 !== base.color2) layer.color2 = dsslToColor(parsed.color2);
+  return layer;
+}
+
+export function textureFromDssl(text) {
+  const state = { layers: [], base: '#b8a58a' };
+  const notes = [];
+  for (const [prop, value] of splitDecls(text)) {
+    if (prop !== 'texture') continue;
+    const warnings = [];
+    const parsed = parseTexture(value, hooksFor(warnings));
+    if (!parsed) { notes.push(`could not read "texture: ${value}": ${warnings.join('; ')}`); continue; }
+    // one parsed layer per generator layer; a multi-layer preset reads back as the preset name, once
+    const seen = new Set();
+    for (const l of parsed) {
+      const key = l.preset ? `${l.preset}` : `${l.gen}:${JSON.stringify(l)}`;
+      if (l.preset && seen.has(key)) continue;
+      seen.add(key);
+      state.layers.push(fromParsedTexture(l));
+    }
+  }
+  if (!state.layers.length) state.layers.push(defaultTextureLayer('grain'));
+  return { state, notes };
+}
+
+/* ====================================================================== *
+ * SLIDER
+ * ====================================================================== */
+
+export const defaultSliderState = () => ({
+  trackH: 8, trackColor: { hex: '#445566', a: 1 }, trackRadius: 'full', trackRadiusPx: 4,
+  fill: true, fillColor: { hex: '#ff7a00', a: 1 },
+  thumb: 22, thumbColor: { hex: '#ffffff', a: 1 }, shape: 'circle',
+  ring: false, ringW: 3, ringColor: { hex: '#ff7a00', a: 1 },
+  glow: false, glowColor: { hex: '#ff7a00', a: 1 }, glowR: 14,
+  ticks: false, tickCount: 10, tickColor: { hex: '#8890a0', a: 1 }, tickLen: 6,
+  graph: false, bars: [20, 45, 70, 90, 60, 35, 50, 80, 95, 40, 60, 75], graphH: 48, graphGap: 3,
+});
+
+export function sliderToDssl(s) {
+  const c = [];
+  const radius = s.trackRadius === 'full' ? 'radius full' : `radius ${fmt(s.trackRadiusPx)}`;
+  c.push(`track ${fmt(s.trackH)} ${colorToDssl(s.trackColor)} ${radius}`);
+  c.push(s.fill ? `fill ${colorToDssl(s.fillColor)}` : 'fill none');
+  c.push(`thumb ${fmt(s.thumb)} ${colorToDssl(s.thumbColor)}`);
+  if (s.shape !== 'circle') c.push(`shape ${s.shape}`);
+  if (s.ring) c.push(`ring ${fmt(s.ringW)} ${colorToDssl(s.ringColor)}`);
+  if (s.glow) c.push(`glow ${colorToDssl(s.glowColor)} ${fmt(s.glowR)}`);
+  if (s.ticks) c.push(`ticks ${fmt(s.tickCount)} ${colorToDssl(s.tickColor)} ${fmt(s.tickLen)}`);
+  if (s.graph) { c.push(`graph ${s.bars.map(fmt).join(' ')}`); c.push(`graph-height ${fmt(s.graphH)}`); c.push(`graph-gap ${fmt(s.graphGap)}`); }
+  return `slider: ${c.join(',\n        ')}`;
+}
+
+export function sliderFromDssl(text) {
+  const state = defaultSliderState();
+  state.fill = false; state.ring = false; state.glow = false; state.ticks = false; state.graph = false;
+  const notes = [];
+  for (const [prop, value] of splitDecls(text)) {
+    if (prop !== 'slider') continue;
+    const warnings = [];
+    const spec = parseSlider(value, hooksFor(warnings));
+    if (!spec) { notes.push(`could not read "slider: ${value}": ${warnings.join('; ')}`); continue; }
+    const col = (css, into) => { const c = dsslToColor(css); if (c) return c; notes.push(`the colour "${css}" is a token or variable, so the designer used its default`); return into; };
+    state.trackH = spec.track.h; state.trackColor = col(spec.track.color, state.trackColor);
+    if (spec.track.radius === 'full') state.trackRadius = 'full'; else { state.trackRadius = 'px'; state.trackRadiusPx = spec.track.radius; }
+    if (spec.fill) { state.fill = true; state.fillColor = col(spec.fill, state.fillColor); }
+    state.thumb = spec.thumb.size; state.thumbColor = col(spec.thumb.color, state.thumbColor); state.shape = spec.shape;
+    if (spec.ring) { state.ring = true; state.ringW = spec.ring.w; state.ringColor = col(spec.ring.color, state.ringColor); }
+    if (spec.glow) { state.glow = true; state.glowColor = col(spec.glow.color, state.glowColor); state.glowR = spec.glow.r; }
+    if (spec.ticks) { state.ticks = true; state.tickCount = spec.ticks.n; state.tickColor = col(spec.ticks.color, state.tickColor); state.tickLen = spec.ticks.len; }
+    if (spec.graph) { state.graph = true; state.bars = spec.graph; state.graphH = spec.graphHeight; state.graphGap = spec.graphGap; }
+  }
+  return { state, notes };
+}
+
+/* ---------------- shared ---------------- */
+
+/** "prop: value" pairs from a snippet, joining continuation lines (a trailing comma continues the value) */
+export function splitDecls(text) {
+  const out = [];
+  const lines = String(text).replace(/\/\*[\s\S]*?\*\//g, '').split('\n');
+  let cur = null;
+  for (const raw of lines) {
+    const line = raw.replace(/\/\/.*$/, '');
+    if (!line.trim()) continue;
+    if (cur && /,\s*$/.test(cur[1])) { cur[1] += ' ' + line.trim(); continue; }
+    const m = /^\s*(?:[\w.#:&>+~\[\]="' *-]+\{)?\s*([\w-]+)\s*:\s*(.*?)\s*;?\s*$/.exec(line);
+    if (m) { cur = [m[1], m[2]]; out.push(cur); } else cur = null;
+  }
+  return out.map(([p, v]) => [p, v.replace(/\s*;?\s*\}?\s*$/, '').trim()]);
+}
+
+/** a complete rule around the snippet, so the real compiler can check it */
+export const wrapForCompile = (snippet, selector = '.preview') => `${selector} {\n  ${snippet.replace(/\n/g, '\n  ')}\n}\n`;

dssl-vscode/media/designer.css

@@ -0,0 +1,66 @@
+/* The designer follows the editor's theme through VS Code's own CSS variables; the
+   fallbacks only matter when the page is opened outside the editor (tests, screenshots). */
+:root {
+  --bg: var(--vscode-editor-background, #1e1e1e);
+  --fg: var(--vscode-editor-foreground, #d4d4d4);
+  --muted: var(--vscode-descriptionForeground, #9a9a9a);
+  --line: var(--vscode-panel-border, #3c3c3c);
+  --field: var(--vscode-input-background, #2a2a2a);
+  --accent: var(--vscode-button-background, #0e639c);
+  --accent-fg: var(--vscode-button-foreground, #fff);
+  --good: var(--vscode-testing-iconPassed, #73c991);
+  --bad: var(--vscode-errorForeground, #f48771);
+  --font: var(--vscode-font-family, system-ui, sans-serif);
+  --mono: var(--vscode-editor-font-family, ui-monospace, Menlo, Consolas, monospace);
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.45 var(--font); }
+header { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; }
+h1 { font-size: 15px; margin: 0; font-weight: 600; }
+nav { display: flex; gap: 4px; }
+button { font: inherit; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 3px; padding: 5px 12px; cursor: pointer; }
+button:hover:not(:disabled) { border-color: var(--accent); }
+button:disabled { opacity: .45; cursor: default; }
+button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+button.tab.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+button.mini { padding: 2px 8px; font-size: 12px; }
+button.mini.on { background: var(--accent); color: var(--accent-fg); }
+button.mini.add { border-style: dashed; }
+.panel[hidden] { display: none; }
+.cols { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(340px, 1fr); gap: 18px; padding: 14px 16px 6px; align-items: start; }
+@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
+.right { position: sticky; top: 52px; }
+fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 0 0 12px; padding: 8px 12px 10px; min-width: 0; }
+legend { padding: 0 6px; font-weight: 600; }
+.row { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: center; padding: 2px 0; }
+.lab { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.ctl input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); }
+.ctl input[type=range].alpha { max-width: 70px; }
+input.num { width: 64px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; font: inherit; }
+select { background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 3px; padding: 3px 4px; font: inherit; max-width: 100%; }
+input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line); background: none; }
+.pair { display: grid; gap: 0; }
+.stop { display: flex; gap: 6px; align-items: center; } .stop .row { flex: 1; }
+.note, .cap { color: var(--muted); font-size: 12px; margin: 4px 0; }
+.stage { height: 230px; border: 1px solid var(--line); border-radius: 6px; background: #0b0a12; display: grid; place-items: center; overflow: hidden; position: relative; }
+.target { width: 130px; height: 84px; border-radius: 14px; background: #1d1b2c; color: #ccc; display: grid; place-items: center; font-size: 12px; }
+.bgs { display: flex; gap: 6px; align-items: center; margin: 8px 0; color: var(--muted); }
+canvas#life-curve, canvas#live-graph { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--line); border-radius: 3px; background: color-mix(in srgb, var(--field) 60%, transparent); display: block; margin-bottom: 8px; }
+.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
+.tilehead { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin-top: 6px; }
+.tile { padding: 4px; display: grid; gap: 3px; text-align: left; }
+.tile .sw { display: block; height: 42px; border-radius: 3px; }
+.tile .nm { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
+.layers { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
+.swatch { height: 200px; border-radius: 6px; border: 1px solid var(--line); }
+.swrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--muted); }
+.sliderstage { padding: 38px 24px; border: 1px solid var(--line); border-radius: 6px; background: #101018; }
+.bars { display: flex; gap: 2px; align-items: flex-end; height: 70px; margin-bottom: 6px; }
+.bars input.bar { writing-mode: vertical-lr; direction: rtl; width: 12px; height: 70px; padding: 0; accent-color: var(--accent); }
+footer { border-top: 1px solid var(--line); padding: 10px 16px 16px; position: sticky; bottom: 0; background: var(--bg); z-index: 5; }
+.outhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+#code { width: 100%; font: 12.5px/1.5 var(--mono); background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 3px; padding: 8px; resize: vertical; }
+.status.good { color: var(--good); } .status.bad { color: var(--bad); }
+.btns { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
+.flash { color: var(--muted); opacity: 0; transition: opacity .2s; } .flash.on { opacity: 1; }

dssl-vscode/media/designer.js

@@ -0,0 +1,477 @@
+/* =========================================================================
+ * DSSL designer: designer.js
+ *
+ * The panel behind "DSSL: Open Designer". Three tabs (Aura, Texture, Slider)
+ * with a control for every setting, a live preview drawn by the SAME code the
+ * engine uses (the aura renderer, the texture builder, the slider CSS), a few
+ * graphs, and the DSSL it writes, checked by the real compiler as you edit.
+ *
+ * It talks to the editor through four messages:
+ *   panel -> editor   insert { text }   copy { text }   requestSelection {}   ready {}
+ *   editor -> panel   selection { text }   tab { tab }
+ * Everything else happens in here, so it can be driven (and tested) in any browser.
+ * ========================================================================= */
+
+import * as core from './designer-core.js';
+import { AuraManager, resolveLayer, parseAura } from '../lib/engine/aura.js';
+import { buildTexture, parseTexture, PRESETS, TEXTURE_KEYS } from '../lib/engine/texture.js';
+import { sliderCss, parseSlider } from '../lib/engine/slider.js';
+import { parseColor } from '../lib/engine/color.js';
+import { parse } from '../lib/engine/parser.js';
+import { resolve } from '../lib/engine/resolver.js';
+
+const vscode = typeof acquireVsCodeApi === 'function' ? acquireVsCodeApi() : { postMessage() {}, getState: () => null, setState() {} };
+
+/* ---------------- tiny DOM helpers ---------------- */
+
+const h = (tag, attrs = {}, ...kids) => {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs || {})) {
+    if (v === undefined || v === null || v === false) continue;
+    if (k === 'class') el.className = v;
+    else if (k.startsWith('on')) el.addEventListener(k.slice(2), v);
+    else if (k === 'text') el.textContent = v;
+    else el.setAttribute(k, v === true ? '' : v);
+  }
+  for (const kid of kids.flat()) if (kid !== null && kid !== undefined && kid !== false) el.append(kid.nodeType ? kid : document.createTextNode(String(kid)));
+  return el;
+};
+const $ = (sel, root = document) => root.querySelector(sel);
+
+/** every control calls this when it changes something */
+let onChange = () => {};
+
+function row(label, ...controls) { return h('label', { class: 'row' }, h('span', { class: 'lab' }, label), h('span', { class: 'ctl' }, ...controls)); }
+
+/** a labelled slider that also shows (and accepts) its number */
+function num(label, get, set, min, max, step = 1, hint = '') {
+  const range = h('input', { type: 'range', min, max, step, value: get() });
+  const box = h('input', { type: 'number', min, max, step, value: get(), class: 'num' });
+  const sync = (v) => { range.value = v; box.value = v; };
+  range.addEventListener('input', () => { set(Number(range.value)); box.value = range.value; onChange(); });
+  box.addEventListener('input', () => { const v = Number(box.value); if (!Number.isNaN(v)) { set(v); range.value = v; onChange(); } });
+  const el = row(label, range, box);
+  if (hint) el.title = hint;
+  el.sync = () => sync(get());
+  return el;
+}
+/** low and high of a range, as two sliders */
+function pair(label, get, set, min, max, step = 1, hint = '') {
+  const a = num(`${label} from`, () => get()[0], (v) => set([Math.min(v, get()[1]), Math.max(v, get()[1])]), min, max, step, hint);
+  const b = num(`${label} to`, () => get()[1], (v) => set([Math.min(get()[0], v), Math.max(get()[0], v)]), min, max, step, hint);
+  return h('div', { class: 'pair' }, a, b);
+}
+function color(label, get, set, alpha = true) {
+  const c = h('input', { type: 'color', value: get().hex });
+  const a = h('input', { type: 'range', min: 0, max: 1, step: 0.01, value: get().a, title: 'opacity', class: 'alpha' });
+  c.addEventListener('input', () => { set({ hex: c.value, a: Number(a.value) }); onChange(); });
+  a.addEventListener('input', () => { set({ hex: c.value, a: Number(a.value) }); onChange(); });
+  const el = row(label, c, alpha ? a : null);
+  el.sync = () => { c.value = get().hex; a.value = get().a; };
+  return el;
+}
+function select(label, get, set, options, hint = '') {
+  const s = h('select', {}, options.map((o) => h('option', { value: o.value ?? o, selected: (o.value ?? o) === get() }, o.label ?? o)));
+  s.addEventListener('change', () => { set(s.value); onChange(); });
+  const el = row(label, s);
+  if (hint) el.title = hint;
+  el.sync = () => { s.value = get(); };
+  return el;
+}
+function check(label, get, set, hint = '') {
+  const c = h('input', { type: 'checkbox', checked: get() });
+  c.addEventListener('change', () => { set(c.checked); onChange(); });
+  const el = row(label, c);
+  if (hint) el.title = hint;
+  el.sync = () => { c.checked = get(); };
+  return el;
+}
+const group = (title, ...kids) => h('fieldset', {}, h('legend', {}, title), ...kids);
+
+/* ---------------- output: the code box, compile check, buttons ---------------- */
+
+const out = { text: '' };
+let codeBox, statusBox;
+
+function compileCheck(snippet) {
+  try {
+    const src = core.wrapForCompile(snippet);
+    const { ast, errors: pe } = parse(src, 'designer.dssl');
+    const doc = resolve(ast, 'designer.dssl');
+    const errors = [...pe, ...doc.errors];
+    if (errors.length) return { ok: false, text: errors.map((e) => e.message + (e.hint ? ` (${e.hint})` : '')).join('; ') };
+    return { ok: true, text: doc.warnings.length ? `compiles, ${doc.warnings.length} warning(s)` : 'compiles' };
+  } catch (e) { return { ok: false, text: String(e.message || e) }; }
+}
+
+function setOutput(text) {
+  out.text = text;
+  codeBox.value = text;
+  const c = compileCheck(text);
+  statusBox.textContent = c.ok ? `✓ ${c.text}` : `✗ ${c.text}`;
+  statusBox.className = 'status ' + (c.ok ? 'good' : 'bad');
+  return c;
+}
+
+/* ====================================================================== *
+ * AURA TAB
+ * ====================================================================== */
+
+const aura = { state: core.defaultAuraState(), style: 'separate', manager: null, history: [], bg: '#0b0a12', stage: null, target: null };
+
+function auraLayersFromText(text) {
+  const hooks = { error() {}, color: (w) => w, suggest: () => null };
+  const glow = [], parts = [];
+  for (const [prop, value] of core.splitDecls(text)) {
+    if (!/^(aura|aura-glow|aura-particles?)$/.test(prop)) continue;
+    const r = parseAura(prop, value, hooks);
+    if (!r) continue;
+    if (r.glow) glow.push(...r.glow);
+    if (r.particles) parts.push(...r.particles);
+  }
+  const fb = { r: 255, g: 255, b: 255, a: 1 };
+  return { glow: glow.map((l) => resolveLayer(l, parseColor, fb)), parts: parts.map((l) => resolveLayer(l, parseColor, fb)) };
+}
+
+function applyAuraPreview(text) {
+  if (!aura.manager) aura.manager = new AuraManager({ reducedMotion: { matches: false }, budget: 1200 });
+  const { glow, parts } = auraLayersFromText(text);
+  aura.manager.set(aura.target, glow, parts);
+  drawLifeCurves();
+}
+
+function drawLifeCurves() {
+  const cv = $('#life-curve');
+  if (!cv) return;
+  const x = cv.getContext('2d');
+  const W = cv.width, H = cv.height;
+  x.clearRect(0, 0, W, H);
+  const css = getComputedStyle(document.body);
+  const fg = css.getPropertyValue('--vscode-editor-foreground') || '#ccc';
+  x.strokeStyle = 'rgba(128,128,128,.35)'; x.lineWidth = 1;
+  for (let i = 0; i <= 4; i++) { const y = 6 + (i / 4) * (H - 16); x.beginPath(); x.moveTo(26, y); x.lineTo(W - 4, y); x.stroke(); }
+  x.fillStyle = fg; x.font = '10px sans-serif';
+  x.fillText('1', 8, 12); x.fillText('0', 8, H - 8); x.fillText('life →', W - 40, H - 1);
+  const p = aura.state.particles;
+  if (!p.on) { x.fillText('particles are off', 40, H / 2); return; }
+  const stops = p.stops.length ? p.stops : [{ a: 1 }];
+  const alphaAt = (t) => { const n = stops.length - 1; if (n <= 0) return stops[0].a; const f = Math.min(0.9999, t) * n; const i = Math.floor(f); return stops[i].a + (stops[i + 1].a - stops[i].a) * (f - i); };
+  const line = (fn, strokeStyle, max) => { x.strokeStyle = strokeStyle; x.lineWidth = 2; x.beginPath(); for (let i = 0; i <= 60; i++) { const t = i / 60; const v = Math.max(0, Math.min(1, fn(t) / max)); const px = 26 + t * (W - 30), py = H - 10 - v * (H - 16); i ? x.lineTo(px, py) : x.moveTo(px, py); } x.stroke(); };
+  line(alphaAt, '#ff9f43', 1);
+  const gmax = Math.max(1, p.grow);
+  line((t) => 1 + (p.grow - 1) * t, '#48dbfb', gmax);
+  x.fillStyle = '#ff9f43'; x.fillText('opacity', 34, 14);
+  x.fillStyle = '#48dbfb'; x.fillText(`size (1 → ${p.grow})`, 90, 14);
+}
+
+function drawLiveGraph() {
+  const cv = $('#live-graph');
+  if (!cv || !aura.manager) return;
+  const st = aura.manager.stats;
+  aura.history.push(st.particles);
+  if (aura.history.length > 150) aura.history.shift();
+  const x = cv.getContext('2d'), W = cv.width, H = cv.height;
+  x.clearRect(0, 0, W, H);
+  const max = Math.max(10, ...aura.history);
+  x.strokeStyle = '#7bed9f'; x.lineWidth = 1.5; x.beginPath();
+  aura.history.forEach((v, i) => { const px = (i / 149) * W, py = H - 4 - (v / max) * (H - 10); i ? x.lineTo(px, py) : x.moveTo(px, py); });
+  x.stroke();
+  x.fillStyle = getComputedStyle(document.body).color; x.font = '10px sans-serif';
+  x.fillText(`${st.particles} particles · ${st.fps || 0} fps · ${st.frameMs.toFixed(2)} ms/frame`, 6, 11);
+}
+
+function buildAuraTab() {
+  const s = aura.state;
+  const g = s.glow, p = s.particles;
+  const controls = [];
+  const texOpts = ['', 'grain', 'noise', 'rough', 'sand', 'cloud', 'glitter', 'dots', 'lines', 'halftone', 'scanlines'].map((v) => ({ value: v, label: v || 'none' }));
+
+  controls.push(group('Output',
+    select('Write it as', () => aura.style, (v) => { aura.style = v; }, [{ value: 'separate', label: 'aura-glow and aura-particle' }, { value: 'single', label: 'one aura: line' }]),
+  ));
+  const glowCtl = group('Glow',
+    check('On', () => g.on, (v) => { g.on = v; }, 'a soft light around the element'),
+    color('Colour', () => g.color, (v) => { g.color = v; }),
+    num('Radius', () => g.radius, (v) => { g.radius = v; }, 1, 200, 1, 'how far the light reaches, px'),
+    num('Intensity', () => g.intensity, (v) => { g.intensity = v; }, 0, 3, 0.05),
+    num('Pulse (ms)', () => g.pulse, (v) => { g.pulse = v; }, 0, 6000, 50, '0 is steady; otherwise one breath in and out takes this long'),
+    num('Pulse depth', () => g.depth, (v) => { g.depth = v; }, 0, 1, 0.05),
+    num('Flicker', () => g.flicker, (v) => { g.flicker = v; }, 0, 1, 0.05, 'random flicker, like a flame'),
+    select('Texture', () => g.texture, (v) => { g.texture = v; }, texOpts),
+    num('Seed', () => g.seed, (v) => { g.seed = v; }, 1, 99, 1),
+    check('Essential', () => g.essential, (v) => { g.essential = v; }, 'keep animating under reduced motion'),
+  );
+  const stopsBox = h('div', { class: 'stops' });
+  const renderStops = () => {
+    stopsBox.replaceChildren();
+    p.stops.forEach((st, i) => {
+      stopsBox.append(h('div', { class: 'stop' },
+        color(`Colour ${i + 1}`, () => p.stops[i], (v) => { p.stops[i] = v; }),
+        h('button', { class: 'mini', title: 'remove this colour', disabled: p.stops.length <= 1, onclick: () => { p.stops.splice(i, 1); renderStops(); onChange(); } }, '×')));
+    });
+    stopsBox.append(h('button', { class: 'mini add', disabled: p.stops.length >= 5, onclick: () => { p.stops.push({ ...p.stops[p.stops.length - 1], a: 0 }); renderStops(); onChange(); } }, '+ add a colour stop'));
+  };
+  renderStops();
+  const partCtl = group('Particles',
+    check('On', () => p.on, (v) => { p.on = v; }),
+    h('div', { class: 'note' }, 'Colours blend along a particle\'s life, left to right.'), stopsBox,
+    num('Count', () => p.count, (v) => { p.count = v; }, 1, 300, 1, 'how many are alive at once'),
+    pair('Size', () => p.size, (v) => { p.size = v; }, 1, 60, 1, 'diameter in px'),
+    pair('Life (ms)', () => p.life, (v) => { p.life = v; }, 100, 4000, 50),
+    pair('Speed (px/s)', () => p.speed, (v) => { p.speed = v; }, 0, 400, 5),
+    select('Direction', () => p.dir, (v) => { p.dir = v; }, ['up', 'down', 'left', 'right', 'out', 'in', { value: 'deg', label: 'custom degrees' }]),
+    num('Degrees', () => p.deg, (v) => { p.deg = v; }, -180, 180, 1, 'used when direction is custom (-90 is up)'),
+    num('Spread', () => p.spread, (v) => { p.spread = v; }, 0, 360, 1, 'width of the fan of directions'),
+    num('Gravity', () => p.gravity, (v) => { p.gravity = v; }, -300, 300, 5, 'negative pulls up, like a flame'),
+    num('Drag', () => p.drag, (v) => { p.drag = v; }, 0, 5, 0.1),
+    num('Turbulence', () => p.turbulence, (v) => { p.turbulence = v; }, 0, 300, 5),
+    select('From', () => p.from, (v) => { p.from = v; }, core.FROM_WORDS),
+    select('Shape', () => p.shape, (v) => { p.shape = v; }, core.SHAPES),
+    num('Grow', () => p.grow, (v) => { p.grow = v; }, 0, 4, 0.1, 'end size as a multiple of the start'),
+    check('Glowing', () => p.glowing, (v) => { p.glowing = v; }),
+    check('Behind the element', () => p.behind, (v) => { p.behind = v; }, 'draw only outside the element'),
+    select('Blend', () => p.blend, (v) => { p.blend = v; }, [{ value: '', label: 'automatic' }, 'add', 'normal']),
+    select('Texture', () => p.texture, (v) => { p.texture = v; }, texOpts),
+    num('Seed', () => p.seed, (v) => { p.seed = v; }, 1, 99, 1),
+    check('Essential', () => p.essential, (v) => { p.essential = v; }),
+  );
+  controls.push(glowCtl, partCtl);
+
+  const stage = h('div', { class: 'stage' }, h('div', { class: 'target', id: 'aura-target' }, 'element'));
+  aura.stage = stage; aura.target = $('.target', stage);
+  const bgPick = h('div', { class: 'bgs' }, h('span', {}, 'Preview on:'), ...[['#0b0a12', 'dark'], ['#f2f0f7', 'light'], ['#2a2f3a', 'slate']].map(([c, n]) => h('button', { class: 'mini', onclick: () => { stage.style.background = c; aura.target.style.background = c === '#f2f0f7' ? '#cfc8e0' : '#1d1b2c'; aura.target.style.color = c === '#f2f0f7' ? '#222' : '#ccc'; } }, n)));
+  const graphs = group('Graphs',
+    h('div', { class: 'cap' }, 'One particle over its life'), h('canvas', { id: 'life-curve', width: 360, height: 90 }),
+    h('div', { class: 'cap' }, 'Live: particles alive'), h('canvas', { id: 'live-graph', width: 360, height: 50 }));
+  return { controls, preview: [stage, bgPick, graphs], onChange: () => { const text = core.auraToDssl(aura.state, aura.style); setOutput(text); applyAuraPreview(text); } };
+}
+
+/* ====================================================================== *
+ * TEXTURE TAB
+ * ====================================================================== */
+
+const tex = { state: core.defaultTextureState(), sel: 0 };
+
+function textureCss(text) {
+  const hooks = { error() {}, color: (w) => w, suggest: () => null };
+  const decls = core.splitDecls(text).filter(([p]) => p === 'texture');
+  if (!decls.length) return null;
+  const layers = parseTexture(decls[0][1], hooks);
+  return layers ? buildTexture(layers, parseColor) : null;
+}
+
+function buildTextureTab() {
+  const s = tex.state;
+  const layer = () => s.layers[Math.min(tex.sel, s.layers.length - 1)] || s.layers[0];
+  const grid = h('div', { class: 'tiles' });
+  const tile = (name, kind) => {
+    const b = textureCss(`texture: ${name}`);
+    const t = h('button', { class: 'tile', title: PRESETS[name] ? PRESETS[name].doc : `generator: ${name}`, onclick: () => { s.layers[tex.sel] = core.defaultTextureLayer(name); rebuild(); } }, h('span', { class: 'sw' }), h('span', { class: 'nm' }, name));
+    if (b) Object.assign($('.sw', t).style, { backgroundColor: '#b8a58a', backgroundImage: b.image, backgroundSize: b.size, backgroundRepeat: b.repeat, backgroundPosition: b.position, backgroundBlendMode: b.blend });
+    t.dataset.name = name;
+    return t;
+  };
+  core.PRESET_NAMES.forEach((n) => grid.append(tile(n)));
+  grid.append(h('div', { class: 'tilehead' }, 'Generators (start from scratch)'));
+  core.GENERATORS.forEach((n) => grid.append(tile(n)));
+
+  const layerBar = h('div', { class: 'layers' });
+  const settings = h('div', {});
+  const swatch = h('div', { class: 'swatch', id: 'tex-swatch' });
+  const baseColor = h('input', { type: 'color', value: s.base, onchange: (e) => { s.base = e.target.value; swatch.style.backgroundColor = s.base; } });
+  const numeric = ['scale', 'intensity', 'contrast', 'threshold', 'octaves', 'seed', 'depth', 'light', 'angle', 'thickness', 'radius', 'softness', 'contour', 'animate'];
+
+  function rebuild() {
+    layerBar.replaceChildren(...s.layers.map((l, i) => h('button', { class: 'mini' + (i === tex.sel ? ' on' : ''), onclick: () => { tex.sel = i; rebuild(); } }, `${i + 1}. ${l.name}`)),
+      h('button', { class: 'mini add', disabled: s.layers.length >= 4, onclick: () => { s.layers.push(core.defaultTextureLayer('grain')); tex.sel = s.layers.length - 1; rebuild(); } }, '+ stack another'),
+      h('button', { class: 'mini', disabled: s.layers.length <= 1, onclick: () => { s.layers.splice(tex.sel, 1); tex.sel = 0; rebuild(); } }, 'remove this'));
+    settings.replaceChildren();
+    const L = layer();
+    const base = PRESETS[L.name] ? PRESETS[L.name].layers[0] : {};
+    const eff = (k) => (L.set[k] !== undefined ? L.set[k] : base[k]);
+    const info = h('div', { class: 'note' }, PRESETS[L.name] ? `${L.name}: ${PRESETS[L.name].doc}` : `${L.name} (a generator: set it up yourself)`);
+    settings.append(info);
+    for (const k of numeric) {
+      const def = TEXTURE_KEYS[k];
+      const dflt = base[k] !== undefined ? base[k] : (def.min + Math.min(def.max, 20) / 2);
+      const step = def.int ? 1 : def.max <= 2 ? 0.05 : def.max <= 40 ? 0.1 : 1;
+      const el = num(k, () => (eff(k) !== undefined ? eff(k) : dflt), (v) => { L.set[k] = v; }, def.min, Math.min(def.max, k === 'scale' ? 300 : def.max), step, def.doc);
+      settings.append(el);
+    }
+    const st = eff('stretch') || [1, 1];
+    settings.append(
+      num('stretch x', () => (L.set.stretch || st)[0], (v) => { L.set.stretch = [v, (L.set.stretch || st)[1]]; }, 1, 80, 1, TEXTURE_KEYS.stretch.doc),
+      num('stretch y', () => (L.set.stretch || st)[1], (v) => { L.set.stretch = [(L.set.stretch || st)[0], v]; }, 1, 80, 1),
+      select('blend', () => eff('blend') || 'normal', (v) => { L.set.blend = v; }, ['normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-burn', 'color-dodge', 'darken', 'lighten', 'difference', 'exclusion']),
+      select('type', () => eff('type') || 'fractal', (v) => { L.set.type = v; }, ['fractal', 'turbulence']),
+      check('invert', () => !!L.set.invert, (v) => { L.set.invert = v || undefined; }),
+      h('div', { class: 'pair' },
+        check('own colour', () => !!L.color, (v) => { L.color = v ? (L.color || { hex: '#000000', a: 1 }) : null; rebuild(); }),
+        L.color ? color('colour', () => L.color, (v) => { L.color = v; }) : null),
+      h('div', { class: 'pair' },
+        check('own colour 2', () => !!L.color2, (v) => { L.color2 = v ? (L.color2 || { hex: '#ffffff', a: 1 }) : null; rebuild(); }),
+        L.color2 ? color('colour 2', () => L.color2, (v) => { L.color2 = v; }) : null),
+      h('button', { class: 'mini', onclick: () => { L.set = {}; L.color = null; L.color2 = null; rebuild(); } }, 'reset this layer to the preset'));
+    api.onChange();
+  }
+  const api = {
+    controls: [group('Textures', h('div', { class: 'note' }, 'Pick a preset (or a generator), then adjust it. Stack up to 4.'), grid), group('Layers', layerBar, settings)],
+    preview: [h('div', { class: 'swrow' }, h('span', {}, 'Preview on:'), baseColor), swatch,
+      h('div', { class: 'sample', style: 'margin-top:8px' }, 'The same texture over text: ', h('b', {}, 'DSSL'))],
+    onChange: () => {
+      const text = core.textureToDssl(s);
+      const c = setOutput(text);
+      const b = c.ok ? textureCss(text) : null;
+      swatch.style.backgroundColor = s.base;
+      Object.assign(swatch.style, { backgroundImage: b ? b.image : 'none', backgroundSize: b ? b.size : '', backgroundRepeat: b ? b.repeat : '', backgroundPosition: b ? b.position : '', backgroundBlendMode: b ? b.blend : '' });
+    },
+    afterBuild: rebuild,
+  };
+  return api;
+}
+
+/* ====================================================================== *
+ * SLIDER TAB
+ * ====================================================================== */
+
+const sl = { state: core.defaultSliderState() };
+
+function buildSliderTab() {
+  const s = sl.state;
+  const style = h('style', { id: 'pv-style' });
+  const input = h('input', { type: 'range', id: 'pv', min: 0, max: 100, value: 60 });
+  input.addEventListener('input', () => input.style.setProperty('--dssl-p', String(Number(input.value) / 100)));
+  input.style.setProperty('--dssl-p', '0.6');
+  const bars = h('div', { class: 'bars' });
+  const renderBars = () => {
+    bars.replaceChildren(...s.bars.map((v, i) => h('input', { type: 'range', class: 'bar', min: 0, max: 100, value: v, title: `bar ${i + 1}`, oninput: (e) => { s.bars[i] = Number(e.target.value); onChange(); } })));
+  };
+  renderBars();
+  const controls = [
+    group('Track',
+      num('Height', () => s.trackH, (v) => { s.trackH = v; }, 1, 40),
+      color('Colour', () => s.trackColor, (v) => { s.trackColor = v; }),
+      select('Corners', () => s.trackRadius, (v) => { s.trackRadius = v; }, [{ value: 'full', label: 'fully round' }, { value: 'px', label: 'a number of px' }]),
+      num('Corner px', () => s.trackRadiusPx, (v) => { s.trackRadiusPx = v; }, 0, 20),
+      check('Fill', () => s.fill, (v) => { s.fill = v; }, 'colour the part before the thumb'),
+      color('Fill colour', () => s.fillColor, (v) => { s.fillColor = v; })),
+    group('Thumb',
+      num('Size', () => s.thumb, (v) => { s.thumb = v; }, 6, 60),
+      color('Colour', () => s.thumbColor, (v) => { s.thumbColor = v; }),
+      select('Shape', () => s.shape, (v) => { s.shape = v; }, core.THUMB_SHAPES),
+      check('Ring', () => s.ring, (v) => { s.ring = v; }), num('Ring width', () => s.ringW, (v) => { s.ringW = v; }, 1, 10), color('Ring colour', () => s.ringColor, (v) => { s.ringColor = v; }),
+      check('Glow', () => s.glow, (v) => { s.glow = v; }), color('Glow colour', () => s.glowColor, (v) => { s.glowColor = v; }), num('Glow radius', () => s.glowR, (v) => { s.glowR = v; }, 2, 60)),
+    group('Ticks',
+      check('Ticks', () => s.ticks, (v) => { s.ticks = v; }), num('Count', () => s.tickCount, (v) => { s.tickCount = v; }, 2, 40), color('Colour', () => s.tickColor, (v) => { s.tickColor = v; }), num('Length', () => s.tickLen, (v) => { s.tickLen = v; }, 2, 20)),
+    group('Graph (histogram slider)',
+      check('Show graph', () => s.graph, (v) => { s.graph = v; }),
+      num('Height', () => s.graphH, (v) => { s.graphH = v; }, 16, 120), num('Bar gap', () => s.graphGap, (v) => { s.graphGap = v; }, 0, 10),
+      h('div', { class: 'cap' }, 'Bar heights'), bars,
+      h('div', { class: 'pair' },
+        h('button', { class: 'mini', onclick: () => { s.bars = Array.from({ length: s.bars.length }, (_, i) => Math.round(50 + 45 * Math.sin(i / 1.6))); renderBars(); onChange(); } }, 'wave'),
+        h('button', { class: 'mini', onclick: () => { s.bars = Array.from({ length: s.bars.length }, (_, i) => Math.round(((i + 1) / s.bars.length) * 100)); renderBars(); onChange(); } }, 'ramp'),
+        h('button', { class: 'mini', onclick: () => { s.bars = Array.from({ length: s.bars.length }, () => Math.round(10 + Math.random() * 90)); renderBars(); onChange(); } }, 'random'),
+        h('button', { class: 'mini', onclick: () => { s.bars = s.bars.length < 40 ? [...s.bars, 50] : s.bars; renderBars(); onChange(); } }, '+ bar'),
+        h('button', { class: 'mini', onclick: () => { s.bars = s.bars.length > 2 ? s.bars.slice(0, -1) : s.bars; renderBars(); onChange(); } }, '− bar'))),
+  ];
+  return {
+    controls,
+    preview: [h('div', { class: 'sliderstage' }, input, style), h('div', { class: 'note' }, 'This panel is Chromium, so it shows the -webkit-slider-* rules. The -moz-range-* rules for Firefox are written alongside them by the compiler.')],
+    onChange: () => {
+      const text = core.sliderToDssl(s);
+      const c = setOutput(text);
+      const hooks = { error() {}, color: (w) => w, suggest: () => null };
+      const decl = core.splitDecls(text).find(([p]) => p === 'slider');
+      const spec = c.ok && decl ? parseSlider(decl[1], hooks) : null;
+      if (!spec) return;
+      const css = sliderCss(spec);
+      const rule = (sel, decls) => `${sel} { ${decls.map((d) => `${d.prop}: ${d.value}`).join('; ')} }`;
+      style.textContent = [rule('#pv', css.base), ...css.shadow.filter((x) => x.pseudo.startsWith('-webkit')).map((x) => rule(`#pv::${x.pseudo}`, x.decls))].join('\n');
+    },
+  };
+}
+
+/* ====================================================================== *
+ * the shell: tabs, output box, buttons
+ * ====================================================================== */
+
+const tabs = {};
+let current = 'aura';
+
+function showTab(name) {
+  current = name;
+  document.body.dataset.tab = name;
+  for (const [n, t] of Object.entries(tabs)) { t.panel.hidden = n !== name; t.btn.classList.toggle('on', n === name); }
+  if (name !== 'aura' && aura.manager) aura.manager.set(aura.target, [], []);
+  onChange = tabs[name].api.onChange;
+  onChange();
+  vscode.setState({ tab: name, aura: aura.state, tex: tex.state, sl: sl.state, style: aura.style });
+}
+
+/** load a snippet (from the editor's selection) into whichever tab it belongs to */
+function loadText(text) {
+  const notes = [];
+  const props = core.splitDecls(text).map(([p]) => p);
+  let target = null;
+  if (props.some((p) => /^(aura|aura-|glow-)/.test(p))) {
+    const r = core.auraFromDssl(text); Object.assign(aura.state, r.state); notes.push(...r.notes); target = 'aura';
+  } else if (props.includes('texture')) {
+    const r = core.textureFromDssl(text); Object.assign(tex.state, r.state); tex.sel = 0; notes.push(...r.notes); target = 'texture';
+  } else if (props.includes('slider')) {
+    const r = core.sliderFromDssl(text); Object.assign(sl.state, r.state); notes.push(...r.notes); target = 'slider';
+  }
+  if (!target) { flash('Nothing to load: select an aura, texture or slider declaration first.'); return; }
+  mount(target); // rebuild the controls from the new state
+  flash(notes.length ? `Loaded. ${notes.join(' ')}` : 'Loaded from your selection.');
+}
+
+let flashBox;
+function flash(msg) { flashBox.textContent = msg; flashBox.className = 'flash on'; clearTimeout(flash.t); flash.t = setTimeout(() => { flashBox.className = 'flash'; }, 5000); }
+
+function mount(name) {
+  const builders = { aura: buildAuraTab, texture: buildTextureTab, slider: buildSliderTab };
+  const api = builders[name]();
+  const t = tabs[name];
+  t.api = api;
+  t.panel.replaceChildren(h('div', { class: 'cols' }, h('div', { class: 'left' }, ...api.controls), h('div', { class: 'right' }, ...api.preview)));
+  if (api.afterBuild) { onChange = api.onChange; api.afterBuild(); }
+  if (current === name) { onChange = api.onChange; api.onChange(); }
+}
+
+function init() {
+  const app = $('#app');
+  const saved = vscode.getState();
+  if (saved) {
+    if (saved.aura) Object.assign(aura.state, saved.aura);
+    if (saved.tex) Object.assign(tex.state, saved.tex);
+    if (saved.sl) Object.assign(sl.state, saved.sl);
+    if (saved.style) aura.style = saved.style;
+  }
+  const start = document.body.dataset.tab || (saved && saved.tab) || 'aura';
+  flashBox = h('div', { class: 'flash' });
+  codeBox = h('textarea', { id: 'code', readonly: true, rows: 7, spellcheck: false });
+  statusBox = h('div', { class: 'status' });
+  const header = h('header', {}, h('h1', {}, 'DSSL designer'), h('nav', {},
+    ...[['aura', 'Aura'], ['texture', 'Texture'], ['slider', 'Slider']].map(([n, l]) => { const b = h('button', { class: 'tab', 'data-tab': n, onclick: () => showTab(n) }, l); tabs[n] = { btn: b, panel: h('section', { class: 'panel', hidden: true }) }; return b; })));
+  const outBox = h('footer', {},
+    h('div', { class: 'outhead' }, h('strong', {}, 'DSSL'), statusBox),
+    codeBox,
+    h('div', { class: 'btns' },
+      h('button', { id: 'insert', class: 'primary', onclick: () => vscode.postMessage({ type: 'insert', text: out.text }) }, 'Insert at cursor'),
+      h('button', { id: 'copy', onclick: async () => { vscode.postMessage({ type: 'copy', text: out.text }); try { await navigator.clipboard.writeText(out.text); } catch { /* the editor copies for us */ } flash('Copied.'); } }, 'Copy'),
+      h('button', { id: 'load', onclick: () => vscode.postMessage({ type: 'requestSelection' }) }, 'Load from selection'),
+      flashBox));
+  app.replaceChildren(header, ...Object.values(tabs).map((t) => t.panel), outBox);
+  for (const n of Object.keys(tabs)) mount(n);
+  showTab(start);
+  setInterval(() => { if (current === 'aura') drawLiveGraph(); }, 100);
+  window.addEventListener('message', (e) => {
+    const m = e.data || {};
+    if (m.type === 'selection') loadText(m.text || '');
+    if (m.type === 'tab' && tabs[m.tab]) showTab(m.tab);
+  });
+  vscode.postMessage({ type: 'ready' });
+  window.__designer = { core, aura, tex, sl, showTab, loadText, get out() { return out.text; } }; // for tests and curious people
+}
+
+init();

dssl-vscode/package.json

@@ -1,8 +1,8 @@
 {
   "name": "dssl-vscode",
   "displayName": "DSSL Language Support",
-  "description": "The DSSL style language in your editor: syntax highlighting, real-compiler diagnostics (the same errors the browser console shows), completions from the live token registry, hover docs. Works in VS Code and VSCodium.",
-  "version": "0.8.2",
+  "description": "The DSSL style language in your editor: syntax highlighting, real-compiler diagnostics (the same errors the browser console shows), completions from the live token registry and for textures, auras and sliders, hover docs, an interactive designer with sliders and live previews for aura, texture and range sliders, and a CSS to DSSL converter. Works in VS Code and VSCodium.",
+  "version": "0.9.0",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",
@@ -14,14 +14,24 @@
     "Linters"
   ],
   "keywords": [
-    "dssl",
+    "aura",
     "css",
-    "styling",
+    "css converter",
     "design tokens",
-    "style language"
+    "designer",
+    "dssl",
+    "particles",
+    "style language",
+    "styling",
+    "texture"
   ],
   "activationEvents": [
-    "onLanguage:dssl"
+    "onLanguage:dssl",
+    "onCommand:dssl.openDesigner",
+    "onCommand:dssl.openAuraDesigner",
+    "onCommand:dssl.openTextureDesigner",
+    "onCommand:dssl.openSliderDesigner",
+    "onCommand:dssl.convertCss"
   ],
   "main": "./extension.js",
   "contributes": {
@@ -59,10 +69,61 @@
           "description": "Milliseconds to wait after a keystroke before re-running the compiler."
         }
       }
+    },
+    "commands": [
+      {
+        "command": "dssl.openDesigner",
+        "title": "Open the designer",
+        "category": "DSSL",
+        "icon": "$(paintcan)"
+      },
+      {
+        "command": "dssl.openAuraDesigner",
+        "title": "Design an aura (glow and particles)",
+        "category": "DSSL"
+      },
+      {
+        "command": "dssl.openTextureDesigner",
+        "title": "Design a texture",
+        "category": "DSSL"
+      },
+      {
+        "command": "dssl.openSliderDesigner",
+        "title": "Design a range slider",
+        "category": "DSSL"
+      },
+      {
+        "command": "dssl.convertCss",
+        "title": "Convert a CSS file to DSSL",
+        "category": "DSSL"
+      }
+    ],
+    "menus": {
+      "editor/title": [
+        {
+          "command": "dssl.openDesigner",
+          "when": "resourceLangId == dssl",
+          "group": "navigation"
+        }
+      ],
+      "editor/context": [
+        {
+          "command": "dssl.openDesigner",
+          "when": "resourceLangId == dssl",
+          "group": "navigation@9"
+        }
+      ],
+      "explorer/context": [
+        {
+          "command": "dssl.convertCss",
+          "when": "resourceExtname == .css",
+          "group": "navigation@9"
+        }
+      ]
     }
   },
   "repository": {
     "type": "git",
     "url": "https://huggingface.co/EHS-Studio/dssl"
   }
-}
+}