@almadar/ui 1.0.0

package/dist/components/index.d.ts

@@ -0,0 +1,4789 @@
+import * as React from 'react';
+import React__default from 'react';
+import { LucideIcon } from 'lucide-react';
+import { SExpr } from '@orbital/shared';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Entity } from '../stores/index.js';
+import { E as EventBusContextType } from '../event-bus-types-8-cjyMxw.js';
+import { S as SlotContent, a as UISlot } from '../useUISlots-mnggE9X9.js';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    /** Left icon as ReactNode (preferred) */
+    leftIcon?: React__default.ReactNode;
+    /** Right icon as ReactNode (preferred) */
+    rightIcon?: React__default.ReactNode;
+    /** Left icon as Lucide icon component (convenience prop, renders with default size) */
+    icon?: LucideIcon;
+    /** Right icon as Lucide icon component (convenience prop) */
+    iconRight?: LucideIcon;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface SelectOption$1 {
+    value: string;
+    label: string;
+}
+interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    /** Input type - supports 'select' and 'textarea' in addition to standard types */
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "datetime-local" | "time" | "checkbox" | "select" | "textarea";
+    error?: string;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    /** Lucide icon component for left side (convenience prop) */
+    icon?: LucideIcon;
+    /** Show clear button when input has value */
+    clearable?: boolean;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+    /** Options for select type */
+    options?: SelectOption$1[];
+    /** Rows for textarea type */
+    rows?: number;
+    /** onChange handler - accepts events from input, select, or textarea */
+    onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+}
+declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>>;
+
+interface LabelProps extends React__default.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+declare const Label: React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
+
+interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: string;
+}
+declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+    options: SelectOption[];
+    placeholder?: string;
+    error?: string;
+}
+declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+}
+declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type CardShadow = "none" | "sm" | "md" | "lg";
+interface CardProps$1 extends React__default.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "bordered" | "elevated" | "interactive";
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Card title - renders in header if provided */
+    title?: string;
+    /** Card subtitle - renders below title */
+    subtitle?: string;
+    /** Shadow size override */
+    shadow?: CardShadow;
+}
+declare const Card$1: React__default.ForwardRefExoticComponent<CardProps$1 & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLHeadingElement> & React__default.RefAttributes<HTMLHeadingElement>>;
+declare const CardContent: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
+
+type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+}
+declare const Badge: React__default.ForwardRefExoticComponent<BadgeProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+type SpinnerSize = "xs" | "sm" | "md" | "lg";
+interface SpinnerProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    size?: SpinnerSize;
+}
+declare const Spinner: React__default.ForwardRefExoticComponent<SpinnerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Avatar Atom Component
+ *
+ * A versatile avatar component supporting images, initials, icons, and status indicators.
+ */
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarStatus = "online" | "offline" | "away" | "busy";
+interface AvatarProps {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Full name - initials will be generated automatically
+     */
+    name?: string;
+    /**
+     * Initials to display (e.g., "JD" for John Doe)
+     * If not provided but name is, initials will be auto-generated
+     */
+    initials?: string;
+    /**
+     * Icon to display when no image or initials
+     */
+    icon?: LucideIcon;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Status indicator
+     */
+    status?: AvatarStatus;
+    /**
+     * Badge content (e.g., notification count)
+     */
+    badge?: string | number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+declare const Avatar: React__default.FC<AvatarProps>;
+
+/**
+ * Box Component
+ *
+ * A versatile layout primitive that provides spacing, background, border, and shadow controls.
+ * Think of it as a styled div with consistent design tokens.
+ */
+
+type BoxPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type BoxMargin = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto";
+type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "surface" | "overlay";
+type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
+interface BoxProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** Padding on all sides */
+    padding?: BoxPadding;
+    /** Horizontal padding (overrides padding for x-axis) */
+    paddingX?: BoxPadding;
+    /** Vertical padding (overrides padding for y-axis) */
+    paddingY?: BoxPadding;
+    /** Margin on all sides */
+    margin?: BoxMargin;
+    /** Horizontal margin */
+    marginX?: BoxMargin;
+    /** Vertical margin */
+    marginY?: BoxMargin;
+    /** Background color */
+    bg?: BoxBg;
+    /** Show border */
+    border?: boolean;
+    /** Border radius */
+    rounded?: BoxRounded;
+    /** Box shadow */
+    shadow?: BoxShadow;
+    /** Display type */
+    display?: "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "grid";
+    /** Fill available width */
+    fullWidth?: boolean;
+    /** Fill available height */
+    fullHeight?: boolean;
+    /** Overflow behavior */
+    overflow?: "auto" | "hidden" | "visible" | "scroll";
+    /** Position */
+    position?: "relative" | "absolute" | "fixed" | "sticky";
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+}
+/**
+ * Box - Versatile container component with design tokens
+ */
+declare const Box: React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Center Component
+ *
+ * A layout utility that centers its children horizontally and/or vertically.
+ */
+
+interface CenterProps {
+    /** Center inline (width fits content) vs block (full width) */
+    inline?: boolean;
+    /** Center only horizontally */
+    horizontal?: boolean;
+    /** Center only vertically */
+    vertical?: boolean;
+    /** Minimum height (useful for vertical centering) */
+    minHeight?: string | number;
+    /** Fill available height */
+    fullHeight?: boolean;
+    /** Fill available width */
+    fullWidth?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** Children elements */
+    children: React__default.ReactNode;
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+}
+/**
+ * Center - Centers content horizontally and/or vertically
+ */
+declare const Center: React__default.FC<CenterProps>;
+
+/**
+ * Divider Atom Component
+ *
+ * A divider component for separating content sections.
+ */
+
+type DividerOrientation = "horizontal" | "vertical";
+type DividerVariant = "solid" | "dashed" | "dotted";
+interface DividerProps {
+    /**
+     * Orientation of the divider
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Text label to display in the divider
+     */
+    label?: string;
+    /**
+     * Line style variant
+     * @default 'solid'
+     */
+    variant?: DividerVariant;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Divider: React__default.FC<DividerProps>;
+
+/**
+ * Icon Atom Component
+ *
+ * A wrapper component for Lucide icons with consistent sizing and styling.
+ * Uses theme-aware CSS variables for stroke width and color.
+ *
+ * Supports two APIs:
+ * - `icon` prop: Pass a LucideIcon component directly
+ * - `name` prop: Pass a string icon name (resolved from iconMap)
+ */
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconAnimation = 'spin' | 'pulse' | 'none';
+interface IconProps {
+    /** Lucide icon component (preferred for type-safe usage) */
+    icon?: LucideIcon;
+    /** Icon name as string (resolved from iconMap) */
+    name?: string;
+    /** Size of the icon */
+    size?: IconSize;
+    /** Color class (Tailwind color class) or 'inherit' for theme default */
+    color?: string;
+    /** Animation type */
+    animation?: IconAnimation;
+    /** Additional CSS classes */
+    className?: string;
+    /** Icon stroke width - uses theme default if not specified */
+    strokeWidth?: number;
+    /** Inline style */
+    style?: React__default.CSSProperties;
+}
+declare const Icon: React__default.FC<IconProps>;
+
+/**
+ * ProgressBar Atom Component
+ *
+ * A progress bar component with linear, circular, and stepped variants.
+ */
+
+type ProgressBarType = "linear" | "circular" | "stepped";
+type ProgressBarVariant = "default" | "primary" | "success" | "warning" | "danger";
+type ProgressBarColor = ProgressBarVariant;
+interface ProgressBarProps {
+    /**
+     * Progress value (0-100)
+     */
+    value: number;
+    /**
+     * Maximum value (for calculating percentage)
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Type of the progress bar (linear, circular, stepped)
+     * @default 'linear'
+     */
+    type?: ProgressBarType;
+    /**
+     * Variant/color of the progress bar
+     * @default 'primary'
+     */
+    variant?: ProgressBarVariant;
+    /**
+     * Color variant (alias for variant)
+     * @default 'primary'
+     */
+    color?: ProgressBarColor;
+    /**
+     * Show percentage text
+     * @default false
+     */
+    showPercentage?: boolean;
+    /**
+     * Alias for showPercentage (pattern compatibility)
+     */
+    showLabel?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Size (for circular variant)
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Number of steps (for stepped variant)
+     * @default 5
+     */
+    steps?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
+
+/**
+ * Radio Atom Component
+ *
+ * A radio button component with label support and accessibility.
+ */
+
+interface RadioProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * Label text displayed next to the radio button
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the radio button
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the radio button
+     */
+    error?: string;
+    /**
+     * Size of the radio button
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+}
+declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    name?: string;
+    className?: string;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Spacer Component
+ *
+ * A flexible spacer that expands to fill available space in a flex container.
+ * Useful for pushing elements apart or creating consistent spacing.
+ */
+
+type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+interface SpacerProps {
+    /** Fixed size (auto = flex grow) */
+    size?: SpacerSize;
+    /** Orientation (for fixed sizes) */
+    axis?: 'horizontal' | 'vertical';
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Spacer - Flexible spacing element for flex layouts
+ *
+ * Usage:
+ * - size="auto" (default): Expands to fill available space (flex: 1)
+ * - size="md": Fixed size spacing
+ */
+declare const Spacer: React__default.FC<SpacerProps>;
+
+/**
+ * Stack Component
+ *
+ * A layout primitive for arranging children in a vertical or horizontal stack with consistent spacing.
+ * Includes convenience exports VStack and HStack for common use cases.
+ */
+
+type StackDirection = "horizontal" | "vertical";
+type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+interface StackProps {
+    /** Stack direction */
+    direction?: StackDirection;
+    /** Gap between children */
+    gap?: StackGap;
+    /** Align items on the cross axis */
+    align?: StackAlign;
+    /** Justify items on the main axis */
+    justify?: StackJustify;
+    /** Allow items to wrap */
+    wrap?: boolean;
+    /** Reverse the order of children */
+    reverse?: boolean;
+    /** Fill available space (flex: 1) */
+    flex?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** Children elements */
+    children?: React__default.ReactNode;
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+    /** Click handler */
+    onClick?: (e: React__default.MouseEvent) => void;
+    /** Keyboard handler */
+    onKeyDown?: (e: React__default.KeyboardEvent) => void;
+    /** Role for accessibility */
+    role?: string;
+    /** Tab index for focus management */
+    tabIndex?: number;
+}
+/**
+ * Stack - Flexible layout component for arranging children
+ */
+declare const Stack: React__default.FC<StackProps>;
+/**
+ * VStack - Vertical stack shorthand
+ */
+interface VStackProps extends Omit<StackProps, "direction"> {
+}
+declare const VStack: React__default.FC<VStackProps>;
+/**
+ * HStack - Horizontal stack shorthand
+ */
+interface HStackProps extends Omit<StackProps, "direction"> {
+}
+declare const HStack: React__default.FC<HStackProps>;
+
+/**
+ * TextHighlight Atom Component
+ *
+ * A styled span component for highlighting text with annotations (questions or notes).
+ * Uses different colors for different annotation types:
+ * - Questions: Blue highlight
+ * - Notes: Yellow highlight
+ */
+
+type HighlightType = "question" | "note";
+interface TextHighlightProps {
+    /**
+     * Type of highlight (determines color)
+     */
+    type: HighlightType;
+    /**
+     * Whether the highlight is currently active/focused
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Callback when highlight is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Callback when highlight is hovered
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Callback when hover ends
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Unique ID for the annotation
+     */
+    annotationId?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Highlighted text content
+     */
+    children: React__default.ReactNode;
+}
+/**
+ * TextHighlight component for rendering highlighted text annotations
+ */
+declare const TextHighlight: React__default.FC<TextHighlightProps>;
+
+/**
+ * Typography Atom Component
+ *
+ * Text elements following the KFlow design system with theme-aware styling.
+ */
+
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "body" | "caption" | "overline" | "small" | "large" | "label";
+type TypographySize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+interface TypographyProps {
+    /** Typography variant */
+    variant?: TypographyVariant;
+    /** Heading level (1-6) - alternative to variant for headings */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Text color */
+    color?: "primary" | "secondary" | "muted" | "error" | "success" | "warning" | "inherit";
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Font weight override */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    /** Font size override */
+    size?: TypographySize;
+    /** Truncate with ellipsis */
+    truncate?: boolean;
+    /** Custom HTML element */
+    as?: keyof JSX.IntrinsicElements;
+    /** HTML id attribute */
+    id?: string;
+    /** Additional class names */
+    className?: string;
+    /** Inline style */
+    style?: React__default.CSSProperties;
+    /** Text content (alternative to children) */
+    content?: React__default.ReactNode;
+    /** Children elements */
+    children?: React__default.ReactNode;
+}
+declare const Typography: React__default.FC<TypographyProps>;
+
+/**
+ * ThemeToggle Atom Component
+ *
+ * A button that toggles between light and dark themes.
+ * Uses Sun and Moon icons to indicate current/target theme.
+ *
+ * @packageDocumentation
+ */
+
+interface ThemeToggleProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Show label text */
+    showLabel?: boolean;
+}
+/**
+ * ThemeToggle component for switching between light and dark modes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ThemeToggle />
+ *
+ * // With label
+ * <ThemeToggle showLabel />
+ *
+ * // Custom size
+ * <ThemeToggle size="lg" />
+ * ```
+ */
+declare const ThemeToggle: React__default.FC<ThemeToggleProps>;
+
+/**
+ * ThemeSelector - Design theme selector component
+ *
+ * A dropdown/toggle component for switching between design themes.
+ *
+ * @packageDocumentation
+ */
+
+interface ThemeSelectorProps {
+    /** Optional className */
+    className?: string;
+    /** Show as dropdown or buttons */
+    variant?: "dropdown" | "buttons";
+    /** Show labels */
+    showLabels?: boolean;
+}
+/**
+ * ThemeSelector component for switching design themes
+ */
+declare const ThemeSelector: React__default.FC<ThemeSelectorProps>;
+
+/**
+ * Overlay Atom Component
+ *
+ * A fixed backdrop for modals and drawers.
+ */
+
+interface OverlayProps {
+    isVisible?: boolean;
+    onClick?: (e: React__default.MouseEvent) => void;
+    className?: string;
+    blur?: boolean;
+}
+declare const Overlay: React__default.FC<OverlayProps>;
+
+/**
+ * ConditionalWrapper Atom Component
+ *
+ * A wrapper component that conditionally renders its children based on
+ * S-expression evaluation. Used for dynamic field visibility in inspection forms.
+ */
+
+/**
+ * Context for conditional evaluation
+ */
+interface ConditionalContext {
+    formValues: Record<string, unknown>;
+    globalVariables: Record<string, unknown>;
+    localVariables?: Record<string, unknown>;
+    entity?: Record<string, unknown>;
+}
+interface ConditionalWrapperProps {
+    /** The S-expression condition to evaluate */
+    condition?: SExpr;
+    /** Context for evaluating the condition */
+    context: ConditionalContext;
+    /** Children to render when condition is true (or when no condition is provided) */
+    children: React__default.ReactNode;
+    /** Optional fallback to render when condition is false */
+    fallback?: React__default.ReactNode;
+    /** Whether to animate the transition (uses CSS transitions) */
+    animate?: boolean;
+}
+/**
+ * ConditionalWrapper conditionally renders children based on S-expression evaluation.
+ *
+ * Supported bindings:
+ * - @entity.formValues.fieldId - Access form field values
+ * - @entity.globalVariables.HG_VAR - Access global inspection variables
+ * - @entity.localVariables.H_VAR - Access document-local variables
+ * - @state - Current state machine state
+ * - @now - Current timestamp
+ *
+ * @example
+ * // Simple condition - show field when another field equals a value
+ * <ConditionalWrapper
+ *   condition={["=", "@entity.formValues.vehicleType", "commercial"]}
+ *   context={{ formValues: { vehicleType: "commercial" }, globalVariables: {} }}
+ * >
+ *   <Input name="commercialLicenseNumber" />
+ * </ConditionalWrapper>
+ *
+ * @example
+ * // With fallback - show message when condition not met
+ * <ConditionalWrapper
+ *   condition={[">=", "@entity.formValues.loadWeight", 3500]}
+ *   context={formContext}
+ *   fallback={<Typography variant="small">Load weight must be at least 3500kg</Typography>}
+ * >
+ *   <HeavyVehicleFields />
+ * </ConditionalWrapper>
+ *
+ * @example
+ * // Using global variables for cross-form conditions
+ * <ConditionalWrapper
+ *   condition={["=", "@entity.globalVariables.HG_POTROSNIKI", "DA"]}
+ *   context={{ formValues: {}, globalVariables: { HG_POTROSNIKI: "DA" } }}
+ * >
+ *   <PriceMarkingSection />
+ * </ConditionalWrapper>
+ */
+declare const ConditionalWrapper: React__default.FC<ConditionalWrapperProps>;
+
+/**
+ * LawReferenceTooltip Atom Component
+ *
+ * A specialized tooltip for displaying law references in inspection forms.
+ * Shows law name, article number, and relevant clause text.
+ */
+
+/**
+ * Law reference definition
+ */
+interface LawReference {
+    /** Law identifier (e.g., "VVO", "TPED") */
+    law: string;
+    /** Full name of the law */
+    lawName?: string;
+    /** Article number (e.g., "§8", "Artikel 5") */
+    article: string;
+    /** Clause or paragraph text */
+    clause?: string;
+    /** Optional link to full law text */
+    link?: string;
+}
+interface LawReferenceTooltipProps {
+    /** The law reference to display */
+    reference: LawReference;
+    /** Children element that triggers the tooltip */
+    children: React__default.ReactNode;
+    /** Tooltip position */
+    position?: "top" | "bottom" | "left" | "right";
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * LawReferenceTooltip displays legal references with structured formatting.
+ *
+ * @example
+ * <LawReferenceTooltip
+ *   reference={{
+ *     law: "VVO",
+ *     lawName: "Verkehrsverordnung",
+ *     article: "§8 Abs. 3",
+ *     clause: "Die zulässige Gesamtmasse darf 3500 kg nicht überschreiten."
+ *   }}
+ * >
+ *   <Typography variant="small" className="text-blue-600 underline cursor-help">VVO §8</Typography>
+ * </LawReferenceTooltip>
+ */
+declare const LawReferenceTooltip: React__default.FC<LawReferenceTooltipProps>;
+
+/**
+ * FormField Molecule Component
+ *
+ * A form field wrapper with label, hint, and error message support.
+ * **Atomic Design**: Composed using Label and Typography atoms.
+ */
+
+interface FormFieldProps {
+    label: string;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    className?: string;
+    children: React__default.ReactNode;
+}
+declare const FormField: React__default.FC<FormFieldProps>;
+
+interface EmptyStateProps {
+    /**
+     * Icon to display. Accepts either:
+     * - A Lucide icon component (LucideIcon)
+     * - A string icon name (e.g., "check-circle", "x-circle")
+     */
+    icon?: LucideIcon | string;
+    /** Primary text to display - use title or message (message is alias for backwards compat) */
+    title?: string;
+    /** Alias for title - used by schema patterns */
+    message?: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    className?: string;
+    /** Destructive styling for confirmation dialogs */
+    destructive?: boolean;
+    /** Variant for color styling */
+    variant?: "default" | "success" | "error" | "warning" | "info";
+}
+declare const EmptyState: React__default.FC<EmptyStateProps>;
+
+interface LoadingStateProps {
+    title?: string;
+    message?: string;
+    className?: string;
+}
+declare const LoadingState: React__default.FC<LoadingStateProps>;
+
+interface ErrorStateProps {
+    title?: string;
+    /** Error message to display */
+    message?: string;
+    /** Alias for message (schema compatibility) */
+    description?: string;
+    onRetry?: () => void;
+    className?: string;
+}
+declare const ErrorState: React__default.FC<ErrorStateProps>;
+
+/**
+ * Accordion Molecule Component
+ *
+ * A collapsible content component with single or multiple open items.
+ * Uses Button, Icon, Typography, and Divider atoms.
+ */
+
+interface AccordionItem {
+    /**
+     * Item ID (auto-generated from header/title if not provided)
+     */
+    id?: string;
+    /**
+     * Item header/title
+     */
+    header?: React__default.ReactNode;
+    /**
+     * Alias for header (pattern compatibility)
+     */
+    title?: React__default.ReactNode;
+    /**
+     * Item content
+     */
+    content: React__default.ReactNode;
+    /**
+     * Disable item
+     */
+    disabled?: boolean;
+    /**
+     * Default open state
+     */
+    defaultOpen?: boolean;
+}
+interface AccordionProps {
+    /**
+     * Accordion items
+     */
+    items: AccordionItem[];
+    /**
+     * Allow multiple items open at once
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Default open items (IDs)
+     */
+    defaultOpenItems?: string[];
+    /**
+     * Default open items by index (pattern compatibility)
+     */
+    defaultOpen?: number[];
+    /**
+     * Controlled open items (IDs)
+     */
+    openItems?: string[];
+    /**
+     * Callback when item opens/closes
+     */
+    onItemToggle?: (itemId: string, isOpen: boolean) => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Accordion: React__default.FC<AccordionProps>;
+
+/**
+ * Alert Molecule Component
+ *
+ * A component for displaying alert messages with different variants and actions.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertProps {
+    /** Alert content (children or message) */
+    children?: React__default.ReactNode;
+    /** Alert message (alias for children) */
+    message?: string;
+    variant?: AlertVariant;
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    onClose?: () => void;
+    actions?: React__default.ReactNode;
+    className?: string;
+}
+declare const Alert: React__default.FC<AlertProps>;
+
+/**
+ * Breadcrumb Molecule Component
+ *
+ * A breadcrumb navigation component with separators and icons.
+ * Uses Button, Icon, and Typography atoms.
+ */
+
+interface BreadcrumbItem {
+    /**
+     * Item label
+     */
+    label: string;
+    /**
+     * Item href (if provided, renders as link)
+     */
+    href?: string;
+    /**
+     * Item path (alias for href, for schema compatibility)
+     */
+    path?: string;
+    /**
+     * Item icon
+     */
+    icon?: LucideIcon;
+    /**
+     * Click handler (if href not provided)
+     */
+    onClick?: () => void;
+    /**
+     * Is current page
+     */
+    isCurrent?: boolean;
+}
+interface BreadcrumbProps {
+    /**
+     * Breadcrumb items
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator icon
+     */
+    separator?: LucideIcon;
+    /**
+     * Maximum items to show (truncates with ellipsis)
+     */
+    maxItems?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
+
+/**
+ * ButtonGroup Molecule Component
+ *
+ * A component for grouping buttons together with connected styling.
+ * Supports both children-based and form-actions pattern (primary/secondary) usage.
+ * Uses Button atoms.
+ */
+
+type ButtonGroupVariant = 'default' | 'segmented' | 'toggle';
+/** Action button config for form-actions pattern */
+interface ActionButton {
+    label: string;
+    /** Action type - 'submit' renders as submit button, others render as button */
+    actionType?: string;
+    event?: string;
+    navigatesTo?: string;
+    /** Button variant - matches Button component variants. Accepts string for schema compatibility. */
+    variant?: string;
+}
+/** Filter definition for filter-group pattern */
+interface FilterDefinition$1 {
+    field: string;
+    label: string;
+    /** Filter type (checkbox, select, etc.) */
+    type?: 'checkbox' | 'select' | 'toggle';
+    /** Options for select filters */
+    options?: readonly string[];
+}
+interface ButtonGroupProps {
+    /**
+     * Button group content (Button components) - use this OR primary/secondary
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Primary action button config (for form-actions pattern)
+     * Accepts Readonly for compatibility with generated const objects
+     */
+    primary?: Readonly<ActionButton>;
+    /**
+     * Secondary action buttons config (for form-actions pattern)
+     * Accepts readonly array for compatibility with generated const arrays
+     */
+    secondary?: readonly Readonly<ActionButton>[];
+    /**
+     * Visual variant
+     * @default 'default'
+     */
+    variant?: ButtonGroupVariant;
+    /**
+     * Orientation
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Entity type for filter-group pattern (schema metadata)
+     */
+    entity?: string;
+    /**
+     * Filter definitions for filter-group pattern
+     */
+    filters?: readonly FilterDefinition$1[];
+}
+declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
+
+/**
+ * FilterGroup Molecule Component
+ *
+ * A component for filtering entity data. Composes atoms (Button, Select, Badge, HStack)
+ * and follows the design system using CSS variables.
+ *
+ * Implements the Closed Circuit principle:
+ * - FilterGroup updates QuerySingleton filters via query prop
+ * - FilterGroup emits UI:FILTER events for trait state machines
+ * - entity-list/entity-cards read filtered data via query prop
+ *
+ * Supports Query Singleton pattern via `query` prop for std/Filter behavior.
+ */
+
+/** Filter definition from schema */
+interface FilterDefinition {
+    field: string;
+    label: string;
+    /** Filter type - 'date' renders a date picker, 'date-range'/'daterange' renders two date pickers */
+    filterType?: "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    /** Alias for filterType (schema compatibility) */
+    type?: "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    /** Options for select/toggle filters */
+    options?: readonly string[];
+}
+interface FilterGroupProps {
+    /** Entity name to filter */
+    entity: string;
+    /** Filter definitions from schema */
+    filters: readonly FilterDefinition[];
+    /** Callback when a filter changes - for EntityStore integration */
+    onFilterChange?: (field: string, value: string | null) => void;
+    /** Callback to clear all filters */
+    onClearAll?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Variant style */
+    variant?: "default" | "compact" | "pills" | "vertical";
+    /** Show filter icon */
+    showIcon?: boolean;
+    /**
+     * Query singleton binding for state management.
+     * When provided, syncs filter state with the query singleton.
+     * Example: "@TaskQuery"
+     */
+    query?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+}
+/**
+ * FilterGroup - Renders filter controls for entity data
+ * Uses atoms: Button, Select, Badge, HStack
+ */
+declare const FilterGroup: React__default.FC<FilterGroupProps>;
+
+interface CardAction {
+    label: string;
+    onClick: () => void;
+    variant?: "default" | "primary" | "danger";
+    icon?: string;
+    disabled?: boolean;
+}
+interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card subtitle or description */
+    subtitle?: string;
+    /** Image URL to display at top of card */
+    image?: string;
+    /** Action buttons to display in card footer */
+    actions?: CardAction[];
+    /** Card content */
+    children?: React__default.ReactNode;
+    /** Click handler for the entire card */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Card component for displaying content in a contained box
+ */
+declare function Card({ title, subtitle, image, actions, children, onClick, className, }: CardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Container Component
+ *
+ * A max-width wrapper that centers content horizontally.
+ * Essential for controlling page width and maintaining consistent margins.
+ */
+
+type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface ContainerProps {
+    /** Maximum width */
+    size?: ContainerSize;
+    /** Alias for size (pattern compatibility) */
+    maxWidth?: ContainerSize;
+    /** Horizontal padding */
+    padding?: ContainerPadding;
+    /** Center horizontally */
+    center?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children?: React__default.ReactNode;
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+}
+/**
+ * Container - Centers and constrains content width
+ */
+declare const Container: React__default.FC<ContainerProps>;
+
+/**
+ * Flex Component
+ *
+ * A flexbox wrapper with all common flex properties exposed as props.
+ * More explicit than Stack for when you need full flex control.
+ */
+
+type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface FlexProps {
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap */
+    wrap?: FlexWrap;
+    /** Align items */
+    align?: FlexAlign;
+    /** Justify content */
+    justify?: FlexJustify;
+    /** Gap between items */
+    gap?: FlexGap;
+    /** Inline flex */
+    inline?: boolean;
+    /** Flex grow */
+    grow?: boolean | number;
+    /** Flex shrink */
+    shrink?: boolean | number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children: React__default.ReactNode;
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+}
+/**
+ * Flex - Full-featured flexbox container
+ */
+declare const Flex: React__default.FC<FlexProps>;
+
+/**
+ * FloatingActionButton Molecule Component
+ *
+ * A floating action button that can expand into multiple actions vertically.
+ * Uses Button atom.
+ */
+
+interface FloatingAction {
+    /**
+     * Action ID
+     */
+    id: string;
+    /**
+     * Action label
+     */
+    label: string;
+    /**
+     * Action icon
+     */
+    icon: LucideIcon;
+    /**
+     * Action click handler
+     */
+    onClick: () => void;
+    /**
+     * Action variant
+     */
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+}
+interface FloatingActionButtonProps {
+    /**
+     * Single action (if only one action, button will directly trigger onClick)
+     */
+    action?: {
+        icon: LucideIcon;
+        onClick: () => void;
+        label?: string;
+        variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+    };
+    /**
+     * Multiple actions (if provided, button will expand to show all actions)
+     */
+    actions?: FloatingAction[];
+    /**
+     * Icon name (simplified API for pattern compatibility)
+     */
+    icon?: string;
+    /**
+     * Click handler (simplified API for pattern compatibility)
+     */
+    onClick?: () => void;
+    /**
+     * Variant (simplified API for pattern compatibility)
+     */
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+    /**
+     * Button position
+     * @default 'bottom-right'
+     */
+    position?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center" | string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const FloatingActionButton: React__default.FC<FloatingActionButtonProps>;
+
+/**
+ * Grid Component
+ *
+ * A CSS Grid wrapper with responsive column support.
+ * Useful for creating multi-column layouts.
+ */
+
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
+type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type GridJustify = 'start' | 'center' | 'end' | 'stretch';
+interface ResponsiveGridCols {
+    /** Base/mobile columns */
+    base?: GridCols;
+    /** Small screens (640px+) */
+    sm?: GridCols;
+    /** Medium screens (768px+) */
+    md?: GridCols;
+    /** Large screens (1024px+) */
+    lg?: GridCols;
+    /** Extra large screens (1280px+) */
+    xl?: GridCols;
+}
+interface GridProps {
+    /** Number of columns (can be responsive object) */
+    cols?: GridCols | ResponsiveGridCols;
+    /** Number of rows */
+    rows?: number;
+    /** Gap between items */
+    gap?: GridGap;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: GridGap;
+    /** Column gap (overrides gap for columns) */
+    colGap?: GridGap;
+    /** Align items on block axis */
+    alignItems?: GridAlign;
+    /** Justify items on inline axis */
+    justifyItems?: GridJustify;
+    /** Auto-flow direction */
+    flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** Children elements */
+    children: React__default.ReactNode;
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+}
+/**
+ * Grid - CSS Grid layout wrapper
+ */
+declare const Grid: React__default.FC<GridProps>;
+
+/**
+ * InputGroup Molecule Component
+ *
+ * A component for grouping input with addons (icons, buttons, text).
+ * Uses Input, Button, Icon, and Typography atoms.
+ */
+
+interface InputGroupProps extends Omit<InputProps, "icon" | "iconRight"> {
+    /**
+     * Left addon (icon, button, or text)
+     */
+    leftAddon?: React__default.ReactNode | LucideIcon;
+    /**
+     * Right addon (icon, button, or text)
+     */
+    rightAddon?: React__default.ReactNode | LucideIcon;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const InputGroup: React__default.FC<InputGroupProps>;
+
+/**
+ * Menu Molecule Component
+ *
+ * A dropdown menu component with items, icons, dividers, and sub-menus.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+interface MenuItem {
+    /** Item ID (auto-generated from label if not provided) */
+    id?: string;
+    /** Item label */
+    label: string;
+    /** Item icon (LucideIcon or string name) */
+    icon?: LucideIcon | string;
+    /** Item badge */
+    badge?: string | number;
+    /** Disable item */
+    disabled?: boolean;
+    /** Item click handler */
+    onClick?: () => void;
+    /** Event name for pattern compatibility */
+    event?: string;
+    /** Variant for styling (pattern compatibility) */
+    variant?: "default" | "danger";
+    /** Sub-menu items */
+    subMenu?: MenuItem[];
+}
+type MenuPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+interface MenuProps {
+    /** Menu trigger element */
+    trigger: React__default.ReactNode;
+    /** Menu items */
+    items: MenuItem[];
+    /** Menu position */
+    position?: MenuPosition;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Menu: React__default.FC<MenuProps>;
+
+/**
+ * Modal Molecule Component
+ *
+ * A modal dialog component with overlay, header, content, and footer.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ModalProps {
+    /** Whether the modal is open (defaults to true when rendered by slot wrapper) */
+    isOpen?: boolean;
+    /** Callback when modal should close (injected by slot wrapper) */
+    onClose?: () => void;
+    title?: string;
+    /** Modal content (can be empty if using slot content) */
+    children?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    size?: ModalSize;
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    className?: string;
+}
+declare const Modal: React__default.FC<ModalProps>;
+
+/**
+ * Pagination Molecule Component
+ *
+ * A pagination component with page numbers, previous/next buttons, and ellipsis.
+ * Uses Button, Icon, Typography, and Input atoms.
+ */
+
+interface PaginationProps {
+    /**
+     * Current page (1-indexed)
+     */
+    currentPage: number;
+    /**
+     * Total number of pages
+     */
+    totalPages: number;
+    /**
+     * Callback when page changes (optional - can be a no-op if not interactive)
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Show page size selector
+     * @default false
+     */
+    showPageSize?: boolean;
+    /**
+     * Page size options
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Current page size
+     */
+    pageSize?: number;
+    /**
+     * Callback when page size changes
+     */
+    onPageSizeChange?: (size: number) => void;
+    /**
+     * Show jump to page input
+     * @default false
+     */
+    showJumpToPage?: boolean;
+    /**
+     * Show total count
+     * @default false
+     */
+    showTotal?: boolean;
+    /**
+     * Total items count
+     */
+    totalItems?: number;
+    /**
+     * Maximum number of page buttons to show
+     * @default 7
+     */
+    maxVisiblePages?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Pagination: React__default.FC<PaginationProps>;
+
+/**
+ * Popover Molecule Component
+ *
+ * A popover component with position variants and click/hover triggers.
+ * Uses Button, Typography, and Icon atoms.
+ */
+
+type PopoverPosition = "top" | "bottom" | "left" | "right";
+type PopoverTrigger = "click" | "hover";
+interface PopoverProps {
+    /**
+     * Popover content
+     */
+    content: React__default.ReactNode;
+    /**
+     * Popover trigger element (ReactElement or ReactNode that will be wrapped in span)
+     */
+    children: React__default.ReactNode;
+    /**
+     * Popover position
+     * @default 'bottom'
+     */
+    position?: PopoverPosition;
+    /**
+     * Trigger type
+     * @default 'click'
+     */
+    trigger?: PopoverTrigger;
+    /**
+     * Show arrow
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Popover: React__default.FC<PopoverProps>;
+
+/**
+ * RelationSelect Molecule Component
+ *
+ * A searchable select component for relation fields.
+ * Allows users to search and select from related entities.
+ *
+ * Composed from: Box, HStack, VStack, Input, Button, Spinner, Typography atoms
+ */
+
+interface RelationOption {
+    /** The value to store (typically the ID) */
+    value: string;
+    /** The display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface RelationSelectProps {
+    /** Current value (ID) */
+    value?: string;
+    /** Callback when value changes */
+    onChange?: (value: string | undefined) => void;
+    /** Available options - accepts readonly for compatibility with generated const arrays */
+    options: readonly RelationOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Error message */
+    error?: string;
+    /** Allow clearing the selection */
+    clearable?: boolean;
+    /** Name attribute for forms */
+    name?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+}
+declare const RelationSelect: React__default.FC<RelationSelectProps>;
+
+/**
+ * SearchInput Molecule Component
+ *
+ * A search input component with icon, clear button, and loading state.
+ * Uses Input, Icon, Button, and Spinner atoms.
+ *
+ * Supports Query Singleton pattern via `query` prop for std/Search behavior.
+ */
+
+interface SearchInputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Search value (controlled mode)
+     */
+    value?: string;
+    /**
+     * Callback when search value changes
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Debounce delay in milliseconds
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Show loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Placeholder text
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Show clear button
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Event name to dispatch on search (schema metadata, wired by trait)
+     * This is metadata used by the trait generator, not by the component.
+     */
+    event?: string;
+    /**
+     * Entity type for context-aware search.
+     * When provided, search events include entity context.
+     */
+    entity?: string;
+    /**
+     * Query singleton binding for state management.
+     * When provided, syncs search state with the query singleton.
+     * Example: "@TaskQuery"
+     */
+    query?: string;
+}
+declare const SearchInput: React__default.FC<SearchInputProps>;
+
+/**
+ * SidePanel Molecule Component
+ *
+ * A side panel that slides in from the right (or left) with header and content.
+ * Uses Button, Typography atoms.
+ */
+
+interface SidePanelProps {
+    /**
+     * Panel title
+     */
+    title: string;
+    /**
+     * Panel content
+     */
+    children: React__default.ReactNode;
+    /**
+     * Is panel open
+     */
+    isOpen: boolean;
+    /**
+     * On close handler
+     */
+    onClose: () => void;
+    /**
+     * Panel width
+     * @default 'w-96'
+     */
+    width?: string;
+    /**
+     * Panel position
+     * @default 'right'
+     */
+    position?: "left" | "right";
+    /**
+     * Show overlay on mobile
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const SidePanel: React__default.FC<SidePanelProps>;
+
+/**
+ * SimpleGrid Component
+ *
+ * A simplified grid that automatically adjusts columns based on available space.
+ * Perfect for card layouts and item collections.
+ */
+
+type SimpleGridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface SimpleGridProps {
+    /** Minimum width of each child (e.g., 200, "200px", "15rem") */
+    minChildWidth?: number | string;
+    /** Maximum number of columns */
+    maxCols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Exact number of columns (disables auto-fit) */
+    cols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Gap between items */
+    gap?: SimpleGridGap;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children: React__default.ReactNode;
+}
+/**
+ * SimpleGrid - Auto-responsive grid layout
+ */
+declare const SimpleGrid: React__default.FC<SimpleGridProps>;
+
+/**
+ * Tabs Molecule Component
+ *
+ * A tabbed interface component with keyboard navigation and badge support.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+interface TabItem {
+    /** Tab ID */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab content - optional for event-driven tabs */
+    content?: React__default.ReactNode;
+    /** Tab icon */
+    icon?: LucideIcon;
+    /** Tab badge */
+    badge?: string | number;
+    /** Disable tab */
+    disabled?: boolean;
+    /** Event to emit when tab is clicked (for trait state machine integration) */
+    event?: string;
+    /** Whether this tab is currently active (for controlled tabs) */
+    active?: boolean;
+}
+interface TabsProps {
+    /** Tab items */
+    items?: TabItem[];
+    /** Tab items (alias for items - used by generated code) */
+    tabs?: TabItem[];
+    /** Default active tab ID */
+    defaultActiveTab?: string;
+    /** Controlled active tab ID */
+    activeTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (tabId: string) => void;
+    /** Tab variant */
+    variant?: 'default' | 'pills' | 'underline';
+    /** Tab orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Tabs: React__default.FC<TabsProps>;
+
+/**
+ * Toast Molecule Component
+ *
+ * A toast notification component with auto-dismiss and action buttons.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+type ToastVariant = "success" | "error" | "info" | "warning";
+interface ToastProps {
+    /** Toast variant */
+    variant?: ToastVariant;
+    /** Toast message */
+    message: string;
+    /** Toast title (optional) */
+    title?: string;
+    /** Auto-dismiss duration in milliseconds (0 = no auto-dismiss) */
+    duration?: number;
+    /** Show dismiss button */
+    dismissible?: boolean;
+    /** Callback when toast is dismissed */
+    onDismiss?: () => void;
+    /** Action button label */
+    actionLabel?: string;
+    /** Action button click handler */
+    onAction?: () => void;
+    /** Badge count (optional) */
+    badge?: string | number;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Toast: React__default.FC<ToastProps>;
+
+/**
+ * Tooltip Molecule Component
+ *
+ * A tooltip component with position variants and delay options.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    /** Tooltip content */
+    content: React__default.ReactNode;
+    /** Tooltip trigger element (ReactElement or ReactNode that will be wrapped in span) */
+    children: React__default.ReactNode;
+    /** Tooltip position */
+    position?: TooltipPosition;
+    /** Show delay in milliseconds */
+    delay?: number;
+    /** Hide delay in milliseconds */
+    hideDelay?: number;
+    /** Show arrow */
+    showArrow?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Tooltip: React__default.FC<TooltipProps>;
+
+/**
+ * Drawer Molecule Component
+ *
+ * A slide-in drawer component for displaying secondary content.
+ * Used by the UI Slot system for render_ui effects targeting the drawer slot.
+ *
+ * Features:
+ * - Left/right positioning
+ * - Configurable width
+ * - Overlay backdrop
+ * - Click-outside to dismiss
+ * - Slide animation
+ * - Escape key to close
+ *
+ * @packageDocumentation
+ */
+
+type DrawerPosition = "left" | "right";
+type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
+interface DrawerProps {
+    /** Whether the drawer is open (defaults to true when rendered by slot wrapper) */
+    isOpen?: boolean;
+    /** Callback when drawer should close (injected by slot wrapper) */
+    onClose?: () => void;
+    /** Drawer title */
+    title?: string;
+    /** Drawer content (can be empty if using slot content) */
+    children?: React__default.ReactNode;
+    /** Footer content */
+    footer?: React__default.ReactNode;
+    /** Position (left or right) */
+    position?: DrawerPosition;
+    /** Width (CSS value or preset size) */
+    width?: string | DrawerSize;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+declare const Drawer: React__default.FC<DrawerProps>;
+
+/**
+ * WizardProgress Component
+ *
+ * Step progress indicator for multi-step wizards.
+ * Shows current step, completed steps, and allows navigation to completed steps.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+/**
+ * Step info needed by WizardProgress.
+ * Compatible with WizardContainer's WizardStep (subset of fields).
+ */
+interface WizardProgressStep {
+    /** Step identifier */
+    id: string;
+    /** Step title */
+    title: string;
+    /** Step description (optional) */
+    description?: string;
+}
+interface WizardProgressProps {
+    /** Step definitions (compatible with WizardContainer's WizardStep) */
+    steps: WizardProgressStep[];
+    /** Current step index (0-based) */
+    currentStep: number;
+    /** Callback when a completed step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Allow clicking on completed steps to navigate back */
+    allowNavigation?: boolean;
+    /** Compact mode (smaller, no titles) */
+    compact?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * WizardProgress - Step progress indicator
+ */
+declare const WizardProgress: React__default.FC<WizardProgressProps>;
+
+/**
+ * WizardNavigation Component
+ *
+ * Navigation buttons for multi-step wizards.
+ * Includes Back, Next, and Complete buttons with proper state handling.
+ *
+ * Emits events via useEventBus for trait integration.
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+interface WizardNavigationProps {
+    /** Current step index (0-based) */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Whether the current step is valid (enables Next/Complete) */
+    isValid?: boolean;
+    /** Show the Back button */
+    showBack?: boolean;
+    /** Show the Next button */
+    showNext?: boolean;
+    /** Show the Complete button (on last step) */
+    showComplete?: boolean;
+    /** Custom label for Back button */
+    backLabel?: string;
+    /** Custom label for Next button */
+    nextLabel?: string;
+    /** Custom label for Complete button */
+    completeLabel?: string;
+    /** Event to emit on Back click */
+    onBack?: string;
+    /** Event to emit on Next click */
+    onNext?: string;
+    /** Event to emit on Complete click */
+    onComplete?: string;
+    /** Direct callback for Back (alternative to event) */
+    onBackClick?: () => void;
+    /** Direct callback for Next (alternative to event) */
+    onNextClick?: () => void;
+    /** Direct callback for Complete (alternative to event) */
+    onCompleteClick?: () => void;
+    /** Compact mode (smaller padding) */
+    compact?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * WizardNavigation - Wizard navigation buttons
+ */
+declare const WizardNavigation: React__default.FC<WizardNavigationProps>;
+
+/**
+ * RepeatableFormSection
+ *
+ * A form section that can be repeated multiple times.
+ * Used for collecting multiple entries (participants, findings, etc.)
+ *
+ * Enhanced with trackAddedInState for inspection audit trails.
+ *
+ * Event Contract:
+ * - Emits: UI:SECTION_ADDED { sectionType, index, addedInState? }
+ * - Emits: UI:SECTION_REMOVED { sectionType, index, itemId }
+ */
+
+interface RepeatableItem {
+    id: string;
+    /** State in which this item was added (for audit trails) */
+    addedInState?: string;
+    /** Timestamp when item was added */
+    addedAt?: string;
+    [key: string]: unknown;
+}
+interface RepeatableFormSectionProps {
+    /** Section type identifier */
+    sectionType: string;
+    /** Section title */
+    title: string;
+    /** Items in the section */
+    items: RepeatableItem[];
+    /** Render function for each item */
+    renderItem: (item: RepeatableItem, index: number) => React__default.ReactNode;
+    /** Minimum items required */
+    minItems?: number;
+    /** Maximum items allowed */
+    maxItems?: number;
+    /** Allow reordering */
+    allowReorder?: boolean;
+    /** Add button label */
+    addLabel?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Add handler */
+    onAdd?: () => void;
+    /** Remove handler */
+    onRemove?: (itemId: string, index: number) => void;
+    /** Reorder handler */
+    onReorder?: (fromIndex: number, toIndex: number) => void;
+    /** Track the state in which items are added (for inspection audit) */
+    trackAddedInState?: boolean;
+    /** Current inspection state (used when trackAddedInState is true) */
+    currentState?: string;
+    /** Show audit metadata (addedInState, addedAt) */
+    showAuditInfo?: boolean;
+}
+declare const RepeatableFormSection: React__default.FC<RepeatableFormSectionProps>;
+
+/**
+ * ViolationAlert
+ *
+ * Displays inspection violations with law references and action types.
+ * Used in inspection forms to show detected compliance violations.
+ *
+ * Action Types:
+ * - measure: Corrective measure required (warning)
+ * - admin: Administrative action (error)
+ * - penalty: Penalty proceedings (error, severe)
+ */
+
+interface ViolationRecord {
+    /** Unique violation identifier */
+    id: string;
+    /** Law reference (e.g., "ZVPOT-1") */
+    law: string;
+    /** Article reference (e.g., "14/1") */
+    article: string;
+    /** Violation message */
+    message: string;
+    /** Action type determines severity */
+    actionType: "measure" | "admin" | "penalty";
+    /** Administrative action reference (e.g., "ZVPOT-1 234/1-4") */
+    adminAction?: string;
+    /** Penalty action reference (e.g., "ZVPOT-1 240/1-9") */
+    penaltyAction?: string;
+    /** Field that triggered this violation */
+    fieldId?: string;
+    /** Tab/form where violation occurred */
+    tabId?: string;
+}
+interface ViolationAlertProps {
+    /** Violation data */
+    violation: ViolationRecord;
+    /** Visual severity (derived from actionType if not specified) */
+    severity?: "warning" | "error";
+    /** Dismissible alert */
+    dismissible?: boolean;
+    /** Dismiss handler */
+    onDismiss?: () => void;
+    /** Navigate to the field that caused violation */
+    onNavigateToField?: (fieldId: string) => void;
+    /** Compact display mode */
+    compact?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ViolationAlert: React__default.FC<ViolationAlertProps>;
+
+/**
+ * FormSectionHeader
+ *
+ * Header component for collapsible form sections.
+ * Provides consistent styling and interaction for section headers.
+ */
+
+interface FormSectionHeaderProps {
+    /** Section title */
+    title: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Whether section is collapsed */
+    isCollapsed?: boolean;
+    /** Toggle collapse handler (makes header clickable) */
+    onToggle?: () => void;
+    /** Badge text (e.g., "3 fields", "Required", "Complete") */
+    badge?: string;
+    /** Badge variant */
+    badgeVariant?: "default" | "primary" | "success" | "warning" | "danger";
+    /** Icon name to show before title */
+    icon?: string;
+    /** Whether section has validation errors */
+    hasErrors?: boolean;
+    /** Whether section is complete */
+    isComplete?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const FormSectionHeader: React__default.FC<FormSectionHeaderProps>;
+
+interface Column<T> {
+    key: keyof T | string;
+    header: string;
+    width?: string;
+    sortable?: boolean;
+    render?: (value: unknown, row: T, index: number) => React__default.ReactNode;
+}
+interface RowAction<T> {
+    label: string;
+    icon?: LucideIcon;
+    onClick: (row: T) => void;
+    variant?: "default" | "danger";
+    show?: (row: T) => boolean;
+    /** Event name for testability (data-event attribute) */
+    event?: string;
+}
+interface DataTableProps<T extends {
+    id: string | number;
+}> {
+    /** Fields to display - accepts string[] or Column[] for unified interface. Alias for columns */
+    fields?: readonly Column<T>[] | readonly string[];
+    /** Columns can be Column objects or simple string field names - accepts readonly for generated const arrays */
+    columns?: readonly Column<T>[] | readonly string[];
+    /** Data array - primary prop for data. Accepts readonly or mutable arrays, and unknown for generated components */
+    data?: readonly T[] | T[] | readonly unknown[] | unknown[] | unknown;
+    /** Entity name for auto-fetch OR data array (backwards compatible) */
+    entity?: string | readonly T[] | T[];
+    /** Item actions from generated code - maps to rowActions */
+    itemActions?: readonly {
+        label: string;
+        event?: string;
+        /** Navigation URL - supports template interpolation like "/products/{{id}}" or "/products/:id" */
+        navigatesTo?: string;
+        /** Action used by generated code - alternative to event */
+        action?: string;
+        /** Placement accepts string for compatibility with generated code */
+        placement?: "row" | "bulk" | string;
+        icon?: LucideIcon;
+        /** Variant accepts all button variants for compatibility */
+        variant?: "default" | "primary" | "secondary" | "ghost" | "danger" | string;
+        /** Click handler from generated code */
+        onClick?: (row: T) => void;
+    }[];
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    emptyIcon?: LucideIcon;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    selectable?: boolean;
+    selectedIds?: readonly (string | number)[];
+    onSelectionChange?: (ids: (string | number)[]) => void;
+    sortBy?: string;
+    sortDirection?: "asc" | "desc";
+    onSort?: (key: string, direction: "asc" | "desc") => void;
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange?: (size: number) => void;
+    };
+    enablePagination?: boolean;
+    /** Items per page for automatic pagination (default: 20) */
+    defaultPageSize?: number;
+    /** Show total count in pagination */
+    showTotal?: boolean;
+    searchable?: boolean;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    searchPlaceholder?: string;
+    onRowClick?: (row: T) => void;
+    rowActions?: readonly RowAction<T>[];
+    bulkActions?: ReadonlyArray<{
+        label: string;
+        icon?: LucideIcon;
+        onClick: (selectedRows: T[]) => void;
+        variant?: "default" | "danger";
+    }>;
+    headerActions?: React__default.ReactNode;
+    /**
+     * Query singleton binding for filter/sort state.
+     * When provided, syncs with the query singleton for filtering and sorting.
+     * Example: "@TaskQuery"
+     */
+    query?: string;
+    className?: string;
+}
+declare function DataTable<T extends {
+    id: string | number;
+}>({ fields, columns, data, entity, itemActions, isLoading, error: externalError, emptyIcon, emptyTitle, emptyDescription, emptyAction, selectable, selectedIds, onSelectionChange, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort, pagination, enablePagination, defaultPageSize, showTotal, searchable, searchValue, onSearch, searchPlaceholder, onRowClick, rowActions: externalRowActions, bulkActions, headerActions, query, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Schema metric definition
+ * Supports both computed metrics (with field) and static metrics (with value)
+ */
+interface MetricDefinition {
+    /** Field name for computed metrics (optional if value is provided) */
+    field?: string;
+    /** Display label */
+    label: string;
+    /** Static value for display (alternative to field-based computation) */
+    value?: string | number;
+    /** Icon name for display */
+    icon?: string;
+    /** Value format (e.g., 'currency', 'percent', 'number') */
+    format?: "currency" | "percent" | "number" | string;
+}
+interface StatCardProps {
+    /** Main label */
+    label?: string;
+    /** Title (alias for label) */
+    title?: string;
+    /** Primary value - accepts array/unknown from generated code (will use first element or length) */
+    value?: string | number | (string | number | undefined)[] | unknown;
+    /** Previous value for comparison */
+    previousValue?: number;
+    /** Current value as number for trend calculation */
+    currentValue?: number;
+    /** Manual trend percentage (overrides calculation) */
+    trend?: number;
+    /** Trend direction (overrides calculation) */
+    trendDirection?: "up" | "down" | "neutral";
+    /** Whether up is good (green) or bad (red) */
+    invertTrend?: boolean;
+    /** Icon to display */
+    icon?: LucideIcon;
+    /** Icon background color */
+    iconBg?: string;
+    /** Icon color */
+    iconColor?: string;
+    /** Subtitle or description */
+    subtitle?: string;
+    /** Action button */
+    action?: {
+        label: string;
+        /** Event to dispatch via event bus (for trait state machine integration) */
+        event?: string;
+        /** Navigation URL - supports template interpolation */
+        navigatesTo?: string;
+        /** Legacy onClick callback */
+        onClick?: () => void;
+    };
+    className?: string;
+    /** Entity name for schema-driven stats */
+    entity?: string;
+    /** Metrics to display (schema format) - accepts readonly for compatibility with generated const arrays */
+    metrics?: readonly MetricDefinition[];
+    /** Data to calculate stats from - accepts readonly for compatibility with generated const arrays */
+    data?: readonly Record<string, unknown>[];
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+}
+declare const StatCard: React__default.FC<StatCardProps>;
+
+interface PageBreadcrumb {
+    label: string;
+    href?: string;
+}
+/**
+ * Schema-based action definition
+ */
+interface SchemaAction {
+    label: string;
+    /** Navigate to URL when clicked */
+    navigatesTo?: string;
+    /** Custom click handler */
+    onClick?: () => void;
+    /** Event to dispatch via event bus (for trait state machine integration) */
+    event?: string;
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    icon?: LucideIcon;
+    loading?: boolean;
+    disabled?: boolean;
+}
+interface PageHeaderProps {
+    /** Page title - accepts unknown to handle generated code accessing dynamic entity data */
+    title?: string | number | unknown;
+    /** Optional subtitle/description */
+    subtitle?: string | number | unknown;
+    /** Show back button */
+    showBack?: boolean;
+    /** Event to emit when back is clicked (default: BACK) */
+    backEvent?: string;
+    /** Breadcrumbs */
+    breadcrumbs?: readonly PageBreadcrumb[];
+    /** Status badge */
+    status?: {
+        label: string;
+        variant?: "default" | "success" | "warning" | "danger" | "info";
+    };
+    /** Actions array - first action with variant='primary' (or first action) is the main action */
+    actions?: readonly Readonly<SchemaAction>[];
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Tabs for sub-navigation */
+    tabs?: ReadonlyArray<{
+        label: string;
+        value: string;
+        count?: number;
+    }>;
+    activeTab?: string;
+    onTabChange?: (value: string) => void;
+    /** Custom content in the header */
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare const PageHeader: React__default.FC<PageHeaderProps>;
+
+/**
+ * DetailPanel Organism Component
+ *
+ * Composes atoms and molecules to create a professional detail view.
+ *
+ * When `entity` prop is provided without `data`, automatically fetches data
+ * using the useEntityDetail hook with ID from URL params.
+ */
+
+interface DetailField {
+    label: string;
+    value: React__default.ReactNode;
+    icon?: LucideIcon;
+    copyable?: boolean;
+}
+interface DetailSection {
+    title: string;
+    fields: DetailField[];
+}
+/**
+ * Action definition for DetailPanel
+ */
+interface DetailPanelAction {
+    label: string;
+    icon?: LucideIcon;
+    onClick?: () => void;
+    /** Event to emit via event bus */
+    event?: string;
+    /** Navigation URL */
+    navigatesTo?: string;
+    /** Button variant (primary for main action, others for secondary) */
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+}
+/**
+ * Field definition for unified interface - can be a simple string or object
+ */
+type FieldDef$2 = string | {
+    key: string;
+    header?: string;
+};
+interface DetailPanelProps {
+    title?: string;
+    subtitle?: string;
+    status?: {
+        label: string;
+        variant?: "default" | "success" | "warning" | "danger" | "info";
+    };
+    avatar?: React__default.ReactNode;
+    sections?: readonly DetailSection[];
+    /** Unified actions array - first action with variant='primary' is the main action */
+    actions?: readonly DetailPanelAction[];
+    footer?: React__default.ReactNode;
+    slideOver?: boolean;
+    onClose?: () => void;
+    className?: string;
+    entity?: string;
+    /** Fields to display - accepts string[] or {key, header}[] for unified interface */
+    fields?: readonly FieldDef$2[] | readonly DetailField[];
+    /** Alias for fields - backwards compatibility */
+    fieldNames?: readonly string[];
+    data?: Record<string, unknown> | unknown;
+    isLoading?: boolean;
+    error?: Error | null;
+    /** Panel position (for drawer/sidebar placement) */
+    position?: "left" | "right";
+    /** Panel width (CSS value, e.g., '400px', '50%') */
+    width?: string;
+}
+declare const DetailPanel: React__default.FC<DetailPanelProps>;
+
+interface FormSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Form fields */
+    children: React__default.ReactNode;
+    /** Collapsible */
+    collapsible?: boolean;
+    /** Default collapsed state */
+    defaultCollapsed?: boolean;
+    /** Use card wrapper */
+    card?: boolean;
+    /** Grid columns for fields */
+    columns?: 1 | 2 | 3;
+    className?: string;
+}
+declare const FormSection$1: React__default.FC<FormSectionProps>;
+/**
+ * Form layout with multiple sections
+ */
+interface FormLayoutProps {
+    children: React__default.ReactNode;
+    /** Show section dividers */
+    dividers?: boolean;
+    className?: string;
+}
+declare const FormLayout: React__default.FC<FormLayoutProps>;
+/**
+ * Form actions bar (submit/cancel buttons)
+ */
+interface FormActionsProps {
+    children: React__default.ReactNode;
+    /** Sticky at bottom */
+    sticky?: boolean;
+    /** Alignment */
+    align?: "left" | "right" | "between" | "center";
+    className?: string;
+}
+declare const FormActions: React__default.FC<FormActionsProps>;
+
+/**
+ * Form Organism Component
+ *
+ * A form container component with submit/reset handling.
+ * Supports both children-based and schema-based form generation.
+ * Renders correct input types based on field definitions including relations.
+ *
+ * Extended for inspection forms with:
+ * - Conditional field visibility via S-expressions
+ * - Hidden calculations that emit GLOBAL_VARIABLE_SET events
+ * - Violation triggers that emit VIOLATION_DETECTED events
+ * - Nested sections with collapsible support
+ */
+
+/**
+ * S-Expression type for conditional logic (re-export from @orbital/shared)
+ */
+type SExpression = SExpr;
+/**
+ * Form-specific evaluation context
+ */
+interface FormEvaluationContext {
+    formValues: Record<string, unknown>;
+    globalVariables: Record<string, unknown>;
+    localVariables?: Record<string, unknown>;
+    entity?: Record<string, unknown>;
+}
+/**
+ * Hidden calculation definition
+ */
+interface HiddenCalculation {
+    variableName: string;
+    expression: SExpression;
+    triggerFields: string[];
+}
+/**
+ * Violation definition
+ */
+interface ViolationDefinition {
+    law: string;
+    article: string;
+    actionType: "measure" | "admin" | "penalty";
+    message: string;
+}
+/**
+ * Violation trigger definition
+ */
+interface ViolationTrigger {
+    condition: SExpression;
+    violation: ViolationDefinition;
+    fieldId?: string;
+}
+/**
+ * Form section definition for nested sections
+ */
+interface FormSection {
+    id: string;
+    title: string;
+    condition?: SExpression;
+    fields: SchemaField[];
+    collapsible?: boolean;
+}
+/**
+ * Relation configuration for foreign key fields
+ */
+interface RelationConfig {
+    /** Target entity name (e.g., 'User', 'Project') */
+    entity: string;
+    /** Field on target entity to display (defaults to 'name') */
+    displayField?: string;
+    /** Cardinality: one-to-one or one-to-many */
+    cardinality?: "one" | "many";
+}
+/**
+ * Schema field definition
+ * Supports both 'name' and 'field' for compatibility with different schema formats
+ */
+interface SchemaField {
+    /** Field name (primary) */
+    name?: string;
+    /** Field name (alias for compatibility) */
+    field?: string;
+    /** Display label */
+    label?: string;
+    /** Field type (string, number, email, date, boolean, enum, relation, etc.) */
+    type?: string;
+    /** Input type for rendering (text, select, textarea, checkbox, etc.) */
+    inputType?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether field is required */
+    required?: boolean;
+    /** Default value */
+    defaultValue?: unknown;
+    /** Options for select/enum fields - accepts readonly for generated const arrays */
+    options?: readonly SelectOption[];
+    /** Enum values (alternative to options, just strings) - accepts readonly for generated const arrays */
+    values?: readonly string[];
+    /** Relation configuration for foreign key references */
+    relation?: RelationConfig;
+    /** Minimum value (for number) or length (for string) */
+    min?: number;
+    /** Maximum value or length */
+    max?: number;
+    /** Pattern for validation */
+    pattern?: string;
+    /** Validation rules */
+    validation?: Record<string, unknown>;
+    /** Whether field is readonly (displays value but cannot edit) */
+    readonly?: boolean;
+    /** Whether field is disabled (alternative to readonly for compatibility) */
+    disabled?: boolean;
+}
+interface FormProps extends Omit<React__default.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    /** Form fields (traditional React children) */
+    children?: React__default.ReactNode;
+    /** Submit handler - receives form data, or event name string for trait dispatch */
+    onSubmit?: ((e: React__default.FormEvent<HTMLFormElement>, data?: Record<string, unknown>) => void) | string;
+    /** Cancel handler - function or event name string for trait dispatch */
+    onCancel?: (() => void) | string;
+    /** Form layout */
+    layout?: "vertical" | "horizontal" | "inline";
+    /** Gap between fields */
+    gap?: "sm" | "md" | "lg";
+    /** Additional CSS classes */
+    className?: string;
+    /** Entity type name (schema format) */
+    entity?: string;
+    /** Form mode - 'create' for new records, 'edit' for updating existing */
+    mode?: "create" | "edit";
+    /** Fields definition (schema format) - accepts readonly for generated const arrays */
+    fields?: readonly Readonly<SchemaField>[];
+    /** Initial form data */
+    initialData?: Record<string, unknown> | unknown;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Cancel button label (if provided, shows cancel button) */
+    cancelLabel?: string;
+    /** Show cancel button (defaults to true for schema forms) */
+    showCancel?: boolean;
+    /** Form title (used by ModalSlot to extract title) */
+    title?: string;
+    /** Event to dispatch on successful submit (defaults to 'SAVE') */
+    submitEvent?: string;
+    /** Event to dispatch on cancel (defaults to 'CANCEL') */
+    cancelEvent?: string;
+    /** Data for relation fields: { fieldName: RelationOption[] } */
+    relationsData?: Record<string, readonly RelationOption[]>;
+    /** Loading state for relation data: { fieldName: boolean } */
+    relationsLoading?: Record<string, boolean>;
+    /** Map of fieldId → S-expression condition for conditional field display (boolean true means enabled but config loaded separately) */
+    conditionalFields?: Record<string, SExpression> | boolean;
+    /** Hidden calculations that emit GLOBAL_VARIABLE_SET on field change (boolean true means enabled but config loaded separately) */
+    hiddenCalculations?: HiddenCalculation[] | boolean;
+    /** Violation conditions that emit VIOLATION_DETECTED when met (boolean true means enabled but config loaded separately) */
+    violationTriggers?: ViolationTrigger[] | boolean;
+    /** Context for S-expression evaluation - accepts flexible types from generated code */
+    evaluationContext?: FormEvaluationContext | Record<string, unknown>;
+    /** Nested form sections with optional conditions */
+    sections?: FormSection[];
+    /** Callback when any field value changes */
+    onFieldChange?: (change: {
+        fieldId: string;
+        value: unknown;
+        formValues: Record<string, unknown>;
+    }) => void;
+    /** Config path for form configuration (schema-driven) */
+    configPath?: string;
+    /** Whether the form supports repeatable entries */
+    repeatable?: boolean;
+}
+declare const Form: React__default.FC<FormProps>;
+
+/**
+ * Header Organism Component
+ *
+ * A header component for mobile/responsive layouts with menu toggle, brand, and user avatar.
+ * Styled to match the main Layout component's mobile header.
+ */
+
+interface HeaderProps {
+    /**
+     * Logo/Brand content
+     */
+    logo?: React__default.ReactNode;
+    /**
+     * Logo image source
+     */
+    logoSrc?: string;
+    /**
+     * Brand/App name
+     */
+    brandName?: string;
+    /**
+     * Navigation items (for desktop header variant)
+     */
+    navigationItems?: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: LucideIcon;
+        badge?: string | number;
+        active?: boolean;
+    }>;
+    /**
+     * Show menu toggle button
+     * @default true
+     */
+    showMenuToggle?: boolean;
+    /**
+     * Is menu open (for toggle icon)
+     */
+    isMenuOpen?: boolean;
+    /**
+     * Menu toggle callback
+     */
+    onMenuToggle?: () => void;
+    /**
+     * Show search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search callback
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * User avatar configuration
+     */
+    userAvatar?: {
+        src?: string;
+        alt?: string;
+        initials?: string;
+    };
+    /**
+     * User name (display name or email)
+     */
+    userName?: string;
+    /**
+     * Callback when user avatar is clicked
+     */
+    onUserClick?: () => void;
+    /**
+     * Action buttons (right side)
+     */
+    actions?: React__default.ReactNode;
+    /**
+     * Sticky header
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Variant - mobile shows menu toggle, desktop shows full nav
+     * @default 'mobile'
+     */
+    variant?: "mobile" | "desktop";
+    /**
+     * Callback when logo/brand is clicked
+     */
+    onLogoClick?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Header: React__default.FC<HeaderProps>;
+
+/**
+ * Navigation Organism Component
+ *
+ * A navigation component with items, active indicators, icons, and badges.
+ * Uses Menu, ButtonGroup molecules and Button, Icon, Badge, Typography, Divider atoms.
+ */
+
+interface NavigationItem {
+    /**
+     * Item ID
+     */
+    id: string;
+    /**
+     * Item label
+     */
+    label: string;
+    /**
+     * Item icon
+     */
+    icon?: LucideIcon;
+    /**
+     * Item badge
+     */
+    badge?: string | number;
+    /**
+     * Item href
+     */
+    href?: string;
+    /**
+     * Item click handler
+     */
+    onClick?: () => void;
+    /**
+     * Is active
+     */
+    isActive?: boolean;
+    /**
+     * Disable item
+     */
+    disabled?: boolean;
+    /**
+     * Sub-menu items
+     */
+    subMenu?: NavigationItem[];
+}
+interface NavigationProps {
+    /**
+     * Navigation items
+     */
+    items: NavigationItem[];
+    /**
+     * Navigation orientation
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Navigation: React__default.FC<NavigationProps>;
+
+/**
+ * Section Component
+ *
+ * A semantic section wrapper with optional title, description, and action.
+ * Perfect for grouping related content with consistent spacing.
+ */
+
+type SectionPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type SectionVariant = 'default' | 'card' | 'bordered' | 'filled';
+interface SectionProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle/description */
+    description?: string;
+    /** Action element (e.g., button, link) */
+    action?: React__default.ReactNode;
+    /** Padding amount */
+    padding?: SectionPadding;
+    /** Visual variant */
+    variant?: SectionVariant;
+    /** Show divider below header */
+    divider?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children: React__default.ReactNode;
+    /** Header custom class name */
+    headerClassName?: string;
+    /** Content custom class name */
+    contentClassName?: string;
+    /** HTML element to render as */
+    as?: React__default.ElementType;
+}
+/**
+ * Section - Semantic content grouping with header
+ */
+declare const Section: React__default.FC<SectionProps>;
+
+/**
+ * Sidebar Organism Component
+ *
+ * A sidebar component with logo, navigation items, user section, and collapse/expand.
+ * Styled to match the main Layout component with theme-aware CSS variables.
+ */
+
+interface SidebarItem {
+    /** Item ID */
+    id: string;
+    /** Item label */
+    label: string;
+    /** Item icon */
+    icon?: LucideIcon;
+    /** Item badge */
+    badge?: string | number;
+    /** Item href */
+    href?: string;
+    /** Item click handler */
+    onClick?: () => void;
+    /** Is active */
+    active?: boolean;
+    /** @deprecated Use `active` instead */
+    isActive?: boolean;
+    /** Sub-items (for nested navigation) */
+    subItems?: SidebarItem[];
+}
+interface SidebarProps {
+    /** Logo/Brand content - can be a ReactNode or logo config */
+    logo?: React__default.ReactNode;
+    /** Logo image source */
+    logoSrc?: string;
+    /** Brand/App name */
+    brandName?: string;
+    /** Navigation items */
+    items: SidebarItem[];
+    /** User section content */
+    userSection?: React__default.ReactNode;
+    /** Footer content (e.g., theme toggle) */
+    footerContent?: React__default.ReactNode;
+    /** Collapsed state (controlled) */
+    collapsed?: boolean;
+    /** Default collapsed state */
+    defaultCollapsed?: boolean;
+    /** Callback when collapse state changes */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /** Hide the collapse/expand button */
+    hideCollapseButton?: boolean;
+    /** Show a close button (for mobile) */
+    showCloseButton?: boolean;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Callback when logo/brand is clicked */
+    onLogoClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Sidebar: React__default.FC<SidebarProps>;
+
+/**
+ * Split Component
+ *
+ * A two-column layout with configurable ratios.
+ * Perfect for sidebar/content layouts or side-by-side comparisons.
+ */
+
+type SplitRatio = '1:1' | '1:2' | '2:1' | '1:3' | '3:1' | '1:4' | '4:1' | '2:3' | '3:2';
+type SplitGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface SplitProps {
+    /** Size ratio between left and right panels */
+    ratio?: SplitRatio;
+    /** Gap between panels */
+    gap?: SplitGap;
+    /** Reverse the order (right first) */
+    reverse?: boolean;
+    /** Stack vertically on mobile */
+    stackOnMobile?: boolean;
+    /** Breakpoint to switch from stacked to side-by-side */
+    stackBreakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Align items vertically */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Custom class name */
+    className?: string;
+    /** Left/first panel class name */
+    leftClassName?: string;
+    /** Right/second panel class name */
+    rightClassName?: string;
+    /** Exactly two children: [left, right] */
+    children: [React__default.ReactNode, React__default.ReactNode];
+}
+/**
+ * Split - Two-column layout with flexible ratios
+ */
+declare const Split: React__default.FC<SplitProps>;
+
+type SortDirection = "asc" | "desc" | null;
+interface TableColumn<T = any> {
+    /**
+     * Column key
+     */
+    key: string;
+    /**
+     * Column header label
+     */
+    label: string;
+    /**
+     * Sortable column
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Custom cell renderer
+     */
+    render?: (value: any, row: T, index: number) => React__default.ReactNode;
+    /**
+     * Column width
+     */
+    width?: string;
+}
+interface TableProps<T = any> {
+    /**
+     * Table columns
+     */
+    columns: TableColumn<T>[];
+    /**
+     * Table entity data
+     */
+    entity: T[];
+    /**
+     * Row key getter
+     */
+    getRowKey: (row: T, index: number) => string;
+    /**
+     * Enable row selection
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Selected row keys
+     */
+    selectedRows?: string[];
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedKeys: string[]) => void;
+    /**
+     * Enable sorting
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Current sort column
+     */
+    sortColumn?: string;
+    /**
+     * Current sort direction
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Callback when sort changes
+     */
+    onSortChange?: (column: string, direction: SortDirection) => void;
+    /**
+     * Enable search/filter
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Enable pagination
+     * @default false
+     */
+    paginated?: boolean;
+    /**
+     * Current page
+     */
+    currentPage?: number;
+    /**
+     * Total pages
+     */
+    totalPages?: number;
+    /**
+     * Callback when page changes
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Row actions menu items
+     */
+    rowActions?: (row: T) => MenuItem[];
+    /**
+     * Empty state message
+     */
+    emptyMessage?: string;
+    /**
+     * Loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Table: {
+    <T extends Record<string, any>>({ columns, entity, getRowKey, selectable, selectedRows, onSelectionChange, sortable, sortColumn, sortDirection, onSortChange, searchable, searchPlaceholder, paginated, currentPage, totalPages, onPageChange, rowActions, emptyMessage, loading, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * List Organism Component
+ *
+ * A beautifully designed, scannable list view.
+ *
+ * Design inspiration: Linear, Notion, Apple Reminders
+ * - Soft, harmonious color palette
+ * - Refined typography with proper hierarchy
+ * - Subtle shadows and depth
+ * - Delightful hover micro-interactions
+ * - Elegant status indicators
+ *
+ * Orbital Component Interface Compliance:
+ * - Entity binding with auto-fetch when entity is a string
+ * - Event emission via useEventBus (UI:* events)
+ * - Event listening for UI:SEARCH and UI:CLEAR_SEARCH
+ * - isLoading and error state props
+ */
+
+interface ListItem {
+    id: string;
+    title?: string;
+    description?: string;
+    icon?: LucideIcon;
+    avatar?: {
+        src?: string;
+        alt?: string;
+        initials?: string;
+    };
+    badge?: string | number;
+    metadata?: React__default.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    completed?: boolean;
+    [key: string]: unknown;
+    _fields?: Record<string, unknown>;
+}
+interface SchemaItemAction {
+    label: string;
+    /** Event to dispatch on click */
+    event?: string;
+    navigatesTo?: string;
+    /** Action placement - accepts all common placement values */
+    placement?: "row" | "bulk" | "card" | "footer" | string;
+    action?: string;
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "default";
+    /** Click handler from generated code */
+    onClick?: (row: unknown) => void;
+}
+/**
+ * Field definition - can be a simple string or object with key/header
+ */
+type FieldDef$1 = string | {
+    key: string;
+    header?: string;
+};
+interface ListProps {
+    /** Entity name for auto-fetch OR data array (backwards compatible) */
+    entity?: ListItem[] | readonly {
+        id: string;
+    }[] | readonly unknown[] | string;
+    /** Data array - primary prop for data */
+    data?: ListItem[] | readonly {
+        id: string;
+    }[] | readonly unknown[] | unknown;
+    /** Entity type name for display */
+    type?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    selectable?: boolean;
+    selectedItems?: readonly string[];
+    onSelectionChange?: (selectedIds: string[]) => void;
+    /** Item actions - schema-driven or function-based */
+    itemActions?: ((item: ListItem) => MenuItem[]) | readonly SchemaItemAction[];
+    showDividers?: boolean;
+    variant?: "default" | "card";
+    emptyMessage?: string;
+    className?: string;
+    renderItem?: (item: ListItem, index: number) => React__default.ReactNode;
+    children?: React__default.ReactNode;
+    onItemAction?: (action: string, item: ListItem, index: number) => void;
+    onRowClick?: (item: ListItem) => void;
+    /** Fields to display - accepts string[] or {key, header}[] for unified interface */
+    fields?: readonly FieldDef$1[];
+    /** Alias for fields - backwards compatibility */
+    fieldNames?: readonly string[];
+    /**
+     * Query singleton binding for filter/sort state.
+     * When provided, syncs with the query singleton for filtering and sorting.
+     * Example: "@TaskQuery"
+     */
+    query?: string;
+}
+declare const List: React__default.FC<ListProps>;
+
+/**
+ * CardGrid Component
+ *
+ * A responsive grid specifically designed for card layouts.
+ * Uses CSS Grid auto-fit for automatic responsive columns.
+ *
+ * When `entity` prop is provided without `data`, automatically fetches data
+ * using the useEntityList hook. Supports server-side pagination and search.
+ */
+
+type CardGridGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Action configuration for card items (schema-driven)
+ */
+interface CardItemAction {
+    /** Action button label */
+    label: string;
+    /** Event to dispatch on click (schema metadata) */
+    event?: string;
+    /** Navigation URL - supports template interpolation like "/products/{{row.id}}" */
+    navigatesTo?: string;
+    /** Callback on click */
+    onClick?: (item: unknown) => void;
+    /** Action used by generated code - alternative to event */
+    action?: string;
+    /** Action placement - accepts string for compatibility with generated code */
+    placement?: 'card' | 'footer' | 'row' | string;
+    /** Button variant - accepts string for compatibility with generated code */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | string;
+}
+/**
+ * Field definition - can be a simple string or object with key/header
+ */
+type FieldDef = string | {
+    key: string;
+    header?: string;
+};
+interface CardGridProps {
+    /** Minimum width of each card (default: 280px) */
+    minCardWidth?: number;
+    /** Maximum number of columns */
+    maxCols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Gap between cards */
+    gap?: CardGridGap;
+    /** Align cards vertically in their cells */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Custom class name */
+    className?: string;
+    /** Children elements (cards) - optional when using entity/data props */
+    children?: React__default.ReactNode;
+    /** Entity type for data-bound usage */
+    entity?: string;
+    /** Fields to display - accepts string[] or {key, header}[] for unified interface */
+    fields?: readonly FieldDef[];
+    /** Alias for fields - backwards compatibility */
+    fieldNames?: readonly string[];
+    /** Alias for fields - backwards compatibility */
+    columns?: readonly FieldDef[];
+    /** Data array for data-bound usage - accepts readonly for generated const arrays */
+    data?: readonly unknown[] | unknown;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Actions for each card item (schema-driven) */
+    itemActions?: readonly CardItemAction[];
+    /** Callback when a card is clicked */
+    onCardClick?: (item: unknown) => void;
+    /** Enable server-side pagination */
+    enablePagination?: boolean;
+    /** Items per page (default: 20) */
+    pageSize?: number;
+    /** Show total count in pagination */
+    showTotal?: boolean;
+    /** Filter configuration for entity data */
+    filter?: {
+        field: string;
+        value?: string;
+    };
+    /**
+     * Query singleton binding for filter/sort state.
+     * When provided, syncs with the query singleton for filtering and sorting.
+     * Example: "@TaskQuery"
+     */
+    query?: string;
+}
+/**
+ * CardGrid - Responsive card collection layout
+ *
+ * Can be used in two ways:
+ * 1. With children: <CardGrid><Card>...</Card></CardGrid>
+ * 2. With data: <CardGrid entity="Task" fieldNames={['title']} data={tasks} />
+ *
+ * Supports server-side pagination when enablePagination is true.
+ */
+declare const CardGrid: React__default.FC<CardGridProps>;
+
+/**
+ * MasterDetail Component
+ *
+ * A layout pattern that shows a list/table of entities.
+ * This is a thin wrapper around DataTable that accepts master-detail specific props.
+ *
+ * When `entity` prop is provided without `data`, automatically fetches data
+ * using the useEntityList hook.
+ *
+ * The "detail" part is typically rendered separately via another render_ui effect
+ * to a sidebar or detail panel when an item is selected.
+ */
+
+interface MasterDetailProps<T extends {
+    id: string | number;
+} = {
+    id: string | number;
+}> {
+    /** Entity type name - when provided without data, auto-fetches from API */
+    entity?: string;
+    /** Fields to show in the master list (maps to DataTable columns) */
+    masterFields?: readonly string[];
+    /** Fields for detail view (passed through but typically handled by separate render_ui) */
+    detailFields?: readonly string[];
+    /** Data array - if not provided and entity is set, data is auto-fetched */
+    data?: readonly T[] | T[];
+    /** Loading state */
+    loading?: boolean;
+    /** Loading state alias */
+    isLoading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Row click handler */
+    onRowClick?: (row: T) => void;
+    /** Selection change handler */
+    onSelectionChange?: (ids: (string | number)[]) => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function MasterDetail<T extends {
+    id: string | number;
+}>({ entity, masterFields, detailFields: _detailFields, // Captured but not used here - detail handled separately
+data: externalData, loading: externalLoading, isLoading: externalIsLoading, error: externalError, onRowClick, onSelectionChange, className, ...rest }: MasterDetailProps<T>): React__default.ReactElement;
+declare namespace MasterDetail {
+    var displayName: string;
+}
+
+/**
+ * ConfirmDialog Component
+ *
+ * Confirmation dialog for destructive or important actions.
+ * Composes Modal molecule with Button atoms.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+type ConfirmDialogVariant = "danger" | "warning" | "info" | "default";
+interface ConfirmDialogProps {
+    /** Whether the dialog is open (defaults to true when rendered by slot wrapper) */
+    isOpen?: boolean;
+    /** Callback when dialog is closed (injected by slot wrapper) */
+    onClose?: () => void;
+    /** Callback when action is confirmed (injected by slot wrapper) */
+    onConfirm?: () => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog message/description */
+    message?: string | React__default.ReactNode;
+    /** Alias for message (schema compatibility) */
+    description?: string | React__default.ReactNode;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Alias for confirmText (schema compatibility) */
+    confirmLabel?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Alias for cancelText (schema compatibility) */
+    cancelLabel?: string;
+    /** Dialog variant */
+    variant?: ConfirmDialogVariant;
+    /** Dialog size */
+    size?: ModalSize;
+    /** Loading state for confirm button */
+    isLoading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ConfirmDialog - Confirmation dialog for important actions
+ */
+declare const ConfirmDialog: React__default.FC<ConfirmDialogProps>;
+
+/**
+ * WizardContainer Component
+ *
+ * Multi-step wizard pattern with progress indicator.
+ * Composes Box, Typography, and Button atoms.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+/** Form field definition for wizard sections */
+interface WizardField {
+    id: string;
+    type: string;
+    label?: string;
+    required?: boolean;
+    repeatable?: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+        isDefault?: boolean;
+    }>;
+    defaultValue?: unknown;
+    condition?: unknown[];
+    placeholder?: string;
+    entityField?: string;
+    minLength?: number;
+    maxLength?: number;
+    dataSource?: Record<string, unknown>;
+    displayFields?: string[];
+    searchConfig?: Record<string, unknown>;
+    hiddenCalculations?: Array<{
+        variable: string;
+        expression: unknown;
+        scope?: string;
+    }>;
+    signatureConfig?: Record<string, unknown>;
+    displayTemplate?: Record<string, unknown>;
+    lawReference?: Record<string, unknown>;
+    contextMenu?: string[];
+    calculated?: Record<string, unknown>;
+    readOnly?: boolean;
+    minDate?: unknown;
+    stats?: Array<{
+        label: string;
+        value: unknown;
+        icon?: string;
+    }>;
+    items?: Array<{
+        id: string;
+        label: string;
+        autoCheck?: unknown;
+    }>;
+    [key: string]: unknown;
+}
+/** Section within a wizard step */
+interface WizardSection {
+    id: string;
+    title?: string;
+    description?: string;
+    fields?: WizardField[];
+    subsections?: WizardSection[];
+    condition?: unknown[];
+    repeatable?: boolean;
+    minItems?: number;
+    addButtonLabel?: string;
+    hiddenCalculations?: Array<{
+        variable: string;
+        expression: unknown;
+        scope?: string;
+    }>;
+    dataSource?: Record<string, unknown>;
+    readOnly?: boolean;
+    [key: string]: unknown;
+}
+/** Entity mapping configuration */
+interface WizardEntityMapping {
+    entity: string;
+    mode: "search_or_create" | "create_multiple" | "select_one" | "update" | string;
+    parentField?: string;
+    idField?: string;
+    [key: string]: unknown;
+}
+/** Validation rule for wizard steps */
+interface WizardValidationRule {
+    condition: unknown[];
+    message: string;
+}
+/** Law reference for compliance */
+interface WizardLawReference {
+    law: string;
+    article: string;
+    description?: string;
+}
+interface WizardStep {
+    /** Step identifier */
+    id?: string;
+    /** Tab identifier (schema-driven) */
+    tabId?: string;
+    /** Step title */
+    title?: string;
+    /** Step name (schema-driven, used as title if title not provided) */
+    name?: string;
+    /** Step description (optional) */
+    description?: string;
+    /** Step content (React component mode) */
+    content?: React__default.ReactNode;
+    /** Whether this step can be skipped */
+    optional?: boolean;
+    /** Custom validation for this step */
+    isValid?: () => boolean;
+    /** Form sections within this step */
+    sections?: WizardSection[];
+    /** Global variables required before entering this step */
+    globalVariablesRequired?: string[];
+    /** Global variables set by this step */
+    globalVariablesSet?: string[];
+    /** Local variables scoped to this step */
+    localVariables?: string[];
+    /** Entity mapping configuration */
+    entityMapping?: WizardEntityMapping;
+    /** Validation rules for this step */
+    validationRules?: WizardValidationRule[];
+    /** Law references for compliance */
+    lawReferences?: WizardLawReference[];
+    /** Phase of the inspection process */
+    phase?: string;
+    /** Context menu actions */
+    contextMenu?: string[];
+    /** Allow additional properties from schema */
+    [key: string]: unknown;
+}
+interface WizardContainerProps {
+    /** Wizard steps */
+    steps: WizardStep[];
+    /** Current step index (controlled) - accepts unknown for generated code compatibility */
+    currentStep?: number | string | unknown;
+    /** Callback when step changes */
+    onStepChange?: (stepIndex: number) => void;
+    /** Callback when wizard is completed */
+    onComplete?: () => void;
+    /** Show progress indicator */
+    showProgress?: boolean;
+    /** Allow navigation to previous steps */
+    allowBack?: boolean;
+    /** Modal mode (compact header, no padding) */
+    compact?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Entity type name (schema-driven) */
+    entity?: string;
+}
+/**
+ * WizardContainer - Multi-step wizard
+ */
+declare const WizardContainer: React__default.FC<WizardContainerProps>;
+
+/**
+ * OrbitalVisualization Component
+ *
+ * Visualizes KFlow schemas as atomic orbitals based on complexity.
+ * Uses CSS 3D transforms for lightweight rendering without Three.js.
+ *
+ * Orbital Types (based on complexity score):
+ * - 1s (1-3): Simple sphere - Red
+ * - 2s (4-8): Larger sphere - Orange
+ * - 2p (9-15): Dumbbell shape - Yellow
+ * - 3s (16-25): Sphere with node - Green
+ * - 3p (26-40): Complex dumbbell - Blue
+ * - 3d (41-60): Cloverleaf - Indigo
+ * - 4f (61+): Multi-lobe - Violet
+ */
+
+interface OrbitalVisualizationProps {
+    /** Full KFlow schema object */
+    schema?: {
+        dataEntities?: unknown[];
+        ui?: {
+            pages?: {
+                sections?: unknown[];
+            }[];
+        };
+        traits?: unknown[];
+    };
+    /** Direct complexity override (1-100+) */
+    complexity?: number;
+    /** Size of the visualization */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Show complexity label */
+    showLabel?: boolean;
+    /** Animation enabled */
+    animated?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const OrbitalVisualization: React__default.FC<OrbitalVisualizationProps>;
+
+/**
+ * SplitPane Component
+ *
+ * Two-pane resizable split layout for master-detail views,
+ * dual-pane editors, and code + preview layouts.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+interface SplitPaneProps {
+    /** Direction of the split */
+    direction?: "horizontal" | "vertical";
+    /** Initial ratio (0-100, percentage of first pane) */
+    ratio?: number;
+    /** Minimum size of either pane in pixels */
+    minSize?: number;
+    /** Allow user resizing */
+    resizable?: boolean;
+    /** Content for the left/top pane */
+    left: React__default.ReactNode;
+    /** Content for the right/bottom pane */
+    right: React__default.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Class for left/top pane */
+    leftClassName?: string;
+    /** Class for right/bottom pane */
+    rightClassName?: string;
+}
+/**
+ * SplitPane - Two-pane resizable layout
+ */
+declare const SplitPane: React__default.FC<SplitPaneProps>;
+
+/**
+ * DashboardGrid Component
+ *
+ * Multi-column grid for widgets and stats cards.
+ * Supports cell spanning for flexible dashboard layouts.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+interface DashboardGridCell {
+    /** Unique cell ID */
+    id: string;
+    /** Content to render in the cell */
+    content: React__default.ReactNode;
+    /** Number of columns this cell spans (1-4) */
+    colSpan?: 1 | 2 | 3 | 4;
+    /** Number of rows this cell spans (1-2) */
+    rowSpan?: 1 | 2;
+}
+interface DashboardGridProps {
+    /** Number of columns */
+    columns?: 2 | 3 | 4;
+    /** Gap between cells */
+    gap?: "sm" | "md" | "lg";
+    /** Cell definitions */
+    cells: DashboardGridCell[];
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * DashboardGrid - Multi-column widget grid
+ */
+declare const DashboardGrid: React__default.FC<DashboardGridProps>;
+
+/**
+ * TabbedContainer Component
+ *
+ * Tabbed content areas with shared header/context.
+ * Wraps the Tabs molecule with layout-specific styling.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+
+interface TabDefinition {
+    /** Tab identifier */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab content (optional if using sectionId) */
+    content?: React__default.ReactNode;
+    /** Section ID to render (alternative to content) */
+    sectionId?: string;
+    /** Optional badge/count */
+    badge?: string | number;
+    /** Disable this tab */
+    disabled?: boolean;
+}
+interface TabbedContainerProps {
+    /** Tab definitions */
+    tabs: TabDefinition[];
+    /** Default active tab ID */
+    defaultTab?: string;
+    /** Controlled active tab */
+    activeTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (tabId: string) => void;
+    /** Tab position */
+    position?: "top" | "left";
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TabbedContainer - Tabbed content areas
+ */
+declare const TabbedContainer: React__default.FC<TabbedContainerProps>;
+
+/**
+ * Game entity with position and rendering data
+ */
+interface GameEntity extends Entity {
+    x: number;
+    y: number;
+    vx?: number;
+    vy?: number;
+    width?: number;
+    height?: number;
+    layer?: number;
+    sprite?: string;
+    color?: string;
+    rotation?: number;
+    scale?: number;
+    visible?: boolean;
+    collider?: {
+        width: number;
+        height: number;
+        offsetX?: number;
+        offsetY?: number;
+    };
+}
+/**
+ * Entity renderer function type
+ */
+type EntityRenderer = (ctx: CanvasRenderingContext2D, entity: GameEntity) => void;
+/** Input key bindings - supports both field-based and event-based formats */
+interface InputBinding$1 {
+    key: string;
+    /** Direct field mapping (e.g., 'left', 'right', 'jump') */
+    field?: 'left' | 'right' | 'jump' | 'attack';
+    /** Event-based mapping (e.g., 'MOVE_LEFT', 'JUMP') - mapped to fields */
+    event?: string;
+    /** Whether to hold the input (continuous) or trigger once */
+    hold?: boolean;
+}
+/** Collision definition from schema */
+interface CollisionDef {
+    /** Entity types that collide [typeA, typeB] */
+    between: [string, string];
+    /** Collision type: 'solid' resolves overlap, 'trigger' emits event */
+    type: 'solid' | 'trigger';
+    /** Event to emit for trigger collisions */
+    emits?: string;
+}
+interface GameCanvasProps {
+    /** Entity type names to render (optional filter) */
+    renderEntities?: string[];
+    /** Rendering functions per entity type */
+    renderers?: Record<string, EntityRenderer>;
+    /**
+     * Renderer type hint from schema (e.g., 'phaser', 'canvas').
+     * Currently ignored - component uses Canvas2D.
+     * Reserved for future multi-renderer support.
+     */
+    renderer?: string;
+    /** Background color or gradient */
+    background?: string;
+    /** Canvas width in pixels or 'full' for responsive */
+    width?: number | 'full';
+    /** Canvas height in pixels or 'auto' for aspect ratio */
+    height?: number | 'auto';
+    /** Aspect ratio (e.g., '16:9', '4:3') */
+    aspectRatio?: string;
+    /** Camera offset for scrolling */
+    cameraOffset?: {
+        x: number;
+        y: number;
+    };
+    /** Debug mode shows hitboxes and entity info */
+    debug?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for canvas */
+    onClick?: (x: number, y: number, entity?: GameEntity) => void;
+    /** Enable keyboard input handling (updates Input entity) */
+    enableInput?: boolean;
+    /** Custom input key bindings */
+    inputBindings?: InputBinding$1[];
+    /** Collision definitions from schema */
+    collisions?: CollisionDef[];
+    /** Event bus for emitting collision events */
+    eventBus?: {
+        emit: (event: string, payload?: unknown) => void;
+    };
+}
+declare function GameCanvas({ renderEntities, renderers, background, width, height, aspectRatio, cameraOffset, debug, className, onClick, enableInput, inputBindings, collisions, eventBus, }: GameCanvasProps): react_jsx_runtime.JSX.Element;
+declare namespace GameCanvas {
+    var displayName: string;
+}
+
+interface StatBadgeProps {
+    /** Stat label */
+    label: string;
+    /** Current value (defaults to 0 if not provided) */
+    value?: number | string;
+    /** Maximum value (for bar/hearts format) */
+    max?: number;
+    /** Data source entity name (for schema config) */
+    source?: string;
+    /** Field name in the source (for schema config) */
+    field?: string;
+    /** Display format */
+    format?: 'number' | 'hearts' | 'bar' | 'text' | string;
+    /** Icon component or emoji */
+    icon?: React.ReactNode;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | string;
+    /** Visual variant */
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | string;
+    /** Additional CSS classes */
+    className?: string;
+}
+
+interface GameHudStat extends Omit<StatBadgeProps, "size"> {
+    /** Data source entity name */
+    source?: string;
+    /** Field name in the source */
+    field?: string;
+}
+/**
+ * Schema-style HUD element definition.
+ * Used when elements are passed from schema render_ui effects.
+ */
+interface GameHudElement {
+    type: string;
+    bind?: string;
+    position?: string;
+    label?: string;
+}
+interface GameHudProps {
+    /** Position of the HUD */
+    position?: "top" | "bottom" | "corners" | string;
+    /** Stats to display - accepts readonly for compatibility with generated const arrays */
+    stats?: readonly GameHudStat[];
+    /** Alias for stats (schema compatibility) */
+    items?: readonly GameHudStat[];
+    /**
+     * Schema-style elements array (alternative to stats).
+     * Converted to stats internally for backwards compatibility.
+     */
+    elements?: readonly GameHudElement[];
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to use a semi-transparent background */
+    transparent?: boolean;
+}
+declare function GameHud({ position: propPosition, stats: propStats, items, elements, size, className, transparent, }: GameHudProps): react_jsx_runtime.JSX.Element;
+declare namespace GameHud {
+    var displayName: string;
+}
+
+interface GameControl {
+    /** Unique identifier */
+    id?: string;
+    /** Alias for id (schema compatibility) */
+    key?: string;
+    /** Event to emit on press */
+    event: string;
+    /** Display label */
+    label?: string;
+    /** Icon component or emoji */
+    icon?: React.ReactNode;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "ghost" | string;
+}
+interface GameControlsProps {
+    /** Control layout type */
+    layout: "dpad" | "joystick" | "buttons" | "custom" | string;
+    /** Position on screen */
+    position: "bottom-left" | "bottom-right" | "bottom-center" | "split" | string;
+    /** Controls to display - accepts readonly for compatibility with generated const arrays */
+    controls?: readonly GameControl[];
+    /** Called when control is pressed/released */
+    onControl?: (event: string, pressed: boolean) => void;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether controls are visible */
+    visible?: boolean;
+    /** Opacity when visible */
+    opacity?: number;
+}
+declare function GameControls({ layout, position, controls, onControl, size, className, visible, opacity, }: GameControlsProps): react_jsx_runtime.JSX.Element | null;
+declare namespace GameControls {
+    var displayName: string;
+}
+
+interface MenuOption {
+    /** Optional ID (generated from index if not provided) */
+    id?: string;
+    /** Display label */
+    label: string;
+    /** Event to emit on click */
+    event?: string;
+    /** Page to navigate to */
+    navigatesTo?: string;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "ghost" | string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Sub-label or description */
+    subLabel?: string;
+    /** Action identifier (alternative to event) */
+    action?: string;
+}
+interface GameMenuProps {
+    /** Menu title */
+    title: string;
+    /** Optional subtitle or version */
+    subtitle?: string;
+    /** Menu options - accepts readonly for compatibility with generated const arrays */
+    options?: readonly MenuOption[];
+    /** Alias for options (schema compatibility) */
+    menuItems?: readonly MenuOption[];
+    /** Called when an option is selected (legacy callback, prefer event bus) */
+    onSelect?: (option: MenuOption) => void;
+    /** Event bus for emitting UI events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+    /** Background image or gradient */
+    background?: string;
+    /** Logo image URL */
+    logo?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function GameMenu({ title, subtitle, options, menuItems, onSelect, eventBus: eventBusProp, background, logo, className, }: GameMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace GameMenu {
+    var displayName: string;
+}
+
+interface PauseOption {
+    /** Display label */
+    label: string;
+    /** Event to emit on click */
+    event?: string;
+    /** Page to navigate to */
+    navigatesTo?: string;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "ghost" | "destructive";
+}
+interface GamePauseOverlayProps {
+    /** Pause menu options */
+    options?: PauseOption[];
+    /** Alias for options (schema compatibility) */
+    menuItems?: PauseOption[];
+    /** Called when an option is selected (legacy callback, prefer event bus) */
+    onSelect?: (option: PauseOption) => void;
+    /** Event bus for emitting UI events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+    /** Title (default: "PAUSED") */
+    title?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the pause menu is visible */
+    visible?: boolean;
+    /** Called when clicking outside the menu */
+    onDismiss?: () => void;
+}
+declare function GamePauseOverlay({ options, menuItems, onSelect, eventBus: eventBusProp, title, className, visible, onDismiss, }: GamePauseOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare namespace GamePauseOverlay {
+    var displayName: string;
+}
+
+interface GameOverStat {
+    /** Stat label */
+    label: string;
+    /** Stat value (required if bind is not provided) */
+    value?: number | string;
+    /**
+     * Schema-style data binding (e.g., "player.score").
+     * Alternative to value - used when stats come from schema render_ui effects.
+     * Component will display 0 as placeholder since runtime binding is not implemented.
+     */
+    bind?: string;
+    /** Display format */
+    format?: "number" | "time" | "text";
+    /** Icon */
+    icon?: React.ReactNode;
+}
+interface GameOverAction {
+    /** Display label */
+    label: string;
+    /** Event to emit on click */
+    event?: string;
+    /** Page to navigate to */
+    navigatesTo?: string;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "ghost";
+}
+interface GameOverScreenProps {
+    /** Screen title (e.g., "Game Over", "Victory!") */
+    title: string;
+    /** Optional message */
+    message?: string;
+    /** Stats to display */
+    stats?: GameOverStat[];
+    /** Action buttons */
+    actions?: GameOverAction[];
+    /** Alias for actions (schema compatibility) */
+    menuItems?: GameOverAction[];
+    /** Called when an action is selected (legacy callback, prefer event bus) */
+    onAction?: (action: GameOverAction) => void;
+    /** Event bus for emitting UI events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+    /** Victory or defeat variant */
+    variant?: "victory" | "defeat" | "neutral";
+    /** High score (optional, shows "NEW HIGH SCORE!" if exceeded) */
+    highScore?: number | string;
+    /** Current score for high score comparison (accepts string for schema bindings) */
+    currentScore?: number | string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function GameOverScreen({ title, message, stats, actions, menuItems, onAction, eventBus: eventBusProp, variant, highScore, currentScore, className, }: GameOverScreenProps): react_jsx_runtime.JSX.Element;
+declare namespace GameOverScreen {
+    var displayName: string;
+}
+
+interface LevelData {
+    /** Unique level identifier */
+    id: string;
+    /** Level ID (alternative to id) */
+    levelId?: string;
+    /** Level number */
+    number?: number;
+    /** Level name/title */
+    name?: string;
+    /** Stars earned (0-3) */
+    stars?: number;
+    /** Difficulty level */
+    difficulty?: 'easy' | 'medium' | 'hard' | string;
+    /** Whether the level is locked */
+    isLocked?: boolean;
+    /** Best score on this level */
+    bestScore?: number;
+    /** Thumbnail image URL */
+    thumbnail?: string;
+    /** Allow additional properties from schema */
+    [key: string]: unknown;
+}
+interface LevelFieldDisplay {
+    /** Field name */
+    field?: string;
+    /** Display type */
+    display?: 'title' | 'number' | 'stars' | 'locked' | 'thumbnail' | string;
+}
+interface LevelSelectProps {
+    /** Level data */
+    levels?: LevelData[];
+    /** Entity name (schema config) */
+    entity?: string;
+    /** Layout variant */
+    layout?: 'grid' | 'list' | 'carousel' | string;
+    /** Fields to display per level */
+    fields?: LevelFieldDisplay[];
+    /** Event to emit on selection (schema config) */
+    selectEvent?: string;
+    /** Called when a level is selected */
+    onSelect?: (level: LevelData) => void;
+    /** Path to navigate to on selection. Supports :id, :levelId, :number placeholders */
+    navigatesTo?: string;
+    /** Currently selected level ID */
+    selectedId?: string;
+    /** Maximum stars possible per level */
+    maxStars?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Title above the level grid */
+    title?: string;
+}
+declare function LevelSelect({ levels, entity: _entity, layout, fields, selectEvent: _selectEvent, onSelect, navigatesTo, selectedId, maxStars, className, title, }: LevelSelectProps): react_jsx_runtime.JSX.Element;
+declare namespace LevelSelect {
+    var displayName: string;
+}
+
+/**
+ * TilemapRenderer Component
+ *
+ * Canvas-based tilemap renderer with culling and parallax support.
+ */
+interface TileLayer {
+    name: string;
+    data: number[];
+    width: number;
+    height: number;
+    visible?: boolean;
+}
+interface Tileset {
+    url: string;
+    tileWidth: number;
+    tileHeight: number;
+    columns: number;
+}
+interface ParallaxConfig {
+    layer: string;
+    factor: number;
+}
+interface TilemapRendererProps {
+    /** Tile layers to render */
+    layers: TileLayer[];
+    /** Tileset configuration */
+    tileset: Tileset;
+    /** Camera position */
+    camera: {
+        x: number;
+        y: number;
+    };
+    /** Viewport width in pixels */
+    viewportWidth: number;
+    /** Viewport height in pixels */
+    viewportHeight: number;
+    /** Enable pixel art rendering (no smoothing) */
+    pixelArt?: boolean;
+    /** Parallax configuration per layer */
+    parallaxLayers?: ParallaxConfig[];
+    /** Optional className */
+    className?: string;
+    /** Scale factor for rendering */
+    scale?: number;
+    /** Show debug grid */
+    debug?: boolean;
+}
+/**
+ * Tilemap renderer component with efficient canvas-based rendering
+ *
+ * @example
+ * ```tsx
+ * <TilemapRenderer
+ *   layers={levelData.layers}
+ *   tileset={{
+ *     url: '/tilesets/terrain.png',
+ *     tileWidth: 16,
+ *     tileHeight: 16,
+ *     columns: 16
+ *   }}
+ *   camera={{ x: playerX - 160, y: playerY - 120 }}
+ *   viewportWidth={320}
+ *   viewportHeight={240}
+ *   pixelArt
+ *   scale={2}
+ * />
+ * ```
+ */
+declare function TilemapRenderer({ layers, tileset, camera, viewportWidth, viewportHeight, pixelArt, parallaxLayers, className, scale, debug, }: TilemapRendererProps): JSX.Element;
+
+/**
+ * InventoryPanel Component
+ *
+ * Grid-based inventory UI with item selection and tooltips.
+ */
+interface InventoryItem {
+    id: string;
+    type: string;
+    quantity: number;
+    sprite?: string;
+    name?: string;
+    description?: string;
+}
+interface InventoryPanelProps {
+    /** Array of items in inventory */
+    items: InventoryItem[];
+    /** Total number of slots */
+    slots: number;
+    /** Number of columns in grid */
+    columns: number;
+    /** Currently selected slot index */
+    selectedSlot?: number;
+    /** Called when a slot is selected */
+    onSelectSlot: (index: number) => void;
+    /** Called when an item is used (double-click or Enter) */
+    onUseItem?: (item: InventoryItem) => void;
+    /** Called when an item is dropped */
+    onDropItem?: (item: InventoryItem) => void;
+    /** Show item tooltips on hover */
+    showTooltips?: boolean;
+    /** Optional className */
+    className?: string;
+    /** Slot size in pixels */
+    slotSize?: number;
+}
+/**
+ * Inventory panel component with grid layout
+ *
+ * @example
+ * ```tsx
+ * <InventoryPanel
+ *   items={playerInventory}
+ *   slots={20}
+ *   columns={5}
+ *   selectedSlot={selectedSlot}
+ *   onSelectSlot={setSelectedSlot}
+ *   onUseItem={(item) => console.log('Used:', item.name)}
+ *   showTooltips
+ * />
+ * ```
+ */
+declare function InventoryPanel({ items, slots, columns, selectedSlot, onSelectSlot, onUseItem, onDropItem, showTooltips, className, slotSize, }: InventoryPanelProps): JSX.Element;
+
+/**
+ * DialogueBox Component
+ *
+ * NPC dialogue display with typewriter effect and choices.
+ */
+interface DialogueChoice {
+    text: string;
+    action?: string;
+    next?: string;
+    disabled?: boolean;
+}
+interface DialogueNode {
+    id?: string;
+    speaker: string;
+    text: string;
+    portrait?: string;
+    choices?: DialogueChoice[];
+    autoAdvance?: number;
+}
+interface DialogueBoxProps {
+    /** Current dialogue node to display */
+    dialogue: DialogueNode;
+    /** Typewriter speed in ms per character (0 = instant) */
+    typewriterSpeed?: number;
+    /** Position of dialogue box */
+    position?: 'top' | 'bottom';
+    /** Called when text animation completes */
+    onComplete?: () => void;
+    /** Called when a choice is selected */
+    onChoice?: (choice: DialogueChoice) => void;
+    /** Called when dialogue is advanced (no choices) */
+    onAdvance?: () => void;
+    /** Optional className */
+    className?: string;
+}
+/**
+ * Dialogue box component with typewriter effect
+ *
+ * @example
+ * ```tsx
+ * <DialogueBox
+ *   dialogue={{
+ *     speaker: "Old Man",
+ *     text: "It's dangerous to go alone! Take this.",
+ *     portrait: "/portraits/oldman.png",
+ *     choices: [
+ *       { text: "Thank you!", action: "ACCEPT_ITEM" },
+ *       { text: "No thanks", next: "decline_node" }
+ *     ]
+ *   }}
+ *   typewriterSpeed={30}
+ *   onChoice={(choice) => handleChoice(choice)}
+ *   position="bottom"
+ * />
+ * ```
+ */
+declare function DialogueBox({ dialogue, typewriterSpeed, position, onComplete, onChoice, onAdvance, className, }: DialogueBoxProps): JSX.Element;
+
+/**
+ * InputListener - Invisible component that captures keyboard input
+ *
+ * Rendered by InputCapture trait via render_ui effect.
+ * Listens for keydown/keyup events and:
+ * 1. Updates the Input singleton entity
+ * 2. Emits INPUT:* events via event bus
+ *
+ * This follows the closed circuit pattern:
+ * Trait (render_ui) → Component (InputListener) → Events (INPUT:*) → Trait (state machine)
+ *
+ * @generated pattern component
+ */
+
+/**
+ * Input binding configuration
+ */
+interface InputBinding {
+    /** Key code or key value (e.g., 'ArrowLeft', 'KeyA', 'Space') */
+    key: string;
+    /** Field name in the Input singleton (e.g., 'left', 'right', 'jump') */
+    field: string;
+    /** Optional custom event name (defaults to INPUT:{FIELD}_DOWN/UP) */
+    event?: string;
+}
+/**
+ * InputListener props
+ */
+interface InputListenerProps {
+    /** Key bindings configuration */
+    bindings?: readonly InputBinding[];
+    /** Whether input listening is enabled */
+    enabled?: boolean;
+    /** Event bus for emitting events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+}
+/**
+ * InputListener Component
+ *
+ * Invisible component that captures keyboard input and emits events.
+ * Designed to be rendered by the InputCapture trait via render_ui effect.
+ */
+declare function InputListener({ bindings, enabled, eventBus: eventBusProp, }: InputListenerProps): null;
+declare namespace InputListener {
+    var displayName: string;
+}
+
+/**
+ * CollisionDetector - Invisible component that runs collision detection
+ *
+ * Rendered by Collision2DSystem trait via render_ui effect.
+ * Runs AABB collision checks each frame and emits collision events.
+ *
+ * This follows the closed circuit pattern:
+ * Trait (render_ui) → Component (CollisionDetector) → Events (COLLISION_*) → Trait (state machine)
+ *
+ * @generated pattern component
+ */
+
+/**
+ * Collision rule configuration
+ */
+interface CollisionRule {
+    /** Entity type A */
+    typeA: string;
+    /** Entity type B */
+    typeB: string;
+    /** Whether this is a trigger (pass-through) or solid collision */
+    isTrigger?: boolean;
+    /** Custom event name to emit (defaults to COLLISION_ENTER/TRIGGER_ENTER) */
+    event?: string;
+}
+/**
+ * CollisionDetector props
+ */
+interface CollisionDetectorProps {
+    /** Collision detection algorithm */
+    algorithm?: 'aabb' | 'circle';
+    /** Collision rules to check */
+    rules?: readonly CollisionRule[];
+    /** Whether collision detection is enabled */
+    enabled?: boolean;
+    /** Event bus for emitting events (optional, uses hook if not provided) */
+    eventBus?: EventBusContextType;
+}
+/**
+ * CollisionDetector Component
+ *
+ * Invisible component that runs collision detection each frame and emits events.
+ * Designed to be rendered by the Collision2DSystem trait via render_ui effect.
+ */
+declare function CollisionDetector({ algorithm, rules, enabled, eventBus: eventBusProp, }: CollisionDetectorProps): null;
+declare namespace CollisionDetector {
+    var displayName: string;
+}
+
+/**
+ * UISlotRenderer Component
+ *
+ * Renders all UI slots. This is the central component that displays
+ * content rendered by traits via render_ui effects.
+ *
+ * Slots are rendered as:
+ * - Layout slots: Inline in the page flow (main, sidebar)
+ * - Portal slots: Rendered via portals (modal, drawer, toast, etc.)
+ * - HUD slots: Fixed position overlays (hud-top, hud-bottom)
+ *
+ * @packageDocumentation
+ */
+
+interface UISlotComponentProps {
+    slot: UISlot;
+    portal?: boolean;
+    position?: "left" | "right" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    className?: string;
+    draggable?: boolean;
+}
+/**
+ * Individual slot renderer.
+ *
+ * Handles different slot types with appropriate wrappers.
+ */
+declare function UISlotComponent({ slot, portal, position, className, }: UISlotComponentProps): React__default.ReactElement | null;
+interface SlotContentRendererProps {
+    content: SlotContent;
+    onDismiss: () => void;
+}
+/**
+ * Renders the actual content of a slot.
+ *
+ * Dynamically renders pattern components from the registry.
+ * For layout patterns with `hasChildren`, recursively renders nested patterns.
+ */
+declare function SlotContentRenderer({ content, onDismiss, }: SlotContentRendererProps): React__default.ReactElement;
+interface UISlotRendererProps {
+    /** Include HUD slots */
+    includeHud?: boolean;
+    /** Include floating slot */
+    includeFloating?: boolean;
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * Main UI Slot Renderer component.
+ *
+ * Renders all slot containers. Place this in your page/layout component.
+ *
+ * @example
+ * ```tsx
+ * function PageLayout() {
+ *   return (
+ *     <div className="page-layout">
+ *       <UISlotRenderer />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function UISlotRenderer({ includeHud, includeFloating, className, }: UISlotRendererProps): React__default.ReactElement;
+declare namespace UISlotRenderer {
+    var displayName: string;
+}
+
+/**
+ * ModalSlot Component
+ *
+ * Wraps modal slot content in a proper Modal component.
+ * Used by trait-driven pages to display modal UI from render_ui effects.
+ *
+ * Handles:
+ * - Auto-open when content is present
+ * - Dispatches CLOSE/CANCEL events when closed
+ * - Extracts title from Form components
+ */
+
+interface ModalSlotProps {
+    /** Content to display in the modal */
+    children?: React__default.ReactNode;
+    /** Override modal title (extracted from children if not provided) */
+    title?: string;
+    /** Modal size */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * ModalSlot - Wrapper for modal slot content
+ *
+ * Automatically shows modal when children are present,
+ * and dispatches close events when modal is dismissed.
+ */
+declare const ModalSlot: React__default.FC<ModalSlotProps>;
+
+/**
+ * DrawerSlot Component
+ *
+ * Wraps drawer slot content in a proper Drawer component.
+ * Used by trait-driven pages to display drawer UI from render_ui effects.
+ *
+ * Handles:
+ * - Auto-open when content is present
+ * - Dispatches CLOSE/CANCEL events when closed
+ * - Extracts title from Form or DetailPanel components
+ * - Configurable position and size
+ */
+
+interface DrawerSlotProps {
+    /** Content to display in the drawer */
+    children?: React__default.ReactNode;
+    /** Override drawer title (extracted from children if not provided) */
+    title?: string;
+    /** Drawer position */
+    position?: DrawerPosition;
+    /** Drawer size */
+    size?: DrawerSize;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * DrawerSlot - Wrapper for drawer slot content
+ *
+ * Automatically shows drawer when children are present,
+ * and dispatches close events when drawer is dismissed.
+ */
+declare const DrawerSlot: React__default.FC<DrawerSlotProps>;
+
+/**
+ * ToastSlot Component
+ *
+ * Wraps toast slot content in a proper Toast component with positioning.
+ * Used by trait-driven pages to display toast UI from render_ui effects.
+ *
+ * Handles:
+ * - Auto-show when content is present
+ * - Dispatches DISMISS event when dismissed
+ * - Fixed positioning in corner of screen
+ */
+
+interface ToastSlotProps {
+    /** Content to display in the toast (message or ReactNode) */
+    children?: React__default.ReactNode;
+    /** Toast variant */
+    variant?: ToastVariant;
+    /** Toast title */
+    title?: string;
+    /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
+    duration?: number;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * ToastSlot - Wrapper for toast slot content
+ *
+ * Automatically shows toast when children are present,
+ * and dispatches dismiss events when toast is dismissed.
+ */
+declare const ToastSlot: React__default.FC<ToastSlotProps>;
+
+interface NavItem {
+    label: string;
+    href: string;
+    icon: LucideIcon;
+    badge?: string | number;
+    children?: NavItem[];
+}
+interface DashboardLayoutProps {
+    /** App name shown in sidebar */
+    appName?: string;
+    /** Logo component or URL */
+    logo?: React__default.ReactNode;
+    /** Navigation items */
+    navItems?: NavItem[];
+    /** Current user info (optional - auto-populated from auth context if not provided) */
+    user?: {
+        name: string;
+        email: string;
+        avatar?: string;
+    };
+    /** Header actions (notifications, etc.) */
+    headerActions?: React__default.ReactNode;
+    /** Show search in header */
+    showSearch?: boolean;
+    /** Custom sidebar footer */
+    sidebarFooter?: React__default.ReactNode;
+    /** Callback when user clicks sign out (optional - uses auth context signOut if not provided) */
+    onSignOut?: () => void;
+}
+declare const DashboardLayout: React__default.FC<DashboardLayoutProps>;
+
+interface AuthLayoutProps {
+    /** App name */
+    appName?: string;
+    /** Logo component or URL */
+    logo?: React__default.ReactNode;
+    /** Background image URL */
+    backgroundImage?: string;
+    /** Show branding panel on the side */
+    showBranding?: boolean;
+    /** Branding panel content */
+    brandingContent?: React__default.ReactNode;
+}
+declare const AuthLayout: React__default.FC<AuthLayoutProps>;
+
+/**
+ * CounterTemplate
+ *
+ * A presentational template for counter/incrementer features.
+ * Supports increment, decrement, and reset operations.
+ */
+
+type CounterSize = "sm" | "md" | "lg";
+type CounterVariant = "minimal" | "standard" | "full";
+interface CounterTemplateProps {
+    /** Current count value */
+    count: number;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step size for increment/decrement */
+    step?: number;
+    /** Called when increment is clicked */
+    onIncrement?: () => void;
+    /** Called when decrement is clicked */
+    onDecrement?: () => void;
+    /** Called when reset is clicked */
+    onReset?: () => void;
+    /** Title displayed above the counter */
+    title?: string;
+    /** Show reset button */
+    showReset?: boolean;
+    /** Counter display size */
+    size?: CounterSize;
+    /** Template variant */
+    variant?: CounterVariant;
+    /** Additional class name */
+    className?: string;
+}
+declare const CounterTemplate: React__default.FC<CounterTemplateProps>;
+
+/**
+ * ListTemplate
+ *
+ * A presentational template for list-based features like todos, shopping lists, notes.
+ * Supports add, toggle, delete, and filter operations.
+ */
+
+type FilterValue = "all" | "active" | "completed";
+type ListVariant = "minimal" | "standard" | "full";
+interface ListTemplateItem {
+    id: string;
+    title: string;
+    completed?: boolean;
+    [key: string]: unknown;
+}
+interface ListTemplateProps {
+    /** Array of list items */
+    items: ListTemplateItem[];
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Error object if loading failed */
+    error?: Error | string | null;
+    /** Current filter value */
+    filter?: FilterValue;
+    /** Called when a new item is added */
+    onAdd?: (title: string) => void;
+    /** Called when an item is toggled */
+    onToggle?: (id: string) => void;
+    /** Called when an item is deleted */
+    onDelete?: (id: string) => void;
+    /** Called when filter changes */
+    onFilterChange?: (filter: FilterValue) => void;
+    /** Called to retry loading */
+    onRetry?: () => void;
+    /** Title displayed above the list */
+    title?: string;
+    /** Placeholder for the input field */
+    placeholder?: string;
+    /** Whether to show filter buttons */
+    showFilters?: boolean;
+    /** Whether to show item count */
+    showCount?: boolean;
+    /** Message shown when list is empty */
+    emptyMessage?: string;
+    /** Template variant */
+    variant?: ListVariant;
+    /** Additional class name */
+    className?: string;
+}
+declare const ListTemplate: React__default.FC<ListTemplateProps>;
+
+/**
+ * FormTemplate
+ *
+ * A presentational template for form-based features like contact forms, feedback, surveys.
+ * Supports submission, validation, and success/error states.
+ */
+
+type FormVariant = "minimal" | "standard" | "full";
+interface FormFieldConfig {
+    name: string;
+    label: string;
+    type: "text" | "email" | "password" | "tel" | "url" | "number" | "textarea" | "select" | "checkbox";
+    placeholder?: string;
+    required?: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    rows?: number;
+}
+interface FormTemplateProps {
+    /** Current form field values */
+    formData: Record<string, unknown>;
+    /** Whether form is being submitted */
+    isSubmitting?: boolean;
+    /** Whether submission was successful */
+    isSuccess?: boolean;
+    /** Error object if submission failed */
+    error?: Error | string | null;
+    /** Field-level validation errors */
+    validationErrors?: Record<string, string>;
+    /** Called when form is submitted */
+    onSubmit?: (formData: Record<string, unknown>) => void;
+    /** Called when a field value changes */
+    onFieldChange?: (field: string, value: unknown) => void;
+    /** Called to reset the form */
+    onReset?: () => void;
+    /** Called to dismiss success message */
+    onDismissSuccess?: () => void;
+    /** Form title */
+    title?: string;
+    /** Form subtitle/description */
+    subtitle?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Whether to show reset button */
+    showReset?: boolean;
+    /** Form field definitions */
+    fields?: FormFieldConfig[];
+    /** Template variant */
+    variant?: FormVariant;
+    /** Additional class name */
+    className?: string;
+}
+declare const FormTemplate: React__default.FC<FormTemplateProps>;
+
+/**
+ * CrudTemplate
+ *
+ * A presentational template for CRUD (Create, Read, Update, Delete) features.
+ * Includes data table, search, and modal forms for create/edit.
+ */
+
+type CrudVariant = "minimal" | "standard" | "full";
+interface CrudItem {
+    id: string;
+    [key: string]: unknown;
+}
+interface ColumnConfig {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+    render?: (value: unknown, row: CrudItem) => React__default.ReactNode;
+}
+interface FieldConfig {
+    key: string;
+    label: string;
+    type?: "text" | "email" | "number" | "textarea" | "select";
+    required?: boolean;
+    placeholder?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+interface CrudTemplateProps {
+    /** Array of items to display */
+    items: CrudItem[];
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Error object if loading failed */
+    error?: Error | string | null;
+    /** Currently selected item for editing */
+    selectedItem?: CrudItem | null;
+    /** Whether the create/edit modal is open */
+    isModalOpen?: boolean;
+    /** Current search query */
+    searchQuery?: string;
+    /** Current sort field */
+    sortBy?: string;
+    /** Current sort order */
+    sortOrder?: "asc" | "desc";
+    /** Called to load/refresh items */
+    onLoad?: () => void;
+    /** Called when creating a new item */
+    onCreate?: (data: Record<string, unknown>) => void;
+    /** Called when updating an item */
+    onUpdate?: (id: string, data: Record<string, unknown>) => void;
+    /** Called when deleting an item */
+    onDelete?: (id: string) => void;
+    /** Called when selecting an item for editing */
+    onSelect?: (id: string) => void;
+    /** Called when viewing an item */
+    onView?: (id: string) => void;
+    /** Called when search query changes */
+    onSearch?: (query: string) => void;
+    /** Called when sort changes */
+    onSort?: (field: string, order: "asc" | "desc") => void;
+    /** Called to open create/edit modal */
+    onOpenModal?: () => void;
+    /** Called to close modal */
+    onCloseModal?: () => void;
+    /** Page title */
+    title?: string;
+    /** Singular entity name for labels */
+    entityName?: string;
+    /** Table column definitions */
+    columns?: ColumnConfig[];
+    /** Form field definitions for create/edit */
+    fields?: FieldConfig[];
+    /** Whether to show search input */
+    showSearch?: boolean;
+    /** Search input placeholder */
+    searchPlaceholder?: string;
+    /** Whether to show view action */
+    showViewAction?: boolean;
+    /** Template variant */
+    variant?: CrudVariant;
+    /** Additional class name */
+    className?: string;
+}
+declare const CrudTemplate: React__default.FC<CrudTemplateProps>;
+
+/**
+ * SettingsTemplate
+ *
+ * A presentational template for settings/preferences features.
+ * Supports sections with various input types and save/reset operations.
+ */
+
+type SettingsVariant = "minimal" | "standard" | "full";
+interface SettingsFieldConfig {
+    key: string;
+    label: string;
+    type: "text" | "email" | "number" | "select" | "toggle" | "checkbox";
+    description?: string;
+    placeholder?: string;
+    options?: string[] | Array<{
+        value: string;
+        label: string;
+    }>;
+}
+interface SettingsSectionConfig {
+    title: string;
+    description?: string;
+    fields: SettingsFieldConfig[];
+}
+interface SettingsTemplateProps {
+    /** Current settings values */
+    settings: Record<string, unknown>;
+    /** Whether settings are being saved */
+    isSaving?: boolean;
+    /** Whether there are unsaved changes */
+    hasChanges?: boolean;
+    /** Error object if save failed */
+    error?: Error | string | null;
+    /** Success message after save */
+    successMessage?: string | null;
+    /** Called when saving settings */
+    onSave?: (settings: Record<string, unknown>) => void;
+    /** Called when a setting value changes */
+    onChange?: (key: string, value: unknown) => void;
+    /** Called to reset to default settings */
+    onReset?: () => void;
+    /** Called to revert unsaved changes */
+    onRevert?: () => void;
+    /** Called to dismiss success message */
+    onDismissSuccess?: () => void;
+    /** Page title */
+    title?: string;
+    /** Settings sections */
+    sections?: SettingsSectionConfig[];
+    /** Whether to show reset to defaults button */
+    showResetToDefaults?: boolean;
+    /** Template variant */
+    variant?: SettingsVariant;
+    /** Additional class name */
+    className?: string;
+}
+declare const SettingsTemplate: React__default.FC<SettingsTemplateProps>;
+
+/**
+ * GameTemplate
+ *
+ * A presentational template for game applications.
+ * Includes a main game canvas/area, HUD overlay, and an optional debug sidebar.
+ * **Atomic Design**: Composed using Box, Typography, and Layout molecules/atoms.
+ */
+
+interface GameTemplateProps {
+    /** Title of the game */
+    title?: string;
+    /** The main game canvas or content */
+    children: React__default.ReactNode;
+    /** HUD overlay content (scores, health, etc.) */
+    hud?: React__default.ReactNode;
+    /** Debug panel content */
+    debugPanel?: React__default.ReactNode;
+    /** Whether the debug panel is visible */
+    showDebugPanel?: boolean;
+    /** Game controls */
+    controls?: {
+        onPlay?: () => void;
+        onPause?: () => void;
+        onReset?: () => void;
+        isPlaying?: boolean;
+    };
+    /** Additional class name */
+    className?: string;
+}
+declare const GameTemplate: React__default.FC<GameTemplateProps>;
+
+/**
+ * GenericAppTemplate
+ *
+ * A simple, generic template for any application.
+ * Includes a header with title and actions, and a main content area.
+ * **Atomic Design**: Composed using Box, Typography, and Button atoms.
+ */
+
+interface GenericAppTemplateProps {
+    /** Page title */
+    title: string;
+    /** Subtitle or description */
+    subtitle?: string;
+    /** Main content */
+    children: React__default.ReactNode;
+    /** Header actions (buttons, links) */
+    headerActions?: React__default.ReactNode;
+    /** Footer content */
+    footer?: React__default.ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+declare const GenericAppTemplate: React__default.FC<GenericAppTemplateProps>;
+
+export { Accordion, type AccordionItem, type AccordionProps, Card as ActionCard, type CardProps as ActionCardProps, Alert, type AlertProps, type AlertVariant, AuthLayout, type AuthLayoutProps, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Box, type BoxBg, type BoxMargin, type BoxPadding, type BoxProps, type BoxRounded, type BoxShadow, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card$1 as Card, type CardAction, CardBody, CardContent, CardFooter, CardGrid, type CardGridGap, type CardGridProps, CardHeader, type CardProps$1 as CardProps, CardTitle, Center, type CenterProps, Checkbox, type CheckboxProps, type CollisionDef, CollisionDetector, type CollisionDetectorProps, type CollisionRule, type Column, type ColumnConfig, type ConditionalContext, ConditionalWrapper, type ConditionalWrapperProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, Container, type ContainerProps, type CounterSize, CounterTemplate, type CounterTemplateProps, type CounterVariant, type CrudItem, CrudTemplate, type CrudTemplateProps, type CrudVariant, DashboardGrid, type DashboardGridCell, type DashboardGridProps, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, type DetailField, DetailPanel, type DetailPanelProps, type DetailSection, DialogueBox, type DialogueBoxProps, type DialogueChoice, type DialogueNode, Divider, type DividerOrientation, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, DrawerSlot, type DrawerSlotProps, EmptyState, type EmptyStateProps, type EntityRenderer, ErrorState, type ErrorStateProps, type FieldConfig, type FilterDefinition, FilterGroup, type FilterGroupProps, type FilterValue, Flex, type FlexProps, FloatingActionButton, type FloatingActionButtonProps, Form, FormActions, type FormActionsProps, FormField, type FormFieldConfig, type FormFieldProps, FormLayout, type FormLayoutProps, type FormProps, FormSection$1 as FormSection, FormSectionHeader, type FormSectionHeaderProps, type FormSectionProps, FormTemplate, type FormTemplateProps, type FormVariant, GameCanvas, type GameCanvasProps, type GameControl, GameControls, type GameControlsProps, type GameEntity, GameHud, type GameHudElement, type GameHudProps, type GameHudStat, GameMenu, type GameMenuProps, type GameOverAction, GameOverScreen, type GameOverScreenProps, type GameOverStat, GamePauseOverlay, type GamePauseOverlayProps, GameTemplate, type GameTemplateProps, GenericAppTemplate, type GenericAppTemplateProps, Grid, type GridProps, HStack, type HStackProps, Header, type HeaderProps, type HighlightType, Icon, type IconAnimation, type IconProps, type IconSize, Input, type InputBinding, InputGroup, type InputGroupProps, InputListener, type InputListenerProps, type InputProps, type InventoryItem, InventoryPanel, type InventoryPanelProps, Label, type LabelProps, type LawReference, LawReferenceTooltip, type LawReferenceTooltipProps, type LevelData, type LevelFieldDisplay, LevelSelect, type LevelSelectProps, List, type ListItem, type ListProps, ListTemplate, type ListTemplateItem, type ListTemplateProps, type ListVariant, LoadingState, type LoadingStateProps, MasterDetail, type MasterDetailProps, Menu, type MenuItem, type MenuOption, type MenuProps, Modal, type ModalProps, type ModalSize, ModalSlot, type ModalSlotProps, type NavItem, Navigation, type NavigationItem, type NavigationProps, OrbitalVisualization, type OrbitalVisualizationProps, Overlay, type OverlayProps, type PageBreadcrumb, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, type ParallaxConfig, type PauseOption, Popover, type PopoverProps, ProgressBar, type ProgressBarColor, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, type RelationOption, RelationSelect, type RelationSelectProps, RepeatableFormSection, type RepeatableFormSectionProps, type RepeatableItem, type RowAction, SearchInput, type SearchInputProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, type SettingsFieldConfig, type SettingsSectionConfig, SettingsTemplate, type SettingsTemplateProps, type SettingsVariant, SidePanel, type SidePanelProps, Sidebar, type SidebarItem, type SidebarProps, SimpleGrid, type SimpleGridProps, SlotContentRenderer, type SortDirection, Spacer, type SpacerProps, type SpacerSize, Spinner, type SpinnerProps, Split, SplitPane, type SplitPaneProps, type SplitProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabDefinition, type TabItem, TabbedContainer, type TabbedContainerProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextHighlight, type TextHighlightProps, Textarea, type TextareaProps, ThemeSelector, ThemeToggle, type ThemeToggleProps, TilemapRenderer, type TilemapRendererProps, type TileLayer as TilemapTileLayer, type Tileset as TilemapTileset, Toast, type ToastProps, ToastSlot, type ToastSlotProps, type ToastVariant, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, UISlotComponent, UISlotRenderer, type UISlotRendererProps, VStack, type VStackProps, ViolationAlert, type ViolationAlertProps, type ViolationRecord, WizardContainer, type WizardContainerProps, WizardNavigation, type WizardNavigationProps, WizardProgress, type WizardProgressProps, type WizardProgressStep, type WizardStep };