@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-RA6YEINN.js

@@ -0,0 +1,740 @@
+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 {
+  routesOf,
+  screensOf
+} from "./chunk-HXDZI7ZZ.js";
+import {
+  MOTION_PLAY_RULE,
+  altFor,
+  buildPlainTree,
+  elementOf,
+  escapeHTML,
+  flatten,
+  labelSVG,
+  machineLayers,
+  pictureOf,
+  placementStyle,
+  styleMapToCSSText,
+  styleMapToJSX,
+  variantStates,
+  webStateMachine
+} from "./chunk-XOEW6FWD.js";
+import {
+  stopsOf
+} from "./chunk-OIQSOCOU.js";
+import {
+  pixelCell
+} from "./chunk-ZFFXEI5W.js";
+import {
+  breakpointDocument,
+  breakpointsOf
+} from "./chunk-D27VWWNN.js";
+import {
+  ITEM_RECORD,
+  copyRecord,
+  copySuffix,
+  itemMarks,
+  itemText,
+  layerId,
+  recordSlugs,
+  recordsIn
+} from "./chunk-X4J663TQ.js";
+import {
+  frameRunsOn,
+  frameTimeline,
+  hasFrameMotion,
+  timelineDuration
+} from "./chunk-K5H4DH3X.js";
+import {
+  is3DTransition
+} from "./chunk-Q5FICCEE.js";
+import {
+  getWorldTransform,
+  init_scene_graph,
+  uprightBounds
+} from "./chunk-F6JQTMKE.js";
+import {
+  init_expressions
+} from "./chunk-OYXVKB4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/io/web/fonts.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function fontFamilies(tree) {
+  const families = /* @__PURE__ */ new Map();
+  const walk = (n) => {
+    if (n.text?.fontFamily) (families.get(n.text.fontFamily) ?? families.set(n.text.fontFamily, /* @__PURE__ */ new Set()).get(n.text.fontFamily)).add(n.text.fontWeight || 400);
+    n.children.forEach(walk);
+  };
+  walk(tree.root);
+  return new Map([...families].sort(([a], [b]) => a.localeCompare(b)).map(([f, w]) => [f, [...w].sort((a, b) => a - b)]));
+}
+function fontsURL(families) {
+  const q = [...families].map(([f, w]) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@${w.join(";")}`);
+  return q.length ? `https://fonts.googleapis.com/css2?${q.join("&")}&display=swap` : null;
+}
+var fontsHref = (tree) => fontsURL(fontFamilies(tree));
+
+// lib/io/web/naming.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var classNameFor = (node) => {
+  const base = (node.name || node.type).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "node";
+  const id = node.id.includes("~__pcitem__") ? node.id.split("~")[0] : node.id;
+  return `${base}-${id.replace(/[^a-zA-Z0-9]/g, "").slice(-6)}`;
+};
+var componentName = (name) => (name.replace(/[^a-zA-Z0-9]/g, "") || "Node").replace(/^[0-9]/, "N$&");
+var fileBase = (name) => (name || "export").replace(/[^a-zA-Z0-9-_]+/g, "-").replace(/^-|-$/g, "") || "export";
+
+// lib/io/web/tailwind.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var px = (v) => v.replace(/"/g, "'").replace(/\s+/g, "_");
+var UTILITIES = {
+  width: (v) => `w-[${px(v)}]`,
+  height: (v) => `h-[${px(v)}]`,
+  display: (v) => v === "flex" ? "flex" : v === "block" ? "block" : v === "none" ? "hidden" : null,
+  "flex-direction": (v) => v === "row" ? "flex-row" : "flex-col",
+  gap: (v) => `gap-[${px(v)}]`,
+  "justify-content": (v) => ({ "flex-start": "justify-start", "flex-end": "justify-end", center: "justify-center", "space-between": "justify-between" })[v] ?? null,
+  "align-items": (v) => ({ "flex-start": "items-start", "flex-end": "items-end", center: "items-center", baseline: "items-baseline" })[v] ?? null,
+  padding: (v) => `p-[${px(v)}]`,
+  "border-radius": (v) => `rounded-[${px(v)}]`,
+  overflow: (v) => v === "hidden" ? "overflow-hidden" : null,
+  position: (v) => ({ absolute: "absolute", relative: "relative", fixed: "fixed" })[v] ?? null,
+  left: (v) => `left-[${px(v)}]`,
+  top: (v) => `top-[${px(v)}]`,
+  opacity: (v) => `opacity-[${v}]`,
+  background: (v) => v.startsWith("#") || v.startsWith("rgb") ? `bg-[${px(v)}]` : `bg-[image:${px(v)}]`,
+  color: (v) => `text-[${px(v)}]`,
+  "font-size": (v) => `text-[${px(v)}]`,
+  "font-weight": (v) => `font-[${v}]`,
+  "font-style": (v) => v === "italic" ? "italic" : null,
+  "line-height": (v) => v === "normal" ? "leading-normal" : `leading-[${px(v)}]`,
+  "letter-spacing": (v) => `tracking-[${px(v)}]`,
+  "text-align": (v) => `text-${v}`,
+  "text-decoration": (v) => v === "underline" ? "underline" : v === "line-through" ? "line-through" : null,
+  "text-transform": (v) => ({ uppercase: "uppercase", lowercase: "lowercase", capitalize: "capitalize" })[v] ?? null,
+  "mix-blend-mode": (v) => `mix-blend-${v}`,
+  transform: (v) => /^rotate\(/.test(v) ? `rotate-[${px(v.slice(7, -1))}]` : null,
+  filter: (v) => /^blur\(/.test(v) ? `blur-[${px(v.slice(5, -1))}]` : null,
+  "backdrop-filter": (v) => /^blur\(/.test(v) ? `backdrop-blur-[${px(v.slice(5, -1))}]` : null,
+  "box-shadow": (v) => `shadow-[${px(v)}]`,
+  border: (v) => `border-[${px(v)}]`,
+  outline: (v) => `outline-[${px(v)}]`,
+  "box-sizing": (v) => v === "border-box" ? "box-border" : "box-content"
+};
+function tailwindFor(style) {
+  const out = [];
+  for (const [k, v] of Object.entries(style)) {
+    const util = UTILITIES[k]?.(v);
+    out.push(util ?? `[${k}:${px(v)}]`);
+  }
+  return out.join(" ");
+}
+function serializeTailwind(tree) {
+  const emit = (node, depth, isRoot) => {
+    const indent = "  ".repeat(depth);
+    const cls = tailwindFor({ ...placementStyle(node, isRoot), ...node.style });
+    const tag = node.text ? "p" : "div";
+    const inner = [];
+    if (node.text) inner.push(`${indent}  ${escapeHTML(node.text.characters)}`);
+    const picture = pictureOf(node);
+    if (picture) inner.push(picture.kind === "svg" ? `${indent}  ${picture.svg}` : picture.kind === "img" ? `${indent}  <img src="${picture.src}" width="${node.width}" height="${node.height}" alt="${escapeHTML(altFor(node))}" />` : `${indent}  <!-- ${picture.reason} -->`);
+    for (const c of node.children) inner.push(emit(c, depth + 1, false));
+    return inner.length ? `${indent}<${tag} class="${cls}">
+${inner.join("\n")}
+${indent}</${tag}>` : `${indent}<${tag} class="${cls}"></${tag}>`;
+  };
+  return emit(tree.root, 0, true);
+}
+
+// lib/io/web/react.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/runtime.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var declarations = (style) => Object.entries(style).map(([k, v]) => `${k}:${v}`).join(";");
+function interactiveSpec(tree) {
+  if (!tree.interactive) return null;
+  const spec = { m: {}, e: {}, L: [], on: [] };
+  for (const m of tree.interactive.machines) spec.m[m.id] = m.initial;
+  const table = /* @__PURE__ */ new Map();
+  const walk = (w) => {
+    if (w.uid !== void 0 && w.owner && w.looks) {
+      const byState = {};
+      for (const [state, look] of Object.entries(w.looks)) {
+        if (!look) {
+          byState[state] = -1;
+          continue;
+        }
+        const row = [declarations(look.style), look.text ?? null, look.tf ?? null];
+        const sig = JSON.stringify(row);
+        let i = table.get(sig);
+        if (i === void 0) {
+          i = spec.L.length;
+          spec.L.push(row);
+          table.set(sig, i);
+        }
+        byState[state] = i;
+      }
+      spec.e[w.uid] = [w.owner, byState];
+    }
+    for (const ix of w.on ?? []) spec.on.push([w.uid, ix.machine, ix.state, ix.trigger, actionData(ix), ix.delay ?? 0, ix.key ?? ""]);
+    w.children.forEach(walk);
+  };
+  walk(tree.root);
+  return spec;
+}
+function actionData(ix) {
+  const a = ix.action;
+  if (a.kind === "go") return { k: "go", m: a.machine, to: a.to, ms: a.ms, ez: a.easing, ...a.hold ? { hold: 1 } : {} };
+  if (a.kind === "back") return { k: "back", m: a.machine };
+  return { k: "orbit", t: a.target, tt: a.tiltTarget, d: a.degreesPerPx, tilt: a.tilt ? 1 : 0, lo: a.tiltRange[0], hi: a.tiltRange[1] };
+}
+
+// lib/io/web/react.ts
+var jsxText = (s) => `{'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n")}'}`;
+var template = (s) => "`" + s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${") + "`";
+var JSX_ATTR = { value: "defaultValue", checked: "defaultChecked", class: "className", for: "htmlFor", readonly: "readOnly", autofocus: "autoFocus", novalidate: "noValidate", tabindex: "tabIndex", maxlength: "maxLength", minlength: "minLength", autocomplete: "autoComplete", inputmode: "inputMode" };
+var NATIVELY_INTERACTIVE = /* @__PURE__ */ new Set(["a", "button", "input", "select", "textarea", "summary", "label"]);
+var BOOLEAN_ATTR = /* @__PURE__ */ new Set(["required", "checked", "disabled", "multiple", "readonly", "autofocus", "novalidate", "selected", "hidden", "open"]);
+var jsxAttr = (k, v) => BOOLEAN_ATTR.has(k) ? v === "false" ? "" : ` ${JSX_ATTR[k] ?? k}` : ` ${JSX_ATTR[k] ?? k}=${JSON.stringify(v)}`;
+var itemJsx = (s, reader = "itemWords") => {
+  const parts = itemMarks(s);
+  if (!parts) return jsxText(s);
+  return `{${parts.map((p) => typeof p === "string" ? JSON.stringify(p) : `${reader}(item, ${JSON.stringify(p.key)})`).join(" + ")}}`;
+};
+var itemAttr = (k, v, reader = "itemWords") => {
+  const parts = itemMarks(v);
+  if (!parts || BOOLEAN_ATTR.has(k)) return jsxAttr(k, v);
+  return ` ${JSX_ATTR[k] ?? k}={${parts.map((p) => typeof p === "string" ? JSON.stringify(p) : `${reader}(item, ${JSON.stringify(p.key)})`).join(" + ")}}`;
+};
+var itemStyle = (v, reader) => {
+  const parts = itemMarks(v);
+  if (!parts) return `'${v}'`;
+  return parts.map((p) => typeof p === "string" ? JSON.stringify(p.replace(/\\'/g, "'")) : `${reader}(item, ${JSON.stringify(p.key)})`).join(" + ");
+};
+var ITEM_ID = JSON.stringify(ITEM_RECORD);
+function serializeReact(tree, opts = {}) {
+  const tailwind = opts.styling === "tailwind";
+  const reader = opts.itemReader ?? "itemWords";
+  const spec = interactiveSpec(tree);
+  const machine = tree.stateMachine ?? null;
+  const listened = machineLayers(machine);
+  const keyframes = [];
+  let triggered = false;
+  const states = [];
+  const setterOf = /* @__PURE__ */ new Map();
+  if (opts.behaviour) {
+    const walk = (n) => {
+      if (n.variants && Object.keys(n.variants).length && !setterOf.has(layerId(n.id))) {
+        const k = setterOf.size + 1;
+        setterOf.set(layerId(n.id), `setVariant${k}`);
+        states.push(`const [variant${k}, setVariant${k}] = useState(${JSON.stringify(n.variant)})`);
+      }
+      n.children.forEach(walk);
+    };
+    walk(tree.root);
+  }
+  const emit = (node, depth, isRoot, chosen) => {
+    const pad = "    " + "  ".repeat(depth);
+    if (opts.behaviour && node.variants && Object.keys(node.variants).length && !chosen) {
+      const setter = setterOf.get(layerId(node.id));
+      const state = setter.replace("setVariant", "variant");
+      const shown = [[node.variant, node], ...Object.entries(node.variants).filter(([k]) => k !== node.variant)];
+      return `${pad}<>
+${shown.map(([id, v]) => `${pad}  {${state} === ${JSON.stringify(id)} && (
+${emit({ ...v, variant: id, variants: void 0 }, depth + 2, isRoot, { setter, instance: layerId(node.id) })}
+${pad}  )}`).join("\n")}
+${pad}</>`;
+    }
+    const el = elementOf(node, { isRoot, spec, listened: machine ? listened : void 0 });
+    const { tag } = el;
+    const bound = opts.behaviour?.bindings(node.id) ?? null;
+    const fonted = opts.fontFamily && el.style["font-family"] ? { ...el.style, "font-family": opts.fontFamily(el.style["font-family"]) } : el.style;
+    const style = node.hidden && !bound?.visible && !el.pc ? { ...fonted, display: "none" } : fonted;
+    if (el.keyframes && !keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
+    const inItem = node.id.includes(`~${ITEM_RECORD}`);
+    let attrs = tailwind && !el.pc ? ` className="${tailwindFor(style)}"` : ` style={{ ${[...styleMapToJSX(style).filter(([p]) => !bound?.style[p]).map(([p, v]) => `${JSON.stringify(p).replace(/^"([A-Za-z_$][\w$]*)"$/, "$1")}: ${inItem ? itemStyle(v, reader) : `'${v}'`}`), ...Object.entries(bound?.style ?? {}).map(([p, e]) => `${p}: ${e}`)].join(", ")} }${Object.keys(style).some((k) => k.startsWith("--")) ? " as CSSProperties" : ""}}`;
+    if (isRoot && (spec || machine || triggeredIn(node))) attrs = ` ref={root}${attrs}`;
+    for (const [k, v] of Object.entries(el.attrs)) attrs += inItem ? itemAttr(k, v, reader) : jsxAttr(k, v);
+    if (opts.ids) attrs += inItem ? ` data-pc-id={${JSON.stringify(node.id.split(`~${ITEM_RECORD}`)[0] + "~")} + item.id${node.id.split(`~${ITEM_RECORD}`)[1] ? ` + ${JSON.stringify(node.id.split(`~${ITEM_RECORD}`)[1])}` : ""}}` : ` data-pc-id=${JSON.stringify(node.id)}`;
+    const host = node.id.includes("::") ? layerId(node.id).split("::")[0] : void 0;
+    const changeTo = (id, target) => {
+      const setter = setterOf.get(target ?? chosen?.instance ?? host ?? "");
+      return setter ? `${setter}(${JSON.stringify(id)})` : null;
+    };
+    const handlers = opts.behaviour?.events(node.id, { variant: chosen && layerId(node.id) === chosen.instance ? node.variant : void 0, changeTo }) ?? {};
+    for (const [event, handler] of Object.entries(handlers)) attrs += ` ${event}={${inItem ? handler.split(ITEM_ID).join("item.id") : handler}}`;
+    if (handlers.onClick && !NATIVELY_INTERACTIVE.has(tag)) attrs += ` role="button" tabIndex={0} onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.currentTarget.click() } }}`;
+    const sends = node.action ? opts.formAction?.(node) : null;
+    if (sends) attrs += ` action={${sends}}`;
+    if (el.keyframes) attrs += ' data-motion-child=""';
+    if (el.motionTrigger) {
+      attrs += ` data-motion="${el.motionTrigger}"`;
+      triggered = true;
+    }
+    if (el.pc) attrs += ` data-pc="${el.pc.uid}" data-layer=${JSON.stringify(el.pc.layer)}`;
+    if (el.sm) attrs += ` data-sm=${JSON.stringify(el.sm)}`;
+    if (el.input?.tag === "input") return `${pad}<input${attrs} />`;
+    const fieldValue = (v) => inItem ? itemAttr("value", v, reader) : ` defaultValue=${JSON.stringify(v)}`;
+    if (el.input?.tag === "textarea") return `${pad}<textarea${attrs}${el.input.value ? fieldValue(el.input.value) : ""} />`;
+    if (el.input) return `${pad}<select${attrs}${el.input.value ? fieldValue(el.input.value) : ""}>
+${(el.input.options ?? []).map((o) => `${pad}  <option value=${JSON.stringify(o.value)}>${jsxText(o.label)}</option>`).join("\n")}
+${pad}</select>`;
+    if (el.html !== void 0) return `${pad}<${tag}${attrs} dangerouslySetInnerHTML={{ __html: ${JSON.stringify(el.html)} }} />`;
+    const inner = [];
+    const drawn2 = node.code ? opts.code?.(node) : null;
+    if (drawn2) inner.push(`${pad}  ${drawn2}`);
+    if (el.runs) inner.push(...el.runs.map((run) => {
+      const style2 = Object.keys(run.style).length ? ` style={{ ${styleMapToJSX(run.style).map(([p, v]) => `${p}: '${v}'`).join(", ")} }}` : "";
+      const words = inItem ? itemJsx(run.text, reader) : jsxText(run.text);
+      if (run.link) return `${pad}  <a href=${JSON.stringify(run.link)}${style2}>${words}</a>`;
+      return style2 ? `${pad}  <span${style2}>${words}</span>` : `${pad}  ${words}`;
+    }));
+    else if (bound?.text) inner.push(`${pad}  {${bound.text}}`);
+    else if (el.text !== void 0) inner.push(`${pad}  ${inItem ? itemJsx(el.text, reader) : jsxText(el.text)}`);
+    const picture = el.picture;
+    if (picture?.kind === "svg") inner.push(`${pad}  <span dangerouslySetInnerHTML={{ __html: ${JSON.stringify(labelSVG(picture.svg, node))} }} />`);
+    else if (picture?.kind === "img" && inItem && itemMarks(picture.src)) inner.push(`${pad}  <img${itemAttr("src", picture.src, reader)} width={${Math.round(node.width)}} height={${Math.round(node.height)}} alt=${JSON.stringify(altFor(node))} style={{ objectFit: 'cover' }} />`);
+    else if (picture?.kind === "img") inner.push(`${pad}  ${opts.image ? opts.image({ src: picture.src, width: node.width, height: node.height, alt: altFor(node) }) : `<img src="${picture.src}" width={${node.width}} height={${node.height}} alt=${JSON.stringify(altFor(node))} />`}`);
+    else if (picture) inner.push(`${pad}  {/* ${picture.reason}: render this node to ${picture.format.toUpperCase()} */}`);
+    const live2 = node.island ? opts.island?.(node) : null;
+    if (live2) inner.push(`${pad}  ${live2}`);
+    const records = node.repeat && opts.lists?.(node.repeat);
+    if (node.repeat && records) inner.push(`${pad}  {${records}.map(item => (
+${pad}    <Fragment key={item.id}>
+${node.repeat.template.map((c) => emit(c, depth + 3, false)).join("\n")}
+${pad}    </Fragment>
+${pad}  ))}`);
+    else for (const c of node.children) inner.push(emit(c, depth + 1, false));
+    if (el.check) inner.push(`${pad}  <input${Object.entries(el.check.attrs).map(([k, v]) => jsxAttr(k, v)).join("")} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }} />`);
+    if (isRoot && sheetNeeded()) inner.unshift(`${pad}  <style>{KEYFRAMES}</style>`);
+    const whole = !inner.length ? `${pad}<${tag}${attrs} />` : `${pad}<${tag}${attrs}>
+${inner.join("\n")}
+${pad}</${tag}>`;
+    return bound?.visible && !isRoot ? `${pad}{${bound.visible} && (
+${whole}
+${pad})}` : whole;
+  };
+  const triggeredIn = (n) => !!n.motionTrigger || n.children.some(triggeredIn);
+  const anyMotion = (n) => !!n.motion || n.children.some(anyMotion);
+  const sheetNeeded = () => anyMotion(tree.root) || !!tree.interactive?.keyframes.length || !!tree.rules?.length;
+  const drawn = emit(tree.root, 0, true);
+  const body = tree.truncated ? `    <>
+${drawn}
+    {/* subtree truncated at the node cap */}
+    </>` : drawn;
+  for (const k of tree.interactive?.keyframes ?? []) if (!keyframes.includes(k)) keyframes.push(k);
+  if (triggered) keyframes.unshift(MOTION_PLAY_RULE);
+  if (tree.rules) keyframes.unshift(...tree.rules);
+  const fonts = keyframes.length && !opts.ownFonts ? fontsHref(tree) : null;
+  if (fonts) keyframes.unshift(`@import url('${fonts}');`);
+  const name = opts.name ?? componentName(tree.root.name);
+  const live = !!spec || !!machine || triggered;
+  const prelude = [...opts.prelude ?? [], ...states].map((l) => `  ${l}
+`).join("");
+  if (!live && !keyframes.length && !body.includes(" as CSSProperties}")) return `export function ${name}(${opts.props ?? ""}) {
+${prelude}  return (
+${body}
+  )
+}`;
+  const head = [];
+  const custom = body.includes(" as CSSProperties}");
+  if (live || custom) head.push(`import { ${[...live ? ["useEffect", "useRef"] : [], ...custom ? ["type CSSProperties"] : []].join(", ")} } from 'react'`, "");
+  if (keyframes.length) head.push(`const KEYFRAMES = ${template(keyframes.join("\n"))}`, "");
+  const players = [...spec ? ["popcraftMount"] : [], ...machine ? ["popcraftMachine"] : []];
+  if (players.length) head.push(`import { ${players.join(", ")} } from '@popcraft/runtime'`, "");
+  if (spec) head.push(`// The prototype's states and interactions (PopCraft web export).`, `const SPEC = ${JSON.stringify(spec)}`, "");
+  if (machine) head.push(`// The frame's state machine (PopCraft web export).`, `const MACHINE = ${JSON.stringify(machine)}`, "");
+  const effects = [];
+  if (live) effects.push(`  const root = useRef<${elementType(tree.root)}>(null)`);
+  if (spec) effects.push("  useEffect(() => (root.current ? popcraftMount(root.current, SPEC) : undefined), [])");
+  if (machine) effects.push("  useEffect(() => (root.current ? popcraftMachine(root.current, MACHINE) : undefined), [])");
+  if (triggered) effects.push(
+    "  // Motion that waits for a click, a hover or being scrolled into view.",
+    "  useEffect(() => {",
+    "    const el = root.current",
+    "    if (!el) return",
+    "    const play = (n: Element) => n.setAttribute('data-motion-play', '')",
+    "    // One listener on the root for clicks and hovers, removed with the component.",
+    '    const on = (kind: string) => (e: Event) => { const n = (e.target as Element | null)?.closest(`[data-motion="${kind}"]`); if (n) play(n) }',
+    "    const click = on('click'), hover = on('hover')",
+    "    el.addEventListener('click', click)",
+    "    el.addEventListener('mouseover', hover)",
+    "    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { play(e.target); io.unobserve(e.target) } }), { threshold: 0.25 })",
+    `    el.querySelectorAll('[data-motion="inView"]').forEach(n => io.observe(n))`,
+    "    return () => { io.disconnect(); el.removeEventListener('click', click); el.removeEventListener('mouseover', hover) }",
+    "  }, [])"
+  );
+  return `${head.join("\n")}export function ${name}(${opts.props ?? ""}) {
+${prelude}${effects.join("\n")}${effects.length ? "\n" : ""}  return (
+${body}
+  )
+}`;
+}
+function elementType(node) {
+  const tag = elementOf(node, { isRoot: true }).tag;
+  const known = { div: "HTMLDivElement", section: "HTMLElement", main: "HTMLElement", header: "HTMLElement", footer: "HTMLElement", nav: "HTMLElement", article: "HTMLElement", aside: "HTMLElement", form: "HTMLFormElement", a: "HTMLAnchorElement", button: "HTMLButtonElement", ul: "HTMLUListElement", li: "HTMLLIElement" };
+  return known[tag] ?? "HTMLElement";
+}
+
+// lib/io/web/site.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/island/slice.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_expressions();
+function sliceDocument(doc, nodeId, opts = {}) {
+  const nodes = {};
+  const take = (id) => {
+    const n = doc.nodes[id];
+    if (!n || nodes[id]) return;
+    nodes[id] = n;
+    for (const c of n.childIds ?? []) take(c);
+    const main = n.mainComponentId;
+    if (main) {
+      take(main);
+      const set = doc.nodes[main]?.parentId;
+      if (set && doc.nodes[set]?.type === "COMPONENT_SET") take(set);
+    }
+  };
+  if (opts.self && doc.nodes[nodeId]) nodes[nodeId] = { ...doc.nodes[nodeId], childIds: [] };
+  else take(nodeId);
+  const own = nodes[nodeId];
+  if (own?.visible === false && own.physics?.role === "pose") nodes[nodeId] = { ...own, visible: true };
+  let frameId = null;
+  let pageId = null;
+  let rootId = nodeId;
+  for (let child = nodeId, cur = doc.nodes[nodeId]?.parentId; cur; child = cur, cur = doc.nodes[cur]?.parentId ?? null) {
+    const p = doc.nodes[cur];
+    if (!p) break;
+    if (p.type === "PAGE") {
+      pageId = cur;
+      frameId = doc.nodes[child]?.type === "FRAME" ? child : frameId;
+    }
+    if (!nodes[cur]) nodes[cur] = p.type === "PAGE" ? { ...p, childIds: [child] } : { ...p, childIds: [child], fills: [], strokes: [], effects: [], shadows: void 0, blurs: void 0, clipsContent: false, layoutMode: "NONE" };
+    if (p.type !== "PAGE") rootId = cur;
+  }
+  if (!frameId && doc.nodes[nodeId]?.type === "FRAME" && doc.nodes[doc.nodes[nodeId].parentId ?? ""]?.type === "PAGE") frameId = nodeId;
+  return {
+    nodeId,
+    frameId,
+    rootId,
+    ...opts.self ? { fit: "fill" } : {},
+    ...opts.screen ? { screen: true } : {},
+    document: {
+      id: doc.id,
+      name: doc.name,
+      pages: pageId ? [pageId] : [],
+      nodes,
+      styles: doc.styles,
+      variables: doc.variables,
+      variableCollections: doc.variableCollections,
+      activeVariableModes: doc.activeVariableModes,
+      settings: doc.settings,
+      ...opts.screen ? { ...doc.site ? { site: doc.site } : {}, ...doc.collections ? { collections: doc.collections, records: doc.records } : {} } : {}
+    }
+  };
+}
+
+// lib/runtime/dom/render.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var HIDDEN_ATTR = "data-pc-hidden";
+var HIDDEN_RULE = `[${HIDDEN_ATTR}] { display: none !important; }`;
+var SCREEN_ISLAND = "screen:";
+
+// lib/document/physics.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+function screenPhysics(doc, screenId) {
+  const screen = doc.nodes[screenId];
+  if (!screen) return null;
+  const origin = uprightBounds(getWorldTransform(doc, screenId), screen.width, screen.height);
+  const layers = [];
+  const controls = [];
+  const wins = [];
+  const poses = [];
+  const parallax = [];
+  const posesIn = (id) => {
+    for (const c of doc.nodes[id]?.childIds ?? []) {
+      const p = doc.nodes[c]?.physics;
+      if (p?.role === "pose" && p.pose) poses.push([c, p.pose]);
+      posesIn(c);
+    }
+  };
+  let settings;
+  const walk = (id) => {
+    const n = doc.nodes[id];
+    if (!n) return;
+    const p = n.physics;
+    if (n.visible === false && p?.role !== "win") return;
+    if (p) {
+      const b = uprightBounds(getWorldTransform(doc, id), n.width, n.height);
+      if (p.role === "control") {
+        if (p.control) controls.push([id, p.control]);
+      } else if (p.role === "win") wins.push(id);
+      else if (p.role === "parallax") {
+        if (p.parallax) parallax.push([id, p.parallax]);
+      } else if (p.role !== "pose" && p.role !== "reveal") {
+        layers.push({
+          id,
+          role: p.role,
+          x: b.minX - origin.minX,
+          y: b.minY - origin.minY,
+          w: b.maxX - b.minX,
+          h: b.maxY - b.minY,
+          ...p.role === "hazard" && p.patrol ? { patrol: p.patrol } : {},
+          ...p.role === "hazard" && p.stomp ? { stomp: true } : {},
+          ...p.role === "solid" && p.bump ? { bump: p.bump } : {}
+        });
+        if (p.role === "player" && p.settings && !settings) settings = p.settings;
+        if (p.role === "player" && !poses.length) posesIn(id);
+      }
+      return;
+    }
+    for (const c of n.childIds ?? []) walk(c);
+  };
+  for (const c of screen.childIds ?? []) walk(c);
+  const player = layers.find((l) => l.role === "player");
+  if (!player) return null;
+  const grid = screen.pixelPerfect ? pixelCell(doc, player.id) : null;
+  return { layers, ...grid ? { grid } : {}, ...controls.length ? { controls } : {}, ...wins.length ? { wins } : {}, ...poses.length ? { poses } : {}, ...parallax.length ? { parallax } : {}, ...settings ? { settings } : {}, height: screen.height };
+}
+
+// lib/io/web/site.ts
+var HEAVY = /* @__PURE__ */ new Set(["fills", "strokes", "effects", "shadows", "blurs", "vectorPaths", "paths", "styledSegments", "paragraphs", "imageUrl", "exportSettings", "annotations", "devResources", "codeConnect", "layoutGrids", "aiPending", "aiGeneration"]);
+function light(node) {
+  const out = {};
+  for (const k in node) if (!HEAVY.has(k)) out[k] = node[k];
+  return out;
+}
+function programDocument(doc, pageId, screens) {
+  const nodes = {};
+  const take = (id) => {
+    const n = doc.nodes[id];
+    if (!n || nodes[id]) return;
+    nodes[id] = light(n);
+    for (const c of n.childIds ?? []) take(c);
+    const main = n.mainComponentId;
+    if (main) {
+      take(main);
+      const set = doc.nodes[main]?.parentId;
+      if (set && doc.nodes[set]?.type === "COMPONENT_SET") take(set);
+    }
+  };
+  const page = doc.nodes[pageId];
+  if (page) nodes[pageId] = { ...light(page), childIds: screens.map((s) => s.id) };
+  for (const s of screens) take(s.id);
+  return {
+    id: doc.id,
+    name: doc.name,
+    nodes,
+    pages: [pageId],
+    styles: {},
+    variables: doc.variables,
+    variableCollections: doc.variableCollections,
+    activeVariableModes: doc.activeVariableModes,
+    settings: doc.settings,
+    // What a layer that follows a record's field is drawn from, while the page runs.
+    ...doc.collections && Object.keys(doc.collections).length ? { collections: doc.collections, records: doc.records } : {}
+  };
+}
+function withVariants(doc, root, opts, depth = 3) {
+  if (depth <= 0) return;
+  for (const w of flatten(root)) {
+    const real = layerId(w.id), suffix = copySuffix(w.id);
+    const inst = w.type === "INSTANCE" && !real.includes("::") ? doc.nodes[real] : void 0;
+    const main = inst?.mainComponentId;
+    if (!inst || !main || w.variants) continue;
+    const reach = variantStates(doc, main);
+    if (reach.length < 2) continue;
+    w.variant = main;
+    w.variants = {};
+    const parent = inst.parentId ? doc.nodes[inst.parentId] ?? null : null;
+    const record = suffix ? doc.records?.[copyRecord(w.id) ?? ""] : void 0;
+    const as3 = record ? { ...opts, item: { collectionId: record.collectionId, recordId: record.id } } : opts;
+    for (const v of reach.slice(1)) {
+      const as = { ...doc, nodes: { ...doc.nodes, [inst.id]: { ...inst, mainComponentId: v } } };
+      const built = buildPlainTree(as, inst.id, as3, { parent, in3D: false, fold: 0 }).root;
+      if (suffix) for (const n of flatten(built)) n.id += suffix;
+      built.variant = v;
+      withVariants(as, built, opts, depth - 1);
+      w.variants[v] = built;
+    }
+  }
+}
+function everyNode(root, out = []) {
+  for (const n of flatten(root)) {
+    out.push(n);
+    for (const v of Object.values(n.variants ?? {})) everyNode(v, out);
+  }
+  return out;
+}
+var declared = (n, isRoot) => ({ ...placementStyle(n, isRoot), ...n.style, ...n.hidden ? { display: "none" } : {} });
+function mediaRules(doc, screenId, base, opts) {
+  const rules = [];
+  let above = new Map(flatten(base).map((n) => [n.id, declared(n, n === base)]));
+  for (const bp of breakpointsOf(doc).slice(1)) {
+    const view = breakpointDocument(doc, bp.id);
+    const root = buildPlainTree(view, screenId, opts).root;
+    const here = new Map(flatten(root).map((n) => [n.id, declared(n, n === root)]));
+    const blocks = [];
+    for (const [id, was] of above) {
+      const now = here.get(id);
+      const diff = {};
+      if (!now) {
+        if (was.display !== "none") diff.display = "none";
+      } else {
+        for (const k in was) if (!(k in now)) diff[k] = "revert";
+        for (const k in now) if (now[k] !== was[k]) diff[k] = now[k];
+      }
+      if (Object.keys(diff).length) blocks.push(`  [data-pc-id="${id}"] {
+${styleMapToCSSText(Object.fromEntries(Object.entries(diff).map(([k, v]) => [k, `${v} !important`])), "    ")}
+  }`);
+    }
+    if (blocks.length) rules.push(`@media (max-width: ${bp.maxWidth}px) {
+${blocks.join("\n")}
+}`);
+    above = new Map([...above].map(([id, was]) => [id, here.get(id) ?? { ...was, display: "none" }]));
+  }
+  return rules;
+}
+function sitePages(doc, pageId) {
+  const screens = screensOf(doc, pageId);
+  const routes = routesOf(screens);
+  return screens.flatMap((s) => {
+    const base = routes.get(s.id);
+    const collection = s.route?.collectionId ? doc.collections?.[s.route.collectionId] : void 0;
+    if (!collection) return [{ id: s.id, frame: s, route: base, title: s.route?.title || s.name }];
+    const slugs = recordSlugs(doc, collection.id);
+    return recordsIn(doc, collection.id).map((record) => ({
+      id: `${s.id}~${record.id}`,
+      frame: s,
+      record,
+      collection,
+      route: `${base === "/" ? "" : base}/${slugs.get(record.id)}`,
+      title: itemText(s.route?.title || s.name, collection, record)
+    }));
+  });
+}
+function screenTransitions3d(doc, screens) {
+  const out = /* @__PURE__ */ new Set();
+  const turns = (a) => {
+    if (!a) return [];
+    if (a.navigationType === "CONDITIONAL") return (a.branches ?? []).flatMap((b) => b.actions.flatMap(turns));
+    return a.navigationType === "NAVIGATE" && a.destinationId && a.transition && is3DTransition(a.transition.type) ? [a.destinationId] : [];
+  };
+  for (const s of screens) {
+    const seen = /* @__PURE__ */ new Set();
+    const walk = (id) => {
+      const n = doc.nodes[id];
+      if (!n || seen.has(id)) return;
+      seen.add(id);
+      for (const ix of n.interactions ?? []) for (const to of turns(ix.action)) {
+        out.add(s.id);
+        out.add(to);
+      }
+      for (const c of n.childIds ?? []) walk(c);
+      const main = n.mainComponentId;
+      if (main) walk(main);
+    };
+    walk(s.id);
+  }
+  return out;
+}
+var drawnByGpu = (page) => !everyNode(page.tree.root).some((n) => n.input || n.check || n.html || n.code);
+function withoutScreenIslands(site) {
+  if (!site.islands) return site;
+  const kept = Object.entries(site.islands).filter(([k]) => !k.startsWith(SCREEN_ISLAND));
+  if (kept.length === Object.keys(site.islands).length) return site;
+  const { islands: _, ...rest } = site;
+  return kept.length ? { ...rest, islands: Object.fromEntries(kept) } : rest;
+}
+function buildWebSite(doc, opts = {}) {
+  const pageId = opts.pageId ?? doc.pages[0];
+  const screens = screensOf(doc, pageId);
+  const routes = routesOf(screens);
+  const build = { target: "site", nodeCap: opts.nodeCap ?? 2e4, static: opts.static, routes: Object.fromEntries(routes) };
+  const laid = /* @__PURE__ */ new Set();
+  const pages = sitePages(doc, pageId).map((p) => {
+    const s = p.frame;
+    const opts2 = p.record ? { ...build, item: { collectionId: p.collection.id, recordId: p.record.id } } : build;
+    const tree = buildPlainTree(doc, s.id, opts2);
+    const media = laid.has(s.id) ? [] : mediaRules(doc, s.id, tree.root, opts2);
+    laid.add(s.id);
+    withVariants(doc, tree.root, opts2);
+    const description = s.route?.description ? p.record ? itemText(s.route.description, p.collection, p.record) : s.route.description : void 0;
+    const moves = !opts2.static && hasFrameMotion(doc.nodes, s.id);
+    const length = moves ? timelineDuration(doc.nodes, s.id) : 0;
+    const machine = moves ? webStateMachine(doc, s.id) : null;
+    const platformer = opts2.static ? null : screenPhysics(doc, s.id);
+    const sound = opts2.static ? [] : (s.timeline?.audio ?? []).filter((c) => !c.muted && (c.speed ?? 1) === 1).map((c) => ({
+      src: `media://${c.mediaHash}`,
+      start: c.start,
+      in: c.in,
+      out: c.out,
+      ...c.loop ? { loop: true } : {},
+      ...c.fadeIn ? { fadeIn: c.fadeIn } : {},
+      ...c.fadeOut ? { fadeOut: c.fadeOut } : {},
+      ...c.gain?.keys.length ? { gain: c.gain.keys[0].v } : {}
+    }));
+    return {
+      ...machine ? { machine } : {},
+      ...platformer ? { platformer } : {},
+      ...sound.length ? { sound } : {},
+      ...length > 0 ? { timeline: { duration: length, stops: stopsOf(frameTimeline(doc.nodes, s.id).markers, [0, length]), loops: frameRunsOn(doc.nodes, s.id) } } : {},
+      id: p.id,
+      route: p.route,
+      title: p.title,
+      ...p.record ? { screen: s.id, record: p.record.id } : {},
+      ...description ? { description } : {},
+      ...s.route?.notFound ? { notFound: true } : {},
+      ...s.route?.access ? { access: s.route.access } : {},
+      tree,
+      ...media.length ? { media } : {}
+    };
+  });
+  const islandNodes = new Map(pages.flatMap((p) => everyNode(p.tree.root).filter((n) => n.island && !n.id.includes("::"))).map((n) => [n.id, n]));
+  const fonts = /* @__PURE__ */ new Map();
+  for (const p of pages) for (const [family, weights] of fontFamilies(p.tree)) for (const w of weights) (fonts.get(family) ?? fonts.set(family, /* @__PURE__ */ new Set()).get(family)).add(w);
+  const home = pages.find((p) => p.route === "/" && !p.screen);
+  const turned = doc.site?.gpuTransitions === false ? /* @__PURE__ */ new Set() : screenTransitions3d(doc, screens);
+  const screenSlices = [...turned].filter((id) => doc.nodes[id] && pages.filter((p) => (p.screen ?? p.id) === id).every(drawnByGpu)).map((id) => [`${SCREEN_ISLAND}${id}`, sliceDocument(doc, id, { screen: true })]);
+  const islands = [...[...islandNodes].map(([id, n]) => [id, sliceDocument(doc, n.asset?.of ?? layerId(id), { self: !!n.asset?.self })]), ...screenSlices];
+  return {
+    name: doc.name,
+    pages,
+    home: home?.id ?? null,
+    tokens: pages.find((p) => p.tree.tokens)?.tree.tokens,
+    fonts: [...fonts].sort(([a], [b]) => a.localeCompare(b)).map(([family, w]) => ({ family, weights: [...w].sort((a, b) => a - b) })),
+    assets: pages.flatMap((p) => everyNode(p.tree.root).filter((n) => n.asset).map((n) => n.id)),
+    program: { document: programDocument(doc, pageId, screens), start: home?.id ?? null },
+    ...islands.length ? { islands: Object.fromEntries(islands) } : {}
+  };
+}
+
+export {
+  fontFamilies,
+  fontsURL,
+  fontsHref,
+  interactiveSpec,
+  classNameFor,
+  componentName,
+  fileBase,
+  tailwindFor,
+  serializeTailwind,
+  serializeReact,
+  programDocument,
+  everyNode,
+  mediaRules,
+  sitePages,
+  withoutScreenIslands,
+  buildWebSite
+};