anentrypoint-design 0.0.324 → 0.0.326

package/src/components.js

@@ -28,7 +28,7 @@ export {
 export { AgentChat, MESSAGE_CAP } from './components/agent-chat.js';
 
 export {
-    ConversationList, SessionCard, SessionDashboard, SessionMeta, fmtDuration, AgentListSkeleton
+    ConversationList, SessionCard, SessionDashboard, SessionMeta, fmtDuration, fmtTime, fmtAgo, AgentListSkeleton
 } from './components/sessions.js';
 
 export { ContextPane } from './components/context-pane.js';

package/src/css/app-shell/catalog-theme.css

@@ -101,14 +101,10 @@
 .ds-shortcuts-hint .ds-kbd { white-space: normal; max-width: 100%; }
 .ds-kbd-caps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
 .ds-kbd-sep { color: var(--fg-3); font-size: var(--fs-micro); padding: 0 2px; }
-.ds-kbd {
-  display: inline-block; min-width: 0;
-  padding: 2px 7px; border-radius: var(--r-0);
-  background: var(--bg); border: var(--bw-hair) solid var(--rule);
-  border-bottom-width: 2px;
-  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
-  white-space: nowrap;
-}
+/* .ds-kbd base definition lives in editor-primitives.css (canonical home —
+   it owns the fuller ds-kbd-group/ds-kbd-row family this key chip belongs
+   to); this file only carries the .ds-shortcuts-hint contextual overrides
+   above. */
 
 /* ============================================================
    Theme toggle (segmented + compact) — bound to src/theme.js

package/src/css/app-shell/data-density.css

@@ -92,13 +92,10 @@
 .ds-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
 .ds-sub-btn span { display: block; font-size: 18px; font-weight: 700; color: var(--accent-ink); }
 
-/* SessionRow */
-.ds-session-row {
-  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
-  flex-wrap: wrap; min-width: 0;
-  border-bottom: var(--bw-hair) solid var(--bg-3); cursor: pointer;
-}
-.ds-session-row:hover { background: var(--bg-3); }
+/* SessionRow — base .ds-session-row (layout, hover/focus/active states,
+   rail-tone indicators) is canonically defined in chat.css alongside the
+   rest of the chat session-list component; this file only carries the
+   dev/admin-row sub-parts (id/counts/devcnt/span) that decorate it. */
 .ds-session-row-id {
   font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--accent-ink);
   flex: 0 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

package/src/css/app-shell/hero-content.css

@@ -391,12 +391,10 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .row-form input:focus-visible,
 .row-form textarea:focus-visible { box-shadow: var(--focus-ring-inset); }
 
-/* Field char counter (TextField maxLength) */
-.ds-field-count {
-  font-size: var(--fs-tiny, 13px);
-  color: var(--fg-3, var(--fg-2));
-  text-align: right;
-}
+/* Field char counter (TextField maxLength) — canonical definition is with
+   the rest of the .ds-field family below (states-interactions.css); this
+   duplicate was removed to stop the two bodies fighting on stylesheet load
+   order. */
 
 /* Multi-column form layout (Form columns prop) */
 .row-form[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }

package/src/css/app-shell/states-interactions.css

@@ -3,6 +3,20 @@
    Comprehensive improvements for perfect UX across all surfaces
    ============================================================ */
 
+/* ------------------------------------------------------------
+   Table — clickable row focus ring
+   Table()'s onRowClick path (content.js) sets class="clickable"
+   role="button" tabindex="0" on the <tr>; the browser's native
+   :focus-visible outline on a <tr> renders inconsistently across
+   engines (often clipped by table border-collapse), so it needs
+   the same explicit outline treatment every other interactive
+   primitive in this file gets, via the shared --focus-* tokens.
+   -------------------------------------------------------------- */
+tr.clickable:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: calc(-1 * var(--focus-offset));
+}
+
 /* ------------------------------------------------------------
    Component States — Disabled, Loading, Error, Success
    -------------------------------------------------------------- */
