silvery 0.3.0 → 0.4.0

package/examples/web/build.ts

@@ -1,365 +0,0 @@
-#!/usr/bin/env bun
-/**
- * Build web examples
- *
- * Bundles the React apps for browser usage.
- * Run: bun run examples/web/build.ts
- */
-
-import { mkdir, cp, readdir } from "node:fs/promises"
-import { join, dirname } from "node:path"
-
-const __dirname = dirname(new URL(import.meta.url).pathname)
-const distDir = join(__dirname, "dist")
-const docsDistDir = join(__dirname, "../../docs/public/examples/dist")
-
-// Ensure dist directories exist
-await mkdir(distDir, { recursive: true })
-await mkdir(docsDistDir, { recursive: true })
-
-// Browser-safe defines for Node.js globals.
-// loggily and @silvery/ansi access process.env at module init,
-// which throws ReferenceError in browsers where `process` is undefined.
-const browserDefines: Record<string, string> = {
-  "process.env.NODE_ENV": '"production"',
-  "process.env.LOG_LEVEL": "undefined",
-  "process.env.TRACE": "undefined",
-  "process.env.TRACE_FORMAT": "undefined",
-  "process.env.DEBUG": "undefined",
-  "process.env.NO_COLOR": "undefined",
-  "process.env.FORCE_COLOR": "undefined",
-  "process.env.TERM": "undefined",
-  "process.env.TERM_PROGRAM": "undefined",
-  "process.env.COLORTERM": "undefined",
-  "process.env.CI": "undefined",
-  "process.env.GITHUB_ACTIONS": "undefined",
-  "process.env.KITTY_WINDOW_ID": "undefined",
-  "process.env.WT_SESSION": "undefined",
-  "process.env.LANG": "undefined",
-  "process.env.LC_ALL": "undefined",
-  "process.env.LC_CTYPE": "undefined",
-}
-
-// Browser process shim — ansi/logger access process.stdout, process.stdin,
-// process.stderr, and dynamic process.env[key] at module init.
-// The `define` map above handles static process.env.KEY references, but
-// process.stdout/stdin/stderr and process.env[dynamic] need a real object.
-const processShim = `
-// Polyfill Symbol.dispose for Safari and older browsers that lack
-// TC39 Explicit Resource Management. Bun's __using helper uses a
-// polyfilled __dispose, but property definitions like [Symbol.dispose]
-// need the global symbol to exist.
-Symbol.dispose ??= Symbol.for("Symbol.dispose");
-Symbol.asyncDispose ??= Symbol.for("Symbol.asyncDispose");
-if (typeof globalThis.process === "undefined") {
-  globalThis.process = {
-    env: { NODE_ENV: "production" },
-    stdout: { write() {}, columns: 80, rows: 24, isTTY: false },
-    stdin: { isTTY: false, setRawMode() {}, on() {}, resume() {} },
-    stderr: { write() {} },
-    emit() {},
-    on() {},
-    platform: "browser",
-  };
-}
-`
-
-// Plugin to stub Node.js built-in modules that can't be resolved in browsers.
-// Using `external` leaves bare `import "child_process"` in the output, which
-// browsers can't resolve (they require relative paths). This plugin replaces
-// the import with an inline empty module instead.
-const nodeStubPlugin: import("bun").BunPlugin = {
-  name: "node-stub",
-  setup(build) {
-    const stubs: Record<string, string> = {
-      child_process: "export function spawnSync() { return { status: 1, stdout: '', stderr: '' } }",
-      "node:process": "export default globalThis.process",
-      "node:zlib": "export function deflateSync(buf) { return buf }",
-    }
-    for (const mod of Object.keys(stubs)) {
-      build.onResolve({ filter: new RegExp(`^${mod}$`) }, (args) => ({
-        path: args.path,
-        namespace: "node-stub",
-      }))
-      build.onLoad({ filter: new RegExp(`^${mod}$`), namespace: "node-stub" }, (args) => ({
-        contents: stubs[args.path]!,
-        loader: "js",
-      }))
-    }
-  },
-}
-
-// Shared build options for all browser targets.
-// External: packages not needed in browser builds.
-// yoga-wasm-web is an optional layout engine (WASM, not needed for demos).
-// ws is used by React DevTools connection (not needed in browser).
-// Note: flexture IS bundled — all renderers use it for layout via browser-renderer.ts.
-const sharedOptions = {
-  outdir: distDir,
-  target: "browser" as const,
-  format: "esm" as const,
-  minify: false,
-  sourcemap: "external" as const,
-  define: browserDefines,
-  banner: processShim,
-  external: ["yoga-wasm-web", "ws", "@termless/core"],
-  plugins: [nodeStubPlugin],
-}
-
-// =============================================================================
-// Registry Generation — scan examples and write viewer-registry.ts
-//
-// Showcase metadata is auto-discovered from:
-//   1. Terminal example `meta` exports (ExampleMeta) — the single source of truth
-//   2. SHOWCASES registry keys in web/showcases/index.ts
-// No hardcoded metadata arrays — everything flows from the examples themselves.
-// =============================================================================
-
-const skipFiles = new Set([
-  "interactive/clipboard.tsx",
-  "interactive/_input-debug.tsx",
-  "interactive/_textarea-bare.tsx",
-  "runtime/hello-runtime.tsx",
-  "inline/scrollback.tsx",
-  "inline/inline-nontty.tsx",
-])
-
-const categories = [
-  { dir: "layout", color: "#cba6f7", label: "Layout" },
-  { dir: "interactive", color: "#89dceb", label: "Interactive" },
-  { dir: "runtime", color: "#a6e3a1", label: "Runtime" },
-  { dir: "inline", color: "#fab387", label: "Inline" },
-] as const
-
-interface RegistryEntry {
-  key: string
-  name: string
-  description: string
-  features: string[]
-  category: string
-  categoryColor: string
-  source: string
-  type: "showcase" | "example"
-}
-
-/** Extract ExampleMeta from source text via regex (avoids importing modules at build time). */
-function extractMeta(source: string): { name?: string; description?: string; features: string[] } {
-  const metaMatch = source.match(/export const meta:\s*ExampleMeta\s*=\s*\{([^}]+)\}/)
-  if (!metaMatch) return { features: [] }
-  const metaStr = metaMatch[1]!
-  const nameMatch = metaStr.match(/name:\s*"([^"]+)"/)
-  const descMatch = metaStr.match(/description:\s*"([^"]+)"/)
-  const featMatch = metaStr.match(/features:\s*\[([^\]]*)\]/)
-  return {
-    name: nameMatch?.[1],
-    description: descMatch?.[1],
-    features: featMatch?.[1]?.match(/"([^"]+)"/g)?.map((s) => s.replace(/"/g, "")) ?? [],
-  }
-}
-
-/** Map from SHOWCASES registry keys to their terminal example source paths.
- *  Flagship showcases and their legacy aliases both map to the same source. */
-const SHOWCASE_SOURCE_MAP: Record<string, string> = {
-  // Flagship keys
-  aichat: "interactive/aichat/index.tsx",
-  gallery: "interactive/gallery.tsx",
-  kanban: "interactive/kanban.tsx",
-  explorer: "interactive/explorer.tsx",
-  wizard: "interactive/cli-wizard.tsx",
-  dashboard: "layout/dashboard.tsx",
-  terminal: "interactive/terminal.tsx",
-  components: "interactive/components.tsx",
-  theme: "interactive/theme.tsx",
-
-  // Legacy / additional keys
-  "ai-chat": "interactive/aichat/index.tsx",
-  "cli-wizard": "interactive/cli-wizard.tsx",
-  "dev-tools": "interactive/dev-tools.tsx",
-  "data-explorer": "interactive/data-explorer.tsx",
-  scroll: "interactive/scroll.tsx",
-  "search-filter": "interactive/search-filter.tsx",
-  transform: "interactive/transform.tsx",
-  textarea: "interactive/textarea.tsx",
-}
-
-async function generateRegistry(): Promise<void> {
-  const entries: RegistryEntry[] = []
-
-  // --- Showcase entries: auto-discover from SHOWCASES keys + terminal meta ---
-  const { SHOWCASES } = await import("./showcases/index.js")
-  for (const key of Object.keys(SHOWCASES)) {
-    const sourcePath = SHOWCASE_SOURCE_MAP[key]
-    let name = key
-    let description = ""
-    let features: string[] = []
-
-    if (sourcePath) {
-      // Read meta from the terminal example source
-      const source = await Bun.file(join(__dirname, "..", sourcePath)).text()
-      const meta = extractMeta(source)
-      if (meta.name) name = meta.name
-      if (meta.description) description = meta.description
-      features = meta.features
-    }
-
-    entries.push({
-      key: `showcase-${key}`,
-      name,
-      description,
-      features,
-      category: "Showcases",
-      categoryColor: "#f9e2af",
-      source: "",
-      type: "showcase",
-    })
-  }
-
-  // --- Scan example directories ---
-  for (const cat of categories) {
-    const dir = join(__dirname, "..", cat.dir)
-    const files = (await readdir(dir)).filter((f) => f.endsWith(".tsx") && !skipFiles.has(`${cat.dir}/${f}`))
-
-    for (const file of files.sort()) {
-      const source = await Bun.file(join(dir, file)).text()
-      const key = file.replace(".tsx", "")
-      const meta = extractMeta(source)
-
-      entries.push({
-        key,
-        name: meta.name ?? key,
-        description: meta.description ?? "",
-        features: meta.features,
-        category: cat.label,
-        categoryColor: cat.color,
-        source,
-        type: "example",
-      })
-    }
-  }
-
-  // Write registry file
-  const registryContent = `// AUTO-GENERATED by build.ts — do not edit manually
-
-export interface ExampleEntry {
-  key: string
-  name: string
-  description: string
-  features: string[]
-  category: string
-  categoryColor: string
-  source: string
-  type: "showcase" | "example"
-}
-
-export const REGISTRY: ExampleEntry[] = ${JSON.stringify(entries, null, 2)}
-`
-  await Bun.write(join(__dirname, "viewer-registry.ts"), registryContent)
-}
-
-// Generate registry before building (viewer-app imports it)
-await generateRegistry()
-
-// Build canvas app
-const canvasResult = await Bun.build({
-  entrypoints: [join(__dirname, "canvas-app.tsx")],
-  ...sharedOptions,
-})
-
-if (!canvasResult.success) {
-  console.error("Canvas build failed:")
-  for (const log of canvasResult.logs) {
-    console.error(log)
-  }
-  process.exit(1)
-}
-
-// Build DOM app
-const domResult = await Bun.build({
-  entrypoints: [join(__dirname, "dom-app.tsx")],
-  ...sharedOptions,
-})
-
-if (!domResult.success) {
-  console.error("DOM build failed:")
-  for (const log of domResult.logs) {
-    console.error(log)
-  }
-  process.exit(1)
-}
-
-// Build xterm app
-const xtermResult = await Bun.build({
-  entrypoints: [join(__dirname, "xterm-app.tsx")],
-  ...sharedOptions,
-})
-
-if (!xtermResult.success) {
-  console.error("xterm build failed:")
-  for (const log of xtermResult.logs) {
-    console.error(log)
-  }
-  process.exit(1)
-}
-
-// Build showcase app (use-case demos for docs site)
-const showcaseResult = await Bun.build({
-  entrypoints: [join(__dirname, "showcase-app.tsx")],
-  ...sharedOptions,
-})
-
-if (!showcaseResult.success) {
-  console.error("Showcase build failed:")
-  for (const log of showcaseResult.logs) {
-    console.error(log)
-  }
-  process.exit(1)
-}
-
-// Build viewer app (unified example browser)
-const viewerResult = await Bun.build({
-  entrypoints: [join(__dirname, "viewer-app.tsx")],
-  ...sharedOptions,
-})
-
-if (!viewerResult.success) {
-  console.error("Viewer build failed:")
-  for (const log of viewerResult.logs) {
-    console.error(log)
-  }
-  process.exit(1)
-}
-
-// Copy built files to VitePress public dir for docs site
-await cp(distDir, docsDistDir, { recursive: true })
-
-// Copy showcase.html to docs public dir
-await cp(join(__dirname, "showcase.html"), join(__dirname, "../../docs/public/examples/showcase.html"))
-
-// Copy viewer.html to docs public dir (if it exists)
-try {
-  await cp(join(__dirname, "viewer.html"), join(__dirname, "../../docs/public/examples/viewer.html"))
-} catch {
-  // viewer.html may not exist yet — skip silently
-}
-
-// Copy xterm.css to docs public dir (needed by showcase.html in production)
-await mkdir(join(__dirname, "../../docs/public/examples/xterm"), { recursive: true })
-await cp(
-  join(__dirname, "../../node_modules/@xterm/xterm/css/xterm.css"),
-  join(__dirname, "../../docs/public/examples/xterm/xterm.css"),
-)
-
-console.log("✓ Generated examples/web/viewer-registry.ts")
-console.log("✓ Built examples/web/dist/canvas-app.js")
-console.log("✓ Built examples/web/dist/dom-app.js")
-console.log("✓ Built examples/web/dist/xterm-app.js")
-console.log("✓ Built examples/web/dist/showcase-app.js")
-console.log("✓ Built examples/web/dist/viewer-app.js")
-console.log("✓ Copied to docs/public/examples/dist/")
-console.log("✓ Copied showcase.html to docs/public/examples/")
-console.log("\nOpen in browser:")
-console.log("  examples/web/canvas.html")
-console.log("  examples/web/dom.html")
-console.log("  examples/web/xterm.html")
-console.log("  examples/web/showcase.html?demo=dashboard")
-console.log("  examples/web/viewer.html")

