@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-6SRIFODL.js

@@ -0,0 +1,135 @@
+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 {
+  SERVICES,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  kpiRow,
+  label,
+  lockup,
+  panel,
+  servicesTable,
+  ts,
+  widenConsole
+} from "./chunk-DSXYFFAH.js";
+import {
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-data-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS link preview";
+var CON_W = 580;
+var ROWS = SERVICES.slice(1, 6);
+var style_data_link_preview_default = defineTemplate({
+  id: "social-saas-style-data-link-preview",
+  meta: {
+    name: NAME,
+    description: "A link preview card in a data-dense enterprise look for an observability platform: the name, the promise and the address beside a console panel of KPI tiles over a services table, one service washed red and flagged with its sparkline off the scale. Open Graph 1200 \xD7 630 with GitHub social preview and X post sizes",
+    category: "social",
+    tags: ["social", "link preview", "open graph", "og image", "github", "x", "saas", "data", "dashboard", "enterprise", "observability", "devops", "launch"],
+    platforms: ["web", "x", "linkedin", "github"],
+    formats: ["banner", "post"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("og-image"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 26", display(26));
+    ts(k, "Head 52", display(50, { lead: 1.06 }));
+    ts(k, "Head 64", display(64, { lead: 1.06 }));
+    ts(k, "Sub 22", body(22));
+    ts(k, "Sub 26", body(26));
+    ts(k, "Site 22", code(22));
+    ts(k, "Label 16", label(16));
+    ts(k, "Kpi 32", figure(32));
+    ts(k, "Delta 16", figure(16, 600));
+    ts(k, "Name 18", code(18, 600));
+    ts(k, "Sub 16", code(16));
+    ts(k, "Cell 18", figure(18, 500));
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 9, right: 14, bottom: 9, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Site 22", color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Link preview");
+    k.flowSheet(sheet, 0, { top: 56, right: 56, bottom: 56, left: 56 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    const card = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Card row" });
+    const words = k.stack(card, { width: 460, gap: 22, name: "Words" });
+    lockup(k, words, { size: 42, style: "Brand 26" });
+    k.text(words, SPANWISE.tagline, { style: "Head 52", color: "text", name: "Headline" });
+    k.text(words, "Observability for platform teams at scale. Every span kept.", { style: "Sub 22", color: "onPaper", name: "Sub" });
+    k.instance(words, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
+    const con = panel(k, card, { width: CON_W, name: "Console" });
+    kpiRow(k, con, [
+      { label: "P99, CHECKOUT", value: "2,340 ms", delta: "\u2191 12.9\xD7 at 14:02", tone: "down", name: "P99 figure" },
+      { label: "DETECTED IN", value: "38 s", delta: "cause: payments-gw", tone: "warn", name: "Detect figure" }
+    ], { labelStyle: "Label 16", figStyle: "Kpi 32", deltaStyle: "Delta 16", figW: 230, pad: [14, 20], ruleH: 120 });
+    k.rect(con, "FILL", 1, "line", { name: "Kpi rule bottom" });
+    const t = servicesTable(k, con, { w: CON_W, rowH: 60, rows: ROWS, cols: ["service", "p99", "trend", "state"], widths: { p99: 110, trend: 120, state: 10 }, styles: { head: "Label 16", name: "Name 18", sub: "Sub 16", fig: "Cell 18" }, pad: 20, headH: 36 });
+    const an = t.rows.find((r) => r.service.anomaly);
+    if (an.glow) k.patch(an.glow, { opacity: 1 });
+    k.patch(an.p99, { characters: "2,340 ms" });
+    k.patch(an.dot, { fills: k.paint("down") });
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 56, right: 64, bottom: 56, left: 64 } });
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 80, right: 80, bottom: 80, left: 80 } });
+        for (const n of kit.named(id, "Card row")) kit.patch(n, { itemSpacing: 56 });
+        for (const n of kit.named(id, "Words")) kit.patch(n, { width: 600 });
+        widenConsole(kit, id, 1600 - 160 - 600 - 56 - CON_W);
+        for (const n of kit.named(id, "Console")) kit.patch(n, { width: 1600 - 160 - 600 - 56 });
+        ts(kit, "Label 18", label(18));
+        ts(kit, "Kpi 40", figure(40));
+        ts(kit, "Delta 19", figure(19, 600));
+        ts(kit, "Name 22", code(22, 600));
+        ts(kit, "Sub 18", code(18));
+        ts(kit, "Cell 22", figure(22, 500));
+        for (const [n, st] of [["Kpi label", "Label 18"], ["Head label", "Label 18"], ["P99 figure", "Kpi 40"], ["Detect figure", "Kpi 40"], ["P99 figure delta", "Delta 19"], ["Detect figure delta", "Delta 19"], ["Service name", "Name 22"], ["Service region", "Sub 18"], ["Row p99", "Cell 22"], ["Anomaly p99", "Cell 22"]]) restyle(kit, id, n, st);
+        const RH = 104;
+        for (const n of kit.named(id, "Table head")) kit.patch(n, { height: 52 });
+        for (const b of kit.named(id, "Table body")) {
+          kit.patch(b, { height: ROWS.length * RH });
+          const rows = kit.node(b).children ?? [];
+          rows.forEach((r, i) => {
+            kit.patch(r, { y: i * RH, height: RH });
+            for (const g of kit.named(r, "Anomaly glow")) kit.patch(g, { height: RH });
+            for (const g of kit.named(r, "Row rule")) kit.patch(g, { y: RH - 1 });
+          });
+        }
+        restyle(kit, id, "Headline", "Head 64");
+        restyle(kit, id, "Sub", "Sub 26");
+      } }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_link_preview_default
+};

