@medalsocial/meda 1.3.0 → 1.4.0

package/README.md

@@ -1,16 +1,16 @@
 # @medalsocial/meda
 
-Shared UI shell and runtime primitives — the navigation chrome, panels, tab bars, command palette, and workbench layout that power Medal's apps. Published as Apache-2.0.
+Shared UI shell and runtime primitives — the navigation chrome, panels, auth controls, recipes, theme bridges, command palette, and workbench layout that power Medal's apps. Published as Apache-2.0.
 
 ![npm](https://img.shields.io/npm/v/@medalsocial/meda)
 
 ## Install
 
 ```bash
-pnpm add @medalsocial/meda
+pnpm add @medalsocial/meda lucide-react
 ```
 
-Peer deps: `react >= 19`, `react-dom >= 19`.
+Peer deps: `react >= 19`, `react-dom >= 19`, and `lucide-react`.
 
 ## Tailwind CSS v4 setup
 
@@ -22,36 +22,81 @@ Meda ships a `styles.css` with its design tokens. Import it once in your entry s
 
 ## Usage
 
-`ShellStateProvider` stores panel/selection state in URL search params and is router-agnostic. You provide a `ShellSearchParamsAdapter` so it can read and update them however your router prefers. A minimal, in-memory adapter:
+Use `AppShell` for the styled shell surface:
 
 ```tsx
-import { useState } from 'react';
-import { ShellStateProvider, ShellFrame } from '@medalsocial/meda';
+import { AppShell, MedaShellProvider } from '@medalsocial/meda/shell';
+import { Inbox } from 'lucide-react';
 
 export function App() {
-  const [searchParams, setSearchParams] = useState(() => new URLSearchParams());
+  const workspace = { id: 'workspace', name: 'Workspace' };
+  const apps = [{ id: 'inbox', label: 'Inbox', icon: Inbox }];
 
   return (
-    <ShellStateProvider
-      adapter={{
-        searchParams,
-        setSearchParams: (updater) => setSearchParams((current) => updater(current)),
-      }}
-    >
-      <ShellFrame>{/* your app */}</ShellFrame>
-    </ShellStateProvider>
+    <MedaShellProvider workspace={workspace} apps={apps}>
+      <AppShell
+        variant="workspace"
+        iconRail={{
+          mainItems: [{ id: 'inbox', label: 'Inbox', icon: Inbox, to: '/inbox' }],
+        }}
+      >
+        {/* your app */}
+      </AppShell>
+    </MedaShellProvider>
   );
 }
 ```
 
-For a real app, wire the adapter to your router (e.g. TanStack Router's `useSearch`/`useNavigate`, React Router's `useSearchParams`) so URL changes persist state.
+For framework routing, pass a render callback and forward Meda props:
+
+```tsx
+import Link from 'next/link';
+
+<AppShell
+  variant="workspace"
+  iconRail={{
+    mainItems,
+    renderLink: ({ item, linkProps }) => <Link {...linkProps} href={item.to} prefetch />,
+  }}
+>
+  {children}
+</AppShell>;
+```
+
+For app-scoped brand tokens:
+
+```ts
+import { createMedaThemeCss, defineMedaTheme } from '@medalsocial/meda/theme';
+
+const css = createMedaThemeCss(
+  defineMedaTheme({
+    appId: 'auto',
+    colors: {
+      primary: 'var(--hb-brand-500)',
+      background: 'var(--hb-base-50)',
+    },
+    dark: {
+      colors: {
+        background: 'var(--hb-base-900)',
+      },
+    },
+  })
+);
+```
+
+Lower-level `ShellStateProvider` and layout parts remain available from `@medalsocial/meda/shell/primitives` for apps that need to own more composition.
 
 See the [demo app](./demo) for a live playground.
 
 ## Exports
 
 - `@medalsocial/meda` — curated public API (components + helpers)
-- `@medalsocial/meda/shell` — shell-only subpath
+- `@medalsocial/meda/shell` — styled shell components and hooks
+- `@medalsocial/meda/shell/primitives` — lower-level shell state and layout primitives
+- `@medalsocial/meda/auth` — provider-neutral auth controls
+- `@medalsocial/meda/auth/better-auth` — optional better-auth adapter
+- `@medalsocial/meda/recipes/next` — copyable Next.js adoption recipe metadata
+- `@medalsocial/meda/theme` — app-scoped token bridge helpers
 - `@medalsocial/meda/marketing` — marketing sections and campaign blocks
 - `@medalsocial/meda/styles.css` — design tokens + base styles
 
@@ -64,6 +109,7 @@ Prefer to copy source into your project instead of installing? The shadcn-compat
 npx shadcn add https://meda.medalsocial.com/r/meda-shell.json
 npx shadcn add https://meda.medalsocial.com/r/meda-shell-state.json
 npx shadcn add https://meda.medalsocial.com/r/meda-workbench-layout.json
+npx shadcn add https://meda.medalsocial.com/r/meda-next-app-shell.json
 ```
 
 The registry index is at `https://meda.medalsocial.com/registry.json`. Source JSON files live under [`./registry`](./registry) in this repo and are deployed as static assets via Cloudflare Workers — see `wrangler.toml` and `.github/workflows/deploy-worker.yml`.

package/dist/auth/auth-message.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AuthMessageProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export declare function AuthError({ children, className, ...props }: AuthMessageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AuthNotice({ children, className, ...props }: AuthMessageProps): import("react/jsx-runtime").JSX.Element | null;
+export interface AuthOneTapSlotProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export declare function AuthOneTapSlot({ children, className, ...props }: AuthOneTapSlotProps): import("react/jsx-runtime").JSX.Element;

package/dist/auth/auth-message.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function AuthError({ children, className, ...props }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { role: "alert", className: cn('rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive', className), ...props, children: children }));
+}
+export function AuthNotice({ children, className, ...props }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('rounded-md border border-border bg-muted/60 px-3 py-2 text-sm text-muted-foreground', className), ...props, children: children }));
+}
+export function AuthOneTapSlot({ children, className, ...props }) {
+    return (_jsx("div", { "data-meda-auth-one-tap-slot": "", className: cn('contents', className), ...props, children: children }));
+}

