anentrypoint-design 0.0.121 → 0.0.124

package/src/components/shell.js

@@ -1,117 +1,117 @@
-// Chrome: Topbar, Crumb, Side, Status, AppShell, plus primitives
-// (Brand, Chip, Btn, Glyph, Heading, Lede). Pure factories — props in,
-// webjsx vnode out. CSS in app-shell.css uses these class names.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-const h = webjsx.createElement;
-
-export function Brand({ name = '247420', leaf } = {}) {
-    return h('span', { class: 'brand' }, name,
-        leaf ? h('span', { class: 'slash' }, ' / ') : null,
-        leaf || null);
-}
-
-export function Chip({ tone = '', children }) {
-    return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
-}
-
-export function Btn({ href = '#', primary, ghost, children, onClick }) {
-    const cls = primary ? 'btn-primary' : (ghost ? 'btn-ghost' : 'btn');
-    return h('a', { class: cls, href, onclick: onClick }, children);
-}
-
-export function Glyph({ children, color }) {
-    return h('span', { class: 'glyph', style: color ? `color:${color}` : '' }, children);
-}
-
-export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
-    return h('header', { class: 'app-topbar' },
-        Brand({ name: brand, leaf }),
-        search ? h('label', { class: 'app-search' },
-            h('span', { class: 'icon' }, '⌕'),
-            h('input', { type: 'search', placeholder: search, 'aria-label': 'search' })
-        ) : h('span', {}),
-        h('nav', {}, ...items.map(([label, href]) =>
-            h('a', {
-                key: label,
-                href,
-                class: active === String(label).replace(' ↗', '') ? 'active' : '',
-                onclick: (e) => {
-                    if (!String(href).startsWith('http') && onNav) {
-                        e.preventDefault();
-                        onNav(String(label).replace(' ↗', ''));
-                    }
-                }
-            }, label)
-        ))
-    );
-}
-
-export function Crumb({ trail = [], leaf = '', right } = {}) {
-    const parts = [];
-    trail.forEach((t, i) => {
-        parts.push(h('span', { key: 't' + i }, t));
-        parts.push(h('span', { key: 's' + i, class: 'sep' }, '›'));
-    });
-    parts.push(h('span', { key: 'leaf', class: 'leaf' }, leaf));
-    if (right) parts.push(h('span', { key: 'r', class: 'crumb-right' }, ...(Array.isArray(right) ? right : [right])));
-    return h('div', { class: 'app-crumb' }, ...parts);
-}
-
-export function Side({ sections = [] } = {}) {
-    return h('aside', { class: 'app-side' }, ...sections.flatMap(sec => [
-        h('div', { class: 'group', key: sec.group }, sec.group),
-        ...sec.items.map((item, i) => {
-            const { glyph, label, href = '#', active, count, color, onClick } = item;
-            return h('a', {
-                key: sec.group + i,
-                href,
-                class: active ? 'active' : '',
-                onclick: onClick
-            },
-                glyph != null ? Glyph({ children: glyph, color }) : h('span', { class: 'glyph' }),
-                h('span', {}, label),
-                count != null ? h('span', { class: 'count' }, String(count)) : null
-            );
-        })
-    ]));
-}
-
-export function Status({ left = [], right = [] } = {}) {
-    return h('footer', { class: 'app-status' },
-        ...left.map((t, i) => h('span', { key: 'l' + i, class: 'item' }, t)),
-        h('span', { class: 'spread' }),
-        ...right.map((t, i) => h('span', { key: 'r' + i, class: 'item' }, t))
-    );
-}
-
-export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
-    const hasSide = Boolean(side);
-    const sideNode = hasSide ? side : h('aside', { class: 'app-side', 'aria-hidden': 'true' });
-    return h('div', { class: 'app' },
-        topbar || null,
-        crumb || null,
-        h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
-            h('div', { class: 'app-side-shell' }, sideNode),
-            h('main', { class: 'app-main' + (narrow ? ' narrow' : '') }, ...(Array.isArray(main) ? main : [main]))
-        ),
-        status || null
-    );
-}
-
-export function Heading({ level = 1, children, style = '' }) {
-    return h('h' + level, { style }, children);
-}
-
-export function Lede({ children }) {
-    return h('p', { class: 'lede' }, children);
-}
-
-export function Dot({ tone = 'live' }) {
-    const cls = tone === 'live' ? 'ds-dot-live' : 'ds-dot-idle';
-    return h('span', { class: cls }, tone === 'live' ? '●' : '○');
-}
-
-export function Rail({ tone = 'green' }) {
-    return h('span', { class: 'ds-rail tone-' + tone, 'aria-hidden': 'true' });
-}
+// Chrome: Topbar, Crumb, Side, Status, AppShell, plus primitives
+// (Brand, Chip, Btn, Glyph, Heading, Lede). Pure factories — props in,
+// webjsx vnode out. CSS in app-shell.css uses these class names.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+export function Brand({ name = '247420', leaf } = {}) {
+    return h('span', { class: 'brand' }, name,
+        leaf ? h('span', { class: 'slash' }, ' / ') : null,
+        leaf || null);
+}
+
+export function Chip({ tone = '', children }) {
+    return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
+}
+
+export function Btn({ href = '#', primary, ghost, children, onClick }) {
+    const cls = primary ? 'btn-primary' : (ghost ? 'btn-ghost' : 'btn');
+    return h('a', { class: cls, href, onclick: onClick }, children);
+}
+
+export function Glyph({ children, color }) {
+    return h('span', { class: 'glyph', style: color ? `color:${color}` : '' }, children);
+}
+
+export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
+    return h('header', { class: 'app-topbar' },
+        Brand({ name: brand, leaf }),
+        search ? h('label', { class: 'app-search' },
+            h('span', { class: 'icon' }, '⌕'),
+            h('input', { type: 'search', placeholder: search, 'aria-label': 'search' })
+        ) : h('span', {}),
+        h('nav', {}, ...items.map(([label, href]) =>
+            h('a', {
+                key: label,
+                href,
+                class: active === String(label).replace(' ↗', '') ? 'active' : '',
+                onclick: (e) => {
+                    if (!String(href).startsWith('http') && onNav) {
+                        e.preventDefault();
+                        onNav(String(label).replace(' ↗', ''));
+                    }
+                }
+            }, label)
+        ))
+    );
+}
+
+export function Crumb({ trail = [], leaf = '', right } = {}) {
+    const parts = [];
+    trail.forEach((t, i) => {
+        parts.push(h('span', { key: 't' + i }, t));
+        parts.push(h('span', { key: 's' + i, class: 'sep' }, '›'));
+    });
+    parts.push(h('span', { key: 'leaf', class: 'leaf' }, leaf));
+    if (right) parts.push(h('span', { key: 'r', class: 'crumb-right' }, ...(Array.isArray(right) ? right : [right])));
+    return h('div', { class: 'app-crumb' }, ...parts);
+}
+
+export function Side({ sections = [] } = {}) {
+    return h('aside', { class: 'app-side' }, ...sections.flatMap(sec => [
+        h('div', { class: 'group', key: sec.group }, sec.group),
+        ...sec.items.map((item, i) => {
+            const { glyph, label, href = '#', active, count, color, onClick } = item;
+            return h('a', {
+                key: sec.group + i,
+                href,
+                class: active ? 'active' : '',
+                onclick: onClick
+            },
+                glyph != null ? Glyph({ children: glyph, color }) : h('span', { class: 'glyph' }),
+                h('span', {}, label),
+                (count != null && count !== 0 && count !== '0') ? h('span', { class: 'count' }, String(count)) : null
+            );
+        })
+    ]));
+}
+
+export function Status({ left = [], right = [] } = {}) {
+    return h('footer', { class: 'app-status' },
+        ...left.map((t, i) => h('span', { key: 'l' + i, class: 'item' }, t)),
+        h('span', { class: 'spread' }),
+        ...right.map((t, i) => h('span', { key: 'r' + i, class: 'item' }, t))
+    );
+}
+
+export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
+    const hasSide = Boolean(side);
+    const sideNode = hasSide ? side : h('aside', { class: 'app-side', 'aria-hidden': 'true' });
+    return h('div', { class: 'app' },
+        topbar || null,
+        crumb || null,
+        h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
+            h('div', { class: 'app-side-shell' }, sideNode),
+            h('main', { class: 'app-main' + (narrow ? ' narrow' : '') }, ...(Array.isArray(main) ? main : [main]))
+        ),
+        status || null
+    );
+}
+
+export function Heading({ level = 1, children, style = '' }) {
+    return h('h' + level, { style }, children);
+}
+
+export function Lede({ children }) {
+    return h('p', { class: 'lede' }, children);
+}
+
+export function Dot({ tone = 'live' }) {
+    const cls = tone === 'live' ? 'ds-dot-live' : 'ds-dot-idle';
+    return h('span', { class: cls }, tone === 'live' ? '●' : '○');
+}
+
+export function Rail({ tone = 'green' }) {
+    return h('span', { class: 'ds-rail tone-' + tone, 'aria-hidden': 'true' });
+}

