@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-5Q6EZTW5.js

@@ -0,0 +1,231 @@
+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,
+  drawLine,
+  extend,
+  fitGrid,
+  glideIn,
+  grot,
+  kontorWindow,
+  laneTable,
+  lockup,
+  routeMap,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-PHF53TIC.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  cutOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  hide,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/style-swiss-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 4, 8);
+var { beat } = S;
+var NAME = "Swiss SaaS launch reel";
+var WIN = { w: 800, h: 560 };
+var GRID = { cols: 6, margin: 140, gutter: 24, row: 120, top: 250 };
+var WATCH = beat(1) + 100;
+var FLAG = beat(8);
+var REROUTE = beat(12);
+var DROP = beat(16);
+var CALL = beat(24);
+var FIELD_Y = 1468;
+var SHOTS = [
+  { t: FLAG + beat(1), duration: 420, zoom: 1.4, x: 230, y: 310 },
+  { t: DROP, duration: 420, zoom: 1 }
+];
+var cues = [
+  cutOn("Top row", 120),
+  { layer: "Hook side", preset: "slide-in", at: 200, params: { direction: "down", duration: 420 } },
+  { layer: "Step cell", preset: "slide-in", at: beat(1) + 120, stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 380 } },
+  { layer: "Kpi", preset: "slide-in", at: WATCH + 250, stagger: { delay: 80, order: "selection" }, params: { direction: "up", duration: 380 } },
+  { layer: ["Lane head", "Late row", "Lane row"], preset: "slide-in", at: beat(4), stagger: { delay: 110, order: "selection" }, params: { direction: "left", duration: 380 } },
+  cutOn("Station", beat(3), 120),
+  { layer: "Flag", preset: "wipe-in", at: FLAG + beat(1) + 200, params: { direction: "right", duration: 360 } },
+  { layer: "Late forecast", preset: "flash", at: FLAG, params: { duration: 500, ease: ease.hold } },
+  { layer: "Call row", preset: "slide-in", at: CALL, params: { direction: "left", duration: 450 } }
+];
+var counts = [
+  { layer: "On time figure", at: DROP, duration: beat(4), counter: { from: KONTOR.before, to: KONTOR.after, decimals: 1, suffix: "%" } }
+];
+var swaps = [captionSwap(["Late shipments cost you customers.", "Kontor sees them coming early.", "Forty-eight hours before the delay.", "Reroute, and arrive on time."], 0, S.duration - 30, { stagger: 50, in: 220, out: 160, rise: 0 })];
+var style_swiss_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-swiss-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 16-second launch video in the Swiss typographic style: a giant 48h slides into the first column, then a freight analytics window works on a visible grid. A route diagram draws itself, the late stretch turns red, the camera cuts in to the flag, a rail reroute draws in dashes and the on-time rate counts to 96.1 percent on the drop. One signal red, rules that extend, blocks that slide on the grid, music and burned-in captions. 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "analytics", "logistics", "launch", "reel", "counter", "diagram", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    swissBrand(k, {});
+    grot(k, "Brand 30", 30, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 22", 22, { weight: 500, lead: 1.3 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Giant 330", 310, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Giant 230", 230, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Side 30", 30, { weight: 500, lead: 1.2, spacing: -0.01 });
+    grot(k, "Ui 21", 21, { weight: 500, lead: 1.25 });
+    grot(k, "Ui head 18", 18, { weight: 600, lead: 1.25 });
+    grot(k, "Figure 46", 46, { weight: 700, lead: 1, spacing: -0.04 });
+    grot(k, "Flag 18", 18, { weight: 700, lead: 1.2 });
+    grot(k, "Caption 34", 34, { weight: 600, lead: 1.3, spacing: -0.01 });
+    grot(k, "Button 30", 30, { weight: 700, lead: 1.2 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "Start free for 14 days", pad: [20, 28], radius: 0 });
+    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 18, justify: "MIN" });
+    swissGrid(k, sheet, GRID);
+    k.rect(sheet, 1080, 1920 - FIELD_Y, "primary", { name: "Field", absolute: { x: 0, y: FIELD_Y } });
+    const big = routeMap(k, sheet, { w: 800, h: 420, pad: 30, weight: 14, ink: "onPrimary", late: "text", ground: "primary", labels: false, name: "Field route", absolute: { x: 140, y: FIELD_Y + 30 } });
+    const top = k.stack(sheet, { gap: 14, name: "Top row" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 30, style: "Brand 30" });
+    k.text(bar, `${KONTOR.version}  ${KONTOR.feature}`, { style: "Label 22", color: "text", autoWidth: true, name: "Version" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const hook = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Hook" });
+    const giant = k.text(hook, "48h", { style: "Giant 330", color: "text", autoWidth: true, name: "Giant" });
+    const side = k.stack(hook, { gap: 12, width: 186, padding: { top: 0, right: 0, bottom: 26, left: 0 }, name: "Hook side" });
+    const tag = k.stack(side, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Hook tag" });
+    k.text(tag, KONTOR.feature, { style: "Label 24", color: "onPrimary", autoWidth: true, name: "Hook kicker" });
+    k.text(side, "before a shipment is late, Kontor tells you.", { style: "Side 30", color: "text", name: "Hook line" });
+    const steps = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, height: 52, name: "Steps" });
+    for (const [no, label] of [["01", "Watch"], ["02", "Flag"], ["03", "Reroute"]]) {
+      const c = k.stack(steps, { gap: 10, width: "FILL", name: "Step cell" });
+      rule(k, c, "FILL", { weight: 2, name: "Step rule" });
+      const r = k.stack(c, { direction: "HORIZONTAL", gap: 14, name: "Step words" });
+      k.text(r, no, { style: "Label 22", color: "onPaper", autoWidth: true, name: "Step no" });
+      k.text(r, label, { style: "Label 22", color: "text", autoWidth: true, name: "Step label" });
+    }
+    const cellW = Math.round((800 - 48) / 3);
+    const marker = k.rect(steps, cellW, 6, "primary", { name: "Step marker", absolute: { x: 0, y: -2 } });
+    const stage = k.stack(sheet, { width: WIN.w, height: WIN.h, clip: true, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Camera" });
+    const w = kontorWindow(k, cam, { w: WIN.w, h: WIN.h, title: "Lanes, week 40", right: "Forecast 48 h", style: "Ui head 18", absolute: { x: 0, y: 0 }, pad: 26, gap: 18 });
+    const kpis = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Kpis" });
+    for (const [label, value, name] of [["On time, 30 days", `${KONTOR.after}%`, "On time figure"], ["Lanes", "1,240", "Lanes figure"], ["Flagged today", "3", "Flagged figure"]]) {
+      const c = k.stack(kpis, { gap: 6, width: name === "On time figure" ? 260 : "FILL", name: "Kpi" });
+      k.text(c, label, { style: "Ui head 18", color: "cardMuted", name: "Kpi label" });
+      k.text(c, value, { style: "Figure 46", color: name === "On time figure" ? "onCard" : "onCard", width: name === "On time figure" ? 240 : "FILL", name });
+    }
+    k.rect(w.body, "FILL", 2, "onCard", { name: "Kpi rule" });
+    const split = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Split" });
+    const mapBox = k.stack(split, { width: 320, height: 330, name: "Map box" });
+    const map = routeMap(k, mapBox, { w: 320, h: 330, pad: 26, weight: 8, labels: "Ui head 18", name: "Route", absolute: { x: 0, y: 0 } });
+    const flag = k.stack(mapBox, { direction: "HORIZONTAL", width: "HUG", fill: "late", padding: { top: 6, right: 10, bottom: 6, left: 10 }, name: "Flag", absolute: { x: 0, y: 236 } });
+    const flagWords = k.text(flag, `${KONTOR.shipment}  +${KONTOR.slip} h`, { style: "Flag 18", color: "onPrimary", autoWidth: true, name: "Flag words" });
+    laneTable(k, split, { style: "Ui 21", head: "Ui head 18", cols: [150, 104], rowH: 52, show: ["lane", "onTime", "forecast"] });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "text", ink: "paper", radius: 0, pad: [18, 24] });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: "Start free for 14 days" }, { name: "Call" });
+    k.text(call, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    glideIn(k, w.win, 120, { dy: WIN.h, duration: 520 });
+    choreograph(k, sheet, { giant, topRule, marker, cellW, map, big, flagWords });
+    camera(k, cam, WIN.w, WIN.h, SHOTS);
+    k.variants(sheet, [...reelCuts({ post: 48, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 48, right: 140, bottom: 48, left: 140 } });
+        fitGrid(kit, id, { ...GRID, top: 48 });
+        hide(kit, id, ["Field", "Field route", "Steps", "Hook side"]);
+        restyle(kit, id, "Giant", "Giant 230");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 60, right: 140, bottom: 60, left: 140 } });
+        fitGrid(kit, id, { ...GRID, top: 60 });
+        hide(kit, id, ["Field", "Field route"]);
+        restyle(kit, id, "Giant", "Giant 230");
+      }
+    }), wideCut(640, (kit, id, right) => {
+      fitGrid(kit, id, { cols: 12, margin: 110, gutter: 24, row: 120, top: 80 });
+      hide(kit, id, ["Field", "Field route"]);
+      kit.patch(id, { primaryAxisAlignItems: "CENTER" });
+      for (const n of kit.named(id, "Hook")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+      for (const n of kit.named(id, "Hook side")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 520 });
+      const scale = Math.min(right.width / WIN.w, (right.height - 76) / WIN.h);
+      const x = right.x + Math.round((right.width - WIN.w * scale) / 2);
+      float(kit, id, "Steps", x, right.y, { width: Math.round(WIN.w * scale) });
+      float(kit, id, "Stage", x, right.y + 76, { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+function choreograph(k, sheet, o) {
+  k.animate(o.giant, "translateX", [{ t: 0, v: -520, ease: ease.out("expo") }, { t: 520, v: 0, ease: ease.hold }, { t: DROP - 1, v: 0, ease: ease.out("expo") }, { t: DROP, v: -520, ease: ease.out("expo") }, { t: DROP + 520, v: 0 }]);
+  k.animate(o.giant, "text.content", [{ t: 0, v: "48h", ease: ease.hold }, { t: DROP, v: "96%" }]);
+  for (const id of k.named(sheet, "Hook kicker")) k.animate(id, "text.content", [{ t: 0, v: KONTOR.feature, ease: ease.hold }, { t: DROP, v: "Quarter 3" }]);
+  for (const id of k.named(sheet, "Hook line")) k.animate(id, "text.content", [{ t: 0, v: "before a shipment is late, Kontor tells you.", ease: ease.hold }, { t: DROP, v: "on time, up from 87 a quarter ago." }]);
+  k.animate(o.giant, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 30, v: 1 }]);
+  extend(k, o.topRule, 80, 600);
+  const step = (i) => i * (o.cellW + 24);
+  k.animate(o.marker, "translateX", [
+    { t: FLAG, v: step(0), ease: ease.out("expo") },
+    { t: FLAG + 380, v: step(1), ease: ease.hold },
+    { t: REROUTE, v: step(1), ease: ease.out("expo") },
+    { t: REROUTE + 380, v: step(2) }
+  ]);
+  extend(k, o.marker, WATCH, 380);
+  const line = (root, name) => k.named(root, name)[0];
+  drawLine(k, line(o.map, "Road"), WATCH + 200, beat(3));
+  drawLine(k, line(o.map, "Late stretch"), FLAG, 500);
+  drawLine(k, line(o.map, "Rail"), REROUTE, beat(2));
+  k.animate(line(o.map, "Stops"), "opacity", [{ t: WATCH + 200, v: 0, ease: ease.linear }, { t: WATCH + 500, v: 1 }]);
+  for (const id of k.named(sheet, "Late forecast")) k.animate(id, "text.content", [{ t: 0, v: `+${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: "rail, on time" }]);
+  k.animate(o.flagWords, "text.content", [{ t: 0, v: `${KONTOR.shipment}  +${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: `${KONTOR.shipment}  by rail` }]);
+  drawLine(k, line(o.big, "Road"), 0, beat(6));
+  drawLine(k, line(o.big, "Late stretch"), FLAG, 600);
+  drawLine(k, line(o.big, "Rail"), REROUTE, beat(3));
+  k.animate(line(o.big, "Stops"), "opacity", [{ t: 200, v: 0, ease: ease.linear }, { t: 600, v: 1 }]);
+}
+
+export {
+  style_swiss_launch_reel_default
+};

package/dist/chunks/chunk-5R5RCFPZ.js

@@ -0,0 +1,97 @@
+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 {
+  feedVariants,
+  logoBadge,
+  outro,
+  pill,
+  verticalPadding
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/promo-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CONTENT = ["Logo badge", "Kicker", "Headline", "Body", "Hours row", "Book button", "Handle"];
+var cues = [
+  { layer: "Logo badge", preset: "pop-in", at: 100 },
+  { layer: "Kicker", preset: "slide-in", at: 300, params: { direction: "left", distance: 120 } },
+  { layer: "Headline", preset: "blur-in", at: 500, params: { duration: 800 } },
+  { layer: "Body", preset: "rise-in", at: 1e3 },
+  { layer: "Hours row", preset: "rise-in", at: 1300, stagger: { delay: 160 } },
+  { layer: ["Book button", "Handle"], preset: "rise-in", at: 1800, stagger: { delay: 150 } },
+  { layer: "Book button", preset: "pulse", at: 4600 },
+  { layer: "Book button", preset: "pulse", at: 7e3 },
+  outro(CONTENT, 8800)
+];
+var promo_announcement_default = defineTemplate({
+  id: "motion-promo-announcement",
+  meta: {
+    name: "Announcement promo",
+    description: "A 10-second vertical announcement reel: logo, kicker and a headline that comes into focus, then the details row by row and a pulsing booking button \u2014 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "announcement", "news", "reel", "tiktok", "shorts", "hours", "local business"],
+    platforms: ["instagram", "tiktok", "youtube", "facebook"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Announcement promo", preset("ig-story"));
+    k.brand(
+      { paper: "#F4F8F7", text: "#0F2A2A", onPaper: "#4A6360", primary: "#0E7C66", onPrimary: "#FFFFFF", accent: "#FFD37A", onAccent: "#0F2A2A", card: "#FFFFFF", onCard: "#0F2A2A" },
+      { headline: "Now open on Saturdays", body: "Walk-ins and appointments from October 4 \u2014 same doctors, same front desk.", handle: "maplestreetclinic.com" }
+    );
+    k.textStyle("Headline 112", { size: 112, fontWeight: 800, letterSpacing: -3, lineHeight: 112, textAlign: "CENTER" });
+    k.textStyle("Headline 84", { size: 84, fontWeight: 800, letterSpacing: -2, lineHeight: 88, textAlign: "CENTER" });
+    k.textStyle("Body 40", { size: 40, fontWeight: 500, lineHeight: 52, textAlign: "CENTER" });
+    k.textStyle("Kicker 30", { size: 30, fontWeight: 800, letterSpacing: 3, lineHeight: 36 });
+    k.textStyle("Row 36", { size: 36, fontWeight: 600, lineHeight: 44 });
+    k.textStyle("Button 40", { size: 40, fontWeight: 700, lineHeight: 48 });
+    k.textStyle("Handle 32", { size: 32, fontWeight: 600, lineHeight: 40, textAlign: "CENTER" });
+    pill(k, "Kicker tag", { fill: "accent", ink: "onAccent", style: "Kicker 30", label: "ANNOUNCEMENT" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 40", label: "Book a visit", pad: [24, 56] });
+    k.component("Hours row", { direction: "HORIZONTAL", width: 800, fill: "card", radius: 24, gap: 24, align: "CENTER", padding: { top: 22, right: 32, bottom: 22, left: 32 }, props: { Day: "Monday \u2013 Friday", Time: "8 am \u2013 6 pm" } }, (id) => {
+      k.propText(id, "Day", { style: "Row 36", color: "onCard", width: "FILL" });
+      k.propText(id, "Time", { style: "Row 36", color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, verticalPadding(), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 1e4, fps: 30 });
+    logoBadge(k, sheet, { fill: "primary", size: 72 });
+    k.instance(sheet, "Kicker tag", { Label: "ANNOUNCEMENT" }, { name: "Kicker" });
+    k.text(sheet, "{{brand.headline}}", { style: "Headline 112", color: "text", name: "Headline" });
+    k.text(sheet, "{{brand.body}}", { style: "Body 40", color: "onPaper", name: "Body" });
+    const hours = k.stack(sheet, { gap: 12, align: "CENTER", name: "Hours" });
+    for (const [day, time] of [["Monday \u2013 Friday", "8 am \u2013 6 pm"], ["Saturday", "9 am \u2013 1 pm"]]) k.instance(hours, "Hours row", { Day: day, Time: time }, { width: "FILL", name: "Hours row" });
+    k.instance(sheet, "Button", { Label: "Book a visit" }, { name: "Book button" });
+    k.text(sheet, "{{brand.handle}}", { style: "Handle 32", color: "onPaper", name: "Handle" });
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 64, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 20, counterAxisSpacing: 20 });
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Headline 84");
+      },
+      portrait: (kit, id) => kit.patch(id, { itemSpacing: 28, counterAxisSpacing: 28 })
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  promo_announcement_default
+};

package/dist/chunks/chunk-5RHX7374.js

@@ -0,0 +1,186 @@
+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 {
+  applyAutoLayout
+} from "./chunk-KASBBLQC.js";
+import {
+  rewriteIds
+} from "./chunk-HZ3C272Q.js";
+import {
+  addNode,
+  applyConstraints,
+  init_scene_graph
+} from "./chunk-IM6WH7GK.js";
+import {
+  init_page_presets,
+  presetById,
+  presetPx
+} from "./chunk-PQID5H2U.js";
+import {
+  init_properties,
+  propertyFor
+} from "./chunk-NIEUIAKQ.js";
+import {
+  init_dist_node,
+  v4_default
+} from "./chunk-M2H3GLK2.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// lib/templates/resize.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+
+// lib/document/clone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_dist_node();
+function cloneSubtree(doc, rootId) {
+  const ids = [];
+  const collect = (id) => {
+    const n = doc.nodes[id];
+    if (!n) return;
+    ids.push(id);
+    n.childIds.forEach(collect);
+  };
+  collect(rootId);
+  const map = new Map(ids.map((id) => [id, v4_default()]));
+  const nodes = ids.map((id) => rewriteIds(JSON.parse(JSON.stringify(doc.nodes[id])), map));
+  return { root: nodes[0], nodes };
+}
+
+// lib/templates/resize.ts
+init_page_presets();
+init_properties();
+var resizeTargetFromPreset = (presetId) => {
+  const p = presetById(presetId);
+  if (!p) return null;
+  const px = presetPx(p);
+  return { width: px.width, height: px.height, presetId };
+};
+var covers = (n, w, h) => n.x <= 0.5 && n.y <= 0.5 && n.width >= w - 1 && n.height >= h - 1;
+var hasConstraints = (n) => !!n.constraints && (n.constraints.horizontal !== "MIN" || n.constraints.vertical !== "MIN");
+function scaleTree(nodes, id, s, isRoot) {
+  const n = nodes[id];
+  if (!n) return;
+  if (!isRoot) {
+    const t = n;
+    const patch = { x: n.x * s, y: n.y * s, width: n.width * s, height: n.height * s };
+    if (typeof t.fontSize === "number") patch.fontSize = Math.max(12, t.fontSize * s);
+    if (typeof t.cornerRadius === "number") patch.cornerRadius = t.cornerRadius * s;
+    nodes[id] = { ...n, ...patch };
+  }
+  for (const c of n.childIds) scaleTree(nodes, c, s, false);
+}
+function treeOrder(nodes, rootId) {
+  const out = [];
+  const walk = (id) => {
+    const n = nodes[id];
+    if (!n) return;
+    out.push(id);
+    for (const c of n.childIds) walk(c);
+  };
+  walk(rootId);
+  return out;
+}
+function boxIn(nodes, id, rootId) {
+  const n = nodes[id];
+  let x = 0, y = 0;
+  for (let cur = n; cur && cur.id !== rootId; cur = cur.parentId ? nodes[cur.parentId] : void 0) {
+    x += cur.x;
+    y += cur.y;
+  }
+  return { x, y, width: n.width, height: n.height };
+}
+function moveAcross(v, from, to, content) {
+  const lead = from.pos + from.len + v;
+  if (lead <= 0) return -(to.pos + to.len) + lead * (to.frame / from.frame);
+  const trail = from.pos + v - from.frame;
+  if (trail >= 0) return to.frame - to.pos + trail * (to.frame / from.frame);
+  return v * content;
+}
+var scaleModifier = (m, s) => m.kind === "sine" || m.kind === "noise" || m.kind === "bounce" ? { ...m, amp: m.amp * s } : m.kind === "spin" ? { ...m, rate: m.rate * s } : m.kind === "mod" ? { ...m, period: m.period * s, ...m.offset !== void 0 ? { offset: m.offset * s } : {} } : m.kind === "clamp" ? { ...m, ...m.min !== void 0 ? { min: m.min * s } : {}, ...m.max !== void 0 ? { max: m.max * s } : {} } : m.kind === "audio" && m.mode !== "multiply" ? { ...m, from: m.from * s, to: m.to * s } : m;
+function remapMotion(motion, value, s) {
+  const tracks = {};
+  for (const key in motion.tracks) {
+    const path = key;
+    const track = motion.tracks[path];
+    const prop = propertyFor(path);
+    if (prop?.valueType !== "number" || prop.control.unit !== "px") {
+      tracks[path] = track;
+      continue;
+    }
+    tracks[path] = {
+      ...track,
+      keys: track.keys.map((k) => typeof k.v === "number" ? { ...k, v: value(path, k.v) } : k),
+      ...track.modifiers ? { modifiers: track.modifiers.map((m) => scaleModifier(m, s(path))) } : {}
+    };
+  }
+  return { ...motion, tracks };
+}
+function resizeMotion(before, srcRootId, after, copyRootId, content, offset = { dx: 0, dy: 0 }) {
+  const srcIds = treeOrder(before.nodes, srcRootId), copyIds = treeOrder(after.nodes, copyRootId);
+  const src = before.nodes[srcRootId], copy = after.nodes[copyRootId];
+  let nodes = null;
+  srcIds.forEach((sid, i) => {
+    const cid = copyIds[i];
+    const node = after.nodes[cid];
+    if (!node?.motion) return;
+    const a = boxIn(before.nodes, sid, srcRootId), b = boxIn(after.nodes, cid, copyRootId);
+    const topLevel = node.parentId === copyRootId;
+    const motion = remapMotion(node.motion, (path, v) => {
+      if (path === "translateX") return moveAcross(v, { pos: a.x, len: a.width, frame: src.width }, { pos: b.x, len: b.width, frame: copy.width }, content);
+      if (path === "translateY") return moveAcross(v, { pos: a.y, len: a.height, frame: src.height }, { pos: b.y, len: b.height, frame: copy.height }, content);
+      if (path === "x") return v * content + (topLevel ? offset.dx : 0);
+      if (path === "y") return v * content + (topLevel ? offset.dy : 0);
+      return v * content;
+    }, (path) => path === "translateX" ? copy.width / src.width : path === "translateY" ? copy.height / src.height : content);
+    (nodes ??= { ...after.nodes })[cid] = { ...node, motion };
+  });
+  return nodes ? { ...after, nodes } : after;
+}
+function magicResize(doc, rootId, target, name, o = {}) {
+  const src = doc.nodes[rootId];
+  if (!src || !src.parentId) return { document: doc, id: null, content: 1, offset: { dx: 0, dy: 0 } };
+  const motion = o.motion ?? true;
+  const { root, nodes } = cloneSubtree(doc, rootId);
+  const gap = Math.round(src.width * 0.15);
+  let document = addNode(doc, { ...root, x: src.x + src.width + gap, y: src.y, name: name ?? (target.presetId ? presetById(target.presetId)?.name ?? src.name : src.name), childIds: [], parentId: src.parentId, ...src.print ? { print: { ...src.print, pageSize: { width: target.width, height: target.height } } } : {} }, src.parentId);
+  for (const n of nodes.slice(1)) document = addNode(document, { ...n, childIds: [] }, n.parentId);
+  const id = root.id;
+  const oldW = src.width, oldH = src.height;
+  const copy = document.nodes[id];
+  const kids = copy.childIds.map((c) => document.nodes[c]);
+  const constrained = copy.layoutMode && copy.layoutMode !== "NONE" || kids.some(hasConstraints);
+  const mutable = { ...document, nodes: { ...document.nodes } };
+  mutable.nodes[id] = { ...copy, width: target.width, height: target.height };
+  if (constrained) {
+    document = applyConstraints(mutable, id, oldW, oldH, target.width, target.height);
+    document = applyAutoLayout(document);
+    return { document: motion ? resizeMotion(doc, rootId, document, id, 1) : document, id, content: 1, offset: { dx: 0, dy: 0 } };
+  }
+  const s = Math.min(target.width / oldW, target.height / oldH);
+  const dx = (target.width - oldW * s) / 2, dy = (target.height - oldH * s) / 2;
+  for (const c of copy.childIds) {
+    const child = mutable.nodes[c];
+    if (covers(child, oldW, oldH)) {
+      mutable.nodes[c] = { ...child, x: 0, y: 0, width: target.width, height: target.height };
+      for (const g of child.childIds) scaleTree(mutable.nodes, g, s, false);
+      continue;
+    }
+    scaleTree(mutable.nodes, c, s, false);
+    const scaled = mutable.nodes[c];
+    mutable.nodes[c] = { ...scaled, x: scaled.x + dx, y: scaled.y + dy };
+  }
+  return { document: motion ? resizeMotion(doc, rootId, mutable, id, s, { dx, dy }) : mutable, id, content: s, offset: { dx, dy } };
+}
+
+export {
+  resizeTargetFromPreset,
+  resizeMotion,
+  magicResize
+};

package/dist/chunks/chunk-5RWJR4NJ.js

@@ -0,0 +1,95 @@
+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 {
+  art,
+  businessCard,
+  cardParts,
+  contactLines,
+  qrCode
+} from "./chunk-LKNIPL2H.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/printshop-card-developer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CODE = [
+  [["const ", "keyword"], ["priya", "name"], [" = {", "punct"]],
+  [["  role: ", "key"], ['"full-stack dev"', "string"], [",", "punct"]],
+  [["  stack: ", "key"], ['["TS", "Go", "Postgres"]', "string"], [",", "punct"]],
+  [["  based: ", "key"], ['"Leeds, UK"', "string"], [",", "punct"]],
+  [["  available: ", "key"], ["true", "keyword"], [",", "punct"]],
+  [["}", "punct"]]
+];
+var printshop_card_developer_default = defineTemplate({
+  id: "print-printshop-card-developer",
+  meta: {
+    name: "Developer business card with QR code",
+    description: "A card for a freelance developer or engineer written as code: an editor pane with line numbers and the card as an object literal, a cursor after \u201Cavailable: true\u201D; the back has a QR code to the portfolio (replace it with your own), the brand kit\u2019s email, phone and website in mono, and what she builds. 85 \xD7 55 mm and US 3.5 \xD7 2 in, two-sided",
+    category: "business-card",
+    tags: ["business card", "developer", "software engineer", "freelancer", "programmer", "tech", "code", "terminal", "dark", "qr code", "two-sided", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["brand-intro", "portfolio"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = businessCard("Developer business card with QR code", {}, (k2) => {
+      k2.brand(
+        { primary: "#0F1115", onPrimary: "#E6E8EC", paper: "#0F1115", text: "#E6E8EC", onPaper: "#9AA3AF", accent: "#57D38C", onAccent: "#0F1115" },
+        { name: "Priya Nair", tagline: "Full-stack developer", email: "priya@nair.dev", phone: "+44 7700 900 288", website: "nair.dev", address: "Leeds, UK" }
+      );
+      k2.palette({ pane: "#171A21", gutter: "#848E9D", keyword: "#C792EA", name: "#82AAFF", key: "#E6E8EC", string: "#9CDB8C", punct: "#9AA3AF", cursor: "#57D38C", tabBar: "#1E222B", tab: "#9AA3AF" });
+      k2.textStyle("Code 8.5", { ...MONO, size: 8.5, fontWeight: 400, lineHeight: 13 });
+      k2.textStyle("Tab 8", { ...MONO, size: 8, fontWeight: 500, lineHeight: 10 });
+      k2.textStyle("Name 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: -0.3, lineHeight: 17 });
+      k2.textStyle("Role 8", { ...MONO, size: 8, fontWeight: 500, lineHeight: 11 });
+      k2.textStyle("Label 8", { ...MONO, size: 8, fontWeight: 700, lineHeight: 12 });
+      k2.textStyle("Value 8.5", { ...MONO, size: 8.5, fontWeight: 400, lineHeight: 12 });
+      cardParts(k2, { name: "Name 14", title: "Role 8", nameColor: "text", titleColor: "onPaper", label: "Label 8", value: "Value 8.5", labelColor: "onPaper", valueColor: "text", gap: 6, labelWidth: 26, personGap: 3 });
+    }, (k2, { front, back, size }) => {
+      const { W, H, B } = size;
+      k2.flowSheet(front, 0, { top: 0, right: 0, bottom: 0, left: 0 }, "primary", "MIN", "MIN");
+      art(k2, front, W, H, B, [{ closed: true, points: [{ x: -B, y: -B }, { x: W + B, y: -B }, { x: W + B, y: H + B }, { x: -B, y: H + B }] }], "pane", { name: "Pane" });
+      art(k2, front, W, H, B, [{ closed: true, points: [{ x: -B, y: -B }, { x: W + B, y: -B }, { x: W + B, y: 34 }, { x: -B, y: 34 }] }], "tabBar", { name: "Tab bar" });
+      const bar = k2.stack(front, { direction: "HORIZONTAL", gap: 12, padding: { top: 20, right: 22, bottom: 6, left: 22 }, height: 34, align: "CENTER", name: "Tabs" });
+      k2.text(bar, "card.ts", { style: "Tab 8", color: "key", autoWidth: true, name: "Tab" });
+      k2.text(bar, "README.md", { style: "Tab 8", color: "tab", autoWidth: true, name: "Tab" });
+      const body = k2.stack(front, { direction: "HORIZONTAL", gap: 10, padding: { top: 14, right: 22, bottom: 20, left: 22 }, height: "FILL", name: "Editor" });
+      const gutter = k2.stack(body, { gap: 0, width: 10, name: "Gutter" });
+      CODE.forEach((_, i) => k2.text(gutter, String(i + 1), { style: "Code 8.5", color: "gutter", width: 10, align: "RIGHT", name: "Line number" }));
+      const code = k2.stack(body, { gap: 0, name: "Code" });
+      k2.patch(code, { layoutSizingHorizontal: "FILL" });
+      CODE.forEach((line, i) => {
+        const row2 = k2.stack(code, { direction: "HORIZONTAL", gap: 0, align: "CENTER", name: "Line" });
+        for (const [t, role] of line) k2.text(row2, t.replace(/ /g, "\xA0"), { style: "Code 8.5", color: role, autoWidth: true, name: "Token" });
+        if (i === 4) k2.rect(row2, 5, 10, "cursor", { name: "Cursor" });
+      });
+      k2.flowSheet(back, 0, { top: 22, right: 22, bottom: 22, left: 22 }, "paper", "CENTER", "MIN");
+      const row = k2.stack(back, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Row" });
+      const words = k2.stack(row, { gap: 10, name: "Words" });
+      k2.patch(words, { layoutSizingHorizontal: "FILL" });
+      k2.instance(words, "Person", { Name: "{{brand.name}}", Title: "// web apps, APIs, data" }, { name: "Person" });
+      contactLines(k2, words, ["tel", "mail", "web"], 2);
+      const tile = k2.stack(row, { width: "HUG", padding: 6, fill: "accent", radius: 4, name: "QR tile" });
+      qrCode(k2, tile, H - 84, "https://nair.example/work", "onAccent");
+    });
+    return k.finish();
+  }
+});
+
+export {
+  printshop_card_developer_default
+};