@medalsocial/meda 1.0.0 → 1.1.1

package/dist/chat/latency-badge.js

@@ -19,5 +19,5 @@ export function LatencyBadge({ kind, ms, className }) {
             'inline-flex items-center gap-1.5 text-[11px] tabular-nums',
             meta.tone,
             className ?? '',
-        ].join(' '), children: [_jsx("span", { "aria-hidden": "true", className: "size-1 rounded-full bg-current" }), meta.label, " ", fmt(ms)] }));
+        ].join(' '), children: [_jsx("span", { "aria-hidden": "true", className: "size-1 rounded-full bg-current" }), meta.label, " ", _jsx("span", { "data-chromatic": "ignore", children: fmt(ms) })] }));
 }

package/dist/chat/latency-breakdown.js

@@ -5,5 +5,5 @@ export function LatencyBreakdown({ sttMs, claudeMs, ttsMs, showLegend = true, cl
     const sttPct = (sttMs / total) * 100;
     const claudePct = (claudeMs / total) * 100;
     const ttsPct = (ttsMs / total) * 100;
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex h-1.5 gap-0.5 overflow-hidden rounded-sm bg-muted", children: [_jsx("span", { "data-segment": "stt", className: "block bg-sky-400", style: { width: `${sttPct}%` } }), _jsx("span", { "data-segment": "claude", className: "block bg-primary", style: { width: `${claudePct}%` } }), _jsx("span", { "data-segment": "tts", className: "block bg-emerald-500", style: { width: `${ttsPct}%` } })] }), showLegend && (_jsxs("div", { className: "mt-1.5 flex flex-wrap gap-3 text-[11px] tabular-nums text-muted-foreground", children: [_jsx(LatencyBadge, { kind: "stt", ms: sttMs }), _jsx(LatencyBadge, { kind: "claude", ms: claudeMs }), _jsx(LatencyBadge, { kind: "tts", ms: ttsMs })] }))] }));
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { "data-chromatic": "ignore", className: "flex h-1.5 gap-0.5 overflow-hidden rounded-sm bg-muted", children: [_jsx("span", { "data-segment": "stt", className: "block bg-sky-400", style: { width: `${sttPct}%` } }), _jsx("span", { "data-segment": "claude", className: "block bg-primary", style: { width: `${claudePct}%` } }), _jsx("span", { "data-segment": "tts", className: "block bg-emerald-500", style: { width: `${ttsPct}%` } })] }), showLegend && (_jsxs("div", { className: "mt-1.5 flex flex-wrap gap-3 text-[11px] tabular-nums text-muted-foreground", children: [_jsx(LatencyBadge, { kind: "stt", ms: sttMs }), _jsx(LatencyBadge, { kind: "claude", ms: claudeMs }), _jsx(LatencyBadge, { kind: "tts", ms: ttsMs })] }))] }));
 }

package/dist/chat/turn-card.js

@@ -21,5 +21,5 @@ export function TurnCard({ turn, startedAtRef, tz, onPlay, className }) {
     return (_jsxs("div", { className: [
             'grid grid-cols-[64px_1fr] gap-5 border-b border-border py-4 last:border-b-0',
             className ?? '',
-        ].join(' '), children: [_jsxs("div", { className: "pt-1 text-[11px] tabular-nums text-muted-foreground", children: [_jsx("strong", { className: "mb-0.5 block text-[12px] font-medium text-muted-foreground", children: formatClock(new Date(turn.startedAt), { tz }) }), formatRelativeOffset(offset)] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [_jsx("span", { className: ['text-[11px] font-semibold uppercase tracking-wider', speakerColor].join(' '), children: label }), turn.modelLabel && (_jsx("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: turn.modelLabel })), turn.spokenSeconds != null && turn.speaker === 'user' && (_jsxs("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: ["spoken \u00B7 ", turn.spokenSeconds.toFixed(1), "s"] }))] }), _jsxs("p", { className: "text-[15px] leading-relaxed text-foreground", "data-streaming": String(turn.streaming ?? false), children: [turn.text, turn.streaming && (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 animate-pulse text-primary", children: "\u258D" }))] }), turn.toolCalls?.map((c) => (_jsx(ToolCallBlock, { call: c }, c.id))), (turn.audioUrl || turn.latency) && (_jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-4 text-[11px] text-muted-foreground", children: [turn.audioUrl && (_jsx("button", { type: "button", "aria-label": "Play this turn", onClick: () => onPlay?.(turn.id), className: "inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground hover:text-foreground", children: _jsx(Play, { className: "size-3" }) })), turn.latency?.sttMs != null && _jsx(LatencyBadge, { kind: "stt", ms: turn.latency.sttMs }), turn.latency?.claudeMs != null && (_jsx(LatencyBadge, { kind: "claude", ms: turn.latency.claudeMs })), turn.latency?.ttsMs != null && _jsx(LatencyBadge, { kind: "tts", ms: turn.latency.ttsMs })] }))] })] }));
+        ].join(' '), children: [_jsxs("div", { className: "pt-1 text-[11px] tabular-nums text-muted-foreground", children: [_jsx("strong", { className: "mb-0.5 block text-[12px] font-medium text-muted-foreground", children: formatClock(new Date(turn.startedAt), { tz }) }), formatRelativeOffset(offset)] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [_jsx("span", { className: ['text-[11px] font-semibold uppercase tracking-wider', speakerColor].join(' '), children: label }), turn.modelLabel && (_jsx("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: turn.modelLabel })), turn.spokenSeconds != null && turn.speaker === 'user' && (_jsxs("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: ["spoken \u00B7 ", turn.spokenSeconds.toFixed(1), "s"] }))] }), _jsxs("p", { className: "text-[15px] leading-relaxed text-foreground", "data-streaming": String(turn.streaming ?? false), children: [turn.text, turn.streaming && (_jsx("span", { "aria-hidden": "true", "data-chromatic": "ignore", className: "ml-0.5 animate-pulse text-primary", children: "\u258D" }))] }), turn.toolCalls?.map((c) => (_jsx(ToolCallBlock, { call: c }, c.id))), (turn.audioUrl || turn.latency) && (_jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-4 text-[11px] text-muted-foreground", children: [turn.audioUrl && (_jsx("button", { type: "button", "aria-label": "Play this turn", onClick: () => onPlay?.(turn.id), className: "inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground hover:text-foreground", children: _jsx(Play, { className: "size-3" }) })), turn.latency?.sttMs != null && _jsx(LatencyBadge, { kind: "stt", ms: turn.latency.sttMs }), turn.latency?.claudeMs != null && (_jsx(LatencyBadge, { kind: "claude", ms: turn.latency.claudeMs })), turn.latency?.ttsMs != null && _jsx(LatencyBadge, { kind: "tts", ms: turn.latency.ttsMs })] }))] })] }));
 }

