@popcraft/kit 0.32.0 → 0.33.0

package/dist/chunks/chunk-VABUORBL.js

@@ -0,0 +1,192 @@
+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 {
+  SCENE,
+  mover
+} from "./chunk-YPDCDENL.js";
+import {
+  disc,
+  shape,
+  turn
+} from "./chunk-HXOSKLC2.js";
+import {
+  sparkPath
+} from "./chunk-UDE42EDS.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  box,
+  line,
+  pt3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/festival-presale-jazz-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var AW = 1200;
+var AH = 900;
+var FLOOR = AH - 98;
+var TOP = SCENE.h - AH;
+var placeAt = (cx, cy, deg, s, dx, dy) => (path) => {
+  const a = deg * Math.PI / 180, c = Math.cos(a), n = Math.sin(a);
+  const mv = (q) => pt3(dx + ((q.x - cx) * c - (q.y - cy) * n) * s, dy + ((q.x - cx) * n + (q.y - cy) * c) * s);
+  return { ...path, points: path.points.map((q) => ({ ...q, ...mv(q), ...q.handleIn ? { handleIn: mv(q.handleIn) } : {}, ...q.handleOut ? { handleOut: mv(q.handleOut) } : {} })) };
+};
+function poster(k, scene, still) {
+  const move = mover(k, still);
+  const spin = (id, turns) => {
+    if (!still) turn(k, id, turns);
+  };
+  const rules = [];
+  for (let i = 0; i < 22; i++) rules.push(line(-300 + i * 30, -10, 200 + i * 30, 490));
+  shape(k, scene, rules, "cream", { name: "Corner rules", strokeWidth: 2, opacity: 0.12 });
+  shape(k, scene, [disc(300, 300, 150)], "brass", { name: "Moon" });
+  [190, 240, 290].forEach((r2, i) => {
+    const id = shape(k, scene, [disc(300, 300, r2)], "brass", { name: "Moon ring", strokeWidth: 2, opacity: 0.35 });
+    move(id, "opacity", 0.25, 2, -i / 3);
+  });
+  const q0 = rng(31);
+  for (let i = 0; i < 12; i++) {
+    const sz = 12 + Math.round(q0() * 20);
+    const id = k.vector(scene, sz, sz, [sparkPath(sz)], i % 2 ? "brass" : "cream", { name: "Spark", opacity: 0.55, absolute: { x: Math.round(q0() * 1160), y: Math.round(20 + q0() * 560) } });
+    move(id, "opacity", 0.4, 2 + i % 3, q0());
+  }
+  const art = k.frame(scene, { x: 0, y: TOP, width: AW, height: AH }, { name: "Poster" });
+  const r0 = [];
+  for (let i = 0; i < 14; i++) r0.push(line(930 + i * 24, -10, 1230 + i * 24, 290));
+  shape(k, art, r0, "cream", { name: "Corner rules", strokeWidth: 2, opacity: 0.16 });
+  shape(k, art, [disc(905, 350, 226)], "vermilion", { name: "Big disc" });
+  const brass = shape(k, art, [disc(1085, 570, 124)], "brass", { name: "Brass disc" });
+  move(brass, "translateY", 8, 1);
+  const rc = { x: 705, y: 618, r: 138 };
+  shape(k, art, [disc(rc.x, rc.y, rc.r)], "night", { name: "Record" });
+  shape(k, art, [34, 46, 58, 70, 82, 94, 106, 118].map((r2) => disc(rc.x, rc.y, r2)), "navy", { name: "Grooves", strokeWidth: 1.5, opacity: 0.9 });
+  const shine = [0, 180].map((a0) => ({ closed: true, points: [pt3(rc.r, rc.r), ...Array.from({ length: 7 }, (_, i) => {
+    const a = (a0 - 16 + i * 5.3) * Math.PI / 180;
+    return pt3(rc.r + rc.r * Math.cos(a), rc.r + rc.r * Math.sin(a));
+  })] }));
+  const sh = k.vector(art, rc.r * 2, rc.r * 2, shine, "cream", { name: "Record shine", opacity: 0.16, absolute: { x: rc.x - rc.r, y: rc.y - rc.r } });
+  spin(sh, 2);
+  shape(k, art, [disc(rc.x, rc.y, 44)], "brass", { name: "Record label" });
+  shape(k, art, [disc(rc.x, rc.y, 6)], "night", { name: "Spindle" });
+  const T = placeAt(240, 70, -24, 1.46, 930, 366);
+  const body = [
+    box(40, 60, 270, 14),
+    { closed: true, points: [pt3(300, 58), { ...pt3(372, 52), handleOut: pt3(410, 46) }, pt3(446, 6), pt3(446, 128), { ...pt3(372, 82), handleIn: pt3(410, 88) }, pt3(300, 76)] },
+    { closed: true, points: [pt3(8, 54), pt3(22, 60), pt3(40, 62), pt3(40, 72), pt3(22, 74), pt3(8, 80)] },
+    box(148, 44, 26, 70),
+    box(184, 44, 26, 70),
+    box(220, 44, 26, 70)
+  ];
+  shape(k, art, body.map(T), "cream", { name: "Trumpet" });
+  shape(k, art, [{ closed: false, points: [pt3(118, 74), { ...pt3(100, 96), handleIn: pt3(100, 74), handleOut: pt3(100, 122) }, pt3(126, 122), pt3(268, 122), { ...pt3(292, 98), handleIn: pt3(292, 122), handleOut: pt3(292, 76) }, pt3(280, 76)] }].map(T), "cream", { name: "Trumpet loop", strokeWidth: 10 });
+  shape(k, art, [line(446, 4, 446, 130)].map(T), "brass", { name: "Bell rim", strokeWidth: 8 });
+  [161, 197, 233].forEach((x, i) => {
+    const v = shape(k, art, [box(x - 3, 20, 6, 26), disc(x, 18, 10, 5)].map(T), "cream", { name: "Valve" });
+    move(v, "translateY", 5, 3, i / 3);
+  });
+  const bell = T({ closed: false, points: [pt3(446, 67)] }).points[0];
+  [70, 118, 166, 214].forEach((r2, i) => {
+    const arc = { closed: false, points: Array.from({ length: 13 }, (_, j) => {
+      const a = (-74 + j * 9) * Math.PI / 180;
+      return pt3(bell.x + r2 * Math.cos(a), bell.y + r2 * Math.sin(a));
+    }) };
+    const id = shape(k, art, [arc], i % 2 ? "cream" : "brass", { name: "Sound", strokeWidth: 5, opacity: 0.5 });
+    move(id, "opacity", 0.45, 3, -i / 4);
+  });
+  const sky = [], lit = [[], [], []];
+  const r = rng(19);
+  for (let x = -320; x < 1520; ) {
+    const w = 44 + Math.round(r() * 70), h = 50 + Math.round(r() * 120), top = FLOOR - h;
+    sky.push(box(x, top, w, h + 4));
+    if (r() > 0.6) sky.push({ closed: true, points: [pt3(x, top), pt3(x + w / 2, top - 18 - r() * 22), pt3(x + w, top)] });
+    for (let wy = top + 12; wy < FLOOR - 14; wy += 22) for (let wx = x + 9; wx < x + w - 10; wx += 16) if (r() > 0.55) lit[Math.floor(r() * 3)].push(box(wx, wy, 7, 10));
+    x += w + 3;
+  }
+  shape(k, art, sky, "navy", { name: "Skyline" });
+  lit.forEach((ws, i) => {
+    const id = shape(k, art, ws, "brass", { name: "Windows", opacity: 0.6 });
+    move(id, "opacity", 0.35, 1 + i, i / 3);
+  });
+  const whites = [], blacks = [];
+  for (let i = 0, x = -320; x < 1520; i++, x += 38) {
+    whites.push(box(x, FLOOR, 36, 104));
+    if (![2, 6].includes(i % 7)) blacks.push(box(x + 26, FLOOR, 22, 62));
+  }
+  shape(k, art, whites, "cream", { name: "Keys" });
+  [14, 17, 19, 23, 26, 30, 33].forEach((n, i) => {
+    const id = shape(k, art, [box(-320 + n * 38, FLOOR, 36, 104)], "brass", { name: "Played key", opacity: 0.5 });
+    move(id, "opacity", 0.45, 2 + i % 3 * 2, i / 7);
+  });
+  shape(k, art, blacks, "night", { name: "Black keys" });
+}
+var BLUE_HOUR = {
+  slug: "jazz",
+  name: "Blue Hour",
+  brand: (k, fields = {}) => {
+    k.brand(
+      { paper: "#F4E8D2", text: "#1B1512", onPaper: "#5C4B40", primary: "#E3A53B", onPrimary: "#1B1512", accent: "#BF3B24", onAccent: "#FFF4E0", card: "#FBF3E2", onCard: "#1B1512", cardMuted: "#5C4B40", panel: "#14213D", onPanel: "#F6EAD2", panelMuted: "#C5C9D8", chip: "#E9DABD", onChip: "#1B1512", stage: "#14213D", onStage: "#F6EAD2", stageMuted: "#C5C9D8" },
+      { name: "Blue Hour", ...fields }
+    );
+    k.palette({ vermilion: "#C8442C", brass: "#E3A53B", cream: "#F6EAD2", night: "#0B1226", navy: "#22335C" });
+  },
+  type: {
+    Name: { ...SERIF, fontWeight: 900, ls: -0.036, lh: 0.88 },
+    Head: { ...SERIF, fontWeight: 900, ls: -0.028, lh: 1.08 },
+    Act: { ...SERIF, fontWeight: 600, ls: 0, lh: 1.36 },
+    More: { fontWeight: 700, ls: 0.15, lh: 1.7, upper: true },
+    Kicker: { fontWeight: 700, ls: 0.24, lh: 1.4, upper: true },
+    Clock: { ...SERIF, fontWeight: 900, ls: -0.028, lh: 1.04, tnum: true },
+    Unit: { fontWeight: 700, ls: 0.16, lh: 1.3, upper: true },
+    Body: { fontWeight: 500, ls: 0, lh: 1.42 },
+    Button: { fontWeight: 800, ls: 0.1, lh: 1.4, upper: true },
+    Caption: { ...SERIF, fontWeight: 700, ls: 0, lh: 1.22 },
+    Price: { ...SERIF, fontWeight: 900, ls: -0.032, lh: 1, tnum: true }
+  },
+  look: {
+    radius: 4,
+    chip: 2,
+    button: 2,
+    plate: "stage",
+    plateAlpha: 0.9,
+    plateStroke: { color: "brass", width: 1.5, align: "INSIDE" },
+    tile: "card",
+    tileInk: "onCard",
+    tileMuted: "cardMuted",
+    glow: "brass",
+    hot: "brass",
+    hotInk: "night",
+    sep: "\xB7"
+  },
+  scene: poster,
+  horizon: TOP + FLOOR,
+  dates: "16 \u2013 19 September 2027",
+  place: "Port Aurelia",
+  kicker: "Four nights \xB7 Three stages \xB7 Eleven clubs",
+  heads: ["Celeste Armand", "The Ruben Okafor Quintet", "Sister Opal"],
+  acts: ["Kingsley Moreau", "Theo Lindqvist Trio", "Dessa Wainwright", "Low Tide Trio", "The Night Ferry", "Amara Sole"],
+  more: ["Harbour Lights Big Band", "Nico Varga", "The Velvet Hours", "Ines Calloway", "Mona Reyes", "Jules Abara"],
+  tba: "the club programme on 20 April",
+  presale: { by: "Sun 14 March", code: "Tue 16 March", opens: "Thu 18 March \xB7 10:00", day: "Thursday 18 March", time: "10:00", queue: "09:30", limit: "up to four passes" },
+  clock: { days: "21", hours: "03", minutes: "12", from: 38, to: 32 },
+  tier: { tag: "First release", name: "Four-night pass", price: "\u20AC215", next: "\u20AC245", was: "\u20AC180", sold: "Founders\u2019 release all taken", note: "On sale now to members of the Blue Hour Society. What remains opens to presale codes on 18 March.", stock: { label: "Nearly gone", from: 1640, left: 1612, total: 8e3 } },
+  cta: "Register for presale",
+  code: "BH27-PRE-9MXA",
+  gate: "Tramworks, door 2",
+  track: "noirJazz",
+  captions: ["The first names are announced.", "Presale opens Thursday, 18 March.", "Register by Sunday for codes.", "Sign up for a code."],
+  picture: "a club poster on midnight blue: a brass moon, a vermilion disc, a trumpet whose valves work and whose bell throws rings of sound, a turning record, the old town\u2019s skyline with its windows coming on and a keyboard whose keys light",
+  tags: ["jazz", "soul", "city", "club poster", "trumpet", "serif"]
+};
+
+export {
+  BLUE_HOUR
+};

package/dist/chunks/chunk-VAUL5CVU.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-NA7CIUDF.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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
+};