@@ -391,14 +405,25 @@ hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
 }
 .ds-field-label {
   font-size: var(--fs-sm, 14px);
+  font-weight: 500;
   color: var(--fg-2);
   line-height: 1.3;
 }
+.ds-field-required {
+  color: var(--danger);
+  font-weight: 700;
+  margin-left: 2px;
+}
 .ds-field-hint {
   font-size: var(--fs-tiny, 13px);
   color: var(--fg-3);
   line-height: 1.35;
 }
+.ds-field-error {
+  color: var(--danger);
+  font-size: var(--fs-tiny, 13px);
+  font-weight: 500;
+}
 .ds-field-count {
   font-size: var(--fs-tiny, 13px);
   color: var(--fg-3);

package/src/i18n.js

@@ -0,0 +1,58 @@
+// Minimal, dependency-free i18n primitive for the design SDK.
+//
+// Mirrors the shape of thebird's `docs/i18n.js` (catalog registry +
+// setLocale/getLocale + t(key, fallbackText, vars) interpolation) so a
+// consumer app that already has its own i18n runtime (thebird, freddie, ...)
+// can either use this directly or wire an equivalent adapter, and so
+// design's own components CAN be made translatable without design owning a
+// specific consumer's catalog.
+//
+// Scope of this pass: the primitive exists and is exported, plus a couple of
+// representative hardcoded strings in one or two components are migrated as
+// proof (see src/components/chat.js). This is NOT an exhaustive sweep of
+// every hardcoded string in the SDK — that is a much larger, incremental
+// effort threaded through call sites over time, the same way thebird's own
+// t() adoption is incremental app-by-app.
+const STORAGE_KEY = 'ds-locale';
+const FALLBACK_LOCALE = 'en';
+
+const catalogs = new Map();
+
+export function registerLocale(locale, table) {
+  catalogs.set(locale, { ...(catalogs.get(locale) || {}), ...table });
+}
+
+registerLocale('en', {});
+
+export function getLocale() {
+  try {
+    const stored = typeof localStorage !== 'undefined' && localStorage.getItem(STORAGE_KEY);
+    if (stored && catalogs.has(stored)) return stored;
+  } catch { /* swallow: localStorage unavailable, fall through to navigator.language detection */ }
+  if (typeof navigator !== 'undefined' && navigator.language) {
+    const short = navigator.language.slice(0, 2);
+    if (catalogs.has(short)) return short;
+  }
+  return FALLBACK_LOCALE;
+}
+
+export function setLocale(locale) {
+  try { if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, locale); } catch { /* swallow: localStorage write failed */ }
+}
+
+// t(key, fallbackText, vars?) — looks up key in the active locale's catalog;
+// falls back to fallbackText (the literal already at the call site) so
+// adoption is a non-breaking wrap: t('chat.emptySub', 'Send a message to
+// start the conversation') behaves exactly like the bare literal did until a
+// translation is registered for that key.
+export function t(key, fallbackText, vars) {
+  const locale = getLocale();
+  const table = catalogs.get(locale) || {};
+  let str = (key in table) ? table[key] : fallbackText;
+  if (vars) for (const k of Object.keys(vars)) str = str.split('{' + k + '}').join(String(vars[k]));
+  return str;
+}
+
+export function availableLocales() {
+  return [...catalogs.keys()];
+}

package/src/index.js

@@ -11,12 +11,14 @@ import * as motion from './motion.js';
 import * as debug from './debug.js';
 import { renderMarkdown, ensureReady as ensureMarkdownReady, sanitizeHtml, isDegraded as isMarkdownDegraded, configureMarkdownCdn, getMarkdownCdnConfig } from './markdown.js';
 import { escapeHtml, escapeJson } from './html-escape.js';
