@popcraft/kit 0.31.0 → 0.32.1

package/dist/chunks/chunk-OVLUOBOX.js

@@ -0,0 +1,183 @@
+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 {
+  FAILED,
+  LIVE,
+  framing,
+  lights,
+  machinedBrand,
+  rack,
+  shopLight
+} from "./chunk-5ABNDD4R.js";
+import {
+  phrases
+} from "./chunk-MTEXY7UL.js";
+import {
+  key
+} from "./chunk-OTE5FUDA.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  focalFromPerspective,
+  init_transform3d
+} from "./chunk-CK43FENV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/machined-hero.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_transform3d();
+var DURATION = 7e3;
+var FAIL = 1400;
+var HOP = 2400;
+var OUT = 3300;
+var VIEW = { w: 620, h: 600 };
+var SPECS = [["Failover, p95", "38 ms"], ["Providers, one endpoint", "14"], ["Tokens saved by cache", "31%"], ["Uptime, last 90 days", "99.995%"]];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 100 },
+  { layer: "Headline", preset: "rise-in", at: 220, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 380 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 520, stagger: { delay: 100 } },
+  { layer: "Proof", preset: "fade-in", at: 800, params: { duration: 500 } },
+  { layer: "Rack window", preset: "scale-in", at: 200, params: { duration: 800, amount: 0.94 } },
+  { layer: "Spec", preset: "rise-in", at: 1e3, stagger: { delay: 110 } }
+];
+var pose = (w, h) => ({ cx: w * 0.57, cy: h * 0.46, scale: Math.min(w / 620, h / 540) * 0.54 });
+var machined_hero_default = defineTemplate({
+  id: "web-machined-hero",
+  meta: {
+    name: "Machined hardware web hero",
+    description: "An animated landing-page hero for developer infrastructure: the headline rises in beside a window into a server rack, where the product sits as a brushed-aluminium unit in real 3D. It slides out on its rails, a port lamp goes red, the route hops to the next upstream and a band of light crosses the metal; the unit\u2019s rating plate under it carries the numbers. Desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["machined", "hardware", "rack", "server", "3d", "shader", "brushed metal", "aluminium", "industrial", "developer", "infrastructure", "ai", "gateway", "hero", "landing page", "website", "animation", "responsive", "saas"],
+    platforms: ["web"],
+    formats: ["page", "banner"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Machined hardware web hero", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    machinedBrand(k, { card: "#1B1E22", onCard: "#F4F1EB", cardMuted: "#B7B3AA" });
+    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("Eyebrow 14", { ...MONO, size: 14, fontWeight: 600, letterSpacing: 1.4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 72", { size: 72, fontWeight: 800, letterSpacing: -2.8, lineHeight: 74 });
+    k.textStyle("Display 60", { size: 60, fontWeight: 800, letterSpacing: -2.2, lineHeight: 62 });
+    k.textStyle("Display 50", { size: 50, fontWeight: 800, letterSpacing: -1.6, lineHeight: 54 });
+    k.textStyle("Display 38", { size: 38, fontWeight: 800, letterSpacing: -1, lineHeight: 42 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Proof 14", { ...MONO, size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Spec label 13", { ...MONO, size: 13, fontWeight: 500, letterSpacing: 0.8, lineHeight: 18, textCase: "UPPER" });
+    k.textStyle("Spec value 34", { size: 34, fontWeight: 800, letterSpacing: -1, lineHeight: 40 });
+    buttons(k, { style: "Button 16", pad: [15, 24], radius: 8 });
+    const sheet = k.sheet;
+    shopLight(k, sheet, 1440, 1024, { x: 0.72, y: 0.36, reach: 0.6, glow: 0.12, shadow: 0.35, grain: 0 });
+    page(k, sheet, { gap: 56, top: 32, paper: "background" });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    nav(k, sheet, { links: ["Routing", "Cache", "Guardrails", "Pricing", "Docs"], cta: "Get an API key", style: "Nav 16", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", padding: { top: 36, right: 0, bottom: 20, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    const eyebrow = k.stack(copy, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Eyebrow" });
+    k.rect(eyebrow, 28, 6, "primary", { radius: 2, name: "Eyebrow mark" });
+    k.text(eyebrow, "BH-1 model gateway \xB7 now GA", { style: "Eyebrow 14", color: "onBackground", name: "Eyebrow line" });
+    k.text(copy, "The model went down. Your app didn\u2019t.", { style: "Display 72", color: "text", name: "Headline" });
+    k.text(copy, "{{brand.name}} is one endpoint in front of every model provider. When an upstream times out, traffic moves to the next healthy one in 38 ms, and your users never see the error.", { style: "Lead 20", color: "onBackground", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Get an API key" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the failover docs" }, { name: "CTA quiet" });
+    const proof = k.stack(copy, { direction: "HORIZONTAL", gap: 20, wrap: true, name: "Proof" });
+    k.text(proof, "$ curl api.{{brand.site}}/v1/chat", { style: "Proof 14", color: "onBackground", autoWidth: true, name: "Proof call" });
+    k.text(proof, "# 200 OK in 38 ms", { style: "Proof 14", color: "onBackground", autoWidth: true, name: "Proof answer" });
+    const visual = k.stack(hero, { width: "HUG", name: "Visual" });
+    const win = k.stack(visual, { width: VIEW.w, height: VIEW.h, radius: 18, fill: "panel", clip: true, name: "Rack window", stroke: { color: "panelEdge", width: 2, align: "INSIDE" } });
+    const scene = k.group(win, { x: 0, y: 0, width: VIEW.w, height: VIEW.h }, { name: "Scene", absolute: true });
+    const s = { preset: "web-desktop", W: VIEW.w, H: VIEW.h, u: 0.5, tall: false, wide: false };
+    k.scene3d(scene, { camera: { focalLength: focalFromPerspective(1500, VIEW.w) }, lights: lights(s) });
+    const P = pose(VIEW.w, VIEW.h);
+    const R = rack(k, scene, s, { ...P, rotateX: -15, rotateY: -26, above: 4, below: 4, out: 300, glint: 0.55 });
+    const plate = k.stack(sheet, { direction: "HORIZONTAL", fill: "card", radius: 14, name: "Rating plate", stroke: { color: "panelEdge", width: 2, align: "INSIDE" } });
+    for (const [label, value] of SPECS) {
+      const cell = k.stack(plate, { gap: 6, padding: { top: 22, right: 26, bottom: 24, left: 26 }, name: "Spec", stroke: { color: "panelEdge", width: 1, align: "INSIDE" } });
+      k.text(cell, label, { style: "Spec label 13", color: "cardMuted", name: "Spec label" });
+      k.text(cell, value, { style: "Spec value 34", color: "onCard", name: "Spec value" });
+    }
+    const F = R.face;
+    key(k, R.unit, "z", [[0, 0, ease.hold], [OUT, 0, ease.out("expo")], [OUT + 1e3, 300]]);
+    key(k, R.rack, "rotateY", [[0, -14, ease.inOut("sine")], [OUT, -18, ease.inOut("cubic")], [OUT + 1400, -26, ease.inOut("sine")], [DURATION, -29]]);
+    key(k, R.rack, "rotateX", [[0, 0, ease.hold], [OUT + 450, 0, ease.inOut("cubic")], [OUT + 1800, -15]]);
+    key(k, F.faults[FAILED], "opacity", [[0, 0, ease.hold], [FAIL, 1, ease.hold], [FAIL + 110, 0, ease.hold], [FAIL + 220, 1, ease.hold], [FAIL + 330, 0, ease.hold], [FAIL + 440, 1]]);
+    key(k, F.markers[FAILED], "opacity", [[0, 1, ease.hold], [HOP, 0]]);
+    key(k, F.markers[LIVE], "opacity", [[0, 0, ease.hold], [HOP, 1]]);
+    phrases(k, F.route, [[0, "upstream-02"], [HOP, "upstream-03"]], { fade: 90, rise: 0 });
+    phrases(k, F.latency, [[0, "41 ms"], [FAIL, "timeout"], [HOP, "38 ms"]], { fade: 90, rise: 0 });
+    phrases(k, F.status, [[0, "All upstreams healthy"], [FAIL, "Upstream-02 is down"], [HOP, "Failover in 38 ms"]], { fade: 90, rise: 0 });
+    k.animateShader(F.finish, "glint", [{ t: 300, v: -0.5, ease: ease.inOut("sine") }, { t: HOP + 400, v: 1.5, ease: ease.hold }, { t: OUT + 600, v: -0.5, ease: ease.inOut("sine") }, { t: DURATION, v: 0.55 }]);
+    k.animateShader(R.lidFinish, "glint", [{ t: OUT, v: 0, ease: ease.inOut("sine") }, { t: DURATION, v: 0.7 }]);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero"],
+      gap: { laptop: 40, tablet: 44, mobile: 40 },
+      stackMobile: ["Rating plate"],
+      restyle: { "Display 72": { laptop: "Display 60", tablet: "Display 50", mobile: "Display 38" }, "Lead 20": { mobile: "Lead 17" } },
+      tweak: (kit, id, size) => {
+        for (const n of kit.named(id, "Shop light")) {
+          const f = kit.node(id);
+          kit.patch(n, { x: 0, y: 0, width: f.width, height: Math.max(f.height, 1024) });
+        }
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40, padding: { top: 20, right: 0, bottom: 8, left: 0 } });
+        if (size === "tablet") {
+          const [first] = kit.named(id, "Nav link");
+          if (first) kit.patch(first, { visible: false });
+          for (const n of kit.named(id, "Nav links")) kit.patch(n, { itemSpacing: 22 });
+          for (const n of kit.named(id, "Nav right")) kit.patch(n, { itemSpacing: 24 });
+        }
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: size === "tablet" || size === "mobile" ? "FILL" : "HUG" });
+        const w = size === "laptop" ? 520 : size === "tablet" ? 672 : size === "mobile" ? 335 : VIEW.w;
+        const h = size === "laptop" ? 500 : size === "tablet" ? 460 : size === "mobile" ? 300 : VIEW.h;
+        for (const n of kit.named(id, "Rack window")) kit.patch(n, { width: w, height: h, layoutSizingHorizontal: "FIXED" });
+        for (const n of kit.named(id, "Scene")) kit.patch(n, { width: w, height: h });
+        const q = pose(w, h);
+        for (const sc of kit.named(id, "Scene")) for (const n of kit.named(sc, "Rack")) kit.patch(n, framing(kit, sc, n, q));
+        if (size === "tablet") for (const n of kit.named(id, "Rating plate")) {
+          kit.patch(n, { layoutWrap: "WRAP" });
+          for (const c of kit.named(n, "Spec")) kit.patch(c, { layoutSizingHorizontal: "FIXED", width: kit.node(n).width / 2 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  machined_hero_default
+};

package/dist/chunks/chunk-OYAW6BPP.js

@@ -0,0 +1,33 @@
+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 {
+  solarpunk_landing_default
+} from "./chunk-KVH7GMJR.js";
+import {
+  solarpunk_impact_post_default
+} from "./chunk-E6BB24BY.js";
+import {
+  solarpunk_link_preview_default
+} from "./chunk-H3DX6ZDO.js";
+import {
+  solarpunk_rooftop_reel_default
+} from "./chunk-GWZD2DEW.js";
+import {
+  solarpunk_header_default
+} from "./chunk-XOQS7SRQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/solarpunk.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [solarpunk_rooftop_reel_default, solarpunk_landing_default, solarpunk_impact_post_default, solarpunk_header_default, solarpunk_link_preview_default];
+var solarpunk_default = pack;
+
+export {
+  solarpunk_default
+};

package/dist/chunks/chunk-OZAW53WU.js

@@ -0,0 +1,167 @@
+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 {
+  DEAL,
+  board as board2,
+  boardHead,
+  chart,
+  dashRule,
+  deskScreens,
+  fitListings,
+  floorBrand,
+  floorTicket,
+  ledWell,
+  listings,
+  playChart,
+  row,
+  stamp,
+  tape,
+  two
+} from "./chunk-EYNUZMPC.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  board,
+  hide,
+  put,
+  reboard
+} from "./chunk-YHBAWSDX.js";
+import {
+  glow
+} from "./chunk-M6VTXO6F.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/black-friday-ticker-countdown.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CONTENT = ["Headline", "Board", "Button", "Stamp"];
+var TICKS = 6;
+var DURATION = 8e3;
+var CHART = { w: 896, h: 190 };
+var cues = [
+  { layer: "Headline", preset: "drop-in", at: 0, params: { duration: 500 } },
+  { layer: "Board", preset: "rise-in", at: 150, params: { duration: 650 } },
+  { layer: "Button", preset: "pop-in", at: 800 },
+  { layer: "Candles before", preset: "wipe-in", at: 500, params: { duration: 900 } },
+  { layer: "Bell marker", preset: "fade-in", at: 1300, params: { duration: 200 } },
+  { layer: "Candle fall", preset: "wipe-in", at: 1500, params: { duration: 500, direction: "down" } },
+  { layer: "Candles after", preset: "wipe-in", at: 2e3, params: { duration: 1200 } },
+  { layer: "Now level", preset: "fade-in", at: 2300, params: { duration: 300 } },
+  { layer: "Stamp", preset: "pop-in", at: 2500, params: { duration: 350 } },
+  { layer: "Price row", preset: "pulse", at: 3e3, params: { duration: 600, amount: 0.04 } },
+  { layer: "Button", preset: "pulse", at: 4500, params: { amount: 0.06 } },
+  outro(CONTENT, 7300)
+];
+var counts = [
+  { layer: "Discount row figure", at: 1500, duration: 1e3, counter: { from: 0, to: DEAL.off, prefix: "\u2212", suffix: "%" } },
+  { layer: "Price row figure", at: 1500, duration: 1e3, counter: { from: DEAL.teamWas, to: DEAL.teamNow, prefix: "$" } },
+  { layer: "Seconds figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS } }
+];
+var NAME = "Black Friday ticker countdown post";
+var black_friday_ticker_countdown_default = defineTemplate({
+  id: "motion-black-friday-ticker-countdown-post",
+  meta: {
+    name: NAME,
+    description: "A last-call post for a SaaS Black Friday sale, drawn as a trading floor: an LED board on salmon newspaper paper whose closing-bell clock ticks a second at a time while a candlestick chart falls off a cliff, the discount counts to 60% and a ticker tape scrolls. Eight seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "countdown", "timer", "sale", "saas", "stock ticker", "trading floor", "chart", "counter", "post", "deadline"],
+    platforms: ["instagram", "x", "linkedin", "facebook", "threads"],
+    formats: ["post", "portrait-post", "story", "ad"],
+    useCases: ["countdown", "sale"],
+    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;
+    floorBrand(k, { name: DEAL.product, site: DEAL.site, symbol: DEAL.symbol }, ["paper", "text", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    k.textStyle("Tape 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: 0.6, lineHeight: 32 });
+    k.textStyle("Headline 100", { ...SERIF, size: 100, fontWeight: 900, letterSpacing: -3.4, lineHeight: 100, textAlign: "CENTER" });
+    k.textStyle("Headline 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -2.6, lineHeight: 86, textAlign: "CENTER" });
+    k.textStyle("Label 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Clock 120", { ...MONO, size: 120, fontWeight: 800, letterSpacing: -3, lineHeight: 128, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 100", { ...MONO, size: 100, fontWeight: 800, letterSpacing: -3, lineHeight: 108, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Unit 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2, lineHeight: 26, textAlign: "CENTER" });
+    k.textStyle("Axis 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1, lineHeight: 24 });
+    k.textStyle("Row 30", { ...MONO, size: 30, fontWeight: 700, lineHeight: 40, fontFeatures: { tnum: 1 } });
+    k.textStyle("Row strong 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 40, fontFeatures: { tnum: 1 } });
+    k.textStyle("Button 32", { ...MONO, size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Stamp 30", { ...MONO, size: 30, fontWeight: 800, letterSpacing: 2, lineHeight: 34 });
+    pill(k, "Link button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: DEAL.link, pad: [20, 40], radius: 10 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 22, { top: 40, right: 64, bottom: 40, left: 64 }, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    listings(k, sheet, 1080, 1080);
+    glow(k, sheet, { x: 220, y: 240, w: 1400, role: "light", alpha: 0.2, name: "Page light" });
+    for (const [name, x, rotation] of [["Floor ticket left", -80, -8], ["Floor ticket right", 590, 8]]) k.patch(floorTicket(k, sheet, { x, y: 1460, width: 560, height: 700, rotation, name }), { visible: false });
+    k.patch(deskScreens(k, sheet, { x: 40, y: 1500, width: 1e3, height: 320 }), { visible: false });
+    tape(k, sheet, { item: 400, height: 60, style: "Tape 26", rate: 3 * 400 * 1e3 / DURATION, radius: 10 });
+    k.text(sheet, "Closing bell in", { style: "Headline 100", color: "text", name: "Headline" });
+    const b = board2(k, sheet, { pad: 28, gap: 14 });
+    boardHead(k, b, { label: "{{brand.symbol}} \xB7 BLACK FRIDAY SELL-OFF", note: `ENDS ${DEAL.ends.toUpperCase()}`, style: "Label 22", lamp: 14 });
+    const tiles = k.stack(b, { direction: "HORIZONTAL", gap: 12, name: "Clock" });
+    for (const [name, value, unit] of [["Days", DEAL.days, "DAYS"], ["Hours", DEAL.hours, "HRS"], ["Minutes", DEAL.minutes, "MIN"], ["Seconds", DEAL.seconds - TICKS, "SEC"]]) {
+      const tile = k.stack(tiles, { gap: 6, align: "CENTER", name: "Tile" });
+      ledWell(k, tile, { height: 164, span: 320, step: 8, weight: 2, align: "CENTER", name: "Tile well" }, (well) => {
+        k.text(well, two(value), { style: "Clock 120", color: "led", autoWidth: true, name: `${name} figure` });
+      });
+      k.text(tile, unit, { style: "Unit 20", color: "cardMuted", name: `${name} unit` });
+    }
+    const c = chart(k, board(k, b, CHART.w, CHART.h, 1, "Chart board"), { ...CHART, was: `$${DEAL.teamWas}`, now: `$${DEAL.teamNow}`, style: "Axis 18", absolute: { x: 0, y: 0 } });
+    dashRule(k, b, "bezel", { weight: 3, dash: [10, 8] });
+    const rows = k.stack(b, { gap: 2, name: "Blotter" });
+    row(k, rows, "EVERY ANNUAL PLAN", `\u2212${DEAL.off}%`, { style: "Row 30", figureStyle: "Row strong 30", color: "onCard", figureColor: "down", name: "Discount row" });
+    row(k, rows, "{{brand.symbol}}.TEAM, 12 MONTHS", `$${DEAL.teamNow}`, { style: "Row 30", figureStyle: "Row strong 30", color: "onCard", figureColor: "led", name: "Price row" });
+    k.instance(sheet, "Link button", { Label: DEAL.link }, { name: "Button" });
+    stamp(k, c.frame, "SELL-OFF", { style: "Stamp 30", pad: [6, 18], rotation: 5, absolute: { x: c.room.x + 60, y: c.room.y - 6 } });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    playChart(k, c, { at: 500, drop: 1500, fall: 500, settle: 1200 });
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        fitListings(kit, id);
+        kit.patch(id, { padding: { top: 56, right: 64, bottom: 56, left: 64 }, itemSpacing: 30 });
+        for (const n of kit.named(id, "Tile well")) kit.patch(n, { height: 220 });
+      },
+      // Inside the vertical apps' safe area the column is 800 wide: the clock and the chart step down to fit it.
+      vertical: (kit, id) => {
+        fitListings(kit, id);
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Headline 84");
+        for (const name of ["Days", "Hours", "Minutes", "Seconds"]) for (const n of kit.named(id, `${name} figure`)) kit.restyle(n, "Clock 100");
+        reboard(kit, id, "Chart board", 0.83);
+        hide(kit, id, ["Board note"]);
+        kit.patch(id, { itemSpacing: 30 });
+        for (const n of kit.named(id, "Tile well")) kit.patch(n, { height: 190 });
+        for (const [name, x] of [["Floor ticket left", -80], ["Floor ticket right", 590]]) put(kit, id, name, x, name.endsWith("left") ? 1720 : 1770, { visible: true, width: 560, height: 700 });
+        put(kit, id, "Desk screens", 40, 1500, { visible: true, width: 1e3, height: 320 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_ticker_countdown_default
+};

package/dist/chunks/chunk-P3BNNSIF.js

@@ -0,0 +1,33 @@
+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 {
+  lunar_new_year_landing_default
+} from "./chunk-RKCIVOUR.js";
+import {
+  lunar_new_year_greeting_post_default
+} from "./chunk-XPFT6UFE.js";
+import {
+  lunar_new_year_link_preview_default
+} from "./chunk-YQJGDEY5.js";
+import {
+  lunar_new_year_envelope_reel_default
+} from "./chunk-3FTNDQNS.js";
+import {
+  lunar_new_year_header_default
+} from "./chunk-6HZ6AB4B.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/lunar-new-year.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [lunar_new_year_envelope_reel_default, lunar_new_year_landing_default, lunar_new_year_greeting_post_default, lunar_new_year_header_default, lunar_new_year_link_preview_default];
+var lunar_new_year_default = pack;
+
+export {
+  lunar_new_year_default
+};

package/dist/chunks/chunk-P3HPMYXC.js

@@ -0,0 +1,217 @@
+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 {
+  tickPath
+} from "./chunk-UDE42EDS.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  androidVariant,
+  screen,
+  statusBar
+} from "./chunk-DFO4652V.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/app/saas-store-paywall.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var STEPS = [
+  {
+    name: "Goal",
+    kicker: "Question 1 of 3",
+    title: "What brings you to Limber?",
+    note: "Pick the one that matters most. You can change it later.",
+    on: 0,
+    cta: "Continue",
+    options: [["Less back pain at my desk", "Hips, lower back, shoulders"], ["Touch my toes again", "Hamstrings and calves"], ["Move better when I run", "Ankles, hips, thoracic spine"], ["Just feel less stiff", "A bit of everything"]]
+  },
+  {
+    name: "Time",
+    kicker: "Question 2 of 3",
+    title: "How long can you give it?",
+    note: "Short and daily beats long and never. Most people pick ten.",
+    on: 1,
+    cta: "Continue",
+    options: [["5 minutes", "Three moves, done before the kettle"], ["10 minutes", "Six moves, the plan most people keep"], ["15 minutes", "Nine moves, with a long stretch"], ["20 minutes", "A full session, four days a week"]]
+  },
+  {
+    name: "Reminder",
+    kicker: "Question 3 of 3",
+    title: "When should we nudge you?",
+    note: "One quiet notification. Skip a day and nothing breaks.",
+    on: 0,
+    cta: "Build my plan",
+    options: [["With my morning coffee", "7:30, before the day starts"], ["At lunch", "12:30, away from the desk"], ["After my last call", "17:30, before you log off"], ["Before bed", "21:30, to wind down"]]
+  }
+];
+var TRIAL = [
+  ["Today", "Full access", "Your desk-back plan and all 140 sessions, free."],
+  ["Day 5", "We remind you", "An email and a notification, two days before any charge."],
+  ["Day 7", "Billed $39.99", "Only if you keep it. Cancel in two taps before then."]
+];
+var saas_store_paywall_default = defineTemplate({
+  id: "app-saas-store-paywall",
+  meta: {
+    name: "SaaS store paywall and onboarding quiz",
+    description: "The flow a subscription app earns its trial with: three goal-picker onboarding steps with a progress bar that glides on, then a paywall with a trial timeline (today, the day-5 reminder, the day-7 charge), two plan cards with a best-value badge, and the restore, terms and privacy row. A wired prototype for iPhone and Android: the chosen answer, Continue or a swipe moves on",
+    category: "app",
+    tags: ["saas", "saas store", "paywall", "onboarding", "quiz", "goal picker", "trial timeline", "subscription", "pricing", "prototype flow", "smart animate", "app", "mobile", "ios", "android"],
+    platforms: ["ios", "android", "app-store", "google-play"],
+    formats: ["screen"],
+    useCases: ["onboarding", "pricing", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  build() {
+    const k = new Kit("SaaS store paywall and onboarding quiz", preset("iphone-17"));
+    k.brand(
+      { paper: "#F1F2EC", text: "#13231C", onPaper: "#4C5A52", primary: "#1D5C46", onPrimary: "#FFFFFF", accent: "#F0C940", onAccent: "#1F1A04" },
+      { name: "Limber" }
+    );
+    k.palette({ card: "#FFFFFF", onCard: "#13231C", cardMuted: "#55635B", line: "#D5D9CE", chosen: "#E3EFE8", track: "#DCE0D5" });
+    k.textStyle("Status 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Kicker 13", { size: 13, fontWeight: 700, letterSpacing: 1, lineHeight: 18, textCase: "UPPER" });
+    k.textStyle("Question 32", { ...SERIF, size: 32, fontWeight: 700, letterSpacing: -0.9, lineHeight: 37 });
+    k.textStyle("Body 16", { size: 16, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Option 17", { size: 17, fontWeight: 700, letterSpacing: -0.2, lineHeight: 22 });
+    k.textStyle("Option note 14", { size: 14, fontWeight: 500, lineHeight: 19 });
+    k.textStyle("Button 17", { size: 17, fontWeight: 700, lineHeight: 24, textAlign: "CENTER" });
+    k.textStyle("Badge 12", { size: 12, fontWeight: 800, letterSpacing: 0.7, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Price 20", { size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 24 });
+    k.textStyle("Legal 13", { size: 13, fontWeight: 600, lineHeight: 18 });
+    k.variantSet("Option", "State", ["Off", "On"], {
+      direction: "HORIZONTAL",
+      width: 354,
+      gap: 14,
+      align: "CENTER",
+      radius: 18,
+      padding: { top: 14, right: 16, bottom: 14, left: 16 },
+      description: "One answer of a question: Off, or On when it is the chosen one.",
+      props: { Label: "Less back pain at my desk", Note: "Hips, lower back, shoulders" }
+    }, (state, id) => {
+      const on = state === "On";
+      k.patch(id, { fills: k.paint(on ? "chosen" : "card") });
+      const radio = k.stack(id, { width: 26, height: 26, radius: 13, align: "CENTER", justify: "CENTER", name: "Radio", ...on ? { fill: "primary" } : { stroke: { color: "line", width: 2, align: "INSIDE" } } });
+      if (on) k.vector(radio, 12, 10, [tickPath(12, 10)], "onPrimary", { name: "Tick", strokeWidth: 2.5 });
+      const words = k.stack(id, { width: 282, gap: 2, name: "Words" });
+      k.propText(words, "Label", { style: "Option 17", color: "onCard" });
+      k.propText(words, "Note", { style: "Option note 14", color: "cardMuted" });
+    }, (state) => state === "On" ? { stroke: { color: "primary", width: 2, align: "INSIDE" } } : { stroke: { color: "line", width: 1, align: "INSIDE" } });
+    k.component("Button", { width: 354, fill: "primary", radius: 16, align: "CENTER", padding: { top: 16, right: 20, bottom: 16, left: 20 }, props: { Label: "Continue" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 17", color: "onPrimary", align: "CENTER" });
+    });
+    const screens = [];
+    const add = (name) => {
+      const id = screens.length === 0 ? k.sheet : k.addScreen(name);
+      k.nameSheet(id, name);
+      screens.push(id);
+      screen(k, id, { gap: 18, justify: "SPACE_BETWEEN" });
+      return id;
+    };
+    STEPS.forEach((s, i) => {
+      const id = add(s.name);
+      const top2 = k.stack(id, { gap: 18, name: "Top" });
+      statusBar(k, top2, { style: "Status 15" });
+      const bar = k.stack(top2, { direction: "HORIZONTAL", height: 6, radius: 3, fill: "track", clip: true, name: "Progress" });
+      k.rect(bar, Math.round(354 * (i + 1) / 4), 6, "primary", { radius: 3, name: "Progress fill" });
+      const ask = k.stack(top2, { gap: 10, padding: { top: 10, right: 0, bottom: 4, left: 0 }, name: "Question" });
+      k.text(ask, s.kicker, { style: "Kicker 13", color: "onPaper", name: "Kicker" });
+      k.text(ask, s.title, { style: "Question 32", color: "text", name: "Title" });
+      k.text(ask, s.note, { style: "Body 16", color: "onPaper", name: "Note" });
+      const list = k.stack(top2, { gap: 10, name: "Answers" });
+      s.options.forEach(([label, note], j) => k.instance(list, j === s.on ? "Option/On" : "Option/Off", { Label: label, Note: note }, { name: j === s.on ? "Chosen answer" : "Answer" }));
+      const foot2 = k.stack(id, { gap: 14, align: "CENTER", name: "Foot" });
+      const week = k.stack(foot2, { direction: "HORIZONTAL", gap: 8, align: "MAX", fill: "card", radius: 18, padding: { top: 14, right: 16, bottom: 14, left: 16 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Plan preview" });
+      [5, 10, 10, 5, 10, 20, 10].forEach((m, d) => {
+        const col = k.stack(week, { width: 39, gap: 6, align: "CENTER", name: "Day" });
+        k.rect(col, 39, 8 + m * (i === 0 ? 1 : i === 1 ? 2 : 2.6), d <= i * 3 ? "primary" : "track", { radius: 8, name: "Day bar" });
+        k.text(col, "MTWTFSS"[d], { style: "Option note 14", color: "cardMuted", align: "CENTER", name: "Day letter" });
+      });
+      k.text(foot2, ["Your week takes shape as you answer.", "Ten minutes, seven days: 70 minutes a week.", "Plan ready. One tap to see it."][i], { style: "Option note 14", color: "onPaper", align: "CENTER", name: "Foot note" });
+      k.instance(foot2, "Button", { Label: s.cta }, { name: "Next" });
+    });
+    const pay = add("Paywall");
+    const top = k.stack(pay, { gap: 14, name: "Top" });
+    statusBar(k, top, { style: "Status 15" });
+    const head = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Head" });
+    k.text(head, "Your plan is ready", { style: "Kicker 13", color: "onPaper", autoWidth: true, name: "Kicker" });
+    const close = k.stack(head, { width: 30, height: 30, radius: 15, fill: "track", align: "CENTER", justify: "CENTER", name: "Close" });
+    k.vector(close, 11, 11, [{ closed: false, points: [{ x: 0, y: 0 }, { x: 11, y: 11 }] }, { closed: false, points: [{ x: 11, y: 0 }, { x: 0, y: 11 }] }], "text", { name: "Close mark", strokeWidth: 2 });
+    k.text(top, "Ten minutes a day for a back that stops complaining.", { style: "Question 32", color: "text", name: "Title" });
+    const trial = k.stack(top, { fill: "card", radius: 20, padding: { top: 16, right: 16, bottom: 16, left: 16 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Trial timeline" });
+    TRIAL.forEach(([when, what, note], i) => {
+      const row = k.stack(trial, { direction: "HORIZONTAL", gap: 12, name: "Trial step" });
+      const rail = k.stack(row, { width: 26, align: "CENTER", name: "Rail" });
+      const dot = k.stack(rail, { width: 26, height: 26, radius: 13, fill: i === 0 ? "primary" : i === 1 ? "accent" : "track", align: "CENTER", justify: "CENTER", name: "Trial dot" });
+      if (i === 0) k.vector(dot, 12, 10, [tickPath(12, 10)], "onPrimary", { name: "Tick", strokeWidth: 2.5 });
+      else k.ellipse(dot, 8, i === 1 ? "onAccent" : "onCard", { name: "Dot mark" });
+      if (i < TRIAL.length - 1) k.rect(rail, 2, 40, "line", { name: "Rail line" });
+      const words = k.stack(row, { width: 284, gap: 1, padding: { top: 2, right: 0, bottom: i < TRIAL.length - 1 ? 12 : 0, left: 0 }, name: "Trial words" });
+      k.text(words, `${when} \xB7 ${what}`, { style: "Option 17", color: "onCard", name: "Trial when" });
+      k.text(words, note, { style: "Option note 14", color: "cardMuted", name: "Trial note" });
+    });
+    const plans = k.stack(top, { gap: 10, name: "Plans" });
+    for (const [i, [name, detail, price]] of [["Yearly", "7 days free, then $3.33/mo", "$39.99"], ["Monthly", "No trial, cancel any time", "$7.99"]].entries()) {
+      const on = i === 0;
+      const card = k.stack(plans, { direction: "HORIZONTAL", gap: 12, align: "CENTER", fill: on ? "chosen" : "card", radius: 18, padding: { top: 14, right: 16, bottom: 14, left: 16 }, stroke: { color: on ? "primary" : "line", width: on ? 2 : 1, align: "INSIDE" }, name: `${name} plan` });
+      const radio = k.stack(card, { width: 24, height: 24, radius: 12, align: "CENTER", justify: "CENTER", name: "Radio", ...on ? { fill: "primary" } : { stroke: { color: "line", width: 2, align: "INSIDE" } } });
+      if (on) k.ellipse(radio, 9, "onPrimary", { name: "Radio dot" });
+      const words = k.stack(card, { width: 196, gap: 1, name: "Plan words" });
+      k.text(words, name, { style: "Option 17", color: "onCard", name: "Plan name" });
+      k.text(words, detail, { style: "Option note 14", color: "cardMuted", name: "Plan detail" });
+      k.text(card, price, { style: "Price 20", color: "onCard", align: "RIGHT", name: "Plan price" });
+      if (on) {
+        const badge = k.stack(card, { direction: "HORIZONTAL", width: "HUG", fill: "accent", radius: 9, padding: { top: 3, right: 9, bottom: 3, left: 9 }, name: "Best value", absolute: { x: 214, y: -11 } });
+        k.text(badge, "Best value", { style: "Badge 12", color: "onAccent", autoWidth: true, name: "Badge text" });
+      }
+    }
+    const incl = k.stack(top, { gap: 8, padding: { top: 6, right: 4, bottom: 0, left: 4 }, name: "Included" });
+    for (const line of ["All 140 sessions, from day one", "Your plan adjusts every week", "Cancel in two taps, any time"]) {
+      const row = k.stack(incl, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Included row" });
+      k.vector(row, 14, 11, [tickPath(14, 11)], "primary", { name: "Tick", strokeWidth: 2.5 });
+      k.text(row, line, { style: "Option note 14", color: "text", name: "Included words" });
+    }
+    const foot = k.stack(pay, { gap: 12, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Button", { Label: "Start my 7 days free" }, { name: "Start trial" });
+    const legal = k.stack(foot, { direction: "HORIZONTAL", width: "HUG", gap: 18, name: "Legal row" });
+    for (const l of ["Restore purchase", "Terms", "Privacy"]) k.text(legal, l, { style: "Legal 13", color: "onPaper", autoWidth: true, name: l });
+    const names = [...STEPS.map((s) => s.name), "Paywall"];
+    const androids = screens.map((id, i) => k.variants(id, [androidVariant(names[i])])[0]);
+    const iphone = k.node(screens[0]);
+    androids.forEach((id, i) => k.patch(id, { x: k.node(screens[i]).x, y: iphone.height + 200 }));
+    for (const set of [screens, androids]) {
+      set.forEach((id, i) => {
+        const next = set[i + 1];
+        if (!next) {
+          for (const c of k.named(id, "Close")) k.link(c, null, "DISSOLVE", { navigation: "BACK" });
+          return;
+        }
+        const how = i === set.length - 2 ? "SLIDE_FROM_BOTTOM" : "SMART_ANIMATE";
+        for (const from of [...k.named(id, "Next"), ...k.named(id, "Chosen answer")]) k.link(from, next, how, { duration: 450 });
+        k.link(id, next, how, { duration: 450, trigger: "ON_DRAG" });
+      });
+    }
+    k.flowStart(screens[0], "Quiz to paywall (iPhone)");
+    k.flowStart(androids[0], "Quiz to paywall (Android)");
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_paywall_default
+};