v0.7.1: editor extension (real compiler, VS Code + VSCodium), bench page, llms.txt + AGENTS.md + PARITY.md, comment line-number fix; README grows the editor chapter

AGENTS.md

@@ -0,0 +1,52 @@
+# AGENTS.md — for AI agents (and humans) working on this repo
+
+DSSL is a style language that replaces CSS. The engine lives in `public/dssl/` (parser,
+resolver, engine, boot, utils), the site in `src/`, the styles that drive the site in
+`public/styles/`, tests in `scripts/test-v*.mjs`, the editor extension in `dssl-vscode/`.
+The HF mirror of this repo carries the full docs in its README.
+
+## Commands
+
+```sh
+npm run dev                          # Next dev server (site)
+node scripts/dssl-styles-check.mjs   # canonical gate: every .dssl file, 0 errors required
+node scripts/test-v050.mjs           # engine suites: run ALL test-v0*.mjs, all must pass
+node scripts/test-v060.mjs
+node scripts/test-v070.mjs
+node scripts/test-v071.mjs
+node dssl-vscode/test/run.mjs        # extension analysis tests
+node scripts/sync-extension-engine.mjs  # REQUIRED after touching public/dssl/*.js
+```
+
+## Rules of the house
+
+1. The engine stays the engine. No compile-to-CSS pivot, no hybrid output. Inline styles
+   applied live are the architecture; pseudo-elements compile to one shadow stylesheet and
+   that is the only CSS the engine ever writes. Do not propose otherwise; the owner has
+   ruled twice.
+2. New engine surface needs tests in `scripts/test-vNNN.mjs` (numbered by version) and a
+   changelog entry in `src/components/dssl/views/ChangelogView.tsx`.
+3. The site dogfoods the engine: site styling lives in `public/styles/*.dssl` and MUST
+   pass styles-check with 0 errors. If you add a view: create its `.dssl`, add it to
+   `DSSL_SHEETS` in `src/app/layout.tsx`, add the route to `SiteRoot.tsx` (ViewName, VIEWS,
+   render line, `[data-view="x"] .nl-x` nav-active rule in site.dssl).
+4. After ANY change to `public/dssl/*.js`, run `scripts/sync-extension-engine.mjs` so the
+   editor extension bundles the same compiler, then re-run the extension tests.
+5. Never commit tokens or credentials. Not to this repo, not to the HF mirror, not into
+   the site's public/ folder. Backups live OUTSIDE tracked files.
+6. Deploys: `vercel deploy --prod --yes --token "$(cat /home/z/.vercel_token)"` for the
+   site; the HF mirror pushes via a tokenized remote URL that gets washed back to clean
+   immediately after the push. If the tokens are missing, they can be restored from the
+   backup file inside the project's .git/backups/ directory (that spot survives resets).
+7. Verify ships with raw curl (cache busters), not only fetchers: CDN caches have shown
+   stale content minutes after a successful deploy.
+
+## Conventions
+
+- Errors are loud, with did-you-mean built from edit distance over known properties,
+  tokens and motions. Warnings (v0.7+) compile fine but get printed; `ok` stays `true`.
+- The token registry folds across files in load order; `tokens*.dssl` sorts first in the
+  editor for the same reason.
+- Numbers are bare and mean pixels. No semicolons required. Comments `//` and `/* */`.
+- The site is the test suite: when the site needs something the language cannot express,
+  the language grows. Keep that loop.

PARITY.md

@@ -0,0 +1,50 @@
+# PARITY.md — DSSL vs CSS, honestly
+
+The point of this table is to stop two bad arguments: "DSSL is missing everything" and
+"DSSL replaces all of CSS". Both are false. Here is the ledger. Status: shipped / partial
+/ planned / by-design-no.
+
+| CSS feature | In DSSL | Status | Notes |
+|---|---|---|---|
+| Type / class / id / attribute selectors | native (rides browser matching) | shipped | |
+| Combinators (`>`, `+`, `~`, descendant) | native | shipped | |
+| Nesting | native, `&` substitution | shipped | predates CSS nesting; no build step needed |
+| `:nth-child()`, `:nth-of-type()`, `:not()`, `:is()`, `:where()`, `:has()` | native | shipped | the browser does the matching; v0.7 docs say so loudly |
+| Pseudo-classes (`:hover`, `:focus`...) | engine-native states as nested blocks | shipped | real events, enter + leave, descendants re-evaluated; `seen` (first viewport entry) has no CSS equivalent |
+| Pseudo-elements | one compiled shadow stylesheet | shipped | the ONE place DSSL emits real CSS; inline styles cannot reach them |
+| `@media` queries | `@media (max-width: 860)`, sugar: `dark`, `light`, `reduced-motion`, bare widths, `<=` ranges | shipped | |
+| `@container` queries | `@container (min-width: 480)` | shipped | nearest ancestor (or self) with container-type |
+| `@layer` cascade layers | `@layer base\|components\|utilities` + `pin {}` | shipped | cascade is (layer, source order); no specificity, no !important |
+| `@supports` | not implemented | planned | low priority: the engine feature-detects itself |
+| `@font-face` | not implemented | planned | `font.*` tokens can name any loaded family today |
+| `@keyframes` | `motion name { from {} to {} }` via WAAPI | shipped | `animate: name 600 ease-out infinite alternate` |
+| View transitions | not implemented | planned | |
+| Scroll-driven animations | not implemented | planned | pairs naturally with `seen` + `stagger` |
+| Custom properties (`--*`) | pass through unvalidated, plus dotted token re-declaration per subtree | shipped | `--color.accent: color.err` re-themes a subtree via inheritance |
+| Design tokens | first-class: `tokens { }`, numeric keys, alpha suffix `/85`, scoped per file and subtree | shipped | no CSS-native equivalent at this ergonomics level |
+| Flexbox / Grid | raw properties pass through + `row:` `column:` `grid:` `stack:` sugar | shipped | shorthands write `display`; the compiler warns when that clobbers an explicit `display:` |
+| `place-items` / alignment | `center: both` | shipped | the engine promotes a formatting context when missing, so alignment cannot silently no-op |
+| Transitions | per-property: `transition: 200 snap transform` | shipped | honors `reduced-motion` |
+| print styles (`@media print`) | not implemented | planned | |
+| `!important` | by design no | by-design-no | `pin { }` is the must-win block; specificity wars are the thing DSSL deletes |
+| Cascade | (layer, source order) | shipped | later wins; identical selectors resolve by order, deterministically |
+| Static extraction / view-source styling | live engine only today; prerender snapshot planned | planned | freeze() already makes big static pages zero-cost after first paint |
+| DevTools story | `DSSL.explain(el)` returns the cascade as data | shipped | matched rules with file/line, winning declaration per property, pseudo rules; browser-extension panel planned |
+| Work without JavaScript | not possible for first paint (today) | planned (prerender) | the honest trade; content pages should wait for prerender or pick another tool |
+
+## The exit story
+
+Abandoning DSSL leaves you: a DOM of valid inline styles, one small `<style>` element
+(pseudo-element rules), and token values sitting in `--dssl-*` custom properties. The page
+keeps working with the engine removed. No other styling replacement can say that, because
+no other replacement styles with the platform's own primitives.
+
+## What DSSL adds that CSS does not have
+
+- live tokens and signals: change one value or fire one bridge call, the whole DOM re-resolves
+- `seen` reveal-on-scroll and `stagger` choreography with zero JavaScript
+- the deform family composing into the transform channel
+- gradients as sentences with compile-time stop validation
+- the overlap policy: translucent boxes refuse to cover things unless you say so
+- loud errors with did-you-mean, and a warnings channel for cascade-order footguns
+- `freeze()` / `unfreeze()`: a live engine that can be parked at zero cost

README.md

@@ -68,6 +68,10 @@ Both drop a `dssl-engine/` folder next to you: the engine, a starter token set,
 
 Prefer to click: [dssl-engine.zip](https://dssl-sable.vercel.app/dssl-engine.zip) or [dssl-engine.tar.gz](https://dssl-sable.vercel.app/dssl-engine.tar.gz). Same package, straight from the browser.
 
+Writing your own .dssl? The official editor extension puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API): grab `dssl-vscode/dssl-vscode-0.7.1.vsix` from the repo source, or build it with `npx @vscode/vsce package` inside `dssl-vscode/`, then Extensions panel -> ... -> Install from VSIX.
+
+AI agents and machine reviewers: this repo ships `llms.txt` (dense, structured facts), `AGENTS.md` (how to work on the codebase) and `PARITY.md` (the honest feature matrix against CSS). The site serves the same `llms.txt` at https://dssl-sable.vercel.app/llms.txt
+
 Then wire it into a page with two tags:
 
 ```html
@@ -389,7 +393,7 @@ const rep = DSSL.explain(document.querySelector('.doc-card'))
 
 The matcher also pre-filters every rule through a cheap class/tag/id gate extracted from the selector's rightmost compound, so a recompute skips obvious non-matches instead of asking the browser rule by rule. The gate only ever says no; anything it does not fully understand falls back to native matching.
 
-## What works today (v0.7.0)
+## What works today (v0.7.1)
 
 - the full selector surface, including `:nth-child`, `:not`, `:is`, `:where`, `:has`
 - flexbox and grid with `row:` / `column:` / `grid:` / `stack:` / `center:` sugar
@@ -404,6 +408,8 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 - compiler warnings for cascade-order footguns
 - `DSSL.freeze()` / `DSSL.unfreeze()` / `DSSL.explain()`
 - bare font names, `hyphens: manual`, loud did-you-mean errors
+- honest line numbers: a v0.7.1 parser bug (every `//` comment shifted later lines +1, so diagnostics pointed one line late) is fixed and regression-tested
+- the editor extension bundles the real compiler, so editor squiggles and browser console agree
 
 ## Repo layout
 
@@ -412,10 +418,12 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 - `package/` what ships in the download: engine, starter files, usage guide, installers
 - `src/` the Next.js site (docs, playground, changelog)
 - `scripts/` smoke tests for the engine
+- `dssl-vscode/` the editor extension (VS Code + VSCodium, bundles the real parser/resolver)
+- `llms.txt`, `AGENTS.md`, `PARITY.md` for machine reviewers and contributors
 
 ## Status
 
-v0.7.0, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; if a page must work without JavaScript, a style runtime is not the right tool for it. Freeze makes big static pages viable; live interaction is what the engine is for.
+v0.7.1, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; if a page must work without JavaScript, a style runtime is not the right tool for it. Freeze makes big static pages viable; live interaction is what the engine is for.
 
 ## License
 

dssl-vscode/.vscodeignore

@@ -0,0 +1,6 @@
+test/**
+.vscode/**
+node_modules/**
+scripts/**
+**/*.map
+.gitignore

dssl-vscode/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DSSL. inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

dssl-vscode/README.md

@@ -0,0 +1,46 @@
+# DSSL Language Support (VS Code + VSCodium)
+
+The DSSL style language in your editor. Not a re-implementation: this extension bundles
+the **real parser and resolver** that ship in the engine, so the diagnostics you see are
+the same errors the browser console prints, did-you-mean included.
+
+Works in **VS Code** and **VSCodium** (same extension API; install the `.vsix` in either
+via Extensions panel → ⋯ → *Install from VSIX*).
+
+## Features
+
+- **Real-compiler diagnostics.** Errors AND warnings (the v0.7 warnings channel included:
+  the `display: none` clobbered by a later `column:` shows up as a squiggle, not a mystery).
+- **Completions from your registry.** Every `.dssl` file in the workspace is parsed and the
+  token registry folded across files (`tokens*.dssl` first). Type `color.` and get your
+  palette with resolved values. Type `animate:` and get your motions first.
+- **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`.
+
+## What it does not do (yet)
+
+- No formatter. No go-to-definition for behaviors. No LSP process (diagnostics run in the
+  extension host; a language server is the next step if files get huge).
+
+## Configuration
+
+| Setting | Default | Meaning |
+|---|---|---|
+| `dssl.diagnostics.enable` | `true` | run the compiler on change and save |
+| `dssl.diagnostics.debounce` | `250` | ms to wait after a keystroke |
+
+## 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
+`.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.
+
+## Links
+
+- Site: https://dssl-sable.vercel.app
+- Repo + full docs: https://huggingface.co/EHS-Studio/dssl
+- Feature matrix: PARITY.md in the repo
+
+MIT license.

dssl-vscode/extension.js

@@ -0,0 +1,116 @@
+/* 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. */
+
+const vscode = require('vscode');
+
+let mod = null;          // lib/analysis.js module
+let analysis = null;     // current workspace analysis result
+let diags = null;        // DiagnosticCollection (created once)
+let debounceTimer = null;
+
+const KIND = {
+  property: vscode.CompletionItemKind.Property,
+  value: vscode.CompletionItemKind.Value,
+  keyword: vscode.CompletionItemKind.Keyword,
+  block: vscode.CompletionItemKind.Snippet,
+};
+
+function debounceMs() {
+  return vscode.workspace.getConfiguration('dssl').get('diagnostics.debounce', 250);
+}
+
+/* Fold the whole workspace: every .dssl file parsed once, tokens chained in
+ * docs-first order (tokens*.dssl before the rest, then alphabetical). */
+async function runAnalysis() {
+  if (!mod) return;
+  const uris = await vscode.workspace.findFiles('**/*.dssl', '**/node_modules/**');
+  const docs = new Map();
+  await Promise.all(uris.map(async (uri) => {
+    try {
+      const doc = await vscode.workspace.openTextDocument(uri);
+      docs.set(uri.fsPath, doc.getText());
+    } catch { /* file vanished mid-scan */ }
+  }));
+
+  analysis = mod.analyzeWorkspace(docs);
+
+  const next = new Map();
+  for (const [p] of analysis.perFile) {
+    next.set(vscode.Uri.file(p), mod.diagnosticsFor(analysis, p).map((d) => {
+      const range = new vscode.Range(d.line, d.col, d.line, 400);
+      const sev = d.severity === 'error' ? vscode.DiagnosticSeverity.Error : vscode.DiagnosticSeverity.Warning;
+      const diag = new vscode.Diagnostic(range, d.message, sev);
+      diag.source = 'dssl';
+      return diag;
+    }));
+  }
+  // clear stale files (deleted from disk or emptied) then set fresh entries
+  diags.clear();
+  for (const [uri, items] of next) diags.set(uri, items);
+}
+
+function scheduleAnalysis() {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => { runAnalysis().catch(() => {}); }, debounceMs());
+}
+
+function registerCompletion() {
+  return vscode.languages.registerCompletionItemProvider(
+    { language: 'dssl' },
+    {
+      provideCompletionItems(document, position) {
+        if (!analysis || !mod) return [];
+        const text = document.getText();
+        const offset = document.offsetAt(position);
+        const result = mod.completionsAt(analysis, document.uri.fsPath, text, offset);
+        return result.items.map((it) => {
+          const item = new vscode.CompletionItem(it.label, KIND[it.kind] || vscode.CompletionItemKind.Text);
+          item.detail = it.detail;
+          if (it.documentation) item.documentation = new vscode.MarkdownString(it.documentation);
+          return item;
+        });
+      },
+    },
+    '.', ':', ' ',
+  );
+}
+
+function registerHover() {
+  return vscode.languages.registerHoverProvider({ language: 'dssl' }, {
+    provideHover(document, position) {
+      if (!analysis || !mod) return null;
+      const text = document.getText();
+      const offset = document.offsetAt(position);
+      const h = mod.hoverAt(analysis, document.uri.fsPath, text, offset);
+      if (!h) return null;
+      return new vscode.Hover(new vscode.MarkdownString(h.contents));
+    },
+  });
+}
+
+async function activate(context) {
+  mod = await import('./lib/analysis.js');
+  diags = vscode.languages.createDiagnosticCollection('dssl');
+  context.subscriptions.push(diags);
+
+  context.subscriptions.push(
+    vscode.workspace.onDidChangeTextDocument((e) => {
+      if (e.document.languageId === 'dssl') scheduleAnalysis();
+    }),
+    vscode.workspace.onDidOpenTextDocument((d) => { if (d.languageId === 'dssl') scheduleAnalysis(); }),
+    vscode.workspace.onDidChangeWorkspaceFolders(() => scheduleAnalysis()),
+    registerCompletion(),
+    registerHover(),
+  );
+
+  // run once so diagnostics are present before the first keystroke
+  await runAnalysis();
+}
+
+function deactivate() {
+  clearTimeout(debounceTimer);
+}
+
+module.exports = { activate, deactivate };

dssl-vscode/language-configuration.json

@@ -0,0 +1,32 @@
+{
+  "comments": {
+    "lineComment": "//",
+    "blockComment": ["/*", "*/"]
+  },
+  "brackets": [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"]
+  ],
+  "autoClosingPairs": [
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "(", "close": ")" },
+    { "open": "\"", "close": "\"", "notIn": ["string", "comment"] },
+    { "open": "'", "close": "'", "notIn": ["string", "comment"] }
+  ],
+  "surroundingPairs": [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"],
+    ["\"", "\""],
+    ["'", "'"]
+  ],
+  "folding": {
+    "markers": {
+      "start": "^\\s*\\{",
+      "end": "^\\s*\\}"
+    }
+  },
+  "wordPattern": "[a-zA-Z0-9_][a-zA-Z0-9_.-]*"
+}

dssl-vscode/lib/analysis.js

