@medalsocial/meda 2.7.2 → 2.8.1

package/dist/shell/shell-header.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown, Monitor, Moon, PanelRight, Sun } from 'lucide-react';
 import { createElement, Fragment, isValidElement } from 'react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../components/ui/tooltip.js';
 import { cn } from '../lib/utils.js';
 import { useMedaShell } from './shell-provider.js';
 import { useTheme } from './theme.js';
@@ -52,12 +53,27 @@ function renderConfiguredItem(item) {
     const renderLink = item.href != null ? _jsx("a", { href: item.href }) : undefined;
     return (_jsxs(DropdownMenuItem, { render: renderLink, "data-variant": item.variant ?? 'default', className: item.variant === 'destructive' ? 'text-destructive' : undefined, onClick: handleSelect, children: [renderShellIcon(item.icon), item.label] }));
 }
+/** Mark fallback for the tile variant when the workspace carries no icon. */
+function workspaceInitial(name) {
+    return name.trim().charAt(0).toUpperCase();
+}
 /* v8 ignore next — v8 phantom duplicate function record for WorkspaceSwitcher (default params) */
-export function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, } = {}) {
+export function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, variant = 'chip', showLabel = true, } = {}) {
     const { workspace, workspaces } = useMedaShell();
     const resolvedFooter = menuFooter ?? workspaceMenuFooter;
     const useConfiguredItems = Array.isArray(menuItems);
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", className: "flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-semibold hover:bg-accent" }), children: [workspace.icon != null && (_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: workspace.icon })), _jsx("span", { className: "max-w-[13rem] truncate", children: workspace.name }), _jsx(ChevronDown, { size: 16, "aria-hidden": "true" })] }), _jsxs(DropdownMenuContent, { className: "min-w-[240px]", children: [!useConfiguredItems && workspaces.length > 0 && (_jsxs(_Fragment, { children: [workspaces.map((ws) => (_jsxs(DropdownMenuItem, { children: [ws.icon != null && (_jsx("span", { className: "inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-foreground ring-1 ring-border/70", "aria-hidden": "true", children: ws.icon })), ws.name] }, ws.id))), _jsx(DropdownMenuSeparator, {})] })), useConfiguredItems ? (menuItems.map((item) => (_jsxs(Fragment, { children: [renderConfiguredItem(item), item.separatorAfter && _jsx(DropdownMenuSeparator, {})] }, item.id)))) : (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { children: "Manage workspaces" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Settings" }), _jsx(DropdownMenuItem, { children: "Profile" })] })), _jsx(DropdownMenuSeparator, {}), _jsx(ThemeToggleMenuItem, {}), !useConfiguredItems && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Sign out" })] })), resolvedFooter] })] }));
+    // The tile sits in the header's rail column: the mark is the only
+    // flow-level child, so it stays centred on the rail's axis, and the chevron
+    // hangs off it absolutely rather than pushing it sideways.
+    //
+    // Its intrinsic height is deliberately bounded — mark 28 + gap 2 + one 14px
+    // label line = 44px, with NO vertical padding — so it fits inside
+    // `--shell-header-height` even when a consumer tightens that token (the web
+    // app runs a 52px header under its window-tab strip). `max-h-full` plus the
+    // rail column's `overflow-hidden` is the belt-and-braces guard.
+    const tileTrigger = (_jsxs(DropdownMenuTrigger, { "data-meda-workspace-switcher": "tile", render: _jsx("button", { type: "button", "aria-label": `${workspace.name} workspace menu`, className: "flex max-h-full w-full min-w-0 flex-col items-center justify-center gap-0.5 rounded-lg px-1 hover:bg-accent" }), children: [_jsxs("span", { className: "relative inline-flex shrink-0", "aria-hidden": "true", children: [_jsx("span", { className: "inline-flex size-7 items-center justify-center overflow-hidden rounded-lg bg-muted text-[13px] text-foreground font-semibold ring-1 ring-border/70", children: workspace.icon ?? workspaceInitial(workspace.name) }), _jsx(ChevronDown, { size: 11, "aria-hidden": "true", className: "pointer-events-none absolute -right-1.5 -bottom-1 rounded-full bg-background text-muted-foreground" })] }), showLabel && (_jsx("span", { "data-slot": "icon-rail-label", className: "max-w-full truncate text-center font-medium text-[11px] leading-[14px] [@media(max-height:700px)]:hidden", children: workspace.name }))] }));
+    const trigger = variant === 'tile' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "flex max-h-full w-full min-w-0" }), children: tileTrigger }), _jsx(TooltipContent, { side: "bottom", children: workspace.name })] }) })) : (_jsxs(DropdownMenuTrigger, { "data-meda-workspace-switcher": "chip", render: _jsx("button", { type: "button", className: "flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-semibold hover:bg-accent" }), children: [workspace.icon != null && (_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: workspace.icon })), _jsx("span", { className: "max-w-[13rem] truncate", children: workspace.name }), _jsx(ChevronDown, { size: 16, "aria-hidden": "true" })] }));
+    return (_jsxs(DropdownMenu, { children: [trigger, _jsxs(DropdownMenuContent, { className: "min-w-[240px]", children: [!useConfiguredItems && workspaces.length > 0 && (_jsxs(_Fragment, { children: [workspaces.map((ws) => (_jsxs(DropdownMenuItem, { children: [ws.icon != null && (_jsx("span", { className: "inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-foreground ring-1 ring-border/70", "aria-hidden": "true", children: ws.icon })), ws.name] }, ws.id))), _jsx(DropdownMenuSeparator, {})] })), useConfiguredItems ? (menuItems.map((item) => (_jsxs(Fragment, { children: [renderConfiguredItem(item), item.separatorAfter && _jsx(DropdownMenuSeparator, {})] }, item.id)))) : (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { children: "Manage workspaces" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Settings" }), _jsx(DropdownMenuItem, { children: "Profile" })] })), _jsx(DropdownMenuSeparator, {}), _jsx(ThemeToggleMenuItem, {}), !useConfiguredItems && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Sign out" })] })), resolvedFooter] })] }));
 }
 /* v8 ignore next — v8 phantom duplicate function record for AppTabs (default params) */
 export function AppTabs({ renderLink } = {}) {
@@ -117,7 +133,7 @@ export function PanelToggle({ panelViews = [] } = {}) {
                     })] })] }));
 }
 /* v8 ignore next — v8 phantom duplicate function record for ShellHeader (default params) */