package/src/components/theme-toggle.js

@@ -1,70 +1,70 @@
-// ThemeToggle — segmented auto/paper/ink radio bound to src/theme.js.
-//
-// Usage:
-//   import { ThemeToggle } from 'anentrypoint-design';
-//   ThemeToggle()                                   // segmented control
-//   ThemeToggle({ compact: true })                  // single cycling glyph button
-//
-// Reads current mode from the theme controller; clicks call applyTheme()
-// which persists, updates <html data-theme>, and notifies listeners.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { applyTheme, getTheme, resolvedTheme, onThemeChange } from '../theme.js';
-
-const h = webjsx.createElement;
-
-const MODES = [
-    ['auto',  '⌗', 'auto'],
-    ['paper', '☀', 'light'],
-    ['ink',   '☾', 'dark'],
-];
-
-// Track instances so an OS-theme change while in 'auto' re-renders the
-// glyph in the compact variant (the segmented variant doesn't need it).
-const refresh = new Set();
-let _bound = false;
-function bindOnce() {
-    if (_bound) return;
-    _bound = true;
-    onThemeChange(() => { for (const cb of refresh) cb(); });
-}
-
-export function ThemeToggle({ compact = false, onChange } = {}) {
-    bindOnce();
-    const current = getTheme();
-
-    if (compact) {
-        const resolved = resolvedTheme();
-        const glyph = current === 'auto' ? '⌗' : (resolved === 'ink' ? '☾' : '☀');
-        const label = current === 'auto' ? `auto (${resolved})` : (current === 'ink' ? 'dark' : 'light');
-        return h('button', {
-            class: 'btn ds-theme-toggle',
-            type: 'button',
-            'aria-label': 'theme: ' + label,
-            title: 'theme: ' + label + ' — click to cycle',
-            onclick: () => {
-                const next = current === 'auto' ? 'paper' : (current === 'paper' ? 'ink' : 'auto');
-                applyTheme(next);
-                if (onChange) try { onChange(next); } catch {}
-            }
-        }, h('span', { class: 'glyph' }, glyph), ' ', label);
-    }
-
-    return h('div', {
-        class: 'ds-theme-toggle ds-segmented',
-        role: 'radiogroup',
-        'aria-label': 'theme'
-    }, ...MODES.map(([mode, glyph, label]) =>
-        h('button', {
-            key: mode,
-            type: 'button',
-            role: 'radio',
-            'aria-checked': current === mode ? 'true' : 'false',
-            class: 'ds-seg-btn' + (current === mode ? ' is-on' : ''),
-            onclick: () => {
-                applyTheme(mode);
-                if (onChange) try { onChange(mode); } catch {}
-            }
-        }, h('span', { class: 'glyph' }, glyph), ' ', label)
-    ));
-}
+// ThemeToggle — segmented auto/paper/ink radio bound to src/theme.js.
+//
+// Usage:
+//   import { ThemeToggle } from 'anentrypoint-design';
+//   ThemeToggle()                                   // segmented control
+//   ThemeToggle({ compact: true })                  // single cycling glyph button
+//
+// Reads current mode from the theme controller; clicks call applyTheme()
+// which persists, updates <html data-theme>, and notifies listeners.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { applyTheme, getTheme, resolvedTheme, onThemeChange } from '../theme.js';
+
+const h = webjsx.createElement;
+
+const MODES = [
+    ['auto',  '⌗', 'auto'],
+    ['paper', '☀', 'light'],
+    ['ink',   '☾', 'dark'],
+];
+
+// Track instances so an OS-theme change while in 'auto' re-renders the
+// glyph in the compact variant (the segmented variant doesn't need it).
+const refresh = new Set();
+let _bound = false;
+function bindOnce() {
+    if (_bound) return;
+    _bound = true;
+    onThemeChange(() => { for (const cb of refresh) cb(); });
+}
+
+export function ThemeToggle({ compact = false, onChange } = {}) {
+    bindOnce();
+    const current = getTheme();
+
+    if (compact) {
+        const resolved = resolvedTheme();
+        const glyph = current === 'auto' ? '⌗' : (resolved === 'ink' ? '☾' : '☀');
+        const label = current === 'auto' ? `auto (${resolved})` : (current === 'ink' ? 'dark' : 'light');
+        return h('button', {
+            class: 'btn ds-theme-toggle',
+            type: 'button',
+            'aria-label': 'theme: ' + label,
+            title: 'theme: ' + label + ' — click to cycle',
+            onclick: () => {
+                const next = current === 'auto' ? 'paper' : (current === 'paper' ? 'ink' : 'auto');
+                applyTheme(next);
+                if (onChange) try { onChange(next); } catch {}
+            }
+        }, h('span', { class: 'glyph' }, glyph), ' ', label);
+    }
+
+    return h('div', {
+        class: 'ds-theme-toggle ds-segmented',
+        role: 'radiogroup',
+        'aria-label': 'theme'
+    }, ...MODES.map(([mode, glyph, label]) =>
+        h('button', {
+            key: mode,
+            type: 'button',
+            role: 'radio',
+            'aria-checked': current === mode ? 'true' : 'false',
+            class: 'ds-seg-btn' + (current === mode ? ' is-on' : ''),
+            onclick: () => {
+                applyTheme(mode);
+                if (onChange) try { onChange(mode); } catch {}
+            }
+        }, h('span', { class: 'glyph' }, glyph), ' ', label)
+    ));
+}

