@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-2KS3HQ6F.js

@@ -0,0 +1,304 @@
+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 {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  presetPaint,
+  shaderPreset
+} from "./chunk-E6EMPOWS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/game/shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 1920;
+var H = 1080;
+function gameKit(name, presetId = "game-1080p") {
+  const k = new Kit(name, preset(presetId));
+  k.quantizeGeometry = true;
+  k.doc = { ...k.doc, settings: { ...k.doc.settings, showAdvance: { on: "click" }, showLoop: false } };
+  return k;
+}
+var vn = (k, id) => {
+  const v = k.doc.variables?.[id];
+  if (!v) throw new Error(`no variable ${id}`);
+  return v.name;
+};
+function gameVar(k, collection, name, type, value) {
+  const id = k.variable(collection, name, type, value);
+  return { id, n: vn(k, id) };
+}
+var SHEET_COLUMNS = 4;
+function screen(k, name, o) {
+  const id = o.first ? k.sheet : k.addScreen(name);
+  k.nameSheet(id, name);
+  const page = k.doc.nodes[k.pageId];
+  const index = page.childIds.filter((c) => k.doc.nodes[c]?.type === "FRAME").indexOf(id);
+  const f = k.node(id);
+  k.patch(id, { x: index % SHEET_COLUMNS * (f.width + 120), y: Math.floor(index / SHEET_COLUMNS) * (f.height + 200) });
+  k.patch(id, {
+    fills: o.fills ?? k.paint(o.ground),
+    clipsContent: true,
+    layoutMode: "VERTICAL",
+    padding: { top: 0, right: 0, bottom: 0, left: 0 },
+    itemSpacing: 0,
+    primaryAxisAlignItems: "MIN",
+    counterAxisAlignItems: "MIN",
+    layoutSizingHorizontal: "FIXED",
+    layoutSizingVertical: "FIXED"
+  });
+  k.timeline(id, { duration: o.duration ?? 4e3, fps: 30 });
+  return id;
+}
+function box(k, parent, x, y, w, h, o = {}) {
+  return k.stack(parent, { ...o, width: w, height: h, absolute: { x, y } });
+}
+function label(k, parent, text, style, color, x, y, o = {}) {
+  return k.text(parent, text, { style, color, absolute: { x, y }, ...o.w ? { width: o.w } : { autoWidth: true }, ...o.align ? { align: o.align } : {}, ...o.name ? { name: o.name } : {}, ...o.effects ? { effects: o.effects } : {} });
+}
+function readout(k, parent, expression, rest, style, color, x, y, o = {}) {
+  const id = label(k, parent, rest, style, color, x, y, { w: o.w ?? 200, align: o.align, name: o.name ?? "Readout", effects: o.effects });
+  k.bindExpression(id, "characters", expression);
+  return id;
+}
+function shaderLayer(k, parent, shader, params, o = {}) {
+  const p = shaderPreset(shader);
+  if (!p) throw new Error(`no shader preset "${shader}"`);
+  const f = k.node(parent);
+  const fill = presetPaint({ id: "f1", type: "SHADER", visible: true, opacity: 1 }, p, params);
+  return k.rect(parent, o.w ?? f.width, o.h ?? f.height, [fill], { name: o.name ?? `${shader} backdrop`, absolute: { x: o.x ?? 0, y: o.y ?? 0 }, ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
+}
+var set = Kit.set;
+var when = Kit.when;
+var go = Kit.go;
+var back = () => Kit.go(null, "DISSOLVE", { navigation: "BACK", duration: 250 });
+var close = () => Kit.go(null, "INSTANT", { navigation: "CLOSE" });
+var overlay = (frame) => Kit.go(frame, "DISSOLVE", { navigation: "OVERLAY", duration: 200, overlay: { overlayPosition: "CENTER" } });
+function onAll(k, id, actions, o = {}) {
+  for (const a of actions) k.on(id, a, o);
+}
+var FOCUS_GLIDE = 140;
+function menu(k, screenId, items, o) {
+  const n = items.length;
+  const f = o.focus.n;
+  const ih = o.itemHeight ?? o.pitch - 12;
+  const w = o.horizontal ? o.width * n + o.pitch * (n - 1) : o.width;
+  const h = o.horizontal ? ih : o.pitch * (n - 1) + ih;
+  const list = box(k, screenId, o.x, o.y, w, h, { name: o.name ?? "Menu" });
+  items.forEach((it, i) => {
+    const x = o.horizontal ? i * (o.width + o.pitch) : 0;
+    const y = o.horizontal ? 0 : i * o.pitch;
+    const item = box(k, list, x, y, o.horizontal ? o.width : w, ih, { name: "Menu item" });
+    const plate = k.rect(item, o.horizontal ? o.width : w, ih, typeof o.plate === "string" ? o.plate : o.plate, { name: "Focus plate", radius: o.radius ?? 0, absolute: { x: 0, y: 0 } });
+    const near = `max(0, 1 - abs(${f} - ${i}))`;
+    k.bindExpression(plate, "opacity", near);
+    const lx = o.marker ? 64 : 28;
+    const t = label(k, item, it.label, o.style, o.color, lx, 0, { name: "Item label" });
+    const tn = k.node(t);
+    k.patch(t, { y: Math.round((ih - tn.height) / 2) });
+    k.bindExpression(t, "opacity", `0.62 + 0.38 * ${near}`);
+    if (o.nudge !== 0) k.bindExpression(t, "translateX", `${near} * ${o.nudge ?? 14}`);
+    if (o.marker) {
+      const z = o.marker.size ?? 22, my = Math.round(ih / 2);
+      const m = poly(k, item, [[24, my - z / 2], [24 + z * 0.8, my], [24, my + z / 2]], o.marker.color, { name: "Focus marker" });
+      k.bindExpression(m, "opacity", near);
+      k.bindExpression(m, "translateX", `(${near} - 1) * 12`);
+    }
+    if (it.hint) {
+      const hint = label(k, item, it.hint, o.hintStyle ?? o.style, o.color, lx, 0, { name: "Item hint", w: 360, align: "RIGHT" });
+      k.patch(hint, { x: (o.horizontal ? o.width : w) - 388, y: Math.round((ih - k.node(hint).height) / 2) });
+      k.bindExpression(hint, "opacity", `0.72 + 0.28 * ${near}`);
+    }
+    onAll(k, item, [set(o.focus.id, { value: i, glide: FOCUS_GLIDE }), ...o.onFocus?.(i) ?? []], { trigger: "MOUSE_ENTER" });
+    onAll(k, item, it.actions);
+  });
+  const guard = (c) => o.guard ? `(${o.guard}) && ${c}` : c;
+  const next = o.horizontal ? ["ArrowRight", "d"] : ["ArrowDown", "s"];
+  const prev = o.horizontal ? ["ArrowLeft", "a"] : ["ArrowUp", "w"];
+  const focused = o.onFocus ? [when(items.map((_, i) => ({ if: `${f} == ${i}`, then: o.onFocus(i) })))] : [];
+  for (const key of next) k.on(list, when([{ if: guard("true"), then: [set(o.focus.id, { expression: `(${f} + 1) % ${n}`, glide: FOCUS_GLIDE }), ...focused] }]), { key });
+  for (const key of prev) k.on(list, when([{ if: guard("true"), then: [set(o.focus.id, { expression: `(${f} + ${n - 1}) % ${n}`, glide: FOCUS_GLIDE }), ...focused] }]), { key });
+  const choose = when(items.map((it, i) => ({ if: guard(`${f} == ${i}`), then: it.actions })));
+  for (const key of ["Enter", " "]) k.on(list, choose, { key });
+  if (o.escape) for (const a of o.escape) k.on(list, a, { key: "Escape" });
+  return list;
+}
+function slider(k, parent, o) {
+  const min = o.min ?? 0, max = o.max ?? 100, step = o.step ?? 10;
+  const v = o.variable.n;
+  const trackX = 360, trackW = o.width - trackX - 200;
+  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.label} slider` });
+  label(k, row, o.label, o.labelStyle, o.ink, 0, 12, { name: "Setting name" });
+  const minus = box(k, row, trackX - 60, 8, 40, 40, { name: "Step down", radius: 20, stroke: { color: o.track, width: 2 }, align: "CENTER", justify: "CENTER" });
+  k.text(minus, "\u2212", { style: o.valueStyle, color: o.ink, autoWidth: true, name: "Minus" });
+  const plus = box(k, row, trackX + trackW + 20, 8, 40, 40, { name: "Step up", radius: 20, stroke: { color: o.track, width: 2 }, align: "CENTER", justify: "CENTER" });
+  k.text(plus, "+", { style: o.valueStyle, color: o.ink, autoWidth: true, name: "Plus" });
+  const track = box(k, row, trackX, 22, trackW, 12, { name: "Track", radius: 6, fill: o.track });
+  const frac = `clamp((${v} - ${min}) / ${max - min}, 0, 1)`;
+  const fill = k.rect(track, trackW, 12, o.fill, { name: "Fill", radius: 6, absolute: { x: 0, y: 0 } });
+  k.bindExpression(fill, "width", `${frac} * ${trackW}`);
+  const knob = k.ellipse(row, 28, o.knob, { name: "Knob", absolute: { x: trackX - 14, y: 14 } });
+  k.bindExpression(knob, "x", `${trackX - 14} + ${frac} * ${trackW}`);
+  const notches = Math.round((max - min) / step);
+  for (let i = 0; i <= notches; i++) {
+    const hit = box(k, row, trackX + i / notches * trackW - trackW / notches / 2, 8, trackW / notches, 40, { name: "Notch" });
+    k.on(hit, set(o.variable.id, { value: min + i * step, glide: o.glide ?? 160 }));
+  }
+  readout(k, row, `round(${v}) + "${o.suffix ?? ""}"`, `${k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"]}${o.suffix ?? ""}`, o.valueStyle, o.ink, trackX + trackW + 80, 12, { w: 120, align: "RIGHT", name: "Value" });
+  const down = set(o.variable.id, { expression: `max(${min}, ${v} - ${step})`, glide: o.glide ?? 160 });
+  const up = set(o.variable.id, { expression: `min(${max}, ${v} + ${step})`, glide: o.glide ?? 160 });
+  k.on(minus, down);
+  k.on(plus, up);
+  if (o.focus) {
+    const here = `${o.focus.n} == ${o.focus.index}`;
+    for (const key of ["ArrowLeft", "a"]) k.on(row, when([{ if: here, then: [down] }]), { key });
+    for (const key of ["ArrowRight", "d"]) k.on(row, when([{ if: here, then: [up] }]), { key });
+  }
+  return row;
+}
+function toggleComponent(k, o) {
+  if (k.hasComponent("Toggle")) return;
+  k.variantSet("Toggle", "State", ["Off", "On"], { direction: "HORIZONTAL", width: 132, height: 40, gap: 12, align: "CENTER", description: "A switch: click (or Enter while its row is focused) to flip the variable it drives; the knob glides across." }, (state, id) => {
+    const track = k.stack(id, { direction: "HORIZONTAL", width: 68, height: 36, radius: 18, padding: 4, fill: state === "On" ? o.on : o.track, justify: state === "On" ? "MAX" : "MIN", align: "CENTER", name: "Track" });
+    k.ellipse(track, 28, o.knob, { name: "Knob" });
+    k.text(id, state === "On" ? "ON" : "OFF", { style: o.stateStyle, color: o.ink, autoWidth: true, name: "State word" });
+  });
+}
+function toggle(k, parent, o) {
+  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.label} toggle` });
+  label(k, row, o.label, o.labelStyle, o.ink, 0, 12, { name: "Setting name" });
+  const on = k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"] === 1;
+  const sw = k.instance(row, on ? "Toggle/On" : "Toggle/Off", {}, { name: "Switch", absolute: { x: 300, y: 8 } });
+  const flip = [set(o.variable.id, { expression: `1 - ${o.variable.n}` }), when([{ if: `${o.variable.n} == 1`, then: [k.changeAction("Toggle/On", 220, "EASE_IN_OUT")] }, { then: [k.changeAction("Toggle/Off", 220, "EASE_IN_OUT")] }])];
+  onAll(k, sw, flip);
+  if (o.focus) k.on(sw, when([{ if: `${o.focus.n} == ${o.focus.index}`, then: flip }]), { key: "Enter" });
+  return row;
+}
+function keybind(k, parent, o) {
+  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.action} binding` });
+  label(k, row, o.action, o.labelStyle, o.ink, 0, 12, { name: "Action name" });
+  const cap = box(k, row, 300, 4, 180, 48, { name: "Key cap", radius: 8, fill: o.cap, align: "CENTER", justify: "CENTER" });
+  const key = k.text(cap, String(k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"] ?? ""), { style: o.capStyle, color: o.onCap, width: 172, align: "CENTER", name: "Key" });
+  k.bindExpression(key, "characters", `${o.rebind.n} == "${o.slot}" ? "PRESS A KEY" : ${o.variable.n}`);
+  const ring = k.rect(row, 188, 56, o.listening, { name: "Listening ring", radius: 12, absolute: { x: 296, y: 0 }, opacity: 0.35 });
+  k.bindExpression(ring, "visible", `${o.rebind.n} == "${o.slot}"`);
+  k.on(row, set(o.rebind.id, { value: o.slot }));
+  if (o.focus) k.on(row, when([{ if: `${o.focus.n} == ${o.focus.index} && ${o.rebind.n} == ""`, then: [set(o.rebind.id, { value: o.slot })] }]), { key: "Enter" });
+  return row;
+}
+function rebindListener(k, screenId, rebind, slots) {
+  k.on(screenId, when([
+    { if: `${rebind.n} != "" && $key == "Escape"`, then: [set(rebind.id, { value: "" })] },
+    ...slots.map((s) => ({ if: `${rebind.n} == "${s.slot}" && $key != "Enter"`, then: [set(s.variable.id, { expression: `$key == " " ? "SPACE" : upper($key)` }), set(rebind.id, { value: "" })] }))
+  ]), { key: "*" });
+}
+function bar(k, parent, o) {
+  const frame = box(k, parent, o.x, o.y, o.w, o.h, { name: o.name ?? "Bar", radius: o.radius ?? 0, fill: o.back, clip: true });
+  const width = (e) => `clamp((${e}) / (${o.max}), 0, 1) * ${o.w}`;
+  const place = (id, e) => {
+    k.bindExpression(id, "width", width(e));
+    if (o.fromRight) k.bindExpression(id, "x", `${o.w} - ${width(e)}`);
+  };
+  const name = o.name ?? "Bar";
+  if (o.chip) place(k.rect(frame, o.w, o.h, o.chip.color, { name: `${name} chip`, radius: o.radius ?? 0, absolute: { x: 0, y: 0 } }), o.chip.expression);
+  place(k.rect(frame, o.w, o.h, o.fill, { name: `${name} fill`, radius: o.radius ?? 0, absolute: { x: 0, y: 0 } }), o.value);
+  return frame;
+}
+function oneShot(k, name, o, build) {
+  const state = o.state ?? "Hit";
+  return k.variantSet(name, "State", ["Idle", state], { width: o.width, height: o.height, description: o.description }, build, (s) => s === state ? { timeline: { duration: o.duration } } : {});
+}
+var keys = (k, id, path, ks) => k.animate(id, path, ks);
+function drift(k, id, path, amp, freq, phase = 0) {
+  k.behave(id, path, [{ kind: "sine", amp, freq, phase }]);
+}
+function spin(k, id, rate) {
+  k.behave(id, "rotation", [{ kind: "spin", rate }]);
+}
+function glow(k, role, blur, a = 0.9) {
+  return { id: `g${blur}`, type: "DROP_SHADOW", color: k.color(role, a), offset: { x: 0, y: 0 }, blur, spread: 0, visible: true, showBehindTransparent: true };
+}
+function focusColumn(k, parent, o) {
+  const f = o.focus.n;
+  const plate = k.rect(parent, o.w, o.pitch - 8, o.plate, { name: "Row focus", radius: o.radius ?? 8, absolute: { x: o.x, y: o.y } });
+  k.bindExpression(plate, "y", `${o.y} + ${f} * ${o.pitch}`);
+  const g = (c) => o.guard ? `(${o.guard}) && ${c}` : c;
+  for (const key of ["ArrowDown", "s"]) k.on(parent, when([{ if: g("true"), then: [set(o.focus.id, { expression: `(${f} + 1) % ${o.count}`, glide: FOCUS_GLIDE })] }]), { key });
+  for (const key of ["ArrowUp", "w"]) k.on(parent, when([{ if: g("true"), then: [set(o.focus.id, { expression: `(${f} + ${o.count - 1}) % ${o.count}`, glide: FOCUS_GLIDE })] }]), { key });
+  if (o.escape) k.on(parent, when([{ if: g("true"), then: o.escape }]), { key: "Escape" });
+  return plate;
+}
+function focusRow(k, row, focus, index) {
+  k.on(row, set(focus.id, { value: index, glide: FOCUS_GLIDE }), { trigger: "MOUSE_ENTER" });
+}
+function poly(k, parent, pts, color, o = {}) {
+  const xs = pts.map((p) => p[0]), ys = pts.map((p) => p[1]);
+  const x0 = Math.min(...xs), y0 = Math.min(...ys);
+  const w = Math.max(1, Math.max(...xs) - x0), h = Math.max(1, Math.max(...ys) - y0);
+  const path = { closed: o.closed ?? o.stroke === void 0, points: pts.map(([x, y]) => ({ x: x - x0, y: y - y0 })) };
+  return k.vector(parent, w, h, [path], color, { name: o.name ?? "Shape", absolute: { x: x0, y: y0 }, ...o.stroke !== void 0 ? { strokeWidth: o.stroke } : {}, ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, ...o.effects ? { effects: o.effects } : {} });
+}
+var blurFx = (radius) => ({ id: `b${radius}`, type: "LAYER_BLUR", radius, visible: true });
+function arcPoints(cx, cy, r, a0, a1, steps = 48) {
+  const out = [];
+  for (let i = 0; i <= steps; i++) {
+    const a = a0 + (a1 - a0) * i / steps;
+    out.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+  }
+  return out;
+}
+function sector(k, parent, cx, cy, outer, inner, a0, a1, color, o = {}) {
+  const pts = inner > 0 ? [...arcPoints(cx, cy, outer, a0, a1), ...arcPoints(cx, cy, inner, a1, a0)] : [[cx, cy], ...arcPoints(cx, cy, outer, a0, a1)];
+  return poly(k, parent, pts, color, { name: o.name ?? "Sector", opacity: o.opacity, effects: o.effects });
+}
+function arc(k, parent, cx, cy, r, a0, a1, color, width, o = {}) {
+  return poly(k, parent, arcPoints(cx, cy, r, a0, a1), color, { name: o.name ?? "Arc", stroke: width, closed: false, opacity: o.opacity, effects: o.effects });
+}
+
+export {
+  W,
+  H,
+  gameKit,
+  vn,
+  gameVar,
+  SHEET_COLUMNS,
+  screen,
+  box,
+  label,
+  readout,
+  shaderLayer,
+  set,
+  when,
+  go,
+  back,
+  close,
+  overlay,
+  onAll,
+  FOCUS_GLIDE,
+  menu,
+  slider,
+  toggleComponent,
+  toggle,
+  keybind,
+  rebindListener,
+  bar,
+  oneShot,
+  keys,
+  drift,
+  spin,
+  glow,
+  focusColumn,
+  focusRow,
+  poly,
+  blurFx,
+  arcPoints,
+  sector,
+  arc
+};

package/dist/chunks/chunk-2MMUSDPX.js

@@ -0,0 +1,50 @@
+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 {
+  slideshow
+} from "./chunk-R63EHB4Z.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/slideshow/birthday.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-birthday",
+  song: "bright",
+  meta: {
+    name: "Birthday montage",
+    description: "A bright half-minute birthday montage: a title card with the name, cake and candles and friends cut on the beats of an upbeat keys track (made by PopCraft, CC0), straight cuts, pushes, slides and light leaks, captions that land on the beat, and a closing card. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "birthday", "party", "celebration", "photo", "music", "beat", "scenes", "montage", "video"],
+    platforms: ["instagram", "tiktok", "facebook", "youtube"],
+    formats: ["video", "reel", "post"],
+    useCases: ["event", "invitation"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  brand: { paper: "#FFF6EA", onPaper: "#2A2344", accent: "#FF7A59", shade: "#1D1830", onPhoto: "#FFFFFF", leak: "#FF9E5E" },
+  fields: { names: "Maya", date: "Thirty \xB7 May 9, 2026" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "birthday-00", kicker: "Happy birthday", beats: 8, move: "in", focus: 0.5 },
+    { kind: "photo", name: "The cake", photo: "birthday-01", layout: "matted", caption: "Three layers, no regrets", beats: 4, move: "right", into: "push" },
+    { kind: "photo", name: "Make a wish", photo: "birthday-02", caption: "Make a wish", beats: 6, move: "in" },
+    { kind: "photo", name: "Lights", photo: "birthday-03", caption: "The garden, strung with lights", beats: 4, move: "up", into: "slide" },
+    { kind: "chapter", name: "Chapter 1", kicker: "And then", title: "The party", beats: 4 },
+    { kind: "photo", name: "Guest of honour", photo: "birthday-05", layout: "matted", caption: "The guest of honour (sort of)", beats: 4, move: "in", into: "push" },
+    { kind: "photo", name: "The toast", photo: "birthday-06", caption: "To thirty more", beats: 6, move: "left", into: "cut" },
+    { kind: "photo", name: "Blow", photo: "birthday-04", caption: "One breath, thirty candles", beats: 6, move: "in", anchor: [0.4, 0.55], into: "leak" },
+    { kind: "photo", name: "Number three", photo: "birthday-07", layout: "matted", caption: "Where it all started", place: "Birthday number three", beats: 6, move: "right" },
+    { kind: "photo", name: "Here\u2019s to you", photo: "birthday-08", caption: "Here\u2019s to you", beats: 8, move: "in", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "With love, from all of us" }
+  ]
+};
+var birthday_default = slideshow(story);
+
+export {
+  story,
+  birthday_default
+};

package/dist/chunks/chunk-2NC7ZTTZ.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-23QLVI6N.js";
+import {
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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
+};