@medalsocial/meda 3.13.0 → 3.14.0

package/dist/shell/context-rail.js

@@ -106,13 +106,11 @@ export function ContextRail({ appId, module, hidden = false, collapsible = true,
         setDisplayWidth(null);
         ctx.contextRail.setWidth(w);
     };
-    // Only animate width during collapse/expand toggles, not during manual
-    // pointer drag on the ResizeHandle. displayWidth is non-null only while
-    // the user is mid-drag — using it as the drag signal suppresses the
-    // transition then so the rail snaps to the cursor instead of lagging
-    // behind it.
-    const isDragging = displayWidth !== null;
-    return (_jsxs("aside", { id: railId, "data-testid": "context-rail", "aria-label": module.label, className: cn('group/rail relative h-full shrink-0 bg-shell-context', !isDragging && 'transition-[width] duration-200 ease-in-out motion-reduce:transition-none', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [collapsible && (_jsx(ContextRailSeam, { railId: railId, currentWidth: width, onResize: handleResize, onCommit: handleCommit })), _jsxs("div", { className: "flex h-full min-w-0 flex-col overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [showHeader && (_jsxs("div", { className: "shrink-0 border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] })), _jsxs("div", { "data-meda-context-rail-scroll-area": "", className: cn('min-h-0 flex-1', scroll === 'auto' ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'), children: [items.length > 0 && (_jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: items.map((item) => {
+    // The rail never animates its width. Collapse/expand is mostly ⌘B, a
+    // keyboard action used many times a day, and a width transition re-wraps
+    // the whole main column on every frame. It snaps on the keyboard, on a
+    // click and while dragging.
+    return (_jsxs("aside", { id: railId, "data-testid": "context-rail", "aria-label": module.label, className: cn('group/rail relative h-full shrink-0 bg-shell-context', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [collapsible && (_jsx(ContextRailSeam, { railId: railId, currentWidth: width, onResize: handleResize, onCommit: handleCommit })), _jsxs("div", { className: "flex h-full min-w-0 flex-col overflow-hidden", "aria-hidden": collapsed, inert: collapsed || undefined, children: [showHeader && (_jsxs("div", { className: "shrink-0 border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] })), _jsxs("div", { "data-meda-context-rail-scroll-area": "", className: cn('min-h-0 flex-1', scroll === 'auto' ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'), children: [items.length > 0 && (_jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: items.map((item) => {
                                     const isActive = item.id === activeItemId;
                                     const klass = cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', isActive
                                         ? 'bg-primary/10 text-primary'

package/dist/shell/index.d.ts

@@ -25,7 +25,8 @@ export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-he
 export { ShellMain } from './shell-main.js';
 export type { MedaShellProviderProps } from './shell-provider.js';
 export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+export { ShellViewportHintProvider, type ShellViewportHintProviderProps, } from './shell-viewport-hint.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, ShellHeaderLayout, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, WorkspaceMenuItem, } from './types.js';
-export { useShellViewport } from './use-shell-viewport.js';
+export { ShellViewportHintContext, useShellViewport } from './use-shell-viewport.js';

package/dist/shell/index.js

@@ -28,7 +28,8 @@ export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-he
 export { ShellMain } from './shell-main.js';
 // Provider + hooks
 export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+export { ShellViewportHintProvider, } from './shell-viewport-hint.js';
 // Theme
 export { DefaultThemeProvider, ThemeToggle, useTheme } from './theme.js';
 export { NextThemesAdapter } from './theme-next-themes.js';
-export { useShellViewport } from './use-shell-viewport.js';
+export { ShellViewportHintContext, useShellViewport } from './use-shell-viewport.js';

package/dist/shell/right-panel.js

@@ -138,7 +138,11 @@ export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes
         setDisplayWidth(null);
         setWidth(w);
     };
-    return (_jsx("aside", { "data-meda-panel-mode": mode, "aria-hidden": mode === 'closed' ? 'true' : undefined, className: cn('relative h-full shrink-0 overflow-hidden border-l border-shell-border bg-shell-panel', 'transition-[width] ease-[var(--motion-ease)] duration-[var(--motion-panel)]', mode === 'fullscreen' && 'fixed inset-0 h-screen w-screen border-none', zIndexClass, className), style: widthStyle, children: mode !== 'closed' && (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-shell-border px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: resolvedPanelViews.map((view) => {
+    return (_jsx("aside", { "data-meda-panel-mode": mode, "aria-hidden": mode === 'closed' ? 'true' : undefined, 
+        // No width transition: ⌘I / ⌘E are keyboard actions used many times a
+        // day, and an animated width re-wraps the main column every frame (and
+        // lags behind the cursor while resizing). The panel snaps.
+        className: cn('relative h-full shrink-0 overflow-hidden border-l border-shell-border bg-shell-panel', mode === 'fullscreen' && 'fixed inset-0 h-screen w-screen border-none', zIndexClass, className), style: widthStyle, children: mode !== 'closed' && (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-shell-border px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: resolvedPanelViews.map((view) => {
                                 const isActive = view.id === activeView;
                                 const Icon = view.icon;
                                 const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: view.label })] }));

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { ShellViewport } from './types.js';
+export interface ShellViewportHintProviderProps {
+    /**
+     * Coarse device class detected from the request, or `null` to keep the
+     * desktop-first default.
+     */
+    value: ShellViewport | null;
+    children: ReactNode;
+}
+/**
+ * Client wrapper that supplies the SSR viewport hint.
+ *
+ * React Context providers cannot be rendered from a React Server Component,
+ * so an App Router server component — the place where request headers are
+ * actually available — must render this client component instead of touching
+ * `ShellViewportHintContext.Provider` itself:
+ *
+ *   // app/layout.tsx — server component
+ *   import { headers } from 'next/headers';
+ *   import { ShellViewportHintProvider } from '@medalsocial/meda/shell';
+ *
+ *   export default async function Layout({ children }) {
+ *     const isPhone = (await headers()).get('sec-ch-ua-mobile') === '?1';
+ *     return (
+ *       <ShellViewportHintProvider value={isPhone ? 'mobile' : null}>
+ *         {children}
+ *       </ShellViewportHintProvider>
+ *     );
+ *   }
+ *
+ * See {@link ShellViewportHintContext} for what the hint does.
+ */
+export declare function ShellViewportHintProvider({ value, children }: ShellViewportHintProviderProps): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShellViewportHintContext } from './use-shell-viewport.js';
+/**
+ * Client wrapper that supplies the SSR viewport hint.
+ *
+ * React Context providers cannot be rendered from a React Server Component,
+ * so an App Router server component — the place where request headers are
+ * actually available — must render this client component instead of touching
+ * `ShellViewportHintContext.Provider` itself:
+ *
+ *   // app/layout.tsx — server component
+ *   import { headers } from 'next/headers';
+ *   import { ShellViewportHintProvider } from '@medalsocial/meda/shell';
+ *
+ *   export default async function Layout({ children }) {
+ *     const isPhone = (await headers()).get('sec-ch-ua-mobile') === '?1';
+ *     return (
+ *       <ShellViewportHintProvider value={isPhone ? 'mobile' : null}>
+ *         {children}
+ *       </ShellViewportHintProvider>
+ *     );
+ *   }
+ *
+ * See {@link ShellViewportHintContext} for what the hint does.
+ */
+export function ShellViewportHintProvider({ value, children }) {
+    return (_jsx(ShellViewportHintContext.Provider, { value: value, children: children }));
+}

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

@@ -1,4 +1,6 @@
 import type { ShellViewport } from './types.js';
+/** Optional request-derived band for server rendering and hydration only. */
+export declare const ShellViewportHintContext: import("react").Context<ShellViewport | null>;
 /**
  * The shell's viewport band, resolved SYNCHRONOUSLY on the first client
  * render.
@@ -12,8 +14,8 @@ import type { ShellViewport } from './types.js';
  *
  * `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).
+ * uses the optional request-derived hint, otherwise 'desktop'. Hydration uses
+ * that same snapshot before switching to the live viewport. A hint lets an
+ * app send mobile shell HTML before its JavaScript loads.
  */
 export declare function useShellViewport(): ShellViewport;

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

@@ -1,5 +1,5 @@
 'use client';
-import { useSyncExternalStore } from 'react';
+import { createContext, useContext, useSyncExternalStore } from 'react';
 const BREAKPOINTS = {
     mobile: '(max-width: 767px)',
     tablet: '(min-width: 768px) and (max-width: 1023px)',
@@ -7,6 +7,8 @@ const BREAKPOINTS = {
     wide: '(min-width: 1280px) and (max-width: 1535px)',
     ultrawide: '(min-width: 1536px)',
 };
+/** Optional request-derived band for server rendering and hydration only. */
+export const ShellViewportHintContext = createContext(null);
 function getMatchMedia() {
     /* v8 ignore next — SSR guard: window is always defined in jsdom test env */
     if (typeof window === 'undefined')
@@ -63,7 +65,6 @@ function getClientViewport() {
     // First render happens before subscribe — detect directly.
     return detectViewport();
 }
-const getServerViewport = () => 'desktop';
 /**
  * The shell's viewport band, resolved SYNCHRONOUSLY on the first client
  * render.
@@ -77,10 +78,11 @@ const getServerViewport = () => 'desktop';
  *
  * `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).
+ * uses the optional request-derived hint, otherwise 'desktop'. Hydration uses
+ * that same snapshot before switching to the live viewport. A hint lets an
+ * app send mobile shell HTML before its JavaScript loads.
  */
 export function useShellViewport() {
-    return useSyncExternalStore(subscribeToViewport, getClientViewport, getServerViewport);
+    const hint = useContext(ShellViewportHintContext);
+    return useSyncExternalStore(subscribeToViewport, getClientViewport, () => hint ?? 'desktop');
 }

package/dist/styles/vendor/xyflow.css

@@ -1,4 +1,4 @@
-/*! Vendored from @xyflow/react@12.11.6 dist/style.css — MIT License, (c) webkid GmbH. https://github.com/xyflow/xyflow */
+/*! Vendored from @xyflow/react@12.12.0 dist/style.css — MIT License, (c) webkid GmbH. https://github.com/xyflow/xyflow */
 /* this gets exported as style.css and can be used for the default theming */
 /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
 .react-flow {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -210,7 +210,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.14",
+    "@biomejs/biome": "2.5.15",
     "@changesets/changelog-github": "1.0.1",
     "@changesets/cli": "3.0.3",
     "@dnd-kit/core": "6.3.1",
@@ -218,48 +218,48 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
-    "@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",
+    "@react-three/fiber": "9.8.1",
+    "@size-limit/preset-small-lib": "13.1.1",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/addon-mcp": "10.6.1",
+    "@storybook/addon-themes": "10.6.1",
+    "@storybook/addon-vitest": "10.6.1",
+    "@storybook/react-vite": "10.6.1",
     "@tailwindcss/cli": "4.3.3",
     "@tailwindcss/vite": "4.3.3",
-    "@tanstack/intent": "0.4.0",
+    "@tanstack/intent": "0.5.5",
     "@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",
+    "@vitejs/plugin-react": "6.1.2",
     "@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",
+    "@xyflow/react": "12.12.0",
+    "chromatic": "18.12.0",
     "esbuild": "0.28.2",
     "fast-check": "4.10.2",
     "husky": "9.1.7",
-    "jsdom": "30.1.0",
+    "jsdom": "30.1.2",
     "next-themes": "0.4.6",
-    "playwright": "1.63.0",
+    "playwright": "1.64.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": "13.0.3",
-    "storybook": "10.6.0",
+    "size-limit": "13.1.1",
+    "storybook": "10.6.1",
     "tailwindcss": "4.3.3",
-    "three": "0.185.1",
+    "three": "0.186.1",
     "typescript": "~6.0.3",
-    "vite": "8.3.0",
+    "vite": "8.3.4",
     "vitest": "4.1.11",
     "vitest-axe": "0.1.0",
-    "wrangler": "4.135.0"
+    "wrangler": "4.149.0"
   },
   "keywords": [
     "tanstack-intent"