@bastani/atomic 0.8.4 → 0.8.5-0

package/dist/builtin/workflows/src/tui/inline-form-card.ts

@@ -25,7 +25,7 @@
  *   ╰──────────────────────────────────────────────────────────────────╯
  *     integer  ·  optional  ·  loop count
  *
- *   ╭ EDIT ╮  tab next  ·  shift+tab prev  ·  ctrl+s run  ·  esc cancel
+ *   ╭ EDIT ╮  tab next  ·  shift+tab prev  ·  ctrl+enter run  ·  esc cancel
  *   │ EDIT │
  *   ╰──────╯
  *
@@ -55,6 +55,55 @@ export interface InlineCardOpts {
   theme: GraphTheme;
 }
 
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+function graphemes(text: string): string[] {
+  return Array.from(graphemeSegmenter.segment(text), (s) => s.segment);
+}
+
+function clampGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  if (c === text.length) return c;
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index === c) return c;
+    if (s.index > c) break;
+  }
+  let prev = 0;
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index >= c) break;
+    prev = s.index;
+  }
+  return prev;
+}
+
+function headToWidth(text: string, width: number): string {
+  if (width <= 0) return "";
+  let out = "";
+  let used = 0;
+  for (const g of graphemes(text)) {
+    const w = visibleWidth(g);
+    if (used + w > width) break;
+    out += g;
+    used += w;
+  }
+  return out;
+}
+
+function tailToWidth(text: string, width: number): string {
+  if (width <= 0) return "";
+  let out = "";
+  let used = 0;
+  const gs = graphemes(text);
+  for (let i = gs.length - 1; i >= 0; i--) {
+    const g = gs[i]!;
+    const w = visibleWidth(g);
+    if (used + w > width) break;
+    out = g + out;
+    used += w;
+  }
+  return out;
+}
+
 // ---------------------------------------------------------------------------
 // Public renderer
 // ---------------------------------------------------------------------------
@@ -110,7 +159,8 @@ function renderHeaderBand(state: InlineFormState, theme: GraphTheme, width: numb
   );
 
   const nameVisible = `  ${state.workflowName}`;
-  const counter = `${state.focusedIdx + 1} / ${state.fields.length}`;
+  const focusTargetCount = state.fields.length;
+  const counter = `${Math.min(state.focusedIdx + 1, focusTargetCount)} / ${focusTargetCount}`;
   const counterVisible = counter;
 
   const leftEdgePad = 1;
