@medalsocial/meda 0.3.0 → 1.0.0

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

@@ -0,0 +1,29 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export interface IconRailItem {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    to: string;
+    badge?: ReactNode;
+}
+export interface IconRailRenderLinkArgs {
+    item: IconRailItem;
+    isActive: boolean;
+    className: string;
+    children: ReactNode;
+}
+export interface IconRailProps {
+    mainItems: IconRailItem[];
+    utilityItems?: IconRailItem[];
+    footer?: ReactNode;
+    activeId?: string;
+    renderLink?: (args: IconRailRenderLinkArgs) => ReactNode;
+    className?: string;
+}
+export interface RailDividerProps {
+    pinnedBottom: boolean;
+    onToggle: () => void;
+}
+export declare function RailDivider({ pinnedBottom, onToggle }: RailDividerProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, className, }: IconRailProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/icon-rail.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../components/ui/tooltip.js';
+import { cn } from '../lib/utils.js';
+import { useShellViewport } from './use-shell-viewport.js';
+// ---------------------------------------------------------------------------
+// Item styling
+// ---------------------------------------------------------------------------
+function itemClass(isActive) {
+    return cn('group relative flex h-11 w-11 items-center justify-center rounded-xl transition-colors', isActive
+        ? 'bg-primary/12 text-primary'
+        : 'text-muted-foreground hover:bg-accent hover:text-foreground');
+}
+export function RailDivider({ pinnedBottom, onToggle }) {
+    return (_jsx("button", { type: "button", "data-testid": "rail-divider", onClick: onToggle, "aria-label": pinnedBottom ? 'Pull utility items up' : 'Push utility items down', className: cn('my-3 flex h-6 w-8 items-center justify-center rounded-md', 'text-muted-foreground hover:bg-accent hover:text-foreground transition-colors'), children: pinnedBottom ? (_jsx(ChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(ChevronDown, { size: 14, "aria-hidden": "true" })) }));
+}
+// ---------------------------------------------------------------------------
+// IconRail
+// ---------------------------------------------------------------------------
+export function IconRail({ mainItems, utilityItems = [], footer, activeId, renderLink, className, }) {
+    const band = useShellViewport();
+    const [pinnedBottom, setPinnedBottom] = useState(true);
+    if (band === 'mobile')
+        return null;
+    const renderItem = (item) => {
+        const isActive = item.id === activeId;
+        const klass = itemClass(isActive);
+        const IconComp = item.icon;
+        const inner = (_jsxs(_Fragment, { children: [_jsx(IconComp, { size: 22, "aria-hidden": "true" }), item.badge ? _jsx("span", { className: "absolute right-1 top-1", children: item.badge }) : null] }));
+        const linkContent = renderLink ? (
+        // renderLink consumers receive the className so they can apply it themselves
+        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 }))] }) }));
+}

package/dist/shell/index.d.ts

@@ -1,15 +1,24 @@
-export * from './navigation-area.js';
-export * from './shell-app-rail.js';
-export * from './shell-desktop-panel-dock.js';
-export * from './shell-frame.js';
-export * from './shell-header.js';
-export * from './shell-layout-utils.js';
-export * from './shell-module-nav.js';
-export * from './shell-panel-rail.js';
-export * from './shell-route-utils.js';
-export * from './shell-scrollable-content.js';
-export * from './shell-state.js';
-export * from './shell-tab-bar.js';
-export * from './types.js';
-export * from './utils.js';
-export * from './workbench-layout.js';
+export { AppShell, AppShellBody } from './app-shell.js';
+export type { CommandGroupDefinition } from './command-palette.js';
+export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
+export { ContextRail } from './context-rail.js';
+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 { useShellViewport } from './use-shell-viewport.js';

package/dist/shell/index.js

