v0.10.0: glass, tilt, named-colour alpha fix; playground with HTML tab, examples, warnings and CSS view; live effects on the home page

GUIDE.md

@@ -537,6 +537,36 @@ as 0 to 1) up to date on the input. Typing, dragging and arrow keys all update i
 The WebKit and Blink rules are tested in Chrome. The Firefox rules are written alongside them but
 have not been run in Firefox yet.
 
+### Glass and tilt
+
+`glass:` frosts whatever is behind an element. `tilt:` turns an element toward the pointer in 3D.
+Both work on any element.
+
+```dssl
+.pane {
+  glass: 18 saturate 1.6            // blur what is behind it
+  tilt: 10 lift 1.04 glare          // follow the pointer
+  border: 1 solid white/35
+  background-image: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), white/28, transparent 55%)
+}
+```
+
+`glass` writes a `backdrop-filter` and a faint wash of the text colour (so it works on light and dark
+pages). It is plain CSS, so `dssl build` keeps it. Settings: a blur number, `saturate <n>`,
+`bright <n>`, `tint <color>` or `tint none`, and a bare colour also counts as the tint. Write your own
+`background` after it to replace the wash. `glass: none` clears it.
+
+`tilt` is runtime only. The engine adds `perspective(...) rotateX() rotateY() scale()` after whatever
+`transform` you wrote, driven by custom properties, so moving the mouse never restyles anything.
+Settings: a number of degrees (0 to 45, default 8), `lift <n>` (scale while hovered),
+`perspective <px>` (default 900), `speed <0.02 to 1>` (default 0.18), `invert`, and `glare`, which also
+keeps `--dssl-gx` and `--dssl-gy` (0% to 100%) pointing at the pointer so you can draw a shine.
+It ignores touch, stays flat under reduced motion, stops while the page is frozen, and combines with
+`translate`, `scale` and `rotate`, but not with `bend` or `fold` (they also write the transform).
+
+Also new in 0.10.0: alpha on a named colour works. `white/12` used to compile to `white/12px`, which
+the browser dropped with no error. It now becomes a real colour, like tokens and hex always did.
+
 ### Warnings that help (lint)
 
 Some things compile, run, and are still wrong for the people using the page. DSSL warns about three.
@@ -592,7 +622,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.9.1.vsix` from the repo files, then
+2. VS Code: download `dssl-vscode/dssl-vscode-0.10.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`.
 
@@ -659,6 +689,7 @@ They look for one in the usual places; set `DSSL_CHROME` to point at another.
 ```sh
 node scripts/test-v090.mjs              # 0.9.0 pure logic: colour, texture, aura, slider, lint, import, share links
 node scripts/test-browser-v090.mjs      # 0.9.0 in Chrome: pixels, lifecycle, reduced motion, stress
+node scripts/test-v0100.mjs             # 0.10.0: glass, tilt, named-colour alpha, playground examples, HTML filter
 node scripts/test-designer.mjs          # the designer's state to DSSL and back, plus a random sweep
 node scripts/test-designer-browser.mjs  # the designer panel, driven like a person would
 node scripts/test-designer-host.mjs     # the extension's wiring, against a fake of the editor API

PARITY.md

@@ -62,6 +62,14 @@ 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.10.0: glass, tilt, and a silent colour bug
+
+| Need | DSSL | Status | Notes |
+|---|---|---|---|
+| Frosted glass | `glass: 18 saturate 1.6` | shipped | plain CSS, survives `dssl build`; CSS needs `backdrop-filter` plus a matching background |
+| Pointer-following 3D tilt | `tilt: 10 lift 1.04 glare` | shipped | engine only; flat under reduced motion, ignores touch; not combinable with bend or fold |
+| Alpha on a named colour | `white/12` | fixed | used to compile to `white/12px` and be dropped by the browser with no error |
+
 ## v0.9.0: texture, aura, sliders, and what testing them found
 
 New language: `texture`, the aura family, `slider`, lint warnings, `dssl import`, and an

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.9.1.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.10.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.
 
+## Glass and tilt
+
+```dssl
+.pane {
+  glass: 18 saturate 1.6
+  tilt: 10 lift 1.04 glare
+  border: 1 solid white/35
+}
+```
+
+`glass` blurs what is behind an element and is plain CSS, so `dssl build` keeps it. `tilt` turns
+toward the pointer and stays in the engine. Details are in the guide.
+
 ## Errors that talk back, and warnings
 
 CSS fails silently. DSSL refuses to compile and tells you where and what it expected, with a did-you-mean built from edit distance over every known property, token and motion. Custom properties (`--*`) pass through unvalidated on purpose; the loud checks protect the design vocabulary, not the pressure valve.

