@allternit/ix 0.1.0 → 0.1.1

package/dist/react/index.d.ts.bak

@@ -1,18 +0,0 @@
-/**
- * React Renderer
- *
- * @example
- * ```tsx
- * import { createReactRenderer, createDefaultCatalog } from '@allternit/ix/react';
- *
- * const renderer = createReactRenderer({
- *   catalog: createDefaultCatalog(),
- * });
- *
- * function App() {
- *   return <renderer.UIRoot root={uiDefinition} />;
- * }
- * ```
- */
-export { createReactRenderer, type ReactRenderer, type ReactRendererConfig, } from './renderer';
-//# sourceMappingURL=index.d.ts.map

package/dist/react/index.js.bak

@@ -1,18 +0,0 @@
-/**
- * React Renderer
- *
- * @example
- * ```tsx
- * import { createReactRenderer, createDefaultCatalog } from '@allternit/ix/react';
- *
- * const renderer = createReactRenderer({
- *   catalog: createDefaultCatalog(),
- * });
- *
- * function App() {
- *   return <renderer.UIRoot root={uiDefinition} />;
- * }
- * ```
- */
-export { createReactRenderer, } from './renderer';
-//# sourceMappingURL=index.js.map

package/dist/react/renderer.d.ts.bak

@@ -1,47 +0,0 @@
-/**
- * React Renderer for A2R-IX
- *
- * Renders A2R-IX UI IR to React components.
- */
-import React from 'react';
-import type { UIRoot, UIComponent } from '../types';
-import type { StateStore } from '../state/store';
-import type { ComponentCatalog } from '../catalog/registry';
-import type { JSONPatch } from '../state/patch';
-export interface ReactRendererConfig {
-    /** Component catalog */
-    catalog?: ComponentCatalog;
-    /** Initial state store */
-    stateStore?: StateStore;
-    /** Component mapping (type -> React component) */
-    components?: Record<string, React.ComponentType<unknown>>;
-    /** Event handler */
-    onEvent?: (name: string, payload: unknown) => void;
-    /** Error handler */
-    onError?: (error: Error, componentId?: string) => void;
-    /** Debug mode */
-    debug?: boolean;
-}
-export interface ReactRenderer {
-    /** Render UI root */
-    UIRoot: React.FC<{
-        root: UIRoot;
-    }>;
-    /** Render single component */
-    UIComponent: React.FC<{
-        component: UIComponent;
-    }>;
-    /** Get state value */
-    getState: (path: string) => unknown;
-    /** Set state value */
-    setState: (path: string, value: unknown) => void;
-    /** Apply patch */
-    applyPatch: (patch: JSONPatch) => void;
-    /** Dispatch action */
-    dispatch: (actionId: string, params?: Record<string, unknown>) => void;
-}
-/**
- * Create React renderer
- */
-export declare function createReactRenderer(config: ReactRendererConfig): ReactRenderer;
-//# sourceMappingURL=renderer.d.ts.map

package/dist/react/renderer.js.bak

