@silvery/examples 0.4.2

package/examples/components/hello.tsx

@@ -0,0 +1,34 @@
+/**
+ * Hello — The simplest silvery app
+ *
+ * Renders styled text and exits on any keypress.
+ *
+ * Usage: bun examples/components/hello.tsx
+ */
+
+import React from "react"
+import { Box, Text } from "../../src/index.js"
+import { run, useInput } from "@silvery/ag-term/runtime"
+
+function Hello() {
+  useInput(() => "exit" as const)
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold color="$primary">
+        Hello, Silvery!
+      </Text>
+      <Text color="$muted">Press any key to exit.</Text>
+    </Box>
+  )
+}
+
+export const meta = {
+  name: "Hello",
+  description: "The simplest silvery app — styled text, exit on keypress",
+}
+
+if (import.meta.main) {
+  const handle = await run(<Hello />)
+  await handle.waitUntilExit()
+}

package/examples/components/progress-bar.tsx

@@ -0,0 +1,48 @@
+/**
+ * ProgressBar — Determinate and indeterminate progress
+ *
+ * Press j/k to adjust progress. Shows determinate bars with
+ * percentage labels and an indeterminate animated bar.
+ *
+ * Usage: bun examples/components/progress-bar.tsx
+ */
+
+import React, { useState } from "react"
+import { Box, Text, ProgressBar } from "../../src/index.js"
+import { run, useInput } from "@silvery/ag-term/runtime"
+
+function ProgressBarDemo() {
+  const [progress, setProgress] = useState(0.4)
+
+  useInput((input, key) => {
+    if (input === "j" || key.rightArrow) setProgress((p) => Math.min(1, p + 0.05))
+    if (input === "k" || key.leftArrow) setProgress((p) => Math.max(0, p - 0.05))
+    if (input === "q" || key.escape) return "exit"
+  })
+
+  return (
+    <Box flexDirection="column" padding={1} gap={1}>
+      <Text bold>Determinate</Text>
+      <Box width={40}>
+        <ProgressBar value={progress} />
+      </Box>
+
+      <Text bold>Indeterminate</Text>
+      <Box width={40}>
+        <ProgressBar />
+      </Box>
+
+      <Text color="$muted">j/k: adjust q: quit</Text>
+    </Box>
+  )
+}
+
+export const meta = {
+  name: "Progress Bar",
+  description: "Determinate and indeterminate progress bars",
+}
+
+if (import.meta.main) {
+  const handle = await run(<ProgressBarDemo />)
+  await handle.waitUntilExit()
+}

package/examples/components/select-list.tsx

@@ -0,0 +1,50 @@
+/**
+ * SelectList — Keyboard-navigable single-select
+ *
+ * Navigate with j/k or arrows, confirm with Enter.
+ * Disabled items are automatically skipped.
+ *
+ * Usage: bun examples/components/select-list.tsx
+ */
+
+import React, { useState } from "react"
+import { Box, Text, SelectList } from "../../src/index.js"
+import { run, useInput } from "@silvery/ag-term/runtime"
+
+const languages = [
+  { label: "TypeScript", value: "ts" },
+  { label: "Rust", value: "rs" },
+  { label: "Go", value: "go" },
+  { label: "Python", value: "py" },
+  { label: "COBOL", value: "cob", disabled: true },
+  { label: "Elixir", value: "ex" },
+]
+
+function SelectListDemo() {
+  const [selected, setSelected] = useState<string | null>(null)
+
+  useInput((_, key) => {
+    if (key.escape) return "exit"
+  })
+
+  return (
+    <Box flexDirection="column" padding={1} gap={1}>
+      <Text bold>Pick a language:</Text>
+      <Box borderStyle="round" borderColor="$border" paddingX={1}>
+        <SelectList items={languages} onSelect={(opt) => setSelected(opt.value)} />
+      </Box>
+      {selected && <Text color="$success">Selected: {selected}</Text>}
+      <Text color="$muted">j/k: navigate Enter: select Esc: quit</Text>
+    </Box>
+  )
+}
+
+export const meta = {
+  name: "Select List",
+  description: "Keyboard-navigable single-select list",
+}
+
+if (import.meta.main) {
+  const handle = await run(<SelectListDemo />)
+  await handle.waitUntilExit()
+}

package/examples/components/spinner.tsx

