silvery 0.3.0 → 0.4.0

package/README.md

@@ -2,181 +2,77 @@
 
 **Polished Terminal UIs in React.**
 
-Responsive layouts, scrollable containers, 100x+ faster incremental updates, and full support for modern terminal capabilities. 30+ components from TextInput to VirtualList. Pure TypeScript, no WASM.
+Ink-compatible React renderer for terminals — same `Box`, `Text`, `useInput` API you know. Plus everything you wish Ink had.
 
-```
-npm install silvery react
-```
+> **Note:** Under active development. APIs may change. Feedback welcome.
 
-> **Status:** Alpha — under active development. APIs may change. Early adopters and feedback welcome.
+```console
+$ npm install silvery react
+```
 
 ```tsx
 import { useState } from "react"
-import { render, Box, Text, useInput, useContentRect, createTerm } from "silvery"
+import { render, Box, Text, useInput } from "silvery"
 
-function App() {
-  const { width } = useContentRect()
+function Counter() {
   const [count, setCount] = useState(0)
-
   useInput((input) => {
     if (input === "j") setCount((c) => c + 1)
-    if (input === "k") setCount((c) => c - 1)
-    if (input === "q") return "exit"
   })
-
   return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold>Counter ({width} cols wide)</Text>
+    <Box borderStyle="round" padding={1}>
       <Text>Count: {count}</Text>
-      <Text dim>j/k = change, q = quit</Text>
     </Box>
   )
 }
 
-using term = createTerm()
-await render(<App />, term).run()
-```
-
-## Renderer
-
-### Responsive layout
-
-`useContentRect()` returns actual dimensions synchronously -- no post-layout effect, no `{width: 0, height: 0}` on first render. Components adapt to their available space immediately.
-
-```tsx
-function Responsive() {
-  const { width } = useContentRect()
-  return width > 80 ? <FullDashboard /> : <CompactView />
-}
-```
-
-### Scrollable containers
-
-`overflow="scroll"` with `scrollTo` -- the framework handles measurement, clipping, and scroll position. No manual virtualization needed.
-
-```tsx
-<Box height={20} overflow="scroll" scrollTo={selectedIndex}>
-  {items.map((item) => (
-    <Card key={item.id} item={item} />
-  ))}
-</Box>
-```
-
-### Per-node dirty tracking
-
-Seven independent dirty flags per node. When a user presses a key, only the affected nodes re-render -- bypassing React reconciliation entirely for unchanged subtrees. Typical interactive updates complete in ~170 microseconds for 1000 nodes, compared to full-tree re-renders.
-
-### Multi-target rendering
-
-Terminal today, Canvas 2D and DOM experimental. Same React components, different rendering backends.
-
-## Framework Layers (Optional)
-
-### Input layer stack
-
-DOM-style event bubbling with modal isolation. Opening a dialog automatically captures input -- no manual guard checks in every handler.
-
-```tsx
-<InputLayerProvider>
-  <Board />
-  {isOpen && <Dialog />} {/* Dialog captures input; Board doesn't see it */}
-</InputLayerProvider>
+await render(<Counter />).run()
 ```
 
-### Spatial focus navigation
+### Familiar
 
-Tree-based focus with scopes, arrow-key directional movement, click-to-focus, and `useFocusWithin`. Go beyond tab-order.
+- **React 18 + 19** — hooks, refs, effects, suspense — all works
+- **Flexbox layout** — `Box` with `flexDirection`, `padding`, `gap`, `flexGrow`, just like Ink
+- **Ink/Chalk compatible** — same component model, `@silvery/ink` compatibility layer for migration
 
-### Command and keybinding system
+### Better
 
