@archetypeai/ds-cli 0.16.1 → 0.18.0

package/files/ds-manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "archetypeai-design-system",
-	"version": "0.16.1",
+	"version": "0.18.0",
 	"components": [
 		{
 			"name": "alert",
@@ -246,7 +246,7 @@
 			"description": "Syntax-highlighted code display (CodeBlock, shiki; yaml/json/python/shell) and editable code field with JSON-schema validation for YAML (CodeBlockEditor).",
 			"usage": [
 				"`<CodeBlock code language=\"yaml\" />` for read-only code (border built in). `language` accepts `\"yaml\" | \"json\" | \"python\" | \"shell\"` — use `\"shell\"` for bash/sh/curl snippets. Theme switches are CSS-only — no {#key} wrapper needed. Grows to content by default and never clips: whenever its height is constrained — by a `max-h-*` class, by a flex/grid parent like `Dialog.Body`, or by the `maxHeight`/`scroll` props — the internal scroller shows a scrollbar instead. To cap it yourself pass `maxHeight=\"20rem\"` (any CSS length) or the `scroll` shorthand (=600px); neither is needed just to avoid clipping. `showLineNumbers={false}` hides the gutter; `wrap` wraps long lines instead of scrolling horizontally.",
-				"Config editors: `<CodeBlockEditor bind:value bind:valid bind:validating bind:schemaUnavailable schema={jsonSchema} placeholder showDownload downloadBaseName disabled />` + a status badge row driven by the bindables (validating → 'Checking…' spinner; !valid → 'Invalid'; valid+schemaUnavailable → 'YAML parses'; valid → 'Valid YAML'). Grows to content (floor via `minHeight`, default 10rem) and scrolls rather than clips whenever its height is constrained; cap it yourself via `maxHeight` (any length) or `scroll` (=600px). Visually identical to CodeBlock. `language` (same union, default `\"yaml\"`) switches highlighting; live validation runs only for `\"yaml\"` — for other languages `schema` is ignored and `valid` stays true. The download button's extension/MIME follows the language (.yaml/.json/.py/.sh)."
+				"Config editors: `<CodeBlockEditor bind:value bind:valid bind:validating bind:schemaUnavailable schema={jsonSchema} placeholder showDownload downloadBaseName disabled />` + a status badge row driven by the bindables (validating → 'Checking…' spinner; !valid → 'Invalid'; valid+schemaUnavailable → 'YAML parses'; valid → 'Valid YAML'). Grows to content (floor via `minHeight`, default 10rem) and scrolls rather than clips whenever its height is constrained; cap it yourself via `maxHeight` (any length) or `scroll` (=600px). Visually identical to CodeBlock. `language` (same union, default `\"yaml\"`) switches highlighting; live validation runs only for `\"yaml\"` — for other languages `schema` is ignored and `valid` stays true. The download button's extension/MIME follows the language (.yaml/.json/.py/.sh). Validation errors pair what happened with a fix (schema pointers render as `model.learning_rate`, types as plain words); when the schema fails with no field to point at, `schemaFallbackFix=\"...\"` overrides the generic fix line with app-specific guidance."
 			]
 		},
 		{
@@ -300,12 +300,15 @@
 			"name": "counter",
 			"import": "@archetypeai/ds-ui-svelte-console/primitives/counter",
 			"source": "https://design-system-console.archetypeai.workers.dev/r/counter.json",
-			"description": "Odometer pill for a numeric count.",
+			"description": "Odometer for a numeric count: a pill by default, or bare so any number on the page can tick.",
 			"usage": [
 				"Count: `Counter value={412}` rolls only the digit places that changed; past 999 it abbreviates (`1.2K`, `123K`, `1.2M`) so it never grows a fifth column, and the exact number stays in its title + accessible label.",
 				"Absent vs zero vs loading: omit the component entirely when there is no count, pass `value={0}` for an empty one, and `value={null}` while it is still loading (reserves the same width so nothing reflows when it arrives).",
 				"At least, for a list you cannot size: `Counter value={103} atLeast` renders `103+` when the caller has loaded 103 rows and knows only that more exist (keyset pagination, a capped query). The number is the caller's own, not a rounded threshold, and the accessible label reads \"at least 103\". Past 999 the abbreviation truncates instead of rounding, so `1250` shows `1.2K+` and never claims rows nobody loaded. `atLeast` is ignored on `value={0}`, where it would state nothing.",
-				"Tone & size: `tone=\"muted\"` for a quieter pill against busy chrome; `size=\"sm\"` for dense rows (tables, list items). Inside a tab strip use `Tabs.Count`, which re-colors it for the active/inactive trigger."
+				"Three axes, each one thing: `variant` is the treatment (`pill`, the default, or `bare`), `tone` is colour (`solid` or `muted`, and `muted` still reads as muted on a bare counter), and `size` is the box (`sm` for dense rows like tables and list items). Inside a tab strip use `Tabs.Count`, which re-colors it for the active/inactive trigger.",
+				"A number anywhere, not just a pill: `variant=\"bare\" size=\"inherit\"` drops the pill and the mono face and takes the typography of whatever it sits in, so a headline figure, a table cell or a number in running text can roll. It sits on the surrounding baseline and reserves no width of its own, so it can be dropped mid-sentence: `Processed <Counter value={n} variant=\"bare\" size=\"inherit\" exact /> of 2,000 rows.` Size and weight come from the parent (`<span class=\"text-6xl\">`), and the digit row tracks the line height, so it works at any scale.",
+				"Decimals: `decimals={2}` keeps two places (`0.97`, `1.00`) instead of rounding to a whole number, rounding half up like `Math.round(v * 100) / 100`, and is never abbreviated. Use it for a score or a rate; a count stays a whole number.",
+				"Exact digits: `exact` turns off the `1.2K` abbreviation and rolls the whole number. Use it where the reader is meant to read the figure rather than glance at it (a headline, a total in a sentence); leave it off in chrome, where a fifth column would reflow the layout."
 			],
 			"variants": {
 				"counterVariants": {
@@ -314,13 +317,19 @@
 							"solid",
 							"muted"
 						],
+						"variant": [
+							"pill",
+							"bare"
+						],
 						"size": [
 							"default",
-							"sm"
+							"sm",
+							"inherit"
 						]
 					},
 					"defaults": {
 						"tone": "solid",
+						"variant": "pill",
 						"size": "default"
 					}
 				}
@@ -733,7 +742,7 @@
 			"description": "Indeterminate loading bar for route/navigation transitions.",
 			"usage": [
 				"Mount once in the root layout and gate on navigation: `{#if navigating.to}<LoadingBar />{/if}` (SvelteKit `navigating` from `$app/state`). Presentational only — it does not read navigation state itself.",
-				"`position=\"bottom\"` pins it to the viewport bottom; always fixed + full-width. Indeterminate only — for a determinate value bar use `progress`."
+				"`position=\"bottom\"` pins it to the viewport bottom; always fixed + full-width. For navigation only. Work inside a page uses `Progress`: a value when the total is known, `value={null}` when it is not."
 			],
 			"variants": {
 				"loadingBarVariants": {
@@ -792,10 +801,14 @@
 			"name": "progress",
 			"import": "@archetypeai/ds-ui-svelte-console/primitives/progress",
 			"source": "https://design-system-console.archetypeai.workers.dev/r/progress.json",
-			"description": "Determinate progress bar.",
+			"description": "Progress bar: fills to a known value, or sweeps while the total is unknown.",
 			"usage": [
+				"A rolling percentage above the bar is composed, not a prop: wrap a bare Counter and the bar in a `flex flex-col gap-2.5`, with the figure as `<span class=\"font-mono text-6xl\"><Counter value={pct} variant=\"bare\" size=\"inherit\" exact /></span>` and a `text-muted-foreground text-lg` unit beside it. Mark the whole figure row `aria-hidden`: the bar already announces the value through `aria-valuenow`, so the number drawn beside it is presentation, not a second thing to read out.",
 				"Pair with a large mono readout: `<span class=\"font-mono text-4xl\">{value}</span><span class=\"text-muted-foreground text-sm\">%</span>` beside the bar.",
-				"`size=\"sm\"` for compact/inline progress (upload rows); always aria-label."
+				"`size=\"sm\"` for compact/inline progress (upload rows); always aria-label.",
+				"Unknown total vs not started: `value={null}` is work whose total isn't known (a running eval that reports rows scored but no row count). The bar sweeps, drops `aria-valuenow`, sets `aria-busy` and marks `data-indeterminate`. Pass `value={0}` for work with a known total that hasn't moved yet. Show what is known beside the bar (`1,276 rows scored`), never a made-up percentage.",
+				"Reduced motion holds the sweep still in the centre of the track, so it can't be read as partly done.",
+				"`variant=\"running\"` paints the bar in `atai-neutral`, the colour the console uses for a running job (see Badge's status recipe). `success` and `critical` are for finished work."
 			],
 			"variants": {
 				"progressVariants": {
@@ -813,6 +826,7 @@
 					"axes": {
 						"variant": [
 							"default",
+							"running",
 							"success",
 							"critical"
 						]
@@ -833,6 +847,70 @@
 				"Streaming: append rows and set `maxPoints` for a sliding window."
 			]
 		},
+		{
+			"name": "score-bento",
+			"import": "@archetypeai/ds-ui-svelte-console/primitives/score-bento",
+			"source": "https://design-system-console.archetypeai.workers.dev/r/score-bento.json",
+			"description": "Score hero: a 0..1 score as a field of one hundred cells that fills from the bottom-right corner, with the figure rolling up to its value.",
+			"usage": [
+				"`ScoreBento value={0.97} label=\"Macro F1\"` fills 97 cells and rolls the figure to `0.97` (a bare `Counter` with `decimals={2}`). The value is 0..1 and shown to two decimals; round the same way (`Math.round(v * 100) / 100`) anywhere else the page prints this score, so the hero and a list can't disagree on a digit.",
+				"Unscored vs in flight vs scored: `value={null}` renders the empty field and an em dash (no score yet, or a failed run). While the run is going, pass `status=\"running\"` with `value={null}`: a single diagonal sweeps the empty field back and forth without claiming a score, and `valueText` + `meta` carry what is known (`valueText=\"1,276\" meta=\"rows scored\"`). `status=\"completed\"` with a value fills from the corner on first paint and lands the `eyebrow` once the last cell does.",
+				"`status` takes the agent service's eval and optimization statuses as they come (`pending`, `running`, `completed`, `failed`, `cancelled`); only `running` and `completed` move, the rest are still. Reduced motion stills both.",
+				"`tone` picks the colour: `neutral` (the default) paints from the theme's foreground and works for any score; `babyblue` and `yellow` are brand fills; `warning` is the system's warning colour, for a score that needs attention. Which tone a score wears is the caller's decision, e.g. a band map kept beside the thresholds. Scored cells take the tone's token at full strength in both themes, and unscored cells show the bento's background. A new colour is a new tone in `scoreBentoFieldVariants` and `scoreBentoInkVariants`, not a call-site override.",
+				"Around the figure: `eyebrow` is a short line above it (a verdict such as \"Great\"), `meta` a line under it, `valueText` replaces the two-decimal figure with a caller-formatted string, and `trailing` is a top-right line such as a delta against the previous run. `help` is a plain-words explanation of the label, behind an info disc in the top-right corner. `help` renders a Tooltip, so the page needs a `Tooltip.Provider` above it; put one in the app layout rather than wrapping each bento.",
+				"`size=\"compact\"` fits a side panel or another narrow column (a shorter field, `text-7xl` figure); `default` is the page hero. The bento sets no width or grid placement of its own: lay it out with `class` (`md:col-span-7 md:row-span-2` beside two `StatBento`s at `md:col-span-2`)."
+			],
+			"variants": {
+				"scoreBentoVariants": {
+					"axes": {
+						"size": [
+							"default",
+							"compact"
+						]
+					},
+					"defaults": {
+						"size": "default"
+					}
+				},
+				"scoreBentoFieldVariants": {
+					"axes": {
+						"tone": [
+							"neutral",
+							"babyblue",
+							"yellow",
+							"warning"
+						]
+					},
+					"defaults": {
+						"tone": "neutral"
+					}
+				},
+				"scoreBentoInkVariants": {
+					"axes": {
+						"tone": [
+							"neutral",
+							"babyblue",
+							"yellow",
+							"warning"
+						]
+					},
+					"defaults": {
+						"tone": "neutral"
+					}
+				},
+				"scoreBentoValueVariants": {
+					"axes": {
+						"size": [
+							"default",
+							"compact"
+						]
+					},
+					"defaults": {
+						"size": "default"
+					}
+				}
+			}
+		},
 		{
 			"name": "select",
 			"import": "@archetypeai/ds-ui-svelte-console/primitives/select",
@@ -1003,6 +1081,19 @@
 				}
 			}
 		},
+		{
+			"name": "stat-bento",
+			"import": "@archetypeai/ds-ui-svelte-console/primitives/stat-bento",
+			"source": "https://design-system-console.archetypeai.workers.dev/r/stat-bento.json",
+			"description": "Small figure bento: a label top-left, the value bottom-right, one line of context bottom-left. ScoreBento's quiet sibling.",
+			"usage": [
+				"`StatBento label=\"Accuracy\" value=\"0.94\" meta=\"1,203 of 1,276\"`. `value` is a string the caller formats (`0.94`, `12%`, `3m 20s`), so the bento never guesses at precision or units.",
+				"Missing vs pending: pass `value=\"—\"` when the figure does not exist, and say why in `meta` while it is still coming (`meta=\"when complete\"`). Omit `meta` when there is nothing to add; the value keeps its bottom-right place either way.",
+				"Where the bento is too narrow for `meta` and the value side by side, the value wraps under the context line instead of widening the bento, so the bento can go in a two- or three-up grid of any width.",
+				"It sits on the card surface, not a tone, so a coloured `ScoreBento` beside it stays the only coloured thing. It sets no height or grid placement: size and lay it out with `class` (`min-h-28` in a side panel, `md:col-span-2` beside a bento).",
+				"`help` renders a Tooltip info disc in the top-right corner, so the page needs a `Tooltip.Provider` above it; put one in the app layout."
+			]
+		},
 		{
 			"name": "switch",
 			"import": "@archetypeai/ds-ui-svelte-labs/primitives/switch",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archetypeai/ds-cli",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Archetype AI Design System CLI Tool",
   "type": "module",
   "bin": {