@@ -1,15 +1,35 @@
-export * from './navigation-area.js';
-export * from './shell-app-rail.js';
-export * from './shell-desktop-panel-dock.js';
-export * from './shell-frame.js';
-export * from './shell-header.js';
-export * from './shell-layout-utils.js';
-export * from './shell-module-nav.js';
-export * from './shell-panel-rail.js';
-export * from './shell-route-utils.js';
-export * from './shell-scrollable-content.js';
-export * from './shell-state.js';
-export * from './shell-tab-bar.js';
-export * from './types.js';
-export * from './utils.js';
-export * from './workbench-layout.js';
+// Note: NO 'use client' at the top of this barrel.
+// Next.js 14+'s flight loader rejects `export * as Foo` inside a file with
+// the directive (see test/nextjs-consumer.test.ts). Each underlying component
+// file carries its own 'use client' — Next traces through the barrel and
+// applies them per-component. The barrel itself is just a re-exporter.
+// Layout
+export { AppShell, AppShellBody } from './app-shell.js';
+// Command palette
+export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
+export { ContextRail } from './context-rail.js';
+// Extras (legacy components ported during Phase 15 — opt-in for apps that need them)
+export * as Extras from './extras/index.js';
+// Rails + main + panel
+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';
+// Provider + hooks
+export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+// Theme
+export { DefaultThemeProvider, ThemeToggle, useTheme } from './theme.js';
+export { NextThemesAdapter } from './theme-next-themes.js';
+export { useShellViewport } from './use-shell-viewport.js';

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

@@ -0,0 +1,32 @@
+import type { PanelMode } from './types.js';
+export interface ShellStorageAdapter {
+    load: (key: string) => unknown;
+    save: (key: string, value: unknown) => void;
+}
+export declare function createLocalStorageAdapter(): ShellStorageAdapter;
+export interface ShellLayoutState {
+    contextRail: {
+        width: number;
+        collapsed: boolean;
+    };
+    rightPanel: {
+        mode: PanelMode;
+        activeView: string | null;
+        width: number;
+    };
+}
+export type ShellLayoutStateUpdater = ShellLayoutState | ((prev: ShellLayoutState) => ShellLayoutState);
+interface UseShellLayoutStateArgs {
+    workspaceId: string;
+    appId: string;
+    storage: ShellStorageAdapter;
+}
+/**
+ * Per-(workspaceId, appId) layout state with localStorage persistence.
+ *
+ * The `storage` adapter must be referentially stable across renders (typically
+ * memoized once at the provider level). An inline-constructed adapter would
+ * loop the hydration effect and clobber local mutations.
+ */
+export declare function useShellLayoutState({ workspaceId, appId, storage, }: UseShellLayoutStateArgs): readonly [ShellLayoutState, (next: ShellLayoutStateUpdater) => void];
+export {};

package/dist/shell/layout-state.js

