@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-42KAI6KA.js

@@ -0,0 +1,141 @@
+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 {
+  idIndex
+} from "./chunk-ZV7E5HA5.js";
+import {
+  init_time,
+  localTime,
+  timeShift
+} from "./chunk-AYZ32MGJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/motion/video-clip.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/motion/layer-time-edit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_time();
+function layerBar(nodes, id, frameId, duration) {
+  const n = nodes[id];
+  const parentShift = n?.parentId && n.parentId !== frameId ? timeShift(nodes, n.parentId, frameId) : 0;
+  const own = timeShift(nodes, id, frameId);
+  const span = n?.motion?.span;
+  const inAt = span ? span.in + parentShift : void 0, outAt = span?.out !== void 0 ? span.out + parentShift : void 0;
+  const start = inAt !== void 0 ? Math.max(own, inAt) : own;
+  return { start, end: Math.max(start, outAt ?? duration), trimmedIn: inAt !== void 0 && inAt >= own, trimmedOut: outAt !== void 0 };
+}
+var withMotion = (motion, patch) => ({ tracks: {}, ...motion, ...patch });
+function slideLayer(motion, dt) {
+  const d = Math.round(dt);
+  if (!d) return motion;
+  const offset = (motion?.timeOffset ?? 0) + d;
+  const span = motion?.span ? { in: motion.span.in + d, ...motion.span.out !== void 0 ? { out: motion.span.out + d } : {} } : void 0;
+  const next = withMotion(motion, { timeOffset: offset });
+  if (span) next.span = span;
+  if (!offset) delete next.timeOffset;
+  return next;
+}
+function trimLayer(motion, edge, at, opts) {
+  const min = opts.minMs ?? 1;
+  const span = motion?.span;
+  let lo = span?.in ?? opts.naturalIn, hi = span?.out;
+  if (edge === "in") lo = Math.round(Math.min(at, (hi ?? Infinity) - min));
+  else hi = Math.round(Math.max(at, lo + min));
+  const keepIn = lo > opts.naturalIn, keepOut = hi !== void 0 && hi < opts.endMs;
+  const next = withMotion(motion, {});
+  if (keepIn || keepOut) next.span = { in: keepIn ? lo : Math.min(lo, opts.naturalIn), ...keepOut ? { out: hi } : {} };
+  else delete next.span;
+  const empty = !Object.keys(next.tracks).length && next.timeOffset === void 0 && next.span === void 0 && next.stagger === void 0;
+  return empty ? void 0 : next;
+}
+
+// lib/motion/video-clip.ts
+init_time();
+var MIN_VIDEO_SPEED = 0.25;
+var MAX_VIDEO_SPEED = 4;
+var clampSpeed = (speed) => typeof speed === "number" && Number.isFinite(speed) && speed > 0 ? Math.max(MIN_VIDEO_SPEED, Math.min(MAX_VIDEO_SPEED, speed)) : 1;
+var fillsOf = (node) => node?.fills ?? [];
+var isVideoPaint = (p) => p?.type === "VIDEO" && typeof p.videoHash === "string" && !!p.videoHash;
+var videoFillIndex = (node) => fillsOf(node).findIndex((p) => isVideoPaint(p) && p.visible !== false);
+var videoNodeIds = idIndex((n) => videoFillIndex(n) >= 0);
+var sourceMsAt = (p, t) => (p.videoIn ?? 0) + t * clampSpeed(p.videoSpeed);
+function videoClipOf(nodes, id, frameId, duration) {
+  const node = nodes[id];
+  const fill = videoFillIndex(node);
+  if (fill < 0) return null;
+  const paint = fillsOf(node)[fill];
+  const bar = layerBar(nodes, id, frameId, duration);
+  const zero = timeShift(nodes, id, frameId);
+  const speed = clampSpeed(paint.videoSpeed);
+  return { nodeId: id, fill, paint, start: bar.start, end: bar.end, zero, speed, in: sourceMsAt(paint, bar.start - zero), out: sourceMsAt(paint, bar.end - zero) };
+}
+function withVideoPaint(node, index, patch) {
+  const fills = fillsOf(node);
+  const cur = fills[index];
+  if (!cur) return node;
+  const next = { ...cur, ...patch };
+  for (const k of Object.keys(patch)) if (next[k] === void 0) delete next[k];
+  if (Object.keys(next).every((k) => next[k] === cur[k]) && Object.keys(next).length === Object.keys(cur).length) return node;
+  return { ...node, fills: fills.map((f, i) => i === index ? next : f) };
+}
+var VIDEO_TRANSITIONS = ["DISSOLVE", "DIP_BLACK", "DIP_WHITE"];
+var BLACK = { r: 0, g: 0, b: 0, a: 1 };
+var WHITE = { r: 1, g: 1, b: 1, a: 1 };
+function transitionPose(node, fills, tr, into) {
+  const p = Math.max(0, Math.min(1, into / Math.max(1, tr.duration)));
+  if (tr.type === "DISSOLVE") return { node: { ...node, opacity: (node.opacity ?? 1) * p }, fills };
+  const color = tr.type === "DIP_WHITE" ? WHITE : BLACK;
+  if (p < 0.5) return { node, fills: [{ type: "SOLID", color, opacity: p * 2, visible: true }, ...fills.map((f) => ({ ...f, visible: false }))] };
+  return { node, fills: [{ type: "SOLID", color, opacity: (1 - p) * 2, visible: true }, ...fills] };
+}
+function poseVideoTimes(nodes, frameId, time, patches) {
+  for (const id of videoNodeIds(nodes)) {
+    if (id === frameId) continue;
+    const t = localTime(nodes, id, frameId, time);
+    if (typeof t !== "number") continue;
+    let node = patches[id] ?? nodes[id];
+    if (t < 0) {
+      if (node.visible !== false) patches[id] = { ...node, visible: false };
+      continue;
+    }
+    const fills = fillsOf(node);
+    let next = null;
+    let tr;
+    fills.forEach((p, i) => {
+      if (!isVideoPaint(p)) return;
+      tr ??= p.videoTransition;
+      if (p.videoPlayback === "PAUSED") return;
+      (next ??= fills.slice())[i] = { ...p, videoTime: Math.max(0, sourceMsAt(p, t) / 1e3) };
+    });
+    if (tr) {
+      const into = time - layerBar(nodes, id, frameId, 0).start;
+      if (into >= 0 && into < tr.duration) {
+        const posed = transitionPose(node, next ?? fills.slice(), tr, into);
+        node = posed.node;
+        next = posed.fills;
+      }
+    }
+    if (next) patches[id] = { ...node, fills: next };
+  }
+}
+
+export {
+  slideLayer,
+  trimLayer,
+  MIN_VIDEO_SPEED,
+  MAX_VIDEO_SPEED,
+  clampSpeed,
+  fillsOf,
+  videoNodeIds,
+  videoClipOf,
+  withVideoPaint,
+  VIDEO_TRANSITIONS,
+  poseVideoTimes
+};