@@ -1,420 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * React Renderer for A2R-IX
- *
- * Renders A2R-IX UI IR to React components.
- */
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { createStateStore } from '../state/store';
-import { createDefaultCatalog } from '../catalog/registry';
-import { applyPatchToStore } from '../state/patch';
-import { evaluateExpression } from '../types';
-/**
- * Create React renderer
- */
-export function createReactRenderer(config) {
-    const catalog = config.catalog ?? createDefaultCatalog();
-    const customComponents = config.components ?? {};
-    // Context for state store
-    const StoreContext = React.createContext(null);
-    /**
-     * Hook to use state from store
-     */
-    function useStoreState(path) {
-        const store = React.useContext(StoreContext);
-        if (!store)
-            throw new Error('Store not available');
-        const [value, setValue] = useState(() => store.get(path));
-        useEffect(() => {
-            const unsubscribe = store.subscribe(path, (newValue) => {
-                setValue(newValue);
-            });
-            return unsubscribe;
-        }, [store, path]);
-        const updateValue = useCallback((newValue) => {
-            store.set(path, newValue);
-        }, [store, path]);
-        return [value, updateValue];
-    }
-    /**
-     * Hook to evaluate expression
-     */
-    function useExpression(expr, localContext = {}) {
-        const store = React.useContext(StoreContext);
-        return useMemo(() => {
-            if (expr === undefined)
-                return undefined;
-            const context = { ...store?.snapshot(), ...localContext };
-            return evaluateExpression(expr, context);
-        }, [expr, store, localContext]);
-    }
-    /**
-     * Component renderer
-     */
-    const UIComponentRenderer = ({ component, localContext = {} }) => {
-        const store = React.useContext(StoreContext);
-        const [error, setError] = useState(null);
-        // Handle errors
-        if (error) {
-            config.onError?.(error, component.id);
-            return _jsx(ErrorFallback, { error: error, componentId: component.id });
-        }
-        try {
-            // Evaluate condition
-            if (component.condition) {
-                const conditionValue = evaluateExpression(component.condition, {
-                    ...store?.snapshot(),
-                    ...localContext,
-                });
-                if (!conditionValue)
-                    return null;
-            }
-            // Handle repeat
-            if (component.repeat) {
-                return _jsx(RepeatComponent, { component: component, localContext: localContext });
-            }
-            return _jsx(SingleComponent, { component: component, localContext: localContext });
-        }
-        catch (err) {
-            setError(err);
-            return null;
-        }
-    };
-    /**
-     * Repeat component renderer
-     */
-    const RepeatComponent = ({ component, localContext }) => {
-        const store = React.useContext(StoreContext);
-        const repeat = component.repeat;
-        const items = store?.get(repeat.items) ?? [];
-        // Apply filter if specified
-        let filteredItems = items;
-        if (repeat.filter) {
-            filteredItems = items.filter((item, index) => {
-                const ctx = { ...localContext, [repeat.as]: item, ...(repeat.indexAs ? { [repeat.indexAs]: index } : {}) };
-                return evaluateExpression(repeat.filter, { ...store?.snapshot(), ...ctx });
-            });
-        }
-        // Apply sort if specified
-        if (repeat.sort) {
-            filteredItems = [...filteredItems].sort((a, b) => {
-                const ctxA = { ...localContext, [repeat.as]: a };
-                const ctxB = { ...localContext, [repeat.as]: b };
-                const valA = evaluateExpression(repeat.sort, { ...store?.snapshot(), ...ctxA });
-                const valB = evaluateExpression(repeat.sort, { ...store?.snapshot(), ...ctxB });
-                if (valA < valB)
-                    return -1;
-                if (valA > valB)
-                    return 1;
-                return 0;
-            });
-        }
-        return (_jsx(_Fragment, { children: filteredItems.map((item, index) => {
-                const itemContext = {
-                    ...localContext,
-                    [repeat.as]: item,
-                    ...(repeat.indexAs ? { [repeat.indexAs]: index } : {}),
-                };
-                return (_jsx(SingleComponent, { component: { ...component, id: `${component.id}-${index}` }, localContext: itemContext }, `${component.id}-${index}`));
-            }) }));
-    };
-    /**
-     * Single component renderer
-     */
-    const SingleComponent = ({ component, localContext }) => {
-        const store = React.useContext(StoreContext);
-        const [props, setProps] = useState({});
-        // Build props with bindings
-        useEffect(() => {
-            const newProps = { ...component.props };
-            // Apply bindings
-            component.bindings?.forEach((binding) => {
-                const value = store?.get(binding.statePath);
-                newProps[binding.prop] = value;
-            });
-            setProps(newProps);
-        }, [component, store]);
-        // Subscribe to binding changes
-        useEffect(() => {
-            if (!component.bindings || !store)
-                return;
-            const unsubscribes = component.bindings.map((binding) => store.subscribe(binding.statePath, (value) => {
-                setProps((prev) => ({ ...prev, [binding.prop]: value }));
-            }));
-            return () => unsubscribes.forEach((unsub) => unsub());
-        }, [component.bindings, store]);
-        // Handle events
-        const handleEvent = useCallback((eventName, actionId, params) => {
-            return (...eventArgs) => {
-                const fullContext = {
-                    ...store?.snapshot(),
-                    ...localContext,
-                    event: eventArgs[0],
-                };
-                dispatchAction(actionId, params, fullContext);
-            };
-        }, [store, localContext]);
-        // Get component type
-        const Component = customComponents[component.type] || getBuiltinComponent(component.type);
-        if (!Component) {
-            config.onError?.(new Error(`Unknown component type: ${component.type}`), component.id);
-            return null;
-        }
-        // Build final props
-        const finalProps = { ...props };
-        // Add event handlers
-        component.events?.forEach((event) => {
-            finalProps[event.event] = handleEvent(event.event, event.action, event.params);
-        });
-        // Add two-way binding handlers
-        component.bindings?.forEach((binding) => {
-            if (binding.direction === 'two-way') {
-                const changeHandlerName = `on${capitalize(binding.prop)}Change`;
-                finalProps[changeHandlerName] = (value) => {
-                    store?.set(binding.statePath, value);
-                };
-            }
-        });
-        // Render children
-        const children = component.children?.map((child) => (_jsx(UIComponentRenderer, { component: child, localContext: localContext }, child.id)));
-        // Use createElement for dynamic component rendering
-        return React.createElement(Component, { ...finalProps, key: component.id }, children?.length ? children : null);
-    };
-    /**
-     * Error fallback component
-     */
-    const ErrorFallback = ({ error, componentId }) => {
-        if (process.env.NODE_ENV === 'production') {
-            return null;
-        }
-        return (_jsxs("div", { style: {
-                padding: '12px',
-                background: '#fef2f2',
-                border: '1px solid #fecaca',
-                borderRadius: '4px',
-                color: '#dc2626',
-                fontSize: '12px',
-            }, children: [_jsxs("strong", { children: ["Component Error", componentId ? ` (${componentId})` : ''] }), _jsx("pre", { style: { margin: '8px 0 0', whiteSpace: 'pre-wrap' }, children: error.message })] }));
-    };
-    /**
-     * Root component
-     */
-    const UIRootComponent = ({ root }) => {
-        const [store, setStore] = useState(null);
-        useEffect(() => {
-            const newStore = config.stateStore ?? createStateStore({
-                initial: root.state.initial,
-                variables: root.state.variables,
-            });
-            // Initialize state
-            if (root.state.initial) {
-                Object.entries(root.state.initial).forEach(([path, value]) => {
-                    newStore.set(path, value);
-                });
-            }
-            setStore(newStore);
-        }, [root]);
-        if (!store)
-            return null;
-        return (_jsxs(StoreContext.Provider, { value: store, children: [_jsx("div", { className: "a2r-ix-root", "data-version": root.version, children: root.components.map((component) => (_jsx(UIComponentRenderer, { component: component }, component.id))) }), root.css && _jsx("style", { children: root.css })] }));
-    };
-    /**
-     * Get builtin component
-     */
-    function getBuiltinComponent(type) {
-        const builtins = {
-            Box: (({ children, ...props }) => _jsx("div", { style: convertBoxProps(props), children: children })),
-            Stack: (({ children, direction = 'vertical', spacing = 0, ...props }) => (_jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: direction === 'horizontal' ? 'row' : 'column',
-                    gap: `${spacing * 4}px`,
-                    ...convertBoxProps(props),
-                }, children: children }))),
-            Text: (({ children, size = 'md', weight = 'normal', color, align, ...props }) => (_jsx("span", { style: {
-                    fontSize: getTextSize(size),
-                    fontWeight: getFontWeight(weight),
-                    color,
-                    textAlign: align,
-                    ...props.style,
-                }, children: children }))),
-            Heading: (({ children, level = 1, color, ...props }) => {
-                const Tag = `h${level}`;
-                return (_jsx(Tag, { style: {
-                        fontSize: getHeadingSize(level),
-                        fontWeight: 'bold',
-                        color,
-                        margin: '0 0 16px',
-                        ...props.style,
-                    }, children: children }));
-            }),
-            Paragraph: ({ children, size = 'md', color, ...props }) => (_jsx("p", { style: {
-                    fontSize: getTextSize(size),
-                    color,
-                    margin: '0 0 12px',
-                    lineHeight: 1.6,
-                    ...props.style,
-                }, children: children })),
-            Button: ({ children, variant = 'primary', size = 'md', disabled, loading, onClick, ...props }) => (_jsx("button", { onClick: onClick, disabled: disabled || loading, style: {
-                    padding: size === 'sm' ? '6px 12px' : size === 'lg' ? '12px 24px' : '8px 16px',
-                    fontSize: size === 'sm' ? '14px' : size === 'lg' ? '18px' : '16px',
-                    background: getButtonColor(variant),
-                    color: '#fff',
-                    border: 'none',
-                    borderRadius: '6px',
-                    cursor: disabled ? 'not-allowed' : 'pointer',
-                    opacity: disabled ? 0.6 : 1,
-                    ...props.style,
-                }, children: loading ? 'Loading...' : children })),
-            Input: ({ value, placeholder, type = 'text', disabled, required, onChange, onBlur, onFocus, ...props }) => (_jsx("input", { type: type, value: value, placeholder: placeholder, disabled: disabled, required: required, onChange: (e) => onChange?.(e.target.value), onBlur: onBlur, onFocus: onFocus, style: {
-                    padding: '8px 12px',
-                    fontSize: '16px',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '6px',
-                    width: '100%',
-                    ...props.style,
-                } })),
-            TextArea: ({ value, placeholder, rows = 3, disabled, onChange, ...props }) => (_jsx("textarea", { value: value, placeholder: placeholder, rows: rows, disabled: disabled, onChange: (e) => onChange?.(e.target.value), style: {
-                    padding: '8px 12px',
-                    fontSize: '16px',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '6px',
-                    width: '100%',
-                    resize: 'vertical',
-                    ...props.style,
-                } })),
-            Select: ({ value, options, placeholder, disabled, onChange, ...props }) => (_jsxs("select", { value: value, disabled: disabled, onChange: (e) => onChange?.(e.target.value), style: {
-                    padding: '8px 12px',
-                    fontSize: '16px',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '6px',
-                    width: '100%',
-                    ...props.style,
-                }, children: [placeholder && _jsx("option", { value: "", children: placeholder }), options?.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })),
-            Card: ({ children, padding = 16, elevation = 1, borderRadius = 8, ...props }) => (_jsx("div", { style: {
-                    padding: `${padding}px`,
-                    background: '#fff',
-                    borderRadius: `${borderRadius}px`,
-                    boxShadow: getElevation(elevation),
-                    ...props.style,
-                }, children: children })),
-            Badge: ({ children, variant = 'default', size = 'md' }) => (_jsx("span", { style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    padding: size === 'sm' ? '2px 6px' : '4px 10px',
-                    fontSize: size === 'sm' ? '12px' : '14px',
-                    fontWeight: 500,
-                    background: getBadgeColor(variant),
-                    color: '#fff',
-                    borderRadius: '9999px',
-                }, children: children })),
-            Image: ({ src, alt = '', width, height, objectFit, ...props }) => (_jsx("img", { src: src, alt: alt, width: width, height: height, style: {
-                    objectFit: objectFit,
-                    maxWidth: '100%',
-                    ...props.style,
-                } })),
-            Icon: ({ name, size = 16, color }) => (_jsx("span", { style: {
-                    width: `${size}px`,
-                    height: `${size}px`,
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    color,
-                }, children: name })),
-            List: ({ items, renderItem, emptyText = 'No items' }) => {
-                if (!items || items.length === 0) {
-                    return _jsx("div", { style: { color: '#6b7280', fontStyle: 'italic' }, children: emptyText });
-                }
-                return (_jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, children: items.map((item, index) => (_jsx("li", { children: renderItem(item, index) }, index))) }));
-            },
-            Table: ({ data, columns, onRowClick, emptyText = 'No data' }) => {
-                if (!data || data.length === 0) {
-                    return _jsx("div", { style: { color: '#6b7280', fontStyle: 'italic' }, children: emptyText });
-                }
-                return (_jsxs("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { style: { textAlign: 'left', padding: '8px', borderBottom: '1px solid #e5e7eb' }, children: col.title }, col.key))) }) }), _jsx("tbody", { children: data.map((row, index) => (_jsx("tr", { onClick: () => onRowClick?.(row, index), style: { cursor: onRowClick ? 'pointer' : undefined }, children: columns.map((col) => (_jsx("td", { style: { padding: '8px', borderBottom: '1px solid #e5e7eb' }, children: col.render ? col.render(row[col.key], row) : row[col.key] }, col.key))) }, index))) })] }));
-            },
-        };
-        return builtins[type];
-    }
-    /**
-     * Dispatch action
-     */
-    function dispatchAction(actionId, params, context) {
-        config.onEvent?.(actionId, { params, context });
-    }
-    // Public API
-    return {
-        UIRoot: UIRootComponent,
-        UIComponent: UIComponentRenderer,
-        getState: (path) => config.stateStore?.get(path),
-        setState: (path, value) => config.stateStore?.set(path, value),
-        applyPatch: (patch) => {
-            if (config.stateStore) {
-                applyPatchToStore(config.stateStore, patch);
-            }
-        },
-        dispatch: (actionId, params) => {
-            const context = config.stateStore?.snapshot() ?? {};
-            dispatchAction(actionId, params, context);
-        },
-    };
-}
-// Helper functions
-function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-function convertBoxProps(props) {
-    return {
-        padding: props.padding !== undefined ? `${props.padding * 4}px` : undefined,
-        margin: props.margin !== undefined ? `${props.margin * 4}px` : undefined,
-        width: props.width,
-        height: props.height,
-        display: props.display,
-        flexDirection: props.flexDirection,
-        justifyContent: props.justifyContent,
-        alignItems: props.alignItems,
-        gap: props.gap !== undefined ? `${props.gap * 4}px` : undefined,
-        backgroundColor: props.backgroundColor,
-        borderRadius: props.borderRadius !== undefined ? `${props.borderRadius}px` : undefined,
-    };
-}
-function getTextSize(size) {
-    const sizes = { xs: '12px', sm: '14px', md: '16px', lg: '18px', xl: '20px' };
-    return sizes[size] || sizes.md;
-}
-function getHeadingSize(level) {
-    const sizes = { 1: '32px', 2: '24px', 3: '20px', 4: '18px', 5: '16px', 6: '14px' };
-    return sizes[level] || sizes[1];
-}
-function getFontWeight(weight) {
-    const weights = { normal: 400, medium: 500, semibold: 600, bold: 700 };
-    return weights[weight] || weights.normal;
-}
-function getButtonColor(variant) {
-    const colors = {
-        primary: '#3b82f6',
-        secondary: '#6b7280',
-        ghost: 'transparent',
-        danger: '#ef4444',
-    };
-    return colors[variant] || colors.primary;
-}
-function getBadgeColor(variant) {
-    const colors = {
-        default: '#6b7280',
-        success: '#22c55e',
-        warning: '#f59e0b',
-        error: '#ef4444',
-        info: '#3b82f6',
-    };
-    return colors[variant] || colors.default;
-}
-function getElevation(level) {
-    const shadows = {
-        0: 'none',
-        1: '0 1px 3px rgba(0,0,0,0.1)',
-        2: '0 4px 6px rgba(0,0,0,0.1)',
-        3: '0 10px 15px rgba(0,0,0,0.1)',
-    };
-    return shadows[level] || shadows[1];
-}
-//# sourceMappingURL=renderer.js.map

package/dist/renderer/renderer.d.ts.bak

@@ -1,55 +0,0 @@
-/**
- * UI Renderer
- *
- * Core renderer for A2R-IX UI IR. Platform-agnostic base that delegates
-to platform-specific renderers (React, Vue, etc.).
- */
-import type { UIRoot } from '../types';
-import type { StateStore } from '../state/store';
-import type { ComponentCatalog } from '../catalog/registry';
-import type { JSONPatch } from '../state/patch';
-export interface UIRendererConfig {
-    /** Component catalog */
-    catalog?: ComponentCatalog;
-    /** Platform renderer */
-    platform: PlatformRenderer;
-    /** State store instance */
-    stateStore?: StateStore;
-    /** Event handler */
-    onEvent?: (name: string, payload: unknown) => void;
-    /** Error handler */
-    onError?: (error: Error, componentId?: string) => void;
-    /** Debug mode */
-    debug?: boolean;
-}
-export interface PlatformRenderer {
-    /** Create element */
-    createElement(type: string, props: Record<string, unknown>, children: unknown[]): unknown;
-    /** Create text node */
-    createTextNode(text: string): unknown;
-    /** Render to container */
-    render(element: unknown, container: unknown): void;
-    /** Unmount */
-    unmount(container: unknown): void;
-}
-export interface UIRenderer {
-    /** Render UI to container */
-    render(root: UIRoot, container: unknown): void;
-    /** Update UI with patch */
-    update(patch: JSONPatch): void;
-    /** Dispatch action */
-    dispatch(actionId: string, params?: Record<string, unknown>): void;
-    /** Get state */
-    getState(path?: string): unknown;
-    /** Set state */
-    setState(path: string, value: unknown): void;
-    /** Subscribe to state changes */
-    subscribe(path: string, callback: (value: unknown) => void): () => void;
-    /** Destroy renderer */
-    destroy(): void;
-}
-/**
- * Create UI renderer
- */
-export declare function createUIRenderer(config: UIRendererConfig): UIRenderer;
-//# sourceMappingURL=renderer.d.ts.map