@@ -0,0 +1,251 @@
+/* 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
+ * real token registry folded across the workspace. */
+
+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';
+
+/* ---- workspace analysis ------------------------------------------------ */
+
+/* docs: Map<absolute path, text>. Fold order: tokens*.dssl first, then
+ * 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;
+    const tb = /tokens[^/]*\.dssl$/.test(b) ? 0 : 1;
+    return ta - tb || a.localeCompare(b);
+  });
+
+  const registry = { ...DEFAULT_TOKENS };
+  const motions = new Set();
+  const behaviors = new Set();
+  const perFile = new Map();
+
+  for (const p of paths) {
+    const text = docs.get(p);
+    const { ast, errors: parseErrors } = parse(text, p);
+    const doc = resolve(ast, p, { ...registry });
+    for (const [k, v] of Object.entries(doc.tokens || {})) registry[k] = v;
+    for (const m of Object.keys(doc.motions || {})) motions.add(m);
+    collectBehaviors(text, behaviors);
+    perFile.set(p, { errors: [...parseErrors, ...doc.errors], warnings: doc.warnings || [], doc });
+  }
+  return { registry, motions, behaviors, perFile };
+}
+
+function collectBehaviors(text, into) {
+  const re = /^\s*behavior\s+([\w-]+)/gm;
+  let m;
+  while ((m = re.exec(text))) into.add(m[1]);
+}
+
+/* ---- diagnostics ------------------------------------------------------- */
+
+/* Returns [{ line (0-based), col, message, severity: 'error'|'warning', hint, source }] */
+export function diagnosticsFor(analysis, path) {
+  const file = analysis.perFile.get(path);
+  if (!file) return [];
+  const out = [];
+  for (const e of file.errors) {
+    out.push({
+      line: Math.max(0, (e.line ?? 1) - 1),
+      col: 0,
+      message: e.message + (e.hint ? `  (did you mean "${e.hint}"?)` : ''),
+      severity: 'error',
+      hint: e.hint,
+      source: 'dssl',
+    });
+  }
+  for (const w of file.warnings) {
+    out.push({
+      line: Math.max(0, (w.line ?? 1) - 1),
+      col: 0,
+      message: w.message + (w.hint ? `  ${w.hint}` : ''),
+      severity: 'warning',
+      hint: w.hint,
+      source: 'dssl',
+    });
+  }
+  return out;
+}
+
+/* ---- context detection ------------------------------------------------- */
+
+/* Strip comments and strings so brace/paren tracking and line inspection
+ * never trip on them. Returns masked text (same offsets). */
+function maskCode(text) {
+  let out = '';
+  let i = 0;
+  let mode = null; // 'line' | 'block' | 'dq' | 'sq'
+  while (i < text.length) {
+    const c = text[i];
+    const n = text[i + 1];
+    if (mode === null) {
+      if (c === '/' && n === '/') { mode = 'line'; out += '  '; i += 2; continue; }
+      if (c === '/' && n === '*') { mode = 'block'; out += '  '; i += 2; continue; }
+      if (c === '"') { mode = 'dq'; out += ' '; i += 1; continue; }
+      if (c === "'") { mode = 'sq'; out += ' '; i += 1; continue; }
+      out += c; i += 1; continue;
+    }
+    if (mode === 'line') { if (c === '\n') { mode = null; out += '\n'; } else out += ' '; i += 1; continue; }
+    if (mode === 'block') { if (c === '*' && n === '/') { mode = null; out += '  '; i += 2; } else { out += c === '\n' ? '\n' : ' '; i += 1; } continue; }
+    // strings: terminate or newline kills them
+    if ((mode === 'dq' && c === '"') || (mode === 'sq' && c === "'")) { mode = null; out += ' '; i += 1; continue; }
+    if (c === '\n') { mode = null; out += '\n'; i += 1; continue; }
+    out += ' '; i += 1;
+  }
+  return out;
+}
+
+/* Returns { depth, inDecl, prop, valuePrefix, lineStart, lineToCursor } */
+export function contextAt(text, offset) {
+  const masked = maskCode(text.slice(0, offset));
+  let depth = 0;
+  let paren = 0;
+  for (const c of masked) {
+    if (c === '{') depth++;
+    else if (c === '}') depth = Math.max(0, depth - 1);
+    else if (c === '(') paren++;
+    else if (c === ')') paren = Math.max(0, paren - 1);
+  }
+  const nl = masked.lastIndexOf('\n');
+  const lineToCursor = masked.slice(nl + 1);
+  const tokenDot = lineToCursor.match(/([\w-]+)\.([\w-]*)$/);
+  // declaration line: "prop: value..." anchored at line start, but a line
+  // that also opens a block ("a:hover {") is a selector, not a declaration
+  let declMatch = lineToCursor.match(/^(\s*)(-{0,2}[.\w-]+)\s*:\s*([\s\S]*)$/);
+  if (declMatch && declMatch[3].includes('{')) declMatch = null;
+  // the value prefix is the trailing word segment: after "gap " (typed +
+  // space) it is empty, so completions re-open for the next word
+  const valueRaw = declMatch ? declMatch[3] : '';
+  const tail = valueRaw.match(/([^\s{;,]*)$/);
+  return {
+    depth,
+    paren,
+    inDecl: !!declMatch,
+    prop: declMatch ? declMatch[2] : null,
+    valuePrefix: tail ? tail[0] : '',
+    tokenGroup: tokenDot ? tokenDot[1] : null,
+    tokenPartial: tokenDot ? tokenDot[2] : null,
+    lineToCursor,
+  };
+}
+
+/* ---- completions ------------------------------------------------------- */
+
+/* kind strings map to vscode.CompletionItemKind in extension.js */
+export function completionsAt(analysis, path, text, offset) {
+  const ctx = contextAt(text, offset);
+  const items = [];
+
+  // token dot-completion: color., space., anything the registry knows
+  if (ctx.tokenGroup) {
+    const prefix = ctx.tokenGroup + '.';
+    const seen = new Set();
+    for (const key of Object.keys(analysis.registry)) {
+      if (key.startsWith(prefix)) {
+        const rest = key.slice(prefix.length);
+        if (!rest.includes('.') && !seen.has(rest)) {
+          seen.add(rest);
+          items.push({
+            label: rest,
+            kind: 'value',
+            detail: String(analysis.registry[key]),
+            documentation: `token ${prefix}${rest} = ${analysis.registry[key]}`,
+          });
+        }
+      }
+    }
+    if (items.length) return { items, context: 'token' };
+  }
+
+  // inside a declaration: values
+  if (ctx.inDecl) {
+    const prop = (ctx.prop || '').replace(/^-/, '');
+    // motions first for animate:, plus the animate-only grammar words
+    if (prop === 'animate') {
+      for (const m of analysis.motions) {
+        items.push({ label: m, kind: 'value', detail: 'motion', documentation: `motion defined in the workspace` });
+      }
+      for (const k of ['infinite', 'alternate', 'reverse', 'alternate-reverse', 'snap', 'essential', 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'forwards', 'backwards', 'both']) {
+        items.push({ label: k, kind: 'keyword', detail: 'animate option', documentation: ANIMATE_EXTRAS[k] || 'animate option' });
+      }
+    }
+    for (const k of CSS_KEYWORDS) {
+      items.push({ label: k, kind: 'keyword', detail: 'keyword' });
+    }
+    for (const key of Object.keys(analysis.registry)) {
+      items.push({ label: key, kind: 'value', detail: 'token = ' + analysis.registry[key], documentation: `token ${key} = ${analysis.registry[key]}` });
+    }
+    return { items, context: 'value' };
+  }
+
+  // property / block position
+  for (const p of PROPERTY_NAMES) {
+    items.push({ label: p, kind: 'property', detail: SEMANTIC[p] ? 'semantic' : 'css', documentation: SEMANTIC[p] || CSS[p] });
+  }
+  for (const [s, doc] of Object.entries(STATES)) {
+    items.push({ label: s, kind: 'block', detail: 'state block', documentation: doc });
+  }
+  for (const [b, doc] of Object.entries(BLOCKS)) {
+    items.push({ label: b, kind: 'block', detail: 'block', documentation: doc });
+  }
+  for (const [a, doc] of Object.entries(AT_RULES)) {
+    items.push({ label: a, kind: 'block', detail: 'at-rule', documentation: doc });
+  }
+  for (const b of analysis.behaviors) {
+    items.push({ label: 'use ' + b, kind: 'keyword', detail: 'behavior', documentation: 'apply the behavior "' + b + '"' });
+  }
+  for (const p of PSEUDO_ELEMENTS) {
+    items.push({ label: '::' + p, kind: 'keyword', detail: 'pseudo-element', documentation: 'compiles to real shadow CSS' });
+  }
+  return { items, context: 'property' };
+}
+
+const ANIMATE_EXTRAS = {
+  infinite: 'loop forever',
+  alternate: 'ease back on every other cycle',
+  snap: 'stepped timing',
+  essential: 'run even under reduced-motion',
+};
+
+function startsWith(s, prefix) {
+  if (!prefix) return true;
+  return s.startsWith(prefix) || s.includes(prefix);
+}
+
+/* ---- hovers ------------------------------------------------------------ */
+
+export function hoverAt(analysis, path, text, offset) {
+  const before = text.slice(0, offset);
+  const after = text.slice(offset);
+  const m = before.match(/[\w.@-]+$/);
+  const n = after.match(/^[\w.-]*/);
+  const word = (m ? m[0] : '') + (n ? n[0] : '');
+  if (!word) return null;
+
+  const clean = word.replace(/^@/, '');
+
+  // token (possibly dotted)
+  if (clean.includes('.')) {
+    const v = analysis.registry[clean];
+    if (v !== undefined) {
+      return { contents: `**${clean}** \u2192 \`${v}\`\n\n_design token_ (value resolved from the workspace registry)` };
+    }
+  }
+  if (SEMANTIC[clean]) return { contents: `**${clean}** \u2014 ${SEMANTIC[clean]}` };
+  if (STATES[clean]) return { contents: `**${clean}** _state_ \u2014 ${STATES[clean]}` };
+  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]}` };
+  if (analysis.motions.has(clean)) {
+    return { contents: `**${clean}** _motion_ \u2014 keyframe animation. Run with \`animate: ${clean} 600 ease-out\`.` };
+  }
+  if (analysis.behaviors.has(clean)) {
+    return { contents: `**${clean}** _behavior_ \u2014 apply with \`use ${clean}\`.` };
+  }
+  return null;
+}

dssl-vscode/lib/engine/parser.js

@@ -0,0 +1,262 @@
+/* =========================================================================
+ * DSSL — Domain Specific Style Language
+ * parser.js — tokenizer + parser for the braces syntax
+ *
+ * Line-oriented parser:
+ *   - blocks open with `header {` and close with `}`
+ *   - declarations are `prop: value` (newline- or `;`-terminated)
+ *   - one-liners like `.card { padding: 12 }` are allowed
+ *   - comments: `// ...` and block comments
+ *
+ * Produces a node tree; classification of headers happens here, value
+ * resolution happens in resolver.js.
+ * ========================================================================= */
+
+const STATE_WORDS = new Set([
+  'hover', 'focus', 'focus-visible', 'active', 'disabled', 'checked',
+  'empty', 'target', 'required', 'invalid', 'valid', 'open', 'closed',
+  '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
+]);
+
+// 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
+// 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.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.
+export const VENDOR_PSEUDO = /^-(webkit|moz|ms)-/;
+
+/** find index of first top-level occurrence of `ch` (skips strings + parens) */
+function scanFor(str, ch, from = 0) {
+  let depth = 0, q = null;
+  for (let i = from; i < str.length; i++) {
+    const c = str[i];
+    if (q) { if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '(' || c === '[') { depth++; continue; }
+    if (c === ')' || c === ']') { depth = Math.max(0, depth - 1); continue; }
+    if (depth === 0 && c === ch) return i;
+  }
+  return -1;
+}
+
+/** split a string on a top-level separator */
+function splitTop(str, sep) {
+  const out = [];
+  let cur = '', depth = 0, q = null;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (q) { cur += c; if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; cur += c; continue; }
+    if (c === '(' || c === '[') { depth++; cur += c; continue; }
+    if (c === ')' || c === ']') { depth = Math.max(0, depth - 1); cur += c; continue; }
+    if (depth === 0 && c === sep) { out.push(cur); cur = ''; continue; }
+    cur += c;
+  }
+  out.push(cur);
+  return out;
+}
+
+/** strip comments (respecting strings), newlines preserved so lines survive */
+function stripComments(src) {
+  let out = '', q = null;
+  for (let i = 0; i < src.length; i++) {
+    const c = src[i], n = src[i + 1];
+    if (q) {
+      out += c;
+      if (c === q && src[i - 1] !== '\\') q = null;
+      continue;
+    }
+    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
+      // 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.
+      while (i < src.length && src[i] !== '\n') i++;
+      if (i < src.length) i--; // reprocess the newline once, below
+      continue;
+    }
+    if (c === '/' && n === '*') {
+      let j = i + 2;
+      while (j < src.length && !(src[j] === '*' && src[j + 1] === '/')) {
+        out += src[j] === '\n' ? '\n' : ' ';
+        j++;
+      }
+      i = j + 1; // skip past the closing */
+      continue;
+    }
+    out += c;
+  }
+  return out;
+}
+
+export function parse(source, file = 'inline.dssl') {
+  const errors = [];
+  const err = (line, message, hint) => errors.push({ file, line, message, hint });
+  const root = { kind: 'root', children: [] };
+  const stack = [root];
+
+  const clean = stripComments(source);
+  const lines = clean.split('\n');
+
+  const classify = (header, line) => {
+    const h = header.trim();
+    if (h === 'tokens') return { kind: 'tokens' };
+    if (h === 'pin') return { kind: 'pin' };
+    if (h.startsWith('behavior ')) return { kind: 'behavior', name: h.slice(9).trim() };
+    if (h.startsWith('motion ')) return { kind: 'motion', name: h.slice(7).trim() };
+    if (h.startsWith('@layer ')) return { kind: 'layer', name: h.slice(7).trim() };
+    if (h.startsWith('@media ')) return { kind: 'media', query: h.slice(7).trim() };
+    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('@')) {
+      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'try @media, @container, @signal or @layer');
+      return { kind: 'bogus' };
+    }
+    if (h.startsWith('::')) {
+      const name = h.slice(2).split(/[\s(]/)[0];
+      if (!PSEUDO_ELEMENTS.has(name) && !VENDOR_PSEUDO.test(name)) {
+        err(line, `unknown pseudo-element "::${name}"`, 'try ::before, ::after, ::selection, or a vendor one like ::-webkit-scrollbar-thumb');
+        return { kind: 'bogus' };
+      }
+      return { kind: 'pseudo', name };
+    }
+    if (STATE_WORDS.has(h)) return { kind: 'state', name: h };
+    return { kind: 'selector', sel: h };
+  };
+
+  /** process a chunk, walking top-level braces so one-liners work */
+  const processChunk = (chunk, line) => {
+    let rest = chunk;
+    while (rest.length) {
+      rest = rest.trim();
+      if (!rest) return;
+
+      const open = scanFor(rest, '{');
+      const close = scanFor(rest, '}');
+
+      if (close !== -1 && (open === -1 || close < open)) {
+        const before = rest.slice(0, close).trim();
+        if (before) processContent(before, line);
+        if (stack.length === 1) err(line, 'unexpected "}"');
+        else stack.pop();
+        rest = rest.slice(close + 1);
+        continue;
+      }
+
+      if (open !== -1) {
+        const header = rest.slice(0, open).trim();
+        if (!header) { err(line, 'block is missing a header before "{"'); rest = rest.slice(open + 1); continue; }
+        const meta = classify(header, line);
+        const node = { ...meta, line, children: [] };
+        stack[stack.length - 1].children.push(node);
+        if (meta.kind !== 'bogus') stack.push(node);
+        rest = rest.slice(open + 1);
+        continue;
+      }
+
+      processContent(rest, line);
+      return;
+    }
+  };
+
+  const processContent = (content, line) => {
+    for (const piece of splitTop(content, ';')) {
+      const part = piece.trim();
+      if (!part) continue;
+      const colon = scanFor(part, ':');
+      if (colon === -1) {
+        // `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
+        if (/^[a-z][a-z0-9-]*$/i.test(part)) {
+          stack[stack.length - 1].children.push({ kind: 'decl', prop: part.toLowerCase(), value: '', line });
+        } else {
+          err(line, `expected ":" in "${part.slice(0, 40)}"`, 'declarations look like  prop: value');
+        }
+        continue;
+      }
+      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:
+      // 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
+      // 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)) {
+        if (stack.some(n => n.kind === 'tokens')) {
+          stack[stack.length - 1].children.push({ kind: 'decl', prop, value, line });
+          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');
+        continue;
+      }
+      // 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`,
+          'property names are lower-case words with dashes (my-prop), or dotted tokens (color.accent)');
+        continue;
+      }
+      stack[stack.length - 1].children.push({ kind: 'decl', prop, value, line });
+    }
+  };
+
+  // ---- line loop with continuation buffering ----
+  // A logical chunk grows across lines while:
+  //   - parens/brackets are unbalanced   (multi-line values)
+  //   - it ends with a top-level comma   (multi-line selector lists)
+  //   - it ends with a top-level colon   (value on the next line)
+  let buf = '', bufLine = 0;
+
+  const needsMore = (s) => {
+    let depth = 0, q = null;
+    for (let i = 0; i < s.length; i++) {
+      const c = s[i];
+      if (q) { if (c === q && s[i - 1] !== '\\') q = null; continue; }
+      if (c === '"' || c === "'") { q = c; continue; }
+      if (c === '(' || c === '[') depth++;
+      else if (c === ')' || c === ']') depth--;
+    }
+    if (depth !== 0) return true;
+    const t = s.trimEnd();
+    const last = t[t.length - 1];
+    return last === ',' || last === ':';
+  };
+
+  lines.forEach((raw, idx) => {
+    const line = idx + 1;
+    const trimmed = raw.trim();
+    if (!trimmed) return; // blank lines never split a pending chunk
+    const candidate = buf ? buf + ' ' + trimmed : raw;
+    if (buf && needsMore(candidate)) { buf = candidate; return; }
+    if (buf) { processChunk(candidate, bufLine || line); buf = ''; return; }
+    if (needsMore(candidate)) { buf = candidate; bufLine = line; return; }
+    processChunk(candidate, line);
+  });
+  if (buf.trim()) processChunk(buf, bufLine);
+
+  if (stack.length > 1) {
+    err(lines.length, `${stack.length - 1} block(s) were never closed with "}"`, 'every "{" needs a matching "}"');
+  }
+
+  return { ast: root, errors };
+}