@@ -130,8 +180,6 @@ function renderHeaderBand(state: InlineFormState, theme: GraphTheme, width: numb
 
 function renderFooterBand(theme: GraphTheme, width: number): string[] {
   const chromeBg = hexBg(theme.backgroundPanel);
-  const text = hexToAnsi(theme.text);
-  const muted = hexToAnsi(theme.textMuted);
   const dim = hexToAnsi(theme.dim);
 
   const { top, mid, bot, visibleWidth: pillW } = renderOutlinePill(
@@ -140,11 +188,13 @@ function renderFooterBand(theme: GraphTheme, width: number): string[] {
     chromeBg,
   );
 
+  const text = hexToAnsi(theme.text);
+  const muted = hexToAnsi(theme.textMuted);
   const hints: Array<{ key: string; label: string }> = [
-    { key: "tab", label: "next" },
-    { key: "shift+tab", label: "prev" },
-    { key: "ctrl+s", label: "run" },
-    { key: "esc", label: "cancel" },
+    { key: "tab", label: "Next" },
+    { key: "shift+tab", label: "Prev" },
+    { key: "ctrl+enter", label: "Run" },
+    { key: "esc", label: "Cancel" },
   ];
   const sep = `${chromeBg}  ${dim}·${RESET}${chromeBg}  `;
   const segments = hints.map(
@@ -280,15 +330,7 @@ function renderFieldContent(
       return [paint(field.placeholder ?? "", theme.dim)];
     }
     if (focused) {
-      const c = Math.max(0, Math.min(caret ?? raw.length, raw.length));
-      const before = raw.slice(0, c);
-      const after = raw.slice(c);
-      return [
-        clip(
-          paint(before, theme.text) + paint("▋", theme.accent) + paint(after, theme.text),
-          usable,
-        ),
-      ];
+      return [renderCaretLine(raw, caret ?? raw.length, usable, theme, theme.text)];
     }
     return [clip(paint(raw, theme.textMuted), usable)];
   }
@@ -309,12 +351,30 @@ function renderFieldContent(
     if (row !== layout.cursorRow) {
       return paint(line, theme.text);
     }
-    const before = line.slice(0, layout.cursorCol);
-    const after = line.slice(layout.cursorCol);
-    return paint(before, theme.text) + paint("▋", theme.accent) + paint(after, theme.text);
+    return renderCaretLine(line, layout.cursorOffset ?? line.length, usable, theme, theme.text);
   });
 }
 
+function renderCaretLine(
+  raw: string,
+  caret: number,
+  usable: number,
+  theme: GraphTheme,
+  color: string,
+): string {
+  const safe = clampGraphemeOffset(raw, caret);
+  const beforeFull = raw.slice(0, safe);
+  const afterFull = raw.slice(safe);
+  const cursorWidth = 1;
+  let before = beforeFull;
+  let after = afterFull;
+  if (visibleWidth(beforeFull) + cursorWidth + visibleWidth(afterFull) > usable) {
+    before = tailToWidth(beforeFull, Math.max(0, usable - cursorWidth));
+    after = headToWidth(afterFull, Math.max(0, usable - visibleWidth(before) - cursorWidth));
+  }
+  return clip(paint(before, color) + paint("▋", theme.accent) + paint(after, color), usable);
+}
+
 // ---------------------------------------------------------------------------
 // Frozen states
 // ---------------------------------------------------------------------------
@@ -382,40 +442,63 @@ export function layoutTextField(
   raw: string,
   usable: number,
   caret: number,
-): { lines: string[]; cursorRow: number; cursorCol: number } {
+): { lines: string[]; cursorRow: number; cursorCol: number; cursorOffset?: number } {
   const width = Math.max(1, Math.floor(usable));
-  const safeCaret = Math.max(0, Math.min(caret, raw.length));
+  const safeCaret = clampGraphemeOffset(raw, caret);
   const visualLines: string[] = [];
+  const lineStarts: number[] = [];
+  const lineEnds: number[] = [];
   let curLine = "";
-  let cursorRow = 0;
-  let cursorCol = 0;
-  let cursorRecorded = false;
-  const recordCursorIfMatched = (offset: number): void => {
-    if (offset === safeCaret && !cursorRecorded) {
-      cursorRow = visualLines.length;
-      cursorCol = curLine.length;
-      cursorRecorded = true;
-    }
+  let curWidth = 0;
+  let lineStart = 0;
+
+  const pushLine = (end: number): void => {
+    visualLines.push(curLine);
+    lineStarts.push(lineStart);
+    lineEnds.push(end);
+    curLine = "";
+    curWidth = 0;
+    lineStart = end;
   };
-  for (let i = 0; i < raw.length; i++) {
-    recordCursorIfMatched(i);
-    const ch = raw[i]!;
-    if (ch === "\n") {
-      visualLines.push(curLine);
-      curLine = "";
+
+  for (const s of graphemeSegmenter.segment(raw)) {
+    const offset = s.index;
+    const g = s.segment;
+    if (g === "\n") {
+      pushLine(offset);
+      lineStart = offset + g.length;
       continue;
     }
-    curLine += ch;
-    if (curLine.length >= width) {
-      visualLines.push(curLine);
-      curLine = "";
+    const w = visibleWidth(g);
+    if (curLine !== "" && curWidth + w > width) {
+      pushLine(offset);
+    }
+    curLine += g;
+    curWidth += w;
+    if (curWidth >= width) {
+      pushLine(offset + g.length);
     }
   }
-  recordCursorIfMatched(raw.length);
   visualLines.push(curLine);
-  if (!cursorRecorded) {
-    cursorRow = visualLines.length - 1;
-    cursorCol = curLine.length;
+  lineStarts.push(lineStart);
+  lineEnds.push(raw.length);
+
+  let cursorRow = visualLines.length - 1;
+  for (let i = 0; i < visualLines.length; i++) {
+    const start = lineStarts[i]!;
+    const end = lineEnds[i]!;
+    const nextStart = lineStarts[i + 1];
+    if (safeCaret >= start && safeCaret < end) {
+      cursorRow = i;
+      break;
+    }
+    if (safeCaret === end) {
+      cursorRow = nextStart === safeCaret ? i + 1 : i;
+    }
   }
-  return { lines: visualLines, cursorRow, cursorCol };
+  cursorRow = Math.max(0, Math.min(cursorRow, visualLines.length - 1));
+  const line = visualLines[cursorRow] ?? "";
+  const cursorOffset = Math.max(0, Math.min(safeCaret - (lineStarts[cursorRow] ?? 0), line.length));
+  const cursorCol = visibleWidth(line.slice(0, cursorOffset));
+  return { lines: visualLines, cursorRow, cursorCol, cursorOffset };
 }

package/dist/builtin/workflows/src/tui/inline-form-editor.ts

@@ -14,16 +14,16 @@
  *   ctrl+u              — delete to logical line start
  *   ctrl+k              — delete to logical line end
  *   space               — boolean toggle
- *   enter               — newline (text) | submit (others move to next field)
+ *   enter               — newline (text) | otherwise next field
  *   printable ASCII     — insert at caret (text/string/number)
- *   ctrl+s              — submit form (if valid)
- *   esc                 — cancel form
+ *   ctrl+enter          — submit form (if valid)
+ *   esc / ctrl+c        — cancel form
  *
  * Editor-mode keys (cursor movement, word jumps, deletions) route through
  * the Pi `KeybindingsManager` injected by the host at factory time, so any
  * user-configured keybinding overrides surfaces here as well. Form-level
- * keys (tab/shift+tab/esc/ctrl+s) stay as raw byte checks because they are
- * workflow form contract, not Pi-configurable actions.
+ * keys (tab/shift+tab/ctrl+enter/esc/ctrl+c) stay as raw byte checks because
+ * they are workflow form contract, not Pi-configurable actions.
  *
  * On submit/cancel the editor calls back to the orchestrator which:
  *   1. Marks the form state finalized (renderer flips to frozen view)
@@ -57,13 +57,14 @@ import {
   wordLeft,
   wordRight,
 } from "./keybindings-adapter.js";
+import { matchesKey, visibleWidth } from "./text-helpers.js";
 
 export type FormEditorOutcome = "submit" | "cancel";
 
 export interface InlineFormEditorOpts {
   formId: string;
   theme: GraphTheme;
-  /** Called when ctrl+s passes validation or esc fires. Triggers cleanup. */
+  /** Called when Ctrl+Enter passes validation or cancel fires. */
   onExit: (outcome: FormEditorOutcome) => void;
   /**
    * Pi's `KeybindingsManager` injected as the third arg of the editor
@@ -75,24 +76,80 @@ export interface InlineFormEditorOpts {
   keybindings?: KeybindingsLike;
 }
 
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+function graphemes(text: string): string[] {
+  return Array.from(graphemeSegmenter.segment(text), (s) => s.segment);
+}
+
+function previousGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  let prev = 0;
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index >= c) break;
+    prev = s.index;
+  }
+  return prev;
+}
+
+function nextGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index >= c) return Math.min(text.length, s.index + s.segment.length);
+    if (s.index + s.segment.length > c) return s.index + s.segment.length;
+  }
+  return text.length;
+}
+
+function clampGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  if (c === text.length) return c;
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index === c) return c;
+    if (s.index > c) break;
+  }
+  return previousGraphemeOffset(text, c);
+}
+
+function visualColumn(text: string, caret: number): number {
+  return visibleWidth(text.slice(0, clampGraphemeOffset(text, caret)));
+}
+
+function offsetAtVisualColumn(text: string, targetCol: number): number {
+  let col = 0;
+  for (const s of graphemeSegmenter.segment(text)) {
+    const w = visibleWidth(s.segment);
+    if (col + w > targetCol) return s.index;
+    col += w;
+  }
+  return text.length;
+}
+
+function isPrintableGrapheme(data: string): boolean {
+  if (data.length === 0 || data.includes("\x1b")) return false;
+  for (const ch of data) {
+    const code = ch.codePointAt(0);
+    if (code === undefined || code < 0x20 || code === 0x7f) return false;
+  }
+  return graphemes(data).length === 1;
+}
+
 /**
  * Move the caret one logical line up inside a multi-line text field.
  * Returns the new caret offset, or `null` when the caret is already on
  * the first logical line — that's the boundary signal the caller uses to
- * fall through to focus-prev. The "column" is preserved across lines as
- * a byte offset within the current logical line, clamped to the target
- * line's length (same behaviour as Pi's own editor `preferredVisualCol`
- * but at the logical-line level, since the form caret is a single
- * integer offset rather than `{row, col}`).
+ * fall through to focus-prev. The visual cell column is preserved across
+ * lines, matching pi-tui Editor behaviour for CJK/emoji-width text.
  */
 function caretLineUp(raw: string, caret: number): number | null {
-  const lineStart = raw.lastIndexOf("\n", caret - 1) + 1;
+  const safe = clampGraphemeOffset(raw, caret);
+  const lineStart = raw.lastIndexOf("\n", safe - 1) + 1;
   if (lineStart === 0) return null; // first logical line — boundary
   const prevLineEnd = lineStart - 1;
   const prevLineStart = raw.lastIndexOf("\n", prevLineEnd - 1) + 1;
-  const colInLine = caret - lineStart;
-  const prevLineLen = prevLineEnd - prevLineStart;
-  return prevLineStart + Math.min(colInLine, prevLineLen);
+  const colInLine = visualColumn(raw.slice(lineStart, safe), safe - lineStart);
+  const prevLine = raw.slice(prevLineStart, prevLineEnd);
+  return prevLineStart + offsetAtVisualColumn(prevLine, colInLine);
 }
 
 /**
@@ -101,15 +158,16 @@ function caretLineUp(raw: string, caret: number): number | null {
  * the last logical line.
  */
 function caretLineDown(raw: string, caret: number): number | null {
-  const nextNl = raw.indexOf("\n", caret);
+  const safe = clampGraphemeOffset(raw, caret);
+  const nextNl = raw.indexOf("\n", safe);
   if (nextNl === -1) return null; // last logical line — boundary
-  const lineStart = raw.lastIndexOf("\n", caret - 1) + 1;
-  const colInLine = caret - lineStart;
+  const lineStart = raw.lastIndexOf("\n", safe - 1) + 1;
+  const colInLine = visualColumn(raw.slice(lineStart, safe), safe - lineStart);
   const nextLineStart = nextNl + 1;
   const nextNlAfter = raw.indexOf("\n", nextLineStart);
   const nextLineEnd = nextNlAfter === -1 ? raw.length : nextNlAfter;
-  const nextLineLen = nextLineEnd - nextLineStart;
-  return nextLineStart + Math.min(colInLine, nextLineLen);
+  const nextLine = raw.slice(nextLineStart, nextLineEnd);
+  return nextLineStart + offsetAtVisualColumn(nextLine, colInLine);
 }
 
 // ── Bracketed paste handling ─────────────────────────────────────────────
@@ -307,7 +365,7 @@ export class InlineFormEditor implements PiEditorComponent {
     // Fallback for hosts without bracketed paste: a multi-character
     // chunk of printable text (no escape bytes) is treated as paste.
     // Single-char input still flows through the routeKey path so the
-    // existing keystroke handlers (arrows, ctrl+s, etc.) keep working.
+    // existing keystroke handlers (arrows, paste, etc.) keep working.
     if (data.length > 1 && isPrintableTextChunk(data)) {
       if (this.applyPaste(data, state)) {
         touch(state);
@@ -373,23 +431,25 @@ export class InlineFormEditor implements PiEditorComponent {
   private routeKey(data: string, state: InlineFormState): boolean {
     // Globals first. Workflow form contract — these are NOT Pi-configurable
     // editor actions, so they stay as raw byte checks:
-    //   esc       (\x1b)         — cancel form
-    //   ctrl+s    (\x13)         — submit form
-    //   tab       (\t)           — focus next field
-    //   shift+tab (\x1b[Z)       — focus previous field
-    if (data === "\x1b") {
+    //   esc        (\x1b)        — cancel form
+    //   ctrl+c     (\x03)        — cancel form
+    //   ctrl+enter                — submit form
+    //   tab        (\t)          — focus next field
+    //   shift+tab  (\x1b[Z)      — focus previous field
+    if (data === "\x03" || matchesKey(data, "escape")) {
       this.opts.onExit("cancel");
       return true;
     }
-    if (data === "\x13") {
+    if (matchesKey(data, "ctrl+enter")) {
       if (this.allValid(state)) this.opts.onExit("submit");
+      else this.focusFirstInvalid(state);
       return true;
     }
-    if (data === "\t") {
+    if (matchesKey(data, "tab")) {
       this.moveFocus(state, +1);
       return true;
     }
-    if (data === "\x1b[Z") {
+    if (matchesKey(data, "shift+tab")) {
       this.moveFocus(state, -1);
       return true;
     }
@@ -520,11 +580,11 @@ export class InlineFormEditor implements PiEditorComponent {
 
     // Character cursor movement.
     if (matchesAction(this.kb, data, "tui.editor.cursorLeft")) {
-      state.caret = Math.max(0, caret - 1);
+      state.caret = previousGraphemeOffset(cur, caret);
       return true;
     }
     if (matchesAction(this.kb, data, "tui.editor.cursorRight")) {
-      state.caret = Math.min(cur.length, caret + 1);
+      state.caret = nextGraphemeOffset(cur, caret);
       return true;
     }
 
@@ -562,7 +622,7 @@ export class InlineFormEditor implements PiEditorComponent {
     }
     if (matchesAction(this.kb, data, "tui.editor.deleteCharBackward")) {
       if (caret > 0) {
-        const r = deleteRange(cur, caret - 1, caret, caret);
+        const r = deleteRange(cur, previousGraphemeOffset(cur, caret), caret, caret);
         state.rawText[name] = r.text;
         state.caret = r.caret;
       }
@@ -570,7 +630,7 @@ export class InlineFormEditor implements PiEditorComponent {
     }
     if (matchesAction(this.kb, data, "tui.editor.deleteCharForward")) {
       if (caret < cur.length) {
-        const r = deleteRange(cur, caret, caret + 1, caret);
+        const r = deleteRange(cur, caret, nextGraphemeOffset(cur, caret), caret);
         state.rawText[name] = r.text;
         state.caret = r.caret;
       }
@@ -594,12 +654,12 @@ export class InlineFormEditor implements PiEditorComponent {
       return true;
     }
 
-    // Printable ASCII insertion — no Pi action, raw byte check. Numeric
+    // Printable insertion — no Pi action, raw grapheme check. Numeric
     // fields accept the same printable range as text; per-field validation
     // catches non-numeric content at submit time.
-    if (data.length === 1 && data >= " " && data <= "~") {
+    if (isPrintableGrapheme(data)) {
       state.rawText[name] = cur.slice(0, caret) + data + cur.slice(caret);
-      state.caret = caret + 1;
+      state.caret = caret + data.length;
       return true;
     }
     return false;
@@ -607,11 +667,26 @@ export class InlineFormEditor implements PiEditorComponent {
 
   private moveFocus(state: InlineFormState, delta: number): void {
     const n = state.fields.length;
+    if (n === 0) return;
     state.focusedIdx = (state.focusedIdx + delta + n) % n;
     const next = state.fields[state.focusedIdx]!;
     state.caret = (state.rawText[next.name] ?? "").length;
   }
 
+  private focusFirstInvalid(state: InlineFormState): void {
+    const idx = state.fields.findIndex((f) => {
+      const v = state.rawText[f.name] ?? "";
+      if (f.required && v.trim() === "") return true;
+      if ((f.type === "number" || f.type === "integer") && v !== "" && !Number.isFinite(Number(v))) {
+        return true;
+      }
+      return f.type === "select" && Boolean(f.choices) && v !== "" && !f.choices!.includes(v);
+    });
+    if (idx < 0) return;
+    state.focusedIdx = idx;
+    state.caret = (state.rawText[state.fields[idx]!.name] ?? "").length;
+  }
+
   private allValid(state: InlineFormState): boolean {
     for (const f of state.fields) {
       const v = state.rawText[f.name] ?? "";