@json-render/solid 0.12.0

package/dist/index.d.mts

@@ -0,0 +1,602 @@
+import * as solid_js from 'solid-js';
+import { ParentProps, Accessor, JSX, Component } from 'solid-js';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, FlatElement } from '@json-render/core';
+export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
+export { ElementTreeSchema, ElementTreeSpec, SolidSchema, SolidSpec, elementTreeSchema, schema } from './schema.mjs';
+
+interface StateContextValue {
+    state: StateModel;
+    get: (path: string) => unknown;
+    set: (path: string, value: unknown) => void;
+    update: (updates: Record<string, unknown>) => void;
+    getSnapshot: () => StateModel;
+    subscribeChanges: (listener: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void) => () => void;
+}
+interface StateProviderProps {
+    store?: StateStore;
+    initialState?: StateModel;
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
+}
+declare function StateProvider(props: ParentProps<StateProviderProps>): solid_js.JSX.Element;
+declare function useStateStore(): StateContextValue;
+declare function useStateValue<T>(path: string): Accessor<T | undefined>;
+declare function useStateBinding<T>(path: string): [Accessor<T | undefined>, (value: T) => void];
+
+interface VisibilityContextValue {
+    isVisible: (condition: VisibilityCondition | undefined) => boolean;
+    ctx: VisibilityContext;
+}
+type VisibilityProviderProps = ParentProps;
+declare function VisibilityProvider(props: VisibilityProviderProps): solid_js.JSX.Element;
+declare function useVisibility(): VisibilityContextValue;
+declare function useIsVisible(condition: VisibilityCondition | undefined): boolean;
+
+interface PendingConfirmation {
+    action: ResolvedAction;
+    handler: ActionHandler;
+    resolve: () => void;
+    reject: () => void;
+}
+interface ActionContextValue {
+    handlers: Record<string, ActionHandler>;
+    loadingActions: Set<string>;
+    pendingConfirmation: PendingConfirmation | null;
+    execute: (binding: ActionBinding) => Promise<void>;
+    confirm: () => void;
+    cancel: () => void;
+    registerHandler: (name: string, handler: ActionHandler) => void;
+}
+interface ActionProviderProps {
+    handlers?: Record<string, ActionHandler>;
+    navigate?: (path: string) => void;
+}
+declare function ActionProvider(props: ParentProps<ActionProviderProps>): JSX.Element;
+declare function useActions(): ActionContextValue;
+declare function useAction(binding: ActionBinding): {
+    execute: () => Promise<void>;
+    isLoading: boolean;
+};
+interface ConfirmDialogProps {
+    confirm: ActionConfirm;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare function ConfirmDialog(props: ConfirmDialogProps): JSX.Element;
+
+interface FieldValidationState {
+    touched: boolean;
+    validated: boolean;
+    result: ValidationResult | null;
+}
+interface ValidationContextValue {
+    customFunctions: Record<string, ValidationFunction>;
+    fieldStates: Record<string, FieldValidationState>;
+    validate: (path: string, config: ValidationConfig) => ValidationResult;
+    touch: (path: string) => void;
+    clear: (path: string) => void;
+    validateAll: () => boolean;
+    registerField: (path: string, config: ValidationConfig) => void;
+}
+interface ValidationProviderProps {
+    customFunctions?: Record<string, ValidationFunction>;
+}
+declare function ValidationProvider(props: ParentProps<ValidationProviderProps>): solid_js.JSX.Element;
+declare function useValidation(): ValidationContextValue;
+declare function useOptionalValidation(): ValidationContextValue | null;
+declare function useFieldValidation(path: string, config?: ValidationConfig): {
+    state: Accessor<FieldValidationState>;
+    validate: () => ValidationResult;
+    touch: () => void;
+    clear: () => void;
+    errors: Accessor<string[]>;
+    isValid: Accessor<boolean>;
+};
+
+interface RepeatScopeValue {
+    item: unknown;
+    index: number;
+    basePath: string;
+}
+declare function RepeatScopeProvider(props: ParentProps<RepeatScopeValue>): solid_js.JSX.Element;
+declare function useRepeatScope(): RepeatScopeValue | null;
+
+/**
+ * State setter function for updating application state
+ */
+type SetState = (updater: (prev: Record<string, unknown>) => Record<string, unknown>) => void;
+/**
+ * Handle returned by the `on()` function for a specific event.
+ * Provides metadata about the event binding and a method to fire it.
+ *
+ * @example
+ * ```ts
+ * const press = on("press");
+ * if (press.shouldPreventDefault) e.preventDefault();
+ * press.emit();
+ * ```
+ */
+interface EventHandle {
+    /** Fire the event (resolve action bindings) */
+    emit: () => void;
+    /** Whether any binding requested preventDefault */
+    shouldPreventDefault: boolean;
+    /** Whether any handler is bound to this event */
+    bound: boolean;
+}
+/**
+ * Catalog-agnostic base type for component render function arguments.
+ * Use this when building reusable component libraries that are not tied
+ * to a specific catalog.
+ *
+ * @example
+ * ```ts
+ * const Card = (ctx: BaseComponentProps<{ title?: string }>) => (
+ *   <div>{ctx.props.title}{ctx.children}</div>
+ * );
+ * ```
+ */
+interface BaseComponentProps<P = Record<string, unknown>> {
+    props: P;
+    children?: JSX.Element;
+    /** Simple event emitter (shorthand). Fires the event and returns void. */
+    emit: (event: string) => void;
+    /** Get an event handle with metadata. Use when you need shouldPreventDefault or bound checks. */
+    on: (event: string) => EventHandle;
+    /**
+     * Two-way binding paths resolved from `$bindState` / `$bindItem` expressions.
+     * Maps prop name → absolute state path for write-back.
+     */
+    bindings?: Record<string, string>;
+    loading?: boolean;
+}
+/**
+ * Context passed to component render functions
+ * @example
+ * const Button: ComponentFn<typeof catalog, 'Button'> = (ctx) => {
+ *   return <button onClick={() => ctx.emit("press")}>{ctx.props.label}</button>
+ * }
+ */
+interface ComponentContext<C extends Catalog, K extends keyof InferCatalogComponents<C>> extends BaseComponentProps<InferComponentProps<C, K>> {
+}
+/**
+ * Component render function type for Solid
+ * @example
+ * const Button: ComponentFn<typeof catalog, 'Button'> = (ctx) => (
+ *   <button onClick={() => ctx.emit("press")}>{ctx.props.label}</button>
+ * );
+ */
+type ComponentFn<C extends Catalog, K extends keyof InferCatalogComponents<C>> = (ctx: ComponentContext<C, K>) => JSX.Element;
+/**
+ * Registry of all component render functions for a catalog
+ * @example
+ * const components: Components<typeof myCatalog> = {
+ *   Button: (ctx) => <button>{ctx.props.label}</button>,
+ *   Input: (ctx) => <input placeholder={ctx.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>;
+};
+/**
+ * True when the catalog declares at least one action, false otherwise.
+ * Used by defineRegistry to conditionally require the `actions` field.
+ */
+type CatalogHasActions<C extends Catalog> = [
+    InferCatalogActions<C>
+] extends [never] ? false : [keyof InferCatalogActions<C>] extends [never] ? false : true;
+
+/**
+ * Props passed to component renderers
+ */
+interface ComponentRenderProps<P = Record<string, unknown>> {
+    /** The element being rendered */
+    element: UIElement<string, P>;
+    /** Rendered children */
+    children?: JSX.Element;
+    /** Emit a named event. The renderer resolves the event to action binding(s) from the element's `on` field. Always provided by the renderer. */
+    emit: (event: string) => void;
+    /** Get an event handle with metadata (shouldPreventDefault, bound). Use when you need to inspect event bindings. */
+    on: (event: string) => EventHandle;
+    /**
+     * Two-way binding paths resolved from `$bindState` / `$bindItem` expressions.
+     * Maps prop name → absolute state path for write-back.
+     * Only present when at least one prop uses `{ $bindState: "..." }` or `{ $bindItem: "..." }`.
+     */
+    bindings?: Record<string, string>;
+    /** Whether the parent is loading */
+    loading?: boolean;
+}
+/**
+ * Component renderer type
+ */
+type ComponentRenderer<P = Record<string, unknown>> = Component<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 */
+    registry: ComponentRegistry;
+    /** Whether the spec is currently loading/streaming */
+    loading?: boolean;
+    /** Fallback component for unknown types */
+    fallback?: ComponentRenderer;
+}
+/**
+ * Main renderer component
+ */
+declare function Renderer(props: RendererProps): JSX.Element;
+/**
+ * Props for JSONUIProvider
+ */
+interface JSONUIProviderProps {
+    /** Component registry */
+    registry: ComponentRegistry;
+    /**
+     * External store (controlled mode). When provided, `initialState` and
+     * `onStateChange` are ignored.
+     */
+    store?: StateStore;
+    /** Initial state model (uncontrolled mode) */
+    initialState?: Record<string, unknown>;
+    /** Action handlers */
+    handlers?: 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>;
+    /** Named functions for `$computed` expressions in props */
+    functions?: Record<string, ComputedFunction>;
+    /** Callback when state changes (uncontrolled mode) */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
+    children: JSX.Element;
+}
+/**
+ * Combined provider for all JSONUI contexts
+ */
+declare function JSONUIProvider(props: JSONUIProviderProps): JSX.Element;
+/**
+ * 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 refs or closures).
+     */
+    handlers: (getSetState: () => SetState | undefined, getState: () => StateModel) => Record<string, (params: Record<string, unknown>) => Promise<void>>;
+    /**
+     * Execute an action by name imperatively
+     * (for use outside the Solid tree, e.g. initial state loading).
+     */
+    executeAction: (actionName: string, params: Record<string, unknown> | undefined, setState: SetState, state?: StateModel) => Promise<void>;
+}
+/**
+ * Options for defineRegistry.
+ *
+ * When the catalog declares actions, the `actions` field is required.
+ * When the catalog has no actions (or `actions: {}`), the field is optional.
+ */
+type DefineRegistryOptions<C extends Catalog> = {
+    components?: Components<C>;
+} & (CatalogHasActions<C> extends true ? {
+    actions: Actions<C>;
+} : {
+    actions?: Actions<C>;
+});
+/**
+ * Create a registry from a catalog with components and/or actions.
+ *
+ * When the catalog declares actions, the `actions` field is required.
+ *
+ * @example
+ * ```tsx
+ * // Components only (catalog has no actions)
+ * const { registry } = defineRegistry(catalog, {
+ *   components: {
+ *     Card: (ctx) => (
+ *       <div class="card">{ctx.props.title}{ctx.children}</div>
+ *     ),
+ *   },
+ * });
+ *
+ * // Both (catalog declares actions)
+ * const { registry, handlers, executeAction } = defineRegistry(catalog, {
+ *   components: { ... },
+ *   actions: { ... },
+ * });
+ * ```
+ */
+declare function defineRegistry<C extends Catalog>(_catalog: C, options: DefineRegistryOptions<C>): DefineRegistryResult;
+/**
+ * Props for renderers created with createRenderer
+ */
+interface CreateRendererProps {
+    /** The spec to render (AI-generated JSON) */
+    spec: Spec | null;
+    /**
+     * External store (controlled mode). When provided, `state` and
+     * `onStateChange` are ignored.
+     */
+    store?: StateStore;
+    /** State context for dynamic values (uncontrolled mode) */
+    state?: Record<string, unknown>;
+    /** Action handler */
+    onAction?: (actionName: string, params?: Record<string, unknown>) => void;
+    /** Callback when state changes (uncontrolled mode) */
+    onStateChange?: (changes: Array<{
+        path: string;
+        value: unknown;
+    }>) => void;
+    /** Named functions for `$computed` expressions in props */
+    functions?: Record<string, ComputedFunction>;
+    /** Whether the spec is currently loading/streaming */
+    loading?: boolean;
+    /** Fallback component for unknown types */
+    fallback?: ComponentRenderer;
+}
+/**
+ * Component map type - maps component names to Solid components
+ */
+type ComponentMap<TComponents extends Record<string, {
+    props: unknown;
+}>> = {
+    [K in keyof TComponents]: Component<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: (renderProps) => <div class="card">{renderProps.children}</div>,
+ *   Metric: (renderProps) => <span>{renderProps.element.props.value}</span>,
+ * });
+ *
+ * // 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"]>): Component<CreateRendererProps>;
+
+/**
+ * Token usage metadata from AI generation
+ */
+interface TokenUsage {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+}
+/**
+ * Options for useUIStream
+ */
+interface UseUIStreamOptions {
+    /** API endpoint */
+    api: string;
+    /** Callback when complete */
+    onComplete?: (spec: Spec) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Return type for useUIStream
+ */
+interface UseUIStreamReturn {
+    /** Current UI spec */
+    readonly spec: Spec | null;
+    /** Whether currently streaming */
+    readonly isStreaming: boolean;
+    /** Error if any */
+    readonly error: Error | null;
+    /** Token usage from the last generation */
+    readonly usage: TokenUsage | null;
+    /** Raw JSONL lines received from the stream (JSON patch lines) */
+    readonly rawLines: string[];
+    /** Send a prompt to generate UI */
+    send: (prompt: string, context?: Record<string, unknown>) => Promise<void>;
+    /** Clear the current spec */
+    clear: () => void;
+}
+/**
+ * Hook for streaming UI generation
+ */
+declare function useUIStream(options: 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;
+/**
+ * Hook for two-way bound props. Returns `[value, setValue]` where:
+ *
+ * - `value` is the already-resolved prop value (passed through from render props)
+ * - `setValue` writes back to the bound state path (no-op if not bound)
+ *
+ * Designed to work with the `bindings` map that the renderer provides when
+ * a prop uses `{ $bindState: "/path" }` or `{ $bindItem: "field" }`.
+ *
+ * @example
+ * ```tsx
+ * import { useBoundProp } from "@json-render/solid";
+ *
+ * const Input: ComponentRenderer = (ctx) => {
+ *   const [value, setValue] = useBoundProp<string>(ctx.props.value, ctx.bindings?.value);
+ *   return <input value={value ?? ""} onInput={(e) => setValue(e.target.value)} />;
+ * };
+ * ```
+ */
+declare function useBoundProp<T>(propValue: T | undefined, bindingPath: string | undefined): [T | undefined, (value: T) => void];
+/**
+ * A single part from the AI SDK's `message.parts` array. This is a minimal
+ * structural type so that library helpers do not depend on the AI SDK.
+ * Fields are optional because different part types carry different data:
+ * - Text parts have `text`
+ * - Data parts have `data`
+ */
+interface DataPart {
+    type: string;
+    text?: string;
+    data?: unknown;
+}
+declare function buildSpecFromParts(parts: DataPart[]): Spec | null;
+/**
+ * Extract and join all text content from a message's parts array.
+ *
+ * Filters for parts with `type === "text"`, trims each one, and joins them
+ * with double newlines so that text from separate agent steps renders as
+ * distinct paragraphs in markdown.
+ *
+ * Has no AI SDK dependency -- operates on a generic `DataPart[]`.
+ *
+ * @example
+ * ```tsx
+ * const text = getTextFromParts(message.parts);
+ * if (text) {
+ *   return <Streamdown>{text}</Streamdown>;
+ * }
+ * ```
+ */
+declare function getTextFromParts(parts: DataPart[]): string;
+/**
+ * Hook that extracts both the json-render spec and text content from a
+ * message's parts array. Combines `buildSpecFromParts` and `getTextFromParts`
+ * into a single call with memoized results.
+ *
+ * **Memoization behavior:** Results are recomputed only when the `parts`
+ * accessor returns a new array reference with a different length or last
+ * element. This is optimized for the typical AI SDK streaming pattern where
+ * parts are appended incrementally.
+ *
+ * @example
+ * ```tsx
+ * import { useJsonRenderMessage } from "@json-render/solid";
+ *
+ * function MessageBubble(props: { parts: DataPart[] }) {
+ *   const msg = useJsonRenderMessage(() => props.parts);
+ *
+ *   return (
+ *     <div>
+ *       {msg.text && <Markdown>{msg.text}</Markdown>}
+ *       {msg.hasSpec && <MyRenderer spec={msg.spec!} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useJsonRenderMessage(getParts: () => DataPart[]): {
+    readonly spec: Spec | null;
+    readonly text: string;
+    readonly hasSpec: boolean;
+};
+/**
+ * A single message in the chat, which may contain text, a rendered UI spec, or both.
+ */
+interface ChatMessage {
+    /** Unique message ID */
+    id: string;
+    /** Who sent this message */
+    role: "user" | "assistant";
+    /** Text content (conversational prose) */
+    text: string;
+    /** json-render Spec built from JSONL patches (null if no UI was generated) */
+    spec: Spec | null;
+}
+/**
+ * Options for useChatUI
+ */
+interface UseChatUIOptions {
+    /** API endpoint that accepts `{ messages: Array<{ role, content }> }` and returns a text stream */
+    api: string;
+    /** Callback when streaming completes for a message */
+    onComplete?: (message: ChatMessage) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Return type for useChatUI
+ */
+interface UseChatUIReturn {
+    /** All messages in the conversation */
+    readonly messages: ChatMessage[];
+    /** Whether currently streaming an assistant response */
+    readonly isStreaming: boolean;
+    /** Error from the last request, if any */
+    readonly error: Error | null;
+    /** Send a user message */
+    send: (text: string) => Promise<void>;
+    /** Clear all messages and reset the conversation */
+    clear: () => void;
+}
+/**
+ * Hook for chat + GenUI experiences.
+ *
+ * Manages a multi-turn conversation where each assistant message can contain
+ * both conversational text and a json-render UI spec. The hook sends the full
+ * message history to the API endpoint, reads the streamed response, and
+ * separates text lines from JSONL patch lines using `createMixedStreamParser`.
+ *
+ * @example
+ * ```tsx
+ * const chat = useChatUI({ api: "/api/chat" });
+ *
+ * // Send a message
+ * await chat.send("Compare weather in NYC and Tokyo");
+ *
+ * // Render messages
+ * <For each={chat.messages}>
+ *   {(msg) => (
+ *     <div>
+ *       {msg.text && <p>{msg.text}</p>}
+ *       {msg.spec && <MyRenderer spec={msg.spec} />}
+ *     </div>
+ *   )}
+ * </For>
+ * ```
+ */
+declare function useChatUI(options: UseChatUIOptions): UseChatUIReturn;
+
+export { type ActionContextValue, type ActionFn, ActionProvider, type ActionProviderProps, type Actions, type BaseComponentProps, type ChatMessage, type ComponentContext, type ComponentFn, type ComponentMap, type ComponentRegistry, type ComponentRenderProps, type ComponentRenderer, type Components, ConfirmDialog, type ConfirmDialogProps, type CreateRendererProps, type DataPart, type DefineRegistryResult, type EventHandle, type FieldValidationState, JSONUIProvider, type JSONUIProviderProps, type PendingConfirmation, Renderer, type RendererProps, RepeatScopeProvider, type RepeatScopeValue, type SetState, type StateContextValue, StateProvider, type StateProviderProps, type TokenUsage, type UseChatUIOptions, type UseChatUIReturn, type UseUIStreamOptions, type UseUIStreamReturn, type ValidationContextValue, ValidationProvider, type ValidationProviderProps, type VisibilityContextValue, VisibilityProvider, type VisibilityProviderProps, buildSpecFromParts, createRenderer, defineRegistry, flatToTree, getTextFromParts, useAction, useActions, useBoundProp, useChatUI, useFieldValidation, useIsVisible, useJsonRenderMessage, useOptionalValidation, useRepeatScope, useStateBinding, useStateStore, useStateValue, useUIStream, useValidation, useVisibility };