@medalsocial/meda 0.1.0

package/README.md

@@ -0,0 +1,268 @@
+# @medalsocial/meda
+
+Shared Meda UI shell/runtime package.
+
+Current scope:
+- shell layout primitives
+- shell navigation and rail renderers
+- shell header and tab chrome
+- shell state runtime
+- shell layout and route utilities
+
+Non-goals for this package:
+- duplicating the full shadcn primitive layer
+- Picasso-specific route config, workspace data, or panel content
+- router-specific runtime assumptions
+
+## Import Surface
+
+Primary root import:
+
+```ts
+import {
+  NavigationArea,
+  ShellAppRail,
+  ShellDesktopPanelDock,
+  ShellFrame,
+  ShellHeaderFrame,
+  ShellModuleNav,
+  ShellPanelRail,
+  ShellScrollableContent,
+  ShellStateProvider,
+  ShellTabBar,
+  WorkbenchLayout,
+} from '@medalsocial/meda'
+```
+
+The root package is the curated public API. It is the default import surface for app consumers.
+
+Shell subpath:
+
+```ts
+import { ShellFrame, ShellStateProvider } from '@medalsocial/meda/shell'
+```
+
+The `@medalsocial/meda/shell` subpath is broader. Use it when you intentionally need lower-level shell helpers that are not part of the primary root contract yet.
+
+## Stable Root Surface
+
+Root exports currently include:
+- shell chrome: `ShellFrame`, `ShellHeaderFrame`, `ShellPanelToggle`, `NavigationArea`
+- shell navigation: `ShellAppRail`, `ShellModuleNav`, `ShellPanelRail`, `ShellTabBar`
+- shell layout/runtime: `ShellDesktopPanelDock`, `ShellScrollableContent`, `WorkbenchLayout`
+- shell state: `ShellStateProvider`, `useShellState`
+- shared contracts: `ShellModuleDefinition`, `ShellPanelDefinition`, `ShellRailItem`, `ShellTab`, `ShellViewDefinition`
+- shared utilities: route-handle helpers, panel helpers, layout helpers, section-command builder, shortcut-map builder
+
+Lower-level shell internals remain available from `@medalsocial/meda/shell`.
+
+## Minimal Consumer Shape
+
+Typical consumer setup:
+
+```ts
+import {
+  ShellFrame,
+  ShellHeaderFrame,
+  ShellStateProvider,
+  ShellTabBar,
+  type ShellModuleDefinition,
+} from '@medalsocial/meda'
+```
+
+Then the host app provides:
+- router integration through `renderLink` callbacks and search-param adapters
+- module definitions and panel registries
+- workspace/business state
+- app-specific menus and content renderers
+
+## Recipes
+
+### 1. Define app modules
+
+```ts
+import { Home, Package } from 'lucide-react'
+import type { ShellModuleDefinition } from '@medalsocial/meda'
+
+export const modules: Record<string, ShellModuleDefinition> = {
+  lab: {
+    id: 'lab',
+    label: 'Labs',
+    description: 'Hardware R&D workspace',
+    items: [
+      {
+        to: '/lab',
+        label: 'Overview',
+        description: 'Program status and entry points',
+        icon: Home,
+        shortcut: '1',
+      },
+      {
+        to: '/lab/products',
+        label: 'Products',
+        description: 'Every form factor and BOM',
+        icon: Package,
+        shortcut: '2',
+      },
+    ],
+    headerTabs: [
+      { id: 'overview', to: '/lab', label: 'Overview' },
+      { id: 'products', to: '/lab/products', label: 'Products' },
+    ],
+  },
+}
+```
+
+### 2. Connect shell state to host routing
+
+```ts
+import { ShellStateProvider } from '@medalsocial/meda'
+import { useSearchParams } from 'react-router'
+
+export function AppShellState({ children }: { children: React.ReactNode }) {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  return (
+    <ShellStateProvider
+      adapter={{
+        searchParams,
+        setSearchParams: (updater) => {
+          setSearchParams((current) => updater(current))
+        },
+      }}
+      initialActiveRail="lab"
+      selectionQueryParam="product"
+      sidePanelWidthStorageKey="my-app.side-panel.width"
+    >
+      {children}
+    </ShellStateProvider>
+  )
+}
+```
+
+### 3. Render router-aware tabs
+
+```ts
+import { ShellTabBar, type ShellTab } from '@medalsocial/meda'
+import Link from 'next/link'
+
+export function AppTabs({ tabs, activeTab }: { tabs: ShellTab[]; activeTab?: string }) {
+  return (
+    <ShellTabBar
+      tabs={tabs}
+      activeTab={activeTab}
+      ariaLabel="Workspace tabs"
+      renderLink={({ children, className, tab, isActive }) => (
+        <Link
+          key={tab.id}
+          href={tab.to ?? '#'}
+          aria-current={isActive ? 'page' : undefined}
+          className={className}
+        >
+          {children}
+        </Link>
+      )}
+    />
+  )
+}
+```
+
+### 4. Compose the shell frame
+
+```tsx
+<ShellFrame
+  header={
+    <ShellHeaderFrame
+      left={<WorkspaceMenu />}
+      center={<AppTabs tabs={tabs} activeTab={activeTab} />}
+      right={<HeaderActions />}
+    />
+  }
+  navigation={
+    <NavigationArea>
+      <AppRail />
+      <SectionSidebar />
+    </NavigationArea>
+  }
+  content={
+    <ShellScrollableContent
+      layout="workspace"
+      maxWidth={1120}
+      desktopDockOffset={panelOpen ? 392 : 0}
+    >
+      <Outlet />
+    </ShellScrollableContent>
+  }
+  desktopDock={
+    panelOpen ? (
+      <ShellDesktopPanelDock
+        defaultView={activeView}
+        panelOpen
+        width={panelWidth}
+        onWidthChange={setPanelWidth}
+        renderPanel={({ defaultView, className }) => (
+          <MyPanel defaultView={defaultView} className={className} />
+        )}
+      />
+    ) : null
+  }
+/>
+```
+
+### 5. Build section commands
+
+```ts
+import { buildShellSectionCommands } from '@medalsocial/meda'
+
+const commands = [
+  ...buildShellSectionCommands(activeModule),
+  { id: 'settings', label: 'Settings', to: '/settings', icon: Settings, group: 'Global' },
+]
+```
+
+### 6. Resolve route-provided shell metadata
+
+```ts
+import {
+  getShellActionsFromMatches,
+  getShellContentLayoutFromMatches,
+  getShellPanelViewsFromMatches,
+  getShellTabsFromMatches,
+} from '@medalsocial/meda'
+
+const contentLayout = getShellContentLayoutFromMatches(matches)
+const shellTabs = getShellTabsFromMatches(matches, pathname)
+const shellActions = getShellActionsFromMatches(matches, pathname)
+const panelViewIds = getShellPanelViewsFromMatches(matches)
+```
+
+## Host Responsibilities
+
+Consumers own:
+- routing and link rendering
+- module definitions
+- panel definitions and renderers
+- workspace/business state
+- app-specific header/workspace menus
+
+Meda owns:
+- reusable shell chrome and runtime
+- generic shell state persistence and query-param wiring through adapters
+- layout math and route-handle helpers
+
+## Router Guidance
+
+Meda should stay React-first and router-agnostic.
+
+- React Router apps: pass `Link`/`NavLink` through render props and connect `useSearchParams` to `ShellStateProvider`
+- Next.js apps: pass `next/link` wrappers and a host search-param adapter
+- TanStack Router apps: pass router link wrappers and route/search adapters from the host
+
+The package should not import app-router internals directly.
+
+## Current Verification
+
+The package is currently verified by:
+- package-level unit tests in `software/meda/src/shell/*.test.tsx`
+- Picasso dashboard consuming the package in `software/dashboard`
+- a separate consumer fixture in `software/meda-fixture`

