a2uink 0.1.0

package/dist/src/components/RadioGroup.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text } from "ink";
+import { useFocusRegistry } from "../focus.js";
+import { getItemLabel } from "./helpers.js";
+export const A2uiRadioGroup = ({ node, options }) => {
+    var _a, _b;
+    const focus = useFocusRegistry();
+    const { register, unregister } = focus;
+    const optionsList = ((_a = node.props.options) !== null && _a !== void 0 ? _a : []);
+    const action = node.props.onChange;
+    const selectedProp = ((_b = node.props.selectedIndex) !== null && _b !== void 0 ? _b : 0);
+    const [selectedIndex, setSelectedIndex] = useState(selectedProp);
+    const selectedRef = useRef(selectedIndex);
+    const nodeRef = useRef(node);
+    const dispatchRef = useRef(options.dispatchAction);
+    const handlerRef = useRef(() => undefined);
+    useEffect(() => {
+        if (selectedRef.current !== selectedProp) {
+            setSelectedIndex(selectedProp);
+        }
+    }, [selectedProp]);
+    useEffect(() => {
+        selectedRef.current = selectedIndex;
+    }, [selectedIndex]);
+    useEffect(() => {
+        nodeRef.current = node;
+    }, [node]);
+    useEffect(() => {
+        dispatchRef.current = options.dispatchAction;
+    }, [options.dispatchAction]);
+    useEffect(() => {
+        handlerRef.current = (input, key) => {
+            const currentIndex = selectedRef.current;
+            if (key.upArrow) {
+                setSelectedIndex((current) => (current <= 0 ? optionsList.length - 1 : current - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setSelectedIndex((current) => (current + 1) % optionsList.length);
+                return;
+            }
+            if ((key.return || input === " ") && action) {
+                const value = optionsList[currentIndex];
+                dispatchRef.current(action, nodeRef.current, value);
+            }
+        };
+    }, [action, optionsList]);
+    useEffect(() => {
+        const handler = (input, key) => handlerRef.current(input, key);
+        register(node.instanceKey, handler);
+        return () => unregister(node.instanceKey);
+    }, [register, unregister, node.instanceKey]);
+    const isFocused = focus.isFocused(node.instanceKey);
+    const labels = useMemo(() => optionsList.map(getItemLabel), [optionsList]);
+    return React.createElement(Box, { flexDirection: "column" }, labels.map((label, index) => React.createElement(Text, { key: `${node.instanceKey}_${index}`, inverse: isFocused && index === selectedIndex }, `${isFocused && index === selectedIndex ? "▶ " : "  "}${index === selectedIndex ? "(o)" : "( )"} ${label}`)));
+};

package/dist/src/components/Select.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ResolvedNode } from "../types.js";
+import type { CatalogRenderOptions } from "./types.js";
+export declare const A2uiSelect: React.FC<{
+    node: ResolvedNode;
+    options: CatalogRenderOptions;
+}>;

package/dist/src/components/Select.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text } from "ink";
+import { useFocusRegistry } from "../focus.js";
+import { getItemLabel } from "./helpers.js";
+export const A2uiSelect = ({ node, options }) => {
+    var _a, _b;
+    const focus = useFocusRegistry();
+    const { register, unregister } = focus;
+    const items = ((_a = node.props.items) !== null && _a !== void 0 ? _a : []);
+    const action = node.props.onSelect;
+    const initialIndex = ((_b = node.props.selectedIndex) !== null && _b !== void 0 ? _b : 0);
+    const [index, setIndex] = useState(initialIndex);
+    const nodeRef = useRef(node);
+    const dispatchRef = useRef(options.dispatchAction);
+    const indexRef = useRef(index);
+    const itemsRef = useRef(items);
+    const handlerRef = useRef(() => undefined);
+    useEffect(() => {
+        if (indexRef.current !== initialIndex) {
+            setIndex(initialIndex);
+        }
+    }, [initialIndex]);
+    useEffect(() => {
+        nodeRef.current = node;
+    }, [node]);
+    useEffect(() => {
+        dispatchRef.current = options.dispatchAction;
+    }, [options.dispatchAction]);
+    useEffect(() => {
+        indexRef.current = index;
+    }, [index]);
+    useEffect(() => {
+        itemsRef.current = items;
+    }, [items]);
+    useEffect(() => {
+        handlerRef.current = (input, key) => {
+            const currentItems = itemsRef.current;
+            const currentIndex = indexRef.current;
+            if (key.upArrow) {
+                setIndex((current) => (current <= 0 ? currentItems.length - 1 : current - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setIndex((current) => (current + 1) % currentItems.length);
+                return;
+            }
+            if (key.return && action) {
+                const value = currentItems[currentIndex];
+                dispatchRef.current(action, nodeRef.current, value);
+            }
+            if (input === " " && action) {
+                const value = currentItems[currentIndex];
+                dispatchRef.current(action, nodeRef.current, value);
+            }
+        };
+    }, [action]);
+    useEffect(() => {
+        const handler = (input, key) => handlerRef.current(input, key);
+        register(node.instanceKey, handler);
+        return () => unregister(node.instanceKey);
+    }, [register, unregister, node.instanceKey]);
+    const isFocused = focus.isFocused(node.instanceKey);
+    const labels = useMemo(() => items.map(getItemLabel), [items]);
+    const label = node.props.label;
+    return React.createElement(Box, { flexDirection: "column" }, label ? React.createElement(Text, { dimColor: true }, label) : null, React.createElement(Box, { flexDirection: "column" }, labels.map((itemLabel, itemIndex) => React.createElement(Text, { key: `${node.instanceKey}_${itemIndex}`, inverse: isFocused && itemIndex === index }, `${isFocused && itemIndex === index ? "▶ " : "  "}${itemLabel}`))));
+};

package/dist/src/components/Slider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ResolvedNode } from "../types.js";
+import type { CatalogRenderOptions } from "./types.js";
+export declare const A2uiSlider: React.FC<{
+    node: ResolvedNode;
+    options: CatalogRenderOptions;
+}>;

package/dist/src/components/Slider.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text } from "ink";
+import { useFocusRegistry } from "../focus.js";
+const BAR_WIDTH = 20;
+export const A2uiSlider = ({ node, options }) => {
+    const focus = useFocusRegistry();
+    const { register, unregister } = focus;
+    const min = coerceNumber(node.props.min, 0);
+    const max = coerceNumber(node.props.max, 100);
+    const step = coerceNumber(node.props.step, 1);
+    const action = node.props.onChange;
+    const initial = coerceNumber(node.props.value, min);
+    const [value, setValue] = useState(initial);
+    const valueRef = useRef(value);
+    const nodeRef = useRef(node);
+    const dispatchRef = useRef(options.dispatchAction);
+    const handlerRef = useRef(() => undefined);
+    useEffect(() => {
+        if (valueRef.current !== initial) {
+            setValue(clamp(initial, min, max));
+        }
+    }, [initial, min, max]);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    useEffect(() => {
+        nodeRef.current = node;
+    }, [node]);
+    useEffect(() => {
+        dispatchRef.current = options.dispatchAction;
+    }, [options.dispatchAction]);
+    useEffect(() => {
+        handlerRef.current = (_input, key) => {
+            if (!action) {
+                return;
+            }
+            if (key.leftArrow) {
+                const next = clamp(valueRef.current - step, min, max);
+                setValue(next);
+                dispatchRef.current(action, nodeRef.current, next);
+            }
+            if (key.rightArrow) {
+                const next = clamp(valueRef.current + step, min, max);
+                setValue(next);
+                dispatchRef.current(action, nodeRef.current, next);
+            }
+        };
+    }, [action, min, max, step]);
+    useEffect(() => {
+        const handler = (input, key) => handlerRef.current(input, key);
+        register(node.instanceKey, handler);
+        return () => unregister(node.instanceKey);
+    }, [register, unregister, node.instanceKey]);
+    const isFocused = focus.isFocused(node.instanceKey);
+    const label = node.props.label;
+    const percentage = max === min ? 1 : (value - min) / (max - min);
+    const filled = Math.max(0, Math.min(BAR_WIDTH, Math.round(percentage * BAR_WIDTH)));
+    const bar = useMemo(() => {
+        const fill = "█".repeat(filled);
+        const empty = "░".repeat(BAR_WIDTH - filled);
+        return `${fill}${empty}`;
+    }, [filled]);
+    return React.createElement(Box, { flexDirection: "column" }, label ? React.createElement(Text, { dimColor: true }, label) : null, React.createElement(Box, null, React.createElement(Text, { color: isFocused ? "cyan" : undefined }, `${bar} ${value}`)));
+};
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function coerceNumber(value, fallback) {
+    const number = typeof value === "number" ? value : Number(value);
+    if (Number.isFinite(number)) {
+        return number;
+    }
+    return fallback;
+}