@@ -0,0 +1,98 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function createLocalStorageAdapter() {
+    let timer = null;
+    let pending = {};
+    // Single shared timer across keys: the debounce window resets on every
+    // save() and flushes all pending keys together. Intentional — layout
+    // updates tend to arrive in bursts (rail width + panel mode at once).
+    return {
+        load: (key) => {
+            if (typeof window === 'undefined')
+                return null;
+            try {
+                const raw = window.localStorage.getItem(key);
+                return raw ? JSON.parse(raw) : null;
+            }
+            catch {
+                /* swallow quota / parse errors */
+                return null;
+            }
+        },
+        save: (key, value) => {
+            if (typeof window === 'undefined')
+                return;
+            pending[key] = value;
+            if (timer)
+                clearTimeout(timer);
+            timer = setTimeout(() => {
+                for (const [k, v] of Object.entries(pending)) {
+                    try {
+                        window.localStorage.setItem(k, JSON.stringify(v));
+                    }
+                    catch {
+                        /* swallow quota errors */
+                    }
+                }
+                pending = {};
+            }, 200);
+        },
+    };
+}
+const DEFAULTS = {
+    contextRail: { width: 300, collapsed: false },
+    rightPanel: { mode: 'closed', activeView: null, width: 340 },
+};
+function isShellLayoutState(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const v = value;
+    if (!v.contextRail ||
+        typeof v.contextRail.width !== 'number' ||
+        typeof v.contextRail.collapsed !== 'boolean') {
+        return false;
+    }
+    if (!v.rightPanel || typeof v.rightPanel.width !== 'number')
+        return false;
+    const validModes = ['closed', 'panel', 'expanded', 'fullscreen'];
+    if (!validModes.includes(v.rightPanel.mode))
+        return false;
+    if (v.rightPanel.activeView !== null && typeof v.rightPanel.activeView !== 'string')
+        return false;
+    return true;
+}
+/**
+ * Per-(workspaceId, appId) layout state with localStorage persistence.
+ *
+ * The `storage` adapter must be referentially stable across renders (typically
+ * memoized once at the provider level). An inline-constructed adapter would
+ * loop the hydration effect and clobber local mutations.
+ */
+export function useShellLayoutState({ workspaceId, appId, storage, }) {
+    const key = `meda:shell:${workspaceId}:${appId}`;
+    const [state, setStateInternal] = useState(DEFAULTS);
+    const [persistRevision, setPersistRevision] = useState(0);
+    const persistedRevisionRef = useRef(0);
+    const pendingSaveKeyRef = useRef(key);
+    // Hydrate after mount. Effect re-runs when key changes (workspace/app switch).
+    useEffect(() => {
+        const stored = storage.load(key);
+        if (isShellLayoutState(stored)) {
+            setStateInternal(stored);
+        }
+    }, [key, storage]);
+    const setState = useCallback((next) => {
+        pendingSaveKeyRef.current = key;
+        setStateInternal((prev) => {
+            return typeof next === 'function' ? next(prev) : next;
+        });
+        setPersistRevision((revision) => revision + 1);
+    }, [key]);
+    useEffect(() => {
+        if (persistedRevisionRef.current === persistRevision)
+            return;
+        persistedRevisionRef.current = persistRevision;
+        storage.save(pendingSaveKeyRef.current, state);
+    }, [persistRevision, state, storage]);
+    return [state, setState];
+}

package/dist/shell/mobile/mobile-bottom-nav.d.ts

@@ -0,0 +1,15 @@
+export interface MobileBottomNavProps {
+    className?: string;
+}
+/**
+ * Mobile-only bottom navigation bar.
+ *
+ * Renders 4 buttons sourced from `ctx.mobileBottomNav` (provider-controlled,
+ * overrideable per-app via `mobileBottomNav` prop). Each button click opens
+ * the corresponding drawer via `ctx.mobileDrawer.setOpen`.
+ *
+ * The Menu button supports long-press (500ms) to open the command palette.
+ *
+ * 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;

package/dist/shell/mobile/mobile-bottom-nav.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from '../../lib/utils.js';
+import { useMedaShell } from '../shell-provider.js';
+import { useShellViewport } from '../use-shell-viewport.js';
+/**
+ * Mobile-only bottom navigation bar.
+ *
+ * Renders 4 buttons sourced from `ctx.mobileBottomNav` (provider-controlled,
+ * overrideable per-app via `mobileBottomNav` prop). Each button click opens
+ * the corresponding drawer via `ctx.mobileDrawer.setOpen`.
+ *
+ * The Menu button supports long-press (500ms) to open the command palette.
+ *
+ * Hidden on non-mobile viewports and when the right panel is in fullscreen mode.
+ */
+export function MobileBottomNav({ 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))) }));
+}
+/** Long-press threshold in milliseconds */
+const LONG_PRESS_DURATION = 500;
+function MobileBottomNavButton({ item }) {
+    const ctx = useMedaShell();
+    const Icon = item.icon;
+    const label = typeof item.label === 'function' ? item.label() : item.label;
+    const isMenu = item.id === 'menu';
+    const longPressTimerRef = useRef(null);
+    const longPressFiredRef = useRef(false);
+    const cancelTimer = () => {
+        if (longPressTimerRef.current !== null) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+    };
+    const handlePointerDown = () => {
+        if (!isMenu)
+            return;
+        longPressFiredRef.current = false;
+        longPressTimerRef.current = setTimeout(() => {
+            longPressFiredRef.current = true;
+            longPressTimerRef.current = null;
+            ctx.commandPalette.setOpen(true);
+        }, LONG_PRESS_DURATION);
+    };
+    const handlePointerUp = () => {
+        cancelTimer();
+    };
+    const handlePointerLeave = () => {
+        cancelTimer();
+    };
+    const handlePointerCancel = () => {
+        cancelTimer();
+    };
+    const handleClick = () => {
+        if (isMenu && longPressFiredRef.current) {
+            // Long-press already fired — suppress the regular click action
+            longPressFiredRef.current = false;
+            return;
+        }
+        if (typeof item.opens === 'string') {
+            ctx.mobileDrawer.setOpen(item.opens);
+        }
+        else {
+            // Custom render fn — open a custom drawer keyed by the item's id
+            ctx.mobileDrawer.setOpen(item.id);
+        }
+    };
+    return (_jsxs("button", { type: "button", onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onClick: handleClick, "aria-label": label, className: "flex h-full flex-1 flex-col items-center justify-center gap-0.5 text-muted-foreground hover:text-foreground", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx("span", { className: "text-[10px]", children: label })] }));
+}

