@medalsocial/meda 1.2.0 → 1.4.0

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

@@ -1,7 +1,12 @@
 import { type ReactNode } from 'react';
 import { type ShellStorageAdapter } from './layout-state.js';
-import type { AppDefinition, MobileBottomNavItem, PanelMode, ThemeAdapter, WorkspaceDefinition } from './types.js';
+import type { AppDefinition, MobileBottomNavItem, PanelMode, PanelView, ThemeAdapter, WorkspaceDefinition } from './types.js';
 export type MobileDrawerKind = 'menu-drawer' | 'module-drawer' | 'panels-drawer' | 'ai-drawer' | (string & {}) | null;
+export interface PanelViewRegistration {
+    id: string;
+    views: PanelView[];
+    defaultView?: string;
+}
 interface MedaShellContextValue {
     workspace: WorkspaceDefinition;
     workspaces: WorkspaceDefinition[];
@@ -15,6 +20,9 @@ interface MedaShellContextValue {
         setMode: (m: PanelMode) => void;
         setActiveView: (v: string | null) => void;
         setWidth: (w: number) => void;
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
         /** Opens panel + switches to viewId in one call.
          * Sugar for app keyboard shortcuts (e.g. Cmd+J → panel.focus('ai')).
          * If already open in 'panel', 'expanded', or 'fullscreen', the existing
@@ -26,6 +34,7 @@ interface MedaShellContextValue {
         collapsed: boolean;
         setWidth: (w: number) => void;
         setCollapsed: (c: boolean) => void;
+        toggle: () => void;
     };
     mobileBottomNav: MobileBottomNavItem[];
     mobileDrawer: {
@@ -36,6 +45,10 @@ interface MedaShellContextValue {
         open: boolean;
         setOpen: (open: boolean) => void;
     };
+    panelViews: {
+        registrations: PanelViewRegistration[];
+        register: (id: string, views: PanelView[], defaultView?: string) => () => void;
+    };
     commandPaletteHotkey: string;
     /** Selection bridge between main workspace and right panel views (spec §17). */
     selection: unknown | null;

package/dist/shell/shell-provider.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LayoutGrid, Menu, PanelTop, Sparkles } from 'lucide-react';
-import { createContext, lazy, Suspense, useContext, useMemo, useState, } from 'react';
+import { createContext, lazy, Suspense, useCallback, useContext, useMemo, useState, } from 'react';
 import { createLocalStorageAdapter, useShellLayoutState, } from './layout-state.js';
 import { DefaultThemeProvider, ThemeCtx } from './theme.js';
+import { useShellViewport } from './use-shell-viewport.js';
 // ---------------------------------------------------------------------------
 // Theme adapter wiring
 // ---------------------------------------------------------------------------
@@ -78,11 +79,35 @@ export function MedaShellProvider(props) {
         open: commandPaletteOpen,
         setOpen: setCommandPaletteOpen,
     }), [commandPaletteOpen]);
+    const [panelViewRegistrations, setPanelViewRegistrations] = useState([]);
+    const registerPanelViews = useCallback((id, views, defaultView) => {
+        setPanelViewRegistrations((prev) => {
+            const existing = prev.find((registration) => registration.id === id);
+            if (existing?.views === views && existing.defaultView === defaultView)
+                return prev;
+            const nextRegistration = defaultView === undefined ? { id, views } : { id, views, defaultView };
+            if (existing == null)
+                return [...prev, nextRegistration];
+            return prev.map((registration) => (registration.id === id ? nextRegistration : registration));
+        });
+        return () => {
+            setPanelViewRegistrations((prev) => prev.some((registration) => registration.id === id &&
+                registration.views === views &&
+                registration.defaultView === defaultView)
+                ? prev.filter((registration) => registration.id !== id)
+                : prev);
+        };
+    }, []);
+    const panelViews = useMemo(() => ({
+        registrations: panelViewRegistrations,
+        register: registerPanelViews,
+    }), [panelViewRegistrations, registerPanelViews]);
     const [layoutState, setLayoutState] = useShellLayoutState({
         workspaceId: props.workspace.id,
         appId: activeAppId,
         storage,
     });
