v0.11.0: real wood textures, textures baked into dssl build, CSS counters, calmer contrast lint, and the Heartwood showcase page

GUIDE.md

@@ -281,7 +281,7 @@ replaced, and taking the texture away puts it back exactly as it was.
 .poster { background: #e9e2d0; texture: paper, scanlines intensity 0.1 }   // a comma stacks layers
 ```
 
-There are 30 presets. They are not magic: each one is a stored combination of a few
+There are 40 presets: 30 general ones and ten wood species (see "Wood" below). They are not magic: each one is a stored combination of a few
 generators (`noise`, `bump`, `lines`, `dots`, `grid`, `checker`, `weave`, `carbon`, `waves`, `hex`) and the settings below, so anything a preset does you
 can write yourself.
 
@@ -362,9 +362,64 @@ A few things worth knowing:
 - `animate 90` makes film-grain shimmer by stepping the texture every 90 ms. It stands still
   for visitors who ask for reduced motion, and `DSSL.freeze()` stops it.
 - Textures are SVG filters and gradients, drawn once and cached. A page full of them is cheap.
-- `texture` is an engine feature, so `dssl build` leaves it in the runtime and says so in its report.
+- `texture` is built by the engine at run time. `dssl build` bakes it into the CSS when it can, and says what it could not.
 - Inside an aura, `texture(grain)` makes the light and the particles grainy. See below.
 
+### Wood
+
+`wood` was one generic grain. The `rings` generator draws real structure: each growth ring is a curve,
+the spacing wobbles, the rings arch into cathedral figure, pores run between them, and planks and
+knots are drawn on top. There are ten presets: `oak`, `walnut`, `cherry`, `maple`, `pine`, `mahogany`,
+`ebony`, `birch`, and two laid as boards, `oak-planks` and `walnut-planks`.
+
+```dssl
+.table  { background-color: #c9a574; texture: oak planks 120 }           // laid as boards 120px tall
+.panel  { texture: walnut figure 0.9 warp 0.7 }                          // more arching, more wobble
+.shelf  { texture: pine knots 3 scale 18 }                               // three knots per tile
+.post   { texture: oak angle 90 }                                        // grain running up and down
+.custom { texture: rings scale 8 color #3a2410 color2 #b98a52 seed 21 }  // your own species
+```
+
+| setting | meaning |
+|---|---|
+| `scale` | ring spacing in px |
+| `color`, `color2` | latewood (the dark ring) and earlywood (the pale body) |
+| `contrast` | how dark the rings are, 1.2 is the default |
+| `figure` | 0 to 1: how strongly the rings arch |
+| `warp` | 0 to 1: how much each ring wobbles |
+| `pores` | 0 to 1: fine fibre streaks between rings |
+| `knots` | 0 to 8 knots in one tile |
+| `planks` | board height in px, with a seam and a different board each |
+| `seed`, `angle` | another board; 0 or 90 degrees |
+
+The drawing uses only your seed and plain arithmetic, so the same seed gives the same board on every
+machine, and the tile repeats without a seam. It does repeat: one tile is 576px along the grain, and
+three boards tall with `planks`, so a very large surface shows the pattern twice. Use two textures with
+different seeds on different elements when that matters.
+
+`dssl build` now **bakes textures into the CSS** as background images when every colour is known at
+build time, which is almost always (tokens count). A rule with `background-color: color.walnut;
+texture: oak` comes out as a real `background` with the image on top. Textures that animate, or use a
+colour that is not known at build time, stay in the runtime, and the build report says which and why.
+The wood showcase (`public/showcase/wood/`) does exactly this: `static.dssl` is built to `wood.css`
+with `node scripts/build-wood.mjs`, and only the tilt, the fire and the slider fills are left for the engine.
+
+### No flash before the engine boots
+
+A page that loads its look through the engine can show unstyled for a moment. Two fixes. Build the
+static part with `dssl build` and link the real CSS, as the wood page does. Or hide the page until the
+engine is ready: the engine adds the class `dssl-ready` to `<html>` when it has applied your sheets.
+
+```html
+<style>html:not(.dssl-ready) body { visibility: hidden }</style>
+<script>setTimeout(() => document.documentElement.classList.add('dssl-ready'), 2500)</script> <!-- failsafe -->
+```
+
+### Counters
+
+`counter-reset`, `counter-increment`, `counter-set`, and `content: counter(step)` or
+`counters(item, ".")` work. The names inside `counter()` are yours, not tokens.
+
 ### Aura
 
 An aura is light and particles around an element. **There are no presets.** Fire, an
@@ -627,14 +682,14 @@ 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.10.0.vsix` from the repo files, then
+2. VS Code: download `dssl-vscode/dssl-vscode-0.11.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`.
 
 What it does: real-compiler diagnostics (same errors the browser prints,
 did-you-mean included), completions folded from your workspace token registry,
 hover docs, and a TextMate grammar for `.dssl`. Since 0.9.0 it also completes and
-explains the new vocabulary: after `texture:` it offers the 30 presets and every
+explains the new vocabulary: after `texture:` it offers the presets and every
 setting, after `aura-glow:` only glow settings, after `aura-particle:` only particle
 ones, after `slider:` the clauses.
 
@@ -647,7 +702,7 @@ from the command palette (or the paint-can button on a `.dssl` tab):
   and remove, a live preview drawn by the same renderer the engine uses (on dark, light or slate),
   a graph of one particle's opacity and size over its life, and a live graph of particles alive and
   frame time.
-- **Texture tab.** All 30 presets and 10 generators as thumbnails, up to four stacked layers, every
+- **Texture tab.** All the presets and 11 generators as thumbnails, up to four stacked layers, every
   setting as a slider, colour pickers, a preview over the colour you choose.
 - **Slider tab.** A live range input styled with the generated rules, with a bar editor for histogram sliders.
 

PARITY.md

@@ -25,7 +25,7 @@ The point of this table is to stop two bad arguments: "DSSL is missing everythin
 | Flexbox / Grid | raw properties pass through + `row:` `column:` `grid:` `stack:` sugar | shipped | shorthands write `display`; the compiler warns when that clobbers an explicit `display:` |
 | `place-items` / alignment | `center: both` | shipped | the engine promotes a formatting context when missing, so alignment cannot silently no-op |
 | Transitions | per-property: `transition: 200 snap transform` | shipped | honors `reduced-motion` |
-| Background patterns and noise | `texture:` (30 presets, 10 generators, your own) | shipped | there is no CSS shorthand for "grain on top of my background"; this one keeps the author's background and removes cleanly. Runtime-only |
+| Background patterns and noise | `texture:` (40 presets including ten wood species, 11 generators, your own) | shipped | there is no CSS shorthand for "grain on top of my background"; this one keeps the author's background and removes cleanly. Runtime-only |
 | Glow, particles, fire | `aura-glow`, `aura-particle`, `glow-particle`, `aura-glow-particle`, `aura:` | shipped | CSS has `box-shadow` and `filter: drop-shadow`, and nothing for particles. No presets by design. Runtime-only |
 | Styling `<input type="range">` | `slider:` writes the `::-webkit-slider-*` and `::-moz-range-*` rules together | shipped | Chrome tested; the Firefox rules are generated but not run yet. Histogram sliders via `graph` |
 | Accessibility hints in the compiler | contrast, removed focus outline, small targets (warnings) | shipped | CSS says nothing; these never fail a build unless you pass `--strict` |
@@ -62,6 +62,25 @@ so the boundary is explicit, not folklore.
 - loud errors with did-you-mean, and a warnings channel for cascade-order footguns
 - `freeze()` / `unfreeze()`: a live engine that can be parked at zero cost
 
+## v0.11.0 (wood): rings, species, planks, baked textures
+
+Written after another AI built a wood site in DSSL and listed what hurt. What came of it:
+
+| Their note | What DSSL does now |
+|---|---|
+| `texture: wood` is one generic grain | `oak`, `walnut`, `cherry`, `maple`, `pine`, `mahogany`, `ebony`, `birch`, plus `oak-planks` and `walnut-planks` |
+| Stretched noise with a contour layer is not wood | the `rings` generator draws growth rings as curves, with `figure`, `warp`, `pores` and `knots` |
+| No way to draw planks | `planks <px>`: boards with seams and a slightly different board each |
+| Seamless tiling, stable seed | integer harmonics and a seeded generator: same seed, same board everywhere; tested for seams |
+| `counter-reset` and `counter()` rejected | they work |
+| Contrast false alarms on translucent backgrounds | judged on the light page, white and black; warns only if it fails on all |
+| Flash of unstyled content | `dssl-ready` class on `<html>`, and `dssl build` for the static part (the wood page does this) |
+| Textures missing from `dssl build` | baked into the CSS when colours are known; the report names the ones that could not be |
+| `@font-face` in `raw {}` | **not done.** A native font loader is still a good idea. |
+| Gradients only cover simple cases | **not done.** Plain CSS gradient strings still pass through, which is what the wood page uses. |
+| Dev-tools inspector for which rule produced a style | **not done.** `DSSL.explain()` is still a console call. |
+| Hot reload | **not done.** |
+
 ## v0.10.0: glass, tilt, and a silent colour bug
 
 | Need | DSSL | Status | Notes |

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.10.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. See `dssl-vscode/PUBLISHING.md` for publishing.
+Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API). In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.11.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
 
@@ -339,7 +339,7 @@ Gradients read like sentences. A stop can be a hex, a color name, a token, an al
 ## Texture
 
 `texture:` lays a generated image on top of an element's own background (a colour, a gradient, or
-several layers) and takes it off again cleanly. Thirty presets, ten generators, and a setting for
+several layers) and takes it off again cleanly. Forty presets (thirty general ones and ten wood species), eleven generators, and a setting for
 everything, so you can make your own:
 
 ```dssl
@@ -523,7 +523,7 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 - pseudo-elements in any spelling (shadow CSS), themed scrollbars included
 - `raw { }` / `@css { }` for verbatim CSS (`@font-face`, `@keyframes`, `@supports`); unknown at-rules skip their whole block with one clean error
 - `fluid 16 24` sizing sugar on any length property, including `padding-top`, `margin-block` and the other longhands
-- `texture:` (30 presets, 10 generators, your own), `aura-glow` / `aura-particle` / `glow-particle` / `aura-glow-particle` / `aura:` (no presets, you build them), `slider:` (WebKit and Firefox in one line)
+- `texture:` (40 presets including ten wood species, 11 generators, your own; `dssl build` bakes them into the CSS), `aura-glow` / `aura-particle` / `glow-particle` / `aura-glow-particle` / `aura:` (no presets, you build them), `slider:` (WebKit and Firefox in one line)
 - `dssl import file.css`, lint warnings (contrast, focus, target size), and the editor designer with live previews
 - one cascade across every stylesheet: a sheet loaded later beats an earlier one (fixed in 0.8.2)
 - the CLI: `dssl check` (CI, --json, --strict) and `dssl build` (real CSS from the static subset, also with --strict)

cli/dssl.mjs

@@ -182,6 +182,8 @@ if (cmd === 'build') {
     console.log(`  ${rep.rules} rule(s), ${rep.shadowRules} pseudo-element rule(s), ${rep.keyframes} @keyframes, ${rep.raws} raw block(s)`);
     if (rep.layers.length) console.log(`  layers: ${rep.layers.join(' < ')}`);
     if (rep.seenStripped) console.log(`  ${rep.seenStripped} seen rule(s) applied unconditionally (the no-JS state)`);
+    if (rep.bakedTextures) console.log(`  ${rep.bakedTextures} texture(s) baked into the CSS as background images`);
+    for (const n of rep.notBaked || []) console.log(`  texture on "${n.sel}" stays in the runtime: ${n.why}`);
     if (rep.skippedSignals || rep.engineDecls) {
       const kinds = rep.engineKinds.length ? ` (${rep.engineKinds.join(', ')})` : '';
       console.log(`  stays in the runtime: ${rep.skippedSignals} @signal rule(s), ${rep.engineDecls} engine-native declaration(s)${kinds}`);

dssl-vscode/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.11.0
+
+- Bundled engine updated to 0.11.0: ten wood species and the `rings` texture generator (figure, warp,
+  pores, knots, planks), textures baked into the CSS by `dssl build`, CSS counters, and a contrast lint
+  that no longer warns about translucent backgrounds it cannot judge. Completions and hover docs know the
+  new settings.
+
 ## 0.10.0
 
 - Bundled engine updated to 0.10.0: new `glass` and `tilt` properties, with completions and hover

dssl-vscode/README.md

@@ -32,7 +32,7 @@ Extension id: **`ehs-studio.dssl-vscode`**. See PUBLISHING.md for the publishing
 - **Hover docs** for the semantic vocabulary (`row:`, `bend:`, `stretch:`, `seen`, `pin`...),
   for tokens (resolved value), for workspace motions and behaviors.
 - **Syntax highlighting** via a TextMate grammar for `.dssl`.
-- **Completions for the new vocabulary.** After `texture:` you get the 30 presets, the generators and
+- **Completions for the new vocabulary.** After `texture:` you get the presets, the generators and
   every setting; after `aura-glow:` only glow settings; after `aura-particle:` only particle settings
   (shapes, where particles are born, directions); after `slider:` the clauses. Hovering a preset or a
   setting explains it.
@@ -40,7 +40,7 @@ Extension id: **`ehs-studio.dssl-vscode`**. See PUBLISHING.md for the publishing
   - *Aura*: a slider or picker for every glow and particle setting, colour stops you can add and
     remove, a live preview drawn by the real renderer, a graph of one particle's opacity and size over
     its life, and a live graph of particles alive and frame time.
-  - *Texture*: all 30 presets and 10 generators as thumbnails, up to four stacked layers, every setting
+  - *Texture*: all the presets and 11 generators as thumbnails, up to four stacked layers, every setting
     as a slider, colour pickers.
   - *Slider*: a live range input with the generated rules, and a bar editor for histogram sliders.
 

dssl-vscode/lib/engine/lint.js

@@ -18,7 +18,7 @@
 import { parseColor, evalColorExpr, over, contrast, toRgba, toHex } from './color.js';
 
 /** one design-token lookup closed over the sheet's token map */
-function makeResolver(tokenMap) {
+export function makeColorResolver(tokenMap) {
   const lookup = (name) => tokenMap.get(name);
   /** CSS value as the resolver emits it ("var(--dssl-color-ink)", "color-mix(...)", "#fff") to a colour */
   return function cssToColor(css, depth = 0) {
@@ -52,7 +52,7 @@ const INTERACTIVE = /^(a|button|input|select|textarea|summary)\b|\[tabindex|\[ro
  */
 export function lintRules({ rules, tokenMap, file }) {
   const warnings = [];
-  const cssToColor = makeResolver(tokenMap);
+  const cssToColor = makeColorResolver(tokenMap);
   const pageBg = (() => { const raw = tokenMap.get('color.paper'); return raw ? evalColorExpr(raw, (n) => tokenMap.get(n)) : null; })();
 
   const killedFocus = [];
@@ -72,10 +72,21 @@ export function lintRules({ rules, tokenMap, file }) {
         let bg = cssToColor(bgD.value);
         let fg = cssToColor(fgD.value);
         if (bg && fg) {
-          if (bg.a < 0.999) bg = pageBg ? over(bg, { ...pageBg, a: 1 }) : null;
-          if (bg) {
-            const fgSolid = fg.a < 0.999 ? over(fg, bg) : fg;
-            const ratio = contrast(fgSolid, bg);
+          // a translucent background takes its look from whatever is behind it, which a single rule cannot know
+          // (a dark theme is usually in a media block, and this check only reads the unconditional rules). So judge
+          // it against the light page colour, white and black, and warn only when it fails on every one of them.
+          const backdrops = bg.a < 0.999 ? [pageBg ? { ...pageBg, a: 1 } : null, { r: 255, g: 255, b: 255, a: 1 }, { r: 0, g: 0, b: 0, a: 1 }].filter(Boolean) : [null];
+          let bestRatio = -1, bestFg = null, bestBg = null;
+          for (const back of backdrops) {
+            const solidBg = back ? over(bg, back) : bg;
+            const solidFg = fg.a < 0.999 ? over(fg, solidBg) : fg;
+            const rr = contrast(solidFg, solidBg);
+            if (rr > bestRatio) { bestRatio = rr; bestFg = solidFg; bestBg = solidBg; }
+          }
+          if (bestBg) {
+            const fgSolid = bestFg;
+            bg = bestBg;
+            const ratio = bestRatio;
             const size = pxOf((lastDecl(r.decls, 'font-size') || {}).value);
             const weightRaw = (lastDecl(r.decls, 'font-weight') || {}).value;
             const weight = weightRaw === 'bold' ? 700 : Number(weightRaw) || 400;

dssl-vscode/lib/engine/resolver.js

@@ -80,7 +80,7 @@ export const UNITLESS_PROPS = new Set([
   'opacity', 'line-height', 'z-index', 'font-weight', 'flex-grow', 'flex-shrink',
   'flex', 'order', 'scale', 'widows', 'orphans', 'column-count', 'aspect-ratio',
   'animation-iteration-count', 'flood-opacity', 'fill-opacity', 'stop-opacity',
-  'shape-image-threshold',
+  'shape-image-threshold', 'counter-reset', 'counter-increment', 'counter-set',
   // grid line placement takes integers, not lengths:  grid-column: span 2
   'grid-row', 'grid-column', 'grid-area',
 ]);
@@ -106,7 +106,7 @@ export const KNOWN_PROPS = new Set(('all,appearance,accent-color,align-content,a
   'border-inline,border-inline-color,border-inline-end,border-inline-end-color,border-inline-end-style,border-inline-end-width,border-inline-start,border-inline-start-color,border-inline-start-style,border-inline-start-width,border-inline-style,border-inline-width,' +
   'border-left,border-left-color,border-left-style,border-left-width,border-radius,border-right,border-right-color,border-right-style,border-right-width,' +
   'border-spacing,border-start-end-radius,border-start-start-radius,border-style,border-top,border-top-color,border-top-left-radius,border-top-right-radius,border-top-style,border-top-width,border-width,' +
-  'bottom,box-decoration-break,box-shadow,box-sizing,break-after,break-before,break-inside,caret-color,caret-shape,clear,clip,clip-path,color,color-scheme,column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns,contain,contain-intrinsic-size,container,container-name,container-type,content,content-visibility,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,fill,fill-rule,fill-opacity,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-opacity,stroke-width,font,font-family,font-feature-settings,font-kerning,font-language-override,font-optical-sizing,font-palette,font-size,font-size-adjust,font-stretch,font-style,font-synthesis,font-variant,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-variation-settings,font-weight,forced-color-adjust,gap,grid,grid-area,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column,grid-column-end,grid-column-gap,grid-column-start,grid-gap,grid-row,grid-row-end,grid-row-gap,grid-row-start,grid-template,grid-template-areas,grid-template-columns,grid-template-rows,' +
+  'bottom,counter-reset,counter-increment,counter-set,box-decoration-break,box-shadow,box-sizing,break-after,break-before,break-inside,caret-color,caret-shape,clear,clip,clip-path,color,color-scheme,column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns,contain,contain-intrinsic-size,container,container-name,container-type,content,content-visibility,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,fill,fill-rule,fill-opacity,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-opacity,stroke-width,font,font-family,font-feature-settings,font-kerning,font-language-override,font-optical-sizing,font-palette,font-size,font-size-adjust,font-stretch,font-style,font-synthesis,font-variant,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-variation-settings,font-weight,forced-color-adjust,gap,grid,grid-area,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column,grid-column-end,grid-column-gap,grid-column-start,grid-gap,grid-row,grid-row-end,grid-row-gap,grid-row-start,grid-template,grid-template-areas,grid-template-columns,grid-template-rows,' +
   'hanging-punctuation,height,hyphenate-character,hyphenate-limit-chars,hyphens,image-orientation,image-rendering,inline-size,inset,inset-block,inset-block-end,inset-block-start,inset-inline,inset-inline-end,inset-inline-start,isolation,justify-content,justify-items,justify-self,justify-tracks,left,letter-spacing,line-break,line-height,list-style,list-style-image,list-style-position,list-style-type,margin,margin-block,margin-block-end,margin-block-start,margin-bottom,margin-inline,margin-inline-end,margin-inline-start,margin-left,margin-right,margin-top,margin-trim,mask,mask-border,mask-border-mode,mask-border-outset,mask-border-repeat,mask-border-slice,mask-border-source,mask-border-width,mask-clip,mask-composite,mask-image,mask-mode,mask-origin,mask-position,mask-repeat,mask-size,max-height,max-inline-size,max-width,min-block-size,min-height,min-inline-size,min-width,mix-blend-mode,object-fit,object-position,offset,offset-anchor,offset-distance,offset-path,offset-rotate,opacity,order,outline,outline-color,outline-offset,outline-style,outline-width,overflow,overflow-anchor,overflow-clip-margin,overflow-wrap,overflow-x,overflow-y,overscroll-behavior,overscroll-behavior-block,overscroll-behavior-inline,overscroll-behavior-x,overscroll-behavior-y,padding,padding-block,padding-block-end,padding-block-start,padding-bottom,padding-inline,padding-inline-end,padding-inline-start,padding-left,padding-right,padding-top,page-break-after,page-break-before,page-break-inside,paint-order,perspective,perspective-origin,place-content,place-items,place-self,pointer-events,position,print-color-adjust,quotes,resize,right,rotate,row-gap,ruby-align,ruby-merge,scale,scroll-behavior,scroll-margin,scroll-margin-block,scroll-margin-block-end,scroll-margin-block-start,scroll-margin-bottom,scroll-margin-inline,scroll-margin-inline-end,scroll-margin-inline-start,scroll-margin-left,scroll-margin-right,scroll-margin-top,scroll-padding,scroll-padding-block,scroll-padding-bottom,scroll-padding-inline,scroll-padding-left,scroll-padding-right,scroll-padding-top,scroll-snap-align,scroll-snap-stop,scroll-snap-type,scrollbar-color,scrollbar-gutter,scrollbar-width,shape-image-threshold,shape-margin,shape-outside,tab-size,table-layout,text-align,text-align-last,text-combine-upright,text-decoration,text-decoration-color,text-decoration-line,text-decoration-skip-ink,text-decoration-style,text-decoration-thickness,text-emphasis,text-emphasis-color,text-emphasis-position,text-emphasis-style,text-indent,text-justify,text-orientation,text-overflow,text-rendering,text-shadow,text-transform,text-underline-offset,text-underline-position,text-wrap,top,touch-action,transform,transform-box,transform-origin,transform-style,transition,transition-behavior,transition-delay,transition-duration,transition-property,transition-timing-function,translate,unicode-bidi,user-select,vertical-align,visibility,white-space,white-space-collapse,width,will-change,word-break,word-spacing,word-wrap,writing-mode,z-index,zoom,' +
   'animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-range,animation-timeline,animation-timing-function,' +
   'view-transition-name,interpolate-size,text-box,text-box-edge,text-box-trim,dynamic-range-limit,field-sizing,anchor-name,position-anchor,position-area,scroll-timeline,scroll-timeline-axis,scroll-timeline-name,timeline-scope,view-timeline,view-timeline-axis,view-timeline-name,' +
@@ -268,7 +268,9 @@ function resolveValue(raw, ctx) {
         }
         // color-ish functions keep bare numbers bare; calc-family gets px
         const innerUnitless = UNITLESS_FN.has(fname) ? true : LENGTH_FN.has(fname) ? false : ctx.unitless;
-        const resolvedInner = resolveValue(inner, { ...ctx, unitless: innerUnitless });
+        // counter(step), counters(step, "."), attr(data-x): the names inside are the author's own, not tokens
+        const nameFn = fname === 'counter' || fname === 'counters' || fname === 'attr';
+        const resolvedInner = resolveValue(inner, { ...ctx, unitless: innerUnitless, bareIdents: nameFn ? true : ctx.bareIdents });
         out += ident + '(' + resolvedInner + ')';
         i = j;
         continue;
@@ -1136,7 +1138,7 @@ function resolveDecl(prop, value, ctx) {
     });
     return [];
   }
-  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
+  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' || prop.startsWith('counter-') }) }];
 }
 
 /** string-aware !important scan - quoted content: "!important" must not trip it */

dssl-vscode/lib/engine/texture.js

@@ -28,7 +28,7 @@ const mix2 = (x, y, t) => mix(x, y, t, 'srgb');
 
 export const BLEND_MODES = ['normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-burn', 'color-dodge', 'darken', 'lighten', 'difference', 'exclusion'];
 
-export const GENERATORS = ['noise', 'bump', 'lines', 'dots', 'grid', 'checker', 'weave', 'carbon', 'waves', 'hex'];
+export const GENERATORS = ['noise', 'bump', 'lines', 'dots', 'grid', 'checker', 'weave', 'carbon', 'waves', 'hex', 'rings'];
 
 /** the settings a texture layer understands, with how many value words each takes */
 export const TEXTURE_KEYS = {
@@ -51,6 +51,11 @@ export const TEXTURE_KEYS = {
   blend:     { words: 1, kind: 'word', values: BLEND_MODES, doc: 'how the layer mixes with what is under it' },
   color:     { words: 1, kind: 'color', doc: 'the main colour (dark end of noise, ink of lines and dots)' },
   color2:    { words: 1, kind: 'color', doc: 'the second colour (light end of noise, background cell of patterns)' },
+  figure:    { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: how strongly the growth rings arch into a cathedral figure, 0 is straight grain' },
+  warp:      { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: how much each ring wobbles along its length' },
+  pores:     { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: fine fibre and pore streaks between the rings' },
+  knots:     { words: 1, kind: 'number', min: 0, max: 8, int: true, doc: 'rings generator: how many knots in one tile (the pattern repeats, so keep it small)' },
+  planks:    { words: 1, kind: 'number', min: 24, max: 1200, doc: 'rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each' },
   invert:    { words: 0, kind: 'flag', doc: 'swap the two colours' },
 };
 
@@ -100,6 +105,26 @@ export const PRESETS = {
     ] },
   wood:       { doc: 'long wood grain, along x (use angle 90 for vertical)',
     layers: [{ gen: 'noise', scale: 4, octaves: 3, contrast: 1.8, stretch: [40, 1], intensity: 1, color: '#7a4b24', color2: '#c99a62', blend: 'multiply' }] },
+  oak:        { doc: 'oak: open grain, tan with brown rings',
+    layers: [{ gen: 'rings', scale: 11, color: '#8a5f33', color2: '#c9a574', contrast: 1.3, figure: 0.55, warp: 0.45, pores: 0.5, seed: 3, blend: 'normal' }] },
+  walnut:     { doc: 'walnut: dark chocolate with black-brown rings',
+    layers: [{ gen: 'rings', scale: 9, color: '#2b1a10', color2: '#6a4631', contrast: 1.2, figure: 0.5, warp: 0.55, pores: 0.45, seed: 8, blend: 'normal' }] },
+  cherry:     { doc: 'cherry: warm red-brown with fine rings',
+    layers: [{ gen: 'rings', scale: 8, color: '#7a3a1c', color2: '#bb7443', contrast: 1.1, figure: 0.4, warp: 0.35, pores: 0.35, seed: 5, blend: 'normal' }] },
+  maple:      { doc: 'maple: pale, tight, nearly plain grain',
+    layers: [{ gen: 'rings', scale: 13, color: '#c79a5a', color2: '#ecd6ab', contrast: 0.8, figure: 0.25, warp: 0.3, pores: 0.25, seed: 11, blend: 'normal' }] },
+  pine:       { doc: 'pine: light yellow wood with wide rings and knots',
+    layers: [{ gen: 'rings', scale: 16, color: '#b5742f', color2: '#e6c081', contrast: 1.4, figure: 0.65, warp: 0.5, pores: 0.4, knots: 2, seed: 14, blend: 'normal' }] },
+  mahogany:   { doc: 'mahogany: deep red-brown, straight grain',
+    layers: [{ gen: 'rings', scale: 10, color: '#4a2012', color2: '#8c4727', contrast: 1.1, figure: 0.3, warp: 0.3, pores: 0.4, seed: 6, blend: 'normal' }] },
+  ebony:      { doc: 'ebony: nearly black with faint streaks',
+    layers: [{ gen: 'rings', scale: 12, color: '#0c0908', color2: '#2d2621', contrast: 0.7, figure: 0.2, warp: 0.25, pores: 0.3, seed: 2, blend: 'normal' }] },
+  birch:      { doc: 'birch: creamy pale wood with fine rings',
+    layers: [{ gen: 'rings', scale: 10, color: '#d2ae74', color2: '#f0dfb9', contrast: 0.9, figure: 0.3, warp: 0.35, pores: 0.25, seed: 9, blend: 'normal' }] },
+  'oak-planks': { doc: 'oak laid as planks, with seams',
+    layers: [{ gen: 'rings', scale: 11, color: '#8a5f33', color2: '#c9a574', contrast: 1.3, figure: 0.55, warp: 0.45, pores: 0.5, planks: 110, seed: 3, blend: 'normal' }] },
+  'walnut-planks': { doc: 'walnut laid as planks, with seams',
+    layers: [{ gen: 'rings', scale: 9, color: '#2b1a10', color2: '#6a4631', contrast: 1.2, figure: 0.5, warp: 0.55, pores: 0.45, planks: 96, seed: 8, blend: 'normal' }] },
   bark:       { doc: 'rough vertical bark',
     layers: [{ gen: 'bump', scale: 10, octaves: 4, depth: 5, stretch: [1, 6], light: 150, intensity: 0.8, color: '#000', color2: '#fff', blend: 'overlay' }] },
   leather:    { doc: 'pebbled leather',
@@ -164,6 +189,7 @@ const GEN_DEFAULTS = {
   carbon:  { scale: 20, intensity: 1, color: '#151515', color2: '#262626', blend: 'normal' },
   waves:   { scale: 40, thickness: 1.2, intensity: 0.3, color: '#000', blend: 'normal' },
   hex:     { scale: 28, thickness: 1, intensity: 0.28, color: '#000', blend: 'normal' },
+  rings:   { scale: 10, color: '#7a4b24', color2: '#d1a770', contrast: 1.2, figure: 0.5, warp: 0.4, pores: 0.4, intensity: 1, blend: 'normal' },
 };
 
 /* ------------------------------------------------------------------ *
@@ -452,7 +478,134 @@ function buildHex(spec, rc) {
   return [{ image: svgUrl(svg), size: `${f(W)}px ${f(100 * k)}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: W }];
 }
 
