@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-IRK667D3.js

@@ -1,155 +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 {
-  LATCH,
-  backdrop,
-  chip,
-  darkBrand,
-  fitBackdrop,
-  lamp,
-  lockup,
-  storyFlags
-} from "./chunk-HRPEKC4I.js";
-import {
-  chart
-} from "./chunk-Y6DFTJFC.js";
-import {
-  MONO
-} from "./chunk-5OTEBTMU.js";
-import {
-  hz
-} from "./chunk-FUYBBHPV.js";
-import {
-  board,
-  reboard
-} from "./chunk-T3XFQJUI.js";
-import {
-  outro,
-  pill,
-  postVariants
-} from "./chunk-IL2F4BKM.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset
-} from "./chunk-E3A22XSE.js";
-import {
-  ease
-} from "./chunk-6VIYCRKB.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/social/style-dark-milestone.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Dark SaaS milestone post";
-var DURATION = 7e3;
-var CARD = { w: 936, h: 292 };
-var PLOT = { w: CARD.w - 48, h: 150 };
-var MONTHS = [210, 260, 330, 430, 540, 640, 780, 900, 1060, 1250, 1620, 1980];
-var LETTERS = "ONDJFMAMJJAS";
-var CONTENT = ["Top row", "Kicker", "Milestone figure", "Line", "Year card", "Foot"];
-var cues = [
-  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 250 } },
-  { layer: "Kicker", preset: "fade-in", at: 80, params: { duration: 250 } },
-  { layer: "Milestone figure", preset: "rise-in", at: 150, params: { duration: 500 } },
-  { layer: "Year card", preset: "rise-in", at: 500, params: { duration: 500 } },
-  { layer: "Bar", preset: "wipe-in", at: 900, params: { duration: 380, direction: "up" }, stagger: { delay: 90 } },
-  { layer: "Line", preset: "words-in", at: 1700, params: { duration: 380, amount: 45 } },
-  { layer: "Total dot", preset: "pop-in", at: 2500, params: { duration: 300 } },
-  { layer: "Milestone figure", preset: "pulse", at: 2500, params: { duration: 500, amount: 0.03 } },
-  { layer: "Foot", preset: "fade-in", at: 2e3, params: { duration: 300 } },
-  { layer: "Button", preset: "pulse", at: 4400, params: { duration: 500, amount: 0.05 } },
-  { layer: "Total dot", preset: "pulse", at: 5200, params: { duration: 600, amount: 0.4 } },
-  outro(CONTENT, 6200, { gap: 60, duration: 350 })
-];
-var counts = [
-  { layer: "Milestone figure", at: 300, duration: 2200, counter: { from: 0, to: LATCH.rollouts } }
-];
-var style_dark_milestone_default = defineTemplate({
-  id: "motion-saas-style-dark-milestone",
-  meta: {
-    name: NAME,
-    description: "An animated milestone post in the dark precision look: one enormous figure counts up on a ruled near-black ground while a card draws the year behind it, twelve monthly bars wiping up and the running total drawing over them as a line. Seven seconds, looping, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "dark", "dark mode", "milestone", "metric", "counter", "chart", "bar chart", "growth", "build in public", "developer tools", "post", "loop"],
-    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
-    formats: ["post", "portrait-post", "story"],
-    useCases: ["milestone", "stats", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, loop: true },
-  build() {
-    const k = new Kit(NAME, preset("ig-post"));
-    k.quantizeGeometry = true;
-    darkBrand(k, { line: "rollouts shipped, and 312 of them rolled themselves back before anyone was paged." });
-    k.textStyle("Brand 34", { size: 34, fontWeight: 600, letterSpacing: -0.8, lineHeight: 40 });
-    k.textStyle("Kicker 22", { ...MONO, size: 22, fontWeight: 500, letterSpacing: 2, lineHeight: 28 });
-    k.textStyle("Figure 280", { size: 280, fontWeight: 700, letterSpacing: -15, lineHeight: 256, fontFeatures: { tnum: 1 } });
-    k.textStyle("Figure 240", { size: 240, fontWeight: 700, letterSpacing: -13, lineHeight: 222, fontFeatures: { tnum: 1 } });
-    k.textStyle("Line 36", { size: 36, fontWeight: 400, letterSpacing: -0.6, lineHeight: 48 });
-    k.textStyle("Card 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 28 });
-    k.textStyle("Axis 18", { ...MONO, size: 18, fontWeight: 500, lineHeight: 22, textAlign: "CENTER" });
-    k.textStyle("Button 26", { size: 26, fontWeight: 600, letterSpacing: -0.4, lineHeight: 32 });
-    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 26", label: `Ship yours at ${LATCH.site}`, pad: [14, 24], radius: 10 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 28, 72, "paper", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    backdrop(k, sheet, 1080, 1080);
-    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
-    lockup(k, top, { size: 34, style: "Brand 34", name: "Lockup" });
-    chip(k, top, "MILESTONE \xB7 2 OCT 2026", { name: "Date", ink: "onPaper" });
-    const words = k.stack(sheet, { gap: 18, name: "Words" });
-    const kicker = k.stack(words, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Kicker" });
-    lamp(k, kicker, 14, "primary", { name: "Kicker lamp", breathe: hz(7, DURATION) });
-    k.text(kicker, "TWELVE MONTHS, ONE NUMBER", { style: "Kicker 22", color: "onPaper", name: "Kicker words" });
-    k.text(words, LATCH.rollouts.toLocaleString("en-US"), { style: "Figure 280", color: "text", name: "Milestone figure" });
-    k.text(words, "{{brand.line}}", { style: "Line 36", color: "onPaper", name: "Line" });
-    const stage = board(k, sheet, CARD.w, CARD.h, 1, "Year board");
-    const card = k.stack(stage, { width: CARD.w, height: CARD.h, fill: "card", radius: 16, padding: 24, gap: 14, stroke: { color: "edge", width: 1, align: "INSIDE" }, absolute: { x: 0, y: 0 }, name: "Year card" });
-    const head = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
-    k.text(head, "ROLLOUTS A MONTH", { style: "Card 22", color: "cardMuted", autoWidth: true, name: "Card title" });
-    k.text(head, "OCT 2025 TO SEP 2026", { style: "Card 22", color: "cardMuted", autoWidth: true, name: "Card span" });
-    const max = Math.max(...MONTHS), gap = 10, bw = (PLOT.w - gap * 11) / 12;
-    const plot = k.stack(card, { direction: "HORIZONTAL", width: PLOT.w, height: PLOT.h, gap, align: "MAX", name: "Plot" });
-    MONTHS.forEach((v, i) => k.rect(plot, bw, Math.round(v / max * PLOT.h * 0.9), i === 11 ? "signal" : "edge", { radius: 3, name: "Bar" }));
-    let sum = 0;
-    const totals = MONTHS.map((v) => sum += v);
-    const c = chart(totals, PLOT.w - bw, PLOT.h - 12, sum);
-    const line = k.vector(plot, PLOT.w - bw, PLOT.h - 12, [c.line], [], { name: "Total line", stroke: { color: "onCard", width: 3, join: "ROUND" }, absolute: { x: bw / 2, y: 6 } });
-    const end = c.pts[c.pts.length - 1];
-    k.ellipse(plot, 16, "onCard", { name: "Total dot", absolute: { x: bw / 2 + end.x - 8, y: 6 + end.y - 8 }, stroke: { color: "card", width: 3, align: "OUTSIDE" } });
-    const axis = k.stack(card, { direction: "HORIZONTAL", gap, name: "Axis" });
-    for (const l of LETTERS) k.text(axis, l, { style: "Axis 18", color: "cardMuted", name: "Month" });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
-    k.instance(foot, "Call", { Label: "Ship yours at {{brand.site}}" }, { name: "Button" });
-    k.text(foot, `Thank you, ${LATCH.teams.toLocaleString("en-US")} teams.`, { style: "Card 22", color: "onPaper", autoWidth: true, name: "Thanks" });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    k.animate(line, "trim.end", [{ t: 1e3, v: 0, ease: ease.inOut("cubic") }, { t: 2500, v: 1 }]);
-    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
-      portrait: (kit, id) => fitBackdrop(kit, id),
-      vertical: (kit, id) => {
-        fitBackdrop(kit, id);
-        storyFlags(kit, id);
-        kit.patch(id, { primaryAxisAlignItems: "CENTER", itemSpacing: 56, counterAxisSpacing: 56 });
-        reboard(kit, id, "Year board", 800 / CARD.w);
-        for (const n of kit.named(id, "Milestone figure")) kit.restyle(n, "Figure 240");
-      }
-    }));
-    return k.finish();
-  }
-});
-
-export {
-  style_dark_milestone_default
-};

