@spunto/design-system 0.7.2 → 0.9.0

package/README.md

@@ -55,10 +55,46 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
     xterm.js surface: mount, shared dark ANSI theme, fit-on-resize. No opinion on where
     bytes come from (WebSocket, SSE, a static string) — feed it via the `write`/`writeln`
     ref handle. Opt-in addons through `options` (currently `webLinks`, clickable URLs).
+  - _ImagePull_ — `ImagePull` (+`PullLayer`, `PullLayerStatus`, `ImagePullState`), a Docker
+    image pull drawn as a real UI instead of ANSI art redrawn in a terminal: **one** overall
+    bar whose colour follows the phase (flame downloading → amber unpacking over it → solid
+    green), with the per-layer detail in an expandable list. Presentational only — hand it a
+    snapshot, it draws; throughput and ETA are derived internally. Same `#09090b` surface and
+    ANSI palette as `Terminal`, so the two stack into one object.
 - **`SpuntoProvider` + `toast()`** — the imperative toast system (see below). The
   provider is also the umbrella that mounts the tooltip delay group and the overlay
   portal container the dialogs/selects render into.
 
+## Domain components — `@spunto/design-system/workers`
+
+Everything above is domain-free: a `Button` knows nothing about Spunto. Components
+that **do** know a Spunto concept live behind their own entry point, so the root
+export stays primitives-only and a third-party consumer never carries the notion
+of a worker. **The rule for what comes next: any new component that knows a domain
+concept goes behind a domain sub-export, never in the root entry.**
+
+```tsx
+import { Button, Card } from "@spunto/design-system"        // primitives
+import { WorkerCard } from "@spunto/design-system/workers"  // domain
+```
+
+- **`WorkerCard`** — a Spunto worker as a card: state, author, node, setup
+  progress, git branches, resources, banners, actions. **Purely presentational** —
+  hand it a snapshot plus slots and it draws. The rule that keeps it that way:
+  *everything that CALLS the API is a slot or a callback; everything that DRAWS is
+  in the component.* So the `⋯` menu (`actions`), the footer (`footer`), the link
+  (`href` + `render.link`, never `next/link`), the rebuild (`onRebuild`) and the
+  tag persistence (`onAddTag`/`onRemoveTag`) all stay in the app.
+- **Its bricks, exported individually** because the table view assembles them
+  differently: `WorkerStatusDot`/`WorkerStatusPill` (+`resolveWorkerStatus`,
+  `workerStatusConfig`), `SetupProgress` (+`setupProgress`, `phaseLabel`,
+  `setupTotalMs`), `StepIndicator`, `ResourceBars`, `GitBranchChips`/
+  `GitStatusSummary`, `TagChips` (+`tagColor`), `CreatorAvatar`.
+- **Types are structural**, never the apps' OpenAPI types: the dashboard and
+  Spunto Lite model a worker differently, so `WorkerCardWorker` asks for the
+  minimum, everything optional but `id`, and an unknown state falls back to
+  `pending` instead of throwing.
+
 ## Toasts — `SpuntoProvider` + `toast()`
 
 `SpuntoProvider` is the design system's client umbrella provider. Mount it once
@@ -131,3 +167,7 @@ automatically (see `showcase/vite-plugin-llms.ts`).
 ## Peer requirements
 
 - React 19+, and a **Tailwind CSS v4** pipeline in the consuming app.
+- `lucide-react` is a **regular dependency** (since `0.9.0`): the worker
+  components use ~15 icons, and inlining them as SVG or passing them all as props
+  would have been worse than the dependency. It's tree-shakable and both apps
+  already ship it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -33,6 +33,10 @@
       "types": "./src/colors.ts",
       "import": "./src/colors.ts"
     },
+    "./workers": {
+      "types": "./src/components/workers/index.ts",
+      "import": "./src/components/workers/index.ts"
+    },
     "./fonts": {
       "types": "./src/components/fonts.tsx",
       "import": "./src/components/fonts.tsx"
@@ -53,6 +57,7 @@
     "@xterm/xterm": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {