npm - silvery - Versions diffs - 0.3.0 → 0.4.0 - Mend

silvery 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/README.md +41 -145
package/package.json +64 -12
package/src/index.ts +67 -1
package/src/runtime.ts +4 -0
package/src/theme.ts +4 -0
package/src/ui/animation.ts +2 -0
package/src/ui/ansi.ts +2 -0
package/src/ui/cli.ts +2 -0
package/src/ui/display.ts +2 -0
package/src/ui/image.ts +2 -0
package/src/ui/input.ts +2 -0
package/src/ui/progress.ts +2 -0
package/src/ui/react.ts +2 -0
package/src/ui/utils.ts +2 -0
package/src/ui/wrappers.ts +2 -0
package/src/ui.ts +4 -0
package/examples/CLAUDE.md +0 -75
package/examples/_banner.tsx +0 -60
package/examples/cli.ts +0 -228
package/examples/index.md +0 -101
package/examples/inline/inline-nontty.tsx +0 -98
package/examples/inline/inline-progress.tsx +0 -79
package/examples/inline/inline-simple.tsx +0 -63
package/examples/inline/scrollback.tsx +0 -185
package/examples/interactive/_input-debug.tsx +0 -110
package/examples/interactive/_stdin-test.ts +0 -71
package/examples/interactive/_textarea-bare.tsx +0 -45
package/examples/interactive/aichat/components.tsx +0 -468
package/examples/interactive/aichat/index.tsx +0 -207
package/examples/interactive/aichat/script.ts +0 -460
package/examples/interactive/aichat/state.ts +0 -326
package/examples/interactive/aichat/types.ts +0 -19
package/examples/interactive/app-todo.tsx +0 -198
package/examples/interactive/async-data.tsx +0 -208
package/examples/interactive/cli-wizard.tsx +0 -332
package/examples/interactive/clipboard.tsx +0 -183
package/examples/interactive/components.tsx +0 -463
package/examples/interactive/data-explorer.tsx +0 -506
package/examples/interactive/dev-tools.tsx +0 -379
package/examples/interactive/explorer.tsx +0 -747
package/examples/interactive/gallery.tsx +0 -652
package/examples/interactive/inline-bench.tsx +0 -136
package/examples/interactive/kanban.tsx +0 -267
package/examples/interactive/layout-ref.tsx +0 -185
package/examples/interactive/outline.tsx +0 -171
package/examples/interactive/paste-demo.tsx +0 -198
package/examples/interactive/scroll.tsx +0 -77
package/examples/interactive/search-filter.tsx +0 -240
package/examples/interactive/task-list.tsx +0 -279
package/examples/interactive/terminal.tsx +0 -798
package/examples/interactive/textarea.tsx +0 -103
package/examples/interactive/theme.tsx +0 -336
package/examples/interactive/transform.tsx +0 -256
package/examples/interactive/virtual-10k.tsx +0 -413
package/examples/kitty/canvas.tsx +0 -519
package/examples/kitty/generate-samples.ts +0 -236
package/examples/kitty/image-component.tsx +0 -273
package/examples/kitty/images.tsx +0 -604
package/examples/kitty/input.tsx +0 -371
package/examples/kitty/keys.tsx +0 -378
package/examples/kitty/paint.tsx +0 -1017
package/examples/layout/dashboard.tsx +0 -551
package/examples/layout/live-resize.tsx +0 -290
package/examples/layout/overflow.tsx +0 -51
package/examples/playground/README.md +0 -69
package/examples/playground/build.ts +0 -61
package/examples/playground/index.html +0 -420
package/examples/playground/playground-app.tsx +0 -416
package/examples/runtime/elm-counter.tsx +0 -206
package/examples/runtime/hello-runtime.tsx +0 -73
package/examples/runtime/pipe-composition.tsx +0 -184
package/examples/runtime/run-counter.tsx +0 -78
package/examples/runtime/runtime-counter.tsx +0 -197
package/examples/screenshots/generate.tsx +0 -563
package/examples/scrollback-perf.tsx +0 -230
package/examples/viewer.tsx +0 -654
package/examples/web/build.ts +0 -365
package/examples/web/canvas-app.tsx +0 -80
package/examples/web/canvas.html +0 -89
package/examples/web/dom-app.tsx +0 -81
package/examples/web/dom.html +0 -113
package/examples/web/showcase-app.tsx +0 -107
package/examples/web/showcase.html +0 -34
package/examples/web/showcases/index.tsx +0 -56
package/examples/web/viewer-app.tsx +0 -555
package/examples/web/viewer.html +0 -30
package/examples/web/xterm-app.tsx +0 -105
package/examples/web/xterm.html +0 -118