package/dist/auth/auth-provider-button.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { type RenderElement } from '../lib/render-element.js';
+export type AuthProvider = 'google' | (string & {});
+export interface AuthProviderButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    provider?: AuthProvider;
+    label: ReactNode;
+    icon?: ReactNode;
+    loading?: boolean;
+    loadingLabel?: ReactNode;
+    lastUsed?: boolean;
+    lastUsedLabel?: ReactNode;
+    render?: RenderElement<ButtonHTMLAttributes<HTMLButtonElement>>;
+}
+export declare function AuthProviderButton({ provider, label, icon, loading, loadingLabel, lastUsed, lastUsedLabel, render, disabled, className, type, ...props }: AuthProviderButtonProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/auth/auth-provider-button.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderElement } from '../lib/render-element.js';
+import { cn } from '../lib/utils.js';
+export function AuthProviderButton({ provider, label, icon, loading = false, loadingLabel = 'Loading...', lastUsed = false, lastUsedLabel = 'Last used', render, disabled, className, type = 'button', ...props }) {
+    const resolvedIcon = icon ?? (provider === 'google' ? _jsx(GoogleIcon, {}) : null);
+    const isDisabled = disabled || loading;
+    const children = (_jsxs(_Fragment, { children: [resolvedIcon && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: resolvedIcon })), _jsx("span", { className: "min-w-0 truncate", children: loading ? loadingLabel : label }), lastUsed && !loading && (_jsx("span", { "aria-hidden": "true", className: "ml-auto shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground", children: lastUsedLabel }))] }));
+    const buttonProps = {
+        type,
+        disabled: isDisabled,
+        'aria-busy': loading || undefined,
+        'data-provider': provider,
+        'data-last-used': lastUsed || undefined,
+        className: cn('relative inline-flex min-h-11 w-full items-center justify-center gap-3 rounded-md border border-border bg-background px-4 py-2.5 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60', className),
+        ...props,
+        children,
+    };
+    if (render) {
+        return renderElement(render, buttonProps);
+    }
+    return _jsx("button", { ...buttonProps });
+}
+function GoogleIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", className: "size-5", "aria-hidden": "true", children: [_jsx("path", { fill: "#4285F4", d: "M21.6 12.23c0-.82-.07-1.42-.22-2.05H12v3.72h5.51c-.11.92-.71 2.31-2.04 3.24l-.02.12 2.96 2.29.2.02c1.86-1.72 2.99-4.25 2.99-7.34z" }), _jsx("path", { fill: "#34A853", d: "M12 22c2.66 0 4.89-.88 6.52-2.39l-3.11-2.42c-.83.58-1.95.99-3.41.99a5.93 5.93 0 0 1-5.6-4.1l-.12.01-3.08 2.39-.04.11A9.85 9.85 0 0 0 12 22z" }), _jsx("path", { fill: "#FBBC05", d: "M6.4 14.08A6.17 6.17 0 0 1 6.07 12c0-.72.12-1.42.32-2.08l-.01-.13-3.12-2.42-.1.05A9.93 9.93 0 0 0 2.1 12c0 1.64.39 3.19 1.07 4.57l3.23-2.49z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.82c1.85 0 3.1.8 3.81 1.47l2.78-2.72C16.88 2.98 14.66 2 12 2a9.85 9.85 0 0 0-8.84 5.42l3.22 2.5A5.96 5.96 0 0 1 12 5.82z" })] }));
+}

package/dist/auth/auth-provider-list.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface AuthProviderListProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    label?: string;
+}
+export declare function AuthProviderList({ children, className, label, ...props }: AuthProviderListProps): import("react/jsx-runtime").JSX.Element;

