v0.12.0: symmetrical tiling, fonts block, richer gradients, in-page inspector, hot reload and dssl dev

GUIDE.md

@@ -392,6 +392,16 @@ knots are drawn on top. There are ten presets: `oak`, `walnut`, `cherry`, `maple
 | `planks` | board height in px, with a seam and a different board each |
 | `seed`, `angle` | another board; 0 or 90 degrees |
 
+`symmetrical` removes the repeat problem. It mirrors every other tile, so each edge meets its own reflection (seamless by construction) and the pattern repeats twice as far apart:
+
+```dssl
+.floor { background-color: #8a5f33; texture: oak-planks symmetrical }     // mirrored both ways
+.bar   { texture: walnut symmetrical x }                                 // only left to right
+.post  { texture: noise symmetrical y }                                  // only top to bottom
+```
+
+It works on every texture made of an SVG image (noise, bump, rings, waves, hex). The pure CSS patterns (lines, dots, grid, checker, carbon) are already regular and are left alone. The cost is small: the tile is drawn once and flipped, not copied. The look is a mirror line down the middle, which on wood reads as a book-matched board, a real woodworking trick.
+
 The drawing uses only your seed and plain arithmetic, so the same seed gives the same board on every
 machine, and the tile repeats without a seam. It does repeat: one tile is 576px along the grain, and
 three boards tall with `planks`, so a very large surface shows the pattern twice. Use two textures with
@@ -415,6 +425,43 @@ engine is ready: the engine adds the class `dssl-ready` to `<html>` when it has
 <script>setTimeout(() => document.documentElement.classList.add('dssl-ready'), 2500)</script> <!-- failsafe -->
 ```
 
+### Fonts
+
+```dssl
+fonts {
+  Fraunces: 500 700 800                 // Google Fonts, these weights
+  "Hanken Grotesk": 400 700 italic      // with italics
+  Inter: 100..900 display optional      // a variable range; how it swaps in
+  Brand: from "/fonts/brand.woff2" 400  // your own file: @font-face
+}
+```
+
+A family line is `Family: weights [italic] [display swap|block|fallback|optional]`, or `Family: from "file" weight` for a file of your own (one weight or one variable range per file, so one line per file). The engine adds the `<link>` and preconnects to `<head>` and removes it again if nothing asks for it; `dssl build` writes `@import` as the first line of the CSS and `@font-face` for your files. Google sees every visitor who loads one of its fonts, which some privacy laws care about: self-host with `from` if that is you.
+
+### Gradients, the new forms
+
+```dssl
+.stripes { gradient: repeating linear 45, #fff 0 10, color.ink 10 20 }
+.blend   { gradient: linear 90 in oklch, #ff0055 -> #00d4ff }
+.mid     { gradient: linear 90, #f00 -> 30% -> #00f }
+.band    { gradient: linear 90, #f00 0 30%, #00f 30% 100% }
+.aurora  { gradient: mesh #14102a, #ff7a1a at 15% 20%, #c2185b at 80% 30% size 45%, #3949ab at 50% 95% }
+.sheen   { gradient: radial at top left, #fff/40 -> transparent + linear 135, #123 -> #456 }
+```
+
+`repeating` turns any kind into its repeating form. `in oklch` (or `oklab`, `hsl`, `lab`, `srgb`, with `longer hue` and friends) picks the colour space the blend happens in. A lone position between two stops is a midpoint. Two positions make a hard band. Bare numbers in a stop position are px (degrees on `conic`). `mesh` takes a base colour and blobs: `color at x y [size n]` (default size 60%). `+` joins layers, first on top. A direction is optional: `linear #f00 -> #00f` works.
+
+### Inspector and hot reload
+
+```js
+DSSL.inspect()   // hover an element: the rules that won each property, with file and line
+DSSL.watch()     // edit a .dssl file, the open page restyles with no reload
+```
+
+Both are loaded only when called (`dev.js`), or switched on with `data-watch` and `data-inspect` on the script tag, or `?dssl-watch` and `?dssl-inspect` in the URL. The inspector outlines the element under the pointer and lists what applied and every matching rule in cascade order; click to pin, Escape to release, Escape again to close. Hot reload polls the .dssl files loaded by `DSSL.load` (and linked .css files) and applies a changed file in place, so scroll position and form input survive; an error shows as a toast with its line. `DSSL.watch(false)` stops it.
+
+`node cli/dssl.mjs dev [dir] [--port 3000] [--inspect]` is a static server that never caches and adds `DSSL.watch()` to every page, with the engine served from the install if the folder has none.
+
 ### Counters
 
 `counter-reset`, `counter-increment`, `counter-set`, and `content: counter(step)` or
@@ -682,7 +729,7 @@ Three ways to get it:
 
 1. VSCodium: open the Extensions tab, search "DSSL" and install. It is on Open VSX:
    https://open-vsx.org/extension/ehs-studio/dssl-vscode
-2. VS Code: download `dssl-vscode/dssl-vscode-0.11.0.vsix` from the repo files, then
+2. VS Code: download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then
    Extensions panel, `...`, Install from VSIX. (The Microsoft Marketplace listing is not published yet.)
 3. Build it yourself: `cd dssl-vscode && npx @vscode/vsce package --no-dependencies`.
 

PARITY.md

@@ -62,6 +62,10 @@ 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.12.0: the rest of the wood list
+
+Fonts, richer gradients, an inspector, hot reload and mirrored tiling, from the same critic's list (rows marked "done in 0.12.0" below).
+
 ## v0.11.0 (wood): rings, species, planks, baked textures
 
 Written after another AI built a wood site in DSSL and listed what hurt. What came of it:
@@ -76,10 +80,11 @@ Written after another AI built a wood site in DSSL and listed what hurt. What ca
 | Contrast false alarms on translucent backgrounds | judged on the light page, white and black; warns only if it fails on all |
 | Flash of unstyled content | `dssl-ready` class on `<html>`, and `dssl build` for the static part (the wood page does this) |
 | Textures missing from `dssl build` | baked into the CSS when colours are known; the report names the ones that could not be |
-| `@font-face` in `raw {}` | **not done.** A native font loader is still a good idea. |
-| Gradients only cover simple cases | **not done.** Plain CSS gradient strings still pass through, which is what the wood page uses. |
-| Dev-tools inspector for which rule produced a style | **not done.** `DSSL.explain()` is still a console call. |
-| Hot reload | **not done.** |
+| `@font-face` in `raw {}` | done in 0.12.0: a `fonts { }` block (Google families, variable ranges, your own files) |
+| Gradients only cover simple cases | done in 0.12.0: repeating, colour spaces, midpoints, hard bands, `mesh`, layers |
+| Dev-tools inspector for which rule produced a style | done in 0.12.0 as an in-page panel, `DSSL.inspect()`. A real browser DevTools panel would need an extension and is still not done. |
+| Hot reload | done in 0.12.0: `DSSL.watch()` and `dssl dev` |
+| The wood tile repeats every 576px | `texture: ... symmetrical` mirrors the tile, so it never shows a seam |
 
 ## v0.10.0: glass, tilt, and a silent colour bug
 

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). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.11.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
+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). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
 
 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
 
