@medalsocial/meda 0.3.0 → 1.0.0

package/dist/marketing/types.d.ts

@@ -0,0 +1,67 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+export type MarketingCtaVariant = 'primary' | 'secondary';
+export type MarketingAlign = 'start' | 'center';
+export interface MarketingCta {
+    label: ReactNode;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    variant?: MarketingCtaVariant;
+    ariaLabel?: string;
+    target?: string;
+    rel?: string;
+}
+export interface MarketingCtaListProps {
+    ctas?: MarketingCta[];
+    align?: MarketingAlign;
+    className?: string;
+}
+export type MarketingCalloutVariant = 'band' | 'card';
+export interface MarketingCalloutProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    ctas?: MarketingCta[];
+    variant?: MarketingCalloutVariant;
+    align?: MarketingAlign;
+    className?: string;
+}
+export interface MarketingOffice {
+    title?: ReactNode;
+    address?: ReactNode;
+    email?: string;
+    phone?: string;
+    hours?: ReactNode;
+}
+export interface MarketingContactPerson {
+    title?: ReactNode;
+    name: ReactNode;
+    role?: ReactNode;
+    description?: ReactNode;
+    image?: ReactNode;
+    email?: string;
+    phone?: string;
+}
+export interface MarketingContactProps {
+    intro?: ReactNode;
+    form: ReactNode;
+    office?: MarketingOffice;
+    contactPerson?: MarketingContactPerson;
+    compact?: boolean;
+    className?: string;
+}
+export type MarketingLeadMagnetVariant = 'featured' | 'sidebar';
+export interface MarketingLeadMagnetProps {
+    title: ReactNode;
+    description?: ReactNode;
+    benefits?: ReactNode[];
+    image?: ReactNode;
+    buttonText?: ReactNode;
+    formTitle?: ReactNode;
+    form?: ReactNode;
+    variant?: MarketingLeadMagnetVariant;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}

package/dist/marketing/types.js

@@ -0,0 +1 @@
+export {};

package/dist/marketing/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+export declare function toTelHref(phone: string): string;

package/dist/marketing/utils.js

@@ -0,0 +1,6 @@
+export function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function toTelHref(phone) {
+    return `tel:${phone.replace(/[^\d+]/g, '')}`;
+}

package/dist/panel/inspector-json.js

@@ -57,12 +57,14 @@ function tokenize(value, level, key, indent, seen) {
     }
     return out;
 }
