@gridland/web 0.2.16 → 0.2.17

package/src/core-shims/index.ts

@@ -0,0 +1,269 @@
+// Core shims barrel — aliased as @opentui/core by Vite
+// Re-exports portable code from opentui and swaps in browser replacements.
+// Vite aliases intercept zig, buffer, text-buffer, text-buffer-view,
+// syntax-style, renderer, console, etc. before they reach the filesystem.
+
+// ─── Pure TS re-exports ───────────────────────────────────────────────────
+
+// RGBA and color utilities (our own copy to avoid pulling in opentui's lib/index)
+export { RGBA, parseColor, hexToRgb, rgbToHex, hsvToRgb } from "./rgba"
+export type { ColorInput } from "./rgba"
+
+// Types
+export {
+  TextAttributes,
+  ATTRIBUTE_BASE_BITS,
+  ATTRIBUTE_BASE_MASK,
+  getBaseAttributes,
+  DebugOverlayCorner,
+} from "./types"
+export type {
+  RenderContext,
+  ThemeMode,
+  CursorStyle,
+  CursorStyleOptions,
+  MousePointerStyle,
+  WidthMethod,
+  Timeout,
+  ViewportBounds,
+  Highlight,
+  LineInfo,
+  LineInfoProvider,
+  CapturedSpan,
+  CapturedLine,
+  CapturedFrame,
+} from "./types"
+
+// ─── Re-exports from opentui source (Vite intercepts Zig deps) ───────────
+
+// Renderable base classes (needed by our own code — main.tsx uses RootRenderable)
+// NOTE: The opentui react package imports from the real opentui barrel instead
+// (redirected by the Vite plugin) to avoid cross-barrel circular dependency issues.
+export {
+  Renderable,
+  BaseRenderable,
+  RootRenderable,
+  LayoutEvents,
+  RenderableEvents,
+  isRenderable,
+} from "../../../../opentui/packages/core/src/Renderable"
+export type {
+  RenderableOptions,
+  LayoutOptions,
+  BaseRenderableOptions,
+  Position,
+  RenderCommand,
+} from "../../../../opentui/packages/core/src/Renderable"
+
+// Border (pure TS)
+export {
+  BorderChars,
+  BorderCharArrays,
+  isValidBorderStyle,
+  parseBorderStyle,
+  getBorderFromSides,
+  getBorderSides,
+  borderCharsToArray,
+} from "../../../../opentui/packages/core/src/lib/border"
+export type {
+  BorderCharacters,
+  BorderStyle,
+  BorderSides,
+  BorderConfig,
+  BoxDrawOptions,
+  BorderSidesConfig,
+} from "../../../../opentui/packages/core/src/lib/border"
+
+// Styled text (pure TS)
+export {
+  StyledText,
+  isStyledText,
+  stringToStyledText,
+  t,
+  bold,
+  italic,
+  underline,
+  strikethrough,
+  dim,
+  reverse,
+  blink,
+  fg,
+  bg,
+  black,
+  red,
+  green,
+  yellow,
+  blue,
+  magenta,
+  cyan,
+  white,
+} from "../../../../opentui/packages/core/src/lib/styled-text"
+
+// Yoga options (pure TS)
+export {
+  parseAlign,
+  parseAlignItems,
+  parseFlexDirection,
+  parseJustify,
+  parseOverflow,
+  parsePositionType,
+  parseWrap,
+} from "../../../../opentui/packages/core/src/lib/yoga.options"
+export type {
+  AlignString,
+  FlexDirectionString,
+  JustifyString,
+  OverflowString,
+  PositionTypeString,
+  WrapString,
+} from "../../../../opentui/packages/core/src/lib/yoga.options"
+
+// Renderable validations (pure TS)
+export {
+  validateOptions,
+  isPositionType,
+  isDimensionType,
+  isFlexBasisType,
+  isSizeType,
+  isMarginType,
+  isPaddingType,
+  isPositionTypeType,
+  isOverflowType,
+} from "../../../../opentui/packages/core/src/lib/renderable.validations"
+
+// Selection (pure TS)
+export {
+  Selection,
+  convertGlobalToLocalSelection,
+} from "../../../../opentui/packages/core/src/lib/selection"
+
+// VNode composition (pure TS)
+export { maybeMakeRenderable } from "../../../../opentui/packages/core/src/renderables/composition/vnode"
+export type { VNode } from "../../../../opentui/packages/core/src/renderables/composition/vnode"
+
+// ─── Renderable subclasses (re-exported from individual files, not barrel) ─
+
+// These are needed by @opentui/react for the component catalogue and host-config.
+// File-level shims (zig, buffer, renderer, etc.) handle their internal imports.
+export * from "../../../../opentui/packages/core/src/renderables/Box"
+export * from "../../../../opentui/packages/core/src/renderables/Text"
+export * from "../../../../opentui/packages/core/src/renderables/TextNode"
+export * from "../../../../opentui/packages/core/src/renderables/Code"
+export * from "../../../../opentui/packages/core/src/renderables/Diff"
+export * from "../../../../opentui/packages/core/src/renderables/Input"
+export * from "../../../../opentui/packages/core/src/renderables/Select"
+export * from "../../../../opentui/packages/core/src/renderables/TabSelect"
+export * from "../../../../opentui/packages/core/src/renderables/Textarea"
+export * from "../../../../opentui/packages/core/src/renderables/ScrollBox"
+export * from "../../../../opentui/packages/core/src/renderables/ScrollBar"
+export * from "../../../../opentui/packages/core/src/renderables/Slider"
+export * from "../../../../opentui/packages/core/src/renderables/ASCIIFont"
+export * from "../../../../opentui/packages/core/src/renderables/LineNumberRenderable"
+export * from "../../../../opentui/packages/core/src/renderables/Markdown"
+export * from "../../../../opentui/packages/core/src/renderables/FrameBuffer"
+export * from "../../../../opentui/packages/core/src/renderables/TextBufferRenderable"
+import { TextBufferRenderable } from "../../../../opentui/packages/core/src/renderables/TextBufferRenderable"
+
+// Gridland extension: textAlign property on TextBufferRenderable
+// Proxies to the BrowserTextBufferView's textAlign property for centered text rendering.
+Object.defineProperty(TextBufferRenderable.prototype, "textAlign", {
+  get(this: any) {
+    return this.textBufferView?.textAlign ?? "left"
+  },
+  set(this: any, value: "left" | "center" | "right") {
+    if (this.textBufferView) {
+      this.textBufferView.textAlign = value
+      this.requestRender()
+    }
+  },
+  enumerable: true,
+  configurable: true,
+})
+
+// ─── Browser replacements ─────────────────────────────────────────────────
+
+// Buffer — browser replacement
+export { BrowserBuffer as OptimizedBuffer } from "../browser-buffer"
+
+// TextBuffer — browser replacement
+export { BrowserTextBuffer as TextBuffer } from "../browser-text-buffer"
+export type { TextChunk } from "../browser-text-buffer"
+
+// TextBufferView — browser replacement
+export { BrowserTextBufferView as TextBufferView } from "../browser-text-buffer-view"
+
+// SyntaxStyle — browser stub
+export { BrowserSyntaxStyle as SyntaxStyle } from "../browser-syntax-style"
+
+// ─── Stubs ────────────────────────────────────────────────────────────────
+
+export function resolveRenderLib(): any {
+  return null
+}
+
+export type RenderLib = any
+export type Pointer = number
+
+// KeyHandler (re-implemented for browser)
+export {
+  BrowserKeyHandler as KeyHandler,
+  BrowserInternalKeyHandler as InternalKeyHandler,
+} from "../browser-render-context"
+
+// Renderer — re-exported from shimmed source path (resolved to renderer-stub.ts)
+export {
+  CliRenderer,
+  CliRenderEvents,
+  createCliRenderer,
+} from "../../../../opentui/packages/core/src/renderer"
+export type { MouseEvent } from "../../../../opentui/packages/core/src/renderer"
+
+// Timeline & engine — re-exported from shimmed source path (resolved to timeline-stub.ts)
+export {
+  Timeline,
+  engine,
+  createTimeline,
+} from "../../../../opentui/packages/core/src/animation/Timeline"
+
+// Yoga re-export
+export * as Yoga from "yoga-layout"
+
+// Stub types for mouse
+export type MouseEventType = any
+
+// Utils
+export function createTextAttributes(opts: {
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+  dim?: boolean
+  blink?: boolean
+  inverse?: boolean
+  hidden?: boolean
+  strikethrough?: boolean
+} = {}): number {
+  const TA = {
+    NONE: 0, BOLD: 1, DIM: 2, ITALIC: 4, UNDERLINE: 8,
+    BLINK: 16, INVERSE: 32, HIDDEN: 64, STRIKETHROUGH: 128,
+  }
+  let attr = TA.NONE
+  if (opts.bold) attr |= TA.BOLD
+  if (opts.italic) attr |= TA.ITALIC
+  if (opts.underline) attr |= TA.UNDERLINE
+  if (opts.dim) attr |= TA.DIM
+  if (opts.blink) attr |= TA.BLINK
+  if (opts.inverse) attr |= TA.INVERSE
+  if (opts.hidden) attr |= TA.HIDDEN
+  if (opts.strikethrough) attr |= TA.STRIKETHROUGH
+  return attr
+}
+
+export function attributesWithLink(baseAttributes: number, linkId: number): number {
+  return (baseAttributes & 0xff) | ((linkId & 0xffffff) << 8)
+}
+
+export function getLinkId(attributes: number): number {
+  return (attributes >>> 8) & 0xffffff
+}
+
+export function visualizeRenderableTree(..._args: any[]): void {}

