@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-ONSJ6MSX.js

@@ -0,0 +1,208 @@
+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,
+  SPIKE_TAIL,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  rowSeries,
+  sparkPath,
+  ts
+} from "./chunk-23QLVI6N.js";
+import {
+  hide,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-data-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS announcement post";
+var LOOP = 8e3;
+var SCAN = 900;
+var SETTLE = 2900;
+var BACK = 7100;
+var ROW_H = 66;
+var DEPLOYS = [
+  ["13:41", "search", "v2.9.0", "4%"],
+  ["13:58", "cart", "v7.1.4", "11%"],
+  ["14:02", "payments-gw", "v4.18.2", "92%", true],
+  ["14:10", "auth", "v3.3.1", "2%"]
+];
+var MATCH = DEPLOYS.findIndex((d) => d[4]);
+var cues = [
+  { layer: "Cause tag", preset: "pulse", at: SETTLE + 200, params: { duration: 800, amount: 0.08 } },
+  { layer: "Strip cell", preset: "pulse", at: 3600, stagger: { delay: 40, order: "selection" }, params: { duration: 600, amount: 0.3 } },
+  { layer: "Anomaly figure", preset: "pulse", at: 400, params: { duration: 800, amount: 0.04 } }
+];
+var style_data_announcement_default = defineTemplate({
+  id: "social-saas-style-data-announcement",
+  meta: {
+    name: NAME,
+    description: "An eight-second looping announcement post in a data-dense enterprise look for a new observability feature, change correlation: the message from the first frame over a console panel, an anomaly with its sparkline off the scale beside the last half hour of deploys, a cobalt scan bar that runs down them and settles on the cause as the match ticks to 92%, and latency cells lighting in a travelling wave. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "announcement", "feature", "launch", "saas", "data", "dashboard", "enterprise", "observability", "devops", "table", "loop", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "launch", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "New 20", label(20));
+    ts(k, "Head 70", display(70, { lead: 1.04 }));
+    ts(k, "Head 62", display(62, { lead: 1.05 }));
+    ts(k, "Panel 18", label(18));
+    ts(k, "Svc 26", code(26, 600));
+    ts(k, "Mono 20", code(20));
+    ts(k, "Mono 22", code(22));
+    ts(k, "Fig 56", figure(56));
+    ts(k, "Fig 22", figure(22, 600));
+    ts(k, "Delta 20", figure(20, 600));
+    ts(k, "Tag 16", label(16));
+    ts(k, "Foot 24", body(24, 500));
+    ts(k, "Site 24", code(24));
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Announcement");
+    k.flowSheet(sheet, 28, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    const nw = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", radius: 6, padding: { top: 8, right: 14, bottom: 8, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, name: "New chip" });
+    const live = k.ellipse(nw, 10, "up", { name: "Live dot" });
+    k.text(nw, `NEW IN ${SPANWISE.version} \xB7 CHANGE CORRELATION`, { style: "New 20", color: "onCard", autoWidth: true, name: "New words" });
+    k.text(sheet, "Every anomaly now names\nthe deploy behind it.", { style: "Head 70", color: "text", name: "Headline" });
+    const con = panel(k, sheet, { direction: "HORIZONTAL", name: "Console" });
+    const an = k.stack(con, { width: 340, gap: 8, padding: 24, name: "Anomaly card" });
+    k.text(an, "ANOMALY \xB7 14:02:49", { style: "Panel 18", color: "down", name: "Anomaly label" });
+    k.text(an, SPANWISE.service, { style: "Svc 26", color: "onCard", name: "Anomaly service" });
+    k.text(an, `${SPANWISE.region} \xB7 p99`, { style: "Mono 20", color: "cardMuted", name: "Anomaly region" });
+    k.text(an, "2,340 ms", { style: "Fig 56", color: "onCard", name: "Anomaly figure" });
+    k.text(an, "\u2191 12.9\xD7 in 38 s", { style: "Delta 20", color: "down", name: "Anomaly delta" });
+    const sw = 292, sh = 70;
+    const vals = rowSeries(SERVICES.find((s) => s.anomaly));
+    const calm = vals.slice(0, vals.length - SPIKE_TAIL.length);
+    const lo = Math.min(...calm) * 0.9, hi = Math.max(...calm) * 1.12;
+    const sparkBox = k.frame(an, { x: 0, y: 0, width: sw, height: sh }, { name: "Spark box", clip: true });
+    k.patch(sparkBox, { layoutPositioning: "AUTO" });
+    const calmW = sw * ((calm.length - 1) / (vals.length - 1));
+    k.vector(sparkBox, calmW, sh, [sparkPath(calm, calmW, sh, lo, hi)], [], { name: "Sparkline", absolute: { x: 0, y: 0 }, stroke: { color: "heat", width: 2.5 } });
+    const tail = [calm[calm.length - 1], ...SPIKE_TAIL].map((v, j) => ({ x: j / SPIKE_TAIL.length * (sw - calmW), y: Math.max(1, Math.min(sh, sh - (v - lo) / (hi - lo) * sh)) }));
+    k.vector(sparkBox, sw - calmW, sh, [{ closed: false, points: tail }], [], { name: "Spike", absolute: { x: calmW, y: 0 }, stroke: { color: "down", width: 3 } });
+    k.rect(con, 1, 10, "line", { name: "Split" });
+    const dl = k.stack(con, { width: "FILL", name: "Deploys" });
+    const dh = k.stack(dl, { direction: "HORIZONTAL", height: 52, align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 22, bottom: 0, left: 22 }, fill: "well", name: "Deploys head" });
+    k.text(dh, "DEPLOYS, LAST 30 MIN", { style: "Panel 18", color: "cardMuted", autoWidth: true, name: "Deploys title" });
+    k.text(dh, "MATCH", { style: "Panel 18", color: "cardMuted", autoWidth: true, name: "Match title" });
+    const body_ = k.frame(dl, { x: 0, y: 0, width: 576, height: DEPLOYS.length * ROW_H }, { name: "Deploy rows" });
+    k.patch(body_, { layoutPositioning: "AUTO", layoutSizingHorizontal: "FILL" });
+    const scan = k.rect(body_, 576, ROW_H, k.tint("primary", 0.2), { name: "Scan bar", absolute: { x: 0, y: MATCH * ROW_H } });
+    k.rect(body_, 4, ROW_H, "primary", { name: "Scan edge", absolute: { x: 0, y: MATCH * ROW_H } });
+    let matchFig = "";
+    DEPLOYS.forEach(([t, svc, ver, m, hit], i) => {
+      const r = k.stack(body_, { direction: "HORIZONTAL", width: 576, height: ROW_H, gap: 16, align: "CENTER", padding: { top: 0, right: 22, bottom: 0, left: 22 }, name: "Deploy row", absolute: { x: 0, y: i * ROW_H } });
+      k.rect(r, 576, 1, "rule", { name: "Row rule", absolute: { x: 0, y: ROW_H - 1 } });
+      k.text(r, t, { style: "Mono 20", color: "cardMuted", autoWidth: true, name: "Deploy time" });
+      const w = k.stack(r, { direction: "HORIZONTAL", width: "FILL", gap: 8, align: "CENTER", name: "Deploy words" });
+      k.text(w, `${svc} ${ver}`, { style: "Mono 22", color: "onCard", autoWidth: true, name: "Deploy name" });
+      if (hit) {
+        const tag = k.stack(w, { direction: "HORIZONTAL", width: "HUG", fill: "down", radius: 4, padding: { top: 2, right: 6, bottom: 2, left: 6 }, name: "Cause tag" });
+        k.text(tag, "CAUSE", { style: "Tag 16", color: "well", autoWidth: true, name: "Cause word" });
+      }
+      const f = k.text(r, m, { style: "Fig 22", color: hit ? "onCard" : "cardMuted", width: 96, align: "RIGHT", name: hit ? "Match figure" : "Deploy match" });
+      if (hit) matchFig = f;
+    });
+    const sb = k.stack(dl, { padding: { top: 14, right: 22, bottom: 16, left: 22 }, name: "Strip box" });
+    const st = heatMap(k, sb, { cols: 36, rows: 1, cell: 21, gap: 3, seed: 5, name: "Strip" });
+    for (const c of st.cells) k.patch(c, { name: "Strip cell" });
+    k.patch(st.root, { width: 22 * 24 - 3, clipsContent: true });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.text(foot, "Live today on Business and Enterprise.", { style: "Foot 24", color: "onPaper", autoWidth: true, name: "Foot line" });
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 10, right: 16, bottom: 10, left: 16 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Site 24", color: "onCard", autoWidth: true });
+    });
+    k.instance(foot, "Site pill", { Label: `{{brand.site}}/${SPANWISE.version}` }, { name: "Site" });
+    k.cues(sheet, cues);
+    const dy = (row) => (row - MATCH) * ROW_H;
+    for (const id of [scan, ...k.named(body_, "Scan edge")]) k.animate(id, "translateY", [
+      { t: 0, v: dy(0), ease: ease.hold },
+      { t: SCAN, v: dy(0), ease: ease.inOut("cubic") },
+      { t: SCAN + 700, v: dy(1), ease: ease.hold },
+      { t: SCAN + 1100, v: dy(1), ease: ease.out("back") },
+      { t: SETTLE, v: dy(MATCH), ease: ease.hold },
+      { t: BACK, v: dy(MATCH), ease: ease.inOut("cubic") },
+      { t: LOOP, v: dy(0) }
+    ]);
+    const strip = (keys) => {
+      delete keys[keys.length - 1].ease;
+      return keys;
+    };
+    for (const id of k.named(body_, "Deploy match")) {
+      const v = k.node(id);
+      k.animate(id, "text.content", strip([{ t: 0, v: v.characters, ease: ease.hold }, { t: BACK, v: v.characters, ease: ease.hold }, { t: LOOP, v: v.characters }]));
+    }
+    k.animate(matchFig, "text.content", strip([{ t: 0, v: "\u2014", ease: ease.hold }, { t: SETTLE - 300, v: "41%", ease: ease.hold }, { t: SETTLE - 200, v: "67%", ease: ease.hold }, { t: SETTLE - 100, v: "85%", ease: ease.hold }, { t: SETTLE, v: "92%", ease: ease.hold }, { t: BACK + 150, v: "\u2014" }]));
+    k.patch(matchFig, { characters: "92%" });
+    k.animate(live, "opacity", strip(Array.from({ length: 17 }, (_, i) => ({ t: i * 500, v: i % 2 ? 0.3 : 1, ease: ease.hold }))));
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        restyle(kit, id, "Headline", "Head 70");
+      },
+      vertical: (kit, id) => {
+        restyle(kit, id, "Headline", "Head 62");
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 40 });
+        for (const c of kit.named(id, "Console")) kit.patch(c, { layoutMode: "VERTICAL" });
+        for (const a of kit.named(id, "Anomaly card")) kit.patch(a, { layoutSizingHorizontal: "FILL" });
+        hide(kit, id, ["Split"]);
+        for (const name of ["Deploy row", "Scan bar", "Row rule"]) for (const n of kit.named(id, name)) kit.patch(n, { width: 800 });
+        ts(kit, "Mono 26", code(26));
+        ts(kit, "Fig 26", figure(26, 600));
+        restyle(kit, id, "Deploy name", "Mono 26");
+        restyle(kit, id, "Match figure", "Fig 26");
+        restyle(kit, id, "Deploy match", "Fig 26");
+        for (const r of kit.named(id, "Strip")) kit.patch(r, { width: Math.floor((800 - 44 + 3) / 24) * 24 - 3 });
+        heatMap(kit, id, { cols: 36, rows: 14, cell: 26, gap: 4, hotRow: 5, hotCol: 30, name: "Heat foot", absolute: { x: 2, y: 1474 }, dim: 0.85 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_announcement_default
+};

package/dist/chunks/chunk-OO67GSCX.js

@@ -0,0 +1,349 @@
+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 {
+  compositionSound,
+  frameSound
+} from "./chunk-D655SPLZ.js";
+import {
+  applyAutoLayout
+} from "./chunk-USNPFHKI.js";
+import {
+  carryTextPose,
+  isTextNode,
+  markTextPose
+} from "./chunk-HRDPBECW.js";
+import {
+  NO_RUNTIME,
+  frameMotionEnd,
+  hasFrameMotion,
+  sampleInstances
+} from "./chunk-2WU6JQAQ.js";
+import {
+  poseVideoTimes,
+  videoNodeIds
+} from "./chunk-42KAI6KA.js";
+import {
+  analysisVersion,
+  motionNodes,
+  noteChanged,
+  requestAnalyses,
+  runsOn,
+  sampleNode,
+  sampleSubtree,
+  withAudioScope
+} from "./chunk-ZV7E5HA5.js";
+import {
+  compositionAt,
+  compositionDuration,
+  compositionRoots,
+  compositionStage
+} from "./chunk-XV5ONKNC.js";
+import {
+  getWorldTransform,
+  init_scene_graph
+} from "./chunk-PEAXERBE.js";
+import {
+  init_instance_layout,
+  measureTextLayout
+} from "./chunk-4PE7EX3N.js";
+import {
+  init_time,
+  localTime
+} from "./chunk-AYZ32MGJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/motion/pose.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+init_time();
+
+// lib/motion/pose-layout.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_instance_layout();
+var isAutoLayout = (n) => !!n && (n.type === "FRAME" || n.type === "COMPONENT" || n.type === "INSTANCE") && !!n.layoutMode && n.layoutMode !== "NONE";
+var inFlow = (n) => n.layoutPositioning !== "ABSOLUTE";
+var hugs = (n) => n.layoutSizingHorizontal === "HUG" || n.layoutSizingVertical === "HUG";
+var moved = (a, b) => Math.abs(a.x - b.x) > 1e-6 || Math.abs(a.y - b.y) > 1e-6 || Math.abs(a.width - b.width) > 1e-6 || Math.abs(a.height - b.height) > 1e-6;
+function withBox(node, box) {
+  const copy = { ...node, x: box.x, y: box.y, width: box.width, height: box.height };
+  carryTextPose(node, copy);
+  return copy;
+}
+function reflowPose(base, patches) {
+  let out = null;
+  const resized = [];
+  for (const id in patches) {
+    const posed = patches[id], rest = base[id];
+    if (!rest || id.includes("::")) continue;
+    let node = posed;
+    if (posed.type === "TEXT" && posed.characters !== rest.characters && posed.textAutoResize !== "NONE") {
+      const m = measureTextLayout(posed);
+      if (m && (Math.abs(m.width - posed.width) > 0.5 || Math.abs(m.height - posed.height) > 0.5)) node = withBox(posed, { x: posed.x, y: posed.y, width: m.width, height: m.height });
+    }
+    if (node !== posed) (out ??= { ...patches })[id] = node;
+    if (Math.abs(node.width - rest.width) > 1e-6 || Math.abs(node.height - rest.height) > 1e-6) resized.push(id);
+  }
+  if (!resized.length) return out ?? patches;
+  const posedOf = (id) => (out ?? patches)[id] ?? base[id];
+  const roots = /* @__PURE__ */ new Set();
+  for (const id of resized) {
+    let cur = posedOf(id);
+    let root = null;
+    while (cur && inFlow(cur)) {
+      const parent = cur.parentId ? posedOf(cur.parentId) : void 0;
+      if (!isAutoLayout(parent)) break;
+      root = parent.id;
+      if (!hugs(parent)) break;
+      cur = parent;
+    }
+    if (root) roots.add(root);
+  }
+  for (const r of [...roots]) for (let p = posedOf(r)?.parentId; p; p = posedOf(p)?.parentId ?? null) if (roots.has(p)) {
+    roots.delete(r);
+    break;
+  }
+  for (const rootId of roots) {
+    const sub = {};
+    const collect = (id) => {
+      const n = posedOf(id);
+      if (!n) return;
+      const rest = base[id];
+      sub[id] = rest && n.visible !== rest.visible ? { ...n, visible: rest.visible } : n;
+      for (const c of n.childIds) collect(c);
+    };
+    collect(rootId);
+    const root = sub[rootId];
+    sub[rootId] = { ...root, parentId: null };
+    const laid = applyAutoLayout({ nodes: sub }).nodes;
+    for (const id in sub) {
+      const before = posedOf(id), after = laid[id];
+      if (!after || after === sub[id] || !moved(before, after)) continue;
+      (out ??= { ...patches })[id] = withBox(before, after);
+    }
+  }
+  return out ?? patches;
+}
+
+// lib/motion/pose.ts
+var targetFrameId = (t) => t?.kind === "frame" ? t.frameId : null;
+var targetCompositionId = (t) => t?.kind === "composition" ? t.compositionId : null;
+var sameTarget = (a, b) => a === b || !!a && !!b && targetFrameId(a) === targetFrameId(b) && targetCompositionId(a) === targetCompositionId(b);
+var layered = /* @__PURE__ */ new WeakMap();
+function poseOver(top, under) {
+  let m = layered.get(top);
+  if (!m) layered.set(top, m = /* @__PURE__ */ new WeakMap());
+  let p = m.get(under);
+  if (!p) m.set(under, p = { ...top, beneath: under });
+  return p;
+}
+function reevaluatePose(pose, base) {
+  const under = pose.beneath ? reevaluatePose(pose.beneath, base) : void 0;
+  const again = evaluatePose(under ? under.nodes : base, pose.target, pose.time, { clock: pose.clock, end: pose.end, runtime: pose.runtime, compositions: pose.compositions });
+  return under ? poseOver(again, under) : again;
+}
+var sameAudio = (p, scope) => !scope ? !p.audio : !!p.audio && p.audio.sound === scope.sound && p.audio.time === scope.time && p.audio.version === analysisVersion();
+var MEMO_PER_MAP = 4;
+var memo = /* @__PURE__ */ new WeakMap();
+function evaluatePose(base, target, time, opts = {}) {
+  const clock = opts.clock ?? "transport";
+  const cached = memo.get(base);
+  const end = opts.end;
+  const runtime = opts.runtime ?? NO_RUNTIME;
+  const videos = opts.driveVideo ?? clock === "transport";
+  const comp = target.kind === "composition" ? opts.compositions?.[target.compositionId] : void 0;
+  const sound = target.kind === "composition" ? comp ? compositionSound(comp, base) : null : opts.audio ? null : frameSound(base, target.frameId);
+  const scope = opts.audio ?? (sound?.length ? { sound, time } : null);
+  const hit = cached?.find((p) => sameTarget(p.target, target) && p.time === time && p.end === end && p.clock === clock && p.runtime === runtime && (target.kind === "composition" || !!p.videos === videos) && (target.kind === "frame" || p.compositions === opts.compositions) && sameAudio(p, scope));
+  if (hit) return hit;
+  if (scope) requestAnalyses(scope.sound);
+  const heard = scope ? { audio: { sound: scope.sound, time: scope.time, version: analysisVersion() } } : {};
+  if (target.kind === "composition") return remember(base, cached, { ...compositionPose(base, target, time, clock, runtime, opts.compositions, scope), ...heard });
+  const frameId = target.frameId;
+  return remember(base, cached, { ...withAudioScope(scope, () => framePose(base, target, frameId, time, clock, runtime, end, videos)), ...heard });
+}
+function framePose(base, target, frameId, time, clock, runtime, end, videos) {
+  const own = sampleSubtree(base, frameId, time);
+  const inst = sampleInstances(base, frameId, time, runtime, own);
+  let patches = own;
+  for (const _ in inst.patches) {
+    patches = Object.assign(own, inst.patches);
+    break;
+  }
+  const moving = motionNodes(base, frameId);
+  for (const n of moving) {
+    if (!isTextNode(n) || !n.textAnimators?.length) continue;
+    const t = localTime(base, n.id, frameId, time);
+    if (typeof t !== "number") continue;
+    const copy = patches[n.id] ?? { ...n };
+    markTextPose(copy, t, n);
+    patches[n.id] = copy;
+  }
+  patches = reflowPose(base, patches);
+  if (videos && videoNodeIds(base).length) {
+    patches = { ...patches };
+    poseVideoTimes(base, frameId, time, patches);
+  }
+  const held = end !== void 0 && time >= end;
+  const live = !held && (inst.live || moving.length > 0 && (time < frameMotionEnd(base, frameId) || moving.some(runsOn))) || held && runtime.size > 0 && inst.live;
+  const ids = Object.keys(patches);
+  const posed = ids.length ? { ...base, ...patches } : base;
+  noteChanged(base, posed, ids);
+  const pose = {
+    target,
+    time,
+    clock,
+    base,
+    end,
+    runtime,
+    nodes: posed,
+    animatedIds: new Set(ids),
+    live,
+    ...videos ? { videos } : {}
+  };
+  return pose;
+}
+function remember(base, cached, pose) {
+  const list = cached ?? [];
+  list.unshift(pose);
+  if (list.length > MEMO_PER_MAP) list.length = MEMO_PER_MAP;
+  if (!cached) memo.set(base, list);
+  return pose;
+}
+var STAGE_WHITE = { r: 1, g: 1, b: 1, a: 1 };
+function compositionPose(base, target, time, clock, runtime, compositions, audio) {
+  const comp = compositions?.[target.compositionId];
+  const pose = { target, time, clock, runtime, base, nodes: base, animatedIds: /* @__PURE__ */ new Set(), live: false, compositions, roots: [] };
+  if (!comp) return pose;
+  const rest = { nodes: base };
+  const placed = (id) => base[id] ? getWorldTransform(rest, id) : null;
+  const stage = compositionStage(comp, (id) => {
+    const t = placed(id);
+    return t ? { x: t.cx, y: t.cy } : null;
+  });
+  if (!stage) return pose;
+  const moment = compositionAt(comp, time);
+  let patch = null;
+  const ids = /* @__PURE__ */ new Set();
+  let live = time < compositionDuration(comp);
+  for (const a of [moment.previous, moment.current]) {
+    if (!a || !base[a.clip.frameId]) continue;
+    const fp = evaluatePose(base, { kind: "frame", frameId: a.clip.frameId }, a.local, { clock, runtime, driveVideo: true, ...audio ? { audio } : {} });
+    if (fp.live) live = true;
+    for (const id of fp.animatedIds) {
+      (patch ??= {})[id] = fp.nodes[id];
+      ids.add(id);
+    }
+  }
+  const roots = compositionRoots(moment, stage, (id) => {
+    const t = placed(id), n = base[id];
+    return t && n ? { width: n.width, height: n.height, cx: t.cx, cy: t.cy } : null;
+  });
+  const posed = patch ? { ...base, ...patch } : base;
+  if (patch) noteChanged(base, posed, Object.keys(patch));
+  return {
+    ...pose,
+    nodes: posed,
+    animatedIds: ids,
+    live,
+    roots,
+    stage: { rect: stage, background: comp.background ?? STAGE_WHITE, compositionId: comp.id }
+  };
+}
+function bakeMotion(nodes, frameId, time) {
+  const patches = sampleSubtree(nodes, frameId, time, false);
+  const ids = Object.keys(patches);
+  if (!ids.length) return nodes;
+  const baked = { ...nodes, ...patches };
+  noteChanged(nodes, baked, ids);
+  return baked;
+}
+function poseNodesAt(nodes, ids, time, frameId) {
+  const frames = [];
+  for (const id of ids) {
+    let owner;
+    for (let n = nodes[id]; n && n.type !== "PAGE"; n = n.parentId ? nodes[n.parentId] : void 0) {
+      if ((n.type === "FRAME" || n.type === "COMPONENT") && (frameId ? n.id === frameId : hasFrameMotion(nodes, n.id))) owner = n.id;
+    }
+    if (owner && !frames.includes(owner)) frames.push(owner);
+  }
+  let out = nodes;
+  for (const f of frames) out = evaluatePose(out, { kind: "frame", frameId: f }, Math.max(0, time)).nodes;
+  return out;
+}
+function posedNode(nodes, id, frameId, time) {
+  const node = nodes[id];
+  if (!node) return void 0;
+  const t = localTime(nodes, id, frameId, time);
+  return typeof t === "number" ? sampleNode(node, t, nodes) : node;
+}
+var soloMemo = /* @__PURE__ */ new WeakMap();
+var orbitMemo = /* @__PURE__ */ new WeakMap();
+function withOrbits(pose, orbits) {
+  if (!orbits || !Object.keys(orbits.turns).length) return pose;
+  const hit = orbitMemo.get(pose);
+  if (hit && hit.orbits === orbits) return hit.pose;
+  const nodes = pose.nodes;
+  const patch = {};
+  const visit = (id) => {
+    const n = nodes[id];
+    if (!n) return;
+    const o = orbits.turns[n.name];
+    if (o) patch[id] = { ...n, rotateX: (n.rotateX ?? 0) + o.rotateX, rotateY: (n.rotateY ?? 0) + o.rotateY };
+    for (const c of n.childIds ?? []) visit(c);
+  };
+  for (const r of orbits.roots) visit(r);
+  const ids = Object.keys(patch);
+  const shown = ids.length ? { ...nodes, ...patch } : nodes;
+  noteChanged(nodes, shown, ids);
+  const out = { ...pose, nodes: shown, animatedIds: ids.length ? /* @__PURE__ */ new Set([...pose.animatedIds, ...ids]) : pose.animatedIds, orbits };
+  orbitMemo.set(pose, { orbits, pose: out });
+  return out;
+}
+function withSolo(pose, solo) {
+  const frameId = targetFrameId(pose.target);
+  if (!solo?.length || !frameId) return pose;
+  const key = solo.join("\0");
+  const hit = soloMemo.get(pose);
+  if (hit && hit.solo === key) return hit.pose;
+  const nodes = pose.nodes;
+  const on = new Set(solo.filter((id) => nodes[id]));
+  const onTheWay = /* @__PURE__ */ new Set();
+  for (const id of on) for (let n = nodes[nodes[id]?.parentId ?? ""]; n; n = n.parentId ? nodes[n.parentId] : void 0) onTheWay.add(n.id);
+  const patch = {};
+  const visit = (id) => {
+    const n = nodes[id];
+    if (!n || on.has(id)) return;
+    if (onTheWay.has(id)) {
+      for (const c of n.childIds) visit(c);
+      return;
+    }
+    if (n.visible !== false) patch[id] = { ...n, visible: false };
+  };
+  if (on.size) for (const c of nodes[frameId]?.childIds ?? []) visit(c);
+  const ids = Object.keys(patch);
+  const shown = ids.length ? { ...nodes, ...patch } : nodes;
+  noteChanged(nodes, shown, ids);
+  const out = { ...pose, nodes: shown, animatedIds: ids.length ? /* @__PURE__ */ new Set([...pose.animatedIds, ...ids]) : pose.animatedIds, solo };
+  soloMemo.set(pose, { solo: key, pose: out });
+  return out;
+}
+
+export {
+  targetFrameId,
+  targetCompositionId,
+  sameTarget,
+  poseOver,
+  reevaluatePose,
+  evaluatePose,
+  bakeMotion,
+  poseNodesAt,
+  posedNode,
+  withOrbits,
+  withSolo
+};

package/dist/chunks/chunk-OP6YYXB6.js

@@ -0,0 +1,117 @@
+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 {
+  checkbox,
+  confirms,
+  field,
+  formStyles,
+  select,
+  submit
+} from "./chunk-67AKXLTZ.js";
+import {
+  buttons,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/rsvp-invite.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Light", preset: "pop-in", at: 0, stagger: { delay: 70 } },
+  { layer: "Invite card", preset: "scale-in", at: 200, params: { duration: 800 } },
+  { layer: "Kicker", preset: "rise-in", at: 600 },
+  { layer: "Headline", preset: "rise-in", at: 750, params: { duration: 700 } },
+  { layer: "Detail", preset: "rise-in", at: 950, stagger: { delay: 120 } },
+  { layer: "RSVP form", preset: "rise-in", at: 1300, params: { duration: 700 } },
+  { layer: "Light", preset: "pulse", at: 2600, params: { amount: 0.25 }, stagger: { delay: 90 } }
+];
+var LIGHTS = ["lamp1", "lamp2", "lamp3", "lamp1", "lamp2", "lamp3", "lamp1", "lamp2", "lamp3", "lamp1", "lamp2"];
+var rsvp_invite_default = defineTemplate({
+  id: "web-rsvp-invite",
+  meta: {
+    name: "Animated invitation with a working RSVP",
+    description: "An invitation that arrives \u2014 the card drops in, the date and place rise, a string of lights pops \u2014 with an RSVP that works: name, guests, coming or not, dietary notes and a dish to bring, then a thank-you message in its place. Attach a database when you publish and every reply is saved",
+    category: "web",
+    tags: ["animation", "invitation", "rsvp", "form", "database", "party", "event", "housewarming", "entrance", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["invitation", "event"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Invitation with an RSVP", preset("web-desktop"));
+    k.brand(
+      { paper: "#1B2440", text: "#FFF6E5", onPaper: "#C9CBE0", primary: "#F2B544", onPrimary: "#1B2440", card: "#FFF6E5", onCard: "#1B2440", cardMuted: "#59607D", field: "#FFFFFF", onField: "#59607D", line: "#D9D2BF", lamp1: "#F2B544", lamp2: "#EE6C4D", lamp3: "#7FC8A9", wire: "#3A4570" },
+      { name: "Mina & Theo" }
+    );
+    k.textStyle("Kicker 15", { size: 15, fontWeight: 700, letterSpacing: 1.6, lineHeight: 22, textCase: "UPPER" });
+    k.textStyle("Display 60", { size: 60, fontWeight: 800, letterSpacing: -1.8, lineHeight: 64 });
+    k.textStyle("Display 48", { size: 48, fontWeight: 800, letterSpacing: -1.3, lineHeight: 52 });
+    k.textStyle("Display 36", { size: 36, fontWeight: 800, letterSpacing: -0.9, lineHeight: 42 });
+    k.textStyle("Detail 18", { size: 18, fontWeight: 500, lineHeight: 28 });
+    k.textStyle("Detail 16", { size: 16, fontWeight: 500, lineHeight: 25 });
+    k.textStyle("Form title 22", { size: 22, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    formStyles(k);
+    buttons(k, { style: "Button 16" });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 36, top: 40 });
+    k.timeline(sheet, { duration: 4200, fps: 30 });
+    const lights = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 0, right: 8, bottom: 0, left: 8 }, name: "Lights" });
+    for (const role of LIGHTS) k.ellipse(lights, 18, role, { name: "Light" });
+    const body = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", padding: { top: 8, right: 0, bottom: 48, left: 0 }, name: "Body" });
+    const invite = k.stack(body, { gap: 18, name: "Invite" });
+    k.text(invite, "You are invited", { style: "Kicker 15", color: "onPaper", name: "Kicker" });
+    k.text(invite, "We finally have a kitchen. Come and help us use it.", { style: "Display 60", color: "text", name: "Headline" });
+    for (const line of ["Saturday 14 November, from 6 in the evening", "27 Lark Lane, top floor \u2014 the door with the yellow bell", "Supper is on us. Bring someone, or a dish, or just yourself."])
+      k.text(invite, line, { style: "Detail 18", color: "onPaper", name: "Detail" });
+    const card = k.stack(body, { width: 500, gap: 16, fill: "card", radius: 22, padding: 30, name: "Invite card" });
+    k.text(card, "Will you come?", { style: "Form title 22", color: "onCard", name: "Form title" });
+    const form = k.stack(card, { gap: 14, name: "RSVP form" });
+    field(k, form, { card: true, label: "Your name", name: "name", placeholder: "Jo Bell", required: true });
+    const row = k.stack(form, { direction: "HORIZONTAL", gap: 12, name: "Coming and guests" });
+    select(k, row, { card: true, label: "Coming?", name: "coming", options: ["Yes, I will be there", "Sorry, I cannot make it"] });
+    select(k, row, { card: true, label: "How many of you?", name: "guests", options: ["Just me", "Two", "Three", "Four"] });
+    field(k, form, { card: true, label: "Anything you cannot eat?", name: "dietary", placeholder: "Nuts, shellfish, nothing at all", multiline: true });
+    checkbox(k, form, { card: true, label: "I will bring a dish to share", name: "dish" });
+    submit(k, form, "Send my reply");
+    k.cues(sheet, cues);
+    confirms(k, card, form, { title: "Thank you. We have your reply.", body: "See you on the 14th. If your plans change, reload the page and send it again: we go by the latest.", titleStyle: "Thanks 24", bodyStyle: "Field 16", card: true });
+    webResponsive(k, sheet, {
+      stack: ["Body"],
+      stackMobile: ["Coming and guests"],
+      restyle: { "Display 60": { laptop: "Display 48", tablet: "Display 48", mobile: "Display 36" }, "Detail 18": { mobile: "Detail 16" } },
+      top: { tablet: 32, mobile: 24 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Body")) kit.patch(n, { itemSpacing: 44 });
+        if (size === "tablet" || size === "mobile") for (const n of kit.named(id, "Body")) kit.patch(n, { itemSpacing: 36, counterAxisAlignItems: "MIN" });
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Invite card")) kit.patch(n, { padding: { top: 20, right: 20, bottom: 20, left: 20 } });
+          kit.named(id, "Light").slice(7).forEach((n) => kit.patch(n, { visible: false }));
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  rsvp_invite_default
+};