终端 UI 框架

// dom.ts: 终端 DOM 节点定义
interface DOMElement {
  nodeName: string;
  parentNode: DOMElement | null;
  childNodes: Array<DOMElement | DOMText>;
  style: DOMStyle;
  yogaNode: YogaNode | null;
  // 事件处理
  onClick?: (event: ClickEvent) => void;
  onFocus?: () => void;
  onBlur?: () => void;
}

interface DOMText {
  nodeName: "#text";
  nodeValue: string;
  parentNode: DOMElement | null;
}

interface DOMStyle {
  color?: string;
  backgroundColor?: string;
  flexDirection?: "row" | "column";
  justifyContent?: "flex-start" | "center" | "flex-end";
  alignItems?: "flex-start" | "center" | "flex-end";
  width?: number | string;
  height?: number | string;
  marginTop?: number;
  marginBottom?: number;
  paddingLeft?: number;
  paddingRight?: number;
  borderStyle?: "single" | "double" | "round";
}

// reconciler.ts: React Reconciler 实现
const reconciler = ReactReconciler({
  supportsMutation: true,

  createInstance(
    type: string,
    props: Record<string, unknown>
  ): DOMElement {
    const node: DOMElement = {
      nodeName: type,
      parentNode: null,
      childNodes: [],
      style: extractStyle(props),
      yogaNode: Yoga.Node.create()
    };
    applyYogaStyle(node.yogaNode, node.style);
    return node;
  },

  createTextInstance(text: string): DOMText {
    return {
      nodeName: "#text",
      nodeValue: text,
      parentNode: null
    };
  },

  appendChild(parent: DOMElement, child: DOMElement | DOMText) {
    child.parentNode = parent;
    parent.childNodes.push(child);
    if ("yogaNode" in child && child.yogaNode) {
      parent.yogaNode?.insertChild(
        child.yogaNode,
        parent.yogaNode.getChildCount()
      );
    }
  },

  commitUpdate(
    node: DOMElement,
    _oldProps: Record<string, unknown>,
    newProps: Record<string, unknown>
  ) {
    node.style = extractStyle(newProps);
    if (node.yogaNode) {
      applyYogaStyle(node.yogaNode, node.style);
    }
  }
});

// renderer.ts: DOM 树 -> ANSI 输出
class TerminalRenderer {
  private lastOutput = "";
  private frameBuffer: string[] = [];
  private rafId: number | null = null;

  render(rootNode: DOMElement): void {
    // 1. Yoga 计算布局
    rootNode.yogaNode?.calculateLayout(
      this.termWidth,
      this.termHeight
    );

    // 2. 遍历 DOM 树生成 ANSI
    const output = this.renderNode(rootNode, 0, 0);

    // 3. 帧合并：防止高频刷新闪烁
    this.frameBuffer.push(output);
    if (this.rafId === null) {
      this.rafId = requestAnimationFrame(() => {
        this.flush();
        this.rafId = null;
      });
    }
  }

  private renderNode(
    node: DOMElement,
    x: number,
    y: number
  ): string {
    const layout = node.yogaNode?.getComputedLayout();
    if (!layout) return "";

    let result = "";
    const absX = x + layout.left;
    const absY = y + layout.top;

    // 绘制背景和边框
    if (node.style.backgroundColor) {
      result += this.drawBackground(
        absX, absY, layout.width, layout.height,
        node.style.backgroundColor
      );
    }

    // 递归渲染子节点
    for (const child of node.childNodes) {
      if (child.nodeName === "#text") {
        result += this.drawText(
          absX, absY, child.nodeValue,
          node.style.color
        );
      } else {
        result += this.renderNode(
          child as DOMElement, absX, absY
        );
      }
    }

    return result;
  }

  // frame.ts: 帧合并与闪烁防护
  private flush(): void {
    if (this.frameBuffer.length === 0) return;

    // 取最后一帧（丢弃中间帧）
    const latest =
      this.frameBuffer[this.frameBuffer.length - 1];
    this.frameBuffer = [];

    // 差量输出优化
    if (latest !== this.lastOutput) {
      const optimized = optimizeAnsi(
        this.lastOutput, latest
      );
      process.stdout.write(optimized);
      this.lastOutput = latest;
    }
  }
}

// optimizer.ts: ANSI 序列压缩
function optimizeAnsi(
  prev: string, next: string
): string {
  // 找到第一个差异位置
  let diffStart = 0;
  while (
    diffStart < prev.length
    && diffStart < next.length
    && prev[diffStart] === next[diffStart]
  ) {
    diffStart++;
  }
  // 只输出变化部分 + 光标定位
  return cursorTo(diffStart) + next.slice(diffStart);
}

// keybindings/parser.ts: 键序列解析
interface KeyBinding {
  key: string;           // "ctrl+s", "escape j"
  command: string;
  when?: string;         // 条件表达式
  priority?: number;
}

function parseKeySequence(
  raw: string
): ParsedKey[] {
  return raw.split(" ").map(part => {
    const modifiers: string[] = [];
    let key = part;

    if (key.includes("+")) {
      const segments = key.split("+");
      key = segments.pop()!;
      modifiers.push(...segments);
    }

    return { key, modifiers };
  });
}

// keybindings/resolver.ts: 绑定解析与冲突处理
class KeybindingResolver {
  private bindings: KeyBinding[] = [];

  resolve(
    event: KeyEvent,
    context: KeyContext
  ): KeyBinding | null {
    const matches = this.bindings.filter(b => {
      const parsed = parseKeySequence(b.key);
      return matchesKey(parsed, event)
        && (!b.when || evaluateWhen(b.when, context));
    });

    if (matches.length === 0) return null;

    // 优先级排序：用户自定义 > 默认
    matches.sort(
      (a, b) => (b.priority || 0) - (a.priority || 0)
    );
    return matches[0];
  }
}

// vim/motions.ts: Vim 光标移动
const vimMotions: Record<string, VimMotion> = {
  h: { type: "char", direction: -1 },
  l: { type: "char", direction: 1 },
  j: { type: "line", direction: 1 },
  k: { type: "line", direction: -1 },
  w: { type: "word", direction: 1 },
  b: { type: "word", direction: -1 },
  "0": { type: "lineStart" },
  "$": { type: "lineEnd" }
};

// vim/operators.ts: Vim 操作符
const vimOperators: Record<string, VimOperator> = {
  d: {
    name: "delete",
    execute(range: TextRange, buffer: Buffer) {
      const deleted = buffer.getText(range);
      buffer.delete(range);
      return { register: deleted };
    }
  },
  c: {
    name: "change",
    execute(range: TextRange, buffer: Buffer) {
      const deleted = buffer.getText(range);
      buffer.delete(range);
      return {
        register: deleted,
        enterMode: "insert"
      };
    }
  },
  y: {
    name: "yank",
    execute(range: TextRange, buffer: Buffer) {
      return {
        register: buffer.getText(range)
      };
    }
  }
};

// vim/transitions.ts: 模式转换
type VimMode = "normal" | "insert" | "visual";

function handleVimTransition(
  currentMode: VimMode,
  key: string
): VimMode {
  if (currentMode === "normal" && key === "i")
    return "insert";
  if (currentMode === "normal" && key === "v")
    return "visual";
  if (currentMode === "insert" && key === "escape")
    return "normal";
  if (currentMode === "visual" && key === "escape")
    return "normal";
  return currentMode;
}