@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-W4MDIQ4Y.js

@@ -1,120 +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 {
-  background,
-  refilled
-} from "./chunk-CHL5BU5W.js";
-import {
-  feedVariants,
-  outro,
-  pill,
-  verticalPadding
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/effects/grain-story.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var GRAIN_STORY = {
-  duration: 1e4,
-  /** The grain at rest, and at its heaviest. */
-  amount: 0.07,
-  heavy: 0.16,
-  /** Grain cells (px): film grain at 1080 wide, and small enough a still of it stays a card-sized picture. */
-  size: 3,
-  /** A new grain every frame at 30 fps: the seed climbs by one each 1000/30 ms. */
-  seedFrom: 1
-};
-var CONTENT = ["Line-up", "Festival name", "Dates", "Venue", "Pass offer", "Site"];
-var cues = [
-  { layer: "Beam", preset: "fade-in", at: 0, params: { duration: 1400 } },
-  { layer: "Line-up", preset: "letters-in", at: 400 },
-  { layer: "Festival name", preset: "lines-in", at: 900, params: { duration: 800 } },
-  { layer: "Dates", preset: "blur-in", at: 1900, params: { duration: 700 } },
-  { layer: "Venue", preset: "fade-in", at: 2300 },
-  { layer: "Pass offer", preset: "pop-in", at: 2800 },
-  { layer: "Site", preset: "fade-in", at: 3200 },
-  { layer: "Pass offer", preset: "pulse", at: 5600 },
-  outro(CONTENT, 8600),
-  { layer: "Beam", preset: "fade-out", at: 9200, params: { duration: 600 } }
-];
-var grain_story_default = defineTemplate({
-  id: "motion-grain-story",
-  meta: {
-    name: "Film grain festival story",
-    description: "A 10-second film festival story on a boiling film-grain ground (a grain effect keyed every frame) with a projector beam: the festival name reveals line by line, the dates focus in and the pass offer pops \u2014 9:16 with square and 4:5 cuts",
-    category: "animation",
-    tags: ["animation", "background", "grain", "noise", "film", "festival", "cinema", "story", "reel", "event"],
-    platforms: ["instagram", "tiktok", "facebook"],
-    formats: ["story", "reel", "post", "portrait-post"],
-    useCases: ["event", "announcement"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  motion: { cues, loop: true },
-  build() {
-    const G = GRAIN_STORY;
-    const k = new Kit("Film grain festival story", preset("ig-story"));
-    k.brand(
-      { paper: "#17110C", text: "#F6EBD7", onPaper: "#CDBFA6", accent: "#F2B84B", beam: "#F7D9A0", primary: "#F2B84B", onPrimary: "#17110C" },
-      { festival: "Riverside\nFilm\nFestival", dates: "October 23 \u2013 26", venue: "The Grand Theatre \xB7 110 Main Street", site: "riversidefilmfest.org" }
-    );
-    k.textStyle("Festival 150", { size: 150, fontWeight: 900, letterSpacing: -5, lineHeight: 140, textAlign: "CENTER" });
-    k.textStyle("Festival 104", { size: 104, fontWeight: 900, letterSpacing: -3, lineHeight: 100, textAlign: "CENTER" });
-    k.textStyle("Eyebrow 30", { size: 30, fontWeight: 800, letterSpacing: 6, lineHeight: 36, textAlign: "CENTER" });
-    k.textStyle("Dates 64", { size: 64, fontWeight: 800, letterSpacing: -1, lineHeight: 72, textAlign: "CENTER" });
-    k.textStyle("Venue 34", { size: 34, fontWeight: 500, lineHeight: 42, textAlign: "CENTER" });
-    k.textStyle("Offer 36", { size: 36, fontWeight: 800, lineHeight: 44 });
-    pill(k, "Offer", { fill: "primary", ink: "onPrimary", style: "Offer 36", label: "Festival passes from $45", pad: [22, 44] });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 30, verticalPadding(), "paper", "CENTER", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: G.duration, fps: 30 });
-    const grainFx = [{ id: "e1", type: "NOISE", amount: G.amount, size: G.size, monochrome: true, seed: G.seedFrom, visible: true, mode: "MONO", density: 0.5 }];
-    const ground = background(k, sheet, "paper", { effects: grainFx });
-    k.ellipse(sheet, 1500, [k.gradient({ from: "beam", to: "beam", kind: "RADIAL", fromOpacity: 0.34, toOpacity: 0 })], { name: "Beam", absolute: { x: -210, y: -520 } });
-    k.text(sheet, "4 NIGHTS \xB7 38 FILMS", { style: "Eyebrow 30", color: "accent", name: "Line-up" });
-    k.text(sheet, "{{brand.festival}}", { style: "Festival 150", color: "text", name: "Festival name" });
-    k.text(sheet, "{{brand.dates}}", { style: "Dates 64", color: "accent", name: "Dates" });
-    k.text(sheet, "{{brand.venue}}", { style: "Venue 34", color: "onPaper", name: "Venue" });
-    k.instance(sheet, "Offer", { Label: "Festival passes from $45" }, { name: "Pass offer" });
-    k.text(sheet, "{{brand.site}}", { style: "Venue 34", color: "onPaper", name: "Site" });
-    const frames = Math.round(G.duration * 30 / 1e3);
-    k.animate(ground, "effects[@e1].seed", [{ t: 0, v: G.seedFrom, ease: ease.linear }, { t: G.duration, v: G.seedFrom + frames }]);
-    k.animate(ground, "effects[@e1].amount", [{ t: 0, v: G.amount, ease: ease.inOut("sine") }, { t: 2e3, v: G.heavy, ease: ease.inOut("sine") }, { t: 8e3, v: G.heavy, ease: ease.inOut("sine") }, { t: G.duration, v: G.amount }]);
-    k.cues(sheet, cues);
-    k.variants(sheet, refilled(feedVariants({ post: 56, portrait: 72 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 14, counterAxisSpacing: 14 });
-        for (const n of kit.named(id, "Festival name")) kit.restyle(n, "Festival 104");
-        for (const n of kit.named(id, "Beam")) kit.patch(n, { x: -210, y: -760 });
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { itemSpacing: 20, counterAxisSpacing: 20 });
-        for (const n of kit.named(id, "Festival name")) kit.restyle(n, "Festival 104");
-        for (const n of kit.named(id, "Beam")) kit.patch(n, { x: -210, y: -660 });
-      }
-    })));
-    return k.finish();
-  }
-});
-
-export {
-  GRAIN_STORY,
-  grain_story_default
-};

