@valyrianjs/terminal 0.1.0 → 0.1.2

package/src/stream-log.ts

@@ -0,0 +1,96 @@
+export type StreamLogEntryType = "assistant" | "log";
+export type StreamLogEntryStatus = "streaming" | "complete" | "cancelled" | "error";
+
+export type StreamLogEntry = {
+  id: string;
+  type: StreamLogEntryType;
+  content: string;
+  status: StreamLogEntryStatus;
+  error?: string;
+};
+
+export type StreamLogSnapshot = {
+  activeId?: string;
+  entries: StreamLogEntry[];
+};
+
+type AppendEntry = {
+  id: string;
+  type: StreamLogEntryType;
+  content: string;
+};
+
+export function createStreamLog() {
+  const entries: StreamLogEntry[] = [];
+  let activeId: string | undefined;
+
+  function findEntry(id: string) {
+    return entries.find((entry) => entry.id === id);
+  }
+
+  return {
+    append(value: AppendEntry) {
+      const entry: StreamLogEntry = { ...value, status: "complete" };
+      entries.push(entry);
+      return { ...entry };
+    },
+    update(id: string, content: string) {
+      if (activeId && activeId !== id) {
+        const activeEntry = findEntry(activeId);
+        if (activeEntry) {
+          activeEntry.status = "cancelled";
+          delete activeEntry.error;
+        }
+      }
+      let entry = findEntry(id);
+      if (!entry) {
+        entry = { id, type: "assistant", content: "", status: "streaming" };
+        entries.push(entry);
+      }
+      entry.content = content;
+      entry.status = "streaming";
+      delete entry.error;
+      activeId = id;
+      return { ...entry };
+    },
+    complete(id: string) {
+      const entry = findEntry(id);
+      if (entry) {
+        entry.status = "complete";
+        delete entry.error;
+      }
+      if (activeId === id) {
+        activeId = undefined;
+      }
+    },
+    cancel() {
+      if (!activeId) {
+        return;
+      }
+      const entry = findEntry(activeId);
+      if (entry) {
+        entry.status = "cancelled";
+        delete entry.error;
+      }
+      activeId = undefined;
+    },
+    error(id: string, message: string) {
+      let entry = findEntry(id);
+      if (!entry) {
+        entry = { id, type: "assistant", content: "", status: "error" };
+        entries.push(entry);
+      }
+      entry.status = "error";
+      entry.error = message;
+      if (activeId === id) {
+        activeId = undefined;
+      }
+    },
+    snapshot(): StreamLogSnapshot {
+      return {
+        activeId,
+        entries: entries.map((entry) => ({ ...entry }))
+      };
+    }
+  };
+}

package/src/text.ts

@@ -0,0 +1,20 @@
+const STRING_TERMINAL_CONTROL = /(?:\u001b(?:P|X|\^|_)|[\u0090\u0098\u009e\u009f])[\s\S]*?(?:\u001b\\|\u009c|$)/g;
+const OSC_TERMINAL_CONTROL = /(?:\u001b\]|\u009d)[\s\S]*?(?:\u0007|\u001b\\|\u009c|$)/g;
+const CSI_TERMINAL_CONTROL = /\u001b\[[0-?]*[ -/]*[@-~]/g;
+const C1_CSI_TERMINAL_CONTROL = /\u009b[0-?]*[ -/]*[@-~]/g;
+const ESC_TERMINAL_CONTROL = /\u001b[ -/]*[0-~]/g;
+const C1_TERMINAL_CONTROL = /[\u0080-\u009f]/g;
+const C0_TERMINAL_CONTROL = /[\u0000-\u0009\u000b-\u001f\u007f]/g;
+
+export function stripTerminalControls(value: unknown) {
+  return String(value)
+    .replace(STRING_TERMINAL_CONTROL, "")
+    .replace(OSC_TERMINAL_CONTROL, "")
+    .replace(CSI_TERMINAL_CONTROL, "")
+    .replace(C1_CSI_TERMINAL_CONTROL, "")
+    .replace(ESC_TERMINAL_CONTROL, "")
+    .replace(C1_TERMINAL_CONTROL, "")
+    .replace(C0_TERMINAL_CONTROL, "");
+}
+
+export const plainText = stripTerminalControls;

package/src/theme.ts

@@ -0,0 +1,263 @@
+import type { TerminalSemanticStyleKind, TerminalStyleDefinition, TerminalStyleToken, TerminalStyleTree, TerminalStyleValue, TerminalTheme } from "./types.js";
+
+const STYLE_RECIPE_KEYS = new Set(["color", "background", "border", "padding", "plainPrefix", "plainSuffix"]);
+
+const reverseVideoToken: TerminalStyleToken = {
+  ansiOpen: "\u001b[7m",
+  ansiClose: "\u001b[27m"
+};
+
+export const defaultTerminalTheme: TerminalTheme = {
+  styles: {
+    state: {
+      focus: { color: "#ffffff" },
+      hover: { color: "#dddddd" },
+      disabled: { color: "#777777" },
+      loading: { color: "#88c0d0", background: "#1f2328" },
+      pressed: { background: "#333333" },
+      checked: { color: "#a3be8c" },
+      unchecked: { color: "#d8dee9" },
+      indeterminate: { color: "#ebcb8b" },
+      selected: { background: "#2e3440" },
+      current: { background: "#3b4252" },
+      expanded: { color: "#b48ead" },
+      collapsed: { color: "#81a1c1" },
+      invalid: { color: "#bf616a" },
+      valid: { color: "#a3be8c" },
+      readonly: { color: "#d8dee9" },
+      placeholder: { color: "#777777" },
+      selection: { background: "#434c5e" },
+      editing: { color: "#88c0d0" },
+      submitted: { color: "#a3be8c" },
+      empty: { color: "#777777" },
+      error: { color: "#bf616a" },
+      warning: { color: "#ebcb8b" },
+      success: { color: "#a3be8c" },
+      muted: { color: "#777777" },
+      dragging: { color: "#b48ead" },
+      dropTarget: { background: "#243b53" },
+      capturing: { color: "#d08770" }
+    },
+    button: {
+      base: { color: "#d8dee9", background: "#1f2328", padding: { left: 2, right: 2 } },
+      focus: { color: "#ffffff", background: "#315f9e" },
+      hover: { color: "#ffffff", background: "#2b3137" },
+      pressed: { color: "#ffffff", background: "#3b4252" },
+      disabled: { color: "#777777", background: "#1f2328" },
+      warning: {
+        color: "#ebcb8b",
+        background: "#2e2600",
+        border: { left: true, right: true, style: "solid", color: "#ebcb8b" },
+        padding: { left: 1, right: 1 },
+        focus: { color: "#ffffff", border: { left: true, right: true, style: "double", color: "#ffffff" } },
+        hover: { color: "#ffffff" },
+        pressed: { background: "#4a3600" }
+      },
+      loading: { color: "#88c0d0", background: "#1f2328" },
+      success: { color: "#a3be8c" },
+      error: { color: "#bf616a" },
+      checked: { color: "#a3be8c" },
+      unchecked: { color: "#d8dee9" },
+      indeterminate: { color: "#ebcb8b" }
+    },
+    input: {
+      base: { color: "#d8dee9", background: "#0d1117", padding: { left: 2, right: 0 } },
+      focus: { color: "#ffffff", background: "#161b22" },
+      disabled: { color: "#777777" },
+      invalid: { color: "#bf616a" },
+      valid: { color: "#a3be8c" },
+      readonly: { color: "#777777" },
+      placeholder: { color: "#777777" },
+      selection: { background: "#434c5e" },
+      editing: { color: "#88c0d0" },
+      submitted: { color: "#a3be8c" }
+    },
+    editor: { base: { color: "#d8dee9" }, focus: { color: "#ffffff" }, selection: { background: "#434c5e" }, editing: { color: "#88c0d0" } },
+    surface: {
+      card: { background: "#111111", padding: 1 },
+      empty: { color: "#777777" }, loading: { color: "#88c0d0" }, error: { color: "#bf616a" }, warning: { color: "#ebcb8b" }, success: { color: "#a3be8c" }, muted: { color: "#777777" }, dragging: { color: "#b48ead" }, dropTarget: { background: "#243b53" }, capturing: { color: "#d08770" }, focus: { color: "#ffffff" }, hover: { color: "#dddddd" }
+    },
+    list: { base: { color: "#d8dee9" }, selected: { color: "#ffffff", background: "#2e3440" }, current: { color: "#ffffff", background: "#3b4252" }, hover: { color: "#ffffff", background: "#2b3137" }, empty: { color: "#777777" }, expanded: { color: "#b48ead" }, collapsed: { color: "#81a1c1" } },
+    scroll: { base: { color: "#d8dee9" }, hover: { color: "#dddddd" } },
+    log: { base: { color: "#d8dee9" }, empty: { color: "#777777" }, error: { color: "#bf616a" }, warning: { color: "#ebcb8b" }, success: { color: "#a3be8c" }, muted: { color: "#777777" } },
+    overlay: { base: { background: "#111111" }, dragging: { color: "#b48ead" }, dropTarget: { background: "#243b53" }, capturing: { color: "#d08770" } },
+    pane: {
+      header: { background: "#3a3a3a", color: "#ffffff" },
+      transcript: { background: "#303030", color: "#dddddd" },
+      tools: { background: "#252525", color: "#cccccc" },
+      prompt: { background: "#333333", color: "#ffffff" }
+    }
+  },
+  spans: {
+    selection: {
+      ...reverseVideoToken,
+      plainPrefix: "[",
+      plainSuffix: "]"
+    },
+    "input.selection": {
+      plainPrefix: "[",
+      plainSuffix: "]"
+    },
+    "list.current": {
+      plainPrefix: "> "
+    },
+    focus: {
+      background: "#1f2328"
+    },
+    "current-row": reverseVideoToken,
+    hover: {
+      ansiOpen: "\u001b[4m",
+      ansiClose: "\u001b[24m"
+    },
+    highlight: {
+      ansiOpen: "\u001b[1m",
+      ansiClose: "\u001b[22m"
+    },
+    "pane.header": {
+      ansiOpen: "\u001b[48;5;236m\u001b[38;5;255m",
+      ansiClose: "\u001b[49m\u001b[39m"
+    },
+    "pane.transcript": {
+      ansiOpen: "\u001b[48;5;235m\u001b[38;5;252m",
+      ansiClose: "\u001b[49m\u001b[39m"
+    },
+    "pane.tools": {
+      ansiOpen: "\u001b[48;5;234m\u001b[38;5;250m",
+      ansiClose: "\u001b[49m\u001b[39m"
+    },
+    "pane.prompt": {
+      ansiOpen: "\u001b[48;5;237m\u001b[38;5;255m",
+      ansiClose: "\u001b[49m\u001b[39m"
+    }
+  }
+};
+
+export const highContrastTerminalTheme: TerminalTheme = {
+  spans: {
+    ...defaultTerminalTheme.spans,
+    focus: {
+      ...reverseVideoToken,
+      plainPrefix: ">",
+      plainSuffix: "<"
+    },
+    error: {
+      ansiOpen: "\u001b[1;31m",
+      ansiClose: "\u001b[22;39m",
+      plainPrefix: "!"
+    },
+    warning: {
+      ansiOpen: "\u001b[1;33m",
+      ansiClose: "\u001b[22;39m",
+      plainPrefix: "!"
+    },
+    success: {
+      ansiOpen: "\u001b[1;32m",
+      ansiClose: "\u001b[22;39m",
+      plainPrefix: "+"
+    },
+    muted: {
+      ansiOpen: "\u001b[2m",
+      ansiClose: "\u001b[22m"
+    },
+    disabled: {
+      ansiOpen: "\u001b[2m",
+      ansiClose: "\u001b[22m",
+      plainPrefix: "(",
+      plainSuffix: ")"
+    }
+  }
+};
+
+export function mergeTerminalTheme(theme?: TerminalTheme): TerminalTheme {
+  const styles = mergeStyleTrees(defaultTerminalTheme.styles, theme?.styles);
+  validateStyleTree(styles);
+  return {
+    styles,
+    spans: {
+      ...defaultTerminalTheme.spans,
+      ...theme?.spans
+    }
+  };
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function cloneStyleTree(tree: TerminalStyleTree | undefined): TerminalStyleTree | undefined {
+  if (!tree) return undefined;
+  const next: TerminalStyleTree = {};
+  for (const [key, value] of Object.entries(tree)) {
+    next[key] = isPlainObject(value) ? cloneStyleTree(value as TerminalStyleTree) : value as any;
+  }
+  return next;
+}
+
+function mergeStyleTrees(base: TerminalStyleTree | undefined, override: TerminalStyleTree | undefined): TerminalStyleTree | undefined {
+  const next = cloneStyleTree(base) || {};
+  if (!override) return next;
+  for (const [key, value] of Object.entries(override)) {
+    if (STYLE_RECIPE_KEYS.has(key)) {
+      next[key] = isPlainObject(value) ? cloneStyleTree(value as TerminalStyleTree) : value as any;
+      continue;
+    }
+    const existing = next[key];
+    next[key] = isPlainObject(existing) && isPlainObject(value)
+      ? mergeStyleTrees(existing as TerminalStyleTree, value as TerminalStyleTree)
+      : isPlainObject(value) ? cloneStyleTree(value as TerminalStyleTree) : value as any;
+  }
+  return next;
+}
+
+function validateStyleTree(tree: TerminalStyleTree | undefined, path = "styles") {
+  if (!tree) return;
+  for (const [key, value] of Object.entries(tree)) {
+    if (STYLE_RECIPE_KEYS.has(key)) continue;
+    if (typeof value === "undefined") continue;
+    if (!isPlainObject(value)) {
+      throw new RangeError(`Unknown terminal style recipe key: ${path}.${key}`);
+    }
+    validateStyleTree(value as TerminalStyleTree, `${path}.${key}`);
+  }
+}
+
+function styleRecipeFromNode(node: TerminalStyleTree): TerminalStyleDefinition | undefined {
+  const recipe: TerminalStyleDefinition = {};
+  for (const key of STYLE_RECIPE_KEYS) {
+    if (Object.prototype.hasOwnProperty.call(node, key)) {
+      (recipe as any)[key] = isPlainObject(node[key]) ? { ...(node[key] as object) } : node[key];
+    }
+  }
+  return Object.keys(recipe).length ? recipe : undefined;
+}
+
+export function resolveTerminalStyle(value: TerminalStyleValue | undefined, theme?: TerminalTheme): TerminalStyleDefinition | undefined {
+  if (typeof value === "undefined") return undefined;
+  if (typeof value !== "string") {
+    return { ...value, border: isPlainObject(value.border) ? { ...value.border } : value.border, padding: isPlainObject(value.padding) ? { ...value.padding } : value.padding };
+  }
+  const merged = mergeTerminalTheme(theme);
+  const parts = value.split(".").filter(Boolean);
+  let node: unknown = merged.styles;
+  for (const part of parts) {
+    if (!isPlainObject(node) || !(part in node)) {
+      throw new RangeError(`Unknown terminal style token: ${value}`);
+    }
+    node = (node as TerminalStyleTree)[part];
+  }
+  if (!isPlainObject(node)) {
+    throw new RangeError(`Unknown terminal style token: ${value}`);
+  }
+  const recipe = styleRecipeFromNode(node as TerminalStyleTree);
+  if (!recipe) {
+    throw new RangeError(`Unknown terminal style token: ${value}`);
+  }
+  return recipe;
+}
+
+export function resolveTerminalStyleToken(
+  kind: TerminalSemanticStyleKind | (string & {}),
+  theme?: TerminalTheme
+): TerminalStyleToken | undefined {
+  return mergeTerminalTheme(theme).spans?.[kind];
+}

package/src/tree.ts

@@ -0,0 +1,169 @@
+import type { TerminalFocusNode, TerminalNode, TerminalPrimitiveTag, VnodeLike } from "./types.js";
+
+function isVnodeLike(value: any): value is VnodeLike {
+  return Boolean(value && typeof value === "object" && "tag" in value && "children" in value);
+}
+
+function isPojoComponent(value: any): value is { view: Function } {
+  return Boolean(value && typeof value === "object" && typeof value.view === "function");
+}
+
+function normalizeChildren(children: any[]): TerminalNode[] {
+  const out: TerminalNode[] = [];
+  for (let i = 0; i < children.length; i += 1) {
+    out.push(...resolveToTerminalNodes(children[i]));
+  }
+  return out;
+}
+
+function resolveComponent(component: any, props: Record<string, any>, children: any[]) {
+  if (isPojoComponent(component)) {
+    return component.view.call(component, props, children);
+  }
+  return component(props, children);
+}
+
+export function resolveToTerminalNodes(input: any): TerminalNode[] {
+  if (input == null || input === false || input === true) {
+    return [];
+  }
+
+  if (Array.isArray(input)) {
+    return input.flatMap(resolveToTerminalNodes);
+  }
+
+  if (typeof input === "string" || typeof input === "number") {
+    return [{ type: "text", value: String(input) }];
+  }
+
+  if (isVnodeLike(input)) {
+    if (input.props && "v-for" in (input.props || {})) {
+      const set = (input.props || {})["v-for"];
+      const callback = input.children?.[0];
+
+      if (typeof callback === "function" && Array.isArray(set)) {
+        const out: TerminalNode[] = [];
+        for (let i = 0; i < set.length; i += 1) {
+          out.push(...resolveToTerminalNodes(callback(set[i], i)));
+        }
+        return out;
+      }
+    }
+
+    if (typeof input.tag === "function" || isPojoComponent(input.tag)) {
+      return resolveToTerminalNodes(resolveComponent(input.tag, input.props || {}, input.children || []));
+    }
+
+    return [
+      {
+        type: "element",
+        tag: input.tag as TerminalPrimitiveTag,
+        props: (input.props || {}) as Record<string, any>,
+        children: normalizeChildren(input.children || [])
+      }
+    ];
+  }
+
+  return [{ type: "text", value: String(input) }];
+}
+
+export function resolveRoot(input: any): TerminalNode[] {
+  if (typeof input === "function" && !isVnodeLike(input)) {
+    return resolveToTerminalNodes(input({}, []));
+  }
+  return resolveToTerminalNodes(input);
+}
+
+export function textContent(node: TerminalNode): string {
+  if (node.type === "text") {
+    return node.value;
+  }
+  return node.children.map(textContent).join("");
+}
+
+export function isFocusable(node: TerminalNode): node is TerminalFocusNode {
+  return node.type === "element" && (node.tag === "terminal-input" || node.tag === "terminal-editor" || node.tag === "terminal-button" || node.tag === "terminal-list" || node.tag === "terminal-scroll" || Boolean(node.props.focusable));
+}
+
+export function collectFocusableNodes(nodes: TerminalNode[], out: TerminalFocusNode[]) {
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (isFocusable(node)) {
+      out.push(node);
+    }
+    if (node.type === "element") {
+      collectFocusableNodes(node.children, out);
+    }
+  }
+}
+
+export function collectDirectOverlayFocusableNodes(nodes: TerminalNode[], out: TerminalFocusNode[]) {
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (node.type !== "element") {
+      continue;
+    }
+
+    const overlayChildren = node.children.filter((child) => child.type === "element" && child.tag === "terminal-overlay" && child.props.trapFocus !== false);
+    if (overlayChildren.length) {
+      collectFocusableNodes(overlayChildren, out);
+      continue;
+    }
+
+    collectDirectOverlayFocusableNodes(node.children, out);
+  }
+}
+
+export function collectActiveFocusScopeFocusableNodes(nodes: TerminalNode[], focusedId: string | null, out: TerminalFocusNode[]): boolean {
+  if (!focusedId) {
+    return false;
+  }
+
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (node.type !== "element") {
+      continue;
+    }
+
+    if (node.tag === "terminal-focus-scope" && node.props.active !== false) {
+      const scoped: TerminalFocusNode[] = [];
+      collectFocusableNodes(node.children, scoped);
+      if (scoped.some((focusable) => focusable.props.id === focusedId)) {
+        if (collectActiveFocusScopeFocusableNodes(node.children, focusedId, out)) {
+          return true;
+        }
+        out.push(...scoped);
+        return true;
+      }
+      continue;
+    }
+
+    if (collectActiveFocusScopeFocusableNodes(node.children, focusedId, out)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function findFocusableById(nodes: TerminalNode[], id: string): TerminalFocusNode | null {
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (isFocusable(node) && node.props.id === id) {
+      return node;
+    }
+    if (node.type === "element") {
+      const found = findFocusableById(node.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+export function findFocused(nodes: TerminalNode[], focusedId: string | null) {
+  if (!focusedId) {
+    return null;
+  }
+  return findFocusableById(nodes, focusedId);
+}