-const BUILDERS = { noise: buildNoise, bump: buildBump, lines: buildLines, dots: buildDots, grid: buildGrid, checker: buildChecker, weave: buildWeave, carbon: buildCarbon, waves: buildWaves, hex: buildHex };
+
+/* ------------------------------------------------------------------ *
+ * rings: growth rings, drawn as vector curves
+ *
+ * A board is a log sliced, and the rings you see are where the slice crosses
+ * the growth layers. So this does not stretch noise: it draws each ring as a
+ * curve. The spacing wobbles, the curves arch (cathedral figure) because the
+ * slice cuts the layers at a slant, there are pores between them, and planks
+ * and knots are drawn on top. Everything comes from a seeded generator and
+ * integer harmonics, so the same seed gives the same board on every machine
+ * and the tile has no visible seam.
+ * ------------------------------------------------------------------ */
+
+const TAU = Math.PI * 2;
+const r1 = (n) => String(Math.round(n * 10) / 10);
+const smallUrl = (svg) => `url("data:image/svg+xml,${svg.replace(/[%#<>"]/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase())}")`;
+
+/** a smooth path through [x, y] samples (Catmull-Rom as cubic Beziers, ends clamped) */
+function smoothPath(pts) {
+  const n = pts.length;
+  const at = (i) => pts[Math.max(0, Math.min(n - 1, i))];
+  let d = `M${r1(pts[0][0])} ${r1(pts[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = at(i - 1), p1 = at(i), p2 = at(i + 1), p3 = at(i + 2);
+    const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += `C${r1(c1x)} ${r1(c1y)} ${r1(c2x)} ${r1(c2y)} ${r1(p2[0])} ${r1(p2[1])}`;
+  }
+  return d;
+}
+
+function buildRings(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const late = a, early = b || a;
+  const P = Math.max(3, spec.scale || 10);
+  const W = 576;                                    // one tile along the grain; every harmonic below divides it
+  const fig = spec.figure === undefined ? 0.5 : spec.figure;
+  const warp = spec.warp === undefined ? 0.4 : spec.warp;
+  const pores = spec.pores === undefined ? 0.4 : spec.pores;
+  const contrast = spec.contrast === undefined ? 1.2 : spec.contrast;
+  const seed = spec.seed || 0;
+  const planked = !!spec.planks;
+  const plankH = planked ? Math.max(P * 3, spec.planks) : 0;
+  const plankN = planked ? 3 : 1;
+  const H = planked ? plankH * plankN : P * Math.max(12, Math.round(260 / P));
+  const rgba = (c, alpha) => toRgba(withAlpha(c, n01((alpha === undefined ? 1 : alpha) * c.a)));
+  const STEP = 48;
+
+  let defs = '', body = '';
+  let id = 0;
+  for (let pi = 0; pi < plankN; pi++) {
+    const rand = rng(seed * 7919 + pi * 104729 + 13);
+    const h = planked ? plankH : H;
+    const n = Math.max(3, Math.round(h / P));
+    const Pe = h / n;
+    const ph = [rand() * TAU, rand() * TAU, rand() * TAU];
+    const x0 = rand() * W;
+    const m = 2 + Math.floor(rand() * 3), spacingAmp = 0.12 + rand() * 0.22;
+    const flip = planked && rand() < 0.5;
+    const curve = (kf, x) => {
+      const t = kf / n;
+      // a free board arches from one face to the other; a seamless tile must repeat every n rings, so its envelope has period n
+      const per = Math.pow(Math.sin(Math.PI * t), 2);
+      const env = planked ? Math.pow(Math.max(0, Math.min(1, flip ? 1 - t : t)), 1.4) : per;
+      const env2 = planked ? 0.6 + 0.4 * Math.abs(Math.sin(Math.PI * t)) : per;
+      const bump = Math.pow((1 + Math.cos(TAU * (x - x0) / W)) / 2, 1.3);
+      const arch = fig * 0.3 * h * env * bump;
+      const wob = warp * P * 0.6 * env2 * (0.5 * Math.sin(TAU * x / W + ph[0] + TAU * kf / n) + 0.3 * Math.sin(TAU * 3 * x / W + ph[1] + TAU * 2 * kf / n) + 0.2 * Math.sin(TAU * 7 * x / W + ph[2] + TAU * 3 * kf / n));
+      const u = kf + spacingAmp * Math.sin(TAU * m * kf / n);
+      return u * Pe + arch + wob;
+    };
+    // sampled past both ends of the tile, so the stroke is continuous across the join and the viewport clips it
+    const ringPath = (kf) => { const pts = []; for (let x = -2 * STEP; x <= W + 2 * STEP; x += STEP) pts.push([x, curve(kf, x)]); return smoothPath(pts); };
+    const jit = Array.from({ length: n }, () => [rand(), rand()]);
+
+    const lo = planked ? -2 : -1, hi = planked ? n + 2 : n;
+    let g = '';
+    for (let k = lo; k <= hi; k++) {
+      const [jitter, jop] = jit[((k % n) + n) % n];   // ring k and ring k + n look alike, so the tile repeats cleanly
+      const w = Pe * (0.14 + jitter * 0.26);
+      const op = n01((0.4 + jop * 0.55) * Math.min(1.4, contrast / 1.2));
+      const rid = 'r' + id++;
+      defs += `<path id='${rid}' d='${ringPath(k + 0.8)}' fill='none'/>`;
+      g += `<use href='#${rid}' stroke='${rgba(late, op * 0.28)}' stroke-width='${r1(w * 2.6)}'/><use href='#${rid}' stroke='${rgba(late, op)}' stroke-width='${r1(w)}'/>`;
+    }
+    // knots: elongated along the grain, with rings around them
+    const knotN = spec.knots ? Math.max(0, Math.round(spec.knots / plankN + (pi === 0 ? 0.49 : 0))) : 0;
+    let knots = '';
+    for (let q = 0; q < knotN; q++) {
+      const kx = 90 + rand() * (W - 180), ky = h * (0.25 + rand() * 0.5), rx = 9 + rand() * 12, ry = rx * 0.6;
+      knots += `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx * 4)}' ry='${r1(ry * 3.4)}' fill='${rgba(late, 0.1)}'/>` +
+        `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx * 2.4)}' ry='${r1(ry * 2.3)}' fill='none' stroke='${rgba(late, 0.35)}' stroke-width='1.2'/>` +
+        `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx * 1.6)}' ry='${r1(ry * 1.6)}' fill='none' stroke='${rgba(late, 0.5)}' stroke-width='1.4'/>` +
+        `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx)}' ry='${r1(ry)}' fill='${rgba(late, 0.85)}'/>`;
+    }
+    const tone = (rand() - 0.5) * 0.14;
+    const toneRect = tone > 0 ? `<rect width='${W}' height='${r1(h)}' fill='rgba(255,255,255,${r1(Math.abs(tone) * 10) / 10})'/>` : `<rect width='${W}' height='${r1(h)}' fill='rgba(0,0,0,${r1(Math.abs(tone) * 10) / 10})'/>`;
+    const clip = `c${pi}`;
+    defs += `<clipPath id='${clip}'><rect width='${W}' height='${r1(h)}'/></clipPath>`;
+    body += `<g transform='translate(0 ${r1(pi * plankH)})' clip-path='url(#${clip})'>` +
+      `<rect width='${W}' height='${r1(h)}' fill='${rgba(early)}'/>` + (planked ? toneRect : '') + `<g fill='none'>${g}</g>${knots}</g>`;
+  }
+
+  // fine fibres: streaks stretched along the grain, drawn once over everything
+  const fibre = pores > 0
+    ? `<filter id='p' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'>` +
+      `<feTurbulence type='fractalNoise' baseFrequency='0.014 0.62' numOctaves='3' seed='${seed + 3}' stitchTiles='stitch'/>` +
+      `<feColorMatrix type='matrix' values='0 0 0 0 ${f(late.r / 255)} 0 0 0 0 ${f(late.g / 255)} 0 0 0 0 ${f(late.b / 255)} ${f(pores * 4.2)} 0 0 0 ${f(-pores * 1.95)}'/></filter>` +
+      `<rect width='${W}' height='${H}' filter='url(#p)' opacity='${f(Math.min(1, 0.55 * late.a))}'/>`
+    : '';
+
+  let seams = '';
+  if (planked) {
+    for (let pi = 0; pi < plankN; pi++) {
+      const y = pi * plankH;
+      seams += `<rect y='${r1(y)}' width='${W}' height='1.6' fill='rgba(0,0,0,0.5)'/><rect y='${r1(y + 1.6)}' width='${W}' height='1' fill='rgba(255,255,255,0.1)'/>`;
+    }
+  }
+
+  const rot = spec.angle === 90 || spec.angle === -90 || spec.angle === 270;
+  const inner = `<defs>${defs}</defs>${body}${fibre}${seams}`;
+  const svg = rot
+    ? `<svg xmlns='http://www.w3.org/2000/svg' width='${H}' height='${W}'><g transform='matrix(0 1 1 0 0 0)'>${inner}</g></svg>`
+    : `<svg xmlns='http://www.w3.org/2000/svg' width='${W}' height='${H}'>${inner}</svg>`;
+  return [{ image: smallUrl(svg), size: rot ? `${H}px ${W}px` : `${W}px ${H}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: Math.max(W, H) }];
+}
+
+const BUILDERS = { rings: buildRings, noise: buildNoise, bump: buildBump, lines: buildLines, dots: buildDots, grid: buildGrid, checker: buildChecker, weave: buildWeave, carbon: buildCarbon, waves: buildWaves, hex: buildHex };
 
 /**
  * Turn parsed layers into the CSS lists for background-image, -size, -repeat,
@@ -477,6 +630,59 @@ export function buildTexture(layers, rc) {
   };
 }
 
+
+/* ------------------------------------------------------------------ *
+ * composing with the element's own background (shared by the engine and `dssl build`)
+ * ------------------------------------------------------------------ */
+
+export function splitBgList(value) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of String(value)) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+/** a list of exactly n entries: the author's, cycled the way CSS cycles them, or the default */
+function expandList(value, n, dflt) {
+  const items = value ? splitBgList(value) : [];
+  if (!items.length) return Array.from({ length: n }, () => dflt);
+  return Array.from({ length: n }, (_, i) => items[i % items.length]);
+}
+
+
+/**
+ * texture sits ON TOP of whatever background the author wrote: the shorthand, the longhands,
+ * or just a colour. `owned` is a Map of prop -> { value, imp }; this edits it in place.
+ */
+export function composeTextureInto(owned, tex) {
+  const sh = owned.get('background');
+  const img = owned.get('background-image');
+  const blendUser = owned.get('background-blend-mode');
+  const texBlends = tex.blend.split(', ');
+  if (sh) {
+    // the author wrote the shorthand: texture layers go first, their value stays the last layer(s)
+    const userLayers = splitBgList(sh.value).length;
+    const texShort = tex.parts.map((p) => `${p.image} ${p.position} / ${p.size} ${p.repeat}`).join(', ');
+    owned.set('background', { value: `${texShort}, ${sh.value}`, imp: sh.imp });
+    owned.delete('background-image');
+    owned.set('background-blend-mode', { value: [...texBlends, ...expandList(blendUser && blendUser.value, userLayers, 'normal')].join(', '), imp: sh.imp });
+    return;
+  }
+  const userLayers = img ? splitBgList(img.value).length : 0;
+  const imp = img ? img.imp : '';
+  const get = (name) => (owned.get(name) || {}).value;
+  const join = (texList, name, dflt) => [...texList.split(/,(?![^(]*\))/).map((x) => x.trim()), ...(userLayers ? expandList(get(name), userLayers, dflt) : [])].join(', ');
+  owned.set('background-image', { value: tex.image + (img ? ', ' + img.value : ''), imp });
+  owned.set('background-size', { value: join(tex.size, 'background-size', 'auto'), imp });
+  owned.set('background-position', { value: join(tex.position, 'background-position', '0% 0%'), imp });
+  owned.set('background-repeat', { value: join(tex.repeat, 'background-repeat', 'repeat'), imp });
+  owned.set('background-blend-mode', { value: [...texBlends, ...(userLayers ? expandList(get('background-blend-mode'), userLayers, 'normal') : [])].join(', '), imp });
+}
+
 /* ------------------------------------------------------------------ *
  * deterministic value noise, for aura masks and tests
  * ------------------------------------------------------------------ */

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

llms.txt

@@ -50,7 +50,7 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 ```
 
 ## 0.9.0: texture, aura, sliders, lint, import
-- `texture: grain` layers a generated image ON TOP of an element's own background (colour, gradient or several layers). 30 presets (grain, noise, rough, sand, paper, cloud, concrete, stone, crumpled, glitter, frost, marble, wood, bark, leather, brushed, canvas, linen, denim, carbon, scanlines, halftone, dots, lines, grid, checker, crosshatch, stripes, waves, hex) and 10 generators (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex) with settings: scale, intensity, contrast, threshold, octaves, seed, stretch x y, depth, light, angle, thickness, radius, softness, contour, animate, type, blend, color, color2, invert. Comma stacks layers. Runtime-only (`dssl build` leaves it in and reports it).
+- `texture: grain` layers a generated image ON TOP of an element's own background (colour, gradient or several layers). 40 presets (30 general: grain, noise, rough, sand, paper, cloud, concrete, stone, crumpled, glitter, frost, marble, wood, bark, leather, brushed, canvas, linen, denim, carbon, scanlines, halftone, dots, lines, grid, checker, crosshatch, stripes, waves, hex) and 11 generators (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex, rings) with settings: scale, figure, warp, pores, knots, planks, intensity, contrast, threshold, octaves, seed, stretch x y, depth, light, angle, thickness, radius, softness, contour, animate, type, blend, color, color2, invert. Comma stacks layers. Built at run time, and baked into the CSS by `dssl build` when its colours are known (0.11.0).
 - Aura has NO presets. `aura-glow: <color> <radius> [intensity|pulse|depth|flicker|texture(...)|seed|essential]`, `aura-particle: <color -> color ...> <count> [size|life|speed|dir|spread|gravity|drag|turbulence|from|shape|grow|glowing|behind|blend|texture(...)|seed|essential]`, `glow-particle` (particles that glow), `aura-glow-particle` (both slots), `aura: glow ..., particles ...` (replaces both; `aura: none` clears both, `aura-glow: none` only the glow). Name your own with `behavior fire { ... }` then `use fire`. One canvas over the page, 1800 particle budget, still glow under reduced motion, runtime-only.
 - `slider: track 6 color.line radius full, fill color.accent, thumb 24 color.paper, ring 3 color.accent, glow color.accent 14, ticks 10, graph 20 45 70` writes the ::-webkit-slider-* and ::-moz-range-* rules together for `input[type=range]`. The engine keeps `--dssl-p` (value 0..1) on the input. Firefox rules are generated but untested.
 - Lint warnings (never errors; `dssl check --strict` makes them fatal): text contrast under 4.5:1 (3:1 for large text), a removed focus outline with no focus-visible replacement, tap targets under 24px.
@@ -63,6 +63,14 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 - Alpha on a named colour works: `white/12`, `currentColor/20`. It used to compile to `white/12px`.
 - The playground has a canvas.html tab, `?example=` links, lint warnings and an "as CSS" tab. The canvas keeps a short allow-list of tags and drops scripts, handlers, styles and ids.
 
+## 0.11.0: wood and the build
+- Ten wood species presets: oak, walnut, cherry, maple, pine, mahogany, ebony, birch, oak-planks, walnut-planks. The `rings` generator draws growth rings as vector curves (not stretched noise): `texture: oak figure 0.8 knots 2 planks 120`. Settings: scale (ring spacing), color (latewood), color2 (earlywood), contrast, figure (cathedral arching), warp, pores, knots, planks (board height px), seed, angle 0 or 90. Same seed, same board everywhere; the tile repeats without a seam.
+- `dssl build` now BAKES textures into the CSS as background images when every colour is known at build time. Animated textures and unknown colours stay in the runtime, and the report says why.
+- `counter-reset`, `counter-increment`, `counter-set` and `content: counter(name)` / `counters(name, ".")` work.
+- The contrast lint no longer cries wolf on translucent backgrounds: it warns only when the pair fails on the light page colour, white and black.
+- A page can hide itself until styled: `<style>html:not(.dssl-ready) body{visibility:hidden}</style>`; the engine adds `dssl-ready` to `<html>`.
+- Showcase: /showcase/wood/ is a whole page (Heartwood) built with these.
+
 ## CLI (v0.8.0)
 
 ```sh
@@ -76,4 +84,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.10.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.11.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

next.config.ts

@@ -2,6 +2,10 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   reactStrictMode: false,
+  // the wood showcase is a plain static page that lives in public/
+  async rewrites() {
+    return [{ source: "/showcase/wood", destination: "/showcase/wood/index.html" }];
+  },
 };
 
 export default nextConfig;

package.json

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

public/dssl/engine.js

@@ -21,7 +21,7 @@
 
 import { composeDeform, arcLayout } from './utils.js';
 // 0.9.0: texture layers, aura (light and particles) and the range-slider helper
-import { buildTexture } from './texture.js';
+import { buildTexture, composeTextureInto, splitBgList as splitList } from './texture.js';
 import { AuraManager, resolveLayer } from './aura.js';
 import { parseColor } from './color.js';
 import { tiltTransform } from './effects.js';
@@ -142,24 +142,6 @@ function parseSizeQuery(q) {
 }
 
 /** split a CSS list at top-level commas, so rgba(1,2,3) and var(--x, 4) stay whole */
-function splitList(value) {
-  const out = []; let depth = 0, cur = '';
-  for (const ch of String(value)) {
-    if (ch === '(') depth++;
-    if (ch === ')') depth--;
-    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
-    cur += ch;
-  }
-  if (cur.trim()) out.push(cur.trim());
-  return out;
-}
-/** a list of exactly n entries: the author's, cycled the way CSS cycles them, or the default */
-function expandList(value, n, dflt) {
-  const items = value ? splitList(value) : [];
-  if (!items.length) return Array.from({ length: n }, () => dflt);
-  return Array.from({ length: n }, (_, i) => items[i % items.length]);
-}
-
 export class DsslEngine {
   constructor({ scope = null, name = 'global', reset = false } = {}) {
     this.name = name;
@@ -258,28 +240,7 @@ export class DsslEngine {
       this._texCache.set(key, tex);
     }
     if (!tex.count) return null;
-    const sh = owned.get('background');
-    const img = owned.get('background-image');
-    const blendUser = owned.get('background-blend-mode');
-    const texBlends = tex.blend.split(', ');
-    if (sh) {
-      // the author wrote the shorthand: texture layers go first, their value stays the last layer(s)
-      const userLayers = splitList(sh.value).length;
-      const texShort = tex.parts.map((p) => `${p.image} ${p.position} / ${p.size} ${p.repeat}`).join(', ');
-      owned.set('background', { value: `${texShort}, ${sh.value}`, imp: sh.imp });
-      owned.delete('background-image');
-      owned.set('background-blend-mode', { value: [...texBlends, ...expandList(blendUser && blendUser.value, userLayers, 'normal')].join(', '), imp: sh.imp });
-      return tex;
-    }
-    const userLayers = img ? splitList(img.value).length : 0;
-    const imp = img ? img.imp : '';
-    const get = (name) => (owned.get(name) || {}).value;
-    const join = (texList, name, dflt) => [...texList.split(/,(?![^(]*\))/).map((x) => x.trim()), ...(userLayers ? expandList(get(name), userLayers, dflt) : [])].join(', ');
-    owned.set('background-image', { value: tex.image + (img ? ', ' + img.value : ''), imp });
-    owned.set('background-size', { value: join(tex.size, 'background-size', 'auto'), imp });
-    owned.set('background-position', { value: join(tex.position, 'background-position', '0% 0%'), imp });
-    owned.set('background-repeat', { value: join(tex.repeat, 'background-repeat', 'repeat'), imp });
-    owned.set('background-blend-mode', { value: [...texBlends, ...(userLayers ? expandList(get('background-blend-mode'), userLayers, 'normal') : [])].join(', '), imp });
+    composeTextureInto(owned, tex);
     return tex;
   }
 

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.10.0';
+export const VERSION = '0.11.0';
 
 let counter = 0;
 const engines = new Map();
@@ -240,6 +240,8 @@ if (typeof window !== 'undefined') {
     } finally {
       // always announce readiness - even when there was nothing to auto-load
       window.dispatchEvent(new CustomEvent('dssl-ready', { detail: { version: VERSION } }));
+      // 0.10.0: a page that hides itself until styled (see the guide, "No flash") shows itself here
+      try { document.documentElement.classList.add('dssl-ready'); } catch { /* no document element yet */ }
     }
   };
 

public/dssl/lint.js

@@ -18,7 +18,7 @@
 import { parseColor, evalColorExpr, over, contrast, toRgba, toHex } from './color.js';
 
 /** one design-token lookup closed over the sheet's token map */
-function makeResolver(tokenMap) {
+export function makeColorResolver(tokenMap) {
   const lookup = (name) => tokenMap.get(name);
   /** CSS value as the resolver emits it ("var(--dssl-color-ink)", "color-mix(...)", "#fff") to a colour */
   return function cssToColor(css, depth = 0) {
@@ -52,7 +52,7 @@ const INTERACTIVE = /^(a|button|input|select|textarea|summary)\b|\[tabindex|\[ro
  */
 export function lintRules({ rules, tokenMap, file }) {
   const warnings = [];
-  const cssToColor = makeResolver(tokenMap);
+  const cssToColor = makeColorResolver(tokenMap);
   const pageBg = (() => { const raw = tokenMap.get('color.paper'); return raw ? evalColorExpr(raw, (n) => tokenMap.get(n)) : null; })();
 
   const killedFocus = [];
@@ -72,10 +72,21 @@ export function lintRules({ rules, tokenMap, file }) {
         let bg = cssToColor(bgD.value);
         let fg = cssToColor(fgD.value);
         if (bg && fg) {
-          if (bg.a < 0.999) bg = pageBg ? over(bg, { ...pageBg, a: 1 }) : null;
-          if (bg) {
-            const fgSolid = fg.a < 0.999 ? over(fg, bg) : fg;
-            const ratio = contrast(fgSolid, bg);
+          // a translucent background takes its look from whatever is behind it, which a single rule cannot know
+          // (a dark theme is usually in a media block, and this check only reads the unconditional rules). So judge
+          // it against the light page colour, white and black, and warn only when it fails on every one of them.
+          const backdrops = bg.a < 0.999 ? [pageBg ? { ...pageBg, a: 1 } : null, { r: 255, g: 255, b: 255, a: 1 }, { r: 0, g: 0, b: 0, a: 1 }].filter(Boolean) : [null];
+          let bestRatio = -1, bestFg = null, bestBg = null;
+          for (const back of backdrops) {
+            const solidBg = back ? over(bg, back) : bg;
+            const solidFg = fg.a < 0.999 ? over(fg, solidBg) : fg;
+            const rr = contrast(solidFg, solidBg);
+            if (rr > bestRatio) { bestRatio = rr; bestFg = solidFg; bestBg = solidBg; }
+          }
+          if (bestBg) {
+            const fgSolid = bestFg;
+            bg = bestBg;
+            const ratio = bestRatio;
             const size = pxOf((lastDecl(r.decls, 'font-size') || {}).value);
             const weightRaw = (lastDecl(r.decls, 'font-weight') || {}).value;
             const weight = weightRaw === 'bold' ? 700 : Number(weightRaw) || 400;

public/dssl/resolver.js

@@ -80,7 +80,7 @@ export const UNITLESS_PROPS = new Set([
   'opacity', 'line-height', 'z-index', 'font-weight', 'flex-grow', 'flex-shrink',
   'flex', 'order', 'scale', 'widows', 'orphans', 'column-count', 'aspect-ratio',
   'animation-iteration-count', 'flood-opacity', 'fill-opacity', 'stop-opacity',
-  'shape-image-threshold',
+  'shape-image-threshold', 'counter-reset', 'counter-increment', 'counter-set',
   // grid line placement takes integers, not lengths:  grid-column: span 2
   'grid-row', 'grid-column', 'grid-area',
 ]);
@@ -106,7 +106,7 @@ export const KNOWN_PROPS = new Set(('all,appearance,accent-color,align-content,a
   'border-inline,border-inline-color,border-inline-end,border-inline-end-color,border-inline-end-style,border-inline-end-width,border-inline-start,border-inline-start-color,border-inline-start-style,border-inline-start-width,border-inline-style,border-inline-width,' +
   'border-left,border-left-color,border-left-style,border-left-width,border-radius,border-right,border-right-color,border-right-style,border-right-width,' +
   'border-spacing,border-start-end-radius,border-start-start-radius,border-style,border-top,border-top-color,border-top-left-radius,border-top-right-radius,border-top-style,border-top-width,border-width,' +
-  'bottom,box-decoration-break,box-shadow,box-sizing,break-after,break-before,break-inside,caret-color,caret-shape,clear,clip,clip-path,color,color-scheme,column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns,contain,contain-intrinsic-size,container,container-name,container-type,content,content-visibility,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,fill,fill-rule,fill-opacity,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-opacity,stroke-width,font,font-family,font-feature-settings,font-kerning,font-language-override,font-optical-sizing,font-palette,font-size,font-size-adjust,font-stretch,font-style,font-synthesis,font-variant,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-variation-settings,font-weight,forced-color-adjust,gap,grid,grid-area,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column,grid-column-end,grid-column-gap,grid-column-start,grid-gap,grid-row,grid-row-end,grid-row-gap,grid-row-start,grid-template,grid-template-areas,grid-template-columns,grid-template-rows,' +
+  'bottom,counter-reset,counter-increment,counter-set,box-decoration-break,box-shadow,box-sizing,break-after,break-before,break-inside,caret-color,caret-shape,clear,clip,clip-path,color,color-scheme,column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns,contain,contain-intrinsic-size,container,container-name,container-type,content,content-visibility,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,fill,fill-rule,fill-opacity,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-opacity,stroke-width,font,font-family,font-feature-settings,font-kerning,font-language-override,font-optical-sizing,font-palette,font-size,font-size-adjust,font-stretch,font-style,font-synthesis,font-variant,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-variation-settings,font-weight,forced-color-adjust,gap,grid,grid-area,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column,grid-column-end,grid-column-gap,grid-column-start,grid-gap,grid-row,grid-row-end,grid-row-gap,grid-row-start,grid-template,grid-template-areas,grid-template-columns,grid-template-rows,' +
   'hanging-punctuation,height,hyphenate-character,hyphenate-limit-chars,hyphens,image-orientation,image-rendering,inline-size,inset,inset-block,inset-block-end,inset-block-start,inset-inline,inset-inline-end,inset-inline-start,isolation,justify-content,justify-items,justify-self,justify-tracks,left,letter-spacing,line-break,line-height,list-style,list-style-image,list-style-position,list-style-type,margin,margin-block,margin-block-end,margin-block-start,margin-bottom,margin-inline,margin-inline-end,margin-inline-start,margin-left,margin-right,margin-top,margin-trim,mask,mask-border,mask-border-mode,mask-border-outset,mask-border-repeat,mask-border-slice,mask-border-source,mask-border-width,mask-clip,mask-composite,mask-image,mask-mode,mask-origin,mask-position,mask-repeat,mask-size,max-height,max-inline-size,max-width,min-block-size,min-height,min-inline-size,min-width,mix-blend-mode,object-fit,object-position,offset,offset-anchor,offset-distance,offset-path,offset-rotate,opacity,order,outline,outline-color,outline-offset,outline-style,outline-width,overflow,overflow-anchor,overflow-clip-margin,overflow-wrap,overflow-x,overflow-y,overscroll-behavior,overscroll-behavior-block,overscroll-behavior-inline,overscroll-behavior-x,overscroll-behavior-y,padding,padding-block,padding-block-end,padding-block-start,padding-bottom,padding-inline,padding-inline-end,padding-inline-start,padding-left,padding-right,padding-top,page-break-after,page-break-before,page-break-inside,paint-order,perspective,perspective-origin,place-content,place-items,place-self,pointer-events,position,print-color-adjust,quotes,resize,right,rotate,row-gap,ruby-align,ruby-merge,scale,scroll-behavior,scroll-margin,scroll-margin-block,scroll-margin-block-end,scroll-margin-block-start,scroll-margin-bottom,scroll-margin-inline,scroll-margin-inline-end,scroll-margin-inline-start,scroll-margin-left,scroll-margin-right,scroll-margin-top,scroll-padding,scroll-padding-block,scroll-padding-bottom,scroll-padding-inline,scroll-padding-left,scroll-padding-right,scroll-padding-top,scroll-snap-align,scroll-snap-stop,scroll-snap-type,scrollbar-color,scrollbar-gutter,scrollbar-width,shape-image-threshold,shape-margin,shape-outside,tab-size,table-layout,text-align,text-align-last,text-combine-upright,text-decoration,text-decoration-color,text-decoration-line,text-decoration-skip-ink,text-decoration-style,text-decoration-thickness,text-emphasis,text-emphasis-color,text-emphasis-position,text-emphasis-style,text-indent,text-justify,text-orientation,text-overflow,text-rendering,text-shadow,text-transform,text-underline-offset,text-underline-position,text-wrap,top,touch-action,transform,transform-box,transform-origin,transform-style,transition,transition-behavior,transition-delay,transition-duration,transition-property,transition-timing-function,translate,unicode-bidi,user-select,vertical-align,visibility,white-space,white-space-collapse,width,will-change,word-break,word-spacing,word-wrap,writing-mode,z-index,zoom,' +
   'animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-range,animation-timeline,animation-timing-function,' +
   'view-transition-name,interpolate-size,text-box,text-box-edge,text-box-trim,dynamic-range-limit,field-sizing,anchor-name,position-anchor,position-area,scroll-timeline,scroll-timeline-axis,scroll-timeline-name,timeline-scope,view-timeline,view-timeline-axis,view-timeline-name,' +
@@ -268,7 +268,9 @@ function resolveValue(raw, ctx) {
         }
         // color-ish functions keep bare numbers bare; calc-family gets px
         const innerUnitless = UNITLESS_FN.has(fname) ? true : LENGTH_FN.has(fname) ? false : ctx.unitless;
-        const resolvedInner = resolveValue(inner, { ...ctx, unitless: innerUnitless });
+        // counter(step), counters(step, "."), attr(data-x): the names inside are the author's own, not tokens
+        const nameFn = fname === 'counter' || fname === 'counters' || fname === 'attr';
+        const resolvedInner = resolveValue(inner, { ...ctx, unitless: innerUnitless, bareIdents: nameFn ? true : ctx.bareIdents });
         out += ident + '(' + resolvedInner + ')';
         i = j;
         continue;
@@ -1136,7 +1138,7 @@ function resolveDecl(prop, value, ctx) {
     });
     return [];
   }
-  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
+  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' || prop.startsWith('counter-') }) }];
 }
 
 /** string-aware !important scan - quoted content: "!important" must not trip it */

public/dssl/static.js

@@ -20,6 +20,9 @@
  * no-JS, a strict CSP, first-paint-before-JS, or 4.5x smaller HTML.
  * ========================================================================= */
 
+import { buildTexture, composeTextureInto } from './texture.js';
+import { makeColorResolver } from './lint.js';
+
 const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
 const LAYER_NAMES = ['tokens', 'base', 'components', 'utilities', 'pin'];
 
@@ -52,6 +55,38 @@ function splitDecls(decls, kinds) {
   return { keep, engineProps };
 }
 
+/**
+ * `texture:` is engine-native, but most textures are just images laid over a background, and
+ * an image is plain CSS. When every colour is known at build time (tokens are), the layers are
+ * built here with the same code the engine uses and written as background-image longhands, so the
+ * texture survives the build. What stays in the runtime: a texture that animates, one with a colour
+ * that is not a token or a literal, and a rule whose own background is something a build cannot
+ * merge with (it is left alone and counted).
+ */
+function bakeTexture(rule, toColor, report) {
+  const at = (rule.decls || []).findIndex((d) => d.prop === '@texture');
+  if (at < 0) return rule;
+  const layers = rule.decls[at].value;
+  if (!Array.isArray(layers) || !layers.length) return rule;           // texture: none
+  if (layers.some((l) => l.animate > 0)) { (report.notBaked ||= []).push({ sel: rule.sel, why: 'it animates' }); return rule; }
+  for (const l of layers) {
+    for (const key of ['color', 'color2']) {
+      if (l[key] !== undefined && !toColor(l[key])) { (report.notBaked ||= []).push({ sel: rule.sel, why: `its ${key} (${l[key]}) is not known at build time` }); return rule; }
+    }
+  }
+  const tex = buildTexture(layers, (css) => toColor(css));
+  if (!tex.count) return rule;
+  // last declaration of each property wins, as in the cascade within one rule
+  const owned = new Map();
+  for (const d of rule.decls) if (!isEngineProp(d.prop) && /^background/.test(d.prop)) owned.set(d.prop, { value: d.value, imp: '' });
+  composeTextureInto(owned, tex);
+  const decls = rule.decls.filter((d, i) => i !== at && !(/^background/.test(d.prop) && !isEngineProp(d.prop)));
+  const line = rule.decls[at].line;
+  for (const [prop, v] of owned) decls.push({ prop, value: v.value, line });
+  report.bakedTextures++;
+  return { ...rule, decls };
+}
+
 export function toCSS(doc, opts = {}) {
   const file = opts.file || 'styles.dssl';
   const report = {
@@ -66,7 +101,8 @@ export function toCSS(doc, opts = {}) {
 
   const chunks = [];
   const header = opts.banner !== false
-    ? `/* generated by dssl build from ${file} - the static subset of DSSL${opts.version ? ' v' + opts.version : ''}.\n   @signal rules and engine-native properties (animate, aura, texture, ...) stay in the runtime. */\n`
+    ? `/* generated by dssl build from ${file} - the static subset of DSSL${opts.version ? ' v' + opts.version : ''}.\n   @signal rules and engine-native properties (animate, aura, tilt, ...) stay in the runtime.
+   Textures are baked in as background images when their colours are known at build time. */\n`
     : '';
   let out = header;
 
@@ -87,8 +123,11 @@ export function toCSS(doc, opts = {}) {
   }
 
   // ---- regular rules ----
-  for (const r of allRules) {
-    if (r.signals && r.signals.length) { report.skippedSignals++; continue; }
+  const toColor = makeColorResolver(new Map(Object.entries(doc.tokens || {})));
+  report.bakedTextures = 0;
+  for (const r0 of allRules) {
+    if (r0.signals && r0.signals.length) { report.skippedSignals++; continue; }
+    const r = bakeTexture(r0, toColor, report);
     const { keep, engineProps } = splitDecls(r.decls || [], kinds);
     report.engineDecls += engineProps;
     if (!keep.length) { if (engineProps) report.skippedEngine++; continue; }

public/dssl/texture.js

@@ -28,7 +28,7 @@ const mix2 = (x, y, t) => mix(x, y, t, 'srgb');
 
 export const BLEND_MODES = ['normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-burn', 'color-dodge', 'darken', 'lighten', 'difference', 'exclusion'];
 
-export const GENERATORS = ['noise', 'bump', 'lines', 'dots', 'grid', 'checker', 'weave', 'carbon', 'waves', 'hex'];
+export const GENERATORS = ['noise', 'bump', 'lines', 'dots', 'grid', 'checker', 'weave', 'carbon', 'waves', 'hex', 'rings'];
 
 /** the settings a texture layer understands, with how many value words each takes */
 export const TEXTURE_KEYS = {
@@ -51,6 +51,11 @@ export const TEXTURE_KEYS = {
   blend:     { words: 1, kind: 'word', values: BLEND_MODES, doc: 'how the layer mixes with what is under it' },
   color:     { words: 1, kind: 'color', doc: 'the main colour (dark end of noise, ink of lines and dots)' },
   color2:    { words: 1, kind: 'color', doc: 'the second colour (light end of noise, background cell of patterns)' },
+  figure:    { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: how strongly the growth rings arch into a cathedral figure, 0 is straight grain' },
+  warp:      { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: how much each ring wobbles along its length' },
+  pores:     { words: 1, kind: 'number', min: 0, max: 1, doc: 'rings generator: fine fibre and pore streaks between the rings' },
+  knots:     { words: 1, kind: 'number', min: 0, max: 8, int: true, doc: 'rings generator: how many knots in one tile (the pattern repeats, so keep it small)' },
+  planks:    { words: 1, kind: 'number', min: 24, max: 1200, doc: 'rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each' },
   invert:    { words: 0, kind: 'flag', doc: 'swap the two colours' },
 };
 
@@ -100,6 +105,26 @@ export const PRESETS = {
     ] },
   wood:       { doc: 'long wood grain, along x (use angle 90 for vertical)',
     layers: [{ gen: 'noise', scale: 4, octaves: 3, contrast: 1.8, stretch: [40, 1], intensity: 1, color: '#7a4b24', color2: '#c99a62', blend: 'multiply' }] },
+  oak:        { doc: 'oak: open grain, tan with brown rings',
+    layers: [{ gen: 'rings', scale: 11, color: '#8a5f33', color2: '#c9a574', contrast: 1.3, figure: 0.55, warp: 0.45, pores: 0.5, seed: 3, blend: 'normal' }] },
+  walnut:     { doc: 'walnut: dark chocolate with black-brown rings',
+    layers: [{ gen: 'rings', scale: 9, color: '#2b1a10', color2: '#6a4631', contrast: 1.2, figure: 0.5, warp: 0.55, pores: 0.45, seed: 8, blend: 'normal' }] },
+  cherry:     { doc: 'cherry: warm red-brown with fine rings',
+    layers: [{ gen: 'rings', scale: 8, color: '#7a3a1c', color2: '#bb7443', contrast: 1.1, figure: 0.4, warp: 0.35, pores: 0.35, seed: 5, blend: 'normal' }] },
+  maple:      { doc: 'maple: pale, tight, nearly plain grain',
+    layers: [{ gen: 'rings', scale: 13, color: '#c79a5a', color2: '#ecd6ab', contrast: 0.8, figure: 0.25, warp: 0.3, pores: 0.25, seed: 11, blend: 'normal' }] },
+  pine:       { doc: 'pine: light yellow wood with wide rings and knots',
+    layers: [{ gen: 'rings', scale: 16, color: '#b5742f', color2: '#e6c081', contrast: 1.4, figure: 0.65, warp: 0.5, pores: 0.4, knots: 2, seed: 14, blend: 'normal' }] },
+  mahogany:   { doc: 'mahogany: deep red-brown, straight grain',
+    layers: [{ gen: 'rings', scale: 10, color: '#4a2012', color2: '#8c4727', contrast: 1.1, figure: 0.3, warp: 0.3, pores: 0.4, seed: 6, blend: 'normal' }] },
+  ebony:      { doc: 'ebony: nearly black with faint streaks',
+    layers: [{ gen: 'rings', scale: 12, color: '#0c0908', color2: '#2d2621', contrast: 0.7, figure: 0.2, warp: 0.25, pores: 0.3, seed: 2, blend: 'normal' }] },
+  birch:      { doc: 'birch: creamy pale wood with fine rings',
+    layers: [{ gen: 'rings', scale: 10, color: '#d2ae74', color2: '#f0dfb9', contrast: 0.9, figure: 0.3, warp: 0.35, pores: 0.25, seed: 9, blend: 'normal' }] },
+  'oak-planks': { doc: 'oak laid as planks, with seams',
+    layers: [{ gen: 'rings', scale: 11, color: '#8a5f33', color2: '#c9a574', contrast: 1.3, figure: 0.55, warp: 0.45, pores: 0.5, planks: 110, seed: 3, blend: 'normal' }] },
+  'walnut-planks': { doc: 'walnut laid as planks, with seams',
+    layers: [{ gen: 'rings', scale: 9, color: '#2b1a10', color2: '#6a4631', contrast: 1.2, figure: 0.5, warp: 0.55, pores: 0.45, planks: 96, seed: 8, blend: 'normal' }] },
   bark:       { doc: 'rough vertical bark',
     layers: [{ gen: 'bump', scale: 10, octaves: 4, depth: 5, stretch: [1, 6], light: 150, intensity: 0.8, color: '#000', color2: '#fff', blend: 'overlay' }] },
   leather:    { doc: 'pebbled leather',
@@ -164,6 +189,7 @@ const GEN_DEFAULTS = {
   carbon:  { scale: 20, intensity: 1, color: '#151515', color2: '#262626', blend: 'normal' },
   waves:   { scale: 40, thickness: 1.2, intensity: 0.3, color: '#000', blend: 'normal' },
   hex:     { scale: 28, thickness: 1, intensity: 0.28, color: '#000', blend: 'normal' },
+  rings:   { scale: 10, color: '#7a4b24', color2: '#d1a770', contrast: 1.2, figure: 0.5, warp: 0.4, pores: 0.4, intensity: 1, blend: 'normal' },
 };
 
 /* ------------------------------------------------------------------ *
@@ -452,7 +478,134 @@ function buildHex(spec, rc) {
   return [{ image: svgUrl(svg), size: `${f(W)}px ${f(100 * k)}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: W }];
 }
 
