@popcraft/kit 0.26.1 → 0.27.0

package/dist/chunks/chunk-NML6QG3V.js

@@ -0,0 +1,123 @@
+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 {
+  KONTOR,
+  fitGrid,
+  fitRoute,
+  grot,
+  lockup,
+  routeGeo,
+  routeMap,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-GFKWCH3X.js";
+import {
+  restyle
+} from "./chunk-QLV6445V.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/social/style-swiss-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS link preview";
+var GRID = { cols: 12, margin: 56, gutter: 16 };
+var FIELD = 0.36;
+var routeH = (w, pad) => {
+  const g = routeGeo(w, 1e4, pad);
+  return Math.round(7 * g.u + 2 * pad);
+};
+var style_swiss_link_preview_default = defineTemplate({
+  id: "social-saas-style-swiss-link-preview",
+  meta: {
+    name: NAME,
+    description: "A link preview in the Swiss typographic style: a visible grid, a giant 48h over the promise set flush left, and a red field on the right third carrying a white transit-style route diagram with its late stretch and rail reroute. 1200 \xD7 630, with a 1280 \xD7 640 GitHub social preview and a 1600 \xD7 900 X post",
+    category: "social",
+    tags: ["link preview", "open graph", "og image", "github", "saas", "swiss", "international typographic style", "grid", "b2b", "logistics", "product", "launch"],
+    platforms: ["web", "x", "linkedin", "facebook", "github"],
+    formats: ["og-image", "post"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("og-image"));
+    k.quantizeGeometry = true;
+    swissBrand(k, { tagline: "Know which shipments will be late. Two days early." });
+    grot(k, "Brand 26", 26, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Brand 38", 38, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Giant 230", 230, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Giant 320", 320, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Head 40", 40, { weight: 700, lead: 1.05, spacing: -0.03 });
+    grot(k, "Head 54", 54, { weight: 700, lead: 1.05, spacing: -0.03 });
+    grot(k, "Site 20", 20, { weight: 600, lead: 1.3 });
+    grot(k, "Site 26", 26, { weight: 600, lead: 1.3 });
+    const sheet = k.sheet;
+    const W = 1200, H = 630;
+    k.flowSheet(sheet, 0, { top: 52, right: Math.round(W * FIELD) + 40, bottom: 48, left: 56 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    swissGrid(k, sheet, GRID);
+    const fw = Math.round(W * FIELD);
+    k.rect(sheet, fw, H, "primary", { name: "Field", absolute: { x: W - fw, y: 0 } });
+    const rh = routeH(fw, 64);
+    routeMap(k, sheet, { w: fw, h: rh, pad: 64, weight: 14, ink: "onPrimary", late: "text", ground: "primary", labels: "Site 20", labelInk: "onPrimary", name: "Route", absolute: { x: W - fw, y: Math.round((H - rh) / 2) - 30 } });
+    k.component("Route note", { width: fw - 128, description: "The line under the route: what the forecast caught.", props: { Text: `+${KONTOR.slip} h from Duisburg to Mannheim, rerouted by rail` } }, (id) => {
+      k.propText(id, "Text", { style: "Site 20", color: "onPrimary", width: "FILL", name: "Note words" });
+    });
+    k.instance(sheet, "Route note", {}, { name: "Field note", absolute: { x: W - fw + 64, y: H - 100 } });
+    const top = k.stack(sheet, { gap: 12, name: "Top" });
+    lockup(k, top, { size: 26, style: "Brand 26" });
+    rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    k.text(sheet, "48h", { style: "Giant 230", color: "text", name: "Giant" });
+    const foot = k.stack(sheet, { gap: 14, name: "Foot" });
+    k.text(foot, "{{brand.tagline}}", { style: "Head 40", color: "text", name: "Headline" });
+    k.text(foot, "{{brand.site}}", { style: "Site 20", color: "text", name: "Site" });
+    const fit = (kit, id, big) => {
+      const { width: w, height: h } = kit.node(id);
+      const f = Math.round(w * FIELD);
+      kit.patch(id, { padding: { top: big ? 72 : 52, right: f + (big ? 56 : 40), bottom: big ? 64 : 48, left: big ? 80 : 56 } });
+      fitGrid(kit, id, big ? { cols: 12, margin: 80, gutter: 20 } : GRID);
+      for (const n of kit.named(id, "Field")) kit.patch(n, { x: w - f, y: 0, width: f, height: h });
+      const pad = big ? 90 : 64, rh2 = routeH(f, pad);
+      fitRoute(kit, id, "Route", f, rh2, { pad, weight: 14 });
+      for (const n of kit.named(id, "Route")) kit.patch(n, { x: w - f, y: Math.round((h - rh2) / 2) - 30 });
+      for (const n of kit.named(id, "Field note")) kit.patch(n, { x: w - f + pad, y: h - (big ? 130 : 100), width: f - 2 * pad });
+      if (big) restyle(kit, id, "Note words", "Site 26");
+      if (big) {
+        restyle(kit, id, "Giant", "Giant 320");
+        restyle(kit, id, "Headline", "Head 54");
+        restyle(kit, id, "Site", "Site 26");
+      }
+      if (big) {
+        restyle(kit, id, "Brand name", "Brand 38");
+        restyle(kit, id, "Station", "Site 26");
+        for (const t of kit.named(id, "Logo tile")) {
+          kit.patch(t, { padding: { top: 8, right: 8, bottom: 8, left: 8 } });
+          for (const c of kit.node(t).childIds) kit.patch(c, { width: 38, height: 38 });
+        }
+      }
+    };
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => fit(kit, id, false) },
+      { preset: "x-post", adjust: (kit, id) => fit(kit, id, true) }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  style_swiss_link_preview_default
+};

package/dist/chunks/chunk-NNNWNAKR.js

@@ -0,0 +1,173 @@
+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 {
+  BREAKPOINTS,
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  resizePhoto
+} 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/web/product-page.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SPECS = [
+  ["Volume", "28 litres"],
+  ["Weight", "1.02 kg"],
+  ["Back length", "S/M 41\u201346 cm \xB7 M/L 46\u201352 cm"],
+  ["Fabric", "210D recycled ripstop, PFAS-free coating"],
+  ["Laptop sleeve", "Fits a 16-inch laptop"],
+  ["Warranty", "Lifetime, repairs included"]
+];
+var FEATURES = [
+  ["Carries like a bigger pack", "A ventilated back panel and a hip belt that takes the weight off your shoulders on a long day."],
+  ["Opens all the way", "A clamshell zip lays the main pocket flat, so the thing you need is never at the bottom."],
+  ["Made to be mended", "Replaceable buckles and straps, and free repairs for as long as you own it."]
+];
+var REVIEWS = [
+  ["Great for a day in the hills", "Took it up Snowdon in the rain and everything stayed dry. The hip belt pockets fit my phone and a bar each.", "Hannah W., Manchester \xB7 Size M/L"],
+  ["My commute bag now too", "Laptop, lunch and a jacket with room to spare, and it doesn\u2019t look like a hiking pack on the train.", "Tom\xE1s R., Bristol \xB7 Size S/M"]
+];
+var product_page_default = defineTemplate({
+  id: "web-product-page",
+  meta: {
+    name: "Product page",
+    description: "An online-shop product page: a photo gallery, price and rating, colour and size pickers, add to cart, features, specs and reviews \u2014 desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["product page", "ecommerce", "shop", "store", "product detail", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "launch"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  breakpoints: true,
+  build() {
+    const k = new Kit("Product page", preset("web-desktop"));
+    k.brand(
+      { paper: "#FFFFFF", text: "#17201B", onPaper: "#56615A", primary: "#23513B", onPrimary: "#FFFFFF", photo: "#E6EAE4", slate: "#4A5561", moss: "#5E7A4A", rust: "#A5532E", star: "#C98A12", tint: "#F1F4EF", onTint: "#17201B", tintMuted: "#56615A", line: "#DDE2DC" },
+      { name: "Altitude Supply" }
+    );
+    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("Crumb 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Product 40", { size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 46 });
+    k.textStyle("Product 32", { size: 32, fontWeight: 800, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Rating 15", { size: 15, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Price 28", { size: 28, fontWeight: 700, letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Body 16", { size: 16, fontWeight: 400, lineHeight: 25 });
+    k.textStyle("Label 14", { size: 14, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Size 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Section 28", { size: 28, fontWeight: 800, letterSpacing: -0.5, lineHeight: 36 });
+    k.textStyle("Feature 18", { size: 18, fontWeight: 700, lineHeight: 25 });
+    k.textStyle("Spec 15", { size: 15, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    buttons(k, { style: "Button 16", pad: [16, 28] });
+    k.variantSet("Size option", "State", ["Default", "Selected"], { direction: "HORIZONTAL", width: "HUG", radius: 10, padding: { top: 12, right: 18, bottom: 12, left: 18 }, props: { Label: "M/L" }, description: "One size to pick; the selected one is outlined in ink." }, (state, id) => {
+      k.propText(id, "Label", { style: "Size 15", color: "text", autoWidth: true });
+    }, (state) => ({ stroke: { color: state === "Selected" ? "text" : "line", width: state === "Selected" ? 2 : 1 } }));
+    k.changeTo("Size option/Default", "ON_CLICK", "Size option/Selected", 120);
+    k.changeTo("Size option/Selected", "ON_CLICK", "Size option/Default", 120);
+    k.component("Stars", { direction: "HORIZONTAL", width: "HUG", gap: 2, props: {} }, (id) => {
+      for (let i = 0; i < 5; i++) k.star(id, 16, "star", { name: "Star" });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 56, top: 32 });
+    nav(k, sheet, { links: ["Packs", "Shelter", "Clothing", "Repairs"], cta: "Basket (0)", style: "Nav 16", brandStyle: "Brand 20", quiet: true });
+    k.text(sheet, "Packs  /  Daypacks  /  Ridge 28", { style: "Crumb 14", color: "onPaper", name: "Breadcrumb" });
+    const main = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Main" });
+    const gallery = k.stack(main, { width: 680, gap: 12, name: "Gallery" });
+    k.photo(gallery, 680, 680, { radius: 18, ground: "photo", name: "Hero photo" });
+    const thumbs = k.stack(gallery, { direction: "HORIZONTAL", gap: 12, name: "Thumbnails" });
+    for (let i = 0; i < 4; i++) k.photo(thumbs, 161, 161, { radius: 12, ground: "photo", name: "Thumbnail" });
+    const info = k.stack(main, { gap: 22, name: "Info" });
+    k.text(info, "Ridge 28 Daypack", { style: "Product 40", color: "text", name: "Product name" });
+    const rating = k.stack(info, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Rating" });
+    k.instance(rating, "Stars", {}, { name: "Stars" });
+    k.text(rating, "4.8 \xB7 312 reviews", { style: "Rating 15", color: "onPaper", autoWidth: true, name: "Review count" });
+    k.text(info, "$168", { style: "Price 28", color: "text", name: "Price" });
+    k.text(info, "A 28-litre pack for long days out and the commute home: a breathable back, a clamshell opening and a sleeve for your laptop.", { style: "Body 16", color: "onPaper", name: "Summary" });
+    const colour = k.stack(info, { gap: 10, name: "Colour" });
+    k.text(colour, "Colour \u2014 Moss", { style: "Label 14", color: "text", name: "Colour label" });
+    const sw = k.stack(colour, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Swatches" });
+    for (const role of ["slate", "moss", "rust"]) k.ellipse(sw, 32, role, { name: "Swatch", ...role === "moss" ? { stroke: { color: "text", width: 2 } } : {} });
+    const size = k.stack(info, { gap: 10, name: "Size" });
+    k.text(size, "Back length", { style: "Label 14", color: "text", name: "Size label" });
+    const sizes = k.stack(size, { direction: "HORIZONTAL", gap: 10, name: "Sizes" });
+    k.instance(sizes, "Size option/Default", { Label: "S/M" }, { name: "Size option" });
+    k.instance(sizes, "Size option/Selected", { Label: "M/L" }, { name: "Size option" });
+    k.instance(info, "Button", { Label: "Add to basket \u2014 $168" }, { name: "Add to basket" });
+    const ship = k.stack(info, { gap: 6, fill: "tint", radius: 12, padding: 16, name: "Delivery" });
+    k.text(ship, "Free delivery over $100 \xB7 ships in 1\u20132 working days", { style: "Small 14", color: "onTint", name: "Delivery line" });
+    k.text(ship, "Free returns for 60 days, even if you\u2019ve used it on the trail.", { style: "Small 14", color: "tintMuted", name: "Returns line" });
+    const built = k.stack(sheet, { gap: 24, name: "Built for" });
+    k.text(built, "Built for long days", { style: "Section 28", color: "text", name: "Built title" });
+    const row = k.stack(built, { direction: "HORIZONTAL", gap: 24, name: "Feature row" });
+    for (const [t, b] of FEATURES) {
+      const c = k.stack(row, { gap: 8, fill: "tint", radius: 16, padding: 24, name: "Feature" });
+      k.text(c, t, { style: "Feature 18", color: "onTint", name: "Feature title" });
+      k.text(c, b, { style: "Body 16", color: "tintMuted", name: "Feature body" });
+    }
+    const lower = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Details" });
+    const specs = k.stack(lower, { gap: 20, name: "Specs" });
+    k.text(specs, "Specifications", { style: "Section 28", color: "text", name: "Specs title" });
+    const table = k.stack(specs, { fill: "tint", radius: 16, padding: { top: 8, right: 24, bottom: 8, left: 24 }, name: "Spec table" });
+    for (const [a, b] of SPECS) {
+      const r = k.stack(table, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", padding: { top: 14, right: 0, bottom: 14, left: 0 }, name: "Spec" });
+      k.text(r, a, { style: "Spec 15", color: "tintMuted", autoWidth: true, name: "Spec name" });
+      k.text(r, b, { style: "Spec 15", color: "onTint", align: "RIGHT", name: "Spec value" });
+    }
+    const reviews = k.stack(lower, { gap: 20, name: "Reviews" });
+    k.text(reviews, "What people say", { style: "Section 28", color: "text", name: "Reviews title" });
+    for (const [t, b, who] of REVIEWS) {
+      const c = k.stack(reviews, { gap: 8, radius: 16, stroke: { color: "line", width: 1 }, padding: 24, name: "Review" });
+      k.instance(c, "Stars", {}, { name: "Stars" });
+      k.text(c, t, { style: "Feature 18", color: "text", name: "Review title" });
+      k.text(c, b, { style: "Body 16", color: "onPaper", name: "Review body" });
+      k.text(c, who, { style: "Small 14", color: "onPaper", name: "Reviewer" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, name: "Footer" });
+    k.text(foot, "\xA9 2026 {{brand.name}} \xB7 Kendal, Cumbria \xB7 Repairs at every shop, for life", { style: "Footer 14", color: "onPaper", name: "Copyright" });
+    k.text(foot, "Delivery \xB7 Returns \xB7 Contact", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Links" });
+    webResponsive(k, sheet, {
+      stack: ["Main", "Feature row", "Details", "Footer"],
+      restyle: { "Product 40": { mobile: "Product 32" } },
+      hide: { mobile: ["Nav links"] },
+      gap: { mobile: 40 },
+      tweak: (kit, id, sz) => {
+        const inner = kit.node(id).width - BREAKPOINTS[sz].side * 2;
+        const g = sz === "laptop" ? 600 : inner;
+        for (const n of kit.named(id, "Gallery")) kit.patch(n, { width: g, layoutSizingHorizontal: "FIXED" });
+        for (const p of kit.named(id, "Hero photo")) resizePhoto(kit, p, g, g);
+        for (const p of kit.named(id, "Thumbnail")) {
+          const t = Math.floor((g - 36) / 4);
+          resizePhoto(kit, p, t, t);
+        }
+        if (sz === "laptop") for (const n of kit.named(id, "Main")) kit.patch(n, { itemSpacing: 48 });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  product_page_default
+};

package/dist/chunks/chunk-NQYAOOEL.js

@@ -0,0 +1,157 @@
+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 {
+  HERO_BEATS
+} from "./chunk-LODJA7BO.js";
+import {
+  CLIP
+} from "./chunk-DPAHANFI.js";
+import {
+  EXPO,
+  HOLD,
+  OUT,
+  SCENE_BUILDERS,
+  cursor,
+  popIn,
+  shadow,
+  travel
+} from "./chunk-TTYZYD3I.js";
+import {
+  DURATION,
+  buildTemplateWall
+} from "./chunk-OAFO76BH.js";
+import {
+  COLLABORATORS,
+  COLORS,
+  SCENES,
+  hexColor
+} from "./chunk-4CV2R2GI.js";
+import {
+  trailerType
+} from "./chunk-77WF5E33.js";
+import {
+  key
+} from "./chunk-FAAVZ2GX.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease,
+  sceneSequence
+} from "./chunk-QFFXZQH5.js";
+import {
+  sequenceClips
+} from "./chunk-XV5ONKNC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/landing-hero/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SCENE_D_MS = SCENES.find((sc) => sc.key === "sD").ms;
+var FPS = 30;
+var CARD = { x: 120, y: 60, width: 1640, height: 920 };
+var onCard = (x, y) => ({ x: Math.round(CARD.x + x * CARD.width / 1240), y: Math.round(CARD.y + y * CARD.height / 775) });
+var BEATS = HERO_BEATS;
+function footageBeat(k, s, b) {
+  const back = k.rect(s, CARD.width, CARD.height, "popInk", { name: "Hard shadow", radius: 30, absolute: { x: CARD.x + 34, y: CARD.y + 34 } });
+  const win = k.stack(s, { name: "Window", width: CARD.width, height: CARD.height, fill: "popInk", radius: 30, clip: true, stroke: { color: "popInk", width: 10 }, absolute: { x: CARD.x, y: CARD.y }, effects: [shadow("#000000", 0.25, 30, 80)] });
+  const z = b.zoom ?? 1, [fx, fy] = b.focus ?? [0.5, 0.5];
+  const vw = CARD.width * z, vh = CARD.height * z;
+  const at = { x: Math.round(Math.min(0, Math.max(CARD.width - vw, CARD.width / 2 - fx * vw))), y: Math.round(Math.min(0, Math.max(CARD.height - vh, CARD.height / 2 - fy * vh))) };
+  k.video(win, CLIP[b.clip], Math.round(vw), Math.round(vh), { name: "Footage", speed: b.speed, absolute: at });
+  for (const id of [win, back]) {
+    key(k, id, "translateX", [[0, 420, EXPO], [550, 0]]);
+    key(k, id, "rotation", [[0, 6, EXPO], [550, -1]]);
+    key(k, id, "opacity", [[0, 0, OUT], [200, 1]]);
+  }
+  const word = k.text(s, b.word, { style: "Beat 150", color: b.ink, autoWidth: true, name: "Word", absolute: { x: 60, y: 24 } });
+  popIn(k, word, 60, { from: 0.5, turn: -4 });
+}
+function teammates(k, s, ms) {
+  const at = (t) => Math.round(t * Math.min(1, ms / 3600));
+  const [maya, leo] = COLLABORATORS;
+  const a = cursor(k, s, maya, onCard(240, 520));
+  travel(k, a, [[at(300), onCard(240, 520).x, onCard(240, 520).y], [at(1300), onCard(620, 330).x, onCard(620, 330).y], [at(2400), onCard(520, 600).x, onCard(520, 600).y], [at(3500), onCard(760, 470).x, onCard(760, 470).y]]);
+  popIn(k, a, at(300), { from: 0.2 });
+  const b = cursor(k, s, leo, onCard(1e3, 640));
+  travel(k, b, [[at(700), onCard(1e3, 640).x, onCard(1e3, 640).y], [at(1800), onCard(880, 360).x, onCard(880, 360).y], [at(2900), onCard(1060, 300).x, onCard(1060, 300).y]]);
+  popIn(k, b, at(700), { from: 0.2 });
+}
+var CLI_LINES = [
+  ["popcraft new launch.popcraft --name Launch", "\u2713 launch.popcraft"],
+  ["popcraft run launch.popcraft write_design --size ig-post --script @post.js", "\u2713 14 layers on Page 1"],
+  ["popcraft run launch.popcraft export.nodes --format PNG --out post.png", "\u2713 post.png  1080 \xD7 1080"]
+];
+function cliBeat(k, s, ms) {
+  const win = k.stack(s, { name: "Terminal", width: 1500, height: 640, fill: "popInk", radius: 28, clip: true, stroke: { color: "popInk", width: 10 }, absolute: { x: 210, y: 220 }, effects: [shadow("#000000", 0.3, 30, 80)] });
+  const bar = k.stack(win, { name: "Title bar", direction: "HORIZONTAL", height: 56, fill: "chromeBar", gap: 12, padding: { top: 0, right: 0, bottom: 0, left: 24 }, align: "CENTER" });
+  for (const c of ["lightRed", "lightAmber", "lightGreen"]) k.ellipse(bar, 18, c, { name: "Light" });
+  k.text(bar, "zsh \u2014 popcraft", { style: "Mono 26", color: "chromeTitle", autoWidth: true, name: "Title" });
+  key(k, win, "translateY", [[0, 80, EXPO], [450, 0]]);
+  key(k, win, "opacity", [[0, 0, OUT], [200, 1]]);
+  const per = (ms - 500) / CLI_LINES.length;
+  CLI_LINES.forEach(([cmd, out], i) => {
+    const t0 = 300 + i * per, typed = per * 0.6;
+    const line = k.text(win, `$ ${cmd}`, { style: "Mono 30", color: "white", width: 1440, name: `Command ${i + 1}`, absolute: { x: 36, y: 96 + i * 170 } });
+    const steps = 14;
+    k.animate(line, "text.content", [{ t: 0, v: "$ ", ease: ease.hold }, ...Array.from({ length: steps }, (_, n) => ({ t: Math.round(t0 + typed * (n + 1) / steps), v: `$ ${cmd.slice(0, Math.ceil(cmd.length * (n + 1) / steps))}`, ease: ease.hold }))]);
+    const answer = k.text(win, out, { style: "Mono 30", color: "mint", autoWidth: true, name: `Answer ${i + 1}`, absolute: { x: 36, y: 96 + i * 170 + 52 } });
+    key(k, answer, "opacity", [[0, 0, HOLD], [Math.round(t0 + typed + 60), 1]]);
+  });
+}
+var landing_hero_default = defineTemplate({
+  id: "motion-landing-hero",
+  meta: {
+    name: "PopCraft landing hero",
+    description: "The 37-second loop in the hero of popcraft.app at 1920\xD71080, one run of work in the real editor: an animated app designed, animated, talked over and shipped; a sprite drawn, animated and made the hero of a pixel-art game; templates remixed \u2014 a title, a Lottie, a GIF card; the agent, image, music and video generation and the CLI; then so much more \u2014 eighteen sheets in one composition",
+    category: "animation",
+    tags: ["animation", "hero", "landing", "loop", "product", "game", "pixel art", "scenes", "composition", "popcraft"],
+    platforms: ["web", "x", "linkedin"],
+    formats: ["video", "ad"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-06",
+    updated: "2026-10-06"
+  },
+  sequence: true,
+  build() {
+    const k = new Kit("Landing hero", preset("video-1080p"));
+    k.brand({ ...COLORS });
+    k.textStyle("Beat 150", { size: 130, fontWeight: 900, letterSpacing: -0.045 * 130, lineHeight: 0.92 * 130 });
+    trailerType(k, ["Card 46", "Card note 26", "Head 170", "Label 26", "Tag 20"]);
+    k.textStyle("Mono 30", { fontFamily: "JetBrains Mono", size: 30, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Mono 26", { fontFamily: "JetBrains Mono", size: 26, fontWeight: 600, lineHeight: 30 });
+    const sheets = [];
+    for (const [i, b] of BEATS.entries()) {
+      const id = i === 0 ? k.sheet : k.addSheet(void 0, b.name);
+      k.nameSheet(id, b.name);
+      const wall = b.scene === "wall";
+      k.flowSheet(id, 0, 0, b.ground, wall ? "CENTER" : "MIN", wall ? "CENTER" : "MIN");
+      k.timeline(id, { duration: b.scene === "wall" ? DURATION : b.scene === "more" ? SCENE_D_MS : b.ms, fps: FPS });
+      if (wall) buildTemplateWall(k, id, { pill: "popInk", onPill: "pop", caption: "caption", card: "white", headline: "Tons of templates" });
+      else if (b.scene === "cli") cliBeat(k, id, b.ms);
+      else if (b.scene === "more") SCENE_BUILDERS.sD(k, id);
+      else footageBeat(k, id, b);
+      if (b.team) teammates(k, id, b.ms);
+      sheets.push(id);
+    }
+    k.setCover(sheets[0]);
+    const doc = k.finish();
+    const full = sceneSequence(doc.nodes, { id: "comp-landing-hero", name: "Landing hero", frames: sheets, fps: FPS, background: hexColor(COLORS.popInk) });
+    const comp = { ...full, clips: sequenceClips(full.clips.map((c, i) => ({ ...c, out: c.in + BEATS[i].ms }))) };
+    const markers = comp.clips.map((c, i) => ({ id: `beat-${i + 1}`, t: c.start, label: BEATS[i].name }));
+    return { ...doc, compositions: { [comp.id]: { ...comp, markers } } };
+  }
+});
+
+export {
+  landing_hero_default
+};

package/dist/chunks/chunk-NTLJYZ64.js

@@ -0,0 +1,77 @@
+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 {
+  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/typewriter.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 100 },
+  { layer: "Opening", preset: "typewriter", at: 500, params: { duration: 2100 } },
+  { layer: "Invitation", preset: "rise-in", at: 2800 },
+  { layer: "Details", preset: "pop-in", at: 3200 },
+  outro(["Eyebrow", "Opening", "Invitation", "Details"], 7e3)
+];
+var typewriter_default = defineTemplate({
+  id: "motion-kinetic-typewriter",
+  meta: {
+    name: "Typewriter line",
+    description: "A writing workshop\u2019s opening line typed out letter by letter, then the invitation and the date \u2014 8 seconds, 16:9 with a 9:16 story cut",
+    category: "animation",
+    tags: ["animation", "kinetic type", "typewriter", "writing", "workshop", "library", "books"],
+    platforms: ["instagram", "youtube", "facebook", "linkedin"],
+    formats: ["video", "story", "reel", "title-card"],
+    useCases: ["event", "education", "invitation"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Typewriter line", preset("video-1080p"));
+    k.brand(
+      { paper: "#F4EFE6", text: "#1D1A16", onPaper: "#5E554A", primary: "#8C2F39", onPrimary: "#FFFFFF" },
+      { eyebrow: "Saturday writing workshop", invitation: "Every story starts with one line. Come and write yours." }
+    );
+    k.textStyle("Eyebrow 32", { size: 32, fontWeight: 700, letterSpacing: 6, lineHeight: 40, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Opening 120", { size: 120, fontFamily: "Source Serif 4", fontWeight: 700, letterSpacing: -2, lineHeight: 132, textAlign: "CENTER" });
+    k.textStyle("Opening 96", { size: 96, fontFamily: "Source Serif 4", fontWeight: 700, letterSpacing: -2, lineHeight: 108, textAlign: "CENTER" });
+    k.textStyle("Invitation 46", { size: 46, fontWeight: 500, lineHeight: 58, textAlign: "CENTER" });
+    k.textStyle("Details 32", { size: 32, fontWeight: 700, lineHeight: 40 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Details 32", label: "Nov 8 \xB7 10 am \xB7 Eastside Library", pad: [14, 32] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 44, titleSafe(160), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 8e3, fps: 30 });
+    k.text(sheet, "{{brand.eyebrow}}", { style: "Eyebrow 32", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "It was a dark and stormy night\u2026", { style: "Opening 120", color: "text", name: "Opening" });
+    k.text(sheet, "{{brand.invitation}}", { style: "Invitation 46", color: "onPaper", name: "Invitation" });
+    k.instance(sheet, "Chip", { Label: "Nov 8 \xB7 10 am \xB7 Eastside Library" }, { name: "Details" });
+    k.cues(sheet, cues);
+    k.variants(sheet, storyCut((kit, id) => restyleAll(kit, id, ["Opening"], "Opening 96")));
+    return k.finish();
+  }
+});
+
+export {
+  typewriter_default
+};

package/dist/chunks/chunk-NUCIOZDY.js

@@ -0,0 +1,113 @@
+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 {
+  ZINE,
+  burst,
+  grain,
+  misprint,
+  register,
+  risoBrand,
+  stamp,
+  staples,
+  target,
+  tilt
+} from "./chunk-76KSULKM.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-EDJ2MPSL.js";
+import {
+  background
+} from "./chunk-CHL5BU5W.js";
+import {
+  dots,
+  overprint
+} from "./chunk-IEHHAKQQ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/riso-zine-changelog-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var cues = [
+  { layer: "Stamp", preset: "pulse", at: 600, params: { duration: 500, amount: 0.08 } },
+  { layer: "Sticker", preset: "wobble", at: 1700, params: { duration: 800 } },
+  { layer: "Button", preset: "pulse", at: 2800, params: { duration: 700, amount: 0.05 } }
+];
+var riso_zine_changelog_header_default = defineTemplate({
+  id: "email-riso-zine-changelog-header",
+  meta: {
+    name: "Riso changelog email header (animated GIF)",
+    description: 'A 600 \xD7 300 animated header for a changelog email sent as an issue of a zine: the issue number in blue with its pink pass slipping out of register, a halftone sun whose dots swell, an "out now" rubber stamp and a starburst sticker. Everything is on the first frame (for Outlook); a seamless four-second GIF loop',
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "riso", "risograph", "zine", "halftone", "changelog", "release notes", "saas", "indie"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["changelog", "newsletter", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Riso changelog email header", HEADER);
+    k.quantizeGeometry = true;
+    risoBrand(k, { issue: `ISSUE NO. ${ZINE.issue}` });
+    k.textStyle("Eyebrow 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 1.5, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Title 58", { size: 58, fontWeight: 900, letterSpacing: -3, lineHeight: 54 });
+    k.textStyle("Inside 15", { ...SERIF, size: 15, fontWeight: 600, fontStyle: "italic", lineHeight: 21 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 18 });
+    k.textStyle("Stamp 13", { ...MONO, size: 13, fontWeight: 800, letterSpacing: 1.5, lineHeight: 16 });
+    k.textStyle("Sticker 19", { size: 19, fontWeight: 900, letterSpacing: -0.5, lineHeight: 18, textAlign: "CENTER" });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Read issue no. 12", pad: [10, 20], radius: 2 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 10, { top: 26, right: 250, bottom: 26, left: 44 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    background(k, sheet, "paper", { effects: grain(0.05, 2) });
+    dots(k, sheet, { size: 250, dot: 11, angle: 135, name: "Sun", absolute: { x: 392, y: -46 } });
+    overprint(k, k.ellipse(sheet, 130, "primary", { name: "Second sun", absolute: { x: 352, y: 176 } }));
+    dots(k, sheet, { size: 150, height: 70, square: true, line: true, role: "text", dot: 7, screen: -10, angle: 0, from: 0.15, to: 0.6, name: "Blue screen", absolute: { x: 450, y: 232 } });
+    staples(k, sheet, { x: 14, y: 70, gap: 120, length: 30 });
+    target(k, sheet, 20, { name: "Mark", absolute: { x: 572, y: 272 } });
+    k.text(sheet, `{{brand.name}} zine \xB7 the changelog`, { style: "Eyebrow 12", color: "text", name: "Eyebrow" });
+    const title = misprint(k, sheet, "{{brand.issue}}", { style: "Title 58", name: "Title" });
+    k.text(sheet, "Rotate anything to any angle. Upload your own fonts. Undo that survives a closed tab.", { style: "Inside 15", color: "text", name: "Inside" });
+    k.instance(sheet, "Button pill", { Label: "Read issue no. 12" }, { name: "Button" });
+    stamp(k, sheet, "OUT NOW", { style: "Stamp 13", deg: -9, pad: [6, 12], name: "Stamp", absolute: { x: 372, y: 34 } });
+    const sticker = k.stack(sheet, { width: 104, height: 104, align: "CENTER", justify: "CENTER", name: "Sticker", absolute: { x: 474, y: 116 } });
+    burst(k, sticker, 104, "primary", { points: 14, depth: 0.17, absolute: { x: 0, y: 0 } });
+    k.text(sticker, "3 NEW\nTHINGS", { style: "Sticker 19", color: "onPrimary", name: "Sticker words" });
+    tilt(k, sticker, 10);
+    k.animate(title.ghost, "translateX", [0, 2, -1, 3, 1, -2, 2, 0].map((v, i) => ({ t: i * 500, v, ease: ease.hold })));
+    k.animate(k.named(sheet, "Sun screen")[0], "effects[@e1].dotSize", [{ t: 0, v: 11, ease: ease.inOut("sine") }, { t: DURATION / 2, v: 15, ease: ease.inOut("sine") }, { t: DURATION, v: 11 }]);
+    k.cues(sheet, cues);
+    register(k, sheet);
+    return k.finish();
+  }
+});
+
+export {
+  riso_zine_changelog_header_default
+};