+// 700-shade variants for syntax tokens so 11px monospace text clears
+// WCAG AA (4.5:1) against the inspector's near-white background.
 const KIND_CLASS = {
     punct: 'text-muted-foreground',
     key: 'text-primary',
-    string: 'text-emerald-500',
-    number: 'text-amber-500',
-    literal: 'text-amber-500',
+    string: 'text-emerald-700',
+    number: 'text-amber-700',
+    literal: 'text-amber-700',
 };
 export function InspectorJSON({ data, indent = 2, className }) {
     const tokens = tokenize(data, 0, null, indent, new WeakSet());

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export declare function AppShell({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellBody({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shell/app-shell.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { useMedaShell } from './shell-provider.js';
+export function AppShell({ children, className }) {
+    const { workspace, activeAppId } = useMedaShell();
+    return (_jsx("div", { "data-meda-app": activeAppId, "data-meda-workspace": workspace.id, className: cn('h-screen overflow-hidden bg-background text-foreground', className), children: children }));
+}
+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/command-palette.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { CommandDefinition } from './types.js';
+export interface CommandGroupDefinition {
+    id: string;
+    label: string;
+    /** Lower value = rendered earlier. Default: 100. */
+    priority?: number;
+}
+interface CommandRegistry {
+    register: (commands: CommandDefinition[]) => void;
+    unregister: (ids: string[]) => void;
+    registerGroup: (group: CommandGroupDefinition) => void;
+    unregisterGroup: (id: string) => void;
+}
+export declare const CommandRegistryContext: import("react").Context<CommandRegistry | null>;
+export declare function matchesHotkey(e: KeyboardEvent, spec: string): boolean;
+export interface CommandPaletteProps {
+    children?: ReactNode;
+}
+export declare function CommandPalette({ children }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare function useCommands(commands: CommandDefinition[]): void;
+export declare function useCommandGroup(group: CommandGroupDefinition): void;
+export {};

package/dist/shell/command-palette.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, } from '../components/ui/command.js';
+import { useMedaShell } from './shell-provider.js';
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+export const CommandRegistryContext = createContext(null);
+// ---------------------------------------------------------------------------
+// matchesHotkey — strict modifier matching
+//
+// 'mod+k'          → matches Cmd+K on macOS, Ctrl+K on Windows/Linux
+// 'mod+shift+k'    → requires modifier + shift + key; no other modifiers
+// 'mod+alt+k'      → requires modifier + alt + key; no other modifiers
+//
+// Modifiers not listed in `spec` MUST NOT be pressed.
+// ---------------------------------------------------------------------------
+export function matchesHotkey(e, spec) {
+    const parts = spec.toLowerCase().split('+');
+    const key = parts.at(-1) ?? '';
+    const mods = parts.slice(0, -1);
+    const wantMod = mods.includes('mod');
+    const wantShift = mods.includes('shift');
+    const wantAlt = mods.includes('alt');
+    const hasMod = e.metaKey || e.ctrlKey;
+    return (e.key.toLowerCase() === key &&
+        (wantMod ? hasMod : !hasMod) &&
+        (wantShift ? e.shiftKey : !e.shiftKey) &&
+        (wantAlt ? e.altKey : !e.altKey));
+}
+export function CommandPalette({ children }) {
+    const ctx = useMedaShell();
+    const { open, setOpen } = ctx.commandPalette;
+    const hotkey = ctx.commandPaletteHotkey;
+    const [commands, setCommands] = useState([]);
+    const [groups, setGroups] = useState([]);
+    // -------------------------------------------------------------------------
+    // Registry methods
+    // -------------------------------------------------------------------------
+    const register = useCallback((cmds) => {
+        setCommands((prev) => {
+            const ids = new Set(cmds.map((c) => c.id));
+            return [...prev.filter((c) => !ids.has(c.id)), ...cmds];
+        });
+    }, []);
+    const unregister = useCallback((ids) => {
+        setCommands((prev) => prev.filter((c) => !ids.includes(c.id)));
+    }, []);
+    const registerGroup = useCallback((group) => {
+        setGroups((prev) => [...prev.filter((g) => g.id !== group.id), group]);
+    }, []);
+    const unregisterGroup = useCallback((id) => {
+        setGroups((prev) => prev.filter((g) => g.id !== id));
+    }, []);
+    const registry = useMemo(() => ({ register, unregister, registerGroup, unregisterGroup }), [register, unregister, registerGroup, unregisterGroup]);
+    // -------------------------------------------------------------------------
+    // Hotkey listener
+    // -------------------------------------------------------------------------
+    useEffect(() => {
+        const onKey = (e) => {
+            if (matchesHotkey(e, hotkey)) {
+                e.preventDefault();
+                setOpen(true);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [hotkey, setOpen]);
+    // -------------------------------------------------------------------------
+    // Group + sort commands
+    // -------------------------------------------------------------------------
+    const grouped = useMemo(() => {
+        const byGroup = new Map();
+        for (const cmd of commands) {
+            const list = byGroup.get(cmd.group) ?? [];
+            list.push(cmd);
+            byGroup.set(cmd.group, list);
+        }
+        const orderedGroupIds = [...byGroup.keys()].sort((a, b) => {
+            const ga = groups.find((g) => g.id === a);
+            const gb = groups.find((g) => g.id === b);
+            const pa = ga?.priority ?? 100;
+            const pb = gb?.priority ?? 100;
+            if (pa !== pb)
+                return pa - pb;
+            const la = ga?.label ?? a;
+            const lb = gb?.label ?? b;
+            return la.localeCompare(lb);
+        });
+        return orderedGroupIds.map((groupId) => {
+            const def = groups.find((g) => g.id === groupId);
+            return {
+                id: groupId,
+                label: def?.label ?? groupId,
+                commands: (byGroup.get(groupId) ?? []).sort((a, b) => a.label.localeCompare(b.label)),
+            };
+        });
+    }, [commands, groups]);
+    // -------------------------------------------------------------------------
+    // Handlers
+    // -------------------------------------------------------------------------
+    const handleSelect = (cmd) => {
+        setOpen(false);
+        void cmd.run();
+    };
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    return (_jsxs(CommandRegistryContext.Provider, { value: registry, children: [children, _jsx(CommandDialog, { open: open, onOpenChange: setOpen, children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search commands\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results." }), grouped.map((group) => (_jsx(CommandGroup, { heading: group.label, children: group.commands.map((cmd) => {
+                                        const Icon = cmd.icon;
+                                        return (_jsxs(CommandItem, { value: `${group.label} ${cmd.label}`, onSelect: () => handleSelect(cmd), children: [Icon && _jsx(Icon, { size: 16, "aria-hidden": "true" }), _jsx("span", { children: cmd.label }), cmd.shortcut && _jsx(CommandShortcut, { children: cmd.shortcut })] }, cmd.id));
+                                    }) }, group.id)))] })] }) })] }));
+}
+// ---------------------------------------------------------------------------
+// useCommands — registers on mount, unregisters on unmount
+// ---------------------------------------------------------------------------
+export function useCommands(commands) {
+    const registry = useContext(CommandRegistryContext);
+    if (!registry)
+        throw new Error('useCommands must be used inside <CommandPalette>');
+    useEffect(() => {
+        registry.register(commands);
+        return () => registry.unregister(commands.map((c) => c.id));
+    }, [commands, registry.register, registry.unregister]);
+}
+// ---------------------------------------------------------------------------
+// useCommandGroup — registers group metadata for ordering
+// ---------------------------------------------------------------------------
+export function useCommandGroup(group) {
+    const registry = useContext(CommandRegistryContext);
+    if (!registry)
+        throw new Error('useCommandGroup must be used inside <CommandPalette>');
+    useEffect(() => {
+        registry.registerGroup(group);
+        return () => registry.unregisterGroup(group.id);
+    }, [group, registry.registerGroup, registry.unregisterGroup]);
+}

