@medalsocial/meda 2.4.1 → 2.5.0

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

@@ -8,9 +8,17 @@ export interface AppShellWorkspaceProps {
     appTabs?: AppShellAppTabsConfig;
     globalActions?: ReactNode;
     headerCenter?: ReactNode;
+    headerLeading?: ReactNode;
     banners?: ReactNode;
     mainLayout?: ShellMainLayout;
     mainClassName?: string;
+    /**
+     * Whether to render the built-in `CommandPalette` (providing the
+     * `CommandRegistryContext`) when no registry is already in context. Defaults
+     * to `true` for backwards compatibility; set `false` to opt out when the host
+     * app ships its own palette.
+     */
+    builtInCommandPalette?: boolean;
     children: ReactNode;
 }
-export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, banners, mainLayout, mainClassName, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, banners, mainLayout, mainClassName, builtInCommandPalette, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,7 +14,7 @@ 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, banners, mainLayout, mainClassName, children, }) {
+export function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, banners, mainLayout, mainClassName, builtInCommandPalette = true, children, }) {
     const viewport = useShellViewport();
     const isMobile = viewport === 'mobile';
     const staticPanelViews = rightPanel?.panelViews ?? EMPTY_PANEL_VIEWS;
@@ -39,8 +39,17 @@ 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-screen flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions })) : (_jsx(ShellHeader, { globalActions: globalActions, headerCenter: headerCenter, appTabsRenderLink: appTabs?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter })), 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 })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId, 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, moduleHeader: contextRail?.header, moduleScroll: contextRail?.scroll, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }));
-    return commandRegistry ? shell : _jsx(CommandPalette, { children: shell });
+    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 }))] }));
+    // 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
+    // already present, or the consumer opts out via builtInCommandPalette={false}
+    // (e.g. apps that ship their own palette), render the bare shell to avoid a
+    // duplicate dialog.
+    if (commandRegistry || !builtInCommandPalette) {
+        return shell;
+    }
+    return _jsx(CommandPalette, { children: shell });
 }
 function buildMobileNavItems(contextRail, panelViews) {
     const items = [

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

@@ -32,6 +32,11 @@ export type AppShellProps = AppShellBaseProps & ({
      * application tabs when provided.
      */
     headerCenter?: ReactNode;
+    /**
+     * Optional leading content rendered in the LEFT header region immediately
+     * after the workspace switcher. On mobile, surfaced inside the menu drawer.
+     */
+    headerLeading?: ReactNode;
     /**
      * Optional chrome-level content rendered below the header and above
      * the workspace rail row.
@@ -46,6 +51,13 @@ export type AppShellProps = AppShellBaseProps & ({
      * Optional className for the workspace shell's main scroll region.
      */
     mainClassName?: string;
+    /**
+     * Whether meda renders its built-in `CommandPalette` (and provides the
+     * `CommandRegistryContext`) when no command registry is already present.
+     * Defaults to `true` for backwards compatibility. Set `false` when the
+     * host app ships its own command palette to avoid a duplicate dialog.
+     */
+    builtInCommandPalette?: boolean;
 } | {
     variant: 'chat';
     globalActions?: ReactNode;

package/dist/shell/app-shell.js

@@ -10,13 +10,13 @@ export function AppShell(props) {
     // Auth lets the form scroll past viewport (signup, dense forms, high zoom);
     // workspace and chat fix the chrome to viewport height and let inner regions
     // scroll independently.
-    const heightClass = props.variant === 'auth' ? 'min-h-screen' : 'h-screen overflow-hidden';
+    const heightClass = props.variant === 'auth' ? 'min-h-screen' : 'h-svh overflow-hidden';
     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, { ...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, banners: props.banners, mainLayout: props.mainLayout, mainClassName: props.mainClassName, 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, children: props.children }));
         case 'chat':
             return wrapper(_jsx(AppShellChat, { globalActions: props.globalActions, children: props.children }));
     }
@@ -34,5 +34,5 @@ function resolveAuthConfig(props) {
     };
 }
 export function AppShellBody({ children, className }) {
-    return (_jsx("div", { className: cn('relative flex h-[calc(100vh-var(--shell-header-height))] overflow-hidden', className), children: children }));
+    return (_jsx("div", { className: cn('relative flex h-[calc(100svh-var(--shell-header-height))] overflow-hidden', className), children: children }));
 }

package/dist/shell/context-rail.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * TODO(phase-11): replace pointer-events handle with <ResizableShellPanel>
  * once <AppShellBody> ships as a ResizableShell Group.
  */
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Fragment, useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { useMedaShell } from './shell-provider.js';
@@ -24,11 +24,16 @@ import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
 const MIN_WIDTH = 240;
 const MAX_WIDTH = 420;
-function ResizeHandle({ currentWidth, onResize, onCommit }) {
+function ContextRailSeam({ railId, currentWidth, onResize, onCommit }) {
+    const ctx = useMedaShell();
+    const collapsed = ctx.contextRail.collapsed;
+    const Icon = collapsed ? ChevronRight : ChevronLeft;
     const startWidthRef = useRef(currentWidth);
     const startXRef = useRef(0);
     const draggingRef = useRef(false);
     const handlePointerDown = (e) => {
+        if (collapsed)
+            return; // no resize while collapsed
         // setPointerCapture may not be available in all test environments (jsdom)
         try {
             e.currentTarget.setPointerCapture(e.pointerId);
@@ -53,24 +58,16 @@ function ResizeHandle({ currentWidth, onResize, onCommit }) {
         const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + (e.clientX - startXRef.current)));
         onCommit(next);
     };
-    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize context rail", "aria-valuenow": currentWidth, "aria-valuemin": MIN_WIDTH, "aria-valuemax": MAX_WIDTH, tabIndex: 0, className: cn('absolute top-0 right-0 h-full w-1 cursor-col-resize', 'opacity-0 transition-opacity hover:opacity-100 hover:bg-ring'), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }));
-}
-// ---------------------------------------------------------------------------
-// ContextRailToggle — chevron button that flips ctx.contextRail.collapsed
-// ---------------------------------------------------------------------------
-function ContextRailToggle({ railId }) {
-    const ctx = useMedaShell();
-    const collapsed = ctx.contextRail.collapsed;
-    // Lucide PanelLeft* icons render the chevron-with-wall pattern (similar
-    // to Unifi). The wall reinforces "this is a sidebar toggle" rather than
-    // a generic navigation chevron.
-    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
-    return (_jsx("button", { type: "button", onClick: () => ctx.contextRail.setCollapsed(!collapsed), "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', "aria-expanded": !collapsed, "aria-controls": railId, "data-testid": "context-rail-toggle", className: cn(
-        // Pull-tab: 28w × 40h. Big enough to read the icon at a glance and to
-        // grab confidently — matches Unifi's reference. Flat left edge
-        // attached to the rail (no left border), rounded right. The whole tab
-        // sticks fully out of the rail's outer edge.
-        'absolute top-3 -right-7 z-20 inline-flex h-10 w-7 items-center justify-center', 'before:absolute before:-inset-1 before:content-[""]', 'rounded-r-md border border-l-0 border-border bg-card text-muted-foreground', 'shadow-[2px_0_4px_rgb(0_0_0_/_0.08)]', 'hover:bg-accent hover:text-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: _jsx(Icon, { size: 18, "aria-hidden": true }) }));
+    // Grip reveal: invisible until the rail is hovered (expanded); faint and
+    // reachable when collapsed so the rail can always be reopened.
+    const reveal = collapsed
+        ? 'pointer-events-auto opacity-55'
+        : 'pointer-events-none opacity-0 group-hover/seam:pointer-events-auto group-hover/seam:opacity-100';
+    // ONE element: a full-height col-resize separator straddling the boundary,
+    // carrying the single seam line (brand + glow on hover/focus) and the grip
+    // pill. Dragging the seam resizes; clicking the grip (which stops pointer
+    // propagation) collapses — no separate resize handle, so only one line.
+    return (_jsxs("div", { "data-testid": "context-rail-seam", "data-collapsed": collapsed ? 'true' : 'false', onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: cn('group/seam absolute top-0 right-0 bottom-0 z-20 w-3 translate-x-1/2', collapsed ? 'cursor-default' : 'cursor-col-resize'), children: [_jsx("span", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize context rail", "aria-valuenow": currentWidth, "aria-valuemin": MIN_WIDTH, "aria-valuemax": MAX_WIDTH, className: cn('pointer-events-none absolute inset-y-0 left-1/2 w-[2px] -translate-x-1/2 transition-[background-color,box-shadow] duration-150', collapsed ? 'bg-shell-border' : 'bg-transparent', 'group-hover/seam:bg-[var(--color-brand-400)] group-hover/seam:shadow-[0_0_14px_-1px_var(--color-brand-400)]', 'group-focus-visible/seam:bg-[var(--color-brand-400)] group-focus-visible/seam:shadow-[0_0_14px_-1px_var(--color-brand-400)]') }), _jsx("button", { type: "button", onPointerDown: (e) => e.stopPropagation(), onClick: () => ctx.contextRail.setCollapsed(!collapsed), "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', "aria-expanded": !collapsed, "aria-controls": railId, "data-testid": "context-rail-toggle", className: cn('absolute top-1/2 left-1/2 grid h-12 w-[21px] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border bg-card text-[var(--color-brand-400)]', 'border-[color-mix(in_oklab,var(--color-brand-400)_26%,transparent)]', 'transition-[opacity,transform,box-shadow,border-color] duration-150', collapsed ? 'scale-90' : 'scale-[.82]', reveal, 'group-hover/seam:scale-100 group-hover/seam:border-[var(--color-brand-400)] group-hover/seam:opacity-100 group-hover/seam:shadow-[0_6px_18px_-4px_color-mix(in_oklab,var(--color-brand-400)_65%,transparent)]', 'focus-visible:scale-100 focus-visible:border-[var(--color-brand-400)] focus-visible:opacity-100 focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-brand-400)_35%,transparent)]'), children: _jsx(Icon, { size: 14, "aria-hidden": true }) })] }));
 }
 // ---------------------------------------------------------------------------
 // ContextRail
@@ -115,7 +112,7 @@ export function ContextRail({ appId, module, hidden = false, collapsible = true,
     // 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: "flex h-full min-w-0 flex-col overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [showHeader && (_jsxs("div", { className: "shrink-0 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 }))] })), _jsxs("div", { "data-meda-context-rail-scroll-area": "", className: cn('min-h-0 flex-1', scroll === 'auto' ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'), children: [items.length > 0 && (_jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: items.map((item) => {
+    return (_jsxs("aside", { id: railId, "data-testid": "context-rail", "aria-label": module.label, className: cn('group/rail relative h-full shrink-0 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(ContextRailSeam, { railId: railId, currentWidth: width, onResize: handleResize, onCommit: handleCommit })), _jsxs("div", { className: "flex h-full min-w-0 flex-col overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [showHeader && (_jsxs("div", { className: "shrink-0 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 }))] })), _jsxs("div", { "data-meda-context-rail-scroll-area": "", className: cn('min-h-0 flex-1', scroll === 'auto' ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'), children: [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'
@@ -138,5 +135,5 @@ export function ContextRail({ appId, module, hidden = false, collapsible = true,
                                             }) }, item.id));
                                     }
                                     return _jsx("a", { ...linkProps }, item.id);
-                                }) })), module.render?.({ workspaceId: ctx.workspace.id, appId })] })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
+                                }) })), module.render?.({ workspaceId: ctx.workspace.id, appId })] })] })] }));
 }

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

