@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-Z4MZQMFD.js

@@ -0,0 +1,336 @@
+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 {
+  FIZZ,
+  bob,
+  burst,
+  burstSticker,
+  callComponent,
+  chromeText,
+  cutout,
+  display,
+  float,
+  grot,
+  halftone,
+  marquee,
+  maxBrand,
+  mono,
+  plate,
+  slap,
+  spark,
+  spin,
+  sticker,
+  stickerEdge,
+  wobble
+} from "./chunk-5A2BBXLV.js";
+import {
+  camera
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  clicks,
+  glide,
+  touch
+} from "./chunk-2PJUAVAE.js";
+import {
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  score
+} from "./chunk-KHGNV7UQ.js";
+import {
+  board,
+  ground,
+  hide,
+  reboard,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  logoBadge
+} 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-maximal-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("house", 2);
+var { beat } = S;
+var NAME = "Maximal SaaS feature demo";
+var STEP = [0, beat(8), beat(16), beat(24)];
+var W = 876;
+var H = 900;
+var AT = {
+  upload: { x: 760, y: 150 },
+  uploadCard: { x: 598, y: 186 },
+  bop: { x: 430, y: 316 },
+  beatCard: { x: 598, y: 372 },
+  yum: { x: 600, y: 560 },
+  stickerCard: { x: 470, y: 470 },
+  clips: { x: 450, y: 760 },
+  export: { x: 760, y: 820 }
+};
+var BEATS = 16;
+var LAYOUT = {
+  // Words inside x 64–940, y 250–1440: the panel ends at 1430, the bands and the burst below are drawing only.
+  story: {
+    top: { x: 64, y: 262 },
+    caption: { x: 64, y: 436, w: 876, style: "Caption 44" },
+    stage: { x: 64, y: 540, s: 1 },
+    band: { x: -100, y: 96, w: 1280 },
+    foot: { x: -100, y: 1640, w: 1280 },
+    burst: { x: 560, y: 1380 },
+    dots: { x: -180, y: 1300 }
+  },
+  post: {
+    top: { x: 40, y: 34 },
+    caption: { x: 40, y: 192, w: 640, style: "Caption 36" },
+    stage: { x: 330, y: 288, s: 0.78 },
+    band: null,
+    foot: { x: -60, y: 1010, w: 1200 },
+    burst: { x: -160, y: 560 },
+    dots: { x: 820, y: -120 }
+  },
+  wide: {
+    top: { x: 100, y: 90 },
+    caption: { x: 100, y: 270, w: 780, style: "Caption 44" },
+    stage: { x: 960, y: 70, s: 0.94 },
+    side: true,
+    band: null,
+    foot: { x: -60, y: 980, w: 2040 },
+    burst: { x: 520, y: 620 },
+    dots: { x: -160, y: 700 }
+  }
+};
+var cues = [
+  slap("Step plate", 0, { from: 0.3 }),
+  slap("Step seal", beat(0.5)),
+  { layer: "Panel", preset: "rise-in", at: beat(0.5), params: { duration: 700, distance: 260, ease: ease.back(1.3) } },
+  // Step 1 lands: the full bar kicks, the seal rocks and the preview's chip shakes, so the step never sits still.
+  { layer: "Progress", preset: "pulse", at: beat(4.5), params: { duration: 480, amount: 0.12 } },
+  wobble("Step seal", beat(5), { angle: 10 }),
+  { layer: "Preview chip", preset: "shake", at: beat(6), params: { duration: 400, distance: 10 } },
+  { layer: "Upload button", preset: "pulse", at: beat(6.5), params: { duration: 480, amount: 0.1 } },
+  // Step 2: the beat marks drop on, one an eighth of a beat.
+  { layer: "Beat dot", preset: "pop-in", at: STEP[1] + beat(1), stagger: { delay: 120, order: "selection" }, params: { duration: 260, amount: 0.1, ease: ease.back(2.6) } },
+  // Step 3: YUM lands on the preview.
+  slap("Placed sticker", STEP[2] + beat(1.5), { from: 0.2, duration: 420 }),
+  wobble("Placed sticker", STEP[2] + beat(3), { angle: 12 }),
+  // Step 4: the clips pop into the row.
+  slap("Clip thumb", STEP[3] + beat(1), { gap: beat(1), from: 0.2 }),
+  slap("Step list item", 0, { gap: beat(8), from: 0.4 }),
+  { layer: "Export", preset: "pulse", at: STEP[3] + beat(5), params: { duration: 968, amount: 0.08 } },
+  { layer: "Export", preset: "pulse", at: STEP[3] + beat(6), params: { duration: 968, amount: 0.08 } },
+  slap("Side burst", STEP[1] + beat(5), { from: 0.2, duration: 420 }),
+  slap("Side tag", STEP[2] + beat(2)),
+  wobble(["Side burst", "Side tag"], STEP[3], { gap: 80 })
+];
+var counts = [
+  { layer: "Seal figure", at: 0, duration: STEP[3], tick: STEP[1], counter: { from: 1, to: 4 } },
+  { layer: "Upload figure", at: beat(1.5), duration: beat(3), counter: { from: 0, to: 100, suffix: "%" } },
+  { layer: "Beats figure", at: STEP[1] + beat(1), duration: 120 * 48 / 3, tick: 40, counter: { from: 0, to: 48 } },
+  { layer: "Ready figure", at: STEP[3] + beat(1), duration: beat(3), counter: { from: 0, to: FIZZ.seconds, prefix: "Ready in ", suffix: " s" } }
+];
+var swaps = [
+  // The step's name: three words each, every one on its step's downbeat.
+  { layer: "Step words", words: ["DROP IT IN", "FIND THE BEAT", "SLAP A STICKER", "POST THE CLIPS"], at: 0, hold: STEP[1] - 240 - 160 - 4 * 50, stagger: 50, in: 240, out: 160, unit: "word", rise: 30 },
+  captionSwap(["Drop in the whole video.", "Auto-Bop finds all 48 beats.", "Tap a sticker. It lands.", "Three clips ready in 38s."], 0, S.duration - 20, { stagger: 60, in: 220, out: 160, rise: 24 })
+];
+var style_maximal_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-maximal-feature-demo",
+  meta: {
+    name: NAME,
+    description: 'A 15-second feature demo in a maximalist Y2K look: Auto-Bop shown working in four steps on a sticker-bright app panel. A finger taps Upload and the file fills to 100%, taps Auto-Bop and 48 beat marks drop onto the waveform as the count ticks, taps a sticker that slaps onto the clip, and the camera pulls back as three clips pop into the export row and "Ready in 38 s" counts. The step name swaps in chrome on a black plate, captions say each step, marquees run; music cut on every downbeat. 9:16 with square and 16:9 layouts',
+    category: "animation",
+    tags: ["animation", "saas", "maximalist", "y2k", "chrome", "stickers", "creator", "video", "ai", "feature", "demo", "tutorial", "pointer", "zoom", "counter", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "video"],
+    useCases: ["education", "launch", "tips"],
+    created: "2026-10-02",
+    updated: "2026-10-16"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    maxBrand(k);
+    for (const [n, sz] of [["Step 68", 68], ["Step 60", 60]]) display(k, n, sz, 1);
+    for (const [n, sz] of [["Caption 44", 44], ["Caption 36", 36]]) display(k, n, sz, 1.05);
+    display(k, "Seal 72", 72, 0.9);
+    display(k, "Panel 30", 30, 1.1);
+    display(k, "Figure 40", 40, 1);
+    display(k, "Chip 34", 34, 1);
+    display(k, "List 30", 30, 1.1);
+    mono(k, "Tag 22", 22);
+    grot(k, "Ui 22", 22, { weight: 700, lead: 1.25 });
+    callComponent(k, { style: "Panel 30", label: "Export", pad: [16, 28], drop: 6, weight: 4 });
+    const sheet = k.sheet;
+    ground(k, sheet, "Feature demo", "paper");
+    k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
+    const L = LAYOUT.story;
+    halftone(k, sheet, 600, "pinkDeep", { name: "Dots", absolute: L.dots });
+    const big = burst(k, sheet, 620, "secondary", { name: "Big burst", points: 26, depth: 0.1, absolute: L.burst });
+    spin(k, big, -1, S.duration);
+    const band = (name, at, fill, rotate, right) => marquee(k, sheet, {
+      name,
+      width: at.w,
+      height: 96,
+      w: 160,
+      fill,
+      loop: S.duration,
+      cells: 16,
+      rotate,
+      right,
+      absolute: { x: at.x, y: at.y },
+      cell: (c) => {
+        spark(k, c, 48, fill === "night" ? "accent" : "night", { name: "Band spark" });
+        k.ellipse(c, 30, fill === "night" ? "primary" : "accent", { name: "Band dot", stroke: { color: "night", width: 3, align: "INSIDE" } });
+      }
+    });
+    band("Top band", L.band, "primary", 3, true);
+    band("Foot band", L.foot, "night", -3, false);
+    const top = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 22, align: "CENTER", name: "Top", absolute: L.top });
+    burstSticker(k, top, [{ text: "1", style: "Seal 72", name: "Seal figure" }, { text: "OF 4", style: "Tag 22" }], { size: 150, fill: "accent", ink: "onAccent", name: "Step seal", points: 26, depth: 0.08, rotate: -8 });
+    const pl = plate(k, top, { name: "Step plate", rotate: -2, pad: [18, 30], width: 680 });
+    chromeText(k, pl, "DROP IT IN", { style: "Step 68", name: "Step words", width: "FILL", size: 68 });
+    const strip = k.stack(sheet, { width: L.caption.w, fill: "primary", radius: 16, padding: { top: 16, right: 26, bottom: 16, left: 26 }, ...stickerEdge(k, 4, 8), name: "Caption strip", absolute: { x: L.caption.x, y: L.caption.y } });
+    k.patch(strip, { rotation: 1.5 });
+    k.text(strip, swaps[1].words[0], { style: L.caption.style, color: "onPrimary", width: "FILL", name: "Caption" });
+    const stage = board(k, sheet, W, H, 1, "Stage", { absolute: { x: L.stage.x, y: L.stage.y } });
+    k.patch(k.node(stage).parentId, { clipsContent: true, name: "Stage view" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W, height: H }, { name: "Camera" });
+    const panel = k.stack(cam, { width: W, height: H, fill: "card", radius: 34, clip: true, ...stickerEdge(k, 5, 0), name: "Panel", absolute: { x: 0, y: 0 } });
+    k.patch(panel, { effects: [] });
+    const app = k.frame(panel, { x: 0, y: 0, width: W, height: H }, { name: "App" });
+    k.patch(app, { layoutPositioning: "ABSOLUTE" });
+    const box = (name, x, y, w, h, fill, o = {}) => k.stack(app, { width: w, height: h, fill, radius: o.radius ?? 22, padding: o.pad ?? 18, gap: o.gap ?? 10, direction: o.direction ?? "VERTICAL", justify: o.justify ?? "MIN", align: o.align ?? "MIN", ...o.edge === false ? {} : { stroke: { color: "night", width: 3, align: "INSIDE" } }, name, absolute: { x, y } });
+    const bar = box("App bar", 24, 22, W - 48, 64, "night", { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", pad: 12, edge: false, radius: 999 });
+    const lock = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "App lockup" });
+    logoBadge(k, lock, { fill: "secondary", size: 26, pad: 7, radius: 999 });
+    k.text(lock, "{{brand.name}}", { style: "Panel 30", color: "onNight", autoWidth: true, name: "App name" });
+    k.text(bar, FIZZ.feature.toUpperCase(), { style: "Tag 22", color: "onNight", autoWidth: true, name: "App tab" });
+    const prev = k.frame(app, { x: 24, y: 104, width: 300, height: 520 }, { name: "Preview", fill: "secondary", radius: 24, clip: true });
+    k.patch(prev, { layoutPositioning: "ABSOLUTE", strokes: [], effects: [] });
+    halftone(k, prev, 300, "night", { name: "Preview dots", absolute: { x: 120, y: -90 }, step: 18 });
+    cutout(k, prev, 260, 330, { top: "accent", absolute: { x: 20, y: 190 } });
+    sticker(k, prev, "THIS SAUCE", { fill: "card", ink: "onCard", style: "Chip 34", shape: "tag", rotate: -4, pad: [6, 14], name: "Preview chip", absolute: { x: 24, y: 420 } });
+    burstSticker(k, prev, [{ text: "YUM", style: "Chip 34" }], { size: 150, fill: "primary", ink: "onPrimary", name: "Placed sticker", rotate: 10, absolute: { x: 130, y: 40 } });
+    const up = box("Upload card", 344, 104, 508, 164, "chromeHi", { gap: 12 });
+    const upRow = k.stack(up, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Upload row" });
+    k.text(upRow, "sunday-cook-up.mov", { style: "Tag 22", color: "onCard", autoWidth: true, name: "File name" });
+    k.instance(upRow, "Call", { Label: "Upload" }, { name: "Upload button" });
+    const prog = k.stack(up, { direction: "HORIZONTAL", height: 26, fill: k.tint("night", 0.12), radius: 999, clip: true, name: "Progress" });
+    const fillBar = k.rect(prog, 472, 26, "accent", { radius: 999, name: "Progress fill", absolute: { x: 0, y: 0 } });
+    const upFoot = k.stack(up, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Upload foot" });
+    k.text(upFoot, "14:22 \xB7 1.8 GB", { style: "Ui 22", color: "cardMuted", autoWidth: true, name: "File size" });
+    k.text(upFoot, "100%", { style: "Ui 22", color: "onCard", width: 70, align: "RIGHT", name: "Upload figure" });
+    const bc = box("Beat card", 344, 284, 508, 180, "night", { gap: 12, edge: false });
+    const bcRow = k.stack(bc, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Beat row" });
+    sticker(k, bcRow, "AUTO-BOP", { fill: "primary", ink: "onPrimary", style: "Tag 22", pad: [8, 16], name: "Bop button", drop: 0, weight: 3 });
+    const bf = k.stack(bcRow, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Beats" });
+    k.text(bf, "48", { style: "Figure 40", color: "onNight", width: 56, align: "RIGHT", name: "Beats figure" });
+    k.text(bf, "beats", { style: "Ui 22", color: "nightMuted", autoWidth: true, name: "Beats word" });
+    const wave = k.stack(bc, { height: 88, name: "Wave" });
+    const bars = 34, bw = 472 / bars;
+    for (let i = 0; i < bars; i++) {
+      const h = Math.round(18 + 60 * Math.abs(Math.sin(i * 1.3) * Math.cos(i * 0.45)));
+      const b = k.rect(wave, Math.max(4, Math.round(bw - 5)), h, "chromeMid", { radius: 3, name: "Wave bar", absolute: { x: Math.round(i * bw), y: Math.round(44 - h / 2) } });
+      k.patch(b, { anchorY: 0.5 });
+      k.behave(b, "scaleY", [{ kind: "audio", signal: "spectrum", bin: Math.round(i / bars * 100) / 100, gain: 1.2, mode: "multiply", from: 0.55, to: 1.2, attack: 10, release: 160 }]);
+    }
+    for (let i = 0; i < BEATS; i++) k.ellipse(wave, 16, "accent", { name: "Beat dot", absolute: { x: Math.round((i + 0.5) * (472 / BEATS) - 8), y: 0 }, stroke: { color: "chromeHi", width: 2, align: "OUTSIDE" } });
+    const sc = box("Sticker card", 344, 480, 508, 144, "accent", { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", pad: 16 });
+    sticker(k, sc, "OMG", { fill: "secondary", ink: "onSecondary", style: "Chip 34", pad: [8, 14], rotate: -6, drop: 4, weight: 3, name: "Sheet sticker" });
+    burstSticker(k, sc, [{ text: "YUM", style: "Chip 34" }], { size: 112, fill: "primary", ink: "onPrimary", name: "Sheet yum", rotate: 8 });
+    sticker(k, sc, "BOP", { fill: "card", ink: "onCard", style: "Chip 34", pad: [8, 14], rotate: 5, drop: 4, weight: 3, name: "Sheet sticker" });
+    spark(k, sc, 70, "chromeHi", { outline: 3, name: "Sheet spark" });
+    const cr = box("Clips card", 24, 644, 828, 232, "night", { direction: "HORIZONTAL", gap: 16, align: "CENTER", edge: false, pad: 18 });
+    const thumbs = ["secondary", "accent", "primary"];
+    thumbs.forEach((fill, i) => {
+      const t = k.stack(cr, { width: 112, height: 196, fill, radius: 16, clip: true, ...stickerEdge(k, 3, 0), name: "Clip thumb" });
+      k.patch(t, { effects: [] });
+      cutout(k, t, 100, 130, { top: i === 1 ? "secondary" : "accent", skin: i === 2 ? "skinDeep" : "skin", absolute: { x: 6, y: 70 } });
+    });
+    const crR = k.stack(cr, { gap: 14, name: "Clips side" });
+    k.text(crR, "3 clips \xB7 9:16", { style: "Panel 30", color: "onNight", width: "FILL", name: "Clips title" });
+    k.text(crR, `Ready in ${FIZZ.seconds} s`, { style: "Ui 22", color: "onNight", width: "FILL", name: "Ready figure" });
+    k.instance(crR, "Call", { Label: "Export" }, { name: "Export" });
+    const t0 = touch(k, cam, { x: AT.upload.x, y: AT.upload.y, size: 70, fill: "secondary", ring: "secondary" });
+    const list = k.stack(sheet, { gap: 14, width: "HUG", name: "Step list", absolute: { x: 100, y: 420 } });
+    ["1  Drop it in", "2  Find the beat", "3  Slap a sticker", "4  Post the clips"].forEach((s, i) => sticker(k, list, s, { fill: ["card", "secondary", "accent", "primary"][i], ink: ["onCard", "onSecondary", "onAccent", "onPrimary"][i], style: "List 30", shape: "tag", rotate: i % 2 ? 2 : -2, name: "Step list item" }));
+    burstSticker(k, sheet, [{ text: "48", style: "Seal 72" }, { text: "BEATS FOUND", style: "Tag 22" }], { size: 230, fill: "primary", ink: "onPrimary", name: "Side burst", rotate: 8, absolute: { x: 30, y: 1210 } });
+    sticker(k, sheet, `${FIZZ.captionStyles} CAPTION STYLES`, { fill: "secondary", ink: "onSecondary", style: "Tag 22", rotate: -7, name: "Side tag", absolute: { x: 560, y: 1336 } });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.patch(fillBar, { anchorX: 0 });
+    k.animate(fillBar, "scaleX", [{ t: beat(1.5), v: 0.02, ease: ease.out("cubic") }, { t: beat(4.5), v: 1 }]);
+    glide(k, t0, [
+      { t: 0, dx: 0, dy: 120 },
+      { t: beat(1), dx: 0, dy: 0 },
+      { t: STEP[1] - beat(1), dx: 0, dy: 0 },
+      { t: STEP[1] + beat(0.5), dx: AT.bop.x - AT.upload.x, dy: AT.bop.y - AT.upload.y },
+      { t: STEP[2] - beat(1), dx: AT.bop.x - AT.upload.x, dy: AT.bop.y - AT.upload.y },
+      { t: STEP[2] + beat(1), dx: AT.yum.x - AT.upload.x, dy: AT.yum.y - AT.upload.y },
+      { t: STEP[3] - beat(1), dx: AT.yum.x - AT.upload.x, dy: AT.yum.y - AT.upload.y },
+      { t: STEP[3] + beat(4.5), dx: AT.export.x - AT.upload.x, dy: AT.export.y - AT.upload.y }
+    ]);
+    clicks(k, t0, [beat(1.2), STEP[1] + beat(0.7), STEP[2] + beat(1.2), STEP[3] + beat(4.8)]);
+    camera(k, cam, W, H, [
+      { t: beat(1), duration: 600, zoom: 1.55, ...AT.uploadCard },
+      { t: STEP[1], duration: 500, zoom: 1.5, ...AT.beatCard },
+      { t: STEP[2], duration: 500, zoom: 1.35, ...AT.stickerCard },
+      { t: STEP[3], duration: 700, zoom: 1.4, ...AT.clips },
+      { t: STEP[3] + beat(4), duration: 700, zoom: 1 }
+    ]);
+    bob(k, k.named(sheet, "Step seal")[0], 0.04);
+    float(k, k.named(sheet, "Dots")[0], 16, 2, S.duration);
+    const lay = (kit, root, l) => {
+      for (const id of kit.named(root, "Top")) kit.patch(id, { x: l.top.x, y: l.top.y });
+      for (const id of kit.named(root, "Caption strip")) kit.patch(id, { x: l.caption.x, y: l.caption.y, width: l.caption.w });
+      restyle(kit, root, "Caption", l.caption.style);
+      reboard(kit, root, "Stage", l.stage.s);
+      for (const id of kit.named(root, "Stage view")) kit.patch(id, { x: l.stage.x, y: l.stage.y });
+      for (const id of kit.named(root, "Foot band")) kit.patch(id, { x: l.foot.x, y: l.foot.y, width: l.foot.w });
+      if (!l.band) hide(kit, root, ["Top band"]);
+      for (const id of kit.named(root, "Big burst")) kit.patch(id, l.burst);
+      for (const id of kit.named(root, "Dots")) kit.patch(id, l.dots);
+      if (!l.side) hide(kit, root, ["Step list"]);
+    };
+    hide(k, sheet, ["Step list", "Side burst", "Side tag"]);
+    k.variants(sheet, [
+      { preset: "ig-post", adjust: (kit, id) => {
+        lay(kit, id, LAYOUT.post);
+        restyle(kit, id, "Step words", "Step 60");
+        for (const s of kit.named(id, "Side burst")) kit.patch(s, { x: 40, y: 400, visible: true });
+        for (const s of kit.named(id, "Side tag")) kit.patch(s, { x: 30, y: 700, visible: true });
+      } },
+      { preset: "video-1080p", adjust: (kit, id) => {
+        lay(kit, id, LAYOUT.wide);
+        for (const s of kit.named(id, "Step list")) kit.patch(s, { visible: true, x: 100, y: 420 });
+        for (const s of kit.named(id, "Side burst")) kit.patch(s, { x: 560, y: 600, visible: true });
+        for (const s of kit.named(id, "Side tag")) kit.patch(s, { x: 470, y: 870, visible: true });
+      } }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_maximal_feature_demo_default
+};

package/dist/chunks/chunk-Z4NOCBYS.js

@@ -0,0 +1,105 @@
+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 {
+  brackets,
+  courierBox,
+  cyberBrand,
+  hazard,
+  hudGrid,
+  lift,
+  plate,
+  split,
+  stampUnder,
+  street
+} from "./chunk-XVGKDWCY.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  logoBadge,
+  pill
+} 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/cyberpunk-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SCENE = { horizon: 0.8, figure: 0.27, holo: 0.21, rate: 0 };
+var cyberpunk_link_preview_default = defineTemplate({
+  id: "social-cyberpunk-link-preview",
+  meta: {
+    name: "Cyberpunk incident link preview",
+    description: "A 1200 \xD7 630 link preview for a post-mortem, a security write-up or a changelog entry, as a HUD over a neon street: the headline in heavy capitals with its colours split, the figures in one mono line, and a rain-slick street with a holographic lock, targeting brackets on a courier and BLOCKED stamped at his feet",
+    category: "social",
+    tags: ["cyberpunk", "neon", "hud", "glitch", "rain", "night", "security", "incident", "post-mortem", "ai agents", "dev tool", "link preview", "open graph", "og image", "saas", "mono"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["case-study", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Cyberpunk incident link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    cyberBrand(k, { headline: "THE BREACH THAT DIDN\u2019T HAPPEN." });
+    k.textStyle("Eyebrow 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 3, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Display 76", { size: 76, fontWeight: 900, letterSpacing: -2.8, lineHeight: 74 });
+    k.textStyle("Facts 20", { ...MONO, size: 20, fontWeight: 600, lineHeight: 30 });
+    k.textStyle("Brand 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Hud 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Readout 18", { ...MONO, size: 18, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Stamp 40", { size: 40, fontWeight: 900, letterSpacing: 2, lineHeight: 42 });
+    k.textStyle("Tag 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1.5, lineHeight: 20, textCase: "UPPER" });
+    pill(k, "Kind", { fill: "primary", ink: "onPrimary", style: "Tag 16", label: "Incident report", pad: [6, 12], radius: 0 });
+    const sheet = k.sheet;
+    const SW = 470, SH = 630, SX = 730;
+    k.flowSheet(sheet, 0, { top: 60, right: SW + 64, bottom: 56, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    hudGrid(k, sheet, 1200, 630, 105, { opacity: 0.055 });
+    street(k, sheet, SW, SH, { ...SCENE, at: { x: SX, y: 0 } });
+    hazard(k, sheet, 16, { upright: 630, name: "Hazard edge", absolute: { x: SX - 16, y: 0 } });
+    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Head" });
+    k.instance(head, "Kind", { Label: "Incident report" }, { name: "Kind" });
+    k.text(head, "No. 0412 \xB7 02:14 a.m.", { style: "Eyebrow 18", color: "onPaper", autoWidth: true, name: "Eyebrow" });
+    const mid = k.stack(sheet, { gap: 22, name: "Middle" });
+    k.text(mid, "{{brand.headline}}", { style: "Display 76", color: "text", name: "Headline", effects: split(k, 4) });
+    const rule = k.stack(mid, { direction: "HORIZONTAL", gap: 6, name: "Rule" });
+    k.rect(rule, 72, 6, "primary", { name: "Rule yellow" });
+    k.rect(rule, 36, 6, "secondary", { name: "Rule cyan" });
+    k.rect(rule, 18, 6, "accent", { name: "Rule magenta" });
+    k.text(mid, "One poisoned ticket \xB7 one live Stripe key \xB7 blocked in 38 ms", { style: "Facts 20", color: "onPaper", name: "Facts" });
+    const by = k.stack(sheet, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Byline" });
+    logoBadge(k, by, { fill: "primary", size: 24, pad: 6, radius: 0 });
+    k.text(by, "{{brand.name}}", { style: "Brand 22", color: "text", name: "Brand name" });
+    const c = courierBox(SW, SH, SCENE);
+    const lock = { x: SX + c.x - 30, y: c.y - 26, width: c.width + 60, height: c.height + 46 };
+    brackets(k, sheet, lock.width, lock.height, { name: "Lock", len: 34, width: 4.5, absolute: { x: lock.x, y: lock.y } });
+    const tag = plate(k, sheet, { width: 210, gap: 1, padding: { top: 14, right: 10, bottom: 12, left: 14 }, edge: "accent", tab: "accent", name: "Tag", absolute: { x: SX + 20, y: lock.y - 116 }, effects: [lift(k, 26, 0.8)] });
+    for (const [label, value] of [["Agent", "support-bot-7"], ["Call", "send_email()"]]) {
+      k.text(tag, label, { style: "Hud 16", color: "onCard", name: "Tag label" });
+      k.text(tag, value, { style: "Readout 18", color: "onCard", name: "Tag value" });
+    }
+    const STAMP_W = 232;
+    const stamp = k.stack(sheet, { direction: "HORIZONTAL", width: STAMP_W, justify: "CENTER", fill: "primary", padding: { top: 4, right: 16, bottom: 5, left: 16 }, stroke: { color: "onPrimary", width: 3.5, align: "INSIDE", join: "MITER" }, name: "Stamp", absolute: stampUnder(c, STAMP_W, SX), effects: [lift(k, 24, 0.8)] });
+    k.text(stamp, "BLOCKED", { style: "Stamp 40", color: "onPrimary", autoWidth: true, name: "Stamp words" });
+    k.patch(stamp, { rotation: -7 });
+    return k.finish();
+  }
+});
+
+export {
+  cyberpunk_link_preview_default
+};

package/dist/chunks/chunk-Z5IXNO7V.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 {
+  art,
+  clipTo,
+  disc,
+  foldMarks,
+  folded,
+  leaf,
+  panelX,
+  panels,
+  raise
+} from "./chunk-LKNIPL2H.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  pt3
+} from "./chunk-EJLCQVQK.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/print/printshop-brochure-landscaping.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function hill(pts, bottom, x0, x1, top) {
+  const ridge = [];
+  for (let i = 0; i < pts.length - 1; i++) for (let s = 0; s < 12; s++) {
+    const t = s / 12, e = (1 - Math.cos(Math.PI * t)) / 2;
+    ridge.push({ x: pts[i][0] + (pts[i + 1][0] - pts[i][0]) * t, y: pts[i][1] + (pts[i + 1][1] - pts[i][1]) * e });
+  }
+  const last = pts[pts.length - 1];
+  ridge.push({ x: last[0], y: last[1] });
+  const shape = clipTo([...ridge, { x: last[0], y: bottom }, { x: pts[0][0], y: bottom }], x0, top, x1, bottom);
+  return { closed: true, points: shape.map((p) => pt3(p.x, p.y)) };
+}
+var printshop_brochure_landscaping_default = defineTemplate({
+  id: "print-printshop-brochure-landscaping",
+  meta: {
+    name: "Landscaping tri-fold brochure",
+    description: "A tri-fold for a landscaping or garden-care company on US Letter, roll-folded with a narrower tuck-in: a cut-paper cover of rolling hills, a tree line and a low sun; customer quotes and a free-estimate panel outside; inside the team with before-and-after photo frames, services with prices, and a year of care by season. Services, seasons and quotes are components to retype",
+    category: "brochure",
+    tags: ["brochure", "tri-fold", "trifold", "landscaping", "gardening", "lawn care", "garden design", "outdoor", "home services", "letter", "print"],
+    platforms: ["print"],
+    formats: ["document"],
+    useCases: ["brand-intro", "pricing"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Landscaping tri-fold brochure", preset("trifold-letter"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { primary: "#24452F", onPrimary: "#F6F0E2", paper: "#F6F0E2", text: "#1F2A20", onPaper: "#5A5E4C", accent: "#D9A441", onAccent: "#24301F", card: "#E9E0CB", onCard: "#1F2A20" },
+      { name: "Greenline Landscapes", tagline: "Gardens that look after themselves", email: "quotes@greenlinelandscapes.com", phone: "(512) 555-0138", website: "greenlinelandscapes.com", address: "Serving Austin, Round Rock and Cedar Park" }
+    );
+    k.palette({ sky: "#F2E6CC", sun: "#E9B65C", far: "#9DB48A", mid: "#6E9364", near: "#3F6B47", front: "#24452F", tree: "#1B3524", field: "#B7C79A" });
+    k.textStyle("Cover 42", { ...SERIF, size: 42, fontWeight: 600, letterSpacing: -1, lineHeight: 44 });
+    k.textStyle("Title 24", { ...SERIF, size: 24, fontWeight: 600, letterSpacing: -0.4, lineHeight: 28 });
+    k.textStyle("Body 11", { size: 11, fontWeight: 400, lineHeight: 16 });
+    k.textStyle("Item 12", { size: 12, fontWeight: 700, lineHeight: 16 });
+    k.textStyle("Price 12", { size: 12, fontWeight: 800, lineHeight: 16 });
+    k.textStyle("Kicker 9", { size: 9, fontWeight: 800, letterSpacing: 1.8, lineHeight: 12 });
+    k.textStyle("Quote 14", { ...SERIF, size: 14, fontWeight: 400, fontStyle: "italic", lineHeight: 20 });
+    k.textStyle("Brand 12", { size: 12, fontWeight: 800, letterSpacing: 1, lineHeight: 15 });
+    k.textStyle("Phone 26", { size: 26, fontWeight: 800, letterSpacing: -0.8, lineHeight: 30 });
+    k.textStyle("Caption 9", { size: 9, fontWeight: 700, letterSpacing: 1.2, lineHeight: 12 });
+    k.component("Service", { width: 294, gap: 4, props: { Name: "Weekly lawn care", Price: "from $45", About: "Mow, edge, blow and a look at what needs doing." } }, (id) => {
+      const head = k.stack(id, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Head" });
+      k.propText(head, "Name", { style: "Item 12", color: "text", autoWidth: true });
+      k.propText(head, "Price", { style: "Price 12", color: "text", autoWidth: true });
+      k.propText(id, "About", { style: "Body 11", color: "onPaper", width: "FILL" });
+      k.rect(id, "FILL", 1, "onPaper", { name: "Rule" });
+    });
+    k.component("Season", { width: 288, direction: "HORIZONTAL", gap: 12, align: "MIN", props: { Season: "SPRING", Work: "Feed and aerate the lawn, mulch beds, plant summer colour." } }, (id) => {
+      const tag = k.stack(id, { width: 62, padding: { top: 4, right: 0, bottom: 4, left: 0 }, radius: 4, fill: "primary", align: "CENTER", name: "Tag" });
+      k.propText(tag, "Season", { style: "Caption 9", color: "onPrimary", autoWidth: true, align: "CENTER" });
+      k.propText(id, "Work", { style: "Body 11", color: "onCard", width: "FILL" });
+    });
+    k.component("Quote", { width: 288, gap: 6, props: { Quote: "\u201CThey turned a bare clay yard into the place we eat every evening.\u201D", Who: "JOANNA P., CEDAR PARK" } }, (id) => {
+      k.propText(id, "Quote", { style: "Quote 14", color: "onPrimary", width: "FILL" });
+      k.propText(id, "Who", { style: "Caption 9", color: "onPrimary", width: "FILL" });
+    });
+    const f = folded(k, "trifold-letter");
+    const { W, H, B } = f;
+    const PAD = { top: 40, right: 30, bottom: 36, left: 30 };
+    const [flap, backP, cover] = panels(k, f.sheets.outside, f.outside, H, B, { pad: PAD, gap: 22, grounds: ["primary", void 0, "card"], justify: ["SPACE_BETWEEN", "MIN", "MIN"], names: ["Tuck-in", "Back", "Cover"] });
+    const ox = panelX(f.outside), cw = f.outside[2], x0 = ox[2], x1 = ox[2] + cw + B;
+    const out = f.sheets.outside;
+    art(k, out, W, H, B, [disc(x0 + cw * 0.72, H * 0.6, 44)], "sun", { name: "Sun" });
+    art(k, out, W, H, B, [hill([[x0, H * 0.64], [x0 + cw * 0.3, H * 0.6], [x0 + cw * 0.6, H * 0.66], [x1, H * 0.6]], H + B, x0, x1, -B)], "far", { name: "Far hills" });
+    art(k, out, W, H, B, [hill([[x0, H * 0.72], [x0 + cw * 0.35, H * 0.67], [x0 + cw * 0.7, H * 0.71], [x1, H * 0.68]], H + B, x0, x1, -B)], "mid", { name: "Middle hills" });
+    const trees = Array.from({ length: 9 }, (_, i) => {
+      const x = x0 + 18 + i * (cw / 8.6), y = H * 0.705 - i % 3 * 6;
+      return leaf(x, y + 2, 34 + i % 2 * 10, 16, -90);
+    });
+    art(k, out, W, H, B, trees, "tree", { name: "Tree line" });
+    art(k, out, W, H, B, [hill([[x0, H * 0.8], [x0 + cw * 0.4, H * 0.76], [x0 + cw * 0.75, H * 0.82], [x1, H * 0.78]], H + B, x0, x1, -B)], "field", { name: "Field" });
+    art(k, out, W, H, B, [hill([[x0, H * 0.9], [x0 + cw * 0.3, H * 0.85], [x0 + cw * 0.7, H * 0.88], [x1, H * 0.84]], H + B, x0, x1, -B)], "near", { name: "Near hills" });
+    const brand = k.stack(cover, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Brand" });
+    k.logo(brand, 28, 28);
+    k.text(brand, "{{brand.name}}", { style: "Brand 12", color: "onCard", width: "FILL", name: "Firm" });
+    k.text(cover, "Gardens that look after themselves", { style: "Cover 42", color: "onCard", width: "FILL", name: "Title" });
+    k.text(cover, "Design, planting and year-round care for Central Texas yards, with native plants that shrug off the heat.", { style: "Body 11", color: "onCard", width: "FILL", name: "Lead" });
+    k.text(backP, "FREE ESTIMATE", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(backP, "Walk the yard with us", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    k.text(backP, "We come out, listen to how you use the space, and send a written plan and a fixed price within three days. No pressure and no charge.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Body" });
+    const call = k.stack(backP, { gap: 4, padding: 18, radius: 10, fill: "accent", name: "Call" });
+    k.text(call, "CALL OR TEXT", { style: "Caption 9", color: "onAccent", width: "FILL", name: "Call title" });
+    k.text(call, "{{brand.phone}}", { style: "Phone 26", color: "onAccent", width: "FILL", name: "Phone" });
+    k.text(call, "{{brand.email}}", { style: "Body 11", color: "onAccent", width: "FILL", name: "Email" });
+    k.text(backP, "{{brand.address}}\n{{brand.website}}", { style: "Item 12", color: "text", width: "FILL", name: "Area" });
+    k.photo(backP, f.outside[1] - PAD.left - PAD.right, 190, { radius: 8, ground: "card", name: "Crew photo" });
+    k.text(backP, "Licensed and insured \xB7 TX irrigator LI 0024981 \xB7 Member, Texas Nursery & Landscape Association", { style: "Body 11", color: "onPaper", width: "FILL", name: "Credentials" });
+    const q = k.stack(flap, { gap: 26, name: "Quotes" });
+    k.text(q, "WHAT NEIGHBOURS SAY", { style: "Kicker 9", color: "onPrimary", width: "FILL", name: "Kicker" });
+    for (const [t, w] of [["\u201CThey turned a bare clay yard into the place we eat every evening.\u201D", "JOANNA P., CEDAR PARK"], ["\u201COur water bill halved after they swapped the lawn for natives and drip.\u201D", "DEV & ANA R., ROUND ROCK"], ["\u201COn time every Tuesday for four years. The hedges have never looked better.\u201D", "MR. HOLLIS, TRAVIS HEIGHTS"]]) k.instance(q, "Quote", { Quote: t, Who: w }, { width: "FILL", name: "Quote" });
+    art(k, out, W, H, B, [leaf(-B, H * 0.86, 120, 60, -30), leaf(-B, H * 0.92, 90, 44, -8), leaf(30, H + B, 100, 50, -70)], "near", { name: "Fronds" });
+    raise(k, k.node(cover).parentId);
+    foldMarks(k, out, f.outside, H, B, "text");
+    const [p1, p2, p3] = panels(k, f.sheets.inside, f.inside, H, B, { pad: PAD, gap: 16, grounds: [void 0, void 0, "card"], names: ["About", "Services", "Seasons"] });
+    k.text(p1, "ABOUT US", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(p1, "Twelve years of Texas gardens", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    k.text(p1, "Marisol and Pete started Greenline with one truck and a mower. Today a crew of fourteen designs, plants and keeps more than 300 gardens, most of them still with us from the first year.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Body" });
+    const pw = f.inside[0] - PAD.left - PAD.right;
+    for (const label of ["BEFORE", "AFTER"]) {
+      const fr = k.stack(p1, { gap: 6, name: label === "BEFORE" ? "Before" : "After" });
+      k.photo(fr, pw, 150, { radius: 8, ground: "card", name: `${label === "BEFORE" ? "Before" : "After"} photo` });
+      k.text(fr, label === "BEFORE" ? "BEFORE \xB7 A BARE BACK YARD IN HYDE PARK" : "AFTER \xB7 NATIVE BEDS, A PATIO AND SHADE", { style: "Caption 9", color: "onPaper", width: "FILL", name: "Caption" });
+    }
+    k.text(p2, "SERVICES", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(p2, "What we do, and what it costs", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    const sv = k.stack(p2, { gap: 12, name: "Services" });
+    for (const [n, p, a] of [["Weekly lawn care", "from $45", "Mow, edge, blow and a look at what needs doing."], ["Garden design", "from $650", "A drawn plan, plant list and phased budget."], ["Native planting", "quoted", "Drought-proof beds that feed bees and birds."], ["Drip irrigation", "from $1,200", "Smart controllers that skip rainy days."], ["Patios and paths", "quoted", "Limestone, decomposed granite or pavers."], ["Tree care", "from $180", "Pruning by a certified arborist."]]) k.instance(sv, "Service", { Name: n, Price: p, About: a }, { width: "FILL", name: "Service" });
+    k.text(p3, "A YEAR OF CARE", { style: "Kicker 9", color: "onCard", width: "FILL", name: "Kicker" });
+    k.text(p3, "Our plan, season by season", { style: "Title 24", color: "onCard", width: "FILL", name: "Title" });
+    const ss = k.stack(p3, { gap: 16, name: "Seasons" });
+    for (const [s, w] of [["SPRING", "Feed and aerate the lawn, mulch beds, plant summer colour."], ["SUMMER", "Mow high, check every drip line, shade the tender plants."], ["AUTUMN", "Overseed, plant trees and shrubs, clear leaves weekly."], ["WINTER", "Prune, protect from freezes, plan next year\u2019s changes."]]) k.instance(ss, "Season", { Season: s, Work: w }, { width: "FILL", name: "Season" });
+    k.text(p3, "Care plans from $160 a month, paused any time.", { style: "Item 12", color: "onCard", width: "FILL", name: "Plan price" });
+    const ix = panelX(f.inside);
+    art(k, f.sheets.inside, W, H, B, [leaf(ix[2] + f.inside[2] + B, H * 0.8, 170, 80, 200), leaf(ix[2] + f.inside[2] * 0.7, H + B, 150, 70, 250), leaf(ix[2] + f.inside[2] + B, H + B, 120, 56, 225)], "mid", { name: "Fronds" });
+    raise(k, k.node(p3).parentId);
+    foldMarks(k, f.sheets.inside, f.inside, H, B, "text");
+    k.setCover(f.sheets.outside);
+    return k.finish();
+  }
+});
+
+export {
+  printshop_brochure_landscaping_default
+};