dssl-vscode/lib/engine/resolver.js

@@ -0,0 +1,1367 @@
+/* =========================================================================
+ * DSSL — resolver.js
+ * Walks the parsed tree and produces flat, engine-ready rules:
+ *
+ *   rule = {
+ *     id, sel,                       // full structural selector (may contain native pseudo-classes)
+ *     media: [query],                // all must match
+ *     signals: [{name, op, value}],  // JS-driven conditions
+ *     containers: [query],           // container-query conditions
+ *     layer, order,                  // cascade: (layer, order) — no specificity
+ *     decls: [{prop, value} | special],
+ *     file, line
+ *   }
+ *
+ * Also resolves tokens (→ custom properties on <html>), semantic properties,
+ * behaviors (`use`), motions (→ Web Animations keyframes) and pseudo-element
+ * rules (→ generated "shadow" CSS, the only thing inline styles can't reach).
+ * ========================================================================= */
+
+import { levenshtein, didYouMean, composeDeform } from './utils.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 } from './parser.js';
+
+/* ------------------------------------------------------------------ *
+ * Vocabulary
+ * ------------------------------------------------------------------ */
+
+// exported for the editor extension: completions ride the same list the
+// compiler validates against, so the two can never drift apart
+export const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,none,auto,currentcolor,transparent,' +
+  'black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua,' +
+  'orange,gold,pink,brown,violet,cyan,magenta,indigo,crimson,coral,tomato,goldenrod,khaki,' +
+  'slategray,slategrey,dimgray,dimgrey,lightgray,lightgrey,darkgray,darkgrey,gainsboro,whitesmoke,' +
+  'ghostwhite,ivory,beige,linen,seashell,snow,honeydew,mintcream,azure,aliceblue,lavender,' +
+  'canvas,canvastext,linktext,visitedtext,activetext,buttonface,buttontext,buttonborder,field,fieldtext,highlight,highlighttext,' +
+  'solid,dashed,dotted,double,groove,ridge,inset,outset,hidden,visible,' +
+  'block,inline,inline-block,flex,inline-flex,grid,inline-grid,flow-root,contents,table,table-row,table-cell,list-item,' +
+  'relative,absolute,fixed,sticky,static,sticky,' +
+  'start,end,center,left,right,between,around,evenly,baseline,stretch,normal,space-between,space-around,space-evenly,' +
+  'wrap,nowrap,reverse,row,column,row-reverse,column-reverse,' +
+  'bold,bolder,lighter,italic,oblique,small-caps,uppercase,lowercase,capitalize,underline,overline,line-through,blink,' +
+  'ellipsis,clip,break-word,anywhere,pre,pre-wrap,pre-line,subpixel-antialiased,antialiased,' +
+  'pointer,progress,default,move,text,wait,help,grab,grabbing,not-allowed,zoom-in,zoom-out,copy,alias,crosshair,' +
+  '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,' +
+  'contain,cover,fill,fit-content,min-content,max-content,minmax,repeat,clamp,calc,var,url,env,attr,' +
+  'auto-fill,auto-fit,subgrid,dense,stretch,span,' +
+  'scaleX,scaleY,translateX,translateY,translate,rotate,skew,skewX,skewY,matrix,' +
+  'ease,ease-in,ease-out,ease-in-out,linear,step-start,step-end,steps,cubic-bezier,spring,bounce,smooth,snap,' +
+  'forwards,backwards,both,infinite,alternate,alternate-reverse,running,paused,reverse,' +
+  'safe,unsafe,legacy,loose,strict,spell-out,letters,isolate,isolation,blend,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity,plus-lighter,' +
+  'blur,brightness,contrast,grayscale,invert,opacity,sepia,saturate,drop-shadow,' +
+  'pointer coarse fine hover interactive,first,last,odd,even,all,portrait,landscape,print,screen,and,not,only,' +
+  'inline-size,size,scroll-state,normal,snapped,physical,logical,' +
+  'in,oklab,oklch,srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50,xyz-d65,shorter,longer,deg,grad,rad,turn,' +
+  'to,top,bottom,left,right,above,below,closest-side,farthest-side,ellipse,circle,at,padding-box,border-box,' +
+  '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
+  // 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([
+  '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',
+  'shape-image-threshold', 'animation-delay', 'transition-delay',
+  // grid line placement takes integers, not lengths:  grid-column: span 2
+  'grid-row', 'grid-column', 'grid-area',
+]);
+
+// 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,' +
+  '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,' +
+  'border-collapse,border-color,border-end-end-radius,border-end-start-radius,border-image,border-image-outset,border-image-repeat,border-image-slice,border-image-source,border-image-width,' +
+  'border-inline,border-inline-color,border-inline-end,border-inline-end-color,border-inline-end-style,border-inline-end-width,border-inline-start,border-inline-start-color,border-inline-start-style,border-inline-start-width,border-inline-style,border-inline-width,' +
+  'border-left,border-left-color,border-left-style,border-left-width,border-radius,border-right,border-right-color,border-right-style,border-right-width,' +
+  'border-spacing,border-start-end-radius,border-start-start-radius,border-style,border-top,border-top-color,border-top-left-radius,border-top-right-radius,border-top-style,border-top-width,border-width,' +
+  'bottom,box-decoration-break,box-shadow,box-sizing,break-after,break-before,break-inside,caret-color,caret-shape,clear,clip,clip-path,color,color-scheme,column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns,contain,contain-intrinsic-size,container,container-name,container-type,content,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,font,font-family,font-feature-settings,font-kerning,font-language-override,font-optical-sizing,font-palette,font-size,font-size-adjust,font-stretch,font-style,font-synthesis,font-variant,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-variation-settings,font-weight,forced-color-adjust,gap,grid,grid-area,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column,grid-column-end,grid-column-gap,grid-column-start,grid-gap,grid-row,grid-row-end,grid-row-gap,grid-row-start,grid-template,grid-template-areas,grid-template-columns,grid-template-rows,' +
+  'hanging-punctuation,height,hyphenate-character,hyphenate-limit-chars,hyphens,image-orientation,image-rendering,inline-size,inset,inset-block,inset-block-end,inset-block-start,inset-inline,inset-inline-end,inset-inline-start,isolation,justify-content,justify-items,justify-self,justify-tracks,left,letter-spacing,line-break,line-height,list-style,list-style-image,list-style-position,list-style-type,margin,margin-block,margin-block-end,margin-block-start,margin-bottom,margin-inline,margin-inline-end,margin-inline-start,margin-left,margin-right,margin-top,margin-trim,mask,mask-border,mask-border-mode,mask-border-outset,mask-border-repeat,mask-border-slice,mask-border-source,mask-border-width,mask-clip,mask-composite,mask-image,mask-mode,mask-origin,mask-position,mask-repeat,mask-size,max-height,max-inline-size,max-width,min-block-size,min-height,min-inline-size,min-width,mix-blend-mode,object-fit,object-position,offset,offset-anchor,offset-distance,offset-path,offset-rotate,opacity,order,outline,outline-color,outline-offset,outline-style,outline-width,overflow,overflow-anchor,overflow-clip-margin,overflow-wrap,overflow-x,overflow-y,overscroll-behavior,overscroll-behavior-block,overscroll-behavior-inline,overscroll-behavior-x,overscroll-behavior-y,padding,padding-block,padding-block-end,padding-block-start,padding-bottom,padding-inline,padding-inline-end,padding-inline-start,padding-left,padding-right,padding-top,page-break-after,page-break-before,page-break-inside,paint-order,perspective,perspective-origin,place-content,place-items,place-self,pointer-events,position,print-color-adjust,quotes,resize,right,rotate,row-gap,ruby-align,ruby-merge,scale,scroll-behavior,scroll-margin,scroll-margin-block,scroll-margin-block-end,scroll-margin-block-start,scroll-margin-bottom,scroll-margin-inline,scroll-margin-inline-end,scroll-margin-inline-start,scroll-margin-left,scroll-margin-right,scroll-margin-top,scroll-padding,scroll-padding-block,scroll-padding-bottom,scroll-padding-inline,scroll-padding-left,scroll-padding-right,scroll-padding-top,scroll-snap-align,scroll-snap-stop,scroll-snap-type,scrollbar-color,scrollbar-gutter,scrollbar-width,shape-image-threshold,shape-margin,shape-outside,tab-size,table-layout,text-align,text-align-last,text-combine-upright,text-decoration,text-decoration-color,text-decoration-line,text-decoration-skip-ink,text-decoration-style,text-decoration-thickness,text-emphasis,text-emphasis-color,text-emphasis-position,text-emphasis-style,text-indent,text-justify,text-orientation,text-overflow,text-rendering,text-shadow,text-transform,text-underline-offset,text-underline-position,top,touch-action,transform,transform-box,transform-origin,transform-style,transition,transition-behavior,transition-delay,transition-duration,transition-property,transition-timing-function,translate,unicode-bidi,user-select,vertical-align,visibility,white-space,white-space-collapse,width,will-change,word-break,word-spacing,word-wrap,writing-mode,z-index,zoom,' +
+  'animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-range,animation-timeline,animation-timing-function,' +
+  'view-transition-name,interpolate-size,text-box,text-box-edge,text-box-trim,dynamic-range-limit,field-sizing,anchor-name,position-anchor,position-area,scroll-timeline,scroll-timeline-axis,scroll-timeline-name,timeline-scope,view-timeline,view-timeline-axis,view-timeline-name,' +
+  '-webkit-background-clip,-webkit-text-fill-color,-webkit-box-orient,-webkit-line-clamp,-webkit-tap-highlight-color,-webkit-font-smoothing,-moz-osx-font-smoothing,-webkit-box-shadow,-webkit-text-stroke').split(','));
+
+/* ------------------------------------------------------------------ *
+ * Built-in token defaults (overridable via `tokens { }`)
+ * ------------------------------------------------------------------ */
+
+export const DEFAULT_TOKENS = {
+  'color.ink': '#16161d',
+  'color.paper': '#faf7f2',
+  'color.card': '#ffffff',
+  'color.muted': '#6f6a7a',
+  'color.line': '#e5ded2',
+  'color.accent': 'oklch(62% 0.19 35)',
+  'color.accent-ink': '#fff6ee',
+  'color.ok': '#2e7d4f',
+  'color.err': '#b3372e',
+  'space.1': '4', 'space.2': '8', 'space.3': '12', 'space.4': '16',
+  'space.5': '24', 'space.6': '32', 'space.7': '48', 'space.8': '64',
+  'radius.sm': '8', 'radius.md': '14', 'radius.lg': '22', 'radius.full': '999',
+  'shadow.sm': '0 1 2 color.ink/8, 0 1 3 color.ink/6',
+  'shadow.md': '0 2 4 color.ink/10, 0 4 12 color.ink/8',
+  'shadow.lg': '0 4 8 color.ink/12, 0 12 32 color.ink/12',
+  'shadow.xl': '0 8 16 color.ink/14, 0 24 64 color.ink/16',
+  'font.sans': 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  'font.mono': 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+};
+
+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)',
+  linear: 'linear',
+  ease: 'ease',
+  'ease-in': 'ease-in',
+  'ease-out': 'ease-out',
+  'ease-in-out': 'ease-in-out',
+};
+
+const PLACE_WORDS = {
+  center: ['center', 'center'], start: ['start', 'flex-start'], end: ['end', 'flex-end'],
+  between: ['center', 'space-between'], around: ['center', 'space-around'],
+  evenly: ['center', 'space-evenly'], stretch: ['stretch', 'flex-start'],
+  baseline: ['baseline', 'flex-start'],
+};
+
+/* ------------------------------------------------------------------ *
+ * Value resolution
+ * ------------------------------------------------------------------ */
+
+const IDENT_RE = /^-?(?:[A-Za-z_]|--[A-Za-z_])[A-Za-z0-9_.\\-]*/;
+
+// 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(','));
+// functions whose bare numbers ARE lengths (px)
+const LENGTH_FN = new Set('calc,min,max,clamp,round,mod,rem,abs,sign,hypot,pow,sqrt,log,exp,blur,drop-shadow'.split(','));
+
+/**
+ * Resolve a raw value string into its final form:
+ *   - bare numbers get `px` (unless ctx.unitless)
+ *   - token references become var(--dssl-…), `token/NN` becomes color-mix
+ *   - unknown identifiers are errors (with did-you-mean)
+ */
+function resolveValue(raw, ctx) {
+  let out = '';
+  let i = 0;
+  const n = raw.length;
+
+  const err = (msg, hint) => ctx.errors.push({ file: ctx.file, line: ctx.line, message: msg, hint });
+
+  while (i < n) {
+    const c = raw[i];
+
+    if (/\s/.test(c)) { out += c; i++; continue; }
+
+    if (c === '"' || c === "'") {
+      let j = i + 1;
+      while (j < n && raw[j] !== c) j++;
+      out += raw.slice(i, j + 1);
+      i = j + 1;
+      continue;
+    }
+
+    if (/[0-9]/.test(c) || (c === '.' && /[0-9]/.test(raw[i + 1] || '')) || ((c === '-' || c === '+') && /[0-9.]/.test(raw[i + 1] || ''))) {
+      let j = i + 1;
+      while (j < n && /[0-9.]/.test(raw[j])) j++;
+      const num = raw.slice(i, j);
+      // optional unit
+      let unit = '';
+      if (j < n && /[a-z%]/i.test(raw[j])) {
+        let k = j;
+        while (k < n && /[a-z%]/i.test(raw[k])) k++;
+        unit = raw.slice(j, k).toLowerCase();
+        j = k;
+      }
+      out += num + (unit ? unit : (ctx.unitless ? '' : 'px'));
+      i = j;
+      continue;
+    }
+
+    const idm = raw.slice(i).match(IDENT_RE);
+    if (idm) {
+      let ident = idm[0];
+      i += ident.length;
+
+      if (ident.startsWith('--')) { out += ident; continue; } // custom property
+
+      // function call — resolve the inside
+      if (raw[i] === '(') {
+        let depth = 1, j = i + 1;
+        while (j < n && depth > 0) {
+          if (raw[j] === '(') depth++;
+          if (raw[j] === ')') depth--;
+          if (depth > 0 && (raw[j] === '"' || raw[j] === "'")) {
+            const q = raw[j]; j++;
+            while (j < n && raw[j] !== q) j++;
+          }
+          j++;
+        }
+        const inner = raw.slice(i + 1, j - 1);
+        const fname = ident.toLowerCase();
+        // 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') {
+          const rm = inner.match(/^\s*(\d+(?:\.\d+)?)\s*,([\s\S]*)$/);
+          if (rm) {
+            out += ident + '(' + rm[1] + ',' + resolveValue(rm[2], { ...ctx, unitless: ctx.unitless }) + ')';
+            i = j;
+            continue;
+          }
+          // 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;
+        const resolvedInner = resolveValue(inner, { ...ctx, unitless: innerUnitless });
+        out += ident + '(' + resolvedInner + ')';
+        i = j;
+        continue;
+      }
+
+      // token reference?
+      const tokenKey = findToken(ctx.tokens, ident);
+      if (tokenKey) {
+        const varRef = 'var(--dssl-' + tokenKey.replace(/\./g, '-') + ')';
+        // alpha modifier:  ink/20
+        let rest = raw.slice(i).match(/^\s*\/\s*([0-9.]+)\s*%?/);
+        if (rest) {
+          out += `color-mix(in oklab, ${varRef} ${rest[1]}%, transparent)`;
+          i += rest[0].length;
+          continue;
+        }
+        out += varRef;
+        continue;
+      }
+
+      // known keyword?
+      if (CSS_KEYWORDS.has(ident) || CSS_KEYWORDS.has(ident.toLowerCase())) {
+        out += ident;
+        continue;
+      }
+
+      // 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)) {
+        out += ident;
+        continue;
+      }
+
+      err(`unknown value "${ident}" for property "${ctx.prop}"`,
+        didYouMean(ident, [...ctx.tokenNames, ...CSS_KEYWORDS]));
+      out += ident; // keep going so the rest still resolves
+      continue;
+    }
+
+    // punctuation: copy (handles / , + * # etc.)
+    if (c === '#') { // hex color
+      let j = i + 1;
+      while (j < n && /[0-9a-fA-F]/.test(raw[j])) j++;
+      out += raw.slice(i, j);
+      i = j;
+      continue;
+    }
+    out += c;
+    i++;
+  }
+  return out;
+}
+
+/** paren-aware split on the `->` arrow — gradient stops use it as a separator */
+function splitArrow(s) {
+  const out = [];
+  let cur = '', depth = 0, q = null;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (q) { cur += c; if (c === q && s[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; cur += c; continue; }
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth = Math.max(0, depth - 1);
+    if (depth === 0 && c === '-' && s[i + 1] === '>') { out.push(cur); cur = ''; i++; continue; }
+    cur += c;
+  }
+  out.push(cur);
+  return out;
+}
+
+/** split on a top-level separator (parens-aware) — commas inside fn() survive */
+function topSplit(str, sep) {
+  const out = [];
+  let cur = '', depth = 0;
+  for (const ch of str) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth = Math.max(0, depth - 1);
+    if (ch === sep && depth === 0) { out.push(cur); cur = ''; continue; }
+    cur += ch;
+  }
+  out.push(cur);
+  return out;
+}
+
+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)
+  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
+    }
+  }
+  return null;
+}
+
+/* ------------------------------------------------------------------ *
+ * Semantic properties
+ * ------------------------------------------------------------------ */
+
+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
+// angles and `20deg` is accepted for people with CSS muscle memory.
+const degNum = (raw, what, ctx) => {
+  const t = String(raw).trim();
+  const m = t.match(/^(-?\d*\.?\d+)(deg)?$/i);
+  if (!m) {
+    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`,
+    });
+    return null;
+  }
+  return parseFloat(m[1]);
+};
+
+/** 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. */
+// 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,' +
+  'orange,gold,pink,brown,violet,cyan,magenta,indigo,crimson,coral,tomato,goldenrod,khaki,' +
+  'slategray,slategrey,dimgray,dimgrey,lightgray,lightgrey,darkgray,darkgrey,gainsboro,whitesmoke,' +
+  'ghostwhite,ivory,beige,linen,seashell,snow,honeydew,mintcream,azure,aliceblue,lavender,' +
+  'canvas,canvastext,linktext,visitedtext,activetext,buttonface,buttontext,buttonborder,field,fieldtext,highlight,highlighttext,' +
+  'currentcolor,transparent').split(','));
+
+function buildGradient(v, ctx) {
+  const t = String(v).trim();
+  const m = t.match(/^(linear|radial|conic)\b([\s\S]*)$/i);
+  if (!m) {
+    ctx.errors.push({
+      file: ctx.file, line: ctx.line,
+      message: `gradient needs a kind: "linear", "radial" or "conic"`,
+      hint: 'try  gradient: linear 135, color.accent -> color.ok',
+    });
+    return null;
+  }
+  const kind = m[1].toLowerCase();
+  const rest = m[2].trim();
+  const DIR_RE = /^to\s+(top|bottom|left|right)(\s+(top|bottom|left|right))?$/i;
+  const isPrefixShaped = (seg) => {
+    const s = seg.toLowerCase();
+    if (kind === 'linear') return /^-?\d+(\.\d+)?(deg)?$/.test(s) || DIR_RE.test(s);
+    if (kind === 'conic') return /^from\s+-?\d+(\.\d+)?(deg)?(\s+at\s+.+)?$/.test(s) || /^at\s+.+$/.test(s);
+    // radial: every atom is shape/size/position vocabulary (possibly around `at`)
+    return s.split(/\s+/).every(a => a === 'at' ||
+      /^(circle|ellipse|center|top|bottom|left|right|closest-side|farthest-side|closest-corner|farthest-corner|-?\d+(\.\d+)?(%|px|em|rem)?)$/.test(a));
+  };
+  let head = '';
+  let stopStrs = [];
+  const arrowParts = splitArrow(rest).map(s => s.trim()).filter(Boolean);
+  if (arrowParts.length >= 2) {
+    head = arrowParts[0];
+    stopStrs = arrowParts.slice(1);
+    // mixed styles like `linear 135, a -> b`: the comma belongs to the stop list
+    const hc = topSplit(head, ',').map(s => s.trim()).filter(Boolean);
+    if (hc.length > 1) { head = hc[0]; stopStrs = [...hc.slice(1), ...stopStrs]; }
+  } else {
+    const segs = topSplit(rest, ',').map(s => s.trim()).filter(Boolean);
+    while (segs.length > 1 && isPrefixShaped(segs[0])) head = head ? head + ' ' + segs.shift() : segs.shift();
+    stopStrs = segs;
+  }
+  if (stopStrs.length < 2) {
+    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',
+    });
+    return null;
+  }
+  let lead = '';
+  const POS_ATOM = /^(center|top|bottom|left|right|closest-side|farthest-side|closest-corner|farthest-corner|-?\d+(?:\.\d+)?(%|px|em|rem)?)$/i;
+  if (kind === 'linear') {
+    if (!head) lead = '180deg';
+    else if (/^-?\d+(\.\d+)?$/.test(head)) lead = head + 'deg';
+    else if (/^-?\d+(\.\d+)?deg$/i.test(head)) lead = head.toLowerCase();
+    else if (DIR_RE.test(head)) lead = head.toLowerCase();
+    else {
+      ctx.errors.push({
+        file: ctx.file, line: ctx.line,
+        message: `"${head}" is not a linear gradient direction`,
+        hint: 'use an angle (linear 135, …) or words (linear to bottom right, …)',
+      });
+      return null;
+    }
+  } else if (kind === 'radial') {
+    if (head) {
+      for (const a of head.split(/\s+/)) {
+        if (a.toLowerCase() === 'at' || a.toLowerCase() === 'circle' || a.toLowerCase() === 'ellipse' || POS_ATOM.test(a)) continue;
+        ctx.errors.push({
+          file: ctx.file, line: ctx.line,
+          message: `"${a}" is not part of a radial gradient shape`,
+          hint: 'try  gradient: radial circle at center, #fff -> #000',
+        });
+        return null;
+      }
+      lead = head;
+    }
+  } else { // conic
+    if (head) {
+      const fm = head.match(/^from\s+(-?\d+(?:\.\d+)?)(deg)?(?:\s+(at\s+[\s\S]+))?$/i);
+      if (fm) lead = 'from ' + fm[1] + 'deg' + (fm[3] ? ' ' + fm[3].trim() : '');
+      else if (/^at\s+[\s\S]+$/i.test(head)) lead = head;
+      else {
+        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, …',
+        });
+        return null;
+      }
+    }
+  }
+  const stops = [];
+  for (const s of stopStrs) {
+    let colorPart = s, pos = '';
+    const pm = s.match(/\s+(\d+(?:\.\d+)?)%$/);   // trailing per-stop position
+    if (pm) { pos = pm[1] + '%'; colorPart = s.slice(0, pm.index).trim(); }
+    if (!colorPart) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `a gradient stop is missing its color (got "${s}")` });
+      return null;
+    }
+    const val = resolveValue(colorPart, ctx);
+    if (/^[a-z-]+$/i.test(val) && !COLOR_WORDS.has(val.toLowerCase())) {
+      ctx.errors.push({
+        file: ctx.file, line: ctx.line,
+        message: `gradient stop "${s}" is not a color`,
+        hint: (didYouMean(val, [...COLOR_WORDS]) || 'colors, tokens (color.ink) and alpha mixes (ink/40) all work'),
+      });
+      return null;
+    }
+    stops.push(pos ? `${val} ${pos}` : val);
+  }
+  const fn = kind === 'linear' ? 'linear-gradient' : kind === 'radial' ? 'radial-gradient' : 'conic-gradient';
+  return `${fn}(${[lead, ...stops].filter(Boolean).join(', ')})`;
+}
+
+function parseFlexWords(value, ctx, dir) {
+  const out = [{ prop: 'display', value: 'flex' }, { prop: 'flex-direction', value: dir }];
+  const atoms = value.split(/\s+/).filter(Boolean);
+  for (let k = 0; k < atoms.length; k++) {
+    const a = atoms[k];
+    if (a === 'gap') {
+      const v = atoms[++k];
+      if (v === undefined) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: 'gap needs a value' }); break; }
+      out.push({ prop: 'gap', value: len(v, ctx) });
+      continue;
+    }
+    if (a === 'wrap') { out.push({ prop: 'flex-wrap', value: 'wrap' }); continue; }
+    if (a === 'nowrap') { out.push({ prop: 'flex-wrap', value: 'nowrap' }); continue; }
+    if (a === 'reverse') { out[1].value = dir + '-reverse'; continue; }
+    if (a === 'inline') { out[0].value = 'inline-flex'; continue; }
+    if (PLACE_WORDS[a]) {
+      out.push({ prop: 'align-items', value: PLACE_WORDS[a][0] });
+      out.push({ prop: 'justify-content', value: PLACE_WORDS[a][1] });
+      continue;
+    }
+    ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown word "${a}" in ${dir}`, hint: didYouMean(a, ['gap', 'center', 'start', 'end', 'between', 'around', 'evenly', 'stretch', 'baseline', 'wrap', 'nowrap', 'reverse', 'inline']) });
+  }
+  return out;
+}
+
+// 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',
+  fold: 'transform', stretch: 'transform',
+};
+
+const SEMANTIC = {
+  size(v, ctx) {
+    const parts = v.split(/\s+/).filter(Boolean);
+    const w = len(parts[0] || 'auto', ctx);
+    const h = parts[1] !== undefined ? len(parts[1], ctx) : w;
+    return [{ prop: 'width', value: w }, { prop: 'height', value: h }];
+  },
+  row: (v, ctx) => parseFlexWords(v, ctx, 'row'),
+  column: (v, ctx) => parseFlexWords(v, ctx, 'column'),
+  grid(v, ctx) {
+    const atoms = v.split(/\s+/).filter(Boolean);
+    let cols;
+    if (atoms.length === 1 && /^[0-9]+$/.test(atoms[0])) {
+      cols = `repeat(${atoms[0]}, 1fr)`;
+    } else if ((atoms[0] === 'auto-fill' || atoms[0] === 'auto-fit') && atoms[1]) {
+      cols = `repeat(${atoms[0]}, minmax(${len(atoms[1], ctx)}, 1fr))`;
+    } else {
+      cols = atoms.map(a => len(a, ctx)).join(' ');
+    }
+    return [{ prop: 'display', value: 'grid' }, { prop: 'grid-template-columns', value: cols }];
+  },
+  stack(v, ctx) {
+    const word = (v || 'center').trim();
+    const p = PLACE_WORDS[word];
+    if (!p) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown place "${word}" in stack`, hint: didYouMean(word, Object.keys(PLACE_WORDS)) });
+      return [{ prop: '@stack', value: '1' }];
+    }
+    return [{ prop: 'display', value: 'grid' }, { prop: 'place-items', value: `${p[0]} ${p[1]}` }, { prop: '@stack', value: '1' }];
+  },
+  place(v, ctx) {
+    const p = PLACE_WORDS[v.trim()];
+    if (!p) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown place "${v}"`, hint: didYouMean(v, Object.keys(PLACE_WORDS)) });
+      return [];
+    }
+    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
+  // 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
+  // silently no-op the way raw place-items did on spans and buttons.
+  //   center:       both axes   ·   center: x   horizontal only   ·   center: y   vertical only
+  center(v, ctx) {
+    const mode = (v || '').trim().toLowerCase() || 'both';
+    if (mode === 'x') {
+      return [{ prop: 'justify-items', value: 'center' }, { prop: 'justify-content', value: 'center' }];
+    }
+    if (mode === 'y') {
+      return [{ prop: 'align-items', value: 'center' }, { prop: 'align-content', value: 'center' }];
+    }
+    if (mode !== 'both') {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown center axis "${v}"`, hint: didYouMean(mode, ['both', 'x', 'y']) });
+      return [];
+    }
+    return [{ prop: 'place-items', value: 'center center' }, { prop: 'place-content', value: 'center center' }];
+  },
+  cover(v, ctx) {
+    const pos = (v || 'absolute').trim();
+    return [{ prop: 'position', value: pos }, { prop: 'inset', value: '0' }];
+  },
+  sticky(v, ctx) {
+    return [{ prop: 'position', value: 'sticky' }, { prop: 'top', value: len(v || '0', ctx) }];
+  },
+  font(v, ctx) {
+    const out = [];
+    const slash = v.split('/');
+    const head = slash[0].trim().split(/\s+/).filter(Boolean);
+    out.push({ prop: 'font-size', value: len(head[0] || '16', ctx) });
+    if (slash[1]) {
+      const tail = slash[1].trim().split(/\s+/).filter(Boolean);
+      out.push({ prop: 'line-height', value: num(tail[0] || '1.5', ctx) });
+      if (tail.length > 1) out.push({ prop: 'color', value: resolveValue(tail.slice(1).join(' '), ctx) });
+    } else if (head.length > 1) {
+      out.push({ prop: 'color', value: resolveValue(head.slice(1).join(' '), ctx) });
+    }
+    return out;
+  },
+  fluid(v, ctx) {
+    const parts = v.split(',').map(s => s.trim());
+    const px = (s) => {
+      const m = String(s).match(/^([0-9.]+)\s*(px|rem|em|%)?$/);
+      if (!m) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" is not a size` }); return '0px'; }
+      return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
+    };
+    const min = px(parts[0]); const max = px(parts[1]);
+    const vmin = px(parts[2] || '360'); const vmax = px(parts[3] || '1200');
+    const mv = parseFloat(min), xv = parseFloat(max);
+    const slope = ((xv - mv) / (parseFloat(vmax) - parseFloat(vmin))) * 100;
+    return [{ prop: 'font-size', value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+  },
+  shadow(v, ctx) {
+    const t = v.trim();
+    if (['sm', 'md', 'lg', 'xl', 'none'].includes(t)) {
+      return [{ prop: 'box-shadow', value: t === 'none' ? 'none' : `var(--dssl-shadow-${t})` }];
+    }
+    return [{ prop: 'box-shadow', value: resolveValue(v, ctx) }];
+  },
+  radius(v, ctx) {
+    const atoms = v.trim().split(/\s+/).filter(Boolean);
+    const out = atoms.map(a => {
+      if (['sm', 'md', 'lg', 'full', 'xl'].includes(a)) return `var(--dssl-radius-${a})`;
+      return resolveValue(a, ctx);
+    });
+    return [{ prop: 'border-radius', value: out.join(' ') }];
+  },
+  circle(v, ctx) {
+    const s = len(v, ctx);
+    return [
+      { prop: 'width', value: s },
+      { prop: 'height', value: s },
+      { prop: 'border-radius', value: '50%' },
+    ];
+  },
+  align(v, ctx) {
+    const map = { center: 'center', start: 'start', end: 'end', stretch: 'stretch', baseline: 'baseline' };
+    const val = map[v.trim()];
+    if (!val) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown align "${v}"`, hint: didYouMean(v, Object.keys(map)) });
+      return [];
+    }
+    return [{ prop: 'align-items', value: val }];
+  },
+  z(v, ctx) { return [{ prop: 'z-index', value: num(v, ctx) }]; },
+  grow(v, ctx) { return [{ prop: 'flex-grow', value: num(v || '1', ctx) }]; },
+  shrink(v, ctx) { return [{ prop: 'flex-shrink', value: num(v || '1', ctx) }]; },
+  basis(v, ctx) { return [{ prop: 'flex-basis', value: len(v, ctx) }]; },
+  truncate() {
+    return [
+      { prop: 'overflow', value: 'hidden' },
+      { prop: 'text-overflow', value: 'ellipsis' },
+      { prop: 'white-space', value: 'nowrap' },
+    ];
+  },
+  // 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 [
+      { prop: 'position', value: 'absolute' },
+      { prop: 'width', value: '1px' },
+      { prop: 'height', value: '1px' },
+      { prop: 'padding', value: '0' },
+      { prop: 'margin', value: '-1px' },
+      { prop: 'overflow', value: 'hidden' },
+      { prop: 'clip-path', value: 'inset(50%)' },
+      { prop: 'white-space', value: 'nowrap' },
+      { prop: 'border', value: '0' },
+    ];
+  },
+  // 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
+  //   transition: 150 snap background-color, 300 transform
+  transition(v, ctx) {
+    const t = v.trim();
+    if (t === 'none') return [{ prop: 'transition', value: 'none' }];
+    const parts = topSplit(t, ',').map(s => s.trim()).filter(Boolean);
+    const out = [];
+    for (const part of parts) {
+      const atoms = part.split(/\s+/);
+      const dur = atoms[0];
+      if (!/^\d*\.?\d+(ms|s)?$/.test(dur)) {
+        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;
+      let k = 1;
+      let easing = 'ease';
+      if (atoms[k] && EASINGS[atoms[k]]) { easing = EASINGS[atoms[k]]; k++; }
+      else if (atoms[k] && /^(cubic-bezier|steps)\(/.test(atoms[k])) {
+        easing = resolveValue(atoms[k], { ...ctx, unitless: true });
+        k++;
+      }
+      let prop = 'all';
+      if (atoms.length > k) {
+        const raw = atoms.slice(k).join(' ').toLowerCase();
+        const p = DEFORM_TO_TRANSFORM[raw] || raw;
+        if (p !== 'all' && !KNOWN_PROPS.has(p)) {
+          ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown transition property "${raw}"`, hint: didYouMean(raw, [...KNOWN_PROPS, ...Object.keys(DEFORM_TO_TRANSFORM)]) });
+          continue;
+        }
+        prop = p;
+      }
+      out.push(`${prop} ${ms} ${easing}`);
+    }
+    if (!out.length) return [];
+    return [{ prop: 'transition', value: out.join(', ') }];
+  },
+  animate(v, ctx) {
+    const t = v.trim();
+    if (t === 'none') return [{ prop: '@animate', value: null }];
+    const atoms = t.split(/\s+/);
+    const spec = { motion: atoms[0], duration: 400, easing: EASINGS.smooth, fill: 'both', delay: 0 };
+    for (let k = 1; k < atoms.length; k++) {
+      const a = atoms[k];
+      if (/^\d+(ms|s)?$/.test(a)) {
+        const ms = a.endsWith('s') && !a.endsWith('ms') ? parseFloat(a) * 1000 : parseFloat(a);
+        if (k === 1) spec.duration = ms; else spec.delay = ms;
+        continue;
+      }
+      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.
+      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
+  // 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) {
+    const t = (v || '').trim();
+    if (t === 'none') return [{ prop: '@stagger', value: null }];
+    if (!/^\d+(?:\.\d+)?(?:ms|s)?$/.test(t)) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `stagger needs a duration like "60" or "120ms", or "none"`, hint: 'stagger offsets each child\'s animation delay by its position' });
+      return [];
+    }
+    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
+  // 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
+  // "nothing transparent may overlap anything" switch. Intentional overlays
+  // (scrims, veils, translucent navs) opt out with `overlap: allow`.
+  overlap(v, ctx) {
+    const t = (v || '').trim().toLowerCase();
+    if (t === 'allow' || t === 'none') return [{ prop: '@overlap', value: 'allow' }];
+    if (t === 'deny') return [{ prop: '@overlap', value: 'deny' }];
+    if (t === 'auto') return [{ prop: '@overlap', value: 'auto' }];
+    ctx.errors.push({
+      file: ctx.file, line: ctx.line,
+      message: `unknown overlap policy "${(v || '').trim()}"`,
+      hint: 'overlap is allow (default) · deny (always yield out of overlaps) · auto (yield only while below 100% opacity)',
+    });
+    return [];
+  },
+
+  /* ---------------------------------------------------------------- *
+   * 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
+   * pointer. bend-around is the odd one out: it curves a CONTAINER's
+   * children along an arc instead of deforming the element itself.
+   * ---------------------------------------------------------------- */
+  bend(v, ctx) { const n = degNum(v, 'bend', ctx); return n === null ? [] : [{ prop: '@bend', value: n }]; },
+  'bend-y'(v, ctx) { const n = degNum(v, 'bend-y', ctx); return n === null ? [] : [{ prop: '@bend-y', value: n }]; },
+  'bend-up'(v, ctx) { const n = degNum(v, 'bend-up', ctx); return n === null ? [] : [{ prop: '@bend-up', value: n }]; },
+  fold(v, ctx) { const n = degNum(v, 'fold', ctx); return n === null ? [] : [{ prop: '@fold', value: n }]; },
+  'bend-around'(v, ctx) {
+    const n = degNum(v, 'bend-around', ctx);
+    if (n === null) return [];
+    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`,
+        hint: 'try 30..120 for a visible arc',
+      });
+      return [];
+    }
+    return [{ prop: '@bend-around', value: n }];
+  },
+  stretch(v, ctx) {
+    const t = String(v).trim();
+    const m = t.match(/^(\d*\.?\d+)(?:\s+(horizontal|vertical|x|y))?$/i);
+    if (!m) {
+      ctx.errors.push({
+        file: ctx.file, line: ctx.line,
+        message: `stretch needs a positive factor, like "stretch: 1.2" or "stretch: 1.4 vertical"`,
+        hint: '1 is neutral · the other axis shrinks so volume stays constant',
+      });
+      return [];
+    }
+    const f = parseFloat(m[1]);
+    if (f <= 0) {
+      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',
+      });
+      return [];
+    }
+    const axisRaw = (m[2] || 'horizontal').toLowerCase();
+    const axis = axisRaw === 'y' ? 'vertical' : axisRaw === 'x' ? 'horizontal' : axisRaw;
+    return [{ prop: '@stretch', value: { factor: f, axis } }];
+  },
+
+  /* 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(v, ctx) {
+    const img = buildGradient(v, ctx);
+    return img ? [{ prop: 'background-image', value: img }] : [];
+  },
+  'gradient-text'(v, ctx) {
+    const img = buildGradient(v, ctx);
+    if (!img) return [];
+    return [
+      { prop: 'background-image', value: img },
+      { prop: 'background-clip', value: 'text' },
+      { prop: '-webkit-background-clip', value: 'text' },
+      { prop: 'color', value: 'transparent' },
+      { prop: '-webkit-text-fill-color', value: 'transparent' },
+    ];
+  },
+  'gradient-flow'(v, ctx) {
+    const t = (v || '').trim();
+    if (!t || t === 'none') return [{ prop: '@gradient-flow', value: null }];
+    const atoms = t.split(/\s+/);
+    const dur = atoms[0];
+    if (!/^\d+(\.\d+)?(ms|s)?$/.test(dur)) {
+      ctx.errors.push({
+        file: ctx.file, line: ctx.line,
+        message: `gradient-flow takes a duration like "6s" or "6000ms", or "none"`,
+        hint: 'gradient-flow loops the element\'s gradient sideways forever',
+      });
+      return [];
+    }
+    const ms = dur.endsWith('s') && !dur.endsWith('ms') ? parseFloat(dur) * 1000 : parseFloat(dur);
+    const spec = { duration: ms, easing: 'linear', direction: 'normal' };
+    for (let k = 1; k < atoms.length; k++) {
+      const a = atoms[k];
+      if (EASINGS[a]) { spec.easing = EASINGS[a]; continue; }
+      if (a === 'alternate' || a === 'alternate-reverse') { spec.direction = a; continue; }
+      ctx.errors.push({
+        file: ctx.file, line: ctx.line,
+        message: `unknown gradient-flow part "${a}"`,
+        hint: didYouMean(a, [...Object.keys(EASINGS), 'alternate', 'alternate-reverse']),
+      });
+    }
+    return [{ prop: '@gradient-flow', value: spec }];
+  },
+};
+
+/* ------------------------------------------------------------------ *
+ * resolveDecl — one declaration → zero or more engine decls
+ * ------------------------------------------------------------------ */
+
+function resolveDecl(prop, value, ctx) {
+  const errors = ctx.errors;
+  const ctx2 = { ...ctx, prop, errors };
+
+  if (prop.startsWith('--')) {
+    // 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
+    // (--brand) stay free-form custom properties, passed through unvalidated.
+    const outProp = prop.includes('.')
+      ? '--dssl-' + prop.slice(2).replace(/\./g, '-')
+      : prop;
+    return [{ prop: outProp, value: resolveValue(value, { ...ctx2, unitless: false, bareIdents: true }) }];
+  }
+
+  const sem = SEMANTIC[prop];
+  if (sem) return sem(value, ctx2);
+
+  if (!KNOWN_PROPS.has(prop)) {
+    errors.push({
+      file: ctx.file, line: ctx.line,
+      message: `unknown property "${prop}"`,
+      hint: didYouMean(prop, [...KNOWN_PROPS, ...Object.keys(SEMANTIC)]),
+    });
+    return [];
+  }
+  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
+}
+
+/* ------------------------------------------------------------------ *
+ * Media / container / signal normalization
+ * ------------------------------------------------------------------ */
+
+function normalizeMedia(query, ctx, line) {
+  let q = query.trim();
+  if (!q) {
+    ctx.errors.push({ file: ctx.file, line, message: '@media needs a condition', hint: 'e.g. @media 768  or  @media dark  or  @media (width >= 768)' });
+    return '(min-width: 0)';
+  }
+  // ---- v0.3 one-word sugar (the conditions everyone writes) ----
+  if (/^dark$/i.test(q)) return '(prefers-color-scheme: dark)';
+  if (/^light$/i.test(q)) return '(prefers-color-scheme: light)';
+  if (/^reduced-motion$/i.test(q)) return '(prefers-reduced-motion: reduce)';
+  // ---- bare-width sugar ----
+  //   @media 768        → (min-width: 768px)   "this wide or wider"
+  //   @media <= 768     → (max-width: 768px)   "narrower than this"
+  //   @media 480..960   → min + max range
+  const m = q.match(/^(<=|>=)?\s*(\d+(?:\.\d+)?)\s*(?:\.\.\s*(\d+(?:\.\d+)?))?$/);
+  if (m) {
+    const a = m[2] + 'px';
+    if (m[3] !== undefined) return `(min-width: ${a}) and (max-width: ${m[3]}px)`;
+    if (m[1] === '<=') return `(max-width: ${a})`;
+    return `(min-width: ${a})`;
+  }
+  // bare numbers become px:  (width >= 768)  →  (width >= 768px)
+  q = q.replace(/([>=<]\s*)(\d+(?:\.\d+)?)\b(?!\s*(?:px|%|em|rem|vh|vw|vmin|vmax|s|ms|deg|dppx|x))/g, '$1$2px');
+  return q;
+}
+
+function parseSignal(expr, ctx, line) {
+  const m = expr.match(/^([A-Za-z_][\w-]*)\s*(==|!=)\s*(.+)$/);
+  if (m) {
+    let v = m[3].trim();
+    if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) v = v.slice(1, -1);
+    return { name: m[1], op: m[2], value: v };
+  }
+  if (/^[A-Za-z_][\w-]*$/.test(expr.trim())) return { name: expr.trim(), op: 'truthy', value: null };
+  ctx.errors.push({ file: ctx.file, line, message: `bad @signal expression "${expr}"`, hint: 'try:  @signal theme == dark   or   @signal compact' });
+  return { name: expr.trim(), op: 'truthy', value: null };
+}
+
+/* ------------------------------------------------------------------ *
+ * The flattener
+ * ------------------------------------------------------------------ */
+
+export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
+  const errors = [];
+  const rules = [];
+  const shadowRules = [];
+  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 —
+  // but the engine prints them loudly so nobody debugs cascade order by hand
+  // ever again.
+  const warnings = [];
+  let tokenMap = new Map(Object.entries(baseTokens || DEFAULT_TOKENS));
+  const tokenLines = new Map(); // for docs/debug
+  let order = 0;
+  let ruleId = 0;
+
+  /* ---- pass 1: collect tokens / behaviors / motions ---- */
+
+  const collectTokens = (node, path, acc) => {
+    for (const child of node.children) {
+      if (child.kind === 'decl') {
+        const key = path ? path + '.' + child.prop : child.prop;
+        tokenMap.set(key, child.value);
+        tokenLines.set(key, child.line);
+        if (acc) acc.push(key);
+      } else if (child.kind === 'selector' || child.kind === 'tokens') {
+        // nested groups written as bare words: `color { ink: ... }`
+        collectTokens(child, path ? path + '.' + child.sel : child.sel, acc);
+      } else {
+        errors.push({ file, line: child.line, message: `unexpected "${child.kind}" inside tokens` });
+      }
+    }
+  };
+
+  const prepass = (nodes) => {
+    for (const node of nodes) {
+      if (node.kind === 'tokens') collectTokens(node, '');
+      else if (node.kind === 'behavior') {
+        if (behaviors[node.name]) errors.push({ file, line: node.line, message: `behavior "${node.name}" is defined twice` });
+        behaviors[node.name] = node;
+      } else if (node.kind === 'motion') {
+        motions[node.name] = node;
+      } else {
+        for (const child of node.children) if (child.kind !== 'decl') prepass([child]);
+      }
+    }
+  };
+  prepass(ast.children);
+
+  /* ---- motions → keyframes ---- */
+
+  const parseMotion = (name) => {
+    const node = motions[name];
+    if (!node) return null;
+    if (node._parsed) return node._parsed;
+    node._parsed = { essential: false, frames: [] };
+    const frameOf = (label) => {
+      if (label === 'from') return 0;
+      if (label === 'to') return 100;
+      const m = label.match(/^at\s+([0-9.]+)\s*%?$/);
+      return m ? parseFloat(m[1]) : null;
+    };
+    const ctxBase = { file, line: node.line, errors, tokens: tokenMap, tokenNames: [...tokenMap.keys()], prop: 'motion', unitless: false };
+    for (const child of node.children) {
+      if (child.kind === 'decl' && child.prop === 'essential') {
+        node._parsed.essential = child.value === '' || child.value === 'true';
+        continue;
+      }
+      if (child.kind === 'decl') {
+        errors.push({ file, line: child.line, message: `"${child.prop}" is not allowed inside motion`, hint: 'motions take from/to/at blocks and `essential`' });
+        continue;
+      }
+      if (child.kind === 'selector') {
+        const offset = frameOf(child.sel);
+        if (offset === null) {
+          errors.push({ file, line: child.line, message: `bad keyframe selector "${child.sel}"`, hint: 'use from, to, or at 40%' });
+          continue;
+        }
+        const props = {};
+        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;
+          const resolved = resolveDecl(d.prop, d.value, { ...ctxBase, line: d.line });
+          for (const r of resolved) {
+            if (r.prop.startsWith('--')) continue;
+            if (r.prop.startsWith('@')) {
+              if (r.prop === '@stretch' && r.value) {
+                deform.stretch = typeof r.value === 'object' ? Number(r.value.factor) : parseFloat(r.value);
+                deform.stretchAxis = (r.value && r.value.axis) || 'horizontal';
+              } else if (DEFORM_KEY[r.prop]) deform[DEFORM_KEY[r.prop]] = Number(r.value) || 0;
+              continue;
+            }
+            const camel = r.prop.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+            props[camel] = r.value;
+          }
+        }
+        if (deform.bend !== undefined || deform.bendY !== undefined || deform.stretch !== undefined ||
+            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.
+          const c = composeDeform(deform, props.transform || '', null);
+          props.transform = c.transform;
+          if (c.origin) props.transformOrigin = c.origin;
+        }
+        node._parsed.frames.push({ offset, props });
+      }
+    }
+    node._parsed.frames.sort((a, b) => a.offset - b.offset);
+    return node._parsed;
+  };
+
+  /* ---- token emission ---- */
+
+  const tokenNames = () => [...tokenMap.keys()];
+
+  const resolveTokenDecls = (keys, conds) => {
+    const decls = [];
+    const ctxBase = { file, line: 0, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: 'token', unitless: false };
+    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)
+      decls.push({ prop, value: resolveValue(raw, { ...ctxBase, prop: key, bareIdents: /^font/.test(key) }) });
+    }
+    if (!decls.length) return null;
+    return {
+      id: ruleId++, sel: ':root', media: conds.media, signals: conds.signals,
+      containers: conds.containers, layer: 'tokens', order: order++,
+      decls, file, line: 0, pseudo: null, states: new Set(),
+    };
+  };
+
+  /** used by index.js to install the shared registry as a base bundle */
+  // Built immediately, before the walk, so its cascade order sorts below every
+  // author rule (engine cascade: layer first, then source order).
+  const registryRule = resolveTokenDecls([...tokenMap.keys()], { media: [], signals: [], containers: [] });
+
+  /* ---- main recursive walk ---- */
+
+  const walk = (children, ctx, ctxRule) => {
+    for (const node of children) {
+      switch (node.kind) {
+        case 'decl': {
+          if (node.prop === 'use') {
+            const name = node.value.trim();
+            const bh = behaviors[name];
+            if (!bh) {
+              errors.push({ file, line: node.line, message: `unknown behavior "${name}"`, hint: didYouMean(name, Object.keys(behaviors)) });
+              break;
+            }
+            if (bh._active) { errors.push({ file, line: node.line, message: `behavior cycle involving "${name}"` }); break; }
+            bh._active = true;
+            walk(bh.children, ctx, ctxRule);
+            bh._active = false;
+            break;
+          }
+          const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, 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,
+            // 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;
+            ctxRule.decls.push({ ...r, line: node.line });
+          }
+          break;
+        }
+        case 'selector': {
+          const sel = ctx.sel === '' ? node.sel : combine(ctx.sel, node.sel);
+          const childCtx = { ...ctx, sel };
+          const sub = { decls: [] };
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
+          break;
+        }
+        case 'state': {
+          if (!ctx.sel) {
+            errors.push({ file, line: node.line, message: `"${node.name}" needs a selector around it` });
+            break;
+          }
+          const childCtx = { ...ctx, sel: ctx.sel + ':' + node.name };
+          const sub = { decls: [] };
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
+          break;
+        }
+        case 'media': {
+          const q = normalizeMedia(node.query, { errors, file, line: node.line }, node.line);
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, media: [...ctx.media, q] }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'container': {
+          const q = normalizeMedia(node.query || '(min-width: 0)', { errors, file, line: node.line }, node.line);
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, containers: [...ctx.containers, q] }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'signal': {
+          const sig = parseSignal(node.expr, { errors, file, line: node.line }, node.line);
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, signals: [...ctx.signals, sig] }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'layer':
+        case 'pin': {
+          const layer = node.kind === 'pin' ? 'pin' : (['tokens', 'base', 'components', 'utilities', 'pin'].includes(node.name) ? node.name : 'components');
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, layer }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'pseudo': {
+          const base = ctx.sel || '*'; // top-level ::selection etc. means every element
+          const srule = {
+            id: ruleId++, sel: base, pseudo: node.name,
+            media: ctx.media, signals: ctx.signals, containers: ctx.containers,
+            layer: ctx.layer, order: order++, decls: [], file, line: node.line,
+          };
+          for (const d of node.children) {
+            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, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
+            // 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.
+            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' });
+                continue;
+              }
+              srule.decls.push({ ...r, line: d.line });
+            }
+          }
+          if (srule.decls.length) shadowRules.push(srule);
+          break;
+        }
+        case 'tokens': {
+          if (ctx.sel) { errors.push({ file, line: node.line, message: 'tokens must be top-level or inside @media / @signal' }); break; }
+          // structural tracking: only keys THIS block declares are emitted,
+          // so conditional palettes don't shadow unrelated tokens
+          const ownKeys = [];
+          collectTokens(node, '', ownKeys);
+          const tr = ownKeys.length ? resolveTokenDecls(ownKeys, ctx) : null;
+          if (tr) rules.push(tr);
+          break;
+        }
+        case 'behavior':
+        case 'motion':
+          if (ctx.depth) errors.push({ file, line: node.line, message: `${node.kind} "${node.name}" must be top-level` });
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  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' });
+      return;
+    }
+    // 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
+    // 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
+      // 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' });
+          continue;
+        }
+        decls.push(d.prop === 'content' && d.value === '' ? { ...d, value: '""' } : d);
+      }
+      for (const { el, pseudo } of ps.parts) {
+        const name = pseudo.split(/[\s:(]/)[0];
+        if (!PSEUDO_ELEMENTS.has(name) && !VENDOR_PSEUDO.test(name)) {
+          errors.push({
+            file, line,
+            message: `unknown pseudo-element "::${pseudo}"`,
+            hint: 'try ::before, ::after, ::selection, or a vendor one like ::-webkit-scrollbar-thumb',
+          });
+          continue;
+        }
+        if (/:seen\b/.test(el)) {
+          errors.push({
+            file, line,
+            message: `the engine-native "seen" state can't combine with "::${name}" in shadow CSS`,
+            hint: 'style the element itself in a seen { } block instead',
+          });
+          continue;
+        }
+        // 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;
+        shadowRules.push({
+          id: ruleId++, sel: el, pseudo,
+          media: ctx.media, signals: ctx.signals, containers: ctx.containers,
+          layer: ctx.layer, order: order++, decls, file, line,
+        });
+      }
+      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' });
+      return;
+    }
+    warnDisplayClash(sub.decls);
+    rules.push({
+      id: ruleId++, sel: ctx.sel, media: ctx.media, signals: ctx.signals,
+      containers: ctx.containers, layer: ctx.layer, order: order++,
+      decls: sub.decls, file, line, pseudo: null,
+      states: scanStates(ctx.sel),
+    });
+  }
+
+  /* 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
+   * 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. */
+  function warnDisplayClash(decls) {
+    let explicit = null;
+    for (const d of decls) {
+      if (d.prop !== 'display') continue;
+      if (!d.via) { explicit = d; continue; }
+      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`,
+          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`,
+        });
+      }
+    }
+  }
+
+  /* ---- go ---- */
+
+  const topCtx = { sel: '', media: [], signals: [], containers: [], layer: 'components', depth: 0 };
+  const rootRule = { decls: [] };
+  walk(ast.children, topCtx, rootRule);
+  flush(rootRule, topCtx, 0);
+
+  // parse all motions that were referenced
+  for (const r of rules) {
+    for (const d of r.decls) {
+      if (d.prop === '@animate' && d.value && d.value.motion) {
+        const m = parseMotion(d.value.motion);
+        if (!m) {
+          errors.push({
+            file, line: d.line,
+            message: `unknown motion "${d.value.motion}"`,
+            hint: didYouMean(d.value.motion, Object.keys(motions)),
+          });
+          d.value.broken = true;
+        } else {
+          d.value.frames = m.frames;
+          d.value.essential = m.essential;
+        }
+      }
+    }
+  }
+
+  const mediaQueries = new Set();
+  for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
+
+  return { rules, shadowRules, motions, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
+}
+
+/** naive `&` substitution + descendant join */
+function combine(parent, child) {
+  if (child.includes('&')) return child.split('&').join(parent);
+  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)
+ * The `::` scan is string- and paren-aware so [data-x="::a"] can't false-hit. */
+function analyzePseudo(sel) {
+  // top-level comma split
+  const parts = [];
+  let depth = 0, q = null, cur = '';
+  for (const ch of sel) {
+    if (q) { cur += ch; if (ch === q) q = null; continue; }
+    if (ch === '"' || ch === "'") { q = ch; cur += ch; continue; }
+    if (ch === '(' || ch === '[') depth++;
+    else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+    if (ch === ',' && depth === 0) { parts.push(cur); cur = ''; continue; }
+    cur += ch;
+  }
+  parts.push(cur);
+
+  const splits = [];
+  let withPseudo = 0;
+  for (const part of parts) {
+    let idx = -1; depth = 0; q = null;
+    for (let i = 0; i < part.length - 1; i++) {
+      const ch = part[i];
+      if (q) { if (ch === q && part[i - 1] !== '\\') q = null; continue; }
+      if (ch === '"' || ch === "'") { q = ch; continue; }
+      if (ch === '(' || ch === '[') depth++;
+      else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+      else if (depth === 0 && ch === ':' && part[i + 1] === ':') { idx = i; break; }
+    }
+    if (idx === -1) { splits.push(null); continue; }
+    withPseudo++;
+    const el = part.slice(0, idx).trim();
+    const pseudo = part.slice(idx + 2).trim();
+    splits.push(el && pseudo ? { el, pseudo } : null);
+  }
+  if (withPseudo === 0) return { mode: 'none' };
+  if (withPseudo !== parts.length || splits.some(s => !s)) return { mode: 'mixed', parts: splits };
+  return { mode: 'all', parts: splits };
+}
+
+const STATE_SCAN = /:(hover|focus-visible|focus|active|disabled|checked|empty|target|invalid|valid|required|open|closed|read-only|read-write|placeholder-shown|first-child|last-child|only-child|seen)\b/g;
+function scanStates(sel) {
+  const s = new Set();
+  if (!sel) return s;
+  let m;
+  const re = new RegExp(STATE_SCAN.source, 'g');
+  while ((m = re.exec(sel))) s.add(m[1]);
+  return s;
+}