package/dist/chunks/chunk-W65ZA7RG.js

@@ -1,104 +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 {
-  coverBorder,
-  coverGround,
-  gantry,
-  gantryBox,
-  layPad,
-  moon,
-  pad,
-  place,
-  planet,
-  planetBox,
-  rocket,
-  spaceBrand,
-  standRocket,
-  starfield
-} from "./chunk-46YJQQLW.js";
-import {
-  EMAIL_FPS,
-  HEADER
-} from "./chunk-UBRD52US.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-X23ZWFW2.js";
-import {
-  pill
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit
-} from "./chunk-IUUXJSAI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/email/space-opera-header.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 5e3;
-var counts = [{ layer: "Clock", at: 0, duration: 5e3, counter: { from: 59, to: 54, prefix: "T\u201371:59:", suffix: " and counting", value: 59 }, tick: 1e3 }];
-var cues = [{ layer: "Button", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.06 } }];
-var space_opera_header_default = defineTemplate({
-  id: "email-space-opera-header",
-  meta: {
-    name: "Space opera T-minus email header (animated GIF)",
-    description: "A 600 \xD7 300 animated header for a launch-notice email: \u201CT-minus 3 days\u201D, the date and the button are all on the first frame (for Outlook), beside a rocket on its pad under a ringed planet; then the clock under the headline ticks real seconds, the gantry\u2019s beacon blinks and the floodlights breathe \u2014 a five-second GIF loop in rust, mustard, teal and cream",
-    category: "email",
-    tags: ["email", "gif", "animated", "header", "banner", "space opera", "space", "rocket", "countdown", "launch", "retro", "pulp", "saas"],
-    platforms: ["email"],
-    formats: ["email", "banner"],
-    useCases: ["launch", "countdown", "announcement", "newsletter"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, loop: true },
-  build() {
-    const k = new Kit("Space opera T-minus email header", HEADER);
-    k.quantizeGeometry = true;
-    spaceBrand(k, { offer: "T-minus\n3 days." });
-    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 700, letterSpacing: 2.2, lineHeight: 16, textCase: "UPPER" });
-    k.textStyle("Offer 42", { ...SERIF, size: 42, fontWeight: 900, letterSpacing: -1.4, lineHeight: 42 });
-    k.textStyle("Clock 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 18 });
-    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 20 });
-    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
-    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Hold my seat", pad: [9, 20], radius: 5 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 8, { top: 22, right: 306, bottom: 22, left: 28 }, "paper", "CENTER", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
-    const view = k.frame(sheet, { x: 314, y: 14, width: 272, height: 272 }, { name: "View", clip: true });
-    coverGround(k, view, 272, 272, 10);
-    starfield(k, view, { w: 272, h: 272, loopMs: DURATION, density: 420, u: 0.5 });
-    moon(k, view, 30, 150, 18);
-    const pl = planet(k, view, { r: 62 });
-    place(k, pl, planetBox({ r: 62 }), 206, 86);
-    const PAD = { w: 272, depth: 34, u: 0.34 };
-    layPad(k, pad(k, view, { ...PAD, cx: 132, loopMs: DURATION }), PAD, 240);
-    const g = gantry(k, view, { h: 190, loopMs: DURATION });
-    place(k, g, gantryBox({ h: 190 }), 132 - 17 - gantryBox({ h: 190 }).w / 2, 237 - 95);
-    const rk = rocket(k, view, { h: 180, loopMs: DURATION });
-    standRocket(k, rk, { h: 180 }, 132, 237);
-    coverBorder(k, view, 272, 272, 10, 2);
-    k.text(sheet, "Launch notice \xB7 Mon 5 Oct", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
-    k.text(sheet, "{{brand.offer}}", { style: "Offer 42", color: "text", name: "Offer" });
-    k.text(sheet, "T\u201371:59:59 and counting", { style: "Clock 13", color: "text", name: "Clock" });
-    k.text(sheet, "{{brand.name}} 1.0 lifts off on Monday. Your seat in mission control is held until then.", { style: "Account 14", color: "onPaper", name: "Account" });
-    k.instance(sheet, "Button pill", { Label: "Hold my seat" }, { name: "Button" });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    return k.finish();
-  }
-});
-
-export {
-  space_opera_header_default
-};