package/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "iconLibrary": "lucide",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/shell",
+    "ui": "@/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks",
+    "utils": "@/lib/utils"
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './shell/public';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './shell/public';

package/dist/shell/index.d.ts

@@ -0,0 +1,15 @@
+export * from './navigation-area';
+export * from './shell-app-rail';
+export * from './shell-desktop-panel-dock';
+export * from './shell-frame';
+export * from './shell-header';
+export * from './shell-layout-utils';
+export * from './shell-module-nav';
+export * from './shell-panel-rail';
+export * from './shell-route-utils';
+export * from './shell-scrollable-content';
+export * from './shell-state';
+export * from './shell-tab-bar';
+export * from './types';
+export * from './utils';
+export * from './workbench-layout';

package/dist/shell/index.js

@@ -0,0 +1,15 @@
+export * from './navigation-area';
+export * from './shell-app-rail';
+export * from './shell-desktop-panel-dock';
+export * from './shell-frame';
+export * from './shell-header';
+export * from './shell-layout-utils';
+export * from './shell-module-nav';
+export * from './shell-panel-rail';
+export * from './shell-route-utils';
+export * from './shell-scrollable-content';
+export * from './shell-state';
+export * from './shell-tab-bar';
+export * from './types';
+export * from './utils';
+export * from './workbench-layout';

package/dist/shell/navigation-area.d.ts

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

package/dist/shell/navigation-area.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function NavigationArea({ children }) {
+    return _jsx("div", { className: "relative hidden shrink-0 md:flex", children: children });
+}

package/dist/shell/public.d.ts

@@ -0,0 +1,4 @@
+export { NavigationArea, ShellAppRail, ShellDesktopPanelDock, ShellFrame, ShellHeaderFrame, ShellPanelToggle, ShellModuleNav, ShellPanelRail, ShellScrollableContent, ShellStateProvider, ShellTabBar, WorkbenchLayout, } from './index';
+export { buildShellSectionCommands, buildShellShortcutMap, getDefaultShellPanelView, getShellPanelCollection, getShellPanelView, getShellActionsFromMatches, getShellContentLayoutFromMatches, getShellContentMaxWidth, getShellPanelViewsFromMatches, getShellTabsFromMatches, getResolvedShellPanelWidth, isShellPanelViewAvailable, resolveShellPanelView, } from './index';
+export type { ShellCommandDefinition, ShellContentLayout, ShellHostAdapter, ShellModuleDefinition, ShellNavItem, ShellPanelDefinition, ShellRailItem, ShellRenderContext, ShellRouteContext, ShellSearchParamsAdapter, ShellStateContextValue, ShellTab, ShellViewDefinition, ShellViewportBand, } from './index';
+export { useShellState } from './index';

package/dist/shell/public.js

@@ -0,0 +1,3 @@
+export { NavigationArea, ShellAppRail, ShellDesktopPanelDock, ShellFrame, ShellHeaderFrame, ShellPanelToggle, ShellModuleNav, ShellPanelRail, ShellScrollableContent, ShellStateProvider, ShellTabBar, WorkbenchLayout, } from './index';
+export { buildShellSectionCommands, buildShellShortcutMap, getDefaultShellPanelView, getShellPanelCollection, getShellPanelView, getShellActionsFromMatches, getShellContentLayoutFromMatches, getShellContentMaxWidth, getShellPanelViewsFromMatches, getShellTabsFromMatches, getResolvedShellPanelWidth, isShellPanelViewAvailable, resolveShellPanelView, } from './index';
+export { useShellState } from './index';

package/dist/shell/shell-app-rail.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ShellRailItem } from './types';
+interface ShellAppRailRenderArgs {
+    children: ReactNode;
+    className: string;
+    isActive: boolean;
+    item: ShellRailItem;
+}
+export interface ShellAppRailProps {
+    mainItems: ShellRailItem[];
+    utilityItems: ShellRailItem[];
+    className?: string;
+    footer?: ReactNode;
+    isItemActive: (item: ShellRailItem) => boolean;
+    renderLink: (args: ShellAppRailRenderArgs) => ReactNode;
+}
+export declare function ShellAppRail({ mainItems, utilityItems, className, footer, isItemActive, renderLink, }: ShellAppRailProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useState } from 'react';
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function RailDivider({ pinned, onToggle }) {
+    return (_jsx("div", { className: "group flex w-full items-center justify-center py-4", children: _jsxs("button", { type: "button", "aria-label": pinned ? 'Push items down' : 'Push items up', onClick: onToggle, className: "flex cursor-pointer flex-col items-center gap-0.5", children: [_jsx("span", { className: "hidden h-3.5 w-6 items-center justify-center text-[var(--app-rail-foreground)] transition-colors group-hover:flex", children: pinned ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronUp, { size: 14 }) }), _jsx("span", { className: "block h-0.5 w-6 rounded-full bg-[var(--app-rail-foreground)]/30 transition-colors group-hover:bg-[var(--primary)]" })] }) }));
+}
+function RailSection({ items, isItemActive, renderLink, ariaLabel, className, }) {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: className, children: items.map((item) => {
+            const isActive = isItemActive(item);
+            const Icon = item.icon;
+            return renderLink({
+                item,
+                isActive,
+                className: joinClasses('flex w-full flex-col items-center justify-center gap-1.5 rounded-2xl px-2 py-2.5 text-center transition-colors', isActive
+                    ? 'bg-[var(--app-rail-item-active-bg)] text-[var(--foreground)]'
+                    : 'text-[var(--app-rail-foreground)] hover:bg-[var(--surface-highlight)] hover:text-[var(--foreground)]'),
+                children: (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 22 }), _jsx("span", { className: "text-[10px] font-medium leading-none", children: item.label })] })),
+            });
+        }) }));
+}
+export function ShellAppRail({ mainItems, utilityItems, className, footer, isItemActive, renderLink, }) {
+    const [pinned, setPinned] = useState(false);
+    return (_jsxs("div", { className: joinClasses('flex w-[var(--app-rail-width)] shrink-0 flex-col items-center bg-[var(--app-rail)] px-2 py-4', className), children: [_jsx(RailSection, { items: mainItems, isItemActive: isItemActive, renderLink: renderLink, ariaLabel: "Main navigation", className: "flex flex-col items-center gap-1.5" }), _jsx("div", { className: joinClasses('transition-[flex-grow] duration-300 ease-in-out', pinned ? 'grow-0' : 'grow') }), _jsx(RailDivider, { pinned: pinned, onToggle: () => setPinned(!pinned) }), _jsx(RailSection, { items: utilityItems, isItemActive: isItemActive, renderLink: renderLink, ariaLabel: "Utility navigation", className: "mb-2 flex flex-col items-center gap-1" }), _jsx("div", { className: joinClasses('transition-[flex-grow] duration-300 ease-in-out', pinned ? 'grow' : 'grow-0') }), footer] }));
+}

