@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-F4X5MJ7O.js

@@ -0,0 +1,204 @@
+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,
+  SPIKE,
+  WINDOW,
+  backdrop,
+  darkBrand,
+  fitBackdrop,
+  flagRows,
+  flagWindow,
+  lift,
+  notice
+} from "./chunk-M2BHMDSB.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  seenAt,
+  wideCut
+} from "./chunk-UA7OECXL.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-F3TA2VS2.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  score
+} from "./chunk-42LEBOKV.js";
+import {
+  hide,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  COUNTER_PATH
+} from "./chunk-QZWEMMEL.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/style-dark-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("tension");
+var { beat } = S;
+var NAME = "Dark SaaS feature demo short";
+var STEP = [4, 10, 16, 24];
+var CROSS = beat(20);
+var BACK = 2e3;
+var W = WINDOW;
+var REST = { x: 716, y: 394 };
+var TARGETS = [{ x: 690, y: 528 }, { x: 468, y: 268 }];
+var SHOTS = [
+  { t: beat(STEP[0]), zoom: 1.75, x: 560, y: 480 },
+  { t: beat(STEP[1]), zoom: 1.5, x: 400, y: 200 },
+  { t: beat(STEP[2]), duration: 600, zoom: 1.28, x: 480, y: 330 },
+  { t: beat(STEP[3]), duration: 600, zoom: 1 }
+];
+var cues = [
+  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 380, amount: 60 } },
+  { layer: "Stage", preset: "rise-in", at: 100, params: { duration: 500 } },
+  { layer: "Progress", preset: "fade-in", at: beat(2), params: { duration: 300 } },
+  ...STEP.slice(0, 3).map((b, i) => ({ layer: `Progress fill ${i + 1}`, preset: "wipe-in", at: beat(b), params: { duration: beat(STEP[i + 1] - b), ease: ease.linear } })),
+  // One: the guardrail goes on, and its line draws across the chart.
+  { layer: "Guardrail", preset: "pop-in", at: beat(STEP[0] + 2), params: { duration: 300 } },
+  { layer: "Threshold", preset: "wipe-in", at: beat(STEP[0] + 2), params: { duration: 900 } },
+  // Two: half the traffic.
+  { layer: "Step fill", preset: "wipe-in", at: beat(STEP[1] + 2), params: { duration: 500 }, stagger: { delay: 350 } },
+  // Three: the rate crosses the line.
+  { layer: "Stage", preset: "shake", at: CROSS, params: { duration: 400, distance: 10 } },
+  { layer: "Notice", preset: "drop-in", at: CROSS, params: { duration: 320 } },
+  { layer: "Error area", preset: "fade-in", at: CROSS + BACK, params: { duration: 500 } },
+  { layer: "Error dot", preset: "pop-in", at: CROSS + BACK + 300, params: { duration: 300 } },
+  { layer: "Call", preset: "fade-in", at: beat(2), params: { duration: 300 } },
+  { layer: "Call", preset: "pulse", at: beat(26), params: { duration: 500, amount: 0.06 } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 500, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: beat(31), params: { duration: 400, amount: 0.05 } }
+];
+var counts = [
+  // Each rests at how the story ends: nothing rolled out, the rate back where it was.
+  { layer: "Percent figure", at: beat(STEP[1] + 2), duration: beat(3), counter: { from: 0, to: 50, suffix: "%", value: 0 } },
+  { layer: "Error figure", at: beat(STEP[2] + 1), duration: beat(3), ease: ease.named("cubic", "in"), counter: { from: 0.02, to: 1.4, decimals: 2, suffix: "%", value: 0.02 } },
+  { layer: "Notice figure", at: CROSS, duration: BACK, tick: 500, counter: { from: 0, to: 4, prefix: "Rolled back in ", suffix: " s" } }
+];
+var swaps = [captionSwap(["Set a line for errors.", "Send half your traffic over.", "Errors spike. It pulls back.", "Nobody paged. Fix it Monday."], 0, S.duration - 30, { stagger: 55, in: 260, out: 200, rise: 26 })];
+var style_dark_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-dark-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 16-second feature demo in the dark precision look: a pointer works a product window step by step while a camera zooms to each click. A guardrail line draws across a chart, a rollout counts to 50%, the error rate spikes over the line and the product rolls itself back, with a step bar and burned-in captions. Music, 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "dark", "dark mode", "demo", "feature", "screen recording", "zoom", "cursor", "counter", "chart", "developer tools", "feature flags", "captions", "music", "audio", "reel", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    darkBrand(k, { hook: "Rolled back before the pager rang." });
+    k.textStyle("Hook 88", { size: 88, fontWeight: 700, letterSpacing: -4.2, lineHeight: 84 });
+    k.textStyle("Hook 64", { size: 64, fontWeight: 700, letterSpacing: -2.8, lineHeight: 64 });
+    k.textStyle("Brand 30", { size: 30, fontWeight: 600, letterSpacing: -0.6, lineHeight: 36 });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 600, letterSpacing: -0.8, lineHeight: 46 });
+    k.textStyle("Button 30", { size: 30, fontWeight: 600, letterSpacing: -0.5, lineHeight: 38 });
+    k.textStyle("Notice 20", { size: 20, fontWeight: 600, letterSpacing: -0.2, lineHeight: 26, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `Try the guardrail at ${LATCH.site}`, pad: [20, 34], radius: 10 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 22 });
+    backdrop(k, sheet, 1080, 1920);
+    flagRows(k, sheet, { x: 140, y: 1486, width: 800, rows: 6 });
+    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, brand, { fill: "primary", size: 28, radius: 8 });
+    k.text(brand, "{{brand.name}} guardrails", { style: "Brand 30", color: "text", autoWidth: true, name: "Brand name" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 88", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { width: W.width, height: W.height, clip: true, radius: 14, effects: [lift(34, 90, 0.6)], name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W.width, height: W.height }, { name: "Camera" });
+    const win = flagWindow(k, cam, { absolute: { x: 0, y: 0 }, shadow: false, percent: "0%", values: SPIKE, status: "Rolled back" });
+    notice(k, stage, { style: "Notice 20", width: 190, absolute: { x: 530, y: 12 } });
+    const p = pointer(k, stage, { ...REST, size: 96, fill: "onCard", edge: "well", ring: "signal" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 8, name: "Progress" });
+    for (let i = 1; i <= 3; i++) {
+      const track = k.stack(bars, { height: 6, fill: "line", radius: 3, clip: true, name: "Progress track" });
+      k.rect(track, "FILL", 6, "primary", { name: `Progress fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 38", fill: "card", ink: "onCard", radius: 12, pad: [16, 26], stroke: { color: "edge", width: 1, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "Try the guardrail at {{brand.site}}" }, { name: "Call" });
+    const fills = k.named(win.win, "Step fill");
+    fills.slice(2).forEach((id) => k.patch(id, { name: "Step idle", opacity: 0 }));
+    fills.slice(0, 2).forEach((id) => {
+      k.patch(id, { opacity: 0 });
+      k.animate(id, "opacity", [{ t: beat(STEP[1] + 2) - 1, v: 0, ease: ease.hold }, { t: beat(STEP[1] + 2), v: 1, ease: ease.hold }, { t: CROSS + 200, v: 1, ease: ease.out("cubic") }, { t: CROSS + 900, v: 0 }]);
+    });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.animate(win.percent, COUNTER_PATH, [{ t: CROSS + 200, v: 50, ease: ease.out("expo") }, { t: CROSS + 1100, v: 0 }]);
+    for (const id of k.named(win.win, "Error figure")) k.animate(id, COUNTER_PATH, [{ t: CROSS + 600, v: 1.4, ease: ease.out("cubic") }, { t: CROSS + BACK, v: 0.02 }]);
+    for (const id of k.named(win.win, "Status label")) k.animate(id, "text.content", [{ t: 0, v: "Healthy", ease: ease.hold }, { t: CROSS, v: "Rolling back", ease: ease.hold }, { t: CROSS + BACK, v: "Rolled back" }]);
+    k.animate(win.chart.line, "trim.end", [{ t: beat(STEP[2]), v: 0, ease: ease.linear }, { t: CROSS, v: win.chart.crossing, ease: ease.linear }, { t: CROSS + BACK, v: 1 }]);
+    camera(k, cam, W.width, W.height, SHOTS);
+    const to = (i) => {
+      const at = seenAt(W.width, W.height, SHOTS[i], TARGETS[i]);
+      return { dx: at.x - REST.x, dy: at.y - REST.y };
+    };
+    glide(k, p, [
+      { t: beat(STEP[0]), dx: 0, dy: 0 },
+      { t: beat(STEP[0] + 1.6), ...to(0) },
+      { t: beat(STEP[1]), ...to(0) },
+      { t: beat(STEP[1] + 1.6), ...to(1) },
+      { t: beat(STEP[2]), ...to(1) },
+      { t: beat(STEP[2] + 2), dx: -60, dy: 84 },
+      { t: beat(STEP[3]), dx: -60, dy: 84 },
+      { t: beat(STEP[3] + 1.5), dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [beat(STEP[0] + 2), beat(STEP[1] + 2)]);
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 70 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        fitBackdrop(kit, id);
+        hide(kit, id, ["Brand row", "Other flags"]);
+        restyle(kit, id, "Hook", "Hook 64");
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      const scale = right.width / W.width, top = right.y + Math.round((right.height - W.height * scale - 36) / 2);
+      fitBackdrop(kit, id);
+      float(kit, id, "Stage", right.x, top, { scale });
+      float(kit, id, "Progress", right.x, top + Math.round(W.height * scale) + 30, { width: right.width });
+      hide(kit, id, ["Other flags"]);
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_dark_feature_demo_default
+};

package/dist/chunks/chunk-F5OWF2ZE.js

@@ -0,0 +1,317 @@
+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,
+  clock,
+  drain,
+  lift,
+  liveBadge,
+  liveBrand,
+  nightPill,
+  numerals,
+  pinned,
+  reactions,
+  room
+} from "./chunk-ZEOKTCQW.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/singles-day-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 1e4;
+var TICKS = 8;
+var W = 480;
+var H = 680;
+var BEZEL = 10;
+var ROOM = {
+  w: W,
+  h: H,
+  u: 0.56,
+  cx: 262,
+  headY: 292,
+  deskY: 468,
+  hand: "left",
+  loopMs: LOOP,
+  bunting: 16,
+  radius: 36,
+  ring: { x: 262, y: 284, r: 124 },
+  balloons: { x: 344, y: 124, h: 140 },
+  parcels: [{ x: 372, w: 150, h: 120, label: true }, { x: 396, w: 96, h: 70, on: 120 }]
+};
+var pct = (l) => Math.round((l.was - l.now) / l.was * 100);
+var money = (n) => `$${n.toLocaleString("en-US")}`;
+var LOTS = [
+  { id: "Month", tag: "LOT 01 \xB7 PINNED", title: "Solo, first month", pitch: "The whole back office for one person. Then $29 a month, and cancelling takes two clicks.", was: SALE.was, now: SALE.now, total: SALE.seats, left: SALE.left, label: "SELLING FAST", includes: ["Invoices chased until they are paid", "Support inbox answered in your voice", "Books closed on the 1st"], cta: "Grab a seat for $11" },
+  { id: "Year", tag: "LOT 02", title: "Solo, a whole year", pitch: "Twelve months of somebody else doing the invoices. Year two renews at the list price.", was: SALE.yearWas, now: SALE.yearNow, total: SALE.seats, left: 57, label: "GOING", includes: ["Everything in the first lot", "A quarterly tax pack for your accountant", "Priority queue"], cta: "Take the year for $111" },
+  { id: "Life", tag: "LOT 03 \xB7 11 ONLY", title: "Solo, for life", pitch: "Pay once and never read a renewal email again. Priced against five years of Solo at the list price.", was: 1740, now: SALE.lifetime, total: SALE.lifetimeSeats, left: 4, label: "NEARLY GONE", includes: ["Every update, for as long as Tandem runs", "A direct line to the founder", "No renewal, ever"], cta: "Claim one of eleven" }
+];
+var ASKED = [
+  ["kai_ships", "heart", "Do I need a code?", "No. The $11 is already on the pinned lot. At 22:11 UTC it goes back to $29, whether or not anyone is watching."],
+  ["ops_of_one", "kraft", "What does it actually do?", "Chases unpaid invoices until they are paid, answers the easy support mail in your voice, and closes the month\u2019s books on the 1st. You approve; it does the typing."],
+  ["marta.dev", "accent", "What if my team of one becomes two?", "Congratulations. Add a seat at the list price whenever you like. Your own first month stays $11."],
+  ["solo_sam", "foilShade", "And when the seats run out?", "Then they are out: 111 first months, 111 years, 11 lifetimes. There is no second batch and no \u201Cextended by popular demand\u201D."]
+];
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 500 } },
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 100 },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: "Ends", preset: "rise-in", at: 500 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 650, stagger: { delay: 100 } },
+  { layer: "Note", preset: "fade-in", at: 900, params: { duration: 500 } },
+  { layer: "Visual", preset: "pop-in", at: 200, params: { duration: 600, amount: 0.92 } },
+  { layer: "Hero deal", preset: "rise-in", at: 700, params: { duration: 500 } },
+  { layer: "Hero was strike", preset: "wipe-in", at: 1300, params: { duration: 300 } },
+  { layer: "Hero off chip", preset: "pop-in", at: 2200, params: { duration: 350 } },
+  { layer: "Hero price figure", preset: "pulse", at: 2200, params: { duration: 500, amount: 0.1 } },
+  { layer: "Chat 1", preset: "pop-in", at: 2600, params: { duration: 300 } },
+  { layer: "Chat 2", preset: "pop-in", at: 4200, params: { duration: 300 } }
+];
+var counts = [
+  { layer: "Watching figure", at: 300, duration: 2600, counter: { from: 1011, to: 1111, suffix: " watching" } },
+  { layer: "Hero price figure", at: 1300, duration: 900, counter: { from: SALE.was, to: SALE.now, prefix: "$" } },
+  // The flash clock: the seconds tick down once a second for as long as the hero plays.
+  { layer: "Seconds figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: SALE.seconds, to: SALE.seconds - TICKS } },
+  { layer: "Hero stock figure", at: 1600, duration: 8e3, ease: ease.linear, counter: { from: SALE.left + 26, to: SALE.left, suffix: ` of ${SALE.seats} left` } },
+  ...LOTS.map((l, i) => ({ layer: `${l.id} price figure`, at: 1400 + i * 200, duration: 1400, counter: { from: l.was, to: l.now, prefix: "$" } })),
+  ...LOTS.map((l, i) => ({ layer: `${l.id} stock figure`, at: 1800 + i * 200, duration: 3200, ease: ease.linear, counter: { from: l.total, to: l.left, suffix: ` of ${l.total} left` } }))
+];
+var singles_day_landing_default = defineTemplate({
+  id: "web-singles-day-landing",
+  meta: {
+    name: "Singles Day flash sale landing page",
+    description: "An 11.11 landing page for a SaaS sold to solo founders, run as a live-shopping stream: beside the offer and a flash clock that ticks, a phone shows the stream with the founder as host, a viewer count, floating hearts, chat and a pinned deal whose price counts from $29 to $11 while its \u201Cselling fast\u201D bar runs down. Three lots ($11, $111 and $1,111) with their own stock, and the chat\u2019s questions answered. Desktop to phone",
+    category: "web",
+    tags: ["singles day", "11.11", "double eleven", "flash sale", "landing page", "live shopping", "countdown", "stock", "pricing", "solo founder", "saas", "animation", "website", "responsive", "seasonal"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "pricing", "countdown"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Singles Day flash sale landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    liveBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Bar 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 0.4, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Eyebrow 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 0.8, lineHeight: 20 });
+    k.textStyle("Display 88", { size: 88, fontWeight: 900, letterSpacing: -3.6, lineHeight: 86 });
+    k.textStyle("Display 72", { size: 72, fontWeight: 900, letterSpacing: -2.8, lineHeight: 72 });
+    k.textStyle("Display 60", { size: 60, fontWeight: 900, letterSpacing: -2.2, lineHeight: 62 });
+    k.textStyle("Display 42", { size: 42, fontWeight: 900, letterSpacing: -1.4, lineHeight: 44 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Ends 13", { ...MONO, size: 13, fontWeight: 700, letterSpacing: 1.2, lineHeight: 18 });
+    k.textStyle("Clock 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 48, fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 34, fontFeatures: { tnum: 1 } });
+    k.textStyle("Unit 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Note 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Section 40", { size: 40, fontWeight: 900, letterSpacing: -1.4, lineHeight: 44 });
+    k.textStyle("Section 30", { size: 30, fontWeight: 900, letterSpacing: -1, lineHeight: 34 });
+    k.textStyle("Section lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Body 15", { size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Include 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Asker 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Ask 18", { size: 18, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Answer 16", { size: 16, fontWeight: 400, lineHeight: 25 });
+    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Live 13", { ...MONO, size: 13, fontWeight: 800, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Watching 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 16, fontFeatures: { tnum: 1 } });
+    k.textStyle("Chat 14", { size: 14, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Chat who 12", { ...MONO, size: 12, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Lot 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 0.6, lineHeight: 16 });
+    k.textStyle("Title 17", { size: 17, fontWeight: 800, letterSpacing: -0.3, lineHeight: 22 });
+    k.textStyle("Price 56", { size: 56, fontWeight: 900, letterSpacing: -2.6, lineHeight: 56, fontFeatures: { tnum: 1 } });
+    k.textStyle("Was 24", { size: 24, fontWeight: 700, letterSpacing: -0.6, lineHeight: 28 });
+    k.textStyle("Stock 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 0.4, lineHeight: 16, fontFeatures: { tnum: 1 } });
+    k.textStyle("Chip 14", { ...MONO, size: 14, fontWeight: 800, lineHeight: 18 });
+    k.textStyle("Lot 13", { ...MONO, size: 13, fontWeight: 700, letterSpacing: 1, lineHeight: 18 });
+    k.textStyle("Title 24", { size: 24, fontWeight: 800, letterSpacing: -0.6, lineHeight: 30 });
+    k.textStyle("Price 64", { size: 64, fontWeight: 900, letterSpacing: -3, lineHeight: 66, fontFeatures: { tnum: 1 } });
+    k.textStyle("Stock 13", { ...MONO, size: 13, fontWeight: 800, letterSpacing: 0.4, lineHeight: 18, fontFeatures: { tnum: 1 } });
+    buttons(k, { style: "Button 16", pad: [14, 24], radius: 999 });
+    pill(k, "Marker", { fill: "accent", ink: "onAccent", style: "Eyebrow 14", label: "SINGLES\u2019 DAY \xB7 11.11", pad: [6, 14] });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 14", label: "\u221262%", pad: [3, 8], radius: 6 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 56, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const offer = k.stack(sheet, { fill: "primary", radius: 999, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
+    k.text(offer, `LIVE NOW \xB7 Singles\u2019 Day, 11.11 \xB7 Solo\u2019s first month is $${SALE.now} for the first ${SALE.seats} founders \xB7 ends ${SALE.closes}`, { style: "Bar 14", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["The stream", "The lots", "The chat", "Sign in"], cta: "Grab a seat", style: "Nav 16", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", padding: { top: 8, right: 0, bottom: 16, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.instance(copy, "Marker", { Label: "SINGLES\u2019 DAY \xB7 11.11 \xB7 LIVE NOW" }, { name: "Eyebrow" });
+    k.text(copy, "A sale for the team of one.", { style: "Display 88", color: "text", name: "Headline" });
+    k.text(copy, `{{brand.name}} is the back office for a company of one: it chases your invoices, answers the support inbox and closes the month\u2019s books. For eleven hours the Solo plan\u2019s first month is $${SALE.now}, not $${SALE.was}, for the first ${SALE.seats} founders. Treat yourself. Nobody else is going to expense it.`, { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const ends = k.stack(copy, { gap: 8, name: "Ends" });
+    k.text(ends, "THE FLASH DEAL ENDS IN", { style: "Ends 13", color: "onPaper", name: "Ends label" });
+    clock(k, ends, { style: "Clock 44", unit: "Unit 12", seconds: SALE.seconds - TICKS, gap: 10, pad: [12, 0], radius: 14, tile: 104 });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: `Grab a seat for $${SALE.now}` }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "See what it takes off your desk" }, { name: "CTA quiet" });
+    k.text(copy, `Then $${SALE.was} a month. No code to paste, no card until the eleven hours are up, and cancelling takes two clicks.`, { style: "Note 15", color: "onPaper", name: "Note" });
+    const visual = k.stack(hero, { width: W + BEZEL * 2, height: H + BEZEL * 2, name: "Visual" });
+    const phone = k.frame(visual, { x: 0, y: 0, width: W + BEZEL * 2, height: H + BEZEL * 2 }, { name: "Phone", fill: "night", radius: 36 + BEZEL, effects: lift(k, 1.4, 0.34) });
+    const stream = k.frame(phone, { x: BEZEL, y: BEZEL, width: W, height: H }, { name: "Stream" });
+    room(k, stream, ROOM);
+    reactions(k, stream, { w: 76, h: 300, n: 8, u: 0.6, loopMs: LOOP, from: 1800, absolute: { x: 392, y: 150 } });
+    const over = k.stack(stream, { width: W - 36, height: H - 36, justify: "SPACE_BETWEEN", absolute: { x: 18, y: 18 }, name: "Overlay" });
+    const bar = k.stack(over, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Stream bar" });
+    liveBadge(k, bar, { style: "Live 13", dot: 9, pad: [5, 12], loopMs: LOOP });
+    nightPill(k, bar, "1,111 watching", { style: "Watching 13", name: "Watching", pad: [5, 12] });
+    const under = k.stack(over, { gap: 8, name: "Stream foot" });
+    chat(k, under, "lena", "no team? sold.", { style: "Chat 14", whoStyle: "Chat who 12", face: "heart", dot: 20, pad: [6, 12], shadow: 0.3, name: "Chat 1" });
+    chat(k, under, "", "Seat 74 of 111 just went", { style: "Chat 14", whoStyle: "Chat who 12", face: "primary", dot: 20, pad: [6, 12], shadow: 0.3, system: true, name: "Chat 2" });
+    pinned(k, under, {
+      prefix: "Hero",
+      lot: "PINNED \xB7 LOT 01 \xB7 FLASH DEAL",
+      title: "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} left`,
+      styles: { lot: "Lot 12", title: "Title 17", price: "Price 56", was: "Was 24", stock: "Stock 12" },
+      pad: { top: 14, right: 16, bottom: 16, left: 16 },
+      gap: 8,
+      radius: 20,
+      bar: 12,
+      shadow: 0.5,
+      priceGap: 10
+    });
+    const band = k.stack(sheet, { fill: "primary", radius: 28, padding: { top: 48, right: 48, bottom: 52, left: 48 }, gap: 32, name: "Lots band" });
+    const title = k.stack(band, { gap: 8, name: "Lots head" });
+    k.text(title, "Three lots on the shelf. All of them elevens.", { style: "Section 40", color: "onPrimary", name: "Lots title" });
+    k.text(title, "Pick one. The price is already marked down, the bars are real, and the list price comes back when the stream ends.", { style: "Section lead 17", color: "onPrimary", name: "Lots lead" });
+    const lots = k.stack(band, { direction: "HORIZONTAL", gap: 24, name: "Lots" });
+    for (const l of LOTS) {
+      const card = pinned(k, lots, {
+        prefix: l.id,
+        name: "Lot card",
+        lot: l.tag,
+        title: l.title,
+        pitch: l.pitch,
+        price: money(l.now),
+        was: money(l.was),
+        chip: "Chip",
+        saving: l.now < 1e3 ? `\u2212${pct(l)}%` : "",
+        left: l.left,
+        total: l.total,
+        suffix: ` of ${l.total} left`,
+        stockLabel: l.label,
+        styles: { lot: "Lot 13", title: "Title 24", pitch: "Body 15", price: "Price 64", was: "Was 24", stock: "Stock 13" },
+        pad: { top: 26, right: 26, bottom: 26, left: 26 },
+        gap: 14,
+        radius: 24,
+        bar: 14,
+        shadow: 0.7,
+        priceGap: 12
+      });
+      const inc = k.stack(card, { gap: 8, padding: { top: 4, right: 0, bottom: 4, left: 0 }, name: "Includes" });
+      for (const line of l.includes) {
+        const row = k.stack(inc, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Include" });
+        k.ellipse(row, 8, "primary", { name: "Include dot" });
+        k.text(row, line, { style: "Include 14", color: "onCard", name: "Include text" });
+      }
+      k.instance(card, "Button", { Label: l.cta }, { name: "Lot button" });
+    }
+    const asked = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Asked" });
+    const askedHead = k.stack(asked, { width: 380, gap: 12, name: "Asked head" });
+    k.text(askedHead, "The chat asked. The host answered.", { style: "Section 40", color: "text", name: "Asked title" });
+    k.text(askedHead, "The small print, read out loud. If yours is not here, the support inbox is answered by the product you are about to buy.", { style: "Section lead 17", color: "onPaper", name: "Asked lead" });
+    const date = k.stack(askedHead, { width: 380, height: 150, padding: { top: 16, right: 0, bottom: 0, left: 0 }, name: "Date" });
+    numerals(k, date, { h: 112, absolute: { x: 0, y: 24 }, depth: 12 });
+    const thread = k.stack(asked, { gap: 14, name: "Thread" });
+    for (const [who, face, q, a] of ASKED) {
+      const ask = k.stack(thread, { padding: { top: 0, right: 96, bottom: 0, left: 0 }, name: "Ask row" });
+      const bubble = k.stack(ask, { direction: "HORIZONTAL", gap: 12, align: "CENTER", fill: "card", radius: 22, padding: { top: 12, right: 20, bottom: 12, left: 14 }, effects: lift(k, 0.4, 0.16), name: "Ask" });
+      k.ellipse(bubble, 32, face, { name: "Ask face" });
+      const words = k.stack(bubble, { name: "Ask words" });
+      k.text(words, who, { style: "Asker 13", color: "cardMuted", name: "Asker" });
+      k.text(words, q, { style: "Ask 18", color: "onCard", name: "Question" });
+      const reply = k.stack(thread, { padding: { top: 0, right: 0, bottom: 6, left: 96 }, name: "Answer row" });
+      const said = k.stack(reply, { fill: "night", radius: 22, padding: { top: 14, right: 20, bottom: 16, left: 20 }, gap: 2, name: "Answer" });
+      k.text(said, "HOST", { style: "Asker 13", color: "nightMuted", name: "Host" });
+      k.text(said, a, { style: "Answer 16", color: "nightInk", name: "Answer text" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, padding: { top: 8, right: 0, bottom: 0, left: 0 }, name: "Footer" });
+    k.text(foot, "Prices in US dollars, before sales tax. The first month is $11 once per account; monthly and annual plans renew at the list price unless you cancel. Lifetime seats never renew.", { style: "Footer 14", color: "onPaper", name: "Legal" });
+    k.text(foot, "hello@{{brand.site}}", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Email" });
+    drain(k, sheet, { name: "Hero stock", from: (SALE.left + 26) / SALE.seats, to: SALE.left / SALE.seats, at: 1600, duration: 8e3 });
+    LOTS.forEach((l, i) => drain(k, sheet, { name: `${l.id} stock`, from: 1, to: l.left / l.total, at: 1800 + i * 200, duration: 3200 }));
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Lots", "Asked", "Footer"],
+      restyle: { "Display 88": { laptop: "Display 72", tablet: "Display 60", mobile: "Display 42" }, "Lead 20": { mobile: "Lead 17" }, "Clock 44": { mobile: "Clock 30" }, "Section 40": { mobile: "Section 30" } },
+      gap: { mobile: 40 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+          for (const n of kit.named(id, "Lots band")) kit.patch(n, { padding: { top: 40, right: 32, bottom: 44, left: 32 } });
+          for (const n of kit.named(id, "Lots")) kit.patch(n, { itemSpacing: 18 });
+          for (const n of kit.named(id, "Asked")) kit.patch(n, { itemSpacing: 48 });
+        }
+        const narrow = size === "tablet" || size === "mobile";
+        if (narrow) {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Asked")) kit.patch(n, { itemSpacing: 28 });
+          for (const n of kit.named(id, "Asked head")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Offer bar")) kit.patch(n, { cornerRadius: 18 });
+          for (const n of kit.named(id, "Lots band")) kit.patch(n, { padding: { top: 28, right: 12, bottom: 28, left: 12 }, itemSpacing: 22, cornerRadius: 22 });
+          for (const n of kit.named(id, "Lot card")) kit.patch(n, { padding: { top: 22, right: 20, bottom: 22, left: 20 } });
+          for (const n of kit.named(id, "Ask row")) kit.patch(n, { padding: { top: 0, right: 24, bottom: 0, left: 0 } });
+          for (const n of kit.named(id, "Answer row")) kit.patch(n, { padding: { top: 0, right: 0, bottom: 6, left: 24 } });
+          for (const n of kit.named(id, "Clock tile")) kit.patch(n, { width: 88 });
+        }
+        const pw = W + BEZEL * 2, ph = H + BEZEL * 2, s = size === "mobile" ? 335 / pw : 1;
+        for (const box of kit.named(id, "Visual")) kit.patch(box, { layoutSizingHorizontal: "FIXED", width: Math.round(pw * s), height: Math.round(ph * s) });
+        for (const st of kit.named(id, "Phone")) kit.patch(st, { layoutPositioning: "ABSOLUTE", width: pw, height: ph, x: Math.round(-pw / 2 * (1 - s)), y: Math.round(-ph / 2 * (1 - s)), scaleX: s, scaleY: s });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  singles_day_landing_default
+};

package/dist/chunks/chunk-F7SDLYHJ.js

@@ -0,0 +1,79 @@
+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-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/smooth-loop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SIZE = 1080;
+var LOOP = 4e3;
+var SWEEP = 260;
+var smooth_loop_default = defineTemplate({
+  id: "motion-smooth-loop",
+  meta: {
+    name: "Smooth loop",
+    description: "A seamless four-second loop made for 60 fps: three orbits turning at different speeds around a breathing mark, and a light sweeping the caption band \u2014 export it as MP4 or WebM at full size",
+    category: "animation",
+    tags: ["animation", "loop", "60fps", "orbit", "sweep", "seamless"],
+    platforms: ["instagram", "tiktok", "linkedin", "x"],
+    formats: ["post", "video"],
+    useCases: ["brand-intro", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  build() {
+    const k = new Kit("Smooth loop", preset("ig-post"));
+    k.brand({ primary: "#0B1020", onPrimary: "#FFFFFF", accent: "#7C5CFF", onAccent: "#FFFFFF", mint: "#35E0B0", sun: "#FFC247", ring: "#2A3354" });
+    k.textStyle("Display 200", { size: 200, fontWeight: 900, letterSpacing: -6, lineHeight: 200, textAlign: "CENTER" });
+    k.textStyle("Label 30", { size: 30, fontWeight: 800, letterSpacing: 6, lineHeight: 36, textAlign: "CENTER" });
+    k.textStyle("Caption 36", { size: 36, fontWeight: 700, letterSpacing: 2, lineHeight: 44, textAlign: "CENTER" });
+    k.component("Caption", { direction: "HORIZONTAL", width: "HUG", align: "CENTER", props: { Caption: "SIXTY FRAMES A SECOND  \xB7  SMOOTH AS GLASS" } }, (id) => {
+      k.propText(id, "Caption", { style: "Caption 36", color: "onAccent", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 8, 96, "primary", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: LOOP, fps: 60 });
+    const orbit = (name, d, dot, color) => {
+      const o = k.stack(sheet, { name, width: d, height: d, absolute: { x: (SIZE - d) / 2, y: (SIZE - d) / 2 } });
+      k.ellipse(o, d, [], { name: "Ring", stroke: { color: "ring", width: 3 }, absolute: { x: 0, y: 0 } });
+      k.ellipse(o, dot, color, { name: "Dot", absolute: { x: (d - dot) / 2, y: -dot / 2 } });
+      return o;
+    };
+    const outer = orbit("Outer orbit", 820, 44, "accent");
+    const middle = orbit("Middle orbit", 600, 34, "mint");
+    const inner = orbit("Inner orbit", 400, 26, "sun");
+    const mark = k.stack(sheet, { name: "Mark", width: "HUG", gap: 8, align: "CENTER" });
+    k.text(mark, "SMOOTH LOOP", { style: "Label 30", color: "onPrimary", autoWidth: true, name: "Label" });
+    k.text(mark, "60 fps", { style: "Display 200", color: "onPrimary", autoWidth: true, name: "Rate" });
+    const band = k.stack(sheet, { name: "Band", direction: "HORIZONTAL", width: SIZE, height: 72, fill: "accent", clip: true, justify: "CENTER", align: "CENTER", absolute: { x: 0, y: SIZE - 120 } });
+    const light = k.rect(band, SWEEP, 72, "onAccent", { name: "Sweep", opacity: 0.22, absolute: { x: -SWEEP, y: 0 } });
+    k.instance(band, "Caption");
+    const lin = ease.linear, sine = ease.inOut("sine");
+    k.animate(outer, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: 360 }]);
+    k.animate(middle, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: -360 }]);
+    k.animate(inner, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: 720 }]);
+    for (const axis of ["scaleX", "scaleY"]) k.animate(mark, axis, [{ t: 0, v: 1, ease: sine }, { t: LOOP / 2, v: 1.06, ease: sine }, { t: LOOP, v: 1 }]);
+    const across = SIZE + SWEEP;
+    k.animate(light, "translateX", [{ t: 0, v: 0, ease: lin }, { t: LOOP / 2 - 1, v: across, ease: ease.hold }, { t: LOOP / 2, v: 0, ease: lin }, { t: LOOP, v: across }]);
+    return k.finish();
+  }
+});
+
+export {
+  smooth_loop_default
+};