@boba-cli/textarea 0.1.0-alpha.2

package/dist/index.cjs

@@ -0,0 +1,686 @@
+'use strict';
+
+var chapstick = require('@boba-cli/chapstick');
+var cursor = require('@boba-cli/cursor');
+var key = require('@boba-cli/key');
+var tea = require('@boba-cli/tea');
+var runeutil = require('@boba-cli/runeutil');
+var GraphemeSplitter = require('grapheme-splitter');
+var clipboard = require('clipboardy');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var GraphemeSplitter__default = /*#__PURE__*/_interopDefault(GraphemeSplitter);
+var clipboard__default = /*#__PURE__*/_interopDefault(clipboard);
+
+// src/model.ts
+var PasteMsg = class {
+  constructor(text) {
+    this.text = text;
+  }
+  _tag = "textarea/paste";
+};
+var PasteErrorMsg = class {
+  constructor(error) {
+    this.error = error;
+  }
+  _tag = "textarea/paste-error";
+};
+function pasteCommand() {
+  return async () => {
+    try {
+      const text = await clipboard__default.default.read();
+      return new PasteMsg(text ?? "");
+    } catch (error) {
+      return new PasteErrorMsg(error);
+    }
+  };
+}
+var defaultKeyMap = {
+  characterLeft: key.newBinding({ keys: ["left"] }),
+  characterRight: key.newBinding({ keys: ["right"] }),
+  lineUp: key.newBinding({ keys: ["up", "k"] }),
+  lineDown: key.newBinding({ keys: ["down", "j"] }),
+  lineStart: key.newBinding({ keys: ["home", "ctrl+a"] }),
+  lineEnd: key.newBinding({ keys: ["end", "ctrl+e"] }),
+  insertNewline: key.newBinding({ keys: ["enter"] }),
+  deleteCharBackward: key.newBinding({ keys: ["backspace", "ctrl+h"] }),
+  deleteCharForward: key.newBinding({ keys: ["delete", "ctrl+d"] }),
+  deleteLine: key.newBinding({ keys: ["ctrl+u"] }),
+  gotoLineStart: key.newBinding({ keys: ["home"] }),
+  gotoLineEnd: key.newBinding({ keys: ["end"] }),
+  paste: key.newBinding({ keys: ["ctrl+v"] })
+};
+
+// src/model.ts
+var splitter = new GraphemeSplitter__default.default();
+var sanitizer = runeutil.newSanitizer();
+var TextareaModel = class _TextareaModel {
+  lines;
+  pos;
+  focused;
+  width;
+  maxHeight;
+  maxWidth;
+  prompt;
+  promptStyle;
+  textStyle;
+  placeholderStyle;
+  cursorStyle;
+  lineNumberStyle;
+  showLineNumbers;
+  endOfBufferCharacter;
+  validateFn;
+  keyMap;
+  cursor;
+  error;
+  scrollTop;
+  placeholder;
+  constructor(state) {
+    this.lines = state.lines;
+    this.pos = state.pos;
+    this.focused = state.focused;
+    this.width = state.width;
+    this.maxHeight = state.maxHeight;
+    this.maxWidth = state.maxWidth;
+    this.prompt = state.prompt;
+    this.promptStyle = state.promptStyle;
+    this.textStyle = state.textStyle;
+    this.placeholderStyle = state.placeholderStyle;
+    this.cursorStyle = state.cursorStyle;
+    this.lineNumberStyle = state.lineNumberStyle;
+    this.showLineNumbers = state.showLineNumbers;
+    this.endOfBufferCharacter = state.endOfBufferCharacter;
+    this.validateFn = state.validateFn;
+    this.keyMap = state.keyMap;
+    this.cursor = state.cursor;
+    this.error = state.error;
+    this.scrollTop = state.scrollTop;
+    this.placeholder = state.placeholder;
+  }
+  /** Create a new textarea model. */
+  static new(options = {}) {
+    const rawValue = options.value ?? "";
+    const sanitized = sanitize(rawValue);
+    const lines = splitLines(sanitized);
+    const cursorMode = options.cursorMode ?? cursor.CursorMode.Blink;
+    const textStyle = options.textStyle ?? new chapstick.Style();
+    const cursor$1 = new cursor.CursorModel({
+      style: options.cursorStyle ?? new chapstick.Style(),
+      textStyle,
+      mode: cursorMode,
+      focused: false,
+      char: "\u258C"
+    });
+    const model = new _TextareaModel({
+      lines: lines.length > 0 ? lines : [""],
+      pos: {
+        line: Math.max(0, lines.length - 1),
+        column: lines.length > 0 ? runeCount(last(lines) ?? "") : 0
+      },
+      focused: false,
+      width: options.width ?? 0,
+      maxHeight: options.maxHeight ?? 0,
+      maxWidth: options.maxWidth ?? 0,
+      prompt: options.prompt ?? "",
+      promptStyle: options.promptStyle ?? new chapstick.Style(),
+      textStyle,
+      placeholderStyle: options.placeholderStyle ?? new chapstick.Style(),
+      cursorStyle: options.cursorStyle ?? new chapstick.Style(),
+      lineNumberStyle: options.lineNumberStyle ?? new chapstick.Style(),
+      showLineNumbers: options.showLineNumbers ?? false,
+      endOfBufferCharacter: options.endOfBufferCharacter ?? "~",
+      validateFn: options.validate,
+      keyMap: options.keyMap ?? defaultKeyMap,
+      cursor: cursor$1,
+      error: null,
+      scrollTop: 0,
+      placeholder: options.placeholder
+    });
+    return model.#withError(model.#runValidation(model.value()));
+  }
+  /** Initial command (none by default). */
+  init() {
+    return null;
+  }
+  /** Full text value. */
+  value() {
+    return this.lines.join("\n");
+  }
+  /** Number of lines. */
+  lineCount() {
+    return this.lines.length;
+  }
+  /** Current line index (0-based). */
+  currentLine() {
+    return this.pos.line;
+  }
+  /** Current column (grapheme index). */
+  currentColumn() {
+    return this.pos.column;
+  }
+  /** Content of a line (empty string if out of bounds). */
+  lineContent(line) {
+    return this.lines[line] ?? "";
+  }
+  /** Is textarea empty. */
+  isEmpty() {
+    return this.lines.length === 1 && this.lines[0]?.length === 0;
+  }
+  /** Focus the textarea (enables key handling). */
+  focus() {
+    if (this.focused) {
+      return [this, null];
+    }
+    const [cursor, cmd] = this.cursor.focus();
+    const next = this.#with({ focused: true, cursor });
+    return [next, cmd];
+  }
+  /** Blur the textarea. */
+  blur() {
+    if (!this.focused) {
+      return this;
+    }
+    return this.#with({ focused: false, cursor: this.cursor.blur() });
+  }
+  /** Move cursor to start of current line. */
+  gotoLineStart() {
+    return this.#withPosition({ line: this.pos.line, column: 0 });
+  }
+  /** Move cursor to end of current line. */
+  gotoLineEnd() {
+    const len = runeCount(this.lines[this.pos.line] ?? "");
+    return this.#withPosition({ line: this.pos.line, column: len });
+  }
+  /** Move up n lines (default 1). */
+  lineUp(n = 1) {
+    const target = clamp(
+      this.pos.line - Math.max(1, n),
+      0,
+      this.lines.length - 1
+    );
+    return this.#withPosition({ line: target, column: this.pos.column });
+  }
+  /** Move cursor left, possibly across lines. */
+  cursorLeft() {
+    if (this.pos.column > 0) {
+      return this.#withPosition({
+        line: this.pos.line,
+        column: this.pos.column - 1
+      });
+    }
+    if (this.pos.line > 0) {
+      const prevLine = this.lines[this.pos.line - 1] ?? "";
+      return this.#withPosition({
+        line: this.pos.line - 1,
+        column: runeCount(prevLine)
+      });
+    }
+    return this;
+  }
+  /** Move cursor right, possibly across lines. */
+  cursorRight() {
+    const line = this.lines[this.pos.line] ?? "";
+    const len = runeCount(line);
+    if (this.pos.column < len) {
+      return this.#withPosition({
+        line: this.pos.line,
+        column: this.pos.column + 1
+      });
+    }
+    if (this.pos.line < this.lines.length - 1) {
+      return this.#withPosition({ line: this.pos.line + 1, column: 0 });
+    }
+    return this;
+  }
+  /** Move down n lines (default 1). */
+  lineDown(n = 1) {
+    const target = clamp(
+      this.pos.line + Math.max(1, n),
+      0,
+      this.lines.length - 1
+    );
+    return this.#withPosition({ line: target, column: this.pos.column });
+  }
+  /** Jump to a specific line (0-based). */
+  gotoLine(line) {
+    const target = clamp(line, 0, this.lines.length - 1);
+    return this.#withPosition({ line: target, column: this.pos.column });
+  }
+  /** Insert text at cursor (supports multi-line). */
+  insertRunes(text) {
+    if (!text) {
+      return this;
+    }
+    const sanitized = sanitize(text);
+    if (!sanitized) {
+      return this;
+    }
+    const parts = sanitized.split("\n");
+    const current = this.lines[this.pos.line] ?? "";
+    const before = sliceGraphemes(current, 0, this.pos.column);
+    const after = sliceGraphemes(current, this.pos.column);
+    let nextLines = [];
+    if (parts.length === 1) {
+      const merged = before + parts[0] + after;
+      nextLines = replaceLine(this.lines, this.pos.line, merged);
+    } else {
+      const first = before + parts[0];
+      const last2 = parts[parts.length - 1];
+      const middle = parts.slice(1, -1);
+      const tail = last2 + after;
+      nextLines = [
+        ...this.lines.slice(0, this.pos.line),
+        first,
+        ...middle,
+        tail,
+        ...this.lines.slice(this.pos.line + 1)
+      ];
+    }
+    const newLine = this.pos.line + (parts.length - 1);
+    const newColumn = parts.length === 1 ? this.pos.column + runeCount(parts[0]) : runeCount(last(parts));
+    return this.#withValue(nextLines, { line: newLine, column: newColumn });
+  }
+  /** Insert a newline at the cursor. */
+  insertNewline() {
+    return this.insertRunes("\n");
+  }
+  /** Delete character to the left (backspace). */
+  deleteLeft(n = 1) {
+    if (n <= 0) return this;
+    let model = this;
+    for (let i = 0; i < n; i++) {
+      const next = model.#deleteLeftOnce();
+      if (next === model) break;
+      model = next;
+    }
+    return model;
+  }
+  #deleteLeftOnce() {
+    if (this.pos.column > 0) {
+      const line = this.lines[this.pos.line] ?? "";
+      const before = sliceGraphemes(line, 0, this.pos.column - 1);
+      const after = sliceGraphemes(line, this.pos.column);
+      const merged = before + after;
+      return this.#withValue(replaceLine(this.lines, this.pos.line, merged), {
+        line: this.pos.line,
+        column: this.pos.column - 1
+      });
+    }
+    if (this.pos.line === 0) {
+      return this;
+    }
+    const prevLine = this.lines[this.pos.line - 1] ?? "";
+    const current = this.lines[this.pos.line] ?? "";
+    const mergedLine = prevLine + current;
+    const nextLines = [
+      ...this.lines.slice(0, this.pos.line - 1),
+      mergedLine,
+      ...this.lines.slice(this.pos.line + 1)
+    ];
+    return this.#withValue(nextLines, {
+      line: this.pos.line - 1,
+      column: runeCount(prevLine)
+    });
+  }
+  /** Delete character to the right (delete). */
+  deleteRight(n = 1) {
+    if (n <= 0) return this;
+    let model = this;
+    for (let i = 0; i < n; i++) {
+      const next = model.#deleteRightOnce();
+      if (next === model) break;
+      model = next;
+    }
+    return model;
+  }
+  #deleteRightOnce() {
+    const line = this.lines[this.pos.line] ?? "";
+    const len = runeCount(line);
+    if (this.pos.column < len) {
+      const before = sliceGraphemes(line, 0, this.pos.column);
+      const after = sliceGraphemes(line, this.pos.column + 1);
+      const merged2 = before + after;
+      return this.#withValue(replaceLine(this.lines, this.pos.line, merged2), {
+        line: this.pos.line,
+        column: this.pos.column
+      });
+    }
+    if (this.pos.line >= this.lines.length - 1) {
+      return this;
+    }
+    const nextLine = this.lines[this.pos.line + 1] ?? "";
+    const merged = line + nextLine;
+    const nextLines = [
+      ...this.lines.slice(0, this.pos.line),
+      merged,
+      ...this.lines.slice(this.pos.line + 2)
+    ];
+    return this.#withValue(nextLines, {
+      line: this.pos.line,
+      column: this.pos.column
+    });
+  }
+  /** Delete the current line. Keeps one empty line minimum. */
+  deleteLine() {
+    if (this.lines.length === 1) {
+      return this.reset();
+    }
+    const nextLines = this.lines.filter((_, i) => i !== this.pos.line);
+    const nextLine = clamp(this.pos.line, 0, nextLines.length - 1);
+    const nextColumn = clamp(
+      this.pos.column,
+      0,
+      runeCount(nextLines[nextLine] ?? "")
+    );
+    return this.#withValue(nextLines, { line: nextLine, column: nextColumn });
+  }
+  /** Duplicate the current line below. */
+  duplicateLine() {
+    const line = this.lines[this.pos.line] ?? "";
+    const nextLines = [
+      ...this.lines.slice(0, this.pos.line + 1),
+      line,
+      ...this.lines.slice(this.pos.line + 1)
+    ];
+    return this.#withValue(nextLines, {
+      line: this.pos.line + 1,
+      column: this.pos.column
+    });
+  }
+  /** Scroll up by n lines (no cursor move). */
+  scrollUp(n = 1) {
+    const nextScroll = clamp(
+      this.scrollTop - Math.max(1, n),
+      0,
+      this.maxScroll()
+    );
+    return this.#with({ scrollTop: nextScroll });
+  }
+  /** Scroll down by n lines (no cursor move). */
+  scrollDown(n = 1) {
+    const nextScroll = clamp(
+      this.scrollTop + Math.max(1, n),
+      0,
+      this.maxScroll()
+    );
+    return this.#with({ scrollTop: nextScroll });
+  }
+  /** Reset to empty content. */
+  reset() {
+    return this.#withValue([""], { line: 0, column: 0 });
+  }
+  /** Set a new value (replaces all lines). */
+  setValue(value) {
+    const sanitized = sanitize(value ?? "");
+    const lines = splitLines(sanitized);
+    return this.#withValue(lines.length > 0 ? lines : [""], {
+      line: Math.max(0, lines.length - 1),
+      column: lines.length ? runeCount(last(lines) ?? "") : 0
+    });
+  }
+  /** Validation function setter. */
+  setValidateFunc(fn) {
+    const next = this.#with({ validateFn: fn });
+    return next.#withError(next.#runValidation(next.value()));
+  }
+  /** Validate current value. */
+  validate() {
+    return this.#runValidation(this.value());
+  }
+  /** Command to paste from clipboard. */
+  paste() {
+    return [this, pasteCommand()];
+  }
+  /** Tea update loop. */
+  update(msg) {
+    let model = this;
+    const cmds = [];
+    if (msg instanceof tea.KeyMsg) {
+      if (model.focused) {
+        const [nextModel, cmd] = model.#handleKey(msg);
+        model = nextModel;
+        if (cmd) cmds.push(cmd);
+      }
+    } else if (msg instanceof PasteMsg) {
+      model = model.insertRunes(msg.text);
+    } else if (msg instanceof PasteErrorMsg) {
+      model = model.#withError(asError(msg.error));
+    }
+    const [cursor, cursorCmd] = model.cursor.update(msg);
+    model = model.#with({ cursor });
+    if (cursorCmd) {
+      cmds.push(cursorCmd);
+    }
+    if (msg instanceof tea.KeyMsg && (msg.key.type === tea.KeyType.Left || msg.key.type === tea.KeyType.Right || msg.key.type === tea.KeyType.Home || msg.key.type === tea.KeyType.End)) {
+      const refreshed = model.cursor.withChar(
+        model.cursor.isBlinkHidden() ? "\u258C" : model.cursor.char
+      );
+      model = model.#with({ cursor: refreshed });
+    }
+    return [model, tea.batch(...cmds)];
+  }
+  /** Render textarea with cursor and optional line numbers. */
+  view() {
+    if (this.isEmpty() && this.placeholder) {
+      return this.#placeholderView();
+    }
+    const height = this.viewportHeight();
+    const start = clamp(this.scrollTop, 0, Math.max(0, this.lineCount() - 1));
+    const visible = this.lines.slice(start, start + height);
+    const linesOut = visible.map((line, idx) => {
+      const lineIndex = start + idx;
+      const isCursorLine = lineIndex === this.pos.line;
+      return this.#renderLine(line, lineIndex, isCursorLine);
+    });
+    const remaining = height - visible.length;
+    if (remaining > 0) {
+      for (let i = 0; i < remaining; i++) {
+        const filler = this.endOfBufferCharacter;
+        const prefix = this.#linePrefix(start + visible.length + i, false);
+        linesOut.push(prefix + filler);
+      }
+    }
+    return linesOut.join("\n");
+  }
+  #handleKey(msg) {
+    let next = this;
+    let cmd = null;
+    const keyMap = this.keyMap;
+    switch (true) {
+      case key.matches(msg, keyMap.lineUp):
+        next = next.lineUp();
+        break;
+      case key.matches(msg, keyMap.lineDown):
+        next = next.lineDown();
+        break;
+      case key.matches(msg, keyMap.characterLeft):
+        next = next.cursorLeft();
+        break;
+      case key.matches(msg, keyMap.characterRight):
+        next = next.cursorRight();
+        break;
+      case key.matches(msg, keyMap.lineStart):
+      case key.matches(msg, keyMap.gotoLineStart):
+        next = next.gotoLineStart();
+        break;
+      case key.matches(msg, keyMap.lineEnd):
+      case key.matches(msg, keyMap.gotoLineEnd):
+        next = next.gotoLineEnd();
+        break;
+      case key.matches(msg, keyMap.insertNewline):
+        next = next.insertNewline();
+        break;
+      case key.matches(msg, keyMap.deleteCharBackward):
+        next = next.deleteLeft();
+        break;
+      case key.matches(msg, keyMap.deleteCharForward):
+        next = next.deleteRight();
+        break;
+      case key.matches(msg, keyMap.deleteLine):
+        next = next.deleteLine();
+        break;
+      case key.matches(msg, keyMap.paste):
+        cmd = pasteCommand();
+        break;
+      default:
+        if (msg.key.type === tea.KeyType.Enter) {
+          next = next.insertNewline();
+        } else if ((msg.key.type === tea.KeyType.Runes || msg.key.type === tea.KeyType.Space) && !msg.key.alt) {
+          next = next.insertRunes(msg.key.runes);
+        }
+        break;
+    }
+    return [next.#ensureCursorVisible(), cmd];
+  }
+  #placeholderView() {
+    const prefix = this.#linePrefix(0, true);
+    const graphemes = splitter.splitGraphemes(this.placeholder ?? "");
+    const cursorChar = graphemes[0] ?? "\u258C";
+    const rest = graphemes.slice(1).join("");
+    const cursorView = this.cursor.withChar(cursorChar).view();
+    const body = this.placeholderStyle.inline(true).render(rest);
+    return prefix + cursorView + body;
+  }
+  #renderLine(line, index, isCursorLine) {
+    const prefix = this.#linePrefix(index, isCursorLine);
+    if (!isCursorLine) {
+      return prefix + this.textStyle.inline(true).render(line);
+    }
+    const graphemes = splitter.splitGraphemes(line ?? "");
+    const col = clamp(this.pos.column, 0, graphemes.length);
+    const before = graphemes.slice(0, col).join("");
+    const after = graphemes.slice(col).join("");
+    const cursorChar = "\u258C";
+    const beforeStyled = this.textStyle.inline(true).render(before);
+    const afterStyled = this.textStyle.inline(true).render(after);
+    const cursorView = this.cursor.withChar(cursorChar).view();
+    return prefix + beforeStyled + cursorView + afterStyled;
+  }
+  #linePrefix(lineIndex, _isCursorLine) {
+    const prompt = this.prompt ? this.promptStyle.inline(true).render(this.prompt) : "";
+    const ln = this.showLineNumbers && this.lines.length > 0 ? this.#renderLineNumber(lineIndex) : "";
+    return ln + prompt;
+  }
+  #renderLineNumber(lineIndex) {
+    const width = String(this.lines.length).length;
+    const num = String(lineIndex + 1).padStart(width, " ");
+    return this.lineNumberStyle.inline(true).render(`${num} `);
+  }
+  #runValidation(value) {
+    return this.validateFn ? this.validateFn(value) : null;
+  }
+  #withError(error) {
+    if (error === this.error) return this;
+    return this.#with({ error });
+  }
+  #withValue(lines, pos) {
+    const normalized = lines.length > 0 ? lines : [""];
+    const nextPos = this.#clampPosition(pos, normalized);
+    const next = this.#with({
+      lines: normalized,
+      pos: nextPos
+    });
+    return next.#withError(next.#runValidation(next.value())).#ensureCursorVisible();
+  }
+  #withPosition(pos) {
+    return this.#withValue(this.lines, pos);
+  }
+  #with(patch) {
+    return new _TextareaModel({
+      lines: this.lines,
+      pos: this.pos,
+      focused: this.focused,
+      width: this.width,
+      maxHeight: this.maxHeight,
+      maxWidth: this.maxWidth,
+      prompt: this.prompt,
+      promptStyle: this.promptStyle,
+      textStyle: this.textStyle,
+      placeholderStyle: this.placeholderStyle,
+      cursorStyle: this.cursorStyle,
+      lineNumberStyle: this.lineNumberStyle,
+      showLineNumbers: this.showLineNumbers,
+      endOfBufferCharacter: this.endOfBufferCharacter,
+      validateFn: this.validateFn,
+      keyMap: this.keyMap,
+      cursor: this.cursor,
+      error: this.error,
+      scrollTop: this.scrollTop,
+      placeholder: this.placeholder,
+      ...patch
+    });
+  }
+  #clampPosition(pos, lines) {
+    const line = clamp(pos.line, 0, Math.max(0, lines.length - 1));
+    const lineContent = lines[line] ?? "";
+    const column = clamp(pos.column, 0, runeCount(lineContent));
+    return { line, column };
+  }
+  #ensureCursorVisible() {
+    const height = this.viewportHeight();
+    if (height <= 0) return this;
+    let top = this.scrollTop;
+    if (this.pos.line < top) {
+      top = this.pos.line;
+    } else if (this.pos.line >= top + height) {
+      top = this.pos.line - height + 1;
+    }
+    top = clamp(top, 0, this.maxScroll());
+    if (top === this.scrollTop) return this;
+    return this.#with({ scrollTop: top });
+  }
+  viewportHeight() {
+    if (this.maxHeight && this.maxHeight > 0) {
+      return this.maxHeight;
+    }
+    return Math.max(1, this.lines.length);
+  }
+  maxScroll() {
+    const height = this.viewportHeight();
+    return Math.max(0, this.lines.length - height);
+  }
+};
+function sanitize(value) {
+  return sanitizer.sanitize(value ?? "");
+}
+function splitLines(value) {
+  return value.split("\n");
+}
+function sliceGraphemes(value, start, end) {
+  const graphemes = splitter.splitGraphemes(value ?? "");
+  return graphemes.slice(start, end).join("");
+}
+function runeCount(value) {
+  return splitter.countGraphemes(value ?? "");
+}
+function clamp(v, min, max) {
+  const lo = Math.min(min, max);
+  const hi = Math.max(min, max);
+  return Math.min(hi, Math.max(lo, v));
+}
+function last(arr) {
+  return arr[arr.length - 1];
+}
+function replaceLine(lines, index, value) {
+  return lines.map((l, i) => i === index ? value : l);
+}
+function asError(err) {
+  if (err instanceof Error) return err;
+  if (typeof err === "string") return new Error(err);
+  if (typeof err === "number" || typeof err === "boolean")
+    return new Error(String(err));
+  return new Error("textarea error");
+}
+
+Object.defineProperty(exports, "CursorMode", {
+  enumerable: true,
+  get: function () { return cursor.CursorMode; }
+});
+exports.PasteErrorMsg = PasteErrorMsg;
+exports.PasteMsg = PasteMsg;
+exports.TextareaModel = TextareaModel;
+exports.defaultKeyMap = defaultKeyMap;
+exports.pasteCommand = pasteCommand;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map