package/src/components.js

@@ -1,57 +1,59 @@
-// Component barrel — matches upstream export surface 1:1.
-
-import * as webjsx from '../vendor/webjsx/index.js';
-export const h = webjsx.createElement;
-
-export {
-    Brand, Chip, Btn, Glyph,
-    Topbar, Crumb, Side, Status, AppShell,
-    Heading, Lede, Dot, Rail
-} from './components/shell.js';
-
-export {
-    Panel, Row, RowLink,
-    Hero, Install, Receipt, Changelog,
-    WorksList, WritingList, Manifesto, Section, PageHeader,
-    Kpi, Table, SearchInput, TextField, EventList,
-    HomeView, ProjectView, Form
-} from './components/content.js';
-
-export {
-    fmtBytes, renderInline,
-    ChatMessage, ChatComposer, Chat,
-    AICAT_FACE, AICatPortrait, AICat
-} from './components/chat.js';
-
-export {
-    fileGlyph, fmtFileSize,
-    FileIcon, FileRow, FileGrid, FileToolbar,
-    DropZone, UploadProgress, EmptyState, BreadcrumbPath
-} from './components/files.js';
-
-export {
-    ConfirmDialog, PromptDialog,
-    FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer
-} from './components/files-modals.js';
-
-export {
-    ServerIcon, ServerRail,
-    ChannelItem, ChannelCategory,
-    VoiceUser, UserPanel, ChannelSidebar,
-    MemberItem, MemberList,
-    ChatHeader, VoiceStrip, CommunityShell
-} from './components/community.js';
-
-export { ThemeToggle } from './components/theme-toggle.js';
-
-export {
-    Toast, Banner, MobileHeader, DrawerOverlay, BootOverlay,
-    ContextMenu, CommandPalette, EmojiPicker, ReplyBar
-} from './components/overlays.js';
-
-export {
-    FREDDIE_PAGES,
-    home, chat, voice, sessions, projects, agents, analytics,
-    models, cron, skills, config, env, tools, batch, gateway, chains,
-    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages
-} from './components/freddie.js';
+// Component barrel — matches upstream export surface 1:1.
+
+import * as webjsx from '../vendor/webjsx/index.js';
+export const h = webjsx.createElement;
+
+export {
+    Brand, Chip, Btn, Glyph,
+    Topbar, Crumb, Side, Status, AppShell,
+    Heading, Lede, Dot, Rail
+} from './components/shell.js';
+
+export {
+    Panel, Row, RowLink,
+    Hero, Install, Receipt, Changelog,
+    WorksList, WritingList, Manifesto, Section, PageHeader,
+    Kpi, Table, SearchInput, TextField, EventList,
+    HomeView, ProjectView, Form
+} from './components/content.js';
+
+export {
+    fmtBytes, renderInline,
+    ChatMessage, ChatComposer, Chat,
+    AICAT_FACE, AICatPortrait, AICat
+} from './components/chat.js';
+
+export {
+    fileGlyph, fmtFileSize,
+    FileIcon, FileRow, FileGrid, FileToolbar,
+    DropZone, UploadProgress, EmptyState, BreadcrumbPath
+} from './components/files.js';
+
+export {
+    ConfirmDialog, PromptDialog,
+    FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer
+} from './components/files-modals.js';
+
+export {
+    ServerIcon, ServerRail,
+    ChannelItem, ChannelCategory,
+    VoiceUser, UserPanel, ChannelSidebar,
+    MemberItem, MemberList,
+    ChatHeader, VoiceStrip, CommunityShell
+} from './components/community.js';
+
+export { ThemeToggle } from './components/theme-toggle.js';
+
+export {
+    Toolbar, Tabs,
+    TreeView, TreeItem,
+    PropertyGrid, PropertyField,
+    Dock, IconButtonGroup
+} from './components/editor-primitives.js';
+
+export {
+    FREDDIE_PAGES,
+    home, chat, voice, sessions, projects, agents, analytics,
+    models, cron, skills, config, env, tools, batch, gateway, chains,
+    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages
+} from './components/freddie.js';

