a2uink 0.1.0

package/dist/src/tree.js

@@ -0,0 +1,47 @@
+import { resolveBoundValue, resolvePropsWithBindings } from "./binding.js";
+export function buildResolvedTree(components, rootId, dataModel) {
+    const root = components[rootId];
+    if (!root) {
+        return null;
+    }
+    return buildNode(root, components, dataModel, undefined, rootId);
+}
+function buildNode(component, components, dataModel, context, instanceKey) {
+    var _a, _b, _c;
+    const { props, boundProps } = resolvePropsWithBindings((_a = component.props) !== null && _a !== void 0 ? _a : {}, dataModel, context);
+    const children = [];
+    if ((_b = component.children) === null || _b === void 0 ? void 0 : _b.explicitList) {
+        for (const childId of component.children.explicitList) {
+            const child = components[childId];
+            if (!child) {
+                continue;
+            }
+            children.push(buildNode(child, components, dataModel, context, childId));
+        }
+    }
+    if ((_c = component.children) === null || _c === void 0 ? void 0 : _c.template) {
+        const template = component.children.template;
+        const binding = typeof template.dataBinding === "string" ? { path: template.dataBinding } : template.dataBinding;
+        const items = resolveBoundValue(binding, dataModel, context);
+        if (Array.isArray(items)) {
+            items.forEach((item, index) => {
+                const templateComponent = components[template.componentId];
+                if (!templateComponent) {
+                    return;
+                }
+                const childContext = { item, index, parent: context };
+                const key = `${template.componentId}__${index}`;
+                children.push(buildNode(templateComponent, components, dataModel, childContext, key));
+            });
+        }
+    }
+    return {
+        id: component.id,
+        type: component.type,
+        props,
+        boundProps,
+        children,
+        instanceKey,
+        bindingContext: context
+    };
+}

package/dist/src/types.d.ts

@@ -0,0 +1,92 @@
+export type A2uiServerMessage = BeginRenderingMessage | SurfaceUpdateMessage | DataModelUpdateMessage | DeleteSurfaceMessage;
+export interface BeginRenderingMessage {
+    type: "beginRendering";
+    surfaceId: string;
+    catalogId?: string;
+}
+export interface SurfaceUpdateMessage {
+    type: "surfaceUpdate";
+    surfaceId: string;
+    rootComponentId: string;
+    components: Array<ComponentDef | A2uiComponentInstance>;
+}
+export interface DataModelUpdateMessage {
+    type: "dataModelUpdate";
+    surfaceId: string;
+    dataModel?: Record<string, unknown>;
+    path?: string;
+    contents?: DataModelEntry[];
+}
+export interface DeleteSurfaceMessage {
+    type: "deleteSurface";
+    surfaceId: string;
+}
+export interface A2uiUserAction {
+    type: "userAction";
+    surfaceId: string;
+    componentId: string;
+    actionId: string;
+    context?: Record<string, unknown>;
+    value?: unknown;
+}
+export interface RendererOptions {
+    stdout?: NodeJS.WriteStream;
+    stderr?: NodeJS.WriteStream;
+    stdin?: NodeJS.ReadStream;
+    exitOnCtrlC?: boolean;
+    patchConsole?: boolean;
+    onUserAction?: (action: A2uiUserAction) => void;
+}
+export interface ComponentDef {
+    id: string;
+    type: string;
+    props?: Record<string, unknown>;
+    children?: ChildrenDef;
+}
+export interface A2uiComponentInstance {
+    id: string;
+    component: Record<string, unknown>;
+}
+export interface ChildrenDef {
+    explicitList?: string[];
+    template?: {
+        componentId: string;
+        dataBinding: BoundValue | string;
+    };
+}
+export interface DataModelEntry {
+    key: string;
+    valueString?: string;
+    valueNumber?: number;
+    valueBoolean?: boolean;
+    valueNull?: boolean;
+    valueMap?: DataModelEntry[];
+    valueArray?: Array<DataModelEntry | unknown>;
+    value?: unknown;
+}
+export type BoundValue = {
+    path?: string;
+    literalString?: string;
+    literalNumber?: number;
+    literalBoolean?: boolean;
+    literalObject?: Record<string, unknown>;
+    literalArray?: unknown[];
+};
+export interface ActionDef {
+    actionId: string;
+    context?: Record<string, unknown>;
+}
+export interface BindingContext {
+    item?: unknown;
+    index?: number;
+    parent?: BindingContext;
+}
+export interface ResolvedNode {
+    id: string;
+    type: string;
+    props: Record<string, unknown>;
+    boundProps?: Record<string, BoundValue>;
+    children: ResolvedNode[];
+    instanceKey: string;
+    bindingContext?: BindingContext;
+}