package/dist/shell/shell-desktop-panel-dock.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare function ShellDesktopPanelDock({ defaultView, panelOpen, viewIds, width, onWidthChange, renderPanel, className, }: {
+    defaultView: string;
+    panelOpen: boolean;
+    viewIds?: string[];
+    width: number;
+    onWidthChange: (width: number) => void;
+    renderPanel: (options: {
+        defaultView: string;
+        viewIds?: string[];
+        className?: string;
+    }) => React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shell/shell-desktop-panel-dock.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+function ShellPanelResizeHandle({ width, onWidthChange, }) {
+    const startXRef = React.useRef(0);
+    const startWidthRef = React.useRef(width);
+    const cleanupRef = React.useRef(null);
+    React.useEffect(() => {
+        return () => {
+            cleanupRef.current?.();
+        };
+    }, []);
+    function handlePointerDown(event) {
+        if (event.button !== 0)
+            return;
+        startXRef.current = event.clientX;
+        startWidthRef.current = width;
+        const handlePointerMove = (moveEvent) => {
+            onWidthChange(startWidthRef.current + (startXRef.current - moveEvent.clientX));
+        };
+        const handlePointerEnd = () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerEnd);
+            window.removeEventListener('pointercancel', handlePointerEnd);
+            cleanupRef.current = null;
+        };
+        cleanupRef.current?.();
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerEnd);
+        window.addEventListener('pointercancel', handlePointerEnd);
+        cleanupRef.current = handlePointerEnd;
+    }
+    return (_jsx("button", { type: "button", "aria-label": "Resize panel", onPointerDown: handlePointerDown, className: "absolute inset-y-0 left-0 z-10 flex w-2 shrink-0 cursor-col-resize items-center justify-center bg-transparent transition-colors hover:bg-[var(--primary)]/10", children: _jsx("span", { className: "h-12 w-px rounded-full bg-[var(--border-subtle)]" }) }));
+}
+export function ShellDesktopPanelDock({ defaultView, panelOpen, viewIds, width, onWidthChange, renderPanel, className, }) {
+    return (_jsx("div", { "data-testid": "desktop-panel-dock", "aria-hidden": !panelOpen, "data-state": panelOpen ? 'open' : 'closed', className: panelOpen
+            ? 'pointer-events-auto absolute inset-y-4 right-4 z-20 translate-x-0 opacity-100 transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]'
+            : 'pointer-events-none absolute inset-y-4 right-4 z-20 translate-x-[calc(100%+1.25rem)] opacity-0 transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]', style: { width: `${width}px` }, children: _jsxs("div", { className: "relative h-full w-full", children: [_jsx(ShellPanelResizeHandle, { width: width, onWidthChange: onWidthChange }), renderPanel({
+                    defaultView,
+                    viewIds,
+                    className: className ??
+                        'ml-2 rounded-[var(--meda-shell-panel-dock-radius)] border border-[var(--border-subtle)] bg-[color-mix(in_srgb,var(--side-panel)_90%,transparent)] shadow-[var(--meda-shell-panel-dock-shadow)] backdrop-blur-xl',
+                })] }) }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export declare function ShellFrame({ header, navigation, mobileSidebar, mobileHeader, tabBar, content, desktopDock, tabletPanel, mobileBottomNav, commandPalette, }: {
+    header: ReactNode;
+    navigation: ReactNode;
+    mobileSidebar?: ReactNode;
+    mobileHeader?: ReactNode;
+    tabBar?: ReactNode;
+    content: ReactNode;
+    desktopDock?: ReactNode;
+    tabletPanel?: ReactNode;
+    mobileBottomNav?: ReactNode;
+    commandPalette?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shell/shell-frame.js

@@ -0,0 +1,4 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function ShellFrame({ header, navigation, mobileSidebar, mobileHeader, tabBar, content, desktopDock, tabletPanel, mobileBottomNav, commandPalette, }) {
+    return (_jsxs("div", { "data-testid": "shell-frame", className: "flex h-screen w-full flex-1 flex-col overflow-hidden bg-[var(--background)]", children: [header, _jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [navigation, mobileSidebar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [mobileHeader, tabBar, _jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [content, desktopDock] })] }), tabletPanel, mobileBottomNav] }), commandPalette] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export declare function ShellHeaderFrame({ left, center, right, className, }: {
+    left: ReactNode;
+    center?: ReactNode;
+    right?: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ShellPanelToggle({ panelOpen, onToggle, }: {
+    panelOpen: boolean;
+    onToggle: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shell/shell-header.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelRightClose, PanelRightOpen } from 'lucide-react';
+export function ShellHeaderFrame({ left, center, right, className, }) {
+    return (_jsxs("header", { role: "banner", className: [
+            'relative z-[var(--z-sticky)] grid h-[var(--header-height)] w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 bg-[var(--header)] px-3 shadow-[var(--shadow-header)] sm:px-4',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [left, _jsx("div", { className: "min-w-0", children: center }), _jsx("div", { "data-testid": "shell-header-actions", className: "hidden items-center justify-end gap-2 md:flex", children: right })] }));
+}
+export function ShellPanelToggle({ panelOpen, onToggle, }) {
+    return (_jsx("button", { type: "button", "aria-label": panelOpen ? 'Close panel' : 'Open panel', onClick: onToggle, className: panelOpen
+            ? 'inline-flex h-9 items-center justify-center rounded-xl border border-[var(--primary)]/30 bg-[var(--primary)]/12 px-2.5 text-[var(--primary)] transition-[background-color,color,border-color] duration-200 hover:bg-[var(--primary)]/18'
+            : 'inline-flex h-9 items-center justify-center rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-1)] px-2.5 text-[var(--muted-foreground)] transition-[background-color,color,border-color] duration-200 hover:bg-[var(--sidebar-accent)] hover:text-[var(--foreground)]', children: panelOpen ? _jsx(PanelRightClose, { size: 18 }) : _jsx(PanelRightOpen, { size: 18 }) }));
+}

package/dist/shell/shell-layout-utils.d.ts

@@ -0,0 +1,8 @@
+import type { ShellContentLayout, ShellViewportBand } from './types';
+export declare function getShellContentMaxWidth(layout: ShellContentLayout, viewportBand: ShellViewportBand): 1120 | 1280 | 1400 | 1440 | 1760 | 1920 | undefined;
+export declare function getResolvedShellPanelWidth({ preferredWidth, viewportWidth, sidebarOpen, sidebarWidth, }: {
+    preferredWidth: number;
+    viewportWidth: number;
+    sidebarOpen: boolean;
+    sidebarWidth: number;
+}): number;

package/dist/shell/shell-layout-utils.js

@@ -0,0 +1,38 @@
+const DESKTOP_APP_RAIL_WIDTH = 80;
+const DESKTOP_SECTION_SIDEBAR_TOGGLE_WIDTH = 20;
+const DESKTOP_SECTION_SIDEBAR_RESIZE_WIDTH = 2;
+const DESKTOP_PANEL_HANDLE_WIDTH = 8;
+const DESKTOP_PANEL_GUTTER = 16;
+const SIDE_PANEL_MIN_WIDTH = 280;
+const SIDE_PANEL_MAX_WIDTH = 520;
+export function getShellContentMaxWidth(layout, viewportBand) {
+    if (layout === 'workspace') {
+        if (viewportBand === 'desktop')
+            return 1120;
+        if (viewportBand === 'wide')
+            return 1280;
+        if (viewportBand === 'ultrawide')
+            return 1400;
+        return undefined;
+    }
+    if (layout === 'fullbleed') {
+        if (viewportBand === 'desktop')
+            return 1440;
+        if (viewportBand === 'wide')
+            return 1760;
+        if (viewportBand === 'ultrawide')
+            return 1920;
+        return undefined;
+    }
+    return undefined;
+}
+export function getResolvedShellPanelWidth({ preferredWidth, viewportWidth, sidebarOpen, sidebarWidth, }) {
+    const leftNavigationWidth = DESKTOP_APP_RAIL_WIDTH +
+        DESKTOP_SECTION_SIDEBAR_TOGGLE_WIDTH +
+        (sidebarOpen ? sidebarWidth + DESKTOP_SECTION_SIDEBAR_RESIZE_WIDTH : 0);
+    const clampedPreferredWidth = Math.min(SIDE_PANEL_MAX_WIDTH, Math.max(SIDE_PANEL_MIN_WIDTH, preferredWidth));
+    const maxWidthForViewport = viewportWidth - leftNavigationWidth - DESKTOP_PANEL_GUTTER * 2 - DESKTOP_PANEL_HANDLE_WIDTH;
+    if (!Number.isFinite(maxWidthForViewport))
+        return clampedPreferredWidth;
+    return Math.max(SIDE_PANEL_MIN_WIDTH, Math.min(clampedPreferredWidth, Math.floor(maxWidthForViewport)));
+}

package/dist/shell/shell-module-nav.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { ShellModuleDefinition, ShellNavItem } from './types';
+interface ShellModuleNavRenderArgs {
+    children: ReactNode;
+    className: string;
+    isActive: boolean;
+    item: ShellNavItem;
+}
+export interface ShellModuleNavProps {
+    module: Pick<ShellModuleDefinition, 'description' | 'items' | 'label'>;
+    ariaLabel: string;
+    className?: string;
+    descriptionClassName?: string;
+    headerClassName?: string;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    inactiveItemClassName?: string;
+    itemsClassName?: string;
+    itemIconClassName?: string;
+    itemIconSize?: number;
+    itemLabelClassName?: string;
+    itemDescriptionClassName?: string;
+    itemShortcutClassName?: string;
+    titleClassName?: string;
+    isItemActive: (item: ShellNavItem) => boolean;
+    renderLink: (args: ShellModuleNavRenderArgs) => ReactNode;
+}
+export declare function ShellModuleNav({ module, ariaLabel, className, descriptionClassName, headerClassName, itemClassName, activeItemClassName, inactiveItemClassName, itemsClassName, itemIconClassName, itemIconSize, itemLabelClassName, itemDescriptionClassName, itemShortcutClassName, titleClassName, isItemActive, renderLink, }: ShellModuleNavProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shell/shell-module-nav.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function ShellModuleNav({ module, ariaLabel, className, descriptionClassName, headerClassName, itemClassName, activeItemClassName, inactiveItemClassName, itemsClassName, itemIconClassName, itemIconSize = 18, itemLabelClassName, itemDescriptionClassName, itemShortcutClassName, titleClassName, isItemActive, renderLink, }) {
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: headerClassName, children: [_jsx("div", { className: titleClassName, children: module.label }), module.description ? (_jsx("div", { className: descriptionClassName, children: module.description })) : null] }), _jsx("nav", { "aria-label": ariaLabel, className: itemsClassName, children: module.items.map((item) => {
+                    const isActive = isItemActive(item);
+                    const Icon = item.icon;
+                    return renderLink({
+                        item,
+                        isActive,
+                        className: joinClasses(itemClassName, isActive ? activeItemClassName : inactiveItemClassName),
+                        children: (_jsxs(_Fragment, { children: [_jsx(Icon, { size: itemIconSize, className: itemIconClassName }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: itemLabelClassName, children: item.label }), item.description ? (_jsx("span", { className: itemDescriptionClassName, children: item.description })) : null] }), item.shortcut ? (_jsx("kbd", { className: itemShortcutClassName, children: item.shortcut })) : null] })),
+                    });
+                }) })] }));
+}

package/dist/shell/shell-panel-rail.d.ts

@@ -0,0 +1,9 @@
+import type { ShellPanelDefinition } from './types';
+export interface ShellPanelRailProps {
+    moduleViews: ShellPanelDefinition[];
+    globalViews: ShellPanelDefinition[];
+    activePanelView: string | null;
+    className?: string;
+    onTogglePanelView: (viewId: string) => void;
+}
+export declare function ShellPanelRail({ moduleViews, globalViews, activePanelView, className, onTogglePanelView, }: ShellPanelRailProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/shell-panel-rail.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function PanelRailButtons({ views, activePanelView, onTogglePanelView, }) {
+    return (_jsx("div", { className: "flex w-full flex-col items-center gap-1", children: views.map(({ id, label, icon: Icon }) => {
+            const isActive = activePanelView === id;
+            return (_jsxs("button", { type: "button", "aria-label": label, "aria-pressed": isActive, onClick: () => onTogglePanelView(id), className: joinClasses('flex w-full flex-col items-center gap-1 rounded-xl px-1 py-2 text-[var(--app-rail-foreground)] transition-colors', isActive
+                    ? 'bg-[var(--app-rail-item-active-bg)] text-[var(--foreground)]'
+                    : 'hover:bg-[var(--surface-highlight)] hover:text-[var(--foreground)]'), children: [_jsx(Icon, { size: 16 }), _jsx("span", { className: "text-[9px] font-medium leading-none", children: label })] }, id));
+        }) }));
+}
+export function ShellPanelRail({ moduleViews, globalViews, activePanelView, className, onTogglePanelView, }) {
+    if (moduleViews.length === 0 && globalViews.length === 0)
+        return null;
+    return (_jsxs("aside", { "aria-label": "Panel rail", className: joinClasses('flex h-full w-[var(--right-rail-width)] shrink-0 flex-col items-center bg-[var(--app-rail)] px-1.5 py-3', className), children: [_jsx(PanelRailButtons, { views: moduleViews, activePanelView: activePanelView, onTogglePanelView: onTogglePanelView }), _jsx("div", { className: "grow" }), _jsx(PanelRailButtons, { views: globalViews, activePanelView: activePanelView, onTogglePanelView: onTogglePanelView })] }));
+}

package/dist/shell/shell-route-utils.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { ShellContentLayout, ShellTab } from './types';
+interface ShellRouteMatchLike {
+    handle?: unknown;
+    params?: Record<string, string | undefined>;
+}
+export declare function getShellContentLayoutFromMatches(matches: ShellRouteMatchLike[]): ShellContentLayout;
+export declare function getShellTabsFromMatches(matches: ShellRouteMatchLike[], pathname: string): ShellTab[];
+export declare function getShellActionsFromMatches(matches: ShellRouteMatchLike[], pathname: string): ReactNode;
+export declare function getShellPanelViewsFromMatches(matches: ShellRouteMatchLike[]): string[] | undefined;
+export {};

package/dist/shell/shell-route-utils.js

@@ -0,0 +1,32 @@
+function getLastMatch(matches) {
+    return matches[matches.length - 1];
+}
+function getRouteHandle(match) {
+    return match?.handle;
+}
+export function getShellContentLayoutFromMatches(matches) {
+    return getRouteHandle(getLastMatch(matches))?.shellContentLayout ?? 'workspace';
+}
+export function getShellTabsFromMatches(matches, pathname) {
+    const lastMatch = getLastMatch(matches);
+    const shellTabs = getRouteHandle(lastMatch)?.shellTabs;
+    if (!shellTabs)
+        return [];
+    if (typeof shellTabs === 'function') {
+        return shellTabs({ params: lastMatch.params ?? {}, pathname });
+    }
+    return shellTabs;
+}
+export function getShellActionsFromMatches(matches, pathname) {
+    const lastMatch = getLastMatch(matches);
+    const shellActions = getRouteHandle(lastMatch)?.shellActions;
+    if (!shellActions)
+        return null;
+    if (typeof shellActions === 'function') {
+        return shellActions({ params: lastMatch.params ?? {}, pathname });
+    }
+    return shellActions;
+}
+export function getShellPanelViewsFromMatches(matches) {
+    return getRouteHandle(getLastMatch(matches))?.shellPanelViews;
+}

package/dist/shell/shell-scrollable-content.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ShellContentLayout } from './types';
+export interface ShellScrollableContentProps {
+    children: ReactNode;
+    desktopDockOffset?: number;
+    layout: ShellContentLayout;
+    maxWidth?: number;
+}
+export declare function ShellScrollableContent({ children, desktopDockOffset, layout, maxWidth, }: ShellScrollableContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/shell-scrollable-content.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function ShellScrollableContent({ children, desktopDockOffset = 0, layout, maxWidth, }) {
+    return (_jsx("main", { "data-testid": "shell-workspace-viewport", className: "shell-scrollbar-hidden absolute inset-0 min-w-0 overflow-y-auto overflow-x-hidden pb-[var(--bottom-nav-height)] transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] md:pb-0", style: desktopDockOffset > 0 ? { paddingRight: `${desktopDockOffset}px` } : undefined, children: layout === 'centered' ? (_jsx("div", { "data-testid": "shell-content-centered", className: "flex min-h-full items-center justify-center px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", children: _jsx("div", { className: "flex w-full max-w-3xl items-center justify-center", children: children }) })) : layout === 'fullbleed' ? (_jsx("div", { "data-testid": "shell-content-fullbleed", className: "mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })) : (_jsx("div", { "data-testid": "shell-content-workspace", className: joinClasses('mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10'), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })) }));
+}

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+export declare const DEFAULT_SIDE_PANEL_WIDTH = 360;
+export declare const MIN_SIDE_PANEL_WIDTH = 280;
+export declare const MAX_SIDE_PANEL_WIDTH = 520;
+export interface ShellSearchParamsAdapter {
+    searchParams: URLSearchParams;
+    setSearchParams: (updater: (currentSearchParams: URLSearchParams) => URLSearchParams) => void;
+}
+export interface ShellStateContextValue {
+    activePanelView: string | null;
+    lastPanelView: string | null;
+    setActivePanelView: (view: string | null) => void;
+    closePanelView: () => void;
+    restoreLastPanelView: (fallbackView: string | null) => void;
+    togglePanelView: (viewId: string) => void;
+    sidePanelWidth: number;
+    setSidePanelWidth: (width: number) => void;
+    activeRail: string;
+    setActiveRail: (rail: string) => void;
+    selectedEntityId: string | null;
+    selectEntity: (entityId: string, options?: {
+        panelView?: string | null;
+    }) => void;
+    clearEntity: () => void;
+    commandPaletteOpen: boolean;
+    setCommandPaletteOpen: (open: boolean) => void;
+    openCommandPalette: () => void;
+    closeCommandPalette: () => void;
+}
+export declare function clampSidePanelWidth(width: number): number;
+export declare function ShellStateProvider({ children, adapter, initialActiveRail, panelQueryParam, selectionQueryParam, sidePanelWidthStorageKey, }: {
+    children: ReactNode;
+    adapter: ShellSearchParamsAdapter;
+    initialActiveRail?: string;
+    panelQueryParam?: string;
+    selectionQueryParam?: string;
+    sidePanelWidthStorageKey?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useShellState(): ShellStateContextValue;

package/dist/shell/shell-state.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+export const DEFAULT_SIDE_PANEL_WIDTH = 360;
+export const MIN_SIDE_PANEL_WIDTH = 280;
+export const MAX_SIDE_PANEL_WIDTH = 520;
+const ShellStateContext = createContext(null);
+export function clampSidePanelWidth(width) {
+    return Math.min(MAX_SIDE_PANEL_WIDTH, Math.max(MIN_SIDE_PANEL_WIDTH, width));
+}
+function readStoredSidePanelWidth(storageKey) {
+    if (typeof window === 'undefined')
+        return DEFAULT_SIDE_PANEL_WIDTH;
+    const storedValue = typeof window.localStorage?.getItem === 'function' ? window.localStorage.getItem(storageKey) : null;
+    const stored = Number(storedValue);
+    return Number.isFinite(stored) && stored > 0
+        ? clampSidePanelWidth(stored)
+        : DEFAULT_SIDE_PANEL_WIDTH;
+}
+export function ShellStateProvider({ children, adapter, initialActiveRail = 'home', panelQueryParam = 'panel', selectionQueryParam = 'selection', sidePanelWidthStorageKey = 'meda.side-panel.width', }) {
+    const { searchParams, setSearchParams } = adapter;
+    const [sidePanelWidthState, setSidePanelWidthState] = useState(() => readStoredSidePanelWidth(sidePanelWidthStorageKey));
+    const [activeRail, setActiveRail] = useState(initialActiveRail);
+    const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+    const lastPanelViewRef = useRef(null);
+    const persistTimerRef = useRef(undefined);
+    const activePanelView = searchParams.get(panelQueryParam);
+    const selectedEntityId = searchParams.get(selectionQueryParam);
+    useEffect(() => {
+        if (activePanelView) {
+            lastPanelViewRef.current = activePanelView;
+        }
+    }, [activePanelView]);
+    useEffect(() => {
+        return () => {
+            clearTimeout(persistTimerRef.current);
+        };
+    }, []);
+    function updateSearchParams(mutate) {
+        setSearchParams((currentSearchParams) => {
+            const nextSearchParams = new URLSearchParams(currentSearchParams);
+            mutate(nextSearchParams);
+            return nextSearchParams;
+        });
+    }
+    function setActivePanelView(view) {
+        if (view) {
+            lastPanelViewRef.current = view;
+        }
+        updateSearchParams((nextSearchParams) => {
+            if (view) {
+                nextSearchParams.set(panelQueryParam, view);
+            }
+            else {
+                nextSearchParams.delete(panelQueryParam);
+            }
+        });
+    }
+    function closePanelView() {
+        updateSearchParams((nextSearchParams) => {
+            nextSearchParams.delete(panelQueryParam);
+        });
+    }
+    function restoreLastPanelView(fallbackView) {
+        const nextView = lastPanelViewRef.current ?? fallbackView;
+        if (!nextView)
+            return;
+        setActivePanelView(nextView);
+    }
+    function setSidePanelWidth(width) {
+        const nextWidth = clampSidePanelWidth(width);
+        setSidePanelWidthState(nextWidth);
+        clearTimeout(persistTimerRef.current);
+        persistTimerRef.current = setTimeout(() => {
+            if (typeof window !== 'undefined' && typeof window.localStorage?.setItem === 'function') {
+                window.localStorage.setItem(sidePanelWidthStorageKey, String(nextWidth));
+            }
+        }, 300);
+    }
+    function togglePanelView(viewId) {
+        if (activePanelView === viewId) {
+            closePanelView();
+            return;
+        }
+        setActivePanelView(viewId);
+    }
+    function selectEntity(entityId, options) {
+        updateSearchParams((nextSearchParams) => {
+            nextSearchParams.set(selectionQueryParam, entityId);
+            if (options?.panelView) {
+                nextSearchParams.set(panelQueryParam, options.panelView);
+            }
+        });
+    }
+    function clearEntity() {
+        updateSearchParams((nextSearchParams) => {
+            nextSearchParams.delete(selectionQueryParam);
+        });
+    }
+    function openCommandPalette() {
+        setCommandPaletteOpen(true);
+    }
+    function closeCommandPalette() {
+        setCommandPaletteOpen(false);
+    }
+    const value = useMemo(() => ({
+        activePanelView,
+        lastPanelView: lastPanelViewRef.current,
+        setActivePanelView,
+        closePanelView,
+        restoreLastPanelView,
+        togglePanelView,
+        sidePanelWidth: sidePanelWidthState,
+        setSidePanelWidth,
+        activeRail,
+        setActiveRail,
+        selectedEntityId,
+        selectEntity,
+        clearEntity,
+        commandPaletteOpen,
+        setCommandPaletteOpen,
+        openCommandPalette,
+        closeCommandPalette,
+    }), [activePanelView, activeRail, commandPaletteOpen, selectedEntityId, sidePanelWidthState]);
+    return _jsx(ShellStateContext.Provider, { value: value, children: children });
+}
+export function useShellState() {
+    const context = useContext(ShellStateContext);
+    if (!context) {
+        throw new Error('useShellState must be used within a ShellStateProvider');
+    }
+    return context;
+}

package/dist/shell/shell-tab-bar.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ShellTab } from './types';
+interface ShellTabBarRenderArgs {
+    children: ReactNode;
+    className: string;
+    isActive: boolean;
+    tab: ShellTab;
+}
+export interface ShellTabBarProps {
+    tabs: ShellTab[];
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    className?: string;
+    ariaLabel?: string;
+    renderLink?: (args: ShellTabBarRenderArgs) => ReactNode;
+}
+export declare function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel, renderLink, }: ShellTabBarProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/shell/shell-tab-bar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+const tabBarClassName = 'flex h-[var(--tab-bar-height)] shrink-0 items-center gap-3 overflow-x-auto bg-[var(--background)] px-3';
+const tabClassName = 'border-b-[1.5px] pb-2.5 pt-2.5 text-xs whitespace-nowrap transition-colors';
+const activeTabClassName = 'border-[var(--primary)] text-[var(--primary)]';
+const inactiveTabClassName = 'border-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)]';
+export function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel = 'Tabs', renderLink, }) {
+    if (tabs.length === 0)
+        return null;
+    if (renderLink && tabs.every((tab) => Boolean(tab.to))) {
+        return (_jsx("nav", { "aria-label": ariaLabel, className: joinClasses(tabBarClassName, className), children: tabs.map((tab) => {
+                const isActive = tab.id === activeTab;
+                return renderLink({
+                    tab,
+                    isActive,
+                    className: joinClasses(tabClassName, isActive ? activeTabClassName : inactiveTabClassName),
+                    children: tab.label,
+                });
+            }) }));
+    }
+    return (_jsx("div", { "aria-label": ariaLabel, className: joinClasses(tabBarClassName, className), children: tabs.map((tab) => {
+            const isActive = tab.id === activeTab;
+            return (_jsx("button", { type: "button", "data-active": isActive, onClick: () => onTabChange?.(tab.id), className: joinClasses(tabClassName, isActive ? activeTabClassName : inactiveTabClassName), children: tab.label }, tab.id));
+        }) }));
+}

package/dist/shell/types.d.ts

@@ -0,0 +1,64 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export type ShellContentLayout = 'workspace' | 'centered' | 'fullbleed';
+export type ShellViewportBand = 'mobile' | 'tablet' | 'desktop' | 'wide' | 'ultrawide';
+export interface ShellTab {
+    id: string;
+    label: string;
+    to?: string;
+    icon?: LucideIcon;
+}
+export interface ShellNavItem {
+    to: string;
+    label: string;
+    description?: string;
+    icon: LucideIcon;
+    shortcut?: string;
+}
+export interface ShellRailItem {
+    to: string;
+    label: string;
+    icon: LucideIcon;
+}
+export interface ShellModuleDefinition {
+    id: string;
+    label: string;
+    description: string;
+    items: ShellNavItem[];
+    headerTabs?: ShellTab[];
+}
+export interface ShellPanelDefinition {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    global?: boolean;
+    hidden?: boolean;
+}
+export interface ShellCommandDefinition {
+    id: string;
+    label: string;
+    to: string;
+    icon: LucideIcon;
+    group: string;
+    shortcut?: string;
+}
+export interface ShellRenderContext {
+    sectionKey: string;
+    viewId: string;
+    selectedProductId: string | null;
+}
+export type ShellPanelRenderer = (context: ShellRenderContext) => ReactNode;
+export interface ShellRouteContext {
+    pathname: string;
+    params: Record<string, string | undefined>;
+}
+export interface ShellHostAdapter {
+    route: ShellRouteContext;
+    navigate: (to: string) => void;
+}
+export interface ShellViewDefinition {
+    shellContentLayout?: ShellContentLayout;
+    shellTabs?: ShellTab[] | ((context: ShellRouteContext) => ShellTab[]);
+    shellActions?: ReactNode | ((context: ShellRouteContext) => ReactNode);
+    shellPanelViews?: string[];
+}

package/dist/shell/types.js

@@ -0,0 +1 @@
+export {};

package/dist/shell/utils.d.ts

@@ -0,0 +1,43 @@
+import type { ShellCommandDefinition, ShellModuleDefinition, ShellPanelDefinition } from './types';
+export interface ShellPanelCollection {
+    globalViews: ShellPanelDefinition[];
+    moduleViews: ShellPanelDefinition[];
+    views: ShellPanelDefinition[];
+}
+export declare function buildShellShortcutMap(modules: Record<string, ShellModuleDefinition>): Map<string, string>;
+export declare function buildShellSectionCommands(module: Pick<ShellModuleDefinition, 'id' | 'items'> | null, group?: string): ShellCommandDefinition[];
+export declare function getShellPanelCollection({ globalPanelViews, panelViews, productPanelViews, sectionKey, selectedProductId, }: {
+    globalPanelViews?: ShellPanelDefinition[];
+    panelViews: Record<string, ShellPanelDefinition[]>;
+    productPanelViews?: ShellPanelDefinition[];
+    sectionKey: string;
+    selectedProductId?: string | null;
+}): ShellPanelCollection;
+export declare function getDefaultShellPanelView(options: {
+    globalPanelViews?: ShellPanelDefinition[];
+    panelViews: Record<string, ShellPanelDefinition[]>;
+    productPanelViews?: ShellPanelDefinition[];
+    sectionKey: string;
+    selectedProductId?: string | null;
+}): string;
+export declare function isShellPanelViewAvailable(options: {
+    globalPanelViews?: ShellPanelDefinition[];
+    panelViews: Record<string, ShellPanelDefinition[]>;
+    productPanelViews?: ShellPanelDefinition[];
+    sectionKey: string;
+    selectedProductId?: string | null;
+}, viewId: string | null): boolean;
+export declare function resolveShellPanelView(options: {
+    globalPanelViews?: ShellPanelDefinition[];
+    panelViews: Record<string, ShellPanelDefinition[]>;
+    productPanelViews?: ShellPanelDefinition[];
+    sectionKey: string;
+    selectedProductId?: string | null;
+}, viewId: string | null): string | null;
+export declare function getShellPanelView(options: {
+    globalPanelViews?: ShellPanelDefinition[];
+    panelViews: Record<string, ShellPanelDefinition[]>;
+    productPanelViews?: ShellPanelDefinition[];
+    sectionKey: string;
+    selectedProductId?: string | null;
+}, viewId: string | null): ShellPanelDefinition | null;

package/dist/shell/utils.js

@@ -0,0 +1,50 @@
+export function buildShellShortcutMap(modules) {
+    const map = new Map();
+    for (const section of Object.values(modules)) {
+        for (const item of section.items) {
+            if (item.shortcut) {
+                map.set(item.shortcut, item.to);
+            }
+        }
+    }
+    return map;
+}
+export function buildShellSectionCommands(module, group = 'Current Section') {
+    if (!module)
+        return [];
+    return module.items.map((item) => ({
+        id: `${module.id}:${item.to}`,
+        label: item.label,
+        to: item.to,
+        icon: item.icon,
+        group,
+        shortcut: item.shortcut,
+    }));
+}
+export function getShellPanelCollection({ globalPanelViews = [], panelViews, productPanelViews = [], sectionKey, selectedProductId = null, }) {
+    const moduleViews = selectedProductId ? productPanelViews : (panelViews[sectionKey] ?? []);
+    const globalViews = globalPanelViews;
+    return {
+        moduleViews,
+        globalViews,
+        views: [...moduleViews, ...globalViews],
+    };
+}
+export function getDefaultShellPanelView(options) {
+    return getShellPanelCollection(options).views[0]?.id ?? null;
+}
+export function isShellPanelViewAvailable(options, viewId) {
+    if (!viewId)
+        return false;
+    return getShellPanelCollection(options).views.some((view) => view.id === viewId);
+}
+export function resolveShellPanelView(options, viewId) {
+    if (!viewId)
+        return null;
+    return isShellPanelViewAvailable(options, viewId) ? viewId : getDefaultShellPanelView(options);
+}
+export function getShellPanelView(options, viewId) {
+    if (!viewId)
+        return null;
+    return getShellPanelCollection(options).views.find((view) => view.id === viewId) ?? null;
+}

package/dist/shell/workbench-layout.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { ShellViewportBand } from './types';
+export interface WorkbenchLayoutProps {
+    viewportBand: ShellViewportBand;
+    main: ReactNode;
+    aside?: ReactNode;
+    toolbar?: ReactNode;
+    className?: string;
+}
+export declare function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }: WorkbenchLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/workbench-layout.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function getWorkbenchMaxWidth(viewportBand) {
+    if (viewportBand === 'desktop')
+        return 1440;
+    if (viewportBand === 'wide')
+        return 1760;
+    if (viewportBand === 'ultrawide')
+        return 1920;
+    return undefined;
+}
+export function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }) {
+    const maxWidth = getWorkbenchMaxWidth(viewportBand);
+    const layout = !aside
+        ? 'single'
+        : viewportBand === 'mobile' || viewportBand === 'tablet'
+            ? 'stacked'
+            : viewportBand === 'desktop'
+                ? 'split'
+                : 'multi-zone';
+    const columnStyle = layout === 'split'
+        ? { gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 320px)' }
+        : layout === 'multi-zone'
+            ? { gridTemplateColumns: 'minmax(0, 1fr) minmax(300px, 360px)' }
+            : undefined;
+    return (_jsxs("section", { "data-testid": "workbench-layout", "data-band": viewportBand, className: joinClasses('mx-auto flex w-full flex-col gap-6', className), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: [toolbar ? _jsx("div", { "data-testid": "workbench-toolbar", children: toolbar }) : null, _jsxs("div", { "data-testid": "workbench-columns", "data-layout": layout, className: joinClasses('w-full gap-5', layout === 'stacked' ? 'flex flex-col' : layout === 'single' ? 'flex flex-col' : 'grid'), style: columnStyle, children: [_jsx("div", { "data-testid": "workbench-main", className: "min-w-0", children: main }), aside ? (_jsx("aside", { "data-testid": "workbench-aside", className: "min-w-0", children: aside })) : null] })] }));
+}

package/dist/styles.css

@@ -0,0 +1,4 @@
+:root {
+  --meda-shell-panel-dock-radius: var(--radius-4xl, 1.5rem);
+  --meda-shell-panel-dock-shadow: var(--shadow-panel-elevated, 0 32px 90px rgb(0 0 0 / 0.45));
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@medalsocial/meda",
+  "version": "0.1.0",
+  "description": "Shared Meda UI shell and runtime package.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@10.28.0",
+  "files": [
+    "README.md",
+    "components.json",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./shell": {
+      "types": "./dist/shell/index.d.ts",
+      "default": "./dist/shell/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "pnpm exec tsc -p tsconfig.build.json && node ./scripts/build.mjs",
+    "prepack": "pnpm build",
+    "test": "vitest run --environment jsdom",
+    "test:run": "vitest run --environment jsdom",
+    "typecheck": "tsc --noEmit",
+    "version": "changeset version",
+    "release": "pnpm build && pnpm publish --access public --no-git-checks"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.4.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/geist-mono": "^5.2.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.8.0",
+    "react-resizable-panels": "^4.10.0",
+    "tailwind-merge": "^3.5.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.0.2",
+    "typescript": "~6.0.2",
+    "vitest": "^4.1.4"
+  }
+}