@silvery/examples 0.17.3 → 0.17.4

package/apps/outline.tsx

@@ -1,160 +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 useBoxRect()
- *
- * Run: bun vendor/silvery/examples/apps/outline.tsx
- */
-
-import React, { useState } from "react"
-import { render, Box, Text, Kbd, Muted, useInput, useApp, useBoxRect, createTerm, type Key } from "silvery"
-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", "useBoxRect()", "layout dimensions"],
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-type StyleVariant = "single" | "double" | "round" | "bold"
-
-const STYLES: StyleVariant[] = ["single", "double", "round", "bold"]
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function ContentWithSize({ label }: { label: string }) {
-  const { width, height } = useBoxRect()
-
-  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 }) {
-  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 }) {
-  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() {
-  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
-// ============================================================================
-
-export 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) {
-  await main()
-}

package/apps/panes/index.tsx

@@ -1,203 +0,0 @@
-/**
- * Panes — tmux-style split pane demo.
- *
- * Two AI chat panes running independently, Tab to switch focus, Esc to quit.
- * SearchProvider with Ctrl+F bindings for app-global search.
- *
- * Run: bun examples/apps/panes/index.tsx [--fast]
- */
-
-import React, { useState, useEffect, useMemo } from "react"
-import { Box, Text, ListView } from "silvery"
-import { SearchProvider, SearchBar, useSearch } from "@silvery/ag-react"
-import { run, useInput, type Key } from "silvery/runtime"
-import type { ExampleMeta } from "../../_banner.js"
-import { SCRIPT } from "../aichat/script.js"
-import type { ScriptEntry } from "../aichat/types.js"
-import type { Exchange } from "../aichat/types.js"
-import { ExchangeItem } from "../aichat/components.js"
-// ListItemMeta type from ListView — inline to avoid tsconfig path issues
-interface ListItemMeta {
-  isCursor: boolean
-}
-
-export const meta: ExampleMeta = {
-  name: "Panes",
-  description: "tmux-style split panes — ListView + SearchProvider + focus switching",
-  demo: true,
-  features: ["ListView", "SearchProvider", "split panes", "Tab focus"],
-}
-
-// ============================================================================
-// Auto-advancing chat content
-// ============================================================================
-
-function usePaneContent(script: ScriptEntry[], fastMode: boolean): Exchange[] {
-  const [exchanges, setExchanges] = useState<Exchange[]>([])
-  const [idx, setIdx] = useState(0)
-
-  useEffect(() => {
-    if (idx >= script.length) return
-    const delay = fastMode ? 150 : 800 + Math.random() * 1200
-    const timer = setTimeout(() => {
-      const entry = script[idx]!
-      setExchanges((prev) => [...prev, { ...entry, id: idx }])
-      setIdx((i) => i + 1)
-    }, delay)
-    return () => clearTimeout(timer)
-  }, [idx, script, fastMode])
-
-  return exchanges
-}
-
-// ============================================================================
-// Chat pane
-// ============================================================================
-
-function ChatPane({
-  script,
-  fastMode,
-  height,
-  active,
-  surfaceId,
-}: {
-  script: ScriptEntry[]
-  fastMode: boolean
-  height: number
-  active: boolean
-  surfaceId: string
-}) {
-  const exchanges = usePaneContent(script, fastMode)
-
-  if (exchanges.length === 0) {
-    return (
-      <Box paddingX={1}>
-        <Text color="$muted">Waiting...</Text>
-      </Box>
-    )
-  }
-
-  return (
-    <ListView
-      items={exchanges}
-      height={height}
-      getKey={(ex: Exchange) => ex.id}
-      scrollTo={exchanges.length - 1}
-      active={active}
-      surfaceId={surfaceId}
-      cache={{
-        mode: "virtual",
-        isCacheable: (_ex: Exchange, idx: number) => idx < exchanges.length - 1,
-      }}
-      search={{ getText: (ex: Exchange) => ex.content }}
-      renderItem={(exchange: Exchange, _index: number, _meta: ListItemMeta) => (
-        <ExchangeItem
-          exchange={exchange}
-          streamPhase="done"
-          revealFraction={1}
-          pulse={false}
-          isLatest={false}
-          isFirstInGroup={true}
-          isLastInGroup={true}
-        />
-      )}
-    />
-  )
-}
-
-// ============================================================================
-// Main app
-// ============================================================================
-
-function PanesApp({ fastMode, rows }: { fastMode: boolean; rows: number }) {
-  const [focusedPane, setFocusedPane] = useState<"left" | "right">("left")
-  const search = useSearch()
-
-  const midpoint = Math.ceil(SCRIPT.length / 2)
-  const leftScript = useMemo(() => SCRIPT.slice(0, midpoint), [midpoint])
-  const rightScript = useMemo(() => SCRIPT.slice(midpoint), [midpoint])
-
-  useInput((input: string, key: Key) => {
-    // Don't exit while search is active — Escape closes search first
-    if (key.escape && !search.isActive) return "exit"
-    if (key.tab && !search.isActive) {
-      setFocusedPane((p) => (p === "left" ? "right" : "left"))
-    }
-  })
-
-  // Pane content height: rows - border(2) - title(1) - status(1) = rows - 4
-  const listHeight = Math.max(5, rows - 4)
-
-  return (
-    <Box flexDirection="column" height={rows}>
-      <Box flexDirection="row" flexGrow={1}>
-        <Box
-          width="50%"
-          flexDirection="column"
-          borderStyle="single"
-          borderColor={focusedPane === "left" ? "$primary" : "$border"}
-          overflow="hidden"
-        >
-          <Box paddingX={1}>
-            <Text color={focusedPane === "left" ? "$primary" : "$border"} bold={focusedPane === "left"}>
-              Agent A
-            </Text>
-          </Box>
-          <ChatPane
-            script={leftScript}
-            fastMode={fastMode}
-            height={listHeight}
-            active={focusedPane === "left"}
-            surfaceId="left"
-          />
-        </Box>
-        <Box
-          width="50%"
-          flexDirection="column"
-          borderStyle="single"
-          borderColor={focusedPane === "right" ? "$primary" : "$border"}
-          overflow="hidden"
-        >
-          <Box paddingX={1}>
-            <Text color={focusedPane === "right" ? "$primary" : "$border"} bold={focusedPane === "right"}>
-              Agent B
-            </Text>
-          </Box>
-          <ChatPane
-            script={rightScript}
-            fastMode={fastMode}
-            height={listHeight}
-            active={focusedPane === "right"}
-            surfaceId="right"
-          />
-        </Box>
-      </Box>
-      <SearchBar />
-      <Box paddingX={1}>
-        <Text color="$muted">Tab: switch pane · Ctrl+F: search · Esc: quit</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Entry
-// ============================================================================
-
-export async function main() {
-  const args = process.argv.slice(2)
-  const fastMode = args.includes("--fast")
-  const rows = process.stdout.rows ?? 40
-
-  using handle = await run(
-    <SearchProvider>
-      <PanesApp fastMode={fastMode} rows={rows} />
-    </SearchProvider>,
-    { mode: "fullscreen", kitty: false, textSizing: false },
-  )
-  await handle.waitUntilExit()
-}
-
-if (import.meta.main) {
-  await main()
-}

package/apps/paste-demo.tsx

@@ -1,185 +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/apps/paste-demo.tsx
- */
-
-import React, { useState } from "react"
-import { render, Box, Text, H1, Small, Kbd, Muted, Lead, useInput, useApp, createTerm, type Key } from "silvery"
-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() {
-  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 }) {
-  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" : undefined}>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="$warning">{displayText}</Text>
-      </Box>
-    </Box>
-  )
-}
-
-function EmptyState() {
-  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() {
-  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
-// ============================================================================
-
-export 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) {
-  await main()
-}

package/apps/scroll.tsx

@@ -1,80 +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 "silvery"
-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" padding={1} 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 ? "$primary-fg" : undefined} 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>
-  )
-}
-
-export async function main() {
-  using term = createTerm()
-  await render(
-    <ExampleBanner meta={meta} controls="j/k navigate  Esc/q quit">
-      <ScrollExample />
-    </ExampleBanner>,
-    term,
-  )
-}
-
-if (import.meta.main) {
-  await main()
-}