+    const isMobile = useShellViewport() === 'mobile';
     const panel = useMemo(() => ({
         mode: layoutState.rightPanel.mode,
         activeView: layoutState.rightPanel.activeView,
@@ -99,6 +124,37 @@ export function MedaShellProvider(props) {
             ...prev,
             rightPanel: { ...prev.rightPanel, width },
         })),
+        open: () => {
+            if (isMobile)
+                setMobileDrawerOpen('panels-drawer');
+            setLayoutState((prev) => ({
+                ...prev,
+                rightPanel: {
+                    ...prev.rightPanel,
+                    mode: prev.rightPanel.mode === 'closed' ? 'panel' : prev.rightPanel.mode,
+                },
+            }));
+        },
+        close: () => {
+            if (isMobile)
+                setMobileDrawerOpen((open) => (open === 'panels-drawer' ? null : open));
+            setLayoutState((prev) => ({
+                ...prev,
+                rightPanel: { ...prev.rightPanel, mode: 'closed' },
+            }));
+        },
+        toggle: () => {
+            if (isMobile) {
+                setMobileDrawerOpen((open) => (open === 'panels-drawer' ? null : 'panels-drawer'));
+            }
+            setLayoutState((prev) => ({
+                ...prev,
+                rightPanel: {
+                    ...prev.rightPanel,
+                    mode: prev.rightPanel.mode === 'closed' ? 'panel' : 'closed',
+                },
+            }));
+        },
         // focus(viewId) — opens panel + switches to view in one call.
         // Only flips closed → panel; preserves expanded / fullscreen modes.
         focus: (viewId) => setLayoutState((prev) => {
@@ -108,7 +164,7 @@ export function MedaShellProvider(props) {
                 rightPanel: { ...prev.rightPanel, mode: nextMode, activeView: viewId },
             };
         }),
-    }), [layoutState, setLayoutState]);
+    }), [isMobile, layoutState, setLayoutState]);
     const contextRail = useMemo(() => ({
         width: layoutState.contextRail.width,
         collapsed: layoutState.contextRail.collapsed,
@@ -120,6 +176,10 @@ export function MedaShellProvider(props) {
             ...prev,
             contextRail: { ...prev.contextRail, collapsed },
         })),
+        toggle: () => setLayoutState((prev) => ({
+            ...prev,
+            contextRail: { ...prev.contextRail, collapsed: !prev.contextRail.collapsed },
+        })),
     }), [layoutState, setLayoutState]);
     const value = useMemo(() => ({
         workspace: props.workspace,
@@ -132,6 +192,7 @@ export function MedaShellProvider(props) {
         mobileBottomNav: props.mobileBottomNav ?? defaultMobileBottomNav,
         mobileDrawer,
         commandPalette,
+        panelViews,
         commandPaletteHotkey: props.commandPaletteHotkey ?? 'mod+k',
         selection,
         setSelection,
@@ -145,6 +206,7 @@ export function MedaShellProvider(props) {
         props.mobileBottomNav,
         mobileDrawer,
         commandPalette,
+        panelViews,
         props.commandPaletteHotkey,
         selection,
     ]);

package/dist/shell/types.d.ts

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
 export interface AppDefinition {
     id: string;
     label: string;
@@ -14,7 +14,8 @@ export interface ContextModule {
     id: string;
     label: string;
     description?: string;
-    items: ContextItem[];
+    items?: ContextItem[];
+    render?: (ctx: ShellRenderContext) => ReactNode;
 }
 export interface ContextItem {
     id: string;
@@ -48,6 +49,7 @@ export interface ShellLinkRenderArgs {
     isActive: boolean;
     className: string;
     children: ReactNode;
+    linkProps: AnchorHTMLAttributes<HTMLAnchorElement>;
 }
 export interface CommandDefinition {
     id: string;
@@ -55,6 +57,8 @@ export interface CommandDefinition {
     icon?: LucideIcon;
     group: string;
     shortcut?: string;
+    /** Display-only alias for `shortcut`; `shortcut` wins when both are supplied. */
+    hotkey?: string;
     run: () => void | Promise<void>;
 }
 export interface ThemeAdapter {
@@ -76,6 +80,7 @@ export interface AppShellIconRailConfig {
     utilityItems?: import('./icon-rail.js').IconRailItem[];
     footer?: ReactNode;
     activeId?: string;
+    renderLink?: import('./icon-rail.js').IconRailProps['renderLink'];
 }
 /** ContextRail configuration for `<AppShell variant="workspace">`. */
 export interface AppShellContextRailConfig {
@@ -97,3 +102,9 @@ export interface AppShellAuthConfig {
     preview?: ReactNode;
     actions?: ReactNode;
 }
+export interface AppShellAuthBranding {
+    brandName?: ReactNode;
+    brandMark?: ReactNode;
+    appName?: ReactNode;
+    tagline?: ReactNode;
+}

package/dist/theme/index.d.ts

@@ -0,0 +1 @@
+export { createMedaThemeCss, defineMedaTheme, type MedaThemeConfig, type MedaThemeDefinition, type MedaThemeMode, type MedaThemeModeConfig, type MedaThemeTokenMap, } from './theme-bridge.js';

package/dist/theme/index.js

@@ -0,0 +1 @@
+export { createMedaThemeCss, defineMedaTheme, } from './theme-bridge.js';

package/dist/theme/theme-bridge.d.ts

@@ -0,0 +1,21 @@
+export type MedaThemeMode = 'light' | 'dark';
+export type MedaThemeTokenMap = Record<string, string | undefined>;
+export interface MedaThemeModeConfig {
+    colors?: MedaThemeTokenMap;
+    fonts?: MedaThemeTokenMap;
+    tokens?: MedaThemeTokenMap;
+}
+export interface MedaThemeConfig extends MedaThemeModeConfig {
+    appId: string;
+    selector?: string;
+    light?: MedaThemeModeConfig;
+    dark?: MedaThemeModeConfig;
+}
+export interface MedaThemeDefinition {
+    appId: string;
+    selector: string;
+    light: Required<MedaThemeModeConfig>;
+    dark: Required<MedaThemeModeConfig>;
+}
+export declare function defineMedaTheme(config: MedaThemeConfig): MedaThemeDefinition;
+export declare function createMedaThemeCss(theme: MedaThemeDefinition): string;

package/dist/theme/theme-bridge.js

@@ -0,0 +1,52 @@
+const MODE_KEYS = ['colors', 'fonts', 'tokens'];
+function assertAppId(appId) {
+    if (!/^[a-zA-Z0-9_-]+$/.test(appId)) {
+        throw new Error('Meda theme appId must contain only letters, numbers, underscores, or dashes.');
+    }
+}
+function toCssVariableName(group, key) {
+    const normalized = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+    if (normalized.startsWith('--')) {
+        return normalized;
+    }
+    if (group === 'fonts') {
+        return `--font-${normalized}`;
+    }
+    return `--${normalized}`;
+}
+function mergeModeConfig(base, mode = {}) {
+    return {
+        colors: { ...base.colors, ...mode.colors },
+        fonts: { ...base.fonts, ...mode.fonts },
+        tokens: { ...base.tokens, ...mode.tokens },
+    };
+}
+export function defineMedaTheme(config) {
+    assertAppId(config.appId);
+    const base = {
+        colors: config.colors ?? {},
+        fonts: config.fonts ?? {},
+        tokens: config.tokens ?? {},
+    };
+    return {
+        appId: config.appId,
+        selector: config.selector ?? `[data-meda-app="${config.appId}"]`,
+        light: mergeModeConfig(base, config.light),
+        dark: mergeModeConfig(base, config.dark),
+    };
+}
+function entriesForMode(mode) {
+    return MODE_KEYS.flatMap((group) => Object.entries(mode[group])
+        .filter((entry) => typeof entry[1] === 'string')
+        .map(([key, value]) => [toCssVariableName(group, key), value])).sort(([left], [right]) => left.localeCompare(right));
+}
+function renderBlock(selector, entries) {
+    const declarations = entries.map(([key, value]) => `  ${key}: ${value};`).join('\n');
+    return `${selector} {\n${declarations}\n}`;
+}
+export function createMedaThemeCss(theme) {
+    const lightEntries = entriesForMode(theme.light);
+    const darkEntries = entriesForMode(theme.dark);
+    const darkSelector = `${theme.selector}.dark, ${theme.selector}[data-theme="dark"]`;
+    return [renderBlock(theme.selector, lightEntries), renderBlock(darkSelector, darkEntries)].join('\n\n');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -31,6 +31,14 @@
       "types": "./dist/brand/index.d.ts",
       "default": "./dist/brand/index.js"
     },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "default": "./dist/auth/index.js"
+    },
+    "./auth/better-auth": {
+      "types": "./dist/auth/better-auth.d.ts",
+      "default": "./dist/auth/better-auth.js"
+    },
     "./shell": {
       "types": "./dist/shell/index.d.ts",
       "default": "./dist/shell/index.js"
@@ -71,6 +79,18 @@
     },
     "./styles/tokens": {
       "default": "./dist/styles/tokens.css"
+    },
+    "./shell/primitives": {
+      "types": "./dist/shell/primitives.d.ts",
+      "default": "./dist/shell/primitives.js"
+    },
+    "./recipes/next": {
+      "types": "./dist/recipes/next.d.ts",
+      "default": "./dist/recipes/next.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "default": "./dist/theme/index.js"
     }
   },
   "sideEffects": [