package/src/debug.js

@@ -1,30 +1,30 @@
-// Lightweight client-side registry. Subsystems register a snapshot fn;
-// `window.__debug` exposes them all for live inspection.
-
-const _registry = new Map();
-
-export function register(name, snapshotFn) {
-    if (typeof name !== 'string' || typeof snapshotFn !== 'function') return;
-    _registry.set(name, snapshotFn);
-    if (typeof window !== 'undefined') {
-        if (!window.__debug) window.__debug = {};
-        Object.defineProperty(window.__debug, name, {
-            get() { try { return snapshotFn(); } catch (e) { return { error: String(e) }; } },
-            configurable: true,
-            enumerable: true,
-        });
-    }
-}
-
-export function unregister(name) {
-    _registry.delete(name);
-    if (typeof window !== 'undefined' && window.__debug) delete window.__debug[name];
-}
-
-export function snapshot() {
-    const out = {};
-    for (const [k, fn] of _registry) {
-        try { out[k] = fn(); } catch (e) { out[k] = { error: String(e) }; }
-    }
-    return out;
-}
+// Lightweight client-side registry. Subsystems register a snapshot fn;
+// `window.__debug` exposes them all for live inspection.
+
+const _registry = new Map();
+
+export function register(name, snapshotFn) {
+    if (typeof name !== 'string' || typeof snapshotFn !== 'function') return;
+    _registry.set(name, snapshotFn);
+    if (typeof window !== 'undefined') {
+        if (!window.__debug) window.__debug = {};
+        Object.defineProperty(window.__debug, name, {
+            get() { try { return snapshotFn(); } catch (e) { return { error: String(e) }; } },
+            configurable: true,
+            enumerable: true,
+        });
+    }
+}
+
+export function unregister(name) {
+    _registry.delete(name);
+    if (typeof window !== 'undefined' && window.__debug) delete window.__debug[name];
+}
+
+export function snapshot() {
+    const out = {};
+    for (const [k, fn] of _registry) {
+        try { out[k] = fn(); } catch (e) { out[k] = { error: String(e) }; }
+    }
+    return out;
+}