-const BUILDERS = { noise: buildNoise, bump: buildBump, lines: buildLines, dots: buildDots, grid: buildGrid, checker: buildChecker, weave: buildWeave, carbon: buildCarbon, waves: buildWaves, hex: buildHex };
+
+/* ------------------------------------------------------------------ *
+ * rings: growth rings, drawn as vector curves
+ *
+ * A board is a log sliced, and the rings you see are where the slice crosses
+ * the growth layers. So this does not stretch noise: it draws each ring as a
+ * curve. The spacing wobbles, the curves arch (cathedral figure) because the
+ * slice cuts the layers at a slant, there are pores between them, and planks
+ * and knots are drawn on top. Everything comes from a seeded generator and
+ * integer harmonics, so the same seed gives the same board on every machine
+ * and the tile has no visible seam.
+ * ------------------------------------------------------------------ */
+
+const TAU = Math.PI * 2;
+const r1 = (n) => String(Math.round(n * 10) / 10);
+const smallUrl = (svg) => `url("data:image/svg+xml,${svg.replace(/[%#<>"]/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase())}")`;
+
+/** a smooth path through [x, y] samples (Catmull-Rom as cubic Beziers, ends clamped) */
+function smoothPath(pts) {
+  const n = pts.length;
+  const at = (i) => pts[Math.max(0, Math.min(n - 1, i))];
+  let d = `M${r1(pts[0][0])} ${r1(pts[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = at(i - 1), p1 = at(i), p2 = at(i + 1), p3 = at(i + 2);
+    const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += `C${r1(c1x)} ${r1(c1y)} ${r1(c2x)} ${r1(c2y)} ${r1(p2[0])} ${r1(p2[1])}`;
+  }
+  return d;
+}
+
+function buildRings(spec, rc) {
+  const { a, b } = layerColors(spec, rc);
+  const late = a, early = b || a;
+  const P = Math.max(3, spec.scale || 10);
+  const W = 576;                                    // one tile along the grain; every harmonic below divides it
+  const fig = spec.figure === undefined ? 0.5 : spec.figure;
+  const warp = spec.warp === undefined ? 0.4 : spec.warp;
+  const pores = spec.pores === undefined ? 0.4 : spec.pores;
+  const contrast = spec.contrast === undefined ? 1.2 : spec.contrast;
+  const seed = spec.seed || 0;
+  const planked = !!spec.planks;
+  const plankH = planked ? Math.max(P * 3, spec.planks) : 0;
+  const plankN = planked ? 3 : 1;
+  const H = planked ? plankH * plankN : P * Math.max(12, Math.round(260 / P));
+  const rgba = (c, alpha) => toRgba(withAlpha(c, n01((alpha === undefined ? 1 : alpha) * c.a)));
+  const STEP = 48;
+
+  let defs = '', body = '';
+  let id = 0;
+  for (let pi = 0; pi < plankN; pi++) {
+    const rand = rng(seed * 7919 + pi * 104729 + 13);
+    const h = planked ? plankH : H;
+    const n = Math.max(3, Math.round(h / P));
+    const Pe = h / n;
+    const ph = [rand() * TAU, rand() * TAU, rand() * TAU];
+    const x0 = rand() * W;
+    const m = 2 + Math.floor(rand() * 3), spacingAmp = 0.12 + rand() * 0.22;
+    const flip = planked && rand() < 0.5;
+    const curve = (kf, x) => {
+      const t = kf / n;
+      // a free board arches from one face to the other; a seamless tile must repeat every n rings, so its envelope has period n
+      const per = Math.pow(Math.sin(Math.PI * t), 2);
+      const env = planked ? Math.pow(Math.max(0, Math.min(1, flip ? 1 - t : t)), 1.4) : per;
+      const env2 = planked ? 0.6 + 0.4 * Math.abs(Math.sin(Math.PI * t)) : per;
+      const bump = Math.pow((1 + Math.cos(TAU * (x - x0) / W)) / 2, 1.3);
+      const arch = fig * 0.3 * h * env * bump;
+      const wob = warp * P * 0.6 * env2 * (0.5 * Math.sin(TAU * x / W + ph[0] + TAU * kf / n) + 0.3 * Math.sin(TAU * 3 * x / W + ph[1] + TAU * 2 * kf / n) + 0.2 * Math.sin(TAU * 7 * x / W + ph[2] + TAU * 3 * kf / n));
+      const u = kf + spacingAmp * Math.sin(TAU * m * kf / n);
+      return u * Pe + arch + wob;
+    };
+    // sampled past both ends of the tile, so the stroke is continuous across the join and the viewport clips it
+    const ringPath = (kf) => { const pts = []; for (let x = -2 * STEP; x <= W + 2 * STEP; x += STEP) pts.push([x, curve(kf, x)]); return smoothPath(pts); };
+    const jit = Array.from({ length: n }, () => [rand(), rand()]);
+
+    const lo = planked ? -2 : -1, hi = planked ? n + 2 : n;
+    let g = '';
+    for (let k = lo; k <= hi; k++) {
+      const [jitter, jop] = jit[((k % n) + n) % n];   // ring k and ring k + n look alike, so the tile repeats cleanly
+      const w = Pe * (0.14 + jitter * 0.26);
+      const op = n01((0.4 + jop * 0.55) * Math.min(1.4, contrast / 1.2));
+      const rid = 'r' + id++;
+      defs += `<path id='${rid}' d='${ringPath(k + 0.8)}' fill='none'/>`;
+      g += `<use href='#${rid}' stroke='${rgba(late, op * 0.28)}' stroke-width='${r1(w * 2.6)}'/><use href='#${rid}' stroke='${rgba(late, op)}' stroke-width='${r1(w)}'/>`;
+    }
+    // knots: elongated along the grain, with rings around them
+    const knotN = spec.knots ? Math.max(0, Math.round(spec.knots / plankN + (pi === 0 ? 0.49 : 0))) : 0;
+    let knots = '';
+    for (let q = 0; q < knotN; q++) {
+      const kx = 90 + rand() * (W - 180), ky = h * (0.25 + rand() * 0.5), rx = 9 + rand() * 12, ry = rx * 0.6;
+      knots += `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx * 4)}' ry='${r1(ry * 3.4)}' fill='${rgba(late, 0.1)}'/>` +
+        `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx * 2.4)}' ry='${r1(ry * 2.3)}' fill='none' stroke='${rgba(late, 0.35)}' stroke-width='1.2'/>` +
+        `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx * 1.6)}' ry='${r1(ry * 1.6)}' fill='none' stroke='${rgba(late, 0.5)}' stroke-width='1.4'/>` +
+        `<ellipse cx='${r1(kx)}' cy='${r1(ky)}' rx='${r1(rx)}' ry='${r1(ry)}' fill='${rgba(late, 0.85)}'/>`;
+    }
+    const tone = (rand() - 0.5) * 0.14;
+    const toneRect = tone > 0 ? `<rect width='${W}' height='${r1(h)}' fill='rgba(255,255,255,${r1(Math.abs(tone) * 10) / 10})'/>` : `<rect width='${W}' height='${r1(h)}' fill='rgba(0,0,0,${r1(Math.abs(tone) * 10) / 10})'/>`;
+    const clip = `c${pi}`;
+    defs += `<clipPath id='${clip}'><rect width='${W}' height='${r1(h)}'/></clipPath>`;
+    body += `<g transform='translate(0 ${r1(pi * plankH)})' clip-path='url(#${clip})'>` +
+      `<rect width='${W}' height='${r1(h)}' fill='${rgba(early)}'/>` + (planked ? toneRect : '') + `<g fill='none'>${g}</g>${knots}</g>`;
+  }
+
+  // fine fibres: streaks stretched along the grain, drawn once over everything
+  const fibre = pores > 0
+    ? `<filter id='p' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'>` +
+      `<feTurbulence type='fractalNoise' baseFrequency='0.014 0.62' numOctaves='3' seed='${seed + 3}' stitchTiles='stitch'/>` +
+      `<feColorMatrix type='matrix' values='0 0 0 0 ${f(late.r / 255)} 0 0 0 0 ${f(late.g / 255)} 0 0 0 0 ${f(late.b / 255)} ${f(pores * 4.2)} 0 0 0 ${f(-pores * 1.95)}'/></filter>` +
+      `<rect width='${W}' height='${H}' filter='url(#p)' opacity='${f(Math.min(1, 0.55 * late.a))}'/>`
+    : '';
+
+  let seams = '';
+  if (planked) {
+    for (let pi = 0; pi < plankN; pi++) {
+      const y = pi * plankH;
+      seams += `<rect y='${r1(y)}' width='${W}' height='1.6' fill='rgba(0,0,0,0.5)'/><rect y='${r1(y + 1.6)}' width='${W}' height='1' fill='rgba(255,255,255,0.1)'/>`;
+    }
+  }
+
+  const rot = spec.angle === 90 || spec.angle === -90 || spec.angle === 270;
+  const inner = `<defs>${defs}</defs>${body}${fibre}${seams}`;
+  const svg = rot
+    ? `<svg xmlns='http://www.w3.org/2000/svg' width='${H}' height='${W}'><g transform='matrix(0 1 1 0 0 0)'>${inner}</g></svg>`
+    : `<svg xmlns='http://www.w3.org/2000/svg' width='${W}' height='${H}'>${inner}</svg>`;
+  return [{ image: smallUrl(svg), size: rot ? `${H}px ${W}px` : `${W}px ${H}px`, repeat: 'repeat', position: '0 0', blend: spec.blend || 'normal', tile: Math.max(W, H) }];
+}
+
+const BUILDERS = { rings: buildRings, noise: buildNoise, bump: buildBump, lines: buildLines, dots: buildDots, grid: buildGrid, checker: buildChecker, weave: buildWeave, carbon: buildCarbon, waves: buildWaves, hex: buildHex };
 
 /**
  * Turn parsed layers into the CSS lists for background-image, -size, -repeat,
@@ -477,6 +630,59 @@ export function buildTexture(layers, rc) {
   };
 }
 
+
+/* ------------------------------------------------------------------ *
+ * composing with the element's own background (shared by the engine and `dssl build`)
+ * ------------------------------------------------------------------ */
+
+export function splitBgList(value) {
+  const out = []; let depth = 0, cur = '';
+  for (const ch of String(value)) {
+    if (ch === '(') depth++;
+    if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue; }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+/** a list of exactly n entries: the author's, cycled the way CSS cycles them, or the default */
+function expandList(value, n, dflt) {
+  const items = value ? splitBgList(value) : [];
+  if (!items.length) return Array.from({ length: n }, () => dflt);
+  return Array.from({ length: n }, (_, i) => items[i % items.length]);
+}
+
+
+/**
+ * texture sits ON TOP of whatever background the author wrote: the shorthand, the longhands,
+ * or just a colour. `owned` is a Map of prop -> { value, imp }; this edits it in place.
+ */
+export function composeTextureInto(owned, tex) {
+  const sh = owned.get('background');
+  const img = owned.get('background-image');
+  const blendUser = owned.get('background-blend-mode');
+  const texBlends = tex.blend.split(', ');
+  if (sh) {
+    // the author wrote the shorthand: texture layers go first, their value stays the last layer(s)
+    const userLayers = splitBgList(sh.value).length;
+    const texShort = tex.parts.map((p) => `${p.image} ${p.position} / ${p.size} ${p.repeat}`).join(', ');
+    owned.set('background', { value: `${texShort}, ${sh.value}`, imp: sh.imp });
+    owned.delete('background-image');
+    owned.set('background-blend-mode', { value: [...texBlends, ...expandList(blendUser && blendUser.value, userLayers, 'normal')].join(', '), imp: sh.imp });
+    return;
+  }
+  const userLayers = img ? splitBgList(img.value).length : 0;
+  const imp = img ? img.imp : '';
+  const get = (name) => (owned.get(name) || {}).value;
+  const join = (texList, name, dflt) => [...texList.split(/,(?![^(]*\))/).map((x) => x.trim()), ...(userLayers ? expandList(get(name), userLayers, dflt) : [])].join(', ');
+  owned.set('background-image', { value: tex.image + (img ? ', ' + img.value : ''), imp });
+  owned.set('background-size', { value: join(tex.size, 'background-size', 'auto'), imp });
+  owned.set('background-position', { value: join(tex.position, 'background-position', '0% 0%'), imp });
+  owned.set('background-repeat', { value: join(tex.repeat, 'background-repeat', 'repeat'), imp });
+  owned.set('background-blend-mode', { value: [...texBlends, ...(userLayers ? expandList(get('background-blend-mode'), userLayers, 'normal') : [])].join(', '), imp });
+}
+
 /* ------------------------------------------------------------------ *
  * deterministic value noise, for aura masks and tests
  * ------------------------------------------------------------------ */

public/llms.txt

@@ -50,7 +50,7 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 ```
 
 ## 0.9.0: texture, aura, sliders, lint, import
-- `texture: grain` layers a generated image ON TOP of an element's own background (colour, gradient or several layers). 30 presets (grain, noise, rough, sand, paper, cloud, concrete, stone, crumpled, glitter, frost, marble, wood, bark, leather, brushed, canvas, linen, denim, carbon, scanlines, halftone, dots, lines, grid, checker, crosshatch, stripes, waves, hex) and 10 generators (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex) with settings: scale, intensity, contrast, threshold, octaves, seed, stretch x y, depth, light, angle, thickness, radius, softness, contour, animate, type, blend, color, color2, invert. Comma stacks layers. Runtime-only (`dssl build` leaves it in and reports it).
+- `texture: grain` layers a generated image ON TOP of an element's own background (colour, gradient or several layers). 40 presets (30 general: grain, noise, rough, sand, paper, cloud, concrete, stone, crumpled, glitter, frost, marble, wood, bark, leather, brushed, canvas, linen, denim, carbon, scanlines, halftone, dots, lines, grid, checker, crosshatch, stripes, waves, hex) and 11 generators (noise, bump, lines, dots, grid, checker, weave, carbon, waves, hex, rings) with settings: scale, figure, warp, pores, knots, planks, intensity, contrast, threshold, octaves, seed, stretch x y, depth, light, angle, thickness, radius, softness, contour, animate, type, blend, color, color2, invert. Comma stacks layers. Built at run time, and baked into the CSS by `dssl build` when its colours are known (0.11.0).
 - Aura has NO presets. `aura-glow: <color> <radius> [intensity|pulse|depth|flicker|texture(...)|seed|essential]`, `aura-particle: <color -> color ...> <count> [size|life|speed|dir|spread|gravity|drag|turbulence|from|shape|grow|glowing|behind|blend|texture(...)|seed|essential]`, `glow-particle` (particles that glow), `aura-glow-particle` (both slots), `aura: glow ..., particles ...` (replaces both; `aura: none` clears both, `aura-glow: none` only the glow). Name your own with `behavior fire { ... }` then `use fire`. One canvas over the page, 1800 particle budget, still glow under reduced motion, runtime-only.
 - `slider: track 6 color.line radius full, fill color.accent, thumb 24 color.paper, ring 3 color.accent, glow color.accent 14, ticks 10, graph 20 45 70` writes the ::-webkit-slider-* and ::-moz-range-* rules together for `input[type=range]`. The engine keeps `--dssl-p` (value 0..1) on the input. Firefox rules are generated but untested.
 - Lint warnings (never errors; `dssl check --strict` makes them fatal): text contrast under 4.5:1 (3:1 for large text), a removed focus outline with no focus-visible replacement, tap targets under 24px.
@@ -63,6 +63,14 @@ DSSL.replay(sel) / DSSL.refresh() / DSSL.errors() / DSSL.version
 - Alpha on a named colour works: `white/12`, `currentColor/20`. It used to compile to `white/12px`.
 - The playground has a canvas.html tab, `?example=` links, lint warnings and an "as CSS" tab. The canvas keeps a short allow-list of tags and drops scripts, handlers, styles and ids.
 
+## 0.11.0: wood and the build
+- Ten wood species presets: oak, walnut, cherry, maple, pine, mahogany, ebony, birch, oak-planks, walnut-planks. The `rings` generator draws growth rings as vector curves (not stretched noise): `texture: oak figure 0.8 knots 2 planks 120`. Settings: scale (ring spacing), color (latewood), color2 (earlywood), contrast, figure (cathedral arching), warp, pores, knots, planks (board height px), seed, angle 0 or 90. Same seed, same board everywhere; the tile repeats without a seam.
+- `dssl build` now BAKES textures into the CSS as background images when every colour is known at build time. Animated textures and unknown colours stay in the runtime, and the report says why.
+- `counter-reset`, `counter-increment`, `counter-set` and `content: counter(name)` / `counters(name, ".")` work.
+- The contrast lint no longer cries wolf on translucent backgrounds: it warns only when the pair fails on the light page colour, white and black.
+- A page can hide itself until styled: `<style>html:not(.dssl-ready) body{visibility:hidden}</style>`; the engine adds `dssl-ready` to `<html>`.
+- Showcase: /showcase/wood/ is a whole page (Heartwood) built with these.
+
 ## CLI (v0.8.0)
 
 ```sh
@@ -76,4 +84,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.10.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. In VSCodium, search "DSSL" in the Extensions tab (it is on Open VSX: https://open-vsx.org/extension/ehs-studio/dssl-vscode). In VS Code, download `dssl-vscode/dssl-vscode-0.11.0.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. Source lives in `dssl-vscode/` in the repo.

public/showcase/wood/index.html

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Heartwood: a field guide to wood</title>
+<meta name="description" content="How wood is built: growth rings, figure, knots, ten species, and how much a board moves when the air dries out. Every texture on the page is generated by DSSL.">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,800&family=Hanken+Grotesk:wght@400;500;700&display=swap">
+<!-- wood.css is real CSS built from static.dssl (textures baked in), so the page is styled before any script runs -->
+<link rel="stylesheet" href="wood.css">
+</head>
+<body>
+<a class="skip" href="#main">Skip to the guide</a>
+
+<header class="top">
+  <div class="wrap">
+    <a class="brand" href="#">Heartwood</a>
+    <nav class="nav" aria-label="Sections">
+      <a href="#anatomy">Anatomy</a>
+      <a href="#species">Species</a>
+      <a href="#process">Log to board</a>
+      <a href="#movement">Movement</a>
+      <a href="#fire">Fire</a>
+    </nav>
+  </div>
+</header>
+
+<main id="main">
+  <section class="hero">
+    <div class="wrap">
+      <div class="slab">
+        <h1>Every board is a slice of weather.</h1>
+        <p>A tree writes down each year it lives: wide rings for wet summers, tight ones for drought. This is a field guide to reading the grain, choosing a species, and knowing why a table moves in winter.</p>
+        <a class="cta" href="#anatomy">Read the grain</a>
+      </div>
+    </div>
+  </section>
+
+  <section class="block" id="anatomy">
+    <div class="wrap">
+      <p class="kicker">Anatomy</p>
+      <h2 class="title">What you are looking at when you look at grain</h2>
+      <p class="lede">Wood grows outward in layers. Cut a log and the layers show as rings. Cut a board and the same layers show as lines, arches and the occasional knot.</p>
+      <div class="trio">
+        <article class="specimen sp-rings">
+          <div class="note"><b>Growth rings</b>One ring is one growing season: pale, fast earlywood in spring, dense dark latewood in late summer. Count them and you have the tree's age.</div>
+        </article>
+        <article class="specimen sp-figure">
+          <div class="note"><b>Cathedral figure</b>When a board is sawn tangent to the rings, the cut slices each cone-shaped layer at a slant, and the lines bend into arches.</div>
+        </article>
+        <article class="specimen sp-knot">
+          <div class="note"><b>Knots</b>A knot is the base of a branch that the trunk grew around. It is harder, darker, and it does not move with the grain around it.</div>
+        </article>
+      </div>
+      <dl class="facts">
+        <div><dt>Hardwood or softwood</dt><dd>The words are botanical, not about hardness. Hardwoods come from broadleaf trees, softwoods from conifers. Balsa is a hardwood.</dd></div>
+        <div><dt>Heartwood and sapwood</dt><dd>The dark core of a trunk is heartwood, no longer carrying water. The pale outer band is sapwood. Many species are darkest in the middle.</dd></div>
+        <div><dt>Plain-sawn or quarter-sawn</dt><dd>Plain-sawn boards show cathedral arches and move more. Quarter-sawn boards show straight lines and stay flatter.</dd></div>
+      </dl>
+    </div>
+  </section>
+
+  <section class="block block-dark" id="species">
+    <div class="wrap">
+      <p class="kicker">Species</p>
+      <h2 class="title">Eight boards from the sample rack</h2>
+      <p class="lede">Hardness is the Janka test: the force in pounds needed to push a steel ball half its width into the wood. Higher is harder to dent, and harder to work. Figures are rounded averages.</p>
+      <div class="rack">
+        <figure class="sample"><div class="board b-oak" role="img" aria-label="White oak sample board"></div><figcaption><h3>White oak</h3><p class="latin">Quercus alba</p><div class="hard"><input type="range" min="0" max="3200" value="1360" disabled aria-label="Hardness 1360 on a scale to 3200"><span>1,360 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-walnut" role="img" aria-label="Black walnut sample board"></div><figcaption><h3>Black walnut</h3><p class="latin">Juglans nigra</p><div class="hard"><input type="range" min="0" max="3200" value="1010" disabled aria-label="Hardness 1010 on a scale to 3200"><span>1,010 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-cherry" role="img" aria-label="Black cherry sample board"></div><figcaption><h3>Black cherry</h3><p class="latin">Prunus serotina</p><div class="hard"><input type="range" min="0" max="3200" value="950" disabled aria-label="Hardness 950 on a scale to 3200"><span>950 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-maple" role="img" aria-label="Hard maple sample board"></div><figcaption><h3>Hard maple</h3><p class="latin">Acer saccharum</p><div class="hard"><input type="range" min="0" max="3200" value="1450" disabled aria-label="Hardness 1450 on a scale to 3200"><span>1,450 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-pine" role="img" aria-label="Eastern white pine sample board"></div><figcaption><h3>White pine</h3><p class="latin">Pinus strobus</p><div class="hard"><input type="range" min="0" max="3200" value="380" disabled aria-label="Hardness 380 on a scale to 3200"><span>380 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-mahogany" role="img" aria-label="Mahogany sample board"></div><figcaption><h3>Mahogany</h3><p class="latin">Swietenia macrophylla</p><div class="hard"><input type="range" min="0" max="3200" value="800" disabled aria-label="Hardness 800 on a scale to 3200"><span>800 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-ebony" role="img" aria-label="Gaboon ebony sample board"></div><figcaption><h3>Gaboon ebony</h3><p class="latin">Diospyros crassiflora</p><div class="hard"><input type="range" min="0" max="3200" value="3080" disabled aria-label="Hardness 3080 on a scale to 3200"><span>3,080 lbf</span></div></figcaption></figure>
+        <figure class="sample"><div class="board b-birch" role="img" aria-label="Yellow birch sample board"></div><figcaption><h3>Yellow birch</h3><p class="latin">Betula alleghaniensis</p><div class="hard"><input type="range" min="0" max="3200" value="1260" disabled aria-label="Hardness 1260 on a scale to 3200"><span>1,260 lbf</span></div></figcaption></figure>
+      </div>
+    </div>
+  </section>
+
+  <section class="block" id="process">
+    <div class="wrap">
+      <p class="kicker">Log to board</p>
+      <h2 class="title">Five steps between a forest and a shelf</h2>
+      <p class="lede">Most of what goes wrong with wood goes wrong in the second and third steps, long before it is a table.</p>
+      <ol class="steps">
+        <li><h3>Fell and log</h3><p>A tree is cut and bucked into logs. Fresh wood is mostly water, sometimes more than half its weight.</p></li>
+        <li><h3>Saw</h3><p>The sawyer chooses how to cut the log. Plain-sawn gets the most boards. Quarter-sawn gets the most stable ones.</p></li>
+        <li><h3>Dry</h3><p>Boards are air-dried or kiln-dried until the wood holds only 6 to 12 percent moisture, the level indoor air will keep it at.</p></li>
+        <li><h3>Mill</h3><p>Dry boards are flattened and squared. This is when hidden stress shows: a board that was dried too fast will cup or bow.</p></li>
+        <li><h3>Finish</h3><p>Oil soaks in and darkens the grain. Wax and lacquer sit on top. None of them stop wood from taking on and losing moisture.</p></li>
+      </ol>
+    </div>
+  </section>
+
+  <section class="block block-dark" id="movement">
+    <div class="wrap">
+      <p class="kicker">Movement</p>
+      <h2 class="title">How much will it move?</h2>
+      <p class="lede">Wood swells when it takes on moisture and shrinks when it loses it, mostly across the grain and most of all along the growth rings. Pick a species, a board width, and how many points of moisture content the air will change.</p>
+      <div class="calc">
+        <div class="tool">
+          <div>
+            <label for="sp">Species (plain-sawn)</label>
+            <select id="sp">
+              <option value="10.5">White oak</option>
+              <option value="7.8">Black walnut</option>
+              <option value="7.1">Black cherry</option>
+              <option value="9.9" selected>Hard maple</option>
+              <option value="6.1">White pine</option>
+              <option value="4.1">Mahogany</option>
+              <option value="9.5">Yellow birch</option>
+            </select>
+          </div>
+          <div>
+            <label for="w">Board width <span class="readout" id="wv">40 cm</span></label>
+            <input id="w" type="range" min="5" max="100" value="40">
+          </div>
+          <div>
+            <label for="mc">Change in moisture content <span class="readout" id="mcv">4 points</span></label>
+            <input id="mc" type="range" min="0" max="12" value="4">
+          </div>
+        </div>
+        <div class="result" aria-live="polite">
+          <div class="result-card">
+            <div class="mm"><span id="out">0</span> mm</div>
+            <p class="mm-note" id="note"></p>
+          </div>
+        </div>
+      </div>
+      <p class="small">An estimate, not an engineering number. It assumes the wood moves in proportion to its tangential shrinkage from green to oven-dry (taken from USDA Wood Handbook averages), spread evenly over the roughly 28 points of moisture content between fully green and the fibre saturation point. Real boards depend on how they were cut.</p>
+    </div>
+  </section>
+
+  <section class="block" id="fire">
+    <div class="wrap hearth">
+      <div>
+        <p class="kicker">Fire</p>
+        <h2 class="title">The last thing wood does</h2>
+        <p class="lede" style="margin-bottom:0">Firewood burns best when it has been seasoned, split and stacked off the ground for six months to two years, until it holds under about 20 percent moisture. Wet wood spends its heat boiling off water, and smokes.</p>
+      </div>
+      <div class="grate" role="img" aria-label="A log burning"><div class="log"></div></div>
+    </div>
+  </section>
+</main>
+
+<footer class="foot">
+  <div class="wrap">
+    <p>Built with <a href="https://dssl-sable.vercel.app/">DSSL</a>. The page's look is <code>static.dssl</code>, compiled to <code>wood.css</code> with <code>dssl build</code>, textures included. The tilt, the fire and the slider fills are <code>live.dssl</code>, applied by the engine.</p>
+    <p>Every wood grain here is generated vector art from the <code>rings</code> texture, not a photograph. Janka and shrinkage values are rounded averages from the USDA Wood Handbook and the Wood Database.</p>
+  </div>
+</footer>
+
+<script>
+// the calculator: movement = width x tangential shrinkage x (change in moisture / 28)
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const sp = $('sp'), w = $('w'), mc = $('mc');
+  const calc = () => {
+    const mm = Number(w.value) * 10 * (Number(sp.value) / 100) * (Number(mc.value) / 28);
+    $('out').textContent = mm < 10 ? mm.toFixed(1) : String(Math.round(mm));
+    $('wv').textContent = w.value + ' cm';
+    $('mcv').textContent = mc.value + (mc.value === '1' ? ' point' : ' points');
+    const name = sp.options[sp.selectedIndex].text.toLowerCase();
+    $('note').textContent = `A ${w.value} cm wide ${name} board changes width by about this much across the grain when it gains or loses ${mc.value} points of moisture.`;
+    for (const el of [w, mc]) el.style.setProperty('--dssl-p', (el.value - el.min) / (el.max - el.min));
+  };
+  for (const el of [sp, w, mc]) el.addEventListener('input', calc);
+  calc();
+})();
+</script>
+<script type="module" src="/dssl/boot.js"></script>
+<link rel="stylesheet/dssl" href="tokens.dssl">
+<link rel="stylesheet/dssl" href="live.dssl">
+</body>
+</html>

