a2uink 0.1.0

package/dist/examples/demo.js

@@ -0,0 +1,309 @@
+import { createA2uiInkRenderer } from "../src/index.js";
+import { inspect } from "node:util";
+process.on("uncaughtException", (error) => {
+    process.stderr.write(`\nUncaught exception: ${error instanceof Error ? error.stack : JSON.stringify(error)}\n`);
+});
+process.on("unhandledRejection", (reason) => {
+    process.stderr.write(`\nUnhandled rejection: ${reason instanceof Error ? reason.stack : JSON.stringify(reason)}\n`);
+});
+const renderer = createA2uiInkRenderer({
+    onUserAction: (action) => {
+        process.stderr.write(`\nUser action: ${JSON.stringify(action)}\n`);
+    }
+});
+const surfaceId = "main";
+const safeHandleMessage = (message) => {
+    var _a, _b;
+    try {
+        renderer.handleMessage(message);
+    }
+    catch (error) {
+        process.stderr.write(`\nRenderer error: ${inspect(error, { depth: 5 })}\n`);
+        process.stderr.write(`stdout.isTTY=${(_a = process.stdout) === null || _a === void 0 ? void 0 : _a.isTTY} stderr.isTTY=${(_b = process.stderr) === null || _b === void 0 ? void 0 : _b.isTTY}\n`);
+        throw error;
+    }
+};
+safeHandleMessage({
+    type: "surfaceUpdate",
+    surfaceId,
+    rootComponentId: "root",
+    components: [
+        {
+            id: "root",
+            type: "Box",
+            props: { direction: "column", padding: 1, borderStyle: "round" },
+            children: {
+                explicitList: [
+                    "title",
+                    "rootSpacer1",
+                    "inputSection",
+                    "rootSpacer2",
+                    "choiceSection",
+                    "rootSpacer3",
+                    "contentSection",
+                    "rootSpacer4",
+                    "extraSection",
+                    "rootSpacer5",
+                    "submit"
+                ]
+            }
+        },
+        {
+            id: "title",
+            type: "Text",
+            props: { text: { path: "title" }, bold: true }
+        },
+        {
+            id: "rootSpacer1",
+            type: "Spacer"
+        },
+        {
+            id: "inputSection",
+            type: "Box",
+            props: { direction: "column", borderStyle: "single", paddingX: 1, paddingY: 0 },
+            children: { explicitList: ["inputLabel", "nameInput"] }
+        },
+        {
+            id: "inputLabel",
+            type: "Text",
+            props: { text: "Input" }
+        },
+        {
+            id: "nameInput",
+            type: "Input",
+            props: {
+                value: { path: "form.name", literalString: "" },
+                onChange: { actionId: "nameChange" },
+                onSubmit: { actionId: "nameSubmit" }
+            }
+        },
+        {
+            id: "rootSpacer2",
+            type: "Spacer"
+        },
+        {
+            id: "choiceSection",
+            type: "Box",
+            props: { direction: "column", borderStyle: "single", paddingX: 1, paddingY: 0 },
+            children: { explicitList: ["checkbox", "radioLabel", "radioGroup", "selectLabel", "options"] }
+        },
+        {
+            id: "checkbox",
+            type: "Checkbox",
+            props: {
+                label: "Enable feature",
+                checked: { path: "flags.enabled", literalBoolean: false },
+                onChange: { actionId: "toggleFeature" }
+            }
+        },
+        {
+            id: "radioLabel",
+            type: "Text",
+            props: { text: "RadioGroup" }
+        },
+        {
+            id: "radioGroup",
+            type: "RadioGroup",
+            props: {
+                options: { path: "radioOptions" },
+                selectedIndex: { path: "selectedRadio", literalNumber: 0 },
+                onChange: { actionId: "radioChange" }
+            }
+        },
+        {
+            id: "selectLabel",
+            type: "Text",
+            props: { text: "Select" }
+        },
+        {
+            id: "options",
+            type: "Select",
+            props: {
+                items: { path: "options" },
+                selectedIndex: { path: "selectedIndex", literalNumber: 0 },
+                onSelect: { actionId: "optionSelect" }
+            }
+        },
+        {
+            id: "rootSpacer3",
+            type: "Spacer"
+        },
+        {
+            id: "contentSection",
+            type: "Box",
+            props: { direction: "column", borderStyle: "single", paddingX: 1, paddingY: 0 },
+            children: { explicitList: ["listLabel", "simpleList", "tabsLabel", "tabs", "tableLabel", "table"] }
+        },
+        {
+            id: "listLabel",
+            type: "Text",
+            props: { text: "List" }
+        },
+        {
+            id: "simpleList",
+            type: "List",
+            props: {
+                items: { path: "listItems" }
+            }
+        },
+        {
+            id: "tabsLabel",
+            type: "Text",
+            props: { text: "Tabs" }
+        },
+        {
+            id: "tabs",
+            type: "Tabs",
+            props: {
+                tabs: { path: "tabs" },
+                selectedIndex: { path: "selectedTab", literalNumber: 0 },
+                onChange: { actionId: "tabChange" }
+            },
+            children: {
+                explicitList: ["tabPanelA", "tabPanelB", "tabPanelC"]
+            }
+        },
+        {
+            id: "tabPanelA",
+            type: "Text",
+            props: { text: "Panel A content" }
+        },
+        {
+            id: "tabPanelB",
+            type: "Text",
+            props: { text: "Panel B content" }
+        },
+        {
+            id: "tabPanelC",
+            type: "Text",
+            props: { text: "Panel C content" }
+        },
+        {
+            id: "tableLabel",
+            type: "Text",
+            props: { text: "Table" }
+        },
+        {
+            id: "table",
+            type: "Table",
+            props: {
+                columns: { path: "table.columns" },
+                rows: { path: "table.rows" }
+            }
+        },
+        {
+            id: "rootSpacer4",
+            type: "Spacer"
+        },
+        {
+            id: "extraSection",
+            type: "Box",
+            props: { direction: "column", borderStyle: "single", paddingX: 1, paddingY: 0 },
+            children: {
+                explicitList: [
+                    "textFieldLabel",
+                    "textField",
+                    "choiceLabel",
+                    "multipleChoice",
+                    "sliderLabel",
+                    "slider",
+                    "mediaLabel",
+                    "image"
+                ]
+            }
+        },
+        {
+            id: "textFieldLabel",
+            type: "Text",
+            props: { text: "TextField" }
+        },
+        {
+            id: "textField",
+            type: "TextField",
+            props: {
+                label: "Email",
+                value: { path: "form.email" },
+                onChange: { actionId: "emailChange" }
+            }
+        },
+        {
+            id: "choiceLabel",
+            type: "Text",
+            props: { text: "MultipleChoice" }
+        },
+        {
+            id: "multipleChoice",
+            type: "MultipleChoice",
+            props: {
+                label: "Meal",
+                items: [
+                    { label: "Pizza", value: "pizza" },
+                    { label: "Sushi", value: "sushi" },
+                    { label: "Salad", value: "salad" }
+                ],
+                onSelect: { actionId: "mealSelect" }
+            }
+        },
+        {
+            id: "sliderLabel",
+            type: "Text",
+            props: { text: "Slider" }
+        },
+        {
+            id: "slider",
+            type: "Slider",
+            props: { min: 1, max: 5, step: 1, value: { path: "form.priority" }, onChange: { actionId: "priorityChange" } }
+        },
+        {
+            id: "mediaLabel",
+            type: "Text",
+            props: { text: "Media" }
+        },
+        {
+            id: "image",
+            type: "Image",
+            props: { label: "Menu", url: "https://example.com/menu.png" }
+        },
+        {
+            id: "rootSpacer5",
+            type: "Spacer"
+        },
+        {
+            id: "submit",
+            type: "Button",
+            props: {
+                text: "Submit",
+                onPress: { actionId: "submit" }
+            }
+        }
+    ]
+});
+safeHandleMessage({
+    type: "dataModelUpdate",
+    surfaceId,
+    dataModel: {
+        title: "A2UI Ink Demo",
+        form: { name: "", email: "", priority: 3 },
+        flags: { enabled: false },
+        radioOptions: ["Low", "Medium", "High"],
+        selectedRadio: 1,
+        listItems: ["Item A", "Item B", "Item C"],
+        options: ["Alpha", "Beta", "Gamma"],
+        selectedIndex: 0,
+        tabs: ["Tab A", "Tab B", "Tab C"],
+        selectedTab: 0,
+        table: {
+            columns: ["Name", "Status"],
+            rows: [
+                ["Service A", "OK"],
+                ["Service B", "Warn"],
+                ["Service C", "Down"]
+            ]
+        }
+    }
+});
+safeHandleMessage({
+    type: "beginRendering",
+    surfaceId,
+    catalogId: "standard"
+});