package/dist/chunks/chunk-IS4LOZD5.js

@@ -1,45 +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 {
-  defineDeck
-} from "./chunk-2XADWY5Y.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/slides/education.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var education_default = defineDeck({
-  id: "slides-education",
-  meta: {
-    name: "Lesson deck",
-    description: "An eight-slide 16:9 science lesson \u2014 objectives, ideas that build one per click, an equation, steps, key numbers, a check question and the homework",
-    category: "presentation",
-    tags: ["education", "lesson", "school", "science", "classroom", "deck", "builds"],
-    platforms: ["slides"],
-    formats: ["slide-deck"],
-    useCases: ["education"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  colors: { primary: "#1B4332", onPrimary: "#FFFFFF", accent: "#B5471B", onAccent: "#FFFFFF", paper: "#F8FAF5", text: "#1B2B22", onPaper: "#4B5A50", tint: "#D8F3DC", onTint: "#1B4332" },
-  fields: { company: "Ashgrove School \xB7 Science", title: "How plants make their food", lead: "Year 7 \xB7 Photosynthesis \xB7 Lesson 3 of 6" },
-  slides: [
-    { kind: "title", name: "Title slide", kicker: "YEAR 7 SCIENCE", title: "{{brand.title}}", lead: "{{brand.lead}}" },
-    { kind: "agenda", name: "Today", heading: "Today you will", items: ["Name the four things a plant needs to make food", "Write the word equation for photosynthesis", "Say where in the leaf it happens", "Get ready to test a leaf for starch"] },
-    { kind: "points", name: "What a plant needs", heading: "What a plant needs", points: ["Light \u2014 from the Sun, or a lamp in the lab", "Water \u2014 drawn up from the roots", "Carbon dioxide \u2014 taken in through tiny holes in the leaf", "Chlorophyll \u2014 the green pigment that captures light"] },
-    { kind: "panels", name: "The equation", heading: "The word equation", filled: true, panels: [{ title: "What goes in", body: "carbon dioxide + water, with energy from light" }, { title: "What comes out", body: "glucose + oxygen" }] },
-    { kind: "steps", name: "Inside the leaf", heading: "Inside the leaf", steps: [{ title: "Stomata", body: "Tiny pores let carbon dioxide in" }, { title: "Veins", body: "Bring water up from the roots" }, { title: "Chloroplasts", body: "Capture light and make glucose" }, { title: "Out", body: "Oxygen leaves through the stomata" }] },
-    { kind: "stats", name: "Numbers", heading: "Numbers to remember", stats: [{ figure: "8 min", label: "for sunlight to travel from the Sun to the leaf" }, { figure: "6", label: "molecules of carbon dioxide for every glucose" }, { figure: "4", label: "things a plant needs to make its food" }] },
-    { kind: "check", name: "Check", kicker: "CHECK", question: "The oxygen a plant gives off: where does it come from?", answer: "From water. The plant splits water molecules and lets the oxygen go." },
-    { kind: "closing", name: "Homework", title: "Homework: label a leaf", line: "Workbook page 42, due Thursday" }
-  ]
-});
-
-export {
-  education_default
-};

