@medalsocial/meda 1.2.0 → 1.4.0

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

@@ -6,18 +6,22 @@ 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 { useResolvedPanelViews } from './panel-views-provider.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';
+const EMPTY_PANEL_VIEWS = [];
 export function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalActions, children, }) {
     const viewport = useShellViewport();
     const isMobile = viewport === 'mobile';
+    const staticPanelViews = rightPanel?.panelViews ?? EMPTY_PANEL_VIEWS;
+    const resolvedRightPanel = useResolvedPanelViews(staticPanelViews, rightPanel?.defaultView);
     // 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 navItems = buildMobileNavItems(iconRail, contextRail, resolvedRightPanel.panelViews);
     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/
@@ -33,21 +37,22 @@ export function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalAct
     // 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 }))] }));
+    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, renderLink: iconRail.renderLink })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId })), _jsx(ShellMain, { layout: "workspace", children: children }), !isMobile && resolvedRightPanel.panelViews.length > 0 && (_jsx(RightPanel, { panelViews: staticPanelViews, defaultView: rightPanel?.defaultView }))] }), isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, menuActiveId: iconRail?.activeId, menuRenderLink: iconRail?.renderLink, module: contextRail?.module, moduleAppId: contextRail?.appId, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }));
 }
-function buildMobileNavItems(iconRail, contextRail, rightPanel) {
+function buildMobileNavItems(iconRail, contextRail, panelViews) {
     const items = [];
     if (iconRail) {
         items.push({ id: 'menu', label: 'Menu', icon: Menu, opens: 'menu-drawer' });
     }
-    if (contextRail?.module) {
+    if (contextRail?.module &&
+        ((contextRail.module.items ?? []).length > 0 || Boolean(contextRail.module.render))) {
         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) {
+    if (panelViews.length > 0) {
         items.push({ id: 'panels', label: 'Panels', icon: PanelTop, opens: 'panels-drawer' });
-        if (rightPanel.panelViews.some((v) => v.id === 'ai')) {
+        if (panelViews.some((v) => v.id === 'ai')) {
             items.push({ id: 'ai', label: 'AI', icon: Sparkles, opens: 'ai-drawer' });
         }
     }

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

@@ -1,12 +1,15 @@
 import type { ReactNode } from 'react';
-import type { AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+import type { AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
 interface AppShellBaseProps {
     children: ReactNode;
     className?: string;
 }
 export type AppShellProps = AppShellBaseProps & ({
     variant: 'auth';
-    auth: AppShellAuthConfig;
+    auth?: AppShellAuthConfig;
+    branding?: AppShellAuthBranding;
+    preview?: ReactNode;
+    actions?: ReactNode;
 } | {
     variant: 'workspace';
     iconRail?: AppShellIconRailConfig;

package/dist/shell/app-shell.js

@@ -14,13 +14,25 @@ export function AppShell(props) {
     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 }));
+            return wrapper(_jsx(AppShellAuth, { ...resolveAuthConfig(props), 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 }));
     }
 }
+function resolveAuthConfig(props) {
+    const { auth, branding } = props;
+    return {
+        title: auth?.title ?? branding?.appName ?? branding?.brandName ?? 'Sign in',
+        description: auth?.description ?? branding?.tagline,
+        brandName: auth?.brandName ?? branding?.brandName,
+        brandMark: auth?.brandMark ?? branding?.brandMark,
+        eyebrow: auth?.eyebrow,
+        preview: auth?.preview ?? props.preview,
+        actions: auth?.actions ?? props.actions,
+    };
+}
 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.js

@@ -109,7 +109,8 @@ export function CommandPalette({ children }) {
     // -------------------------------------------------------------------------
     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));
+                                        const shortcut = cmd.shortcut ?? cmd.hotkey;
+                                        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 }), shortcut && _jsx(CommandShortcut, { children: shortcut })] }, cmd.id));
                                     }) }, group.id)))] })] }) })] }));
 }
 // ---------------------------------------------------------------------------

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

@@ -14,4 +14,4 @@ export interface ContextRailProps {
     renderLink?: (args: ShellLinkRenderArgs) => ReactNode;
     className?: string;
 }
