@medalsocial/meda 2.8.0 → 3.0.0

package/dist/primitives/filter-rail.d.ts

@@ -12,8 +12,8 @@ export interface FilterRailGroupProps extends Omit<ComponentPropsWithoutRef<'fie
     description?: ReactNode;
     children?: ReactNode;
 }
-declare function FilterRailGroup({ title, description, children, className, ...props }: FilterRailGroupProps): import("react/jsx-runtime").JSX.Element;
-declare function FilterRailRoot({ title, description, search, actions, footer, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: FilterRailProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterRailGroup({ title, description, children, className, ...props }: FilterRailGroupProps): import("react").JSX.Element;
+declare function FilterRailRoot({ title, description, search, actions, footer, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: FilterRailProps): import("react").JSX.Element;
 export declare const FilterRail: typeof FilterRailRoot & {
     Group: typeof FilterRailGroup;
 };

package/dist/primitives/index.d.ts

@@ -1,10 +1,18 @@
+export type { AvatarProps, AvatarSize } from './avatar.js';
+export { Avatar, getInitials } from './avatar.js';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button.js';
+export { Button } from './button.js';
 export type { CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, } from './card.js';
 export { Card } from './card.js';
 export type { EmptyStateProps, EmptyStateVariant } from './empty-state.js';
 export { EmptyState } from './empty-state.js';
 export type { FilterRailGroupProps, FilterRailProps } from './filter-rail.js';
 export { FilterRail } from './filter-rail.js';
+export type { InputProps } from './input.js';
+export { Input } from './input.js';
 export type { SkeletonProps } from './skeleton.js';
 export { Skeleton } from './skeleton.js';
 export type { StatusPillProps, StatusPillSize, StatusPillTone } from './status-pill.js';
 export { StatusPill } from './status-pill.js';
+export type { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize, } from './toggle-group.js';
+export { ToggleGroup } from './toggle-group.js';

package/dist/primitives/index.js

@@ -1,5 +1,9 @@
+export { Avatar, getInitials } from './avatar.js';
+export { Button } from './button.js';
 export { Card } from './card.js';
 export { EmptyState } from './empty-state.js';
 export { FilterRail } from './filter-rail.js';
+export { Input } from './input.js';
 export { Skeleton } from './skeleton.js';
 export { StatusPill } from './status-pill.js';
+export { ToggleGroup } from './toggle-group.js';

package/dist/primitives/input.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+export interface InputProps extends ComponentProps<'input'> {
+    /**
+     * Marks the field invalid: sets `aria-invalid="true"` and the destructive
+     * border/ring. Pair it with `aria-describedby` pointing at the error text.
+     * An explicit `aria-invalid` prop still wins.
+     */
+    invalid?: boolean;
+}
+export declare function Input({ invalid, type, className, 'aria-invalid': ariaInvalid, ...props }: InputProps): import("react").JSX.Element;

package/dist/primitives/input.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function Input({ invalid = false, type = 'text', className, 'aria-invalid': ariaInvalid, ...props }) {
+    const resolvedInvalid = ariaInvalid ?? (invalid || undefined);
+    return (_jsx("input", { type: type, "data-slot": "input", "data-invalid": resolvedInvalid === true || resolvedInvalid === 'true' ? '' : undefined, "aria-invalid": resolvedInvalid, className: cn(
+        // text-base below `sm` keeps iOS Safari from zooming on focus.
+        'flex h-10 w-full min-w-0 rounded-md border border-input bg-background px-3 py-2 text-base text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 file:border-0 file:bg-transparent file:text-sm file:font-medium sm:text-sm', className), ...props }));
+}

package/dist/primitives/markdown-view.d.ts

@@ -19,4 +19,4 @@ export interface MarkdownViewProps extends Omit<ComponentPropsWithoutRef<'div'>,
  * pnpm add react-markdown remark-gfm rehype-highlight
  * ```
  */
-export declare function MarkdownView({ children, className, components, ...props }: MarkdownViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownView({ children, className, components, ...props }: MarkdownViewProps): import("react").JSX.Element;

package/dist/primitives/skeleton.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 export type SkeletonProps = ComponentProps<'div'>;
-export declare function Skeleton({ className, 'aria-hidden': ariaHidden, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ className, 'aria-hidden': ariaHidden, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/primitives/status-pill.d.ts

@@ -9,4 +9,4 @@ export interface StatusPillProps extends ComponentPropsWithoutRef<'span'> {
      */
     dot?: boolean;
 }
-export declare function StatusPill({ tone, size, dot, className, children, ...props }: StatusPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusPill({ tone, size, dot, className, children, ...props }: StatusPillProps): import("react").JSX.Element;

package/dist/primitives/toggle-group.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps } from 'react';
+export type ToggleGroupSize = 'sm' | 'md';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+interface ToggleGroupBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'role'> {
+    size?: ToggleGroupSize;
+    orientation?: ToggleGroupOrientation;
+    /** Disables every item. */
+    disabled?: boolean;
+}
+export interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
+    /**
+     * `single` (default) behaves like a radio group: exactly one chip can be
+     * chosen, arrow keys move focus AND selection (WAI-ARIA radio pattern), and
+     * the chosen chip cannot be un-chosen by clicking it again.
+     */
+    type?: 'single';
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+}
+export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
+    /**
+     * `multiple` is a group of independent toggle buttons (`aria-pressed`);
+     * arrow keys only move focus, Space / Enter toggles.
+     */
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+export interface ToggleGroupItemProps extends Omit<ComponentProps<'button'>, 'value'> {
+    value: string;
+}
+declare function ToggleGroupRoot(props: ToggleGroupProps): import("react").JSX.Element;
+declare function ToggleGroupItem({ value, disabled: itemDisabled, className, children, onClick, onKeyDown, onFocus, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
+/**
+ * Chip-style single- or multi-select. `type="single"` (default) is a
+ * `radiogroup`; `type="multiple"` is a `group` of `aria-pressed` toggles.
+ * Both use a roving tabindex (one Tab stop) with Arrow / Home / End keys.
+ * Give the group an accessible name via `aria-label` or `aria-labelledby`.
+ */
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
+};
+export {};

package/dist/primitives/toggle-group.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useLayoutEffect, useRef, useState, } from 'react';
+import { cn } from '../lib/utils.js';
+const ToggleGroupContext = createContext(null);
+function useToggleGroupContext() {
+    const context = useContext(ToggleGroupContext);
+    if (!context)
+        throw new Error('ToggleGroup.Item must be rendered inside <ToggleGroup>.');
+    return context;
+}
+const ITEM_SELECTOR = '[data-slot="toggle-group-item"]';
+const NEXT_KEYS = {
+    horizontal: ['ArrowRight', 'ArrowDown'],
+    vertical: ['ArrowDown', 'ArrowRight'],
+};
+const PREV_KEYS = {
+    horizontal: ['ArrowLeft', 'ArrowUp'],
+    vertical: ['ArrowUp', 'ArrowLeft'],
+};
+const SIZE_CLASSES = {
+    sm: 'h-8 px-3 text-xs [&_svg]:size-3.5',
+    md: 'h-10 px-4 text-sm [&_svg]:size-4',
+};
+function toArray(value) {
+    if (Array.isArray(value))
+        return value;
+    return value == null ? [] : [value];
+}
+function ToggleGroupRoot(props) {
+    const { type = 'single', value, defaultValue, onValueChange, size = 'md', orientation = 'horizontal', disabled = false, className, children, ...rest } = props;
+    const rootRef = useRef(null);
+    const [uncontrolled, setUncontrolled] = useState(() => toArray(defaultValue));
+    const isControlled = value !== undefined;
+    const selected = isControlled ? toArray(value) : uncontrolled;
+    const [focused, setFocused] = useState(null);
+    const [tabbable, setTabbable] = useState(undefined);
+    const enabledItems = useCallback(() => Array.from(rootRef.current?.querySelectorAll(ITEM_SELECTOR) ?? []).filter((item) => !item.disabled), []);
+    // Roving tabindex: exactly one enabled item is in the tab order — the last
+    // focused one, else the (first) selected one, else the first enabled one.
+    // Measured from the DOM after each render so nested / conditional items
+    // just work; the state update bails out when nothing changed.
+    useLayoutEffect(() => {
+        const values = enabledItems().map((item) => item.dataset.value ?? '');
+        const next = [focused, ...selected].find((v) => v != null && values.includes(v)) ?? values[0];
+        setTabbable(next ?? null);
+    });
+    const commit = (next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        if (type === 'multiple') {
+            onValueChange?.(next);
+        }
+        else if (next[0] !== undefined) {
+            onValueChange?.(next[0]);
+        }
+    };
+    const toggle = (itemValue) => {
+        if (type === 'multiple') {
+            commit(selected.includes(itemValue)
+                ? selected.filter((v) => v !== itemValue)
+                : [...selected, itemValue]);
+            return;
+        }
+        // Radio semantics: re-choosing the current value is a no-op.
+        if (selected[0] !== itemValue)
+            commit([itemValue]);
+    };
+    const onItemKeyDown = (event) => {
+        const items = enabledItems();
+        const index = items.indexOf(event.currentTarget);
+        if (index === -1 || items.length === 0)
+            return;
+        let target;
+        if (NEXT_KEYS[orientation].includes(event.key))
+            target = items[(index + 1) % items.length];
+        else if (PREV_KEYS[orientation].includes(event.key))
+            target = items[(index - 1 + items.length) % items.length];
+        else if (event.key === 'Home')
+            target = items[0];
+        else if (event.key === 'End')
+            target = items[items.length - 1];
+        if (!target)
+            return;
+        event.preventDefault();
+        target.focus();
+        const targetValue = target.dataset.value ?? '';
+        setFocused(targetValue);
+        if (type === 'single')
+            toggle(targetValue);
+    };
+    // `aria-orientation` is only defined for radiogroup, not for group.
+    const groupSemantics = type === 'single'
+        ? {
+            role: 'radiogroup',
+            'aria-orientation': orientation,
+            'aria-disabled': disabled || undefined,
+        }
+        : { role: 'group', 'aria-disabled': disabled || undefined };
+    const context = {
+        type,
+        size,
+        orientation,
+        disabled,
+        selected,
+        tabbable,
+        toggle,
+        focusItem: setFocused,
+        onItemKeyDown,
+    };
+    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx("div", { ref: rootRef, ...groupSemantics, "data-slot": "toggle-group", "data-type": type, "data-orientation": orientation, className: cn('flex flex-wrap gap-2', orientation === 'vertical' && 'flex-col items-stretch', className), ...rest, children: children }) }));
+}
+function ToggleGroupItem({ value, disabled: itemDisabled, className, children, onClick, onKeyDown, onFocus, ...props }) {
+    const group = useToggleGroupContext();
+    const isOn = group.selected.includes(value);
+    const disabled = group.disabled || Boolean(itemDisabled);
+    // Before the group has measured (SSR / first paint) keep the selected item
+    // — or every item when nothing is selected — reachable by Tab.
+    const inTabOrder = group.tabbable === undefined ? group.selected.length === 0 || isOn : group.tabbable === value;
+    const semantics = group.type === 'single'
+        ? { role: 'radio', 'aria-checked': isOn }
+        : { 'aria-pressed': isOn };
+    return (_jsx("button", { type: "button", "data-slot": "toggle-group-item", "data-value": value, "data-state": isOn ? 'on' : 'off', disabled: disabled, tabIndex: inTabOrder ? 0 : -1, ...semantics, className: cn('inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', isOn
+            ? 'border-primary bg-primary text-primary-foreground'
+            : 'border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground', SIZE_CLASSES[group.size], className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            group.focusItem(value);
+            group.toggle(value);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                group.onItemKeyDown(event);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            group.focusItem(value);
+        }, ...props, children: children }));
+}
+/**
+ * Chip-style single- or multi-select. `type="single"` (default) is a
+ * `radiogroup`; `type="multiple"` is a `group` of `aria-pressed` toggles.
+ * Both use a roving tabindex (one Tab stop) with Arrow / Home / End keys.
+ * Give the group an accessible name via `aria-label` or `aria-labelledby`.
+ */
+export const ToggleGroup = Object.assign(ToggleGroupRoot, {
+    Item: ToggleGroupItem,
+});

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

@@ -2,4 +2,4 @@ import type { ReactNode } from 'react';
 import type { AppShellAuthConfig } from './types.js';
 export declare function AppShellAuth({ children, title, description, brandName, brandMark, eyebrow, preview, actions, }: AppShellAuthConfig & {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -3,4 +3,4 @@ export interface AppShellChatProps {
     globalActions?: ReactNode;
     children: ReactNode;
 }
-export declare function AppShellChat({ globalActions, children }: AppShellChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellChat({ globalActions, children }: AppShellChatProps): import("react").JSX.Element;

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

@@ -33,4 +33,4 @@ export interface AppShellWorkspaceProps {
     mobileNav?: AppShellMobileNavConfig;
     children: ReactNode;
 }
-export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, headerLayout, banners, mainLayout, mainClassName, builtInCommandPalette, mobileNav, children, }: AppShellWorkspaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellWorkspace({ iconRail, contextRail, rightPanel, workspace, appTabs, globalActions, headerCenter, headerLeading, headerLayout, banners, mainLayout, mainClassName, builtInCommandPalette, mobileNav, children, }: AppShellWorkspaceProps): import("react").JSX.Element;

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

@@ -77,9 +77,9 @@ export type AppShellProps = AppShellBaseProps & ({
     variant: 'chat';
     globalActions?: ReactNode;
 });
-export declare function AppShell(props: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell(props: AppShellProps): import("react").JSX.Element;
 export declare function AppShellBody({ children, className }: {
     children: ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/shell/command-palette.d.ts

@@ -17,7 +17,7 @@ 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 CommandPalette({ children }: CommandPaletteProps): import("react").JSX.Element;
 export declare function useCommands(commands: CommandDefinition[]): void;
 export declare function useCommandGroup(group: CommandGroupDefinition): void;
 export {};

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

@@ -16,4 +16,4 @@ export interface ContextRailProps {
     scroll?: ContextRailScroll;
     className?: string;
 }
-export declare function ContextRail({ appId, module, hidden, collapsible, activeItemId, renderLink, header, scroll, className, }: ContextRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ContextRail({ appId, module, hidden, collapsible, activeItemId, renderLink, header, scroll, className, }: ContextRailProps): import("react").JSX.Element | null;

package/dist/shell/drag-mode-banner.d.ts

@@ -25,7 +25,7 @@ export interface DragModeBannerProps {
     isActive?: (activeId: string | number) => boolean;
     className?: string;
 }
-export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react").JSX.Element | null;
 export declare namespace DragModeBanner {
     var displayName: string;
 }

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

@@ -11,4 +11,4 @@ export declare function ShellDesktopPanelDock({ defaultView, panelOpen, viewIds,
         className?: string;
     }) => React.ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

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

@@ -6,4 +6,4 @@ export interface ShellScrollableContentProps {
     layout: ShellContentLayout;
     maxWidth?: number;
 }
-export declare function ShellScrollableContent({ children, desktopDockOffset, layout, maxWidth, }: ShellScrollableContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShellScrollableContent({ children, desktopDockOffset, layout, maxWidth, }: ShellScrollableContentProps): import("react").JSX.Element;

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

@@ -14,5 +14,5 @@ export interface ShellTabBarProps {
     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 declare function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel, renderLink, }: ShellTabBarProps): import("react").JSX.Element | null;
 export {};

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

@@ -7,4 +7,4 @@ export interface WorkbenchLayoutProps {
     toolbar?: ReactNode;
     className?: string;
 }
-export declare function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }: WorkbenchLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkbenchLayout({ viewportBand, main, aside, toolbar, className, }: WorkbenchLayoutProps): import("react").JSX.Element;

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

@@ -28,5 +28,5 @@ export interface RailDividerProps {
     pinnedBottom: boolean;
     onToggle: () => void;
 }
-export declare function RailDivider({ pinnedBottom, onToggle }: RailDividerProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, labelVisibility, className, }: IconRailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RailDivider({ pinnedBottom, onToggle }: RailDividerProps): import("react").JSX.Element;
+export declare function IconRail({ mainItems, utilityItems, footer, activeId, renderLink, labelVisibility, className, }: IconRailProps): import("react").JSX.Element | null;

package/dist/shell/internal/mobile-bottom-nav.d.ts

@@ -20,4 +20,4 @@ export interface MobileBottomNavProps {
  *
  * Hidden on non-mobile viewports and when the right panel is in fullscreen mode.
  */
-export declare function MobileBottomNav({ items, className }: MobileBottomNavProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileBottomNav({ items, className }: MobileBottomNavProps): import("react").JSX.Element | null;

package/dist/shell/internal/mobile-dock.d.ts

@@ -27,4 +27,4 @@ export interface MobileDockProps {
  *
  * Hidden on non-mobile viewports and when the right panel is fullscreen.
  */
-export declare function MobileDock({ items, activeTo, activeId, renderLink, className, variant, }: MobileDockProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileDock({ items, activeTo, activeId, renderLink, className, variant, }: MobileDockProps): import("react").JSX.Element | null;

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

@@ -54,7 +54,7 @@ export function MobileDock({ items, activeTo, activeId, renderLink, className, v
             const label = typeof item.label === 'function' ? item.label() : item.label;
             const isActive = isItemActive(item);
             const isBrand = item.emphasis === 'brand';
-            const iconEl = isBrand ? (_jsx("span", { className: cn('flex size-8 items-center justify-center rounded-full bg-[#5B2D8C] text-white', isActive && 'ring-2 ring-primary ring-offset-2 ring-offset-card'), children: renderIcon(item.icon, 20) })) : (renderIcon(item.icon, 25));
+            const iconEl = isBrand ? (_jsx("span", { className: cn('flex size-8 items-center justify-center rounded-full bg-[var(--color-brand-600)] text-white', isActive && 'ring-2 ring-primary ring-offset-2 ring-offset-card'), children: renderIcon(item.icon, 20) })) : (renderIcon(item.icon, 25));
             // Active wins over brand: a slot carrying `aria-current="page"` must
             // have a visible treatment too. The label goes primary; the glyph in the
             // disc stays white because the disc sets its own colour.
@@ -128,5 +128,5 @@ export function MobileDock({ items, activeTo, activeId, renderLink, className, v
         const actionActive = activeId != null && item.id === activeId;
         return (_jsxs("button", { type: "button", onClick: () => runAction(item), "aria-label": label, className: cn('relative flex items-center justify-center rounded-full p-1 transition-colors', actionActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'), children: [icon, badge] }));
     };
-    return (_jsxs("div", { "data-testid": "mobile-dock", className: cn('pointer-events-none absolute inset-x-0 bottom-0 z-30 flex items-center justify-center gap-2.5 pb-[calc(env(safe-area-inset-bottom)+12px)] pt-2', className), children: [_jsx("nav", { "aria-label": "Dock", className: "pointer-events-auto flex items-center gap-[18px] rounded-full border border-border bg-card px-4 py-2.5 shadow-[0_6px_20px_rgba(20,18,60,0.14)]", children: pillItems.map((item) => (_jsx("span", { className: "flex", children: renderSlot(item, 22) }, item.id))) }), brandItems.map((item) => (_jsx("span", { className: cn('pointer-events-auto flex size-11 items-center justify-center rounded-full bg-[#5B2D8C] text-white shadow-[0_6px_20px_rgba(91,45,140,0.35)]', isItemActive(item) && 'ring-2 ring-primary ring-offset-2 ring-offset-background'), children: renderSlot(item, 22) }, item.id)))] }));
+    return (_jsxs("div", { "data-testid": "mobile-dock", className: cn('pointer-events-none absolute inset-x-0 bottom-0 z-30 flex items-center justify-center gap-2.5 pb-[calc(env(safe-area-inset-bottom)+12px)] pt-2', className), children: [_jsx("nav", { "aria-label": "Dock", className: "pointer-events-auto flex items-center gap-[18px] rounded-full border border-border bg-card px-4 py-2.5 shadow-[0_6px_20px_rgba(20,18,60,0.14)]", children: pillItems.map((item) => (_jsx("span", { className: "flex", children: renderSlot(item, 22) }, item.id))) }), brandItems.map((item) => (_jsx("span", { className: cn('pointer-events-auto flex size-11 items-center justify-center rounded-full bg-[var(--color-brand-600)] text-white shadow-[0_6px_20px_rgba(91,45,140,0.35)]', isItemActive(item) && 'ring-2 ring-primary ring-offset-2 ring-offset-background'), children: renderSlot(item, 22) }, item.id)))] }));
 }

package/dist/shell/internal/mobile-drawers.d.ts

@@ -47,4 +47,4 @@ export interface MobileDrawersProps {
  * any custom-content drawers. Mount once near the AppShell root; drawers
  * open/close via `ctx.mobileDrawer.open` provider state.
  */
-export declare function MobileDrawers({ menuItems, menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleActiveItemId, moduleRenderLink, moduleHeader, moduleScroll, sectionTabs, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileDrawers({ menuItems, menuActiveId, menuRenderLink, workspaceMenuItems, workspaceMenuFooter, module, moduleAppId, moduleActiveItemId, moduleRenderLink, moduleHeader, moduleScroll, sectionTabs, panelViews, defaultView, customContent, }: MobileDrawersProps): import("react").JSX.Element;

package/dist/shell/internal/mobile-header.d.ts

@@ -22,4 +22,4 @@ export interface MobileHeaderProps {
  *
  * Renders nothing on non-mobile viewports.
  */
-export declare function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, headerCenter, className, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MobileHeader({ parentLabel, parentTo: _parentTo, title, onBack, globalActions, headerCenter, className, }: MobileHeaderProps): import("react").JSX.Element | null;

package/dist/shell/internal/mobile-workspace-sheet.d.ts

@@ -29,4 +29,4 @@ export interface MobileWorkspaceSheetProps {
  * is expanded and scrolled into view on every open, and the user can still
  * collapse it.
  */
-export declare function MobileWorkspaceSheet({ tree, activeTo, activeId, currentFirst, renderLink, workspaceMenuItems, workspaceMenuFooter, }: MobileWorkspaceSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileWorkspaceSheet({ tree, activeTo, activeId, currentFirst, renderLink, workspaceMenuItems, workspaceMenuFooter, }: MobileWorkspaceSheetProps): import("react").JSX.Element;

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

@@ -12,4 +12,4 @@ export interface ResolvedPanelViews {
 }
 export declare function mergePanelViews(staticViews: PanelView[] | undefined, registrations: PanelViewRegistration[], staticDefaultView?: string): ResolvedPanelViews;
 export declare function useResolvedPanelViews(staticViews?: PanelView[], staticDefaultView?: string): ResolvedPanelViews;
-export declare function PanelViewsProvider({ views, defaultView, children }: PanelViewsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelViewsProvider({ views, defaultView, children }: PanelViewsProviderProps): import("react").JSX.Element;

package/dist/shell/rail-drop-slot.d.ts

@@ -35,7 +35,7 @@ export interface RailDropSlotProps {
     ariaLabel?: string;
     ref?: Ref<HTMLElement>;
 }
-export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react").JSX.Element;
 export declare namespace RailDropSlot {
     var displayName: string;
 }

package/dist/shell/rail-drop-zones.d.ts

@@ -22,7 +22,7 @@ export interface RailDropZonesProps {
     children: ReactNode;
     className?: string;
 }
-export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react/jsx-runtime").JSX.Element;
+export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react").JSX.Element;
 export declare namespace RailDropZones {
     var displayName: string;
 }

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

@@ -20,7 +20,7 @@ export interface ResizableShellProps {
     className?: string;
     children: ReactNode;
 }
-export declare function ResizableShell({ orientation, className, children, }: ResizableShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableShell({ orientation, className, children, }: ResizableShellProps): import("react").JSX.Element;
 export interface ResizableShellPanelProps {
     /** Percent (0–100). */
     defaultSize?: number;
@@ -36,10 +36,10 @@ export interface ResizableShellPanelProps {
     className?: string;
     children: ReactNode;
 }
-export declare function ResizableShellPanel({ className, children, onResize, ...props }: ResizableShellPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableShellPanel({ className, children, onResize, ...props }: ResizableShellPanelProps): import("react").JSX.Element;
 export interface ResizableHandleProps {
     className?: string;
     /** When true, renders a visible drag-indicator bar inside the handle. */
     withHandle?: boolean;
 }
-export declare function ResizableHandle({ className, withHandle }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableHandle({ className, withHandle }: ResizableHandleProps): import("react").JSX.Element;

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

@@ -23,4 +23,4 @@ export interface RightPanelTabRenderArgs {
 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;
+export declare function RightPanel({ panelViews, defaultView, modes, renderTab, className, }: RightPanelProps): import("react").JSX.Element | null;

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

@@ -40,15 +40,15 @@ export interface WorkspaceSwitcherProps {
      */
     showLabel?: boolean;
 }
-export declare function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, variant, showLabel, }?: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkspaceSwitcher({ menuItems, menuFooter, workspaceMenuFooter, variant, showLabel, }?: WorkspaceSwitcherProps): import("react").JSX.Element;
 export interface AppTabsProps extends AppShellAppTabsConfig {
 }
-export declare function AppTabs({ renderLink }?: AppTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppTabs({ renderLink }?: AppTabsProps): import("react").JSX.Element;
 export interface PanelToggleProps {
     /** Panel views surfaced in the chevron dropdown. Empty → plain toggle. */
     panelViews?: PanelView[];
 }
-export declare function PanelToggle({ panelViews }?: PanelToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelToggle({ panelViews }?: PanelToggleProps): import("react").JSX.Element;
 export interface ShellHeaderProps {
     globalActions?: ReactNode;
     /**
@@ -88,4 +88,4 @@ export interface ShellHeaderProps {
      */
     railLabelVisibility?: IconRailLabelVisibility;
 }
-export declare function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle, panelViews, headerLayout, railLabelVisibility, }?: ShellHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShellHeader({ globalActions, headerCenter, headerLeading, appTabsRenderLink, className, workspaceMenuItems, workspaceMenuFooter, showPanelToggle, panelViews, headerLayout, railLabelVisibility, }?: ShellHeaderProps): import("react").JSX.Element | null;

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

@@ -5,4 +5,4 @@ export interface ShellMainProps {
     className?: string;
     children: ReactNode;
 }
-export declare function ShellMain({ layout, className, children }: ShellMainProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShellMain({ layout, className, children }: ShellMainProps): import("react").JSX.Element;

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

@@ -74,5 +74,5 @@ export interface MedaShellProviderProps {
     themeAdapter?: 'default' | 'next-themes' | ThemeAdapter;
     children: ReactNode;
 }
-export declare function MedaShellProvider(props: MedaShellProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MedaShellProvider(props: MedaShellProviderProps): import("react").JSX.Element;
 export {};

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

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

package/dist/shell/theme.d.ts

@@ -4,6 +4,6 @@ import type { ThemeAdapter } from './types.js';
 export declare const ThemeCtx: import("react").Context<ThemeAdapter | null>;
 export declare function DefaultThemeProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useTheme(): ThemeAdapter;
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggle(): import("react").JSX.Element;

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

@@ -34,7 +34,9 @@ function subscribeToViewport(onChange) {
     const matchMedia = getMatchMedia();
     if (!matchMedia) {
         subscribedMqls = null;
-        return () => { };
+        return () => {
+            // no matchMedia (SSR/test) - nothing to unsubscribe
+        };
     }
     const mqls = Object.entries(BREAKPOINTS).map(([band, query]) => [band, matchMedia(query)]);
     subscribedMqls = mqls;

package/dist/styles/base.css

@@ -0,0 +1,40 @@
+/* @medalsocial/meda/styles/base.css
+ *
+ * Lean foundation for consumers that render only a few meda surfaces:
+ * canonical design tokens + the Tailwind theme bridge + the base layer.
+ *
+ * Deliberately does NOT `@source` meda's component output and does NOT pull
+ * in `@xyflow/react`'s stylesheet. Pair it with the per-feature stylesheets
+ * for the surfaces you render, e.g.
+ *
+ *   @import "tailwindcss";
+ *   @import "@medalsocial/meda/styles/base.css";
+ *   @import "@medalsocial/meda/primitives/styles.css";
+ *   @import "@medalsocial/meda/calendar/styles.css";
+ *
+ * `@medalsocial/meda/styles.css` (theme.css) remains the batteries-included
+ * entry: base + every feature, including workflow-builder.
+ */
+
+@import "./tokens.css";
+@import "./bridge.css";
+
+@theme inline {
+  /* Font families — Geist + Geist Mono only (no Inter) */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --auth-gradient-primary: var(--color-brand-500);
+    --auth-gradient-secondary: var(--color-brand-700);
+    --auth-gradient-base: var(--color-brand-800);
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+}