package/src/core-shims/renderable-types.ts

@@ -0,0 +1,4 @@
+// Forward declaration types for circular dependency resolution
+export type Renderable = any
+export type BaseRenderable = any
+export type RootRenderable = any

package/src/core-shims/rgba.ts

@@ -0,0 +1,195 @@
+// Pure-TS RGBA - copied from opentui core for standalone use
+// This avoids importing from opentui which pulls in Zig
+
+export class RGBA {
+  buffer: Float32Array
+
+  constructor(buffer: Float32Array) {
+    this.buffer = buffer
+  }
+
+  static fromArray(array: Float32Array): RGBA {
+    return new RGBA(array)
+  }
+
+  static fromValues(r: number, g: number, b: number, a: number = 1.0): RGBA {
+    return new RGBA(new Float32Array([r, g, b, a]))
+  }
+
+  static fromInts(r: number, g: number, b: number, a: number = 255): RGBA {
+    return new RGBA(new Float32Array([r / 255, g / 255, b / 255, a / 255]))
+  }
+
+  static fromHex(hex: string): RGBA {
+    return hexToRgb(hex)
+  }
+
+  get r(): number {
+    return this.buffer[0]
+  }
+  set r(v: number) {
+    this.buffer[0] = v
+  }
+
+  get g(): number {
+    return this.buffer[1]
+  }
+  set g(v: number) {
+    this.buffer[1] = v
+  }
+
+  get b(): number {
+    return this.buffer[2]
+  }
+  set b(v: number) {
+    this.buffer[2] = v
+  }
+
+  get a(): number {
+    return this.buffer[3]
+  }
+  set a(v: number) {
+    this.buffer[3] = v
+  }
+
+  toInts(): [number, number, number, number] {
+    return [
+      Math.round(this.buffer[0] * 255),
+      Math.round(this.buffer[1] * 255),
+      Math.round(this.buffer[2] * 255),
+      Math.round(this.buffer[3] * 255),
+    ]
+  }
+
+  map<R>(fn: (value: number) => R): R[] {
+    return [fn(this.buffer[0]), fn(this.buffer[1]), fn(this.buffer[2]), fn(this.buffer[3])]
+  }
+
+  toString(): string {
+    const [r, g, b, a] = this.toInts()
+    return `rgba(${r}, ${g}, ${b}, ${a / 255})`
+  }
+
+  equals(other?: RGBA): boolean {
+    if (!other) return false
+    return (
+      this.buffer[0] === other.buffer[0] &&
+      this.buffer[1] === other.buffer[1] &&
+      this.buffer[2] === other.buffer[2] &&
+      this.buffer[3] === other.buffer[3]
+    )
+  }
+}
+
+export type ColorInput = string | RGBA
+
+const CSS_COLOR_NAMES: Record<string, string> = {
+  black: "#000000",
+  white: "#ffffff",
+  red: "#ff0000",
+  green: "#008000",
+  blue: "#0000ff",
+  yellow: "#ffff00",
+  cyan: "#00ffff",
+  magenta: "#ff00ff",
+  silver: "#c0c0c0",
+  gray: "#808080",
+  grey: "#808080",
+  maroon: "#800000",
+  olive: "#808000",
+  lime: "#00ff00",
+  aqua: "#00ffff",
+  teal: "#008080",
+  navy: "#000080",
+  fuchsia: "#ff00ff",
+  purple: "#800080",
+  orange: "#ffa500",
+  transparent: "#00000000",
+  brightblack: "#808080",
+  brightred: "#ff5555",
+  brightgreen: "#55ff55",
+  brightyellow: "#ffff55",
+  brightblue: "#5555ff",
+  brightmagenta: "#ff55ff",
+  brightcyan: "#55ffff",
+  brightwhite: "#ffffff",
+}
+
+export function hexToRgb(hex: string): RGBA {
+  hex = hex.replace(/^#/, "")
+
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+
+  if (hex.length === 6) {
+    hex = hex + "ff"
+  }
+
+  const r = parseInt(hex.substring(0, 2), 16) / 255
+  const g = parseInt(hex.substring(2, 4), 16) / 255
+  const b = parseInt(hex.substring(4, 6), 16) / 255
+  const a = parseInt(hex.substring(6, 8), 16) / 255
+
+  return RGBA.fromValues(r, g, b, a)
+}
+
+export function rgbToHex(rgb: RGBA): string {
+  const [r, g, b] = rgb.toInts()
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
+}
+
+export function hsvToRgb(h: number, s: number, v: number): RGBA {
+  const c = v * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = v - c
+  let r = 0,
+    g = 0,
+    b = 0
+
+  if (h < 60) {
+    r = c; g = x; b = 0
+  } else if (h < 120) {
+    r = x; g = c; b = 0
+  } else if (h < 180) {
+    r = 0; g = c; b = x
+  } else if (h < 240) {
+    r = 0; g = x; b = c
+  } else if (h < 300) {
+    r = x; g = 0; b = c
+  } else {
+    r = c; g = 0; b = x
+  }
+
+  return RGBA.fromValues(r + m, g + m, b + m, 1)
+}
+
+export function parseColor(color: ColorInput): RGBA {
+  if (color instanceof RGBA) return color
+  if (typeof color !== "string") return RGBA.fromValues(1, 1, 1, 1)
+
+  const lower = color.toLowerCase().trim()
+
+  // Check CSS named colors
+  if (CSS_COLOR_NAMES[lower]) {
+    return hexToRgb(CSS_COLOR_NAMES[lower])
+  }
+
+  // Hex
+  if (lower.startsWith("#")) {
+    return hexToRgb(lower)
+  }
+
+  // rgba(r, g, b, a)
+  const rgbaMatch = lower.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/)
+  if (rgbaMatch) {
+    return RGBA.fromInts(
+      parseInt(rgbaMatch[1]),
+      parseInt(rgbaMatch[2]),
+      parseInt(rgbaMatch[3]),
+      rgbaMatch[4] ? Math.round(parseFloat(rgbaMatch[4]) * 255) : 255,
+    )
+  }
+
+  return RGBA.fromValues(1, 1, 1, 1)
+}

