@medalsocial/meda 1.4.0 → 1.5.0

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

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
-import type { AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+import type { AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig } from './types.js';
 export interface AppShellWorkspaceProps {
     iconRail?: AppShellIconRailConfig;
     contextRail?: AppShellContextRailConfig;
     rightPanel?: AppShellRightPanelConfig;
+    workspace?: AppShellWorkspaceConfig;
     globalActions?: ReactNode;
     children: ReactNode;
 }
-export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalActions, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, globalActions, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,7 @@ import { ShellHeader } from './shell-header.js';
 import { ShellMain } from './shell-main.js';
 import { useShellViewport } from './use-shell-viewport.js';
 const EMPTY_PANEL_VIEWS = [];
-export function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalActions, children, }) {
+export function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, globalActions, children, }) {
     const viewport = useShellViewport();
     const isMobile = viewport === 'mobile';
     const staticPanelViews = rightPanel?.panelViews ?? EMPTY_PANEL_VIEWS;
@@ -37,7 +37,7 @@ export function AppShellWorkspace({ iconRail, contextRail, rightPanel, globalAct
     // rendered without an explicit-height ancestor (tests, direct imports). The
     // <AppShell> wrapper already enforces h-screen for the workspace variant, so
     // nested viewport-height divs collapse cleanly — no double-scroll.
-    return (_jsxs("div", { className: "flex h-screen flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions })) : (_jsx(ShellHeader, { globalActions: globalActions })), _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 })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId })), _jsx(ShellMain, { layout: "workspace", children: children }), !isMobile && resolvedRightPanel.panelViews.length > 0 && (_jsx(RightPanel, { panelViews: staticPanelViews, defaultView: rightPanel?.defaultView }))] }), isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, menuActiveId: iconRail?.activeId, menuRenderLink: iconRail?.renderLink, module: contextRail?.module, moduleAppId: contextRail?.appId, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }));
+    return (_jsxs("div", { className: "flex h-screen flex-col", children: [isMobile ? (_jsx(MobileHeader, { globalActions: globalActions })) : (_jsx(ShellHeader, { globalActions: globalActions, workspaceMenuItems: workspace?.menuItems, workspaceMenuFooter: workspace?.menuFooter })), _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 })), !isMobile && contextRail && (_jsx(ContextRail, { appId: contextRail.appId, module: contextRail.module, activeItemId: contextRail.activeItemId })), _jsx(ShellMain, { layout: "workspace", children: children }), !isMobile && resolvedRightPanel.panelViews.length > 0 && (_jsx(RightPanel, { panelViews: staticPanelViews, defaultView: rightPanel?.defaultView }))] }), isMobile && hasDrawerContent && _jsx(MobileBottomNav, { items: navItems }), isMobile && hasDrawerContent && (_jsx(MobileDrawers, { menuItems: mobileMenuItems, menuActiveId: iconRail?.activeId, menuRenderLink: iconRail?.renderLink, module: contextRail?.module, moduleAppId: contextRail?.appId, panelViews: resolvedRightPanel.panelViews, defaultView: resolvedRightPanel.defaultView }))] }));
 }
 function buildMobileNavItems(iconRail, contextRail, panelViews) {
     const items = [];

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+import type { AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellWorkspaceConfig } from './types.js';
 interface AppShellBaseProps {
     children: ReactNode;
     className?: string;
@@ -15,6 +15,12 @@ export type AppShellProps = AppShellBaseProps & ({
     iconRail?: AppShellIconRailConfig;
     contextRail?: AppShellContextRailConfig;
     rightPanel?: AppShellRightPanelConfig;
+    /**
+     * Configurable workspace dropdown — replaces the package-default
+     * "Manage workspaces / Settings / Profile / Sign out" entries when
+     * `menuItems` is provided. The theme toggle is preserved automatically.
+     */
+    workspace?: AppShellWorkspaceConfig;
     globalActions?: ReactNode;
 } | {
     variant: 'chat';

package/dist/shell/app-shell.js

@@ -16,7 +16,7 @@ export function AppShell(props) {
         case 'auth':
             return wrapper(_jsx(AppShellAuth, { ...resolveAuthConfig(props), children: props.children }));
         case 'workspace':
-            return wrapper(_jsx(AppShellWorkspace, { iconRail: props.iconRail, contextRail: props.contextRail, rightPanel: props.rightPanel, globalActions: props.globalActions, children: props.children }));
+            return wrapper(_jsx(AppShellWorkspace, { iconRail: props.iconRail, contextRail: props.contextRail, rightPanel: props.rightPanel, workspace: props.workspace, globalActions: props.globalActions, children: props.children }));
         case 'chat':
             return wrapper(_jsx(AppShellChat, { globalActions: props.globalActions, children: props.children }));
     }

package/dist/shell/index.d.ts

@@ -26,5 +26,5 @@ export type { MedaShellProviderProps } from './shell-provider.js';
 export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
 export { DefaultThemeProvider, ThemeToggle, useTheme } from './theme.js';
 export { NextThemesAdapter } from './theme-next-themes.js';
-export type { AppDefinition, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellVariant, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
+export type { AppDefinition, AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig, AppShellVariant, AppShellWorkspaceConfig, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, WorkspaceMenuItem, } from './types.js';
 export { useShellViewport } from './use-shell-viewport.js';

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

@@ -1,12 +1,34 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+import type { WorkspaceMenuItem } from './types.js';
 export interface WorkspaceSwitcherProps {
+    /**
+     * Configurable dropdown items. When provided, REPLACES the default
+     * "Manage workspaces / Settings / Profile / Sign out" entries. The theme
+     * toggle is still inserted automatically by meda — between the items and
+     * the footer — so consumers don't have to reimplement theme cycling.
+     *
+     * When omitted, the package-default items render (1.x behavior).
+     */
+    menuItems?: WorkspaceMenuItem[];
+    /**
+     * Extra content rendered after all items and the theme toggle. Backwards-
+     * compatible alias for the legacy `workspaceMenuFooter` prop.
+     */
+    menuFooter?: ReactNode;
+    /** @deprecated Use `menuFooter` instead. */
     workspaceMenuFooter?: ReactNode;
 }
-export declare function WorkspaceSwitcher({ workspaceMenuFooter }?: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, }?: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element;
 export declare function AppTabs(): import("react/jsx-runtime").JSX.Element;
 export declare function PanelToggle(): import("react/jsx-runtime").JSX.Element;
 export interface ShellHeaderProps {
     globalActions?: ReactNode;
     className?: string;
+    /**
+     * Forwarded to the internal `<WorkspaceSwitcher>`. See
+     * `WorkspaceSwitcherProps` for the full shape.
+     */
+    workspaceMenuItems?: WorkspaceMenuItem[];
+    workspaceMenuFooter?: ReactNode;
 }
-export declare function ShellHeader({ globalActions, className }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShellHeader({ globalActions, className, workspaceMenuItems, workspaceMenuFooter, }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/shell-header.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDown, Monitor, Moon, PanelRightClose, PanelRightOpen, Sun } from 'lucide-react';
+import { createElement, Fragment, isValidElement } from 'react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
 import { cn } from '../lib/utils.js';
 import { useMedaShell } from './shell-provider.js';
@@ -18,9 +19,43 @@ function ThemeToggleMenuItem() {
     const Icon = THEME_ICON[theme];
     return (_jsxs(DropdownMenuItem, { onClick: () => setTheme(NEXT_THEME[theme]), children: [_jsx(Icon, { size: 16, "aria-hidden": "true" }), THEME_LABEL[theme]] }));
 }
-export function WorkspaceSwitcher({ workspaceMenuFooter } = {}) {
+function renderConfiguredIcon(icon) {
+    if (icon == null)
+        return null;
+    if (isValidElement(icon))
+        return icon;
+    if (typeof icon === 'function') {
+        return createElement(icon, { size: 16, 'aria-hidden': true });
+    }
+    // forwardRef/memo components are objects carrying a `$$typeof` symbol —
+    // treat them like Lucide components. Plain ReactNode objects (arrays,
+    // iterables, promises) have no `$$typeof` and are rendered as-is so they
+    // don't crash createElement with "Element type is invalid".
+    if (typeof icon === 'object' && icon !== null) {
+        const candidate = icon;
+        if (candidate.$$typeof != null) {
+            return createElement(icon, {
+                size: 16,
+                'aria-hidden': true,
+            });
+        }
+    }
+    return icon;
+}
+function renderConfiguredItem(item) {
+    const handleSelect = () => item.onClick?.();
+    // Childless anchor — Base UI merges the DropdownMenuItem's children into the
+    // cloned render element. Passing children here would override the icon +
+    // label children below and configured icons would silently disappear.
+    // biome-ignore lint/a11y/useAnchorContent: children are injected at render time by Base UI's `render` prop
+    const renderLink = item.href != null ? _jsx("a", { href: item.href }) : undefined;
+    return (_jsxs(DropdownMenuItem, { render: renderLink, "data-variant": item.variant ?? 'default', className: item.variant === 'destructive' ? 'text-destructive' : undefined, onClick: handleSelect, children: [renderConfiguredIcon(item.icon), item.label] }));
+}
+export function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, } = {}) {
     const { workspace, workspaces } = useMedaShell();
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", className: "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent" }), children: [workspace.icon != null && (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: workspace.icon })), _jsx("span", { children: workspace.name }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })] }), _jsxs(DropdownMenuContent, { className: "min-w-[200px]", children: [workspaces.length > 0 && (_jsxs(_Fragment, { children: [workspaces.map((ws) => (_jsxs(DropdownMenuItem, { children: [ws.icon != null && _jsx("span", { "aria-hidden": "true", children: ws.icon }), ws.name] }, ws.id))), _jsx(DropdownMenuSeparator, {})] })), _jsx(DropdownMenuItem, { children: "Manage workspaces" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Settings" }), _jsx(DropdownMenuItem, { children: "Profile" }), _jsx(DropdownMenuSeparator, {}), _jsx(ThemeToggleMenuItem, {}), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Sign out" }), workspaceMenuFooter] })] }));
+    const resolvedFooter = menuFooter ?? workspaceMenuFooter;
+    const useConfiguredItems = Array.isArray(menuItems);
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", className: "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent" }), children: [workspace.icon != null && (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: workspace.icon })), _jsx("span", { children: workspace.name }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })] }), _jsxs(DropdownMenuContent, { className: "min-w-[200px]", children: [workspaces.length > 0 && (_jsxs(_Fragment, { children: [workspaces.map((ws) => (_jsxs(DropdownMenuItem, { children: [ws.icon != null && _jsx("span", { "aria-hidden": "true", children: ws.icon }), ws.name] }, ws.id))), _jsx(DropdownMenuSeparator, {})] })), useConfiguredItems ? (menuItems.map((item) => (_jsxs(Fragment, { children: [renderConfiguredItem(item), item.separatorAfter && _jsx(DropdownMenuSeparator, {})] }, item.id)))) : (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { children: "Manage workspaces" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Settings" }), _jsx(DropdownMenuItem, { children: "Profile" })] })), _jsx(DropdownMenuSeparator, {}), _jsx(ThemeToggleMenuItem, {}), !useConfiguredItems && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Sign out" })] })), resolvedFooter] })] }));
 }
 // ---------------------------------------------------------------------------
 // AppTabs
