@gridland/web 0.1.0

package/dist/next.js

@@ -0,0 +1,2596 @@
+"use client";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+// src/TUI.tsx
+import {
+  useRef,
+  useEffect,
+  useState
+} from "react";
+
+// src/core-shims/index.ts
+var core_shims_exports = {};
+__export(core_shims_exports, {
+  ATTRIBUTE_BASE_BITS: () => ATTRIBUTE_BASE_BITS,
+  ATTRIBUTE_BASE_MASK: () => ATTRIBUTE_BASE_MASK,
+  BaseRenderable: () => BaseRenderable,
+  BorderCharArrays: () => BorderCharArrays,
+  BorderChars: () => BorderChars,
+  CliRenderEvents: () => CliRenderEvents,
+  CliRenderer: () => CliRenderer,
+  DebugOverlayCorner: () => DebugOverlayCorner,
+  InternalKeyHandler: () => BrowserInternalKeyHandler,
+  KeyHandler: () => BrowserKeyHandler,
+  LayoutEvents: () => LayoutEvents,
+  OptimizedBuffer: () => BrowserBuffer,
+  RGBA: () => RGBA,
+  Renderable: () => Renderable,
+  RenderableEvents: () => RenderableEvents,
+  RootRenderable: () => RootRenderable,
+  Selection: () => Selection,
+  StyledText: () => StyledText,
+  SyntaxStyle: () => BrowserSyntaxStyle,
+  TextAttributes: () => TextAttributes,
+  TextBuffer: () => BrowserTextBuffer,
+  TextBufferView: () => BrowserTextBufferView,
+  Timeline: () => Timeline,
+  Yoga: () => Yoga,
+  attributesWithLink: () => attributesWithLink,
+  bg: () => bg,
+  black: () => black,
+  blink: () => blink,
+  blue: () => blue,
+  bold: () => bold,
+  borderCharsToArray: () => borderCharsToArray,
+  convertGlobalToLocalSelection: () => convertGlobalToLocalSelection,
+  createCliRenderer: () => createCliRenderer,
+  createTextAttributes: () => createTextAttributes,
+  createTimeline: () => createTimeline,
+  cyan: () => cyan,
+  dim: () => dim,
+  engine: () => engine,
+  fg: () => fg,
+  getBaseAttributes: () => getBaseAttributes,
+  getBorderFromSides: () => getBorderFromSides,
+  getBorderSides: () => getBorderSides,
+  getLinkId: () => getLinkId,
+  green: () => green,
+  hexToRgb: () => hexToRgb,
+  hsvToRgb: () => hsvToRgb,
+  isDimensionType: () => isDimensionType,
+  isFlexBasisType: () => isFlexBasisType,
+  isMarginType: () => isMarginType,
+  isOverflowType: () => isOverflowType,
+  isPaddingType: () => isPaddingType,
+  isPositionType: () => isPositionType,
+  isPositionTypeType: () => isPositionTypeType,
+  isRenderable: () => isRenderable,
+  isSizeType: () => isSizeType,
+  isStyledText: () => isStyledText,
+  isValidBorderStyle: () => isValidBorderStyle,
+  italic: () => italic,
+  magenta: () => magenta,
+  maybeMakeRenderable: () => maybeMakeRenderable,
+  parseAlign: () => parseAlign,
+  parseAlignItems: () => parseAlignItems,
+  parseBorderStyle: () => parseBorderStyle,
+  parseColor: () => parseColor,
+  parseFlexDirection: () => parseFlexDirection,
+  parseJustify: () => parseJustify,
+  parseOverflow: () => parseOverflow,
+  parsePositionType: () => parsePositionType,
+  parseWrap: () => parseWrap,
+  red: () => red,
+  resolveRenderLib: () => resolveRenderLib,
+  reverse: () => reverse,
+  rgbToHex: () => rgbToHex,
+  strikethrough: () => strikethrough,
+  stringToStyledText: () => stringToStyledText,
+  t: () => t,
+  underline: () => underline,
+  validateOptions: () => validateOptions,
+  visualizeRenderableTree: () => visualizeRenderableTree,
+  white: () => white,
+  yellow: () => yellow
+});
+
+// src/core-shims/rgba.ts
+var RGBA = class _RGBA {
+  buffer;
+  constructor(buffer) {
+    this.buffer = buffer;
+  }
+  static fromArray(array) {
+    return new _RGBA(array);
+  }
+  static fromValues(r, g, b, a = 1) {
+    return new _RGBA(new Float32Array([r, g, b, a]));
+  }
+  static fromInts(r, g, b, a = 255) {
+    return new _RGBA(new Float32Array([r / 255, g / 255, b / 255, a / 255]));
+  }
+  static fromHex(hex) {
+    return hexToRgb(hex);
+  }
+  get r() {
+    return this.buffer[0];
+  }
+  set r(v) {
+    this.buffer[0] = v;
+  }
+  get g() {
+    return this.buffer[1];
+  }
+  set g(v) {
+    this.buffer[1] = v;
+  }
+  get b() {
+    return this.buffer[2];
+  }
+  set b(v) {
+    this.buffer[2] = v;
+  }
+  get a() {
+    return this.buffer[3];
+  }
+  set a(v) {
+    this.buffer[3] = v;
+  }
+  toInts() {
+    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(fn) {
+    return [fn(this.buffer[0]), fn(this.buffer[1]), fn(this.buffer[2]), fn(this.buffer[3])];
+  }
+  toString() {
+    const [r, g, b, a] = this.toInts();
+    return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+  }
+  equals(other) {
+    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];
+  }
+};
+var CSS_COLOR_NAMES = {
+  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"
+};
+function hexToRgb(hex) {
+  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);
+}
+function rgbToHex(rgb) {
+  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")}`;
+}
+function hsvToRgb(h, s, v) {
+  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);
+}
+function parseColor(color) {
+  if (color instanceof RGBA) return color;
+  if (typeof color !== "string") return RGBA.fromValues(1, 1, 1, 1);
+  const lower = color.toLowerCase().trim();
+  if (CSS_COLOR_NAMES[lower]) {
+    return hexToRgb(CSS_COLOR_NAMES[lower]);
+  }
+  if (lower.startsWith("#")) {
+    return hexToRgb(lower);
+  }
+  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);
+}
+
+// src/core-shims/types.ts
+var 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
+};
+var ATTRIBUTE_BASE_BITS = 8;
+var ATTRIBUTE_BASE_MASK = 255;
+function getBaseAttributes(attr) {
+  return attr & 255;
+}
+var DebugOverlayCorner = /* @__PURE__ */ ((DebugOverlayCorner2) => {
+  DebugOverlayCorner2[DebugOverlayCorner2["topLeft"] = 0] = "topLeft";
+  DebugOverlayCorner2[DebugOverlayCorner2["topRight"] = 1] = "topRight";
+  DebugOverlayCorner2[DebugOverlayCorner2["bottomLeft"] = 2] = "bottomLeft";
+  DebugOverlayCorner2[DebugOverlayCorner2["bottomRight"] = 3] = "bottomRight";
+  return DebugOverlayCorner2;
+})(DebugOverlayCorner || {});
+
+// src/core-shims/index.ts
+__reExport(core_shims_exports, Box_star);
+__reExport(core_shims_exports, Text_star);
+__reExport(core_shims_exports, TextNode_star);
+__reExport(core_shims_exports, Code_star);
+__reExport(core_shims_exports, Diff_star);
+__reExport(core_shims_exports, Input_star);
+__reExport(core_shims_exports, Select_star);
+__reExport(core_shims_exports, TabSelect_star);
+__reExport(core_shims_exports, Textarea_star);
+__reExport(core_shims_exports, ScrollBox_star);
+__reExport(core_shims_exports, ScrollBar_star);
+__reExport(core_shims_exports, Slider_star);
+__reExport(core_shims_exports, ASCIIFont_star);
+__reExport(core_shims_exports, LineNumberRenderable_star);
+__reExport(core_shims_exports, Markdown_star);
+__reExport(core_shims_exports, FrameBuffer_star);
+__reExport(core_shims_exports, TextBufferRenderable_star);
+import {
+  Renderable,
+  BaseRenderable,
+  RootRenderable,
+  LayoutEvents,
+  RenderableEvents,
+  isRenderable
+} from "../../../../opentui/packages/core/src/Renderable";
+import {
+  BorderChars,
+  BorderCharArrays,
+  isValidBorderStyle,
+  parseBorderStyle,
+  getBorderFromSides,
+  getBorderSides,
+  borderCharsToArray
+} from "../../../../opentui/packages/core/src/lib/border";
+import {
+  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";
+import {
+  parseAlign,
+  parseAlignItems,
+  parseFlexDirection,
+  parseJustify,
+  parseOverflow,
+  parsePositionType,
+  parseWrap
+} from "../../../../opentui/packages/core/src/lib/yoga.options";
+import {
+  validateOptions,
+  isPositionType,
+  isDimensionType,
+  isFlexBasisType,
+  isSizeType,
+  isMarginType,
+  isPaddingType,
+  isPositionTypeType,
+  isOverflowType
+} from "../../../../opentui/packages/core/src/lib/renderable.validations";
+import {
+  Selection,
+  convertGlobalToLocalSelection
+} from "../../../../opentui/packages/core/src/lib/selection";
+import { maybeMakeRenderable } from "../../../../opentui/packages/core/src/renderables/composition/vnode";
+import * as Box_star from "../../../../opentui/packages/core/src/renderables/Box";
+import * as Text_star from "../../../../opentui/packages/core/src/renderables/Text";
+import * as TextNode_star from "../../../../opentui/packages/core/src/renderables/TextNode";
+import * as Code_star from "../../../../opentui/packages/core/src/renderables/Code";
+import * as Diff_star from "../../../../opentui/packages/core/src/renderables/Diff";
+import * as Input_star from "../../../../opentui/packages/core/src/renderables/Input";
+import * as Select_star from "../../../../opentui/packages/core/src/renderables/Select";
+import * as TabSelect_star from "../../../../opentui/packages/core/src/renderables/TabSelect";
+import * as Textarea_star from "../../../../opentui/packages/core/src/renderables/Textarea";
+import * as ScrollBox_star from "../../../../opentui/packages/core/src/renderables/ScrollBox";
+import * as ScrollBar_star from "../../../../opentui/packages/core/src/renderables/ScrollBar";
+import * as Slider_star from "../../../../opentui/packages/core/src/renderables/Slider";
+import * as ASCIIFont_star from "../../../../opentui/packages/core/src/renderables/ASCIIFont";
+import * as LineNumberRenderable_star from "../../../../opentui/packages/core/src/renderables/LineNumberRenderable";
+import * as Markdown_star from "../../../../opentui/packages/core/src/renderables/Markdown";
+import * as FrameBuffer_star from "../../../../opentui/packages/core/src/renderables/FrameBuffer";
+import * as TextBufferRenderable_star from "../../../../opentui/packages/core/src/renderables/TextBufferRenderable";
+
+// src/browser-text-buffer.ts
+var BrowserTextBuffer = class _BrowserTextBuffer {
+  _text = "";
+  _chunks = [];
+  _defaultFg = null;
+  _defaultBg = null;
+  _defaultAttributes = 0;
+  _syntaxStyle = null;
+  _tabWidth = 4;
+  _widthMethod;
+  constructor(widthMethod) {
+    this._widthMethod = widthMethod;
+  }
+  static create(widthMethod) {
+    return new _BrowserTextBuffer(widthMethod);
+  }
+  // Compat property
+  get ptr() {
+    return 1;
+  }
+  get length() {
+    return this._text.length;
+  }
+  get byteSize() {
+    return new TextEncoder().encode(this._text).length;
+  }
+  setText(text) {
+    this._text = text;
+    this._chunks = [
+      {
+        __isChunk: true,
+        text,
+        fg: this._defaultFg ?? void 0,
+        bg: this._defaultBg ?? void 0,
+        attributes: this._defaultAttributes
+      }
+    ];
+  }
+  append(text) {
+    this._text += text;
+    this._chunks.push({
+      __isChunk: true,
+      text,
+      fg: this._defaultFg ?? void 0,
+      bg: this._defaultBg ?? void 0,
+      attributes: this._defaultAttributes
+    });
+  }
+  setStyledText(styledText) {
+    this._chunks = styledText.chunks.map((chunk) => ({
+      __isChunk: true,
+      text: chunk.text,
+      fg: chunk.fg ?? this._defaultFg ?? void 0,
+      bg: chunk.bg ?? this._defaultBg ?? void 0,
+      attributes: chunk.attributes ?? this._defaultAttributes,
+      link: chunk.link
+    }));
+    this._text = this._chunks.map((c) => c.text).join("");
+  }
+  getPlainText() {
+    return this._text;
+  }
+  getTextRange(startOffset, endOffset) {
+    return this._text.slice(startOffset, endOffset);
+  }
+  getLineCount() {
+    if (this._text.length === 0) return 0;
+    return this._text.split("\n").length;
+  }
+  getChunks() {
+    return this._chunks;
+  }
+  setDefaultFg(fg2) {
+    this._defaultFg = fg2;
+  }
+  setDefaultBg(bg2) {
+    this._defaultBg = bg2;
+  }
+  setDefaultAttributes(attributes) {
+    this._defaultAttributes = attributes ?? 0;
+  }
+  resetDefaults() {
+    this._defaultFg = null;
+    this._defaultBg = null;
+    this._defaultAttributes = 0;
+  }
+  get defaultFg() {
+    return this._defaultFg;
+  }
+  get defaultBg() {
+    return this._defaultBg;
+  }
+  get defaultAttributes() {
+    return this._defaultAttributes;
+  }
+  setSyntaxStyle(style) {
+    this._syntaxStyle = style;
+  }
+  getSyntaxStyle() {
+    return this._syntaxStyle;
+  }
+  setTabWidth(width) {
+    this._tabWidth = width;
+  }
+  getTabWidth() {
+    return this._tabWidth;
+  }
+  addHighlightByCharRange(_highlight) {
+  }
+  addHighlight(_lineIdx, _highlight) {
+  }
+  removeHighlightsByRef(_hlRef) {
+  }
+  clearLineHighlights(_lineIdx) {
+  }
+  clearAllHighlights() {
+  }
+  getLineHighlights(_lineIdx) {
+    return [];
+  }
+  getHighlightCount() {
+    return 0;
+  }
+  loadFile(_path) {
+  }
+  clear() {
+    this._text = "";
+    this._chunks = [];
+  }
+  reset() {
+    this.clear();
+    this.resetDefaults();
+  }
+  destroy() {
+    this._text = "";
+    this._chunks = [];
+  }
+};
+
+// src/browser-text-buffer-view.ts
+var defaultFg = {
+  r: 1,
+  g: 1,
+  b: 1,
+  a: 1,
+  buffer: new Float32Array([1, 1, 1, 1])
+};
+var defaultBg = {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0,
+  buffer: new Float32Array([0, 0, 0, 0])
+};
+var BrowserTextBufferView = class _BrowserTextBufferView {
+  textBuffer;
+  _wrapWidth = null;
+  _wrapMode = "word";
+  _viewportX = 0;
+  _viewportY = 0;
+  _viewportWidth = 0;
+  _viewportHeight = 0;
+  _truncate = false;
+  _selection = null;
+  _selectionBg;
+  _selectionFg;
+  constructor(textBuffer) {
+    this.textBuffer = textBuffer;
+  }
+  static create(textBuffer) {
+    return new _BrowserTextBufferView(textBuffer);
+  }
+  // Compat
+  get ptr() {
+    return 1;
+  }
+  get lineInfo() {
+    const lines = this.getAllWrappedLines();
+    const lineStarts = [];
+    const lineWidths = [];
+    const lineSources = [];
+    const lineWraps = [];
+    let maxWidth = 0;
+    let offset = 0;
+    for (let i = 0; i < lines.length; i++) {
+      lineStarts.push(offset);
+      const lineText = lines[i].map((c) => c.text).join("");
+      const w = lineText.length;
+      lineWidths.push(w);
+      lineSources.push(0);
+      lineWraps.push(0);
+      if (w > maxWidth) maxWidth = w;
+      offset += lineText.length + 1;
+    }
+    return { lineStarts, lineWidths, maxLineWidth: maxWidth, lineSources, lineWraps };
+  }
+  get logicalLineInfo() {
+    return this.lineInfo;
+  }
+  setSelection(start, end, bgColor, fgColor) {
+    this._selection = { start, end };
+    this._selectionBg = bgColor;
+    this._selectionFg = fgColor;
+  }
+  updateSelection(end, bgColor, fgColor) {
+    if (this._selection) {
+      this._selection.end = end;
+    }
+    if (bgColor) this._selectionBg = bgColor;
+    if (fgColor) this._selectionFg = fgColor;
+  }
+  resetSelection() {
+    this._selection = null;
+  }
+  getSelection() {
+    return this._selection;
+  }
+  hasSelection() {
+    return this._selection !== null;
+  }
+  setLocalSelection(_anchorX, _anchorY, _focusX, _focusY, _bgColor, _fgColor) {
+    return false;
+  }
+  updateLocalSelection(_anchorX, _anchorY, _focusX, _focusY, _bgColor, _fgColor) {
+    return false;
+  }
+  resetLocalSelection() {
+  }
+  getSelectedText() {
+    if (!this._selection) return "";
+    const text = this.textBuffer.getPlainText();
+    const start = Math.min(this._selection.start, this._selection.end);
+    const end = Math.max(this._selection.start, this._selection.end);
+    return text.slice(start, end);
+  }
+  getPlainText() {
+    return this.textBuffer.getPlainText();
+  }
+  setWrapWidth(width) {
+    this._wrapWidth = width;
+  }
+  setWrapMode(mode) {
+    this._wrapMode = mode;
+  }
+  setViewportSize(width, height) {
+    this._viewportWidth = width;
+    this._viewportHeight = height;
+  }
+  setViewport(x, y, width, height) {
+    this._viewportX = x;
+    this._viewportY = y;
+    this._viewportWidth = width;
+    this._viewportHeight = height;
+  }
+  setTabIndicator(_indicator) {
+  }
+  setTabIndicatorColor(_color) {
+  }
+  setTruncate(truncate) {
+    this._truncate = truncate;
+  }
+  getAllWrappedLines() {
+    const chunks = this.textBuffer.getChunks();
+    if (chunks.length === 0) return [];
+    const dfg = this.textBuffer.defaultFg ?? defaultFg;
+    const dbg = this.textBuffer.defaultBg ?? defaultBg;
+    const logicalLines = [[]];
+    for (const chunk of chunks) {
+      const parts = chunk.text.split("\n");
+      for (let i = 0; i < parts.length; i++) {
+        if (i > 0) {
+          logicalLines.push([]);
+        }
+        if (parts[i].length > 0) {
+          const vlc = {
+            text: parts[i],
+            fg: chunk.fg ?? dfg,
+            bg: chunk.bg ?? dbg,
+            attributes: chunk.attributes ?? 0
+          };
+          if (chunk.link) vlc.link = chunk.link;
+          logicalLines[logicalLines.length - 1].push(vlc);
+        }
+      }
+    }
+    if (this._wrapMode === "none" || !this._wrapWidth || this._wrapWidth <= 0) {
+      return logicalLines;
+    }
+    const wrappedLines = [];
+    const wrapWidth = this._wrapWidth;
+    for (const logicalLine of logicalLines) {
+      const lineText = logicalLine.map((c) => c.text).join("");
+      if (lineText.length <= wrapWidth) {
+        wrappedLines.push(logicalLine);
+        continue;
+      }
+      if (this._wrapMode === "char") {
+        let pos = 0;
+        while (pos < lineText.length) {
+          const end = Math.min(pos + wrapWidth, lineText.length);
+          const sliceChunks = this.sliceChunks(logicalLine, pos, end);
+          wrappedLines.push(sliceChunks);
+          pos = end;
+        }
+      } else {
+        let pos = 0;
+        while (pos < lineText.length) {
+          let end = Math.min(pos + wrapWidth, lineText.length);
+          if (end < lineText.length) {
+            let breakPos = end;
+            while (breakPos > pos && lineText[breakPos] !== " ") {
+              breakPos--;
+            }
+            if (breakPos > pos) {
+              end = breakPos + 1;
+            }
+          }
+          const sliceChunks = this.sliceChunks(logicalLine, pos, end);
+          wrappedLines.push(sliceChunks);
+          pos = end;
+        }
+      }
+    }
+    return wrappedLines;
+  }
+  sliceChunks(chunks, start, end) {
+    const result = [];
+    let offset = 0;
+    for (const chunk of chunks) {
+      const chunkStart = offset;
+      const chunkEnd = offset + chunk.text.length;
+      if (chunkEnd <= start || chunkStart >= end) {
+        offset = chunkEnd;
+        continue;
+      }
+      const sliceStart = Math.max(0, start - chunkStart);
+      const sliceEnd = Math.min(chunk.text.length, end - chunkStart);
+      const slicedText = chunk.text.slice(sliceStart, sliceEnd);
+      if (slicedText.length > 0) {
+        const sliced = {
+          text: slicedText,
+          fg: chunk.fg,
+          bg: chunk.bg,
+          attributes: chunk.attributes
+        };
+        if (chunk.link) sliced.link = chunk.link;
+        result.push(sliced);
+      }
+      offset = chunkEnd;
+    }
+    return result;
+  }
+  measureForDimensions(width, height) {
+    const oldWrapWidth = this._wrapWidth;
+    if (width > 0 && this._wrapMode !== "none") {
+      this._wrapWidth = width;
+    } else if (width === 0) {
+      this._wrapWidth = null;
+    }
+    const lines = this.getAllWrappedLines();
+    this._wrapWidth = oldWrapWidth;
+    let maxWidth = 0;
+    for (const line of lines) {
+      const lineWidth = line.reduce((sum, c) => sum + c.text.length, 0);
+      if (lineWidth > maxWidth) maxWidth = lineWidth;
+    }
+    return {
+      lineCount: lines.length,
+      maxWidth
+    };
+  }
+  getVirtualLineCount() {
+    return this.getAllWrappedLines().length;
+  }
+  getVisibleLines() {
+    const allLines = this.getAllWrappedLines();
+    if (allLines.length === 0) return null;
+    const startLine = this._viewportY;
+    const endLine = this._viewportHeight > 0 ? Math.min(startLine + this._viewportHeight, allLines.length) : allLines.length;
+    const visibleLines = [];
+    for (let i = startLine; i < endLine; i++) {
+      if (i >= 0 && i < allLines.length) {
+        visibleLines.push({ chunks: allLines[i] });
+      }
+    }
+    return visibleLines;
+  }
+  destroy() {
+  }
+};
+
+// src/browser-syntax-style.ts
+var BrowserSyntaxStyle = class _BrowserSyntaxStyle {
+  _destroyed = false;
+  static create() {
+    return new _BrowserSyntaxStyle();
+  }
+  static fromTheme(_theme) {
+    return new _BrowserSyntaxStyle();
+  }
+  static fromStyles(_styles) {
+    return new _BrowserSyntaxStyle();
+  }
+  get ptr() {
+    return 0;
+  }
+  registerStyle(_name, _style) {
+    return 0;
+  }
+  resolveStyleId(_name) {
+    return null;
+  }
+  getStyleId(_name) {
+    return null;
+  }
+  getStyleCount() {
+    return 0;
+  }
+  clearNameCache() {
+  }
+  getStyle(_name) {
+    return void 0;
+  }
+  mergeStyles(..._styleNames) {
+    return { attributes: 0 };
+  }
+  clearCache() {
+  }
+  getCacheSize() {
+    return 0;
+  }
+  getAllStyles() {
+    return /* @__PURE__ */ new Map();
+  }
+  getRegisteredNames() {
+    return [];
+  }
+  destroy() {
+    this._destroyed = true;
+  }
+};
+
+// src/browser-render-context.ts
+import { EventEmitter } from "events";
+var BrowserKeyHandler = class extends EventEmitter {
+  constructor() {
+    super();
+  }
+  processInput(_data) {
+    return false;
+  }
+};
+var BrowserInternalKeyHandler = class extends BrowserKeyHandler {
+  renderableHandlers = /* @__PURE__ */ new Map();
+  onInternal(event, handler) {
+    if (!this.renderableHandlers.has(event)) {
+      this.renderableHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this.renderableHandlers.get(event).add(handler);
+  }
+  offInternal(event, handler) {
+    const handlers = this.renderableHandlers.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+    }
+  }
+  emit(event, ...args) {
+    const hasGlobal = super.emit(event, ...args);
+    const renderableSet = this.renderableHandlers.get(event);
+    if (renderableSet && renderableSet.size > 0) {
+      for (const handler of [...renderableSet]) {
+        try {
+          handler(...args);
+        } catch (e) {
+          console.error(`[BrowserInternalKeyHandler] Error in ${event} handler:`, e);
+        }
+        if (args[0] && args[0].propagationStopped) break;
+      }
+      return true;
+    }
+    return hasGlobal;
+  }
+};
+var BrowserRenderContext = class extends EventEmitter {
+  _width;
+  _height;
+  _widthMethod;
+  _renderRequested = false;
+  _onRenderRequest = null;
+  _lifecyclePasses = /* @__PURE__ */ new Set();
+  _focusedRenderable = null;
+  keyInput;
+  _internalKeyInput;
+  constructor(width, height, widthMethod = "wcwidth") {
+    super();
+    this._width = width;
+    this._height = height;
+    this._widthMethod = widthMethod;
+    this.keyInput = new BrowserKeyHandler();
+    this._internalKeyInput = new BrowserInternalKeyHandler();
+  }
+  get width() {
+    return this._width;
+  }
+  get height() {
+    return this._height;
+  }
+  get widthMethod() {
+    return this._widthMethod;
+  }
+  get capabilities() {
+    return null;
+  }
+  get hasSelection() {
+    return false;
+  }
+  get currentFocusedRenderable() {
+    return this._focusedRenderable;
+  }
+  setOnRenderRequest(callback) {
+    this._onRenderRequest = callback;
+  }
+  resize(width, height) {
+    this._width = width;
+    this._height = height;
+    this.emit("resize", width, height);
+  }
+  // RenderContext interface methods
+  addToHitGrid(_x, _y, _width, _height, _id) {
+  }
+  pushHitGridScissorRect(_x, _y, _width, _height) {
+  }
+  popHitGridScissorRect() {
+  }
+  clearHitGridScissorRects() {
+  }
+  requestRender() {
+    if (this._renderRequested) return;
+    this._renderRequested = true;
+    this._onRenderRequest?.();
+    this._renderRequested = false;
+  }
+  setCursorPosition(_x, _y, _visible) {
+  }
+  setCursorStyle(_options) {
+  }
+  setCursorColor(_color) {
+  }
+  setMousePointer(_shape) {
+  }
+  requestLive() {
+  }
+  dropLive() {
+  }
+  getSelection() {
+    return null;
+  }
+  requestSelectionUpdate() {
+  }
+  focusRenderable(renderable) {
+    if (this._focusedRenderable && this._focusedRenderable !== renderable) {
+      this._focusedRenderable.blur?.();
+    }
+    this._focusedRenderable = renderable;
+  }
+  registerLifecyclePass(renderable) {
+    this._lifecyclePasses.add(renderable);
+  }
+  unregisterLifecyclePass(renderable) {
+    this._lifecyclePasses.delete(renderable);
+  }
+  getLifecyclePasses() {
+    return this._lifecyclePasses;
+  }
+  clearSelection() {
+  }
+  startSelection(_renderable, _x, _y) {
+  }
+  updateSelection(_currentRenderable, _x, _y, _options) {
+  }
+};
+
+// src/core-shims/index.ts
+import {
+  CliRenderer,
+  CliRenderEvents,
+  createCliRenderer
+} from "../../../../opentui/packages/core/src/renderer";
+import {
+  Timeline,
+  engine,
+  createTimeline
+} from "../../../../opentui/packages/core/src/animation/Timeline";
+import * as Yoga from "yoga-layout";
+function resolveRenderLib() {
+  return null;
+}
+function createTextAttributes(opts = {}) {
+  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;
+}
+function attributesWithLink(baseAttributes, linkId) {
+  return baseAttributes & 255 | (linkId & 16777215) << 8;
+}
+function getLinkId(attributes) {
+  return attributes >>> 8 & 16777215;
+}
+function visualizeRenderableTree(..._args) {
+}
+
+// src/browser-buffer.ts
+var CONTINUATION = 3221225472;
+var BrowserBuffer = class _BrowserBuffer {
+  id;
+  respectAlpha;
+  _width;
+  _height;
+  _widthMethod;
+  // Cell data - same layout as native OptimizedBuffer
+  char;
+  fg;
+  bg;
+  attributes;
+  scissorStack = [];
+  opacityStack = [];
+  // Link registry for clickable links
+  linkRegistry = /* @__PURE__ */ new Map();
+  nextLinkId = 1;
+  constructor(width, height, options = {}) {
+    this._width = width;
+    this._height = height;
+    this._widthMethod = options.widthMethod ?? "wcwidth";
+    this.respectAlpha = options.respectAlpha ?? false;
+    this.id = options.id ?? `browser-buffer-${Math.random().toString(36).slice(2, 8)}`;
+    const size = width * height;
+    this.char = new Uint32Array(size);
+    this.fg = new Float32Array(size * 4);
+    this.bg = new Float32Array(size * 4);
+    this.attributes = new Uint32Array(size);
+    this.char.fill(32);
+  }
+  static create(width, height, widthMethod, options) {
+    return new _BrowserBuffer(width, height, { ...options, widthMethod });
+  }
+  get width() {
+    return this._width;
+  }
+  get height() {
+    return this._height;
+  }
+  get widthMethod() {
+    return this._widthMethod;
+  }
+  get ptr() {
+    return 0;
+  }
+  get buffers() {
+    return {
+      char: this.char,
+      fg: this.fg,
+      bg: this.bg,
+      attributes: this.attributes
+    };
+  }
+  setRespectAlpha(respectAlpha) {
+    this.respectAlpha = respectAlpha;
+  }
+  getNativeId() {
+    return this.id;
+  }
+  registerLink(url) {
+    const id = this.nextLinkId++;
+    this.linkRegistry.set(id, url);
+    return id;
+  }
+  getLinkUrl(linkId) {
+    return this.linkRegistry.get(linkId);
+  }
+  isInScissor(x, y) {
+    if (this.scissorStack.length === 0) return true;
+    const rect = this.scissorStack[this.scissorStack.length - 1];
+    return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
+  }
+  getCurrentOpacityMultiplier() {
+    if (this.opacityStack.length === 0) return 1;
+    return this.opacityStack[this.opacityStack.length - 1];
+  }
+  applyOpacity(color) {
+    const multiplier = this.getCurrentOpacityMultiplier();
+    if (multiplier >= 1) return color;
+    return {
+      r: color.r,
+      g: color.g,
+      b: color.b,
+      a: color.a * multiplier,
+      buffer: new Float32Array([color.r, color.g, color.b, color.a * multiplier]),
+      toInts: color.toInts,
+      equals: color.equals,
+      map: color.map,
+      toString: color.toString
+    };
+  }
+  clear(bg2) {
+    const size = this._width * this._height;
+    this.char.fill(32);
+    this.attributes.fill(0);
+    this.linkRegistry.clear();
+    this.nextLinkId = 1;
+    if (bg2) {
+      for (let i = 0; i < size; i++) {
+        const offset = i * 4;
+        this.bg[offset] = bg2.r;
+        this.bg[offset + 1] = bg2.g;
+        this.bg[offset + 2] = bg2.b;
+        this.bg[offset + 3] = bg2.a;
+        this.fg[offset] = 0;
+        this.fg[offset + 1] = 0;
+        this.fg[offset + 2] = 0;
+        this.fg[offset + 3] = 0;
+      }
+    } else {
+      this.fg.fill(0);
+      this.bg.fill(0);
+    }
+  }
+  setCell(x, y, char, fgColor, bgColor, attr = 0) {
+    if (x < 0 || x >= this._width || y < 0 || y >= this._height) return;
+    if (!this.isInScissor(x, y)) return;
+    const idx = y * this._width + x;
+    const offset = idx * 4;
+    const effectiveBg = this.applyOpacity(bgColor);
+    const effectiveFg = this.applyOpacity(fgColor);
+    this.char[idx] = char.codePointAt(0) ?? 32;
+    this.attributes[idx] = attr;
+    this.fg[offset] = effectiveFg.r;
+    this.fg[offset + 1] = effectiveFg.g;
+    this.fg[offset + 2] = effectiveFg.b;
+    this.fg[offset + 3] = effectiveFg.a;
+    this.bg[offset] = effectiveBg.r;
+    this.bg[offset + 1] = effectiveBg.g;
+    this.bg[offset + 2] = effectiveBg.b;
+    this.bg[offset + 3] = effectiveBg.a;
+  }
+  setCellWithAlphaBlending(x, y, char, fgColor, bgColor, attr = 0) {
+    this.setCell(x, y, char, fgColor, bgColor, attr);
+  }
+  drawChar(charCode, x, y, fgColor, bgColor, attr = 0) {
+    if (x < 0 || x >= this._width || y < 0 || y >= this._height) return;
+    if (!this.isInScissor(x, y)) return;
+    const idx = y * this._width + x;
+    const offset = idx * 4;
+    const effectiveBg = this.applyOpacity(bgColor);
+    const effectiveFg = this.applyOpacity(fgColor);
+    this.char[idx] = charCode;
+    this.attributes[idx] = attr;
+    this.fg[offset] = effectiveFg.r;
+    this.fg[offset + 1] = effectiveFg.g;
+    this.fg[offset + 2] = effectiveFg.b;
+    this.fg[offset + 3] = effectiveFg.a;
+    this.bg[offset] = effectiveBg.r;
+    this.bg[offset + 1] = effectiveBg.g;
+    this.bg[offset + 2] = effectiveBg.b;
+    this.bg[offset + 3] = effectiveBg.a;
+  }
+  drawText(text, x, y, fgColor, bgColor, attr = 0, _selection) {
+    const transparentBg = {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      buffer: new Float32Array([0, 0, 0, 0])
+    };
+    const bg2 = bgColor ?? transparentBg;
+    let curX = x;
+    for (const ch of text) {
+      if (curX >= this._width) break;
+      if (curX >= 0) {
+        this.setCell(curX, y, ch, fgColor, bg2, attr);
+      }
+      curX++;
+    }
+  }
+  fillRect(x, y, width, height, bgColor) {
+    for (let row = y; row < y + height && row < this._height; row++) {
+      for (let col = x; col < x + width && col < this._width; col++) {
+        if (col < 0 || row < 0) continue;
+        if (!this.isInScissor(col, row)) continue;
+        const idx = row * this._width + col;
+        const offset = idx * 4;
+        const effectiveBg = this.applyOpacity(bgColor);
+        this.char[idx] = 32;
+        this.bg[offset] = effectiveBg.r;
+        this.bg[offset + 1] = effectiveBg.g;
+        this.bg[offset + 2] = effectiveBg.b;
+        this.bg[offset + 3] = effectiveBg.a;
+      }
+    }
+  }
+  drawBox(options) {
+    const {
+      x,
+      y,
+      width,
+      height,
+      border,
+      borderColor,
+      backgroundColor,
+      shouldFill = true,
+      title,
+      titleAlignment = "left"
+    } = options;
+    if (width <= 0 || height <= 0) return;
+    const sides = {
+      top: border === true || Array.isArray(border) && border.includes("top"),
+      right: border === true || Array.isArray(border) && border.includes("right"),
+      bottom: border === true || Array.isArray(border) && border.includes("bottom"),
+      left: border === true || Array.isArray(border) && border.includes("left")
+    };
+    const borderChars = options.customBorderChars ?? this.getDefaultBorderChars(options.borderStyle);
+    if (shouldFill) {
+      const fillStartX = x + (sides.left ? 1 : 0);
+      const fillStartY = y + (sides.top ? 1 : 0);
+      const fillWidth = width - (sides.left ? 1 : 0) - (sides.right ? 1 : 0);
+      const fillHeight = height - (sides.top ? 1 : 0) - (sides.bottom ? 1 : 0);
+      if (fillWidth > 0 && fillHeight > 0) {
+        this.fillRect(fillStartX, fillStartY, fillWidth, fillHeight, backgroundColor);
+      }
+    }
+    if (!border) return;
+    const transparent = { r: 0, g: 0, b: 0, a: 0, buffer: new Float32Array([0, 0, 0, 0]) };
+    const topLeft = borderChars[0];
+    const topRight = borderChars[1];
+    const bottomLeft = borderChars[2];
+    const bottomRight = borderChars[3];
+    const horizontal = borderChars[4];
+    const vertical = borderChars[5];
+    if (sides.top) {
+      if (sides.left) this.drawChar(topLeft, x, y, borderColor, transparent);
+      for (let col = 1; col < width - 1; col++) {
+        this.drawChar(horizontal, x + col, y, borderColor, transparent);
+      }
+      if (sides.right && width > 1) this.drawChar(topRight, x + width - 1, y, borderColor, transparent);
+    }
+    if (sides.bottom && height > 1) {
+      if (sides.left) this.drawChar(bottomLeft, x, y + height - 1, borderColor, transparent);
+      for (let col = 1; col < width - 1; col++) {
+        this.drawChar(horizontal, x + col, y + height - 1, borderColor, transparent);
+      }
+      if (sides.right && width > 1)
+        this.drawChar(bottomRight, x + width - 1, y + height - 1, borderColor, transparent);
+    }
+    if (sides.left) {
+      for (let row = 1; row < height - 1; row++) {
+        this.drawChar(vertical, x, y + row, borderColor, transparent);
+      }
+    }
+    if (sides.right && width > 1) {
+      for (let row = 1; row < height - 1; row++) {
+        this.drawChar(vertical, x + width - 1, y + row, borderColor, transparent);
+      }
+    }
+    if (title && sides.top && width > 4) {
+      const maxTitleLen = width - 4;
+      const truncatedTitle = title.length > maxTitleLen ? title.slice(0, maxTitleLen) : title;
+      let titleX;
+      if (titleAlignment === "center") {
+        titleX = x + Math.floor((width - truncatedTitle.length) / 2);
+      } else if (titleAlignment === "right") {
+        titleX = x + width - truncatedTitle.length - 2;
+      } else {
+        titleX = x + 2;
+      }
+      this.drawText(truncatedTitle, titleX, y, borderColor, transparent);
+    }
+  }
+  getDefaultBorderChars(borderStyle) {
+    const styles = {
+      rounded: [9581, 9582, 9584, 9583, 9472, 9474, 9516, 9524, 9500, 9508, 9532],
+      single: [9484, 9488, 9492, 9496, 9472, 9474, 9516, 9524, 9500, 9508, 9532],
+      double: [9556, 9559, 9562, 9565, 9552, 9553, 9574, 9577, 9568, 9571, 9580],
+      heavy: [9487, 9491, 9495, 9499, 9473, 9475, 9523, 9531, 9507, 9515, 9547]
+    };
+    const chars = styles[borderStyle ?? "rounded"] ?? styles.rounded;
+    return new Uint32Array(chars);
+  }
+  pushScissorRect(x, y, width, height) {
+    if (this.scissorStack.length > 0) {
+      const current = this.scissorStack[this.scissorStack.length - 1];
+      const nx = Math.max(x, current.x);
+      const ny = Math.max(y, current.y);
+      const nw = Math.min(x + width, current.x + current.width) - nx;
+      const nh = Math.min(y + height, current.y + current.height) - ny;
+      this.scissorStack.push({ x: nx, y: ny, width: Math.max(0, nw), height: Math.max(0, nh) });
+    } else {
+      this.scissorStack.push({ x, y, width, height });
+    }
+  }
+  popScissorRect() {
+    this.scissorStack.pop();
+  }
+  clearScissorRects() {
+    this.scissorStack = [];
+  }
+  pushOpacity(opacity) {
+    const current = this.getCurrentOpacityMultiplier();
+    this.opacityStack.push(current * opacity);
+  }
+  popOpacity() {
+    this.opacityStack.pop();
+  }
+  getCurrentOpacity() {
+    return this.getCurrentOpacityMultiplier();
+  }
+  clearOpacity() {
+    this.opacityStack = [];
+  }
+  resize(width, height) {
+    this._width = width;
+    this._height = height;
+    const size = width * height;
+    this.char = new Uint32Array(size);
+    this.fg = new Float32Array(size * 4);
+    this.bg = new Float32Array(size * 4);
+    this.attributes = new Uint32Array(size);
+    this.char.fill(32);
+  }
+  // Read buffer into CapturedLine[] for testing
+  getSpanLines() {
+    const lines = [];
+    for (let row = 0; row < this._height; row++) {
+      const spans = [];
+      let currentSpan = null;
+      for (let col = 0; col < this._width; col++) {
+        const idx = row * this._width + col;
+        const offset = idx * 4;
+        if (this.attributes[idx] & CONTINUATION) continue;
+        const charCode = this.char[idx];
+        const ch = charCode === 0 ? " " : String.fromCodePoint(charCode);
+        const fgR = this.fg[offset];
+        const fgG = this.fg[offset + 1];
+        const fgB = this.fg[offset + 2];
+        const fgA = this.fg[offset + 3];
+        const bgR = this.bg[offset];
+        const bgG = this.bg[offset + 1];
+        const bgB = this.bg[offset + 2];
+        const bgA = this.bg[offset + 3];
+        const attr = this.attributes[idx] & 255;
+        const fg2 = {
+          r: fgR,
+          g: fgG,
+          b: fgB,
+          a: fgA,
+          buffer: new Float32Array([fgR, fgG, fgB, fgA])
+        };
+        const bg2 = {
+          r: bgR,
+          g: bgG,
+          b: bgB,
+          a: bgA,
+          buffer: new Float32Array([bgR, bgG, bgB, bgA])
+        };
+        if (currentSpan && currentSpan.fg.r === fgR && currentSpan.fg.g === fgG && currentSpan.fg.b === fgB && currentSpan.fg.a === fgA && currentSpan.bg.r === bgR && currentSpan.bg.g === bgG && currentSpan.bg.b === bgB && currentSpan.bg.a === bgA && currentSpan.attributes === attr) {
+          currentSpan.text += ch;
+          currentSpan.width += 1;
+        } else {
+          if (currentSpan) spans.push(currentSpan);
+          currentSpan = { text: ch, fg: fg2, bg: bg2, attributes: attr, width: 1 };
+        }
+      }
+      if (currentSpan) spans.push(currentSpan);
+      lines.push({ spans });
+    }
+    return lines;
+  }
+  // Draw a text buffer view into the buffer
+  drawTextBufferView(view, x, y) {
+    if (!view || !view.getVisibleLines) return;
+    const lines = view.getVisibleLines();
+    if (!lines) return;
+    for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+      const line = lines[lineIdx];
+      if (!line) continue;
+      let curX = x;
+      for (const chunk of line.chunks) {
+        const text = chunk.text;
+        const fgColor = chunk.fg;
+        const bgColor = chunk.bg;
+        let attr = chunk.attributes ?? 0;
+        if (chunk.link && chunk.link.url) {
+          const linkId = this.registerLink(chunk.link.url);
+          attr = attributesWithLink(attr, linkId);
+        }
+        for (const ch of text) {
+          if (curX >= this._width) break;
+          if (curX >= 0 && y + lineIdx >= 0 && y + lineIdx < this._height) {
+            this.setCell(curX, y + lineIdx, ch, fgColor, bgColor, attr);
+          }
+          curX++;
+        }
+      }
+    }
+  }
+  drawTextBuffer(textBufferView, x, y) {
+    this.drawTextBufferView(textBufferView, x, y);
+  }
+  drawFrameBuffer(destX, destY, frameBuffer, sourceX = 0, sourceY = 0, sourceWidth, sourceHeight) {
+    const sw = sourceWidth ?? frameBuffer.width;
+    const sh = sourceHeight ?? frameBuffer.height;
+    const srcChar = frameBuffer.char;
+    const srcFg = frameBuffer.fg;
+    const srcBg = frameBuffer.bg;
+    const srcAttr = frameBuffer.attributes;
+    const srcCols = frameBuffer.width;
+    for (let row = 0; row < sh; row++) {
+      const srcRow = sourceY + row;
+      const dstRow = destY + row;
+      if (srcRow < 0 || srcRow >= frameBuffer.height) continue;
+      if (dstRow < 0 || dstRow >= this._height) continue;
+      for (let col = 0; col < sw; col++) {
+        const srcCol = sourceX + col;
+        const dstCol = destX + col;
+        if (srcCol < 0 || srcCol >= frameBuffer.width) continue;
+        if (dstCol < 0 || dstCol >= this._width) continue;
+        if (!this.isInScissor(dstCol, dstRow)) continue;
+        const srcIdx = srcRow * srcCols + srcCol;
+        const dstIdx = dstRow * this._width + dstCol;
+        const srcOffset = srcIdx * 4;
+        const dstOffset = dstIdx * 4;
+        this.char[dstIdx] = srcChar[srcIdx];
+        this.attributes[dstIdx] = srcAttr[srcIdx];
+        const fgA = srcFg[srcOffset + 3];
+        const opacityMul = this.getCurrentOpacityMultiplier();
+        this.fg[dstOffset] = srcFg[srcOffset];
+        this.fg[dstOffset + 1] = srcFg[srcOffset + 1];
+        this.fg[dstOffset + 2] = srcFg[srcOffset + 2];
+        this.fg[dstOffset + 3] = fgA * opacityMul;
+        const bgA = srcBg[srcOffset + 3];
+        this.bg[dstOffset] = srcBg[srcOffset];
+        this.bg[dstOffset + 1] = srcBg[srcOffset + 1];
+        this.bg[dstOffset + 2] = srcBg[srcOffset + 2];
+        this.bg[dstOffset + 3] = bgA * opacityMul;
+      }
+    }
+  }
+  drawEditorView(editorView, x, y) {
+    if (!editorView) return;
+    const viewport = editorView.getViewport();
+    const text = editorView.getText();
+    const lines = text.split("\n");
+    const dfg = editorView.editBuffer?._defaultFg ?? {
+      r: 1,
+      g: 1,
+      b: 1,
+      a: 1,
+      buffer: new Float32Array([1, 1, 1, 1])
+    };
+    const dbg = editorView.editBuffer?._defaultBg ?? {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      buffer: new Float32Array([0, 0, 0, 0])
+    };
+    const visibleRows = viewport.height > 0 ? viewport.height : this._height - y;
+    if (text === "" && editorView._placeholderChunks && editorView._placeholderChunks.length > 0) {
+      let curX = x;
+      for (const chunk of editorView._placeholderChunks) {
+        const chunkFg = chunk.fg ?? dfg;
+        const chunkBg = chunk.bg ?? dbg;
+        const attr = (chunk.attributes ?? 0) | 2;
+        for (const ch of chunk.text) {
+          if (curX >= this._width) break;
+          if (curX >= 0 && y >= 0 && y < this._height) {
+            this.setCell(curX, y, ch, chunkFg, chunkBg, attr);
+          }
+          curX++;
+        }
+      }
+    } else {
+      for (let row = 0; row < visibleRows; row++) {
+        const lineIdx = viewport.offsetY + row;
+        if (lineIdx < 0 || lineIdx >= lines.length) continue;
+        const dstRow = y + row;
+        if (dstRow < 0 || dstRow >= this._height) continue;
+        const line = lines[lineIdx];
+        for (let col = 0; col < line.length; col++) {
+          const srcCol = viewport.offsetX + col;
+          if (srcCol < 0 || srcCol >= line.length) continue;
+          const dstCol = x + col;
+          if (dstCol < 0 || dstCol >= this._width) break;
+          this.setCell(dstCol, dstRow, line[srcCol], dfg, dbg, 0);
+        }
+      }
+    }
+    const cursor = editorView.getVisualCursor();
+    if (cursor) {
+      const cursorX = x + cursor.visualCol;
+      const cursorY = y + cursor.visualRow;
+      if (cursorX >= 0 && cursorX < this._width && cursorY >= 0 && cursorY < this._height) {
+        const idx = cursorY * this._width + cursorX;
+        const charCode = this.char[idx];
+        const ch = charCode === 0 || charCode === 32 ? " " : String.fromCodePoint(charCode);
+        this.setCell(cursorX, cursorY, ch, dfg, dbg, 32);
+      }
+    }
+  }
+  drawSuperSampleBuffer() {
+  }
+  drawPackedBuffer() {
+  }
+  drawGrayscaleBuffer() {
+  }
+  drawGrayscaleBufferSupersampled() {
+  }
+  drawGrid() {
+  }
+  encodeUnicode(_text) {
+    return null;
+  }
+  freeUnicode() {
+  }
+  getRealCharBytes() {
+    return new Uint8Array(0);
+  }
+  destroy() {
+  }
+};
+
+// src/canvas-painter.ts
+var TextAttributes2 = {
+  BOLD: 1 << 0,
+  DIM: 1 << 1,
+  ITALIC: 1 << 2,
+  UNDERLINE: 1 << 3,
+  UNDERLINE_DASHED: 1 << 4,
+  INVERSE: 1 << 5,
+  UNDERLINE_DOTTED: 1 << 6
+};
+var CONTINUATION2 = 3221225472;
+var BOX_DRAWING_MAP = {
+  // Light lines
+  9472: { left: true, right: true, type: "light" },
+  // ─
+  9474: { up: true, down: true, type: "light" },
+  // │
+  9484: { right: true, down: true, type: "light" },
+  // ┌
+  9488: { left: true, down: true, type: "light" },
+  // ┐
+  9492: { right: true, up: true, type: "light" },
+  // └
+  9496: { left: true, up: true, type: "light" },
+  // ┘
+  9500: { up: true, down: true, right: true, type: "light" },
+  // ├
+  9508: { up: true, down: true, left: true, type: "light" },
+  // ┤
+  9516: { left: true, right: true, down: true, type: "light" },
+  // ┬
+  9524: { left: true, right: true, up: true, type: "light" },
+  // ┴
+  9532: { left: true, right: true, up: true, down: true, type: "light" },
+  // ┼
+  // Heavy lines
+  9473: { left: true, right: true, type: "heavy" },
+  // ━
+  9475: { up: true, down: true, type: "heavy" },
+  // ┃
+  9487: { right: true, down: true, type: "heavy" },
+  // ┏
+  9491: { left: true, down: true, type: "heavy" },
+  // ┓
+  9495: { right: true, up: true, type: "heavy" },
+  // ┗
+  9499: { left: true, up: true, type: "heavy" },
+  // ┛
+  9507: { up: true, down: true, right: true, type: "heavy" },
+  // ┣
+  9515: { up: true, down: true, left: true, type: "heavy" },
+  // ┫
+  9523: { left: true, right: true, down: true, type: "heavy" },
+  // ┳
+  9531: { left: true, right: true, up: true, type: "heavy" },
+  // ┻
+  9547: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╋
+  // Light/heavy mixed (treat as light for simplicity of joins)
+  9485: { right: true, down: true, type: "heavy" },
+  // ┍
+  9486: { right: true, down: true, type: "heavy" },
+  // ┎
+  9489: { left: true, down: true, type: "heavy" },
+  // ┑
+  9490: { left: true, down: true, type: "heavy" },
+  // ┒
+  9493: { right: true, up: true, type: "heavy" },
+  // ┕
+  9494: { right: true, up: true, type: "heavy" },
+  // ┖
+  9497: { left: true, up: true, type: "heavy" },
+  // ┙
+  9498: { left: true, up: true, type: "heavy" },
+  // ┚
+  9501: { up: true, down: true, right: true, type: "heavy" },
+  // ┝
+  9502: { up: true, down: true, right: true, type: "light" },
+  // ┞
+  9503: { up: true, down: true, right: true, type: "light" },
+  // ┟
+  9504: { up: true, down: true, right: true, type: "heavy" },
+  // ┠
+  9505: { up: true, down: true, right: true, type: "heavy" },
+  // ┡
+  9506: { up: true, down: true, right: true, type: "heavy" },
+  // ┢
+  9509: { up: true, down: true, left: true, type: "heavy" },
+  // ┥
+  9510: { up: true, down: true, left: true, type: "light" },
+  // ┦
+  9511: { up: true, down: true, left: true, type: "light" },
+  // ┧
+  9512: { up: true, down: true, left: true, type: "heavy" },
+  // ┨
+  9513: { up: true, down: true, left: true, type: "heavy" },
+  // ┩
+  9514: { up: true, down: true, left: true, type: "heavy" },
+  // ┪
+  9517: { left: true, right: true, down: true, type: "heavy" },
+  // ┭
+  9518: { left: true, right: true, down: true, type: "heavy" },
+  // ┮
+  9519: { left: true, right: true, down: true, type: "heavy" },
+  // ┯
+  9520: { left: true, right: true, down: true, type: "heavy" },
+  // ┰
+  9521: { left: true, right: true, down: true, type: "heavy" },
+  // ┱
+  9522: { left: true, right: true, down: true, type: "heavy" },
+  // ┲
+  9525: { left: true, right: true, up: true, type: "heavy" },
+  // ┵
+  9526: { left: true, right: true, up: true, type: "heavy" },
+  // ┶
+  9527: { left: true, right: true, up: true, type: "heavy" },
+  // ┷
+  9528: { left: true, right: true, up: true, type: "heavy" },
+  // ┸
+  9529: { left: true, right: true, up: true, type: "heavy" },
+  // ┹
+  9530: { left: true, right: true, up: true, type: "heavy" },
+  // ┺
+  9533: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ┽
+  9534: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ┾
+  9535: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ┿
+  9536: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╀
+  9537: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╁
+  9538: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╂
+  9539: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╃
+  9540: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╄
+  9541: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╅
+  9542: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╆
+  9543: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╇
+  9544: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╈
+  9545: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╉
+  9546: { left: true, right: true, up: true, down: true, type: "heavy" },
+  // ╊
+  // Dashed lines (render as solid light/heavy)
+  9476: { left: true, right: true, type: "light" },
+  // ┄
+  9477: { left: true, right: true, type: "heavy" },
+  // ┅
+  9478: { up: true, down: true, type: "light" },
+  // ┆
+  9479: { up: true, down: true, type: "heavy" },
+  // ┇
+  9480: { left: true, right: true, type: "light" },
+  // ┈
+  9481: { left: true, right: true, type: "heavy" },
+  // ┉
+  9482: { up: true, down: true, type: "light" },
+  // ┊
+  9483: { up: true, down: true, type: "heavy" },
+  // ┋
+  // Double lines
+  9552: { left: true, right: true, type: "double" },
+  // ═
+  9553: { up: true, down: true, type: "double" },
+  // ║
+  9554: { right: true, down: true, type: "double" },
+  // ╒
+  9555: { right: true, down: true, type: "double" },
+  // ╓
+  9556: { right: true, down: true, type: "double" },
+  // ╔
+  9557: { left: true, down: true, type: "double" },
+  // ╕
+  9558: { left: true, down: true, type: "double" },
+  // ╖
+  9559: { left: true, down: true, type: "double" },
+  // ╗
+  9560: { right: true, up: true, type: "double" },
+  // ╘
+  9561: { right: true, up: true, type: "double" },
+  // ╙
+  9562: { right: true, up: true, type: "double" },
+  // ╚
+  9563: { left: true, up: true, type: "double" },
+  // ╛
+  9564: { left: true, up: true, type: "double" },
+  // ╜
+  9565: { left: true, up: true, type: "double" },
+  // ╝
+  9566: { up: true, down: true, right: true, type: "double" },
+  // ╞
+  9567: { up: true, down: true, right: true, type: "double" },
+  // ╟
+  9568: { up: true, down: true, right: true, type: "double" },
+  // ╠
+  9569: { up: true, down: true, left: true, type: "double" },
+  // ╡
+  9570: { up: true, down: true, left: true, type: "double" },
+  // ╢
+  9571: { up: true, down: true, left: true, type: "double" },
+  // ╣
+  9572: { left: true, right: true, down: true, type: "double" },
+  // ╤
+  9573: { left: true, right: true, down: true, type: "double" },
+  // ╥
+  9574: { left: true, right: true, down: true, type: "double" },
+  // ╦
+  9575: { left: true, right: true, up: true, type: "double" },
+  // ╧
+  9576: { left: true, right: true, up: true, type: "double" },
+  // ╨
+  9577: { left: true, right: true, up: true, type: "double" },
+  // ╩
+  9578: { left: true, right: true, up: true, down: true, type: "double" },
+  // ╪
+  9579: { left: true, right: true, up: true, down: true, type: "double" },
+  // ╫
+  9580: { left: true, right: true, up: true, down: true, type: "double" },
+  // ╬
+  // Rounded corners
+  9581: { right: true, down: true, type: "light", arc: "tl" },
+  // ╭
+  9582: { left: true, down: true, type: "light", arc: "tr" },
+  // ╮
+  9583: { left: true, up: true, type: "light", arc: "br" },
+  // ╯
+  9584: { right: true, up: true, type: "light", arc: "bl" },
+  // ╰
+  // Diagonal lines (render as simple connecting lines)
+  9585: { type: "light" },
+  // ╱ (forward slash)
+  9586: { type: "light" },
+  // ╲ (backslash)
+  9587: { type: "light" },
+  // ╳ (cross)
+  // Half lines
+  9588: { left: true, type: "light" },
+  // ╴
+  9589: { up: true, type: "light" },
+  // ╵
+  9590: { right: true, type: "light" },
+  // ╶
+  9591: { down: true, type: "light" },
+  // ╷
+  9592: { left: true, type: "heavy" },
+  // ╸
+  9593: { up: true, type: "heavy" },
+  // ╹
+  9594: { right: true, type: "heavy" },
+  // ╺
+  9595: { down: true, type: "heavy" },
+  // ╻
+  9596: { left: true, right: true, type: "light" },
+  // ╼ (light left, heavy right)
+  9597: { up: true, down: true, type: "light" },
+  // ╽ (light up, heavy down)
+  9598: { left: true, right: true, type: "heavy" },
+  // ╾ (heavy left, light right)
+  9599: { up: true, down: true, type: "heavy" }
+  // ╿ (heavy up, light down)
+};
+var CanvasPainter = class {
+  cellWidth = 0;
+  cellHeight = 0;
+  fontFamily;
+  fontSize;
+  baselineOffset = 0;
+  constructor(options = {}) {
+    this.fontFamily = options.fontFamily ?? "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace";
+    this.fontSize = options.fontSize ?? 14;
+  }
+  measureCell(ctx) {
+    ctx.font = `${this.fontSize}px ${this.fontFamily}`;
+    const metrics = ctx.measureText("M");
+    this.cellWidth = metrics.width;
+    this.cellHeight = Math.ceil(this.fontSize * 1.4);
+    this.baselineOffset = Math.ceil(this.fontSize * 1.1);
+    return { width: this.cellWidth, height: this.cellHeight };
+  }
+  getCellSize() {
+    return { width: this.cellWidth, height: this.cellHeight };
+  }
+  paint(ctx, buffer, selection) {
+    const { char, fg: fg2, bg: bg2, attributes } = buffer;
+    const cols = buffer.width;
+    const rows = buffer.height;
+    const cw = this.cellWidth;
+    const ch = this.cellHeight;
+    for (let row = 0; row < rows; row++) {
+      let runStartCol = 0;
+      let runR = -1, runG = -1, runB = -1, runA = -1;
+      for (let col = 0; col <= cols; col++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        if (col < cols) {
+          const idx = row * cols + col;
+          const offset = idx * 4;
+          const attr = attributes[idx] & 255;
+          const isInverse = !!(attr & TextAttributes2.INVERSE);
+          if (isInverse) {
+            r = fg2[offset];
+            g = fg2[offset + 1];
+            b = fg2[offset + 2];
+            a = fg2[offset + 3];
+          } else {
+            r = bg2[offset];
+            g = bg2[offset + 1];
+            b = bg2[offset + 2];
+            a = bg2[offset + 3];
+          }
+        }
+        if (col < cols && r === runR && g === runG && b === runB && a === runA) {
+          continue;
+        }
+        if (runA > 0 && col > runStartCol) {
+          ctx.fillStyle = rgbaToCSS(runR, runG, runB, runA);
+          ctx.fillRect(runStartCol * cw, row * ch, (col - runStartCol) * cw, ch);
+        }
+        runStartCol = col;
+        runR = r;
+        runG = g;
+        runB = b;
+        runA = a;
+      }
+    }
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        const idx = row * cols + col;
+        if (attributes[idx] & CONTINUATION2) continue;
+        const charCode = char[idx];
+        if (charCode === 0 || charCode === 32) continue;
+        const offset = idx * 4;
+        const attr = attributes[idx] & 255;
+        const isInverse = !!(attr & TextAttributes2.INVERSE);
+        let fgR, fgG, fgB, fgA;
+        if (isInverse) {
+          fgR = bg2[offset];
+          fgG = bg2[offset + 1];
+          fgB = bg2[offset + 2];
+          fgA = bg2[offset + 3];
+          if (fgA === 0) {
+            fgR = 0;
+            fgG = 0;
+            fgB = 0;
+            fgA = 1;
+          }
+        } else {
+          fgR = fg2[offset];
+          fgG = fg2[offset + 1];
+          fgB = fg2[offset + 2];
+          fgA = fg2[offset + 3];
+        }
+        if (fgA === 0) continue;
+        const isBold = !!(attr & TextAttributes2.BOLD);
+        const isItalic = !!(attr & TextAttributes2.ITALIC);
+        const isDim = !!(attr & TextAttributes2.DIM);
+        const isUnderline = !!(attr & TextAttributes2.UNDERLINE);
+        const effectiveA = isDim ? fgA * 0.5 : fgA;
+        if (charCode >= 9472 && charCode <= 9599) {
+          const def = BOX_DRAWING_MAP[charCode];
+          if (def) {
+            const cellX = col * cw;
+            const cellY = row * ch;
+            const cx = cellX + cw / 2;
+            const cy = cellY + ch / 2;
+            ctx.strokeStyle = rgbaToCSS(fgR, fgG, fgB, effectiveA);
+            ctx.lineCap = "square";
+            if (def.type === "double") {
+              const gap = Math.max(2, Math.round(cw / 5));
+              ctx.lineWidth = 1;
+              ctx.beginPath();
+              if (def.left) {
+                ctx.moveTo(cellX, cy - gap / 2);
+                ctx.lineTo(cx, cy - gap / 2);
+                ctx.moveTo(cellX, cy + gap / 2);
+                ctx.lineTo(cx, cy + gap / 2);
+              }
+              if (def.right) {
+                ctx.moveTo(cx, cy - gap / 2);
+                ctx.lineTo(cellX + cw, cy - gap / 2);
+                ctx.moveTo(cx, cy + gap / 2);
+                ctx.lineTo(cellX + cw, cy + gap / 2);
+              }
+              if (def.up) {
+                ctx.moveTo(cx - gap / 2, cellY);
+                ctx.lineTo(cx - gap / 2, cy);
+                ctx.moveTo(cx + gap / 2, cellY);
+                ctx.lineTo(cx + gap / 2, cy);
+              }
+              if (def.down) {
+                ctx.moveTo(cx - gap / 2, cy);
+                ctx.lineTo(cx - gap / 2, cellY + ch);
+                ctx.moveTo(cx + gap / 2, cy);
+                ctx.lineTo(cx + gap / 2, cellY + ch);
+              }
+              ctx.stroke();
+            } else if (def.arc) {
+              const rx = cw / 2;
+              const ry = ch / 2;
+              ctx.lineWidth = 1;
+              ctx.beginPath();
+              if (def.arc === "tl") {
+                ctx.ellipse(cellX + cw, cellY + ch, rx, ry, 0, Math.PI, Math.PI * 1.5);
+              } else if (def.arc === "tr") {
+                ctx.ellipse(cellX, cellY + ch, rx, ry, 0, Math.PI * 1.5, Math.PI * 2);
+              } else if (def.arc === "bl") {
+                ctx.ellipse(cellX + cw, cellY, rx, ry, 0, Math.PI * 0.5, Math.PI);
+              } else if (def.arc === "br") {
+                ctx.ellipse(cellX, cellY, rx, ry, 0, 0, Math.PI * 0.5);
+              }
+              ctx.stroke();
+            } else if (charCode === 9585 || charCode === 9586 || charCode === 9587) {
+              ctx.lineWidth = 1;
+              ctx.beginPath();
+              if (charCode === 9585 || charCode === 9587) {
+                ctx.moveTo(cellX + cw, cellY);
+                ctx.lineTo(cellX, cellY + ch);
+              }
+              if (charCode === 9586 || charCode === 9587) {
+                ctx.moveTo(cellX, cellY);
+                ctx.lineTo(cellX + cw, cellY + ch);
+              }
+              ctx.stroke();
+            } else {
+              ctx.lineWidth = def.type === "heavy" ? 2 : 1;
+              ctx.beginPath();
+              if (def.left) {
+                ctx.moveTo(cellX, cy);
+                ctx.lineTo(cx, cy);
+              }
+              if (def.right) {
+                ctx.moveTo(cx, cy);
+                ctx.lineTo(cellX + cw, cy);
+              }
+              if (def.up) {
+                ctx.moveTo(cx, cellY);
+                ctx.lineTo(cx, cy);
+              }
+              if (def.down) {
+                ctx.moveTo(cx, cy);
+                ctx.lineTo(cx, cellY + ch);
+              }
+              ctx.stroke();
+            }
+            continue;
+          }
+        }
+        ctx.fillStyle = rgbaToCSS(fgR, fgG, fgB, effectiveA);
+        let fontStyle = "";
+        if (isItalic) fontStyle += "italic ";
+        if (isBold) fontStyle += "bold ";
+        fontStyle += `${this.fontSize}px ${this.fontFamily}`;
+        ctx.font = fontStyle;
+        const character = String.fromCodePoint(charCode);
+        const x = col * cw;
+        const y = row * this.cellHeight + this.baselineOffset;
+        ctx.fillText(character, x, y);
+        if (isUnderline) {
+          const isDashed = !!(attr & TextAttributes2.UNDERLINE_DASHED);
+          const isDotted = !!(attr & TextAttributes2.UNDERLINE_DOTTED);
+          ctx.strokeStyle = ctx.fillStyle;
+          ctx.lineWidth = 1;
+          const underlineY = row * this.cellHeight + this.baselineOffset + 2;
+          if (isDotted) {
+            ctx.lineCap = "round";
+            ctx.setLineDash([0.5, 2.5]);
+          } else if (isDashed) {
+            ctx.setLineDash([2, 2]);
+          }
+          ctx.beginPath();
+          ctx.moveTo(x, underlineY);
+          ctx.lineTo(x + cw, underlineY);
+          ctx.stroke();
+          if (isDotted || isDashed) {
+            ctx.setLineDash([]);
+            ctx.lineCap = "butt";
+          }
+        }
+      }
+    }
+    if (selection?.active) {
+      ctx.fillStyle = "rgba(51, 153, 255, 0.3)";
+      for (let row = 0; row < rows; row++) {
+        let runStart = -1;
+        for (let col = 0; col <= cols; col++) {
+          const selected = col < cols && selection.isSelected(col, row);
+          if (selected && runStart === -1) {
+            runStart = col;
+          } else if (!selected && runStart !== -1) {
+            ctx.fillRect(runStart * cw, row * ch, (col - runStart) * cw, ch);
+            runStart = -1;
+          }
+        }
+      }
+    }
+  }
+};
+function rgbaToCSS(r, g, b, a) {
+  const ri = Math.round(r * 255);
+  const gi = Math.round(g * 255);
+  const bi = Math.round(b * 255);
+  return `rgba(${ri},${gi},${bi},${a})`;
+}
+
+// src/selection-manager.ts
+var SelectionManager = class {
+  _startCol = 0;
+  _startRow = 0;
+  _endCol = 0;
+  _endRow = 0;
+  _active = false;
+  _selecting = false;
+  startSelection(col, row) {
+    this._startCol = col;
+    this._startRow = row;
+    this._endCol = col;
+    this._endRow = row;
+    this._selecting = true;
+    this._active = true;
+  }
+  updateSelection(col, row) {
+    if (!this._selecting) return;
+    this._endCol = col;
+    this._endRow = row;
+  }
+  endSelection() {
+    this._selecting = false;
+    if (this._startCol === this._endCol && this._startRow === this._endRow) {
+      this._active = false;
+    }
+  }
+  clearSelection() {
+    this._active = false;
+    this._selecting = false;
+  }
+  get active() {
+    return this._active;
+  }
+  get selecting() {
+    return this._selecting;
+  }
+  /** Returns the selection range normalized to reading order (top-left to bottom-right) */
+  getSelectedRange() {
+    if (!this._active) return null;
+    let startCol = this._startCol;
+    let startRow = this._startRow;
+    let endCol = this._endCol;
+    let endRow = this._endRow;
+    if (startRow > endRow || startRow === endRow && startCol > endCol) {
+      const tmpCol = startCol;
+      const tmpRow = startRow;
+      startCol = endCol;
+      startRow = endRow;
+      endCol = tmpCol;
+      endRow = tmpRow;
+    }
+    return { startCol, startRow, endCol, endRow };
+  }
+  isSelected(col, row) {
+    const range = this.getSelectedRange();
+    if (!range) return false;
+    const { startCol, startRow, endCol, endRow } = range;
+    if (row < startRow || row > endRow) return false;
+    if (startRow === endRow) {
+      return col >= startCol && col < endCol;
+    }
+    if (row === startRow) return col >= startCol;
+    if (row === endRow) return col < endCol;
+    return true;
+  }
+  getSelectedText(buffer) {
+    const range = this.getSelectedRange();
+    if (!range) return "";
+    const { startCol, startRow, endCol, endRow } = range;
+    const lines = [];
+    for (let row = startRow; row <= endRow; row++) {
+      let lineStart = row === startRow ? startCol : 0;
+      let lineEnd = row === endRow ? endCol : buffer.width;
+      let line = "";
+      for (let col = lineStart; col < lineEnd && col < buffer.width; col++) {
+        const idx = row * buffer.width + col;
+        const charCode = buffer.char[idx];
+        line += charCode === 0 ? " " : String.fromCodePoint(charCode);
+      }
+      lines.push(line.trimEnd());
+    }
+    return lines.join("\n");
+  }
+};
+
+// src/browser-renderer.ts
+var RootRenderableClass = null;
+function setRootRenderableClass(cls) {
+  RootRenderableClass = cls;
+}
+var BrowserRenderer = class _BrowserRenderer {
+  canvas;
+  ctx2d;
+  buffer;
+  renderContext;
+  root;
+  // RootRenderable
+  painter;
+  selection;
+  cols;
+  rows;
+  cellWidth = 0;
+  cellHeight = 0;
+  rafId = null;
+  lastTime = 0;
+  needsRender = true;
+  isDragOver = false;
+  cleanupListeners = [];
+  mouseDownCell = null;
+  constructor(canvas, cols, rows) {
+    this.canvas = canvas;
+    this.cols = cols;
+    this.rows = rows;
+    const ctx2d = canvas.getContext("2d");
+    if (!ctx2d) throw new Error("Could not get 2d context");
+    this.ctx2d = ctx2d;
+    this.painter = new CanvasPainter();
+    const cellSize = this.painter.measureCell(this.ctx2d);
+    this.cellWidth = cellSize.width;
+    this.cellHeight = cellSize.height;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.ceil(cols * this.cellWidth * dpr);
+    canvas.height = Math.ceil(rows * this.cellHeight * dpr);
+    canvas.style.width = `${cols * this.cellWidth}px`;
+    canvas.style.height = `${rows * this.cellHeight}px`;
+    this.ctx2d.scale(dpr, dpr);
+    canvas.style.cursor = "text";
+    this.buffer = BrowserBuffer.create(cols, rows, "wcwidth");
+    this.renderContext = new BrowserRenderContext(cols, rows);
+    this.renderContext.setOnRenderRequest(() => {
+      this.needsRender = true;
+    });
+    this.selection = new SelectionManager();
+    if (!RootRenderableClass) {
+      throw new Error("RootRenderableClass not set. Call setRootRenderableClass before creating BrowserRenderer.");
+    }
+    this.root = new RootRenderableClass(this.renderContext);
+    this.setupDomListeners();
+  }
+  pixelToCell(clientX, clientY) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const col = Math.floor(x / this.cellWidth);
+    const row = Math.floor(y / this.cellHeight);
+    return {
+      col: Math.max(0, Math.min(col, this.cols - 1)),
+      row: Math.max(0, Math.min(row, this.rows - 1))
+    };
+  }
+  setupDomListeners() {
+    const onDragOver = (e) => {
+      e.preventDefault();
+    };
+    this.canvas.addEventListener("dragover", onDragOver);
+    this.cleanupListeners.push(() => this.canvas.removeEventListener("dragover", onDragOver));
+    const onDrop = (e) => {
+      e.preventDefault();
+      const files = e.dataTransfer?.files;
+      if (!files || files.length === 0) return;
+      const file = files[0];
+      this.isDragOver = false;
+      this.renderContext.emit("drag-leave", void 0);
+      file.text().then((content) => {
+        this.renderContext.emit("file-drop", {
+          name: file.name,
+          content,
+          type: file.type,
+          size: file.size
+        });
+      });
+    };
+    this.canvas.addEventListener("drop", onDrop);
+    this.cleanupListeners.push(() => this.canvas.removeEventListener("drop", onDrop));
+    const onMouseDown = (e) => {
+      if (e.button !== 0) return;
+      this.canvas.focus();
+      const { col, row } = this.pixelToCell(e.clientX, e.clientY);
+      this.mouseDownCell = { col, row };
+      this.selection.startSelection(col, row);
+      this.needsRender = true;
+    };
+    this.canvas.addEventListener("mousedown", onMouseDown);
+    this.cleanupListeners.push(() => this.canvas.removeEventListener("mousedown", onMouseDown));
+    const onMouseMove = (e) => {
+      const { col, row } = this.pixelToCell(e.clientX, e.clientY);
+      const idx = row * this.buffer.width + col;
+      if (idx >= 0 && idx < this.buffer.attributes.length) {
+        const linkId = getLinkId(this.buffer.attributes[idx]);
+        this.canvas.style.cursor = linkId > 0 ? "pointer" : "text";
+      }
+      if (!this.selection.selecting) return;
+      this.selection.updateSelection(col, row);
+      this.needsRender = true;
+    };
+    this.canvas.addEventListener("mousemove", onMouseMove);
+    this.cleanupListeners.push(() => this.canvas.removeEventListener("mousemove", onMouseMove));
+    const onMouseUp = (e) => {
+      const wasSelecting = this.selection.selecting;
+      if (wasSelecting) {
+        this.selection.endSelection();
+        this.needsRender = true;
+      }
+      if (e.button === 0 && this.mouseDownCell) {
+        const { col, row } = this.pixelToCell(e.clientX, e.clientY);
+        if (col === this.mouseDownCell.col && row === this.mouseDownCell.row) {
+          const idx = row * this.buffer.width + col;
+          if (idx >= 0 && idx < this.buffer.attributes.length) {
+            const attr = this.buffer.attributes[idx];
+            const linkId = getLinkId(attr);
+            if (linkId > 0) {
+              const url = this.buffer.getLinkUrl(linkId);
+              if (url) {
+                window.open(url, "_blank");
+              }
+            }
+          }
+        }
+        this.mouseDownCell = null;
+      }
+    };
+    window.addEventListener("mouseup", onMouseUp);
+    this.cleanupListeners.push(() => window.removeEventListener("mouseup", onMouseUp));
+    const onDragEnter = (e) => {
+      e.preventDefault();
+      if (this.isDragOver) return;
+      this.isDragOver = true;
+      this.renderContext.emit("drag-enter", void 0);
+      this.needsRender = true;
+    };
+    this.canvas.addEventListener("dragenter", onDragEnter);
+    this.cleanupListeners.push(() => this.canvas.removeEventListener("dragenter", onDragEnter));
+    const onDragLeave = (e) => {
+      if (e.relatedTarget && this.canvas.contains(e.relatedTarget)) return;
+      this.isDragOver = false;
+      this.renderContext.emit("drag-leave", void 0);
+      this.needsRender = true;
+    };
+    this.canvas.addEventListener("dragleave", onDragLeave);
+    this.cleanupListeners.push(() => this.canvas.removeEventListener("dragleave", onDragLeave));
+    const onPaste = (e) => {
+      if (document.activeElement !== this.canvas) return;
+      const text = e.clipboardData?.getData("text/plain");
+      if (text) {
+        e.preventDefault();
+        this.renderContext.emit("paste", text);
+      }
+    };
+    document.addEventListener("paste", onPaste);
+    this.cleanupListeners.push(() => document.removeEventListener("paste", onPaste));
+  }
+  start() {
+    this.lastTime = performance.now();
+    this.loop();
+  }
+  stop() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    for (const cleanup of this.cleanupListeners) {
+      cleanup();
+    }
+    this.cleanupListeners = [];
+  }
+  loop = () => {
+    this.rafId = requestAnimationFrame(this.loop);
+    const now = performance.now();
+    const deltaTime = now - this.lastTime;
+    this.lastTime = now;
+    if (!this.needsRender) return;
+    this.needsRender = false;
+    this.buffer.clear();
+    const lifecyclePasses = this.renderContext.getLifecyclePasses();
+    for (const renderable of lifecyclePasses) {
+      if (renderable.onLifecyclePass) {
+        renderable.onLifecyclePass();
+      }
+    }
+    this.root.calculateLayout();
+    const renderList = [];
+    this.root.updateLayout(deltaTime, renderList);
+    for (const cmd of renderList) {
+      switch (cmd.action) {
+        case "pushScissorRect":
+          this.buffer.pushScissorRect(cmd.x, cmd.y, cmd.width, cmd.height);
+          break;
+        case "popScissorRect":
+          this.buffer.popScissorRect();
+          break;
+        case "pushOpacity":
+          this.buffer.pushOpacity(cmd.opacity);
+          break;
+        case "popOpacity":
+          this.buffer.popOpacity();
+          break;
+        case "render":
+          cmd.renderable.render(this.buffer, deltaTime);
+          break;
+      }
+    }
+    this.buffer.clearScissorRects();
+    this.buffer.clearOpacity();
+    const dpr = window.devicePixelRatio || 1;
+    this.ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.ctx2d.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.painter.paint(this.ctx2d, this.buffer, this.selection);
+  };
+  resize(cols, rows) {
+    this.cols = cols;
+    this.rows = rows;
+    const dpr = window.devicePixelRatio || 1;
+    this.canvas.width = Math.ceil(cols * this.cellWidth * dpr);
+    this.canvas.height = Math.ceil(rows * this.cellHeight * dpr);
+    this.canvas.style.width = `${cols * this.cellWidth}px`;
+    this.canvas.style.height = `${rows * this.cellHeight}px`;
+    this.ctx2d.scale(dpr, dpr);
+    this.buffer.resize(cols, rows);
+    this.renderContext.resize(cols, rows);
+    this.root.resize(cols, rows);
+    this.needsRender = true;
+  }
+  static PREVENT_DEFAULT_KEYS = /* @__PURE__ */ new Set([
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    " ",
+    "PageUp",
+    "PageDown",
+    "Tab",
+    "Home",
+    "End"
+  ]);
+  static MODIFIER_KEYS = /* @__PURE__ */ new Set(["Alt", "Control", "Meta", "Shift"]);
+  static KEY_MAP = {
+    ArrowUp: "up",
+    ArrowDown: "down",
+    ArrowLeft: "left",
+    ArrowRight: "right",
+    Enter: "return",
+    Backspace: "backspace",
+    Delete: "delete",
+    Tab: "tab",
+    Escape: "escape",
+    Home: "home",
+    End: "end",
+    " ": "space",
+    PageUp: "pageup",
+    PageDown: "pagedown"
+  };
+  handleKeyDown(event) {
+    if (_BrowserRenderer.PREVENT_DEFAULT_KEYS.has(event.key)) {
+      event.preventDefault();
+    }
+    if (this.selection.active && (event.key === "c" || event.key === "\xE7") && (event.metaKey || event.ctrlKey || event.altKey)) {
+      const text = this.selection.getSelectedText(this.buffer);
+      if (text) {
+        navigator.clipboard.writeText(text).catch(() => {
+          const ta = document.createElement("textarea");
+          ta.value = text;
+          ta.style.position = "fixed";
+          ta.style.left = "-9999px";
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand("copy");
+          document.body.removeChild(ta);
+        });
+      }
+      event.preventDefault();
+      return;
+    }
+    const modifierOnly = _BrowserRenderer.MODIFIER_KEYS.has(event.key);
+    if (this.selection.active && !modifierOnly) {
+      this.selection.clearSelection();
+      this.needsRender = true;
+    }
+    const keyEvent = {
+      name: _BrowserRenderer.KEY_MAP[event.key] ?? (event.key.length === 1 ? event.key : event.key.toLowerCase()),
+      ctrl: event.ctrlKey,
+      meta: event.metaKey,
+      shift: event.shiftKey,
+      option: event.altKey,
+      sequence: event.key,
+      number: false,
+      raw: event.key,
+      eventType: "press",
+      source: "raw",
+      _defaultPrevented: false,
+      _propagationStopped: false,
+      get defaultPrevented() {
+        return this._defaultPrevented;
+      },
+      get propagationStopped() {
+        return this._propagationStopped;
+      },
+      preventDefault() {
+        this._defaultPrevented = true;
+      },
+      stopPropagation() {
+        this._propagationStopped = true;
+      }
+    };
+    this.renderContext._internalKeyInput.emit("keypress", keyEvent);
+    this.renderContext.keyInput.emit("keypress", keyEvent);
+  }
+};
+
+// src/browser-context.ts
+import { createContext, useContext } from "react";
+var BrowserContext = createContext(null);
+
+// src/create-browser-root.tsx
+import { _render } from "../../../opentui/packages/react/src/reconciler/reconciler";
+import { AppContext } from "../../../opentui/packages/react/src/components/app";
+import { ErrorBoundary } from "../../../opentui/packages/react/src/components/error-boundary";
+import { jsx } from "react/jsx-runtime";
+function createBrowserRoot(renderer) {
+  let unmountFn = null;
+  return {
+    render(node) {
+      const element = /* @__PURE__ */ jsx(BrowserContext.Provider, { value: { renderContext: renderer.renderContext }, children: /* @__PURE__ */ jsx(AppContext.Provider, { value: { keyHandler: renderer.renderContext.keyInput, renderer: null }, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: node }) }) });
+      unmountFn = _render(element, renderer.root);
+    },
+    unmount() {
+      if (unmountFn) {
+      }
+    }
+  };
+}
+
+// src/TUI.tsx
+import { RootRenderable as RootRenderable2 } from "@opentui/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TUI({
+  children,
+  style,
+  className,
+  fontSize = 14,
+  fontFamily = "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace",
+  autoFocus = true,
+  onReady
+}) {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const rendererRef = useRef(null);
+  const rootRef = useRef(null);
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  useEffect(() => {
+    if (!isClient) return;
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    setRootRenderableClass(RootRenderable2);
+    const painter = new CanvasPainter({ fontSize, fontFamily });
+    const tempCtx = canvas.getContext("2d");
+    const cellSize = painter.measureCell(tempCtx);
+    const containerRect = container.getBoundingClientRect();
+    const cols = Math.max(1, Math.floor(containerRect.width / cellSize.width));
+    const rows = Math.max(1, Math.floor(containerRect.height / cellSize.height));
+    const renderer = new BrowserRenderer(canvas, cols, rows);
+    rendererRef.current = renderer;
+    const root = createBrowserRoot(renderer);
+    rootRef.current = root;
+    root.render(children);
+    renderer.start();
+    canvas.tabIndex = 0;
+    if (autoFocus) {
+      canvas.focus();
+    }
+    onReady?.(renderer);
+    const onKeyDown = (e) => {
+      renderer.handleKeyDown(e);
+    };
+    canvas.addEventListener("keydown", onKeyDown);
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const newCols = Math.max(1, Math.floor(width / cellSize.width));
+        const newRows = Math.max(1, Math.floor(height / cellSize.height));
+        renderer.resize(newCols, newRows);
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      canvas.removeEventListener("keydown", onKeyDown);
+      resizeObserver.disconnect();
+      renderer.stop();
+      root.unmount();
+      rendererRef.current = null;
+      rootRef.current = null;
+    };
+  }, [isClient, fontSize, fontFamily]);
+  useEffect(() => {
+    if (rootRef.current) {
+      rootRef.current.render(children);
+    }
+  }, [children]);
+  if (!isClient) {
+    return /* @__PURE__ */ jsx2("div", { style, className, children: /* @__PURE__ */ jsx2("div", { style: { width: "100%", height: "100%" } }) });
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        ...style
+      },
+      className,
+      children: /* @__PURE__ */ jsx2(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: {
+            display: "block",
+            width: "100%",
+            height: "100%",
+            outline: "none"
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  TUI
+};
+//# sourceMappingURL=next.js.map