@popcraft/kit 0.53.7 → 0.53.8

package/dist/chunks/chunk-DIJ6CPB3.js

@@ -0,0 +1,209 @@
+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 {
+  BUNKER,
+  COIN_FACE,
+  INVADER,
+  SHIP,
+  SQUID,
+  STAR,
+  UFO,
+  arcadeBrand,
+  backdrop,
+  bitmapPaths,
+  hardShadow,
+  march,
+  overlay,
+  refit,
+  segBar,
+  sprite,
+  spriteInks
+} from "./chunk-34Q7OZF4.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  blink,
+  cutOff,
+  cutOn
+} from "./chunk-7V4SQL3C.js";
+import {
+  bloom
+} from "./chunk-YORIY3BT.js";
+import {
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/arcade-level-up.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var POWER_UPS = [["Usage alerts before the invoice lands", "+600 XP"], ["Proration down to the second", "+500 XP"], ["Stripe and Paddle sync, both ways", "+500 XP"], ["Sales tax handled in 41 countries", "+400 XP"]];
+var PLUS = ["..#..", "..#..", "#####", "..#..", "..#.."];
+var COLS = 7;
+var counts = [
+  { layer: "XP figure", at: 1200, duration: 1e3, counter: { from: 0, to: 2e3, separator: ",", suffix: " / 2,000 XP" }, tick: 100 }
+];
+var cues = [
+  // The title types on, its pixel shadow with it.
+  { layer: "Title", preset: "typewriter", at: 300, params: { duration: 450 } },
+  cutOn("Star", 800, 150),
+  cutOn("XP", 1100),
+  { layer: "XP fill", preset: "wipe-in", at: 1200, params: { duration: 1e3, ease: { kind: "linear" } } },
+  cutOn("Power title", 2400),
+  cutOn("Power-up", 2600, 250),
+  cutOn("Url", 3800),
+  blink("Level bar", 4200, 800),
+  cutOff(["Title", "Star", "XP", "Power title", "Power-up", "Url"], 6300, 40)
+];
+var FIELDS = {
+  post: { top: 136, bottom: 178, side: 80, ufo: -200, swarm: 52, rows: 1, bunkers: null, cannon: 936 },
+  portrait: { top: 356, bottom: 300, side: 80, ufo: 36, swarm: 116, rows: 3, bunkers: 1082, cannon: 1166 },
+  story: { top: 450, bottom: 490, side: 110, ufo: 96, swarm: 176, rows: 3, bunkers: 1490, cannon: 1620 }
+};
+function placeField(k, sheet, f) {
+  k.patch(sheet, { padding: { top: f.top, right: f.side, bottom: f.bottom, left: f.side } });
+  const y = (name, at) => {
+    for (const id of k.named(sheet, name)) k.patch(id, at === null ? { visible: false } : { visible: true, y: at });
+  };
+  y("UFO", f.ufo);
+  y("Swarm", f.swarm);
+  for (const [i, id] of k.named(sheet, "Swarm row").entries()) k.patch(id, { visible: i < f.rows });
+  y("Bunkers", f.bunkers);
+  y("Cannon", f.cannon);
+  y("Ground", f.cannon + 64);
+  y("Lives", f.cannon + 92);
+  y("Coins", f.cannon + 88);
+}
+var arcade_level_up_default = defineTemplate({
+  id: "motion-arcade-level-up",
+  meta: {
+    name: "Arcade level-up post (animated)",
+    description: "A release announced as a level-up screen: on a pixel-shadowed window over a starfield and a marching swarm, the version cuts on, the XP bar fills block by block as its figure ticks, and the changelog lands as a list of power-ups with the XP each was worth. Seven seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "arcade", "8-bit", "pixel art", "retro", "changelog", "release", "level up", "saas", "build in public", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["changelog", "launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Arcade level-up post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    arcadeBrand(k, { release: "Coinop 2.0", url: "coinop.example/changelog" });
+    k.textStyle("Bar 30", { size: 30, fontWeight: 800, letterSpacing: 2, lineHeight: 38, ...MONO });
+    k.textStyle("Title 120", { size: 120, fontWeight: 800, letterSpacing: -5, lineHeight: 124, ...MONO });
+    k.textStyle("Label 24", { size: 24, fontWeight: 700, letterSpacing: 3, lineHeight: 32, textCase: "UPPER", ...MONO });
+    k.textStyle("Power 32", { size: 32, fontWeight: 700, letterSpacing: -0.3, lineHeight: 42 });
+    k.textStyle("Bonus 24", { size: 24, fontWeight: 800, lineHeight: 42, ...MONO });
+    k.textStyle("Url 28", { size: 28, fontWeight: 600, lineHeight: 36, ...MONO });
+    k.textStyle("Bar 34", { size: 34, fontWeight: 800, letterSpacing: 2, lineHeight: 42, ...MONO });
+    k.textStyle("Title 136", { size: 136, fontWeight: 800, letterSpacing: -5.5, lineHeight: 140, ...MONO });
+    k.textStyle("Label 28", { size: 28, fontWeight: 700, letterSpacing: 3, lineHeight: 36, textCase: "UPPER", ...MONO });
+    k.textStyle("Power 36", { size: 36, fontWeight: 700, letterSpacing: -0.3, lineHeight: 46 });
+    k.textStyle("Bonus 28", { size: 28, fontWeight: 800, lineHeight: 46, ...MONO });
+    k.textStyle("Url 32", { size: 32, fontWeight: 600, lineHeight: 40, ...MONO });
+    k.variantSet("Power-up", "Size", ["Regular", "Large"], {
+      direction: "HORIZONTAL",
+      width: 800,
+      gap: 18,
+      props: { Label: POWER_UPS[0][0], Bonus: POWER_UPS[0][1] },
+      description: "One line of a changelog as a power-up: what you gained and the XP it was worth. Large is for the 9:16 cut."
+    }, (size, id) => {
+      const big = size === "Large";
+      const mark = k.stack(id, { width: "HUG", padding: { top: big ? 9 : 8, right: 0, bottom: 0, left: 0 }, name: "Mark" });
+      k.vector(mark, big ? 30 : 25, big ? 30 : 25, bitmapPaths(PLUS, big ? 6 : 5), "accent", { name: "Plus" });
+      k.propText(id, "Label", { style: big ? "Power 36" : "Power 32", color: "onCard", width: "FILL" });
+      k.propText(id, "Bonus", { style: big ? "Bonus 28" : "Bonus 24", color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    const W = k.node(sheet).width;
+    k.flowSheet(sheet, 0, 0, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: 7e3, fps: 30 });
+    backdrop(k, sheet, { top: "secondary", bottom: "accent" });
+    const ufo = sprite(k, sheet, UFO, 7, "accent", { name: "UFO", absolute: { x: 150, y: 0 } });
+    k.patch(ufo, { effects: [bloom(k, "accent", 26)] });
+    const pitch = 124;
+    const swarmW = (COLS - 1) * pitch + 66;
+    const swarm = k.frame(sheet, { x: (W - swarmW) / 2, y: 0, width: swarmW, height: 3 * 72 }, { name: "Swarm" });
+    for (const [r, kind] of [{ rows: INVADER, color: "accent" }, { rows: SQUID, color: "text" }, { rows: INVADER, color: "lit" }].entries()) {
+      const row = k.frame(swarm, { x: 0, y: r * 72, width: swarmW, height: 48 }, { name: "Swarm row" });
+      for (let c = 0; c < COLS; c++) sprite(k, row, kind.rows, 6, kind.color, { name: "Invader", absolute: { x: c * pitch + (66 - kind.rows[0].length * 6) / 2, y: 0 } });
+    }
+    const bunkers = k.frame(sheet, { x: 0, y: 0, width: W, height: 54 }, { name: "Bunkers" });
+    for (let i = 0; i < 4; i++) sprite(k, bunkers, BUNKER, 6, "lit", { name: "Bunker", absolute: { x: 132 + i * 240, y: 0 } });
+    const cannon = k.frame(sheet, { x: (W - 88) / 2, y: 0, width: 88, height: 48 }, { name: "Cannon" });
+    k.rect(cannon, 8, 30, "accent", { name: "Bolt", absolute: { x: 40, y: -40 }, effects: [bloom(k, "accent", 16, 0.9)] });
+    sprite(k, cannon, SHIP, 8, "text", { name: "Ship", absolute: { x: 0, y: 0 } });
+    k.rect(sheet, W, 8, "lit", { name: "Ground", absolute: { x: 0, y: 0 } });
+    const lives = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 14, name: "Lives", absolute: { x: 64, y: 0 } });
+    for (let i = 0; i < 3; i++) sprite(k, lives, SHIP, 5, "text", { name: "Life" });
+    const coins = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 10, name: "Coins", absolute: { x: W - 64 - 3 * 40 - 20, y: 0 } });
+    for (let i = 0; i < 3; i++) spriteInks(k, coins, COIN_FACE, 5, { "#": "text", o: "primary" }, { name: "Credit" });
+    const win = k.stack(sheet, { fill: "card", stroke: { color: "text", width: 6, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "accent", 16)], name: "Window" });
+    const bar = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "primary", padding: { top: 14, right: 28, bottom: 14, left: 28 }, name: "Level bar" });
+    k.text(bar, "LEVEL 2 UNLOCKED", { style: "Bar 30", color: "onPrimary", autoWidth: true, name: "Level" });
+    const stars = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 10, name: "Stars" });
+    for (let i = 0; i < 3; i++) sprite(k, stars, STAR, 5, "onPrimary", { name: "Star" });
+    const body = k.stack(win, { gap: 20, padding: { top: 22, right: 30, bottom: 30, left: 30 }, name: "Level body" });
+    k.text(body, "{{brand.release}}", { style: "Title 120", color: "onCard", name: "Title", effects: [hardShadow(k, "accent", 6)] });
+    const xp = k.stack(body, { gap: 10, name: "XP" });
+    k.text(xp, "2,000 / 2,000 XP", { style: "Label 24", color: "onCard", name: "XP figure" });
+    const track = k.stack(xp, { direction: "HORIZONTAL", width: "HUG", fill: "scan", padding: 8, name: "XP track" });
+    const fill = k.stack(track, { direction: "HORIZONTAL", width: "HUG", clip: true, name: "XP fill" });
+    segBar(k, fill, { total: 20, lit: 20, on: "lit", w: 28, h: 30, gap: 6, name: "XP blocks" });
+    k.text(body, "Power-ups in this release", { style: "Label 24", color: "onCard", name: "Power title" });
+    const list = k.stack(body, { gap: 12, name: "Power-ups" });
+    for (const [label, bonus] of POWER_UPS) k.instance(list, "Power-up/Regular", { Label: label, Bonus: bonus }, { width: "FILL", name: "Power-up" });
+    k.text(body, "{{brand.url}}", { style: "Url 28", color: "onCard", name: "Url" });
+    overlay(k, sheet);
+    placeField(k, sheet, FIELDS.post);
+    march(k, swarm, { from: 0, until: 6800, step: 400, dx: 20 });
+    march(k, cannon, { from: 200, until: 6600, step: 400, dx: 96 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 0, vertical: 0 }, {
+      portrait: (kit, id) => {
+        placeField(kit, id, FIELDS.portrait);
+        refit(kit, id);
+      },
+      vertical: (kit, id) => {
+        placeField(kit, id, FIELDS.story);
+        refit(kit, id);
+        const restyle = (name, style) => {
+          for (const n of kit.named(id, name)) kit.restyle(n, style);
+        };
+        restyle("Level", "Bar 34");
+        restyle("Title", "Title 136");
+        restyle("XP figure", "Label 28");
+        restyle("Power title", "Label 28");
+        restyle("Url", "Url 32");
+        for (const n of kit.named(id, "Power-up")) kit.patch(n, { mainComponentId: kit.componentIdOf("Power-up/Large") });
+        for (const n of [...kit.named(id, "Block lit"), ...kit.named(id, "Block")]) kit.patch(n, { width: 32, height: 36 });
+        for (const n of kit.named(id, "Level body")) kit.patch(n, { itemSpacing: 24, padding: { top: 26, right: 30, bottom: 34, left: 30 } });
+        for (const n of kit.named(id, "Power-ups")) kit.patch(n, { itemSpacing: 16 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  arcade_level_up_default
+};

package/dist/chunks/chunk-DIK36JXK.js

@@ -0,0 +1,163 @@
+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,
+  extend,
+  fitGrid,
+  grot,
+  lockup,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-VJU5LPAN.js";
+import {
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/style-swiss-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS milestone post";
+var DURATION = 7e3;
+var OUT = 5800;
+var GRID = { cols: 6, margin: 72, gutter: 24, row: 108, top: 72 };
+var MONTHS = Array.from({ length: 21 }, (_, i) => Math.round(120 + 880 * (i / 20) ** 1.7 + i * 7 % 5 * 18));
+var MAX = 1100;
+var CHART = { w: 936, h: 300 };
+var LEAVE = ["Brand row", "Kicker", "Figure", "Axis", "Fact", "Foot"];
+var cues = [
+  { layer: "Brand row", preset: "slide-in", at: 150, params: { direction: "down", duration: 400 } },
+  { layer: "Kicker", preset: "slide-in", at: 300, params: { direction: "left", duration: 400 } },
+  { layer: "Figure", preset: "slide-in", at: 400, params: { direction: "left", duration: 500 } },
+  { layer: "Axis", preset: "fade-in", at: 1e3, params: { duration: 300 } },
+  { layer: "Fact", preset: "slide-in", at: 3300, stagger: { delay: 150, order: "selection" }, params: { direction: "up", duration: 420 } },
+  { layer: "Foot", preset: "slide-in", at: 3800, params: { direction: "left", duration: 420 } },
+  { layer: LEAVE, preset: "slide-out", at: OUT, stagger: { delay: 60, order: "selection" }, params: { direction: "left", duration: 380 } }
+];
+var counts = [
+  { layer: "Figure", at: 500, duration: 2700, ease: ease.named("cubic", "in"), counter: { from: 0, to: 1e7 } }
+];
+function bars(w, h) {
+  const gap = Math.round(w / 90), bw = (w - gap * (MONTHS.length - 1)) / MONTHS.length;
+  const r = (v) => Math.round(v * 10) / 10;
+  return {
+    boxes: MONTHS.map((v, i) => ({ x: r(i * (bw + gap)), w: r(bw), h: r(v / MAX * h) })),
+    line: { closed: false, points: MONTHS.map((v, i) => ({ x: r(i * (bw + gap) + bw / 2), y: r(h - v / MAX * h) })) }
+  };
+}
+var style_swiss_milestone_default = defineTemplate({
+  id: "motion-saas-style-swiss-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in the Swiss typographic style: a giant flush-left figure counts to 10,000,000 shipments while twenty-one months rise as black bars from a baseline, the latest in red, and a line traces their tops. Two facts sit on the grid, then everything wipes off and sinks back to the bare grid, so it loops. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "logistics", "milestone", "metric", "counter", "chart", "stats", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "announcement", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    swissBrand(k, {});
+    grot(k, "Brand 32", 32, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Kicker 30", 30, { weight: 600, lead: 1.2, spacing: -0.01 });
+    grot(k, "Figure 170", 170, { weight: 700, lead: 0.9, spacing: -0.065 });
+    grot(k, "Figure 148", 148, { weight: 700, lead: 0.9, spacing: -0.065 });
+    grot(k, "Fact 44", 44, { weight: 700, lead: 1, spacing: -0.03 });
+    grot(k, "Small 22", 22, { weight: 500, lead: 1.3 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 26, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    swissGrid(k, sheet, GRID);
+    const top = k.stack(sheet, { gap: 14, name: "Top" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 32, style: "Brand 32" });
+    k.text(bar, "Milestone, October 2026", { style: "Label 24", color: "text", autoWidth: true, name: "Date" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const head = k.stack(sheet, { gap: 8, name: "Head" });
+    k.text(head, "Shipments forecast by Kontor", { style: "Kicker 30", color: "text", name: "Kicker" });
+    k.text(head, KONTOR.shipments, { style: "Figure 170", color: "text", width: CHART.w, name: "Figure" });
+    const chart = k.stack(sheet, { gap: 10, name: "Chart" });
+    const area = k.stack(chart, { height: CHART.h, name: "Chart area" });
+    const b = bars(CHART.w, CHART.h);
+    const barIds = b.boxes.map((x, i) => k.rect(area, x.w, x.h, i === b.boxes.length - 1 ? "primary" : "ink", { name: "Month bar", absolute: { x: x.x, y: CHART.h - x.h } }));
+    const trend = k.vector(area, CHART.w, CHART.h, [b.line], [], { name: "Trend", absolute: { x: 0, y: -18 }, stroke: { color: "primary", width: 3, cap: "NONE", join: "MITER" } });
+    const base = rule(k, chart, "FILL", { weight: 3, name: "Chart base" });
+    const axis = k.stack(chart, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Axis" });
+    for (const a of ["January 2025", "September 2026"]) k.text(axis, a, { style: "Small 22", color: "text", autoWidth: true, name: "Axis label" });
+    const facts = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Facts" });
+    k.component("Swiss fact", { gap: 6, description: "One fact on the grid: the figure over its label.", props: { Value: "1,240", Label: "lanes watched every hour" } }, (id) => {
+      k.propText(id, "Value", { style: "Fact 44", color: "text", name: "Fact figure" });
+      k.propText(id, "Label", { style: "Small 22", color: "text", name: "Fact label" });
+    });
+    for (const [fig, label] of [["1,240", "lanes watched every hour"], [`${KONTOR.after}%`, "shipments on time, last quarter"]]) {
+      const c = k.instance(facts, "Swiss fact", { Value: fig, Label: label }, { name: "Fact" });
+      k.patch(c, { layoutSizingHorizontal: "FILL" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Foot" });
+    k.text(foot, "Thank you, 412 shippers.", { style: "Label 24", color: "text", autoWidth: true, name: "Thanks" });
+    k.text(foot, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    extend(k, topRule, 0, 600);
+    extend(k, base, 600, 500);
+    for (const id of [topRule, base]) k.animate(id, "scaleX", [{ t: OUT + 500, v: 1, ease: ease.named("expo", "in") }, { t: OUT + 1e3, v: 0 }]);
+    barIds.forEach((id, i) => {
+      k.patch(id, { anchorY: 1 });
+      k.animate(id, "scaleY", [{ t: 900 + i * 90, v: 0, ease: ease.out("expo") }, { t: 900 + i * 90 + 500, v: 1, ease: ease.hold }, { t: OUT + 200 + i * 20, v: 1, ease: ease.named("expo", "in") }, { t: OUT + 600 + i * 20, v: 0 }]);
+    });
+    k.animate(trend, "trim.end", [{ t: 1e3, v: 0, ease: ease.linear }, { t: 3200, v: 1, ease: ease.hold }, { t: OUT + 500, v: 0 }]);
+    k.animate(trend, "opacity", [{ t: OUT + 100, v: 1, ease: ease.linear }, { t: OUT + 400, v: 0, ease: ease.hold }, { t: OUT + 600, v: 1 }]);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitGrid(kit, id, GRID);
+        redrawBars(kit, id, CHART.w, 420);
+      },
+      vertical: (kit, id) => {
+        fitGrid(kit, id, { ...GRID, margin: 140, top: 250 });
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 40 });
+        for (const n of kit.named(id, "Figure")) kit.patch(n, { width: 800 });
+        kit.restyle(kit.named(id, "Figure")[0], "Figure 148");
+        redrawBars(kit, id, 800, 540);
+        kit.rect(id, 1080, 400, "primary", { name: "Field", absolute: { x: 0, y: 1520 } });
+      }
+    }));
+    return k.finish();
+  }
+});
+function redrawBars(k, root, w, h) {
+  const b = bars(w, h);
+  for (const a of k.named(root, "Chart area")) k.patch(a, { height: h });
+  k.named(root, "Month bar").forEach((id, i) => {
+    const x = b.boxes[i];
+    k.patch(id, { x: x.x, y: h - x.h, width: x.w, height: x.h });
+  });
+  for (const id of k.named(root, "Trend")) k.patch(id, { width: w, height: h, paths: [b.line] });
+}
+
+export {
+  style_swiss_milestone_default
+};

package/dist/chunks/chunk-DJCGCSDT.js

@@ -0,0 +1,114 @@
+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 {
+  barHead,
+  broadsheetBrand,
+  classified,
+  columnRule,
+  flash,
+  grain,
+  masthead,
+  pencilRing,
+  rule
+} from "./chunk-KVV4JTFI.js";
+import {
+  background,
+  refill
+} from "./chunk-75T3CFTH.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/broadsheet-hiring-classifieds.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NOTICES = [
+  { head: "Designer, part-time", body: "Two days a week. You will redraw the changelog page and the emails. Type matters more to us than motion." },
+  { head: "Support lead", body: "First support hire. You answer customers, then tell engineering what to fix. US mornings.", reversed: true },
+  { head: "Our promise", body: "Every application gets a reply from a person within five working days. Salaries are in the advert, not at the end." }
+];
+var broadsheet_hiring_classifieds_default = defineTemplate({
+  id: "social-broadsheet-hiring-classifieds",
+  meta: {
+    name: "Broadsheet hiring classifieds post",
+    description: 'A hiring post set as a newspaper\u2019s classified advertisements: a nameplate and a "situations vacant" bar, the main role as a display advertisement with the work, the place, the pay and the interview spelled out, ringed in red pencil, and a column of small notices for the other roles. Black ink and one spot red on newsprint. Square, with a 4:5 cut',
+    category: "social",
+    tags: ["broadsheet", "newspaper", "classifieds", "help wanted", "hiring", "jobs", "careers", "newsprint", "serif", "editorial", "saas", "startup", "post"],
+    platforms: ["linkedin", "x", "instagram", "threads"],
+    formats: ["post", "portrait-post"],
+    useCases: ["hiring", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Broadsheet hiring classifieds post", preset("ig-post"));
+    k.quantizeGeometry = true;
+    broadsheetBrand(k, { role: "Founding engineer" });
+    k.textStyle("Plate 58", { ...SERIF, size: 58, fontWeight: 900, letterSpacing: -1.5, lineHeight: 62 });
+    k.textStyle("Dateline 15", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Bar 20", { size: 20, fontWeight: 900, letterSpacing: 3, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Flash 22", { size: 22, fontWeight: 900, letterSpacing: 3, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Role 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -2.6, lineHeight: 86 });
+    k.textStyle("Body 27", { ...SERIF, size: 27, fontWeight: 500, lineHeight: 37 });
+    k.textStyle("Body 32", { ...SERIF, size: 32, fontWeight: 500, lineHeight: 44 });
+    k.textStyle("Ad 23", { ...SERIF, size: 23, fontWeight: 500, lineHeight: 31 });
+    k.textStyle("Terms 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 30 });
+    k.textStyle("Apply 24", { ...MONO, size: 24, fontWeight: 800, lineHeight: 30 });
+    k.textStyle("Ad head 19", { size: 19, fontWeight: 900, letterSpacing: 1.4, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Ad 20", { ...SERIF, size: 20, fontWeight: 500, lineHeight: 27 });
+    pill(k, "Apply", { fill: "primary", ink: "onPrimary", style: "Apply 24", label: "Apply: jobs@copydesk.example", pad: [10, 16], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 18, { top: 44, right: 56, bottom: 48, left: 56 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    background(k, sheet, "paper", { effects: grain(0.09, 2) });
+    masthead(k, sheet, { plate: "Plate 58", dateline: "Dateline 15", edition: "Page B6 \xB7 Classified" });
+    barHead(k, sheet, "Classified advertisements \xB7 Situations vacant", "Bar 20", { pad: [8, 14] });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, height: "FILL", name: "Notices" });
+    const display = k.stack(row, { gap: 16, height: "FILL", justify: "SPACE_BETWEEN", padding: 26, fill: "card", stroke: { color: "text", width: 4, join: "MITER" }, name: "Display ad" });
+    const top = k.stack(display, { gap: 14, name: "Display top" });
+    flash(k, top, "Help wanted", { style: "Flash 22", star: 18, pad: [6, 14] });
+    k.text(top, "{{brand.role}}", { style: "Role 92", color: "onCard", name: "Role" });
+    rule(k, top, 2, "onCard");
+    k.text(top, "{{brand.name}} is four people and profitable. You will own the diff reader: TypeScript, Postgres and a good deal of tree-sitter. We pair for an afternoon instead of setting a take-home test, and we pay you for the afternoon.\nYour first month: changelogs per package for monorepos, shipped to the 10,000 teams who read us.", { style: "Body 27", color: "onCard", name: "Display text" });
+    const foot = k.stack(display, { gap: 8, name: "Display foot" });
+    const terms = k.stack(foot, { padding: { top: 30, right: 0, bottom: 20, left: 64 }, name: "Terms box" });
+    k.text(terms, "Remote, within 3 hours of Lisbon\n\u20AC95\u2013120k \xB7 1.0% equity \xB7 4-day week", { style: "Terms 20", color: "onCard", name: "Terms" });
+    const ring = pencilRing(k, terms, 600, 112, { absolute: { x: 0, y: 0 }, weight: 5 });
+    k.patch(ring, { rotation: -1.5 });
+    k.instance(foot, "Apply", { Label: "Apply: jobs@copydesk.example" }, { name: "Apply" });
+    columnRule(k, row, 1.5);
+    const side = k.stack(row, { width: 300, gap: 14, height: "FILL", name: "Small ads" });
+    for (const n of NOTICES) classified(k, side, { head: n.head, body: n.body, headStyle: "Ad head 19", bodyStyle: "Ad 20", reversed: "reversed" in n });
+    k.text(side, "More notices, page B7", { style: "Dateline 15", color: "onPaper", name: "Continued" });
+    k.variants(sheet, [{ preset: "ig-portrait", adjust: (kit, id) => {
+      const p = kit.node(id).padding;
+      kit.patch(id, { padding: { ...p, top: 56, bottom: 60 } });
+      refill(kit, id);
+      for (const n of kit.named(id, "Display text")) kit.restyle(n, "Body 32");
+      for (const n of kit.named(id, "Classified text")) kit.restyle(n, "Ad 23");
+    } }]);
+    return k.finish();
+  }
+});
+
+export {
+  broadsheet_hiring_classifieds_default
+};

package/dist/chunks/chunk-DLPUJ23I.js

@@ -0,0 +1,155 @@
+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 {
+  JUNE,
+  airBrand,
+  airPaper,
+  airType,
+  envelope,
+  fitAirPaper,
+  markList,
+  pen,
+  placeMarks,
+  teaRing
+} from "./chunk-5OW3RDVA.js";
+import {
+  mover,
+  pruneStyles
+} from "./chunk-5XCBGNIO.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/tour-tickets-june-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var T = JUNE;
+var { beat, duration: DURATION, audio: music } = bed(T.track, 26);
+var plain = T.dates.filter((d) => d.status !== "new").length;
+var cues = [
+  { layer: "Headline", preset: "blur-in", at: beat(0), params: { duration: 560, amount: 18 } },
+  { layer: "Tour line", preset: "rise-in", at: beat(1), params: { duration: 400, distance: 20 } },
+  { layer: "Envelope", preset: "rise-in", at: beat(1), params: { duration: 700, distance: 300 } },
+  { layer: "Mark", preset: "drop-in", at: beat(2), params: { duration: 220, distance: 18 }, stagger: { delay: beat(1) } },
+  { layer: "Sold stamp", preset: "drop-in", at: beat(2 + plain + 0.5), params: { duration: 160, distance: 16 }, stagger: { delay: beat(0.5) } },
+  { layer: "New mark", preset: "drop-in", at: beat(15), params: { duration: 220, distance: 18 }, stagger: { delay: beat(1) } },
+  { layer: "Postage", preset: "drop-in", at: beat(15.5), params: { duration: 260, distance: 30 }, stagger: { delay: beat(1) } },
+  { layer: "Code", preset: "pulse", at: beat(19), params: { duration: 625, amount: 0.07 } },
+  { layer: "Code", preset: "pulse", at: beat(23), params: { duration: 625, amount: 0.07 } }
+];
+var swaps = [captionSwap(["I'm playing ten small rooms.", "Four nights went overnight, sorry.", "Second nights: Dublin and London.", "Letters presale: Wednesday, 9am GMT."], 0, DURATION, { stagger: 60, in: 300, out: 240, rise: 22 })];
+var NAME = `Tour tickets announcement reel: ${T.act}`;
+function lay(k, id, w, h) {
+  const { at, scaled } = mover(k, id);
+  let b;
+  if (h === 1920) {
+    at("Headline", 140, 250, { width: 800 });
+    at("Tour line", 140, 428, { width: 800 });
+    b = { x: 136, y: 500, scale: 0.8, cols: 4, dx: 254, dy: 300 };
+    at("Caption strip", 140, 1198, { width: 800 });
+    scaled("Envelope", 246, 1250, 0.9);
+    at("Pen", 120, 1730);
+    at("Tea ring", 740, 1560);
+  } else if (w === h) {
+    at("Headline", 70, 62, { width: 940 });
+    at("Tour line", 70, 140, { width: 940 });
+    b = { x: 70, y: 210, scale: 0.86, cols: 4, dx: 276, dy: 196 };
+    at("Caption strip", 70, 770, { width: 600 });
+    scaled("Envelope", 690, 760, 0.52);
+    at("Pen", 80, 920);
+    at("Tea ring", -60, 800);
+  } else if (h > w) {
+    at("Headline", 70, 70, { width: 940 });
+    at("Tour line", 70, 252, { width: 940 });
+    b = { x: 86, y: 320, scale: 1.08, cols: 3, dx: 296, dy: 196 };
+    at("Caption strip", 70, 1150, { width: 560 });
+    scaled("Envelope", 660, 1110, 0.54);
+    at("Pen", 90, 1270);
+    at("Tea ring", -60, 1e3);
+  } else {
+    at("Headline", 110, 90, { width: 640 });
+    at("Tour line", 110, 300, { width: 640 });
+    b = { x: 812, y: 90, scale: 1, cols: 4, dx: 262, dy: 196 };
+    at("Caption strip", 830, 900, { width: 1e3 });
+    scaled("Envelope", 120, 470, 0.9);
+    at("Pen", 1300, 1e3);
+    at("Tea ring", 1720, 860);
+  }
+  placeMarks(k, id, T.dates, b);
+}
+var tour_tickets_june_reel_default = defineTemplate({
+  id: "motion-tour-tickets-june-reel",
+  meta: {
+    name: NAME,
+    description: "A 16-second vertical tour announcement for a singer-songwriter's small-rooms tour, drawn as airmail: a line of a letter in her hand, the presale code in an envelope, then the ten nights land as postmarks one a beat, four get a red SOLD OUT rubber stamp and two added nights a mustard postage stamp. Fingerpicked guitar, burned-in captions, 9:16 with 1:1, 4:5 and 16:9",
+    category: "animation",
+    tags: ["animation", "tour", "tickets", "concert", "singer-songwriter", "acoustic", "theatre", "tour dates", "sold out", "presale", "announcement", "airmail", "postmark", "letter", "audio", "music", "captions", "reel"],
+    platforms: ["instagram", "tiktok", "youtube", "facebook"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["announcement", "event", "presale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    airBrand(k);
+    airType(k);
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
+    const desk = k.frame(sheet, { x: 0, y: 0, width: 1080, height: 1920 }, { name: "Desk" });
+    k.patch(desk, { layoutPositioning: "ABSOLUTE" });
+    airPaper(k, desk, 1080, 1920);
+    teaRing(k, desk, 260, { x: 0, y: 0 });
+    pen(k, desk, 520, { x: 0, y: 0, rotation: -14 });
+    k.text(desk, "I'm coming to the small rooms.", { style: "Letter 88", color: "text", width: 800, name: "Headline", absolute: { x: 0, y: 0 } });
+    k.text(desk, `{{brand.name}} \xB7 ${T.tour.toUpperCase()} TOUR \xB7 APRIL ${T.year}`, { style: "Label 22", color: "onPaper", width: 800, name: "Tour line", absolute: { x: 0, y: 0 } });
+    markList(k, desk, T.dates, { x: 0, y: 0, scale: 1, cols: 3, dx: 268, dy: 182 });
+    captionStrip(k, desk, swaps[0].words[0], { style: "Caption 34", fill: "card", ink: "onCard", width: 800, radius: 4, pad: [10, 20] });
+    for (const n of k.named(desk, "Caption strip")) k.patch(n, { layoutPositioning: "ABSOLUTE" });
+    envelope(k, desk, T);
+    lay(k, desk, 1080, 1920);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const size = (kit, id, w, h, head) => {
+      if (head) for (const t of kit.named(id, "Headline")) kit.restyle(t, head);
+      for (const d of kit.named(id, "Desk")) {
+        kit.patch(d, { x: 0, y: 0, width: w, height: h });
+        fitAirPaper(kit, d, w, h);
+        lay(kit, d, w, h);
+      }
+    };
+    k.variants(sheet, [
+      { preset: "ig-post", adjust: (kit, id) => size(kit, id, 1080, 1080, "Letter 64") },
+      { preset: "ig-portrait", adjust: (kit, id) => size(kit, id, 1080, 1350, "Letter 88") },
+      { preset: "video-1080p", adjust: (kit, id) => size(kit, id, 1920, 1080, "Letter 88") }
+    ]);
+    pruneStyles(k);
+    return k.finish();
+  }
+});
+
+export {
+  tour_tickets_june_reel_default
+};