dssl-vscode/lib/engine/utils.js

@@ -0,0 +1,102 @@
+/* DSSL — utils.js — tiny shared helpers */
+
+export function levenshtein(a, b) {
+  if (a === b) return 0;
+  const m = a.length, n = b.length;
+  if (!m) return n;
+  if (!n) return m;
+  let prev = new Array(n + 1);
+  let cur = new Array(n + 1);
+  for (let j = 0; j <= n; j++) prev[j] = j;
+  for (let i = 1; i <= m; i++) {
+    cur[0] = i;
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + cost);
+    }
+    [prev, cur] = [cur, prev];
+  }
+  return prev[n];
+}
+
+/** best "did you mean ..." suggestion, or undefined */
+export function didYouMean(word, candidates) {
+  if (!word || !candidates || !candidates.length) return undefined;
+  let best = undefined, bestDist = Infinity;
+  const w = word.toLowerCase();
+  for (const c of candidates) {
+    if (!c) continue;
+    const d = levenshtein(w, String(c).toLowerCase());
+    if (d < bestDist) { bestDist = d; best = c; }
+  }
+  const tolerance = Math.max(2, Math.floor(w.length / 3));
+  return bestDist <= tolerance ? String(best) : undefined;
+}
+
+/* ------------------------------------------------------------------ *
+ * 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
+ * transform-origin. In keyframe mode there is no box yet, so they emit a
+ * transformOrigin for WAAPI instead.
+ * ------------------------------------------------------------------ */
+
+const r2 = (v) => Math.round(v * 100) / 100;
+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.
+ */
+export function composeDeform(d, base, box) {
+  const parts = [];
+  let origin = null;
+  const has3D = d.bend || d.bendY || d.fold || d.bendUp;
+  if (has3D) parts.push('perspective(900px)');
+  if (d.bend) parts.push(`rotateX(${d.bend}deg)`);
+  if (d.bendY) parts.push(`rotateY(${d.bendY}deg)`);
+  const h = box && box.h ? box.h : 0;
+  if (d.fold) {          // top edge pinned, bottom folds up toward the viewer
+    if (h > 0) parts.push(`translateY(${r2(-h / 2)}px)`, `rotateX(${d.fold}deg)`, `translateY(${r2(h / 2)}px)`);
+    else { parts.push(`rotateX(${d.fold}deg)`); origin = '50% 0%'; }
+  }
+  if (d.bendUp) {        // bottom edge pinned, the element rocks back like a drawbridge
+    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
+    const inv = r4(1 / d.stretch);
+    parts.push(d.stretchAxis === 'vertical'
+      ? `scaleY(${d.stretch}) scaleX(${inv})`
+      : `scaleX(${d.stretch}) scaleY(${inv})`);
+  }
+  const baseT = base && base !== 'none' ? String(base).trim() : '';
+  const all = baseT ? [...parts, baseT] : parts;
+  return { transform: all.length ? all.join(' ') : 'none', origin };
+}
+
+/**
+ * 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
+ * child, or null when there is nothing to arc (fewer than 2 children, no
+ * width, or a near-zero angle).
+ */
+export function arcLayout(n, width, deg) {
+  if (!n || n < 2 || !deg || !width || width <= 0) return null;
+  const half = (Math.abs(deg) / 2) * Math.PI / 180;
+  const sin = Math.sin(half);
+  if (sin < 1e-4) return null;
+  const R = r2((width / 2) / sin);
+  const angles = [];
+  for (let i = 0; i < n; i++) angles.push(r2(-deg / 2 + (deg * i) / (n - 1)));
+  return { R, angles };
+}

