@silvery/examples 0.4.4 → 0.5.1

package/README.md

@@ -0,0 +1,7 @@
+# @silvery/examples
+
+Example apps and component demos for silvery.
+
+```console
+$ bunx @silvery/examples <name>
+```

package/examples/_banner.tsx

@@ -4,7 +4,7 @@ import { Box, Text, Strong, Muted, ThemeProvider, getThemeByName, type Theme } f
 export interface ExampleMeta {
   name: string
   description: string
-  /** API features showcased, e.g. ["VirtualList", "useContentRect()"] */
+  /** API features showcased, e.g. ["ListView", "useBoxRect()"] */
   features?: string[]
   /** Curated demo — shown in CLI viewer (`bun examples`) and web showcase */
   demo?: boolean

package/examples/apps/aichat/index.tsx

@@ -1,15 +1,16 @@
 /**
  * AI Chat — Coding Agent Demo
  *
- * Showcases ScrollbackList with streaming, tool calls, context tracking.
- * TEA state machine drives all animation; ScrollbackList freezes completed
- * exchanges into real terminal scrollback with colors, borders, and hyperlinks.
+ * Showcases ListView with streaming, tool calls, context tracking.
+ * TEA state machine drives all animation; ListView caches completed
+ * exchanges while live content stays in the React tree.
  *
  * Flags: --auto (auto-advance) --fast (skip animation) --stress (200 exchanges)
  */
 
-import React, { useEffect, useRef, useMemo } from "react"
-import { Box, Text, Spinner, ScrollbackList, useTea } from "silvery"
+import React, { useCallback, useEffect, useRef, useMemo } from "react"
+import { Box, Text, Spinner, ListView, useTea } from "silvery"
+import type { ListItemMeta } from "silvery"
 import { run, useInput, useExit, type Key } from "silvery/runtime"
 import type { ExampleMeta } from "../../_banner.js"
 import type { ScriptEntry } from "./types.js"
@@ -32,13 +33,14 @@ export type { Exchange, ToolCall } from "./types.js"
 
 export const meta: ExampleMeta = {
   name: "AI Coding Agent",
-  description: "Coding agent showcase — ScrollbackList, streaming, context tracking",
+  description: "Coding agent showcase — ListView, streaming, context tracking",
   demo: true,
-  features: ["ScrollbackList", "auto-freeze", "inline mode", "streaming", "OSC 8 links", "OSC 133 markers"],
+  features: ["ListView", "cache", "inline mode", "streaming", "OSC 8 links"],
+  // TODO: Add OSC 133 marker support to ListView (km-silvery.listview-markers)
 }
 
 // ============================================================================
-// AIChat — TEA state machine + ScrollbackList
+// AIChat — TEA state machine + ListView
 // ============================================================================
 
 export function AIChat({
@@ -60,13 +62,45 @@ export function AIChat({
   useAutoExit(autoStart, state.done, exit)
   useKeyBindings(state, send, footerControlRef)
 
+  const renderExchange = useCallback(
+    (exchange: (typeof state.exchanges)[number], index: number, _meta: ListItemMeta) => {
+      const isLatest = index === state.exchanges.length - 1
+      return (
+        <Box flexDirection="column">
+          {index > 0 && <Text> </Text>}
+          {state.compacting && isLatest && <CompactingOverlay />}
+          {state.done && autoStart && isLatest && <SessionComplete />}
+          <ExchangeItem
+            exchange={exchange}
+            streamPhase={state.streamPhase}
+            revealFraction={state.revealFraction}
+            pulse={state.pulse}
+            isLatest={isLatest}
+            isFirstInGroup={exchange.role !== (index > 0 ? state.exchanges[index - 1]!.role : null)}
+            isLastInGroup={
+              exchange.role !== (index < state.exchanges.length - 1 ? state.exchanges[index + 1]!.role : null)
+            }
+          />
+        </Box>
+      )
+    },
+    [state, autoStart],
+  )
+
   return (
     <Box flexDirection="column" paddingX={1}>
-      <ScrollbackList
+      <ListView
         items={state.exchanges}
-        keyExtractor={(ex) => ex.id}
-        markers={true}
-        footer={
+        getKey={(ex) => ex.id}
+        height={process.stdout.rows ?? 24}
+        estimateHeight={6}
+        renderItem={renderExchange}
+        scrollTo={state.exchanges.length - 1}
+        cache={{
+          mode: "virtual",
+          isCacheable: (_ex, index) => index < state.exchanges.length - 1,
+        }}
+        listFooter={
           <DemoFooter
             controlRef={footerControlRef}
             onSubmit={(text) => send({ type: "submit", text })}
@@ -80,29 +114,7 @@ export function AIChat({
             autoTypingText={state.autoTyping ? state.autoTyping.full.slice(0, state.autoTyping.revealed) : null}
           />
         }
-      >
-        {(exchange, index) => {
-          const isLatest = index === state.exchanges.length - 1
-          return (
-            <Box flexDirection="column">
-              {index > 0 && <Text> </Text>}
-              {state.compacting && isLatest && <CompactingOverlay />}
-              {state.done && autoStart && isLatest && <SessionComplete />}
-              <ExchangeItem
-                exchange={exchange}
-                streamPhase={state.streamPhase}
-                revealFraction={state.revealFraction}
-                pulse={state.pulse}
-                isLatest={isLatest}
-                isFirstInGroup={exchange.role !== (index > 0 ? state.exchanges[index - 1]!.role : null)}
-                isLastInGroup={
-                  exchange.role !== (index < state.exchanges.length - 1 ? state.exchanges[index + 1]!.role : null)
-                }
-              />
-            </Box>
-          )
-        }}
-      </ScrollbackList>
+      />
     </Box>
   )
 }

package/examples/apps/aichat/state.ts

@@ -56,11 +56,10 @@ export type DemoResult = TeaResult<DemoState, DemoEffect>
 // ============================================================================
 
 const INTRO_TEXT = [
-  "Coding agent simulation showcasing ScrollbackList:",
-  " • ScrollbackList — declarative list with automatic scrollback",
-  " • Auto-freeze — items freeze when they scroll off-screen",
+  "Coding agent simulation showcasing ListView:",
+  " • ListView — unified virtualized list with cache",
+  " • Cache mode — completed exchanges cached for performance",
   " • OSC 8 hyperlinks — clickable file paths and URLs",
-  " • OSC 133 markers — Cmd+↑/↓ to jump between exchanges",
   " • $token theme colors — semantic color tokens",
 ].join("\n")
 

package/examples/apps/app-todo.tsx

@@ -24,8 +24,8 @@
 
 import React from "react"
 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 { createApp, useApp, type AppHandle } from "@silvery/create/create-app"
+import { pipe, withReact, withTerminal } from "@silvery/create/plugins"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {

package/examples/apps/async-data.tsx

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

package/examples/apps/components.tsx

@@ -87,8 +87,8 @@ function TypographyTab() {
 
       <H3>Use Built-in Components</H3>
       <P>
-        <Code>silvery/ui</Code> ships 30+ components. They handle keyboard navigation, theming,
-        mouse support, and dozens of edge cases.
+        <Code>silvery/ui</Code> ships 30+ components. They handle keyboard navigation, theming, mouse support, and
+        dozens of edge cases.
       </P>
       <UL>
         <LI>
@@ -133,8 +133,8 @@ function TypographyTab() {
 
       <H3>Think in Flexbox</H3>
       <P>
-        Silvery uses CSS flexbox via Flexily. Components know their size via <Code>useContentRect()</Code> —
-        synchronous, during render. No effects, no flash.
+        Silvery uses CSS flexbox via Flexily. Components know their size via <Code>useBoxRect()</Code> — synchronous,
+        during render. No effects, no flash.
       </P>
 
       <Small>Last updated: silvery v0.0.1 — see silvery.dev for full documentation</Small>

package/examples/apps/data-explorer.tsx

@@ -2,9 +2,9 @@
  * Data Explorer — Process Table Example
  *
  * A process explorer with a searchable, scrollable table demonstrating:
- * - Table-like display with responsive column widths via useContentRect()
+ * - Table-like display with responsive column widths via useBoxRect()
  * - TextInput for live search/filter with useDeferredValue
- * - VirtualList for smooth scrolling through 500+ rows
+ * - ListView for smooth scrolling through 500+ rows
  * - Keyboard navigation with j/k and vim-style jumps
  * - Color-coded status indicators
  *
@@ -24,10 +24,10 @@ import {
   render,
   Box,
   Text,
-  VirtualList,
+  ListView,
   TextInput,
   Divider,
-  useContentRect,
+  useBoxRect,
   useInput,
   useApp,
   createTerm,
@@ -40,8 +40,8 @@ import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {
   name: "Data Explorer",
-  description: "Process explorer table with search, VirtualList, and responsive column widths",
-  features: ["useContentRect()", "TextInput", "useInput()", "responsive layout", "useDeferredValue"],
+  description: "Process explorer table with search, ListView, and responsive column widths",
+  features: ["useBoxRect()", "TextInput", "useInput()", "responsive layout", "useDeferredValue"],
 }
 
 // ============================================================================
@@ -300,13 +300,13 @@ function SummaryBar({ processes, query }: { processes: ProcessInfo[]; query: str
 
 /** Inner component that reads the flex container's height */
 function ProcessListArea({ processes, cursor, width }: { processes: ProcessInfo[]; cursor: number; width: number }) {
-  const { height } = useContentRect()
+  const { height } = useBoxRect()
 
   return (
-    <VirtualList
+    <ListView
       items={processes}
       height={height}
-      itemHeight={1}
+      estimateHeight={1}
       scrollTo={cursor}
       overscan={5}
       renderItem={(proc, index) => (
@@ -322,7 +322,7 @@ function ProcessListArea({ processes, cursor, width }: { processes: ProcessInfo[
 
 export function DataExplorer() {
   const { exit } = useApp()
-  const { width } = useContentRect()
+  const { width } = useBoxRect()
   const [cursor, setCursor] = useState(0)
   const [searchMode, setSearchMode] = useState(false)
   const [query, setQuery] = useState("")

package/examples/apps/dev-tools.tsx

@@ -2,7 +2,7 @@
  * Dev Tools — Log Viewer Example
  *
  * A live log viewer demonstrating:
- * - VirtualList for efficient rendering of thousands of log entries
+ * - ListView for efficient rendering of thousands of log entries
  * - Keyboard shortcuts to add log entries at different severity levels
  * - Color-coded severity levels (DEBUG, INFO, WARN, ERROR)
  * - j/k navigation through log history
@@ -26,9 +26,9 @@ import {
   render,
   Box,
   Text,
-  VirtualList,
+  ListView,
   Divider,
-  useContentRect,
+  useBoxRect,
   useInput,
   useApp,
   createTerm,
@@ -42,8 +42,8 @@ import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {
   name: "Dev Tools",
-  description: "Log viewer with severity levels, VirtualList, and keyboard-driven log injection",
-  features: ["VirtualList", "useInput()", "useContentRect()", "keyboard navigation"],
+  description: "Log viewer with severity levels, ListView, and keyboard-driven log injection",
+  features: ["ListView", "useInput()", "useBoxRect()", "keyboard navigation"],
 }
 
 // ============================================================================
@@ -215,15 +215,15 @@ function LevelCounts({ entries }: { entries: LogEntry[] }) {
   )
 }
 
-/** Inner component that reads the flex container's height via useContentRect */
+/** Inner component that reads the flex container's height via useBoxRect */
 function LogListArea({ entries, cursor }: { entries: LogEntry[]; cursor: number }) {
-  const { height } = useContentRect()
+  const { height } = useBoxRect()
 
   return (
-    <VirtualList
+    <ListView
       items={entries}
       height={height}
-      itemHeight={1}
+      estimateHeight={1}
       scrollTo={cursor}
       overscan={5}
       renderItem={(entry, index) => <LogRow key={entry.id} entry={entry} isSelected={index === cursor} />}
@@ -240,7 +240,7 @@ const rng = seededRandom(12345)
 
 export function DevTools() {
   const { exit } = useApp()
-  const { width } = useContentRect()
+  const { width } = useBoxRect()
   const [entries, setEntries] = useState<LogEntry[]>(() => generateInitialLogs(INITIAL_COUNT))
   const [cursor, setCursor] = useState(INITIAL_COUNT - 1)
   const [autoScroll, setAutoScroll] = useState(true)

package/examples/apps/explorer.tsx

@@ -5,7 +5,7 @@
  * - Streaming log viewer with ~2000 lines, severity-level coloring, and level toggles
  * - Sortable process table with ~50 processes, live CPU/MEM jitter, and responsive columns
  * - Shared TextInput search bar with useDeferredValue for non-blocking filtering
- * - VirtualList with interactive scrolling for both tabs
+ * - ListView with interactive scrolling for both tabs
  *
  * Usage: bun vendor/silvery/examples/apps/explorer.tsx
  *
@@ -26,13 +26,13 @@ import {
   render,
   Box,
   Text,
-  VirtualList,
+  ListView,
   TextInput,
   Tabs,
   TabList,
   Tab,
   Divider,
-  useContentRect,
+  useBoxRect,
   useInput,
   useApp,
   createTerm,
@@ -44,9 +44,9 @@ import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {
   name: "Explorer",
-  description: "Log viewer and process explorer with VirtualList search",
+  description: "Log viewer and process explorer with ListView search",
   demo: true,
-  features: ["VirtualList", "TextInput", "useContentRect()", "useDeferredValue", "2000+ rows"],
+  features: ["ListView", "TextInput", "useBoxRect()", "useDeferredValue", "2000+ rows"],
 }
 
 // ============================================================================
@@ -297,13 +297,13 @@ function LogRow({ entry, isSelected }: { entry: LogEntry; isSelected: boolean })
 }
 
 function LogListArea({ entries, cursor }: { entries: LogEntry[]; cursor: number }) {
-  const { height } = useContentRect()
+  const { height } = useBoxRect()
 
   return (
-    <VirtualList
+    <ListView
       items={entries}
       height={height}
-      itemHeight={1}
+      estimateHeight={1}
       scrollTo={cursor}
       overscan={5}
       renderItem={(entry, index) => <LogRow key={entry.id} entry={entry} isSelected={index === cursor} />}
@@ -390,13 +390,13 @@ function ProcessRow({ proc, isSelected, width }: { proc: ProcessInfo; isSelected
 }
 
 function ProcessListArea({ processes, cursor, width }: { processes: ProcessInfo[]; cursor: number; width: number }) {
-  const { height } = useContentRect()
+  const { height } = useBoxRect()
 
   return (
-    <VirtualList
+    <ListView
       items={processes}
       height={height}
-      itemHeight={1}
+      estimateHeight={1}
       scrollTo={cursor}
       overscan={5}
       renderItem={(proc, index) => (
@@ -412,7 +412,7 @@ function ProcessListArea({ processes, cursor, width }: { processes: ProcessInfo[
 
 export function Explorer() {
   const { exit } = useApp()
-  const { width } = useContentRect()
+  const { width } = useBoxRect()
 
   // Tab state
   const [activeTab, setActiveTab] = useState("logs")

package/examples/apps/gallery.tsx

@@ -26,7 +26,7 @@ import {
   H2,
   useInput,
   useApp,
-  useContentRect,
+  useBoxRect,
   createTerm,
   type Key,
 } from "silvery"
@@ -222,7 +222,7 @@ function generateCheckerPattern(w: number, h: number): Buffer {
 // ============================================================================
 
 function ImagesTab() {
-  const rect = useContentRect()
+  const rect = useBoxRect()
   const w = Math.max(20, rect.width - 4)
   const imgH = Math.max(5, rect.height - 6)
 
@@ -311,7 +311,7 @@ const PAINT_PRESETS: { name: string; color: RGB }[] = [
 ]
 
 function PaintTab() {
-  const rect = useContentRect()
+  const rect = useBoxRect()
   const canvasW = Math.max(10, rect.width - 2)
   const canvasTermH = Math.max(4, rect.height - 7)
   const canvasPixH = canvasTermH * 2
@@ -457,7 +457,7 @@ function PaintTab() {
 // ============================================================================
 
 function TruecolorTab() {
-  const rect = useContentRect()
+  const rect = useBoxRect()
   const w = Math.max(20, rect.width - 4)
   const availH = Math.max(10, rect.height - 3)
 

package/examples/apps/inline-bench.tsx

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

package/examples/apps/layout-ref.tsx

@@ -8,25 +8,13 @@
  */
 
 import React, { useRef, useState, useEffect } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H1,
-  Kbd,
-  Muted,
-  useInput,
-  useApp,
-  createTerm,
-  type BoxHandle,
-  type Key,
-} from "silvery"
+import { render, Box, Text, H1, Kbd, Muted, useInput, useApp, createTerm, type BoxHandle, type Key } from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {
   name: "Layout Ref",
-  description: "useContentRect + useScreenRect for imperative layout measurement",
-  features: ["forwardRef", "BoxHandle", "onLayout", "getContentRect()"],
+  description: "useBoxRect + useScrollRect for imperative layout measurement",
+  features: ["forwardRef", "BoxHandle", "onLayout", "getBoxRect()"],
 }
 
 // ============================================================================
@@ -76,8 +64,8 @@ function ImperativeAccessDemo() {
       return
     }
 
-    const content = boxRef.current.getContentRect()
-    const screen = boxRef.current.getScreenRect()
+    const content = boxRef.current.getBoxRect()
+    const screen = boxRef.current.getScrollRect()
     const node = boxRef.current.getNode()
 
     setInfo(

package/examples/apps/outline.tsx

@@ -9,30 +9,19 @@
  * - 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()
+ * - 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,
-  useContentRect,
-  createTerm,
-  type Key,
-} from "silvery"
+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", "useContentRect()", "layout dimensions"],
+  features: ["outlineStyle", "borderStyle", "useBoxRect()", "layout dimensions"],
 }
 
 // ============================================================================
@@ -48,7 +37,7 @@ const STYLES: StyleVariant[] = ["single", "double", "round", "bold"]
 // ============================================================================
 
 function ContentWithSize({ label }: { label: string }) {
-  const { width, height } = useContentRect()
+  const { width, height } = useBoxRect()
 
   return (
     <Box flexDirection="column">

package/examples/apps/panes/index.tsx

@@ -9,7 +9,7 @@
 
 import React, { useState, useEffect, useMemo } from "react"
 import { Box, Text, ListView } from "silvery"
-import { SurfaceRegistryProvider, SearchProvider, SearchBar, useSearch } from "silvery"
+import { 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"
@@ -85,11 +85,11 @@ function ChatPane({
       scrollTo={exchanges.length - 1}
       active={active}
       surfaceId={surfaceId}
-      history={{
+      cache={{
         mode: "virtual",
-        freezeWhen: (_ex: Exchange, idx: number) => idx < exchanges.length - 1,
+        isCacheable: (_ex: Exchange, idx: number) => idx < exchanges.length - 1,
       }}
-      textAdapter={{ getItemText: (ex: Exchange) => ex.content }}
+      search={{ getText: (ex: Exchange) => ex.content }}
       renderItem={(exchange: Exchange, _index: number, _meta: ListItemMeta) => (
         <ExchangeItem
           exchange={exchange}
@@ -190,11 +190,9 @@ export async function main() {
   const rows = process.stdout.rows ?? 40
 
   using handle = await run(
-    <SurfaceRegistryProvider>
-      <SearchProvider>
-        <PanesApp fastMode={fastMode} rows={rows} />
-      </SearchProvider>
-    </SurfaceRegistryProvider>,
+    <SearchProvider>
+      <PanesApp fastMode={fastMode} rows={rows} />
+    </SearchProvider>,
     { mode: "fullscreen", kitty: false, textSizing: false },
   )
   await handle.waitUntilExit()

package/examples/apps/paste-demo.tsx

@@ -15,20 +15,7 @@
  */
 
 import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H1,
-  Small,
-  Kbd,
-  Muted,
-  Lead,
-  useInput,
-  useApp,
-  createTerm,
-  type Key,
-} from "silvery"
+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 = {

package/examples/apps/task-list.tsx

@@ -15,7 +15,7 @@ import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 export const meta: ExampleMeta = {
   name: "Task List",
   description: "Scrollable list with priority badges, toggles, and expandable subtasks",
-  features: ["VirtualList", "variable itemHeight", "Box overflow"],
+  features: ["ListView", "variable estimateHeight", "Box overflow"],
 }
 
 // ============================================================================
@@ -161,7 +161,7 @@ export function TaskList() {
   const [cursor, setCursor] = useState(0)
   const [expandedTasks, setExpandedTasks] = useState<Set<number>>(new Set())
 
-  // Fixed visible count (in a real app, this would use useContentRect)
+  // Fixed visible count (in a real app, this would use useBoxRect)
   const visibleCount = 15
 
   // Calculate scroll offset to keep cursor visible

package/examples/apps/textarea.tsx

@@ -10,25 +10,13 @@
  */
 
 import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H1,
-  Strong,
-  Muted,
-  TextArea,
-  useInput,
-  useApp,
-  createTerm,
-  type Key,
-} from "silvery"
+import { render, Box, Text, H1, Strong, Muted, TextArea, useInput, useApp, createTerm, type Key } from "silvery"
 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"],
+  features: ["TextArea", "useBoxRect()", "Ctrl+Enter submit"],
 }
 
 export function NoteEditor() {

package/examples/apps/transform.tsx

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

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

@@ -1,13 +1,13 @@
 /**
  * Virtual Scroll Benchmark — 10,000 Items
  *
- * Demonstrates that VirtualList handles massive datasets with instant scrolling.
+ * Demonstrates that ListView handles massive datasets with instant scrolling.
  * Only visible items + overscan are rendered, regardless of total count.
  *
  * Demonstrates:
- * - VirtualList with 10,000 items and variable heights
+ * - ListView with 10,000 items and variable heights
  * - Smooth j/k navigation with position indicator
- * - useContentRect() for adaptive column count
+ * - useBoxRect() for adaptive column count
  * - Page up/down with large jumps
  * - Visual item variety (priorities, tags, progress bars)
  *
@@ -22,14 +22,14 @@
  */
 
 import React, { useState, useCallback, useMemo } from "react"
-import { Box, Text, Strong, Kbd, Muted, Divider, VirtualList, useContentRect } from "silvery"
+import { Box, Text, Strong, Kbd, Muted, Divider, ListView, useBoxRect } from "silvery"
 import { run, useInput, type Key } from "silvery/runtime"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {
   name: "Virtual 10K",
-  description: "VirtualList scrolling through 10,000 items with instant navigation",
-  features: ["VirtualList", "10K items", "useContentRect()", "variable itemHeight"],
+  description: "ListView scrolling through 10,000 items with instant navigation",
+  features: ["ListView", "10K items", "useBoxRect()", "variable estimateHeight"],
 }
 
 // ============================================================================
@@ -287,7 +287,7 @@ function StatsBar({ items }: { items: Item[] }) {
 // ============================================================================
 
 function VirtualBenchmark() {
-  const { width, height } = useContentRect()
+  const { width, height } = useBoxRect()
   const [cursor, setCursor] = useState(0)
   const [showDetail, setShowDetail] = useState(false)
 
@@ -296,8 +296,8 @@ function VirtualBenchmark() {
   const listHeight = Math.max(5, height - 5)
   const halfPage = Math.max(1, Math.floor(listHeight / 2))
 
-  const itemHeight = useCallback(
-    (_item: Item, index: number) => {
+  const estimateHeight = useCallback(
+    (index: number) => {
       if (showDetail && index === cursor) return 2
       return 1
     },
@@ -356,10 +356,10 @@ function VirtualBenchmark() {
 
       {/* Virtual list */}
       <Box flexGrow={1}>
-        <VirtualList
+        <ListView
           items={ALL_ITEMS}
           height={listHeight}
-          itemHeight={itemHeight}
+          estimateHeight={estimateHeight}
           scrollTo={cursor}
           overscan={5}
           renderItem={(item, index) => (

package/examples/components/virtual-list.tsx

@@ -1,5 +1,5 @@
 /**
- * VirtualList — Efficient scrollable list
+ * ListView — Efficient scrollable list
  *
  * Renders 200 items but only materializes visible rows.
  * Built-in j/k navigation, page up/down, Home/End.
@@ -8,7 +8,7 @@
  */
 
 import React from "react"
-import { Box, Text, VirtualList } from "silvery"
+import { Box, Text, ListView } from "silvery"
 import { run, useInput } from "silvery/runtime"
 
 const items = Array.from({ length: 200 }, (_, i) => ({
@@ -16,7 +16,7 @@ const items = Array.from({ length: 200 }, (_, i) => ({
   name: `Item ${i + 1}`,
 }))
 
-function VirtualListDemo() {
+function ListViewDemo() {
   useInput((input, key) => {
     if (input === "q" || key.escape) return "exit"
   })
@@ -24,14 +24,14 @@ function VirtualListDemo() {
   return (
     <Box flexDirection="column" padding={1} gap={1}>
       <Text bold>200 items (virtualized)</Text>
-      <VirtualList
+      <ListView
         items={items}
         height={12}
-        itemHeight={1}
-        interactive
+        estimateHeight={1}
+        nav
         renderItem={(item, _index, meta) => (
-          <Text key={item.id} color={meta?.isSelected ? "$primary" : undefined} bold={meta?.isSelected}>
-            {meta?.isSelected ? "> " : "  "}
+          <Text key={item.id} color={meta.isCursor ? "$primary" : undefined} bold={meta.isCursor}>
+            {meta.isCursor ? "> " : "  "}
             {item.name}
           </Text>
         )}
@@ -47,6 +47,6 @@ export const meta = {
 }
 
 if (import.meta.main) {
-  const handle = await run(<VirtualListDemo />)
+  const handle = await run(<ListViewDemo />)
   await handle.waitUntilExit()
 }

package/package.json

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