dssl-vscode/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.10.0
+
+- Bundled engine updated to 0.10.0: new `glass` and `tilt` properties, with completions and hover
+  docs for both, and alpha on named colours (`white/12`) now compiles to a real colour instead of
+  `white/12px`.
+
 ## 0.9.1
 
 - README: a note at the top explaining the publisher name (`ehs-studio` is the same person as

dssl-vscode/lib/analysis.js

@@ -7,6 +7,7 @@
 import { parse, PSEUDO_ELEMENTS } from './engine/parser.js';
 import { resolve, DEFAULT_TOKENS, CSS_KEYWORDS } from './engine/resolver.js';
 import { SEMANTIC, CSS, STATES, AT_RULES, BLOCKS, PROPERTY_NAMES } from './props-docs.js';
+import { GLASS_WORDS, TILT_WORDS } from './engine/effects.js';
 import { PRESETS, PRESET_NAMES, GENERATORS, TEXTURE_KEYS, BLEND_MODES } from './engine/texture.js';
 import { GLOW_KEYS, PARTICLE_KEYS, SHAPES, FROM_WORDS, DIR_WORDS } from './engine/aura.js';
 import { SLIDER_CLAUSES, THUMB_SHAPES } from './engine/slider.js';
@@ -21,6 +22,12 @@ function domainItems(prop) {
     for (const g of GENERATORS) add(g, 'texture generator', 'start from scratch with this generator, then add settings');
     for (const [k, d] of Object.entries(TEXTURE_KEYS)) add(k, 'texture setting', d.doc);
     for (const b of BLEND_MODES) add(b, 'blend mode', 'how the texture mixes with what is under it');
+  } else if (prop === 'glass') {
+    for (const [k, d] of Object.entries(GLASS_WORDS)) add(k, 'glass setting', d);
+    add('none', 'clears', 'glass: none removes the effect');
+  } else if (prop === 'tilt') {
+    for (const [k, d] of Object.entries(TILT_WORDS)) add(k, 'tilt setting', d);
+    add('none', 'clears', 'tilt: none removes the effect');
   } else if (prop === 'slider') {
     for (const [k, usage] of Object.entries(SLIDER_CLAUSES)) add(k, 'slider setting', usage);
     for (const t of THUMB_SHAPES) add(t, 'thumb shape', 'shape ' + t);

dssl-vscode/lib/engine/color.js

@@ -14,7 +14,7 @@
  * whether that is an error (a texture colour) or silence (a lint check).
  * ========================================================================= */
 
-const NAMED = {
+export const NAMED = {
   aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000',
   blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00',
   chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b',

dssl-vscode/lib/engine/effects.js

@@ -0,0 +1,99 @@
+/* =========================================================================
+ * DSSL: effects.js (0.10.0)
+ *
+ *   glass: 18                          frosted glass: blur what is behind it
+ *   glass: 24 saturate 1.8 tint white/12
+ *   tilt: 10                           follows the pointer in 3D
+ *   tilt: 12 lift 1.04 glare           also scales up, and exposes --dssl-gx/--dssl-gy
+ *
+ * glass is plain CSS (backdrop-filter plus a translucent background), so it
+ * survives `dssl build`. tilt needs the pointer, so it stays in the engine.
+ * ========================================================================= */
+
+import { splitWords } from './texture.js';
+
+const isNum = (w) => w !== undefined && w !== '' && !Number.isNaN(Number(w));
+
+export const GLASS_WORDS = {
+  blur: 'a number: how many px to blur what is behind the element (default 16)',
+  saturate: 'saturate <n>: colour boost for what shows through, 1 is unchanged (default 1.5)',
+  bright: 'bright <n>: brightness of what shows through, 1 is unchanged',
+  tint: 'tint <color> | tint none: the milky layer on top (default: a faint wash of the text colour)',
+};
+
+export const TILT_WORDS = {
+  max: 'a number: the largest tilt in degrees (default 8)',
+  lift: 'lift <n>: scale while the pointer is over it, e.g. 1.04',
+  perspective: 'perspective <px>: how strong the 3D depth looks (default 900)',
+  speed: 'speed <0.05 to 1>: how quickly it follows (default 0.18)',
+  invert: 'invert: tilt away from the pointer instead of toward it',
+  glare: 'glare: also keep --dssl-gx and --dssl-gy (0% to 100%) pointing at the pointer, for your own highlight',
+};
+
+/** `glass:` value -> declarations, or null after reporting an error */
+export function glassDecls(value, hooks) {
+  const w = splitWords(String(value || '').trim());
+  if (w[0] === 'none') return [{ prop: 'backdrop-filter', value: 'none' }];
+  let blur = 16, sat = 1.5, bright = null, tint;
+  const bad = (m, h) => { hooks.error(m, h); return null; };
+  for (let i = 0; i < w.length; i++) {
+    const x = w[i];
+    if (isNum(x)) { blur = Number(x); continue; }
+    if (x === 'saturate' || x === 'bright') {
+      if (!isNum(w[i + 1])) return bad(`${x} needs a number`, GLASS_WORDS[x]);
+      if (x === 'saturate') sat = Number(w[i + 1]); else bright = Number(w[i + 1]);
+      i++; continue;
+    }
+    if (x === 'tint') {
+      const c = w[i + 1];
+      if (!c) return bad('tint needs a color or "none"', GLASS_WORDS.tint);
+      if (c === 'none') tint = null;
+      else { const css = hooks.color(c); if (css === null) return null; tint = css; }
+      i++; continue;
+    }
+    // a bare colour word is a tint, anything else is a typo
+    if (hooks.looksLikeColor && hooks.looksLikeColor(x)) {
+      const css = hooks.color(x); if (css === null) return null; tint = css; continue;
+    }
+    return bad(`unknown glass setting "${x}"`, hooks.suggest(x, ['saturate', 'bright', 'tint', 'none']) || 'settings: a blur number, saturate, bright, tint');
+  }
+  if (blur < 0) return bad('glass blur cannot be negative', GLASS_WORDS.blur);
+  const fx = [`blur(${blur}px)`, `saturate(${sat})`];
+  if (bright !== null) fx.push(`brightness(${bright})`);
+  const out = [{ prop: 'backdrop-filter', value: fx.join(' ') }];
+  if (tint === undefined) tint = 'color-mix(in srgb, currentColor 8%, transparent)';
+  if (tint !== null) out.push({ prop: 'background-color', value: tint });
+  return out;
+}
+
+/** `tilt:` value -> a spec for the engine, `null` to clear it, or undefined after an error */
+export function parseTilt(value, hooks) {
+  const w = splitWords(String(value || '').trim());
+  if (!w.length) { hooks.error('tilt needs a number of degrees', 'e.g. tilt: 10'); return undefined; }
+  if (w[0] === 'none') return null;
+  const spec = { max: 8, lift: 1, perspective: 900, speed: 0.18, invert: false, glare: false };
+  const bad = (m, h) => { hooks.error(m, h); return undefined; };
+  const needNum = (name, i) => (isNum(w[i + 1]) ? Number(w[i + 1]) : null);
+  for (let i = 0; i < w.length; i++) {
+    const x = w[i];
+    if (isNum(x)) { spec.max = Number(x); continue; }
+    if (x === 'invert') { spec.invert = true; continue; }
+    if (x === 'glare') { spec.glare = true; continue; }
+    if (x === 'lift' || x === 'perspective' || x === 'speed') {
+      const n = needNum(x, i);
+      if (n === null) return bad(`${x} needs a number`, TILT_WORDS[x]);
+      spec[x] = n; i++; continue;
+    }
+    return bad(`unknown tilt setting "${x}"`, hooks.suggest(x, ['lift', 'perspective', 'speed', 'invert', 'glare', 'none']) || 'settings: a degrees number, lift, perspective, speed, invert, glare');
+  }
+  if (spec.max < 0 || spec.max > 45) return bad('tilt degrees should be between 0 and 45', TILT_WORDS.max);
+  if (spec.lift <= 0) return bad('lift must be above 0', TILT_WORDS.lift);
+  if (spec.perspective < 100) return bad('perspective must be at least 100px', TILT_WORDS.perspective);
+  if (spec.speed < 0.02 || spec.speed > 1) return bad('speed must be between 0.02 and 1', TILT_WORDS.speed);
+  return spec;
+}
+
+/** the transform pieces tilt adds after whatever the author wrote; they read variables the engine updates */
+export function tiltTransform(spec) {
+  return `perspective(${spec.perspective}px) rotateX(var(--dssl-tx, 0deg)) rotateY(var(--dssl-ty, 0deg)) scale(var(--dssl-ts, 1))`;
+}

dssl-vscode/lib/engine/resolver.js

@@ -24,6 +24,8 @@ import { parseTexture } from './texture.js';
 import { parseAura } from './aura.js';
 import { parseSlider, sliderCss } from './slider.js';
 import { lintRules } from './lint.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
 // typo like .card::befor is a LOUD error, never a silently dead rule.
 import { PSEUDO_ELEMENTS, VENDOR_PSEUDO, STATE_WORDS } from './parser.js';
@@ -289,6 +291,17 @@ function resolveValue(raw, ctx) {
 
       // known keyword?
       if (CSS_KEYWORDS.has(ident) || CSS_KEYWORDS.has(ident.toLowerCase())) {
+        // 0.10.0 - alpha on a named colour: white/12 used to become white/12px,
+        // which the browser drops without a word. Same treatment as tokens and hex.
+        const low = ident.toLowerCase();
+        if (NAMED_COLORS[low] || low === 'currentcolor') {
+          const am = raw.slice(i).match(/^\s*\/\s*([0-9.]+)\s*%?/);
+          if (am) {
+            out += `color-mix(in oklab, ${ident} ${am[1]}%, transparent)`;
+            i += am[0].length;
+            continue;
+          }
+        }
         out += ident;
         continue;
       }
@@ -1046,6 +1059,16 @@ for (const name of ['aura', 'aura-glow', 'aura-particle', 'aura-particles', 'glo
   SEMANTIC[name] = (v, ctx) => auraDecls(name, v, ctx);
 }
 
+SEMANTIC.glass = function glass(v, ctx) {
+  return glassDecls(v, { ...styleHooks(ctx), looksLikeColor: (w) => /^(#|rgb|hsl|oklch|oklab|color)|\//.test(w) || /^[a-z]+\.[a-z0-9-]+/.test(w) || /^(white|black|transparent)$/.test(w) }) || [];
+};
+
+SEMANTIC.tilt = function tilt(v, ctx) {
+  const spec = parseTilt(v, styleHooks(ctx));
+  if (spec === undefined) return [];
+  return [{ prop: '@tilt', value: spec }];
+};
+
 SEMANTIC.slider = function slider(v, ctx) {
   const spec = parseSlider(v, styleHooks(ctx));
   if (!spec) return [];

dssl-vscode/lib/props-docs.js

@@ -29,6 +29,8 @@ export const SEMANTIC = {
   'visually-hidden': 'hidden from eyes, visible to screen readers.',
   cover: 'fills the containing block absolutely.',
   use: 'apply a behavior: `use focus-ring`. Behaviors are named rule groups declared with `behavior name { }`.',
+  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.',
   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.',

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.9.1",
+  "version": "0.10.0",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

llms.txt

@@ -57,6 +57,12 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 - `dssl import styles.css -o styles.dssl` converts CSS to DSSL and reports what could not carry over; the output always compiles.
 - The editor extension has a designer panel (sliders, live previews, graphs, DSSL output, Insert and Load from selection), completions for the new vocabulary, and a CSS converter command.
 
+## 0.10.0: glass, tilt, named-colour alpha
+- `glass: 18 saturate 1.6 tint white/12` writes backdrop-filter plus a faint wash of the text colour. Plain CSS, kept by `dssl build`. Settings: blur number, `saturate <n>`, `bright <n>`, `tint <color>|none`. `glass: none` clears it.
+- `tilt: 10 lift 1.04 perspective 900 speed 0.18 invert glare` turns toward the pointer in 3D. Runtime only. `glare` keeps `--dssl-gx` and `--dssl-gy` pointing at the pointer. Ignores touch, flat under reduced motion, stops on freeze. Do not combine with `bend` or `fold`.
+- 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.
+
 ## CLI (v0.8.0)
 
 ```sh
@@ -70,4 +76,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.9.1.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.10.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.9.0",
+  "version": "0.10.0",
   "private": true,
   "description": "The DSSL style language and the website that is written in it.",
   "scripts": {

public/dssl/color.js

@@ -14,7 +14,7 @@
  * whether that is an error (a texture colour) or silence (a lint check).
  * ========================================================================= */
 
-const NAMED = {
+export const NAMED = {
   aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000',
   blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00',
   chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b',

public/dssl/effects.js

@@ -0,0 +1,99 @@
+/* =========================================================================
+ * DSSL: effects.js (0.10.0)
+ *
+ *   glass: 18                          frosted glass: blur what is behind it
+ *   glass: 24 saturate 1.8 tint white/12
+ *   tilt: 10                           follows the pointer in 3D
+ *   tilt: 12 lift 1.04 glare           also scales up, and exposes --dssl-gx/--dssl-gy
+ *
+ * glass is plain CSS (backdrop-filter plus a translucent background), so it
+ * survives `dssl build`. tilt needs the pointer, so it stays in the engine.
+ * ========================================================================= */
+
+import { splitWords } from './texture.js';
+
+const isNum = (w) => w !== undefined && w !== '' && !Number.isNaN(Number(w));
+
+export const GLASS_WORDS = {
+  blur: 'a number: how many px to blur what is behind the element (default 16)',
+  saturate: 'saturate <n>: colour boost for what shows through, 1 is unchanged (default 1.5)',
+  bright: 'bright <n>: brightness of what shows through, 1 is unchanged',
+  tint: 'tint <color> | tint none: the milky layer on top (default: a faint wash of the text colour)',
+};
+
+export const TILT_WORDS = {
+  max: 'a number: the largest tilt in degrees (default 8)',
+  lift: 'lift <n>: scale while the pointer is over it, e.g. 1.04',
+  perspective: 'perspective <px>: how strong the 3D depth looks (default 900)',
+  speed: 'speed <0.05 to 1>: how quickly it follows (default 0.18)',
+  invert: 'invert: tilt away from the pointer instead of toward it',
+  glare: 'glare: also keep --dssl-gx and --dssl-gy (0% to 100%) pointing at the pointer, for your own highlight',
+};
+
+/** `glass:` value -> declarations, or null after reporting an error */
+export function glassDecls(value, hooks) {
+  const w = splitWords(String(value || '').trim());
+  if (w[0] === 'none') return [{ prop: 'backdrop-filter', value: 'none' }];
+  let blur = 16, sat = 1.5, bright = null, tint;
+  const bad = (m, h) => { hooks.error(m, h); return null; };
+  for (let i = 0; i < w.length; i++) {
+    const x = w[i];
+    if (isNum(x)) { blur = Number(x); continue; }
+    if (x === 'saturate' || x === 'bright') {
+      if (!isNum(w[i + 1])) return bad(`${x} needs a number`, GLASS_WORDS[x]);
+      if (x === 'saturate') sat = Number(w[i + 1]); else bright = Number(w[i + 1]);
+      i++; continue;
+    }
+    if (x === 'tint') {
+      const c = w[i + 1];
+      if (!c) return bad('tint needs a color or "none"', GLASS_WORDS.tint);
+      if (c === 'none') tint = null;
+      else { const css = hooks.color(c); if (css === null) return null; tint = css; }
+      i++; continue;
+    }
+    // a bare colour word is a tint, anything else is a typo
+    if (hooks.looksLikeColor && hooks.looksLikeColor(x)) {
+      const css = hooks.color(x); if (css === null) return null; tint = css; continue;
+    }
+    return bad(`unknown glass setting "${x}"`, hooks.suggest(x, ['saturate', 'bright', 'tint', 'none']) || 'settings: a blur number, saturate, bright, tint');
+  }
+  if (blur < 0) return bad('glass blur cannot be negative', GLASS_WORDS.blur);
+  const fx = [`blur(${blur}px)`, `saturate(${sat})`];
+  if (bright !== null) fx.push(`brightness(${bright})`);
+  const out = [{ prop: 'backdrop-filter', value: fx.join(' ') }];
+  if (tint === undefined) tint = 'color-mix(in srgb, currentColor 8%, transparent)';
+  if (tint !== null) out.push({ prop: 'background-color', value: tint });
+  return out;
+}
+
+/** `tilt:` value -> a spec for the engine, `null` to clear it, or undefined after an error */
+export function parseTilt(value, hooks) {
+  const w = splitWords(String(value || '').trim());
+  if (!w.length) { hooks.error('tilt needs a number of degrees', 'e.g. tilt: 10'); return undefined; }
+  if (w[0] === 'none') return null;
+  const spec = { max: 8, lift: 1, perspective: 900, speed: 0.18, invert: false, glare: false };
+  const bad = (m, h) => { hooks.error(m, h); return undefined; };
+  const needNum = (name, i) => (isNum(w[i + 1]) ? Number(w[i + 1]) : null);
+  for (let i = 0; i < w.length; i++) {
+    const x = w[i];
+    if (isNum(x)) { spec.max = Number(x); continue; }
+    if (x === 'invert') { spec.invert = true; continue; }
+    if (x === 'glare') { spec.glare = true; continue; }
+    if (x === 'lift' || x === 'perspective' || x === 'speed') {
+      const n = needNum(x, i);
+      if (n === null) return bad(`${x} needs a number`, TILT_WORDS[x]);
+      spec[x] = n; i++; continue;
+    }
+    return bad(`unknown tilt setting "${x}"`, hooks.suggest(x, ['lift', 'perspective', 'speed', 'invert', 'glare', 'none']) || 'settings: a degrees number, lift, perspective, speed, invert, glare');
+  }
+  if (spec.max < 0 || spec.max > 45) return bad('tilt degrees should be between 0 and 45', TILT_WORDS.max);
+  if (spec.lift <= 0) return bad('lift must be above 0', TILT_WORDS.lift);
+  if (spec.perspective < 100) return bad('perspective must be at least 100px', TILT_WORDS.perspective);
+  if (spec.speed < 0.02 || spec.speed > 1) return bad('speed must be between 0.02 and 1', TILT_WORDS.speed);
+  return spec;
+}
+
+/** the transform pieces tilt adds after whatever the author wrote; they read variables the engine updates */
+export function tiltTransform(spec) {
+  return `perspective(${spec.perspective}px) rotateX(var(--dssl-tx, 0deg)) rotateY(var(--dssl-ty, 0deg)) scale(var(--dssl-ts, 1))`;
+}

public/dssl/engine.js

@@ -24,6 +24,7 @@ import { composeDeform, arcLayout } from './utils.js';
 import { buildTexture } from './texture.js';
 import { AuraManager, resolveLayer } from './aura.js';
 import { parseColor } from './color.js';
+import { tiltTransform } from './effects.js';
 
 const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
 
@@ -208,6 +209,7 @@ export class DsslEngine {
     this.sliderEls = new Map();            // range input -> its input listener
     this.texAnims = new WeakMap();         // element -> running texture-shimmer Animation
     this.texEls = new Set();               // elements that have one, so freeze() can stop them all
+    this.tiltEls = new Map();              // 0.10.0: element -> { spec, stop } for tilt:
   }
 
   /* ------------------------------------------------------------ *
@@ -317,6 +319,60 @@ export class DsslEngine {
     this.auraManager().set(el, g, p);
   }
 
+  /** 0.10.0: tilt follows the pointer by smoothing toward a target, writing four custom properties on the element */
+  applyTilt(el, spec) {
+    const cur = this.tiltEls.get(el);
+    if (!spec) { if (cur) { cur.stop(); this.tiltEls.delete(el); } return; }
+    const key = JSON.stringify(spec);
+    if (cur && cur.key === key) return;
+    if (cur) cur.stop();
+    let reduce = false;
+    try { reduce = matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { }
+    if (reduce) { this.tiltEls.set(el, { key, stop() { } }); return; }
+    const sign = spec.invert ? -1 : 1;
+    const cu = { x: 0, y: 0, s: 1, gx: 50, gy: 50 };
+    let target = { x: 0, y: 0, s: 1, gx: 50, gy: 50 };
+    let raf = 0;
+    const write = () => {
+      el.style.setProperty('--dssl-tx', cu.x.toFixed(2) + 'deg');
+      el.style.setProperty('--dssl-ty', cu.y.toFixed(2) + 'deg');
+      el.style.setProperty('--dssl-ts', cu.s.toFixed(4));
+      if (spec.glare) { el.style.setProperty('--dssl-gx', cu.gx.toFixed(1) + '%'); el.style.setProperty('--dssl-gy', cu.gy.toFixed(1) + '%'); }
+    };
+    const step = () => {
+      raf = 0;
+      let moving = false;
+      for (const k of ['x', 'y', 's', 'gx', 'gy']) {
+        const d = target[k] - cu[k];
+        const eps = k === 's' ? 0.0005 : 0.02;
+        if (Math.abs(d) > eps) { cu[k] += d * spec.speed; moving = true; } else cu[k] = target[k];
+      }
+      write();
+      if (moving) raf = requestAnimationFrame(step);
+    };
+    const kick = () => { if (!raf) raf = requestAnimationFrame(step); };
+    const move = (e) => {
+      if (e.pointerType === 'touch') return;
+      const r = el.getBoundingClientRect();
+      if (!r.width || !r.height) return;
+      const nx = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
+      const ny = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
+      target = { x: -ny * spec.max * sign, y: nx * spec.max * sign, s: spec.lift, gx: (nx + 1) * 50, gy: (ny + 1) * 50 };
+      kick();
+    };
+    const leave = () => { target = { x: 0, y: 0, s: 1, gx: 50, gy: 50 }; kick(); };
+    el.addEventListener('pointermove', move, { passive: true });
+    el.addEventListener('pointerleave', leave, { passive: true });
+    this.tiltEls.set(el, {
+      key,
+      stop: () => {
+        el.removeEventListener('pointermove', move); el.removeEventListener('pointerleave', leave);
+        if (raf) cancelAnimationFrame(raf);
+        for (const p of ['--dssl-tx', '--dssl-ty', '--dssl-ts', '--dssl-gx', '--dssl-gy']) el.style.removeProperty(p);
+      },
+    });
+  }
+
   /** range inputs: keep --dssl-p (the value as 0..1) current so the track fill and graph can follow it */
   applySlider(el, spec) {
     const known = this.sliderEls.has(el);
@@ -790,6 +846,7 @@ export class DsslEngine {
     let arcVal;                            // v0.6.0 - @bend-around degrees
     let gflowVal;                          // v0.6.0 - @gradient-flow spec
     let textureVal, auraGlowVal, auraPartsVal, sliderVal; // 0.9.0
+    let tiltVal = null;                    // 0.10.0
 
     // flatten matched decls in cascade order (last decl of a prop wins, exactly
     // like sequential setProperty calls did)
@@ -831,6 +888,7 @@ export class DsslEngine {
       if (d.prop === '@aura-glow') { auraGlowVal = d.value || null; continue; }
       if (d.prop === '@aura-particles') { auraPartsVal = d.value || null; continue; }
       if (d.prop === '@slider') { sliderVal = d.value || null; continue; }
+      if (d.prop === '@tilt') { tiltVal = d.value || null; continue; }
       newOwned.set(d.prop, { value: d.value, imp });
     }
     // anim keys need rule identity - rebuild them from matched order
@@ -886,6 +944,15 @@ export class DsslEngine {
       newOwned.set('transform', { value: c.transform, imp: userT ? userT.imp : '' });
     }
 
+    // 0.10.0 - tilt adds its rotation after everything else in the transform.
+    // The angles are variables the pointer handler updates, so moving the
+    // mouse never triggers a restyle.
+    if (tiltVal) {
+      const userT = newOwned.get('transform');
+      const base = userT && userT.value && userT.value !== 'none' ? String(userT.value) + ' ' : '';
+      newOwned.set('transform', { value: base + tiltTransform(tiltVal), imp: userT ? userT.imp : '' });
+    }
+
     // v0.6.0 - gradient-flow needs a gradient to flow and room to move. If
     // the element has no background-image at all, say so instead of looping
     // a position nobody can see.
@@ -1074,6 +1141,7 @@ export class DsslEngine {
     this.applyTextureShimmer(el, builtTex, builtTex ? Math.max(...textureVal.map((l) => l.animate || 0)) : 0, texUserLayers);
     this.applyAura(el, auraGlowVal, auraPartsVal);
     this.applySlider(el, sliderVal);
+    this.applyTilt(el, tiltVal);
 
     // v0.5.0 - overlap bookkeeping: remember (or forget) the element's policy.
     // The collision pass itself runs rAF-deferred after the drain; a policy
@@ -1399,6 +1467,8 @@ export class DsslEngine {
     if (this.aura) this.aura.pause();   // 0.9.0: a frozen page does not animate
     for (const el of this.texEls) { const a = this.texAnims.get(el); if (a) { try { a.cancel(); } catch { } } this.texAnims.delete(el); }
     this.texEls.clear();
+    for (const t of this.tiltEls.values()) t.stop();
+    this.tiltEls.clear();
     this.pending.clear();
     return this.freezeStats();
   }

public/dssl/index.js

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

public/dssl/resolver.js

@@ -24,6 +24,8 @@ import { parseTexture } from './texture.js';
 import { parseAura } from './aura.js';
 import { parseSlider, sliderCss } from './slider.js';
 import { lintRules } from './lint.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
 // typo like .card::befor is a LOUD error, never a silently dead rule.
 import { PSEUDO_ELEMENTS, VENDOR_PSEUDO, STATE_WORDS } from './parser.js';
@@ -289,6 +291,17 @@ function resolveValue(raw, ctx) {
 
       // known keyword?
       if (CSS_KEYWORDS.has(ident) || CSS_KEYWORDS.has(ident.toLowerCase())) {
+        // 0.10.0 - alpha on a named colour: white/12 used to become white/12px,
+        // which the browser drops without a word. Same treatment as tokens and hex.
+        const low = ident.toLowerCase();
+        if (NAMED_COLORS[low] || low === 'currentcolor') {
+          const am = raw.slice(i).match(/^\s*\/\s*([0-9.]+)\s*%?/);
+          if (am) {
+            out += `color-mix(in oklab, ${ident} ${am[1]}%, transparent)`;
+            i += am[0].length;
+            continue;
+          }
+        }
         out += ident;
         continue;
       }
@@ -1046,6 +1059,16 @@ for (const name of ['aura', 'aura-glow', 'aura-particle', 'aura-particles', 'glo
   SEMANTIC[name] = (v, ctx) => auraDecls(name, v, ctx);
 }
 
+SEMANTIC.glass = function glass(v, ctx) {
+  return glassDecls(v, { ...styleHooks(ctx), looksLikeColor: (w) => /^(#|rgb|hsl|oklch|oklab|color)|\//.test(w) || /^[a-z]+\.[a-z0-9-]+/.test(w) || /^(white|black|transparent)$/.test(w) }) || [];
+};
+
+SEMANTIC.tilt = function tilt(v, ctx) {
+  const spec = parseTilt(v, styleHooks(ctx));
+  if (spec === undefined) return [];
+  return [{ prop: '@tilt', value: spec }];
+};
+
 SEMANTIC.slider = function slider(v, ctx) {
   const spec = parseSlider(v, styleHooks(ctx));
   if (!spec) return [];

public/llms.txt

@@ -57,6 +57,12 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 - `dssl import styles.css -o styles.dssl` converts CSS to DSSL and reports what could not carry over; the output always compiles.
 - The editor extension has a designer panel (sliders, live previews, graphs, DSSL output, Insert and Load from selection), completions for the new vocabulary, and a CSS converter command.
 
+## 0.10.0: glass, tilt, named-colour alpha
+- `glass: 18 saturate 1.6 tint white/12` writes backdrop-filter plus a faint wash of the text colour. Plain CSS, kept by `dssl build`. Settings: blur number, `saturate <n>`, `bright <n>`, `tint <color>|none`. `glass: none` clears it.
+- `tilt: 10 lift 1.04 perspective 900 speed 0.18 invert glare` turns toward the pointer in 3D. Runtime only. `glare` keeps `--dssl-gx` and `--dssl-gy` pointing at the pointer. Ignores touch, flat under reduced motion, stops on freeze. Do not combine with `bend` or `fold`.
+- 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.
+
 ## CLI (v0.8.0)
 
 ```sh
@@ -70,4 +76,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.9.1.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.10.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

public/styles/docs.dssl

@@ -863,3 +863,36 @@ behavior snow {
 .doc-list li {
   line-height: 1.65
 }
+
+// ---- 0.10.0: glass and tilt demo
+.fx-scene {
+  position: relative
+  overflow: hidden
+  width: 100%
+  radius: lg
+  padding: 36 28
+  background: linear-gradient(135deg, #ff7a00, #c2185b 55%, #3949ab)
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr))
+  gap: 20
+}
+
+.fx-blob { position: absolute; radius: full }
+.fx-blob-a { width: 150; height: 150; left: 6%; top: -34; background: #ffe14a }
+.fx-blob-b { width: 120; height: 120; right: 12%; bottom: -26; background: #40e0d0 }
+
+.fx-pane {
+  position: relative
+  column: gap 6
+  min-height: 130
+  padding: 20
+  glass: 18 saturate 1.6
+  tilt: 10 lift 1.04 glare
+  border: 1 solid white/35
+  radius: lg
+  color: white
+  font-size: 13.5
+  background-image: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), white/28, transparent 55%)
+}
+
+.fx-pane b { font-size: 17 }

public/styles/home.dssl

@@ -407,3 +407,135 @@
 .install-downloads {
   row: gap 10 wrap
 }
+
+// ------------------------------------------------------------- live effects
+// Each demo is real DSSL: aura, glass, tilt, texture and slider, running here.
+
+.show-sub { max-width: 640; margin: 0 0 space.6 }
+
+.show-grid {
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
+  gap: space.4
+}
+
+.show-card {
+  column: gap 12
+  padding: space.4
+  background: color.card
+  border: 1 solid color.line
+  radius: lg
+}
+
+.show-demo {
+  position: relative
+  height: 190
+  radius: md
+  display: grid
+  place-items: center
+  overflow: visible
+}
+
+.show-code {
+  font-family: font.mono
+  font-size: 12.5
+  background: color.code-bg
+  color: color.code-ink
+  radius: sm
+  padding: 8 10
+  overflow-x: auto
+  white-space: nowrap
+}
+
+.show-text { margin: 0; font-size: 14.5; line-height: 1.6; color: color.muted }
+.show-text code { font-family: font.mono; font-size: 13; color: color.ink }
+
+.show-link {
+  font-weight: 700
+  font-size: 14
+  color: color.accent
+  align-self: start
+  text-underline-offset: 3
+  focus-visible { outline: 2 solid color.accent; outline-offset: 3 }
+}
+
+// fire: an aura recipe, written out in full so the page is its own example
+behavior show-flame {
+  aura-glow: #ff7a00 36 pulse 900 flicker 0.35
+  aura-particle: #ffe27a -> #ff8a1f -> rgba(255,40,0,0) count 70 size 8 18 life 650 1100 speed 40 120 dir up spread 40 from top gravity -40 turbulence 70 shape flame glowing behind
+}
+
+.show-demo-fire { background: #0b0a12 }
+
+.show-orb {
+  width: 120
+  height: 76
+  radius: lg
+  background: #1c1a28
+  color: #e9e4f5
+  display: grid
+  place-items: center
+  font-size: 14
+}
+
+.show-fire { use show-flame }
+
+// glass and tilt over a colourful backdrop
+.show-demo-glass {
+  background: linear-gradient(135deg, #ff7a00, #c2185b 55%, #3949ab)
+  overflow: hidden
+}
+
+.show-blob { position: absolute; radius: full }
+.show-blob-a { width: 110; height: 110; left: 14%; top: 8%; background: #ffe14a }
+.show-blob-b { width: 90; height: 90; right: 10%; bottom: 6%; background: #40e0d0 }
+
+.show-pane {
+  position: relative
+  column: gap 4
+  width: 66%
+  padding: 18 16
+  glass: 16 saturate 1.6
+  tilt: 12 lift 1.05 glare
+  border: 1 solid white/40
+  radius: lg
+  color: white
+  font-size: 13
+  background-image: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), white/30, transparent 60%)
+}
+
+.show-pane b { font-size: 17 }
+
+// textures
+.show-demo-tex {
+  grid-template-columns: 1fr 1fr
+  gap: 8
+  place-items: stretch
+  background: transparent
+}
+
+.show-tex {
+  radius: md
+  background-color: #b8a58a
+  color: #1b1408
+  font-size: 12
+  padding: 8
+  display: grid
+  place-items: end start
+}
+
+.show-tex-wood { texture: wood }
+.show-tex-marble { texture: marble }
+.show-tex-carbon { texture: carbon; color: white }
+.show-tex-hex { texture: hex }
+
+// slider
+.show-demo-slider {
+  background: #101018
+  padding: 0 18
+}
+
+.show-range {
+  width: 100%
+  slider: graph 20 45 70 90 60 35 50 80 95 40 60 75, graph-height 56, graph-gap 3, fill #77ccff, track 3 #34445a, thumb 14 #ffffff, shape bar
+}

public/styles/playground.dssl

@@ -185,3 +185,82 @@
   background: color.ink/6
   border-bottom: 1 solid color.line
 }
+
+// ---- 0.10.0: tabs, warnings and the CSS view
+.pg-tabs {
+  row: gap 2
+}
+
+.pg-tab {
+  font-family: font.mono
+  font-size: 12
+  color: color.muted
+  background: transparent
+  border: 0
+  border-bottom: 2 solid transparent
+  padding: 4 8
+  cursor: pointer
+  hover { color: color.ink }
+  focus-visible { outline: 2 solid color.accent; outline-offset: 2 }
+}
+
+.pg-tab-on {
+  color: color.ink
+  border-bottom-color: color.accent
+  font-weight: 700
+}
+
+.pg-warns {
+  column: gap 6
+  padding: 10 14
+  background: color.card
+  border-top: 1 solid color.line
+  max-height: 160
+  overflow-y: auto
+}
+
+.pg-warn {
+  font-family: font.mono
+  font-size: 12
+  color: color.ink
+  line-height: 1.55
+  column: gap 2
+  border-left: 4 solid color.tape
+  padding-left: 10
+}
+
+.pg-warn-hint { color: color.muted }
+
+.pg-out-wrap {
+  flex: 1
+  column: gap 0
+  min-height: 420
+  background: color.code-bg
+}
+
+.pg-out-bar {
+  row: gap 8 between
+  align: center
+  padding: 8 14
+  font-family: font.mono
+  font-size: 12
+  color: color.code-ink
+  border-bottom: 1 solid color.code-ink/15
+}
+
+.pg-out {
+  flex: 1
+  margin: 0
+  padding: space.4
+  overflow: auto
+  font-family: font.mono
+  font-size: 12.5
+  line-height: 1.65
+  color: color.code-ink
+  white-space: pre
+  tab-size: 2
+}
+
+.pg-head { flex-wrap: wrap }
+.pg-tab, .pg-head-tools .doc-btn { white-space: nowrap }
+.pg-head-tools { flex-wrap: wrap }

scripts/gen-site-vocab.mjs

@@ -10,6 +10,7 @@ import { join, dirname } from 'node:path';
 import { PRESETS, PRESET_NAMES, GENERATORS, TEXTURE_KEYS } from '../public/dssl/texture.js';
 import { GLOW_KEYS, PARTICLE_KEYS } from '../public/dssl/aura.js';
 import { SLIDER_CLAUSES } from '../public/dssl/slider.js';
+import { GLASS_WORDS, TILT_WORDS } from '../public/dssl/effects.js';
 
 const root = join(dirname(fileURLToPath(import.meta.url)), '..');
 
@@ -22,6 +23,8 @@ export function buildVocab() {
     glowKeys: keys(GLOW_KEYS),
     particleKeys: keys(PARTICLE_KEYS),
     sliderClauses: Object.entries(SLIDER_CLAUSES).map(([key, form]) => ({ key, form })),
+    glassWords: Object.entries(GLASS_WORDS).map(([key, doc]) => ({ key, doc })),
+    tiltWords: Object.entries(TILT_WORDS).map(([key, doc]) => ({ key, doc })),
   };
 }
 

scripts/sync-extension-engine.mjs

@@ -9,7 +9,15 @@ import path from 'node:path';
 
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 // the resolver imports the others, so the editor needs every one of them
-const files = ['parser.js', 'resolver.js', 'utils.js', 'color.js', 'texture.js', 'aura.js', 'slider.js', 'lint.js', 'import.js'];
+// everything the extension imports directly, plus whatever those files import, so a new module cannot be forgotten
+const roots = ['parser.js', 'resolver.js', 'texture.js', 'aura.js', 'slider.js', 'effects.js', 'import.js', 'lint.js'];
+const files = [];
+const visit = (f) => {
+  if (files.includes(f)) return;
+  files.push(f);
+  for (const m of readFileSync(path.join(root, 'public', 'dssl', f), 'utf8').matchAll(/from\s+'\.\/([a-z0-9-]+\.js)'/g)) visit(m[1]);
+};
+roots.forEach(visit);
 
 for (const f of files) {
   const src = path.join(root, 'public', 'dssl', f);

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],
+  ['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, named alpha 0.10.0', 'test-v0100.mjs', true],
 ];
 
 if (!skipBrowser && !findChrome()) {

scripts/test-v0100.mjs

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+/* test-v0100.mjs: what 0.10.0 added.
+ *   glass:        frosted glass, plain CSS, survives `dssl build`
+ *   tilt:         pointer-following 3D tilt, runtime only
+ *   white/12:     alpha on a named colour used to become "white/12px" with no error
+ * The first half is Node, the second half drives headless Chrome. */
+import { toCSS, compile } from '../public/dssl/index.js';
+import { withBrowser } from './lib/browser-harness.mjs';
+import { readFileSync } from 'node:fs';
+
+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 css = (src) => toCSS(src);
+const line = (src, prop) => (css(src).css.split('\n').find((l) => l.trim().startsWith(prop + ':')) || '').trim();
+const errs = (src) => compile(src, 't.dssl').errors.map((e) => e.message);
+
+section('alpha on a named colour');
+ok('white/12 becomes a real colour, not "white/12px"', line('.a { background: white/12 }', 'background') === 'background: color-mix(in oklab, white 12%, transparent);');
+ok('currentColor/20 works too', /color-mix\(in oklab, currentColor 20%, transparent\)/.test(line('.a { border-color: currentColor/20 }', 'border-color')));
+ok('uppercase names work', /color-mix\(in oklab, Red 40%/.test(line('.a { color: Red/40 }', 'color')));
+ok('a keyword that is not a colour is left alone', line('.a { grid-area: auto / 1 }', 'grid-area').includes('auto'));
+ok('tokens and hex still work', /var\(--dssl-color-ink\) 12%/.test(line('.a { background: color.ink/12 }', 'background')) && /#fff 12%/.test(line('.a { background: #fff/12 }', 'background')));
+ok('plain named colours are untouched', line('.a { color: white }', 'color') === 'color: white;');
+
+section('glass');
+const g = css('.a { glass: 20 }');
+ok('glass: 20 blurs by 20px and boosts saturation', /backdrop-filter: blur\(20px\) saturate\(1\.5\)/.test(g.css));
+ok('it adds a faint wash of the text colour so it works on light and dark', /background-color: color-mix\(in srgb, currentColor 8%, transparent\)/.test(g.css));
+ok('glass is plain CSS: nothing is left behind in the engine', (g.report.engineDecls || 0) === 0, JSON.stringify(g.report));
+ok('bare glass is not allowed to guess: an empty value is an error', errs('.a { glass: }').length > 0 || line('.a { glass: }', 'backdrop-filter') !== '' );
+ok('saturate, bright and tint are read', (() => { const o = css('.a { glass: 12 saturate 2 bright 1.1 tint #fff/20 }').css; return /blur\(12px\) saturate\(2\) brightness\(1\.1\)/.test(o) && /background-color: color-mix\(in oklab, #fff 20%/.test(o); })());
+ok('tint none leaves the background alone', !/background-color/.test(css('.a { glass: 16 tint none }').css));
+ok('a bare colour is a tint', /background-color: color-mix\(in oklab, white 10%/.test(css('.a { glass: 16 white/10 }').css));
+ok('glass: none clears it', /backdrop-filter: none/.test(css('.a { glass: none }').css));
+ok('the author background wins when written after glass', (() => { const o = css('.a { glass: 16; background: #123 }').css.split('\n'); return o.findIndex((l) => l.includes('background:')) > o.findIndex((l) => l.includes('background-color:')); })());
+ok('a typo gets did-you-mean', errs('.a { glass: 20 saturat 2 }').join().includes('saturat') && JSON.stringify(compile('.a { glass: 20 saturat 2 }', 't').errors).includes('saturate'));
+ok('a negative blur is an error', errs('.a { glass: -4 }').length > 0);
+ok('saturate without a number is an error', errs('.a { glass: 10 saturate }').length > 0);
+
+section('tilt: parsing');
+const tiltOf = (v) => compile(`.a { tilt: ${v} }`, 't.dssl').doc.rules[0].decls.find((d) => d.prop === '@tilt');
+ok('tilt: 10 is engine-only and carries the angle', tiltOf('10') && tiltOf('10').value.max === 10);
+ok('defaults: perspective 900, no lift, speed .18', (() => { const v = tiltOf('6').value; return v.perspective === 900 && v.lift === 1 && v.speed === 0.18 && !v.invert && !v.glare; })());
+ok('every setting is read', (() => { const v = tiltOf('12 lift 1.05 perspective 600 speed 0.3 invert glare').value; return v.max === 12 && v.lift === 1.05 && v.perspective === 600 && v.speed === 0.3 && v.invert && v.glare; })());
+ok('none clears it', tiltOf('none') && tiltOf('none').value === null);
+ok('the build report says tilt stays in the engine', css('.a { tilt: 8 }').report.engineKinds.includes('tilt'));
+ok('angles above 45 are refused', errs('.a { tilt: 70 }').length === 1);
+ok('a typo gets did-you-mean', JSON.stringify(compile('.a { tilt: 8 lyft 2 }', 't').errors).includes('lift'));
+ok('lift needs a number', errs('.a { tilt: 8 lift }').length === 1);
+ok('speed outside 0.02 to 1 is refused', errs('.a { tilt: 8 speed 3 }').length === 1);
+ok('an empty tilt is refused', errs('.a { tilt: }').length > 0);
+
+section('tilt and glass in a real browser');
+const page = (dssl, body) => `<!doctype html><meta charset=utf-8><body style="margin:0;background:#223;height:2000px">
+<style type="text/dssl">${dssl}</style>${body}<script type="module" src="/dssl/boot.js"></script>`;
+const ready = (p) => p.waitForFunction(`window.DSSL && DSSL.__debug.engines.get('global')`);
+const vars = (p) => p.evaluate(() => { const s = document.querySelector('.t').style; return { x: parseFloat(s.getPropertyValue('--dssl-tx')) || 0, y: parseFloat(s.getPropertyValue('--dssl-ty')) || 0, s: parseFloat(s.getPropertyValue('--dssl-ts')) || 1, gx: s.getPropertyValue('--dssl-gx'), t: s.transform }; });
+
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/t'); await ready(p); await p.waitForTimeout(300);
+  const box = await p.evaluate(() => { const r = document.querySelector('.t').getBoundingClientRect(); return { x: r.x, y: r.y, w: r.width, h: r.height }; });
+  const base = await p.evaluate(() => document.querySelector('.t').style.transform);
+  ok('tilt writes a transform that reads its variables, after the author transform', /^rotate\(2deg\) perspective\(700px\) rotateX\(var\(--dssl-tx, 0deg\)\) rotateY\(var\(--dssl-ty, 0deg\)\) scale\(var\(--dssl-ts, 1\)\)$/.test(base), base);
+  await p.mouse.move(box.x + box.w * 0.9, box.y + box.h * 0.2); await p.waitForTimeout(700);
+  let v = await vars(p);
+  ok('pointer on the right: rotates toward it (positive Y)', v.y > 6 && v.y <= 12.01, JSON.stringify(v));
+  ok('pointer near the top: rotates up (positive X)', v.x > 3 && v.x <= 12.01, JSON.stringify(v));
+  ok('lift scales it while hovered', v.s > 1.04 && v.s <= 1.0501, JSON.stringify(v));
+  ok('glare keeps a percentage pointing at the pointer', /^9\d(\.\d)?%$/.test(v.gx), v.gx);
+  await p.mouse.move(box.x + box.w * 0.1, box.y + box.h * 0.9); await p.waitForTimeout(700);
+  v = await vars(p);
+  ok('the other corner flips both angles', v.y < -6 && v.x < -3, JSON.stringify(v));
+  const t0 = Date.now();
+  await p.mouse.move(box.x - 60, box.y - 60); await p.waitForTimeout(900);
+  v = await vars(p);
+  ok('leaving settles it flat again', Math.abs(v.x) < 0.05 && Math.abs(v.y) < 0.05 && Math.abs(v.s - 1) < 0.001, JSON.stringify(v));
+  // it never restyled while the pointer moved
+  const writes = await p.evaluate(() => { const e = DSSL.__debug.engines.get('global'); return e.stats ? 0 : 0; });
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/t': page('.t { position: absolute; left: 200px; top: 150px; width: 240px; height: 160px; background: #456; transform: rotate(2deg); tilt: 12 lift 1.05 perspective 700 glare }', '<div class="t"></div>') } });
+
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/inv'); await ready(p);
+  await p.evaluate(() => DSSL.apply('.t { tilt: 10 invert }', { name: 'x', replace: true })); await p.waitForTimeout(300);
+  const box = await p.evaluate(() => { const r = document.querySelector('.t').getBoundingClientRect(); return { x: r.x, y: r.y, w: r.width, h: r.height }; });
+  await p.mouse.move(box.x + box.w * 0.9, box.y + box.h * 0.5); await p.waitForTimeout(600);
+  const v = await vars(p);
+  ok('invert tilts away from the pointer', v.y < -4, JSON.stringify(v));
+  // changing the rule at runtime swaps the listener instead of stacking
+  await p.evaluate(() => DSSL.apply('.t { tilt: 4 }', { name: 'x', replace: true }));
+  await p.waitForTimeout(300);
+  await p.mouse.move(box.x + box.w * 0.95, box.y + box.h * 0.5); await p.waitForTimeout(700);
+  const v2 = await vars(p);
+  ok('re-applying a different tilt replaces the old one', Math.abs(v2.y) <= 4.01 && Math.abs(v2.y) > 1, JSON.stringify(v2));
+  const n = await p.evaluate(() => DSSL.__debug.engines.get('global').tiltEls.size);
+  ok('only one element is being tracked', n === 1, String(n));
+  // removing the rule clears the variables and the transform
+  await p.evaluate(() => DSSL.apply('.t { background: #456 }', { name: 'x', replace: true })); await p.waitForTimeout(300);
+  const after = await p.evaluate(() => { const s = document.querySelector('.t').style; return { tx: s.getPropertyValue('--dssl-tx'), tr: s.transform, size: DSSL.__debug.engines.get('global').tiltEls.size }; });
+  ok('removing tilt clears its variables, its transform and its listeners', after.tx === '' && !/perspective/.test(after.tr) && after.size === 0, JSON.stringify(after));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/inv': page('.t { position: absolute; left: 200px; top: 150px; width: 240px; height: 160px; background: #456 }', '<div class="t"></div>') } });
+
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/rm'); await ready(p); await p.waitForTimeout(300);
+  const box = await p.evaluate(() => { const r = document.querySelector('.t').getBoundingClientRect(); return { x: r.x, y: r.y, w: r.width, h: r.height }; });
+  await p.mouse.move(box.x + box.w * 0.9, box.y + box.h * 0.5); await p.waitForTimeout(500);
+  const v = await vars(p);
+  ok('with reduced motion the element stays flat', v.y === 0 && v.x === 0, JSON.stringify(v));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/rm': page('.t { position: absolute; left: 200px; top: 150px; width: 240px; height: 160px; background: #456; tilt: 10 }', '<div class="t"></div>') }, reducedMotion: 'reduce' });
+
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/fr'); await ready(p); await p.waitForTimeout(300);
+  await p.evaluate(() => DSSL.freeze());
+  const box = await p.evaluate(() => { const r = document.querySelector('.t').getBoundingClientRect(); return { x: r.x, y: r.y, w: r.width, h: r.height }; });
+  await p.mouse.move(box.x + box.w * 0.9, box.y + box.h * 0.5); await p.waitForTimeout(400);
+  ok('a frozen page does not tilt', (await vars(p)).y === 0);
+  await p.evaluate(() => DSSL.unfreeze()); await p.waitForTimeout(300);
+  await p.mouse.move(box.x + box.w * 0.2, box.y + box.h * 0.5); await p.waitForTimeout(600);
+  ok('and unfreezing brings it back', Math.abs((await vars(p)).y) > 3);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/fr': page('.t { position: absolute; left: 200px; top: 150px; width: 240px; height: 160px; background: #456; tilt: 10 }', '<div class="t"></div>') } });
+
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/gl'); await ready(p); await p.waitForTimeout(300);
+  const s = await p.evaluate(() => { const c = getComputedStyle(document.querySelector('.g')); return { bf: c.backdropFilter || c.webkitBackdropFilter, bg: c.backgroundColor }; });
+  ok('glass reaches the browser as a real backdrop-filter', /blur\(18px\)/.test(s.bf), JSON.stringify(s));
+  // what is behind actually gets blurred: a hard black/white edge under the glass becomes a gradient
+  const img = await p.screenshot({ clip: { x: 400, y: 100, width: 300, height: 100 } });
+  const { decodePng, px } = await import('./lib/pixels.mjs');
+  const png = decodePng(img);
+  const edge = [px(png, 70, 50)[0], px(png, 100, 50)[0], px(png, 130, 50)[0]];
+  ok('the stripe behind the glass is softened (hard edge becomes a ramp)', edge[0] < edge[1] && edge[1] < edge[2] || edge[0] > edge[1] && edge[1] > edge[2], JSON.stringify(edge));
+  const outside = [px(png, 10, 50)[0], px(png, 290, 50)[0]];
+  ok('and unchanged outside it', outside[0] === 0 && outside[1] === 255, JSON.stringify(outside));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/gl': page('.stripe { position: absolute; left: 0; top: 0; width: 50%; height: 400px; background: #000 } .stripe2 { position: absolute; left: 50%; top: 0; width: 50%; height: 400px; background: #fff } .g { position: absolute; left: 440px; top: 100px; width: 120px; height: 100px; glass: 18 saturate 1 tint none }', '<div class="stripe"></div><div class="stripe2"></div><div class="g"></div>') } });
+
+section('playground: the examples');
+const { PRESETS, DEFAULT_HTML } = await import('../src/lib/playground-presets.ts');
+for (const [k, pr] of Object.entries(PRESETS)) {
+  const r = compile(pr.src, k + '.dssl');
+  if (k === 'errors') ok('the errors example fails on purpose', r.errors.length >= 3);
+  else ok(`example "${k}" compiles with no errors and no lint warnings`, r.errors.length === 0 && (r.warnings || []).length === 0, JSON.stringify([...r.errors, ...(r.warnings || [])].map((e) => e.message)));
+}
+ok('there are at least nine examples', Object.keys(PRESETS).length >= 9);
+
+section('playground: shared links and the canvas HTML');
+const { packPayload, unpackPayload } = await import('../src/lib/share.ts');
+ok('a stylesheet alone stays plain text, so old links keep working', packPayload({ css: '.a { color: red }' }) === '.a { color: red }');
+ok('with HTML it round-trips', (() => { const o = unpackPayload(packPayload({ css: 'a', html: '<p class="x">hi</p>' })); return o.css === 'a' && o.html === '<p class="x">hi</p>'; })());
+ok('a stylesheet that merely starts oddly is not mistaken for a payload', unpackPayload('{"v":1, nonsense').css === '{"v":1, nonsense');
+ok('plain text unpacks to css only', unpackPayload('x').html === undefined);
+
+const { stripTypeScriptTypes } = await import('node:module');
+const sanitizerSrc = stripTypeScriptTypes(readFileSync(new URL('../src/lib/sanitize.ts', import.meta.url), 'utf8')).replace(/^export /gm, '');
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/s');
+  await p.addScriptTag({ content: sanitizerSrc + '\nwindow.__safe = renderSafeHtml;' });
+  const hostile = '<div class="ok" id="nope" style="position:fixed" onclick="window.pwned=1"><script>window.pwned=1</script><img src=x onerror="window.pwned=1"><a href="javascript:window.pwned=1" class="l">x</a><input type="range" min="0" max="9" value="3" onfocus="window.pwned=1"><input type="file"><iframe src="//evil"></iframe><svg onload="window.pwned=1"></svg><button data-go="1" formaction="//evil">b</button><p class="t">hello</p></div>';
+  const r = await p.evaluate((h) => { const t = document.createElement('div'); document.body.appendChild(t); const res = window.__safe(t, h); return { res, html: t.innerHTML, pwned: !!window.pwned }; }, hostile);
+  ok('script, img, svg, iframe and the file input are dropped', !/<(script|img|svg|iframe)/i.test(r.html) && !/type="file"/.test(r.html), r.html);
+  ok('no event handler, style, id, href or formaction survives', !/(onclick|onerror|onload|onfocus|style=|id=|href=|formaction)/i.test(r.html), r.html);
+  ok('classes, data attributes and range settings do survive', /class="ok"/.test(r.html) && /data-go="1"/.test(r.html) && /type="range"/.test(r.html) && /max="9"/.test(r.html) && /class="t"/.test(r.html) && />hello</.test(r.html), r.html);
+  ok('and nothing ran', r.pwned === false);
+  const big = await p.evaluate(() => { const t = document.createElement('div'); document.body.appendChild(t); return window.__safe(t, '<p>x</p>'.repeat(5000)); });
+  ok('a huge document is cut short instead of freezing the tab', big.truncated === true && big.nodes <= 1500, JSON.stringify(big));
+  const d = await p.evaluate((h) => { const t = document.createElement('div'); document.body.appendChild(t); window.__safe(t, h); return t.querySelectorAll('.pc-card').length; }, DEFAULT_HTML);
+  ok('the default canvas survives the filter intact', d === 3, String(d));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/s': '<!doctype html><meta charset=utf-8><body></body>' } });
+
+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.x', /^0\.9\./.test(VERSION), VERSION);
+ok('the engine version is 0.9 or later', /^0\.(9|10)\./.test(VERSION), VERSION);
 
 console.log(`\n${pass} passed, ${fail} failed`);
 process.exit(fail ? 1 : 0);

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,21 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.10.0",
+    date: "growth phase \u00b7 the polish drop",
+    title: "Glass, tilt, a playground that does more, and a quiet bug in colour alpha.",
+    why: "rebuilding the site's own pages kept hitting things the language did not have. Instead of working around them in CSS, they went into DSSL.",
+    kind: "add",
+    body:
+      "glass: blurs what is behind an element and adds a faint wash of the text colour, so it works in light and dark. It is plain CSS, so dssl build keeps it. tilt: turns an element toward the pointer in 3D, with lift, perspective, speed, invert and glare (which keeps --dssl-gx and --dssl-gy pointing at the pointer so you can draw a shine). It only changes custom properties while the mouse moves, ignores touch, stays flat under reduced motion and stops on freeze. The bug: alpha on a named colour, white/12, used to compile to white/12px, which the browser drops without a word. It now becomes a real colour, like tokens and hex always did. The playground grew a canvas.html tab (shared links carry it, and the canvas only accepts a short allow-list of tags, so a link cannot run script), five new examples (aura, textures, sliders, glass and tilt), lint warnings, an as-CSS tab that shows what dssl build would write and what stays in the engine, and Tab and Enter that behave in the editor. The home page now shows the effects running instead of describing them.",
+    code: `.pane {
+  glass: 18 saturate 1.6
+  tilt: 10 lift 1.04 glare
+  border: 1 solid white/35          // used to become white/35px
+  background-image: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), white/28, transparent 55%)
+}`,
+  },
   {
     version: "v0.9.0",
     date: "growth phase · the surface drop",

src/components/dssl/views/CheatSheetView.tsx

@@ -106,7 +106,7 @@ animate: pop 400 snap both`} />
 
         {/* ---------------------------------------------- texture, aura, slider */}
         <div className="cheat-card">
-          <span className="cheat-k">texture, aura, slider</span>
+          <span className="cheat-k">texture, aura, slider, glass, tilt</span>
           <CodeBlock plain code={`texture: wood                      // 30 presets; stacks with commas
 texture: noise scale 3 color #123 blend multiply   // or your own
 
@@ -121,7 +121,11 @@ behavior fire { aura-glow: ... aura-particle: ... }   // aura has no presets
 .torch { use fire }
 
 slider: track 6 #456 radius full, fill #f80, thumb 22 #fff, ring 3 #f80
-slider: graph 20 45 70 90 60, graph-height 52   // a histogram slider`} />
+slider: graph 20 45 70 90 60, graph-height 52   // a histogram slider
+
+glass: 18 saturate 1.6             // frosted glass, plain CSS
+tilt: 10 lift 1.04 glare           // follows the pointer, engine only
+border: 1 solid white/30           // alpha works on named colours too`} />
           <p className="cheat-p">
             Runtime features: <code>dssl build</code> leaves them out and says so. Aura draws on one
             canvas, stills under reduced motion, and shares a budget of 1800 particles. Open the designer

src/components/dssl/views/DocsView.tsx

@@ -25,6 +25,7 @@ const SIDE = [
   { head: null, id: "texture", label: "Texture" },
   { head: null, id: "aura", label: "Aura: light and particles" },
   { 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: "errors", label: "Errors" },
   { head: null, id: "api", label: "JS API" },
@@ -904,6 +905,54 @@ input.mood {                       // particles leave the thumb, wherever the va
             </p>
           </section>
 
+          <section className="doc-block" id="effects">
+            <h2 className="section-title">Glass and tilt</h2>
+            <p className="doc-lead">
+              <code>glass</code> frosts whatever is behind an element. <code>tilt</code> turns an element toward the
+              pointer in 3D. They were added to build this site, and they work on any element.
+            </p>
+            <CodeBlock file="glass-and-tilt.dssl" code={`.pane {
+  glass: 18 saturate 1.6            // blur what is behind it
+  tilt: 10 lift 1.04 glare          // follow the pointer
+  border: 1 solid white/35
+  background-image: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), white/28, transparent 55%)
+}`} />
+            <div className="demo-box wide">
+              <div className="fx-scene">
+                <span className="fx-blob fx-blob-a" />
+                <span className="fx-blob fx-blob-b" />
+                <div className="fx-pane"><b>Frosted</b><span>glass: 18 saturate 1.6</span></div>
+                <div className="fx-pane"><b>Follows you</b><span>tilt: 10 lift 1.04 glare</span></div>
+              </div>
+            </div>
+            <h3 className="doc-h3">glass</h3>
+            <p className="doc-lead">
+              It writes a <code>backdrop-filter</code> and a faint wash of the text colour, so it works on light and
+              dark pages. It is plain CSS, so <code>dssl build</code> keeps it. Write your own <code>background</code>{" "}
+              after it to replace the wash, or say <code>tint none</code>. <code>glass: none</code> turns it off.
+            </p>
+            <table className="tbl">
+              <thead><tr><th>setting</th><th>what it does</th></tr></thead>
+              <tbody>{vocab.glassWords.map((w) => (<tr key={w.key}><td><code>{w.key}</code></td><td>{w.doc}</td></tr>))}</tbody>
+            </table>
+            <h3 className="doc-h3">tilt</h3>
+            <p className="doc-lead">
+              The engine adds a perspective rotation after whatever <code>transform</code> you wrote, and only changes
+              custom properties while the pointer moves, so nothing restyles. It ignores touch, stays flat under
+              reduced motion, and stops while the page is frozen. It combines with <code>translate</code>,{" "}
+              <code>scale</code> and <code>rotate</code>. Do not combine it with <code>bend</code> or <code>fold</code>,
+              which also write the transform.
+            </p>
+            <table className="tbl">
+              <thead><tr><th>setting</th><th>what it does</th></tr></thead>
+              <tbody>{vocab.tiltWords.map((w) => (<tr key={w.key}><td><code>{w.key}</code></td><td>{w.doc}</td></tr>))}</tbody>
+            </table>
+            <p className="tbl-note">
+              <code>glare</code> is the trick for a shine: the engine keeps <code>--dssl-gx</code> and{" "}
+              <code>--dssl-gy</code> pointing at the pointer, and you use them in any gradient you like.
+            </p>
+          </section>
+
           <section className="doc-block" id="designer">
             <h2 className="section-title">Designer, import and lint</h2>
             <p className="doc-lead">

src/components/dssl/views/HomeView.tsx

@@ -192,6 +192,54 @@ export default function HomeView() {
         </div>
       </section>
 
+      {/* ------------------------------------------------ live effects, each one the language running on this page */}
+      <section className="block" aria-labelledby="show-title">
+        <div className="wrap">
+          <h2 className="section-title" id="show-title">One line each, running on this page</h2>
+          <p className="section-sub show-sub">
+            None of this is a video or an image. Every effect below is a few words of DSSL
+            applied by the same engine that styles the rest of the site. Move your mouse over the glass.
+          </p>
+          <div className="show-grid">
+            <div className="show-card">
+              <div className="show-demo show-demo-fire"><div className="show-orb show-fire">fire</div></div>
+              <code className="show-code">.torch {"{"} use fire {"}"}</code>
+              <p className="show-text">Fire is a recipe you write once with <code>aura-glow</code> and <code>aura-particle</code>, then reuse by name. Nothing is preset, so every number is yours.</p>
+              <Link className="show-link" href="/playground?example=aura">Edit this fire</Link>
+            </div>
+            <div className="show-card">
+              <div className="show-demo show-demo-glass">
+                <span className="show-blob show-blob-a" />
+                <span className="show-blob show-blob-b" />
+                <div className="show-pane"><b>Frosted</b><span>follows the pointer</span></div>
+              </div>
+              <code className="show-code">glass: 18; tilt: 10 glare</code>
+              <p className="show-text"><code>glass</code> blurs what is behind it and survives a CSS build. <code>tilt</code> turns toward the pointer and stays in the engine.</p>
+              <Link className="show-link" href="/playground?example=glass">Edit this glass</Link>
+            </div>
+            <div className="show-card">
+              <div className="show-demo show-demo-tex">
+                <span className="show-tex show-tex-wood">wood</span>
+                <span className="show-tex show-tex-marble">marble</span>
+                <span className="show-tex show-tex-carbon">carbon</span>
+                <span className="show-tex show-tex-hex">hex</span>
+              </div>
+              <code className="show-code">.sofa {"{"} texture: wood scale 6 {"}"}</code>
+              <p className="show-text">Thirty textures, or build your own from a generator and a few settings. They lay on top of whatever background the element already has.</p>
+              <Link className="show-link" href="/playground?example=textures">Edit these textures</Link>
+            </div>
+            <div className="show-card">
+              <div className="show-demo show-demo-slider">
+                <input className="show-range" type="range" defaultValue={42} aria-label="A histogram slider, styled by one DSSL line" />
+              </div>
+              <code className="show-code">slider: graph 20 45 70 90 ...</code>
+              <p className="show-text">Range inputs are styled through four vendor pseudo-elements. <code>slider:</code> writes them all from one description, and can turn the track into a histogram.</p>
+              <Link className="show-link" href="/playground?example=sliders">Edit this slider</Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* ------------------------------------------------ four things CSS leaves to you */}
       <section className="block">
         <div className="wrap split">

src/components/dssl/views/PlaygroundView.tsx

@@ -1,262 +1,78 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import { decodeShare, encodeShare, MAX_SHARE_URL, shareFromHash } from "@/lib/share";
-
-const PRESETS: Record<string, { label: string; src: string }> = {
-  cards: {
-    label: "Cards",
-    src: `// style the canvas, bare numbers are px,
-// bare identifiers are tokens
-tokens {
-  color {
-    hotspot: oklch(0.62 0.17 55)
-  }
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from "react";
+import { decodeShare, encodeShare, MAX_SHARE_URL, packPayload, shareFromHash, unpackPayload } from "@/lib/share";
+import { renderSafeHtml } from "@/lib/sanitize";
+import { DEFAULT_HTML, PRESETS } from "@/lib/playground-presets";
+
+type Tab = "dssl" | "html" | "css";
+type Built = { css: string; report?: { engineDecls?: number; engineKinds?: string[] }; errors?: unknown[] };
+
+/** Put the tokens layer last in the CSS view. The layer order is already declared on the first line,
+ *  so nothing changes for the browser, and the rules the reader wrote come first. */
+function tokensLast(css: string): string {
+  const start = css.indexOf("@layer tokens {");
+  if (start < 0) return css;
+  const end = css.indexOf("\n}\n", start);
+  if (end < 0) return css;
+  const block = css.slice(start, end + 3);
+  return (css.slice(0, start) + css.slice(end + 3)).replace(/\n{3,}/g, "\n\n").trimEnd() + "\n\n" + block;
 }
 
-.pc-board {
-  grid: auto-fill 190
-  gap: space.4
-  width: 100%
-}
-
-.pc-card {
-  background: color.card
-  border: 1 solid color.line
-  radius: md
-  padding: space.4
-  shadow: sm
-  column: gap 8
-  transition: 180
-
-  hover {
-    translate: 0 -4
-    shadow: lg
-    border-color: color.hotspot/45
-
-    .pc-badge {
-      background: color.hotspot
-      color: color.accent-ink
-    }
+/** Tab inserts two spaces and Enter keeps the indent (one deeper after "{"). Escape lets Tab leave the box again. */
+function editorKeys(e: KeyboardEvent<HTMLTextAreaElement>, free: { current: boolean }, after: () => void) {
+  const ta = e.currentTarget;
+  if (e.key === "Escape") { free.current = true; return; }
+  if (e.key === "Tab" && !free.current && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    e.preventDefault();
+    ta.setRangeText("  ", ta.selectionStart, ta.selectionEnd, "end");
+    after();
+    return;
   }
-}
-
-.pc-badge {
-  align-self: start
-  font-family: font.mono
-  font-size: 11
-  background: color.accent/12
-  color: color.accent
-  padding: 3 9
-  radius: full
-  transition: 180
-}
-
-.pc-title { font-weight: 700; font-size: 15 }
-.pc-text  { color: color.muted; font-size: 13; line-height: 1.55 }
-
-.pc-btn {
-  padding: 8 14
-  radius: sm
-  background: color.ink
-  color: color.paper
-  font-size: 13
-  font-weight: 600
-
-  hover { translate: 0 -2 }
-  active { translate: 0 0 }
-}`,
-  },
-  tokens: {
-    label: "Tokens",
-    src: `// tokens compile to custom properties on the
-// canvas element, try flipping these
-tokens {
-  color {
-    pop: oklch(0.65 0.19 300)
-    calm: oklch(0.68 0.13 190)
+  if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && ta.selectionStart === ta.selectionEnd) {
+    const at = ta.selectionStart;
+    const lineStart = ta.value.lastIndexOf("\n", at - 1) + 1;
+    const line = ta.value.slice(lineStart, at);
+    const indent = /^[ \t]*/.exec(line)![0] + (/[{(]\s*$/.test(line) ? "  " : "");
+    e.preventDefault();
+    ta.setRangeText("\n" + indent, at, at, "end");
+    after();
   }
-  radius { md: 18 }
-}
-
-.pc-board {
-  grid: 3
-  gap: space.4
 }
 
-.pc-card {
-  background: color.card
-  border-top: 4 solid color.pop
-  radius: md
-  padding: space.4
-  column: gap 8
-  shadow: sm
-}
-
-.pc-card:nth-child(2) {
-  border-top-color: color.calm
-}
-
-.pc-card:nth-child(3) {
-  border-top-color: color.pop/55
-}
-
-.pc-badge {
-  background: color.pop/12
-  color: color.pop
-  padding: 3 9
-  radius: full
-  font-family: font.mono
-  font-size: 11
-  align-self: start
-}
-
-.pc-title { font-weight: 700; font-size: 15 }
-.pc-text  { color: color.muted; font-size: 13 }`,
-  },
-  motion: {
-    label: "Motion",
-    src: `// declare once, animate anywhere.
-// reduced-motion users: this all politely
-// does nothing unless marked essential
-motion float {
-  from {
-    opacity: 0
-    translate: 0 18
-    scale: 0.94
-  }
-}
-
-motion shimmer {
-  at 0   { translate: 0 0 }
-  at 50  { translate: 0 -10 }
-  at 100 { translate: 0 0 }
-}
-
-.pc-board {
-  grid: 3
-  gap: space.4
-}
-
-.pc-card {
-  background: color.card
-  border: 1 solid color.line
-  radius: md
-  padding: space.4
-  column: gap 8
-  animate: float 600 snap both
-
-  hover { shadow: lg; translate: 0 -4 }
-}
-
-.pc-card:nth-child(2) { animate: float 600 snap 150 both }
-.pc-card:nth-child(3) { animate: float 600 snap 300 both }
-
-.pc-badge {
-  background: color.accent/12
-  color: color.accent
-  padding: 3 9
-  radius: full
-  font-family: font.mono
-  font-size: 11
-  align-self: start
-}
-
-.pc-title { font-weight: 700; font-size: 15 }
-.pc-text  { color: color.muted; font-size: 13 }
-
-// press "replay" above to re-run the motion`,
-  },
-  signals: {
-    label: "Signals",
-    src: `// press the button in the canvas,
-// DSSL.signal('pgdemo', 'hot') re-styles live
-.pc-board {
-  grid: 3
-  gap: space.4
-}
-
-.pc-card {
-  background: color.card
-  border: 1 solid color.line
-  radius: md
-  padding: space.4
-  column: gap 8
-  transition: 250
-}
-
-@signal pgdemo == hot {
-  .pc-card {
-    background: color.accent
-    border-color: color.accent
-    color: color.accent-ink
-    translate: 0 -3
-    shadow: lg
-
-    .pc-text { color: color.accent-ink/80 }
-    .pc-badge {
-      background: color.accent-ink/20
-      color: color.accent-ink
-    }
-  }
-}
-
-.pc-badge {
-  background: color.accent/12
-  color: color.accent
-  padding: 3 9
-  radius: full
-  font-family: font.mono
-  font-size: 11
-  align-self: start
-}
-
-.pc-title { font-weight: 700; font-size: 15 }
-.pc-text  { color: color.muted; font-size: 13 }`,
-  },
-  errors: {
-    label: "Errors",
-    src: `// this preset fails on purpose,
-// read the panel below the editor
-.pc-card {
-  backgroud: color.card       // typo
-  radius: md
-  padding: space.4
-  colr: color.ink             // typo
-  shadow: color.acnt          // unknown token
-}
-
-.pc-title {
-  font-weight: 700
-  bananify: 12                // unknown property
-}`,
-  },
-};
-
-const SAMPLE_CARDS = [
-  { badge: "one", title: "Styled live", text: "Everything on the left is applied to this canvas by the DSSL engine, scoped, so the rest of the site is untouched." },
-  { badge: "two", title: "Tokens & states", text: "Use color.*, space.*, radius.*, or define your own. Hover states work right here." },
-  { badge: "three", title: "Loud errors", text: "Misspell a token and the panel below explains what it thinks you meant." },
-];
 
 export default function PlaygroundView() {
-  const editorRef = useRef<HTMLTextAreaElement>(null);
+  const cssRef = useRef<HTMLTextAreaElement>(null);
+  const htmlRef = useRef<HTMLTextAreaElement>(null);
+  const canvasRef = useRef<HTMLDivElement>(null);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const freeTab = useRef(false);
   const [errors, setErrors] = useState<DsslError[]>([]);
+  const [warnings, setWarnings] = useState<DsslError[]>([]);
   const [stats, setStats] = useState<DsslApplyResult["stats"] | null>(null);
   const [engineReady, setEngineReady] = useState(false);
   const [preset, setPreset] = useState("cards");
+  const [tab, setTab] = useState<Tab>("dssl");
+  const [built, setBuilt] = useState<Built | null>(null);
   const [hot, setHot] = useState(false);
-  const [shareNote, setShareNote] = useState("");
+  const [note, setNote] = useState("");
 
   const run = useCallback((src: string) => {
     if (!window.DSSL) return;
     const res = window.DSSL.apply(src, { scope: "#pg-canvas", name: "pg", replace: true });
     setErrors(res.errors);
+    setWarnings(res.warnings ?? []);
     setStats(res.stats);
+    try { setBuilt(window.DSSL.toCSS ? (window.DSSL.toCSS(src, { banner: false }) as Built) : null); } catch { setBuilt(null); }
+  }, []);
+
+  const paintHtml = useCallback((html: string) => {
+    if (!canvasRef.current) return;
+    const r = renderSafeHtml(canvasRef.current, html);
+    if (r.truncated) setNote("The canvas HTML is long, so only the first part is shown.");
+    else if (r.dropped) setNote(`The canvas keeps layout, text and form tags only. ${r.dropped} other tag${r.dropped === 1 ? "" : "s"} or attribute${r.dropped === 1 ? " was" : "s were"} left out.`);
   }, []);
 
-  // wait for the engine, then run the default preset (scoped!)
   useEffect(() => {
     if (window.DSSL) {
       const t = setTimeout(() => setEngineReady(true), 0);
@@ -271,49 +87,68 @@ export default function PlaygroundView() {
     if (!engineReady) return;
     let cancelled = false;
     (async () => {
-      // a link like /playground#s=... carries the whole stylesheet
+      // a link like /playground#s=... carries the whole stylesheet, and the canvas HTML when it was edited
       const packed = shareFromHash(window.location.hash);
       const shared = packed ? await decodeShare(packed) : null;
-      if (cancelled) return;
-      if (shared !== null && editorRef.current) {
-        editorRef.current.value = shared;
-        setShareNote("Loaded from a shared link.");
-        run(shared);
-      } else {
-        run(PRESETS.cards.src);
-        if (packed) setShareNote("That link could not be read, so the default is loaded.");
-      }
+      if (cancelled || !cssRef.current || !htmlRef.current) return;
+      // /playground?example=aura opens one of the examples; a shared link wins over it
+      const wanted = new URLSearchParams(window.location.search).get("example");
+      const ex = shared === null && wanted && PRESETS[wanted] ? wanted : null;
+      if (ex) setPreset(ex);
+      const first = shared !== null ? unpackPayload(shared) : ex ? { css: PRESETS[ex].src, html: PRESETS[ex].html } : { css: PRESETS.cards.src, html: undefined };
+      cssRef.current.value = first.css;
+      htmlRef.current.value = first.html ?? DEFAULT_HTML;
+      paintHtml(htmlRef.current.value);
+      run(first.css);
+      if (shared !== null) setNote("Loaded from a shared link.");
+      else if (packed) setNote("That link could not be read, so the default is loaded.");
     })();
     return () => { cancelled = true; };
-  }, [engineReady, run]);
+  }, [engineReady, run, paintHtml]);
+
+  const currentPayload = () => {
+    const css = cssRef.current?.value ?? "";
+    const html = htmlRef.current?.value ?? DEFAULT_HTML;
+    return packPayload({ css, html: html === DEFAULT_HTML ? undefined : html });
+  };
 
   const copyLink = async () => {
-    if (!editorRef.current) return;
-    const packed = await encodeShare(editorRef.current.value);
+    const packed = await encodeShare(currentPayload());
     const url = `${window.location.origin}${window.location.pathname}#s=${packed}`;
-    if (url.length > MAX_SHARE_URL) { setShareNote("That stylesheet is too long for a link. Copy the text instead."); return; }
+    if (url.length > MAX_SHARE_URL) { setNote("That is too long for a link. Copy the text instead."); return; }
     window.history.replaceState(null, "", `#s=${packed}`);
-    try {
-      await navigator.clipboard.writeText(url);
-      setShareNote("Link copied.");
-    } catch {
-      setShareNote("The link is in the address bar. Copy it from there.");
-    }
+    try { await navigator.clipboard.writeText(url); setNote("Link copied."); }
+    catch { setNote("The link is in the address bar. Copy it from there."); }
+  };
+
+  const copyCss = async () => {
+    if (!built || errors.length) return;
+    try { await navigator.clipboard.writeText(tokensLast(built.css)); setNote("CSS copied."); }
+    catch { setNote("Select the text and copy it."); }
   };
 
-  const onEdit = () => {
+  const onEditCss = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => { if (cssRef.current) run(cssRef.current.value); }, 450);
+  };
+  const onEditHtml = () => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
-      if (editorRef.current) run(editorRef.current.value);
+      if (!htmlRef.current) return;
+      setNote("");
+      paintHtml(htmlRef.current.value);
     }, 450);
   };
 
   const loadPreset = (key: string) => {
     setPreset(key);
-    if (editorRef.current) {
-      editorRef.current.value = PRESETS[key].src;
-      run(PRESETS[key].src);
-    }
+    setNote("");
+    setHot(false);
+    const p = PRESETS[key];
+    if (cssRef.current) cssRef.current.value = p.src;
+    if (htmlRef.current) htmlRef.current.value = p.html ?? DEFAULT_HTML;
+    paintHtml(p.html ?? DEFAULT_HTML);
+    run(p.src);
   };
 
   const toggleHot = () => {
@@ -323,6 +158,8 @@ export default function PlaygroundView() {
   };
 
   const ok = errors.length === 0;
+  const engineOnly = built?.report?.engineKinds ?? [];
+  const shown = ok && built ? tokensLast(built.css) : null;
 
   return (
     <div className="wrap">
@@ -330,7 +167,7 @@ export default function PlaygroundView() {
         <h1 className="page-title">Playground</h1>
         <p className="page-sub">
           Real engine, real errors, zero setup. Your stylesheet is applied{" "}
-          <b>scoped</b> to the canvas, nothing leaks to the rest of the page.
+          <b>scoped</b> to the canvas, and you can change the canvas HTML too.
         </p>
       </div>
 
@@ -338,33 +175,59 @@ export default function PlaygroundView() {
         {/* ------------------------------------ editor */}
         <div className="pg-pane">
           <div className="pg-head">
-            <span>canvas.dssl</span>
+            <div className="pg-tabs" role="tablist" aria-label="Editor files">
+              {([["dssl", "styles.dssl"], ["html", "canvas.html"], ["css", "as CSS"]] as [Tab, string][]).map(([k, label]) => (
+                <button key={k} type="button" role="tab" aria-selected={tab === k} className={`pg-tab${tab === k ? " pg-tab-on" : ""}`} onClick={() => setTab(k)}>{label}</button>
+              ))}
+            </div>
             <div className="pg-head-tools">
-              <select
-                className="pg-select"
-                value={preset}
-                aria-label="Load preset"
-                onChange={(e) => loadPreset(e.target.value)}
-              >
-                {Object.entries(PRESETS).map(([k, p]) => (
-                  <option key={k} value={k}>{p.label}</option>
-                ))}
+              <select className="pg-select" value={preset} aria-label="Load example" onChange={(e) => loadPreset(e.target.value)}>
+                {Object.entries(PRESETS).map(([k, p]) => (<option key={k} value={k}>{p.label}</option>))}
               </select>
               <button type="button" className="doc-btn btn-sm" onClick={copyLink}>Copy link</button>
             </div>
           </div>
-          {shareNote && <div className="pg-note" role="status">{shareNote}</div>}
+          {note && <div className="pg-note" role="status">{note}</div>}
           <textarea
-            ref={editorRef}
+            ref={cssRef}
             className="pg-editor"
+            hidden={tab !== "dssl"}
             defaultValue={PRESETS.cards.src}
-            onInput={onEdit}
+            onInput={onEditCss}
+            onKeyDown={(e) => editorKeys(e, freeTab, onEditCss)}
+            onBlur={() => { freeTab.current = false; }}
             spellCheck={false}
-            aria-label="DSSL source editor"
+            aria-label="DSSL source editor. Press Escape, then Tab, to leave the box."
           />
+          <textarea
+            ref={htmlRef}
+            className="pg-editor"
+            hidden={tab !== "html"}
+            defaultValue={DEFAULT_HTML}
+            onInput={onEditHtml}
+            onKeyDown={(e) => editorKeys(e, freeTab, onEditHtml)}
+            onBlur={() => { freeTab.current = false; }}
+            spellCheck={false}
+            aria-label="Canvas HTML editor. Press Escape, then Tab, to leave the box."
+          />
+          {tab === "css" && (
+            <div className="pg-out-wrap">
+              <div className="pg-out-bar">
+                <span>
+                  {shown !== null
+                    ? engineOnly.length
+                      ? `stays in the engine: ${engineOnly.join(", ")}`
+                      : "everything here is plain CSS"
+                    : "fix the errors to see the CSS"}
+                </span>
+                <button type="button" className="doc-btn btn-sm" onClick={copyCss} disabled={shown === null}>Copy CSS</button>
+              </div>
+              <pre className="pg-out" tabIndex={0} aria-label="The stylesheet as plain CSS">{shown ?? ""}</pre>
+            </div>
+          )}
           <div className={`pg-status ${ok ? "pg-status-ok" : "pg-status-err"}`} role="status">
             {ok
-              ? `ok, ${stats?.rules ?? 0} rules, ${stats?.tokens ?? 0} tokens, ${stats?.motions ?? 0} motions`
+              ? `ok, ${stats?.rules ?? 0} rules, ${stats?.tokens ?? 0} tokens, ${stats?.motions ?? 0} motions${warnings.length ? `, ${warnings.length} warning${warnings.length === 1 ? "" : "s"}` : ""}`
               : `${errors.length} error${errors.length === 1 ? "" : "s"}: fix and keep going`}
           </div>
           {!ok && (
@@ -372,7 +235,17 @@ export default function PlaygroundView() {
               {errors.map((e, i) => (
                 <div key={i} className="pg-error">
                   <span>line {e.line ?? "?"}: {e.message}</span>
-                  {e.hint && <span className="pg-error-hint">did you mean <em>“{e.hint}”</em>?</span>}
+                  {e.hint && <span className="pg-error-hint">did you mean <em>&ldquo;{e.hint}&rdquo;</em>?</span>}
+                </div>
+              ))}
+            </div>
+          )}
+          {warnings.length > 0 && (
+            <div className="pg-warns" aria-live="polite">
+              {warnings.map((w, i) => (
+                <div key={i} className="pg-warn">
+                  <span>{w.line ? `line ${w.line}: ` : ""}{w.message}</span>
+                  {w.hint && <span className="pg-warn-hint">{w.hint}</span>}
                 </div>
               ))}
             </div>
@@ -390,25 +263,12 @@ export default function PlaygroundView() {
                 </button>
               )}
               {(preset === "motion" || preset === "cards") && (
-                <button type="button" className="doc-btn btn-sm" onClick={() => window.DSSL?.replay(".pc-card")}>
-                  replay
-                </button>
+                <button type="button" className="doc-btn btn-sm" onClick={() => window.DSSL?.replay(".pc-card")}>replay</button>
               )}
             </div>
           </div>
           <div className="pg-canvas-wrap">
-            <div className="pg-canvas" id="pg-canvas">
-              <p className="pg-canvas-title">canvas: your dssl styles this</p>
-              <div className="pc-board">
-                {SAMPLE_CARDS.map(c => (
-                  <article className="pc-card" key={c.badge}>
-                    <span className="pc-badge">{c.badge}</span>
-                    <h4 className="pc-title">{c.title}</h4>
-                    <p className="pc-text">{c.text}</p>
-                  </article>
-                ))}
-              </div>
-            </div>
+            <div className="pg-canvas" id="pg-canvas" ref={canvasRef} />
           </div>
         </div>
       </div>

src/lib/playground-presets.ts

@@ -0,0 +1,406 @@
+/* The playground's starting points. Each one is a stylesheet and, when it needs different
+ * markup than the default cards, its own HTML for the canvas. */
+
+export type Preset = { label: string; src: string; html?: string; buttons?: "signal" | "replay" };
+
+export const DEFAULT_HTML = `<p class="pg-canvas-title">canvas: your dssl styles this</p>
+<div class="pc-board">
+  <article class="pc-card"><span class="pc-badge">one</span><h4 class="pc-title">Styled live</h4><p class="pc-text">Everything on the left is applied to this canvas by the DSSL engine, scoped, so the rest of the site is untouched.</p></article>
+  <article class="pc-card"><span class="pc-badge">two</span><h4 class="pc-title">Tokens &amp; states</h4><p class="pc-text">Use color.*, space.*, radius.*, or define your own. Hover states work right here.</p></article>
+  <article class="pc-card"><span class="pc-badge">three</span><h4 class="pc-title">Loud errors</h4><p class="pc-text">Misspell a token and the panel below explains what it thinks you meant.</p></article>
+</div>`;
+
+export const PRESETS: Record<string, Preset> = {
+  cards: {
+    label: "Cards",
+    src: `// style the canvas, bare numbers are px,
+// bare identifiers are tokens
+tokens {
+  color {
+    hotspot: oklch(0.5 0.15 50)
+  }
+}
+
+.pc-board {
+  grid: auto-fill 190
+  gap: space.4
+  width: 100%
+}
+
+.pc-card {
+  background: color.card
+  border: 1 solid color.line
+  radius: md
+  padding: space.4
+  shadow: sm
+  column: gap 8
+  transition: 180
+
+  hover {
+    translate: 0 -4
+    shadow: lg
+    border-color: color.hotspot/45
+
+    .pc-badge {
+      background: color.hotspot
+      color: color.accent-ink
+    }
+  }
+}
+
+.pc-badge {
+  align-self: start
+  font-family: font.mono
+  font-size: 11
+  background: color.accent/12
+  color: color.ink
+  padding: 3 9
+  radius: full
+  transition: 180
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13; line-height: 1.55 }
+
+.pc-btn {
+  padding: 8 14
+  radius: sm
+  background: color.ink
+  color: color.paper
+  font-size: 13
+  font-weight: 600
+
+  hover { translate: 0 -2 }
+  active { translate: 0 0 }
+}`,
+  },
+  tokens: {
+    label: "Tokens",
+    src: `// tokens compile to custom properties on the
+// canvas element, try flipping these
+tokens {
+  color {
+    pop: oklch(0.65 0.19 300)
+    calm: oklch(0.68 0.13 190)
+  }
+  radius { md: 18 }
+}
+
+.pc-board {
+  grid: 3
+  gap: space.4
+}
+
+.pc-card {
+  background: color.card
+  border-top: 4 solid color.pop
+  radius: md
+  padding: space.4
+  column: gap 8
+  shadow: sm
+}
+
+.pc-card:nth-child(2) {
+  border-top-color: color.calm
+}
+
+.pc-card:nth-child(3) {
+  border-top-color: color.pop/55
+}
+
+.pc-badge {
+  background: color.pop/12
+  color: color.ink
+  padding: 3 9
+  radius: full
+  font-family: font.mono
+  font-size: 11
+  align-self: start
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13 }`,
+  },
+  motion: {
+    label: "Motion",
+    src: `// declare once, animate anywhere.
+// reduced-motion users: this all politely
+// does nothing unless marked essential
+motion float {
+  from {
+    opacity: 0
+    translate: 0 18
+    scale: 0.94
+  }
+}
+
+motion shimmer {
+  at 0   { translate: 0 0 }
+  at 50  { translate: 0 -10 }
+  at 100 { translate: 0 0 }
+}
+
+.pc-board {
+  grid: 3
+  gap: space.4
+}
+
+.pc-card {
+  background: color.card
+  border: 1 solid color.line
+  radius: md
+  padding: space.4
+  column: gap 8
+  animate: float 600 snap both
+
+  hover { shadow: lg; translate: 0 -4 }
+}
+
+.pc-card:nth-child(2) { animate: float 600 snap 150 both }
+.pc-card:nth-child(3) { animate: float 600 snap 300 both }
+
+.pc-badge {
+  background: color.accent/12
+  color: color.ink
+  padding: 3 9
+  radius: full
+  font-family: font.mono
+  font-size: 11
+  align-self: start
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13 }
+
+// press "replay" above to re-run the motion`,
+  },
+  signals: {
+    label: "Signals",
+    src: `// press the button in the canvas,
+// DSSL.signal('pgdemo', 'hot') re-styles live
+.pc-board {
+  grid: 3
+  gap: space.4
+}
+
+.pc-card {
+  background: color.card
+  border: 1 solid color.line
+  radius: md
+  padding: space.4
+  column: gap 8
+  transition: 250
+}
+
+@signal pgdemo == hot {
+  .pc-card {
+    background: color.accent
+    border-color: color.accent
+    color: color.accent-ink
+    translate: 0 -3
+    shadow: lg
+
+    .pc-text { color: color.accent-ink/80 }
+    .pc-badge {
+      background: color.accent-ink/20
+      color: color.accent-ink
+    }
+  }
+}
+
+.pc-badge {
+  background: color.accent/12
+  color: color.ink
+  padding: 3 9
+  radius: full
+  font-family: font.mono
+  font-size: 11
+  align-self: start
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13 }`,
+  },
+  errors: {
+    label: "Errors",
+    src: `// this preset fails on purpose,
+// read the panel below the editor
+.pc-card {
+  backgroud: color.card       // typo
+  radius: md
+  padding: space.4
+  colr: color.ink             // typo
+  shadow: color.acnt          // unknown token
+}
+
+.pc-title {
+  font-weight: 700
+  bananify: 12                // unknown property
+}`,
+  },
+  aura: {
+    label: "Aura: fire and ki",
+    src: `// an aura has no presets. You write it, name it with
+// behavior, and use it anywhere. Edit the numbers.
+behavior fire {
+  aura-glow: #ff7a00 36 pulse 900 flicker 0.35
+  aura-particle: #ffe27a -> #ff8a1f -> rgba(255,40,0,0) count 70 size 8 18 life 650 1100 speed 40 120 dir up spread 40 from top gravity -40 turbulence 70 shape flame glowing behind
+}
+
+behavior ki {
+  aura-glow: #ffe14a 50 pulse 700 depth 0.45 flicker 0.15
+  aura-particle: #fff7b0 -> #ffd21f -> rgba(255,180,0,0) count 90 size 4 12 life 500 900 speed 90 220 dir up spread 55 from edge gravity -120 turbulence 120 shape spark glowing behind
+}
+
+behavior electric {
+  aura-glow: #6cf 26 flicker 0.85 pulse 260
+  aura-particle: #d8f1ff -> #4db8ff -> rgba(77,184,255,0) count 36 size 3 7 life 140 320 speed 120 320 dir out spread 360 from edge shape spark glowing
+}
+
+.stage {
+  grid: auto-fit 140
+  gap: 52
+  padding: 60 20 40
+  background: #0b0a12
+  radius: lg
+}
+
+.orb {
+  height: 90
+  radius: lg
+  background: #1c1a28
+  color: #d9d4e6
+  display: grid
+  place-items: center
+  font-size: 14
+}
+
+.fire { use fire }
+.ki { use ki }
+.electric { use electric }`,
+    html: `<div class="stage">
+  <div class="orb fire">fire</div>
+  <div class="orb ki">ki</div>
+  <div class="orb electric">electric</div>
+</div>`,
+  },
+  textures: {
+    label: "Textures",
+    src: `// one word is a texture. Settings go after it, in any order.
+// 30 presets exist; this wall shows a few and a custom one.
+.wall {
+  grid: auto-fill 130
+  gap: 14
+}
+
+.sw {
+  height: 84
+  radius: md
+  background-color: #b8a58a
+  color: #1b1408
+  padding: 8
+  display: grid
+  place-items: end start
+  font-size: 12
+}
+
+.s1 { texture: grain }
+.s2 { texture: marble }
+.s3 { texture: wood }
+.s4 { texture: carbon; color: white }
+.s5 { texture: halftone }
+.s6 { texture: hex }
+
+// your own: pick a generator, then tune it
+.custom {
+  background-color: #1b2a3a
+  texture: noise scale 3 intensity 0.9 contrast 1.5 color #8fd3ff
+}
+
+// stack several with commas
+.stack { texture: grain, scanlines }`,
+    html: `<div class="wall">
+  <div class="sw s1">grain</div>
+  <div class="sw s2">marble</div>
+  <div class="sw s3">wood</div>
+  <div class="sw s4">carbon</div>
+  <div class="sw s5">halftone</div>
+  <div class="sw s6">hex</div>
+  <div class="sw custom">noise, tuned</div>
+  <div class="sw stack">grain, scanlines</div>
+</div>`,
+  },
+  sliders: {
+    label: "Range sliders",
+    src: `// slider: styles the WebKit and Firefox parts from one line.
+// graph makes the track a histogram, particles can come off the thumb.
+.panel {
+  column: gap 30
+  padding: 28 24
+  background: #101018
+  radius: lg
+}
+
+.label { color: #a79eba; font-size: 13; margin: 0 0 6 }
+
+.warm {
+  slider: track 6 #445566 radius full, fill #ff7a00, thumb 22 #ffffff, ring 3 #ff7a00, glow #ff7a00 14, ticks 10 #8890a0
+}
+
+.histo {
+  slider: graph 20 45 70 90 60 35 50 80 95 40 60 75, graph-height 52, graph-gap 3, fill #77ccff, track 3 #34445a, thumb 14 #ffffff, shape bar
+}
+
+.gem {
+  slider: track 10 #2b3040 radius 3, fill #5be2a0, thumb 24 #5be2a0, shape diamond
+  aura-particle: #bfffe0 -> rgba(91,226,160,0) count 40 size 5 life 700 speed 30 70 dir up spread 50 from thumb glowing
+}`,
+    html: `<div class="panel">
+  <div><p class="label">ring, glow and ticks</p><input class="warm" type="range" value="60"></div>
+  <div><p class="label">a histogram</p><input class="histo" type="range" value="40"></div>
+  <div><p class="label">a diamond thumb that sheds particles</p><input class="gem" type="range" value="70"></div>
+</div>`,
+  },
+  glass: {
+    label: "Glass and tilt",
+    src: `// glass: blurs what is behind it. It is plain CSS,
+// so "dssl build" keeps it. tilt: follows the pointer
+// (move your mouse over the panes) and stays in the engine.
+.scene {
+  position: relative
+  overflow: hidden
+  radius: lg
+  padding: 36
+  min-height: 300
+  background: linear-gradient(135deg, #ff7a00, #c2185b 55%, #3949ab)
+  grid: auto-fit 180
+  gap: 20
+}
+
+.blob { position: absolute; radius: full; filter: blur(2px) }
+.b1 { width: 170; height: 170; left: 8%; top: -30; background: #ffe14a }
+.b2 { width: 130; height: 130; right: 10%; bottom: -20; background: #40e0d0 }
+
+.pane {
+  position: relative
+  glass: 18 saturate 1.6
+  tilt: 10 lift 1.04 glare
+  border: 1 solid white/35
+  radius: lg
+  padding: 22
+  color: white
+  min-height: 150
+  background-image: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), white/28, transparent 55%)
+}
+
+.pane h4 { margin: 0 0 6; font-size: 17 }
+.pane p { margin: 0; font-size: 13.5; line-height: 1.6; opacity: 0.9 }`,
+    html: `<div class="scene">
+  <div class="blob b1"></div>
+  <div class="blob b2"></div>
+  <div class="pane"><h4>Frosted</h4><p>glass: 18 saturate 1.6 blurs and lifts the colours behind this pane.</p></div>
+  <div class="pane"><h4>Follows you</h4><p>tilt: 10 lift 1.04 glare turns toward the pointer and lights the spot you are on.</p></div>
+</div>`,
+  },
+};
+

src/lib/sanitize.ts

@@ -0,0 +1,47 @@
+/* A shared playground link carries HTML as well as styles, and anyone can write a link.
+ * So the canvas never receives that text as markup. It is parsed in an inert document and
+ * rebuilt element by element from a short allow-list: layout and text tags, a few form
+ * controls, class names and data attributes. No scripts, no event handlers, no style
+ * attributes, no URLs, no ids (which could collide with the site). */
+
+const TAGS = new Set([
+  "div", "span", "p", "section", "article", "header", "footer", "nav", "main", "aside", "figure", "figcaption",
+  "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "a", "b", "i", "em", "strong", "small", "code", "pre", "kbd", "mark",
+  "blockquote", "hr", "br", "button", "input", "label", "progress", "meter", "table", "thead", "tbody", "tr", "th", "td",
+]);
+const ATTRS = new Set(["class", "title", "value", "min", "max", "step", "checked", "disabled", "placeholder", "aria-label", "aria-hidden", "aria-describedby", "role", "low", "high", "optimum"]);
+const INPUT_TYPES = new Set(["range", "checkbox", "radio", "text", "number", "button"]);
+const MAX_CHARS = 30000;
+const MAX_NODES = 1500;
+
+/** parse `html` and append a safe copy to `target` (any existing children are removed first) */
+export function renderSafeHtml(target: HTMLElement, html: string): { nodes: number; dropped: number; truncated: boolean } {
+  target.replaceChildren();
+  let dropped = 0, nodes = 0, truncated = false;
+  const text = html.length > MAX_CHARS ? ((truncated = true), html.slice(0, MAX_CHARS)) : html;
+  const doc = new DOMParser().parseFromString(text, "text/html");
+  const copy = (src: Node, into: Node) => {
+    for (const n of Array.from(src.childNodes)) {
+      if (nodes >= MAX_NODES) { truncated = true; return; }
+      if (n.nodeType === Node.TEXT_NODE) { into.appendChild(document.createTextNode(n.textContent || "")); continue; }
+      if (n.nodeType !== Node.ELEMENT_NODE) continue;
+      const el = n as Element;
+      const tag = el.tagName.toLowerCase();
+      if (!TAGS.has(tag)) { dropped++; continue; }
+      nodes++;
+      const out = document.createElement(tag);
+      for (const a of Array.from(el.attributes)) {
+        const name = a.name.toLowerCase();
+        if (name === "type" && tag === "input") { if (INPUT_TYPES.has(a.value)) out.setAttribute("type", a.value); else dropped++; continue; }
+        if (name.startsWith("data-") && /^data-[a-z0-9-]{1,40}$/.test(name)) { out.setAttribute(name, a.value.slice(0, 200)); continue; }
+        if (ATTRS.has(name)) { out.setAttribute(name, a.value.slice(0, 400)); continue; }
+        dropped++;
+      }
+      if (tag === "a") out.setAttribute("tabindex", "-1");
+      copy(el, out);
+      into.appendChild(out);
+    }
+  };
+  copy(doc.body, target);
+  return { nodes, dropped, truncated };
+}

src/lib/share.ts

@@ -55,3 +55,19 @@ export function shareFromHash(hash: string): string | null {
 
 /** a browser URL length that every chat app and server will accept */
 export const MAX_SHARE_URL = 8000;
+
+/** what a playground link holds: the styles, and the canvas HTML when it is not the default */
+export type SharePayload = { css: string; html?: string };
+
+/** plain text stays plain text (so old links keep working); anything with HTML is a small JSON object */
+export const packPayload = (p: SharePayload): string => (p.html === undefined ? p.css : JSON.stringify({ v: 1, css: p.css, html: p.html }));
+
+export function unpackPayload(text: string): SharePayload {
+  if (text.startsWith('{"v":1,')) {
+    try {
+      const o = JSON.parse(text);
+      if (o && typeof o.css === "string") return { css: o.css, html: typeof o.html === "string" ? o.html : undefined };
+    } catch { /* it was just a stylesheet that starts oddly */ }
+  }
+  return { css: text };
+}

src/lib/vocab.json

@@ -392,5 +392,49 @@
       "key": "graph-gap",
       "form": "graph-gap <px>"
     }
+  ],
+  "glassWords": [
+    {
+      "key": "blur",
+      "doc": "a number: how many px to blur what is behind the element (default 16)"
+    },
+    {
+      "key": "saturate",
+      "doc": "saturate <n>: colour boost for what shows through, 1 is unchanged (default 1.5)"
+    },
+    {
+      "key": "bright",
+      "doc": "bright <n>: brightness of what shows through, 1 is unchanged"
+    },
+    {
+      "key": "tint",
+      "doc": "tint <color> | tint none: the milky layer on top (default: a faint wash of the text colour)"
+    }
+  ],
+  "tiltWords": [
+    {
+      "key": "max",
+      "doc": "a number: the largest tilt in degrees (default 8)"
+    },
+    {
+      "key": "lift",
+      "doc": "lift <n>: scale while the pointer is over it, e.g. 1.04"
+    },
+    {
+      "key": "perspective",
+      "doc": "perspective <px>: how strong the 3D depth looks (default 900)"
+    },
+    {
+      "key": "speed",
+      "doc": "speed <0.05 to 1>: how quickly it follows (default 0.18)"
+    },
+    {
+      "key": "invert",
+      "doc": "invert: tilt away from the pointer instead of toward it"
+    },
+    {
+      "key": "glare",
+      "doc": "glare: also keep --dssl-gx and --dssl-gy (0% to 100%) pointing at the pointer, for your own highlight"
+    }
   ]
 }

src/types/dssl.d.ts

@@ -23,7 +23,7 @@ interface Window {
     unfreeze: () => unknown;
     explain: (el: Element, opts?: { quiet?: boolean }) => unknown;
     errors: () => DsslError[];
-    toCSS?: (src: string) => { css: string; report: unknown };
+    toCSS?: (src: string, opts?: { banner?: boolean; file?: string }) => { css: string; report: unknown };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     __debug?: any;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any