@gridland/web 0.2.16 → 0.2.18

package/src/shims/editor-view-stub.ts

@@ -0,0 +1,388 @@
+// Pure-JS EditorView implementation for browser environment.
+// Wraps an EditBuffer and provides viewport/visual cursor mapping.
+
+import type { EditBuffer, LogicalCursor } from "./edit-buffer-stub"
+
+export interface Viewport {
+  offsetY: number
+  offsetX: number
+  height: number
+  width: number
+}
+
+export interface VisualCursor {
+  visualRow: number
+  visualCol: number
+  logicalRow: number
+  logicalCol: number
+  offset: number
+}
+
+export interface LineInfo {
+  lineIndex: number
+  lineCount: number
+  colIndex: number
+  colCount: number
+  byteIndex: number
+  byteCount: number
+}
+
+export class EditorView {
+  public readonly ptr: number = 0 // dummy pointer
+
+  private editBuffer: EditBuffer
+  private viewportWidth: number
+  private viewportHeight: number
+  private viewportOffsetX: number = 0
+  private viewportOffsetY: number = 0
+  private _destroyed: boolean = false
+  private _wrapMode: "none" | "char" | "word" = "word"
+  private _scrollMargin: number = 0
+  private _placeholderChunks: { text: string; fg?: any; bg?: any; attributes?: number }[] = []
+
+  // Selection state
+  private _selectionStart: number | null = null
+  private _selectionEnd: number | null = null
+
+  private _extmarksController: any = null
+
+  constructor(editBuffer: EditBuffer, width: number, height: number) {
+    this.editBuffer = editBuffer
+    this.viewportWidth = width
+    this.viewportHeight = height
+  }
+
+  static create(editBuffer: EditBuffer, viewportWidth: number, viewportHeight: number): EditorView {
+    return new EditorView(editBuffer, viewportWidth, viewportHeight)
+  }
+
+  // --- Viewport ---
+
+  setViewportSize(width: number, height: number): void {
+    this.viewportWidth = width
+    this.viewportHeight = height
+  }
+
+  setViewport(x: number, y: number, width: number, height: number, _moveCursor: boolean = true): void {
+    this.viewportOffsetX = x
+    this.viewportOffsetY = y
+    this.viewportWidth = width
+    this.viewportHeight = height
+  }
+
+  getViewport(): Viewport {
+    return {
+      offsetX: this.viewportOffsetX,
+      offsetY: this.viewportOffsetY,
+      width: this.viewportWidth,
+      height: this.viewportHeight,
+    }
+  }
+
+  setScrollMargin(margin: number): void {
+    this._scrollMargin = margin
+  }
+
+  setWrapMode(mode: "none" | "char" | "word"): void {
+    this._wrapMode = mode
+  }
+
+  // --- Line counts ---
+
+  getVirtualLineCount(): number {
+    // For no-wrap mode, virtual lines = logical lines
+    if (this._wrapMode === "none") {
+      return this.editBuffer.getLineCount()
+    }
+    // For wrap modes, calculate wrapped lines
+    return this.getTotalVirtualLineCount()
+  }
+
+  getTotalVirtualLineCount(): number {
+    if (this._wrapMode === "none" || this.viewportWidth <= 0) {
+      return this.editBuffer.getLineCount()
+    }
+    const text = this.editBuffer.getText()
+    const lines = text.split("\n")
+    let total = 0
+    for (const line of lines) {
+      total += Math.max(1, Math.ceil(line.length / this.viewportWidth))
+    }
+    return total
+  }
+
+  // --- Cursor ---
+
+  getCursor(): { row: number; col: number } {
+    const pos = this.editBuffer.getCursorPosition()
+    return { row: pos.row, col: pos.col }
+  }
+
+  getVisualCursor(): VisualCursor {
+    const pos = this.editBuffer.getCursorPosition()
+    // For simple single-line / no-wrap, visual = logical minus viewport offset
+    const visualRow = pos.row - this.viewportOffsetY
+    const visualCol = pos.col - this.viewportOffsetX
+    return {
+      visualRow: Math.max(0, visualRow),
+      visualCol: Math.max(0, visualCol),
+      logicalRow: pos.row,
+      logicalCol: pos.col,
+      offset: pos.offset,
+    }
+  }
+
+  setCursorByOffset(offset: number): void {
+    this.editBuffer.setCursorByOffset(offset)
+    this.ensureCursorVisible()
+  }
+
+  // --- Visual navigation ---
+
+  moveUpVisual(): void {
+    this.editBuffer.moveCursorUp()
+    this.ensureCursorVisible()
+  }
+
+  moveDownVisual(): void {
+    this.editBuffer.moveCursorDown()
+    this.ensureCursorVisible()
+  }
+
+  getVisualSOL(): VisualCursor {
+    const pos = this.editBuffer.getCursorPosition()
+    const offset = this.editBuffer.getLineStartOffset(pos.row)
+    return {
+      visualRow: pos.row - this.viewportOffsetY,
+      visualCol: 0,
+      logicalRow: pos.row,
+      logicalCol: 0,
+      offset,
+    }
+  }
+
+  getVisualEOL(): VisualCursor {
+    const eol = this.editBuffer.getEOL()
+    return {
+      visualRow: eol.row - this.viewportOffsetY,
+      visualCol: eol.col - this.viewportOffsetX,
+      logicalRow: eol.row,
+      logicalCol: eol.col,
+      offset: eol.offset,
+    }
+  }
+
+  getNextWordBoundary(): VisualCursor {
+    const lc = this.editBuffer.getNextWordBoundary()
+    return this.logicalToVisual(lc)
+  }
+
+  getPrevWordBoundary(): VisualCursor {
+    const lc = this.editBuffer.getPrevWordBoundary()
+    return this.logicalToVisual(lc)
+  }
+
+  getEOL(): VisualCursor {
+    const eol = this.editBuffer.getEOL()
+    return this.logicalToVisual(eol)
+  }
+
+  // --- Line info ---
+
+  getLineInfo(): LineInfo {
+    return this.getLogicalLineInfo()
+  }
+
+  getLogicalLineInfo(): LineInfo {
+    const pos = this.editBuffer.getCursorPosition()
+    const text = this.editBuffer.getText()
+    const lines = text.split("\n")
+    const line = lines[pos.row] || ""
+    return {
+      lineIndex: pos.row,
+      lineCount: lines.length,
+      colIndex: pos.col,
+      colCount: line.length,
+      byteIndex: pos.offset,
+      byteCount: new TextEncoder().encode(text).length,
+    }
+  }
+
+  // --- Selection ---
+
+  setSelection(start: number, end: number, _bgColor?: any, _fgColor?: any): void {
+    this._selectionStart = start
+    this._selectionEnd = end
+  }
+
+  updateSelection(end: number, _bgColor?: any, _fgColor?: any): void {
+    this._selectionEnd = end
+  }
+
+  resetSelection(): void {
+    this._selectionStart = null
+    this._selectionEnd = null
+  }
+
+  getSelection(): { start: number; end: number } | null {
+    if (this._selectionStart === null || this._selectionEnd === null) return null
+    return { start: this._selectionStart, end: this._selectionEnd }
+  }
+
+  hasSelection(): boolean {
+    return this._selectionStart !== null && this._selectionEnd !== null
+  }
+
+  setLocalSelection(
+    _anchorX: number,
+    _anchorY: number,
+    _focusX: number,
+    _focusY: number,
+    _bgColor?: any,
+    _fgColor?: any,
+    _updateCursor?: boolean,
+    _followCursor?: boolean,
+  ): boolean {
+    // Convert visual coords to offsets (simplified)
+    this._selectionStart = 0
+    this._selectionEnd = 0
+    return true
+  }
+
+  updateLocalSelection(
+    _anchorX: number,
+    _anchorY: number,
+    _focusX: number,
+    _focusY: number,
+    _bgColor?: any,
+    _fgColor?: any,
+    _updateCursor?: boolean,
+    _followCursor?: boolean,
+  ): boolean {
+    return true
+  }
+
+  resetLocalSelection(): void {
+    this.resetSelection()
+  }
+
+  getSelectedText(): string {
+    const sel = this.getSelection()
+    if (!sel) return ""
+    const text = this.editBuffer.getText()
+    const start = Math.min(sel.start, sel.end)
+    const end = Math.max(sel.start, sel.end)
+    return text.substring(start, end)
+  }
+
+  deleteSelectedText(): void {
+    const sel = this.getSelection()
+    if (!sel) return
+    const text = this.editBuffer.getText()
+    const start = Math.min(sel.start, sel.end)
+    const end = Math.max(sel.start, sel.end)
+    const newText = text.substring(0, start) + text.substring(end)
+    this.editBuffer.setText(newText)
+    this.editBuffer.setCursorByOffset(start)
+    this.resetSelection()
+  }
+
+  // --- Text ---
+
+  getText(): string {
+    return this.editBuffer.getText()
+  }
+
+  // --- Placeholder ---
+
+  setPlaceholderStyledText(chunks: { text: string; fg?: any; bg?: any; attributes?: number }[]): void {
+    this._placeholderChunks = chunks
+  }
+
+  // --- Tab ---
+
+  setTabIndicator(_indicator: string | number): void {}
+  setTabIndicatorColor(_color: any): void {}
+
+  // --- Measurement ---
+
+  measureForDimensions(width: number, _height: number): { lineCount: number; maxWidth: number } | null {
+    const text = this.editBuffer.getText()
+    const lines = text.split("\n")
+
+    if (this._wrapMode === "none" || width <= 0) {
+      let maxWidth = 0
+      for (const line of lines) {
+        maxWidth = Math.max(maxWidth, line.length)
+      }
+      // If text is empty but we have placeholder, use that for measurement
+      if (text === "" && this._placeholderChunks.length > 0) {
+        let placeholderLen = 0
+        for (const chunk of this._placeholderChunks) {
+          placeholderLen += chunk.text.length
+        }
+        maxWidth = Math.max(maxWidth, placeholderLen)
+      }
+      return { lineCount: lines.length, maxWidth }
+    }
+
+    let totalLines = 0
+    let maxWidth = 0
+    for (const line of lines) {
+      const wrappedLines = Math.max(1, Math.ceil(line.length / width))
+      totalLines += wrappedLines
+      maxWidth = Math.max(maxWidth, Math.min(line.length, width))
+    }
+    return { lineCount: totalLines, maxWidth }
+  }
+
+  // --- Extmarks ---
+
+  get extmarks(): any {
+    if (!this._extmarksController) {
+      this._extmarksController = {
+        destroy() {},
+      }
+    }
+    return this._extmarksController
+  }
+
+  // --- Cleanup ---
+
+  destroy(): void {
+    if (this._destroyed) return
+    this._destroyed = true
+    if (this._extmarksController && this._extmarksController.destroy) {
+      this._extmarksController.destroy()
+    }
+  }
+
+  // --- Helpers ---
+
+  private logicalToVisual(lc: LogicalCursor): VisualCursor {
+    return {
+      visualRow: lc.row - this.viewportOffsetY,
+      visualCol: lc.col - this.viewportOffsetX,
+      logicalRow: lc.row,
+      logicalCol: lc.col,
+      offset: lc.offset,
+    }
+  }
+
+  private ensureCursorVisible(): void {
+    const pos = this.editBuffer.getCursorPosition()
+    // Auto-scroll viewport to keep cursor visible
+    if (pos.row < this.viewportOffsetY) {
+      this.viewportOffsetY = pos.row
+    } else if (pos.row >= this.viewportOffsetY + this.viewportHeight) {
+      this.viewportOffsetY = pos.row - this.viewportHeight + 1
+    }
+    if (this._wrapMode === "none") {
+      if (pos.col < this.viewportOffsetX) {
+        this.viewportOffsetX = pos.col
+      } else if (pos.col >= this.viewportOffsetX + this.viewportWidth) {
+        this.viewportOffsetX = pos.col - this.viewportWidth + 1
+      }
+    }
+  }
+}

