silvery 0.3.0 → 0.4.1

package/examples/interactive/outline.tsx

@@ -1,171 +0,0 @@
-/**
- * Outline vs Border Comparison
- *
- * Side-by-side demonstration of outlineStyle vs borderStyle.
- * Borders push content inward (adding to layout dimensions), while
- * outlines overlap the content edge without affecting layout.
- *
- * Features:
- * - Left panel: Box with borderStyle — content area is smaller
- * - Right panel: Box with outlineStyle — content starts at edge
- * - Toggle between styles with Tab
- * - Live content dimensions via useContentRect()
- *
- * Run: bun vendor/silvery/examples/interactive/outline.tsx
- */
-
-import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  Kbd,
-  Muted,
-  useInput,
-  useApp,
-  useContentRect,
-  createTerm,
-  type Key,
-} from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Outline vs Border",
-  description: "Side-by-side comparison showing outline (no layout impact) vs border",
-  features: ["outlineStyle", "borderStyle", "useContentRect()", "layout dimensions"],
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-type StyleVariant = "single" | "double" | "round" | "bold"
-
-const STYLES: StyleVariant[] = ["single", "double", "round", "bold"]
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function ContentWithSize({ label }: { label: string }): JSX.Element {
-  const { width, height } = useContentRect()
-
-  return (
-    <Box flexDirection="column">
-      <Text bold>{label}</Text>
-      <Text>
-        Content area:{" "}
-        <Text color="$success" bold>
-          {width}
-        </Text>
-        x
-        <Text color="$success" bold>
-          {height}
-        </Text>
-      </Text>
-      <Text dim>The quick brown fox</Text>
-      <Text dim>jumps over the lazy</Text>
-      <Text dim>dog on a sunny day.</Text>
-    </Box>
-  )
-}
-
-function BorderPanel({ style, highlight }: { style: StyleVariant; highlight: boolean }): JSX.Element {
-  return (
-    <Box flexDirection="column" flexGrow={1} gap={1}>
-      <Text bold color={highlight ? "$primary" : undefined}>
-        borderStyle="{style}"
-      </Text>
-      <Box borderStyle={style} borderColor={highlight ? "$primary" : "$border"} width={30} height={9}>
-        <ContentWithSize label="Border Box" />
-      </Box>
-      <Muted>Border adds to layout.</Muted>
-      <Muted>Content is pushed inward.</Muted>
-    </Box>
-  )
-}
-
-function OutlinePanel({ style, highlight }: { style: StyleVariant; highlight: boolean }): JSX.Element {
-  return (
-    <Box flexDirection="column" flexGrow={1} gap={1}>
-      <Text bold color={highlight ? "$warning" : undefined}>
-        outlineStyle="{style}"
-      </Text>
-      <Box outlineStyle={style} outlineColor={highlight ? "$warning" : "$border"} width={30} height={9}>
-        <ContentWithSize label="Outline Box" />
-      </Box>
-      <Muted>Outline overlaps content.</Muted>
-      <Muted>No layout impact at all.</Muted>
-    </Box>
-  )
-}
-
-export function OutlineDemo(): JSX.Element {
-  const { exit } = useApp()
-  const [styleIndex, setStyleIndex] = useState(0)
-  const [focusedSide, setFocusedSide] = useState<"border" | "outline">("border")
-
-  const currentStyle = STYLES[styleIndex]!
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || key.escape) {
-      exit()
-      return
-    }
-
-    // Toggle focus between panels
-    if (key.tab || input === "\t") {
-      setFocusedSide((prev) => (prev === "border" ? "outline" : "border"))
-    }
-
-    // Cycle through border/outline styles
-    if (key.rightArrow || input === "l") {
-      setStyleIndex((prev) => (prev + 1) % STYLES.length)
-    }
-    if (key.leftArrow || input === "h") {
-      setStyleIndex((prev) => (prev - 1 + STYLES.length) % STYLES.length)
-    }
-  })
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <Box gap={1}>
-        <Text bold>Style:</Text>
-        {STYLES.map((s, i) => (
-          <Text key={s} color={i === styleIndex ? "$primary" : "$muted"} bold={i === styleIndex}>
-            {i === styleIndex ? `[${s}]` : s}
-          </Text>
-        ))}
-      </Box>
-
-      <Box flexDirection="row" gap={2}>
-        <BorderPanel style={currentStyle} highlight={focusedSide === "border"} />
-        <OutlinePanel style={currentStyle} highlight={focusedSide === "outline"} />
-      </Box>
-
-      <Muted>
-        {" "}
-        <Kbd>Tab</Kbd> toggle focus <Kbd>h/l</Kbd> change style <Kbd>Esc/q</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="Tab toggle  h/l style  Esc/q quit">
-      <OutlineDemo />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}

