silvery 0.0.1 → 0.3.0

package/examples/inline/scrollback.tsx

@@ -0,0 +1,185 @@
+/**
+ * Scrollback Mode — REPL
+ *
+ * Interactive expression evaluator demonstrating useScrollback + VirtualList virtualized.
+ * Completed results freeze into terminal scrollback; the active prompt stays at bottom.
+ *
+ * Controls:
+ *   Type expression + Enter  - Evaluate
+ *   q (when input empty)     - Quit
+ */
+
+import React, { useState, useCallback } from "react"
+import { Box, Text, Divider, VirtualList, useInput, type Key } from "../../src/index.js"
+import { run, useExit } from "@silvery/term/runtime"
+import { useScrollback } from "../../src/hooks/useScrollback.js"
+import { ExampleBanner, type ExampleMeta } from "../_banner.js"
+
+export const meta: ExampleMeta = {
+  name: "Scrollback",
+  description: "REPL with useScrollback + VirtualList virtualized for terminal scrollback",
+  features: ["useScrollback()", "VirtualList virtualized", "inline mode"],
+}
+
+// =============================================================================
+// Data
+// =============================================================================
+
+interface Result {
+  id: number
+  expr: string
+  value: string
+  frozen: boolean
+}
+
+let nextId = 0
+
+function evaluate(expr: string): string {
+  try {
+    // eslint-disable-next-line no-eval
+    return String(eval(expr))
+  } catch (e: unknown) {
+    return `Error: ${e instanceof Error ? e.message : String(e)}`
+  }
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function Repl() {
+  const exit = useExit()
+  const [results, setResults] = useState<Result[]>([])
+  const [input, setInput] = useState("")
+  const [cursor, setCursor] = useState(0)
+
+  // Push frozen results to terminal scrollback
+  const frozenCount = useScrollback(results, {
+    frozen: (r) => r.frozen,
+    render: (r) => `$ ${r.expr}\n→ ${r.value}`,
+  })
+
+  const submit = useCallback(() => {
+    const expr = input.trim()
+    if (!expr) return
+
+    const value = evaluate(expr)
+    const id = nextId++
+
+    // Mark all existing results as frozen, add new one unfrozen
+    setResults((prev) => [...prev.map((r) => ({ ...r, frozen: true })), { id, expr, value, frozen: false }])
+    setInput("")
+    setCursor(0)
+  }, [input])
+
+  useInput((ch: string, key: Key) => {
+    if (key.return) {
+      submit()
+      return
+    }
+    if (key.escape || (ch === "q" && input === "")) {
+      exit()
+      return
+    }
+    if (key.backspace) {
+      if (cursor > 0) {
+        setInput((v) => v.slice(0, cursor - 1) + v.slice(cursor))
+        setCursor((c) => c - 1)
+      }
+      return
+    }
+    if (key.leftArrow) {
+      setCursor((c) => Math.max(0, c - 1))
+      return
+    }
+    if (key.rightArrow) {
+      setCursor((c) => Math.min(input.length, c + 1))
+      return
+    }
+    // Ctrl+A: beginning of line
+    if (key.ctrl && ch === "a") {
+      setCursor(0)
+      return
+    }
+    // Ctrl+E: end of line
+    if (key.ctrl && ch === "e") {
+      setCursor(input.length)
+      return
+    }
+    // Ctrl+U: clear line
+    if (key.ctrl && ch === "u") {
+      setInput("")
+      setCursor(0)
+      return
+    }
+    if (ch >= " ") {
+      setInput((v) => v.slice(0, cursor) + ch + v.slice(cursor))
+      setCursor((c) => c + 1)
+    }
+  })
+
+  const activeCount = results.length - frozenCount
+  const beforeCursor = input.slice(0, cursor)
+  const atCursor = input[cursor] ?? " "
+  const afterCursor = input.slice(cursor + 1)
+
+  return (
+    <Box flexDirection="column">
+      {/* Active (non-virtualized) results via VirtualList */}
+      {activeCount > 0 && (
+        <VirtualList
+          items={results}
+          virtualized={(r) => r.frozen}
+          height={activeCount * 2}
+          itemHeight={2}
+          scrollTo={0}
+          renderItem={(r) => (
+            <Box key={r.id} flexDirection="column">
+              <Text>
+                <Text color="gray">{"$ "}</Text>
+                <Text>{r.expr}</Text>
+              </Text>
+              <Text>
+                <Text color="cyan">{"→ "}</Text>
+                <Text>{r.value}</Text>
+              </Text>
+            </Box>
+          )}
+        />
+      )}
+
+      {/* Separator */}
+      <Divider />
+
+      {/* Input prompt */}
+      <Text>
+        <Text color="yellow">{"› "}</Text>
+        <Text>{beforeCursor}</Text>
+        <Text inverse>{atCursor}</Text>
+        <Text>{afterCursor}</Text>
+      </Text>
+
+      {/* Status */}
+      <Text dim>
+        {results.length} result{results.length !== 1 ? "s" : ""} | Esc/q to quit
+      </Text>
+    </Box>
+  )
+}
+
+// =============================================================================
+// Main
+// =============================================================================
+
+async function main() {
+  await run(
+    <ExampleBanner meta={meta} controls="Type expr + Enter  Esc/q quit">
+      <Repl />
+    </ExampleBanner>,
+    { mode: "inline" },
+  )
+}
+
+if (import.meta.main) {
+  main().catch(console.error)
+}

package/examples/interactive/_input-debug.tsx

@@ -0,0 +1,110 @@
+/**
+ * Input Debug Tool
+ *
+ * Minimal diagnostic to find where keypresses are lost.
+ * Shows every event received by useInput + TextArea side by side.
+ *
+ * Run: bun vendor/silvery/examples/interactive/_input-debug.tsx
+ */
+
+import React, { useState, useRef } from "react"
+import { render, Box, Text, TextArea, useInput, useApp, createTerm, type Key } from "../../src/index.js"
+
+function InputDebug(): JSX.Element {
+  const { exit } = useApp()
+
+  // Track raw useInput events
+  const [rawEvents, setRawEvents] = useState<string[]>([])
+  const rawCountRef = useRef(0)
+
+  // Track TextArea value
+  const [textValue, setTextValue] = useState("")
+  const textChangeCountRef = useRef(0)
+
+  // Raw useInput handler — logs EVERY event
+  useInput((input: string, key: Key) => {
+    if (key.escape) {
+      exit()
+      return
+    }
+    rawCountRef.current++
+    const desc = describeKey(input, key)
+    setRawEvents((prev) => [...prev.slice(-15), `#${rawCountRef.current} ${desc}`])
+  })
+
+  // TextArea onChange handler
+  function handleChange(value: string) {
+    textChangeCountRef.current++
+    setTextValue(value)
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold color="cyan">
+        Input Pipeline Diagnostic
+      </Text>
+      <Text dim>Type slowly (1 char/2sec). Compare left (raw events) vs right (TextArea value).</Text>
+      <Text dim>Press Esc to quit.</Text>
+      <Box height={1} />
+
+      <Box gap={4}>
+        {/* Left: Raw useInput events */}
+        <Box flexDirection="column" width={40}>
+          <Text bold color="yellow">
+            useInput events: {rawCountRef.current}
+          </Text>
+          {rawEvents.map((e, i) => (
+            <Text key={i} dimColor={i < rawEvents.length - 1}>
+              {e}
+            </Text>
+          ))}
+        </Box>
+
+        {/* Right: TextArea */}
+        <Box flexDirection="column" width={40}>
+          <Text bold color="green">
+            TextArea value ({textValue.length} chars, {textChangeCountRef.current} changes):
+          </Text>
+          <Box borderStyle="single" borderColor="green">
+            <Box paddingX={1}>
+              <TextArea value={textValue} onChange={handleChange} height={4} placeholder="Type here..." />
+            </Box>
+          </Box>
+          <Box marginTop={1}>
+            <Text>Value: {JSON.stringify(textValue)}</Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+function describeKey(input: string, key: Key): string {
+  const parts: string[] = []
+  if (key.ctrl) parts.push("Ctrl")
+  if (key.meta) parts.push("Meta")
+  if (key.shift) parts.push("Shift")
+
+  if (key.return) parts.push("Enter")
+  else if (key.escape) parts.push("Esc")
+  else if (key.backspace) parts.push("BS")
+  else if (key.delete) parts.push("Del")
+  else if (key.upArrow) parts.push("Up")
+  else if (key.downArrow) parts.push("Down")
+  else if (key.leftArrow) parts.push("Left")
+  else if (key.rightArrow) parts.push("Right")
+  else if (key.tab) parts.push("Tab")
+  else if (input.length === 1 && input >= " ") parts.push(`'${input}'`)
+  else if (input) parts.push(`raw:${JSON.stringify(input)}`)
+  else parts.push("(empty)")
+
+  return parts.join("+")
+}
+
+async function main() {
+  using term = createTerm()
+  const { waitUntilExit } = await render(<InputDebug />, term)
+  await waitUntilExit()
+}
+
+main().catch(console.error)

package/examples/interactive/_stdin-test.ts

@@ -0,0 +1,71 @@
+#!/usr/bin/env bun
+/**
+ * Bare stdin test — no React, no silvery.
+ *
+ * Tests whether Bun's stdin "readable" events deliver all keypresses.
+ * Run in a real terminal (not through a tool): bun vendor/silvery/examples/interactive/_stdin-test.ts
+ *
+ * Type characters slowly. Each keypress should appear immediately.
+ * Press Ctrl+C to exit.
+ */
+
+const fs = await import("node:fs")
+
+const log = fs.createWriteStream("/tmp/stdin-test.log", { flags: "w" })
+function logMsg(msg: string) {
+  const ts = new Date().toISOString().slice(11, 23)
+  log.write(`[${ts}] ${msg}\n`)
+  process.stdout.write(msg + "\n")
+}
+
+logMsg("=== Bare stdin readable test ===")
+logMsg("Type characters slowly. Press Ctrl+C to exit.")
+logMsg("")
+
+process.stdin.setEncoding("utf8")
+process.stdin.setRawMode(true)
+process.stdin.ref()
+
+let count = 0
+
+function handleReadable() {
+  const chunk = process.stdin.read() as string | null
+  if (chunk === null) {
+    logMsg(`  readable event but stdin.read() returned null`)
+    return
+  }
+
+  for (let i = 0; i < chunk.length; i++) {
+    count++
+    const ch = chunk[i]!
+    const code = ch.charCodeAt(0)
+
+    if (code === 3) {
+      // Ctrl+C
+      logMsg(`\n=== Total: ${count} keypresses ===`)
+      log.end()
+      process.stdin.setRawMode(false)
+      process.stdin.unref()
+      process.exit(0)
+    }
+
+    if (code >= 32 && code < 127) {
+      logMsg(`#${count} char='${ch}' code=${code} chunkLen=${chunk.length}`)
+    } else {
+      logMsg(
+        `#${count} code=0x${code.toString(16).padStart(2, "0")} chunkLen=${chunk.length} raw=${JSON.stringify(chunk.slice(i))}`,
+      )
+    }
+  }
+
+  // Try reading again in case more data
+  const more = process.stdin.read() as string | null
+  if (more !== null) {
+    logMsg(`  EXTRA data in buffer: ${JSON.stringify(more)}`)
+  }
+}
+
+process.stdin.on("readable", handleReadable)
+
+logMsg("Listening for stdin readable events...")
+logMsg("")

package/examples/interactive/_textarea-bare.tsx

@@ -0,0 +1,45 @@
+/**
+ * Bare TextArea Test — single useInput hook, no parent useInput.
+ *
+ * Tests whether the bug is from two useInput hooks competing.
+ * Run: bun vendor/silvery/examples/interactive/_textarea-bare.tsx
+ *
+ * If chars are STILL eaten → bug is in TextArea or input pipeline
+ * If chars are NOT eaten → bug is from two useInput hooks
+ */
+
+import React, { useState } from "react"
+import { render, Box, Text, TextArea, createTerm } from "../../src/index.js"
+
+function BareTextArea(): JSX.Element {
+  const [value, setValue] = useState("")
+
+  // NO parent useInput — only TextArea's internal one
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold color="cyan">
+        Bare TextArea (single useInput hook)
+      </Text>
+      <Text dim>Type slowly. Ctrl+C to exit.</Text>
+      <Box height={1} />
+
+      <Box borderStyle="single" borderColor="cyan" paddingX={1}>
+        <TextArea value={value} onChange={setValue} height={4} placeholder="Type here..." />
+      </Box>
+
+      <Box marginTop={1}>
+        <Text>
+          Value ({value.length} chars): {JSON.stringify(value)}
+        </Text>
+      </Box>
+    </Box>
+  )
+}
+
+async function main() {
+  using term = createTerm()
+  const { waitUntilExit } = await render(<BareTextArea />, term)
+  await waitUntilExit()
+}
+
+main().catch(console.error)