shortcutxl 0.2.0

package/dist/tui/components/select-list.js

@@ -0,0 +1,152 @@
+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;
+    }
+}
+//# sourceMappingURL=select-list.js.map

package/dist/tui/components/settings-list.js

@@ -0,0 +1,185 @@
+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));
+    }
+}
+//# sourceMappingURL=settings-list.js.map

package/dist/tui/components/spacer.js

@@ -0,0 +1,23 @@
+/**
+ * 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;
+    }
+}
+//# sourceMappingURL=spacer.js.map

package/dist/tui/components/text.js

@@ -0,0 +1,89 @@
+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 : [""];
+    }
+}
+//# sourceMappingURL=text.js.map

package/dist/tui/components/truncated-text.js

@@ -0,0 +1,51 @@
+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;
+    }
+}
+//# sourceMappingURL=truncated-text.js.map

package/dist/tui/editor-component.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=editor-component.js.map

package/dist/tui/fuzzy.js

@@ -0,0 +1,107 @@
+/**
+ * Fuzzy matching utilities.
+ * Matches if all query characters appear in order (not necessarily consecutive).
+ * Lower score = better match.
+ */
+export function fuzzyMatch(query, text) {
+    const queryLower = query.toLowerCase();
+    const textLower = text.toLowerCase();
+    const matchQuery = (normalizedQuery) => {
+        if (normalizedQuery.length === 0) {
+            return { matches: true, score: 0 };
+        }
+        if (normalizedQuery.length > textLower.length) {
+            return { matches: false, score: 0 };
+        }
+        let queryIndex = 0;
+        let score = 0;
+        let lastMatchIndex = -1;
+        let consecutiveMatches = 0;
+        for (let i = 0; i < textLower.length && queryIndex < normalizedQuery.length; i++) {
+            if (textLower[i] === normalizedQuery[queryIndex]) {
+                const isWordBoundary = i === 0 || /[\s\-_./:]/.test(textLower[i - 1]);
+                // Reward consecutive matches
+                if (lastMatchIndex === i - 1) {
+                    consecutiveMatches++;
+                    score -= consecutiveMatches * 5;
+                }
+                else {
+                    consecutiveMatches = 0;
+                    // Penalize gaps
+                    if (lastMatchIndex >= 0) {
+                        score += (i - lastMatchIndex - 1) * 2;
+                    }
+                }
+                // Reward word boundary matches
+                if (isWordBoundary) {
+                    score -= 10;
+                }
+                // Slight penalty for later matches
+                score += i * 0.1;
+                lastMatchIndex = i;
+                queryIndex++;
+            }
+        }
+        if (queryIndex < normalizedQuery.length) {
+            return { matches: false, score: 0 };
+        }
+        return { matches: true, score };
+    };
+    const primaryMatch = matchQuery(queryLower);
+    if (primaryMatch.matches) {
+        return primaryMatch;
+    }
+    const alphaNumericMatch = queryLower.match(/^(?<letters>[a-z]+)(?<digits>[0-9]+)$/);
+    const numericAlphaMatch = queryLower.match(/^(?<digits>[0-9]+)(?<letters>[a-z]+)$/);
+    const swappedQuery = alphaNumericMatch
+        ? `${alphaNumericMatch.groups?.digits ?? ""}${alphaNumericMatch.groups?.letters ?? ""}`
+        : numericAlphaMatch
+            ? `${numericAlphaMatch.groups?.letters ?? ""}${numericAlphaMatch.groups?.digits ?? ""}`
+            : "";
+    if (!swappedQuery) {
+        return primaryMatch;
+    }
+    const swappedMatch = matchQuery(swappedQuery);
+    if (!swappedMatch.matches) {
+        return primaryMatch;
+    }
+    return { matches: true, score: swappedMatch.score + 5 };
+}
+/**
+ * Filter and sort items by fuzzy match quality (best matches first).
+ * Supports space-separated tokens: all tokens must match.
+ */
+export function fuzzyFilter(items, query, getText) {
+    if (!query.trim()) {
+        return items;
+    }
+    const tokens = query
+        .trim()
+        .split(/\s+/)
+        .filter((t) => t.length > 0);
+    if (tokens.length === 0) {
+        return items;
+    }
+    const results = [];
+    for (const item of items) {
+        const text = getText(item);
+        let totalScore = 0;
+        let allMatch = true;
+        for (const token of tokens) {
+            const match = fuzzyMatch(token, text);
+            if (match.matches) {
+                totalScore += match.score;
+            }
+            else {
+                allMatch = false;
+                break;
+            }
+        }
+        if (allMatch) {
+            results.push({ item, totalScore });
+        }
+    }
+    results.sort((a, b) => a.totalScore - b.totalScore);
+    return results.map((r) => r.item);
+}
+//# sourceMappingURL=fuzzy.js.map

package/dist/tui/get-east-asian-width/index.js

@@ -0,0 +1,32 @@
+// Vendored from get-east-asian-width@1.3.0
+import {getCategory, isAmbiguous, isFullWidth, isWide} from './lookup.js';
+
+function validate(codePoint) {
+	if (!Number.isSafeInteger(codePoint)) {
+		throw new TypeError(`Expected a code point, got \`${typeof codePoint}\`.`);
+	}
+}
+
+export function eastAsianWidthType(codePoint) {
+	validate(codePoint);
+
+	return getCategory(codePoint);
+}
+
+export function eastAsianWidth(codePoint, {ambiguousAsWide = false} = {}) {
+	validate(codePoint);
+
+	if (
+		isFullWidth(codePoint)
+		|| isWide(codePoint)
+		|| (ambiguousAsWide && isAmbiguous(codePoint))
+	) {
+		return 2;
+	}
+
+	return 1;
+}
+
+// For Prettier. This doesn't count "ambiguous" characters or check for valid input.
+// https://github.com/sindresorhus/get-east-asian-width/pull/6
+export const _isNarrowWidth = codePoint => !(isFullWidth(codePoint) || isWide(codePoint));