package/dist/src/components/Spacer.d.ts

@@ -0,0 +1 @@
+export { Spacer as A2uiSpacer } from "ink";

package/dist/src/components/Spacer.js

@@ -0,0 +1 @@
+export { Spacer as A2uiSpacer } from "ink";

package/dist/src/components/Table.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ResolvedNode } from "../types.js";
+export declare const A2uiTable: React.FC<{
+    node: ResolvedNode;
+}>;

package/dist/src/components/Table.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { formatRow, getColumnWidths, normalizeRow, getItemLabel } from "./helpers.js";
+export const A2uiTable = ({ node }) => {
+    var _a, _b;
+    const columns = ((_a = node.props.columns) !== null && _a !== void 0 ? _a : []);
+    const rows = ((_b = node.props.rows) !== null && _b !== void 0 ? _b : []);
+    const columnLabels = columns.map(getItemLabel);
+    const normalizedRows = rows.map((row) => normalizeRow(row, columns.length));
+    const widths = getColumnWidths(columnLabels, normalizedRows);
+    const header = formatRow(columnLabels, widths);
+    const body = normalizedRows.map((row) => formatRow(row, widths));
+    return React.createElement(Box, { flexDirection: "column" }, React.createElement(Text, { bold: true }, header), ...body.map((line, index) => React.createElement(Text, { key: `${node.instanceKey}_row_${index}` }, line)));
+};

