@medalsocial/meda 0.3.0 → 1.1.0

package/dist/marketing/marketing-lead-magnet.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingLeadMagnetProps } from './types.js';
+export declare function MarketingLeadMagnet({ title, description, benefits, image, buttonText, formTitle, form, variant, open, defaultOpen, onOpenChange, className, }: MarketingLeadMagnetProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-lead-magnet.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from '@base-ui/react/dialog';
+import { CheckCircle2, X } from 'lucide-react';
+import { cx } from './utils.js';
+export function MarketingLeadMagnet({ title, description, benefits = [], image, buttonText = 'Download now', formTitle = 'Get the resource', form, variant = 'featured', open, defaultOpen, onOpenChange, className, }) {
+    const isSidebar = variant === 'sidebar';
+    return (_jsx("section", { className: cx('overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm', isSidebar ? 'p-6' : 'p-6 sm:p-8 lg:p-10', className), children: _jsxs("div", { className: cx('grid gap-8', isSidebar ? 'grid-cols-1' : 'lg:grid-cols-[0.8fr_1fr]'), children: [!isSidebar && image && _jsx("div", { className: "overflow-hidden rounded-lg bg-muted", children: image }), _jsxs("div", { className: "flex min-w-0 flex-col items-start justify-center", children: [_jsx("h2", { className: "text-2xl font-bold leading-tight text-foreground sm:text-3xl", children: title }), description && (_jsx("p", { className: "mt-3 text-base leading-7 text-muted-foreground", children: description })), benefits.length > 0 && (_jsx("ul", { className: "mt-5 space-y-3", children: benefits.map((benefit, index) => (_jsxs("li", { className: "flex items-start gap-3 text-sm leading-6 text-muted-foreground", children: [_jsx(CheckCircle2, { className: "mt-0.5 size-4 shrink-0 text-primary", "aria-hidden": true }), _jsx("span", { children: benefit })] }, typeof benefit === 'string' ? `${benefit}-${index}` : `benefit-${index}`))) })), _jsxs(Dialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (nextOpen) => onOpenChange?.(nextOpen), children: [_jsx(Dialog.Trigger, { className: "mt-6 inline-flex min-h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", children: buttonText }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: "fixed inset-0 z-modal bg-background/80 backdrop-blur-sm" }), _jsxs(Dialog.Popup, { className: "fixed left-1/2 top-1/2 z-modal w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-lg focus-visible:outline-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border px-6 py-5", children: [_jsx(Dialog.Title, { className: "text-lg font-semibold text-foreground", children: formTitle }), _jsxs(Dialog.Close, { className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(X, { className: "size-4", "aria-hidden": true })] })] }), _jsx("div", { className: "p-6", children: form })] })] })] })] })] }) }));
+}

package/dist/marketing/public.d.ts

@@ -0,0 +1 @@
+export type { MarketingCalloutProps, MarketingContactPerson, MarketingContactProps, MarketingCta, MarketingLeadMagnetProps, MarketingOffice, } from './types.js';

package/dist/marketing/public.js

@@ -0,0 +1 @@
+export {};

package/dist/marketing/types.d.ts

@@ -0,0 +1,67 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+export type MarketingCtaVariant = 'primary' | 'secondary';
+export type MarketingAlign = 'start' | 'center';
+export interface MarketingCta {
+    label: ReactNode;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    variant?: MarketingCtaVariant;
+    ariaLabel?: string;
+    target?: string;
+    rel?: string;
+}
+export interface MarketingCtaListProps {
+    ctas?: MarketingCta[];
+    align?: MarketingAlign;
+    className?: string;
+}
+export type MarketingCalloutVariant = 'band' | 'card';
+export interface MarketingCalloutProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    ctas?: MarketingCta[];
+    variant?: MarketingCalloutVariant;
+    align?: MarketingAlign;
+    className?: string;
+}
+export interface MarketingOffice {
+    title?: ReactNode;
+    address?: ReactNode;
+    email?: string;
+    phone?: string;
+    hours?: ReactNode;
+}
+export interface MarketingContactPerson {
+    title?: ReactNode;
+    name: ReactNode;
+    role?: ReactNode;
+    description?: ReactNode;
+    image?: ReactNode;
+    email?: string;
+    phone?: string;
+}
+export interface MarketingContactProps {
+    intro?: ReactNode;
+    form: ReactNode;
+    office?: MarketingOffice;
+    contactPerson?: MarketingContactPerson;
+    compact?: boolean;
+    className?: string;
+}
+export type MarketingLeadMagnetVariant = 'featured' | 'sidebar';
+export interface MarketingLeadMagnetProps {
+    title: ReactNode;
+    description?: ReactNode;
+    benefits?: ReactNode[];
+    image?: ReactNode;
+    buttonText?: ReactNode;
+    formTitle?: ReactNode;
+    form?: ReactNode;
+    variant?: MarketingLeadMagnetVariant;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}