package/dist/shell/mobile/mobile-drawers.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { IconRailItem } from '../icon-rail.js';
+import type { ContextModule, PanelView } from '../types.js';
+export interface MobileDrawersProps {
+    /** Menu drawer source (icon-rail items). */
+    menuItems?: IconRailItem[];
+    /** Module drawer source (current app's context-rail module). */
+    module?: ContextModule;
+    /** Panels drawer source. */
+    panelViews?: PanelView[];
+    /** Custom content drawers keyed by id from MobileBottomNavItem.opens render fn. */
+    customContent?: Record<string, (close: () => void) => ReactNode>;
+    className?: string;
+}
+/**
+ * Renders all four mobile drawer slots (Menu / Module / Panels / AI) plus
+ * 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;

package/dist/shell/mobile/mobile-drawers.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, } from '../../components/ui/drawer.js';
+import { cn } from '../../lib/utils.js';
+import { useMedaShell } from '../shell-provider.js';
+/**
+ * Renders all four mobile drawer slots (Menu / Module / Panels / AI) plus
+ * 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 = {}, }) {
+    const ctx = useMedaShell();
+    const open = ctx.mobileDrawer.open;
+    const setOpen = ctx.mobileDrawer.setOpen;
+    const close = () => setOpen(null);
+    const renderCtx = {
+        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)))] }));
+}
+// ---------------------------------------------------------------------------
+// Internal sub-drawers
+// ---------------------------------------------------------------------------
+function MenuDrawer({ open, onClose, items, }) {
+    return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "left", children: _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Menu" }), _jsx(DrawerDescription, { className: "sr-only", children: "Switch between primary app areas." })] }), _jsx("nav", { className: "flex flex-col gap-0.5 p-2", children: items.map((item) => {
+                        const Icon = item.icon;
+                        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: 18, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.id));
+                    }) })] }) }));
+}
+function ModuleDrawer({ open, onClose, module, }) {
+    if (!module)
+        return null;
+    return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "left", children: _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: module.label }), module.description && (_jsx(DrawerDescription, { className: "text-muted-foreground text-xs", children: module.description }))] }), _jsx("nav", { className: "flex flex-col gap-0.5 p-2", children: module.items.map((item) => {
+                        const Icon = item.icon;
+                        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, }) {
+    const ctx = useMedaShell();
+    const activeView = ctx.panel.activeView;
+    const active = panelViews.find((v) => v.id === activeView) ?? 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) })] }) }));
+}
+function AiDrawer({ open, onClose, panelViews, renderCtx, }) {
+    const ctx = useMedaShell();
+    const aiView = panelViews.find((v) => v.id === 'ai');
+    const setActiveView = ctx.panel.setActiveView;
+    // Pin to ai view when drawer opens
+    // biome-ignore lint/correctness/useExhaustiveDependencies: setActiveView is stable (from useMemo in provider)
+    useEffect(() => {
+        if (open && aiView) {
+            setActiveView('ai');
+        }
+    }, [open, aiView]);
+    if (!aiView)
+        return null;
+    return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "bottom", children: _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: aiView.label }), _jsx(DrawerDescription, { className: "sr-only", children: "Open the AI assistant panel." })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: aiView.render(renderCtx) })] }) }));
+}

package/dist/shell/mobile/mobile-header.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface MobileHeaderProps {
+    /** When set, renders back button + parentLabel · title (nested mode). */
+    parentLabel?: string;
+    /** Optional — for routing-system link rendering. */
+    parentTo?: string;
+    /** Page title shown in nested mode. */
+    title?: string;
+    /** Back button handler (nested mode). */
+    onBack?: () => void;
+    /** Root mode only — renders to the right of workspace name. */
+    globalActions?: ReactNode;
+    className?: string;
+}
+/**
+ * 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 declare function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, className, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/mobile/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-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/motion.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Motion tokens (spec §14).
+ *
+ * Numeric values are unitless milliseconds — consumers append `ms`:
+ *   `transition-duration: ${motion.default}ms`
+ *
+ * Mirrored as CSS custom properties in `src/styles/tokens.css` for use
+ * via Tailwind arbitrary values (e.g. `duration-[var(--motion-default)]`).
+ *
+ * `spring` is JS-only (no CSS analogue); for Framer Motion / react-spring.
+ */
+export declare const motion: {
+    readonly fast: 140;
+    readonly default: 200;
+    readonly panel: 240;
+    readonly fullscreen: 280;
+    readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+    readonly spring: {
+        readonly stiffness: 420;
+        readonly damping: 34;
+    };
+};

