@spunto/design-system 0.9.0 → 0.9.2
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.
- package/README.md +9 -35
- package/package.json +2 -6
- package/src/components/terminal-panel.tsx +695 -0
- package/src/components/terminal.tsx +152 -1
- package/src/index.ts +13 -6
- package/src/utils.ts +0 -23
- package/src/components/workers/creator-avatar.tsx +0 -38
- package/src/components/workers/git-branch-chips.tsx +0 -120
- package/src/components/workers/index.ts +0 -35
- package/src/components/workers/resource-bars.tsx +0 -100
- package/src/components/workers/setup-progress.tsx +0 -130
- package/src/components/workers/tag-chips.tsx +0 -132
- package/src/components/workers/tag-color.ts +0 -28
- package/src/components/workers/types.ts +0 -44
- package/src/components/workers/worker-card.tsx +0 -305
- package/src/components/workers/worker-status.tsx +0 -181
package/README.md
CHANGED
|
@@ -54,7 +54,15 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
|
|
|
54
54
|
- _Terminal_ — `Terminal` (+`TerminalHandle`, `TerminalOptions`), a transport-agnostic
|
|
55
55
|
xterm.js surface: mount, shared dark ANSI theme, fit-on-resize. No opinion on where
|
|
56
56
|
bytes come from (WebSocket, SSE, a static string) — feed it via the `write`/`writeln`
|
|
57
|
-
ref handle. Opt-in addons through `options` (
|
|
57
|
+
ref handle. Opt-in addons through `options` (`webLinks` for clickable URLs, `search`
|
|
58
|
+
for the find API). The handle also reads the buffer back (`getContent`, for copy/
|
|
59
|
+
download) and reports viewport movement (`onViewportChange`, for tail following).
|
|
60
|
+
- _TerminalPanel_ — `TerminalPanel` (+`TerminalPanelStatus`), the **frame** around a
|
|
61
|
+
`Terminal`: a composable bar (title, mono subtitle, status dot, reconnect, free
|
|
62
|
+
`actions` slot) and the states pages used to re-improvise — `placeholder`/`loading`
|
|
63
|
+
instead of an ad-hoc empty box, `status` instead of `[connection closed]` written in
|
|
64
|
+
ANSI into the log. Opt-in bar tools, all off by default: `search`, `followTail`,
|
|
65
|
+
`copy`, `download`. Its ref *is* the wrapped `TerminalHandle`.
|
|
58
66
|
- _ImagePull_ — `ImagePull` (+`PullLayer`, `PullLayerStatus`, `ImagePullState`), a Docker
|
|
59
67
|
image pull drawn as a real UI instead of ANSI art redrawn in a terminal: **one** overall
|
|
60
68
|
bar whose colour follows the phase (flame downloading → amber unpacking over it → solid
|
|
@@ -65,36 +73,6 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
|
|
|
65
73
|
provider is also the umbrella that mounts the tooltip delay group and the overlay
|
|
66
74
|
portal container the dialogs/selects render into.
|
|
67
75
|
|
|
68
|
-
## Domain components — `@spunto/design-system/workers`
|
|
69
|
-
|
|
70
|
-
Everything above is domain-free: a `Button` knows nothing about Spunto. Components
|
|
71
|
-
that **do** know a Spunto concept live behind their own entry point, so the root
|
|
72
|
-
export stays primitives-only and a third-party consumer never carries the notion
|
|
73
|
-
of a worker. **The rule for what comes next: any new component that knows a domain
|
|
74
|
-
concept goes behind a domain sub-export, never in the root entry.**
|
|
75
|
-
|
|
76
|
-
```tsx
|
|
77
|
-
import { Button, Card } from "@spunto/design-system" // primitives
|
|
78
|
-
import { WorkerCard } from "@spunto/design-system/workers" // domain
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
- **`WorkerCard`** — a Spunto worker as a card: state, author, node, setup
|
|
82
|
-
progress, git branches, resources, banners, actions. **Purely presentational** —
|
|
83
|
-
hand it a snapshot plus slots and it draws. The rule that keeps it that way:
|
|
84
|
-
*everything that CALLS the API is a slot or a callback; everything that DRAWS is
|
|
85
|
-
in the component.* So the `⋯` menu (`actions`), the footer (`footer`), the link
|
|
86
|
-
(`href` + `render.link`, never `next/link`), the rebuild (`onRebuild`) and the
|
|
87
|
-
tag persistence (`onAddTag`/`onRemoveTag`) all stay in the app.
|
|
88
|
-
- **Its bricks, exported individually** because the table view assembles them
|
|
89
|
-
differently: `WorkerStatusDot`/`WorkerStatusPill` (+`resolveWorkerStatus`,
|
|
90
|
-
`workerStatusConfig`), `SetupProgress` (+`setupProgress`, `phaseLabel`,
|
|
91
|
-
`setupTotalMs`), `StepIndicator`, `ResourceBars`, `GitBranchChips`/
|
|
92
|
-
`GitStatusSummary`, `TagChips` (+`tagColor`), `CreatorAvatar`.
|
|
93
|
-
- **Types are structural**, never the apps' OpenAPI types: the dashboard and
|
|
94
|
-
Spunto Lite model a worker differently, so `WorkerCardWorker` asks for the
|
|
95
|
-
minimum, everything optional but `id`, and an unknown state falls back to
|
|
96
|
-
`pending` instead of throwing.
|
|
97
|
-
|
|
98
76
|
## Toasts — `SpuntoProvider` + `toast()`
|
|
99
77
|
|
|
100
78
|
`SpuntoProvider` is the design system's client umbrella provider. Mount it once
|
|
@@ -167,7 +145,3 @@ automatically (see `showcase/vite-plugin-llms.ts`).
|
|
|
167
145
|
## Peer requirements
|
|
168
146
|
|
|
169
147
|
- React 19+, and a **Tailwind CSS v4** pipeline in the consuming app.
|
|
170
|
-
- `lucide-react` is a **regular dependency** (since `0.9.0`): the worker
|
|
171
|
-
components use ~15 icons, and inlining them as SVG or passing them all as props
|
|
172
|
-
would have been worse than the dependency. It's tree-shakable and both apps
|
|
173
|
-
already ship it.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spunto/design-system",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,10 +33,6 @@
|
|
|
33
33
|
"types": "./src/colors.ts",
|
|
34
34
|
"import": "./src/colors.ts"
|
|
35
35
|
},
|
|
36
|
-
"./workers": {
|
|
37
|
-
"types": "./src/components/workers/index.ts",
|
|
38
|
-
"import": "./src/components/workers/index.ts"
|
|
39
|
-
},
|
|
40
36
|
"./fonts": {
|
|
41
37
|
"types": "./src/components/fonts.tsx",
|
|
42
38
|
"import": "./src/components/fonts.tsx"
|
|
@@ -53,11 +49,11 @@
|
|
|
53
49
|
},
|
|
54
50
|
"dependencies": {
|
|
55
51
|
"@xterm/addon-fit": "^0.11.0",
|
|
52
|
+
"@xterm/addon-search": "^0.16.0",
|
|
56
53
|
"@xterm/addon-web-links": "^0.12.0",
|
|
57
54
|
"@xterm/xterm": "^6.0.0",
|
|
58
55
|
"class-variance-authority": "^0.7.1",
|
|
59
56
|
"clsx": "^2.1.1",
|
|
60
|
-
"lucide-react": "^1.7.0",
|
|
61
57
|
"tailwind-merge": "^3.6.0"
|
|
62
58
|
},
|
|
63
59
|
"peerDependencies": {
|