package/dist/marketing/types.js

@@ -0,0 +1 @@
+export {};

package/dist/marketing/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+export declare function toTelHref(phone: string): string;

package/dist/marketing/utils.js

@@ -0,0 +1,6 @@
+export function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function toTelHref(phone) {
+    return `tel:${phone.replace(/[^\d+]/g, '')}`;
+}

package/dist/panel/inspector-json.js

@@ -57,12 +57,14 @@ function tokenize(value, level, key, indent, seen) {
     }
     return out;
 }
+// 700-shade variants for syntax tokens so 11px monospace text clears
+// WCAG AA (4.5:1) against the inspector's near-white background.
 const KIND_CLASS = {
     punct: 'text-muted-foreground',
     key: 'text-primary',
-    string: 'text-emerald-500',
-    number: 'text-amber-500',
-    literal: 'text-amber-500',
+    string: 'text-emerald-700',
+    number: 'text-amber-700',
+    literal: 'text-amber-700',
 };
 export function InspectorJSON({ data, indent = 2, className }) {
     const tokens = tokenize(data, 0, null, indent, new WeakSet());

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+interface AppShellBaseProps {
+    children: ReactNode;
+    className?: string;
+}
+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

@@ -0,0 +1,26 @@
+'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(props) {
+    const { workspace, activeAppId } = useMedaShell();
+    // 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/command-palette.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { CommandDefinition } from './types.js';
+export interface CommandGroupDefinition {
+    id: string;
+    label: string;
+    /** Lower value = rendered earlier. Default: 100. */
+    priority?: number;
+}
+interface CommandRegistry {
+    register: (commands: CommandDefinition[]) => void;
+    unregister: (ids: string[]) => void;
+    registerGroup: (group: CommandGroupDefinition) => void;
+    unregisterGroup: (id: string) => void;
+}
+export declare const CommandRegistryContext: import("react").Context<CommandRegistry | null>;
+export declare function matchesHotkey(e: KeyboardEvent, spec: string): boolean;
+export interface CommandPaletteProps {
+    children?: ReactNode;
+}
+export declare function CommandPalette({ children }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare function useCommands(commands: CommandDefinition[]): void;
+export declare function useCommandGroup(group: CommandGroupDefinition): void;
+export {};

package/dist/shell/command-palette.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, } from '../components/ui/command.js';
+import { useMedaShell } from './shell-provider.js';
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+export const CommandRegistryContext = createContext(null);
+// ---------------------------------------------------------------------------
+// matchesHotkey — strict modifier matching
+//
+// 'mod+k'          → matches Cmd+K on macOS, Ctrl+K on Windows/Linux
+// 'mod+shift+k'    → requires modifier + shift + key; no other modifiers
+// 'mod+alt+k'      → requires modifier + alt + key; no other modifiers
+//
+// Modifiers not listed in `spec` MUST NOT be pressed.
+// ---------------------------------------------------------------------------
+export function matchesHotkey(e, spec) {
+    const parts = spec.toLowerCase().split('+');
+    const key = parts.at(-1) ?? '';
+    const mods = parts.slice(0, -1);
+    const wantMod = mods.includes('mod');
+    const wantShift = mods.includes('shift');
+    const wantAlt = mods.includes('alt');
+    const hasMod = e.metaKey || e.ctrlKey;
+    return (e.key.toLowerCase() === key &&
+        (wantMod ? hasMod : !hasMod) &&
+        (wantShift ? e.shiftKey : !e.shiftKey) &&
+        (wantAlt ? e.altKey : !e.altKey));
+}
+export function CommandPalette({ children }) {
+    const ctx = useMedaShell();
+    const { open, setOpen } = ctx.commandPalette;
+    const hotkey = ctx.commandPaletteHotkey;
+    const [commands, setCommands] = useState([]);
+    const [groups, setGroups] = useState([]);
+    // -------------------------------------------------------------------------
+    // Registry methods
+    // -------------------------------------------------------------------------
+    const register = useCallback((cmds) => {
+        setCommands((prev) => {
+            const ids = new Set(cmds.map((c) => c.id));
+            return [...prev.filter((c) => !ids.has(c.id)), ...cmds];
+        });
+    }, []);
+    const unregister = useCallback((ids) => {
+        setCommands((prev) => prev.filter((c) => !ids.includes(c.id)));
+    }, []);
+    const registerGroup = useCallback((group) => {
+        setGroups((prev) => [...prev.filter((g) => g.id !== group.id), group]);
+    }, []);
+    const unregisterGroup = useCallback((id) => {
+        setGroups((prev) => prev.filter((g) => g.id !== id));
+    }, []);
+    const registry = useMemo(() => ({ register, unregister, registerGroup, unregisterGroup }), [register, unregister, registerGroup, unregisterGroup]);
+    // -------------------------------------------------------------------------
+    // Hotkey listener
+    // -------------------------------------------------------------------------
+    useEffect(() => {
+        const onKey = (e) => {
+            if (matchesHotkey(e, hotkey)) {
+                e.preventDefault();
+                setOpen(true);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [hotkey, setOpen]);
+    // -------------------------------------------------------------------------
+    // Group + sort commands
+    // -------------------------------------------------------------------------
+    const grouped = useMemo(() => {
+        const byGroup = new Map();
+        for (const cmd of commands) {
+            const list = byGroup.get(cmd.group) ?? [];
+            list.push(cmd);
+            byGroup.set(cmd.group, list);
+        }
+        const orderedGroupIds = [...byGroup.keys()].sort((a, b) => {
+            const ga = groups.find((g) => g.id === a);
+            const gb = groups.find((g) => g.id === b);
+            const pa = ga?.priority ?? 100;
+            const pb = gb?.priority ?? 100;
+            if (pa !== pb)
+                return pa - pb;
+            const la = ga?.label ?? a;
+            const lb = gb?.label ?? b;
+            return la.localeCompare(lb);
+        });
+        return orderedGroupIds.map((groupId) => {
+            const def = groups.find((g) => g.id === groupId);
+            return {
+                id: groupId,
+                label: def?.label ?? groupId,
+                commands: (byGroup.get(groupId) ?? []).sort((a, b) => a.label.localeCompare(b.label)),
+            };
+        });
+    }, [commands, groups]);
+    // -------------------------------------------------------------------------
+    // Handlers
+    // -------------------------------------------------------------------------
+    const handleSelect = (cmd) => {
+        setOpen(false);
+        void cmd.run();
+    };
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    return (_jsxs(CommandRegistryContext.Provider, { value: registry, children: [children, _jsx(CommandDialog, { open: open, onOpenChange: setOpen, children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search commands\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results." }), grouped.map((group) => (_jsx(CommandGroup, { heading: group.label, children: group.commands.map((cmd) => {
+                                        const Icon = cmd.icon;
+                                        return (_jsxs(CommandItem, { value: `${group.label} ${cmd.label}`, onSelect: () => handleSelect(cmd), children: [Icon && _jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { children: cmd.label }), cmd.shortcut && _jsx(CommandShortcut, { children: cmd.shortcut })] }, cmd.id));
+                                    }) }, group.id)))] })] }) })] }));
+}
+// ---------------------------------------------------------------------------
+// useCommands — registers on mount, unregisters on unmount
+// ---------------------------------------------------------------------------
+export function useCommands(commands) {
+    const registry = useContext(CommandRegistryContext);
+    if (!registry)
+        throw new Error('useCommands must be used inside <CommandPalette>');
+    useEffect(() => {
+        registry.register(commands);
+        return () => registry.unregister(commands.map((c) => c.id));
+    }, [commands, registry.register, registry.unregister]);
+}
+// ---------------------------------------------------------------------------
+// useCommandGroup — registers group metadata for ordering
+// ---------------------------------------------------------------------------
+export function useCommandGroup(group) {
+    const registry = useContext(CommandRegistryContext);
+    if (!registry)
+        throw new Error('useCommandGroup must be used inside <CommandPalette>');
+    useEffect(() => {
+        registry.registerGroup(group);
+        return () => registry.unregisterGroup(group.id);
+    }, [group, registry.registerGroup, registry.unregisterGroup]);
+}

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