dssl-vscode/lib/props-docs.js

@@ -0,0 +1,117 @@
+/* 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.',
+  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`.',
+  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`.',
+  gradient: 'gradient as a sentence: `gradient: linear 135, color.accent -> color.ok`. Stops can be hex, name, token, alpha mix, or percent-positioned. A stop that is not a color is a compile error.',
+  'gradient-text': 'clips the gradient grammar into the glyphs: `gradient-text: linear to right, color.accent, color.ink`.',
+  'gradient-flow': 'the gradient drifts forever through WAAPI: `gradient-flow: 6s alternate`. Holds still under reduced-motion.',
+  bend: 'bows the element in 3D. Positive tips the top away, negative leans toward you. Bare numbers are degrees. Composes into the one transform channel.',
+  'bend-y': 'sideways bow. `bend-y: -18`.',
+  'bend-up': 'rocks back on its planted bottom edge, drawbridge-style. `bend-up: 14`.',
+  fold: 'swings up over its top edge like a closing page. `fold: 14`.',
+  stretch: 'cartoon squash-and-stretch that keeps volume: `stretch: 0.94` squeezes to 0.94 wide and honestly grows to 1/0.94 tall.',
+  'bend-around': 'curves a container\u2019s CHILDREN along a circular arc instead of deforming one element: `bend-around: -22` opens into a smile. Caps at \u00b1170\u00b0. Children keep their own hover bends.',
+  animate: 'run a motion: `animate: name duration [easing] [delay] [fill] [infinite] [alternate]`. Example: `animate: pulse 1600 infinite alternate`.',
+  stagger: 'choreographed children: `stagger: 70` fires each child\u2019s animation 70ms after its older sibling.',
+  transition: 'per-property transition: `transition: 200`, or `transition: 200 snap transform`. Honors reduced-motion.',
+  overlap: 'the anti-overlap policy: `auto` (engine shoves translucent elements apart), `deny` (this one never sits on anything), `allow` (exempt). Nothing below 100% opacity overlaps anything unless you say so.',
+  truncate: 'one-line ellipsis. Expands to overflow hidden, nowrap, text-overflow ellipsis.',
+  '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 { }`.',
+  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.',
+};
+
+export const CSS = {
+  display: 'passthrough CSS. Note: semantic shorthands (row, column, grid, stack) also write display \u2014 order matters, and the compiler warns when a shorthand clobbers an explicit display.',
+  position: 'passthrough CSS: static, relative, absolute, fixed, sticky.',
+  width: 'passthrough CSS. Bare numbers are pixels.',
+  height: 'passthrough CSS. Bare numbers are pixels.',
+  margin: 'passthrough CSS. Shorthand with 1-4 values.',
+  padding: 'passthrough CSS. Shorthand with 1-4 values.',
+  background: 'passthrough CSS, but prefer `gradient:` sentences for gradients.',
+  color: 'text color. Values: token (color.ink), hex, CSS color name, alpha mix (color.ink/85).',
+  border: 'passthrough CSS shorthand: `border: 1 solid color.line`.',
+  'border-radius': 'passthrough CSS \u2014 prefer `radius:`.',
+  'font-size': 'passthrough CSS. Bare numbers are pixels.',
+  'font-family': 'passthrough CSS. Bare multi-word font names are legal since v0.5.',
+  'line-height': 'passthrough CSS.',
+  'letter-spacing': 'passthrough CSS.',
+  'text-align': 'passthrough CSS: left, center, right, justify.',
+  'text-transform': 'passthrough CSS: uppercase, lowercase, capitalize.',
+  'white-space': 'passthrough CSS: nowrap, pre, pre-wrap.',
+  opacity: 'passthrough CSS. Below 100% the overlap policy wakes up (see `overlap`).',
+  transform: 'passthrough CSS \u2014 deform (bend/stretch/fold) composes into this channel.',
+  translate: 'the transform channel the engine itself uses for overlap escapes; animating translate never fights the engine.',
+  rotate: 'passthrough CSS.',
+  scale: 'passthrough CSS.',
+  filter: 'passthrough CSS: blur(10), brightness(1.1).',
+  'backdrop-filter': 'passthrough CSS: blur(10).',
+  outline: 'passthrough CSS: `outline: 2 solid color.accent`.',
+  cursor: 'passthrough CSS: pointer, default, not-allowed.',
+  'z-index': 'passthrough CSS.',
+  overflow: 'passthrough CSS: hidden, auto, scroll, clip.',
+  'object-fit': 'passthrough CSS: cover, contain.',
+  gap: 'passthrough CSS \u2014 or let row:/column: set it inline.',
+  'flex-direction': 'passthrough CSS \u2014 row:/column: set it.',
+  'flex-wrap': 'passthrough CSS: wrap, nowrap.',
+  'justify-content': 'passthrough CSS \u2014 row:/column: can set it.',
+  'align-items': 'passthrough CSS \u2014 row:/column: can set it.',
+  'grid-template-columns': 'passthrough CSS \u2014 `grid: 3` is the sugar.',
+  'grid-template-rows': 'passthrough CSS.',
+  'align-content': 'passthrough CSS.',
+  'box-shadow': 'passthrough CSS \u2014 prefer `shadow:`.',
+  inset: 'passthrough CSS.',
+  'aspect-ratio': 'passthrough CSS: `aspect-ratio: 16 9`.',
+  'user-select': 'passthrough CSS: none stops text selection (pairs with pointer-events: none for veils).',
+  'pointer-events': 'passthrough CSS: none lets clicks and selection fall through overlays.',
+  'scrollbar-color': 'passthrough CSS for themed scrollbars.',
+  'scrollbar-width': 'passthrough CSS.',
+  'accent-color': 'passthrough CSS for native controls.',
+  'will-change': 'passthrough CSS.',
+  content: 'pseudo-element content, required for ::before/::after. Empty is auto-corrected to "".',
+  top: 'passthrough CSS.',
+  right: 'passthrough CSS.',
+  bottom: 'passthrough CSS.',
+  left: 'passthrough CSS.',
+};
+
+export const STATES = {
+  hover: 'engine-native hover: real events, enters and leaves, re-evaluates descendants too.',
+  focus: 'engine-native focus state.',
+  'focus-visible': 'keyboard-focus only. The focus-ring behavior\u2019s home.',
+  active: 'mouse/touch down.',
+  press: 'alias for active.',
+  pressed: 'alias for active.',
+  disabled: 'matches while the element is disabled.',
+  checked: 'matches while the element is checked.',
+  empty: 'matches an element with no children.',
+  target: 'matches when the element is the URL fragment target.',
+  seen: 'fires once, first time the element scrolls into view. Zero-JS reveal-on-scroll; composes with stagger.',
+};
+
+export const AT_RULES = {
+  '@media': 'conditions: `@media (max-width: 860)`, sugar forms `@media dark`, `@media light`, `@media reduced-motion`, bare widths, `<=` ranges.',
+  '@container': 'evaluates against the nearest ancestor (or self) with a container-type: `@container (min-width: 480)`.',
+  '@signal': 'the JS bridge: `@signal menuOpen { ... }` re-evaluates when DSSL.signal(\u0027menuOpen\u0027, true) fires. Mirrors onto data-dssl-signal-* attributes.',
+  '@layer': 'cascade layers: `@layer base { }`, `@layer components { }`, `@layer utilities { }`. Cascade is (layer, source order) \u2014 no specificity, no !important.',
+};
+
+export const BLOCKS = {
+  tokens: 'define design tokens: `tokens { color { ink: #16161d } radius { md: 14 } space { 9: 96 } }`. Numeric keys are legal. Referenced as color.ink, radius.md, space.9. Trailing /n adds alpha.',
+  behavior: 'a named rule group you can `use` anywhere: `behavior focus-ring { focus-visible { ... } }`.',
+  motion: 'a named keyframe animation, run with `animate:`: `motion pulse { from { } to { } }`.',
+  pin: 'must-win declarations. The cascade ranks tokens < base < components < utilities < pin. This is the ONLY way to force a win \u2014 there is no !important.',
+};
+
+export const PROPERTY_NAMES = [...Object.keys(SEMANTIC), ...Object.keys(CSS)];

dssl-vscode/package.json

@@ -0,0 +1,67 @@
+{
+  "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.7.1",
+  "publisher": "EHS-Studio",
+  "license": "MIT",
+  "engines": {
+    "vscode": "^1.82.0"
+  },
+  "categories": [
+    "Programming Languages",
+    "Linters"
+  ],
+  "keywords": [
+    "dssl",
+    "css",
+    "styling",
+    "design tokens",
+    "style language"
+  ],
+  "activationEvents": [
+    "onLanguage:dssl"
+  ],
+  "main": "./extension.js",
+  "contributes": {
+    "languages": [
+      {
+        "id": "dssl",
+        "aliases": [
+          "DSSL",
+          "dssl"
+        ],
+        "extensions": [
+          ".dssl"
+        ],
+        "configuration": "./language-configuration.json"
+      }
+    ],
+    "grammars": [
+      {
+        "language": "dssl",
+        "scopeName": "source.dssl",
+        "path": "./syntaxes/dssl.tmLanguage.json"
+      }
+    ],
+    "configuration": {
+      "title": "DSSL",
+      "properties": {
+        "dssl.diagnostics.enable": {
+          "type": "boolean",
+          "default": true,
+          "description": "Run the real DSSL compiler on save and change, and surface errors and warnings as diagnostics."
+        },
+        "dssl.diagnostics.debounce": {
+          "type": "number",
+          "default": 250,
+          "description": "Milliseconds to wait after a keystroke before re-running the compiler."
+        }
+      }
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://huggingface.co/EHS-Studio/dssl"
+  }
+}

dssl-vscode/syntaxes/dssl.tmLanguage.json

@@ -0,0 +1,189 @@
+{
+  "name": "DSSL",
+  "scopeName": "source.dssl",
+  "patterns": [
+    { "include": "#comments" },
+    { "include": "#at-rules" },
+    { "include": "#block-keywords" },
+    { "include": "#use" },
+    { "include": "#state-headers" },
+    { "include": "#strings" },
+    { "include": "#properties" },
+    { "include": "#values" },
+    { "include": "#selectors" }
+  ],
+  "repository": {
+    "comments": {
+      "patterns": [
+        {
+          "name": "comment.line.double-slash.dssl",
+          "match": "//.*$"
+        },
+        {
+          "name": "comment.block.dssl",
+          "begin": "/\\*",
+          "end": "\\*/",
+          "patterns": [{ "include": "#values" }]
+        }
+      ]
+    },
+    "strings": {
+      "patterns": [
+        { "name": "string.quoted.double.dssl", "begin": "\"", "end": "\"", "patterns": [{ "include": "#values" }] },
+        { "name": "string.quoted.single.dssl", "begin": "'", "end": "'", "patterns": [{ "include": "#values" }] }
+      ]
+    },
+    "at-rules": {
+      "patterns": [
+        {
+          "name": "meta.at-rule.dssl",
+          "match": "(@)(media|container|signal|layer|supports)\\b([^\\n{]*)",
+          "captures": {
+            "1": { "name": "punctuation.definition.at-rule.dssl" },
+            "2": { "name": "keyword.control.at-rule.dssl" },
+            "3": {
+              "patterns": [
+                { "include": "#values" },
+                { "name": "entity.name.condition.dssl", "match": "[\\w-]+\\s*\\(" },
+                { "name": "variable.other.signal.dssl", "match": "\\b[a-z][\\w-]*\\b" }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    "block-keywords": {
+      "patterns": [
+        {
+          "name": "meta.tokens-block.dssl",
+          "match": "^\\s*(tokens|pin)(?=\\s*\\{)",
+          "captures": { "1": { "name": "keyword.control.block.dssl" } }
+        },
+        {
+          "name": "meta.named-block.dssl",
+          "match": "^\\s*(behavior|motion)\\s+([\\w-]+)(?=\\s*\\{)",
+          "captures": {
+            "1": { "name": "keyword.control.block.dssl" },
+            "2": { "name": "entity.name.function.dssl" }
+          }
+        }
+      ]
+    },
+    "use": {
+      "patterns": [
+        {
+          "name": "meta.use-behavior.dssl",
+          "match": "(?<=^\\s*|;\\s*)(use)\\s+([\\w-]+)",
+          "captures": {
+            "1": { "name": "keyword.control.use.dssl" },
+            "2": { "name": "entity.name.function.dssl" }
+          }
+        }
+      ]
+    },
+    "state-headers": {
+      "patterns": [
+        {
+          "name": "meta.state-block.dssl",
+          "match": "^\\s*(hover|focus|focus-visible|active|press|pressed|disabled|checked|empty|target|seen|before|after)(?=\\s*\\{)",
+          "captures": { "1": { "name": "keyword.control.state.dssl" } }
+        }
+      ]
+    },
+    "properties": {
+      "patterns": [
+        {
+          "name": "meta.property.dssl",
+          "match": "(?<=^\\s*|;\\s*|\\{\\s*)(--?[\\w-]+)\\s*:(?![^;\\n]*\\{)",
+          "captures": {
+            "1": {
+              "patterns": [
+                {
+                  "name": "support.type.property-name.custom.dssl",
+                  "match": "^--"
+                },
+                {
+                  "name": "support.type.property-name.dssl",
+                  "match": ".+"
+                }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    "values": {
+      "patterns": [
+        { "include": "#comments" },
+        { "include": "#strings" },
+        {
+          "name": "constant.numeric.token-ref.dssl",
+          "match": "(?<=[\\s:(,])([\\w-]+\\.[\\w-]+(?:\\.[\\w-]+)*)",
+          "captures": { "1": { "name": "variable.other.token.dssl" } }
+        },
+        {
+          "name": "constant.other.color.hex.dssl",
+          "match": "#[0-9a-fA-F]{3,8}\\b"
+        },
+        {
+          "name": "constant.numeric.dssl",
+          "match": "(?<![\\w.#-])-?\\d+(?:\\.\\d+)?(?:%|px|s|ms|deg|fr|em|rem|vh|vw|ch)?"
+        },
+        {
+          "name": "support.constant.keyword.dssl",
+          "match": "\\b(infinite|alternate|alternate-reverse|reverse|snap|essential|linear|ease|ease-in|ease-out|ease-in-out|from|to|odd|even|flex-start|flex-end|center|stretch|baseline|nowrap|wrap|bold|manual|pixelated|crisp-edges|solid|dashed|dotted|hidden|visible|sticky|absolute|relative|fixed|block|inline|flex|grid|left|right|top|bottom|both|forwards|backwards|none|auto|inherit|initial|unset|revert)\\b"
+        },
+        {
+          "name": "keyword.operator.arrow.dssl",
+          "match": "->"
+        },
+        {
+          "name": "keyword.operator.alpha.dssl",
+          "match": "(?<=\\w)/\\d+"
+        },
+        {
+          "name": "punctuation.separator.comma.dssl",
+          "match": ","
+        }
+      ]
+    },
+    "selectors": {
+      "patterns": [
+        {
+          "name": "meta.selector.dssl",
+          "match": "(?<![\\w-])\\.[\\w-]+",
+          "captures": { "0": { "name": "entity.other.attribute-name.class.dssl" } }
+        },
+        {
+          "name": "meta.selector.id.dssl",
+          "match": "(?<![\\w-])#[\\w-]+",
+          "captures": { "0": { "name": "entity.other.attribute-name.id.dssl" } }
+        },
+        {
+          "name": "keyword.operator.parent.dssl",
+          "match": "&"
+        },
+        {
+          "name": "keyword.operator.combinator.dssl",
+          "match": ">"
+        },
+        {
+          "name": "entity.name.tag.dssl",
+          "match": "(?<![\\w.\\-#])([a-zA-Z][\\w-]*)(?=[\\s,{>:])"
+        },
+        {
+          "name": "entity.other.pseudo-class.dssl",
+          "match": "::?(-webkit-|-moz-|-ms-)?[\\w-]+(?![\\w-])"
+        },
+        {
+          "name": "punctuation.section.block.begin.dssl",
+          "match": "\\{"
+        },
+        {
+          "name": "punctuation.section.block.end.dssl",
+          "match": "\\}"
+        }
+      ]
+    }
+  }
+}

public/dssl/index.js

@@ -18,7 +18,7 @@ import { parse } from './parser.js';
 import { resolve, DEFAULT_TOKENS } from './resolver.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.7.0';
+export const VERSION = '0.7.1';
 
 let counter = 0;
 const engines = new Map();

public/dssl/parser.js

@@ -79,8 +79,14 @@ 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
+      // 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.
       while (i < src.length && src[i] !== '\n') i++;
-      out += '\n'; i--; continue;
+      if (i < src.length) i--; // reprocess the newline once, below
+      continue;
     }
     if (c === '/' && n === '*') {
       let j = i + 2;

public/dssl/resolver.js

@@ -26,7 +26,9 @@ import { PSEUDO_ELEMENTS, VENDOR_PSEUDO } from './parser.js';
  * Vocabulary
  * ------------------------------------------------------------------ */
 
-const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,none,auto,currentcolor,transparent,' +
+// exported for the editor extension: completions ride the same list the
+// compiler validates against, so the two can never drift apart
+export const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,none,auto,currentcolor,transparent,' +
   'black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua,' +
   'orange,gold,pink,brown,violet,cyan,magenta,indigo,crimson,coral,tomato,goldenrod,khaki,' +
   'slategray,slategrey,dimgray,dimgrey,lightgray,lightgrey,darkgray,darkgrey,gainsboro,whitesmoke,' +

public/llms.txt

@@ -0,0 +1,51 @@
+# DSSL
+
+> DSSL is a style language for the web that replaces CSS. You write `.dssl` files, the page loads a ~20 kB engine, and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
+
+- Site (docs, playground, changelog, bench): https://dssl-sable.vercel.app
+- Repo + full docs in the README: https://huggingface.co/EHS-Studio/dssl
+- Install: `curl -fsSL https://dssl-sable.vercel.app/install.sh | sh` (or the zip: https://dssl-sable.vercel.app/dssl-engine.zip)
+- Version: 0.7.1 (engine), MIT license
+- Feature matrix vs CSS: see PARITY.md in the repo
+- For agents working ON the codebase: see AGENTS.md in the repo
+
+## The five things reviewers ask about
+
+1. No build step. Styles are source files linked with `<link rel="stylesheet/dssl">`. The engine auto-boots and restyles the live DOM, including nodes added later.
+2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled. For content pages that must not happen, use prerendering (snapshot the engine's first pass to static HTML; planned, tracked in PARITY.md) or choose another tool. The engine's own docs say this plainly.
+3. Exit cost is zero. Abandoning DSSL leaves you a page of valid inline styles and one small shadow stylesheet for pseudo-elements. There is nothing to un-install from your markup.
+4. Speed has a handbrake. `DSSL.freeze()` detaches every observer and listener after first paint and leaves the resolved look at zero engine cost; `unfreeze()` re-arms. A gate prefilter skips obvious non-matches before native matching. The Bench page on the site measures 100 / 1,000 / 10,000 nodes on your machine: CSS `<style>` vs DSSL live vs DSSL frozen.
+5. The cascade is (layer, source order). No specificity, no !important. `pin { }` is the only must-win block. The compiler refuses to guess: unknown tokens, properties and values fail loudly with did-you-mean; `--*` custom properties pass through unvalidated on purpose.
+
+## Language surface (v0.7.1)
+
+- Selectors: the full CSS surface rides native matching, including `:nth-child()`, `:not()`, `:is()`, `:where()`, `:has()`, combinators, attributes, nesting with `&`.
+- States as nested blocks: `hover`, `focus`, `focus-visible`, `active`, `disabled`, `checked`, `empty`, `target`, plus `seen` (fires once on first viewport entry, composes with `stagger:`).
+- Tokens built in: `color.*`, `space.1-8`, `radius.*`, `shadow.*`, `font.*`; custom `tokens { }` blocks with numeric keys (`space { 9: 96 }`), alpha suffixes (`color.ink/85`), per-subtree re-declaration (`--color.accent: color.err`).
+- Layout sugar: `row: gap space.4 between center`, `column:`, `grid: 3 gap 12`, `stack: center`, `center: both` (promotes a formatting context so alignment can never silently no-op), `size: 40 20`.
+- Pseudo-elements (`::before`, `::after`, `::placeholder`, `::selection`, `::marker`, `::backdrop`, `::first-line`, `::first-letter`, vendor ones) compile to one real shadow stylesheet; unknown pseudo names are compile errors.
+- Conditions: `@media` (with `dark`, `light`, `reduced-motion` sugar and `<=` ranges), `@container`, `@signal menuOpen { }` bridged from `DSSL.signal()`, `@layer base|components|utilities`, `pin { }`.
+- Motion: `motion name { from { } to { } }` via WAAPI; `animate: pulse 1600 infinite alternate`; `stagger: 70`; reduced-motion respected unless a motion declares `essential`.
+- Deform family: `bend`, `bend-y`, `bend-up`, `fold`, `stretch` (volume-honest squash), `bend-around` (children ride an arc). Compose into the one transform channel, state- and transition-friendly.
+- Gradients as sentences: `gradient: linear 135, color.accent -> color.ok`, `gradient-text:`, `gradient-flow: 6s alternate`. Non-color stops are compile errors.
+- Overlap policy: nothing below 100% opacity overlaps anything unless `overlap: allow`; `deny` is unconditional; pairs with `pointer-events: none` so veils stop eating clicks and text selection.
+- Behaviors: named rule groups applied with `use focus-ring`.
+- Warnings channel (v0.7): things that compile but are probably wrong, e.g. a layout shorthand expanding to `display` and clobbering an earlier explicit `display:` in the same rule.
+
+## JS API
+
+```js
+DSSL.load(['/styles/site.dssl'])   // fetch + apply, in order
+DSSL.apply(src, { scope, name })   // scoped engines for widgets
+DSSL.compile(src)                  // parse + resolve, no DOM (powers editors)
+DSSL.signal('menuOpen', true)      // the JS -> styles bridge
+DSSL.freeze() / DSSL.unfreeze()    // the speed handbrake
+DSSL.explain(el, { quiet: true })  // matched rules, file/line, winning decls per property
+DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
+```
+
+Wait for the `dssl-ready` event on `window` before measuring layout: the engine styles the DOM after DOMContentLoaded, and scripts that measure earlier read a half-styled world.
+
+## Editor support
+
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. Source lives in `dssl-vscode/` in the repo.

public/styles/bench.dssl

@@ -0,0 +1,125 @@
+// bench.dssl — the benchmark view. The page measures the engine; the engine
+// styles the page. tabular numbers come from the JS side (canvas of fonts
+// varies), everything else lives here.
+
+.bench-wrap {
+  max-width: 880
+  margin: 0 auto
+}
+
+.bench-title {
+  font-size: 30
+  font-weight: bold
+}
+
+.bench-sub {
+  color: color.muted
+  margin: 8 0 0
+}
+
+.bench-controls {
+  row: gap 10 wrap
+  margin: 24 0
+}
+
+.bench-btn {
+  padding: 10 18
+  radius: md
+  background: color.card
+  border: 1 solid color.line
+  color: color.ink
+  cursor: pointer
+  transition: 150
+  font-size: 14
+
+  hover {
+    background: color.accent/10
+    border-color: color.accent
+    translate: 0 -1
+  }
+  active { translate: 0 0 }
+}
+
+.bench-btn.on {
+  background: color.accent/16
+  border-color: color.accent
+}
+
+.bench-btn:disabled {
+  opacity: 0.55
+  cursor: default
+  hover {
+    background: color.card
+    border-color: color.line
+    translate: 0 0
+  }
+}
+
+.bench-table {
+  width: 100%
+  border-collapse: collapse
+  margin: 12 0
+}
+
+.bench-table th {
+  text-align: left
+  padding: 8 10
+  border-bottom: 2 solid color.line
+  font-size: 12
+  color: color.muted
+  text-transform: uppercase
+}
+
+.bench-table td {
+  padding: 8 10
+  border-bottom: 1 solid color.line
+  font-size: 14
+}
+
+.bench-table td.num {
+  text-align: right
+}
+
+.bench-lane-css  { color: color.muted }
+.bench-lane-live { }
+.bench-lane-frozen { }
+
+.bench-stage {
+  height: 300
+  overflow: hidden
+  border: 1 solid color.line
+  radius: md
+  margin: 12 0
+  position: relative
+}
+
+.bench-stage:empty { display: none }
+
+.bench-stage-item {
+  padding: 5 10
+  border-bottom: 1 solid color.line
+  background: color.card
+  color: color.ink
+  font-size: 13
+}
+
+.bench-note {
+  font-size: 13
+  color: color.muted
+  margin: 6 0
+}
+
+.bench-freeze-stats {
+  font-size: 13
+  color: color.ok
+  margin: 4 0
+}
+
+.bench-err {
+  color: color.err
+  font-size: 13
+}
+
+@media (max-width: 700) {
+  .bench-table th, .bench-table td { padding: 6 6; font-size: 12 }
+}

scripts/sync-extension-engine.mjs

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+/* sync-extension-engine.mjs — copy the real compiler into the editor
+ * extension so diagnostics in the editor are the SAME errors the browser
+ * shows. Run after any engine change, before packaging the .vsix. */
+import { copyFileSync, readFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const files = ['parser.js', 'resolver.js', 'utils.js'];
+
+for (const f of files) {
+  const src = path.join(root, 'public', 'dssl', f);
+  const dst = path.join(root, 'dssl-vscode', 'lib', 'engine', f);
+  copyFileSync(src, dst);
+  const hash = (p) => createHash('sha256').update(readFileSync(p)).digest('hex').slice(0, 12);
+  const ok = hash(src) === hash(dst);
+  console.log(`${ok ? 'synced' : 'MISMATCH'} ${f}`);
+}
+console.log('engine copies now identical to public/dssl/');

scripts/test-v071.mjs

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+/* test-v071.mjs — v0.7.1 regression: comment line numbers.
+ * The extension's test suite caught it: every `//` comment doubled a newline
+ * in the stripped source, so every line number after the first comment
+ * drifted +1 and diagnostics pointed one line late. Block comments were
+ * fine; line comments were lying. These tests pin the fix. */
+import { parse } from '../public/dssl/parser.js';
+import { resolve } from '../public/dssl/resolver.js';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+let passed = 0, failed = 0;
+const ok = (cond, name) => {
+  if (cond) { passed++; console.log(`  ok  ${name}`); }
+  else { failed++; console.log(`FAIL  ${name}`); }
+};
+
+console.log('1 — comment placements keep true line numbers');
+{
+  const cases = [
+    ['leading', '// c\n.a {\n  x: 1\n}', 3],
+    ['inner', '.a {\n  // c\n  x: 1\n}', 3],
+    ['trailing', '.a {\n  x: 1 // c\n}', 2],
+    ['block leading', '/* c */\n.a {\n  x: 1\n}', 3],
+    ['block inner', '.a {\n  /* c */\n  x: 1\n}', 3],
+    ['many comments', '// one\n// two\n.a {\n  // three\n  x: 1 // four\n}', 5],
+    ['comment at eof no newline', '.a {\n  x: 1\n}\n// tail', null],
+    ['crlf', '// c\r\n.a {\r\n  x: 1\r\n}', 3],
+  ];
+  for (const [name, src, want] of cases) {
+    const { ast, errors } = parse(src, 't.dssl');
+    const rule = ast.children.find((n) => n.kind === 'selector');
+    const got = rule ? rule.children[0].line : null;
+    const bad = errors.filter((e) => !/missing|not a valid|expected/.test(e.message));
+    ok((want === null || got === want) && bad.length === 0, `${name}: decl line ${got}${want === null ? '' : ' (want ' + want + ')'}`);
+  }
+}
+
+console.log('2 — errors and warnings carry honest lines after comments');
+{
+  const src = '// header comment\n.nav-links {\n  display: none\n  column: gap 2\n}\n.bad {\n  background: colr.accent\n}\n';
+  // lines 1-based: display=3, column=4, colr=7
+  const { ast } = parse(src, 't.dssl');
+  const doc = resolve(ast, 't.dssl', {});
+  const warn = doc.warnings.find((w) => w.message.includes('column'));
+  ok(warn && warn.line === 4, `ordering warning fires on the column: line (got ${warn && warn.line}, want 4)`);
+  const err = doc.errors.find((e) => e.message.includes('colr'));
+  ok(err && err.line === 7, `misspelled token error on its own line (got ${err && err.line}, want 7)`);
+}
+
+console.log('3 — the real site stylesheets: spot-check line honesty');
+{
+  // parse a real stylesheet that opens with a comment block and verify a
+  // known rule lands where it lives on disk
+  import('node:fs').then(({ readFileSync }) => {
+    try {
+      const p = path.join(here, '..', 'public', 'styles', 'tokens.dssl');
+      const src = readFileSync(p, 'utf8');
+      const lines = src.split('\n');
+      // find a real declaration line with a known shape
+      const idx = lines.findIndex((l) => /--dssl-color-ink/.test(l));
+      if (idx >= 0) {
+        const { ast } = parse(src, 'tokens.dssl');
+        let found = null;
+        const walk = (n) => {
+          if (found) return;
+          for (const c of n.children || []) {
+            if (c.kind === 'decl' && /ink/.test(c.prop || '')) { found = c; return; }
+            walk(c);
+          }
+        };
+        walk(ast);
+        ok(found && found.line === idx + 1, `tokens.dssl decl on disk line ${idx + 1}, parser says ${found && found.line}`);
+      } else {
+        ok(true, 'tokens.dssl shape changed; spot-check skipped');
+      }
+    } catch (e) {
+      ok(false, 'site stylesheet spot-check threw: ' + e.message);
+    }
+    finish();
+  });
+}
+
+function finish() {
+  console.log(`\n${passed} passed, ${failed} failed`);
+  process.exit(failed ? 1 : 0);
+}

src/app/layout.tsx

@@ -28,7 +28,7 @@ const prePaint = `
 // executes (right after parse, before first paint), so there is no fetch
 // waterfall and no wait for React hydration. Server-side read also means a
 // browser refresh picks up .dssl edits instantly in dev.
-const DSSL_SHEETS = ["tokens", "site", "home", "docs", "playground", "changelog"] as const;
+const DSSL_SHEETS = ["tokens", "site", "home", "docs", "playground", "changelog", "bench"] as const;
 
 function dsslInlineStyles(): { name: string; src: string }[] {
   return DSSL_SHEETS.map((name) => {

src/components/dssl/SiteRoot.tsx

@@ -7,9 +7,10 @@ import CheatSheetView from "./views/CheatSheetView";
 import SpecView from "./views/SpecView";
 import PlaygroundView from "./views/PlaygroundView";
 import ChangelogView from "./views/ChangelogView";
+import BenchView from "./views/BenchView";
 import { SunIcon, MoonIcon, MenuIcon } from "./icons";
 
-export type ViewName = "home" | "docs" | "cheat" | "spec" | "playground" | "changelog";
+export type ViewName = "home" | "docs" | "cheat" | "spec" | "playground" | "changelog" | "bench";
 
 const VIEWS: { name: ViewName; label: string }[] = [
   { name: "home", label: "Home" },
@@ -18,6 +19,7 @@ const VIEWS: { name: ViewName; label: string }[] = [
   { name: "spec", label: "Spec" },
   { name: "playground", label: "Playground" },
   { name: "changelog", label: "Changelog" },
+  { name: "bench", label: "Bench" },
 ];
 
 function viewFromHash(): ViewName {
@@ -120,7 +122,7 @@ export default function SiteRoot() {
           </nav>
 
           <div className="nav-side">
-            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.7.0</a>
+            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.7.1</a>
             <button type="button" className="theme-btn" onClick={cycleTheme} aria-label="Toggle color theme" title="Theme: auto / light / dark">
               <span className="icon-sun"><SunIcon /></span>
               <span className="icon-moon"><MoonIcon /></span>
@@ -142,13 +144,14 @@ export default function SiteRoot() {
         {view === "spec" && <SpecView />}
         {view === "playground" && <PlaygroundView />}
         {view === "changelog" && <ChangelogView />}
+        {view === "bench" && <BenchView />}
       </main>
 
       <footer className="footer">
         <div className="wrap footer-inner">
           <div className="footer-col">
             <div className="footer-note">
-              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.7.0 while
+              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.7.1 while
               building this site; every feature it needed, it grew, and every bug you sent got
               fixed for real. This page runs on its own engine, no CSS files attached —
               the engine styles this DOM directly.

src/components/dssl/views/BenchView.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/* The benchmark measures the engine while the engine styles the page.
+ * Three lanes, one question each:
+ *   CSS     — a real <style> tag, the platform baseline
+ *   DSSL    — the live engine, ambient reactivity on
+ *   DSSL ❄  — the engine frozen right after first paint (v0.7 freeze())
+ * Metrics: first paint (build + full style application, median of 3) and
+ * restyle-all (one knob flipped, every node changes color).
+ * Honest by construction: synthetic nodes, one machine, your browser.
+ * The frozen lane's restyle is an explicit developer action (signal), not
+ * ambient churn — that is the whole point of freeze, and the note says so. */
+
+declare global {
+  interface Window {
+    DSSL?: any;
+  }
+}
+
+const BENCH_SRC = `
+.bench-stage-item {
+  padding: 5 10
+  border-bottom: 1 solid color.line
+  background: color.card
+  color: color.ink
+  font-size: 13
+}
+@signal benchStorm {
+  .bench-stage-item { background: #dbe7ff; color: #14243f }
+}
+`;
+
+const CSS_SRC = `
+.bench-stage-item { padding: 5px 10px; border-bottom: 1px solid var(--dssl-color-line); background: var(--dssl-color-card); color: var(--dssl-color-ink); font-size: 13px; }
+.bench-stage.on .bench-stage-item { background: #dbe7ff; color: #14243f; }
+`;
+
+const SIZES = [100, 1000, 10000];
+const LANES = [
+  { id: "css", label: "CSS <style>" },
+  { id: "live", label: "DSSL live" },
+  { id: "frozen", label: "DSSL frozen" },
+] as const;
+
+type LaneId = (typeof LANES)[number]["id"];
+type Row = { count: number; lane: LaneId; paint: number; restyle: number };
+
+const settle = () =>
+  new Promise<void>((r) =>
+    requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(r, 20)))
+  );
+
+function buildNodes(host: HTMLElement, count: number) {
+  let html = "";
+  for (let i = 0; i < count; i++) html += `<div class="bench-stage-item">row ${i}</div>`;
+  host.innerHTML = html;
+}
+
+const median = (xs: number[]) => {
+  const s = [...xs].sort((a, b) => a - b);
+  return s[Math.floor(s.length / 2)];
+};
+
+export default function BenchView() {
+  const stageRef = useRef<HTMLDivElement | null>(null);
+  const styleRef = useRef<HTMLStyleElement | null>(null);
+  const [rows, setRows] = useState<Row[]>([]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [freezeStats, setFreezeStats] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    return () => {
+      // leave the site exactly as we found it
+      if (styleRef.current) styleRef.current.remove();
+      if (stageRef.current) stageRef.current.innerHTML = "";
+      window.DSSL?.signal?.("benchStorm", null);
+    };
+  }, []);
+
+  /* The settle wait itself costs ~2 frames; every raw measurement includes
+   * that floor. So each lane gets a floor run on an EMPTY host with the
+   * exact same flow, and the reported number is raw minus floor: work only. */
+  const floorFor = useCallback(async (lane: LaneId) => {
+    const D = window.DSSL;
+    if (!D || !stageRef.current) return { paint: 0, restyle: 0 };
+    const host = stageRef.current;
+    const paints: number[] = [];
+    const restyles: number[] = [];
+    for (let rep = 0; rep < 3; rep++) {
+      host.innerHTML = "";
+      host.classList.remove("on");
+      D.signal("benchStorm", null);
+      await settle();
+
+      let t0 = performance.now();
+      if (lane === "css") {
+        const st = document.createElement("style");
+        document.head.appendChild(st);
+        styleRef.current = st;
+        await settle();
+        st.remove();
+        styleRef.current = null;
+      } else {
+        D.apply("", { name: "bench-floor", scope: host, replace: true });
+        await settle();
+      }
+      paints.push(performance.now() - t0);
+
+      t0 = performance.now();
+      if (lane === "css") {
+        host.classList.add("on");
+        await settle();
+        host.classList.remove("on");
+      } else {
+        D.signal("benchStorm", "on");
+        await settle();
+        D.signal("benchStorm", null);
+      }
+      restyles.push(performance.now() - t0);
+      await settle();
+    }
+    return { paint: median(paints), restyle: median(restyles) };
+  }, []);
+
+  const runConfig = useCallback(async (count: number, lane: LaneId) => {
+    const D = window.DSSL;
+    if (!D || !stageRef.current) return;
+    const host = stageRef.current;
+    const paints: number[] = [];
+    const restyles: number[] = [];
+
+    for (let rep = 0; rep < 3; rep++) {
+      host.innerHTML = "";
+      host.classList.remove("on");
+      D.signal("benchStorm", null);
+      await settle();
+
+      if (lane === "css") {
+        if (styleRef.current) styleRef.current.remove();
+        let t0 = performance.now();
+        const st = document.createElement("style");
+        st.textContent = CSS_SRC;
+        styleRef.current = st;
+        document.head.appendChild(st);
+        buildNodes(host, count);
+        await settle();
+        paints.push(performance.now() - t0);
+
+        t0 = performance.now();
+        host.classList.add("on");
+        await settle();
+        restyles.push(performance.now() - t0);
+        host.classList.remove("on");
+        st.remove();
+        styleRef.current = null;
+      } else {
+        let t0 = performance.now();
+        buildNodes(host, count);
+        D.apply(BENCH_SRC, { name: "bench-live", scope: host, replace: true });
+        await settle();
+        paints.push(performance.now() - t0);
+
+        if (lane === "frozen") {
+          const stats = D.freeze();
+          const s = Array.isArray(stats) ? stats.find((x: any) => x.engine !== "global") || stats[0] : stats;
+          setFreezeStats(
+            `freeze() → ${s.elements} elements, ${s.rules} rules, ${s.shadowRules} shadow rules — ambient cost now zero`
+          );
+        }
+
+        t0 = performance.now();
+        D.signal("benchStorm", "on");
+        await settle();
+        restyles.push(performance.now() - t0);
+        D.signal("benchStorm", null);
+
+        if (lane === "frozen") D.unfreeze();
+      }
+      await settle();
+    }
+
+    const floor = await floorFor(lane);
+    const net = (xs: number[], f: number) => Math.max(0.05, median(xs) - f);
+    return { paint: net(paints, floor.paint), restyle: net(restyles, floor.restyle) };
+  }, [floorFor]);
+
+  const run = useCallback(
+    async (count: number | "all") => {
+      const D = window.DSSL;
+      if (!D) {
+        setErr("engine not booted yet (no window.DSSL) — wait for dssl-ready and retry");
+        return;
+      }
+      setErr(null);
+      const counts = count === "all" ? SIZES : [count];
+      const tag = count === "all" ? "all" : String(count);
+      setBusy(tag);
+      try {
+        for (const c of counts) {
+          for (const lane of LANES) {
+            const m = await runConfig(c, lane.id);
+            if (m) {
+              const row: Row = { count: c, lane: lane.id, paint: m.paint, restyle: m.restyle };
+              // merge: replace this (count, lane), keep every other size's rows
+              setRows((prev) => [...prev.filter((r) => !(r.count === c && r.lane === lane.id)), row]);
+            }
+          }
+        }
+      } catch (e: any) {
+        setErr(e?.message || String(e));
+      } finally {
+        setBusy(null);
+        // full cleanup after every run
+        if (stageRef.current) stageRef.current.innerHTML = "";
+        D.signal("benchStorm", null);
+        await settle();
+      }
+    },
+    [runConfig]
+  );
+
+  const cell = (count: number, lane: LaneId, key: "paint" | "restyle") => {
+    const r = rows.find((x) => x.count === count && x.lane === lane);
+    if (!r) return "—";
+    return r[key] >= 100 ? Math.round(r[key]).toLocaleString() : r[key].toFixed(1);
+  };
+
+  return (
+    <div className="wrap">
+      <div className="bench-wrap">
+        <h2 className="bench-title">The bench</h2>
+        <p className="bench-sub">
+          Synthetic nodes styled three ways on this page, on this machine, in this browser.
+          Median of 3 runs. The point is not to win &mdash; it is to stop arguing from priors.
+        </p>
+
+        <div className="bench-controls">
+          {SIZES.map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={"bench-btn" + (busy === String(s) ? " on" : "")}
+              disabled={!!busy}
+              onClick={() => run(s)}
+            >
+              {busy === String(s) ? "running…" : `${s.toLocaleString()} nodes`}
+            </button>
+          ))}
+          <button
+            type="button"
+            className={"bench-btn" + (busy === "all" ? " on" : "")}
+            disabled={!!busy}
+            onClick={() => run("all")}
+          >
+            {busy === "all" ? "running…" : "Run the full sweep"}
+          </button>
+        </div>
+
+        {freezeStats && <div className="bench-freeze-stats">{freezeStats}</div>}
+        {err && <div className="bench-err">{err}</div>}
+
+        <table className="bench-table">
+          <thead>
+            <tr>
+              <th>nodes</th>
+              <th>lane</th>
+              <th className="num">first paint (ms)</th>
+              <th className="num">restyle all (ms)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {SIZES.flatMap((c) =>
+              LANES.map((l) => (
+                <tr key={`${c}-${l.id}`}>
+                  <td>{c.toLocaleString()}</td>
+                  <td className={"bench-lane-" + l.id}>{l.label}</td>
+                  <td className="num">{cell(c, l.id, "paint")}</td>
+                  <td className="num">{cell(c, l.id, "restyle")}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+
+        <p className="bench-note">
+          <strong>How to read this.</strong> First paint = build every node AND fully apply its
+          styling (CSS injects a stylesheet, DSSL runs its first matching pass). Restyle all =
+          flip one knob so every node changes color: for CSS a container class, for DSSL the
+          signal bridge. The frozen lane restyles through an explicit signal call &mdash; a
+          developer action, by design &mdash; while its ambient cost (scroll, hover bookkeeping,
+          mutations) is exactly zero after freeze(), which the green line above reports.
+          Numbers are floor-subtracted: each lane is also measured on an empty host with the
+          same flow, and that wait-only floor comes off every figure, so what you see is work.
+        </p>
+        <p className="bench-note">
+          A frozen DSSL page keeps its resolved inline styles forever; unfreeze() re-arms
+          everything. Live DSSL buys back that cost in what it can do: tokens, signals and
+          states without a build step. Pick the lane per page, not per project.
+        </p>
+      </div>
+
+      {/* the measured sandbox; nothing here is ever visible-height rendered */}
+      <div ref={stageRef} className="bench-stage" aria-hidden="true" />
+    </div>
+  );
+}

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,26 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.7.1",
+    date: "growth phase · the credibility drop",
+    title: "The language moves into the editor, the bench goes public, and a reviewer bug dies",
+    why: "several AI agents tested DSSL and reached the same verdict — good for prototypes — citing v0.x, JS-only, inline-style cost and a one-person ecosystem. This release answers all four without pivoting the architecture",
+    kind: "add",
+    body:
+      "The verdict said prototype, so this release aims straight at the verdict. The official editor extension arrived, and it is not a loose re-implementation: it bundles the real parser and resolver, so the squiggles in your editor are the same errors the browser console prints, including the did-you-mean and the new warnings. Completions ride the live token registry folded across the workspace (type color. and get your palette with resolved values), hovers explain the semantic vocabulary, and one grammar serves both VS Code and VSCodium because they share the same extension API — the .vsix installs in either, two clicks. The extension immediately paid for itself: its test suite caught a parser bug where every // comment doubled a line in the stripped source, so all line numbers after the first comment drifted +1 and every diagnostic — editor squiggle AND browser console — pointed one line late. Fixed, regression-tested, and honestly a little embarrassing. The repo gained the machine-reviewer layer: llms.txt at the site root and in the repo (dense, factual, structured for the agents that keep grading this project), AGENTS.md for contributors with a motor in their chest, and PARITY.md, the honest feature matrix against CSS. And the argument that used to happen from priors now happens from numbers: the Bench page runs 100 / 1,000 / 10,000 synthetic nodes three ways on this very page — a plain CSS stylesheet, the live engine, and the frozen engine — and reports first paint and restyle-all as medians of three. No build step appeared anywhere. The engine stays the engine.",
+    code: `// in your editor now, same compiler the browser runs
+.bad { background: colr.accent }
+//   ^ unknown token "colr" (did you mean "color.accent"?) — as a squiggle
+
+// completions come from YOUR registry, folded across the workspace
+tokens { space { 9: 96 } }
+.hero { padding: space.9 }   // typing space. offers 9 = 96
+
+// the bench, on this page, median of 3 — numbers come from YOUR machine
+10,000 nodes · CSS <style> · DSSL live · DSSL frozen
+//        first paint + restyle-all, per lane, per size`,
+  },
   {
     version: "v0.7.0",
     date: "growth phase · the engine gets a handbrake",

src/components/dssl/views/SpecView.tsx

@@ -11,7 +11,7 @@ export default function SpecView() {
         <p className="page-sub">
           The v0.1 draft was put to a seven-point vote. This document is the ratified
           v0.2 result — every decision below is implemented by the engine serving this
-          page. The engine itself has kept growing since: it is now at v0.7.0 (see the
+          page. The engine itself has kept growing since: it is now at v0.7.1 (see the
           changelog for what the site demanded).
         </p>
       </div>