@pencil-agent/nano-pencil 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/node_modules/@pencil-agent/tui/dist/components/image.d.ts

@@ -0,0 +1,33 @@
+/**
+ * [WHO]: ImageTheme, ImageOptions, Image
+ * [FROM]: No external dependencies
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/image.ts -
+ */
+import { type ImageDimensions } from "../terminal-image.js";
+import type { Component } from "../tui.js";
+export interface ImageTheme {
+    fallbackColor: (str: string) => string;
+}
+export interface ImageOptions {
+    maxWidthCells?: number;
+    maxHeightCells?: number;
+    filename?: string;
+    /** Kitty image ID. If provided, reuses this ID (for animations/updates). */
+    imageId?: number;
+}
+export declare class Image implements Component {
+    private base64Data;
+    private mimeType;
+    private dimensions;
+    private theme;
+    private options;
+    private imageId?;
+    private cachedLines?;
+    private cachedWidth?;
+    constructor(base64Data: string, mimeType: string, theme: ImageTheme, options?: ImageOptions, dimensions?: ImageDimensions);
+    /** Get the Kitty image ID used by this image (if any). */
+    getImageId(): number | undefined;
+    invalidate(): void;
+    render(width: number): string[];
+}

package/dist/node_modules/@pencil-agent/tui/dist/components/image.js

@@ -0,0 +1,74 @@
+/**
+ * [WHO]: ImageTheme, ImageOptions, Image
+ * [FROM]: No external dependencies
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/image.ts -
+ */
+import { getCapabilities, getImageDimensions, imageFallback, renderImage, } from "../terminal-image.js";
+export class Image {
+    base64Data;
+    mimeType;
+    dimensions;
+    theme;
+    options;
+    imageId;
+    cachedLines;
+    cachedWidth;
+    constructor(base64Data, mimeType, theme, options = {}, dimensions) {
+        this.base64Data = base64Data;
+        this.mimeType = mimeType;
+        this.theme = theme;
+        this.options = options;
+        this.dimensions = dimensions || getImageDimensions(base64Data, mimeType) || { widthPx: 800, heightPx: 600 };
+        this.imageId = options.imageId;
+    }
+    /** Get the Kitty image ID used by this image (if any). */
+    getImageId() {
+        return this.imageId;
+    }
+    invalidate() {
+        this.cachedLines = undefined;
+        this.cachedWidth = undefined;
+    }
+    render(width) {
+        if (this.cachedLines && this.cachedWidth === width) {
+            return this.cachedLines;
+        }
+        const maxWidth = Math.min(width - 2, this.options.maxWidthCells ?? 60);
+        const caps = getCapabilities();
+        let lines;
+        if (caps.images) {
+            const result = renderImage(this.base64Data, this.dimensions, {
+                maxWidthCells: maxWidth,
+                imageId: this.imageId,
+            });
+            if (result) {
+                // Store the image ID for later cleanup
+                if (result.imageId) {
+                    this.imageId = result.imageId;
+                }
+                // Return `rows` lines so TUI accounts for image height
+                // First (rows-1) lines are empty (TUI clears them)
+                // Last line: move cursor back up, then output image sequence
+                lines = [];
+                for (let i = 0; i < result.rows - 1; i++) {
+                    lines.push("");
+                }
+                // Move cursor up to first row, then output image
+                const moveUp = result.rows > 1 ? `\x1b[${result.rows - 1}A` : "";
+                lines.push(moveUp + result.sequence);
+            }
+            else {
+                const fallback = imageFallback(this.mimeType, this.dimensions, this.options.filename);
+                lines = [this.theme.fallbackColor(fallback)];
+            }
+        }
+        else {
+            const fallback = imageFallback(this.mimeType, this.dimensions, this.options.filename);
+            lines = [this.theme.fallbackColor(fallback)];
+        }
+        this.cachedLines = lines;
+        this.cachedWidth = width;
+        return lines;
+    }
+}

package/dist/node_modules/@pencil-agent/tui/dist/components/input.d.ts

@@ -0,0 +1,42 @@
+/**
+ * [WHO]: Input
+ * [FROM]: Depends on ../keybindings.js, ../kill-ring.js, ../tui.js, ../undo-stack.js, ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/input.ts -
+ */
+import { type Component, type Focusable } from "../tui.js";
+/**
+ * Input component - single-line text input with horizontal scrolling
+ */
+export declare class Input implements Component, Focusable {
+    private value;
+    private cursor;
+    onSubmit?: (value: string) => void;
+    onEscape?: () => void;
+    /** Focusable interface - set by TUI when focus changes */
+    focused: boolean;
+    private pasteBuffer;
+    private isInPaste;
+    private killRing;
+    private lastAction;
+    private undoStack;
+    getValue(): string;
+    setValue(value: string): void;
+    handleInput(data: string): void;
+    private insertCharacter;
+    private handleBackspace;
+    private handleForwardDelete;
+    private deleteToLineStart;
+    private deleteToLineEnd;
+    private deleteWordBackwards;
+    private deleteWordForward;
+    private yank;
+    private yankPop;
+    private pushUndo;
+    private undo;
+    private moveWordBackwards;
+    private moveWordForwards;
+    private handlePaste;
+    invalidate(): void;
+    render(width: number): string[];
+}

package/dist/node_modules/@pencil-agent/tui/dist/components/input.js

