@pixerate/editor 0.223.8 → 0.224.0

package/skills/pixerate-canvas-layout/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: pixerate-canvas-layout
+description: The layout workflow in the Pixerate canvas - tidying a board or screen by aligning edges and centres, distributing elements evenly, keeping consistent spacing on a grid, ordering layers so the right things are on top, grouping related elements, locking backgrounds and guides, and checking the result. Use when asked to align, line up, centre, distribute, space evenly, tidy, clean up or lay out elements on a canvas, board, screen, slide or wireframe, bring something to the front or send it back, or lock a layer, or when canvas.alignLeft, canvas.distributeHorizontal, canvas.bringToFront or canvas.lock are available. Load with pixerate-canvas, which lists every tool.
+metadata:
+  kind: workflow
+  reference: pixerate-canvas
+---
+
+# Laying out a canvas
+
+A tidy layout comes from a few relations applied deliberately: shared edges and centres,
+equal gaps, a consistent spacing scale, and a stacking order where what matters is on top.
+Use the arrange commands rather than moving nodes by hand: they act on exact geometry, keep
+other axes untouched, and are one undo step each.
+
+This skill is the method. `pixerate-canvas` has the full tool reference; run the `canvas.*`
+commands with `run_command` (`params: { ids }`) or several in one `run_commands` batch.
+
+## Goal and quality bar
+
+- Elements in a row share a top, centre or bottom; elements in a column share a left, centre or
+  right edge.
+- Gaps between repeated elements are equal, on the spacing scale (multiples of 4 or 8).
+- The stacking order matches meaning: backgrounds at the back, content above, badges, overlays
+  and annotations on top.
+- Backgrounds, guides and finished areas are locked so they cannot be moved by accident.
+- Only the intended axis changes: aligning tops does not move anything sideways.
+
+## Inputs to confirm
+
+- **Which elements** belong together (a row of cards, a form column) and the anchor (the first
+  element, the container, the canvas).
+- **Spacing:** equal distribution between fixed ends, or a set gap.
+- **What must stay put**, and what to lock.
+
+## Working method
+
+1. **Read.** `get_canvas_document` for node ids, positions, sizes, parents and z-order.
+   **Check:** you know the rows, columns and stacking you want.
+2. **Align** rows and columns: `canvas.alignTop`, `canvas.alignMiddle`, `canvas.alignBottom`,
+   `canvas.alignLeft`, `canvas.alignCenter`, `canvas.alignRight` with the group's `ids`.
+   **Check:** the shared coordinate is equal; the other axis is unchanged.
+3. **Distribute** repeated elements: `canvas.distributeHorizontal` or `canvas.distributeVertical`
+   (the outer elements stay, the gaps between them become equal).
+   **Check:** the gaps are equal within a pixel.
+4. **Order layers.** `canvas.bringToFront`, `canvas.bringForward`, `canvas.sendBackward`,
+   `canvas.sendToBack`; order is by `zIndex`, then document order.
+   **Check:** what must be on top has the highest effective order.
+5. **Lock** backgrounds and finished parts: `canvas.lock` (`canvas.unlock` to edit again).
+   **Check:** locked nodes are no longer draggable in `get_canvas_document`.
+6. **Look** with the host's view (`capture_view`, `view_editor`) when available.
+
+## Decision table
+
+| Want | Command |
+| --- | --- |
+| A row lined up | `canvas.alignTop` (or `canvas.alignMiddle` for mixed heights) |
+| A column lined up | `canvas.alignLeft` (or `canvas.alignCenter`) |
+| Even gaps between fixed ends | `canvas.distributeHorizontal` / `canvas.distributeVertical` |
+| Something hidden behind | `canvas.bringToFront` |
+| A background covering content | `canvas.sendToBack` |
+| One step up or down | `canvas.bringForward` / `canvas.sendBackward` |
+| Protect a background or guide | `canvas.lock` |
+
+## Recipes
+
+**Line up a row of cards.** `run_command` `{ id: "canvas.alignTop", params: { ids: ["a", "b",
+"c"] } }`.
+
+**Even spacing.** `run_command` `{ id: "canvas.distributeHorizontal", params: { ids } }`; the
+leftmost and rightmost stay where they are.
+
+**Badge on top, background locked.** `run_commands` with `canvas.bringToFront` `{ ids: ["badge"]
+}` and `canvas.lock` `{ ids: ["backdrop"] }`.
+
+## Pitfalls
+
+- **Moving by hand** with rounded numbers drifts; align and distribute act on exact geometry.
+- **Distributing two elements** does nothing; it needs at least three.
+- **Aligning across different parents** aligns in each parent's own space; group or reparent
+  first.
+- **Stacking by array order only**: `zIndex` wins over order; read the effective order.
+- **Locked nodes** refuse moves; unlock, change, lock again.
+- **Aligning everything to one edge** of the canvas when the group should align to itself.
+
+## Tools used
+
+- `get_canvas_document`: node positions, sizes, parents, z-order and locks
+- `canvas.alignLeft`, `canvas.alignCenter`, `canvas.alignRight`: column alignment
+- `canvas.alignTop`, `canvas.alignMiddle`, `canvas.alignBottom`: row alignment
+- `canvas.distributeHorizontal`, `canvas.distributeVertical`: even gaps
+- `canvas.bringToFront`, `canvas.bringForward`, `canvas.sendBackward`, `canvas.sendToBack`: stacking order
+- `canvas.lock`, `canvas.unlock`: protect backgrounds and finished parts
+- `capture_view`, `view_editor`: look at the result
+- `undo_canvas`: take back a step

