@xortex/xcode 3.0.1 → 3.0.2

package/ink/instances.ts

@@ -0,0 +1,10 @@
+// Store all instances of Ink (instance.js) to ensure that consecutive render() calls
+// use the same instance of Ink and don't create a new one
+//
+// This map has to be stored in a separate file, because render.js creates instances,
+// but instance.js should delete itself from the map on unmount
+
+import type Ink from './ink.js'
+
+const instances = new Map<NodeJS.WriteStream, Ink>()
+export default instances

package/ink/layout/engine.ts

@@ -0,0 +1,6 @@
+import type { LayoutNode } from './node.js'
+import { createYogaLayoutNode } from './yoga.js'
+
+export function createLayoutNode(): LayoutNode {
+  return createYogaLayoutNode()
+}

package/ink/layout/geometry.ts

@@ -0,0 +1,97 @@
+export type Point = {
+  x: number
+  y: number
+}
+
+export type Size = {
+  width: number
+  height: number
+}
+
+export type Rectangle = Point & Size
+
+/** Edge insets (padding, margin, border) */
+export type Edges = {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+/** Create uniform edges */
+export function edges(all: number): Edges
+export function edges(vertical: number, horizontal: number): Edges
+export function edges(
+  top: number,
+  right: number,
+  bottom: number,
+  left: number,
+): Edges
+export function edges(a: number, b?: number, c?: number, d?: number): Edges {
+  if (b === undefined) {
+    return { top: a, right: a, bottom: a, left: a }
+  }
+  if (c === undefined) {
+    return { top: a, right: b, bottom: a, left: b }
+  }
+  return { top: a, right: b, bottom: c, left: d! }
+}
+
+/** Add two edge values */
+export function addEdges(a: Edges, b: Edges): Edges {
+  return {
+    top: a.top + b.top,
+    right: a.right + b.right,
+    bottom: a.bottom + b.bottom,
+    left: a.left + b.left,
+  }
+}
+
+/** Zero edges constant */
+export const ZERO_EDGES: Edges = { top: 0, right: 0, bottom: 0, left: 0 }
+
+/** Convert partial edges to full edges with defaults */
+export function resolveEdges(partial?: Partial<Edges>): Edges {
+  return {
+    top: partial?.top ?? 0,
+    right: partial?.right ?? 0,
+    bottom: partial?.bottom ?? 0,
+    left: partial?.left ?? 0,
+  }
+}
+
+export function unionRect(a: Rectangle, b: Rectangle): Rectangle {
+  const minX = Math.min(a.x, b.x)
+  const minY = Math.min(a.y, b.y)
+  const maxX = Math.max(a.x + a.width, b.x + b.width)
+  const maxY = Math.max(a.y + a.height, b.y + b.height)
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+}
+
+export function clampRect(rect: Rectangle, size: Size): Rectangle {
+  const minX = Math.max(0, rect.x)
+  const minY = Math.max(0, rect.y)
+  const maxX = Math.min(size.width - 1, rect.x + rect.width - 1)
+  const maxY = Math.min(size.height - 1, rect.y + rect.height - 1)
+  return {
+    x: minX,
+    y: minY,
+    width: Math.max(0, maxX - minX + 1),
+    height: Math.max(0, maxY - minY + 1),
+  }
+}
+
+export function withinBounds(size: Size, point: Point): boolean {
+  return (
+    point.x >= 0 &&
+    point.y >= 0 &&
+    point.x < size.width &&
+    point.y < size.height
+  )
+}
+
+export function clamp(value: number, min?: number, max?: number): number {
+  if (min !== undefined && value < min) return min
+  if (max !== undefined && value > max) return max
+  return value
+}

package/ink/layout/node.ts

@@ -0,0 +1,152 @@
+// --
+// Adapter interface for the layout engine (Yoga)
+
+export const LayoutEdge = {
+  All: 'all',
+  Horizontal: 'horizontal',
+  Vertical: 'vertical',
+  Left: 'left',
+  Right: 'right',
+  Top: 'top',
+  Bottom: 'bottom',
+  Start: 'start',
+  End: 'end',
+} as const
+export type LayoutEdge = (typeof LayoutEdge)[keyof typeof LayoutEdge]
+
+export const LayoutGutter = {
+  All: 'all',
+  Column: 'column',
+  Row: 'row',
+} as const
+export type LayoutGutter = (typeof LayoutGutter)[keyof typeof LayoutGutter]
+
+export const LayoutDisplay = {
+  Flex: 'flex',
+  None: 'none',
+} as const
+export type LayoutDisplay = (typeof LayoutDisplay)[keyof typeof LayoutDisplay]
+
+export const LayoutFlexDirection = {
+  Row: 'row',
+  RowReverse: 'row-reverse',
+  Column: 'column',
+  ColumnReverse: 'column-reverse',
+} as const
+export type LayoutFlexDirection =
+  (typeof LayoutFlexDirection)[keyof typeof LayoutFlexDirection]
+
+export const LayoutAlign = {
+  Auto: 'auto',
+  Stretch: 'stretch',
+  FlexStart: 'flex-start',
+  Center: 'center',
+  FlexEnd: 'flex-end',
+} as const
+export type LayoutAlign = (typeof LayoutAlign)[keyof typeof LayoutAlign]
+
+export const LayoutJustify = {
+  FlexStart: 'flex-start',
+  Center: 'center',
+  FlexEnd: 'flex-end',
+  SpaceBetween: 'space-between',
+  SpaceAround: 'space-around',
+  SpaceEvenly: 'space-evenly',
+} as const
+export type LayoutJustify = (typeof LayoutJustify)[keyof typeof LayoutJustify]
+
+export const LayoutWrap = {
+  NoWrap: 'nowrap',
+  Wrap: 'wrap',
+  WrapReverse: 'wrap-reverse',
+} as const
+export type LayoutWrap = (typeof LayoutWrap)[keyof typeof LayoutWrap]
+
+export const LayoutPositionType = {
+  Relative: 'relative',
+  Absolute: 'absolute',
+} as const
+export type LayoutPositionType =
+  (typeof LayoutPositionType)[keyof typeof LayoutPositionType]
+
+export const LayoutOverflow = {
+  Visible: 'visible',
+  Hidden: 'hidden',
+  Scroll: 'scroll',
+} as const
+export type LayoutOverflow =
+  (typeof LayoutOverflow)[keyof typeof LayoutOverflow]
+
+export type LayoutMeasureFunc = (
+  width: number,
+  widthMode: LayoutMeasureMode,
+) => { width: number; height: number }
+
+export const LayoutMeasureMode = {
+  Undefined: 'undefined',
+  Exactly: 'exactly',
+  AtMost: 'at-most',
+} as const
+export type LayoutMeasureMode =
+  (typeof LayoutMeasureMode)[keyof typeof LayoutMeasureMode]
+
+export type LayoutNode = {
+  // Tree
+  insertChild(child: LayoutNode, index: number): void
+  removeChild(child: LayoutNode): void
+  getChildCount(): number
+  getParent(): LayoutNode | null
+
+  // Layout computation
+  calculateLayout(width?: number, height?: number): void
+  setMeasureFunc(fn: LayoutMeasureFunc): void
+  unsetMeasureFunc(): void
+  markDirty(): void
+
+  // Layout reading (post-layout)
+  getComputedLeft(): number
+  getComputedTop(): number
+  getComputedWidth(): number
+  getComputedHeight(): number
+  getComputedBorder(edge: LayoutEdge): number
+  getComputedPadding(edge: LayoutEdge): number
+
+  // Style setters
+  setWidth(value: number): void
+  setWidthPercent(value: number): void
+  setWidthAuto(): void
+  setHeight(value: number): void
+  setHeightPercent(value: number): void
+  setHeightAuto(): void
+  setMinWidth(value: number): void
+  setMinWidthPercent(value: number): void
+  setMinHeight(value: number): void
+  setMinHeightPercent(value: number): void
+  setMaxWidth(value: number): void
+  setMaxWidthPercent(value: number): void
+  setMaxHeight(value: number): void
+  setMaxHeightPercent(value: number): void
+  setFlexDirection(dir: LayoutFlexDirection): void
+  setFlexGrow(value: number): void
+  setFlexShrink(value: number): void
+  setFlexBasis(value: number): void
+  setFlexBasisPercent(value: number): void
+  setFlexWrap(wrap: LayoutWrap): void
+  setAlignItems(align: LayoutAlign): void
+  setAlignSelf(align: LayoutAlign): void
+  setJustifyContent(justify: LayoutJustify): void
+  setDisplay(display: LayoutDisplay): void
+  getDisplay(): LayoutDisplay
+  setPositionType(type: LayoutPositionType): void
+  setPosition(edge: LayoutEdge, value: number): void
+  setPositionPercent(edge: LayoutEdge, value: number): void
+  setOverflow(overflow: LayoutOverflow): void
+  setMargin(edge: LayoutEdge, value: number): void
+  setPadding(edge: LayoutEdge, value: number): void
+  setBorder(edge: LayoutEdge, value: number): void
+  setGap(gutter: LayoutGutter, value: number): void
+
+  // Lifecycle
+  free(): void
+  freeRecursive(): void
+}

package/ink/layout/yoga.ts

@@ -0,0 +1,308 @@
+import Yoga, {
+  Align,
+  Direction,
+  Display,
+  Edge,
+  FlexDirection,
+  Gutter,
+  Justify,
+  MeasureMode,
+  Overflow,
+  PositionType,
+  Wrap,
+  type Node as YogaNode,
+} from 'src/native-ts/yoga-layout/index.js'
+import {
+  type LayoutAlign,
+  LayoutDisplay,
+  type LayoutEdge,
+  type LayoutFlexDirection,
+  type LayoutGutter,
+  type LayoutJustify,
+  type LayoutMeasureFunc,
+  LayoutMeasureMode,
+  type LayoutNode,
+  type LayoutOverflow,
+  type LayoutPositionType,
+  type LayoutWrap,
+} from './node.js'
+
+// --
+// Edge/Gutter mapping
+
+const EDGE_MAP: Record<LayoutEdge, Edge> = {
+  all: Edge.All,
+  horizontal: Edge.Horizontal,
+  vertical: Edge.Vertical,
+  left: Edge.Left,
+  right: Edge.Right,
+  top: Edge.Top,
+  bottom: Edge.Bottom,
+  start: Edge.Start,
+  end: Edge.End,
+}
+
+const GUTTER_MAP: Record<LayoutGutter, Gutter> = {
+  all: Gutter.All,
+  column: Gutter.Column,
+  row: Gutter.Row,
+}
+
+// --
+// Yoga adapter
+
+export class YogaLayoutNode implements LayoutNode {
+  readonly yoga: YogaNode
+
+  constructor(yoga: YogaNode) {
+    this.yoga = yoga
+  }
+
+  // Tree
+
+  insertChild(child: LayoutNode, index: number): void {
+    this.yoga.insertChild((child as YogaLayoutNode).yoga, index)
+  }
+
+  removeChild(child: LayoutNode): void {
+    this.yoga.removeChild((child as YogaLayoutNode).yoga)
+  }
+
+  getChildCount(): number {
+    return this.yoga.getChildCount()
+  }
+
+  getParent(): LayoutNode | null {
+    const p = this.yoga.getParent()
+    return p ? new YogaLayoutNode(p) : null
+  }
+
+  // Layout
+
+  calculateLayout(width?: number, _height?: number): void {
+    this.yoga.calculateLayout(width, undefined, Direction.LTR)
+  }
+
+  setMeasureFunc(fn: LayoutMeasureFunc): void {
+    this.yoga.setMeasureFunc((w, wMode) => {
+      const mode =
+        wMode === MeasureMode.Exactly
+          ? LayoutMeasureMode.Exactly
+          : wMode === MeasureMode.AtMost
+            ? LayoutMeasureMode.AtMost
+            : LayoutMeasureMode.Undefined
+      return fn(w, mode)
+    })
+  }
+
+  unsetMeasureFunc(): void {
+    this.yoga.unsetMeasureFunc()
+  }
+
+  markDirty(): void {
+    this.yoga.markDirty()
+  }
+
+  // Computed layout
+
+  getComputedLeft(): number {
+    return this.yoga.getComputedLeft()
+  }
+
+  getComputedTop(): number {
+    return this.yoga.getComputedTop()
+  }
+
+  getComputedWidth(): number {
+    return this.yoga.getComputedWidth()
+  }
+
+  getComputedHeight(): number {
+    return this.yoga.getComputedHeight()
+  }
+
+  getComputedBorder(edge: LayoutEdge): number {
+    return this.yoga.getComputedBorder(EDGE_MAP[edge]!)
+  }
+
+  getComputedPadding(edge: LayoutEdge): number {
+    return this.yoga.getComputedPadding(EDGE_MAP[edge]!)
+  }
+
+  // Style setters
+
+  setWidth(value: number): void {
+    this.yoga.setWidth(value)
+  }
+  setWidthPercent(value: number): void {
+    this.yoga.setWidthPercent(value)
+  }
+  setWidthAuto(): void {
+    this.yoga.setWidthAuto()
+  }
+  setHeight(value: number): void {
+    this.yoga.setHeight(value)
+  }
+  setHeightPercent(value: number): void {
+    this.yoga.setHeightPercent(value)
+  }
+  setHeightAuto(): void {
+    this.yoga.setHeightAuto()
+  }
+  setMinWidth(value: number): void {
+    this.yoga.setMinWidth(value)
+  }
+  setMinWidthPercent(value: number): void {
+    this.yoga.setMinWidthPercent(value)
+  }
+  setMinHeight(value: number): void {
+    this.yoga.setMinHeight(value)
+  }
+  setMinHeightPercent(value: number): void {
+    this.yoga.setMinHeightPercent(value)
+  }
+  setMaxWidth(value: number): void {
+    this.yoga.setMaxWidth(value)
+  }
+  setMaxWidthPercent(value: number): void {
+    this.yoga.setMaxWidthPercent(value)
+  }
+  setMaxHeight(value: number): void {
+    this.yoga.setMaxHeight(value)
+  }
+  setMaxHeightPercent(value: number): void {
+    this.yoga.setMaxHeightPercent(value)
+  }
+
+  setFlexDirection(dir: LayoutFlexDirection): void {
+    const map: Record<LayoutFlexDirection, FlexDirection> = {
+      row: FlexDirection.Row,
+      'row-reverse': FlexDirection.RowReverse,
+      column: FlexDirection.Column,
+      'column-reverse': FlexDirection.ColumnReverse,
+    }
+    this.yoga.setFlexDirection(map[dir]!)
+  }
+
+  setFlexGrow(value: number): void {
+    this.yoga.setFlexGrow(value)
+  }
+  setFlexShrink(value: number): void {
+    this.yoga.setFlexShrink(value)
+  }
+  setFlexBasis(value: number): void {
+    this.yoga.setFlexBasis(value)
+  }
+  setFlexBasisPercent(value: number): void {
+    this.yoga.setFlexBasisPercent(value)
+  }
+
+  setFlexWrap(wrap: LayoutWrap): void {
+    const map: Record<LayoutWrap, Wrap> = {
+      nowrap: Wrap.NoWrap,
+      wrap: Wrap.Wrap,
+      'wrap-reverse': Wrap.WrapReverse,
+    }
+    this.yoga.setFlexWrap(map[wrap]!)
+  }
+
+  setAlignItems(align: LayoutAlign): void {
+    const map: Record<LayoutAlign, Align> = {
+      auto: Align.Auto,
+      stretch: Align.Stretch,
+      'flex-start': Align.FlexStart,
+      center: Align.Center,
+      'flex-end': Align.FlexEnd,
+    }
+    this.yoga.setAlignItems(map[align]!)
+  }
+
+  setAlignSelf(align: LayoutAlign): void {
+    const map: Record<LayoutAlign, Align> = {
+      auto: Align.Auto,
+      stretch: Align.Stretch,
+      'flex-start': Align.FlexStart,
+      center: Align.Center,
+      'flex-end': Align.FlexEnd,
+    }
+    this.yoga.setAlignSelf(map[align]!)
+  }
+
+  setJustifyContent(justify: LayoutJustify): void {
+    const map: Record<LayoutJustify, Justify> = {
+      'flex-start': Justify.FlexStart,
+      center: Justify.Center,
+      'flex-end': Justify.FlexEnd,
+      'space-between': Justify.SpaceBetween,
+      'space-around': Justify.SpaceAround,
+      'space-evenly': Justify.SpaceEvenly,
+    }
+    this.yoga.setJustifyContent(map[justify]!)
+  }
+
+  setDisplay(display: LayoutDisplay): void {
+    this.yoga.setDisplay(display === 'flex' ? Display.Flex : Display.None)
+  }
+
+  getDisplay(): LayoutDisplay {
+    return this.yoga.getDisplay() === Display.None
+      ? LayoutDisplay.None
+      : LayoutDisplay.Flex
+  }
+
+  setPositionType(type: LayoutPositionType): void {
+    this.yoga.setPositionType(
+      type === 'absolute' ? PositionType.Absolute : PositionType.Relative,
+    )
+  }
+
+  setPosition(edge: LayoutEdge, value: number): void {
+    this.yoga.setPosition(EDGE_MAP[edge]!, value)
+  }
+
+  setPositionPercent(edge: LayoutEdge, value: number): void {
+    this.yoga.setPositionPercent(EDGE_MAP[edge]!, value)
+  }
+
+  setOverflow(overflow: LayoutOverflow): void {
+    const map: Record<LayoutOverflow, Overflow> = {
+      visible: Overflow.Visible,
+      hidden: Overflow.Hidden,
+      scroll: Overflow.Scroll,
+    }
+    this.yoga.setOverflow(map[overflow]!)
+  }
+
+  setMargin(edge: LayoutEdge, value: number): void {
+    this.yoga.setMargin(EDGE_MAP[edge]!, value)
+  }
+  setPadding(edge: LayoutEdge, value: number): void {
+    this.yoga.setPadding(EDGE_MAP[edge]!, value)
+  }
+  setBorder(edge: LayoutEdge, value: number): void {
+    this.yoga.setBorder(EDGE_MAP[edge]!, value)
+  }
+  setGap(gutter: LayoutGutter, value: number): void {
+    this.yoga.setGap(GUTTER_MAP[gutter]!, value)
+  }
+
+  // Lifecycle
+
+  free(): void {
+    this.yoga.free()
+  }
+  freeRecursive(): void {
+    this.yoga.freeRecursive()
+  }
+}
+
+// --
+// Instance management
+//
+// The TS yoga-layout port is synchronous — no WASM loading, no linear memory
+// growth, so no preload/swap/reset machinery is needed. The Yoga instance is
+// just a plain JS object available at import time.
+
+export function createYogaLayoutNode(): LayoutNode {
+  return new YogaLayoutNode(Yoga.Node.create())
+}

package/ink/line-width-cache.ts

@@ -0,0 +1,24 @@
+import { stringWidth } from './stringWidth.js'
+
+// During streaming, text grows but completed lines are immutable.
+// Caching stringWidth per-line avoids re-measuring hundreds of
+// unchanged lines on every token (~50x reduction in stringWidth calls).
+const cache = new Map<string, number>()
+
+const MAX_CACHE_SIZE = 4096
+
+export function lineWidth(line: string): number {
+  const cached = cache.get(line)
+  if (cached !== undefined) return cached
+
+  const width = stringWidth(line)
+
+  // Evict when cache grows too large (e.g. after many different responses).
+  // Simple full-clear is fine — the cache repopulates in one frame.
+  if (cache.size >= MAX_CACHE_SIZE) {
+    cache.clear()
+  }
+
+  cache.set(line, width)
+  return width
+}