@medalsocial/meda 2.6.0 → 2.7.0

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

@@ -44,7 +44,7 @@ export function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace
     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 }))] }))] }));
+                        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, 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/package.json

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