silvery 0.3.0 → 0.4.0

package/examples/playground/playground-app.tsx

@@ -1,416 +0,0 @@
-/**
- * Canvas Playground App
- *
- * Interactive demo showcasing silvery's Canvas adapter with multiple preset examples,
- * live resize, and theme controls. Communicates with the host page via window messages.
- */
-
-import React, { useState, useEffect, useCallback } from "react"
-import { renderToCanvas, Box, Text, useContentRect } from "../../src/canvas/index.js"
-
-// ============================================================================
-// Shared components
-// ============================================================================
-
-function SizeDisplay() {
-  const { width, height } = useContentRect()
-  return (
-    <Text color="$success">
-      {Math.round(width)}px x {Math.round(height)}px
-    </Text>
-  )
-}
-
-function Divider({ color = "$muted" }: { color?: string }) {
-  const { width } = useContentRect()
-  const line = "─".repeat(Math.max(1, Math.floor(width / 8)))
-  return <Text color={color}>{line}</Text>
-}
-
-// ============================================================================
-// Preset: Hello World
-// ============================================================================
-
-function HelloWorld() {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Box borderStyle="single" borderColor="$info" padding={1}>
-        <Box flexDirection="column">
-          <Text bold color="$info">
-            Hello from silvery!
-          </Text>
-          <Text color="$muted">React components rendered to HTML5 Canvas</Text>
-          <SizeDisplay />
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Preset: Text Styles
-// ============================================================================
-
-function TextStyles() {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold color="$warning">
-        Text Styles
-      </Text>
-      <Divider />
-      <Box flexDirection="column" marginTop={1}>
-        <Box flexDirection="row" gap={2}>
-          <Text>Normal</Text>
-          <Text bold>Bold</Text>
-          <Text italic>Italic</Text>
-          <Text bold italic>
-            Bold Italic
-          </Text>
-        </Box>
-        <Box flexDirection="row" gap={2} marginTop={1}>
-          <Text underline>Underline</Text>
-          <Text strikethrough>Strikethrough</Text>
-          <Text dim>Dim</Text>
-        </Box>
-        <Box flexDirection="row" gap={2} marginTop={1}>
-          <Text underlineStyle="double" underline>
-            Double
-          </Text>
-          <Text underlineStyle="curly" underlineColor="$error" underline>
-            Curly Red
-          </Text>
-          <Text underlineStyle="dotted" underline>
-            Dotted
-          </Text>
-          <Text underlineStyle="dashed" underline>
-            Dashed
-          </Text>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Preset: Colors & Backgrounds
-// ============================================================================
-
-function ColorsAndBackgrounds() {
-  const colors = [
-    { bg: "red", fg: "white", label: "Red" },
-    { bg: "green", fg: "black", label: "Green" },
-    { bg: "blue", fg: "white", label: "Blue" },
-    { bg: "yellow", fg: "black", label: "Yellow" },
-    { bg: "magenta", fg: "white", label: "Magenta" },
-    { bg: "cyan", fg: "black", label: "Cyan" },
-  ]
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold color="$warning">
-        Colors and Backgrounds
-      </Text>
-      <Divider />
-      <Box flexDirection="row" gap={1} marginTop={1}>
-        {colors.map(({ bg, fg, label }) => (
-          <Box key={bg} backgroundColor={bg} padding={1}>
-            <Text color={fg}>{label}</Text>
-          </Box>
-        ))}
-      </Box>
-      <Box flexDirection="column" marginTop={1}>
-        <Text color="red">Red text</Text>
-        <Text color="green">Green text</Text>
-        <Text color="blue">Blue text</Text>
-        <Text color="brightYellow">Bright yellow text</Text>
-        <Text color="brightCyan">Bright cyan text</Text>
-        <Text color="#ff6b6b">Custom hex #ff6b6b</Text>
-        <Text color="rgb(147, 130, 220)">Custom RGB</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Preset: Flexbox Layout
-// ============================================================================
-
-function FlexboxLayout() {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold color="$warning">
-        Flexbox Layout
-      </Text>
-      <Divider />
-
-      <Text color="$muted" marginTop={1}>
-        Row (gap=1):
-      </Text>
-      <Box flexDirection="row" gap={1}>
-        <Box borderStyle="single" borderColor="$error" padding={1} flexGrow={1}>
-          <Text color="$error">Col 1</Text>
-        </Box>
-        <Box borderStyle="single" borderColor="$success" padding={1} flexGrow={2}>
-          <Text color="$success">Col 2 (grow=2)</Text>
-        </Box>
-        <Box borderStyle="single" borderColor="$primary" padding={1} flexGrow={1}>
-          <Text color="$primary">Col 3</Text>
-        </Box>
-      </Box>
-
-      <Text color="$muted" marginTop={1}>
-        Nested columns:
-      </Text>
-      <Box flexDirection="row" gap={1}>
-        <Box borderStyle="round" borderColor="$accent" padding={1} flexGrow={1} flexDirection="column">
-          <Text bold color="$accent">
-            Panel A
-          </Text>
-          <Text>Item 1</Text>
-          <Text>Item 2</Text>
-          <Text>Item 3</Text>
-        </Box>
-        <Box borderStyle="round" borderColor="$info" padding={1} flexGrow={1} flexDirection="column">
-          <Text bold color="$info">
-            Panel B
-          </Text>
-          <Text>Item A</Text>
-          <Text>Item B</Text>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Preset: Border Styles
-// ============================================================================
-
-function BorderStyles() {
-  const styles: Array<{ style: string; color: string }> = [
-    { style: "single", color: "$info" },
-    { style: "double", color: "$warning" },
-    { style: "round", color: "$success" },
-    { style: "bold", color: "$accent" },
-  ]
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold color="$warning">
-        Border Styles
-      </Text>
-      <Divider />
-      <Box flexDirection="row" gap={1} marginTop={1}>
-        {styles.map(({ style, color }) => (
-          <Box key={style} borderStyle={style as any} borderColor={color} padding={1} flexGrow={1}>
-            <Box flexDirection="column">
-              <Text bold color={color}>
-                {style}
-              </Text>
-              <Text>border</Text>
-            </Box>
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Preset: Dashboard
-// ============================================================================
-
-function Dashboard() {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Box borderStyle="single" borderColor="$info" padding={1}>
-        <Text bold color="$info">
-          System Dashboard
-        </Text>
-      </Box>
-      <Box flexDirection="row" gap={1} marginTop={1}>
-        <Box borderStyle="round" borderColor="$success" padding={1} flexGrow={1} flexDirection="column">
-          <Text bold color="$success">
-            CPU
-          </Text>
-          <Text color="$success">|||||||....</Text>
-          <Text>65%</Text>
-        </Box>
-        <Box borderStyle="round" borderColor="$warning" padding={1} flexGrow={1} flexDirection="column">
-          <Text bold color="$warning">
-            Memory
-          </Text>
-          <Text color="$warning">|||||||||..</Text>
-          <Text>82%</Text>
-        </Box>
-        <Box borderStyle="round" borderColor="$error" padding={1} flexGrow={1} flexDirection="column">
-          <Text bold color="$error">
-            Disk
-          </Text>
-          <Text color="$error">||||||||||.</Text>
-          <Text>91%</Text>
-        </Box>
-      </Box>
-      <Box borderStyle="single" borderColor="$muted" padding={1} marginTop={1} flexDirection="column">
-        <Text bold>Recent Events</Text>
-        <Text color="$success"> OK api-server healthy</Text>
-        <Text color="$success"> OK database connected</Text>
-        <Text color="$warning"> WARN cache miss rate high</Text>
-        <Text color="$error"> ERR disk space low on /var</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Preset: Responsive
-// ============================================================================
-
-function Responsive() {
-  const { width } = useContentRect()
-  const isWide = width > 350
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold color="$warning">
-        Responsive Layout
-      </Text>
-      <Text color="$muted">Resize the canvas to see layout adapt ({Math.round(width)}px wide)</Text>
-      <Divider />
-      <Box flexDirection={isWide ? "row" : "column"} gap={1} marginTop={1}>
-        <Box borderStyle="single" borderColor="$info" padding={1} flexGrow={1} flexDirection="column">
-          <Text bold color="$info">
-            Main Content
-          </Text>
-          <Text>This panel takes available space.</Text>
-          <Text>Layout: {isWide ? "horizontal" : "vertical"}</Text>
-          <SizeDisplay />
-        </Box>
-        <Box
-          borderStyle="single"
-          borderColor="$accent"
-          padding={1}
-          flexDirection="column"
-          {...(isWide ? { width: 180 } : {})}
-        >
-          <Text bold color="$accent">
-            Sidebar
-          </Text>
-          <Text>Fixed width when wide,</Text>
-          <Text>full width when narrow.</Text>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Presets Registry
-// ============================================================================
-
-const PRESETS: Record<string, { label: string; component: React.FC }> = {
-  hello: { label: "Hello World", component: HelloWorld },
-  text: { label: "Text Styles", component: TextStyles },
-  colors: { label: "Colors", component: ColorsAndBackgrounds },
-  flexbox: { label: "Flexbox", component: FlexboxLayout },
-  borders: { label: "Borders", component: BorderStyles },
-  dashboard: { label: "Dashboard", component: Dashboard },
-  responsive: { label: "Responsive", component: Responsive },
-}
-
-// ============================================================================
-// Root App
-// ============================================================================
-
-function App({ preset: initialPreset }: { preset: string }) {
-  const [currentPreset, setPreset] = useState(initialPreset)
-
-  useEffect(() => {
-    // Listen for preset changes from host page
-    function handleMessage(e: MessageEvent) {
-      if (e.data?.type === "set-preset" && PRESETS[e.data.preset]) {
-        setPreset(e.data.preset)
-      }
-    }
-    window.addEventListener("message", handleMessage)
-    return () => window.removeEventListener("message", handleMessage)
-  }, [])
-
-  const Component = PRESETS[currentPreset]?.component ?? HelloWorld
-  return <Component />
-}
-
-// ============================================================================
-// Mount
-// ============================================================================
-
-const canvas = document.getElementById("canvas") as HTMLCanvasElement
-if (canvas) {
-  // Read initial preset from URL hash
-  const hash = window.location.hash.slice(1)
-  const initialPreset = PRESETS[hash] ? hash : "hello"
-
-  let instance = renderToCanvas(<App preset={initialPreset} />, canvas, {
-    fontSize: 14,
-    fontFamily: "monospace",
-  })
-
-  // Handle resize
-  function handleResize() {
-    const container = canvas.parentElement
-    if (!container) return
-    const rect = container.getBoundingClientRect()
-    const newWidth = Math.floor(rect.width)
-    const newHeight = Math.max(300, Math.floor(rect.height))
-    if (canvas.width !== newWidth || canvas.height !== newHeight) {
-      canvas.width = newWidth
-      canvas.height = newHeight
-      // Re-render with new dimensions
-      instance.unmount()
-      const hash = window.location.hash.slice(1)
-      const preset = PRESETS[hash] ? hash : "hello"
-      instance = renderToCanvas(<App preset={preset} />, canvas, {
-        fontSize: 14,
-        fontFamily: "monospace",
-        width: newWidth,
-        height: newHeight,
-      })
-    }
-  }
-
-  // Listen for preset changes and re-render
-  window.addEventListener("message", (e) => {
-    if (e.data?.type === "set-preset" && PRESETS[e.data.preset]) {
-      window.location.hash = e.data.preset
-      instance.unmount()
-      const container = canvas.parentElement
-      const w = container ? Math.floor(container.getBoundingClientRect().width) : canvas.width
-      const h = container ? Math.max(300, Math.floor(container.getBoundingClientRect().height)) : canvas.height
-      canvas.width = w
-      canvas.height = h
-      instance = renderToCanvas(<App preset={e.data.preset} />, canvas, {
-        fontSize: 14,
-        fontFamily: "monospace",
-        width: w,
-        height: h,
-      })
-    }
-  })
-
-  const resizeObserver = new ResizeObserver(handleResize)
-  const container = canvas.parentElement
-  if (container) resizeObserver.observe(container)
-
-  // Initial size
-  handleResize()
-
-  // Expose for debugging
-  ;(window as any).silveryInstance = instance
-  ;(window as any).PRESETS = Object.keys(PRESETS)
-}
-
-// Export presets list for the host page
-;(window as any).PRESET_LIST = Object.entries(PRESETS).map(([id, { label }]) => ({
-  id,
-  label,
-}))

package/examples/runtime/elm-counter.tsx

@@ -1,206 +0,0 @@
-/**
- * Elm Counter - Layer 1 Example
- *
- * Demonstrates the Elm-style architecture:
- * - User drives the event loop
- * - Pure reducer for state updates
- * - Pure view function for rendering
- *
- * Usage: bun examples/mode3-counter.tsx
- */
-
-import React from "react"
-import { Box, Text, H3, Muted } from "../../src/index.js"
-import {
-  layout,
-  diff,
-  ensureLayoutEngine,
-  createTick,
-  merge,
-  map,
-  takeUntil,
-  type Buffer,
-  type Dims,
-} from "@silvery/term/runtime"
-import type { ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Elm Counter",
-  description: "Pure functional Elm-style: reducer + view, no hooks",
-  features: ["createRuntime()", "Elm architecture", "layout() + diff()"],
-}
-
-// ============================================================================
-// State
-// ============================================================================
-
-interface State {
-  count: number
-  running: boolean
-}
-
-// ============================================================================
-// Events
-// ============================================================================
-
-type Event = { type: "tick" } | { type: "key"; key: string } | { type: "quit" }
-
-// ============================================================================
-// Reducer (pure function)
-// ============================================================================
-
-function reducer(state: State, event: Event): State {
-  switch (event.type) {
-    case "tick":
-      return { ...state, count: state.count + 1 }
-    case "key":
-      if (event.key === "q" || event.key === "\x03") {
-        // q or ctrl+c
-        return { ...state, running: false }
-      }
-      if (event.key === "r") {
-        return { ...state, count: 0 }
-      }
-      return state
-    case "quit":
-      return { ...state, running: false }
-    default:
-      return state
-  }
-}
-
-// ============================================================================
-// View (pure function)
-// ============================================================================
-
-function view(state: State): React.ReactElement {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <H3>Elm Counter Example</H3>
-      <Text> </Text>
-      <Text>
-        Count: <Text color="green">{state.count}</Text>
-      </Text>
-      <Text> </Text>
-      <Muted>Press 'r' to reset, 'q' to quit</Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Event Sources
-// ============================================================================
-
-/**
- * Create a keyboard event source from stdin.
- */
-function createKeyboardSource(signal: AbortSignal): AsyncIterable<Event> {
-  return {
-    async *[Symbol.asyncIterator]() {
-      const stdin = process.stdin
-      stdin.setRawMode(true)
-      stdin.resume()
-      stdin.setEncoding("utf8")
-
-      try {
-        while (!signal.aborted) {
-          const key = await new Promise<string | null>((resolve) => {
-            const onData = (data: string) => {
-              stdin.off("data", onData)
-              resolve(data)
-            }
-            const onAbort = () => {
-              stdin.off("data", onData)
-              resolve(null)
-            }
-            stdin.on("data", onData)
-            signal.addEventListener("abort", onAbort, { once: true })
-          })
-
-          if (key === null || signal.aborted) break
-          yield { type: "key" as const, key }
-        }
-      } finally {
-        stdin.setRawMode(false)
-        stdin.pause()
-      }
-    },
-  }
-}
-
-// ============================================================================
-// Main Loop
-// ============================================================================
-
-async function main() {
-  // Initialize layout engine
-  await ensureLayoutEngine()
-
-  // Get terminal dimensions
-  const dims: Dims = {
-    cols: process.stdout.columns || 80,
-    rows: process.stdout.rows || 24,
-  }
-
-  // Initial state
-  let state: State = { count: 0, running: true }
-
-  // Abort controller for cleanup
-  const controller = new AbortController()
-
-  // Create event sources
-  const ticks = map(createTick(100, controller.signal), () => ({
-    type: "tick" as const,
-  }))
-  const keys = createKeyboardSource(controller.signal)
-
-  // Merge all event sources
-  const events = takeUntil(merge(ticks, keys), controller.signal)
-
-  // Previous buffer for diffing
-  let prevBuffer: Buffer | null = null
-
-  // Clear screen and hide cursor
-  process.stdout.write("\x1b[2J\x1b[H\x1b[?25l")
-
-  try {
-    // Initial render
-    const buffer = layout(view(state), dims)
-    const output = diff(null, buffer)
-    process.stdout.write(output)
-    prevBuffer = buffer
-
-    // Event loop
-    for await (const event of events) {
-      // Update state
-      const newState = reducer(state, event)
-
-      // Check if we should exit
-      if (!newState.running) {
-        break
-      }
-
-      // Only re-render if state changed
-      if (newState !== state) {
-        state = newState
-
-        // Render
-        const buffer = layout(view(state), dims)
-        const output = diff(prevBuffer, buffer)
-        process.stdout.write(output)
-        prevBuffer = buffer
-      }
-    }
-  } finally {
-    // Cleanup
-    controller.abort()
-
-    // Show cursor and reset
-    process.stdout.write("\x1b[?25h\x1b[0m\n")
-  }
-}
-
-// Run
-if (import.meta.main) {
-  main().catch(console.error)
-}

package/examples/runtime/hello-runtime.tsx

@@ -1,73 +0,0 @@
-/**
- * Hello Runtime - Minimal createRuntime Example
- *
- * The simplest possible example using the silvery-loop runtime.
- * Shows basic setup, rendering, and cleanup.
- *
- * Usage: bun examples/hello-runtime.tsx
- */
-
-import React from "react"
-import { Box, Text, H1, Muted } from "../../src/index.js"
-import { createRuntime, ensureLayoutEngine, layout, type Dims, type RenderTarget } from "@silvery/term/runtime"
-import type { ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Hello Runtime",
-  description: "Simplest Layer 1 API: createRuntime(), layout(), Symbol.dispose",
-  features: ["createRuntime()", "layout()", "renderString()"],
-}
-
-// Simple terminal target
-const termTarget: RenderTarget = {
-  write: (frame) => process.stdout.write(frame),
-  getDims: () => ({
-    cols: process.stdout.columns || 80,
-    rows: process.stdout.rows || 24,
-  }),
-}
-
-// Simple view
-function HelloView({ name }: { name: string }): React.ReactElement {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <H1 color="green">Hello, {name}!</H1>
-      <Muted>Welcome to silvery-loop</Muted>
-    </Box>
-  )
-}
-
-async function main() {
-  // Initialize layout engine (required once)
-  await ensureLayoutEngine()
-
-  // Create runtime
-  const runtime = createRuntime({ target: termTarget })
-
-  // Render
-  const buffer = layout(<HelloView name="World" />, runtime.getDims())
-  runtime.render(buffer)
-
-  // Wait a moment to see the output
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-
-  // Update with new content
-  const buffer2 = layout(<HelloView name="silvery-loop" />, runtime.getDims())
-  runtime.render(buffer2)
-
-  // Wait again
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-
-  // Cleanup
-  runtime[Symbol.dispose]()
-
-  console.log("\nDone!")
-}
-
-if (import.meta.main) {
-  try {
-    await main()
-  } catch (e) {
-    console.error(e)
-  }
-}