@pixelvibing/cli 0.1.0 → 0.3.0

package/dist/pixel-vibing-cli.js

@@ -1077,7 +1077,7 @@ const HUD_PIECE_NAMES = ["health-bar", "mana-bar", "button", "inventory-slot", "
 const ICON_SIZES = [16, 32, 64];
 const DEFAULT_ICON_SIZE = 32;
 const MAX_ICONS = 16;
-const SET_NAMES = { hud: "ui/hud", icons: "ui/icon" };
+const SET_NAMES = { hud: "ui/hud", icons: "ui/icon", "ui-sketch": "ui/sketch" };
 function setPiecesOf(kind, count, data) {
   if (SET_NAMES[kind] === void 0) return null;
   const pieces = data.pieces;
@@ -2238,9 +2238,9 @@ function terrainTable(names) {
   const byId = /* @__PURE__ */ new Map();
   for (const [id2, name] of names) {
     const { tileset, inner } = splitTileset(name);
-    const whole = SOLID.exec(inner);
-    if (whole !== null) {
-      const terrain = scopedTerrain(tileset, whole[1]);
+    const whole2 = SOLID.exec(inner);
+    if (whole2 !== null) {
+      const terrain = scopedTerrain(tileset, whole2[1]);
       terrains.add(terrain);
       solid.set(terrain, id2);
       byId.set(id2, terrain);
@@ -2275,8 +2275,8 @@ function checked(items, side, gap) {
   for (const item of items) {
     if (seen.has(item.name)) throw new PackError(`two pictures are named ${item.name}`);
     seen.add(item.name);
-    const whole = (value) => Number.isInteger(value) && value >= 1;
-    if (!whole(item.width) || !whole(item.height))
+    const whole2 = (value) => Number.isInteger(value) && value >= 1;
+    if (!whole2(item.width) || !whole2(item.height))
       throw new PackError(`the picture ${item.name} is ${item.width}×${item.height}, and a picture is whole pixels`);
     if (item.width > largest || item.height > largest) {
       throw new PackError(`the picture ${item.name} is ${item.width}×${item.height}, and a sheet of ${side} holds pictures of at most ${largest} a side`);
@@ -2804,7 +2804,7 @@ function toRgba(samples, header, palette, transparency) {
   const channels = CHANNELS[colorType];
   const out = new Uint8ClampedArray(width * height * 4);
   const high = (index) => samples[wide ? index * 2 : index];
-  const whole = (index) => wide ? samples[index * 2] << 8 | samples[index * 2 + 1] : samples[index];
+  const whole2 = (index) => wide ? samples[index * 2] << 8 | samples[index * 2 + 1] : samples[index];
   const keyed = (at) => transparency === null ? null : transparency[at] << 8 | transparency[at + 1];
   const grey = colorType === 0 ? keyed(0) : null;
   const rgb = colorType === 2 && transparency !== null && transparency.length >= 6 ? [keyed(0), keyed(2), keyed(4)] : null;
@@ -2814,14 +2814,14 @@ function toRgba(samples, header, palette, transparency) {
     if (colorType === 6) {
       out.set([high(first), high(first + 1), high(first + 2), high(first + 3)], at);
     } else if (colorType === 2) {
-      const clear = rgb !== null && whole(first) === rgb[0] && whole(first + 1) === rgb[1] && whole(first + 2) === rgb[2];
+      const clear = rgb !== null && whole2(first) === rgb[0] && whole2(first + 1) === rgb[1] && whole2(first + 2) === rgb[2];
       out.set([high(first), high(first + 1), high(first + 2), clear ? 0 : 255], at);
     } else if (colorType === 4) {
       const value = high(first);
       out.set([value, value, value, high(first + 1)], at);
     } else if (colorType === 0) {
       const value = high(first);
-      out.set([value, value, value, grey !== null && whole(first) === grey ? 0 : 255], at);
+      out.set([value, value, value, grey !== null && whole2(first) === grey ? 0 : 255], at);
     } else {
       const index = samples[first];
       if (palette === null || index * 3 + 2 >= palette.length) throw new PngError("the PNG names a palette entry it does not have");
@@ -3031,13 +3031,142 @@ async function startGeneration(api, project, request) {
   }
   return api.generate(request.kind, { ...request.body, ...ids, project });
 }
+const SKETCH_CANVASES = [
+  { width: 128, height: 128 },
+  { width: 256, height: 256 },
+  { width: 256, height: 128 },
+  { width: 128, height: 256 }
+];
+const SKETCH_SHAPE_KINDS = ["rect", "ellipse", "polygon"];
+const MAX_SKETCH_SHAPES = 16;
+const MIN_SHAPE_SIDE = 4;
+const POLYGON_SIDES = { min: 3, max: 8 };
+const MAX_LABEL = 40;
+const MAX_CAPTION = 24;
+const MAX_NOTE = 200;
+const MAX_SKETCH_INSTRUCTION = 600;
+function polygonCorners(shape) {
+  const n = shape.sides ?? POLYGON_SIDES.min;
+  const cx = shape.x + shape.width / 2;
+  const cy = shape.y + shape.height / 2;
+  return Array.from({ length: n }, (_, i) => {
+    const angle = -Math.PI / 2 + 2 * Math.PI * i / n;
+    return [cx + shape.width / 2 * Math.cos(angle), cy + shape.height / 2 * Math.sin(angle)];
+  });
+}
+function inShape(shape, px, py) {
+  const { x, y, width: w, height: h } = shape;
+  if (px < x || py < y || px >= x + w || py >= y + h) return false;
+  if (shape.kind === "ellipse") return ((px - x - w / 2) / (w / 2)) ** 2 + ((py - y - h / 2) / (h / 2)) ** 2 <= 1;
+  if (shape.kind === "polygon") {
+    const corners = polygonCorners(shape);
+    let hit = false;
+    for (let i = 0, j = corners.length - 1; i < corners.length; j = i, i += 1) {
+      const [xi, yi] = corners[i];
+      const [xj, yj] = corners[j];
+      if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi) hit = !hit;
+    }
+    return hit;
+  }
+  const r = Math.min(Math.max(shape.radius ?? 0, 0), w / 2, h / 2);
+  const dx = Math.max(x + r - px, 0, px - (x + w - r));
+  const dy = Math.max(y + r - py, 0, py - (y + h - r));
+  return dx * dx + dy * dy <= r * r;
+}
+const whole = (value) => typeof value === "number" && Number.isInteger(value);
+function shapeProblem(shape, index, canvas) {
+  const label = typeof shape.label === "string" ? shape.label.trim() : "";
+  if (label === "") return `shape ${index + 1} has no label`;
+  const named = `"${label}"`;
+  if (label.length > MAX_LABEL) return `${named} is a label of ${label.length} characters; a label is at most ${MAX_LABEL}`;
+  if (!SKETCH_SHAPE_KINDS.includes(shape.kind))
+    return `${named} is a ${String(shape.kind)}; a shape is a rect, an ellipse or a polygon`;
+  if (![shape.x, shape.y, shape.width, shape.height].every(whole)) return `${named} is not on whole pixels`;
+  if (shape.width < MIN_SHAPE_SIDE || shape.height < MIN_SHAPE_SIDE) {
+    return `${named} is ${shape.width} × ${shape.height}; a shape is at least ${MIN_SHAPE_SIDE} pixels on a side`;
+  }
+  if (shape.x < 0 || shape.y < 0 || shape.x + shape.width > canvas.width || shape.y + shape.height > canvas.height) {
+    return `${named} runs off the ${canvas.width} × ${canvas.height} canvas`;
+  }
+  if (shape.radius !== void 0 && (!whole(shape.radius) || shape.radius < 0))
+    return `${named} has a corner radius of ${shape.radius}; a radius is a whole number of pixels`;
+  if (shape.kind === "polygon" && (!whole(shape.sides) || shape.sides < POLYGON_SIDES.min || shape.sides > POLYGON_SIDES.max)) {
+    return `${named} is a polygon of ${shape.sides ?? "no"} sides; a polygon has ${POLYGON_SIDES.min} to ${POLYGON_SIDES.max}`;
+  }
+  if (shape.caption !== void 0 && shape.caption.length > MAX_CAPTION) {
+    return `${named} has a caption of ${shape.caption.length} characters; a caption is at most ${MAX_CAPTION}`;
+  }
+  if (shape.note !== void 0 && shape.note.length > MAX_NOTE) return `${named} has a note of ${shape.note.length} characters; a note is at most ${MAX_NOTE}`;
+  if (shape.border !== void 0) {
+    if (!whole(shape.border) || shape.border < 1) return `${named} has a border of ${shape.border}; a border is at least 1 pixel`;
+    if (2 * shape.border >= Math.min(shape.width, shape.height)) return `${named} has a border of ${shape.border} pixels, which leaves no inside`;
+  }
+  if (shape.hollow === true && shape.border === void 0) return `${named} has a transparent inside but no border width`;
+  return null;
+}
+function sketchProblem(sketch) {
+  if (typeof sketch.instruction !== "string" || sketch.instruction.trim() === "") return "the sketch has no description";
+  if (sketch.instruction.length > MAX_SKETCH_INSTRUCTION)
+    return `the description is ${sketch.instruction.length} characters; it is at most ${MAX_SKETCH_INSTRUCTION}`;
+  const { canvas, shapes } = sketch;
+  if (!SKETCH_CANVASES.some((size) => size.width === canvas.width && size.height === canvas.height)) {
+    return `the canvas is ${canvas.width} × ${canvas.height}; a sketch is ${SKETCH_CANVASES.map((size) => `${size.width} × ${size.height}`).join(", ")}`;
+  }
+  if (shapes.length === 0) return "the sketch has no shape";
+  if (shapes.length > MAX_SKETCH_SHAPES) return `the sketch has ${shapes.length} shapes; it holds at most ${MAX_SKETCH_SHAPES}`;
+  const labels = /* @__PURE__ */ new Map();
+  for (const [index, shape] of shapes.entries()) {
+    const problem = shapeProblem(shape, index, canvas);
+    if (problem !== null) return problem;
+    const key = shape.label.trim().toLowerCase();
+    if (labels.has(key)) return `"${shape.label.trim()}" is the label of two shapes`;
+    labels.set(key, shape.label.trim());
+  }
+  for (const [index, shape] of shapes.entries()) {
+    for (let y = shape.y; y < shape.y + shape.height; y += 1) {
+      for (let x = shape.x; x < shape.x + shape.width; x += 1) {
+        if (!inShape(shape, x + 0.5, y + 0.5)) continue;
+        const other = shapes.findIndex((them, at) => at < index && inShape(them, x + 0.5, y + 0.5));
+        if (other >= 0) return `"${shapes[other]?.label.trim()}" and "${shape.label.trim()}" overlap`;
+      }
+    }
+  }
+  return null;
+}
+function sentShape(shape) {
+  const caption = shape.caption?.trim() ?? "";
+  const note = shape.note?.trim() ?? "";
+  return {
+    label: shape.label.trim(),
+    kind: shape.kind,
+    x: shape.x,
+    y: shape.y,
+    width: shape.width,
+    height: shape.height,
+    ...shape.kind === "rect" && (shape.radius ?? 0) > 0 ? { radius: shape.radius } : {},
+    ...shape.kind === "polygon" ? { sides: shape.sides } : {},
+    ...caption === "" ? {} : { caption },
+    ...note === "" ? {} : { note },
+    ...shape.border === void 0 ? {} : { border: shape.border },
+    ...shape.hollow === true ? { hollow: true } : {}
+  };
+}
+function sentSketch(sketch, description) {
+  return { canvas: { ...sketch.canvas }, shapes: sketch.shapes.map(sentShape), instruction: description.trim() };
+}
+function sketchSendProblem(sketch, description) {
+  return sketchProblem(sentSketch(sketch, description));
+}
+function sketchBody(sketch, description, quality) {
+  return { ...sentSketch(sketch, description), quality };
+}
 const LARGEST_FOOTPRINT = {
   cols: Math.min(Math.floor(WINDOW_PX.width / SCALES.at(-1)), Math.floor(MAX_ASSEMBLED_PX / TILE_SIZE)),
   rows: Math.min(Math.floor(WINDOW_PX.height / SCALES.at(-1)), Math.floor(MAX_ASSEMBLED_PX / TILE_SIZE))
 };
 function footprintProblem(footprint) {
-  const whole = (value) => Number.isInteger(value) && value >= 1;
-  if (!whole(footprint.cols) || !whole(footprint.rows)) return "a footprint is a whole number of tiles wide and tall, each at least one";
+  const whole2 = (value) => Number.isInteger(value) && value >= 1;
+  if (!whole2(footprint.cols) || !whole2(footprint.rows)) return "a footprint is a whole number of tiles wide and tall, each at least one";
   if (footprint.cols > LARGEST_FOOTPRINT.cols || footprint.rows > LARGEST_FOOTPRINT.rows || drawCanvas(footprint) === null) {
     return `a ${footprint.cols}×${footprint.rows} tile footprint is larger than an object is made; at most ${LARGEST_FOOTPRINT.cols}×${LARGEST_FOOTPRINT.rows} tiles`;
   }
@@ -3097,7 +3226,8 @@ const GENERATED = {
   "level-design": { references: 3, words: "a level design" },
   hud: { references: 0, words: "a HUD set" },
   icons: { references: 0, words: "an icon set" },
-  "hud-mockup": { references: 3, words: "a HUD mockup" }
+  "hud-mockup": { references: 3, words: "a HUD mockup" },
+  "ui-sketch": { references: 3, words: "a UI sketch" }
 };
 function listOf(given, what) {
   const items = given.split(",").map((item) => item.trim());
@@ -3130,6 +3260,48 @@ function interfaceFields(kind, args) {
   if (!ICON_SIZES.includes(size)) throw new CliError(`an icon's --size is ${ICON_SIZES.join(", ")} px`);
   return { fields: { names, purpose, size }, words: `${names.length} ${purpose} icon${names.length === 1 ? "" : "s"} at ${size} px: ${names.join(", ")}` };
 }
+const MAX_SKETCH_BYTES = 256 * 1024;
+async function sketchOf(context, path, instruction) {
+  if (path === void 0) throw new CliError("lay the sketch out in a JSON file and name it with --sketch, such as --sketch hud.json");
+  const file = resolve(context.io.cwd, path);
+  let text2;
+  try {
+    const found = await stat(file);
+    if (!found.isFile()) throw new CliError(`the sketch ${path} is not a file`);
+    if (found.size > MAX_SKETCH_BYTES) throw new CliError(`the sketch ${path} is larger than ${MAX_SKETCH_BYTES} bytes`);
+    text2 = await readFile(file, "utf8");
+  } catch (error) {
+    if (error instanceof CliError) throw error;
+    throw new CliError(`the sketch ${path} cannot be read`);
+  }
+  let parsed2;
+  try {
+    parsed2 = JSON.parse(text2);
+  } catch {
+    throw new CliError(`the sketch ${path} is not JSON`);
+  }
+  const given = parsed2;
+  const canvas = given?.canvas;
+  if (typeof canvas !== "object" || canvas === null || typeof canvas.width !== "number" || typeof canvas.height !== "number") {
+    throw new CliError(`the sketch ${path} has no canvas: { "canvas": { "width": 256, "height": 256 }, "shapes": [...] }`);
+  }
+  if (!Array.isArray(given.shapes)) throw new CliError(`the sketch ${path} has no list of shapes`);
+  const words = (value) => value === void 0 || typeof value === "string";
+  for (const [index, shape] of given.shapes.entries()) {
+    const each = shape;
+    if (typeof each !== "object" || each === null || typeof each.label !== "string" || !words(each.caption) || !words(each.note)) {
+      throw new CliError(`shape ${index + 1} of the sketch ${path} is not a shape: it needs a label, and a caption and a note are text`);
+    }
+  }
+  const sketch = { canvas: { width: canvas.width, height: canvas.height }, shapes: given.shapes };
+  const problem = sketchSendProblem(sketch, instruction);
+  if (problem !== null) throw new CliError(problem);
+  const labels = sketch.shapes.map((shape) => shape.label.trim());
+  return {
+    sketch,
+    words: `a UI sketch of ${labels.length} shape${labels.length === 1 ? "" : "s"} (${labels.join(", ")}) on ${canvas.width} × ${canvas.height}`
+  };
+}
 const MAX_DESIGN_TILES = 64;
 const MAX_REFERENCE_BYTES = 16 * 1024 * 1024;
 function sizeOf(given, what) {
@@ -3161,6 +3333,20 @@ async function requestOf(context, kind, args) {
   const paths = stringsOf(args, "reference");
   if (paths.length > known.references)
     throw new CliError(known.references === 0 ? `${known.words} takes no reference` : `${known.words} takes at most ${known.references} references`);
+  if (kind === "ui-sketch") {
+    for (const flag of ["pieces", "names", "purpose", "size", "tiles"])
+      if (stringOf(args, flag) !== void 0) throw new CliError(`--${flag} is not a UI sketch's: its shapes are in the --sketch file`);
+    const { sketch, words: words2 } = await sketchOf(context, stringOf(args, "sketch"), instruction);
+    const styles = [];
+    for (const path of paths) styles.push(await referenceOf(context, path));
+    return {
+      kind,
+      body: sketchBody(sketch, instruction, quality),
+      ...styles.length > 0 ? { images: { references: styles } } : {},
+      words: `${words2}${styles.length > 0 ? `, in the style of ${styles.length} reference${styles.length === 1 ? "" : "s"}` : ""}: ${instruction}`
+    };
+  }
+  if (stringOf(args, "sketch") !== void 0) throw new CliError("--sketch is a UI sketch's");
   if (set) {
     const { fields, words: words2 } = interfaceFields(kind, args);
     if (stringOf(args, "tiles") !== void 0) throw new CliError("--tiles is a level design's");
@@ -3215,10 +3401,14 @@ async function followed(context, platform, jobId) {
 }
 const generate = {
   name: "generate",
-  summary: "Generate an object, a creature, a level design, a HUD set, icons or a HUD mockup on the platform, then pull it",
-  usage: "<object|creature|level-design|hud|icons|hud-mockup> [--instruction <text>] [--size <c>x<r>|<px>] [--tiles <c>x<r>] [--pieces <list>] [--names <list>] [--purpose skill|item] [--reference <png>]… [--quality <q>] [--yes]",
+  summary: "Generate an object, a creature, a level design, a HUD set, icons, a HUD mockup or a UI sketch on the platform, then pull it",
+  usage: "<object|creature|level-design|hud|icons|hud-mockup|ui-sketch> [--instruction <text>] [--size <c>x<r>|<px>] [--tiles <c>x<r>] [--pieces <list>] [--names <list>] [--purpose skill|item] [--sketch <json>] [--reference <png>]… [--quality <q>] [--yes]",
   options: {
-    instruction: { type: "string", value: "<text>", description: "what to make, in your own words; a HUD set's or icon set's theme" },
+    instruction: {
+      type: "string",
+      value: "<text>",
+      description: "what to make, in your own words; a HUD set's or icon set's theme; a UI sketch's set, in a line"
+    },
     size: {
       type: "string",
       value: "<cols>x<rows>|<px>",
@@ -3228,6 +3418,11 @@ const generate = {
     names: { type: "string", value: "<list>", description: `an icon set's icons, comma-separated, at most ${MAX_ICONS}` },
     purpose: { type: "string", value: "skill|item", description: "whether an icon set is skills on badges or items alone; item unless given" },
     tiles: { type: "string", value: "<cols>x<rows>", description: "how many tiles a level design is across, 6x4 unless given" },
+    sketch: {
+      type: "string",
+      value: "<json>",
+      description: "a UI sketch's file: { canvas: { width, height }, shapes: [{ label, kind, x, y, width, height, radius?, sides?, caption?, note?, border?, hollow? }] }"
+    },
     reference: { type: "string", multiple: true, value: "<png>", description: "an image to draw from" },
     quality: { type: "string", value: "<quality>", description: `${EDIT_QUALITIES.join(", ")}; ${DEFAULT_QUALITY} unless given` },
     yes: { type: "boolean", short: "y", description: "start it without asking, once the cost is said" },
@@ -3563,7 +3758,7 @@ const seal = {
     answer(context, { sealed: true, output: result.output }, result.output);
   }
 };
-const version = "0.1.0";
+const version = "0.3.0";
 const manifest = {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelvibing/cli",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "PixelVibing: pixel art game assets from the command line, and the Skills that teach coding assistants to make them.",
   "license": "MIT",
   "homepage": "https://pixelvibing.com",

package/skills/pixelvibing/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: pixelvibing
-description: Make pixel art for this game with pixel-vibing-cli — objects, creatures, level designs and interface art (a HUD, skill and item icons) generated on the PixelVibing platform, listed and pulled into pixelvibing/out/, and sealed into the game's container. Use when the game needs a sprite, a prop, a creature, a level's art, its HUD or its icons, or art already made for it.
+description: Make pixel art for this game with pixel-vibing-cli — objects, creatures, level designs and interface art (a HUD, skill and item icons, pieces laid out in a sketch) generated on the PixelVibing platform, listed and pulled into pixelvibing/out/, and sealed into the game's container. Use when the game needs a sprite, a prop, a creature, a level's art, its HUD or its icons, or art already made for it.
 ---
 
 # PixelVibing art for this game
@@ -35,6 +35,7 @@ pixel-vibing-cli generate level-design --instruction "<what>" --tiles <cols>x<ro
 pixel-vibing-cli generate hud [--pieces <list>] [--instruction "<theme>"] --yes --json
 pixel-vibing-cli generate icons --names "<name>,<name>,..." --purpose <skill|item> [--size <16|32|64>] --yes --json
 pixel-vibing-cli generate hud-mockup --instruction "<the HUD>" --yes --json
+pixel-vibing-cli generate ui-sketch --sketch <file.json> --instruction "<the set, in a line>" --yes --json
 ```
 
 Each generation spends the account's credits.
@@ -49,7 +50,8 @@ Each generation spends the account's credits.
   - `--quality` is `low`, `medium` (the default), `high`, `xhigh` or `max`; the higher,
     the dearer.
   - `--reference` is a PNG to draw from, repeated for several: at most 8 for an object,
-    3 for a creature, a level design or a HUD mockup, none for a HUD set or icons.
+    3 for a creature, a level design, a HUD mockup or a UI sketch, none for a HUD set or icons. A UI
+    sketch's references are a style to follow (frames, materials, a way of drawing), never what to draw.
 - **Interface art.** When the game shows the player something over the world, make it here
   rather than drawing it in code:
   - `hud` makes a matching set in one generation: `health-bar`, `mana-bar`, `button`,
@@ -61,7 +63,18 @@ Each generation spends the account's credits.
     potions or loot (each alone). `--size` is 16, 32 (the default) or 64 px.
   - `hud-mockup` draws one screen with its whole HUD, to agree on the look first; take
     its pieces out in the desktop editor.
-  - The art never carries text or numbers: draw labels, counts and values in the game.
+  - `ui-sketch` draws pieces where a sketch lays them out, when the game needs pieces the
+    HUD set does not have, or at sizes and places of its own. Write the sketch as JSON:
+    `{ "canvas": { "width": 256, "height": 256 }, "shapes": [...] }`, the canvas 128 × 128,
+    256 × 256, 256 × 128 or 128 × 256, and up to 16 shapes that do not overlap, each
+    `{ "label", "kind": "rect" | "ellipse" | "polygon", "x", "y", "width", "height" }` in
+    the canvas's pixels, with `radius` for a rounded rectangle and `sides` (3 to 8) for a
+    polygon. A shape may say more: `note` (what the piece is, such as "a full red health
+    bar"), `caption` (text drawn on it, such as "Quit"), `border` (its frame's width in
+    pixels, which gives the piece nine-slice insets) and `hollow: true` (only the border
+    drawn, its inside transparent). Leave a few pixels between shapes.
+  - The art never carries text or numbers, but a UI sketch's captions: draw labels,
+    counts and values in the game.
 - **Success.** The asset is pulled at once. The answer's `files` are where its pictures
   are, relative to `pixelvibing/`.
 - **Failure.** Too few credits starts nothing and names the page where the person buys
@@ -79,7 +92,8 @@ pixel-vibing-cli pull <id|name> [--as <name>] --json
   `creature`, `level-design`, `rotate`, `animate`…
 - **Pulling.** `pull` writes an asset of one picture as `pixelvibing/out/<name>.png`, and
   one of several as `pixelvibing/out/<name>/<n>.png`; a HUD set's pieces as
-  `pixelvibing/out/ui/hud/<piece>.png` and an icon set's as `pixelvibing/out/ui/icon/<name>.png`.
+  `pixelvibing/out/ui/hud/<piece>.png`, an icon set's as `pixelvibing/out/ui/icon/<name>.png`
+  and a UI sketch's as `pixelvibing/out/ui/sketch/<label>.png`.
   It downloads again only when the platform's copy changed.
 - **Collisions.** `pull` never writes over a picture it did not pull. When it refuses,
   give the asset another name with `--as`.