@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-O746RQDR.js

@@ -0,0 +1,161 @@
+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 {
+  PARTS,
+  STENCIL,
+  blueprintBrand,
+  dimension,
+  drawingSheet,
+  extend,
+  fitSheet,
+  revStamp,
+  shaft,
+  titleBlock
+} from "./chunk-5ZHYGKE4.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  appear,
+  drawOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  board,
+  reboard
+} from "./chunk-LWSZATOL.js";
+import {
+  outro,
+  pill,
+  postVariants
+} 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/blueprint-dimension-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8800;
+var OUT = 7800;
+var STATIONS = [{ w: 3, h: 0.62 }, { w: 2.3, h: 0.86 }, { w: 1.9, h: 0.5 }, { w: 3.2, h: 0.74 }, { w: 4.6, h: 1 }];
+var BOARD = { width: 952, height: 600 };
+var SHAFT = { y: 150, height: 290 };
+var nth = (name) => PARTS.map((_, i) => `${name} ${i + 1}`);
+var counts = [
+  ...PARTS.map((p, i) => ({ layer: `Seg figure ${i + 1}`, at: 1700 + i * 260, duration: 800, counter: { from: 0, to: p.ms, decimals: 1 } })),
+  { layer: "Total figure", at: 3500, duration: 1400, counter: { from: 38, to: 19, suffix: " ms p99" } }
+];
+var cues = [
+  { layer: "Strip", preset: "fade-in", at: 0, params: { duration: 400 } },
+  // The board's own parts draw themselves in; the board fades in under them so the outro can take it away whole.
+  { layer: "Board", preset: "fade-in", at: 0, params: { duration: 200 } },
+  { layer: nth("Balloon"), preset: "pop-in", at: 900, params: { duration: 300 }, stagger: { delay: 150, order: "selection" } },
+  { layer: nth("Station"), preset: "fade-in", at: 1e3, params: { duration: 300 }, stagger: { delay: 150, order: "selection" } },
+  { layer: "Note", preset: "rise-in", at: 3300, params: { duration: 500 } },
+  { layer: "Stamp", preset: "pop-in", at: 5e3, params: { duration: 260, amount: 0.5 } },
+  { layer: "Shaft", preset: "shake", at: 5090, params: { duration: 380, distance: 10 } },
+  { layer: "Call", preset: "pulse", at: 5900, params: { duration: 700, amount: 0.06 } },
+  outro(["Strip", "Board", "Note", "Stamp"], OUT, { gap: 80 })
+];
+var blueprint_dimension_post_default = defineTemplate({
+  id: "motion-blueprint-dimension-post",
+  meta: {
+    name: "Blueprint dimension post (animated)",
+    description: "A performance or changelog post drawn as an engineering section: the product\u2019s five parts as a hatched, stepped shaft whose outline draws itself, the request running down its bore, numbered balloons, a chain of dimensions that extend while each part\u2019s milliseconds count up, an overall dimension counting 38 ms down to 19, and a REV B stamp, held and then lifted off so it loops. Under nine seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "blueprint", "engineering drawing", "cyanotype", "section", "hatching", "dimension", "counter", "performance", "latency", "api", "infrastructure", "changelog", "saas", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["changelog", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Blueprint dimension post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    blueprintBrand(k, { hook: "Half the latency. Same API." });
+    k.textStyle("Strip 20", { ...STENCIL, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 26 });
+    k.textStyle("Hook 76", { ...STENCIL, size: 76, fontWeight: 800, letterSpacing: -3, lineHeight: 76 });
+    k.textStyle("Hook 62", { ...STENCIL, size: 62, fontWeight: 800, letterSpacing: -2.4, lineHeight: 64 });
+    k.textStyle("Balloon 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Station 18", { ...STENCIL, size: 18, fontWeight: 800, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Dim 20", { ...MONO, size: 20, fontWeight: 800, lineHeight: 24 });
+    k.textStyle("Dim 30", { ...STENCIL, size: 30, fontWeight: 800, lineHeight: 34 });
+    k.textStyle("Note 26", { size: 26, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("Cell 16", { ...STENCIL, size: 16, fontWeight: 700, letterSpacing: 1.2, lineHeight: 20 });
+    k.textStyle("Cell 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Stamp 46", { ...STENCIL, size: 46, fontWeight: 800, letterSpacing: 2, lineHeight: 48 });
+    k.textStyle("Stamp 16", { ...STENCIL, size: 16, fontWeight: 800, letterSpacing: 1.5, lineHeight: 20 });
+    k.textStyle("Button 22", { ...STENCIL, size: 22, fontWeight: 800, letterSpacing: 0.5, lineHeight: 28 });
+    pill(k, "Button", { fill: "text", ink: "paper", style: "Button 22", label: "Read Rev B", pad: [22, 22], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 16, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    drawingSheet(k, sheet, 1080, 1080);
+    const top = k.stack(sheet, { gap: 10, name: "Top" });
+    const strip = k.stack(top, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", name: "Strip" });
+    k.text(strip, "{{brand.name}} \xB7 section A\u2013A \xB7 the request path", { style: "Strip 20", color: "onPaper", name: "Strip name" });
+    k.text(strip, "Sheet 2 of 4", { style: "Strip 20", color: "onPaper", autoWidth: true, name: "Strip sheet" });
+    k.text(top, "{{brand.hook}}", { style: "Hook 76", color: "text", name: "Hook" });
+    revStamp(k, top, { big: "Rev B", small: "Released 02 Oct 2026", bigStyle: "Stamp 46", smallStyle: "Stamp 16", turn: -7, absolute: { x: 610, y: 124 } });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "CENTER", name: "Drawing row" });
+    const bd = board(k, row, BOARD.width, BOARD.height, 1, "Board");
+    const sh = shaft(k, bd, BOARD.width, SHAFT.height, { at: { x: 0, y: SHAFT.y }, stations: STATIONS });
+    const total = dimension(k, bd, { at: { x: sh.xs[0], y: 34 }, length: BOARD.width - 2 * sh.xs[0], ext: -70, label: "19 ms p99", style: "Dim 30", labelWidth: 230, labelHeight: 44, name: "Total dim", labelName: "Total figure", weight: 2.5 });
+    const segs = PARTS.map((p, i) => {
+      const cx = sh.xs[i] + sh.ws[i] / 2;
+      const balloon = k.stack(bd, { width: 44, height: 44, radius: 22, fill: "paper", stroke: { color: "text", width: 2.5, align: "INSIDE" }, align: "CENTER", justify: "CENTER", name: `Balloon ${i + 1}`, absolute: { x: cx - 22, y: 84 } });
+      k.text(balloon, String(i + 1), { style: "Balloon 22", color: "text", autoWidth: true, name: "Balloon number" });
+      k.vector(bd, 4, 40, [{ closed: false, points: [{ x: 2, y: 0 }, { x: 2, y: SHAFT.y + sh.tops[i] - 128 + 14 }] }], "text", { name: "Balloon leader", strokeWidth: 2, absolute: { x: cx - 2, y: 128 } });
+      k.text(bd, p.name, { style: "Station 18", color: "text", width: Math.max(96, sh.ws[i]), align: "CENTER", name: `Station ${i + 1}`, absolute: { x: cx - Math.max(96, sh.ws[i]) / 2, y: 536 } });
+      return dimension(k, bd, { at: { x: sh.xs[i], y: 492 }, length: sh.ws[i], ext: 40, label: p.ms.toFixed(1), style: "Dim 20", labelWidth: 54, labelHeight: 28, name: "Seg dim", labelName: `Seg figure ${i + 1}` });
+    });
+    const bottom = k.stack(sheet, { gap: 16, name: "Bottom" });
+    k.text(bottom, "Rev B rebuilt the router. That one part went from 28.3 ms to 9.3.", { style: "Note 26", color: "onPaper", name: "Note" });
+    const foot = k.stack(bottom, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Foot" });
+    titleBlock(k, foot, [{ label: "Drawing", value: "{{brand.site}}/rev-b" }, { label: "Units", value: "ms, p99", width: 150 }, { label: "Rev", value: "B", width: 80, fill: "primary", name: "Rev cell" }], { label: "Cell 16", value: "Cell 22", height: 72 });
+    k.instance(foot, "Button", { Label: "Read Rev B" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    drawOn(k, sh.edges, 0, 1100);
+    for (const name of ["Shaft hatch", "Shaft hatch back", "Shaft fittings"]) for (const id of k.named(sh.id, name)) appear(k, id, 700, 500, k.node(id).opacity ?? 1);
+    appear(k, sh.flow, 500, 60);
+    drawOn(k, sh.flow, 500, 1500);
+    segs.forEach((d, i) => extend(k, d, 1600 + i * 260, 500));
+    extend(k, total, 3300, 800);
+    const refit = (kit, id) => {
+      const f = kit.node(id);
+      fitSheet(kit, id, f.width, f.height);
+    };
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        reboard(kit, id, "Board", 0.98);
+        refit(kit, id);
+      },
+      vertical: (kit, id) => {
+        reboard(kit, id, "Board", 0.84);
+        for (const n of kit.named(id, "Hook")) kit.restyle(n, "Hook 62");
+        for (const n of kit.named(id, "Stamp")) kit.patch(n, { x: 470, y: 112 });
+        refit(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  blueprint_dimension_post_default
+};

package/dist/chunks/chunk-OCKLF4F3.js

@@ -0,0 +1,151 @@
+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 {
+  bar,
+  burst,
+  card,
+  ping,
+  saasUi,
+  tickMark
+} from "./chunk-WWPZKRTJ.js";
+import {
+  E,
+  arc,
+  roundRect,
+  sparkle
+} from "./chunk-UCGZ6DEK.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/lottie/saas-ui-dashboard-hero.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var OUT = 5150;
+function enter(l, id, t, dy = 34) {
+  const out = OUT + t % 500 * 0.5;
+  l.keys(id, "translateY", [[0, dy, E.hold], [t, dy, E.out], [t + 620, 0, E.hold], [out, 0, E.in], [out + 380, dy * 0.6, E.hold], [out + 480, dy, E.hold]]);
+  l.opacity(id, [[0, 0, E.hold], [t, 0, E.out], [t + 340, 1, E.hold], [out, 1, E.in], [out + 380, 0, E.hold]]);
+  return id;
+}
+var saas_ui_dashboard_hero_default = saasUi({
+  slug: "dashboard-hero",
+  role: "hero",
+  size: "hero",
+  duration: 6e3,
+  loop: true,
+  ground: "paper",
+  title: "dashboard hero loop",
+  description: "A landing-page hero for a SaaS product: a dashboard assembles itself in its window \u2014 the sidebar, three figures, a revenue line that draws, bars that grow, a goal ring that closes \u2014 then a payment toast and a new-customer card land over its edges, it idles, clears and builds again \u2014 a six-second seamless loop, 1600\xD7900",
+  useCases: ["launch"],
+  tags: ["dashboard", "landing page", "analytics", "success"],
+  build(l) {
+    const k = l.k;
+    l.circle(l.sheet, 420, 360, 560, [k.gradient({ from: "accent", to: "accent", kind: "RADIAL", fromOpacity: 0.22, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Light" });
+    l.circle(l.sheet, 1260, 640, 520, [k.gradient({ from: "success", to: "success", kind: "RADIAL", fromOpacity: 0.16, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Light" });
+    const drift = (id, amp, shift) => l.keys(id, "translateY", [[0, 0, E.inOut], [1500 + shift, -amp, E.inOut], [3e3 + shift, 0, E.inOut], [4500 + shift, amp, E.inOut], [6e3, 0]]);
+    drift(l.ring(l.sheet, 150, 190, 34, "accent", 10, { name: "Loop", opacity: 0.35 }), 18, 0);
+    drift(l.circle(l.sheet, 1486, 330, 22, "gold", { name: "Dot" }), 14, 400);
+    drift(l.circle(l.sheet, 118, 742, 14, "success", { name: "Dot" }), 12, -300);
+    const star = l.shape(l.sheet, sparkle(1462, 760, 34), "accent", { name: "Sparkle", opacity: 0.6 });
+    l.keys(star, "rotation", [[0, 0, E.inOut], [3e3, 90, E.inOut], [6e3, 180]]);
+    const win = card(l, l.sheet, 250, 110, 1100, 680, "Window", 36);
+    l.keys(win, "translateY", [[0, 0, E.inOut], [3e3, -10, E.inOut], [6e3, 0]]);
+    for (let i = 0; i < 3; i++) l.circle(win, 40 + i * 28, 36, 8, ["warn", "gold", "success"][i], { name: "Window dot" });
+    l.rect(win, 380, 20, 340, 32, "paper", { radius: 16, name: "Address" });
+    bar(l, win, 0, 70, 1100, 2, "line", { name: "Window rule" });
+    const main = roundRect(220, 72, 878, 606, 34);
+    l.shape(win, [{ x: 220, y: 72 }, { x: 1098, y: 72 }, main[3], main[4], { x: 220, y: 678 }], "paper", { name: "Main ground" });
+    l.rect(win, 219, 72, 2, 606, "line", { name: "Sidebar rule" });
+    l.rect(win, 28, 100, 44, 44, "accent", { radius: 14, name: "Logo" });
+    l.shape(win, sparkle(50, 122, 14), "white", { name: "Logo mark" });
+    bar(l, win, 86, 114, 92, 16, "ink", { name: "Workspace" });
+    for (let i = 0; i < 6; i++) {
+      const item = l.box(win, 20, 176 + i * 54, 180, 42, "Nav item");
+      if (i === 0) l.rect(item, 0, 0, 180, 42, "soft", { radius: 14, name: "Nav active" });
+      l.rect(item, 12, 11, 20, 20, i === 0 ? "accent" : "mute", { radius: 7, name: "Nav icon" });
+      bar(l, item, 44, 15, [84, 64, 96, 72, 88, 56][i], 12, i === 0 ? "accent" : "mute", { name: "Nav label" });
+      const t = 150 + i * 70;
+      l.keys(item, "translateX", [[0, -26, E.hold], [t, -26, E.out], [t + 520, 0, E.hold], [OUT + i * 30, 0, E.in], [OUT + i * 30 + 360, -26, E.hold]]);
+      l.opacity(item, [[0, 0, E.hold], [t, 0, E.out], [t + 300, 1, E.hold], [OUT + i * 30, 1, E.in], [OUT + i * 30 + 360, 0, E.hold]]);
+    }
+    for (let i = 0; i < 3; i++) {
+      const kpi = l.box(win, 252 + i * 276, 104, 252, 132, "Figure", { fill: "surface", radius: 24, stroke: { color: "line", width: 2 } });
+      bar(l, kpi, 24, 26, [88, 104, 72][i], 12, "mute", { name: "Figure label" });
+      bar(l, kpi, 24, 56, [132, 108, 120][i], 28, "ink", { name: "Figure value" });
+      l.rect(kpi, 24, 98, 62, 20, i === 1 ? "soft" : "success", { radius: 10, name: "Figure change", opacity: i === 1 ? 1 : 0.18 });
+      bar(l, kpi, 34, 104, 42, 8, i === 1 ? "accent" : "success", { name: "Figure change value" });
+      const sp = l.line(kpi, [[168, 104], [186, 92], [200, 98], [216, 76], [230, 82]].map(([x, y]) => [x, i === 1 ? 180 - y : y]), i === 1 ? "accent" : "success", 5, { name: "Figure trend" });
+      l.keys(sp, "trim.end", [[0, 0, E.hold], [800 + i * 140, 0, E.out], [1500 + i * 140, 1, E.hold], [OUT + 500, 0, E.hold]]);
+      enter(l, kpi, 500 + i * 140);
+    }
+    const chart = l.box(win, 252, 264, 528, 384, "Revenue", { fill: "surface", radius: 24, stroke: { color: "line", width: 2 } });
+    bar(l, chart, 28, 30, 120, 16, "ink", { name: "Chart title" });
+    l.rect(chart, 392, 22, 108, 32, "paper", { radius: 16, name: "Chart range" });
+    for (let i = 0; i < 4; i++) bar(l, chart, 28, 104 + i * 68, 472, 3, "line", { name: "Gridline" });
+    const pts = [[28, 300], [102, 276], [176, 288], [250, 226], [324, 238], [398, 164], [500, 110]];
+    const area = l.shape(chart, [...pts, [500, 308], [28, 308]], "soft", { name: "Chart area", opacity: 0.75 });
+    l.pivot(area, 0.5, 1);
+    l.keys(area, "scaleY", [[0, 0, E.hold], [1900, 0, E.out], [2700, 1, E.hold], [OUT + 500, 0, E.hold]]);
+    const line = l.line(chart, pts, "accent", 8, { name: "Chart line" });
+    l.keys(line, "trim.end", [[0, 0, E.hold], [1200, 0, E.inOut], [2400, 1, E.hold], [OUT + 500, 0, E.hold]]);
+    pts.forEach(([x, y], i) => {
+      if (!i) return;
+      const t = 1200 + 1200 * (0.1 + 0.9 * (x - 28) / 472);
+      const d = l.circle(chart, x, y, 9, i === pts.length - 1 ? "accent" : "surface", { name: "Chart point", stroke: { color: "accent", width: 5 } });
+      l.scale(d, [[0, 0, E.hold], [t, 0, E.pop], [t + 300, 1, E.hold], [OUT + 500, 0, E.hold]]);
+    });
+    for (const t of [2500, 3900]) {
+      const halo = l.circle(win, 252 + 500, 264 + 110, 20, "accent", { name: "Latest halo", opacity: 0 });
+      l.scale(halo, [[0, 0.6, E.hold], [t, 0.6, E.out], [t + 1e3, 2, E.hold]]);
+      l.opacity(halo, [[0, 0, E.hold], [t, 0, E.out], [t + 80, 0.4, E.in], [t + 1e3, 0, E.hold]]);
+    }
+    enter(l, chart, 900);
+    const side = l.box(win, 804, 264, 252, 384, "Goal", { fill: "surface", radius: 24, stroke: { color: "line", width: 2 } });
+    bar(l, side, 28, 30, 96, 16, "ink", { name: "Goal title" });
+    l.ring(side, 126, 146, 62, "line", 18, { name: "Goal track" });
+    const goal = l.line(side, arc(126, 146, 62, 0, 360), "success", 18, { name: "Goal ring" });
+    l.k.patch(goal, { trim: { start: 0, end: 0.82, offset: 0 } });
+    l.keys(goal, "trim.end", [[0, 0, E.hold], [1500, 0, E.inOut], [2700, 0.82, E.hold], [OUT + 500, 0, E.hold]]);
+    bar(l, side, 100, 134, 52, 24, "ink", { name: "Goal value" });
+    const heights = [44, 70, 56, 92, 76, 108, 60];
+    heights.forEach((h, i) => {
+      const b = l.rect(side, 30 + i * 28, 344 - h, 18, h, i === 5 ? "accent" : "soft", { radius: 7, name: "Day" });
+      l.pivot(b, 0.5, 1);
+      const t = 1700 + i * 80;
+      l.keys(b, "scaleY", [[0, 0, E.hold], [t, 0, E.pop], [t + 520, 1, E.hold], [OUT + 500, 0, E.hold]]);
+    });
+    enter(l, side, 1040);
+    const toast = card(l, l.sheet, 1196, 74, 348, 116, "Payment received", 30);
+    ping(l, toast, 58, 58, 30, "success", 3e3, { to: 1.9 });
+    l.circle(toast, 58, 58, 32, "success", { name: "Toast disc" });
+    const tk = tickMark(l, toast, 58, 58, 1.7, "white", 9);
+    l.keys(tk, "trim.end", [[0, 0, E.hold], [2950, 0, E.out], [3300, 1, E.hold], [OUT + 500, 0, E.hold]]);
+    bar(l, toast, 110, 36, 168, 16, "ink", { name: "Toast title" });
+    bar(l, toast, 110, 66, 112, 12, "mute", { name: "Toast detail" });
+    const float = (id, t, from, shift) => {
+      l.pivot(id, from > 0 ? 0 : 1, 0.5);
+      l.keys(id, "translateX", [[0, from, E.hold], [t, from, E.out], [t + 620, 0, E.hold], [OUT + 100, 0, E.in], [OUT + 480, from, E.hold]]);
+      l.scale(id, [[0, 0, E.hold], [t, 0, E.pop], [t + 520, 1, E.hold], [OUT + 100, 1, E.in], [OUT + 480, 0, E.hold]]);
+      const y = [[0, 0, E.hold], [t + 600, 0, E.inOut], [t + 1300 + shift, -12, E.inOut], [t + 2e3 + shift, 0, E.hold]];
+      l.keys(id, "translateY", y);
+    };
+    float(toast, 2600, 120, 0);
+    burst(l, l.sheet, 1254, 132, { n: 8, r0: 44, r1: 104, t: 3050, size: 7, start: 10 });
+    const cust = card(l, l.sheet, 96, 560, 316, 132, "New customer", 30);
+    l.circle(cust, 62, 66, 34, "gold", { name: "Avatar" });
+    l.circle(cust, 62, 56, 12, "white", { name: "Avatar head" });
+    l.shape(cust, [{ x: 40, y: 92 }, { x: 62, y: 74, handleIn: { x: 44, y: 74 }, handleOut: { x: 80, y: 74 } }, { x: 84, y: 92 }, { x: 62, y: 100, handleIn: { x: 76, y: 99 }, handleOut: { x: 48, y: 99 } }], "white", { name: "Avatar shoulders" });
+    bar(l, cust, 116, 40, 132, 16, "ink", { name: "Customer name" });
+    bar(l, cust, 116, 70, 88, 12, "mute", { name: "Customer plan" });
+    l.rect(cust, 214, 64, 70, 24, "soft", { radius: 12, name: "Plan badge" });
+    float(cust, 3e3, -120, 100);
+  }
+});
+
+export {
+  saas_ui_dashboard_hero_default
+};

package/dist/chunks/chunk-OCN4J22F.js

@@ -0,0 +1,147 @@
+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 {
+  PANE_ART,
+  aurora,
+  body,
+  chip,
+  code,
+  display,
+  figure,
+  fitAurora,
+  float,
+  glassBrand,
+  label,
+  lockup,
+  pane,
+  paneArt,
+  passThrough,
+  sheen,
+  sitePill,
+  surface,
+  ts
+} from "./chunk-F7UFJWUM.js";
+import {
+  portraitSlot
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  board,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  outro,
+  postVariants
+} 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/style-glass-testimonial.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Glass SaaS testimonial post";
+var DURATION = 9e3;
+var QUOTE = '"Our refund agent tried to send $48,200 in one afternoon. Vitrine stopped every call over $500 and asked us in Slack. We lost nothing."';
+var WORDS_AT = 500;
+var WORDS_LEN = 3600;
+var LANDED = WORDS_AT + WORDS_LEN;
+var cues = [
+  { layer: "Quote plate", preset: "blur-in", at: 0, params: { duration: 1e3, amount: 24 } },
+  { layer: "Quote", preset: "words-in", at: WORDS_AT, params: { duration: WORDS_LEN } },
+  { layer: "Person", preset: "blur-in", at: LANDED - 400, params: { duration: 1200, amount: 20 } },
+  { layer: "Kept plate", preset: "rise-in", at: LANDED + 200, params: { duration: 1e3, distance: 20 } },
+  // The glass clears again before the end, so a feed's replay starts on the aurora it ends on.
+  outro(["Quote plate", "Person", "Kept plate"], DURATION - 1e3, { gap: 120, duration: 600 })
+];
+var counts = [{ layer: "Kept figure", at: LANDED + 300, duration: 1600, counter: { from: 0, to: 48200, prefix: "$" } }];
+var style_glass_testimonial_default = defineTemplate({
+  id: "social-saas-style-glass-testimonial",
+  meta: {
+    name: NAME,
+    description: "A nine-second testimonial post in the glass look: a customer quote arrives word by word on smoked glass over a slow aurora, then the photo slot and name drift up out of depth and the money that never left resolves on a counter. A travelling highlight, long eases. Square with 4:5 and 9:16 cuts, with a photo slot",
+    category: "social",
+    tags: ["social", "post", "testimonial", "quote", "customer", "review", "saas", "glass", "glassmorphism", "aurora", "shader", "ai", "security", "photo", "animation", "linkedin", "instagram"],
+    platforms: ["linkedin", "instagram", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["testimonial", "quote", "case-study"],
+    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;
+    glassBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 24", code(24));
+    ts(k, "Quote 56", display(56, { lead: 1.2 }));
+    ts(k, "Quote 66", display(66, { lead: 1.18 }));
+    ts(k, "Name 30", display(30));
+    ts(k, "Role 24", body(24));
+    ts(k, "Label 20", label(20));
+    ts(k, "Figure 44", figure(44));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", label: "{{brand.site}}" });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Testimonial");
+    k.flowSheet(sheet, 24, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    aurora(k, sheet, { duration: DURATION });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    chip(k, top, "Customer story", { style: "Kicker 24", dot: "pass", name: "Story chip", pad: [10, 18] });
+    const qp = pane(k, sheet, { padding: { top: 40, right: 44, bottom: 44, left: 44 }, radius: 34, name: "Quote plate" });
+    k.text(qp, QUOTE, { style: "Quote 56", color: "onGlass", name: "Quote" });
+    sheen(k, qp, 952, 480, [LANDED]);
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "MAX", name: "Person row" });
+    const person = pane(k, row, { direction: "HORIZONTAL", gap: 20, align: "CENTER", width: "FILL", padding: 16, radius: 28, alpha: 0.7, name: "Person" });
+    portraitSlot(k, person, 132, 132, { radius: 20, ground: "glass", skin: "glassMuted", top: "ocean", halo: "teal", name: "Portrait", photo: "Customer photo" });
+    const who = k.stack(person, { gap: 4, width: "FILL", name: "Who" });
+    k.text(who, "Mara Lindqvist", { style: "Name 30", color: "onGlass", name: "Name" });
+    k.text(who, "Head of Platform Security, Halden Pay", { style: "Role 24", color: "glassMuted", name: "Role" });
+    const kept = pane(k, row, { gap: 4, width: "HUG", padding: { top: 18, right: 24, bottom: 18, left: 24 }, radius: 28, alpha: 0.7, name: "Kept plate" });
+    k.text(kept, "KEPT", { style: "Label 20", color: "glassMuted", autoWidth: true, name: "Kept label" });
+    k.text(kept, "$48,200", { style: "Figure 44", color: "stop", width: 200, name: "Kept figure" });
+    const foot = paneArt(k, board(k, sheet, PANE_ART.w, PANE_ART.h, 1.08, "Foot board", { absolute: { x: 22, y: 1420 } }), { name: "Foot art" });
+    passThrough(k, foot, 2600, { travel: 2400 });
+    k.instance(sheet, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    surface(k, qp, 0, { from: 0.95, duration: 1400 });
+    float(k, qp, DURATION, { amp: 3, phase: 0.4 });
+    float(k, person, DURATION, { amp: 4, phase: 0.1 });
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitAurora(kit, id);
+        restyle(kit, id, "Quote", "Quote 66");
+        for (const b of kit.named(id, "Foot board stage")) kit.patch(b, { visible: false });
+      },
+      vertical: (kit, id) => {
+        fitAurora(kit, id);
+        restyle(kit, id, "Quote", "Quote 66");
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        for (const n of kit.named(id, "Person row")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+        for (const n of kit.named(id, "Person")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+      }
+    }));
+    for (const b of k.named(sheet, "Foot board stage")) k.patch(b, { visible: false });
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_glass_testimonial_default
+};

package/dist/chunks/chunk-ODTHQCB2.js

@@ -0,0 +1,146 @@
+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 {
+  GRAIN,
+  arch,
+  gothicBrand,
+  nave,
+  quatrefoil
+} from "./chunk-MI56SRAL.js";
+import {
+  background,
+  refilled
+} from "./chunk-75T3CFTH.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  hide,
+  place
+} from "./chunk-LWSZATOL.js";
+import {
+  grain
+} from "./chunk-YORIY3BT.js";
+import {
+  feedVariants,
+  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/motion/gothic-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("organ", 16);
+var DURATION = MUSIC.duration;
+var beat = MUSIC.beat;
+var CAPTION = { stagger: 60, in: 400, out: 300, rise: 36 };
+var swaps = [
+  captionSwap(["Vigil does. Every thirty seconds.", "Every endpoint, from twelve regions.", "Paged before your customers notice.", "Tonight, the vigil is kept."], beat(4), DURATION, CAPTION)
+];
+var cues = [
+  { layer: "Hook", preset: "blur-in", at: 0, params: { duration: 900, amount: 30 } },
+  { layer: "Nave", preset: "fade-in", at: 0, params: { duration: 1600 } },
+  // The rose lights over the second beat, a petal at a time; the lancets under it over the fourth.
+  { layer: "Petal", preset: "scale-in", at: beat(1), params: { duration: 500 }, stagger: { delay: 76 } },
+  { layer: "Bead", preset: "fade-in", at: beat(1) + 200, params: { duration: 300 }, stagger: { delay: 76 } },
+  { layer: "Inner petal", preset: "fade-in", at: beat(2), params: { duration: 300 }, stagger: { delay: 40 } },
+  { layer: "Rose light", preset: "fade-in", at: beat(2), params: { duration: 900 } },
+  { layer: "Oculus", preset: "pop-in", at: beat(2), params: { duration: 450, amount: 0.2 } },
+  { layer: "Lancet", preset: "fade-in", at: beat(3), params: { duration: 700 }, stagger: { delay: 200 } },
+  { layer: "Quatrefoil", preset: "pop-in", at: beat(3) + 500, params: { duration: 400 }, stagger: { delay: 160 } },
+  // The candles are lit along the floor, one after another, through the second bar.
+  { layer: "Candle", preset: "fade-in", at: beat(5), params: { duration: 500 }, stagger: { delay: 227 } },
+  // The sudden part: the bell tolls again, the full organ comes in, and the glass throws its light down the nave.
+  { layer: "Shaft", preset: "fade-in", at: beat(8), params: { duration: 500 }, stagger: { delay: 120 } },
+  { layer: "Pool", preset: "fade-in", at: beat(8) + 200, params: { duration: 700 }, stagger: { delay: 120 } },
+  { layer: "Rose ring", preset: "pulse", at: beat(8), params: { duration: 900, amount: 0.05 } },
+  { layer: "Call", preset: "rise-in", at: beat(12), params: { duration: 800 } },
+  { layer: "Call", preset: "pulse", at: beat(14), params: { duration: 900, amount: 0.05 } }
+];
+var gothic_launch_reel_default = defineTemplate({
+  id: "motion-gothic-launch-reel",
+  meta: {
+    name: "Gothic launch reel",
+    description: "A 15-second launch reel with the gravity of a cathedral: the question lands at once as a bell tolls, a rose window lights petal by petal and turns, candles are lit along the floor, and when the full organ comes in the glass throws its colour down the nave; the answer arrives as burned-in captions over a pipe-organ chorale (made by PopCraft, CC0), every entrance on a beat \u2014 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "gothic", "cathedral", "rose window", "stained glass", "launch", "saas", "reel", "captions", "music", "organ", "audio", "serif"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Gothic launch reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    gothicBrand(k);
+    k.textStyle("Display 100", { ...SERIF, size: 100, fontWeight: 900, letterSpacing: -3, lineHeight: 100, textAlign: "CENTER" });
+    k.textStyle("Display 76", { ...SERIF, size: 76, fontWeight: 900, letterSpacing: -2, lineHeight: 78, textAlign: "CENTER" });
+    k.textStyle("Display 62", { ...SERIF, size: 62, fontWeight: 900, letterSpacing: -1.6, lineHeight: 64, textAlign: "CENTER" });
+    k.textStyle("Caption 48", { ...SERIF, size: 48, fontStyle: "italic", fontWeight: 500, lineHeight: 58, textAlign: "CENTER" });
+    k.textStyle("Caption 34", { ...SERIF, size: 34, fontStyle: "italic", fontWeight: 500, lineHeight: 42, textAlign: "CENTER" });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: "Button 34", label: "Begin the vigil", pad: [22, 44], radius: 6 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Launch reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "MAX", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    background(k, sheet, "paper", { effects: GRAIN });
+    nave(k, sheet, 1080, 1920, { window: 540, top: 84, floor: 1560, candles: { base: 1830, count: 11, size: 24 }, loopMs: DURATION, spin: 4 });
+    const copy = k.stack(sheet, { gap: 24, align: "CENTER", name: "Copy" });
+    k.text(copy, "Who keeps watch at 3\xA0a.m.?", { style: "Display 100", color: "text", name: "Hook" });
+    k.text(copy, swaps[0].words[0], { style: "Caption 48", color: "text", name: "Caption" });
+    k.instance(copy, "Button", { Label: "Begin the vigil" }, { name: "Call" });
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, refilled(feedVariants({ post: 64, portrait: 72 }, {
+      // The square has no room for the window above the words: the whole nave stands at the left, and the words
+      // stand beside it in a blind arch of their own, a quatrefoil in its head.
+      post: (kit, id) => {
+        kit.patch(id, { padding: { top: 330, right: 64, bottom: 96, left: 672 }, primaryAxisAlignItems: "CENTER" });
+        place(kit, id, "Nave", 0, 0, 0.5625);
+        hide(kit, id, ["Stone"]);
+        for (const b of kit.named(id, "Background")) kit.patch(b, { effects: grain(0.04, 4, 7) });
+        for (const h of kit.named(id, "Hook")) kit.restyle(h, "Display 62");
+        for (const c of kit.named(id, "Caption")) kit.restyle(c, "Caption 34");
+        arch(kit, id, 416, 996, "stone", { name: "Niche", outline: 2, absolute: { x: 636, y: 44 } });
+        arch(kit, id, 388, 968, "accent", { name: "Niche gilt", outline: 1.5, absolute: { x: 650, y: 58 }, opacity: 0.7 });
+        quatrefoil(kit, id, 96, "cobalt", { name: "Niche light", absolute: { x: 796, y: 196 } });
+      },
+      // 4:5 keeps the window and the words; the floor and its candles are below the frame.
+      portrait: (kit, id) => {
+        place(kit, id, "Nave", 54, -24, 0.9);
+        hide(kit, id, ["Candle"]);
+        for (const h of kit.named(id, "Hook")) kit.restyle(h, "Display 76");
+      }
+    })));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  gothic_launch_reel_default
+};

package/dist/chunks/chunk-OFBWTZDZ.js

@@ -0,0 +1,33 @@
+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_deco_landing_default
+} from "./chunk-NEMISXGQ.js";
+import {
+  art_deco_link_preview_default
+} from "./chunk-VSS763NS.js";
+import {
+  art_deco_premiere_post_default
+} from "./chunk-YD3F7CQG.js";
+import {
+  art_deco_grand_opening_default
+} from "./chunk-7VRUTQCW.js";
+import {
+  art_deco_invitation_default
+} from "./chunk-L2HNYQK3.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/themes/art-deco.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [art_deco_grand_opening_default, art_deco_landing_default, art_deco_premiere_post_default, art_deco_invitation_default, art_deco_link_preview_default];
+var art_deco_default = pack;
+
+export {
+  art_deco_default
+};