package/dist/shell/context-rail.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ContextRail — spec §10
+ *
+ * Renders a resizable, collapsible, persisted context navigation rail.
+ * Width is stored per-(workspaceId, appId) via useShellLayoutState through
+ * the MedaShellProvider context.
+ *
+ * Resize integration note (Phase 9 / Pattern B):
+ * The rail uses its own pointer-events resize handle on the right edge instead
+ * of wrapping in <ResizableShell> (Pattern A). Pattern A requires migrating
+ * <AppShellBody> to a PanelGroup layout — that is Phase 11 territory.
+ * TODO(phase-11): replace pointer-events handle with <ResizableShellPanel>
+ * once <AppShellBody> ships as a ResizableShell Group.
+ */
+import type { ReactNode } from 'react';
+import type { ContextModule, ShellLinkRenderArgs } from './types.js';
+export interface ContextRailProps {
+    /** Drives the persistence key for layout state. */
+    appId: string;
+    module?: ContextModule;
+    /** Starting width in px. Falls back to provider's stored width (default 300). */
+    defaultWidth?: number;
+    collapsible?: boolean;
+    /** When true, the rail evaporates — renders an aria-hidden placeholder. */
+    hidden?: boolean;
+    /** Optional active item id for nav active state (preferred over useMedaShell().selection). */
+    activeItemId?: string;
+    renderLink?: (args: ShellLinkRenderArgs) => ReactNode;
+    className?: string;
+}
+export declare function ContextRail({ appId: _appId, module, hidden, collapsible: _collapsible, activeItemId, renderLink, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/shell/context-rail.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { useMedaShell } from './shell-provider.js';
+import { useShellViewport } from './use-shell-viewport.js';
+// ---------------------------------------------------------------------------
+// Constants — spec §10 dimensions
+// ---------------------------------------------------------------------------
+const MIN_WIDTH = 240;
+const MAX_WIDTH = 420;
+function ResizeHandle({ currentWidth, onResize, onCommit }) {
+    const startWidthRef = useRef(currentWidth);
+    const startXRef = useRef(0);
+    const draggingRef = useRef(false);
+    const handlePointerDown = (e) => {
+        // setPointerCapture may not be available in all test environments (jsdom)
+        try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // ignore — drag still functions via draggingRef
+        }
+        startWidthRef.current = currentWidth;
+        startXRef.current = e.clientX;
+        draggingRef.current = true;
+    };
+    const handlePointerMove = (e) => {
+        if (!draggingRef.current)
+            return;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + (e.clientX - startXRef.current)));
+        onResize(next);
+    };
+    const handlePointerUp = (e) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidthRef.current + (e.clientX - startXRef.current)));
+        onCommit(next);
+    };
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize context rail", "aria-valuenow": currentWidth, "aria-valuemin": MIN_WIDTH, "aria-valuemax": MAX_WIDTH, tabIndex: 0, className: cn('absolute top-0 right-0 h-full w-1 cursor-col-resize', 'opacity-0 transition-opacity hover:opacity-100 hover:bg-ring'), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }));
+}
+// ---------------------------------------------------------------------------
+// ContextRail
+// ---------------------------------------------------------------------------
+export function ContextRail({ appId: _appId, module, hidden = false, collapsible: _collapsible = true, activeItemId, renderLink, className, }) {
+    const band = useShellViewport();
+    const ctx = useMedaShell();
+    const collapsed = ctx.contextRail.collapsed;
+    // Local display width tracks pointer-move updates; ctx.contextRail.setWidth
+    // is called on pointerUp to persist via useShellLayoutState.
+    const [displayWidth, setDisplayWidth] = useState(null);
+    const width = displayWidth ?? ctx.contextRail.width;
+    if (band === 'mobile')
+        return null;
+    if (hidden) {
+        return _jsx("div", { "aria-hidden": "true", className: "hidden", "data-testid": "context-rail-hidden" });
+    }
+    if (!module || module.items.length === 0) {
+        return _jsx("div", { "aria-hidden": "true", className: "hidden", "data-testid": "context-rail-empty" });
+    }
+    const handleResize = (w) => {
+        setDisplayWidth(w);
+    };
+    const handleCommit = (w) => {
+        setDisplayWidth(null);
+        ctx.contextRail.setWidth(w);
+    };
+    return (_jsxs("aside", { "aria-label": module.label, className: cn('relative h-full shrink-0 overflow-hidden border-r border-shell-border bg-shell-context', collapsed && 'w-0', className), style: { width: collapsed ? 0 : width }, children: [_jsxs("div", { className: "border-b border-shell-border px-4 py-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: module.label }), module.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: module.description }))] }), _jsx("nav", { "aria-label": `${module.label} navigation`, className: "flex flex-col gap-0.5 p-2", children: module.items.map((item) => {
+                    const isActive = item.id === activeItemId;
+                    const klass = cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', isActive
+                        ? 'bg-primary/10 text-primary'
+                        : '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 }))] }));
+                    if (renderLink) {
+                        return renderLink({ item, isActive, className: klass, children: inner });
+                    }
+                    return (_jsx("a", { href: item.to, "aria-current": isActive ? 'page' : undefined, className: klass, children: inner }, item.id));
+                }) }), _jsx(ResizeHandle, { currentWidth: width, onResize: handleResize, onCommit: handleCommit })] }));
+}