package/dist/auth/auth-provider-list.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { cn } from '../lib/utils.js';
+export function AuthProviderList({ children, className, label = 'Authentication providers', ...props }) {
+    return (_jsx("ul", { "aria-label": label, className: cn('flex w-full flex-col gap-3', className), ...props, children: Children.toArray(children).map((child, index) => (_jsx("li", { className: "contents", children: child }, isValidElement(child) && child.key != null ? child.key : index))) }));
+}

package/dist/auth/better-auth.d.ts

@@ -0,0 +1,40 @@
+import { type AuthProviderButtonProps } from './auth-provider-button.js';
+export interface BetterAuthSocialArgs {
+    provider: string;
+    callbackURL?: string;
+    errorCallbackURL?: string;
+}
+export interface BetterAuthOneTapArgs {
+    callbackURL?: string;
+}
+export interface BetterAuthClientLike {
+    signIn?: {
+        social?: (args: BetterAuthSocialArgs) => Promise<unknown> | unknown;
+    };
+    oneTap?: (args: BetterAuthOneTapArgs) => Promise<unknown> | unknown;
+    getLastUsedLoginMethod?: () => Promise<string | null | undefined> | string | null | undefined;
+}
+export interface BetterAuthProviderButtonProps extends Omit<AuthProviderButtonProps, 'onClick' | 'provider'> {
+    authClient: BetterAuthClientLike;
+    provider?: string;
+    callbackURL?: string;
+    errorCallbackURL?: string;
+    onPendingChange?: (pending: boolean) => void;
+    onError?: (error: unknown) => void;
+    onSuccess?: (result: unknown) => void;
+}
+export declare function BetterAuthProviderButton({ authClient, provider, callbackURL, errorCallbackURL, onPendingChange, onError, onSuccess, loading, ...props }: BetterAuthProviderButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function useBetterAuthLastLoginMethod(authClient: BetterAuthClientLike): string | null;
+export interface BetterAuthOneTapProps {
+    authClient: BetterAuthClientLike;
+    enabled?: boolean;
+    callbackURL?: string;
+    onError?: (error: unknown) => void;
+    onSuccess?: (result: unknown) => void;
+}
+export declare function BetterAuthOneTap({ authClient, enabled, callbackURL, onError, onSuccess, }: BetterAuthOneTapProps): null;
+export declare function createBetterAuthAdapter(authClient: BetterAuthClientLike): {
+    BetterAuthProviderButton: (props: Omit<BetterAuthProviderButtonProps, "authClient">) => import("react/jsx-runtime").JSX.Element;
+    BetterAuthOneTap: (props: Omit<BetterAuthOneTapProps, "authClient">) => import("react/jsx-runtime").JSX.Element;
+    useBetterAuthLastLoginMethod: () => string | null;
+};

package/dist/auth/better-auth.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AuthProviderButton } from './auth-provider-button.js';
+export function BetterAuthProviderButton({ authClient, provider = 'google', callbackURL, errorCallbackURL, onPendingChange, onError, onSuccess, loading, ...props }) {
+    const [internalPending, setInternalPending] = useState(false);
+    const pending = Boolean(loading || internalPending);
+    return (_jsx(AuthProviderButton, { ...props, provider: provider, loading: pending, onClick: async () => {
+            const social = authClient.signIn?.social;
+            if (!social) {
+                onError?.(new Error('better-auth social sign-in is unavailable.'));
+                return;
+            }
+            setInternalPending(true);
+            onPendingChange?.(true);
+            try {
+                const result = await social({ provider, callbackURL, errorCallbackURL });
+                onSuccess?.(result);
+            }
+            catch (error) {
+                onError?.(error);
+            }
+            finally {
+                setInternalPending(false);
+                onPendingChange?.(false);
+            }
+        } }));
+}
+export function useBetterAuthLastLoginMethod(authClient) {
+    const [method, setMethod] = useState(null);
+    useEffect(() => {
+        let active = true;
+        async function loadLastMethod() {
+            try {
+                const getter = authClient.getLastUsedLoginMethod;
+                const nextMethod = getter ? await getter() : null;
+                if (active) {
+                    setMethod(nextMethod ?? null);
+                }
+            }
+            catch {
+                if (active) {
+                    setMethod(null);
+                }
+            }
+        }
+        void loadLastMethod();
+        return () => {
+            active = false;
+        };
+    }, [authClient]);
+    return method;
+}
+export function BetterAuthOneTap({ authClient, enabled = true, callbackURL, onError, onSuccess, }) {
+    const onErrorRef = useRef(onError);
+    const onSuccessRef = useRef(onSuccess);
+    useEffect(() => {
+        onErrorRef.current = onError;
+        onSuccessRef.current = onSuccess;
+    }, [onError, onSuccess]);
+    useEffect(() => {
+        if (!enabled || !authClient.oneTap) {
+            return;
+        }
+        let active = true;
+        async function mountOneTap() {
+            try {
+                const result = await authClient.oneTap?.({ callbackURL });
+                if (active) {
+                    onSuccessRef.current?.(result);
+                }
+            }
+            catch (error) {
+                if (active) {
+                    onErrorRef.current?.(error);
+                }
+            }
+        }
+        void mountOneTap();
+        return () => {
+            active = false;
+        };
+    }, [authClient, callbackURL, enabled]);
+    return null;
+}
+export function createBetterAuthAdapter(authClient) {
+    return {
+        BetterAuthProviderButton: (props) => (_jsx(BetterAuthProviderButton, { authClient: authClient, ...props })),
+        BetterAuthOneTap: (props) => (_jsx(BetterAuthOneTap, { authClient: authClient, ...props })),
+        useBetterAuthLastLoginMethod: () => useBetterAuthLastLoginMethod(authClient),
+    };
+}

package/dist/auth/index.d.ts

@@ -0,0 +1,6 @@
+export type { AuthMessageProps, AuthOneTapSlotProps } from './auth-message.js';
+export { AuthError, AuthNotice, AuthOneTapSlot } from './auth-message.js';
+export type { AuthProvider, AuthProviderButtonProps } from './auth-provider-button.js';
+export { AuthProviderButton } from './auth-provider-button.js';
+export type { AuthProviderListProps } from './auth-provider-list.js';
+export { AuthProviderList } from './auth-provider-list.js';

package/dist/auth/index.js

@@ -0,0 +1,3 @@
+export { AuthError, AuthNotice, AuthOneTapSlot } from './auth-message.js';
+export { AuthProviderButton } from './auth-provider-button.js';
+export { AuthProviderList } from './auth-provider-list.js';

package/dist/auth/public.d.ts

@@ -0,0 +1,6 @@
+export type { AuthMessageProps, AuthOneTapSlotProps } from './auth-message.js';
+export { AuthError, AuthNotice, AuthOneTapSlot } from './auth-message.js';
+export type { AuthProvider, AuthProviderButtonProps } from './auth-provider-button.js';
+export { AuthProviderButton } from './auth-provider-button.js';
+export type { AuthProviderListProps } from './auth-provider-list.js';
+export { AuthProviderList } from './auth-provider-list.js';

package/dist/auth/public.js

@@ -0,0 +1,3 @@
+export { AuthError, AuthNotice, AuthOneTapSlot } from './auth-message.js';
+export { AuthProviderButton } from './auth-provider-button.js';
+export { AuthProviderList } from './auth-provider-list.js';

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+export * from './auth/public.js';
 export * from './brand/public.js';
 export * from './chat/public.js';
 export * from './marketing/public.js';
 export * from './panel/public.js';
 export * from './shell/index.js';
+export * from './theme/index.js';
 export * from './timeline/public.js';

package/dist/index.js

@@ -1,6 +1,8 @@
+export * from './auth/public.js';
 export * from './brand/public.js';
 export * from './chat/public.js';
 export * from './marketing/public.js';
 export * from './panel/public.js';
 export * from './shell/index.js'; // v2 surface
+export * from './theme/index.js';
 export * from './timeline/public.js';

package/dist/lib/render-element.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type RenderElement<TProps extends {
+    className?: string;
+    children?: ReactNode;
+}> = ReactElement<Partial<TProps>>;
+export declare function renderElement<TProps extends {
+    className?: string;
+    children?: ReactNode;
+}>(render: RenderElement<TProps>, props: TProps): ReactNode;

package/dist/lib/render-element.js

@@ -0,0 +1,27 @@
+import { cloneElement, isValidElement, } from 'react';
+import { cn } from './utils.js';
+function composeEventHandlers(consumerHandler, medaHandler) {
+    if (!consumerHandler)
+        return medaHandler;
+    if (!medaHandler)
+        return consumerHandler;
+    return (event) => {
+        consumerHandler(event);
+        if (!event.defaultPrevented) {
+            medaHandler(event);
+        }
+    };
+}
+export function renderElement(render, props) {
+    if (!isValidElement(render))
+        return null;
+    const renderProps = render.props;
+    const medaProps = props;
+    return cloneElement(render, {
+        ...renderProps,
+        ...medaProps,
+        className: cn(renderProps.className, medaProps.className),
+        onClick: composeEventHandlers(renderProps.onClick, medaProps.onClick),
+        onKeyDown: composeEventHandlers(renderProps.onKeyDown, medaProps.onKeyDown),
+    });
+}

package/dist/recipes/next.d.ts

@@ -0,0 +1,49 @@
+export interface MedaRecipeFile {
+    path: string;
+    target: string;
+    type: 'registry:block' | 'registry:component' | 'registry:hook' | 'registry:lib';
+    content: string;
+}
+export interface MedaRecipe {
+    name: string;
+    title: string;
+    description: string;
+    dependencies: string[];
+    peerDependencies: string[];
+    cssVars: string[];
+    files: MedaRecipeFile[];
+    accessibility: string[];
+    composition: string[];
+}
+export declare const nextAppShellRecipe: {
+    name: string;
+    title: string;
+    description: string;
+    dependencies: string[];
+    peerDependencies: string[];
+    cssVars: string[];
+    files: {
+        path: string;
+        target: string;
+        type: "registry:block";
+        content: string;
+    }[];
+    accessibility: string[];
+    composition: string[];
+};
+export declare const nextRecipes: {
+    name: string;
+    title: string;
+    description: string;
+    dependencies: string[];
+    peerDependencies: string[];
+    cssVars: string[];
+    files: {
+        path: string;
+        target: string;
+        type: "registry:block";
+        content: string;
+    }[];
+    accessibility: string[];
+    composition: string[];
+}[];