package/src/shims/events-shim.ts

@@ -0,0 +1,81 @@
+// Browser-compatible EventEmitter shim.
+// Replaces the 'events' npm package to avoid CJS/ESM issues in Vite.
+
+type Listener = (...args: any[]) => void
+
+export class EventEmitter {
+  private _listeners = new Map<string | symbol, Listener[]>()
+
+  on(event: string | symbol, listener: Listener): this {
+    const list = this._listeners.get(event) ?? []
+    list.push(listener)
+    this._listeners.set(event, list)
+    return this
+  }
+
+  addListener(event: string | symbol, listener: Listener): this {
+    return this.on(event, listener)
+  }
+
+  off(event: string | symbol, listener: Listener): this {
+    return this.removeListener(event, listener)
+  }
+
+  removeListener(event: string | symbol, listener: Listener): this {
+    const list = this._listeners.get(event)
+    if (list) {
+      const idx = list.indexOf(listener)
+      if (idx !== -1) list.splice(idx, 1)
+      if (list.length === 0) this._listeners.delete(event)
+    }
+    return this
+  }
+
+  removeAllListeners(event?: string | symbol): this {
+    if (event) {
+      this._listeners.delete(event)
+    } else {
+      this._listeners.clear()
+    }
+    return this
+  }
+
+  emit(event: string | symbol, ...args: any[]): boolean {
+    const list = this._listeners.get(event)
+    if (!list || list.length === 0) return false
+    for (const listener of [...list]) {
+      listener(...args)
+    }
+    return true
+  }
+
+  once(event: string | symbol, listener: Listener): this {
+    const wrapper = (...args: any[]) => {
+      this.removeListener(event, wrapper)
+      listener(...args)
+    }
+    return this.on(event, wrapper)
+  }
+
+  listenerCount(event: string | symbol): number {
+    return this._listeners.get(event)?.length ?? 0
+  }
+
+  listeners(event: string | symbol): Listener[] {
+    return [...(this._listeners.get(event) ?? [])]
+  }
+
+  eventNames(): (string | symbol)[] {
+    return [...this._listeners.keys()]
+  }
+
+  setMaxListeners(_n: number): this {
+    return this // no-op in browser
+  }
+
+  getMaxListeners(): number {
+    return Infinity
+  }
+}
+
+export default EventEmitter

package/src/shims/filters-stub.ts

@@ -0,0 +1,4 @@
+// Stub for opentui/packages/core/src/post/filters.ts
+export function applyFilters(..._args: any[]): any {
+  return null
+}

package/src/shims/hast-stub.ts

@@ -0,0 +1,8 @@
+// Stub for hast-styled-text
+export function hastToStyledText(..._args: any[]): any {
+  return null
+}
+
+export function hastToTextChunks(..._args: any[]): any[] {
+  return []
+}

package/src/shims/native-span-feed-stub.ts

@@ -0,0 +1,7 @@
+// Stub for opentui/packages/core/src/NativeSpanFeed.ts
+export class NativeSpanFeed {
+  static create(): NativeSpanFeed {
+    return new NativeSpanFeed()
+  }
+  destroy(): void {}
+}

package/src/shims/node-buffer.ts

@@ -0,0 +1,39 @@
+// Browser shim for node:buffer
+// TextEncoder/TextDecoder are available in browsers
+const BrowserBuffer = {
+  from(data: string | ArrayBuffer | Uint8Array, encoding?: string): Uint8Array {
+    if (typeof data === "string") {
+      const encoder = new TextEncoder()
+      return encoder.encode(data)
+    }
+    if (data instanceof ArrayBuffer) {
+      return new Uint8Array(data)
+    }
+    if (data instanceof Uint8Array) {
+      return new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+    }
+    return new Uint8Array(0)
+  },
+
+  alloc(size: number): Uint8Array {
+    return new Uint8Array(size)
+  },
+
+  isBuffer(obj: any): boolean {
+    return obj instanceof Uint8Array
+  },
+
+  concat(list: Uint8Array[], totalLength?: number): Uint8Array {
+    const length = totalLength ?? list.reduce((acc, buf) => acc + buf.byteLength, 0)
+    const result = new Uint8Array(length)
+    let offset = 0
+    for (const buf of list) {
+      result.set(buf, offset)
+      offset += buf.byteLength
+    }
+    return result
+  },
+}
+
+export const Buffer = BrowserBuffer
+export default { Buffer: BrowserBuffer }