package/examples/playground/index.html DELETED Viewed

@@ -1,420 +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 Playground</title>
-    <style>
-      :root {
-        --bg-primary: #1a1a2e;
-        --bg-secondary: #16213e;
-        --bg-tertiary: #0f0f1a;
-        --text-primary: #eee;
-        --text-secondary: #808080;
-        --accent-cyan: #4ec9b0;
-        --accent-blue: #9cdcfe;
-        --accent-yellow: #dcdcaa;
-        --border: #333;
-      }
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        background: var(--bg-primary);
-        color: var(--text-primary);
-        font-family:
-          system-ui,
-          -apple-system,
-          "Segoe UI",
-          sans-serif;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
-      /* Header */
-      header {
-        padding: 16px 24px;
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        flex-wrap: wrap;
-      }
-      header h1 {
-        color: var(--accent-cyan);
-        font-size: 1.4rem;
-        font-weight: 600;
-        white-space: nowrap;
-      }
-      header .subtitle {
-        color: var(--text-secondary);
-        font-size: 0.9rem;
-      }
-      /* Preset buttons */
-      .preset-bar {
-        display: flex;
-        gap: 8px;
-        padding: 12px 24px;
-        border-bottom: 1px solid var(--border);
-        background: var(--bg-secondary);
-        flex-wrap: wrap;
-        align-items: center;
-      }
-      .preset-bar label {
-        color: var(--text-secondary);
-        font-size: 0.85rem;
-        margin-right: 4px;
-      }
-      .preset-btn {
-        background: var(--bg-tertiary);
-        color: var(--text-primary);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        padding: 6px 14px;
-        font-size: 0.85rem;
-        cursor: pointer;
-        transition: all 0.15s;
-        font-family: inherit;
-      }
-      .preset-btn:hover {
-        border-color: var(--accent-cyan);
-        color: var(--accent-cyan);
-      }
-      .preset-btn.active {
-        background: var(--accent-cyan);
-        color: var(--bg-primary);
-        border-color: var(--accent-cyan);
-        font-weight: 600;
-      }
-      /* Main area */
-      .main {
-        display: flex;
-        flex: 1;
-        min-height: 0;
-      }
-      /* Canvas container */
-      .canvas-container {
-        flex: 1;
-        position: relative;
-        min-height: 400px;
-        display: flex;
-        align-items: stretch;
-      }
-      #canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-      .canvas-size-label {
-        position: absolute;
-        bottom: 8px;
-        right: 8px;
-        background: rgba(0, 0, 0, 0.7);
-        color: var(--text-secondary);
-        font-size: 0.75rem;
-        padding: 2px 8px;
-        border-radius: 3px;
-        font-family: monospace;
-        pointer-events: none;
-      }
-      /* Sidebar */
-      .sidebar {
-        width: 320px;
-        border-left: 1px solid var(--border);
-        background: var(--bg-secondary);
-        overflow-y: auto;
-        padding: 20px;
-        flex-shrink: 0;
-      }
-      .sidebar h3 {
-        color: var(--accent-blue);
-        font-size: 1rem;
-        margin-bottom: 12px;
-      }
-      .sidebar p {
-        color: var(--text-secondary);
-        font-size: 0.85rem;
-        line-height: 1.6;
-        margin-bottom: 16px;
-      }
-      .sidebar code {
-        background: var(--bg-tertiary);
-        padding: 1px 5px;
-        border-radius: 3px;
-        font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
-        font-size: 0.8rem;
-      }
-      .code-block {
-        background: var(--bg-tertiary);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        padding: 12px;
-        font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
-        font-size: 0.78rem;
-        line-height: 1.5;
-        overflow-x: auto;
-        white-space: pre;
-        color: var(--text-primary);
-        margin-bottom: 16px;
-      }
-      .code-block .keyword {
-        color: #c586c0;
-      }
-      .code-block .component {
-        color: #4ec9b0;
-      }
-      .code-block .string {
-        color: #ce9178;
-      }
-      .code-block .prop {
-        color: #9cdcfe;
-      }
-      .code-block .comment {
-        color: #6a9955;
-      }
-      .section {
-        margin-bottom: 24px;
-        padding-bottom: 20px;
-        border-bottom: 1px solid var(--border);
-      }
-      .section:last-child {
-        border-bottom: none;
-      }
-      .feature-list {
-        list-style: none;
-        padding: 0;
-      }
-      .feature-list li {
-        color: var(--text-secondary);
-        font-size: 0.85rem;
-        padding: 4px 0;
-        padding-left: 16px;
-        position: relative;
-      }
-      .feature-list li::before {
-        content: "\2022";
-        color: var(--accent-cyan);
-        position: absolute;
-        left: 0;
-      }
-      /* Loading state */
-      .loading {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: var(--text-secondary);
-        font-size: 1.1rem;
-      }
-      .loading::after {
-        content: "";
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border: 2px solid var(--border);
-        border-top-color: var(--accent-cyan);
-        border-radius: 50%;
-        margin-left: 12px;
-        animation: spin 0.8s linear infinite;
-      }
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-      /* Responsive */
-      @media (max-width: 900px) {
-        .main {
-          flex-direction: column;
-        }
-        .sidebar {
-          width: 100%;
-          border-left: none;
-          border-top: 1px solid var(--border);
-          max-height: 40vh;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <header>
-      <h1>silvery Canvas Playground</h1>
-      <span class="subtitle">React components rendered to HTML5 Canvas via the silvery rendering pipeline</span>
-    </header>
-    <div class="preset-bar">
-      <label>Examples:</label>
-      <button class="preset-btn active" data-preset="hello">Hello World</button>
-      <button class="preset-btn" data-preset="text">Text Styles</button>
-      <button class="preset-btn" data-preset="colors">Colors</button>
-      <button class="preset-btn" data-preset="flexbox">Flexbox</button>
-      <button class="preset-btn" data-preset="borders">Borders</button>
-      <button class="preset-btn" data-preset="dashboard">Dashboard</button>
-      <button class="preset-btn" data-preset="responsive">Responsive</button>
-    </div>
-    <div class="main">
-      <div class="canvas-container">
-        <canvas id="canvas"></canvas>
-        <div class="canvas-size-label" id="size-label"></div>
-      </div>
-      <div class="sidebar">
-        <div class="section">
-          <h3>How It Works</h3>
-          <p>
-            silvery is a React renderer that computes layout
-            <strong>before</strong> content rendering. Components know their size during render via
-            <code>useContentRect()</code>, not after.
-          </p>
-          <ul class="feature-list">
-            <li>React reconciler builds an <code>InkxNode</code> tree</li>
-            <li>Flexx (pure JS flexbox) computes layout synchronously</li>
-            <li>Content renders to an OffscreenCanvas buffer</li>
-            <li>Buffer is drawn to the visible canvas element</li>
-            <li><code>requestAnimationFrame</code> drives re-renders on state changes</li>
-          </ul>
-        </div>
-        <div class="section">
-          <h3>Canvas Adapter API</h3>
-          <div class="code-block">
-            <span class="keyword">import</span> { <span class="component">renderToCanvas</span>,
-            <span class="component">Box</span>, <span class="component">Text</span>,
-            <span class="component">useContentRect</span> }
-            <span class="keyword">from</span>
-            <span class="string">'silvery/canvas'</span>;
-            <span class="keyword">function</span>
-            <span class="component">App</span>() { <span class="keyword">const</span> { width, height } =
-            <span class="component">useContentRect</span>(); <span class="keyword">return</span> ( &lt;<span
-              class="component"
-              >Box</span
-            >
-            <span class="prop">borderStyle</span>=<span class="string">"single"</span>&gt; &lt;<span class="component"
-              >Text</span
-            >&gt; {width}px x {height}px &lt;/<span class="component">Text</span>&gt; &lt;/<span class="component"
-              >Box</span
-            >&gt; ); }
-            <span class="keyword">const</span> canvas = document.getElementById(<span class="string">'canvas'</span>);
-            <span class="component">renderToCanvas</span>(&lt;<span class="component">App</span>
-            /&gt;, canvas);
-          </div>
-        </div>
-        <div class="section">
-          <h3>Render Targets</h3>
-          <p>
-            silvery supports multiple render targets through its
-            <code>RenderAdapter</code> interface:
-          </p>
-          <ul class="feature-list">
-            <li><strong>Terminal</strong> &mdash; ANSI character grid (production)</li>
-            <li><strong>Canvas 2D</strong> &mdash; pixel buffer (this demo)</li>
-            <li><strong>DOM</strong> &mdash; accessible HTML elements</li>
-            <li><strong>WebGL</strong> &mdash; GPU-accelerated (planned)</li>
-          </ul>
-        </div>
-        <div class="section">
-          <h3>Build &amp; Run</h3>
-          <div class="code-block">
-            <span class="comment"># Build the playground bundle</span>
-            cd vendor/beorn-silvery bun run examples/playground/build.ts
-            <span class="comment"># Open in browser</span>
-            open examples/playground/index.html
-          </div>
-          <p>
-            For a full live-editing playground with Monaco editor and hot reload, see
-            <code>docs/playground-design.md</code>.
-          </p>
-        </div>
-      </div>
-    </div>
-    <script>
-      // Preset button handling
-      const buttons = document.querySelectorAll(".preset-btn")
-      const sizeLabel = document.getElementById("size-label")
-      const canvas = document.getElementById("canvas")
-      let currentPreset = "hello"
-      function setPreset(preset) {
-        currentPreset = preset
-        buttons.forEach((btn) => {
-          btn.classList.toggle("active", btn.dataset.preset === preset)
-        })
-        // Send message to the app (loaded via module script below)
-        window.postMessage({ type: "set-preset", preset }, "*")
-      }
-      buttons.forEach((btn) => {
-        btn.addEventListener("click", () => setPreset(btn.dataset.preset))
-      })
-      // Update size label
-      function updateSizeLabel() {
-        if (canvas && sizeLabel) {
-          sizeLabel.textContent = canvas.width + " x " + canvas.height
-        }
-      }
-      const resizeObserver = new ResizeObserver(() => {
-        requestAnimationFrame(updateSizeLabel)
-      })
-      if (canvas) resizeObserver.observe(canvas)
-      updateSizeLabel()
-      // Keyboard shortcuts for switching presets
-      const presetKeys = {
-        1: "hello",
-        2: "text",
-        3: "colors",
-        4: "flexbox",
-        5: "borders",
-        6: "dashboard",
-        7: "responsive",
-      }
-      document.addEventListener("keydown", (e) => {
-        if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return
-        const preset = presetKeys[e.key]
-        if (preset) setPreset(preset)
-      })
-    </script>
-    <script type="module" src="./dist/playground-app.js"></script>
-  </body>
-</html>