anentrypoint-design 0.0.385 → 0.0.387

package/src/components/community.js

@@ -1,448 +1,19 @@
 // Community surface — matches upstream signatures.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Icon } from './shell.js';
-import { Avatar, avatarInitial } from './content.js';
-import { sanitizeHtml } from '../markdown.js';
-const h = webjsx.createElement;
-
-// Clamp a count to a compact badge string (matches the rail's 99+ convention),
-// so a runaway number never blows out a fixed-width badge or item row.
-const clampCount = (n) => { const v = Number(n) || 0; return v > 99 ? '99+' : String(v); };
-
-export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
-    return h('div', {
-        class: 'cm-server-icon' + (active ? ' active' : ''),
-        onclick: onClick,
-        role: 'button',
-        'aria-label': name,
-        'aria-pressed': active ? 'true' : 'false',
-        tabindex: '0',
-        'data-id': id,
-        onkeydown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick && onClick(e);
-            }
-        }
-    },
-        h('span', { class: 'cm-server-pill' }),
-        icon ? h('img', { src: icon, alt: name }) : Avatar({ name, shape: 'square', initialsCount: 2 }),
-        badge ? h('span', { class: 'cm-server-badge' }, badge > 99 ? '99+' : String(badge)) : null
-    );
-}
-
-export function ServerRail({ servers = [], activeId, onSelect, onAdd } = {}) {
-    return h('div', { class: 'cm-server-rail', role: 'navigation', 'aria-label': 'servers' },
-        h('a', { class: 'cm-server-back', href: '../', title: 'Back', 'aria-label': 'back' }, Icon('chevron-left')),
-        h('div', { class: 'cm-server-sep', 'aria-hidden': 'true' }),
-        ...servers.map(s => ServerIcon({ ...s, active: s.id === activeId, onClick: () => onSelect && onSelect(s.id) })),
-        onAdd ? h('button', { class: 'cm-server-add', type: 'button', onclick: onAdd, title: 'Add server', 'aria-label': 'add server' }, '+') : null
-    );
-}
-
-export function ChannelItem({ id, name, type = 'text', active, voiceActive, voiceConnecting, badge, draggable, actions = [], participants = [], onClick, onContext } = {}) {
-    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', {
-            class: 'cm-channel-item' + (active ? ' active' : '') + (voiceActive ? ' voice-active' : '') + (voiceConnecting ? ' voice-connecting' : ''),
-            'data-id': id,
-            'data-type': type,
-            draggable: draggable ? 'true' : null,
-            onclick: onClick,
-            oncontextmenu: (e) => { e.preventDefault(); onContext && onContext(id, e.clientX, e.clientY); },
-            onkeydown: (e) => {
-                if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    onContext && onContext(id, rect.left, rect.top + rect.height);
-                }
-                if (draggable) {
-                    if (e.ctrlKey && e.key === 'ArrowUp') {
-                        e.preventDefault();
-                        window.dispatchEvent(new CustomEvent('reorder', { detail: { id, direction: 'up' } }));
-                    }
-                    if (e.ctrlKey && e.key === 'ArrowDown') {
-                        e.preventDefault();
-                        window.dispatchEvent(new CustomEvent('reorder', { detail: { id, direction: 'down' } }));
-                    }
-                }
-            },
-            tabindex: '0',
-            role: 'option'
-        },
-            h('span', { class: 'cm-ch-icon' + (voiceActive ? ' voice-active-badge' : ''), 'data-voice-active': voiceActive ? 'true' : null }, icon),
-            voiceConnecting ? h('span', { class: 'cm-ch-spinner', title: 'Connecting…', 'aria-label': 'Connecting to voice channel…' }) : voiceActive ? h('span', { class: 'cm-ch-voice-badge', title: 'Voice active', 'aria-label': 'Voice channel active' }) : null,
-            h('span', { class: 'cm-ch-name' }, name),
-            badge ? h('span', { class: 'cm-ch-badge' }, badge > 99 ? '99+' : String(badge)) : null,
-            actions.length ? h('div', { class: 'cm-ch-actions' },
-                ...actions.map(a => h('button', {
-                    class: 'cm-ch-action-btn',
-                    title: a.title || '',
-                    'data-action': a.id || '',
-                    onclick: (e) => handleActionClick(a, e)
-                }, a.icon || a.label || 'more'))
-            ) : null
-        ),
-        voiceActive && participants.length ? h('div', { class: 'cm-ch-voice-users' },
-            ...participants.map(p => h('div', { class: 'cm-ch-voice-user' + (p.speaking ? ' speaking' : '') },
-                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `--avatar-bg:${p.color}` : null }, avatarInitial(p.identity)),
-                h('span', { class: 'cm-ch-voice-user-name' }, p.identity)
-            ))
-        ) : null
-    );
-}
-
-export function ChannelCategory({ id, name, channels = [], collapsed, activeId, onToggle, onAddChannel, onChannelClick, onChannelContext, onContextMenu, extraButton, channelDraggable } = {}) {
-    return h('div', { class: 'cm-channel-category', 'data-category': id },
-        h('div', {
-            class: 'cm-category-header' + (collapsed ? ' collapsed' : ''),
-            onclick: () => onToggle && onToggle(id),
-            oncontextmenu: onContextMenu ? (e) => { e.preventDefault(); onContextMenu(id, e.clientX, e.clientY); } : null
-        },
-            h('span', { class: 'cm-cat-arrow' }, Icon('chevron-down')),
-            h('span', { class: 'cm-cat-name' }, name),
-            extraButton ? h('button', { class: 'cm-cat-extra', onclick: (e) => { e.stopPropagation(); extraButton.onClick && extraButton.onClick(id, e); }, 'aria-label': extraButton.title || 'Category action' }, extraButton.icon || extraButton.label || '+') : null,
-            onAddChannel ? h('button', { class: 'cm-cat-add', onclick: (e) => { e.stopPropagation(); onAddChannel(id); }, 'aria-label': 'Add channel to ' + name }, '+') : null
-        ),
-        collapsed ? null : h('div', { class: 'cm-cat-channels' },
-            ...channels.map(c => ChannelItem({
-                ...c,
-                draggable: channelDraggable,
-                active: c.id === activeId,
-                onClick: () => onChannelClick && onChannelClick(c),
-                onContext: onChannelContext
-            }))
-        )
-    );
-}
-
-export function VoiceUser({ identity, speaking, color } = {}) {
-    const initial = avatarInitial(identity);
-    return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
-        h('div', { class: 'cm-voice-user-avatar', style: color ? `--avatar-bg:${color}` : null }, initial),
-        h('span', { class: 'cm-voice-user-name' }, identity)
-    );
-}
-
-export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen, onSettings } = {}) {
-    const initial = avatarInitial(name);
-    const handleSettings = (e) => {
-        e.preventDefault();
-        if (onSettings) {
-            // onSettings callback should open a drawer/modal with quick toggles
-            onSettings({
-                audioDevice: null, // controlled by consumer
-                micOn: !muted,
-                speakerOn: !deafened,
-            });
-        }
-    };
-    return h('div', { class: 'cm-user-panel' },
-        h('div', { class: 'cm-user-avatar', style: color ? `--avatar-bg:${color}` : null },
-            h('span', { class: 'cm-user-status-dot' }),
-            initial
-        ),
-        h('div', { class: 'cm-user-info' },
-            h('div', { class: 'cm-user-name' }, name || 'You'),
-            tag ? h('div', { class: 'cm-user-tag' }, tag) : null
-        ),
-        h('div', { class: 'cm-user-controls' },
-            h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, 'aria-label': muted ? 'Unmute microphone' : 'Mute microphone', 'aria-pressed': muted ? 'true' : 'false' }, Icon(muted ? 'mic-off' : 'mic')),
-            h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, 'aria-label': deafened ? 'Undeafen' : 'Deafen', 'aria-pressed': deafened ? 'true' : 'false' }, Icon(deafened ? 'speaker-off' : 'speaker')),
-            h('button', { class: 'cm-user-btn', onclick: handleSettings, 'aria-label': 'Audio settings', title: 'Open audio settings' }, Icon('settings'))
-        )
-    );
-}
-
-// Skeleton rows for a cold channel-list load — reuses the kit-wide .ds-skel
-// shimmer primitive (sessions.js / files.js) rather than a bare spinner.
-function ChannelListSkeleton({ rows = 6 } = {}) {
-    return h('div', { class: 'cm-channel-list cm-channel-skeleton', 'aria-hidden': 'true' },
-        ...Array.from({ length: rows }, (_, i) => h('div', { key: 'csk' + i, class: 'cm-channel-item-skeleton' },
-            h('span', { class: 'ds-skel ds-skel-icon' }), h('span', { class: 'ds-skel ds-skel-title' }))));
-}
-
-export function ChannelSidebar({ serverName, channels = [], categories = [], activeId, collapsedCats, onChannelClick, onCategoryToggle, onAddChannel, onChannelContext, userPanelProps, loading = false } = {}) {
-    const collapsed = collapsedCats || new Set();
-    const uncategorized = channels.filter(c => !c.categoryId || !categories.find(cat => cat.id === c.categoryId));
-    const sorted = [...categories].sort((a, b) => (a.position || 0) - (b.position || 0));
-    return h('div', { class: 'cm-channel-sidebar' },
-        h('div', { class: 'cm-server-header' },
-            h('span', { class: 'cm-server-header-name' }, serverName || 'Server'),
-        ),
-        loading ? ChannelListSkeleton() : h('div', { class: 'cm-channel-list' },
-            (sorted.length === 0 && uncategorized.length === 0)
-                ? h('div', { class: 'cm-channel-empty', role: 'status' },
-                    Icon('hash', { size: 20 }),
-                    h('span', { class: 'cm-channel-empty-text' }, 'no channels yet — add one to get this server started'))
-                : null,
-            ...sorted.map(cat => ChannelCategory({
-                id: cat.id,
-                name: cat.name,
-                channels: channels.filter(c => c.categoryId === cat.id).sort((a, b) => (a.position || 0) - (b.position || 0)),
-                collapsed: collapsed.has && collapsed.has(cat.id),
-                activeId,
-                onToggle: onCategoryToggle,
-                onAddChannel,
-                onChannelClick,
-                onChannelContext
-            })),
-            uncategorized.length ? ChannelCategory({
-                id: 'uncategorized',
-                name: 'CHANNELS',
-                channels: uncategorized,
-                activeId,
-                onChannelClick,
-                onChannelContext
-            }) : null
-        ),
-        userPanelProps ? UserPanel(userPanelProps) : null
-    );
-}
-
-export function MemberItem({ identity, name, color, status = 'online' } = {}) {
-    const initial = avatarInitial(name || identity);
-    return h('div', { class: 'cm-member-item' },
-        h('div', { class: 'cm-member-avatar', style: color ? `--avatar-bg:${color}` : null },
-            h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),
-            initial
-        ),
-        h('span', { class: 'cm-member-name' }, name || identity)
-    );
-}
-
-// Skeleton rows for a cold member-list load, matching FileSkeleton/session
-// skeleton shape (icon + title placeholder), never a bare spinner.
-function MemberListSkeleton({ rows = 6 } = {}) {
-    return h('div', { class: 'cm-member-list cm-member-skeleton open', 'aria-hidden': 'true' },
-        ...Array.from({ length: rows }, (_, i) => h('div', { key: 'msk' + i, class: 'cm-member-item-skeleton' },
-            h('span', { class: 'ds-skel ds-skel-icon' }), h('span', { class: 'ds-skel ds-skel-title' }))));
-}
-
-export function MemberList({ categories = [], open, loading = false } = {}) {
-    if (loading) return MemberListSkeleton();
-    const total = categories.reduce((n, cat) => n + (cat.members ? cat.members.length : 0), 0);
-    return h('div', { class: 'cm-member-list' + (open ? ' open' : '') },
-        total === 0
-            ? h('div', { key: '_empty', class: 'cm-member-empty', role: 'status' },
-                Icon('members', { size: 20 }),
-                h('span', { class: 'cm-member-empty-text' }, 'no members in this channel yet'))
-            : null,
-        ...categories.flatMap(cat => [
-            h('div', { class: 'cm-member-category', key: cat.label }, `${cat.label} — ${cat.members.length}`),
-            ...cat.members.map((m, i) => MemberItem({ ...m, key: m.identity || i }))
-        ])
-    );
-}
-
-export function ChatHeader({ icon = '#', name, topic, toolbar = [] } = {}) {
-    return h('div', { class: 'cm-chat-header' },
-        h('span', { class: 'cm-chat-header-icon' }, icon),
-        h('span', { class: 'cm-chat-header-name' }, name),
-        topic ? h('span', { class: 'cm-chat-header-topic' }, topic) : null,
-        h('div', { class: 'cm-chat-header-toolbar' }, ...toolbar)
-    );
-}
-
-export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDeafen, onLeave, open } = {}) {
-    return h('div', { class: 'cm-voice-strip' + (open ? ' open' : ''), role: 'region', 'aria-label': 'voice controls' },
-        h('div', { class: 'cm-vs-label' },
-            h('span', { class: 'cm-vs-channel' }, Icon('speaker'), ' ' + (channelName || 'voice')),
-            h('span', { class: 'cm-vs-status' }, status || 'connected')
-        ),
-        h('button', {
-            class: 'cm-vs-btn', type: 'button', onclick: onMute,
-            title: muted ? 'Unmute' : 'Mute',
-            'aria-label': muted ? 'unmute microphone' : 'mute microphone',
-            'aria-pressed': muted ? 'true' : 'false'
-        }, Icon(muted ? 'mic-off' : 'mic')),
-        h('button', {
-            class: 'cm-vs-btn', type: 'button', onclick: onDeafen,
-            title: deafened ? 'Undeafen' : 'Deafen',
-            'aria-label': deafened ? 'undeafen' : 'deafen',
-            'aria-pressed': deafened ? 'true' : 'false'
-        }, Icon(deafened ? 'speaker-off' : 'speaker')),
-        h('button', {
-            class: 'cm-vs-btn danger', type: 'button', onclick: onLeave,
-            title: 'Leave voice', 'aria-label': 'leave voice channel'
-        }, Icon('x'))
-    );
-}
-
-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' }, ...titleNode),
-        h('button', {
-            class: 'cm-mh-btn', type: 'button', onclick: onMembers,
-            title: 'Members', 'aria-label': 'show members'
-        }, Icon('members'))
-    );
-}
-
-export function ReplyBar({ quotedMessage, quotedAuthor, onCancel } = {}) {
-    return h('div', { class: 'cm-reply-bar', role: 'status' },
-        h('span', { class: 'cm-rb-label' }, 'Replying to ',
-            h('strong', { class: 'cm-rb-author' }, quotedAuthor || 'unknown')
-        ),
-        h('span', { class: 'cm-rb-preview', title: quotedMessage || '' }, quotedMessage || ''),
-        h('button', {
-            class: 'cm-rb-cancel', type: 'button', onclick: onCancel,
-            title: 'Cancel reply', 'aria-label': 'cancel reply'
-        }, Icon('x'))
-    );
-}
-
-export function Banner({ tone = 'info', message, visible, actionLabel, onAction, onClick } = {}) {
-    if (!visible || !message) return null;
-    return h('div', {
-        class: 'cm-banner tone-' + tone + (onClick ? ' clickable' : ''),
-        role: tone === 'error' || tone === 'warning' ? 'alert' : 'status',
-        onclick: onClick || null
-    },
-        h('span', { class: 'cm-banner-msg' }, message),
-        actionLabel ? h('button', {
-            class: 'cm-banner-action', type: 'button',
-            onclick: (e) => { e.stopPropagation(); onAction && onAction(e); }
-        }, actionLabel) : null
-    );
-}
-
-function fmtRelTime(ts) {
-    const t = Number(ts) || 0;
-    if (!t) return '';
-    const ms = t > 1e12 ? t : t * 1000;
-    const d = Math.max(0, Date.now() - ms);
-    const m = Math.floor(d / 60000);
-    if (m < 1) return 'now';
-    if (m < 60) return m + 'm';
-    const hr = Math.floor(m / 60);
-    if (hr < 24) return hr + 'h';
-    return Math.floor(hr / 24) + 'd';
-}
-
-// Skeleton rows for a cold thread/post-list load. Two lines per row (title +
-// meta) mirrors cm-tp-item/cm-forum-item's actual shape so the shimmer
-// doesn't jump on load. Reuses the kit-wide .ds-skel shimmer primitive.
-function ListSkeleton({ cls, rows = 5 } = {}) {
-    return h('div', { class: cls + ' cm-list-skeleton', 'aria-hidden': 'true' },
-        ...Array.from({ length: rows }, (_, i) => h('div', { key: 'lsk' + i, class: 'cm-list-item-skeleton' },
-            h('span', { class: 'ds-skel ds-skel-title' }), h('span', { class: 'ds-skel ds-skel-meta' }))));
-}
-
-export function ThreadPanel({ threads = [], activeId = null, title = 'Threads', onSelect, onCreate, onClose, loading = false } = {}) {
-    const list = Array.isArray(threads) ? threads : [];
-    return h('div', { class: 'cm-thread-panel', role: 'complementary', 'aria-label': title },
-        h('div', { class: 'cm-tp-head' },
-            h('span', { class: 'cm-tp-title' }, title),
-            h('div', { class: 'cm-tp-head-actions' },
-                onCreate ? h('button', { type: 'button', class: 'cm-tp-new', 'aria-label': 'new thread', title: 'New thread', onclick: onCreate }, '+') : null,
-                onClose ? h('button', { type: 'button', class: 'cm-tp-close', 'aria-label': 'close', title: 'Close', onclick: onClose }, Icon('x')) : null
-            )
-        ),
-        loading ? ListSkeleton({ cls: 'cm-tp-list' }) : h('div', { class: 'cm-tp-list' },
-            list.length
-                ? list.map(t => h('button', {
-                    type: 'button', key: 'tp-' + t.id,
-                    class: 'cm-tp-item' + (t.id === activeId ? ' is-active' : '') + (t.unread ? ' is-unread' : ''),
-                    onclick: () => onSelect && onSelect(t.id)
-                },
-                    t.unread ? h('span', { class: 'cm-tp-dot', 'aria-hidden': 'true' }) : null,
-                    h('span', { class: 'cm-tp-item-title' }, t.title || '(untitled)'),
-                    t.lastMessage ? h('span', { class: 'cm-tp-item-snippet' }, t.lastMessage) : null,
-                    h('span', { class: 'cm-tp-item-meta' },
-                        t.author ? h('span', { class: 'cm-tp-item-author' }, t.author) : null,
-                        t.time ? h('span', { class: 'cm-tp-item-time' }, fmtRelTime(t.time)) : null
-                    )
-                ))
-                : h('div', { class: 'cm-tp-empty', role: 'status' },
-                    Icon('thread', { size: 20 }),
-                    h('span', { class: 'cm-tp-empty-text' }, onCreate ? 'no threads yet — start one' : 'no threads yet'))
-        )
-    );
-}
-
-export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost, loading = false } = {}) {
-    const list = Array.isArray(posts) ? posts : [];
-    return h('div', { class: 'cm-forum', role: 'region', 'aria-label': 'forum' },
-        h('div', { class: 'cm-forum-toolbar' },
-            h('input', {
-                type: 'search', class: 'cm-forum-search', placeholder: 'Search posts…',
-                'aria-label': 'search posts',
-                oninput: onSearch ? (e) => onSearch(e.target.value) : null
-            }),
-            h('select', {
-                class: 'cm-forum-sort', 'aria-label': 'sort posts',
-                onchange: onSort ? (e) => onSort(e.target.value) : null
-            },
-                h('option', { value: 'recent' }, 'Recent'),
-                h('option', { value: 'replies' }, 'Most replies'),
-                h('option', { value: 'oldest' }, 'Oldest')
-            ),
-            onNewPost ? h('button', { type: 'button', class: 'cm-forum-new', onclick: onNewPost }, 'New post') : null
-        ),
-        loading ? ListSkeleton({ cls: 'cm-forum-list' }) : h('div', { class: 'cm-forum-list' },
-            list.length
-                ? list.map(p => h('button', {
-                    type: 'button', key: 'fp-' + p.id, class: 'cm-forum-item',
-                    onclick: () => onSelect && onSelect(p.id)
-                },
-                    h('div', { class: 'cm-forum-item-head' },
-                        h('span', { class: 'cm-forum-item-title' }, p.title || '(untitled)'),
-                        h('span', { class: 'cm-forum-item-replies' }, clampCount(p.replyCount), Icon('chevron-right', { size: 13 }))
-                    ),
-                    p.snippet ? h('div', { class: 'cm-forum-item-snippet' }, p.snippet) : null,
-                    h('div', { class: 'cm-forum-item-meta' },
-                        p.author ? h('span', { class: 'cm-forum-item-author' }, p.author) : null,
-                        p.time ? h('span', { class: 'cm-forum-item-time' }, fmtRelTime(p.time)) : null,
-                        Array.isArray(p.tags) && p.tags.length
-                            ? h('span', { class: 'cm-forum-item-tags' }, ...p.tags.map((tag, i) =>
-                                h('span', { class: 'cm-forum-tag', key: 'tg-' + i }, tag)))
-                            : null
-                    )
-                ))
-                : h('div', { class: 'cm-forum-empty', role: 'status' },
-                    Icon('forum', { size: 20 }),
-                    h('span', { class: 'cm-forum-empty-text' }, onNewPost ? 'no posts yet — start the discussion' : 'no posts yet'))
-        )
-    );
-}
-
-export function PageView({ title = '', html = '', isAdmin = false, onEdit } = {}) {
-    return h('div', { class: 'cm-page', role: 'document' },
-        h('div', { class: 'cm-page-head' },
-            h('h1', { class: 'cm-page-title' }, title || ''),
-            isAdmin && onEdit ? h('button', { type: 'button', class: 'cm-page-edit', onclick: onEdit }, 'Edit') : null
-        ),
-        h('div', {
-            class: 'cm-page-body',
-            // Page bodies are host/user-authored HTML, so they pass through the
-            // DOMPurify gate before innerHTML — never injected raw (stored-XSS gate).
-            ref: (el) => {
-                if (!el) return;
-                if (!html) { el.innerHTML = '<p class="cm-page-empty">This page is empty.</p>'; return; }
-                sanitizeHtml(html).then((clean) => { el.innerHTML = clean; });
-            }
-        })
-    );
-}
-
-export function CommunityShell({ serverRailProps, sidebarProps, children, memberListProps, voiceStripProps } = {}) {
-    return h('div', { class: 'cm-shell' },
-        serverRailProps ? ServerRail(serverRailProps) : null,
-        sidebarProps ? ChannelSidebar(sidebarProps) : null,
-        h('div', { class: 'cm-main' }, ...(Array.isArray(children) ? children : [children])),
-        memberListProps ? MemberList(memberListProps) : null,
-        voiceStripProps ? VoiceStrip(voiceStripProps) : null
-    );
-}
+//
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./community/, and the public export surface here is unchanged
+// — no consumer import needs to move.
+
+import { ServerIcon, ServerRail, ChannelItem, ChannelCategory, ChannelSidebar } from './community/navigation.js';
+import { VoiceUser, UserPanel, MemberItem, MemberList, VoiceStrip } from './community/presence.js';
+import { ChatHeader, MobileHeader, ReplyBar, Banner } from './community/chrome.js';
+import { ThreadPanel, ForumView, PageView } from './community/views.js';
+import { CommunityShell } from './community/shell.js';
+
+export {
+    ServerIcon, ServerRail, ChannelItem, ChannelCategory, ChannelSidebar,
+    VoiceUser, UserPanel, MemberItem, MemberList, VoiceStrip,
+    ChatHeader, MobileHeader, ReplyBar, Banner,
+    ThreadPanel, ForumView, PageView,
+    CommunityShell,
+};

