@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-BXRQWNQP.js

@@ -0,0 +1,390 @@
+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 {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  blackShadow,
+  bloom,
+  glow,
+  noise
+} from "./chunk-HVK5T4I5.js";
+import {
+  box,
+  r3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-37IU3FCE.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/departure-board-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function boardBrand(k, fields = {}, more = {}) {
+  k.brand(
+    { paper: "#0C0D10", text: "#F6F2E7", onPaper: "#CFCABB", primary: "#FFD21A", onPrimary: "#14130F", accent: "#FF5A36", onAccent: "#1A0700", card: "#F3ECD9", onCard: "#17181B", ...more },
+    { name: "Layover", site: "layover.example", ...fields }
+  );
+  k.palette({ housing: "#050607", flap: "#1F2229", seam: "#020203", flapInk: "#F8F4E9", flapDim: "#A9ADB7", rivet: "#3B3F48", lamp: "#FFB300", go: "#48E08E", rod: "#2A2D34" });
+}
+var shadow = (a = 0.4, y = 18, blur = 44) => blackShadow(a, y, blur);
+var grain = (seed, amount = 0.05, size = 2) => noise({ amount, size, seed });
+var flapH = (cell) => Math.round(cell * 1.4);
+var flapGap = (cell) => Math.max(3, Math.round(cell * 0.1));
+var flapsW = (n, cell) => n * cell + (n - 1) * flapGap(cell);
+function flapStyle(k, cell) {
+  const name = `Flap ${cell}`;
+  k.textStyle(name, { ...MONO, size: Math.round(cell * 0.96), fontWeight: 700, lineHeight: Math.round(cell * 1.1), textAlign: "CENTER" });
+  return name;
+}
+var flapRadius = (cell) => Math.max(3, Math.round(cell * 0.09));
+function seamPaths(cell) {
+  const h = flapH(cell), seam = cell < 50 ? 1.5 : Math.max(2, Math.round(cell * 0.035));
+  return [box(0, r3(h / 2 - seam / 2), cell, seam), box(0, r3(h / 2 - cell * 0.1), r3(cell * 0.055), r3(cell * 0.2)), box(r3(cell - cell * 0.055), r3(h / 2 - cell * 0.1), r3(cell * 0.055), r3(cell * 0.2))];
+}
+function leaves(k, tile, cell, hot) {
+  const h = flapH(cell);
+  k.vector(tile, cell, h, [box(0, 0, cell, h / 2)], [k.gradient({ from: "flapInk", to: "flapInk", angle: 90, fromOpacity: hot ? 0.3 : 0.1, toOpacity: 0 })], { name: "Flap sheen", absolute: { x: 0, y: 0 } });
+  k.vector(tile, cell, h, [box(0, h / 2, cell, h / 2)], [k.gradient({ from: "seam", to: "seam", angle: 90, fromOpacity: 0, toOpacity: hot ? 0.22 : 0.45 })], { name: "Flap shade", absolute: { x: 0, y: 0 } });
+  k.vector(tile, cell, h, seamPaths(cell), "seam", { name: "Flap seam", absolute: { x: 0, y: 0 }, opacity: hot ? 0.8 : 1 });
+}
+var tileBox = (cell, hot) => ({ width: cell, height: flapH(cell), fill: hot ? "primary" : "flap", radius: flapRadius(cell), align: "CENTER", justify: "CENTER", clip: true });
+function flapTile(k, cell, hot) {
+  const name = `Flap ${cell}${hot ? ", lit" : ""}`;
+  if (k.hasComponent(name)) return name;
+  const style = flapStyle(k, cell);
+  k.component(name, { ...tileBox(cell, hot), description: "One split-flap tile. Type one character into Letter; a space leaves the tile blank.", props: { Letter: "A" } }, (id) => {
+    k.propText(id, "Letter", { style, color: hot ? "onPrimary" : "flapInk", align: "CENTER" });
+    leaves(k, id, cell, hot);
+  });
+  return name;
+}
+var FLAP_HOWTO = "To change the words on a board, select a tile and type its Letter property (one tile, one letter; a blank tile takes a letter too, and a space blanks one)";
+function flaps(k, parent, word, o) {
+  const { cell } = o, n = Math.max(o.cols ?? 0, word.length), tile = flapTile(k, cell, !!o.hot);
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: flapsW(n, cell), height: flapH(cell), gap: flapGap(cell), name: o.name ?? "Flap row", ...o.absolute ? { absolute: o.absolute } : {} });
+  for (let i = 0; i < n; i++) k.instance(row, tile, { Letter: word[i] ?? " " }, { name: o.tile ?? "Flap" });
+  return row;
+}
+var GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+function flipIn(k, row, at, o = {}) {
+  const step = o.step ?? 70, flips = o.flips ?? 4, stagger = o.stagger ?? 34, rand = rng(o.seed ?? 5);
+  const tiles = (k.node(row).childIds ?? []).map((id) => k.node(id)).filter((n) => n.type === "INSTANCE" && String(n.componentProperties?.Letter ?? " ").trim() !== "");
+  tiles.forEach((tile, i) => {
+    const cell = tile.width, hot = k.hasComponent(`Flap ${cell}, lit`) && tile.componentId === k.componentIdOf(`Flap ${cell}, lit`);
+    const index = (k.node(row).childIds ?? []).indexOf(tile.id);
+    const cover = k.stack(row, { ...tileBox(cell, hot), name: "Flap flip", absolute: { x: index * (cell + flapGap(cell)), y: 0 } });
+    const glyph = k.text(cover, " ", { style: flapStyle(k, cell), color: hot ? "onPrimary" : "flapInk", align: "CENTER", name: "Flap flip letter" });
+    leaves(k, cover, cell, hot);
+    k.patch(cover, { opacity: 0 });
+    const start = at + i * stagger;
+    const shown = [{ t: 0, v: 1, ease: ease.hold }];
+    const says = start > 0 ? [{ t: 0, v: " ", ease: ease.hold }] : [];
+    const leaf = start > 0 ? [{ t: 0, v: 1, ease: ease.hold }] : [];
+    const run = (from) => {
+      for (let j = 0; j < flips; j++) {
+        const t = from + j * step;
+        says.push({ t, v: GLYPHS[Math.floor(rand() * GLYPHS.length)], ease: ease.hold });
+        leaf.push({ t, v: 0.1, ease: ease.out("cubic") }, { t: t + Math.round(step * 0.8), v: 1, ease: ease.hold });
+      }
+      shown.push({ t: from + flips * step, v: 0, ease: ease.hold });
+    };
+    run(start);
+    if (o.again !== void 0) {
+      shown.push({ t: o.again + i * stagger, v: 1, ease: ease.hold });
+      run(o.again + i * stagger);
+    }
+    if (o.clear !== void 0) {
+      const from = o.clear + i * stagger;
+      shown.push({ t: from, v: 1, ease: ease.hold });
+      run(from);
+      shown.pop();
+      const t = from + flips * step;
+      says.push({ t, v: " ", ease: ease.hold });
+      leaf.push({ t, v: 0.1, ease: ease.out("cubic") }, { t: t + Math.round(step * 0.8), v: 1, ease: ease.hold });
+    }
+    k.animate(cover, "opacity", shown);
+    k.animate(glyph, "text.content", says);
+    k.animate(glyph, "scaleY", leaf);
+  });
+  return at + Math.max(0, tiles.length - 1) * stagger + flips * step + step;
+}
+function housing(k, parent, o) {
+  const id = k.stack(parent, { width: o.width, gap: o.gap, padding: o.pad, fill: "housing", radius: o.radius ?? Math.round(o.pad * 0.5), align: o.align ?? "MIN", stroke: { color: "rivet", width: Math.max(1.5, o.pad * 0.05), align: "INSIDE" }, name: o.name ?? "Board", effects: [shadow(0.5, Math.round(o.pad * 0.6), Math.round(o.pad * 1.6)), grain(21, 0.05)], ...o.absolute ? { absolute: o.absolute } : {} });
+  return id;
+}
+function bolts(k, id, pad) {
+  const n = k.node(id), d = Math.max(4, Math.round(pad * 0.24)), m = Math.round(pad * 0.38);
+  for (const [x, y] of [[m, m], [n.width - m - d, m], [m, n.height - m - d], [n.width - m - d, n.height - m - d]]) k.ellipse(id, d, "rivet", { name: "Bolt", absolute: { x: r3(x), y: r3(y) } });
+}
+var turn = (pts, deg, s) => {
+  const a = deg * Math.PI / 180, c = Math.cos(a), sn = Math.sin(a);
+  return pts.map((p) => ({ x: (p.x * c - p.y * sn) * s, y: (p.x * sn + p.y * c) * s }));
+};
+var mirror = (half) => [...half, ...[...half].reverse().filter((p) => p.x !== 0).map((p) => ({ x: -p.x, y: p.y }))];
+var PLANE = mirror([{ x: 0, y: -0.5 }, { x: 0.04, y: -0.44 }, { x: 0.055, y: -0.3 }, { x: 0.055, y: -0.1 }, { x: 0.5, y: 0.14 }, { x: 0.5, y: 0.22 }, { x: 0.055, y: 0.1 }, { x: 0.05, y: 0.32 }, { x: 0.2, y: 0.43 }, { x: 0.2, y: 0.49 }, { x: 0.03, y: 0.45 }, { x: 0, y: 0.5 }]);
+var ENGINES = [-1, 1].map((s) => [{ x: s * 0.2, y: -0.06 }, { x: s * 0.26, y: -0.06 }, { x: s * 0.26, y: 0.07 }, { x: s * 0.2, y: 0.04 }]);
+var ARROW = mirror([{ x: 0, y: -0.5 }, { x: 0.42, y: -0.06 }, { x: 0.3, y: 0.06 }, { x: 0.09, y: -0.16 }, { x: 0.09, y: 0.5 }, { x: 0, y: 0.5 }]);
+function picto(k, parent, which, size, role, o = {}) {
+  const shapes = (which === "plane" ? [PLANE, ...ENGINES] : [ARROW]).map((s) => turn(s, o.deg ?? 0, size));
+  const paths = shapes.map((s) => ({ closed: true, points: s.map((p) => ({ x: r3(p.x + size / 2), y: r3(p.y + size / 2) })) }));
+  return k.vector(parent, size, size, paths, role, { name: o.name ?? (which === "plane" ? "Plane" : "Arrow"), ...o.absolute ? { absolute: o.absolute } : {}, ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
+}
+function sign(k, parent, words, o) {
+  const u = o.u, tile = Math.round(84 * u);
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "HUG", gap: Math.round(22 * u), align: "CENTER", fill: "primary", radius: Math.round(10 * u), padding: { top: Math.round(14 * u), right: Math.round(28 * u), bottom: Math.round(14 * u), left: Math.round(14 * u) }, name: o.name ?? "Sign", effects: [shadow(0.45, Math.round(10 * u), Math.round(30 * u))], ...o.absolute ? { absolute: o.absolute } : {} });
+  const black = k.stack(id, { width: tile, height: tile, fill: "onPrimary", radius: Math.round(8 * u), align: "CENTER", justify: "CENTER", name: "Sign tile" });
+  picto(k, black, "plane", Math.round(tile * 0.74), "primary", { deg: 45 });
+  const hug = o.width === void 0 || o.width === "HUG";
+  const col = k.stack(id, { ...hug ? { width: "HUG" } : {}, gap: 0, name: "Sign words" });
+  k.text(col, words, { style: o.style, color: "onPrimary", ...hug ? { autoWidth: true } : {}, name: "Sign text" });
+  if (o.note && o.noteStyle) k.text(col, o.note, { style: o.noteStyle, color: "onPrimary", ...hug ? { autoWidth: true } : {}, name: "Sign note" });
+  k.rect(id, Math.max(2, Math.round(3 * u)), Math.round(tile * 0.8), "onPrimary", { name: "Sign rule" });
+  picto(k, id, "arrow", Math.round(tile * 0.72), "onPrimary", { deg: o.deg ?? 45 });
+  return id;
+}
+function rods(k, parent, x, y, w, u, top = 0) {
+  for (const f of [0.14, 0.86]) k.rect(parent, Math.max(3, Math.round(6 * u)), y - top + 4, "rod", { name: "Rod", absolute: { x: Math.round(x + w * f), y: top } });
+}
+function barcode(k, parent, w, h, role, o = {}) {
+  const rand = rng(o.seed ?? 12), bars = [], unit = (o.upright ? h : w) / 96;
+  for (let at = 0; at < 96; ) {
+    const on = 1 + Math.floor(rand() * 3), off = 1 + Math.floor(rand() * 3);
+    if (at + on > 96) break;
+    bars.push(o.upright ? box(0, r3(at * unit), w, r3(on * unit)) : box(r3(at * unit), 0, r3(on * unit), h));
+    at += on + off;
+  }
+  return k.vector(parent, w, h, bars, role, { name: o.name ?? "Barcode", ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function pass(k, parent, p) {
+  const u = p.u, stubW = Math.round(p.width * 0.26), mainW = p.width - stubW, padX = Math.round(34 * u), st = (n) => `${p.styles ?? "Pass"} ${n}`;
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: p.width, fill: "card", radius: Math.round(22 * u), clip: true, name: p.name ?? "Pass", effects: [shadow(0.45, Math.round(18 * u), Math.round(48 * u))], ...p.absolute ? { absolute: p.absolute } : {} });
+  const main = k.stack(id, { width: mainW, gap: 0, name: "Pass main" });
+  const head = k.stack(main, { direction: "HORIZONTAL", fill: "primary", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: Math.round(14 * u), right: padX, bottom: Math.round(14 * u), left: padX }, name: "Pass header" });
+  k.text(head, "{{brand.name}}", { style: st("head"), color: "onPrimary", name: "Pass brand" });
+  k.text(head, "Boarding pass", { style: st("head"), color: "onPrimary", autoWidth: true, name: "Pass kind" });
+  const body = k.stack(main, { gap: Math.round(18 * u), padding: { top: Math.round(24 * u), right: padX, bottom: Math.round(26 * u), left: padX }, name: "Pass body" });
+  const route = k.stack(body, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Route" });
+  for (const [code, note, side] of [[p.from, p.fromNote, "MIN"], [p.to, p.toNote, "MAX"]]) {
+    if (side === "MAX") {
+      const mid = k.stack(route, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(10 * u), align: "CENTER", name: "Route line" });
+      k.rect(mid, Math.round(54 * u), Math.max(2, Math.round(3 * u)), "onCard", { name: "Route rule", opacity: 0.5 });
+      picto(k, mid, "plane", Math.round(52 * u), "onCard", { deg: 90 });
+      k.rect(mid, Math.round(54 * u), Math.max(2, Math.round(3 * u)), "onCard", { name: "Route rule", opacity: 0.5 });
+    }
+    const col = k.stack(route, { width: "HUG", gap: 0, align: side, name: "Route end" });
+    k.text(col, code, { style: st("code"), color: "onCard", autoWidth: true, name: "Route code" });
+    k.text(col, note, { style: st("label"), color: "onCard", autoWidth: true, name: "Route note" });
+  }
+  k.rect(body, "FILL", Math.max(1.5, 2 * u), "onCard", { name: "Pass rule", opacity: 0.25 });
+  const say = k.stack(body, { gap: Math.round(4 * u), name: "Pass say" });
+  k.text(say, p.phrase, { style: st("phrase"), color: "onCard", name: "Pass phrase" });
+  k.text(say, p.meaning, { style: st("meaning"), color: "onCard", name: "Pass meaning" });
+  const fields = k.stack(body, { direction: "HORIZONTAL", gap: Math.round(30 * u), name: "Pass fields" });
+  for (const [label, value] of p.fields) {
+    const f = k.stack(fields, { width: "HUG", gap: 0, name: "Pass field" });
+    k.text(f, label, { style: st("label"), color: "onCard", autoWidth: true, name: "Field label" });
+    k.text(f, value, { style: st("value"), color: "onCard", autoWidth: true, name: "Field value" });
+  }
+  const stub = k.stack(id, { direction: "HORIZONTAL", width: stubW, height: "FILL", name: "Pass stub" });
+  const sb = k.stack(stub, { gap: Math.round(12 * u), height: "FILL", justify: "CENTER", padding: { top: Math.round(20 * u), right: Math.round(56 * u), bottom: Math.round(20 * u), left: Math.round(26 * u) }, name: "Stub body" });
+  for (const [label, value] of p.stub) {
+    const f = k.stack(sb, { gap: 0, name: "Stub field" });
+    k.text(f, label, { style: st("label"), color: "onCard", name: "Field label" });
+    k.text(f, value, { style: st("value"), color: "onCard", name: "Field value" });
+  }
+  return id;
+}
+function passTrim(k, id, p, ground = "paper") {
+  const u = p.u, h = k.node(id).height, stubW = Math.round(p.width * 0.26), x = p.width - stubW, d = Math.round(34 * u);
+  const dashes2 = [];
+  for (let y = d * 0.8; y < h - d * 0.8; y += 14 * u) dashes2.push(box(0, r3(y), Math.max(2, r3(3 * u)), r3(7 * u)));
+  k.vector(id, Math.max(2, r3(3 * u)), h, dashes2, "onCard", { name: "Perforation", opacity: 0.4, absolute: { x: r3(x - 1.5 * u), y: 0 } });
+  if (ground) for (const y of [-d / 2, h - d / 2]) k.ellipse(id, d, ground, { name: "Notch", absolute: { x: r3(x - d / 2), y: r3(y) } });
+  const bw = Math.round(30 * u);
+  barcode(k, id, bw, r3(h - 48 * u), "onCard", { upright: true, absolute: { x: p.width - bw - Math.round(20 * u), y: Math.round(24 * u) } });
+}
+function passStyles(k, u, prefix = "Pass") {
+  const s = (n) => Math.max(16, Math.round(n * u));
+  k.textStyle(`${prefix} head`, { ...MONO, size: s(20), fontWeight: 700, letterSpacing: r3(2.4 * u), lineHeight: s(26), textCase: "UPPER" });
+  k.textStyle(`${prefix} code`, { size: s(76), fontWeight: 800, letterSpacing: r3(-2.4 * u), lineHeight: s(76) });
+  k.textStyle(`${prefix} label`, { ...MONO, size: s(17), fontWeight: 600, letterSpacing: r3(1.4 * u), lineHeight: s(24), textCase: "UPPER" });
+  k.textStyle(`${prefix} value`, { size: s(26), fontWeight: 800, letterSpacing: r3(-0.4 * u), lineHeight: s(32) });
+  k.textStyle(`${prefix} phrase`, { ...SERIF, size: s(44), fontWeight: 700, letterSpacing: r3(-0.9 * u), lineHeight: s(50) });
+  k.textStyle(`${prefix} meaning`, { size: s(24), fontWeight: 500, lineHeight: s(32) });
+}
+function chevrons(k, parent, w, h, at, name = "Chevrons") {
+  const id = k.frame(parent, { x: at.x, y: at.y, width: w, height: h }, { name, fill: "housing", clip: true });
+  const stripes = [];
+  for (let x = -h; x < w + h; x += h * 2) stripes.push({ closed: true, points: [{ x, y: h }, { x: x + h, y: 0 }, { x: x + h * 2, y: 0 }, { x: x + h, y: h }] });
+  k.vector(id, w, h, stripes, "primary", { name: "Stripes", absolute: { x: 0, y: 0 } });
+  return id;
+}
+function lamps(k, parent, w, y, n, u, reach = 420) {
+  const id = k.frame(parent, { x: 0, y: 0, width: w, height: y + reach * u }, { name: "Lamps" });
+  const rays = [];
+  for (let i = 0; i < n; i++) {
+    const x = w * (i + 0.5) / n;
+    glow(k, id, { x: Math.round(x), y: Math.round(y), w: Math.round(620 * u), role: "lamp", alpha: 0.16, name: "Lamp pool" });
+    for (let j = -3; j <= 3; j++) rays.push({ closed: false, points: [{ x: r3(x + j * 3 * u), y: r3(y + 8 * u) }, { x: r3(x + j * 44 * u), y: r3(y + reach * u) }] });
+    k.rect(id, Math.round(64 * u), Math.max(4, Math.round(9 * u)), "lamp", { name: "Lamp", radius: 99, absolute: { x: Math.round(x - 32 * u), y: Math.round(y) }, effects: [{ type: "DROP_SHADOW", color: k.color("lamp", 0.8), offset: { x: 0, y: Math.round(6 * u) }, blur: Math.round(34 * u), spread: 0, visible: true }] });
+  }
+  k.vector(id, w, r3(y + reach * u), rays, "lamp", { name: "Lamp light", strokeWidth: Math.max(1, r3(1.4 * u)), opacity: 0.1, absolute: { x: 0, y: 0 } });
+  return id;
+}
+function dashes(k, parent, x0, x1, y, u, role = "primary", name = "Taxi line") {
+  const paths = [];
+  for (let x = 0; x < x1 - x0; x += 54 * u) paths.push({ closed: false, points: [{ x: r3(x), y: 0 }, { x: r3(Math.min(x1 - x0, x + 30 * u)), y: 0 }] });
+  return k.vector(parent, x1 - x0, 1, paths, role, { name, strokeWidth: Math.max(2, r3(4 * u)), absolute: { x: x0, y } });
+}
+function apron(k, parent, w, y, u = 1) {
+  const h = Math.round(400 * u);
+  const id = k.frame(parent, { x: 0, y, width: w, height: h }, { name: "Apron" });
+  const size = Math.round(430 * u);
+  const plane = k.frame(id, { x: Math.round(w * 0.5), y: Math.round(-10 * u), width: size, height: size }, { name: "Parked plane" });
+  picto(k, plane, "plane", size, "rod", { deg: 58, name: "Airliner", absolute: { x: 0, y: 0 } });
+  const at = (p) => {
+    const [q] = turn([p], 58, size);
+    return { x: size / 2 + q.x, y: size / 2 + q.y };
+  };
+  const d = Math.max(6, Math.round(12 * u));
+  for (const [p, role] of [[{ x: -0.49, y: 0.17 }, "accent"], [{ x: 0.49, y: 0.17 }, "go"], [{ x: 0, y: 0.47 }, "flapInk"]]) {
+    const c = at(p);
+    k.ellipse(plane, d, role, { name: "Wing light", absolute: { x: r3(c.x - d / 2), y: r3(c.y - d / 2) }, effects: [bloom(k, role, Math.round(18 * u), 0.9)] });
+  }
+  const cabin = [];
+  for (let i = 0; i < 16; i++) {
+    const a = at({ x: 0, y: -0.3 + i * 0.036 }), b = at({ x: 0, y: -0.3 + i * 0.036 + 0.016 });
+    cabin.push({ closed: false, points: [{ x: r3(a.x), y: r3(a.y) }, { x: r3(b.x), y: r3(b.y) }] });
+  }
+  k.vector(plane, size, size, cabin, "lamp", { name: "Cabin lights", strokeWidth: Math.max(2, r3(5 * u)), opacity: 0.7, absolute: { x: 0, y: 0 } });
+  dashes(k, id, 0, w, Math.round(20 * u), u, "primary", "Taxi line");
+  dashes(k, id, 0, Math.round(w * 0.46), Math.round(250 * u), u, "primary", "Taxi line");
+  return id;
+}
+function plate(k, parent, words, o) {
+  const u = o.u, fill = o.fill ?? "accent", ink = o.ink ?? "onAccent";
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: Math.round(10 * u), padding: Math.round(6 * u), name: o.name ?? "Stamp", effects: [shadow(0.35, Math.round(8 * u), Math.round(20 * u))], ...o.absolute ? { absolute: o.absolute } : {} });
+  const inner = k.stack(id, { direction: "HORIZONTAL", width: "HUG", radius: Math.round(6 * u), stroke: { color: ink, width: Math.max(1.5, 2.5 * u), align: "INSIDE" }, padding: { top: Math.round(8 * u), right: Math.round(20 * u), bottom: Math.round(8 * u), left: Math.round(20 * u) }, name: "Stamp edge" });
+  k.text(inner, words, { style: o.style, color: ink, autoWidth: true, name: "Stamp text" });
+  return id;
+}
+var APP_ROLES = {
+  screen: "#F4EEDD",
+  surface: "#FFFBF0",
+  onScreen: "#17181B",
+  onScreenMuted: "#55534C",
+  line: "#D6CEB9",
+  track: "#E2DAC5",
+  tile: "#EDE5CF",
+  photo: "#E2DAC5",
+  positive: "#1E8E5A",
+  primary: "#FFD21A",
+  onPrimary: "#14130F",
+  accent: "#FF5A36",
+  onAccent: "#1A0700",
+  device: "#1A1B1F",
+  deviceEdge: "#4B4E57"
+};
+function phraseCard(moment, phrase, meaning) {
+  return (k, parent, width) => {
+    k.textStyle("App phrase 32", { ...SERIF, size: 32, fontWeight: 700, letterSpacing: -0.6, lineHeight: 38 });
+    k.textStyle("App tag 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("App meaning 17", { size: 17, fontWeight: 500, lineHeight: 23 });
+    const card = k.stack(parent, { width, fill: "surface", radius: 26, gap: 10, padding: { top: 20, right: 22, bottom: 20, left: 22 }, stroke: { color: "line", width: 1.5, align: "INSIDE" }, name: "Phrase card" });
+    k.text(card, moment, { style: "App tag 16", color: "onScreenMuted", name: "Moment" });
+    k.text(card, phrase, { style: "App phrase 32", color: "onScreen", name: "Phrase" });
+    k.text(card, meaning, { style: "App meaning 17", color: "onScreenMuted", name: "Meaning" });
+    const listen = k.stack(card, { direction: "HORIZONTAL", gap: 10, align: "CENTER", padding: { top: 6, right: 0, bottom: 0, left: 0 }, name: "Listen" });
+    const knob = k.stack(listen, { width: 40, height: 40, radius: 20, fill: "primary", align: "CENTER", justify: "CENTER", name: "Listen button" });
+    k.vector(knob, 14, 16, [{ closed: true, points: [{ x: 1, y: 0 }, { x: 14, y: 8 }, { x: 1, y: 16 }] }], "onPrimary", { name: "Listen mark" });
+    const levels = [5, 11, 18, 9, 22, 26, 14, 7, 16, 24, 19, 8, 12, 20, 10, 5, 13, 17, 6, 4];
+    const wave = k.stack(listen, { direction: "HORIZONTAL", width: "HUG", height: 28, gap: 4, align: "CENTER", name: "Voice" });
+    levels.forEach((h, i) => k.rect(wave, 4, h, i < 9 ? "onScreen" : "track", { radius: 2, name: "Level" }));
+  };
+}
+var SCREENS = {
+  trip: { name: "Trip", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Lisbon", note: "in 19 days" },
+    { kind: "hero", label: "Your trip course \xB7 TP 1351", figure: "214 / 300", note: "phrases ready before you land", share: 0.71 },
+    { kind: "chips", items: ["Dinner", "Airport", "Taxi", "Hotel", "Pharmacy"], on: 0 },
+    { kind: "rows", card: true, rows: [
+      { title: "Uma mesa para dois", sub: "A table for two", value: "Ready", glyph: "check", ink: "positive" },
+      { title: "A conta, por favor", sub: "The bill, please", value: "Ready", glyph: "check", ink: "positive" },
+      { title: "Sem gl\xFAten, por favor", sub: "Gluten-free, please", value: "Next", glyph: "play", ink: "onScreen" }
+    ] },
+    { kind: "button", label: "Start today\u2019s ten minutes" }
+  ] },
+  course: { name: "Course", tabs: [4, 1], blocks: [
+    { kind: "title", text: "Your course", note: "300 phrases" },
+    { kind: "text", text: "Built from your booking: six nights in Lisbon, two dinners out, one day trip to Sintra." },
+    { kind: "rows", card: true, rows: [
+      { title: "Dinner and caf\xE9s", sub: "Ordering, allergies, the bill", value: "74", glyph: "sun", ink: "onScreen" },
+      { title: "Getting around", sub: "Metro, taxi, the 15:10 to Sintra", value: "52", glyph: "bolt", ink: "onScreen" },
+      { title: "Hotel", sub: "Check-in, a quieter room, late checkout", value: "41", glyph: "moon", ink: "onScreen" },
+      { title: "Airport", sub: "Bags, gates, a missed connection", value: "28", glyph: "play", ink: "onScreen" },
+      { title: "If something goes wrong", sub: "Pharmacy, a lost card, help", value: "48", glyph: "drop", ink: "onScreen" }
+    ] },
+    { kind: "tiles", items: [["Left out", "Grammar drills"], ["A day", "10 min"]] },
+    { kind: "button", label: "Looks right" }
+  ] },
+  today: { name: "Today", tabs: [4, 2], blocks: [
+    { kind: "title", text: "Today", note: "Day 12" },
+    { kind: "hero", label: "Ten minutes \xB7 downloaded", figure: "6:40 left", note: "Works in airplane mode", share: 0.34 },
+    { kind: "checks", rows: [["Hear four new phrases", true], ["Say them back", true], ["Dinner, as a dialogue", false]] },
+    { kind: "bars", title: "Minutes this week", values: [10, 10, 12, 10, 0, 14, 4], hi: 6, labels: ["M", "T", "W", "T", "F", "S", "S"], height: 56 },
+    { kind: "tiles", items: [["Streak", "11 days"], ["Until Lisbon", "19 days"]] }
+  ] },
+  lesson: { name: "Lesson", tabs: [4, 2], blocks: [
+    { kind: "title", text: "Dinner", note: "7 of 12" },
+    { kind: "custom", build: phraseCard("Phrase 214 \xB7 at the door", "Uma mesa para dois, por favor.", "A table for two, please.") },
+    { kind: "ring", share: 0.92, figure: "92%", label: "Your match", size: 170 },
+    { kind: "rows", card: true, rows: [{ title: "por fa-VOR", sub: "Lean on the last syllable", glyph: "bolt", ink: "onScreen" }] },
+    { kind: "button", label: "Say it again" }
+  ] },
+  offer: { name: "Offer", blocks: [
+    { kind: "title", text: "Layover Plus" },
+    { kind: "hero", label: "Your first trip", figure: "Free", note: "All 300 phrases, offline, no card" },
+    { kind: "rows", card: true, rows: [
+      { title: "Every trip, for a year", sub: "Best value \xB7 any language", value: "$39.99", glyph: "star", ink: "onScreen" },
+      { title: "One more trip", sub: "Pay when you book the next one", value: "$6.99", glyph: "dot", ink: "onScreen" }
+    ] },
+    { kind: "checks", rows: [["Courses in 14 languages", true], ["Native audio, your turn out loud", true], ["Nothing renews without a reminder", true]] },
+    { kind: "button", label: "Start my first trip" }
+  ] }
+};
+
+export {
+  boardBrand,
+  shadow,
+  flapH,
+  flapsW,
+  FLAP_HOWTO,
+  flaps,
+  flipIn,
+  housing,
+  bolts,
+  picto,
+  sign,
+  rods,
+  barcode,
+  pass,
+  passTrim,
+  passStyles,
+  chevrons,
+  lamps,
+  dashes,
+  apron,
+  plate,
+  APP_ROLES,
+  phraseCard,
+  SCREENS
+};