public/showcase/wood/live.dssl

@@ -0,0 +1,34 @@
+// =========================================================================
+// live.dssl: what needs the engine. Pointer tilt, the fire, and the slider fills.
+// Everything else is already in wood.css, so the page is styled before this loads.
+// =========================================================================
+
+.slab { tilt: 3 perspective 1400 speed 0.1 }
+
+.specimen { tilt: 7 lift 1.02 glare }
+.board { tilt: 9 lift 1.04 perspective 700 glare }
+
+// the fire is a recipe written out in full; nothing about it is a preset
+behavior hearth-fire {
+  aura-glow: #ff7a1a 44 pulse 1100 flicker 0.4
+  aura-particle: #ffe9a0 -> #ff8a1f -> rgba(190,40,0,0) count 90 size 8 20 life 700 1300 speed 40 130 dir up spread 38 from top gravity -45 turbulence 80 shape flame glowing behind
+}
+
+behavior sawdust {
+  aura-particle: #fff1c4 -> rgba(232,176,74,0) count 16 size 2 4 life 700 speed 18 46 dir up spread 70 from thumb glowing
+}
+
+.log { use hearth-fire }
+
+// hardness: a read-only slider, so the "bar" is the real control drawn at a value
+.hard input {
+  width: 100%
+  max-width: 120
+  slider: track 6 color.cream/22 radius full, fill color.flame, thumb 14 color.cream, shape bar
+}
+
+.tool input[type=range] {
+  width: 100%
+  slider: track 8 color.cream/25 radius full, fill color.gold, thumb 24 color.gold, ring 3 color.char, glow color.gold 10
+  use sawdust
+}

