v0.8.1: fluid math, raw blocks, packaged CLI, build --strict

A re-test of 0.8.0 found two bugs; writing the tests found more.

- fluid: the clamp() left out the intercept of its line, so fluid 16 24 was
19.6px on a 375px phone (should be 16.1px) and hit 24px near 840px instead
of 1200px. Same fix repairs shrinking sizes (fluid 24 16 made a backwards
clamp) and rem sizes (slope was 16x too small). Percentages and mixed
units are refused with a clear message.
- raw { }: a multi-line block started with the text "undefined", anything on
the same line as "raw {" was dropped, and the guide example had no
semicolons (invalid CSS). Fixed; a missing semicolon inside raw is now a
warning with the right line number.
- the dssl CLI inside dssl-engine.zip / .tar.gz crashed on start (looked for
public/dssl, the package keeps the engine in dssl/). Finds either layout now.
- dssl build takes --strict, like dssl check.
- tests: new scripts/test-v081.mjs (37 assertions) evaluates the emitted
clamp() at real window widths instead of comparing strings; 24 of them fail
against the 0.8.0 engine. test-guide-examples.mjs no longer reports a green
"0 passed" when its hardcoded /home/z paths are missing.
- docs, changelog, PARITY and llms.txt updated; packages and the 0.8.1 vsix
rebuilt from the synced engine.

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

GUIDE.md

@@ -6,7 +6,7 @@ example in this guide is compiled by `scripts/test-guide-examples.mjs` on every
 release, so the examples cannot drift from the compiler. If an example here
 stops compiling, that is a release blocker, not a docs bug.
 
-Status up front: DSSL is a real, tested style engine at v0.7.2, and it is
+Status up front: DSSL is a real, tested style engine at v0.8.1, and it is
 honest alpha. It needs JavaScript, it writes inline styles, and it has a
 first-paint story you should read before shipping anything serious (see
 "Honest limits"). Within those limits, it is genuinely nicer to write than
@@ -123,9 +123,33 @@ overwriting, and a word written twice warns too.
 ### Sizing that moves: fluid
 
 `font-size: fluid 16 24` (and any length-ish property: width, height, gap,
-padding, margin…) compiles to the linear `clamp()` between 360px and 1200px
-viewports — the formula everyone writes wrong by hand. Custom bounds:
-`font-size: fluid 16 24 400 800`. The comma form still works: `fluid: 16, 24`.
+padding, margin and friends) makes a size that grows smoothly with the window.
+It is 16px on a 360px wide screen, 24px on a 1200px wide one, and in between it
+slides along a straight line. Past either end it stays put.
+
+```dssl
+h1 { font-size: fluid 28 44 }          // 28px on a small phone, 44px on a big desktop
+.stack { gap: fluid 8 16 }             // works on any length property
+.hero { font-size: fluid 16 24 400 800 }   // your own viewport range
+.old { fluid: 16, 24 }                 // the comma form still works
+```
+
+What you get at a few window widths for `fluid 16 24`:
+
+| window | 360 | 375 | 600 | 800 | 1200 |
+|---|---|---|---|---|---|
+| size | 16px | 16.1px | 18.3px | 20.2px | 24px |
+
+A few things worth knowing:
+
+- Sizes can be px (bare numbers are px), rem or em. Both sizes need the same unit.
+- Percentages are refused with an error, because a percentage cannot follow the
+  window width.
+- Going down works too: `fluid 24 16` shrinks as the window grows.
+- If you used `fluid` in 0.8.0, your text will be a little smaller on phones and
+  tablets after updating. That is the fix, not a regression. 0.8.0 had the
+  right slope but forgot where the line starts, so sizes ran ahead of the
+  window and hit their maximum around 840px instead of 1200px.
 
 ### raw { } — the escape hatch
 
@@ -136,12 +160,22 @@ page stylesheet, top-level only:
 ```dssl
 raw {
   @font-face {
-    font-family: Inter
-    src: url(/fonts/inter.woff2)
+    font-family: Inter;
+    src: url(/fonts/inter.woff2);
   }
 }
 ```
 
