@pixerate/editor 0.223.7 → 0.223.9

package/skills/pixerate-brand-application/evals/apply-palette.json

@@ -0,0 +1,148 @@
+{
+	"prompt": "Apply our brand palette to this layout: the background is #f1faee, the big panel is primary #1d3557, and the small badge is accent #e63946.",
+	"fixture": {
+		"editor": "vector",
+		"width": 200,
+		"height": 120,
+		"colorTools": true,
+		"setup": [
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 0,
+					"y": 0,
+					"width": 200,
+					"height": 120,
+					"name": "Background",
+					"fill": "#ffffff",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 20,
+					"y": 20,
+					"width": 160,
+					"height": 80,
+					"name": "Panel",
+					"fill": "#334455",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "ellipse",
+					"x": 150,
+					"y": 10,
+					"width": 30,
+					"height": 30,
+					"name": "Badge",
+					"fill": "#ff6600",
+					"stroke": null
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "each part in its brand colour",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$expr": "(() => { const f = (n) => (v.find((x) => x.name === n).fill || '').toLowerCase(); return f('Background') === '#f1faee' && f('Panel') === '#1d3557' && f('Badge') === '#e63946'; })()"
+					}
+				}
+			}
+		},
+		{
+			"why": "nothing moved",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$some": {
+							"name": "Badge",
+							"bounds": {
+								"x": 150,
+								"y": 10,
+								"width": 30,
+								"height": 30
+							}
+						}
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			}
+		},
+		{
+			"tool": "run_commands",
+			"args": {
+				"steps": [
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.0.id"
+								}
+							],
+							"fill": "#f1faee"
+						}
+					},
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.1.id"
+								}
+							],
+							"fill": "#1d3557"
+						}
+					},
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.2.id"
+								}
+							],
+							"fill": "#e63946"
+						}
+					}
+				]
+			}
+		}
+	]
+}

package/skills/pixerate-brand-application/evals/readable-on-brand.json

@@ -0,0 +1,104 @@
+{
+	"prompt": "The white text on our light-blue badge fails contrast. Fix it using a colour from our palette (#1d3557, #457b9d, #a8dadc, #f1faee, #e63946), keeping the badge light blue.",
+	"fixture": {
+		"editor": "vector",
+		"width": 120,
+		"height": 60,
+		"colorTools": true,
+		"setup": [
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 10,
+					"y": 10,
+					"width": 100,
+					"height": 40,
+					"name": "Badge",
+					"fill": "#a8dadc",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 30,
+					"y": 24,
+					"width": 60,
+					"height": 12,
+					"name": "Text",
+					"fill": "#ffffff",
+					"stroke": null
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "the text uses a palette colour that reads on the badge at 4.5:1 or more",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$expr": "(() => { const L = (h) => { const c = [1, 3, 5].map((i) => parseInt(h.replace('#', '').padEnd(6, '0').slice(i - 1, i + 1), 16) / 255).map((x) => (x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4)); return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; }; const cr = (a, b) => { const [x, y] = [L(a), L(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); }; const t = v.find((n) => n.name === 'Text').fill.toLowerCase(); return ['#1d3557', '#457b9d', '#a8dadc', '#f1faee', '#e63946'].includes(t) && cr(t, v.find((n) => n.name === 'Badge').fill) >= 4.5; })()"
+					}
+				}
+			}
+		},
+		{
+			"why": "the badge stays light blue",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$some": {
+							"name": "Badge",
+							"fill": "#a8dadc"
+						}
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "check_color_contrast",
+			"args": {
+				"foreground": "#ffffff",
+				"background": "#a8dadc"
+			}
+		},
+		{
+			"tool": "check_color_contrast",
+			"args": {
+				"foreground": "#1d3557",
+				"background": "#a8dadc"
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.setStyle",
+				"params": {
+					"ids": [
+						{
+							"$read": "run_command",
+							"args": {
+								"id": "vector.list"
+							},
+							"path": "result.nodes.1.id"
+						}
+					],
+					"fill": "#1d3557"
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-brand-application/evals/snap-to-palette.json

@@ -0,0 +1,148 @@
+{
+	"prompt": "These colours are almost our brand colours but not exact. Snap each shape to the nearest colour in the palette: #1d3557, #457b9d, #a8dadc, #e63946.",
+	"fixture": {
+		"editor": "vector",
+		"width": 160,
+		"height": 40,
+		"colorTools": true,
+		"setup": [
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 0,
+					"y": 0,
+					"width": 40,
+					"height": 40,
+					"name": "A",
+					"fill": "#1f3759",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 40,
+					"y": 0,
+					"width": 40,
+					"height": 40,
+					"name": "B",
+					"fill": "#4a7fa0",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 80,
+					"y": 0,
+					"width": 40,
+					"height": 40,
+					"name": "C",
+					"fill": "#aadcde",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "rect",
+					"x": 120,
+					"y": 0,
+					"width": 40,
+					"height": 40,
+					"name": "D",
+					"fill": "#e43b48",
+					"stroke": null
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "each shape in its nearest brand colour",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$expr": "v.map((n) => (n.fill || '').toLowerCase()).join() === '#1d3557,#457b9d,#a8dadc,#e63946'"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_commands",
+			"args": {
+				"steps": [
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.0.id"
+								}
+							],
+							"fill": "#1d3557"
+						}
+					},
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.1.id"
+								}
+							],
+							"fill": "#457b9d"
+						}
+					},
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.2.id"
+								}
+							],
+							"fill": "#a8dadc"
+						}
+					},
+					{
+						"id": "vector.setStyle",
+						"params": {
+							"ids": [
+								{
+									"$read": "run_command",
+									"args": {
+										"id": "vector.list"
+									},
+									"path": "result.nodes.3.id"
+								}
+							],
+							"fill": "#e63946"
+						}
+					}
+				]
+			}
+		}
+	]
+}

