@medalsocial/meda 1.1.2 → 1.3.0

package/dist/list/list-row.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../components/ui/checkbox.js';
+import { cn } from '../lib/utils.js';
+/**
+ * A Linear-style list row with checkbox, hover states, and click handling.
+ * Compact ~40-48px height for dense, scannable lists.
+ */
+export function ListRow({ selected, selectionActive, onSelect, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, focused, children, className, }) {
+    const isInteractive = !!onClick;
+    const interactiveProps = isInteractive
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onClick,
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onClick?.();
+                }
+            },
+        }
+        : {};
+    return (_jsxs("div", { ...interactiveProps, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, className: cn('group relative flex items-center gap-3 border-border border-b px-3 py-2.5', 'transition-all duration-150', isInteractive && 'cursor-pointer hover:bg-accent/50', isInteractive &&
+            "before:absolute before:inset-y-0 before:left-0 before:w-[2px] before:scale-y-0 before:bg-primary before:transition-transform before:duration-150 before:content-['']", isInteractive && 'hover:before:scale-y-100', isInteractive && 'focus-within:bg-accent/30 focus-within:before:scale-y-100', selected && isInteractive && 'before:!scale-y-100 bg-accent', selected && !isInteractive && 'bg-accent', focused &&
+            isInteractive &&
+            'before:!scale-y-100 bg-accent/30 ring-1 ring-primary/50 ring-inset', focused && !isInteractive && 'bg-accent/30 ring-1 ring-primary/50 ring-inset', className), children: [onSelect && (_jsx("div", { className: "w-6 flex-shrink-0", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected, onClick: (e) => {
+                        e.preventDefault();
+                        onSelect(!selected, e.shiftKey);
+                    }, className: cn('transition-opacity', selectionActive || selected
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100') }) })), children] }));
+}
+export function ListCell({ width = 'flex-1', shrink = true, align = 'left', children, className, }) {
+    return (_jsx("div", { className: cn(width, shrink === false && 'flex-shrink-0', align === 'center' && 'text-center', align === 'right' && 'text-right', 'min-w-0', // Allow truncation
+        className), children: children }));
+}

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/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

@@ -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,7 +113,7 @@ 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'
@@ -123,5 +124,5 @@ export function ContextRail({ appId: _appId, module, hidden = false, collapsible
                                 return renderLink({ item, isActive, className: klass, children: inner });
                             }
                             return (_jsx("a", { href: item.to, "aria-current": isActive ? 'page' : undefined, className: klass, children: inner }, item.id));
-                        }) })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
+                        }) })), module.render?.({ workspaceId: ctx.workspace.id, appId })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
 }

package/dist/shell/drag-mode-banner.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for DragModeBanner.
+ *
+ * **Important:** This component uses `useDndMonitor` internally and must be
+ * rendered inside the same `<DndContext>` tree it is monitoring.
+ *
+ * **Known limitation:** The ESC chip is decorative only. Keyboard-initiated
+ * drags cancel naturally via dnd-kit's KeyboardSensor; pointer-initiated drags
+ * require the user to release outside any drop zone — a manual ESC handler for
+ * pointer drags is not yet implemented.
+ */
+export interface DragModeBannerProps {
+    /** Banner message shown while a drag is active. */
+    message: ReactNode;
+    /**
+     * When provided, render an ESC chip indicating the user can press Escape to
+     * cancel. See known limitation note above.
+     */
+    cancelKey?: 'ESC';
+    /**
+     * Optional predicate; when supplied only activates the banner for matching
+     * drag ids. Receives the `active.id` of the current drag.
+     */
+    isActive?: (activeId: string | number) => boolean;
+    className?: string;
+}
+export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace DragModeBanner {
+    var displayName: string;
+}