@@ -50,9 +85,9 @@ export function PanelToggle() {
     };
     return (_jsx("button", { type: "button", "aria-label": isOpen ? 'Close right panel' : 'Open right panel', onClick: handleClick, className: cn('inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors', isOpen ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-accent'), children: isOpen ? (_jsx(PanelRightClose, { size: 18, "aria-hidden": "true" })) : (_jsx(PanelRightOpen, { size: 18, "aria-hidden": "true" })) }));
 }
-export function ShellHeader({ globalActions, className } = {}) {
+export function ShellHeader({ globalActions, className, workspaceMenuItems, workspaceMenuFooter, } = {}) {
     const band = useShellViewport();
     if (band === 'mobile')
         return null;
-    return (_jsxs("header", { className: cn('flex h-[var(--shell-header-height)] w-full items-center justify-between', 'border-b border-border bg-background px-3', className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx(WorkspaceSwitcher, {}), _jsx(AppTabs, {})] }), _jsxs("div", { className: "flex items-center gap-2", children: [globalActions, _jsx(PanelToggle, {})] })] }));
+    return (_jsxs("header", { className: cn('flex h-[var(--shell-header-height)] w-full items-center justify-between', 'border-b border-border bg-background px-3', className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx(WorkspaceSwitcher, { menuItems: workspaceMenuItems, menuFooter: workspaceMenuFooter }), _jsx(AppTabs, {})] }), _jsxs("div", { className: "flex items-center gap-2", children: [globalActions, _jsx(PanelToggle, {})] })] }));
 }

