@medalsocial/meda 0.3.0 → 1.0.0

package/dist/shell/shell-provider.js

@@ -0,0 +1,152 @@
+'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 { createLocalStorageAdapter, useShellLayoutState, } from './layout-state.js';
+import { DefaultThemeProvider, ThemeCtx } from './theme.js';
+// ---------------------------------------------------------------------------
+// Theme adapter wiring
+// ---------------------------------------------------------------------------
+// Lazy-loaded so that importing next-themes only happens when the consumer
+// passes themeAdapter='next-themes'. Default-adapter consumers never trigger
+// the import.
+const NextThemesAdapter = lazy(() => import('./theme-next-themes.js').then((m) => ({ default: m.NextThemesAdapter })));
+function CustomThemeBridge({ adapter, children }) {
+    return _jsx(ThemeCtx.Provider, { value: adapter, children: children });
+}
+function pickTheme(themeAdapter, children) {
+    const adapter = themeAdapter ?? 'default';
+    if (adapter === 'default') {
+        return _jsx(DefaultThemeProvider, { children: children });
+    }
+    if (adapter === 'next-themes') {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(NextThemesAdapter, { children: children }) }));
+    }
+    // Custom ThemeAdapter object
+    return _jsx(CustomThemeBridge, { adapter: adapter, children: children });
+}
+// ---------------------------------------------------------------------------
+// Default mobile bottom nav (canonical 4-item set, per spec §16)
+// Full icons ship here; the per-app customisation point is the mobileBottomNav
+// prop. For RC.1 the canonical drawer wire-up is a Phase 13 concern — only
+// the shape is locked here.
+// ---------------------------------------------------------------------------
+const defaultMobileBottomNav = [
+    { id: 'menu', label: 'Menu', icon: Menu, opens: 'menu-drawer' },
+    { id: 'module', label: 'Module', icon: LayoutGrid, opens: 'module-drawer' },
+    { id: 'panels', label: 'Panels', icon: PanelTop, opens: 'panels-drawer' },
+    { id: 'ai', label: 'AI', icon: Sparkles, opens: 'ai-drawer' },
+];
+const Ctx = createContext(null);
+export function useMedaShell() {
+    const v = useContext(Ctx);
+    if (!v)
+        throw new Error('useMedaShell must be used inside <MedaShellProvider>');
+    return v;
+}
+/**
+ * Selection bridge between main workspace and right panel views (spec §17).
+ *
+ * `T` is consumer-typed: setSelection writes whatever shape you pass; the
+ * matching getter narrows to `T | null`. The shell does not validate the
+ * shape — coordinate types between writer and readers in your app.
+ */
+export function useShellSelection() {
+    const ctx = useMedaShell();
+    return [ctx.selection, ctx.setSelection];
+}
+// ---------------------------------------------------------------------------
+// Provider implementation
+// ---------------------------------------------------------------------------
+export function MedaShellProvider(props) {
+    // Guard: apps array must not be empty
+    if (props.apps.length === 0) {
+        throw new Error('MedaShellProvider: apps must contain at least one AppDefinition');
+    }
+    // Stable storage reference — prevents useShellLayoutState's hydration
+    // effect from looping when an inline adapter would change identity each render.
+    const storage = useMemo(() => props.storage ?? createLocalStorageAdapter(), [props.storage]);
+    const [activeAppId, setActiveApp] = useState(props.defaultActiveApp ?? props.apps[0]?.id ?? '');
+    const [selection, setSelection] = useState(null);
+    const [mobileDrawerOpen, setMobileDrawerOpen] = useState(null);
+    const mobileDrawer = useMemo(() => ({
+        open: mobileDrawerOpen,
+        setOpen: setMobileDrawerOpen,
+    }), [mobileDrawerOpen]);
+    const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+    const commandPalette = useMemo(() => ({
+        open: commandPaletteOpen,
+        setOpen: setCommandPaletteOpen,
+    }), [commandPaletteOpen]);
+    const [layoutState, setLayoutState] = useShellLayoutState({
+        workspaceId: props.workspace.id,
+        appId: activeAppId,
+        storage,
+    });
+    const panel = useMemo(() => ({
+        mode: layoutState.rightPanel.mode,
+        activeView: layoutState.rightPanel.activeView,
+        width: layoutState.rightPanel.width,
+        setMode: (mode) => setLayoutState((prev) => ({
+            ...prev,
+            rightPanel: { ...prev.rightPanel, mode },
+        })),
+        setActiveView: (activeView) => setLayoutState((prev) => ({
+            ...prev,
+            rightPanel: { ...prev.rightPanel, activeView },
+        })),
+        setWidth: (width) => setLayoutState((prev) => ({
+            ...prev,
+            rightPanel: { ...prev.rightPanel, width },
+        })),
+        // focus(viewId) — opens panel + switches to view in one call.
+        // Only flips closed → panel; preserves expanded / fullscreen modes.
+        focus: (viewId) => setLayoutState((prev) => {
+            const nextMode = prev.rightPanel.mode === 'closed' ? 'panel' : prev.rightPanel.mode;
+            return {
+                ...prev,
+                rightPanel: { ...prev.rightPanel, mode: nextMode, activeView: viewId },
+            };
+        }),
+    }), [layoutState, setLayoutState]);
+    const contextRail = useMemo(() => ({
+        width: layoutState.contextRail.width,
+        collapsed: layoutState.contextRail.collapsed,
+        setWidth: (width) => setLayoutState((prev) => ({
+            ...prev,
+            contextRail: { ...prev.contextRail, width },
+        })),
+        setCollapsed: (collapsed) => setLayoutState((prev) => ({
+            ...prev,
+            contextRail: { ...prev.contextRail, collapsed },
+        })),
+    }), [layoutState, setLayoutState]);
+    const value = useMemo(() => ({
+        workspace: props.workspace,
+        workspaces: props.workspaces ?? [props.workspace],
+        apps: props.apps,
+        activeAppId,
+        setActiveApp,
+        panel,
+        contextRail,
+        mobileBottomNav: props.mobileBottomNav ?? defaultMobileBottomNav,
+        mobileDrawer,
+        commandPalette,
+        commandPaletteHotkey: props.commandPaletteHotkey ?? 'mod+k',
+        selection,
+        setSelection,
+    }), [
+        props.workspace,
+        props.workspaces,
+        props.apps,
+        activeAppId,
+        panel,
+        contextRail,
+        props.mobileBottomNav,
+        mobileDrawer,
+        commandPalette,
+        props.commandPaletteHotkey,
+        selection,
+    ]);
+    return _jsx(Ctx.Provider, { value: value, children: pickTheme(props.themeAdapter, props.children) });
+}

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ShellContentLayout, ShellTab } from './types.js';
+import type { ShellContentLayout, ShellTab } from './extras/types.js';
 interface ShellRouteMatchLike {
     handle?: unknown;
     params?: Record<string, string | undefined>;

package/dist/shell/theme-next-themes.d.ts

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

package/dist/shell/theme-next-themes.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
+import { ThemeCtx } from './theme.js';
+function narrow(value) {
+    if (value === 'light' || value === 'dark' || value === 'system')
+        return value;
+    return 'system';
+}
+function narrowResolved(value) {
+    return value === 'dark' ? 'dark' : 'light';
+}
+function NextThemesBridge({ children }) {
+    const { theme, setTheme, resolvedTheme } = useNextTheme();
+    const value = {
+        theme: narrow(theme),
+        setTheme: (t) => setTheme(t),
+        resolvedTheme: narrowResolved(resolvedTheme),
+    };
+    return _jsx(ThemeCtx.Provider, { value: value, children: children });
+}
+export function NextThemesAdapter({ children }) {
+    return (_jsx(NextThemesProvider, { attribute: "class", enableSystem: true, defaultTheme: "system", children: _jsx(NextThemesBridge, { children: children }) }));
+}

package/dist/shell/theme.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ThemeAdapter } from './types.js';
+/** @internal – used by theme adapters; not part of the public API. */
+export declare const ThemeCtx: import("react").Context<ThemeAdapter | null>;
+export declare function DefaultThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeAdapter;
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/theme.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { createContext, useContext, useEffect, useState } from 'react';
+const NEXT = {
+    light: 'dark',
+    dark: 'system',
+    system: 'light',
+};
+const ICON = {
+    light: Sun,
+    dark: Moon,
+    system: Monitor,
+};
+const LABEL = {
+    light: 'Switch to dark theme',
+    dark: 'Switch to system theme',
+    system: 'Switch to light theme',
+};
+/** @internal – used by theme adapters; not part of the public API. */
+export const ThemeCtx = createContext(null);
+export function DefaultThemeProvider({ children }) {
+    const [theme, setThemeState] = useState('system');
+    const [resolvedTheme, setResolvedTheme] = useState('light');
+    useEffect(() => {
+        const saved = window.localStorage.getItem('meda:theme');
+        if (saved === 'light' || saved === 'dark' || saved === 'system') {
+            setThemeState(saved);
+        }
+    }, []);
+    useEffect(() => {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const apply = () => {
+            const resolved = theme === 'system' ? (mq.matches ? 'dark' : 'light') : theme;
+            setResolvedTheme(resolved);
+            document.documentElement.classList.toggle('dark', resolved === 'dark');
+        };
+        apply();
+        mq.addEventListener('change', apply);
+        return () => mq.removeEventListener('change', apply);
+    }, [theme]);
+    const setTheme = (t) => {
+        setThemeState(t);
+        window.localStorage.setItem('meda:theme', t);
+    };
+    return (_jsx(ThemeCtx.Provider, { value: { theme, setTheme, resolvedTheme }, children: children }));
+}
+export function useTheme() {
+    const v = useContext(ThemeCtx);
+    if (!v)
+        throw new Error('useTheme must be used inside <MedaShellProvider>');
+    return v;
+}
+export function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+    const Icon = ICON[theme];
+    return (_jsx("button", { type: "button", "aria-label": LABEL[theme], onClick: () => setTheme(NEXT[theme]), children: _jsx(Icon, { "aria-hidden": "true" }) }));
+}

package/dist/shell/types.d.ts

@@ -1,64 +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 {
+export interface AppDefinition {
     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 WorkspaceDefinition {
+    id: string;
+    name: string;
+    icon: ReactNode;
 }
-export interface ShellModuleDefinition {
+export interface ContextModule {
     id: string;
     label: string;
-    description: string;
-    items: ShellNavItem[];
-    headerTabs?: ShellTab[];
+    description?: string;
+    items: ContextItem[];
 }
-export interface ShellPanelDefinition {
+export interface ContextItem {
     id: string;
     label: string;
     icon: LucideIcon;
-    global?: boolean;
-    hidden?: boolean;
+    to: string;
+    description?: string;
+    shortcut?: string;
 }
-export interface ShellCommandDefinition {
+export interface PanelView {
     id: string;
     label: string;
-    to: string;
     icon: LucideIcon;
-    group: string;
-    shortcut?: string;
+    render: (ctx: ShellRenderContext) => ReactNode;
+}
+export type PanelMode = 'closed' | 'panel' | 'expanded' | 'fullscreen';
+export type ShellMainLayout = 'workspace' | 'centered' | 'fullbleed';
+export type ShellViewport = 'mobile' | 'tablet' | 'desktop' | 'wide' | 'ultrawide';
+export interface MobileBottomNavItem {
+    id: string;
+    label: string | (() => string);
+    icon: LucideIcon;
+    opens: 'menu-drawer' | 'module-drawer' | 'panels-drawer' | 'ai-drawer' | ((close: () => void) => ReactNode);
 }
 export interface ShellRenderContext {
-    sectionKey: string;
-    viewId: string;
-    selectedProductId: string | null;
+    workspaceId: string;
+    appId: string;
 }
-export type ShellPanelRenderer = (context: ShellRenderContext) => ReactNode;
-export interface ShellRouteContext {
-    pathname: string;
-    params: Record<string, string | undefined>;
+export interface ShellLinkRenderArgs {
+    item: ContextItem;
+    isActive: boolean;
+    className: string;
+    children: ReactNode;
 }
-export interface ShellHostAdapter {
-    route: ShellRouteContext;
-    navigate: (to: string) => void;
+export interface CommandDefinition {
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    group: string;
+    shortcut?: string;
+    run: () => void | Promise<void>;
 }
-export interface ShellViewDefinition {
-    shellContentLayout?: ShellContentLayout;
-    shellTabs?: ShellTab[] | ((context: ShellRouteContext) => ShellTab[]);
-    shellActions?: ReactNode | ((context: ShellRouteContext) => ReactNode);
-    shellPanelViews?: string[];
+export interface ThemeAdapter {
+    theme: 'light' | 'dark' | 'system';
+    setTheme: (t: 'light' | 'dark' | 'system') => void;
+    resolvedTheme: 'light' | 'dark';
 }

package/dist/shell/types.js

@@ -1 +1,2 @@
+'use client';
 export {};

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

@@ -0,0 +1,2 @@
+import type { ShellViewport } from './types.js';
+export declare function useShellViewport(): ShellViewport;

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

@@ -0,0 +1,40 @@
+'use client';
+import { useEffect, useState } from 'react';
+const BREAKPOINTS = {
+    mobile: '(max-width: 767px)',
+    tablet: '(min-width: 768px) and (max-width: 1023px)',
+    desktop: '(min-width: 1024px) and (max-width: 1279px)',
+    wide: '(min-width: 1280px) and (max-width: 1535px)',
+    ultrawide: '(min-width: 1536px)',
+};
+function detectViewport() {
+    if (typeof window === 'undefined')
+        return 'desktop';
+    for (const [band, query] of Object.entries(BREAKPOINTS)) {
+        if (window.matchMedia(query).matches)
+            return band;
+    }
+    return 'desktop';
+}
+export function useShellViewport() {
+    // Initial state is always 'desktop' so server-rendered output matches the
+    // client's first paint — actual band resolves in the post-mount effect.
+    const [viewport, setViewport] = useState('desktop');
+    useEffect(() => {
+        setViewport(detectViewport());
+        const cleanups = Object.entries(BREAKPOINTS).map(([band, query]) => {
+            const mql = window.matchMedia(query);
+            const onChange = () => {
+                if (mql.matches)
+                    setViewport(band);
+            };
+            mql.addEventListener('change', onChange);
+            return () => mql.removeEventListener('change', onChange);
+        });
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    }, []);
+    return viewport;
+}

package/dist/shell/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ShellCommandDefinition, ShellModuleDefinition, ShellPanelDefinition } from './types.js';
+import type { ShellCommandDefinition, ShellModuleDefinition, ShellPanelDefinition } from './extras/types.js';
 export interface ShellPanelCollection {
     globalViews: ShellPanelDefinition[];
     moduleViews: ShellPanelDefinition[];

package/dist/styles/globals.css

@@ -0,0 +1,26 @@
+: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));
+}
+
+/* VoiceOrb (WebGL): minimal container styles — visual identity lives in the GLSL shader. */
+.meda-voice-orb {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  isolation: isolate;
+  overflow: hidden;
+  border-radius: 9999px;
+  cursor: pointer;
+  position: relative;
+}
+.meda-voice-orb[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.meda-voice-orb canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}

package/dist/styles/theme.css

@@ -0,0 +1,147 @@
+@import "./tokens.css";
+
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+@theme inline {
+  /* Color primitives — exposed as Tailwind color scales */
+
+  /* Brand (purple) — 11 stops */
+  --color-brand-50: var(--color-brand-50);
+  --color-brand-100: var(--color-brand-100);
+  --color-brand-200: var(--color-brand-200);
+  --color-brand-300: var(--color-brand-300);
+  --color-brand-400: var(--color-brand-400);
+  --color-brand-500: var(--color-brand-500);
+  --color-brand-600: var(--color-brand-600);
+  --color-brand-700: var(--color-brand-700);
+  --color-brand-800: var(--color-brand-800);
+  --color-brand-900: var(--color-brand-900);
+  --color-brand-950: var(--color-brand-950);
+
+  /* Neutral (zinc-aligned) — 11 stops */
+  --color-neutral-50: var(--color-neutral-50);
+  --color-neutral-100: var(--color-neutral-100);
+  --color-neutral-200: var(--color-neutral-200);
+  --color-neutral-300: var(--color-neutral-300);
+  --color-neutral-400: var(--color-neutral-400);
+  --color-neutral-500: var(--color-neutral-500);
+  --color-neutral-600: var(--color-neutral-600);
+  --color-neutral-700: var(--color-neutral-700);
+  --color-neutral-800: var(--color-neutral-800);
+  --color-neutral-900: var(--color-neutral-900);
+  --color-neutral-950: var(--color-neutral-950);
+
+  /* Error (rose) — 10 stops */
+  --color-error-50: var(--color-error-50);
+  --color-error-100: var(--color-error-100);
+  --color-error-200: var(--color-error-200);
+  --color-error-300: var(--color-error-300);
+  --color-error-400: var(--color-error-400);
+  --color-error-500: var(--color-error-500);
+  --color-error-600: var(--color-error-600);
+  --color-error-700: var(--color-error-700);
+  --color-error-800: var(--color-error-800);
+  --color-error-900: var(--color-error-900);
+
+  /* Info (blue) — 10 stops */
+  --color-info-50: var(--color-info-50);
+  --color-info-100: var(--color-info-100);
+  --color-info-200: var(--color-info-200);
+  --color-info-300: var(--color-info-300);
+  --color-info-400: var(--color-info-400);
+  --color-info-500: var(--color-info-500);
+  --color-info-600: var(--color-info-600);
+  --color-info-700: var(--color-info-700);
+  --color-info-800: var(--color-info-800);
+  --color-info-900: var(--color-info-900);
+
+  /* Success (teal) — 10 stops */
+  --color-success-50: var(--color-success-50);
+  --color-success-100: var(--color-success-100);
+  --color-success-200: var(--color-success-200);
+  --color-success-300: var(--color-success-300);
+  --color-success-400: var(--color-success-400);
+  --color-success-500: var(--color-success-500);
+  --color-success-600: var(--color-success-600);
+  --color-success-700: var(--color-success-700);
+  --color-success-800: var(--color-success-800);
+  --color-success-900: var(--color-success-900);
+
+  /* Warning (amber) — 10 stops */
+  --color-warning-50: var(--color-warning-50);
+  --color-warning-100: var(--color-warning-100);
+  --color-warning-200: var(--color-warning-200);
+  --color-warning-300: var(--color-warning-300);
+  --color-warning-400: var(--color-warning-400);
+  --color-warning-500: var(--color-warning-500);
+  --color-warning-600: var(--color-warning-600);
+  --color-warning-700: var(--color-warning-700);
+  --color-warning-800: var(--color-warning-800);
+  --color-warning-900: var(--color-warning-900);
+
+  /* shadcn semantic colors (mode-flipped at runtime via :root / .dark) */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Status semantic */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-danger: var(--danger);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Chart */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Shell semantic colors */
+  --color-shell-header: var(--shell-header);
+  --color-shell-rail: var(--shell-rail);
+  --color-shell-context: var(--shell-context);
+  --color-shell-main: var(--shell-main);
+  --color-shell-panel: var(--shell-panel);
+  --color-shell-border: var(--shell-border);
+
+  /* Shell sizing → spacing scale */
+  --spacing-shell-header: var(--shell-header-height);
+  --spacing-shell-rail: var(--shell-rail-width);
+  --spacing-shell-context: var(--shell-context-default);
+  --spacing-shell-panel: var(--shell-panel-default);
+  --spacing-shell-bottom-nav: var(--shell-bottom-nav-height);
+
+  /* Font families — Geist + Geist Mono only (no Inter) */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+}