@dex-ai/vue-tui 0.1.10

package/src/renderer.ts

@@ -0,0 +1,120 @@
+import { createRenderer } from "@vue/runtime-core";
+import type { RendererOptions } from "@vue/runtime-core";
+import {
+  createElement,
+  createTextNode,
+  createComment,
+  insertChild,
+  removeChild,
+} from "./nodes";
+import type { TNode, TElement, TText } from "./nodes";
+
+// Vue's RendererOptions<HostNode, HostElement>
+type Options = RendererOptions<TNode, TElement>;
+
+function buildOptions(onUpdate: () => void): Options {
+  return {
+    // -----------------------------------------------------------------------
+    // Element creation
+    // -----------------------------------------------------------------------
+    createElement(type: string): TElement {
+      return createElement(type);
+    },
+
+    createText(text: string): TText {
+      return createTextNode(text);
+    },
+
+    createComment(text: string) {
+      return createComment(text);
+    },
+
+    // -----------------------------------------------------------------------
+    // Text / props mutation
+    // -----------------------------------------------------------------------
+    setText(node: TNode, text: string): void {
+      if (node.type === "text") {
+        (node as TText).text = text;
+        onUpdate();
+      }
+    },
+
+    setElementText(el: TElement, text: string): void {
+      // Replace all children with a single text node
+      el.children = [];
+      const textNode = createTextNode(text);
+      textNode.parent = el;
+      el.children.push(textNode);
+      onUpdate();
+    },
+
+    patchProp(
+      el: TElement,
+      key: string,
+      _prevValue: unknown,
+      nextValue: unknown,
+    ): void {
+      el.props[key] = nextValue;
+      onUpdate();
+    },
+
+    // -----------------------------------------------------------------------
+    // Tree mutations
+    // -----------------------------------------------------------------------
+    insert(child: TNode, parent: TElement, anchor: TNode | null = null): void {
+      insertChild(parent, child, anchor);
+      onUpdate();
+    },
+
+    remove(child: TNode): void {
+      if (child.parent !== null) {
+        removeChild(child.parent, child);
+        onUpdate();
+      }
+    },
+
+    // -----------------------------------------------------------------------
+    // Queries (Vue uses these to walk the DOM)
+    // -----------------------------------------------------------------------
+    parentNode(node: TNode): TElement | null {
+      return node.parent;
+    },
+
+    nextSibling(node: TNode): TNode | null {
+      return node.nextSibling;
+    },
+
+    querySelector(_selector: string): TElement | null {
+      // Not needed for terminal rendering
+      return null;
+    },
+
+    setScopeId(el: TElement, id: string): void {
+      el.props["data-v-" + id] = true;
+    },
+
+    // -----------------------------------------------------------------------
+    // Clone (used for static hoisting)
+    // -----------------------------------------------------------------------
+    cloneNode(node: TNode): TNode {
+      if (node.type === "text") {
+        return createTextNode((node as TText).text);
+      }
+      if (node.type === "comment") {
+        return createComment(String(node["text"] ?? ""));
+      }
+      const el = node as TElement;
+      const cloned = createElement(el.tag, { ...el.props });
+      for (const child of el.children) {
+        const clonedChild = this.cloneNode!(child) as TNode;
+        insertChild(cloned, clonedChild, null);
+      }
+      return cloned;
+    },
+  };
+}
+
+export function createTerminalRenderer(onUpdate: () => void) {
+  const { createApp } = createRenderer<TNode, TElement>(buildOptions(onUpdate));
+  return { createApp };
+}

package/src/style.ts

@@ -0,0 +1,107 @@
+/** The full CSS-like style interface for terminal elements. */
+export interface TerminalStyle {
+  // Text
+  fontWeight?: "bold" | "normal" | undefined;
+  fontStyle?: "italic" | "normal" | undefined;
+  textDecoration?: "underline" | "line-through" | "none" | undefined;
+  opacity?: number | undefined; // 1 = normal, 0.5 = dim
+
+  // Colors — named colors from theme, or raw ANSI codes
+  color?: string | undefined;
+  backgroundColor?: string | undefined;
+
+  // Sizing (chars for width, lines for height)
+  width?: number | "100%" | "auto" | undefined;
+  minWidth?: number | undefined;
+  maxWidth?: number | undefined;
+  height?: number | "100%" | "auto" | undefined;
+  minHeight?: number | undefined;
+  maxHeight?: number | undefined;
+
+  // Spacing (chars horizontal, lines vertical)
+  marginTop?: number | undefined;
+  marginBottom?: number | undefined;
+  marginLeft?: number | undefined;
+  marginRight?: number | undefined;
+  paddingTop?: number | undefined;
+  paddingBottom?: number | undefined;
+  paddingLeft?: number | undefined;
+  paddingRight?: number | undefined;
+
+  // Border
+  borderTop?: "solid" | "none" | undefined;
+  borderBottom?: "solid" | "none" | undefined;
+  borderLeft?: "solid" | "heavy" | "none" | undefined;
+  borderRight?: "solid" | "heavy" | "none" | undefined;
+  borderColor?: string | undefined;
+  borderTopColor?: string | undefined;
+  borderBottomColor?: string | undefined;
+  borderLeftColor?: string | undefined;
+  borderRightColor?: string | undefined;
+
+  // Layout
+  display?: "block" | "inline" | "none" | undefined;
+
+  // Text wrapping
+  whiteSpace?: "normal" | "nowrap" | undefined;
+
+  // Overflow
+  overflow?: "hidden" | "scroll" | "collapse" | undefined;
+}
+
+export interface Theme {
+  colors: Record<string, string>; // name → ANSI code
+  symbols: {
+    divider: string; // "─"
+    prompt: string; // "❯"
+    bullet: string; // "●"
+    spinner: string[]; // ["◆", "◇"]
+  };
+  reset: string; // "\x1b[0m"
+  bold: string; // "\x1b[1m"
+  dim: string; // "\x1b[2m"
+  italic: string; // "\x1b[3m"
+  underline: string; // "\x1b[4m"
+  strikethrough: string; // "\x1b[9m"
+  reverse: string; // "\x1b[7m"
+}
+
+/** Resolve a color string (theme name or raw ANSI) to an ANSI escape. */
+export function resolveColor(color: string | undefined, theme: Theme): string {
+  if (color === undefined) return "";
+  // If it starts with \x1b it's already a raw ANSI escape
+  if (color.startsWith("\x1b")) return color;
+  // Look up in theme colors
+  const resolved = theme.colors[color];
+  if (resolved !== undefined) return resolved;
+  // Return as-is (e.g. user passed a raw escape without \x1b prefix — unlikely but safe)
+  return color;
+}
+
+/** Resolve a TerminalStyle into ANSI open/close codes for inline text. */
+export function resolveTextStyle(
+  style: TerminalStyle,
+  theme: Theme,
+): { open: string; close: string } {
+  let open = "";
+  const needsReset =
+    style.fontWeight === "bold" ||
+    style.fontStyle === "italic" ||
+    style.textDecoration === "underline" ||
+    style.textDecoration === "line-through" ||
+    style.opacity !== undefined ||
+    style.color !== undefined ||
+    style.backgroundColor !== undefined;
+
+  if (style.fontWeight === "bold") open += theme.bold;
+  if (style.fontStyle === "italic") open += theme.italic;
+  if (style.textDecoration === "underline") open += theme.underline;
+  if (style.textDecoration === "line-through") open += theme.strikethrough;
+  if (style.opacity !== undefined && style.opacity < 1) open += theme.dim;
+  if (style.color !== undefined) open += resolveColor(style.color, theme);
+  if (style.backgroundColor !== undefined)
+    open += resolveColor(style.backgroundColor, theme);
+
+  const close = needsReset ? theme.reset : "";
+  return { open, close };
+}

package/src/template.ts

@@ -0,0 +1,326 @@
+import { h } from "@vue/runtime-core";
+
+// ---------------------------------------------------------------------------
+// Tagged template for TUI components
+// ---------------------------------------------------------------------------
+
+const PLACEHOLDER_PREFIX = "\x00__TUI_";
+const PLACEHOLDER_SUFFIX = "__\x00";
+const PLACEHOLDER_RE = /\x00__TUI_(\d+)__\x00/g;
+
+// Void elements that don't need closing tags
+const VOID_ELEMENTS = new Set(["spacer"]);
+
+// Shorthand attribute → style mapping
+const STYLE_SHORTHANDS: Record<string, (value: string | true) => Record<string, unknown>> = {
+  color: (v) => ({ color: v }),
+  bg: (v) => ({ backgroundColor: typeof v === "string" ? (v.startsWith("bg-") ? v : `bg-${v}`) : v }),
+  bold: () => ({ fontWeight: "bold" }),
+  italic: () => ({ fontStyle: "italic" }),
+  underline: () => ({ textDecoration: "underline" }),
+  strikethrough: () => ({ textDecoration: "line-through" }),
+  dim: () => ({ opacity: 0.5 }),
+};
+
+// ---------------------------------------------------------------------------
+// Parser types
+// ---------------------------------------------------------------------------
+
+interface ParsedNode {
+  type: "element" | "text";
+  tag?: string;
+  attrs?: Record<string, unknown>;
+  children?: ParsedNode[];
+  text?: string;
+}
+
+// ---------------------------------------------------------------------------
+// html tagged template
+// ---------------------------------------------------------------------------
+
+/**
+ * Tagged template literal for TUI components.
+ *
+ * Usage:
+ * ```ts
+ * html`<line><text color="accent" bold>hello</text></line>`
+ * ```
+ *
+ * Supports interpolations for dynamic values:
+ * ```ts
+ * html`<text cursorAt=${col}>${text}</text>`
+ * ```
+ */
+export function html(strings: TemplateStringsArray, ...values: unknown[]): unknown {
+  // Build the raw string with placeholders for interpolated values
+  let raw = "";
+  for (let i = 0; i < strings.length; i++) {
+    raw += strings[i];
+    if (i < values.length) {
+      raw += `${PLACEHOLDER_PREFIX}${i}${PLACEHOLDER_SUFFIX}`;
+    }
+  }
+
+  const nodes = parse(raw.trim(), values);
+
+  if (nodes.length === 0) return null;
+  if (nodes.length === 1) return toVNode(nodes[0]!, values);
+  return nodes.map((n) => toVNode(n, values));
+}
+
+// ---------------------------------------------------------------------------
+// Parser
+// ---------------------------------------------------------------------------
+
+function parse(input: string, values: unknown[]): ParsedNode[] {
+  let pos = 0;
+  const nodes: ParsedNode[] = [];
+
+  while (pos < input.length) {
+    if (input[pos] === "<") {
+      // Could be opening tag, closing tag, or self-closing
+      if (input[pos + 1] === "/") {
+        // Closing tag — stop parsing children (handled by caller)
+        break;
+      }
+      const result = parseElement(input, pos, values);
+      if (result) {
+        nodes.push(result.node);
+        pos = result.end;
+      } else {
+        // Malformed — treat as text
+        const textEnd = input.indexOf("<", pos + 1);
+        const end = textEnd === -1 ? input.length : textEnd;
+        nodes.push({ type: "text", text: input.slice(pos, end) });
+        pos = end;
+      }
+    } else {
+      // Text content
+      const textEnd = input.indexOf("<", pos);
+      const end = textEnd === -1 ? input.length : textEnd;
+      const text = input.slice(pos, end);
+      // Only keep text that has meaningful content or placeholders
+      // Strip pure whitespace between tags (indentation/newlines)
+      if (text.includes(PLACEHOLDER_PREFIX) || text.replace(/[\s\t\n\r]+/g, " ").trim()) {
+        nodes.push({ type: "text", text: text.replace(/[\s\t\n\r]+/g, " ") });
+      }
+      pos = end;
+    }
+  }
+
+  return nodes;
+}
+
+function parseElement(input: string, start: number, values: unknown[]): { node: ParsedNode; end: number } | null {
+  // Match opening tag: <tagName ...attrs...> or <tagName ...attrs... />
+  const tagMatch = input.slice(start).match(/^<([a-zA-Z][a-zA-Z0-9-]*)/);
+  if (!tagMatch) return null;
+
+  const tag = tagMatch[1]!;
+  let pos = start + tagMatch[0]!.length;
+
+  // Parse attributes
+  const attrs: Record<string, unknown> = {};
+  pos = parseAttributes(input, pos, attrs, values);
+
+  // Check for self-closing or void
+  const selfClose = input.slice(pos).startsWith("/>");
+  const isVoid = VOID_ELEMENTS.has(tag);
+
+  if (selfClose) {
+    pos += 2; // skip />
+    return { node: { type: "element", tag, attrs, children: [] }, end: pos };
+  }
+
+  // Skip >
+  if (input[pos] === ">") {
+    pos += 1;
+  } else {
+    return null; // malformed
+  }
+
+  if (isVoid) {
+    return { node: { type: "element", tag, attrs, children: [] }, end: pos };
+  }
+
+  // Parse children until closing tag
+  const children = parseChildren(input, pos, tag, values);
+  pos = children.end;
+
+  return { node: { type: "element", tag, attrs, children: children.nodes }, end: pos };
+}
+
+function parseChildren(input: string, start: number, parentTag: string, values: unknown[]): { nodes: ParsedNode[]; end: number } {
+  const closingTag = `</${parentTag}>`;
+  const nodes: ParsedNode[] = [];
+  let pos = start;
+
+  while (pos < input.length) {
+    // Check for closing tag
+    if (input.slice(pos).startsWith(closingTag)) {
+      return { nodes, end: pos + closingTag.length };
+    }
+
+    if (input[pos] === "<") {
+      if (input[pos + 1] === "/") {
+        // Unexpected closing tag — stop
+        const endIdx = input.indexOf(">", pos);
+        return { nodes, end: endIdx === -1 ? input.length : endIdx + 1 };
+      }
+      const result = parseElement(input, pos, values);
+      if (result) {
+        nodes.push(result.node);
+        pos = result.end;
+      } else {
+        pos++;
+      }
+    } else {
+      // Text content
+      const nextTag = input.indexOf("<", pos);
+      const end = nextTag === -1 ? input.length : nextTag;
+      const text = input.slice(pos, end);
+      // Strip pure whitespace between tags (indentation/newlines)
+      if (text.includes(PLACEHOLDER_PREFIX) || text.replace(/[\s\t\n\r]+/g, " ").trim()) {
+        nodes.push({ type: "text", text: text.replace(/[\s\t\n\r]+/g, " ") });
+      }
+      pos = end;
+    }
+  }
+
+  return { nodes, end: pos };
+}
+
+function parseAttributes(input: string, start: number, attrs: Record<string, unknown>, values: unknown[]): number {
+  let pos = start;
+
+  while (pos < input.length) {
+    // Skip whitespace
+    while (pos < input.length && /\s/.test(input[pos]!)) pos++;
+
+    // End of attributes?
+    if (input[pos] === ">" || input[pos] === "/") break;
+
+    // Attribute name
+    const nameMatch = input.slice(pos).match(/^([a-zA-Z_][a-zA-Z0-9_-]*)/);
+    if (!nameMatch) break;
+
+    const name = nameMatch[1]!;
+    pos += name.length;
+
+    // Check for = value
+    if (input[pos] === "=") {
+      pos++; // skip =
+
+      if (input[pos] === '"') {
+        // Quoted string value
+        pos++; // skip opening "
+        const endQuote = input.indexOf('"', pos);
+        if (endQuote === -1) break;
+        const val = input.slice(pos, endQuote);
+        attrs[name] = resolvePlaceholders(val, values);
+        pos = endQuote + 1;
+      } else if (input[pos] === "'") {
+        // Single-quoted string value
+        pos++; // skip opening '
+        const endQuote = input.indexOf("'", pos);
+        if (endQuote === -1) break;
+        const val = input.slice(pos, endQuote);
+        attrs[name] = resolvePlaceholders(val, values);
+        pos = endQuote + 1;
+      } else if (input.slice(pos).startsWith(PLACEHOLDER_PREFIX)) {
+        // Direct placeholder value (for objects, numbers, etc.)
+        const phEnd = input.indexOf(PLACEHOLDER_SUFFIX, pos);
+        if (phEnd === -1) break;
+        const idxStr = input.slice(pos + PLACEHOLDER_PREFIX.length, phEnd);
+        const idx = parseInt(idxStr, 10);
+        attrs[name] = values[idx];
+        pos = phEnd + PLACEHOLDER_SUFFIX.length;
+      } else {
+        // Unquoted value (until whitespace, >, or /)
+        const valMatch = input.slice(pos).match(/^[^\s>\/]+/);
+        if (valMatch) {
+          attrs[name] = resolvePlaceholders(valMatch[0]!, values);
+          pos += valMatch[0]!.length;
+        }
+      }
+    } else {
+      // Boolean attribute (e.g. `bold`, `italic`)
+      attrs[name] = true;
+    }
+  }
+
+  return pos;
+}
+
+// ---------------------------------------------------------------------------
+// Placeholder resolution
+// ---------------------------------------------------------------------------
+
+function resolvePlaceholders(str: string, values: unknown[]): unknown {
+  // If the entire string is a single placeholder, return the value directly
+  const singleMatch = str.match(/^\x00__TUI_(\d+)__\x00$/);
+  if (singleMatch) {
+    return values[parseInt(singleMatch[1]!, 10)];
+  }
+
+  // Otherwise, string-replace placeholders
+  if (str.includes(PLACEHOLDER_PREFIX)) {
+    return str.replace(PLACEHOLDER_RE, (_, idxStr: string) => {
+      return String(values[parseInt(idxStr, 10)] ?? "");
+    });
+  }
+
+  return str;
+}
+
+// ---------------------------------------------------------------------------
+// VNode conversion
+// ---------------------------------------------------------------------------
+
+function toVNode(node: ParsedNode, values: unknown[]): unknown {
+  if (node.type === "text") {
+    const text = node.text ?? "";
+    // Resolve any placeholders in text
+    const resolved = resolvePlaceholders(text, values);
+    return resolved;
+  }
+
+  const tag = node.tag!;
+  const rawAttrs = node.attrs ?? {};
+  const children = (node.children ?? []).map((c) => toVNode(c, values));
+
+  // Separate shorthand style attrs from regular props
+  const props: Record<string, unknown> = {};
+  let style: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(rawAttrs)) {
+    if (key === "style") {
+      // Merge with existing style
+      if (typeof value === "object" && value !== null) {
+        style = { ...style, ...(value as Record<string, unknown>) };
+      }
+    } else if (key in STYLE_SHORTHANDS) {
+      const styleFn = STYLE_SHORTHANDS[key]!;
+      const result = styleFn(value as string | true);
+      style = { ...style, ...result };
+    } else {
+      props[key] = value;
+    }
+  }
+
+  // Only add style if non-empty
+  if (Object.keys(style).length > 0) {
+    props["style"] = style;
+  }
+
+  // For text elements with only text children, join them
+  if (tag === "text" && children.length > 0 && children.every((c) => typeof c === "string")) {
+    return h(tag, props, children.join(""));
+  }
+
+  if (children.length === 0) {
+    return h(tag, props);
+  }
+
+  return h(tag, props, children as any[]);
+}