package/dist/shell/drag-mode-banner.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function DragModeBanner({ message, cancelKey, isActive, className }) {
+    const [activeId, setActiveId] = useState(null);
+    useDndMonitor({
+        onDragStart: (e) => setActiveId(e.active.id),
+        onDragEnd: () => setActiveId(null),
+        onDragCancel: () => setActiveId(null),
+    });
+    if (activeId == null)
+        return null;
+    if (isActive && !isActive(activeId))
+        return null;
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn('pointer-events-none flex items-center justify-center gap-3 px-4 py-2 text-sm text-muted-foreground', className), children: [_jsx("span", { children: message }), cancelKey === 'ESC' && (_jsx("kbd", { className: "rounded border border-border bg-muted px-1.5 py-0.5 font-medium font-mono text-xs", children: "ESC" }))] }));
+}
+DragModeBanner.displayName = 'DragModeBanner';

package/dist/shell/index.d.ts

@@ -2,11 +2,19 @@ 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 type { DragModeBannerProps } from './drag-mode-banner.js';
+export { DragModeBanner } from './drag-mode-banner.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 { 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';
+export { RailDropZones } from './rail-drop-zones.js';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
 export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-header.js';

package/dist/shell/index.js

@@ -8,6 +8,8 @@ export { AppShell, AppShellBody } from './app-shell.js';
 // Command palette
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
 export { ContextRail } from './context-rail.js';
+// Drag-and-drop utilities
+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
@@ -16,7 +18,10 @@ export { IconRail, RailDivider } from './icon-rail.js';
 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';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
 // Header (and its individual children for advanced composition)

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,52 @@ 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 })] }));
+    if (renderLink) {
+        return closeAfterLinkClick(renderLink({
+            item,
+            isActive,
+            className: cn(menuItemClassName, isActive && 'bg-accent text-foreground'),
+            children,
+        }), onClose);
+    }
+    return (_jsx("a", { href: item.to, onClick: onClose, className: menuItemClassName, children: children }));
+}
+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/rail-drop-slot.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode, type Ref } from 'react';
+/**
+ * Describes the slot's current relation to an active drag operation.
+ *
+ * - `'idle'`     — no drag in progress.
+ * - `'active'`   — a drag is in progress and this slot would accept it, but
+ *                  the cursor is not currently over this slot.
+ * - `'over'`     — the dragged item is hovering over this slot and it would
+ *                  accept the drop.
+ * - `'rejected'` — the dragged item is hovering over this slot but the slot
+ *                  cannot accept it (disabled or `accepts` returns false), OR
+ *                  the slot is `disabled` while any drag is active.
+ */
+export type RailDropSlotState = 'idle' | 'active' | 'over' | 'rejected';
+export interface RailDropSlotProps {
+    /** Stable id used by dnd-kit; also rendered as `data-slot-id`. */
+    id: string;
+    /** Decide whether this slot accepts the dragged card. */
+    accepts?: (activeId: string) => boolean;
+    /** Whether this slot can currently receive a drop (e.g. capacity, online). */
+    disabled?: boolean;
+    /**
+     * Static content. Mutually exclusive with `render`.
+     * Use `render` when you need state-aware content.
+     */
+    children?: ReactNode;
+    /**
+     * State-aware content factory. Receives the slot's current `RailDropSlotState`
+     * so you can render different UI for idle / active / over / rejected states.
+     * Mutually exclusive with `children`.
+     */
+    render?: (state: RailDropSlotState) => ReactNode;
+    className?: string;
+    /** Visible label for assistive tech. */
+    ariaLabel?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RailDropSlot {
+    var displayName: string;
+}

package/dist/shell/rail-drop-slot.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }) {
+    const { isOver, active, setNodeRef } = useDroppable({
+        id,
+        disabled,
+        data: { type: 'rail-drop-slot' },
+    });
+    const [globalDragActive, setGlobalDragActive] = useState(false);
+    useDndMonitor({
+        onDragStart: () => setGlobalDragActive(true),
+        onDragEnd: () => setGlobalDragActive(false),
+        onDragCancel: () => setGlobalDragActive(false),
+    });
+    const wouldAccept = !disabled && (!accepts || (active?.id != null && accepts(String(active.id))));
+    let state;
+    if (isOver && wouldAccept) {
+        state = 'over';
+    }
+    else if (isOver && !wouldAccept) {
+        state = 'rejected';
+    }
+    else if (globalDragActive && disabled) {
+        state = 'rejected';
+    }
+    else if (globalDragActive && wouldAccept) {
+        state = 'active';
+    }
+    else {
+        state = 'idle';
+    }
+    // Legacy boolean aliases kept for backward-compat data attributes
+    const showHover = state === 'over';
+    const showRejected = state === 'rejected';
+    return (_jsx("section", { ref: (el) => {
+            setNodeRef(el);
+            if (typeof ref === 'function')
+                ref(el);
+            else if (ref)
+                ref.current = el;
+        }, "data-slot-id": id, "data-state": state, "aria-label": ariaLabel, "aria-disabled": disabled || undefined, className: cn('relative rounded-lg border border-border bg-card transition-all duration-150', state === 'idle' && '', state === 'active' && 'border-dashed border-primary/60 bg-primary/5', state === 'over' &&
+            'border-primary bg-primary/5 ring-2 ring-primary/30 shadow-[0_0_0_4px_hsl(var(--primary)/0.1)]', state === 'rejected' && 'border-destructive/40 opacity-60', 
+        // Legacy classes — keep working for consumers using data-state selectors
+        showHover && '', showRejected && '', disabled && state === 'idle' && 'opacity-60', className), children: render ? render(state) : children }));
+}
+RailDropSlot.displayName = 'RailDropSlot';

