@silvery/examples 0.4.2 → 0.4.4

package/bin/cli.ts

@@ -258,11 +258,18 @@ async function main(): Promise<void> {
   const args = process.argv.slice(2)
 
   // Top-level flags
-  if (args.includes("--help") || args.includes("-h") || args.length === 0) {
+  if (args.includes("--help") || args.includes("-h")) {
     printHelp()
     return
   }
 
+  // No args → list examples
+  if (args.length === 0) {
+    const examples = await discoverExamples()
+    printExampleList(examples)
+    return
+  }
+
   if (args.includes("--version") || args.includes("-v")) {
     try {
       const { resolve } = await import("node:path")

package/examples/_banner.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { Box, Text, Strong, Muted, ThemeProvider, getThemeByName, type Theme } from "silvery"
+
+export interface ExampleMeta {
+  name: string
+  description: string
+  /** API features showcased, e.g. ["VirtualList", "useContentRect()"] */
+  features?: string[]
+  /** Curated demo — shown in CLI viewer (`bun examples`) and web showcase */
+  demo?: boolean
+}
+
+interface Props {
+  meta: ExampleMeta
+  /** Short controls legend, e.g. "j/k navigate  q quit" */
+  controls?: string
+  /** Override theme (from viewer). Falls back to SILVERY_THEME env var. */
+  theme?: Theme
+  children: React.ReactNode
+}
+
+/**
+ * Compact header shown when examples run standalone.
+ * Wraps children in ThemeProvider for consistent theming.
+ */
+export function ExampleBanner({ meta, controls, theme, children }: Props) {
+  const resolvedTheme = theme ?? getThemeByName(process.env.SILVERY_THEME)
+
+  return (
+    <ThemeProvider theme={resolvedTheme}>
+      <Box flexDirection="column" flexGrow={1}>
+        {/* One-line header: dimmed to not compete with example UI */}
+        <Box paddingX={1} gap={1}>
+          <Text dim color="$warning">
+            {"▸ silvery"}
+          </Text>
+          <Strong>{meta.name}</Strong>
+          <Muted>— {meta.description}</Muted>
+        </Box>
+        {meta.features && meta.features.length > 0 && (
+          <Box paddingX={1}>
+            <Muted>
+              {"  "}
+              {meta.features.join(" · ")}
+            </Muted>
+          </Box>
+        )}
+        {controls && (
+          <Box paddingX={1}>
+            <Muted>
+              {"  "}
+              {controls}
+            </Muted>
+          </Box>
+        )}
+        {children}
+      </Box>
+    </ThemeProvider>
+  )
+}

package/examples/apps/aichat/index.tsx

@@ -10,7 +10,7 @@
 
 import React, { useEffect, useRef, useMemo } from "react"
 import { Box, Text, Spinner, ScrollbackList, useTea } from "silvery"
-import { run, useInput, useExit, type Key } from "@silvery/ag-term/runtime"
+import { run, useInput, useExit, type Key } from "silvery/runtime"
 import type { ExampleMeta } from "../../_banner.js"
 import type { ScriptEntry } from "./types.js"
 import { SCRIPT, generateStressScript, CONTEXT_WINDOW } from "./script.js"

package/examples/apps/app-todo.tsx

@@ -23,7 +23,7 @@
  */
 
 import React from "react"
-import { Box, Text, Muted, Kbd } from "../../src/index.js"
+import { Box, Text, Muted, Kbd } from "silvery"
 import { createApp, useApp, type AppHandle } from "@silvery/tea/create-app"
 import { pipe, withReact, withTerminal } from "@silvery/tea/plugins"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"

package/examples/apps/async-data.tsx

@@ -20,7 +20,7 @@ import {
   createTerm,
   ErrorBoundary,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/cli-wizard.tsx

@@ -35,7 +35,7 @@ import {
   Code,
   type Key,
   type SelectOption,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/clipboard.tsx

@@ -32,7 +32,7 @@ import {
   requestClipboard,
   parseClipboardResponse,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/components.tsx

@@ -50,7 +50,7 @@ import {
   Tab,
   TabPanel,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/data-explorer.tsx

@@ -35,7 +35,7 @@ import {
   Muted,
   Lead,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/dev-tools.tsx

@@ -37,7 +37,7 @@ import {
   Kbd,
   Muted,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/explorer.tsx

@@ -39,7 +39,7 @@ import {
   Kbd,
   Muted,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/gallery.tsx

@@ -29,7 +29,7 @@ import {
   useContentRect,
   createTerm,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/inline-bench.tsx

@@ -9,8 +9,8 @@
  *   bun examples/apps/inline-bench.tsx
  */
 
-import { TerminalBuffer } from "@silvery/ag-term/buffer"
-import { createOutputPhase, outputPhase } from "@silvery/ag-term/pipeline/output-phase"
+import { TerminalBuffer } from "silvery"
+import { createOutputPhase, outputPhase } from "silvery/pipeline/output-phase"
 
 const RUNS = 500
 

package/examples/apps/kanban.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useState } from "react"
-import { render, Box, Text, Kbd, Muted, useInput, useApp, createTerm, type Key } from "../../src/index.js"
+import { render, Box, Text, Kbd, Muted, useInput, useApp, createTerm, type Key } from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/layout-ref.tsx

@@ -20,7 +20,7 @@ import {
   createTerm,
   type BoxHandle,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/outline.tsx

@@ -26,7 +26,7 @@ import {
   useContentRect,
   createTerm,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/panes/index.tsx

@@ -9,8 +9,8 @@
 
 import React, { useState, useEffect, useMemo } from "react"
 import { Box, Text, ListView } from "silvery"
-import { SurfaceRegistryProvider, SearchProvider, SearchBar, useSearch } from "@silvery/ag-react"
-import { run, useInput, type Key } from "@silvery/ag-term/runtime"
+import { SurfaceRegistryProvider, SearchProvider, SearchBar, useSearch } from "silvery"
+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"

package/examples/apps/paste-demo.tsx

@@ -28,7 +28,7 @@ import {
   useApp,
   createTerm,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/scroll.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState } from "react"
-import { Box, Text, Kbd, Muted, render, useInput, useApp, createTerm, type Key } from "../../src/index.js"
+import { Box, Text, Kbd, Muted, render, useInput, useApp, createTerm, type Key } from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/search-filter.tsx

@@ -8,7 +8,7 @@
  */
 
 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 { render, Box, Text, Kbd, Muted, Strong, Lead, useInput, useApp, createTerm, type Key } from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/task-list.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useState, useMemo } from "react"
-import { render, Box, Text, Kbd, Muted, useInput, useApp, createTerm, type Key } from "../../src/index.js"
+import { render, Box, Text, Kbd, Muted, useInput, useApp, createTerm, type Key } from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/terminal.tsx

@@ -49,7 +49,7 @@ import {
   parseFocusEvent,
   type Key,
   type ParsedKeypress,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/textarea.tsx

@@ -22,7 +22,7 @@ import {
   useApp,
   createTerm,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/theme.tsx

@@ -37,7 +37,7 @@ import {
   detectTheme,
   type Key,
   type Theme,
-} from "../../src/index.js"
+} from "silvery"
 import {
   builtinPalettes,
   deriveTheme,
@@ -45,7 +45,7 @@ import {
   ansi16LightTheme,
   type ColorPalette,
   type ThemeAdjustment,
-} from "@silvery/theme"
+} from "silvery/theme"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/transform.tsx

@@ -27,7 +27,7 @@ import {
   useApp,
   createTerm,
   type Key,
-} from "../../src/index.js"
+} from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/virtual-10k.tsx

@@ -22,8 +22,8 @@
  */
 
 import React, { useState, useCallback, useMemo } from "react"
-import { Box, Text, Strong, Kbd, Muted, Divider, VirtualList, useContentRect } from "../../src/index.js"
-import { run, useInput, type Key } from "@silvery/ag-term/runtime"
+import { Box, Text, Strong, Kbd, Muted, Divider, VirtualList, useContentRect } from "silvery"
+import { run, useInput, type Key } from "silvery/runtime"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/components/counter.tsx

@@ -8,8 +8,8 @@
  */
 
 import React, { useState } from "react"
-import { Box, Text } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 function Counter() {
   const [count, setCount] = useState(0)

package/examples/components/hello.tsx

@@ -7,8 +7,8 @@
  */
 
 import React from "react"
-import { Box, Text } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 function Hello() {
   useInput(() => "exit" as const)

package/examples/components/progress-bar.tsx

@@ -8,8 +8,8 @@
  */
 
 import React, { useState } from "react"
-import { Box, Text, ProgressBar } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text, ProgressBar } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 function ProgressBarDemo() {
   const [progress, setProgress] = useState(0.4)

package/examples/components/select-list.tsx

@@ -8,8 +8,8 @@
  */
 
 import React, { useState } from "react"
-import { Box, Text, SelectList } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text, SelectList } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 const languages = [
   { label: "TypeScript", value: "ts" },

package/examples/components/spinner.tsx

@@ -7,8 +7,8 @@
  */
 
 import React from "react"
-import { Box, Text, Spinner } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text, Spinner } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 function SpinnerDemo() {
   useInput((input, key) => {

package/examples/components/text-input.tsx

@@ -8,8 +8,8 @@
  */
 
 import React, { useState } from "react"
-import { Box, Text, TextInput } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text, TextInput } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 function TextInputDemo() {
   const [value, setValue] = useState("")

package/examples/components/virtual-list.tsx

@@ -8,8 +8,8 @@
  */
 
 import React from "react"
-import { Box, Text, VirtualList } from "../../src/index.js"
-import { run, useInput } from "@silvery/ag-term/runtime"
+import { Box, Text, VirtualList } from "silvery"
+import { run, useInput } from "silvery/runtime"
 
 const items = Array.from({ length: 200 }, (_, i) => ({
   id: i,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silvery/examples",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Example apps and component demos for silvery \u2014 bunx @silvery/examples <name>",
   "license": "MIT",
   "author": "Bj\u00f8rn Stabell <bjorn@stabell.org>",