@opentui/core 0.1.20 → 0.1.22

package/3d.js

@@ -5,7 +5,7 @@ import {
   __export,
   __require,
   __toESM
-} from "./index-23dkhv32.js";
+} from "./index-443j38eh.js";
 
 // ../../node_modules/omggif/omggif.js
 var require_omggif = __commonJS((exports) => {

package/Renderable.d.ts

@@ -5,7 +5,7 @@ import { TrackedNode } from "./lib/TrackedNode";
 import type { ParsedKey } from "./lib/parse.keypress";
 import { type AlignString, type FlexDirectionString, type JustifyString, type OverflowString, type PositionTypeString, type WrapString } from "./lib/yoga.options";
 import type { MouseEvent } from "./renderer";
-import type { RenderContext, ViewportBounds } from "./types";
+import type { RenderContext } from "./types";
 import { type VNode } from "./renderables/composition/vnode";
 import type { Selection } from "./lib/selection";
 declare const BrandedRenderable: unique symbol;
@@ -125,7 +125,7 @@ export declare abstract class Renderable extends BaseRenderable {
     selectable: boolean;
     protected buffered: boolean;
     protected frameBuffer: OptimizedBuffer | null;
-    protected focusable: boolean;
+    protected _focusable: boolean;
     protected _focused: boolean;
     protected keyHandler: KeyHandler;
     protected keypressHandler: ((key: ParsedKey) => void) | null;
@@ -145,11 +145,14 @@ export declare abstract class Renderable extends BaseRenderable {
     parent: Renderable | null;
     private childrenPrimarySortDirty;
     private childrenSortedByPrimaryAxis;
+    private _newChildren;
     renderBefore?: (this: Renderable, buffer: OptimizedBuffer, deltaTime: number) => void;
     renderAfter?: (this: Renderable, buffer: OptimizedBuffer, deltaTime: number) => void;
     constructor(ctx: RenderContext, options: RenderableOptions<any>);
+    get focusable(): boolean;
     get ctx(): RenderContext;
     get visible(): boolean;
+    get primaryAxis(): "row" | "column";
     set visible(value: boolean);
     hasSelection(): boolean;
     onSelectionChanged(selection: Selection | null): boolean;
@@ -189,8 +192,7 @@ export declare abstract class Renderable extends BaseRenderable {
     set zIndex(value: number);
     private requestZIndexSort;
     private ensureZIndexSorted;
-    getChildrenInViewport(viewport: ViewportBounds, padding?: number, minTriggerSize?: number): Renderable[];
-    protected getChildrenSortedByPrimaryAxis(): Renderable[];
+    getChildrenSortedByPrimaryAxis(): Renderable[];
     private setupYogaProperties;
     private setupMarginAndPadding;
     set position(positionType: PositionTypeString);
@@ -234,6 +236,7 @@ export declare abstract class Renderable extends BaseRenderable {
     protected onRemove(): void;
     getChildren(): Renderable[];
     getChildrenCount(): number;
+    updateLayout(deltaTime: number, renderList?: RenderCommand[]): void;
     render(buffer: OptimizedBuffer, deltaTime: number): void;
     protected _getChildren(): Renderable[];
     protected onUpdate(deltaTime: number): void;
@@ -266,13 +269,33 @@ export declare abstract class Renderable extends BaseRenderable {
     get onSizeChange(): (() => void) | undefined;
     private applyEventOptions;
 }
+interface RenderCommandBase {
+    action: "render" | "pushScissorRect" | "popScissorRect";
+}
+interface RenderCommandPushScissorRect extends RenderCommandBase {
+    action: "pushScissorRect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface RenderCommandPopScissorRect extends RenderCommandBase {
+    action: "popScissorRect";
+}
+interface RenderCommandRender extends RenderCommandBase {
+    action: "render";
+    renderable: Renderable;
+}
+export type RenderCommand = RenderCommandPushScissorRect | RenderCommandPopScissorRect | RenderCommandRender;
 export declare class RootRenderable extends Renderable {
     private yogaConfig;
+    private renderList;
     constructor(ctx: RenderContext);
+    render(buffer: OptimizedBuffer, deltaTime: number): void;
     protected propagateLiveCount(delta: number): void;
     calculateLayout(): void;
     resize(width: number, height: number): void;
-    protected onUpdate(): void;
+    protected onUpdate(deltaTime: number): void;
     protected destroySelf(): void;
 }
 export {};

package/{index-23dkhv32.js → index-443j38eh.js}

@@ -5912,7 +5912,7 @@ class Renderable extends BaseRenderable {
   selectable = false;
   buffered;
   frameBuffer = null;
-  focusable = false;
+  _focusable = false;
   _focused = false;
   keyHandler = getKeyHandler();
   keypressHandler = null;
@@ -5932,6 +5932,7 @@ class Renderable extends BaseRenderable {
   parent = null;
   childrenPrimarySortDirty = true;
   childrenSortedByPrimaryAxis = [];
+  _newChildren = [];
   renderBefore;
   renderAfter;
   constructor(ctx, options) {
@@ -5962,12 +5963,19 @@ class Renderable extends BaseRenderable {
       this.createFrameBuffer();
     }
   }
+  get focusable() {
+    return this._focusable;
+  }
   get ctx() {
     return this._ctx;
   }
   get visible() {
     return this._visible;
   }
+  get primaryAxis() {
+    const dir = this.layoutNode.yogaNode.getFlexDirection();
+    return dir === 2 || dir === 3 ? "row" : "column";
+  }
   set visible(value) {
     if (this._visible === value)
       return;
@@ -5999,8 +6007,9 @@ class Renderable extends BaseRenderable {
     return false;
   }
   focus() {
-    if (this._focused || !this.focusable)
+    if (this._focused || !this._focusable)
       return;
+    this._ctx.focusRenderable(this);
     this._focused = true;
     this.requestRender();
     this.keypressHandler = (key) => {
@@ -6013,7 +6022,7 @@ class Renderable extends BaseRenderable {
     this.emit("focused" /* FOCUSED */);
   }
   blur() {
-    if (!this._focused || !this.focusable)
+    if (!this._focused || !this._focusable)
       return;
     this._focused = false;
     this.requestRender();
@@ -6169,80 +6178,6 @@ class Renderable extends BaseRenderable {
       this.needsZIndexSort = false;
     }
   }
-  getChildrenInViewport(viewport, padding = 10, minTriggerSize = 16) {
-    if (this.renderableArray.length < minTriggerSize)
-      return this.renderableArray;
-    const viewportTop = viewport.y - padding;
-    const viewportBottom = viewport.y + viewport.height + padding;
-    const viewportLeft = viewport.x - padding;
-    const viewportRight = viewport.x + viewport.width + padding;
-    const dir = this.layoutNode.yogaNode.getFlexDirection();
-    const isRow = dir === 2 || dir === 3;
-    const children = this.getChildrenSortedByPrimaryAxis();
-    const totalChildren = children.length;
-    if (totalChildren === 0)
-      return [];
-    const vpStart = isRow ? viewportLeft : viewportTop;
-    const vpEnd = isRow ? viewportRight : viewportBottom;
-    let lo = 0;
-    let hi = totalChildren - 1;
-    let candidate = -1;
-    while (lo <= hi) {
-      const mid = lo + hi >> 1;
-      const c = children[mid];
-      const start = isRow ? c.x : c.y;
-      const end = isRow ? c.x + c.width : c.y + c.height;
-      if (end < vpStart) {
-        lo = mid + 1;
-      } else if (start > vpEnd) {
-        hi = mid - 1;
-      } else {
-        candidate = mid;
-        break;
-      }
-    }
-    const visibleChildren = [];
-    if (candidate === -1) {
-      return visibleChildren;
-    }
-    let left = candidate;
-    while (left - 1 >= 0) {
-      const prev = children[left - 1];
-      if ((isRow ? prev.x + prev.width : prev.y + prev.height) < vpStart)
-        break;
-      left--;
-    }
-    let right = candidate + 1;
-    while (right < totalChildren) {
-      const next = children[right];
-      if ((isRow ? next.x : next.y) > vpEnd)
-        break;
-      right++;
-    }
-    for (let i = left;i < right; i++) {
-      const child = children[i];
-      if (isRow) {
-        const childBottom = child.y + child.height;
-        if (childBottom < viewportTop)
-          continue;
-        const childTop = child.y;
-        if (childTop > viewportBottom)
-          continue;
-      } else {
-        const childRight = child.x + child.width;
-        if (childRight < viewportLeft)
-          continue;
-        const childLeft = child.x;
-        if (childLeft > viewportRight)
-          continue;
-      }
-      visibleChildren.push(child);
-    }
-    if (visibleChildren.length > 1) {
-      visibleChildren.sort((a, b) => a.zIndex > b.zIndex ? 1 : a.zIndex < b.zIndex ? -1 : 0);
-    }
-    return visibleChildren;
-  }
   getChildrenSortedByPrimaryAxis() {
     if (!this.childrenPrimarySortDirty && this.childrenSortedByPrimaryAxis.length === this.renderableArray.length) {
       return this.childrenSortedByPrimaryAxis;
@@ -6645,6 +6580,7 @@ class Renderable extends BaseRenderable {
     this.needsZIndexSort = true;
     this.childrenPrimarySortDirty = true;
     this.renderableMap.set(renderable.id, renderable);
+    this._newChildren.push(renderable);
     if (renderable._liveCount > 0) {
       this.propagateLiveCount(renderable._liveCount);
     }
@@ -6708,11 +6644,38 @@ class Renderable extends BaseRenderable {
   getChildrenCount() {
     return this.renderableArray.length;
   }
-  render(buffer, deltaTime) {
+  updateLayout(deltaTime, renderList = []) {
     if (!this.visible)
       return;
-    this.onUpdate(deltaTime);
     this.updateFromLayout();
+    this.onUpdate(deltaTime);
+    renderList.push({ action: "render", renderable: this });
+    if (this._newChildren.length > 0) {
+      for (const child of this._newChildren) {
+        child.updateFromLayout();
+      }
+      this._newChildren = [];
+    }
+    this.ensureZIndexSorted();
+    const shouldPushScissor = this._overflow !== "visible" && this.width > 0 && this.height > 0;
+    if (shouldPushScissor) {
+      const scissorRect = this.getScissorRect();
+      renderList.push({
+        action: "pushScissorRect",
+        x: scissorRect.x,
+        y: scissorRect.y,
+        width: scissorRect.width,
+        height: scissorRect.height
+      });
+    }
+    for (const child of this._getChildren()) {
+      child.updateLayout(deltaTime, renderList);
+    }
+    if (shouldPushScissor) {
+      renderList.push({ action: "popScissorRect" });
+    }
+  }
+  render(buffer, deltaTime) {
     let renderBuffer = buffer;
     if (this.buffered && this.frameBuffer) {
       renderBuffer = this.frameBuffer;
@@ -6726,18 +6689,6 @@ class Renderable extends BaseRenderable {
     }
     this.markClean();
     this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
-    this.ensureZIndexSorted();
-    const shouldPushScissor = this._overflow !== "visible" && this.width > 0 && this.height > 0;
-    if (shouldPushScissor) {
-      const scissorRect = this.getScissorRect();
-      renderBuffer.pushScissorRect(scissorRect.x, scissorRect.y, scissorRect.width, scissorRect.height);
-    }
-    for (const child of this._getChildren()) {
-      child.render(renderBuffer, deltaTime);
-    }
-    if (shouldPushScissor) {
-      renderBuffer.popScissorRect();
-    }
     if (this.buffered && this.frameBuffer) {
       buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
     }
@@ -6890,6 +6841,7 @@ class Renderable extends BaseRenderable {
 
 class RootRenderable extends Renderable {
   yogaConfig;
+  renderList = [];
   constructor(ctx) {
     super(ctx, { id: "__root__", zIndex: 0, visible: true, width: ctx.width, height: ctx.height, enableLayout: true });
     this.yogaConfig = src_default.Config.create();
@@ -6904,6 +6856,29 @@ class RootRenderable extends Renderable {
     this.layoutNode.yogaNode.setFlexDirection(FlexDirection.Column);
     this.calculateLayout();
   }
+  render(buffer, deltaTime) {
+    if (!this.visible)
+      return;
+    if (this.layoutNode.yogaNode.isDirty()) {
+      this.calculateLayout();
+    }
+    this.renderList.length = 0;
+    this.updateLayout(deltaTime, this.renderList);
+    for (let i = 1;i < this.renderList.length; i++) {
+      const command = this.renderList[i];
+      switch (command.action) {
+        case "render":
+          command.renderable.render(buffer, deltaTime);
+          break;
+        case "pushScissorRect":
+          buffer.pushScissorRect(command.x, command.y, command.width, command.height);
+          break;
+        case "popScissorRect":
+          buffer.popScissorRect();
+          break;
+      }
+    }
+  }
   propagateLiveCount(delta) {
     const oldCount = this._liveCount;
     this._liveCount += delta;
@@ -6922,11 +6897,7 @@ class RootRenderable extends Renderable {
     this.height = height;
     this.emit("resized" /* RESIZED */, { width, height });
   }
-  onUpdate() {
-    if (this.layoutNode.yogaNode.isDirty()) {
-      this.calculateLayout();
-    }
-  }
+  onUpdate(deltaTime) {}
   destroySelf() {
     if (this.layoutNode) {
       this.layoutNode.destroy();
@@ -7791,6 +7762,83 @@ var ANSI = {
 
 // src/renderer.ts
 import { EventEmitter as EventEmitter6 } from "events";
+
+// src/lib/objects-in-viewport.ts
+function getObjectsInViewport(viewport, objects, direction = "column", padding = 10, minTriggerSize = 16) {
+  if (objects.length < minTriggerSize)
+    return objects;
+  const viewportTop = viewport.y - padding;
+  const viewportBottom = viewport.y + viewport.height + padding;
+  const viewportLeft = viewport.x - padding;
+  const viewportRight = viewport.x + viewport.width + padding;
+  const isRow = direction === "row";
+  const children = objects;
+  const totalChildren = children.length;
+  if (totalChildren === 0)
+    return [];
+  const vpStart = isRow ? viewportLeft : viewportTop;
+  const vpEnd = isRow ? viewportRight : viewportBottom;
+  let lo = 0;
+  let hi = totalChildren - 1;
+  let candidate = -1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    const c = children[mid];
+    const start = isRow ? c.x : c.y;
+    const end = isRow ? c.x + c.width : c.y + c.height;
+    if (end < vpStart) {
+      lo = mid + 1;
+    } else if (start > vpEnd) {
+      hi = mid - 1;
+    } else {
+      candidate = mid;
+      break;
+    }
+  }
+  const visibleChildren = [];
+  if (candidate === -1) {
+    return visibleChildren;
+  }
+  let left = candidate;
+  while (left - 1 >= 0) {
+    const prev = children[left - 1];
+    if ((isRow ? prev.x + prev.width : prev.y + prev.height) < vpStart)
+      break;
+    left--;
+  }
+  let right = candidate + 1;
+  while (right < totalChildren) {
+    const next = children[right];
+    if ((isRow ? next.x : next.y) > vpEnd)
+      break;
+    right++;
+  }
+  for (let i = left;i < right; i++) {
+    const child = children[i];
+    if (isRow) {
+      const childBottom = child.y + child.height;
+      if (childBottom < viewportTop)
+        continue;
+      const childTop = child.y;
+      if (childTop > viewportBottom)
+        continue;
+    } else {
+      const childRight = child.x + child.width;
+      if (childRight < viewportLeft)
+        continue;
+      const childLeft = child.x;
+      if (childLeft > viewportRight)
+        continue;
+    }
+    visibleChildren.push(child);
+  }
+  if (visibleChildren.length > 1) {
+    visibleChildren.sort((a, b) => a.zIndex > b.zIndex ? 1 : a.zIndex < b.zIndex ? -1 : 0);
+  }
+  return visibleChildren;
+}
+
+// src/renderer.ts
 class MouseEvent {
   type;
   button;
@@ -7952,6 +8000,7 @@ class CliRenderer extends EventEmitter6 {
   sigwinchHandler = null;
   _capabilities = null;
   _latestPointer = { x: 0, y: 0 };
+  _currentFocusedRenderable = null;
   constructor(lib, rendererPtr, stdin, stdout, width, height, config = {}) {
     super();
     this.stdin = stdin;
@@ -8063,6 +8112,17 @@ Error details:
       };
     }
   }
+  get currentFocusedRenderable() {
+    return this._currentFocusedRenderable;
+  }
+  focusRenderable(renderable) {
+    if (this._currentFocusedRenderable === renderable)
+      return;
+    if (this._currentFocusedRenderable) {
+      this._currentFocusedRenderable.blur();
+    }
+    this._currentFocusedRenderable = renderable;
+  }
   addToHitGrid(x, y, width, height, id) {
     if (id !== this.capturedRenderable?.num) {
       this.lib.addToHitGrid(this.rendererPtr, x, y, width, height, id);
@@ -8827,7 +8887,7 @@ Error details:
     }
   }
   walkSelectableRenderables(container, selectionBounds, selectedRenderables, touchedRenderables) {
-    const children = container.getChildrenInViewport(selectionBounds, 0);
+    const children = getObjectsInViewport(selectionBounds, container.getChildrenSortedByPrimaryAxis(), container.primaryAxis, 0);
     for (const child of children) {
       if (child.selectable) {
         const hasSelection = child.onSelectionChanged(this.currentSelection);
@@ -8843,7 +8903,7 @@ Error details:
   }
 }
 
-export { __toESM, __commonJS, __export, __require, Edge, Gutter, MeasureMode, BorderChars, getBorderFromSides, getBorderSides, borderCharsToArray, BorderCharArrays, TrackedNode, createTrackedNode, nonAlphanumericKeys, parseKeypress, KeyHandler, getKeyHandler, RGBA, hexToRgb, rgbToHex, hsvToRgb, parseColor, fonts, measureText, getCharacterPositions, coordinateToCharacterIndex, renderFontToFrameBuffer, TextAttributes, DebugOverlayCorner, createTextAttributes, isStyledText, StyledText, stringToStyledText, black, red, green, yellow, blue, magenta, cyan, white, brightBlack, brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan, brightWhite, bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bold, italic, underline, strikethrough, dim, reverse, blink, fg, bg, t, SyntaxStyle, hastToStyledText, parseAlign, parseBoxSizing, parseDimension, parseDirection, parseDisplay, parseEdge, parseFlexDirection, parseGutter, parseJustify, parseLogLevel, parseMeasureMode, parseOverflow, parsePositionType, parseUnit, parseWrap, MouseParser, Selection, convertGlobalToLocalSelection, ASCIIFontSelectionHelper, TextBuffer, LogLevel2 as LogLevel, setRenderLibPath, resolveRenderLib, OptimizedBuffer, h, isVNode, maybeMakeRenderable, wrapWithDelegates, instantiate, delegate, LayoutEvents, RenderableEvents, isValidPercentage, isMarginType, isPaddingType, isPositionType, isPositionTypeType, isOverflowType, isDimensionType, isFlexBasisType, isSizeType, isRenderable, BaseRenderable, Renderable, RootRenderable, capture, ConsolePosition, TerminalConsole, MouseEvent, MouseButton, createCliRenderer, CliRenderEvents, CliRenderer };
+export { __toESM, __commonJS, __export, __require, Edge, Gutter, MeasureMode, BorderChars, getBorderFromSides, getBorderSides, borderCharsToArray, BorderCharArrays, TrackedNode, createTrackedNode, nonAlphanumericKeys, parseKeypress, KeyHandler, getKeyHandler, RGBA, hexToRgb, rgbToHex, hsvToRgb, parseColor, fonts, measureText, getCharacterPositions, coordinateToCharacterIndex, renderFontToFrameBuffer, TextAttributes, DebugOverlayCorner, createTextAttributes, isStyledText, StyledText, stringToStyledText, black, red, green, yellow, blue, magenta, cyan, white, brightBlack, brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan, brightWhite, bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bold, italic, underline, strikethrough, dim, reverse, blink, fg, bg, t, SyntaxStyle, hastToStyledText, parseAlign, parseBoxSizing, parseDimension, parseDirection, parseDisplay, parseEdge, parseFlexDirection, parseGutter, parseJustify, parseLogLevel, parseMeasureMode, parseOverflow, parsePositionType, parseUnit, parseWrap, MouseParser, Selection, convertGlobalToLocalSelection, ASCIIFontSelectionHelper, TextBuffer, LogLevel2 as LogLevel, setRenderLibPath, resolveRenderLib, OptimizedBuffer, h, isVNode, maybeMakeRenderable, wrapWithDelegates, instantiate, delegate, LayoutEvents, RenderableEvents, isValidPercentage, isMarginType, isPaddingType, isPositionType, isPositionTypeType, isOverflowType, isDimensionType, isFlexBasisType, isSizeType, isRenderable, BaseRenderable, Renderable, RootRenderable, capture, ConsolePosition, TerminalConsole, getObjectsInViewport, MouseEvent, MouseButton, createCliRenderer, CliRenderEvents, CliRenderer };
 
-//# debugId=8BB772CB4E9B00D664756E2164756E21
-//# sourceMappingURL=index-23dkhv32.js.map
+//# debugId=688CA104E8866AAF64756E2164756E21
+//# sourceMappingURL=index-443j38eh.js.map