@medalsocial/meda 0.3.0 → 1.0.0

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

@@ -0,0 +1,45 @@
+/**
+ * ResizableShell — shadcn-style wrapper around react-resizable-panels v4.
+ *
+ * API surface: Group → ResizableShell, Panel → ResizableShellPanel,
+ * Separator → ResizableHandle.
+ *
+ * Note: react-resizable-panels v4 renamed the exports:
+ *   PanelGroup → Group, PanelResizeHandle → Separator
+ * The v4 prop for layout direction is `orientation` (not `direction`).
+ *
+ * Persistence: left intentionally to consumers (ContextRail, RightPanel) because
+ * they own the (workspaceId, appId) key needed to key useShellLayoutState.
+ * ResizableShell is a layout primitive; don't couple it to the shell context hook.
+ */
+import type { ReactNode } from 'react';
+import type { OnPanelResize } from 'react-resizable-panels';
+export interface ResizableShellProps {
+    /** Default: 'horizontal'. */
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+    children: ReactNode;
+}
+export declare function ResizableShell({ orientation, className, children, }: ResizableShellProps): import("react/jsx-runtime").JSX.Element;
+export interface ResizableShellPanelProps {
+    /** Percent (0–100). */
+    defaultSize?: number;
+    /** Minimum size in percent. Token-aligned default: none (set by consumer). */
+    minSize?: number;
+    /** Maximum size in percent. Token-aligned default: none (set by consumer). */
+    maxSize?: number;
+    id?: string;
+    collapsible?: boolean;
+    collapsedSize?: number;
+    /** Called on each resize. Uses the react-resizable-panels v4 signature. */
+    onResize?: OnPanelResize;
+    className?: string;
+    children: ReactNode;
+}
+export declare function ResizableShellPanel({ className, children, onResize, ...props }: ResizableShellPanelProps): import("react/jsx-runtime").JSX.Element;
+export interface ResizableHandleProps {
+    className?: string;
+    /** When true, renders a visible drag-indicator bar inside the handle. */
+    withHandle?: boolean;
+}
+export declare function ResizableHandle({ className, withHandle }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/resizable-shell.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import { cn } from '../lib/utils.js';
+export function ResizableShell({ orientation = 'horizontal', className, children, }) {
+    return (_jsx(Group, { orientation: orientation, className: cn('flex h-full w-full', className), children: children }));
+}
+export function ResizableShellPanel({ className, children, onResize, ...props }) {
+    return (_jsx(Panel, { className: cn('h-full', className), onResize: onResize, ...props, children: children }));
+}
+export function ResizableHandle({ className, withHandle = false }) {
+    return (_jsx(Separator, { className: cn(
+        // 4px wide, transparent until hover/active — then ring-color line
+        'group relative w-1 shrink-0 cursor-col-resize transition-colors', 'bg-transparent hover:bg-ring data-[separator]:hover:bg-ring', 'focus-visible:bg-ring focus-visible:outline-none', className), children: withHandle && (_jsx("div", { "data-testid": "resize-handle-indicator", className: cn('absolute top-1/2 left-1/2 h-6 w-1 -translate-x-1/2 -translate-y-1/2', 'rounded-sm bg-border opacity-0 transition-opacity group-hover:opacity-100') })) }));
+}

package/dist/shell/right-panel.d.ts

@@ -0,0 +1,15 @@
+import type { PanelMode, PanelView } from './types.js';
+export interface RightPanelProps {
+    /** Views to render as tabs in the panel header. */
+    panelViews?: PanelView[];
+    /** Default active view id — set on mount when no activeView is set in context. */
+    defaultView?: string;
+    /**
+     * Which open-modes this consumer allows.
+     * Default is all three: ['panel', 'expanded', 'fullscreen'].
+     * If only ['panel'], the cycle button is hidden.
+     */
+    modes?: PanelMode[];
+    className?: string;
+}
+export declare function RightPanel({ panelViews, defaultView, modes, className, }: RightPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/right-panel.js

@@ -0,0 +1,126 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RightPanel — spec §12
+ *
+ * Four-mode right panel: closed (0px), panel (resizable 300–520px),
+ * expanded (~60vw), fullscreen (100vw/100vh takeover).
+ *
+ * Mode state lives in MedaShellProvider (panel.mode / panel.setMode).
+ * Width is persisted per-(workspaceId, appId) via panel.width / panel.setWidth.
+ *
+ * Resize note (Pattern B):
+ * Uses its own pointer-event resize handle on the LEFT edge instead of
+ * wrapping in <ResizableShell>. Pattern A requires migrating <AppShellBody>
+ * to a PanelGroup layout.
+ * TODO(phase-15-refactor): swap to ResizableShell once AppShellBody is a PanelGroup
+ */
+import { Maximize2, Minimize2, X } from 'lucide-react';
+import { useEffect, 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 §12 dimensions
+// ---------------------------------------------------------------------------
+const MIN_WIDTH = 300;
+const MAX_WIDTH = 520;
+function ResizeHandle({ currentWidth, onResize, onCommit }) {
+    const startWidthRef = useRef(currentWidth);
+    const startXRef = useRef(0);
+    const draggingRef = useRef(false);
+    const handlePointerDown = (e) => {
+        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;
+        // Left edge: drag left (clientX decreasing) widens panel
+        const delta = startXRef.current - e.clientX;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + delta));
+        onResize(next);
+    };
+    const handlePointerUp = (e) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        const delta = startXRef.current - e.clientX;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + delta));
+        onCommit(next);
+    };
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize panel", "aria-valuenow": currentWidth, "aria-valuemin": MIN_WIDTH, "aria-valuemax": MAX_WIDTH, tabIndex: 0, className: cn('absolute top-0 left-0 h-full w-1 cursor-col-resize', 'opacity-0 transition-opacity hover:opacity-100 hover:bg-ring'), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }));
+}
+// ---------------------------------------------------------------------------
+// RightPanel
+// ---------------------------------------------------------------------------
+export function RightPanel({ panelViews = [], defaultView, modes = ['panel', 'expanded', 'fullscreen'], className, }) {
+    const band = useShellViewport();
+    const ctx = useMedaShell();
+    const { mode, activeView, width, setMode, setActiveView, setWidth } = ctx.panel;
+    // Hydrate defaultView on mount if no active view set
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional one-time mount effect
+    useEffect(() => {
+        if (!activeView && defaultView) {
+            setActiveView(defaultView);
+        }
+    }, []);
+    // Local display width tracks pointer-move updates live;
+    // setWidth (persist) is called on pointerUp.
+    const [displayWidth, setDisplayWidth] = useState(null);
+    const resolvedWidth = displayWidth ?? width;
+    // On mobile, the right panel renders as a drawer via <MobileDrawers > PanelsDrawer />.
+    // The desktop-shaped <RightPanel> hides; consumers must mount <MobileDrawers> to expose
+    // panel views on mobile.
+    if (band === 'mobile')
+        return null;
+    const renderCtx = {
+        workspaceId: ctx.workspace.id,
+        appId: ctx.activeAppId,
+    };
+    // Cycle through allowed open modes only (skip 'closed')
+    const cycleOpenMode = () => {
+        if (mode === 'closed')
+            return;
+        const openModes = modes.filter((m) => m !== 'closed');
+        const idx = openModes.indexOf(mode);
+        const next = openModes[(idx + 1) % openModes.length] ?? mode;
+        setMode(next);
+    };
+    // Mode → inline width style
+    const widthStyle = (() => {
+        switch (mode) {
+            case 'closed':
+                return { width: 0, pointerEvents: 'none' };
+            case 'panel':
+                return { width: `${resolvedWidth}px` };
+            case 'expanded':
+                return { width: '60vw' };
+            case 'fullscreen':
+                return { width: '100vw' };
+        }
+    })();
+    // Z-index escalation: fullscreen covers header + rails
+    const zIndexClass = mode === 'fullscreen' ? 'z-[var(--z-shell-fullscreen)]' : 'z-[var(--z-shell-panel)]';
+    const activePanelView = panelViews.find((v) => v.id === activeView);
+    const cycleAriaLabel = mode === 'panel' ? 'Expand panel' : mode === 'expanded' ? 'Maximize panel' : 'Restore panel';
+    const handleResize = (w) => setDisplayWidth(w);
+    const handleCommit = (w) => {
+        setDisplayWidth(null);
+        setWidth(w);
+    };
+    return (_jsx("aside", { "data-meda-panel-mode": mode, "aria-hidden": mode === 'closed' ? 'true' : undefined, className: cn('relative h-full shrink-0 overflow-hidden border-l border-shell-border bg-shell-panel', 'transition-[width] ease-[var(--motion-ease)] duration-[var(--motion-panel)]', mode === 'fullscreen' && 'fixed inset-0 h-screen w-screen border-none', zIndexClass, className), style: widthStyle, children: mode !== 'closed' && (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-shell-border px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: panelViews.map((view) => {
+                                const isActive = view.id === activeView;
+                                const Icon = view.icon;
+                                return (_jsxs("button", { type: "button", "aria-current": isActive ? 'true' : undefined, onClick: () => setActiveView(view.id), className: cn('inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors', isActive
+                                        ? 'bg-accent text-accent-foreground'
+                                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'), children: [_jsx(Icon, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: view.label })] }, view.id));
+                            }) }), _jsxs("div", { className: "flex items-center gap-1", children: [modes.length > 1 && (_jsx("button", { type: "button", "aria-label": cycleAriaLabel, onClick: cycleOpenMode, className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: mode === 'fullscreen' ? (_jsx(Minimize2, { size: 14, "aria-hidden": "true" })) : (_jsx(Maximize2, { size: 14, "aria-hidden": "true" })) })), _jsx("button", { type: "button", "aria-label": "Close panel", onClick: () => setMode('closed'), className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: activePanelView != null ? (activePanelView.render(renderCtx)) : (_jsx("div", { className: "p-4 text-muted-foreground text-sm", children: "No panel view selected" })) }), mode === 'panel' && (_jsx(ResizeHandle, { currentWidth: resolvedWidth, onResize: handleResize, onCommit: handleCommit }))] })) }));
+}

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export type ShellAuthTheme = 'light' | 'dark';
+export interface ShellAuthFrameProps {
+    children: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    brandName?: ReactNode;
+    brandMark?: ReactNode;
+    eyebrow?: ReactNode;
+    preview?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+export interface ShellAuthThemeToggleProps {
+    value: ShellAuthTheme;
+    onValueChange: (value: ShellAuthTheme) => void;
+    className?: string;
+    lightLabel?: string;
+    darkLabel?: string;
+}
+export declare function ShellAuthFrame({ children, title, description, brandName, brandMark, eyebrow, preview, actions, className, }: ShellAuthFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShellAuthThemeToggle({ value, onValueChange, className, lightLabel, darkLabel, }: ShellAuthThemeToggleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart3, CheckCircle2, Mail, Moon, PanelRightOpen, Search, Send, Sparkles, Sun, UsersRound, } from 'lucide-react';
+function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}
+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 ShellAuthFrame({ children, title, description, brandName = 'Meda', brandMark, eyebrow, preview, actions, className, }) {
+    const resolvedBrandMark = brandMark ?? _jsx(DefaultBrandMark, {});
+    return (_jsxs("section", { "data-testid": "shell-auth-frame", className: cx('grid min-h-screen overflow-hidden bg-background text-foreground lg:grid-cols-[minmax(0,1.08fr)_minmax(420px,0.92fr)]', className), 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] })] })] }));
+}
+export function ShellAuthThemeToggle({ value, onValueChange, className, lightLabel = 'Light theme', darkLabel = 'Dark theme', }) {
+    return (_jsxs("fieldset", { className: cx('inline-flex items-center gap-1 rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm', className), children: [_jsx("legend", { className: "sr-only", children: "Theme" }), _jsx("button", { type: "button", "aria-label": lightLabel, "aria-pressed": value === 'light', title: lightLabel, onClick: () => onValueChange('light'), className: themeButtonClass(value === 'light'), children: _jsx(Sun, { className: "size-4", "aria-hidden": true }) }), _jsx("button", { type: "button", "aria-label": darkLabel, "aria-pressed": value === 'dark', title: darkLabel, onClick: () => onValueChange('dark'), className: themeButtonClass(value === 'dark'), children: _jsx(Moon, { className: "size-4", "aria-hidden": true }) })] }));
+}
+function themeButtonClass(active) {
+    return cx('inline-flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', active
+        ? 'bg-primary text-primary-foreground shadow-sm'
+        : 'text-muted-foreground hover:bg-muted hover:text-foreground');
+}
+function DefaultAuthPreview() {
+    return (_jsx("div", { "data-testid": "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": "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: cx('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": "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": "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": "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: cx('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: cx('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/shell-header.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
-export declare function ShellHeaderFrame({ left, center, right, className, }: {
-    left: ReactNode;
-    center?: ReactNode;
-    right?: ReactNode;
+export interface WorkspaceSwitcherProps {
+    workspaceMenuFooter?: ReactNode;
+}
+export declare function WorkspaceSwitcher({ workspaceMenuFooter }?: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppTabs(): import("react/jsx-runtime").JSX.Element;
+export declare function PanelToggle(): import("react/jsx-runtime").JSX.Element;
+export interface ShellHeaderProps {
+    globalActions?: ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ShellPanelToggle({ panelOpen, onToggle, }: {
-    panelOpen: boolean;
-    onToggle: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function ShellHeader({ globalActions, className }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/shell-header.js

@@ -1,15 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PanelRightClose, PanelRightOpen } from 'lucide-react';
-export function ShellHeaderFrame({ left, center, right, className, }) {
-    return (_jsxs("header", { className: [
-            'relative z-[var(--z-sticky)] grid h-[var(--header-height)] w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 bg-[var(--header)] px-3 shadow-[var(--shadow-header)] sm:px-4',
-            className,
-        ]
-            .filter(Boolean)
-            .join(' '), children: [left, _jsx("div", { className: "min-w-0", children: center }), _jsx("div", { "data-testid": "shell-header-actions", className: "hidden items-center justify-end gap-2 md:flex", children: right })] }));
-}
-export function ShellPanelToggle({ panelOpen, onToggle, }) {
-    return (_jsx("button", { type: "button", "aria-label": panelOpen ? 'Close panel' : 'Open panel', onClick: onToggle, className: panelOpen
-            ? 'inline-flex h-9 items-center justify-center rounded-xl border border-[var(--primary)]/30 bg-[var(--primary)]/12 px-2.5 text-[var(--primary)] transition-[background-color,color,border-color] duration-200 hover:bg-[var(--primary)]/18'
-            : 'inline-flex h-9 items-center justify-center rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-1)] px-2.5 text-[var(--muted-foreground)] transition-[background-color,color,border-color] duration-200 hover:bg-[var(--sidebar-accent)] hover:text-[var(--foreground)]', children: panelOpen ? _jsx(PanelRightClose, { size: 18 }) : _jsx(PanelRightOpen, { size: 18 }) }));
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, Monitor, Moon, PanelRightClose, PanelRightOpen, Sun } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import { cn } from '../lib/utils.js';
+import { useMedaShell } from './shell-provider.js';
+import { useTheme } from './theme.js';
+import { useShellViewport } from './use-shell-viewport.js';
+const NEXT_THEME = { light: 'dark', dark: 'system', system: 'light' };
+const THEME_ICON = { light: Sun, dark: Moon, system: Monitor };
+const THEME_LABEL = {
+    light: 'Switch to dark theme',
+    dark: 'Switch to system theme',
+    system: 'Switch to light theme',
+};
+function ThemeToggleMenuItem() {
+    const { theme, setTheme } = useTheme();
+    const Icon = THEME_ICON[theme];
+    return (_jsxs(DropdownMenuItem, { onClick: () => setTheme(NEXT_THEME[theme]), children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), THEME_LABEL[theme]] }));
+}
+export function WorkspaceSwitcher({ workspaceMenuFooter } = {}) {
+    const { workspace, workspaces } = useMedaShell();
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", className: "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent" }), children: [workspace.icon != null && (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: workspace.icon })), _jsx("span", { children: workspace.name }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })] }), _jsxs(DropdownMenuContent, { className: "min-w-[200px]", children: [workspaces.length > 0 && (_jsxs(_Fragment, { children: [workspaces.map((ws) => (_jsxs(DropdownMenuItem, { children: [ws.icon != null && _jsx("span", { "aria-hidden": "true", children: ws.icon }), ws.name] }, ws.id))), _jsx(DropdownMenuSeparator, {})] })), _jsx(DropdownMenuItem, { children: "Manage workspaces" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Settings" }), _jsx(DropdownMenuItem, { children: "Profile" }), _jsx(DropdownMenuSeparator, {}), _jsx(ThemeToggleMenuItem, {}), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Sign out" }), workspaceMenuFooter] })] }));
+}
+// ---------------------------------------------------------------------------
+// AppTabs
+// ---------------------------------------------------------------------------
+export function AppTabs() {
+    const { apps, activeAppId, setActiveApp } = useMedaShell();
+    return (_jsx("nav", { "aria-label": "Applications", className: "flex items-center", children: apps.map((app) => {
+            const isActive = app.id === activeAppId;
+            const Icon = app.icon;
+            return (_jsxs("button", { type: "button", "aria-current": isActive ? 'page' : undefined, onClick: () => {
+                    setActiveApp(app.id);
+                    // TODO(Phase 18.x): renderLink integration so clicking a tab also navigates
+                    // the consumer's router; setActiveApp alone updates context.
+                }, onMouseEnter: () => { }, className: cn('flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors', isActive
+                    ? 'border-b-2 border-primary text-foreground'
+                    : 'text-muted-foreground hover:text-foreground'), children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), app.label] }, app.id));
+        }) }));
+}
+// ---------------------------------------------------------------------------
+// PanelToggle
+// ---------------------------------------------------------------------------
+export function PanelToggle() {
+    const { panel } = useMedaShell();
+    const isOpen = panel.mode !== 'closed';
+    const handleClick = () => {
+        panel.setMode(isOpen ? 'closed' : 'panel');
+    };
+    return (_jsx("button", { type: "button", "aria-label": isOpen ? 'Close right panel' : 'Open right panel', onClick: handleClick, className: cn('inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors', isOpen ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-accent'), children: isOpen ? (_jsx(PanelRightClose, { size: 18, "aria-hidden": "true" })) : (_jsx(PanelRightOpen, { size: 18, "aria-hidden": "true" })) }));
+}
+export function ShellHeader({ globalActions, className } = {}) {
+    const band = useShellViewport();
+    if (band === 'mobile')
+        return null;
+    return (_jsxs("header", { className: cn('flex h-[var(--shell-header-height)] w-full items-center justify-between', 'border-b border-border bg-background px-3', className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx(WorkspaceSwitcher, {}), _jsx(AppTabs, {})] }), _jsxs("div", { className: "flex items-center gap-2", children: [globalActions, _jsx(PanelToggle, {})] })] }));
 }

package/dist/shell/shell-layout-utils.d.ts

@@ -1,5 +1,5 @@
-import type { ShellContentLayout, ShellViewportBand } from './types.js';
-export declare function getShellContentMaxWidth(layout: ShellContentLayout, viewportBand: ShellViewportBand): 1120 | 1280 | 1400 | 1440 | 1760 | 1920 | undefined;
+import type { ShellContentLayout, ShellViewportBand } from './extras/types.js';
+export declare function getShellContentMaxWidth(layout: ShellContentLayout, viewportBand: ShellViewportBand): 1440 | 1760 | 1920 | 1120 | 1280 | 1400 | undefined;
 export declare function getResolvedShellPanelWidth({ preferredWidth, viewportWidth, sidebarOpen, sidebarWidth, }: {
     preferredWidth: number;
     viewportWidth: number;

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { ShellMainLayout } from './types.js';
+export interface ShellMainProps {
+    layout?: ShellMainLayout;
+    className?: string;
+    children: ReactNode;
+}
+export declare function ShellMain({ layout, className, children }: ShellMainProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/shell-main.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+const layoutClass = {
+    workspace: 'mx-auto w-full max-w-[1280px] px-4 py-6 sm:px-6 lg:px-8',
+    centered: 'mx-auto w-full max-w-2xl px-4 py-6 sm:px-6',
+    fullbleed: 'w-full',
+};
+export function ShellMain({ layout = 'workspace', className, children }) {
+    return (_jsx("main", { "data-meda-shell-main-layout": layout, className: cn('flex-1 min-w-0 overflow-y-auto bg-shell-main', '[content-visibility:auto]', layoutClass[layout], className), children: children }));
+}

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

@@ -0,0 +1,65 @@
+import { type ReactNode } from 'react';
+import { type ShellStorageAdapter } from './layout-state.js';
+import type { AppDefinition, MobileBottomNavItem, PanelMode, ThemeAdapter, WorkspaceDefinition } from './types.js';
+export type MobileDrawerKind = 'menu-drawer' | 'module-drawer' | 'panels-drawer' | 'ai-drawer' | (string & {}) | null;
+interface MedaShellContextValue {
+    workspace: WorkspaceDefinition;
+    workspaces: WorkspaceDefinition[];
+    apps: AppDefinition[];
+    activeAppId: string;
+    setActiveApp: (id: string) => void;
+    panel: {
+        mode: PanelMode;
+        activeView: string | null;
+        width: number;
+        setMode: (m: PanelMode) => void;
+        setActiveView: (v: string | null) => void;
+        setWidth: (w: number) => void;
+        /** Opens panel + switches to viewId in one call.
+         * Sugar for app keyboard shortcuts (e.g. Cmd+J → panel.focus('ai')).
+         * If already open in 'panel', 'expanded', or 'fullscreen', the existing
+         * mode is preserved — only flips closed → panel. */
+        focus: (viewId: string) => void;
+    };
+    contextRail: {
+        width: number;
+        collapsed: boolean;
+        setWidth: (w: number) => void;
+        setCollapsed: (c: boolean) => void;
+    };
+    mobileBottomNav: MobileBottomNavItem[];
+    mobileDrawer: {
+        open: MobileDrawerKind;
+        setOpen: (kind: MobileDrawerKind) => void;
+    };
+    commandPalette: {
+        open: boolean;
+        setOpen: (open: boolean) => void;
+    };
+    commandPaletteHotkey: string;
+    /** Selection bridge between main workspace and right panel views (spec §17). */
+    selection: unknown | null;
+    setSelection: (value: unknown | null) => void;
+}
+export declare function useMedaShell(): MedaShellContextValue;
+/**
+ * Selection bridge between main workspace and right panel views (spec §17).
+ *
+ * `T` is consumer-typed: setSelection writes whatever shape you pass; the
+ * matching getter narrows to `T | null`. The shell does not validate the
+ * shape — coordinate types between writer and readers in your app.
+ */
+export declare function useShellSelection<T>(): readonly [T | null, (value: T | null) => void];
+export interface MedaShellProviderProps {
+    workspace: WorkspaceDefinition;
+    workspaces?: WorkspaceDefinition[];
+    apps: AppDefinition[];
+    defaultActiveApp?: string;
+    storage?: ShellStorageAdapter;
+    mobileBottomNav?: MobileBottomNavItem[];
+    commandPaletteHotkey?: string;
+    themeAdapter?: 'default' | 'next-themes' | ThemeAdapter;
+    children: ReactNode;
+}
+export declare function MedaShellProvider(props: MedaShellProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};