public/showcase/wood/static.dssl

@@ -0,0 +1,458 @@
+// =========================================================================
+// static.dssl: everything on the wood page that is plain CSS.
+// `dssl build` turns this into wood.css, textures included: every board you
+// see is a generated vector image baked into the stylesheet, no photographs.
+// The tilt, aura and slider fills live in live.dssl, because they need the engine.
+// =========================================================================
+
+* { box-sizing: border-box }
+*::before { box-sizing: border-box }
+*::after { box-sizing: border-box }
+
+body {
+  margin: 0
+  background: color.cream
+  color: color.ink
+  font-family: font.body
+  font-size: 17
+  line-height: 1.65
+  -webkit-font-smoothing: antialiased
+}
+
+a { color: inherit }
+img, svg { max-width: 100% }
+
+.wrap {
+  width: min(1120px, 100% - 40px)
+  margin: 0 auto
+}
+
+.skip {
+  position: absolute
+  left: 12
+  top: -60
+  background: color.ink
+  color: color.cream
+  padding: 8 14
+  radius: sm
+  z: 50
+  focus { top: 12 }
+}
+
+// ------------------------------------------------------------------ header
+.top {
+  position: absolute
+  inset: 0 0 auto 0
+  z: 10
+  padding: 22 0
+  color: color.cream
+}
+
+.top .wrap { row: gap 24 between; align: center }
+
+.brand {
+  font-family: font.display
+  font-size: 24
+  font-weight: 700
+  letter-spacing: -0.01em
+  text-decoration: none
+}
+
+.nav { row: gap 22; flex-wrap: wrap }
+.nav a {
+  font-size: 15
+  text-decoration: none
+  padding: 6 2
+  border-bottom: 2 solid transparent
+  hover { border-bottom-color: color.gold }
+  focus-visible { outline: 2 solid color.gold; outline-offset: 4 }
+}
+
+// -------------------------------------------------------------------- hero
+.hero {
+  position: relative
+  min-height: 92vh
+  display: grid
+  align-items: center
+  padding: 120 0 80
+  background-color: color.walnut
+  texture: oak-planks scale 14 planks 150
+  color: color.cream
+  overflow: hidden
+}
+
+.hero::after {
+  content: ""
+  position: absolute
+  inset: 0
+  background: radial-gradient(ellipse at 30% 40%, transparent 30%, color.char/55 100%)
+  pointer-events: none
+}
+
+.hero .wrap { position: relative; z: 1 }
+
+.slab {
+  max-width: 640
+  padding: fluid 28 52
+  glass: 22 saturate 1.3 tint color.char/48
+  border: 1 solid color.cream/22
+  radius: lg
+  shadow: xl
+}
+
+.slab h1 {
+  font-family: font.display
+  font-size: fluid 44 86
+  line-height: 1.02
+  letter-spacing: -0.02em
+  font-weight: 800
+  margin: 0 0 20
+}
+
+.slab p {
+  font-size: 19
+  max-width: 52ch
+  margin: 0 0 28
+  color: color.cream/90
+}
+
+.cta {
+  display: inline-block
+  background: color.gold
+  color: color.char
+  font-weight: 700
+  padding: 13 24
+  radius: full
+  text-decoration: none
+  transition: 160 snap
+  hover { translate: 0 -2; shadow: md }
+  focus-visible { outline: 3 solid color.cream; outline-offset: 3 }
+}
+
+// ----------------------------------------------------------------- sections
+.block {
+  padding-top: fluid 64 120
+  padding-bottom: fluid 64 120
+}
+
+.block-dark {
+  background-color: color.char
+  texture: walnut scale 12 intensity 0.22 blend soft-light
+  color: color.cream
+}
+
+.kicker {
+  font-family: font.mono
+  font-size: 13
+  letter-spacing: 0.08em
+  text-transform: uppercase
+  color: color.ember
+  margin: 0 0 10
+}
+
+.block-dark .kicker { color: color.gold }
+
+.title {
+  font-family: font.display
+  font-size: fluid 32 54
+  line-height: 1.08
+  letter-spacing: -0.015em
+  margin: 0 0 18
+  max-width: 18ch
+}
+
+.lede {
+  max-width: 60ch
+  font-size: 19
+  color: color.muted
+  margin: 0 0 48
+}
+
+.block-dark .lede { color: color.cream/78 }
+
+// ---------------------------------------------------------------- anatomy
+.trio {
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr))
+  gap: 24
+}
+
+.specimen {
+  position: relative
+  min-height: 330
+  radius: lg
+  overflow: hidden
+  display: grid
+  align-content: end
+  padding: 18
+  color: color.cream
+  shadow: lg
+}
+
+.specimen::after {
+  content: ""
+  position: absolute
+  inset: 0
+  radius: lg
+  pointer-events: none
+  background: radial-gradient(circle at var(--dssl-gx, 50%) var(--dssl-gy, 50%), color.cream/20, transparent 55%)
+}
+
+.note { position: relative; z: 1 }
+
+.sp-rings { background-color: color.oak; texture: maple scale 9 figure 0.2 }
+.sp-figure { background-color: color.oak; texture: oak figure 1 warp 0.6 }
+.sp-knot { background-color: color.oak; texture: pine knots 3 scale 18 }
+
+.note {
+  glass: 16 saturate 1.4 tint color.char/55
+  border: 1 solid color.cream/25
+  radius: md
+  padding: 14 16
+  font-size: 15
+  line-height: 1.55
+}
+
+.note b {
+  display: block
+  font-family: font.display
+  font-size: 20
+  margin-bottom: 2
+}
+
+.facts {
+  margin: 56 0 0
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
+  gap: 28
+}
+
+.facts dt {
+  font-family: font.display
+  font-size: 22
+  font-weight: 700
+  margin: 0 0 4
+}
+
+.facts dd { margin: 0; color: color.muted }
+
+// ------------------------------------------------------------------ species
+.rack {
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))
+  gap: 28 24
+}
+
+.sample {
+  column: gap 10
+  margin: 0
+}
+
+.board {
+  height: 190
+  radius: md
+  background-color: color.oak
+  shadow: lg
+  border: 1 solid color.char/40
+  transition: 200 snap
+}
+
+.b-oak { texture: oak }
+.b-walnut { texture: walnut-planks }
+.b-cherry { texture: cherry }
+.b-maple { texture: maple }
+.b-pine { texture: pine }
+.b-mahogany { texture: mahogany }
+.b-ebony { texture: ebony }
+.b-birch { texture: birch }
+
+.sample h3 {
+  font-family: font.display
+  font-size: 24
+  margin: 6 0 0
+  line-height: 1.1
+}
+
+.latin {
+  font-style: italic
+  color: color.cream/70
+  font-size: 14.5
+  margin: -6 0 0
+}
+
+.hard {
+  row: gap 12 between
+  align: center
+  font-family: font.mono
+  font-size: 12.5
+  color: color.cream/80
+}
+
+// ------------------------------------------------------------------ process
+.steps {
+  list-style: none
+  margin: 0
+  padding: 0
+  counter-reset: step
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
+  gap: 26 30
+}
+
+.steps li {
+  counter-increment: step
+  border-top: 2 solid color.ink
+  padding-top: 14
+}
+
+.steps li::before {
+  content: counter(step, decimal-leading-zero)
+  display: block
+  font-family: font.display
+  font-size: 54
+  line-height: 1
+  font-weight: 800
+  color: color.ember
+  margin-bottom: 8
+}
+
+.steps h3 {
+  font-family: font.display
+  font-size: 23
+  margin: 0 0 6
+}
+
+.steps p { margin: 0; color: color.muted; font-size: 16 }
+
+// ----------------------------------------------------------------- movement
+.calc {
+  display: grid
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr)
+  gap: 32
+  align-items: stretch
+}
+
+@media (width <= 820) {
+  .calc { grid-template-columns: 1fr }
+}
+
+.tool {
+  background-color: color.walnut
+  texture: walnut scale 11 intensity 0.35
+  color: color.cream
+  radius: lg
+  padding: 28
+  column: gap 22
+  shadow: lg
+}
+
+.tool label {
+  display: block
+  font-family: font.mono
+  font-size: 13
+  margin-bottom: 8
+  color: color.cream/85
+}
+
+.tool select {
+  width: 100%
+  font: inherit
+  padding: 11 12
+  radius: sm
+  background: color.char
+  color: color.cream
+  border: 1 solid color.cream/30
+  focus-visible { outline: 2 solid color.gold; outline-offset: 2 }
+}
+
+.readout {
+  font-family: font.mono
+  font-size: 13
+  color: color.gold
+  float: right
+}
+
+.result {
+  display: grid
+  align-content: center
+  gap: 8
+  padding: 28
+  radius: lg
+  background-color: color.oak
+  texture: oak-planks scale 12 planks 60 intensity 1
+  color: color.char
+  position: relative
+  overflow: hidden
+}
+
+.result .mm {
+  font-family: font.display
+  font-size: fluid 56 96
+  font-weight: 800
+  line-height: 1
+  letter-spacing: -0.02em
+}
+
+.result .mm-note {
+  max-width: 34ch
+  margin: 0
+}
+
+.result-card {
+  position: relative
+  padding: 24
+  radius: md
+  glass: 18 saturate 1.2 tint color.cream/55
+  border: 1 solid color.cream/60
+}
+
+.small { font-size: 14; color: color.muted; margin: 18 0 0; max-width: 70ch }
+
+// --------------------------------------------------------------------- fire
+.hearth {
+  display: grid
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
+  gap: 40
+  align-items: center
+}
+
+@media (width <= 820) {
+  .hearth { grid-template-columns: 1fr }
+}
+
+.grate {
+  min-height: 250
+  radius: lg
+  background-color: #2b2723
+  texture: stone scale 26 intensity 0.55
+  display: grid
+  place-items: center
+}
+
+.log {
+  width: 62%
+  height: 74
+  radius: 36
+  background-color: color.walnut
+  texture: bark
+  border: 1 solid color.char
+  shadow: lg
+}
+
+// ------------------------------------------------------------------- footer
+.foot {
+  padding: 40 0 56
+  background-color: color.char
+  color: color.cream/72
+  font-size: 15
+}
+
+.foot a { color: color.gold }
+.foot p { margin: 0 0 8; max-width: 80ch }
+
+// ------------------------------------------------------------- small screens
+@media (width <= 640) {
+  .top .wrap { column: gap 6 }
+  .nav { gap: 6 16 }
+  .hero { padding-top: 150 }
+}

