@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-QTRREVHW.js

@@ -1,125 +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 {
-  confirms
-} from "./chunk-4QD23RJO.js";
-import {
-  BREAKPOINTS,
-  webResponsive
-} from "./chunk-ZMD3C2YJ.js";
-import {
-  defineTemplate
-} from "./chunk-KGT34R7C.js";
-import {
-  Kit,
-  preset
-} from "./chunk-L5DTT5DC.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/web/coming-soon-page.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var COUNT = [["18", "days"], ["07", "hours"], ["42", "minutes"], ["09", "seconds"]];
-var coming_soon_page_default = defineTemplate({
-  id: "web-coming-soon",
-  meta: {
-    name: "Coming soon page",
-    description: "A coming-soon page with a countdown to opening day and a working email sign-up: a real form that thanks the visitor in place and, with a database attached, saves every address \u2014 desktop, laptop, tablet and phone",
-    category: "web",
-    tags: ["coming soon", "countdown", "launch", "landing page", "waitlist", "form", "sign-up", "database", "cafe", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["countdown", "launch", "event"],
-    created: "2026-09-29",
-    updated: "2026-10-02"
-  },
-  breakpoints: true,
-  build() {
-    const k = new Kit("Coming soon page", preset("web-desktop"));
-    k.brand(
-      { paper: "#1C1511", text: "#F6EEE4", onPaper: "#C9B8A6", primary: "#D9793A", onPrimary: "#1C1511", card: "#2A201A", onCard: "#F6EEE4", cardMuted: "#BCA995", field: "#FFFFFF", onField: "#5E5148", line: "#4A3B31" },
-      { name: "Ember & Oak", tagline: "Coffee roasters" }
-    );
-    k.textStyle("Brand 22", { size: 22, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Tagline 14", { size: 14, fontWeight: 600, letterSpacing: 1.2, lineHeight: 20, textCase: "UPPER" });
-    k.textStyle("Eyebrow 16", { size: 16, fontWeight: 700, letterSpacing: 1.4, lineHeight: 24, textCase: "UPPER", textAlign: "CENTER" });
-    k.textStyle("Display 64", { size: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 70, textAlign: "CENTER" });
-    k.textStyle("Display 44", { size: 44, fontWeight: 800, letterSpacing: -1.2, lineHeight: 50, textAlign: "CENTER" });
-    k.textStyle("Display 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 40, textAlign: "CENTER" });
-    k.textStyle("Lead 19", { size: 19, fontWeight: 400, lineHeight: 30, textAlign: "CENTER" });
-    k.textStyle("Lead 16", { size: 16, fontWeight: 400, lineHeight: 25, textAlign: "CENTER" });
-    k.textStyle("Count 56", { size: 56, fontWeight: 800, letterSpacing: -1.5, lineHeight: 60, textAlign: "CENTER" });
-    k.textStyle("Count 36", { size: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 40, textAlign: "CENTER" });
-    k.textStyle("Unit 14", { size: 14, fontWeight: 600, letterSpacing: 0.8, lineHeight: 20, textCase: "UPPER", textAlign: "CENTER" });
-    k.textStyle("Unit 12", { size: 12, fontWeight: 600, letterSpacing: 0.4, lineHeight: 16, textCase: "UPPER", textAlign: "CENTER" });
-    k.textStyle("Field 16", { size: 16, fontWeight: 400, lineHeight: 24 });
-    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Note 14", { size: 14, fontWeight: 400, lineHeight: 20, textAlign: "CENTER" });
-    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
-    k.variantSet("Countdown unit", "Size", ["Large", "Small"], {
-      gap: 4,
-      fill: "card",
-      radius: 16,
-      stroke: { color: "line", width: 1 },
-      props: { Value: "18", Unit: "days" },
-      description: "One unit of a countdown: the number and what it counts."
-    }, (size, id) => {
-      k.propText(id, "Value", { style: size === "Large" ? "Count 56" : "Count 36", color: "onCard" });
-      k.propText(id, "Unit", { style: size === "Large" ? "Unit 14" : "Unit 12", color: "cardMuted" });
-    }, (size) => size === "Large" ? { width: 132, padding: { top: 22, right: 8, bottom: 18, left: 8 } } : { width: 76, padding: { top: 14, right: 4, bottom: 12, left: 4 } });
-    k.component("Button", { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, align: "CENTER", padding: { top: 14, right: 24, bottom: 14, left: 24 }, props: { Label: "Tell me when you open" } }, (id) => {
-      k.propText(id, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
-    });
-    const sheet = k.sheet;
-    const bp = BREAKPOINTS.desktop;
-    k.flowSheet(sheet, 48, { top: 48, right: bp.side, bottom: 40, left: bp.side }, "paper", "SPACE_BETWEEN", "CENTER");
-    k.patch(sheet, { layoutSizingVertical: "HUG", minHeight: bp.viewport, clipsContent: true });
-    const brand = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Brand" });
-    const tile = k.stack(brand, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 12, padding: 8, name: "Logo tile" });
-    k.logo(tile, 32, 32);
-    const names = k.stack(brand, { width: "HUG", name: "Names" });
-    k.text(names, "{{brand.name}}", { style: "Brand 22", color: "text", autoWidth: true, name: "Brand name" });
-    k.text(names, "{{brand.tagline}}", { style: "Tagline 14", color: "onPaper", autoWidth: true, name: "Brand tagline" });
-    const main = k.stack(sheet, { gap: 28, align: "CENTER", name: "Main" });
-    k.text(main, "Opening Saturday, 18 October", { style: "Eyebrow 16", color: "text", name: "Eyebrow" });
-    k.text(main, "Our first caf\xE9 is coming to Alder Street.", { style: "Display 64", color: "text", width: 900, name: "Headline" });
-    k.text(main, "Espresso from beans we roast behind the counter, sourdough from the bakery next door, and a long table for anyone who wants to stay a while.", { style: "Lead 19", color: "onPaper", width: 720, name: "Lead" });
-    const count = k.stack(main, { direction: "HORIZONTAL", width: "HUG", gap: 16, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Countdown" });
-    for (const [v, u] of COUNT) k.instance(count, "Countdown unit/Large", { Value: v, Unit: u }, { name: "Unit" });
-    const form = k.stack(main, { direction: "HORIZONTAL", width: 560, gap: 10, align: "CENTER", name: "Sign-up" });
-    const field = k.stack(form, { direction: "HORIZONTAL", fill: "field", radius: 10, padding: { top: 14, right: 16, bottom: 14, left: 16 }, name: "Field" });
-    k.text(field, "Your email address", { style: "Field 16", color: "onField", name: "Placeholder" });
-    const send = k.instance(form, "Button", { Label: "Tell me when you open" }, { name: "Sign-up button" });
-    k.patch(field, { control: { kind: "INPUT", name: "email", inputType: "email", required: true } });
-    k.patch(send, { control: { kind: "BUTTON", buttonType: "submit" } });
-    k.text(main, "One email on opening day, and nothing else.", { style: "Note 14", color: "onPaper", name: "Promise" });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, name: "Footer" });
-    k.text(foot, "112 Alder Street, Asheville \xB7 Open 7 am to 6 pm, every day", { style: "Footer 14", color: "onPaper", name: "Address" });
-    k.text(foot, "@emberandoak", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Handle" });
-    webResponsive(k, sheet, {
-      stack: ["Footer"],
-      stackMobile: ["Sign-up"],
-      restyle: { "Display 64": { laptop: "Display 44", tablet: "Display 44", mobile: "Display 34" }, "Lead 19": { mobile: "Lead 16" } },
-      top: { tablet: 40, mobile: 32 },
-      tweak: (kit, id, size) => {
-        for (const n of [...kit.named(id, "Headline"), ...kit.named(id, "Lead")]) if (size !== "laptop") kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        if (size === "tablet" || size === "mobile") for (const n of kit.named(id, "Sign-up")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        if (size === "mobile") {
-          for (const n of kit.named(id, "Countdown")) kit.patch(n, { itemSpacing: 8 });
-          for (const n of kit.named(id, "Unit")) kit.patch(n, { mainComponentId: kit.componentIdOf("Countdown unit/Small"), width: 76 });
-        }
-      }
-    });
-    confirms(k, main, form, { title: "You are on the list.", body: "One email on opening day, with the hours and what is on the counter. See you on Alder Street.", titleStyle: "Display 34", bodyStyle: "Lead 19", align: "CENTER" });
-    return k.finish();
-  }
-});
-
-export {
-  coming_soon_page_default
-};

package/dist/chunks/chunk-QTUYKUSQ.js

@@ -1,36 +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 {
-  saas_film_product_hunt_launch_default
-} from "./chunk-2EOU2VLT.js";
-import {
-  saas_film_youtube_demo_kit_default
-} from "./chunk-B54LJN6V.js";
-import {
-  saas_film_app_preview_default
-} from "./chunk-OAJEZSI6.js";
-import {
-  saas_film_bright_trailer_default
-} from "./chunk-CVLZ3RIG.js";
-import {
-  saas_film_cinematic_trailer_default
-} from "./chunk-SV2JCNNX.js";
-import {
-  saas_film_webinar_opener_default
-} from "./chunk-SC3CDM5D.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/saas/launch-video.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var pack = [saas_film_product_hunt_launch_default, saas_film_cinematic_trailer_default, saas_film_bright_trailer_default, saas_film_youtube_demo_kit_default, saas_film_webinar_opener_default, saas_film_app_preview_default];
-var launch_video_default = pack;
-
-export {
-  launch_video_default
-};

package/dist/chunks/chunk-QX4DYCCV.js

@@ -1,324 +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 {
-  cross,
-  tick
-} from "./chunk-2VFVKPUT.js";
-import {
-  MONO
-} from "./chunk-AXAAXHZF.js";
-import {
-  compactNav,
-  footer,
-  respond,
-  rule,
-  soft,
-  typeScale
-} from "./chunk-YHF6LRMF.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-ZMD3C2YJ.js";
-import {
-  defineTemplate
-} from "./chunk-KGT34R7C.js";
-import {
-  Kit,
-  preset
-} from "./chunk-L5DTT5DC.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/web/saas-comparison.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var THEM = "Monolith";
-var TABLE = [
-  ["Every day", [["Boards, backlog and sprints", true, true], ["Every action on the keyboard", true, false], ["Board opens in under a second", true, false], ["Works offline, syncs later", true, false]]],
-  ["Setting up", [["No admin or training needed", true, false], ["Import with full history", true, "Partial"], ["Price per person, per month", "$6 flat", "From $15"]]],
-  ["At scale", [["Custom workflows per project", "3 states", true], ["Portfolio roadmaps", false, true], ["Built for 1,000 seats and up", false, true]]]
-];
-var SWITCH_IF = ["Your team is under 20 people", "You use boards, a backlog and sprints, and little else", "Nobody wants to be \u201Cthe Monolith admin\u201D"];
-var STAY_IF = ["You need approval workflows across departments", "You report on portfolios of 50 projects", "Procurement has already signed a three-year deal"];
-var STEPS = [
-  ["0:00", "Connect", `Paste a read-only ${THEM} token. Nothing in ${THEM} is changed, then or later.`],
-  ["0:02", "Choose", "Tick the projects to bring. Issues, comments, attachments, sprints and people come with them."],
-  ["0:11", "Done", `Every old issue key still works: links to PROJ-482 land on the same issue in Pebble.`],
-  ["Day 30", "Decide", `Run both for a month if you like. If you go back, your data exports in ${THEM}\u2019s own format.`]
-];
-var cues = [
-  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
-  { layer: "Versus", preset: "fade-in", at: 100, params: { duration: 500 } },
-  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
-  { layer: "Lead", preset: "rise-in", at: 350 },
-  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 500, stagger: { delay: 100 } },
-  { layer: "Race cell", preset: "rise-in", at: 300, params: { duration: 700 } },
-  { layer: "Ours bar", preset: "wipe-in", at: 1e3, params: { duration: 400 } },
-  { layer: "Theirs bar", preset: "wipe-in", at: 1e3, params: { duration: 3800, ease: { kind: "linear" } } },
-  { layer: "Winner", preset: "pop-in", at: 1500, params: { duration: 400 } },
-  { layer: "Bento cell", preset: "rise-in", at: 1200, params: { duration: 600 }, stagger: { delay: 150 } },
-  { layer: "Mark", preset: "pop-in", at: 2200, params: { duration: 300 }, stagger: { delay: 70 } }
-];
-var counts = [
-  { layer: "Ours time", at: 1e3, duration: 400, counter: { from: 0, to: 0.4, decimals: 1, suffix: " s" }, ease: { kind: "linear" } },
-  { layer: "Theirs time", at: 1e3, duration: 3800, counter: { from: 0, to: 6.2, decimals: 1, suffix: " s" }, ease: { kind: "linear" } },
-  { layer: "Import figure", at: 1500, duration: 1600, counter: { from: 0, to: 11, suffix: " min" } }
-];
-var saas_comparison_default = defineTemplate({
-  id: "web-saas-comparison",
-  meta: {
-    name: "SaaS comparison page (us vs incumbent)",
-    description: "A \u201CProduct vs Incumbent\u201D comparison page on a bento grid: the hero races two loading bars with their clocks counting, round it the import time, the price per seat and a switcher\u2019s line. Then a feature table whose ticks pop in (with the rows the incumbent wins), who should switch and who should stay, the switch told by the clock, and a migration call to action. Desktop to phone",
-    category: "web",
-    tags: ["saas", "comparison", "vs", "alternative", "feature table", "migration", "switching", "bento", "competitor", "landing page", "website", "animation", "responsive"],
-    platforms: ["web"],
-    formats: ["page", "demo"],
-    useCases: ["comparison", "launch", "pricing"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  breakpoints: true,
-  motion: { cues, counts },
-  build() {
-    const k = new Kit("SaaS comparison page (us vs incumbent)", preset("web-desktop"));
-    k.brand(
-      { paper: "#ECEEE8", text: "#101412", onPaper: "#4B534E", primary: "#0B7A5B", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#101412", cardMuted: "#5A625D", cardGood: "#0A6A4F", tile: "#D9F26E", panel: "#101412", onPanel: "#F2F4EE", panelMuted: "#AEB5AF" },
-      { name: "Pebble" }
-    );
-    k.palette({ them: "#A9AEA8", lane: "#E4E7E0", hairline: "#DFE2DA", good: "#0B7A5B", miss: "#C9CDC6" });
-    const s = typeScale(k, {
-      "Nav 15": { size: 15, fontWeight: 600, lineHeight: 24 },
-      "Brand 21": { size: 21, fontWeight: 800, letterSpacing: -0.6, lineHeight: 28 },
-      "Button 15": { size: 15, fontWeight: 700, lineHeight: 22 },
-      "Versus 14": { ...MONO, size: 14, fontWeight: 600, lineHeight: 20 },
-      "Display 64": { size: 64, fontWeight: 800, letterSpacing: -2.8, lineHeight: 66 },
-      "Display 54": { size: 54, fontWeight: 800, letterSpacing: -2.3, lineHeight: 56 },
-      "Display 46": { size: 46, fontWeight: 800, letterSpacing: -1.9, lineHeight: 48 },
-      "Display 34": { size: 34, fontWeight: 800, letterSpacing: -1.3, lineHeight: 37 },
-      "Lead 19": { size: 19, fontWeight: 400, lineHeight: 30 },
-      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
-      "Cell label 13": { size: 13, fontWeight: 600, lineHeight: 18 },
-      "Lane 15": { size: 15, fontWeight: 700, lineHeight: 20 },
-      "Time 28": { ...MONO, size: 28, fontWeight: 700, letterSpacing: -1, lineHeight: 32 },
-      "Stat 72": { size: 72, fontWeight: 800, letterSpacing: -3.4, lineHeight: 72 },
-      "Stat 52": { size: 52, fontWeight: 800, letterSpacing: -2.2, lineHeight: 54 },
-      "Price 40": { size: 40, fontWeight: 800, letterSpacing: -1.6, lineHeight: 42 },
-      "Body 16": { size: 16, fontWeight: 400, lineHeight: 25 },
-      "Quote 22": { size: 22, fontWeight: 600, letterSpacing: -0.4, lineHeight: 30 },
-      "Section 44": { size: 44, fontWeight: 800, letterSpacing: -1.8, lineHeight: 47 },
-      "Section 30": { size: 30, fontWeight: 800, letterSpacing: -1, lineHeight: 34 },
-      "Head 14": { size: 14, fontWeight: 800, lineHeight: 20, textAlign: "CENTER" },
-      "Group 12": { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.2, lineHeight: 16, textCase: "UPPER" },
-      "Row 16": { size: 16, fontWeight: 500, lineHeight: 22 },
-      "Row 14": { size: 14, fontWeight: 500, lineHeight: 20 },
-      "Value 14": { size: 14, fontWeight: 700, lineHeight: 20, textAlign: "CENTER" },
-      "List 17": { size: 17, fontWeight: 500, lineHeight: 26 },
-      "Clock 22": { ...MONO, size: 22, fontWeight: 700, letterSpacing: -0.6, lineHeight: 28 },
-      "Step 22": { size: 22, fontWeight: 800, letterSpacing: -0.5, lineHeight: 28 },
-      "Small 14": { size: 14, fontWeight: 400, lineHeight: 22 },
-      "Foot head 14": { size: 14, fontWeight: 800, lineHeight: 22 }
-    });
-    buttons(k, { style: s("Button 15"), pad: [13, 22], radius: 12 });
-    k.component("Button light", { direction: "HORIZONTAL", width: "HUG", radius: 12, align: "CENTER", fill: "card", padding: { top: 13, right: 22, bottom: 13, left: 22 }, props: { Label: "Start the import" } }, (id) => {
-      k.propText(id, "Label", { style: s("Button 15"), color: "onCard", autoWidth: true });
-    });
-    k.component("Button on card", { direction: "HORIZONTAL", width: "HUG", radius: 12, align: "CENTER", stroke: { color: "onCard", width: 1.5 }, padding: { top: 13, right: 22, bottom: 13, left: 22 }, props: { Label: "See it side by side" } }, (id) => {
-      k.propText(id, "Label", { style: s("Button 15"), color: "onCard", autoWidth: true });
-    });
-    const R = 24;
-    const mark = (parent, yes) => {
-      const m = k.stack(parent, { width: 26, height: 26, radius: 13, fill: yes ? "good" : "miss", align: "CENTER", justify: "CENTER", name: "Mark" });
-      if (yes) tick(k, m, 14, "card", { weight: 2.5 });
-      else cross(k, m, 12, "card", { weight: 2.5 });
-    };
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 88, top: 28 });
-    k.timeline(sheet, { duration: 6e3, fps: 30 });
-    nav(k, sheet, { links: ["Side by side", "Switching", "Pricing", "Customers"], cta: `Import from ${THEM}`, style: s("Nav 15"), brandStyle: s("Brand 21") });
-    const bento = k.stack(sheet, { gap: 20, name: "Bento" });
-    const top = k.stack(bento, { direction: "HORIZONTAL", gap: 20, name: "Bento top" });
-    const claim = k.stack(top, { gap: 22, fill: "card", radius: R, padding: 44, name: "Claim cell" });
-    k.text(claim, `{{brand.name}} vs ${THEM}`, { style: s("Versus 14"), color: "cardMuted", name: "Versus" });
-    k.text(claim, `Everything your team does in ${THEM}. None of the admin.`, { style: s("Display 64"), color: "onCard", name: "Headline" });
-    k.text(claim, `Pebble is an issue tracker for teams of under twenty. It does boards, a backlog and sprints, it opens before you have finished the thought, and nobody has to be trained to run it.`, { style: s("Lead 19"), color: "cardMuted", name: "Lead" });
-    const cta = k.stack(claim, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "CTAs" });
-    k.instance(cta, "Button", { Label: `Import your ${THEM} workspace` }, { name: "CTA primary" });
-    k.instance(cta, "Button on card", { Label: "See it side by side" }, { name: "CTA quiet" });
-    const race = k.stack(top, { width: 440, height: "FILL", gap: 18, fill: "panel", radius: R, padding: 32, justify: "SPACE_BETWEEN", name: "Race cell" });
-    k.text(race, "Opening a board of 2,000 issues", { style: s("Cell label 13"), color: "panelMuted", name: "Race label" });
-    const lanes = k.stack(race, { gap: 22, name: "Lanes" });
-    const lane = (who, time, bar, fill, timeName, win) => {
-      const l = k.stack(lanes, { gap: 8, name: "Race lane" });
-      const head = k.stack(l, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Lane head" });
-      k.text(head, who, { style: s("Lane 15"), color: "onPanel", name: "Lane name" });
-      if (win) {
-        const w = k.stack(head, { direction: "HORIZONTAL", width: "HUG", fill: "tile", radius: 999, padding: { top: 2, right: 9, bottom: 2, left: 9 }, name: "Winner" });
-        k.text(w, "15\xD7 faster", { style: s("Cell label 13"), color: "onCard", autoWidth: true, name: "Winner words" });
-      }
-      k.text(head, time, { style: s("Time 28"), color: "onPanel", autoWidth: true, name: timeName });
-      const track = k.stack(l, { direction: "HORIZONTAL", width: 256, height: 14, radius: 7, fill: "cardMuted", clip: true, name: "Lane track" });
-      k.rect(track, 256, 14, fill, { radius: 7, name: bar });
-    };
-    lane("{{brand.name}}", "0.4 s", "Ours bar", "tile", "Ours time", true);
-    lane(THEM, "6.2 s", "Theirs bar", "them", "Theirs time", false);
-    k.text(race, "Median cold load on a 2023 laptop over office wifi, measured 2 October 2026.", { style: s("Small 14"), color: "panelMuted", name: "Race note" });
-    const under = k.stack(bento, { direction: "HORIZONTAL", gap: 20, name: "Bento row" });
-    const imp = k.stack(under, { width: 340, height: "FILL", gap: 8, fill: "tile", radius: R, padding: 32, name: "Bento cell" });
-    k.text(imp, "A five-year workspace, imported in", { style: s("Cell label 13"), color: "onCard", name: "Import label" });
-    k.text(imp, "11 min", { style: s("Stat 72"), color: "onCard", name: "Import figure" });
-    k.text(imp, "4,812 issues, 38 people and 212 sprints, with every comment and attachment.", { style: s("Body 16"), color: "onCard", name: "Import text" });
-    const price = k.stack(under, { gap: 16, fill: "card", radius: R, padding: 32, name: "Bento cell" });
-    k.text(price, "Per person, per month, for a team of 12", { style: s("Cell label 13"), color: "cardMuted", name: "Price label" });
-    for (const [who, amount, frac, fill] of [["{{brand.name}}", "$6", 0.39, "good"], [THEM, "$15.25", 1, "them"]]) {
-      const p = k.stack(price, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Price line" });
-      k.text(p, amount, { style: s("Price 40"), color: "onCard", width: 132, name: "Price amount" });
-      const col = k.stack(p, { gap: 6, name: "Price bar column" });
-      k.text(col, who, { style: s("Cell label 13"), color: "cardMuted", name: "Price name" });
-      const laneP = k.stack(col, { direction: "HORIZONTAL", height: 12, radius: 6, fill: "lane", clip: true, name: "Price lane" });
-      k.rect(laneP, Math.round(200 * frac), 12, fill, { radius: 6, name: "Price bar" });
-    }
-    k.text(price, "That is $1,332 a year back, before you count the admin\u2019s time.", { style: s("Body 16"), color: "cardMuted", name: "Price text" });
-    const said = k.stack(under, { width: 340, height: "FILL", gap: 14, fill: "card", radius: R, padding: 32, justify: "SPACE_BETWEEN", name: "Bento cell" });
-    k.text(said, "\u201CWe deleted 214 custom fields on the way over and nobody noticed.\u201D", { style: s("Quote 22"), color: "onCard", name: "Said words" });
-    k.text(said, "Lena Fischer, engineering lead at Ostra, a team of 14", { style: s("Small 14"), color: "cardMuted", name: "Said by" });
-    const side = k.stack(sheet, { gap: 28, name: "Side by side" });
-    const sideHead = k.stack(side, { direction: "HORIZONTAL", gap: 56, align: "MAX", name: "Table head" });
-    k.text(sideHead, `Side by side, including where ${THEM} wins.`, { style: s("Section 44"), color: "text", name: "Table title" });
-    k.text(sideHead, `Checked against ${THEM}\u2019s public documentation and Standard plan. If a row is out of date, tell us and we will fix it the same day.`, { style: s("Body 16"), color: "onPaper", width: 400, name: "Table lead" });
-    const table = k.stack(side, { fill: "card", radius: R, clip: true, effects: [soft(0.06, 12, 36)], name: "Table" });
-    const COL = 148;
-    const header = k.stack(table, { direction: "HORIZONTAL", gap: 0, align: "CENTER", padding: { top: 18, right: 20, bottom: 18, left: 28 }, name: "Table header" });
-    k.text(header, "What you need", { style: s("Cell label 13"), color: "cardMuted", name: "Header feature" });
-    const oursHead = k.stack(header, { width: COL, align: "CENTER", name: "Column head" });
-    k.text(oursHead, "{{brand.name}}", { style: s("Head 14"), color: "onCard", name: "Column name" });
-    const theirsHead = k.stack(header, { width: COL, align: "CENTER", name: "Column head" });
-    k.text(theirsHead, THEM, { style: s("Head 14"), color: "cardMuted", name: "Column name" });
-    for (const [group, rows] of TABLE) {
-      const g = k.stack(table, { fill: "lane", padding: { top: 8, right: 28, bottom: 8, left: 28 }, name: "Group" });
-      k.text(g, group, { style: s("Group 12"), color: "onCard", name: "Group name" });
-      rows.forEach(([feature, ours, theirs], i) => {
-        if (i) rule(k, table, "hairline");
-        const r = k.stack(table, { direction: "HORIZONTAL", gap: 0, align: "CENTER", padding: { top: 14, right: 20, bottom: 14, left: 28 }, name: "Table row" });
-        k.text(r, feature, { style: s("Row 16"), color: "onCard", name: "Feature" });
-        for (const [v, ink] of [[ours, "cardGood"], [theirs, "cardMuted"]]) {
-          const c = k.stack(r, { width: COL, align: "CENTER", name: "Value cell" });
-          if (typeof v === "string") k.text(c, v, { style: s("Value 14"), color: ink, name: "Value" });
-          else mark(c, v);
-        }
-      });
-    }
-    const fit = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, name: "Fit" });
-    const list = (title, items, fill, ink, yes) => {
-      const c = k.stack(fit, { ...yes ? { height: "FILL" } : {}, gap: 16, fill, radius: R, padding: 36, name: "Fit cell" });
-      k.text(c, title, { style: s("Section 30"), color: ink, name: "Fit title" });
-      for (const it of items) {
-        const l = k.stack(c, { direction: "HORIZONTAL", gap: 12, name: "Fit line" });
-        const bullet = k.stack(l, { width: 22, height: 26, align: "CENTER", justify: "CENTER", name: "Fit bullet" });
-        if (yes) tick(k, bullet, 22, ink, { weight: 3, name: "Fit tick" });
-        else k.rect(bullet, 14, 3, ink, { name: "Fit dash" });
-        k.text(l, it, { style: s("List 17"), color: ink, name: "Fit text" });
-      }
-    };
-    list("Switch if", SWITCH_IF, "primary", "onPrimary", true);
-    list(`Stay on ${THEM} if`, STAY_IF, "card", "onCard", false);
-    const sw = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, name: "Switching" });
-    const swHead = k.stack(sw, { width: 400, gap: 16, name: "Switching head" });
-    k.text(swHead, "Switching takes a lunch break.", { style: s("Section 44"), color: "text", name: "Switching title" });
-    k.text(swHead, "You do not migrate over a quarter. You import over a sandwich, run both for a while, and decide.", { style: s("Lead 19"), color: "onPaper", name: "Switching lead" });
-    const rail = k.stack(sw, { gap: 0, name: "Rail" });
-    STEPS.forEach(([time, name, what], i) => {
-      const r = k.stack(rail, { direction: "HORIZONTAL", gap: 20, name: "Stop" });
-      k.text(r, time, { style: s("Clock 22"), color: "text", width: 92, name: "Stop time" });
-      const post = k.stack(r, { width: 18, height: "FILL", align: "CENTER", gap: 0, name: "Post" });
-      k.ellipse(post, 18, i === 2 ? "primary" : "card", { name: "Stop dot", stroke: { color: "primary", width: 3 } });
-      if (i < STEPS.length - 1) k.stack(post, { width: 3, height: "FILL", fill: "primary", name: "Stop line" });
-      const words = k.stack(r, { gap: 4, padding: { top: 0, right: 0, bottom: 30, left: 0 }, name: "Stop words" });
-      k.text(words, name, { style: s("Step 22"), color: "text", name: "Stop name" });
-      k.text(words, what, { style: s("Body 16"), color: "onPaper", name: "Stop text" });
-    });
-    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", fill: "primary", radius: R, padding: 48, name: "Band" });
-    const bandCopy = k.stack(band, { gap: 12, name: "Band copy" });
-    k.text(bandCopy, `Bring your ${THEM} workspace. Keep every issue key.`, { style: s("Section 44"), color: "onPrimary", name: "Band title" });
-    k.text(bandCopy, "Free for 30 days, then $6 a person. If you would rather not do it alone, we will run the import with you on a call.", { style: s("Lead 19"), color: "onPrimary", name: "Band text" });
-    k.instance(bandCopy, "Button light", { Label: "Start the import" }, { name: "Band button" });
-    const job = k.stack(band, { width: 380, gap: 12, fill: "card", radius: 18, padding: 24, effects: [soft(0.18, 16, 40)], name: "Import card" });
-    k.text(job, `Import from ${THEM} \xB7 finished`, { style: s("Cell label 13"), color: "cardMuted", name: "Job label" });
-    for (const [what, n] of [["Issues", "4,812"], ["People", "38"], ["Sprints", "212"], ["Attachments", "9,340"]]) {
-      const l = k.stack(job, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Job line" });
-      tick(k, l, 16, "good", { weight: 2.5, name: "Job tick" });
-      k.text(l, what, { style: s("Row 14"), color: "onCard", name: "Job what" });
-      k.text(l, n, { style: s("Row 14"), color: "cardMuted", autoWidth: true, name: "Job count" });
-    }
-    k.stack(job, { height: 8, radius: 4, fill: "good", name: "Job bar" });
-    footer(k, sheet, {
-      about: "Issue tracking for teams of under twenty. Built by nine people in Rotterdam.",
-      columns: [["Compare", [`vs ${THEM}`, "vs spreadsheets", "vs sticky notes"]], ["Product", ["Boards", "Import", "Pricing", "Changelog"]], ["Company", ["Customers", "Security", "Contact"]]],
-      legal: `\xA9 2026 Pebble Software B.V. ${THEM} is the trademark of its owner. Comparison last checked 2 October 2026.`,
-      brandStyle: s("Brand 21"),
-      headStyle: s("Foot head 14"),
-      linkStyle: s("Small 14"),
-      ruleColor: "hairline"
-    });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    respond(k, sheet, s, {
-      stack: ["Bento top", "Bento row", "Table head", "Fit", "Switching", "Band", "Footer columns"],
-      restyle: {
-        "Display 64": { laptop: "Display 54", tablet: "Display 46", mobile: "Display 34" },
-        "Section 44": { tablet: "Section 30", mobile: "Section 30" },
-        "Lead 19": { mobile: "Lead 17" },
-        "Stat 72": { mobile: "Stat 52" },
-        "Row 16": { mobile: "Row 14" }
-      },
-      gap: { tablet: 64, mobile: 52 },
-      tweak: (kit, id, size) => {
-        const each = (name, props) => {
-          for (const n of kit.named(id, name)) kit.patch(n, props);
-        };
-        const pad = (v, h = v) => ({ top: v, right: h, bottom: v, left: h });
-        if (size === "laptop") {
-          each("Race cell", { width: 400 });
-          each("Claim cell", { padding: pad(36) });
-        }
-        if (size === "tablet") compactNav(kit, id, ["Customers"], 24);
-        if (size === "tablet" || size === "mobile") {
-          each("Table head", { itemSpacing: 16, counterAxisAlignItems: "MIN" });
-          each("Switching", { itemSpacing: 32 });
-          each("Band", { itemSpacing: 28, padding: pad(36) });
-          each("Lane track", { layoutSizingHorizontal: "FIXED" });
-          each("Lanes", { itemSpacing: 18 });
-          for (const n of ["Race cell", "Bento cell", "Fit cell"]) each(n, { layoutSizingVertical: "HUG" });
-        }
-        if (size === "mobile") {
-          each("Claim cell", { padding: pad(26, 20) });
-          each("Race cell", { padding: pad(24, 22), layoutSizingVertical: "HUG" });
-          each("Bento cell", { padding: pad(24, 22), layoutSizingVertical: "HUG" });
-          each("Fit cell", { padding: pad(26, 22), layoutSizingVertical: "HUG" });
-          each("Table header", { padding: { top: 14, right: 8, bottom: 14, left: 16 } });
-          each("Table row", { padding: { top: 12, right: 8, bottom: 12, left: 16 } });
-          each("Group", { padding: pad(7, 16) });
-          each("Column head", { width: 78 });
-          each("Value cell", { width: 78 });
-          each("Band", { padding: pad(26, 22) });
-          each("Import card", { padding: pad(18) });
-          each("Stop", { itemSpacing: 12 });
-          each("Stop time", { width: 84 });
-          each("Price amount", { width: 126 });
-          kit.named(id, "Price bar").forEach((n, i) => kit.patch(n, { width: i ? 130 : 50 }));
-          each("Footer lists", { itemSpacing: 16 });
-        }
-      }
-    });
-    return k.finish();
-  }
-});
-
-export {
-  saas_comparison_default
-};

package/dist/chunks/chunk-QY7XLYRL.js

@@ -1,141 +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 {
-  fitGraveyard,
-  graveyard,
-  halloweenBrand,
-  headstone,
-  middleRidge,
-  nearRidge,
-  nightSky,
-  plant,
-  ridgeY,
-  sheetGhost
-} from "./chunk-ZJDLBUEJ.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-AXAAXHZF.js";
-import {
-  outro,
-  pill,
-  postVariants
-} from "./chunk-KOAJ6HD2.js";
-import {
-  defineTemplate
-} from "./chunk-KGT34R7C.js";
-import {
-  Kit,
-  preset
-} from "./chunk-L5DTT5DC.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/social/halloween-offer-post.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 7e3;
-var TRICKS = [
-  { shape: "gothic", w: 250, at: 0.17, tilt: -3, name: "Surprise overages", epitaph: "Billed monthly, found quarterly." },
-  { shape: "round", w: 280, at: 0.46, tilt: 0, name: "\u201CContact sales\u201D", epitaph: "Nobody ever called back." },
-  { shape: "square", w: 236, at: 0.74, tilt: 4, name: "Per-seat maths", epitaph: "It only ever went up." }
-];
-var yard = (h, near, front = h + 240, moon = { x: 850, y: near - 330, size: 400 }) => graveyard({ w: 1080, h, near, loopMs: DURATION, front }, {
-  far: near - 200,
-  mid: near - 96,
-  moon,
-  tree: { x: 60, size: 330 },
-  bats: [{ x: 610, y: near - 470, size: 60 }, { x: 320, y: near - 400, size: 44 }, { x: 1010, y: near - 600, size: 70 }, { x: 480, y: near - 350, size: 36 }],
-  clouds: [{ x: 880, y: near - 250, w: 420 }, { x: 150, y: near - 330, w: 300 }],
-  starsTop: 30
-});
-var cues = [
-  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 500 } },
-  { layer: "Headline", preset: "lines-in", at: 100, params: { duration: 700 } },
-  { layer: "Trick stone", preset: "rise-in", at: 500, params: { duration: 650 }, stagger: { delay: 240 } },
-  { layer: "Ghost", preset: "rise-in", at: 1400, params: { duration: 900 } },
-  { layer: "Code", preset: "pop-in", at: 1900, params: { duration: 450 } },
-  { layer: "Terms", preset: "fade-in", at: 2100, params: { duration: 600 } },
-  { layer: "Ghost", preset: "wobble", at: 3600, params: { duration: 900 } },
-  { layer: "Code", preset: "pulse", at: 4400, params: { duration: 900, amount: 0.06 } },
-  // The graves go down again and the yard stands empty, as it began: the loop reburies them.
-  { layer: "Trick stone", preset: "drop-out", at: 6200, params: { duration: 450 }, stagger: { delay: 60 } },
-  { layer: "Ghost", preset: "fade-out", at: 6200, params: { duration: 400 } },
-  outro(["Eyebrow", "Headline", "Code", "Terms"], 6200)
-];
-var halloween_offer_post_default = defineTemplate({
-  id: "motion-halloween-offer-post",
-  meta: {
-    name: "Halloween offer post (animated)",
-    description: "A Halloween offer with a point of view: \u201CNo tricks. 31% off.\u201D over a cut-paper graveyard where the tricks of SaaS pricing are buried one headstone at a time, with the ghost of a spread-sheet in front of a harvest moon and the code at the foot \u2014 a seven-second loop, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "halloween", "offer", "discount", "sale", "graveyard", "headstone", "ghost", "cut paper", "saas", "post", "seasonal", "loop"],
-    platforms: ["instagram", "linkedin", "x", "threads", "facebook"],
-    formats: ["post", "portrait-post", "story"],
-    useCases: ["sale", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit("Halloween offer post (animated)", preset("ig-post"));
-    k.quantizeGeometry = true;
-    halloweenBrand(k, { offer: "No tricks.\n31% off.", code: "Code RIP31" });
-    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 700, letterSpacing: 5, lineHeight: 32, textCase: "UPPER" });
-    k.textStyle("Display 150", { ...SERIF, size: 150, fontWeight: 900, letterSpacing: -5, lineHeight: 144 });
-    k.textStyle("Rip 18", { size: 18, fontWeight: 800, letterSpacing: 6, lineHeight: 24, textCase: "UPPER", textAlign: "CENTER" });
-    k.textStyle("Name 30", { ...SERIF, size: 30, fontWeight: 900, letterSpacing: -0.4, lineHeight: 34, textAlign: "CENTER" });
-    k.textStyle("Epitaph 20", { ...SERIF, size: 20, fontStyle: "italic", fontWeight: 500, lineHeight: 26, textAlign: "CENTER" });
-    k.textStyle("Ref 17", { ...MONO, size: 17, fontWeight: 800, lineHeight: 20 });
-    k.textStyle("Code 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 38 });
-    k.textStyle("Terms 26", { size: 26, fontWeight: 600, lineHeight: 34 });
-    pill(k, "Code pill", { fill: "primary", ink: "onPrimary", style: "Code 30", label: "Code RIP31", pad: [14, 26], radius: 8 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, 72, "paper", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    const g = yard(1080, 900);
-    nightSky(k, sheet, g);
-    for (const t of TRICKS) headstone(k, sheet, { w: t.w, shape: t.shape, name: "Trick stone", absolute: { x: 0, y: 0 }, foot: 60, tilt: t.tilt, gap: 6, pad: 22, lines: [{ text: "R.I.P.", style: "Rip 18" }, { text: t.name, style: "Name 30" }, { text: t.epitaph, style: "Epitaph 20" }] });
-    middleRidge(k, sheet, g);
-    sheetGhost(k, sheet, { w: 176, style: "Ref 17", absolute: { x: 0, y: 0 }, loopMs: DURATION, cycles: 3 });
-    nearRidge(k, sheet, g);
-    const top = k.stack(sheet, { gap: 18, name: "Top" });
-    k.text(top, "{{brand.name}} \xB7 this Halloween", { style: "Eyebrow 24", color: "onPaper", name: "Eyebrow" });
-    k.text(top, "{{brand.offer}}", { style: "Display 150", color: "text", name: "Headline" });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "CENTER", name: "Foot" });
-    k.instance(foot, "Code pill", { Label: "{{brand.code}}" }, { name: "Code" });
-    k.text(foot, "Until midnight, 31 October \xB7 {{brand.site}}", { style: "Terms 26", color: "bone", name: "Terms" });
-    const stand = (kit, id, y, ghostX = 870) => {
-      kit.named(id, "Trick stone").forEach((s, i) => plant(kit, s, 1080 * TRICKS[i].at, ridgeY(y, "mid", 1080 * TRICKS[i].at), 54));
-      for (const gh of kit.named(id, "Ghost")) kit.patch(gh, { x: ghostX, y: y.near - 560 });
-    };
-    stand(k, sheet, g);
-    k.cues(sheet, cues);
-    k.variants(sheet, postVariants({ portrait: 80 }, {
-      // The taller sky is the moon's: it hangs bigger and higher.
-      portrait: (kit, id) => {
-        const y = yard(1350, 1150, void 0, { x: 800, y: 720, size: 520 });
-        fitGraveyard(kit, id, y);
-        stand(kit, id, y);
-      },
-      vertical: (kit, id) => {
-        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN", itemSpacing: 16 });
-        for (const n of kit.named(id, "Terms")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        const y = yard(1920, 1320, 1640, { x: 800, y: 900, size: 520 });
-        fitGraveyard(kit, id, y);
-        stand(kit, id, y, 740);
-      }
-    }));
-    return k.finish();
-  }
-});
-
-export {
-  halloween_offer_post_default
-};