@cueplusplus/ui 0.11.0 → 0.12.0

package/dist/layout/preview.js

@@ -4,6 +4,7 @@ import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effec
 import { AmbientThemeContext, DensityContext } from "../system/density.js";
 import { OverridesContext } from "../system/overrides.js";
 import { ThemeContext } from "../system/theme-provider.js";
+import { GROUND_CLASSES } from "./_ground.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/preview.tsx
@@ -20,16 +21,29 @@ const BIG_STEP = 64;
 const ROOT_CLASS = "relative flex min-w-0 flex-col rounded-(--radius-surface) border border-border bg-surface-1 text-fg";
 const BENCH_CLASS = "relative flex min-w-0 flex-1 overflow-auto rounded-t-(--radius-surface)";
 /**
-* The stage: centred, dotted in the stage's own `--cue-hair-strong`, and at
-* least three top rungs of the space ladder tall so a preview reserves its room
-* before its specimen arrives. Static literals, because Tailwind scans text.
+* The stage: centred, grounded, and at least three top rungs of the space
+* ladder tall so a preview reserves its room before its specimen arrives.
+* Static literals, because Tailwind scans text.
 *
 * Centred **safely** (`place-items: safe center`): a specimen wider than the
 * stage starts at the stage's edge and overflows at its end, where the bench
 * scrolls to it. Plain `center` split the overflow across both sides, and the
 * left half sat before the scroll origin, where nothing reaches it.
+*
+* **Three pieces rather than one literal, and the seam is where the ground
+* goes.** `cn` preserves the order it is given, so a ground appended after the
+* padding would emit the dot grid in a different place from the one every
+* caller's markup has today — and `/`'s seventeen bare Previews and the group
+* pages' 325 tooled ones are both measured to the byte. Head, ground, tail, in
+* that order, is today's string.
 */