package/dist/src/types.js

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

package/dist/tree.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDef, ResolvedNode } from "./types.js";
+export declare function buildResolvedTree(components: Record<string, ComponentDef>, rootId: string, dataModel: Record<string, unknown>): ResolvedNode | null;

package/dist/tree.js

@@ -0,0 +1,45 @@
+import { resolveBoundValue, resolveProps } from "./binding.js";
+export function buildResolvedTree(components, rootId, dataModel) {
+    const root = components[rootId];
+    if (!root) {
+        return null;
+    }
+    return buildNode(root, components, dataModel, undefined, rootId);
+}
+function buildNode(component, components, dataModel, context, instanceKey) {
+    var _a, _b, _c;
+    const props = resolveProps((_a = component.props) !== null && _a !== void 0 ? _a : {}, dataModel, context);
+    const children = [];
+    if ((_b = component.children) === null || _b === void 0 ? void 0 : _b.explicitList) {
+        for (const childId of component.children.explicitList) {
+            const child = components[childId];
+            if (!child) {
+                continue;
+            }
+            children.push(buildNode(child, components, dataModel, context, childId));
+        }
+    }
+    if ((_c = component.children) === null || _c === void 0 ? void 0 : _c.template) {
+        const template = component.children.template;
+        const items = resolveBoundValue(template.dataBinding, dataModel, context);
+        if (Array.isArray(items)) {
+            items.forEach((item, index) => {
+                const templateComponent = components[template.componentId];
+                if (!templateComponent) {
+                    return;
+                }
+                const childContext = { item, index, parent: context };
+                const key = `${template.componentId}__${index}`;
+                children.push(buildNode(templateComponent, components, dataModel, childContext, key));
+            });
+        }
+    }
+    return {
+        id: component.id,
+        type: component.type,
+        props,
+        children,
+        instanceKey,
+        bindingContext: context
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,73 @@
+export type A2uiServerMessage = BeginRenderingMessage | SurfaceUpdateMessage | DataModelUpdateMessage | DeleteSurfaceMessage;
+export interface BeginRenderingMessage {
+    type: "beginRendering";
+    surfaceId: string;
+    catalogId?: string;
+}
+export interface SurfaceUpdateMessage {
+    type: "surfaceUpdate";
+    surfaceId: string;
+    rootComponentId: string;
+    components: ComponentDef[];
+}
+export interface DataModelUpdateMessage {
+    type: "dataModelUpdate";
+    surfaceId: string;
+    dataModel: Record<string, unknown>;
+}
+export interface DeleteSurfaceMessage {
+    type: "deleteSurface";
+    surfaceId: string;
+}
+export interface A2uiUserAction {
+    type: "userAction";
+    surfaceId: string;
+    componentId: string;
+    actionId: string;
+    context?: Record<string, unknown>;
+    value?: unknown;
+}
+export interface RendererOptions {
+    stdout?: NodeJS.WriteStream;
+    stderr?: NodeJS.WriteStream;
+    stdin?: NodeJS.ReadStream;
+    onUserAction?: (action: A2uiUserAction) => void;
+}
+export interface ComponentDef {
+    id: string;
+    type: string;
+    props?: Record<string, unknown>;
+    children?: ChildrenDef;
+}
+export interface ChildrenDef {
+    explicitList?: string[];
+    template?: {
+        componentId: string;
+        dataBinding: BoundValue;
+    };
+}
+export type BoundValue = {
+    path?: string;
+    literalString?: string;
+    literalNumber?: number;
+    literalBoolean?: boolean;
+    literalObject?: Record<string, unknown>;
+    literalArray?: unknown[];
+};
+export interface ActionDef {
+    actionId: string;
+    context?: Record<string, unknown>;
+}
+export interface BindingContext {
+    item?: unknown;
+    index?: number;
+    parent?: BindingContext;
+}
+export interface ResolvedNode {
+    id: string;
+    type: string;
+    props: Record<string, unknown>;
+    children: ResolvedNode[];
+    instanceKey: string;
+    bindingContext?: BindingContext;
+}

package/dist/types.js

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

package/docs/demo/README.md

@@ -0,0 +1,90 @@
+# A2UI Ink Demo Site
+
+A Vite-powered demo page and integration guide for the A2UI Ink library.
+
+## Features
+
+- **Component Catalog**: Browse all available components with examples and prop documentation
+- **Interactive Terminal**: Web-based terminal preview using xterm.js
+- **JSON Playground**: Paste your A2UI JSON and see it rendered in real-time (full or simple mode)
+- **Integration Guide**: Step-by-step instructions for getting started
+
+## Running Locally
+
+This demo is a Vite app with Ink running in a browser-based xterm instance.
+
+```bash
+cd docs/demo
+npm install
+npm run dev
+```
+
+Build for static deployment:
+
+```bash
+npm run build
+npm run preview
+```
+
+Run the TypeScript typecheck:
+
+```bash
+npm run typecheck
+```
+
+## Structure
+
+```
+docs/demo/
+├── index.html        # Main HTML page
+├── vite.config.js    # Vite configuration (Node polyfills)
+├── package.json      # Demo dependencies and scripts
+├── src/
+│   ├── App.tsx        # Demo UI + playground
+│   ├── main.tsx       # React entrypoint
+│   └── styles.css     # Styling
+└── README.md          # This file
+```
+
+## Dependencies
+
+- [ink](https://github.com/vadimdemedes/ink) - React renderer for terminal UIs
+- [xterm.js](https://xtermjs.org/) - Terminal emulation
+- [vite-plugin-node-polyfills](https://github.com/davidmyersdev/vite-plugin-node-polyfills) - Node stream polyfills
+
+## Customization
+
+### Adding New Components
+
+1. Add a new section in `src/App.tsx` following the existing pattern
+2. Update the example JSON in `src/App.tsx`
+3. Update the navigation in the sidebar
+
+### Simple Input Mode
+
+The playground includes a **Simple Mode** toggle that lets users paste:
+
+- A components array (no surface metadata)
+- A separate dataModel object
+
+The demo uses a fixed surface ID (`demo`) and root component ID (`root`) in this mode.
+
+### Theming
+
+Edit the CSS variables in `src/styles.css`:
+
+```css
+:root {
+  --bg-primary: #1a1a2e;
+  --accent-primary: #00d9ff;
+  /* ... */
+}
+```
+
+## Browser Support
+
+Works in all modern browsers that support:
+
+- ES6+ JavaScript
+- CSS Grid & Flexbox
+- WebGL (for xterm.js performance)

package/docs/demo/app.js

@@ -0,0 +1,268 @@
+// A2UI Ink Demo - Interactive Playground
+(function() {
+  'use strict';
+
+  // DOM Elements
+  const navLinks = document.querySelectorAll('.nav-link');
+  const sections = document.querySelectorAll('.section');
+  const jsonEditor = document.getElementById('jsonEditor');
+  const renderBtn = document.getElementById('renderBtn');
+  const loadExampleBtn = document.getElementById('loadExample');
+  const clearTerminalBtn = document.getElementById('clearTerminal');
+  const actionsLog = document.getElementById('actionsLog');
+  const terminalContainer = document.getElementById('terminal');
+
+  // Terminal instance
+  let term = null;
+  let fitAddon = null;
+  let commandBuffer = '';
+  let currentJson = null;
+  const promptText = '\x1b[90ma2ui> \x1b[0m';
+
+  // Initialize
+  function init() {
+    setupNavigation();
+    setupTerminal();
+    setupPlayground();
+    
+    // Handle hash navigation
+    if (window.location.hash) {
+      navigateToSection(window.location.hash.slice(1));
+    }
+  }
+
+  // Navigation
+  function setupNavigation() {
+    navLinks.forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const sectionId = link.dataset.section;
+        navigateToSection(sectionId);
+        window.history.pushState(null, '', `#${sectionId}`);
+      });
+    });
+
+    window.addEventListener('popstate', () => {
+      if (window.location.hash) {
+        navigateToSection(window.location.hash.slice(1));
+      }
+    });
+  }
+
+  function navigateToSection(sectionId) {
+    // Update nav
+    navLinks.forEach(link => {
+      link.classList.toggle('active', link.dataset.section === sectionId);
+    });
+
+    // Update sections
+    sections.forEach(section => {
+      // Legacy script removed. Vite entry is src/main.js
+    if ('literalObject' in value) return value.literalObject;
+    
+    if ('path' in value) {
+      const result = getValueByPath(dataModel, value.path);
+      if (result !== undefined) return result;
+      // Fall back to literal if path doesn't resolve
+      if ('literalString' in value) return value.literalString;
+      if ('literalNumber' in value) return value.literalNumber;
+      if ('literalBoolean' in value) return value.literalBoolean;
+      return undefined;
+    }
+    
+    if ('actionId' in value) return value;
+    
+    return value;
+  }
+
+  function getValueByPath(obj, path) {
+    if (!path) return obj;
+    const parts = path.split('.');
+    let current = obj;
+    for (const part of parts) {
+      if (current === null || current === undefined) return undefined;
+      current = current[part];
+    }
+    return current;
+  }
+
+  function setValueByPath(obj, path, value) {
+    const parts = path.split('.');
+    let current = obj;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] !== 'object' || current[part] === null) {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+
+  function getChildren(component, componentMap) {
+    if (!component.children) return [];
+    if (component.children.explicitList) {
+      return component.children.explicitList
+        .map(id => componentMap[id])
+        .filter(Boolean);
+    }
+    return [];
+  }
+
+  function getBorderChars(style) {
+    const styles = {
+      single: { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' },
+      double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
+      round: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
+      bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' }
+    };
+    return styles[style] || styles.single;
+  }
+
+  function getColorCode(color) {
+    const colors = {
+      black: '\x1b[30m',
+      red: '\x1b[31m',
+      green: '\x1b[32m',
+      yellow: '\x1b[33m',
+      blue: '\x1b[34m',
+      magenta: '\x1b[35m',
+      cyan: '\x1b[36m',
+      white: '\x1b[37m'
+    };
+    return colors[color] || '';
+  }
+
+  function logAction(type, componentId, data = {}) {
+    if (!actionsLog) return;
+    
+    // Remove placeholder if present
+    const placeholder = actionsLog.querySelector('.placeholder');
+    if (placeholder) placeholder.remove();
+    
+    const entry = document.createElement('div');
+    entry.className = 'action-entry';
+    entry.innerHTML = `
+      <span class="action-type">${type}</span> → 
+      <span class="action-component">${componentId}</span>
+      ${Object.keys(data).length ? ` <code>${JSON.stringify(data)}</code>` : ''}
+    `;
+    actionsLog.appendChild(entry);
+    actionsLog.scrollTop = actionsLog.scrollHeight;
+  }
+
+  function loadExample() {
+    const example = {
+      "surfaceId": "demo",
+      "rootComponentId": "root",
+      "components": [
+        {
+          "id": "root",
+          "type": "Box",
+          "props": {
+            "direction": "column",
+            "padding": 1,
+            "borderStyle": "round"
+          },
+          "children": {
+            "explicitList": ["title", "spacer1", "inputSection", "spacer2", "statusSection"]
+          }
+        },
+        {
+          "id": "title",
+          "type": "Text",
+          "props": {
+            "text": { "path": "title" },
+            "bold": true,
+            "color": "cyan"
+          }
+        },
+        { "id": "spacer1", "type": "Spacer" },
+        {
+          "id": "inputSection",
+          "type": "Box",
+          "props": { "direction": "column" },
+          "children": { "explicitList": ["nameLabel", "nameInput", "checkbox"] }
+        },
+        {
+          "id": "nameLabel",
+          "type": "Text",
+          "props": { "text": { "literalString": "Enter your name:" } }
+        },
+        {
+          "id": "nameInput",
+          "type": "Input",
+          "props": {
+            "value": { "path": "form.name" },
+            "placeholder": "Your name here",
+            "onChange": { "actionId": "nameChange" }
+          }
+        },
+        {
+          "id": "checkbox",
+          "type": "Checkbox",
+          "props": {
+            "label": "Subscribe to newsletter",
+            "checked": { "path": "form.subscribe" },
+            "onChange": { "actionId": "toggleSubscribe" }
+          }
+        },
+        { "id": "spacer2", "type": "Spacer" },
+        {
+          "id": "statusSection",
+          "type": "Box",
+          "props": { "direction": "column" },
+          "children": { "explicitList": ["statusLabel", "statusTable", "submitBtn"] }
+        },
+        {
+          "id": "statusLabel",
+          "type": "Text",
+          "props": { "text": { "literalString": "System Status:" } }
+        },
+        {
+          "id": "statusTable",
+          "type": "Table",
+          "props": {
+            "columns": { "path": "status.columns" },
+            "rows": { "path": "status.rows" }
+          }
+        },
+        {
+          "id": "submitBtn",
+          "type": "Button",
+          "props": {
+            "label": { "literalString": "Submit" },
+            "onPress": { "actionId": "submit" }
+          }
+        }
+      ],
+      "dataModel": {
+        "title": "A2UI Demo Form",
+        "form": {
+          "name": "John Doe",
+          "subscribe": true
+        },
+        "status": {
+          "columns": [
+            { "key": "service", "header": "Service" },
+            { "key": "status", "header": "Status" }
+          ],
+          "rows": [
+            { "service": "API", "status": "Online" },
+            { "service": "Database", "status": "Online" },
+            { "service": "Cache", "status": "Warning" }
+          ]
+        }
+      }
+    };
+
+    jsonEditor.value = JSON.stringify(example, null, 2);
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/docs/demo/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>A2UI Ink - Interactive Demo & Component Guide</title>
+  <link rel="stylesheet" href="/src/styles.css">
+  <script type="module" src="/src/main.tsx"></script>
+</head>
+<body>
+  <div id="root"></div>
+
+</body>
+</html>