@json-render/react-native 0.4.3

package/dist/index.d.ts

@@ -0,0 +1,591 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentType } from 'react';
+import { StateModel as StateModel$1, AuthState, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, LegacyCatalog, ComponentDefinition, FlatElement } from '@json-render/core';
+export { Spec } from '@json-render/core';
+export { ElementTreeSchema, ElementTreeSpec, ReactNativeSchema, ReactNativeSpec, elementTreeSchema, schema } from './schema.js';
+export { ActionDefinition, ComponentDefinition, standardActionDefinitions, standardComponentDefinitions } from './catalog.js';
+import 'zod';
+
+/**
+ * State context value
+ */
+interface StateContextValue {
+    /** The current state model */
+    state: StateModel$1;
+    /** Auth state for visibility evaluation */
+    authState?: AuthState;
+    /** Get a value by path */
+    get: (path: string) => unknown;
+    /** Set a value by path */
+    set: (path: string, value: unknown) => void;
+    /** Update multiple values at once */
+    update: (updates: Record<string, unknown>) => void;
+}
+/**
+ * Props for StateProvider
+ */
+interface StateProviderProps {
+    /** Initial state model */
+    initialState?: StateModel$1;
+    /** Auth state */
+    authState?: AuthState;
+    /** Callback when state changes */
+    onStateChange?: (path: string, value: unknown) => void;
+    children: ReactNode;
+}
+/**
+ * Provider for state model context
+ */
+declare function StateProvider({ initialState, authState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the state context
+ */
+declare function useStateStore(): StateContextValue;
+/**
+ * Hook to get a value from the state model
+ */
+declare function useStateValue<T>(path: string): T | undefined;
+/**
+ * Hook to get and set a value from the state model (like useState)
+ */
+declare function useStateBinding<T>(path: string): [T | undefined, (value: T) => void];
+
+/**
+ * Visibility context value
+ */
+interface VisibilityContextValue {
+    /** Evaluate a visibility condition */
+    isVisible: (condition: VisibilityCondition | undefined) => boolean;
+    /** The underlying visibility context */
+    ctx: VisibilityContext;
+}
+/**
+ * Props for VisibilityProvider
+ */
+interface VisibilityProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider for visibility evaluation
+ */
+declare function VisibilityProvider({ children }: VisibilityProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access visibility evaluation
+ */
+declare function useVisibility(): VisibilityContextValue;
+/**
+ * Hook to check if a condition is visible
+ */
+declare function useIsVisible(condition: VisibilityCondition | undefined): boolean;
+
+/**
+ * Pending confirmation state
+ */
+interface PendingConfirmation {
+    /** The resolved action */
+    action: ResolvedAction;
+    /** The action handler */
+    handler: ActionHandler;
+    /** Resolve callback */
+    resolve: () => void;
+    /** Reject callback */
+    reject: () => void;
+}
+/**
+ * Action context value
+ */
+interface ActionContextValue {
+    /** Registered action handlers */
+    handlers: Record<string, ActionHandler>;
+    /** Currently loading action names */
+    loadingActions: Set<string>;
+    /** Pending confirmation dialog */
+    pendingConfirmation: PendingConfirmation | null;
+    /** Execute an action binding */
+    execute: (binding: ActionBinding) => Promise<void>;
+    /** Confirm the pending action */
+    confirm: () => void;
+    /** Cancel the pending action */
+    cancel: () => void;
+    /** Register an action handler */
+    registerHandler: (name: string, handler: ActionHandler) => void;
+}
+/**
+ * Props for ActionProvider
+ */
+interface ActionProviderProps {
+    /** Initial action handlers */
+    handlers?: Record<string, ActionHandler>;
+    /** Navigation function */
+    navigate?: (path: string) => void;
+    children: ReactNode;
+}
+/**
+ * Provider for action execution
+ */
+declare function ActionProvider({ handlers: initialHandlers, navigate, children, }: ActionProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access action context
+ */
+declare function useActions(): ActionContextValue;
+/**
+ * Hook to execute an action binding
+ */
+declare function useAction(binding: ActionBinding): {
+    execute: () => Promise<void>;
+    isLoading: boolean;
+};
+/**
+ * Props for ConfirmDialog component
+ */
+interface ConfirmDialogProps {
+    /** The confirmation config */
+    confirm: ActionConfirm;
+    /** Called when confirmed */
+    onConfirm: () => void;
+    /** Called when cancelled */
+    onCancel: () => void;
+}
+/**
+ * Default confirmation dialog component for React Native
+ */
+declare function ConfirmDialog({ confirm, onConfirm, onCancel, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Field validation state
+ */
+interface FieldValidationState {
+    /** Whether the field has been touched */
+    touched: boolean;
+    /** Whether the field has been validated */
+    validated: boolean;
+    /** Validation result */
+    result: ValidationResult | null;
+}
+/**
+ * Validation context value
+ */
+interface ValidationContextValue {
+    /** Custom validation functions from catalog */
+    customFunctions: Record<string, ValidationFunction>;
+    /** Validation state by field path */
+    fieldStates: Record<string, FieldValidationState>;
+    /** Validate a field */
+    validate: (path: string, config: ValidationConfig) => ValidationResult;
+    /** Mark field as touched */
+    touch: (path: string) => void;
+    /** Clear validation for a field */
+    clear: (path: string) => void;
+    /** Validate all fields */
+    validateAll: () => boolean;
+    /** Register field config */
+    registerField: (path: string, config: ValidationConfig) => void;
+}
+/**
+ * Props for ValidationProvider
+ */
+interface ValidationProviderProps {
+    /** Custom validation functions from catalog */
+    customFunctions?: Record<string, ValidationFunction>;
+    children: ReactNode;
+}
+/**
+ * Provider for validation
+ */
+declare function ValidationProvider({ customFunctions, children, }: ValidationProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access validation context
+ */
+declare function useValidation(): ValidationContextValue;
+/**
+ * Hook to get validation state for a field
+ */
+declare function useFieldValidation(path: string, config?: ValidationConfig): {
+    state: FieldValidationState;
+    validate: () => ValidationResult;
+    touch: () => void;
+    clear: () => void;
+    errors: string[];
+    isValid: boolean;
+};
+
+/**
+ * Repeat scope value provided to child elements inside a Repeat.
+ */
+interface RepeatScopeValue {
+    /** Absolute state path to the current array item (e.g. "/todos/0") */
+    basePath: string;
+    /** Index of the current item in the array */
+    index: number;
+}
+/**
+ * Provides repeat scope to child elements so $item and $index tokens resolve correctly.
+ */
+declare function RepeatScopeProvider({ basePath, index, children, }: RepeatScopeValue & {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Read the current repeat scope (or null if not inside a Repeat).
+ */
+declare function useRepeatScope(): RepeatScopeValue | null;
+/**
+ * Recursively rewrite `$item` and `$index` tokens in a value.
+ *
+ * - `"$item/foo"` → `"{basePath}/foo"`
+ * - `"$item"` → `"{basePath}"`
+ * - `"$index"` → `index` (number)
+ */
+declare function rewriteRepeatTokens(value: unknown, basePath: string, index: number): unknown;
+
+/**
+ * State setter function for updating application state
+ */
+type SetState = (updater: (prev: Record<string, unknown>) => Record<string, unknown>) => void;
+/**
+ * State model type (generic record)
+ */
+type StateModel = Record<string, unknown>;
+/**
+ * Context passed to component render functions
+ * @example
+ * const Button: ComponentFn<typeof catalog, 'Button'> = (ctx) => {
+ *   return <Pressable onPress={() => ctx.emit?.("press")}><Text>{ctx.props.label}</Text></Pressable>
+ * }
+ */
+interface ComponentContext<C extends Catalog, K extends keyof InferCatalogComponents<C>> {
+    props: InferComponentProps<C, K>;
+    children?: ReactNode;
+    /** Emit a named event. The renderer resolves the event to an action binding from the element's `on` field. */
+    emit?: (event: string) => void;
+    loading?: boolean;
+}
+/**
+ * Component render function type for React Native
+ * @example
+ * const Button: ComponentFn<typeof catalog, 'Button'> = ({ props, emit }) => (
+ *   <Pressable onPress={() => emit?.("press")}><Text>{props.label}</Text></Pressable>
+ * );
+ */
+type ComponentFn<C extends Catalog, K extends keyof InferCatalogComponents<C>> = (ctx: ComponentContext<C, K>) => ReactNode;
+/**
+ * Registry of all component render functions for a catalog
+ * @example
+ * const components: Components<typeof myCatalog> = {
+ *   Button: ({ props }) => <Pressable><Text>{props.label}</Text></Pressable>,
+ *   Input: ({ props }) => <TextInput placeholder={props.placeholder} />,
+ * };
+ */
+type Components<C extends Catalog> = {
+    [K in keyof InferCatalogComponents<C>]: ComponentFn<C, K>;
+};
+/**
+ * Action handler function type
+ * @example
+ * const viewCustomers: ActionFn<typeof catalog, 'viewCustomers'> = async (params, setState) => {
+ *   const data = await fetch('/api/customers');
+ *   setState(prev => ({ ...prev, customers: data }));
+ * };
+ */
+type ActionFn<C extends Catalog, K extends keyof InferCatalogActions<C>> = (params: InferActionParams<C, K> | undefined, setState: SetState, state: StateModel) => Promise<void>;
+/**
+ * Registry of all action handlers for a catalog
+ * @example
+ * const actions: Actions<typeof myCatalog> = {
+ *   viewCustomers: async (params, setState) => { ... },
+ *   createCustomer: async (params, setState) => { ... },
+ * };
+ */
+type Actions<C extends Catalog> = {
+    [K in keyof InferCatalogActions<C>]: ActionFn<C, K>;
+};
+
+/**
+ * Create standard action handlers for React Native.
+ *
+ * @param options - Configuration for standard actions
+ * @returns Action handler map compatible with ActionProvider
+ */
+declare function createStandardActionHandlers(options?: {
+    /** Navigation function - called by navigate and goBack actions */
+    navigate?: (screen: string, params?: Record<string, unknown>) => void;
+    /** Go back function */
+    goBack?: () => void;
+    /** Called when setData action is triggered */
+    onSetData?: (path: string, value: unknown) => void;
+    /** Called when refresh action is triggered */
+    onRefresh?: (target?: string) => void;
+}): Record<string, (params: Record<string, unknown>) => Promise<void>>;
+/**
+ * Standard component registry with all built-in React Native components.
+ * Pass to Renderer or merge with custom components.
+ */
+declare const standardComponents: ComponentRegistry;
+
+/**
+ * Props passed to component renderers
+ */
+interface ComponentRenderProps<P = Record<string, unknown>> {
+    /** The element being rendered */
+    element: UIElement<string, P>;
+    /** Rendered children */
+    children?: ReactNode;
+    /** Emit a named event. The renderer resolves the event to action binding(s) from the element's `on` field. */
+    emit?: (event: string) => void;
+    /** Whether the parent is loading */
+    loading?: boolean;
+}
+/**
+ * Component renderer type
+ */
+type ComponentRenderer<P = Record<string, unknown>> = ComponentType<ComponentRenderProps<P>>;
+/**
+ * Registry of component renderers
+ */
+type ComponentRegistry = Record<string, ComponentRenderer<any>>;
+/**
+ * Props for the Renderer component
+ */
+interface RendererProps {
+    /** The UI spec to render */
+    spec: Spec | null;
+    /**
+     * Component registry. If omitted, only standard components are used.
+     * When provided, custom components are merged with (and override) standard components.
+     */
+    registry?: ComponentRegistry;
+    /** Whether to include standard components (default: true) */
+    includeStandard?: boolean;
+    /** Whether the spec is currently loading/streaming */
+    loading?: boolean;
+    /** Fallback component for unknown types */
+    fallback?: ComponentRenderer;
+}
+/**
+ * Main renderer component.
+ *
+ * By default, standard React Native components are included.
+ * Custom components in `registry` override standard ones with the same name.
+ *
+ * @example
+ * ```tsx
+ * // Use standard components only
+ * <Renderer spec={spec} />
+ *
+ * // Add/override components
+ * <Renderer spec={spec} registry={{ CustomCard: MyCard }} />
+ *
+ * // Disable standard components entirely
+ * <Renderer spec={spec} registry={myRegistry} includeStandard={false} />
+ * ```
+ */
+declare function Renderer({ spec, registry: customRegistry, includeStandard, loading, fallback, }: RendererProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props for JSONUIProvider
+ */
+interface JSONUIProviderProps {
+    /**
+     * Component registry. If omitted, only standard components are used.
+     * Custom components are merged with (and override) standard components.
+     */
+    registry?: ComponentRegistry;
+    /** Initial state model */
+    initialState?: Record<string, unknown>;
+    /** Auth state */
+    authState?: {
+        isSignedIn: boolean;
+        user?: Record<string, unknown>;
+    };
+    /** Action handlers */
+    actionHandlers?: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
+    /** Navigation function */
+    navigate?: (path: string) => void;
+    /** Custom validation functions */
+    validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
+    /** Callback when state changes */
+    onStateChange?: (path: string, value: unknown) => void;
+    children: ReactNode;
+}
+/**
+ * Combined provider for all JSONUI contexts
+ */
+declare function JSONUIProvider({ registry, initialState, authState, actionHandlers, navigate, validationFunctions, onStateChange, children, }: JSONUIProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Legacy helper to create a renderer component from a catalog
+ * @deprecated Use createRenderer with the new catalog API instead
+ */
+declare function createRendererFromCatalog<C extends LegacyCatalog<Record<string, ComponentDefinition>>>(_catalog: C, registry: ComponentRegistry): ComponentType<Omit<RendererProps, "registry">>;
+/**
+ * Result returned by defineRegistry
+ */
+interface DefineRegistryResult {
+    /** Component registry for `<Renderer registry={...} />` */
+    registry: ComponentRegistry;
+    /**
+     * Create ActionProvider-compatible handlers.
+     * Accepts getter functions so handlers always read the latest state/setState
+     * (e.g. from React refs).
+     */
+    handlers: (getSetState: () => SetState | undefined, getState: () => StateModel) => Record<string, (params: Record<string, unknown>) => Promise<void>>;
+    /**
+     * Execute an action by name imperatively
+     * (for use outside the React tree, e.g. initial state loading).
+     */
+    executeAction: (actionName: string, params: Record<string, unknown> | undefined, setState: SetState, state?: StateModel) => Promise<void>;
+}
+/**
+ * Create a registry from a catalog with components and/or actions.
+ *
+ * @example
+ * ```tsx
+ * // Components only
+ * const { registry } = defineRegistry(catalog, {
+ *   components: {
+ *     Card: ({ props, children }) => (
+ *       <View style={styles.card}><Text>{props.title}</Text>{children}</View>
+ *     ),
+ *   },
+ * });
+ *
+ * // Actions only
+ * const { handlers, executeAction } = defineRegistry(catalog, {
+ *   actions: {
+ *     viewCustomers: async (params, setState) => { ... },
+ *   },
+ * });
+ *
+ * // Both
+ * const { registry, handlers, executeAction } = defineRegistry(catalog, {
+ *   components: { ... },
+ *   actions: { ... },
+ * });
+ * ```
+ */
+declare function defineRegistry<C extends Catalog>(_catalog: C, options: {
+    components?: Components<C>;
+    actions?: Actions<C>;
+}): DefineRegistryResult;
+/**
+ * Props for renderers created with createRenderer
+ */
+interface CreateRendererProps {
+    /** The spec to render (AI-generated JSON) */
+    spec: Spec | null;
+    /** State context for dynamic values */
+    state?: Record<string, unknown>;
+    /** Action handler */
+    onAction?: (actionName: string, params?: Record<string, unknown>) => void;
+    /** Callback when state changes (e.g., from form inputs) */
+    onStateChange?: (path: string, value: unknown) => void;
+    /** Whether the spec is currently loading/streaming */
+    loading?: boolean;
+    /** Auth state for visibility conditions */
+    authState?: {
+        isSignedIn: boolean;
+        user?: Record<string, unknown>;
+    };
+    /** Fallback component for unknown types */
+    fallback?: ComponentRenderer;
+}
+/**
+ * Component map type - maps component names to React Native components
+ */
+type ComponentMap<TComponents extends Record<string, {
+    props: unknown;
+}>> = {
+    [K in keyof TComponents]: ComponentType<ComponentRenderProps<TComponents[K]["props"] extends {
+        _output: infer O;
+    } ? O : Record<string, unknown>>>;
+};
+/**
+ * Create a renderer from a catalog
+ *
+ * @example
+ * ```typescript
+ * const DashboardRenderer = createRenderer(dashboardCatalog, {
+ *   Card: ({ element, children }) => <View style={styles.card}>{children}</View>,
+ *   Metric: ({ element }) => <Text>{element.props.value}</Text>,
+ * });
+ *
+ * // Usage
+ * <DashboardRenderer spec={aiGeneratedSpec} state={state} />
+ * ```
+ */
+declare function createRenderer<TDef extends SchemaDefinition, TCatalog extends {
+    components: Record<string, {
+        props: unknown;
+    }>;
+}>(catalog: Catalog<TDef, TCatalog>, components: ComponentMap<TCatalog["components"]>): ComponentType<CreateRendererProps>;
+
+/**
+ * Options for useUIStream
+ */
+interface UseUIStreamOptions {
+    /** API endpoint */
+    api: string;
+    /** Callback when complete */
+    onComplete?: (spec: Spec) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /**
+     * Custom fetch implementation with ReadableStream support.
+     *
+     * React Native's built-in fetch does not support `response.body`
+     * (ReadableStream). Pass a streaming-capable fetch here, e.g.
+     * `import { fetch } from 'expo/fetch'`.
+     *
+     * Falls back to the global `fetch` if not provided.
+     */
+    fetch?: (url: string, init?: any) => Promise<Response>;
+    /**
+     * Enable validation and auto-repair.
+     *
+     * When true:
+     * - **Mid-stream**: Each JSONL line is validated as it arrives. If a line
+     *   is malformed JSON (and recovery fails), the stream is aborted
+     *   immediately and a repair prompt is sent to continue generation.
+     * - **Post-stream**: After the stream completes, structural validation
+     *   runs (missing children, visible-in-props, etc.). Issues that can be
+     *   auto-fixed are fixed locally; remaining errors trigger a repair prompt.
+     *
+     * Defaults to false.
+     */
+    validate?: boolean;
+    /**
+     * Maximum number of automatic repair retries (covers both mid-stream
+     * and post-stream retries combined). Defaults to 5.
+     */
+    maxRetries?: number;
+}
+/**
+ * Return type for useUIStream
+ */
+interface UseUIStreamReturn {
+    /** Current UI spec */
+    spec: Spec | null;
+    /** Whether currently streaming */
+    isStreaming: boolean;
+    /** Error if any */
+    error: Error | null;
+    /** Raw JSONL lines received from the stream */
+    rawLines: string[];
+    /** Send a prompt to generate UI */
+    send: (prompt: string, context?: Record<string, unknown>) => Promise<void>;
+    /** Stop the current generation */
+    stop: () => void;
+    /** Clear the current spec */
+    clear: () => void;
+}
+/**
+ * Hook for streaming UI generation
+ */
+declare function useUIStream({ api, onComplete, onError, fetch: fetchFn, validate: enableValidation, maxRetries, }: UseUIStreamOptions): UseUIStreamReturn;
+/**
+ * Convert a flat element list to a Spec.
+ * Input elements use key/parentKey to establish identity and relationships.
+ * Output spec uses the map-based format where key is the map entry key
+ * and parent-child relationships are expressed through children arrays.
+ */
+declare function flatToTree(elements: FlatElement[]): Spec;
+
+export { type ActionContextValue, type ActionFn, ActionProvider, type ActionProviderProps, type Actions, type ComponentContext, type ComponentFn, type ComponentMap, type ComponentRegistry, type ComponentRenderProps, type ComponentRenderer, type Components, ConfirmDialog, type ConfirmDialogProps, type CreateRendererProps, type DefineRegistryResult, type FieldValidationState, JSONUIProvider, type JSONUIProviderProps, type PendingConfirmation, Renderer, type RendererProps, RepeatScopeProvider, type RepeatScopeValue, type SetState, type StateContextValue, type StateModel, StateProvider, type StateProviderProps, type UseUIStreamOptions, type UseUIStreamReturn, type ValidationContextValue, ValidationProvider, type ValidationProviderProps, type VisibilityContextValue, VisibilityProvider, type VisibilityProviderProps, createRenderer, createRendererFromCatalog, createStandardActionHandlers, defineRegistry, flatToTree, rewriteRepeatTokens, standardComponents, useAction, useActions, useFieldValidation, useIsVisible, useRepeatScope, useStateBinding, useStateStore, useStateValue, useUIStream, useValidation, useVisibility };