package/dist/recipes/next.js

@@ -0,0 +1,128 @@
+export const nextAppShellRecipe = {
+    name: 'meda-next-app-shell',
+    title: 'Meda Next AppShell',
+    description: 'Copyable Next.js App Router shell adapter with next/link routing, route-owned panel views, and auth controls.',
+    dependencies: ['@medalsocial/meda', 'lucide-react'],
+    peerDependencies: ['next', 'react', 'react-dom'],
+    cssVars: ['@medalsocial/meda/styles.css'],
+    files: [
+        {
+            path: 'registry/meda/meda-next-app-shell/meda-next-app-shell.tsx',
+            target: 'components/meda/meda-next-app-shell.tsx',
+            type: 'registry:block',
+            content: `\
+'use client'
+
+import Link from 'next/link'
+import type { ComponentProps, ReactNode } from 'react'
+import {
+  AppShell,
+  AuthError,
+  AuthNotice,
+  AuthOneTapSlot,
+  AuthProviderButton,
+  AuthProviderList,
+  MedaShellProvider,
+  PanelViewsProvider,
+  type AppDefinition,
+  type IconRailItem,
+  type PanelView,
+  type WorkspaceDefinition,
+} from '@medalsocial/meda/shell'
+
+export function MedaNextWorkspaceShell({
+  workspace,
+  apps,
+  iconItems,
+  activeIconId,
+  panelViews = [],
+  defaultPanelView,
+  children,
+}: {
+  workspace: WorkspaceDefinition
+  apps: AppDefinition[]
+  iconItems: IconRailItem[]
+  activeIconId?: string
+  panelViews?: PanelView[]
+  defaultPanelView?: string
+  children: ReactNode
+}) {
+  return (
+    <MedaShellProvider workspace={workspace} apps={apps}>
+      <AppShell
+        variant="workspace"
+        iconRail={{
+          mainItems: iconItems,
+          activeId: activeIconId,
+          renderLink: ({ item, linkProps }) => (
+            <Link {...linkProps} href={item.to} prefetch />
+          ),
+        }}
+        rightPanel={{ panelViews, defaultView: defaultPanelView }}
+      >
+        <PanelViewsProvider views={panelViews} defaultView={defaultPanelView}>
+          {children}
+        </PanelViewsProvider>
+      </AppShell>
+    </MedaShellProvider>
+  )
+}
+
+export function MedaNextAuthShell({
+  brandName,
+  brandMark,
+  appName,
+  tagline,
+  preview,
+  error,
+  notice,
+  onGoogleSignIn,
+}: {
+  brandName: ReactNode
+  brandMark?: ReactNode
+  appName?: ReactNode
+  tagline?: ReactNode
+  preview?: ReactNode
+  error?: ReactNode
+  notice?: ReactNode
+  onGoogleSignIn: ComponentProps<typeof AuthProviderButton>['onClick']
+}) {
+  return (
+    <MedaShellProvider workspace={{ id: 'auth', name: 'Auth', icon: brandMark }} apps={[]}>
+      <AppShell
+        variant="auth"
+        branding={{ brandName, brandMark, appName, tagline }}
+        preview={preview}
+      >
+        <AuthProviderList>
+          <AuthProviderButton
+            provider="google"
+            label="Continue with Google"
+            onClick={onGoogleSignIn}
+          />
+        </AuthProviderList>
+        <AuthNotice>{notice}</AuthNotice>
+        <AuthError>{error}</AuthError>
+        <AuthOneTapSlot />
+      </AppShell>
+    </MedaShellProvider>
+  )
+}
+`,
+        },
+    ],
+    accessibility: [
+        'Every drawer and panel keeps its accessible name from AppShell and RightPanel.',
+        'Custom link renderers must forward all linkProps to preserve aria-current, labels, handlers, and className.',
+        'Auth provider buttons keep the visible provider affordance separate from the accessible button name.',
+        'Route-owned panel views should expose headings inside their rendered panel content.',
+        'Reduced-motion behavior remains delegated to Meda shell motion tokens.',
+    ],
+    composition: [
+        'MedaShellProvider owns workspace and app context for the copied shell adapter.',
+        'AppShell receives route-owned rightPanel views on first render to avoid delayed panel UI.',
+        'PanelViewsProvider wraps children with the same panelViews and defaultPanelView for nested route registrations.',
+        'renderLink composes Next Link by forwarding Meda linkProps before setting framework-specific props.',
+    ],
+};
+export const nextRecipes = [nextAppShellRecipe];

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

@@ -1,12 +1,15 @@
 import type { ReactNode } from 'react';
