@popcraft/kit 0.27.0 → 0.28.0

package/dist/chunks/chunk-NURSPTT3.js

@@ -1,250 +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,
-  bloomAt,
-  button,
-  code,
-  deep,
-  display,
-  figure,
-  gradientBrand,
-  label,
-  lockup,
-  longShadow,
-  mesh,
-  orbitCam,
-  parallax,
-  plateChip,
-  rimLight,
-  tilted,
-  ts
-} from "./chunk-LL54J6WR.js";
-import {
-  section
-} from "./chunk-3TBNWHDN.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-7USFB6HS.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-C7BYFVZT.js";
-import {
-  presetSafeRect
-} from "./chunk-GUR6XRHF.js";
-import {
-  pt3
-} from "./chunk-BNVLVZUT.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  Kit,
-  preset
-} from "./chunk-6QHAQLJ4.js";
-import {
-  ease
-} from "./chunk-QFFXZQH5.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/style-gradient-feature-demo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("launch", 0, 7);
-var { beat } = S;
-var NAME = "Gradient SaaS feature demo";
-var W = 860;
-var H = 660;
-var APP = beat(1);
-var DROP = beat(4);
-var MAP = beat(6);
-var CLICK = beat(11);
-var DONE = beat(21);
-var CLOSE = beat(22);
-var HEADS = ["Turn one CSV\ninto 2,400 videos.", "2,400 videos.\nOne API call."];
-var STEPS = ["Step 1 of 3 \xB7 drop the CSV", "Step 2 of 3 \xB7 map the columns", "Step 3 of 3 \xB7 render them all", `New in ${SPOOL.version} \xB7 Batch renders`];
-var MAPS = [["name", "{{name}}"], ["km", "{{distance}}"], ["route", "{{map.path}}"]];
-var COLS = 5;
-var ROWS = 4;
-var cues = [
-  { layer: "Head wrap", preset: "blur-in", at: 0, params: { duration: 900, amount: 26 } },
-  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 700 } },
-  { layer: "Step chip", preset: "rise-in", at: 300, params: { duration: 700, distance: 18 } },
-  { layer: "Scene", preset: "blur-in", at: APP, params: { duration: 1100, amount: 30 } },
-  { layer: "Map row", preset: "rise-in", at: MAP, stagger: { delay: beat(1), order: "selection" }, params: { duration: 600, distance: 20 } },
-  { layer: "Drop zone", preset: "pulse", at: DROP, params: { duration: 800, amount: 0.04 } },
-  { layer: "Render button", preset: "pulse", at: CLICK, params: { duration: 600, amount: 0.05 } },
-  { layer: "Call", preset: "rise-in", at: CLOSE, params: { duration: 800, distance: 30 } },
-  { layer: "Took chip", preset: "rise-in", at: CLOSE + beat(1), params: { duration: 800, distance: 30 } }
-];
-var counts = [
-  { layer: "Batch figure", at: CLICK + 200, duration: DONE - CLICK - 200, ease: ease.inOut("sine"), counter: { from: 0, to: SPOOL.rows } }
-];
-var swaps = [captionSwap(["Drop in your CSV.", "Map columns to fields.", "Click render. That\u2019s it.", "2,400 videos, 3 minutes."], 0, S.duration - 30, { stagger: 70, in: 340, out: 240, rise: 16 })];
-var LAYS = {
-  "ig-story": { x: 140, w: 800, brandY: 250, headY: 336, head: "Head 84", scene: { x: 0, y: 600, w: 1080, h: 820 }, scale: 1, rotY: -22, mesh: { x: -120, y: 660, w: 1320, h: 1180 }, capY: 1352, capW: 800 },
-  "ig-post": { x: 72, w: 936, brandY: 60, headY: 136, head: "Head 66", scene: { x: 150, y: 330, w: 930, h: 680 }, scale: 0.84, rotY: -24, mesh: { x: 280, y: 320, w: 840, h: 760 }, capY: 968, capW: 600 },
-  "video-1080p": { x: 110, w: 680, brandY: 92, headY: 186, head: "Head 84", scene: { x: 760, y: 40, w: 1160, h: 1e3 }, scale: 1.12, rotY: -26, mesh: { x: 800, y: 60, w: 1120, h: 1020 }, capY: 914, capW: 680 }
-};
-var style_gradient_feature_demo_default = defineTemplate({
-  id: "motion-saas-style-gradient-feature-demo",
-  meta: {
-    name: NAME,
-    description: "A 14-second feature demo in the gradient and depth look: a pointer turns one spreadsheet into 2,400 personalised videos in a window tilted in 3D space over a deep ocean ground and a warm coral-to-lagoon mesh. It drops the CSV, maps the columns, clicks render, and the camera dollies in as a grid of thumbnails lights up and the count runs to 2,400. Step line, specular sweep, music and burned-in captions. 9:16 with square and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "developer", "api", "video", "feature", "demo", "tutorial", "pointer", "counter", "captions", "music", "audio", "tiktok", "shorts"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "video"],
-    useCases: ["changelog", "education", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit(NAME, preset("ig-story"));
-    k.quantizeGeometry = true;
-    gradientBrand(k);
-    ts(k, "Win title 22", code(22));
-    ts(k, "Win small 20", code(20));
-    const st = {};
-    ts(k, "Brand 30", display(30));
-    ts(k, "Kicker 22", code(22));
-    for (const n of [66, 84]) ts(k, `Head ${n}`, display(n));
-    ts(k, "Caption 32", display(32, { lead: 1.3, weight: 600 }));
-    ts(k, "Button 28", display(28));
-    ts(k, "Site 22", code(22));
-    ts(k, "Map 22", code(22));
-    ts(k, "Batch 80", figure(80));
-    ts(k, "Label 18", label(18));
-    ts(k, "Render 24", display(24, { weight: 700 }));
-    button(k, "Call", { style: "Button 28", label: "Try Batch renders free", pad: [20, 32] });
-    const sheets = ["ig-story", "ig-post", "video-1080p"].map((id, i) => {
-      const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
-      lay(k, sheet, id, st);
-      return sheet;
-    });
-    k.setCover(sheets[0]);
-    return k.finish();
-  }
-});
-function batchWindow(k, rig) {
-  const win = k.stack(rig, { width: W, height: H, fill: "plate", radius: 26, clip: true, name: "Window", effects: rimLight(k), absolute: { x: 0, y: 0 } });
-  const top = k.stack(win, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", height: 64, padding: { top: 0, right: 22, bottom: 0, left: 24 }, name: "Title bar" });
-  const left = k.stack(top, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 18, name: "Title left" });
-  const lights = k.stack(left, { direction: "HORIZONTAL", width: "HUG", gap: 9, name: "Lights" });
-  for (const role of ["coral", "apricot", "lagoon"]) k.ellipse(lights, 14, role, { name: "Light" });
-  k.text(left, "Batch \xB7 weekly-recap", { style: "Win title 22", color: "onPlate", autoWidth: true, name: "Window title" });
-  k.text(top, SPOOL.region, { style: "Win small 20", color: "plateMuted", autoWidth: true, name: "Region" });
-  k.rect(win, "FILL", 1, k.tint("rim", 0.1), { name: "Title rule" });
-  const body = k.stack(win, { direction: "HORIZONTAL", gap: 24, padding: { top: 24, right: 24, bottom: 24, left: 24 }, height: "FILL", name: "Body" });
-  const col = k.stack(body, { width: 340, height: "FILL", gap: 14, justify: "SPACE_BETWEEN", name: "Setup" });
-  const zone = k.stack(col, { gap: 6, padding: 22, radius: 18, fill: k.tint("rim", 0.05), stroke: { color: "plateMuted", width: 2, dash: [8, 8], align: "INSIDE" }, name: "Drop zone" });
-  const zoneTitle = k.text(zone, "runners-week39.csv", { style: "Map 22", color: "onPlate", name: "Zone title" });
-  const zoneSub = k.text(zone, "2,400 rows \xB7 4 columns", { style: "Win small 20", color: "plateMuted", name: "Zone sub" });
-  const map = k.stack(col, { gap: 8, name: "Column map" });
-  k.text(map, "CSV COLUMN \u2192 FIELD", { style: "Label 18", color: "plateMuted", name: "Map label" });
-  for (const [c, f] of MAPS) {
-    const r = k.stack(map, { direction: "HORIZONTAL", align: "CENTER", gap: 12, height: 46, padding: { top: 0, right: 14, bottom: 0, left: 14 }, radius: 12, fill: k.tint("rim", 0.06), name: "Map row" });
-    k.ellipse(r, 12, "lagoon", { name: "Map dot" });
-    k.text(r, c, { style: "Map 22", color: "onPlate", autoWidth: true, name: "Map column" });
-    k.text(r, "\u2192", { style: "Map 22", color: "plateMuted", autoWidth: true, name: "Map arrow" });
-    k.text(r, f, { style: "Map 22", color: "onPlate", autoWidth: true, name: "Map field" });
-  }
-  const btn = k.stack(col, { direction: "HORIZONTAL", justify: "CENTER", align: "CENTER", height: 62, radius: 999, fill: "primary", name: "Render button", effects: [longShadow(k, 0.45, 12, 30)] });
-  k.text(btn, "Render 2,400 videos", { style: "Render 24", color: "onPrimary", autoWidth: true, name: "Render words" });
-  const right = k.stack(body, { width: "FILL", height: "FILL", gap: 18, name: "Results" });
-  const GW = W - 48 - 24 - 340, TW = Math.floor((GW - (COLS - 1) * 10) / COLS), TH = Math.round(TW * 0.72);
-  const grid = k.stack(right, { direction: "HORIZONTAL", wrap: true, gap: 10, name: "Grid" });
-  k.patch(grid, { counterAxisSpacing: 10 });
-  const tiles = [];
-  const tilePaint = (i) => [k.gradient({ from: ["coral", "lagoon", "apricot", "ocean"][i % 4], to: ["ocean", "coral", "lagoon", "apricot"][i % 4], angle: 35 + i * 23 % 90 })];
-  const route = { closed: false, points: [pt3(TW * 0.12, TH * 0.78), pt3(TW * 0.35, TH * 0.5), pt3(TW * 0.55, TH * 0.62), pt3(TW * 0.86, TH * 0.24)] };
-  for (let i = 0; i < COLS * ROWS; i++) {
-    const t = k.stack(grid, { width: TW, height: TH, radius: 9, clip: true, fill: tilePaint(i), name: "Tile" });
-    k.vector(t, TW, TH, [route], [], { name: "Tile route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 3, cap: "ROUND", join: "ROUND" } });
-    tiles.push(t);
-  }
-  const countBox = k.stack(right, { gap: 4, name: "Count box" });
-  k.text(countBox, "VIDEOS RENDERED", { style: "Label 18", color: "plateMuted", name: "Count label" });
-  k.text(countBox, "2,400", { style: "Batch 80", color: "onPlate", width: 260, name: "Batch figure" });
-  k.text(countBox, `of 2,400 \xB7 ${SPOOL.batchTime}`, { style: "Win small 20", color: "plateMuted", name: "Count sub" });
-  const file = k.stack(rig, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 10, radius: 12, fill: "plate", padding: { top: 12, right: 18, bottom: 12, left: 14 }, name: "CSV file", effects: [longShadow(k, 0.5, 14, 30), ...rimLight(k, 0.2)] });
-  k.patch(file, { x: 44, y: 104, z: 40 });
-  k.rect(file, 22, 28, "lagoon", { radius: 4, name: "File icon" });
-  k.text(file, "runners-week39.csv", { style: "Map 22", color: "onPlate", autoWidth: true, name: "File name" });
-  const p = pointer(k, rig, { x: 300, y: 150, size: 60, fill: "rim", edge: "shade", ring: "primary", name: "Pointer" });
-  for (const id of [p.arrow, p.ring]) k.patch(id, { z: 30 });
-  return { win, zone, zoneTitle, zoneSub, tiles, pointer: p, file };
-}
-function lay(k, sheet, id, st) {
-  const L = LAYS[id];
-  k.nameSheet(sheet, `Feature demo \xB7 ${preset(id).name}`);
-  k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
-  k.patch(sheet, { clipsContent: true });
-  k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
-  deep(k, sheet, { duration: S.duration });
-  const glow = mesh(k, sheet, { ...L.mesh, duration: S.duration, phase: 2 });
-  bloomAt(k, glow, CLICK, 900, 4e3);
-  let b;
-  const r = presetSafeRect(id, k.node(sheet).width, k.node(sheet).height);
-  const t = tilted(k, sheet, { ...L.scene, width: W, height: H, scale: L.scale, rotateY: L.rotY, rotateX: 10, styles: st, sweeps: [DONE - 400], safe: r ? { x: Math.ceil(r.x), y: Math.ceil(r.y), w: Math.floor(r.width), h: Math.floor(r.height) } : void 0, make: (rig) => {
-    b = batchWindow(k, rig);
-    return b.win;
-  } });
-  k.animate(t.rig, "z", [{ t: APP, v: -700, ease: ease.out("quart") }, { t: APP + 1600, v: 0 }]);
-  orbitCam(k, t.scene, { at: APP, until: S.duration, from: -8, to: 12 });
-  k.animate(t.scene, "scene3d.camera.z", [{ t: APP, v: 80, ease: ease.inOut("cubic") }, { t: CLICK, v: 0, ease: ease.inOut("cubic") }, { t: CLICK + 1500, v: -260, ease: ease.inOut("sine") }, { t: DONE, v: -300, ease: ease.inOut("cubic") }, { t: DONE + 1500, v: 20 }]);
-  parallax(k, t, S.duration / 2, 14);
-  k.animate(b.file, "translateX", [{ t: APP + 600, v: -560, ease: ease.inOut("cubic") }, { t: DROP, v: 0 }]);
-  k.animate(b.file, "translateY", [{ t: APP + 600, v: 260, ease: ease.inOut("cubic") }, { t: DROP, v: 0 }]);
-  k.animate(b.file, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: APP + 500, v: 0, ease: ease.out("cubic") }, { t: APP + 900, v: 1, ease: ease.hold }, { t: DROP, v: 1, ease: ease.out("cubic") }, { t: DROP + 300, v: 0 }]);
-  k.patch(b.file, { opacity: 0 });
-  k.animate(b.zoneTitle, "text.content", [{ t: 0, v: "Drop a CSV here", ease: ease.hold }, { t: DROP, v: "runners-week39.csv" }]);
-  k.animate(b.zoneSub, "text.content", [{ t: 0, v: "or POST /v1/batches", ease: ease.hold }, { t: DROP, v: "2,400 rows \xB7 4 columns" }]);
-  glide(k, b.pointer, [
-    { t: APP + 600, dx: -480, dy: 230 },
-    { t: DROP, dx: 44 + 120 - 300, dy: 104 + 30 - 150 },
-    { t: MAP + beat(2), dx: -20, dy: 240 },
-    { t: CLICK, dx: 190 - 300, dy: H - 24 - 31 - 150 },
-    { t: DONE, dx: -60, dy: 330 }
-  ]);
-  clicks(k, b.pointer, [DROP, CLICK]);
-  b.tiles.forEach((tile, i) => {
-    const at = Math.round(CLICK + 300 + i / b.tiles.length * (DONE - CLICK - 900));
-    k.animate(tile, "opacity", [{ t: 0, v: 0.18, ease: ease.hold }, { t: at, v: 0.18, ease: ease.out("cubic") }, { t: at + 500, v: 1 }]);
-  });
-  const brandRow = k.stack(sheet, { direction: "HORIZONTAL", width: L.w, justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row", absolute: { x: L.x, y: L.brandY } });
-  lockup(k, brandRow, { size: 52, style: "Brand 30" });
-  const step = plateChip(k, brandRow, STEPS[0], { style: "Kicker 22", name: "Step chip", dot: "primary" });
-  const stepWords = k.named(step, "Step chip words")[0];
-  const wrap = k.stack(sheet, { width: L.w, name: "Head wrap", absolute: { x: L.x, y: L.headY } });
-  const head = k.text(wrap, HEADS[0], { style: L.head, color: "onNight", name: "Headline" });
-  k.finish();
-  const slotY = L.headY + k.node(wrap).height + (id === "ig-post" ? 22 : 34);
-  const call = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Close row", absolute: { x: L.x, y: slotY } });
-  k.instance(call, "Call", { Label: "Try Batch renders free" }, { name: "Call" });
-  plateChip(k, call, `2,400 in ${SPOOL.batchTime}`, { style: "Site 22", name: "Took chip", pad: [16, 22] });
-  const cap = k.stack(sheet, { width: L.capW, name: "Caption box", absolute: { x: L.x, y: L.capY } });
-  captionStrip(k, cap, swaps[0].words[0], { style: "Caption 32", fill: "plate", ink: "onPlate", radius: 22, pad: [18, 26], effects: [longShadow(k, 0.5, 20, 50), ...rimLight(k, 0.12)] });
-  k.counts(sheet, counts);
-  k.swaps(sheet, swaps);
-  k.cues(sheet, cues);
-  k.animate(stepWords, "text.content", [{ t: 0, v: STEPS[0], ease: ease.hold }, { t: MAP - 200, v: STEPS[1], ease: ease.hold }, { t: CLICK - beat(1), v: STEPS[2], ease: ease.hold }, { t: CLOSE, v: STEPS[3] }]);
-  const ch = CLOSE - beat(1);
-  k.animate(head, "text.content", [{ t: 0, v: HEADS[0], ease: ease.hold }, { t: ch, v: HEADS[1] }]);
-  k.animate(head, "opacity", [{ t: ch - 300, v: 1, ease: ease.named("cubic", "in") }, { t: ch, v: 0, ease: ease.out("cubic") }, { t: ch + 700, v: 1 }]);
-  k.animate(head, "translateY", [{ t: ch, v: 36, ease: ease.out("expo") }, { t: ch + 800, v: 0 }]);
-}
-
-export {
-  style_gradient_feature_demo_default
-};

package/dist/chunks/chunk-NUXUM3QO.js

@@ -1,283 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  QUIRE,
-  WEB_STEPS,
-  editorialBrand,
-  editorialType,
-  fitPageColumns,
-  maskedLines,
-  pageColumns,
-  riseLines,
-  sectionHead,
-  tooth
-} from "./chunk-3J62XABV.js";
-import {
-  tick
-} from "./chunk-YNOCYFZ4.js";
-import {
-  compactNav,
-  footer,
-  respond
-} from "./chunk-O7APDMKU.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-YKXCPYWJ.js";
-import {
-  cutOn
-} from "./chunk-RXG7T7TH.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  Kit,
-  preset
-} from "./chunk-6QHAQLJ4.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/style-editorial-pricing.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Editorial SaaS pricing page";
-var PLANS = [
-  { name: "Pamphlet", pitch: "For a new publication finding its first readers.", month: 0, limit: "Up to 500 readers", cta: "Start free", features: ["The meter and a paywall", "Monthly and yearly plans", "Weekly payouts", "Imports from anywhere"] },
-  { name: "Press", pitch: "For a publication that pays its writers.", month: QUIRE.press, limit: "Unlimited readers", featured: true, cta: "Start a 30-day trial", features: ["Everything in Pamphlet", "Gift and group plans", "Your own domain", "Two editors", "Win-back letters"] },
-  { name: "Imprint", pitch: "For a house with several titles.", month: QUIRE.imprint, limit: "Unlimited readers", cta: "Talk to us", features: ["Everything in Press", "Ten editors, five titles", "A migration done for you", "Priority help", "Accounting exports"] }
-];
-var TABLE = [
-  ["Paying readers", "500", "Any", "Any"],
-  ["Our share of subscriptions", "0%", "0%", "0%"],
-  ["The meter", "yes", "yes", "yes"],
-  ["Payouts", "Weekly", "Weekly", "Daily"],
-  ["Gift and group plans", "no", "yes", "yes"],
-  ["Your own domain", "no", "yes", "yes"],
-  ["Editors", "1", "2", "10"],
-  ["Titles", "1", "1", "5"],
-  ["Migration done for you", "no", "no", "yes"]
-];
-var FAQ = [
-  ["Do you really take nothing?", "Nothing from what readers pay. Card fees go to the card networks at cost, and we charge the flat price above."],
-  ["What happens past 500 readers?", "Nothing breaks. New readers can still subscribe; we write to you to move up to Press within thirty days."],
-  ["Can I bring my list?", "Yes. Paste a CSV or connect your old platform. Subscriptions carry over and nobody is charged twice."],
-  ["How do payouts work?", "Every Friday to your bank, in your currency, with a statement that shows every reader\u2019s payment."],
-  ["Monthly or yearly?", "Either, and you can change at any time. A year costs ten months: two are free."]
-];
-var COL = { desktop: 180, laptop: 160, tablet: 110, mobile: 68 };
-var cues = [
-  { layer: "Running head rule", preset: "wipe-in", at: 0, params: { duration: 900 } },
-  { layer: "Running head words", preset: "fade-in", at: 100, params: { duration: 500 } },
-  { layer: "Nav", preset: "fade-in", at: 150, params: { duration: 500 } },
-  { layer: "Eyebrow", preset: "fade-in", at: 200, params: { duration: 500 } },
-  { layer: "Lead", preset: "fade-in", at: 600, params: { duration: 700 } },
-  { layer: "Switch row", preset: "fade-in", at: 750, params: { duration: 600 } },
-  { layer: "Plan", preset: "rise-in", at: 700, params: { duration: 800, distance: 30 }, stagger: { delay: 120 } },
-  { layer: "Crown", preset: "fade-in", at: 1100, params: { duration: 800 } },
-  cutOn("Table row", 1500, 110)
-];
-var counts = [
-  { layer: "Press amount", at: 900, duration: 1100, counter: { from: 0, to: QUIRE.press, prefix: "$" } },
-  { layer: "Imprint amount", at: 1020, duration: 1100, counter: { from: 0, to: QUIRE.imprint, prefix: "$" } }
-];
-var style_editorial_pricing_default = defineTemplate({
-  id: "web-saas-style-editorial-pricing",
-  meta: {
-    name: NAME,
-    description: "A pricing page in the warm editorial look, set like a magazine rate card, whose monthly / yearly switch works in present mode: a variable toggle flips every price at once while the knob glides. Three plans in hairline-ruled columns with the middle one crowned in ink, a comparison table with drawn ticks, five questions, a closing call and a footer; the header rises line by line, prices count up and the table fills in on load. Desktop to phone",
-    category: "web",
-    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison table", "faq", "saas", "editorial", "serif", "magazine", "paper", "newsletter", "publishing", "counter", "animation", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["pricing", "launch", "comparison"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  breakpoints: true,
-  motion: { cues, counts },
-  build() {
-    const k = new Kit(NAME, preset("web-desktop"));
-    k.quantizeGeometry = true;
-    editorialBrand(k, { hook1: "A flat price.", hook2: "No share." });
-    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
-    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
-    const t = editorialType(k);
-    buttons(k, { style: t.strong(15), pad: [13, 20], radius: 2 });
-    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
-      direction: "HORIZONTAL",
-      width: "HUG",
-      gap: 12,
-      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" ? t.strong(16) : t.sans(16), color: state === "Monthly" ? "text" : "onPaper", autoWidth: true });
-      const track = k.stack(id, { direction: "HORIZONTAL", width: 52, height: 28, radius: 14, padding: 4, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: "primary", name: "Track" });
-      k.ellipse(track, 20, "onPrimary", { name: "Knob" });
-      k.propText(id, "Right", { style: state === "Yearly" ? t.strong(16) : t.sans(16), color: state === "Yearly" ? "text" : "onPaper", autoWidth: true });
-    });
-    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Yearly", 240, "EASE_OUT");
-    k.changeTo("Billing switch/Yearly", "ON_CLICK", "Billing switch/Monthly", 240, "EASE_OUT");
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 104, top: 28 });
-    pageColumns(k, sheet);
-    k.patch(sheet, { effects: tooth(0.04) });
-    k.timeline(sheet, { duration: 6e3, fps: 30 });
-    const top = k.stack(sheet, { gap: 64, name: "Top" });
-    const masthead = k.stack(top, { gap: 22, name: "Masthead" });
-    const head = k.stack(masthead, { gap: 10, name: "Running head" });
-    k.rect(head, "FILL", 2, "text", { name: "Running head rule" });
-    const headRow = k.stack(head, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: "Running head words" });
-    for (const w of [`${QUIRE.issue.toUpperCase()} \xB7 ${QUIRE.season.toUpperCase()}`, "THE RATE CARD", "PRICES IN US DOLLARS"]) k.text(headRow, w, { style: t.label(12), color: "onPaper", autoWidth: true, name: "Running head word" });
-    nav(k, masthead, { links: ["The meter", "Payouts", "Pricing", "Field notes", "Sign in"], cta: "Start free", style: t.sans(15), brandStyle: t.serif(24) });
-    for (const id of k.named(masthead, "Logo tile")) k.patch(id, { cornerRadius: 0 });
-    const header = k.stack(top, { direction: "HORIZONTAL", gap: 64, align: "MAX", name: "Header" });
-    const title = k.stack(header, { gap: 24, name: "Header title" });
-    const eyebrow = k.stack(title, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Eyebrow" });
-    k.rect(eyebrow, 28, 3, "primary", { name: "Label rule" });
-    k.text(eyebrow, "PRICING", { style: t.label(13), color: "onPaper", autoWidth: true, name: "Eyebrow words" });
-    maskedLines(k, title, ["{{brand.hook1}}", "{{brand.hook2}}"], { style: t.display(96), name: "Hook" });
-    const billing = k.stack(header, { width: 440, gap: 24, name: "Header billing" });
-    k.text(billing, "You pay for the tools, the same in a slow month as in a good one. What your readers pay is yours: our share of it is nothing.", { style: t.serif(21), color: "text", name: "Lead" });
-    const sw = k.stack(billing, { direction: "HORIZONTAL", gap: 16, align: "CENTER", wrap: true, 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.text(sw, "A YEAR IS TEN MONTHS", { style: t.label(12), color: "onPaper", autoWidth: true, name: "Saving" });
-    const plans = k.stack(sheet, { gap: 0, name: "Plans block" });
-    k.rect(plans, "FILL", 2, "text", { name: "Plans rule" });
-    const row = k.stack(plans, { direction: "HORIZONTAL", gap: 0, name: "Plans" });
-    PLANS.forEach((p, i) => {
-      if (i) k.stack(row, { width: 1, height: "FILL", fill: k.tint("text", 0.25), name: "Column rule" });
-      const c = k.stack(row, { gap: 20, padding: { top: 0, right: 32, bottom: 8, left: 32 }, name: "Plan" });
-      if (p.features.length < 5) k.patch(c, { layoutSizingVertical: "FILL" });
-      if (p.featured) k.rect(c, "FILL", 8, "primary", { name: "Crown" });
-      else k.rect(c, "FILL", 8, "paper", { name: "Crown space" });
-      const planHead = k.stack(c, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan head" });
-      k.text(planHead, p.name, { style: t.display(40), color: "text", autoWidth: true, name: "Plan name" });
-      if (p.featured) k.text(planHead, "MOST CHOSEN", { style: t.label(12), color: "text", autoWidth: true, name: "Most chosen" });
-      k.text(c, p.pitch, { style: t.serif(18), color: "onPaper", name: "Pitch" });
-      const price = k.stack(c, { name: "Price" });
-      const block = (which) => {
-        const b = k.stack(price, { gap: 4, name: `${which} price` });
-        k.text(b, which === "Monthly" ? `$${p.month}` : `$${p.month * 10}`, { style: t.figure(72), color: "text", name: which === "Monthly" ? `${p.name} amount` : `${p.name} yearly amount` });
-        k.text(b, !p.month ? "FREE, FOR AS LONG AS YOU LIKE" : which === "Monthly" ? "A MONTH, BILLED MONTHLY" : `A YEAR \xB7 YOU SAVE $${p.month * 2}`, { style: t.label(12), color: "onPaper", name: "Billed" });
-        return b;
-      };
-      k.bindVariable(block("Monthly"), "visible", monthly);
-      k.bindVariable(block("Yearly"), "visible", yearly);
-      k.text(c, p.limit, { style: t.strong(16), color: "text", name: "Limit" });
-      k.instance(c, p.featured ? "Button" : "Button quiet", { Label: p.cta }, { name: "Plan button" });
-      k.rect(c, "FILL", 1, k.tint("text", 0.25), { name: "Plan rule" });
-      const list = k.stack(c, { gap: 10, name: "Features" });
-      for (const f of p.features) {
-        const fr = k.stack(list, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Feature" });
-        tick(k, fr, 16, "text", { name: "Feature tick", weight: 1.75 });
-        k.text(fr, f, { style: t.sans(16), color: "text", name: "Feature label" });
-      }
-    });
-    const compare = k.stack(sheet, { gap: 32, name: "Compare" });
-    sectionHead(k, compare, { label: "PLAN BY PLAN", title: "Everything, side by side.", label13: t.label(13), titleStyle: t.display(64), name: "Compare head" });
-    const table = k.stack(compare, { name: "Table" });
-    const headRowT = k.stack(table, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 0, right: 0, bottom: 12, left: 0 }, name: "Table head" });
-    k.text(headRowT, "WHAT YOU GET", { style: t.label(12), color: "onPaper", name: "Table corner" });
-    PLANS.forEach((p) => {
-      const c = k.stack(headRowT, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell" });
-      k.text(c, p.name.toUpperCase(), { style: t.label(12), color: "text", name: "Column name" });
-    });
-    k.rect(table, "FILL", 2, "text", { name: "Table rule" });
-    for (const [feature, ...values] of TABLE) {
-      const line = k.stack(table, { name: "Table row" });
-      const cells = k.stack(line, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 14, right: 0, bottom: 14, left: 0 }, name: "Row cells" });
-      k.text(cells, feature, { style: t.serif(18), color: "text", name: "Row feature" });
-      values.forEach((v) => {
-        const drawn = v === "yes" || v === "no";
-        const c = k.stack(cells, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell", ...drawn ? { height: 22, align: "CENTER" } : {} });
-        if (v === "yes") tick(k, c, 18, "text", { name: "Cell tick", weight: 1.75 });
-        else if (v === "no") k.rect(c, 14, 1.5, k.tint("text", 0.5), { name: "Cell dash" });
-        else k.text(c, v, { style: t.label(15), color: "text", name: "Cell value" });
-      });
-      k.rect(line, "FILL", 1, k.tint("text", 0.25), { name: "Row rule" });
-    }
-    const faq = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "FAQ" });
-    sectionHead(k, faq, { label: "QUESTIONS", title: "Asked before moving.", label13: t.label(13), titleStyle: t.display(56), name: "FAQ head", width: 400 });
-    const qs = k.stack(faq, { name: "FAQ list" });
-    for (const [q, a] of FAQ) {
-      k.rect(qs, "FILL", 1, k.tint("text", 0.25), { name: "Question rule" });
-      const item = k.stack(qs, { direction: "HORIZONTAL", gap: 32, padding: { top: 20, right: 0, bottom: 22, left: 0 }, name: "Question" });
-      k.text(item, q, { style: t.serif(24), color: "text", width: 300, name: "Q" });
-      k.text(item, a, { style: t.sans(16), color: "onPaper", name: "A" });
-    }
-    const close = k.stack(sheet, { gap: 28, name: "Close" });
-    k.rect(close, "FILL", 4, "text", { name: "Close rule" });
-    const closeRow = k.stack(close, { direction: "HORIZONTAL", gap: 40, align: "MAX", name: "Close row" });
-    k.text(closeRow, "Start on Pamphlet tonight. Move up when your readers arrive.", { style: t.display(72), color: "text", name: "Close title" });
-    const closeSide = k.stack(closeRow, { width: 220, gap: 12, name: "Close side" });
-    k.instance(closeSide, "Button", { Label: "Start free" }, { name: "Close button" });
-    k.text(closeSide, "NO CARD NEEDED", { style: t.label(12), color: "onPaper", name: "Close terms" });
-    footer(k, sheet, {
-      about: QUIRE.pitch,
-      legal: "Prices in US dollars, before sales tax. Yearly plans are billed once, up front. \xA9 2026 {{brand.name}}.",
-      columns: [["Product", ["The meter", "Subscriptions", "Payouts", "Imports"]], ["Publishers", ["Field notes", "Guides", "Status", "Help"]], ["Company", ["Pricing", "Security", "Contact"]]],
-      brandStyle: t.serif(24),
-      headStyle: t.label(12),
-      linkStyle: t.sans(14),
-      ruleColor: "text"
-    });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    riseLines(k, sheet, "Hook", 100, { gap: 140, duration: 900 });
-    respond(k, sheet, t.s, {
-      stack: ["Header", "Plans", "FAQ", "Close row", "Footer columns"],
-      stackMobile: ["Question"],
-      restyle: WEB_STEPS,
-      hide: { mobile: ["Nav links", "Running head word"] },
-      gap: { tablet: 80, mobile: 60 },
-      tweak: (kit, id, size) => {
-        fitPageColumns(kit, id, size);
-        for (const n of kit.named(id, "Cell")) kit.patch(n, { width: COL[size] });
-        if (size === "tablet") compactNav(kit, id, ["Field notes", "Sign in"], 20);
-        if (size === "tablet" || size === "mobile") {
-          for (const n of kit.named(id, "Plan")) kit.patch(n, { layoutSizingVertical: "HUG", padding: { top: 0, right: 0, bottom: 40, left: 0 } });
-          for (const n of kit.named(id, "Column rule")) kit.patch(n, { visible: false });
-          for (const n of kit.named(id, "Crown space")) kit.patch(n, { visible: false });
-          for (const n of kit.named(id, "Crown")) kit.patch(n, { layoutSizingHorizontal: "FILL", width: size === "tablet" ? 672 : 335 });
-          for (const name of ["Header billing", "FAQ head", "Close side"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-          for (const n of kit.named(id, "Header")) kit.patch(n, { itemSpacing: 28 });
-          for (const n of kit.named(id, "FAQ")) kit.patch(n, { itemSpacing: 28 });
-          for (const n of kit.named(id, "Top")) kit.patch(n, { itemSpacing: 44 });
-          for (const n of kit.named(id, "Q")) kit.patch(n, { width: size === "tablet" ? 240 : 335 });
-        }
-        if (size === "mobile") {
-          for (const n of kit.named(id, "Running head word")) {
-            kit.patch(n, { visible: true });
-            break;
-          }
-          for (const n of kit.named(id, "Question")) kit.patch(n, { itemSpacing: 8 });
-          for (const name of ["Table head", "Row cells"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 4 });
-          for (const n of kit.named(id, "Cell value")) kit.restyle(n, t.label(13));
-        }
-      }
-    });
-    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 {
-  style_editorial_pricing_default
-};

package/dist/chunks/chunk-NY6NJWZH.js

@@ -1,79 +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 {
-  restyleAll,
-  storyCut,
-  titleSafe
-} from "./chunk-AFOQTZPR.js";
-import {
-  logoBadge,
-  outro,
-  pill
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  Kit,
-  preset
-} from "./chunk-6QHAQLJ4.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/kinetic/words.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var cues = [
-  { layer: "Logo", preset: "pop-in", at: 100 },
-  { layer: "Line", preset: "words-in", at: 350, params: { duration: 650, amount: 110 } },
-  { layer: "Where", preset: "rise-in", at: 1500 },
-  { layer: "Join", preset: "pop-in", at: 1850 },
-  { layer: "Join", preset: "pulse", at: 3e3, params: { amount: 0.05 } },
-  { layer: "Line", preset: "words-out", at: 5200, params: { duration: 450, amount: 60 } },
-  outro(["Logo", "Where", "Join"], 5500)
-];
-var words_default = defineTemplate({
-  id: "motion-kinetic-words",
-  meta: {
-    name: "Word-by-word line",
-    description: "A running club\u2019s invitation said one word at a time, the meeting point rising under it and a join button popping \u2014 7 seconds, 16:9 with a 9:16 story cut",
-    category: "animation",
-    tags: ["animation", "kinetic type", "words", "community", "running", "club", "invitation"],
-    platforms: ["instagram", "youtube", "facebook", "linkedin"],
-    formats: ["video", "story", "reel", "post"],
-    useCases: ["invitation", "event", "announcement"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit("Word-by-word line", preset("video-1080p"));
-    k.brand(
-      { paper: "#FFE8D6", text: "#1F1B16", onPaper: "#6B4F3F", primary: "#1F1B16", onPrimary: "#FFE8D6", card: "#E4572E" },
-      { where: "Sundays at 8 \xB7 from the bandstand in Victoria Park" }
-    );
-    k.textStyle("Line 150", { size: 150, fontWeight: 900, letterSpacing: -5, lineHeight: 150, textAlign: "CENTER" });
-    k.textStyle("Line 112", { size: 112, fontWeight: 900, letterSpacing: -3, lineHeight: 116, textAlign: "CENTER" });
-    k.textStyle("Where 44", { size: 44, fontWeight: 600, lineHeight: 56, textAlign: "CENTER" });
-    k.textStyle("Button 38", { size: 38, fontWeight: 800, lineHeight: 46 });
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 38", label: "Run with us", pad: [22, 52] });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 40, titleSafe(), "paper", "CENTER", "CENTER");
-    k.timeline(sheet, { duration: 7e3, fps: 30 });
-    logoBadge(k, sheet, { fill: "card", size: 72, name: "Logo" });
-    k.text(sheet, "Nobody runs alone on Sunday mornings.", { style: "Line 150", color: "text", name: "Line" });
-    k.text(sheet, "{{brand.where}}", { style: "Where 44", color: "onPaper", name: "Where" });
-    k.instance(sheet, "Button", { Label: "Run with us" }, { name: "Join" });
-    k.cues(sheet, cues);
-    k.variants(sheet, storyCut((kit, id) => restyleAll(kit, id, ["Line"], "Line 112")));
-    return k.finish();
-  }
-});
-
-export {
-  words_default
-};