package/dist/chunks/chunk-6T2BBUAK.js

@@ -0,0 +1,119 @@
+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 {
+  SPOOL,
+  body,
+  code,
+  deep,
+  display,
+  gradientBrand,
+  lockup,
+  mesh,
+  orbitCam,
+  parallax,
+  plateChip,
+  sitePill,
+  tilted,
+  ts,
+  videoFoot,
+  winStyles
+} from "./chunk-GF56KWKV.js";
+import {
+  presetSafeRect
+} from "./chunk-7XE2CVXC.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-gradient-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Gradient SaaS announcement post";
+var LOOP = 8e3;
+var cues = [
+  { layer: "Site chip", preset: "pulse", at: 4400, params: { duration: 1600, amount: 0.04 } }
+];
+var LAYS = {
+  "ig-post": { x: 72, w: 936, brandY: 64, headY: 150, head: "Head 96", sub: "Sub 30", scene: { x: 180, y: 420, w: 900, h: 660 }, scale: 0.68, mesh: { x: 160, y: 470, w: 960, h: 640 }, footY: 960 },
+  "ig-portrait": { x: 72, w: 936, brandY: 72, headY: 170, head: "Head 104", sub: "Sub 32", scene: { x: 60, y: 520, w: 1020, h: 760 }, scale: 0.8, mesh: { x: 0, y: 580, w: 1080, h: 770 }, footY: 1228 },
+  "ig-story": { x: 140, w: 800, brandY: 260, headY: 360, head: "Head 104", sub: "Sub 32", scene: { x: 0, y: 570, w: 1080, h: 820 }, scale: 1.04, mesh: { x: -120, y: 720, w: 1320, h: 1200 }, footY: 1376 }
+};
+var style_gradient_announcement_default = defineTemplate({
+  id: "social-saas-style-gradient-announcement",
+  meta: {
+    name: NAME,
+    description: "An eight-second looping launch announcement in the gradient and depth look for a video rendering API: the message on the deep ocean ground from the first frame, the product window tilted in 3D space over a warm coral-to-lagoon mesh, the camera swinging round it and back, planes drifting at their own depths, a playhead running and a band of light crossing the glass. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "announcement", "launch", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "developer", "api", "video", "loop", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "launch", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    gradientBrand(k);
+    const st = winStyles(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 22", code(22));
+    ts(k, "Head 96", display(96));
+    ts(k, "Head 104", display(104));
+    ts(k, "Sub 30", body(30, 500));
+    ts(k, "Sub 32", body(32, 500));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", pad: [16, 24] });
+    const sheets = ["ig-post", "ig-portrait", "ig-story"].map((id, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
+      lay(k, sheet, id, st);
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+function lay(k, sheet, id, st) {
+  const L = LAYS[id];
+  k.nameSheet(sheet, `Announcement \xB7 ${preset(id).name}`);
+  k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
+  k.patch(sheet, { clipsContent: true });
+  k.timeline(sheet, { duration: LOOP, fps: 30 });
+  deep(k, sheet, { duration: LOOP });
+  mesh(k, sheet, { ...L.mesh, duration: LOOP });
+  const { width, height } = k.node(sheet);
+  const r = presetSafeRect(id, width, height);
+  const t = tilted(k, sheet, { ...L.scene, width: 860, scale: L.scale, rotateY: -24, rotateX: 11, styles: st, jobs: 3, sweeps: [2600], duration: LOOP, safe: r ? { x: Math.ceil(r.x), y: Math.ceil(r.y), w: Math.floor(r.width), h: Math.floor(r.height) } : void 0 });
+  orbitCam(k, t.scene, { at: 0, until: LOOP / 2, from: -8, to: 8, z0: 40, z1: -60, back: LOOP });
+  parallax(k, t, LOOP, 16);
+  k.animate(t.win.playhead, "translateX", [{ t: 0, v: -276, ease: ease.linear }, { t: LOOP - 300, v: 520, ease: ease.hold }, { t: LOOP - 299, v: -276 }]);
+  const brandRow = k.stack(sheet, { direction: "HORIZONTAL", width: L.w, justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row", absolute: { x: L.x, y: L.brandY } });
+  lockup(k, brandRow, { size: 52, style: "Brand 30" });
+  plateChip(k, brandRow, "Out today", { style: "Kicker 22", name: "Kicker", dot: "primary" });
+  const words = k.stack(sheet, { width: L.w, gap: 20, name: "Words", absolute: { x: L.x, y: L.headY } });
+  k.text(words, `${SPOOL.version} renders
+on the edge.`, { style: L.head, color: "onNight", name: "Headline" });
+  k.text(words, `A one-minute 1080p video in ${SPOOL.render} s. It used to take ${SPOOL.before}.`, { style: L.sub, color: "nightMuted", name: "Sub" });
+  k.instance(sheet, "Site pill", {}, { name: "Site chip", absolute: { x: L.x, y: L.footY } });
+  if (id === "ig-story") videoFoot(k, sheet, L.footY + 110);
+  k.cues(sheet, cues);
+}
+
+export {
+  style_gradient_announcement_default
+};

package/dist/chunks/chunk-6VUGIOJE.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 {
+  MONTHLY,
+  MONTHS,
+  SPOOL,
+  areaPaint,
+  bloomAt,
+  body,
+  code,
+  deep,
+  display,
+  figure,
+  gradientBrand,
+  label,
+  lockup,
+  longShadow,
+  mesh,
+  monthlyArea,
+  monthlyLine,
+  orbitCam,
+  plateChip,
+  rimLight,
+  sitePill,
+  tilted,
+  ts,
+  videoFoot
+} from "./chunk-GF56KWKV.js";
+import {
+  drawOn
+} from "./chunk-FUYBBHPV.js";
+import {
+  presetSafeRect
+} from "./chunk-7XE2CVXC.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-gradient-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Gradient SaaS milestone post";
+var DURATION = 8e3;
+var COUNT = 400;
+var LAND = 3400;
+var P = { w: 860, h: 560 };
+var CH = { w: 760, h: 300 };
+var cues = [
+  { layer: "Figure wrap", preset: "blur-in", at: 0, params: { duration: 800, amount: 24 } },
+  { layer: "Thanks", preset: "words-in", at: LAND, params: { duration: 900 } },
+  { layer: "Chart area", preset: "fade-in", at: LAND - 1400, params: { duration: 1800 } },
+  { layer: "Peak", preset: "pop-in", at: LAND, params: { duration: 500 } },
+  { layer: "Site chip", preset: "pulse", at: 5600, params: { duration: 1400, amount: 0.04 } }
+];
+var counts = [{ layer: "Total", at: COUNT, duration: LAND - COUNT, ease: ease.out("cubic"), counter: { from: SPOOL.before10m, to: SPOOL.total } }];
+var LAYS = {
+  "ig-post": { x: 72, w: 936, brandY: 64, figY: 150, fig: "Figure 156", thanks: "Thanks 30", scene: { x: 120, y: 470, w: 960, h: 600 }, scale: 0.86, mesh: { x: 100, y: 520, w: 1e3, h: 580 }, footY: 980 },
+  "ig-portrait": { x: 72, w: 936, brandY: 72, figY: 170, fig: "Figure 156", thanks: "Thanks 32", scene: { x: 60, y: 560, w: 1020, h: 700 }, scale: 0.98, mesh: { x: 0, y: 620, w: 1080, h: 730 }, footY: 1240 },
+  "ig-story": { x: 140, w: 800, brandY: 260, figY: 370, fig: "Figure 150", thanks: "Thanks 32", scene: { x: 0, y: 610, w: 1080, h: 760 }, scale: 1.04, mesh: { x: -120, y: 760, w: 1320, h: 1160 }, footY: 1376 }
+};
+var style_gradient_milestone_default = defineTemplate({
+  id: "social-saas-style-gradient-milestone",
+  meta: {
+    name: NAME,
+    description: "An eight-second milestone post in the gradient and depth look for a video rendering API: ten million videos counting up on a deep ocean ground while the year's monthly renders draw themselves on a plate tilted in 3D space over a warm coral-to-lagoon mesh. The mesh blooms as the count lands, the last month lights, light crosses the plate and the camera keeps swinging round it. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "stats", "counter", "chart", "build in public", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "developer", "api", "video", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    gradientBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 22", code(22));
+    ts(k, "Figure 156", figure(156, 800));
+    ts(k, "Figure 150", figure(150, 800));
+    ts(k, "Thanks 30", body(30, 500));
+    ts(k, "Thanks 32", body(32, 500));
+    ts(k, "Plate label 20", label(20));
+    ts(k, "Plate big 34", display(34));
+    ts(k, "Axis 20", code(20));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", pad: [16, 24] });
+    const sheets = ["ig-post", "ig-portrait", "ig-story"].map((id, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
+      lay(k, sheet, id);
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+function chartPlate(k, rig) {
+  const plate = k.stack(rig, { width: P.w, height: P.h, fill: "plate", radius: 28, clip: true, padding: { top: 30, right: 50, bottom: 30, left: 50 }, gap: 22, name: "Chart plate", effects: rimLight(k), absolute: { x: 0, y: 0 } });
+  const head = k.stack(plate, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Plate head" });
+  const l = k.stack(head, { width: "HUG", gap: 4, name: "Plate title" });
+  k.text(l, "VIDEOS RENDERED A MONTH", { style: "Plate label 20", color: "plateMuted", autoWidth: true, name: "Plate label" });
+  k.text(l, `${SPOOL.september} in September`, { style: "Plate big 34", color: "onPlate", autoWidth: true, name: "Plate figure" });
+  k.text(head, "2026", { style: "Axis 20", color: "plateMuted", autoWidth: true, name: "Plate year" });
+  const box = k.stack(plate, { width: CH.w, height: CH.h, name: "Chart box" });
+  for (const lv of [0.25, 0.5, 0.75, 1]) k.rect(box, CH.w, 1, k.tint("rim", 0.1), { name: "Chart level", absolute: { x: 0, y: Math.round(CH.h * (1 - lv)) } });
+  k.vector(box, CH.w, CH.h, [monthlyArea(CH.w, CH.h)], areaPaint(k), { name: "Chart area", absolute: { x: 0, y: 0 } });
+  const line = k.vector(box, CH.w, CH.h, [monthlyLine(CH.w, CH.h)], [], { name: "Chart line", absolute: { x: 0, y: 0 }, stroke: { color: "primary", width: 6, cap: "ROUND" } });
+  const py = CH.h - MONTHLY[MONTHLY.length - 1] / 2e3 * CH.h;
+  k.ellipse(box, 28, "primary", { name: "Peak", absolute: { x: CH.w - 14, y: Math.round(py - 14) }, effects: [longShadow(k, 0.5, 6, 18)] });
+  const axis = k.stack(plate, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", width: CH.w, name: "Axis" });
+  for (const m of MONTHS) k.text(axis, m, { style: "Axis 20", color: "plateMuted", autoWidth: true, name: "Axis label" });
+  return { plate, line };
+}
+function lay(k, sheet, id) {
+  const L = LAYS[id];
+  k.nameSheet(sheet, `Milestone \xB7 ${preset(id).name}`);
+  k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
+  k.patch(sheet, { clipsContent: true });
+  k.timeline(sheet, { duration: DURATION, fps: 30 });
+  deep(k, sheet, { duration: DURATION });
+  const glow = mesh(k, sheet, { ...L.mesh, duration: DURATION, phase: 0.8 });
+  bloomAt(k, glow, LAND - 200, 700, 3e3);
+  const { width, height } = k.node(sheet);
+  const r = presetSafeRect(id, width, height);
+  let c;
+  const t = tilted(k, sheet, { ...L.scene, width: P.w, height: P.h, scale: L.scale, rotateY: -20, rotateX: 14, styles: {}, planes: false, sweeps: [LAND + 100], safe: r ? { x: Math.ceil(r.x), y: Math.ceil(r.y), w: Math.floor(r.width), h: Math.floor(r.height) } : void 0, make: (rig) => {
+    c = chartPlate(k, rig);
+    return c.plate;
+  } });
+  orbitCam(k, t.scene, { at: 0, until: DURATION, from: -10, to: 10, z0: 120, z1: -40 });
+  drawOn(k, c.line, COUNT, LAND - COUNT);
+  const brandRow = k.stack(sheet, { direction: "HORIZONTAL", width: L.w, justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row", absolute: { x: L.x, y: L.brandY } });
+  lockup(k, brandRow, { size: 52, style: "Brand 30" });
+  plateChip(k, brandRow, "Milestone \xB7 Sept 2026", { style: "Kicker 22", name: "Kicker", dot: "primary" });
+  const words = k.stack(sheet, { width: L.w, gap: 14, name: "Words", absolute: { x: L.x, y: L.figY } });
+  const fw = k.stack(words, { width: L.w, name: "Figure wrap" });
+  k.text(fw, "10,000,000", { style: L.fig, color: "onNight", width: L.w, name: "Total" });
+  k.text(words, "videos rendered. Thank you to the 2,300 teams who sent them.", { style: L.thanks, color: "nightMuted", name: "Thanks" });
+  k.instance(sheet, "Site pill", {}, { name: "Site chip", absolute: { x: L.x, y: L.footY } });
+  if (id === "ig-story") videoFoot(k, sheet, L.footY + 110);
+  k.counts(sheet, counts);
+  k.cues(sheet, cues);
+}
+
+export {
+  style_gradient_milestone_default
+};

package/dist/chunks/chunk-6WM3ZB6B.js

@@ -0,0 +1,152 @@
+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 {
+  echo,
+  grain,
+  marquee,
+  offset,
+  psyBrand,
+  restage,
+  stage,
+  throb
+} from "./chunk-VD37UZ4R.js";
+import {
+  background
+} from "./chunk-MA3BWM6M.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  bed
+} from "./chunk-S7PL2DU7.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/psychedelic-gig-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("psychRock", 32);
+var beat = MUSIC.beat;
+var DURATION = MUSIC.duration;
+var poster = (h, y, hills, o = {}) => ({
+  w: 1080,
+  h,
+  u: 1,
+  loopMs: DURATION,
+  rays: { x: 540, y, size: 2700, rays: 16, twist: 0.8, opacity: 0.55 },
+  sun: { x: 540, y, size: 980 },
+  eye: { x: 540, y, w: 440 },
+  hills,
+  moires: [{ x: 150, y: 120, size: 560, color: "orange", opacity: 0.55 }],
+  mushrooms: [{ x: -24, y: hills - 170, w: 164 }, { x: 944, y: hills - 120, w: 128, cap: "orange" }, { x: 100, y: hills - 40, w: 84, cap: "mustard", spot: "brown" }],
+  blobs: [
+    { x: 64, y: y - 250, r: 86, color: "magenta" },
+    { x: 120, y: y - 110, r: 50, color: "magenta" },
+    { x: 1020, y: y + 130, r: 88, color: "orange" },
+    { x: 990, y: y + 280, r: 46, color: "orange" },
+    { x: 56, y: y + 250, r: 56, color: "mustard" },
+    { x: 1030, y: y - 320, r: 58, color: "olive" }
+  ],
+  flowers: [{ x: 968, y: y - 120, size: 180 }, { x: 96, y: y + 80, size: 150, petal: "mustard", heart: "magenta" }, { x: 930, y: 130, size: 170, heart: "mustard" }],
+  ...o
+});
+var STORY = poster(1920, 900, 1400);
+var swaps = [
+  { layer: "Caption", words: ["Hullabaloo 2.0 plays one night only: Tuesday 14 October.", "On the bill: Door Mode, Split Payouts and Fair Resale.", "Sell the room, scan the queue, pay the band by midnight.", "Doors at 7 pm. A free upgrade for every venue on 1.x."], at: beat(3), hold: 2300, stagger: 45, in: 350, out: 250, unit: "word", rise: 26 }
+];
+var cues = [
+  { layer: "Top", preset: "pop-in", at: 0, params: { duration: 450 } },
+  { layer: "Eye", preset: "scale-in", at: beat(1), params: { duration: 500 } },
+  { layer: "Flower", preset: "pop-in", at: beat(1), params: { duration: 450 }, stagger: { delay: 130 } },
+  { layer: "Mushroom", preset: "rise-in", at: beat(2), params: { duration: 600 }, stagger: { delay: 130 } },
+  { layer: "Captions", preset: "rise-in", at: beat(2), params: { duration: 600 } },
+  { layer: "Call", preset: "pop-in", at: beat(6), params: { duration: 500 } },
+  { layer: "Site", preset: "fade-in", at: beat(7), params: { duration: 600 } },
+  { layer: "Call", preset: "pulse", at: beat(24), params: { duration: 900, amount: 0.07 } },
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 900, amount: 0.07 } }
+];
+var psychedelic_gig_reel_default = defineTemplate({
+  id: "motion-psychedelic-gig-reel",
+  meta: {
+    name: "Psychedelic gig poster reel",
+    description: "A 17-second launch reel as a 1970s concert poster: \u201COne night only: v2.0\u201D in heavy capitals on a plate wrapped in bands of colour, over a sun of concentric bands that ripple outward round a watching eye, with turning rays, creeping lava, lava-lamp blobs, daisies and mushrooms. The story is burned in as captions and the button lands on the beat. Cut to a 112 BPM loop (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "psychedelic", "1970s", "concert poster", "gig poster", "retro", "op art", "launch", "release", "version", "saas", "reel", "captions", "music", "audio", "events"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement", "event"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Psychedelic gig poster reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    psyBrand(k, { headline: "One night\nonly: v2.0" });
+    k.textStyle("Eyebrow 28", { size: 28, fontWeight: 800, letterSpacing: 5, lineHeight: 36, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Display 112", { size: 112, fontWeight: 900, letterSpacing: -4.5, lineHeight: 100, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Display 124", { size: 124, fontWeight: 900, letterSpacing: -5, lineHeight: 110, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 700, letterSpacing: -0.5, lineHeight: 46, textAlign: "CENTER" });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 39, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 32, textAlign: "CENTER" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Get on the list", pad: [22, 48] });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Gig poster reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    background(k, sheet, "paper", { effects: grain() });
+    stage(k, sheet, STORY);
+    const top = marquee(k, sheet, { name: "Top", bands: ["ink", "mustard", "orange"], band: 12, fill: "primary", radius: 72, pad: { top: 30, right: 20, bottom: 40, left: 20 }, gap: 10, align: "CENTER", effects: [offset(14)] });
+    k.text(top, "{{brand.name}} presents", { style: "Eyebrow 28", color: "onPrimary", name: "Eyebrow" });
+    k.text(top, "{{brand.headline}}", { style: "Display 112", color: "onPrimary", name: "Headline", effects: echo(k, ["ink"], 7) });
+    const foot = k.stack(sheet, { gap: 22, align: "CENTER", name: "Foot" });
+    const plate = marquee(k, foot, { name: "Captions", bands: ["ink", "mustard"], band: 9, fill: "card", radius: 44, pad: { top: 22, right: 36, bottom: 24, left: 36 }, align: "CENTER", effects: [offset(10)] });
+    k.text(plate, swaps[0].words[0], { style: "Caption 38", color: "onCard", name: "Caption" });
+    k.instance(foot, "Button", { Label: "Get on the list" }, { name: "Call" });
+    const site = k.stack(foot, { width: "HUG", fill: "cream", radius: 8, padding: { top: 6, right: 16, bottom: 6, left: 16 }, name: "Site" });
+    k.text(site, "Tue 14 Oct \xB7 {{brand.site}}/2", { style: "Site 24", color: "ink", autoWidth: true, name: "Site words" });
+    if (swapTimes(swaps[0]).at(-1).gone > DURATION) throw new Error("psychedelic reel: the captions run past the music");
+    throb(k, sheet, "Headline", beat(2), beat(2), Math.floor((DURATION - beat(2)) / beat(2)), 0.03);
+    throb(k, sheet, "Pupil", beat(2), beat(1), Math.floor((DURATION - beat(2)) / beat(1)), 0.2);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 14 });
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 32");
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 124");
+        restage(kit, id, poster(1080, 560, 900, { flowers: [{ x: 968, y: 440, size: 180 }, { x: 96, y: 640, size: 150 }, { x: 1500, y: 130, size: 170 }], moires: [{ x: 1500, y: 120, size: 560 }] }));
+      },
+      portrait: (kit, id) => {
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 124");
+        restage(kit, id, poster(1350, 700, 1150, { flowers: [{ x: 968, y: 580, size: 180 }, { x: 96, y: 780, size: 150 }, { x: 1500, y: 130, size: 170 }], moires: [{ x: 1500, y: 120, size: 560 }] }));
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  psychedelic_gig_reel_default
+};

package/dist/chunks/chunk-6XM63VUB.js

@@ -0,0 +1,77 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  standardStore
+} from "./chunk-55E7WKF6.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/web/shop-circuit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PRODUCTS = [
+  { title: "Aria wireless headphones", handle: "aria-wireless-headphones", price: "$349.00", image: "ci-headphones", tags: "headphones", description: "Planar drivers, 40 hours of battery and noise cancelling you can turn down to a hush." },
+  { title: "Aria buds", handle: "aria-buds", price: "$199.00", image: "ci-earbuds", tags: "headphones", description: "Six millimetre graphene drivers and a case that charges on any pad." },
+  { title: "Pulse speaker", handle: "pulse-speaker", price: "$149.00", image: "ci-speaker", tags: "speakers", description: "360 degrees of sound from a can-sized speaker, waterproof to a metre." },
+  { title: "Groove turntable", handle: "groove-turntable", price: "$429.00", image: "ci-turntable", tags: "hifi", description: "A belt-drive turntable with a built-in phono stage and a carbon tonearm." },
+  { title: "Node desktop amp", handle: "node-desktop-amp", price: "$259.00", image: "ci-dac", tags: "hifi", description: "A balanced headphone amplifier and DAC with a knob that feels like a safe dial." },
+  { title: "Braided cable", handle: "braided-cable", price: "$29.00", image: "ci-cable", tags: "accessories", description: "A 1.5 metre braided cable, 3.5 mm to 4.4 mm balanced." }
+];
+var shop_circuit_default = defineTemplate({
+  id: "web-shop-circuit",
+  meta: {
+    name: "Circuit audio store",
+    description: "A hi-fi and audio electronics store, dark navy with an electric blue, a modern grotesk and mono details: a split hero, lively entrances, framed cards, a carousel, categories, a page per product with add to cart and a cart with checkout. Publishes as a Next.js Commerce store selling your Shopify products. Desktop, tablet and phone",
+    category: "storefront",
+    tags: ["ecommerce", "shop", "store", "storefront", "shopify", "next.js commerce", "product page", "cart", "electronics", "audio", "headphones", "tech", "dark", "modern", "website", "responsive", "animation"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "sale"],
+    created: "2026-10-09",
+    updated: "2026-10-09"
+  },
+  breakpoints: true,
+  build: () => standardStore({
+    name: "Circuit audio store",
+    brand: { paper: "#0B1020", text: "#E9EEFA", onPaper: "#8A95B3", primary: "#2C62D9", onPrimary: "#FFFFFF", card: "#121A30", onCard: "#E9EEFA", cardMuted: "#8A95B3", tint: "#0F162A", onTint: "#E9EEFA", tintMuted: "#8A95B3", line: "#1F2A47" },
+    fields: { name: "Circuit Audio", email: "support@circuit.audio" },
+    styles: {
+      "Wordmark 22": { size: 22, fontFamily: "Space Grotesk", fontWeight: 700, letterSpacing: -0.4, lineHeight: 28 },
+      "Nav 14": { size: 14, fontFamily: "JetBrains Mono", fontWeight: 500, lineHeight: 20 },
+      "Display 76": { size: 76, fontFamily: "Space Grotesk", fontWeight: 700, letterSpacing: -2.4, lineHeight: 78 },
+      "Display 44": { size: 44, fontFamily: "Space Grotesk", fontWeight: 700, letterSpacing: -1, lineHeight: 48 },
+      "Section 32": { size: 32, fontFamily: "Space Grotesk", fontWeight: 600, letterSpacing: -0.6, lineHeight: 38 },
+      "Title 16": { size: 16, fontFamily: "Space Grotesk", fontWeight: 600, lineHeight: 22 },
+      "Price 14": { size: 14, fontFamily: "JetBrains Mono", fontWeight: 500, lineHeight: 20 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Small 13": { size: 13, fontFamily: "JetBrains Mono", fontWeight: 500, lineHeight: 18 },
+      "Button 15": { size: 15, fontFamily: "Space Grotesk", fontWeight: 600, lineHeight: 22 }
+    },
+    type: { wordmark: "Wordmark 22", nav: "Nav 14", display: "Display 76", displaySmall: "Display 44", section: "Section 32", title: "Title 16", price: "Price 14", body: "Body 17", small: "Small 13", button: "Button 15" },
+    products: PRODUCTS,
+    categories: [{ title: "Headphones", handle: "headphones", description: "Over-ear and in-ear, wired and not." }, { title: "Speakers", handle: "speakers", description: "Small boxes that fill rooms." }, { title: "Hi-fi", handle: "hifi", description: "Turntables, amps and DACs." }, { title: "Accessories", handle: "accessories", description: "Cables, cases and stands." }],
+    carousel: "The whole line-up",
+    menu: [["Shop all", "/search"], ["Headphones", "/search/headphones"], ["Hi-fi", "/search/hifi"]],
+    hero: { kicker: "NEW \xB7 ARIA WIRELESS", headline: "Hear the room the record was made in", lead: "Planar-magnetic drivers, forty hours of battery and noise cancelling tuned by the engineers who mix the records.", cta: "Shop headphones", image: "ci-hero", layout: "split" },
+    story: { title: "Measured, then listened to", body: "Every product is measured in an anechoic chamber and then lived with for a month by people who care more about music than numbers.", image: "ci-turntable" },
+    promise: ["Free 2-day shipping \xB7 60-night trial", "Two-year warranty, extendable to five"],
+    newsletter: { title: "Signal", body: "New gear, firmware and the records we test with. Twice a month." },
+    legal: "Prices in USD, sales tax at checkout.",
+    card: "framed",
+    motion: "lively",
+    float: true,
+    ratio: 1,
+    radius: 14
+  })
+});
+
+export {
+  shop_circuit_default
+};