package/dist/shell/extras/index.d.ts

@@ -0,0 +1,4 @@
+export * from './shell-desktop-panel-dock.js';
+export * from './shell-scrollable-content.js';
+export * from './shell-tab-bar.js';
+export * from './workbench-layout.js';

package/dist/shell/extras/index.js

@@ -0,0 +1,4 @@
+export * from './shell-desktop-panel-dock.js';
+export * from './shell-scrollable-content.js';
+export * from './shell-tab-bar.js';
+export * from './workbench-layout.js';

package/dist/shell/extras/shell-desktop-panel-dock.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare function ShellDesktopPanelDock({ defaultView, panelOpen, viewIds, width, onWidthChange, renderPanel, className, }: {
+    defaultView: string;
+    panelOpen: boolean;
+    viewIds?: string[];
+    width: number;
+    onWidthChange: (width: number) => void;
+    renderPanel: (options: {
+        defaultView: string;
+        viewIds?: string[];
+        className?: string;
+    }) => React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shell/extras/shell-desktop-panel-dock.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+function ShellPanelResizeHandle({ width, onWidthChange, }) {
+    const startXRef = React.useRef(0);
+    const startWidthRef = React.useRef(width);
+    const cleanupRef = React.useRef(null);
+    React.useEffect(() => {
+        return () => {
+            cleanupRef.current?.();
+        };
+    }, []);
+    function handlePointerDown(event) {
+        if (event.button !== 0)
+            return;
+        startXRef.current = event.clientX;
+        startWidthRef.current = width;
+        const handlePointerMove = (moveEvent) => {
+            onWidthChange(startWidthRef.current + (startXRef.current - moveEvent.clientX));
+        };
+        const handlePointerEnd = () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerEnd);
+            window.removeEventListener('pointercancel', handlePointerEnd);
+            cleanupRef.current = null;
+        };
+        cleanupRef.current?.();
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerEnd);
+        window.addEventListener('pointercancel', handlePointerEnd);
+        cleanupRef.current = handlePointerEnd;
+    }
+    return (_jsx("button", { type: "button", "aria-label": "Resize panel", onPointerDown: handlePointerDown, className: "absolute inset-y-0 left-0 z-10 flex w-2 shrink-0 cursor-col-resize items-center justify-center bg-transparent transition-colors hover:bg-[var(--primary)]/10", children: _jsx("span", { className: "h-12 w-px rounded-full bg-[var(--border-subtle)]" }) }));
+}
+export function ShellDesktopPanelDock({ defaultView, panelOpen, viewIds, width, onWidthChange, renderPanel, className, }) {
+    return (_jsx("div", { "data-testid": "desktop-panel-dock", "aria-hidden": !panelOpen, "data-state": panelOpen ? 'open' : 'closed', className: panelOpen
+            ? 'pointer-events-auto absolute inset-y-4 right-4 z-20 translate-x-0 opacity-100 transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]'
+            : 'pointer-events-none absolute inset-y-4 right-4 z-20 translate-x-[calc(100%+1.25rem)] opacity-0 transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]', style: { width: `${width}px` }, children: _jsxs("div", { className: "relative h-full w-full", children: [_jsx(ShellPanelResizeHandle, { width: width, onWidthChange: onWidthChange }), renderPanel({
+                    defaultView,
+                    viewIds,
+                    className: className ??
+                        'ml-2 rounded-[var(--radius-4xl)] border border-[var(--border)] bg-[color-mix(in_srgb,var(--shell-panel)_90%,transparent)] shadow-[var(--shell-shadow)] backdrop-blur-xl',
+                })] }) }));
+}

