@medalsocial/meda 2.5.2 → 2.6.0

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { AppShellAppTabsConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig, ShellMainLayout } from './types.js';
+import type { AppShellAppTabsConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellMobileNavConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig, ShellMainLayout } from './types.js';
 export interface AppShellWorkspaceProps {
     iconRail?: AppShellIconRailConfig;
     contextRail?: AppShellContextRailConfig;
@@ -19,6 +19,12 @@ export interface AppShellWorkspaceProps {
      * app ships its own palette.
      */
     builtInCommandPalette?: boolean;
+    /**
+     * Opt-in mobile dock + workspace sheet. When provided, the mobile viewport
+     * renders a floating dock + one workspace sheet instead of the legacy
+     * bottom-nav + four drawers. Omit to keep the legacy mobile nav.
+     */
+    mobileNav?: AppShellMobileNavConfig;
     children: ReactNode;
 }
-export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, banners, mainLayout, mainClassName, builtInCommandPalette, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, banners, mainLayout, mainClassName, builtInCommandPalette, mobileNav, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,23 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { LayoutGrid, Menu, PanelTop, Sparkles } from 'lucide-react';
 import { useContext } from 'react';
+import { cn } from '../lib/utils.js';
 import { CommandPalette, CommandRegistryContext } from './command-palette.js';
 import { ContextRail } from './context-rail.js';
 import { IconRail } from './icon-rail.js';
 import { MobileBottomNav } from './internal/mobile-bottom-nav.js';
+import { MobileDock } from './internal/mobile-dock.js';
 import { MobileDrawers } from './internal/mobile-drawers.js';
 import { MobileHeader } from './internal/mobile-header.js';
+import { MobileWorkspaceSheet } from './internal/mobile-workspace-sheet.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, workspace, appTabs, globalActions, headerCenter, headerLeading, banners, mainLayout, mainClassName, builtInCommandPalette = true, children, }) {
+export function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, banners, mainLayout, mainClassName, builtInCommandPalette = true, mobileNav, children, }) {
     const viewport = useShellViewport();
     const isMobile = viewport === 'mobile';
     const staticPanelViews = rightPanel?.panelViews ?? EMPTY_PANEL_VIEWS;
@@ -39,7 +42,9 @@ export function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace
     // <AppShell> wrapper already enforces h-screen for the workspace variant, so
     // nested viewport-height divs collapse cleanly — no double-scroll.
     const commandRegistry = useContext(CommandRegistryContext);
-    const shell = (_jsxs("div", { className: "flex h-svh flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions, headerCenter: headerCenter })) : (_jsx(ShellHeader, { globalActions: globalActions, headerCenter: headerCenter, headerLeading: headerLeading, appTabsRenderLink: appTabs?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, showPanelToggle: resolvedRightPanel.panelViews.length > 0, panelViews: resolvedRightPanel.panelViews })), banners ? (_jsx("div", { "data-meda-banners": "", className: "flex-shrink-0", children: banners })) : (false), _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, labelVisibility: iconRail.labelVisibility })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId, renderLink: contextRail.renderLink, header: contextRail.header, scroll: contextRail.scroll })), _jsx(ShellMain, { layout: mainLayout ?? 'workspace', className: mainClassName, 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, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, module: contextRail?.module, moduleAppId: contextRail?.appId, moduleActiveItemId: contextRail?.activeItemId, moduleRenderLink: contextRail?.renderLink, moduleHeader: contextRail?.header, moduleScroll: contextRail?.scroll, sectionTabs: headerLeading, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }));
+    const shell = (_jsxs("div", { className: "flex h-svh flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions, headerCenter: headerCenter })) : (_jsx(ShellHeader, { globalActions: globalActions, headerCenter: headerCenter, headerLeading: headerLeading, appTabsRenderLink: appTabs?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, showPanelToggle: resolvedRightPanel.panelViews.length > 0, panelViews: resolvedRightPanel.panelViews })), banners ? (_jsx("div", { "data-meda-banners": "", className: "flex-shrink-0", children: banners })) : (false), _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, labelVisibility: iconRail.labelVisibility })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId, renderLink: contextRail.renderLink, header: contextRail.header, scroll: contextRail.scroll })), _jsx(ShellMain, { layout: mainLayout ?? 'workspace', className: cn(mainClassName, 
+                        // Pad the scroll area so the floating dock never covers content.
+                        isMobile && mobileNav && 'pb-[calc(env(safe-area-inset-bottom)+80px)]'), children: children }), !isMobile && resolvedRightPanel.panelViews.length > 0 && (_jsx(RightPanel, { panelViews: staticPanelViews, defaultView: rightPanel?.defaultView }))] }), isMobile && mobileNav ? (_jsxs(_Fragment, { children: [_jsx(MobileDock, { items: mobileNav.dock, activeTo: mobileNav.activeTo, renderLink: mobileNav.renderLink }), _jsx(MobileWorkspaceSheet, { tree: mobileNav.tree, activeTo: mobileNav.activeTo, renderLink: mobileNav.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter })] })) : (_jsxs(_Fragment, { children: [isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, menuActiveId: iconRail?.activeId, menuRenderLink: iconRail?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, module: contextRail?.module, moduleAppId: contextRail?.appId, moduleActiveItemId: contextRail?.activeItemId, moduleRenderLink: contextRail?.renderLink, moduleHeader: contextRail?.header, moduleScroll: contextRail?.scroll, sectionTabs: headerLeading, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }))] }));
     // Backwards-compatible default: meda provides the built-in CommandPalette
     // (and its CommandRegistryContext) so consumers calling useCommands()/
     // useCommandGroup() under the workspace shell keep working. When a registry is

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { AppShellAppTabsConfig, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig, ShellMainLayout } from './types.js';
+import type { AppShellAppTabsConfig, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellMobileNavConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig, ShellMainLayout } from './types.js';
 interface AppShellBaseProps {
     children: ReactNode;
     className?: string;
@@ -58,6 +58,11 @@ export type AppShellProps = AppShellBaseProps & ({
      * host app ships its own command palette to avoid a duplicate dialog.
      */
     builtInCommandPalette?: boolean;
+    /**
+     * Opt-in mobile dock + workspace sheet (replaces the legacy bottom-nav
+     * + four drawers on the mobile viewport). Omit for the legacy nav.
+     */
+    mobileNav?: AppShellMobileNavConfig;
 } | {
     variant: 'chat';
     globalActions?: ReactNode;

package/dist/shell/app-shell.js

@@ -16,7 +16,7 @@ export function AppShell(props) {
         case 'auth':
             return wrapper(_jsx(AppShellAuth, { ...resolveAuthConfig(props), children: props.children }));
         case 'workspace':
-            return wrapper(_jsx(AppShellWorkspace, { iconRail: props.iconRail, contextRail: props.contextRail, rightPanel: props.rightPanel, workspace: props.workspace, appTabs: props.appTabs, globalActions: props.globalActions, headerCenter: props.headerCenter, headerLeading: props.headerLeading, banners: props.banners, mainLayout: props.mainLayout, mainClassName: props.mainClassName, builtInCommandPalette: props.builtInCommandPalette, children: props.children }));
+            return wrapper(_jsx(AppShellWorkspace, { iconRail: props.iconRail, contextRail: props.contextRail, rightPanel: props.rightPanel, workspace: props.workspace, appTabs: props.appTabs, globalActions: props.globalActions, headerCenter: props.headerCenter, headerLeading: props.headerLeading, banners: props.banners, mainLayout: props.mainLayout, mainClassName: props.mainClassName, builtInCommandPalette: props.builtInCommandPalette, mobileNav: props.mobileNav, children: props.children }));
         case 'chat':
             return wrapper(_jsx(AppShellChat, { globalActions: props.globalActions, children: props.children }));
     }

package/dist/shell/icon-rail.js

@@ -1,48 +1,76 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, 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
 // ---------------------------------------------------------------------------
+// Short-viewport scaling: below 850px viewport height items compact (smaller
+// icon frame, tighter spacing, smaller label); below 700px labels hide so the
+// rail degrades to icon-only. The rail additionally scrolls (see railClass) as
+// the hard guarantee that every item stays reachable on any height.
 function itemClass(isActive, labelVisibility) {
     if (labelVisibility === 'visible') {
-        return cn('group relative flex min-h-[4rem] w-full flex-col items-center justify-start gap-1 px-1 py-1 text-center transition-colors', isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground');
+        return cn('group relative flex min-h-[4rem] w-full shrink-0 flex-col items-center justify-start gap-1 px-1 py-1 text-center transition-colors', '[@media(max-height:850px)]:min-h-[3.25rem] [@media(max-height:850px)]:gap-0.5', '[@media(max-height:700px)]:min-h-0', isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground');
     }
-    return cn('group relative flex h-11 w-11 items-center justify-center rounded-xl transition-colors', isActive
+    return cn('group relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl transition-colors', '[@media(max-height:700px)]:h-9 [@media(max-height:700px)]:w-9', isActive
         ? 'bg-primary text-primary-foreground shadow-sm ring-2 ring-primary/60'
         : 'text-muted-foreground hover:bg-accent hover:text-foreground');
 }
 function iconFrameClass(isActive) {
-    return cn('relative inline-flex h-11 w-11 items-center justify-center rounded-xl transition-colors', isActive
+    return cn('relative inline-flex h-11 w-11 items-center justify-center rounded-xl transition-colors', '[@media(max-height:850px)]:h-9 [@media(max-height:850px)]:w-9', isActive
         ? 'bg-primary text-primary-foreground shadow-sm ring-2 ring-primary/60'
         : 'group-hover:bg-accent group-hover:text-foreground');
 }
 function railClass(labelVisibility, className) {
-    return cn('flex h-full shrink-0 flex-col items-center bg-shell-rail', labelVisibility === 'visible'
-        ? 'w-[var(--shell-rail-label-width)] px-2 py-4'
-        : 'w-[var(--shell-rail-width)] py-3.5', className);
+    return cn('flex h-full shrink-0 flex-col items-center bg-shell-rail', 
+    // Hard reachability guarantee on short viewports: the rail scrolls when the
+    // compact tiers still can't fit every item. Scrollbar is hidden — wheel,
+    // trackpad, and keyboard focus traversal still scroll the overflow.
+    'min-h-0 overflow-y-auto overflow-x-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', labelVisibility === 'visible'
+        ? 'w-[var(--shell-rail-label-width)] px-2 py-4 [@media(max-height:850px)]:py-2'
+        : 'w-[var(--shell-rail-width)] py-3.5 [@media(max-height:850px)]:py-2', className);
 }
 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" })) }));
+    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 shrink-0 items-center justify-center rounded-md', '[@media(max-height:850px)]:my-1', '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" })) }));
+}
+// Mirrors the [@media(max-height:700px)] CSS tier that hides visible-mode
+// labels, so those items regain a tooltip fallback exactly when their label
+// disappears. SSR-safe: initial false, resolves post-mount.
+function useIsShortViewport() {
+    const [isShort, setIsShort] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const mql = window.matchMedia('(max-height: 700px)');
+        const onChange = () => setIsShort(mql.matches);
+        onChange();
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return isShort;
 }
 // ---------------------------------------------------------------------------
 // IconRail
 // ---------------------------------------------------------------------------
 export function IconRail({ mainItems, utilityItems = [], footer, activeId, renderLink, labelVisibility = 'tooltip', className, }) {
     const band = useShellViewport();
+    const isShortViewport = useIsShortViewport();
     const [pinnedBottom, setPinnedBottom] = useState(true);
     if (band === 'mobile')
         return null;
     const showLabels = labelVisibility === 'visible';
+    // At ≤700px the visible-mode label is hidden by CSS, so items fall back to
+    // tooltip labels like tooltip mode does.
+    const useTooltipFallback = !showLabels || isShortViewport;
     const renderItem = (item) => {
         const isActive = item.id === activeId;
         const klass = itemClass(isActive, labelVisibility);
         const IconComp = item.icon;
-        const inner = showLabels ? (_jsxs(_Fragment, { children: [_jsxs("span", { "data-slot": "icon-rail-icon-frame", className: iconFrameClass(isActive), children: [_jsx(IconComp, { size: 26, "aria-hidden": "true" }), item.badge ? _jsx("span", { className: "absolute right-1 top-1", children: item.badge }) : null] }), _jsx("span", { "data-slot": "icon-rail-label", className: "max-w-full truncate text-[12px] leading-4", children: item.label })] })) : (_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 inner = showLabels ? (_jsxs(_Fragment, { children: [_jsxs("span", { "data-slot": "icon-rail-icon-frame", className: iconFrameClass(isActive), children: [_jsx(IconComp, { size: 26, "aria-hidden": "true", className: "[@media(max-height:850px)]:size-5" }), item.badge ? _jsx("span", { className: "absolute right-1 top-1", children: item.badge }) : null] }), _jsx("span", { "data-slot": "icon-rail-label", className: "max-w-full truncate text-[12px] leading-4 [@media(max-height:850px)]:text-[11px] [@media(max-height:700px)]:hidden", children: item.label })] })) : (_jsxs(_Fragment, { children: [_jsx(IconComp, { size: 22, "aria-hidden": "true", className: "[@media(max-height:700px)]:size-[18px]" }), item.badge ? _jsx("span", { className: "absolute right-1 top-1", children: item.badge }) : null] }));
         const linkProps = {
             href: item.to,
             'aria-label': item.label,
@@ -54,10 +82,10 @@ export function IconRail({ mainItems, utilityItems = [], footer, activeId, rende
         // renderLink consumers receive the className so they can apply it themselves
         renderLink({ item, isActive, className: klass, children: inner, linkProps })) : (_jsx("a", { ...linkProps }));
         const trigger = (_jsx("span", { "data-testid": `icon-rail-trigger-${item.id}`, className: klass, children: linkContent }));
-        if (showLabels) {
+        if (!useTooltipFallback) {
             return _jsx(Fragment, { children: trigger }, item.id);
         }
         return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: trigger }), _jsx(TooltipContent, { side: "right", children: item.label })] }, item.id));
     };
-    return (_jsx(TooltipProvider, { children: _jsxs("nav", { "data-testid": "icon-rail", "aria-label": "Primary", className: railClass(labelVisibility, className), children: [_jsx("div", { className: cn('flex flex-col items-center', showLabels ? 'w-full gap-1' : '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', showLabels ? 'w-full gap-1' : 'gap-1', pinnedBottom && 'mt-auto'), children: utilityItems.map(renderItem) })] })), footer && (_jsx("div", { className: cn('pt-3', pinnedBottom || utilityItems.length === 0 ? 'mt-auto' : ''), children: footer }))] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs("nav", { "data-testid": "icon-rail", "aria-label": "Primary", className: railClass(labelVisibility, className), children: [_jsx("div", { className: cn('flex shrink-0 flex-col items-center', showLabels ? 'w-full gap-1' : '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 shrink-0 flex-col items-center', showLabels ? 'w-full gap-1' : 'gap-1', pinnedBottom && 'mt-auto'), children: utilityItems.map(renderItem) })] })), footer && (_jsx("div", { className: cn('shrink-0 pt-3 [@media(max-height:850px)]:pt-1.5', pinnedBottom || utilityItems.length === 0 ? 'mt-auto' : ''), children: footer }))] }) }));
 }

