@parity-app/cli 0.3.1 → 0.4.0

package/dist/bin.mjs

@@ -287,8 +287,8 @@ const executeOperation = {
 */
 async function runCheck(library, options) {
 	if (!library) throw new Error("parity lib check <library> [--tab t] [--mode m]");
-	const { applyLibraryEdits, componentNode, generateId, librarySource, parseLibraryEdits, withLibraryContext } = await import("./src-DZKi9702.mjs");
-	const { registryDir, registryEntries } = await import("./src-BGF7szJh.mjs");
+	const { applyLibraryEdits, componentNode, generateId, librarySource, parseLibraryEdits, withLibraryContext } = await import("./src-DgI96EpD.mjs");
+	const { registryDir, registryEntries } = await import("./src-CJUvccJO.mjs");
 	const entry = (await registryEntries()).find((item) => item.manifest.id === library);
 	if (!entry) throw new Error(`The registry has no library "${library}"`);
 	let manifest = entry.manifest;
@@ -416,8 +416,8 @@ function describeCheck(report) {
 * because it reads the project's files and its own copy of TypeScript.
 */
 async function runLib(packageName, options) {
-	const { appManifestPath, generateLibrary, manifestText, mergeManifest, reviseLibrary } = await import("./src-Aoey5Uq0.mjs");
-	const { covers, registryDir, registryEntries } = await import("./src-BGF7szJh.mjs");
+	const { appManifestPath, generateLibrary, manifestText, mergeManifest, reviseLibrary } = await import("./src-DaCYZuwb.mjs");
+	const { covers, registryDir, registryEntries } = await import("./src-CJUvccJO.mjs");
 	const spec = packageName === void 0 ? void 0 : packageSpec(packageName);
 	let root = resolve(options.root ?? ".");
 	if (spec && (spec.version !== void 0 || options.registry && !options.root)) {
@@ -428,7 +428,7 @@ async function runLib(packageName, options) {
 		console.error(`Installing ${spec.name} ${version} on its own…`);
 		root = await installedVersion(spec.name, version);
 	}
-	const { parseLibraryEdits } = await import("./src-Aoey5Uq0.mjs");
+	const { parseLibraryEdits } = await import("./src-DaCYZuwb.mjs");
 	const trialEdits = options.edits ? parseLibraryEdits(JSON.parse(await readFile(resolve(options.edits), "utf8"))) : void 0;
 	const recordedId = options.registry && spec ? options.id ?? (await registryEntries()).find((entry) => entry.manifest.package?.name === spec.name)?.manifest.id : void 0;
 	const appErrors = recordedId ? await readAppErrors(registryDir(), recordedId) : void 0;

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

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

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

@@ -254,6 +254,11 @@ function generateId(taken, length = 5) {
 	}
 }
 // ../core/src/document.ts
+const containerKinds = [
+	"screen",
+	"component",
+	"frame"
+];
 const textTags = [
 	"p",
 	"span",
@@ -399,7 +404,8 @@ function parseContainer(value, path) {
 		"view",
 		"params",
 		"context",
-		"frames"
+		"frames",
+		"size"
 	], path);
 	const position = expectObject(container.position, `${path}/position`);
 	const view = optional(container.view, (v) => {
@@ -440,10 +446,13 @@ function parseContainer(value, path) {
 		};
 	});
 	if (states.length === 0) throw new TypeError(`${path}/states: expected at least one state`);
+	const kind = optional(container.kind, (v) => expectOneOf(v, containerKinds, `${path}/kind`));
+	if (kind === "frame") checkFrame(container, root, states, path);
+	else if (container.size !== void 0) throw new TypeError(`${path}/size: only a frame has a size of its own; size a ${kind ?? "screen"} in frames`);
 	return compact({
 		id: expectString(container.id, `${path}/id`),
 		name: expectString(container.name, `${path}/name`),
-		kind: optional(container.kind, (v) => expectOneOf(v, ["screen", "component"], `${path}/kind`)),
+		kind,
 		context: optional(container.context, (v) => expectArray(v, `${path}/context`).map((item, index) => {
 			const at = `${path}/context/${index}`;
 			const wrapper = expectObject(item, at);
@@ -498,17 +507,10 @@ function parseContainer(value, path) {
 		}),
 		frames: optional(container.frames, (v) => {
 			const frames = {};
-			for (const [viewport, entry] of Object.entries(expectObject(v, `${path}/frames`))) {
-				const at = `${path}/frames/${viewport}`;
-				const size = expectObject(entry, at);
-				expectKnownKeys(size, ["width", "height"], at);
-				frames[viewport] = compact({
-					width: optional(size.width, (w) => expectNumber(w, `${at}/width`)),
-					height: optional(size.height, (h) => expectNumber(h, `${at}/height`))
-				});
-			}
+			for (const [viewport, entry] of Object.entries(expectObject(v, `${path}/frames`))) frames[viewport] = parseFrameSize(entry, `${path}/frames/${viewport}`);
 			return frames;
 		}),
+		size: optional(container.size, (v) => parseFrameSize(v, `${path}/size`)),
 		position: {
 			x: expectNumber(position.x, `${path}/position/x`),
 			y: expectNumber(position.y, `${path}/position/y`)
@@ -518,6 +520,26 @@ function parseContainer(value, path) {
 		view
 	});
 }
+function parseFrameSize(value, path) {
+	const size = expectObject(value, path);
+	expectKnownKeys(size, ["width", "height"], path);
+	return compact({
+		width: optional(size.width, (w) => expectNumber(w, `${path}/width`)),
+		height: optional(size.height, (h) => expectNumber(h, `${path}/height`))
+	});
+}
+/**
+* What a frame may hold: a layout at its root and one state, drawn as its layers are, with no params, no view (it
+* shows only the primary mode and that state) and no sizes per viewport, since it has one of its own.
+*/
+function checkFrame(container, root, states, path) {
+	if (root.type !== "layout") throw new TypeError(`${path}/root: a frame's root is a layout`);
+	if (states.length > 1) throw new TypeError(`${path}/states: a frame has one state`);
+	if (Object.keys(states[0].overrides ?? {}).length > 0) throw new TypeError(`${path}/states/0/overrides: a frame is drawn as its layers are`);
+	if (container.params !== void 0) throw new TypeError(`${path}/params: a frame has no params`);
+	if (container.view !== void 0) throw new TypeError(`${path}/view: a frame shows only the primary mode and its one state`);
+	if (container.frames !== void 0) throw new TypeError(`${path}/frames: a frame's size is in size, not per viewport`);
+}
 function parseNode(value, path, ids) {
 	const node = expectObject(value, path);
 	const type = expectOneOf(node.type, [
@@ -1403,4 +1425,4 @@ function sampleIds(sample, library) {
 		...sample.children ? { children: sample.children.map(child) } : {}
 	};
 }
-export { viewportWidthProperty as C, viewportHeightProperty as S, lengthToPixels as T, parseCanvasDocument as _, applyLibraryEdits as a, parseModeSettings as b, isSampleElement as c, parentSignals as d, parseLibraryEdits as f, paramTypes as g, imageFits 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, styleKeys as v, deviceKinds as w, collectCustomProperties as x, generateId as y };
+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 };

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

@@ -1,5 +1,5 @@
-import { T as lengthToPixels, a as applyLibraryEdits, c as isSampleElement, f as parseLibraryEdits, l as isSampleRender, m as renderSlotOf, p as parseLibraryManifest, s as isMadeValue, u as libraryManifestExtension, x as collectCustomProperties } from "./src-lVLSuOgh.mjs";
-import "./src-eso2QXtH.mjs";
+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 { 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";

package/dist/src-DgI96EpD.mjs

@@ -0,0 +1,3 @@
+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";

package/dist/{src-eso2QXtH.mjs → src-y3hdgbK2.mjs}

@@ -1,4 +1,4 @@
-import { p as parseLibraryManifest, u as libraryManifestExtension } from "./src-lVLSuOgh.mjs";
+import { p as parseLibraryManifest, u as libraryManifestExtension } from "./src-CYEKdXm_.mjs";
 import { createRequire } from "node:module";
 import { readFile, readdir } from "node:fs/promises";
 import { dirname, join } from "node:path";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parity-app/cli",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "type": "module",
   "description": "Drive the Parity app from a terminal or an agent: read state, run edits, take screenshots, serve MCP.",

package/skills/document.md

@@ -5,20 +5,26 @@ change, so you never edit the files by hand. This is the shape `GetDesign` and `
 
 ## Designs
 
-A design is a screen or a component, drawn on the canvas as a board of frames: one frame per state and mode it shows.
+A design is a screen, a component or a frame, drawn on the canvas as a board of frames: one frame per state and mode it
+shows.
 
 | Field     | What it is                                                                                                                                  |
 | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`      | Made from the name when the design is created. Stable; use it in paths.                                                                     |
 | `name`    | What people see.                                                                                                                            |
-| `kind`    | `screen` (a page or view) or `component` (a reusable part that screens place as instances).                                                 |
+| `kind`    | `screen` (a page or view), `component` (a reusable part that screens place as instances) or `frame` (a sketch; see below).                  |
 | `root`    | The design itself: one node, usually a layout.                                                                                              |
 | `states`  | Situations the whole design can be in, like loading or empty. The first is the base; the others store only what they change.                |
 | `params`  | A component design's inputs, each with a `type` (`text`, `boolean`, `number`, `value`, `variant`) and a `default`. See Params and bindings. |
-| `frames`  | A fixed size per viewport, when the design isn't as wide as the viewport or as tall as its content.                                         |
+| `frames`  | A screen's or component's fixed size per viewport, when it isn't as wide as the viewport or as tall as its content.                         |
+| `size`    | A frame's own `width` and `height` in pixels. Without a width it's as wide as the primary mode; without a height, as tall as its content.   |
 | `view`    | How the canvas shows it: the main mode, the modes beside it, the state and the variant options shown. Not part of the design.               |
 | `context` | Components a component design is drawn inside on its own board, such as a table around a table row.                                         |
 
+A frame is the light kind, for sketching: a layout at its root, drawn once in the project's primary mode at its own
+`size`, with one state and no `params`, `view` or `frames`. No code is written from it. Make it a screen or a component
+to give it more.
+
 ## Nodes
 
 Every node has an `id` (given when it's inserted), and can have a `name`, `hidden`, `style` and `responsive`. Name the

package/skills/execute.md

@@ -47,8 +47,8 @@ GetModes(design?): { settings, variables, viewports, modes, designs }   // modes
 Selection(): { design?, node?, mode? }           // what the person has selected
 
 // Designs
-CreateDesign({ name, kind?, root?, x?, y?, file?, baseState? }): string   // returns the new design's id
-UpdateDesign(design, { name?, kind?, x?, y?, mode?, showModes?, state?, allStates? }): void
+CreateDesign({ name, kind?, root?, x?, y?, width?, height?, file?, baseState? }): string   // the new design's id
+UpdateDesign(design, { name?, kind?, x?, y?, width?, height?, mode?, showModes?, state?, allStates? }): void
 DeleteDesign(design): void
 
 // Nodes
@@ -95,8 +95,8 @@ by its id alone when only one design has that id. Names aren't unique, so prefer
 
 ### Designs
 
-Lists every design with its `id`, `name`, `kind` (`screen` or `component`), `states`, and `showing`: the state on the
-canvas, the main mode and the modes beside it. Start here to find ids.
+Lists every design with its `id`, `name`, `kind` (`screen`, `component` or `frame`), `states`, and `showing`: the state
+on the canvas, the main mode and the modes beside it. Start here to find ids.
 
 ### Get
 
@@ -175,11 +175,27 @@ foreground colours. Without `x` and `y` it goes into empty space. `kind: "compon
 screens place as instances; most component designs come from `ExtractComponent` instead, because that also gives them
 params.
 
+`kind: "frame"` makes a frame, the light kind for sketching an idea before it's a screen or a component: an empty padded
+layout, drawn once at its own `width` and `height` in the project's primary mode. A frame has one state, no params and
+no modes beside it, and no code is written from it, so `AddState`, `showModes` or another `mode` on one fail with
+`invalid_input`. Turn it into a screen or a component when it needs them.
+
+```js
+const sketch = CreateDesign({ name: "Sketch", kind: "frame", width: 480, height: 320 })
+Insert(sketch, { type: "text", tag: "h2", text: "Pricing ideas" })
+await Screenshot(sketch)
+UpdateDesign(sketch, { kind: "screen" }) // keeps its layers, and its size in the primary viewport
+```
+
 ### UpdateDesign
 
 Renames or moves a design, or changes how it's shown: `mode` sets the main frame's mode, `showModes` the modes beside
 it, `state` the state on the canvas, and `allStates: true` shows every state in its own row. None of these change the
-design itself.
+design itself. `width` and `height` resize a frame.
+
+`kind` turns a design into another kind. Turned into a frame, a design keeps its layers as its board drew them in the
+base state, with its params' values filled in, and drops its other states, the modes beside it, its params and its
+variants; the call's warnings say what went.
 
 ## Nodes
 

package/dist/src-DZKi9702.mjs

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