silvery 0.3.0 → 0.4.0

package/examples/inline/scrollback.tsx

@@ -1,185 +0,0 @@
-/**
- * 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

@@ -1,110 +0,0 @@
-/**
- * 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

@@ -1,71 +0,0 @@
-#!/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

@@ -1,45 +0,0 @@
-/**
- * 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)