@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-FJ65KAV5.js

@@ -0,0 +1,283 @@
+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 {
+  PANES,
+  VITRINE,
+  aurora,
+  body,
+  chip,
+  code,
+  display,
+  figure,
+  glassBrand,
+  glassFx,
+  glassNav,
+  glow,
+  label,
+  pane,
+  sheen,
+  webButtons
+} from "./chunk-CMA6K4JA.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-G5CURQ6H.js";
+import {
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/style-glass-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Glass SaaS pricing page";
+var DURATION = 6e3;
+var usd = (n) => `$${n.toLocaleString("en-US")}`;
+var PLANS = [
+  { name: "Sandbox", pitch: "One agent, every pane, for as long as you like.", month: 0, year: 0, cta: "Start free", lines: ["1 agent", "50,000 calls a month", "7-day audit log"] },
+  { name: "Team", pitch: "For a team putting its first agents in front of customers.", month: VITRINE.team, year: VITRINE.teamYear, cta: "Start a 14-day trial", featured: true, lines: ["10 agents", "5 million calls a month", "Approvals in Slack", "30-day audit log"] },
+  { name: "Scale", pitch: "For a company with agents in every department.", month: VITRINE.scale, year: VITRINE.scaleYear, cta: "Start a 14-day trial", lines: ["Unlimited agents", "50 million calls a month", "SSO and SCIM", "One-year audit log"] },
+  { name: "Enterprise", pitch: "For banks, insurers and health systems.", custom: "Talk to us", cta: "Book a call", lines: ["Self-hosted or in your VPC", "Your own retention", "SOC 2 report and DPA"] }
+];
+var COMPARE = [
+  ["Agents", "1", "10", "Unlimited", "Unlimited"],
+  ["Calls a month", "50,000", "5 million", "50 million", "Custom"],
+  ["Identity, Scope, Spend and Data panes", "Yes", "Yes", "Yes", "Yes"],
+  ["Added latency at p50", "4 ms", "4 ms", "4 ms", "4 ms"],
+  ["Approvals in Slack and Teams", "No", "Yes", "Yes", "Yes"],
+  ["Audit log kept", "7 days", "30 days", "1 year", "Your choice"],
+  ["SSO and SCIM", "No", "No", "Yes", "Yes"],
+  ["Deploy in your own VPC", "No", "No", "Peering", "Yes"]
+];
+var FAQ = [
+  ["What counts as a call?", "One tool call an agent makes that Vitrine checks. Retries of the same call within a second count once."],
+  ["What happens past my allowance?", "Nothing stops. Calls over it are $0.04 per thousand, and we email you at 80% so it is never a surprise."],
+  ["Does Vitrine see my data?", "It sees the call: the tool, its arguments and the verdict. Data panes can redact fields before anything is logged."],
+  ["Can I change plans later?", "Yes, at any time. Upgrades are prorated to the day; annual plans can move to a bigger plan mid-year."]
+];
+var TYPE = {
+  "Nav 15": body(15, 500),
+  "Brand 20": display(20),
+  "Button 16": display(16),
+  "Label 13": label(13),
+  "Ui 15": body(15, 500),
+  "Ui 15 on": display(15),
+  "Mono 13": code(13),
+  "Display 56": display(56, { center: true, lead: 1.06 }),
+  "Display 40": display(40, { center: true, lead: 1.1 }),
+  "Display 32": display(32, { center: true, lead: 1.12 }),
+  "Lead 19": { ...body(19), textAlign: "CENTER" },
+  "Lead 17": { ...body(17), textAlign: "CENTER" },
+  "Plan 24": display(24),
+  "Body 15": body(15),
+  "Small 13": body(13),
+  "Price 48": figure(48),
+  "Custom 40": display(40),
+  "Price 40": figure(40),
+  "Section 32": display(32, { lead: 1.15 }),
+  "Section 26": display(26, { lead: 1.2 }),
+  "Q 17": display(17),
+  "Close 48": display(48, { center: true }),
+  "Close 34": display(34, { center: true })
+};
+var STEPS = {
+  "Display 56": { laptop: "Display 56", tablet: "Display 40", mobile: "Display 32" },
+  "Lead 19": { mobile: "Lead 17" },
+  "Price 48": { mobile: "Price 40" },
+  "Section 32": { mobile: "Section 26" },
+  "Close 48": { mobile: "Close 34" }
+};
+var cues = [
+  { layer: "Header", preset: "blur-in", at: 0, params: { duration: 900, amount: 24 } },
+  { layer: "Plan", preset: "rise-in", at: 300, stagger: { delay: 160, order: "selection" }, params: { duration: 1100, distance: 30 } },
+  { layer: "Compare row", preset: "fade-in", at: 1200, stagger: { delay: 90, order: "selection" }, params: { duration: 700 } }
+];
+var style_glass_pricing_default = defineTemplate({
+  id: "web-saas-style-glass-pricing",
+  meta: {
+    name: NAME,
+    description: "A pricing page in the glass look whose monthly / annual switch works in present mode: page variables flip every price at once while the knob glides. Four plans on panes of smoked glass (the featured one lit amber along its rim), a comparison table, questions and answers, a closing call and a footer, over a slowly moving aurora in teal, ocean blue and amber. Desktop to phone",
+    category: "web",
+    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison", "faq", "saas", "glass", "glassmorphism", "aurora", "ai", "security", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    glassBrand(k);
+    const s = typeScale(k, { ...TYPE });
+    webButtons(k, { style: s("Button 16"), pad: [14, 24] });
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const annual = k.variable("Billing", "annual", "BOOLEAN", false);
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Annual"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 14,
+      align: "CENTER",
+      padding: { top: 8, right: 18, bottom: 8, left: 18 },
+      radius: 999,
+      fill: k.tint("glass", 0.7),
+      description: "Monthly or annual billing: click to switch, and the knob glides across. On the pricing page the click also flips the billing variables every price is bound to.",
+      props: { Left: "Monthly", Right: "Annual" }
+    }, (state, id) => {
+      k.propText(id, "Left", { style: s(state === "Monthly" ? "Ui 15 on" : "Ui 15"), color: state === "Monthly" ? "onGlass" : "glassMuted", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 56, height: 30, radius: 15, padding: 3, align: "CENTER", justify: state === "Annual" ? "MAX" : "MIN", fill: "primary", name: "Track" });
+      k.ellipse(track, 24, "onPrimary", { name: "Knob" });
+      k.propText(id, "Right", { style: s(state === "Annual" ? "Ui 15 on" : "Ui 15"), color: state === "Annual" ? "onGlass" : "glassMuted", autoWidth: true });
+    });
+    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Annual", 360, "EASE_IN_OUT");
+    k.changeTo("Billing switch/Annual", "ON_CLICK", "Billing switch/Monthly", 360, "EASE_IN_OUT");
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 28, paper: "deep" });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    aurora(k, sheet, { duration: DURATION, h: 1100, flip: true, name: "Hero aurora" });
+    glassNav(k, sheet, { links: ["Product", "Pricing", "Customers", "Docs", "Sign in"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 20") });
+    const head = pane(k, sheet, { gap: 18, align: "CENTER", padding: { top: 44, right: 64, bottom: 44, left: 64 }, radius: 36, name: "Header" });
+    k.text(head, "PRICING", { style: s("Label 13"), color: "glassMuted", autoWidth: true, name: "Eyebrow" });
+    k.text(head, "Start with one agent.\nPay as you add more.", { style: s("Display 56"), color: "onGlass", name: "Headline" });
+    k.text(head, "Every plan has all four panes and adds about 4 ms to a call. Pay monthly, or annually and keep two months.", { style: s("Lead 19"), color: "glassMuted", width: 720, name: "Lead" });
+    const sw = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Switch row" });
+    const toggle = k.instance(sw, "Billing switch", { Left: "Monthly", Right: "Annual" }, { name: "Billing toggle" });
+    k.setVariable(toggle, monthly, { toggle: true });
+    k.setVariable(toggle, annual, { toggle: true });
+    chip(k, sw, "Two months free", { style: s("Mono 13"), dot: "pass", name: "Saving", pad: [7, 14] });
+    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, name: "Plans" });
+    for (const p of PLANS) {
+      const card = pane(k, plans, { gap: 18, padding: 28, radius: 28, alpha: p.featured ? 0.72 : 0.64, lift: p.featured ? 1.4 : 1, name: "Plan", ...p.featured ? { stroke: { color: "stop", width: 1.5, align: "INSIDE" } } : {} });
+      if (p.featured) glow(k, card, { x: 200, y: 560, w: 420, h: 260, role: "amber", alpha: 0.22, name: "Plan glow" });
+      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan head" });
+      k.text(top, p.name, { style: s("Plan 24"), color: "onGlass", autoWidth: true, name: "Plan name" });
+      if (p.featured) chip(k, top, "Most teams", { style: s("Mono 13"), ink: "stop", name: "Popular", pad: [5, 12] });
+      k.text(card, p.pitch, { style: s("Body 15"), color: "glassMuted", name: "Pitch" });
+      const price = k.stack(card, { name: "Price" });
+      if (p.custom) {
+        const b = k.stack(price, { gap: 4, name: "Monthly price" });
+        k.text(b, p.custom, { style: s("Custom 40"), color: "onGlass", name: "Amount" });
+        k.text(b, "A price for your volume and your deployment.", { style: s("Small 13"), color: "glassMuted", name: "Billed" });
+      } else {
+        const block = (which) => {
+          const b = k.stack(price, { gap: 4, fill: k.tint("glass", 1e-3), name: `${which} price` });
+          const n = which === "Monthly" ? p.month : p.year;
+          k.text(b, usd(n), { style: s("Price 48"), color: "onGlass", name: "Amount" });
+          k.text(b, n === 0 ? "Free, monthly or annually." : which === "Monthly" ? "a month, billed monthly." : `a month, billed ${usd(n * 12)} a year.`, { style: s("Small 13"), color: "glassMuted", name: "Billed" });
+          return b;
+        };
+        k.bindVariable(block("Monthly"), "visible", monthly);
+        k.bindVariable(block("Annual"), "visible", annual);
+      }
+      k.instance(card, p.featured ? "Button" : "Button glass", { Label: p.cta }, { name: "Plan button" });
+      k.rect(card, "FILL", 1, k.tint("rim", 0.14), { name: "Plan rule" });
+      const list = k.stack(card, { gap: 10, name: "Plan lines" });
+      for (const l of p.lines) {
+        const r = k.stack(list, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Plan line" });
+        k.ellipse(r, 8, p.featured ? "stop" : "pass", { name: "Line dot" });
+        k.text(r, l, { style: s("Body 15"), color: "onGlass", width: "FILL", name: "Line words" });
+      }
+      if (p.featured) sheen(k, card, 300, 640, [1600, 4600]);
+    }
+    const cmp = pane(k, sheet, { gap: 8, padding: 40, radius: 32, name: "Compare" });
+    glow(k, cmp, { x: 900, y: 120, w: 800, h: 400, role: "teal", alpha: 0.3, name: "Compare glow" });
+    k.text(cmp, "Every plan, side by side", { style: s("Section 32"), color: "onGlass", name: "Compare title" });
+    const headRow = k.stack(cmp, { direction: "HORIZONTAL", gap: 16, padding: { top: 18, right: 0, bottom: 10, left: 0 }, name: "Compare head" });
+    k.stack(headRow, { width: 360, height: 1, name: "Compare corner" });
+    for (const p of PLANS) k.text(headRow, p.name.toUpperCase(), { style: s("Label 13"), color: p.featured ? "stop" : "glassMuted", width: "FILL", name: "Compare plan" });
+    for (const [what, ...cells] of COMPARE) {
+      k.rect(cmp, "FILL", 1, k.tint("rim", 0.1), { name: "Compare rule" });
+      const r = k.stack(cmp, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Compare row" });
+      k.text(r, what, { style: s("Ui 15"), color: "onGlass", width: 360, name: "Compare what" });
+      for (const c of cells) k.text(r, c, { style: s("Mono 13"), color: c === "No" ? "glassMuted" : "onGlass", width: "FILL", name: "Compare cell" });
+    }
+    k.text(cmp, `Panes in every plan: ${PANES.join(", ")}.`, { style: s("Small 13"), color: "glassMuted", name: "Compare note" });
+    const faq = pane(k, sheet, { gap: 28, padding: 40, radius: 32, name: "FAQ" });
+    k.text(faq, "Questions people ask", { style: s("Section 32"), color: "onGlass", name: "FAQ title" });
+    const qs = k.stack(faq, { direction: "HORIZONTAL", gap: 32, wrap: true, name: "FAQ list" });
+    for (const [q, a] of FAQ) {
+      const item = k.stack(qs, { gap: 8, width: Math.floor((CONTENT.desktop - 80 - 32) / 2), name: "Question" });
+      k.text(item, q, { style: s("Q 17"), color: "onGlass", name: "Q" });
+      k.text(item, a, { style: s("Body 15"), color: "glassMuted", name: "A" });
+    }
+    const close = pane(k, sheet, { gap: 20, padding: 48, radius: 36, align: "CENTER", name: "Close" });
+    k.text(close, "Try it on one agent today.", { style: s("Close 48"), color: "onGlass", name: "Close title" });
+    k.instance(close, "Button", { Label: "Start free" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: VITRINE.pitch,
+      legal: "Prices in US dollars, before tax. Annual plans are billed once, up front. \xA9 2026 {{brand.name}} Inc.",
+      columns: [["Product", ["Panes", "Approvals", "Audit log", "Changelog"]], ["Company", ["Customers", "Pricing", "Security"]], ["Developers", ["Docs", "API", "Status"]]],
+      brandStyle: s("Brand 20"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 13"),
+      ruleColor: "glassMuted",
+      ink: "onGlass",
+      quiet: "glassMuted",
+      box: { fill: k.tint("glass", 0.64), radius: 32, padding: 40, effects: glassFx(k) }
+    });
+    k.cues(sheet, cues);
+    const copies = respond(k, sheet, s, {
+      stack: ["FAQ list", "Footer columns"],
+      stackMobile: ["Switch row", "Plans"],
+      restyle: { ...STEPS },
+      hide: { mobile: ["Nav links"], tablet: [] },
+      gap: { tablet: 56, mobile: 40 },
+      tweak: (kit, id, size) => {
+        const narrow = size === "tablet" || size === "mobile";
+        for (const n of [...kit.named(id, "Headline"), ...kit.named(id, "Lead")]) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        if (size === "laptop") for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 24, right: 20, bottom: 24, left: 20 } });
+        if (size === "laptop") for (const n of kit.named(id, "Question")) kit.patch(n, { width: Math.floor((CONTENT.laptop - 80 - 32) / 2) });
+        if (size === "tablet") {
+          for (const n of kit.named(id, "Plans")) kit.patch(n, { layoutWrap: "WRAP", counterAxisSpacing: 20 });
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: Math.floor((CONTENT.tablet - 20) / 2) });
+        }
+        if (narrow) {
+          for (const n of kit.named(id, "Question")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Compare what")) kit.patch(n, { width: size === "mobile" ? 110 : 220 });
+          for (const n of kit.named(id, "Compare corner")) kit.patch(n, { width: size === "mobile" ? 110 : 220 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Docs", "Sign in"], 20);
+        if (size === "mobile") {
+          for (const name of ["Header", "Compare", "FAQ", "Close"]) for (const n of kit.named(id, name)) kit.patch(n, { padding: { top: 28, right: 20, bottom: 28, left: 20 } });
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 24, right: 20, bottom: 24, left: 20 } });
+          for (const r of [...kit.named(id, "Compare row"), ...kit.named(id, "Compare head")]) {
+            const cells = kit.node(r).childIds;
+            for (const i of [1, 4]) if (cells[i]) kit.patch(cells[i], { visible: false });
+          }
+        }
+      }
+    });
+    for (const id of [sheet, ...copies]) for (const a of k.named(id, "Hero aurora")) k.patch(a, { x: 0, y: 0, width: k.node(id).width });
+    k.finish();
+    const prices = [...new Set(k.doc.pages.flatMap((p) => k.named(p, "Price")))].filter((id) => k.node(id).childIds.length > 1);
+    for (const price of prices) k.patch(k.node(price).childIds[1], { visible: false });
+    k.finish();
+    for (const price of prices) {
+      const [m, y] = k.node(price).childIds;
+      k.patch(y, { x: k.node(m).x, y: k.node(m).y });
+    }
+    return k.doc;
+  }
+});
+
+export {
+  style_glass_pricing_default
+};