package/examples/interactive/paste-demo.tsx

@@ -1,198 +0,0 @@
-/**
- * Bracketed Paste Demo
- *
- * Demonstrates bracketed paste mode — when text is pasted into the terminal,
- * it arrives as a single event rather than individual keystrokes. This prevents
- * pasted text from being interpreted as commands.
- *
- * Features:
- * - Shows paste mode status (always enabled with render())
- * - Displays pasted text as a single block event
- * - Shows character count and line count of pasted text
- * - Maintains a history of paste events
- *
- * Run: bun vendor/silvery/examples/interactive/paste-demo.tsx
- */
-
-import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H1,
-  Small,
-  Kbd,
-  Muted,
-  Lead,
-  useInput,
-  useApp,
-  createTerm,
-  type Key,
-} from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Bracketed Paste",
-  description: "Receive pasted text as a single event via bracketed paste mode",
-  features: ["onPaste", "useInput", "bracketed paste mode"],
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface PasteEvent {
-  id: number
-  text: string
-  charCount: number
-  lineCount: number
-  timestamp: string
-}
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function PasteIndicator(): JSX.Element {
-  return (
-    <Box gap={1} paddingX={1}>
-      <Text color="$success" bold>
-        {"●"}
-      </Text>
-      <Text>Paste mode:</Text>
-      <Text color="$success" bold>
-        ENABLED
-      </Text>
-      <Muted>(bracketed paste is automatic with render())</Muted>
-    </Box>
-  )
-}
-
-function PasteEventCard({ event, isLatest }: { event: PasteEvent; isLatest: boolean }): JSX.Element {
-  const preview = event.text.length > 60 ? event.text.slice(0, 57) + "..." : event.text
-  const displayText = preview.replace(/\n/g, "\\n").replace(/\t/g, "\\t")
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor={isLatest ? "$primary" : "$border"}
-      paddingX={1}
-      marginBottom={0}
-    >
-      <Box justifyContent="space-between">
-        <H1 color={isLatest ? "$primary" : "white"}>Paste #{event.id}</H1>
-        <Small>{event.timestamp}</Small>
-      </Box>
-      <Box gap={2}>
-        <Small>
-          {event.charCount} char{event.charCount !== 1 ? "s" : ""}
-        </Small>
-        <Small>
-          {event.lineCount} line{event.lineCount !== 1 ? "s" : ""}
-        </Small>
-      </Box>
-      <Box marginTop={1}>
-        <Text color="yellow">{displayText}</Text>
-      </Box>
-    </Box>
-  )
-}
-
-function EmptyState(): JSX.Element {
-  return (
-    <Box flexDirection="column" padding={2} alignItems="center">
-      <Muted>No paste events yet.</Muted>
-      <Lead>Try pasting some text from your clipboard!</Lead>
-      <Lead>(Cmd+V on macOS, Ctrl+Shift+V on Linux)</Lead>
-    </Box>
-  )
-}
-
-export function PasteDemo(): JSX.Element {
-  const { exit } = useApp()
-  const [pasteHistory, setPasteHistory] = useState<PasteEvent[]>([])
-  const [nextId, setNextId] = useState(1)
-
-  useInput(
-    (input: string, key: Key) => {
-      if (input === "q" || key.escape) {
-        exit()
-        return
-      }
-
-      // Clear history
-      if (input === "x") {
-        setPasteHistory([])
-        setNextId(1)
-      }
-    },
-    {
-      onPaste: (text: string) => {
-        const now = new Date()
-        const timestamp = `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`
-
-        const event: PasteEvent = {
-          id: nextId,
-          text,
-          charCount: text.length,
-          lineCount: text.split("\n").length,
-          timestamp,
-        }
-
-        setPasteHistory((prev) => [event, ...prev].slice(0, 10))
-        setNextId((prev) => prev + 1)
-      },
-    },
-  )
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <PasteIndicator />
-
-      <Box flexDirection="column" borderStyle="round" borderColor="$primary" paddingX={1}>
-        <Box marginBottom={1}>
-          <H1>Paste History</H1>
-          <Small>
-            {" "}
-            — {pasteHistory.length} event{pasteHistory.length !== 1 ? "s" : ""}
-          </Small>
-        </Box>
-
-        {pasteHistory.length === 0 ? (
-          <EmptyState />
-        ) : (
-          <Box flexDirection="column" overflow="scroll" height={12} gap={1}>
-            {pasteHistory.map((event, index) => (
-              <PasteEventCard key={event.id} event={event} isLatest={index === 0} />
-            ))}
-          </Box>
-        )}
-      </Box>
-
-      <Muted>
-        {" "}
-        <Kbd>Paste text</Kbd> to see events <Kbd>x</Kbd> clear <Kbd>Esc/q</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="Paste text to see events  x clear  Esc/q quit">
-      <PasteDemo />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}