package/src/deck-stage.js

@@ -1,21 +1,21 @@
-// deck-stage — lazy registration. Consumer calls registerDeckStage() in a
-// browser context; we side-effect import the upstream slides/deck-stage.js
-// (the starter-component web component that handles scaling + nav).
-
-let _registered = false;
-export async function registerDeckStage() {
-    if (_registered) return (typeof customElements !== 'undefined') ? customElements.get('deck-stage') : null;
-    if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return null;
-    try {
-        await import('../slides/deck-stage.js');
-    } catch (err) {
-        console.warn('[247420] deck-stage import failed:', err);
-        return null;
-    }
-    _registered = true;
-    return customElements.get('deck-stage');
-}
-
-export function getDeckStage() {
-    return (typeof customElements !== 'undefined') ? customElements.get('deck-stage') : null;
-}
+// deck-stage — lazy registration. Consumer calls registerDeckStage() in a
+// browser context; we side-effect import the upstream slides/deck-stage.js
+// (the starter-component web component that handles scaling + nav).
+
+let _registered = false;
+export async function registerDeckStage() {
+    if (_registered) return (typeof customElements !== 'undefined') ? customElements.get('deck-stage') : null;
+    if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return null;
+    try {
+        await import('../slides/deck-stage.js');
+    } catch (err) {
+        console.warn('[247420] deck-stage import failed:', err);
+        return null;
+    }
+    _registered = true;
+    return customElements.get('deck-stage');
+}
+
+export function getDeckStage() {
+    return (typeof customElements !== 'undefined') ? customElements.get('deck-stage') : null;
+}