@rezi-ui/core 0.1.0-alpha.6 → 0.1.0-alpha.63

package/dist/runtime/inputEditor.js

@@ -7,7 +7,10 @@
  *
  * Editing operations:
  *   - Left/Right: move cursor by grapheme cluster
+ *   - Ctrl+Left/Right: move cursor by word boundary
  *   - Home/End: move cursor to start/end
+ *   - Shift + movement: extend selection
+ *   - Ctrl+A: select all
  *   - Backspace: delete grapheme cluster before cursor
  *   - Delete: delete grapheme cluster after cursor
  *   - Text event: insert Unicode scalar at cursor
@@ -20,10 +23,16 @@ import { GCB, gcbClass, isExtendedPictographic } from "../layout/unicode/props.j
 /* See: docs/protocol/abi.md */
 const ZR_KEY_LEFT = 22;
 const ZR_KEY_RIGHT = 23;
+const ZR_KEY_UP = 20;
+const ZR_KEY_DOWN = 21;
 const ZR_KEY_HOME = 12;
 const ZR_KEY_END = 13;
+const ZR_KEY_ENTER = 2;
+const ZR_KEY_A = 65;
 const ZR_KEY_BACKSPACE = 4;
 const ZR_KEY_DELETE = 11;
+const ZR_MOD_SHIFT = 1 << 0;
+const ZR_MOD_CTRL = 1 << 1;
 function decodeUtf16One(text, off) {
     const a = text.charCodeAt(off);
     if (!Number.isFinite(a)) {
@@ -156,11 +165,7 @@ function nextBoundary(value, cursor) {
     }
     return value.length;
 }
-/**
- * Normalize cursor position to a valid grapheme cluster boundary.
- * Clamps to [0, value.length] and snaps to nearest cluster boundary.
- */
-export function normalizeInputCursor(value, cursor) {
+function clampInputCursor(value, cursor) {
     let c = cursor;
     if (!Number.isFinite(c))
         c = 0;
@@ -168,6 +173,14 @@ export function normalizeInputCursor(value, cursor) {
         c = 0;
     if (c > value.length)
         c = value.length;
+    return c;
+}
+/**
+ * Normalize cursor position to a valid grapheme cluster boundary.
+ * Clamps to [0, value.length] and snaps to the previous boundary.
+ */
+export function normalizeInputCursor(value, cursor) {
+    const c = clampInputCursor(value, cursor);
     if (c === 0 || c === value.length)
         return c;
     let off = 0;
@@ -183,6 +196,41 @@ export function normalizeInputCursor(value, cursor) {
     }
     return value.length;
 }
+function normalizeInputCursorForward(value, cursor) {
+    const c = clampInputCursor(value, cursor);
+    if (c === 0 || c === value.length)
+        return c;
+    let off = 0;
+    while (off < value.length) {
+        const end = nextClusterEnd(value, off);
+        if (end >= c)
+            return end;
+        off = end;
+    }
+    return value.length;
+}
+export function normalizeInputSelection(value, selectionStart, selectionEnd) {
+    if (selectionStart === null || selectionStart === undefined)
+        return null;
+    if (selectionEnd === null || selectionEnd === undefined)
+        return null;
+    const start = normalizeInputCursor(value, selectionStart);
+    const end = normalizeInputCursor(value, selectionEnd);
+    if (start === end)
+        return null;
+    return Object.freeze({ start, end });
+}
+export function getInputSelectionText(value, selectionStart, selectionEnd) {
+    const selection = normalizeInputSelection(value, selectionStart, selectionEnd);
+    if (!selection)
+        return null;
+    const [start, end] = selection.start <= selection.end
+        ? [selection.start, selection.end]
+        : [selection.end, selection.start];
+    if (start >= end)
+        return null;
+    return value.slice(start, end);
+}
 function asUnicodeScalarString(codepoint) {
     if (!Number.isFinite(codepoint))
         return "\ufffd";
@@ -196,116 +244,492 @@ function asUnicodeScalarString(codepoint) {
 function removeCrLf(s) {
     if (s.length === 0)
         return s;
+    let firstBreak = -1;
+    for (let i = 0; i < s.length; i++) {
+        const ch = s.charCodeAt(i);
+        if (ch === 0x0a || ch === 0x0d) {
+            firstBreak = i;
+            break;
+        }
+    }
+    if (firstBreak < 0)
+        return s;
     // Single-pass removal for determinism and to avoid regex engine variability.
     const out = [];
-    let changed = false;
+    for (let i = 0; i < firstBreak; i++)
+        out.push(s[i] ?? "");
+    for (let i = firstBreak; i < s.length; i++) {
+        const ch = s.charCodeAt(i);
+        if (ch === 0x0a || ch === 0x0d)
+            continue;
+        out.push(s[i] ?? "");
+    }
+    return out.join("");
+}
+function normalizeLineBreaks(s) {
+    if (s.length === 0)
+        return s;
+    let firstCr = -1;
     for (let i = 0; i < s.length; i++) {
+        if (s.charCodeAt(i) === 0x0d) {
+            firstCr = i;
+            break;
+        }
+    }
+    if (firstCr < 0)
+        return s;
+    const out = [];
+    for (let i = 0; i < firstCr; i++)
+        out.push(s[i] ?? "");
+    for (let i = firstCr; i < s.length; i++) {
         const ch = s.charCodeAt(i);
-        if (ch === 0x0a || ch === 0x0d) {
-            changed = true;
+        if (ch === 0x0d) {
+            out.push("\n");
+            if (i + 1 < s.length && s.charCodeAt(i + 1) === 0x0a)
+                i++;
             continue;
         }
         out.push(s[i] ?? "");
     }
-    return changed ? out.join("") : s;
+    return out.join("");
+}
+const WORD_CLUSTER_RE = /[\p{L}\p{N}_]/u;
+const SPACE_CLUSTER_RE = /\s/u;
+function classifyCluster(cluster) {
+    if (cluster.length === 0)
+        return "other";
+    const d = decodeUtf16One(cluster, 0);
+    const first = String.fromCodePoint(d.scalar);
+    if (WORD_CLUSTER_RE.test(first))
+        return "word";
+    if (SPACE_CLUSTER_RE.test(first))
+        return "space";
+    return "other";
+}
+function nextWordBoundary(value, cursor) {
+    if (cursor >= value.length)
+        return value.length;
+    let off = cursor;
+    let end = nextClusterEnd(value, off);
+    let cls = classifyCluster(value.slice(off, end));
+    if (cls === "word") {
+        off = end;
+        while (off < value.length) {
+            end = nextClusterEnd(value, off);
+            cls = classifyCluster(value.slice(off, end));
+            if (cls !== "word")
+                break;
+            off = end;
+        }
+        return off;
+    }
+    // Skip separators to the next word start.
+    while (off < value.length) {
+        off = end;
+        if (off >= value.length)
+            return value.length;
+        end = nextClusterEnd(value, off);
+        cls = classifyCluster(value.slice(off, end));
+        if (cls === "word")
+            break;
+    }
+    // Then consume the next word.
+    while (off < value.length) {
+        end = nextClusterEnd(value, off);
+        cls = classifyCluster(value.slice(off, end));
+        if (cls !== "word")
+            break;
+        off = end;
+    }
+    return off;
+}
+function prevWordBoundary(value, cursor) {
+    if (cursor <= 0)
+        return 0;
+    const clamped = clampInputCursor(value, cursor);
+    // One pass over clusters up to the cursor, then constant-time resolution.
+    let off = 0;
+    let prevClass = null;
+    let currentWordRunStart = 0;
+    let lastCompletedWordRunStart = -1;
+    while (off < value.length) {
+        const end = nextClusterEnd(value, off);
+        if (end > clamped)
+            break;
+        const cls = classifyCluster(value.slice(off, end));
+        if (cls === "word") {
+            if (prevClass !== "word")
+                currentWordRunStart = off;
+        }
+        else if (prevClass === "word") {
+            lastCompletedWordRunStart = currentWordRunStart;
+        }
+        prevClass = cls;
+        off = end;
+        if (off === clamped)
+            break;
+    }
+    if (prevClass === "word")
+        return currentWordRunStart;
+    return lastCompletedWordRunStart >= 0 ? lastCompletedWordRunStart : 0;
+}
+function buildInputLineRanges(value) {
+    const starts = [];
+    const ends = [];
+    let lineStart = 0;
+    for (let i = 0; i < value.length; i++) {
+        if (value.charCodeAt(i) === 0x0a) {
+            starts.push(lineStart);
+            ends.push(i);
+            lineStart = i + 1;
+        }
+    }
+    starts.push(lineStart);
+    ends.push(value.length);
+    return Object.freeze({ starts: Object.freeze(starts), ends: Object.freeze(ends) });
+}
+function findLineIndexAtCursor(lines, cursor) {
+    const c = Math.max(0, cursor);
+    for (let i = 0; i < lines.ends.length; i++) {
+        const end = lines.ends[i] ?? 0;
+        if (c <= end)
+            return i;
+    }
+    return Math.max(0, lines.ends.length - 1);
+}
+function moveCursorToLineEdge(value, cursor, edge) {
+    const lines = buildInputLineRanges(value);
+    const line = findLineIndexAtCursor(lines, cursor);
+    const start = lines.starts[line] ?? 0;
+    const end = lines.ends[line] ?? value.length;
+    return normalizeInputCursor(value, edge === "home" ? start : end);
+}
+function moveCursorVertical(value, cursor, dir) {
+    const lines = buildInputLineRanges(value);
+    const line = findLineIndexAtCursor(lines, cursor);
+    const targetLine = Math.max(0, Math.min(lines.starts.length - 1, line + dir));
+    if (targetLine === line)
+        return normalizeInputCursor(value, cursor);
+    const lineStart = lines.starts[line] ?? 0;
+    const lineEnd = lines.ends[line] ?? value.length;
+    const targetStart = lines.starts[targetLine] ?? 0;
+    const targetEnd = lines.ends[targetLine] ?? value.length;
+    const column = Math.max(0, Math.min(Math.max(0, lineEnd - lineStart), cursor - lineStart));
+    return normalizeInputCursor(value, targetStart + Math.min(column, targetEnd - targetStart));
+}
+function normalizeSelectionRange(selection) {
+    return selection.start <= selection.end
+        ? [selection.start, selection.end]
+        : [selection.end, selection.start];
+}
+function resolveSelectionAnchor(selection, cursor) {
+    if (cursor === selection.start)
+        return selection.end;
+    if (cursor === selection.end)
+        return selection.start;
+    return selection.start;
 }
 const UTF8_DECODER = new TextDecoder("utf-8", { fatal: false });
+/** Maximum undo entries for Input/Textarea local history. */
+export const INPUT_UNDO_STACK_CAP = 50;
+/** Edit grouping window for rapid typing (ms). */
+export const INPUT_UNDO_GROUP_WINDOW_MS = 300;
+export class InputUndoStack {
+    undo = [];
+    redo = [];
+    push(before, after, timestamp, groupable = false) {
+        if (before.value === after.value &&
+            before.cursor === after.cursor &&
+            before.selectionStart === after.selectionStart &&
+            before.selectionEnd === after.selectionEnd) {
+            return;
+        }
+        const t = Number.isFinite(timestamp) ? Math.trunc(timestamp) : 0;
+        const last = this.undo[this.undo.length - 1];
+        if (groupable &&
+            last &&
+            last.groupable &&
+            t - last.timestamp <= INPUT_UNDO_GROUP_WINDOW_MS &&
+            t >= last.timestamp) {
+            this.undo[this.undo.length - 1] = Object.freeze({
+                before: last.before,
+                after,
+                timestamp: t,
+                groupable: true,
+            });
+            this.redo.length = 0;
+            return;
+        }
+        this.undo.push(Object.freeze({
+            before,
+            after,
+            timestamp: t,
+            groupable,
+        }));
+        if (this.undo.length > INPUT_UNDO_STACK_CAP)
+            this.undo.shift();
+        this.redo.length = 0;
+    }
+    undoSnapshot() {
+        const entry = this.undo.pop();
+        if (!entry)
+            return null;
+        this.redo.push(entry);
+        return entry.before;
+    }
+    redoSnapshot() {
+        const entry = this.redo.pop();
+        if (!entry)
+            return null;
+        this.undo.push(entry);
+        return entry.after;
+    }
+    canUndo() {
+        return this.undo.length > 0;
+    }
+    canRedo() {
+        return this.redo.length > 0;
+    }
+    clear() {
+        this.undo.length = 0;
+        this.redo.length = 0;
+    }
+}
 /**
  * Apply a key/text/paste event to an input widget.
  *
  * @param event - Engine event to apply
- * @param ctx - Current input state (id, value, cursor)
- * @returns Edit result with new value/cursor and optional action, or null if event not applicable
+ * @param ctx - Current input state (id, value, cursor, optional selection)
+ * @returns Edit result with new value/cursor/selection and optional action, or null if event not applicable
  */
 export function applyInputEditEvent(event, ctx) {
     const id = ctx.id;
     const value = ctx.value;
-    const cursor0 = normalizeInputCursor(value, ctx.cursor);
+    const multiline = ctx.multiline === true;
+    const selection0 = normalizeInputSelection(value, ctx.selectionStart, ctx.selectionEnd);
+    const cursorBase = normalizeInputCursor(value, ctx.cursor);
+    const cursor0 = cursorBase;
+    const [selectionMin, selectionMax] = selection0
+        ? normalizeSelectionRange(selection0)
+        : [cursor0, cursor0];
+    function result(nextValue, nextCursor, nextSelectionStart, nextSelectionEnd) {
+        if (nextValue !== value) {
+            const action = Object.freeze({
+                id,
+                action: "input",
+                value: nextValue,
+                cursor: nextCursor,
+            });
+            return Object.freeze({ nextValue, nextCursor, nextSelectionStart, nextSelectionEnd, action });
+        }
+        return Object.freeze({ nextValue, nextCursor, nextSelectionStart, nextSelectionEnd });
+    }
     if (event.kind === "key") {
         if (event.action !== "down" && event.action !== "repeat")
             return null;
-        if (event.key === ZR_KEY_LEFT) {
-            const nextCursor = prevBoundary(value, cursor0);
-            return Object.freeze({ nextValue: value, nextCursor });
-        }
-        if (event.key === ZR_KEY_RIGHT) {
-            const nextCursor = nextBoundary(value, cursor0);
-            return Object.freeze({ nextValue: value, nextCursor });
-        }
-        if (event.key === ZR_KEY_HOME) {
-            return Object.freeze({ nextValue: value, nextCursor: 0 });
+        const hasShift = (event.mods & ZR_MOD_SHIFT) !== 0;
+        const hasCtrl = (event.mods & ZR_MOD_CTRL) !== 0;
+        if (event.key === ZR_KEY_A && hasCtrl && !hasShift) {
+            if (value.length === 0)
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: 0,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            return Object.freeze({
+                nextValue: value,
+                nextCursor: value.length,
+                nextSelectionStart: 0,
+                nextSelectionEnd: value.length,
+            });
         }
-        if (event.key === ZR_KEY_END) {
-            return Object.freeze({ nextValue: value, nextCursor: value.length });
+        if (event.key === ZR_KEY_LEFT ||
+            event.key === ZR_KEY_RIGHT ||
+            event.key === ZR_KEY_HOME ||
+            event.key === ZR_KEY_END ||
+            event.key === ZR_KEY_UP ||
+            event.key === ZR_KEY_DOWN) {
+            if (hasShift) {
+                const anchor = selection0 ? resolveSelectionAnchor(selection0, cursor0) : cursor0;
+                const active = cursor0;
+                let moved = active;
+                if (event.key === ZR_KEY_LEFT) {
+                    moved = hasCtrl ? prevWordBoundary(value, active) : prevBoundary(value, active);
+                }
+                else if (event.key === ZR_KEY_RIGHT) {
+                    moved = hasCtrl ? nextWordBoundary(value, active) : nextBoundary(value, active);
+                }
+                else if (event.key === ZR_KEY_HOME) {
+                    moved = multiline && !hasCtrl ? moveCursorToLineEdge(value, active, "home") : 0;
+                }
+                else if (event.key === ZR_KEY_END) {
+                    moved = multiline && !hasCtrl ? moveCursorToLineEdge(value, active, "end") : value.length;
+                }
+                else if (event.key === ZR_KEY_UP) {
+                    if (!multiline)
+                        return null;
+                    moved = moveCursorVertical(value, active, -1);
+                }
+                else {
+                    if (!multiline)
+                        return null;
+                    moved = moveCursorVertical(value, active, 1);
+                }
+                if (moved === anchor) {
+                    return Object.freeze({
+                        nextValue: value,
+                        nextCursor: moved,
+                        nextSelectionStart: null,
+                        nextSelectionEnd: null,
+                    });
+                }
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: moved,
+                    nextSelectionStart: anchor,
+                    nextSelectionEnd: moved,
+                });
+            }
+            if (selection0) {
+                const collapsed = event.key === ZR_KEY_LEFT || event.key === ZR_KEY_HOME || event.key === ZR_KEY_UP
+                    ? selectionMin
+                    : selectionMax;
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: collapsed,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
+            if (event.key === ZR_KEY_LEFT) {
+                const nextCursor = hasCtrl
+                    ? prevWordBoundary(value, cursor0)
+                    : prevBoundary(value, cursor0);
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
+            if (event.key === ZR_KEY_RIGHT) {
+                const nextCursor = hasCtrl
+                    ? nextWordBoundary(value, cursor0)
+                    : nextBoundary(value, cursor0);
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
+            if (event.key === ZR_KEY_HOME) {
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: multiline && !hasCtrl ? moveCursorToLineEdge(value, cursor0, "home") : 0,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
+            if (event.key === ZR_KEY_END) {
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: multiline && !hasCtrl ? moveCursorToLineEdge(value, cursor0, "end") : value.length,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
+            if (event.key === ZR_KEY_UP || event.key === ZR_KEY_DOWN) {
+                if (!multiline)
+                    return null;
+                const nextCursor = moveCursorVertical(value, cursor0, event.key === ZR_KEY_UP ? -1 : 1);
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
+            return Object.freeze({
+                nextValue: value,
+                nextCursor: value.length,
+                nextSelectionStart: null,
+                nextSelectionEnd: null,
+            });
         }
         if (event.key === ZR_KEY_BACKSPACE) {
-            if (cursor0 === 0)
-                return Object.freeze({ nextValue: value, nextCursor: cursor0 });
+            if (selection0) {
+                const nextValue = value.slice(0, selectionMin) + value.slice(selectionMax);
+                const nextCursor = normalizeInputCursor(nextValue, selectionMin);
+                return result(nextValue, nextCursor, null, null);
+            }
+            if (cursor0 === 0) {
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: cursor0,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
             const start = prevBoundary(value, cursor0);
             const nextValue = value.slice(0, start) + value.slice(cursor0);
             const nextCursor = normalizeInputCursor(nextValue, start);
-            if (nextValue === value)
-                return Object.freeze({ nextValue: value, nextCursor: cursor0 });
-            const action = Object.freeze({
-                id,
-                action: "input",
-                value: nextValue,
-                cursor: nextCursor,
-            });
-            return Object.freeze({ nextValue, nextCursor, action });
+            return result(nextValue, nextCursor, null, null);
         }
         if (event.key === ZR_KEY_DELETE) {
-            if (cursor0 === value.length)
-                return Object.freeze({ nextValue: value, nextCursor: cursor0 });
+            if (selection0) {
+                const nextValue = value.slice(0, selectionMin) + value.slice(selectionMax);
+                const nextCursor = normalizeInputCursor(nextValue, selectionMin);
+                return result(nextValue, nextCursor, null, null);
+            }
+            if (cursor0 === value.length) {
+                return Object.freeze({
+                    nextValue: value,
+                    nextCursor: cursor0,
+                    nextSelectionStart: null,
+                    nextSelectionEnd: null,
+                });
+            }
             const end = nextBoundary(value, cursor0);
             const nextValue = value.slice(0, cursor0) + value.slice(end);
             const nextCursor = normalizeInputCursor(nextValue, cursor0);
-            if (nextValue === value)
-                return Object.freeze({ nextValue: value, nextCursor: cursor0 });
-            const action = Object.freeze({
-                id,
-                action: "input",
-                value: nextValue,
-                cursor: nextCursor,
-            });
-            return Object.freeze({ nextValue, nextCursor, action });
+            return result(nextValue, nextCursor, null, null);
         }
-        // ENTER/TAB and all other keys do not edit in P1.
+        if (event.key === ZR_KEY_ENTER && multiline) {
+            const start = selection0 ? selectionMin : cursor0;
+            const end = selection0 ? selectionMax : cursor0;
+            const nextValue = `${value.slice(0, start)}\n${value.slice(end)}`;
+            const nextCursor = normalizeInputCursorForward(nextValue, start + 1);
+            return result(nextValue, nextCursor, null, null);
+        }
+        // TAB and all other keys do not edit.
         return null;
     }
     if (event.kind === "text") {
-        const s = asUnicodeScalarString(event.codepoint);
+        let s = asUnicodeScalarString(event.codepoint);
         const ch = s.charCodeAt(0);
-        if (ch === 0x0a || ch === 0x0d)
-            return null;
-        const nextValue = value.slice(0, cursor0) + s + value.slice(cursor0);
-        const nextCursor = normalizeInputCursor(nextValue, cursor0 + s.length);
-        if (nextValue === value)
-            return Object.freeze({ nextValue: value, nextCursor: cursor0 });
-        const action = Object.freeze({
-            id,
-            action: "input",
-            value: nextValue,
-            cursor: nextCursor,
-        });
-        return Object.freeze({ nextValue, nextCursor, action });
+        if (ch === 0x0a || ch === 0x0d) {
+            if (!multiline)
+                return null;
+            s = "\n";
+        }
+        const start = selection0 ? selectionMin : cursor0;
+        const end = selection0 ? selectionMax : cursor0;
+        const nextValue = value.slice(0, start) + s + value.slice(end);
+        const nextCursor = normalizeInputCursorForward(nextValue, start + s.length);
+        return result(nextValue, nextCursor, null, null);
     }
     if (event.kind === "paste") {
         const decoded = UTF8_DECODER.decode(event.bytes);
-        const inserted = removeCrLf(decoded);
+        const inserted = multiline ? normalizeLineBreaks(decoded) : removeCrLf(decoded);
         if (inserted.length === 0)
             return null;
-        const nextValue = value.slice(0, cursor0) + inserted + value.slice(cursor0);
-        const nextCursor = normalizeInputCursor(nextValue, cursor0 + inserted.length);
-        if (nextValue === value)
-            return Object.freeze({ nextValue: value, nextCursor: cursor0 });
-        const action = Object.freeze({
-            id,
-            action: "input",
-            value: nextValue,
-            cursor: nextCursor,
-        });
-        return Object.freeze({ nextValue, nextCursor, action });
+        const start = selection0 ? selectionMin : cursor0;
+        const end = selection0 ? selectionMax : cursor0;
+        const nextValue = value.slice(0, start) + inserted + value.slice(end);
+        const nextCursor = normalizeInputCursorForward(nextValue, start + inserted.length);
+        return result(nextValue, nextCursor, null, null);
     }
     return null;
 }