@@ -0,0 +1,40 @@
+/**
+ * Spinner — Animated loading indicators
+ *
+ * Shows all four built-in spinner styles side by side.
+ *
+ * Usage: bun examples/components/spinner.tsx
+ */
+
+import React from "react"
+import { Box, Text, Spinner } from "../../src/index.js"
+import { run, useInput } from "@silvery/ag-term/runtime"
+
+function SpinnerDemo() {
+  useInput((input, key) => {
+    if (input === "q" || key.escape) return "exit"
+  })
+
+  return (
+    <Box flexDirection="column" padding={1} gap={1}>
+      <Text bold>Spinner Styles</Text>
+      <Box flexDirection="column">
+        <Spinner type="dots" label="Loading packages..." />
+        <Spinner type="line" label="Compiling..." />
+        <Spinner type="arc" label="Optimizing..." />
+        <Spinner type="bounce" label="Connecting..." />
+      </Box>
+      <Text color="$muted">q: quit</Text>
+    </Box>
+  )
+}
+
+export const meta = {
+  name: "Spinner",
+  description: "Four animated loading spinner styles",
+}
+
+if (import.meta.main) {
+  const handle = await run(<SpinnerDemo />)
+  await handle.waitUntilExit()
+}

package/examples/components/text-input.tsx

@@ -0,0 +1,57 @@
+/**
+ * TextInput — Single-line text entry
+ *
+ * Shows TextInput with placeholder, prompt, and submit handler.
+ * Full readline keybindings (Ctrl+A/E/K/U, Alt+B/F) are built in.
+ *
+ * Usage: bun examples/components/text-input.tsx
+ */
+
+import React, { useState } from "react"
+import { Box, Text, TextInput } from "../../src/index.js"
+import { run, useInput } from "@silvery/ag-term/runtime"
+
+function TextInputDemo() {
+  const [value, setValue] = useState("")
+  const [submitted, setSubmitted] = useState<string[]>([])
+
+  useInput((_, key) => {
+    if (key.escape) return "exit"
+  })
+
+  return (
+    <Box flexDirection="column" padding={1} gap={1}>
+      <TextInput
+        value={value}
+        onChange={setValue}
+        onSubmit={(val) => {
+          setSubmitted((prev) => [...prev, val])
+          setValue("")
+        }}
+        placeholder="Type something and press Enter..."
+        prompt="> "
+      />
+      {submitted.length > 0 && (
+        <Box flexDirection="column">
+          <Text color="$muted">Submitted:</Text>
+          {submitted.map((s, i) => (
+            <Text key={i} color="$success">
+              {s}
+            </Text>
+          ))}
+        </Box>
+      )}
+      <Text color="$muted">Enter: submit Esc: quit</Text>
+    </Box>
+  )
+}
+
+export const meta = {
+  name: "Text Input",
+  description: "Single-line text entry with readline keybindings",
+}
+
+if (import.meta.main) {
+  const handle = await run(<TextInputDemo />)
+  await handle.waitUntilExit()
+}

package/examples/components/virtual-list.tsx

@@ -0,0 +1,52 @@
+/**
+ * VirtualList — Efficient scrollable list
+ *
+ * Renders 200 items but only materializes visible rows.
+ * Built-in j/k navigation, page up/down, Home/End.
+ *
+ * Usage: bun examples/components/virtual-list.tsx
+ */
+
+import React from "react"
+import { Box, Text, VirtualList } from "../../src/index.js"
+import { run, useInput } from "@silvery/ag-term/runtime"
+
+const items = Array.from({ length: 200 }, (_, i) => ({
+  id: i,
+  name: `Item ${i + 1}`,
+}))
+
+function VirtualListDemo() {
+  useInput((input, key) => {
+    if (input === "q" || key.escape) return "exit"
+  })
+
+  return (
+    <Box flexDirection="column" padding={1} gap={1}>
+      <Text bold>200 items (virtualized)</Text>
+      <VirtualList
+        items={items}
+        height={12}
+        itemHeight={1}
+        interactive
+        renderItem={(item, _index, meta) => (
+          <Text key={item.id} color={meta?.isSelected ? "$primary" : undefined} bold={meta?.isSelected}>
+            {meta?.isSelected ? "> " : "  "}
+            {item.name}
+          </Text>
+        )}
+      />
+      <Text color="$muted">j/k: navigate q: quit</Text>
+    </Box>
+  )
+}
+
+export const meta = {
+  name: "Virtual List",
+  description: "Efficient scrollable list with 200 virtualized items",
+}
+
+if (import.meta.main) {
+  const handle = await run(<VirtualListDemo />)
+  await handle.waitUntilExit()
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@silvery/examples",
+  "version": "0.4.2",
+  "description": "Example apps and component demos for silvery \u2014 bunx @silvery/examples <name>",
+  "license": "MIT",
+  "author": "Bj\u00f8rn Stabell <bjorn@stabell.org>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/beorn/silvery.git",
+    "directory": "packages/cli"
+  },
+  "files": [
+    "bin",
+    "examples"
+  ],
+  "type": "module",
+  "bin": {
+    "silvery-examples": "./bin/cli.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "silvery": ">=0.4.0",
+    "@silvery/tea": ">=0.4.0"
+  }
+}