package/dist/shell/types.d.ts

@@ -93,6 +93,44 @@ export interface AppShellRightPanelConfig {
     panelViews: PanelView[];
     defaultView?: string;
 }
+/**
+ * A single configurable item in the WorkspaceSwitcher dropdown.
+ * Either `href` (renders as a link) or `onClick` (renders as a button) MUST
+ * be provided; supplying both makes the item a button that fires `onClick`
+ * AND navigates to `href` afterwards.
+ */
+interface WorkspaceMenuItemBase {
+    id: string;
+    label: ReactNode;
+    icon?: LucideIcon | ReactNode;
+    /** Insert a `<DropdownMenuSeparator />` immediately after this item. */
+    separatorAfter?: boolean;
+    /** Visual intent — `destructive` paints with the destructive token. */
+    variant?: 'default' | 'destructive';
+}
+export type WorkspaceMenuItem = WorkspaceMenuItemBase & ({
+    href: string;
+    onClick?: () => void;
+} | {
+    onClick: () => void;
+    href?: string;
+});
+/**
+ * Workspace dropdown configuration for `<AppShell variant="workspace">`.
+ *
+ * When `menuItems` is provided, it REPLACES the package-default menu
+ * ("Manage workspaces", "Settings", "Profile", "Sign out"). The theme toggle
+ * is still inserted automatically by meda — between the items and the footer
+ * — so consumers don't have to reimplement theme cycling.
+ *
+ * When `menuItems` is omitted, the package defaults render unchanged (the
+ * existing 1.x behavior). This is fully additive and non-breaking.
+ */
+export interface AppShellWorkspaceConfig {
+    menuItems?: WorkspaceMenuItem[];
+    /** Extra slot rendered after all items and the theme toggle. */
+    menuFooter?: ReactNode;
+}
 export interface AppShellAuthConfig {
     title: ReactNode;
     description?: ReactNode;
@@ -108,3 +146,4 @@ export interface AppShellAuthBranding {
     appName?: ReactNode;
     tagline?: ReactNode;
 }
+export {};

package/dist/styles/theme.css

@@ -1,7 +1,27 @@
 @import "./tokens.css";
 
+/* Tell Tailwind v4 to scan meda's compiled component output so utilities
+   like `h-full`, `mt-auto`, `py-3.5`, and `bg-shell-rail` (used by IconRail,
+   AppShellWorkspace, etc.) are generated even when the consumer app doesn't
+   reference them itself. Without this, consumers see broken layout where
+   meda components rely on classes the app doesn't otherwise use. Path is
+   resolved relative to this CSS file at build time, so it points to the
+   sibling component output regardless of where the package is installed. */
+@source "../**/*.js";
+
 @custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
 
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+}
+
 @theme inline {
   /* Color primitives — exposed as Tailwind color scales */
 

package/dist/styles/theme.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+
+// Read theme.css via Node's runtime APIs without pulling in @types/node.
+// Declared locally so the package-level tsconfig (which doesn't include
+// node typings) still typechecks cleanly under jsdom Vitest runs.
+declare const require: (id: string) => unknown;
+declare const __dirname: string;
+
+const fs = require('node:fs') as { readFileSync(p: string, enc: string): string };
+const path = require('node:path') as { join(...parts: string[]): string };
+const themeCss = fs.readFileSync(path.join(__dirname, 'theme.css'), 'utf8');
+
+describe('theme.css', () => {
+  // Tailwind v4 only generates utility classes for class names it sees in
+  // scanned files. Consumer apps don't reference every utility used by meda
+  // components (e.g. `h-full`, `mt-auto`, `py-3.5`, `bg-shell-rail` on
+  // IconRail), so without an @source directive pointing at meda's compiled
+  // dist files, those classes silently disappear and component layouts
+  // collapse — most visibly, the IconRail's utility items fail to pin to
+  // the bottom of the viewport because `mt-auto` never gets generated.
+  //
+  // The directive is resolved relative to this CSS file at build time. Since
+  // src/styles/theme.css is copied verbatim to dist/styles/theme.css by the
+  // build script, `../**/*.js` from the dist location scans every emitted
+  // component module — exactly the surface consumers import from.
+  it('declares an @source directive that scans meda component output', () => {
+    expect(themeCss).toMatch(/@source\s+["']\.\.\/\*\*\/\*\.js["']/);
+  });
+});

package/package.json

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