@popcraft/cli 0.47.0 → 0.48.0

package/dist/popcraft.mjs

@@ -1196,7 +1196,7 @@ function operations(spec = openapi) {
 }
 async function call(target2, method, path, opts = {}) {
   const qs = new URLSearchParams(opts.query ?? {}).toString();
-  const headers = { "user-agent": `popcraft-cli/${"0.47.0"}`, ...opts.headers };
+  const headers = { "user-agent": `popcraft-cli/${"0.48.0"}`, ...opts.headers };
   if (target2.token) headers.authorization = `Bearer ${target2.token}`;
   if (opts.contentType) headers["content-type"] = opts.contentType;
   try {
@@ -33233,6 +33233,7 @@ var init_en2 = __esm({
       "designPanel.instanceSwap": "Instance swap",
       "designPanel.italic": "Italic",
       "designPanel.join": "Join",
+      "designPanel.keepProportions": "Keep proportions (height follows width)",
       "designPanel.language": "Language",
       "designPanel.lastFrame": "Last frame",
       "designPanel.layer": "Layer",
@@ -97957,6 +97958,11 @@ function applyAutoLayout(doc2) {
     } else {
       let height = node2.height;
       let width = node2.width;
+      const ar = node2.aspectRatio;
+      if (ar && ar > 0 && node2.layoutSizingVertical !== "FILL" && Math.abs(width / ar - height) > 0.01) {
+        height = Math.round(width / ar * 1e3) / 1e3;
+        cloneNode(nodeId2).height = height;
+      }
       if (node2.type === "INSTANCE") {
         const h = instanceContentHeight(newNodes, nodeId2);
         if (h !== null && Math.abs(h - height) > 0.5) {
@@ -98085,6 +98091,8 @@ function applyAutoLayout(doc2) {
         const r = Math.floor(index2 / actualCols);
         if (child.layoutSizingHorizontal === "FILL") child.width = clampedWidth(colW[c2], child);
         if (child.layoutSizingVertical === "FILL") child.height = clampedHeight(rowH[r], child);
+        keepAspect(child);
+        fitWipe(child, newNodes, cloneNode);
         const cellX = colX[c2];
         const cellY = rowY[r];
         child.x = cellX;
@@ -98123,6 +98131,8 @@ function applyAutoLayout(doc2) {
           if (child.layoutSizingVertical === "FILL") child.height = clampedHeight(fillPrimarySize, child);
           if (child.layoutSizingHorizontal === "FILL") child.width = clampedWidth(Math.max(0, frame3.width - paddingX), child);
         }
+        keepAspect(child);
+        fitWipe(child, newNodes, cloneNode);
       });
       if (wraps(frame3)) {
         const lines2 = wrapLines(frame3, childIds, (id3) => ({ intrinsicWidth: newNodes[id3].width, intrinsicHeight: newNodes[id3].height }));
@@ -98191,7 +98201,12 @@ function applyAutoLayout(doc2) {
       });
     }
   }
-  autoLayoutRoots.forEach((root2) => {
+  let aspect = false;
+  for (const id3 in newNodes) if (newNodes[id3].aspectRatio) {
+    aspect = true;
+    break;
+  }
+  for (let pass = 0; pass < (aspect ? 2 : 1); pass++) autoLayoutRoots.forEach((root2) => {
     measureNode(root2.id);
     layoutNode(root2.id);
   });
@@ -98204,6 +98219,21 @@ function applyAutoLayout(doc2) {
   }
   return { ...doc2, nodes: newNodes };
 }
+function keepAspect(n) {
+  if (n.aspectRatio > 0 && n.layoutSizingVertical !== "FILL") n.height = Math.round(n.width / n.aspectRatio * 1e3) / 1e3;
+}
+function fitWipe(group2, nodes, clone2) {
+  if (group2.type !== "GROUP" || !group2.isMaskGroup || !group2.childIds.some((id3) => nodes[id3]?.isMask && nodes[id3]?.name === "Wipe mask")) return;
+  const w = group2.layoutSizingHorizontal === "FILL", h = group2.layoutSizingVertical === "FILL" || group2.aspectRatio > 0;
+  if (!w && !h) return;
+  for (const id3 of group2.childIds) {
+    const c2 = nodes[id3];
+    if (!c2 || (!w || c2.width === group2.width) && (!h || c2.height === group2.height)) continue;
+    const n = clone2(id3);
+    if (w) n.width = group2.width;
+    if (h) n.height = group2.height;
+  }
+}
 function wraps(frame3) {
   if (frame3.layoutWrap !== "WRAP" || frame3.layoutMode === "GRID") return false;
   return frame3.layoutMode === "HORIZONTAL" ? frame3.layoutSizingHorizontal !== "HUG" : frame3.layoutSizingVertical !== "HUG";
@@ -246764,6 +246794,45 @@ function lineWidth(line, family, weight, fontSize, italic, shaping) {
   }
   return units * fontSize;
 }
+function unitAdvances(line, family, weight, fontSize, italic, shaping) {
+  const out = new Array(line.length).fill(0);
+  if (!line) return out;
+  const share = (start2, len3, em) => {
+    const n = Math.max(1, len3);
+    for (let k2 = 0; k2 < n && start2 + k2 < line.length; k2++) out[start2 + k2] += em * fontSize / n;
+  };
+  const place4 = (glyphs, upem, offset, notdef) => {
+    for (const g of glyphs) {
+      if (notdef && g.gid === 0) {
+        if (g.clusterLength === 0) continue;
+        const text = line.slice(offset + g.clusterStart, offset + g.clusterStart + g.clusterLength);
+        share(offset + g.clusterStart, g.clusterLength, fallbackEm(text, family, weight, italic));
+        continue;
+      }
+      share(offset + g.clusterStart, g.clusterLength, g.xAdvance / upem);
+    }
+  };
+  const shaped = shapeRun(line, family, italic, weight, shaping?.features, shaping?.variations);
+  if (shaped) {
+    place4(shaped.glyphs, shaped.unitsPerEm, 0, true);
+    return out;
+  }
+  const fb = shapeFallback(line, family, italic, weight, shaping?.features);
+  if (fb === "loading") {
+    let i2 = 0;
+    for (const ch of line) {
+      share(i2, ch.length, fallbackEm(ch, family, weight, italic));
+      i2 += ch.length;
+    }
+    return out;
+  }
+  for (const item of fb.items) place4(item.shaped.glyphs, item.shaped.unitsPerEm, item.start, false);
+  for (const i2 of fb.missing) {
+    const c2 = line.charCodeAt(i2);
+    if (!(c2 >= 56320 && c2 <= 57343 && i2 > 0)) out[i2] += 0.5 * fontSize;
+  }
+  return out;
+}
 function fallbackEm(text, family, weight, italic, strict = false) {
   let em = 0;
   for (const ch of text) {
@@ -246795,24 +246864,35 @@ function casedText(text, textCase) {
 function measureAutoWidth(t3) {
   return measureTextWidth(casedText(t3.characters ?? "", t3.textCase), t3.fontFamily, t3.fontWeight, t3.fontSize, t3.fontStyle, t3.letterSpacing ?? 0, { features: t3.fontFeatures, variations: t3.fontVariations });
 }
-function estimateTextHeight(characters, width, family, weight, size6, lineHeight, wraps2 = true, letterSpacing = 0) {
-  const lh2 = lineHeight === "AUTO" ? size6 * 1.25 : lineHeight;
-  const measure4 = (t3, fallbackChars) => measureTextWidth(t3, family, weight, size6, void 0, letterSpacing) || (size6 * 0.55 + letterSpacing) * fallbackChars;
+function estimateTextHeight(characters, width, family, weight, size6, lineHeight, wraps2 = true, letterSpacing = 0, setting = {}) {
+  const lh2 = lineHeight === "AUTO" ? size6 * 1.2 : lineHeight;
+  const italic = setting.fontStyle === "italic";
   let lines2 = 0;
   for (const para of characters.split("\n")) {
-    let cur = 0, n = 1;
-    if (wraps2) for (const word of para.split(" ")) {
-      const w = measure4(word, word.length);
-      const space = cur > 0 ? measure4(" ", 1) : 0;
-      if (cur > 0 && cur + space + w > width) {
-        n++;
-        cur = w;
-      } else cur += space + w;
+    lines2++;
+    if (!wraps2 || !para) continue;
+    const adv = unitAdvances(para, family, weight, size6, italic, setting.shaping);
+    let start2 = 0, w = 0, lastSpace = -1;
+    for (let i2 = 0; i2 < para.length; i2++) {
+      const a = adv[i2] + letterSpacing;
+      const space = para[i2] === " ";
+      if (!space && w + a > width && lastSpace !== -1 && start2 < lastSpace) {
+        lines2++;
+        start2 = lastSpace + 1;
+        w = 0;
+        for (let j = start2; j <= i2; j++) w += adv[j] + letterSpacing;
+        lastSpace = -1;
+      } else {
+        if (space) lastSpace = i2;
+        w += a;
+      }
     }
-    lines2 += n;
   }
   return Math.max(lh2, lines2 * lh2);
 }
+function textSetting(t3) {
+  return { fontStyle: t3.fontStyle, shaping: { features: t3.fontFeatures, variations: t3.fontVariations } };
+}
 var init_measure = __esm({
   "lib/engine/text/measure.ts"() {
     "use strict";
@@ -246833,7 +246913,7 @@ function autoTextBounds(node2, styles) {
   const chars = casedText(resolved.characters || "", resolved.textCase);
   const family = resolved.fontFamily || "Inter", weight = resolved.fontWeight || 400, size6 = resolved.fontSize || 16;
   const width = hugs2 ? Math.max(measureAutoWidth({ ...resolved, fontFamily: family, fontWeight: weight, fontSize: size6 }) || size6, 10) : node2.width;
-  const estimate2 = estimateTextHeight(chars, width, family, weight, size6, resolved.lineHeight ?? "AUTO", !hugs2, resolved.letterSpacing || 0);
+  const estimate2 = estimateTextHeight(chars, width, family, weight, size6, resolved.lineHeight ?? "AUTO", !hugs2, resolved.letterSpacing || 0, textSetting(resolved));
   return { width, height: hugs2 ? estimate2 : Math.max(node2.height, estimate2) };
 }
 var init_text_bounds = __esm({
@@ -252457,7 +252537,6 @@ function resizeWindow(doc2, target2, rect) {
 }
 var init_crop = __esm({
   "lib/editor/crop.ts"() {
-    "use strict";
     init_dist_node();
     init_scene_graph();
     init_photo_frames();
@@ -256954,7 +257033,6 @@ function followPeers(peers) {
 var PALETTE, usePresence, awareness, CURSOR_SEND_MS, VIEWPORT_SEND_MS, cursorTimer, pendingCursor, sentCursor, EMOTE_MS, lastFollowCamera;
 var init_presence = __esm({
   "lib/collab/presence.ts"() {
-    "use strict";
     init_esm();
     init_editor_store();
     init_status_announcements();
@@ -259138,7 +259216,11 @@ function ensureWipeMask(nodes, id3, hostFrameId) {
     childIds: [maskId, id3],
     blendMode: "NORMAL",
     isMaskGroup: true,
-    ...n.layoutPositioning ? { layoutPositioning: n.layoutPositioning } : {}
+    ...n.layoutPositioning ? { layoutPositioning: n.layoutPositioning } : {},
+    // A picture that keeps its proportions (a page's content picture) is wiped in its place in the layout: the group
+    // fills and keeps proportions as the picture did, and the layout sizes what it holds to it (lib/document/auto-layout.ts
+    // `fitWipe`), so a phone scales it rather than keeping the desktop's width.
+    ...n.aspectRatio ? Object.fromEntries(["layoutSizingHorizontal", "layoutSizingVertical", "aspectRatio"].filter((k2) => n[k2] !== void 0).map((k2) => [k2, n[k2]])) : {}
   };
   const moved3 = { ...n, parentId: gid, x: 0, y: 0, motion: shiftPositionKeys(n.motion, -n.x, -n.y) };
   if (!moved3.motion) delete moved3.motion;
@@ -261041,11 +261123,32 @@ function breakpointDocument(doc2, id3) {
     const width = isScreen(doc2, n) && over2?.width === void 0 ? { width: bp.previewWidth } : null;
     if (over2 || width) nodes[nid] = { ...n, ...over2, ...width };
   }
-  const view2 = applyAutoLayout({ ...doc2, nodes });
+  const view2 = rewrapped(doc2, applyAutoLayout({ ...doc2, nodes }));
   const forDoc = viewMemo.get(doc2) ?? viewMemo.set(doc2, /* @__PURE__ */ new Map()).get(doc2);
   forDoc.set(id3, view2);
   return view2;
 }
+function rewrapped(doc2, view2) {
+  for (let pass = 0; pass < 3; pass++) {
+    let nodes = null;
+    for (const id3 in view2.nodes) {
+      const n = view2.nodes[id3], was = doc2.nodes[id3];
+      if (n.type !== "TEXT" || !n.visible || !was) continue;
+      const t3 = n;
+      if (t3.textAutoResize === "NONE") continue;
+      if (Math.abs(t3.width - was.width) < 0.5 && t3.textStyleId === was.textStyleId && t3.fontSize === was.fontSize && t3.textAutoResize === was.textAutoResize) continue;
+      const m = measureTextLayout(resolveTextNodeStyles(t3, doc2.styles ?? {}));
+      if (!m) continue;
+      const width = t3.textAutoResize === "WIDTH_AND_HEIGHT" ? m.width : t3.width;
+      if (Math.abs(m.height - t3.height) < 0.5 && Math.abs(width - t3.width) < 0.5) continue;
+      nodes ??= { ...view2.nodes };
+      nodes[id3] = { ...t3, width, height: m.height };
+    }
+    if (!nodes) break;
+    view2 = applyAutoLayout({ ...view2, nodes });
+  }
+  return view2;
+}
 function withOverrides(node2, id3, overrides2) {
   const next2 = { ...node2.responsive };
   if (Object.keys(overrides2).length) next2[id3] = overrides2;
@@ -261081,8 +261184,9 @@ function laidOut(nodes, n, key5) {
   const inFlow3 = !!parent && parent.layoutMode !== void 0 && parent.layoutMode !== "NONE" && s.layoutPositioning !== "ABSOLUTE";
   const lays = own2.layoutMode !== void 0 && own2.layoutMode !== "NONE";
   if (key5 === "x" || key5 === "y") return inFlow3;
-  if (key5 === "width") return s.layoutSizingHorizontal === "FILL" || s.layoutSizingHorizontal === "HUG" && (lays || n.type === "TEXT");
-  if (key5 === "height") return s.layoutSizingVertical === "FILL" || s.layoutSizingVertical === "HUG" && (lays || n.type === "TEXT") || n.type === "TEXT" && n.textAutoResize !== "NONE";
+  const fills = (sizing3) => sizing3 === "FILL" && s.layoutPositioning !== "ABSOLUTE";
+  if (key5 === "width") return fills(s.layoutSizingHorizontal) || s.layoutSizingHorizontal === "HUG" && (lays || n.type === "TEXT");
+  if (key5 === "height") return fills(s.layoutSizingVertical) || s.layoutSizingVertical === "HUG" && (lays || n.type === "TEXT") || n.type === "TEXT" && n.textAutoResize !== "NONE";
   return false;
 }
 function breakpointResult(rest, baked, edited, id3) {
@@ -261123,7 +261227,9 @@ function foldVariant(doc2, masterId, variantId, id3) {
     const restyled = variant.textStyleId !== master.textStyleId;
     for (const k2 of RESPONSIVE_PROPS) {
       if (isRoot && (k2 === "x" || k2 === "y" || k2 === "width")) continue;
-      const value3 = variant[k2];
+      const set4 = variant[k2];
+      const inherited = k2 in UNSET && (master[k2] !== void 0 || overridesAt(master, doc2, id3)?.[k2] !== void 0);
+      const value3 = set4 ?? (inherited ? UNSET[k2] : void 0);
       if (value3 === void 0 || laidOut(doc2.nodes, variant, k2)) continue;
       if ((k2 === "fontSize" || k2 === "lineHeight") && restyled) continue;
       props[k2] = value3;
@@ -261149,11 +261255,13 @@ function setBreakpoints(doc2, list2) {
   }
   return nodes ? { ...next2, nodes } : next2;
 }
-var DEFAULT_BREAKPOINTS, RESPONSIVE_PROPS, RESPONSIVE, isBaseBreakpoint, same2, ownOverrides, isScreen, viewMemo;
+var DEFAULT_BREAKPOINTS, RESPONSIVE_PROPS, RESPONSIVE, isBaseBreakpoint, UNSET, same2, ownOverrides, isScreen, viewMemo;
 var init_breakpoints = __esm({
   "lib/document/breakpoints.ts"() {
     "use strict";
     init_auto_layout();
+    init_instance_layout();
+    init_text_styles();
     DEFAULT_BREAKPOINTS = [
       { id: "desktop", name: "Desktop", maxWidth: null, previewWidth: 1280 },
       { id: "tablet", name: "Tablet", maxWidth: 1024, previewWidth: 834 },
@@ -261183,10 +261291,24 @@ var init_breakpoints = __esm({
       "fontSize",
       "lineHeight",
       "textAlign",
-      "textStyleId"
+      "textStyleId",
+      "scaleX",
+      "scaleY",
+      "anchorX",
+      "anchorY",
+      "rotation",
+      "cornerRadius",
+      "textAutoResize",
+      "paths",
+      "translateX",
+      "translateY",
+      "z",
+      "rotateX",
+      "rotateY"
     ];
     RESPONSIVE = new Set(RESPONSIVE_PROPS);
     isBaseBreakpoint = (doc2, id3) => !id3 || breakpointsOf(doc2)[0].id === id3 || !breakpointsOf(doc2).some((b) => b.id === id3);
+    UNSET = { scaleX: 1, scaleY: 1, anchorX: 0.5, anchorY: 0.5, rotation: 0, translateX: 0, translateY: 0, z: 0, rotateX: 0, rotateY: 0 };
     same2 = (a, b) => a === b || typeof a === "object" && typeof b === "object" && JSON.stringify(a) === JSON.stringify(b);
     ownOverrides = (node2, id3) => Object.keys(node2?.responsive?.[id3] ?? {});
     isScreen = (doc2, n) => n.type === "FRAME" && doc2.nodes[n.parentId ?? ""]?.type === "PAGE";
@@ -262989,7 +263111,6 @@ function planEntryAction({ home }) {
 var STORAGE_KEY2, useHyperyTeam, TEAM_PROMPT_ENABLED, TEAM_PROMPTED_KEY, PROMPTED_KEY, useTeamPrompt, started;
 var init_team = __esm({
   "lib/client/cloud/team.ts"() {
-    "use strict";
     init_esm();
     init_api4();
     init_session();
@@ -306672,7 +306793,6 @@ function decodeSource(key5, label3) {
 var DECODE_CACHE_BYTES, cache7, pending4, held, sizeOf, lengths, decodedLengths, DECODE_TIMEOUT_MS, decodedAudio, decodedSource, pcmOf;
 var init_audio_decode = __esm({
   "lib/motion/audio-decode.ts"() {
-    "use strict";
     init_media_store();
     init_audio_plan();
     init_time_stretch();
@@ -310059,7 +310179,6 @@ function importSVGFile(file2, document2, parentId) {
 var ENTITIES, decode3, I, mul2, apply2, scaleOf, NUM2, nums, near, NAMED, INHERITED, PRESENTATION, len2, CAP, JOIN, SKIPPED, refId;
 var init_svg_import = __esm({
   "lib/io/svg-import.ts"() {
-    "use strict";
     init_dist_node();
     init_types();
     ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\xA0" };
@@ -311452,6 +311571,7 @@ function startCloudSync() {
 var status, readOnlyDoc, activeLink, statusListeners, notice, urlArmed, opening, syncStatus, canEdit, uploaded, MEDIA_UPLOAD_PARALLEL, pushTimer, pushing, dirty, pendingMedia, collab, collabSession, collabAnonymous, uploadedThumbs, thumbCheckedAt, THUMB_EVERY_MS, THUMB_MIN_GAP_MS, putThumbnail, openingFiles, mediaHealed, started2;
 var init_sync2 = __esm({
   "lib/client/cloud/sync.ts"() {
+    "use strict";
     init_paint_repair();
     init_migrate();
     init_view();
@@ -311721,7 +311841,7 @@ var init_text_measurer = __esm({
       const width = node2.textAutoResize === "WIDTH_AND_HEIGHT" ? Math.max(1, Math.ceil(measureAutoWidth(node2))) : node2.width;
       return {
         width,
-        height: Math.round(estimateTextHeight(characters, width, node2.fontFamily, node2.fontWeight, node2.fontSize, node2.lineHeight ?? "AUTO", node2.textAutoResize !== "WIDTH_AND_HEIGHT", node2.letterSpacing ?? 0))
+        height: Math.round(estimateTextHeight(characters, width, node2.fontFamily, node2.fontWeight, node2.fontSize, node2.lineHeight ?? "AUTO", node2.textAutoResize !== "WIDTH_AND_HEIGHT", node2.letterSpacing ?? 0, textSetting(node2)))
       };
     };
   }
@@ -313504,7 +313624,7 @@ function layoutTextUncached(node2, atlas, cameraZoom = 1) {
         }
       }
       if (hyphenated) {
-      } else if (currentIndent + lineWidth2 + advance > maxWidth2 && lastSpaceIndex !== -1 && lineStartIndex < lastSpaceIndex) {
+      } else if (!isSpace2 && currentIndent + lineWidth2 + advance > maxWidth2 && lastSpaceIndex !== -1 && lineStartIndex < lastSpaceIndex) {
         let wrappedLineHeight = 0;
         for (let j = lineStartIndex; j < lastSpaceIndex; j++) {
           const lh3 = resolvedStyles[j].lineHeight === "AUTO" ? resolvedStyles[j].fontSize * 1.2 : resolvedStyles[j].lineHeight;
@@ -317278,6 +317398,7 @@ async function selectionReferenceImages(doc2, selection, opts = {}) {
 var FIT_QUALITIES, FIT_SCALES, blobToDataUrl;
 var init_reference_images = __esm({
   "lib/ai/reference-images.ts"() {
+    "use strict";
     init_export();
     init_selection_bounds();
     init_renderer_registry();
@@ -318120,7 +318241,6 @@ function agentToolList() {
 var AGENT_CAPABILITIES, legacyCommandId, legacyTools, blobToDataUrl3, provided, legacyTool, legacyToolList;
 var init_agent = __esm({
   "lib/commands/agent.ts"() {
-    "use strict";
     init_types5();
     init_registry();
     init_errors();
@@ -323380,6 +323500,11 @@ function flowChild(node2, parent) {
     if (cross2 === "HUG") style[crossProp] = null;
     if ((parent.counterAxisAlignItems ?? "MIN") === "MIN") style["align-self"] = "flex-start";
   }
+  const ar = node2.aspectRatio;
+  if (ar && ar > 0 && v !== "FILL") {
+    style.height = null;
+    style["aspect-ratio"] = String(Math.round(ar * 1e4) / 1e4);
+  }
   return { style };
 }
 function constrained(kind, pos, size6, parentSize, start2, end, sizeProp) {
@@ -323987,6 +324112,7 @@ var tree_exports = {};
 __export(tree_exports, {
   DEFAULT_NODE_CAP: () => DEFAULT_NODE_CAP,
   EXPORT_NODE_CAP: () => EXPORT_NODE_CAP,
+  breakpointPictures: () => breakpointPictures,
   buildPlainTree: () => buildPlainTree,
   buildWebTree: () => buildWebTree,
   flatten: () => flatten2,
@@ -324332,7 +324458,7 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
           }
         } else for (const child of childrenOf(node2, nodesNow)) {
           const built = build3(child, node2, kids3D, kidFold);
-          if (built) web.children.push(built);
+          if (built) web.children.push(...opts.target === "site" ? breakpointPictures(doc2, child, built) : [built]);
         }
       }
     } finally {
@@ -324348,6 +324474,23 @@ function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
   if (!root2) throw new Error("Node cap of 0");
   return { root: root2, truncated, ...folds ? { rules: foldRules(folds) } : {}, ...tokens?.vars.length ? { tokens } : {} };
 }
+function breakpointPictures(doc2, raw, built) {
+  const r = raw.responsive;
+  if (!built.asset || built.island || !r) return [built];
+  const order2 = breakpointsOf(doc2).map((b) => b.id);
+  const redrawn = order2.filter((b) => r[b]?.paths);
+  if (!redrawn.length) return [built];
+  const paths = JSON.stringify(raw.paths);
+  const shown2 = [...redrawn].reverse().find((b) => JSON.stringify(r[b].paths) === paths) ?? null;
+  const hide2 = (n) => ({ ...n, style: { ...n.style, display: "none" } });
+  return [
+    shown2 ? hide2(built) : built,
+    ...redrawn.map((b) => {
+      const alt = { ...built, id: `${built.id}@${b}`, children: [], asset: { kind: built.asset.kind, reason: built.asset.reason, of: built.asset.of ?? built.id, breakpoint: b } };
+      return b === shown2 ? alt : hide2(alt);
+    })
+  ];
+}
 function childLookup(doc2, id3) {
   const at4 = id3.lastIndexOf("::");
   const host = at4 > 0 ? id3.slice(0, at4) : "";
@@ -324364,6 +324507,7 @@ var init_tree = __esm({
   "lib/io/web/tree.ts"() {
     "use strict";
     init_pixel_art();
+    init_breakpoints();
     init_instance_layout();
     init_text_styles();
     init_variables();
@@ -327984,7 +328128,7 @@ var init_package = __esm({
   "packages/runtime/package.json"() {
     package_default = {
       name: "@popcraft/runtime",
-      version: "0.47.0",
+      version: "0.48.0",
       description: "What code exported from PopCraft shares: the meaning of expressions (operators and functions) and, as it grows, the parts of a design's behaviour that are common code rather than generated React.",
       license: "MIT",
       homepage: "https://popcraft.app/docs/exporting/nextjs",
@@ -353226,7 +353370,7 @@ async function resolveWebAssets(tree, resolvers) {
     const render2 = node2.asset.kind === "png" ? resolvers.renderPNG : resolvers.renderSVG;
     if (!render2) return;
     try {
-      const out = await render2(node2.asset.of ?? node2.id, node2.asset.self ? { self: true } : void 0);
+      const out = await render2(node2.asset.of ?? node2.id, node2.asset.self || node2.asset.breakpoint ? { ...node2.asset.self ? { self: true } : {}, ...node2.asset.breakpoint ? { breakpoint: node2.asset.breakpoint } : {} } : void 0);
       if (!out) return;
       if (node2.asset.kind === "png") node2.asset.pngDataUrl = out;
       else node2.asset.svg = out;
@@ -353490,9 +353634,10 @@ __export(resolvers_exports, {
 });
 function rendererAssetResolvers(source3, scale = 2) {
   const styles = source3.styles;
-  const shownDoc = (id3) => {
-    const n = source3.nodes[id3];
-    return n && n.visible === false ? { ...source3, nodes: { ...source3.nodes, [id3]: { ...n, visible: true } } } : source3;
+  const shownDoc = (id3, breakpoint2) => {
+    const at4 = breakpoint2 ? breakpointDocument(source3, breakpoint2) : source3;
+    const n = at4.nodes[id3];
+    return n && n.visible === false ? { ...at4, nodes: { ...at4.nodes, [id3]: { ...n, visible: true } } } : at4;
   };
   const alone = (doc2, id3) => {
     const n = doc2.nodes[id3];
@@ -353501,10 +353646,10 @@ function rendererAssetResolvers(source3, scale = 2) {
     return { doc: { ...doc2, nodes: { ...doc2.nodes, [id3]: node2 } }, node: node2 };
   };
   return {
-    renderSVG: async (id3) => {
+    renderSVG: async (id3, opts) => {
       const renderer = getActiveRenderer();
       if (!renderer) return null;
-      const doc2 = shownDoc(id3);
+      const doc2 = shownDoc(id3, opts?.breakpoint);
       const node2 = nodeFor(doc2, id3);
       const svg = node2 ? await exportNodeToSVG(renderer, node2, doc2, styles) : null;
       if (svg) return svg;
@@ -353514,7 +353659,7 @@ function rendererAssetResolvers(source3, scale = 2) {
     renderPNG: async (id3, opts) => {
       const renderer = getActiveRenderer();
       if (!renderer) return null;
-      const doc2 = shownDoc(id3);
+      const doc2 = shownDoc(id3, opts?.breakpoint);
       if (opts?.self) {
         const a = alone(doc2, id3);
         const blob = a ? await exportNodeToBlob(renderer, a.node, { format: "PNG", scale, suffix: "" }, a.doc, styles) : null;
@@ -353533,6 +353678,7 @@ var init_resolvers = __esm({
   "lib/io/web/resolvers.ts"() {
     "use strict";
     init_scene_graph();
+    init_breakpoints();
     init_renderer_registry();
     init_export();
     init_svg_export();
@@ -361206,7 +361352,6 @@ function publishSite(key5, files, opts = {}) {
 var siteStatus, setSiteVersion, workspaceSites, deleteSite, renameSite;
 var init_sites = __esm({
   "lib/client/cloud/sites.ts"() {
-    "use strict";
     init_files();
     init_upload2();
     init_api4();
@@ -404051,7 +404196,14 @@ Set the timeline first, then add moves. Times are ms on the frame's timeline.
 - On the phone \`webResponsive\` folds the nav's links and the layer named "Brand name" away, leaving the logo tile and
   the button; to keep the name, call the brand text something else. Keep body text 14 px or more on the phone,
   recompose the hero rather than cropping it, and keep every size under 8,192 px tall. Leave room in text boxes: a line that only just fits wraps differently
-  in a browser.`;
+  in a browser.
+- A content picture on a page is \`k.contentImage(parent, url, width, { ratio, name, radius })\`: whole, at its own
+  proportions (\`ratio\`, width over height, for a picture of your own), and its height follows the width its column
+  gives it at every breakpoint and in the browser. Never crop a content picture to a fixed-height band: on a phone it
+  loses its sides. Only decoration behind words may cover-crop (\`k.image\`), marked \`semantics: { hidden: true }\`.
+- What a breakpoint carries from a size: layout, size, visibility, type, and a drawing's scale, turn, offset and
+  redrawn paths. Scale scenery down for the phone (\`scaleX\`/\`scaleY\` with \`anchorX: 0, anchorY: 0\`) rather than
+  cutting it with a smaller frame. Ambient motion is not carried: it plays the desktop's keys at every width.`;
     EDITING = `## Editing designs that already exist
 
 Use \`run_script\` (from a terminal \`popcraft run <file> run_script --code @fix.js\`) to change many layers in one call.
@@ -413557,7 +413709,7 @@ init_resources();
 init_desktop();
 init_hypery();
 import { createInterface } from "node:readline";
-var VERSION2 = "0.47.0";
+var VERSION2 = "0.48.0";
 var HELP = `popcraft ${VERSION2} \u2014 the PopCraft command line
 
 Files (headless, on .popcraft files):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popcraft/cli",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "The PopCraft command line: edit .popcraft files headlessly, call the REST API, publish to the marketplace and manage the desktop app's local plugins, themes, fonts, skills and agents.",
   "license": "MIT",
   "homepage": "https://popcraft.app/docs/api/cli",
@@ -34,7 +34,7 @@
     "esbuild": "0.28.2"
   },
   "dependencies": {
-    "@popcraft/kit": "0.47.0"
+    "@popcraft/kit": "0.48.0"
   },
   "scripts": {
     "build": "node build.mjs",