@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-NN42FHRP.js

@@ -1,276 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  arrowPath,
-  barPaths,
-  faceSlot,
-  tickPath
-} from "./chunk-Y6DFTJFC.js";
-import {
-  MONO
-} from "./chunk-5OTEBTMU.js";
-import {
-  shadow
-} from "./chunk-PCZTQVV6.js";
-import {
-  logoBadge,
-  pill
-} from "./chunk-IL2F4BKM.js";
-import {
-  box,
-  rng
-} from "./chunk-YKX2GS6X.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset
-} from "./chunk-E3A22XSE.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/social/saas-kit-ph-gallery.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var GAP = 16;
-var PAD = 24;
-var R = 28;
-var ASKS = [
-  ["01", "Export any report to CSV", 1, "$41,200"],
-  ["02", "SSO with Okta and Entra", 0.78, "$33,900"],
-  ["03", "Slack alerts per project", 0.55, "$18,400"],
-  ["04", "Guest seats for clients", 0.41, "$12,750"],
-  ["05", "Audit log for admins", 0.33, "$9,300"],
-  ["06", "Zapier trigger on new ask", 0.27, "$6,800"],
-  ["07", "Dark mode in the editor", 0.12, "$2,100"]
-];
-var PLACES = [
-  { name: "Zoom calls", pile: "38 recordings a week, none transcribed", fill: "secondary", ink: "onSecondary", w: 440, unread: "38" },
-  { name: "Intercom", pile: "214 chats, tagged \u201Cother\u201D", fill: "card", ink: "onCard", unread: "214" },
-  { name: "Slack #feedback", pile: "Scrolls past in a day", fill: "card", ink: "onCard", w: 330, unread: "1.2k" },
-  { name: "NPS comments", pile: "Read once a quarter", fill: "card", ink: "onCard", w: 330, unread: "97" },
-  { name: "Sales notes", pile: "In six reps\u2019 heads and one spreadsheet", fill: "accent", ink: "onAccent", unread: "61" },
-  { name: "App reviews", pile: "Answered, never counted", fill: "card", ink: "onCard", w: 380, unread: "45" }
-];
-var saas_kit_ph_gallery_default = defineTemplate({
-  id: "social-saas-kit-ph-gallery",
-  meta: {
-    name: "SaaS launch Product Hunt gallery",
-    description: "A Product Hunt gallery that tells the launch as a story, in the bento look: five 1270 \xD7 760 sheets of unequal rounded tiles (hook, the problem, the product in action, three features, proof and call to action) and the 240 \xD7 240 thumbnail. Auto layout throughout, so your words reflow in their tiles",
-    category: "social",
-    tags: ["saas", "saas launch", "product hunt", "gallery", "bento", "launch", "screenshots", "thumbnail", "story", "features", "testimonial"],
-    platforms: ["product-hunt", "web", "x", "linkedin"],
-    formats: ["gallery", "screenshot", "thumbnail"],
-    useCases: ["launch", "brand-intro", "testimonial"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  sequence: true,
-  build() {
-    const k = new Kit("SaaS launch Product Hunt gallery", preset("ph-gallery"));
-    k.quantizeGeometry = true;
-    k.brand(
-      { paper: "#E9E6DF", text: "#16211B", primary: "#F2502B", onPrimary: "#1C0803", secondary: "#16211B", onSecondary: "#F3F0E8", accent: "#FFD23F", onAccent: "#1D1A05", card: "#FFFFFF", onCard: "#16211B", cardMuted: "#5E665F" },
-      { name: "Bramble", site: "bramble.example" }
-    );
-    k.palette({ wash: "#F4F1EA", line: "#E2DED5", mark: "#FFE9A8", sitter: "#B9B4A8" });
-    k.textStyle("Display 80", { size: 80, fontWeight: 800, letterSpacing: -3.8, lineHeight: 78 });
-    k.textStyle("Title 44", { size: 44, fontWeight: 800, letterSpacing: -1.8, lineHeight: 46 });
-    k.textStyle("Tile title 30", { size: 30, fontWeight: 800, letterSpacing: -1, lineHeight: 33 });
-    k.textStyle("Body 22", { size: 22, fontWeight: 500, letterSpacing: -0.2, lineHeight: 30 });
-    k.textStyle("Label 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.2, lineHeight: 20, textCase: "UPPER" });
-    k.textStyle("Figure 132", { size: 132, fontWeight: 900, letterSpacing: -7, lineHeight: 116 });
-    k.textStyle("Row 20", { size: 20, fontWeight: 600, letterSpacing: -0.3, lineHeight: 26 });
-    k.textStyle("Row mono 18", { ...MONO, size: 18, fontWeight: 600, lineHeight: 26 });
-    k.textStyle("Brand 26", { size: 26, fontWeight: 800, letterSpacing: -0.6, lineHeight: 32 });
-    k.textStyle("Button 22", { size: 22, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Thumb 30", { size: 30, fontWeight: 900, letterSpacing: -1.2, lineHeight: 34, textAlign: "CENTER" });
-    pill(k, "Tag", { fill: "primary", ink: "onPrimary", style: "Label 16", label: "CSV export", pad: [7, 12], radius: 8 });
-    pill(k, "Button", { fill: "card", ink: "onCard", style: "Button 22", label: "Try it free at bramble.example", pad: [16, 24], radius: 16 });
-    const names = ["1 Hook", "2 The problem", "3 In action", "4 Three features", "5 Proof and call"];
-    const sheets = names.map((name, i) => {
-      const id = i === 0 ? k.sheet : k.addSheet(preset("ph-gallery"), name);
-      k.nameSheet(id, name);
-      k.flowSheet(id, GAP, PAD, "paper", "MIN", "MIN");
-      k.patch(id, { clipsContent: true });
-      return id;
-    });
-    const row = (parent, h, name = "Tray row") => k.stack(parent, { direction: "HORIZONTAL", gap: GAP, height: h, name });
-    const col = (parent, w, name = "Tray column") => k.stack(parent, { gap: GAP, height: "FILL", name, ...w ? { width: w } : {} });
-    const tile = (parent, o) => k.stack(parent, { ...o.w ? { width: o.w } : {}, height: o.h ?? "FILL", fill: o.fill, radius: R, padding: o.pad ?? 32, gap: o.gap ?? 12, justify: o.justify ?? "SPACE_BETWEEN", direction: o.dir ?? "VERTICAL", align: o.align ?? "MIN", clip: true, name: o.name });
-    const label = (parent, words, ink) => k.text(parent, words, { style: "Label 16", color: ink, name: "Label" });
-    const ask = (parent, a, barW, money, top = false) => {
-      const r = k.stack(parent, { direction: "HORIZONTAL", gap: 16, align: "CENTER", radius: 14, padding: { top: money ? 15 : 10, right: 14, bottom: money ? 15 : 10, left: 14 }, name: "Ask", ...top ? { fill: "mark" } : {} });
-      k.text(r, a[0], { style: "Row mono 18", color: "cardMuted", autoWidth: true, name: "Rank" });
-      k.text(r, a[1], { style: "Row 20", color: "onCard", name: "Ask title" });
-      const track = k.stack(r, { direction: "HORIZONTAL", width: barW, height: 12, radius: 6, fill: "line", clip: true, name: "Heard" });
-      k.rect(track, Math.round(barW * a[2]), 12, "primary", { radius: 6, name: "Heard bar" });
-      if (money) k.text(r, a[3], { style: "Row mono 18", color: "onCard", width: 92, align: "RIGHT", name: "At stake" });
-    };
-    const wave = (parent, w, h, role, seed) => {
-      const r = rng(seed), n = Math.floor(w / 12);
-      const bars = [];
-      for (let i = 0; i < n; i++) {
-        const ranked = i > n * 0.66, v = ranked ? 1 - (i - n * 0.66) / (n * 0.34) * 0.86 : 0.18 + r() * 0.82 * (0.5 + 0.5 * Math.sin(i * 0.5) ** 2);
-        const bh = Math.max(4, v * h);
-        bars.push(box(i * 12, ranked ? h - bh : (h - bh) / 2, 7, bh));
-      }
-      return k.vector(parent, w, h, bars, role, { name: "Waveform" });
-    };
-    const SOFT = [shadow(k, "secondary", 0.1, 10, 30)];
-    {
-      const tray = row(sheets[0], "FILL");
-      const hook = tile(tray, { w: 690, fill: "secondary", name: "Hook tile", pad: 40 });
-      const brand = k.stack(hook, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand" });
-      logoBadge(k, brand, { fill: "primary", size: 30, pad: 10, radius: 12 });
-      k.text(brand, "{{brand.name}}", { style: "Brand 26", color: "onSecondary", name: "Name" });
-      wave(hook, 610, 96, "primary", 5);
-      const say = k.stack(hook, { gap: 22, name: "Hook words" });
-      k.text(say, "Your customers already wrote your roadmap.", { style: "Display 80", color: "onSecondary", name: "Hook" });
-      k.text(say, "Bramble listens to every customer call and ranks what to build next, by the revenue behind each ask.", { style: "Body 22", color: "onSecondary", name: "Hook note" });
-      const side = col(tray, void 0);
-      const asks = tile(side, { fill: "card", name: "Top asks", h: 318, pad: 26, gap: 6, justify: "MIN" });
-      k.patch(asks, { effects: SOFT });
-      label(asks, "This week\u2019s top asks", "cardMuted");
-      k.rect(asks, "FILL", 8, "card", { name: "Space" });
-      ASKS.slice(0, 4).forEach((a, i) => ask(asks, a, 110, false, i === 0));
-      const under = row(side, "FILL");
-      const heard = tile(under, { w: 280, fill: "primary", name: "Heard tile", pad: 26 });
-      label(heard, "Asks heard in calls", "onPrimary");
-      k.text(heard, "412", { style: "Figure 132", color: "onPrimary", name: "Heard figure" });
-      const live = tile(under, { fill: "accent", name: "Live tile", pad: 26 });
-      k.vector(live, 76, 52, [arrowPath(76, 52, 14)], "onAccent", { name: "Arrow" });
-      k.text(live, "Live on Product Hunt today", { style: "Tile title 30", color: "onAccent", name: "Live words" });
-    }
-    {
-      const s = sheets[1];
-      const head = tile(s, { fill: "card", name: "Problem tile", h: 232, pad: 36, justify: "CENTER", gap: 14 });
-      label(head, "The problem", "cardMuted");
-      k.text(head, "Feedback lives in six places. Nobody reads all six.", { style: "Title 44", color: "onCard", name: "Problem", width: 760 });
-      const slips = [];
-      for (let i = 0; i < 6; i++) for (let j = 0; j < 3 + i * 5 % 4; j++) slips.push(box(i * 62 + j % 2 * 6, 150 - j * 22, 48, 14));
-      k.vector(head, 380, 170, slips, "primary", { name: "Piles", absolute: { x: 810, y: 30 } });
-      for (const places of [PLACES.slice(0, 3), PLACES.slice(3)]) {
-        const tray = row(s, "FILL");
-        for (const p of places) {
-          const t = tile(tray, { fill: p.fill, name: "Place", pad: 24, ...p.w ? { w: p.w } : {} });
-          if (p.fill === "card") k.patch(t, { effects: SOFT });
-          k.instance(t, "Tag", { Label: `${p.unread} unread` }, { name: "Unread" });
-          const words = k.stack(t, { gap: 6, name: "Place words" });
-          k.text(words, p.name, { style: "Tile title 30", color: p.ink, name: "Place name" });
-          k.text(words, p.pile, { style: "Body 22", color: p.ink, name: "Pile" });
-        }
-      }
-    }
-    {
-      const tray = row(sheets[2], "FILL");
-      const side = col(tray, 380);
-      const how = tile(side, { fill: "secondary", name: "How tile", pad: 32 });
-      label(how, "How it works", "onSecondary");
-      wave(how, 316, 64, "primary", 9);
-      const words = k.stack(how, { gap: 14, name: "How words" });
-      k.text(words, "Calls in. Ranked backlog out.", { style: "Title 44", color: "onSecondary", name: "How" });
-      k.text(words, "Connect Zoom, Meet or Gong once. Bramble does the listening.", { style: "Body 22", color: "onSecondary", name: "How note" });
-      const heard = tile(side, { fill: "accent", name: "Heard in a call", h: 214, pad: 26 });
-      label(heard, "Heard on a call, 14:02", "onAccent");
-      k.text(heard, "\u201CIf it exported to CSV we\u2019d upgrade tomorrow.\u201D", { style: "Tile title 30", color: "onAccent", name: "Heard quote" });
-      const app = tile(tray, { fill: "card", name: "Backlog", pad: 30, gap: 8, justify: "MIN" });
-      k.patch(app, { effects: SOFT });
-      const top = k.stack(app, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Backlog head" });
-      k.text(top, "Backlog, ranked by revenue at stake", { style: "Tile title 30", color: "onCard", autoWidth: true, name: "Backlog title" });
-      k.instance(top, "Tag", { Label: "412 asks \xB7 96 calls" }, { name: "Counted" });
-      const cols = k.stack(app, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", padding: { top: 14, right: 14, bottom: 4, left: 14 }, name: "Columns" });
-      k.text(cols, "Ask", { style: "Label 16", color: "cardMuted", autoWidth: true, name: "Column" });
-      k.text(cols, "Heard \xB7 at stake", { style: "Label 16", color: "cardMuted", autoWidth: true, name: "Column" });
-      k.rect(app, "FILL", 2, "line", { name: "Rule" });
-      ASKS.forEach((a, i) => ask(app, a, 190, true, i === 0));
-      k.rect(app, "FILL", 2, "line", { name: "Rule" });
-      const foot = k.stack(app, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 10, right: 14, bottom: 0, left: 14 }, name: "Traced" });
-      k.vector(foot, 20, 16, [tickPath(20, 16)], "primary", { name: "Tick", strokeWidth: 4 });
-      k.text(foot, "Each ask links to the 31 sentences it was heard in.", { style: "Row 20", color: "cardMuted", name: "Traced words" });
-    }
-    {
-      const tray = row(sheets[3], "FILL");
-      const traced = tile(tray, { w: 600, fill: "card", name: "Traced tile", pad: 36 });
-      k.patch(traced, { effects: SOFT });
-      const say = k.stack(traced, { gap: 12, name: "Feature words" });
-      label(say, "Feature one", "cardMuted");
-      k.text(say, "Every ask, traced to the sentence it came from.", { style: "Title 44", color: "onCard", name: "Feature title" });
-      const script = k.stack(traced, { gap: 14, fill: "wash", radius: 18, padding: 26, name: "Transcript" });
-      k.text(script, "You \xB7 14:01", { style: "Label 16", color: "cardMuted", name: "Speaker" });
-      k.text(script, "What would move the team up a plan?", { style: "Row 20", color: "cardMuted", name: "Line" });
-      k.text(script, "Dana, Fretwork \xB7 14:02", { style: "Label 16", color: "cardMuted", name: "Speaker" });
-      k.text(script, "Honestly the dashboards are great, the team lives in them.", { style: "Row 20", color: "onCard", name: "Line" });
-      const hi = k.stack(script, { width: "HUG", fill: "accent", radius: 6, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Marked line" });
-      k.text(hi, "If it exported to CSV we\u2019d upgrade tomorrow.", { style: "Row 20", color: "onAccent", autoWidth: true, name: "Marked words" });
-      k.text(script, "Finance asks me for that file every month, and I rebuild it by hand in Sheets.", { style: "Row 20", color: "onCard", name: "Line" });
-      k.rect(script, "FILL", 2, "line", { name: "Rule" });
-      const link = k.stack(script, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Linked ask" });
-      k.vector(link, 30, 20, [arrowPath(30, 20, 5)], "primary", { name: "Link arrow" });
-      k.text(link, "Ask 01 \xB7 Export any report to CSV \xB7 heard 31 times", { style: "Row 20", color: "onCard", name: "Linked words" });
-      const side = col(tray, void 0);
-      const ranked = tile(side, { fill: "primary", name: "Ranked tile", pad: 32, h: 372 });
-      const rw = k.stack(ranked, { gap: 10, name: "Feature words" });
-      label(rw, "Feature two", "onPrimary");
-      k.text(rw, "Ranked by revenue at stake, not by who shouted.", { style: "Title 44", color: "onPrimary", name: "Feature title" });
-      k.vector(ranked, 534, 104, barPaths([100, 82, 61, 44, 36, 27, 19, 14, 9, 6, 4, 3], 534, 104, 100, 10), "onPrimary", { name: "Ranking" });
-      const push = tile(side, { fill: "secondary", name: "Push tile", pad: 32, dir: "HORIZONTAL", align: "CENTER", gap: 24 });
-      const pw = k.stack(push, { gap: 10, name: "Feature words" });
-      label(pw, "Feature three", "onSecondary");
-      k.text(pw, "One click sends it to Linear or Jira, evidence attached.", { style: "Tile title 30", color: "onSecondary", name: "Feature title" });
-      const issue = k.stack(push, { width: 150, gap: 8, fill: "card", radius: 14, padding: 14, name: "Issue card" });
-      k.text(issue, "BRM-118", { style: "Row mono 18", color: "cardMuted", name: "Issue id" });
-      k.rect(issue, "FILL", 10, "line", { radius: 5, name: "Issue line" });
-      k.rect(issue, 84, 10, "line", { radius: 5, name: "Issue line" });
-      k.rect(issue, 56, 10, "primary", { radius: 5, name: "Issue tag" });
-    }
-    {
-      const tray = row(sheets[4], "FILL");
-      const quote = tile(tray, { w: 720, fill: "card", name: "Quote tile", pad: 44 });
-      k.patch(quote, { effects: SOFT });
-      label(quote, "From the beta, 212 teams", "cardMuted");
-      k.text(quote, "\u201CWe cut two roadmap items and shipped the one thing 31 customers had asked for. Churn fell the month after.\u201D", { style: "Title 44", color: "onCard", name: "Quote" });
-      const who = k.stack(quote, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: "Who" });
-      faceSlot(k, k.photo(who, 72, 72, { radius: 36, ground: "line", name: "Portrait" }), 72, 72, "sitter");
-      const whoWords = k.stack(who, { gap: 0, name: "Who words" });
-      k.text(whoWords, "Imani Okafor", { style: "Row 20", color: "onCard", name: "Who name" });
-      k.text(whoWords, "Head of Product, Fretwork", { style: "Row 20", color: "cardMuted", name: "Who role" });
-      const side = col(tray, void 0);
-      const rated = tile(side, { fill: "accent", name: "Rating tile", pad: 30, h: 300 });
-      const stars = k.stack(rated, { direction: "HORIZONTAL", width: "HUG", gap: 6, name: "Stars" });
-      for (let i = 0; i < 5; i++) k.star(stars, 34, "onAccent", { name: "Star" });
-      const fig = k.stack(rated, { gap: 4, name: "Rating words" });
-      k.text(fig, "4.9", { style: "Figure 132", color: "onAccent", name: "Rating" });
-      k.text(fig, "from the teams who tried it first", { style: "Body 22", color: "onAccent", name: "Rating note" });
-      const call = tile(side, { fill: "primary", name: "Call tile", pad: 30 });
-      const offer = k.stack(call, { gap: 12, name: "Call words" });
-      k.text(offer, "Your first 50 calls are free.", { style: "Title 44", color: "onPrimary", name: "Call" });
-      k.text(offer, "Connect Zoom, Meet or Gong in two minutes. No card.", { style: "Body 22", color: "onPrimary", name: "Call note" });
-      k.instance(call, "Button", { Label: "Try it free at {{brand.site}}" }, { name: "Call button" });
-    }
-    const thumb = k.addSheet(preset("ph-thumb"), "Thumbnail");
-    k.nameSheet(thumb, "Thumbnail");
-    {
-      const last = k.node(sheets[4]);
-      k.patch(thumb, { x: last.x + last.width + 120, y: last.y });
-    }
-    k.flowSheet(thumb, 10, 20, "primary", "CENTER", "CENTER");
-    k.patch(thumb, { clipsContent: true });
-    k.ellipse(thumb, 300, "accent", { name: "Sun", absolute: { x: 96, y: -150 } });
-    k.rect(thumb, 240, 82, "secondary", { name: "Ground", absolute: { x: 0, y: 158 } });
-    k.logo(thumb, 116, 116);
-    k.text(thumb, "{{brand.name}}", { style: "Thumb 30", color: "onSecondary", name: "Thumb name" });
-    k.setCover(sheets[0]);
-    return k.finish();
-  }
-});
-
-export {
-  saas_kit_ph_gallery_default
-};

package/dist/chunks/chunk-NP2FJBYB.js

@@ -1,86 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  E,
-  lottieTemplate
-} from "./chunk-FTWYYASH.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/lottie/saas.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var SAAS = { paper: "#F6F7FB", ink: "#111827", accent: "#4F46E5", soft: "#E0E7FF", success: "#10B981", track: "#D1D5DB", white: "#FFFFFF", line: "#EEF0F6" };
-var saasToggle = lottieTemplate({
-  slug: "toggle",
-  sector: "saas",
-  role: "micro-interaction",
-  size: "button",
-  duration: 2400,
-  loop: true,
-  name: "Toggle switch",
-  description: "A settings toggle: the knob slides across with a little squash while the track fills with the brand colour, then switches back \u2014 a 2.4-second seamless loop, 480\xD7160",
-  colors: SAAS,
-  tags: ["toggle", "switch", "settings", "ui"],
-  build(l) {
-    const track = l.box(l.sheet, 140, 30, 200, 100, "Track", { fill: "track", radius: 50 });
-    const on = l.rect(track, 0, 0, 200, 100, "accent", { radius: 50, name: "Track on", opacity: 0 });
-    l.opacity(on, [[0, 0, E.hold], [300, 0, E.inOut], [600, 1, E.hold], [1500, 1, E.inOut], [1800, 0, E.hold], [2400, 0]]);
-    const knob = l.circle(track, 50, 50, 38, "white", { name: "Knob" });
-    l.keys(knob, "translateX", [[0, 0, E.hold], [300, 0, E.out], [650, 100, E.hold], [1500, 100, E.out], [1850, 0, E.hold], [2400, 0]]);
-    l.keys(knob, "scaleX", [[0, 1, E.hold], [300, 1, E.out], [420, 1.25, E.inOut], [650, 1, E.hold], [1500, 1, E.out], [1620, 1.25, E.inOut], [1850, 1, E.hold], [2400, 1]]);
-    const tick = l.line(track, [[132, 50], [146, 64], [168, 38]], "white", 8, { name: "On mark", opacity: 0 });
-    l.opacity(tick, [[0, 0, E.hold], [500, 0, E.out], [650, 0.9, E.hold], [1500, 0.9, E.in], [1600, 0, E.hold], [2400, 0]]);
-  }
-});
-var saasGrowthChart = lottieTemplate({
-  slug: "growth-chart",
-  sector: "saas",
-  role: "stat",
-  size: "spot",
-  duration: 2400,
-  loop: false,
-  name: "Growth chart",
-  description: "A dashboard chart animation: the gridlines settle, the growth line draws across left to right, its points pop in turn and the latest one pulses \u2014 2.4 seconds that rest on the finished chart, 800\xD7600",
-  colors: SAAS,
-  useCases: ["stats", "report", "pitch"],
-  tags: ["chart", "line chart", "dashboard", "analytics"],
-  build(l) {
-    const card = l.box(l.sheet, 80, 80, 640, 440, "Card", { fill: "white", radius: 32 });
-    l.rect(card, 48, 40, 160, 20, "soft", { radius: 10, name: "Title" });
-    const kpi = l.box(card, 470, 32, 122, 40, "Change", { fill: "success", radius: 20 });
-    l.line(kpi, [[26, 26], [44, 14], [58, 22], [76, 10]], "white", 6, { name: "Change mark" });
-    l.rect(kpi, 88, 17, 18, 6, "white", { radius: 3, name: "Change value" });
-    l.scale(kpi, [[0, 0, E.hold], [1700, 0, E.pop], [2050, 1]]);
-    for (let i = 0; i < 4; i++) {
-      const g = l.rect(card, 48, 140 + i * 70, 544, 4, "line", { radius: 2, name: "Gridline" });
-      l.pivot(g, 0, 0.5);
-      l.keys(g, "scaleX", [[0, 0, E.hold], [i * 60, 0, E.out], [i * 60 + 500, 1]]);
-    }
-    const pts = [[48, 350], [138, 320], [228, 334], [318, 262], [408, 238], [498, 180], [592, 132]];
-    const plot = l.box(card, 0, 0, 640, 440, "Plot");
-    const reveal = l.rect(plot, 30, 100, 590, 290, "white", { name: "Line reveal", mask: true });
-    l.pivot(reveal, 0, 0.5);
-    l.keys(reveal, "scaleX", [[0, 0, E.hold], [300, 0, E.inOut], [1500, 1]]);
-    l.line(plot, pts, "accent", 10, { name: "Growth line" });
-    pts.forEach(([x, y], i) => {
-      const t = 300 + 1200 * (x - 30) / 590;
-      const d = l.circle(card, x, y, 12, i === pts.length - 1 ? "accent" : "white", { name: "Point", stroke: { color: "accent", width: 6 } });
-      l.scale(d, [[0, 0, E.hold], [t, 0, E.pop], [t + 250, 1]]);
-    });
-    const halo = l.circle(card, 592, 132, 26, "accent", { name: "Latest halo", opacity: 0 });
-    l.scale(halo, [[0, 0.5, E.hold], [1550, 0.5, E.out], [2300, 1.6]]);
-    l.opacity(halo, [[0, 0, E.hold], [1550, 0, E.out], [1600, 0.4, E.in], [2300, 0]]);
-  }
-});
-var SAAS_PACK = [saasToggle, saasGrowthChart];
-
-export {
-  saasToggle,
-  saasGrowthChart,
-  SAAS_PACK
-};

package/dist/chunks/chunk-NR4WPMSY.js

@@ -1,181 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  QUIRE,
-  SCREEN,
-  editorialBrand,
-  editorialType,
-  fitGround,
-  inkButton,
-  lockup,
-  maskedLines,
-  pageBelow,
-  paperGround,
-  readersScreen,
-  riseLines
-} from "./chunk-3GMU2HH4.js";
-import {
-  camera,
-  float,
-  reelCuts,
-  reelSheet,
-  section,
-  wideCut
-} from "./chunk-7LZFBGFD.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-WO4SSPCC.js";
-import {
-  hide,
-  restyle
-} from "./chunk-T3XFQJUI.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset
-} from "./chunk-E3A22XSE.js";
-import {
-  ease
-} from "./chunk-6VIYCRKB.js";
-import {
-  COUNTER_PATH
-} from "./chunk-YY6HBXER.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/motion/style-editorial-launch-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("calm", 0, 5);
-var { beat } = S;
-var NAME = "Editorial SaaS launch reel";
-var HOOK = ["Your readers", "pay you."];
-var ON = 5;
-var DOWN = 10;
-var CLIMB = 12;
-var OFF = 15;
-var BEFORE = 3030;
-var COLS = [140, 407, 673, 940];
-var SHOTS = [
-  { t: beat(1), duration: 1200, zoom: 1.2, x: 480, y: 230 },
-  { t: beat(ON), duration: 1e3, zoom: 1.7, x: 330, y: 510 },
-  { t: beat(DOWN - 0.5), duration: 1e3, zoom: 1.7, x: 660, y: 510 },
-  { t: beat(CLIMB), duration: 1200, zoom: 1.22, x: 470, y: 250 },
-  { t: beat(OFF), duration: 1200, zoom: 1 }
-];
-var cues = [
-  { layer: "Running head rule", preset: "wipe-in", at: 0, params: { duration: 800 } },
-  { layer: "Running head words", preset: "fade-in", at: 100, params: { duration: 500 } },
-  { layer: "Stage", preset: "rise-in", at: 150, params: { duration: 900, distance: 90 } },
-  { layer: "Figure caption", preset: "fade-in", at: 500, params: { duration: 500 } },
-  { layer: "Call row", preset: "fade-in", at: 600, params: { duration: 500 } },
-  { layer: "Switch on", preset: "fade-in", at: beat(ON + 1), params: { duration: 300 } },
-  { layer: "Marker", preset: "wipe-in", at: beat(ON + 1) + 200, params: { duration: 700, direction: "down" } },
-  { layer: "Readers area", preset: "fade-in", at: beat(OFF) - 300, params: { duration: 700 } },
-  { layer: "Readers dot", preset: "scale-in", at: beat(OFF) - 100, params: { duration: 400 } },
-  { layer: "Status", preset: "fade-in", at: beat(OFF), params: { duration: 500 } },
-  { layer: "Notice", preset: "wipe-in", at: beat(OFF) + 400, params: { duration: 700 } },
-  { layer: "Readers dot", preset: "pulse", at: beat(18), params: { duration: 800, amount: 0.5 } },
-  { layer: "Button", preset: "pulse", at: beat(17), params: { duration: 800, amount: 0.03 } },
-  { layer: "Button", preset: "pulse", at: beat(19), params: { duration: 600, amount: 0.03 } }
-];
-var counts = [
-  // Readers before the meter; the climb after it is keyed on the same counter in the build. It rests at today's figure.
-  { layer: "Readers figure", at: beat(1), duration: beat(4), ease: ease.inOut("cubic"), counter: { from: 2610, to: BEFORE, value: QUIRE.readers } },
-  { layer: "Meter figure", at: beat(DOWN), duration: 1600, tick: 800, counter: { from: 5, to: QUIRE.free } },
-  { layer: "Convert figure", at: beat(CLIMB), duration: beat(3), counter: { from: QUIRE.before, to: QUIRE.convert, decimals: 1, suffix: "%" } },
-  { layer: "Revenue figure", at: beat(CLIMB), duration: beat(3), counter: { from: BEFORE * 8, to: QUIRE.revenue, prefix: "$" } }
-];
-var swaps = [captionSwap(["Your writing. Your readers\u2019 money.", "Turn on a metered paywall.", "Three free reads, then subscribe.", "We take nothing. Start free."], 0, S.duration - 30, { stagger: 70, in: 420, out: 260, rise: 22 })];
-var style_editorial_launch_reel_default = defineTemplate({
-  id: "motion-saas-style-editorial-launch-reel",
-  meta: {
-    name: NAME,
-    description: "A 16-second launch video in the warm editorial look: a serif hook rises line by line from its baseline on book paper, and the product is set under it like a figure in a magazine while a slow camera reads it: readers count, a chart draws, a paywall meter switches on and steps down, and a block of ink states the price. Felt-piano music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "editorial", "serif", "magazine", "paper", "launch", "reel", "newsletter", "publishing", "paywall", "counter", "chart", "camera", "captions", "music", "audio", "tiktok"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
-    useCases: ["launch", "announcement"],
-    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;
-    editorialBrand(k, { hook1: HOOK[0], hook2: HOOK[1] });
-    const t = editorialType(k);
-    t.display(96);
-    t.display(112);
-    inkButton(k, "Call", { style: t.strong(30), label: `Start free at ${QUIRE.site}`, pad: [20, 30], arrow: 26 });
-    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 28 });
-    paperGround(k, sheet, 1920, COLS);
-    pageBelow(k, sheet, { x: 140, y: 1490, width: 800, height: 440 });
-    const head = k.stack(sheet, { gap: 14, name: "Running head" });
-    k.rect(head, "FILL", 3, "text", { name: "Running head rule" });
-    const headRow = k.stack(head, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Running head words" });
-    lockup(k, headRow, { size: 30, style: t.serif(34) });
-    k.text(headRow, `${QUIRE.issue.toUpperCase()} \xB7 ${QUIRE.season.toUpperCase()}`, { style: t.label(20), color: "onPaper", autoWidth: true, name: "Issue" });
-    maskedLines(k, sheet, ["{{brand.hook1}}", "{{brand.hook2}}"], { style: t.display(132), name: "Hook" });
-    const figure = k.stack(sheet, { gap: 14, name: "Figure" });
-    const stage = k.stack(figure, { width: SCREEN.width, height: SCREEN.height, clip: true, radius: 6, effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.18 }, offset: { x: 0, y: 28 }, blur: 60, spread: 0, visible: true }], name: "Stage" });
-    const cam = k.frame(stage, { x: 0, y: 0, width: SCREEN.width, height: SCREEN.height }, { name: "Camera" });
-    const w = readersScreen(k, cam, { absolute: { x: 0, y: 0 }, shadow: false });
-    const notice = k.stack(stage, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 12, right: 20, bottom: 12, left: 20 }, absolute: { x: 0, y: 0 }, name: "Notice" });
-    k.text(notice, "{{brand.name}}\u2019s cut of that: $0", { style: t.strong(26), color: "onPrimary", autoWidth: true, name: "Notice words" });
-    k.text(figure, `FIG. 1 \xB7 ${QUIRE.paper.toUpperCase()}, PAID READERS BY WEEK`, { style: t.label(17), color: "onPaper", name: "Figure caption" });
-    captionStrip(k, sheet, swaps[0].words[0], { style: t.strong(38), fill: "card", ink: "onCard", radius: 2, pad: [16, 26], stroke: { color: "cardRule", width: 1, align: "INSIDE" } });
-    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
-    k.instance(row, "Call", { Label: "Start free at {{brand.site}}" }, { name: "Button" });
-    k.text(row, "NO CARD", { style: t.label(20), color: "onPaper", autoWidth: true, name: "Terms" });
-    k.finish();
-    k.patch(notice, { x: SCREEN.width - k.node(notice).width, y: 0 });
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    riseLines(k, sheet, "Hook", 0, { gap: 130, duration: 800 });
-    camera(k, cam, SCREEN.width, SCREEN.height, SHOTS);
-    k.animate(w.chart.line, "trim.end", [{ t: beat(1), v: 0, ease: ease.inOut("cubic") }, { t: beat(ON), v: w.chart.turn, ease: ease.hold }, { t: beat(CLIMB), v: w.chart.turn, ease: ease.inOut("cubic") }, { t: beat(OFF), v: 1 }]);
-    k.animate(w.readers, COUNTER_PATH, [{ t: beat(CLIMB), v: BEFORE, ease: ease.inOut("cubic") }, { t: beat(OFF), v: QUIRE.readers }]);
-    k.animate(w.knob, "translateX", [{ t: beat(ON + 1), v: -20, ease: ease.inOut("cubic") }, { t: beat(ON + 1) + 500, v: 0 }]);
-    w.spare.forEach((id, i) => {
-      const at = beat(DOWN) + (1 - i) * 800;
-      k.animate(id, "opacity", [{ t: 0, v: 1, ease: ease.hold }, { t: at, v: 1, ease: ease.out("cubic") }, { t: at + 400, v: 0 }]);
-    });
-    k.variants(sheet, [...reelCuts({ post: 40, portrait: 70 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 40, right: 140, bottom: 40, left: 140 } });
-        fitGround(kit, id, COLS);
-        hide(kit, id, ["Running head", "Page below", "Figure caption"]);
-        restyle(kit, id, "Hook line", "Display 96");
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22, padding: { top: 56, right: 140, bottom: 56, left: 140 } });
-        fitGround(kit, id, COLS);
-        hide(kit, id, ["Page below"]);
-      }
-    }), wideCut(640, (kit, id, right) => {
-      const scale = right.width / SCREEN.width, top = right.y + Math.round((right.height - SCREEN.height * scale - 40) / 2);
-      fitGround(kit, id, [110, 750, right.x, right.x + right.width]);
-      float(kit, id, "Figure", right.x, top, { scale, width: SCREEN.width });
-      restyle(kit, id, "Hook line", "Display 112");
-      kit.patch(id, { primaryAxisAlignItems: "MIN" });
-      for (const n of kit.named(id, "Page below")) kit.patch(n, { x: 110, y: 700, width: 640, height: 300, clipsContent: true });
-    })]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_editorial_launch_reel_default
-};