package/skills/pixerate-canvas-layout/evals/align-tops.json

@@ -0,0 +1,98 @@
+{
+	"prompt": "Line up the tops of the three cards.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "a",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 10
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card A",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "b",
+				"type": "shape",
+				"position": {
+					"x": 130,
+					"y": 30
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card B",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "c",
+				"type": "shape",
+				"position": {
+					"x": 300,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card C",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "all three tops at the same y",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "new Set(v.map((n) => n.position.y)).size === 1"
+					}
+				}
+			}
+		},
+		{
+			"why": "the horizontal positions are unchanged",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "v.map((n) => n.position.x).join() === '0,130,300'"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.alignTop",
+				"params": {
+					"ids": [
+						"a",
+						"b",
+						"c"
+					]
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-canvas-layout/evals/distribute-evenly.json

@@ -0,0 +1,98 @@
+{
+	"prompt": "Space the three cards evenly across, keeping the first and last where they are.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "a",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card A",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "b",
+				"type": "shape",
+				"position": {
+					"x": 120,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card B",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "c",
+				"type": "shape",
+				"position": {
+					"x": 300,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card C",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "equal gaps between the cards",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "(() => { const xs = v.map((n) => n.position.x).sort((p, q) => p - q); return Math.abs((xs[1] - xs[0]) - (xs[2] - xs[1])) <= 1; })()"
+					}
+				}
+			}
+		},
+		{
+			"why": "the outer cards stay put",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "v.find((n) => n.id === 'a').position.x === 0 && v.find((n) => n.id === 'c').position.x === 300"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.distributeHorizontal",
+				"params": {
+					"ids": [
+						"a",
+						"b",
+						"c"
+					]
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-canvas-layout/evals/order-and-lock.json

@@ -0,0 +1,110 @@
+{
+	"prompt": "The badge is hidden behind the card: bring it to the front, and lock the background so it can't be moved by accident.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "backdrop",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 400,
+				"height": 300,
+				"data": {
+					"label": "Background",
+					"shape": {
+						"kind": "rect",
+						"fill": "#f1faee"
+					}
+				}
+			},
+			{
+				"id": "badge",
+				"type": "shape",
+				"position": {
+					"x": 280,
+					"y": 20
+				},
+				"width": 40,
+				"height": 40,
+				"data": {
+					"label": "Badge",
+					"shape": {
+						"kind": "rect",
+						"fill": "#e63946"
+					}
+				}
+			},
+			{
+				"id": "card",
+				"type": "shape",
+				"position": {
+					"x": 40,
+					"y": 20
+				},
+				"width": 300,
+				"height": 200,
+				"data": {
+					"label": "Card",
+					"shape": {
+						"kind": "rect",
+						"fill": "#ffffff"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "the badge is drawn last (on top)",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "(() => { const z = (n) => (typeof n.zIndex === 'number' ? n.zIndex : 0); const order = v.map((n, i) => ({ id: n.id, z: z(n), i })).sort((a, b) => a.z - b.z || a.i - b.i); return order[order.length - 1].id === 'badge'; })()"
+					}
+				}
+			}
+		},
+		{
+			"why": "the background is locked",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$some": {
+							"id": "backdrop",
+							"$expr": "v.draggable === false || (v.data && v.data.locked === true) || v.locked === true"
+						}
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.bringToFront",
+				"params": {
+					"ids": [
+						"badge"
+					]
+				}
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.lock",
+				"params": {
+					"ids": [
+						"backdrop"
+					]
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-video-editor/SKILL.md

@@ -284,7 +284,7 @@ and every write tool is refused with the reason.
 
 | Tool | Use it to |
 | --- | --- |
-| `search_effects` | Find effects: words in `query`, filtered by `kind`, `category` or `use` (filter, overlay for clips; transition; generator, title). Returns ids, names, uses, whether they are transparent or loop, and their length. Call `describe_effect` next. |
+| `search_effects` | Find effects: words in `query`, filtered by `kind`, `category` or `use` (filter, overlay for clips; transition; generator, title). Returns ids, names, uses, whether they are transparent or loop, and their length. Camera moves (`kind` camera) are listed but not applied to clips (`appliesHere` false). Call `describe_effect` next. |
 | `describe_effect` | Read one effect's `controls` (a strict JSON Schema: names, types, ranges, units), `defaults`, `presets` and `inputs`, and whether it `appliesHere` (as a clip effect). Use the names and ranges for values. |
 | `list_applied_effects` | See the effects in the project per clip, in order: clip effects (`fx1`...), an effect clip's own effect (`generator`) and an effect transition (`transition`), with their saved values and `available` (false when the provider lacks it: drawn as a placeholder). |
 | `apply_effect` | Add a filter or overlay effect to a clip's stack (`target` clip id, `effect`, `values`, `index`, `enabled`, `opacity`). Effects run in order on the clip's picture before its grade and placement. Returns the effect's new id and the clip's effects. |