package/dist/chunks/chunk-FLISMK7J.js

@@ -0,0 +1,153 @@
+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,
+  backSlip,
+  barcode,
+  highlight,
+  line,
+  paperShadow,
+  receipt,
+  tearLine,
+  tillBody,
+  tillBrand,
+  tillDisplay,
+  tillSlot,
+  two
+} from "./chunk-DS3FSEVE.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/black-friday-deal-drop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var { beat, duration: DURATION, audio: music } = bed("tension", 24);
+var cues = [
+  { layer: "Receipt", preset: "drop-in", at: beat(0), params: { duration: 450 } },
+  { layer: "Was row", preset: "fade-in", at: beat(1), params: { duration: 200 } },
+  { layer: "Total", preset: "pop-in", at: beat(2), params: { duration: 400 } },
+  { layer: "Was row strike", preset: "wipe-in", at: beat(4), params: { duration: 300 } },
+  { layer: "Discount row", preset: "rise-in", at: beat(4), params: { duration: 350 } },
+  { layer: "Total", preset: "pulse", at: beat(6), params: { duration: 500, amount: 0.05 } },
+  { layer: "Saving", preset: "wipe-in", at: beat(7), params: { duration: 450 } },
+  { layer: "Countdown", preset: "rise-in", at: beat(10), params: { duration: 350 } },
+  { layer: "Button", preset: "pop-in", at: beat(12), params: { duration: 450 } },
+  { layer: "Button", preset: "pulse", at: beat(16), params: { duration: 500, amount: 0.06 } },
+  { layer: "Total", preset: "pulse", at: beat(20), params: { duration: 500, amount: 0.05 } },
+  { layer: "Button", preset: "pulse", at: beat(22), params: { duration: 500, amount: 0.06 } }
+];
+var counts = [
+  // The price drops over two beats and lands on the third.
+  { layer: "Total figure", at: beat(4), duration: beat(2), counter: { from: DEAL.teamWas, to: DEAL.teamNow, prefix: "$" } },
+  { layer: "Discount row amount", at: beat(4), duration: beat(2), counter: { from: 0, to: DEAL.teamWas - DEAL.teamNow, prefix: "\u2212$" } },
+  // The sale's clock: a second off every two beats.
+  { layer: "Countdown amount", at: beat(10), duration: 6e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - 6, prefix: `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:` } }
+];
+var swaps = [
+  { layer: "Caption", words: ["Our Black Friday receipt.", "Half off annual plans.", "Ends Monday at midnight.", "Keep $294. Link below."], at: 0, hold: 2080, stagger: 60, in: 300, out: 250, unit: "word", rise: 30 }
+];
+var black_friday_deal_drop_default = defineTemplate({
+  id: "motion-black-friday-deal-drop",
+  meta: {
+    name: "Black Friday receipt deal drop",
+    description: "A 12-second vertical sale video drawn as a till receipt: the annual price is struck through, the discount prints as its own line and the total counts down to half on the beat, then a highlighter marks the saving and the sale clock ticks. Music, burned-in captions, 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "sale", "saas", "receipt", "price drop", "counter", "countdown", "audio", "music", "captions", "reel"],
+    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("Black Friday receipt deal drop", preset("ig-story"));
+    k.quantizeGeometry = true;
+    tillBrand(k, { name: DEAL.product, site: DEAL.site }, ["primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Shop 48", { ...mono, size: 48, fontWeight: 800, letterSpacing: -1, lineHeight: 56 });
+    k.textStyle("Meta 26", { ...mono, size: 26, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("Line 32", { ...mono, size: 32, fontWeight: 600, lineHeight: 42, fontFeatures: { tnum: 1 } });
+    k.textStyle("Total 168", { ...mono, size: 168, fontWeight: 800, letterSpacing: -6, lineHeight: 184, fontFeatures: { tnum: 1 } });
+    k.textStyle("Mark 32", { ...mono, size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Caption 44", { size: 44, fontWeight: 800, letterSpacing: -0.8, lineHeight: 52, textAlign: "CENTER" });
+    k.textStyle("Button 38", { size: 38, fontWeight: 800, lineHeight: 46 });
+    pill(k, "Claim button", { fill: "accent", ink: "onAccent", style: "Button 38", label: `Claim it at ${DEAL.link}`, pad: [24, 48] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 24, verticalPadding(), "primary", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
+    backSlip(k, sheet, { x: 20, y: 470, width: 700, height: 1180, rotation: -7, name: "Back slip left" });
+    backSlip(k, sheet, { x: 400, y: 640, width: 660, height: 1400, rotation: 6, name: "Back slip right" });
+    const till = k.stack(sheet, { width: 800, padding: { top: 30, right: 0, bottom: 0, left: 0 }, name: "Till" });
+    const plastic = tillBody(k, till, { width: 880, height: 420, absolute: { x: -40, y: -390 }, figure: "-50", display: 150 });
+    k.patch(tillDisplay(k, plastic, { figure: "-50", percent: true, height: 64, absolute: { x: 377, y: 322 }, name: "Till display small" }), { visible: false });
+    const { body } = receipt(k, till, { pad: { top: 44, right: 44, bottom: 36, left: 44 }, gap: 18 });
+    tillSlot(k, till, { width: 880, height: 60, absolute: { x: -40, y: 0 } });
+    const head = k.stack(body, { gap: 2, name: "Header" });
+    k.text(head, "{{brand.name}}", { style: "Shop 48", color: "onCard", name: "Shop" });
+    k.text(head, "BLACK FRIDAY RECEIPT \xB7 NO. 1127", { style: "Meta 26", color: "cardMuted", name: "Receipt number" });
+    tearLine(k, body);
+    line(k, body, "TEAM PLAN, 12 MONTHS", `$${DEAL.teamWas}`, { style: "Line 32", name: "Was row", struck: true });
+    line(k, body, "BLACK FRIDAY, 50% OFF", `\u2212$${DEAL.teamWas - DEAL.teamNow}`, { style: "Line 32", name: "Discount row" });
+    tearLine(k, body);
+    const total = k.stack(body, { name: "Total" });
+    k.text(total, "YOU PAY, FOR THE YEAR", { style: "Meta 26", color: "cardMuted", name: "Total label" });
+    k.text(total, `$${DEAL.teamNow}`, { style: "Total 168", color: "onCard", name: "Total figure" });
+    highlight(k, body, `YOU KEEP $${DEAL.teamWas - DEAL.teamNow} THIS YEAR`, { style: "Mark 32", name: "Saving", textName: "Saving words" });
+    line(k, body, "SALE ENDS IN", `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:${DEAL.seconds - 6}`, { style: "Line 32", name: "Countdown" });
+    const foot = k.stack(body, { gap: 14, name: "Foot" });
+    tearLine(k, foot);
+    line(k, foot, `LIFETIME SOLO, ${DEAL.seats} SEATS`, `$${DEAL.lifetime}`, { style: "Line 32", name: "Lifetime row" });
+    barcode(k, foot, { width: 712, height: 56 });
+    k.text(foot, `THANK YOU \xB7 ENDS ${DEAL.ends.toUpperCase()}`, { style: "Meta 26", color: "cardMuted", name: "Foot note" });
+    const tape = k.stack(sheet, { width: 800, fill: "card", radius: 8, padding: { top: 14, right: 24, bottom: 14, left: 24 }, effects: paperShadow(k, 0.6), name: "Caption tape" });
+    k.text(tape, "Our Black Friday receipt.", { style: "Caption 44", color: "onCard", name: "Caption" });
+    k.instance(sheet, "Claim button", { Label: `Claim it at ${DEAL.link}` }, { name: "Button" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 48, portrait: 80 }, {
+      // The square has no room for the slip's foot: the receipt ends at the sale clock.
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 20, counterAxisSpacing: 20, padding: { top: 76, right: 48, bottom: 40, left: 48 } });
+        for (const n of kit.named(id, "Back slip left")) kit.patch(n, { x: -30, y: 250, height: 900 });
+        for (const n of kit.named(id, "Back slip right")) kit.patch(n, { x: 470, y: 330, height: 900 });
+        for (const name of ["Foot", "Till display"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
+        for (const n of kit.named(id, "Till display small")) kit.patch(n, { visible: true });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 20, counterAxisSpacing: 20, padding: { top: 96, right: 80, bottom: 48, left: 80 } });
+        for (const n of kit.named(id, "Back slip left")) kit.patch(n, { x: -20, y: 300, height: 1100 });
+        for (const n of kit.named(id, "Back slip right")) kit.patch(n, { x: 440, y: 420, height: 1100 });
+        for (const n of kit.named(id, "Till display")) kit.patch(n, { visible: false });
+        for (const n of kit.named(id, "Till display small")) kit.patch(n, { visible: true });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_deal_drop_default
+};

package/dist/chunks/chunk-FNCSG23N.js

@@ -0,0 +1,122 @@
+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 {
+  CAPS,
+  decoBrand,
+  divider,
+  marquee,
+  stage
+} from "./chunk-TKMCPNQY.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  place
+} from "./chunk-QLV6445V.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/art-deco-premiere-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var cues = [
+  { layer: "Marquee", preset: "drop-in", at: 0, params: { duration: 600 } },
+  { layer: "Headline", preset: "blur-in", at: 700, params: { duration: 900, amount: 30 } },
+  { layer: "Headline rule", preset: "wipe-in", at: 1300, params: { duration: 700 } },
+  { layer: "Sub", preset: "rise-in", at: 1500, params: { duration: 700 } },
+  { layer: "Chip", preset: "pop-in", at: 2300, params: { duration: 420 } },
+  { layer: "Site", preset: "fade-in", at: 2600, params: { duration: 500 } },
+  { layer: "Marquee", preset: "pulse", at: 3600, params: { duration: 800, amount: 0.03 } },
+  outro(["Marquee", "Headline", "Headline rule", "Sub", "Chip", "Site"], 6300)
+];
+var art_deco_premiere_post_default = defineTemplate({
+  id: "motion-art-deco-premiere-post",
+  meta: {
+    name: "Deco feature premiere post (animated)",
+    description: "A feature announcement as a picture-house premiere: a marquee sign drops in with its bulbs chasing round NOW PLAYING, a brass sunburst opens like a fan behind a skyline of setback towers, and the feature\u2019s name comes into focus across the sky \u2014 a seven-second art deco loop, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "art deco", "deco", "marquee", "now playing", "premiere", "sunburst", "skyscraper", "brass", "emerald", "feature", "changelog", "saas", "finance", "post", "loop"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "changelog", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Deco feature premiere post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    decoBrand(k, { feature: "Heirloom" });
+    k.textStyle("Sign 44", { ...CAPS, size: 44, fontWeight: 800, letterSpacing: 10, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Sign small 18", { ...CAPS, size: 18, fontWeight: 700, letterSpacing: 5, lineHeight: 24, textAlign: "CENTER" });
+    k.textStyle("Display 150", { ...CAPS, size: 150, fontWeight: 200, letterSpacing: 8, lineHeight: 156, textAlign: "CENTER" });
+    k.textStyle("Sub 38", { ...SERIF, size: 38, fontStyle: "italic", fontWeight: 500, lineHeight: 48, textAlign: "CENTER" });
+    k.textStyle("Chip 24", { ...CAPS, size: 24, fontWeight: 700, letterSpacing: 2.5, lineHeight: 30 });
+    k.textStyle("Site 24", { size: 24, fontWeight: 600, letterSpacing: 1, lineHeight: 30 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 24", label: "On every plan from 14 October", pad: [18, 28], radius: 2 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 64, "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    stage(k, sheet, 1080, 2400, {
+      base: 1920,
+      hero: 410,
+      span: 800,
+      reach: 1500,
+      loopMs: DURATION,
+      blades: 20,
+      footlights: 40,
+      rims: [1.07, 1.12],
+      grain: false,
+      open: { at: 200, duration: 1400 },
+      rise: { at: 500, gap: 220 },
+      at: { x: 0, y: -840 }
+    });
+    const sign = marquee(k, sheet, 700, 150, { bulb: 13, loopMs: DURATION, cycles: 7 });
+    k.text(sign.plate, "{{brand.name}} presents", { style: "Sign small 18", color: "onCard", name: "Presents" });
+    k.text(sign.plate, "Now playing", { style: "Sign 44", color: "onCard", name: "Now playing" });
+    const mid = k.stack(sheet, { gap: 20, align: "CENTER", padding: { top: 0, right: 0, bottom: 250, left: 0 }, name: "Middle" });
+    k.text(mid, "{{brand.feature}}", { style: "Display 150", color: "text", name: "Headline" });
+    divider(k, mid, { width: 360, name: "Headline rule" });
+    k.text(mid, "Who inherits what, drawn as one family tree: every heir, every asset, every condition.", { style: "Sub 38", color: "text", width: 780, name: "Sub" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 6, align: "CENTER", justify: "CENTER", name: "Foot" });
+    k.instance(foot, "Chip", { Label: "On every plan from 14 October" }, { name: "Chip" });
+    const stub = k.stack(foot, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 2, padding: { top: 18, right: 24, bottom: 18, left: 24 }, name: "Site" });
+    k.text(stub, "{{brand.site}}", { style: "Site 24", color: "onCard", autoWidth: true, name: "Site words" });
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        place(kit, id, "Stage", 0, -570, 1);
+        for (const n of kit.named(id, "Middle")) kit.patch(n, { padding: { top: 0, right: 0, bottom: 300, left: 0 } });
+      },
+      vertical: (kit, id) => {
+        place(kit, id, "Stage", -162, -1056, 1.3);
+        for (const n of kit.named(id, "Middle")) kit.patch(n, { padding: { top: 0, right: 0, bottom: 420, left: 0 } });
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 6 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  art_deco_premiere_post_default
+};