package/dist/chunks/chunk-42X4TCTL.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 {
+  scanPaths
+} from "./chunk-VXDAAHSF.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  blackShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/saas/style-terminal-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SHARD = {
+  name: "Shardline",
+  site: "shardline.example",
+  cli: "shard",
+  version: "1.0",
+  pitch: "Split your test suite across 64 machines. A 14 minute CI run comes back in 52 seconds.",
+  tests: 2418,
+  runners: 64,
+  region: "us-east-2",
+  before: "14m08s",
+  after: "52.3s",
+  saved: "13m16s",
+  install: "npx shard init",
+  run: "shard run --runners 64",
+  /** A month per seat; a year is billed at the second figure a month. */
+  team: 20,
+  teamYear: 16,
+  scale: 60,
+  scaleYear: 48,
+  freeMinutes: "2,000"
+};
+var DARK = {
+  paper: "#090C0A",
+  text: "#E4F1E7",
+  onPaper: "#A9C6B1",
+  primary: "#3BE37D",
+  onPrimary: "#03150A",
+  card: "#0E1310",
+  onCard: "#E4F1E7",
+  cardMuted: "#97B6A0"
+};
+var DARK_SCENERY = { green: "#3BE37D", red: "#FF6F61", cyan: "#5AD6E8", amber: "#FFC753", line: "#1B261F", edge: "#2F4236", well: "#060807", scan: "#000000", ink: "#03150A" };
+var LIGHT = {
+  paper: "#F1EFE6",
+  text: "#121712",
+  onPaper: "#3F4B42",
+  primary: "#0B7A38",
+  onPrimary: "#F2FFF6",
+  card: "#FBFAF5",
+  onCard: "#121712",
+  cardMuted: "#4D5B51"
+};
+var LIGHT_SCENERY = { green: "#0B7A38", red: "#C3352A", cyan: "#0B7787", amber: "#8F5B00", line: "#DCD9CD", edge: "#B5B1A1", well: "#E9E6DA", scan: "#000000", ink: "#F2FFF6" };
+function termBrand(k, fields, o = {}) {
+  k.brand({ ...o.light ? LIGHT : DARK }, { name: SHARD.name, site: SHARD.site, ...fields });
+  k.palette({ ...o.light ? LIGHT_SCENERY : DARK_SCENERY });
+}
+function mono(k, name, size, o = {}) {
+  k.textStyle(name, { ...MONO, size, fontWeight: o.weight ?? 500, lineHeight: Math.round(size * (o.lead ?? 1.5)), letterSpacing: o.spacing ?? 0 });
+  return name;
+}
+var cell = (size) => size * 0.6;
+var gridDots = (w, h, cw, lh) => {
+  const out = [];
+  for (let y = lh; y < h; y += lh) for (let x = cw; x < w; x += cw * 2) out.push(box(Math.round(x), Math.round(y), 2, 2));
+  return out;
+};
+function ground(k, sheet, w, h, o = {}) {
+  k.vector(sheet, w, h, gridDots(w, h, o.cw ?? 24, o.lh ?? 40), k.tint("text", 0.09), { name: "Cell grid", absolute: { x: 0, y: 0 } });
+}
+function scan(k, sheet, opacity = 0.16) {
+  const { width: w, height: h } = k.node(sheet);
+  k.vector(sheet, w, h, scanPaths(w, h), "scan", { name: "Scanlines", opacity, absolute: { x: 0, y: 0 } });
+}
+function fitGround(k, sheet, o = {}) {
+  const { width: w, height: h } = k.node(sheet);
+  for (const id of k.named(sheet, "Cell grid")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: gridDots(w, h, o.cw ?? 24, o.lh ?? 40) });
+  for (const id of k.named(sheet, "Scanlines")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: scanPaths(w, h) });
+}
+function minimap(k, parent, o) {
+  const cw = o.cw ?? 14, lh = o.lh ?? 28, h = o.rows * lh;
+  const f = k.frame(parent, { x: o.x, y: o.y, width: o.width, height: h }, { name: o.name ?? "Minimap", clip: true });
+  let s = o.seed ?? 7;
+  const r = () => {
+    s = s * 16807 % 2147483647;
+    return s / 2147483647;
+  };
+  const dim = [], lit = [], key = [];
+  const cols = Math.floor(o.width / cw);
+  for (let i = 0; i < o.rows * 2; i++) {
+    let x = Math.floor(r() * 4) * 2;
+    const words = 1 + Math.floor(r() * 5);
+    for (let w = 0; w < words && x < cols - 2; w++) {
+      const len = Math.min(cols - x, 2 + Math.floor(r() * 9));
+      const p = box(x * cw, i * lh + lh * 0.3, len * cw - cw * 0.4, lh * 0.4);
+      (w === 0 ? key : r() > 0.8 ? lit : dim).push(p);
+      x += len + 1;
+    }
+  }
+  k.vector(f, o.width, h * 2, dim, k.tint("text", 0.13), { name: "Code marks", absolute: { x: 0, y: 0 } });
+  k.vector(f, o.width, h * 2, key, k.tint("cyan", 0.32), { name: "Code keys", absolute: { x: 0, y: 0 } });
+  k.vector(f, o.width, h * 2, lit, k.tint("primary", 0.4), { name: "Code lit", absolute: { x: 0, y: 0 } });
+  if (o.scroll) {
+    const steps2 = Math.floor(o.scroll.duration / o.scroll.every);
+    for (const id of k.named(f, "Code marks").concat(k.named(f, "Code keys"), k.named(f, "Code lit"))) {
+      k.animate(id, "translateY", Array.from({ length: steps2 + 1 }, (_, i) => ({ t: i * o.scroll.every, v: -(i % o.rows * lh), ...i < steps2 ? { ease: ease.hold } : {} })));
+    }
+  }
+  return f;
+}
+function tuiBox(k, parent, o) {
+  const wt = o.weight ?? 2, half = wt / 2, inset = o.inset ?? 12;
+  const frame = k.stack(parent, { width: o.w, height: o.h, name: o.name ?? "Box", ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.fill) k.rect(frame, o.w, o.h, o.fill, { name: "Box ground", absolute: { x: 0, y: 0 } });
+  const top = inset + 6;
+  const lw = o.label ? (o.labelWidth ?? 0) + 24 : 0;
+  const ry = top;
+  const paths = [{ closed: false, points: [
+    { x: inset + 24 + lw, y: ry },
+    { x: o.w - inset - half, y: ry },
+    { x: o.w - inset - half, y: o.h - inset - half },
+    { x: inset + half, y: o.h - inset - half },
+    { x: inset + half, y: ry },
+    { x: inset + 24, y: ry }
+  ] }];
+  k.vector(frame, o.w, o.h, paths, [], { name: "Box line", absolute: { x: 0, y: 0 }, stroke: { color: o.color ?? "edge", width: wt, cap: "NONE", join: "MITER" } });
+  if (o.label) k.text(frame, o.label, { style: o.style, color: o.ink ?? "cardMuted", autoWidth: true, name: "Box label", absolute: { x: inset + 36, y: 0 } });
+  const pad = o.pad ?? 24;
+  const body = k.stack(frame, { width: o.w - inset * 2 - pad * 2, gap: o.gap ?? 0, absolute: { x: inset + pad, y: top + pad }, name: "Box body" });
+  return { frame, body };
+}
+function dashRule(k, parent, w, o = {}) {
+  const cw = o.cw ?? 14;
+  return k.vector(parent, w, o.weight ?? 2, [{ closed: false, points: [{ x: 0, y: (o.weight ?? 2) / 2 }, { x: w, y: (o.weight ?? 2) / 2 }] }], [], { name: o.name ?? "Rule", stroke: { color: o.color ?? "edge", width: o.weight ?? 2, dash: [cw * 0.7, cw * 0.3], cap: "NONE" }, ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function termLine(k, parent, segs, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: o.gap ?? 0, name: o.name ?? "Line", ...o.height ? { height: o.height } : {} });
+  for (const s of segs) {
+    if (s.tag) {
+      const t = k.stack(row, { direction: "HORIZONTAL", width: "HUG", fill: s.c ?? "green", padding: { top: 0, right: 8, bottom: 0, left: 8 }, name: s.name ?? "Tag" });
+      k.text(t, s.t, { style: o.style, color: s.tag, autoWidth: true, name: `${s.name ?? "Tag"} words` });
+    } else if (s.width) k.text(row, s.t, { style: o.style, color: s.c ?? "onCard", width: s.width, name: s.name ?? "Words" });
+    else k.text(row, s.t, { style: o.style, color: s.c ?? "onCard", autoWidth: true, name: s.name ?? "Words" });
+  }
+  return row;
+}
+function promptLine(k, parent, command, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: 0, align: "CENTER", name: o.name ?? "Prompt line" });
+  if (o.dir) k.text(row, `${o.dir} `, { style: o.style, color: "cyan", autoWidth: true, name: "Prompt dir" });
+  k.text(row, "$ ", { style: o.style, color: "green", autoWidth: true, name: "Prompt sign" });
+  const box2 = k.stack(row, { width: o.width, height: Math.round(o.size * 1.5), name: "Command box" });
+  k.text(box2, command, { style: o.style, color: "onCard", width: o.width, name: o.text ?? "Command" });
+  k.rect(box2, Math.round(cell(o.size)), Math.round(o.size * 1.2), "primary", { name: o.caret ?? "Command caret", absolute: { x: 0, y: 0 } });
+  return row;
+}
+function cursor(k, parent, size, o = {}) {
+  return k.rect(parent, Math.round(cell(size)), Math.round(size * 1.2), o.role ?? "primary", { name: o.name ?? "Cursor", ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function blinking(k, id, freq) {
+  k.patch(id, { opacity: 0.5 });
+  k.behave(id, "opacity", [{ kind: "sine", amp: 12, freq }, { kind: "clamp", min: 0, max: 1 }]);
+}
+var SPIN = ["[|]", "[/]", "[-]", "[\\]"];
+function spinner(k, id, from, to, o = {}) {
+  const every = o.every ?? 100, keys = [];
+  if (o.before !== void 0 && from > 0) keys.push({ t: 0, v: o.before, ease: ease.hold });
+  for (let t = from, i = 0; t < to; t += every, i++) keys.push({ t, v: SPIN[i % SPIN.length], ease: ease.hold });
+  k.animate(id, "text.content", [...keys, { t: to, v: o.done ?? "[+]" }]);
+}
+function steps(k, id, values) {
+  k.animate(id, "text.content", values.map(([t, v], i) => i < values.length - 1 ? { t, v, ease: ease.hold } : { t, v }));
+}
+function clockFrames(at, duration, fromS, toS, n) {
+  const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.round(s % 60)).padStart(2, "0")}`;
+  return Array.from({ length: n + 1 }, (_, i) => {
+    const u = i / n, e = 1 - (1 - u) ** 3;
+    return [Math.round(at + duration * u), fmt(Math.round(fromS + (toS - fromS) * e))];
+  });
+}
+function blocks(k, parent, o) {
+  const w = Math.round(o.cells * o.cw);
+  const bar = k.stack(parent, { width: w, height: o.h, name: o.name ?? "Bar" });
+  const dots = [];
+  for (let y = 2; y < o.h - 1; y += 4) for (let x = 1; x < w; x += 4) dots.push(box(x, y, 2, 2));
+  k.vector(bar, w, o.h, dots, k.tint("cardMuted", 0.45), { name: "Bar track", absolute: { x: 0, y: 0 } });
+  for (let i = 0; i < o.cells; i++) k.rect(bar, Math.ceil(o.cw), o.h, o.role ?? "green", { name: "Block", absolute: { x: Math.round(i * o.cw), y: 0 } });
+  return bar;
+}
+function runnerGrid(k, parent, o) {
+  const rows = Math.ceil(o.n / o.cols), w = o.cols * (o.size + o.gap) - o.gap, h = rows * (o.size + o.gap) - o.gap;
+  const f = k.stack(parent, { width: w, height: h, name: o.name ?? "Runners" });
+  const cells = [];
+  for (let i = 0; i < o.n; i++) cells.push(box(i % o.cols * (o.size + o.gap), Math.floor(i / o.cols) * (o.size + o.gap), o.size, o.size));
+  k.vector(f, w, h, cells, "line", { name: "Runner slots", absolute: { x: 0, y: 0 } });
+  const order = Array.from({ length: o.n }, (_, i) => i);
+  let s = o.seed ?? 11;
+  for (let i = order.length - 1; i > 0; i--) {
+    s = s * 16807 % 2147483647;
+    const j = s % (i + 1);
+    [order[i], order[j]] = [order[j], order[i]];
+  }
+  for (const i of order) k.rect(f, o.size, o.size, "green", { name: "Runner", absolute: { x: i % o.cols * (o.size + o.gap), y: Math.floor(i / o.cols) * (o.size + o.gap) } });
+  return f;
+}
+var lift = (y = 30, blur = 80, a = 0.6) => blackShadow(a, y, blur);
+function termWindow(k, parent, o) {
+  const bar = o.bar ?? 52, pad = o.pad ?? 28;
+  const win = k.stack(parent, { width: o.w, height: o.h, fill: "card", radius: 6, clip: true, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: o.name ?? "Terminal", ...o.shadow === false ? {} : { effects: [lift()] }, ...o.absolute ? { absolute: o.absolute } : {} });
+  const top = k.stack(win, { direction: "HORIZONTAL", height: bar, fill: "well", align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 20, bottom: 0, left: 0 }, name: "Title strip" });
+  const tab = k.stack(top, { direction: "HORIZONTAL", width: "HUG", height: bar, fill: "card", align: "CENTER", gap: 12, padding: { top: 0, right: 20, bottom: 0, left: 20 }, name: "Tab" });
+  k.rect(tab, 10, 10, "green", { name: "Tab mark" });
+  k.text(tab, o.left, { style: o.style, color: "onCard", autoWidth: true, name: "Tab title" });
+  if (o.right) k.text(top, o.right, { style: o.style, color: "cardMuted", autoWidth: true, name: "Shell" });
+  k.rect(win, "FILL", 2, "edge", { name: "Title rule" });
+  const body = k.stack(win, { height: o.h - bar - 2, padding: pad, gap: o.gap ?? 0, clip: true, name: "Session" });
+  return { win, body, bar };
+}
+function lockup(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(o.size * 0.45), align: "CENTER", name: o.name ?? "Lockup" });
+  const tile = k.stack(row, { width: "HUG", fill: "primary", radius: 2, padding: Math.round(o.size * 0.18), name: "Logo tile" });
+  k.logo(tile, o.size, o.size);
+  const words = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 4, align: "CENTER", name: "Brand words" });
+  k.text(words, "{{brand.name}}", { style: o.style, color: o.ink ?? "text", autoWidth: true, name: "Brand name" });
+  if (o.cursor !== false) k.rect(words, Math.round(o.size * 0.42), Math.round(o.size * 0.72), "primary", { name: "Brand cursor" });
+  return row;
+}
+var M = (size, weight, lead, spacing = 0) => ({ ...MONO, size, fontWeight: weight, lineHeight: Math.round(size * lead), letterSpacing: spacing });
+var WEB_TYPE = {
+  "Nav 15": M(15, 500, 1.5),
+  "Brand 18": M(18, 700, 1.4),
+  "Button 15": M(15, 700, 1.5),
+  "Label 13": M(13, 500, 1.5, 0.5),
+  "Term 15": M(15, 500, 1.6),
+  "Term 13": M(13, 500, 1.6),
+  "Display 60": M(60, 800, 1.1, -2.4),
+  "Display 50": M(50, 800, 1.1, -2),
+  "Display 40": M(40, 800, 1.12, -1.4),
+  "Display 32": M(32, 800, 1.15, -1),
+  "Section 36": M(36, 700, 1.2, -1),
+  "Section 30": M(30, 700, 1.2, -0.8),
+  "Section 24": M(24, 700, 1.25, -0.5),
+  "Lead 18": M(18, 400, 1.6),
+  "Lead 16": M(16, 400, 1.6),
+  "Body 15": M(15, 400, 1.6),
+  "Small 13": M(13, 400, 1.6),
+  "Figure 64": M(64, 800, 1.05, -2),
+  "Figure 44": M(44, 800, 1.05, -1.4),
+  "Quote 24": M(24, 500, 1.5, -0.3),
+  "Quote 18": M(18, 500, 1.5),
+  "Price 40": M(40, 800, 1.1, -1.2),
+  "Price 32": M(32, 800, 1.1, -1)
+};
+var WEB_STEPS = {
+  "Display 60": { laptop: "Display 50", tablet: "Display 50", mobile: "Display 32" },
+  "Section 36": { tablet: "Section 30", mobile: "Section 24" },
+  "Lead 18": { mobile: "Lead 16" },
+  "Figure 64": { mobile: "Figure 44" },
+  "Quote 24": { mobile: "Quote 18" },
+  "Price 40": { mobile: "Price 32" }
+};
+function sectionHead(k, parent, o) {
+  const head = k.stack(parent, { gap: 14, name: o.name });
+  k.text(head, `## ${o.label}`, { style: o.s("Label 13"), color: "onPaper", name: `${o.name} label` });
+  k.text(head, o.title, { style: o.s(o.titleStyle ?? "Section 36"), color: "text", name: `${o.name} title` });
+  if (o.body) k.text(head, o.body, { style: o.s("Body 15"), color: "onPaper", name: `${o.name} body` });
+  return head;
+}
+function marquee(k, parent, o) {
+  const period = o.names.length * o.item;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: o.height, clip: true, name: o.name ?? "Marquee" });
+  const n = Math.floor(o.duration / o.every);
+  o.names.forEach((label, i) => {
+    const cellId = k.stack(strip, { direction: "HORIZONTAL", width: o.item, height: o.height, align: "CENTER", absolute: { x: 0, y: 0 }, name: "Wordmark" });
+    k.text(cellId, `[ ${label} ]`, { style: o.style, color: "onPaper", autoWidth: true, name: "Wordmark name" });
+    const at = (j) => {
+      const raw = i * o.item - j * o.step;
+      return ((raw + o.item) % period + period) % period - o.item;
+    };
+    k.patch(cellId, { translateX: at(0) });
+    k.animate(cellId, "translateX", Array.from({ length: n + 1 }, (_, j) => ({ t: j * o.every, v: at(j), ...j < n ? { ease: ease.hold } : {} })));
+  });
+  return strip;
+}
+function panel(k, parent, o) {
+  const p = k.stack(parent, { width: o.width ?? "FILL", fill: "card", stroke: { color: "edge", width: 2, align: "INSIDE" }, radius: 4, clip: true, name: o.name });
+  const head = k.stack(p, { direction: "HORIZONTAL", fill: "well", align: "CENTER", gap: 10, padding: { top: 8, right: 16, bottom: 8, left: 16 }, name: "Panel head" });
+  k.rect(head, 8, 8, "green", { name: "Panel mark" });
+  k.text(head, o.label, { style: o.style, color: "cardMuted", name: "Panel label" });
+  k.rect(p, "FILL", 2, "edge", { name: "Panel rule" });
+  const body = k.stack(p, { padding: o.pad ?? 20, gap: o.gap ?? 0, name: "Panel body" });
+  return { panel: p, body };
+}
+
+export {
+  SHARD,
+  termBrand,
+  mono,
+  cell,
+  ground,
+  scan,
+  fitGround,
+  minimap,
+  tuiBox,
+  dashRule,
+  termLine,
+  promptLine,
+  cursor,
+  blinking,
+  SPIN,
+  spinner,
+  steps,
+  clockFrames,
+  blocks,
+  runnerGrid,
+  lift,
+  termWindow,
+  lockup,
+  WEB_TYPE,
+  WEB_STEPS,
+  sectionHead,
+  marquee,
+  panel
+};

package/dist/chunks/chunk-43X3EJLW.js

@@ -0,0 +1,173 @@
+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 {
+  reelCuts,
+  reelSheet,
+  section
+} from "./chunk-D7LV62QH.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  hide,
+  patchAll
+} from "./chunk-QLV6445V.js";
+import {
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.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/motion/saas-changelog-drop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 0, 5);
+var { beat } = S;
+var ITEM = [2, 6, 10];
+var swaps = [captionSwap(["Dark mode is here.", "Replies that fill themselves.", "Your tickets, as CSV.", "Live for everyone today."], beat(1.5), S.duration - 30)];
+var counts = [{ layer: "Fixes figure", at: beat(13), duration: beat(2), counter: { from: 0, to: 14, prefix: "+" } }];
+var cues = [
+  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Version tile", preset: "pop-in", at: 0, params: { duration: 350 } },
+  { layer: "Version", preset: "pulse", at: beat(1), params: { duration: 500, amount: 0.05 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(1.5), params: { duration: 250 } },
+  { layer: "Dark tile", preset: "pop-in", at: beat(ITEM[0]), params: { duration: 380 } },
+  { layer: "Knob", preset: "slide-in", at: beat(ITEM[0] + 1), params: { duration: 300, direction: "left", distance: 64 } },
+  { layer: "Replies tile", preset: "pop-in", at: beat(ITEM[1]), params: { duration: 380 } },
+  { layer: "Filled reply", preset: "rise-in", at: beat(ITEM[1] + 1), params: { duration: 350 } },
+  { layer: "Export tile", preset: "pop-in", at: beat(ITEM[2]), params: { duration: 380 } },
+  { layer: "Export arrow", preset: "drop-in", at: beat(ITEM[2] + 1), params: { duration: 400 } },
+  { layer: "Fixes tile", preset: "pop-in", at: beat(13), params: { duration: 380 } },
+  { layer: "Call", preset: "pop-in", at: beat(16), params: { duration: 400 } },
+  { layer: "Call", preset: "pulse", at: beat(18), params: { duration: 600, amount: 0.05 } }
+];
+var saas_changelog_drop_default = defineTemplate({
+  id: "motion-saas-changelog-drop",
+  meta: {
+    name: "SaaS short: changelog drop",
+    description: "A 10-second \u201Cshipped this week\u201D reel in a bento look: the version lands first on a cobalt tile, then three items stamp into tiles of their own on the beat, each with a small drawing of the feature, and a fixes tile counts up. Music, burned-in captions, 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "changelog", "release notes", "shipped", "bento", "tiles", "product update", "captions", "music", "audio", "reel", "tiktok", "shorts", "build in public"],
+    platforms: ["x", "linkedin", "tiktok", "instagram", "youtube"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["changelog", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: changelog drop", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#E6E9ED", text: "#11141A", onText: "#FFFFFF", onPaper: "#48505E", primary: "#1447E6", onPrimary: "#FFFFFF", accent: "#FFD23F", onAccent: "#2A1F00", card: "#FFFFFF", onCard: "#11141A" },
+      { name: "Orbitdesk", version: "v2.4", site: "orbitdesk.example/new" }
+    );
+    k.palette({ night: "#14161C", onNight: "#F4F6F8", nightMuted: "#AEB6C2", track: "#2B303A", moon: "#FFE38A", mint: "#BDEBD2", onMint: "#0C2B1D", sheetLine: "#7CCBA4", bubble: "#EDF0F3", cardMuted: "#566070", shade: "#5B6472" });
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Version 168", { size: 168, fontWeight: 900, letterSpacing: -9, lineHeight: 150 });
+    k.textStyle("Shipped 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Tile 40", { size: 40, fontWeight: 800, letterSpacing: -1.3, lineHeight: 42 });
+    k.textStyle("Tile note 24", { size: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 30 });
+    k.textStyle("Mono 22", { ...mono, size: 22, fontWeight: 600, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Fixes 96", { size: 96, fontWeight: 900, letterSpacing: -5, lineHeight: 92, fontFeatures: { tnum: 1 } });
+    k.textStyle("Brand 28", { size: 28, fontWeight: 700, letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 48 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, letterSpacing: -0.6, lineHeight: 40 });
+    pill(k, "Button", { fill: "text", ink: "onText", style: "Button 32", label: "Read the changelog: orbitdesk.example/new", pad: [20, 34] });
+    const lift = [shadow(k, "shade", 0.16, 14, 34)];
+    const R = 38;
+    const sheet = reelSheet(k, S, { name: "Changelog drop", gap: 16 });
+    const ghost = (x, y, w, h) => k.rect(sheet, w, h, k.tint("text", 0.06), { name: "Empty tile", radius: R, absolute: { x, y } });
+    ghost(140, -60, 380, 270);
+    ghost(536, -60, 404, 270);
+    ghost(956, -60, 300, 270);
+    ghost(140, 1500, 250, 230);
+    ghost(406, 1500, 534, 230);
+    ghost(956, 1500, 300, 230);
+    ghost(140, 1746, 520, 230);
+    ghost(676, 1746, 264, 230);
+    ghost(-140, 660, 264, 320);
+    ghost(956, 590, 300, 250);
+    ghost(956, 856, 300, 250);
+    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, brand, { fill: "primary", size: 28, radius: 12 });
+    k.text(brand, "{{brand.name}} changelog \xB7 2 Oct 2026", { style: "Brand 28", color: "text", name: "Brand name" });
+    const rowA = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, height: 330, name: "Row A" });
+    const version = k.stack(rowA, { width: 410, height: "FILL", fill: "primary", radius: R, padding: 32, justify: "SPACE_BETWEEN", effects: lift, name: "Version tile" });
+    k.text(version, "Shipped this week", { style: "Shipped 34", color: "onPrimary", name: "Shipped" });
+    k.text(version, "{{brand.version}}", { style: "Version 168", color: "onPrimary", name: "Version" });
+    const dark = k.stack(rowA, { height: "FILL", fill: "night", radius: R, padding: 30, gap: 8, clip: true, effects: lift, name: "Dark tile" });
+    k.text(dark, "Dark mode", { style: "Tile 40", color: "onNight", name: "Dark title" });
+    k.text(dark, "Follows your system, or not.", { style: "Tile note 24", color: "nightMuted", name: "Dark note" });
+    k.ellipse(dark, 150, "moon", { name: "Moon", absolute: { x: 236, y: 190 } });
+    k.ellipse(dark, 150, "night", { name: "Moon shade", absolute: { x: 190, y: 160 } });
+    k.rect(dark, 136, 72, "track", { name: "Switch", radius: 36, absolute: { x: 30, y: 226 } });
+    k.ellipse(dark, 56, "onNight", { name: "Knob", absolute: { x: 102, y: 234 } });
+    const replies = k.stack(sheet, { height: 270, fill: "card", radius: R, padding: 30, gap: 8, effects: lift, name: "Replies tile" });
+    k.text(replies, "Saved replies with variables", { style: "Tile 40", color: "onCard", name: "Replies title" });
+    k.text(replies, "Write it once. It fills in the name, the order, the date.", { style: "Tile note 24", color: "cardMuted", name: "Replies note" });
+    const draft = k.stack(replies, { direction: "HORIZONTAL", width: "HUG", fill: "bubble", radius: 18, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Draft reply", absolute: { x: 30, y: 136 } });
+    k.text(draft, "Hi {first_name}, refund sent for #{order}.", { style: "Mono 22", color: "onCard", autoWidth: true, name: "Draft words" });
+    const filled = k.stack(replies, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 18, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Filled reply", absolute: { x: 166, y: 196 } });
+    k.text(filled, "Hi Priya, refund sent for #48213.", { style: "Mono 22", color: "onPrimary", autoWidth: true, name: "Filled words" });
+    const rowC = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, height: 250, name: "Row C" });
+    const csv = k.stack(rowC, { height: "FILL", fill: "mint", radius: R, padding: 30, gap: 8, clip: true, effects: lift, name: "Export tile" });
+    k.text(csv, "CSV export, one click", { style: "Tile 40", color: "onMint", width: 300, name: "Export title" });
+    k.text(csv, "Every ticket, every field.", { style: "Tile note 24", color: "onMint", width: 300, name: "Export note" });
+    const cells = [];
+    for (let r = 0; r < 6; r++) for (let c = 0; c < 3; c++) cells.push(box(c * 62, r * 34, 56, 28));
+    k.vector(csv, 186, 204, cells, "sheetLine", { name: "Sheet", absolute: { x: 340, y: 64 } });
+    k.vector(csv, 60, 70, [{ closed: true, points: [{ x: 20, y: 0 }, { x: 40, y: 0 }, { x: 40, y: 36 }, { x: 60, y: 36 }, { x: 30, y: 70 }, { x: 0, y: 36 }, { x: 20, y: 36 }] }], "onMint", { name: "Export arrow", absolute: { x: 252, y: 166 } });
+    const fixes = k.stack(rowC, { width: 250, height: "FILL", fill: "accent", radius: R, padding: 30, justify: "SPACE_BETWEEN", effects: lift, name: "Fixes tile" });
+    k.text(fixes, "+14", { style: "Fixes 96", color: "onAccent", name: "Fixes figure" });
+    k.text(fixes, "fixes, most of them yours", { style: "Tile note 24", color: "onAccent", name: "Fixes note" });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "card", ink: "onCard", radius: 26, pad: [16, 28], effects: lift });
+    k.instance(sheet, "Button", { Label: "Read the changelog: {{brand.site}}" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, reelCuts({ post: 40, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 12, counterAxisSpacing: 12, padding: { top: 44, right: 100, bottom: 44, left: 100 } });
+        hide(kit, id, ["Brand row"]);
+        patchAll(kit, id, "Row A", { height: 276 });
+        patchAll(kit, id, "Moon", { x: 272, y: 146 });
+        patchAll(kit, id, "Moon shade", { x: 226, y: 116 });
+        patchAll(kit, id, "Switch", { y: 176 });
+        patchAll(kit, id, "Knob", { y: 184 });
+        patchAll(kit, id, "Row C", { height: 232 });
+        patchAll(kit, id, "Sheet", { x: 376 });
+        patchAll(kit, id, "Export arrow", { x: 288, y: 148 });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_changelog_drop_default
+};