package/dist/shell/rail-drop-zones.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+export interface RailDropZonesProps {
+    /** Section title — uppercased in the header. Defaults to "Drop zones". */
+    title?: string;
+    /** Subtitle shown under the title (e.g. "Eligible machines for ENG-405 · claude"). */
+    subtitle?: ReactNode;
+    /** Count badge rendered in the header corner, e.g. "3 / 4". */
+    count?: ReactNode;
+    /** Optional icon rendered at the start of the header. */
+    icon?: ReactNode;
+    /**
+     * When set, overrides the auto-detected drag-active state. Useful for
+     * Storybook stories that want to demonstrate the active visual without a
+     * real drag in progress.
+     */
+    forceActive?: boolean;
+    /**
+     * Optional predicate; when supplied only activates the rail outline for
+     * matching drag ids. Receives `active.id` of the current drag.
+     */
+    isActive?: (activeId: string | number) => boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RailDropZones {
+    var displayName: string;
+}

package/dist/shell/rail-drop-zones.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function RailDropZones({ title = 'Drop zones', subtitle, count, icon, forceActive, isActive, children, className, }) {
+    const [activeId, setActiveId] = useState(null);
+    useDndMonitor({
+        onDragStart: (e) => setActiveId(e.active.id),
+        onDragEnd: () => setActiveId(null),
+        onDragCancel: () => setActiveId(null),
+    });
+    const auto = activeId != null && (!isActive || isActive(activeId));
+    const active = forceActive ?? auto;
+    return (_jsxs("section", { "data-active": active || undefined, className: cn('flex flex-col gap-3 rounded-lg border border-transparent p-3 transition-colors', active && 'border-2 border-dashed border-primary/60 bg-primary/5', className), children: [(title || subtitle || count) && (_jsxs("header", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [icon && _jsx("span", { className: "text-primary", children: icon }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [title && (_jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: title })), subtitle && _jsx("span", { className: "text-muted-foreground text-xs", children: subtitle })] })] }), count && _jsx("span", { className: "text-muted-foreground text-xs", children: count })] })), _jsx("div", { className: "flex flex-col gap-2", children: children })] }));
+}
+RailDropZones.displayName = 'RailDropZones';