package/dist/chunks/chunk-BXXJZVD7.js

@@ -0,0 +1,112 @@
+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 {
+  E,
+  cloud,
+  lottieTemplate,
+  pin,
+  roundRect
+} from "./chunk-3OBWHBPC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/travel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TRAVEL = { paper: "#EAF2FF", ink: "#0F2A4A", accent: "#FF6B4A", sky: "#CFE0FF", route: "#6C8DB8", white: "#FFFFFF", land: "#DCE8FA" };
+var travelFlightRoute = lottieTemplate({
+  slug: "flight-route",
+  sector: "travel",
+  role: "hero",
+  size: "hero",
+  duration: 5e3,
+  loop: true,
+  ground: "paper",
+  name: "Flight route",
+  description: "A hero loop for a travel booking site: a plane flies an arc between two cities, lighting the dotted route behind it, and the destination pin pops as it lands \u2014 five seconds, seamless, 1600\xD7900",
+  colors: TRAVEL,
+  useCases: ["launch"],
+  tags: ["flight", "plane", "map", "route", "booking"],
+  build(l) {
+    l.vector(l.sheet, [{ pts: roundRect(120, 300, 520, 420, 200), closed: true }], "land", { name: "Land" });
+    l.vector(l.sheet, [{ pts: roundRect(980, 180, 520, 480, 220), closed: true }], "land", { name: "Land" });
+    for (const [x, y, s, amp] of [[200, 140, 1, 40], [1180, 700, 0.8, -30], [700, 90, 0.6, 24]]) {
+      const c = cloud(l, l.sheet, x, y, s);
+      l.keys(c, "translateX", [[0, 0, E.inOut], [2500, amp, E.inOut], [5e3, 0]]);
+    }
+    const A = [260, 640], C = [800, 120], B = [1340, 420];
+    const at = (t) => [(1 - t) ** 2 * A[0] + 2 * (1 - t) * t * C[0] + t * t * B[0], (1 - t) ** 2 * A[1] + 2 * (1 - t) * t * C[1] + t * t * B[1]];
+    const heading = (t) => Math.atan2(2 * (1 - t) * (C[1] - A[1]) + 2 * t * (B[1] - C[1]), 2 * (1 - t) * (C[0] - A[0]) + 2 * t * (B[0] - C[0])) * 180 / Math.PI;
+    const FLY = 3200, START = 300;
+    const DOTS = 26;
+    for (let i = 1; i < DOTS; i++) {
+      const t = i / DOTS, [x, y] = at(t);
+      const d = l.circle(l.sheet, x, y, 7, "route", { name: "Route dot", opacity: 0.35 });
+      const lit = START + t * FLY;
+      l.opacity(d, [[0, 0.35, E.hold], [lit, 0.35, E.out], [lit + 200, 1, E.hold], [4300, 1, E.inOut], [4800, 0.35, E.hold], [5e3, 0.35]]);
+    }
+    l.shape(l.sheet, pin(A[0], A[1] + 8, 56), "ink", { name: "From" });
+    l.circle(l.sheet, A[0], A[1] + 8 - 56 * 1.35 + 28, 11, "white", { name: "From dot" });
+    const pinB = l.shape(l.sheet, pin(B[0], B[1] + 8, 64), "accent", { name: "To" });
+    l.pivot(pinB, 0.5, 1);
+    l.scale(pinB, [[0, 0, E.hold], [START + FLY - 100, 0, E.pop], [START + FLY + 300, 1, E.hold], [4400, 1, E.in], [4700, 0, E.hold], [5e3, 0]]);
+    const plane = l.shape(l.sheet, [[46, 0], [30, -7], [6, -7], [-12, -40], [-24, -40], [-14, -7], [-32, -7], [-40, -20], [-48, -20], [-42, 0], [-48, 20], [-40, 20], [-32, 7], [-14, 7], [-24, 40], [-12, 40], [6, 7], [30, 7]].map(([x, y]) => [x + A[0], y + A[1]]), "ink", { name: "Plane" });
+    const N = 12;
+    const tx = [[0, 0, E.hold]], ty = [[0, 0, E.hold]], rot = [[0, heading(0), E.hold]];
+    for (let i = 0; i <= N; i++) {
+      const t = i / N, [x, y] = at(t), ms = START + t * FLY;
+      const e = i < N ? E.linear : E.hold;
+      tx.push([ms, x - A[0], e]);
+      ty.push([ms, y - A[1], e]);
+      rot.push([ms, heading(t), e]);
+    }
+    tx.push([5e3, 0]);
+    ty.push([5e3, 0]);
+    rot.push([5e3, heading(0)]);
+    l.keys(plane, "translateX", tx);
+    l.keys(plane, "translateY", ty);
+    l.keys(plane, "rotation", rot);
+    l.opacity(plane, [[0, 0, E.hold], [START - 200, 0, E.out], [START, 1, E.hold], [START + FLY, 1, E.in], [START + FLY + 250, 0, E.hold], [5e3, 0]]);
+    l.scale(plane, [[0, 0.8, E.hold], [START, 0.8, E.inOut], [START + FLY / 2, 1.15, E.inOut], [START + FLY, 0.8, E.hold], [5e3, 0.8]]);
+  }
+});
+var travelPinDrop = lottieTemplate({
+  slug: "pin-drop",
+  sector: "travel",
+  role: "icon",
+  size: "icon",
+  duration: 2e3,
+  loop: true,
+  name: "Location pin drop",
+  description: "A location icon: the pin drops onto the map, squashes as it lands and springs up, and a ripple spreads from where it stands \u2014 a two-second seamless loop, 512\xD7512",
+  colors: TRAVEL,
+  tags: ["location", "pin", "map", "marker"],
+  build(l) {
+    const ripple = l.ring(l.sheet, 256, 420, 60, "accent", 8, { name: "Ripple", opacity: 0 });
+    l.keys(ripple, "scaleY", [[0, 0.3, E.hold], [480, 0.3, E.out], [1300, 0.6, E.hold], [2e3, 0.3]]);
+    l.keys(ripple, "scaleX", [[0, 1, E.hold], [480, 1, E.out], [1300, 2, E.hold], [2e3, 1]]);
+    l.opacity(ripple, [[0, 0, E.hold], [480, 0, E.out], [520, 0.7, E.out], [1300, 0, E.hold], [2e3, 0]]);
+    const shadow = l.circle(l.sheet, 256, 420, 44, "route", { name: "Shadow", opacity: 0.25 });
+    l.k.patch(shadow, { scaleY: 0.25 });
+    l.keys(shadow, "scaleX", [[0, 0.2, E.hold], [100, 0.2, E.in], [480, 1, E.hold], [1650, 1, E.in], [1950, 0.2, E.hold], [2e3, 0.2]]);
+    const p = l.box(l.sheet, 176, 150, 160, 270, "Pin");
+    l.shape(p, pin(80, 270, 160), "accent", { name: "Pin body" });
+    l.circle(p, 80, 134, 32, "white", { name: "Pin hole" });
+    l.pivot(p, 0.5, 1);
+    l.keys(p, "translateY", [[0, -300, E.hold], [100, -300, E.in], [480, 0, E.hold], [1650, 0, E.in], [1950, -300, E.hold], [2e3, -300]]);
+    l.keys(p, "scaleY", [[0, 1, E.hold], [480, 1, E.out], [560, 0.82, E.pop], [820, 1]]);
+    l.keys(p, "scaleX", [[0, 1, E.hold], [480, 1, E.out], [560, 1.12, E.pop], [820, 1]]);
+    l.opacity(p, [[0, 0, E.hold], [100, 0, E.out], [200, 1, E.hold], [1750, 1, E.in], [1950, 0, E.hold], [2e3, 0]]);
+  }
+});
+var TRAVEL_PACK = [travelFlightRoute, travelPinDrop];
+
+export {
+  travelFlightRoute,
+  travelPinDrop,
+  TRAVEL_PACK
+};