-Named commands with IDs, help text, configurable keybindings, and runtime introspection. Build discoverable, AI-automatable interfaces.
-
-```tsx
-const MyComponent = withCommands(BaseComponent, () => [
-  { id: "save", label: "Save", keys: ["ctrl+s"], action: () => save() },
-  { id: "quit", label: "Quit", keys: ["q", "ctrl+c"], action: () => exit() },
-])
-```
-
-### Mouse support
-
-SGR mouse protocol with DOM-style event props -- `onClick`, `onMouseDown`, `onWheel`, hit testing, drag support.
-
-### Multi-line text editing
-
-Built-in `TextArea` with word wrap, scrolling, cursor movement, selection, and undo/redo via `EditContext`.
-
-### 30+ built-in components
-
-TextArea, TextInput, VirtualList, SelectList, Table, CommandPalette, ModalDialog, Tabs, TreeView, SplitView, Toast, Image, and more -- all with built-in scrolling, focus, and input handling.
-
-### Theme system
-
-`@silvery/theme` with 38 built-in palettes and semantic color tokens (`$primary`, `$error`, `$border`, etc.) that adapt automatically.
-
-### TEA state machines
-
-Optional [Elm Architecture](https://guide.elm-lang.org/architecture/) alongside React hooks. Pure `(action, state) -> [state, effects]` functions for testable, replayable, undoable UI logic.
+- **Smaller install** — ~177 KB gzipped all included (Ink 6 pulls 16MB into node_modules)
+- **Pure TypeScript, zero native deps** — no WASM, no build steps — works on Alpine, CI, Docker, everywhere
+- **Incremental rendering** — per-node dirty tracking, [~100x faster interactive updates](tests/perf/render.bench.ts)
+- **Responsive layout** — `useContentRect()` returns actual dimensions synchronously during render
+- **Dynamic scrollback** — renders (and re-renders!) into the terminal's scroll history, not just alternate screen
+- **Scrollable containers** — `overflow="scroll"` with automatic measurement and clipping
+- **Theme system** — 38 palettes, semantic design/color tokens (`$primary`, `$error`), auto-detects terminal colors
+- **30+ components** — TextInput, TextArea, SelectList, VirtualList, Table, Tabs, CommandPalette, ModalDialog, Toast, and more
+- **Focus system** — scoped focus, arrow-key directional nav, click-to-focus
+- **Extremely composable** — use as just a renderer (`render`), add a runtime (`run`), or build full apps (`createApp`). Mix with any React state library (useState, Zustand, Jotai, Redux). Swap terminal backends (real TTY, headless, xterm.js emulator) for testing. Embed silvery components in existing CLIs. Use the layout engine standalone. Render to terminal, or (experimental) Canvas, or DOM
+- **Most complete terminal protocol support** — 100+ escape sequences, all auto-negotiated: 12 OSC (hyperlinks, clipboard, palette, text sizing, semantic prompts, notifications), 35+ CSI (cursor, mouse modes, paste, focus, sync output, device queries), 50+ SGR (6 underline styles, underline colors, truecolor, 256-color), full Kitty keyboard (5 flags), full SGR mouse (any-event, drag, wheel)
 
 ## Packages
 
-| Package                              | Description                               |
-| ------------------------------------ | ----------------------------------------- |
-| [`silvery`](packages/)               | Umbrella -- re-exports `@silvery/react`   |
-| [`@silvery/react`](packages/react)   | React reconciler, hooks, renderer         |
-| [`@silvery/term`](packages/term)     | Terminal rendering pipeline, ANSI styling |
-| [`@silvery/ui`](packages/ui)         | Component library (30+ components)        |
-| [`@silvery/theme`](packages/theme)   | Theming with 38 palettes                  |
-| [`@silvery/tea`](packages/tea)       | TEA state machine store                   |
-| [`@silvery/compat`](packages/compat) | Ink/Chalk compatibility layers            |
-| [`@silvery/test`](packages/test)     | Testing utilities and locators            |
-
-## Compatibility
-
-`silvery/ink` and `silvery/chalk` provide compatibility layers for existing React terminal apps. The core API (`Box`, `Text`, `useInput`, `render`) is intentionally familiar -- most existing code works with minimal changes. See the [migration guide](docs/guide/migration.md) for details.
-
-## When to Use Silvery
-
-Silvery is designed for **complex interactive TUIs** — dashboards, editors, kanban boards, chat interfaces. If you need scrollable containers, mouse support, spatial focus, or components that adapt to their size, Silvery provides these out of the box.
-
-For simple one-shot CLI prompts or spinners, mature alternatives with larger plugin ecosystems may be a better fit today.
+| Package         | Description                                                                                |
+| --------------- | ------------------------------------------------------------------------------------------ |
+| `silvery`       | Components, hooks, renderer — the one package you need                                     |
+| `@silvery/test` | Testing utilities and locators                                                             |
+| `@silvery/ink`  | Ink compatibility layer                                                                    |
+| `@silvery/tea`  | Optional [TEA](https://guide.elm-lang.org/architecture/) state management for complex apps |
 
 ## Ecosystem
 
-| Project                                    | What                                                           |
-| ------------------------------------------ | -------------------------------------------------------------- |
-| [Termless](https://termless.dev)           | Headless terminal testing -- like Playwright for terminal apps |
-| [Flexily](https://beorn.github.io/flexily) | Pure JS flexbox layout engine (Yoga-compatible, zero WASM)     |
-| [Loggily](https://beorn.github.io/loggily) | Debug + structured logging + tracing                           |
-
-See the [roadmap](https://silvery.dev/roadmap) for what's next.
-
-## Performance
+| Project                                    | What                                                          |
+| ------------------------------------------ | ------------------------------------------------------------- |
+| [Termless](https://termless.dev)           | Headless terminal testing — like Playwright for terminal apps |
+| [Flexily](https://beorn.github.io/flexily) | Pure JS flexbox layout engine (Yoga-compatible, zero WASM)    |
+| [Loggily](https://beorn.github.io/loggily) | Debug + structured logging + tracing                          |
 
-_Apple M1 Max, Bun 1.3.9. Reproduce: `bun run bench:compare`_
+## Coming
 
-| Scenario                                | Silvery | Ink 5   |
-| --------------------------------------- | ------- | ------- |
-| Cold render (1 component)               | 165 us  | 271 us  |
-| Cold render (1000 components)           | 463 ms  | 541 ms  |
-| Typical interactive update (1000 nodes) | 169 us  | 20.7 ms |
-| Layout (50-node kanban)                 | 57 us   | 88 us   |
+- **Renderers** — Canvas 2D, Web DOM (experimental today, production later)
+- **Frameworks** — Svelte, Solid.js, Vue adapters
+- **@silvery/tea** — Structured state management with commands, keybindings, effects-as-data
 
-**Why the difference?** Interactive updates (cursor move, scroll, toggle) typically change one or two nodes. Silvery's per-node dirty tracking updates only those nodes — 169 us for a 1000-node tree. Traditional full-tree renderers re-render the entire React tree and run complete layout on every state change — 20.7 ms. For the updates that dominate interactive use, Silvery is ~100x faster.
-
-Full re-renders where the entire tree changes are comparable or faster in full-tree renderers (simpler string concatenation vs Silvery's 5-phase pipeline). That trade-off is inherent to supporting responsive layout, and full re-renders are rare in interactive apps.
-
-## Documentation
-
-Full docs at [silvery.dev](https://silvery.dev) -- getting started guide, API reference, component catalog, and migration guide.
-
-## Development
-
-```bash
-bun install
-bun test
-bun run lint
-```
+**Runtimes:** Bun >= 1.0 and Node.js >= 18. CLI (`silvery` command) requires Bun.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "silvery",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React terminal UI renderer for complex interactive apps — layout-aware rendering, flexbox, scrolling, and incremental updates",
   "keywords": [
     "ansi",
@@ -38,8 +38,8 @@
   ],
   "files": [
     "src",
-    "bin",
-    "examples"
+    "dist",
+    "bin"
   ],
   "type": "module",
   "main": "src/index.ts",
@@ -49,20 +49,72 @@
       "types": "./src/index.ts",
       "import": "./src/index.ts"
     },
+    "./runtime": {
+      "types": "./src/runtime.ts",
+      "import": "./src/runtime.ts"
+    },
+    "./theme": {
+      "types": "./src/theme.ts",
+      "import": "./src/theme.ts"
+    },
+    "./ui": {
+      "types": "./src/ui.ts",
+      "import": "./src/ui.ts"
+    },
+    "./ui/cli": {
+      "types": "./src/ui/cli.ts",
+      "import": "./src/ui/cli.ts"
+    },
+    "./ui/react": {
+      "types": "./src/ui/react.ts",
+      "import": "./src/ui/react.ts"
+    },
+    "./ui/progress": {
+      "types": "./src/ui/progress.ts",
+      "import": "./src/ui/progress.ts"
+    },
+    "./ui/wrappers": {
+      "types": "./src/ui/wrappers.ts",
+      "import": "./src/ui/wrappers.ts"
+    },
+    "./ui/ansi": {
+      "types": "./src/ui/ansi.ts",
+      "import": "./src/ui/ansi.ts"
+    },
+    "./ui/display": {
+      "types": "./src/ui/display.ts",
+      "import": "./src/ui/display.ts"
+    },
+    "./ui/input": {
+      "types": "./src/ui/input.ts",
+      "import": "./src/ui/input.ts"
+    },
+    "./ui/animation": {
+      "types": "./src/ui/animation.ts",
+      "import": "./src/ui/animation.ts"
+    },
+    "./ui/image": {
+      "types": "./src/ui/image.ts",
+      "import": "./src/ui/image.ts"
+    },
+    "./ui/utils": {
+      "types": "./src/ui/utils.ts",
+      "import": "./src/ui/utils.ts"
+    },
     "./ink": {
-      "types": "./packages/compat/src/ink.ts",
-      "import": "./packages/compat/src/ink.ts"
+      "types": "./packages/ink/src/ink.ts",
+      "import": "./packages/ink/src/ink.ts"
     },
     "./chalk": {
-      "types": "./packages/compat/src/chalk.ts",
-      "import": "./packages/compat/src/chalk.ts"
+      "types": "./packages/ink/src/chalk.ts",
+      "import": "./packages/ink/src/chalk.ts"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "bun build src/index.ts --outdir dist --target node",
+    "build": "bun run scripts/build.ts",
     "test": "bunx --bun vitest run",
     "test:fast": "bunx --bun vitest run --reporter=dot",
     "typecheck": "tsc --noEmit",
@@ -76,9 +128,9 @@
     "release": "changeset publish",
     "theme": "bun packages/theme/src/cli.ts",
     "demo": "bun examples/cli.ts",
-    "compat": "bun packages/compat/scripts/compat-check.ts",
-    "compat:ink": "bun packages/compat/scripts/compat-check.ts ink",
-    "compat:chalk": "bun packages/compat/scripts/compat-check.ts chalk"
+    "compat": "bun packages/ink/scripts/compat-check.ts",
+    "compat:ink": "bun packages/ink/scripts/compat-check.ts ink",
+    "compat:chalk": "bun packages/ink/scripts/compat-check.ts chalk"
   },
   "dependencies": {
     "chalk": "^5.6.2",
@@ -101,7 +153,7 @@
     "playwright": "^1.58.2",
     "react": "^19.0.0",
     "typescript": "^5.5.0",
-    "vimonkey": "github:beorn/vimonkey",
+    "vimonkey": "^0.2.0",
     "vitepress": "^1.5.0",
     "vitepress-plugin-llms": "^1.0.0",
     "vitest": "^4.0.18",

package/src/index.ts

@@ -3,4 +3,70 @@
 
 export const VERSION = "0.0.1"
 
-export * from "@silvery/react"
+// Re-export everything from @silvery/ag-react — local `render` below shadows the re-exported one
+export * from "@silvery/ag-react"
+
+import type { ReactElement } from "react"
+import { render as reactRender, type RenderOptions, type TermDef } from "@silvery/ag-react"
+import type { Term } from "@silvery/ag-react"
+
+/**
+ * Render a React element to the terminal.
+ *
+ * Zero-ceremony entry point — auto-detects the terminal and starts an
+ * interactive app when stdin is a TTY. No need to create a Term first.
+ *
+ * @example Hello World (2 lines)
+ * ```tsx
+ * import { render, Text } from "silvery"
+ * await render(<Text>Hello!</Text>).run()
+ * ```
+ *
+ * @example Interactive counter
+ * ```tsx
+ * import { useState } from "react"
+ * import { render, Box, Text, useInput } from "silvery"
+ *
+ * function Counter() {
+ *   const [count, setCount] = useState(0)
+ *   useInput((input) => {
+ *     if (input === "j") setCount((c) => c + 1)
+ *   })
+ *   return (
+ *     <Box borderStyle="round" padding={1}>
+ *       <Text>Count: {count}</Text>
+ *     </Box>
+ *   )
+ * }
+ *
+ * await render(<Counter />).run()
+ * ```
+ *
+ * @example Static render (explicit)
+ * ```tsx
+ * import { render, Text } from "silvery"
+ * await render(<Text>Report</Text>, { width: 120 })
+ * ```
+ *
+ * When called without a Term or TermDef:
+ * - **TTY detected** → interactive mode (stdin + stdout auto-wired)
+ * - **No TTY** → static mode (renders once and returns)
+ *
+ * Pass a Term or TermDef explicitly to override auto-detection.
+ */
+export function render(
+  element: ReactElement,
+  termOrDef?: Term | TermDef,
+  options?: RenderOptions,
+): ReturnType<typeof reactRender> {
+  // When no term/def is provided and we're in a TTY, auto-wire stdin/stdout
+  // so the app runs interactively (useInput works, app stays alive until exit).
+  if (!termOrDef && process.stdin?.isTTY && process.stdout?.isTTY) {
+    const ttyDef: TermDef = {
+      stdin: process.stdin,
+      stdout: process.stdout,
+    }
+    return reactRender(element, ttyDef, options)
+  }
+  return reactRender(element, termOrDef, options)
+}

package/src/runtime.ts

@@ -0,0 +1,4 @@
+// silvery/runtime — re-exports from @silvery/ag-term/runtime
+// run(), useInput, useExit, createRuntime, and related runtime APIs
+
+export * from "@silvery/ag-term/runtime"

package/src/theme.ts

@@ -0,0 +1,4 @@
+// silvery/theme — re-exports from @silvery/theme
+// Theme tokens, palettes, ThemeProvider, useTheme, color utilities
+
+export * from "@silvery/theme"

package/src/ui/animation.ts

@@ -0,0 +1,2 @@
+// silvery/ui/animation — animation utilities and hooks
+export * from "@silvery/ag-react/ui/animation"

package/src/ui/ansi.ts

@@ -0,0 +1,2 @@
+// silvery/ui/ansi — ANSI rendering utilities
+export * from "@silvery/ag-react/ui/ansi"

package/src/ui/cli.ts

@@ -0,0 +1,2 @@
+// silvery/ui/cli — CLI progress indicators (no React)
+export * from "@silvery/ag-react/ui/cli"

package/src/ui/display.ts

@@ -0,0 +1,2 @@
+// silvery/ui/display — display components
+export * from "@silvery/ag-react/ui/display"

package/src/ui/image.ts

@@ -0,0 +1,2 @@
+// silvery/ui/image — image display (kitty, sixel)
+export * from "@silvery/ag-react/ui/image"

package/src/ui/input.ts

@@ -0,0 +1,2 @@
+// silvery/ui/input — input components
+export * from "@silvery/ag-react/ui/input"

package/src/ui/progress.ts

@@ -0,0 +1,2 @@
+// silvery/ui/progress — task/progress wrappers
+export * from "@silvery/ag-react/ui/progress"

package/src/ui/react.ts

@@ -0,0 +1,2 @@
+// silvery/ui/react — React progress components
+export * from "@silvery/ag-react/ui/react"

package/src/ui/utils.ts

@@ -0,0 +1,2 @@
+// silvery/ui/utils — UI utilities
+export * from "@silvery/ag-react/ui/utils"

package/src/ui/wrappers.ts

@@ -0,0 +1,2 @@
+// silvery/ui/wrappers — task wrappers (fluent task API)
+export * from "@silvery/ag-react/ui/wrappers"

package/src/ui.ts

@@ -0,0 +1,4 @@
+// silvery/ui — re-exports from @silvery/ag-react/ui
+// Component library (progress, CLI, wrappers)
+
+export * from "@silvery/ag-react/ui"

package/examples/CLAUDE.md

@@ -1,75 +0,0 @@
-# Silvery Examples & Showcases
-
-## Directory Structure
-
-| Directory      | What                                                       |
-| -------------- | ---------------------------------------------------------- |
-| `interactive/` | Full apps — run with `bun examples/interactive/<name>.tsx` |
-| `inline/`      | Inline mode examples (no alt screen)                       |
-| `kitty/`       | Kitty protocol demos                                       |
-| `layout/`      | Layout engine examples                                     |
-| `runtime/`     | Runtime layer demos (run, createApp, createStore)          |
-| `playground/`  | Quick prototyping                                          |
-| `web/`         | Browser renderers (DOM, Canvas2D)                          |
-| `screenshots/` | Reference screenshots for visual regression                |
-
-## Making a Great Showcase
-
-### Design Principles
-
-1. **Show, don't tell.** A showcase should demonstrate Silvery features through working UI, not walls of text. Intro text is fine — but collapse it once the demo starts.
-
-2. **Auto-size to content.** `ScrollbackView`/`ScrollbackList` auto-size to their content — no manual height management. The output phase caps output at terminal height independently. Content that exceeds terminal height causes natural terminal scrolling.
-
-3. **Single status bar.** Keep the status bar to one line. Include: context bar, elapsed time, cost, and key hints. Remove anything that doesn't help the user interact.
-
-4. **Conditional headers.** Show feature bullets before the demo starts (when there's space). Collapse to a one-liner once content fills the screen.
-
-5. **Respect terminal width.** Boxes with borders at 120 cols should leave room for the border characters. Test at 80 and 120 cols.
-
-6. **Streaming feels real.** For coding agent demos: thinking spinner (1-2s) → word-by-word text reveal → tool call spinner → output. Use `setInterval` at 50ms with 8-12% fraction increments.
-
-### Scrollback Pattern
-
-Use `ScrollbackList` (or `ScrollbackView`) — they handle terminal height, footer pinning, and overflow automatically:
-
-```tsx
-function App() {
-  return (
-    <ScrollbackList
-      items={items}
-      keyExtractor={(item) => item.id}
-      isFrozen={(item) => item.done}
-      markers={true}
-      footer={<StatusBar />}
-    >
-      {(item) => <ItemView item={item} />}
-    </ScrollbackList>
-  )
-}
-
-await render(<App />, term, { mode: "inline" })
-```
-
-`ScrollbackView` auto-sizes to its content — no manual height management. The output phase independently caps output at terminal height (via `inlineFullRender()`), so content that exceeds the terminal causes natural scrolling. The footer stays pinned at the bottom of the content.
-
-### Theme Tokens
-
-Use semantic `$token` colors instead of hardcoded values:
-
-| Token      | Use for                               |
-| ---------- | ------------------------------------- |
-| `$primary` | Active elements, progress bars, links |
-| `$success` | Completed items, checkmarks           |
-| `$warning` | Caution, compaction                   |
-| `$error`   | Failures, diff removals               |
-| `$muted`   | Secondary info, timestamps            |
-| `$border`  | Default border color                  |
-
-### Testing Showcases
-
-1. **Visual check**: Run in TTY and step through all states
-2. **Resize**: Verify layout adapts to terminal resize
-3. **Scrollback**: After frozen items, scroll up — verify colors/borders preserved
-4. **Width**: Test at 80 and 120 columns
-5. **Fast mode**: `--fast` flag should skip all animation for quick validation

package/examples/_banner.tsx

@@ -1,60 +0,0 @@
-import React from "react"
-import { Box, Text, Strong, Muted, ThemeProvider, getThemeByName, type Theme } from "../src/index.js"
-
-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>
-  )
-}