package/dist/shell/app-shell-auth.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { AppShellAuthConfig } from './types.js';
+export declare function AppShellAuth({ children, title, description, brandName, brandMark, eyebrow, preview, actions, }: AppShellAuthConfig & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shell/app-shell-auth.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart3, CheckCircle2, Mail, PanelRightOpen, Search, Send, Sparkles, UsersRound, } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+function DefaultBrandMark() {
+    return (_jsx("span", { className: "inline-flex size-10 items-center justify-center rounded-lg bg-white/14 text-white ring-1 ring-white/20 shadow-lg shadow-black/20", children: _jsx(Sparkles, { className: "size-5", "aria-hidden": true }) }));
+}
+export function AppShellAuth({ children, title, description, brandName = 'Meda', brandMark, eyebrow, preview, actions, }) {
+    const resolvedBrandMark = brandMark ?? _jsx(DefaultBrandMark, {});
+    return (_jsxs("section", { "data-testid": "app-shell-auth", className: "grid min-h-screen overflow-hidden bg-background text-foreground lg:grid-cols-[minmax(0,1.08fr)_minmax(420px,0.92fr)]", children: [_jsxs("div", { className: "relative flex min-h-[24rem] flex-col overflow-hidden bg-[radial-gradient(circle_at_24%_18%,var(--color-info-500)_0,transparent_25%),radial-gradient(circle_at_84%_24%,var(--color-brand-400)_0,transparent_28%),linear-gradient(135deg,var(--color-brand-800),var(--color-brand-700)_42%,var(--color-brand-500))] px-6 py-6 text-white sm:min-h-[30rem] sm:px-8 lg:min-h-screen lg:px-10 lg:py-8", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 opacity-[0.07]", style: {
+                            backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
+                        } }), _jsxs("div", { className: "relative z-10 flex items-center gap-3", children: [resolvedBrandMark, _jsx("span", { className: "text-lg font-semibold tracking-normal", children: brandName })] }), _jsxs("div", { className: "relative z-10 flex flex-1 flex-col justify-center gap-8 py-10 lg:py-12", children: [_jsxs("div", { className: "max-w-2xl", children: [eyebrow && (_jsx("p", { className: "mb-4 text-sm font-semibold uppercase tracking-[0.12em] text-white/70", children: eyebrow })), _jsx("h1", { className: "text-4xl font-bold leading-tight tracking-normal text-white sm:text-5xl", children: title }), description && (_jsx("p", { className: "mt-4 max-w-xl text-base leading-7 text-white/72 sm:text-lg", children: description }))] }), _jsx("div", { className: "w-full max-w-3xl", children: preview ?? _jsx(DefaultAuthPreview, {}) })] })] }), _jsxs("div", { className: "relative flex min-h-screen flex-col bg-background px-6 py-6 sm:px-8 lg:px-12", children: [actions && _jsx("div", { className: "flex justify-end", children: actions }), _jsxs("div", { className: "mx-auto flex w-full max-w-md flex-1 flex-col justify-center py-10", children: [_jsx("div", { className: "mb-8 flex justify-center lg:hidden", children: resolvedBrandMark }), children] })] })] }));
+}
+function DefaultAuthPreview() {
+    return (_jsx("div", { "data-testid": "app-shell-auth-default-preview", className: "relative overflow-hidden rounded-[1.5rem] border border-white/16 bg-[color-mix(in_srgb,var(--background)_88%,transparent)] p-2 text-foreground shadow-2xl shadow-black/30 backdrop-blur", "aria-hidden": true, children: _jsxs("div", { className: "overflow-hidden rounded-[1.125rem] border border-border/70 bg-background shadow-sm", children: [_jsxs("div", { className: "flex h-9 items-center justify-between bg-card/90 px-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-full bg-rose-400" }), _jsx("span", { className: "size-2 rounded-full bg-amber-400" }), _jsx("span", { className: "size-2 rounded-full bg-emerald-400" })] }), _jsx("span", { className: "hidden rounded-full bg-muted px-2 py-0.5 text-[9px] font-medium text-muted-foreground sm:inline-flex", children: "app.medal.social" })] }), _jsxs("div", { "data-testid": "app-shell-auth-preview-shell-header", className: "flex h-12 items-center justify-between border-shell-border border-t border-b bg-shell-header px-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Sparkles, { className: "size-3.5", "aria-hidden": "true" }) }), _jsx("span", { className: "truncate text-[11px] font-semibold", children: "Medal Social" }), _jsx("div", { className: "ml-2 hidden items-center gap-0.5 rounded-full bg-muted/70 p-0.5 sm:flex", children: PREVIEW_TABS.map((tab) => (_jsx("span", { className: cn('rounded-full px-2 py-1 text-[10px] font-medium', tab === 'Inbox'
+                                            ? 'bg-background text-foreground shadow-sm'
+                                            : 'text-muted-foreground'), children: tab }, tab))) })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "hidden rounded-lg bg-primary px-2.5 py-1.5 text-[9px] font-semibold text-primary-foreground sm:inline-flex", children: "+ New" }), _jsx("span", { "data-testid": "app-shell-auth-preview-panel-toggle", className: "inline-flex size-8 items-center justify-center rounded-lg border border-border bg-card text-muted-foreground shadow-sm", children: _jsx(PanelRightOpen, { className: "size-3.5", "aria-hidden": "true" }) })] })] }), _jsxs("div", { className: "grid min-h-[19.75rem] grid-cols-[44px_minmax(0,1fr)] gap-2 bg-shell-main p-2 sm:grid-cols-[48px_138px_minmax(0,1fr)] lg:grid-cols-[52px_156px_minmax(0,1fr)]", children: [_jsxs("aside", { "data-testid": "app-shell-auth-preview-icon-rail", className: "flex flex-col items-center gap-1 rounded-2xl bg-shell-rail p-1.5 shadow-sm ring-1 ring-border/70", children: [PREVIEW_RAIL_ITEMS.map((item) => (_jsx(PreviewRailItem, { icon: item.icon, label: item.label, active: item.active, badge: item.badge }, item.label))), _jsx("span", { className: "mt-auto inline-flex size-8 items-center justify-center rounded-lg bg-muted text-[10px] font-semibold text-muted-foreground", children: "AS" })] }), _jsxs("aside", { "data-testid": "app-shell-auth-preview-context-rail", className: "hidden overflow-hidden rounded-2xl bg-shell-context shadow-sm ring-1 ring-border/70 sm:flex sm:flex-col", children: [_jsxs("div", { className: "border-shell-border border-b px-3 py-3", children: [_jsx("p", { className: "text-[11px] font-semibold text-foreground", children: "Customer OS" }), _jsx("p", { className: "mt-0.5 truncate text-[9px] text-muted-foreground", children: "Auto-CS workspace" })] }), _jsx("nav", { className: "flex flex-col gap-0.5 p-2", children: PREVIEW_CONTEXT_ITEMS.map((item) => (_jsx(PreviewContextItem, { ...item }, item.label))) }), _jsxs("div", { className: "mt-auto border-shell-border border-t p-2", children: [_jsx("p", { className: "text-[9px] font-medium text-muted-foreground", children: "Next sync" }), _jsx("p", { className: "mt-1 truncate text-[10px] font-semibold text-foreground", children: "12 campaigns" })] })] }), _jsxs("main", { className: "min-w-0 overflow-hidden rounded-2xl bg-background/80 p-3 shadow-sm ring-1 ring-border/70", children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-[9px] font-medium uppercase text-muted-foreground", children: "Inbox command center" }), _jsx("p", { className: "mt-1 truncate text-sm font-semibold", children: "Launch queue and support" })] }), _jsx("span", { className: "rounded-full bg-success/12 px-2 py-1 text-[9px] font-semibold text-success", children: "Live" })] }), _jsxs("div", { className: "mb-3 flex h-9 items-center gap-2 rounded-xl border border-border bg-card px-2.5 text-muted-foreground shadow-sm", children: [_jsx(Search, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "truncate text-[10px]", children: "Ask Meda to draft a customer reply..." }), _jsx("kbd", { className: "ml-auto hidden rounded-md bg-muted px-1.5 py-0.5 font-mono text-[8px] text-muted-foreground sm:inline", children: "CMD K" })] }), _jsx("div", { className: "grid gap-2 sm:grid-cols-3", children: PREVIEW_METRICS.map((metric) => (_jsxs("div", { className: "rounded-xl border border-border bg-card p-2.5", children: [_jsx("p", { className: "text-[9px] font-medium text-muted-foreground", children: metric.label }), _jsx("p", { className: "mt-1 text-base font-semibold", children: metric.value })] }, metric.label))) }), _jsxs("div", { className: "mt-3 grid gap-2 lg:grid-cols-[minmax(0,1fr)_112px]", children: [_jsxs("div", { className: "rounded-xl border border-border bg-card p-2.5", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-[11px] font-semibold", children: "Priority work" }), _jsx("p", { className: "text-[9px] text-muted-foreground", children: "Updated now" })] }), _jsx("div", { className: "space-y-2", children: PREVIEW_ACTIVITY.map((item) => (_jsx(PreviewActivityRow, { label: item }, item))) })] }), _jsxs("div", { className: "hidden rounded-xl border border-border bg-card p-2.5 lg:block", children: [_jsx("p", { className: "text-[10px] font-semibold", children: "Publish health" }), _jsx("div", { className: "mt-3 h-1.5 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: "h-full w-[72%] rounded-full bg-primary" }) }), _jsx("p", { className: "mt-2 text-[9px] leading-4 text-muted-foreground", children: "Response SLA and scheduled posts are on track." })] })] })] })] })] }) }));
+}
+function PreviewRailItem({ icon: Icon, label, active, badge, }) {
+    return (_jsxs("span", { className: cn('relative inline-flex size-8 items-center justify-center rounded-lg transition-colors', active ? 'bg-primary/12 text-primary' : 'text-muted-foreground'), title: label, children: [_jsx(Icon, { className: "size-4", "aria-hidden": "true" }), badge && _jsx("span", { className: "absolute top-0.5 right-0.5 size-1.5 rounded-full bg-primary" })] }));
+}
+function PreviewContextItem({ icon: Icon, label, active, shortcut, }) {
+    return (_jsxs("span", { className: cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-[10px] transition-colors', active ? 'bg-primary/10 font-semibold text-primary' : 'text-muted-foreground'), children: [_jsx(Icon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: label }), shortcut && (_jsx("kbd", { className: "ml-auto font-mono text-[8px] text-muted-foreground", children: shortcut }))] }));
+}
+function PreviewActivityRow({ label }) {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: _jsx(CheckCircle2, { className: "size-3", "aria-hidden": "true" }) }), _jsx("p", { className: "truncate text-[10px] text-muted-foreground", children: label })] }));
+}
+const PREVIEW_TABS = ['Home', 'Inbox', 'Campaigns'];
+const PREVIEW_RAIL_ITEMS = [
+    { icon: BarChart3, label: 'Overview' },
+    { icon: Mail, label: 'Inbox', active: true, badge: '4' },
+    { icon: Send, label: 'Posts' },
+    { icon: UsersRound, label: 'Contacts' },
+];
+const PREVIEW_CONTEXT_ITEMS = [
+    { icon: BarChart3, label: 'Overview', shortcut: '1' },
+    { icon: Mail, label: 'Inbox', active: true, shortcut: '2' },
+    { icon: Send, label: 'Posts', shortcut: '3' },
+    { icon: UsersRound, label: 'Contacts', shortcut: '4' },
+];
+const PREVIEW_METRICS = [
+    { label: 'Queued posts', value: '18' },
+    { label: 'Open tickets', value: '42' },
+    { label: 'Reach', value: '9.8k' },
+];
+const PREVIEW_ACTIVITY = [
+    'Campaign approved for publishing',
+    'Lead segment synced with CRM',
+    'Automated reply drafted for review',
+];

package/dist/shell/app-shell-chat.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface AppShellChatProps {
+    globalActions?: ReactNode;
+    children: ReactNode;
+}
+export declare function AppShellChat({ globalActions, children }: AppShellChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/app-shell-chat.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { useShellViewport } from './use-shell-viewport.js';
+export function AppShellChat({ globalActions, children }) {
+    const viewport = useShellViewport();
+    const isMobile = viewport === 'mobile';
+    return (_jsxs("section", { "data-testid": "app-shell-chat", className: "flex h-screen flex-col bg-background text-foreground", children: [_jsxs("header", { className: "flex h-12 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: "Chat" }), globalActions ? _jsx("div", { className: "flex items-center gap-2", children: globalActions }) : null] }), _jsx("div", { className: cn('flex-1 overflow-y-auto', isMobile ? 'px-2 py-3' : 'px-6 py-4'), children: children })] }));
+}

package/dist/shell/app-shell-workspace.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+export interface AppShellWorkspaceProps {
+    iconRail?: AppShellIconRailConfig;
+    contextRail?: AppShellContextRailConfig;
+    rightPanel?: AppShellRightPanelConfig;
+    globalActions?: ReactNode;
+    children: ReactNode;
+}
+export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalActions, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/app-shell-workspace.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGrid, Menu, PanelTop, Sparkles } from 'lucide-react';
+import { ContextRail } from './context-rail.js';
+import { IconRail } from './icon-rail.js';
+import { MobileBottomNav } from './internal/mobile-bottom-nav.js';
+import { MobileDrawers } from './internal/mobile-drawers.js';
+import { MobileHeader } from './internal/mobile-header.js';
+import { RightPanel } from './right-panel.js';
+import { ShellHeader } from './shell-header.js';
+import { ShellMain } from './shell-main.js';
+import { useShellViewport } from './use-shell-viewport.js';
+export function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalActions, children, }) {
+    const viewport = useShellViewport();
+    const isMobile = viewport === 'mobile';
+    // Derive the bottom-nav items from the variant config so each button maps
+    // to a drawer that actually has content. Without this filter, partial
+    // configs (e.g. iconRail only) would show Module/Panels/AI buttons that
+    // dispatch into the void.
+    const navItems = buildMobileNavItems(iconRail, contextRail, rightPanel);
+    const hasDrawerContent = navItems.length > 0;
+    // Mobile menu drawer needs both main and utility items — desktop IconRail
+    // shows both, so dropping utilityItems here would orphan items like Help/
+    // Settings on mobile. Concat preserves discoverability; visual separation
+    // (divider in the drawer between main and utility) is a future polish.
+    const mobileMenuItems = iconRail ? [...iconRail.mainItems, ...(iconRail.utilityItems ?? [])] : [];
+    // ONE tree shape across both viewports. ShellMain stays at a fixed position
+    // in its parent's children array so React preserves its subtree (and the
+    // user's `children` state) when useShellViewport flips after mount or on
+    // rotation. Conditional siblings render as `false` rather than disappearing.
+    //
+    // h-screen (not h-full) so this stays a bounded scroll container even when
+    // rendered without an explicit-height ancestor (tests, direct imports). The
+    // <AppShell> wrapper already enforces h-screen for the workspace variant, so
+    // nested viewport-height divs collapse cleanly — no double-scroll.
+    return (_jsxs("div", { className: "flex h-screen flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions })) : (_jsx(ShellHeader, { globalActions: globalActions })), _jsxs("div", { className: "relative flex flex-1 overflow-hidden", children: [!isMobile && iconRail && (_jsx(IconRail, { mainItems: iconRail.mainItems, utilityItems: iconRail.utilityItems, footer: iconRail.footer, activeId: iconRail.activeId })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId })), _jsx(ShellMain, { layout: "workspace", children: children }), !isMobile && rightPanel && (_jsx(RightPanel, { panelViews: rightPanel.panelViews, defaultView: rightPanel.defaultView }))] }), isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, module: contextRail?.module, panelViews: rightPanel?.panelViews ?? [], defaultView: rightPanel?.defaultView }))] }));
+}
+function buildMobileNavItems(iconRail, contextRail, rightPanel) {
+    const items = [];
+    if (iconRail) {
+        items.push({ id: 'menu', label: 'Menu', icon: Menu, opens: 'menu-drawer' });
+    }
+    if (contextRail?.module) {
+        items.push({ id: 'module', label: 'Module', icon: LayoutGrid, opens: 'module-drawer' });
+    }
+    // Panels button only when there's an actual view to render — empty
+    // panelViews would open an empty drawer (dead-end tap).
+    if (rightPanel && rightPanel.panelViews.length > 0) {
+        items.push({ id: 'panels', label: 'Panels', icon: PanelTop, opens: 'panels-drawer' });
+        if (rightPanel.panelViews.some((v) => v.id === 'ai')) {
+            items.push({ id: 'ai', label: 'AI', icon: Sparkles, opens: 'ai-drawer' });
+        }
+    }
+    return items;
+}

package/dist/shell/app-shell.d.ts

@@ -1,9 +1,25 @@
 import type { ReactNode } from 'react';
-export declare function AppShell({ children, className }: {
+import type { AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+interface AppShellBaseProps {
     children: ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export type AppShellProps = AppShellBaseProps & ({
+    variant: 'auth';
+    auth: AppShellAuthConfig;
+} | {
+    variant: 'workspace';
+    iconRail?: AppShellIconRailConfig;
+    contextRail?: AppShellContextRailConfig;
+    rightPanel?: AppShellRightPanelConfig;
+    globalActions?: ReactNode;
+} | {
+    variant: 'chat';
+    globalActions?: ReactNode;
+});
+export declare function AppShell(props: AppShellProps): import("react/jsx-runtime").JSX.Element;
 export declare function AppShellBody({ children, className }: {
     children: ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shell/app-shell.js

@@ -1,10 +1,25 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
+import { AppShellAuth } from './app-shell-auth.js';
+import { AppShellChat } from './app-shell-chat.js';
+import { AppShellWorkspace } from './app-shell-workspace.js';
 import { useMedaShell } from './shell-provider.js';
-export function AppShell({ children, className }) {
+export function AppShell(props) {
     const { workspace, activeAppId } = useMedaShell();
-    return (_jsx("div", { "data-meda-app": activeAppId, "data-meda-workspace": workspace.id, className: cn('h-screen overflow-hidden bg-background text-foreground', className), children: children }));
+    // Auth lets the form scroll past viewport (signup, dense forms, high zoom);
+    // workspace and chat fix the chrome to viewport height and let inner regions
+    // scroll independently.
+    const heightClass = props.variant === 'auth' ? 'min-h-screen' : 'h-screen overflow-hidden';
+    const wrapper = (content) => (_jsx("div", { "data-meda-app": activeAppId, "data-meda-workspace": workspace.id, "data-meda-variant": props.variant, className: cn(heightClass, 'bg-background text-foreground', props.className), children: content }));
+    switch (props.variant) {
+        case 'auth':
+            return wrapper(_jsx(AppShellAuth, { ...props.auth, children: props.children }));
+        case 'workspace':
+            return wrapper(_jsx(AppShellWorkspace, { iconRail: props.iconRail, contextRail: props.contextRail, rightPanel: props.rightPanel, globalActions: props.globalActions, children: props.children }));
+        case 'chat':
+            return wrapper(_jsx(AppShellChat, { globalActions: props.globalActions, children: props.children }));
+    }
 }
 export function AppShellBody({ children, className }) {
     return (_jsx("div", { className: cn('relative flex h-[calc(100vh-var(--shell-header-height))] overflow-hidden', className), children: children }));

package/dist/shell/context-rail.d.ts

@@ -1,17 +1,3 @@
-/**
- * ContextRail — spec §10
- *
- * Renders a resizable, collapsible, persisted context navigation rail.
- * Width is stored per-(workspaceId, appId) via useShellLayoutState through
- * the MedaShellProvider context.
- *
- * Resize integration note (Phase 9 / Pattern B):
- * The rail uses its own pointer-events resize handle on the right edge instead
- * of wrapping in <ResizableShell> (Pattern A). Pattern A requires migrating
- * <AppShellBody> to a PanelGroup layout — that is Phase 11 territory.
- * TODO(phase-11): replace pointer-events handle with <ResizableShellPanel>
- * once <AppShellBody> ships as a ResizableShell Group.
- */
 import type { ReactNode } from 'react';
 import type { ContextModule, ShellLinkRenderArgs } from './types.js';
 export interface ContextRailProps {
@@ -28,4 +14,4 @@ export interface ContextRailProps {
     renderLink?: (args: ShellLinkRenderArgs) => ReactNode;
     className?: string;
 }
-export declare function ContextRail({ appId: _appId, module, hidden, collapsible: _collapsible, activeItemId, renderLink, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ContextRail({ appId: _appId, module, hidden, collapsible, activeItemId, renderLink, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/context-rail.js

@@ -1,6 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+/**
+ * ContextRail — spec §10
+ *
+ * Renders a resizable, collapsible, persisted context navigation rail.
+ * Width is stored per-(workspaceId, appId) via useShellLayoutState through
+ * the MedaShellProvider context.
+ *
+ * Resize integration note (Phase 9 / Pattern B):
+ * The rail uses its own pointer-events resize handle on the right edge instead
+ * of wrapping in <ResizableShell> (Pattern A). Pattern A requires migrating
+ * <AppShellBody> to a PanelGroup layout — that is Phase 11 territory.
+ * TODO(phase-11): replace pointer-events handle with <ResizableShellPanel>
+ * once <AppShellBody> ships as a ResizableShell Group.
+ */
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { useMedaShell } from './shell-provider.js';
 import { useShellViewport } from './use-shell-viewport.js';
@@ -41,12 +56,37 @@ function ResizeHandle({ currentWidth, onResize, onCommit }) {
     return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize context rail", "aria-valuenow": currentWidth, "aria-valuemin": MIN_WIDTH, "aria-valuemax": MAX_WIDTH, tabIndex: 0, className: cn('absolute top-0 right-0 h-full w-1 cursor-col-resize', 'opacity-0 transition-opacity hover:opacity-100 hover:bg-ring'), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }));
 }
 // ---------------------------------------------------------------------------
+// ContextRailToggle — chevron button that flips ctx.contextRail.collapsed
+// ---------------------------------------------------------------------------
+function ContextRailToggle({ railId }) {
+    const ctx = useMedaShell();
+    const collapsed = ctx.contextRail.collapsed;
+    // Lucide PanelLeft* icons render the chevron-with-wall pattern (similar
+    // to Unifi). The wall reinforces "this is a sidebar toggle" rather than
+    // a generic navigation chevron.
+    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
+    return (_jsx("button", { type: "button", onClick: () => ctx.contextRail.setCollapsed(!collapsed), "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', "aria-expanded": !collapsed, "aria-controls": railId, "data-testid": "context-rail-toggle", className: cn(
+        // Pull-tab: 28w × 40h. Big enough to read the icon at a glance and to
+        // grab confidently — matches Unifi's reference. Flat left edge
+        // attached to the rail (no left border), rounded right. The whole tab
+        // sticks fully out of the rail's outer edge.
+        'absolute top-3 -right-7 z-20 inline-flex h-10 w-7 items-center justify-center', 'before:absolute before:-inset-1 before:content-[""]', 'rounded-r-md border border-l-0 border-border bg-card text-muted-foreground', 'shadow-[2px_0_4px_rgb(0_0_0_/_0.08)]', 'hover:bg-accent hover:text-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: _jsx(Icon, { size: 18, "aria-hidden": true }) }));
+}
+// ---------------------------------------------------------------------------
 // ContextRail
 // ---------------------------------------------------------------------------
-export function ContextRail({ appId: _appId, module, hidden = false, collapsible: _collapsible = true, activeItemId, renderLink, className, }) {
+export function ContextRail({ appId: _appId, module, hidden = false, collapsible = true, activeItemId, renderLink, className, }) {
     const band = useShellViewport();
     const ctx = useMedaShell();
-    const collapsed = ctx.contextRail.collapsed;
+    // collapsible={false} means the rail must always render expanded — even if
+    // the persisted layout state has collapsed: true (e.g. user collapsed the
+    // rail before the prop flipped). Without this guard, the rail would stay
+    // hidden forever with no in-component way to recover.
+    const collapsed = collapsible ? ctx.contextRail.collapsed : false;
+    // Per-instance id so multiple <ContextRail>s in one document don't clash on
+    // duplicate `id="..."` (HTML invalid + breaks aria-controls relationships).
+    const reactId = useId();
+    const railId = `meda-context-rail-${reactId}`;
     // Local display width tracks pointer-move updates; ctx.contextRail.setWidth
     // is called on pointerUp to persist via useShellLayoutState.
     const [displayWidth, setDisplayWidth] = useState(null);
@@ -66,16 +106,22 @@ export function ContextRail({ appId: _appId, module, hidden = false, collapsible
         setDisplayWidth(null);
         ctx.contextRail.setWidth(w);
     };
-    return (_jsxs("aside", { "aria-label": module.label, className: cn('relative h-full shrink-0 overflow-hidden border-r border-shell-border bg-shell-context', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [_jsxs("div", { className: "border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] }), _jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: module.items.map((item) => {
-                    const isActive = item.id === activeItemId;
-                    const klass = cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', isActive
-                        ? 'bg-primary/10 text-primary'
-                        : 'text-muted-foreground hover:bg-accent hover:text-foreground');
-                    const IconComp = item.icon;
-                    const inner = (_jsxs(_Fragment, { children: [_jsx(IconComp, { size: 16, "aria-hidden": "true", className: "shrink-0" }), _jsx("span", { className: "truncate", children: item.label }), item.shortcut && (_jsx("kbd", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: item.shortcut }))] }));
-                    if (renderLink) {
-                        return renderLink({ item, isActive, className: klass, children: inner });
-                    }
-                    return (_jsx("a", { href: item.to, "aria-current": isActive ? 'page' : undefined, className: klass, children: inner }, item.id));
-                }) }), _jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit })] }));
+    // Only animate width during collapse/expand toggles, not during manual
+    // pointer drag on the ResizeHandle. displayWidth is non-null only while
+    // the user is mid-drag — using it as the drag signal suppresses the
+    // transition then so the rail snaps to the cursor instead of lagging
+    // behind it.
+    const isDragging = displayWidth !== null;
+    return (_jsxs("aside", { id: railId, "data-testid": "context-rail", "aria-label": module.label, className: cn('relative h-full shrink-0 border-r border-shell-border bg-shell-context', !isDragging && 'transition-[width] duration-200 ease-in-out motion-reduce:transition-none', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [collapsible && _jsx(ContextRailToggle, { railId: railId }), _jsxs("div", { className: "h-full overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [_jsxs("div", { className: "border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] }), _jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: module.items.map((item) => {
+                            const isActive = item.id === activeItemId;
+                            const klass = cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', isActive
+                                ? 'bg-primary/10 text-primary'
+                                : 'text-muted-foreground hover:bg-accent hover:text-foreground');
+                            const IconComp = item.icon;
+                            const inner = (_jsxs(_Fragment, { children: [_jsx(IconComp, { size: 16, "aria-hidden": "true", className: "shrink-0" }), _jsx("span", { className: "truncate", children: item.label }), item.shortcut && (_jsx("kbd", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: item.shortcut }))] }));
+                            if (renderLink) {
+                                return renderLink({ item, isActive, className: klass, children: inner });
+                            }
+                            return (_jsx("a", { href: item.to, "aria-current": isActive ? 'page' : undefined, className: klass, children: inner }, item.id));
+                        }) })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
 }

package/dist/shell/icon-rail.js

@@ -34,5 +34,5 @@ export function IconRail({ mainItems, utilityItems = [], footer, activeId, rende
         renderLink({ item, isActive, className: klass, children: inner })) : (_jsx("a", { href: item.to, "aria-label": item.label, "aria-current": isActive ? 'page' : undefined, className: "contents", children: inner }));
         return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { "data-testid": `icon-rail-trigger-${item.id}`, className: klass, children: linkContent }) }), _jsx(TooltipContent, { side: "right", children: item.label })] }, item.id));
     };
-    return (_jsx(TooltipProvider, { children: _jsxs("nav", { "aria-label": "Primary", className: cn('flex h-full w-[var(--shell-rail-width)] shrink-0 flex-col items-center bg-shell-rail py-3.5', className), children: [_jsx("div", { className: "flex flex-col items-center gap-1", children: mainItems.map(renderItem) }), utilityItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(RailDivider, { pinnedBottom: pinnedBottom, onToggle: () => setPinnedBottom((prev) => !prev) }), _jsx("div", { "data-testid": "utility-items-wrapper", className: cn('flex flex-col items-center gap-1', pinnedBottom && 'mt-auto'), children: utilityItems.map(renderItem) })] })), footer && (_jsx("div", { className: cn('pt-3', pinnedBottom || utilityItems.length === 0 ? 'mt-auto' : ''), children: footer }))] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs("nav", { "data-testid": "icon-rail", "aria-label": "Primary", className: cn('flex h-full w-[var(--shell-rail-width)] shrink-0 flex-col items-center bg-shell-rail py-3.5', className), children: [_jsx("div", { className: "flex flex-col items-center gap-1", children: mainItems.map(renderItem) }), utilityItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(RailDivider, { pinnedBottom: pinnedBottom, onToggle: () => setPinnedBottom((prev) => !prev) }), _jsx("div", { "data-testid": "utility-items-wrapper", className: cn('flex flex-col items-center gap-1', pinnedBottom && 'mt-auto'), children: utilityItems.map(renderItem) })] })), footer && (_jsx("div", { className: cn('pt-3', pinnedBottom || utilityItems.length === 0 ? 'mt-auto' : ''), children: footer }))] }) }));
 }

package/dist/shell/index.d.ts

@@ -6,19 +6,14 @@ export * as Extras from './extras/index.js';
 export { IconRail, RailDivider } from './icon-rail.js';
 export type { ShellStorageAdapter } from './layout-state.js';
 export { createLocalStorageAdapter } from './layout-state.js';
-export { MobileBottomNav } from './mobile/mobile-bottom-nav.js';
-export { MobileDrawers } from './mobile/mobile-drawers.js';
-export { MobileHeader } from './mobile/mobile-header.js';
 export { motion } from './motion.js';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
-export type { ShellAuthFrameProps, ShellAuthTheme, ShellAuthThemeToggleProps, } from './shell-auth-frame.js';
-export { ShellAuthFrame, ShellAuthThemeToggle } from './shell-auth-frame.js';
 export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-header.js';
 export { ShellMain } from './shell-main.js';
 export type { MedaShellProviderProps } from './shell-provider.js';
 export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
 export { DefaultThemeProvider, ThemeToggle, useTheme } from './theme.js';
 export { NextThemesAdapter } from './theme-next-themes.js';
-export type { AppDefinition, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
+export type { AppDefinition, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellVariant, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
 export { useShellViewport } from './use-shell-viewport.js';

package/dist/shell/index.js

@@ -14,16 +14,11 @@ export * as Extras from './extras/index.js';
 export { IconRail, RailDivider } from './icon-rail.js';
 // Storage adapter (consumers may want to provide their own)
 export { createLocalStorageAdapter } from './layout-state.js';
-export { MobileBottomNav } from './mobile/mobile-bottom-nav.js';
-export { MobileDrawers } from './mobile/mobile-drawers.js';
-// Mobile (individual exports + namespaced fallback)
-export { MobileHeader } from './mobile/mobile-header.js';
 // Hooks + tokens
 export { motion } from './motion.js';
 // Resize primitives
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
-export { ShellAuthFrame, ShellAuthThemeToggle } from './shell-auth-frame.js';
 // Header (and its individual children for advanced composition)
 export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-header.js';
 export { ShellMain } from './shell-main.js';

package/dist/shell/{mobile → internal}/mobile-bottom-nav.d.ts

@@ -1,4 +1,12 @@
+import type { MobileBottomNavItem } from '../types.js';
 export interface MobileBottomNavProps {
+    /**
+     * Override the items to render. When omitted, falls back to
+     * `ctx.mobileBottomNav` from the provider. AppShellWorkspace passes a
+     * derived list filtered to drawers that actually have content, so taps
+     * never dispatch into the void.
+     */
+    items?: MobileBottomNavItem[];
     className?: string;
 }
 /**
@@ -12,4 +20,4 @@ export interface MobileBottomNavProps {
  *
  * Hidden on non-mobile viewports and when the right panel is in fullscreen mode.
  */
-export declare function MobileBottomNav({ className }: MobileBottomNavProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileBottomNav({ items, className }: MobileBottomNavProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/{mobile → internal}/mobile-bottom-nav.js

@@ -15,14 +15,17 @@ import { useShellViewport } from '../use-shell-viewport.js';
  *
  * Hidden on non-mobile viewports and when the right panel is in fullscreen mode.
  */
-export function MobileBottomNav({ className }) {
+export function MobileBottomNav({ items, className }) {
     const ctx = useMedaShell();
     const band = useShellViewport();
     if (band !== 'mobile')
         return null;
     if (ctx.panel.mode === 'fullscreen')
         return null;
-    return (_jsx("nav", { "aria-label": "Mobile navigation", className: cn('flex h-[var(--shell-bottom-nav-height)] items-center justify-around border-t border-border bg-card', className), children: ctx.mobileBottomNav.map((item) => (_jsx(MobileBottomNavButton, { item: item }, item.id))) }));
+    const resolvedItems = items ?? ctx.mobileBottomNav;
+    if (resolvedItems.length === 0)
+        return null;
+    return (_jsx("nav", { "data-testid": "mobile-bottom-nav", "aria-label": "Mobile navigation", className: cn('flex h-[var(--shell-bottom-nav-height)] items-center justify-around border-t border-border bg-card', className), children: resolvedItems.map((item) => (_jsx(MobileBottomNavButton, { item: item }, item.id))) }));
 }
 /** Long-press threshold in milliseconds */
 const LONG_PRESS_DURATION = 500;

package/dist/shell/{mobile → internal}/mobile-drawers.d.ts

@@ -8,6 +8,12 @@ export interface MobileDrawersProps {
     module?: ContextModule;
     /** Panels drawer source. */
     panelViews?: PanelView[];
+    /**
+     * Default panel view id. Used when ctx.panel.activeView is null so the
+     * mobile panels drawer opens to the same view as the desktop right panel.
+     * Without this, mobile would always fall back to panelViews[0].
+     */
+    defaultView?: string;
     /** Custom content drawers keyed by id from MobileBottomNavItem.opens render fn. */
     customContent?: Record<string, (close: () => void) => ReactNode>;
     className?: string;
@@ -17,4 +23,4 @@ export interface MobileDrawersProps {
  * any custom-content drawers. Mount once near the AppShell root; drawers
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
-export declare function MobileDrawers({ menuItems, module, panelViews, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileDrawers({ menuItems, module, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/{mobile → internal}/mobile-drawers.js

@@ -9,7 +9,7 @@ import { useMedaShell } from '../shell-provider.js';
  * any custom-content drawers. Mount once near the AppShell root; drawers
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
-export function MobileDrawers({ menuItems = [], module, panelViews = [], customContent = {}, }) {
+export function MobileDrawers({ menuItems = [], module, panelViews = [], defaultView, customContent = {}, }) {
     const ctx = useMedaShell();
     const open = ctx.mobileDrawer.open;
     const setOpen = ctx.mobileDrawer.setOpen;
@@ -18,7 +18,7 @@ export function MobileDrawers({ menuItems = [], module, panelViews = [], customC
         workspaceId: ctx.workspace.id,
         appId: ctx.activeAppId,
     };
-    return (_jsxs(_Fragment, { children: [_jsx(MenuDrawer, { open: open === 'menu-drawer', onClose: close, items: menuItems }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module }), _jsx(PanelsDrawer, { open: open === 'panels-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), _jsx(AiDrawer, { open: open === 'ai-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), Object.entries(customContent).map(([id, renderFn]) => (_jsx(Drawer, { open: open === id, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsx(DrawerContent, { children: renderFn(close) }) }, id)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(MenuDrawer, { open: open === 'menu-drawer', onClose: close, items: menuItems }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module }), _jsx(PanelsDrawer, { open: open === 'panels-drawer', onClose: close, panelViews: panelViews, defaultView: defaultView, renderCtx: renderCtx }), _jsx(AiDrawer, { open: open === 'ai-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), Object.entries(customContent).map(([id, renderFn]) => (_jsx(Drawer, { open: open === id, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsx(DrawerContent, { children: renderFn(close) }) }, id)))] }));
 }
 // ---------------------------------------------------------------------------
 // Internal sub-drawers
@@ -37,10 +37,24 @@ function ModuleDrawer({ open, onClose, module, }) {
                         return (_jsxs("a", { href: item.to, onClick: onClose, className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground", children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.id));
                     }) })] }) }));
 }
-function PanelsDrawer({ open, onClose, panelViews, renderCtx, }) {
+function PanelsDrawer({ open, onClose, panelViews, defaultView, renderCtx, }) {
     const ctx = useMedaShell();
     const activeView = ctx.panel.activeView;
-    const active = panelViews.find((v) => v.id === activeView) ?? panelViews[0];
+    const setActiveView = ctx.panel.setActiveView;
+    // Hydrate ctx.panel.activeView from defaultView when the drawer opens — matches
+    // desktop RightPanel behavior so the tab highlight (aria-current) and provider
+    // state stay in sync across viewports. Without this, mobile shows the right
+    // content but no tab is marked active.
+    useEffect(() => {
+        if (open && activeView == null && defaultView && panelViews.some((v) => v.id === defaultView)) {
+            setActiveView(defaultView);
+        }
+    }, [open, activeView, defaultView, panelViews, setActiveView]);
+    // Resolution order: explicit user selection → consumer-provided defaultView
+    // → first view. Keeps mobile parity with desktop where defaultView is honored.
+    const active = panelViews.find((v) => v.id === activeView) ??
+        (defaultView ? panelViews.find((v) => v.id === defaultView) : undefined) ??
+        panelViews[0];
     return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "bottom", children: _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: active?.label ?? 'Panels' }), _jsx(DrawerDescription, { className: "sr-only", children: "Contextual panels for the current module." })] }), panelViews.length > 1 && (_jsx("div", { className: "flex items-center gap-1 border-b border-border px-3 py-2", children: panelViews.map((view) => (_jsx("button", { type: "button", onClick: () => ctx.panel.setActiveView(view.id), "aria-current": view.id === activeView ? 'true' : undefined, className: cn('rounded-md px-2 py-1 text-xs', view.id === activeView
                             ? 'bg-accent text-accent-foreground'
                             : 'text-muted-foreground hover:bg-accent'), children: view.label }, view.id))) })), _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: active?.render(renderCtx) })] }) }));

package/dist/shell/internal/mobile-header.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { useMedaShell } from '../shell-provider.js';
+import { useShellViewport } from '../use-shell-viewport.js';
+/**
+ * Mobile-only header.
+ *
+ * Root mode: workspace name + optional globalActions.
+ * Nested mode (when parentLabel is set): ← parentLabel · pageTitle back button.
+ *
+ * Renders nothing on non-mobile viewports.
+ */
+export function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, className, }) {
+    const ctx = useMedaShell();
+    const band = useShellViewport();
+    const isNested = !!parentLabel;
+    if (band !== 'mobile')
+        return null;
+    return (_jsx("header", { "data-testid": "mobile-header", "data-meda-mobile-header": isNested ? 'nested' : 'root', className: cn('flex h-[var(--shell-header-height)] items-center justify-between border-b border-border bg-card px-3', className), children: isNested ? (_jsxs("button", { type: "button", onClick: onBack, "aria-label": "Go back", className: "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm hover:bg-accent", children: [_jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "text-muted-foreground", children: parentLabel }), title && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/40", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "text-foreground", children: title })] }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [_jsx("span", { "aria-hidden": "true", children: ctx.workspace.icon }), _jsx("span", { children: ctx.workspace.name })] }), globalActions && _jsx("div", { className: "flex items-center gap-1", children: globalActions })] })) }));
+}

package/dist/shell/layout-state.js

@@ -40,7 +40,10 @@ export function createLocalStorageAdapter() {
     };
 }
 const DEFAULTS = {
-    contextRail: { width: 300, collapsed: false },
+    // 260 default keeps the rail snug for typical module navs (4-8 short labels
+    // like Inbox/Sent/Drafts) without feeling cramped. Consumers can drag wider
+    // up to MAX_WIDTH (420) — the value is persisted per-workspace.
+    contextRail: { width: 260, collapsed: false },
     rightPanel: { mode: 'closed', activeView: null, width: 340 },
 };
 function isShellLayoutState(value) {