package/dist/focus.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { Key } from "ink";
+export type FocusKeyHandler = (input: string, key: Key) => void;
+export interface FocusRegistry {
+    register(id: string, handler: FocusKeyHandler): void;
+    unregister(id: string): void;
+    isFocused(id: string): boolean;
+    focusNext(): void;
+    focusPrev(): void;
+    handleKey(input: string, key: Key): void;
+}
+export declare const FocusProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare function useFocusRegistry(): FocusRegistry;

package/dist/focus.js

@@ -0,0 +1,68 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+const FocusContext = createContext(null);
+export const FocusProvider = ({ children }) => {
+    const [order, setOrder] = useState([]);
+    const [activeId, setActiveId] = useState(null);
+    const handlers = useRef(new Map());
+    const register = useCallback((id, handler) => {
+        handlers.current.set(id, handler);
+        setOrder((current) => (current.includes(id) ? current : [...current, id]));
+        setActiveId((current) => current !== null && current !== void 0 ? current : id);
+    }, []);
+    const unregister = useCallback((id) => {
+        handlers.current.delete(id);
+        setOrder((current) => current.filter((value) => value !== id));
+        setActiveId((current) => (current === id ? null : current));
+    }, []);
+    const focusNext = useCallback(() => {
+        setActiveId((current) => {
+            var _a;
+            if (!order.length) {
+                return null;
+            }
+            if (!current) {
+                return order[0];
+            }
+            const index = order.indexOf(current);
+            return (_a = order[(index + 1) % order.length]) !== null && _a !== void 0 ? _a : order[0];
+        });
+    }, [order]);
+    const focusPrev = useCallback(() => {
+        setActiveId((current) => {
+            var _a;
+            if (!order.length) {
+                return null;
+            }
+            if (!current) {
+                return order[order.length - 1];
+            }
+            const index = order.indexOf(current);
+            return (_a = order[(index - 1 + order.length) % order.length]) !== null && _a !== void 0 ? _a : order[0];
+        });
+    }, [order]);
+    const handleKey = useCallback((input, key) => {
+        if (!activeId) {
+            return;
+        }
+        const handler = handlers.current.get(activeId);
+        if (handler) {
+            handler(input, key);
+        }
+    }, [activeId]);
+    const registry = useMemo(() => ({
+        register,
+        unregister,
+        isFocused: (id) => activeId === id,
+        focusNext,
+        focusPrev,
+        handleKey
+    }), [register, unregister, activeId, focusNext, focusPrev, handleKey]);
+    return React.createElement(FocusContext.Provider, { value: registry }, children);
+};
+export function useFocusRegistry() {
+    const context = useContext(FocusContext);
+    if (!context) {
+        throw new Error("FocusRegistry is not available");
+    }
+    return context;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { createA2uiInkRenderer } from "./renderer.js";
+export type { A2uiServerMessage, A2uiUserAction, BeginRenderingMessage, SurfaceUpdateMessage, DataModelUpdateMessage, DeleteSurfaceMessage, RendererOptions, ComponentDef, BoundValue } from "./types.js";

package/dist/index.js

@@ -0,0 +1 @@
+export { createA2uiInkRenderer } from "./renderer.js";

package/dist/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { A2uiServerMessage, RendererOptions } from "./types.js";
+export interface A2uiInkRenderer {
+    handleMessage(message: A2uiServerMessage): void;
+    dispose(): void;
+}
+export declare function createA2uiInkRenderer(options?: RendererOptions): A2uiInkRenderer;

package/dist/renderer.js

@@ -0,0 +1,144 @@
+import React from "react";
+import { render, Text, useInput } from "ink";
+import { FocusProvider, useFocusRegistry } from "./focus.js";
+import { buildResolvedTree } from "./tree.js";
+import { renderNode } from "./catalog.js";
+export function createA2uiInkRenderer(options = {}) {
+    const surfaces = new Map();
+    let inkInstance = null;
+    const ensureSurface = (surfaceId) => {
+        const existing = surfaces.get(surfaceId);
+        if (existing) {
+            return existing;
+        }
+        const created = {
+            surfaceId,
+            components: {},
+            dataModel: {},
+            renderReady: false
+        };
+        surfaces.set(surfaceId, created);
+        return created;
+    };
+    const renderSurfaces = () => {
+        const surface = Array.from(surfaces.values()).find((entry) => entry.renderReady && entry.rootComponentId);
+        const element = React.createElement(A2uiRoot, {
+            surface: surface !== null && surface !== void 0 ? surface : null,
+            onUserAction: options.onUserAction
+        });
+        if (!inkInstance) {
+            inkInstance = render(element, {
+                stdin: options.stdin,
+                stdout: options.stdout,
+                stderr: options.stderr,
+                exitOnCtrlC: false
+            });
+        }
+        else {
+            inkInstance.rerender(element);
+        }
+    };
+    const handleMessage = (message) => {
+        switch (message.type) {
+            case "beginRendering": {
+                const surface = ensureSurface(message.surfaceId);
+                surface.catalogId = message.catalogId;
+                surface.renderReady = true;
+                renderSurfaces();
+                break;
+            }
+            case "surfaceUpdate": {
+                const surface = ensureSurface(message.surfaceId);
+                surface.rootComponentId = message.rootComponentId;
+                surface.components = message.components.reduce((acc, component) => {
+                    acc[component.id] = component;
+                    return acc;
+                }, {});
+                renderSurfaces();
+                break;
+            }
+            case "dataModelUpdate": {
+                const surface = ensureSurface(message.surfaceId);
+                surface.dataModel = mergeDataModel(surface.dataModel, message.dataModel);
+                renderSurfaces();
+                break;
+            }
+            case "deleteSurface": {
+                surfaces.delete(message.surfaceId);
+                renderSurfaces();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    const dispose = () => {
+        inkInstance === null || inkInstance === void 0 ? void 0 : inkInstance.unmount();
+        inkInstance = null;
+    };
+    return { handleMessage, dispose };
+}
+const A2uiRoot = ({ surface, onUserAction }) => {
+    if (!surface || !surface.rootComponentId) {
+        return React.createElement(Text, null, "No surface");
+    }
+    const tree = buildResolvedTree(surface.components, surface.rootComponentId, surface.dataModel);
+    if (!tree) {
+        return React.createElement(Text, null, "Invalid surface");
+    }
+    return React.createElement(FocusProvider, null, React.createElement(FocusInputHandler), React.createElement(RenderTree, {
+        surfaceId: surface.surfaceId,
+        tree,
+        onUserAction
+    }));
+};
+const FocusInputHandler = () => {
+    const focus = useFocusRegistry();
+    useInput((input, key) => {
+        if (key.tab) {
+            if (key.shift) {
+                focus.focusPrev();
+            }
+            else {
+                focus.focusNext();
+            }
+            return;
+        }
+        focus.handleKey(input, key);
+    });
+    return null;
+};
+const RenderTree = ({ surfaceId, tree, onUserAction }) => {
+    const dispatchAction = (action, node, value) => {
+        var _a, _b, _c;
+        const context = {
+            ...((_a = action.context) !== null && _a !== void 0 ? _a : {}),
+            ...(((_b = node.bindingContext) === null || _b === void 0 ? void 0 : _b.index) !== undefined ? { index: node.bindingContext.index } : {}),
+            ...(((_c = node.bindingContext) === null || _c === void 0 ? void 0 : _c.item) !== undefined ? { item: node.bindingContext.item } : {})
+        };
+        onUserAction === null || onUserAction === void 0 ? void 0 : onUserAction({
+            type: "userAction",
+            surfaceId,
+            componentId: node.id,
+            actionId: action.actionId,
+            context,
+            value
+        });
+    };
+    return renderNode(tree, { dispatchAction });
+};
+function mergeDataModel(base, update) {
+    const result = { ...base };
+    for (const [key, value] of Object.entries(update)) {
+        if (isPlainObject(value) && isPlainObject(result[key])) {
+            result[key] = mergeDataModel(result[key], value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+function isPlainObject(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+}

package/dist/src/binding.d.ts

@@ -0,0 +1,8 @@
+import type { BindingContext, BoundValue } from "./types.js";
+export declare function resolveBoundValue(boundValue: BoundValue | undefined, dataModel: Record<string, unknown>, context?: BindingContext): unknown;
+export declare function resolveProps(props: Record<string, unknown>, dataModel: Record<string, unknown>, context?: BindingContext): Record<string, unknown>;
+export declare function resolvePropsWithBindings(props: Record<string, unknown>, dataModel: Record<string, unknown>, context?: BindingContext): {
+    props: Record<string, unknown>;
+    boundProps: Record<string, BoundValue>;
+};
+export declare function setBoundValue(path: string, dataModel: Record<string, unknown>, context: BindingContext | undefined, value: unknown): Record<string, unknown>;