@dex-ai/vue-tui 0.1.10

package/src/nodes.ts

@@ -0,0 +1,153 @@
+import type { TerminalStyle } from "./style";
+
+/**
+ * Base node — satisfies Vue's RendererNode by allowing any string/symbol key.
+ * The index signature is required for Vue's internal bookkeeping.
+ */
+export interface TNode {
+  type: "element" | "text" | "comment";
+  parent: TElement | null;
+  nextSibling: TNode | null;
+  [key: string | symbol]: unknown;
+}
+
+export interface TElement extends TNode {
+  type: "element";
+  tag: string;
+  props: Record<string, unknown>;
+  children: TNode[];
+}
+
+export interface TText extends TNode {
+  type: "text";
+  text: string;
+}
+
+export interface TComment extends TNode {
+  type: "comment";
+  text: string;
+}
+
+// ---------------------------------------------------------------------------
+// Factory functions
+// ---------------------------------------------------------------------------
+
+export function createElement(tag: string, props?: Record<string, unknown>): TElement {
+  return {
+    type: "element",
+    tag,
+    props: props ?? {},
+    children: [],
+    parent: null,
+    nextSibling: null,
+  };
+}
+
+export function createTextNode(text: string): TText {
+  return {
+    type: "text",
+    text,
+    parent: null,
+    nextSibling: null,
+  };
+}
+
+export function createComment(text: string): TComment {
+  return {
+    type: "comment",
+    text,
+    parent: null,
+    nextSibling: null,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tree mutations — maintain nextSibling links automatically
+// ---------------------------------------------------------------------------
+
+/** Recalculate the nextSibling links for all children of `parent`. */
+function relinkSiblings(parent: TElement): void {
+  const { children } = parent;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const next = children[i + 1];
+    if (child !== undefined) {
+      child.nextSibling = next ?? null;
+    }
+  }
+}
+
+/**
+ * Insert `child` before `anchor` inside `parent`.
+ * If `anchor` is null, appends to the end.
+ */
+export function insertChild(parent: TElement, child: TNode, anchor: TNode | null): void {
+  // Remove from previous parent if any
+  if (child.parent !== null) {
+    removeChild(child.parent, child);
+  }
+
+  child.parent = parent;
+
+  if (anchor === null) {
+    parent.children.push(child);
+  } else {
+    const idx = parent.children.indexOf(anchor);
+    if (idx === -1) {
+      // Anchor not found — append
+      parent.children.push(child);
+    } else {
+      parent.children.splice(idx, 0, child);
+    }
+  }
+
+  relinkSiblings(parent);
+}
+
+/** Remove `child` from `parent`, repairing sibling links. */
+export function removeChild(parent: TElement, child: TNode): void {
+  const idx = parent.children.indexOf(child);
+  if (idx !== -1) {
+    parent.children.splice(idx, 1);
+    child.parent = null;
+    child.nextSibling = null;
+    relinkSiblings(parent);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Style extraction helper (used by renderer + render)
+// ---------------------------------------------------------------------------
+
+/** Extract the `style` prop from a TElement as a TerminalStyle, merging shorthand props. */
+export function getStyle(el: TElement): TerminalStyle {
+  const s = el.props["style"];
+  let style: TerminalStyle = {};
+
+  if (s !== null && typeof s === "object" && !Array.isArray(s)) {
+    style = { ...(s as TerminalStyle) };
+  }
+
+  // Merge shorthand attribute props into style
+  if (el.props["bold"] === "" || el.props["bold"] === true) {
+    style.fontWeight = "bold";
+  }
+  if (el.props["dim"] === "" || el.props["dim"] === true) {
+    style.opacity = 0.5;
+  }
+  if (el.props["italic"] === "" || el.props["italic"] === true) {
+    style.fontStyle = "italic";
+  }
+  if (el.props["underline"] === "" || el.props["underline"] === true) {
+    style.textDecoration = "underline";
+  }
+  if (typeof el.props["color"] === "string" && el.props["color"] !== "") {
+    style.color = el.props["color"] as string;
+  }
+  if (typeof el.props["bg"] === "string" && el.props["bg"] !== "") {
+    const bg = el.props["bg"] as string;
+    style.backgroundColor = bg.startsWith("bg-") ? bg : `bg-${bg}`;
+  }
+
+  return style;
+}

package/src/panel.ts

@@ -0,0 +1,51 @@
+/**
+ * Panel types — UI extensibility contracts for terminal panels.
+ *
+ * These types allow extensions to contribute panel content without
+ * depending on the CLI host package.
+ */
+
+import type { WidgetNode } from "./widget";
+
+/**
+ * Context passed to panel render() methods.
+ */
+export interface PanelContext {
+	/** Terminal width (columns). Useful for sizing progress bars, tables. */
+	readonly width: number;
+	/** Terminal height (rows). Useful for limiting content. */
+	readonly height: number;
+	/** Shared agent state map. Read-only access to state from other extensions. */
+	readonly state: ReadonlyMap<string, unknown>;
+}
+
+/**
+ * A DynamicPanel contributes content to the activity zone.
+ *
+ * Unlike interactive panels (modal, capture keys), a DynamicPanel is:
+ * - Persistent (shown alongside normal flow)
+ * - Non-interactive (doesn't capture input)
+ * - Priority-based (highest priority visible panel wins)
+ */
+export interface DynamicPanel {
+	/** Stable identifier. */
+	readonly id: string;
+
+	/** Human-readable label. */
+	readonly label?: string;
+
+	/** Priority: higher number wins over lower. Default 0. */
+	readonly priority?: number;
+
+	/**
+	 * Should this panel be visible right now?
+	 * Called on each render tick.
+	 */
+	visible(ctx: PanelContext): boolean;
+
+	/**
+	 * Render panel content as a WidgetNode tree.
+	 * Called only when visible() returns true.
+	 */
+	render(ctx: PanelContext): WidgetNode | null;
+}

package/src/plugin.ts

@@ -0,0 +1,148 @@
+/**
+ * Bun plugin for compiling Vue Single File Components (.vue) for @dex-ai/vue-tui.
+ *
+ * Usage:
+ * ```ts
+ * import { tuiVuePlugin } from "@dex-ai/vue-tui/plugin";
+ * Bun.plugin(tuiVuePlugin);
+ * ```
+ */
+
+import type { BunPlugin } from "bun";
+import { parse, compileScript, compileTemplate } from "@vue/compiler-sfc";
+
+export const tuiVuePlugin: BunPlugin = {
+  name: "@dex-ai/vue-tui",
+  setup(build) {
+    // Match .vue files with optional query params (e.g. App.vue?v=1 for cache-busting)
+    build.onLoad({ filter: /\.vue(\?.*)?$/ }, async (args) => {
+      const fs = await import("fs");
+      // Strip query params from the path to get the actual file on disk
+      const filePath = args.path.replace(/\?.*$/, "");
+      const source = fs.readFileSync(filePath, "utf-8");
+
+      const { descriptor, errors } = parse(source, {
+        filename: filePath,
+      });
+
+      if (errors.length > 0) {
+        throw new Error(
+          `Vue SFC parse error in ${filePath}:\n${errors.map((e: any) => e.message).join("\n")}`
+        );
+      }
+
+      let scriptCode = "";
+      let bindings: Record<string, unknown> | undefined;
+
+      if (descriptor.scriptSetup || descriptor.script) {
+        const compiled = compileScript(descriptor, {
+          id: filePath,
+          inlineTemplate: false,
+        });
+        scriptCode = compiled.content;
+        bindings = compiled.bindings;
+      }
+
+      // Our TUI element types — treated as native elements, not components
+      const TUI_ELEMENTS = new Set([
+        "root", "stack", "line", "row", "text", "spacer", "indent", "list",
+      ]);
+
+      let templateCode = "";
+      if (descriptor.template) {
+        const templateResult = compileTemplate({
+          source: descriptor.template.content,
+          filename: filePath,
+          id: filePath,
+          compilerOptions: {
+            bindingMetadata: bindings as any,
+            mode: "function",
+            isCustomElement: (tag: string) => TUI_ELEMENTS.has(tag),
+          },
+        });
+
+        if (templateResult.errors.length > 0) {
+          throw new Error(
+            `Vue template compile error in ${filePath}:\n` +
+            templateResult.errors.map((e: any) => typeof e === "string" ? e : e.message).join("\n")
+          );
+        }
+
+        templateCode = templateResult.code;
+      }
+
+      const output = assembleModule(scriptCode, templateCode, args.path);
+
+      return {
+        contents: output,
+        loader: "ts",
+      };
+    });
+  },
+};
+
+function assembleModule(scriptCode: string, templateCode: string, importPath: string): string {
+  const lines: string[] = [];
+
+  // Extract query string from the import path (e.g. ?v=1) to propagate to child .vue imports
+  const queryMatch = importPath.match(/(\?.*$)/);
+  const query = queryMatch ? queryMatch[1] : "";
+
+  // Import all Vue runtime helpers — the template compiler may use any of them.
+  // Using wildcard import + destructure avoids breakage when new helpers are used.
+  lines.push(`import * as _Vue from "@vue/runtime-core";`);
+  lines.push(
+    `const { h: _h, toDisplayString: _toDisplayString, openBlock: _openBlock, ` +
+    `createElementBlock: _createElementBlock, createElementVNode: _createElementVNode, ` +
+    `createVNode: _createVNode, createBlock: _createBlock, createCommentVNode: _createCommentVNode, ` +
+    `Fragment: _Fragment, renderList: _renderList, withCtx: _withCtx, ` +
+    `createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, ` +
+    `normalizeStyle: _normalizeStyle, normalizeClass: _normalizeClass, ` +
+    `normalizeProps: _normalizeProps, guardReactiveProps: _guardReactiveProps, ` +
+    `mergeProps: _mergeProps, withDirectives: _withDirectives, ` +
+    `resolveDynamicComponent: _resolveDynamicComponent } = _Vue;`
+  );
+  lines.push("");
+
+  if (scriptCode) {
+    let modified = scriptCode;
+    // Replace 'vue' imports with '@vue/runtime-core'
+    modified = modified.replace(/from ['"]vue['"]/g, `from "@vue/runtime-core"`);
+    // Propagate query params to child .vue imports for cache-busting
+    if (query) {
+      modified = modified.replace(/from (['"])(.+?\.vue)\1/g, `from $1$2${query}$1`);
+    }
+    // Replace the default export with a variable
+    modified = modified
+      .replace(/export default\s*/, "const __sfc_main = ")
+      .replace(/export default/, "const __sfc_main =");
+    lines.push(modified);
+  } else {
+    lines.push("const __sfc_main = {};");
+  }
+
+  lines.push("");
+
+  if (templateCode) {
+    // The compiled template in "function" mode outputs:
+    //   const { ... } = Vue
+    //   <hoisted vars>
+    //   return function render(...) { ... }
+    //
+    // We strip the Vue destructure (already imported above) and
+    // wrap the return in an IIFE to extract the render function.
+    let code = templateCode;
+    // Remove the "const { ... } = Vue" line
+    code = code.replace(/^const \{[^}]+\} = Vue\s*\n?/m, "");
+    // Replace "return function render" with "const render = function"
+    code = code.replace(/^return function render/m, "const render = function");
+    lines.push(code);
+    lines.push("");
+    lines.push("__sfc_main.render = render;");
+  }
+
+  lines.push("");
+  lines.push("export default __sfc_main;");
+
+  return lines.join("\n");
+}

package/src/register.ts

@@ -0,0 +1,4 @@
+// Auto-registers the Vue SFC bun plugin.
+// Referenced by bunfig.toml preload.
+import { tuiVuePlugin } from "./plugin";
+Bun.plugin(tuiVuePlugin);