silvery 0.3.0 → 0.4.1

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 (120) hide show
  1. package/README.md +41 -145
  2. package/dist/chalk.js +3 -0
  3. package/dist/chalk.js.map +11 -0
  4. package/dist/index.js +340 -0
  5. package/dist/index.js.map +282 -0
  6. package/dist/ink.js +129 -0
  7. package/dist/ink.js.map +140 -0
  8. package/dist/runtime.js +394 -0
  9. package/dist/runtime.js.map +286 -0
  10. package/dist/theme.js +343 -0
  11. package/dist/theme.js.map +286 -0
  12. package/dist/ui/animation.js +3 -0
  13. package/dist/ui/animation.js.map +15 -0
  14. package/dist/ui/ansi.js +3 -0
  15. package/dist/ui/ansi.js.map +10 -0
  16. package/dist/ui/cli.js +8 -0
  17. package/dist/ui/cli.js.map +14 -0
  18. package/dist/ui/display.js +4 -0
  19. package/dist/ui/display.js.map +10 -0
  20. package/dist/ui/image.js +4 -0
  21. package/dist/ui/image.js.map +15 -0
  22. package/dist/ui/input.js +3 -0
  23. package/dist/ui/input.js.map +11 -0
  24. package/dist/ui/progress.js +8 -0
  25. package/dist/ui/progress.js.map +20 -0
  26. package/dist/ui/react.js +3 -0
  27. package/dist/ui/react.js.map +15 -0
  28. package/dist/ui/utils.js +3 -0
  29. package/dist/ui/utils.js.map +10 -0
  30. package/dist/ui/wrappers.js +14 -0
  31. package/dist/ui/wrappers.js.map +19 -0
  32. package/dist/ui.js +17 -0
  33. package/dist/ui.js.map +20 -0
  34. package/package.json +67 -15
  35. package/src/index.ts +67 -1
  36. package/src/runtime.ts +4 -0
  37. package/src/theme.ts +4 -0
  38. package/src/ui/animation.ts +2 -0
  39. package/src/ui/ansi.ts +2 -0
  40. package/src/ui/cli.ts +2 -0
  41. package/src/ui/display.ts +2 -0
  42. package/src/ui/image.ts +2 -0
  43. package/src/ui/input.ts +2 -0
  44. package/src/ui/progress.ts +2 -0
  45. package/src/ui/react.ts +2 -0
  46. package/src/ui/utils.ts +2 -0
  47. package/src/ui/wrappers.ts +2 -0
  48. package/src/ui.ts +4 -0
  49. package/examples/CLAUDE.md +0 -75
  50. package/examples/_banner.tsx +0 -60
  51. package/examples/cli.ts +0 -228
  52. package/examples/index.md +0 -101
  53. package/examples/inline/inline-nontty.tsx +0 -98
  54. package/examples/inline/inline-progress.tsx +0 -79
  55. package/examples/inline/inline-simple.tsx +0 -63
  56. package/examples/inline/scrollback.tsx +0 -185
  57. package/examples/interactive/_input-debug.tsx +0 -110
  58. package/examples/interactive/_stdin-test.ts +0 -71
  59. package/examples/interactive/_textarea-bare.tsx +0 -45
  60. package/examples/interactive/aichat/components.tsx +0 -468
  61. package/examples/interactive/aichat/index.tsx +0 -207
  62. package/examples/interactive/aichat/script.ts +0 -460
  63. package/examples/interactive/aichat/state.ts +0 -326
  64. package/examples/interactive/aichat/types.ts +0 -19
  65. package/examples/interactive/app-todo.tsx +0 -198
  66. package/examples/interactive/async-data.tsx +0 -208
  67. package/examples/interactive/cli-wizard.tsx +0 -332
  68. package/examples/interactive/clipboard.tsx +0 -183
  69. package/examples/interactive/components.tsx +0 -463
  70. package/examples/interactive/data-explorer.tsx +0 -506
  71. package/examples/interactive/dev-tools.tsx +0 -379
  72. package/examples/interactive/explorer.tsx +0 -747
  73. package/examples/interactive/gallery.tsx +0 -652
  74. package/examples/interactive/inline-bench.tsx +0 -136
  75. package/examples/interactive/kanban.tsx +0 -267
  76. package/examples/interactive/layout-ref.tsx +0 -185
  77. package/examples/interactive/outline.tsx +0 -171
  78. package/examples/interactive/paste-demo.tsx +0 -198
  79. package/examples/interactive/scroll.tsx +0 -77
  80. package/examples/interactive/search-filter.tsx +0 -240
  81. package/examples/interactive/task-list.tsx +0 -279
  82. package/examples/interactive/terminal.tsx +0 -798
  83. package/examples/interactive/textarea.tsx +0 -103
  84. package/examples/interactive/theme.tsx +0 -336
  85. package/examples/interactive/transform.tsx +0 -256
  86. package/examples/interactive/virtual-10k.tsx +0 -413
  87. package/examples/kitty/canvas.tsx +0 -519
  88. package/examples/kitty/generate-samples.ts +0 -236
  89. package/examples/kitty/image-component.tsx +0 -273
  90. package/examples/kitty/images.tsx +0 -604
  91. package/examples/kitty/input.tsx +0 -371
  92. package/examples/kitty/keys.tsx +0 -378
  93. package/examples/kitty/paint.tsx +0 -1017
  94. package/examples/layout/dashboard.tsx +0 -551
  95. package/examples/layout/live-resize.tsx +0 -290
  96. package/examples/layout/overflow.tsx +0 -51
  97. package/examples/playground/README.md +0 -69
  98. package/examples/playground/build.ts +0 -61
  99. package/examples/playground/index.html +0 -420
  100. package/examples/playground/playground-app.tsx +0 -416
  101. package/examples/runtime/elm-counter.tsx +0 -206
  102. package/examples/runtime/hello-runtime.tsx +0 -73
  103. package/examples/runtime/pipe-composition.tsx +0 -184
  104. package/examples/runtime/run-counter.tsx +0 -78
  105. package/examples/runtime/runtime-counter.tsx +0 -197
  106. package/examples/screenshots/generate.tsx +0 -563
  107. package/examples/scrollback-perf.tsx +0 -230
  108. package/examples/viewer.tsx +0 -654
  109. package/examples/web/build.ts +0 -365
  110. package/examples/web/canvas-app.tsx +0 -80
  111. package/examples/web/canvas.html +0 -89
  112. package/examples/web/dom-app.tsx +0 -81
  113. package/examples/web/dom.html +0 -113
  114. package/examples/web/showcase-app.tsx +0 -107
  115. package/examples/web/showcase.html +0 -34
  116. package/examples/web/showcases/index.tsx +0 -56
  117. package/examples/web/viewer-app.tsx +0 -555
  118. package/examples/web/viewer.html +0 -30
  119. package/examples/web/xterm-app.tsx +0 -105
  120. package/examples/web/xterm.html +0 -118
