@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-WNEWEPJ2.js

@@ -0,0 +1,102 @@
+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 {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/ambient-loop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var GLOW_HANDLES = [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }];
+var wiggle = (seed) => ({
+  kind: "noise",
+  amp: 0,
+  freq: 1.2,
+  octaves: 2,
+  seed,
+  animated: { amp: [{ id: "k1", t: 0, v: 0, out: ease.inOut("sine") }, { id: "k2", t: 3e3, v: 36, out: ease.inOut("sine") }, { id: "k3", t: 6e3, v: 0, out: ease.linear }] }
+});
+var ambient_loop_default = defineTemplate({
+  id: "motion-ambient-loop",
+  meta: {
+    name: "Ambient loop",
+    description: "A six-second background that loops without a seam, made with behaviours: orbiting glows, a breathing title on a custom curve, a radar ping, a scrolling stripe band and a wiggle that swells and settles \u2014 1080\xD71080 at 30 fps",
+    category: "animation",
+    tags: ["animation", "loop", "background", "behaviours", "ambient"],
+    platforms: ["instagram"],
+    formats: ["post", "video"],
+    useCases: [],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  build() {
+    const k = new Kit("Ambient loop", preset("ig-post"));
+    k.brand({ primary: "#10131F", accent: "#FF7A59", paper: "#F4EFE6", muted: "#8A90A6", glow: "#6C63FF", onAccent: "#10131F", onPrimary: "#F4EFE6" });
+    k.textStyle("Kicker 30", { size: 30, fontWeight: 600, lineHeight: 38, letterSpacing: 6 });
+    k.textStyle("Title 120", { size: 120, fontWeight: 800, lineHeight: 124, letterSpacing: -4 });
+    k.textStyle("Pill 28", { size: 28, fontWeight: 700, lineHeight: 34 });
+    const glow = (role) => [k.gradient({ from: role, to: role, kind: "RADIAL", toOpacity: 0, handles: GLOW_HANDLES })];
+    k.component("Orb", { width: 520, height: 520, radius: 999 }, (id) => {
+      const g = k.ellipse(id, 520, glow("glow"), { name: "Glow" });
+      k.patch(g, { layoutSizingHorizontal: "FILL", layoutSizingVertical: "FILL" });
+    });
+    k.component("Pill", { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "accent", radius: 999, padding: { top: 14, right: 30, bottom: 14, left: 30 }, props: { Label: "Now playing" } }, (id) => {
+      k.propText(id, "Label", { style: "Pill 28", color: "onAccent", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 28, { top: 96, right: 72, bottom: 96, left: 72 }, "primary", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    const glowLayer = k.named(k.componentIdOf("Orb"), "Glow")[0];
+    const orb = (name, role, at, scale, opacity) => {
+      const id = k.instance(sheet, "Orb", {}, { name, absolute: at });
+      k.patch(id, { opacity, scaleX: scale, scaleY: scale, overrides: { [glowLayer]: { fills: glow(role) } } });
+      return id;
+    };
+    const warm = orb("Orb warm", "accent", { x: -120, y: -80 }, 1.0769230769230769, 0.75);
+    k.behave(warm, "x", [{ kind: "sine", amp: 70, freq: 1 / 6, phase: 0.25 }]);
+    k.behave(warm, "y", [{ kind: "sine", amp: 50, freq: 1 / 6 }]);
+    k.behave(warm, "rotation", [{ kind: "spin", rate: 60 }]);
+    const cool = orb("Orb cool", "glow", { x: 560, y: 520 }, 1.1923076923076923, 0.75);
+    k.behave(cool, "x", [{ kind: "sine", amp: 90, freq: 1 / 3, phase: 0.5 }]);
+    for (const axis of ["scaleX", "scaleY"]) k.behave(cool, axis, [{ kind: "sine", amp: 0.08, freq: 1 / 3 }]);
+    const soft = orb("Orb soft", "paper", { x: 700, y: -40 }, 0.6923076923076923, 0.35);
+    k.behave(soft, "x", [wiggle(7)]);
+    k.behave(soft, "y", [wiggle(11)]);
+    const stripes = k.stack(sheet, { direction: "HORIZONTAL", width: 1200, gap: 40, clip: true, absolute: { x: -80, y: 980 }, name: "Stripes" });
+    for (let i = 0; i < 16; i++) k.rect(stripes, 40, 8, "muted", { radius: 4, opacity: 0.5, name: "Stripe" });
+    k.behave(stripes, "translateX", [{ kind: "spin", rate: -80 }, { kind: "mod", period: 80, offset: -80 }]);
+    const ping = k.stack(sheet, { width: 300, height: 300, radius: 999, clip: true, stroke: { color: "accent", width: 3 }, absolute: { x: 390, y: 400 }, name: "Ping" });
+    for (const axis of ["scaleX", "scaleY"]) {
+      k.animate(ping, axis, [{ t: 0, v: 0.6, ease: ease.out("cubic") }, { t: 2e3, v: 1.5 }]);
+      k.behave(ping, axis, [{ kind: "loop", mode: "cycle" }]);
+    }
+    k.animate(ping, "opacity", [{ t: 0, v: 0.9, ease: ease.out("quad") }, { t: 2e3, v: 0 }]);
+    k.behave(ping, "opacity", [{ kind: "loop", mode: "cycle" }]);
+    k.text(sheet, "LATE NIGHT RADIO", { style: "Kicker 30", color: "muted", align: "CENTER", name: "Kicker" });
+    const title = k.text(sheet, "Stay a while", { style: "Title 120", color: "onPrimary", width: 860, align: "CENTER", name: "Title" });
+    for (const axis of ["scaleX", "scaleY"]) {
+      k.animate(title, axis, [{ t: 0, v: 1, ease: ease.bezier(0.45, 0, 0.2, 1) }, { t: 1500, v: 1.04 }]);
+      k.behave(title, axis, [{ kind: "loop", mode: "pingpong" }]);
+    }
+    const pill = k.instance(sheet, "Pill", { Label: "Now playing" }, { name: "Now playing" });
+    k.behave(pill, "translateY", [{ kind: "bounce", amp: -28, freq: 2.5, decay: 0.45, start: 200 }]);
+    return k.finish();
+  }
+});
+
+export {
+  ambient_loop_default
+};

package/dist/chunks/chunk-WNTKCDJF.js

@@ -0,0 +1,174 @@
+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 {
+  E,
+  around,
+  heart,
+  lottieTemplate,
+  roundRect
+} from "./chunk-ZXLRLH5A.js";
+import {
+  init_morph,
+  pathsExtent
+} from "./chunk-POXV7LS3.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/techniques.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_morph();
+var INK = { accent: "#7C5CFF", soft: "#EDE7FF", track: "#E4E1F0", pop: "#FF5C8A", mint: "#35E0B0", white: "#FFFFFF" };
+var technique = (spec) => ({ ...lottieTemplate(spec), stableNumbers: true });
+var trimLineDraw = technique({
+  slug: "line-draw",
+  sector: "techniques",
+  role: "success",
+  size: "icon",
+  duration: 2400,
+  loop: true,
+  name: "Line draw",
+  description: "Trim paths: a ring draws itself around a soft disc, the check inside follows, both hold, then wipe away from their starts \u2014 a 2.4-second seamless loop, 512\xD7512",
+  colors: INK,
+  useCases: ["onboarding"],
+  tags: ["trim paths", "line draw", "check", "stroke"],
+  build(l) {
+    l.circle(l.sheet, 256, 256, 150, "soft", { name: "Disc" });
+    const ring = l.ring(l.sheet, 256, 256, 150, "accent", 22, { name: "Ring" });
+    l.keys(ring, "trim.end", [[0, 0, E.hold], [150, 0, E.out], [900, 1, E.hold], [2400, 1]]);
+    l.keys(ring, "trim.start", [[0, 0, E.hold], [1650, 0, E.in], [2250, 1, E.hold], [2400, 1]]);
+    const check = l.line(l.sheet, [[186, 262], [236, 312], [330, 210]], "accent", 26, { name: "Check" });
+    l.keys(check, "trim.end", [[0, 0, E.hold], [650, 0, E.out], [1150, 1, E.hold], [2400, 1]]);
+    l.keys(check, "trim.start", [[0, 0, E.hold], [1700, 0, E.in], [2150, 1, E.hold], [2400, 1]]);
+  }
+});
+var trimSpinner = technique({
+  slug: "trim-spinner",
+  sector: "techniques",
+  role: "loader",
+  size: "icon",
+  duration: 1600,
+  loop: true,
+  name: "Trim spinner",
+  description: "Trim paths: an arc grows to most of a ring and shrinks back while its trim offset carries it round, the way a native spinner moves \u2014 a 1.6-second seamless loop, 512\xD7512",
+  colors: INK,
+  tags: ["trim paths", "spinner", "loading", "progress"],
+  build(l) {
+    l.ring(l.sheet, 256, 256, 140, "track", 26, { name: "Track" });
+    const arc = l.ring(l.sheet, 256, 256, 140, "accent", 26, { name: "Arc" });
+    l.k.patch(arc, { trim: { start: 0, end: 0.7, offset: 220 } });
+    l.keys(arc, "trim.end", [[0, 0.02, E.inOut], [800, 0.8, E.hold], [1600, 0.8]]);
+    l.keys(arc, "trim.start", [[0, 0, E.hold], [800, 0, E.inOut], [1600, 0.78]]);
+    l.keys(arc, "trim.offset", [[0, 0, E.linear], [1600, 360 + 360 * (1 - 0.78)]]);
+  }
+});
+var BOX = 320;
+var C = BOX / 2;
+function circle(r) {
+  const k = 0.5523 * r;
+  return [
+    { x: C, y: C - r, handleIn: { x: C - k, y: C - r }, handleOut: { x: C + k, y: C - r } },
+    { x: C + r, y: C, handleIn: { x: C + r, y: C - k }, handleOut: { x: C + r, y: C + k } },
+    { x: C, y: C + r, handleIn: { x: C + k, y: C + r }, handleOut: { x: C - k, y: C + r } },
+    { x: C - r, y: C, handleIn: { x: C - r, y: C + k }, handleOut: { x: C - r, y: C - k } }
+  ];
+}
+var outline = (points) => [{ closed: true, points }];
+var shapeMorph = technique({
+  slug: "shape-morph",
+  sector: "techniques",
+  role: "icon",
+  size: "icon",
+  duration: 4e3,
+  loop: true,
+  name: "Shape morph",
+  description: "Shape morphing: one outline flows from a circle to a five-point star, a heart and a rounded square and back, each with a different number of points \u2014 a 4-second seamless loop, 512\xD7512",
+  colors: INK,
+  tags: ["shape morph", "morph", "path animation", "shapes"],
+  build(l) {
+    const shapes = [
+      outline(circle(140)),
+      outline(around(C, C, 150, 5, 0, 64).map(([x, y]) => ({ x, y }))),
+      outline(heart(C, 40, 280)),
+      outline(roundRect(24, 24, BOX - 48, BOX - 48, 56))
+    ];
+    const box = pathsExtent(shapes[0]);
+    const id = l.k.vector(l.sheet, box.width, box.height, shapes[0], "accent", { name: "Morph", absolute: { x: (512 - BOX) / 2, y: (512 - BOX) / 2 } });
+    const keys = shapes.flatMap((v, i) => [{ t: i * 1e3, v, ease: E.hold }, { t: i * 1e3 + (i === shapes.length - 1 ? 500 : 600), v, ease: E.inOut }]);
+    l.k.animate(id, "paths", [...keys, { t: 3900, v: shapes[0], ease: E.hold }, { t: 4e3, v: shapes[0] }]);
+  }
+});
+var likeButton = technique({
+  slug: "like-button",
+  sector: "techniques",
+  role: "micro-interaction",
+  size: "icon",
+  duration: 3e3,
+  loop: false,
+  name: "Like button",
+  description: "A state machine: the heart breathes while idle, grows when the pointer is over it, fills with a burst when clicked and empties when clicked again \u2014 export a .lottie to carry the machine, 512\xD7512",
+  colors: INK,
+  tags: ["state machine", "interactive", "like", "heart", "button"],
+  build(l) {
+    const button = l.circle(l.sheet, 256, 256, 170, "soft", { name: "Button" });
+    l.pivot(button, 0.5, 0.5);
+    l.scale(button, [[0, 1, E.inOut], [500, 1.03, E.inOut], [1e3, 1, E.out], [1600, 1.08, E.inOut], [1800, 0.94, E.pop], [2200, 1, E.hold], [2400, 1, E.inOut], [3e3, 1]]);
+    const outlineId = l.vector(l.sheet, [{ pts: heart(256, 150, 220), closed: true }], [], { name: "Heart outline", stroke: { color: "accent", width: 16 } });
+    l.pivot(outlineId, 0.5, 0.5);
+    l.scale(outlineId, [[0, 1, E.inOut], [500, 1.04, E.inOut], [1e3, 1, E.out], [1600, 1.1, E.inOut], [1800, 1, E.hold], [3e3, 1]]);
+    const fill = l.shape(l.sheet, heart(256, 150, 220), "pop", { name: "Heart fill" });
+    l.pivot(fill, 0.5, 0.5);
+    l.scale(fill, [[0, 0, E.hold], [1600, 0, E.pop], [1950, 1.15, E.inOut], [2150, 1, E.hold], [2400, 1, E.in], [2800, 0, E.hold], [3e3, 0]]);
+    for (const [i, [x, y]] of around(256, 256, 1, 8).entries()) {
+      const dot = l.circle(l.sheet, 256, 256, 12, i % 2 ? "mint" : "pop", { name: "Burst", opacity: 0 });
+      l.keys(dot, "translateX", [[0, 0, E.hold], [1650, 0, E.out], [2150, (x - 256) * 200, E.hold], [3e3, (x - 256) * 200]]);
+      l.keys(dot, "translateY", [[0, 0, E.hold], [1650, 0, E.out], [2150, (y - 256) * 200, E.hold], [3e3, (y - 256) * 200]]);
+      l.opacity(dot, [[0, 0, E.hold], [1650, 0, E.out], [1750, 1, E.in], [2150, 0, E.hold], [3e3, 0]]);
+    }
+    const tl = l.k.node(l.sheet).timeline;
+    l.k.patch(l.sheet, { timeline: { ...tl, markers: [{ id: "m1", t: 1e3, label: "Hover" }, { id: "m2", t: 1600, label: "Like" }, { id: "m3", t: 2400, label: "Unlike" }] } });
+    const machine = {
+      id: "sm1",
+      name: "Like button",
+      initial: "s1",
+      states: {
+        s1: { id: "s1", name: "Idle", to: "m1", loop: true, x: 40, y: 60 },
+        s2: { id: "s2", name: "Hover", from: "m1", x: 240, y: 60 },
+        s3: { id: "s3", name: "Like", from: "m2", x: 240, y: 220 },
+        s4: { id: "s4", name: "Unlike", from: "m3", x: 40, y: 220 }
+      },
+      inputs: {
+        i1: { id: "i1", name: "hovered", type: "boolean", value: false },
+        i2: { id: "i2", name: "liked", type: "boolean", value: false },
+        i3: { id: "i3", name: "finished", type: "event" }
+      },
+      transitions: {
+        t1: { id: "t1", from: "s1", to: "s2", guards: [{ input: "i1", value: true }] },
+        t2: { id: "t2", from: "s2", to: "s1", guards: [{ input: "i1", value: false }] },
+        t3: { id: "t3", from: "*", to: "s3", guards: [{ input: "i2", value: true }] },
+        t4: { id: "t4", from: "s3", to: "s4", guards: [{ input: "i2", value: false }] },
+        t5: { id: "t5", from: "s4", to: "s1", guards: [{ input: "i3" }] }
+      },
+      listeners: {
+        l1: { id: "l1", type: "pointerEnter", actions: [{ type: "set", input: "i1", value: true }] },
+        l2: { id: "l2", type: "pointerExit", actions: [{ type: "set", input: "i1", value: false }] },
+        l3: { id: "l3", type: "click", layer: button, actions: [{ type: "toggle", input: "i2" }] },
+        l4: { id: "l4", type: "complete", actions: [{ type: "fire", input: "i3" }] }
+      }
+    };
+    l.k.patch(l.sheet, { stateMachine: machine });
+  }
+});
+var TECHNIQUES_PACK = [trimLineDraw, trimSpinner, shapeMorph, likeButton];
+
+export {
+  trimLineDraw,
+  trimSpinner,
+  shapeMorph,
+  likeButton,
+  TECHNIQUES_PACK
+};

package/dist/chunks/chunk-WQ4QBUIX.js

@@ -0,0 +1,42 @@
+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 {
+  saas_screen_demo_default
+} from "./chunk-C6ZEZXKS.js";
+import {
+  saas_testimonial_default
+} from "./chunk-TEYJBXTO.js";
+import {
+  saas_vs_comparison_default
+} from "./chunk-XNHQMKHP.js";
+import {
+  saas_ai_prompt_default
+} from "./chunk-ACTNHKOC.js";
+import {
+  saas_before_after_default
+} from "./chunk-NBRDSCXS.js";
+import {
+  saas_changelog_drop_default
+} from "./chunk-NA3X3BNK.js";
+import {
+  saas_hook_features_default
+} from "./chunk-Q67L2B7C.js";
+import {
+  saas_mrr_milestone_default
+} from "./chunk-DO3MEP2E.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/saas/video.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [saas_screen_demo_default, saas_hook_features_default, saas_before_after_default, saas_ai_prompt_default, saas_mrr_milestone_default, saas_changelog_drop_default, saas_vs_comparison_default, saas_testimonial_default];
+var video_default = pack;
+
+export {
+  video_default
+};

package/dist/chunks/chunk-WQQY6YDV.js

@@ -0,0 +1,197 @@
+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 {
+  bassKick,
+  beatFlash,
+  circularSpectrum,
+  pulseRing,
+  spectrumBars,
+  vuMeter,
+  waveform
+} from "./chunk-OLPNNPPZ.js";
+import {
+  showcase,
+  showcaseStyles,
+  specimenRow
+} from "./chunk-JZ4SIJCP.js";
+import {
+  trackInfo
+} from "./chunk-SQCPEGOZ.js";
+import {
+  MUSIC_HASH
+} from "./chunk-AXTNNHMG.js";
+import {
+  defineLibrary
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/libraries/audio-reactive.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FPS = 30;
+var LOOP = { duration: 4e3, fps: FPS };
+var loopProp = { Loop: { motion: "loop", value: "loop" } };
+var audio_reactive_default = defineLibrary({
+  id: "lib-audio-reactive",
+  version: 1,
+  meta: {
+    name: "Audio reactive",
+    description: "Motion components that follow the music: waveforms, a spectrum equalizer, a circular spectrum, a pulse ring, a VU meter, a beat flash, a bass-kick badge and a podcast audiogram (1:1 and 9:16), with colour and text inputs",
+    tags: ["animation", "audio", "music", "audio reactive", "visualizer", "waveform", "spectrum", "equalizer", "audiogram", "podcast", "components"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  build() {
+    const k = new Kit("Audio reactive", preset("web-desktop"));
+    k.brand({
+      paper: "#0E0B1A",
+      text: "#F6F3FF",
+      onPaper: "#B9B2D6",
+      card: "#1A1530",
+      accent: "#FF4FA3",
+      onAccent: "#1A0612",
+      cyan: "#3EE6FF",
+      meterLow: "#3DDC84",
+      meterMid: "#FFC247",
+      meterHigh: "#FF5A5F",
+      ring: "#3EE6FF",
+      cover: "#2B2350"
+    }, { show: "Signal & Noise", episode: "Ep. 12 \xB7 Designing for sound" });
+    showcaseStyles(k);
+    k.textStyle("Label 18", { size: 18, fontWeight: 800, lineHeight: 22, letterSpacing: 1, textCase: "UPPER" });
+    k.textStyle("Gram title 64", { size: 64, fontWeight: 800, lineHeight: 70, letterSpacing: -1.5 });
+    k.textStyle("Gram show 32", { size: 32, fontWeight: 600, lineHeight: 40 });
+    k.variantSet("Waveform", "Style", ["Bars", "Mirrored", "Line"], {
+      width: 480,
+      height: 120,
+      description: "The last two and a half seconds of the sound, flowing right to left: bars from the bottom, mirrored from the middle, or a line of dots. Colour sets it.",
+      props: { Colour: { color: "accent" }, ...loopProp }
+    }, (state, id) => {
+      waveform(k, id, { style: state === "Bars" ? "bars" : state === "Mirrored" ? "mirrored" : "line", width: 480, height: 120, color: "accent", colorProp: "Colour" });
+    }, () => ({ timeline: LOOP }));
+    k.component("Spectrum bars", {
+      width: 480,
+      height: 160,
+      timeline: LOOP,
+      description: "An equalizer: 32 bands of the spectrum, low on the left, rising fast and falling slowly. Colour sets it.",
+      props: { Colour: { color: "cyan" }, ...loopProp }
+    }, (id) => {
+      spectrumBars(k, id, { width: 480, height: 160, color: "cyan", colorProp: "Colour" });
+    });
+    k.component("Circular spectrum", {
+      width: 360,
+      height: 360,
+      timeline: LOOP,
+      description: "Bars standing round a ring, the bass at the bottom and the treble at the top, mirrored side to side. Colour sets the bars.",
+      props: { Colour: { color: "accent" }, ...loopProp }
+    }, (id) => {
+      const disc = k.ellipse(id, 200, "card", { name: "Disc", absolute: { x: 80, y: 80 } });
+      bassKick(k, disc, 0.06);
+      circularSpectrum(k, id, { radius: 110, length: 70, color: "accent", colorProp: "Colour", count: 56 });
+    });
+    k.component("Pulse ring", {
+      width: 240,
+      height: 240,
+      timeline: LOOP,
+      description: "A ring that swells with the bass, and an echo that flies out and fades on every beat. Colour sets both.",
+      props: { Colour: { color: "ring" }, ...loopProp }
+    }, (id) => {
+      pulseRing(k, id, { size: 240, color: "ring", colorProp: "Colour" });
+    });
+    k.component("VU meter", {
+      width: 360,
+      height: 28,
+      timeline: LOOP,
+      description: "Sixteen segments lit by the level with a quick rise and a slow fall: green, then amber, then red at the top.",
+      props: loopProp
+    }, (id) => {
+      vuMeter(k, id, { width: 360, height: 28, colors: ["meterLow", "meterMid", "meterHigh"] });
+    });
+    k.component("Beat flash", {
+      width: 320,
+      height: 180,
+      timeline: LOOP,
+      description: "A panel that flashes on every beat and dies away: put it over a scene, sized to fill. Colour sets the flash.",
+      props: { Colour: { color: "text" }, ...loopProp }
+    }, (id) => {
+      const flash = k.rect(id, 320, 180, "text", { radius: 12, name: "Flash", absolute: { x: 0, y: 0 } });
+      k.bindPath(flash, "fills[#0].color", "Colour");
+      beatFlash(k, flash, 0.9);
+    });
+    k.component("Bass kick", {
+      direction: "HORIZONTAL",
+      width: 180,
+      height: 180,
+      justify: "CENTER",
+      align: "CENTER",
+      timeline: LOOP,
+      description: "A badge that thumps with the kick. Label and Colour are inputs.",
+      props: { Label: "LIVE", Colour: { color: "accent" }, ...loopProp }
+    }, (id) => {
+      const badge = k.stack(id, { direction: "HORIZONTAL", width: 140, height: 140, justify: "CENTER", align: "CENTER", fill: "accent", radius: 70, name: "Badge" });
+      k.bindPath(badge, "fills[#0].color", "Colour");
+      k.propText(badge, "Label", { style: "Label 18", color: "onAccent", autoWidth: true });
+      bassKick(k, badge, 0.16);
+      k.animate(badge, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 300, v: 1 }]);
+    });
+    k.variantSet("Audiogram", "Format", ["Square", "Story"], {
+      description: "A podcast audiogram: the cover art, the show and episode, and a live waveform of the voice. Square (1:1) for feeds, Story (9:16) for vertical video. Title and Show are inputs; drop your art on the cover.",
+      props: { Title: "{{brand.episode}}", Show: "{{brand.show}}", ...loopProp }
+    }, (state, id) => {
+      const square = state === "Square";
+      const W = 540;
+      k.patch(id, { layoutMode: "VERTICAL", primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", itemSpacing: square ? 20 : 36 });
+      const cover = k.photo(id, square ? 240 : 380, square ? 240 : 380, { radius: 24, ground: "cover", name: "Cover art" });
+      bassKick(k, cover, 0.03, 200);
+      k.propText(id, "Show", { style: "Gram show 32", color: "onPaper", width: W - 80, align: "CENTER" });
+      k.propText(id, "Title", { style: "Gram title 64", color: "text", width: W - 80, align: "CENTER" });
+      waveform(k, id, { style: "mirrored", width: W - 120, height: square ? 90 : 140, color: "accent", count: 40, history: 2e3, gain: 1.1 });
+    }, (state) => ({ width: 540, height: state === "Square" ? 540 : 960, fill: "paper", radius: 24, timeline: LOOP }));
+    const sheet = k.sheet;
+    const song = trackInfo("house");
+    const passes = 2;
+    k.nameSheet(sheet, "Audio reactive");
+    showcase(k, sheet, { title: "Audio reactive", intro: 'Components that follow the music the timeline plays: they read its loudness, its bass, mids and treble, its beats and its spectrum. Drop one on any animated frame with sound and it moves with it. This page plays "Main Stage", a house loop PopCraft made in code (CC0).', duration: Math.round(song.durationMs * passes) });
+    const audio = Array.from({ length: passes }, (_, p) => ({
+      id: `a${p + 1}`,
+      mediaHash: MUSIC_HASH.house,
+      name: `${song.title} (124 BPM, CC0)`,
+      start: p * song.durationMs,
+      in: 0,
+      out: song.durationMs,
+      lane: 0,
+      ...p === passes - 1 ? { fadeOut: 800 } : {}
+    }));
+    k.patch(sheet, { timeline: { ...k.node(sheet).timeline, audio } });
+    const waves = specimenRow(k, sheet, "Waveforms");
+    for (const style of ["Bars", "Mirrored", "Line"]) k.instance(waves, `Waveform/${style}`, {});
+    const spectra = specimenRow(k, sheet, "Spectrum");
+    k.instance(spectra, "Spectrum bars", {});
+    k.instance(spectra, "Circular spectrum", {});
+    k.instance(spectra, "Pulse ring", {});
+    const hits = specimenRow(k, sheet, "Level and beat");
+    k.instance(hits, "VU meter", {});
+    k.instance(hits, "Beat flash", {});
+    k.instance(hits, "Bass kick", { Label: "LIVE" });
+    const grams = specimenRow(k, sheet, "Audiogram", { align: "MIN" });
+    k.instance(grams, "Audiogram/Square", {});
+    k.instance(grams, "Audiogram/Story", {});
+    return k.finish();
+  }
+});
+
+export {
+  audio_reactive_default
+};

package/dist/chunks/chunk-WRSQJNOU.js

@@ -0,0 +1,147 @@
+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 {
+  label
+} from "./chunk-TQKUAF43.js";
+import {
+  E
+} from "./chunk-ZXLRLH5A.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/game/platformer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TAIL = 100;
+var Plan = class {
+  constructor(defs) {
+    this.list = [];
+    let at = 0;
+    for (const [name, len, loop] of defs) {
+      this.list.push({ name, at, len, loop });
+      at += len + (loop ? 0 : TAIL);
+    }
+    this.duration = at;
+  }
+};
+function track(l, plan, id, path, rest, parts) {
+  const out = [];
+  for (const s of plan.list) {
+    const ks = parts[s.name];
+    if (!ks?.length) {
+      out.push([s.at, rest, E.hold]);
+      continue;
+    }
+    if (ks[0][0] > 0) out.push([s.at, ks[0][1], E.hold]);
+    ks.forEach(([t, v, e], i) => {
+      const last = i === ks.length - 1;
+      out.push([s.loop && t >= s.len ? s.at + s.len - 1 : s.at + t, v, last ? E.hold : e]);
+    });
+  }
+  if (out.every((k) => k[1] === rest)) return;
+  l.keys(id, path, out);
+}
+function squash(l, plan, id, x, y) {
+  track(l, plan, id, "scaleX", 1, x);
+  track(l, plan, id, "scaleY", 1, y);
+}
+function flap(len, period, up, down) {
+  const out = [];
+  for (let t = 0, i = 0; t <= len; t += period / 2, i++) out.push([t, i % 2 ? down : up, E.inOut]);
+  return out;
+}
+function cycle(len, n, a, b, ease = E.inOut) {
+  const out = [];
+  for (let i = 0; i <= n * 2; i++) out.push([len * i / (n * 2), i % 2 ? b : a, ease]);
+  return out;
+}
+function machine(k, sheet, plan, spec) {
+  const stateId = new Map(plan.list.map((s, i) => [s.name, `s${i + 1}`]));
+  const inputId = new Map(Object.keys(spec.inputs).map((n, i) => [n, `i${i + 1}`]));
+  const sid = (n) => {
+    if (n === "*") return n;
+    const id = stateId.get(n);
+    if (!id) throw new Error(`no state ${n}`);
+    return id;
+  };
+  const iid = (n) => {
+    const id = inputId.get(n);
+    if (!id) throw new Error(`no input ${n}`);
+    return id;
+  };
+  const act = ([type, input, value]) => ({ type, input: iid(input), ...value !== void 0 ? { value } : {} });
+  const guard = ([input, value, op]) => ({ input: iid(input), ...op ? { op } : {}, ...value !== void 0 ? { value } : {} });
+  const markers = plan.list.slice(1).map((s, i) => ({ id: `m${i + 1}`, t: s.at, label: s.name }));
+  const tl = k.node(sheet).timeline;
+  k.patch(sheet, { timeline: { ...tl, duration: plan.duration, markers } });
+  const sm = {
+    id: "sm1",
+    name: spec.name,
+    initial: "s1",
+    states: Object.fromEntries(plan.list.map((s, i) => {
+      const id = `s${i + 1}`;
+      const [x, y] = spec.graph[s.name] ?? [40 + i * 200, 60];
+      const entry = spec.entry?.[s.name];
+      return [id, { id, name: s.name, ...i > 0 ? { from: `m${i}` } : {}, ...i === 0 && plan.list.length > 1 ? { to: "m1" } : {}, ...s.loop ? { loop: true } : {}, ...entry ? { entry: entry.map(act) } : {}, x, y }];
+    })),
+    inputs: Object.fromEntries(Object.entries(spec.inputs).map(([name, [type, value]], i) => [`i${i + 1}`, { id: `i${i + 1}`, name, type, ...value !== void 0 ? { value } : {} }])),
+    transitions: Object.fromEntries(spec.transitions.map(([from, to, guards], i) => [`t${i + 1}`, { id: `t${i + 1}`, from: sid(from), to: sid(to), ...guards.length ? { guards: guards.map(guard) } : {} }])),
+    listeners: Object.fromEntries(spec.listeners.map(([type, layer, actions, key], i) => [`l${i + 1}`, { id: `l${i + 1}`, type, ...layer ? { layer } : {}, ...key ? { key } : {}, actions: actions.map(act) }]))
+  };
+  k.patch(sheet, { stateMachine: sm });
+}
+var onKeys = (type, keys, actions) => keys.map((key) => [type, void 0, actions, key]);
+var holdKeys = (keys, input) => [...onKeys("keyDown", keys, [["set", input, true]]), ...onKeys("keyUp", keys, [["set", input, false]])];
+var RIGHT = ["ArrowRight", "d"];
+var JUMP = ["ArrowUp", "w", " "];
+function body(k, id, physics) {
+  k.patch(id, { physics });
+  return id;
+}
+var PILL_W = 150;
+var PILL_GAP = 12;
+function statePanel(l, plan, sheet, title, line) {
+  const w = 24 * 2 + plan.list.length * PILL_W + (plan.list.length - 1) * PILL_GAP;
+  const panel = l.box(sheet, 40, 36, w, 160, "State panel", { fill: "night", radius: 24 });
+  label(l.k, panel, title, "Title 28", "white", 24, 18, { name: "Title" });
+  label(l.k, panel, line, "Body 18", "dim", 24, 56, { name: "Caption" });
+  plan.list.forEach((s, i) => {
+    const x = 24 + i * (PILL_W + PILL_GAP);
+    l.k.instance(panel, "State pill", { label: s.name }, { absolute: { x, y: 96 }, name: `${s.name} pill` });
+    const lit = l.box(panel, x - 4, 92, PILL_W + 8, 52, `${s.name} lit`, { radius: 26, stroke: { color: "accent", width: 4 } });
+    track(l, plan, lit, "opacity", 0, { [s.name]: [[0, 1, E.hold], [s.len, 1]] });
+  });
+}
+function hint(l, sheet, text, w = 1100) {
+  const p = l.box(sheet, 40, 944, w, 96, "Hint", { fill: "night", radius: 20 });
+  label(l.k, p, text, "Body 20", "white", 28, 20, { w: w - 56, name: "Hint text" });
+}
+function button(l, parent, x, y, w, h, words, name) {
+  const b = l.box(parent, x, y, w, h, name, { fill: "accent", radius: h / 2, stroke: { color: "night", width: 6 } });
+  label(l.k, b, words, "Button 28", "onAccent", 0, h / 2 - 18, { w, align: "CENTER", name: "Words" });
+  return b;
+}
+
+export {
+  TAIL,
+  Plan,
+  track,
+  squash,
+  flap,
+  cycle,
+  machine,
+  onKeys,
+  holdKeys,
+  RIGHT,
+  JUMP,
+  body,
+  PILL_W,
+  PILL_GAP,
+  statePanel,
+  hint,
+  button
+};