lsd-pi 1.1.4 → 1.1.6

package/packages/pi-tui/dist/components/loader.d.ts

@@ -1,22 +1,42 @@
 import type { TUI } from "../tui.js";
 import { Text } from "./text.js";
 /**
- * Loader component that updates every 80ms with spinning animation
+ * Loader component — braille spinner + animated word cycling.
+ *
+ * Each word types in character by character (typewriter), holds with a moving
+ * blue→cyan shimmer gradient, then erases right-to-left before the next word.
  */
 export declare class Loader extends Text {
     private spinnerColorFn;
-    private messageColorFn;
-    private message;
+    private _messageColorFn;
     private frames;
     private currentFrame;
-    private intervalId;
+    private spinnerIntervalId;
     private ui;
-    constructor(ui: TUI, spinnerColorFn: (str: string) => string, messageColorFn: (str: string) => string, message?: string);
+    private message;
+    private cycleMessages;
+    private cycleIndex;
+    private phase;
+    private visibleChars;
+    private wordAnimId;
+    private readonly gradStart;
+    private readonly gradEnd;
+    private shimmerTick;
+    private shimmerIntervalId;
+    constructor(ui: TUI, spinnerColorFn: (str: string) => string, _messageColorFn: (str: string) => string, message?: string);
     render(width: number): string[];
+    setCycleMessages(messages: string[], _intervalMs?: number): void;
+    clearCycleMessages(): void;
+    setMessage(message: string): void;
+    resumeCycle(): void;
     start(): void;
     stop(): void;
     dispose(): void;
-    setMessage(message: string): void;
+    private startWordAnimation;
+    private stopWordAnimation;
+    private scheduleWordTick;
+    private currentWord;
+    private renderAnimatedWord;
     private updateDisplay;
 }
 //# sourceMappingURL=loader.d.ts.map

package/packages/pi-tui/dist/components/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../src/components/loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC;;GAEG;AACH,qBAAa,MAAO,SAAQ,IAAI;IAQ9B,OAAO,CAAC,cAAc;IACtB,OAAO,CAAC,cAAc;IACtB,OAAO,CAAC,OAAO;IAThB,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,EAAE,CAAoB;gBAG7B,EAAE,EAAE,GAAG,EACC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EACvC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EACvC,OAAO,GAAE,MAAqB;IAOvC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAI/B,KAAK;IAWL,IAAI;IAOJ,OAAO;IAKP,UAAU,CAAC,OAAO,EAAE,MAAM;IAK1B,OAAO,CAAC,aAAa;CAOrB"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../src/components/loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAqCjC;;;;;GAKG;AACH,qBAAa,MAAO,SAAQ,IAAI;IA2B9B,OAAO,CAAC,cAAc;IACtB,OAAO,CAAC,eAAe;IA1BxB,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,iBAAiB,CAA+B;IACxD,OAAO,CAAC,EAAE,CAAoB;IAG9B,OAAO,CAAC,OAAO,CAAc;IAG7B,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAA+B;IAGjD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA6C;IACvE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+C;IAGvE,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,iBAAiB,CAA+B;gBAGvD,EAAE,EAAE,GAAG,EACC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EACvC,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EAChD,OAAO,GAAE,MAAmB;IAQ7B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAM/B,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,WAAW,SAAO;IAUvD,kBAAkB;IAKlB,UAAU,CAAC,OAAO,EAAE,MAAM;IAS1B,WAAW;IAMX,KAAK;IAqBL,IAAI;IAMJ,OAAO;IAOP,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAqCxB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,aAAa;CASrB"}

package/packages/pi-tui/dist/components/loader.js

@@ -1,53 +1,213 @@
 import { Text } from "./text.js";
