sync work in progress

public/dssl/engine.js

@@ -19,6 +19,22 @@
 
 const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
 
+// v0.3.4 — alignment implies a formatting context.
+// place-items / place-content / align-* / justify-* only arrange children
+// inside flex or grid containers. On a plain <span> or <button> they used to
+// silently do nothing — which is exactly how the feature icons, the theme
+// toggle and the token dots ended up pinned top-left inside their circles.
+// The language promises loud failures over silent ones, so when a winning
+// declaration asks for alignment but the element has no layout context, the
+// engine PROMOTES it: inline elements → inline-grid (flow preserved), blockish
+// elements → grid. Explicit `display:` in the same cascade still wins, because
+// the promotion is applied first and "later wins" is the whole cascade.
+const ALIGN_PROPS = new Set([
+  'place-items', 'place-content', 'align-items', 'justify-items',
+  'align-content', 'justify-content',
+]);
+const HAS_CONTEXT_RE = /^(flex|inline-flex|grid|inline-grid)$/;
+
 // state pseudo-classes that may appear inside a rule selector. Used to strip
 // them back OFF when collecting recompute candidates (see stateEvent).
 const STATE_PSEUDO_RE = /:(hover|focus|focus-visible|active|focus-within|visited|target|disabled|enabled|checked|placeholder-shown|read-only|read-write|open|closed|empty|required|invalid|valid|link|indeterminate)\b/g;
