anentrypoint-design 0.0.167 → 0.0.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.167",
+  "version": "0.0.169",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -11,6 +11,12 @@
       "default": "./dist/247420.js"
     },
     "./css": "./dist/247420.css",
+    "./kits/spoint": {
+      "import": "./src/kits/spoint/index.js",
+      "default": "./src/kits/spoint/index.js"
+    },
+    "./kits/spoint/loading-screen.js": "./src/kits/spoint/loading-screen.js",
+    "./kits/spoint/loading-screen.css": "./src/kits/spoint/loading-screen.css",
     "./kits/os": {
       "import": "./src/kits/os/index.js",
       "default": "./src/kits/os/index.js"
@@ -56,8 +62,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "node scripts/build.mjs",
-    "test": "node test.js"
+    "lint:tokens": "node scripts/lint-tokens.mjs",
+    "build": "node scripts/build.mjs"
   },
   "repository": {
     "type": "git",

package/src/community-app.js

@@ -186,7 +186,7 @@ export function mountCommunityApp(root, adapter = {}) {
                 h('nav', {},
                     h('a', { href: '../', title: 'Home', onclick: (e) => { if (A.goHome) { e.preventDefault(); A.goHome(); } } }, 'home'),
                     h('a', { href: '#', title: 'Servers', onclick: (e) => { e.preventDefault(); A.openServers && A.openServers(); } }, 'servers'),
-                    h('a', { href: 'https://github.com/AnEntrypoint/zellous', target: '_blank', rel: 'noopener' }, 'source ↗'),
+                    h('a', { href: 'https://github.com/AnEntrypoint/zellous', target: '_blank', rel: 'noopener' }, 'source ->'),
                 ),
             ),
             MobileHeader({ channelType: ch.type || 'text', channelName: ch.name || '', onMenu: () => A.openMobileMenu && A.openMobileMenu(), onMembers: () => A.toggleMembers && A.toggleMembers() }),

package/src/components/chat.js

@@ -82,7 +82,7 @@ const PART_RENDERERS = {
             h('span', { class: 'glyph', 'aria-hidden': 'true' }, '▤'),
             h('span', { class: 'name' }, p.name || 'document.pdf'),
             p.size != null ? h('span', { class: 'size' }, fmtBytes(p.size)) : null,
-            h('a', { class: 'open', href: p.src, target: '_blank', rel: 'noopener', 'aria-label': `open PDF: ${p.name || 'document.pdf'}` }, 'open ↗')
+            h('a', { class: 'open', href: p.src, target: '_blank', rel: 'noopener', 'aria-label': `open PDF: ${p.name || 'document.pdf'}` }, 'open ->')
         ),
         h('embed', { src: p.src, type: 'application/pdf', 'aria-label': `PDF document: ${p.name || 'document.pdf'}` })),
     file:  (p) => h('a', { class: 'chat-file', href: p.src, target: '_blank', rel: 'noopener', download: p.name || true, 'aria-label': `download file: ${p.name || 'attachment'} (${p.kindLabel || (p.name || '').split('.').pop().toUpperCase()})` },

package/src/components/content.js

@@ -109,7 +109,7 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                 Row({
                     code: w.code,
                     title: w.title, sub: w.sub,
-                    meta: w.meta + '  ' + (isOpen ? '−' : '+'),
+                    meta: w.meta + '  ' + (isOpen ? '-' : '+'),
                     active: isOpen,
                     onClick: () => onToggle && onToggle(isOpen ? -1 : i)
                 }),
@@ -118,7 +118,7 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                         h('p', { class: 'ds-work-body' }, w.body)
                     ),
                     h('div', { class: 'ds-work-actions' },
-                        Btn({ primary: true, href: w.href || '#', children: 'open ↗' }),
+                        Btn({ primary: true, href: w.href || '#', children: 'open ->' }),
                         Btn({ href: w.source || '#', children: 'source' })
                     )
                 ) : null

package/src/components/freddie.js

@@ -147,7 +147,7 @@ export const voice = makePage((ctx) => {
             PageHeader({ eyebrow: 'freddie', title: 'voice', lede: 'voice surfaces', right: enabled ? Chip({ tone: 'ok', children: 'enabled' }) : Chip({ tone: 'neutral', children: 'not configured' }) }),
             enabled
                 ? section('backends', Table({ headers: ['capability', 'status'], rows: [['transcription', v.transcription ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })], ['tts', v.tts ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })]] }))