package/dist/src/components/Tabs.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ResolvedNode } from "../types.js";
+import type { CatalogRenderOptions } from "./types.js";
+export declare const A2uiTabs: React.FC<{
+    node: ResolvedNode;
+    options: CatalogRenderOptions;
+}>;

package/dist/src/components/Tabs.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text } from "ink";
+import { useFocusRegistry } from "../focus.js";
+import { getItemLabel } from "./helpers.js";
+export const A2uiTabs = ({ node, options }) => {
+    var _a, _b;
+    const focus = useFocusRegistry();
+    const { register, unregister } = focus;
+    const tabs = ((_a = node.props.tabs) !== null && _a !== void 0 ? _a : []);
+    const action = node.props.onChange;
+    const selectedProp = ((_b = node.props.selectedIndex) !== null && _b !== void 0 ? _b : 0);
+    const [selectedIndex, setSelectedIndex] = useState(selectedProp);
+    const selectedRef = useRef(selectedIndex);
+    const nodeRef = useRef(node);
+    const dispatchRef = useRef(options.dispatchAction);
+    const handlerRef = useRef(() => undefined);
+    useEffect(() => {
+        if (selectedRef.current !== selectedProp) {
+            setSelectedIndex(selectedProp);
+        }
+    }, [selectedProp]);
+    useEffect(() => {
+        selectedRef.current = selectedIndex;
+    }, [selectedIndex]);
+    useEffect(() => {
+        nodeRef.current = node;
+    }, [node]);
+    useEffect(() => {
+        dispatchRef.current = options.dispatchAction;
+    }, [options.dispatchAction]);
+    useEffect(() => {
+        handlerRef.current = (input, key) => {
+            if (key.leftArrow) {
+                setSelectedIndex((current) => (current <= 0 ? tabs.length - 1 : current - 1));
+                return;
+            }
+            if (key.rightArrow) {
+                setSelectedIndex((current) => (current + 1) % tabs.length);
+                return;
+            }
+            if ((key.return || input === " ") && action) {
+                const value = tabs[selectedRef.current];
+                dispatchRef.current(action, nodeRef.current, value);
+            }
+        };
+    }, [action, tabs]);
+    useEffect(() => {
+        const handler = (input, key) => handlerRef.current(input, key);
+        register(node.instanceKey, handler);
+        return () => unregister(node.instanceKey);
+    }, [register, unregister, node.instanceKey]);
+    const isFocused = focus.isFocused(node.instanceKey);
+    const labels = useMemo(() => tabs.map(getItemLabel), [tabs]);
+    const activeChild = node.children[selectedIndex];
+    return React.createElement(Box, { flexDirection: "column" }, React.createElement(Box, { flexDirection: "row" }, labels.map((label, index) => React.createElement(Text, { key: `${node.instanceKey}_tab_${index}`, inverse: isFocused && index === selectedIndex }, ` ${label} `))), activeChild ? options.renderNode(activeChild) : null);
+};