package/examples/interactive/scroll.tsx

@@ -1,77 +0,0 @@
-/**
- * Scroll Example
- *
- * Demonstrates overflow="scroll" with keyboard navigation.
- */
-
-import React, { useState } from "react"
-import { Box, Text, Kbd, Muted, render, useInput, useApp, createTerm, type Key } from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Scroll",
-  description: 'Native overflow="scroll" with automatic scroll-to-selected',
-  features: ['overflow="scroll"', "scrollTo", "useInput"],
-}
-
-// Generate sample items
-const items = Array.from({ length: 50 }, (_, i) => ({
-  id: i,
-  title: `Item ${i + 1}`,
-  description: `This is the description for item number ${i + 1}`,
-}))
-
-export function ScrollExample() {
-  const { exit } = useApp()
-  const [selectedIndex, setSelectedIndex] = useState(0)
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || key.escape) {
-      exit()
-    }
-    if (key.upArrow || input === "k") {
-      setSelectedIndex((prev) => Math.max(0, prev - 1))
-    }
-    if (key.downArrow || input === "j") {
-      setSelectedIndex((prev) => Math.min(items.length - 1, prev + 1))
-    }
-  })
-
-  return (
-    <Box flexDirection="column" width={60} height={20}>
-      <Box
-        flexGrow={1}
-        flexDirection="column"
-        borderStyle="round"
-        borderColor="$primary"
-        overflow="scroll"
-        scrollTo={selectedIndex}
-        height={10}
-      >
-        {items.map((item, index) => (
-          <Box key={item.id} paddingX={1} backgroundColor={index === selectedIndex ? "$primary" : undefined}>
-            <Text color={index === selectedIndex ? "black" : "white"} bold={index === selectedIndex}>
-              {item.title}
-            </Text>
-          </Box>
-        ))}
-      </Box>
-
-      <Muted>
-        {" "}
-        <Kbd>j/k</Kbd> navigate <Kbd>Esc/q</Kbd> quit | Selected: {selectedIndex + 1}/{items.length}
-      </Muted>
-    </Box>
-  )
-}
-
-// Run the app
-if (import.meta.main) {
-  using term = createTerm()
-  await render(
-    <ExampleBanner meta={meta} controls="j/k navigate  Esc/q quit">
-      <ScrollExample />
-    </ExampleBanner>,
-    term,
-  )
-}

package/examples/interactive/search-filter.tsx