+import { uid, shortUid } from './uid.js';
 import { ensurePrism, highlightAllUnder, configurePrismCdn, getPrismCdnConfig } from './highlight.js';
 import { renderPageHtml } from './page-html.js';
 import { HeroFromPageData } from './components/content.js';
 import { ThemeToggle } from './components/theme-toggle.js';
 import { mountKit } from './bootstrap.js';
 import * as theme from './theme.js';
+import { t, registerLocale, getLocale, setLocale, availableLocales } from './i18n.js';
 import { registerChatElement, DsChat } from './web-components/ds-chat.js';
 import { registerFreddieChatElement, FreddieChat } from './web-components/freddie-chat.js';
 
@@ -83,7 +85,9 @@ export {
     registerFreddieChatElement, FreddieChat,
     renderPageHtml, HeroFromPageData,
     escapeHtml, escapeJson,
-    theme, ThemeToggle
+    uid, shortUid,
+    theme, ThemeToggle,
+    t, registerLocale, getLocale, setLocale, availableLocales
 };
 export { applyTheme, getTheme, resolvedTheme, onThemeChange, initTheme,
          applyAccent, getAccent, applyDensity, getDensity } from './theme.js';
@@ -101,7 +105,8 @@ export {
     FREDDIE_PAGES,
     home, chat, voice, sessions, projects, agents, analytics,
     models, cron, skills, config, env, tools, batch, gateway, chains,
-    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages
+    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages,
+    fmtBytes, fmtFileSize, fmtTime, fmtAgo, fmtDuration
 } from './components.js';
 
 export default {

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

@@ -19,7 +19,7 @@ function parseSseEvents(text) {
         if (line.startsWith('event: ')) { curEvent = line.slice(7).trim(); }
         else if (line.startsWith('data: ')) { curData = line.slice(6).trim(); }
         else if (line === '' && curEvent) {
-            try { events.push({ event: curEvent, data: JSON.parse(curData) }); } catch {}
+            try { events.push({ event: curEvent, data: JSON.parse(curData) }); } catch { /* swallow: a malformed SSE event is dropped, the stream continues */ }
             curEvent = null; curData = '';
         }
     }
@@ -65,7 +65,7 @@ export function makeChatPage(ctx) {
                     const models = Array.isArray(j?.data) ? j.data.map(m => m.id) : [];
                     providers = [{ id: 'acptoapi', name: 'acptoapi gateway (' + baseUrl + ')', configured: true, models: ['auto', ...models] }, ...providers];
                 }
-            } catch {}
+            } catch { /* swallow: probing the local acptoapi gateway is opt-in best-effort, absence just means no providers shown */ }
         }
         const configuredProviders = providers.filter(p => p.configured);
 
@@ -89,7 +89,7 @@ export function makeChatPage(ctx) {
         };
 
         const cancelInFlight = () => {
-            if (chatState.abort) { try { chatState.abort.abort(); } catch {} chatState.abort = null; }
+            if (chatState.abort) { try { chatState.abort.abort(); } catch { /* swallow: the in-flight request may already be settled, abort() is a no-op then */ } chatState.abort = null; }
             chatState.busy = false;
             syncMessages();
             renderPage();
@@ -140,7 +140,7 @@ export function makeChatPage(ctx) {
                                     ? ('agent: ' + running + ' (step ' + (stepN + 1) + ')…')
                                     : ('agent thinking' + (stepN ? ' (step ' + stepN + ')' : '') + '…');
                                 renderPage();
-                            } catch {}
+                            } catch { /* swallow: progress-indicator update failing must not abort the agent run */ }
                         };
                         const out = await window.__thebirdRunAgent({ prompt: trimmed, onUpdate });
                         const turnMsgs = (out && Array.isArray(out.messages)) ? out.messages : [];

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

