@medalsocial/meda 2.6.0 → 2.7.1

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

@@ -43,8 +43,11 @@ export function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace
     // nested viewport-height divs collapse cleanly — no double-scroll.
     const commandRegistry = useContext(CommandRegistryContext);
     const shell = (_jsxs("div", { className: "flex h-svh flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions, headerCenter: headerCenter })) : (_jsx(ShellHeader, { globalActions: globalActions, headerCenter: headerCenter, headerLeading: headerLeading, appTabsRenderLink: appTabs?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, showPanelToggle: resolvedRightPanel.panelViews.length > 0, panelViews: resolvedRightPanel.panelViews })), banners ? (_jsx("div", { "data-meda-banners": "", className: "flex-shrink-0", children: banners })) : (false), _jsxs("div", { className: "relative flex flex-1 overflow-hidden", children: [!isMobile && iconRail && (_jsx(IconRail, { mainItems: iconRail.mainItems, utilityItems: iconRail.utilityItems, footer: iconRail.footer, activeId: iconRail.activeId, renderLink: iconRail.renderLink, labelVisibility: iconRail.labelVisibility })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId, renderLink: contextRail.renderLink, header: contextRail.header, scroll: contextRail.scroll })), _jsx(ShellMain, { layout: mainLayout ?? 'workspace', className: cn(mainClassName, 
-                        // Pad the scroll area so the floating dock never covers content.
-                        isMobile && mobileNav && 'pb-[calc(env(safe-area-inset-bottom)+80px)]'), children: children }), !isMobile && resolvedRightPanel.panelViews.length > 0 && (_jsx(RightPanel, { panelViews: staticPanelViews, defaultView: rightPanel?.defaultView }))] }), isMobile && mobileNav ? (_jsxs(_Fragment, { children: [_jsx(MobileDock, { items: mobileNav.dock, activeTo: mobileNav.activeTo, renderLink: mobileNav.renderLink }), _jsx(MobileWorkspaceSheet, { tree: mobileNav.tree, activeTo: mobileNav.activeTo, renderLink: mobileNav.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter })] })) : (_jsxs(_Fragment, { children: [isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, menuActiveId: iconRail?.activeId, menuRenderLink: iconRail?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, module: contextRail?.module, moduleAppId: contextRail?.appId, moduleActiveItemId: contextRail?.activeItemId, moduleRenderLink: contextRail?.renderLink, moduleHeader: contextRail?.header, moduleScroll: contextRail?.scroll, sectionTabs: headerLeading, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }))] }));
+                        // Pad the scroll area so the dock never covers content. 64px is
+                        // the bar-variant dock's intrinsic height (py-2 + 25px icon +
+                        // label) — the previous 80px over-reserved 16px of permanently
+                        // unreachable space at the bottom of every mobile surface.
+                        isMobile && mobileNav && 'pb-[calc(env(safe-area-inset-bottom)+64px)]'), children: children }), !isMobile && resolvedRightPanel.panelViews.length > 0 && (_jsx(RightPanel, { panelViews: staticPanelViews, defaultView: rightPanel?.defaultView }))] }), isMobile && mobileNav ? (_jsxs(_Fragment, { children: [_jsx(MobileDock, { items: mobileNav.dock, activeTo: mobileNav.activeTo, renderLink: mobileNav.renderLink, variant: mobileNav.variant }), _jsx(MobileWorkspaceSheet, { tree: mobileNav.tree, activeTo: mobileNav.activeTo, renderLink: mobileNav.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter })] })) : (_jsxs(_Fragment, { children: [isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, menuActiveId: iconRail?.activeId, menuRenderLink: iconRail?.renderLink, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter, module: contextRail?.module, moduleAppId: contextRail?.appId, moduleActiveItemId: contextRail?.activeItemId, moduleRenderLink: contextRail?.renderLink, moduleHeader: contextRail?.header, moduleScroll: contextRail?.scroll, sectionTabs: headerLeading, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }))] }));
     // Backwards-compatible default: meda provides the built-in CommandPalette
     // (and its CommandRegistryContext) so consumers calling useCommands()/
     // useCommandGroup() under the workspace shell keep working. When a registry is

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

@@ -7,11 +7,18 @@ export interface MobileDockProps {
     activeTo?: string;
     renderLink?: (args: MobileNavLinkArgs) => ReactNode;
     className?: string;
+    /** `pill` (default) floating dock, or `bar` full-width labeled bottom bar. */
+    variant?: 'pill' | 'bar';
 }
 /**
- * Floating mobile dock — a pill of pinned destinations plus a workspace-sheet
- * trigger, with any `emphasis: 'brand'` item rendered as a standalone circle
- * (e.g. Pilot) beside the pill. Replaces the bordered bottom bar. Hidden on
- * non-mobile viewports and when the right panel is fullscreen.
+ * Mobile dock — pinned destinations plus a workspace-sheet trigger. Two shapes:
+ *
+ * - `pill` (default): a floating, centered pill of icon-only slots, with any
+ *   `emphasis: 'brand'` item (e.g. Pilot) as a standalone circle beside it.
+ * - `bar`: a flat, full-width bottom bar of evenly-spread slots — each a larger
+ *   icon + label with a tinted active state — mirroring the native app. The
+ *   brand item sits inline as the last slot (a filled circle).
+ *
+ * Hidden on non-mobile viewports and when the right panel is fullscreen.
  */
