@popcraft/kit 0.32.0 → 0.33.0

package/dist/chunks/project-HCE2D547.js

@@ -0,0 +1,1653 @@
+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 {
+  bytesOf,
+  routeFile,
+  routeUp
+} from "./chunk-ZFALJ2Y6.js";
+import {
+  serializeHTML
+} from "./chunk-BOVXM2CJ.js";
+import {
+  ASSET_DIR,
+  appAssetPaths,
+  externalizeBitmaps,
+  withAssetBase
+} from "./chunk-CWE7VNSQ.js";
+import {
+  componentName,
+  fileBase,
+  serializeReact,
+  withoutScreenIslands
+} from "./chunk-OHLKVTOA.js";
+import "./chunk-5STBM3DT.js";
+import {
+  fontFaceRules,
+  fontsURL
+} from "./chunk-KBX6XBHO.js";
+import {
+  escapeHTML,
+  tokensCSS
+} from "./chunk-3Y5FI434.js";
+import "./chunk-E5ADUDER.js";
+import "./chunk-Y3UFFKMB.js";
+import {
+  hrefOf,
+  opensNewTab
+} from "./chunk-EPITH6G4.js";
+import "./chunk-II2HRRGK.js";
+import {
+  usesSignIn
+} from "./chunk-F5RHWEZF.js";
+import "./chunk-NX52A7FG.js";
+import "./chunk-TVE3LYUZ.js";
+import "./chunk-E722S2DP.js";
+import "./chunk-4PKYJYJQ.js";
+import "./chunk-BMOIW4EK.js";
+import "./chunk-BRLZFJJU.js";
+import "./chunk-5YD4P6WO.js";
+import "./chunk-THLMVVIT.js";
+import "./chunk-EUAIH3EK.js";
+import {
+  ITEM_RECORD,
+  copyRecord,
+  itemText,
+  layerId,
+  repeatRecords
+} from "./chunk-4V23JBDL.js";
+import {
+  SESSION_COOKIE,
+  USER_VARIABLES,
+  fieldKey,
+  visitorCollections
+} from "./chunk-PKQGG3V6.js";
+import "./chunk-AVWA3JAF.js";
+import {
+  GOOGLE_FONTS,
+  NON_VARIABLE_FONTS
+} from "./chunk-UBYSDAJE.js";
+import "./chunk-SVJQJLCO.js";
+import "./chunk-757XHU62.js";
+import "./chunk-OPRSPQL6.js";
+import "./chunk-QZWEMMEL.js";
+import "./chunk-6WESPS7R.js";
+import "./chunk-Q47DN67O.js";
+import "./chunk-YQC2IVAU.js";
+import "./chunk-EAVQBTTA.js";
+import "./chunk-VDJPGIAE.js";
+import "./chunk-Z73UNUL7.js";
+import "./chunk-QLDV5WV5.js";
+import {
+  getWorldTransform,
+  init_scene_graph,
+  uprightBounds
+} from "./chunk-HOC36BAJ.js";
+import "./chunk-N7XUSTLZ.js";
+import "./chunk-XBVMM6ZD.js";
+import "./chunk-5XSI3MNX.js";
+import "./chunk-2LYY4KTS.js";
+import "./chunk-SMR77HUB.js";
+import "./chunk-2YBOCBPA.js";
+import {
+  init_expressions,
+  parseExpression
+} from "./chunk-FREAHUVP.js";
+import "./chunk-PXXO7PQR.js";
+import "./chunk-4VICNBUI.js";
+import "./chunk-IPETYEVH.js";
+import "./chunk-RW67KLLE.js";
+import "./chunk-5X7A23T7.js";
+import "./chunk-ONN5A5XM.js";
+import "./chunk-EPG7TW6Z.js";
+import "./chunk-NMFXCSU4.js";
+import "./chunk-TSWHCDM7.js";
+import "./chunk-CK43FENV.js";
+import "./chunk-X53QDCNX.js";
+import "./chunk-VBAS5IB5.js";
+import "./chunk-CZXJDKOJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+import "./chunk-LJSVREWM.js";
+
+// lib/io/web/project/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/project/build.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/project/static.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/site/live.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var HAS_ITEM = /\{\{\s*item[._]/;
+function asRecords(doc, collectionId, rows) {
+  const collection = doc.collections?.[collectionId];
+  if (!collection) return [];
+  const made = (r) => new Date(r.createdAt).toLocaleDateString(void 0, { weekday: "short", day: "numeric", month: "short" });
+  return rows.map((r) => ({ id: r.id, collectionId, createdAt: r.createdAt, ...r.by !== void 0 ? { by: r.by } : {}, ...r.mine !== void 0 ? { mine: r.mine } : {}, values: Object.fromEntries(collection.fields.map((f) => {
+    const v = r.values[fieldKey(f.name)];
+    return [f.id, (v === null || v === void 0 || v === "") && f.type === "DATE" ? made(r) : v ?? void 0];
+  })) }));
+}
+function withVisitorRecords(site, collectionId, rows) {
+  const doc = site.program.document;
+  const collection = doc.collections?.[collectionId];
+  if (!collection) return site;
+  const records = asRecords(doc, collectionId, rows);
+  const samples = new Set(Object.values(doc.records ?? {}).filter((r) => r.collectionId === collectionId).map((r) => r.id));
+  const copyFor = (node, sample, record, above) => {
+    const id = node.id.split(`~${sample}`).join(`~${record.id}`);
+    const control = doc.nodes[layerId(node.id)]?.control;
+    const next = { ...node, id, children: node.children.map((c) => copyFor(c, sample, record, control)) };
+    if (next.tag === "button" && next.attrs?.value !== void 0 && control?.value && HAS_ITEM.test(control.value)) next.attrs = { ...next.attrs, value: itemText(control.value, collection, record) };
+    const starts = (control ?? above)?.value;
+    if (next.input && starts && HAS_ITEM.test(starts)) {
+      const value = itemText(starts, collection, record);
+      next.input = next.input.tag === "input" ? { ...next.input, attrs: { ...next.input.attrs, value } } : { ...next.input, value };
+    }
+    const written = doc.nodes[layerId(node.id)]?.characters;
+    if (next.text && written && HAS_ITEM.test(written)) {
+      next.text = { ...next.text, characters: itemText(written, collection, record) };
+      delete next.runs;
+    }
+    return next;
+  };
+  const others = Object.fromEntries(Object.entries(doc.records ?? {}).filter(([, r]) => r.collectionId !== collectionId));
+  const document = {
+    ...doc,
+    records: { ...others, ...Object.fromEntries(records.map((r) => [r.id, r])) },
+    collections: { ...doc.collections, [collectionId]: { ...collection, order: records.map((r) => r.id) } }
+  };
+  const fill = (node) => {
+    const repeat = doc.nodes[layerId(node.id)]?.repeat;
+    if (repeat?.collectionId !== collectionId) return { ...node, children: node.children.map(fill) };
+    const first = node.children.map((c) => copyRecord(c.id)).find((r) => !!r && samples.has(r));
+    if (!first) return node;
+    const pattern = node.children.filter((c) => copyRecord(c.id) === first);
+    const kept = node.children.filter((c) => {
+      const r = copyRecord(c.id);
+      return !r || !samples.has(r);
+    });
+    const shown = repeatRecords(document, repeat);
+    return { ...node, children: [...kept, ...shown.flatMap((record) => pattern.map((c) => copyFor(c, first, record)))] };
+  };
+  return { ...site, pages: site.pages.map((p) => ({ ...p, tree: { ...p.tree, root: fill(p.tree.root) } })), program: { ...site.program, document } };
+}
+
+// lib/sites/data.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/share.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function pageShareImage(site, page) {
+  if (page.shareImage) return { path: page.shareImage, width: 1200, height: 630 };
+  return site.share ? { path: site.share.image, width: site.share.width, height: site.share.height } : null;
+}
+var at = (origin, path) => `${origin ? origin.replace(/\/+$/, "") : ""}/${path.replace(/^\/+/, "")}`;
+function shareMetaTags(site, page, opts = {}) {
+  const meta = (attr, key, value) => `<meta ${attr}="${key}" content="${escapeHTML(value)}" />`;
+  const image = pageShareImage(site, page);
+  return [
+    meta("property", "og:type", "website"),
+    meta("property", "og:site_name", site.name),
+    meta("property", "og:title", page.title),
+    ...page.description ? [meta("property", "og:description", page.description)] : [],
+    ...page.notFound ? [] : [meta("property", "og:url", at(opts.origin, page.route))],
+    ...image ? [
+      meta("property", "og:image", at(opts.origin, image.path)),
+      meta("property", "og:image:width", String(image.width)),
+      meta("property", "og:image:height", String(image.height)),
+      meta("property", "og:image:alt", page.title)
+    ] : [],
+    meta("name", "twitter:card", image ? "summary_large_image" : "summary"),
+    meta("name", "twitter:title", page.title),
+    ...page.description ? [meta("name", "twitter:description", page.description)] : [],
+    ...image ? [meta("name", "twitter:image", at(opts.origin, image.path))] : []
+  ];
+}
+
+// lib/io/web/project/static.ts
+function pageHTML(site, page, lang, lost = false, origin) {
+  const up = lost ? "/" : routeUp(page.route);
+  const fonts = fontsURL(site.fonts.filter((f) => !site.fontFaces?.some((s) => s.family === f.family)).map((f) => [f.family, f.weights]));
+  const rules = [
+    "html,body{margin:0;height:100%}#pc-root{min-height:100%;position:relative}*{box-sizing:border-box}",
+    // The file's own fonts, shipped in the site's fonts/ folder.
+    ...fontFaceRules(site.fontFaces?.map((f) => ({ ...f, url: `${up}${f.url}` }))),
+    ...site.tokens ? tokensCSS(site.tokens) : [],
+    ...page.media ?? site.pages.find((p) => p.screen && p.screen === page.screen && p.media)?.media ?? []
+  ];
+  const body = serializeHTML({ ...page.tree, root: withAssetBase(page.tree.root, up) }, { inline: true, ids: true });
+  const unseen = page.access === "signedIn" ? ' style="visibility:hidden"' : "";
+  return [
+    "<!DOCTYPE html>",
+    `<html lang="${escapeHTML(lang)}">`,
+    "<head>",
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    `<title>${escapeHTML(page.title)}</title>`,
+    ...page.description ? [`<meta name="description" content="${escapeHTML(page.description)}" />`] : [],
+    ...shareMetaTags(site, page, { origin }),
+    ...fonts ? [`<link id="pc-fonts" rel="stylesheet" href="${escapeHTML(fonts)}" />`] : [],
+    `<style>
+${rules.join("\n")}
+</style>`,
+    "</head>",
+    "<body>",
+    `<div id="pc-root"${unseen}>
+${body}
+</div>`,
+    `<script src="${up}pc/site.js" data-site="${up}site.json" data-route="${lost ? "" : escapeHTML(page.route)}" data-start="${escapeHTML(page.id)}"></script>`,
+    "</body>",
+    "</html>",
+    ""
+  ].join("\n");
+}
+function staticSiteFiles(site, scripts, opts = {}) {
+  const lang = opts.lang ?? "en";
+  const files = externalizeBitmaps(site);
+  const taken = /* @__PURE__ */ new Set();
+  const still = visitorCollections(site.program.document.collections).reduce((s, c) => withVisitorRecords(s, c.id, []), site);
+  for (const page of still.pages) {
+    const path = page.notFound ? "404.html" : routeFile(page.route);
+    if (taken.has(path)) continue;
+    taken.add(path);
+    files.push({ path, content: pageHTML(still, page, lang, !!page.notFound, opts.origin) });
+  }
+  files.push({ path: "site.json", content: JSON.stringify(site) });
+  files.push({ path: "pc/site.js", content: scripts.site });
+  if (site.islands && scripts.island) files.push({ path: "pc/island.js", content: scripts.island });
+  if (site.code && scripts.code) files.push({ path: "pc/code.js", content: scripts.code });
+  return files;
+}
+
+// lib/io/web/project/next.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/web/project/behaviour.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_expressions();
+var identFor = (name) => {
+  const last = name.split("/").pop().replace(/[^A-Za-z0-9]+(.)?/g, (_m, c) => c ? c.toUpperCase() : "");
+  const id = last.charAt(0).toLowerCase() + last.slice(1);
+  return /^[A-Za-z_$]/.test(id) && !RESERVED.has(id) ? id : `v${id.charAt(0).toUpperCase()}${id.slice(1)}`;
+};
+var RESERVED = /* @__PURE__ */ new Set(["break", "case", "catch", "class", "const", "continue", "default", "delete", "do", "else", "export", "extends", "false", "finally", "for", "function", "if", "import", "in", "instanceof", "new", "null", "return", "super", "switch", "this", "throw", "true", "try", "typeof", "var", "void", "while", "with", "let", "static", "yield", "await", "set", "v"]);
+var TS_TYPE = { BOOLEAN: "boolean", FLOAT: "number", STRING: "string", COLOR: "string" };
+var DATA_FUNCTIONS = /* @__PURE__ */ new Set(["count", "sum", "distinct", "best", "countSince", "sumSince", "countOn", "streak"]);
+var STYLE_PROPS = {
+  opacity: (e) => ["opacity", e],
+  width: (e) => ["width", `\`\${${e}}px\``],
+  height: (e) => ["height", `\`\${${e}}px\``],
+  rotation: (e) => ["rotate", `\`\${${e}}deg\``],
+  cornerRadius: (e) => ["borderRadius", `\`\${${e}}px\``]
+};
+function behaviourOf(site) {
+  const doc = site.program?.document ?? { nodes: {} };
+  const vars = Object.values(doc.variables ?? {});
+  const taken = /* @__PURE__ */ new Set();
+  const variables = vars.map((v) => {
+    let ident = identFor(v.name);
+    for (let n = 2; taken.has(ident); n++) ident = `${identFor(v.name)}${n}`;
+    taken.add(ident);
+    const coll = doc.variableCollections?.[v.variableCollectionId];
+    const raw = v.valuesByMode[coll?.defaultModeId ?? Object.keys(v.valuesByMode)[0]];
+    const type = TS_TYPE[v.type] ?? "string";
+    const initial = type === "boolean" ? String(!!raw) : type === "number" ? String(Number(raw) || 0) : JSON.stringify(typeof raw === "string" ? raw : raw && typeof raw === "object" && "r" in raw ? colorHex(raw) : "");
+    return { id: v.id, name: v.name, ident, type, initial };
+  });
+  const byId = new Map(variables.map((v) => [v.id, v]));
+  const byFull = new Map(variables.map((v) => [v.name, v]));
+  const short = /* @__PURE__ */ new Map();
+  for (const v of variables) {
+    const last = v.name.split("/").pop();
+    short.set(last, short.has(last) ? null : v);
+  }
+  const find = (name) => byFull.get(name) ?? short.get(name) ?? void 0;
+  const overlays = /* @__PURE__ */ new Set();
+  const missingByScreen = /* @__PURE__ */ new Map();
+  const screenOf = (id) => {
+    let at2 = id;
+    while (at2) {
+      const n = doc.nodes[at2];
+      if (!n) return null;
+      if (doc.nodes[n.parentId ?? ""]?.type === "PAGE") return at2;
+      at2 = n.parentId;
+    }
+    return null;
+  };
+  const miss = (nodeId, what) => {
+    const s = screenOf(nodeId);
+    if (s) (missingByScreen.get(s) ?? missingByScreen.set(s, /* @__PURE__ */ new Set()).get(s)).add(what);
+  };
+  let inItem = false;
+  const within = (webId, f) => {
+    const was = inItem;
+    inItem = webId.includes(`~${ITEM_RECORD}`);
+    try {
+      return f();
+    } finally {
+      inItem = was;
+    }
+  };
+  const expr = (src, o = {}) => {
+    let tree;
+    try {
+      tree = parseExpression(src, (name) => byFull.has(name));
+    } catch {
+      return null;
+    }
+    const go = (n) => {
+      switch (n.k) {
+        case "lit":
+          return JSON.stringify(n.v);
+        case "key":
+          return o.key ?? '""';
+        case "var": {
+          const field = inItem ? /^item[._](.+)$/.exec(n.name)?.[1] : void 0;
+          if (field) return `itemField(item, ${JSON.stringify(field)})`;
+          const v = find(n.name);
+          if (!v && inItem) return `itemField(item, ${JSON.stringify(n.name)})`;
+          if (!v) {
+            if (o.at) miss(o.at, `the value "${n.name}"`);
+            return null;
+          }
+          return `v.${v.ident}`;
+        }
+        case "un": {
+          const a = go(n.a);
+          return a === null ? null : n.op === "-" ? `ops.neg(${a})` : `ops.not(${a})`;
+        }
+        case "if": {
+          const c = go(n.c), a = go(n.a), b = go(n.b);
+          return c === null || a === null || b === null ? null : `(truthy(${c}) ? ${a} : ${b})`;
+        }
+        case "call": {
+          const args = n.args.map(go);
+          if (args.some((a) => a === null)) return null;
+          const over = DATA_FUNCTIONS.has(n.fn) && collections.length ? "site.call" : "call";
+          return `${over}(${JSON.stringify(n.fn)}${args.map((a) => `, ${a}`).join("")})`;
+        }
+        case "bin": {
+          const a = go(n.a), b = go(n.b);
+          if (a === null || b === null) return null;
+          if (n.op === "&&") return `(truthy(${a}) ? ${b} : ${a})`;
+          if (n.op === "||") return `(truthy(${a}) ? ${a} : ${b})`;
+          const op = { "+": "add", "-": "sub", "*": "mul", "/": "div", "%": "mod", "<": "lt", "<=": "le", ">": "gt", ">=": "ge", "==": "eq", "!=": "ne" }[n.op];
+          return op ? `ops.${op}(${a}, ${b})` : null;
+        }
+      }
+      return null;
+    };
+    return go(tree);
+  };
+  const routeOf = (screenId) => screenId ? site.pages.find((p) => p.id === screenId && !p.record)?.route ?? null : null;
+  const setter = (a, key, at2) => {
+    const v = a.variableId ? byId.get(a.variableId) : void 0;
+    if (!v) return null;
+    if (a.variableToggle) return `set(${JSON.stringify(v.ident)}, !v.${v.ident})`;
+    if (a.variableExpression?.trim()) {
+      const e = expr(a.variableExpression, { key, at: at2 });
+      if (e === null) return null;
+      const coerce = v.type === "number" ? `num(${e})` : v.type === "boolean" ? `truthy(${e})` : `exprText(${e})`;
+      return `set(${JSON.stringify(v.ident)}, ${coerce})`;
+    }
+    const raw = a.variableValue;
+    const literal = v.type === "number" ? String(Number(raw) || 0) : v.type === "boolean" ? String(raw === true || raw === "true") : JSON.stringify(typeof raw === "string" ? raw : raw == null ? "" : String(raw));
+    return `set(${JSON.stringify(v.ident)}, ${literal})`;
+  };
+  const statements = (a, at2, key, changeTo) => {
+    switch (a.navigationType) {
+      case "NAVIGATE": {
+        const r = routeOf(a.destinationId);
+        if (r) return [`router.push(${JSON.stringify(r)})`];
+        miss(at2, "a go to a frame that is not one of the pages");
+        return [];
+      }
+      case "BACK":
+        return ["router.back()"];
+      case "OPEN_URL": {
+        const link = a.link;
+        if (!link) return [];
+        if (link.kind === "screen") return statements({ ...a, navigationType: "NAVIGATE", destinationId: link.frameId }, at2, key);
+        if (link.kind === "anchor") return statements({ ...a, navigationType: "SCROLL_TO", destinationId: link.nodeId }, at2, key);
+        const href = hrefOf(link, doc.nodes);
+        return href ? [opensNewTab(link) ? `window.open(${JSON.stringify(href)}, '_blank', 'noopener')` : `window.location.assign(${JSON.stringify(href)})`] : [];
+      }
+      case "SCROLL_TO":
+        return a.destinationId ? [`document.querySelector(${JSON.stringify(`[data-pc-id="${a.destinationId}"]`)})?.scrollIntoView({ behavior: 'smooth' })`] : [];
+      case "SET_VARIABLE": {
+        const s = setter(a, key, at2);
+        if (s) return [s];
+        miss(at2, "a Set variable");
+        return [];
+      }
+      case "CONDITIONAL": {
+        const out = [];
+        (a.branches ?? []).forEach((b, i) => {
+          const body = b.actions.flatMap((x) => statements(x, at2, key, changeTo));
+          const cond = b.condition?.trim() ? expr(b.condition, { key, at: at2 }) : null;
+          if (b.condition?.trim() && cond === null) return;
+          const head = !b.condition?.trim() ? i ? "else" : "" : `${i ? "else " : ""}if (truthy(${cond}))`;
+          out.push(`${head}${head ? " " : ""}{ ${body.join("; ")} }`);
+        });
+        return out.length ? [out.join(" ")] : [];
+      }
+      case "OVERLAY":
+      case "SWAP": {
+        if (!routeOf(a.destinationId)) {
+          miss(at2, "an overlay of a frame that is not one of the pages");
+          return [];
+        }
+        overlays.add(a.destinationId);
+        const bg = a.overlayBackground;
+        const opts = [`position: ${JSON.stringify(a.overlayPosition ?? "CENTER")}`, ...bg ? [`dim: ${JSON.stringify(`rgba(${Math.round(bg.color.r * 255)}, ${Math.round(bg.color.g * 255)}, ${Math.round(bg.color.b * 255)}, ${bg.opacity})`)}`] : [], ...a.closeOnOutsideClick ? ["closeOnOutside: true"] : [], ...a.overlayOffset ? [`offset: ${JSON.stringify(a.overlayOffset)}`] : []];
+        return [`overlays.${a.navigationType === "SWAP" ? "swap" : "open"}(${JSON.stringify(a.destinationId)}, { ${opts.join(", ")} })`];
+      }
+      case "CLOSE":
+        return ["overlays.close()"];
+      case "SET_MODE": {
+        const c = site.tokens?.collections.find((x) => x.id === a.collectionId);
+        if (!c || !a.modeId) {
+          miss(at2, "a Set mode");
+          return [];
+        }
+        const classes = c.modes.map((m) => m.id === c.defaultMode ? "" : m.className);
+        const to = a.modeId === "__NEXT__" ? "__NEXT__" : c.modes.find((m) => m.id === a.modeId)?.id === c.defaultMode ? "" : c.modes.find((m) => m.id === a.modeId)?.className ?? "";
+        return [`switchMode(document.documentElement, ${JSON.stringify(classes)}, ${JSON.stringify(to)})`];
+      }
+      case "TIMELINE": {
+        const t = a.timeline;
+        if (!t || t.op === "SCRUB") return [];
+        const screen = screenOf(at2);
+        const markers = site.pages.find((p) => p.id === screen)?.timeline?.stops ?? [];
+        const root = t.target === "INSTANCE" ? hostOf(at2) : screen;
+        return [`controlTimeline(document.querySelector(${JSON.stringify(`[data-pc-id="${root}"]`)}), ${JSON.stringify(t)}, ${JSON.stringify(markers)})`];
+      }
+      // On a component itself (a sheet that shows the masters) there is no instance to change: nothing to carry.
+      case "CHANGE_TO": {
+        const st = changeTo && a.destinationId ? changeTo(a.destinationId, a.targetId) : null;
+        if (st) return [st];
+        if (doc.nodes[at2]?.type !== "COMPONENT" && doc.nodes[at2]?.type !== "COMPONENT_SET") miss(at2, "a Change to whose instance is not on this page");
+        return [];
+      }
+      default:
+        miss(at2, { CHANGE_TO: "component variants" }[a.navigationType] ?? a.navigationType);
+        return [];
+    }
+  };
+  const interactionsOf = (id) => doc.nodes[id]?.interactions ?? [];
+  const hostOf = (id) => {
+    let at2 = id;
+    while (at2) {
+      if (doc.nodes[at2]?.type === "INSTANCE") return at2;
+      at2 = doc.nodes[at2]?.parentId;
+    }
+    return id;
+  };
+  const EVENT = { ON_CLICK: "onClick", MOUSE_ENTER: "onMouseEnter", MOUSE_LEAVE: "onMouseLeave", ON_PRESS: "onPointerDown" };
+  const nodeBindings = (id) => {
+    const n = doc.nodes[id];
+    if (!n) return null;
+    const out = { style: {} };
+    const take = (prop, e) => {
+      if (e === null) return;
+      if (prop === "characters") out.text = `exprText(${e})`;
+      else if (prop === "visible") out.visible = `truthy(${e})`;
+      else if (STYLE_PROPS[prop]) {
+        const [k, val] = STYLE_PROPS[prop](`num(${e})`);
+        out.style[k] = val;
+      }
+    };
+    for (const [prop, vid] of Object.entries(n.boundVariables ?? {})) {
+      const v = byId.get(vid);
+      if (v) take(prop, `v.${v.ident}`);
+    }
+    for (const [prop, src] of Object.entries(n.boundExpressions ?? {})) take(prop, expr(src, { at: id }));
+    return out.text || out.visible || Object.keys(out.style).length ? out : null;
+  };
+  const controlOf = (id) => doc.nodes[id]?.control;
+  const isForm = (id) => controlOf(id)?.kind === "FORM";
+  const formIds = Object.keys(doc.nodes ?? {}).filter(isForm);
+  const collections = visitorCollections(doc.collections);
+  const access = Object.fromEntries(site.pages.filter((p) => p.access && !p.notFound).map((p) => [p.route, p.access]));
+  const signIn = usesSignIn({ ...doc, nodes: doc.nodes ?? {} }) || Object.keys(access).length > 0;
+  const server = formIds.length || signIn || collections.length ? {
+    forms: formIds,
+    collections: collections.map((c) => ({ id: c.id, name: c.name, fields: c.fields.map((f) => ({ id: f.id, name: f.name, type: f.type, ...f.options ? { options: f.options } : {} })), ...c.perVisitor ? { perVisitor: true } : {}, ...c.shared ? { shared: true } : {} })),
+    signIn,
+    user: Object.fromEntries(Object.keys(USER_VARIABLES).map((k) => [k, byFull.get(USER_VARIABLES[k])]).filter(([, v]) => v)),
+    counts: collections.flatMap((c) => {
+      const v = byFull.get(`data/${fieldKey(c.name)}Count`);
+      return v && v.type === "number" ? [{ collection: c.id, variable: v }] : [];
+    }),
+    access,
+    redirect: {
+      signedOut: site.pages.find((p) => p.access === "signedOut" && !p.notFound)?.route ?? site.pages.find((p) => !p.access && !p.notFound)?.route ?? "/",
+      signedIn: site.pages.find((p) => p.access === "signedIn" && !p.notFound)?.route ?? site.pages.find((p) => !p.access && !p.notFound)?.route ?? "/"
+    }
+  } : null;
+  const under = (rootId) => {
+    const out = [];
+    const walk = (id) => {
+      out.push(id);
+      for (const c of doc.nodes[id]?.childIds ?? []) walk(c);
+    };
+    walk(rootId);
+    return out;
+  };
+  for (const id of Object.keys(doc.nodes ?? {})) for (const ix of interactionsOf(id)) statements(ix.action, id);
+  for (const id of formIds) {
+    const after = controlOf(id)?.onSubmit;
+    if (after) statements(after, id);
+  }
+  missingByScreen.clear();
+  return {
+    variables,
+    overlays,
+    server,
+    live: (rootId) => under(layerId(rootId)).some((id) => nodeBindings(id) || interactionsOf(id).length || isForm(id)),
+    bindings: (webId) => within(webId, () => nodeBindings(layerId(webId).split("::").pop())),
+    events: (webId, o = {}) => within(webId, () => {
+      const id = layerId(webId).split("::").pop();
+      const out = {};
+      const control = controlOf(id);
+      if (control?.kind === "FORM") {
+        const after = control.onSubmit ? statements(control.onSubmit, id, void 0, o.changeTo) : [];
+        const record = copyRecord(webId);
+        const form = { id, name: doc.nodes[id]?.name ?? id, ...control.formAction ? { action: control.formAction } : {}, ...control.collectionId ? { collectionId: control.collectionId } : {}, ...record ? { record } : {} };
+        out.onSubmit = `async (e) => { e.preventDefault(); if (await site.submit(e.currentTarget, (e.nativeEvent as SubmitEvent).submitter, ${JSON.stringify(form)})) { ${after.join("; ")} } }`;
+      }
+      const add = (prop, body) => {
+        if (body.length) out[prop] = `${out[prop] ? `${out[prop].slice(0, -2)}; ` : `(${body.some((b) => /\be\./.test(b)) ? "e" : ""}) => { `}${body.join("; ")} }`;
+      };
+      const own = interactionsOf(id).map((ix) => ({ ix, at: id }));
+      const fromVariant = o.variant ? interactionsOf(o.variant).map((ix) => ({ ix, at: o.variant })) : [];
+      for (const { ix, at: at2 } of [...own, ...fromVariant]) {
+        const body = statements(ix.action, at2, void 0, o.changeTo);
+        if (ix.action.navigationType === "CHANGE_TO" && o.variant && o.changeTo && (ix.trigger === "ON_HOVER" || ix.trigger === "ON_PRESS")) {
+          const [enter, leave] = ix.trigger === "ON_HOVER" ? ["onMouseEnter", "onMouseLeave"] : ["onPointerDown", "onPointerUp"];
+          add(enter, body);
+          const back = o.changeTo(o.variant);
+          if (back) add(leave, [back]);
+          continue;
+        }
+        if (ix.trigger === "ON_DRAG" || ix.action.navigationType === "ORBIT_3D") {
+          const a = ix.action;
+          if (a.navigationType === "ORBIT_3D") {
+            add("onPointerDown", [`orbitDrag(e.nativeEvent, document.querySelector<HTMLElement>(${JSON.stringify(`[data-pc-id="${a.destinationId ?? at2}"]`)}), ${JSON.stringify(a.orbit ?? {})})`]);
+            continue;
+          }
+          if (a.navigationType === "TIMELINE" && a.timeline?.op === "SCRUB") {
+            const screen = screenOf(at2);
+            const markers = site.pages.find((p) => p.id === screen)?.timeline?.stops ?? [];
+            add("onPointerDown", [`scrubTimeline(e.nativeEvent, document.querySelector(${JSON.stringify(`[data-pc-id="${a.timeline.target === "INSTANCE" ? hostOf(at2) : screen}"]`)}), ${JSON.stringify(a.timeline)}, ${JSON.stringify(markers)})`]);
+            continue;
+          }
+        }
+        const prop = EVENT[ix.trigger];
+        if (prop) add(prop, body);
+      }
+      return out;
+    }),
+    effects: (screenId) => {
+      const out = [];
+      for (const id of under(screenId)) for (const ix of interactionsOf(id)) {
+        if (ix.trigger === "AFTER_TIMEOUT") {
+          const body = statements(ix.action, id);
+          if (body.length) out.push(`const t${out.length} = window.setTimeout(() => { ${body.join("; ")} }, ${Math.max(0, ix.triggerDelay ?? 0)}); return () => window.clearTimeout(t${out.length})`);
+        }
+        if (ix.trigger === "KEY_DOWN") {
+          const key = ix.triggerKey;
+          const body = statements(ix.action, id, "e.key");
+          if (body.length) out.push(`const k${out.length} = (e: KeyboardEvent) => { ${key ? `if (e.key !== ${JSON.stringify(key)}) return; ` : ""}${body.join("; ")} }; window.addEventListener('keydown', k${out.length}); return () => window.removeEventListener('keydown', k${out.length})`);
+        }
+      }
+      return out;
+    },
+    missing: (rootId) => [...missingByScreen.get(layerId(rootId)) ?? []],
+    itemExpression: (src) => within(`~${ITEM_RECORD}`, () => expr(src))
+  };
+}
+function colorHex(c) {
+  const h = (x) => Math.round(Math.max(0, Math.min(1, x)) * 255).toString(16).padStart(2, "0");
+  return `#${h(c.r)}${h(c.g)}${h(c.b)}${c.a !== void 0 && c.a < 1 ? h(c.a) : ""}`;
+}
+
+// lib/io/web/project/server.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var lines = (...l) => `${l.filter((x) => typeof x === "string").join("\n")}
+`;
+function as(v, value, from) {
+  if (v.type === from) return value;
+  if (v.type === "boolean") return `!!${value}`;
+  if (v.type === "number") return from === "boolean" ? `(${value} ? 1 : 0)` : `Number(${value}) || 0`;
+  return `String(${value})`;
+}
+var setLine = (v, value, from) => v ? `set(${JSON.stringify(v.ident)}, ${as(v, value, from)})` : null;
+function serverFiles(server) {
+  const files = [
+    { path: "lib/popcraft-server.ts", content: lines(
+      "// The site's own server: the forms it keeps and the lists its visitors keep records in (from the design), its",
+      "// database (DATABASE_URL) and its sign-in (SITE_AUTH_URL). app/api/popcraft answers the pages through it.",
+      "",
+      "import type { Collection } from '@popcraft/runtime'",
+      "import { storeFor, type AuthKind, type SiteBackend, type SiteDatabase } from '@popcraft/runtime/server'",
+      "import { siteUrl } from '@/lib/site'",
+      "",
+      `const FORMS = new Set<string>(${JSON.stringify(server.forms)})`,
+      `const COLLECTIONS: Record<string, Collection> = ${JSON.stringify(Object.fromEntries(server.collections.map((c) => [c.id, c])), null, 2)}`,
+      "",
+      "let ready: Promise<SiteDatabase> | null = null",
+      "",
+      "/** The site's database: its two tables are made on first use. */",
+      "function database(): Promise<SiteDatabase | null> {",
+      "  const url = process.env.DATABASE_URL",
+      "  if (!url) return Promise.resolve(null)",
+      "  ready ??= (async () => { const db = storeFor(url); await db.ensure(); return db })().catch((e: unknown) => { ready = null; throw e })",
+      "  return ready",
+      "}",
+      "",
+      "/** The site's sign-in service (Neon Auth or Supabase Auth), told the site's own address. NEON_AUTH_URL is its older name. */",
+      "async function auth() {",
+      "  const authUrl = process.env.SITE_AUTH_URL ?? process.env.NEON_AUTH_URL",
+      "  if (!authUrl) return null",
+      "  const kind = (process.env.SITE_AUTH_KIND as AuthKind | undefined) ?? 'neon-auth'",
+      "  return { kind, authUrl, origin: siteUrl.origin, apiKey: process.env.SITE_AUTH_KEY, adminKey: process.env.SITE_AUTH_ADMIN_KEY }",
+      "}",
+      "",
+      "export const site: SiteBackend = {",
+      "  database,",
+      "  auth,",
+      "  hasForm: id => FORMS.has(id),",
+      "  collection: id => COLLECTIONS[id],",
+      "  // Over https in production; `next dev` serves http, where a Secure cookie would not be kept.",
+      "  secure: process.env.NODE_ENV === 'production',",
+      "}"
+    ) },
+    { path: "app/api/popcraft/[...path]/route.ts", content: lines(
+      "// The site's own requests (forms, sign-in, visitors' records), at /_pc/\u2026 (next.config.ts rewrites them here).",
+      "",
+      "import { siteRequest } from '@popcraft/runtime/server'",
+      "import { site } from '@/lib/popcraft-server'",
+      "",
+      "async function handle(request: Request, { params }: { params: Promise<{ path: string[] }> }): Promise<Response> {",
+      "  const { path } = await params",
+      "  return (await siteRequest(request, `_pc/${path.join('/')}`, site)) ?? Response.json({ error: 'Not found' }, { status: 404 })",
+      "}",
+      "",
+      "export { handle as DELETE, handle as GET, handle as POST }"
+    ) }
+  ];
+  const routes = Object.keys(server.access);
+  if (routes.length) files.push({ path: "proxy.ts", content: lines(
+    "// Each page for one kind of visitor sends the other kind where it is for them: a signed-in page needs an account,",
+    "// a sign-in page is for visitors without one. The session cookie is enough to decide here; the page's provider",
+    "// (lib/popcraft.tsx) asks the server who is signed in, and clears a cookie whose session has ended.",
+    "",
+    "import { NextResponse, type NextRequest } from 'next/server'",
+    "",
+    `const ACCESS: Record<string, 'signedIn' | 'signedOut'> = ${JSON.stringify(server.access)}`,
+    `const GO = ${JSON.stringify(server.redirect)}`,
+    "",
+    "export function proxy(request: NextRequest) {",
+    "  const need = ACCESS[request.nextUrl.pathname]",
+    `  const signedIn = request.cookies.has(${JSON.stringify(SESSION_COOKIE)})`,
+    "  const to = need === 'signedIn' && !signedIn ? GO.signedOut : need === 'signedOut' && signedIn ? GO.signedIn : null",
+    "  return to && to !== request.nextUrl.pathname ? NextResponse.redirect(new URL(to, request.url)) : NextResponse.next()",
+    "}",
+    "",
+    `export const config = { matcher: ${JSON.stringify(routes)} }`
+  ) });
+  return files;
+}
+function siteProviderSource(server) {
+  const u = server.user;
+  const guards = Object.keys(server.access).length > 0;
+  const sayUser = [setLine(u.signedIn, "!!next", "boolean"), setLine(u.name, "next?.name ?? ''", "string"), setLine(u.email, "next?.email ?? ''", "string")].filter(Boolean);
+  const sayError = (value) => setLine(u.error, value, "string");
+  return [
+    "/** A form as the design made it: what it does on the site's server, and (in a list's copy) whose record it is about. */",
+    "export interface SiteForm { id: string; name: string; action?: AuthAction | 'deleteRecord' | 'updateRecord'; collectionId?: string; record?: string }",
+    "interface SiteStore {",
+    "  user: SiteUser | null",
+    "  /** The visitor's own records, by collection, newest first. */",
+    "  records: Record<string, SiteRecord[]>",
+    "  /** An expression function over the visitor's records (`count`, `streak`\u2026), by the collection's name. */",
+    "  call(fn: string, ...args: ExprValue[]): ExprValue",
+    `  /** Send a form; true when it worked (then the design's "on submit" runs). */`,
+    "  submit(form: HTMLFormElement, submitter: HTMLElement | null, about: SiteForm): Promise<boolean>",
+    "}",
+    "",
+    "const client = createSiteClient()",
+    `const MINE = ${JSON.stringify(server.collections.map((c) => c.id))}`,
+    `/** Each list by the name an expression gives it. */`,
+    `const NAMES: Record<string, string> = ${JSON.stringify(Object.fromEntries(server.collections.map((c) => [c.name.trim().toLowerCase(), c.id])))}`,
+    ...guards ? [`const ACCESS: Record<string, 'signedIn' | 'signedOut'> = ${JSON.stringify(server.access)}`, `const GO = ${JSON.stringify(server.redirect)}`] : [],
+    "const SiteContext = createContext<SiteStore | null>(null)",
+    "",
+    "/** The visitor: who is signed in (asked of the site's server on load), their records, and the design's variables that say so. */",
+    "export function SiteProvider({ children }: Readonly<{ children: ReactNode }>) {",
+    ...sayUser.length || server.counts.length || u.error ? ["  const { set } = useVariables()"] : [],
+    ...guards ? ["  const router = useRouter()", "  const path = usePathname()"] : [],
+    "  const [user, setUser] = useState<SiteUser | null>(null)",
+    ...guards ? ["  const [known, setKnown] = useState(false)"] : [],
+    "  const [records, setRecords] = useState<Record<string, SiteRecord[]>>({})",
+    "  const say = useCallback((next: SiteUser | null) => {",
+    "    setUser(next)",
+    ...sayUser.map((l) => `    ${l}`),
+    `  }, [${sayUser.length ? "set" : ""}])`,
+    "  const refresh = useCallback(async (who: SiteUser | null) => {",
+    "    const next: Record<string, SiteRecord[]> = {}",
+    "    for (const id of MINE) next[id] = who ? await client.records(id) : []",
+    "    setRecords(next)",
+    ...server.counts.map((c) => `    ${setLine(c.variable, `next[${JSON.stringify(c.collection)}].length`, "number")}`),
+    `  }, [${server.counts.length ? "set" : ""}])`,
+    `  useEffect(() => { void client.who().then(async who => { say(who); ${guards ? "setKnown(true); " : ""}await refresh(who) }) }, [say, refresh])`,
+    ...guards ? [
+      "  // A page for the other kind of visitor (a cookie whose session had ended got past proxy.ts): where a visit would land.",
+      "  useEffect(() => {",
+      "    if (!known) return",
+      "    const need = ACCESS[path]",
+      "    const to = need === 'signedIn' && !user ? GO.signedOut : need === 'signedOut' && user ? GO.signedIn : null",
+      "    if (to && to !== path) router.replace(to)",
+      "  }, [known, user, path, router])"
+    ] : [],
+    "  const submit = useCallback(async (form: HTMLFormElement, submitter: HTMLElement | null, about: SiteForm): Promise<boolean> => {",
+    "    const values: Record<string, string> = {}",
+    "    new FormData(form, submitter).forEach((value, key) => { if (typeof value === 'string') values[key] = value })",
+    ...sayError("''") ? [`    ${sayError("''")}`] : [],
+    "    try {",
+    "      if (about.action && about.action !== 'deleteRecord' && about.action !== 'updateRecord') {",
+    "        const who = await client.act(about.action, values)",
+    "        say(who)",
+    "        await refresh(who)",
+    "        return true",
+    "      }",
+    "      // A visitor's own list: a form bound to it adds a record; one inside a copy changes or removes that copy's.",
+    "      const of = about.record ? MINE.find(id => records[id]?.some(r => r.id === about.record)) : about.collectionId && MINE.includes(about.collectionId) ? about.collectionId : undefined",
+    "      if (of) {",
+    "        if (!user) throw new Error('Sign in first.')",
+    "        if (about.action === 'deleteRecord') await client.remove(of, about.record ?? '')",
+    "        else if (about.action === 'updateRecord') { const was = records[of]?.find(r => r.id === about.record); if (!was) throw new Error('That is no longer here.'); await client.save(of, { ...was.values, ...values }, about.record) }",
+    "        else await client.save(of, values)",
+    "        await refresh(user)",
+    "        return true",
+    "      }",
+    `      // Kept in the site's database. Refused (none attached, or the request failed): the design's "on submit" does not run.`,
+    "      if (!await client.submit({ id: about.id, name: about.name, values })) throw new Error('That did not go through: nothing was saved. Try again in a moment.')",
+    "      return true",
+    "    } catch (e) {",
+    ...sayError("e instanceof Error ? e.message : 'That did not work. Try again.'") ? [`      ${sayError("e instanceof Error ? e.message : 'That did not work. Try again.'")}`] : ["      void e"],
+    "      return false",
+    "    }",
+    `  }, [records, user, say, refresh${u.error ? ", set" : ""}])`,
+    '  // What `count("Checkins")` and the rest add up: the visitor\'s own records, with when each was made.',
+    "  const data = useMemo<ExprData>(() => ({",
+    "    rows: name => {",
+    "      const id = NAMES[name.trim().toLowerCase()] ?? (MINE.includes(name) ? name : undefined)",
+    "      return id ? (records[id] ?? []).map(r => ({ values: { id: r.id, by: r.by ?? '', mine: r.mine ?? true, ...r.values }, ...(r.createdAt ? { at: Date.parse(r.createdAt) } : {}) })) : undefined",
+    "    },",
+    "  }), [records])",
+    "  const callData = useCallback((fn: string, ...args: ExprValue[]): ExprValue => {",
+    "    const f = FUNCTIONS[fn]",
+    "    if (!f) return 0",
+    "    try { return f(args, data) } catch (e) { if (e instanceof ExprMissing) return 0; throw e }",
+    "  }, [data])",
+    "  const store = useMemo(() => ({ user, records, call: callData, submit }), [user, records, callData, submit])",
+    "  return <SiteContext value={store}>{children}</SiteContext>",
+    "}",
+    "",
+    "/** A field of a visitor's record, as an expression reads it (`item.note`): its values, and `id`, `by`, `mine` and `age` (days old). */",
+    "export function itemField(item: SiteRecord, key: string): ExprValue {",
+    "  if (key === 'id') return item.id",
+    "  if (key === 'by') return item.by ?? ''",
+    "  if (key === 'mine') return item.mine ?? true",
+    "  if (key === 'age') return item.createdAt ? Math.max(0, dayOf(Date.now()) - dayOf(Date.parse(item.createdAt))) : 0",
+    "  return item.values[key] ?? ''",
+    "}",
+    "",
+    "/** Two of a visitor's records in a list's order: by a field, numbers as numbers and words as words. */",
+    "export function itemCompare(a: SiteRecord, b: SiteRecord, key: string): number {",
+    "  const x = itemField(a, key), y = itemField(b, key)",
+    "  return typeof x === 'number' && typeof y === 'number' ? x - y : String(x).localeCompare(String(y), undefined, { numeric: true })",
+    "}",
+    "",
+    "/** A field of a visitor's record as words on the page (a yes-or-no as Yes or No). */",
+    "export function itemWords(item: SiteRecord, key: string): string {",
+    "  const value = itemField(item, key)",
+    "  return typeof value === 'boolean' ? (value ? 'Yes' : 'No') : String(value)",
+    "}",
+    "",
+    "/** The visitor, their records, and `submit` for a form. */",
+    "export function useSite(): SiteStore {",
+    "  const store = useContext(SiteContext)",
+    "  if (!store) throw new Error('useSite is used outside SiteProvider (app/layout.tsx)')",
+    "  return store",
+    "}",
+    ""
+  ];
+}
+function serverReadme(server) {
+  return `## Forms${server.signIn ? ", accounts" : ""} and data
+
+The site has a server of its own (\`app/api/popcraft\`, through \`@popcraft/runtime/server\`): it keeps what its forms
+send${server.signIn ? ", signs visitors up and in with the database's own sign-in (Neon Auth or Supabase Auth)" : ""}${server.collections.length ? ", and keeps each visitor's own records" : ""}. Copy \`.env.example\` to
+\`.env.local\` and set:
+
+| Variable | What it is |
+| --- | --- |
+| \`DATABASE_URL\` | A Postgres connection string (a Neon or Supabase project's). The site makes its two tables on first use |
+${server.signIn ? "| `SITE_AUTH_KIND` | `neon-auth` or `supabase-auth` |\n| `SITE_AUTH_URL` | The sign-in service: a Neon project's Auth URL (Neon console \u2192 Auth), or `https://<project>.supabase.co/auth/v1`. Add the site's address to its trusted domains / redirect URLs |\n| `SITE_AUTH_KEY` | Supabase only: the project's anon key |\n| `SITE_AUTH_ADMIN_KEY` | Supabase only, optional: the service-role key, so visitors can delete their accounts |\n" : ""}| \`NEXT_PUBLIC_SITE_URL\` | The site's address${server.signIn ? " (the origin the sign-in service is told visitors come from)" : ""} |
+
+Without \`DATABASE_URL\` the pages still work: forms are sent and not kept${server.signIn ? ", and nobody can sign in" : ""}.
+
+`;
+}
+
+// lib/io/web/project/islands.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function islandFiles(site, script) {
+  return [
+    { path: "public/pc/island.js", content: script },
+    { path: "public/pc/islands.json", content: JSON.stringify(site.islands ?? {}) },
+    { path: "components/gpu-island.tsx", content: GPU_ISLAND }
+  ];
+}
+var REACT_IMPORT = "import { useEffect, useRef } from 'react'";
+var GPU_ISLAND = `'use client'
+
+// A layer only the GPU draws, drawn live over its picture by PopCraft's renderer (public/pc/island.js), with what it
+// draws from public/pc/islands.json. Both load once, the first time an island is on screen; without WebGPU the
+// picture stays.
+
+${REACT_IMPORT}
+
+interface IslandHandle { invalidate(): void; destroy(): void }
+interface IslandHost { mount(canvas: HTMLCanvasElement, spec: unknown, clock?: () => number): IslandHandle | null; destroy(): void }
+declare global { var popcraftIsland: { createIslandHost(): Promise<IslandHost | null> } | undefined }
+
+let host: Promise<{ host: IslandHost | null; specs: Record<string, unknown> }> | null = null
+function islandHost() {
+  host ??= Promise.all([
+    new Promise<void>((resolve, reject) => {
+      if (globalThis.popcraftIsland) return resolve()
+      const script = document.createElement('script')
+      script.src = '/pc/island.js'
+      script.onload = () => resolve()
+      script.onerror = () => reject(new Error('The island renderer did not load'))
+      document.head.appendChild(script)
+    }).then(() => globalThis.popcraftIsland?.createIslandHost() ?? null),
+    fetch('/pc/islands.json').then(r => r.json() as Promise<Record<string, unknown>>),
+  ]).then(([h, specs]) => ({ host: h, specs })).catch(() => ({ host: null, specs: {} }))
+  return host
+}
+
+/** Island \`id\` (its layer), posed at the time of screen \`screen\`'s timeline. */
+export function GpuIsland({ id, screen }: { id: string; screen: string }) {
+  const canvas = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    const el = canvas.current
+    if (!el || typeof navigator === 'undefined' || !('gpu' in navigator)) return
+    const parent = el.parentElement
+    if (parent && getComputedStyle(parent).position === 'static') parent.style.position = 'relative'
+    let handle: IslandHandle | null = null
+    let gone = false
+    const started = performance.now()
+    // The screen's timeline (its CSS animations), else the time since the island appeared.
+    const clock = () => {
+      const timeline = document.querySelector(\`[data-pc-id="\${screen}"]\`)?.getAnimations({ subtree: true }).find(a => (a as CSSAnimation).animationName?.startsWith('timeline-'))
+      return timeline ? Number(timeline.currentTime ?? 0) : performance.now() - started
+    }
+    const start = () => void islandHost().then(({ host: h, specs }) => {
+      if (gone || !h || !specs[id]) return
+      handle = h.mount(el, specs[id], clock)
+      if (!handle) return
+      // The picture under it has done its work: the canvas shows the layer from here.
+      for (const child of el.parentElement?.children ?? []) if (child !== el) (child as HTMLElement).style.visibility = 'hidden'
+      el.style.display = 'block'
+    })
+    // Asked for once it is on screen, so a page whose island is far below loads nothing until it is reached.
+    const seen = new IntersectionObserver(entries => { if (entries.some(e => e.isIntersecting)) { seen.disconnect(); start() } })
+    seen.observe(el.parentElement ?? el)
+    return () => { gone = true; seen.disconnect(); handle?.destroy() }
+  }, [id, screen])
+  return <canvas ref={canvas} aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'none' }} />
+}
+`;
+
+// lib/io/web/project/versions.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// packages/runtime/package.json
+var package_default = {
+  name: "@popcraft/runtime",
+  version: "0.33.0",
+  description: "What code exported from PopCraft shares: the meaning of expressions (operators and functions) and, as it grows, the parts of a design's behaviour that are common code rather than generated React.",
+  license: "MIT",
+  homepage: "https://popcraft.app/docs/exporting/nextjs",
+  repository: {
+    type: "git",
+    url: "git+https://github.com/getpopcraft/popcraft-app.git",
+    directory: "packages/runtime"
+  },
+  type: "module",
+  sideEffects: false,
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      import: "./dist/index.js"
+    },
+    "./commerce": {
+      types: "./dist/commerce.d.ts",
+      import: "./dist/commerce.js"
+    },
+    "./server": {
+      types: "./dist/server/index.d.ts",
+      import: "./dist/server.js"
+    },
+    "./package.json": "./package.json"
+  },
+  files: [
+    "dist",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE"
+  ],
+  engines: {
+    node: ">=20.9.0"
+  },
+  scripts: {
+    build: "node build.mjs",
+    typecheck: "tsc --noEmit -p .",
+    prepublishOnly: "node build.mjs"
+  },
+  devDependencies: {
+    esbuild: "0.28.2"
+  },
+  dependencies: {
+    "@neondatabase/serverless": "^1.2.0",
+    postgres: "^3.4.9"
+  }
+};
+
+// lib/io/web/project/versions.ts
+var EXPORT_VERSIONS = {
+  /** When the versions below were last checked against npm and built. */
+  checked: "2026-10-03",
+  /** The Node.js an exported Next.js project needs (Next.js's own floor). */
+  node: ">=20.9.0",
+  packages: {
+    next: "16.3.8",
+    react: "19.3.0",
+    "react-dom": "19.3.0",
+    typescript: "6.0.3",
+    "@types/node": "24.19.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    eslint: "9.39.5",
+    "eslint-config-next": "16.3.8",
+    tailwindcss: "4.3.3",
+    "@tailwindcss/postcss": "4.3.3"
+  }
+};
+var RUNTIME_PACKAGE = { name: package_default.name, version: package_default.version };
+var runtimeRange = () => `>=${RUNTIME_PACKAGE.version} <${Number(RUNTIME_PACKAGE.version.split(".")[0]) + 1}.0.0`;
+var range = (name) => `^${EXPORT_VERSIONS.packages[name]}`;
+
+// lib/io/web/project/next.ts
+var all = (n, out = []) => {
+  out.push(n);
+  n.children.forEach((c) => all(c, out));
+  return out;
+};
+function unique(base, taken) {
+  let name = base || "Module";
+  for (let n = 2; taken.has(name); n++) name = `${base}${n}`;
+  taken.add(name);
+  return name;
+}
+var jsxProp = (k, v) => typeof v === "string" ? `${k}=${JSON.stringify(v)}` : `${k}={${JSON.stringify(v)}}`;
+var pageDir = (route) => route === "/" ? "app" : `app${route}`;
+var json = (v) => `${JSON.stringify(v, null, 2)}
+`;
+var googleSet = new Set(GOOGLE_FONTS);
+function projectFonts(site) {
+  return site.fonts.filter((f) => googleSet.has(f.family)).map((f) => {
+    const slug = f.family.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+    return { family: f.family, ident: f.family.replace(/[^A-Za-z0-9]+/g, "_"), variable: `--font-${slug}`, weights: f.weights, variableFont: !NON_VARIABLE_FONTS.has(f.family) };
+  });
+}
+function nextProjectFiles(site, doc, opts = {}) {
+  const tailwind = opts.styling === "tailwind";
+  const fonts = projectFonts(site);
+  const byFamily = new Map(fonts.map((f) => [f.family, f.variable]));
+  const fontFamily = (value) => value.replace(/"([^"]+)"/, (m, family) => byFamily.has(family) ? `var(${byFamily.get(family)})` : m);
+  const files = externalizeBitmaps(site).map((f) => ({ ...f, path: `public/${f.path}` }));
+  const moduleFile = /* @__PURE__ */ new Map();
+  const taken = /* @__PURE__ */ new Set();
+  const packages = {};
+  for (const id of Object.keys(site.code?.modules ?? {}).sort()) {
+    const m = doc.codeModules?.[id];
+    if (!m) continue;
+    const name2 = unique(componentName(m.name), taken);
+    moduleFile.set(id, name2);
+    Object.assign(packages, m.packages);
+    const source = m.source.endsWith("\n") ? m.source : `${m.source}
+`;
+    files.push({ path: `components/code/${name2}.tsx`, content: /^\s*['"]use client['"]/.test(source) ? source : `'use client'
+
+${source}` });
+  }
+  const islands = !!site.islands && Object.keys(site.islands).length > 0 && !!opts.islandScript;
+  if (islands) files.push(...islandFiles(site, opts.islandScript));
+  const behaviour = behaviourOf(site);
+  const media = /* @__PURE__ */ new Set();
+  const routes = [];
+  for (const page of site.pages) {
+    if (routes.includes(page.route) && !page.notFound) continue;
+    if (!page.notFound) routes.push(page.route);
+    for (const rule of page.media ?? site.pages.find((p) => p.screen && p.screen === page.screen && p.media)?.media ?? []) media.add(rule);
+    files.push(...pageFiles(site, page, moduleFile, { tailwind, fontFamily, ownFonts: fonts.length > 0, behaviour, islands }));
+  }
+  const tokens = (site.tokens ? tokensCSS(site.tokens) : []).map(fontFamily);
+  files.push({ path: "app/globals.css", content: [
+    ...tailwind ? ['@import "tailwindcss";', ""] : [],
+    "html, body { margin: 0; min-height: 100%; }",
+    "*, *::before, *::after { box-sizing: border-box; }",
+    "img, picture, svg, video { display: block; max-width: 100%; }",
+    ...tokens,
+    ...[...media].map(fontFamily),
+    ""
+  ].join("\n") });
+  const overlays = behaviour.overlays.size > 0;
+  const server = behaviour.server;
+  files.push({ path: "app/layout.tsx", content: layoutSource(site, fonts, { variables: behaviour.variables.length > 0 || overlays || !!server, overlays, server: !!server }) });
+  if (overlays) files.push({ path: "components/overlays.tsx", content: overlaysSource(site, behaviour) });
+  files.push({ path: "lib/popcraft.tsx", content: stateSource(behaviour) });
+  if (server) files.push(...serverFiles(server));
+  files.push({ path: "app/sitemap.ts", content: sitemapSource(routes) });
+  files.push({ path: "app/robots.ts", content: robotsSource() });
+  files.push({ path: "lib/site.ts", content: siteSource() });
+  const name = fileBase(site.name).toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "") || "site";
+  files.push({ path: "package.json", content: json({
+    name,
+    private: true,
+    version: "0.1.0",
+    type: "module",
+    engines: { node: EXPORT_VERSIONS.node },
+    scripts: { dev: "next dev", build: "next build", start: "next start", lint: "eslint .", typecheck: "tsc --noEmit" },
+    dependencies: { next: range("next"), react: range("react"), "react-dom": range("react-dom"), [RUNTIME_PACKAGE.name]: runtimeRange(), ...packages },
+    devDependencies: {
+      "@types/node": range("@types/node"),
+      "@types/react": range("@types/react"),
+      "@types/react-dom": range("@types/react-dom"),
+      eslint: range("eslint"),
+      "eslint-config-next": range("eslint-config-next"),
+      typescript: range("typescript"),
+      ...tailwind ? { tailwindcss: range("tailwindcss"), "@tailwindcss/postcss": range("@tailwindcss/postcss") } : {}
+    }
+  }) });
+  files.push({ path: "tsconfig.json", content: json({
+    compilerOptions: {
+      target: "ES2022",
+      lib: ["dom", "dom.iterable", "esnext"],
+      allowJs: false,
+      skipLibCheck: true,
+      strict: true,
+      noEmit: true,
+      esModuleInterop: true,
+      module: "esnext",
+      moduleResolution: "bundler",
+      resolveJsonModule: true,
+      isolatedModules: true,
+      jsx: "react-jsx",
+      incremental: true,
+      plugins: [{ name: "next" }],
+      paths: { "@/*": ["./*"] }
+    },
+    include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+    exclude: ["node_modules"]
+  }) });
+  files.push({ path: "next.config.ts", content: [
+    "import type { NextConfig } from 'next'",
+    "",
+    "const nextConfig: NextConfig = {",
+    "  // The pictures are the project's own, in public/: next/image serves them sized for each screen.",
+    "  images: { formats: ['image/avif', 'image/webp'] },",
+    ...server ? [
+      "  // The pages ask their server at /_pc/\u2026 as a published PopCraft site does; app/api/popcraft answers.",
+      "  async rewrites() { return [{ source: '/_pc/:path*', destination: '/api/popcraft/:path*' }] },"
+    ] : [],
+    "}",
+    "",
+    "export default nextConfig",
+    ""
+  ].join("\n") });
+  files.push({ path: "eslint.config.mjs", content: [
+    "import { defineConfig, globalIgnores } from 'eslint/config'",
+    "import nextVitals from 'eslint-config-next/core-web-vitals'",
+    "import nextTs from 'eslint-config-next/typescript'",
+    "",
+    "export default defineConfig([",
+    "  ...nextVitals,",
+    "  ...nextTs,",
+    `  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts'${islands ? ", 'public/pc/**'" : ""}]),`,
+    "])",
+    ""
+  ].join("\n") });
+  if (tailwind) files.push({ path: "postcss.config.mjs", content: "const config = { plugins: { '@tailwindcss/postcss': {} } }\n\nexport default config\n" });
+  files.push({ path: ".gitignore", content: ["# dependencies", "/node_modules", "", "# next.js", "/.next/", "/out/", "next-env.d.ts", "*.tsbuildinfo", "", "# env files", ".env*", "!.env.example", "", "# misc", ".DS_Store", "*.pem", "npm-debug.log*", ""].join("\n") });
+  files.push({ path: ".env.example", content: [
+    "# The address the site is served from: used for its sitemap, robots.txt and social previews" + (server?.signIn ? ", and the origin" : ""),
+    ...server?.signIn ? ["# its sign-in service is told visitors come from."] : [],
+    "NEXT_PUBLIC_SITE_URL=https://example.com",
+    ...server ? ["", "# The Postgres database the site keeps its forms and its visitors' records in (a Neon or Supabase project's connection string).", "# Two tables of its own are made on first use. Unset, forms are not kept and nobody can sign in.", "DATABASE_URL=postgresql://user:password@host/db?sslmode=require"] : [],
+    ...server?.signIn ? ["", "# Sign-in: neon-auth (the Neon project's Auth URL, Neon console \u2192 Auth) or supabase-auth", "# (https://<project>.supabase.co/auth/v1 and its anon key). Add NEXT_PUBLIC_SITE_URL to its trusted domains.", "SITE_AUTH_KIND=neon-auth", "SITE_AUTH_URL=https://ep-example.neonauth.us-east-2.aws.neon.build/neondb/auth", "SITE_AUTH_KEY=", "SITE_AUTH_ADMIN_KEY="] : [],
+    ""
+  ].join("\n") });
+  files.push({ path: "README.md", content: readme(site, { tailwind, fonts, routes, code: moduleFile.size > 0, server }) });
+  return files;
+}
+function listSource(r, b) {
+  let out = `(site.records[${JSON.stringify(r.collectionId)}] ?? [])`;
+  const keep = r.filter ? b.itemExpression(r.filter) : null;
+  if (keep) out += `.filter(item => truthy(${keep}))`;
+  if (r.sort) out += `.toSorted((a, b) => itemCompare(a, b, ${JSON.stringify(r.sort.key)})${r.sort.dir === "DESC" ? " * -1" : ""})`;
+  if (r.offset || r.limit) out += `.slice(${r.offset ?? 0}${r.limit ? `, ${(r.offset ?? 0) + r.limit}` : ""})`;
+  return out;
+}
+function pageFiles(site, page, moduleFile, o) {
+  const imports = /* @__PURE__ */ new Map();
+  const server = o.behaviour.server;
+  const live = o.behaviour.live(page.tree.root.id) || !!server && all(page.tree.root).some((n) => n.repeat && server.collections.some((c) => c.id === n.repeat.collectionId));
+  const effects = live ? o.behaviour.effects(page.tree.root.id) : [];
+  let usesImage = false;
+  let usesIsland = false;
+  const render = (prelude2) => serializeReact({ ...page.tree, root: withAssetBase(page.tree.root, "/"), ...page.machine ? { stateMachine: page.machine } : {} }, {
+    ids: true,
+    name: "Screen",
+    styling: o.tailwind ? "tailwind" : "inline",
+    fontFamily: o.fontFamily,
+    ownFonts: o.ownFonts,
+    ...live ? { behaviour: o.behaviour, prelude: prelude2 } : {},
+    // A GPU island: drawn live over its picture by the renderer the project carries (./islands.ts).
+    ...o.islands ? { island: (n) => {
+      usesIsland = true;
+      return `<GpuIsland id=${JSON.stringify(n.id)} screen=${JSON.stringify(page.tree.root.id)} />`;
+    } } : {},
+    // A visitor's own lists are drawn from their records, which the site provider holds.
+    ...o.behaviour.server ? { lists: (r) => o.behaviour.server.collections.some((c) => c.id === r.collectionId) ? listSource(r, o.behaviour) : null } : {},
+    image: (p) => {
+      usesImage = true;
+      return `<Image src=${JSON.stringify(p.src)} width={${Math.round(p.width)}} height={${Math.round(p.height)}} alt=${JSON.stringify(p.alt)} sizes="(max-width: ${Math.max(1, Math.round(p.width))}px) 100vw, ${Math.max(1, Math.round(p.width))}px" />`;
+    },
+    code: (node) => {
+      const c = node.code;
+      const file = moduleFile.get(c.module);
+      if (!file) return null;
+      const local = c.export && c.export !== "default" ? c.export : file;
+      imports.set(local, c.export && c.export !== "default" ? `import { ${c.export} } from '@/components/code/${file}'` : `import ${file} from '@/components/code/${file}'`);
+      return `<${local} ${Object.entries(c.props).map(([k, v]) => jsxProp(k, v)).join(" ")} />`;
+    }
+  });
+  const effectLines = effects.map((e) => `useEffect(() => { ${e} }, [])`);
+  const draft = `${render([])}
+${effectLines.join("\n")}`;
+  const uses = (re) => re.test(draft);
+  const store = [uses(/\bv\./) ? "v" : "", uses(/\bset\(/) ? "set" : ""].filter(Boolean);
+  const prelude = live ? [
+    ...uses(/\brouter\./) ? ["const router = useRouter()"] : [],
+    ...store.length ? [`const { ${store.join(", ")} } = useVariables()`] : [],
+    ...uses(/\boverlays\./) ? ["const overlays = useOverlays()"] : [],
+    ...uses(/\bsite\.(submit|records|call)\b/) ? ["const site = useSite()"] : [],
+    ...effects.map((e) => {
+      const deps = ["router", "set", "overlays"].filter((d) => new RegExp(`\\b${d}\\b`).test(e));
+      return `useEffect(() => { ${e} }, [${deps.join(", ")}])`;
+    })
+  ] : [];
+  const body = live ? render(prelude) : draft.trimEnd();
+  if (live) {
+    if (uses(/\brouter\./)) imports.set("useRouter", "import { useRouter } from 'next/navigation'");
+    const helpers = ["call", "exprText", "itemCompare", "itemField", "itemWords", "num", "ops", "truthy"].filter((h) => new RegExp(`\\b${h}[.(]`).test(body));
+    const named = [...helpers, ...uses(/\boverlays\./) ? ["useOverlays"] : [], ...uses(/\bsite\.(submit|records|call)\b/) ? ["useSite"] : [], ...store.length ? ["useVariables"] : []].sort();
+    if (named.length) imports.set("popcraft", `import { ${named.join(", ")} } from '@/lib/popcraft'`);
+    const page2 = ["controlTimeline", "orbitDrag", "scrubTimeline", "switchMode"].filter((h) => new RegExp(`\\b${h}\\(`).test(body));
+    if (page2.length) imports.set("runtime", `import { ${page2.join(", ")} } from '@popcraft/runtime'`);
+  }
+  if (usesImage) imports.set("Image", "import Image from 'next/image'");
+  if (usesIsland) imports.set("GpuIsland", "import { GpuIsland } from '@/components/gpu-island'");
+  const nodes = all(page.tree.root);
+  const client = live || /\buse(Effect|Ref|State)\b/.test(body);
+  const hooks = [/<Fragment\b/.test(body) ? "Fragment" : "", effects.length ? "useEffect" : "", /\buseState\(/.test(body) ? "useState" : ""].filter((h) => h && !new RegExp(`import \\{[^}]*\\b${h}\\b`).test(body));
+  if (hooks.length) imports.set("react", `import { ${hooks.join(", ")} } from 'react'`);
+  const left = [
+    nodes.some((n) => n.island) && !o.islands ? "layers drawn live on the GPU are pictures here" : "",
+    ...o.behaviour.missing(page.tree.root.id)
+  ].filter(Boolean);
+  const dir = page.notFound ? "app" : pageDir(page.route);
+  const share = pageShareImage(site, page);
+  const metadata = [
+    "import type { Metadata } from 'next'",
+    "",
+    `export const metadata: Metadata = {`,
+    `  title: ${JSON.stringify(page.title)},`,
+    ...page.description ? [`  description: ${JSON.stringify(page.description)},`] : [],
+    ...page.route !== "/" && !page.notFound ? [`  alternates: { canonical: ${JSON.stringify(page.route)} },`] : [],
+    // Its share image is in `public/` and named from the root: `metadataBase` (app/layout.tsx) makes it absolute.
+    ...share ? [
+      `  openGraph: { title: ${JSON.stringify(page.title)}${page.description ? `, description: ${JSON.stringify(page.description)}` : ""}, images: [{ url: ${JSON.stringify(`/${share.path}`)}, width: ${share.width}, height: ${share.height} }] },`,
+      `  twitter: { card: 'summary_large_image', title: ${JSON.stringify(page.title)}, images: [${JSON.stringify(`/${share.path}`)}] },`
+    ] : [],
+    "}"
+  ];
+  const screen = [
+    ...client ? ["'use client'", ""] : [],
+    ...[...imports.values()].sort(),
+    ...imports.size ? [""] : [],
+    ...left.length ? [`// Exported from PopCraft. Not carried into this page: ${left.join("; ")}. The static export plays them.`, ""] : [],
+    body,
+    ""
+  ].join("\n");
+  const screenFile = page.notFound ? "not-found-screen.tsx" : "screen.tsx";
+  const pageFile = page.notFound ? "not-found.tsx" : "page.tsx";
+  return [
+    { path: `${dir}/${screenFile}`, content: screen },
+    { path: `${dir}/${pageFile}`, content: [
+      ...metadata.slice(0, 1),
+      `import { Screen } from './${screenFile.replace(/\.tsx$/, "")}'`,
+      ...metadata.slice(1),
+      "",
+      `export default function ${page.notFound ? "NotFound" : "Page"}() {`,
+      "  return <Screen />",
+      "}",
+      ""
+    ].join("\n") }
+  ];
+}
+function layoutSource(site, fonts, o) {
+  const { variables } = o;
+  const modes = site.tokens?.active ?? [];
+  const loaders = fonts.map((f) => {
+    const name = f.ident.charAt(0).toLowerCase() + f.ident.slice(1).replace(/_/g, "");
+    const weight = f.variableFont ? "" : `, weight: [${f.weights.map((w) => `'${w}'`).join(", ")}]`;
+    return { name, line: `const ${name} = ${f.ident}({ subsets: ['latin'], display: 'swap', variable: '${f.variable}'${weight} })` };
+  });
+  const classes = [...loaders.map((l) => `\${${l.name}.variable}`), ...modes].join(" ");
+  return [
+    "import type { Metadata, Viewport } from 'next'",
+    ...fonts.length ? [`import { ${fonts.map((f) => f.ident).sort().join(", ")} } from 'next/font/google'`] : [],
+    "import type { ReactNode } from 'react'",
+    "import { siteUrl } from '@/lib/site'",
+    ...o.overlays ? ["import { Overlays } from '@/components/overlays'"] : [],
+    ...variables ? [`import { ${o.overlays ? "OverlayProvider, " : ""}${o.server ? "SiteProvider, " : ""}VariablesProvider } from '@/lib/popcraft'`] : [],
+    "import './globals.css'",
+    "",
+    ...loaders.length ? ["// The faces the design is set in, served from this site (no request to Google from a visitor's browser).", ...loaders.map((l) => l.line), ""] : [],
+    "export const metadata: Metadata = {",
+    "  metadataBase: siteUrl,",
+    `  title: { default: ${JSON.stringify(site.name)}, template: ${JSON.stringify(`%s \xB7 ${site.name}`)} },`,
+    `  openGraph: { siteName: ${JSON.stringify(site.name)}, type: 'website' },`,
+    "}",
+    "",
+    "export const viewport: Viewport = { width: 'device-width', initialScale: 1 }",
+    "",
+    "export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {",
+    "  return (",
+    `    <html lang="en"${classes ? ` className={\`${classes}\`}` : ""}>`,
+    `      <body>${variables ? "<VariablesProvider>" : ""}${o.server ? "<SiteProvider>" : ""}${o.overlays ? "<OverlayProvider>{children}<Overlays /></OverlayProvider>" : "{children}"}${o.server ? "</SiteProvider>" : ""}${variables ? "</VariablesProvider>" : ""}</body>`,
+    "    </html>",
+    "  )",
+    "}",
+    ""
+  ].join("\n");
+}
+function overlaysSource(site, b) {
+  const screens = [...b.overlays].map((id) => site.pages.find((p) => p.id === id)).filter((p) => !!p);
+  const name = (p) => `${componentName(p.title || p.route) || "Overlay"}Overlay`;
+  const align = { CENTER: ["center", "center"], TOP_LEFT: ["flex-start", "flex-start"], TOP_CENTER: ["center", "flex-start"], TOP_RIGHT: ["flex-end", "flex-start"], BOTTOM_LEFT: ["flex-start", "flex-end"], BOTTOM_CENTER: ["center", "flex-end"], BOTTOM_RIGHT: ["flex-end", "flex-end"], MANUAL: ["flex-start", "flex-start"] };
+  return [
+    "'use client'",
+    "",
+    "// The frames the design opens as overlays (OVERLAY / SWAP), drawn over the page while they are open: each is the",
+    "// same screen its own route shows. Open, swap and close them with useOverlays() from lib/popcraft.",
+    "",
+    "import type { ComponentType } from 'react'",
+    "import { useOverlays } from '@/lib/popcraft'",
+    ...screens.map((p) => `import { Screen as ${name(p)} } from '@/${pageDir(p.route)}/screen'`),
+    "",
+    "const SCREENS: Record<string, ComponentType> = {",
+    ...screens.map((p) => `  ${JSON.stringify(p.id)}: ${name(p)},`),
+    "}",
+    `const ALIGN: Record<string, [string, string]> = ${JSON.stringify(align)}`,
+    "",
+    "export function Overlays() {",
+    "  const { list, close } = useOverlays()",
+    "  return list.map(({ id, options }, i) => {",
+    "    const Screen = SCREENS[id]",
+    "    if (!Screen) return null",
+    "    const [justifyContent, alignItems] = ALIGN[options.position ?? 'CENTER']",
+    "    return (",
+    '      <div key={`${id}-${i}`} role="dialog" aria-modal="true" onClick={e => { if (options.closeOnOutside && e.target === e.currentTarget) close() }}',
+    "        style={{ position: 'fixed', inset: 0, zIndex: 1000 + i, display: 'flex', justifyContent, alignItems, background: options.dim ?? 'transparent', padding: options.offset ? `${options.offset.y}px 0 0 ${options.offset.x}px` : undefined }}>",
+    "        <Screen />",
+    "      </div>",
+    "    )",
+    "  })",
+    "}",
+    ""
+  ].join("\n");
+}
+function stateSource(b) {
+  return [
+    "'use client'",
+    "",
+    "// The design's variables, as state every page shares (the provider is in app/layout.tsx), and the helpers the",
+    "// screens' expressions call. What an expression means (its operators and functions) is @popcraft/runtime's, so a",
+    "// value comes out here as it does in PopCraft.",
+    "",
+    `import { createContext, useCallback, useContext, ${b.server ? "useEffect, " : ""}useMemo, useState, type ReactNode } from 'react'`,
+    ...b.server && Object.keys(b.server.access).length ? ["import { usePathname, useRouter } from 'next/navigation'"] : [],
+    `import { ${b.server ? "createSiteClient, dayOf, " : ""}ExprMissing, FUNCTIONS, exprText, num, ops, truthy, type ExprValue${b.server ? ", type AuthAction, type ExprData, type SiteRecord, type SiteUser" : ""} } from '@popcraft/runtime'`,
+    "",
+    "export { exprText, num, ops, truthy }",
+    "",
+    "export interface Variables {",
+    ...b.variables.map((v) => `  /** ${v.name} */
+  ${v.ident}: ${v.type}`),
+    "}",
+    "",
+    "export const initialVariables: Variables = {",
+    ...b.variables.map((v) => `  ${v.ident}: ${v.initial},`),
+    "}",
+    "",
+    "interface Store {",
+    "  v: Variables",
+    "  set: <K extends keyof Variables>(name: K, value: Variables[K]) => void",
+    "}",
+    "",
+    "const VariablesContext = createContext<Store | null>(null)",
+    "",
+    "export function VariablesProvider({ children }: Readonly<{ children: ReactNode }>) {",
+    "  const [v, setV] = useState(initialVariables)",
+    "  const set = useCallback(<K extends keyof Variables>(name: K, value: Variables[K]) => setV(prev => ({ ...prev, [name]: value })), [])",
+    "  const store = useMemo(() => ({ v, set }), [v, set])",
+    "  return <VariablesContext value={store}>{children}</VariablesContext>",
+    "}",
+    "",
+    "/** The variables, and the way to change one. */",
+    "export function useVariables(): Store {",
+    "  const store = useContext(VariablesContext)",
+    "  if (!store) throw new Error('useVariables is used outside VariablesProvider (app/layout.tsx)')",
+    "  return store",
+    "}",
+    "",
+    "/** Where an overlay sits over the page, and how it closes (OVERLAY / SWAP in the design). */",
+    "export interface OverlayOptions { position?: 'CENTER' | 'TOP_LEFT' | 'TOP_CENTER' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_CENTER' | 'BOTTOM_RIGHT' | 'MANUAL'; dim?: string; closeOnOutside?: boolean; offset?: { x: number; y: number } }",
+    "interface OverlayStore { open: OverlayEntry[]; push(id: string, o?: OverlayOptions): void; swap(id: string, o?: OverlayOptions): void; close(): void }",
+    "export interface OverlayEntry { id: string; options: OverlayOptions }",
+    "",
+    "const OverlayContext = createContext<OverlayStore | null>(null)",
+    "",
+    "/** The overlays open over the page, top last. */",
+    "export function OverlayProvider({ children }: Readonly<{ children: ReactNode }>) {",
+    "  const [open, setOpen] = useState<OverlayEntry[]>([])",
+    "  const store = useMemo<OverlayStore>(() => ({",
+    "    open,",
+    "    push: (id, options = {}) => setOpen(prev => [...prev, { id, options }]),",
+    "    swap: (id, options = {}) => setOpen(prev => [...prev.slice(0, -1), { id, options }]),",
+    "    close: () => setOpen(prev => prev.slice(0, -1)),",
+    "  }), [open])",
+    "  return <OverlayContext value={store}>{children}</OverlayContext>",
+    "}",
+    "",
+    "/** Open, swap and close overlays: `overlays.open(id, { position, dim, closeOnOutside })`. */",
+    "export function useOverlays() {",
+    "  const store = useContext(OverlayContext)",
+    "  if (!store) throw new Error('useOverlays is used outside OverlayProvider (app/layout.tsx)')",
+    "  return { open: store.push, swap: store.swap, close: store.close, list: store.open }",
+    "}",
+    "",
+    ...b.server ? siteProviderSource(b.server) : [],
+    "/** One of the expression functions (`count`, `clamp`, `today`\u2026). One that adds up records that are not here gives 0. */",
+    "export function call(fn: string, ...args: ExprValue[]): ExprValue {",
+    "  const f = FUNCTIONS[fn]",
+    "  if (!f) return 0",
+    "  try { return f(args) } catch (e) { if (e instanceof ExprMissing) return 0; throw e }",
+    "}",
+    ""
+  ].join("\n");
+}
+var siteSource = () => [
+  "// Where the site is served from (NEXT_PUBLIC_SITE_URL, see .env.example): its sitemap, robots.txt and the",
+  "// addresses social previews link to are made from it.",
+  "export const siteUrl = new URL(process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000')",
+  ""
+].join("\n");
+var sitemapSource = (routes) => [
+  "import type { MetadataRoute } from 'next'",
+  "import { siteUrl } from '@/lib/site'",
+  "",
+  "export default function sitemap(): MetadataRoute.Sitemap {",
+  `  return ${JSON.stringify(routes)}.map(route => ({ url: new URL(route, siteUrl).href, lastModified: new Date() }))`,
+  "}",
+  ""
+].join("\n");
+var robotsSource = () => [
+  "import type { MetadataRoute } from 'next'",
+  "import { siteUrl } from '@/lib/site'",
+  "",
+  "export default function robots(): MetadataRoute.Robots {",
+  "  return { rules: { userAgent: '*', allow: '/' }, sitemap: new URL('/sitemap.xml', siteUrl).href }",
+  "}",
+  ""
+].join("\n");
+function readme(site, o) {
+  const v = EXPORT_VERSIONS.packages;
+  return `# ${site.name}
+
+Exported from [PopCraft](https://popcraft.app) as a Next.js ${v.next.split(".")[0]} project (App Router, React ${v.react.split(".")[0]}, TypeScript${o.tailwind ? `, Tailwind CSS ${v.tailwindcss.split(".")[0]}` : ""}).
+
+## Run it
+
+You need Node.js ${EXPORT_VERSIONS.node.replace(">=", "")} or newer.
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+Then open http://localhost:3000.
+
+| Command | What it does |
+| --- | --- |
+| \`npm run dev\` | Runs the site locally, reloading as you edit |
+| \`npm run build\` | Builds it for production |
+| \`npm start\` | Serves the production build |
+| \`npm run lint\` | Checks the code with ESLint (Next.js's recommended rules) |
+| \`npm run typecheck\` | Checks the types with TypeScript |
+
+## What is where
+
+| Path | What it is |
+| --- | --- |
+| \`app/layout.tsx\` | The page around every route: language, fonts, the site's metadata |
+${o.routes.map((r) => `| \`${pageDir(r)}/page.tsx\` | \`${r}\`: its title and description, and the screen it shows |`).join("\n")}
+| \`app/**/screen.tsx\` | Each screen as plain TSX: real elements, links and forms. A screen that runs in the browser starts with \`'use client'\` |
+| \`app/globals.css\` | The design's variables${o.tailwind ? ", Tailwind," : ""} and its breakpoints as media queries |
+| \`app/sitemap.ts\`, \`app/robots.ts\` | \`/sitemap.xml\` and \`/robots.txt\`, from \`NEXT_PUBLIC_SITE_URL\` |
+| \`public/\` | The pictures, served through \`next/image\` at the size each screen needs |
+${o.code ? "| `components/code/` | The file's code components, as their source |\n" : ""}${o.server ? "| `app/api/popcraft/`, `lib/popcraft-server.ts` | The site's own server: forms, sign-in and each visitor's records, answered by `@popcraft/runtime/server` |\n" : ""}${o.server && Object.keys(o.server.access).length ? "| `proxy.ts` | Sends a visitor to the page for them: signed-in pages need an account, sign-in pages are for visitors without one |\n" : ""}
+${o.fonts.length ? `Fonts (${o.fonts.map((f) => f.family).join(", ")}) load through \`next/font/google\`: they are downloaded at build time and served from the site itself.
+` : ""}
+${o.server ? serverReadme(o.server) : ""}## Deploy
+
+Set \`NEXT_PUBLIC_SITE_URL\` to the site's address (copy \`.env.example\` to \`.env.local\` for local use), then deploy
+anywhere that runs Next.js: Vercel, a Node server (\`npm run build && npm start\`), or a container.
+
+## Exporting again
+
+Exporting from PopCraft again writes these files again. Keep changes you want to survive in files of your own, or
+treat this project as yours from here on and stop exporting.
+`;
+}
+
+// lib/io/web/project/build.ts
+var runtimeScript = (name) => fetch(`/pc/${name}.js?fresh=${Date.now()}`, { cache: "no-store" }).then((r) => r.ok ? r.text() : null).catch(() => null);
+async function appAssetFiles(paths, under = "") {
+  const got = await Promise.all(paths.map(async (path) => {
+    const res = await fetch(path).catch(() => null);
+    const file = res?.ok ? { path: `${under}${path.replace(/^\//, "")}`, content: new Uint8Array(await res.arrayBuffer()) } : null;
+    return file;
+  }));
+  return got.filter((f) => f !== null);
+}
+async function completeSite(doc, pageId) {
+  const [{ previewSite }, { rendererAssetResolvers }] = await Promise.all([import("./host-MQULY6UW.js"), import("./resolvers-G7FUJFB2.js")]);
+  return previewSite(doc, pageId, rendererAssetResolvers(doc));
+}
+var NoSiteRuntime = class extends Error {
+  constructor() {
+    super("The site runtime is not built in this copy of the app.");
+  }
+};
+async function nextFilesOf(full, doc, opts = {}) {
+  const site = withoutScreenIslands(full);
+  const islandScript = site.islands && Object.keys(site.islands).length ? await runtimeScript("island") : null;
+  return [...nextProjectFiles(site, doc, { ...opts, islandScript }), ...await appAssetFiles(appAssetPaths(site), "public/")];
+}
+async function staticFilesOf(site, opts = {}) {
+  const [siteJs, island, code] = await Promise.all([runtimeScript("site"), site.islands ? runtimeScript("island") : null, site.code ? runtimeScript("code") : null]);
+  if (!siteJs) throw new NoSiteRuntime();
+  const { t } = await import("./runtime-ZFSHTK76.js");
+  site = { ...site, strings: { ...site.strings, formNotSent: t("siteForm.notSent") } };
+  return [...staticSiteFiles(site, { site: siteJs, island, code }, opts), ...await appAssetFiles(appAssetPaths(site))];
+}
+
+// lib/io/web/project/share.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+var SHARE_WIDTH = 1200;
+var SHARE_HEIGHT = 630;
+var SHARE_MAX_BYTES = 1024 * 1024;
+var SHARE_DIR = "share/";
+function shareCrop(w, h) {
+  const ratio = SHARE_WIDTH / SHARE_HEIGHT;
+  if (w / h > ratio) {
+    const cw = h * ratio;
+    return { x: (w - cw) / 2, y: 0, w: cw, h, scale: SHARE_HEIGHT / h };
+  }
+  const ch = w / ratio;
+  return { x: 0, y: 0, w, h: ch, scale: SHARE_WIDTH / w };
+}
+function shareFrameOf(doc, site, choice) {
+  if (choice?.kind === "frame" && doc.nodes[choice.frameId]) return choice.frameId;
+  const home = site.pages.find((p) => p.id === site.home) ?? site.pages.find((p) => !p.notFound) ?? site.pages[0];
+  return home ? home.screen ?? home.id : null;
+}
+async function drawShareFrame(doc, frameId) {
+  const [{ getActiveRenderer }, { encodeImageData }, { documentForExport }] = await Promise.all([
+    import("./renderer-registry-VXOZBJ24.js"),
+    import("./export-4MDHNQHM.js"),
+    import("./export-fills-N6NQHC3B.js")
+  ]);
+  const renderer = getActiveRenderer();
+  const frame = doc.nodes[frameId];
+  if (!renderer || !frame) return null;
+  const shown = documentForExport(doc);
+  const box = uprightBounds(getWorldTransform(shown, frameId), frame.width, frame.height);
+  const crop = shareCrop(box.maxX - box.minX, box.maxY - box.minY);
+  const bounds = { minX: box.minX + crop.x, minY: box.minY + crop.y, maxX: box.minX + crop.x + crop.w, maxY: box.minY + crop.y + crop.h };
+  const pixels = await renderer.exportRegion([shown.nodes[frameId] ?? frame], bounds, crop.scale, shown, shown.styles, void 0, true);
+  if (!pixels) return null;
+  const png = await encodeImageData(pixels, "PNG");
+  if (png && png.size <= SHARE_MAX_BYTES) return { bytes: new Uint8Array(await png.arrayBuffer()), ext: "png" };
+  const jpg = await encodeImageData(pixels, "JPG", 0.85);
+  return jpg ? { bytes: new Uint8Array(await jpg.arrayBuffer()), ext: "jpg" } : null;
+}
+var IMAGE_EXT = { "image/png": "png", "image/jpeg": "jpg", "image/webp": "webp", "image/gif": "gif" };
+async function shareImageFiles(doc, site, under = "") {
+  const files = [];
+  const choice = doc.site?.shareImage;
+  if (choice?.kind === "image") {
+    const { loadMediaBlob } = await import("./media-store-AFWF72EA.js");
+    const blob = await loadMediaBlob(choice.src).catch(() => null);
+    const ext = blob && IMAGE_EXT[blob.type];
+    if (blob && ext) {
+      const path = `${SHARE_DIR}og.${ext}`;
+      files.push({ path: under + path, content: new Uint8Array(await blob.arrayBuffer()) });
+      const size = await imageSize(blob);
+      site.share = { image: path, width: size?.width ?? SHARE_WIDTH, height: size?.height ?? SHARE_HEIGHT };
+    }
+  }
+  if (!site.share) {
+    const frameId = shareFrameOf(doc, site, choice);
+    const drawn = frameId ? await drawShareFrame(doc, frameId) : null;
+    if (drawn) {
+      const path = `${SHARE_DIR}og.${drawn.ext}`;
+      files.push({ path: under + path, content: drawn.bytes });
+      site.share = { image: path, width: SHARE_WIDTH, height: SHARE_HEIGHT };
+    }
+  }
+  const drawnFor = /* @__PURE__ */ new Map();
+  for (const page of site.pages) {
+    const own = doc.nodes[page.screen ?? page.id]?.route?.shareImage;
+    if (!own || !doc.nodes[own]) continue;
+    if (!drawnFor.has(own)) {
+      const drawn = await drawShareFrame(doc, own);
+      const path2 = drawn ? `${SHARE_DIR}${own.replace(/[^\w-]/g, "_")}.${drawn.ext}` : null;
+      if (drawn && path2) files.push({ path: under + path2, content: drawn.bytes });
+      drawnFor.set(own, path2);
+    }
+    const path = drawnFor.get(own);
+    if (path) page.shareImage = path;
+  }
+  return files;
+}
+async function imageSize(blob) {
+  const b = new Uint8Array(await blob.slice(0, 64 * 1024).arrayBuffer());
+  return pictureSize(b);
+}
+function pictureSize(b) {
+  const dv = new DataView(b.buffer, b.byteOffset, b.byteLength);
+  if (b.length > 24 && b[0] === 137 && b[1] === 80) return { width: dv.getUint32(16), height: dv.getUint32(20) };
+  if (b[0] === 255 && b[1] === 216) {
+    let i = 2;
+    while (i + 9 < b.length) {
+      if (b[i] !== 255) return null;
+      const marker = b[i + 1];
+      const len = dv.getUint16(i + 2);
+      if (marker >= 192 && marker <= 207 && marker !== 196 && marker !== 200 && marker !== 204) return { height: dv.getUint16(i + 5), width: dv.getUint16(i + 7) };
+      i += 2 + len;
+    }
+  }
+  return null;
+}
+export {
+  ASSET_DIR,
+  NoSiteRuntime,
+  SHARE_HEIGHT,
+  SHARE_MAX_BYTES,
+  SHARE_WIDTH,
+  appAssetFiles,
+  appAssetPaths,
+  bytesOf,
+  completeSite,
+  drawShareFrame,
+  externalizeBitmaps,
+  nextFilesOf,
+  nextProjectFiles,
+  routeFile,
+  routeUp,
+  shareCrop,
+  shareImageFiles,
+  staticFilesOf,
+  staticSiteFiles,
+  withAssetBase
+};