-import type { AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
+import type { AppShellAuthBranding, AppShellAuthConfig, AppShellContextRailConfig, AppShellIconRailConfig, AppShellRightPanelConfig } from './types.js';
 interface AppShellBaseProps {
     children: ReactNode;
     className?: string;
 }
 export type AppShellProps = AppShellBaseProps & ({
     variant: 'auth';
-    auth: AppShellAuthConfig;
+    auth?: AppShellAuthConfig;
+    branding?: AppShellAuthBranding;
+    preview?: ReactNode;
+    actions?: ReactNode;
 } | {
     variant: 'workspace';
     iconRail?: AppShellIconRailConfig;

package/dist/shell/app-shell.js

@@ -14,13 +14,25 @@ export function AppShell(props) {
     const wrapper = (content) => (_jsx("div", { "data-meda-app": activeAppId, "data-meda-workspace": workspace.id, "data-meda-variant": props.variant, className: cn(heightClass, 'bg-background text-foreground', props.className), children: content }));
     switch (props.variant) {
         case 'auth':
-            return wrapper(_jsx(AppShellAuth, { ...props.auth, children: props.children }));
+            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 }));
         case 'chat':
             return wrapper(_jsx(AppShellChat, { globalActions: props.globalActions, children: props.children }));
     }
 }
+function resolveAuthConfig(props) {
+    const { auth, branding } = props;
+    return {
+        title: auth?.title ?? branding?.appName ?? branding?.brandName ?? 'Sign in',
+        description: auth?.description ?? branding?.tagline,
+        brandName: auth?.brandName ?? branding?.brandName,
+        brandMark: auth?.brandMark ?? branding?.brandMark,
+        eyebrow: auth?.eyebrow,
+        preview: auth?.preview ?? props.preview,
+        actions: auth?.actions ?? props.actions,
+    };
+}
 export function AppShellBody({ children, className }) {
     return (_jsx("div", { className: cn('relative flex h-[calc(100vh-var(--shell-header-height))] overflow-hidden', className), children: children }));
 }

package/dist/shell/context-rail.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * once <AppShellBody> ships as a ResizableShell Group.
  */
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { useId, useRef, useState } from 'react';
+import { Fragment, useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { useMedaShell } from './shell-provider.js';
 import { useShellViewport } from './use-shell-viewport.js';
@@ -120,9 +120,15 @@ export function ContextRail({ appId, module, hidden = false, collapsible = true,
                                 : 'text-muted-foreground hover:bg-accent hover:text-foreground');
                             const IconComp = item.icon;
                             const inner = (_jsxs(_Fragment, { children: [_jsx(IconComp, { size: 16, "aria-hidden": "true", className: "shrink-0" }), _jsx("span", { className: "truncate", children: item.label }), item.shortcut && (_jsx("kbd", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: item.shortcut }))] }));
+                            const linkProps = {
+                                href: item.to,
+                                'aria-current': isActive ? 'page' : undefined,
+                                className: klass,
+                                children: inner,
+                            };
                             if (renderLink) {
-                                return renderLink({ item, isActive, className: klass, children: inner });
+                                return (_jsx(Fragment, { children: renderLink({ item, isActive, className: klass, children: inner, linkProps }) }, item.id));
                             }
-                            return (_jsx("a", { href: item.to, "aria-current": isActive ? 'page' : undefined, className: klass, children: inner }, item.id));
+                            return _jsx("a", { ...linkProps }, item.id);
                         }) })), module.render?.({ workspaceId: ctx.workspace.id, appId })] }), !collapsed && (_jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit }))] }));
 }

package/dist/shell/icon-rail.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 IconRailItem {
     id: string;
     label: string;
@@ -12,6 +12,7 @@ export interface IconRailRenderLinkArgs {
     isActive: boolean;
     className: string;
     children: ReactNode;
+    linkProps: AnchorHTMLAttributes<HTMLAnchorElement>;
 }
 export interface IconRailProps {
     mainItems: IconRailItem[];

package/dist/shell/icon-rail.js

@@ -29,9 +29,16 @@ export function IconRail({ mainItems, utilityItems = [], footer, activeId, rende
         const klass = itemClass(isActive);
         const IconComp = item.icon;
         const inner = (_jsxs(_Fragment, { children: [_jsx(IconComp, { size: 22, "aria-hidden": "true" }), item.badge ? _jsx("span", { className: "absolute right-1 top-1", children: item.badge }) : null] }));
+        const linkProps = {
+            href: item.to,
+            'aria-label': item.label,
+            'aria-current': isActive ? 'page' : undefined,
+            className: 'contents',
+            children: inner,
+        };
         const linkContent = renderLink ? (
         // renderLink consumers receive the className so they can apply it themselves
-        renderLink({ item, isActive, className: klass, children: inner })) : (_jsx("a", { href: item.to, "aria-label": item.label, "aria-current": isActive ? 'page' : undefined, className: "contents", children: inner }));
+        renderLink({ item, isActive, className: klass, children: inner, linkProps })) : (_jsx("a", { ...linkProps }));
         return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { "data-testid": `icon-rail-trigger-${item.id}`, className: klass, children: linkContent }) }), _jsx(TooltipContent, { side: "right", children: item.label })] }, item.id));
     };
     return (_jsx(TooltipProvider, { children: _jsxs("nav", { "data-testid": "icon-rail", "aria-label": "Primary", className: cn('flex h-full w-[var(--shell-rail-width)] shrink-0 flex-col items-center bg-shell-rail py-3.5', className), children: [_jsx("div", { className: "flex flex-col items-center gap-1", children: mainItems.map(renderItem) }), utilityItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(RailDivider, { pinnedBottom: pinnedBottom, onToggle: () => setPinnedBottom((prev) => !prev) }), _jsx("div", { "data-testid": "utility-items-wrapper", className: cn('flex flex-col items-center gap-1', pinnedBottom && 'mt-auto'), children: utilityItems.map(renderItem) })] })), footer && (_jsx("div", { className: cn('pt-3', pinnedBottom || utilityItems.length === 0 ? 'mt-auto' : ''), children: footer }))] }) }));

