@popcraft/cli 0.7.1 → 0.8.0

package/dist/popcraft.mjs

@@ -1173,7 +1173,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.7.1"}`, ...opts.headers };
+  const headers = { "user-agent": `popcraft-cli/${"0.8.0"}`, ...opts.headers };
   if (target2.token) headers.authorization = `Bearer ${target2.token}`;
   if (opts.contentType) headers["content-type"] = opts.contentType;
   try {
@@ -2832,8 +2832,8 @@ function nodeFlips(node2) {
 function localMatrix(node2, ignoreFlips = false, shiftX = 0, shiftY = 0) {
   const w = node2.width, h = node2.height;
   const ax = restValue(node2, "anchorX"), ay = restValue(node2, "anchorY");
-  const rad2 = (node2.rotation || 0) * Math.PI / 180;
-  const cos = rad2 !== 0 ? Math.cos(rad2) : 1, sin = rad2 !== 0 ? Math.sin(rad2) : 0;
+  const rad3 = (node2.rotation || 0) * Math.PI / 180;
+  const cos = rad3 !== 0 ? Math.cos(rad3) : 1, sin = rad3 !== 0 ? Math.sin(rad3) : 0;
   const sx = restValue(node2, "scaleX") * (!ignoreFlips && node2.flipHorizontal ? -1 : 1);
   const sy = restValue(node2, "scaleY") * (!ignoreFlips && node2.flipVertical ? -1 : 1);
   const px5 = node2.x + ax * w + restValue(node2, "translateX");
@@ -32029,6 +32029,9 @@ var init_en2 = __esm({
       "command:show.setAdvance": "Set how the show advances",
       "command:site.setBreakpoints": "Breakpoints",
       "command:site.setBreakpoints#defaults": "Reset breakpoints to Desktop, Tablet and Phone",
+      "command:site.setGpuTransitions": "Draw 3D transitions with WebGPU",
+      "command:site.setGpuTransitions#off": "Draw 3D transitions in CSS only",
+      "command:site.setGpuTransitions#on": "Draw 3D transitions with WebGPU",
       "command:site.setRoute": "Page address",
       "command:text.detach": "Detach text from path or shape",
       "command:text.flowIntoShape": "Flow text into shape",
@@ -34250,6 +34253,7 @@ var init_en2 = __esm({
       "prototypePanel.pagePrototypeSettings": "Page Prototype Settings",
       "prototypePanel.pickCollection": "\u2014 Pick collection \u2014",
       "prototypePanel.pickVariable": "\u2014 Pick variable \u2014",
+      "prototypePanel.picture": "Picture",
       "prototypePanel.pixel7": "Pixel 7",
       "prototypePanel.press": "Press",
       "prototypePanel.previousMarker": "Previous marker",
@@ -35174,6 +35178,43 @@ var init_en2 = __esm({
       "topBar.webPreview": "Web preview",
       "topBar.zoomToFit": "Zoom to fit",
       "topBar.zoomToFrame": "Zoom to frame",
+      "transition:CAROUSEL_FROM_LEFT": "Carousel \u2190 left",
+      "transition:CAROUSEL_FROM_RIGHT": "Carousel \u2192 right",
+      "transition:CIRCLE_WIPE": "Circle wipe",
+      "transition:CUBE_FROM_BOTTOM": "Cube \u2193 bottom",
+      "transition:CUBE_FROM_LEFT": "Cube \u2190 left",
+      "transition:CUBE_FROM_RIGHT": "Cube \u2192 right",
+      "transition:CUBE_FROM_TOP": "Cube \u2191 top",
+      "transition:CUT": "Cut",
+      "transition:DEPTH_PULL": "Depth pull",
+      "transition:DEPTH_PUSH": "Depth push",
+      "transition:DISSOLVE": "Dissolve",
+      "transition:FLIP_HORIZONTAL": "Flip \u2194",
+      "transition:FLIP_VERTICAL": "Flip \u2195",
+      "transition:INSTANT": "Instant",
+      "transition:IRIS": "Iris",
+      "transition:MOVE_OUT_TO_BOTTOM": "Move out \u2193 bottom",
+      "transition:MOVE_OUT_TO_LEFT": "Move out \u2190 left",
+      "transition:MOVE_OUT_TO_RIGHT": "Move out \u2192 right",
+      "transition:MOVE_OUT_TO_TOP": "Move out \u2191 top",
+      "transition:PUSH_FROM_BOTTOM": "Push \u2193 bottom",
+      "transition:PUSH_FROM_LEFT": "Push \u2190 left",
+      "transition:PUSH_FROM_RIGHT": "Push \u2192 right",
+      "transition:PUSH_FROM_TOP": "Push \u2191 top",
+      "transition:SLIDE_FROM_BOTTOM": "Slide in \u2193 bottom",
+      "transition:SLIDE_FROM_LEFT": "Slide in \u2190 left",
+      "transition:SLIDE_FROM_RIGHT": "Slide in \u2192 right",
+      "transition:SLIDE_FROM_TOP": "Slide in \u2191 top",
+      "transition:SMART_ANIMATE": "Smart animate",
+      "transition:STACK_IN": "Stack in",
+      "transition:STACK_OUT": "Stack out",
+      "transition:SWING_CLOSE": "Swing close",
+      "transition:SWING_OPEN": "Swing open",
+      "transition:WHIP_LEFT": "Whip pan \u2190 left",
+      "transition:WHIP_RIGHT": "Whip pan \u2192 right",
+      "transition:ZOOM_THROUGH": "Zoom through",
+      "transitions.group3d": "3D",
+      "transitions.groupFlat": "Flat",
       "transportBar.aMotionComponentEveryInstance": "{frameName}: a motion component \u2014 every instance plays this timeline",
       "transportBar.animateTheSelectedLayersKeyframe": "Animate the selected layers: keyframe, or a preset",
       "transportBar.backToTheKeyframes": "Back to the keyframes",
@@ -87522,7 +87563,7 @@ function applyAutoLayout(doc2) {
         let rowSizes = frame2.layoutGridRowSizes || [];
         if (rows === "AUTO") {
           actualRows = Math.max(1, Math.ceil(childIds.length / actualCols));
-          rowSizes = Array.from({ length: actualRows }).map(() => ({ sizing: "FIXED", value: String(minRowH) }));
+          rowSizes = Array.from({ length: actualRows }).map(() => ({ sizing: "HUG", value: "113", min: minRowH }));
         } else {
           actualRows = Math.max(1, rows);
           if (rowSizes.length !== actualRows) {
@@ -87548,7 +87589,7 @@ function applyAutoLayout(doc2) {
         let sumFixedRows = 0;
         rowSizes.forEach((s, r) => {
           if (s.sizing === "FIXED") sumFixedRows += parseFloat(s.value) || 0;
-          else if (s.sizing === "HUG") sumFixedRows += rowMaxHugs[r];
+          else if (s.sizing === "HUG") sumFixedRows += Math.max(s.min ?? 0, rowMaxHugs[r]);
         });
         intrinsicW = sumFixedCols + Math.max(0, actualCols - 1) * itemSpacing + paddingX;
         intrinsicH = sumFixedRows + Math.max(0, actualRows - 1) * counterSpacing + paddingY;
@@ -87659,7 +87700,7 @@ function applyAutoLayout(doc2) {
       let rowSizes = frame2.layoutGridRowSizes || [];
       if (rows === "AUTO") {
         actualRows = Math.max(1, Math.ceil(childIds.length / actualCols));
-        rowSizes = Array.from({ length: actualRows }).map(() => ({ sizing: "HUG", value: "113" }));
+        rowSizes = Array.from({ length: actualRows }).map(() => ({ sizing: "HUG", value: "113", min: minRowH }));
       } else {
         actualRows = Math.max(1, rows);
         if (rowSizes.length !== actualRows) {
@@ -87695,14 +87736,14 @@ function applyAutoLayout(doc2) {
       let totalRowFr = 0;
       rowSizes.forEach((s, r) => {
         if (s.sizing === "FIXED") fixedRowH += parseFloat(s.value) || 0;
-        else if (s.sizing === "HUG") fixedRowH += rowMaxHugs[r];
+        else if (s.sizing === "HUG") fixedRowH += Math.max(s.min ?? 0, rowMaxHugs[r]);
         else if (s.sizing === "FILL") totalRowFr += parseFloat(s.value) || 1;
       });
       const availRowH = Math.max(0, frame2.height - paddingY - Math.max(0, actualRows - 1) * counterSpacing - fixedRowH);
       const rowH = new Array(actualRows).fill(0);
       rowSizes.forEach((s, r) => {
         if (s.sizing === "FIXED") rowH[r] = parseFloat(s.value) || 0;
-        else if (s.sizing === "HUG") rowH[r] = rowMaxHugs[r];
+        else if (s.sizing === "HUG") rowH[r] = Math.max(s.min ?? 0, rowMaxHugs[r]);
         else if (s.sizing === "FILL") rowH[r] = totalRowFr > 0 ? availRowH * ((parseFloat(s.value) || 1) / totalRowFr) : 0;
       });
       const colX = new Array(actualCols).fill(0);
@@ -89179,6 +89220,83 @@ var init_keys = __esm({
 });
 
 // lib/motion/transitions.ts
+function faceBrightness(rotateX, rotateY) {
+  const c2 = Math.abs(Math.cos(rotateX * Math.PI / 180) * Math.cos(rotateY * Math.PI / 180));
+  return AMBIENT_SHADE + (1 - AMBIENT_SHADE) * c2;
+}
+function ringFace(side, axis, angle2, r, dolly) {
+  const s = Math.sin(rad2(angle2)), z2 = -r + r * Math.cos(rad2(angle2)) - dolly;
+  return axis === "y" ? { side, anchorX: 0.5, anchorY: 0.5, tx: r * s, ty: 0, z: z2, rotateX: 0, rotateY: angle2, opacity: 1, brightness: faceBrightness(0, angle2) } : { side, anchorX: 0.5, anchorY: 0.5, tx: 0, ty: -r * s, z: z2, rotateX: angle2, rotateY: 0, opacity: 1, brightness: faceBrightness(angle2, 0) };
+}
+function transition3dPose(type, progress2, stage) {
+  if (!is3DTransition(type)) return null;
+  const p2 = Math.min(1, Math.max(0, progress2));
+  const W = Math.max(1, stage.width), H = Math.max(1, stage.height);
+  const arc = Math.sin(Math.PI * p2);
+  const pose = (extent2, faces2) => ({ perspective: 1.8 * extent2, faces: backToFront(faces2) });
+  if (p2 <= 0) return pose(W, [still("a")]);
+  if (p2 >= 1) return pose(W, [still("b")]);
+  switch (type) {
+    case "CUBE_FROM_RIGHT":
+      return pose(W, [ringFace("a", "y", -90 * p2, W / 2, 0.1 * W * arc), ringFace("b", "y", 90 * (1 - p2), W / 2, 0.1 * W * arc)]);
+    case "CUBE_FROM_LEFT":
+      return pose(W, [ringFace("a", "y", 90 * p2, W / 2, 0.1 * W * arc), ringFace("b", "y", -90 * (1 - p2), W / 2, 0.1 * W * arc)]);
+    case "CUBE_FROM_BOTTOM":
+      return pose(H, [ringFace("a", "x", 90 * p2, H / 2, 0.1 * H * arc), ringFace("b", "x", -90 * (1 - p2), H / 2, 0.1 * H * arc)]);
+    case "CUBE_FROM_TOP":
+      return pose(H, [ringFace("a", "x", -90 * p2, H / 2, 0.1 * H * arc), ringFace("b", "x", 90 * (1 - p2), H / 2, 0.1 * H * arc)]);
+    case "CAROUSEL_FROM_RIGHT":
+    case "CAROUSEL_FROM_LEFT": {
+      const r = (W / 2 + 0.06 * W) / Math.tan(rad2(30)), dir = type === "CAROUSEL_FROM_RIGHT" ? 1 : -1;
+      return pose(W, [ringFace("a", "y", -dir * 60 * p2, r, 0.25 * W * arc), ringFace("b", "y", dir * 60 * (1 - p2), r, 0.25 * W * arc)]);
+    }
+    case "FLIP_HORIZONTAL":
+    case "FLIP_VERTICAL": {
+      const front = -180 * p2, back = 180 * (1 - p2), z2 = -0.2 * (type === "FLIP_HORIZONTAL" ? W : H) * arc;
+      const face = (side, angle2) => still(side, {
+        z: z2,
+        ...type === "FLIP_HORIZONTAL" ? { rotateY: angle2 } : { rotateX: -angle2 },
+        opacity: Math.cos(rad2(angle2)) > 0 ? 1 : 0,
+        brightness: faceBrightness(0, angle2)
+      });
+      return pose(type === "FLIP_HORIZONTAL" ? W : H, [face("a", front), face("b", back)]);
+    }
+    // A door: a nearer camera than the turns (the hinge must read as turning in depth, not as a page shrinking), and
+    // the room behind it does not move — it only comes out of the door's shadow.
+    case "SWING_OPEN":
+      return { perspective: 1.1 * W, faces: backToFront([
+        still("b", { z: -1, brightness: 0.55 + 0.45 * p2 }),
+        still("a", { anchorX: 0, rotateY: 100 * p2, opacity: 1 - ramp(p2, 0.75, 1), brightness: faceBrightness(0, 100 * p2) })
+      ]) };
+    case "SWING_CLOSE":
+      return { perspective: 1.1 * W, faces: backToFront([
+        still("a", { z: -1, brightness: 1 - 0.45 * p2 }),
+        still("b", { anchorX: 0, rotateY: 100 * (1 - p2), opacity: ramp(p2, 0, 0.25), brightness: faceBrightness(0, 100 * (1 - p2)) })
+      ]) };
+    case "STACK_IN":
+      return pose(H, [
+        still("a", { z: -0.12 * W * p2, rotateX: 6 * p2, brightness: 1 - 0.35 * p2 }),
+        still("b", { ty: H * (1 - p2), z: 1e-3 })
+      ]);
+    case "STACK_OUT":
+      return pose(H, [
+        still("b", { z: -0.12 * W * (1 - p2), rotateX: 6 * (1 - p2), brightness: 1 - 0.35 * (1 - p2) }),
+        still("a", { ty: H * p2, z: 1e-3 })
+      ]);
+    case "DEPTH_PUSH":
+      return pose(Math.max(W, H), [
+        still("a", { z: -0.6 * W * p2, opacity: 1 - p2, brightness: 1 - 0.3 * p2 }),
+        still("b", { z: 0.35 * W * (1 - p2), opacity: p2 })
+      ]);
+    case "DEPTH_PULL":
+      return pose(Math.max(W, H), [
+        still("b", { z: -0.6 * W * (1 - p2), opacity: p2, brightness: 1 - 0.3 * (1 - p2) }),
+        still("a", { z: 0.35 * W * p2, opacity: 1 - p2 })
+      ]);
+    default:
+      return null;
+  }
+}
 function scaledAbout(m, k2, cx, cy) {
   return k2 === 1 ? m : multiply([k2, 0, 0, k2, cx - k2 * cx, cy - k2 * cy], m);
 }
@@ -89193,6 +89311,16 @@ function coverRadius(stage, c2) {
 }
 function transitionRoots(type, progress2, a, b, stage, params2) {
   const p2 = Math.min(1, Math.max(0, progress2));
+  if (is3DTransition(type)) {
+    const flat2 = transitionRoots(flatTransitionType(type), p2, a, b, stage, params2);
+    const pose = p2 > 0 && p2 < 1 ? transition3dPose(type, p2, stage) : null;
+    if (!pose) return flat2;
+    return pose.faces.map((f2) => {
+      const side = f2.side === "a" ? a : b;
+      const r = flat2.find((x2) => x2.rootId === side.id);
+      return { rootId: side.id, matrix: r?.matrix ?? side.base, opacity: r ? r.opacity : 0, face: { ...f2, base: side.base, stage, perspective: pose.perspective } };
+    });
+  }
   switch (type) {
     case "INSTANT":
     case "CUT":
@@ -89248,9 +89376,11 @@ function transitionRoots(type, progress2, a, b, stage, params2) {
       const outScale = 1 + (ZOOM_OUT_SCALE - 1) * p2;
       return [root(b, scaledAbout(b.base, inScale, c2.x, c2.y), p2), root(a, scaledAbout(a.base, outScale, c2.x, c2.y), 1 - p2)];
     }
+    default:
+      return [root(a, a.base, 1 - p2), root(b, b.base, p2)];
   }
 }
-var TRANSITION_TYPES, PROTOTYPE_TRANSITION_TYPES, SCENE_TRANSITION_TYPES, isCut, REVERSE, reverseTransitionType, ZOOM_OUT_SCALE, ZOOM_IN_SCALE, WHIP_SMEAR, whipSmear, root, shifted, rootShows;
+var TRANSITION_TYPES, TRANSITION_3D_TYPES, PROTOTYPE_TRANSITION_TYPES, SCENE_TRANSITION_TYPES, isCut, REVERSE, reverseTransitionType, THREE_D, is3DTransition, FLAT, flatTransitionType, AMBIENT_SHADE, rad2, ramp, still, backToFront, ZOOM_OUT_SCALE, ZOOM_IN_SCALE, WHIP_SMEAR, whipSmear, root, shifted, rootShows;
 var init_transitions = __esm({
   "lib/motion/transitions.ts"() {
     "use strict";
@@ -89276,8 +89406,23 @@ var init_transitions = __esm({
       "IRIS",
       "ZOOM_THROUGH",
       "WHIP_LEFT",
-      "WHIP_RIGHT"
+      "WHIP_RIGHT",
+      "CUBE_FROM_LEFT",
+      "CUBE_FROM_RIGHT",
+      "CUBE_FROM_TOP",
+      "CUBE_FROM_BOTTOM",
+      "FLIP_HORIZONTAL",
+      "FLIP_VERTICAL",
+      "SWING_OPEN",
+      "SWING_CLOSE",
+      "STACK_IN",
+      "STACK_OUT",
+      "DEPTH_PUSH",
+      "DEPTH_PULL",
+      "CAROUSEL_FROM_LEFT",
+      "CAROUSEL_FROM_RIGHT"
     ];
+    TRANSITION_3D_TYPES = TRANSITION_TYPES.slice(TRANSITION_TYPES.indexOf("CUBE_FROM_LEFT"));
     PROTOTYPE_TRANSITION_TYPES = TRANSITION_TYPES.filter((t3) => t3 !== "CUT" && t3 !== "WHIP_LEFT" && t3 !== "WHIP_RIGHT");
     SCENE_TRANSITION_TYPES = TRANSITION_TYPES.filter((t3) => t3 !== "SMART_ANIMATE" && t3 !== "INSTANT");
     isCut = (type) => type === "INSTANT" || type === "CUT";
@@ -89293,16 +89438,52 @@ var init_transitions = __esm({
       CIRCLE_WIPE: "IRIS",
       IRIS: "CIRCLE_WIPE",
       WHIP_LEFT: "WHIP_RIGHT",
-      WHIP_RIGHT: "WHIP_LEFT"
+      WHIP_RIGHT: "WHIP_LEFT",
+      CUBE_FROM_LEFT: "CUBE_FROM_RIGHT",
+      CUBE_FROM_RIGHT: "CUBE_FROM_LEFT",
+      CUBE_FROM_TOP: "CUBE_FROM_BOTTOM",
+      CUBE_FROM_BOTTOM: "CUBE_FROM_TOP",
+      SWING_OPEN: "SWING_CLOSE",
+      SWING_CLOSE: "SWING_OPEN",
+      STACK_IN: "STACK_OUT",
+      STACK_OUT: "STACK_IN",
+      DEPTH_PUSH: "DEPTH_PULL",
+      DEPTH_PULL: "DEPTH_PUSH",
+      CAROUSEL_FROM_LEFT: "CAROUSEL_FROM_RIGHT",
+      CAROUSEL_FROM_RIGHT: "CAROUSEL_FROM_LEFT"
     };
     reverseTransitionType = (type) => REVERSE[type] ?? type;
+    THREE_D = new Set(TRANSITION_3D_TYPES);
+    is3DTransition = (type) => THREE_D.has(type);
+    FLAT = {
+      CUBE_FROM_LEFT: "PUSH_FROM_LEFT",
+      CUBE_FROM_RIGHT: "PUSH_FROM_RIGHT",
+      CUBE_FROM_TOP: "PUSH_FROM_TOP",
+      CUBE_FROM_BOTTOM: "PUSH_FROM_BOTTOM",
+      CAROUSEL_FROM_LEFT: "PUSH_FROM_LEFT",
+      CAROUSEL_FROM_RIGHT: "PUSH_FROM_RIGHT",
+      STACK_IN: "SLIDE_FROM_BOTTOM",
+      STACK_OUT: "MOVE_OUT_TO_BOTTOM",
+      FLIP_HORIZONTAL: "DISSOLVE",
+      FLIP_VERTICAL: "DISSOLVE",
+      SWING_OPEN: "DISSOLVE",
+      SWING_CLOSE: "DISSOLVE",
+      DEPTH_PUSH: "DISSOLVE",
+      DEPTH_PULL: "DISSOLVE"
+    };
+    flatTransitionType = (type) => FLAT[type] ?? type;
+    AMBIENT_SHADE = 0.45;
+    rad2 = (deg) => deg * Math.PI / 180;
+    ramp = (x2, e0, e1) => Math.min(1, Math.max(0, (x2 - e0) / (e1 - e0)));
+    still = (side, o = {}) => ({ side, anchorX: 0.5, anchorY: 0.5, tx: 0, ty: 0, z: 0, rotateX: 0, rotateY: 0, opacity: 1, brightness: 1, ...o });
+    backToFront = (faces2) => faces2.map((f2, i2) => [f2, i2]).sort((x2, y) => x2[0].z - y[0].z || x2[1] - y[1]).map(([f2]) => f2);
     ZOOM_OUT_SCALE = 2.5;
     ZOOM_IN_SCALE = 0.85;
     WHIP_SMEAR = 0.22;
     whipSmear = (p2, width) => WHIP_SMEAR * width * 4 * p2 * (1 - p2);
     root = (side, matrix = side.base, opacity = 1) => ({ rootId: side.id, matrix, opacity });
     shifted = (side, dx, dy) => dx || dy ? multiply(translation(dx, dy), side.base) : side.base;
-    rootShows = (r) => r.opacity > 0 && (!r.clip || r.clip.r > 0);
+    rootShows = (r) => (r.opacity > 0 || (r.face?.opacity ?? 0) > 0) && (!r.clip || r.clip.r > 0);
   }
 });
 
@@ -244381,11 +244562,11 @@ function buildStamp2(type) {
       const a = h2(i2, 1, 5) * Math.PI * 2;
       const rr = Math.pow(h2(i2, 2, 9), 0.7) * R * 0.92;
       const px5 = cx + Math.cos(a) * rr, py = cy + Math.sin(a) * rr;
-      const rad2 = 1 + h2(i2, 3, 13) * 5;
+      const rad3 = 1 + h2(i2, 3, 13) * 5;
       const peak = 0.35 + h2(i2, 4, 17) * 0.6;
-      for (let y = Math.max(0, Math.floor(py - rad2)); y <= Math.min(SIZE - 1, Math.ceil(py + rad2)); y++) {
-        for (let x2 = Math.max(0, Math.floor(px5 - rad2)); x2 <= Math.min(SIZE - 1, Math.ceil(px5 + rad2)); x2++) {
-          const d = Math.hypot(x2 + 0.5 - px5, y + 0.5 - py) / rad2;
+      for (let y = Math.max(0, Math.floor(py - rad3)); y <= Math.min(SIZE - 1, Math.ceil(py + rad3)); y++) {
+        for (let x2 = Math.max(0, Math.floor(px5 - rad3)); x2 <= Math.min(SIZE - 1, Math.ceil(px5 + rad3)); x2++) {
+          const d = Math.hypot(x2 + 0.5 - px5, y + 0.5 - py) / rad3;
           if (d >= 1) continue;
           const src = peak * (1 - d);
           const k2 = y * SIZE + x2;
@@ -246320,14 +246501,14 @@ function liveStaggerParent(nodes, ids2) {
   if (!parent || parent.type === "PAGE" || parent.motion?.stagger) return null;
   const set3 = new Set(ids2);
   if (set3.size !== parent.childIds.length || !parent.childIds.every((c2) => set3.has(c2))) return null;
-  const still = (id3) => {
+  const still2 = (id3) => {
     const n = nodes[id3];
     if (!n) return true;
     const m = n.motion;
     if (m && (Object.keys(m.tracks).length || m.timeOffset || m.span || m.stagger)) return false;
-    return (n.childIds ?? []).every(still);
+    return (n.childIds ?? []).every(still2);
   };
-  return ids2.every(still) ? parent.id : null;
+  return ids2.every(still2) ? parent.id : null;
 }
 function staggerDocument(doc2, ids2, opts) {
   const present2 = ids2.filter((id3) => doc2.nodes[id3]);
@@ -247267,11 +247448,11 @@ function editSelected(nodes, sel, change2) {
     for (const [path, ids2] of byPath) {
       const track2 = motion?.tracks[path];
       if (!track2) continue;
-      const moved3 = [], still = [];
+      const moved3 = [], still2 = [];
       let touched = false;
       for (const k2 of track2.keys) {
         if (!ids2.has(k2.id)) {
-          still.push(k2);
+          still2.push(k2);
           continue;
         }
         const next2 = change2(k2, nodeId2, path);
@@ -247289,7 +247470,7 @@ function editSelected(nodes, sel, change2) {
           keys3.push(k2);
         }
       }
-      for (const k2 of still) if (!moved3.some((m) => Math.abs(m.t - k2.t) < 1)) keys3.push(k2);
+      for (const k2 of still2) if (!moved3.some((m) => Math.abs(m.t - k2.t) < 1)) keys3.push(k2);
       keys3.sort((a, b) => a.t - b.t);
       motion = withTrack(motion, path, keys3.length || track2.modifiers?.length ? { ...track2, keys: keys3 } : null);
       changed = true;
@@ -247514,6 +247695,7 @@ function retuneShaderAudio(node2, fillId) {
 }
 var init_shader_audio = __esm({
   "lib/motion/shader-audio.ts"() {
+    "use strict";
     init_shader_params();
     init_modifier_edit();
     init_keys();
@@ -248285,6 +248467,7 @@ function hrefOf(link2, nodes, routes) {
 var anchorOf, cleanAnchor, opensNewTab;
 var init_semantics = __esm({
   "lib/document/semantics.ts"() {
+    "use strict";
     init_safe_url();
     anchorOf = (node2) => node2.semantics?.anchor || `pc-${node2.id.replace(/[^A-Za-z0-9_-]/g, "-")}`;
     cleanAnchor = (raw) => raw.trim().toLowerCase().replace(/^#/, "").replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
@@ -248377,6 +248560,15 @@ function repeatRecords(doc2, repeat, under) {
   const from2 = Math.max(0, repeat.offset ?? 0);
   return list2.slice(from2, repeat.limit !== void 0 ? from2 + Math.max(0, repeat.limit) : void 0);
 }
+function shownRecordOf(nodes, doc2, id3) {
+  for (let at3 = nodes[id3]?.parentId, hops = 0; at3 && hops < 64; at3 = nodes[at3]?.parentId, hops++) {
+    const frame2 = nodes[at3];
+    if (frame2?.repeat) return repeatRecords(doc2, frame2.repeat)[0] ?? null;
+    const of = frame2?.route?.collectionId;
+    if (of && doc2.collections?.[of]) return repeatRecords(doc2, { collectionId: of })[0] ?? null;
+  }
+  return null;
+}
 function recordSlugs(doc2, collectionId) {
   const c2 = doc2.collections?.[collectionId];
   const out = /* @__PURE__ */ new Map();
@@ -248489,9 +248681,10 @@ function removeRecords(doc2, ids2) {
   const collections = Object.fromEntries(Object.entries(doc2.collections ?? {}).map(([id3, c2]) => [id3, c2.order.some((r) => gone.has(r)) ? { ...c2, order: c2.order.filter((r) => !gone.has(r)) } : c2]));
   return { ...doc2, records, collections };
 }
-var COLLECTION_LIMITS, slugify2, dataMemo, withData, ITEM_RECORD, MARK, itemMark, templateRecord, compare, TOKEN2, hasItemToken, layerId, copyRecord, coerce3, newId;
+var COLLECTION_LIMITS, slugify2, dataMemo, withData, ITEM_RECORD, MARK, itemMark, templateRecord, compare, TOKEN2, hasItemToken, layerId, copySuffix, copyRecord, coerce3, newId;
 var init_collections = __esm({
   "lib/document/collections.ts"() {
+    "use strict";
     init_expressions2();
     init_variables();
     init_contract();
@@ -248518,6 +248711,10 @@ var init_collections = __esm({
       const at3 = id3.indexOf("~");
       return at3 < 0 ? id3 : id3.slice(0, at3);
     };
+    copySuffix = (id3) => {
+      const at3 = id3.indexOf("~");
+      return at3 < 0 ? "" : id3.slice(at3);
+    };
     copyRecord = (id3) => {
       const at3 = id3.lastIndexOf("~");
       return at3 < 0 ? null : id3.slice(at3 + 1);
@@ -259499,11 +259696,12 @@ function templateFromDocument(doc2, meta3, o = {}) {
   for (const v of variants) for (const id3 of v.rootIds) nodes[id3] = { ...nodes[id3], parentId: null };
   const deps = collectStyleDependencies(doc2, nodes);
   const payload = {
+    // A record's picture (a project's cover in a CMS collection) is media the file uses, as a layer's is.
     mode: "document",
     nodes,
     variants,
     pages: pages2,
-    media: mediaHashes({ nodes, compositions: doc2.compositions }),
+    media: mediaHashes({ nodes, compositions: doc2.compositions, records: doc2.records }),
     styles: { ...deps.styles, ...doc2.styles },
     variables: { ...deps.variables, ...doc2.variables },
     variableCollections: { ...deps.variableCollections, ...doc2.variableCollections },
@@ -296019,8 +296217,8 @@ async function syncTemplatePreview(row2, rootId, doc2) {
   const path = (file2, q) => `/api/templates/${encodeURIComponent(row2.id)}/preview/${file2}${q ? `?${new URLSearchParams(q)}` : ""}`;
   const put3 = (file2, bytes2, type, q) => api(path(file2, q), { method: "PUT", body: new Blob([bytes2], { type }) });
   let preview = row2.preview;
-  const still = await renderTemplateDetail2(root2, doc2);
-  if (still) ({ preview } = await put3("still", still.bytes, still.type, { w: String(still.width), h: String(still.height) }));
+  const still2 = await renderTemplateDetail2(root2, doc2);
+  if (still2) ({ preview } = await put3("still", still2.bytes, still2.type, { w: String(still2.width), h: String(still2.height) }));
   const loop = await renderTemplatePreview2(renderer, doc2, rootId);
   if (loop) ({ preview } = await put3("anim", loop.bytes, loop.type, { w: String(loop.width), h: String(loop.height), ms: String(loop.durationMs) }));
   else if (preview?.anim) {
@@ -296188,6 +296386,7 @@ async function createFreshFileOrExplain(place3 = {}, seed2 = {}) {
 var online, goesLocal;
 var init_new_file = __esm({
   "lib/client/cloud/new-file.ts"() {
+    "use strict";
     init_scene_graph();
     init_print_pages();
     init_page_presets();
@@ -296942,13 +297141,18 @@ var init_review_kits = __esm({
 
 // lib/templates/text-measurer.ts
 function shownNode(doc2, n) {
-  return resolveNodeVariables(n, doc2.variables, doc2.variableCollections);
+  const r = resolveNodeVariables(n, doc2.variables, doc2.variableCollections);
+  const record2 = doc2.nodes && doc2.records ? shownRecordOf(doc2.nodes, doc2, n.id) : null;
+  const collection = record2 && doc2.collections?.[record2.collectionId];
+  return record2 && collection ? itemNode(r, n, collection, record2, itemScope(collection, record2, withData(variablesScope(doc2.variables, doc2.variableCollections), doc2))) : r;
 }
 var templateTextMeasurer;
 var init_text_measurer = __esm({
   "lib/templates/text-measurer.ts"() {
     "use strict";
     init_variables();
+    init_collections();
+    init_expressions2();
     init_measure();
     templateTextMeasurer = (node2) => {
       const characters = casedText(node2.characters ?? "", node2.textCase);
@@ -302309,6 +302513,9 @@ var init_export = __esm({
 // lib/ai/reference-images.ts
 var reference_images_exports = {};
 __export(reference_images_exports, {
+  FIT_QUALITIES: () => FIT_QUALITIES,
+  FIT_SCALES: () => FIT_SCALES,
+  fitReference: () => fitReference,
   referenceGroups: () => referenceGroups,
   referenceScale: () => referenceScale,
   selectionReferenceImages: () => selectionReferenceImages,
@@ -302331,6 +302538,16 @@ function withinBudget(refs, opts = {}) {
   }
   return kept;
 }
+async function fitReference(encode3, budget) {
+  for (const scale of FIT_SCALES) {
+    for (const quality of scale === 1 ? FIT_QUALITIES : FIT_QUALITIES.slice(-1)) {
+      const url4 = await encode3(scale, quality);
+      if (url4 === null) return null;
+      if (url4.length <= budget) return url4;
+    }
+  }
+  return null;
+}
 function referenceGroups(ids2, max3 = AI_LIMITS.maxReferenceImages) {
   if (!ids2.length) return [];
   return ids2.length <= max3 ? ids2.map((id3) => [id3]) : [[...ids2]];
@@ -302349,22 +302566,30 @@ async function selectionReferenceImages(doc2, selection, opts = {}) {
     const regions = opts.bands?.length ? opts.bands.map((b) => ({ ...whole, minY: whole.minY + b.y, maxY: Math.min(whole.maxY, whole.minY + b.y + b.height) })).filter((b) => b.maxY - b.minY > 1) : [whole];
     for (const bounds2 of regions) {
       if (out.length >= max3) break;
-      const image = await renderer.exportRegion(members2, bounds2, referenceScale(bounds2, opts.maxEdge), doc2, doc2.styles, void 0, true);
-      if (!image) continue;
-      const blob = await encodeImageData(image, opts.format ?? "PNG", 0.86);
-      if (!blob) continue;
-      out.push(await blobToDataUrl(blob));
+      const left = AI_LIMITS.maxReferenceTotalChars - out.reduce((n, u) => n + u.length, 0);
+      const budget = Math.min(AI_LIMITS.maxReferenceImageChars, Math.floor(left / Math.max(1, Math.min(max3, regions.length * referenceGroups(selection, max3).length) - out.length)));
+      const scale = referenceScale(bounds2, opts.maxEdge);
+      const drawn = /* @__PURE__ */ new Map();
+      const url4 = await fitReference(async (k2, quality) => {
+        if (!drawn.has(k2)) drawn.set(k2, await renderer.exportRegion(members2, bounds2, scale * k2, doc2, doc2.styles, void 0, true));
+        const image = drawn.get(k2);
+        const blob = image ? await encodeImageData(image, opts.format ?? "PNG", quality) : null;
+        return blob ? blobToDataUrl(blob) : null;
+      }, budget);
+      if (url4) out.push(url4);
     }
   }
   return withinBudget(out, { max: max3 });
 }
-var blobToDataUrl;
+var FIT_QUALITIES, FIT_SCALES, blobToDataUrl;
 var init_reference_images = __esm({
   "lib/ai/reference-images.ts"() {
     init_export();
     init_selection_bounds();
     init_renderer_registry();
     init_limits();
+    FIT_QUALITIES = [0.86, 0.7, 0.5];
+    FIT_SCALES = [1, 0.75, 0.55, 0.4];
     blobToDataUrl = (blob) => new Promise((resolve6, reject) => {
       const reader = new FileReader();
       reader.onload = () => resolve6(String(reader.result));
@@ -303918,7 +304143,7 @@ function parseTransform(t3) {
   let x2;
   while (x2 = re.exec(t3)) {
     const v = nums(x2[2]);
-    const rad2 = (deg) => deg * Math.PI / 180;
+    const rad3 = (deg) => deg * Math.PI / 180;
     let n = I;
     switch (x2[1].toLowerCase()) {
       case "matrix":
@@ -303931,16 +304156,16 @@ function parseTransform(t3) {
         n = [v[0] ?? 1, 0, 0, v[1] ?? v[0] ?? 1, 0, 0];
         break;
       case "rotate": {
-        const c2 = Math.cos(rad2(v[0] ?? 0)), s = Math.sin(rad2(v[0] ?? 0));
+        const c2 = Math.cos(rad3(v[0] ?? 0)), s = Math.sin(rad3(v[0] ?? 0));
         n = [c2, s, -s, c2, 0, 0];
         if (v.length >= 3) n = mul2(mul2([1, 0, 0, 1, v[1], v[2]], n), [1, 0, 0, 1, -v[1], -v[2]]);
         break;
       }
       case "skewx":
-        n = [1, 0, Math.tan(rad2(v[0] ?? 0)), 1, 0, 0];
+        n = [1, 0, Math.tan(rad3(v[0] ?? 0)), 1, 0, 0];
         break;
       case "skewy":
-        n = [1, Math.tan(rad2(v[0] ?? 0)), 0, 1, 0, 0];
+        n = [1, Math.tan(rad3(v[0] ?? 0)), 0, 1, 0, 0];
         break;
     }
     m = mul2(m, n);
@@ -308659,7 +308884,8 @@ async function exportSlidesToPPTX(renderer, slides, docIn, styles) {
 function transitionXml(t3) {
   if (!t3 || t3.type === "INSTANT") return "";
   const dur = Math.max(1, Math.round(t3.duration));
-  const inner = t3.type === "DISSOLVE" ? "<p:fade/>" : t3.type.startsWith("PUSH") ? `<p:push dir="${t3.type.endsWith("RIGHT") ? "l" : t3.type.endsWith("LEFT") ? "r" : t3.type.endsWith("BOTTOM") ? "u" : "d"}"/>` : t3.type.startsWith("SLIDE") ? `<p:cover dir="${t3.type.endsWith("RIGHT") ? "l" : t3.type.endsWith("LEFT") ? "r" : t3.type.endsWith("BOTTOM") ? "u" : "d"}"/>` : "<p:fade/>";
+  const type = flatTransitionType(t3.type);
+  const inner = type === "DISSOLVE" ? "<p:fade/>" : type.startsWith("PUSH") ? `<p:push dir="${type.endsWith("RIGHT") ? "l" : type.endsWith("LEFT") ? "r" : type.endsWith("BOTTOM") ? "u" : "d"}"/>` : type.startsWith("SLIDE") ? `<p:cover dir="${type.endsWith("RIGHT") ? "l" : type.endsWith("LEFT") ? "r" : type.endsWith("BOTTOM") ? "u" : "d"}"/>` : "<p:fade/>";
   return `<p:transition spd="${dur > 900 ? "slow" : dur > 400 ? "med" : "fast"}">${inner}</p:transition>`;
 }
 var EMU, emu, esc2, hex9, alphaTag, solid3, NS, REL, xfrm, needsPicture, xmlHead, relsXml, themeXml, masterXml, layoutXml, notesMasterXml, notesSlideXml;
@@ -308673,6 +308899,7 @@ var init_pptx = __esm({
     init_native_registry();
     init_png();
     init_export_fills();
+    init_transitions();
     init_page_tokens();
     init_text_styles();
     init_effects();
@@ -308987,10 +309214,10 @@ function emitChannel(ch, grid, scalar = false, stats) {
   const eps = ch.eps ?? 1e-3;
   const fill = filled(ch.samples);
   if (!fill) return staticProp([0], scalar);
-  const still = constantOf({ ...ch, eps: ch.eps ?? 1e-4 });
-  if (still) {
+  const still2 = constantOf({ ...ch, eps: ch.eps ?? 1e-4 });
+  if (still2) {
     if (stats) stats.still++;
-    return staticProp(still, scalar);
+    return staticProp(still2, scalar);
   }
   const present2 = ch.samples.map((s) => !!s);
   if (ch.exact && !ch.hold) {
@@ -310099,7 +310326,7 @@ var init_build = __esm({
         const nodeId2 = node0?.id;
         const geometry = [];
         if (rectLike) {
-          const rad2 = (n) => {
+          const rad3 = (n) => {
             const cr = n?.cornerRadius;
             return Array.isArray(cr) ? num8(cr[0]) : num8(cr);
           };
@@ -310109,7 +310336,7 @@ var init_build = __esm({
             d: 1,
             p: this.prop(frames.map((p2, f2) => p2 ? [ownerNodes[f2].width / 2, ownerNodes[f2].height / 2] : void 0), null, false, 1e-3),
             s: this.prop(frames.map((p2, f2) => p2 ? [ownerNodes[f2].width, ownerNodes[f2].height] : void 0), null, false, 1e-3),
-            r: this.prop(frames.map((p2, f2) => p2 ? [rad2(ownerNodes[f2])] : void 0), this.exact(nodeId2, [this.dim(nodeId2, "cornerRadius")]), true, 1e-3)
+            r: this.prop(frames.map((p2, f2) => p2 ? [rad3(ownerNodes[f2])] : void 0), this.exact(nodeId2, [this.dim(nodeId2, "cornerRadius")]), true, 1e-3)
           });
         } else if (ellipse) {
           geometry.push({
@@ -311579,12 +311806,12 @@ function staticSiteFiles(site, scripts, opts = {}) {
   const lang = opts.lang ?? "en";
   const files = externalizeBitmaps(site);
   const taken = /* @__PURE__ */ new Set();
-  const still = visitorCollections(site.program.document.collections).reduce((s, c2) => withVisitorRecords(s, c2.id, []), site);
-  for (const page of still.pages) {
+  const still2 = visitorCollections(site.program.document.collections).reduce((s, c2) => withVisitorRecords(s, c2.id, []), site);
+  for (const page of still2.pages) {
     const path = page.notFound ? "404.html" : routeFile(page.route);
     if (taken.has(path)) continue;
     taken.add(path);
-    files.push({ path, content: pageHTML(still, page, lang, !!page.notFound) });
+    files.push({ path, content: pageHTML(still2, page, lang, !!page.notFound) });
   }
   files.push({ path: "site.json", content: JSON.stringify(site) });
   files.push({ path: "pc/site.js", content: scripts.site });
@@ -312561,7 +312788,7 @@ var init_package = __esm({
   "packages/runtime/package.json"() {
     package_default = {
       name: "@popcraft/runtime",
-      version: "0.7.1",
+      version: "0.8.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",
@@ -313145,6 +313372,1251 @@ var init_next = __esm({
   }
 });
 
+// lib/document/routes.ts
+function screensOf(doc2, pageId2) {
+  return (doc2.nodes[pageId2]?.childIds ?? []).map((id3) => doc2.nodes[id3]).filter((f2) => f2?.type === "FRAME" && f2.visible !== false && !f2.print?.isMaster);
+}
+function cleanPath(raw) {
+  const parts = raw.trim().split("/").map(slug2).filter(Boolean);
+  return `/${parts.join("/")}`;
+}
+function routesOf(screens) {
+  const taken = /* @__PURE__ */ new Set();
+  const own2 = /* @__PURE__ */ new Map();
+  for (const s of screens) {
+    const path = s.route?.path ? cleanPath(s.route.path) : null;
+    if (path && !taken.has(path)) {
+      taken.add(path);
+      own2.set(s.id, path);
+    }
+  }
+  const rest = screens.filter((s) => !own2.has(s.id) && !s.route?.notFound);
+  const home = taken.has("/") ? void 0 : rest.find((s) => s.isFlowStartingPoint) ?? rest[0];
+  if (home) taken.add("/");
+  const out = /* @__PURE__ */ new Map();
+  for (const s of screens) {
+    if (own2.has(s.id)) {
+      out.set(s.id, own2.get(s.id));
+      continue;
+    }
+    if (s === home) {
+      out.set(s.id, "/");
+      continue;
+    }
+    const base = s.route?.notFound ? "/404" : `/${slug2(s.name) || "page"}`;
+    let route2 = base;
+    for (let n = 2; taken.has(route2); n++) route2 = `${base}-${n}`;
+    taken.add(route2);
+    out.set(s.id, route2);
+  }
+  return out;
+}
+var slug2;
+var init_routes = __esm({
+  "lib/document/routes.ts"() {
+    slug2 = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  }
+});
+
+// lib/island/slice.ts
+function sliceDocument(doc2, nodeId2, opts = {}) {
+  const nodes = {};
+  const take = (id3) => {
+    const n = doc2.nodes[id3];
+    if (!n || nodes[id3]) return;
+    nodes[id3] = n;
+    for (const c2 of n.childIds ?? []) take(c2);
+    const main2 = n.mainComponentId;
+    if (main2) {
+      take(main2);
+      const set3 = doc2.nodes[main2]?.parentId;
+      if (set3 && doc2.nodes[set3]?.type === "COMPONENT_SET") take(set3);
+    }
+  };
+  if (opts.self && doc2.nodes[nodeId2]) nodes[nodeId2] = { ...doc2.nodes[nodeId2], childIds: [] };
+  else take(nodeId2);
+  let frameId = null;
+  let pageId2 = null;
+  let rootId = nodeId2;
+  for (let child = nodeId2, cur = doc2.nodes[nodeId2]?.parentId; cur; child = cur, cur = doc2.nodes[cur]?.parentId ?? null) {
+    const p2 = doc2.nodes[cur];
+    if (!p2) break;
+    if (p2.type === "PAGE") {
+      pageId2 = cur;
+      frameId = doc2.nodes[child]?.type === "FRAME" ? child : frameId;
+    }
+    if (!nodes[cur]) nodes[cur] = p2.type === "PAGE" ? { ...p2, childIds: [child] } : { ...p2, childIds: [child], fills: [], strokes: [], effects: [], shadows: void 0, blurs: void 0, clipsContent: false, layoutMode: "NONE" };
+    if (p2.type !== "PAGE") rootId = cur;
+  }
+  if (!frameId && doc2.nodes[nodeId2]?.type === "FRAME" && doc2.nodes[doc2.nodes[nodeId2].parentId ?? ""]?.type === "PAGE") frameId = nodeId2;
+  return {
+    nodeId: nodeId2,
+    frameId,
+    rootId,
+    ...opts.self ? { fit: "fill" } : {},
+    ...opts.screen ? { screen: true } : {},
+    document: {
+      id: doc2.id,
+      name: doc2.name,
+      pages: pageId2 ? [pageId2] : [],
+      nodes,
+      styles: doc2.styles,
+      variables: doc2.variables,
+      variableCollections: doc2.variableCollections,
+      activeVariableModes: doc2.activeVariableModes,
+      settings: doc2.settings,
+      ...opts.screen ? { ...doc2.site ? { site: doc2.site } : {}, ...doc2.collections ? { collections: doc2.collections, records: doc2.records } : {} } : {}
+    }
+  };
+}
+var init_slice = __esm({
+  "lib/island/slice.ts"() {
+    "use strict";
+    init_breakpoints();
+    init_collections();
+    init_expressions2();
+  }
+});
+
+// lib/runtime/dom/render.ts
+var HIDDEN_ATTR, HIDDEN_RULE, SCREEN_ISLAND;
+var init_render = __esm({
+  "lib/runtime/dom/render.ts"() {
+    "use strict";
+    init_css();
+    init_element();
+    HIDDEN_ATTR = "data-pc-hidden";
+    HIDDEN_RULE = `[${HIDDEN_ATTR}] { display: none !important; }`;
+    SCREEN_ISLAND = "screen:";
+  }
+});
+
+// lib/code/props.ts
+function propName(key5) {
+  const words = key5.split("#")[0].trim().split(/[^A-Za-z0-9]+/).filter(Boolean);
+  const name2 = words.map((w, i2) => i2 === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join("");
+  return /^[A-Za-z_$]/.test(name2) ? name2 : `p${name2}`;
+}
+function componentOf(nodes, node2) {
+  const c2 = node2.type === "COMPONENT" ? node2 : node2.type === "INSTANCE" ? nodes[node2.mainComponentId] : void 0;
+  return c2?.type === "COMPONENT" ? c2 : void 0;
+}
+function codeOf(nodes, node2) {
+  if (node2.type !== "COMPONENT" && node2.type !== "INSTANCE") return null;
+  return componentOf(nodes, node2)?.code ?? null;
+}
+function codeProps(nodes, node2) {
+  const component = componentOf(nodes, node2);
+  const out = {};
+  if (!component) return out;
+  const set3 = component.parentId ? nodes[component.parentId] : void 0;
+  const defs = (set3?.type === "COMPONENT_SET" ? set3.componentPropertyDefinitions : component.componentPropertyDefinitions) ?? {};
+  const given = node2.type === "INSTANCE" ? node2.componentProperties ?? {} : {};
+  for (const key5 of Object.keys(defs).sort()) {
+    const v = value(key5 in given ? given[key5] : defs[key5].defaultValue);
+    if (v !== void 0) out[propName(key5)] = v;
+  }
+  out.width = Math.round(node2.width);
+  out.height = Math.round(node2.height);
+  return out;
+}
+var value;
+var init_props = __esm({
+  "lib/code/props.ts"() {
+    "use strict";
+    init_color();
+    value = (v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : v && typeof v === "object" && "r" in v ? colorToHex8(v) : void 0;
+  }
+});
+
+// lib/document/controls.ts
+function fieldPart(nodes, id3) {
+  const n = nodes[id3];
+  if (!n) return null;
+  if (n.type === "TEXT") return id3;
+  for (const c2 of n.childIds ?? []) {
+    const hit = fieldPart(nodes, c2);
+    if (hit) return hit;
+  }
+  return null;
+}
+var cleanName2;
+var init_controls = __esm({
+  "lib/document/controls.ts"() {
+    cleanName2 = (raw) => raw.trim().replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  }
+});
+
+// lib/io/web/expressible.ts
+function expressibility(node2, styles) {
+  const c2 = capability(node2, "css", styles);
+  return { css: c2.reason === "", reason: c2.reason, needsRaster: c2.verdict === "raster" };
+}
+var init_expressible = __esm({
+  "lib/io/web/expressible.ts"() {
+    "use strict";
+    init_capability();
+  }
+});
+
+// lib/io/web/responsive.ts
+function containerStyle(f2) {
+  const out = {};
+  if (isStack(f2) && f2.layoutWrap === "WRAP") {
+    out["flex-wrap"] = "wrap";
+    const cross2 = f2.counterAxisSpacing ?? f2.itemSpacing ?? 0;
+    const main2 = f2.itemSpacing ?? 0;
+    if (cross2 !== main2) out.gap = f2.layoutMode === "HORIZONTAL" ? `${cross2}px ${main2}px` : `${main2}px ${cross2}px`;
+    out["align-content"] = "flex-start";
+  }
+  if (isGrid(f2)) {
+    out.display = "grid";
+    const cols = f2.layoutGridColumns ?? "AUTO";
+    out["grid-template-columns"] = cols === "AUTO" ? `repeat(auto-fill, minmax(${f2.layoutGridMinColumnWidth ?? 100}px, 1fr))` : Array.from({ length: Math.max(1, cols) }, (_, i2) => track(f2.layoutGridColumnSizes?.[i2])).join(" ");
+    const rows = f2.layoutGridRows ?? "AUTO";
+    if (rows === "AUTO") out["grid-auto-rows"] = `minmax(${f2.layoutGridMinRowHeight ?? 100}px, auto)`;
+    else out["grid-template-rows"] = Array.from({ length: Math.max(1, rows) }, (_, i2) => track(f2.layoutGridRowSizes?.[i2])).join(" ");
+    const colGap = f2.itemSpacing ?? 0, rowGap = f2.counterAxisSpacing ?? colGap;
+    out.gap = rowGap === colGap ? `${colGap}px` : `${rowGap}px ${colGap}px`;
+    if (f2.padding) {
+      out.padding = `${f2.padding.top}px ${f2.padding.right}px ${f2.padding.bottom}px ${f2.padding.left}px`;
+      if (f2.padding.top || f2.padding.right || f2.padding.bottom || f2.padding.left) out["box-sizing"] = "border-box";
+    }
+  }
+  const scroll = f2.overflowScrolling;
+  if (scroll && scroll !== "NONE") {
+    out["overflow-x"] = scroll === "HORIZONTAL" || scroll === "BOTH" ? "auto" : "hidden";
+    out["overflow-y"] = scroll === "VERTICAL" || scroll === "BOTH" ? "auto" : "hidden";
+  }
+  return out;
+}
+function flowChild(node2, parent) {
+  const style = { ...limits(node2) };
+  const h = node2.layoutSizingHorizontal ?? "FIXED", v = node2.layoutSizingVertical ?? "FIXED";
+  if (isGrid(parent)) {
+    if (h !== "FIXED") style.width = h === "FILL" ? null : "fit-content";
+    if (v !== "FIXED") style.height = null;
+    return { style };
+  }
+  if (h === "FIXED" && style["max-width"] === void 0) style["max-width"] = "100%";
+  const row2 = parent.layoutMode === "HORIZONTAL";
+  const main2 = row2 ? h : v, cross2 = row2 ? v : h;
+  const mainProp = row2 ? "width" : "height", crossProp = row2 ? "height" : "width";
+  if (main2 === "FILL") {
+    style[mainProp] = null;
+    style.flex = "1 1 0";
+    if (style[`min-${mainProp}`] === void 0) style[`min-${mainProp}`] = "0";
+  } else {
+    if (main2 === "HUG") style[mainProp] = null;
+    style["flex-shrink"] = "0";
+  }
+  if (cross2 === "FILL") {
+    style[crossProp] = null;
+    style["align-self"] = "stretch";
+  } else {
+    if (cross2 === "HUG") style[crossProp] = null;
+    if ((parent.counterAxisAlignItems ?? "MIN") === "MIN") style["align-self"] = "flex-start";
+  }
+  return { style };
+}
+function constrained(kind, pos, size6, parentSize, start2, end, sizeProp) {
+  const far = parentSize - pos - size6;
+  switch (kind) {
+    case "MAX":
+      return { place: { [end]: px4(far) }, style: {} };
+    case "STRETCH":
+      return { place: { [start2]: px4(pos), [end]: px4(far) }, style: { [sizeProp]: null } };
+    // Its centre keeps its distance from the parent's centre.
+    case "CENTER":
+      return { place: { [start2]: `calc(50% + ${px4(pos - parentSize / 2)})` }, style: {} };
+    case "SCALE":
+      return parentSize > 0 ? { place: { [start2]: pct2(pos / parentSize) }, style: { [sizeProp]: pct2(size6 / parentSize) } } : { place: { [start2]: px4(pos) }, style: {} };
+    default:
+      return { place: { [start2]: px4(pos) }, style: {} };
+  }
+}
+function placedChild(node2, parent, frame2 = parent) {
+  const c2 = node2.constraints ?? { horizontal: "MIN", vertical: "MIN" };
+  const x2 = constrained(c2.horizontal, node2.x, node2.width, frame2.width, "left", "right", "width");
+  const y = constrained(c2.vertical, node2.y, node2.height, frame2.height, "top", "bottom", "height");
+  return { style: { ...limits(node2), ...x2.style, ...y.style }, place: { position: "absolute", ...x2.place, ...y.place } };
+}
+function siteLayout(node2, parent, layout2) {
+  const own2 = node2.type === "FRAME" || node2.type === "COMPONENT" || node2.type === "INSTANCE" ? node2 : null;
+  if (!parent) {
+    const grows = !own2 || laysOut(own2) || own2.overflowScrolling === "NONE" || !own2.overflowScrolling;
+    return { style: { ...limits(node2), width: "100%", ...grows ? { height: null, "min-height": `max(${px4(node2.height)}, 100dvh)` } : {} }, place: { position: "relative" } };
+  }
+  const s = node2;
+  return layout2 && laysOut(layout2) && s.layoutPositioning !== "ABSOLUTE" ? flowChild(s, layout2) : placedChild(s, parent, parent.type === "INSTANCE" && layout2 ? layout2 : parent);
+}
+var px4, pct2, isStack, isGrid, laysOut, track, limits;
+var init_responsive = __esm({
+  "lib/io/web/responsive.ts"() {
+    "use strict";
+    px4 = (v) => `${Math.round(v * 100) / 100}px`;
+    pct2 = (v) => `${Math.round(v * 1e4) / 100}%`;
+    isStack = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
+    isGrid = (f2) => f2?.layoutMode === "GRID";
+    laysOut = (f2) => isStack(f2) || isGrid(f2);
+    track = (t3) => {
+      if (!t3 || t3.sizing === "FILL") return t3?.value && /fr$/.test(t3.value) ? t3.value : "1fr";
+      if (t3.sizing === "HUG") return "auto";
+      return /^[\d.]+$/.test(t3.value) ? `${t3.value}px` : t3.value;
+    };
+    limits = (n) => {
+      const out = {};
+      if (n.minWidth !== void 0) out["min-width"] = px4(n.minWidth);
+      if (n.maxWidth !== void 0) out["max-width"] = px4(n.maxWidth);
+      if (n.minHeight !== void 0) out["min-height"] = px4(n.minHeight);
+      if (n.maxHeight !== void 0) out["max-height"] = px4(n.maxHeight);
+      return out;
+    };
+  }
+});
+
+// lib/io/web/richtext.ts
+function runStyle(seg) {
+  const out = {};
+  if (seg.fontFamily) out["font-family"] = `"${seg.fontFamily}", system-ui, sans-serif`;
+  if (seg.fontSize) out["font-size"] = `${seg.fontSize}px`;
+  if (seg.fontWeight) out["font-weight"] = String(seg.fontWeight);
+  if (seg.fontStyle) out["font-style"] = seg.fontStyle;
+  if (seg.lineHeight !== void 0 && seg.lineHeight !== "AUTO") out["line-height"] = `${seg.lineHeight}px`;
+  if (seg.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
+  else if (seg.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
+  else if (seg.textDecoration === "NONE") out["text-decoration"] = "none";
+  if (seg.textCase === "UPPER") out["text-transform"] = "uppercase";
+  else if (seg.textCase === "LOWER") out["text-transform"] = "lowercase";
+  else if (seg.textCase === "TITLE") out["text-transform"] = "capitalize";
+  else if (seg.textCase === "ORIGINAL") out["text-transform"] = "none";
+  const solid4 = seg.fills?.find((f2) => f2.visible !== false && f2.type === "SOLID" && f2.color);
+  if (solid4?.color) out.color = toHex(solid4.color);
+  return out;
+}
+function textRuns(t3) {
+  const text = t3.characters ?? "";
+  const segs = [...t3.styledSegments ?? []].filter((s) => s.end > s.start).sort((a, b) => a.start - b.start);
+  if (!segs.length && !t3.link) return void 0;
+  const runs = [];
+  const push2 = (from2, to, seg) => {
+    if (to <= from2) return;
+    const link2 = seg?.link ?? t3.link;
+    runs.push({ text: text.slice(from2, to), style: seg ? runStyle(seg) : {}, ...link2 ? { link: link2 } : {} });
+  };
+  let at3 = 0;
+  for (const s of segs) {
+    const start2 = Math.max(at3, Math.min(text.length, s.start)), end = Math.min(text.length, s.end);
+    push2(at3, start2);
+    push2(start2, end, s);
+    at3 = Math.max(at3, end);
+  }
+  push2(at3, text.length);
+  return runs;
+}
+var init_richtext = __esm({
+  "lib/io/web/richtext.ts"() {
+    "use strict";
+    init_paint2();
+  }
+});
+
+// lib/io/web/timeline.ts
+function frameWebMotion(doc2, frameId, style) {
+  const nodes = doc2.nodes;
+  const frame2 = nodes[frameId];
+  if (!frame2 || !hasFrameMotion(nodes, frameId)) return null;
+  const len3 = timelineDuration(nodes, frameId);
+  if (!(len3 > 0)) return null;
+  const steps = Math.max(1, Math.ceil(len3 / 1e3 * SAMPLE_RATE));
+  const times2 = [];
+  const poses = [];
+  for (let i2 = 0; i2 <= steps; i2++) {
+    const t3 = len3 * i2 / steps;
+    times2.push(t3);
+    poses.push(evaluatePose(nodes, { kind: "frame", frameId }, t3).nodes);
+  }
+  const ids2 = /* @__PURE__ */ new Set();
+  for (const p2 of poses) for (const id3 in p2) if (id3 !== frameId && p2[id3] !== nodes[id3]) ids2.add(id3);
+  const loops = frameRunsOn(nodes, frameId);
+  const out = /* @__PURE__ */ new Map();
+  const tag = frameId.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
+  let n = 0;
+  for (const id3 of ids2) {
+    const rest = id3.includes("::") ? resolveVirtualNode2(nodes, id3) : nodes[id3];
+    if (!rest || !underFrame(nodes, id3, frameId)) continue;
+    const frames = keyframesOf(times2, poses.map((p2) => declarationsOf(p2[id3] ?? rest, rest, style)), len3);
+    if (!frames) continue;
+    out.set(id3, {
+      name: `timeline-${tag}-${n++}`,
+      frames,
+      durationMs: Math.round(len3),
+      delayMs: 0,
+      iterations: loops ? "infinite" : 1,
+      direction: "normal",
+      fill: "both"
+    });
+  }
+  return out.size ? out : null;
+}
+function underFrame(nodes, id3, frameId) {
+  const real = id3.split("::")[0];
+  for (let n = nodes[real]; n; n = n.parentId ? nodes[n.parentId] : void 0) if (n.id === frameId) return true;
+  return false;
+}
+var init_timeline = __esm({
+  "lib/io/web/timeline.ts"() {
+    "use strict";
+    init_scene_graph();
+    init_pose();
+    init_instances2();
+    init_keyframes();
+  }
+});
+
+// lib/io/web/tree.ts
+function anchorTargets(doc2) {
+  const hit = anchorMemo.get(doc2.nodes);
+  if (hit) return hit;
+  const out = /* @__PURE__ */ new Set();
+  for (const id3 in doc2.nodes) {
+    const n = doc2.nodes[id3];
+    if (n.semantics?.link?.kind === "anchor") out.add(n.semantics.link.nodeId);
+    for (const ix of n.interactions ?? []) if (ix.action.link?.kind === "anchor" && ix.action.link.nodeId) out.add(ix.action.link.nodeId);
+  }
+  anchorMemo.set(doc2.nodes, out);
+  return out;
+}
+function prepared(node2, doc2) {
+  let n = node2;
+  if (n.id.includes("::")) n = withInstanceBox(n, doc2.nodes);
+  n = resolveNodeVariables(n, doc2.variables, doc2.variableCollections, doc2.activeVariableModes, exprData(doc2));
+  n = resolveTextNodeStyles(n, doc2.styles ?? {});
+  return n;
+}
+function layoutOf2(node2, nodes) {
+  if (!node2) return null;
+  if (node2.type === "INSTANCE") {
+    const mainId = node2.mainComponentId;
+    const main2 = mainId ? nodes[mainId] : void 0;
+    return main2 ?? null;
+  }
+  if (node2.id.includes("::")) {
+    const real = nodes[node2.id.split("::").pop()];
+    return real ?? node2;
+  }
+  return node2;
+}
+function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
+  const cap2 = opts.nodeCap ?? DEFAULT_NODE_CAP;
+  const first2 = doc2.nodes[nodeId2] ?? (nodeId2.includes("::") ? childLookup(doc2, nodeId2) : void 0);
+  if (!first2) throw new Error(`No node ${nodeId2}`);
+  let emitted = 0;
+  let truncated = false;
+  let folds = 0;
+  const tokens = opts.target === "site" && Object.keys(doc2.variables ?? {}).length ? siteTokens(doc2) : null;
+  const anchored = anchorTargets(doc2);
+  const pageItem = () => {
+    const c2 = opts.item && doc2.collections?.[opts.item.collectionId];
+    const r = opts.item && doc2.records?.[opts.item.recordId];
+    return c2 && r ? { collection: c2, record: r, suffix: "" } : null;
+  };
+  let item = pageItem();
+  const scopeOf2 = (it) => itemScope(it.collection, it.record, withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2));
+  const itemised = (node2, raw, it) => itemNode(node2, raw, it.collection, it.record, scopeOf2(it));
+  const itemLink = (link2, it) => {
+    const filled2 = it && link2.kind === "url" ? { ...link2, url: itemText(link2.url, it.collection, it.record) } : it && (link2.kind === "email" || link2.kind === "tel") ? { ...link2, value: itemText(link2.value, it.collection, it.record) } : link2;
+    if (filled2.kind === "screen") {
+      const dest = doc2.nodes[filled2.frameId];
+      const base = opts.routes?.[filled2.frameId];
+      const of = dest?.route?.collectionId;
+      if (of && base !== void 0) {
+        const slugs = recordSlugs(doc2, of);
+        const rec = it?.collection.id === of ? it.record.id : slugs.keys().next().value;
+        const slug3 = rec ? slugs.get(rec) : void 0;
+        return slug3 ? { link: filled2, href: `${base === "/" ? "" : base}/${slug3}`, screen: `${filled2.frameId}~${rec}` } : { link: filled2, href: null };
+      }
+      return { link: filled2, href: base ?? null, screen: filled2.frameId };
+    }
+    return { link: filled2, href: hrefOf(filled2, doc2.nodes, opts.routes) };
+  };
+  const fields = /* @__PURE__ */ new Map();
+  const styleOpts = { fullImageUrl: opts.fullImageUrls ?? opts.target === "site" };
+  const stylesOf = (n) => styleMapFor(n, doc2.styles, styleOpts);
+  let motion = null;
+  const timeline = !opts.static && !start2 && first2.type === "FRAME" ? frameWebMotion(doc2, first2.id, (n) => stylesOf(prepared(n, doc2))) : null;
+  const build3 = (raw, parent, in3D2, fold) => {
+    if (emitted >= cap2) {
+      truncated = true;
+      return null;
+    }
+    emitted++;
+    const node2 = item ? itemised(prepared(raw, doc2), raw, item) : prepared(raw, doc2);
+    const waits = node2.visible === false && parent !== null;
+    if (waits && !(opts.target === "site" && followsVisibility(raw))) return null;
+    const exp = expressibility(node2, doc2.styles);
+    const f2 = layoutOf2(node2, doc2.nodes) ?? node2;
+    const style = stylesOf(node2);
+    if (f2 !== node2 && !style.display) Object.assign(style, flexDeclarations(f2));
+    const through = in3D2 && passesThrough(raw, doc2.nodes);
+    const own2 = typeof node2.opacity === "number" ? node2.opacity : 1;
+    if (through) {
+      style["transform-style"] = "preserve-3d";
+      delete style.opacity;
+      style[foldVar(fold + 1)] = fold ? `calc(var(${foldVar(fold)}) * ${round3(own2)})` : String(round3(own2));
+      folds = Math.max(folds, fold + 1);
+    } else if (fold) style.opacity = own2 === 1 ? `var(${foldVar(fold)})` : `calc(var(${foldVar(fold)}) * ${round3(own2)})`;
+    if (own2 === 0) style["pointer-events"] = "none";
+    if (clickable(raw) && !style.cursor) style.cursor = "pointer";
+    const web = {
+      id: item?.suffix ? `${node2.id}${item.suffix}` : node2.id,
+      name: node2.name || node2.type,
+      type: node2.type,
+      x: Math.round(node2.x),
+      y: Math.round(node2.y),
+      width: Math.round(node2.width),
+      height: Math.round(node2.height),
+      // Absolutely-positioned auto-layout children are taken out of the flow, exactly as the canvas does.
+      // A grid's children are in its flow too: its tracks place them.
+      positioning: (isFlex(layoutOf2(parent, doc2.nodes)) || layoutOf2(parent, doc2.nodes)?.layoutMode === "GRID") && node2.layoutPositioning !== "ABSOLUTE" ? "flow" : "absolute",
+      style,
+      children: []
+    };
+    if (tokens) Object.assign(style, tokenStyle(raw, style, tokens));
+    if (opts.target === "site") {
+      const lay = siteLayout(node2, parent, layoutOf2(parent, doc2.nodes));
+      for (const [k2, v] of Object.entries(lay.style)) {
+        if (v === null) delete style[k2];
+        else style[k2] = v;
+      }
+      if (laysOut(f2) || f2.overflowScrolling) Object.assign(style, containerStyle(f2));
+      if (node2.type === "TEXT") {
+        if (style["white-space"] === "pre") {
+          style["white-space"] = "pre-wrap";
+          style.width = "fit-content";
+        }
+        if (style["max-width"] === void 0) style["max-width"] = "100%";
+        if (style.height && style.height !== "auto") {
+          style["min-height"] = style.height;
+          delete style.height;
+        }
+      }
+      if (lay.place && (parent !== null || !start2?.parent)) web.place = lay.place;
+    }
+    if (waits) web.hidden = true;
+    const sem = node2.semantics;
+    if (sem) {
+      if (sem.tag && sem.tag !== "div") web.tag = sem.tag;
+      const attrs = {};
+      if (sem.label) attrs["aria-label"] = sem.label;
+      if (sem.hidden) attrs["aria-hidden"] = "true";
+      if (Object.keys(attrs).length) web.attrs = attrs;
+      const to = sem.link ? itemLink(sem.link, item) : null;
+      if (to?.href) web.link = { href: to.href, ...opensNewTab(to.link) ? { newTab: true } : {}, ...to.screen ? { screen: to.screen } : {} };
+    }
+    const control = node2.control;
+    if (control) {
+      const named = control.name ? { name: control.name } : {};
+      if (control.kind === "FORM") web.tag = "form";
+      else if (control.kind === "BUTTON") {
+        web.tag = "button";
+        web.attrs = { ...web.attrs, type: control.buttonType ?? "submit", ...named, ...control.name && control.value !== void 0 ? { value: item && hasItemToken(control.value) ? itemText(control.value, item.collection, item.record) : control.value } : {} };
+      } else if (control.kind === "CHECKBOX" || control.kind === "RADIO") {
+        web.check = { attrs: { type: control.kind === "RADIO" ? "radio" : "checkbox", ...named, ...control.value !== void 0 ? { value: control.value } : {}, ...control.checked ? { checked: "" } : {}, ...control.required ? { required: "" } : {} }, ...control.variableId ? { variable: control.variableId } : {} };
+      } else fields.set(fieldPart(doc2.nodes, raw.id) ?? raw.id, control);
+    }
+    const control0 = fields.get(raw.id);
+    const field = control0 && item && control0.value !== void 0 && hasItemToken(control0.value) ? { ...control0, value: itemText(control0.value, item.collection, item.record) } : control0;
+    if (field) {
+      const tag = field.kind === "TEXTAREA" ? "textarea" : field.kind === "SELECT" ? "select" : "input";
+      const words = node2.characters;
+      web.input = {
+        tag,
+        attrs: {
+          ...tag === "input" ? { type: field.inputType ?? "text" } : {},
+          ...field.name ? { name: field.name } : {},
+          ...tag !== "select" && (field.placeholder ?? words) ? { placeholder: field.placeholder ?? words } : {},
+          ...field.required ? { required: "" } : {},
+          ...tag === "input" && field.value !== void 0 ? { value: field.value } : {},
+          "aria-label": node2.semantics?.label ?? field.placeholder ?? field.name ?? web.name
+        },
+        ...tag === "select" ? { options: field.options ?? [] } : {},
+        ...tag !== "input" && field.value !== void 0 ? { value: field.value } : {},
+        ...field.variableId ? { variable: field.variableId } : {}
+      };
+    }
+    if (sem?.anchor || anchored.has(node2.id)) web.attrs = { ...web.attrs, id: anchorOf(node2) };
+    if (through) web.preserve3d = true;
+    web.tf = transformParts(node2);
+    if (typeof node2.altText === "string") web.alt = node2.altText;
+    if (parent === null) web.positioning = start2?.parent ? web.positioning : "flow";
+    if (f2.layoutMode === "HORIZONTAL" || f2.layoutMode === "VERTICAL") {
+      web.layout = {
+        direction: f2.layoutMode === "HORIZONTAL" ? "row" : "column",
+        gap: f2.itemSpacing ?? 0,
+        justify: JUSTIFY[f2.primaryAxisAlignItems ?? "MIN"],
+        align: ALIGN2[f2.counterAxisAlignItems ?? "MIN"],
+        padding: f2.padding ?? { top: 0, right: 0, bottom: 0, left: 0 }
+      };
+    }
+    if (node2.type === "TEXT") {
+      const t3 = node2;
+      const solid4 = (t3.fills ?? []).find((p2) => p2.visible !== false && p2.type === "SOLID" && p2.color);
+      web.text = {
+        characters: t3.characters ?? "",
+        align: t3.textAlign,
+        fontFamily: t3.fontFamily,
+        fontSize: t3.fontSize,
+        fontWeight: t3.fontWeight,
+        italic: t3.fontStyle === "italic",
+        ...solid4?.color ? { color: toHex(solid4.color) } : {},
+        ...t3.letterSpacing ? { letterSpacing: t3.letterSpacing } : {},
+        ...t3.lineHeight !== "AUTO" ? { lineHeight: t3.lineHeight } : {}
+      };
+      const runs = textRuns(t3);
+      if (runs) web.runs = runs;
+    }
+    const tl = timeline?.get(node2.id);
+    const mo = tl ?? motion?.children.get(node2.id);
+    if (mo) web.motion = { style: animationStyle(mo, tl ? "load" : motion.trigger), keyframes: keyframesCSS(mo) };
+    const ext = getNativeExtension(raw.type);
+    if (ext?.toWeb) {
+      const said = ext.toWeb(node2, { escape: escapeHTML, color: (c2) => toRgba({ ...c2, a: c2.a ?? 1 }) });
+      if (said.tag) web.tag = said.tag;
+      Object.assign(style, said.style);
+      web.html = said.html;
+      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+      return web;
+    }
+    const code = opts.target === "site" ? codeOf(doc2.nodes, raw) : null;
+    if (code && doc2.codeModules?.[code.moduleId]) {
+      for (const k2 of PAINTED) delete style[k2];
+      web.code = { module: code.moduleId, ...code.exportName ? { export: code.exportName } : {}, props: codeProps(doc2.nodes, node2) };
+      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+      return web;
+    }
+    if (!exp.css) {
+      for (const k2 of PAINTED) delete style[k2];
+      web.asset = { kind: opts.assetKind ?? (exp.needsRaster ? "png" : "svg"), reason: exp.reason, ...item?.suffix ? { of: node2.id } : {} };
+      if (opts.target === "site" && renderMode(node2, { styles: doc2.styles, live: isLive(doc2.nodes, raw.id) }) === "island") web.island = true;
+      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+      return web;
+    }
+    const lost = capability(node2, "css", doc2.styles).dropped.find((f3) => f3.startsWith("paint:"));
+    if (lost && !node2.id.includes("::")) {
+      const site = opts.target === "site";
+      style.isolation = "isolate";
+      web.children.push({
+        id: `${node2.id}/backdrop${item?.suffix ?? ""}`,
+        name: `${web.name} fill`,
+        type: "BACKDROP",
+        x: 0,
+        y: 0,
+        width: web.width,
+        height: web.height,
+        positioning: "absolute",
+        ...site ? { place: { position: "absolute", inset: "0" } } : {},
+        style: { ...site ? {} : { width: `${web.width}px`, height: `${web.height}px` }, "border-radius": "inherit", overflow: "hidden", "z-index": "-1", "pointer-events": "none" },
+        alt: "",
+        asset: { kind: "png", reason: featureName(lost), of: node2.id, self: true },
+        ...site && movesItself(raw) ? { island: true } : {},
+        children: []
+      });
+    }
+    const outer = motion;
+    if (!motion && node2.type === "INSTANCE" && !opts.static) {
+      motion = instanceWebMotion(doc2, node2, (n) => stylesOf(prepared(n, doc2)));
+      if (motion && (motion.trigger !== "load" || opts.target === "site")) web.motionTrigger = motion.trigger;
+    }
+    try {
+      if (opts.includeChildren !== false) {
+        const kids3D = in3D2 ? through : is3DContext(raw) && !raw.id.includes("::");
+        const kidFold = through ? fold + 1 : 0;
+        const repeat = raw.repeat;
+        const collection = repeat && doc2.collections?.[repeat.collectionId];
+        if (repeat && collection && opts.target === "site") {
+          const outerItem = item;
+          const under = outerItem ? scopeOf2(outerItem) : withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2);
+          try {
+            for (const record2 of repeatRecords(doc2, repeat, under)) {
+              item = { collection, record: record2, suffix: `${outerItem?.suffix ?? ""}~${record2.id}` };
+              for (const child of childrenOf(node2, doc2.nodes)) {
+                const built = build3(child, node2, kids3D, kidFold);
+                if (built) web.children.push(built);
+              }
+            }
+            if (collection.perVisitor && !outerItem) {
+              item = { collection, record: templateRecord(collection), suffix: `~${ITEM_RECORD}` };
+              const template2 = [];
+              for (const child of childrenOf(node2, doc2.nodes)) {
+                const built = build3(child, node2, kids3D, kidFold);
+                if (built) template2.push(built);
+              }
+              const sortField = repeat.sort && collection.fields.find((f3) => f3.id === repeat.sort.fieldId);
+              web.repeat = {
+                collectionId: collection.id,
+                template: template2,
+                ...repeat.filter?.trim() ? { filter: repeat.filter } : {},
+                ...sortField ? { sort: { key: fieldKey(sortField.name), dir: repeat.sort.dir } } : {},
+                ...repeat.offset ? { offset: repeat.offset } : {},
+                ...repeat.limit ? { limit: repeat.limit } : {}
+              };
+            }
+          } finally {
+            item = outerItem;
+          }
+        } else for (const child of childrenOf(node2, doc2.nodes)) {
+          const built = build3(child, node2, kids3D, kidFold);
+          if (built) web.children.push(built);
+        }
+      }
+    } finally {
+      motion = outer;
+    }
+    if (web.children.some((c2) => c2.positioning === "absolute")) {
+      for (const c2 of web.children) if (c2.positioning === "flow") c2.layered = true;
+    }
+    hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
+    return web;
+  };
+  const root2 = build3(first2, start2?.parent ?? null, start2?.in3D ?? false, start2?.fold ?? 0);
+  if (!root2) throw new Error("Node cap of 0");
+  return { root: root2, truncated, ...folds ? { rules: foldRules(folds) } : {}, ...tokens?.vars.length ? { tokens } : {} };
+}
+function childLookup(doc2, id3) {
+  const at3 = id3.lastIndexOf("::");
+  const host = at3 > 0 ? id3.slice(0, at3) : "";
+  const hostNode = doc2.nodes[host] ?? (host.includes("::") ? childLookup(doc2, host) : void 0);
+  return hostNode ? childrenOf(hostNode, doc2.nodes).find((c2) => c2.id === id3) : void 0;
+}
+function flatten2(node2, out = []) {
+  out.push(node2);
+  for (const c2 of node2.children) flatten2(c2, out);
+  return out;
+}
+var DEFAULT_NODE_CAP, PAINTED, anchorMemo, followsVisibility, isFlex, round3, foldVar, foldRules, clickable;
+var init_tree = __esm({
+  "lib/io/web/tree.ts"() {
+    "use strict";
+    init_instance_layout();
+    init_text_styles();
+    init_variables();
+    init_scene3d();
+    init_semantics();
+    init_collections();
+    init_props();
+    init_native_registry();
+    init_controls();
+    init_expressions2();
+    init_children();
+    init_css();
+    init_capability();
+    init_expressible();
+    init_motion();
+    init_element();
+    init_paint2();
+    init_responsive();
+    init_richtext();
+    init_tokens2();
+    init_timeline();
+    init_interactive();
+    DEFAULT_NODE_CAP = 120;
+    PAINTED = ["background", "border", "border-style", "border-color", "border-width", "outline", "border-radius", "box-shadow", "box-sizing", "filter", "backdrop-filter"];
+    anchorMemo = /* @__PURE__ */ new WeakMap();
+    followsVisibility = (n) => !!n.boundVariables?.visible || !!n.boundExpressions?.visible || // Hidden in the design and shown at a breakpoint: on the page, for the media query that shows it.
+    Object.values(n.responsive ?? {}).some((o) => o.visible === true);
+    isFlex = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
+    round3 = (v) => Math.round(v * 1e3) / 1e3;
+    foldVar = (depth2) => `--pc-f${depth2}`;
+    foldRules = (depth2) => Array.from({ length: depth2 }, (_, i2) => `@property ${foldVar(i2 + 1)} { syntax: '<number>'; inherits: true; initial-value: 1; }`);
+    clickable = (n) => !!n.semantics?.link || (n.interactions ?? []).some((ix) => ix.trigger === "ON_CLICK" || ix.trigger === "ON_PRESS");
+  }
+});
+
+// lib/io/web/interactive.ts
+function subtreeIds(doc2, id3, out = /* @__PURE__ */ new Set()) {
+  if (out.has(id3)) return out;
+  const n = doc2.nodes[id3];
+  if (!n) return out;
+  out.add(id3);
+  if (n.type === "INSTANCE") subtreeIds(doc2, n.mainComponentId, out);
+  for (const c2 of n.childIds ?? []) subtreeIds(doc2, c2, out);
+  return out;
+}
+function flowScreens(doc2, startId) {
+  const start2 = doc2.nodes[startId];
+  if (!start2 || start2.type !== "FRAME" || doc2.nodes[start2.parentId ?? ""]?.type !== "PAGE") return [startId];
+  const out = [startId];
+  for (let i2 = 0; i2 < out.length; i2++) {
+    for (const id3 of subtreeIds(doc2, out[i2])) {
+      for (const ix of interactionsOf(doc2.nodes[id3])) {
+        const to = ix.action.navigationType === "NAVIGATE" ? ix.action.destinationId : null;
+        const dest = to ? doc2.nodes[to] : void 0;
+        if (!dest || out.includes(dest.id) || dest.type !== "FRAME" || doc2.nodes[dest.parentId ?? ""]?.type !== "PAGE") continue;
+        if (Math.round(dest.width) !== Math.round(start2.width) || Math.round(dest.height) !== Math.round(start2.height)) continue;
+        out.push(dest.id);
+      }
+    }
+  }
+  return out;
+}
+function variantStates(doc2, mainId) {
+  const out = [mainId];
+  for (let i2 = 0; i2 < out.length; i2++) {
+    for (const id3 of subtreeIds(doc2, out[i2])) {
+      for (const ix of interactionsOf(doc2.nodes[id3])) {
+        const to = ix.action.navigationType === "CHANGE_TO" ? ix.action.destinationId : null;
+        if (to && !out.includes(to) && doc2.nodes[to]?.type === "COMPONENT") out.push(to);
+      }
+    }
+  }
+  return out;
+}
+function buildState(ctx2, doc2, id3, machine, state, start2, variantOf2) {
+  const expand = /* @__PURE__ */ new Map();
+  const tree = buildPlainTree(doc2, id3, ctx2.opts, start2, { built: (web, _node, at3) => {
+    if (web.type === "INSTANCE") expand.set(web, at3);
+  } });
+  for (const r of tree.rules ?? []) ctx2.rules.add(r);
+  if (tree.truncated) ctx2.truncated = true;
+  const ids2 = /* @__PURE__ */ new Map();
+  const index2 = (w) => {
+    ids2.set(w.id, w);
+    w.children.forEach(index2);
+  };
+  index2(tree.root);
+  const visit2 = (w, owner, st, isRoot) => {
+    w.owner = owner;
+    w.looks = { [st]: lookOf(w, isRoot) };
+    if (w.motion) ctx2.keyframes.add(w.motion.keyframes);
+    const node2 = nodeOf(doc2, w.id);
+    note(ctx2, w, interactionsOf(doc2.nodes[realId(w.id)]), owner, st, ids2);
+    const at3 = expand.get(w);
+    const inst = node2?.type === "INSTANCE" ? node2 : void 0;
+    const states = inst && at3 && ctx2.depth < 4 ? variantStates(doc2, inst.mainComponentId) : [];
+    if (inst && at3 && states.length > 1 && w.id !== variantOf2) {
+      const m = { id: `m${ctx2.machines.length}`, initial: inst.mainComponentId, states: states.map((s) => ({ id: s, name: stateName(doc2, s) })) };
+      ctx2.machines.push(m);
+      w.machine = m;
+      const perState = [];
+      for (const s of states) {
+        let kids;
+        if (s === inst.mainComponentId) {
+          kids = w.children;
+          kids.forEach((c2) => visit2(c2, m.id, s, false));
+        } else {
+          const shown2 = { ...doc2, nodes: { ...doc2.nodes, [inst.id]: { ...inst, mainComponentId: s } } };
+          ctx2.depth++;
+          try {
+            kids = buildState(ctx2, shown2, inst.id, m.id, s, at3, inst.id).children;
+          } finally {
+            ctx2.depth--;
+          }
+        }
+        note(ctx2, w, interactionsOf(doc2.nodes[s]), m.id, s, ids2, m.id);
+        perState.push([s, kids]);
+      }
+      w.children = mergeChildren(perState, m.id, m.states.map((s) => s.id), ctx2);
+    } else if (w.id === variantOf2) {
+      w.children.forEach((c2) => visit2(c2, owner, st, false));
+    } else {
+      if (inst) note(ctx2, w, interactionsOf(doc2.nodes[inst.mainComponentId]), owner, st, ids2);
+      w.children.forEach((c2) => visit2(c2, owner, st, false));
+    }
+  };
+  visit2(tree.root, machine, state, !start2);
+  return tree.root;
+}
+function note(ctx2, w, list2, machine, state, ids2, hostMachine) {
+  if (!list2.length) return;
+  const at3 = ctx2.pending.get(w) ?? [];
+  for (const ix of list2) at3.push({ machine, state, ix, hostMachine: hostMachine ?? (machine !== FLOW ? machine : void 0), ids: ids2 });
+  ctx2.pending.set(w, at3);
+}
+function lookOf(w, isRoot) {
+  return {
+    style: { ...placementStyle(w, isRoot), ...w.style, ...w.motion?.style ?? {} },
+    ...w.text ? { text: w.text.characters } : {},
+    ...w.tf ? { tf: w.tf } : {}
+  };
+}
+function keyed(kids) {
+  const seen = /* @__PURE__ */ new Map();
+  return kids.map((k2) => {
+    const base = `${k2.name}\0${k2.type}`;
+    const i2 = seen.get(base) ?? 0;
+    seen.set(base, i2 + 1);
+    return [`${base}\0${i2}`, k2];
+  });
+}
+function mergeChildren(perState, machine, states, ctx2) {
+  const order2 = [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const [state, kids] of perState) {
+    let after = -1;
+    for (const [k2, node2] of keyed(kids)) {
+      let at3 = order2.indexOf(k2);
+      if (at3 < 0) {
+        order2.splice(after + 1, 0, k2);
+        at3 = after + 1;
+      }
+      after = at3;
+      (groups.get(k2) ?? groups.set(k2, []).get(k2)).push([state, node2]);
+    }
+  }
+  return order2.map((k2) => mergeNode(groups.get(k2), machine, states, ctx2));
+}
+function mergeNode(items, machine, states, ctx2) {
+  const [, first2] = items[0];
+  if (first2.owner !== machine) {
+    for (const [, w] of items.slice(1)) alias(ctx2, w, first2);
+    return first2;
+  }
+  const looks = {};
+  for (const s of states) looks[s] = null;
+  for (const [s, w] of items) looks[s] = w.looks?.[s] ?? null;
+  const merged = { ...first2, looks };
+  const pend = items.flatMap(([, w]) => ctx2.pending.get(w) ?? []);
+  if (pend.length) ctx2.pending.set(merged, pend);
+  for (const [, w] of items) if (w !== merged) alias(ctx2, w, merged);
+  if (first2.machine) {
+    for (const [, w] of items) if (w.machine && w.machine !== first2.machine) ctx2.renamed.set(w.machine.id, first2.machine.id);
+  }
+  merged.children = first2.machine ? first2.children : mergeChildren(items.map(([s, w]) => [s, w.children]), machine, states, ctx2);
+  return merged;
+}
+function alias(ctx2, from2, to) {
+  const a = ctx2.alias ??= /* @__PURE__ */ new Map();
+  a.set(from2, to);
+}
+function mergedOf(ctx2, w) {
+  const a = ctx2.alias;
+  let cur = w;
+  for (let i2 = 0; i2 < 16 && a?.has(cur); i2++) cur = a.get(cur);
+  return cur;
+}
+function actionOf(ctx2, p2) {
+  const a = p2.ix.action;
+  const glide2 = glideOf2(a.transition);
+  const hold = p2.ix.trigger === "ON_HOVER" || p2.ix.trigger === "ON_PRESS";
+  switch (a.navigationType) {
+    case "NAVIGATE":
+      return a.destinationId && ctx2.screens.has(a.destinationId) ? { kind: "go", machine: FLOW, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
+    case "BACK":
+      return ctx2.screens.size > 1 ? { kind: "back", machine: FLOW } : null;
+    case "CHANGE_TO":
+      return p2.hostMachine && a.destinationId ? { kind: "go", machine: p2.hostMachine, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
+    case "ORBIT_3D": {
+      const o = a.orbit ?? {};
+      const uidOf = (id3) => {
+        const w = id3 ? p2.ids.get(id3) : void 0;
+        return w ? mergedOf(ctx2, w).uid : void 0;
+      };
+      const uid2 = uidOf(a.destinationId);
+      const tiltUid = uidOf(o.tiltLayerId) ?? uid2;
+      return uid2 === void 0 || tiltUid === void 0 ? null : { kind: "orbit", target: uid2, tiltTarget: tiltUid, degreesPerPx: o.degreesPerPx ?? 0.4, tilt: !!o.tilt, tiltRange: o.tiltRange ?? [-30, 30] };
+    }
+    default:
+      return null;
+  }
+}
+function buildWebTree(doc2, nodeId2, opts = {}) {
+  const tree = buildTree(doc2, nodeId2, opts);
+  const machine = opts.static || opts.stateMachine === false ? null : webStateMachine(doc2, nodeId2);
+  return machine ? { ...tree, stateMachine: machine } : tree;
+}
+function buildTree(doc2, nodeId2, opts = {}) {
+  if (opts.static || opts.target === "site") return buildPlainTree(doc2, nodeId2, opts);
+  const screens = flowScreens(doc2, nodeId2);
+  const anything = screens.length > 1 || [...subtreeIds(doc2, nodeId2)].some((id3) => interactionsOf(doc2.nodes[id3]).some((ix) => ix.action.navigationType === "CHANGE_TO" || ix.action.navigationType === "ORBIT_3D"));
+  if (!anything) return buildPlainTree(doc2, nodeId2, opts);
+  const flow = { id: FLOW, initial: nodeId2, states: screens.map((s) => ({ id: s, name: doc2.nodes[s]?.name ?? s })) };
+  const ctx2 = { doc: doc2, opts, screens: new Set(screens), machines: [flow], keyframes: /* @__PURE__ */ new Set(), rules: /* @__PURE__ */ new Set(), pending: /* @__PURE__ */ new Map(), depth: 0, renamed: /* @__PURE__ */ new Map() };
+  const roots = screens.map((s) => [s, buildState(ctx2, doc2, s, FLOW, s)]);
+  const truncated = !!ctx2.truncated;
+  const root2 = mergeNode(roots, FLOW, screens, ctx2);
+  let uid2 = 0;
+  const number4 = (w) => {
+    w.uid = uid2++;
+    w.children.forEach(number4);
+  };
+  number4(root2);
+  const place3 = (w) => {
+    const pend = ctx2.pending.get(w);
+    if (pend) {
+      const seen = /* @__PURE__ */ new Set();
+      const on = [];
+      for (const raw of pend) {
+        const p2 = { ...raw, machine: ctx2.renamed.get(raw.machine) ?? raw.machine, ...raw.hostMachine ? { hostMachine: ctx2.renamed.get(raw.hostMachine) ?? raw.hostMachine } : {} };
+        const trigger = TRIGGERS[p2.ix.trigger];
+        const action3 = trigger ? actionOf(ctx2, p2) : null;
+        if (!trigger || !action3) continue;
+        const ix = { machine: p2.machine, state: p2.state, trigger, ...p2.ix.triggerDelay ? { delay: p2.ix.triggerDelay } : {}, ...p2.ix.triggerKey ? { key: p2.ix.triggerKey } : {}, action: action3 };
+        const sig = JSON.stringify(ix);
+        if (!seen.has(sig)) {
+          seen.add(sig);
+          on.push(ix);
+        }
+      }
+      if (on.length) w.on = on;
+    }
+    w.children.forEach(place3);
+  };
+  place3(root2);
+  return { root: root2, truncated, ...ctx2.rules.size ? { rules: [...ctx2.rules].sort() } : {}, interactive: { machines: ctx2.machines.filter((m) => !ctx2.renamed.has(m.id)), keyframes: [...ctx2.keyframes] } };
+}
+var FLOW, interactionsOf, realId, nodeOf, stateName, TRIGGERS, EASINGS2, glideOf2;
+var init_interactive = __esm({
+  "lib/io/web/interactive.ts"() {
+    "use strict";
+    init_scene_graph();
+    init_tree();
+    init_state_machine3();
+    init_element();
+    FLOW = "flow";
+    interactionsOf = (n) => n?.interactions ?? [];
+    realId = (id3) => id3.includes("::") ? id3.slice(id3.lastIndexOf("::") + 2) : id3;
+    nodeOf = (doc2, id3) => doc2.nodes[id3] ?? (id3.includes("::") ? resolveVirtualNode2(doc2.nodes, id3) ?? void 0 : void 0);
+    stateName = (doc2, id3) => {
+      const n = doc2.nodes[id3];
+      const v = n?.variantProperties;
+      return v ? Object.values(v).join(", ") : n?.name ?? id3;
+    };
+    TRIGGERS = {
+      ON_CLICK: "click",
+      ON_HOVER: "hover",
+      ON_PRESS: "press",
+      ON_DRAG: "drag",
+      MOUSE_ENTER: "enter",
+      MOUSE_LEAVE: "leave",
+      AFTER_TIMEOUT: "timeout",
+      KEY_DOWN: "key"
+    };
+    EASINGS2 = { EASE_IN: "ease-in", EASE_OUT: "ease-out", EASE_IN_OUT: "ease-in-out", LINEAR: "linear", SPRING: "cubic-bezier(0.34, 1.56, 0.64, 1)" };
+    glideOf2 = (t3) => !t3 || t3.type === "INSTANT" || t3.type === "CUT" ? { ms: 0, easing: "linear" } : { ms: Math.max(0, Math.round(t3.duration)), easing: EASINGS2[t3.easing] ?? "ease-in-out" };
+  }
+});
+
+// lib/io/web/site.ts
+function light(node2) {
+  const out = {};
+  for (const k2 in node2) if (!HEAVY.has(k2)) out[k2] = node2[k2];
+  return out;
+}
+function programDocument(doc2, pageId2, screens) {
+  const nodes = {};
+  const take = (id3) => {
+    const n = doc2.nodes[id3];
+    if (!n || nodes[id3]) return;
+    nodes[id3] = light(n);
+    for (const c2 of n.childIds ?? []) take(c2);
+    const main2 = n.mainComponentId;
+    if (main2) {
+      take(main2);
+      const set3 = doc2.nodes[main2]?.parentId;
+      if (set3 && doc2.nodes[set3]?.type === "COMPONENT_SET") take(set3);
+    }
+  };
+  const page = doc2.nodes[pageId2];
+  if (page) nodes[pageId2] = { ...light(page), childIds: screens.map((s) => s.id) };
+  for (const s of screens) take(s.id);
+  return {
+    id: doc2.id,
+    name: doc2.name,
+    nodes,
+    pages: [pageId2],
+    styles: {},
+    variables: doc2.variables,
+    variableCollections: doc2.variableCollections,
+    activeVariableModes: doc2.activeVariableModes,
+    settings: doc2.settings,
+    // What a layer that follows a record's field is drawn from, while the page runs.
+    ...doc2.collections && Object.keys(doc2.collections).length ? { collections: doc2.collections, records: doc2.records } : {}
+  };
+}
+function withVariants(doc2, root2, opts, depth2 = 3) {
+  if (depth2 <= 0) return;
+  for (const w of flatten2(root2)) {
+    const real = layerId(w.id), suffix = copySuffix(w.id);
+    const inst = w.type === "INSTANCE" && !real.includes("::") ? doc2.nodes[real] : void 0;
+    const main2 = inst?.mainComponentId;
+    if (!inst || !main2 || w.variants) continue;
+    const reach = variantStates(doc2, main2);
+    if (reach.length < 2) continue;
+    w.variant = main2;
+    w.variants = {};
+    const parent = inst.parentId ? doc2.nodes[inst.parentId] ?? null : null;
+    const record2 = suffix ? doc2.records?.[copyRecord(w.id) ?? ""] : void 0;
+    const as3 = record2 ? { ...opts, item: { collectionId: record2.collectionId, recordId: record2.id } } : opts;
+    for (const v of reach.slice(1)) {
+      const as2 = { ...doc2, nodes: { ...doc2.nodes, [inst.id]: { ...inst, mainComponentId: v } } };
+      const built = buildPlainTree(as2, inst.id, as3, { parent, in3D: false, fold: 0 }).root;
+      if (suffix) for (const n of flatten2(built)) n.id += suffix;
+      built.variant = v;
+      withVariants(as2, built, opts, depth2 - 1);
+      w.variants[v] = built;
+    }
+  }
+}
+function everyNode(root2, out = []) {
+  for (const n of flatten2(root2)) {
+    out.push(n);
+    for (const v of Object.values(n.variants ?? {})) everyNode(v, out);
+  }
+  return out;
+}
+function mediaRules(doc2, screenId, base, opts) {
+  const rules = [];
+  let above = new Map(flatten2(base).map((n) => [n.id, declared(n, n === base)]));
+  for (const bp of breakpointsOf(doc2).slice(1)) {
+    const view2 = breakpointDocument(doc2, bp.id);
+    const root2 = buildPlainTree(view2, screenId, opts).root;
+    const here = new Map(flatten2(root2).map((n) => [n.id, declared(n, n === root2)]));
+    const blocks = [];
+    for (const [id3, was] of above) {
+      const now2 = here.get(id3);
+      const diff = {};
+      if (!now2) {
+        if (was.display !== "none") diff.display = "none";
+      } else {
+        for (const k2 in was) if (!(k2 in now2)) diff[k2] = "revert";
+        for (const k2 in now2) if (now2[k2] !== was[k2]) diff[k2] = now2[k2];
+      }
+      if (Object.keys(diff).length) blocks.push(`  [data-pc-id="${id3}"] {
+${styleMapToCSSText(Object.fromEntries(Object.entries(diff).map(([k2, v]) => [k2, `${v} !important`])), "    ")}
+  }`);
+    }
+    if (blocks.length) rules.push(`@media (max-width: ${bp.maxWidth}px) {
+${blocks.join("\n")}
+}`);
+    above = new Map([...above].map(([id3, was]) => [id3, here.get(id3) ?? { ...was, display: "none" }]));
+  }
+  return rules;
+}
+function sitePages(doc2, pageId2) {
+  const screens = screensOf(doc2, pageId2);
+  const routes = routesOf(screens);
+  return screens.flatMap((s) => {
+    const base = routes.get(s.id);
+    const collection = s.route?.collectionId ? doc2.collections?.[s.route.collectionId] : void 0;
+    if (!collection) return [{ id: s.id, frame: s, route: base, title: s.route?.title || s.name }];
+    const slugs = recordSlugs(doc2, collection.id);
+    return recordsIn(doc2, collection.id).map((record2) => ({
+      id: `${s.id}~${record2.id}`,
+      frame: s,
+      record: record2,
+      collection,
+      route: `${base === "/" ? "" : base}/${slugs.get(record2.id)}`,
+      title: itemText(s.route?.title || s.name, collection, record2)
+    }));
+  });
+}
+function screenTransitions3d(doc2, screens) {
+  const out = /* @__PURE__ */ new Set();
+  const turns = (a) => {
+    if (!a) return [];
+    if (a.navigationType === "CONDITIONAL") return (a.branches ?? []).flatMap((b) => b.actions.flatMap(turns));
+    return a.navigationType === "NAVIGATE" && a.destinationId && a.transition && is3DTransition(a.transition.type) ? [a.destinationId] : [];
+  };
+  for (const s of screens) {
+    const seen = /* @__PURE__ */ new Set();
+    const walk3 = (id3) => {
+      const n = doc2.nodes[id3];
+      if (!n || seen.has(id3)) return;
+      seen.add(id3);
+      for (const ix of n.interactions ?? []) for (const to of turns(ix.action)) {
+        out.add(s.id);
+        out.add(to);
+      }
+      for (const c2 of n.childIds ?? []) walk3(c2);
+      const main2 = n.mainComponentId;
+      if (main2) walk3(main2);
+    };
+    walk3(s.id);
+  }
+  return out;
+}
+function withoutScreenIslands(site) {
+  if (!site.islands) return site;
+  const kept = Object.entries(site.islands).filter(([k2]) => !k2.startsWith(SCREEN_ISLAND));
+  if (kept.length === Object.keys(site.islands).length) return site;
+  const { islands: _, ...rest } = site;
+  return kept.length ? { ...rest, islands: Object.fromEntries(kept) } : rest;
+}
+function buildWebSite(doc2, opts = {}) {
+  const pageId2 = opts.pageId ?? doc2.pages[0];
+  const screens = screensOf(doc2, pageId2);
+  const routes = routesOf(screens);
+  const build3 = { target: "site", nodeCap: opts.nodeCap ?? 2e4, static: opts.static, routes: Object.fromEntries(routes) };
+  const laid = /* @__PURE__ */ new Set();
+  const pages2 = sitePages(doc2, pageId2).map((p2) => {
+    const s = p2.frame;
+    const opts2 = p2.record ? { ...build3, item: { collectionId: p2.collection.id, recordId: p2.record.id } } : build3;
+    const tree = buildPlainTree(doc2, s.id, opts2);
+    const media2 = laid.has(s.id) ? [] : mediaRules(doc2, s.id, tree.root, opts2);
+    laid.add(s.id);
+    withVariants(doc2, tree.root, opts2);
+    const description = s.route?.description ? p2.record ? itemText(s.route.description, p2.collection, p2.record) : s.route.description : void 0;
+    const moves3 = !opts2.static && hasFrameMotion(doc2.nodes, s.id);
+    const length2 = moves3 ? timelineDuration(doc2.nodes, s.id) : 0;
+    const machine = moves3 ? webStateMachine(doc2, s.id) : null;
+    return {
+      ...machine ? { machine } : {},
+      ...length2 > 0 ? { timeline: { duration: length2, stops: stopsOf(frameTimeline(doc2.nodes, s.id).markers, [0, length2]), loops: frameRunsOn(doc2.nodes, s.id) } } : {},
+      id: p2.id,
+      route: p2.route,
+      title: p2.title,
+      ...p2.record ? { screen: s.id, record: p2.record.id } : {},
+      ...description ? { description } : {},
+      ...s.route?.notFound ? { notFound: true } : {},
+      ...s.route?.access ? { access: s.route.access } : {},
+      tree,
+      ...media2.length ? { media: media2 } : {}
+    };
+  });
+  const islandNodes = new Map(pages2.flatMap((p2) => everyNode(p2.tree.root).filter((n) => n.island && !n.id.includes("::"))).map((n) => [n.id, n]));
+  const fonts = /* @__PURE__ */ new Map();
+  for (const p2 of pages2) for (const [family, weights] of fontFamilies(p2.tree)) for (const w of weights) (fonts.get(family) ?? fonts.set(family, /* @__PURE__ */ new Set()).get(family)).add(w);
+  const home = pages2.find((p2) => p2.route === "/" && !p2.screen);
+  const turned = doc2.site?.gpuTransitions === false ? /* @__PURE__ */ new Set() : screenTransitions3d(doc2, screens);
+  const screenSlices = [...turned].filter((id3) => doc2.nodes[id3] && pages2.filter((p2) => (p2.screen ?? p2.id) === id3).every(drawnByGpu)).map((id3) => [`${SCREEN_ISLAND}${id3}`, sliceDocument(doc2, id3, { screen: true })]);
+  const islands = [...[...islandNodes].map(([id3, n]) => [id3, sliceDocument(doc2, n.asset?.of ?? layerId(id3), { self: !!n.asset?.self })]), ...screenSlices];
+  return {
+    name: doc2.name,
+    pages: pages2,
+    home: home?.id ?? null,
+    tokens: pages2.find((p2) => p2.tree.tokens)?.tree.tokens,
+    fonts: [...fonts].sort(([a], [b]) => a.localeCompare(b)).map(([family, w]) => ({ family, weights: [...w].sort((a, b) => a - b) })),
+    assets: pages2.flatMap((p2) => everyNode(p2.tree.root).filter((n) => n.asset).map((n) => n.id)),
+    program: { document: programDocument(doc2, pageId2, screens), start: home?.id ?? null },
+    ...islands.length ? { islands: Object.fromEntries(islands) } : {}
+  };
+}
+var HEAVY, declared, drawnByGpu;
+var init_site = __esm({
+  "lib/io/web/site.ts"() {
+    "use strict";
+    init_breakpoints();
+    init_collections();
+    init_routes();
+    init_instances2();
+    init_timeline_stops();
+    init_transitions();
+    init_css();
+    init_element();
+    init_fonts3();
+    init_slice();
+    init_render();
+    init_state_machine3();
+    init_interactive();
+    init_tree();
+    init_routes();
+    HEAVY = /* @__PURE__ */ new Set(["fills", "strokes", "effects", "shadows", "blurs", "vectorPaths", "paths", "styledSegments", "paragraphs", "imageUrl", "exportSettings", "annotations", "devResources", "codeConnect", "layoutGrids", "aiPending"]);
+    declared = (n, isRoot) => ({ ...placementStyle(n, isRoot), ...n.style, ...n.hidden ? { display: "none" } : {} });
+    drawnByGpu = (page) => !everyNode(page.tree.root).some((n) => n.input || n.check || n.html || n.code);
+  }
+});
+
 // lib/code/cdn.ts
 var CDN;
 var init_cdn = __esm({
@@ -336868,7 +338340,7 @@ async function withSiteCode(site, doc2) {
   return { ...site, code: { modules, ...imports3.size ? { packages: { versions, imports: [...imports3].sort() } } : {} } };
 }
 var codeNodes;
-var init_site = __esm({
+var init_site2 = __esm({
   "lib/code/site.ts"() {
     "use strict";
     codeNodes = (n, out = []) => {
@@ -336919,44 +338391,6 @@ var init_hash = __esm({
   }
 });
 
-// lib/code/props.ts
-function propName(key5) {
-  const words = key5.split("#")[0].trim().split(/[^A-Za-z0-9]+/).filter(Boolean);
-  const name2 = words.map((w, i2) => i2 === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join("");
-  return /^[A-Za-z_$]/.test(name2) ? name2 : `p${name2}`;
-}
-function componentOf(nodes, node2) {
-  const c2 = node2.type === "COMPONENT" ? node2 : node2.type === "INSTANCE" ? nodes[node2.mainComponentId] : void 0;
-  return c2?.type === "COMPONENT" ? c2 : void 0;
-}
-function codeOf(nodes, node2) {
-  if (node2.type !== "COMPONENT" && node2.type !== "INSTANCE") return null;
-  return componentOf(nodes, node2)?.code ?? null;
-}
-function codeProps(nodes, node2) {
-  const component = componentOf(nodes, node2);
-  const out = {};
-  if (!component) return out;
-  const set3 = component.parentId ? nodes[component.parentId] : void 0;
-  const defs = (set3?.type === "COMPONENT_SET" ? set3.componentPropertyDefinitions : component.componentPropertyDefinitions) ?? {};
-  const given = node2.type === "INSTANCE" ? node2.componentProperties ?? {} : {};
-  for (const key5 of Object.keys(defs).sort()) {
-    const v = value(key5 in given ? given[key5] : defs[key5].defaultValue);
-    if (v !== void 0) out[propName(key5)] = v;
-  }
-  out.width = Math.round(node2.width);
-  out.height = Math.round(node2.height);
-  return out;
-}
-var value;
-var init_props = __esm({
-  "lib/code/props.ts"() {
-    "use strict";
-    init_color();
-    value = (v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : v && typeof v === "object" && "r" in v ? colorToHex8(v) : void 0;
-  }
-});
-
 // lib/code/snapshots.ts
 var init_snapshots = __esm({
   "lib/code/snapshots.ts"() {
@@ -337401,871 +338835,6 @@ ${indent}<img src="" width="${node2.width}" height="${node2.height}" alt="${esca
   }
 });
 
-// lib/document/controls.ts
-function fieldPart(nodes, id3) {
-  const n = nodes[id3];
-  if (!n) return null;
-  if (n.type === "TEXT") return id3;
-  for (const c2 of n.childIds ?? []) {
-    const hit = fieldPart(nodes, c2);
-    if (hit) return hit;
-  }
-  return null;
-}
-var cleanName2;
-var init_controls = __esm({
-  "lib/document/controls.ts"() {
-    cleanName2 = (raw) => raw.trim().replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
-  }
-});
-
-// lib/io/web/expressible.ts
-function expressibility(node2, styles) {
-  const c2 = capability(node2, "css", styles);
-  return { css: c2.reason === "", reason: c2.reason, needsRaster: c2.verdict === "raster" };
-}
-var init_expressible = __esm({
-  "lib/io/web/expressible.ts"() {
-    "use strict";
-    init_capability();
-  }
-});
-
-// lib/io/web/responsive.ts
-function containerStyle(f2) {
-  const out = {};
-  if (isStack(f2) && f2.layoutWrap === "WRAP") {
-    out["flex-wrap"] = "wrap";
-    const cross2 = f2.counterAxisSpacing ?? f2.itemSpacing ?? 0;
-    const main2 = f2.itemSpacing ?? 0;
-    if (cross2 !== main2) out.gap = f2.layoutMode === "HORIZONTAL" ? `${cross2}px ${main2}px` : `${main2}px ${cross2}px`;
-    out["align-content"] = "flex-start";
-  }
-  if (isGrid(f2)) {
-    out.display = "grid";
-    const cols = f2.layoutGridColumns ?? "AUTO";
-    out["grid-template-columns"] = cols === "AUTO" ? `repeat(auto-fill, minmax(${f2.layoutGridMinColumnWidth ?? 100}px, 1fr))` : Array.from({ length: Math.max(1, cols) }, (_, i2) => track(f2.layoutGridColumnSizes?.[i2])).join(" ");
-    const rows = f2.layoutGridRows ?? "AUTO";
-    if (rows === "AUTO") out["grid-auto-rows"] = `minmax(${f2.layoutGridMinRowHeight ?? 100}px, auto)`;
-    else out["grid-template-rows"] = Array.from({ length: Math.max(1, rows) }, (_, i2) => track(f2.layoutGridRowSizes?.[i2])).join(" ");
-    const colGap = f2.itemSpacing ?? 0, rowGap = f2.counterAxisSpacing ?? colGap;
-    out.gap = rowGap === colGap ? `${colGap}px` : `${rowGap}px ${colGap}px`;
-    if (f2.padding) {
-      out.padding = `${f2.padding.top}px ${f2.padding.right}px ${f2.padding.bottom}px ${f2.padding.left}px`;
-      if (f2.padding.top || f2.padding.right || f2.padding.bottom || f2.padding.left) out["box-sizing"] = "border-box";
-    }
-  }
-  const scroll = f2.overflowScrolling;
-  if (scroll && scroll !== "NONE") {
-    out["overflow-x"] = scroll === "HORIZONTAL" || scroll === "BOTH" ? "auto" : "hidden";
-    out["overflow-y"] = scroll === "VERTICAL" || scroll === "BOTH" ? "auto" : "hidden";
-  }
-  return out;
-}
-function flowChild(node2, parent) {
-  const style = { ...limits(node2) };
-  const h = node2.layoutSizingHorizontal ?? "FIXED", v = node2.layoutSizingVertical ?? "FIXED";
-  if (isGrid(parent)) {
-    if (h !== "FIXED") style.width = h === "FILL" ? null : "fit-content";
-    if (v !== "FIXED") style.height = null;
-    return { style };
-  }
-  if (h === "FIXED" && style["max-width"] === void 0) style["max-width"] = "100%";
-  const row2 = parent.layoutMode === "HORIZONTAL";
-  const main2 = row2 ? h : v, cross2 = row2 ? v : h;
-  const mainProp = row2 ? "width" : "height", crossProp = row2 ? "height" : "width";
-  if (main2 === "FILL") {
-    style[mainProp] = null;
-    style.flex = "1 1 0";
-    if (style[`min-${mainProp}`] === void 0) style[`min-${mainProp}`] = "0";
-  } else {
-    if (main2 === "HUG") style[mainProp] = null;
-    style["flex-shrink"] = "0";
-  }
-  if (cross2 === "FILL") {
-    style[crossProp] = null;
-    style["align-self"] = "stretch";
-  } else {
-    if (cross2 === "HUG") style[crossProp] = null;
-    if ((parent.counterAxisAlignItems ?? "MIN") === "MIN") style["align-self"] = "flex-start";
-  }
-  return { style };
-}
-function constrained(kind, pos, size6, parentSize, start2, end, sizeProp) {
-  const far = parentSize - pos - size6;
-  switch (kind) {
-    case "MAX":
-      return { place: { [end]: px4(far) }, style: {} };
-    case "STRETCH":
-      return { place: { [start2]: px4(pos), [end]: px4(far) }, style: { [sizeProp]: null } };
-    // Its centre keeps its distance from the parent's centre.
-    case "CENTER":
-      return { place: { [start2]: `calc(50% + ${px4(pos - parentSize / 2)})` }, style: {} };
-    case "SCALE":
-      return parentSize > 0 ? { place: { [start2]: pct2(pos / parentSize) }, style: { [sizeProp]: pct2(size6 / parentSize) } } : { place: { [start2]: px4(pos) }, style: {} };
-    default:
-      return { place: { [start2]: px4(pos) }, style: {} };
-  }
-}
-function placedChild(node2, parent) {
-  const c2 = node2.constraints ?? { horizontal: "MIN", vertical: "MIN" };
-  const x2 = constrained(c2.horizontal, node2.x, node2.width, parent.width, "left", "right", "width");
-  const y = constrained(c2.vertical, node2.y, node2.height, parent.height, "top", "bottom", "height");
-  return { style: { ...limits(node2), ...x2.style, ...y.style }, place: { position: "absolute", ...x2.place, ...y.place } };
-}
-function siteLayout(node2, parent, layout2) {
-  const own2 = node2.type === "FRAME" || node2.type === "COMPONENT" || node2.type === "INSTANCE" ? node2 : null;
-  if (!parent) {
-    const grows = !own2 || laysOut(own2) || own2.overflowScrolling === "NONE" || !own2.overflowScrolling;
-    return { style: { ...limits(node2), width: "100%", ...grows ? { height: null, "min-height": `max(${px4(node2.height)}, 100dvh)` } : {} }, place: { position: "relative" } };
-  }
-  const s = node2;
-  return layout2 && laysOut(layout2) && s.layoutPositioning !== "ABSOLUTE" ? flowChild(s, layout2) : placedChild(s, parent);
-}
-var px4, pct2, isStack, isGrid, laysOut, track, limits;
-var init_responsive = __esm({
-  "lib/io/web/responsive.ts"() {
-    "use strict";
-    px4 = (v) => `${Math.round(v * 100) / 100}px`;
-    pct2 = (v) => `${Math.round(v * 1e4) / 100}%`;
-    isStack = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
-    isGrid = (f2) => f2?.layoutMode === "GRID";
-    laysOut = (f2) => isStack(f2) || isGrid(f2);
-    track = (t3) => {
-      if (!t3 || t3.sizing === "FILL") return t3?.value && /fr$/.test(t3.value) ? t3.value : "1fr";
-      if (t3.sizing === "HUG") return "auto";
-      return /^[\d.]+$/.test(t3.value) ? `${t3.value}px` : t3.value;
-    };
-    limits = (n) => {
-      const out = {};
-      if (n.minWidth !== void 0) out["min-width"] = px4(n.minWidth);
-      if (n.maxWidth !== void 0) out["max-width"] = px4(n.maxWidth);
-      if (n.minHeight !== void 0) out["min-height"] = px4(n.minHeight);
-      if (n.maxHeight !== void 0) out["max-height"] = px4(n.maxHeight);
-      return out;
-    };
-  }
-});
-
-// lib/io/web/richtext.ts
-function runStyle(seg) {
-  const out = {};
-  if (seg.fontFamily) out["font-family"] = `"${seg.fontFamily}", system-ui, sans-serif`;
-  if (seg.fontSize) out["font-size"] = `${seg.fontSize}px`;
-  if (seg.fontWeight) out["font-weight"] = String(seg.fontWeight);
-  if (seg.fontStyle) out["font-style"] = seg.fontStyle;
-  if (seg.lineHeight !== void 0 && seg.lineHeight !== "AUTO") out["line-height"] = `${seg.lineHeight}px`;
-  if (seg.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
-  else if (seg.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
-  else if (seg.textDecoration === "NONE") out["text-decoration"] = "none";
-  if (seg.textCase === "UPPER") out["text-transform"] = "uppercase";
-  else if (seg.textCase === "LOWER") out["text-transform"] = "lowercase";
-  else if (seg.textCase === "TITLE") out["text-transform"] = "capitalize";
-  else if (seg.textCase === "ORIGINAL") out["text-transform"] = "none";
-  const solid4 = seg.fills?.find((f2) => f2.visible !== false && f2.type === "SOLID" && f2.color);
-  if (solid4?.color) out.color = toHex(solid4.color);
-  return out;
-}
-function textRuns(t3) {
-  const text = t3.characters ?? "";
-  const segs = [...t3.styledSegments ?? []].filter((s) => s.end > s.start).sort((a, b) => a.start - b.start);
-  if (!segs.length && !t3.link) return void 0;
-  const runs = [];
-  const push2 = (from2, to, seg) => {
-    if (to <= from2) return;
-    const link2 = seg?.link ?? t3.link;
-    runs.push({ text: text.slice(from2, to), style: seg ? runStyle(seg) : {}, ...link2 ? { link: link2 } : {} });
-  };
-  let at3 = 0;
-  for (const s of segs) {
-    const start2 = Math.max(at3, Math.min(text.length, s.start)), end = Math.min(text.length, s.end);
-    push2(at3, start2);
-    push2(start2, end, s);
-    at3 = Math.max(at3, end);
-  }
-  push2(at3, text.length);
-  return runs;
-}
-var init_richtext = __esm({
-  "lib/io/web/richtext.ts"() {
-    "use strict";
-    init_paint2();
-  }
-});
-
-// lib/io/web/timeline.ts
-function frameWebMotion(doc2, frameId, style) {
-  const nodes = doc2.nodes;
-  const frame2 = nodes[frameId];
-  if (!frame2 || !hasFrameMotion(nodes, frameId)) return null;
-  const len3 = timelineDuration(nodes, frameId);
-  if (!(len3 > 0)) return null;
-  const steps = Math.max(1, Math.ceil(len3 / 1e3 * SAMPLE_RATE));
-  const times2 = [];
-  const poses = [];
-  for (let i2 = 0; i2 <= steps; i2++) {
-    const t3 = len3 * i2 / steps;
-    times2.push(t3);
-    poses.push(evaluatePose(nodes, { kind: "frame", frameId }, t3).nodes);
-  }
-  const ids2 = /* @__PURE__ */ new Set();
-  for (const p2 of poses) for (const id3 in p2) if (id3 !== frameId && p2[id3] !== nodes[id3]) ids2.add(id3);
-  const loops = frameRunsOn(nodes, frameId);
-  const out = /* @__PURE__ */ new Map();
-  const tag = frameId.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
-  let n = 0;
-  for (const id3 of ids2) {
-    const rest = id3.includes("::") ? resolveVirtualNode2(nodes, id3) : nodes[id3];
-    if (!rest || !underFrame(nodes, id3, frameId)) continue;
-    const frames = keyframesOf(times2, poses.map((p2) => declarationsOf(p2[id3] ?? rest, rest, style)), len3);
-    if (!frames) continue;
-    out.set(id3, {
-      name: `timeline-${tag}-${n++}`,
-      frames,
-      durationMs: Math.round(len3),
-      delayMs: 0,
-      iterations: loops ? "infinite" : 1,
-      direction: "normal",
-      fill: "both"
-    });
-  }
-  return out.size ? out : null;
-}
-function underFrame(nodes, id3, frameId) {
-  const real = id3.split("::")[0];
-  for (let n = nodes[real]; n; n = n.parentId ? nodes[n.parentId] : void 0) if (n.id === frameId) return true;
-  return false;
-}
-var init_timeline = __esm({
-  "lib/io/web/timeline.ts"() {
-    "use strict";
-    init_scene_graph();
-    init_pose();
-    init_instances2();
-    init_keyframes();
-  }
-});
-
-// lib/io/web/interactive.ts
-function subtreeIds(doc2, id3, out = /* @__PURE__ */ new Set()) {
-  if (out.has(id3)) return out;
-  const n = doc2.nodes[id3];
-  if (!n) return out;
-  out.add(id3);
-  if (n.type === "INSTANCE") subtreeIds(doc2, n.mainComponentId, out);
-  for (const c2 of n.childIds ?? []) subtreeIds(doc2, c2, out);
-  return out;
-}
-function flowScreens(doc2, startId) {
-  const start2 = doc2.nodes[startId];
-  if (!start2 || start2.type !== "FRAME" || doc2.nodes[start2.parentId ?? ""]?.type !== "PAGE") return [startId];
-  const out = [startId];
-  for (let i2 = 0; i2 < out.length; i2++) {
-    for (const id3 of subtreeIds(doc2, out[i2])) {
-      for (const ix of interactionsOf(doc2.nodes[id3])) {
-        const to = ix.action.navigationType === "NAVIGATE" ? ix.action.destinationId : null;
-        const dest = to ? doc2.nodes[to] : void 0;
-        if (!dest || out.includes(dest.id) || dest.type !== "FRAME" || doc2.nodes[dest.parentId ?? ""]?.type !== "PAGE") continue;
-        if (Math.round(dest.width) !== Math.round(start2.width) || Math.round(dest.height) !== Math.round(start2.height)) continue;
-        out.push(dest.id);
-      }
-    }
-  }
-  return out;
-}
-function variantStates(doc2, mainId) {
-  const out = [mainId];
-  for (let i2 = 0; i2 < out.length; i2++) {
-    for (const id3 of subtreeIds(doc2, out[i2])) {
-      for (const ix of interactionsOf(doc2.nodes[id3])) {
-        const to = ix.action.navigationType === "CHANGE_TO" ? ix.action.destinationId : null;
-        if (to && !out.includes(to) && doc2.nodes[to]?.type === "COMPONENT") out.push(to);
-      }
-    }
-  }
-  return out;
-}
-function buildState(ctx2, doc2, id3, machine, state, start2, variantOf2) {
-  const expand = /* @__PURE__ */ new Map();
-  const tree = buildPlainTree(doc2, id3, ctx2.opts, start2, { built: (web, _node, at3) => {
-    if (web.type === "INSTANCE") expand.set(web, at3);
-  } });
-  for (const r of tree.rules ?? []) ctx2.rules.add(r);
-  if (tree.truncated) ctx2.truncated = true;
-  const ids2 = /* @__PURE__ */ new Map();
-  const index2 = (w) => {
-    ids2.set(w.id, w);
-    w.children.forEach(index2);
-  };
-  index2(tree.root);
-  const visit2 = (w, owner, st, isRoot) => {
-    w.owner = owner;
-    w.looks = { [st]: lookOf(w, isRoot) };
-    if (w.motion) ctx2.keyframes.add(w.motion.keyframes);
-    const node2 = nodeOf(doc2, w.id);
-    note(ctx2, w, interactionsOf(doc2.nodes[realId(w.id)]), owner, st, ids2);
-    const at3 = expand.get(w);
-    const inst = node2?.type === "INSTANCE" ? node2 : void 0;
-    const states = inst && at3 && ctx2.depth < 4 ? variantStates(doc2, inst.mainComponentId) : [];
-    if (inst && at3 && states.length > 1 && w.id !== variantOf2) {
-      const m = { id: `m${ctx2.machines.length}`, initial: inst.mainComponentId, states: states.map((s) => ({ id: s, name: stateName(doc2, s) })) };
-      ctx2.machines.push(m);
-      w.machine = m;
-      const perState = [];
-      for (const s of states) {
-        let kids;
-        if (s === inst.mainComponentId) {
-          kids = w.children;
-          kids.forEach((c2) => visit2(c2, m.id, s, false));
-        } else {
-          const shown2 = { ...doc2, nodes: { ...doc2.nodes, [inst.id]: { ...inst, mainComponentId: s } } };
-          ctx2.depth++;
-          try {
-            kids = buildState(ctx2, shown2, inst.id, m.id, s, at3, inst.id).children;
-          } finally {
-            ctx2.depth--;
-          }
-        }
-        note(ctx2, w, interactionsOf(doc2.nodes[s]), m.id, s, ids2, m.id);
-        perState.push([s, kids]);
-      }
-      w.children = mergeChildren(perState, m.id, m.states.map((s) => s.id), ctx2);
-    } else if (w.id === variantOf2) {
-      w.children.forEach((c2) => visit2(c2, owner, st, false));
-    } else {
-      if (inst) note(ctx2, w, interactionsOf(doc2.nodes[inst.mainComponentId]), owner, st, ids2);
-      w.children.forEach((c2) => visit2(c2, owner, st, false));
-    }
-  };
-  visit2(tree.root, machine, state, !start2);
-  return tree.root;
-}
-function note(ctx2, w, list2, machine, state, ids2, hostMachine) {
-  if (!list2.length) return;
-  const at3 = ctx2.pending.get(w) ?? [];
-  for (const ix of list2) at3.push({ machine, state, ix, hostMachine: hostMachine ?? (machine !== FLOW ? machine : void 0), ids: ids2 });
-  ctx2.pending.set(w, at3);
-}
-function lookOf(w, isRoot) {
-  return {
-    style: { ...placementStyle(w, isRoot), ...w.style, ...w.motion?.style ?? {} },
-    ...w.text ? { text: w.text.characters } : {},
-    ...w.tf ? { tf: w.tf } : {}
-  };
-}
-function keyed(kids) {
-  const seen = /* @__PURE__ */ new Map();
-  return kids.map((k2) => {
-    const base = `${k2.name}\0${k2.type}`;
-    const i2 = seen.get(base) ?? 0;
-    seen.set(base, i2 + 1);
-    return [`${base}\0${i2}`, k2];
-  });
-}
-function mergeChildren(perState, machine, states, ctx2) {
-  const order2 = [];
-  const groups = /* @__PURE__ */ new Map();
-  for (const [state, kids] of perState) {
-    let after = -1;
-    for (const [k2, node2] of keyed(kids)) {
-      let at3 = order2.indexOf(k2);
-      if (at3 < 0) {
-        order2.splice(after + 1, 0, k2);
-        at3 = after + 1;
-      }
-      after = at3;
-      (groups.get(k2) ?? groups.set(k2, []).get(k2)).push([state, node2]);
-    }
-  }
-  return order2.map((k2) => mergeNode(groups.get(k2), machine, states, ctx2));
-}
-function mergeNode(items, machine, states, ctx2) {
-  const [, first2] = items[0];
-  if (first2.owner !== machine) {
-    for (const [, w] of items.slice(1)) alias(ctx2, w, first2);
-    return first2;
-  }
-  const looks = {};
-  for (const s of states) looks[s] = null;
-  for (const [s, w] of items) looks[s] = w.looks?.[s] ?? null;
-  const merged = { ...first2, looks };
-  const pend = items.flatMap(([, w]) => ctx2.pending.get(w) ?? []);
-  if (pend.length) ctx2.pending.set(merged, pend);
-  for (const [, w] of items) if (w !== merged) alias(ctx2, w, merged);
-  if (first2.machine) {
-    for (const [, w] of items) if (w.machine && w.machine !== first2.machine) ctx2.renamed.set(w.machine.id, first2.machine.id);
-  }
-  merged.children = first2.machine ? first2.children : mergeChildren(items.map(([s, w]) => [s, w.children]), machine, states, ctx2);
-  return merged;
-}
-function alias(ctx2, from2, to) {
-  const a = ctx2.alias ??= /* @__PURE__ */ new Map();
-  a.set(from2, to);
-}
-function mergedOf(ctx2, w) {
-  const a = ctx2.alias;
-  let cur = w;
-  for (let i2 = 0; i2 < 16 && a?.has(cur); i2++) cur = a.get(cur);
-  return cur;
-}
-function actionOf(ctx2, p2) {
-  const a = p2.ix.action;
-  const glide2 = glideOf2(a.transition);
-  const hold = p2.ix.trigger === "ON_HOVER" || p2.ix.trigger === "ON_PRESS";
-  switch (a.navigationType) {
-    case "NAVIGATE":
-      return a.destinationId && ctx2.screens.has(a.destinationId) ? { kind: "go", machine: FLOW, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
-    case "BACK":
-      return ctx2.screens.size > 1 ? { kind: "back", machine: FLOW } : null;
-    case "CHANGE_TO":
-      return p2.hostMachine && a.destinationId ? { kind: "go", machine: p2.hostMachine, to: a.destinationId, ...glide2, ...hold ? { hold } : {} } : null;
-    case "ORBIT_3D": {
-      const o = a.orbit ?? {};
-      const uidOf = (id3) => {
-        const w = id3 ? p2.ids.get(id3) : void 0;
-        return w ? mergedOf(ctx2, w).uid : void 0;
-      };
-      const uid2 = uidOf(a.destinationId);
-      const tiltUid = uidOf(o.tiltLayerId) ?? uid2;
-      return uid2 === void 0 || tiltUid === void 0 ? null : { kind: "orbit", target: uid2, tiltTarget: tiltUid, degreesPerPx: o.degreesPerPx ?? 0.4, tilt: !!o.tilt, tiltRange: o.tiltRange ?? [-30, 30] };
-    }
-    default:
-      return null;
-  }
-}
-function buildWebTree(doc2, nodeId2, opts = {}) {
-  const tree = buildTree(doc2, nodeId2, opts);
-  const machine = opts.static || opts.stateMachine === false ? null : webStateMachine(doc2, nodeId2);
-  return machine ? { ...tree, stateMachine: machine } : tree;
-}
-function buildTree(doc2, nodeId2, opts = {}) {
-  if (opts.static || opts.target === "site") return buildPlainTree(doc2, nodeId2, opts);
-  const screens = flowScreens(doc2, nodeId2);
-  const anything = screens.length > 1 || [...subtreeIds(doc2, nodeId2)].some((id3) => interactionsOf(doc2.nodes[id3]).some((ix) => ix.action.navigationType === "CHANGE_TO" || ix.action.navigationType === "ORBIT_3D"));
-  if (!anything) return buildPlainTree(doc2, nodeId2, opts);
-  const flow = { id: FLOW, initial: nodeId2, states: screens.map((s) => ({ id: s, name: doc2.nodes[s]?.name ?? s })) };
-  const ctx2 = { doc: doc2, opts, screens: new Set(screens), machines: [flow], keyframes: /* @__PURE__ */ new Set(), rules: /* @__PURE__ */ new Set(), pending: /* @__PURE__ */ new Map(), depth: 0, renamed: /* @__PURE__ */ new Map() };
-  const roots = screens.map((s) => [s, buildState(ctx2, doc2, s, FLOW, s)]);
-  const truncated = !!ctx2.truncated;
-  const root2 = mergeNode(roots, FLOW, screens, ctx2);
-  let uid2 = 0;
-  const number4 = (w) => {
-    w.uid = uid2++;
-    w.children.forEach(number4);
-  };
-  number4(root2);
-  const place3 = (w) => {
-    const pend = ctx2.pending.get(w);
-    if (pend) {
-      const seen = /* @__PURE__ */ new Set();
-      const on = [];
-      for (const raw of pend) {
-        const p2 = { ...raw, machine: ctx2.renamed.get(raw.machine) ?? raw.machine, ...raw.hostMachine ? { hostMachine: ctx2.renamed.get(raw.hostMachine) ?? raw.hostMachine } : {} };
-        const trigger = TRIGGERS[p2.ix.trigger];
-        const action3 = trigger ? actionOf(ctx2, p2) : null;
-        if (!trigger || !action3) continue;
-        const ix = { machine: p2.machine, state: p2.state, trigger, ...p2.ix.triggerDelay ? { delay: p2.ix.triggerDelay } : {}, ...p2.ix.triggerKey ? { key: p2.ix.triggerKey } : {}, action: action3 };
-        const sig = JSON.stringify(ix);
-        if (!seen.has(sig)) {
-          seen.add(sig);
-          on.push(ix);
-        }
-      }
-      if (on.length) w.on = on;
-    }
-    w.children.forEach(place3);
-  };
-  place3(root2);
-  return { root: root2, truncated, ...ctx2.rules.size ? { rules: [...ctx2.rules].sort() } : {}, interactive: { machines: ctx2.machines.filter((m) => !ctx2.renamed.has(m.id)), keyframes: [...ctx2.keyframes] } };
-}
-var FLOW, interactionsOf, realId, nodeOf, stateName, TRIGGERS, EASINGS2, glideOf2;
-var init_interactive = __esm({
-  "lib/io/web/interactive.ts"() {
-    "use strict";
-    init_scene_graph();
-    init_tree();
-    init_state_machine3();
-    init_element();
-    FLOW = "flow";
-    interactionsOf = (n) => n?.interactions ?? [];
-    realId = (id3) => id3.includes("::") ? id3.slice(id3.lastIndexOf("::") + 2) : id3;
-    nodeOf = (doc2, id3) => doc2.nodes[id3] ?? (id3.includes("::") ? resolveVirtualNode2(doc2.nodes, id3) ?? void 0 : void 0);
-    stateName = (doc2, id3) => {
-      const n = doc2.nodes[id3];
-      const v = n?.variantProperties;
-      return v ? Object.values(v).join(", ") : n?.name ?? id3;
-    };
-    TRIGGERS = {
-      ON_CLICK: "click",
-      ON_HOVER: "hover",
-      ON_PRESS: "press",
-      ON_DRAG: "drag",
-      MOUSE_ENTER: "enter",
-      MOUSE_LEAVE: "leave",
-      AFTER_TIMEOUT: "timeout",
-      KEY_DOWN: "key"
-    };
-    EASINGS2 = { EASE_IN: "ease-in", EASE_OUT: "ease-out", EASE_IN_OUT: "ease-in-out", LINEAR: "linear", SPRING: "cubic-bezier(0.34, 1.56, 0.64, 1)" };
-    glideOf2 = (t3) => !t3 || t3.type === "INSTANT" || t3.type === "CUT" ? { ms: 0, easing: "linear" } : { ms: Math.max(0, Math.round(t3.duration)), easing: EASINGS2[t3.easing] ?? "ease-in-out" };
-  }
-});
-
-// lib/io/web/tree.ts
-function anchorTargets(doc2) {
-  const hit = anchorMemo.get(doc2.nodes);
-  if (hit) return hit;
-  const out = /* @__PURE__ */ new Set();
-  for (const id3 in doc2.nodes) {
-    const n = doc2.nodes[id3];
-    if (n.semantics?.link?.kind === "anchor") out.add(n.semantics.link.nodeId);
-    for (const ix of n.interactions ?? []) if (ix.action.link?.kind === "anchor" && ix.action.link.nodeId) out.add(ix.action.link.nodeId);
-  }
-  anchorMemo.set(doc2.nodes, out);
-  return out;
-}
-function prepared(node2, doc2) {
-  let n = node2;
-  if (n.id.includes("::")) n = withInstanceBox(n, doc2.nodes);
-  n = resolveNodeVariables(n, doc2.variables, doc2.variableCollections, doc2.activeVariableModes, exprData(doc2));
-  n = resolveTextNodeStyles(n, doc2.styles ?? {});
-  return n;
-}
-function layoutOf2(node2, nodes) {
-  if (!node2) return null;
-  if (node2.type === "INSTANCE") {
-    const mainId = node2.mainComponentId;
-    const main2 = mainId ? nodes[mainId] : void 0;
-    return main2 ?? null;
-  }
-  if (node2.id.includes("::")) {
-    const real = nodes[node2.id.split("::").pop()];
-    return real ?? node2;
-  }
-  return node2;
-}
-function buildPlainTree(doc2, nodeId2, opts = {}, start2, hooks = {}) {
-  const cap2 = opts.nodeCap ?? DEFAULT_NODE_CAP;
-  const first2 = doc2.nodes[nodeId2] ?? (nodeId2.includes("::") ? childLookup(doc2, nodeId2) : void 0);
-  if (!first2) throw new Error(`No node ${nodeId2}`);
-  let emitted = 0;
-  let truncated = false;
-  let folds = 0;
-  const tokens = opts.target === "site" && Object.keys(doc2.variables ?? {}).length ? siteTokens(doc2) : null;
-  const anchored = anchorTargets(doc2);
-  const pageItem = () => {
-    const c2 = opts.item && doc2.collections?.[opts.item.collectionId];
-    const r = opts.item && doc2.records?.[opts.item.recordId];
-    return c2 && r ? { collection: c2, record: r, suffix: "" } : null;
-  };
-  let item = pageItem();
-  const scopeOf2 = (it) => itemScope(it.collection, it.record, withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2));
-  const itemised = (node2, raw, it) => itemNode(node2, raw, it.collection, it.record, scopeOf2(it));
-  const itemLink = (link2, it) => {
-    const filled2 = it && link2.kind === "url" ? { ...link2, url: itemText(link2.url, it.collection, it.record) } : it && (link2.kind === "email" || link2.kind === "tel") ? { ...link2, value: itemText(link2.value, it.collection, it.record) } : link2;
-    if (filled2.kind === "screen") {
-      const dest = doc2.nodes[filled2.frameId];
-      const base = opts.routes?.[filled2.frameId];
-      const of = dest?.route?.collectionId;
-      if (of && base !== void 0) {
-        const slugs = recordSlugs(doc2, of);
-        const rec = it?.collection.id === of ? it.record.id : slugs.keys().next().value;
-        const slug3 = rec ? slugs.get(rec) : void 0;
-        return slug3 ? { link: filled2, href: `${base === "/" ? "" : base}/${slug3}`, screen: `${filled2.frameId}~${rec}` } : { link: filled2, href: null };
-      }
-      return { link: filled2, href: base ?? null, screen: filled2.frameId };
-    }
-    return { link: filled2, href: hrefOf(filled2, doc2.nodes, opts.routes) };
-  };
-  const fields = /* @__PURE__ */ new Map();
-  const styleOpts = { fullImageUrl: opts.fullImageUrls ?? opts.target === "site" };
-  const stylesOf = (n) => styleMapFor(n, doc2.styles, styleOpts);
-  let motion = null;
-  const timeline = !opts.static && !start2 && first2.type === "FRAME" ? frameWebMotion(doc2, first2.id, (n) => stylesOf(prepared(n, doc2))) : null;
-  const build3 = (raw, parent, in3D2, fold) => {
-    if (emitted >= cap2) {
-      truncated = true;
-      return null;
-    }
-    emitted++;
-    const node2 = item ? itemised(prepared(raw, doc2), raw, item) : prepared(raw, doc2);
-    const waits = node2.visible === false && parent !== null;
-    if (waits && !(opts.target === "site" && followsVisibility(raw))) return null;
-    const exp = expressibility(node2, doc2.styles);
-    const f2 = layoutOf2(node2, doc2.nodes) ?? node2;
-    const style = stylesOf(node2);
-    if (f2 !== node2 && !style.display) Object.assign(style, flexDeclarations(f2));
-    const through = in3D2 && passesThrough(raw, doc2.nodes);
-    const own2 = typeof node2.opacity === "number" ? node2.opacity : 1;
-    if (through) {
-      style["transform-style"] = "preserve-3d";
-      delete style.opacity;
-      style[foldVar(fold + 1)] = fold ? `calc(var(${foldVar(fold)}) * ${round3(own2)})` : String(round3(own2));
-      folds = Math.max(folds, fold + 1);
-    } else if (fold) style.opacity = own2 === 1 ? `var(${foldVar(fold)})` : `calc(var(${foldVar(fold)}) * ${round3(own2)})`;
-    if (own2 === 0) style["pointer-events"] = "none";
-    const web = {
-      id: item?.suffix ? `${node2.id}${item.suffix}` : node2.id,
-      name: node2.name || node2.type,
-      type: node2.type,
-      x: Math.round(node2.x),
-      y: Math.round(node2.y),
-      width: Math.round(node2.width),
-      height: Math.round(node2.height),
-      // Absolutely-positioned auto-layout children are taken out of the flow, exactly as the canvas does.
-      positioning: isFlex(layoutOf2(parent, doc2.nodes)) && node2.layoutPositioning !== "ABSOLUTE" ? "flow" : "absolute",
-      style,
-      children: []
-    };
-    if (tokens) Object.assign(style, tokenStyle(raw, style, tokens));
-    if (opts.target === "site") {
-      const lay = siteLayout(node2, parent, layoutOf2(parent, doc2.nodes));
-      for (const [k2, v] of Object.entries(lay.style)) {
-        if (v === null) delete style[k2];
-        else style[k2] = v;
-      }
-      if (laysOut(f2) || f2.overflowScrolling) Object.assign(style, containerStyle(f2));
-      if (node2.type === "TEXT") {
-        if (style["white-space"] === "pre") {
-          style["white-space"] = "pre-wrap";
-          style.width = "fit-content";
-        }
-        if (style["max-width"] === void 0) style["max-width"] = "100%";
-        if (style.height && style.height !== "auto") {
-          style["min-height"] = style.height;
-          delete style.height;
-        }
-      }
-      if (lay.place && (parent !== null || !start2?.parent)) web.place = lay.place;
-    }
-    if (waits) web.hidden = true;
-    const sem = node2.semantics;
-    if (sem) {
-      if (sem.tag && sem.tag !== "div") web.tag = sem.tag;
-      const attrs = {};
-      if (sem.label) attrs["aria-label"] = sem.label;
-      if (sem.hidden) attrs["aria-hidden"] = "true";
-      if (Object.keys(attrs).length) web.attrs = attrs;
-      const to = sem.link ? itemLink(sem.link, item) : null;
-      if (to?.href) web.link = { href: to.href, ...opensNewTab(to.link) ? { newTab: true } : {}, ...to.screen ? { screen: to.screen } : {} };
-    }
-    const control = node2.control;
-    if (control) {
-      const named = control.name ? { name: control.name } : {};
-      if (control.kind === "FORM") web.tag = "form";
-      else if (control.kind === "BUTTON") {
-        web.tag = "button";
-        web.attrs = { ...web.attrs, type: control.buttonType ?? "submit", ...named, ...control.name && control.value !== void 0 ? { value: item && hasItemToken(control.value) ? itemText(control.value, item.collection, item.record) : control.value } : {} };
-      } else if (control.kind === "CHECKBOX" || control.kind === "RADIO") {
-        web.check = { attrs: { type: control.kind === "RADIO" ? "radio" : "checkbox", ...named, ...control.value !== void 0 ? { value: control.value } : {}, ...control.checked ? { checked: "" } : {}, ...control.required ? { required: "" } : {} }, ...control.variableId ? { variable: control.variableId } : {} };
-      } else fields.set(fieldPart(doc2.nodes, raw.id) ?? raw.id, control);
-    }
-    const control0 = fields.get(raw.id);
-    const field = control0 && item && control0.value !== void 0 && hasItemToken(control0.value) ? { ...control0, value: itemText(control0.value, item.collection, item.record) } : control0;
-    if (field) {
-      const tag = field.kind === "TEXTAREA" ? "textarea" : field.kind === "SELECT" ? "select" : "input";
-      const words = node2.characters;
-      web.input = {
-        tag,
-        attrs: {
-          ...tag === "input" ? { type: field.inputType ?? "text" } : {},
-          ...field.name ? { name: field.name } : {},
-          ...tag !== "select" && (field.placeholder ?? words) ? { placeholder: field.placeholder ?? words } : {},
-          ...field.required ? { required: "" } : {},
-          ...tag === "input" && field.value !== void 0 ? { value: field.value } : {},
-          "aria-label": node2.semantics?.label ?? field.placeholder ?? field.name ?? web.name
-        },
-        ...tag === "select" ? { options: field.options ?? [] } : {},
-        ...tag !== "input" && field.value !== void 0 ? { value: field.value } : {},
-        ...field.variableId ? { variable: field.variableId } : {}
-      };
-    }
-    if (sem?.anchor || anchored.has(node2.id)) web.attrs = { ...web.attrs, id: anchorOf(node2) };
-    if (through) web.preserve3d = true;
-    web.tf = transformParts(node2);
-    if (typeof node2.altText === "string") web.alt = node2.altText;
-    if (parent === null) web.positioning = start2?.parent ? web.positioning : "flow";
-    if (f2.layoutMode === "HORIZONTAL" || f2.layoutMode === "VERTICAL") {
-      web.layout = {
-        direction: f2.layoutMode === "HORIZONTAL" ? "row" : "column",
-        gap: f2.itemSpacing ?? 0,
-        justify: JUSTIFY[f2.primaryAxisAlignItems ?? "MIN"],
-        align: ALIGN2[f2.counterAxisAlignItems ?? "MIN"],
-        padding: f2.padding ?? { top: 0, right: 0, bottom: 0, left: 0 }
-      };
-    }
-    if (node2.type === "TEXT") {
-      const t3 = node2;
-      const solid4 = (t3.fills ?? []).find((p2) => p2.visible !== false && p2.type === "SOLID" && p2.color);
-      web.text = {
-        characters: t3.characters ?? "",
-        align: t3.textAlign,
-        fontFamily: t3.fontFamily,
-        fontSize: t3.fontSize,
-        fontWeight: t3.fontWeight,
-        italic: t3.fontStyle === "italic",
-        ...solid4?.color ? { color: toHex(solid4.color) } : {},
-        ...t3.letterSpacing ? { letterSpacing: t3.letterSpacing } : {},
-        ...t3.lineHeight !== "AUTO" ? { lineHeight: t3.lineHeight } : {}
-      };
-      const runs = textRuns(t3);
-      if (runs) web.runs = runs;
-    }
-    const tl = timeline?.get(node2.id);
-    const mo = tl ?? motion?.children.get(node2.id);
-    if (mo) web.motion = { style: animationStyle(mo, tl ? "load" : motion.trigger), keyframes: keyframesCSS(mo) };
-    const ext = getNativeExtension(raw.type);
-    if (ext?.toWeb) {
-      const said = ext.toWeb(node2, { escape: escapeHTML, color: (c2) => toRgba({ ...c2, a: c2.a ?? 1 }) });
-      if (said.tag) web.tag = said.tag;
-      Object.assign(style, said.style);
-      web.html = said.html;
-      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-      return web;
-    }
-    const code = opts.target === "site" ? codeOf(doc2.nodes, raw) : null;
-    if (code && doc2.codeModules?.[code.moduleId]) {
-      for (const k2 of PAINTED) delete style[k2];
-      web.code = { module: code.moduleId, ...code.exportName ? { export: code.exportName } : {}, props: codeProps(doc2.nodes, node2) };
-      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-      return web;
-    }
-    if (!exp.css) {
-      for (const k2 of PAINTED) delete style[k2];
-      web.asset = { kind: opts.assetKind ?? (exp.needsRaster ? "png" : "svg"), reason: exp.reason, ...item?.suffix ? { of: node2.id } : {} };
-      if (opts.target === "site" && renderMode(node2, { styles: doc2.styles, live: isLive(doc2.nodes, raw.id) }) === "island") web.island = true;
-      hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-      return web;
-    }
-    const lost = capability(node2, "css", doc2.styles).dropped.find((f3) => f3.startsWith("paint:"));
-    if (lost && !node2.id.includes("::")) {
-      const site = opts.target === "site";
-      style.isolation = "isolate";
-      web.children.push({
-        id: `${node2.id}/backdrop${item?.suffix ?? ""}`,
-        name: `${web.name} fill`,
-        type: "BACKDROP",
-        x: 0,
-        y: 0,
-        width: web.width,
-        height: web.height,
-        positioning: "absolute",
-        ...site ? { place: { position: "absolute", inset: "0" } } : {},
-        style: { ...site ? {} : { width: `${web.width}px`, height: `${web.height}px` }, "border-radius": "inherit", overflow: "hidden", "z-index": "-1", "pointer-events": "none" },
-        alt: "",
-        asset: { kind: "png", reason: featureName(lost), of: node2.id, self: true },
-        ...site && movesItself(raw) ? { island: true } : {},
-        children: []
-      });
-    }
-    const outer = motion;
-    if (!motion && node2.type === "INSTANCE" && !opts.static) {
-      motion = instanceWebMotion(doc2, node2, (n) => stylesOf(prepared(n, doc2)));
-      if (motion && (motion.trigger !== "load" || opts.target === "site")) web.motionTrigger = motion.trigger;
-    }
-    try {
-      if (opts.includeChildren !== false) {
-        const kids3D = in3D2 ? through : is3DContext(raw) && !raw.id.includes("::");
-        const kidFold = through ? fold + 1 : 0;
-        const repeat = raw.repeat;
-        const collection = repeat && doc2.collections?.[repeat.collectionId];
-        if (repeat && collection && opts.target === "site") {
-          const outerItem = item;
-          const under = outerItem ? scopeOf2(outerItem) : withData(variablesScope(doc2.variables, doc2.variableCollections, doc2.activeVariableModes), doc2);
-          try {
-            for (const record2 of repeatRecords(doc2, repeat, under)) {
-              item = { collection, record: record2, suffix: `${outerItem?.suffix ?? ""}~${record2.id}` };
-              for (const child of childrenOf(node2, doc2.nodes)) {
-                const built = build3(child, node2, kids3D, kidFold);
-                if (built) web.children.push(built);
-              }
-            }
-            if (collection.perVisitor && !outerItem) {
-              item = { collection, record: templateRecord(collection), suffix: `~${ITEM_RECORD}` };
-              const template2 = [];
-              for (const child of childrenOf(node2, doc2.nodes)) {
-                const built = build3(child, node2, kids3D, kidFold);
-                if (built) template2.push(built);
-              }
-              const sortField = repeat.sort && collection.fields.find((f3) => f3.id === repeat.sort.fieldId);
-              web.repeat = {
-                collectionId: collection.id,
-                template: template2,
-                ...repeat.filter?.trim() ? { filter: repeat.filter } : {},
-                ...sortField ? { sort: { key: fieldKey(sortField.name), dir: repeat.sort.dir } } : {},
-                ...repeat.offset ? { offset: repeat.offset } : {},
-                ...repeat.limit ? { limit: repeat.limit } : {}
-              };
-            }
-          } finally {
-            item = outerItem;
-          }
-        } else for (const child of childrenOf(node2, doc2.nodes)) {
-          const built = build3(child, node2, kids3D, kidFold);
-          if (built) web.children.push(built);
-        }
-      }
-    } finally {
-      motion = outer;
-    }
-    if (web.children.some((c2) => c2.positioning === "absolute")) {
-      for (const c2 of web.children) if (c2.positioning === "flow") c2.layered = true;
-    }
-    hooks.built?.(web, node2, { parent, in3D: in3D2, fold });
-    return web;
-  };
-  const root2 = build3(first2, start2?.parent ?? null, start2?.in3D ?? false, start2?.fold ?? 0);
-  if (!root2) throw new Error("Node cap of 0");
-  return { root: root2, truncated, ...folds ? { rules: foldRules(folds) } : {}, ...tokens?.vars.length ? { tokens } : {} };
-}
-function childLookup(doc2, id3) {
-  const at3 = id3.lastIndexOf("::");
-  const host = at3 > 0 ? id3.slice(0, at3) : "";
-  const hostNode = doc2.nodes[host] ?? (host.includes("::") ? childLookup(doc2, host) : void 0);
-  return hostNode ? childrenOf(hostNode, doc2.nodes).find((c2) => c2.id === id3) : void 0;
-}
-function flatten2(node2, out = []) {
-  out.push(node2);
-  for (const c2 of node2.children) flatten2(c2, out);
-  return out;
-}
-var DEFAULT_NODE_CAP, PAINTED, anchorMemo, followsVisibility, isFlex, round3, foldVar, foldRules;
-var init_tree = __esm({
-  "lib/io/web/tree.ts"() {
-    "use strict";
-    init_instance_layout();
-    init_text_styles();
-    init_variables();
-    init_scene3d();
-    init_semantics();
-    init_collections();
-    init_props();
-    init_native_registry();
-    init_controls();
-    init_expressions2();
-    init_children();
-    init_css();
-    init_capability();
-    init_expressible();
-    init_motion();
-    init_element();
-    init_paint2();
-    init_responsive();
-    init_richtext();
-    init_tokens2();
-    init_timeline();
-    init_interactive();
-    DEFAULT_NODE_CAP = 120;
-    PAINTED = ["background", "border", "border-style", "border-color", "border-width", "outline", "border-radius", "box-shadow", "box-sizing", "filter", "backdrop-filter"];
-    anchorMemo = /* @__PURE__ */ new WeakMap();
-    followsVisibility = (n) => !!n.boundVariables?.visible || !!n.boundExpressions?.visible || // Hidden in the design and shown at a breakpoint: on the page, for the media query that shows it.
-    Object.values(n.responsive ?? {}).some((o) => o.visible === true);
-    isFlex = (f2) => f2?.layoutMode === "HORIZONTAL" || f2?.layoutMode === "VERTICAL";
-    round3 = (v) => Math.round(v * 1e3) / 1e3;
-    foldVar = (depth2) => `--pc-f${depth2}`;
-    foldRules = (depth2) => Array.from({ length: depth2 }, (_, i2) => `@property ${foldVar(i2 + 1)} { syntax: '<number>'; inherits: true; initial-value: 1; }`);
-  }
-});
-
 // lib/io/web/assets.ts
 async function resolveWebAssets(tree, resolvers) {
   const pending7 = (Array.isArray(tree) ? tree : flatten2(tree.root)).filter((n) => !!n.asset);
@@ -338316,285 +338885,6 @@ var init_asset_files = __esm({
   }
 });
 
-// lib/document/routes.ts
-function screensOf(doc2, pageId2) {
-  return (doc2.nodes[pageId2]?.childIds ?? []).map((id3) => doc2.nodes[id3]).filter((f2) => f2?.type === "FRAME" && f2.visible !== false && !f2.print?.isMaster);
-}
-function cleanPath(raw) {
-  const parts = raw.trim().split("/").map(slug2).filter(Boolean);
-  return `/${parts.join("/")}`;
-}
-function routesOf(screens) {
-  const taken = /* @__PURE__ */ new Set();
-  const own2 = /* @__PURE__ */ new Map();
-  for (const s of screens) {
-    const path = s.route?.path ? cleanPath(s.route.path) : null;
-    if (path && !taken.has(path)) {
-      taken.add(path);
-      own2.set(s.id, path);
-    }
-  }
-  const rest = screens.filter((s) => !own2.has(s.id) && !s.route?.notFound);
-  const home = taken.has("/") ? void 0 : rest.find((s) => s.isFlowStartingPoint) ?? rest[0];
-  if (home) taken.add("/");
-  const out = /* @__PURE__ */ new Map();
-  for (const s of screens) {
-    if (own2.has(s.id)) {
-      out.set(s.id, own2.get(s.id));
-      continue;
-    }
-    if (s === home) {
-      out.set(s.id, "/");
-      continue;
-    }
-    const base = s.route?.notFound ? "/404" : `/${slug2(s.name) || "page"}`;
-    let route2 = base;
-    for (let n = 2; taken.has(route2); n++) route2 = `${base}-${n}`;
-    taken.add(route2);
-    out.set(s.id, route2);
-  }
-  return out;
-}
-var slug2;
-var init_routes = __esm({
-  "lib/document/routes.ts"() {
-    slug2 = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  }
-});
-
-// lib/island/slice.ts
-function sliceDocument(doc2, nodeId2, opts = {}) {
-  const nodes = {};
-  const take = (id3) => {
-    const n = doc2.nodes[id3];
-    if (!n || nodes[id3]) return;
-    nodes[id3] = n;
-    for (const c2 of n.childIds ?? []) take(c2);
-    const main2 = n.mainComponentId;
-    if (main2) {
-      take(main2);
-      const set3 = doc2.nodes[main2]?.parentId;
-      if (set3 && doc2.nodes[set3]?.type === "COMPONENT_SET") take(set3);
-    }
-  };
-  if (opts.self && doc2.nodes[nodeId2]) nodes[nodeId2] = { ...doc2.nodes[nodeId2], childIds: [] };
-  else take(nodeId2);
-  let frameId = null;
-  let pageId2 = null;
-  let rootId = nodeId2;
-  for (let child = nodeId2, cur = doc2.nodes[nodeId2]?.parentId; cur; child = cur, cur = doc2.nodes[cur]?.parentId ?? null) {
-    const p2 = doc2.nodes[cur];
-    if (!p2) break;
-    if (p2.type === "PAGE") {
-      pageId2 = cur;
-      frameId = doc2.nodes[child]?.type === "FRAME" ? child : frameId;
-    }
-    if (!nodes[cur]) nodes[cur] = p2.type === "PAGE" ? { ...p2, childIds: [child] } : { ...p2, childIds: [child], fills: [], strokes: [], effects: [], shadows: void 0, blurs: void 0, clipsContent: false, layoutMode: "NONE" };
-    if (p2.type !== "PAGE") rootId = cur;
-  }
-  if (!frameId && doc2.nodes[nodeId2]?.type === "FRAME" && doc2.nodes[doc2.nodes[nodeId2].parentId ?? ""]?.type === "PAGE") frameId = nodeId2;
-  return {
-    nodeId: nodeId2,
-    frameId,
-    rootId,
-    ...opts.self ? { fit: "fill" } : {},
-    document: {
-      id: doc2.id,
-      name: doc2.name,
-      pages: pageId2 ? [pageId2] : [],
-      nodes,
-      styles: doc2.styles,
-      variables: doc2.variables,
-      variableCollections: doc2.variableCollections,
-      activeVariableModes: doc2.activeVariableModes,
-      settings: doc2.settings
-    }
-  };
-}
-var init_slice = __esm({
-  "lib/island/slice.ts"() {
-    "use strict";
-  }
-});
-
-// lib/io/web/site.ts
-function light(node2) {
-  const out = {};
-  for (const k2 in node2) if (!HEAVY.has(k2)) out[k2] = node2[k2];
-  return out;
-}
-function programDocument(doc2, pageId2, screens) {
-  const nodes = {};
-  const take = (id3) => {
-    const n = doc2.nodes[id3];
-    if (!n || nodes[id3]) return;
-    nodes[id3] = light(n);
-    for (const c2 of n.childIds ?? []) take(c2);
-    const main2 = n.mainComponentId;
-    if (main2) {
-      take(main2);
-      const set3 = doc2.nodes[main2]?.parentId;
-      if (set3 && doc2.nodes[set3]?.type === "COMPONENT_SET") take(set3);
-    }
-  };
-  const page = doc2.nodes[pageId2];
-  if (page) nodes[pageId2] = { ...light(page), childIds: screens.map((s) => s.id) };
-  for (const s of screens) take(s.id);
-  return {
-    id: doc2.id,
-    name: doc2.name,
-    nodes,
-    pages: [pageId2],
-    styles: {},
-    variables: doc2.variables,
-    variableCollections: doc2.variableCollections,
-    activeVariableModes: doc2.activeVariableModes,
-    settings: doc2.settings,
-    // What a layer that follows a record's field is drawn from, while the page runs.
-    ...doc2.collections && Object.keys(doc2.collections).length ? { collections: doc2.collections, records: doc2.records } : {}
-  };
-}
-function withVariants(doc2, root2, opts, depth2 = 3) {
-  if (depth2 <= 0) return;
-  for (const w of flatten2(root2)) {
-    const inst = w.type === "INSTANCE" && !w.id.includes("::") ? doc2.nodes[w.id] : void 0;
-    const main2 = inst?.mainComponentId;
-    if (!inst || !main2 || w.variants) continue;
-    const reach = variantStates(doc2, main2);
-    if (reach.length < 2) continue;
-    w.variant = main2;
-    w.variants = {};
-    const parent = inst.parentId ? doc2.nodes[inst.parentId] ?? null : null;
-    for (const v of reach.slice(1)) {
-      const as2 = { ...doc2, nodes: { ...doc2.nodes, [inst.id]: { ...inst, mainComponentId: v } } };
-      const built = buildPlainTree(as2, inst.id, opts, { parent, in3D: false, fold: 0 }).root;
-      built.variant = v;
-      withVariants(as2, built, opts, depth2 - 1);
-      w.variants[v] = built;
-    }
-  }
-}
-function everyNode(root2, out = []) {
-  for (const n of flatten2(root2)) {
-    out.push(n);
-    for (const v of Object.values(n.variants ?? {})) everyNode(v, out);
-  }
-  return out;
-}
-function mediaRules(doc2, screenId, base, opts) {
-  const rules = [];
-  let above = new Map(flatten2(base).map((n) => [n.id, declared(n, n === base)]));
-  for (const bp of breakpointsOf(doc2).slice(1)) {
-    const view2 = breakpointDocument(doc2, bp.id);
-    const root2 = buildPlainTree(view2, screenId, opts).root;
-    const here = new Map(flatten2(root2).map((n) => [n.id, declared(n, n === root2)]));
-    const blocks = [];
-    for (const [id3, was] of above) {
-      const now2 = here.get(id3);
-      const diff = {};
-      if (!now2) {
-        if (was.display !== "none") diff.display = "none";
-      } else {
-        for (const k2 in was) if (!(k2 in now2)) diff[k2] = "revert";
-        for (const k2 in now2) if (now2[k2] !== was[k2]) diff[k2] = now2[k2];
-      }
-      if (Object.keys(diff).length) blocks.push(`  [data-pc-id="${id3}"] {
-${styleMapToCSSText(Object.fromEntries(Object.entries(diff).map(([k2, v]) => [k2, `${v} !important`])), "    ")}
-  }`);
-    }
-    if (blocks.length) rules.push(`@media (max-width: ${bp.maxWidth}px) {
-${blocks.join("\n")}
-}`);
-    above = new Map([...above].map(([id3, was]) => [id3, here.get(id3) ?? { ...was, display: "none" }]));
-  }
-  return rules;
-}
-function sitePages(doc2, pageId2) {
-  const screens = screensOf(doc2, pageId2);
-  const routes = routesOf(screens);
-  return screens.flatMap((s) => {
-    const base = routes.get(s.id);
-    const collection = s.route?.collectionId ? doc2.collections?.[s.route.collectionId] : void 0;
-    if (!collection) return [{ id: s.id, frame: s, route: base, title: s.route?.title || s.name }];
-    const slugs = recordSlugs(doc2, collection.id);
-    return recordsIn(doc2, collection.id).map((record2) => ({
-      id: `${s.id}~${record2.id}`,
-      frame: s,
-      record: record2,
-      collection,
-      route: `${base === "/" ? "" : base}/${slugs.get(record2.id)}`,
-      title: itemText(s.route?.title || s.name, collection, record2)
-    }));
-  });
-}
-function buildWebSite(doc2, opts = {}) {
-  const pageId2 = opts.pageId ?? doc2.pages[0];
-  const screens = screensOf(doc2, pageId2);
-  const routes = routesOf(screens);
-  const build3 = { target: "site", nodeCap: opts.nodeCap ?? 2e4, static: opts.static, routes: Object.fromEntries(routes) };
-  const laid = /* @__PURE__ */ new Set();
-  const pages2 = sitePages(doc2, pageId2).map((p2) => {
-    const s = p2.frame;
-    const opts2 = p2.record ? { ...build3, item: { collectionId: p2.collection.id, recordId: p2.record.id } } : build3;
-    const tree = buildPlainTree(doc2, s.id, opts2);
-    const media2 = laid.has(s.id) ? [] : mediaRules(doc2, s.id, tree.root, opts2);
-    laid.add(s.id);
-    withVariants(doc2, tree.root, opts2);
-    const description = s.route?.description ? p2.record ? itemText(s.route.description, p2.collection, p2.record) : s.route.description : void 0;
-    const moves3 = !opts2.static && hasFrameMotion(doc2.nodes, s.id);
-    const length2 = moves3 ? timelineDuration(doc2.nodes, s.id) : 0;
-    const machine = moves3 ? webStateMachine(doc2, s.id) : null;
-    return {
-      ...machine ? { machine } : {},
-      ...length2 > 0 ? { timeline: { duration: length2, stops: stopsOf(frameTimeline(doc2.nodes, s.id).markers, [0, length2]), loops: frameRunsOn(doc2.nodes, s.id) } } : {},
-      id: p2.id,
-      route: p2.route,
-      title: p2.title,
-      ...p2.record ? { screen: s.id, record: p2.record.id } : {},
-      ...description ? { description } : {},
-      ...s.route?.notFound ? { notFound: true } : {},
-      ...s.route?.access ? { access: s.route.access } : {},
-      tree,
-      ...media2.length ? { media: media2 } : {}
-    };
-  });
-  const islandNodes = new Map(pages2.flatMap((p2) => everyNode(p2.tree.root).filter((n) => n.island && !n.id.includes("::"))).map((n) => [n.id, n]));
-  const fonts = /* @__PURE__ */ new Map();
-  for (const p2 of pages2) for (const [family, weights] of fontFamilies(p2.tree)) for (const w of weights) (fonts.get(family) ?? fonts.set(family, /* @__PURE__ */ new Set()).get(family)).add(w);
-  const home = pages2.find((p2) => p2.route === "/" && !p2.screen);
-  return {
-    name: doc2.name,
-    pages: pages2,
-    home: home?.id ?? null,
-    tokens: pages2.find((p2) => p2.tree.tokens)?.tree.tokens,
-    fonts: [...fonts].sort(([a], [b]) => a.localeCompare(b)).map(([family, w]) => ({ family, weights: [...w].sort((a, b) => a - b) })),
-    assets: pages2.flatMap((p2) => everyNode(p2.tree.root).filter((n) => n.asset).map((n) => n.id)),
-    program: { document: programDocument(doc2, pageId2, screens), start: home?.id ?? null },
-    ...islandNodes.size ? { islands: Object.fromEntries([...islandNodes].map(([id3, n]) => [id3, sliceDocument(doc2, n.asset?.of ?? layerId(id3), { self: !!n.asset?.self })])) } : {}
-  };
-}
-var HEAVY, declared;
-var init_site2 = __esm({
-  "lib/io/web/site.ts"() {
-    "use strict";
-    init_breakpoints();
-    init_collections();
-    init_routes();
-    init_instances2();
-    init_timeline_stops();
-    init_css();
-    init_element();
-    init_fonts3();
-    init_slice();
-    init_state_machine3();
-    init_interactive();
-    init_tree();
-    init_routes();
-    HEAVY = /* @__PURE__ */ new Set(["fills", "strokes", "effects", "shadows", "blurs", "vectorPaths", "paths", "styledSegments", "paragraphs", "imageUrl", "exportSettings", "annotations", "devResources", "codeConnect", "layoutGrids", "aiPending"]);
-    declared = (n, isRoot) => ({ ...placementStyle(n, isRoot), ...n.style, ...n.hidden ? { display: "none" } : {} });
-  }
-});
-
 // lib/io/web/index.ts
 var web_exports = {};
 __export(web_exports, {
@@ -338670,7 +338960,7 @@ var init_web = __esm({
     init_asset_files();
     init_element();
     init_fonts3();
-    init_site2();
+    init_site();
     init_tokens2();
     init_naming();
     init_tree();
@@ -338796,7 +339086,7 @@ var init_host = __esm({
   "lib/preview/host.ts"() {
     "use strict";
     init_cdn();
-    init_site();
+    init_site2();
     init_snapshot_frame();
     init_web();
     init_media_store();
@@ -338878,7 +339168,8 @@ async function completeSite(doc2, pageId2) {
   const [{ previewSite: previewSite2 }, { rendererAssetResolvers: rendererAssetResolvers2 }] = await Promise.all([Promise.resolve().then(() => (init_host(), host_exports)), Promise.resolve().then(() => (init_resolvers(), resolvers_exports))]);
   return previewSite2(doc2, pageId2, rendererAssetResolvers2(doc2));
 }
-async function nextFilesOf(site, doc2, opts = {}) {
+async function nextFilesOf(full, doc2, opts = {}) {
+  const site = withoutScreenIslands(full);
   const islandScript2 = site.islands && Object.keys(site.islands).length ? await runtimeScript("island") : null;
   return [...nextProjectFiles(site, doc2, { ...opts, islandScript: islandScript2 }), ...await appAssetFiles(appAssetPaths(site), "public/")];
 }
@@ -338894,6 +339185,7 @@ var init_build2 = __esm({
     init_assets();
     init_static();
     init_next();
+    init_site();
     runtimeScript = (name2) => fetch(`/pc/${name2}.js?fresh=${Date.now()}`, { cache: "no-store" }).then((r) => r.ok ? r.text() : null).catch(() => null);
     NoSiteRuntime = class extends Error {
       constructor() {
@@ -340134,7 +340426,7 @@ var init_motion2 = __esm({
         ui: { label: "Edit composition", palette: false },
         agent: {
           name: "edit_composition",
-          description: `Change a composition's scenes: reorder a clip (move), trim what of its frame's timeline it plays (trim), set the transition INTO a clip from the one before (transition: DISSOLVE, SLIDE_*/PUSH_*/MOVE_OUT_*, CIRCLE_WIPE, IRIS, ZOOM_THROUGH, WHIP_LEFT, WHIP_RIGHT, CUT), add frames as clips, remove a clip, swap the frame a clip plays (frame), rename, or delete it. Clips stay in sequence: later clips ripple, and a transition overlaps the clip before by its duration. Sound: addAudio places a file from the media store on a lane (clips on a lane never overlap; one that would moves to the next free lane), audio moves/trims/fades/pans/mutes a clip, trimAudio drags an edge, gainKey keys its level (clip ms, linear), removeAudio drops it, splitAudio cuts it at a time, crossfade crosses two clips over with equal-power fades, onsets replaces the "onsets" markers. settings sets the stage size, frame rate, background and work area; addMarker / updateMarker / removeMarker edit its markers. Read it with get_compositions; add sound from a URL or the media store with add_audio.`
+          description: `Change a composition's scenes: reorder a clip (move), trim what of its frame's timeline it plays (trim), set the transition INTO a clip from the one before (transition: DISSOLVE, SLIDE_*/PUSH_*/MOVE_OUT_*, CIRCLE_WIPE, IRIS, ZOOM_THROUGH, WHIP_LEFT, WHIP_RIGHT, CUBE_FROM_*, CAROUSEL_FROM_LEFT/RIGHT, FLIP_HORIZONTAL/VERTICAL, SWING_OPEN/CLOSE, STACK_IN/OUT, DEPTH_PUSH/PULL, CUT), add frames as clips, remove a clip, swap the frame a clip plays (frame), rename, or delete it. Clips stay in sequence: later clips ripple, and a transition overlaps the clip before by its duration. Sound: addAudio places a file from the media store on a lane (clips on a lane never overlap; one that would moves to the next free lane), audio moves/trims/fades/pans/mutes a clip, trimAudio drags an edge, gainKey keys its level (clip ms, linear), removeAudio drops it, splitAudio cuts it at a time, crossfade crosses two clips over with equal-power fades, onsets replaces the "onsets" markers. settings sets the stage size, frame rate, background and work area; addMarker / updateMarker / removeMarker edit its markers. Read it with get_compositions; add sound from a URL or the media store with add_audio.`
         }
       },
       run: (args2, ctx2) => {
@@ -343898,7 +344190,7 @@ var init_prototype = __esm({
       triggerKey: external_exports.string().max(40).optional(),
       dragDirection: external_exports.enum(["LEFT", "RIGHT", "UP", "DOWN"]).optional()
     });
-    LIVE = ["characters", ...LIVE_VALUE_PROPS];
+    LIVE = ["characters", "imageUrl", ...LIVE_VALUE_PROPS];
     prototypeEdit = defineCommand({
       id: "prototype.edit",
       title: "Edit prototype",
@@ -344715,6 +345007,7 @@ function designFrameOf(doc2, id3) {
 }
 var init_locate = __esm({
   "lib/agent/design-script/locate.ts"() {
+    "use strict";
   }
 });
 
@@ -344953,6 +345246,7 @@ function placeDesign(doc2, built, source3, size6, name2, at3) {
 var DESIGN_NAMESPACES, DERIVED2, templateOfBuild;
 var init_build3 = __esm({
   "lib/agent/design-script/build.ts"() {
+    "use strict";
     init_hash();
     init_scene_graph();
     init_libraries();
@@ -345871,7 +346165,9 @@ Every layer call returns its id. **Name** every layer a cue, count or swap must
 - Live state: \`const yearly = k.variable('Billing', 'yearly', 'BOOLEAN', false)\`, \`k.setVariable(layer, yearly, { toggle: true })\`
   on click, \`k.bindVariable(layer, 'visible', yearly)\` to show a layer while it is true (see the pricing example).
 - Prototype links: \`k.link(fromLayer, toFrame, 'PUSH_FROM_RIGHT')\` between screens made with \`k.addScreen(name)\`, and
-  \`k.flowStart(frame, name)\`.`;
+  \`k.flowStart(frame, name)\`. 3D transitions (\`'CUBE_FROM_RIGHT'\`, \`'CAROUSEL_FROM_LEFT'\`, \`'FLIP_HORIZONTAL'\`,
+  \`'SWING_OPEN'\`, \`'STACK_IN'\`, \`'DEPTH_PUSH'\` and their pairs) turn the screens through a perspective and default to
+  650 ms; a published site draws them on the GPU only when one is used, so keep a plain site's links flat.`;
     MOTION = `## Motion and music
 
 Set the timeline first, then add moves. Times are ms on the frame's timeline.
@@ -346433,7 +346729,7 @@ function collectionOf(doc2, ref3) {
   if (!c2) throw new ToolError(`No collection "${ref3}". ${Object.values(doc2.collections ?? {}).length ? `There is: ${Object.values(doc2.collections).map((x2) => x2.name).join(", ")}.` : "Make one with edit_collection."}`);
   return c2;
 }
-var sizing, padding, overrides, nodeSetResponsive, link, nodeSetSemantics, nodeSetControl, siteSetRoute, breakpoint, siteSetBreakpoints, siteGetBreakpoints, described2, dataEditCollection, dataEditRecords, dataGetRecords, nodeSetRepeat;
+var sizing, padding, overrides, nodeSetResponsive, link, nodeSetSemantics, nodeSetControl, siteSetRoute, breakpoint, siteSetBreakpoints, siteSetGpuTransitions, siteGetBreakpoints, described2, dataEditCollection, dataEditRecords, dataGetRecords, nodeSetRepeat;
 var init_site3 = __esm({
   "lib/commands/site.ts"() {
     "use strict";
@@ -346719,6 +347015,30 @@ var init_site3 = __esm({
         return { summary: `Breakpoints: ${breakpointsOf({ site: { breakpoints: list2 } }).map((b) => b.maxWidth === null ? b.name : `${b.name} \u2264 ${b.maxWidth}`).join(", ")}`, data: { breakpoints: breakpointsOf({ site: { breakpoints: list2 } }) } };
       }
     });
+    siteSetGpuTransitions = defineCommand({
+      id: "site.setGpuTransitions",
+      title: "Draw 3D transitions with WebGPU",
+      domain: "site",
+      effect: "document",
+      permission: "write",
+      undoLabel: "Change how 3D transitions are drawn",
+      params: external_exports.object({
+        on: external_exports.boolean().describe("true (the default): a published site draws its 3D transitions on the GPU where the visitor has WebGPU, in CSS 3D elsewhere. false: always in CSS 3D, and the GPU renderer is never shipped for them.")
+      }).strict(),
+      expose: {
+        ui: { label: "Draw 3D transitions with WebGPU", keywords: ["webgpu", "gpu", "3d", "transition", "cube", "flip", "css", "site", "publish"], variants: [{ id: "on", label: "Draw 3D transitions with WebGPU", params: { on: true } }, { id: "off", label: "Draw 3D transitions in CSS only", params: { on: false } }] },
+        agent: {
+          name: "set_gpu_transitions",
+          description: "Choose how a published site draws its 3D transitions (cube, carousel, flip, swing, stack, depth): on the GPU where the visitor's browser has WebGPU and in CSS 3D elsewhere (on, the default), or always in CSS 3D so the site never loads the GPU renderer for them (off). Sites whose links use no 3D transition never load it either way."
+        }
+      },
+      run: (args2, ctx2) => {
+        const doc2 = ctx2.doc();
+        const { gpuTransitions: _, ...rest } = doc2.site ?? {};
+        ctx2.commit({ ...doc2, site: args2.on ? rest : { ...rest, gpuTransitions: false } });
+        return { summary: args2.on ? "3D transitions draw with WebGPU where the browser has it" : "3D transitions draw in CSS 3D only", data: { on: args2.on } };
+      }
+    });
     siteGetBreakpoints = defineCommand({
       id: "site.getBreakpoints",
       title: "Get breakpoints",
@@ -380372,6 +380692,7 @@ var init_builtin2 = __esm({
       dataEditCollection,
       dataEditRecords,
       dataGetRecords,
+      siteSetGpuTransitions,
       // the file as a website online (lib/client/cloud/publish-site.ts): what is published (appended, as above)
       publishStatus,
       // designs as code (lib/agent/design-script): a whole design from one template-kit script (appended, as above)
@@ -380743,8 +381064,8 @@ async function renderLibraryPreviews(renderer, doc2, listing, format = pickPrevi
     const cap2 = await capture(renderer, doc2, c2.playsId, componentSchedule(c2.duration), previewScale(PREVIEW_BOX));
     if (!cap2.frames.length) continue;
     out.push({ key: c2.id, file: "anim", type: FORMAT_MIME[format], bytes: await encodeFrames(format, cap2.width, cap2.height, cap2.frames, PREVIEW_FPS) });
-    const still = cap2.frames[fullestFrame(cap2.frames)];
-    out.push({ key: c2.id, file: "still", type: PREVIEW_STILL_TYPE, bytes: await encodeRaster("PNG", cap2.width, cap2.height, still.rgba) });
+    const still2 = cap2.frames[fullestFrame(cap2.frames)];
+    out.push({ key: c2.id, file: "still", type: PREVIEW_STILL_TYPE, bytes: await encodeRaster("PNG", cap2.width, cap2.height, still2.rgba) });
   }
   const shownCells = listing.filter((c2) => doc2.nodes[c2.playsId]).slice(0, POSTER_MAX);
   if (!shownCells.length) return out;
@@ -381139,8 +381460,8 @@ async function renderShaderPreview(device, fills, code, params2, zoom = 1) {
   };
   const animated = reflectShader(code).animated;
   if (!animated) {
-    const still = await draw(0);
-    return still && { type: "image/png", bytes: await encodeRaster("PNG", w, h, overGround(still)), width: w, height: h, animated };
+    const still2 = await draw(0);
+    return still2 && { type: "image/png", bytes: await encodeRaster("PNG", w, h, overGround(still2)), width: w, height: h, animated };
   }
   const frames = [];
   for (const f2 of previewFrames()) {
@@ -391555,7 +391876,7 @@ async function runInEditor(doc2, commandId, params2, opts) {
   }
 }
 var decodeDataUrl2;
-var init_render = __esm({
+var init_render2 = __esm({
   "packages/cli/src/render.ts"() {
     "use strict";
     init_editor_open();
@@ -391664,7 +391985,7 @@ async function step2(command, params2, flags, rc) {
   if (where === "plugin" || where === "signin" || where === "app" || where === "unavailable") throw new CliError(`${command.id}: ${WHERE_HELP[where]}`);
   if (where === "browser") {
     if (flagBool(flags, "dryRun")) return { result: { summary: `Would run ${command.id} in the editor (dry run)` }, files: [] };
-    const { runInEditor: runInEditor2 } = await Promise.resolve().then(() => (init_render(), render_exports));
+    const { runInEditor: runInEditor2 } = await Promise.resolve().then(() => (init_render2(), render_exports));
     const download = specOf(command).flags.some((f2) => f2.param === "download" && f2.type === "boolean") && params2.download === void 0 ? { download: true } : {};
     const done = await runInEditor2(currentDocument(), command.id, { ...params2, ...download }, { appUrl: rc.appUrl, surface: command.expose.ui ? "ui" : "agent", headful: flagBool(flags, "headful"), out: flagString(flags, "out"), info: rc.out.info });
     return { result: done.result ?? { summary: `Ran ${command.id}` }, files: done.files };
@@ -391680,7 +392001,7 @@ async function step2(command, params2, flags, rc) {
 }
 async function reviewInEditor(doc2, frames, look, flags, rc, media2) {
   if (!frames.length) return [];
-  const { runInEditor: runInEditor2 } = await Promise.resolve().then(() => (init_render(), render_exports));
+  const { runInEditor: runInEditor2 } = await Promise.resolve().then(() => (init_render2(), render_exports));
   const out = flagString(flags, "out") ?? "look/";
   const opts = { appUrl: rc.appUrl, surface: "agent", headful: flagBool(flags, "headful"), out: out.endsWith("/") ? out : `${out}/`, info: rc.out.info, media: media2 };
   const files = [];
@@ -392237,13 +392558,13 @@ async function openSettled(page, t3, sizeId) {
     const sleep4 = (ms2) => new Promise((r) => setTimeout(r, ms2));
     const quiet = async () => {
       let last3 = w.__vpStore.getState().document.nodes;
-      for (let still = 0, i2 = 0; still < 6 && i2 < 300; i2++) {
+      for (let still2 = 0, i2 = 0; still2 < 6 && i2 < 300; i2++) {
         await w.__vpRenderer.whenReady();
         await sleep4(100);
         const now2 = w.__vpStore.getState().document.nodes;
-        if (now2 === last3) still++;
+        if (now2 === last3) still2++;
         else {
-          still = 0;
+          still2 = 0;
           last3 = now2;
         }
       }
@@ -392422,14 +392743,14 @@ async function runPictures(root2, appUrl, out) {
         const t3 = asTemplate(upload);
         const sizeId = t3.payload.variants[0].sizeId;
         const thumbnail = await drawThumbnail(editor, t3, sizeId);
-        const still = await drawDetailStill(editor, t3, sizeId);
+        const still2 = await drawDetailStill(editor, t3, sizeId);
         const anim = upload.meta.animated ? await drawPreview(editor, t3, false) : null;
         const folder = join9(dir, "pictures");
         rmSync4(folder, { recursive: true, force: true });
         mkdirSync6(folder, { recursive: true });
-        writeFileSync7(join9(folder, "still.webp"), still.bytes);
+        writeFileSync7(join9(folder, "still.webp"), still2.bytes);
         if (anim) writeFileSync7(join9(folder, "anim.mp4"), anim.bytes);
-        const pictures = { still: { w: still.width, h: still.height }, ...anim ? { anim: { w: anim.width, h: anim.height, ms: anim.durationMs } } : {} };
+        const pictures = { still: { w: still2.width, h: still2.height }, ...anim ? { anim: { w: anim.width, h: anim.height, ms: anim.durationMs } } : {} };
         writeFileSync7(join9(folder, "pictures.json"), `${JSON.stringify(pictures, null, 2)}
 `);
         writeFileSync7(join9(dir, "template.json"), JSON.stringify({ ...upload, meta: { ...upload.meta, thumbnail } }));
@@ -392450,7 +392771,7 @@ var init_pictures = __esm({
     "use strict";
     init_pictures_node();
     init_publish2();
-    init_render();
+    init_render2();
     init_io();
     asTemplate = (u) => ({ meta: { ...u.meta, id: u.meta.localId }, payload: u.payload });
   }
@@ -393019,7 +393340,7 @@ init_resources();
 init_desktop();
 init_hypery();
 import { createInterface } from "node:readline";
-var VERSION2 = "0.7.1";
+var VERSION2 = "0.8.0";
 var HELP = `popcraft ${VERSION2} \u2014 the PopCraft command line
 
 Files (headless, on .popcraft files):