@parity-app/cli 0.4.0 → 0.5.1

package/dist/{src-CYEKdXm_.mjs → src-C4faIpux.mjs}

@@ -1,3 +1,13 @@
+import "./schema-BpGSCLEu.mjs";
+import { z } from "zod";
+// ../core/src/adapters.ts
+const packageVersions = z.record(z.string(), z.string());
+z.looseObject({
+	name: z.string().optional(),
+	dependencies: packageVersions.optional(),
+	devDependencies: packageVersions.optional(),
+	scripts: z.record(z.string(), z.string()).optional()
+});
 // ../core/src/devices.ts
 const deviceKinds = [
 	"phone",
@@ -254,6 +264,53 @@ function generateId(taken, length = 5) {
 	}
 }
 // ../core/src/document.ts
+const canvasObjectKinds = [
+	"table",
+	"operation",
+	"route"
+];
+const linkEndKinds = [
+	"screen",
+	"component",
+	...canvasObjectKinds
+];
+/** Each type of link, and the kinds it may join, from and to. */
+const linkTypes = {
+	/** A screen shown at a route's URL. */
+	shows: {
+		from: ["screen"],
+		to: ["route"]
+	},
+	/** A screen, route or component that calls an operation. */
+	calls: {
+		from: [
+			"screen",
+			"route",
+			"component"
+		],
+		to: ["operation"]
+	},
+	/** An operation that reads a table. */
+	reads: {
+		from: ["operation"],
+		to: ["table"]
+	},
+	/** An operation that writes to a table. */
+	writes: {
+		from: ["operation"],
+		to: ["table"]
+	}
+};
+/** Whether a link of this type may join these two kinds. */
+function linkAllowed(type, from, to) {
+	const allowed = linkTypes[type];
+	return allowed.from.includes(from) && allowed.to.includes(to);
+}
+const lenses = [
+	"data",
+	"api",
+	"routes"
+];
 const containerKinds = [
 	"screen",
 	"component",
@@ -350,16 +407,97 @@ function parseCanvasDocument(value) {
 		"containers",
 		"notes",
 		"modes",
-		"detection"
+		"detection",
+		"objects",
+		"links",
+		"sources"
 	], "");
 	return compact({
 		version: 3,
 		containers: expectArray(document.containers, "/containers").map((item, index) => parseContainer(item, `/containers/${index}`)),
 		modes: optional(document.modes, (value) => parseModeSettings(value)),
 		notes: optional(document.notes, (value) => expectArray(value, "/notes").map((item, index) => parseNote(item, `/notes/${index}`))),
-		detection: optional(document.detection, (value) => parseDetection(value, "/detection"))
+		detection: optional(document.detection, (value) => parseDetection(value, "/detection")),
+		objects: optional(document.objects, (value) => parseObjects(value, "/objects")),
+		links: optional(document.links, (value) => parseLinks(value, "/links")),
+		sources: optional(document.sources, (value) => parseSources(value, "/sources"))
+	});
+}
+function parsePosition(value, path) {
+	const position = expectObject(value, path);
+	expectKnownKeys(position, ["x", "y"], path);
+	return {
+		x: expectNumber(position.x, `${path}/x`),
+		y: expectNumber(position.y, `${path}/y`)
+	};
+}
+function parseObjects(value, path) {
+	const placed = /* @__PURE__ */ new Set();
+	return expectArray(value, path).map((item, index) => {
+		const at = `${path}/${index}`;
+		const object = expectObject(item, at);
+		expectKnownKeys(object, [
+			"kind",
+			"ref",
+			"position"
+		], at);
+		const kind = expectOneOf(object.kind, canvasObjectKinds, `${at}/kind`);
+		const ref = expectString(object.ref, `${at}/ref`);
+		const key = JSON.stringify([kind, ref]);
+		if (placed.has(key)) throw new TypeError(`${at}: the ${kind} "${ref}" is already on the canvas`);
+		placed.add(key);
+		return {
+			kind,
+			ref,
+			position: parsePosition(object.position, `${at}/position`)
+		};
+	});
+}
+function parseLinkEnd(value, path) {
+	const end = expectObject(value, path);
+	expectKnownKeys(end, ["kind", "ref"], path);
+	return {
+		kind: expectOneOf(end.kind, linkEndKinds, `${path}/kind`),
+		ref: expectString(end.ref, `${path}/ref`)
+	};
+}
+function parseLinks(value, path) {
+	const ids = /* @__PURE__ */ new Set();
+	const types = Object.keys(linkTypes);
+	return expectArray(value, path).map((item, index) => {
+		const at = `${path}/${index}`;
+		const link = expectObject(item, at);
+		expectKnownKeys(link, [
+			"id",
+			"type",
+			"from",
+			"to"
+		], at);
+		const id = expectString(link.id, `${at}/id`);
+		if (ids.has(id)) throw new TypeError(`${at}/id: duplicate link id "${id}"`);
+		ids.add(id);
+		const type = expectOneOf(link.type, types, `${at}/type`);
+		const from = parseLinkEnd(link.from, `${at}/from`);
+		const to = parseLinkEnd(link.to, `${at}/to`);
+		if (!linkAllowed(type, from.kind, to.kind)) {
+			const { from: froms, to: tos } = linkTypes[type];
+			throw new TypeError(`${at}: a ${type} link goes from ${froms.join(" or ")} to ${tos.join(" or ")}, not ${from.kind} to ${to.kind}`);
+		}
+		return {
+			id,
+			type,
+			from,
+			to
+		};
 	});
 }
+function parseSources(value, path) {
+	const sources = expectObject(value, path);
+	expectKnownKeys(sources, lenses, path);
+	const chosen = {};
+	for (const lens of lenses) if (sources[lens] !== void 0) chosen[lens] = expectString(sources[lens], `${path}/${lens}`);
+	return chosen;
+}
 function parseDetection(value, path) {
 	const detection = expectObject(value, path);
 	expectKnownKeys(detection, ["include", "exclude"], path);
@@ -1386,6 +1524,7 @@ function librarySource(library, name, component, path) {
 		library,
 		...component.group ? { group: component.group } : {},
 		...component.parents ? { parents: component.parents.map((parent) => `${library}/${parent}`) } : {},
+		...component.parents && component.parentsFrom ? { parentsFrom: component.parentsFrom } : {},
 		...component.internal ? { internal: true } : {},
 		...component.visual === false ? { visual: false } : {},
 		...component.optionalParents ? { optionalParents: component.optionalParents.map((parent) => `${library}/${parent}`) } : {},
@@ -1425,4 +1564,4 @@ function sampleIds(sample, library) {
 		...sample.children ? { children: sample.children.map(child) } : {}
 	};
 }
-export { viewportHeightProperty as C, lengthToPixels as E, collectCustomProperties as S, deviceKinds as T, paramTypes as _, applyLibraryEdits as a, generateId as b, isSampleElement as c, parentSignals as d, parseLibraryEdits as f, imageFits as g, containerKinds as h, withLibraryContext as i, isSampleRender as l, renderSlotOf as m, librarySource as n, componentEvidence as o, parseLibraryManifest as p, sampleIds as r, isMadeValue as s, componentNode as t, libraryManifestExtension as u, parseCanvasDocument as v, viewportWidthProperty as w, parseModeSettings as x, styleKeys as y };
+export { deviceKinds as A, parseCanvasDocument as C, collectCustomProperties as D, parseModeSettings as E, viewportHeightProperty as O, paramTypes as S, generateId as T, imageFits as _, applyLibraryEdits as a, linkEndKinds as b, isSampleElement as c, parentSignals as d, parseLibraryEdits as f, containerKinds as g, canvasObjectKinds as h, withLibraryContext as i, lengthToPixels as j, viewportWidthProperty as k, isSampleRender as l, renderSlotOf as m, librarySource as n, componentEvidence as o, parseLibraryManifest as p, sampleIds as r, isMadeValue as s, componentNode as t, libraryManifestExtension as u, lenses as v, styleKeys as w, linkTypes as x, linkAllowed as y };

package/dist/{src-CJUvccJO.mjs → src-Cr8pfFJE.mjs}

@@ -1 +1 @@
-export { t as covers, n as registryDir, r as registryEntries } from "./src-y3hdgbK2.mjs";
+export { t as covers, n as registryDir, r as registryEntries } from "./src-5CrSA_RX.mjs";

package/dist/{src-DaCYZuwb.mjs → src-Zm_PYFFH.mjs}

@@ -1,5 +1,5 @@
-import { E as lengthToPixels, S as collectCustomProperties, a as applyLibraryEdits, c as isSampleElement, f as parseLibraryEdits, l as isSampleRender, m as renderSlotOf, p as parseLibraryManifest, s as isMadeValue, u as libraryManifestExtension } from "./src-CYEKdXm_.mjs";
-import "./src-y3hdgbK2.mjs";
+import { D as collectCustomProperties, a as applyLibraryEdits, c as isSampleElement, f as parseLibraryEdits, j as lengthToPixels, l as isSampleRender, m as renderSlotOf, p as parseLibraryManifest, s as isMadeValue, u as libraryManifestExtension } from "./src-C4faIpux.mjs";
+import "./src-5CrSA_RX.mjs";
 import { a as publishedVersions, n as packageFile, o as repositoryFiles, r as publishedSource } from "./published-CdXoUgfD.mjs";
 import { createRequire } from "node:module";
 import { mkdir, readFile, readdir, realpath, rm, stat, writeFile } from "node:fs/promises";
@@ -601,11 +601,12 @@ function listTheme(selector) {
 	const [only] = names;
 	return names.size === 1 ? only : void 0;
 }
-const simpleSelector = /^(?:(?<root>html|:root|:host)(?![\w(-])|\.(?<className>[\w-]+)|\[\s*[\w-]+\s*(?:=\s*(?:"(?<double>[^"]*)"|'(?<single>[^']*)'|(?<bare>[\w-]+))\s*(?:[is]\s*)?)?\]|(?<functional>:(?:not|where|is|host)\())/;
+const simpleSelector = /^(?:(?<root>html|:root|:host)(?![\w(-])|\.(?<className>[\w-]+)|\[\s*(?<attribute>[\w-]+)\s*(?:=\s*(?:"(?<double>[^"]*)"|'(?<single>[^']*)'|(?<bare>[\w-]+))\s*(?:[is]\s*)?)?\]|(?<functional>:(?:not|where|is|host)\())/;
 /** The theme one compound selector (no combinators) names, or undefined when it isn't a theme's. */
 function compoundTheme(part) {
 	let root = false;
 	const names = [];
+	let attribute;
 	let rest = part;
 	while (rest.length > 0) {
 		const match = simpleSelector.exec(rest);
@@ -623,11 +624,14 @@ function compoundTheme(part) {
 			if (!nested) return void 0;
 			root ||= nested.root;
 			if (nested.name !== void 0) names.push(nested.name);
+			attribute ??= nested.attribute;
 			continue;
 		}
 		rest = rest.slice(match[0].length);
 		if (groups.root) root = true;
-		const name = groups.className ?? groups.double ?? groups.single ?? groups.bare;
+		const value = groups.double ?? groups.single ?? groups.bare;
+		if (value !== void 0) attribute = groups.attribute;
+		const name = groups.className ?? value;
 		if (name !== void 0) names.push(name);
 	}
 	if (names.length > 1) return void 0;
@@ -635,7 +639,8 @@ function compoundTheme(part) {
 	if (!root && names.length === 0) return void 0;
 	return {
 		root: root || names[0] === "light",
-		...name === void 0 ? {} : { name }
+		...name === void 0 ? {} : { name },
+		...name !== void 0 && attribute !== void 0 ? { attribute } : {}
 	};
 }
 function matchingParen(text, open) {

package/dist/src-p0vFxRBz.mjs

@@ -0,0 +1,3 @@
+import "./schema-BpGSCLEu.mjs";
+export { a as applyLibraryEdits, t as componentNode, T as generateId, n as librarySource, f as parseLibraryEdits, i as withLibraryContext } from "./src-C4faIpux.mjs";
+import "./src-Zm_PYFFH.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parity-app/cli",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "license": "MIT",
   "type": "module",
   "description": "Drive the Parity app from a terminal or an agent: read state, run edits, take screenshots, serve MCP.",
@@ -44,7 +44,8 @@
   },
   "dependencies": {
     "semver": "^7.8.5",
-    "typescript": "6.0.3"
+    "typescript": "6.0.3",
+    "zod": "4.6.7"
   },
   "devDependencies": {
     "@parity-app/agent": "0.0.0",

package/skills/SKILL.md

@@ -39,7 +39,7 @@ project, pass `tab: "active"` (`--tab active`) and read `get_app_state` for the
 | `get_console`         | `parity console`             | What the project's own code wrote to the console, on the canvas and offscreen.                                                                             |
 | `get_tokens`          | `parity tokens`              | Tokens filtered by category, source or name, with values in every theme.                                                                                   |
 | `get_components`      | `parity components`          | Components, libraries, icon sets and exports left out or failing to render.                                                                                |
-| `get_props`           | `parity props <Component>`   | Props from source; `all` includes passed-through attributes.                                                                                               |
+| `get_props`           | `parity props <Component>`   | Props from source, then what it goes inside and holds, its slots and an example to insert; `all` adds passed-through attributes.                           |
 | `get_tabs`            | `parity tabs`                | The open projects.                                                                                                                                         |
 | `open_project`        | `parity open <folder>`       | Opens a project in a new tab.                                                                                                                              |
 | `read_skill`          | `parity skill [file]`        | This skill.                                                                                                                                                |
@@ -97,7 +97,8 @@ keeping the designs there, so ask before running that in someone's project.
    them with `AddState`, as changes to the base design, not as copies.
 5. **Check every frame.** Screenshot the design in all its states and the modes it shows (`state: "all"`,
    `mode: "shown"`). Run `find_problems` and `check_accessibility` too, and read the warnings `execute` returns: they're
-   usually a token that doesn't exist or a prop the component doesn't take. Fix what you find, then check again.
+   usually a token that doesn't exist or a prop the component doesn't take. A render failure comes first and means a
+   frame wasn't checked. Fix what you find, then check again.
 6. **Say what you did.** Tell the person what changed and what you couldn't verify. Ask them to try anything interactive
    themselves with the Interact tool (I), which hands their mouse and keyboard to the real components.
 

package/skills/execute.md

@@ -29,6 +29,20 @@ held.
   patches with a nonempty `find`, string `replace` (which can be empty), and optional boolean `all`. Invalid requests
   are rejected before reaching the app.
 
+### Warnings
+
+A call that applies can still return warnings. Each finding comes once, with every place it was found. The text puts
+them under "Render failures", "Warnings" and "Suggestions". The structured result's `warningGroups` gives each one's
+`category`, `severity` (`error`, `warning` or `suggestion`), `message`, `count` and `at`, which lists the places as
+`design/node` paths or frames. A render failure means a screenshot or check is missing for that frame, so look into it
+first. `unnamed_layout` is a suggestion for layouts this call added: give each one a name with `Update`.
+
+```js
+// Unnamed rows come back as one suggestion, such as 12 places (team-members/k3x9a, … and 7 more). Name them:
+const rows = Get("team-members", (node, at) => (node.type === "layout" && !node.name ? at.path : undefined))
+rows.forEach((path, index) => Update(path, { name: `Member row ${index + 1}` }))
+```
+
 ## API
 
 ```ts
@@ -75,7 +89,7 @@ SetTokens({ name: value | { theme: value } }): void
 
 // Checking
 Screenshot(design, { state?, mode?, scale? }?): number
-Measure(design, { state?, mode? }?): Layout
+Measure(design, { state?, mode? }?): Layout      // one frame: one state id, one mode id
 Problems(design, { state?, mode? }?): Problem[]
 Accessibility(design, { state?, mode? }?): Finding[]
 
@@ -91,6 +105,9 @@ A design is named by its id or its name. A node is named by `design/node`, where
 by its id alone when only one design has that id. Names aren't unique, so prefer ids once you have them; `Insert`,
 `Copy` and `CreateDesign` return them, and nodes you create with a `name` are listed under "Created" in the result.
 
+A state is named by its id only, as `Designs()` lists it and `AddState` returns it. A state's name in its place fails
+with `unknown_state`, and the error names the id it belongs to.
+
 ## Reading
 
 ### Designs
@@ -131,8 +148,58 @@ Print(Get((node, at) => (node.type === "component" && node.component === "Button
 ### Components and Props
 
 `Components()` is everything a `component` node can name. `Props("Button")` returns the props found in the component's
-source: variants with their options (`variant`, `size`), its own props, and with `{ all: true }` the attributes it
-passes to its element. A prop that isn't listed, or a variant value outside its options, comes back as a warning.
+source: variants with their options (`variant`, `size`), its own props, including those a library's component adds to
+its element's (Nova's `isActive`), and with `{ all: true }` the attributes it passes to its element. A prop that isn't
+listed, or a variant value outside its options, comes back as a warning.
+
+Its `composition` says what it needs around it and holds, before you insert it:
+
+- `role` is `provider` for one that draws nothing and gives the parts inside it their context (`SidebarProvider`),
+  `wrapper` for one other parts go inside (`Sidebar`), and `component` otherwise.
+- `parents` is `listed`, with the `chain` it goes inside, outermost first, and where its library learned that; `none`;
+  or `unknown`, with the `reason`, such as a project component that hasn't drawn yet or an error asking for a provider.
+  An `optional` parent is left out when the ones outside it are already there.
+- `holds` lists the parts that go directly inside it, and `slots` the `key` each slot's layers go under.
+- `example.node` is the component inside its parents with its sample, as the Assets panel inserts it and the Components
+  panel draws it. `example.status` is `drawn` once the component has drawn on the canvas, `failing` with a `reason`, or
+  `untried`.
+
+```js
+// A sidebar goes inside its provider: insert the example, then fill it in.
+const { composition } = Props("nova/Sidebar")
+Print(composition.parents.chain.map((parent) => parent.component))
+const sidebar = Insert("settings/Content", composition.example.node)
+```
+
+Writing the layers yourself works the same way. A provider draws nothing of its own, so the Components panel leaves it
+out, but `Components()` lists it, since the parts inside it throw without it. A part placed without its provider shows
+in `Problems` as a render error that names it.
+
+```js
+// A Nova sidebar, inside the provider its parts need.
+const part = (component, props, children) => ({ type: "component", component, props, slots: { children } })
+const item = (label, isActive) =>
+  part("nova/SidebarMenuItem", {}, [
+    { type: "component", component: "nova/SidebarMenuButton", props: { isActive, children: label } }
+  ])
+CreateDesign({
+  name: "App sidebar",
+  root: {
+    type: "layout",
+    name: "Frame",
+    style: { width: 280, height: 400 },
+    children: [
+      part("nova/SidebarProvider", {}, [
+        part("nova/Sidebar", { collapsible: "none" }, [
+          part("nova/SidebarContent", {}, [
+            part("nova/SidebarMenu", {}, [item("Dashboard", true), item("Members", false)])
+          ])
+        ])
+      ])
+    ]
+  }
+})
+```
 
 ### Icons
 
@@ -158,8 +225,15 @@ Insert("dashboard/Toolbar", {
 
 Each token has a `name`, a `category` (`color`, `font-size`, `radius`, `shadow`, `spacing`, `font`, `font-weight`,
 `leading`, `tracking` and others), a `source` (`semantic` for the project's own variables, `theme` for its styling
-framework's scale) and its `values` per theme. Filter with `GetTokens({ category: "color", source: "semantic" })` or
-`GetTokens({ search: "radius" })`.
+framework's scale, `keyword` for a framework keyword the style fields also take) and its `values` per theme. Filter with
+`GetTokens({ category: "color", source: "semantic" })` or `GetTokens({ search: "radius" })`.
+
+For a circle or a pill, use `radius-full`, Tailwind's `rounded-full`. It's listed under `radius` with
+`source: "keyword"`, and frames draw it as round as the box allows, at any size:
+
+```js
+Update("avatar", { style: { width: 10, height: 10, radius: "radius-full" } })
+```
 
 ### Selection
 
@@ -235,6 +309,25 @@ removes the keys as `null` does.
 its design; to move it to another design, `Copy` it there and `Delete` the original. `Copy` gives the copy fresh ids and
 returns the new id. A design's root can't be deleted; use `Replace`.
 
+The new node and everything in it get fresh ids, so `Replace` throws away the patches on the old node and what was
+inside it: its `Responsive` patches, its changes in every state and its variant options' patches. Replacing a design's
+root clears every state's changes. To keep a node's patches, change it with `Update` instead. The result lists what went
+under "Discarded by Replace" (`discarded` in structured output), with each node's viewports, states and variants:
+
+```text
+Discarded by Replace (reapply what you still want to the new node):
+  dashboard/stats, now k3x9a:
+    Stats (stats): viewports mobile
+```
+
+Put back the ones you still want on the new ids, in the same call or the next. A state's changes go back with
+`UpdateState(design, state, { changes: { [id]: … } })`.
+
+```js
+const stats = Replace("dashboard/Stats", { type: "layout", name: "Stats", style: { direction: "row", gap: 16 } })
+Responsive(stats, "mobile", { style: { direction: "column" } })
+```
+
 ### Responsive
 
 Patches a node in one viewport: `Responsive("dashboard/Stats", "mobile", { style: { columns: 1 } })`. The viewport is a
@@ -320,8 +413,44 @@ Frames draw as the canvas does: instances of a library's component designs (from
 token values not yet saved show, the person's edits and this call's own `SetTokens` alike, so
 `SetTokens({ primary: "red" }); await Screenshot(id)` shows the new value in the same call.
 
-`Measure` lays out one frame and returns its size, whether it overflows sideways, and every node's box (`clipped` when a
-parent cuts it off). `Problems` checks frames for render errors, overflow, clipping and unknown components.
+`Measure` lays out one frame and returns its state, mode and size, whether it overflows sideways, and every node's box
+with the node it's drawn inside (`parent`); a node an ancestor cuts off has `clipped` and that ancestor's box in `clip`.
+`Problems` checks frames for render errors, overflow, clipping and unknown components. Each layout problem has its
+`kind`: `frame-overflow` for a node that sticks out of the frame, by its position or its width, or `clipped` for one an
+ancestor that hides overflow cuts off. It names the `node`, its `box`, the `container` it overflows (the clipping node,
+or the frame, which has no `node`) with that box, and the pixels past each edge in `overflow`. A node past a parent that
+doesn't clip, inside the frame, shows, so it isn't a problem; children going no further than a reported parent are left
+out.
+
+```js
+const id = CreateDesign({ name: "Checkout" })
+Insert(id, { type: "component", component: "Button", name: "Pay", props: { children: "Pay" } })
+// Each one, such as { kind: "frame-overflow", node: "pay", name: "Pay", box: { x: 340, y: 100, width: 60, height: 36 },
+// container: { box: { x: 0, y: 0, width: 390, height: 600 } }, overflow: { right: 10 }, problem: "at x 340, …" }
+for (const problem of await Problems(id, { mode: "shown" })) Print(problem.kind, problem.name, problem.overflow)
+const layout = await Measure(id)
+Print(
+  layout.state,
+  layout.mode,
+  layout.nodes.map((node) => `${node.id} in ${node.parent}`)
+)
+```
+
+`Measure` takes one state id and one mode id, because it returns one frame's layout. A list, `"all"` or `"shown"` fails
+with `invalid_input`, naming the ids it takes. To measure several frames, call it once for each; every layout says which
+state and mode it drew:
+
+```js
+const signup = Designs().find((design) => design.id === "signup")
+const layouts = []
+for (const state of signup.states) {
+  for (const mode of [signup.showing.mode, ...signup.showing.beside]) {
+    layouts.push(await Measure("signup", { state: state.id, mode }))
+  }
+}
+for (const layout of layouts) Print(`${layout.state} in ${layout.mode}: ${layout.width} × ${layout.height}`)
+```
+
 `Accessibility` returns axe-core's findings per node and frame, with the rule, its impact and what's wrong.
 
 These frames are drawn in the same window as the canvas's: as wide as the frame, and as tall as the design's fixed

package/skills/guide/checking.md

@@ -15,11 +15,14 @@ small details.
 
 - **Render errors.** A component threw. Usually a prop with the wrong type, or a part used outside its parent (a
   `TabsTrigger` without `Tabs`). `parity components` lists the components failing anywhere on the canvas, with why.
-- **Overflow.** Content wider than the frame, usually a row that needs to wrap or stack on mobile.
-- **Clipping.** A node cut off by a parent with `overflow: hidden` or a fixed size.
+- **Overflow.** A node that sticks out of the frame, by its width or where it's placed, usually a row that needs to wrap
+  or stack on mobile. The finding gives the node, its box, the frame's, and how many pixels past which edge.
+- **Clipping.** A node cut off by an ancestor with `overflow: hidden` or a fixed size, named in the finding with its
+  box. A node that only spills past a parent that doesn't clip still shows, so it isn't listed.
 - **Unknown components.** A name that isn't in `Components()`; it draws as a placeholder.
 
-`Measure` gives every node's box in one frame, for checking alignment or sizes by numbers.
+`Measure` gives every node's box in one frame, for checking alignment or sizes by numbers. It takes one state and one
+mode; to compare frames, call it for each, as the execute skill shows.
 
 ## Accessibility
 

package/skills/guide/components.md

@@ -17,7 +17,9 @@ instance follows.
 - Read its props with `Props("Badge")`. Variants and sizes come with their options; use those values exactly. A prop the
   component doesn't declare comes back as a warning.
 - Compose the parts the way the library intends: `Tabs` holds a `TabsList` of `TabsTrigger`s and one `TabsContent` per
-  trigger; `Table` holds `TableHeader` and `TableBody`, each with `TableRow`s of cells.
+  trigger; `Table` holds `TableHeader` and `TableBody`, each with `TableRow`s of cells. `Props("nova/Sidebar")` says
+  what a part goes inside in `composition.parents`, here the `SidebarProvider` it needs, and what goes inside it in
+  `composition.holds`. Start from `composition.example.node`, which already has its parents, when they aren't there.
 - Put children where they go. `slots.children` is what goes between the component's tags. Other slots, when a component
   takes nodes as props, are named after the prop.
 

package/skills/guide/states-and-modes.md

@@ -22,6 +22,20 @@ only its changes, so editing the base updates every state.
 
 Name states for the situation ("No members yet", "Invite failed"), not the change ("Table hidden").
 
+Every call that takes a state takes its id, never its name: `UpdateState`, `DeleteState`, `Update`'s and `Get`'s
+`state`, `UpdateDesign`'s `state` and the checks. `AddState` returns the id, and `Designs()` lists each design's states
+with their ids and names. Names can repeat and change, so an id made from a name stops matching it after a rename. A
+name passed by mistake fails with `unknown_state`, naming the id it belongs to, or every id when states share the name.
+
+```js
+AddState("team-members", { name: "No members yet", changes: { "Members table": { hidden: true } } })
+// Later, find a state's id by its name in Designs(), then pass the id.
+const states = Designs().find((design) => design.id === "team-members").states // [{ id, name }]
+const empty = states.find((state) => state.name === "No members yet").id
+UpdateState("team-members", empty, { name: "No members" })
+await Screenshot("team-members", { state: empty })
+```
+
 ## Modes
 
 Modes are the project's, shared by every design. Each mode picks one option of each variable:

package/dist/src-DgI96EpD.mjs

@@ -1,3 +0,0 @@
-import "./client-Cf66-n3R.mjs";
-export { a as applyLibraryEdits, t as componentNode, b as generateId, n as librarySource, f as parseLibraryEdits, i as withLibraryContext } from "./src-CYEKdXm_.mjs";
-import "./src-DaCYZuwb.mjs";