package/dist/shell/motion.js

@@ -0,0 +1,19 @@
+/**
+ * Motion tokens (spec §14).
+ *
+ * Numeric values are unitless milliseconds — consumers append `ms`:
+ *   `transition-duration: ${motion.default}ms`
+ *
+ * Mirrored as CSS custom properties in `src/styles/tokens.css` for use
+ * via Tailwind arbitrary values (e.g. `duration-[var(--motion-default)]`).
+ *
+ * `spring` is JS-only (no CSS analogue); for Framer Motion / react-spring.
+ */
+export const motion = {
+    fast: 140,
+    default: 200,
+    panel: 240,
+    fullscreen: 280,
+    ease: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    spring: { stiffness: 420, damping: 34 },
+};

package/dist/shell/public.d.ts

@@ -1,2 +1,16 @@
-export type { ShellCommandDefinition, ShellContentLayout, ShellHostAdapter, ShellModuleDefinition, ShellNavItem, ShellPanelDefinition, ShellRailItem, ShellRenderContext, ShellRouteContext, ShellSearchParamsAdapter, ShellStateContextValue, ShellTab, ShellViewDefinition, ShellViewportBand, } from './index.js';
-export { buildShellSectionCommands, buildShellShortcutMap, getDefaultShellPanelView, getResolvedShellPanelWidth, getShellActionsFromMatches, getShellContentLayoutFromMatches, getShellContentMaxWidth, getShellPanelCollection, getShellPanelView, getShellPanelViewsFromMatches, getShellTabsFromMatches, isShellPanelViewAvailable, NavigationArea, resolveShellPanelView, ShellAppRail, ShellDesktopPanelDock, ShellFrame, ShellHeaderFrame, ShellModuleNav, ShellPanelRail, ShellPanelToggle, ShellScrollableContent, ShellStateProvider, ShellTabBar, useShellState, WorkbenchLayout, } from './index.js';
+export { ShellDesktopPanelDock } from './extras/shell-desktop-panel-dock.js';
+export { ShellScrollableContent } from './extras/shell-scrollable-content.js';
+export { ShellTabBar } from './extras/shell-tab-bar.js';
+export { WorkbenchLayout } from './extras/workbench-layout.js';
+export { NavigationArea } from './navigation-area.js';
+export { ShellAppRail } from './shell-app-rail.js';
+export { ShellFrame } from './shell-frame.js';
+export { ShellHeaderFrame, ShellPanelToggle } from './shell-header.js';
+export { getResolvedShellPanelWidth, getShellContentMaxWidth, } from './shell-layout-utils.js';
+export { ShellModuleNav } from './shell-module-nav.js';
+export { ShellPanelRail } from './shell-panel-rail.js';
+export { getShellActionsFromMatches, getShellContentLayoutFromMatches, getShellPanelViewsFromMatches, getShellTabsFromMatches, } from './shell-route-utils.js';
+export type { ShellSearchParamsAdapter, ShellStateContextValue, } from './shell-state.js';
+export { ShellStateProvider, useShellState } from './shell-state.js';
+export type { ShellCommandDefinition, ShellContentLayout, ShellHostAdapter, ShellModuleDefinition, ShellNavItem, ShellPanelDefinition, ShellPanelRenderContext, ShellRailItem, ShellRouteContext, ShellTab, ShellViewDefinition, ShellViewportBand, } from './types.js';
+export { buildShellSectionCommands, buildShellShortcutMap, getDefaultShellPanelView, getShellPanelCollection, getShellPanelView, isShellPanelViewAvailable, resolveShellPanelView, } from './utils.js';

