@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-OQOSHZCI.js

@@ -1,135 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  SERVICES,
-  SPANWISE,
-  body,
-  code,
-  dataBrand,
-  display,
-  figure,
-  kpiRow,
-  label,
-  lockup,
-  panel,
-  servicesTable,
-  ts,
-  widenConsole
-} from "./chunk-2L6C5PWP.js";
-import {
-  restyle
-} from "./chunk-QLV6445V.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/social/style-data-link-preview.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Data SaaS link preview";
-var CON_W = 580;
-var ROWS = SERVICES.slice(1, 6);
-var style_data_link_preview_default = defineTemplate({
-  id: "social-saas-style-data-link-preview",
-  meta: {
-    name: NAME,
-    description: "A link preview card in a data-dense enterprise look for an observability platform: the name, the promise and the address beside a console panel of KPI tiles over a services table, one service washed red and flagged with its sparkline off the scale. Open Graph 1200 \xD7 630 with GitHub social preview and X post sizes",
-    category: "social",
-    tags: ["social", "link preview", "open graph", "og image", "github", "x", "saas", "data", "dashboard", "enterprise", "observability", "devops", "launch"],
-    platforms: ["web", "x", "linkedin", "github"],
-    formats: ["banner", "post"],
-    useCases: ["launch", "brand-intro"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  build() {
-    const k = new Kit(NAME, preset("og-image"));
-    k.quantizeGeometry = true;
-    dataBrand(k);
-    ts(k, "Brand 26", display(26));
-    ts(k, "Head 52", display(50, { lead: 1.06 }));
-    ts(k, "Head 64", display(64, { lead: 1.06 }));
-    ts(k, "Sub 22", body(22));
-    ts(k, "Sub 26", body(26));
-    ts(k, "Site 22", code(22));
-    ts(k, "Label 16", label(16));
-    ts(k, "Kpi 32", figure(32));
-    ts(k, "Delta 16", figure(16, 600));
-    ts(k, "Name 18", code(18, 600));
-    ts(k, "Sub 16", code(16));
-    ts(k, "Cell 18", figure(18, 500));
-    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 9, right: 14, bottom: 9, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
-      k.propText(id, "Label", { style: "Site 22", color: "onCard", autoWidth: true });
-    });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Link preview");
-    k.flowSheet(sheet, 0, { top: 56, right: 56, bottom: 56, left: 56 }, "paper", "CENTER", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    const card = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Card row" });
-    const words = k.stack(card, { width: 460, gap: 22, name: "Words" });
-    lockup(k, words, { size: 42, style: "Brand 26" });
-    k.text(words, SPANWISE.tagline, { style: "Head 52", color: "text", name: "Headline" });
-    k.text(words, "Observability for platform teams at scale. Every span kept.", { style: "Sub 22", color: "onPaper", name: "Sub" });
-    k.instance(words, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
-    const con = panel(k, card, { width: CON_W, name: "Console" });
-    kpiRow(k, con, [
-      { label: "P99, CHECKOUT", value: "2,340 ms", delta: "\u2191 12.9\xD7 at 14:02", tone: "down", name: "P99 figure" },
-      { label: "DETECTED IN", value: "38 s", delta: "cause: payments-gw", tone: "warn", name: "Detect figure" }
-    ], { labelStyle: "Label 16", figStyle: "Kpi 32", deltaStyle: "Delta 16", figW: 230, pad: [14, 20], ruleH: 120 });
-    k.rect(con, "FILL", 1, "line", { name: "Kpi rule bottom" });
-    const t = servicesTable(k, con, { w: CON_W, rowH: 60, rows: ROWS, cols: ["service", "p99", "trend", "state"], widths: { p99: 110, trend: 120, state: 10 }, styles: { head: "Label 16", name: "Name 18", sub: "Sub 16", fig: "Cell 18" }, pad: 20, headH: 36 });
-    const an = t.rows.find((r) => r.service.anomaly);
-    if (an.glow) k.patch(an.glow, { opacity: 1 });
-    k.patch(an.p99, { characters: "2,340 ms" });
-    k.patch(an.dot, { fills: k.paint("down") });
-    k.variants(sheet, [
-      { preset: "github-social", adjust: (kit, id) => {
-        kit.patch(id, { padding: { top: 56, right: 64, bottom: 56, left: 64 } });
-      } },
-      { preset: "x-post", adjust: (kit, id) => {
-        kit.patch(id, { padding: { top: 80, right: 80, bottom: 80, left: 80 } });
-        for (const n of kit.named(id, "Card row")) kit.patch(n, { itemSpacing: 56 });
-        for (const n of kit.named(id, "Words")) kit.patch(n, { width: 600 });
-        widenConsole(kit, id, 1600 - 160 - 600 - 56 - CON_W);
-        for (const n of kit.named(id, "Console")) kit.patch(n, { width: 1600 - 160 - 600 - 56 });
-        ts(kit, "Label 18", label(18));
-        ts(kit, "Kpi 40", figure(40));
-        ts(kit, "Delta 19", figure(19, 600));
-        ts(kit, "Name 22", code(22, 600));
-        ts(kit, "Sub 18", code(18));
-        ts(kit, "Cell 22", figure(22, 500));
-        for (const [n, st] of [["Kpi label", "Label 18"], ["Head label", "Label 18"], ["P99 figure", "Kpi 40"], ["Detect figure", "Kpi 40"], ["P99 figure delta", "Delta 19"], ["Detect figure delta", "Delta 19"], ["Service name", "Name 22"], ["Service region", "Sub 18"], ["Row p99", "Cell 22"], ["Anomaly p99", "Cell 22"]]) restyle(kit, id, n, st);
-        const RH = 104;
-        for (const n of kit.named(id, "Table head")) kit.patch(n, { height: 52 });
-        for (const b of kit.named(id, "Table body")) {
-          kit.patch(b, { height: ROWS.length * RH });
-          const rows = kit.node(b).children ?? [];
-          rows.forEach((r, i) => {
-            kit.patch(r, { y: i * RH, height: RH });
-            for (const g of kit.named(r, "Anomaly glow")) kit.patch(g, { height: RH });
-            for (const g of kit.named(r, "Row rule")) kit.patch(g, { y: RH - 1 });
-          });
-        }
-        restyle(kit, id, "Headline", "Head 64");
-        restyle(kit, id, "Sub", "Sub 26");
-      } }
-    ]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_data_link_preview_default
-};

package/dist/chunks/chunk-OR6HMJRM.js

@@ -1,173 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  RECORD_LIMITS
-} from "./chunk-7BXAKNBN.js";
-import {
-  hashOf
-} from "./chunk-U3SNMHEE.js";
-import {
-  loadKitModules
-} from "./chunk-64RMGOTG.js";
-import {
-  HELPER_NAMES
-} from "./chunk-XAGVE2C6.js";
-import {
-  replay
-} from "./chunk-VZOW336W.js";
-import {
-  insertRootGroups
-} from "./chunk-2Y24BYTM.js";
-import {
-  templateFromDocument
-} from "./chunk-V5AYSOB6.js";
-import {
-  rewriteIds
-} from "./chunk-YFCXPJQS.js";
-import {
-  init_print_pages,
-  init_scene_graph,
-  isFixedPageKind,
-  removeNode
-} from "./chunk-PLZOQXMQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// lib/agent/design-script/build.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-init_scene_graph();
-init_print_pages();
-var DESIGN_NAMESPACES = ["k", "ease", "hex", "preset", ...HELPER_NAMES];
-async function namespaces(name, size) {
-  const m = await loadKitModules();
-  const kit = new m.Kit(name, size);
-  kit.quantizeGeometry = true;
-  return { kit, ns: { k: kit, ease: m.ease, hex: m.hex, preset: m.preset, ...m.helpers }, tracks: m.TRACKS };
-}
-async function sizePreset(size) {
-  const { presetById } = await import("../lib/presets/page-presets.js");
-  if (typeof size === "string") {
-    const p = presetById(size);
-    if (!p) throw new Error(`There is no size "${size}". Use a preset id (ig-story, ig-post, web-desktop, og-image\u2026) or { width, height }.`);
-    return p;
-  }
-  const width = Math.round(size.width), height = Math.round(size.height);
-  if (!(width >= 16 && width <= 8192 && height >= 16 && height <= 16384)) throw new Error("A custom size is 16 to 8192 px wide and 16 to 16384 px tall.");
-  return { id: `custom-${width}x${height}`, name: `${width} \xD7 ${height}`, category: "SOCIAL", width, height, unit: "px" };
-}
-async function buildDesign(source, size, name, record) {
-  if (source.length > RECORD_LIMITS.maxSourceChars) return { calls: 0, error: { message: `A design script is at most ${RECORD_LIMITS.maxSourceChars} characters.` } };
-  const preset = await sizePreset(size);
-  const { kit, ns, tracks } = await namespaces(name, preset);
-  const rec = await record(source, DESIGN_NAMESPACES, { W: preset.width, H: preset.height, NAME: name, TRACKS: tracks });
-  const replayed = await replay(rec, ns);
-  let doc;
-  let finishError;
-  const last = [...rec.ops].reverse().find((o) => o.line)?.line;
-  try {
-    doc = kit.finish();
-  } catch (err) {
-    finishError = { message: `Laying out the design failed after the script ran: ${err.message}. Look for a wrong value in a layer's options (a fill, an effect, a size).`, ...last ? { line: last } : {} };
-  }
-  return { doc, error: rec.error ?? replayed.error ?? finishError, calls: rec.ops.length };
-}
-function builtRoots(t) {
-  const frames = [], components = [];
-  for (const page of t.payload.pages ?? []) for (const id of page.rootIds) {
-    const n = t.payload.nodes[id];
-    if (!n) continue;
-    (n.type === "COMPONENT" || n.type === "COMPONENT_SET" ? components : frames).push(id);
-  }
-  return { frames, components };
-}
-var DERIVED = /* @__PURE__ */ new Set(["x", "y", "width", "height", "designScript", "id", "parentId", "childIds"]);
-function hashRoots(doc, roots) {
-  const parts = [];
-  const walk = (id) => {
-    const n = doc.nodes[id];
-    if (!n) return;
-    const kept = { kids: n.childIds.length };
-    for (const key of Object.keys(n).sort()) if (!DERIVED.has(key)) kept[key] = n[key];
-    parts.push(JSON.stringify(kept));
-    n.childIds.forEach(walk);
-  };
-  roots.forEach(walk);
-  return hashOf(parts.join("\n"));
-}
-function freeSpot(doc, pageId) {
-  const kids = (doc.nodes[pageId]?.childIds ?? []).map((id) => doc.nodes[id]).filter(Boolean);
-  if (!kids.length) return { x: 0, y: 0 };
-  const right = Math.max(...kids.map((n) => n.x + n.width));
-  const top = Math.min(...kids.map((n) => n.y));
-  return { x: Math.round(right + 200), y: Math.round(top) };
-}
-function placeDesign(doc, built, source, size, name, at) {
-  const t = templateFromDocument(built, { name, source: "builtin" });
-  const { frames, components } = builtRoots(t);
-  if (!frames.length) throw new Error("The script made no frame. Build into k.sheet (the frame it starts with).");
-  let document = doc;
-  let origin = freeSpot(doc, at.pageId);
-  let oldRoots = [];
-  if (at.replace) {
-    const old = doc.nodes[at.replace];
-    if (!old) throw new Error(`There is no frame "${at.replace}" to rebuild.`);
-    origin = { x: old.x, y: old.y };
-    oldRoots = old.designScript?.roots ?? [at.replace];
-    for (const id of oldRoots) document = removeNode(document, id);
-  }
-  const box = (ids) => {
-    const ns = ids.map((id) => t.payload.nodes[id]);
-    return { x: Math.min(...ns.map((n) => n.x)), y: Math.min(...ns.map((n) => n.y)), bottom: Math.max(...ns.map((n) => n.y + n.height)) };
-  };
-  const fb = box(frames);
-  const groups = [{ rootIds: frames, ox: origin.x - fb.x, oy: origin.y - fb.y }];
-  if (components.length) {
-    const cb = box(components);
-    groups.push({ rootIds: components, ox: origin.x - cb.x, oy: origin.y + (fb.bottom - fb.y) + 240 - cb.y });
-  }
-  const inserted = insertRootGroups(document, t, groups, at.pageId);
-  document = inserted.document;
-  let roots = inserted.rootIds;
-  const oldFrames = oldRoots.filter((id) => doc.nodes[id]?.type === "FRAME");
-  if (oldFrames.length) {
-    const keep = /* @__PURE__ */ new Map();
-    roots.slice(0, frames.length).forEach((id, i) => {
-      if (oldFrames[i]) keep.set(id, oldFrames[i]);
-    });
-    document = rewriteIds(document, keep);
-    roots = roots.map((id) => keep.get(id) ?? id);
-  }
-  const placed = { rootIds: roots.slice(0, frames.length) };
-  if (!isFixedPageKind(document.settings?.kind)) {
-    const nodes = { ...document.nodes };
-    for (const id of placed.rootIds) {
-      const n = nodes[id];
-      if (n?.print) {
-        const { print: _p, ...rest } = n;
-        void _p;
-        nodes[id] = rest;
-      }
-    }
-    document = { ...document, nodes };
-  }
-  const master = placed.rootIds[0];
-  document = { ...document, nodes: { ...document.nodes, [master]: { ...document.nodes[master], name } } };
-  const designScript = { source, size, roots, builtHash: hashRoots(document, roots) };
-  document = { ...document, nodes: { ...document.nodes, [master]: { ...document.nodes[master], designScript } } };
-  return { document, roots, master };
-}
-var templateOfBuild = (built, name) => templateFromDocument(built, { name, source: "builtin" });
-
-export {
-  DESIGN_NAMESPACES,
-  sizePreset,
-  buildDesign,
-  hashRoots,
-  placeDesign,
-  templateOfBuild
-};

package/dist/chunks/chunk-ORPIGG2F.js

@@ -1,84 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  standardPortfolio
-} from "./chunk-GCZNQTN6.js";
-import {
-  SERIF
-} from "./chunk-X23ZWFW2.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/portfolio-architect.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var WORK = [
-  { title: "Ravine House", client: "Private client", year: "2026", kind: "Residential \xB7 Oslo", cover: "arch-00", summary: "A concrete house cantilevered six metres over a forest ravine.", story: "The house rests on two walls set into the rock; everything else hangs over the trees. Built in cast-in-place concrete with oak inside.", credits: "Architecture \u2014 Atelier Nord \xB7 Structure \u2014 Rib Engineering" },
-  { title: "White Stair", client: "Galleri Lys", year: "2026", kind: "Interior \xB7 Bergen", cover: "arch-01", summary: "A spiral stair of white plaster under a single skylight.", story: "The stair joins three gallery floors in a converted warehouse; at noon the skylight draws a circle down all three.", credits: "Architecture \u2014 Atelier Nord" },
-  { title: "Reading Room", client: "Municipality of \xC5lesund", year: "2025", kind: "Public library", cover: "arch-02", summary: "A timber library with tall arched windows on the harbour.", story: "A glulam structure of twelve arches, each framing a view of the boats. The roof collects rain for the park.", credits: "Architecture \u2014 Atelier Nord \xB7 Landscape \u2014 Fjell" },
-  { title: "Court Housing", client: "Bostad Kooperativ", year: "2025", kind: "Housing \xB7 64 homes", cover: "arch-03", summary: "A brick courtyard block with planted balconies for a housing cooperative.", story: "Every flat has two aspects and a balcony deep enough to eat on. The courtyard is the cooperative\u2019s shared garden.", credits: "Architecture \u2014 Atelier Nord" },
-  { title: "Earth Chapel", client: "Parish of Hov", year: "2024", kind: "Sacred \xB7 Hov", cover: "arch-04", summary: "A small chapel of rammed earth with one slit of light.", story: "Built from the soil dug for its own foundations, by the parish over two summers.", credits: "Architecture \u2014 Atelier Nord \xB7 Earth building \u2014 Leire" },
-  { title: "Lake Pavilion", client: "Sj\xF8 Festival", year: "2024", kind: "Pavilion \xB7 Temporary", cover: "arch-05", summary: "A glass pavilion on a lake that glows at dusk.", story: "Designed to be taken apart and rebuilt each summer; it is now in its third location.", credits: "Architecture \u2014 Atelier Nord" },
-  { title: "Hill School", client: "Municipality of Voss", year: "2023", kind: "Education \xB7 420 pupils", cover: "arch-06", summary: "A school of terracotta roofs stepping down a hillside.", story: "Each class has its own roof and its own door to the garden.", credits: "Architecture \u2014 Atelier Nord \xB7 Engineering \u2014 Voss" },
-  { title: "Copper Screen", client: "Kulturhus", year: "2023", kind: "Facade", cover: "arch-07", summary: "A perforated copper facade that casts the afternoon onto the foyer floor.", story: "The pattern is the town\u2019s map, punched into 900 panels.", credits: "Architecture \u2014 Atelier Nord \xB7 Fabrication \u2014 Metallverk" }
-];
-var portfolio_architect_default = defineTemplate({
-  id: "web-portfolio-architect",
-  meta: {
-    name: "Architect monograph",
-    description: "An architecture practice\u2019s portfolio set as a monograph, whose pages swing open in 3D like a door onto the next project and swing shut on the way home. Tall photographs two across in a serif layout, a page per building and a practice page. Drawn on the GPU with WebGPU, in CSS 3D elsewhere. The projects are a collection you edit as a table. Desktop, tablet and phone",
-    category: "web",
-    tags: ["portfolio", "3d", "swing", "door", "transition", "webgpu", "architecture", "serif", "monograph", "cms", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["portfolio"],
-    created: "2026-10-05",
-    updated: "2026-10-05"
-  },
-  breakpoints: true,
-  build: () => standardPortfolio({
-    name: "Architect monograph",
-    brand: { paper: "#FFFFFF", text: "#151515", onPaper: "#666666", primary: "#151515", onPrimary: "#FFFFFF", card: "#FFFFFF", line: "#E6E6E6" },
-    fields: { name: "Atelier Nord", email: "post@ateliernord.no" },
-    styles: {
-      "Wordmark 22": { size: 22, fontWeight: 600, letterSpacing: 0.2, lineHeight: 28, ...SERIF },
-      "Small 13": { size: 13, fontWeight: 500, letterSpacing: 1, lineHeight: 18 },
-      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
-      "Title 22": { size: 22, fontWeight: 500, lineHeight: 28, ...SERIF },
-      "Lead 26": { size: 26, fontWeight: 400, lineHeight: 36, ...SERIF },
-      "Body 18": { size: 18, fontWeight: 400, lineHeight: 30, ...SERIF },
-      "Display 72": { size: 72, fontWeight: 400, letterSpacing: -1.6, lineHeight: 78, ...SERIF },
-      "Display 42": { size: 42, fontWeight: 400, letterSpacing: -0.8, lineHeight: 48, ...SERIF }
-    },
-    type: { wordmark: "Wordmark 22", small: "Small 13", meta: "Meta 14", title: "Title 22", lead: "Lead 26", body: "Body 18", display: "Display 72", displaySmall: "Display 42" },
-    projects: WORK,
-    go: "SWING_OPEN",
-    back: "SWING_CLOSE",
-    side: 120,
-    links: [["work", "Projects"], ["studio", "Practice"]],
-    lead: { headline: "Buildings made of what is near, for the people who will use them.", intro: "Atelier Nord is an architecture practice of eleven in Oslo, working on houses, public buildings and housing across Norway.", width: 1e3 },
-    grid: { cols: 2, gap: 56, ratio: 0.75, radius: 0, meta: "{{item.kind}}, {{item.year}}" },
-    project: { ratio: 0.62, kicker: "Project", more: { cols: 3, ratio: 0.75, label: "Other projects" } },
-    studio: {
-      statement: "A practice of eleven, two dogs and a model workshop.",
-      about: "We were founded in 2012 by Ingrid Dahl and Jonas Berg. We build mostly in timber, brick and earth, and we model every project by hand before it is drawn.",
-      picture: "arch-05",
-      ratio: 0.45,
-      services: ["Architecture", "Interiors", "Urban housing", "Competitions"],
-      clients: "The municipalities of \xC5lesund and Voss, Bostad Kooperativ, the Parish of Hov, Galleri Lys and private clients.",
-      contact: "Visits to the studio by appointment."
-    },
-    elsewhere: "Instagram \xB7 ArchDaily"
-  })
-});
-
-export {
-  portfolio_architect_default
-};

package/dist/chunks/chunk-OT26PQOK.js

@@ -1,185 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  classNameFor,
-  fontsHref,
-  interactiveSpec
-} from "./chunk-2UTO5644.js";
-import {
-  CHECK_STYLE,
-  MOTION_PLAY_RULE,
-  MOTION_SCRIPT,
-  PROTOTYPE_JS,
-  altFor,
-  elementOf,
-  escapeHTML,
-  imageRoleAttrs,
-  labelSVG,
-  machineLayers,
-  machineScript,
-  placementStyle,
-  styleMapToCSSText,
-  styleMapToInline,
-  tokensCSS
-} from "./chunk-DHZBRKFZ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// lib/io/web/html.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var pictureMarkup = (node, picture, indent) => {
-  if (!picture) return "";
-  if (picture.kind === "svg") return `
-${indent}  ${labelSVG(picture.svg, node)}`;
-  if (picture.kind === "img") return `
-${indent}  <img src="${picture.src}" width="${node.width}" height="${node.height}" alt="${escapeHTML(altFor(node))}" />`;
-  return `
-${indent}  <!-- ${escapeHTML(picture.reason)}: render this node to ${picture.format.toUpperCase()} -->`;
-};
-var runMarkup = (run) => {
-  const style = Object.keys(run.style).length ? ` style="${escapeHTML(styleMapToInline(run.style))}"` : "";
-  const words = escapeHTML(run.text);
-  if (run.link) return `<a href="${escapeHTML(run.link)}"${style}>${words}</a>`;
-  return style ? `<span${style}>${words}</span>` : words;
-};
-var interactiveScript = (spec) => `${PROTOTYPE_JS}
-popcraftMount(document.querySelector('[data-pc="0"]'), ${JSON.stringify(spec)});`;
-function serializeHTML(tree, opts = {}) {
-  const rules = [];
-  const keyframes = [];
-  let triggered = false;
-  const spec = opts.inline ? null : interactiveSpec(tree);
-  const machine = opts.inline ? null : tree.stateMachine ?? null;
-  const listened = machineLayers(machine);
-  const emit = (node, depth, isRoot) => {
-    const indent = "  ".repeat(depth);
-    const el = elementOf(node, { isRoot, spec, listened, still: opts.inline });
-    const { tag, style } = el;
-    let attrs;
-    if (opts.inline || el.pc) {
-      attrs = ` style="${escapeHTML(styleMapToInline(style))}"`;
-      if (el.pc) {
-        attrs = ` class="${classNameFor(node)}"${attrs} data-pc="${el.pc.uid}" data-layer="${escapeHTML(el.pc.layer)}"`;
-        if (el.keyframes && !keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
-        if (el.motionTrigger) {
-          attrs += ` data-motion="${el.motionTrigger}"`;
-          triggered = true;
-        }
-      }
-    } else {
-      const cls = classNameFor(node);
-      const own = Object.fromEntries(Object.entries(style).filter(([, v]) => v.includes("{{")));
-      const shared = Object.fromEntries(Object.entries(style).filter(([, v]) => !v.includes("{{")));
-      rules.push(`.${cls} {
-${styleMapToCSSText(shared, "  ")}
-}`);
-      attrs = ` class="${cls}"${Object.keys(own).length ? ` style="${styleMapToInline(own)}"` : ""}`;
-      if (el.keyframes) {
-        if (!keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
-        attrs += " data-motion-child";
-      }
-      if (el.motionTrigger) {
-        attrs += ` data-motion="${el.motionTrigger}"`;
-        triggered = true;
-      }
-    }
-    const sends = node.action ? opts.form?.(node) : null;
-    for (const [k, v] of Object.entries({ ...el.attrs, ...sends?.attrs })) attrs += ` ${k}="${escapeHTML(v)}"`;
-    attrs += imageRoleAttrs(node);
-    if (opts.ids) attrs += ` data-pc-id="${escapeHTML(node.id)}"`;
-    if (machine && isRoot) attrs += ' data-sm-root=""';
-    if (machine && el.sm) attrs += ` data-sm="${escapeHTML(el.sm)}"`;
-    if (el.input?.tag === "input") return `${indent}<input${attrs} />`;
-    if (el.input) {
-      const body2 = el.input.tag === "select" ? (el.input.options ?? []).map((o) => `
-${indent}  <option value="${escapeHTML(o.value)}"${o.value === el.input.value ? " selected" : ""}>${escapeHTML(o.label)}</option>`).join("") + `
-${indent}` : escapeHTML(el.input.value ?? "");
-      return `${indent}<${tag}${attrs}>${body2}</${tag}>`;
-    }
-    const check = el.check ? `
-${indent}  <input${Object.entries(el.check.attrs).map(([k, v]) => ` ${k}="${escapeHTML(v)}"`).join("")} style="${CHECK_STYLE}" />` : "";
-    if (el.html !== void 0) return `${indent}<${tag}${attrs}>${el.html}</${tag}>`;
-    const words = el.runs ? el.runs.map(runMarkup).join("") : el.text !== void 0 ? escapeHTML(el.text) : null;
-    if (words !== null && !el.picture && !node.children.length && !node.repeat && !check && !sends?.fields) return `${indent}<${tag}${attrs}>${words}</${tag}>`;
-    const inner = [
-      el.runs ? `
-${indent}  ${el.runs.map(runMarkup).join("")}` : el.text !== void 0 ? `
-${indent}  ${escapeHTML(el.text)}` : "",
-      pictureMarkup(node, el.picture, indent),
-      ...sends?.fields ? [`
-${indent}  ${sends.fields}`] : [],
-      ...listed(node, depth),
-      check
-    ].join("");
-    return inner ? `${indent}<${tag}${attrs}>${inner}
-${indent}</${tag}>` : `${indent}<${tag}${attrs}></${tag}>`;
-  };
-  const listed = (node, depth) => {
-    const loop = node.repeat && opts.lists?.(node);
-    if (!loop || !node.repeat) return node.children.map((c) => `
-${emit(c, depth + 1, false)}`);
-    const indent = "  ".repeat(depth + 1);
-    return [`
-${indent}${loop.open}`, ...node.repeat.template.map((c) => `
-${emit(c, depth + 2, false)}`), `
-${indent}${loop.close}`];
-  };
-  const body = emit(tree.root, opts.document ? 2 : 0, true);
-  const fonts = opts.document ? fontsHref(tree) : null;
-  const note = tree.truncated ? "\n<!-- subtree truncated at the node cap -->" : "";
-  if (!opts.inline && tree.rules) rules.unshift(...tree.rules);
-  if (!opts.inline && tree.tokens) rules.unshift(...tokensCSS(tree.tokens));
-  if (triggered) rules.push(MOTION_PLAY_RULE);
-  for (const k of tree.interactive && !opts.inline ? tree.interactive.keyframes : []) if (!keyframes.includes(k)) keyframes.push(k);
-  rules.push(...keyframes);
-  const scripts = [triggered ? MOTION_SCRIPT : "", spec ? interactiveScript(spec) : "", machine ? machineScript(machine) : ""].filter(Boolean);
-  const script = scripts.length ? `
-<script>
-${scripts.join("\n")}
-</script>` : "";
-  if (!opts.document) return opts.inline ? body + note : `<style>
-${rules.join("\n")}
-</style>
-${body}${note}${script}`;
-  return [
-    "<!DOCTYPE html>",
-    `<html lang="${escapeHTML(opts.lang ?? "en")}">`,
-    "<head>",
-    '<meta charset="utf-8" />',
-    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
-    `<title>${escapeHTML(opts.title ?? tree.root.name)}</title>`,
-    ...fonts ? [`<link rel="stylesheet" href="${escapeHTML(fonts)}" />`] : [],
-    ...opts.inline ? [] : ["<style>", "body { margin: 0; }", ...rules, "</style>"],
-    "</head>",
-    "<body>",
-    body + note + script,
-    "</body>",
-    "</html>"
-  ].join("\n");
-}
-function serializeCSS(tree) {
-  const out = [];
-  const keyframes = [];
-  let triggered = false;
-  const walk = (node, isRoot) => {
-    out.push(`.${classNameFor(node)} {
-${styleMapToCSSText({ ...placementStyle(node, isRoot), ...node.style, ...node.motion?.style }, "  ")}
-}`);
-    if (node.motion && !keyframes.includes(node.motion.keyframes)) keyframes.push(node.motion.keyframes);
-    if (node.motionTrigger) triggered = true;
-    for (const c of node.children) walk(c, false);
-  };
-  walk(tree.root, true);
-  if (triggered) out.push(MOTION_PLAY_RULE);
-  return [...out, ...keyframes].join("\n\n");
-}
-
-export {
-  serializeHTML,
-  serializeCSS
-};