@@ -0,0 +1,31 @@
+/**
+ * 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 {
+    /** Drives the persistence key for layout state. */
+    appId: string;
+    module?: ContextModule;
+    /** Starting width in px. Falls back to provider's stored width (default 300). */
+    defaultWidth?: number;
+    collapsible?: boolean;
+    /** When true, the rail evaporates — renders an aria-hidden placeholder. */
+    hidden?: boolean;
+    /** Optional active item id for nav active state (preferred over useMedaShell().selection). */
+    activeItemId?: string;
+    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;

package/dist/shell/context-rail.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { useMedaShell } from './shell-provider.js';
+import { useShellViewport } from './use-shell-viewport.js';
+// ---------------------------------------------------------------------------
+// Constants — spec §10 dimensions
+// ---------------------------------------------------------------------------
+const MIN_WIDTH = 240;
+const MAX_WIDTH = 420;
+function ResizeHandle({ currentWidth, onResize, onCommit }) {
+    const startWidthRef = useRef(currentWidth);
+    const startXRef = useRef(0);
+    const draggingRef = useRef(false);
+    const handlePointerDown = (e) => {
+        // setPointerCapture may not be available in all test environments (jsdom)
+        try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // ignore — drag still functions via draggingRef
+        }
+        startWidthRef.current = currentWidth;
+        startXRef.current = e.clientX;
+        draggingRef.current = true;
+    };
+    const handlePointerMove = (e) => {
+        if (!draggingRef.current)
+            return;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + (e.clientX - startXRef.current)));
+        onResize(next);
+    };
+    const handlePointerUp = (e) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + (e.clientX - startXRef.current)));
+        onCommit(next);
+    };
+    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 }));
+}
+// ---------------------------------------------------------------------------
+// ContextRail
+// ---------------------------------------------------------------------------
+export function ContextRail({ appId: _appId, module, hidden = false, collapsible: _collapsible = true, activeItemId, renderLink, className, }) {
+    const band = useShellViewport();
+    const ctx = useMedaShell();
+    const collapsed = ctx.contextRail.collapsed;
+    // Local display width tracks pointer-move updates; ctx.contextRail.setWidth
+    // is called on pointerUp to persist via useShellLayoutState.
+    const [displayWidth, setDisplayWidth] = useState(null);
+    const width = displayWidth ?? ctx.contextRail.width;
+    if (band === 'mobile')
+        return null;
+    if (hidden) {
+        return _jsx("div", { "aria-hidden": "true", className: "hidden", "data-testid": "context-rail-hidden" });
+    }
+    if (!module || module.items.length === 0) {
+        return _jsx("div", { "aria-hidden": "true", className: "hidden", "data-testid": "context-rail-empty" });
+    }
+    const handleResize = (w) => {
+        setDisplayWidth(w);
+    };
+    const handleCommit = (w) => {
+        setDisplayWidth(null);
+        ctx.contextRail.setWidth(w);
+    };
+    return (_jsxs("aside", { "data-testid": "context-rail", "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 })] }));
+}

package/dist/shell/extras/index.d.ts

@@ -0,0 +1,4 @@
+export * from './shell-desktop-panel-dock.js';
+export * from './shell-scrollable-content.js';
+export * from './shell-tab-bar.js';
+export * from './workbench-layout.js';