-export declare function MobileDock({ items, activeTo, renderLink, className }: MobileDockProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileDock({ items, activeTo, renderLink, className, variant, }: MobileDockProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,5 +1,5 @@
 '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 { createElement, isValidElement } from 'react';
 import { cn } from '../../lib/utils.js';
 import { useMedaShell } from '../shell-provider.js';
@@ -18,12 +18,17 @@ function renderIcon(icon, size) {
     return null;
 }
 /**
- * Floating mobile dock — a pill of pinned destinations plus a workspace-sheet
- * trigger, with any `emphasis: 'brand'` item rendered as a standalone circle
- * (e.g. Pilot) beside the pill. Replaces the bordered bottom bar. Hidden on
- * non-mobile viewports and when the right panel is fullscreen.
+ * Mobile dock — pinned destinations plus a workspace-sheet trigger. Two shapes:
+ *
+ * - `pill` (default): a floating, centered pill of icon-only slots, with any
+ *   `emphasis: 'brand'` item (e.g. Pilot) as a standalone circle beside it.
+ * - `bar`: a flat, full-width bottom bar of evenly-spread slots — each a larger
+ *   icon + label with a tinted active state — mirroring the native app. The
+ *   brand item sits inline as the last slot (a filled circle).
+ *
+ * Hidden on non-mobile viewports and when the right panel is fullscreen.
  */
-export function MobileDock({ items, activeTo, renderLink, className }) {
+export function MobileDock({ items, activeTo, renderLink, className, variant = 'pill', }) {
     const ctx = useMedaShell();
     const band = useShellViewport();
     if (band !== 'mobile')
@@ -32,8 +37,6 @@ export function MobileDock({ items, activeTo, renderLink, className }) {
         return null;
     if (items.length === 0)
         return null;
-    const pillItems = items.filter((item) => item.emphasis !== 'brand');
-    const brandItems = items.filter((item) => item.emphasis === 'brand');
     const runAction = (item) => {
         if (item.action === 'open-sheet')
             ctx.mobileDrawer.setOpen(WORKSPACE_SHEET_KEY);
@@ -42,6 +45,45 @@ export function MobileDock({ items, activeTo, renderLink, className }) {
         else if (item.action === 'open-command-palette')
             ctx.commandPalette.setOpen(true);
     };
+    // ── Full-width bar (native-app style) ──────────────────────────────────
+    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 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));
+            let toneClass = 'text-muted-foreground hover:text-foreground';
+            if (isBrand)
+                toneClass = 'text-muted-foreground';
+            else if (isActive)
+                toneClass = 'font-medium text-primary';
+            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) {
+                if (renderLink) {
+                    return renderLink({
+                        to: item.to,
+                        isActive,
+                        className: slotClass,
+                        children,
+                        onNavigate: () => undefined,
+                        linkProps: {
+                            href: item.to,
+                            className: slotClass,
+                            'aria-label': label,
+                            'aria-current': isActive ? 'page' : undefined,
+                        },
+                    });
+                }
+                return (_jsx("a", { href: item.to, className: slotClass, "aria-label": label, "aria-current": isActive ? 'page' : undefined, children: children }));
+            }
+            return (_jsx("button", { type: "button", onClick: () => runAction(item), "aria-label": label, className: slotClass, children: children }));
+        };
+        return (_jsx("nav", { "data-testid": "mobile-dock", "aria-label": "Dock", className: cn('absolute inset-x-0 bottom-0 z-30 flex items-stretch border-t border-border bg-card pb-[env(safe-area-inset-bottom)]', className), children: items.map((item) => (_jsx("div", { className: "flex flex-1", children: renderBarSlot(item) }, item.id))) }));
+    }
+    // ── Floating pill (default) ────────────────────────────────────────────
+    const pillItems = items.filter((item) => item.emphasis !== 'brand');
+    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);

package/dist/shell/types.d.ts