@@ -0,0 +1,438 @@
+/**
+ * [WHO]: Input
+ * [FROM]: Depends on ../keybindings.js, ../kill-ring.js, ../tui.js, ../undo-stack.js, ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/input.ts -
+ */
+import { getEditorKeybindings } from "../keybindings.js";
+import { KillRing } from "../kill-ring.js";
+import { CURSOR_MARKER } from "../tui.js";
+import { UndoStack } from "../undo-stack.js";
+import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils.js";
+const segmenter = getSegmenter();
+/**
+ * Input component - single-line text input with horizontal scrolling
+ */
+export class Input {
+    value = "";
+    cursor = 0; // Cursor position in the value
+    onSubmit;
+    onEscape;
+    /** Focusable interface - set by TUI when focus changes */
+    focused = false;
+    // Bracketed paste mode buffering
+    pasteBuffer = "";
+    isInPaste = false;
+    // Kill ring for Emacs-style kill/yank operations
+    killRing = new KillRing();
+    lastAction = null;
+    // Undo support
+    undoStack = new UndoStack();
+    getValue() {
+        return this.value;
+    }
+    setValue(value) {
+        this.value = value;
+        this.cursor = Math.min(this.cursor, value.length);
+    }
+    handleInput(data) {
+        // Handle bracketed paste mode
+        // Start of paste: \x1b[200~
+        // End of paste: \x1b[201~
+        // Check if we're starting a bracketed paste
+        if (data.includes("\x1b[200~")) {
+            this.isInPaste = true;
+            this.pasteBuffer = "";
+            data = data.replace("\x1b[200~", "");
+        }
+        // If we're in a paste, buffer the data
+        if (this.isInPaste) {
+            // Check if this chunk contains the end marker
+            this.pasteBuffer += data;
+            const endIndex = this.pasteBuffer.indexOf("\x1b[201~");
+            if (endIndex !== -1) {
+                // Extract the pasted content
+                const pasteContent = this.pasteBuffer.substring(0, endIndex);
+                // Process the complete paste
+                this.handlePaste(pasteContent);
+                // Reset paste state
+                this.isInPaste = false;
+                // Handle any remaining input after the paste marker
+                const remaining = this.pasteBuffer.substring(endIndex + 6); // 6 = length of \x1b[201~
+                this.pasteBuffer = "";
+                if (remaining) {
+                    this.handleInput(remaining);
+                }
+            }
+            return;
+        }
+        const kb = getEditorKeybindings();
+        // Escape/Cancel
+        if (kb.matches(data, "selectCancel")) {
+            if (this.onEscape)
+                this.onEscape();
+            return;
+        }
+        // Undo
+        if (kb.matches(data, "undo")) {
+            this.undo();
+            return;
+        }
+        // Submit
+        if (kb.matches(data, "submit") || data === "\n") {
+            if (this.onSubmit)
+                this.onSubmit(this.value);
+            return;
+        }
+        // Deletion
+        if (kb.matches(data, "deleteCharBackward")) {
+            this.handleBackspace();
+            return;
+        }
+        if (kb.matches(data, "deleteCharForward")) {
+            this.handleForwardDelete();
+            return;
+        }
+        if (kb.matches(data, "deleteWordBackward")) {
+            this.deleteWordBackwards();
+            return;
+        }
+        if (kb.matches(data, "deleteWordForward")) {
+            this.deleteWordForward();
+            return;
+        }
+        if (kb.matches(data, "deleteToLineStart")) {
+            this.deleteToLineStart();
+            return;
+        }
+        if (kb.matches(data, "deleteToLineEnd")) {
+            this.deleteToLineEnd();
+            return;
+        }
+        // Kill ring actions
+        if (kb.matches(data, "yank")) {
+            this.yank();
+            return;
+        }
+        if (kb.matches(data, "yankPop")) {
+            this.yankPop();
+            return;
+        }
+        // Cursor movement
+        if (kb.matches(data, "cursorLeft")) {
+            this.lastAction = null;
+            if (this.cursor > 0) {
+                const beforeCursor = this.value.slice(0, this.cursor);
+                const graphemes = [...segmenter.segment(beforeCursor)];
+                const lastGrapheme = graphemes[graphemes.length - 1];
+                this.cursor -= lastGrapheme ? lastGrapheme.segment.length : 1;
+            }
+            return;
+        }
+        if (kb.matches(data, "cursorRight")) {
+            this.lastAction = null;
+            if (this.cursor < this.value.length) {
+                const afterCursor = this.value.slice(this.cursor);
+                const graphemes = [...segmenter.segment(afterCursor)];
+                const firstGrapheme = graphemes[0];
+                this.cursor += firstGrapheme ? firstGrapheme.segment.length : 1;
+            }
+            return;
+        }
+        if (kb.matches(data, "cursorLineStart")) {
+            this.lastAction = null;
+            this.cursor = 0;
+            return;
+        }
+        if (kb.matches(data, "cursorLineEnd")) {
+            this.lastAction = null;
+            this.cursor = this.value.length;
+            return;
+        }
+        if (kb.matches(data, "cursorWordLeft")) {
+            this.moveWordBackwards();
+            return;
+        }
+        if (kb.matches(data, "cursorWordRight")) {
+            this.moveWordForwards();
+            return;
+        }
+        // Regular character input - accept printable characters including Unicode,
+        // but reject control characters (C0: 0x00-0x1F, DEL: 0x7F, C1: 0x80-0x9F)
+        const hasControlChars = [...data].some((ch) => {
+            const code = ch.charCodeAt(0);
+            return code < 32 || code === 0x7f || (code >= 0x80 && code <= 0x9f);
+        });
+        if (!hasControlChars) {
+            this.insertCharacter(data);
+        }
+    }
+    insertCharacter(char) {
+        // Undo coalescing: consecutive word chars coalesce into one undo unit
+        if (isWhitespaceChar(char) || this.lastAction !== "type-word") {
+            this.pushUndo();
+        }
+        this.lastAction = "type-word";
+        this.value = this.value.slice(0, this.cursor) + char + this.value.slice(this.cursor);
+        this.cursor += char.length;
+    }
+    handleBackspace() {
+        this.lastAction = null;
+        if (this.cursor > 0) {
+            this.pushUndo();
+            const beforeCursor = this.value.slice(0, this.cursor);
+            const graphemes = [...segmenter.segment(beforeCursor)];
+            const lastGrapheme = graphemes[graphemes.length - 1];
+            const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
+            this.value = this.value.slice(0, this.cursor - graphemeLength) + this.value.slice(this.cursor);
+            this.cursor -= graphemeLength;
+        }
+    }
+    handleForwardDelete() {
+        this.lastAction = null;
+        if (this.cursor < this.value.length) {
+            this.pushUndo();
+            const afterCursor = this.value.slice(this.cursor);
+            const graphemes = [...segmenter.segment(afterCursor)];
+            const firstGrapheme = graphemes[0];
+            const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
+            this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + graphemeLength);
+        }
+    }
+    deleteToLineStart() {
+        if (this.cursor === 0)
+            return;
+        this.pushUndo();
+        const deletedText = this.value.slice(0, this.cursor);
+        this.killRing.push(deletedText, { prepend: true, accumulate: this.lastAction === "kill" });
+        this.lastAction = "kill";
+        this.value = this.value.slice(this.cursor);
+        this.cursor = 0;
+    }
+    deleteToLineEnd() {
+        if (this.cursor >= this.value.length)
+            return;
+        this.pushUndo();
+        const deletedText = this.value.slice(this.cursor);
+        this.killRing.push(deletedText, { prepend: false, accumulate: this.lastAction === "kill" });
+        this.lastAction = "kill";
+        this.value = this.value.slice(0, this.cursor);
+    }
+    deleteWordBackwards() {
+        if (this.cursor === 0)
+            return;
+        // Save lastAction before cursor movement (moveWordBackwards resets it)
+        const wasKill = this.lastAction === "kill";
+        this.pushUndo();
+        const oldCursor = this.cursor;
+        this.moveWordBackwards();
+        const deleteFrom = this.cursor;
+        this.cursor = oldCursor;
+        const deletedText = this.value.slice(deleteFrom, this.cursor);
+        this.killRing.push(deletedText, { prepend: true, accumulate: wasKill });
+        this.lastAction = "kill";
+        this.value = this.value.slice(0, deleteFrom) + this.value.slice(this.cursor);
+        this.cursor = deleteFrom;
+    }
+    deleteWordForward() {
+        if (this.cursor >= this.value.length)
+            return;
+        // Save lastAction before cursor movement (moveWordForwards resets it)
+        const wasKill = this.lastAction === "kill";
+        this.pushUndo();
+        const oldCursor = this.cursor;
+        this.moveWordForwards();
+        const deleteTo = this.cursor;
+        this.cursor = oldCursor;
+        const deletedText = this.value.slice(this.cursor, deleteTo);
+        this.killRing.push(deletedText, { prepend: false, accumulate: wasKill });
+        this.lastAction = "kill";
+        this.value = this.value.slice(0, this.cursor) + this.value.slice(deleteTo);
+    }
+    yank() {
+        const text = this.killRing.peek();
+        if (!text)
+            return;
+        this.pushUndo();
+        this.value = this.value.slice(0, this.cursor) + text + this.value.slice(this.cursor);
+        this.cursor += text.length;
+        this.lastAction = "yank";
+    }
+    yankPop() {
+        if (this.lastAction !== "yank" || this.killRing.length <= 1)
+            return;
+        this.pushUndo();
+        // Delete the previously yanked text (still at end of ring before rotation)
+        const prevText = this.killRing.peek() || "";
+        this.value = this.value.slice(0, this.cursor - prevText.length) + this.value.slice(this.cursor);
+        this.cursor -= prevText.length;
+        // Rotate and insert new entry
+        this.killRing.rotate();
+        const text = this.killRing.peek() || "";
+        this.value = this.value.slice(0, this.cursor) + text + this.value.slice(this.cursor);
+        this.cursor += text.length;
+        this.lastAction = "yank";
+    }
+    pushUndo() {
+        this.undoStack.push({ value: this.value, cursor: this.cursor });
+    }
+    undo() {
+        const snapshot = this.undoStack.pop();
+        if (!snapshot)
+            return;
+        this.value = snapshot.value;
+        this.cursor = snapshot.cursor;
+        this.lastAction = null;
+    }
+    moveWordBackwards() {
+        if (this.cursor === 0) {
+            return;
+        }
+        this.lastAction = null;
+        const textBeforeCursor = this.value.slice(0, this.cursor);
+        const graphemes = [...segmenter.segment(textBeforeCursor)];
+        // Skip trailing whitespace
+        while (graphemes.length > 0 && isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "")) {
+            this.cursor -= graphemes.pop()?.segment.length || 0;
+        }
+        if (graphemes.length > 0) {
+            const lastGrapheme = graphemes[graphemes.length - 1]?.segment || "";
+            if (isPunctuationChar(lastGrapheme)) {
+                // Skip punctuation run
+                while (graphemes.length > 0 && isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                    this.cursor -= graphemes.pop()?.segment.length || 0;
+                }
+            }
+            else {
+                // Skip word run
+                while (graphemes.length > 0 &&
+                    !isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                    this.cursor -= graphemes.pop()?.segment.length || 0;
+                }
+            }
+        }
+    }
+    moveWordForwards() {
+        if (this.cursor >= this.value.length) {
+            return;
+        }
+        this.lastAction = null;
+        const textAfterCursor = this.value.slice(this.cursor);
+        const segments = segmenter.segment(textAfterCursor);
+        const iterator = segments[Symbol.iterator]();
+        let next = iterator.next();
+        // Skip leading whitespace
+        while (!next.done && isWhitespaceChar(next.value.segment)) {
+            this.cursor += next.value.segment.length;
+            next = iterator.next();
+        }
+        if (!next.done) {
+            const firstGrapheme = next.value.segment;
+            if (isPunctuationChar(firstGrapheme)) {
+                // Skip punctuation run
+                while (!next.done && isPunctuationChar(next.value.segment)) {
+                    this.cursor += next.value.segment.length;
+                    next = iterator.next();
+                }
+            }
+            else {
+                // Skip word run
+                while (!next.done && !isWhitespaceChar(next.value.segment) && !isPunctuationChar(next.value.segment)) {
+                    this.cursor += next.value.segment.length;
+                    next = iterator.next();
+                }
+            }
+        }
+    }
+    handlePaste(pastedText) {
+        this.lastAction = null;
+        this.pushUndo();
+        // Clean the pasted text - remove newlines and carriage returns
+        const cleanText = pastedText.replace(/\r\n/g, "").replace(/\r/g, "").replace(/\n/g, "");
+        // Insert at cursor position
+        this.value = this.value.slice(0, this.cursor) + cleanText + this.value.slice(this.cursor);
+        this.cursor += cleanText.length;
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        // Calculate visible window
+        const prompt = "> ";
+        const availableWidth = width - prompt.length;
+        if (availableWidth <= 0) {
+            return [prompt];
+        }
+        let visibleText = "";
+        let cursorDisplay = this.cursor;
+        if (this.value.length < availableWidth) {
+            // Everything fits (leave room for cursor at end)
+            visibleText = this.value;
+        }
+        else {
+            // Need horizontal scrolling
+            // Reserve one character for cursor if it's at the end
+            const scrollWidth = this.cursor === this.value.length ? availableWidth - 1 : availableWidth;
+            const halfWidth = Math.floor(scrollWidth / 2);
+            const findValidStart = (start) => {
+                while (start < this.value.length) {
+                    const charCode = this.value.charCodeAt(start);
+                    // this is low surrogate, not a valid start
+                    if (charCode >= 0xdc00 && charCode < 0xe000) {
+                        start++;
+                        continue;
+                    }
+                    break;
+                }
+                return start;
+            };
+            const findValidEnd = (end) => {
+                while (end > 0) {
+                    const charCode = this.value.charCodeAt(end - 1);
+                    // this is high surrogate, might be split.
+                    if (charCode >= 0xd800 && charCode < 0xdc00) {
+                        end--;
+                        continue;
+                    }
+                    break;
+                }
+                return end;
+            };
+            if (this.cursor < halfWidth) {
+                // Cursor near start
+                visibleText = this.value.slice(0, findValidEnd(scrollWidth));
+                cursorDisplay = this.cursor;
+            }
+            else if (this.cursor > this.value.length - halfWidth) {
+                // Cursor near end
+                const start = findValidStart(this.value.length - scrollWidth);
+                visibleText = this.value.slice(start);
+                cursorDisplay = this.cursor - start;
+            }
+            else {
+                // Cursor in middle
+                const start = findValidStart(this.cursor - halfWidth);
+                visibleText = this.value.slice(start, findValidEnd(start + scrollWidth));
+                cursorDisplay = halfWidth;
+            }
+        }
+        // Build line with fake cursor
+        // Insert cursor character at cursor position
+        const graphemes = [...segmenter.segment(visibleText.slice(cursorDisplay))];
+        const cursorGrapheme = graphemes[0];
+        const beforeCursor = visibleText.slice(0, cursorDisplay);
+        const atCursor = cursorGrapheme?.segment ?? " "; // Character at cursor, or space if at end
+        const afterCursor = visibleText.slice(cursorDisplay + atCursor.length);
+        // Hardware cursor marker (zero-width, emitted before fake cursor for IME positioning)
+        const marker = this.focused ? CURSOR_MARKER : "";
+        // Use inverse video to show cursor
+        const cursorChar = `\x1b[7m${atCursor}\x1b[27m`; // ESC[7m = reverse video, ESC[27m = normal
+        const textWithCursor = beforeCursor + marker + cursorChar + afterCursor;
+        // Calculate visual width
+        const visualLength = visibleWidth(textWithCursor);
+        const padding = " ".repeat(Math.max(0, availableWidth - visualLength));
+        const line = prompt + textWithCursor + padding;
+        return [line];
+    }
+}

