v0.5.0: the pseudo-element trap closes — full selectors compile to shadow CSS; infinite/alternate; bare font names; hyphens: manual; docs gained the missing section (+ HomeView get-the-engine sync)

README.md

@@ -48,7 +48,7 @@ Design tokens are built in (`color.paper`, `space.4`, and the `/92` at the end i
 
 This repo eats its own cooking. Everything you see on the website is styled by the engine in `public/dssl/` running the files in `public/styles/`. If the engine breaks, the site shows up naked. That is a feature.
 
-## What works today (v0.4.2)
+## What works today (v0.5.0)
 
 - flexbox layout
 - behaviors and `use`
@@ -56,8 +56,10 @@ This repo eats its own cooking. Everything you see on the website is styled by t
 - seen states and stagger delays
 - per-property transitions
 - visually-hidden
-- themed native scrollbars (vendor pseudo-elements, the shadow CSS exception grown wider)
-- pseudo elements (the one exception: they compile to shadow CSS, because the DOM gives you no other way to reach them)
+- pseudo elements in any spelling: `.card::before`, nested `::before`, or `&::before` (full selectors are split and compiled to shadow CSS, because the DOM gives you no other way to reach them; unknown names, `:seen` mixes and mixed selector lists are loud errors)
+- looping animation: `animate: pulse 1200 infinite alternate`
+- bare font names: `font-family: JetBrains Mono, monospace` and `font.*` tokens without quotes
+- themed native scrollbars (vendor pseudo-elements, trailing states included)
 
 ## Try it
 
@@ -102,7 +104,7 @@ Clone this repo if you want to read the engine. Everything runs in the browser.
 
 ## Status
 
-v0.4.2, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite.
+v0.5.0, experimental, moving fast. The 7.5/10 review's bump condition (fix the silent pseudo-element trap) shipped as the headline of this release. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite.
 
 ## License
 

public/dssl/engine.js

@@ -625,6 +625,8 @@ export class DsslEngine {
         const anim = el.animate(frames, {
           duration: spec.duration, easing: spec.easing,
           delay: spec.delay || 0, fill: spec.fill,
+          iterations: spec.iterations || 1,        // v0.5.0 — `infinite`
+          direction: spec.direction || 'normal',   // v0.5.0 — `alternate`
         });
         anims.set(spec.key, anim);
       } catch { /* WAAPI unsupported property — skip */ }

public/dssl/index.js

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

public/dssl/parser.js

@@ -21,7 +21,11 @@ const STATE_WORDS = new Set([
   'seen', // v0.4.0 — engine-native: fires once when the element enters the viewport
 ]);
 
-const PSEUDO_ELEMENTS = new Set([
+// v0.5.0 — exported so the resolver can validate the `::name` half whenever a
+// full selector (.card::before) carries a pseudo-element. The resolver splits
+// those into element + pseudo and routes them into shadow CSS — previously a
+// top-level `.card::before { }` compiled ok and then matched NOTHING.
+export const PSEUDO_ELEMENTS = new Set([
   'before', 'after', 'placeholder', 'selection', 'marker',
   'first-line', 'first-letter', 'backdrop', 'file-selector-button',
 ]);
@@ -30,7 +34,7 @@ const PSEUDO_ELEMENTS = new Set([
 // and friends). The DOM gives you no other way to reach native scrollbars,
 // so they ride the same shadow-CSS exception as ::before/::after. The name
 // may carry trailing state (::hover, :horizontal) — it is emitted as-is.
-const VENDOR_PSEUDO = /^-(webkit|moz|ms)-/;
+export const VENDOR_PSEUDO = /^-(webkit|moz|ms)-/;
 
 /** find index of first top-level occurrence of `ch` (skips strings + parens) */
 function scanFor(str, ch, from = 0) {

public/dssl/resolver.js

@@ -18,6 +18,9 @@
  * ========================================================================= */
 
 import { levenshtein, didYouMean } from './utils.js';
+// v0.5.0 — the resolver validates the `::name` half of full selectors so a
+// typo like .card::befor is a LOUD error, never a silently dead rule.
+import { PSEUDO_ELEMENTS, VENDOR_PSEUDO } from './parser.js';
 
 /* ------------------------------------------------------------------ *
  * Vocabulary
@@ -54,6 +57,9 @@ const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,none,au
   'isolate,plaintext,sideways,upright,mixed,ltr,rtl,transform,auto,' +
   '-webkit-box,-webkit-inline-box,' +
   'thin,thick,medium,separate,collapse,vertical,horizontal,balance,pretty,orphans,' +
+  // v0.5.0 — hyphens: manual used to be rejected ("unknown value") even though
+  // the property existed; plus the rendering keywords people actually type.
+  'manual,pixelated,crisp-edges,optimizeSpeed,optimizeLegibility,geometricPrecision,' +
   'flex-start,flex-end,self-start,self-end,snap-block,snap-inline').split(','));
 
 const UNITLESS_PROPS = new Set([
@@ -241,6 +247,14 @@ function resolveValue(raw, ctx) {
         continue;
       }
 
+      // v0.5.0 — font names are proper nouns: JetBrains Mono, IBM Plex Serif.
+      // In font-family values and font.* tokens, bare multi-word names pass
+      // through instead of demanding quotes. Everywhere else stays loud.
+      if (ctx.bareIdents && /^[A-Za-z][A-Za-z0-9_-]*$/.test(ident)) {
+        out += ident;
+        continue;
+      }
+
       err(`unknown value "${ident}" for property "${ctx.prop}"`,
         didYouMean(ident, [...ctx.tokenNames, ...CSS_KEYWORDS]));
       out += ident; // keep going so the rest still resolves
@@ -523,7 +537,11 @@ const SEMANTIC = {
       }
       if (EASINGS[a]) { spec.easing = EASINGS[a]; continue; }
       if (['both', 'forwards', 'backwards', 'none', 'auto'].includes(a)) { spec.fill = a; continue; }
-      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown animate part "${a}"`, hint: didYouMean(a, Object.keys(EASINGS).concat(['both', 'forwards', 'backwards'])) });
+      // v0.5.0 — looping: `infinite` runs forever, `alternate` ping-pongs.
+      // animate: pulse 1600 infinite alternate  — was impossible before.
+      if (a === 'infinite') { spec.iterations = Infinity; continue; }
+      if (['alternate', 'alternate-reverse', 'reverse', 'normal'].includes(a)) { spec.direction = a; continue; }
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown animate part "${a}"`, hint: didYouMean(a, Object.keys(EASINGS).concat(['both', 'forwards', 'backwards', 'infinite', 'alternate'])) });
     }
     return [{ prop: '@animate', value: spec }];
   },
@@ -559,7 +577,7 @@ function resolveDecl(prop, value, ctx) {
     const outProp = prop.includes('.')
       ? '--dssl-' + prop.slice(2).replace(/\./g, '-')
       : prop;
-    return [{ prop: outProp, value: resolveValue(value, { ...ctx2, unitless: false }) }];
+    return [{ prop: outProp, value: resolveValue(value, { ...ctx2, unitless: false, bareIdents: true }) }];
   }
 
   const sem = SEMANTIC[prop];
@@ -573,7 +591,7 @@ function resolveDecl(prop, value, ctx) {
     });
     return [];
   }
-  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop) }) }];
+  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop), bareIdents: prop === 'font-family' }) }];
 }
 
 /* ------------------------------------------------------------------ *
@@ -722,7 +740,8 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
     for (const key of keys) {
       const raw = tokenMap.get(key);
       const prop = '--dssl-' + key.replace(/\./g, '-');
-      decls.push({ prop, value: resolveValue(raw, { ...ctxBase, prop: key }) });
+      // font.* tokens hold font stacks — proper nouns, not keywords (v0.5.0)
+      decls.push({ prop, value: resolveValue(raw, { ...ctxBase, prop: key, bareIdents: /^font/.test(key) }) });
     }
     if (!decls.length) return null;
     return {
@@ -850,6 +869,45 @@ export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
       errors.push({ file, line, message: 'declarations must live inside a selector', hint: 'top-level blocks are tokens, behavior, motion, @layer, @media… — or a selector like .card' });
       return;
     }
+    // v0.5.0 — the pseudo-element trap fix. A full selector like `.card::before`
+    // used to compile ok and then match NOTHING: inline styles can never reach
+    // pseudo-elements. Now the selector is split into element + pseudo halves
+    // and the rule rides the shadow-CSS pipeline — exactly what the nested
+    // form (`.card { ::before { } }`) always did. Both forms are now one thing.
+    const ps = analyzePseudo(ctx.sel);
+    if (ps.mode === 'all') {
+      // parity with the nested path: bare `content:` becomes content: ""
+      const decls = sub.decls.map(d => d.prop === 'content' && d.value === '' ? { ...d, value: '""' } : d);
+      for (const { el, pseudo } of ps.parts) {
+        const name = pseudo.split(/[\s:(]/)[0];
+        if (!PSEUDO_ELEMENTS.has(name) && !VENDOR_PSEUDO.test(name)) {
+          errors.push({
+            file, line,
+            message: `unknown pseudo-element "::${pseudo}"`,
+            hint: 'try ::before, ::after, ::selection, or a vendor one like ::-webkit-scrollbar-thumb',
+          });
+          continue;
+        }
+        if (/:seen\b/.test(el)) {
+          errors.push({
+            file, line,
+            message: `the engine-native "seen" state can't combine with "::${name}" in shadow CSS`,
+            hint: 'style the element itself in a seen { } block instead',
+          });
+          continue;
+        }
+        shadowRules.push({
+          id: ruleId++, sel: el, pseudo,
+          media: ctx.media, signals: ctx.signals, containers: ctx.containers,
+          layer: ctx.layer, order: order++, decls, file, line,
+        });
+      }
+      return;
+    }
+    if (ps.mode === 'mixed') {
+      errors.push({ file, line, message: `selector list mixes pseudo-element and plain selectors: "${ctx.sel}"`, hint: 'split it into two rules — one for the pseudo-element, one for the rest' });
+      return;
+    }
     rules.push({
       id: ruleId++, sel: ctx.sel, media: ctx.media, signals: ctx.signals,
       containers: ctx.containers, layer: ctx.layer, order: order++,
@@ -897,6 +955,48 @@ function combine(parent, child) {
   return parent + ' ' + child;
 }
 
+/* v0.5.0 — where does a selector carry a pseudo-element?
+ *   'none'  — plain selector, inline-style path
+ *   'all'   — every comma-part has one: { parts: [{ el, pseudo }] } → shadow CSS
+ *   'mixed' — some parts have one, some don't → loud error (split the list)
+ * The `::` scan is string- and paren-aware so [data-x="::a"] can't false-hit. */
+function analyzePseudo(sel) {
+  // top-level comma split
+  const parts = [];
+  let depth = 0, q = null, cur = '';
+  for (const ch of sel) {
+    if (q) { cur += ch; if (ch === q) q = null; continue; }
+    if (ch === '"' || ch === "'") { q = ch; cur += ch; continue; }
+    if (ch === '(' || ch === '[') depth++;
+    else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+    if (ch === ',' && depth === 0) { parts.push(cur); cur = ''; continue; }
+    cur += ch;
+  }
+  parts.push(cur);
+
+  const splits = [];
+  let withPseudo = 0;
+  for (const part of parts) {
+    let idx = -1; depth = 0; q = null;
+    for (let i = 0; i < part.length - 1; i++) {
+      const ch = part[i];
+      if (q) { if (ch === q && part[i - 1] !== '\\') q = null; continue; }
+      if (ch === '"' || ch === "'") { q = ch; continue; }
+      if (ch === '(' || ch === '[') depth++;
+      else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+      else if (depth === 0 && ch === ':' && part[i + 1] === ':') { idx = i; break; }
+    }
+    if (idx === -1) { splits.push(null); continue; }
+    withPseudo++;
+    const el = part.slice(0, idx).trim();
+    const pseudo = part.slice(idx + 2).trim();
+    splits.push(el && pseudo ? { el, pseudo } : null);
+  }
+  if (withPseudo === 0) return { mode: 'none' };
+  if (withPseudo !== parts.length || splits.some(s => !s)) return { mode: 'mixed', parts: splits };
+  return { mode: 'all', parts: splits };
+}
+
 const STATE_SCAN = /:(hover|focus-visible|focus|active|disabled|checked|empty|target|invalid|valid|required|open|closed|read-only|read-write|placeholder-shown|first-child|last-child|only-child|seen)\b/g;
 function scanStates(sel) {
   const s = new Set();

public/styles/docs.dssl

@@ -117,8 +117,15 @@
 }
 
 // tables (semantic property reference, spec votes, …)
+// v0.5 — display: block + fit-content + internal scroll: the raw table's
+// min-content width (705px) used to push the whole page past 360px viewports
+// — the last un-swept overflow on this page. Same rules, now owned by the
+// stylesheet that actually styles the table, so last-word-wins stays honest.
 .tbl {
-  width: 100%
+  display: block
+  width: fit-content
+  max-width: 100%
+  overflow-x: auto
   border-collapse: collapse
   font-size: 13.5
 }
@@ -488,3 +495,49 @@ motion rise-in {
   font-size: 12.5
   color: color.muted
 }
+
+// =========================================================================
+// v0.5 — the pseudo-elements section's live demo. The rules below are
+// written in the FULL-SELECTOR form (.pe-tag::before) — the spelling that
+// used to compile ok and then match nothing. The demo renders right only
+// if the trap stays closed. The dot is also the site's first `infinite`
+// animation, so v0.5 dogfoods both headline features at once.
+// =========================================================================
+
+motion pe-pulse {
+  from { opacity: 1 }
+  to { opacity: 0.2 }
+}
+
+.pe-demo {
+  row: gap 12 center wrap
+  padding: space.4 space.5
+  background: color.card
+  border: 1 solid color.line
+  radius: sm
+}
+
+.pe-tag {
+  font: 13 color.muted
+}
+
+.pe-tag::before {
+  content: ""
+  display: inline-block
+  size: 10
+  background: color.accent
+  radius: 3
+  margin-inline-end: 8
+}
+
+.pe-dot {
+  size: 12
+  radius: full
+  background: color.accent
+  animate: pe-pulse 1200 infinite alternate
+}
+
+.pe-tail {
+  font: 12 color.muted
+  font-style: italic
+}

scripts/test-v050.mjs

@@ -0,0 +1,196 @@
+/* v0.5.0 regression tests — the review complaints, verbatim scenarios:
+ *  1. ".card::before { } compiles ok: true and then matches nothing" → now a real shadow rule
+ *  2. animate has no infinite → infinite + alternate accepted, WAAPI spec carries them
+ *  3. quoted-only font names in tokens → bare names pass in font-family + font.* tokens
+ *  4. hyphens: manual rejected → accepted
+ *  + loud errors preserved: unknown pseudo, :seen in shadow, mixed lists, still-loud values
+ */
+import { parse } from '../public/dssl/parser.js';
+import { resolve } from '../public/dssl/resolver.js';
+
+let pass = 0, fail = 0;
+const check = (name, cond, extra = '') => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra ? '  — ' + extra : ''}`); }
+};
+
+function compile(src) {
+  const { ast, errors: parseErrors } = parse(src, 'test.dssl');
+  const doc = resolve(ast, 'test.dssl', null);
+  return { doc, errors: [...parseErrors, ...doc.errors] };
+}
+
+console.log('1. the pseudo-element trap');
+{
+  const { doc, errors } = compile(`
+    .card::before {
+      content: ""
+      background: color.accent
+      width: 12
+    }
+  `);
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  check('inline rules empty (nothing dead)', doc.rules.length === 0);
+  check('one shadow rule', doc.shadowRules.length === 1);
+  const r = doc.shadowRules[0];
+  check('sel split to .card', r.sel === '.card', r.sel);
+  check('pseudo = before', r.pseudo === 'before', r.pseudo);
+  check('content auto-quoted', r.decls.some(d => d.prop === 'content' && d.value === '""'));
+  check('token resolved', r.decls.some(d => d.prop === 'background' && d.value.includes('--dssl-color-accent')));
+}
+
+console.log('2. nested form still works (unchanged)');
+{
+  const { doc, errors } = compile(`
+    .card {
+      ::after { content: "→" }
+      hover { color: color.accent }
+    }
+  `);
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  check('shadow rule via nested', doc.shadowRules.length === 1 && doc.shadowRules[0].pseudo === 'after');
+  check('state rule intact', doc.rules.length === 1 && doc.rules[0].sel === '.card:hover');
+}
+
+console.log('3. &::before inside a block (also was silently dead)');
+{
+  const { doc, errors } = compile(`
+    .card {
+      &::before { content: "" }
+    }
+  `);
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  check('routed to shadow CSS', doc.shadowRules.length === 1 && doc.shadowRules[0].sel === '.card' && doc.shadowRules[0].pseudo === 'before');
+}
+
+console.log('4. top-level pseudo + vendor + states + media');
+{
+  const { doc, errors } = compile(`
+    @media 768 {
+      .nav::-webkit-scrollbar-thumb:hover { background: color.ink/45 }
+    }
+    .card:hover::before { background: color.accent }
+  `);
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  check('two shadow rules', doc.shadowRules.length === 2, `got ${doc.shadowRules.length}`);
+  const vendor = doc.shadowRules.find(r => r.pseudo.startsWith('-webkit-'));
+  check('vendor pseudo keeps trailing state', vendor && vendor.pseudo === '-webkit-scrollbar-thumb:hover' && vendor.sel === '.nav', vendor && vendor.pseudo);
+  check('media attached to vendor rule', vendor && vendor.media.length === 1);
+  const hov = doc.shadowRules.find(r => r.pseudo === 'before');
+  check('state before :: survives split', hov && hov.sel === '.card:hover', hov && hov.sel);
+}
+
+console.log('5. loud errors stay loud');
+{
+  const a = compile('.card::befor { content: "" }');
+  check('unknown pseudo is a LOUD error', a.errors.length === 1 && /unknown pseudo-element/.test(a.errors[0].message), JSON.stringify(a.errors));
+  check('and nothing dead is emitted', a.doc.rules.length === 0 && a.doc.shadowRules.length === 0);
+
+  const b = compile('.card:seen::before { content: "" }');
+  check(':seen + pseudo is a LOUD error', b.errors.length === 1 && /seen/.test(b.errors[0].message), JSON.stringify(b.errors));
+
+  const c = compile('.a, .b::before { content: "" }');
+  check('mixed selector list is a LOUD error', c.errors.length === 1 && /mixes/.test(c.errors[0].message), JSON.stringify(c.errors));
+
+  const d = compile('.card { color: oops }');
+  check('unknown value still loud', d.errors.length === 1 && /unknown value/.test(d.errors[0].message), JSON.stringify(d.errors));
+}
+
+console.log('6. infinite + alternate');
+{
+  const { doc, errors } = compile(`
+    motion pulse {
+      from { opacity: 1 }
+      to { opacity: 0.4 }
+    }
+    .dot {
+      animate: pulse 1600 infinite alternate
+    }
+  `);
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  const anim = doc.rules[0].decls.find(d => d.prop === '@animate');
+  check('iterations = Infinity', anim && anim.value.iterations === Infinity, JSON.stringify(anim && anim.value));
+  check('direction = alternate', anim && anim.value.direction === 'alternate', JSON.stringify(anim && anim.value));
+  const one = compile('motion p { from { opacity: 1 } to { opacity: 0 } } .x { animate: p 400 }');
+  const a1 = one.doc.rules[0].decls.find(d => d.prop === '@animate');
+  check('default stays 1 iteration / normal', a1 && a1.value.iterations === undefined && a1.value.direction === undefined);
+  const bad = compile('motion p { from { opacity: 1 } } .x { animate: p 400 forevr }');
+  check('typo in animate part still loud', bad.errors.length === 1 && /unknown animate part/.test(bad.errors[0].message), JSON.stringify(bad.errors));
+}
+
+console.log('7. bare font names');
+{
+  const { doc, errors } = compile(`
+    tokens {
+      font {
+        display: JetBrains Mono, monospace
+        quote: Iowan Old Style
+      }
+    }
+    .card { font-family: Public Sans, serif }
+    .quoted { font-family: "JetBrains Mono", monospace }
+  `);
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  const fam = doc.rules.find(r => r.sel === '.card').decls.find(d => d.prop === 'font-family');
+  check('bare font-family passes verbatim', fam && fam.value === 'Public Sans, serif', fam && fam.value);
+  const tok = doc.registryRule.decls.find(d => d.prop === '--dssl-font-display');
+  check('bare token font name passes', tok && tok.value === 'JetBrains Mono, monospace', tok && tok.value);
+  const q = doc.rules.find(r => r.sel === '.quoted').decls.find(d => d.prop === 'font-family');
+  check('quoted still fine', q && q.value === '"JetBrains Mono", monospace', q && q.value);
+  const bad = compile('.card { color: steel blue }');
+  check('bare words elsewhere still loud', bad.errors.length >= 1 && /unknown value/.test(bad.errors[0].message), JSON.stringify(bad.errors));
+}
+
+console.log('8. hyphens: manual');
+{
+  const { doc, errors } = compile('.prose { hyphens: manual }');
+  check('no errors', errors.length === 0, JSON.stringify(errors));
+  check('emitted as-is', doc.rules[0].decls[0].prop === 'hyphens' && doc.rules[0].decls[0].value === 'manual');
+}
+
+console.log('9. site.dssl regression (the actual site styles, token registry chained like the runtime)');
+{
+  const fs = await import('node:fs');
+  const path = await import('node:path');
+  const { DEFAULT_TOKENS } = await import('../public/dssl/resolver.js');
+  const here = path.dirname(new URL(import.meta.url).pathname);
+  const stylesDir = path.join(here, '..', 'public', 'styles');
+  const registry = new Map(Object.entries(DEFAULT_TOKENS));
+  for (const name of ['tokens', 'site', 'home', 'docs', 'playground', 'changelog']) {
+    const f = path.join(stylesDir, `${name}.dssl`);
+    if (!fs.existsSync(f)) { console.log(`  skip ${name}`); continue; }
+    const src = fs.readFileSync(f, 'utf8');
+    const { doc, errors } = resolveChain(src, registry);
+    check(`${name}.dssl compiles clean`, errors.length === 0, JSON.stringify(errors.slice(0, 2)));
+    if (name === 'site.dssl') {
+      check('site.dssl scrollbar shadow rules present', doc.shadowRules.length >= 4, `got ${doc.shadowRules.length}`);
+    }
+  }
+}
+
+/** compile with a shared registry (like index.js does) and fold tokens back in */
+function resolveChain(src, registry) {
+  const { ast, errors: parseErrors } = parse(src, 'chain.dssl');
+  const doc = resolve(ast, 'chain.dssl', Object.fromEntries(registry));
+  for (const [k, v] of Object.entries(doc.tokens)) registry.set(k, v);
+  return { doc, errors: [...parseErrors, ...doc.errors] };
+}
+
+console.log('10. compile() stats surface the shadow rules');
+{
+  const { doc, errors } = compile('.card::before { content: "" } .card::after { content: "" } .card { padding: 12 }');
+  check('2 shadow + 1 inline', doc.shadowRules.length === 2 && doc.rules.length === 1);
+}
+
+console.log(`\n${pass} passed, ${fail} failed`);
+
+// 11. bare content: gets auto-quoted in the full-selector path (parity with nested)
+{
+  const { doc, errors } = compile('.card::before { content: }');
+  check('11 no errors', errors.length === 0, JSON.stringify(errors));
+  const c = doc.shadowRules[0]?.decls.find(d => d.prop === 'content');
+  check('11 bare content auto-quoted', c && c.value === '""', c && c.value);
+}
+
+console.log(`${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

src/components/dssl/SiteRoot.tsx

@@ -120,7 +120,7 @@ export default function SiteRoot() {
           </nav>
 
           <div className="nav-side">
-            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.4.2</a>
+            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.5.0</a>
             <button type="button" className="theme-btn" onClick={cycleTheme} aria-label="Toggle color theme" title="Theme: auto / light / dark">
               <span className="icon-sun"><SunIcon /></span>
               <span className="icon-moon"><MoonIcon /></span>
@@ -148,7 +148,7 @@ export default function SiteRoot() {
         <div className="wrap footer-inner">
           <div className="footer-col">
             <div className="footer-note">
-              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.4.2 while
+              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.5.0 while
               building this site; every feature it needed, it grew, and every bug you sent got
               fixed for real. This page runs on its own engine, no CSS files attached —
               the engine styles this DOM directly.

src/components/dssl/views/ChangelogView.tsx

@@ -11,6 +11,24 @@ const ENTRIES: {
   code?: string;
   kind?: "spec" | "vote" | "add";
 }[] = [
+  {
+    version: "v0.5.0",
+    date: "growth phase · the trap closes",
+    title: "Pseudo-elements work everywhere — and animate learns to loop",
+    why: "an external review scored DSSL 7.5/10 and named the bump condition: fix the trap, earn the 8",
+    kind: "add",
+    body:
+      "The review found the one wart this language could not afford: a top-level .card::before { } compiled ok: true and then matched nothing. Inline styles can never reach a pseudo-element, and the compiler said fine when it meant dead rule — twenty minutes lost, in a language whose whole pitch is loud errors. The fix lives in the flattener: any full selector carrying :: is split into element + pseudo halves and routed down the same shadow-CSS pipeline the nested form always used, so .card::before, .card { ::before } and .card { &::before } are one spelling of one rule, with states, @media, @container and @signal composing as everywhere else. The loud errors stayed loud: an unknown pseudo-element name, :seen combined with a pseudo, or a selector list mixing pseudo and plain parts each fail at compile time with a did-you-mean hint — a rule can no longer be dead on arrival. The review's other gripes rode along: animate accepts infinite (loop forever) and alternate (ping-pong direction) through the Web Animations API; font names are now treated as proper nouns, so font-family: JetBrains Mono, monospace and font tokens pass bare without quotes; and hyphens: manual stopped being rejected. The docs gained the pseudo-elements section the trap proved was missing, with a live demo styled entirely by full-selector pseudo rules — if the accent square renders, the fix is on.",
+    code: `// three spellings, one rule:
+.card::before { content: "" }
+.card { ::before { content: "" } }
+.card { &::before { content: "" } }
+
+// the sharp-edge sweep:
+.dot { animate: pe-pulse 1200 infinite alternate }
+.card { font-family: JetBrains Mono, monospace }
+.prose { hyphens: manual }`,
+  },
   {
     version: "v0.4.2",
     date: "growth phase · distribution",

src/components/dssl/views/DocsView.tsx

@@ -10,6 +10,7 @@ const SIDE = [
   { head: null, id: "tokens", label: "Tokens" },
   { head: null, id: "selectors", label: "Selectors & nesting" },
   { head: null, id: "states", label: "States" },
+  { head: null, id: "pseudo-elements", label: "Pseudo-elements" },
   { head: null, id: "world", label: "@media · @container · @signal" },
   { head: null, id: "cascade", label: "Cascade & layers" },
   { head: "reference", id: "semantic", label: "Semantic properties" },
@@ -264,6 +265,52 @@ background:                     // values can continue
             </div>
           </section>
 
+          <section className="doc-block" id="pseudo-elements">
+            <h2 className="section-title">Pseudo-elements</h2>
+            <p className="doc-lead">
+              Inline styles reach every element in the DOM — but a pseudo-element has no
+              DOM handle, so <code>::before</code>, <code>::after</code>,{" "}
+              <code>::selection</code> and friends are the one thing DSSL compiles into a
+              real stylesheet. Both spellings are the same rule: nested inside the block,
+              or written as a full selector. Before v0.5 the full-selector form compiled{" "}
+              <code>ok: true</code> and then matched nothing — a silent dead rule in a
+              language whose whole pitch is loud errors. The trap is closed: the resolver
+              splits any selector carrying <code>::</code> and routes it down the same
+              shadow-CSS pipeline as the nested form.
+            </p>
+            <CodeBlock file="pseudo.dssl" code={`// all three spellings are the same rule now
+.card::before { content: "" }        // full selector
+.card {
+  ::before { content: "" }           // nested
+  &::before { content: "" }          // explicit &
+}
+
+// states, @media, @container and @signal compose as everywhere else
+.card:hover::before { background: color.accent }
+
+// vendor pseudo-elements pass through verbatim, trailing states included
+input::-webkit-slider-thumb { background: color.accent }
+
+// and the loud errors stayed loud:
+//   .card::befor { }        →  error: unknown pseudo-element "::befor"
+//   .card:seen::before { }  →  error: seen can't cross into shadow CSS
+//   .a, .b::before { }      →  error: mixed selector list — split it`} />
+            <div className="demo-box">
+              <div className="pe-demo">
+                <span className="pe-tag">styled by .pe-tag::before — the full-selector form</span>
+                <span className="pe-dot" />
+                <span className="pe-tail">pe-pulse · 1200ms · infinite alternate</span>
+              </div>
+              <p className="doc-lead fine-print">
+                The oxblood square is a <code>.pe-tag::before</code> rule written in the
+                full-selector form in this page&apos;s stylesheet — the spelling that used
+                to die silently. The dot runs{" "}
+                <code>animate: pe-pulse 1200 infinite alternate</code>, v0.5&apos;s first
+                loop. If both look right, the trap is staying closed.
+              </p>
+            </div>
+          </section>
+
           <section className="doc-block" id="world">
             <h2 className="section-title">@media · @container · @signal</h2>
             <p className="doc-lead">
@@ -413,7 +460,9 @@ button { use focus-ring }
               element&apos;s natural state. Apply it with <code>animate</code>. The engine
               runs it through the Web Animations API, and every animation silently
               disables under reduced-motion unless the motion is{" "}
-              <code>essential: true</code>.
+              <code>essential: true</code>. v0.5 adds <code>infinite</code> — loop
+              forever — and <code>alternate</code>, which ping-pongs the direction
+              instead of restarting.
             </p>
             <CodeBlock file="motion.dssl" code={`motion pop {
   from {
@@ -425,6 +474,10 @@ button { use focus-ring }
 
 .motion-box {
   animate: pop 500 snap        // name · duration · easing · fill
+}
+
+.pe-dot {
+  animate: pe-pulse 1200 infinite alternate   // v0.5: loops, ping-pongs
 }`} />
             <div className="demo-box">
               <div className="motion-box">motion pop — replay me</div>

src/components/dssl/views/HomeView.tsx

@@ -106,6 +106,7 @@ export default function HomeView({ go }: { go: (v: ViewName) => void }) {
               <button type="button" className="btn btn-ghost" onClick={() => go("playground")}>
                 <PlayIcon /> Try the playground
               </button>
+              <a href="#get" className="btn btn-ghost">Get the engine</a>
             </div>
             <div className="hero-meta" aria-label="Engine facts">
               <span>~20 kB engine</span>
@@ -328,6 +329,79 @@ DSSL.signal('demo', null)   // off`} />
         </div>
       </section>
 
+      {/* ------------------------------------------------ get the engine */}
+      <section className="section" id="get">
+        <div className="wrap">
+          <div className="kicker">get the engine</div>
+          <h2 className="section-title">One line, any platform</h2>
+          <p className="section-sub">
+            The whole engine is a folder of plain JavaScript files. No package
+            manager, no build step, nothing installed globally. Pick your
+            platform, paste the line, and a <code>dssl-engine</code> folder
+            appears with the engine, a starter token set, an example stylesheet
+            and the usage guide.
+          </p>
+          <div className="get-grid sect-gap">
+            <div className="card card-hover get-card">
+              <span className="get-os">macos · linux · bsd</span>
+              <CodeBlock plain file="terminal" code="curl -fsSL https://dssl-sable.vercel.app/install.sh | sh" />
+              <p className="get-note">
+                Runs on plain sh — dash, ash and busybox included, bash not
+                required. Downloads with curl or wget, whichever you have, and
+                unpacks with tar, which every distro and macOS ship by default.
+                No tar? It falls back to unzip, then python3.
+              </p>
+            </div>
+            <div className="card card-hover get-card">
+              <span className="get-os">windows</span>
+              <CodeBlock plain file="powershell" code="irm https://dssl-sable.vercel.app/install.ps1 | iex" />
+              <p className="get-note">
+                PowerShell 5.1 or newer, no admin rights needed. Unpacks with
+                Expand-Archive into your current folder.
+              </p>
+            </div>
+            <div className="card card-hover get-card">
+              <span className="get-os">any os, no terminal</span>
+              <div className="get-downloads">
+                <a className="btn btn-ghost btn-sm" href="/dssl-engine.zip" download>dssl-engine.zip</a>
+                <a className="btn btn-ghost btn-sm" href="/dssl-engine.tar.gz" download>dssl-engine.tar.gz</a>
+              </div>
+              <p className="get-note">
+                The exact package the one-liners fetch, straight from the
+                browser. Unzip anywhere and follow USAGE.md inside.
+              </p>
+            </div>
+          </div>
+
+          <div className="get-wire">
+            <div className="get-wire-code">
+              <CodeBlock
+                file="your page"
+                code={`<script type="module" src="/dssl/boot.js"></script>
+<link rel="stylesheet/dssl" href="/styles/tokens.dssl">
+<link rel="stylesheet/dssl" href="/styles/hello.dssl">`}
+              />
+            </div>
+            <div className="get-wire-copy">
+              <h3>That is the whole install</h3>
+              <p>
+                Drop the <code>dssl/</code> folder where your page can serve
+                it, load <code>boot.js</code> as a module, and list your{" "}
+                <code>.dssl</code> files as links. The engine fetches them,
+                walks your DOM, and keeps restyling live as elements come and
+                go. Inline rules work too, via{" "}
+                <code>&lt;style type="text/dssl"&gt;</code>. The full tour
+                lives in the docs, and USAGE.md in the package covers the same
+                ground in two minutes.
+              </p>
+              <button type="button" className="btn btn-ghost btn-sm" onClick={() => go("docs")}>
+                Read the docs <ArrowIcon />
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* ------------------------------------------------ cta */}
       <section className="section">
         <div className="wrap">