package/src/shims/node-fs.ts

@@ -0,0 +1,20 @@
+// Browser stub for node:fs and fs/promises
+export function existsSync(_path: string): boolean { return false }
+export function readFileSync(_path: string, _encoding?: string): string { return "" }
+export function writeFileSync(): void {}
+export function mkdirSync(): void {}
+export function readdirSync(): string[] { return [] }
+export function statSync(): any { return { isDirectory: () => false, isFile: () => false } }
+export function unlinkSync(): void {}
+
+// fs/promises
+export async function readFile(): Promise<string> { return "" }
+export async function writeFile(): Promise<void> {}
+export async function mkdir(): Promise<void> {}
+export async function readdir(): Promise<string[]> { return [] }
+export async function stat(): Promise<any> { return { isDirectory: () => false, isFile: () => false } }
+
+export default {
+  existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync, statSync, unlinkSync,
+  promises: { readFile, writeFile, mkdir, readdir, stat },
+}

package/src/shims/node-os.ts

@@ -0,0 +1,6 @@
+// Browser stub for node:os
+export function homedir(): string { return "/home/user" }
+export function tmpdir(): string { return "/tmp" }
+export function platform(): string { return "browser" }
+export function arch(): string { return "wasm" }
+export default { homedir, tmpdir, platform, arch }