package/dist/shell/public.js

@@ -1 +1,20 @@
-export { buildShellSectionCommands, buildShellShortcutMap, getDefaultShellPanelView, getResolvedShellPanelWidth, getShellActionsFromMatches, getShellContentLayoutFromMatches, getShellContentMaxWidth, getShellPanelCollection, getShellPanelView, getShellPanelViewsFromMatches, getShellTabsFromMatches, isShellPanelViewAvailable, NavigationArea, resolveShellPanelView, ShellAppRail, ShellDesktopPanelDock, ShellFrame, ShellHeaderFrame, ShellModuleNav, ShellPanelRail, ShellPanelToggle, ShellScrollableContent, ShellStateProvider, ShellTabBar, useShellState, WorkbenchLayout, } from './index.js';
+// Legacy public surface — imports from source files directly since index.ts now re-exports v2 only.
+// Phase 17 deletes this file along with the legacy component files.
+// Extras (moved to extras/ during Phase 15)
+export { ShellDesktopPanelDock } from './extras/shell-desktop-panel-dock.js';
+export { ShellScrollableContent } from './extras/shell-scrollable-content.js';
+export { ShellTabBar } from './extras/shell-tab-bar.js';
+export { WorkbenchLayout } from './extras/workbench-layout.js';
+// Legacy components
+export { NavigationArea } from './navigation-area.js';
+export { ShellAppRail } from './shell-app-rail.js';
+export { ShellFrame } from './shell-frame.js';
+// Legacy compat shims inside shell-header.tsx
+export { ShellHeaderFrame, ShellPanelToggle } from './shell-header.js';
+export { getResolvedShellPanelWidth, getShellContentMaxWidth, } from './shell-layout-utils.js';
+export { ShellModuleNav } from './shell-module-nav.js';
+export { ShellPanelRail } from './shell-panel-rail.js';
+export { getShellActionsFromMatches, getShellContentLayoutFromMatches, getShellPanelViewsFromMatches, getShellTabsFromMatches, } from './shell-route-utils.js';
+export { ShellStateProvider, useShellState } from './shell-state.js';
+// Utility functions from their actual source locations
+export { buildShellSectionCommands, buildShellShortcutMap, getDefaultShellPanelView, getShellPanelCollection, getShellPanelView, isShellPanelViewAvailable, resolveShellPanelView, } from './utils.js';