@@ -326,9 +342,26 @@ export class DsslEngine {
     let cancelAnims = false;
     let stack = false;
 
+    // flatten matched decls in cascade order (the promotion below may prepend)
+    const flat = [];
     for (const rule of matched) {
       const imp = rule.layer === 'pin' ? 'important' : '';
-      for (const d of rule.decls) {
+      for (const d of rule.decls) flat.push({ d, imp, rule });
+    }
+
+    // v0.3.4: alignment implies a formatting context — see ALIGN_PROPS above.
+    // Read AFTER the wipe so the natural (parent-blockified) display decides;
+    // none/contents are never promoted (promoting would unhide or boxify them).
+    if (flat.some(x => ALIGN_PROPS.has(x.d.prop))) {
+      let disp = '';
+      try { disp = getComputedStyle(el).display; } catch { }
+      if (disp && !HAS_CONTEXT_RE.test(disp) && disp !== 'none' && disp !== 'contents') {
+        const inlineCtx = disp === 'inline' || disp.startsWith('inline-');
+        flat.unshift({ imp: '', d: { prop: 'display', value: inlineCtx ? 'inline-grid' : 'grid' } });
+      }
+    }
+
+    for (const { d, imp, rule } of flat) {
         if (d.prop === '@animate') {
           if (d.value === null) { cancelAnims = true; continue; }
           animSpecs.push({ ...d.value, key: rule.id + '|' + rule.media.join('&') + '|' + rule.signals.map(s => s.name + s.op + s.value).join('&') });
@@ -346,7 +379,6 @@ export class DsslEngine {
           if (!this._warned) this._warned = new Set();
           if (!this._warned.has(msg)) { this._warned.add(msg); console.warn(msg); }
         }
-      }
     }
 
     this.ownMap.set(el, newOwned);

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.3.3';
+export const VERSION = '0.3.4';
 
 let counter = 0;
 const engines = new Map();

public/dssl/resolver.js

@@ -344,6 +344,26 @@ const SEMANTIC = {
     }
     return [{ prop: 'place-items', value: `${p[0]} ${p[1]}` }, { prop: 'place-content', value: `${p[0]} ${p[1]}` }];
   },
+  // v0.3.4 — the one-word centering primitive, because "how do I center this
+  // thing" is the first question everyone asks. Emits the alignment pair only;
+  // the ENGINE guarantees a formatting context for alignment declarations
+  // (inline elements → inline-grid, blocks → grid), so `center:` can never
+  // silently no-op the way raw place-items did on spans and buttons.
+  //   center:       both axes   ·   center: x   horizontal only   ·   center: y   vertical only
+  center(v, ctx) {
+    const mode = (v || '').trim().toLowerCase() || 'both';
+    if (mode === 'x') {
+      return [{ prop: 'justify-items', value: 'center' }, { prop: 'justify-content', value: 'center' }];
+    }
+    if (mode === 'y') {
+      return [{ prop: 'align-items', value: 'center' }, { prop: 'align-content', value: 'center' }];
+    }
+    if (mode !== 'both') {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown center axis "${v}"`, hint: didYouMean(mode, ['both', 'x', 'y']) });
+      return [];
+    }
+    return [{ prop: 'place-items', value: 'center center' }, { prop: 'place-content', value: 'center center' }];
+  },
   cover(v, ctx) {
     const pos = (v || 'absolute').trim();
     return [{ prop: 'position', value: pos }, { prop: 'inset', value: '0' }];

public/styles/docs.dssl

@@ -268,7 +268,7 @@
 .tok-dot {
   size: 34
   circle: 34
-  place: center
+  center: both
   font-family: font.mono
   font-size: 11
   border: 1 solid color.line

public/styles/home.dssl

@@ -366,7 +366,7 @@ motion rise-in {
 .feature-icon {
   size: 40
   circle: 40
-  place: center
+  center: both
   background: color.accent/12
   color: color.accent
   font-size: 19

public/styles/site.dssl

@@ -126,7 +126,10 @@ select { use focus-ring }
 
 .theme-btn {
   size: 36
-  place: center
+  // auto (system) mode shows the sun+moon PAIR, light/dark show one icon.
+  // `center:` centers a single-content box, but a two-item grid would stack
+  // the pair — an explicit flex row centers either state (v0.3.4)
+  row: center gap 2
   color: color.muted
   transition: 150
   border: 1 solid color.ink/40

scripts/dssl-smoke.mjs

@@ -73,6 +73,14 @@ gallery {
 .span-2 { grid-column: span 2 }
 .auto-grid { grid-template-columns: repeat(auto-fill, minmax(200, 1fr)) }
 
+// v0.3.4: the one-word centering primitive
+.icon-chip {
+  size: 40
+  center: both
+}
+.chip-x { center: x }
+.chip-y { center: y }
+
 @media (width >= 768) {
   .card { padding: space.6 }
 }
@@ -152,6 +160,15 @@ const span2 = doc.rules.find(r => r.sel === '.span-2');
 assert(span2 && span2.decls.some(d => d.value === 'span 2'), `grid-column: span 2 unitless (got: ${span2?.decls[0]?.value})`);
 const autoGrid = doc.rules.find(r => r.sel === '.auto-grid');
 assert(autoGrid && autoGrid.decls.some(d => d.value === 'repeat(auto-fill, minmax(200px, 1fr))'), `repeat(auto-fill, minmax) works (got: ${autoGrid?.decls[0]?.value})`);
+// v0.3.4: center: primitive — alignment pair, engine promotes the context
+const chip = doc.rules.find(r => r.sel === '.icon-chip');
+assert(chip && chip.decls.some(d => d.prop === 'place-items' && d.value === 'center center'), `center: expands to place-items center center`);
+assert(chip && chip.decls.some(d => d.prop === 'place-content' && d.value === 'center center'), `center: expands to place-content center center`);
+const chipX = doc.rules.find(r => r.sel === '.chip-x');
+assert(chipX && chipX.decls.some(d => d.prop === 'justify-items' && d.value === 'center') && chipX.decls.some(d => d.prop === 'justify-content' && d.value === 'center'), 'center: x axis emits justify pair');
+const chipY = doc.rules.find(r => r.sel === '.chip-y');
+assert(chipY && chipY.decls.some(d => d.prop === 'align-items' && d.value === 'center') && chipY.decls.some(d => d.prop === 'align-content' && d.value === 'center'), 'center: y axis emits align pair');
+assert(!doc.errors.some(e => e.message.includes('center')), 'no false center errors');
 assert(doc.rules.some(r => r.sel === '.card' && r.media.length === 1), 'media rule for .card');
 assert(doc.rules.some(r => r.media.includes('(prefers-color-scheme: dark)')), '@media dark sugar');
 assert(doc.rules.some(r => r.media.includes('(prefers-color-scheme: light)')), '@media light sugar');

src/app/layout.tsx

@@ -109,6 +109,7 @@ export default function RootLayout({
         ))}
         {/* engine starts downloading with the document — module defer rules
             mean it executes after parse with the full SSR DOM present */}
+        {/* eslint-disable-next-line @next/next/no-sync-scripts -- type="module" is deferred by spec; the rule cannot see that */}
         <script type="module" src="/dssl/boot.js" />
       </head>
       <body>{children}</body>

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.3.3</a>
+            <a href="#/changelog" className="ver-badge" onClick={(e) => { e.preventDefault(); go("changelog"); }}>v0.3.4</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.3.3 while
+              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.3.4 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

@@ -210,6 +210,23 @@ radius { md: 14  →  md: 4 }
 color  { paper: #faf8f4 → #f5f0e4, accent: oklch(…) → #7c2d2d }
 font   { serif: "Charter", "Iowan Old Style", "Palatino", … }   // new`,
   },
+  {
+    version: "v0.3.4",
+    date: "bug report → fix",
+    title: "Centering that always works",
+    why: "user report: “the {} and stuff in The Engine are still not centered in their circle”",
+    kind: "add",
+    body:
+      "Every glyph chip on this site asked for centering — place: center — and place-items/place-content only arrange children inside flex or grid containers. On a <span> or a <button> they silently did nothing, so the feature icons, the theme toggle and the docs token dots all hugged the top-left of their circles. The fix is engine-level, because the engine is the only part that knows what an element actually is: alignment declarations now IMPLY a formatting context. When a winning declaration asks to align but the element has no layout context, the engine promotes it — inline elements become inline-grid (flow preserved), blocks become grid — while an explicit display: still wins the cascade. And the vocabulary gained the word people actually reach for first: center: both / x / y.",
+    code: `.icon-chip {
+  size: 40
+  circle: 40
+  center: both      // works on a span, a button, anything
+}
+
+// engine rule: alignment implies a formatting context
+// inline → inline-grid · block → grid · explicit display: still wins`,
+  },
 ];
 
 export default function ChangelogView() {

src/components/dssl/views/CheatSheetView.tsx

@@ -73,6 +73,8 @@ column: gap 8 start
 grid: 3
 grid: auto-fill 220
 stack: center        // overlay children
+center: both         // center: x / center: y — the engine guarantees a
+                     // formatting context, so it can never silently no-op
 place: center        align: center
 cover: fixed         sticky: 0
 size: 40 100%        circle: 36

src/components/dssl/views/DocsView.tsx

@@ -324,7 +324,8 @@ background:                     // values can continue
                 <tr><td><code>row</code> / <code>column</code></td><td><code>row: gap 8 center wrap</code></td><td>flexbox + only the words you name (between, reverse, inline…)</td></tr>
                 <tr><td><code>grid</code></td><td><code>grid: 3</code> · <code>grid: auto-fill 220</code></td><td>repeat(3, 1fr) · repeat(auto-fill, minmax(220px, 1fr))</td></tr>
                 <tr><td><code>stack</code></td><td><code>stack: center</code></td><td>overlay grid; children share cell 1/1</td></tr>
-                <tr><td><code>place</code> / <code>align</code></td><td><code>place: center</code></td><td>place-items/content · align-items</td></tr>
+                <tr><td><code>place</code> / <code>align</code></td><td><code>place: center</code></td><td>place-items/content · align-items — alignment implies a formatting context (see <code>center</code>)</td></tr>
+                <tr><td><code>center</code></td><td><code>center: both</code> · <code>center: x</code> · <code>center: y</code></td><td>the centering primitive. The engine promotes any element to a grid/flex context first (inline → inline-grid, block → grid; an explicit <code>display:</code> still wins), so centering works on a span, a button, anything</td></tr>
                 <tr><td><code>cover</code></td><td><code>cover: fixed</code></td><td>position + inset: 0</td></tr>
                 <tr><td><code>sticky</code></td><td><code>sticky: 0</code></td><td>position: sticky; top: 0px</td></tr>
                 <tr><td><code>font</code></td><td><code>font: 16/1.4 ink</code></td><td>font-size / line-height / color</td></tr>

src/components/dssl/views/SpecView.tsx

@@ -11,7 +11,7 @@ export default function SpecView() {
         <p className="page-sub">
           The v0.1 draft was put to a seven-point vote. This document is the ratified
           v0.2 result — every decision below is implemented by the engine serving this
-          page. The engine itself has kept growing since: it is now at v0.3.3 (see the
+          page. The engine itself has kept growing since: it is now at v0.3.4 (see the
           changelog for what the site demanded).
         </p>
       </div>