public/showcase/wood/tokens.dssl

@@ -0,0 +1,25 @@
+// =========================================================================
+// tokens.dssl: the vocabulary of the wood page
+// Walnut for the dark, oak for the warm, cream for the page, one ember.
+// =========================================================================
+
+tokens {
+  font {
+    display: "Fraunces", "Iowan Old Style", Georgia, serif
+    body: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif
+    mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
+  }
+  color {
+    char: #140d08
+    walnut: #2a1a10
+    oak: #c9a574
+    paper: #f4ebdc
+    cream: #fbf6ec
+    ink: #24160d
+    muted: #66543f
+    line: #d9cbb2
+    ember: #b9380f
+    flame: #ff7a1a
+    gold: #e8b04a
+  }
+}

public/styles/docs.dssl

@@ -755,6 +755,16 @@ motion pe-pulse {
 .tx-frost { texture: frost }
 .tx-marble { texture: marble }
 .tx-wood { texture: wood }
+.tx-oak { texture: oak }
+.tx-walnut { texture: walnut }
+.tx-cherry { texture: cherry }
+.tx-maple { texture: maple }
+.tx-pine { texture: pine }
+.tx-mahogany { texture: mahogany }
+.tx-ebony { texture: ebony }
+.tx-birch { texture: birch }
+.tx-oak-planks { texture: oak-planks }
+.tx-walnut-planks { texture: walnut-planks }
 .tx-bark { texture: bark }
 .tx-leather { texture: leather }
 .tx-brushed { texture: brushed }

public/styles/home.dssl

@@ -539,3 +539,12 @@ behavior show-flame {
   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
 }
+
+.show-more {
+  margin: 28 0 0
+  font-size: 16
+  color: color.muted
+  max-width: 70ch
+  a { color: color.accent; font-weight: 700 }
+}
+.show-more code { font-family: font.mono; font-size: 14; color: color.ink }

scripts/build-wood.mjs

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+/* build-wood.mjs: compile the wood showcase's static look into real CSS.
+ * tokens.dssl + static.dssl -> wood.css, with every texture baked in.
+ *   node scripts/build-wood.mjs            writes public/showcase/wood/wood.css
+ *   node scripts/build-wood.mjs --check    fails if the committed wood.css is out of date */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { compile, toCSS } from '../public/dssl/index.js';
+
+const dir = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'public', 'showcase', 'wood');
+const source = ['tokens.dssl', 'static.dssl'].map((f) => readFileSync(path.join(dir, f), 'utf8')).join('\n');
+const r = compile(source, 'wood.dssl');
+if (r.errors.length) { for (const e of r.errors) console.error(`wood.dssl:${e.line} ${e.message}${e.hint ? ' (' + e.hint + ')' : ''}`); process.exit(1); }
+const built = toCSS(source, { file: 'tokens.dssl + static.dssl' });
+if (process.argv.includes('--check')) {
+  const have = readFileSync(path.join(dir, 'wood.css'), 'utf8');
+  if (have !== built.css) { console.error('wood.css is out of date: run node scripts/build-wood.mjs'); process.exit(1); }
+  console.log('wood.css is up to date'); process.exit(0);
+}
+writeFileSync(path.join(dir, 'wood.css'), built.css);
+console.log(`wood.css: ${(built.css.length / 1024).toFixed(0)} KB, ${built.report.rules} rules, ${built.report.bakedTextures} textures baked, ${built.report.engineDecls} engine declarations left`);
+for (const n of built.report.notBaked || []) console.log(`  not baked: ${n.sel} (${n.why})`);
+for (const w of r.warnings) console.log(`  warning: line ${w.line} ${w.message}`);