@@ -14,12 +14,14 @@ export interface IconRailRenderLinkArgs {
     children: ReactNode;
     linkProps: AnchorHTMLAttributes<HTMLAnchorElement>;
 }
+export type IconRailLabelVisibility = 'tooltip' | 'visible';
 export interface IconRailProps {
     mainItems: IconRailItem[];
     utilityItems?: IconRailItem[];
     footer?: ReactNode;
     activeId?: string;
     renderLink?: (args: IconRailRenderLinkArgs) => ReactNode;
+    labelVisibility?: IconRailLabelVisibility;
     className?: string;
 }
 export interface RailDividerProps {
@@ -27,4 +29,4 @@ export interface RailDividerProps {
     onToggle: () => void;
 }
 export declare function RailDivider({ pinnedBottom, onToggle }: RailDividerProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, className, }: IconRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, labelVisibility, className, }: IconRailProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/icon-rail.js

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

package/dist/shell/index.d.ts

@@ -7,7 +7,7 @@ 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 type { IconRailItem, IconRailLabelVisibility, 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';
@@ -20,7 +20,7 @@ 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 type { AppTabsProps } from './shell-header.js';
+export type { AppTabsProps, PanelToggleProps } from './shell-header.js';
 export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-header.js';
 export { ShellMain } from './shell-main.js';
 export type { MedaShellProviderProps } from './shell-provider.js';

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

@@ -25,7 +25,7 @@ export function MobileBottomNav({ items, className }) {
     const resolvedItems = items ?? ctx.mobileBottomNav;
     if (resolvedItems.length === 0)
         return null;
-    return (_jsx("nav", { "data-testid": "mobile-bottom-nav", "aria-label": "Mobile navigation", className: cn('flex h-[var(--shell-bottom-nav-height)] items-center justify-around border-t border-border bg-card', className), children: resolvedItems.map((item) => (_jsx(MobileBottomNavButton, { item: item }, item.id))) }));
+    return (_jsx("nav", { "data-testid": "mobile-bottom-nav", "aria-label": "Mobile navigation", className: cn('flex h-[calc(var(--shell-bottom-nav-height)+env(safe-area-inset-bottom))] items-start justify-around border-t border-border bg-card px-1 pb-[env(safe-area-inset-bottom)]', className), children: resolvedItems.map((item) => (_jsx(MobileBottomNavButton, { item: item }, item.id))) }));
 }
 /** Long-press threshold in milliseconds */
 const LONG_PRESS_DURATION = 500;
@@ -76,5 +76,5 @@ function MobileBottomNavButton({ item }) {
             ctx.mobileDrawer.setOpen(item.id);
         }
     };