package/dist/shell/index.d.ts

@@ -1,3 +1,5 @@
+export type { AuthMessageProps, AuthOneTapSlotProps, AuthProvider, AuthProviderButtonProps, AuthProviderListProps, } from '../auth/index.js';
+export { AuthError, AuthNotice, AuthOneTapSlot, AuthProviderButton, AuthProviderList, } from '../auth/index.js';
 export { AppShell, AppShellBody } from './app-shell.js';
 export type { CommandGroupDefinition } from './command-palette.js';
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
@@ -5,6 +7,7 @@ export { ContextRail } from './context-rail.js';
 export type { DragModeBannerProps } from './drag-mode-banner.js';
 export { DragModeBanner } from './drag-mode-banner.js';
 export * as Extras from './extras/index.js';
+export type { IconRailItem, IconRailProps, IconRailRenderLinkArgs } from './icon-rail.js';
 export { IconRail, RailDivider } from './icon-rail.js';
 export type { ShellStorageAdapter } from './layout-state.js';
 export { createLocalStorageAdapter } from './layout-state.js';
@@ -23,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, 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, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellMainLayout, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
 export { useShellViewport } from './use-shell-viewport.js';

package/dist/shell/index.js

@@ -3,6 +3,7 @@
 // the directive (see test/nextjs-consumer.test.ts). Each underlying component
 // file carries its own 'use client' — Next traces through the barrel and
 // applies them per-component. The barrel itself is just a re-exporter.
+export { AuthError, AuthNotice, AuthOneTapSlot, AuthProviderButton, AuthProviderList, } from '../auth/index.js';
 // Layout
 export { AppShell, AppShellBody } from './app-shell.js';
 // Command palette
@@ -12,7 +13,6 @@ export { ContextRail } from './context-rail.js';
 export { DragModeBanner } from './drag-mode-banner.js';
 // Extras (legacy components ported during Phase 15 — opt-in for apps that need them)
 export * as Extras from './extras/index.js';
-// Rails + main + panel
 export { IconRail, RailDivider } from './icon-rail.js';
 // Storage adapter (consumers may want to provide their own)
 export { createLocalStorageAdapter } from './layout-state.js';

package/dist/shell/internal/mobile-drawers.js

@@ -34,15 +34,22 @@ const menuItemClassName = 'flex items-center gap-2 rounded-md px-3 py-2 text-sm
 function MenuDrawerItem({ item, isActive, onClose, renderLink, }) {
     const Icon = item.icon;
     const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 18, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }));
+    const className = cn(menuItemClassName, isActive && 'bg-accent text-foreground');
+    const linkProps = {
+        href: item.to,
+        className,
+        children,
+    };
     if (renderLink) {
         return closeAfterLinkClick(renderLink({
             item,
             isActive,
-            className: cn(menuItemClassName, isActive && 'bg-accent text-foreground'),
+            className,
             children,
+            linkProps,
         }), onClose);
     }