package/dist/shell/extras/shell-scrollable-content.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ShellContentLayout } from './types.js';
+export interface ShellScrollableContentProps {
+    children: ReactNode;
+    desktopDockOffset?: number;
+    layout: ShellContentLayout;
+    maxWidth?: number;
+}
+export declare function ShellScrollableContent({ children, desktopDockOffset, layout, maxWidth, }: ShellScrollableContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/extras/shell-scrollable-content.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function ShellScrollableContent({ children, desktopDockOffset = 0, layout, maxWidth, }) {
+    return (_jsx("main", { "data-testid": "shell-workspace-viewport", className: "shell-scrollbar-hidden absolute inset-0 min-w-0 overflow-y-auto overflow-x-hidden pb-[var(--bottom-nav-height)] transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] md:pb-0", style: desktopDockOffset > 0 ? { paddingRight: `${desktopDockOffset}px` } : undefined, children: layout === 'centered' ? (_jsx("div", { "data-testid": "shell-content-centered", className: "flex min-h-full items-center justify-center px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", children: _jsx("div", { className: "flex w-full max-w-3xl items-center justify-center", children: children }) })) : layout === 'fullbleed' ? (_jsx("div", { "data-testid": "shell-content-fullbleed", className: "mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10", style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })) : (_jsx("div", { "data-testid": "shell-content-workspace", className: joinClasses('mx-auto w-full px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10'), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: children })) }));
+}

package/dist/shell/extras/shell-tab-bar.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ShellTab } from './types.js';
+interface ShellTabBarRenderArgs {
+    children: ReactNode;
+    className: string;
+    isActive: boolean;
+    tab: ShellTab;
+}
+export interface ShellTabBarProps {
+    tabs: ShellTab[];
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    className?: string;
+    ariaLabel?: string;
+    renderLink?: (args: ShellTabBarRenderArgs) => ReactNode;
+}
+export declare function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel, renderLink, }: ShellTabBarProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/shell/extras/shell-tab-bar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+const tabBarClassName = 'flex h-[var(--tab-bar-height)] shrink-0 items-center gap-3 overflow-x-auto bg-[var(--background)] px-3';
+const tabClassName = 'border-b-[1.5px] pb-2.5 pt-2.5 text-xs whitespace-nowrap transition-colors';
+const activeTabClassName = 'border-[var(--primary)] text-[var(--primary)]';
+const inactiveTabClassName = 'border-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)]';
+export function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel = 'Tabs', renderLink, }) {
+    if (tabs.length === 0)
+        return null;
+    if (renderLink && tabs.every((tab) => Boolean(tab.to))) {
+        return (_jsx("nav", { "aria-label": ariaLabel, className: joinClasses(tabBarClassName, className), children: tabs.map((tab) => {
+                const isActive = tab.id === activeTab;
+                return renderLink({
+                    tab,
+                    isActive,
+                    className: joinClasses(tabClassName, isActive ? activeTabClassName : inactiveTabClassName),
+                    children: tab.label,
+                });
+            }) }));
+    }
+    return (_jsx("nav", { "aria-label": ariaLabel, className: joinClasses(tabBarClassName, className), children: tabs.map((tab) => {
+            const isActive = tab.id === activeTab;
+            return (_jsx("button", { type: "button", "data-active": isActive, onClick: () => onTabChange?.(tab.id), className: joinClasses(tabClassName, isActive ? activeTabClassName : inactiveTabClassName), children: tab.label }, tab.id));
+        }) }));
+}

