anentrypoint-design 0.0.166 → 0.0.168

package/src/page-html.js

@@ -93,9 +93,28 @@ ${cssLink}
 { "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
 </script>
 <style>
-.app-stage { max-width: 1100px; margin: 0 auto; padding: 24px; display: grid; gap: 24px }
-.page-body h1 { margin-top: 0 } .page-body h2 { margin-top: 32px } .page-body h3 { margin-top: 24px }
-.page-body pre { margin: 12px 0; background: var(--panel-2); padding: 12px; border-radius: 8px; overflow-x: auto }
+.app-stage { width: 100%; max-width: var(--measure-wide, 940px); margin-inline: auto; padding: var(--space-6, 48px) var(--space-4, 24px) var(--space-8, 96px); display: grid; gap: var(--space-6, 48px); box-sizing: border-box }
+@media (max-width: 768px) { .app-stage { padding: var(--space-4, 24px) var(--space-3, 16px) var(--space-6, 48px); gap: var(--space-5, 32px) } }
+.page-body > :first-child { margin-top: 0 }
+.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.
+   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) }
 </style>
 <script id="__site__" type="application/json">${JSON.stringify(pageData).replace(/</g, '\\u003c')}</script>
 ${headExtra}
@@ -109,14 +128,27 @@ 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) {
@@ -149,7 +181,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/theme.js

@@ -1,17 +1,26 @@
 // 247420 design system — theme controller.
 //
-// Three modes:
-//   'auto'  — follow OS (prefers-color-scheme). Live-updates on OS change.
-//   'paper' — force light.
-//   'ink'   — force dark.
+// Theme modes (data-theme):
+//   'auto'    — follow OS (prefers-color-scheme). Live-updates on OS change.
+//   'paper'   — force light.
+//   'ink'     — force dark.
+//   'thebird' — warm-paper brand preset (named theme).
+// Accents (data-accent): 'green' | 'purple' | 'mascot'.
+// Density (data-density): 'compact' | 'comfortable' | 'spacious'.
 //
-// Writes the chosen mode to <html data-theme="..."> so CSS rules in
-// system.css / colors_and_type.css resolve correctly. Persists to
-// localStorage under '247420:theme'. Auto-initializes on import in a
-// browser context; safe no-op on server.
+// Each is one attribute on <html> the canonical theme (colors_and_type.css)
+// reads. Adding a theme = one [data-theme="X"] block in colors_and_type.css
+// plus its name in THEMES below. Persists to localStorage; auto-inits on
+// browser import; safe no-op on server.
 
 const KEY = '247420:theme';
-const VALID = new Set(['auto', 'paper', 'ink']);
+const ACCENT_KEY = '247420:accent';
+const DENSITY_KEY = '247420:density';
+// 'auto' is a mode, not a [data-theme] preset block — it stays in VALID for the
+// controller but is the OS-follow path. The named presets are the rest.
+const VALID = new Set(['auto', 'paper', 'ink', 'thebird']);
+const VALID_ACCENT = new Set(['green', 'purple', 'mascot']);
+const VALID_DENSITY = new Set(['compact', 'comfortable', 'spacious']);
 const listeners = new Set();
 let _mq = null;
 let _current = 'auto';
@@ -82,6 +91,44 @@ export function onThemeChange(cb) {
     return () => listeners.delete(cb);
 }
 
+// ---- Accent + density: independent attribute controllers ----
+
+function readStoredKey(key, valid) {
+    try { const v = window.localStorage.getItem(key); return valid.has(v) ? v : null; } catch { return null; }
+}
+
+export function applyAccent(accent) {
+    if (!isBrowser()) return accent;
+    if (VALID_ACCENT.has(accent)) {
+        document.documentElement.setAttribute('data-accent', accent);
+        try { window.localStorage.setItem(ACCENT_KEY, accent); } catch {}
+    } else {
+        // No accent attribute = the theme's default accent (green).
+        document.documentElement.removeAttribute('data-accent');
+        try { window.localStorage.removeItem(ACCENT_KEY); } catch {}
+    }
+    return accent;
+}
+
+export function getAccent() {
+    if (!isBrowser()) return null;
+    return document.documentElement.getAttribute('data-accent');
+}
+
+export function applyDensity(density) {
+    if (!isBrowser()) return density;
+    if (VALID_DENSITY.has(density)) {
+        document.documentElement.setAttribute('data-density', density);
+        try { window.localStorage.setItem(DENSITY_KEY, density); } catch {}
+    }
+    return density;
+}
+
+export function getDensity() {
+    if (!isBrowser()) return null;
+    return document.documentElement.getAttribute('data-density');
+}
+
 // Auto-init on browser import. Picks stored value, else falls back to
 // whatever data-theme is already on <html> (set by page-html.js), else 'auto'.
 export function initTheme() {
@@ -90,6 +137,12 @@ export function initTheme() {
     const fromAttr = document.documentElement.getAttribute('data-theme');
     const initial = stored || (VALID.has(fromAttr) ? fromAttr : 'auto');
     applyTheme(initial);
+    // Restore persisted accent/density (no-op if none stored — keeps the
+    // theme's default accent and the page's authored density).
+    const accent = readStoredKey(ACCENT_KEY, VALID_ACCENT);
+    if (accent) applyAccent(accent);
+    const density = readStoredKey(DENSITY_KEY, VALID_DENSITY);
+    if (density) applyDensity(density);
     return initial;
 }
 

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 = '';