@djangocfg/ui-tools 2.1.110 → 2.1.111

package/dist/index.d.cts

@@ -1,233 +1,350 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CommonExternalProps } from 'react-json-tree';
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, ComponentType } from 'react';
+import { ViewState } from 'react-map-gl/maplibre';
 import { Language } from 'prism-react-renderer';
 export { Language } from 'prism-react-renderer';
 import { RJSFSchema, UiSchema, WidgetProps, FieldTemplateProps, ObjectFieldTemplateProps, ArrayFieldTemplateProps, ArrayFieldItemTemplateProps, ErrorListProps } from '@rjsf/utils';
 import { FormProps, IChangeEvent } from '@rjsf/core';
+import { CommonExternalProps } from 'react-json-tree';
 import { MediaPlayerInstance } from '@vidstack/react';
 import * as zustand_middleware from 'zustand/middleware';
 import * as zustand from 'zustand';
 
-interface JsonTreeConfig {
-    /** Maximum depth to expand automatically (default: 2) */
-    maxAutoExpandDepth?: number;
-    /** Maximum items in array to auto-expand (default: 10) */
-    maxAutoExpandArrayItems?: number;
-    /** Maximum object keys to auto-expand (default: 5) */
-    maxAutoExpandObjectKeys?: number;
-    /** Maximum string length before truncation (default: 200) */
-    maxStringLength?: number;
-    /** Collection limit for performance (default: 50) */
-    collectionLimit?: number;
-    /** Whether to show collection info (array length, object keys count) */
-    showCollectionInfo?: boolean;
-    /** Whether to show expand/collapse all buttons */
-    showExpandControls?: boolean;
-    /** Whether to show copy/download buttons */
-    showActionButtons?: boolean;
-    /** Custom CSS classes for the container */
+interface LoadingFallbackProps {
+    /** Minimum height of the loading container */
+    minHeight?: string | number;
+    /** Show loading text */
+    showText?: boolean;
+    /** Custom loading text */
+    text?: string;
+    /** Additional CSS classes */
     className?: string;
-    /** Whether to preserve object key order (default: true) */
-    preserveKeyOrder?: boolean;
 }
-interface JsonTreeComponentProps {
+/**
+ * Spinner - Simple spinning loader
+ */
+declare function Spinner({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * LoadingFallback - Default loading state for lazy components
+ */
+declare function LoadingFallback({ minHeight, showText, text, className, }: LoadingFallbackProps): react_jsx_runtime.JSX.Element;
+/**
+ * CardLoadingFallback - Loading state styled as a card
+ */
+declare function CardLoadingFallback({ title, description, minHeight, className, }: {
     title?: string;
-    data: unknown;
-    config?: JsonTreeConfig;
-    /** Override for react-json-tree props */
-    jsonTreeProps?: Partial<CommonExternalProps>;
-}
-declare const JsonTreeComponent: ({ title, data, config, jsonTreeProps }: JsonTreeComponentProps) => react_jsx_runtime.JSX.Element;
-
+    description?: string;
+    minHeight?: string | number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 /**
- * Mermaid Component - Dynamic Import Wrapper
- *
- * Lazy loads the heavy Mermaid library (~800KB) only when needed.
- * This significantly reduces the initial bundle size.
+ * MapLoadingFallback - Loading state for map components
  */
-
-interface MermaidProps {
-    chart: string;
+declare function MapLoadingFallback({ minHeight, className, }: {
+    minHeight?: string | number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface LazyWrapperProps {
+    children: ReactNode;
+    /** Custom fallback component */
+    fallback?: ReactNode;
+    /** Use card-style fallback */
+    card?: boolean;
+    /** Card title (when card=true) */
+    cardTitle?: string;
+    /** Card description (when card=true) */
+    cardDescription?: string;
+    /** Minimum height for fallback */
+    minHeight?: string | number;
+    /** Additional CSS classes for fallback */
     className?: string;
-    isCompact?: boolean;
 }
-declare const Mermaid: React__default.FC<MermaidProps>;
-
 /**
- * PrettyCode Component - Dynamic Import Wrapper
+ * LazyWrapper - Suspense wrapper with configurable fallbacks
  *
- * Lazy loads the heavy Prism library (~500KB) only when needed.
- * This significantly reduces the initial bundle size.
+ * @example
+ * // Basic usage
+ * <LazyWrapper>
+ *   <LazyComponent />
+ * </LazyWrapper>
+ *
+ * @example
+ * // Card style fallback
+ * <LazyWrapper card cardTitle="Diagram" minHeight={300}>
+ *   <Mermaid chart={...} />
+ * </LazyWrapper>
+ *
+ * @example
+ * // Custom fallback
+ * <LazyWrapper fallback={<MyCustomLoader />}>
+ *   <HeavyComponent />
+ * </LazyWrapper>
  */
-
-interface PrettyCodeProps {
-    data: string | object;
-    language: Language;
-    className?: string;
-    mode?: 'dark' | 'light';
-    inline?: boolean;
-    customBg?: string;
-    isCompact?: boolean;
+declare function LazyWrapper({ children, fallback, card, cardTitle, cardDescription, minHeight, className, }: LazyWrapperProps): react_jsx_runtime.JSX.Element;
+interface CreateLazyComponentOptions<P> {
+    /** Loading fallback component */
+    fallback?: ReactNode | ((props: P) => ReactNode);
+    /** Display name for the component */
+    displayName?: string;
 }
-declare const PrettyCode: React__default.FC<PrettyCodeProps>;
-
 /**
- * LottiePlayer Types
+ * createLazyComponent - Factory for creating lazy-loaded components
  *
- * Type definitions for the Lottie animation player component
+ * @example
+ * const LazyMermaid = createLazyComponent(
+ *   () => import('./Mermaid.client'),
+ *   {
+ *     displayName: 'Mermaid',
+ *     fallback: <CardLoadingFallback title="Diagram" />,
+ *   }
+ * );
  */
-type LottieSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-type LottieSpeed = 0.5 | 1 | 1.5 | 2;
-type LottieDirection = 1 | -1;
-interface LottiePlayerProps {
-    /**
-     * Animation data (JSON object) or URL to load from
-     */
-    src: string | object;
-    /**
-     * Size preset for the player
-     * @default 'md'
-     */
-    size?: LottieSize;
-    /**
-     * Custom width (overrides size preset)
-     */
-    width?: number | string;
-    /**
-     * Custom height (overrides size preset)
-     */
-    height?: number | string;
-    /**
-     * Autoplay animation
-     * @default true
-     */
-    autoplay?: boolean;
-    /**
-     * Loop animation
-     * @default true
-     */
-    loop?: boolean | number;
-    /**
-     * Playback speed
-     * @default 1
-     */
-    speed?: LottieSpeed;
-    /**
-     * Direction (1 = forward, -1 = reverse)
-     * @default 1
-     */
-    direction?: LottieDirection;
+declare function createLazyComponent<P extends object>(loader: () => Promise<{
+    default: ComponentType<P>;
+}>, options?: CreateLazyComponentOptions<P>): ComponentType<P>;
+
+interface MarkdownMessageProps {
+    /** Markdown content to render */
+    content: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the message is from the user (affects styling) */
+    isUser?: boolean;
+    /** Use compact size (text-xs instead of text-sm) */
+    isCompact?: boolean;
     /**
-     * Show playback controls
+     * Enable collapsible "Read more..." functionality
+     * When enabled, long content will be truncated with a toggle button
      * @default false
      */
-    controls?: boolean;
+    collapsible?: boolean;
     /**
-     * Background color
+     * Maximum character length before showing "Read more..."
+     * Only applies when collapsible is true
+     * If both maxLength and maxLines are set, the stricter limit applies
      */
-    background?: string;
+    maxLength?: number;
     /**
-     * CSS class name
+     * Maximum number of lines before showing "Read more..."
+     * Only applies when collapsible is true
+     * If both maxLength and maxLines are set, the stricter limit applies
      */
-    className?: string;
+    maxLines?: number;
     /**
-     * Show loading state
-     * @default true
+     * Custom "Read more" button text
+     * @default "Read more..."
      */
-    showLoading?: boolean;
+    readMoreLabel?: string;
     /**
-     * Callback when animation completes
+     * Custom "Show less" button text
+     * @default "Show less"
      */
-    onComplete?: () => void;
+    showLessLabel?: string;
     /**
-     * Callback when animation loads
+     * Start expanded (only applies when collapsible is true)
+     * @default false
      */
-    onLoad?: () => void;
+    defaultExpanded?: boolean;
     /**
-     * Callback on error
+     * Callback when collapsed state changes
      */
-    onError?: (error: Error) => void;
+    onCollapseChange?: (isCollapsed: boolean) => void;
 }
-
 /**
- * useLottie Hook
+ * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
  *
- * Hook for loading and managing Lottie animation data
+ * Features:
+ * - GitHub Flavored Markdown (GFM) support
+ * - Syntax highlighted code blocks with copy button
+ * - Mermaid diagram rendering
+ * - Tables, lists, blockquotes
+ * - User/assistant styling modes
+ * - Plain text optimization (skips ReactMarkdown for simple text)
+ * - Collapsible "Read more..." for long messages
+ *
+ * @example
+ * ```tsx
+ * <MarkdownMessage content="# Hello\n\nThis is **bold** text." />
+ *
+ * // User message styling
+ * <MarkdownMessage content="Some content" isUser />
+ *
+ * // Collapsible long content (for chat apps)
+ * <MarkdownMessage
+ *   content={longText}
+ *   collapsible
+ *   maxLength={300}
+ *   maxLines={5}
+ * />
+ * ```
  */
-interface UseLottieOptions {
-    /**
-     * Animation data (JSON object) or URL to load from
-     */
-    src: string | object;
-    /**
-     * Enable caching of loaded animations
-     * @default true
-     */
-    cache?: boolean;
-}
-interface UseLottieReturn {
-    /**
-     * Loaded animation data
-     */
-    animationData: object | null;
+declare const MarkdownMessage: React__default.FC<MarkdownMessageProps>;
+
+interface UseCollapsibleContentOptions {
     /**
-     * Loading state
+     * Maximum character length before collapsing
+     * If both maxLength and maxLines are set, the stricter limit applies
      */
-    isLoading: boolean;
+    maxLength?: number;
     /**
-     * Error state
+     * Maximum number of lines before collapsing
+     * If both maxLength and maxLines are set, the stricter limit applies
      */
-    error: Error | null;
+    maxLines?: number;
     /**
-     * Retry loading the animation
+     * Start in expanded state (default: false - starts collapsed)
      */
-    retry: () => void;
+    defaultExpanded?: boolean;
+}
+interface UseCollapsibleContentResult {
+    /** Whether content is currently collapsed */
+    isCollapsed: boolean;
+    /** Toggle between collapsed/expanded state */
+    toggleCollapsed: () => void;
+    /** Set collapsed state directly */
+    setCollapsed: (collapsed: boolean) => void;
+    /** Content to display (truncated if collapsed, full if expanded) */
+    displayContent: string;
+    /** Whether the content exceeds limits and should be collapsible */
+    shouldCollapse: boolean;
+    /** Original content length */
+    originalLength: number;
+    /** Original line count */
+    originalLineCount: number;
 }
 /**
- * Hook for loading Lottie animations from URLs or objects
- *
- * Features:
- * - Loads animations from URLs or accepts animation objects directly
- * - Caching support to prevent re-fetching the same animation
- * - Error handling with retry capability
- * - Loading states
+ * Hook for managing collapsible content with "Read more..." functionality
  *
- * Usage:
+ * @example
  * ```tsx
- * const { animationData, isLoading, error, retry } = useLottie({
- *   src: 'https://example.com/animation.json'
- * });
- *
- * if (isLoading) return <div>Loading...</div>;
- * if (error) return <div>Error: {error.message} <button onClick={retry}>Retry</button></div>;
- * if (!animationData) return null;
+ * const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } = useCollapsibleContent(
+ *   longText,
+ *   { maxLength: 300, maxLines: 5 }
+ * );
  *
- * return <LottiePlayer animationData={animationData} />;
+ * return (
+ *   <div>
+ *     <Markdown content={displayContent} />
+ *     {shouldCollapse && (
+ *       <button onClick={toggleCollapsed}>
+ *         {isCollapsed ? 'Read more...' : 'Show less'}
+ *       </button>
+ *     )}
+ *   </div>
+ * );
  * ```
  */
-declare function useLottie(options: UseLottieOptions): UseLottieReturn;
+declare function useCollapsibleContent(content: string, options?: UseCollapsibleContentOptions): UseCollapsibleContentResult;
+
+interface MarkerData {
+    id: string;
+    longitude: number;
+    latitude: number;
+    data?: Record<string, unknown>;
+}
+interface MapViewport extends Partial<ViewState> {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+    bearing?: number;
+    pitch?: number;
+    transitionDuration?: number;
+}
+type MapStyleKey = 'light' | 'dark' | 'streets' | 'satellite';
+
+interface MapContainerProps {
+    children?: ReactNode;
+    initialViewport?: Partial<MapViewport>;
+    mapStyle?: MapStyleKey | string;
+    interactiveLayerIds?: string[];
+    className?: string;
+    style?: React.CSSProperties;
+    cursor?: string;
+    attributionControl?: boolean;
+    reuseMaps?: boolean;
+    /** URL to open in external maps app (shows "Open in Maps" button if provided) */
+    openInMapsUrl?: string;
+    /** Label for the open in maps button */
+    openInMapsLabel?: string;
+    /** Auto-reset to initial viewport after N ms of inactivity (0 = disabled) */
+    autoResetDelay?: number;
+    /** Show reset button */
+    showResetButton?: boolean;
+}
 
 /**
- * LottiePlayer component wrapper with dynamic import
+ * LazyMapContainer - Lazy-loaded map container
  *
- * This component automatically handles code splitting and lazy loading
- * of the Lottie player to optimize bundle size.
+ * Automatically shows loading state while MapLibre GL loads (~800KB)
+ */
+declare const LazyMapContainer: React$1.ComponentType<MapContainerProps>;
+/**
+ * LazyMapView - Lazy-loaded map view (alias for MapContainer)
+ */
+declare const LazyMapView: React$1.ComponentType<Omit<MapContainerProps, "initialViewport">>;
+
+interface MermaidProps$1 {
+    chart: string;
+    className?: string;
+    isCompact?: boolean;
+}
+/**
+ * LazyMermaid - Lazy-loaded Mermaid diagram renderer
  *
- * Usage:
- * ```tsx
- * import { LottiePlayer } from '@djangocfg/ui-core/tools';
+ * Automatically shows loading state while Mermaid loads (~800KB)
+ */
+declare const LazyMermaid: React$1.ComponentType<MermaidProps$1>;
+
+interface PrettyCodeProps$1 {
+    data: string | object;
+    language: Language;
+    className?: string;
+    mode?: 'dark' | 'light';
+    inline?: boolean;
+    customBg?: string;
+    isCompact?: boolean;
+}
+
+/**
+ * LazyPrettyCode - Lazy-loaded code syntax highlighter
  *
- * <LottiePlayer
- *   src="https://example.com/animation.json"
- *   size="md"
- *   autoplay
- *   loop
- * />
- * ```
+ * Automatically shows loading state while Prism loads (~500KB)
  */
-declare function LottiePlayer(props: LottiePlayerProps): react_jsx_runtime.JSX.Element;
+declare const LazyPrettyCode: React$1.ComponentType<PrettyCodeProps$1>;
+
+interface SchemaSource {
+    id: string;
+    name: string;
+    url: string;
+}
+interface PlaygroundConfig {
+    schemas: SchemaSource[];
+    defaultSchemaId?: string;
+}
+
+/**
+ * Lazy-loaded OpenapiViewer Component
+ *
+ * Heavy OpenAPI viewer (~400KB) is loaded only when component is rendered.
+ * Use this for automatic code-splitting with Suspense fallback.
+ *
+ * For direct imports without lazy loading, use:
+ * import OpenapiViewer from '@djangocfg/ui-tools/openapi'
+ */
+
+interface PlaygroundProps$1 {
+    config: PlaygroundConfig;
+}
+
+/**
+ * LazyOpenapiViewer - Lazy-loaded OpenAPI schema viewer & playground
+ *
+ * Automatically shows loading state while OpenAPI components load (~400KB)
+ */
+declare const LazyOpenapiViewer: React$1.FC<PlaygroundProps$1>;
 
 /**
  * JSON Schema Form props interface
@@ -262,228 +379,500 @@ interface JsonSchemaFormProps<T = any> extends Partial<FormProps<T>> {
 }
 
 /**
- * JSON Schema Form Component
- *
- * A fully-featured form generator that creates forms from JSON Schema.
- * Built on top of react-jsonschema-form with custom widgets and templates
- * using @djangocfg/ui components.
- *
- * @example
- * ```tsx
- * const schema = {
- *   type: 'object',
- *   required: ['name'],
- *   properties: {
- *     name: { type: 'string', title: 'Name' },
- *     age: { type: 'number', title: 'Age' },
- *     active: { type: 'boolean', title: 'Active' }
- *   }
- * };
+ * LazyJsonSchemaForm - Lazy-loaded JSON Schema form generator
  *
- * <JsonSchemaForm
- *   schema={schema}
- *   onSubmit={(data) => console.log(data.formData)}
- * />
- * ```
+ * Automatically shows loading state while RJSF loads (~300KB)
  */
-declare function JsonSchemaForm<T = any>(props: JsonSchemaFormProps<T>): react_jsx_runtime.JSX.Element;
+declare const LazyJsonSchemaForm: React$1.ComponentType<JsonSchemaFormProps<any>>;
 
 /**
- * Text input widget for JSON Schema Form
- * Handles string fields with optional textarea for multiline
+ * LottiePlayer Types
+ *
+ * Type definitions for the Lottie animation player component
  */
-declare function TextWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+type LottieSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type LottieSpeed = 0.5 | 1 | 1.5 | 2;
+type LottieDirection = 1 | -1;
+interface LottiePlayerProps {
+    /**
+     * Animation data (JSON object) or URL to load from
+     */
+    src: string | object;
+    /**
+     * Size preset for the player
+     * @default 'md'
+     */
+    size?: LottieSize;
+    /**
+     * Custom width (overrides size preset)
+     */
+    width?: number | string;
+    /**
+     * Custom height (overrides size preset)
+     */
+    height?: number | string;
+    /**
+     * Autoplay animation
+     * @default true
+     */
+    autoplay?: boolean;
+    /**
+     * Loop animation
+     * @default true
+     */
+    loop?: boolean | number;
+    /**
+     * Playback speed
+     * @default 1
+     */
+    speed?: LottieSpeed;
+    /**
+     * Direction (1 = forward, -1 = reverse)
+     * @default 1
+     */
+    direction?: LottieDirection;
+    /**
+     * Show playback controls
+     * @default false
+     */
+    controls?: boolean;
+    /**
+     * Background color
+     */
+    background?: string;
+    /**
+     * CSS class name
+     */
+    className?: string;
+    /**
+     * Show loading state
+     * @default true
+     */
+    showLoading?: boolean;
+    /**
+     * Callback when animation completes
+     */
+    onComplete?: () => void;
+    /**
+     * Callback when animation loads
+     */
+    onLoad?: () => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
 
 /**
- * Number input widget for JSON Schema Form
- * Handles integer and number fields
+ * LazyLottiePlayer - Lazy-loaded Lottie animation player
+ *
+ * Automatically shows loading state while Lottie loads (~200KB)
  */
-declare function NumberWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+declare const LazyLottiePlayer: React$1.ComponentType<LottiePlayerProps>;
+
+interface HybridAudioPlayerProps {
+    /** Show playback controls */
+    showControls?: boolean;
+    /** Show frequency waveform */
+    showWaveform?: boolean;
+    /** Waveform visualization mode */
+    waveformMode?: 'frequency' | 'static';
+    /** Waveform height in pixels */
+    waveformHeight?: number;
+    /** Show time display */
+    showTimer?: boolean;
+    /** Show volume control */
+    showVolume?: boolean;
+    /** Show loop button */
+    showLoop?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+declare const HybridAudioPlayer: React$1.NamedExoticComponent<HybridAudioPlayerProps>;
 
 /**
- * Checkbox widget for JSON Schema Form
- * Handles boolean fields
+ * Audio Reactive Effects - Common utilities and types
+ *
+ * Provides reusable effect calculations and configurations
  */
-declare function CheckboxWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
-
+type EffectVariant = 'glow' | 'orbs' | 'spotlight' | 'mesh';
+type EffectIntensity = 'subtle' | 'medium' | 'strong';
+type EffectColorScheme = 'primary' | 'vibrant' | 'cool' | 'warm';
+interface AudioLevels {
+    bass: number;
+    mid: number;
+    high: number;
+    overall: number;
+}
+interface EffectConfig$1 {
+    opacity: number;
+    scale: number;
+    blur: string;
+}
+interface EffectColors {
+    colors: string[];
+    hueShift: number;
+}
+interface EffectLayer {
+    inset: number;
+    opacity: number;
+    scale: number;
+    background: string;
+    blur: string;
+    animation?: string;
+}
+declare const INTENSITY_CONFIG: Record<EffectIntensity, EffectConfig$1>;
+declare const COLOR_SCHEMES: Record<EffectColorScheme, string[]>;
 /**
- * Select dropdown widget for JSON Schema Form
- * Handles enum fields
+ * Get effect configuration from intensity setting
  */
-declare function SelectWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
-
+declare function getEffectConfig(intensity: EffectIntensity): EffectConfig$1;
 /**
- * Switch toggle widget for JSON Schema Form
- * Alternative boolean input
+ * Get color array from color scheme
  */
-declare function SwitchWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
-
+declare function getColors(colorScheme: EffectColorScheme): string[];
 /**
- * Color input widget for JSON Schema Form
- * Supports HSL format (h s% l%) and HEX format
- * Click on color box to open native color picker directly
- */
-declare function ColorWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Slider widget for JSON Schema Form
- *
- * Supports:
- * - number/integer types
- * - min/max from schema
- * - step from schema or options
- * - unit suffix (e.g., "rem", "px", "%")
- * - optional text input for precise values
- *
- * Usage in uiSchema:
- * ```json
- * {
- *   "radius": {
- *     "ui:widget": "slider",
- *     "ui:options": {
- *       "unit": "rem",
- *       "showInput": true,
- *       "step": 0.125
- *     }
- *   }
- * }
- * ```
- */
-declare function SliderWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Field template for JSON Schema Form
- * Controls the layout and styling of individual form fields
- */
-declare function FieldTemplate(props: FieldTemplateProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Object field template for JSON Schema Form
- *
- * Supports:
- * - Collapsible groups via ui:collapsible option
- * - Grid layout via ui:grid option
- * - Custom styling via ui:className
- *
- * Usage in uiSchema:
- * ```json
- * {
- *   "colors": {
- *     "ui:collapsible": true,
- *     "ui:collapsed": false,
- *     "ui:grid": 2
- *   }
- * }
- * ```
- */
-declare function ObjectFieldTemplate(props: ObjectFieldTemplateProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Array field template for JSON Schema Form
- * Renders array items with add/remove controls
- *
- * NOTE: In RJSF v6, `items` is an array of ReactElement (already rendered),
- * NOT an array of objects with {children, hasRemove, etc.}.
- * The actual rendering of each item (including remove buttons) is handled
- * by ArrayFieldItemTemplate.
- */
-declare function ArrayFieldTemplate(props: ArrayFieldTemplateProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Array field item template for JSON Schema Form
- * Renders individual array items with proper styling and action buttons
- *
- * In RJSF v6, this template is responsible for rendering each item in an array,
- * including the item content (children) and the action buttons (remove, move up/down, copy).
- */
-declare function ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Error list template for JSON Schema Form
- * Displays validation errors at the top of the form
- */
-declare function ErrorListTemplate(props: ErrorListProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Base input template for JSON Schema Form
- *
- * This template is CRITICAL for rendering primitive types (string, number)
- * inside arrays. Without it, array items with primitive types will render
- * as empty containers.
- *
- * RJSF uses this template for:
- * - Array items with primitive types (e.g., array of strings)
- * - Fields without explicit widget mapping
- * - All text-based widgets internally
- *
- * @see https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-templates/#baseinputtemplate
- */
-declare function BaseInputTemplate(props: WidgetProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Utility functions for JSON Schema Form
- */
-/**
- * Safely validates and normalizes JSON Schema
- * Ensures schema is valid before rendering
- */
-declare function validateSchema(schema: any): RJSFSchema | null;
-/**
- * Safely normalizes form data
- * Removes undefined values and ensures data structure matches schema
- */
-declare function normalizeFormData<T = any>(formData: any, schema: RJSFSchema): T;
-/**
- * Merges schema defaults with form data
+ * Prepare colors with hue shift based on audio levels
  */
-declare function mergeDefaults(formData: any, schema: RJSFSchema): any;
+declare function prepareEffectColors(colorScheme: EffectColorScheme, levels: AudioLevels): EffectColors;
 /**
- * Safely parses JSON string with error handling
+ * Calculate glow layer properties
  */
-declare function safeJsonParse<T = any>(jsonString: string, fallback: T): T;
+declare function calculateGlowLayers(levels: AudioLevels, config: EffectConfig$1, colors: string[]): EffectLayer[];
 /**
- * Safely stringifies object to JSON
+ * Calculate orb positions and properties - highly reactive
  */
-declare function safeJsonStringify(obj: any, pretty?: boolean): string;
+declare function calculateOrbs(levels: AudioLevels, config: EffectConfig$1, colors: string[], baseSize?: number): {
+    x: number;
+    y: number;
+    size: number;
+    color: string;
+    opacity: number;
+    scale: number;
+}[];
 /**
- * Checks if schema has required fields
+ * Calculate mesh gradient positions - dynamic and reactive
  */
-declare function hasRequiredFields(schema: RJSFSchema): boolean;
+declare function calculateMeshGradients(levels: AudioLevels, config: EffectConfig$1, colors: string[]): ({
+    width: string;
+    height: string;
+    top: string;
+    right: string;
+    color: string;
+    opacity: number;
+    scale: number;
+    rotation: number;
+    blur: string;
+    bottom?: undefined;
+    left?: undefined;
+    isCenter?: undefined;
+} | {
+    width: string;
+    height: string;
+    bottom: string;
+    left: string;
+    color: string;
+    opacity: number;
+    scale: number;
+    rotation: number;
+    blur: string;
+    top?: undefined;
+    right?: undefined;
+    isCenter?: undefined;
+} | {
+    width: string;
+    height: string;
+    top: string;
+    left: string;
+    color: string;
+    opacity: number;
+    scale: number;
+    rotation: number;
+    blur: string;
+    right?: undefined;
+    bottom?: undefined;
+    isCenter?: undefined;
+} | {
+    width: string;
+    height: string;
+    top: string;
+    left: string;
+    color: string;
+    opacity: number;
+    scale: number;
+    rotation: number;
+    isCenter: boolean;
+    blur: string;
+    right?: undefined;
+    bottom?: undefined;
+})[];
 /**
- * Gets all required field paths from schema
+ * Calculate spotlight effect properties - highly reactive
  */
-declare function getRequiredFields(schema: RJSFSchema, prefix?: string): string[];
+declare function calculateSpotlight(levels: AudioLevels, config: EffectConfig$1, colors: string[], rotation: number): {
+    rotation: number;
+    inset: number;
+    colors: {
+        color: string;
+        opacity: number;
+    }[];
+    pulseInset: number;
+    pulseOpacity: number;
+    pulseScale: number;
+    ringOpacity: number;
+    ringScale: number;
+};
 /**
- * Validates form data against required fields
+ * CSS for effect animations - can be injected once
  */
-declare function validateRequiredFields(formData: any, schema: RJSFSchema): {
-    valid: boolean;
-    missing: string[];
-};
+declare const EFFECT_ANIMATIONS = "\n  @keyframes spotlight-spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  @keyframes orb-float-1 {\n    0%, 100% { transform: translate(-50%, -50%) translateY(0); }\n    50% { transform: translate(-50%, -50%) translateY(-15px); }\n  }\n\n  @keyframes orb-float-2 {\n    0%, 100% { transform: translate(-50%, -50%) translateX(0); }\n    50% { transform: translate(-50%, -50%) translateX(15px); }\n  }\n\n  @keyframes orb-float-3 {\n    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }\n    33% { transform: translate(-50%, -50%) translate(10px, -10px); }\n    66% { transform: translate(-50%, -50%) translate(-10px, 10px); }\n  }\n\n  @keyframes orb-float-4 {\n    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }\n    50% { transform: translate(-50%, -50%) translate(-15px, -10px); }\n  }\n\n  @keyframes mesh-float-1 {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    25% { transform: translate(-5%, 10%) scale(1.05); }\n    50% { transform: translate(5%, 5%) scale(0.95); }\n    75% { transform: translate(-3%, -5%) scale(1.02); }\n  }\n\n  @keyframes mesh-float-2 {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    33% { transform: translate(8%, -8%) scale(1.08); }\n    66% { transform: translate(-6%, 6%) scale(0.92); }\n  }\n\n  @keyframes mesh-float-3 {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    50% { transform: translate(10%, 10%) scale(1.1); }\n  }\n\n  @keyframes mesh-float-4 {\n    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }\n    25% { transform: translate(10%, -5%) scale(1.1) rotate(5deg); }\n    50% { transform: translate(-5%, 10%) scale(0.95) rotate(-5deg); }\n    75% { transform: translate(-10%, -10%) scale(1.05) rotate(3deg); }\n  }\n\n  @keyframes mesh-pulse {\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }\n    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }\n  }\n\n  @keyframes glow-breathe {\n    0%, 100% { opacity: 0.6; transform: scale(1); }\n    50% { opacity: 1; transform: scale(1.05); }\n  }\n\n  @keyframes glow-rotate {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  @keyframes sparkle-move {\n    0% { opacity: 0; transform: scale(0.8); }\n    50% { opacity: 1; }\n    100% { opacity: 0; transform: scale(1.2); }\n  }\n";
 
-interface SchemaSource {
-    id: string;
-    name: string;
-    url: string;
-}
-interface PlaygroundConfig {
-    schemas: SchemaSource[];
-    defaultSchemaId?: string;
+interface UseHybridAudioOptions {
+    src: string;
+    autoPlay?: boolean;
+    initialVolume?: number;
+    loop?: boolean;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (time: number) => void;
+    onError?: (error: Error) => void;
+    onReady?: () => void;
 }
-
-interface PlaygroundProps {
-    config: PlaygroundConfig;
+interface HybridAudioState {
+    isReady: boolean;
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    isMuted: boolean;
+    isLooping: boolean;
+    buffered: TimeRanges | null;
+    error: Error | null;
 }
-declare const Playground: React__default.FC<PlaygroundProps>;
-
-/**
- * Video source type definitions
- */
-/** Simple URL source (mp4, webm, etc.) */
-interface UrlSource {
-    type: 'url';
-    url: string;
-    title?: string;
+interface HybridAudioControls {
+    play: () => Promise<void>;
+    pause: () => void;
+    togglePlay: () => void;
+    seek: (time: number) => void;
+    seekTo: (progress: number) => void;
+    skip: (seconds: number) => void;
+    setVolume: (vol: number) => void;
+    toggleMute: () => void;
+    toggleLoop: () => void;
+    setLoop: (enabled: boolean) => void;
+    restart: () => void;
+}
+interface HybridWebAudioAPI {
+    context: AudioContext | null;
+    analyser: AnalyserNode | null;
+    sourceNode: MediaElementAudioSourceNode | null;
+}
+interface UseHybridAudioReturn {
+    audioRef: React.RefObject<HTMLAudioElement | null>;
+    state: HybridAudioState;
+    controls: HybridAudioControls;
+    webAudio: HybridWebAudioAPI;
+}
+declare function useHybridAudio(options: UseHybridAudioOptions): UseHybridAudioReturn;
+
+declare function useHybridAudioAnalysis(analyser: AnalyserNode | null, isPlaying: boolean): AudioLevels;
+
+type VisualizationVariant = 'glow' | 'orbs' | 'spotlight' | 'mesh' | 'none';
+type VisualizationIntensity = 'subtle' | 'medium' | 'strong';
+type VisualizationColorScheme = 'primary' | 'vibrant' | 'cool' | 'warm';
+interface VisualizationSettings {
+    /** Enable reactive cover animation */
+    enabled: boolean;
+    /** Visual effect variant */
+    variant: VisualizationVariant;
+    /** Effect intensity */
+    intensity: VisualizationIntensity;
+    /** Color scheme */
+    colorScheme: VisualizationColorScheme;
+    /** Playback volume (0-1) */
+    volume: number;
+    /** Loop playback */
+    isLooping: boolean;
+}
+interface UseVisualizationReturn {
+    /** Current settings */
+    settings: VisualizationSettings;
+    /** Toggle visualization on/off */
+    toggle: () => void;
+    /** Set specific setting */
+    setSetting: <K extends keyof VisualizationSettings>(key: K, value: VisualizationSettings[K]) => void;
+    /** Cycle to next variant */
+    nextVariant: () => void;
+    /** Cycle to next intensity */
+    nextIntensity: () => void;
+    /** Cycle to next color scheme */
+    nextColorScheme: () => void;
+    /** Reset to defaults */
+    reset: () => void;
+}
+type UseAudioVisualizationReturn = UseVisualizationReturn;
+interface VisualizationProviderProps {
+    children: ReactNode;
+}
+declare function VisualizationProvider({ children }: VisualizationProviderProps): react_jsx_runtime.JSX.Element;
+declare function useVisualization(): UseVisualizationReturn;
+declare const useAudioVisualization: typeof useVisualization;
+declare const VARIANT_INFO: Record<VisualizationVariant, {
+    label: string;
+    icon: string;
+}>;
+declare const INTENSITY_INFO: Record<VisualizationIntensity, {
+    label: string;
+}>;
+declare const COLOR_SCHEME_INFO: Record<VisualizationColorScheme, {
+    label: string;
+    preview: string;
+}>;
+
+interface HybridSimplePlayerProps {
+    /** Audio source URL */
+    src: string;
+    /** Track title */
+    title?: string;
+    /** Artist name */
+    artist?: string;
+    /** Cover art URL or ReactNode */
+    coverArt?: string | ReactNode;
+    /** Cover art size */
+    coverSize?: 'sm' | 'md' | 'lg';
+    /** Show frequency waveform */
+    showWaveform?: boolean;
+    /** Waveform visualization mode */
+    waveformMode?: 'frequency' | 'static';
+    /** Waveform height in pixels */
+    waveformHeight?: number;
+    /** Show timer */
+    showTimer?: boolean;
+    /** Show volume control */
+    showVolume?: boolean;
+    /** Show loop/repeat button */
+    showLoop?: boolean;
+    /** Enable audio-reactive cover effects */
+    reactiveCover?: boolean;
+    /** Reactive effect variant */
+    variant?: VisualizationVariant;
+    /** Reactive effect intensity */
+    intensity?: EffectIntensity;
+    /** Reactive effect color scheme */
+    colorScheme?: EffectColorScheme;
+    /** Auto-play on load */
+    autoPlay?: boolean;
+    /** Loop playback */
+    loop?: boolean;
+    /** Initial volume (0-1) */
+    initialVolume?: number;
+    /** Layout direction */
+    layout?: 'vertical' | 'horizontal';
+    /** Additional class name */
+    className?: string;
+    /** Callbacks */
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onError?: (error: Error) => void;
+}
+declare function HybridSimplePlayer(props: HybridSimplePlayerProps): react_jsx_runtime.JSX.Element;
+
+interface HybridWaveformProps {
+    /** Visualization mode */
+    mode?: 'frequency' | 'static';
+    /** Canvas height in pixels */
+    height?: number;
+    /** Bar width in pixels */
+    barWidth?: number;
+    /** Gap between bars in pixels */
+    barGap?: number;
+    /** Bar border radius */
+    barRadius?: number;
+    /** Color for played portion */
+    progressColor?: string;
+    /** Color for unplayed portion */
+    waveColor?: string;
+    /** Color for buffered regions indicator */
+    bufferedColor?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Callback when user seeks */
+    onSeek?: (time: number) => void;
+}
+declare const HybridWaveform: React$1.NamedExoticComponent<HybridWaveformProps>;
+
+interface AudioReactiveCoverProps {
+    children: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: EffectVariant;
+    intensity?: EffectIntensity;
+    colorScheme?: EffectColorScheme;
+    onClick?: () => void;
+    className?: string;
+}
+declare function AudioReactiveCover({ children, size, variant, intensity, colorScheme, onClick, className, }: AudioReactiveCoverProps): react_jsx_runtime.JSX.Element;
+
+interface GlowEffectData {
+    layers: ReturnType<typeof calculateGlowLayers>;
+    hueShift: number;
+    showPulseRings: boolean;
+    showSparkle: boolean;
+}
+interface GlowEffectProps {
+    data: GlowEffectData;
+    colors: string[];
+    isPlaying: boolean;
+}
+declare function GlowEffect({ data, colors, isPlaying }: GlowEffectProps): react_jsx_runtime.JSX.Element;
+
+interface OrbsEffectProps {
+    orbs: ReturnType<typeof calculateOrbs>;
+    blur: string;
+    isPlaying: boolean;
+}
+declare function OrbsEffect({ orbs, blur, isPlaying }: OrbsEffectProps): react_jsx_runtime.JSX.Element;
+
+interface SpotlightEffectProps {
+    data: ReturnType<typeof calculateSpotlight>;
+    colors: string[];
+    blur: string;
+    isPlaying: boolean;
+}
+declare function SpotlightEffect({ data, colors, blur, isPlaying }: SpotlightEffectProps): react_jsx_runtime.JSX.Element;
+
+interface MeshEffectProps {
+    gradients: ReturnType<typeof calculateMeshGradients>;
+    blur: string;
+    isPlaying: boolean;
+}
+declare function MeshEffect({ gradients, isPlaying }: MeshEffectProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * LazyHybridAudioPlayer - Lazy-loaded full-featured audio player
+ *
+ * Automatically shows loading state while WaveSurfer loads (~200KB)
+ */
+declare const LazyHybridAudioPlayer: React$1.ComponentType<HybridAudioPlayerProps>;
+/**
+ * LazyHybridSimplePlayer - Lazy-loaded simple audio player
+ *
+ * Automatically shows loading state while WaveSurfer loads (~200KB)
+ */
+declare const LazyHybridSimplePlayer: React$1.ComponentType<HybridSimplePlayerProps>;
+
+/**
+ * Video source type definitions
+ */
+/** Simple URL source (mp4, webm, etc.) */
+interface UrlSource {
+    type: 'url';
+    url: string;
+    title?: string;
     poster?: string;
 }
 /** YouTube embed source */
@@ -722,586 +1111,604 @@ interface SimpleStreamSource {
 }
 
 /**
- * VideoPlayer - Unified Video Player Component
- *
- * Supports multiple modes:
- * - vidstack: Full-featured player (YouTube, Vimeo, HLS, DASH)
- * - native: Lightweight HTML5 player
- * - streaming: HTTP Range streaming with auth / Blob sources
- *
- * @example
- * // YouTube video
- * <VideoPlayer source={{ type: 'youtube', id: 'dQw4w9WgXcQ' }} />
+ * LazyVideoPlayer - Lazy-loaded professional video player
  *
- * @example
- * // HLS stream
- * <VideoPlayer source={{ type: 'hls', url: 'https://example.com/video.m3u8' }} />
- *
- * @example
- * // HTTP Range streaming with auth (full source)
- * <VideoPlayer
- *   source={{
- *     type: 'stream',
- *     sessionId: 'abc123',
- *     path: '/videos/movie.mp4',
- *     getStreamUrl: (id, path) => `/api/stream/${id}?path=${path}&token=${token}`
- *   }}
- * />
- *
- * @example
- * // HTTP Range streaming (simplified, using VideoPlayerProvider context)
- * <VideoPlayerProvider sessionId={sessionId} getStreamUrl={getStreamUrl}>
- *   <VideoPlayer source={{ type: 'stream', path: '/videos/movie.mp4' }} />
- * </VideoPlayerProvider>
- *
- * @example
- * // Blob/ArrayBuffer
- * <VideoPlayer source={{ type: 'blob', data: arrayBuffer, mimeType: 'video/mp4' }} />
+ * Automatically shows loading state while Vidstack loads (~150KB)
  */
+declare const LazyVideoPlayer: React$1.ComponentType<VideoPlayerProps>;
 
-declare const VideoPlayer: React__default.ForwardRefExoticComponent<VideoPlayerProps & {
-    source: VideoSourceUnion | SimpleStreamSource;
-} & React__default.RefAttributes<VideoPlayerRef>>;
-
-interface VideoControlsProps {
-    player: React__default.RefObject<MediaPlayerInstance | null>;
-    className?: string;
-}
-declare function VideoControls({ player, className }: VideoControlsProps): react_jsx_runtime.JSX.Element;
-
-interface VideoErrorFallbackProps extends ErrorFallbackProps {
-    /** URL for download button (if provided, shows download button) */
-    downloadUrl?: string;
-    /** Filename for download */
-    downloadFilename?: string;
-    /** File size to display */
-    fileSize?: string;
-    /** Show retry button */
-    showRetry?: boolean;
-    /** Custom className */
+interface JsonTreeConfig {
+    /** Maximum depth to expand automatically (default: 2) */
+    maxAutoExpandDepth?: number;
+    /** Maximum items in array to auto-expand (default: 10) */
+    maxAutoExpandArrayItems?: number;
+    /** Maximum object keys to auto-expand (default: 5) */
+    maxAutoExpandObjectKeys?: number;
+    /** Maximum string length before truncation (default: 200) */
+    maxStringLength?: number;
+    /** Collection limit for performance (default: 50) */
+    collectionLimit?: number;
+    /** Whether to show collection info (array length, object keys count) */
+    showCollectionInfo?: boolean;
+    /** Whether to show expand/collapse all buttons */
+    showExpandControls?: boolean;
+    /** Whether to show copy/download buttons */
+    showActionButtons?: boolean;
+    /** Custom CSS classes for the container */
     className?: string;
-    /** Custom icon */
-    icon?: React__default.ReactNode;
-    /** Custom title (defaults to error message) */
+    /** Whether to preserve object key order (default: true) */
+    preserveKeyOrder?: boolean;
+}
+interface JsonTreeComponentProps {
     title?: string;
-    /** Custom description */
-    description?: string;
+    data: unknown;
+    config?: JsonTreeConfig;
+    /** Override for react-json-tree props */
+    jsonTreeProps?: Partial<CommonExternalProps>;
 }
-/**
- * Pre-built error fallback component for VideoPlayer
- *
- * @example
- * // Basic usage
- * <VideoPlayer
- *   source={source}
- *   errorFallback={(props) => (
- *     <VideoErrorFallback
- *       {...props}
- *       downloadUrl={getDownloadUrl()}
- *       downloadFilename="video.mp4"
- *     />
- *   )}
- * />
- *
- * @example
- * // With file size
- * <VideoErrorFallback
- *   error="Failed to load video"
- *   downloadUrl="/api/download/video.mp4"
- *   fileSize="125 MB"
- *   showRetry
- *   retry={() => reloadVideo()}
- * />
- */
-declare function VideoErrorFallback({ error, retry, downloadUrl, downloadFilename, fileSize, showRetry, className, icon, title, description, }: VideoErrorFallbackProps): react_jsx_runtime.JSX.Element;
-interface CreateVideoErrorFallbackOptions {
-    /** Function to get download URL from source */
-    getDownloadUrl?: (source: unknown) => string | undefined;
-    /** Function to get filename from source */
-    getFilename?: (source: unknown) => string | undefined;
-    /** Function to get file size from source */
-    getFileSize?: (source: unknown) => string | undefined;
-    /** Show retry button */
-    showRetry?: boolean;
+declare const JsonTreeComponent: ({ title, data, config, jsonTreeProps }: JsonTreeComponentProps) => react_jsx_runtime.JSX.Element;
+
+interface JsonTreeProps {
+    title?: string;
+    data: unknown;
+    config?: JsonTreeConfig;
+    jsonTreeProps?: Partial<CommonExternalProps>;
 }
+
 /**
- * Factory to create error fallback function for VideoPlayer
- *
- * @example
- * const errorFallback = createVideoErrorFallback({
- *   getDownloadUrl: (source) => source.downloadUrl,
- *   getFilename: (source) => source.filename,
- *   showRetry: true,
- * });
+ * LazyJsonTree - Lazy-loaded JSON visualization tree
  *
- * <VideoPlayer source={source} errorFallback={errorFallback} />
+ * Automatically shows loading state while JsonTree loads (~100KB)
  */
-declare function createVideoErrorFallback(options: CreateVideoErrorFallbackOptions): (props: ErrorFallbackProps, source?: unknown) => React__default.ReactNode;
+declare const LazyJsonTree: React$1.ComponentType<JsonTreeProps>;
 
 /**
- * VidstackProvider - Full-featured video player using Vidstack
- * Supports YouTube, Vimeo, HLS, DASH, and direct URLs
+ * ImageViewer type definitions
  */
-
-declare const VidstackProvider: React__default.ForwardRefExoticComponent<VidstackProviderProps & React__default.RefAttributes<VideoPlayerRef>>;
+interface ImageFile {
+    /** Display name for the image */
+    name: string;
+    /** File path used for change detection and caching */
+    path: string;
+    /** Optional MIME type */
+    mimeType?: string;
+}
+interface ImageViewerProps {
+    /** File info (name, path, mimeType) */
+    file: ImageFile;
+    /** Image content as string (data URL or base64) or ArrayBuffer */
+    content: string | ArrayBuffer;
+    /**
+     * Direct image URL for HTTP streaming.
+     * When provided, bypasses content→blob conversion and uses URL directly.
+     * Useful for large files loaded via HTTP Range requests.
+     */
+    src?: string;
+    /** Hide expand button when already in dialog */
+    inDialog?: boolean;
+}
 
 /**
- * NativeProvider - Lightweight native HTML5 video player
- * For demo videos, background videos, autoplay loop muted scenarios
+ * LazyImageViewer - Lazy-loaded image viewer with zoom/pan/rotate
+ *
+ * Automatically shows loading state while ImageViewer loads (~50KB)
  */
-
-declare const NativeProvider: React__default.ForwardRefExoticComponent<NativeProviderProps & React__default.RefAttributes<VideoPlayerRef>>;
+declare const LazyImageViewer: React$1.ComponentType<ImageViewerProps>;
 
 /**
- * StreamProvider - HTTP Range streaming and Blob video player
- * Supports:
- * - HTTP Range requests with authorization (for large files)
- * - Blob/ArrayBuffer sources
- * - Data URL sources
- * - Fill parent container mode
- * - Custom error fallback
+ * Mermaid Component - Dynamic Import Wrapper
+ *
+ * Lazy loads the heavy Mermaid library (~800KB) only when needed.
+ * This significantly reduces the initial bundle size.
  */
 
-declare const StreamProvider: React__default.ForwardRefExoticComponent<StreamProviderProps & React__default.RefAttributes<VideoPlayerRef>>;
+interface MermaidProps {
+    chart: string;
+    className?: string;
+    isCompact?: boolean;
+}
+declare const Mermaid: React__default.FC<MermaidProps>;
 
 /**
- * Provider for VideoPlayer streaming configuration
+ * PrettyCode Component - Dynamic Import Wrapper
  *
- * @example
- * // In your app layout or FileWorkspace
- * <VideoPlayerProvider
- *   sessionId={sessionId}
- *   getStreamUrl={terminalClient.terminal_media.streamStreamRetrieveUrl}
- * >
- *   <VideoPlayer source={{ type: 'stream', path: '/video.mp4' }} />
- * </VideoPlayerProvider>
- */
-declare function VideoPlayerProvider({ children, getStreamUrl, sessionId, }: VideoPlayerProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to access VideoPlayer context
+ * Lazy loads the heavy Prism library (~500KB) only when needed.
+ * This significantly reduces the initial bundle size.
  */
-declare function useVideoPlayerContext(): VideoPlayerContextValue | null;
 
-/**
- * Video source and player mode resolvers
- */
+interface PrettyCodeProps {
+    data: string | object;
+    language: Language;
+    className?: string;
+    mode?: 'dark' | 'light';
+    inline?: boolean;
+    customBg?: string;
+    isCompact?: boolean;
+}
+declare const PrettyCode: React__default.FC<PrettyCodeProps>;
 
 /**
- * Determine which provider to use based on source type
- */
-declare function resolvePlayerMode(source: VideoSourceUnion, mode?: PlayerMode): 'vidstack' | 'native' | 'streaming';
-/**
- * Check if source is a simplified stream source (without getStreamUrl)
+ * useLottie Hook
+ *
+ * Hook for loading and managing Lottie animation data
  */
-declare function isSimpleStreamSource(source: VideoSourceUnion | SimpleStreamSource): source is SimpleStreamSource;
+interface UseLottieOptions {
+    /**
+     * Animation data (JSON object) or URL to load from
+     */
+    src: string | object;
+    /**
+     * Enable caching of loaded animations
+     * @default true
+     */
+    cache?: boolean;
+}
+interface UseLottieReturn {
+    /**
+     * Loaded animation data
+     */
+    animationData: object | null;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Error state
+     */
+    error: Error | null;
+    /**
+     * Retry loading the animation
+     */
+    retry: () => void;
+}
 /**
- * Resolve simplified stream source to full stream source using context
+ * Hook for loading Lottie animations from URLs or objects
+ *
+ * Features:
+ * - Loads animations from URLs or accepts animation objects directly
+ * - Caching support to prevent re-fetching the same animation
+ * - Error handling with retry capability
+ * - Loading states
+ *
+ * Usage:
+ * ```tsx
+ * const { animationData, isLoading, error, retry } = useLottie({
+ *   src: 'https://example.com/animation.json'
+ * });
+ *
+ * if (isLoading) return <div>Loading...</div>;
+ * if (error) return <div>Error: {error.message} <button onClick={retry}>Retry</button></div>;
+ * if (!animationData) return null;
+ *
+ * return <LottiePlayer animationData={animationData} />;
+ * ```
  */
-declare function resolveStreamSource(source: SimpleStreamSource, context: VideoPlayerContextValue | null): StreamSource | null;
+declare function useLottie(options: UseLottieOptions): UseLottieReturn;
 
 /**
- * File source resolution utilities
+ * LottiePlayer component wrapper with dynamic import
+ *
+ * This component automatically handles code splitting and lazy loading
+ * of the Lottie player to optimize bundle size.
+ *
+ * Usage:
+ * ```tsx
+ * import { LottiePlayer } from '@djangocfg/ui-core/tools';
+ *
+ * <LottiePlayer
+ *   src="https://example.com/animation.json"
+ *   size="md"
+ *   autoplay
+ *   loop
+ * />
+ * ```
  */
+declare function LottiePlayer(props: LottiePlayerProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Resolve file content to VideoSourceUnion
- * Useful for FileWorkspace/file manager integrations
+ * JSON Schema Form Component
+ *
+ * A fully-featured form generator that creates forms from JSON Schema.
+ * Built on top of react-jsonschema-form with custom widgets and templates
+ * using @djangocfg/ui components.
  *
  * @example
- * const source = resolveFileSource({
- *   content: file.content,
- *   path: file.path,
- *   mimeType: file.mimeType,
- *   sessionId: sessionId,
- *   loadMethod: file.loadMethod,
- *   getStreamUrl: terminalClient.terminal_media.streamStreamRetrieveUrl
- * });
+ * ```tsx
+ * const schema = {
+ *   type: 'object',
+ *   required: ['name'],
+ *   properties: {
+ *     name: { type: 'string', title: 'Name' },
+ *     age: { type: 'number', title: 'Age' },
+ *     active: { type: 'boolean', title: 'Active' }
+ *   }
+ * };
  *
- * <VideoPlayer source={source} />
+ * <JsonSchemaForm
+ *   schema={schema}
+ *   onSubmit={(data) => console.log(data.formData)}
+ * />
+ * ```
  */
-declare function resolveFileSource(options: ResolveFileSourceOptions): VideoSourceUnion | null;
+declare function JsonSchemaForm<T = any>(props: JsonSchemaFormProps<T>): react_jsx_runtime.JSX.Element;
 
-interface HybridAudioPlayerProps {
-    /** Show playback controls */
-    showControls?: boolean;
-    /** Show frequency waveform */
-    showWaveform?: boolean;
-    /** Waveform visualization mode */
-    waveformMode?: 'frequency' | 'static';
-    /** Waveform height in pixels */
-    waveformHeight?: number;
-    /** Show time display */
-    showTimer?: boolean;
-    /** Show volume control */
-    showVolume?: boolean;
-    /** Show loop button */
-    showLoop?: boolean;
-    /** Additional CSS class */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
-}
-declare const HybridAudioPlayer: React$1.NamedExoticComponent<HybridAudioPlayerProps>;
+/**
+ * Text input widget for JSON Schema Form
+ * Handles string fields with optional textarea for multiline
+ */
+declare function TextWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Audio Reactive Effects - Common utilities and types
- *
- * Provides reusable effect calculations and configurations
+ * Number input widget for JSON Schema Form
+ * Handles integer and number fields
  */
-type EffectVariant = 'glow' | 'orbs' | 'spotlight' | 'mesh';
-type EffectIntensity = 'subtle' | 'medium' | 'strong';
-type EffectColorScheme = 'primary' | 'vibrant' | 'cool' | 'warm';
-interface AudioLevels {
-    bass: number;
-    mid: number;
-    high: number;
-    overall: number;
-}
-interface EffectConfig$1 {
-    opacity: number;
-    scale: number;
-    blur: string;
-}
-interface EffectColors {
-    colors: string[];
-    hueShift: number;
-}
-interface EffectLayer {
-    inset: number;
-    opacity: number;
-    scale: number;
-    background: string;
-    blur: string;
-    animation?: string;
-}
-declare const INTENSITY_CONFIG: Record<EffectIntensity, EffectConfig$1>;
-declare const COLOR_SCHEMES: Record<EffectColorScheme, string[]>;
+declare function NumberWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Get effect configuration from intensity setting
+ * Checkbox widget for JSON Schema Form
+ * Handles boolean fields
  */
-declare function getEffectConfig(intensity: EffectIntensity): EffectConfig$1;
+declare function CheckboxWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Get color array from color scheme
+ * Select dropdown widget for JSON Schema Form
+ * Handles enum fields
  */
-declare function getColors(colorScheme: EffectColorScheme): string[];
+declare function SelectWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Prepare colors with hue shift based on audio levels
+ * Switch toggle widget for JSON Schema Form
+ * Alternative boolean input
  */
-declare function prepareEffectColors(colorScheme: EffectColorScheme, levels: AudioLevels): EffectColors;
+declare function SwitchWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Calculate glow layer properties
+ * Color input widget for JSON Schema Form
+ * Supports HSL format (h s% l%) and HEX format
+ * Click on color box to open native color picker directly
  */
-declare function calculateGlowLayers(levels: AudioLevels, config: EffectConfig$1, colors: string[]): EffectLayer[];
+declare function ColorWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Calculate orb positions and properties - highly reactive
+ * Slider widget for JSON Schema Form
+ *
+ * Supports:
+ * - number/integer types
+ * - min/max from schema
+ * - step from schema or options
+ * - unit suffix (e.g., "rem", "px", "%")
+ * - optional text input for precise values
+ *
+ * Usage in uiSchema:
+ * ```json
+ * {
+ *   "radius": {
+ *     "ui:widget": "slider",
+ *     "ui:options": {
+ *       "unit": "rem",
+ *       "showInput": true,
+ *       "step": 0.125
+ *     }
+ *   }
+ * }
+ * ```
  */
-declare function calculateOrbs(levels: AudioLevels, config: EffectConfig$1, colors: string[], baseSize?: number): {
-    x: number;
-    y: number;
-    size: number;
-    color: string;
-    opacity: number;
-    scale: number;
-}[];
+declare function SliderWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Calculate mesh gradient positions - dynamic and reactive
+ * Field template for JSON Schema Form
+ * Controls the layout and styling of individual form fields
  */
-declare function calculateMeshGradients(levels: AudioLevels, config: EffectConfig$1, colors: string[]): ({
-    width: string;
-    height: string;
-    top: string;
-    right: string;
-    color: string;
-    opacity: number;
-    scale: number;
-    rotation: number;
-    blur: string;
-    bottom?: undefined;
-    left?: undefined;
-    isCenter?: undefined;
-} | {
-    width: string;
-    height: string;
-    bottom: string;
-    left: string;
-    color: string;
-    opacity: number;
-    scale: number;
-    rotation: number;
-    blur: string;
-    top?: undefined;
-    right?: undefined;
-    isCenter?: undefined;
-} | {
-    width: string;
-    height: string;
-    top: string;
-    left: string;
-    color: string;
-    opacity: number;
-    scale: number;
-    rotation: number;
-    blur: string;
-    right?: undefined;
-    bottom?: undefined;
-    isCenter?: undefined;
-} | {
-    width: string;
-    height: string;
-    top: string;
-    left: string;
-    color: string;
-    opacity: number;
-    scale: number;
-    rotation: number;
-    isCenter: boolean;
-    blur: string;
-    right?: undefined;
-    bottom?: undefined;
-})[];
+declare function FieldTemplate(props: FieldTemplateProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Calculate spotlight effect properties - highly reactive
+ * Object field template for JSON Schema Form
+ *
+ * Supports:
+ * - Collapsible groups via ui:collapsible option
+ * - Grid layout via ui:grid option
+ * - Custom styling via ui:className
+ *
+ * Usage in uiSchema:
+ * ```json
+ * {
+ *   "colors": {
+ *     "ui:collapsible": true,
+ *     "ui:collapsed": false,
+ *     "ui:grid": 2
+ *   }
+ * }
+ * ```
  */
-declare function calculateSpotlight(levels: AudioLevels, config: EffectConfig$1, colors: string[], rotation: number): {
-    rotation: number;
-    inset: number;
-    colors: {
-        color: string;
-        opacity: number;
-    }[];
-    pulseInset: number;
-    pulseOpacity: number;
-    pulseScale: number;
-    ringOpacity: number;
-    ringScale: number;
-};
+declare function ObjectFieldTemplate(props: ObjectFieldTemplateProps): react_jsx_runtime.JSX.Element;
+
 /**
- * CSS for effect animations - can be injected once
+ * Array field template for JSON Schema Form
+ * Renders array items with add/remove controls
+ *
+ * NOTE: In RJSF v6, `items` is an array of ReactElement (already rendered),
+ * NOT an array of objects with {children, hasRemove, etc.}.
+ * The actual rendering of each item (including remove buttons) is handled
+ * by ArrayFieldItemTemplate.
  */
-declare const EFFECT_ANIMATIONS = "\n  @keyframes spotlight-spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  @keyframes orb-float-1 {\n    0%, 100% { transform: translate(-50%, -50%) translateY(0); }\n    50% { transform: translate(-50%, -50%) translateY(-15px); }\n  }\n\n  @keyframes orb-float-2 {\n    0%, 100% { transform: translate(-50%, -50%) translateX(0); }\n    50% { transform: translate(-50%, -50%) translateX(15px); }\n  }\n\n  @keyframes orb-float-3 {\n    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }\n    33% { transform: translate(-50%, -50%) translate(10px, -10px); }\n    66% { transform: translate(-50%, -50%) translate(-10px, 10px); }\n  }\n\n  @keyframes orb-float-4 {\n    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }\n    50% { transform: translate(-50%, -50%) translate(-15px, -10px); }\n  }\n\n  @keyframes mesh-float-1 {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    25% { transform: translate(-5%, 10%) scale(1.05); }\n    50% { transform: translate(5%, 5%) scale(0.95); }\n    75% { transform: translate(-3%, -5%) scale(1.02); }\n  }\n\n  @keyframes mesh-float-2 {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    33% { transform: translate(8%, -8%) scale(1.08); }\n    66% { transform: translate(-6%, 6%) scale(0.92); }\n  }\n\n  @keyframes mesh-float-3 {\n    0%, 100% { transform: translate(0, 0) scale(1); }\n    50% { transform: translate(10%, 10%) scale(1.1); }\n  }\n\n  @keyframes mesh-float-4 {\n    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }\n    25% { transform: translate(10%, -5%) scale(1.1) rotate(5deg); }\n    50% { transform: translate(-5%, 10%) scale(0.95) rotate(-5deg); }\n    75% { transform: translate(-10%, -10%) scale(1.05) rotate(3deg); }\n  }\n\n  @keyframes mesh-pulse {\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }\n    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }\n  }\n\n  @keyframes glow-breathe {\n    0%, 100% { opacity: 0.6; transform: scale(1); }\n    50% { opacity: 1; transform: scale(1.05); }\n  }\n\n  @keyframes glow-rotate {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  @keyframes sparkle-move {\n    0% { opacity: 0; transform: scale(0.8); }\n    50% { opacity: 1; }\n    100% { opacity: 0; transform: scale(1.2); }\n  }\n";
+declare function ArrayFieldTemplate(props: ArrayFieldTemplateProps): react_jsx_runtime.JSX.Element;
 
-interface UseHybridAudioOptions {
-    src: string;
-    autoPlay?: boolean;
-    initialVolume?: number;
-    loop?: boolean;
-    crossOrigin?: 'anonymous' | 'use-credentials';
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnded?: () => void;
-    onTimeUpdate?: (time: number) => void;
-    onError?: (error: Error) => void;
-    onReady?: () => void;
-}
-interface HybridAudioState {
-    isReady: boolean;
-    isPlaying: boolean;
-    currentTime: number;
-    duration: number;
-    volume: number;
-    isMuted: boolean;
-    isLooping: boolean;
-    buffered: TimeRanges | null;
-    error: Error | null;
-}
-interface HybridAudioControls {
-    play: () => Promise<void>;
-    pause: () => void;
-    togglePlay: () => void;
-    seek: (time: number) => void;
-    seekTo: (progress: number) => void;
-    skip: (seconds: number) => void;
-    setVolume: (vol: number) => void;
-    toggleMute: () => void;
-    toggleLoop: () => void;
-    setLoop: (enabled: boolean) => void;
-    restart: () => void;
-}
-interface HybridWebAudioAPI {
-    context: AudioContext | null;
-    analyser: AnalyserNode | null;
-    sourceNode: MediaElementAudioSourceNode | null;
-}
-interface UseHybridAudioReturn {
-    audioRef: React.RefObject<HTMLAudioElement | null>;
-    state: HybridAudioState;
-    controls: HybridAudioControls;
-    webAudio: HybridWebAudioAPI;
-}
-declare function useHybridAudio(options: UseHybridAudioOptions): UseHybridAudioReturn;
+/**
+ * Array field item template for JSON Schema Form
+ * Renders individual array items with proper styling and action buttons
+ *
+ * In RJSF v6, this template is responsible for rendering each item in an array,
+ * including the item content (children) and the action buttons (remove, move up/down, copy).
+ */
+declare function ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps): react_jsx_runtime.JSX.Element;
 
-declare function useHybridAudioAnalysis(analyser: AnalyserNode | null, isPlaying: boolean): AudioLevels;
+/**
+ * Error list template for JSON Schema Form
+ * Displays validation errors at the top of the form
+ */
+declare function ErrorListTemplate(props: ErrorListProps): react_jsx_runtime.JSX.Element;
 
-type VisualizationVariant = 'glow' | 'orbs' | 'spotlight' | 'mesh' | 'none';
-type VisualizationIntensity = 'subtle' | 'medium' | 'strong';
-type VisualizationColorScheme = 'primary' | 'vibrant' | 'cool' | 'warm';
-interface VisualizationSettings {
-    /** Enable reactive cover animation */
-    enabled: boolean;
-    /** Visual effect variant */
-    variant: VisualizationVariant;
-    /** Effect intensity */
-    intensity: VisualizationIntensity;
-    /** Color scheme */
-    colorScheme: VisualizationColorScheme;
-    /** Playback volume (0-1) */
-    volume: number;
-    /** Loop playback */
-    isLooping: boolean;
-}
-interface UseVisualizationReturn {
-    /** Current settings */
-    settings: VisualizationSettings;
-    /** Toggle visualization on/off */
-    toggle: () => void;
-    /** Set specific setting */
-    setSetting: <K extends keyof VisualizationSettings>(key: K, value: VisualizationSettings[K]) => void;
-    /** Cycle to next variant */
-    nextVariant: () => void;
-    /** Cycle to next intensity */
-    nextIntensity: () => void;
-    /** Cycle to next color scheme */
-    nextColorScheme: () => void;
-    /** Reset to defaults */
-    reset: () => void;
-}
-type UseAudioVisualizationReturn = UseVisualizationReturn;
-interface VisualizationProviderProps {
-    children: ReactNode;
+/**
+ * Base input template for JSON Schema Form
+ *
+ * This template is CRITICAL for rendering primitive types (string, number)
+ * inside arrays. Without it, array items with primitive types will render
+ * as empty containers.
+ *
+ * RJSF uses this template for:
+ * - Array items with primitive types (e.g., array of strings)
+ * - Fields without explicit widget mapping
+ * - All text-based widgets internally
+ *
+ * @see https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-templates/#baseinputtemplate
+ */
+declare function BaseInputTemplate(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Utility functions for JSON Schema Form
+ */
+/**
+ * Safely validates and normalizes JSON Schema
+ * Ensures schema is valid before rendering
+ */
+declare function validateSchema(schema: any): RJSFSchema | null;
+/**
+ * Safely normalizes form data
+ * Removes undefined values and ensures data structure matches schema
+ */
+declare function normalizeFormData<T = any>(formData: any, schema: RJSFSchema): T;
+/**
+ * Merges schema defaults with form data
+ */
+declare function mergeDefaults(formData: any, schema: RJSFSchema): any;
+/**
+ * Safely parses JSON string with error handling
+ */
+declare function safeJsonParse<T = any>(jsonString: string, fallback: T): T;
+/**
+ * Safely stringifies object to JSON
+ */
+declare function safeJsonStringify(obj: any, pretty?: boolean): string;
+/**
+ * Checks if schema has required fields
+ */
+declare function hasRequiredFields(schema: RJSFSchema): boolean;
+/**
+ * Gets all required field paths from schema
+ */
+declare function getRequiredFields(schema: RJSFSchema, prefix?: string): string[];
+/**
+ * Validates form data against required fields
+ */
+declare function validateRequiredFields(formData: any, schema: RJSFSchema): {
+    valid: boolean;
+    missing: string[];
+};
+
+interface PlaygroundProps {
+    config: PlaygroundConfig;
 }
-declare function VisualizationProvider({ children }: VisualizationProviderProps): react_jsx_runtime.JSX.Element;
-declare function useVisualization(): UseVisualizationReturn;
-declare const useAudioVisualization: typeof useVisualization;
-declare const VARIANT_INFO: Record<VisualizationVariant, {
-    label: string;
-    icon: string;
-}>;
-declare const INTENSITY_INFO: Record<VisualizationIntensity, {
-    label: string;
-}>;
-declare const COLOR_SCHEME_INFO: Record<VisualizationColorScheme, {
-    label: string;
-    preview: string;
-}>;
+declare const Playground: React__default.FC<PlaygroundProps>;
 
-interface HybridSimplePlayerProps {
-    /** Audio source URL */
-    src: string;
-    /** Track title */
-    title?: string;
-    /** Artist name */
-    artist?: string;
-    /** Cover art URL or ReactNode */
-    coverArt?: string | ReactNode;
-    /** Cover art size */
-    coverSize?: 'sm' | 'md' | 'lg';
-    /** Show frequency waveform */
-    showWaveform?: boolean;
-    /** Waveform visualization mode */
-    waveformMode?: 'frequency' | 'static';
-    /** Waveform height in pixels */
-    waveformHeight?: number;
-    /** Show timer */
-    showTimer?: boolean;
-    /** Show volume control */
-    showVolume?: boolean;
-    /** Show loop/repeat button */
-    showLoop?: boolean;
-    /** Enable audio-reactive cover effects */
-    reactiveCover?: boolean;
-    /** Reactive effect variant */
-    variant?: VisualizationVariant;
-    /** Reactive effect intensity */
-    intensity?: EffectIntensity;
-    /** Reactive effect color scheme */
-    colorScheme?: EffectColorScheme;
-    /** Auto-play on load */
-    autoPlay?: boolean;
-    /** Loop playback */
-    loop?: boolean;
-    /** Initial volume (0-1) */
-    initialVolume?: number;
-    /** Layout direction */
-    layout?: 'vertical' | 'horizontal';
-    /** Additional class name */
+/**
+ * VideoPlayer - Unified Video Player Component
+ *
+ * Supports multiple modes:
+ * - vidstack: Full-featured player (YouTube, Vimeo, HLS, DASH)
+ * - native: Lightweight HTML5 player
+ * - streaming: HTTP Range streaming with auth / Blob sources
+ *
+ * @example
+ * // YouTube video
+ * <VideoPlayer source={{ type: 'youtube', id: 'dQw4w9WgXcQ' }} />
+ *
+ * @example
+ * // HLS stream
+ * <VideoPlayer source={{ type: 'hls', url: 'https://example.com/video.m3u8' }} />
+ *
+ * @example
+ * // HTTP Range streaming with auth (full source)
+ * <VideoPlayer
+ *   source={{
+ *     type: 'stream',
+ *     sessionId: 'abc123',
+ *     path: '/videos/movie.mp4',
+ *     getStreamUrl: (id, path) => `/api/stream/${id}?path=${path}&token=${token}`
+ *   }}
+ * />
+ *
+ * @example
+ * // HTTP Range streaming (simplified, using VideoPlayerProvider context)
+ * <VideoPlayerProvider sessionId={sessionId} getStreamUrl={getStreamUrl}>
+ *   <VideoPlayer source={{ type: 'stream', path: '/videos/movie.mp4' }} />
+ * </VideoPlayerProvider>
+ *
+ * @example
+ * // Blob/ArrayBuffer
+ * <VideoPlayer source={{ type: 'blob', data: arrayBuffer, mimeType: 'video/mp4' }} />
+ */
+
+declare const VideoPlayer: React__default.ForwardRefExoticComponent<VideoPlayerProps & {
+    source: VideoSourceUnion | SimpleStreamSource;
+} & React__default.RefAttributes<VideoPlayerRef>>;
+
+interface VideoControlsProps {
+    player: React__default.RefObject<MediaPlayerInstance | null>;
     className?: string;
-    /** Callbacks */
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnded?: () => void;
-    onError?: (error: Error) => void;
 }
-declare function HybridSimplePlayer(props: HybridSimplePlayerProps): react_jsx_runtime.JSX.Element;
+declare function VideoControls({ player, className }: VideoControlsProps): react_jsx_runtime.JSX.Element;
 
-interface HybridWaveformProps {
-    /** Visualization mode */
-    mode?: 'frequency' | 'static';
-    /** Canvas height in pixels */
-    height?: number;
-    /** Bar width in pixels */
-    barWidth?: number;
-    /** Gap between bars in pixels */
-    barGap?: number;
-    /** Bar border radius */
-    barRadius?: number;
-    /** Color for played portion */
-    progressColor?: string;
-    /** Color for unplayed portion */
-    waveColor?: string;
-    /** Color for buffered regions indicator */
-    bufferedColor?: string;
-    /** Additional CSS class */
+interface VideoErrorFallbackProps extends ErrorFallbackProps {
+    /** URL for download button (if provided, shows download button) */
+    downloadUrl?: string;
+    /** Filename for download */
+    downloadFilename?: string;
+    /** File size to display */
+    fileSize?: string;
+    /** Show retry button */
+    showRetry?: boolean;
+    /** Custom className */
     className?: string;
-    /** Callback when user seeks */
-    onSeek?: (time: number) => void;
+    /** Custom icon */
+    icon?: React__default.ReactNode;
+    /** Custom title (defaults to error message) */
+    title?: string;
+    /** Custom description */
+    description?: string;
 }
-declare const HybridWaveform: React$1.NamedExoticComponent<HybridWaveformProps>;
+/**
+ * Pre-built error fallback component for VideoPlayer
+ *
+ * @example
+ * // Basic usage
+ * <VideoPlayer
+ *   source={source}
+ *   errorFallback={(props) => (
+ *     <VideoErrorFallback
+ *       {...props}
+ *       downloadUrl={getDownloadUrl()}
+ *       downloadFilename="video.mp4"
+ *     />
+ *   )}
+ * />
+ *
+ * @example
+ * // With file size
+ * <VideoErrorFallback
+ *   error="Failed to load video"
+ *   downloadUrl="/api/download/video.mp4"
+ *   fileSize="125 MB"
+ *   showRetry
+ *   retry={() => reloadVideo()}
+ * />
+ */
+declare function VideoErrorFallback({ error, retry, downloadUrl, downloadFilename, fileSize, showRetry, className, icon, title, description, }: VideoErrorFallbackProps): react_jsx_runtime.JSX.Element;
+interface CreateVideoErrorFallbackOptions {
+    /** Function to get download URL from source */
+    getDownloadUrl?: (source: unknown) => string | undefined;
+    /** Function to get filename from source */
+    getFilename?: (source: unknown) => string | undefined;
+    /** Function to get file size from source */
+    getFileSize?: (source: unknown) => string | undefined;
+    /** Show retry button */
+    showRetry?: boolean;
+}
+/**
+ * Factory to create error fallback function for VideoPlayer
+ *
+ * @example
+ * const errorFallback = createVideoErrorFallback({
+ *   getDownloadUrl: (source) => source.downloadUrl,
+ *   getFilename: (source) => source.filename,
+ *   showRetry: true,
+ * });
+ *
+ * <VideoPlayer source={source} errorFallback={errorFallback} />
+ */
+declare function createVideoErrorFallback(options: CreateVideoErrorFallbackOptions): (props: ErrorFallbackProps, source?: unknown) => React__default.ReactNode;
+
+/**
+ * VidstackProvider - Full-featured video player using Vidstack
+ * Supports YouTube, Vimeo, HLS, DASH, and direct URLs
+ */
+
+declare const VidstackProvider: React__default.ForwardRefExoticComponent<VidstackProviderProps & React__default.RefAttributes<VideoPlayerRef>>;
+
+/**
+ * NativeProvider - Lightweight native HTML5 video player
+ * For demo videos, background videos, autoplay loop muted scenarios
+ */
+
+declare const NativeProvider: React__default.ForwardRefExoticComponent<NativeProviderProps & React__default.RefAttributes<VideoPlayerRef>>;
+
+/**
+ * StreamProvider - HTTP Range streaming and Blob video player
+ * Supports:
+ * - HTTP Range requests with authorization (for large files)
+ * - Blob/ArrayBuffer sources
+ * - Data URL sources
+ * - Fill parent container mode
+ * - Custom error fallback
+ */
 
-interface AudioReactiveCoverProps {
-    children: ReactNode;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: EffectVariant;
-    intensity?: EffectIntensity;
-    colorScheme?: EffectColorScheme;
-    onClick?: () => void;
-    className?: string;
-}
-declare function AudioReactiveCover({ children, size, variant, intensity, colorScheme, onClick, className, }: AudioReactiveCoverProps): react_jsx_runtime.JSX.Element;
+declare const StreamProvider: React__default.ForwardRefExoticComponent<StreamProviderProps & React__default.RefAttributes<VideoPlayerRef>>;
 
-interface GlowEffectData {
-    layers: ReturnType<typeof calculateGlowLayers>;
-    hueShift: number;
-    showPulseRings: boolean;
-    showSparkle: boolean;
-}
-interface GlowEffectProps {
-    data: GlowEffectData;
-    colors: string[];
-    isPlaying: boolean;
-}
-declare function GlowEffect({ data, colors, isPlaying }: GlowEffectProps): react_jsx_runtime.JSX.Element;
+/**
+ * Provider for VideoPlayer streaming configuration
+ *
+ * @example
+ * // In your app layout or FileWorkspace
+ * <VideoPlayerProvider
+ *   sessionId={sessionId}
+ *   getStreamUrl={terminalClient.terminal_media.streamStreamRetrieveUrl}
+ * >
+ *   <VideoPlayer source={{ type: 'stream', path: '/video.mp4' }} />
+ * </VideoPlayerProvider>
+ */
+declare function VideoPlayerProvider({ children, getStreamUrl, sessionId, }: VideoPlayerProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access VideoPlayer context
+ */
+declare function useVideoPlayerContext(): VideoPlayerContextValue | null;
 
-interface OrbsEffectProps {
-    orbs: ReturnType<typeof calculateOrbs>;
-    blur: string;
-    isPlaying: boolean;
-}
-declare function OrbsEffect({ orbs, blur, isPlaying }: OrbsEffectProps): react_jsx_runtime.JSX.Element;
+/**
+ * Video source and player mode resolvers
+ */
 
-interface SpotlightEffectProps {
-    data: ReturnType<typeof calculateSpotlight>;
-    colors: string[];
-    blur: string;
-    isPlaying: boolean;
-}
-declare function SpotlightEffect({ data, colors, blur, isPlaying }: SpotlightEffectProps): react_jsx_runtime.JSX.Element;
+/**
+ * Determine which provider to use based on source type
+ */
+declare function resolvePlayerMode(source: VideoSourceUnion, mode?: PlayerMode): 'vidstack' | 'native' | 'streaming';
+/**
+ * Check if source is a simplified stream source (without getStreamUrl)
+ */
+declare function isSimpleStreamSource(source: VideoSourceUnion | SimpleStreamSource): source is SimpleStreamSource;
+/**
+ * Resolve simplified stream source to full stream source using context
+ */
+declare function resolveStreamSource(source: SimpleStreamSource, context: VideoPlayerContextValue | null): StreamSource | null;
 
-interface MeshEffectProps {
-    gradients: ReturnType<typeof calculateMeshGradients>;
-    blur: string;
-    isPlaying: boolean;
-}
-declare function MeshEffect({ gradients, isPlaying }: MeshEffectProps): react_jsx_runtime.JSX.Element;
+/**
+ * File source resolution utilities
+ */
+
+/**
+ * Resolve file content to VideoSourceUnion
+ * Useful for FileWorkspace/file manager integrations
+ *
+ * @example
+ * const source = resolveFileSource({
+ *   content: file.content,
+ *   path: file.path,
+ *   mimeType: file.mimeType,
+ *   sessionId: sessionId,
+ *   loadMethod: file.loadMethod,
+ *   getStreamUrl: terminalClient.terminal_media.streamStreamRetrieveUrl
+ * });
+ *
+ * <VideoPlayer source={source} />
+ */
+declare function resolveFileSource(options: ResolveFileSourceOptions): VideoSourceUnion | null;
 
 interface HybridAudioContextValue {
     state: HybridAudioState;
@@ -1352,32 +1759,6 @@ interface EqualizerOptions {
  */
 declare function formatTime(seconds: number): string;
 
-/**
- * ImageViewer type definitions
- */
-interface ImageFile {
-    /** Display name for the image */
-    name: string;
-    /** File path used for change detection and caching */
-    path: string;
-    /** Optional MIME type */
-    mimeType?: string;
-}
-interface ImageViewerProps {
-    /** File info (name, path, mimeType) */
-    file: ImageFile;
-    /** Image content as string (data URL or base64) or ArrayBuffer */
-    content: string | ArrayBuffer;
-    /**
-     * Direct image URL for HTTP streaming.
-     * When provided, bypasses content→blob conversion and uses URL directly.
-     * Useful for large files loaded via HTTP Range requests.
-     */
-    src?: string;
-    /** Hide expand button when already in dialog */
-    inDialog?: boolean;
-}
-
 declare function ImageViewer({ file, content, src: directSrc, inDialog }: ImageViewerProps): react_jsx_runtime.JSX.Element;
 
 interface BlobUrlEntry {
@@ -1558,137 +1939,4 @@ declare function useBlobUrlCleanup(key: string | null): void;
  */
 declare function generateContentKey(content: ArrayBuffer): string;
 
-interface MarkdownMessageProps {
-    /** Markdown content to render */
-    content: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Whether the message is from the user (affects styling) */
-    isUser?: boolean;
-    /** Use compact size (text-xs instead of text-sm) */
-    isCompact?: boolean;
-    /**
-     * Enable collapsible "Read more..." functionality
-     * When enabled, long content will be truncated with a toggle button
-     * @default false
-     */
-    collapsible?: boolean;
-    /**
-     * Maximum character length before showing "Read more..."
-     * Only applies when collapsible is true
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
-    maxLength?: number;
-    /**
-     * Maximum number of lines before showing "Read more..."
-     * Only applies when collapsible is true
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
-    maxLines?: number;
-    /**
-     * Custom "Read more" button text
-     * @default "Read more..."
-     */
-    readMoreLabel?: string;
-    /**
-     * Custom "Show less" button text
-     * @default "Show less"
-     */
-    showLessLabel?: string;
-    /**
-     * Start expanded (only applies when collapsible is true)
-     * @default false
-     */
-    defaultExpanded?: boolean;
-    /**
-     * Callback when collapsed state changes
-     */
-    onCollapseChange?: (isCollapsed: boolean) => void;
-}
-/**
- * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
- *
- * Features:
- * - GitHub Flavored Markdown (GFM) support
- * - Syntax highlighted code blocks with copy button
- * - Mermaid diagram rendering
- * - Tables, lists, blockquotes
- * - User/assistant styling modes
- * - Plain text optimization (skips ReactMarkdown for simple text)
- * - Collapsible "Read more..." for long messages
- *
- * @example
- * ```tsx
- * <MarkdownMessage content="# Hello\n\nThis is **bold** text." />
- *
- * // User message styling
- * <MarkdownMessage content="Some content" isUser />
- *
- * // Collapsible long content (for chat apps)
- * <MarkdownMessage
- *   content={longText}
- *   collapsible
- *   maxLength={300}
- *   maxLines={5}
- * />
- * ```
- */
-declare const MarkdownMessage: React__default.FC<MarkdownMessageProps>;
-
-interface UseCollapsibleContentOptions {
-    /**
-     * Maximum character length before collapsing
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
-    maxLength?: number;
-    /**
-     * Maximum number of lines before collapsing
-     * If both maxLength and maxLines are set, the stricter limit applies
-     */
-    maxLines?: number;
-    /**
-     * Start in expanded state (default: false - starts collapsed)
-     */
-    defaultExpanded?: boolean;
-}
-interface UseCollapsibleContentResult {
-    /** Whether content is currently collapsed */
-    isCollapsed: boolean;
-    /** Toggle between collapsed/expanded state */
-    toggleCollapsed: () => void;
-    /** Set collapsed state directly */
-    setCollapsed: (collapsed: boolean) => void;
-    /** Content to display (truncated if collapsed, full if expanded) */
-    displayContent: string;
-    /** Whether the content exceeds limits and should be collapsible */
-    shouldCollapse: boolean;
-    /** Original content length */
-    originalLength: number;
-    /** Original line count */
-    originalLineCount: number;
-}
-/**
- * Hook for managing collapsible content with "Read more..." functionality
- *
- * @example
- * ```tsx
- * const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } = useCollapsibleContent(
- *   longText,
- *   { maxLength: 300, maxLines: 5 }
- * );
- *
- * return (
- *   <div>
- *     <Markdown content={displayContent} />
- *     {shouldCollapse && (
- *       <button onClick={toggleCollapsed}>
- *         {isCollapsed ? 'Read more...' : 'Show less'}
- *       </button>
- *     )}
- *   </div>
- * );
- * ```
- */
-declare function useCollapsibleContent(content: string, options?: UseCollapsibleContentOptions): UseCollapsibleContentResult;
-
-export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, type CreateVideoErrorFallbackOptions, type DASHSource, type DataUrlSource, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, MarkdownMessage, type MarkdownMessageProps, Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps, PrettyCode, type ResolveFileSourceOptions, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, type UrlSource, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type YouTubeSource, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, type DASHSource, type DataUrlSource, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyHybridAudioPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownMessage, type MarkdownMessageProps, type MarkerData, Mermaid, type MermaidProps$1 as MermaidProps, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, type UrlSource, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type YouTubeSource, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };