@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-HVEQSYOW.js

@@ -1,1677 +0,0 @@
-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
-};