-export function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle = true, panelViews = [], } = {}) {
+export function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle = true, panelViews = [], headerLayout = 'split', railLabelVisibility = 'tooltip', } = {}) {
     const band = useShellViewport();
     if (band === 'mobile')
         return null;
@@ -125,8 +141,16 @@ export function ShellHeader({ globalActions, headerCenter, headerLeading, appTab
     // the WorkspaceSwitcher — separated by whitespace only (no divider line),
     // matching the design prototype's topbar spacing.
     const leadingRegion = headerLeading != null ? (_jsx("div", { className: "ml-2 flex min-w-0 items-center", children: headerLeading })) : null;
+    // Rail layout: column 1 is exactly the icon rail's width, so the switcher
+    // tile sits on the rail's axis and `headerLeading` starts precisely where
+    // the main region starts below. No left padding, `pr-4` on the right.
+    if (headerLayout === 'rail') {
+        return (_jsxs("header", { "data-meda-shell-header": "", "data-meda-header-layout": "rail", className: cn('grid h-[var(--shell-header-height)] w-full items-center bg-background pr-4', railLabelVisibility === 'visible'
+                ? 'grid-cols-[var(--shell-rail-label-width)_minmax(0,1fr)_auto]'
+                : 'grid-cols-[var(--shell-rail-width)_minmax(0,1fr)_auto]', className), children: [_jsx("div", { className: "flex h-full min-w-0 items-center justify-center overflow-hidden px-1", children: _jsx(WorkspaceSwitcher, { menuItems: workspaceMenuItems, menuFooter: workspaceMenuFooter, variant: "tile", showLabel: railLabelVisibility === 'visible' }) }), _jsx("div", { className: "flex min-w-0 items-center", children: headerLeading }), _jsxs("div", { className: "flex shrink-0 items-center gap-2 justify-self-end pl-4", children: [globalActions, showPanelToggle && _jsx(PanelToggle, { panelViews: panelViews })] })] }));
+    }
     if (headerCenter !== undefined) {
-        return (_jsxs("header", { className: cn('grid h-[var(--shell-header-height)] w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center', 'gap-4 bg-background px-4', className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2 justify-self-start", children: [_jsx(WorkspaceSwitcher, { menuItems: workspaceMenuItems, menuFooter: workspaceMenuFooter }), leadingRegion] }), _jsx("div", { className: "flex min-w-0 items-center justify-center justify-self-center", children: headerCenter }), _jsxs("div", { className: "flex min-w-0 items-center justify-end gap-2 justify-self-end", children: [globalActions, showPanelToggle && _jsx(PanelToggle, { panelViews: panelViews })] })] }));
+        return (_jsxs("header", { "data-meda-shell-header": "", "data-meda-header-layout": "split", className: cn('grid h-[var(--shell-header-height)] w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center', 'gap-4 bg-background px-4', className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2 justify-self-start", children: [_jsx(WorkspaceSwitcher, { menuItems: workspaceMenuItems, menuFooter: workspaceMenuFooter }), leadingRegion] }), _jsx("div", { className: "flex min-w-0 items-center justify-center justify-self-center", children: headerCenter }), _jsxs("div", { className: "flex min-w-0 items-center justify-end gap-2 justify-self-end", children: [globalActions, showPanelToggle && _jsx(PanelToggle, { panelViews: panelViews })] })] }));
     }
-    return (_jsxs("header", { className: cn('flex h-[var(--shell-header-height)] w-full items-center justify-between', 'gap-4 bg-background px-4', className), children: [_jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: [_jsx(WorkspaceSwitcher, { menuItems: workspaceMenuItems, menuFooter: workspaceMenuFooter }), leadingRegion] }), _jsx("div", { className: "flex min-w-0 flex-1 items-center", children: _jsx(AppTabs, { renderLink: appTabsRenderLink }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [globalActions, showPanelToggle && _jsx(PanelToggle, { panelViews: panelViews })] })] }));
+    return (_jsxs("header", { "data-meda-shell-header": "", "data-meda-header-layout": "split", className: cn('flex h-[var(--shell-header-height)] w-full items-center justify-between', 'gap-4 bg-background px-4', className), children: [_jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: [_jsx(WorkspaceSwitcher, { menuItems: workspaceMenuItems, menuFooter: workspaceMenuFooter }), leadingRegion] }), _jsx("div", { className: "flex min-w-0 flex-1 items-center", children: _jsx(AppTabs, { renderLink: appTabsRenderLink }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [globalActions, showPanelToggle && _jsx(PanelToggle, { panelViews: panelViews })] })] }));
 }

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

@@ -5,4 +5,4 @@ export interface ShellMainProps {
     className?: string;
     children: ReactNode;
 }
-export declare function ShellMain({ layout, className, children }: ShellMainProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShellMain({ layout, className, children }: ShellMainProps): import("react").JSX.Element;

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

@@ -74,5 +74,5 @@ export interface MedaShellProviderProps {
     themeAdapter?: 'default' | 'next-themes' | ThemeAdapter;
     children: ReactNode;
 }
-export declare function MedaShellProvider(props: MedaShellProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MedaShellProvider(props: MedaShellProviderProps): import("react").JSX.Element;
 export {};

package/dist/shell/theme-next-themes.d.ts

@@ -1,4 +1,4 @@
 import { type ReactNode } from 'react';
 export declare function NextThemesAdapter({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/shell/theme.d.ts

@@ -4,6 +4,6 @@ import type { ThemeAdapter } from './types.js';
 export declare const ThemeCtx: import("react").Context<ThemeAdapter | null>;
 export declare function DefaultThemeProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useTheme(): ThemeAdapter;
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggle(): import("react").JSX.Element;

package/dist/shell/types.d.ts

@@ -49,6 +49,19 @@ export interface PanelView {
 }
 export type PanelMode = 'closed' | 'panel' | 'expanded' | 'fullscreen';
 export type ShellMainLayout = 'workspace' | 'centered' | 'fullbleed';
+/**
+ * Desktop header grid.
+ *
+ * - `split` (default, unchanged) — the workspace switcher and `headerLeading`
+ *   share the LEFT region; `headerCenter`, when supplied, owns the middle and
+ *   the leading region is capped at roughly half the window.
+ * - `rail` — a three-column grid `[rail column | fill | actions]`. Column 1 is
+ *   exactly as wide as the icon rail below it and holds the workspace switcher
+ *   in its `tile` variant; column 2 is `headerLeading` and gets ALL remaining
+ *   width; column 3 is `globalActions` (plus the panel toggle). `headerCenter`
+ *   is ignored in this layout.
+ */
+export type ShellHeaderLayout = 'split' | 'rail';
 export type ShellViewport = 'mobile' | 'tablet' | 'desktop' | 'wide' | 'ultrawide';
 export type ContextRailHeader = 'auto' | 'visible' | 'hidden';
 export type ContextRailScroll = 'auto' | 'none';
@@ -116,6 +129,23 @@ export interface AppShellMobileNavConfig {
     tree: MobileNavTree;
     /** The `to` of the currently-active row, for highlighting. */
     activeTo?: string;
+    /**
+     * The `id` of the currently-active APP (a `dock` item id and/or a
+     * `tree` row id). When set it wins over `activeTo` for:
+     *
+     * - the dock — a slot lights when `item.id === activeId`, so the dock stays
+     *   lit on every route inside that app instead of only on its first tab;
+     * - the workspace sheet — that row is the one expanded and scrolled into
+     *   view when the sheet opens.
+     *
+     * Omit it to keep the pre-2.8 behaviour (both derive from `activeTo`).
+     */
+    activeId?: string;
+    /**
+     * Render the current row (see `activeId` / `activeTo`) first inside its
+     * group in the workspace sheet. Defaults to `false` — the tree order.
+     */
+    currentFirst?: boolean;
     /** Render dock/sheet targets as router links (else plain `<a>`). */
     renderLink?: (args: MobileNavLinkArgs) => ReactNode;
     /**
@@ -183,6 +213,14 @@ export interface AppShellContextRailConfig {
 export interface AppShellRightPanelConfig {
     panelViews: PanelView[];
     defaultView?: string;
+    /**
+     * Whether the header renders its `PanelToggle`. Defaults to `true`, i.e. the
+     * toggle shows whenever at least one panel view is registered (the pre-2.8
+     * behaviour). Set `false` to keep the panel views — and every other way of
+     * opening them, such as `useMedaShell().panel.focus(id)` or a command — while
+     * dropping the header control.
+     */
+    showToggle?: boolean;
 }
 /**
  * A single configurable item in the WorkspaceSwitcher dropdown.

package/dist/shell/use-shell-viewport.js

@@ -34,7 +34,9 @@ function subscribeToViewport(onChange) {
     const matchMedia = getMatchMedia();
     if (!matchMedia) {
         subscribedMqls = null;
-        return () => { };
+        return () => {
+            // no matchMedia (SSR/test) - nothing to unsubscribe
+        };
     }
     const mqls = Object.entries(BREAKPOINTS).map(([band, query]) => [band, matchMedia(query)]);
     subscribedMqls = mqls;

package/dist/timeline/date-switcher.d.ts

@@ -8,4 +8,4 @@ export interface DateSwitcherProps {
     onChange: (next: Date) => void;
     className?: string;
 }
-export declare function DateSwitcher({ value, now, tz, onChange, className }: DateSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateSwitcher({ value, now, tz, onChange, className }: DateSwitcherProps): import("react").JSX.Element;

package/dist/timeline/event-card.d.ts

@@ -6,4 +6,4 @@ export interface EventCardProps {
     onSelect?: (event: TimelineEvent) => void;
     className?: string;
 }
-export declare function EventCard({ event, size, onSelect, className }: EventCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventCard({ event, size, onSelect, className }: EventCardProps): import("react").JSX.Element;

package/dist/timeline/lane-timeline.d.ts

@@ -1,2 +1,2 @@
 import { type LaneTimelineProps } from './lane-timeline-types.js';
-export declare function LaneTimeline({ lanes, now, defaultRange, range: controlledRange, onRangeChange, selectedDate: controlledDate, onDateChange, title, groupChip, activeCount, legend, selectedBarId, onSelectBar, labels, className, }: LaneTimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function LaneTimeline({ lanes, now, defaultRange, range: controlledRange, onRangeChange, selectedDate: controlledDate, onDateChange, title, groupChip, activeCount, legend, selectedBarId, onSelectBar, labels, className, }: LaneTimelineProps): import("react").JSX.Element;

package/dist/timeline/lane.d.ts

@@ -7,4 +7,4 @@ export interface LaneRowProps {
     selectedBarId?: string;
     onSelectBar?: (bar: LaneBar, lane: Lane) => void;
 }
-export declare function LaneRow({ lane, windowStart, windowEnd, labelGutterPx, selectedBarId, onSelectBar, }: LaneRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function LaneRow({ lane, windowStart, windowEnd, labelGutterPx, selectedBarId, onSelectBar, }: LaneRowProps): import("react").JSX.Element;

package/dist/timeline/live-indicator.d.ts

@@ -4,4 +4,4 @@ export interface LiveIndicatorProps {
     tz?: string;
     className?: string;
 }
-export declare function LiveIndicator({ now, tz, className }: LiveIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function LiveIndicator({ now, tz, className }: LiveIndicatorProps): import("react").JSX.Element;

package/dist/timeline/scrub-bar.d.ts

@@ -11,4 +11,4 @@ export interface ScrubBarProps {
     onSkipForward?: () => void;
     className?: string;
 }
-export declare function ScrubBar({ durationMs, positionMs, isLive, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }: ScrubBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrubBar({ durationMs, positionMs, isLive, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }: ScrubBarProps): import("react").JSX.Element;

package/dist/timeline/time-axis.d.ts

@@ -15,4 +15,4 @@ export interface TimeAxisProps {
     /** Width of the lane-label gutter on the left, in px (matches Lane component). */
     labelGutterPx: number;
 }
-export declare function TimeAxis({ range, onRangeChange, selectedDate, onDateChange, now, title, groupChip, activeCount, labels, ticks, labelGutterPx, }: TimeAxisProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeAxis({ range, onRangeChange, selectedDate, onDateChange, now, title, groupChip, activeCount, labels, ticks, labelGutterPx, }: TimeAxisProps): import("react").JSX.Element;

package/dist/timeline/timeline-rail.d.ts

@@ -16,4 +16,4 @@ export interface TimelineRailProps {
     onManageRetention?: () => void;
     className?: string;
 }
-export declare function TimelineRail({ date, now, events, zoom, followLive, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }: TimelineRailProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimelineRail({ date, now, events, zoom, followLive, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }: TimelineRailProps): import("react").JSX.Element;

package/dist/timeline/timeline-tape.d.ts

@@ -16,4 +16,4 @@ export interface TimelineTapeProps {
     onSelect?: (event: TimelineEvent) => void;
     className?: string;
 }
-export declare function TimelineTape({ now, events, pxPerSec, futurePadSec, pastSpanSec, tz, onSelect, className, }: TimelineTapeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimelineTape({ now, events, pxPerSec, futurePadSec, pastSpanSec, tz, onSelect, className, }: TimelineTapeProps): import("react").JSX.Element;

package/dist/voice/voice-level.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export interface VoiceLevelProps {
     level: number;
     variant?: 'bars' | 'wave' | 'ring';
@@ -5,4 +6,4 @@ export interface VoiceLevelProps {
     height?: number;
     className?: string;
 }
-export declare function VoiceLevel({ level, variant, width, height, className, }: VoiceLevelProps): import("react/jsx-runtime").JSX.Element;
+export declare function VoiceLevel({ level, variant, width, height, className, }: VoiceLevelProps): React.JSX.Element;

package/dist/voice/voice-orb-scene.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { TurnPhase } from './types.js';
 export type VoiceOrbVariant = 'metal' | 'aurora';
 export interface SceneProps {
@@ -9,4 +10,4 @@ export interface SceneProps {
     pressed?: boolean;
     variant?: VoiceOrbVariant;
 }
-export declare function Scene({ level, outputLevel, phase, colors, reducedMotion, pressed, variant, }: SceneProps): import("react/jsx-runtime").JSX.Element;
+export declare function Scene({ level, outputLevel, phase, colors, reducedMotion, pressed, variant, }: SceneProps): React.JSX.Element;

package/dist/voice/voice-status-pill.d.ts

@@ -4,4 +4,4 @@ export interface VoiceStatusPillProps {
     thinkingForMs?: number;
     className?: string;
 }
-export declare function VoiceStatusPill({ phase, thinkingForMs, className }: VoiceStatusPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function VoiceStatusPill({ phase, thinkingForMs, className }: VoiceStatusPillProps): import("react").JSX.Element;

package/dist/workflow-builder/edges/default-edge.d.ts

@@ -5,6 +5,6 @@ interface DefaultEdgeData {
 type DefaultWorkflowEdgeProps = EdgeProps & {
     data?: DefaultEdgeData;
 };
-declare function DefaultWorkflowEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, }: DefaultWorkflowEdgeProps): import("react/jsx-runtime").JSX.Element;
+declare function DefaultWorkflowEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, }: DefaultWorkflowEdgeProps): import("react").JSX.Element;
 export declare const DefaultWorkflowEdge: import("react").MemoExoticComponent<typeof DefaultWorkflowEdgeComponent>;
 export {};

package/dist/workflow-builder/nodes/action-node.d.ts

@@ -1,3 +1,3 @@
 import type { NodeProps } from '@xyflow/react';
 import type { WorkflowNode } from '../types.js';
-export declare function ActionNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;
+export declare function ActionNode({ data, selected }: NodeProps<WorkflowNode>): import("react").JSX.Element;

package/dist/workflow-builder/nodes/base-node.d.ts

@@ -17,4 +17,4 @@ export interface BaseWorkflowNodeProps {
         label?: string;
     }>;
 }
-export declare function BaseWorkflowNode({ kind, icon, label, description, warning, selected, showSourceHandle, showTargetHandle, sourceHandles, }: BaseWorkflowNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseWorkflowNode({ kind, icon, label, description, warning, selected, showSourceHandle, showTargetHandle, sourceHandles, }: BaseWorkflowNodeProps): import("react").JSX.Element;

package/dist/workflow-builder/nodes/condition-node.d.ts

@@ -1,3 +1,3 @@
 import { type NodeProps } from '@xyflow/react';
 import type { WorkflowNode } from '../types.js';
-export declare function ConditionNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionNode({ data, selected }: NodeProps<WorkflowNode>): import("react").JSX.Element;

package/dist/workflow-builder/nodes/delay-node.d.ts

@@ -1,3 +1,3 @@
 import type { NodeProps } from '@xyflow/react';
 import type { WorkflowNode } from '../types.js';
-export declare function DelayNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;
+export declare function DelayNode({ data, selected }: NodeProps<WorkflowNode>): import("react").JSX.Element;

package/dist/workflow-builder/nodes/end-node.d.ts

@@ -1,3 +1,3 @@
 import type { NodeProps } from '@xyflow/react';
 import type { WorkflowNode } from '../types.js';
-export declare function EndNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;
+export declare function EndNode({ data, selected }: NodeProps<WorkflowNode>): import("react").JSX.Element;

package/dist/workflow-builder/nodes/trigger-node.d.ts

@@ -1,3 +1,3 @@
 import type { NodeProps } from '@xyflow/react';
 import type { WorkflowNode } from '../types.js';
-export declare function TriggerNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;
+export declare function TriggerNode({ data, selected }: NodeProps<WorkflowNode>): import("react").JSX.Element;

package/dist/workflow-builder/workflow-builder.d.ts

@@ -7,4 +7,4 @@ import { type WorkflowBuilderProps } from './types.js';
  * toolbox collapses behind a tab bar (mobile) and at wider widths it sits to
  * the left of the canvas.
  */
-export declare function WorkflowBuilder({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onAddNode, onSelectionChange, onNodeClick, showToolbox, readOnly, headerSlot, inspectorSlot, customNodeTypes, customEdgeTypes, labels, className, }: WorkflowBuilderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowBuilder({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onAddNode, onSelectionChange, onNodeClick, showToolbox, readOnly, headerSlot, inspectorSlot, customNodeTypes, customEdgeTypes, labels, className, }: WorkflowBuilderProps): import("react").JSX.Element;

package/dist/workflow-builder/workflow-canvas.d.ts

@@ -22,4 +22,4 @@ export interface WorkflowCanvasProps {
  * toolbox — compose with `WorkflowBuilder` for the full surface, or use this
  * alone when embedding in a custom layout.
  */
-export declare function WorkflowCanvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onNodeClick, onPaneClick, onSelectionChange, readOnly, customNodeTypes, customEdgeTypes, className, }: WorkflowCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowCanvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onNodeClick, onPaneClick, onSelectionChange, readOnly, customNodeTypes, customEdgeTypes, className, }: WorkflowCanvasProps): import("react").JSX.Element;

package/dist/workflow-builder/workflow-card-compact.d.ts

@@ -1,2 +1,2 @@
 import type { WorkflowCardCompactProps } from './types.js';
-export declare function WorkflowCardCompact({ workflow, onClick, className }: WorkflowCardCompactProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowCardCompact({ workflow, onClick, className }: WorkflowCardCompactProps): import("react").JSX.Element;

package/dist/workflow-builder/workflow-card.d.ts

@@ -1,2 +1,2 @@
 import type { WorkflowCardProps } from './types.js';
-export declare function WorkflowCard({ workflow, onClick, className }: WorkflowCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowCard({ workflow, onClick, className }: WorkflowCardProps): import("react").JSX.Element;

package/dist/workflow-builder/workflow-header.d.ts

@@ -1,2 +1,2 @@
 import { type WorkflowHeaderProps } from './types.js';
-export declare function WorkflowHeader({ name, onNameChange, status, onSave, onPublish, onPause, onBack, isSaving, readOnly, labels, className, }: WorkflowHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowHeader({ name, onNameChange, status, onSave, onPublish, onPause, onBack, isSaving, readOnly, labels, className, }: WorkflowHeaderProps): import("react").JSX.Element;

package/dist/workflow-builder/workflow-toolbox.d.ts

@@ -1,2 +1,2 @@
 import { type WorkflowToolboxProps } from './types.js';
-export declare function WorkflowToolbox({ items, onAddNode, readOnly, labels, className, }: WorkflowToolboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowToolbox({ items, onAddNode, readOnly, labels, className, }: WorkflowToolboxProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.7.2",
+  "version": "2.8.1",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -168,62 +168,63 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "1.6.0",
-    "@fontsource-variable/geist": "5.2.8",
-    "@fontsource-variable/geist-mono": "5.2.7",
+    "@base-ui/react": "1.8.0",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "react-resizable-panels": "4.11.0",
-    "tailwind-merge": "3.5.0",
-    "three": "0.184.0",
+    "react-resizable-panels": "4.13.1",
+    "tailwind-merge": "3.7.0",
+    "three": "0.185.1",
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.14",
-    "@changesets/changelog-github": "0.6.0",
-    "@changesets/cli": "2.31.0",
+    "@biomejs/biome": "2.5.14",
+    "@changesets/changelog-github": "1.0.1",
+    "@changesets/cli": "3.0.3",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@react-three/fiber": "9.6.1",
-    "@size-limit/preset-small-lib": "12.1.0",
-    "@storybook/addon-a11y": "10.3.6",
-    "@storybook/addon-docs": "10.3.6",
-    "@storybook/addon-mcp": "0.6.0",
-    "@storybook/addon-themes": "10.3.6",
-    "@storybook/addon-vitest": "10.3.6",
-    "@storybook/react-vite": "10.3.6",
-    "@tailwindcss/vite": "4.2.4",
-    "@tanstack/intent": "0.0.41",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.2",
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "@types/three": "0.184.0",
-    "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser-playwright": "4.1.5",
-    "@vitest/coverage-istanbul": "4.1.5",
-    "@vitest/coverage-v8": "4.1.5",
-    "@xyflow/react": "12.10.2",
-    "chromatic": "16.6.3",
+    "@react-three/fiber": "9.7.0",
+    "@size-limit/preset-small-lib": "13.0.3",
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/addon-mcp": "10.6.0",
+    "@storybook/addon-themes": "10.6.0",
+    "@storybook/addon-vitest": "10.6.0",
+    "@storybook/react-vite": "10.6.0",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/intent": "0.4.0",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@types/three": "0.185.4",
+    "@vitejs/plugin-react": "6.1.1",
+    "@vitest/browser-playwright": "4.1.11",
+    "@vitest/coverage-istanbul": "4.1.11",
+    "@vitest/coverage-v8": "4.1.11",
+    "@xyflow/react": "12.11.6",
+    "chromatic": "18.9.4",
+    "fast-check": "4.10.2",
     "husky": "9.1.7",
-    "jsdom": "29.1.1",
+    "jsdom": "30.1.0",
     "next-themes": "0.4.6",
-    "playwright": "1.59.1",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
+    "playwright": "1.63.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-markdown": "10.1.0",
     "rehype-highlight": "7.0.2",
     "remark-gfm": "4.0.1",
-    "size-limit": "12.1.0",
-    "storybook": "10.3.6",
-    "tailwindcss": "4.2.4",
+    "size-limit": "13.0.3",
+    "storybook": "10.6.0",
+    "tailwindcss": "4.3.3",
     "typescript": "~6.0.3",
-    "vite": "8.0.10",
-    "vitest": "4.1.5",
+    "vite": "8.3.0",
+    "vitest": "4.1.11",
     "vitest-axe": "0.1.0",
-    "wrangler": "4.87.0"
+    "wrangler": "4.135.0"
   },
   "keywords": [
     "tanstack-intent"

package/skills/shell/SKILL.md

@@ -21,11 +21,69 @@ The package exports a single `<AppShell>` component with a discriminated `varian
 | Variant | When to use | Key config |
 |---|---|---|
 | `'auth'` | Sign-in / sign-up / password reset / OAuth callbacks. Lets the form scroll past viewport (dense forms, high zoom). | `auth`, `branding`, optional `preview` (right-side art) + `actions` (top-right) |
-| `'workspace'` | Logged-in product shell. Has icon rail + context rail + header + main + optional right panel. | `iconRail`, `contextRail`, `rightPanel`, `workspace` (menu items override), `appTabs` (router integration), `headerCenter`, `banners`, `mainLayout`, `globalActions` |
+| `'workspace'` | Logged-in product shell. Has icon rail + context rail + header + main + optional right panel. | `iconRail`, `contextRail`, `rightPanel`, `workspace` (menu items override), `appTabs` (router integration), `headerCenter`, `headerLeading`, `headerLayout`, `banners`, `mainLayout`, `globalActions`, `mobileNav` |
 | `'chat'` | Chat-first surfaces (full-bleed messaging UI; no rails). | `globalActions` |
 
 `AppShellWorkspace.workspace.menuItems` REPLACES the default workspace dropdown ("Manage workspaces / Settings / Profile / Sign out") when provided. **The theme toggle is preserved automatically** — consumers do not have to re-implement theme cycling.
 
+## Header layout — `split` (default) vs `rail`
+
+`headerLayout` picks the desktop header grid. `split` is the historic layout and stays the default.
+
+| | `split` (default) | `rail` |
+|---|---|---|
+| Grid | `[1fr, auto, 1fr]` when `headerCenter` is set, else flex | `[rail width, minmax(0,1fr), auto]` |
+| Column 1 | workspace switcher (`chip`) + `headerLeading` | workspace switcher (`tile`), centred on the rail's axis |
+| Column 2 | `headerCenter` | `headerLeading`, `min-w-0`, **all** remaining width |
+| Column 3 | `globalActions` + `PanelToggle` | `globalActions` + `PanelToggle` |
+| `headerCenter` | rendered | **ignored** |
+| Padding | `px-4` | none on the left, `pr-4` |
+
+Reach for `rail` when the app's section tabs live in the header: in `split` they are capped at
+roughly half the window AND they shift horizontally with the workspace name, because the switcher
+sizes to that name. In `rail` the switcher is boxed into the rail column, so the tabs start at a
+fixed x — the same x the main region starts at below.
+
+Column 1's width comes from `iconRail.labelVisibility`: `--shell-rail-label-width` for `visible`,
+`--shell-rail-width` for the default `tooltip`. `AppShell` wires this for you; if you render
+`<ShellHeader>` by hand, mirror it into `railLabelVisibility` yourself or the header and the rail
+will disagree.
+
+**Target the header with `data-meda-shell-header`**, present on both layouts (alongside
+`data-meda-header-layout="split" | "rail"`). Do NOT reach for it structurally — a selector like
+`.flex.h-svh > header` breaks silently on any markup change.
+
+## WorkspaceSwitcher variants
+
+`variant="chip"` (default) is the horizontal mark · name · chevron button. `variant="tile"` is the
+rail-column shape the `rail` header uses: a full-width button with the mark on the rail axis, the
+name beneath it in `data-slot="icon-rail-label"` type, and a small chevron hung off the mark so
+the mark itself never leaves the axis. Its accessible name is `"<workspace name> workspace menu"`.
+Pass `showLabel={false}` in icon-only rail mode. The dropdown — items, theme toggle, footer,
+keyboard and dismiss behaviour — is identical in both.
+
+**The tile's height is a budget, not a suggestion.** It has to fit inside
+`--shell-header-height`, which consumers retune (the web app runs 52px under its desktop
+window-tab strip) and which is a fixed `height` — so anything taller overlaps the chrome around
+it rather than growing the header. The tile spends 28px on the mark + a 2px gap + ONE 14px label
+line = 44px, with **no vertical padding**, plus `max-h-full` and an `overflow-hidden` rail column.
+Change any of those and re-check the sum against 52px, not 64px.
+
+That one-line label truncates, and hides entirely below 700px viewport height like every other
+rail label. So the tile always renders a tooltip carrying the full workspace name — the same
+`Tooltip` primitive the icon rail uses, rendered unconditionally rather than on the rail's
+`!showLabel || isShortViewport` rule, because unlike a rail item the tile can also be
+visible-but-truncated. **Any new rail-width control whose label can truncate or hide needs the
+same tooltip:** an accessible name alone is not a substitute for a sighted user.
+
+## Keeping panel views without the header toggle
+
+`rightPanel.showToggle: false` drops the header's `PanelToggle` while the views stay registered and
+openable from anywhere else (`useMedaShell().panel.focus(id)`, a command, a route). It cannot do
+the reverse — a toggle with no views is still hidden, because it would be a dead end. Do NOT hide
+the toggle with consumer CSS such as `[data-meda-global-actions] + * { display: none }`; that is
+what this prop replaces.
+
 ## MedaShellProvider — the runtime root
 
 Wrap your app once with `<MedaShellProvider>` (typically in the root layout). Props:
@@ -129,6 +187,26 @@ Each hook auto-handles register-on-mount and unregister-on-unmount via `useEffec
 
 The default palette hotkey is `'mod+k'` — override via `MedaShellProvider.commandPaletteHotkey`. Hotkey matching is strict modifier-aware: `'mod+k'` does NOT fire on `mod+shift+k`. Use `'mod'` (resolves to ⌘ on macOS, Ctrl on Windows/Linux), not platform-specific keywords.
 
+## Mobile dock + workspace sheet — light by app, open where you are
+
+`mobileNav.activeTo` is the exact address of the active row. On its own it makes the dock go dark
+as soon as the user leaves an app's first tab, because a dock slot only lights on
+`item.to === activeTo`. Pass `mobileNav.activeId` — the active APP's id — alongside it:
+
+- **Dock:** a slot is active iff `item.id === activeId`. Action slots (`open-sheet`, `open-ai`,
+  `open-command-palette`) light only through `activeId`, never through the `activeTo` fallback.
+  An `emphasis: 'brand'` slot keeps its brand disc when active and gains a ring plus a primary
+  label — **active always outranks brand.** A slot that carries `aria-current="page"` must carry a
+  visible treatment too; a variant branch that reassigns the tone after the active check (the
+  `let toneClass` ladder in `mobile-dock.tsx`) is exactly how that regresses.
+- **Workspace sheet:** that row is expanded and scrolled into view on every open. The user can
+  still collapse it, and it re-expands on the next open. With no `activeId` the sheet derives the
+  row from `activeTo` — an exact `to` match first, then the row that owns `activeTo` among its
+  preset `views`.
+- **`mobileNav.currentFirst`:** renders that row first inside its group.
+
+Omit `activeId` and both surfaces behave exactly as they did before it existed.
+
 ## Right panel patterns
 
 Use a single `RightPanel` per shell. Don't build a parallel right-side surface — multiple right panels create state and dismiss-behavior conflicts. For a stacked detail experience, register multiple `PanelView`s with the existing `PanelViewsProvider` (`src/shell/panel-views-provider.tsx`).
@@ -149,3 +227,10 @@ Use a single `RightPanel` per shell. Don't build a parallel right-side surface
 | Multiple `RightPanel`s in one shell | Dismiss/state conflicts | Use `PanelViewsProvider` for stacked detail |
 | Forking `MedaShellProvider` per app | Loses cross-consumer parity | Compose around it; pass a custom `ThemeAdapter` for theme integration |
 | Hard-coded modifier in hotkey strings (`'cmd+k'`) | Breaks on Windows/Linux | Use `'mod+k'` — resolves per-platform |
+| Selecting the header structurally (`.flex.h-svh > header`) | Breaks silently on any markup change | Target `[data-meda-shell-header]` |
+| Hiding the panel toggle with consumer CSS | Depends on internal sibling order | `rightPanel={{ showToggle: false }}` |
+| Passing `headerCenter` together with `headerLayout="rail"` | The rail grid has no centre column; the node never renders | Put the content in `headerLeading` |
+| Lighting the mobile dock from `activeTo` alone | Goes dark on every route past an app's first tab | Also pass `mobileNav.activeId` |
+| A rail-width control whose label truncates or hides, with no tooltip | The name becomes unrecoverable for sighted users | Add the `Tooltip` the icon rail and switcher tile use |
+| Letting a variant branch (brand, emphasis) reassign the tone after the active check | `aria-current` with no visible state | Test the active state of every variant, not just the default one |
+| Adding vertical padding or a second label line to the switcher tile | Overflows a 52px `--shell-header-height` | Keep the tile inside its 44px budget |