@svelterm/core 0.1.0 → 0.23.0

package/dist/src/input/checkable.d.ts

@@ -0,0 +1,8 @@
+import { TermNode } from '../renderer/node.js';
+export declare function isCheckableInput(node: TermNode): boolean;
+/**
+ * Toggle a checkbox, or select a radio (unchecking its name-group
+ * siblings). Fires change/input events with the new checked state, as
+ * Svelte's bind:checked listens for them.
+ */
+export declare function toggleCheckable(node: TermNode): void;

package/dist/src/input/checkable.js

@@ -0,0 +1,66 @@
+import { hasBooleanAttribute } from '../renderer/node.js';
+import { dispatchEvent } from './dispatch.js';
+export function isCheckableInput(node) {
+    if (node.tag !== 'input')
+        return false;
+    const type = node.attributes.get('type');
+    return type === 'checkbox' || type === 'radio';
+}
+/**
+ * Toggle a checkbox, or select a radio (unchecking its name-group
+ * siblings). Fires change/input events with the new checked state, as
+ * Svelte's bind:checked listens for them.
+ */
+export function toggleCheckable(node) {
+    if (node.attributes.get('type') === 'radio') {
+        selectRadio(node);
+        return;
+    }
+    setChecked(node, !hasBooleanAttribute(node, 'checked'));
+}
+function selectRadio(node) {
+    if (hasBooleanAttribute(node, 'checked'))
+        return; // radios don't untoggle
+    const name = node.attributes.get('name');
+    if (name) {
+        uncheckGroupSiblings(treeRoot(node), node, name);
+    }
+    setChecked(node, true);
+}
+function uncheckGroupSiblings(scope, selected, name) {
+    if (scope !== selected && isCheckableInput(scope)
+        && scope.attributes.get('type') === 'radio'
+        && scope.attributes.get('name') === name
+        && hasBooleanAttribute(scope, 'checked')) {
+        clearChecked(scope);
+    }
+    for (const child of scope.children)
+        uncheckGroupSiblings(child, selected, name);
+}
+function treeRoot(node) {
+    let root = node;
+    while (root.parent)
+        root = root.parent;
+    return root;
+}
+function setChecked(node, checked) {
+    if (checked) {
+        if (node.ctx)
+            node.ctx.onSetAttribute(node, 'checked', 'true');
+        else
+            node.attributes.set('checked', 'true');
+    }
+    else {
+        clearChecked(node);
+    }
+    // Browsers expose the control's value on change (radio groups read it)
+    const detail = { checked, value: node.attributes.get('value') ?? '' };
+    dispatchEvent(node, 'change', detail);
+    dispatchEvent(node, 'input', detail);
+}
+function clearChecked(node) {
+    if (node.ctx)
+        node.ctx.onRemoveAttribute(node, 'checked');
+    else
+        node.attributes.delete('checked');
+}

package/dist/src/input/details.d.ts

@@ -0,0 +1,6 @@
+import { TermNode } from '../renderer/node.js';
+/**
+ * Toggle the nearest <details> from itself or its <summary>, firing a
+ * toggle event with the new state, as in browsers.
+ */
+export declare function toggleDetails(node: TermNode): void;

package/dist/src/input/details.js

@@ -0,0 +1,34 @@
+import { hasBooleanAttribute } from '../renderer/node.js';
+import { dispatchEvent } from './dispatch.js';
+/**
+ * Toggle the nearest <details> from itself or its <summary>, firing a
+ * toggle event with the new state, as in browsers.
+ */
+export function toggleDetails(node) {
+    const details = nearestDetails(node);
+    if (!details)
+        return;
+    const open = !hasBooleanAttribute(details, 'open');
+    if (open) {
+        if (details.ctx)
+            details.ctx.onSetAttribute(details, 'open', 'true');
+        else
+            details.attributes.set('open', 'true');
+    }
+    else {
+        if (details.ctx)
+            details.ctx.onRemoveAttribute(details, 'open');
+        else
+            details.attributes.delete('open');
+    }
+    dispatchEvent(details, 'toggle', { open });
+}
+function nearestDetails(node) {
+    let current = node;
+    while (current) {
+        if (current.tag === 'details')
+            return current;
+        current = current.parent;
+    }
+    return null;
+}

