Detect image events

packages/core/src/examples/index.ts

@@ -62,6 +62,7 @@ import * as extmarksDemo from "./extmarks-demo"
 import * as opacityExample from "./opacity-example"
 import * as scrollboxOverlayHitTest from "./scrollbox-overlay-hit-test"
 import * as scrollboxMouseTest from "./scrollbox-mouse-test"
+import * as pasteDemo from "./paste-demo"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 
 interface Example {
@@ -313,6 +314,12 @@ const examples: Example[] = [
     run: inputExample.run,
     destroy: inputExample.destroy,
   },
+  {
+    name: "Paste Demo",
+    description: "Paste into inputs and inspect metadata including binary detection",
+    run: pasteDemo.run,
+    destroy: pasteDemo.destroy,
+  },
   {
     name: "Terminal Palette Demo",
     description: "Terminal color palette detection and visualization - fetch and display all 256 terminal colors",

packages/core/src/examples/paste-demo.ts

@@ -0,0 +1,164 @@
+import {
+  BoxRenderable,
+  InputRenderable,
+  TextareaRenderable,
+  TextRenderable,
+  bold,
+  createCliRenderer,
+  fg,
+  t,
+  type CliRenderer,
+} from "../index"
+import { KeyEvent, PasteEvent } from "../lib/KeyHandler"
+import { setupCommonDemoKeys } from "./lib/standalone-keys"
+
+let renderer: CliRenderer | null = null
+let container: BoxRenderable | null = null
+let singleLineInput: InputRenderable | null = null
+let multilineInput: TextareaRenderable | null = null
+let logDisplay: TextRenderable | null = null
+let instructions: TextRenderable | null = null
+let keypressHandler: ((event: KeyEvent) => void) | null = null
+let pasteHandler: ((event: PasteEvent) => void) | null = null
+
+const logEntries: string[] = []
+
+function formatHexHead(buffer: Buffer): string {
+  if (buffer.length === 0) return "<empty>"
+  const hex = buffer.subarray(0, 16).toString("hex")
+  return hex.match(/.{1,2}/g)?.join(" ") ?? hex
+}
+
+function formatTextPreview(text?: string): string {
+  if (!text) return "<binary>"
+  const normalized = text.replace(/\r/g, "").replace(/\n/g, " ⏎ ")
+  return normalized.length > 80 ? `${normalized.slice(0, 80)}…` : normalized
+}
+
+function updateLog(event: PasteEvent): void {
+  const entry = `type=${event.fileType ?? "text"} len=${event.data.length} head=${formatHexHead(event.data)} preview=${formatTextPreview(event.text)}`
+
+  logEntries.unshift(entry)
+  logEntries.splice(12)
+
+  if (logDisplay) {
+    logDisplay.content = t`${logEntries.join("\n")}`
+  }
+
+  if (!event.fileType && event.text) {
+    if (singleLineInput) {
+      singleLineInput.value = event.text
+    }
+
+    if (multilineInput) {
+      multilineInput.value = event.text
+    }
+  }
+}
+
+function createLayout(rendererInstance: CliRenderer): void {
+  container = new BoxRenderable(rendererInstance, {
+    id: "paste-demo-root",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    padding: 2,
+    gap: 1,
+  })
+
+  instructions = new TextRenderable(rendererInstance, {
+    id: "paste-demo-instructions",
+    width: 100,
+    height: 4,
+    content: t`${bold("Paste Demo")}
+- Paste into the single-line input or the textarea
+- Logs show file type, byte length, first 16 bytes, and text preview
+- Press q to quit, Ctrl+C to exit`,
+  })
+
+  singleLineInput = new InputRenderable(rendererInstance, {
+    id: "paste-demo-input",
+    width: 70,
+    height: 3,
+    placeholder: "Paste here (single line)",
+  })
+
+  multilineInput = new TextareaRenderable(rendererInstance, {
+    id: "paste-demo-textarea",
+    width: 70,
+    height: 6,
+    placeholder: "Or paste here (textarea)",
+  })
+
+  logDisplay = new TextRenderable(rendererInstance, {
+    id: "paste-demo-log",
+    width: 100,
+    height: 12,
+    fg: fg("#A0FFA0"),
+    content: t`Waiting for paste events…`,
+  })
+
+  container.add(instructions)
+  container.add(singleLineInput)
+  container.add(multilineInput)
+  container.add(logDisplay)
+
+  rendererInstance.root.add(container)
+}
+
+export function run(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#0e1116")
+
+  createLayout(rendererInstance)
+
+  keypressHandler = (event: KeyEvent) => {
+    if (event.name === "q") {
+      renderer?.destroy()
+      return
+    }
+  }
+
+  pasteHandler = (event: PasteEvent) => {
+    updateLog(event)
+  }
+
+  renderer.keyInput.on("keypress", keypressHandler)
+  renderer.keyInput.on("paste", pasteHandler)
+  renderer.requestRender()
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  rendererInstance.clearFrameCallbacks()
+
+  if (keypressHandler) {
+    rendererInstance.keyInput.off("keypress", keypressHandler)
+    keypressHandler = null
+  }
+
+  if (pasteHandler) {
+    rendererInstance.keyInput.off("paste", pasteHandler)
+    pasteHandler = null
+  }
+
+  if (container) {
+    rendererInstance.root.remove("paste-demo-root")
+    container = null
+  }
+
+  singleLineInput = null
+  multilineInput = null
+  logDisplay = null
+  instructions = null
+  logEntries.length = 0
+}
+
+if (import.meta.main) {
+  const rendererInstance = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(rendererInstance)
+  setupCommonDemoKeys(rendererInstance)
+  rendererInstance.start()
+}

packages/core/src/lib/KeyHandler.paste-binary.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { InternalKeyHandler } from "./KeyHandler"
+
+test("processPaste emits file type and buffer for image data", () => {
+  const handler = new InternalKeyHandler()
+  const pngBytes = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00])
+
+  let received: any
+  handler.on("paste", (event) => {
+    received = event
+  })
+
+  handler.processPaste(pngBytes)
+
+  expect(Buffer.isBuffer(received?.data)).toBe(true)
+  expect(received?.data?.equals?.(pngBytes)).toBe(true)
+  expect(received?.fileType).toBe("image/png")
+  expect(received?.text).toBeUndefined()
+})
+
+test("processPaste preserves text when no file type is detected", () => {
+  const handler = new InternalKeyHandler()
+
+  let receivedText: string | undefined
+  handler.on("paste", (event) => {
+    receivedText = event.text
+  })
+
+  handler.processPaste("plain text")
+
+  expect(receivedText).toBe("plain text")
+})