-    return (_jsx("a", { href: item.to, onClick: onClose, className: menuItemClassName, children: children }));
+    return closeAfterLinkClick(_jsx("a", { ...linkProps }), onClose);
 }
 function closeAfterLinkClick(link, onClose) {
     if (!isValidElement(link)) {

package/dist/shell/primitives.d.ts

@@ -0,0 +1,9 @@
+export type { ShellStorageAdapter } from './layout-state.js';
+export { createLocalStorageAdapter } from './layout-state.js';
+export type { PanelViewsProviderProps } from './panel-views-provider.js';
+export { PanelViewsProvider } from './panel-views-provider.js';
+export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
+export type { MedaShellProviderProps } from './shell-provider.js';
+export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+export type { AppDefinition, CommandDefinition, ContextItem, ContextModule, MobileBottomNavItem, PanelMode, PanelView, ShellLinkRenderArgs, ShellRenderContext, ShellViewport, ThemeAdapter, WorkspaceDefinition, } from './types.js';
+export { useShellViewport } from './use-shell-viewport.js';

package/dist/shell/primitives.js

@@ -0,0 +1,7 @@
+// State and layout primitives for consumers that want Meda shell behavior
+// without importing the full styled shell barrel.
+export { createLocalStorageAdapter } from './layout-state.js';
+export { PanelViewsProvider } from './panel-views-provider.js';
+export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
+export { MedaShellProvider, useMedaShell, useShellSelection } from './shell-provider.js';
+export { useShellViewport } from './use-shell-viewport.js';

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

@@ -1,3 +1,4 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { PanelMode, PanelView } from './types.js';
 export interface RightPanelProps {
     /** Views to render as tabs in the panel header. */
@@ -10,6 +11,16 @@ export interface RightPanelProps {
      * If only ['panel'], the cycle button is hidden.
      */
     modes?: PanelMode[];
+    renderTab?: (args: RightPanelTabRenderArgs) => ReactNode;
     className?: string;
 }
-export declare function RightPanel({ panelViews, defaultView, modes, className, }: RightPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export interface RightPanelTabRenderArgs {
+    view: PanelView;
+    isActive: boolean;
+    buttonProps: RightPanelTabButtonProps;
+    children: ReactNode;
+}
+export type RightPanelTabButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    'data-active'?: boolean;
+};
+export declare function RightPanel({ panelViews, defaultView, modes, renderTab, className, }: RightPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/right-panel.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * RightPanel — spec §12
  *
@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * TODO(phase-15-refactor): swap to ResizableShell once AppShellBody is a PanelGroup
  */
 import { Maximize2, Minimize2, X } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
 import { useResolvedPanelViews } from './panel-views-provider.js';
 import { useMedaShell } from './shell-provider.js';
@@ -63,7 +63,7 @@ function ResizeHandle({ currentWidth, onResize, onCommit }) {
 // ---------------------------------------------------------------------------
 // RightPanel
 // ---------------------------------------------------------------------------
-export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes = ['panel', 'expanded', 'fullscreen'], className, }) {
+export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes = ['panel', 'expanded', 'fullscreen'], renderTab, className, }) {
     const band = useShellViewport();
     const ctx = useMedaShell();
     const { mode, activeView, width, setMode, setActiveView, setWidth } = ctx.panel;
@@ -132,8 +132,20 @@ export function RightPanel({ panelViews = EMPTY_PANEL_VIEWS, defaultView, modes
     return (_jsx("aside", { "data-meda-panel-mode": mode, "aria-hidden": mode === 'closed' ? 'true' : undefined, className: cn('relative h-full shrink-0 overflow-hidden border-l border-shell-border bg-shell-panel', 'transition-[width] ease-[var(--motion-ease)] duration-[var(--motion-panel)]', mode === 'fullscreen' && 'fixed inset-0 h-screen w-screen border-none', zIndexClass, className), style: widthStyle, children: mode !== 'closed' && (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-shell-border px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: resolvedPanelViews.map((view) => {
                                 const isActive = view.id === activeView;
                                 const Icon = view.icon;
-                                return (_jsxs("button", { type: "button", "aria-current": isActive ? 'true' : undefined, onClick: () => setActiveView(view.id), className: cn('inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors', isActive
+                                const children = (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: view.label })] }));
+                                const buttonProps = {
+                                    type: 'button',
+                                    'aria-current': isActive ? 'true' : undefined,
+                                    'data-active': isActive || undefined,
+                                    onClick: () => setActiveView(view.id),
+                                    className: cn('inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors', isActive
                                         ? 'bg-accent text-accent-foreground'
-                                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'), children: [_jsx(Icon, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: view.label })] }, view.id));
+                                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'),
+                                    children,
+                                };
+                                if (renderTab) {
+                                    return (_jsx(Fragment, { children: renderTab({ view, isActive, buttonProps, children }) }, view.id));
+                                }
+                                return _jsx("button", { ...buttonProps }, view.id);
                             }) }), _jsxs("div", { className: "flex items-center gap-1", children: [modes.length > 1 && (_jsx("button", { type: "button", "aria-label": cycleAriaLabel, onClick: cycleOpenMode, className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: mode === 'fullscreen' ? (_jsx(Minimize2, { size: 14, "aria-hidden": "true" })) : (_jsx(Maximize2, { size: 14, "aria-hidden": "true" })) })), _jsx("button", { type: "button", "aria-label": "Close panel", onClick: () => setMode('closed'), className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: activePanelView != null ? (activePanelView.render(renderCtx)) : (_jsx("div", { className: "p-4 text-muted-foreground text-sm", children: "No panel view selected" })) }), mode === 'panel' && (_jsx(ResizeHandle, { currentWidth: resolvedWidth, onResize: handleResize, onCommit: handleCommit }))] })) }));
 }

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;
@@ -49,6 +49,7 @@ export interface ShellLinkRenderArgs {
     isActive: boolean;
     className: string;
     children: ReactNode;
+    linkProps: AnchorHTMLAttributes<HTMLAnchorElement>;
 }
 export interface CommandDefinition {
     id: string;
@@ -101,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.3.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": [