-export declare function ContextRail({ appId: _appId, module, hidden, collapsible, activeItemId, renderLink, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ContextRail({ appId, module, hidden, collapsible, activeItemId, renderLink, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/context-rail.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * once <AppShellBody> ships as a ResizableShell Group.
  */
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { useId, useRef, useState } from 'react';
+import { Fragment, useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { useMedaShell } from './shell-provider.js';
 import { useShellViewport } from './use-shell-viewport.js';
@@ -75,7 +75,7 @@ function ContextRailToggle({ railId }) {
 // ---------------------------------------------------------------------------
 // ContextRail
 // ---------------------------------------------------------------------------
-export function ContextRail({ appId: _appId, module, hidden = false, collapsible = true, activeItemId, renderLink, className, }) {
+export function ContextRail({ appId, module, hidden = false, collapsible = true, activeItemId, renderLink, className, }) {
     const band = useShellViewport();
     const ctx = useMedaShell();
     // collapsible={false} means the rail must always render expanded — even if
@@ -91,12 +91,13 @@ export function ContextRail({ appId: _appId, module, hidden = false, collapsible
     // is called on pointerUp to persist via useShellLayoutState.
     const [displayWidth, setDisplayWidth] = useState(null);
     const width = displayWidth ?? ctx.contextRail.width;
+    const items = module?.items ?? [];
     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) {
+    if (!module || (items.length === 0 && !module.render)) {
         return _jsx("div", { "aria-hidden": "true", className: "hidden", "data-testid": "context-rail-empty" });
     }
     const handleResize = (w) => {
@@ -112,16 +113,22 @@ export function ContextRail({ appId: _appId, module, hidden = false, collapsible
     // transition then so the rail snaps to the cursor instead of lagging
     // behind it.
     const isDragging = displayWidth !== null;
-    return (_jsxs("aside", { id: railId, "data-testid": "context-rail", "aria-label": module.label, className: cn('relative h-full shrink-0 border-r border-shell-border bg-shell-context', !isDragging && 'transition-[width] duration-200 ease-in-out motion-reduce:transition-none', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [collapsible && _jsx(ContextRailToggle, { railId: railId }), _jsxs("div", { className: "h-full overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [_jsxs("div", { className: "border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] }), _jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: module.items.map((item) => {
+    return (_jsxs("aside", { id: railId, "data-testid": "context-rail", "aria-label": module.label, className: cn('relative h-full shrink-0 border-r border-shell-border bg-shell-context', !isDragging && 'transition-[width] duration-200 ease-in-out motion-reduce:transition-none', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [collapsible && _jsx(ContextRailToggle, { railId: railId }), _jsxs("div", { className: "h-full overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [_jsxs("div", { className: "border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] }), items.length > 0 && (_jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: 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 }))] }));
+                            const linkProps = {
+                                href: item.to,
+                                'aria-current': isActive ? 'page' : undefined,
+                                className: klass,
+                                children: inner,
+                            };
                             if (renderLink) {
-                                return renderLink({ item, isActive, className: klass, children: inner });
+                                return (_jsx(Fragment, { children: renderLink({ item, isActive, className: klass, children: inner, linkProps }) }, item.id));
                             }
-                            return (_jsx("a", { href: item.to, "aria-current": isActive ? 'page' : undefined, className: klass, children: inner }, item.id));
-                        }) })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
+                            return _jsx("a", { ...linkProps }, item.id);
+                        }) })), module.render?.({ workspaceId: ctx.workspace.id, appId })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
 }

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

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
 export interface IconRailItem {
     id: string;
     label: string;
@@ -12,6 +12,7 @@ export interface IconRailRenderLinkArgs {
     isActive: boolean;
     className: string;
     children: ReactNode;
+    linkProps: AnchorHTMLAttributes<HTMLAnchorElement>;
 }
 export interface IconRailProps {
     mainItems: IconRailItem[];

package/dist/shell/icon-rail.js

@@ -29,9 +29,16 @@ export function IconRail({ mainItems, utilityItems = [], footer, activeId, rende
         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 linkProps = {
+            href: item.to,
+            'aria-label': item.label,
+            'aria-current': isActive ? 'page' : undefined,
+            className: 'contents',
+            children: inner,
+        };
         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 }));
+        renderLink({ item, isActive, className: klass, children: inner, linkProps })) : (_jsx("a", { ...linkProps }));
         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", { "data-testid": "icon-rail", "aria-label": "Primary", className: cn('flex h-full w-[var(--shell-rail-width)] shrink-0 flex-col items-center bg-shell-rail py-3.5', className), children: [_jsx("div", { className: "flex flex-col items-center gap-1", children: mainItems.map(renderItem) }), utilityItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(RailDivider, { pinnedBottom: pinnedBottom, onToggle: () => setPinnedBottom((prev) => !prev) }), _jsx("div", { "data-testid": "utility-items-wrapper", className: cn('flex flex-col items-center gap-1', pinnedBottom && 'mt-auto'), children: utilityItems.map(renderItem) })] })), footer && (_jsx("div", { className: cn('pt-3', pinnedBottom || utilityItems.length === 0 ? 'mt-auto' : ''), children: footer }))] }) }));

package/dist/shell/index.d.ts

@@ -1,3 +1,5 @@
+export type { AuthMessageProps, AuthOneTapSlotProps, AuthProvider, AuthProviderButtonProps, AuthProviderListProps, } from '../auth/index.js';
+export { AuthError, AuthNotice, AuthOneTapSlot, AuthProviderButton, AuthProviderList, } from '../auth/index.js';
 export { AppShell, AppShellBody } from './app-shell.js';
 export type { CommandGroupDefinition } from './command-palette.js';
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
@@ -5,10 +7,13 @@ export { ContextRail } from './context-rail.js';
 export type { DragModeBannerProps } from './drag-mode-banner.js';
 export { DragModeBanner } from './drag-mode-banner.js';
 export * as Extras from './extras/index.js';
+export type { IconRailItem, IconRailProps, IconRailRenderLinkArgs } from './icon-rail.js';
 export { IconRail, RailDivider } from './icon-rail.js';
 export type { ShellStorageAdapter } from './layout-state.js';
 export { createLocalStorageAdapter } from './layout-state.js';
 export { motion } from './motion.js';
+export type { PanelViewsProviderProps } from './panel-views-provider.js';
+export { PanelViewsProvider } from './panel-views-provider.js';
 export type { RailDropSlotProps, RailDropSlotState } from './rail-drop-slot.js';
 export { RailDropSlot } from './rail-drop-slot.js';
 export type { RailDropZonesProps } from './rail-drop-zones.js';
@@ -21,5 +26,5 @@ 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, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellVariant, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
+export type { AppDefinition, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellVariant, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
 export { useShellViewport } from './use-shell-viewport.js';

package/dist/shell/index.js

@@ -3,6 +3,7 @@
 // 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.
+export { AuthError, AuthNotice, AuthOneTapSlot, AuthProviderButton, AuthProviderList, } from '../auth/index.js';
 // Layout
 export { AppShell, AppShellBody } from './app-shell.js';
 // Command palette
@@ -12,12 +13,12 @@ export { ContextRail } from './context-rail.js';
 export { DragModeBanner } from './drag-mode-banner.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';
 // Hooks + tokens
 export { motion } from './motion.js';
+export { PanelViewsProvider } from './panel-views-provider.js';
 // Resize primitives
 export { RailDropSlot } from './rail-drop-slot.js';
 export { RailDropZones } from './rail-drop-zones.js';

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

@@ -1,11 +1,17 @@
 import { type ReactNode } from 'react';
-import type { IconRailItem } from '../icon-rail.js';
+import type { IconRailItem, IconRailProps } from '../icon-rail.js';
 import type { ContextModule, PanelView } from '../types.js';
 export interface MobileDrawersProps {
     /** Menu drawer source (icon-rail items). */
     menuItems?: IconRailItem[];
+    /** Active menu item id, sourced from icon rail config. */
+    menuActiveId?: string;
+    /** Custom menu link renderer, sourced from icon rail config. */
+    menuRenderLink?: IconRailProps['renderLink'];
     /** Module drawer source (current app's context-rail module). */
     module?: ContextModule;
+    /** App id used when rendering module custom content. */
+    moduleAppId?: string;
     /** Panels drawer source. */
     panelViews?: PanelView[];
     /**
@@ -23,4 +29,4 @@ export interface MobileDrawersProps {
  * any custom-content drawers. Mount once near the AppShell root; drawers
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
-export declare function MobileDrawers({ menuItems, module, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileDrawers({ menuItems, menuActiveId, menuRenderLink, module, moduleAppId, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { cloneElement, isValidElement, 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';
@@ -9,7 +9,7 @@ import { useMedaShell } from '../shell-provider.js';
  * any custom-content drawers. Mount once near the AppShell root; drawers
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
-export function MobileDrawers({ menuItems = [], module, panelViews = [], defaultView, customContent = {}, }) {
+export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, module, moduleAppId, panelViews = [], defaultView, customContent = {}, }) {
     const ctx = useMedaShell();
     const open = ctx.mobileDrawer.open;
     const setOpen = ctx.mobileDrawer.setOpen;
@@ -18,24 +18,59 @@ export function MobileDrawers({ menuItems = [], module, panelViews = [], default
         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, defaultView: defaultView, renderCtx: renderCtx }), _jsx(AiDrawer, { open: open === 'ai-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), Object.entries(customContent).map(([id, renderFn]) => (_jsx(Drawer, { open: open === id, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsx(DrawerContent, { children: renderFn(close) }) }, id)))] }));
+    const moduleRenderCtx = {
+        workspaceId: ctx.workspace.id,
+        appId: moduleAppId ?? ctx.activeAppId,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(MenuDrawer, { open: open === 'menu-drawer', onClose: close, items: menuItems, activeId: menuActiveId, renderLink: menuRenderLink }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module, renderCtx: moduleRenderCtx }), _jsx(PanelsDrawer, { open: open === 'panels-drawer', onClose: close, panelViews: panelViews, defaultView: defaultView, renderCtx: renderCtx }), _jsx(AiDrawer, { open: open === 'ai-drawer', onClose: close, panelViews: panelViews, renderCtx: renderCtx }), Object.entries(customContent).map(([id, renderFn]) => (_jsx(Drawer, { open: open === id, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsx(DrawerContent, { children: renderFn(close) }) }, id)))] }));
 }
 // ---------------------------------------------------------------------------
 // Internal sub-drawers
 // ---------------------------------------------------------------------------
-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 MenuDrawer({ open, onClose, items, activeId, renderLink, }) {
+    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) => (_jsx(MenuDrawerItem, { item: item, isActive: item.id === activeId, onClose: onClose, renderLink: renderLink }, item.id))) })] }) }));
+}
+const menuItemClassName = 'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground';
+function MenuDrawerItem({ item, isActive, onClose, renderLink, }) {
+    const Icon = item.icon;
+    const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }));
+    const className = cn(menuItemClassName, isActive && 'bg-accent text-foreground');
+    const linkProps = {
+        href: item.to,
+        className,
+        children,
+    };
+    if (renderLink) {
+        return closeAfterLinkClick(renderLink({
+            item,
+            isActive,
+            className,
+            children,
+            linkProps,
+        }), onClose);
+    }
+    return closeAfterLinkClick(_jsx("a", { ...linkProps }), onClose);
+}
+function closeAfterLinkClick(link, onClose) {
+    if (!isValidElement(link)) {
+        return link;
+    }
+    const originalOnClick = link.props.onClick;
+    return cloneElement(link, {
+        onClick: (event) => {
+            originalOnClick?.(event);
+            onClose();
+        },
+    });
 }
-function ModuleDrawer({ open, onClose, module, }) {
-    if (!module)
+function ModuleDrawer({ open, onClose, module, renderCtx, }) {
+    const items = module?.items ?? [];
+    if (!module || (items.length === 0 && !module.render))
         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) => {
+    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 }))] }), items.length > 0 && (_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: 16, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.id));
-                    }) })] }) }));
+                    }) })), module.render?.(renderCtx)] }) }));
 }
 function PanelsDrawer({ open, onClose, panelViews, defaultView, renderCtx, }) {
     const ctx = useMedaShell();

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { type PanelViewRegistration } from './shell-provider.js';
+import type { PanelView } from './types.js';
+export interface PanelViewsProviderProps {
+    views: PanelView[];
+    defaultView?: string;
+    children: ReactNode;
+}
+export interface ResolvedPanelViews {
+    panelViews: PanelView[];
+    defaultView?: string;
+}
+export declare function mergePanelViews(staticViews: PanelView[] | undefined, registrations: PanelViewRegistration[], staticDefaultView?: string): ResolvedPanelViews;
+export declare function useResolvedPanelViews(staticViews?: PanelView[], staticDefaultView?: string): ResolvedPanelViews;
+export declare function PanelViewsProvider({ views, defaultView, children }: PanelViewsProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/panel-views-provider.js

@@ -0,0 +1,56 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef } from 'react';
+import { useMedaShell } from './shell-provider.js';
+export function mergePanelViews(staticViews = [], registrations, staticDefaultView) {
+    const panelViews = [];
+    for (const view of staticViews) {
+        panelViews.push(view);
+    }
+    let defaultView = staticDefaultView;
+    for (const registration of registrations) {
+        for (const view of registration.views) {
+            const previousIndex = panelViews.findIndex((existingView) => existingView.id === view.id);
+            if (previousIndex >= 0) {
+                panelViews.splice(previousIndex, 1);
+            }
+            panelViews.push(view);
+        }
+        if (registration.defaultView !== undefined) {
+            defaultView = registration.defaultView;
+        }
+    }
+    return defaultView === undefined ? { panelViews } : { panelViews, defaultView };
+}
+export function useResolvedPanelViews(staticViews = [], staticDefaultView) {
+    const { panelViews } = useMedaShell();
+    return useMemo(() => mergePanelViews(staticViews, panelViews.registrations, staticDefaultView), [staticViews, panelViews.registrations, staticDefaultView]);
+}
+function getPanelViewsSignature(views) {
+    return views.map((view) => `${view.id}\u001f${view.label}`).join('\u001e');
+}
+export function PanelViewsProvider({ views, defaultView, children }) {
+    const { register } = useMedaShell().panelViews;
+    const registrationId = useId();
+    const latestViewsRef = useRef(views);
+    latestViewsRef.current = views;
+    const viewsSignature = getPanelViewsSignature(views);
+    const registeredViewsRef = useRef(null);
+    if (registeredViewsRef.current?.signature !== viewsSignature) {
+        registeredViewsRef.current = {
+            signature: viewsSignature,
+            views: views.map((view) => ({
+                id: view.id,
+                label: view.label,
+                icon: view.icon,
+                render: (ctx) => latestViewsRef.current.find((currentView) => currentView.id === view.id)?.render(ctx) ??
+                    null,
+            })),
+        };
+    }
+    const registeredViews = registeredViewsRef.current.views;
+    useLayoutEffect(() => {
+        return register(registrationId, registeredViews, defaultView);
+    }, [register, registrationId, registeredViews, defaultView]);
+    return _jsx(_Fragment, { children: children });
+}

package/dist/shell/primitives.d.ts

@@ -0,0 +1,9 @@
+export type { ShellStorageAdapter } from './layout-state.js';
+export { createLocalStorageAdapter } from './layout-state.js';
+export type { PanelViewsProviderProps } from './panel-views-provider.js';
+export { PanelViewsProvider } from './panel-views-provider.js';
+export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
+export type { MedaShellProviderProps } from './shell-provider.js';
+export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+export type { AppDefinition, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
+export { useShellViewport } from './use-shell-viewport.js';

package/dist/shell/primitives.js

@@ -0,0 +1,7 @@
+// State and layout primitives for consumers that want Meda shell behavior
+// without importing the full styled shell barrel.
+export { createLocalStorageAdapter } from './layout-state.js';
+export { PanelViewsProvider } from './panel-views-provider.js';
+export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
+export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+export { useShellViewport } from './use-shell-viewport.js';

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

@@ -1,3 +1,4 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { PanelMode, PanelView } from './types.js';
 export interface RightPanelProps {
     /** Views to render as tabs in the panel header. */
@@ -10,6 +11,16 @@ export interface RightPanelProps {
      * If only ['panel'], the cycle button is hidden.
      */
     modes?: PanelMode[];
+    renderTab?: (args: RightPanelTabRenderArgs) => ReactNode;
     className?: string;
 }
-export declare function RightPanel({ panelViews, defaultView, modes, className, }: RightPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export interface RightPanelTabRenderArgs {
+    view: PanelView;
+    isActive: boolean;
+    buttonProps: RightPanelTabButtonProps;
+    children: ReactNode;
+}
+export type RightPanelTabButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    'data-active'?: boolean;
+};
+export declare function RightPanel({ panelViews, defaultView, modes, renderTab, className, }: RightPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/right-panel.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * RightPanel — spec §12
  *
@@ -16,8 +16,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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 { Fragment, useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
+import { useResolvedPanelViews } from './panel-views-provider.js';
 import { useMedaShell } from './shell-provider.js';
 import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
@@ -25,6 +26,7 @@ import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
 const MIN_WIDTH = 300;
 const MAX_WIDTH = 520;
+const EMPTY_PANEL_VIEWS = [];
 function ResizeHandle({ currentWidth, onResize, onCommit }) {
     const startWidthRef = useRef(currentWidth);
     const startXRef = useRef(0);
@@ -61,17 +63,28 @@ function ResizeHandle({ currentWidth, onResize, onCommit }) {
 // ---------------------------------------------------------------------------
 // RightPanel
 // ---------------------------------------------------------------------------
-export function RightPanel({ panelViews = [], defaultView, modes = ['panel', 'expanded', 'fullscreen'], className, }) {
+export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes = ['panel', 'expanded', 'fullscreen'], renderTab, 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
+    const { panelViews: resolvedPanelViews, defaultView: resolvedDefaultView } = useResolvedPanelViews(panelViews, defaultView);
+    const hydratedDefaultRef = useRef(null);
+    // Hydrate a default when static or route-registered views become available.
     useEffect(() => {
-        if (!activeView && defaultView) {
-            setActiveView(defaultView);
+        const defaultExists = resolvedDefaultView != null &&
+            resolvedPanelViews.some((view) => view.id === resolvedDefaultView);
+        if (!defaultExists)
+            return;
+        const source = resolvedDefaultView !== defaultView ? 'registered' : 'static';
+        const canReplaceStaticDefault = activeView === hydratedDefaultRef.current?.id &&
+            hydratedDefaultRef.current.source === 'static' &&
+            source === 'registered' &&
+            activeView !== resolvedDefaultView;
+        if (!activeView || canReplaceStaticDefault) {
+            hydratedDefaultRef.current = { id: resolvedDefaultView, source };
+            setActiveView(resolvedDefaultView);
         }
-    }, []);
+    }, [activeView, defaultView, resolvedDefaultView, resolvedPanelViews, setActiveView]);
     // Local display width tracks pointer-move updates live;
     // setWidth (persist) is called on pointerUp.
     const [displayWidth, setDisplayWidth] = useState(null);
@@ -109,18 +122,30 @@ export function RightPanel({ panelViews = [], defaultView, modes = ['panel', 'ex
     })();
     // 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 activePanelView = resolvedPanelViews.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) => {
+    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: resolvedPanelViews.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
+                                const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: view.label })] }));
+                                const buttonProps = {
+                                    type: 'button',
+                                    'aria-current': isActive ? 'true' : undefined,
+                                    'data-active': isActive || 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));
+                                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'),
+                                    children,
+                                };
+                                if (renderTab) {
+                                    return (_jsx(Fragment, { children: renderTab({ view, isActive, buttonProps, children }) }, view.id));
+                                }
+                                return _jsx("button", { ...buttonProps }, 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 }))] })) }));
 }