npm - @taui-standard/ink-adapter - Versions diffs - 1.0.6 → 1.0.7 - Mend

@taui-standard/ink-adapter 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +13 -2
package/dist/renderer.d.ts +1 -0
package/dist/renderer.js +40 -6
package/examples/basic-htop/Screenshot_Example_Dashboard.png +0 -0
package/examples/basic-htop/Screenshot_Example_Htop.png +0 -0
package/examples/basic-htop/index.ts +74 -51
package/examples/interactive-dashboard/index.ts +111 -47
package/examples/interactive-dashboard/package-lock.json +46 -0
package/examples/interactive-dashboard/package.json +4 -0
package/package.json +1 -1
package/src/renderer.tsx +62 -11
package/examples/basic-htop/Screenshot.png +0 -0

package/README.md CHANGED Viewed

@@ -2,9 +2,20 @@
 The official [Ink](https://github.com/vadimdemedes/ink) adapter for **Terminal Agent UI (TAUI)**.
-**Author: Tariq Shams**
+### Ecosystem
+Built on the **[TAUI-0001 Specification](https://github.com/TAUI-Standards/taui-standards)** and powered by:
+- **[@taui-standard/core](https://github.com/TAUI-Standards/taui-core)**: Core runtime and state management.
+- **[@taui-standard/validator](https://github.com/TAUI-Standards/taui-validator)**: Schema and primitive validation.
-![TAUI HTOP Dashboard](examples/basic-htop/Screenshot.png)
+*All packages and the TAUI specification created by **Tariq Shams***.
+## Demos
+### High-Fidelity HTOP
+![TAUI HTOP Dashboard](examples/basic-htop/Screenshot_Example_Htop.png)
+### Interactive Dashboard
+![TAUI Interactive Dashboard](examples/basic-htop/Screenshot_Example_Dashboard.png)
 ## Features
 - **Spec-Compliant**: Renders all primitives from TAUI-0001.

package/dist/renderer.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export declare const TAUIText: React.FC<RendererProps>;
 export declare const TAUIBox: React.FC<RendererProps>;
 export declare const TAUIButton: React.FC<RendererProps>;
 export declare const TAUIInput: React.FC<RendererProps>;
+export declare const TAUISelect: React.FC<RendererProps>;
 export declare const TAUIProgress: React.FC<RendererProps>;
 export declare const TAUIKeyBinding: React.FC<RendererProps>;
 export declare const TAUITable: React.FC<RendererProps>;

package/dist/renderer.js CHANGED Viewed

@@ -21,7 +21,7 @@ export const TAUIBox = ({ node, runtime }) => {
     if (borderStyle && !validStyles.includes(borderStyle)) {
         borderStyle = 'single';
     }
-    return (_jsxs(Box, { flexDirection: flexDirection, padding: typeof node.padding === 'number' ? node.padding : undefined, gap: node.gap, borderStyle: borderStyle, children: [node.type === 'Panel' && node.title && (_jsx(Box, { position: "absolute", marginTop: -1, marginLeft: 1, paddingX: 1, children: _jsx(Text, { bold: true, children: node.title }) })), node.children?.map((child, idx) => (_jsx(TAUIRenderer, { node: child, runtime: runtime }, child.id || `${node.type}-${idx}`)))] }));
+    return (_jsxs(Box, { flexDirection: flexDirection, padding: typeof node.padding === 'number' ? node.padding : undefined, gap: node.gap, borderStyle: borderStyle, children: [node.type === 'Panel' && node.title && (_jsx(Box, { position: "absolute", marginTop: -1, marginLeft: 1, paddingX: 1, children: _jsx(Text, { bold: true, color: node.style?.color, children: node.title }) })), node.children?.map((child, idx) => (_jsx(TAUIRenderer, { node: child, runtime: runtime }, child.id || `${node.type}-${idx}`)))] }));
 };
 export const TAUIButton = ({ node, runtime }) => {
     const { isFocused } = useFocus({ id: node.id });
@@ -34,7 +34,7 @@ export const TAUIButton = ({ node, runtime }) => {
             });
         }
     });
-    return (_jsx(Box, { borderStyle: "round", borderColor: isFocused ? 'cyan' : 'gray', paddingX: 1, children: _jsx(Text, { color: isFocused ? 'cyan' : undefined, children: node.label }) }));
+    return (_jsx(Box, { borderStyle: "round", borderColor: isFocused ? (node.style?.color || 'white') : (node.style?.color || 'gray'), paddingX: 1, children: _jsx(Text, { color: node.style?.color, bold: isFocused, children: node.label }) }));
 };
 export const TAUIInput = ({ node, runtime }) => {
     const { isFocused } = useFocus({ id: node.id });
@@ -46,14 +46,46 @@ export const TAUIInput = ({ node, runtime }) => {
             timestamp: new Date().toISOString()
         });
     };
-    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [node.placeholder && _jsxs(Text, { dimColor: true, children: [node.placeholder, ": "] }), _jsx(Box, { borderStyle: "single", borderColor: isFocused ? 'yellow' : 'gray', paddingX: 1, minWidth: 10, children: isFocused ? (_jsx(TextInput, { value: node.value || '', onChange: onChange, mask: node.mask ? '*' : undefined })) : (_jsx(Text, { children: node.mask ? '*'.repeat((node.value || '').length) : (node.value || ' ') })) })] }));
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [node.placeholder && _jsxs(Text, { dimColor: true, children: [node.placeholder, ": "] }), _jsx(Box, { borderStyle: "single", borderColor: isFocused ? (node.style?.color || 'white') : (node.style?.color || 'gray'), paddingX: 1, minWidth: 10, children: isFocused ? (_jsx(TextInput, { value: node.value || '', onChange: onChange, mask: node.mask ? '*' : undefined })) : (_jsx(Text, { color: node.style?.color, children: node.mask ? '*'.repeat((node.value || '').length) : (node.value || ' ') })) })] }));
+};
+export const TAUISelect = ({ node, runtime }) => {
+    const { isFocused } = useFocus({ id: node.id });
+    const options = node.options || [];
+    const currentValue = node.value;
+    const currentIndex = options.findIndex((opt) => opt.value === currentValue);
+    useInput((input, key) => {
+        if (isFocused) {
+            if (key.upArrow || key.leftArrow) {
+                const nextIndex = (currentIndex - 1 + options.length) % options.length;
+                runtime.dispatchRawEvent({
+                    type: 'change',
+                    targetId: node.id,
+                    payload: { value: options[nextIndex].value },
+                    timestamp: new Date().toISOString()
+                });
+            }
+            else if (key.downArrow || key.rightArrow) {
+                const nextIndex = (currentIndex + 1) % options.length;
+                runtime.dispatchRawEvent({
+                    type: 'change',
+                    targetId: node.id,
+                    payload: { value: options[nextIndex].value },
+                    timestamp: new Date().toISOString()
+                });
+            }
+        }
+    });
+    return (_jsx(Box, { flexDirection: "row", gap: 1, children: options.map((opt, i) => {
+            const isSelected = opt.value === currentValue;
+            return (_jsx(Box, { borderStyle: "single", borderColor: isFocused && isSelected ? (node.style?.color || 'white') : 'gray', paddingX: 1, children: _jsxs(Text, { color: node.style?.color, bold: isSelected, children: [isSelected ? '> ' : '', opt.label] }) }, i));
+        }) }));
 };
 export const TAUIProgress = ({ node }) => {
     const width = 20;
     const val = node.value || 0;
     const completed = Math.round(val * width);
     const bar = '\u2588'.repeat(completed) + '\u2591'.repeat(width - completed);
-    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [node.label && _jsx(Text, { children: node.label }), _jsx(Text, { color: "cyan", children: bar }), _jsxs(Text, { children: [Math.round(val * 100), "%"] })] }));
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [node.label && _jsx(Text, { color: node.style?.color, children: node.label }), _jsx(Text, { color: node.style?.color, children: bar }), _jsxs(Text, { color: node.style?.color, children: [Math.round(val * 100), "%"] })] }));
 };
 export const TAUIKeyBinding = ({ node, runtime }) => {
     if (node.type !== 'KeyBinding')
@@ -87,13 +119,13 @@ export const TAUITable = ({ node }) => {
         return null;
     const headers = node.headers || [];
     const rows = node.rows || [];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", paddingX: 1, children: [_jsx(Box, { flexDirection: "row", borderStyle: "single", borderBottom: true, children: headers.map((h, i) => (_jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(Text, { bold: true, color: "cyan", children: h }) }, i))) }), rows.map((row, i) => (_jsx(Box, { flexDirection: "row", children: row.map((cell, j) => (_jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(Text, { children: cell }) }, j))) }, i)))] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", paddingX: 1, children: [_jsx(Box, { flexDirection: "row", borderStyle: "single", borderBottom: true, children: headers.map((h, i) => (_jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(Text, { bold: true, color: node.style?.color, children: h }) }, i))) }), rows.map((row, i) => (_jsx(Box, { flexDirection: "row", children: row.map((cell, j) => (_jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(Text, { color: node.style?.color, children: cell }) }, j))) }, i)))] }));
 };
 export const TAUILog = ({ node }) => {
     if (node.type !== 'Log')
         return null;
     const lines = node.lines || [];
-    return (_jsx(Box, { flexDirection: "column", borderStyle: "single", paddingX: 1, children: lines.slice(-(node.maxLines || 100)).map((line, i) => (_jsx(Text, { children: line }, i))) }));
+    return (_jsx(Box, { flexDirection: "column", borderStyle: "single", paddingX: 1, children: lines.slice(-(node.maxLines || 100)).map((line, i) => (_jsx(Text, { color: node.style?.color, children: line }, i))) }));
 };
 export const TAUIRenderer = (props) => {
     const { node } = props;
@@ -110,6 +142,8 @@ export const TAUIRenderer = (props) => {
             return _jsx(TAUIButton, { ...props });
         case 'Input':
             return _jsx(TAUIInput, { ...props });
+        case 'Select':
+            return _jsx(TAUISelect, { ...props });
         case 'Progress':
             return _jsx(TAUIProgress, { ...props });
         case 'Table':

package/examples/basic-htop/Screenshot_Example_Dashboard.png ADDED Viewed

Binary file

package/examples/basic-htop/Screenshot_Example_Htop.png ADDED Viewed

Binary file

package/examples/basic-htop/index.ts CHANGED Viewed

@@ -11,7 +11,7 @@ function getHtopData() {
   const loadAvg = os.loadavg();
   const cpus = os.cpus();
-  // Mock process list since node:os doesn't provide it easily without spawning child processes
+  // Mock process list
   const mockProcesses = [
     ["1234", "root", loadAvg[0].toFixed(1), "1.2", "systemd"],
     ["5678", "user", (loadAvg[1] / 2).toFixed(1), "0.5", "bash"],
@@ -23,70 +23,98 @@ function getHtopData() {
   const doc: any = {
     version: "1.0",
     metadata: {
-      title: "TAUI Real-time Dashboard",
+      title: "TAUI Official Dashboard",
       author: "Tariq Shams"
     },
     screen: {
-      type: "Grid",
+      type: "Column",
       style: { backgroundColor: "black", color: "#FF8C00" },
-      rows: ["12", "1fr", "3"],
-      columns: ["1fr", "1fr"],
+      padding: 1,
+      gap: 1,
       children: [
         {
-          id: "cpu_panel",
+          id: "header_panel",
           type: "Panel",
-          title: "CPU Load",
-          borderStyle: "rounded",
+          title: "TAUI Ecosystem Info",
+          borderStyle: "single",
           style: { color: "#FF8C00" },
           children: [
             {
-              type: "Progress",
-              value: Math.min(loadAvg[0] / cpus.length, 1),
-              label: `Load 1m: ${(loadAvg[0]).toFixed(2)}`,
-              style: { color: "#FF8C00" }
-            },
-            {
-              type: "Text",
-              content: `Arch: ${os.arch()} | CPUs: ${cpus.length}`,
-              style: { color: "#FF8C00" }
+              type: "Box",
+              flexDirection: "column",
+              gap: 0,
+              children: [
+                { type: "Text", content: 'Official "@taui-standard/ink-adapter" fully compliant with TAUI 0001', style: { bold: true, color: "#FF8C00" } },
+                { type: "Text", content: "@taui-standard/core: Unified state and event runtime.", style: { color: "#FF8C00" } },
+                { type: "Text", content: "@taui-standard/validator: Strict schema and data validation.", style: { color: "#FF8C00" } },
+                { type: "Text", content: "All packages and the TAUI specification created by Tariq Shams", style: { italic: true, color: "#FF8C00" } }
+              ]
             }
           ]
         },
         {
-          id: "mem_panel",
-          type: "Panel",
-          title: "Memory",
-          borderStyle: "rounded",
-          style: { color: "#FF8C00" },
+          type: "Grid",
+          rows: ["12", "1fr", "3"],
+          columns: ["1fr", "1fr"],
+          gap: 1,
           children: [
             {
-              type: "Progress",
-              value: usedMem / totalMem,
-              label: `MEM ${(usedMem / 1024 / 1024 / 1024).toFixed(1)}G / ${(totalMem / 1024 / 1024 / 1024).toFixed(1)}G`,
-              style: { color: "#FF8C00" }
+              id: "cpu_panel",
+              type: "Panel",
+              title: "CPU Load",
+              borderStyle: "rounded",
+              style: { color: "#FF8C00" },
+              children: [
+                {
+                  type: "Progress",
+                  value: Math.min(loadAvg[0] / cpus.length, 1),
+                  label: `Load 1m: ${(loadAvg[0]).toFixed(2)}`,
+                  style: { color: "#FF8C00" }
+                },
+                {
+                  type: "Text",
+                  content: `Arch: ${os.arch()} | CPUs: ${cpus.length}`,
+                  style: { color: "#FF8C00" }
+                }
+              ]
+            },
+            {
+              id: "mem_panel",
+              type: "Panel",
+              title: "Memory",
+              borderStyle: "rounded",
+              style: { color: "#FF8C00" },
+              children: [
+                {
+                  type: "Progress",
+                  value: usedMem / totalMem,
+                  label: `MEM ${(usedMem / 1024 / 1024 / 1024).toFixed(1)}G / ${(totalMem / 1024 / 1024 / 1024).toFixed(1)}G`,
+                  style: { color: "#FF8C00" }
+                },
+                {
+                  type: "Text",
+                  content: `Free: ${(freeMem / 1024 / 1024 / 1024).toFixed(1)}G`,
+                  style: { color: "#FF8C00" }
+                }
+              ]
             },
             {
-              type: "Text",
-              content: `Free: ${(freeMem / 1024 / 1024 / 1024).toFixed(1)}G`,
+              id: "process_table",
+              type: "Table",
+              headers: ["PID", "USER", "CPU%", "MEM%", "COMMAND"],
+              rows: mockProcesses,
               style: { color: "#FF8C00" }
+            },
+            {
+              id: "footer",
+              type: "Row",
+              children: [
+                { type: "Text", content: " [Q: Quit] [Tab: Navigate] [Enter: Action] ", style: { color: "#FF8C00", bold: true } },
+                { id: "refresh_btn", type: "Button", label: "Refresh Now", style: { color: "#FF8C00" } },
+                { id: "quit_kb", type: "KeyBinding", key: "q", shift: true, action: "quit" }
+              ]
             }
           ]
-        },
-        {
-          id: "process_table",
-          type: "Table",
-          headers: ["PID", "USER", "CPU%", "MEM%", "COMMAND"],
-          rows: mockProcesses,
-          style: { color: "#FF8C00" }
-        },
-        {
-          id: "footer",
-          type: "Row",
-          children: [
-            { type: "Text", content: " [q: Quit] [Tab: Navigate] [Enter: Action] ", style: { color: "#FF8C00", bold: true } },
-            { id: "refresh_btn", type: "Button", label: "Refresh Now" },
-            { id: "quit_kb", type: "KeyBinding", key: "q", action: "quit" }
-          ]
         }
       ]
     }
@@ -94,21 +122,16 @@ function getHtopData() {
   return doc;
 }
-// Initial set
 runtime.setDocument(getHtopData());
-// Update loop (every 2 seconds)
 const interval = setInterval(() => {
   try {
     runtime.setDocument(getHtopData());
-  } catch (e) {
-    // Suppress errors during shutdown
-  }
+  } catch (e) {}
 }, 2000);
-// Handle interaction
 runtime.onEvent((event) => {
-  if (event.type === 'key' && (event.payload?.key === 'q' || event.targetId === 'quit_kb')) {
+  if (event.type === 'key' && event.payload?.key === 'q' && event.payload?.shift) {
     clearInterval(interval);
     process.exit(0);
   }

package/examples/interactive-dashboard/index.ts CHANGED Viewed

@@ -8,82 +8,146 @@ let userEmail = '';
 let selectedPriority = 'medium';
 let logs: string[] = ['System initialized. Press "q" to exit.'];
-function updateUI() {
-  runtime.setDocument({
+function getDashboardData() {
+  const doc: any = {
     version: "1.0",
-    metadata: { title: "TAUI Advanced Dashboard" },
+    metadata: {
+      title: "TAUI Official Interactive Demo",
+      author: "Tariq Shams"
+    },
     screen: {
-      type: "Panel",
-      title: "TAUI interactive Demo",
+      type: "Column",
+      style: { backgroundColor: "black", color: "#FF8C00" },
       padding: 1,
+      gap: 1,
       children: [
         {
-          type: "KeyBinding",
-          id: "exit-key",
-          key: "q",
-          action: "exit"
-        },
-        {
-          type: "Column",
-          gap: 1,
+          id: "header_panel",
+          type: "Panel",
+          title: "TAUI Ecosystem Info",
+          borderStyle: "single",
+          style: { color: "#FF8C00" },
           children: [
             {
-              type: "Input",
-              id: "email-input",
-              placeholder: "User Email",
-              value: userEmail
-            },
-            {
-              type: "Select",
-              id: "priority-select",
-              value: selectedPriority,
-              options: [
-                { label: "Low Priority", value: "low" },
-                { label: "Medium Priority", value: "medium" },
-                { label: "High Priority", value: "high" }
+              type: "Box",
+              flexDirection: "column",
+              gap: 0,
+              children: [
+                { type: "Text", content: 'Official "@taui-standard/ink-adapter" fully compliant with TAUI 0001', style: { bold: true, color: "#FF8C00" } },
+                { type: "Text", content: "@taui-standard/core: Unified state and event runtime.", style: { color: "#FF8C00" } },
+                { type: "Text", content: "@taui-standard/validator: Strict schema and data validation.", style: { color: "#FF8C00" } },
+                { type: "Text", content: "All packages and the TAUI specification created by Tariq Shams", style: { italic: true, color: "#FF8C00" } }
               ]
-            },
+            }
+          ]
+        },
+        {
+          type: "Panel",
+          title: "Interactive controls",
+          borderStyle: "rounded",
+          style: { color: "#FF8C00" },
+          children: [
             {
-              type: "Row",
-              gap: 2,
+              type: "Column",
+              gap: 1,
               children: [
-                { type: "Button", id: "submit-btn", label: "Deploy Agent" },
-                { type: "Button", id: "clear-btn", label: "Clear Logs" }
+                {
+                  id: "exit-key",
+                  type: "KeyBinding",
+                  key: "q",
+                  shift: true,
+                  action: "exit"
+                },
+                {
+                  id: "email-input",
+                  type: "Input",
+                  placeholder: "Enter Target Email",
+                  value: userEmail,
+                  style: { color: "#FF8C00" }
+                },
+                {
+                  type: "Text",
+                  content: "Select Priority Level:",
+                  style: { color: "#FF8C00" }
+                },
+                {
+                  id: "priority-select",
+                  type: "Select",
+                  value: selectedPriority,
+                  style: { color: "#FF8C00" },
+                  options: [
+                    { label: "Low Priority", value: "low" },
+                    { label: "Medium Priority", value: "medium" },
+                    { label: "High Priority", value: "high" }
+                  ]
+                },
+                {
+                  type: "Row",
+                  gap: 2,
+                  children: [
+                    { id: "submit-btn", type: "Button", label: "Deploy Agent", style: { color: "#FF8C00" } },
+                    { id: "clear-btn", type: "Button", label: "Clear Logs", style: { color: "#FF8C00" } }
+                  ]
+                }
               ]
-            },
+            }
+          ]
+        },
+        {
+          type: "Panel",
+          title: "Activity Stream",
+          borderStyle: "single",
+          style: { color: "#FF8C00" },
+          children: [
             {
-              type: "Panel",
-              title: "Activity Logs",
-              children: logs.slice(-5).map((msg, i) => ({
-                type: "Text",
-                id: `log-${i}`,
-                content: `> ${msg}`,
-                style: { dim: true }
-              }))
+              id: "activity-log",
+              type: "Log",
+              maxLines: 6,
+              lines: logs,
+              style: { color: "#FF8C00" }
             }
           ]
+        },
+        {
+          type: "Text",
+          content: " [Tab/Shift+Tab] Navigate | [Enter] Select/Action | [Q] Quit ",
+          style: { color: "#FF8C00", dim: true }
         }
       ]
     }
-  });
+  };
+  return doc;
 }
 runtime.onEvent((event) => {
+  let changed = false;
   if (event.type === 'change' && event.targetId === 'email-input') {
     userEmail = (event.payload as any).value;
-    logs.push(`Email changed: ${userEmail}`);
+    changed = true;
   } else if (event.type === 'change' && event.targetId === 'priority-select') {
     selectedPriority = (event.payload as any).value;
-    logs.push(`Priority set to: ${selectedPriority}`);
+    logs.push(`Priority set to: ${selectedPriority.toUpperCase()}`);
+    changed = true;
   } else if (event.type === 'action' && event.targetId === 'submit-btn') {
-    logs.push(`DEPLOYING agent to ${userEmail} [Priority: ${selectedPriority}]`);
+    if (!userEmail) {
+      logs.push("Error: Email is required.");
+    } else {
+      logs.push(`DEPLOYING agent to ${userEmail} [PRIORITY: ${selectedPriority.toUpperCase()}]`);
+      logs.push("Deployment status: IN_PROGRESS...");
+    }
+    changed = true;
   } else if (event.type === 'action' && event.targetId === 'clear-btn') {
     logs = ['Logs cleared.'];
-  } else if (event.type === 'key' && event.targetId === 'exit-key') {
+    changed = true;
+  } else if (event.type === 'key' && event.payload?.key === 'q' && event.payload?.shift) {
     process.exit(0);
   }
-  updateUI();
+  if (changed) {
+    runtime.setDocument(getDashboardData());
+  }
 });
-updateUI();
+runtime.setDocument(getDashboardData());
 startTAUI(runtime);

package/examples/interactive-dashboard/package-lock.json CHANGED Viewed

@@ -13,6 +13,10 @@
         "@taui-standard/ink-adapter": "1.0.4",
         "@taui-standard/validator": "1.0.4",
         "tsx": "^4.7.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20.11.0",
+        "@types/react": "^18.2.0"
       }
     },
     "node_modules/@alcalzone/ansi-tokenize": {
@@ -477,6 +481,34 @@
         "zod": "^3.22.4"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.19.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
+      "integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
     "node_modules/ajv": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
@@ -653,6 +685,13 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/emoji-regex": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
@@ -1135,6 +1174,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/widest-line": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-5.0.0.tgz",

package/examples/interactive-dashboard/package.json CHANGED Viewed

@@ -13,5 +13,9 @@
     "@taui-standard/ink-adapter": "1.0.4",
     "@taui-standard/validator": "1.0.4",
     "tsx": "^4.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0"
   }
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@taui-standard/ink-adapter",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "description": "Ink adapter for Terminal Agent UI (TAUI)",
   "repository": {

package/src/renderer.tsx CHANGED Viewed

@@ -50,7 +50,7 @@ export const TAUIBox: React.FC<RendererProps> = ({ node, runtime }) => {
     >
       {node.type === 'Panel' && node.title && (
         <Box position="absolute" marginTop={-1} marginLeft={1} paddingX={1}>
-           <Text bold>{node.title}</Text>
+           <Text bold color={node.style?.color}>{node.title}</Text>
         </Box>
       )}
       {node.children?.map((child: TAUINode, idx: number) => (
@@ -74,8 +74,8 @@ export const TAUIButton: React.FC<RendererProps> = ({ node, runtime }) => {
   });
   return (
-    <Box borderStyle="round" borderColor={isFocused ? 'cyan' : 'gray'} paddingX={1}>
-      <Text color={isFocused ? 'cyan' : undefined}>{node.label}</Text>
+    <Box borderStyle="round" borderColor={isFocused ? (node.style?.color || 'white') : (node.style?.color || 'gray')} paddingX={1}>
+      <Text color={node.style?.color} bold={isFocused}>{node.label}</Text>
     </Box>
   );
 };
@@ -95,17 +95,66 @@ export const TAUIInput: React.FC<RendererProps> = ({ node, runtime }) => {
   return (
     <Box flexDirection="row" gap={1}>
       {node.placeholder && <Text dimColor>{node.placeholder}: </Text>}
-      <Box borderStyle="single" borderColor={isFocused ? 'yellow' : 'gray'} paddingX={1} minWidth={10}>
+      <Box borderStyle="single" borderColor={isFocused ? (node.style?.color || 'white') : (node.style?.color || 'gray')} paddingX={1} minWidth={10}>
         {isFocused ? (
           <TextInput value={node.value || ''} onChange={onChange} mask={node.mask ? '*' : undefined} />
         ) : (
-          <Text>{node.mask ? '*'.repeat((node.value || '').length) : (node.value || ' ')}</Text>
+          <Text color={node.style?.color}>{node.mask ? '*'.repeat((node.value || '').length) : (node.value || ' ')}</Text>
         )}
       </Box>
     </Box>
   );
 };
+export const TAUISelect: React.FC<RendererProps> = ({ node, runtime }) => {
+  const { isFocused } = useFocus({ id: node.id });
+  const options = (node as any).options || [];
+  const currentValue = (node as any).value;
+  const currentIndex = options.findIndex((opt: any) => opt.value === currentValue);
+  useInput((input, key) => {
+    if (isFocused) {
+      if (key.upArrow || key.leftArrow) {
+        const nextIndex = (currentIndex - 1 + options.length) % options.length;
+        runtime.dispatchRawEvent({
+          type: 'change',
+          targetId: node.id,
+          payload: { value: options[nextIndex].value },
+          timestamp: new Date().toISOString()
+        });
+      } else if (key.downArrow || key.rightArrow) {
+        const nextIndex = (currentIndex + 1) % options.length;
+        runtime.dispatchRawEvent({
+          type: 'change',
+          targetId: node.id,
+          payload: { value: options[nextIndex].value },
+          timestamp: new Date().toISOString()
+        });
+      }
+    }
+  });
+  return (
+    <Box flexDirection="row" gap={1}>
+      {options.map((opt: any, i: number) => {
+        const isSelected = opt.value === currentValue;
+        return (
+          <Box
+            key={i}
+            borderStyle="single"
+            borderColor={isFocused && isSelected ? (node.style?.color || 'white') : 'gray'}
+            paddingX={1}
+          >
+            <Text color={node.style?.color} bold={isSelected}>
+              {isSelected ? '> ' : ''}{opt.label}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
 export const TAUIProgress: React.FC<RendererProps> = ({ node }) => {
   const width = 20;
   const val = (node as any).value || 0;
@@ -114,9 +163,9 @@ export const TAUIProgress: React.FC<RendererProps> = ({ node }) => {
   return (
     <Box flexDirection="row" gap={1}>
-      {(node as any).label && <Text>{(node as any).label}</Text>}
-      <Text color="cyan">{bar}</Text>
-      <Text>{Math.round(val * 100)}%</Text>
+      {(node as any).label && <Text color={node.style?.color}>{(node as any).label}</Text>}
+      <Text color={node.style?.color}>{bar}</Text>
+      <Text color={node.style?.color}>{Math.round(val * 100)}%</Text>
     </Box>
   );
 };
@@ -163,7 +212,7 @@ export const TAUITable: React.FC<RendererProps> = ({ node }) => {
       <Box flexDirection="row" borderStyle="single" borderBottom>
         {headers.map((h: string, i: number) => (
           <Box key={i} flexGrow={1} minWidth={10}>
-            <Text bold color="cyan">{h}</Text>
+            <Text bold color={node.style?.color}>{h}</Text>
           </Box>
         ))}
       </Box>
@@ -171,7 +220,7 @@ export const TAUITable: React.FC<RendererProps> = ({ node }) => {
         <Box key={i} flexDirection="row">
           {row.map((cell: string, j: number) => (
             <Box key={j} flexGrow={1} minWidth={10}>
-              <Text>{cell}</Text>
+              <Text color={node.style?.color}>{cell}</Text>
             </Box>
           ))}
         </Box>
@@ -186,7 +235,7 @@ export const TAUILog: React.FC<RendererProps> = ({ node }) => {
   return (
     <Box flexDirection="column" borderStyle="single" paddingX={1}>
       {lines.slice(-(node.maxLines || 100)).map((line: string, i: number) => (
-        <Text key={i}>{line}</Text>
+        <Text key={i} color={node.style?.color}>{line}</Text>
       ))}
     </Box>
   );
@@ -207,6 +256,8 @@ export const TAUIRenderer: React.FC<RendererProps> = (props) => {
       return <TAUIButton {...props} />;
     case 'Input':
       return <TAUIInput {...props} />;
+    case 'Select':
+      return <TAUISelect {...props} />;
     case 'Progress':
       return <TAUIProgress {...props} />;
     case 'Table':

package/examples/basic-htop/Screenshot.png DELETED Viewed

Binary file