@@ -118,6 +118,14 @@ export interface AppShellMobileNavConfig {
     activeTo?: string;
     /** Render dock/sheet targets as router links (else plain `<a>`). */
     renderLink?: (args: MobileNavLinkArgs) => ReactNode;
+    /**
+     * Dock presentation:
+     * - `pill` (default) — a floating, centered pill of icon-only slots with any
+     *   `emphasis: 'brand'` item as a standalone circle beside it.
+     * - `bar` — a flat, full-width bottom bar of evenly-spread slots, each with a
+     *   larger icon + label and a tinted active state (mirrors the native app).
+     */
+    variant?: 'pill' | 'bar';
 }
 export interface ShellRenderContext {
     workspaceId: string;

package/dist/shell/use-shell-viewport.d.ts

@@ -1,2 +1,19 @@
 import type { ShellViewport } from './types.js';
+/**
+ * The shell's viewport band, resolved SYNCHRONOUSLY on the first client
+ * render.
+ *
+ * The previous implementation seeded `useState('desktop')` and detected the
+ * real band in a post-mount effect. Because effects run after the first
+ * commit, phones mounted the entire desktop shell tree (ShellHeader,
+ * IconRail, ContextRail, RightPanel — plus whatever subscriptions consumers
+ * hang off them) and immediately tore it down for the mobile tree: throwaway
+ * work on the mobile critical path on every load.
+ *
+ * `useSyncExternalStore` reads `matchMedia` during the first client render,
+ * so client-rendered apps commit the correct tree once. Server rendering
+ * still returns 'desktop' via the server snapshot, and hydration stays
+ * mismatch-safe (React uses the server snapshot while hydrating, then
+ * re-reads — SSR consumers keep exactly the old behavior).
+ */
 export declare function useShellViewport(): ShellViewport;

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

@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 const BREAKPOINTS = {
     mobile: '(max-width: 767px)',
     tablet: '(min-width: 768px) and (max-width: 1023px)',
@@ -24,29 +24,61 @@ function detectViewport(matchMedia = getMatchMedia()) {
     }
     return 'desktop';
 }
+// MediaQueryLists captured at subscribe time. The snapshot reads THESE
+// instances (not fresh matchMedia() calls) so a change event and the state it
+// reports come from the same objects — and each snapshot read is a property
+// access instead of five matchMedia() calls. Refreshed on every subscribe so
+// a swapped window.matchMedia (tests, polyfills) is picked up per mount.
+let subscribedMqls = null;
+function subscribeToViewport(onChange) {
+    const matchMedia = getMatchMedia();
+    if (!matchMedia) {
+        subscribedMqls = null;
+        return () => { };
+    }
+    const mqls = Object.entries(BREAKPOINTS).map(([band, query]) => [band, matchMedia(query)]);
+    subscribedMqls = mqls;
+    const cleanups = mqls.map(([, mql]) => {
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    });
+    return () => {
+        for (const cleanup of cleanups)
+            cleanup();
+        // Don't clobber a newer subscriber's registration.
+        if (subscribedMqls === mqls)
+            subscribedMqls = null;
+    };
+}
+function getClientViewport() {
+    if (subscribedMqls) {
+        for (const [band, mql] of subscribedMqls) {
+            if (mql.matches)
+                return band;
+        }
+        return 'desktop';
+    }
+    // First render happens before subscribe — detect directly.
+    return detectViewport();
+}
+const getServerViewport = () => 'desktop';
+/**
+ * The shell's viewport band, resolved SYNCHRONOUSLY on the first client
+ * render.
+ *
+ * The previous implementation seeded `useState('desktop')` and detected the
+ * real band in a post-mount effect. Because effects run after the first
+ * commit, phones mounted the entire desktop shell tree (ShellHeader,
+ * IconRail, ContextRail, RightPanel — plus whatever subscriptions consumers
+ * hang off them) and immediately tore it down for the mobile tree: throwaway
+ * work on the mobile critical path on every load.
+ *
+ * `useSyncExternalStore` reads `matchMedia` during the first client render,
+ * so client-rendered apps commit the correct tree once. Server rendering
+ * still returns 'desktop' via the server snapshot, and hydration stays
+ * mismatch-safe (React uses the server snapshot while hydrating, then
+ * re-reads — SSR consumers keep exactly the old behavior).
+ */
 export function useShellViewport() {
-    // Initial state is always 'desktop' so server-rendered output matches the
-    // client's first paint — actual band resolves in the post-mount effect.
-    const [viewport, setViewport] = useState('desktop');
-    useEffect(() => {
-        const matchMedia = getMatchMedia();
-        setViewport(detectViewport(matchMedia));
-        if (!matchMedia)
-            return;
-        const cleanups = Object.entries(BREAKPOINTS).map(([band, query]) => {
-            const mql = matchMedia(query);
-            const onChange = () => {
-                /* v8 ignore next — false branch: listener fires but mql.matches is already false */
-                if (mql.matches)
-                    setViewport(band);
-            };
-            mql.addEventListener('change', onChange);
-            return () => mql.removeEventListener('change', onChange);
-        });
-        return () => {
-            for (const cleanup of cleanups)
-                cleanup();
-        };
-    }, []);
-    return viewport;
+    return useSyncExternalStore(subscribeToViewport, getClientViewport, getServerViewport);
 }

package/package.json

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