anentrypoint-design 0.0.160 → 0.0.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.160",
+  "version": "0.0.162",
   "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",

package/src/components/community.js

@@ -37,7 +37,8 @@ export function ServerRail({ servers = [], activeId, onSelect, onAdd } = {}) {
 }
 
 export function ChannelItem({ id, name, type = 'text', active, voiceActive, voiceConnecting, badge, draggable, actions = [], participants = [], onClick, onContext } = {}) {
-    const icon = type === 'voice' ? '🔊' : type === 'forum' ? '◻' : type === 'threaded' ? '◉' : type === 'announcement' ? '📣' : type === 'page' ? '📄' : type === 'thread' ? '🧵' : '#';
+    const ICON_FOR = { voice: 'speaker', forum: 'forum', threaded: 'thread', announcement: 'megaphone', page: 'page', thread: 'thread', text: 'hash' };
+    const icon = Icon(ICON_FOR[type] || 'hash', { size: 15 });
     const handleActionClick = (a, e) => { e.stopPropagation(); a.onClick && a.onClick(id, e); };
     return h('div', { class: 'cm-channel-item-wrap', 'data-channel-wrap': id },
         h('div', {
@@ -238,13 +239,17 @@ export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDea
     );
 }
 
-export function MobileHeader({ title, onMenu, onMembers } = {}) {
+export function MobileHeader({ title, channelType, channelName, onMenu, onMembers } = {}) {
+    const ICON_FOR = { voice: 'speaker', forum: 'forum', threaded: 'thread', announcement: 'megaphone', page: 'page', thread: 'thread', text: 'hash' };
+    const titleNode = channelType
+        ? [Icon(ICON_FOR[channelType] || 'hash', { size: 16 }), ' ' + (channelName || '')]
+        : [title || ''];
     return h('div', { class: 'cm-mobile-header', role: 'banner' },
         h('button', {
             class: 'cm-mh-btn', type: 'button', onclick: onMenu,
             title: 'Menu', 'aria-label': 'open navigation menu'
         }, Icon('menu')),
-        h('span', { class: 'cm-mh-title' }, title || ''),
+        h('span', { class: 'cm-mh-title' }, ...titleNode),
         h('button', {
             class: 'cm-mh-btn', type: 'button', onclick: onMembers,
             title: 'Members', 'aria-label': 'show members'

package/src/components/editor-primitives.js

@@ -325,15 +325,22 @@ export function ContextMenu({ items = [], anchor = { x: 0, y: 0 }, onClose } = {
             ref: (el) => {
                 if (!el) return;
                 rootEl = el;
-                // Clamp to viewport
-                const vw = window.innerWidth, vh = window.innerHeight;
-                let x = anchor.x || 0, y = anchor.y || 0;
-                el.style.left = '0px'; el.style.top = '0px';
-                const r = el.getBoundingClientRect();
-                if (x + r.width > vw) x = Math.max(0, vw - r.width - 4);
-                if (y + r.height > vh) y = Math.max(0, vh - r.height - 4);
-                el.style.left = x + 'px';
-                el.style.top = y + 'px';
+                // Position at the anchor immediately, then clamp once layout has
+                // settled — measuring synchronously in ref reads a zero-size box
+                // (children not yet painted), so the clamp must run post-layout.
+                const ax = anchor.x || 0, ay = anchor.y || 0;
+                el.style.left = ax + 'px';
+                el.style.top = ay + 'px';
+                const clamp = () => {
+                    const vw = window.innerWidth, vh = window.innerHeight;
+                    const r = el.getBoundingClientRect();
+                    let x = ax, y = ay;
+                    if (x + r.width > vw) x = Math.max(4, vw - r.width - 4);
+                    if (y + r.height > vh) y = Math.max(4, vh - r.height - 4);
+                    el.style.left = x + 'px';
+                    el.style.top = y + 'px';
+                };
+                requestAnimationFrame(clamp);
                 queueMicrotask(() => { el.querySelector('button[data-ix]')?.focus(); });
             }
         },

package/src/components/shell.js

@@ -90,7 +90,12 @@ const ICON_PATHS = {
     smile: '<circle cx="12" cy="12" r="9"/><path d="M8 14a4 4 0 0 0 8 0"/><path d="M9 9h.01M15 9h.01"/>',
     'more-horizontal': '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
     'arrow-up': '<path d="M12 19V5M5 12l7-7 7 7"/>',
-    send: '<path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/>'
+    send: '<path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/>',
+    hash: '<path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/>',
+    megaphone: '<path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z"/><path d="M15 8a4 4 0 0 1 0 8M18 5a8 8 0 0 1 0 14"/>',
+    forum: '<path d="M4 5h13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/>',
+    page: '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M8 13h8M8 17h6"/>',
+    thread: '<path d="M5 6h14M5 11h14M5 16h8"/><circle cx="17" cy="17" r="3"/>'
 };
 export function Icon(name, { size = 16 } = {}) {
     const inner = ICON_PATHS[name];
@@ -189,6 +194,14 @@ function toggleSide(open) {
 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' });
+    // Topbar and crumb used to stack as two separate chrome bars — a "double
+    // title bar". When both are present, fold them into one sticky row:
+    // brand + nav (topbar) and breadcrumb + right slot (crumb) share a single
+    // band so the chrome reads as one bar, not two. Either prop alone still
+    // renders on its own (consumers that pass only a topbar are unaffected).
+    const chrome = (topbar && crumb)
+        ? h('div', { class: 'app-chrome' }, topbar, crumb)
+        : (topbar || crumb || null);
     return h('div', { class: 'app' },
         h('a', { href: '#app-main', class: 'skip-link' }, 'skip to main content'),
         hasSide ? h('button', {
@@ -196,8 +209,7 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
             'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-main',
             onclick: () => toggleSide(),
         }, Icon('menu')) : null,
-        topbar || null,
-        crumb || null,
+        chrome,
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
             h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: () => toggleSide(false) }),
             h('div', { class: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false); } }, sideNode),