package/dist/shell/index.d.ts

@@ -27,5 +27,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, AppShellAppTabsConfig, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellVariant, AppShellWorkspaceConfig, AppTabRenderLinkArgs, CommandDefinition, ContextItem, ContextModule, ContextRailHeader, ContextRailScroll, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, WorkspaceMenuItem, } from './types.js';
+export type { AppDefinition, AppShellAppTabsConfig, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellMobileNavConfig, AppShellRightPanelConfig, AppShellVariant, AppShellWorkspaceConfig, AppTabRenderLinkArgs, CommandDefinition, ContextItem, ContextModule, ContextRailHeader, ContextRailScroll, MobileBottomNavItem, MobileDockItem, MobileNavGroup, MobileNavItem, MobileNavLinkArgs, MobileNavTree, MobileNavView, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, WorkspaceMenuItem, } from './types.js';
 export { useShellViewport } from './use-shell-viewport.js';

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { MobileDockItem, MobileNavLinkArgs } from '../types.js';
+/** The key the workspace sheet listens on (reuses the single mobile-drawer state). */
+export declare const WORKSPACE_SHEET_KEY = "workspace-sheet";
+export interface MobileDockProps {
+    items: MobileDockItem[];
+    activeTo?: string;
+    renderLink?: (args: MobileNavLinkArgs) => ReactNode;
+    className?: string;
+}
+/**
+ * Floating mobile dock — a pill of pinned destinations plus a workspace-sheet
+ * trigger, with any `emphasis: 'brand'` item rendered as a standalone circle
+ * (e.g. Pilot) beside the pill. Replaces the bordered bottom bar. Hidden on
+ * non-mobile viewports and when the right panel is fullscreen.
+ */
+export declare function MobileDock({ items, activeTo, renderLink, className }: MobileDockProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, isValidElement } from 'react';
+import { cn } from '../../lib/utils.js';
+import { useMedaShell } from '../shell-provider.js';
+import { useShellViewport } from '../use-shell-viewport.js';
+/** The key the workspace sheet listens on (reuses the single mobile-drawer state). */
+export const WORKSPACE_SHEET_KEY = 'workspace-sheet';
+function renderIcon(icon, size) {
+    if (icon == null)
+        return null;
+    if (isValidElement(icon))
+        return icon;
+    if (typeof icon === 'function' || typeof icon === 'object') {
+        // Lucide component (function) or forwardRef/memo object.
+        return createElement(icon, { size, 'aria-hidden': true });
+    }
+    return null;
+}
+/**
+ * Floating mobile dock — a pill of pinned destinations plus a workspace-sheet
+ * trigger, with any `emphasis: 'brand'` item rendered as a standalone circle
+ * (e.g. Pilot) beside the pill. Replaces the bordered bottom bar. Hidden on
+ * non-mobile viewports and when the right panel is fullscreen.
+ */
+export function MobileDock({ items, activeTo, renderLink, className }) {
+    const ctx = useMedaShell();
+    const band = useShellViewport();
+    if (band !== 'mobile')
+        return null;
+    if (ctx.panel.mode === 'fullscreen')
+        return null;
+    if (items.length === 0)
+        return null;
+    const pillItems = items.filter((item) => item.emphasis !== 'brand');
+    const brandItems = items.filter((item) => item.emphasis === 'brand');
+    const runAction = (item) => {
+        if (item.action === 'open-sheet')
+            ctx.mobileDrawer.setOpen(WORKSPACE_SHEET_KEY);
+        else if (item.action === 'open-ai')
+            ctx.mobileDrawer.setOpen('ai-drawer');
+        else if (item.action === 'open-command-palette')
+            ctx.commandPalette.setOpen(true);
+    };
+    const renderSlot = (item, size) => {
+        const label = typeof item.label === 'function' ? item.label() : item.label;
+        const isActive = Boolean(item.to && activeTo && item.to === activeTo);
+        const icon = renderIcon(item.icon, size);
+        const badge = item.badge ? (_jsx("span", { className: "absolute top-0 right-0 size-2 rounded-full bg-primary ring-2 ring-card" })) : null;
+        // Route link
+        if (item.to && !item.action) {
+            const className = cn('relative flex items-center justify-center rounded-full p-1 transition-colors', isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground');
+            const children = (_jsxs(_Fragment, { children: [icon, badge] }));
+            if (renderLink) {
+                return renderLink({
+                    to: item.to,
+                    isActive,
+                    className,
+                    children,
+                    onNavigate: () => undefined,
+                    linkProps: {
+                        href: item.to,
+                        className,
+                        'aria-label': label,
+                        'aria-current': isActive ? 'page' : undefined,
+                    },
+                });
+            }
+            return (_jsx("a", { href: item.to, className: className, "aria-label": label, "aria-current": isActive ? 'page' : undefined, children: children }));
+        }
+        // Action slot
+        return (_jsxs("button", { type: "button", onClick: () => runAction(item), "aria-label": label, className: "relative flex items-center justify-center rounded-full p-1 text-muted-foreground transition-colors hover:text-foreground", children: [icon, badge] }));
+    };
+    return (_jsxs("div", { "data-testid": "mobile-dock", className: cn('pointer-events-none absolute inset-x-0 bottom-0 z-30 flex items-center justify-center gap-2.5 pb-[calc(env(safe-area-inset-bottom)+12px)] pt-2', className), children: [_jsx("nav", { "aria-label": "Dock", className: "pointer-events-auto flex items-center gap-[18px] rounded-full border border-border bg-card px-4 py-2.5 shadow-[0_6px_20px_rgba(20,18,60,0.14)]", children: pillItems.map((item) => (_jsx("span", { className: "flex", children: renderSlot(item, 22) }, item.id))) }), brandItems.map((item) => (_jsx("span", { className: "pointer-events-auto flex size-11 items-center justify-center rounded-full bg-[#5B2D8C] text-white shadow-[0_6px_20px_rgba(91,45,140,0.35)]", children: renderSlot(item, 22) }, item.id)))] }));
+}

package/dist/shell/internal/mobile-workspace-sheet.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { MobileNavLinkArgs, MobileNavTree, WorkspaceMenuItem } from '../types.js';
+export interface MobileWorkspaceSheetProps {
+    tree: MobileNavTree;
+    activeTo?: string;
+    renderLink?: (args: MobileNavLinkArgs) => ReactNode;
+    workspaceMenuItems?: WorkspaceMenuItem[];
+    workspaceMenuFooter?: ReactNode;
+}
+/**
+ * The one mobile workspace sheet — a calm, scannable list of the whole nav
+ * tree that replaces the four drawers. Modules are light group labels,
+ * submodules are rows: a `›` navigates, a `⌄` reveals a slim chip row of
+ * preset views (accordion, one open at a time). Filters, layout, and saved
+ * views deliberately stay on the page, not here. Opened from the dock's
+ * workspace-selector slot; a workspace header on top surfaces the account menu.
+ */
+export declare function MobileWorkspaceSheet({ tree, activeTo, renderLink, workspaceMenuItems, workspaceMenuFooter, }: MobileWorkspaceSheetProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/internal/mobile-workspace-sheet.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, ChevronUp, Monitor, Moon, Search, Sun, } from 'lucide-react';
+import { createElement, Fragment, isValidElement, useState } 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';
+import { useTheme } from '../theme.js';
+import { WORKSPACE_SHEET_KEY } from './mobile-dock.js';
+function renderIcon(icon, size) {
+    if (icon == null)
+        return null;
+    if (isValidElement(icon))
+        return icon;
+    if (typeof icon === 'function' || typeof icon === 'object') {
+        return createElement(icon, { size, 'aria-hidden': true });
+    }
+    return null;
+}
+const rowClass = 'flex w-full items-center gap-3 rounded-[10px] px-2 py-2.5 text-left text-[13.5px] transition-colors hover:bg-accent';
+/**
+ * The one mobile workspace sheet — a calm, scannable list of the whole nav
+ * tree that replaces the four drawers. Modules are light group labels,
+ * submodules are rows: a `›` navigates, a `⌄` reveals a slim chip row of
+ * preset views (accordion, one open at a time). Filters, layout, and saved
+ * views deliberately stay on the page, not here. Opened from the dock's
+ * workspace-selector slot; a workspace header on top surfaces the account menu.
+ */
+export function MobileWorkspaceSheet({ tree, activeTo, renderLink, workspaceMenuItems, workspaceMenuFooter, }) {
+    const ctx = useMedaShell();
+    const open = ctx.mobileDrawer.open === WORKSPACE_SHEET_KEY;
+    const close = () => ctx.mobileDrawer.setOpen(null);
+    const [expandedId, setExpandedId] = useState(null);
+    const [accountOpen, setAccountOpen] = useState(false);
+    const navLink = (to, label, className, children, isActive) => {
+        if (renderLink) {
+            return renderLink({
+                to,
+                isActive,
+                className,
+                children,
+                onNavigate: close,
+                linkProps: {
+                    href: to,
+                    className,
+                    'aria-label': label,
+                    'aria-current': isActive ? 'page' : undefined,
+                    onClick: close,
+                },
+            });
+        }
+        return (_jsx("a", { href: to, className: className, "aria-label": label, onClick: close, children: children }));
+    };
+    const renderRow = (item) => {
+        const isActive = Boolean(activeTo && item.to === activeTo);
+        const hasViews = Boolean(item.views && item.views.length > 0);
+        const icon = renderIcon(item.icon, 17);
+        const badge = item.badge ? (_jsx("span", { className: "rounded-full bg-accent px-1.5 py-0.5 text-[11px] text-muted-foreground", children: item.badge })) : null;
+        // Plain navigate row — no presets.
+        if (!hasViews) {
+            return navLink(item.to, item.label, cn(rowClass, isActive ? 'text-foreground' : 'text-foreground/90'), _jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: icon }), _jsx("span", { className: "flex-1", children: item.label }), badge, _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground/50", "aria-hidden": "true" })] }), isActive);
+        }
+        // Expandable row — reveals a slim chip row of preset views.
+        const isOpen = expandedId === item.id;
+        return (_jsxs(Fragment, { children: [_jsxs("button", { type: "button", onClick: () => setExpandedId(isOpen ? null : item.id), "aria-expanded": isOpen, className: cn(rowClass, isOpen ? 'text-primary' : 'text-foreground/90'), children: [_jsx("span", { className: cn('shrink-0', isOpen ? 'text-primary' : 'text-muted-foreground'), children: icon }), _jsx("span", { className: "flex-1", children: item.label }), badge, isOpen ? (_jsx(ChevronUp, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }), isOpen ? (_jsx("div", { className: "flex flex-wrap gap-1.5 pt-1 pb-2 pl-[37px]", children: item.views?.map((view) => {
+                        const viewActive = Boolean(activeTo && view.to === activeTo);
+                        return (_jsx(Fragment, { children: navLink(view.to, `${item.label} · ${view.label}`, cn('rounded-full px-3 py-1.5 text-[12px] transition-colors', viewActive
+                                ? 'bg-primary/12 text-primary'
+                                : 'border border-border text-muted-foreground hover:text-foreground'), view.label, viewActive) }, view.id));
+                    }) })) : null] }, item.id));
+    };
+    return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && close(), direction: "bottom", children: _jsxs(DrawerContent, { showOverlay: true, className: "max-h-[86vh] rounded-t-[22px] p-0 data-[vaul-drawer-direction=bottom]:mt-0 data-[vaul-drawer-direction=bottom]:max-h-[86vh]", children: [_jsxs(DrawerHeader, { className: "sr-only", children: [_jsx(DrawerTitle, { children: "Navigation" }), _jsx(DrawerDescription, { children: "Jump to any area of the workspace." })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pt-1 pb-[calc(env(safe-area-inset-bottom)+12px)]", children: [_jsxs("button", { type: "button", onClick: () => setAccountOpen((v) => !v), "aria-expanded": accountOpen, className: "flex w-full items-center gap-2.5 rounded-[10px] px-1.5 py-2 text-left hover:bg-accent", children: [_jsx("span", { className: "inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted ring-1 ring-border/70", children: ctx.workspace.icon }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-sm", children: ctx.workspace.name }), accountOpen ? (_jsx(ChevronUp, { className: "size-4 text-muted-foreground", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }))] }), accountOpen ? (_jsxs("div", { className: "mb-1 flex flex-col gap-0.5 border-b pb-2", children: [workspaceMenuItems?.map((item) => (_jsxs(Fragment, { children: [_jsx(WorkspaceMenuRow, { item: item, onClose: close }), item.separatorAfter ? _jsx("div", { className: "my-1 h-px bg-border" }) : null] }, item.id))), _jsx(ThemeRow, {}), workspaceMenuFooter] })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                close();
+                                ctx.commandPalette.setOpen(true);
+                            }, className: "my-2 flex w-full items-center gap-2 rounded-[10px] border px-3 py-2.5 text-left text-muted-foreground text-sm", children: [_jsx(Search, { className: "size-4", "aria-hidden": "true" }), "Search\u2026"] }), tree.groups.map((group) => (_jsxs("section", { "aria-label": group.label, children: [_jsx("p", { className: "px-2 pt-3 pb-1 text-[11px] text-muted-foreground", children: group.label }), _jsx("div", { className: "flex flex-col gap-0.5", children: group.items.map((item) => (_jsx(Fragment, { children: renderRow(item) }, item.id))) })] }, group.id))), tree.footerItems && tree.footerItems.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mx-2 my-2 h-px bg-border" }), _jsx("div", { className: "flex flex-col gap-0.5", children: tree.footerItems.map((item) => (_jsx(Fragment, { children: renderRow(item) }, item.id))) })] })) : null] })] }) }));
+}
+function WorkspaceMenuRow({ item, onClose }) {
+    const icon = renderIcon(item.icon, 16);
+    const className = cn(rowClass, item.variant === 'destructive' && 'text-destructive');
+    const handleClick = () => {
+        item.onClick?.();
+        onClose();
+    };
+    if (item.href != null) {
+        return (_jsxs("a", { href: item.href, className: className, onClick: handleClick, children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: icon }), item.label] }));
+    }
+    return (_jsxs("button", { type: "button", className: className, onClick: handleClick, children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: icon }), item.label] }));
+}
+const NEXT_THEME = { light: 'dark', dark: 'system', system: 'light' };
+const THEME_ICON = { light: Sun, dark: Moon, system: Monitor };
+const THEME_LABEL = {
+    light: 'Switch to dark theme',
+    dark: 'Switch to system theme',
+    system: 'Switch to light theme',
+};
+function ThemeRow() {
+    const { theme, setTheme } = useTheme();
+    const Icon = THEME_ICON[theme];
+    return (_jsxs("button", { type: "button", className: rowClass, onClick: () => setTheme(NEXT_THEME[theme]), children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: _jsx(Icon, { size: 16, "aria-hidden": "true" }) }), THEME_LABEL[theme]] }));
+}

package/dist/shell/types.d.ts

@@ -58,6 +58,67 @@ export interface MobileBottomNavItem {
     icon: LucideIcon;
     opens: 'menu-drawer' | 'module-drawer' | 'panels-drawer' | 'ai-drawer' | ((close: () => void) => ReactNode);
 }
+/** A pinned slot in the floating dock — a route link or a shell action. */
+export interface MobileDockItem {
+    id: string;
+    label: string | (() => string);
+    icon: LucideIcon | ReactNode;
+    /** Route target — rendered as a nav link via `renderLink`. */
+    to?: string;
+    /** Show an unread/notification dot on the slot. */
+    badge?: boolean;
+    /** Perform a shell action instead of navigating. */
+    action?: 'open-sheet' | 'open-ai' | 'open-command-palette';
+    /** `brand` renders the standalone emphasized circle (e.g. Pilot). */
+    emphasis?: 'brand';
+}
+/** A preset view under a submodule (e.g. Deals → Won) — expands inline. */
+export interface MobileNavView {
+    id: string;
+    label: string;
+    to: string;
+    count?: string | number;
+}
+/** A submodule row in the workspace sheet (e.g. CRM → Deals). */
+export interface MobileNavItem {
+    id: string;
+    label: string;
+    icon?: LucideIcon | ReactNode;
+    to: string;
+    badge?: string | number;
+    /** Preset views that expand inline under this row (accordion). */
+    views?: MobileNavView[];
+}
+/** A module group in the workspace sheet (e.g. CRM). */
+export interface MobileNavGroup {
+    id: string;
+    label: string;
+    icon?: LucideIcon | ReactNode;
+    items: MobileNavItem[];
+}
+/** The full nav tree shown in the workspace sheet. */
+export interface MobileNavTree {
+    groups: MobileNavGroup[];
+    /** Rows below the groups (e.g. Settings). */
+    footerItems?: MobileNavItem[];
+}
+export interface MobileNavLinkArgs {
+    to: string;
+    isActive: boolean;
+    className: string;
+    children: ReactNode;
+    onNavigate: () => void;
+    linkProps: AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+/** Opt-in mobile dock + workspace sheet configuration. */
+export interface AppShellMobileNavConfig {
+    dock: MobileDockItem[];
+    tree: MobileNavTree;
+    /** The `to` of the currently-active row, for highlighting. */
+    activeTo?: string;
+    /** Render dock/sheet targets as router links (else plain `<a>`). */
+    renderLink?: (args: MobileNavLinkArgs) => ReactNode;
+}
 export interface ShellRenderContext {
     workspaceId: string;
     appId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {