zerg-ztc 0.1.0

package/src/ui/core/input_segments.ts

@@ -0,0 +1,375 @@
+import { InputSegment, InputCursor, InputState } from './input_state.js';
+
+export const PASTE_BADGE_THRESHOLD = 4;
+
+export function normalizeSegments(segments: InputSegment[]): InputSegment[] {
+  const normalized: InputSegment[] = [];
+  for (const segment of segments) {
+    if (segment.type === 'text') {
+      if (segment.text.length === 0) continue;
+      const last = normalized[normalized.length - 1];
+      if (last && last.type === 'text') {
+        last.text += segment.text;
+        continue;
+      }
+    }
+    normalized.push({ ...segment });
+  }
+  return normalized;
+}
+
+export function clampCursor(segments: InputSegment[], cursor: InputCursor): InputCursor {
+  const maxIndex = segments.length;
+  let index = Math.max(0, Math.min(cursor.index, maxIndex));
+  let offset = cursor.offset;
+  if (index === segments.length) {
+    return { index, offset: 0 };
+  }
+  const segment = segments[index];
+  if (!segment) return { index, offset: 0 };
+  if (segment.type === 'text') {
+    offset = Math.max(0, Math.min(offset, segment.text.length));
+    return { index, offset };
+  }
+  return { index, offset: offset > 0 ? 1 : 0 };
+}
+
+export function insertText(state: InputState, text: string): InputState {
+  if (text.length === 0) return state;
+  const segments = [...state.segments];
+  const cursor = clampCursor(segments, state.cursor);
+
+  if (cursor.index === segments.length) {
+    const last = segments[segments.length - 1];
+    if (last && last.type === 'text') {
+      last.text += text;
+    } else {
+      segments.push({ type: 'text', text });
+    }
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: segments.length - 1, offset: (segments[segments.length - 1] as any).text.length }
+    };
+  }
+
+  const segment = segments[cursor.index];
+  if (segment.type === 'text') {
+    const before = segment.text.slice(0, cursor.offset);
+    const after = segment.text.slice(cursor.offset);
+    segment.text = before + text + after;
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: cursor.index, offset: cursor.offset + text.length }
+    };
+  }
+
+  const insertIndex = cursor.offset === 0 ? cursor.index : cursor.index + 1;
+  segments.splice(insertIndex, 0, { type: 'text', text });
+  return {
+    ...state,
+    segments: normalizeSegments(segments),
+    cursor: { index: insertIndex, offset: text.length }
+  };
+}
+
+export function insertSegment(state: InputState, segment: InputSegment): InputState {
+  const segments = [...state.segments];
+  const cursor = clampCursor(segments, state.cursor);
+  const insertIndex = cursor.index === segments.length
+    ? segments.length
+    : (cursor.offset === 0 ? cursor.index : cursor.index + 1);
+  segments.splice(insertIndex, 0, segment);
+  return {
+    ...state,
+    segments: normalizeSegments(segments),
+    cursor: { index: insertIndex, offset: segment.type === 'text' ? segment.text.length : 1 }
+  };
+}
+
+export function insertBadge(state: InputState, segment: InputSegment): InputState {
+  const next = insertSegment(state, segment);
+  return insertText(next, ' ');
+}
+
+export function backspace(state: InputState): InputState {
+  const segments = [...state.segments];
+  const cursor = clampCursor(segments, state.cursor);
+
+  if (cursor.index === segments.length) {
+    if (segments.length === 0) return state;
+    const last = segments[segments.length - 1];
+    if (last.type === 'text' && last.text.length > 0) {
+      last.text = last.text.slice(0, -1);
+      return {
+        ...state,
+        segments: normalizeSegments(segments),
+        cursor: { index: segments.length - 1, offset: last.text.length }
+      };
+    }
+    segments.pop();
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: Math.max(0, segments.length - 1), offset: 0 }
+    };
+  }
+
+  const segment = segments[cursor.index];
+  if (segment.type === 'text') {
+    if (cursor.offset > 0) {
+      segment.text = segment.text.slice(0, cursor.offset - 1) + segment.text.slice(cursor.offset);
+      return {
+        ...state,
+        segments: normalizeSegments(segments),
+        cursor: { index: cursor.index, offset: cursor.offset - 1 }
+      };
+    }
+    if (cursor.index === 0) return state;
+    const prev = segments[cursor.index - 1];
+    if (prev.type === 'text') {
+      const prevLen = prev.text.length;
+      prev.text += segment.text;
+      segments.splice(cursor.index, 1);
+      return {
+        ...state,
+        segments: normalizeSegments(segments),
+        cursor: { index: cursor.index - 1, offset: prevLen }
+      };
+    }
+    segments.splice(cursor.index - 1, 1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: cursor.index - 1, offset: 0 }
+    };
+  }
+
+  if (cursor.offset === 1) {
+    segments.splice(cursor.index, 1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: Math.max(0, cursor.index - 1), offset: 0 }
+    };
+  }
+
+  if (cursor.index === 0) return state;
+  const prev = segments[cursor.index - 1];
+  if (prev.type === 'text') {
+    const prevLen = prev.text.length;
+    prev.text = prev.text.slice(0, -1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: cursor.index - 1, offset: Math.max(0, prevLen - 1) }
+    };
+  }
+  segments.splice(cursor.index - 1, 1);
+  return {
+    ...state,
+    segments: normalizeSegments(segments),
+    cursor: { index: cursor.index - 1, offset: 0 }
+  };
+}
+
+export function deleteForward(state: InputState): InputState {
+  const segments = [...state.segments];
+  const cursor = clampCursor(segments, state.cursor);
+
+  if (cursor.index === segments.length) return state;
+
+  const segment = segments[cursor.index];
+  if (segment.type === 'text') {
+    if (cursor.offset < segment.text.length) {
+      segment.text = segment.text.slice(0, cursor.offset) + segment.text.slice(cursor.offset + 1);
+      return {
+        ...state,
+        segments: normalizeSegments(segments),
+        cursor
+      };
+    }
+    if (cursor.index + 1 >= segments.length) return state;
+    const next = segments[cursor.index + 1];
+    if (next.type === 'text') {
+      segment.text += next.text;
+      segments.splice(cursor.index + 1, 1);
+      return {
+        ...state,
+        segments: normalizeSegments(segments),
+        cursor
+      };
+    }
+    segments.splice(cursor.index + 1, 1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor
+    };
+  }
+
+  if (cursor.offset === 0) {
+    segments.splice(cursor.index, 1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: Math.min(cursor.index, segments.length), offset: 0 }
+    };
+  }
+
+  if (cursor.index + 1 >= segments.length) return state;
+  const next = segments[cursor.index + 1];
+  if (next.type === 'text') {
+    next.text = next.text.slice(1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: cursor.index + 1, offset: 0 }
+    };
+  }
+  segments.splice(cursor.index + 1, 1);
+  return {
+    ...state,
+    segments: normalizeSegments(segments),
+    cursor: { index: cursor.index + 1, offset: 0 }
+  };
+}
+
+export function moveLeft(state: InputState): InputState {
+  const segments = state.segments;
+  const cursor = clampCursor(segments, state.cursor);
+  if (cursor.index === segments.length) {
+    if (segments.length === 0) return state;
+    const last = segments[segments.length - 1];
+    if (last.type === 'text') {
+      return { ...state, cursor: { index: segments.length - 1, offset: last.text.length } };
+    }
+    return { ...state, cursor: { index: segments.length - 1, offset: 1 } };
+  }
+  const segment = segments[cursor.index];
+  if (segment.type === 'text') {
+    if (cursor.offset > 0) return { ...state, cursor: { index: cursor.index, offset: cursor.offset - 1 } };
+  } else if (cursor.offset === 1) {
+    return { ...state, cursor: { index: cursor.index, offset: 0 } };
+  }
+  if (cursor.index === 0) return state;
+  const prev = segments[cursor.index - 1];
+  if (prev.type === 'text') {
+    return { ...state, cursor: { index: cursor.index - 1, offset: prev.text.length } };
+  }
+  return { ...state, cursor: { index: cursor.index - 1, offset: 1 } };
+}
+
+export function moveRight(state: InputState): InputState {
+  const segments = state.segments;
+  const cursor = clampCursor(segments, state.cursor);
+  if (cursor.index === segments.length) return state;
+  const segment = segments[cursor.index];
+  if (segment.type === 'text') {
+    if (cursor.offset < segment.text.length) {
+      return { ...state, cursor: { index: cursor.index, offset: cursor.offset + 1 } };
+    }
+  } else if (cursor.offset === 0) {
+    return { ...state, cursor: { index: cursor.index, offset: 1 } };
+  }
+  if (cursor.index + 1 >= segments.length) {
+    return { ...state, cursor: { index: segments.length, offset: 0 } };
+  }
+  const next = segments[cursor.index + 1];
+  if (next.type === 'text') {
+    return { ...state, cursor: { index: cursor.index + 1, offset: 0 } };
+  }
+  return { ...state, cursor: { index: cursor.index + 1, offset: 0 } };
+}
+
+export function moveWordLeft(state: InputState): InputState {
+  const text = getPlainText(state.segments);
+  if (text.length === 0) return state;
+  const pos = Math.max(0, textCursorIndex(state.segments, state.cursor));
+  const before = text.slice(0, pos);
+  const match = before.match(/\S+\s*$/);
+  const nextPos = match ? pos - match[0].length : 0;
+  return { ...state, cursor: cursorFromTextIndex(state.segments, nextPos) };
+}
+
+export function moveWordRight(state: InputState): InputState {
+  const text = getPlainText(state.segments);
+  const pos = Math.max(0, textCursorIndex(state.segments, state.cursor));
+  const after = text.slice(pos);
+  const match = after.match(/^\s*\S+/);
+  const nextPos = match ? pos + match[0].length : text.length;
+  return { ...state, cursor: cursorFromTextIndex(state.segments, nextPos) };
+}
+
+export function textCursorIndex(segments: InputSegment[], cursor: InputCursor): number {
+  let index = 0;
+  for (let i = 0; i < segments.length; i += 1) {
+    const segment = segments[i];
+    if (i === cursor.index) {
+      if (segment.type === 'text') return index + cursor.offset;
+      return index;
+    }
+    if (segment.type === 'text') index += segment.text.length;
+  }
+  return index;
+}
+
+export function cursorFromTextIndex(segments: InputSegment[], pos: number): InputCursor {
+  let index = 0;
+  for (let i = 0; i < segments.length; i += 1) {
+    const segment = segments[i];
+    if (segment.type !== 'text') continue;
+    const next = index + segment.text.length;
+    if (pos <= next) {
+      return { index: i, offset: Math.max(0, pos - index) };
+    }
+    index = next;
+  }
+  return { index: segments.length, offset: 0 };
+}
+
+export function getPlainText(segments: InputSegment[]): string {
+  return segments.map(segment => {
+    switch (segment.type) {
+      case 'text':
+        return segment.text;
+      case 'paste':
+        return segment.text;
+      case 'file':
+        return segment.path;
+      case 'image':
+        return segment.path;
+      default:
+        return '';
+    }
+  }).join('');
+}
+
+export function serializeSegments(segments: InputSegment[]): string {
+  return segments.map(segment => {
+    switch (segment.type) {
+      case 'text':
+        return segment.text;
+      case 'paste': {
+        const lines = segment.text.split('\n').length;
+        return `\n[pasted ${lines} line${lines === 1 ? '' : 's'}]\n${segment.text}\n[/pasted]\n`;
+      }
+      case 'file':
+        return `\n[file ${segment.path}]\n`;
+      case 'image':
+        return `\n[image ${segment.path}]\n`;
+      default:
+        return '';
+    }
+  }).join('');
+}
+
+export function createEmptyState(): InputState {
+  return {
+    segments: [],
+    cursor: { index: 0, offset: 0 },
+    history: [],
+    historyIdx: -1
+  };
+}

package/src/ui/core/input_state.ts

@@ -0,0 +1,17 @@
+export type InputSegment =
+  | { type: 'text'; text: string }
+  | { type: 'paste'; text: string }
+  | { type: 'file'; path: string }
+  | { type: 'image'; path: string };
+
+export interface InputCursor {
+  index: number;
+  offset: number;
+}
+
+export interface InputState {
+  segments: InputSegment[];
+  cursor: InputCursor;
+  history: string[];
+  historyIdx: number;
+}

package/src/ui/core/layout_yoga.ts

@@ -0,0 +1,122 @@
+import Yoga, { Node } from 'yoga-layout';
+import { LayoutNode, Style, TextNode } from './types.js';
+
+export interface LayoutFrame {
+  node: LayoutNode;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  children: LayoutFrame[];
+}
+
+function applyStyle(node: Node, style?: Style): void {
+  if (!style) return;
+
+  if (style.flexDirection) {
+    node.setFlexDirection(
+      style.flexDirection === 'row' ? Yoga.FLEX_DIRECTION_ROW : Yoga.FLEX_DIRECTION_COLUMN
+    );
+  }
+  if (style.flexGrow !== undefined) node.setFlexGrow(style.flexGrow);
+  if (style.flexShrink !== undefined) node.setFlexShrink(style.flexShrink);
+  if (style.width !== undefined) node.setWidth(style.width);
+  if (style.height !== undefined) node.setHeight(style.height);
+  if (style.alignItems) {
+    const map = {
+      'flex-start': Yoga.ALIGN_FLEX_START,
+      'center': Yoga.ALIGN_CENTER,
+      'flex-end': Yoga.ALIGN_FLEX_END,
+      'stretch': Yoga.ALIGN_STRETCH
+    } as const;
+    node.setAlignItems(map[style.alignItems]);
+  }
+  if (style.justifyContent) {
+    const map = {
+      'flex-start': Yoga.JUSTIFY_FLEX_START,
+      'center': Yoga.JUSTIFY_CENTER,
+      'flex-end': Yoga.JUSTIFY_FLEX_END,
+      'space-between': Yoga.JUSTIFY_SPACE_BETWEEN
+    } as const;
+    node.setJustifyContent(map[style.justifyContent]);
+  }
+
+  const paddingX = style.paddingX ?? style.padding ?? 0;
+  const paddingY = style.paddingY ?? style.padding ?? 0;
+  const marginX = style.marginX ?? style.margin ?? 0;
+  const marginY = style.marginY ?? style.margin ?? 0;
+
+  node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft ?? paddingX);
+  node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight ?? paddingX);
+  node.setPadding(Yoga.EDGE_TOP, style.paddingTop ?? paddingY);
+  node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom ?? paddingY);
+
+  node.setMargin(Yoga.EDGE_LEFT, style.marginLeft ?? marginX);
+  node.setMargin(Yoga.EDGE_RIGHT, style.marginRight ?? marginX);
+  node.setMargin(Yoga.EDGE_TOP, style.marginTop ?? marginY);
+  node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom ?? marginY);
+}
+
+function measureText(node: TextNode, width?: number): { width: number; height: number } {
+  const text = node.text || '';
+  const wrap = node.style?.wrap ?? 'wrap';
+  if (!width || width <= 0) {
+    return { width: text.length, height: 1 };
+  }
+
+  if (wrap === 'truncate-end') {
+    return { width: Math.min(text.length, width), height: 1 };
+  }
+
+  const lines = Math.max(1, Math.ceil(text.length / width));
+  const lineWidth = Math.min(text.length, width);
+  return { width: lineWidth, height: lines };
+}
+
+function buildYogaTree(node: LayoutNode): Node {
+  const yogaNode = Yoga.Node.create();
+  applyStyle(yogaNode, node.type === 'box' ? node.style : undefined);
+
+  if (node.type === 'text') {
+    yogaNode.setMeasureFunc((width, widthMode) => {
+      const availableWidth = widthMode === Yoga.MEASURE_MODE_UNDEFINED ? undefined : width;
+      const measured = measureText(node, availableWidth);
+      return { width: measured.width, height: measured.height };
+    });
+  } else {
+    for (const child of node.children) {
+      yogaNode.insertChild(buildYogaTree(child), yogaNode.getChildCount());
+    }
+  }
+
+  return yogaNode;
+}
+
+function buildFrameTree(node: LayoutNode, yogaNode: Node): LayoutFrame {
+  const children: LayoutFrame[] = [];
+  if (node.type === 'box') {
+    for (let i = 0; i < node.children.length; i += 1) {
+      children.push(buildFrameTree(node.children[i], yogaNode.getChild(i)));
+    }
+  }
+
+  return {
+    node,
+    x: yogaNode.getComputedLeft(),
+    y: yogaNode.getComputedTop(),
+    width: yogaNode.getComputedWidth(),
+    height: yogaNode.getComputedHeight(),
+    children
+  };
+}
+
+export function computeLayout(root: LayoutNode, width: number, height: number): LayoutFrame {
+  const yogaRoot = buildYogaTree(root);
+  yogaRoot.setWidth(width);
+  yogaRoot.setHeight(height);
+  yogaRoot.calculateLayout(width, height, Yoga.DIRECTION_LTR);
+
+  const frame = buildFrameTree(root, yogaRoot);
+  yogaRoot.freeRecursive();
+  return frame;
+}

package/src/ui/core/style.ts

@@ -0,0 +1,38 @@
+import { Style } from './types.js';
+
+export function toCssStyle(style?: Style): Record<string, string | number> {
+  if (!style) return {};
+
+  const paddingX = style.paddingX ?? style.padding ?? 0;
+  const paddingY = style.paddingY ?? style.padding ?? 0;
+  const marginX = style.marginX ?? style.margin ?? 0;
+  const marginY = style.marginY ?? style.margin ?? 0;
+
+  const css: Record<string, string | number> = {
+    display: 'flex',
+    flexDirection: style.flexDirection || 'column',
+    flexGrow: style.flexGrow ?? 0,
+    flexShrink: style.flexShrink ?? 0,
+    paddingLeft: style.paddingLeft ?? paddingX,
+    paddingRight: style.paddingRight ?? paddingX,
+    paddingTop: style.paddingTop ?? paddingY,
+    paddingBottom: style.paddingBottom ?? paddingY,
+    marginLeft: style.marginLeft ?? marginX,
+    marginRight: style.marginRight ?? marginX,
+    marginTop: style.marginTop ?? marginY,
+    marginBottom: style.marginBottom ?? marginY
+  };
+
+  if (style.alignItems) css.alignItems = style.alignItems;
+  if (style.justifyContent) css.justifyContent = style.justifyContent;
+
+  if (style.width !== undefined) css.width = style.width;
+  if (style.height !== undefined) css.height = style.height;
+  if (style.borderStyle) {
+    css.borderStyle = style.borderStyle;
+    css.borderWidth = 1;
+    css.borderColor = style.borderColor || 'currentColor';
+  }
+
+  return css;
+}

