@medalsocial/meda 2.7.0 → 2.7.2

package/dist/lib/utils.d.ts

@@ -1,2 +1,2 @@
-import { type ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -1,5 +1,44 @@
-import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+/**
+ * Flatten one clsx-style class value.
+ *
+ * Deliberately inlined instead of calling `clsx`, so that `cn` — which nearly
+ * every component in this package calls — leaves no RUNTIME edge to the `clsx`
+ * module. `clsx` stays a dependency for its `ClassValue` type, which appears in
+ * this file's public signature; `import type` is erased at compile time.
+ *
+ * Why it is worth inlining twenty lines: `clsx` is also a dependency of
+ * `recharts`, so a bundler that groups the chart vendor graph into one chunk
+ * puts the single shared `clsx` module in THAT chunk. Every eager importer of
+ * `cn` then hard-depends on the whole chart bundle. Measured in the Medal web
+ * app (2026-09-06): the `/login` server closure reached a 392 kB
+ * `vendor-recharts` chunk through exactly one edge — the shell's `cn` — and
+ * removing this import dropped that closure from 4,758,902 to 4,357,355 bytes
+ * with the chart chunk no longer reachable at all.
+ *
+ * Behaviour is identical to `clsx`, pinned by the equivalence test in
+ * `test/unit/lib/utils.test.ts`.
+ */
+function toClassName(input) {
+    if (!input)
+        return '';
+    if (typeof input === 'string' || typeof input === 'number') {
+        return String(input);
+    }
+    if (Array.isArray(input)) {
+        return input.map(toClassName).filter(Boolean).join(' ');
+    }
+    if (typeof input === 'object') {
+        let className = '';
+        for (const key in input) {
+            if (input[key]) {
+                className = className ? `${className} ${key}` : key;
+            }
+        }
+        return className;
+    }
+    return '';
+}
 export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+    return twMerge(toClassName(inputs));
 }

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, 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 }))] }))] }));
+                        // 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/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.7.0",
+  "version": "2.7.2",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {