@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-NCAK6G4F.js

@@ -0,0 +1,155 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  LATCH,
+  backdrop,
+  chip,
+  darkBrand,
+  fitBackdrop,
+  lamp,
+  lockup,
+  storyFlags
+} from "./chunk-M2BHMDSB.js";
+import {
+  chart
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  hz
+} from "./chunk-WV6ZTKE7.js";
+import {
+  board,
+  reboard
+} from "./chunk-YHBAWSDX.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/style-dark-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Dark SaaS milestone post";
+var DURATION = 7e3;
+var CARD = { w: 936, h: 292 };
+var PLOT = { w: CARD.w - 48, h: 150 };
+var MONTHS = [210, 260, 330, 430, 540, 640, 780, 900, 1060, 1250, 1620, 1980];
+var LETTERS = "ONDJFMAMJJAS";
+var CONTENT = ["Top row", "Kicker", "Milestone figure", "Line", "Year card", "Foot"];
+var cues = [
+  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Kicker", preset: "fade-in", at: 80, params: { duration: 250 } },
+  { layer: "Milestone figure", preset: "rise-in", at: 150, params: { duration: 500 } },
+  { layer: "Year card", preset: "rise-in", at: 500, params: { duration: 500 } },
+  { layer: "Bar", preset: "wipe-in", at: 900, params: { duration: 380, direction: "up" }, stagger: { delay: 90 } },
+  { layer: "Line", preset: "words-in", at: 1700, params: { duration: 380, amount: 45 } },
+  { layer: "Total dot", preset: "pop-in", at: 2500, params: { duration: 300 } },
+  { layer: "Milestone figure", preset: "pulse", at: 2500, params: { duration: 500, amount: 0.03 } },
+  { layer: "Foot", preset: "fade-in", at: 2e3, params: { duration: 300 } },
+  { layer: "Button", preset: "pulse", at: 4400, params: { duration: 500, amount: 0.05 } },
+  { layer: "Total dot", preset: "pulse", at: 5200, params: { duration: 600, amount: 0.4 } },
+  outro(CONTENT, 6200, { gap: 60, duration: 350 })
+];
+var counts = [
+  { layer: "Milestone figure", at: 300, duration: 2200, counter: { from: 0, to: LATCH.rollouts } }
+];
+var style_dark_milestone_default = defineTemplate({
+  id: "motion-saas-style-dark-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in the dark precision look: one enormous figure counts up on a ruled near-black ground while a card draws the year behind it, twelve monthly bars wiping up and the running total drawing over them as a line. Seven seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "dark", "dark mode", "milestone", "metric", "counter", "chart", "bar chart", "growth", "build in public", "developer tools", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    darkBrand(k, { line: "rollouts shipped, and 312 of them rolled themselves back before anyone was paged." });
+    k.textStyle("Brand 34", { size: 34, fontWeight: 600, letterSpacing: -0.8, lineHeight: 40 });
+    k.textStyle("Kicker 22", { ...MONO, size: 22, fontWeight: 500, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Figure 280", { size: 280, fontWeight: 700, letterSpacing: -15, lineHeight: 256, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 240", { size: 240, fontWeight: 700, letterSpacing: -13, lineHeight: 222, fontFeatures: { tnum: 1 } });
+    k.textStyle("Line 36", { size: 36, fontWeight: 400, letterSpacing: -0.6, lineHeight: 48 });
+    k.textStyle("Card 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 28 });
+    k.textStyle("Axis 18", { ...MONO, size: 18, fontWeight: 500, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Button 26", { size: 26, fontWeight: 600, letterSpacing: -0.4, lineHeight: 32 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 26", label: `Ship yours at ${LATCH.site}`, pad: [14, 24], radius: 10 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 28, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    backdrop(k, sheet, 1080, 1080);
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 34, style: "Brand 34", name: "Lockup" });
+    chip(k, top, "MILESTONE \xB7 2 OCT 2026", { name: "Date", ink: "onPaper" });
+    const words = k.stack(sheet, { gap: 18, name: "Words" });
+    const kicker = k.stack(words, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Kicker" });
+    lamp(k, kicker, 14, "primary", { name: "Kicker lamp", breathe: hz(7, DURATION) });
+    k.text(kicker, "TWELVE MONTHS, ONE NUMBER", { style: "Kicker 22", color: "onPaper", name: "Kicker words" });
+    k.text(words, LATCH.rollouts.toLocaleString("en-US"), { style: "Figure 280", color: "text", name: "Milestone figure" });
+    k.text(words, "{{brand.line}}", { style: "Line 36", color: "onPaper", name: "Line" });
+    const stage = board(k, sheet, CARD.w, CARD.h, 1, "Year board");
+    const card = k.stack(stage, { width: CARD.w, height: CARD.h, fill: "card", radius: 16, padding: 24, gap: 14, stroke: { color: "edge", width: 1, align: "INSIDE" }, absolute: { x: 0, y: 0 }, name: "Year card" });
+    const head = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+    k.text(head, "ROLLOUTS A MONTH", { style: "Card 22", color: "cardMuted", autoWidth: true, name: "Card title" });
+    k.text(head, "OCT 2025 TO SEP 2026", { style: "Card 22", color: "cardMuted", autoWidth: true, name: "Card span" });
+    const max = Math.max(...MONTHS), gap = 10, bw = (PLOT.w - gap * 11) / 12;
+    const plot = k.stack(card, { direction: "HORIZONTAL", width: PLOT.w, height: PLOT.h, gap, align: "MAX", name: "Plot" });
+    MONTHS.forEach((v, i) => k.rect(plot, bw, Math.round(v / max * PLOT.h * 0.9), i === 11 ? "signal" : "edge", { radius: 3, name: "Bar" }));
+    let sum = 0;
+    const totals = MONTHS.map((v) => sum += v);
+    const c = chart(totals, PLOT.w - bw, PLOT.h - 12, sum);
+    const line = k.vector(plot, PLOT.w - bw, PLOT.h - 12, [c.line], [], { name: "Total line", stroke: { color: "onCard", width: 3, join: "ROUND" }, absolute: { x: bw / 2, y: 6 } });
+    const end = c.pts[c.pts.length - 1];
+    k.ellipse(plot, 16, "onCard", { name: "Total dot", absolute: { x: bw / 2 + end.x - 8, y: 6 + end.y - 8 }, stroke: { color: "card", width: 3, align: "OUTSIDE" } });
+    const axis = k.stack(card, { direction: "HORIZONTAL", gap, name: "Axis" });
+    for (const l of LETTERS) k.text(axis, l, { style: "Axis 18", color: "cardMuted", name: "Month" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.instance(foot, "Call", { Label: "Ship yours at {{brand.site}}" }, { name: "Button" });
+    k.text(foot, `Thank you, ${LATCH.teams.toLocaleString("en-US")} teams.`, { style: "Card 22", color: "onPaper", autoWidth: true, name: "Thanks" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.animate(line, "trim.end", [{ t: 1e3, v: 0, ease: ease.inOut("cubic") }, { t: 2500, v: 1 }]);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => fitBackdrop(kit, id),
+      vertical: (kit, id) => {
+        fitBackdrop(kit, id);
+        storyFlags(kit, id);
+        kit.patch(id, { primaryAxisAlignItems: "CENTER", itemSpacing: 56, counterAxisSpacing: 56 });
+        reboard(kit, id, "Year board", 800 / CARD.w);
+        for (const n of kit.named(id, "Milestone figure")) kit.restyle(n, "Figure 240");
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  style_dark_milestone_default
+};

package/dist/chunks/chunk-NCPP7DAG.js

@@ -0,0 +1,340 @@
+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 {
+  glow,
+  noise,
+  shadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  circle,
+  pt,
+  r3
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/manuscript-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function manuscriptBrand(k, fields = {}) {
+  k.brand(
+    { paper: "#F0E4C8", text: "#2B1D12", onPaper: "#5A4530", primary: "#1F3F8F", onPrimary: "#FFF8E6", accent: "#B3261E", onAccent: "#FFF6E2", card: "#FAF2DC", onCard: "#2B1D12" },
+    { name: "Quire", site: "quire.example", ...fields }
+  );
+  k.palette({ gilt: "#C9972B", giltLight: "#F6E1A0", leaf: "#3E7A4C", leafLight: "#86A85A", shade: "#8A6A3F", rule: "#BFA070" });
+}
+var GRAIN = [noise({ id: "e1", amount: 0.035, size: 6, seed: 11, density: 0.4 })];
+var shadow2 = (k, blur, y, alpha = 0.4) => [shadow(k, "shade", alpha, y, blur)];
+function stream(seed) {
+  let s = seed % 2147483647;
+  return () => {
+    s = s * 48271 % 2147483647;
+    return (s & 65535) / 65536;
+  };
+}
+function draw(k, parent, name, paths, fill, o = {}) {
+  const all = paths.flat();
+  const pad = (o.stroke ?? o.outline?.width ?? 0) / 2 + 0.5;
+  const x0 = Math.min(...all.map((p) => p.x)) - pad, y0 = Math.min(...all.map((p) => p.y)) - pad;
+  const w = Math.max(1, Math.max(...all.map((p) => p.x)) + pad - x0), h = Math.max(1, Math.max(...all.map((p) => p.y)) + pad - y0);
+  const local = paths.map((points) => ({ closed: o.closed ?? o.stroke === void 0, points: points.map((p) => pt(r3(p.x - x0), r3(p.y - y0))) }));
+  return k.vector(parent, r3(w), r3(h), local, fill, {
+    name,
+    absolute: { x: r3(x0), y: r3(y0) },
+    ...o.stroke !== void 0 ? { strokeWidth: o.stroke } : {},
+    ...o.outline ? { stroke: o.outline } : {},
+    ...o.opacity !== void 0 ? { opacity: o.opacity } : {},
+    ...o.effects ? { effects: o.effects } : {}
+  });
+}
+var SHADES = ["Shade left", "Shade right", "Shade top", "Shade bottom"];
+function shade(k, sheet, band = {}) {
+  const s = k.node(sheet), m = Math.min(s.width, s.height);
+  const bx = Math.round(band.x ?? m * 0.14), by = Math.round(band.y ?? m * 0.08);
+  const boxes = [{ x: 0, y: 0, width: bx, height: s.height }, { x: s.width - bx, y: 0, width: bx, height: s.height }, { x: 0, y: 0, width: s.width, height: by }, { x: 0, y: s.height - by, width: s.width, height: by }];
+  SHADES.forEach((name, i) => {
+    for (const id of k.named(sheet, name)) k.patch(id, boxes[i]);
+  });
+}
+function vellum(k, sheet, band = {}) {
+  const s = k.node(sheet);
+  if (s.childIds.length) throw new Error("vellum: lay it before the sheet's other layers, so it paints first");
+  k.rect(sheet, s.width, s.height, "paper", { name: "Background", absolute: { x: 0, y: 0 }, effects: GRAIN });
+  glow(k, sheet, { x: s.width * 0.3, y: s.height * 0.22, w: Math.max(s.width, s.height) * 0.9, role: "giltLight", alpha: 0.24, name: "Page light" });
+  const fade = (angle, edgeFirst) => [k.gradient({ from: "shade", to: "shade", angle, fromOpacity: edgeFirst ? 0.4 : 0, toOpacity: edgeFirst ? 0 : 0.4 })];
+  k.rect(sheet, 10, 10, fade(0, true), { name: SHADES[0], absolute: { x: 0, y: 0 } });
+  k.rect(sheet, 10, 10, fade(0, false), { name: SHADES[1], absolute: { x: 0, y: 0 } });
+  k.rect(sheet, 10, 10, fade(90, true), { name: SHADES[2], absolute: { x: 0, y: 0 } });
+  k.rect(sheet, 10, 10, fade(90, false), { name: SHADES[3], absolute: { x: 0, y: 0 } });
+  shade(k, sheet, band);
+}
+var revellum = (specs, band = {}) => specs.map((sp) => ({ ...sp, adjust: (k, id) => {
+  sp.adjust?.(k, id);
+  const s = k.node(id);
+  for (const bg of k.named(id, "Background")) k.patch(bg, { x: 0, y: 0, width: s.width, height: s.height });
+  shade(k, id, band);
+} }));
+function ruling(k, parent, o) {
+  const over = o.overrun ?? o.pitch * 1.5, bottom = o.y + (o.rows - 1) * o.pitch;
+  const lines = [];
+  for (let i = 0; i < o.rows; i++) lines.push([pt(o.x - over * 0.4, o.y + i * o.pitch), pt(o.x + o.w + over * 0.4, o.y + i * o.pitch)]);
+  for (const x of [o.x, o.x + o.w]) lines.push([pt(x, o.y - over), pt(x, bottom + over)]);
+  const id = k.frame(parent, { x: 0, y: 0, width: 4, height: 4 }, { name: o.name ?? "Ruling" });
+  draw(k, id, "Ruled lines", lines, "rule", { stroke: o.weight ?? 1.5, opacity: 0.75 });
+  const r = Math.max(1.2, (o.weight ?? 1.5) * 1.1);
+  draw(k, id, "Prickings", Array.from({ length: o.rows }, (_, i) => circle(o.x + o.w + over * 0.75, o.y + i * o.pitch, r, 8)), "shade", { opacity: 0.7 });
+  return id;
+}
+function leafShape(b, ang, L, W, side) {
+  const local = (s, hw) => {
+    const x = s * L, y = hw + side * 0.16 * L * s * s;
+    return pt(b.x + x * Math.cos(ang) - y * Math.sin(ang), b.y + x * Math.sin(ang) + y * Math.cos(ang));
+  };
+  const edge = (j) => W * Math.pow(Math.sin(Math.PI * j / 10), 0.7) * (1 - 0.35 * (j / 10));
+  const shape = [];
+  for (let j = 0; j <= 10; j++) shape.push(local(j / 10, -edge(j)));
+  for (let j = 9; j >= 1; j--) shape.push(local(j / 10, edge(j)));
+  return shape;
+}
+function vine(k, parent, v) {
+  const u = v.u, first = v.side ?? 1, ink = v.ink ?? "text";
+  const map = (s, d) => v.dir === "down" ? pt(v.x + d, v.y + s) : pt(v.x + s, v.y + d);
+  const off = (t) => first * v.amp * Math.sin(2 * Math.PI * v.waves * t);
+  const at = (t) => map(v.length * t, off(t));
+  const heading = (t) => {
+    const a = at(Math.max(0, t - 2e-3)), b = at(Math.min(1, t + 2e-3));
+    return Math.atan2(b.y - a.y, b.x - a.x);
+  };
+  const n = Math.max(1, Math.round(v.waves * 2)), steps = Math.max(24, Math.round(v.waves * 28));
+  const stem = draw(k, parent, "Stem", [Array.from({ length: steps + 1 }, (_, i) => at(i / steps))], "leaf", { stroke: 5 * u });
+  k.patch(stem, { trim: { start: 0, end: 1, offset: 0 } });
+  const tendrils = [], growths = [];
+  const leaf = (b, ang, L, role, side, t) => {
+    const id = draw(k, parent, "Leaf", [leafShape(b, ang, L, L * 0.3, side)], role, { outline: { color: ink, width: Math.max(1, 1.5 * u) } });
+    const nd = k.node(id);
+    k.patch(id, { anchorX: r3((b.x - nd.x) / nd.width), anchorY: r3((b.y - nd.y) / nd.height) });
+    growths.push({ id, t });
+  };
+  for (let i = 0; i < n; i++) {
+    if (i > 0) {
+      const t2 = i / n, b = at(t2), h = heading(t2);
+      leaf(b, h - 0.85, 30 * u, i % 2 ? "leaf" : "leafLight", -1, t2);
+      leaf(b, h + 0.85, 26 * u, i % 2 ? "leafLight" : "leaf", 1, t2);
+    }
+    const t = (i + 0.5) / n, side = Math.sign(off(t)) || 1, r0 = 22 * u, turn = i % 2 ? -1 : 1;
+    const s0 = v.length * t, d0 = off(t), c = { s: s0, d: d0 + side * r0 }, a0 = Math.atan2(-side, 0);
+    const pts = [];
+    let tip = map(s0, d0);
+    for (let j = 0; j <= 22; j++) {
+      const a = Math.PI * 1.55 * j / 22, r = r0 * (1 - 0.5 * (j / 22));
+      tip = map(c.s + r * Math.cos(a0 + turn * side * a), c.d + r * Math.sin(a0 + turn * side * a));
+      pts.push(tip);
+    }
+    const id = draw(k, parent, "Tendril", [pts], ink, { stroke: Math.max(1.2, 2 * u) });
+    k.patch(id, { trim: { start: 0, end: 1, offset: 0 } });
+    tendrils.push({ id, t });
+    const kind = i % 3;
+    if (kind === 0) {
+      const s = 13 * u, f = k.stack(parent, { width: r3(s * 2), height: r3(s * 2), name: "Flower", absolute: { x: r3(tip.x - s), y: r3(tip.y - s) } });
+      const petals = Array.from({ length: 5 }, (_, q) => ({ closed: true, points: circle(s + s * 0.55 * Math.cos(2 * Math.PI * q / 5 - Math.PI / 2), s + s * 0.55 * Math.sin(2 * Math.PI * q / 5 - Math.PI / 2), s * 0.44, 12).map((p) => pt(r3(p.x), r3(p.y))) }));
+      k.vector(f, r3(s * 2), r3(s * 2), petals, i % 2 ? "primary" : "accent", { name: "Petals", absolute: { x: 0, y: 0 } });
+      growths.push({ id: f, t: t + 0.5 / n });
+      k.ellipse(f, r3(s * 0.6), "gilt", { name: "Flower heart", absolute: { x: r3(s * 0.7), y: r3(s * 0.7) }, stroke: { color: ink, width: Math.max(1, u) } });
+    } else if (kind === 1) {
+      const d = 13 * u, f = k.stack(parent, { width: r3(d * 2.2), height: r3(d * 2.2), name: "Berry", absolute: { x: r3(tip.x - d * 1.1), y: r3(tip.y - d * 1.1) } });
+      growths.push({ id: f, t: t + 0.5 / n });
+      for (let q = 0; q < 3; q++) {
+        const a = 2 * Math.PI * q / 3 - Math.PI / 2;
+        k.ellipse(f, r3(d), [...k.paint("gilt"), k.gradient({ from: "giltLight", to: "shade", angle: 60, fromOpacity: 0.85, toOpacity: 0.3 })], { name: "Bezant", absolute: { x: r3(d * 0.6 + d * 0.55 * Math.cos(a)), y: r3(d * 0.6 + d * 0.55 * Math.sin(a)) }, stroke: { color: ink, width: Math.max(1, 1.2 * u) } });
+      }
+    } else leaf(tip, heading(t) + side * 0.9, 34 * u, "gilt", side, t + 0.5 / n);
+  }
+  return { stem, tendrils, growths };
+}
+function growVine(k, v, at, duration) {
+  k.animate(v.stem, "trim.end", [{ t: at, v: 0, ease: ease.inOut("sine") }, { t: at + duration, v: 1 }]);
+  for (const tn of v.tendrils) {
+    const t0 = Math.round(at + duration * tn.t);
+    k.animate(tn.id, "trim.end", [{ t: t0, v: 0, ease: ease.out("cubic") }, { t: t0 + 600, v: 1 }]);
+  }
+  for (const g of v.growths) {
+    const t0 = Math.round(at + duration * Math.min(1, g.t)) + 80;
+    k.animate(g.id, "opacity", [{ t: t0, v: 0, ease: ease.out("cubic") }, { t: t0 + 220, v: 1 }]);
+    for (const axis of ["scaleX", "scaleY"]) k.animate(g.id, axis, [{ t: t0, v: 0.1, ease: ease.back(1.7) }, { t: t0 + 480, v: 1 }]);
+  }
+}
+function initial(k, parent, size, letter, style, o = {}) {
+  const w = o.width ?? size, h = size, m = Math.round(size * 0.085);
+  const ink = Math.max(1.5, size * 8e-3);
+  const id = k.stack(parent, { width: w, height: h, align: "CENTER", justify: "CENTER", name: o.name ?? "Initial", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.rect(id, w, h, "card", { name: "Ground", absolute: { x: 0, y: 0 }, radius: size * 0.03, stroke: { color: "text", width: ink }, effects: shadow2(k, size * 0.09, size * 0.035, 0.5) });
+  k.frame(id, { x: 0, y: 0, width: w, height: h }, { name: "Gold leaf", radius: size * 0.03, stroke: { color: "text", width: ink }, fill: [...k.paint("gilt"), k.gradient({ from: "giltLight", to: "shade", angle: 50, fromOpacity: 0.8, toOpacity: 0.35 })] });
+  k.rect(id, w - m * 0.7, h - m * 0.7, [], { name: "Burnish", absolute: { x: m * 0.35, y: m * 0.35 }, radius: size * 0.02, stroke: { color: "giltLight", width: Math.max(1, size * 6e-3) }, opacity: 0.9 });
+  const field = k.frame(id, { x: m, y: m, width: w - 2 * m, height: h - 2 * m }, { name: "Field", clip: true, fill: "primary", stroke: { color: "text", width: ink } });
+  const fw = w - 2 * m, fh = h - 2 * m, scrolls = [];
+  for (const [cx, cy, dir] of [[0.2, 0.22, 1], [0.8, 0.22, -1], [0.2, 0.78, -1], [0.8, 0.78, 1]]) {
+    const r0 = Math.min(fw, fh) * 0.2, px = fw * cx, py = fh * cy, turnTo = cx < 0.5 ? Math.PI : 0;
+    scrolls.push(Array.from({ length: 34 }, (_, j) => {
+      const a = Math.PI * 3 * j / 33, r = r0 * (1 - 0.8 * (j / 33));
+      return pt(px + r * Math.cos(turnTo + dir * a), py + r * Math.sin(turnTo + dir * a));
+    }));
+    const dots = [];
+    for (let q = 0; q < 3; q++) {
+      const a = 2 * Math.PI * q / 3 + dir;
+      dots.push(circle(fw * (cx < 0.5 ? 0.44 : 0.56) + size * 0.022 * Math.cos(a), fh * (cy < 0.5 ? 0.1 : 0.9) + size * 0.022 * Math.sin(a), size * 0.011, 8));
+    }
+    draw(k, field, "White dots", dots, "onPrimary", { opacity: 0.8 });
+  }
+  draw(k, field, "White vine", scrolls, "onPrimary", { stroke: Math.max(1.2, size * 0.012), opacity: 0.6 });
+  const b = Math.round(size * 0.07);
+  for (const [x, y] of [[m, m], [w - m, m], [m, h - m], [w - m, h - m]]) {
+    const boss = k.stack(id, { width: b, height: b, name: "Boss", absolute: { x: x - b / 2, y: y - b / 2 } });
+    k.rect(boss, b, b, "accent", { name: "Boss ground", absolute: { x: 0, y: 0 }, stroke: { color: "text", width: ink * 0.8 } });
+    k.ellipse(boss, r3(b * 0.4), "giltLight", { name: "Boss stud", absolute: { x: r3(b * 0.3), y: r3(b * 0.3) } });
+  }
+  k.text(id, letter, { style, color: "onPrimary", name: "Initial letter" });
+  const clip = k.frame(id, { x: 0, y: 0, width: w, height: h }, { name: "Gilding", clip: true, radius: size * 0.03 });
+  const gw = Math.round(size * 0.34);
+  const glint = k.frame(clip, { x: -2 * gw - 4, y: 0, width: 2 * gw, height: h }, { name: "Glint" });
+  k.rect(glint, gw, h, [k.gradient({ from: "giltLight", to: "giltLight", angle: 0, fromOpacity: 0, toOpacity: 0.85 })], { name: "Glint rise", absolute: { x: 0, y: 0 } });
+  k.rect(glint, gw, h, [k.gradient({ from: "giltLight", to: "giltLight", angle: 0, fromOpacity: 0.85, toOpacity: 0 })], { name: "Glint fall", absolute: { x: gw, y: 0 } });
+  return id;
+}
+function gild(k, root, at, duration = 900) {
+  for (const id of k.named(root, "Glint")) {
+    const travel = k.node(k.node(id).parentId).width + k.node(id).width + 8;
+    k.animate(id, "translateX", [{ t: at, v: 0, ease: ease.inOut("sine") }, { t: at + duration, v: travel, ease: ease.hold }, { t: at + duration + 34, v: 0 }]);
+  }
+}
+function seal(k, parent, size, letter, style, o = {}) {
+  const R = size / 2;
+  const id = k.stack(parent, { width: size, height: size, align: "CENTER", justify: "CENTER", name: o.name ?? "Seal", ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.ribbons !== false) {
+    const tail = (dx) => [pt(R - size * 0.14 + dx * 0.2, R), pt(R + size * 0.14 + dx * 0.2, R), pt(R + size * 0.16 + dx, size * 1.3), pt(R + dx, size * 1.2), pt(R - size * 0.16 + dx, size * 1.3)];
+    draw(k, id, "Ribbon", [tail(-size * 0.2)], "primary", { outline: { color: "text", width: Math.max(1, size * 0.01) } });
+    draw(k, id, "Ribbon", [tail(size * 0.2)], "primary", { outline: { color: "text", width: Math.max(1, size * 0.01) } });
+  }
+  const blob = Array.from({ length: 48 }, (_, i) => {
+    const a = 2 * Math.PI * i / 48, r = R * (0.93 + 0.045 * Math.sin(a * 5 + 0.6) + 0.03 * Math.sin(a * 9 + 2));
+    return pt(R + r * Math.cos(a), R + r * Math.sin(a));
+  });
+  draw(k, id, "Wax", [blob], "accent", { effects: shadow2(k, size * 0.1, size * 0.04, 0.6) });
+  const shine = Array.from({ length: 13 }, (_, i) => {
+    const a = Math.PI * (1.08 + 0.34 * i / 12);
+    return pt(R + R * 0.84 * Math.cos(a), R + R * 0.84 * Math.sin(a));
+  });
+  const inner = Array.from({ length: 13 }, (_, i) => {
+    const a = Math.PI * (1.42 - 0.34 * i / 12);
+    return pt(R + R * 0.72 * Math.cos(a), R + R * 0.72 * Math.sin(a));
+  });
+  draw(k, id, "Wax shine", [[...shine, ...inner]], "giltLight", { opacity: 0.45 });
+  const ring = r3(size * 0.66);
+  k.ellipse(id, ring, [], { name: "Seal ring", stroke: { color: "onAccent", width: Math.max(1, size * 0.014) }, absolute: { x: r3(R - ring / 2), y: r3(R - ring / 2) }, opacity: 0.55 });
+  k.text(id, letter, { style, color: "onAccent", name: "Seal letter" });
+  return id;
+}
+function script(k, parent, o) {
+  const rand = stream(o.seed ?? 7), xh = o.pitch * 0.34, mw = xh * 0.5, weight = o.weight ?? Math.max(1.4, mw * 0.46), cut = weight * 0.7;
+  const versals = o.versals ?? [0];
+  for (let row = 0; row < o.rows; row++) {
+    const indent = versals.includes(row) ? o.pitch * 1.25 : 0;
+    const width = (row === o.rows - 1 ? o.w * (o.short ?? 0.55) : o.w) - indent;
+    const top = o.pitch * 0.5 - xh, base = o.pitch * 0.5;
+    const words = [];
+    let x = 2;
+    while (x < width - mw * 3) {
+      const minims = Math.min(2 + Math.floor(rand() * 7), Math.floor((width - x) / mw));
+      if (minims < 2) break;
+      for (let j = 0; j < minims; j++) {
+        const q = rand(), up = q > 0.88 ? xh * 0.7 : 0, down = q < 0.08 ? xh * 0.5 : 0, x0 = x + j * mw;
+        words.push([pt(x0, top - up + cut), pt(x0 + weight, top - up), pt(x0 + weight, base + down - cut), pt(x0, base + down)]);
+      }
+      x += minims * mw + mw * 1.6;
+    }
+    const line = k.frame(parent, { x: o.x + indent, y: o.y + row * o.pitch - o.pitch * 0.5, width, height: o.pitch }, { name: "Script line", clip: true });
+    k.vector(line, r3(width), r3(o.pitch), words.map((points) => ({ closed: true, points: points.map((p) => pt(r3(p.x), r3(p.y))) })), o.ink ?? "onPaper", { name: "Ink", absolute: { x: 0, y: 0 } });
+    if (indent) {
+      const s = r3(o.pitch * 0.92), i = versals.indexOf(row);
+      const vs = k.stack(parent, { width: s, height: s, name: "Versal", absolute: { x: o.x, y: r3(o.y + row * o.pitch - o.pitch * 0.72) } });
+      k.rect(vs, s, s, i % 2 ? "primary" : "accent", { name: "Versal ground", absolute: { x: 0, y: 0 }, stroke: { color: "text", width: Math.max(1, weight * 0.5) } });
+      k.ellipse(vs, r3(s * 0.46), [...k.paint("gilt"), k.gradient({ from: "giltLight", to: "shade", angle: 60, fromOpacity: 0.8, toOpacity: 0.3 })], { name: "Versal gold", absolute: { x: r3(s * 0.27), y: r3(s * 0.27) } });
+    }
+  }
+}
+function snail(k, parent, o) {
+  const s = o.size, w = s * 2.3, h = s * 1.5;
+  const id = k.frame(parent, { x: r3(o.x - w / 2), y: r3(o.y - h), width: r3(w), height: r3(h) }, { name: o.name ?? "Snail" });
+  const ink = Math.max(1.2, s * 0.045), g = h;
+  const body = [pt(0, g), pt(s * 0.25, g - s * 0.16), pt(s * 0.9, g - s * 0.2), pt(s * 1.5, g - s * 0.22), pt(s * 1.72, g - s * 0.5), pt(s * 1.78, g - s * 0.8), pt(s * 1.95, g - s * 0.88), pt(s * 2.1, g - s * 0.74), pt(s * 2.12, g - s * 0.4), pt(s * 2.02, g - s * 0.12), pt(s * 1.8, g)];
+  draw(k, id, "Snail body", [body], "card", { outline: { color: "text", width: ink } });
+  draw(k, id, "Snail stalks", [[pt(s * 1.9, g - s * 0.86), pt(s * 1.98, g - s * 1.3)], [pt(s * 2.02, g - s * 0.82), pt(s * 2.22, g - s * 1.18)]], "text", { stroke: ink });
+  draw(k, id, "Snail eyes", [circle(s * 1.98, g - s * 1.32, s * 0.06, 8), circle(s * 2.23, g - s * 1.2, s * 0.06, 8)], "text");
+  const cx = s * 0.95, cy = g - s * 0.66, r = s * 0.5;
+  k.ellipse(id, r3(s), [...k.paint("gilt"), k.gradient({ from: "giltLight", to: "shade", angle: 60, fromOpacity: 0.75, toOpacity: 0.35 })], { name: "Snail shell", absolute: { x: r3(cx - r), y: r3(cy - r) }, stroke: { color: "text", width: ink } });
+  draw(k, id, "Shell spiral", [Array.from({ length: 40 }, (_, j) => {
+    const a = Math.PI * 4.4 * j / 39 + Math.PI * 0.2, q = r * 0.88 * (1 - 0.92 * (j / 39));
+    return pt(cx + q * Math.cos(a), cy + q * Math.sin(a));
+  })], "text", { stroke: ink });
+  return id;
+}
+function manicule(k, parent, size, o = {}) {
+  const u = size / 100, h = Math.round(size * 0.5);
+  const id = k.stack(parent, { width: size, height: h, name: o.name ?? "Manicule", ...o.absolute ? { absolute: o.absolute } : {} });
+  const P_ = (pts) => pts.map(([x, y]) => pt(x * u, y * u));
+  const ink = Math.max(1.2, 2.2 * u);
+  draw(k, id, "Cuff", [P_([[1, 11], [22, 9], [22, 43], [1, 41]])], "accent", { outline: { color: "text", width: ink } });
+  draw(k, id, "Hand", [P_([[22, 13], [40, 11], [50, 4], [58, 3], [60, 8], [54, 16], [70, 16], [96, 17], [99, 20.5], [96, 24], [72, 25], [74, 29], [72, 33], [66, 33], [67, 37], [64, 40], [58, 40], [56, 43], [50, 44], [40, 42], [22, 39]])], "card", { outline: { color: "text", width: ink } });
+  draw(k, id, "Knuckles", [P_([[72, 25], [58, 26]]), P_([[66, 33], [56, 33]]), P_([[58, 40], [52, 39]]), P_([[8, 12], [8, 40]]), P_([[15, 11], [15, 41]])], "text", { stroke: ink * 0.8 });
+  return id;
+}
+function folioPlan(w, h, o = {}) {
+  const u = w / 540, left = Math.round(96 * u), top = Math.round(64 * u), pitch = Math.round(38 * u);
+  const size = o.initialSize ?? Math.round(170 * u), textW = w - left - (o.margin ?? Math.round(56 * u));
+  const besideX = left + size + Math.round(18 * u), besideY = top + (o.title ?? 0) + pitch * 0.7;
+  const besideRows = Math.max(0, Math.floor((top + size - besideY) / pitch) + 1);
+  const belowY = top + size + pitch * 1.1;
+  const belowRows = Math.max(1, Math.floor((h - belowY - 96 * u) / pitch));
+  return { u, left, top, pitch, size, textW, besideX, besideY, besideRows, belowY, belowRows, glossX: left + textW + Math.round(14 * u) };
+}
+function folio(k, parent, w, h, o) {
+  const g = folioPlan(w, h, o), u = g.u;
+  const id = k.frame(parent, { x: o.at?.x ?? 0, y: o.at?.y ?? 0, width: w, height: h }, { name: "Folio" });
+  k.rect(id, w, h, "card", { name: "Leaf ground", absolute: { x: 0, y: 0 }, radius: 4 * u, stroke: { color: "rule", width: 1 }, effects: [...shadow2(k, 46 * u, 20 * u, 0.55), ...GRAIN] });
+  k.rect(id, w, h, [k.gradient({ from: "shade", to: "shade", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.3, handles: [pt(0.5, 0.5), pt(1.15, 0.5), pt(0.5, 1.15)] })], { name: "Leaf shade", absolute: { x: 0, y: 0 }, radius: 4 * u });
+  const rows = Math.floor((h - g.top - 40 * u) / g.pitch);
+  ruling(k, id, { x: g.left - 8 * u, y: g.belowY - Math.ceil((g.belowY - g.top) / g.pitch) * g.pitch, w: g.textW + 16 * u, rows: rows + 1, pitch: g.pitch, weight: Math.max(1, 1.2 * u), overrun: g.pitch });
+  const border = vine(k, id, { x: 46 * u, y: 22 * u, length: h - 44 * u, dir: "down", amp: 15 * u, waves: Math.max(1.5, Math.round(h / (150 * u) * 2) / 2), u: 0.72 * u, ink: "onCard" });
+  initial(k, id, g.size, o.letter, o.initialStyle, { absolute: { x: g.left, y: g.top } });
+  if (g.besideRows > 0) script(k, id, { x: g.besideX, y: g.besideY, w: g.left + g.textW - g.besideX, rows: g.besideRows, pitch: g.pitch, seed: (o.seed ?? 5) + 1, short: 1, versals: [], ink: "onCard" });
+  script(k, id, { x: g.left, y: g.belowY, w: g.textW, rows: g.belowRows, pitch: g.pitch, seed: o.seed ?? 5, versals: [Math.min(2, g.belowRows - 1)], ink: "onCard" });
+  const s = Math.round(92 * u);
+  seal(k, id, s, o.sealLetter ?? "Q", o.sealStyle, { absolute: { x: w - s - 34 * u, y: h - s * 1.42 - 10 * u } });
+  return { id, vine: border };
+}
+
+export {
+  manuscriptBrand,
+  GRAIN,
+  shadow2 as shadow,
+  draw,
+  vellum,
+  revellum,
+  ruling,
+  vine,
+  growVine,
+  initial,
+  gild,
+  seal,
+  script,
+  snail,
+  manicule,
+  folioPlan,
+  folio
+};

package/dist/chunks/chunk-NFDVSIX2.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-G3YVVHCF.js";
+import {
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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
+};