package/src/ui/core/types.ts

@@ -0,0 +1,53 @@
+export type LayoutNode = BoxNode | TextNode;
+
+export interface Style {
+  flexDirection?: 'row' | 'column';
+  flexGrow?: number;
+  flexShrink?: number;
+  width?: number;
+  height?: number;
+  padding?: number;
+  paddingX?: number;
+  paddingY?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  margin?: number;
+  marginX?: number;
+  marginY?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between';
+  borderStyle?: string;
+  borderColor?: string;
+}
+
+export interface TextStyle {
+  color?: string;
+  dimColor?: boolean;
+  bold?: boolean;
+  inverse?: boolean;
+  wrap?: 'wrap' | 'truncate-end';
+  badge?: {
+    type: 'paste' | 'file' | 'image';
+    preview: string;
+    full: string;
+    path?: string;
+  };
+}
+
+export interface BoxNode {
+  type: 'box';
+  style?: Style;
+  children: LayoutNode[];
+}
+
+export interface TextNode {
+  type: 'text';
+  text: string;
+  style?: TextStyle;
+}

package/src/ui/ink/index.tsx

@@ -0,0 +1 @@
+export { InkNode } from './render.js';

package/src/ui/ink/render.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box, Text, type BoxProps } from 'ink';
+import { LayoutNode, TextNode } from '../core/types.js';
+
+function renderText(node: TextNode): React.ReactElement {
+  const style = node.style || {};
+  return (
+    <Text
+      color={style.color}
+      dimColor={style.dimColor}
+      bold={style.bold}
+      inverse={style.inverse}
+      wrap={style.wrap}
+    >
+      {node.text}
+    </Text>
+  );
+}
+
+export function InkNode({ node }: { node: LayoutNode }): React.ReactElement {
+  if (node.type === 'text') {
+    return renderText(node);
+  }
+
+  const style = node.style || {};
+  return (
+    <Box
+      flexDirection={style.flexDirection}
+      flexGrow={style.flexGrow}
+      flexShrink={style.flexShrink}
+      width={style.width}
+      height={style.height}
+      padding={style.padding}
+      paddingX={style.paddingX}
+      paddingY={style.paddingY}
+      margin={style.margin}
+      marginX={style.marginX}
+      marginY={style.marginY}
+      alignItems={style.alignItems}
+      justifyContent={style.justifyContent}
+      borderStyle={style.borderStyle as BoxProps['borderStyle']}
+      borderColor={style.borderColor}
+    >
+      {node.children.map((child, index) => (
+        <InkNode key={`${child.type}-${index}`} node={child} />
+      ))}
+    </Box>
+  );
+}