package/src/core-shims/types.ts

@@ -0,0 +1,132 @@
+// Types matching opentui core types.ts
+import type { RGBA } from "./rgba"
+import type { Renderable } from "./renderable-types"
+
+export const TextAttributes = {
+  NONE: 0,
+  BOLD: 1 << 0,
+  DIM: 1 << 1,
+  ITALIC: 1 << 2,
+  UNDERLINE: 1 << 3,
+  BLINK: 1 << 4,
+  INVERSE: 1 << 5,
+  HIDDEN: 1 << 6,
+  STRIKETHROUGH: 1 << 7,
+}
+
+export const ATTRIBUTE_BASE_BITS = 8
+export const ATTRIBUTE_BASE_MASK = 0xff
+
+export function getBaseAttributes(attr: number): number {
+  return attr & 0xff
+}
+
+export type ThemeMode = "dark" | "light"
+export type CursorStyle = "block" | "line" | "underline"
+export type MousePointerStyle = "default" | "pointer" | "text" | "crosshair" | "move" | "not-allowed"
+export type WidthMethod = "wcwidth" | "unicode"
+export type Timeout = ReturnType<typeof setTimeout> | undefined
+
+export interface CursorStyleOptions {
+  style?: CursorStyle
+  blinking?: boolean
+  color?: RGBA
+  cursor?: MousePointerStyle
+}
+
+export enum DebugOverlayCorner {
+  topLeft = 0,
+  topRight = 1,
+  bottomLeft = 2,
+  bottomRight = 3,
+}
+
+export interface RenderContext {
+  addToHitGrid: (x: number, y: number, width: number, height: number, id: number) => void
+  pushHitGridScissorRect: (x: number, y: number, width: number, height: number) => void
+  popHitGridScissorRect: () => void
+  clearHitGridScissorRects: () => void
+  width: number
+  height: number
+  requestRender: () => void
+  setCursorPosition: (x: number, y: number, visible: boolean) => void
+  setCursorStyle: (options: CursorStyleOptions) => void
+  setCursorColor: (color: RGBA) => void
+  setMousePointer: (shape: MousePointerStyle) => void
+  widthMethod: WidthMethod
+  capabilities: any | null
+  requestLive: () => void
+  dropLive: () => void
+  hasSelection: boolean
+  getSelection: () => any | null
+  requestSelectionUpdate: () => void
+  currentFocusedRenderable: any | null
+  focusRenderable: (renderable: any) => void
+  registerLifecyclePass: (renderable: any) => void
+  unregisterLifecyclePass: (renderable: any) => void
+  getLifecyclePasses: () => Set<any>
+  keyInput: any
+  _internalKeyInput: any
+  clearSelection: () => void
+  startSelection: (renderable: any, x: number, y: number) => void
+  updateSelection: (
+    currentRenderable: any | undefined,
+    x: number,
+    y: number,
+    options?: { finishDragging?: boolean },
+  ) => void
+  // EventEmitter methods
+  on: (event: string, listener: (...args: any[]) => void) => any
+  off: (event: string, listener: (...args: any[]) => void) => any
+  emit: (event: string, ...args: any[]) => boolean
+  removeAllListeners: (event?: string) => any
+}
+
+export interface ViewportBounds {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface Highlight {
+  start: number
+  end: number
+  styleId: number
+  priority?: number | null
+  hlRef?: number | null
+}
+
+export interface LineInfo {
+  lineStarts: number[]
+  lineWidths: number[]
+  maxLineWidth: number
+  lineSources: number[]
+  lineWraps: number[]
+}
+
+export interface LineInfoProvider {
+  get lineInfo(): LineInfo
+  get lineCount(): number
+  get virtualLineCount(): number
+  get scrollY(): number
+}
+
+export interface CapturedSpan {
+  text: string
+  fg: RGBA
+  bg: RGBA
+  attributes: number
+  width: number
+}
+
+export interface CapturedLine {
+  spans: CapturedSpan[]
+}
+
+export interface CapturedFrame {
+  cols: number
+  rows: number
+  cursor: [number, number]
+  lines: CapturedLine[]
+}

package/src/shims/bun-ffi-structs.ts

@@ -0,0 +1,20 @@
+// Shim for bun-ffi-structs
+export class Struct {
+  constructor(_def: any) {}
+}
+
+export function defineStruct(_def: any): any {
+  return class StubStruct {
+    constructor(..._args: any[]) {}
+  }
+}
+
+export function defineEnum(_def: any): any {
+  return {}
+}
+
+export function defineUnion(_def: any): any {
+  return class StubUnion {
+    constructor(..._args: any[]) {}
+  }
+}

package/src/shims/bun-ffi.ts

@@ -0,0 +1,28 @@
+// Shim for bun:ffi - provides dummy types/stubs for browser environment
+export type Pointer = number
+
+export function toArrayBuffer(_ptr: Pointer, _offset: number, _size: number): ArrayBuffer {
+  return new ArrayBuffer(0)
+}
+
+export function ptr(_buf: ArrayBuffer): Pointer {
+  return 0
+}
+
+export function read(ptr: Pointer): { ptr: Pointer } {
+  return { ptr: 0 }
+}
+
+export function dlopen(_path: string, _symbols: Record<string, unknown>): { symbols: Record<string, unknown>; close(): void } {
+  return { symbols: {}, close() {} }
+}
+
+export class JSCallback {
+  ptr: Pointer = 0
+  constructor(_fn: (...args: unknown[]) => unknown, _options?: unknown) {}
+  close() {}
+}
+
+export function suffix(): string {
+  return ""
+}

package/src/shims/console-stub.ts

@@ -0,0 +1,13 @@
+// Stub for opentui/packages/core/src/console.ts
+export class TerminalConsole {
+  constructor(..._args: any[]) {}
+}
+
+export type ConsoleOptions = any
+
+export function capture(..._args: any[]): any {
+  return null
+}
+
+export class Capture {}
+export class CapturedWritableStream {}

package/src/shims/console.ts

@@ -0,0 +1,3 @@
+// Shim for node:console - just re-export the global console
+export const Console = globalThis.console.constructor
+export default globalThis.console

package/src/shims/devtools-polyfill-stub.ts

@@ -0,0 +1,3 @@
+// Browser-safe stub for devtools-polyfill.ts
+// The original file uses top-level await to import `ws` for Node.js.
+// In the browser, WebSocket is natively available, so we skip the import.