@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-N6N3GAGV.js

@@ -0,0 +1,142 @@
+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 {
+  ARIAL,
+  COURIER,
+  MAIL_W,
+  callToAction,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell
+} from "./chunk-GJHYTWSE.js";
+import {
+  dotPaths,
+  tick
+} from "./chunk-Y6DFTJFC.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/email/saas-mail-sign-in-code.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var HEADER_H = 148;
+var DIAL = { size: 92, r: 38, ticks: 10 };
+var cues = [
+  { layer: "Minutes", preset: "pulse", at: 600, params: { duration: 700, amount: 0.08 } }
+];
+var ASKED = [
+  ["When", "Friday 2 October 2026, 14:02 UTC"],
+  ["Where", "Chrome on macOS, near Lisbon, Portugal"],
+  ["For", "mara@haldenstudio.example"]
+];
+function dialTicks(from, to) {
+  const c = DIAL.size / 2;
+  return Array.from({ length: to - from }, (_, i) => {
+    const a = (from + i) / DIAL.ticks * Math.PI * 2;
+    const sx = Math.sin(a), sy = -Math.cos(a);
+    return { closed: false, points: [{ x: c + sx * (DIAL.r - 9), y: c + sy * (DIAL.r - 9) }, { x: c + sx * DIAL.r, y: c + sy * DIAL.r }] };
+  });
+}
+var saas_mail_sign_in_code_default = defineTemplate({
+  id: "email-saas-mail-sign-in-code",
+  meta: {
+    name: "SaaS lifecycle email: password reset and sign-in code",
+    description: "A whole 600 px password reset or magic-link email, plain and fast to read: a thin brand strip with a ten-minute dial, then the six-digit code as large live text with its expiry, the same code as a one-click button, and who asked and from where, with what to do if it was not you. The strip loops for four seconds (export it as a GIF); the body is table-safe type",
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "password reset", "magic link", "sign in", "verification code", "one-time code", "security", "transactional", "monochrome", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: password reset and sign-in code", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFFFF", text: "#0E0F0C", onPaper: "#43463F", primary: "#0E0F0C", onPrimary: "#FFFFFF", accent: "#1F8A54", onAccent: "#FFFFFF", tint: "#F1F2EC", onTint: "#0E0F0C" },
+      { company: "Ferry", address: "Rua da Boavista 73, 1200-066 Lisboa", code: "418 207" }
+    );
+    k.palette({ strip: "#0E0F0C", onStrip: "#FFFFFF", stripSoft: "#B9BDB1", dot: "#FFFFFF", spent: "#3A3D36", safe: "#4FD08D" });
+    k.textStyle("Brand 26", { size: 26, fontWeight: 800, letterSpacing: -0.8, lineHeight: 30 });
+    k.textStyle("Strip 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16 });
+    k.textStyle("Minutes 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: -1, lineHeight: 28, textAlign: "CENTER" });
+    k.textStyle("Heading 26", { ...ARIAL, size: 26, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Label 12", { ...COURIER, size: 12, fontWeight: 700, letterSpacing: 1.5, lineHeight: 16 });
+    k.textStyle("Code 56", { ...COURIER, size: 56, fontWeight: 700, letterSpacing: 4, lineHeight: 64 });
+    k.textStyle("Strong 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Sign in with one click", width: 280, height: 52 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "strip");
+    k.vector(head, MAIL_W, HEADER_H, dotPaths(MAIL_W, HEADER_H, 16, 2), "dot", { name: "Dots", opacity: 0.1, absolute: { x: 0, y: 0 } });
+    k.text(head, "{{brand.company}}", { style: "Brand 26", color: "onStrip", width: 380, name: "Brand", absolute: { x: 40, y: 44 } });
+    const line = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "What this is", absolute: { x: 40, y: 84 } });
+    tick(k, line, 13, "safe");
+    k.text(line, "SIGN-IN CODE \xB7 WORKS ONCE", { style: "Strip 12", color: "stripSoft", autoWidth: true, name: "What" });
+    const dial = k.stack(head, { width: DIAL.size, height: DIAL.size, align: "CENTER", justify: "CENTER", name: "Dial", absolute: { x: MAIL_W - 40 - DIAL.size, y: (HEADER_H - DIAL.size) / 2 } });
+    k.vector(dial, DIAL.size, DIAL.size, dialTicks(1, DIAL.ticks), "spent", { name: "Minutes left", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    const lit = k.vector(dial, DIAL.size, DIAL.size, dialTicks(0, 1), "safe", { name: "This minute", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    swell(k, lit, "opacity", { amp: 0.3, loopMs: DURATION, cycles: 2 });
+    k.patch(lit, { opacity: 0.7 });
+    const hand = k.stack(dial, { width: DIAL.size, height: DIAL.size, name: "Hand", absolute: { x: 0, y: 0 } });
+    k.ellipse(hand, 7, "safe", { name: "Hand tip", absolute: { x: DIAL.size / 2 - 3.5, y: DIAL.size / 2 - DIAL.r - 14 } });
+    k.behave(hand, "rotation", [{ kind: "spin", rate: 36e4 / DURATION }]);
+    k.text(dial, "10", { style: "Minutes 26", color: "onStrip", name: "Minutes" });
+    k.text(dial, "MIN", { style: "Strip 12", color: "stripSoft", align: "CENTER", name: "Minutes label" });
+    const intro = section(k, sheet, { name: "Intro", pad: [36, 40, 16, 40], gap: 10 });
+    k.text(intro, "Your sign-in code", { style: "Heading 26", color: "text", name: "Heading" });
+    k.text(intro, "Type it into the page you just left. It signs you in, and you can choose a new password from there.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const code = section(k, sheet, { name: "Code", pad: [4, 40, 8, 40] });
+    const box = k.stack(code, { fill: "tint", padding: { top: 22, right: 28, bottom: 24, left: 28 }, gap: 6, name: "Code box" });
+    k.text(box, "CODE", { style: "Label 12", color: "onTint", name: "Code label" });
+    k.text(box, "{{brand.code}}", { style: "Code 56", color: "onTint", name: "Code figure" });
+    k.text(box, "Expires at 14:12 UTC, ten minutes after you asked.", { style: "Strong 16", color: "onTint", name: "Expiry" });
+    callToAction(k, sheet, { button: "Mail button", label: "Sign in with one click", pad: [24, 40, 28, 40], note: "The button carries the same code and expires at the same time.", noteStyle: "Small 15", noteInk: "onPaper" });
+    const asked = section(k, sheet, { name: "Who asked", pad: [4, 40, 8, 40] });
+    for (const [label, value] of ASKED) {
+      k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
+      const row = mailRow(k, asked, { name: "Asked row", gap: 16, padding: { top: 12, right: 0, bottom: 12, left: 0 } });
+      const left = k.stack(row, { width: 72, name: "Asked cell" });
+      k.text(left, label.toUpperCase(), { style: "Label 12", color: "text", name: "Asked label" });
+      const right = k.stack(row, { width: "FILL", name: "Asked value cell" });
+      k.text(right, value, { style: "Small 15", color: "onPaper", name: "Asked value" });
+    }
+    k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
+    const safe = section(k, sheet, { name: "Not you", pad: [20, 40, 28, 40], gap: 4 });
+    k.text(safe, "Didn\u2019t ask for this?", { style: "Strong 16", color: "text", name: "Not you heading" });
+    k.text(safe, "Ignore this email and nothing changes: the code is useless without the page that asked for it. Nobody at {{brand.company}} will ever ask you to read it out, by phone, chat or email.", { style: "Small 15", color: "onPaper", name: "Not you words" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "tint", pad: [8, 40, 32, 40], why: "You are getting this because someone asked to sign in to {{brand.company}} with this address.", links: "Security emails are part of your account and cannot be switched off." });
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_sign_in_code_default
+};

package/dist/chunks/chunk-N7DT4UV6.js

@@ -0,0 +1,156 @@
+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 {
+  FIGURES,
+  LABEL,
+  board,
+  earthDayBrand,
+  fall,
+  fitGround,
+  flag,
+  groundContours,
+  intensity,
+  laySection,
+  plate,
+  section
+} from "./chunk-XONQVFEP.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  reboard
+} from "./chunk-T3XFQJUI.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/earth-day-pledge-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 9200;
+var OUT = 8200;
+var DAY = 1.5;
+var WAS = 0.75;
+var NOW = 0.55;
+var grams = (u) => Math.round(intensity(u, DAY));
+var BOARD = { width: 952, height: 478 };
+var SECTION = { width: 912, height: 392 };
+var counts = [
+  { layer: "After figure", at: 4300, duration: 1400, counter: { from: FIGURES.before, to: FIGURES.after, suffix: " t" } }
+];
+var cues = [
+  { layer: "Strip", preset: "fade-in", at: 0, params: { duration: 400 } },
+  // The board and the counted figure come up under their own animation, so the outro can take them away whole.
+  { layer: "Board", preset: "fade-in", at: 0, params: { duration: 200 } },
+  { layer: "After figure", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Was plate", preset: "pop-in", at: 1500, params: { duration: 300 } },
+  { layer: ["Flag 1", "Flag 2", "Flag 3"], preset: "drop-in", at: 1700, params: { duration: 380, distance: 60 }, stagger: { delay: 130, order: "selection" } },
+  { layer: "Now plate", preset: "pop-in", at: 4e3, params: { duration: 300 } },
+  { layer: "Note", preset: "fade-in", at: 5e3, params: { duration: 500 } },
+  { layer: "Pledge cell", preset: "pulse", at: 5900, params: { duration: 700, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: 6500, params: { duration: 700, amount: 0.06 } },
+  outro(["Strip", "Board", "After figure", "Note"], OUT, { gap: 80 })
+];
+var earth_day_pledge_post_default = defineTemplate({
+  id: "motion-earth-day-pledge-post",
+  meta: {
+    name: "Earth Day pledge post (animated)",
+    description: "A climate pledge with a date on it and the working under it: the headline is the target, and under it a day of grid carbon is cut in section as a hillside whose strata build from the clean valley floor up to the dirty evening ridge; three survey flags walk down the slope from where the jobs used to run to where they run now, and the footprint counts down from 412 t to 287 beside the pledge. Just over nine seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "earth day", "climate", "sustainability", "pledge", "carbon", "footprint", "strata", "cross-section", "topographic", "cut paper", "counter", "data", "saas", "post", "seasonal"],
+    platforms: ["linkedin", "x", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "stats", "report"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Earth Day pledge post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    earthDayBrand(k, { hook: "Under 200 t by Earth Day 2027." });
+    k.textStyle("Strip 20", { ...LABEL, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 26 });
+    k.textStyle("Hook 88", { ...SERIF, size: 88, fontWeight: 700, letterSpacing: -2.8, lineHeight: 88 });
+    k.textStyle("Tick 16", { ...LABEL, size: 16, fontWeight: 700, letterSpacing: 1, lineHeight: 20 });
+    k.textStyle("Scale 16", { ...MONO, size: 16, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Plate 18", { ...MONO, size: 18, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Cell 16", { ...LABEL, size: 16, fontWeight: 700, letterSpacing: 1, lineHeight: 20 });
+    k.textStyle("Cell 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1.5, lineHeight: 46 });
+    k.textStyle("Note 24", { size: 24, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Button 22", { size: 22, fontWeight: 700, lineHeight: 28 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 22", label: "Read the numbers", pad: [18, 24], radius: 8 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 16, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    groundContours(k, sheet, 1080, 1080, { days: 5, opacity: 0.13 });
+    const top = k.stack(sheet, { gap: 10, name: "Top" });
+    const strip = k.stack(top, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", name: "Strip" });
+    k.text(strip, "{{brand.name}} \xB7 Earth Day 2026 \xB7 the pledge", { style: "Strip 20", color: "onPaper", name: "Strip name" });
+    k.text(strip, "Section A\u2013B", { style: "Strip 20", color: "onPaper", autoWidth: true, name: "Strip sheet" });
+    k.text(top, "{{brand.hook}}", { style: "Hook 88", color: "text", name: "Hook" });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "CENTER", name: "Drawing row" });
+    const bd = board(k, row, BOARD.width, BOARD.height, "Board");
+    const sheetOfCard = k.stack(bd, { width: BOARD.width, height: BOARD.height, gap: 10, padding: { top: 18, right: 20, bottom: 18, left: 20 }, fill: "card", radius: 8, effects: [fall(k, 40, 0.3, 16, 0)], name: "Section plate", absolute: { x: 0, y: 0 } });
+    k.text(sheetOfCard, "One Tuesday of our grid, in section \xB7 g CO2 per kWh", { style: "Tick 16", color: "onCard", name: "Section title" });
+    const sec = section(k, sheetOfCard, SECTION.width, SECTION.height, { d: DAY, left: 54, bottom: 40, top: 780 }, { label: "Scale 16" });
+    const [wx, wy] = sec.at(WAS), [nx, ny] = sec.at(NOW);
+    plate(k, sec.id, `Was ${grams(WAS)} g at 18:00`, { width: 226, height: 38, style: "Plate 18", name: "Was plate", absolute: { x: Math.min(Math.round(wx - 113), SECTION.width - 232), y: Math.round(wy - 104) } });
+    plate(k, sec.id, `Now ${grams(NOW)} g at 13:00`, { width: 226, height: 38, style: "Plate 18", name: "Now plate", absolute: { x: Math.round(nx - 113), y: Math.round(ny - 150) } });
+    const flags = [-0.022, 0, 0.022].map((off, i) => flag(k, sec, WAS + off, { name: `Flag ${i + 1}`, size: 50, move: { to: NOW + off * 1.6, at: 2500 + i * 170, duration: 1300 } }));
+    const bottom = k.stack(sheet, { gap: 14, name: "Bottom" });
+    const ledger = k.stack(bottom, { direction: "HORIZONTAL", height: 96, stroke: { color: "text", width: 2, align: "INSIDE", join: "MITER" }, name: "Ledger strip" });
+    const cell = (label, value, name, fill) => {
+      const c = k.stack(ledger, { height: "FILL", gap: 2, justify: "CENTER", padding: { top: 6, right: 18, bottom: 6, left: 18 }, stroke: { color: "text", width: 1, align: "INSIDE", join: "MITER" }, ...fill ? { fill } : {}, name: fill ? "Pledge cell" : "Ledger cell" });
+      k.text(c, label, { style: "Cell 16", color: fill ? "onPrimary" : "onPaper", name: "Cell label" });
+      k.text(c, value, { style: "Cell 44", color: fill ? "onPrimary" : "text", name });
+    };
+    cell("2024, measured", `${FIGURES.before} t`, "Before figure");
+    cell("2025, measured", `${FIGURES.after} t`, "After figure");
+    cell("2027, pledged", `<${FIGURES.pledge} t`, "Pledge figure", "primary");
+    const foot = k.stack(bottom, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Foot" });
+    k.text(foot, "No offsets, no trees. If we miss, the page will say so.", { style: "Note 24", color: "onPaper", name: "Note" });
+    k.instance(foot, "Button", { Label: "Read the numbers" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    laySection(k, sec, 150, 130);
+    void flags;
+    const refit = (kit, id) => {
+      const f = kit.node(id);
+      fitGround(kit, id, f.width, f.height, { days: 5 * f.height / 1080 });
+    };
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        reboard(kit, id, "Board", 0.98);
+        refit(kit, id);
+      },
+      vertical: (kit, id) => {
+        reboard(kit, id, "Board", 0.84);
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN", itemSpacing: 14 });
+        refit(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  earth_day_pledge_post_default
+};

package/dist/chunks/chunk-NADFKWP5.js

@@ -0,0 +1,80 @@
+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 {
+  bust,
+  mall,
+  osField,
+  osWindow,
+  tag,
+  vaporBrand
+} from "./chunk-EWF6GISQ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  hardShadow
+} from "./chunk-PCZTQVV6.js";
+import {
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/vaporwave-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var vaporwave_link_preview_default = defineTemplate({
+  id: "social-vaporwave-link-preview",
+  meta: {
+    name: "Vaporwave link preview",
+    description: "A 1200 \xD7 630 link preview from a dead mall\u2019s desktop: the promise in a heavy serif inside a bevelled window, a search field with the name marked vacant and the flat price in mono, over a banded sun, palms, a marble bust and a neon grid floor",
+    category: "social",
+    tags: ["vaporwave", "retro", "90s", "windows", "desktop", "synthwave", "grid", "sunset", "link preview", "open graph", "og image", "saas", "domains"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Vaporwave link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    vaporBrand(k, { tagline: "The name you want is still vacant." });
+    k.textStyle("Title 18", { size: 18, fontWeight: 700, lineHeight: 26, ...MONO });
+    k.textStyle("Tag 16", { size: 16, fontWeight: 800, letterSpacing: 2.5, lineHeight: 22, ...MONO });
+    k.textStyle("Display 76", { size: 76, fontWeight: 900, letterSpacing: -2.2, lineHeight: 76, ...SERIF });
+    k.textStyle("Query 24", { size: 24, fontWeight: 700, lineHeight: 32, ...MONO });
+    k.textStyle("Facts 20", { size: 20, fontWeight: 600, lineHeight: 28, ...MONO });
+    pill(k, "Badge", { fill: "secondary", ink: "onSecondary", style: "Tag 16", label: "VACANT", pad: [4, 10], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 0, bottom: 0, left: 56 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    mall(k, sheet, 1200, 630, { horizon: 396, sun: { d: 400, cx: 930, cy: 250 }, palms: [{ h: 400, x: 1130, flip: true, base: 460 }, { h: 250, x: 800, base: 430 }, { h: 330, x: 36, base: 450 }] });
+    bust(k, sheet, 270, { x: 1e3, base: 630 });
+    const win = osWindow(k, sheet, { title: "{{brand.name}} \xB7 domain registrar", titleStyle: "Title 18", width: 720, bar: 46, gap: 16, name: "Window", shadow: 16 });
+    tag(k, win.body, "NOW LEASING \xB7 400 ENDINGS", { style: "Tag 16", fill: "accent", ink: "onAccent", name: "Leasing" });
+    k.text(win.body, "{{brand.tagline}}", { style: "Display 76", color: "onCard", name: "Headline", effects: [hardShadow(k, "primary", 4, 4, 0.9)] });
+    const field = osField(k, win.body, { pad: [10, 14] });
+    k.text(field, "sundaze", { style: "Query 24", color: "text", name: "Query" });
+    k.instance(field, "Badge", { Label: "VACANT" }, { name: "Vacant" });
+    k.text(win.body, ".com $9.80 \xB7 renews at $9.80 \xB7 no upsell", { style: "Facts 20", color: "onCard", name: "Facts" });
+    return k.finish();
+  }
+});
+
+export {
+  vaporwave_link_preview_default
+};

package/dist/chunks/chunk-NBBEB4QG.js

@@ -0,0 +1,78 @@
+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 {
+  standardPortfolio
+} from "./chunk-472HVEQ3.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/web/portfolio-reel-carousel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "The Tide Giant", client: "Meridian Pictures", year: "2026", kind: "Feature film \xB7 140 shots", cover: "reel-00", summary: "A stone giant rising from the sea beside a lighthouse, for the third act of a fantasy feature.", story: "A full-CG creature with a water simulation for every step; the lighthouse is a plate shot on the Cornish coast.", credits: "VFX supervision, CG, compositing \u2014 Parallax Works" },
+  { title: "Sunflower Landing", client: "Orbital Series", year: "2026", kind: "Streaming series \xB7 62 shots", cover: "reel-01", summary: "A ship setting down in a field of sunflowers at golden hour.", story: "Two days of plates in a real field, the ship and its downdraft added after; every flower bends.", credits: "VFX \u2014 Parallax Works \xB7 Production \u2014 Orbital" },
+  { title: "Blue Flood", client: "Aqualux", year: "2025", kind: "Commercial", cover: "reel-02", summary: "A city street flooding with luminous water in slow motion.", story: "Shot at 1,000 frames a second on a closed street; the water is simulated to match the speed.", credits: "Direction, VFX \u2014 Parallax Works" },
+  { title: "Smoke Dragon", client: "Ironside Games", year: "2025", kind: "Game cinematic", cover: "reel-03", summary: "A dragon of smoke coiling round a tower at night.", story: "The reveal trailer for a game, rendered from the game\u2019s own creature rig.", credits: "Cinematic, CG \u2014 Parallax Works" },
+  { title: "Crystal Canyon", client: "Meridian Pictures", year: "2024", kind: "Feature film \xB7 88 shots", cover: "reel-04", summary: "An astronaut walking a canyon of crystal on another world.", story: "A virtual-production set on an LED stage, extended in post for the wide shots.", credits: "VFX, virtual production \u2014 Parallax Works" },
+  { title: "Fibre Forest", client: "Lightline Telecom", year: "2024", kind: "Brand film", cover: "reel-05", summary: "A forest whose trees are made of glowing fibre optics.", story: "Every strand is a curve that carries a pulse of light timed to the music.", credits: "Direction, CG \u2014 Parallax Works" }
+];
+var portfolio_reel_carousel_default = defineTemplate({
+  id: "web-portfolio-reel-carousel",
+  meta: {
+    name: "Carousel reel portfolio",
+    description: "A visual effects studio\u2019s portfolio whose pages are panels on a 3D ring: open a show and the ring turns to it, go home and it turns back. Wide frames two across on black, a page per show and a studio page. Drawn on the GPU with WebGPU, in CSS 3D elsewhere. The shows are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "carousel", "transition", "webgpu", "vfx", "film", "reel", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Carousel reel",
+    brand: { paper: "#050608", text: "#F2F4F7", onPaper: "#8E96A3", primary: "#3DDCFF", onPrimary: "#050608", card: "#0E1117", onCard: "#F2F4F7", cardMuted: "#8E96A3", line: "#1C212B" },
+    fields: { name: "Parallax Works", email: "bids@parallax.works" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 800, letterSpacing: 4, lineHeight: 24 },
+      "Small 13": { size: 13, fontWeight: 600, letterSpacing: 1.6, lineHeight: 18 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 },
+      "Lead 24": { size: 24, fontWeight: 500, lineHeight: 32 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 84": { size: 84, fontWeight: 800, letterSpacing: -3, lineHeight: 84 },
+      "Display 44": { size: 44, fontWeight: 800, letterSpacing: -1.4, lineHeight: 48 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 84", displaySmall: "Display 44" },
+    projects: WORK,
+    go: "CAROUSEL_FROM_RIGHT",
+    back: "CAROUSEL_FROM_LEFT",
+    links: [["work", "REEL"], ["studio", "STUDIO"]],
+    lead: { kicker: "VISUAL EFFECTS \xB7 LONDON \xB7 MONTR\xC9AL", headline: "Impossible shots, delivered on time.", intro: "Parallax Works makes visual effects for features, series, games and commercials: 140 artists across two studios." },
+    grid: { cols: 2, gap: 16, ratio: 0.5625, radius: 0, card: { fill: "card", pad: 0 }, meta: "{{item.client}} \u2014 {{item.kind}}", tablet: 1 },
+    project: { ratio: 0.42, kicker: "SHOW", more: { cols: 3, ratio: 0.5625, label: "MORE FROM THE REEL" } },
+    studio: {
+      statement: "Two studios, one pipeline, and a habit of saying yes to the hard shot.",
+      about: "We started in a London basement in 2011 with three artists and a render farm under a desk. Now we deliver end to end \u2014 supervision on set, CG, simulation and compositing \u2014 from London and Montr\xE9al.",
+      picture: "reel-04",
+      ratio: 0.42,
+      services: ["VFX supervision", "Creatures and simulation", "Virtual production", "Compositing and finishing"],
+      clients: "Meridian Pictures, Orbital Series, Aqualux, Ironside Games and Lightline Telecom.",
+      contact: "Send scripts and storyboards for a bid within five days."
+    },
+    elsewhere: "VIMEO \xB7 LINKEDIN \xB7 INSTAGRAM"
+  })
+});
+
+export {
+  portfolio_reel_carousel_default
+};

package/dist/chunks/chunk-NBKHRO6K.js

@@ -0,0 +1,104 @@
+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 {
+  FLOWERS,
+  VARIETIES,
+  bloomBrand,
+  cut,
+  garden,
+  packetStyles
+} from "./chunk-Z5T6SXG6.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-5SHX6DFE.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/email/spring-bloom-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4800;
+var PRINT = { w: 268, h: 264 };
+var cues = [
+  { layer: "Button", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.06 } }
+];
+var spring_bloom_header_default = defineTemplate({
+  id: "email-spring-bloom-header",
+  meta: {
+    name: "Spring bloom email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a spring email: the offer, the code and the button are all on the first frame (for Outlook), beside a print of a cut-paper bed in full flower, bulbs and all; then the flowers sway, petals drift across the print and the paper sun turns \u2014 a seamless 4.8-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "spring", "bloom", "flowers", "seed packet", "cut paper", "spring clean", "offer", "saas", "seasonal"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["sale", "newsletter", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Spring bloom email header", HEADER);
+    k.quantizeGeometry = true;
+    bloomBrand(k, { offer: "Spring clean your backlog." });
+    packetStyles(k);
+    k.textStyle("Eyebrow 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 1.2, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Offer 38", { size: 38, fontWeight: 900, letterSpacing: -1.9, lineHeight: 36 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 21 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Plant your backlog", pad: [9, 20] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 9, { top: 24, right: 310, bottom: 24, left: 30 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    const s = {
+      w: PRINT.w,
+      h: PRINT.h,
+      loopMs: DURATION,
+      soil: 186,
+      hills: 96,
+      petals: 4,
+      plantScale: 0.34,
+      u: 0.45,
+      worm: { x: 0.34, y: 58 },
+      sun: { x: 214, y: 48, r: 32 },
+      clouds: [{ x: 18, y: 26, w: 84 }],
+      packets: [{ x: 132, lift: 62, scale: 0.31, packet: VARIETIES[1] }],
+      plants: [
+        { x: 42, h: 300, R: 66, flower: FLOWERS.tulip, lean: -8 },
+        { x: 212, h: 340, R: 80, flower: FLOWERS.cosmos, lean: 10 },
+        { x: 256, h: 170, R: 50, flower: FLOWERS.daisy, lean: -10 }
+      ]
+    };
+    const print = k.stack(sheet, { width: PRINT.w, height: PRINT.h, fill: "paper", radius: 14, clip: true, stroke: { color: "white", width: 7, align: "INSIDE" }, effects: [cut(1, 0.24, 1.6)], absolute: { x: 600 - PRINT.w - 18, y: 18 }, name: "Print" });
+    const ground = k.frame(print, { x: 0, y: 0, width: PRINT.w, height: PRINT.h }, { name: "Garden", clip: true });
+    garden(k, ground, s);
+    k.text(sheet, "Spring planting \xB7 40% off", { style: "Eyebrow 12", color: "text", name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 38", color: "text", name: "Offer" });
+    k.text(sheet, "{{brand.name}} thins the duplicates and composts what died over winter. Code FIRSTSHOOTS, until 30 April.", { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "Plant your backlog" }, { name: "Button" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  spring_bloom_header_default
+};