package/skills/pixerate-canvas/SKILL.md

@@ -25,6 +25,14 @@ from `get_editor_state`; component and set ids from `list_components`. Tools tha
 just selected with `canvas_select`. See `pixerate-agent-tools` for namespacing, `run_commands`
 batching and error codes.
 
+## Workflow skills
+
+For these jobs, load the workflow skill too: it has the method, the checks between steps and
+the pitfalls, and uses the tools below.
+
+- `pixerate-canvas-design-system-components`: components, instances, variant sets and overrides.
+- `pixerate-canvas-layout`: align, distribute, order and lock.
+
 ## Working method
 
 1. **Read.** `get_editor_state` with `includeDocument: false` returns `canvas.nodes` and

package/skills/pixerate-canvas-design-system-components/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: pixerate-canvas-design-system-components
+description: The design system components workflow in the Pixerate canvas - turning repeated design into main components, placing instances instead of copies, combining versions into a component set with named variant properties and values, adding variants, keeping instances linked, swapping, resetting and pushing overrides, and keeping the library tidy and named. Use when asked to build or tidy a design system, component library or UI kit, make a component, instance, variant or component set, add a state (hover, disabled) or size, rename variant properties, or replace copies with instances, or when create_component, combine_as_variants, add_variant or create_instance are available. Load with pixerate-canvas, which lists every tool.
+metadata:
+  kind: workflow
+  reference: pixerate-canvas
+---
+
+# Building design system components
+
+A design system replaces copies with components. A main component holds the design; instances
+show it elsewhere and update when it changes, with per-instance overrides where they differ.
+Versions of one thing (styles, states, sizes) become variants in a component set, described by
+properties ("Style=Primary, State=Disabled") a person or agent can switch between. Names and
+properties are the interface: keep them clear and consistent.
+
+This skill is the method. `pixerate-canvas` has the full tool reference.
+
+## Goal and quality bar
+
+- Anything used more than once is a main component; its uses are linked instances
+  (`inspect_instance` `status: "linked"`), not copies.
+- Versions of one element are variants in one component set, with named properties (Style,
+  State, Size) and named values (Primary, Disabled, Large), never "Property 1" and "Variant2".
+- Every combination of property values is unique; the default variant is the most common one.
+- Instances keep their link; detach only when one must diverge for good.
+- Components are named by what they are ("Button", "Card"), sets list their options clearly.
+
+## Inputs to confirm
+
+- **What becomes a component**, and which existing copies should become its instances.
+- **Properties and values** for variants (Style: Primary / Secondary; State: Default / Hover /
+  Disabled; Size: Small / Medium / Large).
+- **Naming conventions** of the team's library.
+
+## Working method
+
+1. **Read.** `list_components` (components, sets, their variants and options) and
+   `get_canvas_document` for the nodes.
+   **Check:** you know which nodes are already components and which are copies.
+2. **Make components.** `create_component` with the frame's id(s).
+   **Check:** `list_components` lists it with its name.
+3. **Replace copies with instances.** `create_instance` with `componentId`, `x`, `y`; remove the
+   copies once instances stand in their place.
+   **Check:** `get_canvas_document` shows instance nodes where the copies were.
+4. **Combine versions into variants.** `create_component` each version, then
+   `combine_as_variants` with their ids; the set gets generic names ("Property 1", "Default",
+   "Variant2"). Rename at once: `rename_variant_property` (`name`, `newName`, `setId`) and
+   `rename_variant_value` (`property`, `value`, `newValue`, `setId`).
+   **Check:** `list_components` `sets[].options` shows the real names; each variant's `variant`
+   map is right.
+5. **Add variants.** `add_variant` with `setId` and the new `variant` values (it duplicates the
+   default, or `from`); `set_variant_properties` to change a variant's values.
+   **Check:** the set lists every combination once.
+6. **Maintain instances.** `swap_instance` to another component or variant, `reset_overrides` to
+   go back to the main, `push_overrides` to promote an instance's change to the main,
+   `go_to_main_component` to edit the source.
+
+## Decision table
+
+| Situation | Tool |
+| --- | --- |
+| The same element appears several times | `create_component`, then `create_instance` for each use |
+| Versions of one element (styles, states, sizes) | `combine_as_variants`, then rename properties and values |
+| A new state or size | `add_variant` with `variant` values |
+| An instance should look like another variant | `set_instance_properties` or `swap_instance` |
+| An instance's change belongs in the main | `push_overrides` |
+| An instance drifted by accident | `reset_overrides` |
+| One copy must diverge permanently | `detach_instance` (last resort) |
+
+## Recipes
+
+**Card component with two instances.** `create_component` `{ ids: ["card"] }` →
+`create_instance` `{ componentId: "card", x: 0, y: 150 }` and `{ componentId: "card", x: 240,
+y: 150 }`.
+
+**Primary and Secondary variants.** `create_component` each button → `combine_as_variants`
+`{ ids }` → `rename_variant_property` `{ name: "Property 1", newName: "Style", setId }` →
+`rename_variant_value` `Default` → `Primary`, `Variant2` → `Secondary`.
+
+**A Disabled variant.** `add_variant` `{ setId, variant: { Style: "Disabled" } }`.
+
+## Pitfalls
+
+- **Copies instead of instances** drift apart and cannot be updated together.
+- **Generic variant names** ("Property 1", "Variant2") left after combining make the set unusable;
+  rename right away.
+- **The rename and add tools need the set** (`setId` from `list_components`) when nothing is
+  selected.
+- **Duplicate combinations** are refused; every variant needs a unique set of values.
+- **Detaching to make a small change** loses future updates; override instead.
+- **Combining unrelated components** into one set; a set is one element's versions.
+
+## Tools used
+
+- `list_components`, `inspect_instance`: components, sets, variants and instance status
+- `get_canvas_document`: the nodes, to check placement
+- `create_component`, `create_instance`: components and their instances
+- `combine_as_variants`, `add_variant`, `remove_variant`, `set_variant_properties`: component sets
+- `rename_variant_property`, `rename_variant_value`: clear property and value names
+- `set_instance_properties`, `swap_instance`, `reset_overrides`, `push_overrides`: instances and overrides
+- `detach_instance`, `go_to_main_component`, `restore_main_component`: break links, edit or restore mains
+- `undo_canvas`: take back a step