-const STAGE_CLASS = "grid h-full w-full min-h-[calc(var(--cue-space-8)*3)] place-items-center-safe bg-surface-1 bg-[radial-gradient(circle,var(--cue-hair-strong)_1px,transparent_1.3px)] bg-[length:14px_14px] p-(--cue-space-6) text-fg";
+const STAGE_HEAD = "grid h-full w-full min-h-[calc(var(--cue-space-8)*3)] place-items-center-safe";
+const STAGE_TAIL = "p-(--cue-space-6) text-fg";
+/** Which ground a presentation paints when the caller names none (spec §4.1). */
+const DEFAULT_GROUND = {
+	panel: "dots",
+	frame: "none"
+};
 const TOOLS_CLASS = "absolute top-(--cue-space-2) right-(--cue-space-2) z-10 flex items-center gap-px rounded-(--radius-control) border border-border bg-surface-2 p-px";
 /**
 * The room the tools take, kept clear on the stage — only when there are tools.
@@ -52,6 +66,79 @@ const TOOLS_CLASS = "absolute top-(--cue-space-2) right-(--cue-space-2) z-10 fle
 const TOOLS_RESERVE_BENCH = "[--preview-tools-clear:calc(var(--cue-space-2)*2+var(--cue-control-sm)+4px)]";
 const TOOLS_RESERVE_STAGE = "pt-(--preview-tools-clear)";
 const FOOTER_CLASS = "flex min-w-0 items-center gap-(--cue-space-2) border-t border-border px-(--cue-space-4) py-(--cue-space-2)";
+/**
+* A frame's root: no card, no border, no fill. The frame is a thing on a
+* canvas, and the canvas is what paints. `shrink-0` because a canvas is a flex
+* row that scrolls, and a frame that shrank to fit would defeat the scrolling.
+*/
+const FRAME_ROOT_CLASS = "relative flex min-w-0 shrink-0 flex-col gap-(--cue-space-2) text-fg";
+/**
+* A frame's footer: the same row as a panel's, without the rule across the top
+* or the card's horizontal padding — there is no card for either to belong to.
+*/
+const FRAME_FOOTER_CLASS = "flex min-w-0 items-center gap-(--cue-space-2) text-(length:--cue-text-micro) text-fg-subtle";
+/** The row above a frame's stage: the name (or its control), the count, and the tools. */
+const FRAME_LABEL_CLASS = "flex min-w-0 items-center gap-(--cue-space-2) text-(length:--cue-text-label) text-fg-muted";
+/** The name when the caller passed no control for it — the frame's `label`, as text. */
+const FRAME_NAME_CLASS = "min-w-0 truncate font-mono text-(length:--cue-text-label) text-fg";
+/** The count beside it: quieter, and never allowed to shrink the name's truncation away. */
+const FRAME_COUNT_CLASS = "shrink-0 font-mono text-(length:--cue-text-micro) text-fg-subtle";
+/**
+* A frame's tools: pushed to the row's end, and carrying none of the panel's
+* overlay chrome. A frame's stage is transparent, so a toolbar drawn over it
+* would float on the canvas ground with nothing behind it (spec §4.1 Decision 2).
+*/
+const FRAME_TOOLS_CLASS = "ml-auto flex shrink-0 items-center gap-px";
+/**
+* The box that holds the bench and the four marks.
+*
+* One more element than the spec's Decision 3 priced, and it is not avoidable.
+* The bench is `overflow-auto`: a mark positioned inside it is clipped at the
+* padding box and scrolls with the content. The frame's root is no good either
+* — its first child is the label row, so the root's top-left corner is the
+* label's and not the stage's. So the frame gets one `relative` box whose
+* borders are exactly the stage's, and the marks hang off that.
+*/
+const FRAME_BOX_CLASS = "relative flex min-w-0 flex-col";
+/**
+* Captions off, as properties the item reads rather than a prop each item takes.
+*
+* A reader turns captions off for a whole frame from its settings popover,
+* never for one item — so the switch is on the frame and the item obeys it
+* through inheritance.
+*
+* **`opacity: 0`, and deliberately not `visibility: hidden`.** §4.1 Decision 4
+* refuses "removing a hidden caption from the accessibility tree", and
+* `visibility: hidden` does exactly that — a browser drops such a node as
+* surely as it drops a `display: none` one. Zero opacity keeps the box, so
+* nothing re-flows, *and* keeps the caption announced, which is what the
+* refusal is for: the caption is what names the specimen for a reader who
+* cannot see the difference between two of them.
+*
+* **Two properties, declared together here so the pair is never half-applied.**
+* Custom properties are untyped text: `opacity` wants a number and
+* `pointer-events` wants a keyword, so one property cannot carry both. The
+* second is what stops an unpainted caption being clicked, or a drag across the
+* stage selecting words nobody can see.
+*/
+const CAPTIONS_OFF = "[--preview-captions:0] [--preview-captions-pe:none]";
+/**
+* One corner mark: an 11×11 box with a one-pixel cross drawn as two linear
+* gradients — a vertical hairline and a horizontal one — so the mark is a
+* background and not four more elements.
+*
+* Not a border and not an SVG. A border would have to be on the stage, and the
+* stage is the theme island: a frame's chrome that moved with a stage theme is
+* the one thing ruling 7 forbids.
+*/
+const CROSS_CLASS = "pointer-events-none absolute z-10 size-[11px] bg-[linear-gradient(var(--cue-fg-subtle),var(--cue-fg-subtle)),linear-gradient(var(--cue-fg-subtle),var(--cue-fg-subtle))] bg-[length:1px_11px,11px_1px] bg-[position:center,center] bg-no-repeat";
+/** The four corners, each half outside the box so the cross straddles the corner. */
+const CROSS_CORNERS = [
+	"-top-[5px] -left-[5px]",
+	"-top-[5px] -right-[5px]",
+	"-bottom-[5px] -left-[5px]",
+	"-bottom-[5px] -right-[5px]"
+];
 const GRIP_FOCUS = "touch-none outline-none hover:bg-(--cue-border-strong) focus-visible:bg-accent";
 const GRIP_X_CLASS = `absolute top-0 right-0 z-10 h-full w-(--cue-space-2) cursor-col-resize ${GRIP_FOCUS}`;
 const GRIP_Y_CLASS = `absolute bottom-0 left-0 z-10 h-(--cue-space-2) w-full cursor-row-resize ${GRIP_FOCUS}`;
@@ -357,9 +444,18 @@ function Grips({ label, options, size }) {
 	] });
 }
 /**
-* A frame for one component: a stage that is its own theme island, a slot for
+* A card for one component: a stage that is its own theme island, a slot for
 * tools at the top right, and a footer.
 *
+* **Two presentations, one stage.** `"panel"`, the default and what every
+* existing caller gets, is that card: a border, a fill, a dot grid under the
+* specimen, and the tools floating over the stage's top right. `"frame"` is a
+* design-canvas frame — no card, no border, no fill; the name, the count and
+* the tools sit in a row *above* the stage rather than over it, four crosshairs
+* mark the stage's outer corners, and the stage paints nothing by default, so
+* whatever canvas the frame sits on shows through. Everything below holds in
+* both.
+*
 * **The stage is the island; the chrome is not.** `theme`, `mode`, `density`
 * and `font` land on the stage element only, and the stage republishes the
 * theme and density contexts so an overlay opened on it follows it. The tools,
@@ -375,7 +471,7 @@ function Grips({ label, options, size }) {
 * that is under `maxWidth`. Not `Resizable`, which is split panes on an
 * optional peer.
 *
-* Props, not a compound: one stage and two slots, each saying what it is.
+* Props, not a compound: one stage and its slots, each saying what it is.
 *
 * @example
 * <Preview label="Button preview" tools={<IconButton aria-label="Configure Button" icon={Wrench} />}>
@@ -385,8 +481,12 @@ function Grips({ label, options, size }) {
 * <Preview label="Chip preview" theme="terminal" density="compact" resizable>
 *   <Chip tone="accent">Standby</Chip>
 * </Preview>
+* @example
+* <Preview label="Button" presentation="frame" count={3}>
+*   <Button variant="primary">Take cue</Button>
+* </Preview>
 */
-const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, resizable, tools, footer, className, ...elementProps }, ref) {
+const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
 	const outer = React.useContext(ThemeContext);
 	const bench = React.useRef(null);
 	const given = resolveResize(resizable);
@@ -399,10 +499,11 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 		density,
 		font
 	}, outer);
+	const framed = presentation === "frame";
 	const stage = /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-stage",
 		...attributes,
-		className: cn(STAGE_CLASS, options !== null && "flex-1", tools !== void 0 && TOOLS_RESERVE_STAGE),
+		className: cn(STAGE_HEAD, GROUND_CLASSES[ground ?? DEFAULT_GROUND[presentation]], STAGE_TAIL, options !== null && "flex-1", !framed && tools !== void 0 && TOOLS_RESERVE_STAGE, !captions && CAPTIONS_OFF),
 		style: size.height === null ? void 0 : { minHeight: 0 },
 		children: /* @__PURE__ */ jsx(StageScope, {
 			theme,
@@ -411,6 +512,75 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 			children
 		})
 	});
+	const benched = /* @__PURE__ */ jsx("div", {
+		ref: bench,
+		"data-slot": "preview-bench",
+		className: cn(BENCH_CLASS, footer === void 0 && "rounded-b-(--radius-surface)", !framed && tools !== void 0 && TOOLS_RESERVE_BENCH),
+		children: options === null ? stage : /* @__PURE__ */ jsxs("div", {
+			ref: size.sizer,
+			"data-slot": "preview-sizer",
+			className: cn("relative flex flex-col", size.width === null && "w-full"),
+			style: {
+				width: size.width === null ? void 0 : `${size.shownWidth}px`,
+				height: size.height === null ? void 0 : `${size.shownHeight}px`,
+				minWidth: `${options.minWidth}px`,
+				maxWidth: `${options.maxWidth}px`,
+				minHeight: `${options.minHeight}px`,
+				maxHeight: `${options.maxHeight}px`
+			},
+			children: [stage, /* @__PURE__ */ jsx(Grips, {
+				label,
+				options,
+				size
+			})]
+		})
+	});
+	if (framed) return /* @__PURE__ */ jsxs("div", {
+		...elementProps,
+		ref,
+		role: "group",
+		"aria-label": label,
+		"data-slot": "preview",
+		"data-presentation": "frame",
+		className: cn(FRAME_ROOT_CLASS, options !== null && "w-full", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "preview-frame-label",
+				className: FRAME_LABEL_CLASS,
+				children: [
+					name === void 0 ? /* @__PURE__ */ jsx("span", {
+						"data-slot": "preview-name",
+						className: FRAME_NAME_CLASS,
+						children: label
+					}) : name,
+					count === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						"data-slot": "preview-count",
+						className: FRAME_COUNT_CLASS,
+						children: count
+					}),
+					tools === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "preview-tools",
+						className: FRAME_TOOLS_CLASS,
+						children: tools
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "preview-frame",
+				className: FRAME_BOX_CLASS,
+				children: [benched, CROSS_CORNERS.map((corner) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "preview-crosshair",
+					className: cn(CROSS_CLASS, corner)
+				}, corner))]
+			}),
+			footer === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "preview-footer",
+				className: FRAME_FOOTER_CLASS,
+				children: footer
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...elementProps,
 		ref,
@@ -419,29 +589,7 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 		"data-slot": "preview",
 		className: cn(ROOT_CLASS, options !== null && "w-full", className),
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: bench,
-				"data-slot": "preview-bench",
-				className: cn(BENCH_CLASS, footer === void 0 && "rounded-b-(--radius-surface)", tools !== void 0 && TOOLS_RESERVE_BENCH),
-				children: options === null ? stage : /* @__PURE__ */ jsxs("div", {
-					ref: size.sizer,
-					"data-slot": "preview-sizer",
-					className: cn("relative flex flex-col", size.width === null && "w-full"),
-					style: {
-						width: size.width === null ? void 0 : `${size.shownWidth}px`,
-						height: size.height === null ? void 0 : `${size.shownHeight}px`,
-						minWidth: `${options.minWidth}px`,
-						maxWidth: `${options.maxWidth}px`,
-						minHeight: `${options.minHeight}px`,
-						maxHeight: `${options.maxHeight}px`
-					},
-					children: [stage, /* @__PURE__ */ jsx(Grips, {
-						label,
-						options,
-						size
-					})]
-				})
-			}),
+			benched,
 			tools === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "preview-tools",
 				className: TOOLS_CLASS,

package/dist/overlays/drawer.js

@@ -104,7 +104,7 @@ const Drawer$1 = {
 					children: [grabHandle ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "drawer-grab-handle",
 						"aria-hidden": "true",
-						className: cn("shrink-0 rounded-(--radius-full) bg-border-strong", vertical ? "mx-auto my-(--cue-space-2) h-1 w-9" : "my-auto mx-(--cue-space-2) h-9 w-1")
+						className: cn("shrink-0 rounded-full bg-border-strong", vertical ? "mx-auto my-(--cue-space-2) h-1 w-9" : "my-auto mx-(--cue-space-2) h-9 w-1")
 					}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
 						"data-slot": "drawer-content",
 						className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) p-(--cue-space-6)",

package/manifest/components/activity-graph.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "Date and count pairs from the heat-graph package. Levels are classified for you;\ngaps are filled as empty cells.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.run-days"
       }
     },
     {

package/manifest/components/agent-card.json

@@ -76,7 +76,8 @@
       "defaultValue": null,
       "description": "Named capabilities the card advertises.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.skills"
       }
     },
     {

package/manifest/components/agent-pile.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "The roster, in the order it should read. Renders nothing when empty.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "chat.agents"
       }
     },
     {

package/manifest/components/background-inbox.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "Detached runs. The header counts what is ready rather than what is in flight,\nbecause ready is the thing that needs you.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.inbox"
       }
     },
     {

package/manifest/components/bento.json

@@ -254,7 +254,7 @@
     "--cue-surface-1",
     "--cue-surface-2",
     "--cue-text-emphasis",
-    "--cue-text-meta"
+    "--cue-text-micro"
   ],
   "summary": "The unequal grid: tiles of different sizes on one set of tracks, from a closed set of spans.",
   "examples": [

package/manifest/components/breadcrumb.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "The trail, root first. The last entry is the current page.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "layout.show-crumbs"
       }
     },
     {

package/manifest/components/chart-tooltip-content.json

@@ -24,7 +24,8 @@
       "defaultValue": null,
       "description": "One entry per series at the hovered index. Recharts supplies this.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "charts.tooltip-rows"
       }
     },
     {

package/manifest/components/checkpoint-history.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "Points in the run you can fall back to, oldest first.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.checkpoints"
       }
     },
     {

package/manifest/components/code-diff.json

@@ -44,7 +44,8 @@
       "defaultValue": null,
       "description": "Unified diff lines with context, added, or removed kind.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agent.diff-lines"
       }
     },
     {

package/manifest/components/combobox.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "The rows, in display order. Base UI filters them against what is typed.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "forms.fixture-types"
       }
     },
     {

package/manifest/components/comparison-card.json

@@ -27,7 +27,8 @@
       "defaultValue": null,
       "description": "Two or three options. More than that wants a table, not a comparison.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "knowledge.fixture-options"
       }
     },
     {

package/manifest/components/composer-attachment-chip.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "The file this chip stands for.",
       "control": {
-        "kind": "opaque"
+        "kind": "opaque",
+        "fixture": "composer.attachment"
       }
     },
     {

package/manifest/components/composer-context.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "Where the window has gone, and how big it is.",
       "control": {
-        "kind": "opaque"
+        "kind": "opaque",
+        "fixture": "composer.usage"
       }
     }
   ],