+// ─── ANSI helpers ─────────────────────────────────────────────────────────────
+const ESC = "\x1b[";
+const RESET = "\x1b[0m";
+const DIM = "\x1b[2m";
+const BOLD = "\x1b[1m";
+/** 24-bit foreground color */
+function rgb(r, g, b, s) {
+    return `${ESC}38;2;${r};${g};${b}m${s}${RESET}`;
+}
+/** Interpolate between two RGB colors at position t ∈ [0,1] */
+function lerpColor(r1, g1, b1, r2, g2, b2, t) {
+    return [
+        Math.round(r1 + (r2 - r1) * t),
+        Math.round(g1 + (g2 - g1) * t),
+        Math.round(b1 + (b2 - b1) * t),
+    ];
+}
+// ─── Timing constants ─────────────────────────────────────────────────────────
+const TYPING_SPEED = 55; // ms per character typed
+const HOLD_TIME = 5000; // ms to hold the full word
+const ERASE_SPEED = 35; // ms per character erased
 /**
- * Loader component that updates every 80ms with spinning animation
+ * Loader component — braille spinner + animated word cycling.
+ *
+ * Each word types in character by character (typewriter), holds with a moving
+ * blue→cyan shimmer gradient, then erases right-to-left before the next word.
  */
 export class Loader extends Text {
-    constructor(ui, spinnerColorFn, messageColorFn, message = "Loading...") {
+    constructor(ui, spinnerColorFn, _messageColorFn, message = "Loading…") {
         super("", 1, 0);
         this.spinnerColorFn = spinnerColorFn;
-        this.messageColorFn = messageColorFn;
-        this.message = message;
+        this._messageColorFn = _messageColorFn;
+        // ── spinner ───────────────────────────────────────────────────────────────
         this.frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
         this.currentFrame = 0;
-        this.intervalId = null;
+        this.spinnerIntervalId = null;
         this.ui = null;
+        // ── message state ─────────────────────────────────────────────────────────
+        this.message = "";
+        // ── word animation ────────────────────────────────────────────────────────
+        this.cycleMessages = null;
+        this.cycleIndex = 0;
+        this.phase = "typing";
+        this.visibleChars = 0;
+        this.wordAnimId = null;
+        // ── shimmer gradient: theme blueHigh → blueXhigh ─────────────────────────
+        this.gradStart = [147, 197, 253]; // #93c5fd (blue-300)
+        this.gradEnd = [191, 219, 254]; // #bfdbfe (blue-200)
+        // Shimmer ticks independently at ~40ms for smooth gradient movement
+        this.shimmerTick = 0;
+        this.shimmerIntervalId = null;
         this.ui = ui;
+        this.message = message;
         this.start();
     }
     render(width) {
         return ["", ...super.render(width)];
     }
-    start() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
+    // ── public API ────────────────────────────────────────────────────────────
+    setCycleMessages(messages, _intervalMs = 3000) {
+        this.cycleMessages = [...messages];
+        this.cycleIndex = 0;
+        this.message = this.cycleMessages[0];
+        if (this.spinnerIntervalId) {
+            this.startWordAnimation();
         }
         this.updateDisplay();
-        this.intervalId = setInterval(() => {
+    }
+    clearCycleMessages() {
+        this.stopWordAnimation();
+        this.cycleMessages = null;
+    }
+    setMessage(message) {
+        // When an explicit message is set externally (e.g. "Waiting for approval…"),
+        // pause the cycle so it doesn't immediately overwrite the override.
+        this.stopWordAnimation();
+        this.cycleMessages = null;
+        this.message = message;
+        this.updateDisplay();
+    }
+    resumeCycle() {
+        if (this.cycleMessages && !this.wordAnimId) {
+            this.startWordAnimation();
+        }
+    }
+    start() {
+        if (this.spinnerIntervalId)
+            clearInterval(this.spinnerIntervalId);
+        this.spinnerIntervalId = setInterval(() => {
             this.currentFrame = (this.currentFrame + 1) % this.frames.length;
             this.updateDisplay();
         }, 80);
+        // Shimmer ticks independently at ~40ms for smooth gradient movement
+        if (this.shimmerIntervalId)
+            clearInterval(this.shimmerIntervalId);
+        this.shimmerIntervalId = setInterval(() => {
+            this.shimmerTick++;
+            if (this.cycleMessages)
+                this.updateDisplay();
+        }, 40);
+        if (this.cycleMessages) {
+            this.startWordAnimation();
+        }
+        else {
+            this.updateDisplay();
+        }
     }
     stop() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
+        if (this.spinnerIntervalId) {
+            clearInterval(this.spinnerIntervalId);
+            this.spinnerIntervalId = null;
         }
+        if (this.shimmerIntervalId) {
+            clearInterval(this.shimmerIntervalId);
+            this.shimmerIntervalId = null;
+        }
+        this.stopWordAnimation();
     }
     dispose() {
         this.stop();
         this.ui = null;
     }
-    setMessage(message) {
-        this.message = message;
-        this.updateDisplay();
+    // ── word animation internals ──────────────────────────────────────────────
+    startWordAnimation() {
+        this.stopWordAnimation();
+        this.phase = "typing";
+        this.visibleChars = 0;
+        this.scheduleWordTick();
+    }
+    stopWordAnimation() {
+        if (this.wordAnimId) {
+            clearTimeout(this.wordAnimId);
+            this.wordAnimId = null;
+        }
+    }
+    scheduleWordTick() {
+        const word = this.currentWord();
+        if (this.phase === "typing") {
+            if (this.visibleChars < word.length) {
+                this.wordAnimId = setTimeout(() => {
+                    this.visibleChars++;
+                    this.updateDisplay();
+                    this.scheduleWordTick();
+                }, TYPING_SPEED);
+            }
+            else {
+                // Full word shown → hold
+                this.phase = "hold";
+                this.wordAnimId = setTimeout(() => {
+                    this.phase = "erase";
+                    this.scheduleWordTick();
+                }, HOLD_TIME);
+            }
+        }
+        else if (this.phase === "erase") {
+            if (this.visibleChars > 0) {
+                this.wordAnimId = setTimeout(() => {
+                    this.visibleChars--;
+                    this.updateDisplay();
+                    this.scheduleWordTick();
+                }, ERASE_SPEED);
+            }
+            else {
+                // Advance to next word
+                if (this.cycleMessages) {
+                    this.cycleIndex = (this.cycleIndex + 1) % this.cycleMessages.length;
+                    this.message = this.cycleMessages[this.cycleIndex];
+                }
+                this.phase = "typing";
+                this.scheduleWordTick();
+            }
+        }
+    }
+    currentWord() {
+        return this.message;
+    }
+    // ── rendering ─────────────────────────────────────────────────────────────
+    renderAnimatedWord() {
+        const word = this.currentWord();
+        const visible = word.slice(0, this.visibleChars);
+        if (!visible)
+            return DIM + " " + RESET;
+        // Each char gets a colour position that travels through the gradient.
+        // The "wave" offset shifts every shimmerTick for a moving shimmer.
+        let out = "";
+        for (let i = 0; i < visible.length; i++) {
+            const wave = (i / Math.max(word.length - 1, 1));
+            // Slow rightward drift
+            const drift = (this.shimmerTick * 0.025) % 1;
+            const t = ((wave + drift) % 1);
+            const [r, g, b] = lerpColor(...this.gradStart, ...this.gradEnd, t);
+            // Last char being typed gets a bright flash
+            const isEdge = (this.phase === "typing" && i === visible.length - 1);
+            const char = isEdge
+                ? `${BOLD}${rgb(255, 255, 255, visible[i])}`
+                : rgb(r, g, b, visible[i]);
+            out += char;
+        }
+        return out;
     }
     updateDisplay() {
         const frame = this.frames[this.currentFrame];
-        this.setText(`${this.spinnerColorFn(frame)} ${this.messageColorFn(this.message)}`);
-        if (this.ui) {
+        const spinner = this.spinnerColorFn(frame);
+        const text = this.cycleMessages
+            ? this.renderAnimatedWord()
+            : this._messageColorFn(this.message);
+        this.setText(`${spinner} ${text}`);
+        if (this.ui)
             this.ui.requestRender();
-        }
     }
 }
 //# sourceMappingURL=loader.js.map

package/packages/pi-tui/dist/components/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/components/loader.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,IAAI;IAM/B,YACC,EAAO,EACC,cAAuC,EACvC,cAAuC,EACvC,UAAkB,YAAY;QAEtC,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAJR,mBAAc,GAAd,cAAc,CAAyB;QACvC,mBAAc,GAAd,cAAc,CAAyB;QACvC,YAAO,GAAP,OAAO,CAAuB;QAT/B,WAAM,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5D,iBAAY,GAAG,CAAC,CAAC;QACjB,eAAU,GAA0B,IAAI,CAAC;QACzC,OAAE,GAAe,IAAI,CAAC;QAS7B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAED,MAAM,CAAC,KAAa;QACnB,OAAO,CAAC,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACrC,CAAC;IAED,KAAK;QACJ,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;YACjE,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IACR,CAAC;IAED,IAAI;QACH,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACxB,CAAC;IACF,CAAC;IAED,OAAO;QACN,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IAChB,CAAC;IAED,UAAU,CAAC,OAAe;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAEO,aAAa;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACnF,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC;IACF,CAAC;CACD","sourcesContent":["import type { TUI } from \"../tui.js\";\nimport { Text } from \"./text.js\";\n\n/**\n * Loader component that updates every 80ms with spinning animation\n */\nexport class Loader extends Text {\n\tprivate frames = [\"⠋\", \"⠙\", \"⠹\", \"⠸\", \"⠼\", \"⠴\", \"⠦\", \"⠧\", \"⠇\", \"⠏\"];\n\tprivate currentFrame = 0;\n\tprivate intervalId: NodeJS.Timeout | null = null;\n\tprivate ui: TUI | null = null;\n\n\tconstructor(\n\t\tui: TUI,\n\t\tprivate spinnerColorFn: (str: string) => string,\n\t\tprivate messageColorFn: (str: string) => string,\n\t\tprivate message: string = \"Loading...\",\n\t) {\n\t\tsuper(\"\", 1, 0);\n\t\tthis.ui = ui;\n\t\tthis.start();\n\t}\n\n\trender(width: number): string[] {\n\t\treturn [\"\", ...super.render(width)];\n\t}\n\n\tstart() {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t}\n\t\tthis.updateDisplay();\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tthis.currentFrame = (this.currentFrame + 1) % this.frames.length;\n\t\t\tthis.updateDisplay();\n\t\t}, 80);\n\t}\n\n\tstop() {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = null;\n\t\t}\n\t}\n\n\tdispose() {\n\t\tthis.stop();\n\t\tthis.ui = null;\n\t}\n\n\tsetMessage(message: string) {\n\t\tthis.message = message;\n\t\tthis.updateDisplay();\n\t}\n\n\tprivate updateDisplay() {\n\t\tconst frame = this.frames[this.currentFrame];\n\t\tthis.setText(`${this.spinnerColorFn(frame)} ${this.messageColorFn(this.message)}`);\n\t\tif (this.ui) {\n\t\t\tthis.ui.requestRender();\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/components/loader.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TUI } from \"../tui.js\";\nimport { Text } from \"./text.js\";\n\n// ─── ANSI helpers ─────────────────────────────────────────────────────────────\n\nconst ESC = \"\\x1b[\";\nconst RESET = \"\\x1b[0m\";\nconst DIM = \"\\x1b[2m\";\nconst BOLD = \"\\x1b[1m\";\n\n/** 24-bit foreground color */\nfunction rgb(r: number, g: number, b: number, s: string): string {\n\treturn `${ESC}38;2;${r};${g};${b}m${s}${RESET}`;\n}\n\n/** Interpolate between two RGB colors at position t ∈ [0,1] */\nfunction lerpColor(\n\tr1: number, g1: number, b1: number,\n\tr2: number, g2: number, b2: number,\n\tt: number,\n): [number, number, number] {\n\treturn [\n\t\tMath.round(r1 + (r2 - r1) * t),\n\t\tMath.round(g1 + (g2 - g1) * t),\n\t\tMath.round(b1 + (b2 - b1) * t),\n\t];\n}\n\n// ─── Timing constants ─────────────────────────────────────────────────────────\n\nconst TYPING_SPEED = 55;   // ms per character typed\nconst HOLD_TIME    = 5000; // ms to hold the full word\nconst ERASE_SPEED  = 35;   // ms per character erased\n\n// ─── Phase type ───────────────────────────────────────────────────────────────\n\ntype Phase = \"typing\" | \"hold\" | \"erase\";\n\n/**\n * Loader component — braille spinner + animated word cycling.\n *\n * Each word types in character by character (typewriter), holds with a moving\n * blue→cyan shimmer gradient, then erases right-to-left before the next word.\n */\nexport class Loader extends Text {\n\t// ── spinner ───────────────────────────────────────────────────────────────\n\tprivate frames = [\"⠋\", \"⠙\", \"⠹\", \"⠸\", \"⠼\", \"⠴\", \"⠦\", \"⠧\", \"⠇\", \"⠏\"];\n\tprivate currentFrame = 0;\n\tprivate spinnerIntervalId: NodeJS.Timeout | null = null;\n\tprivate ui: TUI | null = null;\n\n\t// ── message state ─────────────────────────────────────────────────────────\n\tprivate message: string = \"\";\n\n\t// ── word animation ────────────────────────────────────────────────────────\n\tprivate cycleMessages: string[] | null = null;\n\tprivate cycleIndex = 0;\n\tprivate phase: Phase = \"typing\";\n\tprivate visibleChars = 0;\n\tprivate wordAnimId: NodeJS.Timeout | null = null;\n\n\t// ── shimmer gradient: theme blueHigh → blueXhigh ─────────────────────────\n\tprivate readonly gradStart: [number, number, number] = [147, 197, 253]; // #93c5fd (blue-300)\n\tprivate readonly gradEnd:   [number, number, number] = [191, 219, 254]; // #bfdbfe (blue-200)\n\n\t// Shimmer ticks independently at ~40ms for smooth gradient movement\n\tprivate shimmerTick = 0;\n\tprivate shimmerIntervalId: NodeJS.Timeout | null = null;\n\n\tconstructor(\n\t\tui: TUI,\n\t\tprivate spinnerColorFn: (str: string) => string,\n\t\tprivate _messageColorFn: (str: string) => string,\n\t\tmessage: string = \"Loading…\",\n\t) {\n\t\tsuper(\"\", 1, 0);\n\t\tthis.ui = ui;\n\t\tthis.message = message;\n\t\tthis.start();\n\t}\n\n\trender(width: number): string[] {\n\t\treturn [\"\", ...super.render(width)];\n\t}\n\n\t// ── public API ────────────────────────────────────────────────────────────\n\n\tsetCycleMessages(messages: string[], _intervalMs = 3000) {\n\t\tthis.cycleMessages = [...messages];\n\t\tthis.cycleIndex = 0;\n\t\tthis.message = this.cycleMessages[0];\n\t\tif (this.spinnerIntervalId) {\n\t\t\tthis.startWordAnimation();\n\t\t}\n\t\tthis.updateDisplay();\n\t}\n\n\tclearCycleMessages() {\n\t\tthis.stopWordAnimation();\n\t\tthis.cycleMessages = null;\n\t}\n\n\tsetMessage(message: string) {\n\t\t// When an explicit message is set externally (e.g. \"Waiting for approval…\"),\n\t\t// pause the cycle so it doesn't immediately overwrite the override.\n\t\tthis.stopWordAnimation();\n\t\tthis.cycleMessages = null;\n\t\tthis.message = message;\n\t\tthis.updateDisplay();\n\t}\n\n\tresumeCycle() {\n\t\tif (this.cycleMessages && !this.wordAnimId) {\n\t\t\tthis.startWordAnimation();\n\t\t}\n\t}\n\n\tstart() {\n\t\tif (this.spinnerIntervalId) clearInterval(this.spinnerIntervalId);\n\t\tthis.spinnerIntervalId = setInterval(() => {\n\t\t\tthis.currentFrame = (this.currentFrame + 1) % this.frames.length;\n\t\t\tthis.updateDisplay();\n\t\t}, 80);\n\n\t\t// Shimmer ticks independently at ~40ms for smooth gradient movement\n\t\tif (this.shimmerIntervalId) clearInterval(this.shimmerIntervalId);\n\t\tthis.shimmerIntervalId = setInterval(() => {\n\t\t\tthis.shimmerTick++;\n\t\t\tif (this.cycleMessages) this.updateDisplay();\n\t\t}, 40);\n\n\t\tif (this.cycleMessages) {\n\t\t\tthis.startWordAnimation();\n\t\t} else {\n\t\t\tthis.updateDisplay();\n\t\t}\n\t}\n\n\tstop() {\n\t\tif (this.spinnerIntervalId) { clearInterval(this.spinnerIntervalId); this.spinnerIntervalId = null; }\n\t\tif (this.shimmerIntervalId) { clearInterval(this.shimmerIntervalId); this.shimmerIntervalId = null; }\n\t\tthis.stopWordAnimation();\n\t}\n\n\tdispose() {\n\t\tthis.stop();\n\t\tthis.ui = null;\n\t}\n\n\t// ── word animation internals ──────────────────────────────────────────────\n\n\tprivate startWordAnimation() {\n\t\tthis.stopWordAnimation();\n\t\tthis.phase = \"typing\";\n\t\tthis.visibleChars = 0;\n\t\tthis.scheduleWordTick();\n\t}\n\n\tprivate stopWordAnimation() {\n\t\tif (this.wordAnimId) { clearTimeout(this.wordAnimId); this.wordAnimId = null; }\n\t}\n\n\tprivate scheduleWordTick() {\n\t\tconst word = this.currentWord();\n\n\t\tif (this.phase === \"typing\") {\n\t\t\tif (this.visibleChars < word.length) {\n\t\t\t\tthis.wordAnimId = setTimeout(() => {\n\t\t\t\t\tthis.visibleChars++;\n\t\t\t\t\tthis.updateDisplay();\n\t\t\t\t\tthis.scheduleWordTick();\n\t\t\t\t}, TYPING_SPEED);\n\t\t\t} else {\n\t\t\t\t// Full word shown → hold\n\t\t\t\tthis.phase = \"hold\";\n\t\t\t\tthis.wordAnimId = setTimeout(() => {\n\t\t\t\t\tthis.phase = \"erase\";\n\t\t\t\t\tthis.scheduleWordTick();\n\t\t\t\t}, HOLD_TIME);\n\t\t\t}\n\t\t} else if (this.phase === \"erase\") {\n\t\t\tif (this.visibleChars > 0) {\n\t\t\t\tthis.wordAnimId = setTimeout(() => {\n\t\t\t\t\tthis.visibleChars--;\n\t\t\t\t\tthis.updateDisplay();\n\t\t\t\t\tthis.scheduleWordTick();\n\t\t\t\t}, ERASE_SPEED);\n\t\t\t} else {\n\t\t\t\t// Advance to next word\n\t\t\t\tif (this.cycleMessages) {\n\t\t\t\t\tthis.cycleIndex = (this.cycleIndex + 1) % this.cycleMessages.length;\n\t\t\t\t\tthis.message = this.cycleMessages[this.cycleIndex];\n\t\t\t\t}\n\t\t\t\tthis.phase = \"typing\";\n\t\t\t\tthis.scheduleWordTick();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate currentWord(): string {\n\t\treturn this.message;\n\t}\n\n\t// ── rendering ─────────────────────────────────────────────────────────────\n\n\tprivate renderAnimatedWord(): string {\n\t\tconst word = this.currentWord();\n\t\tconst visible = word.slice(0, this.visibleChars);\n\t\tif (!visible) return DIM + \" \" + RESET;\n\n\t\t// Each char gets a colour position that travels through the gradient.\n\t\t// The \"wave\" offset shifts every shimmerTick for a moving shimmer.\n\t\tlet out = \"\";\n\t\tfor (let i = 0; i < visible.length; i++) {\n\t\t\tconst wave = (i / Math.max(word.length - 1, 1));\n\t\t\t// Slow rightward drift\n\t\t\tconst drift = (this.shimmerTick * 0.025) % 1;\n\t\t\tconst t = ((wave + drift) % 1);\n\t\t\tconst [r, g, b] = lerpColor(...this.gradStart, ...this.gradEnd, t);\n\n\t\t\t// Last char being typed gets a bright flash\n\t\t\tconst isEdge = (this.phase === \"typing\" && i === visible.length - 1);\n\t\t\tconst char = isEdge\n\t\t\t\t? `${BOLD}${rgb(255, 255, 255, visible[i])}`\n\t\t\t\t: rgb(r, g, b, visible[i]);\n\t\t\tout += char;\n\t\t}\n\t\treturn out;\n\t}\n\n\tprivate updateDisplay() {\n\t\tconst frame = this.frames[this.currentFrame];\n\t\tconst spinner = this.spinnerColorFn(frame);\n\t\tconst text = this.cycleMessages\n\t\t\t? this.renderAnimatedWord()\n\t\t\t: this._messageColorFn(this.message);\n\t\tthis.setText(`${spinner} ${text}`);\n\t\tif (this.ui) this.ui.requestRender();\n\t}\n}\n"]}

package/packages/pi-tui/src/components/editor.ts

@@ -163,6 +163,10 @@ export class Editor implements Component, Focusable {
 	private pastes: Map<number, string> = new Map();
 	private pasteCounter: number = 0;
 
+	// Drag-and-drop image path markers (visual only; expanded back on submit)
+	private droppedImagePaths: Map<number, string> = new Map();
+	private droppedImageCounter: number = 0;
+
 	// Bracketed paste mode buffering
 	private pasteBuffer: string = "";
 	private isInPaste: boolean = false;
@@ -877,9 +881,51 @@ export class Editor implements Component, Focusable {
 			const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
 			result = result.replace(markerRegex, pasteContent);
 		}
+		return this.expandDroppedImageMarkers(result);
+	}
+
+	private expandDroppedImageMarkers(text: string): string {
+		let result = text;
+		for (const [imageId, imagePath] of this.droppedImagePaths) {
+			const markerRegex = new RegExp(`<Image${imageId}>`, "g");
+			result = result.replace(markerRegex, imagePath);
+		}
 		return result;
 	}
 
+	private extractDroppedImagePath(pastedText: string): string | null {
+		const trimmed = pastedText.trim();
+		if (!trimmed || /[\n\r\t]/.test(trimmed)) return null;
+
+		const unquoted =
+			(trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+			(trimmed.startsWith("'") && trimmed.endsWith("'"))
+				? trimmed.slice(1, -1)
+				: trimmed;
+
+		let maybePath = unquoted;
+		if (unquoted.startsWith("file://")) {
+			try {
+				maybePath = decodeURI(unquoted.replace(/^file:\/\//, ""));
+			} catch {
+				return null;
+			}
+		}
+		const normalizedPath = maybePath.replace(/\\ /g, " ");
+
+		if (!/\.(png|jpe?g|gif|webp|bmp|tiff?|svg|heic|heif|avif)$/i.test(normalizedPath)) {
+			return null;
+		}
+
+		if (!normalizedPath.startsWith("/") && !normalizedPath.startsWith("~/") && !normalizedPath.startsWith("./") && !normalizedPath.startsWith("../")) {
+			return null;
+		}
+
+		// Return the normalized filesystem path (not the raw trimmed input)
+		// This ensures file:// URIs are decoded and escaped spaces are normalized
+		return normalizedPath;
+	}
+
 	getLines(): string[] {
 		return [...this.state.lines];
 	}
@@ -1059,16 +1105,29 @@ export class Editor implements Component, Focusable {
 			.filter((char) => char === "\n" || char.charCodeAt(0) >= 32)
 			.join("");
 
-		// If pasting a file path (starts with /, ~, or .) and the character before
-		// the cursor is a word character, prepend a space for better readability
-		if (/^[/~.]/.test(filteredText)) {
+		// Check if we need a leading space for readability
+		// This applies to file:// URIs, absolute paths (~, /), or relative paths (., ..)
+		let needsLeadingSpace = false;
+		if (/^(file:\/\/|[/~.])/.test(filteredText)) {
 			const currentLine = this.state.lines[this.state.cursorLine] || "";
 			const charBeforeCursor = this.state.cursorCol > 0 ? currentLine[this.state.cursorCol - 1] : "";
 			if (charBeforeCursor && /\w/.test(charBeforeCursor)) {
+				needsLeadingSpace = true;
 				filteredText = ` ${filteredText}`;
 			}
 		}
 
+		const droppedImagePath = this.extractDroppedImagePath(filteredText);
+		if (droppedImagePath) {
+			this.droppedImageCounter++;
+			const imageId = this.droppedImageCounter;
+			this.droppedImagePaths.set(imageId, droppedImagePath);
+			// Preserve leading space for readability (e.g., "foo" -> "foo <Image1>" -> "foo /tmp/image.png")
+			const toInsert = needsLeadingSpace ? ` <Image${imageId}>` : `<Image${imageId}>`;
+			this.insertTextAtCursorInternal(toInsert);
+			return;
+		}
+
 		// Split into lines to check for large paste
 		const pastedLines = filteredText.split("\n");
 
@@ -1138,10 +1197,13 @@ export class Editor implements Component, Focusable {
 			const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
 			result = result.replace(markerRegex, pasteContent);
 		}
+		result = this.expandDroppedImageMarkers(result);
 
 		this.state = { lines: [""], cursorLine: 0, cursorCol: 0 };
 		this.pastes.clear();
 		this.pasteCounter = 0;
+		this.droppedImagePaths.clear();
+		this.droppedImageCounter = 0;
 		this.historyIndex = -1;
 		this.scrollOffset = 0;
 		this.undoStack.clear();