+One thing to remember: inside `raw { }` you are writing real CSS, so semicolons
+are required there, unlike everywhere else in DSSL. If you leave one out, the
+browser would quietly throw the whole rule away. DSSL cannot fix that for you
+(the text is passed through untouched on purpose), but it does warn you with the
+line number:
+
+```
+styles.dssl:3 warning: raw { } is verbatim CSS, so this line needs a ";" at the end
+```
+
 Unknown at-rules outside `raw { }` are skipped whole, with one clean error
 and a pointer here — they never leak their inner rules (that was a real
 0.7.2 bug: `@supports (display:grid) { .a { … } }` applied `.a` everywhere
@@ -249,7 +283,7 @@ for liveness. `unfreeze()` re-arms everything.
 
 Three ways to get it:
 
-1. Download `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files, then
+1. Download `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files, then
    Extensions panel, `...`, Install from VSIX. Works in VS Code and VSCodium.
 2. Build it: `cd dssl-vscode && npx @vscode/vsce package --no-dependencies`.
 3. Registry listing: staged for Open VSX (the registry VSCodium searches).
@@ -267,6 +301,7 @@ v0.8.0 answers the honest limits below without giving up the language:
 ```sh
 node cli/dssl.mjs check styles.dssl --strict   # CI: real compiler, exit 1 on errors, --json
 node cli/dssl.mjs build styles.dssl -o styles.css
+node cli/dssl.mjs build styles.dssl -o styles.css --strict   # CI: warnings fail the build too
 ```
 
 `build` compiles the static subset to a real stylesheet: tokens become
@@ -281,6 +316,7 @@ The same output is available in the browser as `DSSL.toCSS(source)`.
 
 ```sh
 node cli/dssl.mjs check public/styles/*.dssl   # compile everything, exit code for CI
+node scripts/test-v081.mjs      # 0.8.1 regression suite (37 assertions)
 node scripts/test-v073.mjs      # 0.8.0 regression suite (65 assertions)
 node scripts/test-guide-examples.mjs        # every guide example compiles
 node scripts/test-guide-browser.mjs         # guide examples asserted in headless Chromium

PARITY.md

@@ -57,6 +57,25 @@ so the boundary is explicit, not folklore.
 - 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
 
+## v0.8.1 follow-up corrections
+
+A re-test of 0.8.0 found two bugs, and more showed up while writing the tests:
+
+- `fluid` left out the intercept of its line, so `fluid 16 24` was 19.6px on a
+  375px phone instead of 16.1px and reached 24px at about 840px instead of 1200px.
+  Fixed, and the tests now evaluate the emitted `clamp()` at real window widths.
+  The same fix repaired shrinking sizes (`fluid 24 16`, which produced a backwards
+  `clamp()`) and rem sizes (the slope was 16 times too small). Percentages and
+  mixed units are now refused with a message instead of producing nonsense.
+- A multi-line `raw { }` started with the text `undefined`, and anything written
+  on the same line as `raw {` was dropped. The guide's own example also had no
+  semicolons, which is not valid CSS. All three fixed, and a missing semicolon
+  inside `raw { }` is now a warning with the right line number.
+- `dssl build` now takes `--strict`, like `dssl check`.
+- The `dssl` command in the downloadable package crashed on start (module not found),
+  because it looked for the engine in `public/dssl/` and the package keeps it in
+  `dssl/`. It now finds it in either place, and a test runs it from the package layout.
+
 ## v0.8.0 review-driven corrections
 
 The second external review (repro snippets, headless browser) found five bugs and

README.md

@@ -68,7 +68,7 @@ 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 (`ehs-studio.dssl-vscode`) 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): download `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. An Open VSX listing (so it appears in VSCodium's Extensions tab, searchable) is staged and publishes with one Open VSX token; see `dssl-vscode/PUBLISHING.md`.
+Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) 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): download `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. An Open VSX listing (so it appears in VSCodium's Extensions tab, searchable) is staged and publishes with one Open VSX token; see `dssl-vscode/PUBLISHING.md`.
 
 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
 
@@ -387,9 +387,11 @@ overlap) stays out and gets counted in the report, so the boundary is explicit
 instead of folklore.
 
 Two more tools from v0.8.0: `raw { }` (alias `@css { }`) drops verbatim CSS
-like `@font-face` or `@keyframes` into the page stylesheet, and
-`font-size: fluid 16 24` compiles to the linear `clamp()` between 360 and
-1200px viewports.
+like `@font-face` or `@keyframes` into the page stylesheet (it is real CSS, so
+semicolons are required inside it, and DSSL warns if you forget one), and
+`font-size: fluid 16 24` gives you a size that grows smoothly from 16px on a
+360px wide window to 24px on a 1200px wide one. `dssl build --strict` makes
+warnings fail the build, for CI.
 
 ## Performance: freeze, explain, and the cost of live
 
@@ -420,7 +422,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.8.0)
+## What works today (v0.8.1)
 
 - the full selector surface, including `:nth-child`, `:not`, `:is`, `:where`, `:has`
 - flexbox and grid with `row:` / `column:` / `grid:` / `stack:` / `center:` sugar — place words now own an axis (`between` is main-axis, `stretch` is cross-axis) and conflicts warn instead of silently overwriting
@@ -434,7 +436,7 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 - pseudo-elements in any spelling (shadow CSS), themed scrollbars included
 - `raw { }` / `@css { }` for verbatim CSS (`@font-face`, `@keyframes`, `@supports`); unknown at-rules skip their whole block with one clean error
 - `fluid 16 24` sizing sugar on any length property
-- the CLI: `dssl check` (CI, --json) and `dssl build` (real CSS from the static subset)
+- the CLI: `dssl check` (CI, --json, --strict) and `dssl build` (real CSS from the static subset, also with --strict)
 - compiler warnings for cascade-order footguns and duplicate axis words
 - `DSSL.freeze()` / `DSSL.unfreeze()` / `DSSL.explain()` / `DSSL.toCSS()`
 - bare font names, `hyphens: manual`, loud did-you-mean errors
@@ -455,7 +457,7 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 
 ## Status
 
-v0.8.0, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite — and the docs examples are rendered and asserted in a real browser, so the guide cannot lie. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; when a page must work without JavaScript, build the static subset with `dssl build` or pick another tool for that page. Freeze makes big static pages viable; live interaction is what the engine is for.
+v0.8.1, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite, and the docs examples are rendered and asserted in a real browser, so the guide cannot lie. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; when a page must work without JavaScript, build the static subset with `dssl build` or pick another tool for that page. Freeze makes big static pages viable; live interaction is what the engine is for.
 
 ## License
 

cli/dssl.mjs

@@ -8,7 +8,7 @@
  *       Exit 1 on errors, 2 on usage problems. --strict makes warnings fatal.
  *       --json emits machine-readable diagnostics for CI and editors.
  *
- *   dssl build styles.dssl [-o out.css] [--json] [--no-banner]
+ *   dssl build styles.dssl [-o out.css] [--json] [--strict] [--no-banner]
  *       The exit lane: compile the static subset to a real .css file.
  *       Tokens become custom properties, states become :hover, layers become
  *       @layer, motions become @keyframes, raw { } passes through verbatim.
@@ -18,16 +18,20 @@
  * Files are compiled in the order given; every bundle's tokens fold into the
  * next (name a tokens.dssl first, exactly like <link> order in the browser).
  * ========================================================================= */
-import { readFileSync, writeFileSync, statSync } from 'node:fs';
+import { readFileSync, writeFileSync, statSync, existsSync } from 'node:fs';
 import { dirname, resolve as pathResolve, basename, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-// the engine is plain ESM in public/dssl — import directly, no build step
+// the engine is plain ESM, import it directly, no build step. In a repo checkout
+// it lives in public/dssl/. In the downloaded package (dssl-engine.zip) it sits
+// next to cli/ as dssl/. 0.8.0 only knew the first layout, so the packaged CLI
+// crashed with "module not found" for everyone who installed it.
 const here = pathResolve(dirname(fileURLToPath(import.meta.url)), '..');
-const { parse } = await import('file://' + join(here, 'public/dssl/parser.js'));
-const { resolve } = await import('file://' + join(here, 'public/dssl/resolver.js'));
-const { toCSS } = await import('file://' + join(here, 'public/dssl/static.js'));
-const { VERSION } = await import('file://' + join(here, 'public/dssl/index.js'));
+const engineDir = existsSync(join(here, 'public/dssl/parser.js')) ? join(here, 'public/dssl') : join(here, 'dssl');
+const { parse } = await import('file://' + join(engineDir, 'parser.js'));
+const { resolve } = await import('file://' + join(engineDir, 'resolver.js'));
+const { toCSS } = await import('file://' + join(engineDir, 'static.js'));
+const { VERSION } = await import('file://' + join(engineDir, 'index.js'));
 
 const USAGE = `dssl v${VERSION} — the DSSL style language
 
@@ -38,6 +42,7 @@ const USAGE = `dssl v${VERSION} — the DSSL style language
   dssl build <file>      compile the static subset to a real .css file
                          -o <out.css>   output path (default: <file>.css)
                          --json         machine-readable report
+                         --strict       warnings are errors too (exit 1)
                          --no-banner    omit the generated-file header
   dssl --version         print the version`;
 
@@ -137,7 +142,8 @@ if (cmd === 'check') {
 if (cmd === 'build') {
   const json = args.includes('--json');
   const banner = !args.includes('--no-banner');
-  for (const f of ['--json', '--no-banner']) { const i = args.indexOf(f); if (i !== -1) args.splice(i, 1); }
+  const strict = args.includes('--strict');
+  for (const f of ['--json', '--no-banner', '--strict']) { const i = args.indexOf(f); if (i !== -1) args.splice(i, 1); }
   const outPath = readArg(args, '-o') || readArg(args, '--out');
   if (!args.length) { console.error('dssl build: give me a .dssl file to build'); process.exit(2); }
   const input = args[0];
@@ -150,7 +156,7 @@ if (cmd === 'build') {
       version: VERSION,
       input: r.file,
       output: outputPath,
-      ok: r.errors.length === 0,
+      ok: r.errors.length === 0 && (!strict || r.warnings.length === 0),
       errors: r.errors.map(e => ({ file: e.file || r.name, line: e.line ?? 0, message: e.message, hint: e.hint || null })),
       warnings: r.warnings.map(w => ({ file: w.file || r.name, line: w.line ?? 0, message: w.message, hint: w.hint || null })),
       report: built.report,
@@ -168,7 +174,7 @@ if (cmd === 'build') {
     }
     printDiags(results, true);
   }
-  process.exit(r.errors.length ? 1 : 0);
+  process.exit(r.errors.length || (strict && r.warnings.length) ? 1 : 0);
 }
 
 console.error(`dssl: unknown command "${cmd}"\n\n${USAGE}`);

dssl-vscode/lib/engine/parser.js

@@ -255,7 +255,13 @@ export function parse(source, file = 'inline.dssl') {
         node.css = rest.slice(open + 1, close);
         return rest.slice(close + 1);
       }
+      // multi-line: start the body empty (it used to start undefined, which
+      // put a literal "undefined" in front of the CSS) and feed whatever
+      // followed the "{" on this same line, so `raw { @font-face {` keeps
+      // its first line.
+      node.css = '';
       rawCapture = { node, depth: 1 };
+      feedRawCapture(rest.slice(open + 1), line);
       return '';
     }
     if (meta.kind === 'bogus') {

dssl-vscode/lib/engine/resolver.js

@@ -949,19 +949,38 @@ const FLUID_PROPS = new Set(('font-size,width,height,inline-size,block-size,min-
   'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left').split(','));
 
 function buildFluidParts(parts, ctx, prop = 'font-size') {
-  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`, hint: 'fluid takes two sizes and optionally the viewport bounds — fluid 16 24, or fluid 16 24 360 1200' });
-      return '0px';
-    }
-    return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
+  const bad = (s, why) => {
+    ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" ${why}`, hint: 'fluid takes two sizes and optionally the viewport bounds, like: fluid 16 24, or fluid 16 24 360 1200' });
+  };
+  // sizes may be px (bare numbers are px), rem or em. Percentages cannot be
+  // interpolated against the viewport, so they are refused instead of
+  // silently producing a clamp() that does not do what it says.
+  const size = (s) => {
+    const m = String(s).match(/^(-?[0-9.]+)\s*(px|rem|em|%)?$/);
+    if (!m) { bad(s, 'is not a size'); return null; }
+    if (m[2] === '%') { bad(s, 'cannot be a percentage, use px, rem or em'); return null; }
+    return { n: parseFloat(m[1]), unit: m[2] || '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, value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+  const a = size(parts[0]); const b = size(parts[1]);
+  const v0 = size(parts[2] || '360'); const v1 = size(parts[3] || '1200');
+  if (!a || !b || !v0 || !v1) return [{ prop, value: '0px' }];
+  if (a.unit !== b.unit) { bad(`${parts[0]} ${parts[1]}`, 'mixes units, give both sizes the same unit'); return [{ prop, value: '0px' }]; }
+  if (v0.unit !== 'px' || v1.unit !== 'px') { bad(`${parts[2]} ${parts[3]}`, 'viewport bounds are px'); return [{ prop, value: '0px' }]; }
+  if (v1.n <= v0.n) { bad(`${parts[2]} ${parts[3]}`, 'needs the larger viewport second'); return [{ prop, value: '0px' }]; }
+  // a straight line through (v0, a) and (v1, b):
+  //   size(viewport) = intercept + slope * viewport
+  // The vw term is slope * 100, and the intercept is what is left at a
+  // viewport of 0. v0.8.0 forgot the intercept, so the size ran ahead of the
+  // line and hit its maximum long before the upper viewport. rem and em are
+  // worked out against a 16px root for the slope only; the intercept stays
+  // in the unit you wrote.
+  const f = a.unit === 'px' ? 1 : 16;
+  const slopePxPerPx = ((b.n - a.n) * f) / (v1.n - v0.n);
+  const vw = slopePxPerPx * 100;
+  const intercept = a.n - (slopePxPerPx * v0.n) / f;
+  const num = (x) => String(+x.toFixed(3));
+  const lo = Math.min(a.n, b.n), hi = Math.max(a.n, b.n); // clamp() needs lower first even for shrinking sizes
+  return [{ prop, value: `clamp(${num(lo)}${a.unit}, calc(${num(intercept)}${a.unit} + ${num(vw)}vw), ${num(hi)}${a.unit})` }];
 }
 
 /* ------------------------------------------------------------------ *
@@ -1390,6 +1409,22 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           // untouched; it rides the same document stylesheet as the
           // pseudo-element rules and survives `dssl build` verbatim.
           if ((node.css || '').trim()) raws.push({ css: node.css.trim(), file, line: node.line, order: order++ });
+          // raw is real CSS, so DSSL's no-semicolon habit does not carry over.
+          // A declaration line that is followed by another declaration or a
+          // closing brace, with no ";" between, is almost always that slip.
+          {
+            const rl = (node.css || '').replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')).split('\n');
+            const decl = /^[a-zA-Z-]+\s*:\s*\S/;
+            const nextReal = (i) => { for (let j = i + 1; j < rl.length; j++) { const t = rl[j].trim(); if (t) return t; } return '}'; };
+            for (let i = 0; i < rl.length; i++) {
+              const t = rl[i].trim();
+              if (!decl.test(t) || /[;{},]$/.test(t)) continue;
+              const nx = nextReal(i);
+              if (nx.startsWith('}') || decl.test(nx)) {
+                warnings.push({ file, line: node.line + i, message: `raw { } is verbatim CSS, so this line needs a ";" at the end ("${t.slice(0, 40)}")`, hint: 'unlike the rest of DSSL, semicolons are required inside raw { }' });
+              }
+            }
+          }
           break;
         }
         case 'behavior':

dssl-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "dssl-vscode",
   "displayName": "DSSL Language Support",
   "description": "The DSSL style language in your editor: syntax highlighting, real-compiler diagnostics (the same errors the browser console shows), completions from the live token registry, hover docs. Works in VS Code and VSCodium.",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

engine-package/USAGE.md

@@ -101,10 +101,11 @@ state (the graceful no-JS look). The report counts what stays runtime-only
 
 In the browser the same output is `DSSL.toCSS(source)` → `{ css, report }`.
 
-Two more v0.8.0 tools worth knowing: `raw { }` (alias `@css { }`) drops
-verbatim CSS like `@font-face` into the page stylesheet, and
-`font-size: fluid 16 24` compiles to the linear `clamp()` between 360 and
-1200px viewports.
+Two more tools worth knowing: `raw { }` (alias `@css { }`) drops
+verbatim CSS like `@font-face` into the page stylesheet (it is real CSS, so
+semicolons are required inside it), and `font-size: fluid 16 24` gives you a
+size that grows smoothly from 16px on a 360px wide window to 24px on a 1200px
+wide one. `dssl build --strict` makes warnings fail the build, for CI.
 
 ## Files in this package
 

llms.txt

@@ -5,7 +5,7 @@
 - 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.8.0 (engine), MIT license
+- Version: 0.8.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
 
@@ -30,8 +30,8 @@
 - 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`.
-- Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error.
-- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports; `fluid: 16, 24` still works.
+- Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error. Inside raw { } semicolons are required (it is real CSS); a missing one is a warning with a line number.
+- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports (exactly the first size at 360px and the second at 1200px; px, rem or em, no percentages; shrinking sizes work); `fluid: 16, 24` still works. 0.8.1 fixed the math: 0.8.0 left out the intercept, so sizes were too large on small screens.
 - v0.8.0 review-driven fixes, all regression-tested incl. headless-Chromium computed-style tests of the docs: row/column axis roles (the documented `between center` example laid out wrong before); @font-face no longer crashes the compiler (unknown at-rules skip balanced); @supports inner rules no longer leak unconditionally; `url(...)` is atomic (unquoted form no longer false-errors); `!important` is a loud error that emits nothing; the animation shorthand warns when its motion is undefined instead of suggesting "span"; CSS-order transition values get the exact DSSL conversion in the error hint.
 - v0.7.2 review-driven fixes, all regression-tested: gate prefilter runs before native matches(); hover state events scope candidate recomputation to the touched subtree plus ancestors (was page-wide); checkbox/details states listen to `change`/`toggle`; raw hex alpha (`#ff0000/50` -> color-mix); bare numbers on time properties are ms; `::part()` supported, `::slotted()` rejected with an explanation; SVG properties (`fill`, `stroke*`) and `text-wrap`/`content-visibility` in the vocabulary.
 - 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.
@@ -62,4 +62,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## 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. Install `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.
+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. Install `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.

public/dssl/index.js

@@ -19,7 +19,7 @@ import { resolve, DEFAULT_TOKENS } from './resolver.js';
 import { toCSS as docToCSS } from './static.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.8.0';
+export const VERSION = '0.8.1';
 
 let counter = 0;
 const engines = new Map();

public/dssl/parser.js

@@ -255,7 +255,13 @@ export function parse(source, file = 'inline.dssl') {
         node.css = rest.slice(open + 1, close);
         return rest.slice(close + 1);
       }
+      // multi-line: start the body empty (it used to start undefined, which
+      // put a literal "undefined" in front of the CSS) and feed whatever
+      // followed the "{" on this same line, so `raw { @font-face {` keeps
+      // its first line.
+      node.css = '';
       rawCapture = { node, depth: 1 };
+      feedRawCapture(rest.slice(open + 1), line);
       return '';
     }
     if (meta.kind === 'bogus') {

public/dssl/resolver.js

@@ -949,19 +949,38 @@ const FLUID_PROPS = new Set(('font-size,width,height,inline-size,block-size,min-
   'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left').split(','));
 
 function buildFluidParts(parts, ctx, prop = 'font-size') {
-  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`, hint: 'fluid takes two sizes and optionally the viewport bounds — fluid 16 24, or fluid 16 24 360 1200' });
-      return '0px';
-    }
-    return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
+  const bad = (s, why) => {
+    ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" ${why}`, hint: 'fluid takes two sizes and optionally the viewport bounds, like: fluid 16 24, or fluid 16 24 360 1200' });
+  };
+  // sizes may be px (bare numbers are px), rem or em. Percentages cannot be
+  // interpolated against the viewport, so they are refused instead of
+  // silently producing a clamp() that does not do what it says.
+  const size = (s) => {
+    const m = String(s).match(/^(-?[0-9.]+)\s*(px|rem|em|%)?$/);
+    if (!m) { bad(s, 'is not a size'); return null; }
+    if (m[2] === '%') { bad(s, 'cannot be a percentage, use px, rem or em'); return null; }
+    return { n: parseFloat(m[1]), unit: m[2] || '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, value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+  const a = size(parts[0]); const b = size(parts[1]);
+  const v0 = size(parts[2] || '360'); const v1 = size(parts[3] || '1200');
+  if (!a || !b || !v0 || !v1) return [{ prop, value: '0px' }];
+  if (a.unit !== b.unit) { bad(`${parts[0]} ${parts[1]}`, 'mixes units, give both sizes the same unit'); return [{ prop, value: '0px' }]; }
+  if (v0.unit !== 'px' || v1.unit !== 'px') { bad(`${parts[2]} ${parts[3]}`, 'viewport bounds are px'); return [{ prop, value: '0px' }]; }
+  if (v1.n <= v0.n) { bad(`${parts[2]} ${parts[3]}`, 'needs the larger viewport second'); return [{ prop, value: '0px' }]; }
+  // a straight line through (v0, a) and (v1, b):
+  //   size(viewport) = intercept + slope * viewport
+  // The vw term is slope * 100, and the intercept is what is left at a
+  // viewport of 0. v0.8.0 forgot the intercept, so the size ran ahead of the
+  // line and hit its maximum long before the upper viewport. rem and em are
+  // worked out against a 16px root for the slope only; the intercept stays
+  // in the unit you wrote.
+  const f = a.unit === 'px' ? 1 : 16;
+  const slopePxPerPx = ((b.n - a.n) * f) / (v1.n - v0.n);
+  const vw = slopePxPerPx * 100;
+  const intercept = a.n - (slopePxPerPx * v0.n) / f;
+  const num = (x) => String(+x.toFixed(3));
+  const lo = Math.min(a.n, b.n), hi = Math.max(a.n, b.n); // clamp() needs lower first even for shrinking sizes
+  return [{ prop, value: `clamp(${num(lo)}${a.unit}, calc(${num(intercept)}${a.unit} + ${num(vw)}vw), ${num(hi)}${a.unit})` }];
 }
 
 /* ------------------------------------------------------------------ *
@@ -1390,6 +1409,22 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           // untouched; it rides the same document stylesheet as the
           // pseudo-element rules and survives `dssl build` verbatim.
           if ((node.css || '').trim()) raws.push({ css: node.css.trim(), file, line: node.line, order: order++ });
+          // raw is real CSS, so DSSL's no-semicolon habit does not carry over.
+          // A declaration line that is followed by another declaration or a
+          // closing brace, with no ";" between, is almost always that slip.
+          {
+            const rl = (node.css || '').replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')).split('\n');
+            const decl = /^[a-zA-Z-]+\s*:\s*\S/;
+            const nextReal = (i) => { for (let j = i + 1; j < rl.length; j++) { const t = rl[j].trim(); if (t) return t; } return '}'; };
+            for (let i = 0; i < rl.length; i++) {
+              const t = rl[i].trim();
+              if (!decl.test(t) || /[;{},]$/.test(t)) continue;
+              const nx = nextReal(i);
+              if (nx.startsWith('}') || decl.test(nx)) {
+                warnings.push({ file, line: node.line + i, message: `raw { } is verbatim CSS, so this line needs a ";" at the end ("${t.slice(0, 40)}")`, hint: 'unlike the rest of DSSL, semicolons are required inside raw { }' });
+              }
+            }
+          }
           break;
         }
         case 'behavior':

public/llms.txt

@@ -5,7 +5,7 @@
 - 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.8.0 (engine), MIT license
+- Version: 0.8.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
 
@@ -30,8 +30,8 @@
 - 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`.
-- Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error.
-- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports; `fluid: 16, 24` still works.
+- Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error. Inside raw { } semicolons are required (it is real CSS); a missing one is a warning with a line number.
+- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports (exactly the first size at 360px and the second at 1200px; px, rem or em, no percentages; shrinking sizes work); `fluid: 16, 24` still works. 0.8.1 fixed the math: 0.8.0 left out the intercept, so sizes were too large on small screens.
 - v0.8.0 review-driven fixes, all regression-tested incl. headless-Chromium computed-style tests of the docs: row/column axis roles (the documented `between center` example laid out wrong before); @font-face no longer crashes the compiler (unknown at-rules skip balanced); @supports inner rules no longer leak unconditionally; `url(...)` is atomic (unquoted form no longer false-errors); `!important` is a loud error that emits nothing; the animation shorthand warns when its motion is undefined instead of suggesting "span"; CSS-order transition values get the exact DSSL conversion in the error hint.
 - v0.7.2 review-driven fixes, all regression-tested: gate prefilter runs before native matches(); hover state events scope candidate recomputation to the touched subtree plus ancestors (was page-wide); checkbox/details states listen to `change`/`toggle`; raw hex alpha (`#ff0000/50` -> color-mix); bare numbers on time properties are ms; `::part()` supported, `::slotted()` rejected with an explanation; SVG properties (`fill`, `stroke*`) and `text-wrap`/`content-visibility` in the vocabulary.
 - 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.
@@ -62,4 +62,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## 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. Install `dssl-vscode/dssl-vscode-0.8.0.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.
+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. Install `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.

scripts/build-engine-package.sh

@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
-# Rebuild public/dssl-engine.zip from the current engine + package texts.
+# Rebuild public/dssl-engine.zip and public/dssl-engine.tar.gz from the current engine + package texts.
 # Usage: bash scripts/build-engine-package.sh
 set -euo pipefail
-ROOT=/home/z/my-project
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
 STAGE=$(mktemp -d)
 trap 'rm -rf "$STAGE"' EXIT
 
@@ -26,5 +26,8 @@ with zipfile.ZipFile(out, "w", zipfile.ZIP_DEFLATED) as z:
             full = os.path.join(base, f)
             z.write(full, os.path.relpath(full, stage))
 PY
+rm -f "$ROOT/public/dssl-engine.tar.gz"
+tar -czf "$ROOT/public/dssl-engine.tar.gz" -C "$STAGE" dssl-engine
+echo "built $ROOT/public/dssl-engine.tar.gz"
 echo "built $ROOT/public/dssl-engine.zip:"
 python3 -m zipfile -l "$ROOT/public/dssl-engine.zip"

scripts/test-guide-browser.mjs

@@ -9,9 +9,10 @@
 import { readFileSync, writeFileSync, unlinkSync } from 'node:fs';
 import { createServer } from 'node:http';
 import { extname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { chromium } from 'playwright';
 
-const ROOT = '/home/z/my-project';
+const ROOT = fileURLToPath(new URL('..', import.meta.url)).replace(/\/$/, '');
 const PORT = 8931 + Math.floor(Math.random() * 200);
 
 const MIME = { '.js': 'text/javascript', '.html': 'text/html', '.css': 'text/css', '.json': 'application/json' };

scripts/test-guide-examples.mjs

@@ -3,18 +3,23 @@
 // and reports README.md blocks (the README may carry teaching examples that
 // intentionally error; those are tagged with <!-- dssl:has-errors -->).
 import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import { parse } from '../public/dssl/parser.js';
 import { resolve, DEFAULT_TOKENS } from '../public/dssl/resolver.js';
 
+// paths are relative to the repo, so this works in any checkout
+const repo = (f) => fileURLToPath(new URL('../' + f, import.meta.url));
 const files = [
-  { path: '/home/z/my-project/GUIDE.md', strict: true },
-  { path: '/home/z/hf-mirror/README.md', strict: false },
+  { path: repo('GUIDE.md'), strict: true },
+  { path: repo('README.md'), strict: false },
 ];
 
 let pass = 0, fail = 0;
 for (const { path, strict } of files) {
   let text;
-  try { text = readFileSync(path, 'utf8'); } catch { console.log('(skip missing ' + path + ')'); continue; }
+  // a missing file used to be skipped quietly, which let the whole check
+  // report "0 passed, 0 failed" and look green. A missing file is a failure.
+  try { text = readFileSync(path, 'utf8'); } catch { console.error('FAIL cannot read ' + path); fail++; continue; }
   const blocks = [...text.matchAll(/```dssl\n([\s\S]*?)```/g)].map(m => m[1]);
   // whole-file workspace fold: seed with the engine's default tokens, collect
   // every token defined anywhere in the document, then compile each block
@@ -31,6 +36,8 @@ for (const { path, strict } of files) {
     const { ast, errors: parseErrors } = parse(src, name);
     const doc = resolve(ast, name, registry);
     const errors = [...parseErrors, ...doc.errors];
+    // raw { } needs real CSS, so a missing semicolon in a documented example is a docs bug
+    if (strict) for (const w of doc.warnings || []) if (/needs a ";"/.test(w.message)) errors.push({ line: w.line, message: w.message });
     if (errors.length === 0) { pass++; return; }
     if (!strict && /dssl:has-errors/.test(src)) { pass++; return; }
     fail++;
@@ -38,6 +45,7 @@ for (const { path, strict } of files) {
     for (const e of errors.slice(0, 4)) console.error('   line ' + (e.line ?? '?') + ': ' + e.message);
   });
   console.log(`${path.split('/').pop()}: ${blocks.length} blocks checked`);
+  if (blocks.length === 0) { console.error('FAIL no dssl blocks found in ' + path); fail++; }
 }
 console.log(`${pass} passed, ${fail} failed`);
 process.exitCode = fail ? 1 : 0;

scripts/test-v073.mjs

@@ -9,6 +9,7 @@ import { execFileSync } from 'node:child_process';
 import { writeFileSync, readFileSync, mkdtempSync, rmSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
+import { VERSION } from '../public/dssl/index.js';
 
 let pass = 0, fail = 0;
 const ok = (name, cond, extra) => {
@@ -131,13 +132,13 @@ const lastVal = (decls, prop) => decls.filter(d => d.prop === prop).pop()?.value
 /* ---- feature: fluid sugar ---- */
 {
   const inline = compileDoc('.a { font-size: fluid 16 24 }');
-  ok('7a. font-size: fluid 16 24 → clamp', val(declsOf(inline.doc), 'font-size') === 'clamp(16px, calc(16px + 0.952vw), 24px)');
+  ok('7a. font-size: fluid 16 24 → clamp', val(declsOf(inline.doc), 'font-size') === 'clamp(16px, calc(12.571px + 0.952vw), 24px)');
   const bounds = compileDoc('.a { font-size: fluid 16 24 400 800 }');
-  ok('7b. custom viewport bounds change the slope', val(declsOf(bounds.doc), 'font-size') === 'clamp(16px, calc(16px + 2.000vw), 24px)');
+  ok('7b. custom viewport bounds change the slope', val(declsOf(bounds.doc), 'font-size') === 'clamp(16px, calc(8px + 2vw), 24px)');
   const gap = compileDoc('.a { gap: fluid 8 16 }');
-  ok('7c. gap takes inline fluid too', val(declsOf(gap.doc), 'gap') === 'clamp(8px, calc(8px + 0.952vw), 16px)');
+  ok('7c. gap takes inline fluid too', val(declsOf(gap.doc), 'gap') === 'clamp(8px, calc(4.571px + 0.952vw), 16px)');
   const legacy = compileDoc('.a { fluid: 16, 24 }');
-  ok('7d. the fluid: 16, 24 form still works', val(declsOf(legacy.doc), 'font-size') === 'clamp(16px, calc(16px + 0.952vw), 24px)');
+  ok('7d. the fluid: 16, 24 form still works', val(declsOf(legacy.doc), 'font-size') === 'clamp(16px, calc(12.571px + 0.952vw), 24px)');
 }
 
 /* ---- feature: toCSS — the exit lane ---- */
@@ -209,7 +210,7 @@ raw { @font-face { font-family: X; src: url(x.woff2) } }`;
   const missing = run(['check', join(dir, 'nope.dssl')]);
   ok('9i. missing file exits 2', missing.code === 2);
   const v = run(['--version']);
-  ok('9j. --version prints 0.8.0', v.out.trim() === '0.8.0');
+  ok('9j. --version prints the engine version', v.out.trim() === VERSION);
   rmSync(dir, { recursive: true, force: true });
 }
 

scripts/test-v081.mjs

@@ -0,0 +1,175 @@
+/* test-v081.mjs; one assertion per fix in 0.8.1.
+ * Source: the 2026-10-23 re-test of 0.8.0 (two bugs and one nit).
+ *   1. fluid computed clamp(16px, calc(16px + 0.952vw), 24px): no intercept,
+ *      so it was already 19.6px at a 375px phone and hit 24px near 840px.
+ *   2. the guide's multi-line raw { } example came out as "undefined @font-face"
+ *      and, with no semicolons, was not valid CSS.
+ *   3. dssl build had no --strict, so CI could not fail on warnings.
+ * The fluid tests do not compare strings. They evaluate the emitted clamp()
+ * at real viewport widths, which is the thing that was wrong. */
+import { parse } from '../public/dssl/parser.js';
+import { resolve } from '../public/dssl/resolver.js';
+import { toCSS } from '../public/dssl/static.js';
+import { VERSION } from '../public/dssl/index.js';
+import { execFileSync } from 'node:child_process';
+import { writeFileSync, mkdtempSync, rmSync, mkdirSync, copyFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra ? '; ' + extra : ''}`); }
+};
+
+const compileDoc = (src, file = 't.dssl') => {
+  const { ast, errors } = parse(src, file);
+  const doc = resolve(ast, file);
+  return { doc, errors: [...errors, ...doc.errors], ast };
+};
+const declsOf = (doc, i = 0) => doc.rules[i]?.decls || [];
+const val = (decls, prop) => decls.find(d => d.prop === prop)?.value;
+
+/** evaluate `clamp(L, calc(I + Wvw), H)` at a viewport width, in px (rem = 16px) */
+const evalClamp = (css, vw) => {
+  const m = /^clamp\(\s*(-?[\d.]+)(px|rem|em),\s*calc\(\s*(-?[\d.]+)(px|rem|em)\s*\+\s*(-?[\d.]+)vw\s*\),\s*(-?[\d.]+)(px|rem|em)\s*\)$/.exec(css);
+  if (!m) return NaN;
+  const f = (u) => (u === 'px' ? 1 : 16);
+  const lo = parseFloat(m[1]) * f(m[2]);
+  const mid = parseFloat(m[3]) * f(m[4]) + parseFloat(m[5]) * vw / 100;
+  const hi = parseFloat(m[6]) * f(m[7]);
+  return Math.min(hi, Math.max(lo, mid));
+};
+const near = (a, b, eps = 0.01) => Math.abs(a - b) <= eps;
+const fluidOf = (src) => val(declsOf(compileDoc(src).doc), 'font-size');
+
+/* ---- 1: fluid math ---- */
+{
+  const c = fluidOf('.a { font-size: fluid 16 24 }');
+  ok('1a. fluid 16 24 is exactly 16px at the 360px lower bound', near(evalClamp(c, 360), 16), `got ${evalClamp(c, 360)}`);
+  ok('1b. fluid 16 24 is exactly 24px at the 1200px upper bound', near(evalClamp(c, 1200), 24), `got ${evalClamp(c, 1200)}`);
+  ok('1c. a 375px phone gets 16.14px, not the 19.57px 0.8.0 gave', near(evalClamp(c, 375), 16.143), `got ${evalClamp(c, 375)}`);
+  ok('1d. the middle of the range is the middle of the sizes (780px = 20px)', near(evalClamp(c, 780), 20), `got ${evalClamp(c, 780)}`);
+  ok('1e. an 800px laptop window gets 20.19px, not 23.6px', near(evalClamp(c, 800), 20.19), `got ${evalClamp(c, 800)}`);
+  ok('1f. it is clamped below the lower bound and above the upper bound', near(evalClamp(c, 200), 16) && near(evalClamp(c, 2000), 24));
+
+  const b = fluidOf('.a { font-size: fluid 16 24 400 800 }');
+  ok('1g. custom bounds: 16px at 400, 24px at 800, 20px at 600', near(evalClamp(b, 400), 16) && near(evalClamp(b, 800), 24) && near(evalClamp(b, 600), 20));
+
+  const shrink = fluidOf('.a { font-size: fluid 24 16 }');
+  ok('1h. a shrinking size works: 24px at 360, 16px at 1200', near(evalClamp(shrink, 360), 24) && near(evalClamp(shrink, 1200), 16), shrink);
+  ok('1i. a shrinking size keeps the lower value first in clamp()', /^clamp\(16px,/.test(shrink), shrink);
+
+  const rem = fluidOf('.a { font-size: fluid 1rem 1.5rem }');
+  ok('1j. rem sizes interpolate too: 16px at 360, 24px at 1200', near(evalClamp(rem, 360), 16) && near(evalClamp(rem, 1200), 24), rem);
+
+  const legacy = fluidOf('.a { fluid: 16, 24 }');
+  ok('1k. the old fluid: 16, 24 form gets the same fix', near(evalClamp(legacy, 375), 16.143), legacy);
+
+  const gap = val(declsOf(compileDoc('.a { gap: fluid 8 16 }').doc), 'gap');
+  ok('1l. gap takes fluid with the same math (8px at 360, 16px at 1200)', near(evalClamp(gap, 360), 8) && near(evalClamp(gap, 1200), 16));
+
+  const pct = compileDoc('.a { width: fluid 50% 100% }');
+  ok('1m. a percentage is refused with a clear message', pct.errors.some(e => /percentage/.test(e.message)));
+  const mixed = compileDoc('.a { font-size: fluid 16px 2rem }');
+  ok('1n. mixed units are refused', mixed.errors.some(e => /mixes units/.test(e.message)));
+  const backwards = compileDoc('.a { font-size: fluid 16 24 1200 360 }');
+  ok('1o. viewport bounds in the wrong order are refused', backwards.errors.some(e => /larger viewport second/.test(e.message)));
+}
+
+/* ---- 2: raw { } ---- */
+{
+  const guide = `raw {
+  @font-face {
+    font-family: Inter;
+    src: url(/fonts/inter.woff2);
+  }
+}`;
+  const g = compileDoc(guide);
+  const css = g.doc.raws[0]?.css || '';
+  ok('2a. multi-line raw has no "undefined" in front of it', !/undefined/.test(css), css.slice(0, 40));
+  ok('2b. multi-line raw starts with the @font-face', /^@font-face\s*\{/.test(css), css.slice(0, 40));
+  ok('2c. the guide example compiles with zero errors and zero warnings', g.errors.length === 0 && g.doc.warnings.length === 0);
+  ok('2d. the body is kept verbatim, semicolons included', /font-family: Inter;/.test(css) && /src: url\(\/fonts\/inter\.woff2\);/.test(css));
+
+  const sameLine = compileDoc('raw { @font-face {\n  font-family: X;\n  src: local(Arial);\n} }');
+  ok('2e. content on the same line as "raw {" is not dropped', /^@font-face/.test(sameLine.doc.raws[0]?.css || ''), sameLine.doc.raws[0]?.css);
+  ok('2f. a raw block that closes on the same line as its last rule still works', sameLine.doc.raws.length === 1 && sameLine.errors.length === 0);
+
+  const old = compileDoc(`raw {
+  @font-face {
+    font-family: Inter
+    src: url(/fonts/inter.woff2)
+  }
+}`);
+  const w = old.doc.warnings.filter(x => /needs a ";"/.test(x.message));
+  ok('2g. the old no-semicolon style warns on each bare declaration', w.length === 2, JSON.stringify(old.doc.warnings.map(x => x.message)));
+  ok('2h. the warning points at the right source line', w.length === 2 && w[0].line === 3 && w[1].line === 4, w.map(x => x.line).join(','));
+  ok('2i. the warning explains why', w.length > 0 && /semicolons are required inside raw/.test(w[0].hint));
+
+  const one = compileDoc('raw { @font-face { font-family: X; src: local(Arial) } }');
+  ok('2j. single-line raw has no warning (the declarations sit inside braces on one line)', one.doc.warnings.length === 0 && one.errors.length === 0);
+  const sel = compileDoc('raw {\n  a:hover,\n  a:focus { color: red; }\n  .grid { grid-template-areas: "a b"\n    "c d"; }\n}');
+  ok('2k. selectors with colons and multi-line values are not flagged', sel.doc.warnings.length === 0, JSON.stringify(sel.doc.warnings.map(x => x.message)));
+  const cmt = compileDoc('raw {\n  /* color: red */\n  .a { color: blue; }\n}');
+  ok('2l. a declaration inside a comment is not flagged', cmt.doc.warnings.length === 0);
+
+  const built = toCSS(g.doc, { file: 't.dssl', banner: false });
+  ok('2m. the built CSS carries the raw block clean and valid', !/undefined/.test(built.css) && /font-family: Inter;/.test(built.css));
+}
+
+/* ---- 3: dssl build --strict (CLI) ---- */
+{
+  const here = dirname(fileURLToPath(import.meta.url));
+  const cli = join(here, '..', 'cli', 'dssl.mjs');
+  const dir = mkdtempSync(join(tmpdir(), 'dssl-v081-'));
+  const warnFile = join(dir, 'warn.dssl');
+  const cleanFile = join(dir, 'clean.dssl');
+  writeFileSync(warnFile, '.a { row: center center }\n');
+  writeFileSync(cleanFile, '.a { color: red }\n');
+  const run = (args) => {
+    try { return { code: 0, out: execFileSync('node', [cli, ...args], { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] }) }; }
+    catch (e) { return { code: e.status, out: (e.stdout || '') + (e.stderr || '') }; }
+  };
+  const plain = run(['build', warnFile, '-o', join(dir, 'a.css')]);
+  ok('3a. build with a warning still exits 0 without --strict', plain.code === 0);
+  const strict = run(['build', warnFile, '-o', join(dir, 'b.css'), '--strict']);
+  ok('3b. build --strict exits 1 on a warning', strict.code === 1);
+  const clean = run(['build', cleanFile, '-o', join(dir, 'c.css'), '--strict']);
+  ok('3c. build --strict exits 0 when there is nothing to warn about', clean.code === 0);
+  const js = JSON.parse(run(['build', warnFile, '--json', '--strict']).out);
+  ok('3d. build --json --strict reports ok:false', js.ok === false && js.warnings.length === 1);
+  const jn = JSON.parse(run(['build', warnFile, '--json']).out);
+  ok('3e. build --json without --strict still reports ok:true', jn.ok === true);
+  const v = run(['--version']);
+  ok('3f. the CLI reports the engine version', v.out.trim() === VERSION);
+  rmSync(dir, { recursive: true, force: true });
+}
+
+
+/* ---- 4: the packaged CLI (dssl-engine.zip layout: cli/ next to dssl/) ---- */
+{
+  const here = dirname(fileURLToPath(import.meta.url));
+  const root = join(here, '..');
+  const dir = mkdtempSync(join(tmpdir(), 'dssl-pkg-'));
+  mkdirSync(join(dir, 'cli')); mkdirSync(join(dir, 'dssl'));
+  copyFileSync(join(root, 'cli', 'dssl.mjs'), join(dir, 'cli', 'dssl.mjs'));
+  for (const f of ['boot', 'engine', 'index', 'parser', 'resolver', 'static', 'utils']) copyFileSync(join(root, 'public', 'dssl', f + '.js'), join(dir, 'dssl', f + '.js'));
+  const src = join(dir, 'a.dssl');
+  writeFileSync(src, 'h1 { font-size: fluid 16 24 }\n');
+  const run = (args) => {
+    try { return { code: 0, out: execFileSync('node', [join(dir, 'cli', 'dssl.mjs'), ...args], { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] }) }; }
+    catch (e) { return { code: e.status, out: (e.stdout || '') + (e.stderr || '') }; }
+  };
+  const v = run(['--version']);
+  ok('4a. the packaged CLI starts (0.8.0 crashed with module not found)', v.code === 0 && v.out.trim() === VERSION, v.out.slice(0, 120));
+  const b = run(['build', src, '-o', join(dir, 'a.css'), '--no-banner']);
+  ok('4b. the packaged CLI builds a stylesheet', b.code === 0, b.out.slice(0, 120));
+  const css = b.code === 0 ? execFileSync('cat', [join(dir, 'a.css')], { encoding: 'utf8' }) : '';
+  ok('4c. and the output has the corrected fluid math', /calc\(12\.571px \+ 0\.952vw\)/.test(css), css.slice(0, 160));
+  rmSync(dir, { recursive: true, force: true });
+}
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,29 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.8.1",
+    date: "growth phase · the follow-up",
+    title: "Two more bugs from the re-test, both fixed, and the tests now check the math.",
+    why: "after 0.8.0 shipped, the same reviewer ran it again. Most things held up. Two did not: the fluid sizing sugar computed the wrong line, and the guide's own raw example produced broken CSS. Both slipped past the tests for the same reason as before: the tests asked whether the code compiled, not whether the result was right.",
+    kind: "spec",
+    body:
+      "fluid 16 24 is supposed to be 16px on a 360px window and 24px on a 1200px one, sliding smoothly in between. The clamp() it produced had the right slope but forgot where the line starts, so it was already 19.6px on a 375px phone and hit its maximum around 840px. It now starts and ends where it says. While writing the tests, three more things turned up and are fixed by the same change: shrinking sizes like fluid 24 16 made a backwards clamp(), rem sizes got a slope 16 times too small, and percentages (which cannot follow the window width) now give a clear error instead of nonsense. If you used fluid in 0.8.0, your text will be a bit smaller on phones and tablets now. That is the fix. The raw { } block had its own problems: a multi-line block started with the word undefined, anything on the same line as raw { was dropped, and the example in the guide had no semicolons, which is not valid CSS. The first two are fixed, the guide example is corrected, and a missing semicolon inside raw { } is now a warning that names the line, since raw is real CSS and DSSL cannot guess what you meant. dssl build also takes --strict now, so CI can fail on warnings the same way dssl check can. The new tests do not compare strings. They work out what the emitted clamp() gives at real window widths (360, 375, 600, 800, 1200 and beyond) and check it against the sizes you asked for, and they were run against the old 0.8.0 engine first, where two dozen of them fail. One more thing turned up while testing the download: the dssl command inside dssl-engine.zip crashed on start with module not found, because it looked for the engine in public/dssl and the package keeps it in dssl. It now finds the engine in either place, and a test runs it from the package layout.",
+    code: `// what fluid 16 24 gives you, by window width
+//   360px  ->  16px      (the lower size, exactly)
+//   375px  ->  16.1px    (0.8.0 said 19.6px)
+//   800px  ->  20.2px    (0.8.0 said 23.6px)
+//  1200px  ->  24px      (the upper size, exactly)
+h1 { font-size: fluid 16 24 }
+
+// raw is real CSS, so it needs its semicolons
+raw {
+  @font-face {
+    font-family: Inter;
+    src: url(/fonts/inter.woff2);
+  }
+}`,
+  },
   {
     version: "v0.8.0",
     date: "growth phase · the exit drop",

src/components/dssl/views/DocsView.tsx

@@ -437,7 +437,7 @@ input::-webkit-slider-thumb { background: color.accent }
                 <tr><td><code>cover</code></td><td><code>cover: fixed</code></td><td>position + inset: 0</td></tr>
                 <tr><td><code>sticky</code></td><td><code>sticky: 0</code></td><td>position: sticky; top: 0px</td></tr>
                 <tr><td><code>font</code></td><td><code>font: 16/1.4 ink</code></td><td>font-size / line-height / color</td></tr>
-                <tr><td><code>fluid</code></td><td><code>fluid: 16, 24</code></td><td>clamp() interpolating 16→24px across 360→1200px</td></tr>
+                <tr><td><code>fluid</code></td><td><code>fluid: 16, 24</code></td><td>a size that grows smoothly from 16px at a 360px window to 24px at 1200px (px, rem or em)</td></tr>
                 <tr><td><code>shadow</code> / <code>radius</code></td><td><code>shadow: lg</code></td><td>token presets (sm/md/lg/xl) or raw values</td></tr>
                 <tr><td><code>circle</code></td><td><code>circle: 36</code></td><td>width + height + border-radius: 50%</td></tr>
                 <tr><td><code>grow</code> / <code>shrink</code> / <code>basis</code></td><td><code>grow: 1</code></td><td>flex-grow / flex-shrink / flex-basis</td></tr>