@popcraft/kit 0.53.15 → 0.53.16

package/dist/chunks/chunk-EVGE7TMY.js

@@ -1,270 +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 {
-  SALES,
-  body,
-  dress,
-  edge,
-  figure,
-  gate,
-  label,
-  liftGate,
-  redress,
-  shout,
-  shove,
-  slab,
-  slam,
-  spinSticker,
-  stamp,
-  sticker,
-  tag,
-  thump,
-  ticketStub,
-  titleBar,
-  tollBrand
-} from "./chunk-Q3P3OCCA.js";
-import {
-  COLUMN,
-  camera,
-  float,
-  reelCuts,
-  reelSheet,
-  seenAt,
-  wideCut
-} from "./chunk-SFEH3O2W.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-NOVKCW2C.js";
-import {
-  barPaths
-} from "./chunk-AGV72YOJ.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-KYVOSUC6.js";
-import {
-  score
-} from "./chunk-FFTCIDXB.js";
-import {
-  hide,
-  patchAll,
-  restyle,
-  sizeOf
-} from "./chunk-T43CHLBH.js";
-import {
-  logoBadge,
-  pill
-} from "./chunk-FYXK7W3C.js";
-import {
-  defineTemplate
-} from "./chunk-UU6U4UDR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-FJACE5LJ.js";
-import {
-  ease
-} from "./chunk-5J6ZG7JO.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-63KP74KB.js";
-
-// templates/src/motion/style-brutalist-launch-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = score("psychRock");
-var { beat } = S;
-var STAGE = { width: COLUMN, height: 480 };
-var BAR = 52;
-var SCREEN = { width: STAGE.width, height: STAGE.height - BAR };
-var DROPZONE = { x: 24, y: 24, width: 356, height: 268 };
-var PRICE = { x: 404, y: 24, width: 372, height: 268 };
-var LINK = { x: 24, y: 316, width: 752, height: 88 };
-var COPY = { x: LINK.x + LINK.width - 164, y: LINK.y + 14, width: 150, height: 60 };
-var REST = { x: 716, y: 446 };
-var TARGET = { x: COPY.x + COPY.width / 2, y: BAR + COPY.y + COPY.height / 2 };
-var SHOTS = [
-  { t: beat(4), duration: 360, zoom: 1.5, x: DROPZONE.x + DROPZONE.width / 2, y: BAR + DROPZONE.y + DROPZONE.height / 2 },
-  { t: beat(6), duration: 360, zoom: 1.5, x: PRICE.x + PRICE.width / 2, y: BAR + PRICE.y + PRICE.height / 2 },
-  { t: beat(8), duration: 360, zoom: 1.4, x: 470, y: BAR + LINK.y + LINK.height / 2 },
-  { t: beat(14), duration: 360, zoom: 1 }
-];
-var SOLD = 16;
-var SALE_BEATS = [17, 18, 19, 20];
-var TOTAL = 1216;
-var WEEKEND = [3, 5, 4, 8, 7, 11, 9, 14, 12, 17];
-var swaps = [captionSwap(["Drop it. Name a price.", "Share the link you get.", "Buyers pay. You keep 95%.", "Open your booth for free."], 0, S.duration - 30)];
-var counts = [
-  { layer: "Price", at: beat(6.5), duration: beat(1.5), counter: { from: 0, to: 19, prefix: "$" } },
-  { layer: "Total", at: beat(SOLD + 1), duration: beat(6), counter: { from: 0, to: TOTAL, prefix: "$", separator: "," }, ease: ease.inOut("cubic") }
-];
-var cues = [
-  ...slam("Hook top", 0, { distance: 300 }),
-  ...stamp("Hook block", 240, { from: 1.8 }),
-  { layer: "Caption strip", preset: "fade-in", at: 0, params: { duration: 150 } },
-  shove("Brand row", beat(1), "left"),
-  ...stamp("Sticker", beat(2), { from: 1.9, rock: 9 }),
-  ...slam("Stage", beat(1.5), { distance: 420, shake: 14 }),
-  shove("Gate", beat(2.5), "right"),
-  ...slam("File tile", beat(4), { distance: 200, shake: 8 }),
-  { layer: "Upload bar", preset: "wipe-in", at: beat(4.5), params: { duration: beat(1.25), direction: "right", ease: ease.linear } },
-  { layer: "File name", preset: "fade-in", at: beat(5.75) - 100, params: { duration: 100, ease: ease.hold } },
-  { layer: "Link", preset: "typewriter", at: beat(8.5), params: { duration: beat(2.5) } },
-  thump("Copy button", beat(12), 0.1),
-  ...stamp("Copied", beat(12) + 80, { rock: 8 }),
-  { layer: "Flash", preset: "impact-frame", at: beat(SOLD) + 200, params: { duration: 160 } },
-  { layer: "Stage", preset: "camera-shake", at: beat(SOLD) + 200, params: { duration: 400, distance: 16, amount: 1 } },
-  ...stamp("Sale", beat(SALE_BEATS[0]), { gap: beat(1), from: 1.5, rock: 3 }),
-  { layer: "Total bars", preset: "wipe-in", at: beat(SOLD + 1), params: { duration: beat(6), direction: "right", ease: ease.inOut("cubic") } },
-  thump("Total", beat(SOLD + 7), 0.08),
-  ...slam("Call row", beat(24), { distance: 260, shake: 12 }),
-  thump("Call row", beat(26), 0.06),
-  { layer: "Sticker", preset: "wobble", at: beat(27), params: { duration: 600, amount: 10 } },
-  thump("Call row", beat(28), 0.06),
-  thump("Call row", beat(30), 0.06)
-];
-var style_brutalist_launch_reel_default = defineTemplate({
-  id: "motion-saas-style-brutalist-launch-reel",
-  meta: {
-    name: "Brutalist SaaS launch reel",
-    description: "A 17-second launch reel in the neo-brutalist look: the hook slams on in the first half second, then the product does its whole job in its window while a camera follows (a file drops in, the price counts up, the link types itself, a pointer copies it), the sales screen slams across, four sales are stamped on a beat apart while a toll barrier lifts for each, and the total counts up. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "launch", "reel", "neo-brutalist", "brutalism", "bold", "product demo", "counter", "cursor", "captions", "music", "audio", "tiktok", "shorts", "creator tool"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "video", "ad"],
-    useCases: ["launch", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit("Brutalist SaaS launch reel", preset("ig-story"));
-    k.quantizeGeometry = true;
-    tollBrand(k, ["paper", "text", "onText", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
-    k.textStyle("Shout 108", shout(108));
-    k.textStyle("Shout 76", shout(76));
-    k.textStyle("Brand 40", shout(40, { leading: 1.1 }));
-    k.textStyle("Sticker 64", shout(64, { center: true }));
-    k.textStyle("Sticker 18", label(18, { center: true }));
-    k.textStyle("Window 20", label(20));
-    k.textStyle("UI label 20", label(20));
-    k.textStyle("UI label 24", label(24));
-    k.textStyle("Tile 52", shout(52, { center: true }));
-    k.textStyle("Price 150", figure(150));
-    k.textStyle("Link 27", figure(27));
-    k.textStyle("Total 80", figure(80));
-    k.textStyle("Buyer 24", body(24, 800));
-    k.textStyle("Bought 18", body(18, 600));
-    k.textStyle("Toll 30", figure(30));
-    k.textStyle("Caption 40", body(40, 800));
-    k.textStyle("Button 32", shout(32, { leading: 1.25 }));
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "OPEN YOUR BOOTH: tollbooth.example", pad: [18, 24], radius: 0 });
-    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 20 });
-    dress(k, sheet);
-    ticketStub(k, sheet, { x: 150, y: 1540 });
-    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brand row" });
-    logoBadge(k, brand, { fill: "text", size: 34, pad: 11, radius: 0 });
-    k.text(brand, "{{brand.name}}", { style: "Brand 40", color: "text", width: 500, name: "Brand name" });
-    const hook = k.stack(sheet, { gap: 8, name: "Hook" });
-    k.text(hook, "STOP GIVING", { style: "Shout 108", color: "text", name: "Hook top" });
-    const block = slab(k, hook, { width: "HUG", fill: "primary", shadow: 12, padding: { top: 6, right: 22, bottom: 10, left: 20 }, name: "Hook block" });
-    k.text(block, "IT AWAY.", { style: "Shout 108", color: "onPrimary", autoWidth: true, name: "Hook words" });
-    k.patch(block, { rotation: -2 });
-    const stage = slab(k, sheet, { width: STAGE.width, height: STAGE.height, clip: true, fill: "card", shadow: 14, name: "Stage" });
-    const cam = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Camera", fill: "card" });
-    const bar = titleBar(k, cam, { title: "{{brand.site}}/new", style: "Window 20", height: BAR, right: "BOOTH 01" });
-    k.patch(bar, { layoutPositioning: "ABSOLUTE", x: 0, y: 0, width: STAGE.width, layoutSizingHorizontal: "FIXED" });
-    const make = k.frame(cam, { x: 0, y: BAR, ...SCREEN }, { name: "Make screen", fill: "card" });
-    const zone = k.frame(make, DROPZONE, { name: "Dropzone", fill: k.tint("accent", 0.22), stroke: { color: "text", width: 5, align: "INSIDE", join: "MITER", cap: "NONE", dash: [18, 12] } });
-    k.text(zone, "DROP A FILE", { style: "UI label 20", color: "onCard", autoWidth: true, name: "Dropzone label", absolute: { x: 20, y: 16 } });
-    const tile = slab(k, zone, { width: 176, height: 132, fill: "primary", rule: 5, shadow: 8, align: "CENTER", justify: "CENTER", gap: 0, name: "File tile", absolute: { x: 90, y: 58 } });
-    k.text(tile, ".ZIP", { style: "Tile 52", color: "onPrimary", name: "File kind" });
-    k.text(tile, "48 MB", { style: "UI label 20", color: "onPrimary", align: "CENTER", name: "File size" });
-    k.text(zone, "fieldnotes-presets.zip", { style: "UI label 20", color: "onCard", autoWidth: true, name: "File name", absolute: { x: 20, y: 212 } });
-    k.rect(zone, DROPZONE.width - 40, 12, "text", { name: "Upload bar", absolute: { x: 20, y: 242 } });
-    const price = slab(k, make, { width: PRICE.width, height: PRICE.height, fill: "paper", rule: 5, shadow: 8, gap: 0, padding: { top: 16, right: 20, bottom: 14, left: 20 }, justify: "SPACE_BETWEEN", name: "Price box", absolute: { x: PRICE.x, y: PRICE.y } });
-    k.text(price, "NAME A PRICE", { style: "UI label 20", color: "text", name: "Price label" });
-    k.text(price, "$19", { style: "Price 150", color: "text", name: "Price" });
-    tag(k, price, "ONE-TIME. YOURS TO SET.", { style: "UI label 20", fill: "card", ink: "onCard", name: "Price note" });
-    const link = slab(k, make, { direction: "HORIZONTAL", width: LINK.width, height: LINK.height, fill: "card", rule: 5, shadow: 8, align: "CENTER", padding: { top: 0, right: 14, bottom: 0, left: 20 }, justify: "SPACE_BETWEEN", name: "Link field", absolute: { x: LINK.x, y: LINK.y } });
-    k.text(link, "{{brand.site}}/fieldnotes", { style: "Link 27", color: "onCard", name: "Link" });
-    const copy = k.stack(link, { width: COPY.width, height: COPY.height, fill: "text", align: "CENTER", justify: "CENTER", name: "Copy button" });
-    k.text(copy, "COPY", { style: "UI label 24", color: "onText", autoWidth: true, name: "Copy label" });
-    const copied = tag(k, make, "LINK COPIED", { style: "UI label 24", fill: "accent", ink: "onAccent", pad: [10, 16], rule: 5, shadow: 6, name: "Copied", absolute: { x: 392, y: 282 } });
-    k.patch(copied, { rotation: -7 });
-    const sold = k.frame(cam, { x: 0, y: BAR, ...SCREEN }, { name: "Sales screen", fill: "card" });
-    const tally = slab(k, sold, { width: 332, height: 380, fill: "primary", rule: 5, shadow: 8, gap: 6, padding: { top: 18, right: 20, bottom: 18, left: 20 }, name: "Tally", absolute: { x: 24, y: 24 } });
-    k.text(tally, "TOLLS COLLECTED", { style: "UI label 20", color: "onPrimary", name: "Tally label" });
-    k.text(tally, `$${TOTAL.toLocaleString("en-US")}`, { style: "Total 80", color: "onPrimary", name: "Total" });
-    k.text(tally, "64 SALES SINCE FRIDAY", { style: "UI label 20", color: "onPrimary", name: "Tally note" });
-    k.vector(tally, 292, 150, barPaths(WEEKEND, 292, 150, 17, 8), "text", { name: "Total bars", absolute: { x: 20, y: 210 } });
-    const list = k.stack(sold, { width: 396, gap: 12, name: "Sales", absolute: { x: 380, y: 24 } });
-    SALES.forEach(([who, what, toll], i) => {
-      const row = slab(k, list, { direction: "HORIZONTAL", height: 86, fill: "card", rule: 4, shadow: 6, gap: 14, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 14 }, name: "Sale" });
-      const face = k.stack(row, { width: 50, height: 50, fill: ["accent", "paper", "primary", "accent"][i], stroke: edge(4), align: "CENTER", justify: "CENTER", name: "Buyer mark" });
-      k.text(face, who[0], { style: "Buyer 24", color: ["onAccent", "text", "onPrimary", "onAccent"][i], autoWidth: true, name: "Buyer initial" });
-      const words = k.stack(row, { gap: 0, name: "Sale words" });
-      k.text(words, who, { style: "Buyer 24", color: "onCard", name: "Buyer" });
-      k.text(words, what, { style: "Bought 18", color: "cardMuted", name: "Bought" });
-      k.text(row, `+$${toll}`, { style: "Toll 30", color: "onCard", autoWidth: true, name: "Toll" });
-    });
-    k.animate(sold, "translateX", [{ t: 0, v: SCREEN.width, ease: ease.hold }, { t: beat(SOLD), v: SCREEN.width, ease: ease.named("cubic", "in") }, { t: beat(SOLD) + 200, v: 0 }]);
-    k.rect(stage, STAGE.width, STAGE.height, [], { name: "Stage rule", stroke: edge(6), absolute: { x: 0, y: 0 } });
-    const p = pointer(k, stage, { ...REST, size: 96, fill: "card", edge: "text", ring: "primary" });
-    const barrier = gate(k, sheet, { width: STAGE.width, height: 72 });
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "text", ink: "onText", pad: [14, 24] });
-    const call = slab(k, sheet, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "primary", shadow: 12, gap: 0, name: "Call row" });
-    logoBadge(k, call, { fill: "text", size: 40, pad: 22, radius: 0 });
-    k.instance(call, "Button", { Label: "OPEN YOUR BOOTH: {{brand.site}}" }, { name: "Call" });
-    const badge = sticker(k, sheet, { size: 200, teeth: 18, fill: "accent", ink: "onAccent", big: "$0", small: "A MONTH\nTO OPEN", bigStyle: "Sticker 64", smallStyle: "Sticker 18", tilt: 9, shadow: 9, absolute: { x: 732, y: 470 } });
-    spinSticker(k, badge, 14);
-    k.rect(sheet, 1080, 1920, "card", { name: "Flash", absolute: { x: 0, y: 0 }, opacity: 0 });
-    camera(k, cam, STAGE.width, STAGE.height, SHOTS);
-    const seen = seenAt(STAGE.width, STAGE.height, SHOTS[2], TARGET), to = { dx: seen.x - REST.x, dy: seen.y - REST.y };
-    glide(k, p, [{ t: beat(9.5), dx: 0, dy: 0 }, { t: beat(11.5), ...to }, { t: beat(13.5), ...to }, { t: beat(15), dx: 110, dy: 60 }]);
-    clicks(k, p, [beat(12)]);
-    liftGate(k, barrier.arm, SALE_BEATS.map((b) => beat(b)), 300);
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    const refit = (kit, id) => {
-      redress(kit, id);
-      const { w, h } = sizeOf(kit, id);
-      patchAll(kit, id, "Flash", { x: 0, y: 0, width: w, height: h });
-    };
-    k.variants(sheet, [...reelCuts({ post: 40, portrait: 80 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
-        hide(kit, id, ["Brand row", "Ticket", "Gate", "Top band", "Foot band"]);
-        for (const n of ["Hook top", "Hook words"]) restyle(kit, id, n, "Shout 76");
-        patchAll(kit, id, "Sticker", { x: 850, y: 96 });
-        refit(kit, id);
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { itemSpacing: 20, counterAxisSpacing: 20, padding: { top: 90, right: 140, bottom: 90, left: 140 } });
-        hide(kit, id, ["Ticket", "Brand row"]);
-        patchAll(kit, id, "Sticker", { x: 840, y: 250 });
-        refit(kit, id);
-      }
-    }), wideCut(720, (kit, id, right) => {
-      const scale = right.width / STAGE.width, top = right.y + Math.round((right.height - (STAGE.height + 96) * scale) / 2);
-      hide(kit, id, ["Ticket"]);
-      float(kit, id, "Stage", right.x, top, { scale });
-      float(kit, id, "Gate", right.x, top + Math.round((STAGE.height + 36) * scale), { scale });
-      patchAll(kit, id, "Sticker", { x: 1600, y: 70 });
-      refit(kit, id);
-    }, { spacing: 26 })]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_brutalist_launch_reel_default
-};

