@popcraft/kit 0.32.0 → 0.32.1

package/dist/chunks/chunk-QZDQOFKZ.js

@@ -0,0 +1,428 @@
+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 {
+  hz
+} from "./chunk-GLFOEPRY.js";
+import {
+  RADIAL,
+  noise
+} from "./chunk-M6VTXO6F.js";
+import {
+  circle,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/ukiyo-e-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function ukiyoBrand(k, fields = {}) {
+  k.brand(
+    { paper: "#F1E7D0", text: "#16233F", onPaper: "#3D4A61", primary: "#1F3F73", onPrimary: "#F8F1DE", accent: "#B93A26", onAccent: "#FFF6E6", card: "#FBF5E6", onCard: "#16233F" },
+    { name: "Keel", site: "keel.example", ...fields }
+  );
+  k.palette({
+    skyDeep: "#1B3364",
+    haze: "#CFE0E2",
+    water: "#9CC0D2",
+    seaLight: "#5E93BC",
+    sea: "#2B5C92",
+    seaDark: "#1D4172",
+    deep: "#14274E",
+    foam: "#F8F2E0",
+    ink: "#101A30",
+    mountain: "#44618A",
+    snow: "#FBF7EA",
+    sun: "#CF4A30",
+    sunGlow: "#E9A27E",
+    pine: "#4E7A52",
+    pineDark: "#24493A",
+    bark: "#3B2F2C",
+    wood: "#E3C48F"
+  });
+}
+var grain = (u, seed, amount = 0.06) => noise({ amount, size: Math.max(1, Math.round(2 * u)), seed });
+var shade = (u, a = 0.25, dy = 8, blur = 22) => ({ type: "DROP_SHADOW", color: { r: 0.04, g: 0.07, b: 0.16, a }, offset: { x: 0, y: r3(dy * u) }, blur: r3(blur * u), spread: 0, visible: true });
+var circle2 = (cx, cy, r, n = 14) => circle(cx, cy, r, n);
+var lerp = (a, b, t) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+function spline(pts, per = 8) {
+  const out = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
+    for (let j = 0; j < per; j++) {
+      const t = j / per, t2 = t * t, t3 = t2 * t;
+      out.push({
+        x: 0.5 * (2 * p1.x + (p2.x - p0.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (3 * p1.x - p0.x - 3 * p2.x + p3.x) * t3),
+        y: 0.5 * (2 * p1.y + (p2.y - p0.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (3 * p1.y - p0.y - 3 * p2.y + p3.y) * t3)
+      });
+    }
+  }
+  out.push(pts[pts.length - 1]);
+  return out;
+}
+function resample(pts, n) {
+  const d = [0];
+  for (let i = 1; i < pts.length; i++) d.push(d[i - 1] + Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y));
+  const total = d[d.length - 1], out = [];
+  for (let i = 0, j = 1; i <= n; i++) {
+    const at = total * i / n;
+    while (j < pts.length - 1 && d[j] < at) j++;
+    const span = d[j] - d[j - 1] || 1;
+    out.push(lerp(pts[j - 1], pts[j], Math.min(1, Math.max(0, (at - d[j - 1]) / span))));
+  }
+  return out;
+}
+function draw(k, parent, name, shapes, color, o = {}) {
+  const xs = shapes.flat().map((p) => p.x), ys = shapes.flat().map((p) => p.y);
+  const x0 = Math.min(...xs), y0 = Math.min(...ys);
+  const paths = shapes.map((s) => ({ closed: o.line === void 0, points: s.map((p) => ({ x: r3(p.x - x0), y: r3(p.y - y0) })) }));
+  return k.vector(parent, r3(Math.max(1, Math.max(...xs) - x0)), r3(Math.max(1, Math.max(...ys) - y0)), paths, color, {
+    name,
+    absolute: { x: r3(x0), y: r3(y0) },
+    ...o.line !== void 0 ? { strokeWidth: r3(o.line) } : {},
+    ...o.key !== void 0 ? { stroke: { color: o.keyRole ?? "ink", width: r3(o.key) } } : {},
+    ...o.effects ? { effects: o.effects } : {},
+    ...o.opacity !== void 0 ? { opacity: o.opacity } : {}
+  });
+}
+var keyline = (u) => Math.max(1.2, 2.6 * u);
+function sun(k, parent, o) {
+  const m = o.size, w = r3(m * 2.2), c = w / 2;
+  const id = k.stack(parent, { width: w, height: w, name: "Sun", absolute: { x: r3(o.x - c), y: r3(o.y - c) } });
+  k.ellipse(id, w, [k.gradient({ from: "sunGlow", to: "sunGlow", kind: "RADIAL", fromOpacity: 0.55, toOpacity: 0, handles: RADIAL })], { name: "Sun glow", absolute: { x: 0, y: 0 } });
+  k.ellipse(id, m, o.role ?? "sun", { name: "Sun disc", absolute: { x: r3(c - m / 2), y: r3(c - m / 2) }, effects: [grain(o.u, 3, 0.07)] });
+  return id;
+}
+function mountain(k, parent, o) {
+  const { w, h, u } = o, id = k.frame(parent, { x: r3(o.x - w / 2), y: r3(o.base - h), width: r3(w), height: r3(h) }, { name: "Mountain" });
+  const top = 0.07 * w;
+  const slope = (f, side) => ({ x: w / 2 + side * (top / 2 + (w / 2 - top / 2) * (1 - f)), y: h * (1 - Math.pow(f, 1.75)) });
+  const cone = [];
+  for (let i = 0; i <= 16; i++) cone.push(slope(i / 16, -1));
+  cone.push({ x: w / 2 - top * 0.18, y: h * 0.018 }, { x: w / 2 + top * 0.2, y: -h * 4e-3 });
+  for (let i = 16; i >= 0; i--) cone.push(slope(i / 16, 1));
+  draw(k, id, "Mountain cone", [cone], "mountain", { key: keyline(u), effects: [grain(u, 5, 0.05)] });
+  const from = 0.72, a = slope(from, -1), b = slope(from, 1), snow = [];
+  for (let i = 0; i <= 8; i++) snow.push(slope(from + (1 - from) * i / 8, -1));
+  snow.push({ x: w / 2 - top * 0.18, y: h * 0.018 }, { x: w / 2 + top * 0.2, y: -h * 4e-3 });
+  for (let i = 8; i >= 0; i--) snow.push(slope(from + (1 - from) * i / 8, 1));
+  const hem = 9;
+  for (let i = 1; i < hem; i++) {
+    const p = lerp(b, a, i / hem);
+    snow.push({ x: p.x, y: p.y + (i % 2 ? h * (0.1 + 0.07 * (i * 7 % 3)) : -h * 0.03) });
+  }
+  draw(k, id, "Snow", [snow], "snow", { key: keyline(u) * 0.7 });
+  k.vector(id, r3(w), r3(h), [{ closed: true, points: cone.map((p) => ({ x: r3(p.x), y: r3(Math.max(0, p.y)) })) }], [k.gradient({ from: "haze", to: "haze", angle: 90, fromOpacity: 0, toOpacity: 0.85 })], { name: "Mountain mist", absolute: { x: 0, y: 0 } });
+  return id;
+}
+function mist(k, parent, m, u) {
+  const bar = r3(Math.max(4, 20 * u)), id = k.stack(parent, { width: r3(m.w), height: r3(bar * 3 + bar * 0.5), name: "Mist", absolute: { x: r3(m.x - m.w / 2), y: r3(m.y - bar * 1.5) } });
+  const steps = [[0.2, 0.52], [0, 1], [0.34, 0.5]];
+  if (m.tone) steps.forEach(([from, len], row) => k.rect(id, r3(m.w * len), bar, "water", { name: "Mist shadow", radius: 999, opacity: 0.55, absolute: { x: r3(m.w * from + bar * 0.3), y: r3(bar * row + bar * 0.4) } }));
+  steps.forEach(([from, len], row) => k.rect(id, r3(m.w * len), bar, "paper", { name: "Mist bar", radius: 999, absolute: { x: r3(m.w * from), y: bar * row } }));
+  return id;
+}
+function seaRow(k, parent, o) {
+  const rand = rng(o.seed * 977 + 13), margin = o.len * 1.2, { u } = o;
+  const id = k.frame(parent, { x: 0, y: 0, width: o.w, height: o.foot }, { name: "Sea row" });
+  const top = [], caps = [];
+  for (let x = -margin - rand() * o.len; x < o.w + margin; ) {
+    const L = o.len * (0.78 + 0.44 * rand()), A = o.amp * (0.6 + 0.7 * rand()), cap = [], under = [];
+    for (let j = 0; j < 14; j++) {
+      const t = j / 14;
+      const rise = t < 0.62 ? Math.pow(t / 0.62, 1.8) : 0.5 * (1 + Math.cos(Math.PI * (t - 0.62) / 0.38));
+      const lean = 0.13 * L * Math.exp(-Math.pow((t - 0.64) / 0.2, 2));
+      const p = { x: x + t * L + lean, y: o.y - A * rise };
+      top.push(p);
+      if (t > 0.36 && t < 0.8) {
+        const s = (t - 0.36) / 0.44, th = A * o.caps * (0.2 + Math.pow(Math.sin(Math.PI * s), 0.8) * (0.55 + 0.45 * Math.abs(Math.sin(Math.PI * 3 * s))));
+        cap.push({ x: p.x, y: p.y - 1.5 * u });
+        under.push({ x: p.x - th * 0.25, y: p.y + th });
+      }
+    }
+    if (o.caps && cap.length > 2 && A > o.amp * 0.8) caps.push([...cap, ...under.reverse()]);
+    x += L;
+  }
+  const flip = (p) => o.flip ? { x: o.w - p.x, y: p.y } : p;
+  const edge = top.map(flip);
+  draw(k, id, "Sea", [[{ x: edge[0].x, y: o.foot }, ...edge, { x: edge[edge.length - 1].x, y: o.foot }]], o.role);
+  draw(k, id, "Sea line", [edge], "ink", { line: keyline(u), opacity: 0.85 });
+  if (caps.length) draw(k, id, "Sea foam", caps.map((c) => c.map(flip)), "foam", { key: keyline(u) * 0.6 });
+  return id;
+}
+var BACK = [{ x: -60, y: 800 }, { x: 0, y: 610 }, { x: 90, y: 455 }, { x: 220, y: 312 }, { x: 370, y: 205 }, { x: 520, y: 135 }, { x: 650, y: 108 }, { x: 765, y: 128 }, { x: 855, y: 196 }, { x: 905, y: 288 }, { x: 900, y: 372 }];
+var FACE = [{ x: 1060, y: 800 }, { x: 900, y: 742 }, { x: 740, y: 700 }, { x: 618, y: 636 }, { x: 545, y: 552 }, { x: 520, y: 458 }, { x: 538, y: 372 }, { x: 590, y: 306 }, { x: 665, y: 276 }, { x: 750, y: 282 }, { x: 830, y: 318 }, { x: 900, y: 372 }];
+function greatWave(k, parent, o) {
+  const s = o.w / 1e3, h = r3(o.w * 0.8), { u } = o, rand = rng((o.seed ?? 1) * 53 + 5);
+  const id = k.frame(parent, { x: r3(o.x), y: r3(o.y), width: r3(o.w), height: h }, { name: "Wave" });
+  const swell = k.frame(id, { x: 0, y: 0, width: r3(o.w), height: h }, { name: "Wave swell" });
+  const N = 96;
+  const at = (p) => ({ x: (o.flip ? 1e3 - p.x : p.x) * s, y: p.y * s });
+  const back = resample(spline(BACK, 10), N), face = resample(spline(FACE, 10), N);
+  const between = (t) => back.map((p, i) => lerp(p, face[i], t));
+  const band = (t0, t1, from = 0, to = N) => [...between(t0).slice(from, to + 1), ...between(t1).slice(from, to + 1).reverse()].map(at);
+  draw(k, swell, "Water", [[...back, ...[...face].reverse()].map(at)], "sea", { key: keyline(u) * 1.2, effects: [shade(u, 0.28, 6, 26), grain(u, 7, 0.06)] });
+  draw(k, swell, "Wave shadow", [band(0.66, 1)], "seaDark");
+  draw(k, swell, "Wave deep bands", [band(0.8, 0.9), band(0.94, 1), band(0.1, 0.15, 0, 70)], "deep", { opacity: 0.9 });
+  draw(k, swell, "Wave pale bands", [band(0.24, 0.3, 4, 84), band(0.42, 0.46, 2, 88), band(0.57, 0.6, 0, 90), band(0.72, 0.745, 6, 92)], "water");
+  draw(k, swell, "Wave face line", [face.map(at)], "ink", { line: keyline(u) * 1.2 });
+  const start = 30, outer = [], inner = [];
+  for (let i = start; i <= N; i++) {
+    const f = (i - start) / (N - start), a = back[Math.max(0, i - 1)], b = back[Math.min(N, i + 1)];
+    const len = Math.hypot(b.x - a.x, b.y - a.y) || 1, nx = (b.y - a.y) / len, ny = -(b.x - a.x) / len;
+    const puff = (5 + 15 * Math.abs(Math.sin(f * Math.PI * 13))) * Math.min(1, f * 6) * (f > 0.97 ? 0.3 : 1);
+    outer.push({ x: back[i].x + nx * puff, y: back[i].y + ny * puff });
+    const depth = Math.min(1, 0.05 + 0.3 * Math.pow(f, 1.5) + (f > 0.7 ? Math.pow((f - 0.7) / 0.3, 1.6) * 0.7 : 0));
+    inner.push(lerp(back[i], face[i], Math.min(1, depth * (0.75 + 0.25 * Math.abs(Math.sin(f * Math.PI * 9))) * Math.min(1, f * 5))));
+  }
+  draw(k, swell, "Foam", [[...outer, ...inner.reverse()].map(at)], "foam", { key: keyline(u), effects: [grain(u, 9, 0.04)] });
+  const curls = [];
+  for (let i = start + 14; i < N - 4; i += 7) {
+    const c = lerp(back[i], face[i], 0.07 + 0.1 * rand()), r = 9 + 7 * rand(), a0 = rand() * Math.PI;
+    curls.push(Array.from({ length: 8 }, (_, j) => ({ x: c.x + r * (1 - j / 14) * Math.cos(a0 + j * 0.5), y: c.y + r * (1 - j / 14) * Math.sin(a0 + j * 0.5) })).map(at));
+  }
+  draw(k, swell, "Foam curls", curls, "water", { line: keyline(u) * 0.9 });
+  const drops = [[], [], []];
+  const finger = (root, angle, len, width, curl, n2) => {
+    const mid = [root];
+    let a = angle;
+    for (let j = 1; j <= 10; j++) {
+      a += curl * (4 + j) / 95;
+      mid.push({ x: mid[j - 1].x + len / 10 * Math.cos(a), y: mid[j - 1].y + len / 10 * Math.sin(a) });
+    }
+    const side = (sgn) => mid.map((p, j) => {
+      const q = mid[Math.min(10, j + 1)], q0 = mid[Math.max(0, j - 1)], l = Math.hypot(q.x - q0.x, q.y - q0.y) || 1;
+      const wdt = width / 2 * Math.pow(1 - j / 10, 0.85) * (1 + 0.3 * Math.sin(j / 10 * Math.PI));
+      return { x: p.x + sgn * wdt * -(q.y - q0.y) / l, y: p.y + sgn * wdt * (q.x - q0.x) / l };
+    });
+    const shape = [...side(1), ...side(-1).reverse()].map(at);
+    const cid = draw(k, swell, "Claw", [shape], "foam", { key: keyline(u) * 0.9 });
+    const node = k.node(cid), r0 = at(root);
+    k.patch(cid, { anchorX: r3(Math.min(1, Math.max(0, (r0.x - node.x) / node.width))), anchorY: r3(Math.min(1, Math.max(0, (r0.y - node.y) / node.height))) });
+    const tip = mid[10];
+    for (let j = 0; j < 3; j++) drops[(n2 + j) % 3].push(circle2(tip.x + (14 + 26 * j) * Math.cos(a + 0.3 * j) + (rand() - 0.5) * 22, tip.y + (14 + 26 * j) * Math.sin(a + 0.3 * j) + (rand() - 0.5) * 22, 3 + 5 * rand(), 9).map(at));
+  };
+  let n = 0;
+  for (let i = 60; i <= N; i += 5) {
+    const f = (i - 60) / (N - 60), a = back[Math.max(0, i - 1)], b = back[Math.min(N, i + 1)];
+    const tangent = Math.atan2(b.y - a.y, b.x - a.x);
+    finger(back[i], tangent - 1.05 + 0.25 * f, 74 + 70 * Math.sin(Math.PI * Math.min(1, 0.15 + f)) + 18 * rand(), 44 - 10 * f, 1.75 + 0.4 * rand(), n++);
+  }
+  for (let i = 74; i <= N - 2; i += 5) {
+    const a = back[Math.max(0, i - 1)], b = back[Math.min(N, i + 1)];
+    finger(back[i], Math.atan2(b.y - a.y, b.x - a.x) - 0.8, 104 + 56 * rand(), 30, 1.05 + 0.3 * rand(), n++);
+  }
+  for (let i = N - 3; i >= N - 30; i -= 5) finger(lerp(back[i], face[i], 1), Math.PI * 0.62 + 0.25 * rand(), 26 + 30 * rand(), 20, 1 + 0.6 * rand(), n++);
+  drops.forEach((d, i) => {
+    if (d.length) draw(k, swell, "Spray", d, "foam", { key: keyline(u) * 0.5, opacity: 1 - i * 0.12 });
+  });
+  k.patch(swell, { anchorX: o.flip ? 0.75 : 0.25, anchorY: 1 });
+  if (!o.still) {
+    k.behave(swell, "rotation", [{ kind: "sine", amp: 1.3, freq: hz(2, o.loopMs) }]);
+    k.behave(swell, "translateY", [{ kind: "sine", amp: 10 * u, freq: hz(2, o.loopMs), phase: 0.25 }]);
+  }
+  return id;
+}
+function boat(k, parent, o) {
+  const L = o.len, H = L * 0.16, up = L * 0.42, { u } = o;
+  const id = k.frame(parent, { x: r3(o.x - L / 2), y: r3(o.y - up - H), width: r3(L), height: r3(up + H) }, { name: "Boat" });
+  const fx = (p) => ({ x: o.flip ? L - p.x : p.x, y: p.y + up });
+  const hull = spline([{ x: 0, y: H * 0.1 }, { x: L * 0.5, y: H * 0.34 }, { x: L * 0.86, y: H * 0.26 }, { x: L, y: -H * 0.55 }], 6);
+  const keel = spline([{ x: L * 0.97, y: -H * 0.2 }, { x: L * 0.86, y: H * 0.8 }, { x: L * 0.5, y: H }, { x: L * 0.1, y: H * 0.86 }, { x: 0, y: H * 0.1 }], 6);
+  draw(k, id, "Mast", [[{ x: L * 0.36, y: H * 0.3 }, { x: L * 0.36, y: -up * 0.96 }].map(fx)], "ink", { line: keyline(u) * 1.2 });
+  draw(k, id, "Banner", [[{ x: L * 0.36, y: -up * 0.94 }, { x: L * 0.58, y: -up * 0.9 }, { x: L * 0.55, y: -up * 0.66 }, { x: L * 0.59, y: -up * 0.42 }, { x: L * 0.36, y: -up * 0.4 }].map(fx)], "accent", { key: keyline(u) * 0.8 });
+  const backs = [], heads = [];
+  for (let i = 0; i < 5; i++) {
+    const x = L * (0.14 + 0.13 * i + (i > 1 ? 0.08 : 0)), y = H * (0.16 + 0.03 * i);
+    backs.push(spline([{ x: x - L * 0.035, y }, { x: x - L * 0.01, y: y - H * 0.75 }, { x: x + L * 0.04, y: y - H * 0.5 }, { x: x + L * 0.045, y }], 4).map(fx));
+    heads.push(circle2(x + L * 0.045, y - H * 0.72, L * 0.018, 9).map(fx));
+  }
+  draw(k, id, "Rowers", backs, "seaDark", { key: keyline(u) * 0.6 });
+  draw(k, id, "Heads", heads, "ink");
+  draw(k, id, "Hull", [[...hull, ...keel].map(fx)], "wood", { key: keyline(u), effects: [shade(u, 0.3, 4, 10)] });
+  draw(k, id, "Hull plank", [spline([{ x: L * 0.04, y: H * 0.42 }, { x: L * 0.5, y: H * 0.64 }, { x: L * 0.9, y: H * 0.42 }], 6).map(fx)], "ink", { line: keyline(u) * 0.7, opacity: 0.7 });
+  k.patch(id, { anchorX: 0.5, anchorY: 1 });
+  if (!o.still) {
+    k.behave(id, "rotation", [{ kind: "sine", amp: 3.2, freq: hz(2, o.loopMs), phase: 0.1 }]);
+    k.behave(id, "translateY", [{ kind: "sine", amp: 9 * u, freq: hz(2, o.loopMs), phase: 0.35 }]);
+  }
+  return id;
+}
+function pine(k, parent, o) {
+  const S = o.size, { u } = o, id = k.frame(parent, { x: r3(o.flip ? o.x - S : o.x), y: r3(o.y), width: r3(S), height: r3(S * 0.7) }, { name: "Pine" });
+  const at = (p) => ({ x: (o.flip ? 1 - p.x : p.x) * S, y: p.y * S });
+  const bough = spline([{ x: -0.04, y: 0.02 }, { x: 0.16, y: 0.1 }, { x: 0.33, y: 0.09 }, { x: 0.5, y: 0.2 }, { x: 0.68, y: 0.22 }, { x: 0.86, y: 0.36 }], 6);
+  const twigs = [
+    spline([{ x: 0.33, y: 0.09 }, { x: 0.4, y: 0.24 }, { x: 0.36, y: 0.4 }], 5),
+    spline([{ x: 0.5, y: 0.2 }, { x: 0.6, y: 0.36 }, { x: 0.72, y: 0.46 }], 5),
+    spline([{ x: 0.16, y: 0.1 }, { x: 0.14, y: 0.24 }, { x: 0.2, y: 0.33 }], 5),
+    spline([{ x: 0.68, y: 0.22 }, { x: 0.78, y: 0.16 }, { x: 0.9, y: 0.18 }], 5)
+  ];
+  const taper = (line, w0, w1) => {
+    const side = (sgn) => line.map((p, j) => {
+      const q = line[Math.min(line.length - 1, j + 1)], q0 = line[Math.max(0, j - 1)], l = Math.hypot(q.x - q0.x, q.y - q0.y) || 1, w = (w0 + (w1 - w0) * (j / (line.length - 1))) / 2;
+      return { x: p.x + sgn * w * -(q.y - q0.y) / l, y: p.y + sgn * w * (q.x - q0.x) / l };
+    });
+    return [...side(1), ...side(-1).reverse()].map(at);
+  };
+  draw(k, id, "Bough", [taper(bough, 0.05, 0.012), ...twigs.map((t) => taper(t, 0.02, 6e-3))], "bark", { key: keyline(u) * 0.7 });
+  const pads = [[0.12, 0.05, 0.13], [0.36, 0.4, 0.15], [0.72, 0.46, 0.14], [0.2, 0.33, 0.12], [0.9, 0.18, 0.11], [0.86, 0.36, 0.13], [0.52, 0.17, 0.12], [0.3, 0.05, 0.1], [0.62, 0.34, 0.1], [0.42, 0.26, 0.09]];
+  const dark = [], light = [], needles = [];
+  pads.forEach(([x, y, r], i) => {
+    const pad = [];
+    for (let j = 0; j <= 14; j++) {
+      const a = Math.PI + Math.PI * j / 14;
+      pad.push({ x: x + r * Math.cos(a), y: y + r * 0.62 * Math.sin(a) });
+    }
+    pad.push({ x: x + r * 0.5, y: y + r * 0.1 }, { x, y: y + r * 0.02 }, { x: x - r * 0.5, y: y + r * 0.1 });
+    (i % 3 === 0 ? dark : light).push(pad.map(at));
+    for (let j = 1; j < 9; j++) {
+      const a = Math.PI + Math.PI * j / 9;
+      needles.push([{ x, y: y + r * 0.02 }, { x: x + r * 0.88 * Math.cos(a), y: y + r * 0.55 * Math.sin(a) }].map(at));
+    }
+  });
+  draw(k, id, "Needle pads", light, "pine", { key: keyline(u) * 0.8, effects: [shade(u, 0.2, 4, 10)] });
+  draw(k, id, "Dark needle pads", dark, "pineDark", { key: keyline(u) * 0.8 });
+  draw(k, id, "Needles", needles, "ink", { line: keyline(u) * 0.5, opacity: 0.55 });
+  k.patch(id, { anchorX: o.flip ? 1 : 0, anchorY: 0 });
+  if (!o.still) k.behave(id, "rotation", [{ kind: "sine", amp: 0.9, freq: hz(1, o.loopMs), phase: o.i / 3 }]);
+  return id;
+}
+var SEA_ROLES = ["haze", "water", "seaLight", "sea", "seaDark", "deep"];
+function print(k, parent, t, at = { x: 0, y: 0 }) {
+  const u = t.u, seed = t.seed ?? 3, rand = rng(seed), high = t.high ?? 600 * u, foot = t.h + (t.deep ?? 0);
+  const id = k.frame(parent, { ...at, width: t.w, height: t.h }, { name: "Print" });
+  if (t.band) {
+    k.rect(id, t.w, r3(high + 2), "skyDeep", { name: "Sky head", opacity: 0.96, absolute: { x: 0, y: r3(-high) } });
+    k.rect(id, t.w, r3(t.band), [k.gradient({ from: "skyDeep", to: "skyDeep", angle: 90, fromOpacity: 0.96, toOpacity: 0 })], { name: "Sky band", absolute: { x: 0, y: 0 } });
+    const lines = [];
+    for (let i = 0; i < 9; i++) {
+      const y = t.band * (0.06 + 0.1 * i), ph = rand() * 6;
+      lines.push(Array.from({ length: 25 }, (_, j) => ({ x: t.w * j / 24, y: y + 5 * u * Math.sin(ph + j * 0.55) + 3 * u * Math.sin(ph * 2 + j * 1.3) })));
+    }
+    draw(k, id, "Block grain", lines, "paper", { line: Math.max(1, 1.6 * u), opacity: 0.16 });
+  }
+  k.rect(id, t.w, r3(260 * u), [k.gradient({ from: "water", to: "water", angle: 90, fromOpacity: 0, toOpacity: 0.5 })], { name: "Horizon wash", absolute: { x: 0, y: r3(t.horizon - 260 * u) } });
+  if (t.sun) sun(k, id, { ...t.sun, u });
+  const flock = (t.birds ?? []).map(({ x, y, size: s }) => [{ x: x - s, y: y - s * 0.25 }, { x: x - s * 0.45, y: y - s * 0.55 }, { x, y }, { x: x + s * 0.45, y: y - s * 0.55 }, { x: x + s, y: y - s * 0.25 }]);
+  if (flock.length) {
+    const birds = draw(k, id, "Birds", flock, "ink", { line: keyline(u), opacity: 0.8 });
+    if (!t.still) k.behave(birds, "translateY", [{ kind: "sine", amp: 9 * u, freq: hz(2, t.loopMs) }]);
+  }
+  if (t.mountain) mountain(k, id, { ...t.mountain, base: t.horizon + 6 * u, u });
+  (t.mist ?? []).forEach((m, i) => {
+    const band = mist(k, id, m, u);
+    if (!t.still) k.behave(band, "translateX", [{ kind: "sine", amp: (26 + 22 * (i % 3)) * u, freq: hz(1 + i % 2, t.loopMs), phase: r3(i * 0.37 % 1) }]);
+  });
+  k.rect(id, t.w, r3(foot - t.horizon), "haze", { name: "Far water", absolute: { x: 0, y: r3(t.horizon) } });
+  draw(k, id, "Horizon", [[{ x: 0, y: t.horizon }, { x: t.w, y: t.horizon }]], "ink", { line: keyline(u) * 0.8, opacity: 0.7 });
+  const behind = t.behind ?? Math.ceil(t.rows / 2);
+  const rowF = (i) => t.rows === 1 ? 1 : i / (t.rows - 1);
+  const rowY = (i) => r3(t.horizon + (t.front - t.horizon) * Math.pow((i + 1) / t.rows, 1.25));
+  const rowAmp = (i) => (12 + 46 * rowF(i)) * u;
+  const row = (i) => {
+    const f = rowF(i);
+    const r = seaRow(k, id, {
+      w: t.w,
+      y: rowY(i),
+      foot,
+      len: (110 + 250 * f) * u,
+      amp: rowAmp(i),
+      role: SEA_ROLES[Math.min(SEA_ROLES.length - 1, 1 + Math.round(f * (SEA_ROLES.length - 2)))],
+      u,
+      seed: seed + i * 7,
+      caps: f > 0.15 ? 0.5 : 0,
+      flip: i % 2 === 1
+    });
+    if (!t.still) k.behave(r, "translateX", [{ kind: "sine", amp: (14 + 30 * f) * u, freq: hz(1 + i % 2, t.loopMs), phase: r3(i * 0.29 % 1) }]);
+  };
+  for (let i = 0; i < Math.min(behind, t.rows); i++) row(i);
+  if (t.wave) greatWave(k, id, { ...t.wave, u, loopMs: t.loopMs, still: t.still, seed });
+  if (t.boat) boat(k, id, { ...t.boat, y: t.boat.y ?? r3(rowY(Math.min(behind, t.rows - 1)) - rowAmp(Math.min(behind, t.rows - 1)) * 0.5), u, loopMs: t.loopMs, still: t.still });
+  for (let i = behind; i < t.rows; i++) row(i);
+  if (t.pattern !== void 0) {
+    const R = 68 * u, arcs = [];
+    for (let rowI = 0, cy = t.pattern + R; cy - R < foot; rowI++, cy += R / 2) {
+      for (let cx = rowI % 2 ? R : 0; cx - R < t.w; cx += 2 * R) {
+        for (const r of [R, R * 0.62, R * 0.28]) {
+          let run = [];
+          for (let j = 0; j <= 10; j++) {
+            const a = Math.PI + Math.PI * j / 10, p = { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+            const hidden = Math.hypot(p.x - (cx - R), p.y - (cy + R / 2)) < R - 0.01 || Math.hypot(p.x - (cx + R), p.y - (cy + R / 2)) < R - 0.01 || p.y > foot;
+            if (!hidden) run.push(p);
+            else {
+              if (run.length > 1) arcs.push(run);
+              run = [];
+            }
+          }
+          if (run.length > 1) arcs.push(run);
+        }
+      }
+    }
+    draw(k, id, "Wave scales", arcs, "sea", { line: keyline(u) * 0.9, opacity: 0.7 });
+  }
+  ;
+  (t.fore ?? []).forEach((y, i) => {
+    const r = seaRow(k, id, { w: t.w, y, foot, len: 430 * u, amp: 84 * u, role: i % 2 ? "sea" : "seaDark", u, seed: seed + 90 + i * 5, caps: 0.5, flip: i % 2 === 0 });
+    k.patch(r, { name: "Fore swell" });
+    if (!t.still) k.behave(r, "translateX", [{ kind: "sine", amp: (40 + 16 * i) * u, freq: hz(1, t.loopMs), phase: r3(0.2 + i * 0.31) }]);
+  });
+  (t.pines ?? []).forEach((p, i) => pine(k, id, { ...p, u, loopMs: t.loopMs, still: t.still, i }));
+  const fibres = [];
+  for (let i = 0; i < Math.round(t.w * t.h / (36e3 * u * u)); i++) {
+    const x = rand() * t.w, y = rand() * t.h, a = rand() * Math.PI, l = (14 + 30 * rand()) * u, bend = (rand() - 0.5) * 10 * u;
+    fibres.push([{ x: x - l * Math.cos(a), y: y - l * Math.sin(a) }, { x: x + bend, y: y - bend }, { x: x + l * Math.cos(a), y: y + l * Math.sin(a) }]);
+  }
+  draw(k, id, "Washi fibres", fibres, "ink", { line: Math.max(0.8, 1.1 * u), opacity: 0.1 });
+  return id;
+}
+function liftSky(k, root, dy) {
+  for (const name of ["Sky head", "Sky band", "Block grain", "Pine"]) for (const id of k.named(root, name)) k.patch(id, { y: r3(k.node(id).y - dy) });
+}
+function seal(k, parent, size, o = {}) {
+  const pad = Math.round(size * 0.17);
+  const id = k.stack(parent, { width: size, height: size, fill: "accent", radius: Math.round(size * 0.14), padding: pad, align: "CENTER", justify: "CENTER", name: o.name ?? "Seal", effects: [grain(1, 15, 0.1)], ...o.absolute ? { absolute: o.absolute } : {} });
+  k.logo(id, size - 2 * pad, size - 2 * pad);
+  return id;
+}
+function stamp(k, id, at) {
+  for (const axis of ["scaleX", "scaleY"]) k.animate(id, axis, [{ t: at, v: 1.9, ease: ease.named("cubic", "in") }, { t: at + 170, v: 0.92, ease: ease.out("cubic") }, { t: at + 330, v: 1 }]);
+  k.animate(id, "opacity", [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 110, v: 1 }]);
+}
+function cartouche(k, parent, words, o) {
+  const pad = o.pad ?? 12;
+  const id = k.stack(parent, { width: o.width, gap: Math.round(pad * 0.35), fill: "card", stroke: { color: "text", width: 2 }, padding: { top: pad, right: 4, bottom: pad, left: 4 }, align: "CENTER", name: o.name ?? "Cartouche", ...o.absolute ? { absolute: o.absolute } : {} });
+  for (const w of words) k.text(id, w, { style: o.style, color: "onCard", align: "CENTER", name: "Cartouche word" });
+  return id;
+}
+function mount(k, parent, w, h, o = {}) {
+  const m = o.margin ?? 16;
+  const sheet = k.stack(parent, { width: w, height: h, fill: "card", name: o.name ?? "Mount", effects: [shade(1, 0.3, 14, 36)], ...o.absolute ? { absolute: o.absolute } : {} });
+  const window = k.frame(sheet, { x: m, y: m, width: w - 2 * m, height: h - 2 * m }, { name: "Window", fill: "paper", clip: true });
+  return { sheet, window, inner: { w: w - 2 * m, h: h - 2 * m } };
+}
+function windowFrame(k, sheet, w, h, margin = 16, weight = 2.5) {
+  k.rect(sheet, w - 2 * margin, h - 2 * margin, [], { name: "Window keyline", stroke: { color: "text", width: weight, align: "INSIDE" }, absolute: { x: margin, y: margin } });
+}
+
+export {
+  ukiyoBrand,
+  sun,
+  greatWave,
+  print,
+  liftSky,
+  seal,
+  stamp,
+  cartouche,
+  mount,
+  windowFrame
+};

package/dist/chunks/chunk-R44CPURW.js

@@ -0,0 +1,138 @@
+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 {
+  ARIAL,
+  COURIER,
+  callToAction,
+  drop,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell
+} from "./chunk-3GWXJYDO.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/saas-mail-payment-failed.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var HEADER_H = 392;
+var STOPS = [["3 Oct", "Declined"], ["6 Oct", "We try again"], ["13 Oct", "Plan pauses"]];
+var LINE = { x: 76, y: 318, step: 224 };
+var cues = [
+  { layer: "Stop 2", preset: "pulse", at: 700, params: { duration: 800, amount: 0.18 } },
+  { layer: "Stop 2", preset: "pulse", at: 2700, params: { duration: 800, amount: 0.18 } }
+];
+var CHARGE = [
+  ["Plan", "Studio, billed monthly"],
+  ["Amount", "$38.00"],
+  ["Card", "Visa ending 4242, expired 09/26"],
+  ["Next try", "Tuesday 6 October"]
+];
+var saas_mail_payment_failed_default = defineTemplate({
+  id: "email-saas-mail-payment-failed",
+  meta: {
+    name: "SaaS lifecycle email: payment failed",
+    description: 'A whole 600 px payment-failed (dunning) email, calm and specific: the card that was declined on a pale desk with the three dates that matter along a line, then "nothing has changed yet", the charge as a small table, one button to update the card and exactly what happens if it is ignored. The header loops for four seconds (export it as a GIF); the body is table-safe type',
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "payment failed", "dunning", "card expiring", "card declined", "billing", "renewal", "transactional", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["receipt", "pricing"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: payment failed", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FBFAF7", text: "#1B2330", onPaper: "#48505E", primary: "#1D4F7C", onPrimary: "#FFFFFF", accent: "#E8A33A", onAccent: "#241A08", tint: "#EEF1F0", onTint: "#1B2330" },
+      { company: "Marlow", address: "41 Tib Street, Manchester M4 1LX" }
+    );
+    k.palette({ desk: "#DFE8EC", onDesk: "#1B2330", deskSoft: "#46505E", card: "#1D4F7C", onCard: "#FFFFFF", cardSoft: "#C9D9E6", band: "#163E62", chip: "#E8C98A", track: "#B9C6CD", stop: "#FFFFFF" });
+    k.textStyle("Eyebrow 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16 });
+    k.textStyle("Hero 38", { size: 38, fontWeight: 800, letterSpacing: -1.5, lineHeight: 42 });
+    k.textStyle("Card 12", { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Card number 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 26 });
+    k.textStyle("Stop date 15", { size: 15, fontWeight: 800, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Stop 13", { size: 13, fontWeight: 500, lineHeight: 18, textAlign: "CENTER" });
+    k.textStyle("Heading 26", { ...ARIAL, size: 26, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Label 12", { ...COURIER, size: 12, fontWeight: 700, letterSpacing: 1.5, lineHeight: 22 });
+    k.textStyle("Value 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Update your card", width: 240, height: 52 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "desk");
+    k.text(head, "{{brand.company}} \xB7 BILLING", { style: "Eyebrow 12", color: "deskSoft", width: 300, name: "Eyebrow", absolute: { x: 40, y: 40 } });
+    k.text(head, "Your card\ndidn\u2019t go\nthrough.", { style: "Hero 38", color: "onDesk", width: 250, name: "Hero", absolute: { x: 38, y: 66 } });
+    k.text(head, "Nothing is switched off. One step fixes it.", { style: "Stop 13", color: "deskSoft", width: 220, align: "LEFT", name: "Calm", absolute: { x: 40, y: 206 } });
+    const card = k.stack(head, { width: 264, height: 166, fill: "card", radius: 16, clip: true, justify: "SPACE_BETWEEN", padding: { top: 20, right: 22, bottom: 20, left: 22 }, effects: [drop(0.22, 16, 36)], name: "Card", absolute: { x: 296, y: 54 } });
+    const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card top" });
+    k.rect(top, 40, 30, "chip", { radius: 6, name: "Chip" });
+    const tagBox = k.stack(top, { direction: "HORIZONTAL", width: "HUG", fill: "accent", radius: 999, padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Expired chip" });
+    k.text(tagBox, "EXPIRED 09/26", { style: "Card 12", color: "onAccent", autoWidth: true, name: "Expired" });
+    const low = k.stack(card, { gap: 6, name: "Card details" });
+    k.text(low, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 4242", { style: "Card number 20", color: "onCard", name: "Card number" });
+    const names = k.stack(low, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Card names" });
+    k.text(names, "NOOR HALVORSEN", { style: "Card 12", color: "cardSoft", autoWidth: true, name: "Card holder" });
+    k.text(names, "VISA", { style: "Card 12", color: "onCard", autoWidth: true, name: "Card brand" });
+    swell(k, card, "translateY", { amp: 5, loopMs: DURATION, cycles: 1 });
+    k.rect(head, LINE.step * 2, 2, "track", { name: "Track", absolute: { x: LINE.x, y: LINE.y - 1 } });
+    STOPS.forEach(([date, what], i) => {
+      const x = LINE.x + i * LINE.step, now = i === 1;
+      const size = now ? 22 : 14;
+      k.ellipse(head, size, now ? "accent" : "stop", { name: `Stop ${i + 1}`, stroke: { color: now ? "onDesk" : "track", width: 2, align: "INSIDE" }, absolute: { x: x - size / 2, y: LINE.y - size / 2 } });
+      k.text(head, date, { style: "Stop date 15", color: "onDesk", width: 140, name: "Stop date", absolute: { x: x - 70, y: LINE.y + 18 } });
+      k.text(head, what, { style: "Stop 13", color: "deskSoft", width: 140, name: "Stop label", absolute: { x: x - 70, y: LINE.y + 40 } });
+    });
+    const intro = section(k, sheet, { name: "Intro", pad: [36, 40, 16, 40], gap: 10 });
+    k.text(intro, "Nothing has changed yet.", { style: "Heading 26", color: "text", name: "Heading" });
+    k.text(intro, "Hi Noor. We tried to renew {{brand.company}} Studio on 3 October and the bank declined the card, most likely because it expired last month. Your bookings page is live and clients can still book.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const charge = section(k, sheet, { name: "Charge", pad: [4, 40, 8, 40] });
+    for (const [label, value] of CHARGE) {
+      k.rect(charge, "FILL", 1, "tint", { name: "Charge rule" });
+      const row = mailRow(k, charge, { name: "Charge row", gap: 16, padding: { top: 12, right: 0, bottom: 12, left: 0 } });
+      const left = k.stack(row, { width: 104, name: "Charge cell" });
+      k.text(left, label.toUpperCase(), { style: "Label 12", color: "text", name: "Charge label" });
+      const right = k.stack(row, { width: "FILL", name: "Charge value cell" });
+      k.text(right, value, { style: "Value 16", color: "text", name: "Charge value" });
+    }
+    k.rect(charge, "FILL", 1, "tint", { name: "Charge rule" });
+    callToAction(k, sheet, { button: "Mail button", label: "Update your card", pad: [28, 40, 24, 40], note: "It takes under a minute. We charge $38.00 once, then on the 3rd of each month as before.", noteStyle: "Small 15", noteInk: "onPaper" });
+    const after = section(k, sheet, { name: "If you do nothing", pad: [4, 40, 28, 40] });
+    const box = k.stack(after, { fill: "tint", padding: { top: 18, right: 22, bottom: 20, left: 22 }, gap: 4, name: "After box" });
+    k.text(box, "If you do nothing", { style: "Value 16", color: "onTint", name: "After heading" });
+    k.text(box, "We try the same card again on 6 October and once more on the 10th. On 13 October the plan pauses: your page shows as closed to new bookings, and nothing is deleted for 60 days. Paying brings everything back at once.", { style: "Small 15", color: "onTint", name: "After words" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "tint", pad: [8, 40, 32, 40], why: "You are getting this because you are the billing contact for the {{brand.company}} workspace \u201CHalvorsen Pilates\u201D.", links: "Billing emails are part of your account. Questions: reply to this email." });
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_payment_failed_default
+};