package/dist/node_modules/@pencil-agent/tui/dist/components/loader.d.ts

@@ -0,0 +1,26 @@
+/**
+ * [WHO]: Loader
+ * [FROM]: Depends on ./text.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/loader.ts -
+ */
+import type { TUI } from "../tui.js";
+import { Text } from "./text.js";
+/**
+ * Loader component that updates every 80ms with spinning animation
+ */
+export declare class Loader extends Text {
+    private spinnerColorFn;
+    private messageColorFn;
+    private message;
+    private frames;
+    private currentFrame;
+    private intervalId;
+    private ui;
+    constructor(ui: TUI, spinnerColorFn: (str: string) => string, messageColorFn: (str: string) => string, message?: string);
+    render(width: number): string[];
+    start(): void;
+    stop(): void;
+    setMessage(message: string): void;
+    private updateDisplay;
+}

package/dist/node_modules/@pencil-agent/tui/dist/components/loader.js

@@ -0,0 +1,54 @@
+/**
+ * [WHO]: Loader
+ * [FROM]: Depends on ./text.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/loader.ts -
+ */
+import { Text } from "./text.js";
+/**
+ * Loader component that updates every 80ms with spinning animation
+ */
+export class Loader extends Text {
+    spinnerColorFn;
+    messageColorFn;
+    message;
+    frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    currentFrame = 0;
+    intervalId = null;
+    ui = null;
+    constructor(ui, spinnerColorFn, messageColorFn, message = "Loading...") {
+        super("", 1, 0);
+        this.spinnerColorFn = spinnerColorFn;
+        this.messageColorFn = messageColorFn;
+        this.message = message;
+        this.ui = ui;
+        this.start();
+    }
+    render(width) {
+        return ["", ...super.render(width)];
+    }
+    start() {
+        this.updateDisplay();
+        this.intervalId = setInterval(() => {
+            this.currentFrame = (this.currentFrame + 1) % this.frames.length;
+            this.updateDisplay();
+        }, 80);
+    }
+    stop() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    setMessage(message) {
+        this.message = message;
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        const frame = this.frames[this.currentFrame];
+        this.setText(`${this.spinnerColorFn(frame)} ${this.messageColorFn(this.message)}`);
+        if (this.ui) {
+            this.ui.requestRender();
+        }
+    }
+}