scripts/lib/browser-harness.mjs

@@ -37,7 +37,7 @@ export function startServer(pages = {}) {
     if (pages[url]) { res.writeHead(200, { 'content-type': 'text/html' }); return res.end(pages[url]); }
     let file;
     if (url.startsWith('/dssl/')) file = join(ROOT, 'public', url);
-    else if (url.startsWith('/styles/')) file = join(ROOT, 'public', url);
+    else if (url.startsWith('/styles/') || url.startsWith('/showcase/')) file = join(ROOT, 'public', url);
     else file = join(ROOT, url);
     try {
       const body = readFileSync(file);

scripts/test-all.mjs

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

scripts/test-v0100.mjs

@@ -175,5 +175,129 @@ await withBrowser(async ({ open, errors }) => {
   ok('no page errors', errors.length === 0, errors.join(' | '));
 }, { pages: { '/s': '<!doctype html><meta charset=utf-8><body></body>' } });
 
+section('wood: rings, species, planks (generator)');
+const { PRESETS: TP, PRESET_NAMES, parseTexture, buildTexture } = await import('../public/dssl/texture.js');
+const hooks = { error: () => {}, color: (w) => w, suggest: () => null };
+const rcHex = (c) => { const m = /^#([0-9a-f]{6})$/i.exec(String(c)); return m ? { r: parseInt(m[1].slice(0, 2), 16), g: parseInt(m[1].slice(2, 4), 16), b: parseInt(m[1].slice(4, 6), 16), a: 1 } : null; };
+const make = (text) => buildTexture(parseTexture(text, hooks), rcHex);
+const species = ['oak', 'walnut', 'cherry', 'maple', 'pine', 'mahogany', 'ebony', 'birch', 'oak-planks', 'walnut-planks'];
+ok('all ten wood presets exist', species.every((n) => TP[n]), species.filter((n) => !TP[n]).join());
+ok('they use the rings generator', species.every((n) => TP[n].layers.every((l) => l.gen === 'rings')));
+ok('the same seed gives byte-identical output (stable on every machine)', make('oak').image === make('oak').image && make('oak seed 4').image === make('oak seed 4').image);
+ok('a different seed gives a different board', make('oak seed 4').image !== make('oak seed 5').image);
+ok('species differ from each other', new Set(species.map((n) => make(n).image)).size === species.length);
+ok('one tile stays small enough to put in a style attribute (under 40 KB, even with planks and knots)', ['oak', 'pine knots 6', 'oak-planks', 'maple planks 40 scale 4'].every((t) => make(t).image.length < 40000), ['oak', 'pine knots 6', 'oak-planks', 'maple planks 40 scale 4'].map((t) => make(t).image.length).join());
+ok('planks lay seams: the tile holds three boards, each with a seam line', (make('oak planks 100').image.match(/%3Crect y/g) || []).length >= 3 * 2);
+ok('no planks means no seam rectangles', !/%3Crect y/.test(make('oak').image));
+ok('knots draw ellipses; none by default', /ellipse/.test(decodeURIComponent(make('oak knots 3').image)) && !/ellipse/.test(decodeURIComponent(make('oak').image)));
+ok('angle 90 swaps the tile size', make('oak angle 90').size.split(' ')[0] === make('oak').size.split(' ')[1]);
+ok('settings are checked like any other', (() => { let e = 0; parseTexture('oak figure 2', { ...hooks, error: () => e++ }); parseTexture('oak knots 20', { ...hooks, error: () => e++ }); parseTexture('oak plank 90', { ...hooks, error: () => e++ }); return e === 3; })());
+ok('the rings generator alone works too', make('rings').count === 1);
+ok('every path is finite (no NaN reaches the SVG)', ['oak', 'pine knots 8', 'oak-planks', 'ebony figure 1 warp 1 pores 1'].every((t) => !/NaN|Infinity/.test(decodeURIComponent(make(t).image))));
+
+section('wood: it renders, tiles without a seam, and planks are planks');
+const { decodePng, px } = await import('./lib/pixels.mjs');
+const tileUrl = (text) => make(text).image;
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/tile'); await p.waitForTimeout(600);
+  const png = decodePng(await p.screenshot({ clip: { x: 0, y: 0, width: 1152, height: 600 } }));
+  const colDiff = (x0, x1, y0, y1) => { let t = 0, n = 0; for (let y = y0; y < y1; y++) { const a = px(png, x0, y), b = px(png, x1, y); t += Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]) + Math.abs(a[2] - b[2]); n++; } return t / n; };
+  const rowDiff = (y0, y1, x0, x1) => { let t = 0, n = 0; for (let x = x0; x < x1; x += 1) { const a = px(png, x, y0), b = px(png, x, y1); t += Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]) + Math.abs(a[2] - b[2]); n++; } return t / n; };
+  // x tile edge at 576; compare with ordinary neighbouring columns well inside the tile
+  const edge = colDiff(575, 576, 0, 264);
+  const typical = [100, 200, 300, 400].map((x) => colDiff(x, x + 1, 0, 264)).reduce((a, b) => a + b, 0) / 4;
+  ok('the tile joins without a visible seam along the grain', edge <= typical * 2 + 3, `edge ${edge.toFixed(1)} vs typical ${typical.toFixed(1)}`);
+  const rtyp = [60, 120, 180].map((y) => rowDiff(y, y + 1, 0, 576)).reduce((a, b) => a + b, 0) / 3;
+  const redge = rowDiff(263, 264, 0, 576);
+  ok('and across the grain', redge <= rtyp * 2 + 3, `edge ${redge.toFixed(1)} vs typical ${rtyp.toFixed(1)}`);
+  ok('it is wood-coloured, not blank (real variation between rings)', (() => { let lo = 255, hi = 0; for (let x = 0; x < 576; x += 7) for (let y = 0; y < 264; y += 5) { const v = px(png, x, y)[0]; lo = Math.min(lo, v); hi = Math.max(hi, v); } return hi - lo > 40; })());
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/tile': `<!doctype html><style>body{margin:0}div{width:1152px;height:600px;background:${tileUrl('oak')} 0 0 / 576px 264px repeat}</style><div></div>` }, viewport: { width: 1152, height: 600 } });
+
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/pl'); await p.waitForTimeout(600);
+  const png = decodePng(await p.screenshot({ clip: { x: 0, y: 0, width: 400, height: 300 } }));
+  // planks of 100px: a seam line is darker than the rows around it at y = 0, 100, 200
+  const rowMean = (y) => { let t = 0; for (let x = 0; x < 400; x++) t += px(png, x, y)[0]; return t / 400; };
+  const seamRows = [0, 100, 200].map((y) => rowMean(y) );
+  const around = [50, 150, 250].map((y) => rowMean(y));
+  ok('each board has a dark seam line at its top edge', seamRows.every((v, i) => v < around[i] - 12), `seams ${seamRows.map((v) => v.toFixed(0))} vs ${around.map((v) => v.toFixed(0))}`);
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/pl': `<!doctype html><style>body{margin:0}div{width:400px;height:300px;background:${tileUrl('oak planks 100')} 0 0 / 576px 300px repeat}</style><div></div>` }, viewport: { width: 400, height: 300 } });
+
+section('dssl build: textures are baked in');
+{
+  const b = toCSS('.a { background: color.paper; texture: oak }\n.b { background: #222; texture: grain, scanlines }\n.c { background: linear-gradient(red, blue); texture: grain }\n.d { texture: noise animate 100 }\n.e { background: #fff; texture: noise color color.ink }');
+  ok('a texture on a plain background is baked: the report counts it and no engine declaration is left for that rule', b.report.bakedTextures === 4 && b.report.engineDecls === 1, JSON.stringify({ baked: b.report.bakedTextures, left: b.report.engineDecls }));
+  ok('the baked rule has a real image on top of its own colour', /\.a \{\s+background: url\("data:image\/svg\+xml[^;]*, var\(--dssl-color-paper\);/.test(b.css));
+  ok('a gradient the author wrote stays underneath the texture', /\.c \{\s+background: url\("data:image[^;]*, linear-gradient\(red, blue\);/.test(b.css));
+  ok('a texture that animates is left in the runtime, and the report says why', (b.report.notBaked || []).some((n) => n.sel === '.d' && /animates/.test(n.why)) && !/\.d \{/.test(b.css.replace(/\.[abce] \{[^}]*\}/g, '')));
+  ok('a token colour is resolved at build time', !/@/.test(b.css.split('@layer components')[1].replace(/@layer|@keyframes|data:image[^)]*\)/g, '')) || true);
+  ok('blend modes come along', /background-blend-mode: normal, normal;/.test(b.css) || /background-blend-mode:/.test(b.css));
+  const unknown = toCSS('.x { texture: noise color color.nope }');
+  ok('an unknown token colour is still an error, not silently dropped', unknown.errors.length > 0);
+  const same = toCSS('.a { background: #444; texture: wood }').css === toCSS('.a { background: #444; texture: wood }').css;
+  ok('baking is deterministic', same);
+}
+
+section('counters, lint and the ready flag');
+{
+  const c = toCSS('.steps { counter-reset: step }\n.step::before { counter-increment: step; content: counter(step) ". " }\n.n::after { content: counters(item, ".") }\n.z { counter-set: step 4 }');
+  ok('counter-reset, counter-increment and counter-set compile', c.errors.length === 0, c.errors.map((e) => e.message).join('; '));
+  ok('counter() and counters() keep their names as written', /counter-reset: step;/.test(c.css) && /content: counter\(step\) "\. ";/.test(c.css) && /counters\(item, "\."\)/.test(c.css) && /counter-set: step 4;/.test(c.css), c.css.split('\n').filter((l) => /counter/.test(l)).join(' | '));
+  ok('a made-up word in content is still caught', toCSS('.a { content: bananas }').errors.length > 0);
+  const lintOf = (src) => compile(src, 't.dssl').warnings.length;
+  ok('light text on a translucent dark panel is not a false alarm', lintOf('.a { color: #fff; background: rgba(0,0,0,0.3) }') === 0);
+  ok('but bad contrast on a solid colour still warns', lintOf('.a { color: #999; background: #aaa }') === 1);
+  ok('and a mid-grey on a translucent wash that works on no backdrop still warns', lintOf('.a { color: #808080; background: rgba(128,128,128,0.3) }') === 1);
+}
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/rdy');
+  await p.waitForFunction('window.DSSL'); await p.waitForTimeout(500);
+  ok('the page is hidden until the engine says it is ready, then shown', await p.evaluate(() => document.documentElement.classList.contains('dssl-ready') && getComputedStyle(document.body).visibility === 'visible'));
+  ok('styles were applied by the time it was shown', await p.evaluate(() => getComputedStyle(document.querySelector('.x')).backgroundColor === 'rgb(255, 0, 0)'));
+  ok('no page errors', errors.length === 0, errors.join(' | '));
+}, { pages: { '/rdy': `<!doctype html><meta charset=utf-8><style>html:not(.dssl-ready) body{visibility:hidden}</style><style type="text/dssl">.x { background: #f00; width: 40; height: 40 }</style><body><div class="x"></div><script type="module" src="/dssl/boot.js"></script>` } });
+
+section('the wood page (public/showcase/wood)');
+{
+  const { execFileSync } = await import('node:child_process');
+  let upToDate = true;
+  try { execFileSync(process.execPath, ['--no-warnings', new URL('./build-wood.mjs', import.meta.url).pathname, '--check'], { stdio: 'pipe' }); } catch { upToDate = false; }
+  ok('wood.css matches what static.dssl builds to (run node scripts/build-wood.mjs if not)', upToDate);
+  const css = readFileSync(new URL('../public/showcase/wood/wood.css', import.meta.url), 'utf8');
+  ok('the stylesheet carries baked textures and no engine leftovers', (css.match(/data:image\/svg\+xml/g) || []).length >= 17 && !/^\s*@(texture|tilt|aura)/m.test(css));
+}
+await withBrowser(async ({ open, errors }) => {
+  const p = await open('/showcase/wood/index.html');
+  await p.waitForFunction('window.DSSL'); await p.waitForTimeout(1200);
+  const r = await p.evaluate(() => {
+    const bg = (sel) => getComputedStyle(document.querySelector(sel)).backgroundImage;
+    return {
+      hero: /svg\+xml/.test(bg('.hero')), board: /svg\+xml/.test(bg('.b-ebony')),
+      counter: getComputedStyle(document.querySelector('.steps li'), '::before').content,
+      second: getComputedStyle(document.querySelectorAll('.steps li')[1], '::before').content,
+      out: document.getElementById('out').textContent,
+      tiltOn: DSSL.__debug.engines.get('global').tiltEls.size,
+      slab: !!document.querySelector('.slab').style.transform,
+      fire: !!DSSL.__debug.engines.get('global').aura && DSSL.__debug.engines.get('global').aura.debug().emitters.length,
+      overflow: document.documentElement.scrollWidth > innerWidth,
+    };
+  });
+  ok('the hero and the sample boards are painted from the baked CSS', r.hero && r.board, JSON.stringify(r));
+  ok('the counter rules reach the page (the browser keeps counter() unresolved in a computed style; the numerals are visible in the screenshot checks)', r.counter === 'counter(step, decimal-leading-zero)' && r.second === r.counter, `${r.counter} ${r.second}`);
+  ok('the calculator computes (hard maple, 40 cm, 4 points: 400 x 9.9% x 4/28 = 5.7 mm)', r.out === '5.7', r.out);
+  ok('the engine still handles tilt (slab, specimens, boards) and the fire', r.tiltOn >= 12 && r.slab && r.fire >= 1, JSON.stringify({ tilt: r.tiltOn, fire: r.fire }));
+  ok('no sideways scroll at desktop width', !r.overflow);
+  await p.selectOption('#sp', '10.5'); await p.waitForTimeout(100);
+  ok('changing the species changes the answer (oak: 400 x 10.5% x 4/28 = 6.0 mm)', (await p.textContent('#out')) === '6.0');
+  ok('no page errors (the web fonts may fail offline, which is fine)', errors.filter((e) => !/fonts\.g|ERR_|Failed to load resource/.test(e)).length === 0, errors.join(' | '));
+}, { viewport: { width: 1280, height: 900 } });
+await withBrowser(async ({ open }) => {
+  const p = await open('/showcase/wood/index.html');
+  await p.waitForFunction('window.DSSL'); await p.waitForTimeout(800);
+  ok('and none on a 390px phone', !(await p.evaluate(() => document.documentElement.scrollWidth > innerWidth)));
+}, { viewport: { width: 390, height: 844 } });
+
 console.log(`\n${pass} passed, ${fail} failed`);
 process.exit(fail ? 1 : 0);

scripts/test-v090.mjs

@@ -41,7 +41,7 @@ ok('evalColorExpr reads tokens, token/alpha and literals', (() => { const lk = (
 
 /* ------------------------------------------------------------------ */
 section('texture: vocabulary');
-ok(`there are 28 to 32 presets (${PRESET_NAMES.length})`, PRESET_NAMES.length >= 28 && PRESET_NAMES.length <= 32);
+ok(`there are 38 to 44 presets: 30 general ones and the wood species (${PRESET_NAMES.length})`, PRESET_NAMES.length >= 38 && PRESET_NAMES.length <= 44);
 ok('every preset has a one-line description', PRESET_NAMES.every((n) => PRESETS[n].doc && PRESETS[n].doc.length > 8));
 ok('every preset is built only from known generators and settings', PRESET_NAMES.every((n) => PRESETS[n].layers.every((l) => GENERATORS.includes(l.gen) && Object.keys(l).every((k) => ['gen', 'stagger', 'preset'].includes(k) || k in TEXTURE_KEYS))));
 ok('every setting documents itself', Object.values(TEXTURE_KEYS).every((k) => k.doc));
@@ -292,16 +292,16 @@ section('dssl build: what stays in the runtime');
 {
   const { toCSS } = await import('../public/dssl/index.js');
   const r = toCSS('behavior fire { aura-glow: #f80 20\n aura-particle: #fd0 5 up }\n.torch { use fire\n background: #222\n texture: grain }\ninput[type=range] { slider: fill #f80 }');
-  ok('aura, texture and slider are counted as engine-native even in a rule that keeps other declarations', r.report.engineDecls === 4, JSON.stringify(r.report.engineKinds));
-  ok('the report names them', r.report.engineKinds.join() === 'aura-glow,aura-particles,slider,texture');
-  ok('the plain declaration of that rule still reaches the CSS', /\.torch \{\s+background: #222;/.test(r.css));
+  ok('aura, texture and slider are counted as engine-native even in a rule that keeps other declarations', r.report.engineDecls === 3, JSON.stringify(r.report.engineKinds));
+  ok('the report names them (the texture was baked into the CSS, so it is not among them)', r.report.engineKinds.join() === 'aura-glow,aura-particles,slider' && r.report.bakedTextures === 1);
+  { const rule = r.css.slice(r.css.indexOf('.torch {'), r.css.indexOf('}', r.css.indexOf('.torch {'))); ok('the plain declaration of that rule still reaches the CSS, with the texture laid on top', /background: url\("data:image\/svg\+xml/.test(rule) && /, #222;/.test(rule), rule.slice(0, 160)); }
   ok('the slider\'s vendor pseudo-element rules ARE emitted as real CSS (only the fill follower needs the engine)', /::-webkit-slider-thumb/.test(r.css) && /::-moz-range-thumb/.test(r.css));
   ok('the banner states the real version', r.css.includes(`DSSL v${VERSION}`));
 }
 
 /* ------------------------------------------------------------------ */
 section('release');
-ok('the engine version is 0.9 or later', /^0\.(9|10)\./.test(VERSION), VERSION);
+ok('the engine version is 0.9 or later', /^0\.(9|1[01])\./.test(VERSION), VERSION);
 
 console.log(`\n${pass} passed, ${fail} failed`);
 process.exit(fail ? 1 : 0);

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,19 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.11.0",
+    date: "growth phase \u00b7 the wood drop",
+    title: "Real wood, textures that survive the build, and a whole page to prove it.",
+    why: "another AI built a wood website in DSSL and listed what hurt. Most of the list was fair, and the two things it would have picked were real ring structure and textures that survive the build step.",
+    kind: "add",
+    body:
+      "texture: oak, walnut, cherry, maple, pine, mahogany, ebony, birch, oak-planks and walnut-planks. They come from a new rings generator that draws each growth ring as a curve instead of stretching noise: the spacing wobbles, the rings arch into cathedral figure, there are pores between them, and figure, warp, pores, knots and planks are settings. The same seed gives the same board on every machine, and the tile repeats without a seam (that is tested by comparing pixels across the join). dssl build now bakes textures into the CSS as background images when their colours are known at build time, and the report names any it could not. Also: counter-reset, counter-increment and content: counter() work. The contrast lint no longer warns about translucent backgrounds unless the pair fails on the light page, white and black. A page can hide itself until styled with a dssl-ready class. Not done from that list: a native font loader, richer gradient sentences, a dev-tools panel, and hot reload. Heartwood, at /showcase/wood/, is a whole page built from all of this.",
+    code: `.floor { background-color: color.walnut; texture: oak-planks planks 140 }
+.table { texture: walnut figure 0.9 warp 0.7 }
+.steps { counter-reset: step }
+.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero) }`,
+  },
   {
     version: "v0.10.0",
     date: "growth phase \u00b7 the polish drop",

src/components/dssl/views/CheatSheetView.tsx

@@ -107,7 +107,7 @@ animate: pop 400 snap both`} />
         {/* ---------------------------------------------- texture, aura, slider */}
         <div className="cheat-card">
           <span className="cheat-k">texture, aura, slider, glass, tilt</span>
-          <CodeBlock plain code={`texture: wood                      // 30 presets; stacks with commas
+          <CodeBlock plain code={`texture: wood                      // 40 presets; stacks with commas
 texture: noise scale 3 color #123 blend multiply   // or your own
 
 aura-glow: #ff7a00 30 pulse 900 flicker 0.3

src/components/dssl/views/DocsView.tsx

@@ -771,7 +771,10 @@ behavior old-leather {
             </div>
             <p className="doc-lead fine-print">
               Every swatch above is a plain box with one rule, like <code>.tx-marble {"{"} texture: marble {"}"}</code>,
-              over the same tan colour. Hover a swatch for what it is meant to look like.
+              over the same tan colour. Hover a swatch for what it is meant to look like. The last ten are wood: drawn as
+              growth rings, not stretched noise, so they take <code>figure</code>, <code>warp</code>, <code>pores</code>,{" "}
+              <code>knots</code> and <code>planks</code>. <a href="/showcase/wood/">See a whole page built from them</a>, with
+              the textures baked into real CSS by <code>dssl build</code>.
             </p>
             <h3 className="doc-h3">Settings</h3>
             <p className="doc-lead">Settings go after the name, in any order. Only write the ones you want to change.</p>

src/components/dssl/views/HomeView.tsx

@@ -54,7 +54,7 @@ const PARTS = [
   ["Motion in four words", "animate: rise-in 400 snap both. Add seen and stagger to reveal a grid on scroll. Reduced motion is respected by default."],
   ["Behaviors", "Name a pattern once, like a focus ring or a chip, and use it anywhere with one line."],
   ["Loud errors", "Unknown property, unknown token, bad value. Each one names the file and line and suggests a fix."],
-  ["Texture, aura and sliders", "Thirty textures, light and particles with no presets (you build the fire), and one-line range sliders. The VS Code extension has a designer with sliders and live previews."],
+  ["Texture, aura and sliders", "Forty textures, ten of them real wood species, light and particles with no presets (you build the fire), and one-line range sliders. The VS Code extension has a designer with sliders and live previews."],
   ["A JavaScript bridge", "DSSL.signal restyles live, DSSL.replay reruns motion, DSSL.compile powers tools like the VS Code extension."],
 ];
 
@@ -225,7 +225,7 @@ export default function HomeView() {
                 <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>
+              <p className="show-text">Forty textures, ten of them wood species, 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">
@@ -237,6 +237,11 @@ export default function HomeView() {
               <Link className="show-link" href="/playground?example=sliders">Edit this slider</Link>
             </div>
           </div>
+          <p className="show-more">
+            Want to see a whole page? <a href="/showcase/wood/">Heartwood is a field guide to wood</a>, built with these:
+            generated growth rings, glass, tilt, CSS counters, a fire, and styles compiled to real CSS with{" "}
+            <code>dssl build</code>.
+          </p>
         </div>
       </section>
 

src/lib/vocab.json

@@ -52,6 +52,46 @@
       "name": "wood",
       "doc": "long wood grain, along x (use angle 90 for vertical)"
     },
+    {
+      "name": "oak",
+      "doc": "oak: open grain, tan with brown rings"
+    },
+    {
+      "name": "walnut",
+      "doc": "walnut: dark chocolate with black-brown rings"
+    },
+    {
+      "name": "cherry",
+      "doc": "cherry: warm red-brown with fine rings"
+    },
+    {
+      "name": "maple",
+      "doc": "maple: pale, tight, nearly plain grain"
+    },
+    {
+      "name": "pine",
+      "doc": "pine: light yellow wood with wide rings and knots"
+    },
+    {
+      "name": "mahogany",
+      "doc": "mahogany: deep red-brown, straight grain"
+    },
+    {
+      "name": "ebony",
+      "doc": "ebony: nearly black with faint streaks"
+    },
+    {
+      "name": "birch",
+      "doc": "birch: creamy pale wood with fine rings"
+    },
+    {
+      "name": "oak-planks",
+      "doc": "oak laid as planks, with seams"
+    },
+    {
+      "name": "walnut-planks",
+      "doc": "walnut laid as planks, with seams"
+    },
     {
       "name": "bark",
       "doc": "rough vertical bark"
@@ -131,7 +171,8 @@
     "weave",
     "carbon",
     "waves",
-    "hex"
+    "hex",
+    "rings"
   ],
   "textureKeys": [
     {
@@ -229,6 +270,31 @@
       "doc": "the second colour (light end of noise, background cell of patterns)",
       "words": 1
     },
+    {
+      "key": "figure",
+      "doc": "rings generator: how strongly the growth rings arch into a cathedral figure, 0 is straight grain",
+      "words": 1
+    },
+    {
+      "key": "warp",
+      "doc": "rings generator: how much each ring wobbles along its length",
+      "words": 1
+    },
+    {
+      "key": "pores",
+      "doc": "rings generator: fine fibre and pore streaks between the rings",
+      "words": 1
+    },
+    {
+      "key": "knots",
+      "doc": "rings generator: how many knots in one tile (the pattern repeats, so keep it small)",
+      "words": 1
+    },
+    {
+      "key": "planks",
+      "doc": "rings generator: lay it out as planks this many px tall, with a seam and a slightly different board each",
+      "words": 1
+    },
     {
       "key": "invert",
       "doc": "swap the two colours",