package/dist/shell/extras/types.d.ts

@@ -0,0 +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 {
+    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 ShellModuleDefinition {
+    id: string;
+    label: string;
+    description: string;
+    items: ShellNavItem[];
+    headerTabs?: ShellTab[];
+}
+export interface ShellPanelDefinition {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    global?: boolean;
+    hidden?: boolean;
+}
+export interface ShellCommandDefinition {
+    id: string;
+    label: string;
+    to: string;
+    icon: LucideIcon;
+    group: string;
+    shortcut?: string;
+}
+export interface ShellPanelRenderContext {
+    sectionKey: string;
+    viewId: string;
+    selectedProductId: string | null;
+}
+export type ShellPanelRenderer = (context: ShellPanelRenderContext) => ReactNode;
+export interface ShellRouteContext {
+    pathname: string;
+    params: Record<string, string | undefined>;
+}
+export interface ShellHostAdapter {
+    route: ShellRouteContext;
+    navigate: (to: string) => void;
+}
+export interface ShellViewDefinition {
+    shellContentLayout?: ShellContentLayout;
+    shellTabs?: ShellTab[] | ((context: ShellRouteContext) => ShellTab[]);
+    shellActions?: ReactNode | ((context: ShellRouteContext) => ReactNode);
+    shellPanelViews?: string[];
+}

package/dist/shell/extras/types.js

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

package/dist/shell/extras/workbench-layout.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { ShellViewportBand } from './types.js';
+export interface WorkbenchLayoutProps {
+    viewportBand: ShellViewportBand;
+    main: ReactNode;
+    aside?: ReactNode;
+    toolbar?: ReactNode;
+    className?: string;
+}
+export declare function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }: WorkbenchLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/shell/extras/workbench-layout.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function getWorkbenchMaxWidth(viewportBand) {
+    if (viewportBand === 'desktop')
+        return 1440;
+    if (viewportBand === 'wide')
+        return 1760;
+    if (viewportBand === 'ultrawide')
+        return 1920;
+    return undefined;
+}
+export function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }) {
+    const maxWidth = getWorkbenchMaxWidth(viewportBand);
+    const layout = !aside
+        ? 'single'
+        : viewportBand === 'mobile' || viewportBand === 'tablet'
+            ? 'stacked'
+            : viewportBand === 'desktop'
+                ? 'split'
+                : 'multi-zone';
+    const columnStyle = layout === 'split'
+        ? { gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 320px)' }
+        : layout === 'multi-zone'
+            ? { gridTemplateColumns: 'minmax(0, 1fr) minmax(300px, 360px)' }
+            : undefined;
+    return (_jsxs("section", { "data-testid": "workbench-layout", "data-band": viewportBand, className: joinClasses('mx-auto flex w-full flex-col gap-6', className), style: maxWidth ? { maxWidth: `${maxWidth}px` } : undefined, children: [toolbar ? _jsx("div", { "data-testid": "workbench-toolbar", children: toolbar }) : null, _jsxs("div", { "data-testid": "workbench-columns", "data-layout": layout, className: joinClasses('w-full gap-5', layout === 'stacked' ? 'flex flex-col' : layout === 'single' ? 'flex flex-col' : 'grid'), style: columnStyle, children: [_jsx("div", { "data-testid": "workbench-main", className: "min-w-0", children: main }), aside ? (_jsx("aside", { "data-testid": "workbench-aside", className: "min-w-0", children: aside })) : null] })] }));
+}