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

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

@@ -0,0 +1,157 @@
+/**
+ * [WHO]: SelectItem, SelectListTheme, SelectList
+ * [FROM]: Depends on ../keybindings.js, ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/select-list.ts -
+ */
+import { getEditorKeybindings } from "../keybindings.js";
+import { truncateToWidth } from "../utils.js";
+const normalizeToSingleLine = (text) => text.replace(/[\r\n]+/g, " ").trim();
+export class SelectList {
+    items = [];
+    filteredItems = [];
+    selectedIndex = 0;
+    maxVisible = 5;
+    theme;
+    onSelect;
+    onCancel;
+    onSelectionChange;
+    constructor(items, maxVisible, theme) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme;
+    }
+    setFilter(filter) {
+        this.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));
+        // Reset selection when filter changes
+        this.selectedIndex = 0;
+    }
+    setSelectedIndex(index) {
+        this.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        const lines = [];
+        // If no items match filter, show message
+        if (this.filteredItems.length === 0) {
+            lines.push(this.theme.noMatch("  No matching commands"));
+            return lines;
+        }
+        // Calculate visible range with scrolling
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, this.filteredItems.length);
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.filteredItems[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const descriptionSingleLine = item.description ? normalizeToSingleLine(item.description) : undefined;
+            let line = "";
+            if (isSelected) {
+                // Use arrow indicator for selection - entire line uses selectedText color
+                const prefixWidth = 2; // "→ " is 2 characters visually
+                const displayValue = item.label || item.value;
+                if (descriptionSingleLine && width > 40) {
+                    // Calculate how much space we have for value + description
+                    const maxValueWidth = Math.min(30, width - prefixWidth - 4);
+                    const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+                    const spacing = " ".repeat(Math.max(1, 32 - truncatedValue.length));
+                    // Calculate remaining space for description using visible widths
+                    const descriptionStart = prefixWidth + truncatedValue.length + spacing.length;
+                    const remainingWidth = width - descriptionStart - 2; // -2 for safety
+                    if (remainingWidth > 10) {
+                        const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, "");
+                        // Apply selectedText to entire line content
+                        line = this.theme.selectedText(`→ ${truncatedValue}${spacing}${truncatedDesc}`);
+                    }
+                    else {
+                        // Not enough space for description
+                        const maxWidth = width - prefixWidth - 2;
+                        line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+                    }
+                }
+                else {
+                    // No description or not enough width
+                    const maxWidth = width - prefixWidth - 2;
+                    line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+                }
+            }
+            else {
+                const displayValue = item.label || item.value;
+                const prefix = "  ";
+                if (descriptionSingleLine && width > 40) {
+                    // Calculate how much space we have for value + description
+                    const maxValueWidth = Math.min(30, width - prefix.length - 4);
+                    const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+                    const spacing = " ".repeat(Math.max(1, 32 - truncatedValue.length));
+                    // Calculate remaining space for description
+                    const descriptionStart = prefix.length + truncatedValue.length + spacing.length;
+                    const remainingWidth = width - descriptionStart - 2; // -2 for safety
+                    if (remainingWidth > 10) {
+                        const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, "");
+                        const descText = this.theme.description(spacing + truncatedDesc);
+                        line = prefix + truncatedValue + descText;
+                    }
+                    else {
+                        // Not enough space for description
+                        const maxWidth = width - prefix.length - 2;
+                        line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                    }
+                }
+                else {
+                    // No description or not enough width
+                    const maxWidth = width - prefix.length - 2;
+                    line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                }
+            }
+            lines.push(line);
+        }
+        // Add scroll indicators if needed
+        if (startIndex > 0 || endIndex < this.filteredItems.length) {
+            const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;
+            // Truncate if too long for terminal
+            lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")));
+        }
+        return lines;
+    }
+    handleInput(keyData) {
+        const kb = getEditorKeybindings();
+        // Up arrow - wrap to bottom when at top
+        if (kb.matches(keyData, "selectUp")) {
+            this.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;
+            this.notifySelectionChange();
+        }
+        // Down arrow - wrap to top when at bottom
+        else if (kb.matches(keyData, "selectDown")) {
+            this.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;
+            this.notifySelectionChange();
+        }
+        // Enter
+        else if (kb.matches(keyData, "selectConfirm")) {
+            const selectedItem = this.filteredItems[this.selectedIndex];
+            if (selectedItem && this.onSelect) {
+                this.onSelect(selectedItem);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (kb.matches(keyData, "selectCancel")) {
+            if (this.onCancel) {
+                this.onCancel();
+            }
+        }
+    }
+    notifySelectionChange() {
+        const selectedItem = this.filteredItems[this.selectedIndex];
+        if (selectedItem && this.onSelectionChange) {
+            this.onSelectionChange(selectedItem);
+        }
+    }
+    getSelectedItem() {
+        const item = this.filteredItems[this.selectedIndex];
+        return item || null;
+    }
+}

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

@@ -0,0 +1,55 @@
+/**
+ * [WHO]: SettingItem, SettingsListTheme, SettingsListOptions, SettingsList
+ * [FROM]: Depends on ../fuzzy.js, ../keybindings.js, ../utils.js, ./input.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/settings-list.ts -
+ */
+import type { Component } from "../tui.js";
+export interface SettingItem {
+    /** Unique identifier for this setting */
+    id: string;
+    /** Display label (left side) */
+    label: string;
+    /** Optional description shown when selected */
+    description?: string;
+    /** Current value to display (right side) */
+    currentValue: string;
+    /** If provided, Enter/Space cycles through these values */
+    values?: string[];
+    /** If provided, Enter opens this submenu. Receives current value and done callback. */
+    submenu?: (currentValue: string, done: (selectedValue?: string) => void) => Component;
+}
+export interface SettingsListTheme {
+    label: (text: string, selected: boolean) => string;
+    value: (text: string, selected: boolean) => string;
+    description: (text: string) => string;
+    cursor: string;
+    hint: (text: string) => string;
+}
+export interface SettingsListOptions {
+    enableSearch?: boolean;
+}
+export declare class SettingsList implements Component {
+    private items;
+    private filteredItems;
+    private theme;
+    private selectedIndex;
+    private maxVisible;
+    private onChange;
+    private onCancel;
+    private searchInput?;
+    private searchEnabled;
+    private submenuComponent;
+    private submenuItemIndex;
+    constructor(items: SettingItem[], maxVisible: number, theme: SettingsListTheme, onChange: (id: string, newValue: string) => void, onCancel: () => void, options?: SettingsListOptions);
+    /** Update an item's currentValue */
+    updateValue(id: string, newValue: string): void;
+    invalidate(): void;
+    render(width: number): string[];
+    private renderMainList;
+    handleInput(data: string): void;
+    private activateItem;
+    private closeSubmenu;
+    private applyFilter;
+    private addHintLine;
+}

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

@@ -0,0 +1,190 @@
+/**
+ * [WHO]: SettingItem, SettingsListTheme, SettingsListOptions, SettingsList
+ * [FROM]: Depends on ../fuzzy.js, ../keybindings.js, ../utils.js, ./input.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/settings-list.ts -
+ */
+import { fuzzyFilter } from "../fuzzy.js";
+import { getEditorKeybindings } from "../keybindings.js";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+import { Input } from "./input.js";
+export class SettingsList {
+    items;
+    filteredItems;
+    theme;
+    selectedIndex = 0;
+    maxVisible;
+    onChange;
+    onCancel;
+    searchInput;
+    searchEnabled;
+    // Submenu state
+    submenuComponent = null;
+    submenuItemIndex = null;
+    constructor(items, maxVisible, theme, onChange, onCancel, options = {}) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme;
+        this.onChange = onChange;
+        this.onCancel = onCancel;
+        this.searchEnabled = options.enableSearch ?? false;
+        if (this.searchEnabled) {
+            this.searchInput = new Input();
+        }
+    }
+    /** Update an item's currentValue */
+    updateValue(id, newValue) {
+        const item = this.items.find((i) => i.id === id);
+        if (item) {
+            item.currentValue = newValue;
+        }
+    }
+    invalidate() {
+        this.submenuComponent?.invalidate?.();
+    }
+    render(width) {
+        // If submenu is active, render it instead
+        if (this.submenuComponent) {
+            return this.submenuComponent.render(width);
+        }
+        return this.renderMainList(width);
+    }
+    renderMainList(width) {
+        const lines = [];
+        if (this.searchEnabled && this.searchInput) {
+            lines.push(...this.searchInput.render(width));
+            lines.push("");
+        }
+        if (this.items.length === 0) {
+            lines.push(this.theme.hint("  No settings available"));
+            if (this.searchEnabled) {
+                this.addHintLine(lines, width);
+            }
+            return lines;
+        }
+        const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+        if (displayItems.length === 0) {
+            lines.push(truncateToWidth(this.theme.hint("  No matching settings"), width));
+            this.addHintLine(lines, width);
+            return lines;
+        }
+        // Calculate visible range with scrolling
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), displayItems.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, displayItems.length);
+        // Calculate max label width for alignment
+        const maxLabelWidth = Math.min(30, Math.max(...this.items.map((item) => visibleWidth(item.label))));
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = displayItems[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const prefix = isSelected ? this.theme.cursor : "  ";
+            const prefixWidth = visibleWidth(prefix);
+            // Pad label to align values
+            const labelPadded = item.label + " ".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+            const labelText = this.theme.label(labelPadded, isSelected);
+            // Calculate space for value
+            const separator = "  ";
+            const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
+            const valueMaxWidth = width - usedWidth - 2;
+            const valueText = this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, ""), isSelected);
+            lines.push(truncateToWidth(prefix + labelText + separator + valueText, width));
+        }
+        // Add scroll indicator if needed
+        if (startIndex > 0 || endIndex < displayItems.length) {
+            const scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`;
+            lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, "")));
+        }
+        // Add description for selected item
+        const selectedItem = displayItems[this.selectedIndex];
+        if (selectedItem?.description) {
+            lines.push("");
+            const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);
+            for (const line of wrappedDesc) {
+                lines.push(this.theme.description(`  ${line}`));
+            }
+        }
+        // Add hint
+        this.addHintLine(lines, width);
+        return lines;
+    }
+    handleInput(data) {
+        // If submenu is active, delegate all input to it
+        // The submenu's onCancel (triggered by escape) will call done() which closes it
+        if (this.submenuComponent) {
+            this.submenuComponent.handleInput?.(data);
+            return;
+        }
+        // Main list input handling
+        const kb = getEditorKeybindings();
+        const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+        if (kb.matches(data, "selectUp")) {
+            if (displayItems.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;
+        }
+        else if (kb.matches(data, "selectDown")) {
+            if (displayItems.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;
+        }
+        else if (kb.matches(data, "selectConfirm") || data === " ") {
+            this.activateItem();
+        }
+        else if (kb.matches(data, "selectCancel")) {
+            this.onCancel();
+        }
+        else if (this.searchEnabled && this.searchInput) {
+            const sanitized = data.replace(/ /g, "");
+            if (!sanitized) {
+                return;
+            }
+            this.searchInput.handleInput(sanitized);
+            this.applyFilter(this.searchInput.getValue());
+        }
+    }
+    activateItem() {
+        const item = this.searchEnabled ? this.filteredItems[this.selectedIndex] : this.items[this.selectedIndex];
+        if (!item)
+            return;
+        if (item.submenu) {
+            // Open submenu, passing current value so it can pre-select correctly
+            this.submenuItemIndex = this.selectedIndex;
+            this.submenuComponent = item.submenu(item.currentValue, (selectedValue) => {
+                if (selectedValue !== undefined) {
+                    item.currentValue = selectedValue;
+                    this.onChange(item.id, selectedValue);
+                }
+                this.closeSubmenu();
+            });
+        }
+        else if (item.values && item.values.length > 0) {
+            // Cycle through values
+            const currentIndex = item.values.indexOf(item.currentValue);
+            const nextIndex = (currentIndex + 1) % item.values.length;
+            const newValue = item.values[nextIndex];
+            item.currentValue = newValue;
+            this.onChange(item.id, newValue);
+        }
+    }
+    closeSubmenu() {
+        this.submenuComponent = null;
+        // Restore selection to the item that opened the submenu
+        if (this.submenuItemIndex !== null) {
+            this.selectedIndex = this.submenuItemIndex;
+            this.submenuItemIndex = null;
+        }
+    }
+    applyFilter(query) {
+        this.filteredItems = fuzzyFilter(this.items, query, (item) => item.label);
+        this.selectedIndex = 0;
+    }
+    addHintLine(lines, width) {
+        lines.push("");
+        lines.push(truncateToWidth(this.theme.hint(this.searchEnabled
+            ? "  Type to search · Enter/Space to change · Esc to cancel"
+            : "  Enter/Space to change · Esc to cancel"), width));
+    }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * [WHO]: Spacer
+ * [FROM]: No external dependencies
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/spacer.ts -
+ */
+import type { Component } from "../tui.js";
+/**
+ * Spacer component that renders empty lines
+ */
+export declare class Spacer implements Component {
+    private lines;
+    constructor(lines?: number);
+    setLines(lines: number): void;
+    invalidate(): void;
+    render(_width: number): string[];
+}

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

@@ -0,0 +1,28 @@
+/**
+ * [WHO]: Spacer
+ * [FROM]: No external dependencies
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/spacer.ts -
+ */
+/**
+ * Spacer component that renders empty lines
+ */
+export class Spacer {
+    lines;
+    constructor(lines = 1) {
+        this.lines = lines;
+    }
+    setLines(lines) {
+        this.lines = lines;
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(_width) {
+        const result = [];
+        for (let i = 0; i < this.lines; i++) {
+            result.push("");
+        }
+        return result;
+    }
+}

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

@@ -0,0 +1,24 @@
+/**
+ * [WHO]: Text
+ * [FROM]: Depends on ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/text.ts -
+ */
+import type { Component } from "../tui.js";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export declare class Text implements Component {
+    private text;
+    private paddingX;
+    private paddingY;
+    private customBgFn?;
+    private cachedText?;
+    private cachedWidth?;
+    private cachedLines?;
+    constructor(text?: string, paddingX?: number, paddingY?: number, customBgFn?: (text: string) => string);
+    setText(text: string): void;
+    setCustomBgFn(customBgFn?: (text: string) => string): void;
+    invalidate(): void;
+    render(width: number): string[];
+}

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

@@ -0,0 +1,94 @@
+/**
+ * [WHO]: Text
+ * [FROM]: Depends on ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/text.ts -
+ */
+import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export class Text {
+    text;
+    paddingX; // Left/right padding
+    paddingY; // Top/bottom padding
+    customBgFn;
+    // Cache for rendered output
+    cachedText;
+    cachedWidth;
+    cachedLines;
+    constructor(text = "", paddingX = 1, paddingY = 1, customBgFn) {
+        this.text = text;
+        this.paddingX = paddingX;
+        this.paddingY = paddingY;
+        this.customBgFn = customBgFn;
+    }
+    setText(text) {
+        this.text = text;
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    setCustomBgFn(customBgFn) {
+        this.customBgFn = customBgFn;
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    invalidate() {
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    render(width) {
+        // Check cache
+        if (this.cachedLines && this.cachedText === this.text && this.cachedWidth === width) {
+            return this.cachedLines;
+        }
+        // Don't render anything if there's no actual text
+        if (!this.text || this.text.trim() === "") {
+            const result = [];
+            this.cachedText = this.text;
+            this.cachedWidth = width;
+            this.cachedLines = result;
+            return result;
+        }
+        // Replace tabs with 3 spaces
+        const normalizedText = this.text.replace(/\t/g, "   ");
+        // Calculate content width (subtract left/right margins)
+        const contentWidth = Math.max(1, width - this.paddingX * 2);
+        // Wrap text (this preserves ANSI codes but does NOT pad)
+        const wrappedLines = wrapTextWithAnsi(normalizedText, contentWidth);
+        // Add margins and background to each line
+        const leftMargin = " ".repeat(this.paddingX);
+        const rightMargin = " ".repeat(this.paddingX);
+        const contentLines = [];
+        for (const line of wrappedLines) {
+            // Add margins
+            const lineWithMargins = leftMargin + line + rightMargin;
+            // Apply background if specified (this also pads to full width)
+            if (this.customBgFn) {
+                contentLines.push(applyBackgroundToLine(lineWithMargins, width, this.customBgFn));
+            }
+            else {
+                // No background - just pad to width with spaces
+                const visibleLen = visibleWidth(lineWithMargins);
+                const paddingNeeded = Math.max(0, width - visibleLen);
+                contentLines.push(lineWithMargins + " ".repeat(paddingNeeded));
+            }
+        }
+        // Add top/bottom padding (empty lines)
+        const emptyLine = " ".repeat(width);
+        const emptyLines = [];
+        for (let i = 0; i < this.paddingY; i++) {
+            const line = this.customBgFn ? applyBackgroundToLine(emptyLine, width, this.customBgFn) : emptyLine;
+            emptyLines.push(line);
+        }
+        const result = [...emptyLines, ...contentLines, ...emptyLines];
+        // Update cache
+        this.cachedText = this.text;
+        this.cachedWidth = width;
+        this.cachedLines = result;
+        return result.length > 0 ? result : [""];
+    }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * [WHO]: TruncatedText
+ * [FROM]: Depends on ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/truncated-text.ts -
+ */
+import type { Component } from "../tui.js";
+/**
+ * Text component that truncates to fit viewport width
+ */
+export declare class TruncatedText implements Component {
+    private text;
+    private paddingX;
+    private paddingY;
+    constructor(text: string, paddingX?: number, paddingY?: number);
+    invalidate(): void;
+    render(width: number): string[];
+}

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

@@ -0,0 +1,56 @@
+/**
+ * [WHO]: TruncatedText
+ * [FROM]: Depends on ../utils.js
+ * [TO]: Consumed by core/lib/tui/src/index.ts
+ * [HERE]: core/lib/tui/src/components/truncated-text.ts -
+ */
+import { truncateToWidth, visibleWidth } from "../utils.js";
+/**
+ * Text component that truncates to fit viewport width
+ */
+export class TruncatedText {
+    text;
+    paddingX;
+    paddingY;
+    constructor(text, paddingX = 0, paddingY = 0) {
+        this.text = text;
+        this.paddingX = paddingX;
+        this.paddingY = paddingY;
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        const result = [];
+        // Empty line padded to width
+        const emptyLine = " ".repeat(width);
+        // Add vertical padding above
+        for (let i = 0; i < this.paddingY; i++) {
+            result.push(emptyLine);
+        }
+        // Calculate available width after horizontal padding
+        const availableWidth = Math.max(1, width - this.paddingX * 2);
+        // Take only the first line (stop at newline)
+        let singleLineText = this.text;
+        const newlineIndex = this.text.indexOf("\n");
+        if (newlineIndex !== -1) {
+            singleLineText = this.text.substring(0, newlineIndex);
+        }
+        // Truncate text if needed (accounting for ANSI codes)
+        const displayText = truncateToWidth(singleLineText, availableWidth);
+        // Add horizontal padding
+        const leftPadding = " ".repeat(this.paddingX);
+        const rightPadding = " ".repeat(this.paddingX);
+        const lineWithPadding = leftPadding + displayText + rightPadding;
+        // Pad line to exactly width characters
+        const lineVisibleWidth = visibleWidth(lineWithPadding);
+        const paddingNeeded = Math.max(0, width - lineVisibleWidth);
+        const finalLine = lineWithPadding + " ".repeat(paddingNeeded);
+        result.push(finalLine);
+        // Add vertical padding below
+        for (let i = 0; i < this.paddingY; i++) {
+            result.push(emptyLine);
+        }
+        return result;
+    }
+}