-    return (_jsxs("button", { type: "button", onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onClick: handleClick, "aria-label": label, className: "flex h-full flex-1 flex-col items-center justify-center gap-0.5 text-muted-foreground hover:text-foreground", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx("span", { className: "text-[10px]", children: label })] }));
+    return (_jsxs("button", { type: "button", onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onClick: handleClick, "aria-label": label, className: "flex h-[var(--shell-bottom-nav-height)] flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-muted-foreground transition-colors hover:text-foreground active:bg-accent", children: [_jsx(Icon, { size: 20, "aria-hidden": "true" }), _jsx("span", { className: "font-medium text-[10px] leading-none", children: label })] }));
 }

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import type { ContextRailProps } from '../context-rail.js';
 import type { IconRailItem, IconRailProps } from '../icon-rail.js';
 import type { ContextModule, ContextRailHeader, ContextRailScroll, PanelView, WorkspaceMenuItem } from '../types.js';
 export interface MobileDrawersProps {
@@ -16,10 +17,19 @@ export interface MobileDrawersProps {
     module?: ContextModule;
     /** App id used when rendering module custom content. */
     moduleAppId?: string;
+    /** Active module item id, sourced from context rail config. */
+    moduleActiveItemId?: string;
+    /** Custom module link renderer, sourced from context rail config. */
+    moduleRenderLink?: ContextRailProps['renderLink'];
     /** Header behavior mirrored from the desktop ContextRail. */
     moduleHeader?: ContextRailHeader;
     /** Scroll behavior mirrored from the desktop ContextRail. */
     moduleScroll?: ContextRailScroll;
+    /**
+     * Desktop header "leading" content (section tabs) surfaced under the menu
+     * drawer on mobile. Anchors inside auto-close the drawer on click.
+     */
+    sectionTabs?: ReactNode;
     /** Panels drawer source. */
     panelViews?: PanelView[];
     /**
@@ -37,4 +47,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, menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleHeader, moduleScroll, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileDrawers({ menuItems, menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleActiveItemId, moduleRenderLink, moduleHeader, moduleScroll, sectionTabs, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,7 @@ import { useTheme } from '../theme.js';
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
 /* v8 ignore next — v8 phantom duplicate function record for MobileDrawers */
-export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleHeader, moduleScroll, panelViews = [], defaultView, customContent = {}, }) {
+export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleActiveItemId, moduleRenderLink, moduleHeader, moduleScroll, sectionTabs, panelViews = [], defaultView, customContent = {}, }) {
     const ctx = useMedaShell();
     const open = ctx.mobileDrawer.open;
     const setOpen = ctx.mobileDrawer.setOpen;
@@ -25,16 +25,25 @@ export function MobileDrawers({ menuItems = [], menuActiveId, menuRenderLink, wo
         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, workspaceItems: workspaceMenuItems, workspaceFooter: workspaceMenuFooter }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module, renderCtx: moduleRenderCtx, header: moduleHeader, scroll: moduleScroll }), _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)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(MenuDrawer, { open: open === 'menu-drawer', onClose: close, items: menuItems, activeId: menuActiveId, renderLink: menuRenderLink, workspaceItems: workspaceMenuItems, workspaceFooter: workspaceMenuFooter, sectionTabs: sectionTabs }), _jsx(ModuleDrawer, { open: open === 'module-drawer', onClose: close, module: module, activeItemId: moduleActiveItemId, renderCtx: moduleRenderCtx, renderLink: moduleRenderLink, header: moduleHeader, scroll: moduleScroll }), _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, activeId, renderLink, workspaceItems, workspaceFooter, }) {
+function MenuDrawer({ open, onClose, items, activeId, renderLink, workspaceItems, workspaceFooter, sectionTabs, }) {
     const hasIconItems = items.length > 0;
     const hasWorkspaceItems = Array.isArray(workspaceItems) && workspaceItems.length > 0;
+    const hasSectionTabs = sectionTabs != null;
+    // The desktop "leading" section tabs (e.g. Home / Inbox) live under the menu
+    // on mobile. The tabs are router Links; clicking one navigates client-side,
+    // so close the drawer when any anchor inside is activated.
+    const handleSectionTabsClick = (event) => {
+        if (event.target.closest('a')) {
+            onClose();
+        }
+    };
     /* v8 ignore next — v8 phantom duplicate return statement for MenuDrawer */
-    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." })] }), _jsxs("div", { className: "flex flex-col gap-2 p-2", children: [hasIconItems && (_jsx("nav", { "aria-label": "Primary navigation", className: "flex flex-col gap-0.5", children: items.map((item) => (_jsx(MenuDrawerItem, { item: item, isActive: item.id === activeId, onClose: onClose, renderLink: renderLink }, item.id))) })), (hasIconItems || hasWorkspaceItems) && _jsx("div", { className: "h-px bg-border" }), _jsxs("nav", { "aria-label": "Workspace menu", className: "flex flex-col gap-0.5", children: [workspaceItems?.map((item) => (_jsxs(Fragment, { children: [_jsx(WorkspaceMenuDrawerItem, { item: item, onClose: onClose }), item.separatorAfter && _jsx("div", { className: "my-1 h-px bg-border" })] }, item.id))), _jsx(MobileThemeMenuItem, { onClose: onClose })] }), workspaceFooter] })] }) }));
+    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." })] }), _jsxs("div", { className: "flex flex-col gap-2 p-2", children: [hasSectionTabs && (_jsxs(_Fragment, { children: [_jsx("div", { "data-meda-mobile-section-tabs": "", className: "flex h-9 items-stretch overflow-x-auto px-1", onClick: handleSectionTabsClick, children: sectionTabs }), _jsx("div", { className: "h-px bg-border" })] })), hasIconItems && (_jsx("nav", { "aria-label": "Primary navigation", className: "flex flex-col gap-0.5", children: items.map((item) => (_jsx(MenuDrawerItem, { item: item, isActive: item.id === activeId, onClose: onClose, renderLink: renderLink }, item.id))) })), (hasIconItems || hasWorkspaceItems) && _jsx("div", { className: "h-px bg-border" }), _jsxs("nav", { "aria-label": "Workspace menu", className: "flex flex-col gap-0.5", children: [workspaceItems?.map((item) => (_jsxs(Fragment, { children: [_jsx(WorkspaceMenuDrawerItem, { item: item, onClose: onClose }), item.separatorAfter && _jsx("div", { className: "my-1 h-px bg-border" })] }, item.id))), _jsx(MobileThemeMenuItem, { onClose: onClose })] }), workspaceFooter] })] }) }));
 }
 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, }) {
@@ -112,7 +121,7 @@ function MobileThemeMenuItem({ onClose }) {
             onClose();
         }, children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: THEME_LABEL[theme] })] }));
 }