package/dist/chunks/chunk-EVGXYWRI.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 {
-  trackInfo
-} from "./chunk-2U73TRBK.js";
-import {
-  MUSIC_HASH,
-  shippedWav
-} from "./chunk-ALABZX54.js";
-import {
-  hex
-} from "./chunk-FJACE5LJ.js";
-import {
-  contrastRatio
-} from "./chunk-4VHJKBVU.js";
-import {
-  analyzeAudio
-} from "./chunk-22F3MGKI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-63KP74KB.js";
-
-// templates/src/music/shared.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-function onColor(surface, candidates, ratio = 4.5) {
-  const s = hex(surface);
-  const pick = candidates.find((c) => contrastRatio(hex(c), s) >= ratio);
-  if (pick) return pick;
-  return contrastRatio(hex("#000000"), s) >= contrastRatio(hex("#FFFFFF"), s) ? "#000000" : "#FFFFFF";
-}
-function songClips(id, passes, fadeOut = 900) {
-  const info = trackInfo(id);
-  const n = Math.ceil(passes - 1e-9);
-  return Array.from({ length: n }, (_, p) => ({
-    id: `a${p + 1}`,
-    mediaHash: MUSIC_HASH[id],
-    name: `${info.title}${info.bpm ? ` (${info.bpm} BPM` : " ("}, made by PopCraft, CC0)`,
-    start: Math.round(p * info.durationMs * 1e3) / 1e3,
-    in: 0,
-    out: Math.round(Math.min(1, passes - p) * info.durationMs * 1e3) / 1e3,
-    lane: 0,
-    ...p === n - 1 && fadeOut ? { fadeOut } : {}
-  }));
-}
-var songLength = (id, passes) => Math.round(trackInfo(id).durationMs * passes);
-function withSong(k, sheet, id, passes, fadeOut) {
-  k.timeline(sheet, { duration: songLength(id, passes), fps: 30, audio: songClips(id, passes, fadeOut) });
-}
-var beatMemo = /* @__PURE__ */ new Map();
-function trackBeats(id) {
-  let b = beatMemo.get(id);
-  if (!b) {
-    const { channels, sampleRate } = shippedWav(MUSIC_HASH[id]);
-    b = [...analyzeAudio(channels, sampleRate).beats].map((t) => Math.round(t));
-    beatMemo.set(id, b);
-  }
-  return b;
-}
-function songBeats(id, passes) {
-  const one = trackBeats(id), len = trackInfo(id).durationMs;
-  return Array.from({ length: Math.ceil(passes - 1e-9) }, (_, p) => one.map((t) => Math.round(p * len + t))).flat().filter((t) => t < len * passes);
-}
-var SCRIM = 0.74;
-function scrim(k, parent, role, o = {}, alpha = SCRIM) {
-  return k.stack(parent, { radius: 36, padding: { top: 24, right: 32, bottom: 24, left: 32 }, align: "CENTER", ...o, fill: k.tint(role, alpha) });
-}
-function hexOf(c) {
-  const h = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, "0");
-  return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
-}
-
-export {
-  onColor,
-  songClips,
-  songLength,
-  withSong,
-  trackBeats,
-  songBeats,
-  SCRIM,
-  scrim,
-  hexOf
-};

