silvery 0.3.0 → 0.4.1

package/examples/interactive/textarea.tsx

@@ -1,103 +0,0 @@
-/**
- * TextArea Example
- *
- * A simple note editor demonstrating:
- * - Multi-line text input with word wrapping
- * - Cursor movement (arrow keys, Home/End, Ctrl+A/E)
- * - Kill operations (Ctrl+K, Ctrl+U)
- * - Scrolling within the textarea (PageUp/PageDown)
- * - Submit with Ctrl+Enter
- */
-
-import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H1,
-  Strong,
-  Muted,
-  TextArea,
-  useInput,
-  useApp,
-  createTerm,
-  type Key,
-} from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "TextArea",
-  description: "Multi-line text input with word wrap, scrolling, and kill operations",
-  features: ["TextArea", "useContentRect()", "Ctrl+Enter submit"],
-}
-
-export function NoteEditor(): JSX.Element {
-  const { exit } = useApp()
-  const [notes, setNotes] = useState<string[]>([])
-  const [value, setValue] = useState("")
-
-  useInput((input: string, key: Key) => {
-    if (key.escape) {
-      exit()
-    }
-  })
-
-  function handleSubmit(text: string) {
-    if (text.trim()) {
-      setNotes((prev) => [...prev, text.trim()])
-      setValue("")
-    }
-  }
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      {notes.length > 0 && (
-        <Box flexDirection="column" marginBottom={1}>
-          {notes.map((note, i) => (
-            <Box key={i} borderStyle="round" borderColor="gray" paddingX={1}>
-              <Text>
-                <Strong color="$success">#{i + 1}</Strong> {note}
-              </Text>
-            </Box>
-          ))}
-        </Box>
-      )}
-
-      <Box borderStyle="single" borderColor="$primary" flexDirection="column">
-        <Box paddingX={1}>
-          <H1>New Note</H1>
-        </Box>
-        <Box paddingX={1}>
-          <TextArea
-            value={value}
-            onChange={setValue}
-            onSubmit={handleSubmit}
-            height={6}
-            placeholder="Start typing..."
-          />
-        </Box>
-      </Box>
-
-      <Box marginTop={1}>
-        <Muted>
-          {notes.length} note{notes.length !== 1 ? "s" : ""} submitted
-        </Muted>
-      </Box>
-    </Box>
-  )
-}
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="Ctrl+Enter submit  Esc quit">
-      <NoteEditor />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}

package/examples/interactive/theme.tsx