package/manifest/components/composer-model-item.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "The model this row offers.",
       "control": {
-        "kind": "opaque"
+        "kind": "opaque",
+        "fixture": "composer.model"
       }
     },
     {

package/manifest/components/composer-person-item.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "The person this row would mention.",
       "control": {
-        "kind": "opaque"
+        "kind": "opaque",
+        "fixture": "composer.person"
       }
     },
     {

package/manifest/components/computer-use.json

@@ -26,7 +26,8 @@
       "defaultValue": null,
       "description": "Actions taken, in order. Each carries the coordinates the cursor moved to.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.clicks"
       }
     },
     {

package/manifest/components/confidence-marker.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "The answer split into claims. Each is underlined according to how well it is\nsupported.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "knowledge.claims"
       }
     },
     {

package/manifest/components/context-breakdown.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "What is occupying the window, in stacking order. Headroom is derived, not passed.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.context"
       }
     },
     {

package/manifest/components/context-usage.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "What is occupying the window, in the order it stacks in the bar. Headroom\nis derived from the limit, never passed.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.window"
       }
     },
     {

package/manifest/components/conversation-search.json

@@ -26,7 +26,8 @@
       "defaultValue": null,
       "description": "Matches in document order. Each carries its own surrounding text so no lookup is\nneeded to render the preview.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "composer.hits"
       }
     },
     {

package/manifest/components/cost-meter.json

@@ -34,7 +34,8 @@
       "defaultValue": null,
       "description": "Per-model breakdown, ordered largest first so the bar reads left to right.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.costs"
       }
     }
   ],

package/manifest/components/day-separator.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "Turns in order. A separator is inserted wherever day changes from the previous\nmessage, so grouping needs no pre-processing.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "thread.days"
       }
     }
   ],

package/manifest/components/document-reference.json

@@ -36,7 +36,8 @@
       "defaultValue": null,
       "description": "The passages the answer drew on, each pinned to a page.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "knowledge.anchors"
       }
     },
     {

package/manifest/components/elements-command-palette.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "Everything runnable. Groups are derived from the entries and keep first-seen order.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "composer.palette"
       }
     },
     {

package/manifest/components/elements-timeline.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "Events in chronological order, past and scheduled together.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.events"
       }
     },
     {

package/manifest/components/elicitation-form.json

@@ -36,7 +36,8 @@
       "defaultValue": null,
       "description": "The schema the server sent, already resolved to display values.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "composer.fields"
       }
     },
     {

package/manifest/components/file-tree.json

@@ -16,7 +16,8 @@
       "defaultValue": null,
       "description": "Flat list in display order. Nesting comes from each node's depth, not from\nchildren arrays.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agent.touched-files"
       }
     },
     {

package/manifest/components/flow-graph.json

@@ -14,7 +14,8 @@
       "defaultValue": null,
       "description": "Every node with its grid position. Layout is explicit; the element runs no solver.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.flow-nodes"
       }
     },
     {
@@ -24,7 +25,8 @@
       "defaultValue": null,
       "description": "Connections by node id. An edge dims until both of its ends are visible.",
       "control": {
-        "kind": "array"
+        "kind": "array",
+        "fixture": "agents.flow-edges"
       }
     },
     {

package/manifest/components/frac.json

@@ -58,7 +58,7 @@
         "Sub",
         "Sup"
       ],
-      "code": "<Specimens>\n  <Specimen label=\"worked through\" wide>\n    <MathBlock label=\"illuminance at the deck\" steps={MATH} visibleSteps={MATH.length} />\n  </Specimen>\n  <Specimen label=\"first step only\" wide>\n    <MathBlock steps={MATH} visibleSteps={1} />\n  </Specimen>\n</Specimens>",
+      "code": "<Specimens>\n  <Specimen label=\"worked through\" wide>\n    <MathBlock label=\"illuminance at the deck\" steps={MATH} visibleSteps={3} />\n  </Specimen>\n  <Specimen label=\"first step only\" wide>\n    <MathBlock steps={MATH} visibleSteps={1} />\n  </Specimen>\n</Specimens>",
       "note": "Maths with the working shown, a step at a time. The expressions are nodes rather than a string, so there is no parser and no KaTeX in the bundle — `Frac` stacks a numerator over a rule, `Sup` and `Sub` set an index upright inside the serif italic, and anything else is text.",
       "interaction": "none. Each step's note says what justified it, which is what turns three lines of algebra into an explanation."
     }