@medalsocial/meda 2.7.2 → 2.8.1

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { AppShellAppTabsConfig, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellMobileNavConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig, ShellMainLayout } from './types.js';
+import type { AppShellAppTabsConfig, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellMobileNavConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig, ShellHeaderLayout, ShellMainLayout } from './types.js';
 interface AppShellBaseProps {
     children: ReactNode;
     className?: string;
@@ -29,14 +29,24 @@ export type AppShellProps = AppShellBaseProps & ({
     globalActions?: ReactNode;
     /**
      * Optional center-region header content. Replaces the default
-     * application tabs when provided.
+     * application tabs when provided. Ignored when
+     * `headerLayout="rail"` — that layout has no centre column.
      */
     headerCenter?: ReactNode;
     /**
      * Optional leading content rendered in the LEFT header region immediately
      * after the workspace switcher. On mobile, surfaced inside the menu drawer.
+     * Under `headerLayout="rail"` it owns the header's whole fill column.
      */
     headerLeading?: ReactNode;
+    /**
+     * Desktop header grid. `split` (the default) is the pre-2.8 layout,
+     * byte-for-byte unchanged. `rail` switches to
+     * `[rail column | fill | actions]`: the workspace switcher renders as a
+     * tile the width of the icon rail, and `headerLeading` gets every
+     * remaining pixel. See `ShellHeaderLayout`.
+     */
+    headerLayout?: ShellHeaderLayout;
     /**
      * Optional chrome-level content rendered below the header and above
      * the workspace rail row.
@@ -67,9 +77,9 @@ export type AppShellProps = AppShellBaseProps & ({
     variant: 'chat';
     globalActions?: ReactNode;
 });
-export declare function AppShell(props: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell(props: AppShellProps): import("react").JSX.Element;
 export declare function AppShellBody({ children, className }: {
     children: ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

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, mobileNav: props.mobileNav, 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, headerLayout: props.headerLayout, 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/command-palette.d.ts

@@ -17,7 +17,7 @@ export declare function matchesHotkey(e: KeyboardEvent, spec: string): boolean;
 export interface CommandPaletteProps {
     children?: ReactNode;
 }
-export declare function CommandPalette({ children }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPalette({ children }: CommandPaletteProps): import("react").JSX.Element;
 export declare function useCommands(commands: CommandDefinition[]): void;
 export declare function useCommandGroup(group: CommandGroupDefinition): void;
 export {};

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

@@ -16,4 +16,4 @@ export interface ContextRailProps {
     scroll?: ContextRailScroll;
     className?: string;
 }
-export declare function ContextRail({ appId, module, hidden, collapsible, activeItemId, renderLink, header, scroll, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ContextRail({ appId, module, hidden, collapsible, activeItemId, renderLink, header, scroll, className, }: ContextRailProps): import("react").JSX.Element | null;

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

@@ -25,7 +25,7 @@ export interface DragModeBannerProps {
     isActive?: (activeId: string | number) => boolean;
     className?: string;
 }
-export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react").JSX.Element | null;
 export declare namespace DragModeBanner {
     var displayName: string;
 }

package/dist/shell/extras/shell-desktop-panel-dock.d.ts

@@ -11,4 +11,4 @@ export declare function ShellDesktopPanelDock({ defaultView, panelOpen, viewIds,
         className?: string;
     }) => React.ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/shell/extras/shell-scrollable-content.d.ts

@@ -6,4 +6,4 @@ export interface ShellScrollableContentProps {
     layout: ShellContentLayout;
     maxWidth?: number;
 }
-export declare function ShellScrollableContent({ children, desktopDockOffset, layout, maxWidth, }: ShellScrollableContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShellScrollableContent({ children, desktopDockOffset, layout, maxWidth, }: ShellScrollableContentProps): import("react").JSX.Element;

package/dist/shell/extras/shell-tab-bar.d.ts

@@ -14,5 +14,5 @@ export interface ShellTabBarProps {
     ariaLabel?: string;
     renderLink?: (args: ShellTabBarRenderArgs) => ReactNode;
 }
-export declare function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel, renderLink, }: ShellTabBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel, renderLink, }: ShellTabBarProps): import("react").JSX.Element | null;
 export {};

package/dist/shell/extras/workbench-layout.d.ts

@@ -7,4 +7,4 @@ export interface WorkbenchLayoutProps {
     toolbar?: ReactNode;
     className?: string;
 }
-export declare function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }: WorkbenchLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }: WorkbenchLayoutProps): import("react").JSX.Element;

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

@@ -28,5 +28,5 @@ export interface RailDividerProps {
     pinnedBottom: boolean;
     onToggle: () => void;
 }
-export declare function RailDivider({ pinnedBottom, onToggle }: RailDividerProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, labelVisibility, className, }: IconRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RailDivider({ pinnedBottom, onToggle }: RailDividerProps): import("react").JSX.Element;
+export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, labelVisibility, className, }: IconRailProps): import("react").JSX.Element | null;

package/dist/shell/index.d.ts

@@ -20,12 +20,12 @@ 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, PanelToggleProps } from './shell-header.js';
+export type { AppTabsProps, PanelToggleProps, ShellHeaderProps, WorkspaceSwitcherProps, WorkspaceSwitcherVariant, } 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';
 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, 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 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, ShellHeaderLayout, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, WorkspaceMenuItem, } from './types.js';
 export { useShellViewport } from './use-shell-viewport.js';

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

@@ -20,4 +20,4 @@ export interface MobileBottomNavProps {
  *
  * Hidden on non-mobile viewports and when the right panel is in fullscreen mode.
  */
-export declare function MobileBottomNav({ items, className }: MobileBottomNavProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileBottomNav({ items, className }: MobileBottomNavProps): import("react").JSX.Element | null;

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

@@ -5,6 +5,12 @@ export declare const WORKSPACE_SHEET_KEY = "workspace-sheet";
 export interface MobileDockProps {
     items: MobileDockItem[];
     activeTo?: string;
+    /**
+     * The active APP's id. When set, a slot is active iff `item.id === activeId`
+     * — so the dock stays lit everywhere inside that app, not only on the exact
+     * address in `activeTo`. Omit to keep the `to === activeTo` comparison.
+     */
+    activeId?: string;
     renderLink?: (args: MobileNavLinkArgs) => ReactNode;
     className?: string;
     /** `pill` (default) floating dock, or `bar` full-width labeled bottom bar. */
@@ -21,4 +27,4 @@ export interface MobileDockProps {
  *
  * Hidden on non-mobile viewports and when the right panel is fullscreen.
  */
-export declare function MobileDock({ items, activeTo, renderLink, className, variant, }: MobileDockProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileDock({ items, activeTo, activeId, renderLink, className, variant, }: MobileDockProps): import("react").JSX.Element | null;

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

@@ -28,7 +28,7 @@ function renderIcon(icon, size) {
  *
  * Hidden on non-mobile viewports and when the right panel is fullscreen.
  */
-export function MobileDock({ items, activeTo, renderLink, className, variant = 'pill', }) {
+export function MobileDock({ items, activeTo, activeId, renderLink, className, variant = 'pill', }) {
     const ctx = useMedaShell();
     const band = useShellViewport();
     if (band !== 'mobile')
@@ -37,6 +37,9 @@ export function MobileDock({ items, activeTo, renderLink, className, variant = '
         return null;
     if (items.length === 0)
         return null;
+    // `activeId` wins when supplied; otherwise fall back to the exact-address
+    // comparison the dock has always used.
+    const isItemActive = (item) => activeId != null ? item.id === activeId : Boolean(item.to && activeTo && item.to === activeTo);
     const runAction = (item) => {
         if (item.action === 'open-sheet')
             ctx.mobileDrawer.setOpen(WORKSPACE_SHEET_KEY);
@@ -49,14 +52,17 @@ export function MobileDock({ items, activeTo, renderLink, className, variant = '
     if (variant === 'bar') {
         const renderBarSlot = (item) => {
             const label = typeof item.label === 'function' ? item.label() : item.label;
-            const isActive = Boolean(item.to && activeTo && item.to === activeTo);
+            const isActive = isItemActive(item);
             const isBrand = item.emphasis === 'brand';
-            const iconEl = isBrand ? (_jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-[#5B2D8C] text-white", children: renderIcon(item.icon, 20) })) : (renderIcon(item.icon, 25));
+            const iconEl = isBrand ? (_jsx("span", { className: cn('flex size-8 items-center justify-center rounded-full bg-[var(--color-brand-600)] text-white', isActive && 'ring-2 ring-primary ring-offset-2 ring-offset-card'), children: renderIcon(item.icon, 20) })) : (renderIcon(item.icon, 25));
+            // Active wins over brand: a slot carrying `aria-current="page"` must
+            // have a visible treatment too. The label goes primary; the glyph in the
+            // disc stays white because the disc sets its own colour.
             let toneClass = 'text-muted-foreground hover:text-foreground';
-            if (isBrand)
-                toneClass = 'text-muted-foreground';
-            else if (isActive)
+            if (isActive)
                 toneClass = 'font-medium text-primary';
+            else if (isBrand)
+                toneClass = 'text-muted-foreground';
             const slotClass = cn('flex w-full flex-col items-center justify-center gap-1 py-2 text-[11px] leading-none transition-colors', toneClass);
             const children = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex items-center justify-center", children: [iconEl, item.badge ? (_jsx("span", { className: "absolute -top-0.5 -right-1 size-2 rounded-full bg-primary ring-2 ring-card" })) : null] }), _jsx("span", { children: label })] }));
             if (item.to && !item.action) {
@@ -86,12 +92,18 @@ export function MobileDock({ items, activeTo, renderLink, className, variant = '
     const brandItems = items.filter((item) => item.emphasis === 'brand');
     const renderSlot = (item, size) => {
         const label = typeof item.label === 'function' ? item.label() : item.label;
-        const isActive = Boolean(item.to && activeTo && item.to === activeTo);
+        const isActive = isItemActive(item);
         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 className = cn('relative flex items-center justify-center rounded-full p-1 transition-colors', 
+            // A brand slot is rendered inside a filled brand disc that already
+            // sets `text-white`; a colour class here would override it and paint
+            // the glyph muted-grey on purple. Inherit instead, and let the disc
+            // itself carry the active ring (see the brandItems map below).
+            item.emphasis === 'brand' && 'text-inherit', item.emphasis !== 'brand' &&
+                (isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'));
             const children = (_jsxs(_Fragment, { children: [icon, badge] }));
             if (renderLink) {
                 return renderLink({
@@ -110,8 +122,11 @@ export function MobileDock({ items, activeTo, renderLink, className, variant = '
             }
             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] }));
+        // Action slot. Before `activeId` these never carried an active state, so
+        // the `activeTo` fallback deliberately does NOT light them — only an
+        // explicit `activeId` match does.
+        const actionActive = activeId != null && item.id === activeId;
+        return (_jsxs("button", { type: "button", onClick: () => runAction(item), "aria-label": label, className: cn('relative flex items-center justify-center rounded-full p-1 transition-colors', actionActive ? 'text-foreground' : 'text-muted-foreground 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)))] }));
+    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: cn('pointer-events-auto flex size-11 items-center justify-center rounded-full bg-[var(--color-brand-600)] text-white shadow-[0_6px_20px_rgba(91,45,140,0.35)]', isItemActive(item) && 'ring-2 ring-primary ring-offset-2 ring-offset-background'), children: renderSlot(item, 22) }, item.id)))] }));
 }

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

@@ -47,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, moduleActiveItemId, moduleRenderLink, moduleHeader, moduleScroll, sectionTabs, 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.Element;

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

@@ -22,4 +22,4 @@ export interface MobileHeaderProps {
  *
  * Renders nothing on non-mobile viewports.
  */
-export declare function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, headerCenter, 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.Element | null;

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

@@ -3,6 +3,16 @@ import type { MobileNavLinkArgs, MobileNavTree, WorkspaceMenuItem } from '../typ
 export interface MobileWorkspaceSheetProps {
     tree: MobileNavTree;
     activeTo?: string;
+    /**
+     * The active APP's id — a row id in `tree`. When supplied it, not
+     * `activeTo`, decides which row the sheet opens on.
+     */
+    activeId?: string;
+    /**
+     * Render the current row first inside its group. Defaults to `false`, i.e.
+     * the tree's own order.
+     */
+    currentFirst?: boolean;
     renderLink?: (args: MobileNavLinkArgs) => ReactNode;
     workspaceMenuItems?: WorkspaceMenuItem[];
     workspaceMenuFooter?: ReactNode;
@@ -14,5 +24,9 @@ export interface MobileWorkspaceSheetProps {
  * 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.
+ *
+ * The sheet opens WHERE YOU ARE: the current row (see `activeId` / `activeTo`)
+ * is expanded and scrolled into view on every open, and the user can still
+ * collapse it.
  */
-export declare function MobileWorkspaceSheet({ tree, activeTo, renderLink, workspaceMenuItems, workspaceMenuFooter, }: MobileWorkspaceSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileWorkspaceSheet({ tree, activeTo, activeId, currentFirst, renderLink, workspaceMenuItems, workspaceMenuFooter, }: MobileWorkspaceSheetProps): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 '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 { createElement, Fragment, isValidElement, useEffect, useRef, 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';
@@ -18,6 +18,36 @@ function renderIcon(icon, size) {
     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';
+/** Every row in the tree, groups first then footer rows, in render order. */
+function allNavItems(tree) {
+    return [...tree.groups.flatMap((group) => group.items), ...(tree.footerItems ?? [])];
+}
+/**
+ * The row the user is currently "in".
+ *
+ * `activeId` is authoritative when supplied. Otherwise the row is derived from
+ * `activeTo`: an exact `to` match first, then the row that owns `activeTo`
+ * among its preset `views`.
+ */
+function resolveCurrentItem(tree, activeId, activeTo) {
+    const items = allNavItems(tree);
+    if (activeId != null)
+        return items.find((item) => item.id === activeId) ?? null;
+    if (activeTo == null)
+        return null;
+    return (items.find((item) => item.to === activeTo) ??
+        items.find((item) => (item.views ?? []).some((view) => view.to === activeTo)) ??
+        null);
+}
+/** Move `currentId` to the front of `items` (used by `currentFirst`). */
+function withCurrentFirst(items, currentId) {
+    if (currentId == null)
+        return items;
+    const index = items.findIndex((item) => item.id === currentId);
+    if (index <= 0)
+        return items;
+    return [items[index], ...items.slice(0, index), ...items.slice(index + 1)];
+}
 /**
  * The one mobile workspace sheet — a calm, scannable list of the whole nav
  * tree that replaces the four drawers. Modules are light group labels,
@@ -25,13 +55,50 @@ const rowClass = 'flex w-full items-center gap-3 rounded-[10px] px-2 py-2.5 text
  * 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.
+ *
+ * The sheet opens WHERE YOU ARE: the current row (see `activeId` / `activeTo`)
+ * is expanded and scrolled into view on every open, and the user can still
+ * collapse it.
  */
-export function MobileWorkspaceSheet({ tree, activeTo, renderLink, workspaceMenuItems, workspaceMenuFooter, }) {
+export function MobileWorkspaceSheet({ tree, activeTo, activeId, currentFirst = false, 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);
+    // Which row we have already scrolled to for the CURRENT open session, so a
+    // re-render does not keep yanking a sheet the user has scrolled by hand.
+    const scrolledToRef = useRef(null);
+    const currentItem = resolveCurrentItem(tree, activeId, activeTo);
+    const currentItemId = currentItem?.id ?? null;
+    const currentHasViews = (currentItem?.views ?? []).length > 0;
+    // Reset the accordion to the current row on every open. Primitive deps, so
+    // a re-render with the same current row does not fight a manual collapse.
+    useEffect(() => {
+        if (!open)
+            return;
+        setExpandedId(currentHasViews ? currentItemId : null);
+    }, [open, currentItemId, currentHasViews]);
+    useEffect(() => {
+        if (!open)
+            scrolledToRef.current = null;
+    }, [open]);
+    // Bring the current row into view as soon as it is in the DOM, so a long
+    // tree never opens scrolled away from where the user actually is. Done from
+    // the ref callback rather than an effect because the drawer portals its
+    // content in a later commit than the one that flips `open`.
+    const registerRow = (id) => (el) => {
+        if (el == null)
+            return;
+        if (!open || id !== currentItemId || scrolledToRef.current === id)
+            return;
+        scrolledToRef.current = id;
+        // `scrollIntoView` is absent in some non-browser DOM implementations.
+        if (typeof el.scrollIntoView === 'function') {
+            el.scrollIntoView({ block: 'center' });
+        }
+    };
+    const orderItems = (items) => currentFirst ? withCurrentFirst(items, currentItemId) : items;
     const navLink = (to, label, className, children, isActive) => {
         if (renderLink) {
             return renderLink({
@@ -72,7 +139,7 @@ export function MobileWorkspaceSheet({ tree, activeTo, renderLink, workspaceMenu
     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] })] }) }));
+                            }, 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: orderItems(group.items).map((item) => (_jsx("div", { ref: registerRow(item.id), "data-meda-nav-item": item.id, 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: orderItems(tree.footerItems).map((item) => (_jsx("div", { ref: registerRow(item.id), "data-meda-nav-item": item.id, children: renderRow(item) }, item.id))) })] })) : null] })] }) }));
 }
 function WorkspaceMenuRow({ item, onClose }) {
     const icon = renderIcon(item.icon, 16);

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

@@ -12,4 +12,4 @@ export interface ResolvedPanelViews {
 }
 export declare function mergePanelViews(staticViews: PanelView[] | undefined, registrations: PanelViewRegistration[], staticDefaultView?: string): ResolvedPanelViews;
 export declare function useResolvedPanelViews(staticViews?: PanelView[], staticDefaultView?: string): ResolvedPanelViews;
-export declare function PanelViewsProvider({ views, defaultView, children }: PanelViewsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelViewsProvider({ views, defaultView, children }: PanelViewsProviderProps): import("react").JSX.Element;

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

@@ -35,7 +35,7 @@ export interface RailDropSlotProps {
     ariaLabel?: string;
     ref?: Ref<HTMLElement>;
 }
-export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react").JSX.Element;
 export declare namespace RailDropSlot {
     var displayName: string;
 }

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

@@ -22,7 +22,7 @@ export interface RailDropZonesProps {
     children: ReactNode;
     className?: string;
 }
-export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react/jsx-runtime").JSX.Element;
+export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react").JSX.Element;
 export declare namespace RailDropZones {
     var displayName: string;
 }

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

@@ -20,7 +20,7 @@ export interface ResizableShellProps {
     className?: string;
     children: ReactNode;
 }
-export declare function ResizableShell({ orientation, className, children, }: ResizableShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableShell({ orientation, className, children, }: ResizableShellProps): import("react").JSX.Element;
 export interface ResizableShellPanelProps {
     /** Percent (0–100). */
     defaultSize?: number;
@@ -36,10 +36,10 @@ export interface ResizableShellPanelProps {
     className?: string;
     children: ReactNode;
 }
-export declare function ResizableShellPanel({ className, children, onResize, ...props }: ResizableShellPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableShellPanel({ className, children, onResize, ...props }: ResizableShellPanelProps): import("react").JSX.Element;
 export interface ResizableHandleProps {
     className?: string;
     /** When true, renders a visible drag-indicator bar inside the handle. */
     withHandle?: boolean;
 }
-export declare function ResizableHandle({ className, withHandle }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableHandle({ className, withHandle }: ResizableHandleProps): import("react").JSX.Element;

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

@@ -23,4 +23,4 @@ export interface RightPanelTabRenderArgs {
 export type RightPanelTabButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     'data-active'?: boolean;
 };
-export declare function RightPanel({ panelViews, defaultView, modes, renderTab, className, }: RightPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RightPanel({ panelViews, defaultView, modes, renderTab, className, }: RightPanelProps): import("react").JSX.Element | null;

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

@@ -1,5 +1,15 @@
 import { type ReactNode } from 'react';
-import type { AppShellAppTabsConfig, PanelView, WorkspaceMenuItem } from './types.js';
+import type { IconRailLabelVisibility } from './icon-rail.js';
+import type { AppShellAppTabsConfig, PanelView, ShellHeaderLayout, WorkspaceMenuItem } from './types.js';
+/**
+ * WorkspaceSwitcher trigger shape.
+ *
+ * - `chip` (default, unchanged) — a horizontal button: mark · name · chevron.
+ * - `tile` — a full-width, rail-column button: the mark centred on the rail's
+ *   axis with the workspace name beneath it in the icon-rail label type. Used
+ *   by `<ShellHeader headerLayout="rail">`.
+ */
+export type WorkspaceSwitcherVariant = 'chip' | 'tile';
 export interface WorkspaceSwitcherProps {
     /**
      * Configurable dropdown items. When provided, REPLACES the default
@@ -17,21 +27,34 @@ export interface WorkspaceSwitcherProps {
     menuFooter?: ReactNode;
     /** @deprecated Use `menuFooter` instead. */
     workspaceMenuFooter?: ReactNode;
+    /**
+     * Trigger presentation. Defaults to `chip` — the 1.x/2.x horizontal button.
+     * The dropdown content and behaviour are identical in both variants.
+     */
+    variant?: WorkspaceSwitcherVariant;
+    /**
+     * `tile` variant only — render the workspace name under the mark. Pass
+     * `false` when the icon rail is icon-only (`labelVisibility: 'tooltip'`) so
+     * the tile matches the narrow rail. Ignored by the `chip` variant, whose
+     * name is never hidden. Defaults to `true`.
+     */
+    showLabel?: boolean;
 }
-export declare function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, }?: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, variant, showLabel, }?: WorkspaceSwitcherProps): import("react").JSX.Element;
 export interface AppTabsProps extends AppShellAppTabsConfig {
 }
-export declare function AppTabs({ renderLink }?: AppTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppTabs({ renderLink }?: AppTabsProps): import("react").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 declare function PanelToggle({ panelViews }?: PanelToggleProps): import("react").JSX.Element;
 export interface ShellHeaderProps {
     globalActions?: ReactNode;
     /**
      * Optional center-region content. Replaces the default application tabs when
-     * provided.
+     * provided. IGNORED when `headerLayout="rail"` — that layout has no centre
+     * column; put the content in `headerLeading` instead.
      */
     headerCenter?: ReactNode;
     /**
@@ -50,5 +73,19 @@ export interface ShellHeaderProps {
     showPanelToggle?: boolean;
     /** Panel views forwarded to the header `<PanelToggle>` dropdown. */
     panelViews?: PanelView[];
+    /**
+     * Header grid. `split` (default) is the pre-2.8 markup, unchanged. `rail`
+     * switches to `[rail column | fill | actions]` — see `ShellHeaderLayout`.
+     */
+    headerLayout?: ShellHeaderLayout;
+    /**
+     * The icon rail's label mode, so the `rail` layout can size its first column
+     * to the rail below it (`--shell-rail-label-width` when the rail shows
+     * labels, `--shell-rail-width` when it does not) and hide the tile's
+     * workspace name in icon-only mode. Mirror `iconRail.labelVisibility`.
+     * Defaults to `tooltip`, matching `IconRail`'s own default. Unused by the
+     * `split` layout.
+     */
+    railLabelVisibility?: IconRailLabelVisibility;
 }
-export declare function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle, panelViews, }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle, panelViews, headerLayout, railLabelVisibility, }?: ShellHeaderProps): import("react").JSX.Element | null;