package/examples/web/dom.html DELETED
@@ -1,113 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>silvery DOM Demo</title>
7
- <style>
8
- * {
9
- box-sizing: border-box;
10
- }
11
- body {
12
- margin: 0;
13
- padding: 20px;
14
- background: #1a1a2e;
15
- color: #eee;
16
- font-family: system-ui, sans-serif;
17
- }
18
- h1 {
19
- color: #4ec9b0;
20
- margin-bottom: 10px;
21
- }
22
- p {
23
- color: #808080;
24
- margin-top: 0;
25
- }
26
- #app {
27
- border: 1px solid #333;
28
- min-height: 300px;
29
- }
30
- .info {
31
- margin-top: 20px;
32
- padding: 15px;
33
- background: #16213e;
34
- border-radius: 4px;
35
- }
36
- .info h3 {
37
- color: #9cdcfe;
38
- margin-top: 0;
39
- }
40
- .info ul {
41
- margin: 0;
42
- padding-left: 20px;
43
- }
44
- .info li {
45
- margin: 5px 0;
46
- }
47
- .comparison {
48
- display: flex;
49
- gap: 20px;
50
- margin-top: 20px;
51
- }
52
- .comparison > div {
53
- flex: 1;
54
- }
55
- .comparison h3 {
56
- margin-top: 0;
57
- }
58
- code {
59
- background: #0f0f1a;
60
- padding: 2px 6px;
61
- border-radius: 3px;
62
- font-family: monospace;
63
- }
64
- </style>
65
- </head>
66
- <body>
67
- <h1>silvery DOM Adapter</h1>
68
- <p>React components rendered to DOM elements via silvery - try selecting text!</p>
69
-
70
- <div id="app"></div>
71
-
72
- <div class="comparison">
73
- <div class="info">
74
- <h3>DOM Advantages</h3>
75
- <ul>
76
- <li>Native text selection</li>
77
- <li>Screen reader accessible</li>
78
- <li>Browser font rendering</li>
79
- <li>CSS hover/focus states</li>
80
- <li>DevTools inspection</li>
81
- </ul>
82
- </div>
83
- <div class="info">
84
- <h3>Canvas Advantages</h3>
85
- <ul>
86
- <li>Pixel-perfect control</li>
87
- <li>Single DOM element</li>
88
- <li>Faster batch updates</li>
89
- <li>Export to image</li>
90
- <li>WebGL upgrade path</li>
91
- </ul>
92
- </div>
93
- </div>
94
-
95
- <div class="info">
96
- <h3>Code</h3>
97
- <pre><code>import { renderToDOM, Box, Text, useContentRect } from '@silvery/term/dom';
98
-
99
- function App() {
100
- const { width, height } = useContentRect();
101
- return (
102
- &lt;Box borderStyle="single"&gt;
103
- &lt;Text&gt;Size: {width}px × {height}px&lt;/Text&gt;
104
- &lt;/Box&gt;
105
- );
106
- }
107
-
108
- renderToDOM(&lt;App /&gt;, container);</code></pre>
109
- </div>
110
-
111
- <script type="module" src="./dist/dom-app.js"></script>
112
- </body>
113
- </html>
package/examples/web/showcase-app.tsx DELETED
@@ -1,107 +0,0 @@
1
- /**
2
- * Showcase Demo Entry Point
3
- *
4
- * Renders silvery showcase components in xterm.js for embedding in VitePress docs.
5
- * Usage: showcase.html?demo=dashboard
6
- */
7
-
8
- import React from "react"
9
- import { Terminal } from "@xterm/xterm"
10
- import { FitAddon } from "@xterm/addon-fit"
11
- import { renderToXterm } from "@silvery/term/xterm/index.ts"
12
- import { SHOWCASES } from "./showcases/index.js"
13
-
14
- // Read demo name from URL params
15
- const params = new URLSearchParams(window.location.search)
16
- const demoName = params.get("demo") || "dashboard"
17
-
18
- // Get the showcase component
19
- const ShowcaseComponent = SHOWCASES[demoName]
20
-
21
- if (!ShowcaseComponent) {
22
- document.body.innerHTML = `<p style="color: red; padding: 20px;">Unknown demo: ${demoName}. Available: ${Object.keys(SHOWCASES).join(", ")}</p>`
23
- } else {
24
- // Set up xterm.js terminal
25
- const termContainer = document.getElementById("terminal") as HTMLElement
26
- if (termContainer) {
27
- const term = new Terminal({
28
- cursorBlink: true,
29
- convertEol: true,
30
- cols: 80,
31
- rows: 24,
32
- fontFamily: "'Cascadia Code', 'Fira Code', 'JetBrains Mono', Menlo, monospace",
33
- fontSize: 14,
34
- theme: {
35
- // Catppuccin Mocha palette — matches @silvery/theme's catppuccinMocha
36
- background: "#1E1E2E",
37
- foreground: "#CDD6F4",
38
- cursor: "#CDD6F4",
39
- cursorAccent: "#1E1E2E",
40
- selectionBackground: "#6C7086",
41
- selectionForeground: "#CDD6F4",
42
- black: "#11111B",
43
- red: "#F38BA8",
44
- green: "#A6E3A1",
45
- yellow: "#F9E2AF",
46
- blue: "#89B4FA",
47
- magenta: "#CBA6F7",
48
- cyan: "#94E2D5",
49
- white: "#A6ADC8",
50
- brightBlack: "#313244",
51
- brightRed: "#FAB387",
52
- brightGreen: "#BEF0B7",
53
- brightYellow: "#FFF0CD",
54
- brightBlue: "#A7C9FF",
55
- brightMagenta: "#F5C2E7",
56
- brightCyan: "#AFF0E4",
57
- brightWhite: "#CDD6F4",
58
- },
59
- })
60
-
61
- const fitAddon = new FitAddon()
62
- term.loadAddon(fitAddon)
63
- term.open(termContainer)
64
- fitAddon.fit()
65
-
66
- const instance = renderToXterm(<ShowcaseComponent />, term, {
67
- input: true, // enables useInput, useMouse, useTerminalFocused
68
- handleFocusCycling: false, // showcases handle Tab/Escape themselves
69
- })
70
-
71
- // Signal to parent (LiveDemo.vue) that the demo loaded successfully
72
- window.parent.postMessage({ type: "silvery-ready" }, "*")
73
-
74
- // Click anywhere on the terminal container to ensure focus
75
- // (browsers restrict auto-focus in iframes, so click-to-focus is essential)
76
- termContainer.addEventListener("click", () => term.focus())
77
-
78
- // Auto-focus terminal so keyboard input works immediately
79
- term.focus()
80
-
81
- // Re-fit and re-render on window resize
82
- // Must use resize() (not refresh()) — clears the old buffer so the
83
- // next render does a full repaint at the new dimensions.
84
- window.addEventListener("resize", () => {
85
- fitAddon.fit()
86
- instance.resize(term.cols, term.rows)
87
- })
88
-
89
- // Clean up when parent frame navigates away (VitePress SPA navigation)
90
- window.addEventListener("message", (event) => {
91
- if (event.data?.type === "silvery-cleanup") {
92
- instance.unmount()
93
- term.dispose()
94
- }
95
- })
96
-
97
- // Also clean up if the iframe is being unloaded (e.g., src removed)
98
- window.addEventListener("pagehide", () => {
99
- instance.unmount()
100
- term.dispose()
101
- })
102
-
103
- // Expose for debugging
104
- ;(window as any).silveryInstance = instance
105
- ;(window as any).xtermTerminal = term
106
- }
107
- }
package/examples/web/showcase.html DELETED
@@ -1,34 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Silvery Showcase</title>
7
- <!-- Local dev path -->
8
- <link rel="stylesheet" href="../../node_modules/@xterm/xterm/css/xterm.css" />
9
- <!-- VitePress production path (copied by build.ts) -->
10
- <link rel="stylesheet" href="./xterm/xterm.css" />
11
- <style>
12
- * {
13
- box-sizing: border-box;
14
- margin: 0;
15
- padding: 0;
16
- }
17
- html,
18
- body {
19
- width: 100%;
20
- height: 100%;
21
- overflow: hidden;
22
- background: #1a1a2e;
23
- }
24
- #terminal {
25
- width: 100%;
26
- height: 100%;
27
- }
28
- </style>
29
- </head>
30
- <body>
31
- <div id="terminal"></div>
32
- <script type="module" src="./dist/showcase-app.js"></script>
33
- </body>
34
- </html>
package/examples/web/showcases/index.tsx DELETED
@@ -1,56 +0,0 @@
1
- /**
2
- * Showcase registry — bridges terminal examples for web rendering.
3
- *
4
- * Each entry maps a URL-friendly key to a terminal example component.
5
- * These are the SAME components used by `bun examples/<name>` — no
6
- * separate web implementations.
7
- *
8
- * showcase-app.tsx renders them via renderToXterm() with input: true,
9
- * giving full useInput/useMouse/useTerminalFocused support.
10
- *
11
- * The 9 flagship showcases have clean URL keys (silvery.dev/examples/<key>):
12
- * aichat, gallery, kanban, explorer, wizard, dashboard, terminal, components, theme
13
- */
14
-
15
- import React from "react"
16
-
17
- // Import components from terminal examples (the single source of truth)
18
- import { Dashboard } from "../../layout/dashboard.js"
19
- import { KanbanBoard } from "../../interactive/kanban.js"
20
- import { CliWizard } from "../../interactive/cli-wizard.js"
21
- import { DevTools } from "../../interactive/dev-tools.js"
22
- import { DataExplorer } from "../../interactive/data-explorer.js"
23
- import { ScrollExample } from "../../interactive/scroll.js"
24
- import { AIChat, SCRIPT } from "../../interactive/aichat/index.js"
25
- import { SearchApp } from "../../interactive/search-filter.js"
26
- import { TransformDemo } from "../../interactive/transform.js"
27
- import { NoteEditor } from "../../interactive/textarea.js"
28
- import { Gallery } from "../../interactive/gallery.js"
29
- import { Explorer } from "../../interactive/explorer.js"
30
- import { TerminalDemo } from "../../interactive/terminal.js"
31
- import { ComponentsApp } from "../../interactive/components.js"
32
- import { ThemeExplorer } from "../../interactive/theme.js"
33
-
34
- /** Registry mapping URL keys to showcase components. */
35
- export const SHOWCASES: Record<string, () => JSX.Element> = {
36
- // --- 9 Flagship Showcases (clean URL keys) ---
37
- aichat: () => <AIChat script={SCRIPT} autoStart={false} fastMode={false} />,
38
- gallery: Gallery,
39
- kanban: KanbanBoard,
40
- explorer: Explorer,
41
- wizard: CliWizard,
42
- dashboard: Dashboard,
43
- terminal: () => <TerminalDemo kittySupported={false} />,
44
- components: ComponentsApp,
45
- theme: ThemeExplorer,
46
-
47
- // --- Additional terminal examples ---
48
- "ai-chat": () => <AIChat script={SCRIPT} autoStart={false} fastMode={false} />,
49
- "cli-wizard": CliWizard,
50
- "dev-tools": DevTools,
51
- "data-explorer": DataExplorer,
52
- scroll: ScrollExample,
53
- "search-filter": SearchApp,
54
- transform: TransformDemo,
55
- textarea: NoteEditor,
56
- }