@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-HVEQSYOW.js

@@ -0,0 +1,1677 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  strokeBehindFill
+} from "./chunk-Q3LHD6Z5.js";
+import {
+  anchorOf,
+  hrefOf,
+  isPixelArt,
+  opensNewTab
+} from "./chunk-GJQZHRKC.js";
+import {
+  isKeyListener,
+  machineOf,
+  sortedValues,
+  stateStretch
+} from "./chunk-WGWAUMXY.js";
+import {
+  isCommerceAction
+} from "./chunk-KMTP6JI7.js";
+import {
+  childrenOf
+} from "./chunk-57UHZNAX.js";
+import {
+  evaluatePose
+} from "./chunk-OO67GSCX.js";
+import {
+  capability,
+  featureName,
+  isLive,
+  movesItself,
+  renderMode
+} from "./chunk-LQA6GSGH.js";
+import {
+  getNativeExtension
+} from "./chunk-Q7LANE4G.js";
+import {
+  resolveTextNodeStyles
+} from "./chunk-VG6DGRSQ.js";
+import {
+  ITEM_RECORD,
+  exprData,
+  hasItemToken,
+  itemMark,
+  itemMarks,
+  itemNode,
+  itemScope,
+  itemText,
+  pinnedRecord,
+  recordSlugs,
+  repeatRecords,
+  templateRecord,
+  withData
+} from "./chunk-X4J663TQ.js";
+import {
+  fieldKey
+} from "./chunk-X2PCP2GO.js";
+import {
+  colorToHex8
+} from "./chunk-U4LTVSLE.js";
+import {
+  frameRunsOn,
+  frameTimeline,
+  hasFrameMotion,
+  instancePoseAt,
+  isMotionComponent,
+  playbackOf,
+  timelineDuration
+} from "./chunk-2WU6JQAQ.js";
+import {
+  init_scene_graph,
+  resolveVirtualNode
+} from "./chunk-PEAXERBE.js";
+import {
+  init_instance_layout,
+  withInstanceBox
+} from "./chunk-4PE7EX3N.js";
+import {
+  init_expressions,
+  init_variables,
+  resolveNodeVariables,
+  variablesScope
+} from "./chunk-OYXVKB4X.js";
+import {
+  blursOf,
+  init_effects,
+  shadowsOf
+} from "./chunk-TZHWIVE5.js";
+import {
+  init_scene3d,
+  is3DContext,
+  passesThrough,
+  scene3dOf
+} from "./chunk-MF4NUZBE.js";
+import {
+  has3DPlacement,
+  init_transform3d,
+  zoomPx
+} from "./chunk-7ECF2YL5.js";
+import {
+  init_transform,
+  restValue
+} from "./chunk-PSVLITJE.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/io/web/tree.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_instance_layout();
+init_variables();
+init_scene3d();
+
+// lib/code/props.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function propName(key) {
+  const words = key.split("#")[0].trim().split(/[^A-Za-z0-9]+/).filter(Boolean);
+  const name = words.map((w, i) => i === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join("");
+  return /^[A-Za-z_$]/.test(name) ? name : `p${name}`;
+}
+function componentOf(nodes, node) {
+  const c = node.type === "COMPONENT" ? node : node.type === "INSTANCE" ? nodes[node.mainComponentId] : void 0;
+  return c?.type === "COMPONENT" ? c : void 0;
+}
+function codeOf(nodes, node) {
+  if (node.type !== "COMPONENT" && node.type !== "INSTANCE") return null;
+  return componentOf(nodes, node)?.code ?? null;
+}
+var value = (v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : v && typeof v === "object" && "r" in v ? colorToHex8(v) : void 0;
+function codeProps(nodes, node) {
+  const component = componentOf(nodes, node);
+  const out = {};
+  if (!component) return out;
+  const set = component.parentId ? nodes[component.parentId] : void 0;
+  const defs = (set?.type === "COMPONENT_SET" ? set.componentPropertyDefinitions : component.componentPropertyDefinitions) ?? {};
+  const given = node.type === "INSTANCE" ? node.componentProperties ?? {} : {};
+  for (const key of Object.keys(defs).sort()) {
+    const v = value(key in given ? given[key] : defs[key].defaultValue);
+    if (v !== void 0) out[propName(key)] = v;
+  }
+  out.width = Math.round(node.width);
+  out.height = Math.round(node.height);
+  return out;
+}
+
+// lib/document/controls.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function fieldPart(nodes, id) {
+  const n = nodes[id];
+  if (!n) return null;
+  if (n.type === "TEXT") return id;
+  for (const c of n.childIds ?? []) {
+    const hit = fieldPart(nodes, c);
+    if (hit) return hit;
+  }
+  return null;
+}
+var cleanName = (raw) => raw.trim().replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+
+// lib/io/web/tree.ts
+init_expressions();
+
+// lib/io/web/css.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_effects();
+
+// lib/io/web/paint.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var hex2 = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
+var toHex = (c) => `#${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}`.toUpperCase();
+function toRgba(c, a) {
+  const alpha = a !== void 0 ? a : c.a;
+  const [r, g, b] = [c.r, c.g, c.b].map((v) => Math.round(v * 255));
+  return alpha < 1 ? `rgba(${r}, ${g}, ${b}, ${Math.round(alpha * 100) / 100})` : `rgb(${r}, ${g}, ${b})`;
+}
+function gradientAngleDeg(paint) {
+  const h = paint.gradientHandlePositions;
+  const p0 = h?.[0] ?? { x: 0, y: 0.5 };
+  const p1 = h?.[1] ?? { x: 1, y: 0.5 };
+  return Math.round(Math.atan2(p1.x - p0.x, -(p1.y - p0.y)) * 180 / Math.PI);
+}
+var gradientStopsCSS = (paint) => (paint.gradientStops ?? []).map((s) => `${toRgba(s.color)} ${Math.round((s.position ?? 0) * 100)}%`).join(", ");
+var IMAGE_FIT = {
+  FILL: "center / cover no-repeat",
+  CROP: "center / cover no-repeat",
+  FIT: "center / contain no-repeat",
+  TILE: "top left / auto repeat"
+};
+function paintToBackground(paint, opts = {}) {
+  if (paint.type === "SOLID" && paint.color) {
+    const alpha = (paint.opacity ?? 1) * paint.color.a;
+    return alpha < 1 ? toRgba(paint.color, alpha) : toHex(paint.color);
+  }
+  if (paint.type === "GRADIENT_LINEAR") return `linear-gradient(${gradientAngleDeg(paint)}deg, ${gradientStopsCSS(paint)})`;
+  if (paint.type === "GRADIENT_RADIAL") return `radial-gradient(circle, ${gradientStopsCSS(paint)})`;
+  if (paint.type === "GRADIENT_ANGULAR") return `conic-gradient(${gradientStopsCSS(paint)})`;
+  if (paint.type === "GRADIENT_DIAMOND") return `radial-gradient(closest-side, ${gradientStopsCSS(paint)})`;
+  if (paint.type === "IMAGE") {
+    const src = paint.imageUrl || paint.imageHash;
+    if (!src) return null;
+    return `url('${opts.fullImageUrl || src.length <= 64 ? src : src.slice(0, 64)}') ${IMAGE_FIT[paint.scaleMode ?? "FILL"]}`;
+  }
+  return null;
+}
+var swiftColor = (c) => {
+  const n = (v) => Math.round(v * 1e3) / 1e3;
+  return `Color(red: ${n(c.r)}, green: ${n(c.g)}, blue: ${n(c.b)}${(c.a ?? 1) < 1 ? `, opacity: ${Math.round((c.a ?? 1) * 100) / 100}` : ""})`;
+};
+var composeColor = (c) => `Color(0x${[c.a ?? 1, c.r, c.g, c.b].map((v) => Math.round(v * 255).toString(16).padStart(2, "0")).join("").toUpperCase()})`;
+function parseCssColor(css) {
+  if (!css) return null;
+  const hex = /^#([0-9a-f]{6})$/i.exec(css.trim());
+  if (hex) {
+    const n = parseInt(hex[1], 16);
+    return { r: (n >> 16 & 255) / 255, g: (n >> 8 & 255) / 255, b: (n & 255) / 255, a: 1 };
+  }
+  const rgb = /^rgba?\(([^)]+)\)$/i.exec(css.trim());
+  if (!rgb) return null;
+  const parts = rgb[1].split(",").map((v) => Number(v.trim()));
+  if (parts.length < 3 || parts.some((v) => Number.isNaN(v))) return null;
+  return { r: parts[0] / 255, g: parts[1] / 255, b: parts[2] / 255, a: parts[3] ?? 1 };
+}
+
+// lib/io/web/css.ts
+init_scene3d();
+init_transform3d();
+init_transform();
+function stylePaints(styleId, styles) {
+  const s = styleId ? styles?.[styleId] : void 0;
+  return s?.type === "PAINT" ? s.paints ?? [] : null;
+}
+var visibleFills = (node, styles) => (stylePaints(node.fillStyleId, styles) ?? node.fills ?? []).filter((f) => f.visible !== false);
+var round = (v) => Math.round(v * 100) / 100;
+function transformParts(node, dx = 0, dy = 0) {
+  return [
+    dx + restValue(node, "translateX"),
+    dy + restValue(node, "translateY"),
+    restValue(node, "z"),
+    node.rotation || 0,
+    restValue(node, "rotateY"),
+    restValue(node, "rotateX"),
+    restValue(node, "scaleX") * (node.flipHorizontal ? -1 : 1),
+    restValue(node, "scaleY") * (node.flipVertical ? -1 : 1)
+  ];
+}
+function transformFromParts(p, orbit) {
+  const [tx, ty, z, r, ry0, rx0, sx, sy] = p;
+  const ry = ry0 + (orbit?.rotateY ?? 0), rx = rx0 + (orbit?.rotateX ?? 0);
+  const parts = [];
+  if (tx || ty || z) parts.push(z ? `translate3d(${round(tx)}px, ${round(ty)}px, ${round(z)}px)` : `translate(${round(tx)}px, ${round(ty)}px)`);
+  if (r) parts.push(`rotate(${round(r)}deg)`);
+  if (ry) parts.push(`rotateY(${round(ry)}deg)`);
+  if (rx) parts.push(`rotateX(${round(rx)}deg)`);
+  if (sx !== 1 || sy !== 1) parts.push(`scale(${round(sx)}, ${round(sy)})`);
+  return parts.length ? parts.join(" ") : void 0;
+}
+var transformCss = (node) => transformFromParts(transformParts(node));
+function styleMapFor(node, styles, opts = {}) {
+  const scene = node;
+  const out = {};
+  out.width = `${Math.round(node.width)}px`;
+  out.height = `${Math.round(node.height)}px`;
+  const transform = transformCss(node);
+  if (transform) out.transform = transform;
+  const ax = restValue(node, "anchorX"), ay = restValue(node, "anchorY");
+  if (transform && (ax !== 0.5 || ay !== 0.5)) out["transform-origin"] = `${round(ax * 100)}% ${round(ay * 100)}%`;
+  const scene3d = scene3dOf(node);
+  if (scene3d) {
+    out.perspective = `${round(zoomPx(scene3d.camera.focalLength, node.width))}px`;
+    out["perspective-origin"] = `${round((scene3d.originX ?? 0.5) * 100)}% ${round((scene3d.originY ?? 0.5) * 100)}%`;
+    out["transform-style"] = "preserve-3d";
+  } else if (has3DPlacement(node) && passesThrough(node)) out["transform-style"] = "preserve-3d";
+  if ((node.opacity ?? 1) !== 1) out.opacity = String(round(node.opacity ?? 1));
+  const bm = node.blendMode;
+  if (bm && bm !== "NORMAL" && bm !== "PASS_THROUGH") out["mix-blend-mode"] = bm.toLowerCase().replace(/_/g, "-");
+  const fills = visibleFills(node, styles);
+  const own = node.type === "IMAGE" && node.imageUrl ? [{ type: "IMAGE", imageUrl: node.imageUrl, scaleMode: node.scaleMode, visible: true }] : [];
+  const painted = [...fills, ...own];
+  if (node.type !== "TEXT" && painted.length) {
+    const layers = painted.map((f) => paintToBackground(f, opts)).filter((l) => !!l);
+    const over = (l) => /^(#|rgb)/.test(l) ? `linear-gradient(${l}, ${l})` : l;
+    if (layers.length) out.background = layers.map((l, i) => i === layers.length - 1 ? l : over(l)).join(", ");
+  }
+  const cr = scene.cornerRadius;
+  if (typeof cr === "number" && cr > 0) out["border-radius"] = `${cr}px`;
+  else if (Array.isArray(cr) && cr.some((r) => r > 0)) out["border-radius"] = cr.map((r) => `${r}px`).join(" ");
+  if (node.type === "ELLIPSE") out["border-radius"] = "50%";
+  const stroke = scene.strokes?.find((st) => st.visible !== false);
+  if (stroke && node.type === "TEXT") {
+    const w = Array.isArray(stroke.width) ? Math.max(...stroke.width) : stroke.width;
+    const behind = strokeBehindFill(node) || stroke.alignment === "OUTSIDE";
+    if (w > 0 && !(stroke.alignment === "INSIDE" && behind)) {
+      out["-webkit-text-stroke"] = `${stroke.alignment === "OUTSIDE" ? w * 2 : w}px ${toRgba({ ...stroke.color, a: (stroke.color.a ?? 1) * (stroke.opacity ?? 1) })}`;
+      out["paint-order"] = behind ? "stroke fill" : "normal";
+    }
+  } else if (stroke) {
+    const color = toHex(stroke.color);
+    if (Array.isArray(stroke.width)) {
+      out["border-style"] = "solid";
+      out["border-color"] = color;
+      out["border-width"] = stroke.width.map((w) => `${w}px`).join(" ");
+    } else if (stroke.alignment === "OUTSIDE") {
+      out.outline = `${stroke.width}px solid ${color}`;
+    } else {
+      out.border = `${stroke.width}px ${stroke.dashPattern?.length ? "dashed" : "solid"} ${color}`;
+      if (stroke.alignment === "INSIDE") out["box-sizing"] = "border-box";
+    }
+  }
+  const shadows = shadowsOf(node, styles).filter((s) => s.visible);
+  if (node.type === "TEXT") {
+    const drops = shadows.filter((s) => s.type === "DROP_SHADOW");
+    if (drops.length) out["text-shadow"] = drops.flatMap(textShadowCss).join(", ");
+  } else if (shadows.length) {
+    out["box-shadow"] = shadows.map((s) => `${s.type === "INNER_SHADOW" ? "inset " : ""}${s.offset.x}px ${s.offset.y}px ${s.blur}px ${s.spread}px ${toRgba(s.color)}`).join(", ");
+  }
+  const blurs = blursOf(node, styles);
+  const layer = blurs.find((b) => b.type === "LAYER");
+  const backdrop = blurs.find((b) => b.type === "BACKGROUND");
+  if (layer) out.filter = `blur(${layer.radius}px)`;
+  if (backdrop) out["backdrop-filter"] = `blur(${backdrop.radius}px)`;
+  if (node.type === "FRAME" || node.type === "COMPONENT" || node.type === "INSTANCE") {
+    const f = node;
+    Object.assign(out, flexDeclarations(f));
+    if (f.clipsContent) out.overflow = "hidden";
+  }
+  if (node.type === "TEXT") {
+    const t = node;
+    const tFills = visibleFills(t, styles);
+    out.margin = "0";
+    if (t.textAutoResize === "WIDTH_AND_HEIGHT") {
+      out.width = "max-content";
+      out.height = "auto";
+      out["white-space"] = "pre";
+    } else if (t.textAutoResize === "HEIGHT") out.height = "auto";
+    out["font-family"] = `"${t.fontFamily}", system-ui, sans-serif`;
+    out["font-size"] = `${t.fontSize}px`;
+    out["font-weight"] = String(t.fontWeight);
+    if (t.fontStyle === "italic") out["font-style"] = "italic";
+    out["line-height"] = t.lineHeight === "AUTO" ? "normal" : `${t.lineHeight}px`;
+    if (t.letterSpacing) out["letter-spacing"] = `${t.letterSpacing}px`;
+    out["text-align"] = t.textAlign.toLowerCase();
+    if (t.textDecoration === "UNDERLINE") out["text-decoration"] = "underline";
+    else if (t.textDecoration === "STRIKETHROUGH") out["text-decoration"] = "line-through";
+    const tc = t.textCase;
+    if (tc === "UPPER") out["text-transform"] = "uppercase";
+    else if (tc === "LOWER") out["text-transform"] = "lowercase";
+    else if (tc === "TITLE") out["text-transform"] = "capitalize";
+    const solid = tFills.find((f) => f.type === "SOLID" && f.color);
+    if (solid?.color) out.color = toHex(solid.color);
+    const grad = tFills.find((f) => f.type !== "SOLID");
+    const g = grad ? paintToBackground(grad) : null;
+    if (g) {
+      out.background = g;
+      out["-webkit-background-clip"] = "text";
+      out.color = "transparent";
+    }
+  }
+  return out;
+}
+function flexDeclarations(f) {
+  const out = {};
+  if (f.layoutMode !== "HORIZONTAL" && f.layoutMode !== "VERTICAL") return out;
+  out.display = "flex";
+  out["flex-direction"] = f.layoutMode === "HORIZONTAL" ? "row" : "column";
+  const justify = JUSTIFY[f.primaryAxisAlignItems ?? "MIN"];
+  const align = ALIGN[f.counterAxisAlignItems ?? "MIN"];
+  if (justify !== "flex-start") out["justify-content"] = justify;
+  if (align !== "flex-start") out["align-items"] = align;
+  out.gap = `${f.itemSpacing ?? 0}px`;
+  if (f.padding) {
+    out.padding = `${f.padding.top}px ${f.padding.right}px ${f.padding.bottom}px ${f.padding.left}px`;
+    if (f.padding.top || f.padding.right || f.padding.bottom || f.padding.left) out["box-sizing"] = "border-box";
+  }
+  return out;
+}
+var JUSTIFY = { MIN: "flex-start", MAX: "flex-end", CENTER: "center", SPACE_BETWEEN: "space-between" };
+var ALIGN = { MIN: "flex-start", MAX: "flex-end", CENTER: "center", BASELINE: "baseline" };
+var styleMapToCSSText = (m, indent = "") => Object.entries(m).map(([k, v]) => `${indent}${k}: ${v};`).join("\n");
+var styleMapToInline = (m) => Object.entries(m).map(([k, v]) => `${k}:${v}`).join(";");
+var camel = (k) => k.startsWith("--") ? k : (k.startsWith("-") ? k.replace(/^-/, "Webkit").replace(/-webkit-/i, "") : k).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+var styleMapToJSX = (m) => Object.entries(m).map(([k, v]) => [camel(k), v.replace(/'/g, "\\'")]);
+function textShadowCss(s) {
+  const color = toRgba(s.color);
+  const r = s.spread || 0;
+  if (r <= 0) return [`${s.offset.x}px ${s.offset.y}px ${s.blur}px ${color}`];
+  const out = [`${s.offset.x}px ${s.offset.y}px ${s.blur}px ${color}`];
+  for (const [ring, n] of [[r / 2, 8], [r, 16]]) {
+    for (let i = 0; i < n; i++) {
+      const a = i / n * Math.PI * 2;
+      out.push(`${round2(s.offset.x + Math.cos(a) * ring)}px ${round2(s.offset.y + Math.sin(a) * ring)}px ${s.blur}px ${color}`);
+    }
+  }
+  return out;
+}
+var round2 = (v) => Math.round(v * 100) / 100;
+
+// lib/io/web/expressible.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function expressibility(node, styles) {
+  const c = capability(node, "css", styles);
+  return { css: c.reason === "", reason: c.reason, needsRaster: c.verdict === "raster" };
+}
+
+// lib/io/web/motion.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+
+// lib/io/web/keyframes.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SAMPLE_RATE = 30;
+var round3 = (v) => Math.round(v * 1e3) / 1e3;
+var pct = (k) => Math.round(k * 1e5) / 1e3;
+function transformOf(n, rest) {
+  return transformFromParts(transformParts(n, n.x - rest.x, n.y - rest.y)) ?? "none";
+}
+function declarationsOf(node, rest, style) {
+  return { ...style(node), transform: transformOf(node, rest), opacity: String(round3(node.visible === false ? 0 : node.opacity ?? 1)) };
+}
+var FIXED = /* @__PURE__ */ new Set(["position", "display", "left", "top", "right", "bottom", "inset", "animation", "animation-play-state", "transform-origin", "transform-style", "box-sizing", "isolation", "z-index"]);
+var NUMBER = /-?\d+(?:\.\d+)?(?:e-?\d+)?/g;
+function vectorOf(style, keys) {
+  const text = keys.map((k) => `${k}:${style[k] ?? ""}`).join(";");
+  return { shape: text.replace(NUMBER, "#"), v: (text.match(NUMBER) ?? []).map(Number) };
+}
+function thinSamples(times, samples, tol, pinned = []) {
+  const n = samples.length;
+  if (n <= 2) return samples.map((_, i) => i);
+  const keep = /* @__PURE__ */ new Set([0, n - 1, ...pinned]);
+  for (let i = 1; i < n; i++) if (samples[i].shape !== samples[i - 1].shape) {
+    keep.add(i - 1);
+    keep.add(i);
+  }
+  const sorted = () => [...keep].sort((a, b) => a - b);
+  const stack = [];
+  const kept = sorted();
+  for (let i = 1; i < kept.length; i++) stack.push([kept[i - 1], kept[i]]);
+  while (stack.length) {
+    const [a, b] = stack.pop();
+    if (b - a < 2 || samples[a].shape !== samples[b].shape) continue;
+    let worst = -1, at = -1;
+    for (let i = a + 1; i < b; i++) {
+      const k = (times[i] - times[a]) / (times[b] - times[a] || 1);
+      let err = 0;
+      samples[i].v.forEach((x, d) => {
+        const want = samples[a].v[d] + (samples[b].v[d] - samples[a].v[d]) * k;
+        err = Math.max(err, Math.abs(x - want) / tol[d]);
+      });
+      if (err > worst) {
+        worst = err;
+        at = i;
+      }
+    }
+    if (worst > 1) {
+      keep.add(at);
+      stack.push([a, at], [at, b]);
+    }
+  }
+  return sorted();
+}
+function keyframesOf(times, samples, length) {
+  const keys = [...new Set(samples.flatMap((s) => Object.keys(s)))].filter((k) => !FIXED.has(k));
+  const moving = keys.filter((k) => samples.some((s) => s[k] !== samples[0][k]));
+  if (!moving.length) return null;
+  const vectors = samples.map((s) => vectorOf(s, moving));
+  const dims = Math.max(...vectors.map((v) => v.v.length));
+  const range = Array.from({ length: dims }, (_, d) => {
+    let lo = Infinity, hi = -Infinity;
+    for (const v of vectors) if (d < v.v.length) {
+      lo = Math.min(lo, v.v[d]);
+      hi = Math.max(hi, v.v[d]);
+    }
+    return hi > lo ? hi - lo : 0;
+  });
+  const tol = range.map((r) => Math.max(1e-3, r * 3e-3));
+  const same = (a, b) => vectors[a].shape === vectors[b].shape && vectors[a].v.every((x, d) => Math.abs(x - vectors[b].v[d]) <= tol[d]);
+  const jumps = /* @__PURE__ */ new Set();
+  for (let i = 1; i < samples.length; i++) {
+    if (same(i - 1, i)) continue;
+    const stillBefore = i >= 2 && same(i - 2, i - 1);
+    if (!stillBefore) continue;
+    const words = vectors[i].shape !== vectors[i - 1].shape;
+    const far = !words && vectors[i].v.some((x, d) => range[d] > 0 && Math.abs(x - vectors[i - 1].v[d]) > range[d] * 0.2);
+    if (words || far) jumps.add(i);
+  }
+  const kept = thinSamples(times, vectors, tol, [...jumps].flatMap((i) => [i - 1, i]));
+  return kept.map((i) => {
+    const style = {};
+    for (const k of moving) if (samples[i][k] !== void 0) style[k] = samples[i][k];
+    return { offset: pct(times[i] / (length || 1)), style, ...jumps.has(i + 1) ? { step: true } : {} };
+  });
+}
+
+// lib/io/web/element.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var escapeHTML = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function placementStyle(node, isRoot) {
+  if (node.place) return { ...node.place, ...node.place.position ? {} : node.layered || node.children.some((c) => c.positioning === "absolute") ? { position: "relative" } : {} };
+  const out = {};
+  if (node.positioning === "absolute" && !isRoot) {
+    out.position = "absolute";
+    out.left = `${node.x}px`;
+    out.top = `${node.y}px`;
+  } else if (node.layered || node.children.some((c) => c.positioning === "absolute") || isRoot) {
+    out.position = "relative";
+  }
+  return out;
+}
+var altFor = (node) => node.alt ?? node.name;
+var roleOf = (node) => {
+  const alt = altFor(node);
+  return alt === "" ? { hidden: true } : { label: alt };
+};
+var roleAttrs = (role) => "hidden" in role ? ' aria-hidden="true"' : ` role="img" aria-label="${escapeHTML(role.label)}"`;
+var labelSVG = (svg, node) => svg.replace(/^<svg\b/, `<svg${roleAttrs(roleOf(node))}`);
+function imageRole(node) {
+  if (node.asset || node.text) return null;
+  if (node.type !== "IMAGE" && node.alt === void 0) return null;
+  return roleOf(node);
+}
+var imageRoleAttrs = (node) => {
+  const role = imageRole(node);
+  return role ? roleAttrs(role) : "";
+};
+function pictureOf(node) {
+  const a = node.asset;
+  if (!a) return null;
+  if (a.src) return { kind: "img", src: a.src };
+  if (a.svg) return { kind: "svg", svg: a.svg };
+  if (a.pngDataUrl) return { kind: "img", src: a.pngDataUrl };
+  return { kind: "missing", reason: a.reason, format: a.kind };
+}
+var hiddenAtStart = (spec, node) => {
+  const e = spec && node.uid !== void 0 ? spec.e[node.uid] : void 0;
+  return !!e && e[1][spec.m[e[0]]] === -1;
+};
+var HIDDEN_AT_START = { opacity: "0", visibility: "hidden", "pointer-events": "none", position: "absolute" };
+var FIELD = { display: "block", border: "0", padding: "0", margin: "0", background: "none", outline: "none", font: "inherit", color: "inherit", "min-width": "0" };
+var HEADING = { margin: "0", "font-size": "inherit", "font-weight": "inherit" };
+var TAG_RESET = {
+  a: { display: "block", color: "inherit", "text-decoration": "none" },
+  button: { display: "block", border: "0", padding: "0", background: "none", font: "inherit", color: "inherit", "text-align": "inherit", cursor: "pointer" },
+  ul: { "list-style": "none", margin: "0", padding: "0" },
+  ol: { "list-style": "none", margin: "0", padding: "0" },
+  h1: HEADING,
+  h2: HEADING,
+  h3: HEADING,
+  h4: HEADING,
+  h5: HEADING,
+  h6: HEADING,
+  p: { margin: "0" },
+  figure: { margin: "0" },
+  span: { display: "block" },
+  label: { display: "block" },
+  form: { margin: "0" },
+  input: FIELD,
+  textarea: { ...FIELD, resize: "none" },
+  select: { ...FIELD, appearance: "none" }
+};
+var MOTION_PLAY_RULE = "[data-motion-play] [data-motion-child] { animation-play-state: running; }";
+var CHECK_STYLE = "position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer";
+function elementOf(node, ctx) {
+  const motion = ctx.still ? void 0 : node.motion;
+  const spec = ctx.spec ?? null;
+  const tag = node.input ? node.input.tag : node.link ? "a" : node.tag ?? (node.text ? "p" : "div");
+  const attrs = { ...node.attrs };
+  if (node.input) Object.assign(attrs, node.input.attrs);
+  if (node.link && !node.input) {
+    attrs.href = node.link.href;
+    if (node.link.newTab) {
+      attrs.target = "_blank";
+      attrs.rel = "noopener noreferrer";
+    }
+  }
+  return {
+    tag,
+    attrs,
+    // A tag's own look (a button's border, a link's underline, a list's bullets) is not the layer's: under its declarations.
+    style: { ...node.link || node.tag || node.input ? TAG_RESET[tag] : void 0, ...placementStyle(node, ctx.isRoot), ...node.style, ...motion ? motion.style : {}, ...hiddenAtStart(spec, node) ? HIDDEN_AT_START : {} },
+    // A field's words are its placeholder (an attribute), not its content.
+    ...node.text && !node.input ? { text: node.text.characters } : {},
+    ...node.text && node.runs && !node.input ? { runs: node.runs } : {},
+    ...node.input ? { input: node.input } : {},
+    ...node.html !== void 0 ? { html: node.html } : {},
+    ...node.check ? { check: node.check } : {},
+    picture: pictureOf(node),
+    role: imageRole(node),
+    ...motion ? { keyframes: motion.keyframes } : {},
+    ...node.motionTrigger ? { motionTrigger: node.motionTrigger } : {},
+    ...spec && node.uid !== void 0 ? { pc: { uid: node.uid, layer: node.name } } : {},
+    ...ctx.listened?.has(node.id) ? { sm: node.id } : {}
+  };
+}
+
+// lib/io/web/motion.ts
+function instanceWebMotion(doc, instance, style) {
+  const comp = instance.mainComponentId;
+  if (!comp || !isMotionComponent(doc.nodes, comp)) return null;
+  const m = playbackOf(doc.nodes, instance, comp);
+  const [a, b] = m.range;
+  const len = b - a;
+  if (len <= 0) return null;
+  const steps = Math.max(1, Math.ceil(len / 1e3 * SAMPLE_RATE));
+  const times = Array.from({ length: steps + 1 }, (_, i) => len * i / steps);
+  const samples = [];
+  for (let i = 0; i <= steps; i++) samples.push(instancePoseAt(doc.nodes, instance.id, a + len * i / steps));
+  const ids = /* @__PURE__ */ new Set();
+  for (const s of samples) for (const id in s) if (id.includes("::")) ids.add(id);
+  const children = /* @__PURE__ */ new Map();
+  const tag = instance.id.replace(/[^a-zA-Z0-9]/g, "").slice(-6);
+  let n = 0;
+  for (const id of ids) {
+    const restNode = resolveVirtualNode(doc.nodes, id);
+    if (!restNode) continue;
+    const frames = keyframesOf(times, samples.map((s) => declarationsOf(s[id] ?? restNode, restNode, style)), len);
+    if (!frames) continue;
+    children.set(id, {
+      name: `motion-${tag}-${n++}`,
+      frames,
+      durationMs: m.speed > 0 ? Math.round(len / m.speed) : 0,
+      delayMs: Math.round(m.start),
+      iterations: m.loop === "none" ? 1 : "infinite",
+      direction: m.loop === "pingpong" ? "alternate" : "normal",
+      fill: m.hold === "first" ? "backwards" : "both"
+    });
+  }
+  return children.size ? { trigger: m.trigger, children } : null;
+}
+function animationStyle(mo, trigger) {
+  const out = { animation: `${mo.name} ${mo.durationMs}ms linear ${mo.delayMs}ms ${mo.iterations} ${mo.direction} ${mo.fill}` };
+  if (trigger !== "load") out["animation-play-state"] = "paused";
+  return out;
+}
+var keyframesCSS = (mo) => `@keyframes ${mo.name} {
+${mo.frames.map((f) => `  ${f.offset}% { ${Object.entries(f.style).map(([k, v]) => `${k}: ${v};`).join(" ")}${f.step ? " animation-timing-function: step-end;" : ""} }`).join("\n")}
+}`;
+var MOTION_SCRIPT = `(function () {
+  var play = function (el) { el.setAttribute('data-motion-play', '') };
+  document.querySelectorAll('[data-motion="click"]').forEach(function (el) { el.addEventListener('click', function () { play(el) }) });
+  document.querySelectorAll('[data-motion="hover"]').forEach(function (el) { el.addEventListener('mouseenter', function () { play(el) }) });
+  var seen = document.querySelectorAll('[data-motion="inView"]');
+  if (!('IntersectionObserver' in window)) { seen.forEach(play); return }
+  var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { play(e.target); io.unobserve(e.target) } }) }, { threshold: 0.25 });
+  seen.forEach(function (el) { io.observe(el) });
+})();`;
+
+// lib/io/web/responsive.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var px = (v) => `${Math.round(v * 100) / 100}px`;
+var pct2 = (v) => `${Math.round(v * 1e4) / 100}%`;
+var isStack = (f) => f?.layoutMode === "HORIZONTAL" || f?.layoutMode === "VERTICAL";
+var isGrid = (f) => f?.layoutMode === "GRID";
+var laysOut = (f) => isStack(f) || isGrid(f);
+var track = (t) => {
+  if (!t || t.sizing === "FILL") return t?.value && /fr$/.test(t.value) ? t.value : "1fr";
+  if (t.sizing === "HUG") return "auto";
+  return /^[\d.]+$/.test(t.value) ? `${t.value}px` : t.value;
+};
+function containerStyle(f) {
+  const out = {};
+  if (isStack(f) && f.layoutWrap === "WRAP") {
+    out["flex-wrap"] = "wrap";
+    const cross = f.counterAxisSpacing ?? f.itemSpacing ?? 0;
+    const main = f.itemSpacing ?? 0;
+    if (cross !== main) out.gap = f.layoutMode === "HORIZONTAL" ? `${cross}px ${main}px` : `${main}px ${cross}px`;
+    out["align-content"] = "flex-start";
+  }
+  if (isGrid(f)) {
+    out.display = "grid";
+    const cols = f.layoutGridColumns ?? "AUTO";
+    out["grid-template-columns"] = cols === "AUTO" ? `repeat(auto-fill, minmax(${f.layoutGridMinColumnWidth ?? 100}px, 1fr))` : Array.from({ length: Math.max(1, cols) }, (_, i) => track(f.layoutGridColumnSizes?.[i])).join(" ");
+    const rows = f.layoutGridRows ?? "AUTO";
+    if (rows === "AUTO") out["grid-auto-rows"] = `minmax(${f.layoutGridMinRowHeight ?? 100}px, auto)`;
+    else out["grid-template-rows"] = Array.from({ length: Math.max(1, rows) }, (_, i) => track(f.layoutGridRowSizes?.[i])).join(" ");
+    const colGap = f.itemSpacing ?? 0, rowGap = f.counterAxisSpacing ?? colGap;
+    out.gap = rowGap === colGap ? `${colGap}px` : `${rowGap}px ${colGap}px`;
+    if (f.padding) {
+      out.padding = `${f.padding.top}px ${f.padding.right}px ${f.padding.bottom}px ${f.padding.left}px`;
+      if (f.padding.top || f.padding.right || f.padding.bottom || f.padding.left) out["box-sizing"] = "border-box";
+    }
+  }
+  const scroll = f.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;
+}
+var limits = (n) => {
+  const out = {};
+  if (n.minWidth !== void 0) out["min-width"] = px(n.minWidth);
+  if (n.maxWidth !== void 0) out["max-width"] = px(n.maxWidth);
+  if (n.minHeight !== void 0) out["min-height"] = px(n.minHeight);
+  if (n.maxHeight !== void 0) out["max-height"] = px(n.maxHeight);
+  return out;
+};
+function flowChild(node, parent) {
+  const style = { ...limits(node) };
+  const h = node.layoutSizingHorizontal ?? "FIXED", v = node.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 row = parent.layoutMode === "HORIZONTAL";
+  const main = row ? h : v, cross = row ? v : h;
+  const mainProp = row ? "width" : "height", crossProp = row ? "height" : "width";
+  if (main === "FILL") {
+    style[mainProp] = null;
+    style.flex = "1 1 0";
+    if (style[`min-${mainProp}`] === void 0) style[`min-${mainProp}`] = "0";
+  } else {
+    if (main === "HUG") style[mainProp] = null;
+    style["flex-shrink"] = "0";
+  }
+  if (cross === "FILL") {
+    style[crossProp] = null;
+    style["align-self"] = "stretch";
+  } else {
+    if (cross === "HUG") style[crossProp] = null;
+    if ((parent.counterAxisAlignItems ?? "MIN") === "MIN") style["align-self"] = "flex-start";
+  }
+  return { style };
+}
+function constrained(kind, pos, size, parentSize, start, end, sizeProp) {
+  const far = parentSize - pos - size;
+  switch (kind) {
+    case "MAX":
+      return { place: { [end]: px(far) }, style: {} };
+    case "STRETCH":
+      return { place: { [start]: px(pos), [end]: px(far) }, style: { [sizeProp]: null } };
+    // Its centre keeps its distance from the parent's centre.
+    case "CENTER":
+      return { place: { [start]: `calc(50% + ${px(pos - parentSize / 2)})` }, style: {} };
+    case "SCALE":
+      return parentSize > 0 ? { place: { [start]: pct2(pos / parentSize) }, style: { [sizeProp]: pct2(size / parentSize) } } : { place: { [start]: px(pos) }, style: {} };
+    default:
+      return { place: { [start]: px(pos) }, style: {} };
+  }
+}
+function placedChild(node, parent, frame = parent) {
+  const c = node.constraints ?? { horizontal: "MIN", vertical: "MIN" };
+  const x = constrained(c.horizontal, node.x, node.width, frame.width, "left", "right", "width");
+  const y = constrained(c.vertical, node.y, node.height, frame.height, "top", "bottom", "height");
+  return { style: { ...limits(node), ...x.style, ...y.style }, place: { position: "absolute", ...x.place, ...y.place } };
+}
+function siteLayout(node, parent, layout) {
+  const own = node.type === "FRAME" || node.type === "COMPONENT" || node.type === "INSTANCE" ? node : null;
+  if (!parent) {
+    const grows = !own || laysOut(own) || own.overflowScrolling === "NONE" || !own.overflowScrolling;
+    return { style: { ...limits(node), width: "100%", ...grows ? { height: null, "min-height": `max(${px(node.height)}, 100dvh)` } : {} }, place: { position: "relative" } };
+  }
+  const s = node;
+  return layout && laysOut(layout) && s.layoutPositioning !== "ABSOLUTE" ? flowChild(s, layout) : placedChild(s, parent, parent.type === "INSTANCE" && layout ? layout : parent);
+}
+
+// lib/io/web/richtext.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+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 solid = seg.fills?.find((f) => f.visible !== false && f.type === "SOLID" && f.color);
+  if (solid?.color) out.color = toHex(solid.color);
+  return out;
+}
+function textRuns(t) {
+  const text = t.characters ?? "";
+  const segs = [...t.styledSegments ?? []].filter((s) => s.end > s.start).sort((a, b) => a.start - b.start);
+  if (!segs.length && !t.link) return void 0;
+  const runs = [];
+  const push = (from, to, seg) => {
+    if (to <= from) return;
+    const link = seg?.link ?? t.link;
+    runs.push({ text: text.slice(from, to), style: seg ? runStyle(seg) : {}, ...link ? { link } : {} });
+  };
+  let at = 0;
+  for (const s of segs) {
+    const start = Math.max(at, Math.min(text.length, s.start)), end = Math.min(text.length, s.end);
+    push(at, start);
+    push(start, end, s);
+    at = Math.max(at, end);
+  }
+  push(at, text.length);
+  return runs;
+}
+
+// lib/io/web/tokens.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/document/dev-mode.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function codeSyntaxFor(v, platform) {
+  const explicit = v.codeSyntax?.[platform];
+  if (explicit) return explicit;
+  const parts = v.name.split("/").map((p) => p.trim()).filter(Boolean);
+  if (platform === "WEB") return `--${parts.join("-").toLowerCase().replace(/[^a-z0-9-]+/g, "-")}`;
+  const camel2 = parts.map((p, i) => {
+    const w = p.replace(/[^A-Za-z0-9]+/g, " ").trim().split(/\s+/);
+    return w.map((x, j) => i === 0 && j === 0 ? x.toLowerCase() : x[0].toUpperCase() + x.slice(1).toLowerCase()).join("");
+  }).join("");
+  return platform === "iOS" ? `Tokens.${camel2}` : `Tokens.${camel2}`;
+}
+
+// lib/io/web/tokens.ts
+var slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "x";
+var modeClass = (collection, mode) => `pc-${slug(collection.name)}-${slug(mode.name)}`;
+var isColor = (v) => !!v && typeof v === "object" && "r" in v && "g" in v && "b" in v;
+function cssValue(v, value2) {
+  if (v.type === "COLOR") return isColor(value2) ? (value2.a ?? 1) < 1 ? toRgba(value2) : toHex(value2) : null;
+  if (v.type === "FLOAT") return typeof value2 === "number" && Number.isFinite(value2) ? String(Math.round(value2 * 1e3) / 1e3) : null;
+  if (v.type === "STRING") return typeof value2 === "string" ? JSON.stringify(value2) : null;
+  return null;
+}
+function siteTokens(doc) {
+  const collections = Object.values(doc.variableCollections ?? {}).map((c) => ({
+    id: c.id,
+    name: c.name,
+    defaultMode: c.defaultModeId,
+    modes: c.modes.map((m) => ({ id: m.id, name: m.name, className: modeClass(c, m) }))
+  }));
+  const taken = /* @__PURE__ */ new Set();
+  const vars = [];
+  for (const v of Object.values(doc.variables ?? {}).sort((a, b) => a.name.localeCompare(b.name) || a.id.localeCompare(b.id))) {
+    const values = {};
+    for (const [mode, value2] of Object.entries(v.valuesByMode ?? {})) {
+      const css = cssValue(v, value2);
+      if (css !== null) values[mode] = css;
+    }
+    if (!Object.keys(values).length) continue;
+    let name = codeSyntaxFor(v, "WEB");
+    if (!name.startsWith("--")) name = `--${slug(name)}`;
+    if (taken.has(name)) name = `${name}-${v.id.replace(/[^a-zA-Z0-9]/g, "").slice(-4)}`;
+    taken.add(name);
+    vars.push({ id: v.id, name, type: v.type, collection: v.variableCollectionId, values });
+  }
+  const active = Object.entries(doc.activeVariableModes ?? {}).flatMap(([cid, mid]) => {
+    const c = collections.find((x) => x.id === cid);
+    const m = c && mid !== c.defaultMode ? c.modes.find((x) => x.id === mid) : void 0;
+    return m ? [m.className] : [];
+  });
+  return { collections, vars, active };
+}
+function tokensCSS(tokens) {
+  const rules = [];
+  const defaults = [];
+  const byMode = /* @__PURE__ */ new Map();
+  for (const v of tokens.vars) {
+    const c = tokens.collections.find((x) => x.id === v.collection);
+    const base = v.values[c?.defaultMode ?? ""] ?? Object.values(v.values)[0];
+    defaults.push(`  ${v.name}: ${base};`);
+    if (v.type === "FLOAT") rules.push(`@property ${v.name} { syntax: '<number>'; inherits: true; initial-value: ${base}; }`);
+    for (const m of c?.modes ?? []) {
+      if (m.id === c.defaultMode || v.values[m.id] === void 0 || v.values[m.id] === base) continue;
+      (byMode.get(m.className) ?? byMode.set(m.className, []).get(m.className)).push(`  ${v.name}: ${v.values[m.id]};`);
+    }
+  }
+  if (defaults.length) rules.push(`:root {
+${defaults.join("\n")}
+}`);
+  for (const [cls, lines] of byMode) rules.push(`.${cls} {
+${lines.join("\n")}
+}`);
+  return rules;
+}
+var px2 = (name) => `calc(var(${name}) * 1px)`;
+var NUMBER_PROPS = {
+  width: ["width", px2],
+  height: ["height", px2],
+  opacity: ["opacity", (n) => `var(${n})`],
+  cornerRadius: ["border-radius", px2],
+  itemSpacing: ["gap", px2],
+  fontSize: ["font-size", px2],
+  letterSpacing: ["letter-spacing", px2]
+};
+function tokenStyle(raw, style, tokens) {
+  const name = (id) => id ? tokens.vars.find((v) => v.id === id)?.name : void 0;
+  const out = {};
+  const fills = (raw.fills ?? []).filter((f) => f.visible !== false);
+  const fill = fills.length === 1 && fills[0].type === "SOLID" && (fills[0].opacity ?? 1) === 1 ? name(fills[0].boundVariables?.color) : void 0;
+  if (fill) {
+    if (raw.type === "TEXT") {
+      if (style.color) out.color = `var(${fill})`;
+    } else if (style.background) out.background = `var(${fill})`;
+  }
+  const stroke = raw.strokes?.[0];
+  const strokeVar = name(stroke?.boundVariables?.color);
+  if (strokeVar) {
+    if (style["border-color"]) out["border-color"] = `var(${strokeVar})`;
+    for (const p of ["border", "outline"]) if (style[p]) out[p] = style[p].replace(/(#[0-9A-Fa-f]{3,8}|rgba?\([^)]*\))$/, `var(${strokeVar})`);
+  }
+  for (const [prop, id] of Object.entries(raw.boundVariables ?? {})) {
+    const rule = NUMBER_PROPS[prop];
+    const token = tokens.vars.find((v) => v.id === id);
+    if (!rule || !token || token.type !== "FLOAT" || style[rule[0]] === void 0) continue;
+    out[rule[0]] = rule[1](token.name);
+  }
+  return out;
+}
+
+// lib/io/web/timeline.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+function frameWebMotion(doc, frameId, style) {
+  const nodes = doc.nodes;
+  const frame = nodes[frameId];
+  if (!frame || !hasFrameMotion(nodes, frameId)) return null;
+  const len = timelineDuration(nodes, frameId);
+  if (!(len > 0)) return null;
+  const steps = Math.max(1, Math.ceil(len / 1e3 * SAMPLE_RATE));
+  const times = [];
+  const poses = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = len * i / steps;
+    times.push(t);
+    poses.push(evaluatePose(nodes, { kind: "frame", frameId }, t).nodes);
+  }
+  const ids = /* @__PURE__ */ new Set();
+  for (const p of poses) for (const id in p) if (id !== frameId && p[id] !== nodes[id]) ids.add(id);
+  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 id of ids) {
+    const rest = id.includes("::") ? resolveVirtualNode(nodes, id) : nodes[id];
+    if (!rest || !underFrame(nodes, id, frameId)) continue;
+    const frames = keyframesOf(times, poses.map((p) => declarationsOf(p[id] ?? rest, rest, style)), len);
+    if (!frames) continue;
+    out.set(id, {
+      name: `timeline-${tag}-${n++}`,
+      frames,
+      durationMs: Math.round(len),
+      delayMs: 0,
+      iterations: loops ? "infinite" : 1,
+      direction: "normal",
+      fill: "both"
+    });
+  }
+  return out.size ? out : null;
+}
+function underFrame(nodes, id, frameId) {
+  const real = id.split("::")[0];
+  for (let n = nodes[real]; n; n = n.parentId ? nodes[n.parentId] : void 0) if (n.id === frameId) return true;
+  return false;
+}
+
+// lib/io/web/interactive.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+
+// lib/io/web/state-machine.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/machine-runtime.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/generated/runtimes.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PROTOTYPE_JS = 'function popcraftMount(root, spec) {\n  var els = {}, state = {}, owned = {}, orbit = {}, last = {}, holds = {}, hist = [], timers = [];\n  var nodes = [root].concat(Array.prototype.slice.call(root.querySelectorAll("[data-pc]")));\n  nodes.forEach(function(el) {\n    els[el.getAttribute("data-pc")] = el;\n  });\n  for (var m in spec.m) state[m] = spec.m[m];\n  for (var u in spec.e) (owned[spec.e[u][0]] = owned[spec.e[u][0]] || []).push(u);\n  var drags = {}, clicks = {};\n  spec.on.forEach(function(o) {\n    if (o[3] === "drag") drags[o[0]] = 1;\n    if (o[3] === "click" || o[3] === "press") clicks[o[0]] = 1;\n  });\n  function lookIn(u2, st) {\n    var e = spec.e[u2];\n    if (!e) return -2;\n    var i = e[1][st === void 0 ? state[e[0]] : st];\n    return i === void 0 ? -1 : i;\n  }\n  function tf(f, o) {\n    var ry = f[4] + (o ? o.ry : 0), rx = f[5] + (o ? o.rx : 0), p = [];\n    if (f[0] || f[1] || f[2]) p.push(f[2] ? "translate3d(" + f[0] + "px, " + f[1] + "px, " + f[2] + "px)" : "translate(" + f[0] + "px, " + f[1] + "px)");\n    if (f[3]) p.push("rotate(" + f[3] + "deg)");\n    if (ry) p.push("rotateY(" + ry + "deg)");\n    if (rx) p.push("rotateX(" + rx + "deg)");\n    if (f[6] !== 1 || f[7] !== 1) p.push("scale(" + f[6] + ", " + f[7] + ")");\n    return p.length ? p.join(" ") : "none";\n  }\n  function css(u2, i) {\n    var L = spec.L[i], c = L[0];\n    if (orbit[u2] && L[2]) c += ";transform:" + tf(L[2], orbit[u2]);\n    if (drags[u2]) c += ";touch-action:none;user-select:none;-webkit-user-select:none";\n    if (clicks[u2]) c += ";cursor:pointer";\n    return c;\n  }\n  var HIDE = ";opacity:0;visibility:hidden;pointer-events:none;position:absolute";\n  function set(u2, ms, ez) {\n    var el = els[u2], i = lookIn(u2, void 0);\n    if (!el || i === -2) return;\n    var tr = ms ? ";transition:all " + ms + "ms " + ez : ";transition:none";\n    if (i < 0) {\n      el.style.cssText = (last[u2] || "") + HIDE + tr;\n      return;\n    }\n    var c = css(u2, i), text = spec.L[i][1];\n    if (text !== null && el.textContent !== text) el.textContent = text;\n    if (ms && el.style.visibility === "hidden") {\n      el.style.cssText = c + ";opacity:0;transition:none";\n      void el.offsetWidth;\n    }\n    el.style.cssText = c + tr;\n    last[u2] = c;\n  }\n  var ANIM = /(?:^|;)animation:[^;]*/;\n  function anim(i) {\n    var m2 = i >= 0 ? ANIM.exec(spec.L[i][0]) : null;\n    return m2 ? m2[0] : "";\n  }\n  function go(m2, to, ms, ez, fromHistory) {\n    if (!(m2 in state) || state[m2] === to) return;\n    var list = owned[m2] || [];\n    list.forEach(function(u2) {\n      var a = lookIn(u2, void 0), b = lookIn(u2, to), el = els[u2];\n      if (!el || a < 0 || !anim(a) || anim(a) === anim(b)) return;\n      var cs = getComputedStyle(el);\n      el.style.cssText = css(u2, a) + ";animation:none;transition:none;transform:" + cs.transform + ";opacity:" + cs.opacity;\n    });\n    void root.offsetWidth;\n    if (m2 === "flow" && !fromHistory) hist.push(state[m2]);\n    state[m2] = to;\n    list.forEach(function(u2) {\n      set(u2, ms, ez);\n    });\n    arm();\n  }\n  function active(u2, trig) {\n    return spec.on.filter(function(o) {\n      return String(o[0]) === String(u2) && o[3] === trig && state[o[1]] === o[2];\n    });\n  }\n  function run(o, u2) {\n    var a = o[4];\n    if (a.k === "go") {\n      if (a.hold) {\n        if (!holds[u2]) holds[u2] = { m: a.m, back: state[a.m], ms: a.ms, ez: a.ez };\n      }\n      go(a.m, a.to, a.ms, a.ez, false);\n    } else if (a.k === "back" && hist.length) {\n      go(a.m, hist.pop(), 300, "ease-in-out", true);\n    }\n  }\n  function release(u2) {\n    var h = holds[u2];\n    if (!h) return;\n    delete holds[u2];\n    go(h.m, h.back, h.ms, h.ez, true);\n  }\n  function chain(el) {\n    var out = [];\n    for (var n = el; n && n !== root.parentNode; n = n.parentNode) {\n      var id2 = n.getAttribute && n.getAttribute("data-pc");\n      if (id2 !== null && id2 !== void 0) out.push(id2);\n      if (n === root) break;\n    }\n    return out;\n  }\n  function first(ids, trig) {\n    for (var i = 0; i < ids.length; i++) {\n      var a = active(ids[i], trig);\n      if (a.length) return { u: ids[i], list: a };\n    }\n    return null;\n  }\n  function arm() {\n    timers.forEach(clearTimeout);\n    timers = [];\n    spec.on.forEach(function(o) {\n      if (o[3] === "timeout" && state[o[1]] === o[2]) timers.push(setTimeout(function() {\n        if (state[o[1]] === o[2]) run(o, o[0]);\n      }, o[5]));\n    });\n  }\n  var over = [];\n  function hover(ids) {\n    var left = over.filter(function(u2) {\n      return ids.indexOf(u2) < 0;\n    }), entered = ids.filter(function(u2) {\n      return over.indexOf(u2) < 0;\n    });\n    over = ids;\n    left.forEach(function(u2) {\n      release(u2);\n      active(u2, "leave").forEach(function(o) {\n        run(o, u2);\n      });\n    });\n    entered.slice().reverse().forEach(function(u2) {\n      active(u2, "hover").concat(active(u2, "enter")).forEach(function(o) {\n        run(o, u2);\n      });\n    });\n  }\n  var press = null;\n  function onMove(e) {\n    if (press) {\n      var dx = e.clientX - press.x, dy = e.clientY - press.y;\n      if (!press.dragged && Math.abs(dx) + Math.abs(dy) > 5) {\n        press.dragged = true;\n        var d = first(press.ids, "drag");\n        if (d) {\n          var du = d.u;\n          press.drag = d;\n          d.list.forEach(function(o) {\n            if (o[4].k !== "orbit") run(o, du);\n          });\n        }\n        if (press.held) {\n          release(press.held);\n          press.held = null;\n        }\n      }\n      if (press.drag) {\n        var k = root.getBoundingClientRect().width / (root.offsetWidth || 1) || 1;\n        press.drag.list.forEach(function(o) {\n          var a = o[4];\n          if (a.k !== "orbit") return;\n          var cur = orbit[a.t] || { rx: 0, ry: 0 };\n          orbit[a.t] = { rx: cur.rx, ry: cur.ry + (e.clientX - press.lx) / k * a.d };\n          if (a.tilt) {\n            var tc = orbit[a.tt] || { rx: 0, ry: 0 };\n            orbit[a.tt] = { ry: tc.ry, rx: Math.max(a.lo, Math.min(a.hi, tc.rx - (e.clientY - press.ly) / k * a.d)) };\n          }\n          set(a.t, 0, "linear");\n          if (a.tt !== a.t) set(a.tt, 0, "linear");\n        });\n        press.lx = e.clientX;\n        press.ly = e.clientY;\n        return;\n      }\n    }\n    hover(chain(e.target));\n  }\n  function onDown(e) {\n    var ids = chain(e.target);\n    press = { x: e.clientX, y: e.clientY, lx: e.clientX, ly: e.clientY, ids, dragged: false, drag: null, held: null };\n    if (first(ids, "drag") && root.setPointerCapture) {\n      try {\n        root.setPointerCapture(e.pointerId);\n      } catch (err) {\n      }\n    }\n    var p = first(ids, "press");\n    if (p) {\n      var pu = p.u;\n      press.held = pu;\n      p.list.forEach(function(o) {\n        run(o, pu);\n      });\n    }\n  }\n  function onUp(e) {\n    var p = press;\n    press = null;\n    if (!p) return;\n    if (p.held) release(p.held);\n    if (p.dragged) return;\n    var c = first(p.ids, "click");\n    if (c) {\n      var cu = c.u;\n      c.list.forEach(function(o) {\n        run(o, cu);\n      });\n    }\n    void e;\n  }\n  function onLeave() {\n    if (!press) hover([]);\n  }\n  function onKey(e) {\n    spec.on.forEach(function(o) {\n      if (o[3] === "key" && state[o[1]] === o[2] && (!o[6] || o[6].toLowerCase() === String(e.key).toLowerCase())) run(o, o[0]);\n    });\n  }\n  for (var id in els) set(id, 0, "linear");\n  root.addEventListener("pointermove", onMove);\n  root.addEventListener("pointerdown", onDown);\n  root.addEventListener("pointerup", onUp);\n  root.addEventListener("pointercancel", onUp);\n  root.addEventListener("pointerleave", onLeave);\n  window.addEventListener("keydown", onKey);\n  arm();\n  return function() {\n    timers.forEach(clearTimeout);\n    root.removeEventListener("pointermove", onMove);\n    root.removeEventListener("pointerdown", onDown);\n    root.removeEventListener("pointerup", onUp);\n    root.removeEventListener("pointercancel", onUp);\n    root.removeEventListener("pointerleave", onLeave);\n    window.removeEventListener("keydown", onKey);\n  };\n}';
+var MACHINE_JS = 'function popcraftMachineCore(spec) {\n  function start(id) {\n    var t = spec.in[id];\n    return !t || t[0] === "event" ? void 0 : t[1];\n  }\n  function holds(g, values, fired) {\n    var t = spec.in[g[0]];\n    if (!t) return false;\n    if (t[0] === "event") return !!fired[g[0]];\n    var v = g[0] in values ? values[g[0]] : start(g[0]), w = g[2];\n    switch (g[1]) {\n      case "eq":\n        return v === w;\n      case "neq":\n        return v !== w;\n      case "gt":\n        return typeof v === "number" && typeof w === "number" && v > w;\n      case "gte":\n        return typeof v === "number" && typeof w === "number" && v >= w;\n      case "lt":\n        return typeof v === "number" && typeof w === "number" && v < w;\n      case "lte":\n        return typeof v === "number" && typeof w === "number" && v <= w;\n    }\n    return false;\n  }\n  function apply(values, actions) {\n    var out = {}, fired = {};\n    for (var k in values) out[k] = values[k];\n    actions.forEach(function(a) {\n      var t = spec.in[a[1]];\n      if (!t) return;\n      var cur = a[1] in out ? out[a[1]] : start(a[1]), by = typeof a[2] === "number" ? a[2] : 1;\n      if (a[0] === "set") {\n        if (t[0] === "event") fired[a[1]] = 1;\n        else if (a.length > 2 && typeof a[2] === typeof cur) out[a[1]] = a[2];\n      } else if (a[0] === "toggle") {\n        if (typeof cur === "boolean") out[a[1]] = !cur;\n      } else if (a[0] === "increment") {\n        if (typeof cur === "number") out[a[1]] = cur + by;\n      } else if (a[0] === "decrement") {\n        if (typeof cur === "number") out[a[1]] = cur - by;\n      } else if (a[0] === "fire") {\n        if (t[0] === "event") fired[a[1]] = 1;\n      } else if (a[0] === "reset") {\n        var s = start(a[1]);\n        if (s === void 0) delete out[a[1]];\n        else out[a[1]] = s;\n      }\n    });\n    return { values: out, fired };\n  }\n  function next(r, fired) {\n    var own = spec.t.filter(function(t2) {\n      return t2[0] === r.state;\n    });\n    var any = spec.t.filter(function(t2) {\n      return t2[0] === "*" && t2[1] !== r.state;\n    });\n    var all = own.concat(any);\n    for (var i = 0; i < all.length; i++) {\n      var t = all[i];\n      if (spec.s[t[1]] && t[2].every(function(g) {\n        return holds(g, r.values, fired);\n      })) return t;\n    }\n    return null;\n  }\n  function enter(r, id) {\n    var res = apply(r.values, spec.s[id] ? spec.s[id][4] : []);\n    return { run: { state: id, values: res.values }, fired: res.fired };\n  }\n  function settle(r, fired) {\n    var cur = r, ev = fired || {};\n    for (var i = 0; i < 16; i++) {\n      var t = next(cur, ev);\n      if (!t) break;\n      var n = enter(cur, t[1]);\n      cur = n.run;\n      ev = n.fired;\n    }\n    return cur;\n  }\n  function begin() {\n    var first = spec.s[spec.i] ? spec.i : Object.keys(spec.s)[0], values = {};\n    if (first === void 0) return null;\n    for (var k in spec.in) {\n      var s = start(k);\n      if (s !== void 0) values[k] = s;\n    }\n    var e = enter({ state: first, values }, first);\n    return settle(e.run, e.fired);\n  }\n  function hears(l, type, chain, key) {\n    if (l[0] !== type) return false;\n    if (type === "complete") return true;\n    if (type === "keyDown" || type === "keyUp") return !l[3] || String(l[3]).toLowerCase() === String(key).toLowerCase();\n    return l[1] === null || chain.indexOf(l[1]) >= 0;\n  }\n  function dispatch(r, type, chain, key) {\n    var heard = spec.l.filter(function(l) {\n      return hears(l, type, chain, key);\n    });\n    if (!heard.length) return r;\n    var res = apply(r.values, [].concat.apply([], heard.map(function(l) {\n      return l[2];\n    })));\n    return settle({ state: r.state, values: res.values }, res.fired);\n  }\n  function set(r, id, value) {\n    var t = spec.in[id];\n    if (!t) return r;\n    var res = apply(r.values, [t[0] === "event" ? ["fire", id] : ["set", id, value]]);\n    return settle({ state: r.state, values: res.values }, res.fired);\n  }\n  return { begin, dispatch, set };\n}\nfunction popcraftMachine(root, spec) {\n  var core = popcraftMachineCore(spec), run = core.begin(), anims = [], t0 = 0, done = false, raf = 0, over = [];\n  if (!run) return function() {\n  };\n  function chain(el) {\n    var out = [];\n    for (var n = el; n && n !== root.parentNode; n = n.parentNode) {\n      var id = n.getAttribute && n.getAttribute("data-sm");\n      if (id) out.push(id);\n      if (n === root) break;\n    }\n    return out;\n  }\n  function update(r) {\n    if (r === run) return;\n    var changed = r.state !== run.state;\n    run = r;\n    if (!changed) return;\n    t0 = performance.now();\n    done = false;\n    root.dispatchEvent(new CustomEvent("popcraft:state", { detail: { state: r.state, name: spec.s[r.state] ? spec.s[r.state][5] : r.state, values: r.values } }));\n  }\n  function tick(now) {\n    var s = spec.s[run.state];\n    if (s) {\n      var a = s[0], b = s[1], played = Math.max(0, now - t0) * s[3], t;\n      if (s[2] && b > a) t = a + played % (b - a);\n      else {\n        t = Math.min(b, a + played);\n        if (!done && a + played >= b) {\n          done = true;\n          update(core.dispatch(run, "complete", []));\n        }\n      }\n      anims.forEach(function(x) {\n        x.currentTime = t;\n      });\n    }\n    raf = requestAnimationFrame(tick);\n  }\n  function on(type) {\n    return function(e) {\n      update(core.dispatch(run, type, chain(e.target)));\n    };\n  }\n  function onMove(e) {\n    var ids = chain(e.target);\n    var left = over.filter(function(u) {\n      return ids.indexOf(u) < 0;\n    }), entered = ids.filter(function(u) {\n      return over.indexOf(u) < 0;\n    });\n    over = ids;\n    if (left.length) update(core.dispatch(run, "pointerExit", left));\n    if (entered.length) update(core.dispatch(run, "pointerEnter", entered));\n  }\n  function onLeave() {\n    if (over.length) {\n      var left = over;\n      over = [];\n      update(core.dispatch(run, "pointerExit", left));\n    }\n  }\n  function onKey(type) {\n    return function(e) {\n      var t = e.target;\n      if (e.repeat || e.metaKey || e.ctrlKey || t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;\n      var r = core.dispatch(run, type, [], e.key);\n      if (r !== run) {\n        e.preventDefault();\n        update(r);\n      }\n    };\n  }\n  var down = on("pointerDown"), up = on("pointerUp"), click = on("click"), keyDown = onKey("keyDown"), keyUp = onKey("keyUp");\n  anims = root.getAnimations ? root.getAnimations({ subtree: true }) : [];\n  anims.forEach(function(x) {\n    x.pause();\n  });\n  t0 = performance.now();\n  root.addEventListener("pointerdown", down);\n  root.addEventListener("pointerup", up);\n  root.addEventListener("click", click);\n  root.addEventListener("pointermove", onMove);\n  root.addEventListener("pointerleave", onLeave);\n  window.addEventListener("keydown", keyDown);\n  window.addEventListener("keyup", keyUp);\n  raf = requestAnimationFrame(tick);\n  function byName(k) {\n    if (spec.in[k]) return k;\n    for (var id in spec.in) if (spec.in[id][2] === k) return id;\n    return k;\n  }\n  var api = {\n    state: function() {\n      return run.state;\n    },\n    values: function() {\n      return run.values;\n    },\n    set: function(input, value) {\n      update(core.set(run, byName(input), value));\n    },\n    fire: function(input) {\n      update(core.set(run, byName(input), void 0));\n    },\n    destroy: function() {\n      cancelAnimationFrame(raf);\n      root.removeEventListener("pointerdown", down);\n      root.removeEventListener("pointerup", up);\n      root.removeEventListener("click", click);\n      root.removeEventListener("pointermove", onMove);\n      root.removeEventListener("pointerleave", onLeave);\n      window.removeEventListener("keydown", keyDown);\n      window.removeEventListener("keyup", keyUp);\n    }\n  };\n  root.popcraftMachine = api;\n  return api.destroy;\n}';
+
+// lib/io/web/state-machine.ts
+var defaultOf = (type) => type === "boolean" ? false : type === "number" ? 0 : type === "string" ? "" : null;
+function webStateMachine(doc, frameId) {
+  const sm = machineOf(doc.nodes[frameId]);
+  if (!sm || !doc.nodes[frameId]?.timeline) return null;
+  const timeline = frameTimeline(doc.nodes, frameId);
+  const duration = timelineDuration(doc.nodes, frameId);
+  const action = (a) => a.value === void 0 ? [a.type, a.input] : [a.type, a.input, a.value];
+  const spec = { i: sm.initial, s: {}, t: [], in: {}, l: [] };
+  for (const i of sortedValues(sm.inputs)) spec.in[i.id] = [i.type, i.type === "event" ? null : i.value ?? defaultOf(i.type), i.name];
+  for (const s of sortedValues(sm.states)) {
+    const [a, b] = stateStretch(s, timeline, duration);
+    spec.s[s.id] = [a, b, s.loop ? 1 : 0, s.speed ?? 1, (s.entry ?? []).map(action), s.name];
+  }
+  for (const t of sortedValues(sm.transitions)) {
+    spec.t.push([t.from, t.to, (t.guards ?? []).map((g) => {
+      const type = sm.inputs[g.input]?.type;
+      const value2 = type === "event" ? null : g.value ?? (type === "boolean" ? true : type === "number" ? 0 : "");
+      return [g.input, g.op ?? "eq", value2];
+    })]);
+  }
+  for (const l of sortedValues(sm.listeners)) {
+    if (!isKeyListener(l.type)) spec.l.push([l.type, l.layer ?? null, l.actions.map(action)]);
+    else spec.l.push(l.key ? [l.type, null, l.actions.map(action), l.key] : [l.type, null, l.actions.map(action)]);
+  }
+  return spec;
+}
+var machineLayers = (spec) => new Set((spec?.l ?? []).map((l) => l[1]).filter((id) => !!id));
+var machineScript = (spec) => `${MACHINE_JS}
+popcraftMachine(document.querySelector('[data-sm-root]'), ${JSON.stringify(spec)});`;
+
+// lib/io/web/interactive.ts
+var FLOW = "flow";
+var interactionsOf = (n) => n?.interactions ?? [];
+var realId = (id) => id.includes("::") ? id.slice(id.lastIndexOf("::") + 2) : id;
+var nodeOf = (doc, id) => doc.nodes[id] ?? (id.includes("::") ? resolveVirtualNode(doc.nodes, id) ?? void 0 : void 0);
+function subtreeIds(doc, id, out = /* @__PURE__ */ new Set()) {
+  if (out.has(id)) return out;
+  const n = doc.nodes[id];
+  if (!n) return out;
+  out.add(id);
+  if (n.type === "INSTANCE") subtreeIds(doc, n.mainComponentId, out);
+  for (const c of n.childIds ?? []) subtreeIds(doc, c, out);
+  return out;
+}
+function flowScreens(doc, startId) {
+  const start = doc.nodes[startId];
+  if (!start || start.type !== "FRAME" || doc.nodes[start.parentId ?? ""]?.type !== "PAGE") return [startId];
+  const out = [startId];
+  for (let i = 0; i < out.length; i++) {
+    for (const id of subtreeIds(doc, out[i])) {
+      for (const ix of interactionsOf(doc.nodes[id])) {
+        const to = ix.action.navigationType === "NAVIGATE" ? ix.action.destinationId : null;
+        const dest = to ? doc.nodes[to] : void 0;
+        if (!dest || out.includes(dest.id) || dest.type !== "FRAME" || doc.nodes[dest.parentId ?? ""]?.type !== "PAGE") continue;
+        if (Math.round(dest.width) !== Math.round(start.width) || Math.round(dest.height) !== Math.round(start.height)) continue;
+        out.push(dest.id);
+      }
+    }
+  }
+  return out;
+}
+function variantStates(doc, mainId) {
+  const out = [mainId];
+  for (let i = 0; i < out.length; i++) {
+    for (const id of subtreeIds(doc, out[i])) {
+      for (const ix of interactionsOf(doc.nodes[id])) {
+        const to = ix.action.navigationType === "CHANGE_TO" ? ix.action.destinationId : null;
+        if (to && !out.includes(to) && doc.nodes[to]?.type === "COMPONENT") out.push(to);
+      }
+    }
+  }
+  return out;
+}
+var stateName = (doc, id) => {
+  const n = doc.nodes[id];
+  const v = n?.variantProperties;
+  return v ? Object.values(v).join(", ") : n?.name ?? id;
+};
+var 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"
+};
+var EASINGS = { 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)" };
+var glideOf = (t) => !t || t.type === "INSTANT" || t.type === "CUT" ? { ms: 0, easing: "linear" } : { ms: Math.max(0, Math.round(t.duration)), easing: EASINGS[t.easing] ?? "ease-in-out" };
+function buildState(ctx, doc, id, machine, state, start, variantOf) {
+  const expand = /* @__PURE__ */ new Map();
+  const tree = buildPlainTree(doc, id, ctx.opts, start, { built: (web, _node, at) => {
+    if (web.type === "INSTANCE") expand.set(web, at);
+  } });
+  for (const r of tree.rules ?? []) ctx.rules.add(r);
+  if (tree.truncated) ctx.truncated = true;
+  const ids = /* @__PURE__ */ new Map();
+  const index = (w) => {
+    ids.set(w.id, w);
+    w.children.forEach(index);
+  };
+  index(tree.root);
+  const visit = (w, owner, st, isRoot) => {
+    w.owner = owner;
+    w.looks = { [st]: lookOf(w, isRoot) };
+    if (w.motion) ctx.keyframes.add(w.motion.keyframes);
+    const node = nodeOf(doc, w.id);
+    note(ctx, w, interactionsOf(doc.nodes[realId(w.id)]), owner, st, ids);
+    const at = expand.get(w);
+    const inst = node?.type === "INSTANCE" ? node : void 0;
+    const states = inst && at && ctx.depth < 4 ? variantStates(doc, inst.mainComponentId) : [];
+    if (inst && at && states.length > 1 && w.id !== variantOf) {
+      const m = { id: `m${ctx.machines.length}`, initial: inst.mainComponentId, states: states.map((s) => ({ id: s, name: stateName(doc, s) })) };
+      ctx.machines.push(m);
+      w.machine = m;
+      const perState = [];
+      for (const s of states) {
+        let kids;
+        if (s === inst.mainComponentId) {
+          kids = w.children;
+          kids.forEach((c) => visit(c, m.id, s, false));
+        } else {
+          const shown = { ...doc, nodes: { ...doc.nodes, [inst.id]: { ...inst, mainComponentId: s } } };
+          ctx.depth++;
+          try {
+            kids = buildState(ctx, shown, inst.id, m.id, s, at, inst.id).children;
+          } finally {
+            ctx.depth--;
+          }
+        }
+        note(ctx, w, interactionsOf(doc.nodes[s]), m.id, s, ids, m.id);
+        perState.push([s, kids]);
+      }
+      w.children = mergeChildren(perState, m.id, m.states.map((s) => s.id), ctx);
+    } else if (w.id === variantOf) {
+      w.children.forEach((c) => visit(c, owner, st, false));
+    } else {
+      if (inst) note(ctx, w, interactionsOf(doc.nodes[inst.mainComponentId]), owner, st, ids);
+      w.children.forEach((c) => visit(c, owner, st, false));
+    }
+  };
+  visit(tree.root, machine, state, !start);
+  return tree.root;
+}
+function note(ctx, w, list, machine, state, ids, hostMachine) {
+  if (!list.length) return;
+  const at = ctx.pending.get(w) ?? [];
+  for (const ix of list) at.push({ machine, state, ix, hostMachine: hostMachine ?? (machine !== FLOW ? machine : void 0), ids });
+  ctx.pending.set(w, at);
+}
+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((k) => {
+    const base = `${k.name}\0${k.type}`;
+    const i = seen.get(base) ?? 0;
+    seen.set(base, i + 1);
+    return [`${base}\0${i}`, k];
+  });
+}
+function mergeChildren(perState, machine, states, ctx) {
+  const order = [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const [state, kids] of perState) {
+    let after = -1;
+    for (const [k, node] of keyed(kids)) {
+      let at = order.indexOf(k);
+      if (at < 0) {
+        order.splice(after + 1, 0, k);
+        at = after + 1;
+      }
+      after = at;
+      (groups.get(k) ?? groups.set(k, []).get(k)).push([state, node]);
+    }
+  }
+  return order.map((k) => mergeNode(groups.get(k), machine, states, ctx));
+}
+function mergeNode(items, machine, states, ctx) {
+  const [, first] = items[0];
+  if (first.owner !== machine) {
+    for (const [, w] of items.slice(1)) alias(ctx, w, first);
+    return first;
+  }
+  const looks = {};
+  for (const s of states) looks[s] = null;
+  for (const [s, w] of items) looks[s] = w.looks?.[s] ?? null;
+  const merged = { ...first, looks };
+  const pend = items.flatMap(([, w]) => ctx.pending.get(w) ?? []);
+  if (pend.length) ctx.pending.set(merged, pend);
+  for (const [, w] of items) if (w !== merged) alias(ctx, w, merged);
+  if (first.machine) {
+    for (const [, w] of items) if (w.machine && w.machine !== first.machine) ctx.renamed.set(w.machine.id, first.machine.id);
+  }
+  merged.children = first.machine ? first.children : mergeChildren(items.map(([s, w]) => [s, w.children]), machine, states, ctx);
+  return merged;
+}
+function alias(ctx, from, to) {
+  const a = ctx.alias ??= /* @__PURE__ */ new Map();
+  a.set(from, to);
+}
+function mergedOf(ctx, w) {
+  const a = ctx.alias;
+  let cur = w;
+  for (let i = 0; i < 16 && a?.has(cur); i++) cur = a.get(cur);
+  return cur;
+}
+function actionOf(ctx, p) {
+  const a = p.ix.action;
+  const glide = glideOf(a.transition);
+  const hold = p.ix.trigger === "ON_HOVER" || p.ix.trigger === "ON_PRESS";
+  switch (a.navigationType) {
+    case "NAVIGATE":
+      return a.destinationId && ctx.screens.has(a.destinationId) ? { kind: "go", machine: FLOW, to: a.destinationId, ...glide, ...hold ? { hold } : {} } : null;
+    case "BACK":
+      return ctx.screens.size > 1 ? { kind: "back", machine: FLOW } : null;
+    case "CHANGE_TO":
+      return p.hostMachine && a.destinationId ? { kind: "go", machine: p.hostMachine, to: a.destinationId, ...glide, ...hold ? { hold } : {} } : null;
+    case "ORBIT_3D": {
+      const o = a.orbit ?? {};
+      const uidOf = (id) => {
+        const w = id ? p.ids.get(id) : void 0;
+        return w ? mergedOf(ctx, w).uid : void 0;
+      };
+      const uid = uidOf(a.destinationId);
+      const tiltUid = uidOf(o.tiltLayerId) ?? uid;
+      return uid === void 0 || tiltUid === void 0 ? null : { kind: "orbit", target: uid, tiltTarget: tiltUid, degreesPerPx: o.degreesPerPx ?? 0.4, tilt: !!o.tilt, tiltRange: o.tiltRange ?? [-30, 30] };
+    }
+    default:
+      return null;
+  }
+}
+function buildWebTree(doc, nodeId, opts = {}) {
+  const tree = buildTree(doc, nodeId, opts);
+  const machine = opts.static || opts.stateMachine === false ? null : webStateMachine(doc, nodeId);
+  return machine ? { ...tree, stateMachine: machine } : tree;
+}
+function buildTree(doc, nodeId, opts = {}) {
+  if (opts.static || opts.target === "site") return buildPlainTree(doc, nodeId, opts);
+  const screens = flowScreens(doc, nodeId);
+  const anything = screens.length > 1 || [...subtreeIds(doc, nodeId)].some((id) => interactionsOf(doc.nodes[id]).some((ix) => ix.action.navigationType === "CHANGE_TO" || ix.action.navigationType === "ORBIT_3D"));
+  if (!anything) return buildPlainTree(doc, nodeId, opts);
+  const flow = { id: FLOW, initial: nodeId, states: screens.map((s) => ({ id: s, name: doc.nodes[s]?.name ?? s })) };
+  const ctx = { doc, 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(ctx, doc, s, FLOW, s)]);
+  const truncated = !!ctx.truncated;
+  const root = mergeNode(roots, FLOW, screens, ctx);
+  let uid = 0;
+  const number = (w) => {
+    w.uid = uid++;
+    w.children.forEach(number);
+  };
+  number(root);
+  const place = (w) => {
+    const pend = ctx.pending.get(w);
+    if (pend) {
+      const seen = /* @__PURE__ */ new Set();
+      const on = [];
+      for (const raw of pend) {
+        const p = { ...raw, machine: ctx.renamed.get(raw.machine) ?? raw.machine, ...raw.hostMachine ? { hostMachine: ctx.renamed.get(raw.hostMachine) ?? raw.hostMachine } : {} };
+        const trigger = TRIGGERS[p.ix.trigger];
+        const action = trigger ? actionOf(ctx, p) : null;
+        if (!trigger || !action) continue;
+        const ix = { machine: p.machine, state: p.state, trigger, ...p.ix.triggerDelay ? { delay: p.ix.triggerDelay } : {}, ...p.ix.triggerKey ? { key: p.ix.triggerKey } : {}, action };
+        const sig = JSON.stringify(ix);
+        if (!seen.has(sig)) {
+          seen.add(sig);
+          on.push(ix);
+        }
+      }
+      if (on.length) w.on = on;
+    }
+    w.children.forEach(place);
+  };
+  place(root);
+  return { root, truncated, ...ctx.rules.size ? { rules: [...ctx.rules].sort() } : {}, interactive: { machines: ctx.machines.filter((m) => !ctx.renamed.has(m.id)), keyframes: [...ctx.keyframes] } };
+}
+
+// lib/io/web/tree.ts
+var DEFAULT_NODE_CAP = 120;
+var EXPORT_NODE_CAP = 2e4;
+var PAINTED = ["background", "border", "border-style", "border-color", "border-width", "outline", "border-radius", "box-shadow", "box-sizing", "filter", "backdrop-filter"];
+var anchorMemo = /* @__PURE__ */ new WeakMap();
+function anchorTargets(doc) {
+  const hit = anchorMemo.get(doc.nodes);
+  if (hit) return hit;
+  const out = /* @__PURE__ */ new Set();
+  for (const id in doc.nodes) {
+    const n = doc.nodes[id];
+    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(doc.nodes, out);
+  return out;
+}
+var 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) || // A game's win banner (LayerPhysics role 'win') and a player's run and jump poses: hidden in the design, shown by
+// the platformer on winning or as the player moves.
+n.physics?.role === "win" || n.physics?.role === "pose" || n.physics?.role === "reveal";
+function spriteOnly(nodes, id) {
+  let leaves = 0;
+  const visit = (nid, depth) => {
+    const n = nodes[nid];
+    if (!n || n.visible === false) return true;
+    if (n.type === "PIXEL_GRID") {
+      leaves++;
+      return true;
+    }
+    if (depth > 8 || n.type !== "INSTANCE" && n.type !== "COMPONENT" && n.type !== "FRAME" && n.type !== "GROUP") return false;
+    const main = n.mainComponentId;
+    const kids = n.childIds?.length ? n.childIds : main ? [main] : [];
+    return kids.every((k) => visit(k, depth + 1));
+  };
+  return visit(id, 0) && leaves > 0;
+}
+function prepared(node, doc) {
+  let n = node;
+  if (n.id.includes("::")) n = withInstanceBox(n, doc.nodes);
+  n = resolveNodeVariables(n, doc.variables, doc.variableCollections, doc.activeVariableModes, exprData(doc));
+  n = resolveTextNodeStyles(n, doc.styles ?? {});
+  return n;
+}
+function layoutOf(node, nodes) {
+  if (!node) return null;
+  if (node.type === "INSTANCE") {
+    const mainId = node.mainComponentId;
+    const main = mainId ? nodes[mainId] : void 0;
+    return main ?? null;
+  }
+  if (node.id.includes("::")) {
+    const real = nodes[node.id.split("::").pop()];
+    return real ?? node;
+  }
+  return node;
+}
+var isFlex = (f) => f?.layoutMode === "HORIZONTAL" || f?.layoutMode === "VERTICAL";
+var round4 = (v) => Math.round(v * 1e3) / 1e3;
+function buildPlainTree(doc, nodeId, opts = {}, start, hooks = {}) {
+  const cap = opts.nodeCap ?? DEFAULT_NODE_CAP;
+  const first = doc.nodes[nodeId] ?? (nodeId.includes("::") ? childLookup(doc, nodeId) : void 0);
+  if (!first) throw new Error(`No node ${nodeId}`);
+  let emitted = 0;
+  let truncated = false;
+  let folds = 0;
+  const tokens = opts.target === "site" && Object.keys(doc.variables ?? {}).length ? siteTokens(doc) : null;
+  const anchored = anchorTargets(doc);
+  const pageItem = () => {
+    const c = opts.item && doc.collections?.[opts.item.collectionId];
+    if (c && opts.item.recordId === ITEM_RECORD) return { collection: c, record: templateRecord(c), suffix: `~${ITEM_RECORD}` };
+    const r = opts.item && doc.records?.[opts.item.recordId];
+    return c && r ? { collection: c, record: r, suffix: "" } : null;
+  };
+  let item = pageItem();
+  const scopeOf = (it) => itemScope(it.collection, it.record, withData(variablesScope(doc.variables, doc.variableCollections, doc.activeVariableModes), doc));
+  const itemised = (node, raw, it) => itemNode(node, raw, it.collection, it.record, scopeOf(it));
+  const itemLink = (link, it) => {
+    const filled = it && link.kind === "url" ? { ...link, url: itemText(link.url, it.collection, it.record) } : it && (link.kind === "email" || link.kind === "tel") ? { ...link, value: itemText(link.value, it.collection, it.record) } : link;
+    if (filled.kind === "screen") {
+      const dest = doc.nodes[filled.frameId];
+      const base = opts.routes?.[filled.frameId];
+      const of = dest?.route?.collectionId;
+      if (of && base !== void 0) {
+        const slugField = it?.record.id === ITEM_RECORD && it.collection.id === of ? it.collection.fields.find((f) => f.id === it.collection.slugFieldId) ?? it.collection.fields.find((f) => f.type === "SLUG" || f.type === "TEXT") : void 0;
+        if (slugField) return { link: filled, href: `${base === "/" ? "" : base}/${itemMark(fieldKey(slugField.name))}`, screen: filled.frameId };
+        const slugs = recordSlugs(doc, of);
+        const rec = it?.collection.id === of ? it.record.id : slugs.keys().next().value;
+        const slug2 = rec ? slugs.get(rec) : void 0;
+        return slug2 ? { link: filled, href: `${base === "/" ? "" : base}/${slug2}`, screen: `${filled.frameId}~${rec}` } : { link: filled, href: null };
+      }
+      return { link: filled, href: base ?? null, screen: filled.frameId };
+    }
+    if (filled.kind === "url" && it?.record.id === ITEM_RECORD && itemMarks(filled.url)) return { link: filled, href: filled.url.trim() };
+    return { link: filled, href: hrefOf(filled, doc.nodes, opts.routes) };
+  };
+  const fields = /* @__PURE__ */ new Map();
+  const styleOpts = { fullImageUrl: opts.fullImageUrls ?? opts.target === "site" };
+  const stylesOf = (n) => styleMapFor(n, doc.styles, styleOpts);
+  let motion = null;
+  const timeline = !opts.static && !start && first.type === "FRAME" ? frameWebMotion(doc, first.id, (n) => stylesOf(prepared(n, doc))) : null;
+  let nodesNow = doc.nodes;
+  const build = (raw, parent, in3D, fold) => {
+    const pinned = pinnedRecord(doc, raw);
+    const outerItem = item, outerNodes = nodesNow;
+    const pinnedTo = pinned ? doc.collections[pinned.collectionId] : void 0;
+    const holds = raw.type === "INSTANCE" || !!raw.childIds?.length;
+    const slugField = holds && pinnedTo?.schema && opts.listTemplates && opts.target === "site" ? pinnedTo.fields.find((f) => f.id === pinnedTo.slugFieldId) ?? pinnedTo.fields.find((f) => f.type === "SLUG") : void 0;
+    if (pinned && pinnedTo) item = slugField ? { collection: pinnedTo, record: templateRecord(pinnedTo), suffix: item?.suffix ?? "" } : { collection: pinnedTo, record: pinned, suffix: item?.suffix ?? "" };
+    if (item && raw.type === "INSTANCE" && raw.boundExpressions) {
+      const shown = itemised(raw, raw, item);
+      if (shown !== raw) nodesNow = { ...nodesNow, [raw.id]: shown };
+    }
+    try {
+      const web = buildLayer(raw, parent, in3D, fold);
+      if (!web || !pinned || !slugField) return web;
+      const value2 = String(pinned.values[slugField.id] ?? "");
+      return { ...web, children: [], repeat: { collectionId: pinnedTo.id, template: web.children, limit: 1, pick: { key: fieldKey(slugField.name), value: value2 } } };
+    } finally {
+      item = outerItem;
+      nodesNow = outerNodes;
+    }
+  };
+  const buildLayer = (raw, parent, in3D, fold) => {
+    if (emitted >= cap) {
+      truncated = true;
+      return null;
+    }
+    emitted++;
+    const node = item ? itemised(prepared(raw, doc), raw, item) : prepared(raw, doc);
+    const waits = node.visible === false && parent !== null;
+    if (waits && !(opts.target === "site" && followsVisibility(raw))) return null;
+    const exp = expressibility(node, doc.styles);
+    const f = layoutOf(node, doc.nodes) ?? node;
+    const style = stylesOf(node);
+    if (f !== node && !style.display) Object.assign(style, flexDeclarations(f));
+    const through = in3D && passesThrough(raw, doc.nodes);
+    const own = typeof node.opacity === "number" ? node.opacity : 1;
+    if (through) {
+      style["transform-style"] = "preserve-3d";
+      delete style.opacity;
+      style[foldVar(fold + 1)] = fold ? `calc(var(${foldVar(fold)}) * ${round4(own)})` : String(round4(own));
+      folds = Math.max(folds, fold + 1);
+    } else if (fold) style.opacity = own === 1 ? `var(${foldVar(fold)})` : `calc(var(${foldVar(fold)}) * ${round4(own)})`;
+    if (own === 0) style["pointer-events"] = "none";
+    if (clickable(raw) && !style.cursor) style.cursor = "pointer";
+    const web = {
+      id: item?.suffix ? `${node.id}${item.suffix}` : node.id,
+      name: node.name || node.type,
+      type: node.type,
+      x: Math.round(node.x),
+      y: Math.round(node.y),
+      width: Math.round(node.width),
+      height: Math.round(node.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(layoutOf(parent, doc.nodes)) || layoutOf(parent, doc.nodes)?.layoutMode === "GRID") && node.layoutPositioning !== "ABSOLUTE" ? "flow" : "absolute",
+      style,
+      children: []
+    };
+    if (tokens) Object.assign(style, tokenStyle(raw, style, tokens));
+    if (opts.target === "site") {
+      const lay = siteLayout(node, parent, layoutOf(parent, doc.nodes));
+      for (const [k, v] of Object.entries(lay.style)) {
+        if (v === null) delete style[k];
+        else style[k] = v;
+      }
+      if (laysOut(f) || f.overflowScrolling) Object.assign(style, containerStyle(f));
+      if (node.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 || !start?.parent)) web.place = lay.place;
+    }
+    if (waits) web.hidden = true;
+    const sem = node.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 = node.control;
+    if (control) {
+      const named = control.name ? { name: control.name } : {};
+      if (control.kind === "FORM") {
+        web.tag = "form";
+        if (isCommerceAction(control.formAction)) web.action = control.formAction;
+      } 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(doc.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 = node.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": node.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(node.id)) web.attrs = { ...web.attrs, id: anchorOf(node) };
+    if (through) web.preserve3d = true;
+    web.tf = transformParts(node);
+    if (typeof node.altText === "string") web.alt = node.altText;
+    if (parent === null) web.positioning = start?.parent ? web.positioning : "flow";
+    if (f.layoutMode === "HORIZONTAL" || f.layoutMode === "VERTICAL") {
+      web.layout = {
+        direction: f.layoutMode === "HORIZONTAL" ? "row" : "column",
+        gap: f.itemSpacing ?? 0,
+        justify: JUSTIFY[f.primaryAxisAlignItems ?? "MIN"],
+        align: ALIGN[f.counterAxisAlignItems ?? "MIN"],
+        padding: f.padding ?? { top: 0, right: 0, bottom: 0, left: 0 }
+      };
+    }
+    if (node.type === "TEXT") {
+      const t = node;
+      const solid = (t.fills ?? []).find((p) => p.visible !== false && p.type === "SOLID" && p.color);
+      web.text = {
+        characters: t.characters ?? "",
+        align: t.textAlign,
+        fontFamily: t.fontFamily,
+        fontSize: t.fontSize,
+        fontWeight: t.fontWeight,
+        italic: t.fontStyle === "italic",
+        ...solid?.color ? { color: toHex(solid.color) } : {},
+        ...t.letterSpacing ? { letterSpacing: t.letterSpacing } : {},
+        ...t.lineHeight !== "AUTO" ? { lineHeight: t.lineHeight } : {}
+      };
+      const runs = textRuns(t);
+      if (runs) web.runs = runs;
+    }
+    const tl = timeline?.get(node.id);
+    const mo = tl ?? motion?.children.get(node.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(node, { escape: escapeHTML, color: (c) => toRgba({ ...c, a: c.a ?? 1 }) });
+      if (said.tag) web.tag = said.tag;
+      Object.assign(style, said.style);
+      web.html = said.html;
+      hooks.built?.(web, node, { parent, in3D, fold });
+      return web;
+    }
+    const code = opts.target === "site" ? codeOf(doc.nodes, raw) : null;
+    if (code && doc.codeModules?.[code.moduleId]) {
+      for (const k of PAINTED) delete style[k];
+      web.code = { module: code.moduleId, ...code.exportName ? { export: code.exportName } : {}, props: codeProps(doc.nodes, node) };
+      hooks.built?.(web, node, { parent, in3D, fold });
+      return web;
+    }
+    const sprite = opts.target === "site" && raw.type === "INSTANCE" && !raw.id.includes("::") && spriteOnly(doc.nodes, raw.id) && isLive(doc.nodes, raw.id);
+    if (!exp.css || sprite) {
+      for (const k of PAINTED) delete style[k];
+      web.asset = { kind: opts.assetKind ?? (exp.needsRaster ? "png" : "svg"), reason: exp.reason || (sprite ? "an animated sprite" : ""), ...item?.suffix ? { of: node.id } : {} };
+      if (isPixelArt(doc, raw.id)) style["image-rendering"] = "pixelated";
+      if (sprite || opts.target === "site" && renderMode(node, { styles: doc.styles, live: isLive(doc.nodes, raw.id) }) === "island") web.island = true;
+      hooks.built?.(web, node, { parent, in3D, fold });
+      return web;
+    }
+    const lost = capability(node, "css", doc.styles).dropped.find((f2) => f2.startsWith("paint:"));
+    if (lost && !node.id.includes("::")) {
+      const site = opts.target === "site";
+      style.isolation = "isolate";
+      web.children.push({
+        id: `${node.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: node.id, self: true },
+        ...site && movesItself(raw) ? { island: true } : {},
+        children: []
+      });
+    }
+    const outer = motion;
+    if (!motion && node.type === "INSTANCE" && !opts.static) {
+      motion = instanceWebMotion(doc, node, (n) => stylesOf(prepared(n, doc)));
+      if (motion && (motion.trigger !== "load" || opts.target === "site")) web.motionTrigger = motion.trigger;
+    }
+    try {
+      if (opts.includeChildren !== false) {
+        const kids3D = in3D ? through : is3DContext(raw) && !raw.id.includes("::");
+        const kidFold = through ? fold + 1 : 0;
+        const repeat = raw.repeat;
+        const collection = repeat && doc.collections?.[repeat.collectionId];
+        if (repeat && collection && opts.target === "site") {
+          const outerItem = item;
+          const under = outerItem ? scopeOf(outerItem) : withData(variablesScope(doc.variables, doc.variableCollections, doc.activeVariableModes), doc);
+          try {
+            for (const record of repeatRecords(doc, repeat, under)) {
+              item = { collection, record, suffix: `${outerItem?.suffix ?? ""}~${record.id}` };
+              for (const child of childrenOf(node, nodesNow)) {
+                const built = build(child, node, kids3D, kidFold);
+                if (built) web.children.push(built);
+              }
+            }
+            if (collection.perVisitor && !outerItem || collection.schema && opts.listTemplates) {
+              item = { collection, record: templateRecord(collection), suffix: `~${ITEM_RECORD}` };
+              const template = [];
+              for (const child of childrenOf(node, nodesNow)) {
+                const built = build(child, node, kids3D, kidFold);
+                if (built) template.push(built);
+              }
+              const sortField = repeat.sort && collection.fields.find((f2) => f2.id === repeat.sort.fieldId);
+              web.repeat = {
+                collectionId: collection.id,
+                template,
+                ...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(node, nodesNow)) {
+          const built = build(child, node, kids3D, kidFold);
+          if (built) web.children.push(built);
+        }
+      }
+    } finally {
+      motion = outer;
+    }
+    if (web.children.some((c) => c.positioning === "absolute")) {
+      for (const c of web.children) if (c.positioning === "flow") c.layered = true;
+    }
+    hooks.built?.(web, node, { parent, in3D, fold });
+    return web;
+  };
+  const root = build(first, start?.parent ?? null, start?.in3D ?? false, start?.fold ?? 0);
+  if (!root) throw new Error("Node cap of 0");
+  return { root, truncated, ...folds ? { rules: foldRules(folds) } : {}, ...tokens?.vars.length ? { tokens } : {} };
+}
+var foldVar = (depth) => `--pc-f${depth}`;
+var foldRules = (depth) => Array.from({ length: depth }, (_, i) => `@property ${foldVar(i + 1)} { syntax: '<number>'; inherits: true; initial-value: 1; }`);
+function childLookup(doc, id) {
+  const at = id.lastIndexOf("::");
+  const host = at > 0 ? id.slice(0, at) : "";
+  const hostNode = doc.nodes[host] ?? (host.includes("::") ? childLookup(doc, host) : void 0);
+  return hostNode ? childrenOf(hostNode, doc.nodes).find((c) => c.id === id) : void 0;
+}
+var clickable = (n) => !!n.semantics?.link || (n.interactions ?? []).some((ix) => ix.trigger === "ON_CLICK" || ix.trigger === "ON_PRESS");
+function flatten(node, out = []) {
+  out.push(node);
+  for (const c of node.children) flatten(c, out);
+  return out;
+}
+
+export {
+  cleanName,
+  swiftColor,
+  composeColor,
+  parseCssColor,
+  styleMapFor,
+  styleMapToCSSText,
+  styleMapToInline,
+  styleMapToJSX,
+  expressibility,
+  escapeHTML,
+  placementStyle,
+  altFor,
+  labelSVG,
+  imageRoleAttrs,
+  pictureOf,
+  MOTION_PLAY_RULE,
+  CHECK_STYLE,
+  elementOf,
+  MOTION_SCRIPT,
+  modeClass,
+  siteTokens,
+  tokensCSS,
+  PROTOTYPE_JS,
+  webStateMachine,
+  machineLayers,
+  machineScript,
+  variantStates,
+  buildWebTree,
+  DEFAULT_NODE_CAP,
+  EXPORT_NODE_CAP,
+  prepared,
+  buildPlainTree,
+  foldVar,
+  foldRules,
+  flatten
+};