package/dist/chunks/chunk-BYGDRODR.js

@@ -0,0 +1,101 @@
+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 {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  ease
+} from "./chunk-37IU3FCE.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/scenes/before-after.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var io = ease.inOut("cubic");
+var CUES = [
+  { layer: "After", preset: "wipe-in", at: 500, params: { duration: 1800, ease: io, direction: "right" } },
+  { layer: "After", preset: "wipe-out", at: 3300, params: { duration: 1400, ease: io, direction: "right" } },
+  { layer: "After chip", preset: "fade-in", at: 1900, params: { duration: 300 } },
+  { layer: "After chip", preset: "fade-out", at: 3300, params: { duration: 300 } },
+  { layer: "Before chip", preset: "fade-out", at: 500, params: { duration: 300 } },
+  { layer: "Before chip", preset: "fade-in", at: 4400, params: { duration: 300 } }
+];
+var WIPE_MIN = 0.01;
+var SIZE = 1080;
+var before_after_default = defineTemplate({
+  id: "motion-before-after",
+  meta: {
+    name: "Before / after",
+    description: "A before/after reveal for a redesign, a makeover or a product upgrade: the after wipes across the before through an animated mask, a divider riding its edge, then wipes back \u2014 a seamless 5-second loop at 1080\xD71080, 30 fps.",
+    category: "animation",
+    tags: ["animation", "before after", "reveal", "wipe", "mask", "redesign", "loop"],
+    platforms: ["instagram", "facebook"],
+    formats: ["post"],
+    useCases: ["announcement"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  // Seamless, though not a `loop` in the cue checks' sense: the before chip is up at both ends, not gone.
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Before / after", preset("ig-post"));
+    k.brand({ primary: "#101828", accent: "#6D3BFF", highlight: "#FFD84D", old: "#D0D5DD", oldInk: "#667085", onDark: "#FFFFFF", onAccent: "#FFFFFF" });
+    k.patch(k.pageId, { name: "Before / after" });
+    k.textStyle("Display 96", { size: 96, fontWeight: 800, lineHeight: 104, letterSpacing: -2 });
+    k.textStyle("Body 36", { size: 36, fontWeight: 500, lineHeight: 48 });
+    k.textStyle("Label 28", { size: 28, fontWeight: 800, lineHeight: 32, letterSpacing: 3 });
+    const shadow = (blur, y, a) => ({ type: "DROP_SHADOW", color: k.color("primary", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+    k.component("Chip", {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      align: "CENTER",
+      padding: { top: 14, right: 26, bottom: 14, left: 26 },
+      fill: "onDark",
+      radius: 999,
+      effects: [shadow(24, 8, 0.18)],
+      description: "A label chip.",
+      props: { Label: "BEFORE" }
+    }, (id) => {
+      k.propText(id, "Label", { style: "Label 28", color: "primary", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Before / after");
+    k.flowSheet(sheet, 32, 0, "old", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    const side = (name, fill, ink, headline, body, pill, pillInk, label) => {
+      const s = k.stack(sheet, { width: SIZE, height: SIZE, absolute: { x: 0, y: 0 }, justify: "CENTER", align: "CENTER", gap: 40, padding: { top: 140, right: 120, bottom: 140, left: 120 }, fill, name });
+      k.text(s, headline, { style: "Display 96", color: ink, align: "CENTER", name: "Headline" });
+      k.text(s, body, { style: "Body 36", color: ink, align: "CENTER", name: "Body" });
+      const button = k.stack(s, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", padding: { top: 26, right: 56, bottom: 26, left: 56 }, fill: pill, radius: 999, name: "Button" });
+      k.text(button, label, { style: "Label 28", color: pillInk, autoWidth: true, name: "Button label" });
+    };
+    side("Before", "old", "oldInk", "Plain and forgettable", "Same layout, no colour, nothing to look at.", "oldInk", "onDark", "LEARN MORE");
+    side("After", "accent", "onAccent", "Bold and unmissable", "The same content, redesigned to stop the scroll.", "highlight", "primary", "SHOP NOW");
+    const divider = k.stack(sheet, { width: 72, height: SIZE, absolute: { x: -36, y: 0 }, justify: "CENTER", align: "CENTER", gap: 12, name: "Divider" });
+    k.rect(divider, 6, 480, "onDark", { name: "Line" });
+    k.ellipse(divider, 72, "onDark", { effects: [shadow(24, 6, 0.25)], name: "Handle" });
+    k.rect(divider, 6, 480, "onDark", { name: "Line" });
+    k.patch(divider, { translateX: SIZE });
+    k.instance(sheet, "Chip", { Label: "BEFORE" }, { name: "Before chip", absolute: { x: 48, y: 48 } });
+    const afterChip = k.instance(sheet, "Chip", { Label: "AFTER" }, { name: "After chip", absolute: { x: SIZE - 48 - 180, y: 48 } });
+    k.finish();
+    k.patch(afterChip, { x: SIZE - 48 - k.node(afterChip).width });
+    k.cues(sheet, CUES);
+    k.animate(divider, "translateX", [{ t: 500, v: WIPE_MIN, ease: io }, { t: 2300, v: SIZE, ease: ease.hold }, { t: 3300, v: SIZE, ease: io }, { t: 4700, v: WIPE_MIN }]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  before_after_default
+};