-function ModuleDrawer({ open, onClose, module, renderCtx, header = 'auto', scroll = 'auto', }) {
+function ModuleDrawer({ open, onClose, module, activeItemId, renderCtx, renderLink, header = 'auto', scroll = 'auto', }) {
     const items = module?.items ?? [];
     if (!module || (items.length === 0 && !module.render))
         return null;
@@ -122,7 +131,19 @@ function ModuleDrawer({ open, onClose, module, renderCtx, header = 'auto', scrol
     /* v8 ignore next — v8 phantom duplicate return statement for ModuleDrawer */
     return (_jsx(Drawer, { open: open, onOpenChange: (o) => !o && onClose(), direction: "left", children: _jsxs(DrawerContent, { children: [showHeader ? _jsx(DrawerHeader, { children: title }) : title, _jsxs("div", { "data-meda-context-rail-scroll-area": "", className: cn('min-h-0 flex-1', scroll === 'auto' ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'), children: [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));
+                                const isActive = item.id === activeItemId;
+                                const className = cn('flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground', isActive && 'bg-accent text-foreground');
+                                const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }));
+                                const linkProps = {
+                                    href: item.to,
+                                    'aria-current': isActive ? 'page' : undefined,
+                                    className,
+                                    children,
+                                };
+                                if (renderLink) {
+                                    return (_jsx(Fragment, { children: closeAfterLinkClick(renderLink({ item, isActive, className, children, linkProps }), onClose) }, item.id));
+                                }
+                                return (_jsx(Fragment, { children: closeAfterLinkClick(_jsx("a", { ...linkProps }), onClose) }, item.id));
                             }) })), module.render?.(renderCtx)] })] }) }));
 }
 function PanelsDrawer({ open, onClose, panelViews, defaultView, renderCtx, }) {

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

@@ -10,6 +10,8 @@ export interface MobileHeaderProps {
     onBack?: () => void;
     /** Root mode only — renders to the right of workspace name. */
     globalActions?: ReactNode;
+    /** Root mode only — rendered centered in the header (e.g. clock). */
+    headerCenter?: ReactNode;
     className?: string;
 }
 /**
@@ -20,4 +22,4 @@ export interface MobileHeaderProps {
  *
  * Renders nothing on non-mobile viewports.
  */
-export declare function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, className, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, headerCenter, className, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -12,11 +12,11 @@ import { useShellViewport } from '../use-shell-viewport.js';
  *
  * Renders nothing on non-mobile viewports.
  */
-export function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, className, }) {
+export function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, headerCenter, className, }) {
     const ctx = useMedaShell();
     const band = useShellViewport();
     const isNested = !!parentLabel;
     if (band !== 'mobile')
         return null;
-    return (_jsx("header", { "data-testid": "mobile-header", "data-meda-mobile-header": isNested ? 'nested' : 'root', className: cn('flex h-[var(--shell-header-height)] items-center justify-between border-b border-border bg-card px-3', className), children: isNested ? (_jsxs("button", { type: "button", onClick: onBack, "aria-label": "Go back", className: "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm hover:bg-accent", children: [_jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "text-muted-foreground", children: parentLabel }), title && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/40", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "text-foreground", children: title })] }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [_jsx("span", { "aria-hidden": "true", children: ctx.workspace.icon }), _jsx("span", { children: ctx.workspace.name })] }), globalActions && _jsx("div", { className: "flex items-center gap-1", children: globalActions })] })) }));
+    return (_jsx("header", { "data-testid": "mobile-header", "data-meda-mobile-header": isNested ? 'nested' : 'root', className: cn('relative flex h-[var(--shell-mobile-header-height)] items-center justify-between bg-background px-3', className), children: isNested ? (_jsxs("button", { type: "button", onClick: onBack, "aria-label": "Go back", className: "flex min-h-9 max-w-full items-center gap-1.5 rounded-lg px-2 text-sm font-medium hover:bg-accent", children: [_jsx(ChevronLeft, { size: 18, "aria-hidden": "true" }), _jsx("span", { className: "truncate text-muted-foreground", children: parentLabel }), title && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/40", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "truncate text-foreground", children: title })] }))] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => ctx.mobileDrawer.setOpen('menu-drawer'), "aria-label": "Open workspace menu", "aria-haspopup": "menu", className: "-mx-1 flex min-w-0 items-center gap-2.5 rounded-lg px-1 py-1 text-sm font-semibold text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground ring-1 ring-border/70", "aria-hidden": "true", children: ctx.workspace.icon }), _jsx("span", { className: "truncate text-[15px] leading-5", children: ctx.workspace.name })] }), headerCenter && (_jsx("div", { className: "-translate-x-1/2 pointer-events-none absolute left-1/2 flex max-w-[55%] items-center justify-center", children: _jsx("div", { className: "pointer-events-auto flex min-w-0 items-center", children: headerCenter }) })), globalActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: globalActions }))] })) }));
 }

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { AppShellAppTabsConfig, WorkspaceMenuItem } from './types.js';
+import type { AppShellAppTabsConfig, PanelView, WorkspaceMenuItem } from './types.js';
 export interface WorkspaceSwitcherProps {
     /**
      * Configurable dropdown items. When provided, REPLACES the default
@@ -22,7 +22,11 @@ export declare function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenu
 export interface AppTabsProps extends AppShellAppTabsConfig {
 }
 export declare function AppTabs({ renderLink }?: AppTabsProps): import("react/jsx-runtime").JSX.Element;
-export declare function PanelToggle(): import("react/jsx-runtime").JSX.Element;
+export interface PanelToggleProps {
+    /** Panel views surfaced in the chevron dropdown. Empty → plain toggle. */
+    panelViews?: PanelView[];
+}
+export declare function PanelToggle({ panelViews }?: PanelToggleProps): import("react/jsx-runtime").JSX.Element;
 export interface ShellHeaderProps {
     globalActions?: ReactNode;
     /**
@@ -30,6 +34,11 @@ export interface ShellHeaderProps {
      * provided.
      */
     headerCenter?: ReactNode;
+    /**
+     * Optional leading content rendered in the LEFT header region immediately
+     * after the workspace switcher (separated by whitespace only, no divider).
+     */
+    headerLeading?: ReactNode;
     appTabsRenderLink?: AppShellAppTabsConfig['renderLink'];
     className?: string;
     /**
@@ -38,5 +47,8 @@ export interface ShellHeaderProps {
      */
     workspaceMenuItems?: WorkspaceMenuItem[];
     workspaceMenuFooter?: ReactNode;
+    showPanelToggle?: boolean;
+    /** Panel views forwarded to the header `<PanelToggle>` dropdown. */
+    panelViews?: PanelView[];
 }
-export declare function ShellHeader({ globalActions, headerCenter, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle, panelViews, }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;