@@ -1,240 +0,0 @@
-/**
- * Search Filter Example
- *
- * Demonstrates React concurrent features for responsive typing:
- * - useTransition for low-priority state updates
- * - useDeferredValue for deferred filtering
- * - Typing remains responsive even with heavy filtering
- */
-
-import React, { useState, useDeferredValue, useTransition } from "react"
-import { render, Box, Text, Kbd, Muted, Strong, Lead, useInput, useApp, createTerm, type Key } from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Search Filter",
-  description: "useTransition + useDeferredValue for responsive concurrent search",
-  features: ["useDeferredValue", "useTransition", "useInput"],
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface Item {
-  id: number
-  name: string
-  category: string
-  tags: string[]
-}
-
-// ============================================================================
-// Data
-// ============================================================================
-
-const items: Item[] = [
-  {
-    id: 1,
-    name: "React Hooks Guide",
-    category: "docs",
-    tags: ["react", "hooks", "tutorial"],
-  },
-  {
-    id: 2,
-    name: "TypeScript Patterns",
-    category: "docs",
-    tags: ["typescript", "patterns"],
-  },
-  {
-    id: 3,
-    name: "Build Configuration",
-    category: "config",
-    tags: ["webpack", "vite", "build"],
-  },
-  {
-    id: 4,
-    name: "Testing Best Practices",
-    category: "docs",
-    tags: ["testing", "jest", "vitest"],
-  },
-  {
-    id: 5,
-    name: "API Documentation",
-    category: "docs",
-    tags: ["api", "rest", "graphql"],
-  },
-  {
-    id: 6,
-    name: "Database Schema",
-    category: "config",
-    tags: ["database", "sql", "migration"],
-  },
-  {
-    id: 7,
-    name: "Authentication Flow",
-    category: "docs",
-    tags: ["auth", "security", "jwt"],
-  },
-  {
-    id: 8,
-    name: "CI/CD Pipeline",
-    category: "config",
-    tags: ["ci", "deployment", "github"],
-  },
-  {
-    id: 9,
-    name: "Performance Tuning",
-    category: "docs",
-    tags: ["performance", "optimization"],
-  },
-  {
-    id: 10,
-    name: "Error Handling",
-    category: "docs",
-    tags: ["errors", "debugging", "logging"],
-  },
-  {
-    id: 11,
-    name: "State Management",
-    category: "docs",
-    tags: ["state", "redux", "zustand"],
-  },
-  {
-    id: 12,
-    name: "CSS Architecture",
-    category: "docs",
-    tags: ["css", "tailwind", "styled"],
-  },
-  {
-    id: 13,
-    name: "Security Guidelines",
-    category: "docs",
-    tags: ["security", "owasp", "audit"],
-  },
-  {
-    id: 14,
-    name: "Deployment Scripts",
-    category: "config",
-    tags: ["deploy", "docker", "k8s"],
-  },
-  {
-    id: 15,
-    name: "Monitoring Setup",
-    category: "config",
-    tags: ["monitoring", "metrics", "logs"],
-  },
-]
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function SearchInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  return (
-    <Box>
-      <Strong color="$primary">Search: </Strong>
-      <Text>{value}</Text>
-      <Text dim>|</Text>
-    </Box>
-  )
-}
-
-function FilteredList({ query, isPending }: { query: string; isPending: boolean }) {
-  // Simulate expensive filtering (in real app this might be fuzzy search)
-  const filtered = items.filter((item) => {
-    const searchLower = query.toLowerCase()
-    return (
-      item.name.toLowerCase().includes(searchLower) ||
-      item.category.toLowerCase().includes(searchLower) ||
-      item.tags.some((tag) => tag.toLowerCase().includes(searchLower))
-    )
-  })
-
-  return (
-    <Box flexDirection="column" marginTop={1}>
-      <Box marginBottom={1}>
-        <Muted>
-          {filtered.length} results
-          {isPending && " (filtering...)"}
-        </Muted>
-      </Box>
-      {filtered.map((item) => (
-        <Box key={item.id} marginBottom={1}>
-          <Text bold>{item.name}</Text>
-          <Text dim> [{item.category}]</Text>
-          <Text color="gray"> {item.tags.join(", ")}</Text>
-        </Box>
-      ))}
-      {filtered.length === 0 && <Lead>No matches found</Lead>}
-    </Box>
-  )
-}
-
-export function SearchApp(): JSX.Element {
-  const { exit } = useApp()
-  const [query, setQuery] = useState("")
-
-  // useDeferredValue: The filtered list uses a deferred version of the query
-  // This keeps typing responsive while the list catches up
-  const deferredQuery = useDeferredValue(query)
-
-  // useTransition: Mark filtering as low-priority (optional, shows pending state)
-  const [isPending, startTransition] = useTransition()
-
-  useInput((input: string, key: Key) => {
-    if (key.escape) {
-      exit()
-      return
-    }
-
-    if (key.backspace || key.delete) {
-      // Backspace: remove last character
-      startTransition(() => {
-        setQuery((prev) => prev.slice(0, -1))
-      })
-      return
-    }
-
-    // Add printable characters
-    if (input && !key.ctrl && !key.meta) {
-      startTransition(() => {
-        setQuery((prev) => prev + input)
-      })
-    }
-  })
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <SearchInput value={query} onChange={setQuery} />
-
-      {/* List uses deferredQuery so typing stays responsive */}
-      <Box flexGrow={1}>
-        <FilteredList query={deferredQuery} isPending={isPending} />
-      </Box>
-
-      <Muted>
-        {" "}
-        <Kbd>type</Kbd> to search <Kbd>Esc/q</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="type to search  Esc quit">
-      <SearchApp />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}