@@ -392,6 +392,19 @@ One description writes both the `::-webkit-slider-*` rules (Chrome, Edge, Safari
 `::-moz-range-*` rules (Firefox). `graph 20 45 70 90 60` puts a histogram behind the track, and
 `aura-particle: ... from thumb` makes particles leave the thumb.
 
+## Fonts, gradients, dev tools
+
+```dssl
+fonts {
+  Fraunces: 500 700 800
+  Brand: from "/fonts/brand.woff2" 400
+}
+.hero { gradient: mesh #14102a, #ff7a1a at 15% 20%, #3949ab at 80% 70% }
+.floor { texture: oak-planks symmetrical }     // mirrored tiles: no seam, no obvious repeat
+```
+
+`DSSL.inspect()` shows which rule produced each style, in the page. `DSSL.watch()` (or `node cli/dssl.mjs dev .`) restyles the open page when you save a `.dssl` file, with no reload.
+
 ## Glass and tilt
 
 ```dssl

cli/dssl.mjs

@@ -12,6 +12,11 @@
  *       Convert CSS to DSSL (semicolons, px, transition order, font:, @keyframes,
  *       !important, raw blocks) and report what could not be carried over.
  *
+ *   dssl dev [dir] [--port 3000] [--inspect]
+ *       A tiny static server that never caches and adds DSSL.watch() to every page it
+ *       serves, so saving a .dssl file restyles the open page in place. Pages that load
+ *       /dssl/boot.js get it from the engine folder if the served folder has none.
+ *
  *   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
@@ -53,6 +58,9 @@ const USAGE = `dssl v${VERSION} - the DSSL style language
                          -o <out.dssl>  output path (default: <file>.dssl)
                          --stdout       print the DSSL instead of writing a file
                          --json         machine-readable report
+  dssl dev [dir]         serve a folder with hot reload: edit a .dssl file and the page restyles with no reload
+                         --port <n>     port (default 3000)
+                         --inspect      also open the in-page inspector (hover an element to see its rules)
   dssl --version         print the version`;
 
 const readArg = (args, flag) => {
@@ -152,7 +160,35 @@ if (cmd === 'check') {
   process.exit(bad ? 1 : 0);
 }
 
-if (cmd === 'build') {
+if (cmd === 'dev') {
+  const { createServer } = await import('node:http');
+  const { extname } = await import('node:path');
+  const { readFile } = await import('node:fs/promises');
+  const port = Number(readArg(args, '--port') || 3000);
+  const inspectOn = args.includes('--inspect'); if (inspectOn) args.splice(args.indexOf('--inspect'), 1);
+  const dir = pathResolve(args[0] || '.');
+  if (!existsSync(dir)) { console.error(`dssl dev: ${dir} does not exist`); process.exit(2); }
+  const MIME = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript', '.mjs': 'text/javascript', '.css': 'text/css', '.dssl': 'text/plain; charset=utf-8', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.jpg': 'image/jpeg', '.woff2': 'font/woff2', '.woff': 'font/woff', '.txt': 'text/plain' };
+  const inject = `<script>addEventListener('dssl-ready',function(){if(window.DSSL){DSSL.watch();${inspectOn ? 'DSSL.inspect();' : ''}}});</script>`;
+  createServer(async (req, res) => {
+    let url = decodeURIComponent((req.url || '/').split('?')[0]);
+    if (url.endsWith('/')) url += 'index.html';
+    const inside = (p) => p.startsWith(dir);
+    let file = pathResolve(join(dir, url));
+    if (!inside(file)) { res.writeHead(403); return res.end('no'); }
+    if (!existsSync(file) && url.startsWith('/dssl/')) file = pathResolve(join(engineDir, url.slice(6)));
+    try {
+      if (statSync(file).isDirectory()) file = join(file, 'index.html');
+      let body = await readFile(file);
+      if (extname(file) === '.html') body = Buffer.from(String(body).includes('</body>') ? String(body).replace('</body>', inject + '</body>') : String(body) + inject);
+      res.writeHead(200, { 'content-type': MIME[extname(file)] || 'application/octet-stream', 'cache-control': 'no-store' });
+      res.end(body);
+    } catch { res.writeHead(404, { 'content-type': 'text/plain' }); res.end('not found: ' + url); }
+  }).listen(port, () => {
+    console.log(`dssl dev: serving ${dir}`);
+    console.log(`  http://localhost:${port}/   (hot reload on${inspectOn ? ', inspector on' : ''}; Ctrl+C to stop)`);
+  });
+} else if (cmd === 'build') {
   const json = args.includes('--json');
   const banner = !args.includes('--no-banner');
   const strict = args.includes('--strict');
@@ -217,5 +253,7 @@ if (cmd === 'import') {
   process.exit(report.compile.ok ? 0 : 1);
 }
 
-console.error(`dssl: unknown command "${cmd}"\n\n${USAGE}`);
-process.exit(2);
+if (cmd !== 'dev') {   // dev keeps the process alive
+  console.error(`dssl: unknown command "${cmd}"\n\n${USAGE}`);
+  process.exit(2);
+}

dssl-vscode/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.12.0
+
+- Bundled engine updated to 0.12.0: `texture: ... symmetrical`, a `fonts { }` block, richer `gradient:` sentences
+  (repeating, colour spaces, midpoints, hard bands, mesh, layers), `DSSL.inspect()`, `DSSL.watch()` and `dssl dev`.
+- `fonts` appears in block completions with hover docs, and the `gradient` hover lists the new forms.
+
 ## 0.11.0
 
 - Bundled engine updated to 0.11.0: ten wood species and the `rings` texture generator (figure, warp,

dssl-vscode/lib/engine/fonts.js

@@ -0,0 +1,112 @@
+/* =========================================================================
+ * DSSL: fonts.js (0.12.0)
+ *
+ *   fonts {
+ *     Fraunces: 500 700 800                  // from Google Fonts, these weights
+ *     "Hanken Grotesk": 400 700 italic       // with the italics too
+ *     Inter: 100..900 display optional       // a variable range, and how it swaps in
+ *     Brand: from "/fonts/brand.woff2" 400   // your own file: becomes @font-face
+ *   }
+ *
+ * Fonts used to need a raw { } block of plain CSS. A font is a stylesheet link
+ * (Google) or an @font-face (your file), and neither belongs in a rule, so this
+ * is its own block. At run time the engine adds the <link> to <head>; `dssl build`
+ * writes an @import at the top of the CSS.
+ *
+ * Google's servers see every visitor who loads a Google font. If that matters
+ * to you (it does under some privacy laws), self-host with `from`.
+ * ========================================================================= */
+
+export const FONT_WORDS = {
+  weights: 'a weight (400), several (400 700), or a variable range (100..900)',
+  italic: 'also load the italic of each weight',
+  display: 'display <swap|block|fallback|optional>: how the text behaves while the font loads (default swap)',
+  from: 'from "/path/to/file.woff2": use your own file instead of Google Fonts',
+};
+const DISPLAYS = ['swap', 'block', 'fallback', 'optional', 'auto'];
+const FORMATS = { woff2: 'woff2', woff: 'woff', ttf: 'truetype', otf: 'opentype' };
+
+const words = (s) => {
+  const out = []; let i = 0;
+  while (i < s.length) {
+    if (/\s/.test(s[i])) { i++; continue; }
+    if (s[i] === '"' || s[i] === "'") { const q = s[i]; let j = i + 1; while (j < s.length && s[j] !== q) j++; out.push(s.slice(i, j + 1)); i = j + 1; continue; }
+    let j = i; while (j < s.length && !/\s/.test(s[j])) j++; out.push(s.slice(i, j)); i = j;
+  }
+  return out;
+};
+const unq = (w) => (/^(["']).*\1$/.test(w) ? w.slice(1, -1) : w);
+
+/**
+ * Parse the text inside `fonts { ... }`.
+ * hooks.error(line, message, hint) reports a problem, hooks.suggest(word, list) gives a did-you-mean.
+ * Returns { links: [{ url, line }], faces: [css], families: [name] }.
+ */
+export function parseFonts(body, firstLine, hooks) {
+  const google = new Map();            // family -> { weights:Set<string>, italic:bool }
+  let display = 'swap';
+  const faces = [], families = [];
+  const lines = String(body).replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')).split('\n');
+  lines.forEach((raw, idx) => {
+    const line = firstLine + idx;
+    let text = raw.replace(/(^|\s)\/\/.*$/, '').trim().replace(/;$/, '');
+    if (!text) return;
+    // the family may be quoted, or bare words ("Hanken Grotesk"): everything before the first colon outside quotes
+    let colon = -1, q = null;
+    for (let i = 0; i < text.length; i++) { const c = text[i]; if (q) { if (c === q) q = null; continue; } if (c === '"' || c === "'") { q = c; continue; } if (c === ':') { colon = i; break; } }
+    if (colon === -1) { hooks.error(line, `expected "Family: weights" in "${text.slice(0, 40)}"`, 'e.g.  Fraunces: 500 700 800'); return; }
+    const family = unq(text.slice(0, colon).trim()).replace(/\s+/g, ' ');
+    if (!family) { hooks.error(line, 'a font line needs a family name before the colon'); return; }
+    const w = words(text.slice(colon + 1));
+    const weights = []; let italic = false, from = null, disp = null;
+    for (let i = 0; i < w.length; i++) {
+      const x = w[i];
+      if (/^\d{1,4}$/.test(x) || /^\d{1,4}\.\.\d{1,4}$/.test(x)) {
+        const [a, b] = x.split('..').map(Number);
+        if (a < 1 || a > 1000 || (b !== undefined && (b < 1 || b > 1000 || b <= a))) { hooks.error(line, `"${x}" is not a font weight`, FONT_WORDS.weights); return; }
+        weights.push(x);
+      } else if (x === 'italic') italic = true;
+      else if (x === 'display') {
+        if (!DISPLAYS.includes(w[i + 1])) { hooks.error(line, `display needs one of: ${DISPLAYS.join(', ')}`, FONT_WORDS.display); return; }
+        disp = w[++i];
+      } else if (x === 'from') {
+        if (!w[i + 1]) { hooks.error(line, 'from needs a file, e.g. from "/fonts/brand.woff2"', FONT_WORDS.from); return; }
+        from = unq(w[++i]);
+      } else {
+        hooks.error(line, `unknown font setting "${x}"`, (hooks.suggest && hooks.suggest(x, ['italic', 'display', 'from'])) || 'a line is: Family: weights italic display swap, or Family: from "file" weight');
+        return;
+      }
+    }
+    if (!families.includes(family)) families.push(family);
+    if (from) {
+      if (weights.length > 1) { hooks.error(line, 'one font file holds one weight (or one variable range), so give from a single weight', 'add one line per file'); return; }
+      const ext = (from.split('?')[0].match(/\.([a-z0-9]+)$/i) || [])[1];
+      const fmt = ext && FORMATS[ext.toLowerCase()];
+      const weight = weights[0] ? weights[0].replace('..', ' ') : '400';
+      faces.push(`@font-face {\n  font-family: "${family}";\n  src: url("${from}")${fmt ? ` format("${fmt}")` : ''};\n  font-weight: ${weight};\n  font-style: ${italic ? 'italic' : 'normal'};\n  font-display: ${disp || 'swap'};\n}`);
+      return;
+    }
+    if (disp) display = disp;
+    const g = google.get(family) || { weights: new Set(), italic: false };
+    for (const x of weights) g.weights.add(x);
+    if (italic) g.italic = true;
+    google.set(family, g);
+  });
+
+  const links = [];
+  if (google.size) {
+    const parts = [];
+    for (const [fam, g] of google) {
+      const name = fam.replace(/ /g, '+');
+      const ws = [...g.weights].sort((a, b) => parseInt(a) - parseInt(b));
+      if (!ws.length) { parts.push(g.italic ? `${name}:ital@0;1` : name); continue; }
+      if (g.italic) {
+        const axis = [];
+        for (const it of [0, 1]) for (const x of ws) axis.push(`${it},${x}`);
+        parts.push(`${name}:ital,wght@${axis.join(';')}`);
+      } else parts.push(`${name}:wght@${ws.join(';')}`);
+    }
+    links.push({ url: `https://fonts.googleapis.com/css2?family=${parts.join('&family=')}&display=${display}`, line: firstLine });
+  }
+  return { links, faces, families };
+}

dssl-vscode/lib/engine/parser.js

@@ -149,6 +149,7 @@ export function parse(source, file = 'inline.dssl') {
     if (h === 'tokens') return { kind: 'tokens' };
     if (h === 'pin') return { kind: 'pin' };
     if (h === 'raw' || h === '@css') return { kind: 'raw' };
+    if (h === 'fonts') return { kind: 'fonts' };
     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() };
@@ -244,9 +245,9 @@ export function parse(source, file = 'inline.dssl') {
    *    parsing normally. */
   let rawCapture = null; // { node, depth } while a multi-line raw { } is open
   const openBlock = (meta, node, rest, open, line) => {
-    if (meta.kind === 'raw') {
+    if (meta.kind === 'raw' || meta.kind === 'fonts') {
       if (stack.length > 1) {
-        err(line, 'raw { } must be top-level - it drops verbatim CSS into the page stylesheet', 'move it out of the enclosing block');
+        err(line, `${meta.kind} { } must be top-level` + (meta.kind === 'raw' ? ' - it drops verbatim CSS into the page stylesheet' : ' - fonts load for the whole page'), 'move it out of the enclosing block');
         const close = matchBrace(rest, open + 1);
         return close === -1 ? '' : rest.slice(close + 1);
       }

dssl-vscode/lib/engine/resolver.js

@@ -24,6 +24,7 @@ import { parseTexture } from './texture.js';
 import { parseAura } from './aura.js';
 import { parseSlider, sliderCss } from './slider.js';
 import { lintRules } from './lint.js';
+import { parseFonts } from './fonts.js';
 import { NAMED as NAMED_COLORS } from './color.js';
 import { glassDecls, parseTilt } from './effects.js';
 // v0.5.0 - the resolver validates the `::name` half of full selectors so a
@@ -425,22 +426,79 @@ const COLOR_WORDS = new Set(('black,silver,gray,white,maroon,red,purple,fuchsia,
   'canvas,canvastext,linktext,visitedtext,activetext,buttonface,buttontext,buttonborder,field,fieldtext,highlight,highlighttext,' +
   'currentcolor,transparent').split(','));
 
+/** split on a top-level " + " (layers), never inside parentheses or quotes */
+function splitLayers(s) {
+  const out = []; let depth = 0, q = null, cur = '';
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (q) { cur += c; if (c === q) 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/.test(s[i - 1] || '') && /\s/.test(s[i + 1] || '')) { out.push(cur.trim()); cur = ''; continue; }
+    cur += c;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+const INTERP_RE = /\s*\bin\s+(srgb-linear|srgb|display-p3|lab|oklab|xyz-d50|xyz-d65|xyz|hsl|hwb|lch|oklch)(\s+(?:longer|shorter|increasing|decreasing)\s+hue)?\s*$/i;
+
+/**
+ * gradient: one or several layers.
+ *   linear 135, a -> b                        the original sentence
+ *   repeating linear 45, red 0 10, blue 10 20 stripes: positions take %, px, em, rem (deg on conic)
+ *   linear 90 in oklch, #f00 -> #00f          pick the colour space the blend happens in
+ *   linear 90, a -> 30% -> b                  a lone position between two stops moves the midpoint
+ *   mesh #fff4e6, #ff7a1a at 15% 20%, #c2185b at 80% 30% size 60%    soft blobs of colour on a base
+ *   radial at top left, #fff/40 -> transparent + linear 135, #123 -> #456   layers, first on top
+ */
 function buildGradient(v, ctx) {
+  const layers = splitLayers(String(v).trim());
+  if (layers.length > 1) {
+    const out = [];
+    for (const l of layers) { const g = buildGradientLayer(l, ctx); if (g === null) return null; out.push(g); }
+    return out.join(', ');
+  }
+  return buildGradientLayer(String(v).trim(), ctx);
+}
+
+function buildMesh(rest, ctx) {
+  const items = topSplit(rest, ',').map((x) => x.trim()).filter(Boolean);
+  const bad = (message, hint) => { ctx.errors.push({ file: ctx.file, line: ctx.line, message, hint }); return null; };
+  if (items.length < 2) return bad('mesh needs a base colour and at least one blob', 'try  gradient: mesh #fff4e6, #ff7a1a at 15% 20%, #3949ab at 80% 70%');
+  let base = null; const blobs = [];
+  for (const it of items) {
+    const m = it.match(/^(.*?)\s+at\s+(\S+)\s+(\S+)(?:\s+size\s+(\S+))?$/i);
+    if (!m) { if (base !== null) return bad(`mesh item "${it}" needs a position`, 'write  color at 20% 30%  (and optionally  size 60%)'); base = resolveValue(it, { ...ctx, unitless: false, bareIdents: false }); continue; }
+    const pos = (x) => (/^-?\d+(\.\d+)?$/.test(x) ? x + 'px' : x);
+    const size = m[4] ? pos(m[4]) : '60%';
+    blobs.push(`radial-gradient(circle farthest-side at ${pos(m[2])} ${pos(m[3])}, ${resolveValue(m[1].trim(), { ...ctx, unitless: false, bareIdents: false })}, transparent ${size})`);
+  }
+  if (base === null) return bad('mesh needs a base colour first (an item without "at")', 'gradient: mesh #fff4e6, #ff7a1a at 15% 20%');
+  return [...blobs, `linear-gradient(${base}, ${base})`].join(', ');
+}
+
+function buildGradientLayer(v, ctx) {
   const t = String(v).trim();
-  const m = t.match(/^(linear|radial|conic)\b([\s\S]*)$/i);
+  const mm = t.match(/^mesh\b([\s\S]*)$/i);
+  if (mm) return buildMesh(mm[1], ctx);
+  const m = t.match(/^(repeating\s+)?(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"`,
+      message: `gradient needs a kind: "linear", "radial", "conic" or "mesh" (any of them can be "repeating")`,
       hint: 'try  gradient: linear 135, color.accent -> color.ok',
     });
     return null;
   }
-  const kind = m[1].toLowerCase();
-  const rest = m[2].trim();
+  const repeating = !!m[1];
+  const kind = m[2].toLowerCase();
+  const rest = m[3].trim().replace(/^,\s*/, '');
   const DIR_RE = /^to\s+(top|bottom|left|right)(\s+(top|bottom|left|right))?$/i;
-  const isPrefixShaped = (seg) => {
-    const s = seg.toLowerCase();
+  const isPrefixShaped = (seg0) => {
+    const s = seg0.toLowerCase().replace(INTERP_RE, '').trim();
+    if (s === '' && INTERP_RE.test(seg0)) return true;
     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`)
@@ -456,6 +514,8 @@ function buildGradient(v, ctx) {
     // 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]; }
+    // no direction at all: `linear #f00 -> #00f`, the first part is a stop
+    if (head && !isPrefixShaped(head) && /^(#|[a-z-]+\(|[a-z]+\.[a-z0-9-]+)/i.test(head) || (head && COLOR_WORDS.has(head.split(/\s+/)[0].toLowerCase()) && !isPrefixShaped(head))) { stopStrs.unshift(head); head = ''; }
   } 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();
@@ -469,6 +529,9 @@ function buildGradient(v, ctx) {
     });
     return null;
   }
+  // the colour space of the blend, if one was written: `in oklch`, `in hsl longer hue`
+  let interp = '';
+  { const im = head.match(INTERP_RE); if (im) { interp = im[0].trim().toLowerCase(); head = head.slice(0, im.index).trim(); } }
   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') {
@@ -513,10 +576,21 @@ function buildGradient(v, ctx) {
     }
   }
   const stops = [];
-  for (const s of stopStrs) {
+  const posUnit = kind === 'conic' ? 'deg' : 'px';
+  const asPos = (x) => (/^-?\d+(\.\d+)?$/.test(x) ? x + (x === '0' ? '' : posUnit) : x);
+  const POS = String.raw`-?\d+(?:\.\d+)?(?:%|px|em|rem|deg|turn)?`;
+  for (let si = 0; si < stopStrs.length; si++) {
+    const s = stopStrs[si];
+    // a lone position between two colours is a midpoint hint
+    if (new RegExp('^' + POS + '$').test(s)) {
+      if (si === 0 || si === stopStrs.length - 1) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: `"${s}" is a midpoint, so it has to sit between two colours`, hint: 'try  gradient: linear 90, #f00 -> 30% -> #00f' }); return null; }
+      stops.push(asPos(s));
+      continue;
+    }
     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(); }
+    // trailing position, or two of them (a hard-edged band: red 0 30%)
+    const pm = s.match(new RegExp('\\s+(' + POS + ')(?:\\s+(' + POS + '))?$'));
+    if (pm) { pos = pm[2] ? asPos(pm[1]) + ' ' + asPos(pm[2]) : asPos(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;
@@ -532,8 +606,9 @@ function buildGradient(v, ctx) {
     }
     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(', ')})`;
+  const fn = (repeating ? 'repeating-' : '') + (kind === 'linear' ? 'linear-gradient' : kind === 'radial' ? 'radial-gradient' : 'conic-gradient');
+  const first = [lead, interp].filter(Boolean).join(' ');
+  return `${fn}(${[first, ...stops].filter(Boolean).join(', ')})`;
 }
 
 function parseFlexWords(value, ctx, dir) {
@@ -1204,6 +1279,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const errors = [];
   const rules = [];
   const shadowRules = [];
+  const fontLinks = []; // 0.12.0 - stylesheet links from fonts { }
   const raws = []; // v0.8.0 - raw { } / @css { } verbatim passthrough blocks
   const motions = {};
   const behaviors = {};
@@ -1497,6 +1573,18 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           if (tr) rules.push(tr);
           break;
         }
+        case 'fonts': {
+          // 0.12.0 - a font is a stylesheet link or an @font-face, not a rule. Links ride on the document
+          // (the engine adds them to <head>, `dssl build` writes @import); faces are plain CSS and ride with raw.
+          if (ctx.sel) break;
+          const pf = parseFonts(node.css || '', node.line, {
+            error: (line, message, hint) => errors.push({ file, line, message, hint }),
+            suggest: (w, list) => { const h = didYouMean(w, list); return h ? `did you mean "${h}"?` : null; },
+          });
+          for (const l of pf.links) fontLinks.push({ ...l, file });
+          for (const css of pf.faces) raws.push({ css, file, line: node.line, order: order++ });
+          break;
+        }
         case 'raw': {
           // v0.8.0 - verbatim CSS escape hatch (@font-face, @keyframes,
           // @supports, @import, @property…). The parser captured the body
@@ -1702,7 +1790,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const mediaQueries = new Set();
   for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
 
-  return { rules, shadowRules, raws, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
+  return { rules, shadowRules, raws, fontLinks, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
 }
 
 /** naive `&` substitution + descendant join */

dssl-vscode/lib/engine/texture.js

@@ -56,6 +56,7 @@ export const TEXTURE_KEYS = {
   pores:     { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: fine fibre and pore streaks between the rings' },
   knots:     { words: 1, kind: 'number', min: 0, max: 8, int: true, doc: 'rings generator: how many knots in one tile (the pattern repeats, so keep it small)' },
   planks:    { words: 1, kind: 'number', min: 24, max: 1200, doc: 'rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each' },
+  symmetrical: { words: 1, kind: 'word', values: ['both', 'x', 'y'], optional: true, doc: 'mirror every other tile, so each edge meets its own reflection: no seam, and the repeat is twice as far apart. x mirrors left to right, y top to bottom, both (the default) does both. Works on the image-based textures (noise, bump, rings, waves, hex).' },
   invert:    { words: 0, kind: 'flag', doc: 'swap the two colours' },
 };
 
@@ -253,6 +254,8 @@ export function parseTexture(value, hooks) {
         return null;
       }
       if (def.kind === 'flag') { over[key] = true; continue; }
+      // a setting whose value is optional (symmetrical alone means both)
+      if (def.optional && (words[i + 1] === undefined || TEXTURE_KEYS[words[i + 1]] || !def.values.includes(words[i + 1]))) { over[key] = def.values[0]; continue; }
       const vals = words.slice(i + 1, i + 1 + def.words);
       if (vals.length < def.words || vals.some((v) => TEXTURE_KEYS[v])) {
         hooks.error(`texture setting "${key}" needs ${def.words === 1 ? 'a value' : def.words + ' values'}`, def.doc);
@@ -612,12 +615,35 @@ const BUILDERS = { rings: buildRings, noise: buildNoise, bump: buildBump, lines:
  * -position and -blend-mode, top layer first.
  *   rc(cssColorWord) -> {r,g,b,a} | null
  */
+/**
+ * symmetrical: lay the tile out twice over, the second copy flipped, so every edge meets its own mirror image.
+ * That is seamless for any image at all, and the pattern now repeats at double the distance. Only the
+ * SVG-image textures can be flipped this way; the pure CSS ones (lines, dots, grid, checker, carbon) are
+ * already regular and are left alone.
+ */
+function mirrorPiece(piece, mode) {
+  const m = /^url\("(data:image\/svg\+xml,[^"]*)"\)$/.exec(piece.image);
+  const sz = /^([\d.]+)px ([\d.]+)px$/.exec(piece.size || '');
+  if (!m || !sz) return piece;
+  const w = Number(sz[1]), h = Number(sz[2]);
+  const fx = mode === 'x' || mode === 'both', fy = mode === 'y' || mode === 'both';
+  const W = fx ? w * 2 : w, H = fy ? h * 2 : h;
+  const use = (tx, ty, sx, sy) => `<use href='#t' transform='translate(${tx} ${ty}) scale(${sx} ${sy})'/>`;
+  let body = use(0, 0, 1, 1);
+  if (fx) body += use(2 * w, 0, -1, 1);
+  if (fy) body += use(0, 2 * h, 1, -1);
+  if (fx && fy) body += use(2 * w, 2 * h, -1, -1);
+  const inner = m[1].replace(/'/g, '%27');
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='${W}' height='${H}'><defs><image id='t' width='${w}' height='${h}' href='${inner}'/></defs>${body}</svg>`;
+  return { ...piece, image: smallUrl(svg), size: `${W}px ${H}px`, tile: Math.max(piece.tile || 0, W, H) };
+}
+
 export function buildTexture(layers, rc) {
   const parts = [];
   for (const spec of layers) {
     const builder = BUILDERS[spec.gen];
     if (!builder) continue;
-    for (const piece of builder(spec, rc)) parts.push({ ...piece, animate: spec.animate || 0 });
+    for (const piece of builder(spec, rc)) parts.push({ ...(spec.symmetrical ? mirrorPiece(piece, spec.symmetrical) : piece), animate: spec.animate || 0 });
   }
   return {
     image: parts.map((p) => p.image).join(', '),

dssl-vscode/lib/props-docs.js

@@ -12,7 +12,7 @@ export const SEMANTIC = {
   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: 'gradient as a sentence: `gradient: linear 135, color.accent -> color.ok`. Also `repeating linear 45, #fff 0 10, #000 10 20` (stripes), `linear 90 in oklch, a -> b` (blend colour space), `a -> 30% -> b` (midpoint), `a 0 30%, b 30% 100%` (hard bands), `mesh #fff4e6, #ff7a1a at 15% 20%, #3949ab at 80% 70%` (soft blobs on a base), and layers joined with ` + ` (first on top). 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.',
@@ -31,7 +31,7 @@ export const SEMANTIC = {
   use: 'apply a behavior: `use focus-ring`. Behaviors are named rule groups declared with `behavior name { }`.',
   glass: 'frosted glass: `glass: 18`, `glass: 24 saturate 1.8 tint white/12`. Blurs what is behind the element and adds a faint wash of the text colour. Plain CSS, so `dssl build` keeps it. `glass: none` clears it.',
   tilt: 'follows the pointer in 3D: `tilt: 10`, `tilt: 12 lift 1.04 perspective 700 speed 0.2 invert glare`. Runtime only. `glare` keeps --dssl-gx and --dssl-gy pointing at the pointer so you can draw a shine. Ignores touch, flat under reduced motion.',
-  texture: 'a generated texture layered ON TOP of the element\u2019s own background: `texture: grain`, `texture: wood scale 6 intensity 0.8`, `texture: grain, scanlines`. 30 presets (grain, paper, marble, wood, carbon, halftone, ...) or build your own from a generator (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex) plus settings (scale, intensity, contrast, octaves, color, color2, blend, stretch, contour, ...). Open the designer to see them all.',
+  texture: 'a generated texture layered ON TOP of the element\u2019s own background: `texture: grain`, `texture: wood scale 6 intensity 0.8`, `texture: grain, scanlines`. 30 presets (grain, paper, marble, wood, carbon, halftone, ...) or build your own from a generator (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex) plus settings (scale, intensity, contrast, octaves, color, color2, blend, stretch, contour, ...). Wood: `texture: oak figure 0.8 knots 2 planks 120` (rings generator, ten species). `symmetrical` mirrors the tile so it never shows a seam. Open the designer to see them all.',
   aura: 'light and particles around an element, with NO presets: you describe it. `aura: glow #ff7a00 30 flicker 0.3, particles #fd0 -> #f60 count 60 shape flame glowing behind`. Replaces both slots. `aura: none` clears them.',
   'aura-glow': 'just the glow slot: `aura-glow: color.accent 24 pulse 1600`. Positional colour and radius, then settings (intensity, pulse, depth, flicker, texture(...), seed, essential). `aura-glow: none` clears only the glow.',
   'aura-particle': 'just the particles slot: `aura-particle: #7cf -> transparent 40 up size 6 life 800 speed 30 from bottom`. Settings: count, size, life, speed, dir, spread, gravity, drag, turbulence, from, shape, grow, glowing, behind, blend, texture(...), seed, essential.',
@@ -123,6 +123,7 @@ 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 { } }`.',
+  fonts: 'load fonts without raw CSS: `fonts { Fraunces: 500 700 800  "Hanken Grotesk": 400 700 italic  Brand: from "/fonts/brand.woff2" 400 }`. Google families become a <link> (and an @import in `dssl build`); `from` writes @font-face. Settings: weights or a range (100..900), italic, display swap|block|fallback|optional.',
   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.',
 };
 

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 and for textures, auras and sliders, hover docs, an interactive designer with sliders and live previews for aura, texture and range sliders, and a CSS to DSSL converter. Works in VS Code and VSCodium.",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

llms.txt

@@ -63,6 +63,12 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 - Alpha on a named colour works: `white/12`, `currentColor/20`. It used to compile to `white/12px`.
 - The playground has a canvas.html tab, `?example=` links, lint warnings and an "as CSS" tab. The canvas keeps a short allow-list of tags and drops scripts, handlers, styles and ids.
 
+## 0.12.0: fonts, gradients, symmetrical, dev tools
+- `texture: oak symmetrical [x|y|both]` mirrors every other tile: no seam, the repeat is twice as far apart. Works on image textures (noise, bump, rings, waves, hex); pure-CSS patterns are left alone.
+- `fonts { Fraunces: 500 700 800  "Hanken Grotesk": 400 700 italic  Inter: 100..900 display optional  Brand: from "/f.woff2" 400 }`. Google families become a <link> at run time and an @import in `dssl build`; `from` becomes @font-face.
+- gradient: `repeating linear 45, #fff 0 10, #000 10 20`; `linear 90 in oklch, a -> b`; `a -> 30% -> b` midpoint; `a 0 30%, b 30% 100%` hard bands; `mesh base, color at x y [size n], ...`; layers joined with ` + `; the direction is optional.
+- `DSSL.inspect()` (which rule produced each style, in the page), `DSSL.watch()` (hot reload of loaded .dssl and linked .css, no page reload), `node cli/dssl.mjs dev [dir]`. `data-watch`/`data-inspect` on the script tag, or ?dssl-watch / ?dssl-inspect.
+
 ## 0.11.0: wood and the build
 - Ten wood species presets: oak, walnut, cherry, maple, pine, mahogany, ebony, birch, oak-planks, walnut-planks. The `rings` generator draws growth rings as vector curves (not stretched noise): `texture: oak figure 0.8 knots 2 planks 120`. Settings: scale (ring spacing), color (latewood), color2 (earlywood), contrast, figure (cathedral arching), warp, pores, knots, planks (board height px), seed, angle 0 or 90. Same seed, same board everywhere; the tile repeats without a seam.
 - `dssl build` now BAKES textures into the CSS as background images when every colour is known at build time. Animated textures and unknown colours stay in the runtime, and the report says why.
@@ -84,4 +90,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. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.11.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. 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. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dssl",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": true,
   "description": "The DSSL style language and the website that is written in it.",
   "scripts": {

public/dssl/dev.js

@@ -0,0 +1,178 @@
+/* =========================================================================
+ * DSSL: dev.js (0.12.0) - the in-page inspector and hot reload
+ *
+ *   DSSL.inspect()      hover any element to see which DSSL rule produced each style, and where
+ *   DSSL.watch()        re-apply a .dssl file the moment it changes on disk, with no page reload
+ *
+ * Neither is loaded for visitors: this file is only imported when you call them
+ * (or when the script tag carries data-inspect or data-watch).
+ * ========================================================================= */
+
+const HOST_ID = 'dssl-dev-host';
+
+function describe(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? '#' + el.id : '';
+  const cls = typeof el.className === 'string' && el.className.trim() ? '.' + el.className.trim().split(/\s+/).slice(0, 3).join('.') : '';
+  return tag + id + cls;
+}
+
+/* ------------------------------------------------------------------ inspector */
+
+export function createInspector({ explain }) {
+  let state = null;
+
+  const start = () => {
+    if (state) return state.api;
+    const host = document.createElement('div');
+    host.id = HOST_ID;
+    host.style.cssText = 'all:initial;position:fixed;inset:0;z-index:2147483646;pointer-events:none;';
+    const root = host.attachShadow({ mode: 'open' });
+    root.innerHTML = `
+      <style>
+        :host { all: initial }
+        .box { position: fixed; border: 2px solid #ff3d8b; background: rgba(255,61,139,.12); pointer-events: none; border-radius: 2px; display: none }
+        .panel { position: fixed; right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px)); max-height: 58vh; overflow: auto; pointer-events: auto;
+          background: #17111f; color: #ece7f5; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius: 10px;
+          box-shadow: 0 10px 40px rgba(0,0,0,.45); border: 1px solid #3a2f4f }
+        header { position: sticky; top: 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; background: #231a33; border-bottom: 1px solid #3a2f4f }
+        header b { color: #ff8ac4 }
+        button { all: unset; cursor: pointer; padding: 2px 8px; border: 1px solid #5a4a78; border-radius: 6px; color: #ece7f5 }
+        button:focus-visible { outline: 2px solid #ffd98a }
+        .sec { padding: 8px 12px; border-bottom: 1px solid #2a2140 }
+        .sec h4 { margin: 0 0 4px; color: #a9c6ff; font-weight: 700 }
+        .row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 1px 0 }
+        .row span:first-child { overflow-wrap: anywhere }
+        .src { color: #9ce3c0; white-space: nowrap }
+        .val { color: #ffd98a }
+        .muted { color: #9a90ad }
+        .none { padding: 12px; color: #9a90ad }
+      </style>
+      <div class="box" part="box"></div>
+      <div class="panel" role="dialog" aria-label="DSSL inspector"><header><span><b>DSSL</b> inspector</span><span><button data-act="pin" title="Click the page to pin an element">hover</button> <button data-act="close" aria-label="Close inspector">Esc</button></span></header><div class="body"><div class="none">Hover an element. Click it to keep its rules on screen.</div></div></div>`;
+    document.documentElement.appendChild(host);
+    const box = root.querySelector('.box'), body = root.querySelector('.body'), pinBtn = root.querySelector('[data-act=pin]');
+    let target = null, pinned = false;
+
+    const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+    const place = (el) => {
+      const r = el.getBoundingClientRect();
+      Object.assign(box.style, { display: 'block', left: r.left + 'px', top: r.top + 'px', width: r.width + 'px', height: r.height + 'px' });
+    };
+    const show = (el) => {
+      target = el; place(el);
+      let rep = null;
+      try { rep = explain(el, { quiet: true }); } catch { rep = null; }
+      if (!rep) { body.innerHTML = `<div class="sec"><h4>${esc(describe(el))}</h4><span class="muted">no DSSL engine covers this element</span></div>`; return; }
+      const wins = rep.wins || [];
+      const matched = rep.matched || [];
+      body.innerHTML =
+        `<div class="sec"><h4>${esc(describe(el))}</h4><span class="muted">${matched.length} rule${matched.length === 1 ? '' : 's'} matched, ${wins.length} declaration${wins.length === 1 ? '' : 's'} won</span></div>` +
+        `<div class="sec"><h4>what applied</h4>${wins.length ? wins.map((w) => `<div class="row"><span>${esc(w.prop)}: <span class="val">${esc(String(w.value).slice(0, 90))}${String(w.value).length > 90 ? '...' : ''}</span>${w.imp ? ' !important' : ''}</span><span class="src">${esc(w.by.file || 'inline')}:${w.by.line} ${esc(w.by.sel)}</span></div>`).join('') : '<span class="muted">nothing</span>'}</div>` +
+        `<div class="sec"><h4>rules, in cascade order</h4>${matched.length ? matched.map((m) => `<div class="row"><span>${esc(m.sel)}${m.states && m.states.length ? ' <span class="muted">[' + esc(m.states.join(',')) + ']</span>' : ''}</span><span class="src">${esc(m.layer)} ${esc(m.file || 'inline')}:${m.line}</span></div>`).join('') : '<span class="muted">none</span>'}</div>` +
+        (rep.pseudo && rep.pseudo.length ? `<div class="sec"><h4>pseudo-elements</h4>${rep.pseudo.slice(0, 4).map((p) => `<div class="row"><span>::${esc(p.pseudo)} ${esc(p.sel)}</span><span class="src">${esc(p.file || 'inline')}:${p.line}</span></div>`).join('')}${rep.pseudo.length > 4 ? `<span class="muted">and ${rep.pseudo.length - 4} more, mostly global ones like scrollbars</span>` : ''}</div>` : '');
+    };
+    const inside = (el) => el === host || (el && el.closest && el.closest('#' + HOST_ID));
+    const onMove = (e) => {
+      if (pinned) return;
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || inside(el) || el === document.documentElement || el === document.body) return;
+      if (el !== target) show(el);
+    };
+    const onClick = (e) => {
+      if (inside(e.target)) return;
+      e.preventDefault(); e.stopPropagation();
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || inside(el)) return;
+      pinned = true; pinBtn.textContent = 'pinned (click to release)'; show(el);
+    };
+    const onKey = (e) => { if (e.key === 'Escape') { if (pinned) release(); else stop(); } };
+    const release = () => { pinned = false; pinBtn.textContent = 'hover'; };
+    const onScroll = () => { if (target && target.isConnected) place(target); };
+    pinBtn.addEventListener('click', release);
+    root.querySelector('[data-act=close]').addEventListener('click', () => stop());
+    document.addEventListener('mousemove', onMove, true);
+    document.addEventListener('click', onClick, true);
+    document.addEventListener('keydown', onKey, true);
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onScroll);
+    const stop = () => {
+      document.removeEventListener('mousemove', onMove, true);
+      document.removeEventListener('click', onClick, true);
+      document.removeEventListener('keydown', onKey, true);
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onScroll);
+      host.remove(); state = null;
+    };
+    state = { api: { stop, show, get target() { return target; }, get pinned() { return pinned; } } };
+    return state.api;
+  };
+
+  return { start, stop: () => { if (state) state.api.stop(); }, get active() { return !!state; } };
+}
+
+/* ------------------------------------------------------------------ hot reload */
+
+export function createWatcher({ apply, sources }) {
+  let timer = null, opts = null;
+  const seen = new Map();            // url -> last text
+  let toast = null, toastTimer = null;
+
+  const say = (text, bad) => {
+    if (!opts || opts.toast === false) return;
+    if (!toast) {
+      toast = document.createElement('div');
+      toast.setAttribute('role', 'status');
+      toast.style.cssText = 'all:initial;position:fixed;left:12px;bottom:12px;z-index:2147483646;font:12px/1.4 ui-monospace,Menlo,monospace;padding:6px 10px;border-radius:8px;color:#fff;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.35)';
+      document.documentElement.appendChild(toast);
+    }
+    toast.textContent = text;
+    toast.style.background = bad ? '#b3372e' : '#1c6b45';
+    toast.style.display = 'block';
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => { if (toast) toast.style.display = 'none'; }, bad ? 6000 : 1600);
+  };
+
+  const check = async () => {
+    for (const url of sources()) {
+      let text;
+      try {
+        const res = await fetch(url, { cache: 'no-store' });
+        if (!res.ok) continue;
+        text = await res.text();
+      } catch { continue; }
+      if (!seen.has(url)) { seen.set(url, text); continue; }
+      if (seen.get(url) === text) continue;
+      seen.set(url, text);
+      const r = apply(text, { name: url, replace: true });
+      const short = url.split('/').pop();
+      if (r.errors.length) say(`${short}: ${r.errors.length} error${r.errors.length === 1 ? '' : 's'}, line ${r.errors[0].line ?? '?'}: ${r.errors[0].message}`.slice(0, 160), true);
+      else say(`reloaded ${short}`);
+    }
+    // plain CSS links (a built stylesheet): swap the href so the browser fetches it again
+    if (opts && opts.css !== false) {
+      for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+        let u; try { u = new URL(link.href); } catch { continue; }
+        if (u.origin !== location.origin) continue;
+        const base = u.origin + u.pathname;
+        let text;
+        try { text = await (await fetch(base, { cache: 'no-store' })).text(); } catch { continue; }
+        if (!seen.has(base)) { seen.set(base, text); continue; }
+        if (seen.get(base) === text) continue;
+        seen.set(base, text);
+        link.href = base + '?dssl-reload=' + Date.now();
+        say(`reloaded ${u.pathname.split('/').pop()}`);
+      }
+    }
+  };
+
+  const start = (o = {}) => {
+    stop();
+    opts = { interval: 800, css: true, toast: true, ...o };
+    // remember what is on the page now, so only later edits count
+    (async () => { await check(); timer = setInterval(() => { check().catch(() => {}); }, Math.max(250, opts.interval)); })();
+    return true;
+  };
+  const stop = () => { if (timer) clearInterval(timer); timer = null; opts = null; if (toast) { toast.remove(); toast = null; } };
+  return { start, stop, get active() { return !!timer || !!opts; }, check };
+}

public/dssl/engine.js

@@ -393,6 +393,7 @@ export class DsslEngine {
     this.rules = rules;
     this.shadowRules = shadowRules;
     this.raws = raws;
+    this.syncFontLinks(bundles);
 
     // unique media queries → MediaQueryList cache
     for (const r of rules) for (const q of r.media) this.mql(q);
@@ -403,6 +404,30 @@ export class DsslEngine {
     this.computeAll();
   }
 
+  /** 0.12.0: fonts { } becomes <link> tags in <head>, one per URL, removed again when no sheet asks for it */
+  syncFontLinks(bundles) {
+    if (typeof document === 'undefined' || !document.head) return;
+    const want = new Set();
+    for (const b of bundles) for (const l of b.fontLinks || []) want.add(l.url);
+    const have = new Map();
+    for (const el of document.head.querySelectorAll('link[data-dssl-font]')) have.set(el.getAttribute('href'), el);
+    for (const [url, el] of have) if (!want.has(url)) el.remove();
+    for (const url of want) {
+      if (have.has(url)) continue;
+      if (!document.head.querySelector('link[data-dssl-font-preconnect]') && /^https:\/\/fonts\.googleapis\.com\//.test(url)) {
+        for (const origin of ['https://fonts.googleapis.com', 'https://fonts.gstatic.com']) {
+          const pc = document.createElement('link');
+          pc.rel = 'preconnect'; pc.href = origin; if (origin.includes('gstatic')) pc.crossOrigin = '';
+          pc.setAttribute('data-dssl-font-preconnect', '');
+          document.head.appendChild(pc);
+        }
+      }
+      const el = document.createElement('link');
+      el.rel = 'stylesheet'; el.href = url; el.setAttribute('data-dssl-font', '');
+      document.head.appendChild(el);
+    }
+  }
+
   mql(query) {
     let m = this.mqlCache.get(query);
     if (!m) {

public/dssl/fonts.js

@@ -0,0 +1,112 @@
+/* =========================================================================
+ * DSSL: fonts.js (0.12.0)
+ *
+ *   fonts {
+ *     Fraunces: 500 700 800                  // from Google Fonts, these weights
+ *     "Hanken Grotesk": 400 700 italic       // with the italics too
+ *     Inter: 100..900 display optional       // a variable range, and how it swaps in
+ *     Brand: from "/fonts/brand.woff2" 400   // your own file: becomes @font-face
+ *   }
+ *
+ * Fonts used to need a raw { } block of plain CSS. A font is a stylesheet link
+ * (Google) or an @font-face (your file), and neither belongs in a rule, so this
+ * is its own block. At run time the engine adds the <link> to <head>; `dssl build`
+ * writes an @import at the top of the CSS.
+ *
+ * Google's servers see every visitor who loads a Google font. If that matters
+ * to you (it does under some privacy laws), self-host with `from`.
+ * ========================================================================= */
+
+export const FONT_WORDS = {
+  weights: 'a weight (400), several (400 700), or a variable range (100..900)',
+  italic: 'also load the italic of each weight',
+  display: 'display <swap|block|fallback|optional>: how the text behaves while the font loads (default swap)',
+  from: 'from "/path/to/file.woff2": use your own file instead of Google Fonts',
+};
+const DISPLAYS = ['swap', 'block', 'fallback', 'optional', 'auto'];
+const FORMATS = { woff2: 'woff2', woff: 'woff', ttf: 'truetype', otf: 'opentype' };
+
+const words = (s) => {
+  const out = []; let i = 0;
+  while (i < s.length) {
+    if (/\s/.test(s[i])) { i++; continue; }
+    if (s[i] === '"' || s[i] === "'") { const q = s[i]; let j = i + 1; while (j < s.length && s[j] !== q) j++; out.push(s.slice(i, j + 1)); i = j + 1; continue; }
+    let j = i; while (j < s.length && !/\s/.test(s[j])) j++; out.push(s.slice(i, j)); i = j;
+  }
+  return out;
+};
+const unq = (w) => (/^(["']).*\1$/.test(w) ? w.slice(1, -1) : w);
+
+/**
+ * Parse the text inside `fonts { ... }`.
+ * hooks.error(line, message, hint) reports a problem, hooks.suggest(word, list) gives a did-you-mean.
+ * Returns { links: [{ url, line }], faces: [css], families: [name] }.
+ */
+export function parseFonts(body, firstLine, hooks) {
+  const google = new Map();            // family -> { weights:Set<string>, italic:bool }
+  let display = 'swap';
+  const faces = [], families = [];
+  const lines = String(body).replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')).split('\n');
+  lines.forEach((raw, idx) => {
+    const line = firstLine + idx;
+    let text = raw.replace(/(^|\s)\/\/.*$/, '').trim().replace(/;$/, '');
+    if (!text) return;
+    // the family may be quoted, or bare words ("Hanken Grotesk"): everything before the first colon outside quotes
+    let colon = -1, q = null;
+    for (let i = 0; i < text.length; i++) { const c = text[i]; if (q) { if (c === q) q = null; continue; } if (c === '"' || c === "'") { q = c; continue; } if (c === ':') { colon = i; break; } }
+    if (colon === -1) { hooks.error(line, `expected "Family: weights" in "${text.slice(0, 40)}"`, 'e.g.  Fraunces: 500 700 800'); return; }
+    const family = unq(text.slice(0, colon).trim()).replace(/\s+/g, ' ');
+    if (!family) { hooks.error(line, 'a font line needs a family name before the colon'); return; }
+    const w = words(text.slice(colon + 1));
+    const weights = []; let italic = false, from = null, disp = null;
+    for (let i = 0; i < w.length; i++) {
+      const x = w[i];
+      if (/^\d{1,4}$/.test(x) || /^\d{1,4}\.\.\d{1,4}$/.test(x)) {
+        const [a, b] = x.split('..').map(Number);
+        if (a < 1 || a > 1000 || (b !== undefined && (b < 1 || b > 1000 || b <= a))) { hooks.error(line, `"${x}" is not a font weight`, FONT_WORDS.weights); return; }
+        weights.push(x);
+      } else if (x === 'italic') italic = true;
+      else if (x === 'display') {
+        if (!DISPLAYS.includes(w[i + 1])) { hooks.error(line, `display needs one of: ${DISPLAYS.join(', ')}`, FONT_WORDS.display); return; }
+        disp = w[++i];
+      } else if (x === 'from') {
+        if (!w[i + 1]) { hooks.error(line, 'from needs a file, e.g. from "/fonts/brand.woff2"', FONT_WORDS.from); return; }
+        from = unq(w[++i]);
+      } else {
+        hooks.error(line, `unknown font setting "${x}"`, (hooks.suggest && hooks.suggest(x, ['italic', 'display', 'from'])) || 'a line is: Family: weights italic display swap, or Family: from "file" weight');
+        return;
+      }
+    }
+    if (!families.includes(family)) families.push(family);
+    if (from) {
+      if (weights.length > 1) { hooks.error(line, 'one font file holds one weight (or one variable range), so give from a single weight', 'add one line per file'); return; }
+      const ext = (from.split('?')[0].match(/\.([a-z0-9]+)$/i) || [])[1];
+      const fmt = ext && FORMATS[ext.toLowerCase()];
+      const weight = weights[0] ? weights[0].replace('..', ' ') : '400';
+      faces.push(`@font-face {\n  font-family: "${family}";\n  src: url("${from}")${fmt ? ` format("${fmt}")` : ''};\n  font-weight: ${weight};\n  font-style: ${italic ? 'italic' : 'normal'};\n  font-display: ${disp || 'swap'};\n}`);
+      return;
+    }
+    if (disp) display = disp;
+    const g = google.get(family) || { weights: new Set(), italic: false };
+    for (const x of weights) g.weights.add(x);
+    if (italic) g.italic = true;
+    google.set(family, g);
+  });
+
+  const links = [];
+  if (google.size) {
+    const parts = [];
+    for (const [fam, g] of google) {
+      const name = fam.replace(/ /g, '+');
+      const ws = [...g.weights].sort((a, b) => parseInt(a) - parseInt(b));
+      if (!ws.length) { parts.push(g.italic ? `${name}:ital@0;1` : name); continue; }
+      if (g.italic) {
+        const axis = [];
+        for (const it of [0, 1]) for (const x of ws) axis.push(`${it},${x}`);
+        parts.push(`${name}:ital,wght@${axis.join(';')}`);
+      } else parts.push(`${name}:wght@${ws.join(';')}`);
+    }
+    links.push({ url: `https://fonts.googleapis.com/css2?family=${parts.join('&family=')}&display=${display}`, line: firstLine });
+  }
+  return { links, faces, families };
+}

public/dssl/index.js

@@ -19,9 +19,10 @@ import { resolve, DEFAULT_TOKENS } from './resolver.js';
 import { toCSS as docToCSS } from './static.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.11.0';
+export const VERSION = '0.12.0';
 
 let counter = 0;
+const loadedUrls = new Set();   // every .dssl file fetched by load(), so DSSL.watch() knows what to follow
 const engines = new Map();
 let lastErrors = [];
 
@@ -139,6 +140,7 @@ export async function load(urls, opts = {}) {
       results.push({ ok: false, errors });
       continue;
     }
+    loadedUrls.add(opts.name || r.url);
     results.push(apply(r.text, { ...opts, name: opts.name || r.url }));
   }
   return results;
@@ -205,9 +207,32 @@ export function explain(el, opts = {}) {
   return rep;
 }
 
+// ---- 0.12.0: dev tools, loaded only when asked for --------------------------
+let devMod = null, inspector = null, watcher = null;
+async function dev() {
+  if (!devMod) devMod = await import('./dev.js');
+  if (!inspector) inspector = devMod.createInspector({ explain });
+  if (!watcher) watcher = devMod.createWatcher({ apply, sources: () => [...loadedUrls] });
+  return { inspector, watcher };
+}
+/** DSSL.inspect() toggles the in-page inspector; DSSL.inspect(false) closes it */
+export async function inspect(on = true) {
+  const d = await dev();
+  if (on === false) { d.inspector.stop(); return false; }
+  d.inspector.start();
+  return true;
+}
+/** DSSL.watch({ interval, css, toast }) re-applies a .dssl file when it changes on disk; DSSL.watch(false) stops */
+export async function watch(o = {}) {
+  const d = await dev();
+  if (o === false) { d.watcher.stop(); return false; }
+  d.watcher.start(typeof o === 'object' ? o : {});
+  return true;
+}
+
 export const DSSL = {
   version: VERSION, compile, apply, load, toCSS, signal, getSignal, refresh, replay, errors,
-  freeze, unfreeze, explain,
+  freeze, unfreeze, explain, inspect, watch,
   __debug: { engines },
 };
 
@@ -239,6 +264,13 @@ if (typeof window !== 'undefined') {
       }
     } finally {
       // always announce readiness - even when there was nothing to auto-load
+      // 0.12.0: <script src="boot.js" data-watch data-inspect> turns the dev tools on, and so does ?dssl-watch in the address
+      try {
+        const tag = document.querySelector('script[src$="boot.js"], script[src$="dssl/index.js"]');
+        const q = new URLSearchParams(location.search);
+        if ((tag && tag.hasAttribute('data-watch')) || q.has('dssl-watch')) watch();
+        if ((tag && tag.hasAttribute('data-inspect')) || q.has('dssl-inspect')) inspect();
+      } catch { /* dev tools are optional */ }
       window.dispatchEvent(new CustomEvent('dssl-ready', { detail: { version: VERSION } }));
       // 0.10.0: a page that hides itself until styled (see the guide, "No flash") shows itself here
       try { document.documentElement.classList.add('dssl-ready'); } catch { /* no document element yet */ }

public/dssl/parser.js

@@ -149,6 +149,7 @@ export function parse(source, file = 'inline.dssl') {
     if (h === 'tokens') return { kind: 'tokens' };
     if (h === 'pin') return { kind: 'pin' };
     if (h === 'raw' || h === '@css') return { kind: 'raw' };
+    if (h === 'fonts') return { kind: 'fonts' };
     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() };
@@ -244,9 +245,9 @@ export function parse(source, file = 'inline.dssl') {
    *    parsing normally. */
   let rawCapture = null; // { node, depth } while a multi-line raw { } is open
   const openBlock = (meta, node, rest, open, line) => {
-    if (meta.kind === 'raw') {
+    if (meta.kind === 'raw' || meta.kind === 'fonts') {
       if (stack.length > 1) {
-        err(line, 'raw { } must be top-level - it drops verbatim CSS into the page stylesheet', 'move it out of the enclosing block');
+        err(line, `${meta.kind} { } must be top-level` + (meta.kind === 'raw' ? ' - it drops verbatim CSS into the page stylesheet' : ' - fonts load for the whole page'), 'move it out of the enclosing block');
         const close = matchBrace(rest, open + 1);
         return close === -1 ? '' : rest.slice(close + 1);
       }

public/dssl/resolver.js

@@ -24,6 +24,7 @@ import { parseTexture } from './texture.js';
 import { parseAura } from './aura.js';
 import { parseSlider, sliderCss } from './slider.js';
 import { lintRules } from './lint.js';
+import { parseFonts } from './fonts.js';
 import { NAMED as NAMED_COLORS } from './color.js';
 import { glassDecls, parseTilt } from './effects.js';
 // v0.5.0 - the resolver validates the `::name` half of full selectors so a
@@ -425,22 +426,79 @@ const COLOR_WORDS = new Set(('black,silver,gray,white,maroon,red,purple,fuchsia,
   'canvas,canvastext,linktext,visitedtext,activetext,buttonface,buttontext,buttonborder,field,fieldtext,highlight,highlighttext,' +
   'currentcolor,transparent').split(','));
 
+/** split on a top-level " + " (layers), never inside parentheses or quotes */
+function splitLayers(s) {
+  const out = []; let depth = 0, q = null, cur = '';
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (q) { cur += c; if (c === q) 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/.test(s[i - 1] || '') && /\s/.test(s[i + 1] || '')) { out.push(cur.trim()); cur = ''; continue; }
+    cur += c;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+const INTERP_RE = /\s*\bin\s+(srgb-linear|srgb|display-p3|lab|oklab|xyz-d50|xyz-d65|xyz|hsl|hwb|lch|oklch)(\s+(?:longer|shorter|increasing|decreasing)\s+hue)?\s*$/i;
+
+/**
+ * gradient: one or several layers.
+ *   linear 135, a -> b                        the original sentence
+ *   repeating linear 45, red 0 10, blue 10 20 stripes: positions take %, px, em, rem (deg on conic)
+ *   linear 90 in oklch, #f00 -> #00f          pick the colour space the blend happens in
+ *   linear 90, a -> 30% -> b                  a lone position between two stops moves the midpoint
+ *   mesh #fff4e6, #ff7a1a at 15% 20%, #c2185b at 80% 30% size 60%    soft blobs of colour on a base
+ *   radial at top left, #fff/40 -> transparent + linear 135, #123 -> #456   layers, first on top
+ */
 function buildGradient(v, ctx) {
+  const layers = splitLayers(String(v).trim());
+  if (layers.length > 1) {
+    const out = [];
+    for (const l of layers) { const g = buildGradientLayer(l, ctx); if (g === null) return null; out.push(g); }
+    return out.join(', ');
+  }
+  return buildGradientLayer(String(v).trim(), ctx);
+}
+
+function buildMesh(rest, ctx) {
+  const items = topSplit(rest, ',').map((x) => x.trim()).filter(Boolean);
+  const bad = (message, hint) => { ctx.errors.push({ file: ctx.file, line: ctx.line, message, hint }); return null; };
+  if (items.length < 2) return bad('mesh needs a base colour and at least one blob', 'try  gradient: mesh #fff4e6, #ff7a1a at 15% 20%, #3949ab at 80% 70%');
+  let base = null; const blobs = [];
+  for (const it of items) {
+    const m = it.match(/^(.*?)\s+at\s+(\S+)\s+(\S+)(?:\s+size\s+(\S+))?$/i);
+    if (!m) { if (base !== null) return bad(`mesh item "${it}" needs a position`, 'write  color at 20% 30%  (and optionally  size 60%)'); base = resolveValue(it, { ...ctx, unitless: false, bareIdents: false }); continue; }
+    const pos = (x) => (/^-?\d+(\.\d+)?$/.test(x) ? x + 'px' : x);
+    const size = m[4] ? pos(m[4]) : '60%';
+    blobs.push(`radial-gradient(circle farthest-side at ${pos(m[2])} ${pos(m[3])}, ${resolveValue(m[1].trim(), { ...ctx, unitless: false, bareIdents: false })}, transparent ${size})`);
+  }
+  if (base === null) return bad('mesh needs a base colour first (an item without "at")', 'gradient: mesh #fff4e6, #ff7a1a at 15% 20%');
+  return [...blobs, `linear-gradient(${base}, ${base})`].join(', ');
+}
+
+function buildGradientLayer(v, ctx) {
   const t = String(v).trim();
-  const m = t.match(/^(linear|radial|conic)\b([\s\S]*)$/i);
+  const mm = t.match(/^mesh\b([\s\S]*)$/i);
+  if (mm) return buildMesh(mm[1], ctx);
+  const m = t.match(/^(repeating\s+)?(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"`,
+      message: `gradient needs a kind: "linear", "radial", "conic" or "mesh" (any of them can be "repeating")`,
       hint: 'try  gradient: linear 135, color.accent -> color.ok',
     });
     return null;
   }
-  const kind = m[1].toLowerCase();
-  const rest = m[2].trim();
+  const repeating = !!m[1];
+  const kind = m[2].toLowerCase();
+  const rest = m[3].trim().replace(/^,\s*/, '');
   const DIR_RE = /^to\s+(top|bottom|left|right)(\s+(top|bottom|left|right))?$/i;
-  const isPrefixShaped = (seg) => {
-    const s = seg.toLowerCase();
+  const isPrefixShaped = (seg0) => {
+    const s = seg0.toLowerCase().replace(INTERP_RE, '').trim();
+    if (s === '' && INTERP_RE.test(seg0)) return true;
     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`)
@@ -456,6 +514,8 @@ function buildGradient(v, ctx) {
     // 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]; }
+    // no direction at all: `linear #f00 -> #00f`, the first part is a stop
+    if (head && !isPrefixShaped(head) && /^(#|[a-z-]+\(|[a-z]+\.[a-z0-9-]+)/i.test(head) || (head && COLOR_WORDS.has(head.split(/\s+/)[0].toLowerCase()) && !isPrefixShaped(head))) { stopStrs.unshift(head); head = ''; }
   } 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();
@@ -469,6 +529,9 @@ function buildGradient(v, ctx) {
     });
     return null;
   }
+  // the colour space of the blend, if one was written: `in oklch`, `in hsl longer hue`
+  let interp = '';
+  { const im = head.match(INTERP_RE); if (im) { interp = im[0].trim().toLowerCase(); head = head.slice(0, im.index).trim(); } }
   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') {
@@ -513,10 +576,21 @@ function buildGradient(v, ctx) {
     }
   }
   const stops = [];
-  for (const s of stopStrs) {
+  const posUnit = kind === 'conic' ? 'deg' : 'px';
+  const asPos = (x) => (/^-?\d+(\.\d+)?$/.test(x) ? x + (x === '0' ? '' : posUnit) : x);
+  const POS = String.raw`-?\d+(?:\.\d+)?(?:%|px|em|rem|deg|turn)?`;
+  for (let si = 0; si < stopStrs.length; si++) {
+    const s = stopStrs[si];
+    // a lone position between two colours is a midpoint hint
+    if (new RegExp('^' + POS + '$').test(s)) {
+      if (si === 0 || si === stopStrs.length - 1) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: `"${s}" is a midpoint, so it has to sit between two colours`, hint: 'try  gradient: linear 90, #f00 -> 30% -> #00f' }); return null; }
+      stops.push(asPos(s));
+      continue;
+    }
     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(); }
+    // trailing position, or two of them (a hard-edged band: red 0 30%)
+    const pm = s.match(new RegExp('\\s+(' + POS + ')(?:\\s+(' + POS + '))?$'));
+    if (pm) { pos = pm[2] ? asPos(pm[1]) + ' ' + asPos(pm[2]) : asPos(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;
@@ -532,8 +606,9 @@ function buildGradient(v, ctx) {
     }
     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(', ')})`;
+  const fn = (repeating ? 'repeating-' : '') + (kind === 'linear' ? 'linear-gradient' : kind === 'radial' ? 'radial-gradient' : 'conic-gradient');
+  const first = [lead, interp].filter(Boolean).join(' ');
+  return `${fn}(${[first, ...stops].filter(Boolean).join(', ')})`;
 }
 
 function parseFlexWords(value, ctx, dir) {
@@ -1204,6 +1279,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const errors = [];
   const rules = [];
   const shadowRules = [];
+  const fontLinks = []; // 0.12.0 - stylesheet links from fonts { }
   const raws = []; // v0.8.0 - raw { } / @css { } verbatim passthrough blocks
   const motions = {};
   const behaviors = {};
@@ -1497,6 +1573,18 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
           if (tr) rules.push(tr);
           break;
         }
+        case 'fonts': {
+          // 0.12.0 - a font is a stylesheet link or an @font-face, not a rule. Links ride on the document
+          // (the engine adds them to <head>, `dssl build` writes @import); faces are plain CSS and ride with raw.
+          if (ctx.sel) break;
+          const pf = parseFonts(node.css || '', node.line, {
+            error: (line, message, hint) => errors.push({ file, line, message, hint }),
+            suggest: (w, list) => { const h = didYouMean(w, list); return h ? `did you mean "${h}"?` : null; },
+          });
+          for (const l of pf.links) fontLinks.push({ ...l, file });
+          for (const css of pf.faces) raws.push({ css, file, line: node.line, order: order++ });
+          break;
+        }
         case 'raw': {
           // v0.8.0 - verbatim CSS escape hatch (@font-face, @keyframes,
           // @supports, @import, @property…). The parser captured the body
@@ -1702,7 +1790,7 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
   const mediaQueries = new Set();
   for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
 
-  return { rules, shadowRules, raws, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
+  return { rules, shadowRules, raws, fontLinks, motions, motionFrames, errors, warnings, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
 }
 
 /** naive `&` substitution + descendant join */

public/dssl/static.js

@@ -104,7 +104,11 @@ export function toCSS(doc, opts = {}) {
     ? `/* generated by dssl build from ${file} - the static subset of DSSL${opts.version ? ' v' + opts.version : ''}.\n   @signal rules and engine-native properties (animate, aura, tilt, ...) stay in the runtime.
    Textures are baked in as background images when their colours are known at build time. */\n`
     : '';
+  // 0.12.0: fonts { } as @import. An @import has to come before every rule except @layer statements, so it goes right after the banner.
   let out = header;
+  const fontUrls = [...new Set((doc.fontLinks || []).map((l) => l.url))];
+  for (const u of fontUrls) out += `@import url("${u}");\n`;
+  if (fontUrls.length) out += '\n';
 
   const allRules = [...(doc.registryRule ? [doc.registryRule] : []), ...(doc.rules || [])];
 

public/dssl/texture.js

@@ -56,6 +56,7 @@ export const TEXTURE_KEYS = {
   pores:     { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: fine fibre and pore streaks between the rings' },
   knots:     { words: 1, kind: 'number', min: 0, max: 8, int: true, doc: 'rings generator: how many knots in one tile (the pattern repeats, so keep it small)' },
   planks:    { words: 1, kind: 'number', min: 24, max: 1200, doc: 'rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each' },
+  symmetrical: { words: 1, kind: 'word', values: ['both', 'x', 'y'], optional: true, doc: 'mirror every other tile, so each edge meets its own reflection: no seam, and the repeat is twice as far apart. x mirrors left to right, y top to bottom, both (the default) does both. Works on the image-based textures (noise, bump, rings, waves, hex).' },
   invert:    { words: 0, kind: 'flag', doc: 'swap the two colours' },
 };
 
@@ -253,6 +254,8 @@ export function parseTexture(value, hooks) {
         return null;
       }
       if (def.kind === 'flag') { over[key] = true; continue; }
+      // a setting whose value is optional (symmetrical alone means both)
+      if (def.optional && (words[i + 1] === undefined || TEXTURE_KEYS[words[i + 1]] || !def.values.includes(words[i + 1]))) { over[key] = def.values[0]; continue; }
       const vals = words.slice(i + 1, i + 1 + def.words);
       if (vals.length < def.words || vals.some((v) => TEXTURE_KEYS[v])) {
         hooks.error(`texture setting "${key}" needs ${def.words === 1 ? 'a value' : def.words + ' values'}`, def.doc);
@@ -612,12 +615,35 @@ const BUILDERS = { rings: buildRings, noise: buildNoise, bump: buildBump, lines:
  * -position and -blend-mode, top layer first.
  *   rc(cssColorWord) -> {r,g,b,a} | null
  */
+/**
+ * symmetrical: lay the tile out twice over, the second copy flipped, so every edge meets its own mirror image.
+ * That is seamless for any image at all, and the pattern now repeats at double the distance. Only the
+ * SVG-image textures can be flipped this way; the pure CSS ones (lines, dots, grid, checker, carbon) are
+ * already regular and are left alone.
+ */
+function mirrorPiece(piece, mode) {
+  const m = /^url\("(data:image\/svg\+xml,[^"]*)"\)$/.exec(piece.image);
+  const sz = /^([\d.]+)px ([\d.]+)px$/.exec(piece.size || '');
+  if (!m || !sz) return piece;
+  const w = Number(sz[1]), h = Number(sz[2]);
+  const fx = mode === 'x' || mode === 'both', fy = mode === 'y' || mode === 'both';
+  const W = fx ? w * 2 : w, H = fy ? h * 2 : h;
+  const use = (tx, ty, sx, sy) => `<use href='#t' transform='translate(${tx} ${ty}) scale(${sx} ${sy})'/>`;
+  let body = use(0, 0, 1, 1);
+  if (fx) body += use(2 * w, 0, -1, 1);
+  if (fy) body += use(0, 2 * h, 1, -1);
+  if (fx && fy) body += use(2 * w, 2 * h, -1, -1);
+  const inner = m[1].replace(/'/g, '%27');
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='${W}' height='${H}'><defs><image id='t' width='${w}' height='${h}' href='${inner}'/></defs>${body}</svg>`;
+  return { ...piece, image: smallUrl(svg), size: `${W}px ${H}px`, tile: Math.max(piece.tile || 0, W, H) };
+}
+
 export function buildTexture(layers, rc) {
   const parts = [];
   for (const spec of layers) {
     const builder = BUILDERS[spec.gen];
     if (!builder) continue;
-    for (const piece of builder(spec, rc)) parts.push({ ...piece, animate: spec.animate || 0 });
+    for (const piece of builder(spec, rc)) parts.push({ ...(spec.symmetrical ? mirrorPiece(piece, spec.symmetrical) : piece), animate: spec.animate || 0 });
   }
   return {
     image: parts.map((p) => p.image).join(', '),

public/llms.txt

@@ -63,6 +63,12 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 - Alpha on a named colour works: `white/12`, `currentColor/20`. It used to compile to `white/12px`.
 - The playground has a canvas.html tab, `?example=` links, lint warnings and an "as CSS" tab. The canvas keeps a short allow-list of tags and drops scripts, handlers, styles and ids.
 
+## 0.12.0: fonts, gradients, symmetrical, dev tools
+- `texture: oak symmetrical [x|y|both]` mirrors every other tile: no seam, the repeat is twice as far apart. Works on image textures (noise, bump, rings, waves, hex); pure-CSS patterns are left alone.
+- `fonts { Fraunces: 500 700 800  "Hanken Grotesk": 400 700 italic  Inter: 100..900 display optional  Brand: from "/f.woff2" 400 }`. Google families become a <link> at run time and an @import in `dssl build`; `from` becomes @font-face.
+- gradient: `repeating linear 45, #fff 0 10, #000 10 20`; `linear 90 in oklch, a -> b`; `a -> 30% -> b` midpoint; `a 0 30%, b 30% 100%` hard bands; `mesh base, color at x y [size n], ...`; layers joined with ` + `; the direction is optional.
+- `DSSL.inspect()` (which rule produced each style, in the page), `DSSL.watch()` (hot reload of loaded .dssl and linked .css, no page reload), `node cli/dssl.mjs dev [dir]`. `data-watch`/`data-inspect` on the script tag, or ?dssl-watch / ?dssl-inspect.
+
 ## 0.11.0: wood and the build
 - Ten wood species presets: oak, walnut, cherry, maple, pine, mahogany, ebony, birch, oak-planks, walnut-planks. The `rings` generator draws growth rings as vector curves (not stretched noise): `texture: oak figure 0.8 knots 2 planks 120`. Settings: scale (ring spacing), color (latewood), color2 (earlywood), contrast, figure (cathedral arching), warp, pores, knots, planks (board height px), seed, angle 0 or 90. Same seed, same board everywhere; the tile repeats without a seam.
 - `dssl build` now BAKES textures into the CSS as background images when every colour is known at build time. Animated textures and unknown colours stay in the runtime, and the report says why.
@@ -84,4 +90,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. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.11.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. 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. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.12.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

public/showcase/wood/index.html

@@ -5,10 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Heartwood: a field guide to wood</title>
 <meta name="description" content="How wood is built: growth rings, figure, knots, ten species, and how much a board moves when the air dries out. Every texture on the page is generated by DSSL.">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,800&family=Hanken+Grotesk:wght@400;500;700&display=swap">
-<!-- absolute paths, so the page works at /showcase/wood and /showcase/wood/index.html alike. wood.css is real CSS built from static.dssl (textures baked in), so the page is styled before any script runs -->
+<!-- absolute paths, so the page works at /showcase/wood and /showcase/wood/index.html alike. wood.css is real CSS built from static.dssl (textures baked in, fonts as an @import from its fonts block), so the page is styled before any script runs -->
 <link rel="stylesheet" href="/showcase/wood/wood.css">
 </head>
 <body>

public/showcase/wood/static.dssl

@@ -5,6 +5,12 @@
 // The tilt, aura and slider fills live in live.dssl, because they need the engine.
 // =========================================================================
 
+// fonts are their own block: the build writes the @import, the engine adds the <link>
+fonts {
+  Fraunces: 500 700 800
+  "Hanken Grotesk": 400 500 700
+}
+
 * { box-sizing: border-box }
 *::before { box-sizing: border-box }
 *::after { box-sizing: border-box }
@@ -76,7 +82,7 @@ img, svg { max-width: 100% }
   align-items: center
   padding: 120 0 80
   background-color: color.walnut
-  texture: oak-planks scale 14 planks 150
+  texture: oak-planks scale 14 planks 150 symmetrical
   color: color.cream
   overflow: hidden
 }
@@ -85,7 +91,7 @@ img, svg { max-width: 100% }
   content: ""
   position: absolute
   inset: 0
-  background: radial-gradient(ellipse at 30% 40%, transparent 30%, color.char/55 100%)
+  gradient: radial ellipse at 30% 40%, transparent 30%, color.char/55 100%
   pointer-events: none
 }
 
@@ -195,7 +201,7 @@ img, svg { max-width: 100% }
   inset: 0
   radius: lg
   pointer-events: none
-  background: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), color.cream/20, transparent 55%)
+  gradient: radial circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), color.cream/20, transparent 55%
 }
 
 .note { position: relative; z: 1 }
@@ -379,7 +385,7 @@ img, svg { max-width: 100% }
   padding: 28
   radius: lg
   background-color: color.oak
-  texture: oak-planks scale 12 planks 60 intensity 1
+  texture: oak-planks scale 12 planks 60 symmetrical
   color: color.char
   position: relative
   overflow: hidden
@@ -424,7 +430,8 @@ img, svg { max-width: 100% }
   min-height: 250
   radius: lg
   background-color: #2b2723
-  texture: stone scale 26 intensity 0.55
+  gradient: mesh #1a1512, #ff7a1a at 50% 92% size 60%, #b9380f at 18% 100% size 40%, #b9380f at 82% 100% size 40%
+  texture: stone scale 26 intensity 0.5 blend multiply
   display: grid
   place-items: center
 }

public/styles/docs.dssl

@@ -906,3 +906,10 @@ behavior snow {
 }
 
 .fx-pane b { font-size: 17 }
+
+// ---- 0.12.0: more gradient forms
+.gd-stripes { gradient: repeating linear 45, #fff 0 10, color.ink 10 20 }
+.gd-srgb { gradient: linear 90, #ff0055 -> #00d4ff }
+.gd-oklch { gradient: linear 90 in oklch, #ff0055 -> #00d4ff }
+.gd-band { gradient: linear 90, #ff7a1a 0 30%, #3949ab 30% 100% }
+.gd-mesh { gradient: mesh #14102a, #ff7a1a at 15% 20%, #c2185b at 80% 30% size 45%, #3949ab at 50% 95% }

scripts/test-all.mjs

@@ -16,7 +16,7 @@ const SUITES = [
   ['color, texture, aura, slider, lint, import, share 0.9.0', 'test-v090.mjs'], ['editor extension', 'test-extension-lib.mjs'],
   ['site stylesheets compile', 'dssl-styles-check.mjs'], ['guide examples compile', 'test-guide-examples.mjs'],
   ['designer: state to DSSL and back', 'test-designer.mjs'], ['designer: editor wiring (fake vscode)', 'test-designer-host.mjs'],
-  ['guide examples in a browser', 'test-guide-browser.mjs', true], ['0.9.0 in a browser', 'test-browser-v090.mjs', true], ['designer panel in a browser', 'test-designer-browser.mjs', true], ['glass, tilt, wood, baked textures, counters 0.10-0.11', 'test-v0100.mjs', true],
+  ['guide examples in a browser', 'test-guide-browser.mjs', true], ['0.9.0 in a browser', 'test-browser-v090.mjs', true], ['designer panel in a browser', 'test-designer-browser.mjs', true], ['glass, tilt, wood, baked textures, counters 0.10-0.11', 'test-v0100.mjs', true], ['symmetrical, fonts, gradients, inspector, hot reload 0.12', 'test-v0120.mjs', true],
 ];
 
 if (!skipBrowser && !findChrome()) {

scripts/test-v0120.mjs

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+/* test-v0120.mjs: what 0.12.0 added.
+ *   texture: symmetrical     mirrored tiling, so the repeat hides and every edge continues
+ *   fonts { }                Google fonts and your own files, no raw CSS
+ *   gradient:                repeating, colour spaces, midpoints, hard bands, mesh, layers
+ *   DSSL.inspect()           which rule produced which style, in the page
+ *   DSSL.watch(), dssl dev   edit a .dssl file and the open page restyles in place
+ */
+import { spawn } from 'node:child_process';
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { compile, toCSS, VERSION } from '../public/dssl/index.js';
+import { parseTexture, buildTexture } from '../public/dssl/texture.js';
+import { withBrowser } from './lib/browser-harness.mjs';
+import { decodePng, px, dist } from './lib/pixels.mjs';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra !== undefined ? '; ' + extra : ''}`); }
+};
+const section = (t) => console.log(`\n== ${t}`);
+const errs = (src) => compile(src, 't.dssl').errors;
+const hooks = (list) => ({ error: (m) => list && list.push(m), color: (w) => w, suggest: () => null });
+const rcHex = (c) => { const m = /^#([0-9a-f]{6})$/i.exec(String(c)); return m ? { r: parseInt(m[1].slice(0, 2), 16), g: parseInt(m[1].slice(2, 4), 16), b: parseInt(m[1].slice(4, 6), 16), a: 1 } : null; };
+const make = (t, list) => { const L = parseTexture(t, hooks(list)); return L && buildTexture(L, rcHex); };
+
+section('symmetrical: parsing');
+{
+  const bare = parseTexture('oak symmetrical', hooks())[0], x = parseTexture('oak symmetrical x', hooks())[0], y = parseTexture('oak symmetrical y', hooks())[0], b = parseTexture('oak symmetrical both', hooks())[0];
+  ok('bare symmetrical means both ways', bare.symmetrical === 'both' && b.symmetrical === 'both');
+  ok('x and y are read', x.symmetrical === 'x' && y.symmetrical === 'y');
+  ok('it can sit in the middle of the other settings', parseTexture('oak symmetrical scale 8', hooks())[0].scale === 8 && parseTexture('oak symmetrical scale 8', hooks())[0].symmetrical === 'both');
+  const e = []; parseTexture('oak symmetrical z', hooks(e));
+  ok('a typo after it is still an error, not a silent "both"', e.length === 1 && /unknown texture setting "z"/.test(e[0]), e.join());
+}
+
+section('symmetrical: the tile');
+{
+  const plain = make('oak'), both = make('oak symmetrical'), xo = make('oak symmetrical x'), yo = make('oak symmetrical y');
+  ok('both ways doubles the tile in both directions', plain.size === '576px 264px' && both.size === '1152px 528px', both.size);
+  ok('x only doubles the width, y only the height', xo.size === '1152px 264px' && yo.size === '576px 528px', `${xo.size} / ${yo.size}`);
+  const svg = (t) => decodeURIComponent(t.image.slice(t.image.indexOf(',') + 1, -2));
+  ok('the mirrored copies are drawn by flipping one copy, not by repeating the data four times', (svg(both).match(/<use /g) || []).length === 4 && (svg(both).match(/<image /g) || []).length === 1);
+  ok('same seed, same bytes', make('oak symmetrical seed 4').image === make('oak symmetrical seed 4').image);
+  ok('textures that are plain CSS patterns are left alone', make('lines symmetrical').image === make('lines').image);
+  ok('it works on noise, planks and several layers', make('noise symmetrical').count === 1 && make('oak-planks symmetrical').count === 1 && make('grain symmetrical, oak symmetrical').count === 2);
+  ok('stays small: one copy of the image, however many flips', make('oak symmetrical').image.length < make('oak').image.length * 1.15 + 1500, `${make('oak').image.length} -> ${make('oak symmetrical').image.length}`);
+}
+
+section('symmetrical: pixels');
+const tilePage = (image, w, h, size) => `<!doctype html><style>body{margin:0}div{width:${w}px;height:${h}px;background:${image} 0 0 / ${size} repeat}</style><div></div>`;
+await withBrowser(async ({ open, errors }) => {
+  const t = make('noise symmetrical scale 4 seed 3');
+  const p = await open('/m'); await p.waitForTimeout(500);
+  const png = decodePng(await p.screenshot({ clip: { x: 0, y: 0, width: 600, height: 300 } }));
+  const [W, H] = t.size.split(' ').map((v) => parseInt(v));
+  // noise is per-pixel random, so allow the mirror to land within a pixel either side of where it should
+  const near = (a, b) => dist(a, b) < 14;
+  const any = (p, xs, ys) => { for (const dx of [0, -1, 1]) for (const dy of [0, -1, 1]) if (near(p, px(png, xs + dx, ys + dy))) return true; return false; };
+  let mx = 0, my = 0, both = 0, n = 0;
+  for (let y = 5; y < Math.min(H - 5, 290); y += 17) for (let x = 5; x < Math.min(W - 5, 590); x += 13) {
+    n++;
+    if (any(px(png, x, y), W - 1 - x, y)) mx++;
+    if (any(px(png, x, y), x, H - 1 - y)) my++;
+    if (any(px(png, x, y), W - 1 - x, H - 1 - y)) both++;
+  }
+  ok('the left half is the right half flipped', mx / n > 0.95, `${mx}/${n}`);
+  ok('the top half is the bottom half flipped', my / n > 0.95, `${my}/${n}`);
+  ok('and the opposite corner is both', both / n > 0.95, `${both}/${n}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/m': tilePage(make('noise symmetrical scale 4 seed 3').image, 600, 300, make('noise symmetrical scale 4 seed 3').size) }, viewport: { width: 600, height: 300 } });
+await withBrowser(async ({ open }) => {
+  const t = make('oak symmetrical');
+  const p = await open('/o'); await p.waitForTimeout(600);
+  const png = decodePng(await p.screenshot({ clip: { x: 0, y: 0, width: 1400, height: 700 } }));
+  const colDiff = (a, b) => { let s = 0, c = 0; for (let y = 0; y < 520; y += 2) { const u = px(png, a, y), v = px(png, b, y); s += Math.abs(u[0] - v[0]) + Math.abs(u[1] - v[1]) + Math.abs(u[2] - v[2]); c++; } return s / c; };
+  const typical = [100, 300, 700, 900].map((x) => colDiff(x, x + 1)).reduce((a, b) => a + b) / 4;
+  ok('across the mirror line (x = 576, the old tile edge) the grain continues', colDiff(575, 576) <= typical * 2 + 3, `${colDiff(575, 576).toFixed(1)} vs ${typical.toFixed(1)}`);
+  ok('and across the period (x = 1152)', colDiff(1151, 1152) <= typical * 2 + 3, `${colDiff(1151, 1152).toFixed(1)} vs ${typical.toFixed(1)}`);
+}, { pages: { '/o': tilePage(make('oak symmetrical').image, 1400, 700, make('oak symmetrical').size) }, viewport: { width: 1400, height: 700 } });
+
+section('fonts');
+{
+  const r = toCSS('fonts {\n  Fraunces: 500 700 800\n  "Hanken Grotesk": 400 700 italic\n  Inter: 100..900 display optional\n  Brand: from "/fonts/brand.woff2" 400\n  Brand: from "/fonts/brand-bold.woff" 700 italic\n}\n.a { font-family: "Fraunces", serif }');
+  ok('compiles with no errors', r.errors.length === 0, JSON.stringify(r.errors));
+  ok('Google families become one @import, first in the CSS (after the banner)', /^\/\*[\s\S]*?\*\/\n@import url\("https:\/\/fonts\.googleapis\.com\/css2\?family=Fraunces:wght@500;700;800&family=Hanken\+Grotesk:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@100\.\.900&display=optional"\);\n/.test(r.css), r.css.slice(0, 500));
+  ok('the @import comes before the @layer statement and every rule', r.css.indexOf('@import') < r.css.indexOf('@layer'));
+  ok('your own files become @font-face, with the format guessed from the extension', /@font-face \{\s+font-family: "Brand";\s+src: url\("\/fonts\/brand\.woff2"\) format\("woff2"\);\s+font-weight: 400;\s+font-style: normal;/.test(r.css) && /format\("woff"\);\s+font-weight: 700;\s+font-style: italic/.test(r.css));
+  ok('the report counts the faces as raw CSS', r.report.raws === 2, String(r.report.raws));
+  ok('a variable range is kept as a range', /Inter:wght@100\.\.900/.test(r.css));
+  ok('with no weights the family is requested whole, or with its italic', /family=Lora&display=swap/.test(toCSS('fonts { Lora: display swap }').css) && /family=Lora:ital@0;1&display=swap/.test(toCSS('fonts { Lora: italic }').css));
+  ok('display defaults to swap', /&display=swap"/.test(toCSS('fonts { Lora: 400 }').css));
+  const bad = (src) => errs(src).map((e) => e.message).join(' | ');
+  ok('an unknown word is an error with a hint', /unknown font setting "bold"/.test(bad('fonts {\n Lora: 400 bold\n}')));
+  ok('a missing colon is an error', /expected "Family: weights"/.test(bad('fonts {\n Lora 400\n}')));
+  ok('one file with two weights is refused', /one font file holds one weight/.test(bad('fonts {\n X: from "a.woff2" 400 700\n}')));
+  ok('a bad display value is refused', /display needs one of/.test(bad('fonts {\n X: 400 display fast\n}')));
+  ok('a weight out of range is refused', /is not a font weight/.test(bad('fonts {\n X: 4000\n}')));
+  ok('inside a rule it is refused', /must be top-level/.test(bad('.a { fonts { X: 400 } }')));
+  ok('error lines point at the right line', errs('.a { color: red }\n\nfonts {\n  Lora 400\n}')[0].line === 4, String(errs('.a { color: red }\n\nfonts {\n  Lora 400\n}')[0].line));
+  ok('comments inside the block are ignored', errs('fonts {\n  // the display face\n  Lora: 400 // regular\n}').length === 0);
+}
+
+section('gradients');
+{
+  const g = (v) => { const r = compile(`.a { gradient: ${v} }`); const d = r.doc.rules[0] && r.doc.rules[0].decls.find((x) => x.prop === 'background-image'); return { v: d && d.value, e: r.errors.map((e) => e.message) }; };
+  ok('the original sentence still works', g('linear 135, #ff0055 -> #00d4ff').v === 'linear-gradient(135deg, #ff0055, #00d4ff)');
+  ok('repeating stripes with plain numbers as px', g('repeating linear 45, #fff 0 10, #000 10 20').v === 'repeating-linear-gradient(45deg, #fff 0 10px, #000 10px 20px)');
+  ok('repeating radial and conic', /^repeating-radial-gradient\(circle, #fff 0 8px/.test(g('repeating radial circle, #fff 0 8, #000 8 16').v) && /^repeating-conic-gradient\(/.test(g('repeating conic, #f00 0 30, #00f 30 60').v));
+  ok('conic positions are degrees', /#0f0 120deg/.test(g('conic from 45, #f00 0, #0f0 120, #00f 240').v));
+  ok('the colour space of the blend', g('linear 90 in oklch, #f00 -> #00f').v === 'linear-gradient(90deg in oklch, #f00, #00f)' && g('linear 90 in hsl longer hue, #f00, #00f').v === 'linear-gradient(90deg in hsl longer hue, #f00, #00f)');
+  ok('a colour space alone, with no angle', g('linear in oklab, #f00 -> #00f').v === 'linear-gradient(180deg in oklab, #f00, #00f)');
+  ok('a lone position is a midpoint', g('linear 90, #f00 -> 30% -> #00f').v === 'linear-gradient(90deg, #f00, 30%, #00f)');
+  ok('a midpoint at the edge is an error', g('linear 90, 30% -> #f00 -> #00f').e.length === 1);
+  ok('hard bands with two positions', g('linear 90, #f00 0 30%, #00f 30% 100%').v === 'linear-gradient(90deg, #f00 0 30%, #00f 30% 100%)');
+  ok('layers with +, first on top', /^radial-gradient\(at top left, color-mix\([^)]*\), transparent\), linear-gradient\(135deg, #123, #456\)$/.test(g('radial at top left, #fff/40 -> transparent + linear 135, #123 -> #456').v));
+  const mesh = g('mesh #fff4e6, #ff7a1a at 15% 20%, #c2185b at 80% 30% size 40%').v;
+  ok('mesh: soft blobs over a base colour', /^radial-gradient\(circle farthest-side at 15% 20%, #ff7a1a, transparent 60%\), radial-gradient\(circle farthest-side at 80% 30%, #c2185b, transparent 40%\), linear-gradient\(#fff4e6, #fff4e6\)$/.test(mesh), mesh);
+  ok('mesh needs a base and a blob, and a position per blob', g('mesh #fff').e.length === 1 && g('mesh #fff, #f00 at 10%').e.length === 1);
+  ok('a direction is optional: stops can follow the kind straight away', g('conic, #f00 -> #00f').v === 'conic-gradient(#f00, #00f)' && g('linear #f00 -> #00f').v === 'linear-gradient(180deg, #f00, #00f)' && g('radial #fff -> #000').v === 'radial-gradient(#fff, #000)');
+  ok('bad colours are still caught inside the new forms', g('repeating linear 45, banana 0 10, #000 10 20').e.length >= 1);
+  ok('gradient-text takes the layered form too', compile('.a { gradient-text: linear 90, #f00 -> #00f }').errors.length === 0);
+}
+
+section('inspector and hot reload (real browser)');
+const page = (extra = '') => `<!doctype html><meta charset=utf-8><body style="margin:0"><style type="text/dssl" data-dssl-name="inline.dssl">.box { position: absolute; left: 40px; top: 40px; width: 200px; height: 120px; background: #345; radius: 12 }\n.box { color: #fff }</style><div class="box">hello</div>${extra}<script type="module" src="/dssl/boot.js"></script>`;
+const ready = (p) => p.waitForFunction(`window.DSSL && DSSL.__debug.engines.get('global')`);
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/i'); await ready(p); await p.waitForTimeout(300);
+  ok('the dev tools are not loaded for a normal visitor', await p.evaluate(() => !document.getElementById('dssl-dev-host')));
+  await p.evaluate(() => DSSL.inspect()); await p.waitForTimeout(200);
+  ok('DSSL.inspect() opens the panel', await p.evaluate(() => !!document.getElementById('dssl-dev-host')));
+  await p.mouse.move(100, 80); await p.waitForTimeout(300);
+  const text = await p.evaluate(() => document.getElementById('dssl-dev-host').shadowRoot.querySelector('.body').innerText);
+  ok('hovering shows the element, the winning declarations and where they came from', /div\.box/.test(text) && /background: #345/.test(text) && /inline\.dssl:1/.test(text) && /color: #fff/.test(text), text.slice(0, 300));
+  ok('and the rules in cascade order', /\.box[\s\S]*\.box/.test(text.split('rules, in cascade order')[1] || ''));
+  const box = await p.evaluate(() => { const b = document.getElementById('dssl-dev-host').shadowRoot.querySelector('.box'); return { w: parseFloat(b.style.width), h: parseFloat(b.style.height) }; });
+  ok('the element under the pointer is outlined', Math.abs(box.w - 200) < 2 && Math.abs(box.h - 120) < 2, JSON.stringify(box));
+  await p.mouse.click(100, 80); await p.mouse.move(600, 500); await p.waitForTimeout(200);
+  ok('clicking pins it, so moving away keeps its rules on screen', await p.evaluate(() => /div\.box/.test(document.getElementById('dssl-dev-host').shadowRoot.querySelector('.body').innerText)));
+  await p.keyboard.press('Escape'); await p.waitForTimeout(100);
+  ok('Escape releases the pin, then closes', await p.evaluate(() => !!document.getElementById('dssl-dev-host'))); // first Esc only released
+  await p.keyboard.press('Escape'); await p.waitForTimeout(100);
+  ok('the second Escape closes it and leaves nothing behind', await p.evaluate(() => !document.getElementById('dssl-dev-host')));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/i': page() }, viewport: { width: 800, height: 600 } });
+
+{
+  const files = { '/s.dssl': '.w { background: #f00; width: 80px; height: 40px }' };
+  const pages = { '/w': `<!doctype html><meta charset=utf-8><body><div class="w">x</div><script type="module" src="/dssl/boot.js" data-watch></script><link rel="stylesheet/dssl" href="/s.dssl">`, '/s.dssl': files['/s.dssl'] };
+  await withBrowser(async ({ open, errors }) => {
+    const p = await open('/w'); await ready(p); await p.waitForTimeout(500);
+    await p.evaluate(() => { window.__marker = 'same page'; });
+    const bg = () => p.evaluate(() => getComputedStyle(document.querySelector('.w')).backgroundColor);
+    ok('data-watch turns hot reload on from the script tag', (await bg()) === 'rgb(255, 0, 0)');
+    pages['/s.dssl'] = '.w { background: #0a0; width: 80px; height: 40px }';
+    await p.waitForFunction(`getComputedStyle(document.querySelector('.w')).backgroundColor === 'rgb(0, 170, 0)'`, null, { timeout: 5000 });
+    ok('editing the file restyles the page', (await bg()) === 'rgb(0, 170, 0)');
+    ok('without reloading it (state survives)', (await p.evaluate(() => window.__marker)) === 'same page');
+    ok('and says so', /reloaded s\.dssl/.test(await p.evaluate(() => document.querySelector('div[role=status]') && document.querySelector('div[role=status]').textContent) || ''));
+    pages['/s.dssl'] = '.w { backgrond: #00f; width: 80px }';
+    await p.waitForFunction(`document.querySelector('div[role=status]') && /error/.test(document.querySelector('div[role=status]').textContent)`, null, { timeout: 5000 });
+    const toast = await p.evaluate(() => document.querySelector('div[role=status]').textContent);
+    ok('a mistake in the file shows the error and line, on the page', /1 error, line 1: unknown property "backgrond"/.test(toast), toast);
+    pages['/s.dssl'] = '.w { background: #00f; width: 80px; height: 40px }';
+    await p.waitForFunction(`getComputedStyle(document.querySelector('.w')).backgroundColor === 'rgb(0, 0, 255)'`, null, { timeout: 5000 });
+    ok('fixing it recovers', true);
+    await p.evaluate(() => DSSL.watch(false)); const before = await bg();
+    pages['/s.dssl'] = '.w { background: #fff; width: 80px; height: 40px }'; await p.waitForTimeout(1800);
+    ok('DSSL.watch(false) stops following', (await bg()) === before);
+    ok('no page errors', errors.length === 0, errors.join(' | '));
+  }, { pages, viewport: { width: 400, height: 300 } });
+}
+
+section('dssl dev');
+{
+  const dir = mkdtempSync(join(tmpdir(), 'dssl-dev-'));
+  writeFileSync(join(dir, 'index.html'), '<!doctype html><body><div class="x">hi</div><script type="module" src="/dssl/boot.js"></script><link rel="stylesheet/dssl" href="s.dssl"></body>');
+  writeFileSync(join(dir, 's.dssl'), '.x { color: red }');
+  const port = 4200 + Math.floor(Math.random() * 500);
+  const child = spawn(process.execPath, ['--no-warnings', new URL('../cli/dssl.mjs', import.meta.url).pathname, 'dev', dir, '--port', String(port)], { stdio: ['ignore', 'pipe', 'pipe'] });
+  let out = ''; child.stdout.on('data', (d) => { out += d; });
+  for (let i = 0; i < 40 && !/localhost/.test(out); i++) await new Promise((r) => setTimeout(r, 100));
+  try {
+    const res = await fetch(`http://localhost:${port}/`);
+    const html = await res.text();
+    ok('serves the page and adds DSSL.watch() to it', res.status === 200 && /DSSL\.watch\(\)/.test(html) && /<\/script><\/body>$/.test(html.trim()));
+    ok('never caches, so a reload always sees the latest file', res.headers.get('cache-control') === 'no-store');
+    ok('serves the engine from the install when the folder has none', (await fetch(`http://localhost:${port}/dssl/boot.js`)).status === 200);
+    ok('serves your .dssl files untouched', (await (await fetch(`http://localhost:${port}/s.dssl`)).text()) === '.x { color: red }');
+    ok('refuses to leave the folder', (await fetch(`http://localhost:${port}/..%2f..%2fetc%2fpasswd`)).status !== 200);
+    ok('404 for a missing file', (await fetch(`http://localhost:${port}/nope.css`)).status === 404);
+  } finally { child.kill(); }
+}
+
+section('versions');
+ok('the engine says 0.12.x or later', /^0\.(1[2-9]|[2-9]\d)\./.test(VERSION), VERSION);
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

scripts/test-v090.mjs

@@ -301,7 +301,7 @@ section('dssl build: what stays in the runtime');
 
 /* ------------------------------------------------------------------ */
 section('release');
-ok('the engine version is 0.9 or later', /^0\.(9|1[01])\./.test(VERSION), VERSION);
+ok('the engine version is 0.9 or later', /^0\.(9|1[0-2])\./.test(VERSION), VERSION);
 
 console.log(`\n${pass} passed, ${fail} failed`);
 process.exit(fail ? 1 : 0);

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,19 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.12.0",
+    date: "growth phase \u00b7 the rest of the list",
+    title: "Fonts, gradients, mirrored tiles, an inspector and hot reload.",
+    why: "the wood critic's list had four things we said we had not done, and one limit. Now it is the whole list, except a real browser DevTools panel, which needs an extension.",
+    kind: "add",
+    body:
+      "texture: symmetrical mirrors every other tile, so the edges always meet and the repeat is twice as far apart (on wood it reads as a book-matched board). It is drawn by flipping one copy, so the file barely grows. A fonts { } block replaces raw CSS: Google families with weights, ranges and italics become a link at run time and an @import in dssl build, and your own files become @font-face. gradient grew repeating forms, colour spaces (in oklch), midpoints, hard bands, mesh (soft blobs over a base) and layers joined with +. DSSL.inspect() shows which rule produced each style, in the page, with file and line. DSSL.watch() and the new dssl dev command restyle the open page when you save a .dssl file, with no reload, and show errors as a toast. The Heartwood page now uses the font block, mirrored planks, a gradient mesh for the hearth glow, and the layered gradient sentence.",
+    code: `fonts { Fraunces: 500 700 800 }
+.floor { texture: oak-planks symmetrical }
+.hearth { gradient: mesh #1a1512, #ff7a1a at 50% 92% size 60%, #b9380f at 20% 100% size 40% }
+// in the console while you work: DSSL.inspect(), DSSL.watch()`,
+  },
   {
     version: "v0.11.0",
     date: "growth phase \u00b7 the wood drop",

src/components/dssl/views/DocsView.tsx

@@ -27,6 +27,8 @@ const SIDE = [
   { head: null, id: "sliders", label: "Range sliders" },
   { head: null, id: "effects", label: "Glass and tilt" },
   { head: null, id: "designer", label: "Designer, import and lint" },
+  { head: null, id: "fonts", label: "Fonts" },
+  { head: null, id: "devtools", label: "Inspector and hot reload" },
   { head: null, id: "errors", label: "Errors" },
   { head: null, id: "api", label: "JS API" },
   { head: null, id: "performance", label: "Performance: freeze & explain" },
@@ -739,6 +741,30 @@ motion wobble {
                 automatically, a gradient at 100% has nowhere to slide.
               </p>
             </div>
+            <h3 className="doc-h3">More forms</h3>
+            <p className="doc-lead">
+              The sentence grew up in 0.12.0. Any kind can be <code>repeating</code>, the blend can happen in another colour
+              space, a lone position between two stops moves the midpoint, two positions make a hard band, <code>mesh</code>{" "}
+              lays soft blobs of colour over a base, and layers are joined with <code>+</code>, first on top.
+            </p>
+            <CodeBlock file="gradient-forms.dssl" code={`.stripes { gradient: repeating linear 45, #fff 0 10, color.ink 10 20 }   // bare numbers are px (deg on conic)
+.blend   { gradient: linear 90 in oklch, #ff0055 -> #00d4ff }           // no muddy middle
+.mid     { gradient: linear 90, #f00 -> 30% -> #00f }                  // the midpoint sits at 30%
+.band    { gradient: linear 90, #f00 0 30%, #00f 30% 100% }            // a hard edge
+.aurora  { gradient: mesh #14102a, #ff7a1a at 15% 20%, #c2185b at 80% 30% size 45%, #3949ab at 50% 95% }
+.sheen   { gradient: radial at top left, #fff/40 -> transparent + linear 135, #123 -> #456 }`} />
+            <div className="demo-box wide">
+              <div className="gd-sw-row">
+                <div className="gd-sw gd-stripes" />
+                <div className="gd-sw gd-srgb" />
+                <div className="gd-sw gd-oklch" />
+                <div className="gd-sw gd-band" />
+                <div className="gd-sw gd-mesh" />
+              </div>
+              <p className="doc-lead fine-print">
+                Left to right: repeating stripes, the same red to cyan blended in sRGB and in oklch, a hard band, and a mesh.
+              </p>
+            </div>
           </section>
 
           <section className="doc-block" id="texture">
@@ -771,7 +797,7 @@ behavior old-leather {
             </div>
             <p className="doc-lead fine-print">
               Every swatch above is a plain box with one rule, like <code>.tx-marble {"{"} texture: marble {"}"}</code>,
-              over the same tan colour. Hover a swatch for what it is meant to look like. The last ten are wood: drawn as
+              over the same tan colour. Hover a swatch for what it is meant to look like. Add <code>symmetrical</code> to any image texture and every other tile is mirrored, so the edges always meet and the repeat is twice as far apart. The last ten are wood: drawn as
               growth rings, not stretched noise, so they take <code>figure</code>, <code>warp</code>, <code>pores</code>,{" "}
               <code>knots</code> and <code>planks</code>. <a href="/showcase/wood/">See a whole page built from them</a>, with
               the textures baked into real CSS by <code>dssl build</code>.
@@ -958,6 +984,64 @@ input.mood {                       // particles leave the thumb, wherever the va
             </p>
           </section>
 
+          <section className="doc-block" id="fonts">
+            <h2 className="section-title">Fonts</h2>
+            <p className="doc-lead">
+              Loading a font used to mean a <code>raw {"{"} {"}"}</code> block of plain CSS. Now it is its own block, one
+              line per family.
+            </p>
+            <CodeBlock file="fonts.dssl" code={`fonts {
+  Fraunces: 500 700 800                 // from Google Fonts, these weights
+  "Hanken Grotesk": 400 700 italic      // and the italics
+  Inter: 100..900 display optional      // a variable range, and how it swaps in
+  Brand: from "/fonts/brand.woff2" 400  // your own file: becomes @font-face
+  Brand: from "/fonts/brand-bold.woff2" 700
+}
+
+tokens { font { display: "Fraunces", Georgia, serif } }`} />
+            <p className="doc-lead">
+              At run time the engine adds the <code>&lt;link&gt;</code> to the page head (with preconnects), and removes it again if
+              no stylesheet asks for it any more. <code>dssl build</code> writes an <code>@import</code> as the first line of the
+              CSS. Your own files become <code>@font-face</code> with the format guessed from the extension. One file holds one
+              weight, or one variable range, so use a line per file.
+            </p>
+            <p className="tbl-note">
+              Google&apos;s servers see everyone who loads one of their fonts, which some privacy laws treat as sharing a
+              visitor&apos;s address. If that matters to you, download the files and use <code>from</code>.
+            </p>
+          </section>
+
+          <section className="doc-block" id="devtools">
+            <h2 className="section-title">Inspector and hot reload</h2>
+            <p className="doc-lead">
+              Two tools for the person writing the styles. Neither is loaded for visitors: they are imported the first
+              time you ask.
+            </p>
+            <CodeBlock file="console" code={`DSSL.inspect()      // hover any element: which rule won each property, and in which file and line
+DSSL.watch()        // edit a .dssl file and the open page restyles, with no reload
+
+// or switch them on from the page, for a dev build only
+<script type="module" src="/dssl/boot.js" data-watch data-inspect></script>
+// or from the address bar: ?dssl-watch  ?dssl-inspect`} />
+            <p className="doc-lead">
+              <b>The inspector</b> outlines the element under the pointer and lists what applied (each declaration with its
+              file, line and selector), then every matching rule in cascade order, with its layer and any state. Click to pin an
+              element so you can read the panel; <code>Esc</code> releases it, and a second <code>Esc</code> closes the panel.
+              It is the same answer as <code>DSSL.explain()</code>, without opening the console.
+            </p>
+            <p className="doc-lead">
+              <b>Hot reload</b> polls the .dssl files you loaded (and any built .css the page links) and applies a file again the
+              moment its text changes. The page does not reload, so scroll position, open menus and form input survive. A mistake
+              shows as a toast with the line and message, and fixing it recovers. <code>DSSL.watch(false)</code> stops it.
+            </p>
+            <CodeBlock file="terminal" code={`node cli/dssl.mjs dev .                 # serve this folder, never cached, with hot reload added to every page
+node cli/dssl.mjs dev site --port 4000 --inspect`} />
+            <p className="tbl-note">
+              Hot reload needs a server that lets the browser re-fetch files. <code>dssl dev</code> is one; most dev servers are too.
+              It does not follow inline <code>&lt;style type=&quot;text/dssl&quot;&gt;</code> blocks, because there is no file to watch.
+            </p>
+          </section>
+
           <section className="doc-block" id="designer">
             <h2 className="section-title">Designer, import and lint</h2>
             <p className="doc-lead">

src/lib/vocab.json

@@ -295,6 +295,11 @@
       "doc": "rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each",
       "words": 1
     },
+    {
+      "key": "symmetrical",
+      "doc": "mirror every other tile, so each edge meets its own reflection: no seam, and the repeat is twice as far apart. x mirrors left to right, y top to bottom, both (the default) does both. Works on the image-based textures (noise, bump, rings, waves, hex).",
+      "words": 1
+    },
     {
       "key": "invert",
       "doc": "swap the two colours",