-                : section('status', emptyState('no voice backend wired in this build. configure a transcription/tts plugin to enable.', '🎙')),
+                : section('status', emptyState('no voice backend wired in this build. configure a transcription/tts plugin to enable.')),
         ];
     };
 });
@@ -405,7 +405,7 @@ export const config = makePage((ctx) => {
     }
     async function setSkin(name) {
         ctx.set({ busy: true, note: null });
-        try { await api('/api/config', { method: 'POST', body: { skin: name } }); await load(); ctx.set({ note: { kind: 'success', msg: 'skin → ' + name } }); }
+        try { await api('/api/config', { method: 'POST', body: { skin: name } }); await load(); ctx.set({ note: { kind: 'success', msg: 'skin -> ' + name } }); }
         catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
         ctx.set({ busy: false });
     }
@@ -574,7 +574,7 @@ export const chains = makePage((ctx) => {
             PageHeader({ eyebrow: 'freddie', title: 'chains', lede: 'acptoapi fallback chains', right: up ? Chip({ tone: 'ok', children: 'acptoapi up' }) : Chip({ tone: 'miss', children: 'acptoapi down' }) }),
             noteAlert(s.note),
             section('chains', Array.isArray(chainsList) && chainsList.length ? chainsList.map((c, i) => Row({
-                key: i, title: c.name || c, sub: Array.isArray(c.links) ? c.links.join(' → ') : '',
+                key: i, title: c.name || c, sub: Array.isArray(c.links) ? c.links.join(' -> ') : '',
                 trailing: Btn({ danger: true, children: 'delete', onClick: () => del(c.name || c) }),
             })) : emptyState('no chains defined')),
             section('new chain',

package/src/components/shell.js

@@ -117,7 +117,7 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
             h('input', { type: 'search', placeholder: search, 'aria-label': `search ${search}` })
         ) : null,
         h('nav', { 'aria-label': 'main navigation' }, ...items.map(([label, href]) => {
-            const cleanLabel = String(label).replace(' ↗', '');
+            const cleanLabel = String(label).replace(' ->', '');
             return h('a', {
                 key: label,
                 href,
@@ -181,7 +181,7 @@ export function Status({ left = [], right = [] } = {}) {
 }
 
 // Toggle the mobile sidebar drawer. Pure-DOM because AppShell is stateless
-// chrome; the class lives on .app-body and is read by the ≤900px media query.
+// chrome; the class lives on .app-body and is read by the <=900px media query.
 function toggleSide(open) {
     const body = document.querySelector('.app-body');
     if (!body) return;

package/src/index.js

@@ -74,6 +74,9 @@ export { applyTheme, getTheme, resolvedTheme, onThemeChange, initTheme,
 export const h = webjsx.createElement;
 export const applyDiff = webjsx.applyDiff;
 
+// spoint kit paint surfaces (loading screen, HUD, editor chrome).
+export { renderLoadingScreen } from './kits/spoint/loading-screen.js';
+
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from
 // 'anentrypoint-design'` directly.
 export {

package/src/kits/os/freddie/pages-core.js

@@ -51,9 +51,9 @@ export function makeCorePages(ctx) {
                     ['open chat',   "click 'chat' in sidebar — set a working directory and pick a skill"],
                     ['pick skill',  "software dev, research, planning — shown with descriptions"],
                     ['pick model',  "select a configured provider + model in the chat bar"],
-                    ['list tools',  '/tools in chat → tools tab'],
-                    ['set api key', 'keys tab → click chip to set value'],
-                    ['add cron',    'cron tab → form'],
+                    ['list tools',  '/tools in chat -> tools tab'],
+                    ['set api key', 'keys tab -> click chip to set value'],
+                    ['add cron',    'cron tab -> form'],
                 ] }) }),
                 Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, String(v)]) }) }),
             ];

package/src/kits/os/freddie/pages-os.js

@@ -43,7 +43,7 @@ export function makeOsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'paths'], [instance.id, 'instance']] }),
                 Panel({ title: 'paths', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'empty fs', glyph: '📁' })