package/dist/chunks/chunk-EXCAWNOK.js

@@ -1,122 +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 {
-  brand,
-  caption,
-  captionCues,
-  captionParts,
-  column,
-  glow,
-  rig,
-  sizes,
-  stage
-} from "./chunk-JHZS7LRC.js";
-import {
-  key
-} from "./chunk-EJH22D33.js";
-import {
-  PHONE,
-  deviceShadow,
-  devices
-} from "./chunk-QRXII5WN.js";
-import {
-  appScreens
-} from "./chunk-UIKLJRYQ.js";
-import {
-  defineTemplate
-} from "./chunk-UU6U4UDR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-FJACE5LJ.js";
-import {
-  ease
-} from "./chunk-5J6ZG7JO.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-63KP74KB.js";
-
-// templates/src/motion3d/vertical-promo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 12e3;
-var FPS = 30;
-var SIZES = ["ig-story"];
-var SPIN = 1500;
-var POP = 1900;
-var CAPTION = { name: "Headline", kicker: "Free on iPhone & Android", title: "Your money, finally makes sense." };
-var CTA = { name: "Call to action", title: "Link in bio. It\u2019s free.", cta: "Download Fern" };
-var CUES = [
-  ...captionCues(CAPTION, 400, 8200),
-  ...captionCues(CTA, 8700),
-  { layer: "Call to action button", preset: "pulse", at: 10400, params: { amount: 0.06 } }
-];
-var POPS = [
-  { name: "Balance", component: "Balance card", x: -270, y: -300, z: 260, ry: 16, rz: -6 },
-  { name: "Payment", component: "Transaction", x: 280, y: -20, z: 320, ry: -18, rz: 4 },
-  { name: "Chart", component: "Bar chart", x: -250, y: 250, z: 200, ry: 14, rz: 3 }
-];
-function build(k, sheet, s) {
-  k.nameSheet(sheet, `Vertical app promo \xB7 ${preset(s.preset).name}`);
-  glow(k, sheet, "primary", Math.round(1200 * s.u), s.W * 0.5, s.H * 0.55, 0.6);
-  glow(k, sheet, "accent", Math.round(560 * s.u), s.W * 0.2, s.H * 0.4, 0.2, "Glow accent");
-  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2400 * s.u });
-  const col = column(s);
-  const cy = col.top + 610;
-  const phoneRig = rig(k, scene, s, "Phone", PHONE.width, PHONE.height, s.W / 2, cy);
-  k.patch(phoneRig, { scaleX: 0.78, scaleY: 0.78 });
-  const phone = k.instance(phoneRig, "Phone", { Screen: { swap: "Screen / Home" } }, { name: "Handset" });
-  k.patch(phone, { effects: [deviceShadow(0.45, 50, 100)] });
-  key(k, phoneRig, "rotateY", [[0, -540, ease.out("expo")], [SPIN, 0]]);
-  key(k, phoneRig, "translateY", [[0, k.node(phoneRig).translateY + 900, ease.out("expo")], [SPIN, k.node(phoneRig).translateY]]);
-  k.behave(phoneRig, "rotateY", [{ kind: "sine", amp: 8, freq: 1 / 7 }]);
-  POPS.forEach((p, i) => {
-    const plate = k.stack(phoneRig, { width: "HUG", fill: "surface", radius: 28, padding: 14, name: p.name, effects: [deviceShadow(0.35, 30, 60)] });
-    k.instance(plate, p.component, {}, { name: p.component });
-    const box = k.finish().nodes[plate];
-    k.patch(plate, { x: Math.round((PHONE.width - box.width) / 2), y: Math.round((PHONE.height - box.height) / 2), translateX: p.x, translateY: p.y, z: p.z, rotateY: p.ry, rotation: p.rz });
-    const at = POP + i * 220;
-    key(k, plate, "z", [[at, 0, ease.back(1.6)], [at + 700, p.z]]);
-    key(k, plate, "translateX", [[at, 0, ease.back(1.6)], [at + 700, p.x]]);
-    key(k, plate, "translateY", [[at, 0, ease.back(1.6)], [at + 700, p.y]]);
-    key(k, plate, "opacity", [[at, 0, ease.out("cubic")], [at + 250, 1]]);
-    k.behave(plate, "z", [{ kind: "sine", amp: 24, freq: 0.35, phase: i / 3 }]);
-  });
-  captionParts(k, s, { kicker: CAPTION.kicker, cta: CTA.cta });
-  caption(k, sheet, s, { ...CAPTION, width: col.width, align: "CENTER", at: { x: col.x, y: col.top + 10 } });
-  const end = caption(k, sheet, s, { ...CTA, width: col.width, align: "CENTER", at: { x: col.x, y: 0 } });
-  const laid = k.finish().nodes[end];
-  k.patch(end, { y: Math.round(col.bottom - laid.height - 10) });
-  k.cues(sheet, CUES);
-}
-var vertical_promo_default = defineTemplate({
-  id: "motion-3d-vertical-promo",
-  meta: {
-    name: "Vertical app promo",
-    description: "A 12-second 9:16 reel: a phone spins in and the parts of its screen pop out toward you in 3D \u2014 balance, payment, weekly chart \u2014 under a headline, then the call to action lands. 30 fps, kept clear of the TikTok, Reels and Shorts interface",
-    category: "animation",
-    tags: ["animation", "3d", "app", "phone", "reel", "tiktok", "shorts", "vertical", "pop out", "promo"],
-    platforms: ["tiktok", "instagram", "youtube", "snapchat"],
-    formats: ["reel", "short", "story", "ad"],
-    useCases: ["launch", "announcement"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  motion: { cues: CUES },
-  build() {
-    const k = new Kit("Vertical app promo", preset(SIZES[0]));
-    brand(k, "dark");
-    appScreens(k, ["Home", "Insights", "Screenshot"]);
-    devices(k, ["Phone"]);
-    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
-    k.setCover(cover);
-    return k.finish();
-  }
-});
-
-export {
-  vertical_promo_default
-};

package/dist/chunks/chunk-EXGRNGIF.js

@@ -1,174 +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 {
-  buttons,
-  nav,
-  page,
-  webResponsive
-} from "./chunk-KLAIZ7BD.js";
-import {
-  defineTemplate
-} from "./chunk-UU6U4UDR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-FJACE5LJ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-63KP74KB.js";
-
-// templates/src/web/pricing-toggle.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var PLANS = [
-  { name: "Solo", pitch: "For one freelancer keeping their books tidy.", month: 12, features: ["Unlimited invoices and quotes", "Expenses from photographed receipts", "Quarterly tax estimates", "One bank connection", "Email support"] },
-  { name: "Studio", pitch: "For small studios with a few people billing.", month: 29, featured: true, features: ["Everything in Solo", "Up to five teammates", "Client portal with card payments", "Five bank connections", "Tracked time straight onto invoices"] },
-  { name: "Agency", pitch: "For agencies juggling many clients and currencies.", month: 59, features: ["Everything in Studio", "Unlimited teammates", "Multi-currency and VAT returns", "Invoices on your own domain", "A named accountant on call"] }
-];
-var FAQ = [
-  ["Can I switch plans later?", "Yes. Upgrade or downgrade whenever you like; we prorate the difference to the day."],
-  ["What happens after the 30-day trial?", "Nothing, unless you choose a plan. We never ask for a card up front."],
-  ["Do charities get a discount?", "Registered charities get 40% off any plan. Write to us from your organisation\u2019s address."]
-];
-var pricing_toggle_default = defineTemplate({
-  id: "web-pricing-toggle",
-  meta: {
-    name: "Pricing page with billing toggle",
-    description: "A pricing page whose monthly / yearly switch works in present mode: a variable toggle flips every price at once while the knob glides \u2014 three plans, features and FAQs, desktop to phone",
-    category: "web",
-    tags: ["pricing", "plans", "toggle", "interactive", "variables", "saas", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["launch", "sale"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  breakpoints: true,
-  build() {
-    const k = new Kit("Pricing page with billing toggle", preset("web-desktop"));
-    k.brand(
-      { paper: "#FAFAF7", text: "#1A1D24", onPaper: "#555C69", primary: "#0E7C66", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#1A1D24", cardMuted: "#5C6370", line: "#E3E5E8", tint: "#E3F2EE", onTint: "#0B5E4E" },
-      { name: "Ledgerly" }
-    );
-    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
-    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
-    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Button 16", { size: 16, fontWeight: 600, lineHeight: 24 });
-    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 1, lineHeight: 20, textCase: "UPPER", textAlign: "CENTER" });
-    k.textStyle("Display 56", { size: 56, fontWeight: 800, letterSpacing: -1.6, lineHeight: 64, textAlign: "CENTER" });
-    k.textStyle("Display 36", { size: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 44, textAlign: "CENTER" });
-    k.textStyle("Lead 19", { size: 19, fontWeight: 400, lineHeight: 30, textAlign: "CENTER" });
-    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26, textAlign: "CENTER" });
-    k.textStyle("Switch 16", { size: 16, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Switch on 16", { size: 16, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Badge 13", { size: 13, fontWeight: 700, lineHeight: 18 });
-    k.textStyle("Plan 22", { size: 22, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Body 15", { size: 15, fontWeight: 400, lineHeight: 22 });
-    k.textStyle("Price 48", { size: 48, fontWeight: 800, letterSpacing: -1.5, lineHeight: 52 });
-    k.textStyle("Note 14", { size: 14, fontWeight: 400, lineHeight: 20 });
-    k.textStyle("Feature 15", { size: 15, fontWeight: 500, lineHeight: 22 });
-    k.textStyle("Tick 13", { size: 13, fontWeight: 800, lineHeight: 16 });
-    k.textStyle("Section 28", { size: 28, fontWeight: 800, letterSpacing: -0.6, lineHeight: 36 });
-    k.textStyle("Question 17", { size: 17, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
-    buttons(k, { style: "Button 16" });
-    k.component("Button card", { direction: "HORIZONTAL", width: "HUG", radius: 10, align: "CENTER", stroke: { color: "onCard", width: 1.5 }, padding: { top: 14, right: 24, bottom: 14, left: 24 }, props: { Label: "Try Solo free" } }, (id) => {
-      k.propText(id, "Label", { style: "Button 16", color: "onCard", autoWidth: true });
-    });
-    k.component("Feature", { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", props: { Label: "Unlimited invoices and quotes" } }, (id) => {
-      const tick = k.stack(id, { direction: "HORIZONTAL", width: 20, height: 20, radius: 10, fill: "tint", align: "CENTER", justify: "CENTER", name: "Tick" });
-      k.text(tick, "\u2714", { style: "Tick 13", color: "onTint", autoWidth: true, name: "Tick mark" });
-      k.propText(id, "Label", { style: "Feature 15", color: "onCard", autoWidth: true });
-    });
-    k.component("Badge", { direction: "HORIZONTAL", width: "HUG", fill: "tint", radius: 999, padding: { top: 5, right: 12, bottom: 5, left: 12 }, props: { Label: "Two months free" } }, (id) => {
-      k.propText(id, "Label", { style: "Badge 13", color: "onTint", autoWidth: true });
-    });
-    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
-      direction: "HORIZONTAL",
-      width: "HUG",
-      gap: 14,
-      align: "CENTER",
-      padding: 4,
-      description: "Monthly or yearly billing: click to switch, and the knob glides across. On the pricing page, the click also flips the billing variables every price is bound to.",
-      props: { Left: "Monthly", Right: "Yearly" }
-    }, (state, id) => {
-      k.propText(id, "Left", { style: state === "Monthly" ? "Switch on 16" : "Switch 16", color: state === "Monthly" ? "text" : "onPaper", autoWidth: true });
-      const track = k.stack(id, { direction: "HORIZONTAL", width: 56, height: 30, radius: 15, padding: 3, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: "primary", name: "Track" });
-      k.ellipse(track, 24, "card", { name: "Knob" });
-      k.propText(id, "Right", { style: state === "Yearly" ? "Switch on 16" : "Switch 16", color: state === "Yearly" ? "text" : "onPaper", autoWidth: true });
-    });
-    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Yearly", 240, "EASE_IN_OUT");
-    k.changeTo("Billing switch/Yearly", "ON_CLICK", "Billing switch/Monthly", 240, "EASE_IN_OUT");
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 56, top: 32 });
-    nav(k, sheet, { links: ["Features", "Pricing", "Accountants", "Sign in"], cta: "Start free trial", style: "Nav 16", brandStyle: "Brand 20" });
-    const head = k.stack(sheet, { gap: 16, align: "CENTER", padding: { top: 24, right: 0, bottom: 0, left: 0 }, name: "Header" });
-    k.text(head, "Pricing", { style: "Eyebrow 14", color: "text", name: "Eyebrow" });
-    k.text(head, "Simple pricing for independent work", { style: "Display 56", color: "text", name: "Headline", width: 820 });
-    k.text(head, "Every plan includes a 30-day trial, unlimited clients and bank-grade security. Pay monthly, or yearly and get two months free.", { style: "Lead 19", color: "onPaper", name: "Lead", width: 720 });
-    const sw = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", padding: { top: 12, right: 0, bottom: 0, left: 0 }, name: "Switch row" });
-    const toggle = k.instance(sw, "Billing switch", { Left: "Monthly", Right: "Yearly" }, { name: "Billing toggle" });
-    k.setVariable(toggle, monthly, { toggle: true });
-    k.setVariable(toggle, yearly, { toggle: true });
-    k.instance(sw, "Badge", { Label: "Two months free" }, { name: "Saving" });
-    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Plans" });
-    for (const p of PLANS) {
-      const card = k.stack(plans, { gap: 20, fill: "card", radius: 18, stroke: { color: p.featured ? "primary" : "line", width: p.featured ? 2 : 1 }, padding: 32, name: "Plan" });
-      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan head" });
-      k.text(top, p.name, { style: "Plan 22", color: "onCard", autoWidth: true, name: "Plan name" });
-      if (p.featured) k.instance(top, "Badge", { Label: "Most popular" }, { name: "Popular" });
-      k.text(card, p.pitch, { style: "Body 15", color: "cardMuted", name: "Pitch" });
-      const price = k.stack(card, { name: "Price" });
-      const block = (which) => {
-        const b = k.stack(price, { gap: 4, fill: "card", name: `${which} price` });
-        k.text(b, which === "Monthly" ? `$${p.month}` : `$${p.month * 10}`, { style: "Price 48", color: "onCard", name: "Amount" });
-        k.text(b, which === "Monthly" ? "per month, billed monthly. Cancel any time." : `per year, billed yearly: you save $${p.month * 2}.`, { style: "Note 14", color: "cardMuted", name: "Billed" });
-        return b;
-      };
-      k.bindVariable(block("Monthly"), "visible", monthly);
-      k.bindVariable(block("Yearly"), "visible", yearly);
-      k.instance(card, p.featured ? "Button" : "Button card", { Label: p.featured ? "Start your free trial" : `Try ${p.name} free` }, { name: "Plan button" });
-      const list = k.stack(card, { gap: 12, padding: { top: 8, right: 0, bottom: 0, left: 0 }, name: "Features" });
-      for (const f of p.features) k.instance(list, "Feature", { Label: f }, { name: "Feature" });
-    }
-    const faq = k.stack(sheet, { gap: 24, padding: { top: 24, right: 0, bottom: 0, left: 0 }, name: "FAQ" });
-    k.text(faq, "Questions people ask", { style: "Section 28", color: "text", name: "FAQ title" });
-    const qs = k.stack(faq, { direction: "HORIZONTAL", gap: 32, name: "FAQ list" });
-    for (const [q, a] of FAQ) {
-      const item = k.stack(qs, { gap: 8, name: "Question" });
-      k.text(item, q, { style: "Question 17", color: "text", name: "Q" });
-      k.text(item, a, { style: "Body 15", color: "onPaper", name: "A" });
-    }
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, padding: { top: 24, right: 0, bottom: 0, left: 0 }, name: "Footer" });
-    k.text(foot, "Prices in US dollars, before sales tax. Yearly plans are billed once, up front.", { style: "Footer 14", color: "onPaper", name: "Small print" });
-    k.text(foot, "hello@ledgerly.app", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Email" });
-    webResponsive(k, sheet, {
-      stack: ["Plans", "FAQ list", "Footer"],
-      stackMobile: ["Switch row"],
-      restyle: { "Display 56": { tablet: "Display 36", mobile: "Display 36" }, "Lead 19": { mobile: "Lead 17" } },
-      hide: { mobile: ["Nav links"] },
-      tweak: (kit, id, size) => {
-        for (const n of [...kit.named(id, "Headline"), ...kit.named(id, "Lead")]) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        if (size === "laptop") for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 28, right: 24, bottom: 28, left: 24 } });
-        if (size === "mobile") for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 24, right: 20, bottom: 24, left: 20 } });
-      }
-    });
-    k.finish();
-    const prices = [...new Set(k.doc.pages.flatMap((p) => k.named(p, "Price")))];
-    for (const price of prices) k.patch(k.node(price).childIds[1], { visible: false });
-    k.finish();
-    for (const price of prices) {
-      const [m, y] = k.node(price).childIds;
-      k.patch(y, { x: k.node(m).x, y: k.node(m).y });
-    }
-    return k.doc;
-  }
-});
-
-export {
-  pricing_toggle_default
-};