package/skills/pixerate-canvas-design-system-components/evals/add-variant.json

@@ -0,0 +1,172 @@
+{
+	"prompt": "Add a Disabled style to the button component set, as a third variant of its Style property.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "primary",
+				"type": "group",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Button / Primary"
+				}
+			},
+			{
+				"id": "pbg",
+				"type": "shape",
+				"parentId": "primary",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Bg",
+					"shape": {
+						"kind": "rect",
+						"fill": "#1d3557"
+					}
+				}
+			},
+			{
+				"id": "secondary",
+				"type": "group",
+				"position": {
+					"x": 0,
+					"y": 60
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Button / Secondary"
+				}
+			},
+			{
+				"id": "sbg",
+				"type": "shape",
+				"parentId": "secondary",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Bg",
+					"shape": {
+						"kind": "rect",
+						"fill": "#ffffff"
+					}
+				}
+			}
+		],
+		"setup": [
+			{
+				"tool": "create_component",
+				"args": {
+					"ids": [
+						"primary"
+					]
+				}
+			},
+			{
+				"tool": "create_component",
+				"args": {
+					"ids": [
+						"secondary"
+					]
+				}
+			},
+			{
+				"tool": "combine_as_variants",
+				"args": {
+					"ids": [
+						"primary",
+						"secondary"
+					]
+				}
+			},
+			{
+				"tool": "rename_variant_property",
+				"args": {
+					"name": "Property 1",
+					"newName": "Style",
+					"setId": {
+						"$read": "list_components",
+						"path": "sets.0.id"
+					}
+				}
+			},
+			{
+				"tool": "rename_variant_value",
+				"args": {
+					"property": "Style",
+					"value": "Default",
+					"newValue": "Primary",
+					"setId": {
+						"$read": "list_components",
+						"path": "sets.0.id"
+					}
+				}
+			},
+			{
+				"tool": "rename_variant_value",
+				"args": {
+					"property": "Style",
+					"value": "Variant2",
+					"newValue": "Secondary",
+					"setId": {
+						"$read": "list_components",
+						"path": "sets.0.id"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "three variants: Primary, Secondary and Disabled",
+			"tool": "list_components",
+			"expect": {
+				"sets": [
+					{
+						"variants": {
+							"$length": 3
+						},
+						"options": [
+							{
+								"name": "Style",
+								"values": {
+									"$expr": "[...v].sort().join() === 'Disabled,Primary,Secondary'"
+								}
+							}
+						]
+					}
+				]
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "list_components"
+		},
+		{
+			"tool": "add_variant",
+			"args": {
+				"setId": {
+					"$read": "list_components",
+					"path": "sets.0.id"
+				},
+				"variant": {
+					"Style": "Disabled"
+				}
+			}
+		}
+	]
+}