@medalsocial/meda 0.3.0 → 1.1.0

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,99 @@
 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;
+    icon: LucideIcon;
 }
-export interface ShellNavItem {
-    to: string;
+export interface WorkspaceDefinition {
+    id: string;
+    name: string;
+    icon: ReactNode;
+}
+export interface ContextModule {
+    id: string;
     label: string;
     description?: string;
-    icon: LucideIcon;
-    shortcut?: string;
+    items: ContextItem[];
 }
-export interface ShellRailItem {
-    to: string;
+export interface ContextItem {
+    id: string;
     label: string;
     icon: LucideIcon;
+    to: string;
+    description?: string;
+    shortcut?: string;
 }
-export interface ShellModuleDefinition {
+export interface PanelView {
     id: string;
     label: string;
-    description: string;
-    items: ShellNavItem[];
-    headerTabs?: ShellTab[];
+    icon: LucideIcon;
+    render: (ctx: ShellRenderContext) => ReactNode;
 }
-export interface ShellPanelDefinition {
+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;
+    label: string | (() => string);
     icon: LucideIcon;
-    global?: boolean;
-    hidden?: boolean;
+    opens: 'menu-drawer' | 'module-drawer' | 'panels-drawer' | 'ai-drawer' | ((close: () => void) => ReactNode);
+}
+export interface ShellRenderContext {
+    workspaceId: string;
+    appId: string;
+}
+export interface ShellLinkRenderArgs {
+    item: ContextItem;
+    isActive: boolean;
+    className: string;
+    children: ReactNode;
 }
-export interface ShellCommandDefinition {
+export interface CommandDefinition {
     id: string;
     label: string;
-    to: string;
-    icon: LucideIcon;
+    icon?: LucideIcon;
     group: string;
     shortcut?: string;
+    run: () => void | Promise<void>;
 }
-export interface ShellRenderContext {
-    sectionKey: string;
-    viewId: string;
-    selectedProductId: string | null;
+export interface ThemeAdapter {
+    theme: 'light' | 'dark' | 'system';
+    setTheme: (t: 'light' | 'dark' | 'system') => void;
+    resolvedTheme: 'light' | 'dark';
+}
+/**
+ * AppShell renders one of three shell modes:
+ * - `auth` — split-screen marketing + form (signed-out)
+ * - `workspace` — header + rails + main + panel (signed-in work surface;
+ *   collapses to mobile header + bottom nav + drawers on mobile)
+ * - `chat` — transcript-dominant layout (conversational AI)
+ */
+export type AppShellVariant = 'auth' | 'workspace' | 'chat';
+/** IconRail configuration for `<AppShell variant="workspace">`. */
+export interface AppShellIconRailConfig {
+    mainItems: import('./icon-rail.js').IconRailItem[];
+    utilityItems?: import('./icon-rail.js').IconRailItem[];
+    footer?: ReactNode;
+    activeId?: string;
 }
-export type ShellPanelRenderer = (context: ShellRenderContext) => ReactNode;
-export interface ShellRouteContext {
-    pathname: string;
-    params: Record<string, string | undefined>;
+/** ContextRail configuration for `<AppShell variant="workspace">`. */
+export interface AppShellContextRailConfig {
+    appId: string;
+    module: ContextModule;
+    activeItemId?: string;
 }
-export interface ShellHostAdapter {
-    route: ShellRouteContext;
-    navigate: (to: string) => void;
+/** RightPanel configuration for `<AppShell variant="workspace">`. */
+export interface AppShellRightPanelConfig {
+    panelViews: PanelView[];
+    defaultView?: string;
 }
-export interface ShellViewDefinition {
-    shellContentLayout?: ShellContentLayout;
-    shellTabs?: ShellTab[] | ((context: ShellRouteContext) => ShellTab[]);
-    shellActions?: ReactNode | ((context: ShellRouteContext) => ReactNode);
-    shellPanelViews?: string[];
+export interface AppShellAuthConfig {
+    title: ReactNode;
+    description?: ReactNode;
+    brandName?: ReactNode;
+    brandMark?: ReactNode;
+    eyebrow?: ReactNode;
+    preview?: ReactNode;
+    actions?: ReactNode;
 }

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.css → styles/globals.css}

@@ -20,7 +20,7 @@
 }
 .meda-voice-orb canvas {
   display: block;
-  width: 100% !important;
-  height: 100% !important;
+  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);
+}