@opentui/core 0.5.3 → 0.5.6

package/index.node.js

@@ -43,7 +43,7 @@ import {
   mergeKeyAliases,
   mergeKeyBindings,
   wrapWithDelegates
-} from "./chunk-node-kq7as74d.js";
+} from "./chunk-node-ks0581vk.js";
 import {
   ASCIIFontSelectionHelper,
   ATTRIBUTE_BASE_BITS,
@@ -203,7 +203,7 @@ import {
   visualizeRenderableTree,
   white,
   yellow
-} from "./chunk-node-aj3n20gq.js";
+} from "./chunk-node-2h23nsbj.js";
 // src/post/effects.ts
 function toU8(value) {
   return Math.round(Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0)) * 255);
@@ -8222,6 +8222,378 @@ class DiffRenderable extends Renderable {
     return offsets;
   }
 }
+// src/renderables/EmbeddedTerminal.ts
+var MOD_SHIFT = 1 << 0;
+var MOD_CTRL = 1 << 1;
+var MOD_ALT = 1 << 2;
+var MOD_SUPER = 1 << 3;
+var MOD_CAPS_LOCK = 1 << 4;
+var MOD_NUM_LOCK = 1 << 5;
+
+class EmbeddedTerminalRenderable extends Renderable {
+  selectable = true;
+  lib;
+  handle = null;
+  _onData;
+  _onTerminalResize;
+  _onScreenChange;
+  keyreleaseHandler = null;
+  hadRenderHooks = false;
+  selection = false;
+  constructor(ctx, options) {
+    const cols = options.cols ?? (typeof options.width === "number" ? options.width : 80);
+    const rows = options.rows ?? (typeof options.height === "number" ? options.height : 24);
+    super(ctx, {
+      ...options,
+      width: options.width ?? cols,
+      height: options.height ?? rows,
+      buffered: true
+    });
+    this._focusable = true;
+    this._onData = options.onData;
+    this._onTerminalResize = options.onTerminalResize;
+    this._onScreenChange = options.onScreenChange;
+    this.selectable = options.selectable ?? true;
+    this.lib = resolveRenderLib();
+    try {
+      this.handle = this.lib.createEmbeddedTerminal({ cols, rows, maxScrollback: options.maxScrollback });
+      this.setupMouse(options);
+    } catch (error) {
+      this.destroy();
+      throw error;
+    }
+  }
+  get onData() {
+    return this._onData;
+  }
+  set onData(value) {
+    this._onData = value;
+  }
+  get onTerminalResize() {
+    return this._onTerminalResize;
+  }
+  set onTerminalResize(value) {
+    this._onTerminalResize = value;
+  }
+  get onScreenChange() {
+    return this._onScreenChange;
+  }
+  set onScreenChange(value) {
+    this._onScreenChange = value;
+  }
+  screen() {
+    const cursor = this.handle ? this.lib.embeddedTerminalCursor(this.handle) : { x: 0, y: 0, visible: false, hasValue: false };
+    const lines = this.frameBuffer ? new TextDecoder().decode(this.frameBuffer.getRealCharBytes(true)).split(`
+`).slice(0, this.height).map((line) => line.trimEnd()) : [];
+    while (lines.at(-1) === "")
+      lines.pop();
+    return {
+      text: lines.join(`
+`),
+      lines,
+      columns: this.width,
+      rows: this.height,
+      cursor: {
+        x: cursor.x,
+        y: cursor.y,
+        visible: cursor.hasValue && cursor.visible
+      }
+    };
+  }
+  write(data) {
+    if (!this.handle)
+      return;
+    this.lib.embeddedTerminalWrite(this.handle, data);
+    try {
+      this.flushResponses();
+    } finally {
+      this.requestRender();
+    }
+  }
+  invalidate() {
+    if (!this.handle)
+      return;
+    this.lib.embeddedTerminalInvalidate(this.handle);
+    this.requestRender();
+  }
+  encodeKey(key) {
+    if (!this.handle)
+      return new Uint8Array;
+    const text = textualKey(key);
+    return this.lib.embeddedTerminalEncodeKey(this.handle, {
+      action: key.eventType === "release" ? "release" : key.repeated ? "repeat" : "press",
+      key: physicalKey(key),
+      mods: modifiers(key),
+      text,
+      unshiftedCodepoint: key.baseCode ?? physicalUnshiftedCodepoint(key.code)
+    });
+  }
+  encodePaste(bytes) {
+    if (!this.handle)
+      return new Uint8Array;
+    return this.lib.embeddedTerminalEncodePaste(this.handle, bytes);
+  }
+  shouldStartSelection(x, y) {
+    if (!this.selectable)
+      return false;
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return localX >= 0 && localX < this.width && localY >= 0 && localY < this.height;
+  }
+  onSelectionChanged(selection) {
+    if (!this.handle)
+      return false;
+    const local = convertGlobalToLocalSelection(selection, this.x, this.y);
+    if (!local?.isActive) {
+      if (!this.selection)
+        return false;
+      this.lib.embeddedTerminalClearSelection(this.handle);
+      this.selection = false;
+      this.requestRender();
+      return false;
+    }
+    const point = (x, y) => {
+      if (y < 0)
+        return { x: 0, y: 0 };
+      if (y >= this.height)
+        return { x: this.width - 1, y: this.height - 1 };
+      return { x: Math.max(0, Math.min(this.width - 1, x)), y };
+    };
+    this.lib.embeddedTerminalSetSelection(this.handle, point(local.anchorX, local.anchorY), point(local.focusX, local.focusY));
+    this.selection = true;
+    this.requestRender();
+    return true;
+  }
+  hasSelection() {
+    return this.selection;
+  }
+  getSelectedText() {
+    if (!this.handle || !this.selection)
+      return "";
+    return new TextDecoder().decode(this.lib.embeddedTerminalGetSelectedText(this.handle));
+  }
+  focus() {
+    if (this.focused)
+      return;
+    super.focus();
+    if (!this.focused)
+      return;
+    this.keyreleaseHandler = (key) => this.handleKeyPress(key);
+    this.ctx._internalKeyInput.onInternal("keyrelease", this.keyreleaseHandler);
+    try {
+      this.send(this.handle ? this.lib.embeddedTerminalEncodeFocus(this.handle, true) : new Uint8Array, "input");
+    } catch (error) {
+      this.removeKeyreleaseHandler();
+      super.blur();
+      throw error;
+    }
+  }
+  blur() {
+    if (!this.focused)
+      return;
+    try {
+      this.send(this.handle ? this.lib.embeddedTerminalEncodeFocus(this.handle, false) : new Uint8Array, "input");
+    } catch {} finally {
+      this.removeKeyreleaseHandler();
+      super.blur();
+      this._ctx.setCursorPosition(0, 0, false);
+    }
+  }
+  handleKeyPress(key) {
+    const output = this.encodeKey(key);
+    this.send(output, "input");
+    return output.byteLength > 0;
+  }
+  handlePaste(event) {
+    this.send(this.encodePaste(event.bytes), "input");
+  }
+  render(buffer, deltaTime) {
+    const hasRenderHooks = Boolean(this.renderBefore || this.renderAfter);
+    if (this.handle && (hasRenderHooks || this.hadRenderHooks))
+      this.lib.embeddedTerminalInvalidate(this.handle);
+    this.hadRenderHooks = hasRenderHooks;
+    super.render(buffer, deltaTime);
+  }
+  onResize(width, height) {
+    super.onResize(width, height);
+    if (!this.handle || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0)
+      return;
+    const cols = Math.min(Math.floor(width), 65535);
+    const rows = Math.min(Math.floor(height), 65535);
+    this.lib.embeddedTerminalResize(this.handle, cols, rows);
+    this.lib.embeddedTerminalInvalidate(this.handle);
+    this.flushResponses();
+    this._onTerminalResize?.(cols, rows);
+  }
+  renderSelf(buffer) {
+    if (!this.handle || !this.frameBuffer || !this.visible || this.isDestroyed)
+      return;
+    this.lib.embeddedTerminalCompose(this.handle, buffer.ptr, 0, 0);
+    this._onScreenChange?.();
+    if (!this.focused)
+      return;
+    const cursor = this.lib.embeddedTerminalCursor(this.handle);
+    const visible = cursor.visible && cursor.hasValue;
+    const cursorX = cursor.wideTail && cursor.x > 0 ? cursor.x - 1 : cursor.x;
+    this._ctx.setCursorPosition(this._screenX + cursorX + 1, this._screenY + cursor.y + 1, visible);
+    if (!visible)
+      return;
+    this._ctx.setCursorStyle({
+      style: cursor.style === "bar" ? "line" : cursor.style === "underline" ? "underline" : "block",
+      blinking: cursor.blinking
+    });
+    if (cursor.color)
+      this._ctx.setCursorColor(RGBA.fromInts(cursor.color.r, cursor.color.g, cursor.color.b, 255));
+  }
+  destroySelf() {
+    if (this.handle) {
+      this.lib.destroyEmbeddedTerminal(this.handle);
+      this.handle = null;
+    }
+    this._ctx.setCursorPosition(0, 0, false);
+    super.destroySelf();
+  }
+  onRemove() {
+    if (this.focused)
+      this.blur();
+  }
+  setupMouse(options) {
+    const { onMouseDown, onMouseUp, onMouseMove, onMouseDrag, onMouseScroll } = options;
+    this.onMouseDown = (event) => {
+      this.forwardMouse(event, "press");
+      onMouseDown?.call(this, event);
+    };
+    this.onMouseUp = (event) => {
+      this.forwardMouse(event, "release");
+      onMouseUp?.call(this, event);
+    };
+    this.onMouseMove = (event) => {
+      this.forwardMouse(event, "motion");
+      onMouseMove?.call(this, event);
+    };
+    this.onMouseDrag = (event) => {
+      this.forwardMouse(event, "motion");
+      onMouseDrag?.call(this, event);
+    };
+    this.onMouseScroll = (event) => {
+      this.forwardMouse(event, "press");
+      onMouseScroll?.call(this, event);
+    };
+  }
+  forwardMouse(event, action) {
+    if (!this.handle)
+      return;
+    if (event.type === "down" && event.button === 0)
+      this.focus();
+    const output = this.lib.embeddedTerminalEncodeMouse(this.handle, {
+      action,
+      button: event.type === "move" && !event.isDragging ? undefined : mouseButton(event),
+      mods: modifiers(event.modifiers),
+      x: event.x - this._screenX,
+      y: event.y - this._screenY,
+      anyButtonPressed: event.isDragging === true || event.type === "down"
+    });
+    if (event.type === "scroll" && output.byteLength === 0) {
+      const direction = event.scroll?.direction;
+      if (direction !== "up" && direction !== "down")
+        return;
+      this.lib.embeddedTerminalScroll(this.handle, direction === "up" ? -3 : 3);
+      this.requestRender();
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (output.byteLength === 0)
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.send(output, "input");
+  }
+  flushResponses() {
+    if (!this.handle)
+      return;
+    this.send(this.lib.embeddedTerminalDrainResponses(this.handle), "response");
+  }
+  removeKeyreleaseHandler() {
+    if (!this.keyreleaseHandler)
+      return;
+    this.ctx._internalKeyInput.offInternal("keyrelease", this.keyreleaseHandler);
+    this.keyreleaseHandler = null;
+  }
+  send(data, source) {
+    if (data.byteLength > 0)
+      this._onData?.(data, source);
+  }
+}
+function modifiers(input) {
+  let value = 0;
+  if (input.shift)
+    value |= MOD_SHIFT;
+  if (input.ctrl)
+    value |= MOD_CTRL;
+  if (input.alt || input.option)
+    value |= MOD_ALT;
+  if (input.meta || input.super)
+    value |= MOD_SUPER;
+  if (input.capsLock)
+    value |= MOD_CAPS_LOCK;
+  if (input.numLock)
+    value |= MOD_NUM_LOCK;
+  return value;
+}
+function physicalKey(key) {
+  if (key.code)
+    return key.code;
+  return {
+    backspace: "Backspace",
+    enter: "Enter",
+    return: "Enter",
+    space: "Space",
+    tab: "Tab",
+    delete: "Delete",
+    end: "End",
+    home: "Home",
+    insert: "Insert",
+    pagedown: "PageDown",
+    pageup: "PageUp",
+    down: "ArrowDown",
+    left: "ArrowLeft",
+    right: "ArrowRight",
+    up: "ArrowUp",
+    escape: "Escape"
+  }[key.name.toLowerCase()] ?? "";
+}
+function textualKey(key) {
+  if (key.sequence.length > 0 && !/[\p{Cc}]/u.test(key.sequence))
+    return key.sequence;
+  if (key.name === "space")
+    return " ";
+  if (key.name.length === 0 || /[\p{Cc}]/u.test(key.name))
+    return;
+  if ([...key.name].length === 1 || /[^\x00-\x7f]/.test(key.name))
+    return key.name;
+}
+function physicalUnshiftedCodepoint(code) {
+  if (code?.startsWith("Key") && code.length === 4)
+    return code.charCodeAt(3) + 32;
+  if (code?.startsWith("Digit") && code.length === 6)
+    return code.charCodeAt(5);
+  return 0;
+}
+function mouseButton(event) {
+  if (event.type === "scroll") {
+    if (event.scroll?.direction === "up")
+      return "four";
+    if (event.scroll?.direction === "down")
+      return "five";
+    if (event.scroll?.direction === "left")
+      return "six";
+    if (event.scroll?.direction === "right")
+      return "seven";
+    return;
+  }
+  return { 0: "left", 1: "middle", 2: "right", 4: "four", 5: "five" }[event.button];
+}
 // src/renderables/Textarea.ts
 var defaultTextareaKeyBindings = [
   { name: "left", action: "move-left" },
@@ -14830,6 +15202,30 @@ class TabSelectRenderable extends Renderable {
   }
 }
 // src/renderables/TimeToFirstDraw.ts
+var graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+function measureCellWidth(buffer, text) {
+  const encoded = buffer.encodeUnicode(text);
+  if (!encoded)
+    return 0;
+  try {
+    return encoded.data.reduce((width, glyph) => width + glyph.width, 0);
+  } finally {
+    buffer.freeUnicode(encoded);
+  }
+}
+function truncateToCellWidth(buffer, text, maxWidth) {
+  let visibleText = "";
+  let visibleWidth = 0;
+  for (const { segment } of graphemeSegmenter.segment(text)) {
+    const segmentWidth = measureCellWidth(buffer, segment);
+    if (visibleWidth + segmentWidth > maxWidth)
+      break;
+    visibleText += segment;
+    visibleWidth += segmentWidth;
+  }
+  return { text: visibleText, width: visibleWidth };
+}
+
 class TimeToFirstDrawRenderable extends Renderable {
   _runtimeMs = null;
   textColor;
@@ -14882,9 +15278,9 @@ class TimeToFirstDrawRenderable extends Renderable {
     }
     const content = `${this.label}: ${this._runtimeMs.toFixed(this.precision)}ms`;
     const maxWidth = Math.max(this.width, 1);
-    const visibleContent = content.length > maxWidth ? content.slice(0, maxWidth) : content;
-    const centeredX = this.x + Math.max(0, Math.floor((maxWidth - visibleContent.length) / 2));
-    buffer.drawText(visibleContent, centeredX, this.y, this.textColor);
+    const visibleContent = truncateToCellWidth(buffer, content, maxWidth);
+    const centeredX = this.x + Math.max(0, Math.floor((maxWidth - visibleContent.width) / 2));
+    buffer.drawText(visibleContent.text, centeredX, this.y, this.textColor);
   }
   normalizePrecision(value) {
     if (!Number.isFinite(value)) {
@@ -15128,6 +15524,7 @@ export {
   FrameBuffer,
   FlamesEffect,
   ExtmarksController,
+  EmbeddedTerminalRenderable,
   EditorView,
   EditBufferRenderableEvents,
   EditBufferRenderable,
@@ -15172,5 +15569,5 @@ export {
   ACHROMATOPSIA_MATRIX
 };
 
-//# debugId=461568FAFCC40A8864756E2164756E21
+//# debugId=ED15438BE5BDAF1564756E2164756E21
 //# sourceMappingURL=index.node.js.map