@spences10/pi-tui-modal 0.0.9 → 0.0.10

package/dist/index.js

@@ -1,652 +1,2 @@
-import { Box, fuzzyFilter, getKeybindings, Input, Key, matchesKey, SelectList, SettingsList, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from '@earendil-works/pi-tui';
-const default_overlay_options = {
-    width: '80%',
-    minWidth: 60,
-    maxHeight: '80%',
-};
-const default_modal_style = {
-    border: 'rounded',
-    border_color: 'accent',
-};
-const border_characters = {
-    rounded: {
-        top_left: '╭',
-        top: '─',
-        top_right: '╮',
-        left: '│',
-        right: '│',
-        bottom_left: '╰',
-        bottom: '─',
-        bottom_right: '╯',
-    },
-    square: {
-        top_left: '┌',
-        top: '─',
-        top_right: '┐',
-        left: '│',
-        right: '│',
-        bottom_left: '└',
-        bottom: '─',
-        bottom_right: '┘',
-    },
-};
-function normalize_text(value) {
-    if (!value)
-        return [];
-    const resolved = typeof value === 'function' ? value() : value;
-    return Array.isArray(resolved) ? resolved : [resolved];
-}
-function parse_size_value(value, total) {
-    if (value === undefined)
-        return undefined;
-    if (typeof value === 'number')
-        return value;
-    const match = value.match(/^(\d+(?:\.\d+)?)%$/);
-    return match
-        ? Math.floor((Number(match[1]) / 100) * total)
-        : undefined;
-}
-function get_vertical_margin(margin) {
-    if (typeof margin === 'number')
-        return Math.max(0, margin) * 2;
-    return (Math.max(0, margin?.top ?? 0) + Math.max(0, margin?.bottom ?? 0));
-}
-function get_terminal_rows(tui) {
-    const rows = tui
-        .terminal?.rows;
-    return rows ?? process.stdout.rows ?? 24;
-}
-function get_border_line_count(style) {
-    return style?.border === 'none' ? 0 : 2;
-}
-function count_text_lines(value, width) {
-    return normalize_text(value).reduce((count, text) => {
-        if (text.trim() === '')
-            return count;
-        return (count +
-            wrapTextWithAnsi(text.replace(/\t/g, '   '), width).length);
-    }, 0);
-}
-function get_modal_body_line_budget(tui, options, body_width = 80) {
-    const terminal_rows = get_terminal_rows(tui);
-    const overlay_options = {
-        ...default_overlay_options,
-        ...options.overlay_options,
-    };
-    const available_height = Math.max(1, terminal_rows - get_vertical_margin(overlay_options.margin));
-    const max_height = Math.max(1, Math.min(parse_size_value(overlay_options.maxHeight, terminal_rows) ??
-        available_height, available_height));
-    const fixed_lines = get_border_line_count(options.style) +
-        2 +
-        count_text_lines(options.title, body_width) +
-        count_text_lines(options.subtitle, body_width) +
-        count_text_lines(options.footer, body_width);
-    return Math.max(1, max_height - fixed_lines);
-}
-function fit_visible_items(item_count, preferred, body_line_budget) {
-    const budget = Math.max(1, body_line_budget);
-    const candidate = Math.max(1, Math.min(preferred, item_count));
-    if (item_count > candidate) {
-        return Math.max(1, Math.min(candidate, budget - 1));
-    }
-    return Math.max(1, Math.min(candidate, budget));
-}
-function set_component_max_visible(component, max_visible) {
-    component.maxVisible = max_visible;
-}
-function normalize_metadata(value, item) {
-    if (!value)
-        return [];
-    const resolved = typeof value === 'function' ? value(item) : value;
-    if (!resolved)
-        return [];
-    return Array.isArray(resolved) ? resolved : [resolved];
-}
-function make_select_theme(theme) {
-    return {
-        selectedPrefix: (text) => theme.fg('accent', text),
-        selectedText: (text) => theme.fg('accent', text),
-        description: (text) => theme.fg('muted', text),
-        scrollInfo: (text) => theme.fg('dim', text),
-        noMatch: (text) => theme.fg('warning', text),
-    };
-}
-function value_color(value) {
-    const normalized = value.trim().toLowerCase();
-    if (normalized.startsWith('●') ||
-        normalized.startsWith('✓') ||
-        normalized.includes('enabled') ||
-        normalized.includes('selected') ||
-        normalized.includes('imported')) {
-        return 'success';
-    }
-    if (normalized.startsWith('↻') ||
-        normalized.includes('sync') ||
-        normalized.includes('queued')) {
-        return 'warning';
-    }
-    return 'dim';
-}
-function get_selected_setting(list) {
-    const internals = list;
-    const items = internals.searchEnabled
-        ? internals.filteredItems
-        : internals.items;
-    return items[internals.selectedIndex];
-}
-function make_settings_theme(theme) {
-    return {
-        cursor: theme.fg('accent', '→ '),
-        label: (text, selected) => {
-            if (text.startsWith('──') && text.endsWith('──')) {
-                return theme.fg('dim', theme.bold(text));
-            }
-            return selected ? theme.fg('accent', text) : text;
-        },
-        value: (text, selected) => {
-            const rendered = theme.fg(value_color(text), text);
-            return selected
-                ? theme.bold(theme.fg('accent', rendered))
-                : rendered;
-        },
-        description: (text) => theme.fg('muted', text),
-        hint: (text) => theme.fg('dim', text),
-    };
-}
-function is_focusable(value) {
-    return Boolean(value && typeof value === 'object' && 'focused' in value);
-}
-class TextModalBody {
-    text;
-    max_visible_lines;
-    theme;
-    on_cancel;
-    offset = 0;
-    wrapped_lines = [];
-    constructor(text, max_visible_lines, theme, on_cancel) {
-        this.text = text;
-        this.max_visible_lines = max_visible_lines;
-        this.theme = theme;
-        this.on_cancel = on_cancel;
-    }
-    set_max_visible_lines(max_visible_lines) {
-        this.max_visible_lines = Math.max(1, max_visible_lines);
-    }
-    render(width) {
-        this.wrapped_lines = normalize_text(this.text).flatMap((block) => block
-            .split('\n')
-            .flatMap((line) => line.length === 0 ? [''] : wrapTextWithAnsi(line, width)));
-        const max_offset = Math.max(0, this.wrapped_lines.length - this.max_visible_lines);
-        this.offset = Math.max(0, Math.min(this.offset, max_offset));
-        const end = Math.min(this.offset + this.max_visible_lines, this.wrapped_lines.length);
-        const visible = this.wrapped_lines
-            .slice(this.offset, end)
-            .map((line) => truncateToWidth(line, width));
-        if (this.wrapped_lines.length > this.max_visible_lines) {
-            visible.push(this.theme.fg('dim', truncateToWidth(`(${this.offset + 1}-${end}/${this.wrapped_lines.length})`, width)));
-        }
-        return visible;
-    }
-    invalidate() {
-        // No cached rendering.
-    }
-    handleInput(data) {
-        const keybindings = getKeybindings();
-        const max_offset = Math.max(0, this.wrapped_lines.length - this.max_visible_lines);
-        if (keybindings.matches(data, 'tui.select.up') || data === 'k') {
-            this.offset = Math.max(0, this.offset - 1);
-        }
-        else if (keybindings.matches(data, 'tui.select.down') ||
-            data === 'j') {
-            this.offset = Math.min(max_offset, this.offset + 1);
-        }
-        else if (matchesKey(data, Key.home)) {
-            this.offset = 0;
-        }
-        else if (matchesKey(data, Key.end)) {
-            this.offset = max_offset;
-        }
-        else if (keybindings.matches(data, 'tui.select.cancel') ||
-            data === 'q') {
-            this.on_cancel();
-        }
-    }
-}
-class InputModalBody {
-    options;
-    theme;
-    on_submit;
-    on_cancel;
-    input = new Input();
-    _focused = false;
-    get focused() {
-        return this._focused;
-    }
-    set focused(value) {
-        this._focused = value;
-        this.input.focused = value;
-    }
-    constructor(options, theme, on_submit, on_cancel) {
-        this.options = options;
-        this.theme = theme;
-        this.on_submit = on_submit;
-        this.on_cancel = on_cancel;
-        this.input.setValue(options.initial_value ?? '');
-        this.input.onSubmit = (value) => {
-            const next_value = options.trim === false ? value : value.trim();
-            if (!options.allow_empty && next_value.length === 0)
-                return;
-            this.on_submit(next_value);
-        };
-        this.input.onEscape = this.on_cancel;
-    }
-    render(width) {
-        const lines = [];
-        if (this.options.label) {
-            for (const line of wrapTextWithAnsi(this.options.label, width)) {
-                lines.push(this.theme.fg('muted', line));
-            }
-            lines.push('');
-        }
-        lines.push(...this.input.render(width));
-        lines.push('');
-        lines.push(this.theme.fg('dim', this.options.allow_empty
-            ? 'Enter submits • Esc cancels'
-            : 'Enter submits non-empty value • Esc cancels'));
-        return lines.map((line) => truncateToWidth(line, width));
-    }
-    invalidate() {
-        this.input.invalidate();
-    }
-    handleInput(data) {
-        this.input.handleInput(data);
-    }
-}
-class DetailedSettingsList {
-    items;
-    max_visible;
-    theme;
-    on_change;
-    on_cancel;
-    options;
-    filtered_items;
-    selected_index = 0;
-    search_input;
-    constructor(items, max_visible, theme, on_change, on_cancel, options) {
-        this.items = items;
-        this.max_visible = max_visible;
-        this.theme = theme;
-        this.on_change = on_change;
-        this.on_cancel = on_cancel;
-        this.options = options;
-        this.filtered_items = items;
-        if (options.enable_search)
-            this.search_input = new Input();
-    }
-    get_selected_item() {
-        return this.get_display_items()[this.selected_index];
-    }
-    set_max_visible(max_visible) {
-        this.max_visible = Math.max(1, max_visible);
-    }
-    render(width) {
-        const lines = [];
-        if (this.search_input) {
-            lines.push(...this.search_input.render(width));
-            lines.push('');
-        }
-        const display_items = this.get_display_items();
-        if (display_items.length === 0) {
-            lines.push(truncateToWidth(this.theme.hint(this.items.length === 0
-                ? '  No settings available'
-                : '  No matching settings'), width));
-            this.add_hint_line(lines, width);
-            return lines;
-        }
-        const start_index = Math.max(0, Math.min(this.selected_index - Math.floor(this.max_visible / 2), display_items.length - this.max_visible));
-        const end_index = Math.min(start_index + this.max_visible, display_items.length);
-        const max_label_width = Math.min(30, Math.max(...this.items.map((item) => visibleWidth(item.label))));
-        const max_value_width = Math.min(14, Math.max(...this.items.map((item) => visibleWidth(item.currentValue))));
-        for (let index = start_index; index < end_index; index++) {
-            const item = display_items[index];
-            if (!item)
-                continue;
-            lines.push(this.render_item(item, index === this.selected_index, width, max_label_width, max_value_width));
-        }
-        if (start_index > 0 || end_index < display_items.length) {
-            lines.push(this.theme.hint(truncateToWidth(`  (${this.selected_index + 1}/${display_items.length})`, width - 2, '')));
-        }
-        const selected_item = this.get_selected_item();
-        if (selected_item?.description) {
-            lines.push('');
-            for (const line of wrapTextWithAnsi(selected_item.description, width - 4)) {
-                lines.push(this.theme.description(`  ${line}`));
-            }
-        }
-        this.add_hint_line(lines, width);
-        return lines;
-    }
-    invalidate() {
-        // No cached rendering.
-    }
-    handleInput(data) {
-        const keybindings = getKeybindings();
-        const display_items = this.get_display_items();
-        if (keybindings.matches(data, 'tui.select.up')) {
-            if (display_items.length === 0)
-                return;
-            this.selected_index =
-                this.selected_index === 0
-                    ? display_items.length - 1
-                    : this.selected_index - 1;
-        }
-        else if (keybindings.matches(data, 'tui.select.down')) {
-            if (display_items.length === 0)
-                return;
-            this.selected_index =
-                this.selected_index === display_items.length - 1
-                    ? 0
-                    : this.selected_index + 1;
-        }
-        else if (keybindings.matches(data, 'tui.select.confirm') ||
-            data === ' ') {
-            this.activate_item();
-        }
-        else if (keybindings.matches(data, 'tui.select.cancel')) {
-            this.on_cancel();
-        }
-        else if (this.search_input) {
-            const sanitized = data.replace(/ /g, '');
-            if (!sanitized)
-                return;
-            this.search_input.handleInput(sanitized);
-            this.apply_filter(this.search_input.getValue());
-        }
-    }
-    get_display_items() {
-        return this.search_input ? this.filtered_items : this.items;
-    }
-    render_item(item, selected, width, max_label_width, max_value_width) {
-        const prefix = selected ? this.theme.cursor : '  ';
-        const label = truncateToWidth(item.label, max_label_width, '…');
-        const padded_label = label +
-            ' '.repeat(Math.max(0, max_label_width - visibleWidth(label)));
-        const value = truncateToWidth(item.currentValue, max_value_width, '');
-        const padded_value = value +
-            ' '.repeat(Math.max(0, max_value_width - visibleWidth(value)));
-        const detail = this.options.detail?.(item) ?? '';
-        const line = [
-            prefix,
-            this.theme.label(padded_label, selected),
-            '  ',
-            this.theme.value(padded_value, selected),
-            detail ? `  ${this.theme.description(detail)}` : '',
-        ].join('');
-        return truncateToWidth(line, width);
-    }
-    activate_item() {
-        const item = this.get_selected_item();
-        if (!item?.values || item.values.length === 0)
-            return;
-        const current_index = item.values.indexOf(item.currentValue);
-        const next_index = (current_index + 1) % item.values.length;
-        const new_value = item.values[next_index];
-        item.currentValue = new_value;
-        this.on_change(item.id, new_value);
-    }
-    apply_filter(query) {
-        this.filtered_items = fuzzyFilter(this.items, query, (item) => [
-            item.label,
-            item.currentValue,
-            item.description,
-            this.options.detail?.(item),
-        ]
-            .filter(Boolean)
-            .join(' '));
-        this.selected_index = 0;
-    }
-    add_hint_line(lines, width) {
-        lines.push('');
-        lines.push(truncateToWidth(this.theme.hint(this.search_input
-            ? '  Type to search · Enter/Space to change · Esc to cancel'
-            : '  Enter/Space to change · Esc to cancel'), width));
-    }
-}
-function pad_to_width(line, width) {
-    return line + ' '.repeat(Math.max(0, width - visibleWidth(line)));
-}
-function render_border_line(chars, width, color) {
-    if (width <= 1)
-        return color(chars.top_left);
-    return color(chars.top_left +
-        chars.top.repeat(Math.max(0, width - 2)) +
-        chars.top_right);
-}
-function render_bottom_border_line(chars, width, color) {
-    if (width <= 1)
-        return color(chars.bottom_left);
-    return color(chars.bottom_left +
-        chars.bottom.repeat(Math.max(0, width - 2)) +
-        chars.bottom_right);
-}
-function render_framed_modal(content, width, style, theme) {
-    const resolved_style = { ...default_modal_style, ...style };
-    const color = (text) => theme.fg(resolved_style.border_color, text);
-    if (resolved_style.border === 'none') {
-        return content.render(width);
-    }
-    if (resolved_style.border === 'line') {
-        const line = color('─'.repeat(Math.max(1, width)));
-        return [line, ...content.render(width), line];
-    }
-    const chars = border_characters[resolved_style.border];
-    const inner_width = Math.max(1, width - 2);
-    const body_lines = content.render(inner_width).map((line) => {
-        const padded = pad_to_width(truncateToWidth(line, inner_width, '', true), inner_width);
-        return `${color(chars.left)}${padded}${color(chars.right)}`;
-    });
-    return [
-        render_border_line(chars, width, color),
-        ...body_lines,
-        render_bottom_border_line(chars, width, color),
-    ];
-}
-export async function show_modal(ctx, options, create_body) {
-    return await ctx.ui.custom((tui, theme, _kb, done) => {
-        const layout = {
-            get_max_body_lines: (body_width) => get_modal_body_line_budget(tui, options, body_width),
-        };
-        const body = create_body({ done }, theme, layout, tui);
-        return {
-            get focused() {
-                return is_focusable(body) ? body.focused : false;
-            },
-            set focused(value) {
-                if (is_focusable(body))
-                    body.focused = value;
-            },
-            render: (width) => {
-                const content = new Box(2, 1);
-                content.addChild(new Text(theme.fg('accent', theme.bold(options.title)), 0, 0));
-                for (const line of normalize_text(options.subtitle)) {
-                    content.addChild(new Text(theme.fg('muted', line), 0, 0));
-                }
-                content.addChild({
-                    render: (body_width) => body
-                        .render(body_width)
-                        .slice(0, layout.get_max_body_lines(body_width)),
-                    invalidate: () => body.invalidate(),
-                });
-                for (const line of normalize_text(options.footer)) {
-                    content.addChild(new Text(theme.fg('dim', line), 0, 0));
-                }
-                return render_framed_modal(content, width, options.style, theme);
-            },
-            invalidate: () => {
-                body.invalidate();
-            },
-            dispose: () => body.dispose?.(),
-            handleInput: (data) => {
-                body.handleInput?.(data);
-                tui.requestRender();
-            },
-        };
-    }, {
-        overlay: true,
-        overlayOptions: {
-            ...default_overlay_options,
-            ...options.overlay_options,
-        },
-    });
-}
-export async function show_picker_modal(ctx, options) {
-    if (options.items.length === 0) {
-        if (options.empty_message)
-            ctx.ui.notify(options.empty_message);
-        return undefined;
-    }
-    return await show_modal(ctx, {
-        title: options.title,
-        subtitle: options.subtitle,
-        footer: options.footer ?? '↑↓ navigate • enter select • esc cancel',
-        overlay_options: options.overlay_options,
-        style: options.style,
-    }, ({ done }, theme, layout) => {
-        const preferred_max_visible = options.max_visible ?? Math.min(options.items.length, 12);
-        const select_list = new SelectList(options.items, fit_visible_items(options.items.length, preferred_max_visible, layout.get_max_body_lines()), make_select_theme(theme), options.layout);
-        if (options.initial_index !== undefined) {
-            select_list.setSelectedIndex(options.initial_index);
-        }
-        select_list.onSelect = (item) => done(item.value);
-        select_list.onCancel = () => done(undefined);
-        return {
-            render: (width) => {
-                set_component_max_visible(select_list, fit_visible_items(options.items.length, preferred_max_visible, layout.get_max_body_lines(width)));
-                return select_list.render(width);
-            },
-            invalidate: () => select_list.invalidate(),
-            handleInput: (data) => select_list.handleInput(data),
-        };
-    });
-}
-export async function show_text_modal(ctx, options) {
-    await show_modal(ctx, {
-        title: options.title,
-        subtitle: options.subtitle,
-        footer: options.footer ?? '↑↓ scroll • esc back',
-        overlay_options: options.overlay_options,
-        style: options.style,
-    }, ({ done }, theme, layout) => {
-        const preferred_max_visible = options.max_visible_lines ?? 18;
-        const body = new TextModalBody(options.text, Math.min(preferred_max_visible, layout.get_max_body_lines()), theme, () => done());
-        return {
-            render: (width) => {
-                body.set_max_visible_lines(Math.min(preferred_max_visible, layout.get_max_body_lines(width)));
-                return body.render(width);
-            },
-            invalidate: () => body.invalidate(),
-            handleInput: (data) => body.handleInput(data),
-        };
-    });
-}
-export async function show_input_modal(ctx, options) {
-    return await show_modal(ctx, {
-        title: options.title,
-        subtitle: options.subtitle,
-        footer: options.footer,
-        overlay_options: {
-            width: '70%',
-            minWidth: 50,
-            maxHeight: '60%',
-            ...options.overlay_options,
-        },
-        style: options.style,
-    }, ({ done }, theme) => new InputModalBody(options, theme, (value) => done(value), () => done(undefined)));
-}
-export async function show_confirm_modal(ctx, options) {
-    const selected = await show_picker_modal(ctx, {
-        title: options.title,
-        subtitle: options.message,
-        footer: options.footer ?? 'enter selects • esc cancels',
-        overlay_options: {
-            width: '70%',
-            minWidth: 50,
-            maxHeight: '60%',
-            ...options.overlay_options,
-        },
-        style: options.style,
-        items: [
-            {
-                value: 'confirm',
-                label: options.confirm_label ?? 'Confirm',
-                description: 'Proceed with this action',
-            },
-            {
-                value: 'cancel',
-                label: options.cancel_label ?? 'Cancel',
-                description: 'Go back without changing anything',
-            },
-        ],
-    });
-    return selected === 'confirm';
-}
-export async function show_settings_modal(ctx, options) {
-    await show_modal(ctx, {
-        title: options.title,
-        subtitle: options.subtitle,
-        footer: options.footer ??
-            'search filters • enter toggles • esc close',
-        overlay_options: options.overlay_options,
-        style: options.style,
-    }, ({ done }, theme, layout) => {
-        const preferred_max_visible = options.max_visible ??
-            Math.min(Math.max(options.items.length + 4, 8), 16);
-        const get_max_visible = (width) => fit_visible_items(options.items.length, preferred_max_visible, layout.get_max_body_lines(width) -
-            (options.enable_search ? 2 : 0) -
-            2 -
-            2 -
-            (options.metadata ? 3 : 0));
-        const settings_theme = make_settings_theme(theme);
-        const handle_change = (id, new_value) => {
-            if (options.on_change(id, new_value))
-                done();
-        };
-        const handle_cancel = () => {
-            options.on_cancel?.();
-            done();
-        };
-        const list = options.detail
-            ? new DetailedSettingsList(options.items, get_max_visible(), settings_theme, handle_change, handle_cancel, {
-                enable_search: options.enable_search,
-                detail: options.detail,
-            })
-            : new SettingsList(options.items, get_max_visible(), settings_theme, handle_change, handle_cancel, { enableSearch: options.enable_search });
-        return {
-            render: (width) => {
-                const max_visible = get_max_visible(width);
-                if (list instanceof DetailedSettingsList) {
-                    list.set_max_visible(max_visible);
-                }
-                else {
-                    set_component_max_visible(list, max_visible);
-                }
-                const lines = list.render(width);
-                const selected_item = list instanceof DetailedSettingsList
-                    ? list.get_selected_item()
-                    : get_selected_setting(list);
-                const metadata_lines = normalize_metadata(options.metadata, selected_item);
-                if (metadata_lines.length === 0)
-                    return lines;
-                return [
-                    ...lines,
-                    '',
-                    theme.fg('accent', theme.bold('Details')),
-                    ...metadata_lines.map((line) => theme.fg('muted', line)),
-                ];
-            },
-            invalidate: () => list.invalidate(),
-            handleInput: (data) => list.handleInput(data),
-        };
-    });
-}
+export { show_confirm_modal, show_input_modal, show_modal, show_picker_modal, show_settings_modal, show_text_modal, } from './modal/show.js';
 //# sourceMappingURL=index.js.map