+                    ? EmptyState({ text: 'empty fs', glyph: '◫' })
                     : pre(list.join('\n')) }),
             ];
         },

package/src/kits/os/freddie/pages-tools.js

@@ -115,7 +115,7 @@ export function makeToolsPages(ctx) {
                         if (typeof h0.pi.env.set === 'function') { h0.pi.env.set(k.key, v); rerender(); }
                     },
                 },
-                Chip({ tone: k.set ? 'ok' : 'miss', children: k.key + (k.set ? ' ✓' : ' ·') })
+                Chip({ tone: k.set ? 'ok' : 'miss', children: k.key + (k.set ? ' [x]' : ' [ ]') })
             ));
             return [
                 Kpi({ items: [[setCount, 'set'], [list.length - setCount, 'missing'], [list.length, 'total known']] }),

package/src/kits/os/freddie/routes.js

@@ -20,5 +20,5 @@ export const OS_ROUTE_DEFS = [
     { path: 'os-instances', label: 'instances', glyph: '◫' },
     { path: 'os-windows',   label: 'windows',   glyph: '▭' },
     { path: 'os-x',         label: 'x-server',  glyph: '✕' },
-    { path: 'os-fs',        label: 'fs',        glyph: '📁' },
+    { path: 'os-fs',        label: 'fs',        glyph: '◫' },
 ];

package/src/kits/os/theme.css

@@ -443,9 +443,9 @@ html, body {
  * --os-* aliases above consume the canonical semantic tokens (--bg/--fg/
  * --accent), and colors_and_type.css already drives [data-theme] (paper/ink/
  * auto, with color-scheme + --danger tuning) and [data-accent] (green/purple/
- * mascot). Re-declaring --os-bg-*/--os-accent per theme here only re-introduced
- * drift (ink #14131a vs canonical #131318; purple #7c5cff vs canonical
- * #420247). Density bar-height is genuinely OS-shell-specific, so it stays;
+ * mascot). Re-declaring the os surface or accent tokens per theme here only
+ * re-introduced drift (ink vs canonical ink; purple vs canonical purple).
+ * Density bar-height is genuinely OS-shell-specific, so it stays;
  * --os-accent-tint maps to the canonical accent tint. */
 :root { --os-accent-tint: var(--accent-tint); }
 :root[data-density="compact"]     { --os-bar-h: 28px; --os-tile-pad: 6px;  --os-gap: 6px;  }
@@ -463,18 +463,11 @@ html, body {
  * silently mutated the base theme for EVERY portfolio consumer (canonical
  * --paper is #F6F5F1; thebird wanted #F5F0E4). The warm-paper variant is now a
  * named preset [data-theme="thebird"] a consumer opts into, leaving the base
- * theme untouched. Typography + bar geometry below are brand chrome, not
- * color, so they stay scoped to .ds-247420.
+ * theme untouched. The [data-theme="thebird"] COLOR preset now lives in the
+ * canonical colors_and_type.css (a first-class swappable theme); only the
+ * OS-shell chrome (bar geometry, typography alias) stays here scoped to
+ * .ds-247420.
  * ============================================================ */
-[data-theme="thebird"] {
-    color-scheme: light;
-    --paper:   #F5F0E4;
-    --paper-2: #EFE9DB;
-    --paper-3: #E3DAC7;
-    --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
-    --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
-    --accent: var(--green); --accent-fg: var(--paper);
-}
 .ds-247420 {
     --ff-ui: var(--ff-body);
     /* uniform bar height: 22px button + 6px+6px padding = 34px */

package/src/kits/spoint/index.js

@@ -0,0 +1,8 @@
+// spoint kit — paint surfaces for the spoint game client (loading screen,
+// HUD, editor chrome). Each render fn returns {node, ...controls, dispose};
+// the consumer owns state/events, this kit owns layout + classes. Surfaced
+// through the main bundle entry so spoint can import directly from unpkg.
+
+export { renderLoadingScreen } from './loading-screen.js';
+
+export const themeUrl = new URL('./loading-screen.css', import.meta.url).href;

package/src/kits/spoint/loading-screen.css

@@ -0,0 +1,67 @@
+/* Loading-screen kit styles. Scoped under .ds-247420 at build time.
+   All colors reference design tokens (no raw literals) per the token-lint gate. */
+.sp-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--ff-mono);
+  transition: opacity var(--dur-slow) var(--ease);
+}
+.sp-loading-fade { opacity: 0; pointer-events: none; }
+.sp-loading-container {
+  width: min(420px, 86vw);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.sp-loading-header h1 {
+  margin: 0;
+  font-family: var(--ff-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.04em;
+}
+.sp-loading-label {
+  margin: 4px 0 0;
+  color: var(--fg-2);
+  font-size: var(--fs-body);
+}
+.sp-loading-bars { display: flex; flex-direction: column; gap: 10px; }
+.sp-loading-bar-row {
+  display: grid;
+  grid-template-columns: 88px 1fr 44px;
+  align-items: center;
+  gap: 10px;
+}
+.sp-loading-bar-name {
+  color: var(--fg-3);
+  font-size: var(--fs-small, 11px);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.sp-loading-bar-track {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-3);
+  overflow: hidden;
+}
+.sp-loading-bar-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  transition: width var(--dur-base) var(--ease);
+}
+.sp-loading-bar-pct {
+  color: var(--fg-2);
+  font-size: var(--fs-small, 11px);
+  text-align: right;
+}
+.sp-loading-detail {
+  min-height: 16px;
+  color: var(--fg-3);
+  font-size: var(--fs-small, 11px);
+}

package/src/kits/spoint/loading-screen.js

@@ -0,0 +1,75 @@
+// Loading-screen paint surface for the spoint game client.
+// renderLoadingScreen({brand, label}) -> { node, setLabel, setDownload,
+// setProcessing, setDetail, hide, dispose }. The consumer (spoint
+// LoadingManager) owns progress events; this module owns layout + classes.
+// Two progress bars (download, processing), a label, and a detail line.
+
+export function renderLoadingScreen(opts = {}) {
+  const { brand = 'spoint', label = 'Connecting...' } = opts;
+
+  const node = document.createElement('div');
+  node.className = 'sp-loading ds-247420';
+  node.dataset.component = 'loading-screen';
+
+  const container = document.createElement('div');
+  container.className = 'sp-loading-container';
+
+  const header = document.createElement('div');
+  header.className = 'sp-loading-header';
+  const title = document.createElement('h1');
+  title.textContent = brand;
+  const labelEl = document.createElement('p');
+  labelEl.className = 'sp-loading-label';
+  labelEl.textContent = label;
+  header.append(title, labelEl);
+
+  const bars = document.createElement('div');
+  bars.className = 'sp-loading-bars';
+
+  const mkBar = (name) => {
+    const row = document.createElement('div');
+    row.className = 'sp-loading-bar-row';
+    const nameEl = document.createElement('span');
+    nameEl.className = 'sp-loading-bar-name';
+    nameEl.textContent = name;
+    const track = document.createElement('div');
+    track.className = 'sp-loading-bar-track';
+    const fill = document.createElement('div');
+    fill.className = 'sp-loading-bar-fill';
+    track.appendChild(fill);
+    const pct = document.createElement('span');
+    pct.className = 'sp-loading-bar-pct';
+    pct.textContent = '0%';
+    row.append(nameEl, track, pct);
+    return { row, fill, pct };
+  };
+
+  const dl = mkBar('Download');
+  const proc = mkBar('Processing');
+  bars.append(dl.row, proc.row);
+
+  const detail = document.createElement('div');
+  detail.className = 'sp-loading-detail';
+
+  container.append(header, bars, detail);
+  node.appendChild(container);
+
+  const setBar = (bar, percent) => {
+    bar.fill.style.width = percent + '%';
+    bar.pct.textContent = Math.round(percent) + '%';
+  };
+
+  return {
+    node,
+    setLabel: (text) => { labelEl.textContent = text; },
+    setDownload: (percent) => setBar(dl, percent),
+    setProcessing: (percent) => setBar(proc, percent),
+    setDetail: (text) => { detail.textContent = text; },
+    hide: async () => {
+      node.classList.add('sp-loading-fade');
+      await new Promise((r) => setTimeout(r, 500));
+      node.remove();
+    },
+    dispose: () => node.remove(),
+  };
+}

package/src/markdown-cache-perf-test.js

@@ -158,9 +158,9 @@ async function runAllTests() {
         const speedup = (10000 + initStats.initMs.markdown + initStats.initMs.prism) / (mdStats.avg * 100 + initStats.initMs.markdown + initStats.initMs.prism);
         console.log(`Performance improvement: ~${speedup.toFixed(1)}x faster`);
 
-        console.log('\n✓ All tests completed successfully');
+        console.log('\nPASS All tests completed successfully');
     } catch (err) {
-        console.error('\n✗ Test failed:', err.message);
+        console.error('\nFAIL Test failed:', err.message);
         console.error(err.stack);
         process.exit(1);
     }

package/src/page-html.js

@@ -99,15 +99,32 @@ ${cssLink}
 .page-body h1 { margin-top: 0 } .page-body h2 { margin-top: var(--space-5, 32px) } .page-body h3 { margin-top: var(--space-4, 24px) }
 .page-body > * + * { margin-top: var(--space-3, 16px) }
 .page-body pre { margin: var(--space-3, 16px) 0; background: var(--panel-2); padding: var(--space-3, 16px); border-radius: var(--r-1, 10px); overflow-x: auto }
-/* .app-stage owns inter-block rhythm via grid gap; sections/hero must not double it */
-.app-stage > .ds-hero { margin: 0; padding: 0 }
-.app-stage > .ds-section { margin: 0 }
+/* .app-stage owns inter-block rhythm via grid gap; sections/hero must not double it.
+   These selectors carry !important because this inline block loads before the
+   unpkg CSS bundle, which would otherwise win on load-order for equal specificity. */
+.ds-247420 .app-stage > .ds-hero { margin: 0 !important; padding: var(--space-4, 24px) 0 0 !important; max-width: none !important; gap: var(--space-4, 24px) !important }
+.ds-247420 .app-stage > .ds-section { margin: 0 !important }
 .app-stage .row + .row { margin-top: var(--space-1, 4px) }
 .app-stage .ds-section .row { margin-top: var(--space-2, 8px) }
 .app-stage .ds-section > p.ds-lede { margin: 0 0 var(--space-3, 16px); max-width: var(--measure, 68ch); color: var(--fg-2) }
 .row-benefit { font-style: italic; color: var(--fg-3); font-size: var(--fs-sm); margin-top: var(--space-1, 4px) }
 .ds-row-arrow { margin-left: auto; opacity: .5; transition: opacity var(--dur-snap, 80ms) var(--ease) }
 a.row:hover .ds-row-arrow { opacity: 1 }
+/* hero stat strip — all badges as a wrapping inline rhythm, not one empty panel */
+.ds-hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-3, 16px) var(--space-5, 32px); margin-top: var(--space-2, 8px) }
+.ds-hero-stat { display: flex; align-items: baseline; gap: var(--space-2, 8px) }
+.ds-hero-stat-n { font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-lg, 18px); color: var(--fg) }
+.ds-hero-stat-l { font-size: var(--fs-sm, 15px); color: var(--fg-3) }
+/* feature rows — single-column stack with a rail accent (the dashboard .row grid
+   forces a 3-col code/title/meta layout that mangles title+desc+benefit) */
+.ds-feature { position: relative; padding: var(--space-3, 16px) var(--space-4, 24px); background: var(--bg, #fff); border-radius: var(--r-2, 14px); display: grid; gap: var(--space-1, 4px) }
+.ds-feature::before { content: ''; position: absolute; left: 0; top: var(--space-2, 8px); bottom: var(--space-2, 8px); width: 3px; border-radius: 3px; background: var(--rail-color, var(--rule-strong)) }
+.ds-feature.rail-green { --rail-color: var(--green) } .ds-feature.rail-purple { --rail-color: var(--purple) } .ds-feature.rail-mascot { --rail-color: var(--mascot) }
+.ds-feature.rail-sun { --rail-color: var(--sun) } .ds-feature.rail-flame { --rail-color: var(--flame) } .ds-feature.rail-sky { --rail-color: var(--sky) }
+.ds-feature + .ds-feature { margin-top: var(--space-2, 8px) }
+.ds-feature-title { font-weight: 600; font-size: var(--fs-lg, 18px); color: var(--fg) }
+.ds-feature-desc { font-size: var(--fs-sm, 15px); color: var(--fg-2); line-height: 1.5 }
+.ds-feature-benefit { font-style: italic; font-size: var(--fs-sm, 15px); color: var(--fg-3); margin-top: var(--space-1, 4px) }
 </style>
 <script id="__site__" type="application/json">${JSON.stringify(pageData).replace(/</g, '\\u003c')}</script>
 ${headExtra}
@@ -121,24 +138,37 @@ const RAILS = ['rail-green', 'rail-purple', 'rail-mascot', 'rail-sun', 'rail-fla
 
 function heroNode(hero) {
   if (!hero) return null;
-  return C.Hero({
-    eyebrow: hero.eyebrow,
-    title: hero.heading || hero.title || data.title,
-    body: hero.body || hero.subheading || '',
-    accent: hero.accent,
-    badge: Array.isArray(hero.badges) && hero.badges[0] ? hero.badges[0].label : undefined,
-    actions: Array.isArray(hero.ctas) ? hero.ctas.map((c, i) => h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, c.label || c.cta || 'go')) : null,
-  });
+  const badges = Array.isArray(hero.badges) ? hero.badges.filter(Boolean) : [];
+  const badgeRow = badges.length
+    ? h('div', { class: 'ds-hero-stats' }, ...badges.map((b, i) =>
+        h('span', { key: i, class: 'ds-hero-stat' },
+          h('strong', { class: 'ds-hero-stat-n' }, String(b.label != null ? b.label : b)),
+          b.desc ? h('span', { class: 'ds-hero-stat-l' }, String(b.desc)) : null,
+        )))
+    : null;
+  return h('div', { class: 'ds-hero' },
+    hero.eyebrow ? h('span', { class: 'eyebrow' }, hero.eyebrow) : null,
+    h('h1', { class: 'ds-hero-title' }, hero.heading || hero.title || data.title),
+    (hero.body || hero.subheading) ? h('p', { class: 'ds-hero-body' },
+      hero.body || hero.subheading,
+      hero.accent ? h('span', { class: 'ds-hero-accent' }, ' ' + hero.accent) : null,
+    ) : null,
+    Array.isArray(hero.ctas) && hero.ctas.length
+      ? h('div', { class: 'ds-hero-actions' }, ...hero.ctas.map((c, i) =>
+          h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, c.label || c.cta || 'go')))
+      : null,
+    badgeRow,
+  );
 }
 
 function sectionNode(sec, idx) {
   const rail = RAILS[idx % RAILS.length];
   const features = sec.features || sec.items || [];
   const rows = features.map((f, i) => {
-    const kids = [h('span', { key: 't', class: 'title' }, String(f.name || ''))];
-    if (f.desc) kids.push(h('div', { key: 'd', class: 'sub', innerHTML: String(f.desc).replace(/\`([^\`]+)\`/g, '<code>$1</code>') }));
-    if (f.benefit) kids.push(h('div', { key: 'b', class: 'row-benefit' }, String(f.benefit)));
-    return h('div', { key: i, class: 'row ' + rail }, ...kids);
+    const kids = [h('div', { key: 't', class: 'ds-feature-title' }, String(f.name || ''))];
+    if (f.desc) kids.push(h('div', { key: 'd', class: 'ds-feature-desc', innerHTML: String(f.desc).replace(/\`([^\`]+)\`/g, '<code>$1</code>') }));
+    if (f.benefit) kids.push(h('div', { key: 'b', class: 'ds-feature-benefit' }, String(f.benefit)));
+    return h('div', { key: i, class: 'ds-feature ' + rail }, ...kids);
   });
   return C.Section({
     title: sec.name || sec.title || sec.id,
@@ -161,7 +191,7 @@ function examplesNode(examples) {
         h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')),
       ];
       if (e.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + e.desc));
-      kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, '↗'));
+      kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, '->'));
       return h('a', { key: i, class: 'row ' + rail, href: e.href || '#' }, ...kids);
     }),
   });

package/src/web-components/ds-chat.js

@@ -12,7 +12,7 @@ class DsChat extends HTMLElement {
     constructor() {
         super();
         this._messages = [];
-        this._placeholder = 'type, then ⏎';
+        this._placeholder = 'type, then enter';
         this._title = 'chat';
         this._sub = '';
         this._composerValue = '';