package/examples/web/canvas-app.tsx

@@ -1,80 +0,0 @@
-/**
- * Canvas Adapter Demo
- *
- * Demonstrates silvery rendering React components to Canvas.
- */
-
-import React, { useState } from "react"
-import { renderToCanvas, Box, Text, useContentRect } from "../../packages/ui/src/canvas/index.js"
-
-// Component that shows its dimensions
-function SizeDisplay() {
-  const { width, height } = useContentRect()
-  return (
-    <Text color="green">
-      Size: {Math.round(width)}px × {Math.round(height)}px
-    </Text>
-  )
-}
-
-// Demo component with various styles
-function App() {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Box borderStyle="single" borderColor="cyan" padding={1}>
-        <Box flexDirection="column">
-          <Text bold color="cyan">
-            silvery Canvas Rendering
-          </Text>
-          <SizeDisplay />
-        </Box>
-      </Box>
-
-      <Box marginTop={1} borderStyle="round" borderColor="magenta" padding={1}>
-        <Box flexDirection="column">
-          <Text color="magenta">Text Styles</Text>
-          <Box flexDirection="row" gap={2}>
-            <Text>Normal</Text>
-            <Text bold>Bold</Text>
-            <Text italic>Italic</Text>
-          </Box>
-          <Box flexDirection="row" gap={2}>
-            <Text underline>Underline</Text>
-            <Text strikethrough>Strike</Text>
-            <Text underlineStyle="curly" underlineColor="red">
-              Curly
-            </Text>
-          </Box>
-        </Box>
-      </Box>
-
-      <Box marginTop={1} flexDirection="row" gap={1}>
-        <Box backgroundColor="red" padding={1}>
-          <Text color="white">Red</Text>
-        </Box>
-        <Box backgroundColor="green" padding={1}>
-          <Text color="black">Green</Text>
-        </Box>
-        <Box backgroundColor="blue" padding={1}>
-          <Text color="white">Blue</Text>
-        </Box>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text dim>Layout by Flexx, rendered to OffscreenCanvas, drawn to visible canvas</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// Mount to canvas
-const canvas = document.getElementById("canvas") as HTMLCanvasElement
-if (canvas) {
-  const instance = renderToCanvas(<App />, canvas, {
-    fontSize: 14,
-    fontFamily: "monospace",
-  })
-
-  // Expose for debugging
-  ;(window as any).silveryInstance = instance
-}

package/examples/web/canvas.html

@@ -1,89 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>silvery Canvas Demo</title>
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        padding: 20px;
-        background: #1a1a2e;
-        color: #eee;
-        font-family: system-ui, sans-serif;
-      }
-      h1 {
-        color: #4ec9b0;
-        margin-bottom: 10px;
-      }
-      p {
-        color: #808080;
-        margin-top: 0;
-      }
-      #canvas {
-        border: 1px solid #333;
-        display: block;
-      }
-      .info {
-        margin-top: 20px;
-        padding: 15px;
-        background: #16213e;
-        border-radius: 4px;
-      }
-      .info h3 {
-        color: #9cdcfe;
-        margin-top: 0;
-      }
-      .info ul {
-        margin: 0;
-        padding-left: 20px;
-      }
-      .info li {
-        margin: 5px 0;
-      }
-      code {
-        background: #0f0f1a;
-        padding: 2px 6px;
-        border-radius: 3px;
-        font-family: monospace;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>silvery Canvas Adapter</h1>
-    <p>React components rendered to HTML5 Canvas via silvery</p>
-
-    <canvas id="canvas" width="500" height="300"></canvas>
-
-    <div class="info">
-      <h3>How it works</h3>
-      <ul>
-        <li>React components use <code>&lt;Box&gt;</code> and <code>&lt;Text&gt;</code> from silvery</li>
-        <li><code>useContentRect()</code> returns pixel dimensions during render</li>
-        <li>Layout computed by Flexture (pure JS flexbox)</li>
-        <li>Rendered to OffscreenCanvas, then drawn to visible canvas</li>
-      </ul>
-    </div>
-
-    <div class="info">
-      <h3>Code</h3>
-      <pre><code>import { renderToCanvas, Box, Text, useContentRect } from '@silvery/term/canvas';
-
-function App() {
-  const { width, height } = useContentRect();
-  return (
-    &lt;Box borderStyle="single"&gt;
-      &lt;Text&gt;Size: {width}px × {height}px&lt;/Text&gt;
-    &lt;/Box&gt;
-  );
-}
-
-renderToCanvas(&lt;App /&gt;, canvas);</code></pre>
-    </div>
-
-    <script type="module" src="./dist/canvas-app.js"></script>
-  </body>
-</html>

package/examples/web/dom-app.tsx

@@ -1,81 +0,0 @@
-/**
- * DOM Adapter Demo
- *
- * Demonstrates silvery rendering React components to DOM elements.
- * Advantages: text selection, accessibility, CSS integration.
- */
-
-import React, { useState } from "react"
-import { renderToDOM, Box, Text, useContentRect } from "../../packages/term/src/dom/index.js"
-
-// Component that shows its dimensions
-function SizeDisplay() {
-  const { width, height } = useContentRect()
-  return (
-    <Text color="green">
-      Size: {Math.round(width)}px × {Math.round(height)}px
-    </Text>
-  )
-}
-
-// Demo component with various styles
-function App() {
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Box borderStyle="single" borderColor="cyan" padding={1}>
-        <Box flexDirection="column">
-          <Text bold color="cyan">
-            silvery DOM Rendering
-          </Text>
-          <SizeDisplay />
-        </Box>
-      </Box>
-
-      <Box marginTop={1} borderStyle="round" borderColor="magenta" padding={1}>
-        <Box flexDirection="column">
-          <Text color="magenta">Text Styles (try selecting!)</Text>
-          <Box flexDirection="row" gap={2}>
-            <Text>Normal</Text>
-            <Text bold>Bold</Text>
-            <Text italic>Italic</Text>
-          </Box>
-          <Box flexDirection="row" gap={2}>
-            <Text underline>Underline</Text>
-            <Text strikethrough>Strike</Text>
-            <Text underlineStyle="wavy" underlineColor="red">
-              Wavy
-            </Text>
-          </Box>
-        </Box>
-      </Box>
-
-      <Box marginTop={1} flexDirection="row" gap={1}>
-        <Box backgroundColor="red" padding={1}>
-          <Text color="white">Red</Text>
-        </Box>
-        <Box backgroundColor="green" padding={1}>
-          <Text color="black">Green</Text>
-        </Box>
-        <Box backgroundColor="blue" padding={1}>
-          <Text color="white">Blue</Text>
-        </Box>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text dim>Text is selectable! Screen readers work. CSS hover states available.</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// Mount to container
-const container = document.getElementById("app") as HTMLElement
-if (container) {
-  const instance = renderToDOM(<App />, container, {
-    fontSize: 14,
-    fontFamily: "monospace",
-  })
-
-  // Expose for debugging
-  ;(window as any).silveryInstance = instance
-}