package/dist/src/input/focus.d.ts

@@ -2,6 +2,8 @@ import { TermNode } from '../renderer/node.js';
 export declare class FocusManager {
     private elements;
     private focusIndex;
+    /** When set, focus cycling is trapped inside this subtree (modals). */
+    private scope;
     onSetAttribute?: (node: TermNode, key: string, value: string) => void;
     onRemoveAttribute?: (node: TermNode, key: string) => void;
     onFocusChange?: (focused: TermNode | null, previous: TermNode | null) => void;
@@ -9,10 +11,14 @@ export declare class FocusManager {
     get count(): number;
     register(node: TermNode): void;
     unregister(node: TermNode): void;
+    /** Trap focus cycling inside `node`'s subtree; null lifts the trap. */
+    setScope(node: TermNode | null): void;
     focusNext(): void;
     focusPrevious(): void;
     focusByNode(node: TermNode): void;
     clearFocus(): void;
+    /** Step through the ring from `start` until an enabled element is found. */
+    private focusFirstEnabledFrom;
     private setFocusIndex;
     private clearFocusAttribute;
 }

package/dist/src/input/focus.js

@@ -1,6 +1,10 @@
+import { hasBooleanAttribute } from '../renderer/node.js';
+import { withinSubtree } from './modal.js';
 export class FocusManager {
     elements = [];
     focusIndex = -1;
+    /** When set, focus cycling is trapped inside this subtree (modals). */
+    scope = null;
     onSetAttribute;
     onRemoveAttribute;
     onFocusChange;
@@ -31,20 +35,20 @@ export class FocusManager {
             this.focusIndex--;
         }
     }
+    /** Trap focus cycling inside `node`'s subtree; null lifts the trap. */
+    setScope(node) {
+        this.scope = node;
+    }
     focusNext() {
-        if (this.elements.length === 0)
-            return;
-        this.setFocusIndex((this.focusIndex + 1) % this.elements.length);
+        this.focusFirstEnabledFrom(this.focusIndex, +1);
     }
     focusPrevious() {
-        if (this.elements.length === 0)
-            return;
-        const next = this.focusIndex <= 0
-            ? this.elements.length - 1
-            : this.focusIndex - 1;
-        this.setFocusIndex(next);
+        const start = this.focusIndex === -1 ? this.elements.length : this.focusIndex;
+        this.focusFirstEnabledFrom(start, -1);
     }
     focusByNode(node) {
+        if (hasBooleanAttribute(node, 'disabled'))
+            return;
         const idx = this.elements.indexOf(node);
         if (idx !== -1)
             this.setFocusIndex(idx);
@@ -54,6 +58,20 @@ export class FocusManager {
             this.clearFocusAttribute(this.focused);
         this.focusIndex = -1;
     }
+    /** Step through the ring from `start` until an enabled element is found. */
+    focusFirstEnabledFrom(start, step) {
+        const count = this.elements.length;
+        for (let offset = 1; offset <= count; offset++) {
+            const index = ((start + step * offset) % count + count) % count;
+            const element = this.elements[index];
+            if (hasBooleanAttribute(element, 'disabled'))
+                continue;
+            if (this.scope && !withinSubtree(element, this.scope))
+                continue;
+            this.setFocusIndex(index);
+            return;
+        }
+    }
     setFocusIndex(index) {
         const prev = this.focused;
         if (prev)

package/dist/src/input/keyboard.d.ts

@@ -5,5 +5,5 @@ export interface KeyEvent {
     meta: boolean;
 }
 /** Check if data contains a bracketed paste sequence. Returns the pasted text or null. */
-export declare function parsePaste(data: Buffer): string | null;
-export declare function parseKeyEvent(data: Buffer): KeyEvent | null;
+export declare function parsePaste(data: Buffer | Uint8Array): string | null;
+export declare function parseKeyEvent(data: Buffer | Uint8Array): KeyEvent | null;

package/dist/src/input/keyboard.js

@@ -1,8 +1,13 @@
+function decodeBytes(data) {
+    if (typeof Buffer !== 'undefined' && Buffer.isBuffer(data))
+        return data.toString();
+    return new TextDecoder().decode(data);
+}
 const PASTE_START = '\x1b[200~';
 const PASTE_END = '\x1b[201~';
 /** Check if data contains a bracketed paste sequence. Returns the pasted text or null. */
 export function parsePaste(data) {
-    const str = data.toString();
+    const str = decodeBytes(data);
     if (str.startsWith(PASTE_START)) {
         const endIdx = str.indexOf(PASTE_END);
         if (endIdx !== -1) {
@@ -51,10 +56,31 @@ function parseEscapeSequence(data) {
     }
     return { key: 'Escape', ctrl: false, shift: false, meta: false };
 }
+/** Codepoints the kitty protocol uses for functional keys. */
+const KITTY_FUNCTIONAL = {
+    9: 'Tab', 13: 'Enter', 27: 'Escape', 127: 'Backspace',
+    57352: 'Insert', 57349: 'Delete',
+    57354: 'PageUp', 57355: 'PageDown', 57356: 'Home', 57357: 'End',
+    57358: 'CapsLock',
+};
+const KITTY_KEY_RE = /^\x1b\[(\d+)(?:;(\d+)(?::\d+)?)?u/;
+/** Parse a kitty-protocol CSI u key report, or null if not one. */
+function parseKittyKey(str) {
+    const match = KITTY_KEY_RE.exec(str);
+    if (!match)
+        return null;
+    const codepoint = parseInt(match[1], 10);
+    const mods = match[2] ? parseModifier(parseInt(match[2], 10)) : { ctrl: false, shift: false, meta: false };
+    const key = KITTY_FUNCTIONAL[codepoint] ?? String.fromCodePoint(codepoint);
+    return { key, ...mods };
+}
 function parseCSI(data) {
     const base = { ctrl: false, shift: false, meta: false };
     if (data.length < 3)
         return { key: 'Escape', ...base };
+    const kitty = parseKittyKey(decodeBytes(data));
+    if (kitty)
+        return kitty;
     const third = data[2];
     // Arrow keys: ESC [ A/B/C/D
     switch (third) {
@@ -91,10 +117,11 @@ const CSI_KEYS = {
     0x48: 'Home', 0x46: 'End',
 };
 function parseModifier(mod) {
-    // CSI modifier values: 1=none, 2=Shift, 3=Alt, 4=Shift+Alt, 5=Ctrl, 6=Shift+Ctrl, 7=Alt+Ctrl, 8=Shift+Alt+Ctrl
+    // CSI modifier values are bitmask+1: 2=Shift, 3=Alt, 5=Ctrl, 6=Shift+Ctrl…
+    const mask = mod - 1;
     return {
-        shift: (mod & 1) !== 0,
-        meta: (mod & 2) !== 0,
-        ctrl: (mod & 4) !== 0,
+        shift: (mask & 1) !== 0,
+        meta: (mask & 2) !== 0,
+        ctrl: (mask & 4) !== 0,
     };
 }

package/dist/src/input/label.d.ts

@@ -0,0 +1,8 @@
+import { TermNode } from '../renderer/node.js';
+/**
+ * The form control a click on `node` should activate through its
+ * <label>, per browser behaviour: walk up to the nearest label, then
+ * resolve its `for="id"` reference or first labellable descendant.
+ * Returns null when no label or no control is involved.
+ */
+export declare function labelledControl(node: TermNode): TermNode | null;

package/dist/src/input/label.js

@@ -0,0 +1,53 @@
+const LABELLABLE = new Set(['input', 'select', 'textarea', 'button']);
+/**
+ * The form control a click on `node` should activate through its
+ * <label>, per browser behaviour: walk up to the nearest label, then
+ * resolve its `for="id"` reference or first labellable descendant.
+ * Returns null when no label or no control is involved.
+ */
+export function labelledControl(node) {
+    const label = nearestLabel(node);
+    if (!label)
+        return null;
+    const forId = label.attributes.get('for');
+    if (forId)
+        return findById(treeRoot(label), forId);
+    return findControl(label);
+}
+function nearestLabel(node) {
+    let current = node;
+    while (current) {
+        if (current.tag === 'label')
+            return current;
+        current = current.parent;
+    }
+    return null;
+}
+function findControl(scope) {
+    for (const child of scope.children) {
+        if (child.nodeType !== 'element')
+            continue;
+        if (LABELLABLE.has(child.tag ?? ''))
+            return child;
+        const nested = findControl(child);
+        if (nested)
+            return nested;
+    }
+    return null;
+}
+function findById(scope, id) {
+    if (scope.nodeType === 'element' && scope.attributes.get('id') === id)
+        return scope;
+    for (const child of scope.children) {
+        const found = findById(child, id);
+        if (found)
+            return found;
+    }
+    return null;
+}
+function treeRoot(node) {
+    let root = node;
+    while (root.parent)
+        root = root.parent;
+    return root;
+}

package/dist/src/input/modal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Modal key routing: an open <dialog> captures keys — Tab cycling traps
+ * inside it, Escape closes it — matching browser modal behaviour.
+ */
+import { TermNode } from '../renderer/node.js';
+/** The topmost open <dialog> (last in tree order), or null. */
+export declare function activeModal(root: TermNode): TermNode | null;
+/** Whether `node` is `ancestor` or inside it. */
+export declare function withinSubtree(node: TermNode, ancestor: TermNode): boolean;

package/dist/src/input/modal.js

@@ -0,0 +1,28 @@
+/**
+ * Modal key routing: an open <dialog> captures keys — Tab cycling traps
+ * inside it, Escape closes it — matching browser modal behaviour.
+ */
+/** The topmost open <dialog> (last in tree order), or null. */
+export function activeModal(root) {
+    let found = null;
+    const walk = (node) => {
+        if (node.nodeType === 'element' && node.tag === 'dialog'
+            && node.attributes.has('open')) {
+            found = node;
+        }
+        for (const child of node.children)
+            walk(child);
+    };
+    walk(root);
+    return found;
+}
+/** Whether `node` is `ancestor` or inside it. */
+export function withinSubtree(node, ancestor) {
+    let current = node;
+    while (current) {
+        if (current === ancestor)
+            return true;
+        current = current.parent;
+    }
+    return false;
+}

package/dist/src/input/mouse.d.ts

@@ -1,7 +1,7 @@
 export interface MouseEvent {
-    button: 'left' | 'right' | 'middle' | 'scrollUp' | 'scrollDown' | 'none';
+    button: 'left' | 'right' | 'middle' | 'scrollUp' | 'scrollDown' | 'scrollLeft' | 'scrollRight' | 'none';
     type: 'press' | 'release' | 'motion' | 'scroll';
     col: number;
     row: number;
 }
-export declare function parseMouseEvent(data: Buffer): MouseEvent | null;
+export declare function parseMouseEvent(data: Buffer | Uint8Array): MouseEvent | null;

package/dist/src/input/mouse.js

@@ -1,6 +1,8 @@
 const SGR_MOUSE_RE = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])/;
 export function parseMouseEvent(data) {
-    const str = data.toString();
+    const str = typeof Buffer !== 'undefined' && Buffer.isBuffer(data)
+        ? data.toString()
+        : new TextDecoder().decode(data);
     const match = SGR_MOUSE_RE.exec(str);
     if (!match)
         return null;
@@ -15,7 +17,18 @@ export function parseMouseEvent(data) {
     }
     // Scroll: codes 64-67
     if (base >= 64 && base <= 67) {
-        return { button: base === 64 ? 'scrollUp' : 'scrollDown', type: 'scroll', col, row };
+        // Shift modifier (bit 2) on vertical scroll = horizontal scroll
+        const hasShift = (code & 4) !== 0;
+        let button;
+        if (base === 64)
+            button = hasShift ? 'scrollLeft' : 'scrollUp';
+        else if (base === 65)
+            button = hasShift ? 'scrollRight' : 'scrollDown';
+        else if (base === 66)
+            button = 'scrollLeft';
+        else
+            button = 'scrollRight';
+        return { button, type: 'scroll', col, row };
     }
     // Motion: bit 5 (32)
     if (base & 32) {

package/dist/src/input/select.d.ts

@@ -0,0 +1,12 @@
+import { TermNode } from '../renderer/node.js';
+/** The select's options, in document order (through optgroups). */
+export declare function selectOptions(select: TermNode): TermNode[];
+/** Index of the selected option — the first with a selected attribute, else 0. */
+export declare function selectedIndex(select: TermNode): number;
+/** The selected option's value attribute, falling back to its text. */
+export declare function selectValue(select: TermNode): string;
+/**
+ * Move the selection by delta with wraparound — the popup-less cycling
+ * interaction — updating selected attributes and firing change/input.
+ */
+export declare function cycleSelect(select: TermNode, delta: 1 | -1): void;

package/dist/src/input/select.js

@@ -0,0 +1,63 @@
+import { hasBooleanAttribute } from '../renderer/node.js';
+import { dispatchEvent } from './dispatch.js';
+/** The select's options, in document order (through optgroups). */
+export function selectOptions(select) {
+    const options = [];
+    collectOptions(select, options);
+    return options;
+}
+/** Index of the selected option — the first with a selected attribute, else 0. */
+export function selectedIndex(select) {
+    const options = selectOptions(select);
+    const index = options.findIndex(option => hasBooleanAttribute(option, 'selected'));
+    return index === -1 ? 0 : index;
+}
+/** The selected option's value attribute, falling back to its text. */
+export function selectValue(select) {
+    const option = selectOptions(select)[selectedIndex(select)];
+    if (!option)
+        return '';
+    return option.attributes.get('value') ?? option.textContent.trim();
+}
+/**
+ * Move the selection by delta with wraparound — the popup-less cycling
+ * interaction — updating selected attributes and firing change/input.
+ */
+export function cycleSelect(select, delta) {
+    const options = selectOptions(select);
+    if (options.length === 0)
+        return;
+    const current = selectedIndex(select);
+    const next = (current + delta + options.length) % options.length;
+    if (next === current)
+        return;
+    setSelected(options[current], false);
+    setSelected(options[next], true);
+    const value = selectValue(select);
+    dispatchEvent(select, 'change', { value });
+    dispatchEvent(select, 'input', { value });
+}
+function collectOptions(node, out) {
+    for (const child of node.children) {
+        if (child.nodeType !== 'element')
+            continue;
+        if (child.tag === 'option')
+            out.push(child);
+        else if (child.tag === 'optgroup')
+            collectOptions(child, out);
+    }
+}
+function setSelected(option, selected) {
+    if (selected) {
+        if (option.ctx)
+            option.ctx.onSetAttribute(option, 'selected', 'true');
+        else
+            option.attributes.set('selected', 'true');
+    }
+    else {
+        if (option.ctx)
+            option.ctx.onRemoveAttribute(option, 'selected');
+        else
+            option.attributes.delete('selected');
+    }
+}

package/dist/src/input/selection.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Terminal-style text selection over the painted cell grid. Mouse
+ * reporting means the terminal's native selection is off, so svelterm
+ * provides its own: drag selects a row-major range, double-click a word,
+ * triple-click a line. Selected cells paint inverted; releasing returns
+ * the selected text for the clipboard.
+ */
+import type { CellBuffer } from '../render/buffer.js';
+export interface CellPos {
+    col: number;
+    row: number;
+}
+export interface SelectionRange {
+    start: CellPos;
+    end: CellPos;
+}
+export declare class SelectionController {
+    private getBuffer;
+    private now;
+    private anchor;
+    private point;
+    private dragging;
+    private pressed;
+    private lastClick;
+    constructor(getBuffer: () => CellBuffer | null, now?: () => number);
+    /** The selected range in row-major order, or null when nothing is selected. */
+    range(): SelectionRange | null;
+    /**
+     * Left button pressed. Counts multi-clicks: the second quick click on
+     * the same cell selects the word, the third the line.
+     */
+    onPress(col: number, row: number): void;
+    /** Pointer moved with the left button held: extend the selection. */
+    onMotion(col: number, row: number): boolean;
+    /**
+     * Left button released. Returns the selected text (for the clipboard)
+     * when a selection exists; the highlight stays until the next press.
+     */
+    onRelease(): string | null;
+    /** Drop the selection; returns whether anything was cleared. */
+    clear(): boolean;
+    private selectWord;
+    private selectLine;
+    private rowText;
+    private extractText;
+}
+/** Invert the cells covered by the selection so it reads as highlighted. */
+export declare function applySelectionOverlay(buffer: CellBuffer, range: SelectionRange | null): void;