@allternit/ix 0.1.0

package/dist/adapters/json-render.js

@@ -0,0 +1,576 @@
+/**
+ * Vercel Labs json-render Adapter
+ *
+ * Converts between A2R-IX UI IR and Vercel Labs json-render format.
+ *
+ * json-render is a declarative UI format where components are expressed as JSON.
+ * This adapter enables A2R-IX to render UIs generated by LLMs trained on
+ * json-render patterns.
+ *
+ * @see https://github.com/vercel-labs/json-render
+ */
+/**
+ * Global handler registry for custom action handlers
+ *
+ * GAP-59: Custom Handler System
+ * Implements a singleton registry for dynamic handler registration
+ */
+class HandlerRegistry {
+    handlers = new Map();
+    tagsIndex = new Map();
+    /**
+     * Register a custom handler
+     * @param entry Handler registry entry
+     */
+    register(entry) {
+        if (!entry.name || typeof entry.handler !== 'function') {
+            throw new Error('Handler must have a name and a function');
+        }
+        // Store handler
+        this.handlers.set(entry.name, entry);
+        // Index by tags
+        if (entry.tags) {
+            for (const tag of entry.tags) {
+                if (!this.tagsIndex.has(tag)) {
+                    this.tagsIndex.set(tag, new Set());
+                }
+                this.tagsIndex.get(tag).add(entry.name);
+            }
+        }
+    }
+    /**
+     * Unregister a handler
+     * @param name Handler name
+     */
+    unregister(name) {
+        const entry = this.handlers.get(name);
+        if (!entry)
+            return false;
+        // Remove from tags index
+        if (entry.tags) {
+            for (const tag of entry.tags) {
+                this.tagsIndex.get(tag)?.delete(name);
+            }
+        }
+        return this.handlers.delete(name);
+    }
+    /**
+     * Get a handler by name
+     * @param name Handler name
+     */
+    get(name) {
+        return this.handlers.get(name);
+    }
+    /**
+     * Check if a handler exists
+     * @param name Handler name
+     */
+    has(name) {
+        return this.handlers.has(name);
+    }
+    /**
+     * Execute a handler by name
+     * @param name Handler name
+     * @param context Execution context
+     */
+    async execute(name, context) {
+        const entry = this.handlers.get(name);
+        if (!entry) {
+            throw new Error(`Handler not found: ${name}`);
+        }
+        await entry.handler(context);
+    }
+    /**
+     * GAP-61: Handler Discovery
+     * Find handlers by tags
+     * @param tags Tags to search for
+     */
+    findByTags(tags) {
+        const matchingNames = new Set();
+        for (const tag of tags) {
+            const names = this.tagsIndex.get(tag);
+            if (names) {
+                for (const name of names) {
+                    matchingNames.add(name);
+                }
+            }
+        }
+        return Array.from(matchingNames)
+            .map(name => this.handlers.get(name))
+            .filter(Boolean);
+    }
+    /**
+     * GAP-61: Handler Discovery
+     * Search handlers by name pattern or description
+     * @param query Search query
+     */
+    search(query) {
+        const lowerQuery = query.toLowerCase();
+        return Array.from(this.handlers.values()).filter(entry => entry.name.toLowerCase().includes(lowerQuery) ||
+            entry.description?.toLowerCase().includes(lowerQuery) ||
+            entry.tags?.some(tag => tag.toLowerCase().includes(lowerQuery)));
+    }
+    /**
+     * Get all registered handlers
+     */
+    listAll() {
+        return Array.from(this.handlers.values());
+    }
+    /**
+     * Get all available tags
+     */
+    getAllTags() {
+        return Array.from(this.tagsIndex.keys());
+    }
+    /**
+     * Clear all handlers
+     */
+    clear() {
+        this.handlers.clear();
+        this.tagsIndex.clear();
+    }
+    /**
+     * Get registry statistics
+     */
+    getStats() {
+        return {
+            total: this.handlers.size,
+            tags: this.tagsIndex.size,
+        };
+    }
+}
+/** Global handler registry instance */
+export const globalHandlerRegistry = new HandlerRegistry();
+/**
+ * GAP-60: Replace Placeholder Handlers
+ * Create an action handler from json-render event config
+ */
+function createActionHandlerFromEvent(config) {
+    switch (config.type) {
+        case 'setState':
+            return {
+                type: 'setState',
+                path: config.target || '',
+                value: { $path: 'event.value' },
+            };
+        case 'emit':
+            return {
+                type: 'emitEvent',
+                name: config.target || '',
+                payload: config.payload,
+            };
+        case 'navigate':
+            return {
+                type: 'navigate',
+                to: config.target || '',
+            };
+        case 'validate':
+            return {
+                type: 'validate',
+                paths: config.target?.split(',') || [],
+            };
+        default:
+            // GAP-60: Custom handlers - lookup in registry or create named reference
+            if (config.target && globalHandlerRegistry.has(config.target)) {
+                return {
+                    type: 'custom',
+                    fn: config.target,
+                };
+            }
+            // Create a reference to a custom handler that can be resolved at runtime
+            return {
+                type: 'custom',
+                fn: config.target || `handler_${generateId()}`,
+            };
+    }
+}
+/**
+ * Convert A2R-IX UIRoot to json-render format
+ */
+export function convertToJsonRender(root) {
+    return {
+        version: root.version,
+        root: {
+            type: 'Fragment',
+            children: root.components.map(convertComponentToJsonRender),
+        },
+        state: convertStateToJsonRender(root.state),
+        events: convertActionsToJsonRender(root.actions),
+    };
+}
+/**
+ * Convert A2R-IX UIComponent to json-render node
+ */
+function convertComponentToJsonRender(component) {
+    const node = {
+        type: component.type,
+    };
+    // Convert props
+    if (component.props && Object.keys(component.props).length > 0) {
+        node.props = { ...component.props };
+    }
+    // Convert bindings to props
+    if (component.bindings) {
+        node.props = node.props || {};
+        component.bindings.forEach((binding) => {
+            if (binding.direction === 'two-way') {
+                // json-render uses onChange for two-way bindings
+                node.props[`on${capitalize(binding.prop)}Change`] = {
+                    $action: 'setState',
+                    path: binding.statePath,
+                };
+            }
+            else {
+                // One-way binding
+                node.props[binding.prop] = { $state: binding.statePath };
+            }
+        });
+    }
+    // Convert events to props
+    if (component.events) {
+        node.props = node.props || {};
+        component.events.forEach((event) => {
+            node.props[event.event] = {
+                $action: event.action,
+                params: event.params,
+            };
+        });
+    }
+    // Convert children
+    if (component.children && component.children.length > 0) {
+        node.children = component.children.map(convertComponentToJsonRender);
+    }
+    // Convert repeat to children with mapping
+    if (component.repeat) {
+        node.props = node.props || {};
+        node.props.$for = {
+            items: component.repeat.items,
+            as: component.repeat.as,
+            index: component.repeat.indexAs,
+            filter: component.repeat.filter,
+            sort: component.repeat.sort,
+        };
+    }
+    // Convert condition
+    if (component.condition) {
+        node.props = node.props || {};
+        node.props.$if = component.condition;
+    }
+    // Convert style
+    if (component.style) {
+        node.props = node.props || {};
+        node.props.style = component.style;
+    }
+    // Convert className
+    if (component.className) {
+        node.props = node.props || {};
+        node.props.className = component.className;
+    }
+    return node;
+}
+/**
+ * Convert A2R-IX state to json-render state
+ */
+function convertStateToJsonRender(state) {
+    const result = {};
+    state.variables.forEach((variable) => {
+        result[variable.path] = {
+            type: variable.type === 'any' ? 'string' : variable.type,
+            default: variable.default,
+        };
+    });
+    return result;
+}
+/**
+ * Convert A2R-IX actions to json-render events
+ */
+function convertActionsToJsonRender(actions) {
+    const result = {};
+    actions.forEach((action) => {
+        switch (action.handler.type) {
+            case 'setState':
+                result[action.id] = {
+                    type: 'setState',
+                    target: action.handler.path,
+                };
+                break;
+            case 'emitEvent':
+                result[action.id] = {
+                    type: 'emit',
+                    target: action.handler.name,
+                    payload: action.handler.payload,
+                };
+                break;
+            case 'navigate':
+                result[action.id] = {
+                    type: 'navigate',
+                    target: action.handler.to,
+                };
+                break;
+            case 'validate':
+                result[action.id] = {
+                    type: 'validate',
+                    target: action.handler.paths.join(','),
+                };
+                break;
+            case 'custom':
+                // GAP-60: Use the actual custom handler function reference
+                result[action.id] = {
+                    type: 'custom',
+                    target: action.handler.fn,
+                };
+                break;
+        }
+    });
+    return result;
+}
+/**
+ * Convert json-render format to A2R-IX UIRoot
+ */
+export function convertFromJsonRender(schema) {
+    return {
+        version: schema.version,
+        components: convertJsonRenderNodeToComponent(schema.root),
+        state: convertJsonRenderStateToState(schema.state || {}),
+        actions: convertJsonRenderEventsToActions(schema.events || {}),
+    };
+}
+/**
+ * Convert json-render node to A2R-IX UIComponent(s)
+ */
+function convertJsonRenderNodeToComponent(node) {
+    // Handle Fragment wrapper
+    if (node.type === 'Fragment' && node.children) {
+        return node.children.map((child) => convertSingleNodeToComponent(child));
+    }
+    return [convertSingleNodeToComponent(node)];
+}
+/**
+ * Convert single json-render node to A2R-IX UIComponent
+ */
+function convertSingleNodeToComponent(node) {
+    const component = {
+        id: generateId(),
+        type: node.type,
+        props: {},
+    };
+    if (node.props) {
+        // Extract special props
+        const { $for, $if, style, className, ...regularProps } = node.props;
+        // Regular props
+        component.props = regularProps;
+        // Style
+        if (style) {
+            component.style = style;
+        }
+        // ClassName
+        if (className) {
+            component.className = className;
+        }
+        // Convert bindings from props with $state
+        Object.entries(regularProps).forEach(([key, value]) => {
+            if (typeof value === 'object' && value !== null && '$state' in value) {
+                component.bindings = component.bindings || [];
+                component.bindings.push({
+                    prop: key,
+                    statePath: value.$state,
+                    direction: 'one-way',
+                });
+                delete component.props[key];
+            }
+        });
+        // Convert for/repeat
+        if ($for) {
+            const forObj = $for;
+            component.repeat = {
+                items: forObj.items,
+                as: forObj.as,
+                indexAs: forObj.index,
+                filter: forObj.filter,
+                sort: forObj.sort,
+            };
+        }
+        // Convert condition
+        if ($if) {
+            component.condition = $if;
+        }
+        // Convert event handlers
+        Object.entries(regularProps).forEach(([key, value]) => {
+            if (typeof value === 'object' && value !== null && '$action' in value) {
+                component.events = component.events || [];
+                component.events.push({
+                    event: key,
+                    action: value.$action,
+                    params: value.params,
+                });
+                delete component.props[key];
+            }
+        });
+    }
+    // Convert children
+    if (node.children) {
+        component.children = node.children.map(convertSingleNodeToComponent);
+    }
+    // Text content
+    if (node.text) {
+        component.props = component.props || {};
+        component.props.children = node.text;
+    }
+    return component;
+}
+/**
+ * Convert json-render state to A2R-IX UIState
+ */
+function convertJsonRenderStateToState(state) {
+    return {
+        variables: Object.entries(state).map(([path, config]) => ({
+            path,
+            type: config.type,
+            default: config.default,
+        })),
+        computed: [],
+        initial: Object.entries(state).reduce((acc, [path, config]) => {
+            if (config.default !== undefined) {
+                acc[path] = config.default;
+            }
+            return acc;
+        }, {}),
+    };
+}
+/**
+ * Convert json-render events to A2R-IX UIActions
+ *
+ * GAP-60: Replace Placeholder Handlers
+ * Uses createActionHandlerFromEvent for proper handler resolution
+ */
+function convertJsonRenderEventsToActions(events) {
+    return Object.entries(events).map(([id, config]) => {
+        const action = {
+            id,
+            type: config.type,
+            handler: createActionHandlerFromEvent(config),
+        };
+        // Refine action type based on handler type
+        if (action.handler.type === 'setState') {
+            action.type = 'setState';
+        }
+        else if (action.handler.type === 'emitEvent') {
+            action.type = 'emitEvent';
+        }
+        else if (action.handler.type === 'navigate') {
+            action.type = 'navigate';
+        }
+        else if (action.handler.type === 'validate') {
+            action.type = 'validate';
+        }
+        else if (action.handler.type === 'custom') {
+            action.type = 'custom';
+        }
+        return action;
+    });
+}
+/**
+ * Generate unique ID
+ */
+function generateId() {
+    return `comp_${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Capitalize string
+ */
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * json-render adapter configuration
+ */
+export const jsonRenderAdapter = {
+    name: 'json-render',
+    version: '1.0.0',
+    /**
+     * Standard json-render components mapped to A2R-IX catalog
+     */
+    components: {
+        // Layout
+        Box: 'layout',
+        Stack: 'layout',
+        Grid: 'layout',
+        Flex: 'layout',
+        Container: 'layout',
+        // Typography
+        Text: 'typography',
+        Heading: 'typography',
+        Paragraph: 'typography',
+        Label: 'typography',
+        Link: 'typography',
+        // Input
+        Input: 'input',
+        TextArea: 'input',
+        Select: 'input',
+        Checkbox: 'input',
+        Radio: 'input',
+        Switch: 'input',
+        Slider: 'input',
+        DatePicker: 'input',
+        FileInput: 'input',
+        // Display
+        Image: 'display',
+        Icon: 'display',
+        Badge: 'display',
+        Card: 'display',
+        List: 'display',
+        Table: 'display',
+        Tabs: 'display',
+        Accordion: 'display',
+        Modal: 'display',
+        Tooltip: 'display',
+        Progress: 'display',
+        Chart: 'display',
+        Avatar: 'display',
+        Divider: 'display',
+        Spacer: 'display',
+    },
+    /**
+     * Convert from json-render
+     */
+    fromJsonRender: convertFromJsonRender,
+    /**
+     * Convert to json-render
+     */
+    toJsonRender: convertToJsonRender,
+    /**
+     * Check if value is a valid json-render schema
+     */
+    isValidSchema(value) {
+        if (!value || typeof value !== 'object')
+            return false;
+        const schema = value;
+        return (typeof schema.version === 'string' &&
+            schema.root !== undefined &&
+            typeof schema.root.type === 'string');
+    },
+    /**
+     * Check if node is a valid json-render node
+     */
+    isValidNode(value) {
+        if (!value || typeof value !== 'object')
+            return false;
+        const node = value;
+        return typeof node.type === 'string';
+    },
+    /**
+     * GAP-59/61: Handler Registry Access
+     * Get the global handler registry for custom action handlers
+     */
+    get handlerRegistry() {
+        return globalHandlerRegistry;
+    },
+    /**
+     * GAP-60: Execute custom handler
+     * Execute a registered custom handler by name
+     */
+    async executeHandler(name, context) {
+        return globalHandlerRegistry.execute(name, context);
+    },
+};
+//# sourceMappingURL=json-render.js.map