package/dist/src/components/Text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ResolvedNode } from "../types.js";
+export declare const A2uiText: React.FC<{
+    node: ResolvedNode;
+}>;

package/dist/src/components/Text.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Text } from "ink";
+export const A2uiText = ({ node }) => {
+    var _a, _b, _c;
+    const props = node.props;
+    const text = ((_b = (_a = props.text) !== null && _a !== void 0 ? _a : props.value) !== null && _b !== void 0 ? _b : "");
+    return React.createElement(Text, {
+        color: props.color,
+        backgroundColor: props.backgroundColor,
+        bold: (_c = props.bold) !== null && _c !== void 0 ? _c : true,
+        dimColor: props.dim,
+        italic: props.italic,
+        underline: props.underline
+    }, text);
+};

package/dist/src/components/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare function getItemLabel(item: unknown): string;
+export declare function normalizeRow(row: unknown, expectedLength: number): string[];
+export declare function getColumnWidths(headers: string[], rows: string[][]): number[];
+export declare function formatRow(cells: string[], widths: number[]): string;

package/dist/src/components/helpers.js

@@ -0,0 +1,39 @@
+export function getItemLabel(item) {
+    var _a, _b;
+    if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
+        return String(item);
+    }
+    if (item && typeof item === "object") {
+        const record = item;
+        const label = (_b = (_a = record.label) !== null && _a !== void 0 ? _a : record.text) !== null && _b !== void 0 ? _b : record.name;
+        if (label) {
+            return String(label);
+        }
+    }
+    return JSON.stringify(item);
+}
+export function normalizeRow(row, expectedLength) {
+    if (Array.isArray(row)) {
+        return row.map(getItemLabel).slice(0, expectedLength);
+    }
+    if (row && typeof row === "object") {
+        const record = row;
+        return Object.values(record).map(getItemLabel).slice(0, expectedLength);
+    }
+    return [getItemLabel(row)];
+}
+export function getColumnWidths(headers, rows) {
+    const widths = headers.map((header) => header.length);
+    rows.forEach((row) => {
+        row.forEach((cell, index) => {
+            var _a;
+            widths[index] = Math.max((_a = widths[index]) !== null && _a !== void 0 ? _a : 0, cell.length);
+        });
+    });
+    return widths;
+}
+export function formatRow(cells, widths) {
+    return cells
+        .map((cell, index) => { var _a; return cell.padEnd((_a = widths[index]) !== null && _a !== void 0 ? _a : cell.length, " "); })
+        .join("  ");
+}

package/dist/src/components/index.d.ts

@@ -0,0 +1,16 @@
+export type { CatalogRenderOptions } from "./types.js";
+export { renderNode } from "./renderNode.js";
+export { A2uiText } from "./Text.js";
+export { A2uiBox } from "./Box.js";
+export { A2uiButton } from "./Button.js";
+export { A2uiInput } from "./Input.js";
+export { A2uiSelect } from "./Select.js";
+export { A2uiCheckbox } from "./Checkbox.js";
+export { A2uiRadioGroup } from "./RadioGroup.js";
+export { A2uiList } from "./List.js";
+export { A2uiTabs } from "./Tabs.js";
+export { A2uiTable } from "./Table.js";
+export { A2uiSlider } from "./Slider.js";
+export { A2uiModal } from "./Modal.js";
+export { A2uiImage } from "./Image.js";
+export { A2uiDivider } from "./Divider.js";

package/dist/src/components/index.js

@@ -0,0 +1,15 @@
+export { renderNode } from "./renderNode.js";
+export { A2uiText } from "./Text.js";
+export { A2uiBox } from "./Box.js";
+export { A2uiButton } from "./Button.js";
+export { A2uiInput } from "./Input.js";
+export { A2uiSelect } from "./Select.js";
+export { A2uiCheckbox } from "./Checkbox.js";
+export { A2uiRadioGroup } from "./RadioGroup.js";
+export { A2uiList } from "./List.js";
+export { A2uiTabs } from "./Tabs.js";
+export { A2uiTable } from "./Table.js";
+export { A2uiSlider } from "./Slider.js";
+export { A2uiModal } from "./Modal.js";
+export { A2uiImage } from "./Image.js";
+export { A2uiDivider } from "./Divider.js";