package/dist/chunks/chunk-ITBZMHTC.js

@@ -1,110 +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 {
-  onColor,
-  scrim,
-  withSong
-} from "./chunk-VRJLGCYZ.js";
-import {
-  bassKick,
-  beatFlash,
-  circularSpectrum,
-  visualizer
-} from "./chunk-IJN5YEUM.js";
-import {
-  trackInfo
-} from "./chunk-QV6FKRC3.js";
-import {
-  pill
-} from "./chunk-IL2F4BKM.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset
-} from "./chunk-E3A22XSE.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/music/edm-drop.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DEEP = "#0B0620";
-var VIOLET = "#7B2FF7";
-var PINK = "#FF3D9A";
-var CYAN = "#29E6FF";
-var WHITE = "#FFFFFF";
-var DROP_MS = Math.round(4 * 4 * 6e4 / trackInfo("edm").bpm);
-var CUES = [
-  { layer: "Get ready", preset: "fade-in", at: 400, params: { duration: 900 } },
-  { layer: "Get ready", preset: "fade-out", at: DROP_MS - 400, params: { duration: 350 } },
-  { layer: "Cover lockup", preset: "scale-in", at: DROP_MS, params: { duration: 450 } },
-  { layer: "Words", preset: "fade-in", at: DROP_MS, params: { duration: 250 } },
-  { layer: "Song", preset: "pop-in", at: DROP_MS + 120, params: { duration: 450, amount: 0.6 } },
-  { layer: "Artist", preset: "rise-in", at: DROP_MS + 470, params: { duration: 500 } },
-  { layer: "Release pill", preset: "pop-in", at: DROP_MS + 940, params: { duration: 450 } }
-];
-var edm_drop_default = defineTemplate({
-  id: "motion-music-edm-drop",
-  meta: {
-    name: "EDM drop teaser",
-    description: "A 15-second vertical teaser that builds and drops with its track: a zoom-feedback visualizer driven by the bass and beat, then on the drop the title slams in over a circular spectrum and the screen flashes on every kick",
-    category: "animation",
-    tags: ["animation", "music", "music video", "edm", "drop", "visualizer", "audio reactive", "milkdrop", "spectrum", "reel", "tiktok", "teaser"],
-    platforms: ["instagram", "tiktok", "youtube"],
-    formats: ["reel", "short", "story"],
-    useCases: ["launch", "announcement"],
-    created: "2026-09-30",
-    updated: "2026-09-30"
-  },
-  motion: { cues: CUES },
-  build() {
-    const k = new Kit("EDM drop teaser", preset("ig-story"));
-    k.brand(
-      { deep: DEEP, violet: VIOLET, accent: PINK, cyan: CYAN, flash: WHITE, text: WHITE, onAccent: onColor(PINK, [DEEP, "#000000"]), onDeep: onColor(DEEP, [WHITE]) },
-      { song: "Neon Surge", artist: "KAIRO" }
-    );
-    k.textStyle("Ready 88", { size: 88, fontWeight: 900, lineHeight: 96, letterSpacing: 8, textAlign: "CENTER", textCase: "UPPER" });
-    k.textStyle("Song 130", { size: 130, fontWeight: 900, lineHeight: 150, letterSpacing: -5, textAlign: "CENTER", textCase: "UPPER" });
-    k.textStyle("Artist 56", { size: 56, fontWeight: 700, lineHeight: 64, letterSpacing: 14, textAlign: "CENTER", textCase: "UPPER" });
-    k.textStyle("Pill 40", { size: 40, fontWeight: 800, lineHeight: 48, letterSpacing: 2, textCase: "UPPER" });
-    pill(k, "Release pill", { fill: "accent", ink: "onAccent", style: "Pill 40", label: "Out Friday", pad: [18, 48] });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Drop");
-    k.flowSheet(sheet, 0, { top: 0, right: 0, bottom: 0, left: 0 }, "deep");
-    k.patch(sheet, { clipsContent: true });
-    withSong(k, sheet, "edm", 1, 600);
-    visualizer(k, sheet, "zoom-feedback", { bg: "deep", a: "violet", b: "accent", c: "cyan" }, { name: "Zoom feedback" });
-    const ready = k.stack(sheet, { direction: "HORIZONTAL", width: 876, justify: "CENTER", name: "Ready row", absolute: { x: 64, y: 256 } });
-    k.text(scrim(k, ready, "deep", { direction: "HORIZONTAL", width: "HUG", radius: 999, padding: { top: 8, right: 40, bottom: 8, left: 40 }, name: "Get ready" }), "Get ready", { style: "Ready 88", color: "onDeep", autoWidth: true, name: "Get ready text" });
-    const D = 2 * (230 + 120);
-    const lockup = k.stack(sheet, { width: D, height: D, name: "Cover lockup", absolute: { x: (1080 - D) / 2, y: 362 } });
-    circularSpectrum(k, lockup, { radius: 230, length: 120, color: "cyan", count: 64 });
-    const art = k.photo(lockup, 400, 400, { radius: 200, ground: "violet", name: "Cover art", absolute: { x: D / 2 - 200, y: D / 2 - 200 } });
-    bassKick(k, art, 0.07, 130);
-    const words = scrim(k, sheet, "deep", { width: 876, gap: 12, name: "Words", absolute: { x: 64, y: 1060 }, padding: { top: 16, right: 24, bottom: 20, left: 24 } });
-    const song = k.text(words, "{{brand.song}}", { style: "Song 130", color: "onDeep", width: 828, name: "Song" });
-    bassKick(k, song, 0.05, 110);
-    k.text(words, "{{brand.artist}}", { style: "Artist 56", color: "cyan", width: 828, name: "Artist" });
-    const row = k.stack(sheet, { direction: "HORIZONTAL", width: 876, justify: "CENTER", name: "Release row", absolute: { x: 64, y: 1342 } });
-    k.instance(row, "Release pill", {}, { name: "Release pill" });
-    const flashes = k.stack(sheet, { width: 1080, height: 1920, name: "Drop flashes", absolute: { x: 0, y: 0 } });
-    const flash = k.rect(flashes, 1080, 1920, "flash", { name: "Beat flash", absolute: { x: 0, y: 0 } });
-    beatFlash(k, flash, 0.22, 110);
-    k.animate(flashes, "opacity", [{ t: DROP_MS - 1, v: 0 }, { t: DROP_MS, v: 1 }]);
-    k.cues(sheet, CUES);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  DROP_MS,
-  CUES,
-  edm_drop_default
-};

package/dist/chunks/chunk-ITSIHNWZ.js

@@ -1,214 +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 {
-  SALE,
-  chat,
-  drain,
-  lift,
-  liveBadge,
-  liveBrand,
-  nightPill,
-  pinned,
-  placeReactions,
-  reactions,
-  room,
-  slideRoom
-} from "./chunk-5CKIBZLE.js";
-import {
-  MONO
-} from "./chunk-5OTEBTMU.js";
-import {
-  score
-} from "./chunk-S7PL2DU7.js";
-import {
-  feedVariants,
-  pill,
-  verticalPadding
-} from "./chunk-IL2F4BKM.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset,
-  swapTimes
-} from "./chunk-E3A22XSE.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/motion/singles-day-live-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var { beat, duration: DURATION, audio: MUSIC } = score("tension");
-var SELLING = beat(6);
-var SOLD = 26;
-var TICKS = 14;
-var cues = [
-  { layer: "Live", preset: "pop-in", at: 0, params: { duration: 280 } },
-  { layer: "Watching", preset: "fade-in", at: 0, params: { duration: 300 } },
-  { layer: "Banner", preset: "pop-in", at: 0, params: { duration: 320, amount: 0.86 } },
-  { layer: "Deal", preset: "rise-in", at: 60, params: { duration: 420 } },
-  { layer: "Was", preset: "fade-in", at: beat(1) - 120, params: { duration: 120 } },
-  { layer: "Was strike", preset: "wipe-in", at: beat(1), params: { duration: 260 } },
-  { layer: "Off chip", preset: "pop-in", at: beat(3), params: { duration: 320 } },
-  { layer: "Price figure", preset: "pulse", at: beat(3), params: { duration: 480, amount: 0.12 } },
-  { layer: "Caption tape", preset: "pop-in", at: beat(1), params: { duration: 280, amount: 0.9 } },
-  { layer: "Clock", preset: "pulse", at: beat(4), params: { duration: 420, amount: 0.08 } },
-  { layer: "Stock", preset: "pulse", at: SELLING, params: { duration: 420, amount: 0.03 } },
-  { layer: "Paddle", preset: "pulse", at: beat(3), params: { duration: 480, amount: 0.16 } },
-  { layer: "Live", preset: "pulse", at: beat(8), params: { duration: 360, amount: 0.1 } },
-  { layer: "Chat 1", preset: "pop-in", at: beat(8), params: { duration: 300 } },
-  { layer: "Stock", preset: "shake", at: beat(12), params: { duration: 420, distance: 7 } },
-  { layer: "Paddle", preset: "pulse", at: beat(16), params: { duration: 480, amount: 0.16 } },
-  { layer: "Live", preset: "pulse", at: beat(16), params: { duration: 360, amount: 0.1 } },
-  { layer: "Stock", preset: "shake", at: beat(22), params: { duration: 420, distance: 7 } },
-  { layer: "Chat 2", preset: "pop-in", at: beat(11), params: { duration: 300 } },
-  { layer: "Chat 1", preset: "fade-out", at: beat(15), params: { duration: 300 } },
-  { layer: "Chat 3", preset: "pop-in", at: beat(16), params: { duration: 300 } },
-  { layer: "Chat 2", preset: "fade-out", at: beat(19), params: { duration: 300 } },
-  { layer: "Button", preset: "pop-in", at: beat(20), params: { duration: 360 } },
-  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: beat(1), amount: 0.07 } },
-  { layer: "Price figure", preset: "pulse", at: beat(24), params: { duration: beat(1), amount: 0.08 } },
-  { layer: "Button", preset: "pulse", at: beat(28), params: { duration: beat(1), amount: 0.07 } }
-];
-var counts = [
-  { layer: "Watching figure", at: 0, duration: 2400, counter: { from: 1011, to: 1111, suffix: " watching" } },
-  // The price drops over two beats and lands on the third.
-  { layer: "Price figure", at: beat(1), duration: beat(2), counter: { from: SALE.was, to: SALE.now, prefix: "$" } },
-  // The flash clock: a real second off every second.
-  { layer: "Seconds figure", at: beat(4), duration: TICKS * 1e3, tick: 1e3, counter: { from: SALE.seconds, to: SALE.seconds - TICKS } },
-  // The stock: a seat a beat.
-  { layer: "Stock figure", at: SELLING, duration: beat(SOLD), tick: beat(1), counter: { from: SALE.left + SOLD, to: SALE.left, suffix: ` of ${SALE.seats} seats left` } }
-];
-var swaps = [
-  { layer: "Caption", words: ["Singles\u2019 Day, for a team of one.", "Runs your whole back office.", "First month $11, not $29.", "111 seats. 11 hours. No code.", "Treat yourself. Link below."], at: beat(1), hold: 0, stagger: 50, in: 300, out: 240, unit: "word", rise: 26 }
-];
-while (swapTimes(swaps[0]).at(-1).leaves < DURATION) swaps[0].hold += 10;
-var BLEED = 160;
-var ROOM = {
-  w: 1080 + BLEED * 2,
-  h: 1920,
-  u: 1,
-  cx: BLEED + 664,
-  headY: 770,
-  deskY: 1080,
-  hand: "left",
-  laptop: false,
-  bunting: 70,
-  loopMs: DURATION,
-  ring: { x: BLEED + 664, y: 752, r: 216 },
-  balloons: { x: BLEED + 806, y: 500, h: 236 },
-  front: { x: BLEED + 138, y: 1520, h: 268 },
-  floor: [{ x: BLEED + 14, w: 112, h: 130, label: true }, { x: BLEED + 30, w: 84, h: 70, on: 130 }, { x: BLEED + 962, w: 104, h: 170 }, { x: BLEED + 512, w: 56, h: 46, on: 75 }]
-};
-var HEARTS = { w: 150, h: 520, n: 11, u: 1, loopMs: DURATION, from: beat(3) };
-var singles_day_live_reel_default = defineTemplate({
-  id: "motion-singles-day-live-reel",
-  meta: {
-    name: "Singles Day live-shopping sale reel",
-    description: "A 16-second 11.11 flash-sale reel run as a live-shopping stream with the solo founder as its host: a pinned deal whose price is struck and counts from $29 to $11 inside the first second and a half, a flash clock that ticks real seconds, a \u201Cselling fast\u201D bar that runs down a seat a beat, chat bubbles, floating hearts and burned-in captions over music with a ticking build (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
-    category: "animation",
-    tags: ["animation", "singles day", "11.11", "double eleven", "flash sale", "live shopping", "livestream", "countdown", "stock", "solo founder", "saas", "reel", "captions", "music", "audio", "seasonal"],
-    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "ad"],
-    useCases: ["sale", "countdown", "pricing"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit("Singles Day live-shopping sale reel", preset("ig-story"));
-    k.quantizeGeometry = true;
-    liveBrand(k, {}, ["primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
-    k.textStyle("Live 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: 2, lineHeight: 32 });
-    k.textStyle("Watching 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 32, fontFeatures: { tnum: 1 } });
-    k.textStyle("Eyebrow 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 1.6, lineHeight: 28 });
-    k.textStyle("Display 70", { size: 70, fontWeight: 900, letterSpacing: -2.8, lineHeight: 72 });
-    k.textStyle("Display 58", { size: 58, fontWeight: 900, letterSpacing: -2.2, lineHeight: 60 });
-    k.textStyle("Lot 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 1.4, lineHeight: 26 });
-    k.textStyle("Title 30", { size: 30, fontWeight: 800, letterSpacing: -0.6, lineHeight: 36 });
-    k.textStyle("Price 104", { size: 104, fontWeight: 900, letterSpacing: -5, lineHeight: 100, fontFeatures: { tnum: 1 } });
-    k.textStyle("Was 44", { size: 44, fontWeight: 700, letterSpacing: -1.4, lineHeight: 50 });
-    k.textStyle("Chip 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 32 });
-    k.textStyle("Clock 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 46, fontFeatures: { tnum: 1 } });
-    k.textStyle("Unit 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.6, lineHeight: 20 });
-    k.textStyle("Stock 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 0.6, lineHeight: 28, fontFeatures: { tnum: 1 } });
-    k.textStyle("Chat 26", { size: 26, fontWeight: 600, lineHeight: 32 });
-    k.textStyle("Chat who 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 32 });
-    k.textStyle("Caption 36", { size: 36, fontWeight: 800, letterSpacing: -0.6, lineHeight: 44, textAlign: "CENTER" });
-    k.textStyle("Button 34", { size: 34, fontWeight: 800, letterSpacing: -0.4, lineHeight: 42 });
-    pill(k, "Seat button", { fill: "accent", ink: "onAccent", style: "Button 34", label: `Grab a seat \xB7 ${SALE.link}`, pad: [22, 44] });
-    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 26", label: `\u2212${SALE.off}%`, pad: [6, 14], radius: 10 });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Live reel");
-    k.flowSheet(sheet, 16, verticalPadding(), "primary", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC });
-    room(k, sheet, ROOM, { x: -BLEED, y: 0 });
-    reactions(k, sheet, { ...HEARTS, absolute: { x: 916, y: 420 } });
-    const top = k.stack(sheet, { gap: 16, name: "Top" });
-    const bar = k.stack(top, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Stream bar" });
-    liveBadge(k, bar, { style: "Live 26", loopMs: DURATION });
-    nightPill(k, bar, "1,111 watching", { style: "Watching 24", name: "Watching" });
-    const banner = k.stack(top, { fill: "night", radius: 28, gap: 8, padding: { top: 24, right: 30, bottom: 28, left: 30 }, effects: lift(k, 1, 0.45), name: "Banner" });
-    k.text(banner, "SINGLES\u2019 DAY \xB7 11.11 \xB7 {{brand.name}} LIVE", { style: "Eyebrow 22", color: "nightMuted", name: "Eyebrow" });
-    k.text(banner, "Party of one? $11.", { style: "Display 70", color: "nightInk", name: "Headline" });
-    const foot = k.stack(sheet, { gap: 14, align: "CENTER", name: "Foot" });
-    const talk = k.stack(foot, { gap: 12, name: "Chat" });
-    chat(k, talk, "lena", "no team? sold.", { style: "Chat 26", whoStyle: "Chat who 22", face: "heart", name: "Chat 1" });
-    chat(k, talk, "raj", "seat 73. bye, excel", { style: "Chat 26", whoStyle: "Chat who 22", face: "kraft", name: "Chat 2" });
-    chat(k, talk, "", "Seat 74 of 111 just went", { style: "Chat 26", whoStyle: "Chat who 22", face: "primary", system: true, name: "Chat 3" });
-    pinned(k, foot, {
-      lot: "PINNED \xB7 LOT 01 \xB7 FLASH DEAL",
-      title: "{{brand.name}} Solo, first month",
-      price: `$${SALE.now}`,
-      was: `$${SALE.was}`,
-      chip: "Chip",
-      saving: `\u2212${SALE.off}%`,
-      left: SALE.left,
-      total: SALE.seats,
-      suffix: ` of ${SALE.seats} seats left`,
-      seconds: SALE.seconds - TICKS,
-      styles: { lot: "Lot 20", title: "Title 30", price: "Price 104", was: "Was 44", stock: "Stock 22", clock: "Clock 44", unit: "Unit 16" },
-      pad: { top: 24, right: 28, bottom: 26, left: 28 },
-      gap: 14,
-      radius: 32,
-      bar: 22
-    });
-    const tape = k.stack(foot, { fill: "night", radius: 16, padding: { top: 14, right: 24, bottom: 14, left: 24 }, name: "Caption tape" });
-    k.text(tape, swaps[0].words[0], { style: "Caption 36", color: "nightInk", name: "Caption" });
-    k.instance(foot, "Seat button", { Label: `Grab a seat \xB7 ${SALE.link}` }, { name: "Button" });
-    drain(k, sheet, { from: (SALE.left + SOLD) / SALE.seats, to: SALE.left / SALE.seats, at: SELLING, duration: beat(SOLD) });
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    k.variants(sheet, feedVariants({ post: 48, portrait: 72 }, {
-      // The square has no room for the paddle or the whole chat: the host slides right and looks out beside the title
-      // bar, and only the seat that just went is called out over the deal.
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 10, counterAxisSpacing: 10 });
-        slideRoom(kit, id, 0, -450);
-        for (const name of ["Chat 1", "Reactions", "Desk numerals", "Paddle", "Founder sleeve", "Founder cuff", "Founder hand"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
-        for (const n of kit.named(id, "Top")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 590 });
-        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 58");
-        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 10 });
-      },
-      portrait: (kit, id) => {
-        slideRoom(kit, id, -BLEED, -190);
-        placeReactions(kit, id, 920, 230);
-        for (const n of kit.named(id, "Desk numerals")) kit.patch(n, { visible: false });
-      }
-    }));
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  singles_day_live_reel_default
-};