packages/core/src/lib/KeyHandler.test.ts

@@ -81,6 +81,24 @@ test("KeyHandler - processPaste handles content directly", () => {
   expect(receivedPaste).toBe("chunk1chunk2chunk3")
 })
 
+test("KeyHandler - detects magic bytes for binary paste", () => {
+  const handler = createKeyHandler()
+
+  const pngBytes = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00])
+
+  let receivedPaste: any
+  handler.on("paste", (event) => {
+    receivedPaste = event
+  })
+
+  ;(handler as any).processPaste(pngBytes)
+
+  expect(Buffer.isBuffer(receivedPaste?.data)).toBe(true)
+  expect(receivedPaste?.data?.equals?.(pngBytes)).toBe(true)
+  expect(receivedPaste?.fileType).toBe("image/png")
+  expect(receivedPaste?.text).toBeUndefined()
+})
+
 test("KeyHandler - strips ANSI codes in paste", () => {
   const handler = createKeyHandler()
 

packages/core/src/lib/KeyHandler.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from "events"
 import { parseKeypress, type KeyEventType, type ParsedKey } from "./parse.keypress"
-import { ANSI } from "../ansi"
+import type { PasteChunk } from "./stdin-buffer"
+import { detectPasteFileType } from "./paste-detect"
 
 export class KeyEvent implements ParsedKey {
   name: string
@@ -61,13 +62,23 @@ export class KeyEvent implements ParsedKey {
   }
 }
 
+export type PasteEventInit = {
+  data: Buffer
+  text?: string
+  fileType?: string
+}
+
 export class PasteEvent {
-  text: string
+  data: Buffer
+  text?: string
+  fileType?: string
   private _defaultPrevented: boolean = false
   private _propagationStopped: boolean = false
 
-  constructor(text: string) {
-    this.text = text
+  constructor(init: PasteEventInit) {
+    this.data = init.data
+    this.text = init.text
+    this.fileType = init.fileType
   }
 
   get defaultPrevented(): boolean {
@@ -128,14 +139,48 @@ export class KeyHandler extends EventEmitter<KeyHandlerEventMap> {
     return true
   }
 
-  public processPaste(data: string): void {
+  public processPaste(data: string | Buffer | PasteChunk): void {
     try {
-      const cleanedData = Bun.stripANSI(data)
-      this.emit("paste", new PasteEvent(cleanedData))
+      const { buffer, text } = this.normalizePasteInput(data)
+      const fileType = detectPasteFileType(buffer)
+      const cleanedText = fileType
+        ? undefined
+        : text !== undefined
+          ? Bun.stripANSI(text)
+          : this.getCleanedText(buffer, fileType)
+
+      this.emit(
+        "paste",
+        new PasteEvent({
+          data: buffer,
+          text: cleanedText,
+          fileType,
+        }),
+      )
     } catch (error) {
       console.error(`[KeyHandler] Error processing paste:`, error)
     }
   }
+
+  private normalizePasteInput(data: string | Buffer | PasteChunk): { buffer: Buffer; text?: string } {
+    if (typeof data === "string") {
+      return { buffer: Buffer.from(data), text: data }
+    }
+
+    if (Buffer.isBuffer(data)) {
+      return { buffer: data }
+    }
+
+    return { buffer: data.data, text: data.text }
+  }
+
+  private getCleanedText(buffer: Buffer, fileType?: string): string | undefined {
+    if (fileType) {
+      return undefined
+    }
+
+    return Bun.stripANSI(buffer.toString())
+  }
 }
 
 /**

packages/core/src/lib/paste-detect.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test"
+import { detectPasteFileType } from "./paste-detect"
+
+test("detectPasteFileType identifies common image signatures", () => {
+  expect(detectPasteFileType(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]))).toBe("image/png")
+  expect(detectPasteFileType(Buffer.from([0xff, 0xd8, 0xff, 0x00]))).toBe("image/jpeg")
+  expect(detectPasteFileType(Buffer.from("GIF89a"))).toBe("image/gif")
+  expect(detectPasteFileType(Buffer.from("RIFF1234WEBP"))).toBe("image/webp")
+  expect(detectPasteFileType(Buffer.from([0x42, 0x4d, 0x00, 0x00]))).toBe("image/bmp")
+  expect(detectPasteFileType(Buffer.from([0x00, 0x00, 0x01, 0x00, 0x00]))).toBe("image/x-icon")
+  expect(detectPasteFileType(Buffer.from('<?xml version="1.0"?><svg></svg>'))).toBe("image/svg+xml")
+})
+
+test("detectPasteFileType returns undefined for non-image data", () => {
+  expect(detectPasteFileType(Buffer.from("plain text"))).toBeUndefined()
+})

packages/core/src/lib/paste-detect.ts

@@ -0,0 +1,39 @@
+const PNG_SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+const JPEG_SIGNATURE = Buffer.from([0xff, 0xd8, 0xff])
+const GIF_SIGNATURE = Buffer.from([0x47, 0x49, 0x46, 0x38])
+const WEBP_RIFF = Buffer.from("RIFF")
+const WEBP_WEBP = Buffer.from("WEBP")
+const BMP_SIGNATURE = Buffer.from([0x42, 0x4d])
+const ICO_SIGNATURE = Buffer.from([0x00, 0x00, 0x01, 0x00])
+
+function matchesSignature(buffer: Buffer, signature: Buffer, offset: number = 0): boolean {
+  if (buffer.length < signature.length + offset) return false
+  for (let i = 0; i < signature.length; i++) {
+    if (buffer[i + offset] !== signature[i]) {
+      return false
+    }
+  }
+  return true
+}
+
+function detectSvg(buffer: Buffer): boolean {
+  if (buffer.length === 0) return false
+  const sample = buffer.slice(0, 512).toString("utf8").trimStart().toLowerCase()
+  return sample.startsWith("<svg") || sample.startsWith("<?xml")
+}
+
+export function detectPasteFileType(buffer: Buffer): string | undefined {
+  if (matchesSignature(buffer, PNG_SIGNATURE)) return "image/png"
+  if (matchesSignature(buffer, JPEG_SIGNATURE)) return "image/jpeg"
+  if (matchesSignature(buffer, GIF_SIGNATURE)) return "image/gif"
+  if (matchesSignature(buffer, BMP_SIGNATURE)) return "image/bmp"
+  if (matchesSignature(buffer, ICO_SIGNATURE)) return "image/x-icon"
+
+  if (matchesSignature(buffer, WEBP_RIFF) && matchesSignature(buffer, WEBP_WEBP, 8)) {
+    return "image/webp"
+  }
+
+  if (detectSvg(buffer)) return "image/svg+xml"
+
+  return undefined
+}