package/dist/src/components/renderNode.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ResolvedNode } from "../types.js";
+import type { CatalogRenderOptions } from "./types.js";
+export declare function renderNode(node: ResolvedNode, options: Omit<CatalogRenderOptions, "renderNode">): React.ReactElement;

package/dist/src/components/renderNode.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { Text } from "ink";
+import { A2uiText } from "./Text.js";
+import { A2uiBox } from "./Box.js";
+import { A2uiButton } from "./Button.js";
+import { A2uiInput } from "./Input.js";
+import { A2uiSelect } from "./Select.js";
+import { A2uiCheckbox } from "./Checkbox.js";
+import { A2uiRadioGroup } from "./RadioGroup.js";
+import { A2uiList } from "./List.js";
+import { A2uiTabs } from "./Tabs.js";
+import { A2uiTable } from "./Table.js";
+import { A2uiSlider } from "./Slider.js";
+import { A2uiModal } from "./Modal.js";
+import { A2uiImage } from "./Image.js";
+import { A2uiDivider } from "./Divider.js";
+import { Spacer } from "ink";
+export function renderNode(node, options) {
+    const optionsWithRender = {
+        ...options,
+        renderNode: (child) => renderNode(child, options)
+    };
+    switch (node.type) {
+        case "Text":
+            return React.createElement(A2uiText, { key: node.instanceKey, node });
+        case "Box":
+            return React.createElement(A2uiBox, { key: node.instanceKey, node }, node.children.map((child) => renderNode(child, options)));
+        case "Spacer":
+            return React.createElement(Spacer, { key: node.instanceKey });
+        case "Input":
+            return React.createElement(A2uiInput, { key: node.instanceKey, node, options: optionsWithRender });
+        case "TextField":
+            return React.createElement(A2uiInput, { key: node.instanceKey, node, options: optionsWithRender });
+        case "Button":
+            return React.createElement(A2uiButton, { key: node.instanceKey, node, options: optionsWithRender });
+        case "Select":
+            return React.createElement(A2uiSelect, { key: node.instanceKey, node, options: optionsWithRender });
+        case "MultipleChoice":
+            return React.createElement(A2uiSelect, { key: node.instanceKey, node, options: optionsWithRender });
+        case "Checkbox":
+            return React.createElement(A2uiCheckbox, { key: node.instanceKey, node, options: optionsWithRender });
+        case "RadioGroup":
+            return React.createElement(A2uiRadioGroup, { key: node.instanceKey, node, options: optionsWithRender });
+        case "List":
+            return React.createElement(A2uiList, { key: node.instanceKey, node });
+        case "Tabs":
+            return React.createElement(A2uiTabs, { key: node.instanceKey, node, options: optionsWithRender });
+        case "Table":
+            return React.createElement(A2uiTable, { key: node.instanceKey, node });
+        case "Divider":
+            return React.createElement(A2uiDivider, { key: node.instanceKey, node });
+        case "Slider":
+            return React.createElement(A2uiSlider, { key: node.instanceKey, node, options: optionsWithRender });
+        case "Modal":
+            return React.createElement(A2uiModal, { key: node.instanceKey, node }, node.children.map((child) => renderNode(child, options)));
+        case "Image":
+            return React.createElement(A2uiImage, { key: node.instanceKey, node });
+        default:
+            return React.createElement(Text, { key: node.instanceKey, dimColor: true }, `Unsupported: ${node.type}`);
+    }
+}

package/dist/src/components/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import type { ActionDef, ResolvedNode } from "../types.js";
+export interface CatalogRenderOptions {
+    dispatchAction: (action: ActionDef, node: ResolvedNode, value?: unknown) => void;
+    updateLocalDataModel?: (path: string, value: unknown, node: ResolvedNode) => void;
+    renderNode: (node: ResolvedNode) => ReactElement;
+}

package/dist/src/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components.d.ts

@@ -0,0 +1 @@
+export * from "./components/index.js";

package/dist/src/components.js

@@ -0,0 +1 @@
+export * from "./components/index.js";

package/dist/src/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/src/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/src/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/src/index.js

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

package/dist/src/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;