package/dist/chunks/chunk-W7RTB37P.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-YNOCYFZ4.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  shadow
-} from "./chunk-HVK5T4I5.js";
-import {
-  logoBadge,
-  pill
-} from "./chunk-EK5CFFJO.js";
-import {
-  box,
-  rng
-} from "./chunk-BNVLVZUT.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.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-W7ZKXMLP.js

@@ -1,106 +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 {
-  SPOOL,
-  body,
-  button,
-  code,
-  deep,
-  display,
-  gradientBrand,
-  lockup,
-  longShadow,
-  mesh,
-  orbitCam,
-  rimLight,
-  tilted,
-  ts
-} from "./chunk-T2VGYDNZ.js";
-import {
-  EMAIL_FPS,
-  HEADER
-} from "./chunk-UBRD52US.js";
-import {
-  pt3
-} from "./chunk-BNVLVZUT.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit
-} from "./chunk-IUUXJSAI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/email/style-gradient-header.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Gradient SaaS email header";
-var DURATION = 6e3;
-var C = { w: 420, h: 280 };
-var cues = [
-  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 800, amount: 0.05 } }
-];
-var style_gradient_header_default = defineTemplate({
-  id: "email-saas-style-gradient-header",
-  meta: {
-    name: `${NAME} (animated GIF)`,
-    description: "A 600 \xD7 300 animated header for a launch email in the gradient and depth look: the sender, the news, a line and the button on a deep ocean ground, and a finished video card tilted in 3D space over a warm coral-to-lagoon mesh, all on the first frame. The camera swings round the card and back, the mesh flows, light crosses the card and the button pulses. A seamless 6-second GIF",
-    category: "email",
-    tags: ["email", "gif", "animated", "header", "banner", "saas", "gradient", "mesh gradient", "depth", "3d", "developer", "api", "video", "launch", "announcement", "newsletter", "loop"],
-    platforms: ["email"],
-    formats: ["email", "banner"],
-    useCases: ["announcement", "launch", "newsletter"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit(NAME, HEADER);
-    k.quantizeGeometry = true;
-    gradientBrand(k);
-    ts(k, "Brand 16", display(16));
-    ts(k, "Offer 32", display(32));
-    ts(k, "When 14", body(14));
-    ts(k, "Button 14", display(14, { weight: 700 }));
-    ts(k, "Card big 40", display(40));
-    ts(k, "Card small 24", code(24));
-    button(k, "Button", { style: "Button 14", label: "Render your first video", pad: [10, 18] });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
-    deep(k, sheet, { duration: DURATION });
-    mesh(k, sheet, { x: 318, y: 0, w: 282, h: 300, duration: DURATION, phase: 1.6 });
-    const t = tilted(k, sheet, { x: 318, y: 0, w: 282, h: 300, width: C.w, height: C.h, scale: 0.55, rotateY: -26, rotateX: 12, styles: {}, planes: false, sweeps: [3e3], perspective: 900, make: (rig) => card(k, rig) });
-    orbitCam(k, t.scene, { at: 0, until: DURATION / 2, from: -10, to: 10, back: DURATION });
-    const words = k.stack(sheet, { width: 270, gap: 12, name: "Words", absolute: { x: 28, y: 40 } });
-    lockup(k, words, { size: 28, style: "Brand 16" });
-    k.text(words, `${SPOOL.version} renders
-on the edge.`, { style: "Offer 32", color: "onNight", name: "Offer" });
-    k.text(words, `A one-minute 1080p video in ${SPOOL.render} s. It used to take ${SPOOL.before}.`, { style: "When 14", color: "nightMuted", name: "When" });
-    k.instance(words, "Button", { Label: "Render your first video" }, { name: "Open button" });
-    k.cues(sheet, cues);
-    return k.finish();
-  }
-});
-function card(k, rig) {
-  const c = k.stack(rig, { width: C.w, height: C.h, radius: 22, clip: true, fill: "ocean", name: "Video card", effects: [longShadow(k, 0.6, 30, 50), ...rimLight(k, 0.2)], absolute: { x: 0, y: 0 } });
-  mesh(k, c, { x: 0, y: 0, w: C.w, h: C.h, phase: 1.2, name: "Card light" });
-  k.vector(c, C.w, C.h, [{ closed: false, points: [pt3(40, 200), pt3(110, 150), pt3(170, 176), pt3(250, 104), pt3(320, 120), pt3(380, 60)] }], [], { name: "Route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 7, cap: "ROUND", join: "ROUND" } });
-  const tag = k.stack(c, { width: "HUG", radius: 14, fill: "plate", padding: { top: 8, right: 16, bottom: 8, left: 16 }, name: "Card tag", absolute: { x: 18, y: C.h - 82 } });
-  k.text(tag, "42.6 km", { style: "Card big 40", color: "onPlate", autoWidth: true, name: "Card distance" });
-  const chip = k.stack(c, { direction: "HORIZONTAL", width: "HUG", radius: 999, fill: "plate", gap: 8, align: "CENTER", padding: { top: 8, right: 16, bottom: 8, left: 12 }, name: "Card chip", absolute: { x: C.w - 190, y: 16 } });
-  k.ellipse(chip, 12, "primary", { name: "Card dot" });
-  k.text(chip, `${SPOOL.render} s`, { style: "Card small 24", color: "onPlate", autoWidth: true, name: "Card time" });
-  return c;
-}
-
-export {
-  style_gradient_header_default
-};