package/src/shims/node-path.ts

@@ -0,0 +1,35 @@
+// Browser shim for node:path
+export function join(...parts: string[]): string {
+  return parts.join("/").replace(/\/+/g, "/")
+}
+export function resolve(...parts: string[]): string {
+  return join(...parts)
+}
+export function dirname(p: string): string {
+  return p.split("/").slice(0, -1).join("/") || "/"
+}
+export function basename(p: string, ext?: string): string {
+  const base = p.split("/").pop() || ""
+  if (ext && base.endsWith(ext)) return base.slice(0, -ext.length)
+  return base
+}
+export function extname(p: string): string {
+  const base = basename(p)
+  const idx = base.lastIndexOf(".")
+  return idx >= 0 ? base.slice(idx) : ""
+}
+export function parse(p: string): { root: string; dir: string; base: string; ext: string; name: string } {
+  const dir = dirname(p)
+  const base = basename(p)
+  const ext = extname(p)
+  const name = ext ? base.slice(0, -ext.length) : base
+  return { root: p.startsWith("/") ? "/" : "", dir, base, ext, name }
+}
+export function isAbsolute(p: string): boolean {
+  return p.startsWith("/")
+}
+export function relative(from: string, to: string): string {
+  return to.replace(from, "").replace(/^\//, "")
+}
+export const sep = "/"
+export default { join, resolve, dirname, basename, extname, parse, isAbsolute, relative, sep }

package/src/shims/node-stream.ts

@@ -0,0 +1,10 @@
+// Browser stub for node:stream
+export class Writable {
+  write(_chunk: any): boolean { return true }
+  end(): void {}
+}
+export class Readable {
+  read(): any { return null }
+}
+export class Transform extends Writable {}
+export default { Writable, Readable, Transform }

package/src/shims/node-url.ts

@@ -0,0 +1,8 @@
+// Browser stub for node:url
+export function fileURLToPath(url: string): string {
+  return url.replace("file://", "")
+}
+export function pathToFileURL(path: string): URL {
+  return new URL(`file://${path}`)
+}
+export default { fileURLToPath, pathToFileURL }

package/src/shims/node-util.ts

@@ -0,0 +1,33 @@
+// Browser stub for node:util
+export function inspect(obj: any, _options?: any): string {
+  try {
+    return JSON.stringify(obj, null, 2)
+  } catch {
+    return String(obj)
+  }
+}
+
+export function format(fmt: string, ...args: any[]): string {
+  let i = 0
+  return fmt.replace(/%[sdjifoO%]/g, (match) => {
+    if (match === "%%") return "%"
+    if (i >= args.length) return match
+    return String(args[i++])
+  })
+}
+
+export function promisify(fn: Function): Function {
+  return (...args: any[]) =>
+    new Promise((resolve, reject) => {
+      fn(...args, (err: any, result: any) => {
+        if (err) reject(err)
+        else resolve(result)
+      })
+    })
+}
+
+export function isDeepStrictEqual(a: any, b: any): boolean {
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+export default { inspect, format, promisify, isDeepStrictEqual }

package/src/shims/renderer-stub.ts

@@ -0,0 +1,21 @@
+// Stub for opentui/packages/core/src/renderer.ts
+import { EventEmitter } from "events"
+
+export enum CliRenderEvents {
+  DESTROY = "destroy",
+  DEBUG_OVERLAY_TOGGLE = "debug_overlay_toggle",
+}
+
+export class CliRenderer extends EventEmitter {
+  root: any = null
+  keyInput: any = new EventEmitter()
+  destroy(): void {
+    this.emit(CliRenderEvents.DESTROY)
+  }
+}
+
+export type MouseEvent = any
+
+export function createCliRenderer(): Promise<CliRenderer> {
+  return Promise.resolve(new CliRenderer())
+}

package/src/shims/slider-deps.ts

@@ -0,0 +1,8 @@
+// Minimal barrel for Slider.ts that avoids the circular dependency.
+// Slider.ts imports { OptimizedBuffer, parseColor, Renderable, RGBA, RenderableOptions, RenderContext } from "../index"
+// We provide these directly from the source files, bypassing any barrel that re-exports renderables.
+
+export { Renderable, type RenderableOptions } from "../../../../opentui/packages/core/src/Renderable"
+export type { RenderContext } from "../core-shims/types"
+export { BrowserBuffer as OptimizedBuffer } from "../browser-buffer"
+export { RGBA, parseColor, type ColorInput } from "../core-shims/rgba"