@@ -1,336 +0,0 @@
-/**
- * Theme Explorer Example
- *
- * Browse all built-in palettes with live color preview.
- * Left panel: scrollable list with mini color swatches.
- * Right panel: live preview wrapped in ThemeProvider showing
- * semantic tokens, ANSI 16-color table, surfaces, sample UI, and typography.
- */
-
-import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  Kbd,
-  Muted,
-  H1,
-  H2,
-  H3,
-  Strong,
-  Small,
-  Lead,
-  Code,
-  P,
-  ProgressBar,
-  Badge,
-  Divider,
-  ThemeProvider,
-  useInput,
-  useApp,
-  createTerm,
-  type Key,
-} from "../../src/index.js"
-import { builtinPalettes, deriveTheme, type ColorPalette } from "@silvery/theme"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Theme Explorer",
-  description: "Browse built-in palettes with live color preview",
-  demo: true,
-  features: ["ThemeProvider", "builtinThemes", "semantic tokens", "ANSI colors"],
-}
-
-// ============================================================================
-// Data
-// ============================================================================
-
-const paletteEntries = Object.entries(builtinPalettes).map(([name, palette]) => ({
-  name,
-  palette,
-  theme: deriveTheme(palette),
-}))
-
-// ============================================================================
-// Components
-// ============================================================================
-
-/** Small color swatch: 2 colored block chars */
-function Swatch({ color }: { color: string }): JSX.Element {
-  return <Text color={color}>{"██"}</Text>
-}
-
-/** Mini swatch: 4 colored blocks showing palette character */
-function MiniSwatch({ palette }: { palette: ColorPalette }): JSX.Element {
-  return (
-    <Text>
-      <Text color={palette.red}>{"█"}</Text>
-      <Text color={palette.green}>{"█"}</Text>
-      <Text color={palette.blue}>{"█"}</Text>
-      <Text color={palette.yellow}>{"█"}</Text>
-    </Text>
-  )
-}
-
-/** Left panel: theme list with color swatches */
-function ThemeList({ selectedIndex }: { selectedIndex: number }): JSX.Element {
-  return (
-    <Box flexDirection="column" width={30} borderStyle="single" overflow="scroll" scrollTo={selectedIndex}>
-      <Box paddingX={1}>
-        <Text bold color="$primary">
-          Palettes
-        </Text>
-        <Muted> ({paletteEntries.length})</Muted>
-      </Box>
-      <Divider />
-      <Box flexDirection="column" paddingX={1}>
-        {paletteEntries.map((entry, i) => {
-          const isSelected = i === selectedIndex
-          const p = entry.palette
-          return (
-            <Box key={entry.name}>
-              <Text inverse={isSelected}>
-                {isSelected ? "▸" : " "} {entry.name.padEnd(20)}
-              </Text>
-              <Text> </Text>
-              <MiniSwatch palette={p} />
-            </Box>
-          )
-        })}
-      </Box>
-    </Box>
-  )
-}
-
-/** Semantic token showcase row */
-function SemanticTokens(): JSX.Element {
-  const tokens: Array<{ name: string; token: string; icon: string }> = [
-    { name: "primary", token: "$primary", icon: "●" },
-    { name: "success", token: "$success", icon: "✓" },
-    { name: "warning", token: "$warning", icon: "⚠" },
-    { name: "error", token: "$error", icon: "✗" },
-    { name: "info", token: "$info", icon: "ℹ" },
-    { name: "accent", token: "$accent", icon: "◆" },
-    { name: "muted", token: "$muted", icon: "○" },
-    { name: "link", token: "$link", icon: "→" },
-  ]
-
-  return (
-    <Box flexDirection="column">
-      <H2>Semantic Tokens</H2>
-      <Box flexDirection="row" flexWrap="wrap" gap={1} paddingX={1}>
-        {tokens.map((t) => (
-          <Text key={t.name} color={t.token}>
-            {t.icon} {t.name}
-          </Text>
-        ))}
-      </Box>
-    </Box>
-  )
-}
-
-/** ANSI 16-color table */
-function AnsiColorTable({ palette }: { palette: ColorPalette }): JSX.Element {
-  const normal = [
-    palette.black,
-    palette.red,
-    palette.green,
-    palette.yellow,
-    palette.blue,
-    palette.magenta,
-    palette.cyan,
-    palette.white,
-  ]
-  const bright = [
-    palette.brightBlack,
-    palette.brightRed,
-    palette.brightGreen,
-    palette.brightYellow,
-    palette.brightBlue,
-    palette.brightMagenta,
-    palette.brightCyan,
-    palette.brightWhite,
-  ]
-
-  return (
-    <Box flexDirection="column">
-      <H2>ANSI 16 Colors</H2>
-      <Box paddingX={1} gap={1}>
-        <Box>
-          <Muted>0-7 </Muted>
-          {normal.map((c, i) => (
-            <Swatch key={i} color={c} />
-          ))}
-        </Box>
-      </Box>
-      <Box paddingX={1} gap={1}>
-        <Box>
-          <Muted>8-15 </Muted>
-          {bright.map((c, i) => (
-            <Swatch key={i} color={c} />
-          ))}
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-/** Sample UI elements using theme tokens */
-function SampleUI(): JSX.Element {
-  return (
-    <Box flexDirection="column">
-      <H2>Sample UI</H2>
-      <Box flexDirection="column" paddingX={1} gap={1}>
-        <Box borderStyle="round" paddingX={1} flexDirection="column">
-          <Text bold color="$primary">
-            Dialog Title
-          </Text>
-          <Text>This is body text using default colors.</Text>
-          <Box gap={2}>
-            <Badge variant="success">Passed</Badge>
-            <Badge variant="error">Failed</Badge>
-            <Badge variant="warning">Pending</Badge>
-          </Box>
-        </Box>
-        <Box gap={1}>
-          <Muted>Progress:</Muted>
-          <Box width={20}>
-            <ProgressBar value={0.65} />
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-/** Typography samples */
-function TypographySamples(): JSX.Element {
-  return (
-    <Box flexDirection="column">
-      <H2>Typography</H2>
-      <Box flexDirection="column" paddingX={1}>
-        <H1>Heading 1</H1>
-        <H2>Heading 2</H2>
-        <H3>Heading 3</H3>
-        <Strong>Strong text</Strong>
-        <Lead>Lead text (italic)</Lead>
-        <P>Normal paragraph text</P>
-        <Muted>Muted text</Muted>
-        <Small>Small text</Small>
-        <Code>inline code</Code>
-      </Box>
-    </Box>
-  )
-}
-
-/** Surface pairs showcase */
-function SurfacePairs(): JSX.Element {
-  return (
-    <Box flexDirection="column">
-      <H2>Surfaces</H2>
-      <Box flexDirection="column" paddingX={1} gap={0}>
-        <Box gap={1}>
-          <Box backgroundColor="$surfacebg" paddingX={1}>
-            <Text color="$surface">surface</Text>
-          </Box>
-          <Box backgroundColor="$inversebg" paddingX={1}>
-            <Text color="$inverse">inverse</Text>
-          </Box>
-          <Box backgroundColor="$mutedbg" paddingX={1}>
-            <Text>muted bg</Text>
-          </Box>
-        </Box>
-        <Box gap={1}>
-          <Box backgroundColor="$primary" paddingX={1}>
-            <Text color="$primaryfg">primary</Text>
-          </Box>
-          <Box backgroundColor="$error" paddingX={1}>
-            <Text color="$errorfg">error</Text>
-          </Box>
-          <Box backgroundColor="$success" paddingX={1}>
-            <Text color="$successfg">success</Text>
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-/** Right panel: live preview wrapped in selected ThemeProvider */
-function ThemePreview({ entry }: { entry: (typeof paletteEntries)[number] }): JSX.Element {
-  return (
-    <ThemeProvider theme={entry.theme}>
-      <Box flexDirection="column" flexGrow={1} borderStyle="single" overflow="scroll" backgroundColor="$bg">
-        <Box paddingX={1} gap={1}>
-          <H1>{entry.name}</H1>
-          <Muted>{entry.palette.dark === false ? "(light)" : "(dark)"}</Muted>
-        </Box>
-        <Divider />
-        <Box flexDirection="column" gap={1}>
-          <SemanticTokens />
-          <AnsiColorTable palette={entry.palette} />
-          <SurfacePairs />
-          <SampleUI />
-          <TypographySamples />
-        </Box>
-      </Box>
-    </ThemeProvider>
-  )
-}
-
-function HelpBar(): JSX.Element {
-  return (
-    <Muted>
-      {" "}
-      <Kbd>j/k</Kbd> navigate <Kbd>Esc/q</Kbd> quit
-    </Muted>
-  )
-}
-
-export function ThemeExplorer(): JSX.Element {
-  const { exit } = useApp()
-  const [selectedIndex, setSelectedIndex] = useState(0)
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || key.escape) {
-      exit()
-    }
-    if (key.downArrow || input === "j") {
-      setSelectedIndex((i) => Math.min(i + 1, paletteEntries.length - 1))
-    }
-    if (key.upArrow || input === "k") {
-      setSelectedIndex((i) => Math.max(i - 1, 0))
-    }
-  })
-
-  const entry = paletteEntries[selectedIndex]!
-
-  return (
-    <Box flexDirection="column" height="100%" padding={1}>
-      <Box flexGrow={1} flexDirection="row" gap={1} overflow="hidden">
-        <ThemeList selectedIndex={selectedIndex} />
-        <ThemePreview entry={entry} />
-      </Box>
-      <HelpBar />
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="j/k navigate  Esc/q quit">
-      <ThemeExplorer />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}

package/examples/interactive/transform.tsx

@@ -1,256 +0,0 @@
-/**
- * Transform Component Demo
- *
- * Shows the Transform component for text post-processing. Each transform
- * applies a string transformation to every line of rendered text output.
- *
- * Features:
- * - Multiple transforms: uppercase, leetspeak, reverse, ROT13, etc.
- * - Cycle through transforms with j/k
- * - Shows original and transformed text side by side
- * - Uses Transform from silvery components
- *
- * Run: bun vendor/silvery/examples/interactive/transform.tsx
- */
-
-import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H1,
-  Small,
-  Kbd,
-  Muted,
-  Transform,
-  useInput,
-  useApp,
-  createTerm,
-  type Key,
-} from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Transform",
-  description: "Text post-processing with the Transform component",
-  features: ["Transform", "transform function", "side-by-side comparison"],
-}
-
-// ============================================================================
-// Transforms
-// ============================================================================
-
-const leetMap: Record<string, string> = {
-  a: "4",
-  e: "3",
-  i: "1",
-  o: "0",
-  s: "5",
-  t: "7",
-  A: "4",
-  E: "3",
-  I: "1",
-  O: "0",
-  S: "5",
-  T: "7",
-}
-
-const rot13Char = (c: string): string => {
-  const code = c.charCodeAt(0)
-  if (code >= 65 && code <= 90) return String.fromCharCode(((code - 65 + 13) % 26) + 65)
-  if (code >= 97 && code <= 122) return String.fromCharCode(((code - 97 + 13) % 26) + 97)
-  return c
-}
-
-interface TransformDef {
-  name: string
-  description: string
-  fn: (line: string) => string
-}
-
-const transforms: TransformDef[] = [
-  {
-    name: "Uppercase",
-    description: "Convert all characters to upper case",
-    fn: (s: string) => s.toUpperCase(),
-  },
-  {
-    name: "Lowercase",
-    description: "Convert all characters to lower case",
-    fn: (s: string) => s.toLowerCase(),
-  },
-  {
-    name: "Leetspeak",
-    description: "Replace letters with numbers (a=4, e=3, i=1, ...)",
-    fn: (s: string) =>
-      s
-        .split("")
-        .map((c) => leetMap[c] ?? c)
-        .join(""),
-  },
-  {
-    name: "Reverse",
-    description: "Reverse each line of text",
-    fn: (s: string) => s.split("").reverse().join(""),
-  },
-  {
-    name: "ROT13",
-    description: "Caesar cipher — shift each letter by 13 positions",
-    fn: (s: string) => s.split("").map(rot13Char).join(""),
-  },
-  {
-    name: "Alternating Case",
-    description: "Alternate between upper and lower case characters",
-    fn: (s: string) =>
-      s
-        .split("")
-        .map((c, i) => (i % 2 === 0 ? c.toUpperCase() : c.toLowerCase()))
-        .join(""),
-  },
-  {
-    name: "Spaces to Dots",
-    description: "Replace spaces with middle dots for visibility",
-    fn: (s: string) => s.replace(/ /g, "·"),
-  },
-]
-
-// ============================================================================
-// Sample Text
-// ============================================================================
-
-const sampleLines = [
-  "The quick brown fox jumps",
-  "over the lazy dog on a",
-  "beautiful sunny afternoon.",
-  "",
-  "Pack my box with five dozen",
-  "liquor jugs and enjoy them.",
-]
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function TransformSelector({
-  current,
-  transforms: items,
-}: {
-  current: number
-  transforms: TransformDef[]
-}): JSX.Element {
-  return (
-    <Box flexDirection="column" overflow="scroll" scrollTo={current} height={7}>
-      {items.map((t, index) => {
-        const isSelected = index === current
-        return (
-          <Box key={t.name} paddingX={1}>
-            <Text
-              color={isSelected ? "$bg" : undefined}
-              backgroundColor={isSelected ? "$primary" : undefined}
-              bold={isSelected}
-            >
-              {isSelected ? " > " : "   "}
-              {t.name}
-            </Text>
-          </Box>
-        )
-      })}
-    </Box>
-  )
-}
-
-function TextPanel({
-  title,
-  titleColor,
-  children,
-}: {
-  title: string
-  titleColor: string
-  children: React.ReactNode
-}): JSX.Element {
-  return (
-    <Box flexDirection="column" flexGrow={1} borderStyle="round" borderColor="$border" paddingX={1}>
-      <Box marginBottom={1}>
-        <H1 color={titleColor}>{title}</H1>
-      </Box>
-      {children}
-    </Box>
-  )
-}
-
-export function TransformDemo(): JSX.Element {
-  const { exit } = useApp()
-  const [currentIndex, setCurrentIndex] = useState(0)
-
-  const current = transforms[currentIndex]!
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || key.escape) {
-      exit()
-      return
-    }
-
-    if (key.upArrow || input === "k") {
-      setCurrentIndex((prev) => Math.max(0, prev - 1))
-    }
-    if (key.downArrow || input === "j") {
-      setCurrentIndex((prev) => Math.min(transforms.length - 1, prev + 1))
-    }
-  })
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      {/* Transform selector */}
-      <Box flexDirection="column" borderStyle="round" borderColor="$primary" paddingX={1}>
-        <Box marginBottom={1} gap={1}>
-          <H1>Transform</H1>
-          <Small>
-            — {current.name}: {current.description}
-          </Small>
-        </Box>
-        <TransformSelector current={currentIndex} transforms={transforms} />
-      </Box>
-
-      {/* Side-by-side comparison */}
-      <Box flexDirection="row" gap={1}>
-        <TextPanel title="Original" titleColor="$muted">
-          <Box flexDirection="column">
-            {sampleLines.map((line, i) => (
-              <Text key={i}>{line || " "}</Text>
-            ))}
-          </Box>
-        </TextPanel>
-
-        <TextPanel title={`${current.name}`} titleColor="$warning">
-          <Transform transform={current.fn}>
-            <Text>{sampleLines.join("\n")}</Text>
-          </Transform>
-        </TextPanel>
-      </Box>
-
-      <Muted>
-        {" "}
-        <Kbd>j/k</Kbd> select transform <Kbd>Esc/q</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="j/k select transform  Esc/q quit">
-      <TransformDemo />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}