package/src/components/files/chrome.js

@@ -0,0 +1,140 @@
+// Surrounding file-browser chrome: the bulk-action strip, the drop zone, the
+// per-file upload progress list, the empty state, the breadcrumb path, the
+// toolbar band, and the multi-root segmented picker.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Btn, Icon } from '../shell.js';
+const h = webjsx.createElement;
+
+// BulkBar — the act-on-selection strip shown while a multi-select is active.
+// Host renders it above the grid; `actions` are [{ label, onClick, danger,
+// disabled }]; `busy` disables everything while a bulk operation is in flight.
+export function BulkBar({ count = 0, noun = 'file', nounPlural, actions = [], onClear, busy = false } = {}) {
+    if (!count) return null;
+    // 'entry' pluralizes to 'entries', not 'entrys' - handle the -y noun class
+    // unless the host passes an explicit plural.
+    const plural = nounPlural || (/[^aeiou]y$/.test(noun) ? noun.slice(0, -1) + 'ies' : noun + 's');
+    const kids = [
+        h('span', { key: 'count', class: 'ds-bulkbar-count', role: 'status', 'aria-live': 'polite' },
+            count + ' ' + (count === 1 ? noun : plural) + ' selected'),
+        ...actions.map((a, i) => Btn({
+            key: 'bba' + i, danger: !!a.danger, disabled: busy || a.disabled,
+            onClick: a.onClick, children: a.label,
+        })),
+        onClear ? Btn({ key: 'bbclear', disabled: busy, onClick: onClear, children: 'clear selection' }) : null,
+    ].filter(Boolean);
+    return h('div', { class: 'ds-bulkbar', role: 'toolbar', 'aria-label': 'bulk file actions', 'aria-busy': busy ? 'true' : null }, ...kids);
+}
+
+export function FileToolbar({ left = [], right = [] } = {}) {
+    return h('div', { class: 'ds-file-toolbar' },
+        h('div', { class: 'ds-file-toolbar-left' }, ...left),
+        h('div', { class: 'ds-file-toolbar-right' }, ...right)
+    );
+}
+
+// RootsPicker — a segmented control for choosing among multiple allowed FS roots
+// (so the app stops borrowing the history-tab .pill markup). Each root is
+// { id, label }; `selected` is the active id. role=tablist for AT navigation.
+export function RootsPicker({ roots = [], selected, onSelect, label = 'roots' } = {}) {
+    if (!roots.length) return null;
+    return h('div', { class: 'ds-roots-picker', role: 'tablist', 'aria-label': label },
+        ...roots.map((r) => h('button', {
+            key: 'root-' + (r.id != null ? r.id : r.label),
+            type: 'button', role: 'tab',
+            class: 'ds-roots-tab' + ((r.id != null ? r.id : r.label) === selected ? ' active' : ''),
+            'aria-selected': (r.id != null ? r.id : r.label) === selected ? 'true' : 'false',
+            onclick: () => onSelect && onSelect(r.id != null ? r.id : r.label),
+        }, r.label || r.id)));
+}
+
+export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
+    // With children the zone is a passive WRAPPER: content renders normally and
+    // the dashed affordance appears only while a drag is over it (real file
+    // managers never burn a permanent band on a maybe-drop). Without children
+    // it keeps the explicit picker-block look.
+    const kids = Array.isArray(children) ? children : children ? [children] : [];
+    return h('div', {
+        class: 'ds-dropzone' + (kids.length ? ' ds-dropzone--wrap' : '') + (dragover ? ' dragover' : ''),
+        ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
+        ondragleave: (e) => { if (!e.currentTarget.contains(e.relatedTarget)) { onDragLeave && onDragLeave(e); } },
+        ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
+    },
+        h('div', { class: 'ds-dropzone-inner' },
+            h('span', { class: 'ds-dropzone-glyph', role: 'img', 'aria-label': 'upload' }, Icon('arrow-up')),
+            h('span', { class: 'ds-dropzone-label' }, label),
+            onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
+        ),
+        ...kids
+    );
+}
+
+// UploadProgress — per-file upload rows. Error rows are recoverable, not dead
+// ends: each item may carry `actions` ([{ label, onClick }], e.g. 'replace' on
+// a 409 collision) and the host may wire `onDismiss(item, index)` so error rows
+// can be cleared without waiting for the next successful batch.
+export function UploadProgress({ items = [], onDismiss } = {}) {
+    if (!items.length) return null;
+    return h('div', { class: 'ds-upload-progress' },
+        ...items.map((it, i) => {
+            const indeterminate = !it.error && !it.done && !it.pct && it.indeterminate;
+            const status = it.error ? 'error' : (it.done ? 'complete' : (indeterminate ? 'uploading' : `uploading ${it.pct || 0}%`));
+            const rowActions = [
+                ...((it.actions || []).map((a, ai) => h('button', {
+                    key: 'ua' + ai, type: 'button', class: 'ds-upload-act',
+                    'aria-label': `${a.label} ${it.name}`,
+                    onclick: () => a.onClick && a.onClick(it, i),
+                }, a.label))),
+                (it.error && onDismiss) ? h('button', {
+                    key: 'ud', type: 'button', class: 'ds-upload-act',
+                    'aria-label': `dismiss ${it.name}`,
+                    onclick: () => onDismiss(it, i),
+                }, 'dismiss') : null,
+            ].filter(Boolean);
+            return h('div', {
+                key: it.name + i,
+                class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : ''),
+                role: 'status',
+                'aria-label': `${it.name}: ${status}`,
+                'aria-live': 'polite'
+            },
+                h('span', { class: 'ds-upload-name' }, it.name),
+                h('span', { class: 'ds-upload-bar' + (indeterminate ? ' indeterminate' : '') },
+                    h('span', { class: 'ds-upload-fill', 'data-pct': String(Math.max(0, Math.min(100, it.pct || 0))), 'aria-hidden': 'true' })
+                ),
+                h('span', { class: 'ds-upload-pct', 'aria-hidden': 'true' }, (it.error ? 'err' : (it.done ? 'ok' : (indeterminate ? '...' : (it.pct || 0) + '%')))),
+                rowActions.length ? h('span', { class: 'ds-upload-actions', role: 'group', 'aria-label': `actions for ${it.name}` }, ...rowActions) : null
+            );
+        })
+    );
+}
+
+export function EmptyState({ text = 'nothing here', glyph = Icon('circle'), action } = {}) {
+    // action: { onClick, label } - an optional CTA (e.g. 'go up' / 'upload a
+    // file'), mirroring the SessionDashboard emptyAction contract so an empty
+    // directory is not a dead end. Children are built as an array + filtered so
+    // the keyed Btn never sits beside an unkeyed span (webjsx applyDiff 'key'
+    // crash on mixed keyed/unkeyed siblings).
+    return h('div', { class: 'ds-file-empty', role: 'status' },
+        ...[
+            h('span', { key: 'glyph', class: 'ds-file-empty-glyph', 'aria-hidden': 'true' }, glyph),
+            h('span', { key: 'text', class: 'ds-file-empty-text' }, text),
+            (action && action.onClick)
+                ? Btn({ key: 'ea', onClick: action.onClick, children: action.label || 'go up' })
+                : null,
+        ].filter(Boolean)
+    );
+}
+
+export function BreadcrumbPath({ segments = [], onNav, root = 'root' } = {}) {
+    const parts = [h('button', { key: 'root', class: 'ds-crumb-seg', onclick: () => onNav && onNav(0) }, root)];
+    segments.forEach((seg, i) => {
+        parts.push(h('span', { key: 'sep' + i, class: 'ds-crumb-sep', 'aria-hidden': 'true' }, Icon('chevron-right', { size: 13 })));
+        parts.push(h('button', {
+            key: 'seg' + i,
+            class: 'ds-crumb-seg' + (i === segments.length - 1 ? ' leaf' : ''),
+            onclick: () => onNav && onNav(i + 1)
+        }, seg));
+    });
+    return h('div', { class: 'ds-crumb-path' }, ...parts);
+}