@@ -91,7 +91,7 @@ export function makeToolsPages(ctx) {
                     submit: 'save',
                     onSubmit: async (ev) => {
                         let v = ev.target.elements.value.value;
-                        try { v = JSON.parse(v); } catch {}
+                        try { v = JSON.parse(v); } catch { /* swallow: value may be a plain string, not JSON — keep it as-is */ }
                         await h0.pi.config.saveValue(ev.target.elements.key.value, v);
                         rerender();
                     },

package/src/kits/os/terminal-app.js

@@ -30,7 +30,7 @@ export function renderTerminal(opts = {}) {
         term.open(slot);
         if (term._addonManager) {
             const addons = term._addonManager._addons || [];
-            for (const a of addons) { try { a.instance && a.instance.fit && a.instance.fit(); } catch (_) {} }
+            for (const a of addons) { try { a.instance && a.instance.fit && a.instance.fit(); } catch (_) { /* swallow: an addon's fit() failing must not block mounting the terminal */ } }
         }
     }
 

package/src/kits/slides/deck-stage-state.js

@@ -21,13 +21,13 @@ export function restoreIndex(deckEl, slides) {
         if (raw == null) return 0;
         const n = parseInt(raw, 10);
         if (Number.isFinite(n) && n >= 0 && n < slides.length) return n;
-    } catch (e) { /* ignore */ }
+    } catch (e) { /* swallow: localStorage unavailable or corrupt saved-slide-index — fall back to slide 0 */ }
     return 0;
 }
 
 export function persistIndex(deckEl, index) {
     const storageKey = STORAGE_PREFIX + (location.pathname || '/');
-    try { localStorage.setItem(storageKey, String(index)); } catch (e) {}
+    try { localStorage.setItem(storageKey, String(index)); } catch (e) { /* swallow: persistence is best-effort, deck still shows the current slide */ }
 }
 
 export function collectSlides(deckEl, slot) {
@@ -66,7 +66,7 @@ export function applyIndex(deckEl, { index, prevIndex, slides, countEl, showOver
     if (countEl) countEl.textContent = String(curr + 1);
     persistIndex(deckEl, curr);
     if (broadcast) {
-        try { window.postMessage({ slideIndexChanged: curr }, '*'); } catch (e) {}
+        try { window.postMessage({ slideIndexChanged: curr }, '*'); } catch (e) { /* swallow: cross-frame notification is best-effort, local slide state already updated */ }
         deckEl.dispatchEvent(new CustomEvent('slidechange', {
             detail: {
                 index: curr, previousIndex: prev, total: slides.length,

package/src/lint.js

@@ -0,0 +1,10 @@
+// Public re-export of the two source-hygiene lint gates that external
+// consumers (thebird-owned UI files, freddie's GUI plugins) most plausibly
+// want to run in their OWN build/lint setups: the decorative-glyph guard and
+// the webjsx null-children guard. `scripts/` is intentionally not part of
+// the published package surface (see package.json `files`), so this
+// `src/`-located re-export is the published entry point — the actual lint
+// logic still lives in scripts/lint-glyphs.mjs and scripts/lint-null-children.mjs
+// and is not duplicated here.
+export { lintGlyphsOrThrow } from '../scripts/lint-glyphs.mjs';
+export { lintNullChildrenOrThrow } from '../scripts/lint-null-children.mjs';

package/src/page-html.js

@@ -67,15 +67,75 @@ function joinHref(basePath, href) {
     return base + '/' + h.replace(/^\.?\//, '');
 }
 
+// Full SEO/OG/twitter/schema.org meta block, extracted so renderPageHtml
+// consumers (design's own marketing site, thebird's landing) can opt in
+// instead of hand-rolling ~40 lines of <meta> tags per theme.mjs.
+function renderSeoTags({ title, siteName, seo }) {
+    const desc = escape(seo.description || '');
+    const lang = escape(seo.lang || 'en');
+    const url = escape(seo.url || '');
+    const image = escape(seo.image || '');
+    const author = escape(seo.author || siteName);
+    const twitter = escape(seo.twitter || '');
+    const locale = escape(seo.locale || 'en_US');
+    const keywords = escape(Array.isArray(seo.keywords) ? seo.keywords.join(', ') : (seo.keywords || ''));
+    const ogTitle = escape(title);
+    const ogDesc = escape(seo.description || siteName);
+    let out = `
+<meta name="description" content="${desc}">
+${keywords ? `<meta name="keywords" content="${keywords}">` : ''}
+<meta name="author" content="${author}">
+<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+<meta name="generator" content="anentrypoint-design">
+${url ? `<link rel="canonical" href="${url}">` : ''}
+<meta property="og:type" content="website">
+<meta property="og:title" content="${ogTitle}">
+<meta property="og:description" content="${ogDesc}">
+${url ? `<meta property="og:url" content="${url}">` : ''}
+<meta property="og:site_name" content="${escape(siteName)}">
+<meta property="og:locale" content="${locale}">
+${image ? `<meta property="og:image" content="${image}">` : ''}
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="${ogTitle}">
+<meta name="twitter:description" content="${ogDesc}">
+${twitter ? `<meta name="twitter:site" content="${twitter}">` : ''}
+${image ? `<meta name="twitter:image" content="${image}">` : ''}`;
+    if (seo.ldJson !== false && (seo.description || url)) {
+        const ld = JSON.stringify({
+            '@context': 'https://schema.org', '@type': 'WebSite',
+            name: title, url: seo.url || '', description: seo.description || '', inLanguage: seo.lang || 'en',
+        }).replace(/</g, '\\u003c');
+        out += `\n<script type="application/ld+json">${ld}</script>`;
+    }
+    return out;
+}
+
 export function renderPageHtml({
     title = '247420', slug = 'index', siteName = '247420',
     navItems = [], basePath = '',
     hero, sections, examples, body,
-    theme = 'auto', cssHref, headExtra = ''
+    theme = 'auto', cssHref, headExtra = '',
+    // Extended affordances (all optional, all backward compatible — a call
+    // site that omits them gets byte-identical output to before these were
+    // added). See design/site/theme.mjs and thebird/site/theme.mjs for
+    // consumers of the full surface.
+    seo = null,               // { description, keywords, author, twitter, locale, lang, image, url, glyph, ldJson:boolean }
+    sidebar = null,           // { sections: [{ group, items: [{glyph,label,href}] }] } -> C.Side
+    marquee = null,           // { items: [...strings], sep }
+    panels = null,            // [{ id, title, count, items: [{code,title,sub,meta,href}] }] -> C.Panel + RowLink rows
+    quickstart = null,        // { heading, lines: [{ kind, text }] } -> cli block panel
+    statusLeft = null,        // override the default [siteName.toLowerCase(), slug] status-bar left cluster
+    statusRight = null,       // override the default ['live'] status-bar right cluster
+    faviconHref = null,       // static favicon URL (e.g. './favicon.svg'); takes precedence over faviconGlyph
+    faviconGlyph = null,      // single-character/emoji favicon rendered as an inline data: SVG
+    clientScriptExtra = '',   // raw JS appended after the mount() call in the client <script type="module">
+    version = null,           // pin BOTH the CSS href and the JS importmap to this exact version
+                               // instead of @latest (e.g. '0.0.320'); omitted -> default @latest behavior.
 } = {}) {
+    const pkgVersion = version || 'latest';
     const cssLink = cssHref
         ? `<link rel="stylesheet" href="${cssHref}">`
-        : `<link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">`;
+        : `<link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@${pkgVersion}/dist/247420.css">`;
 
     // Resolve nav hrefs server-side against basePath. Client receives final URLs.
     const navResolved = (Array.isArray(navItems) ? navItems : []).map(([label, href]) =>
@@ -90,8 +150,21 @@ export function renderPageHtml({
         sections: Array.isArray(sections) ? sections : [],
         examples: Array.isArray(examples) ? examples : [],
         bodyHtml: body ? renderMarkdown(body) : '',
+        sidebar: sidebar || null,
+        marquee: marquee || null,
+        panels: Array.isArray(panels) ? panels : [],
+        quickstart: quickstart || null,
+        statusLeft: Array.isArray(statusLeft) ? statusLeft : null,
+        statusRight: Array.isArray(statusRight) ? statusRight : null,
     };
 
+    const seoTags = seo ? renderSeoTags({ title, siteName, seo }) : '';
+    const faviconTags = faviconHref
+        ? `<link rel="icon" href="${escape(faviconHref)}">`
+        : (faviconGlyph
+            ? `<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E${encodeURIComponent(faviconGlyph)}%3C/text%3E%3C/svg%3E">`
+            : '');
+
     // Theme attribute co-location is CORRECT here: dist/247420.css keys every
     // theme block off the COMPOUND selector `.ds-247420[data-theme="X"]`
     // (verified in dist/247420.css ~L229). That selector requires BOTH the class
@@ -107,9 +180,11 @@ export function renderPageHtml({
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escape(title)} — ${escape(siteName)}</title>
+${seoTags}
+${faviconTags}
 ${cssLink}
 <script type="importmap">
-{ "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
+{ "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@${pkgVersion}/dist/247420.js" } }
 </script>
 <style>
 .app-stage { width: 100%; max-width: var(--stage-wide, min(96vw, 1440px)); 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 }
@@ -218,6 +293,40 @@ function examplesNode(examples) {
   });
 }
 
+function panelNode(panel, idx) {
+  const items = Array.isArray(panel.items) ? panel.items : [];
+  if (!items.length) return null;
+  const rows = items.map((it, i) => {
+    const kids = [
+      h('span', { key: 'c', class: 'code' }, String(it.code || String(i + 1).padStart(2, '0'))),
+      h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')),
+    ];
+    if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
+    kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
+    return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
+  });
+  return C.Panel({ id: panel.id || null, title: panel.title || panel.name || '', count: panel.count || items.length, children: rows });
+}
+
+function marqueeNode(marquee) {
+  if (!marquee || !Array.isArray(marquee.items) || !marquee.items.length) return null;
+  return C.Marquee ? C.Marquee({ items: marquee.items, sep: marquee.sep || '/' }) : null;
+}
+
+function quickstartNode(quickstart) {
+  if (!quickstart || !Array.isArray(quickstart.lines) || !quickstart.lines.length) return null;
+  const lineNodes = quickstart.lines.map((l, i) => h('div', { key: 'q' + i, class: 'cli' },
+    h('span', { class: 'prompt' }, l.kind === 'cmt' ? '#' : '$'),
+    h('span', { class: 'cmd' }, l.text)
+  ));
+  return C.Panel({ title: quickstart.heading || 'quick start', children: h('div', { class: 'ds-quickstart' }, ...lineNodes) });
+}
+
+function sideNode(sidebar) {
+  if (!sidebar || !Array.isArray(sidebar.sections) || !sidebar.sections.length || !C.Side) return null;
+  return C.Side({ sections: sidebar.sections });
+}
+
 // minimal client-side markdown renderer matching server-side renderer (idempotent for already-html bodies)
 function __slug(s) { return String(s || '').trim().toLowerCase().replace(/[^\\w\\s-]/g, '').replace(/\\s+/g, '-'); }
 function __md(md) {
@@ -243,7 +352,10 @@ const bodyNode = data.bodyHtml ? C.Section({ children: h('div', { class: 'page-b
 
 const mainChildren = [
   heroNode(data.hero),
+  marqueeNode(data.marquee),
   ...data.sections.map(sectionNode),
+  ...(data.panels || []).map(panelNode),
+  quickstartNode(data.quickstart),
   examplesNode(data.examples),
   bodyNode,
 ].filter(Boolean);
@@ -251,9 +363,14 @@ const mainChildren = [
 mount(document.getElementById('app'), () => C.AppShell({
   topbar: C.Topbar({ brand: data.siteName, items: data.navItems, active: data.title }),
   crumb: C.Crumb({ leaf: data.title }),
+  side: sideNode(data.sidebar),
   main: h('div', { class: 'app-stage' }, ...mainChildren),
-  status: C.Status({ left: [data.siteName.toLowerCase(), data.slug], right: ['live'] }),
+  status: C.Status({
+    left: data.statusLeft || [data.siteName.toLowerCase(), data.slug],
+    right: data.statusRight || ['live'],
+  }),
 }));
+${clientScriptExtra}
 </script>
 </body>
 </html>`;

package/src/theme.js

@@ -37,7 +37,7 @@ function readStored() {
 }
 
 function writeStored(mode) {
-    try { window.localStorage.setItem(KEY, mode); } catch {}
+    try { window.localStorage.setItem(KEY, mode); } catch { /* swallow: persistence is best-effort, theme still applies in-memory */ }
 }
 
 function writeAttr(mode) {
@@ -53,7 +53,7 @@ function ensureMq() {
             // Re-emit so listeners can re-render derived UI even though
             // data-theme stays "auto" — the CSS @media handles the swap.
             for (const cb of listeners) {
-                try { cb({ mode: 'auto', resolved: _mq.matches ? 'ink' : 'paper' }); } catch {}
+                try { cb({ mode: 'auto', resolved: _mq.matches ? 'ink' : 'paper' }); } catch { /* swallow: a listener's error must not block notifying the rest */ }
             }
         }
     };
@@ -71,7 +71,7 @@ export function applyTheme(mode) {
         ? (_mq && _mq.matches ? 'ink' : 'paper')
         : mode;
     for (const cb of listeners) {
-        try { cb({ mode, resolved }); } catch {}
+        try { cb({ mode, resolved }); } catch { /* swallow: a listener's error must not block notifying the rest */ }
     }
     return mode;
 }
@@ -101,11 +101,11 @@ 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 {}
+        try { window.localStorage.setItem(ACCENT_KEY, accent); } catch { /* swallow: persistence is best-effort, accent still applies in-memory */ }
     } else {
         // No accent attribute = the theme's default accent (green).
         document.documentElement.removeAttribute('data-accent');
-        try { window.localStorage.removeItem(ACCENT_KEY); } catch {}
+        try { window.localStorage.removeItem(ACCENT_KEY); } catch { /* swallow: persistence is best-effort, accent still applies in-memory */ }
     }
     return accent;
 }
@@ -119,7 +119,7 @@ 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 {}
+        try { window.localStorage.setItem(DENSITY_KEY, density); } catch { /* swallow: persistence is best-effort, density still applies in-memory */ }
     }
     return density;
 }
@@ -148,5 +148,5 @@ export function initTheme() {
 
 if (isBrowser()) {
     // Run on next microtask so SSR-injected attributes settle first.
-    Promise.resolve().then(() => { try { initTheme(); } catch {} });
+    Promise.resolve().then(() => { try { initTheme(); } catch { /* swallow: deferred init is a progressive enhancement, page already rendered without it */ } });
 }

package/src/uid.js

@@ -0,0 +1,16 @@
+// Single source of quasi-unique id generation for the whole SDK and every
+// static-site consumer, instead of each call site pasting its own
+// Math.random().toString(36) one-liner. Prefers crypto.randomUUID() (both
+// browser and modern Node have this); falls back to a Math.random-based
+// id only when crypto.randomUUID is unavailable (older runtimes).
+export function uid() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') return crypto.randomUUID();
+    return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+// Short id variant for call sites that just want a compact suffix (e.g.
+// DOM ids, temp-file names) rather than a full UUID. `len` caps the
+// random-part length (default 8, matching the common `.slice(2, 10)` idiom).
+export function shortUid(len = 8) {
+    return uid().replace(/-/g, '').slice(0, len);
+}