@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-YR7TZQYH.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-WV6ZTKE7.js";
+import {
+  RADIAL,
+  noise
+} from "./chunk-M6VTXO6F.js";
+import {
+  circle,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.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-YRVOJVEO.js

@@ -0,0 +1,75 @@
+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 {
+  outro,
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/post-quote.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Rule", preset: "wipe-in", at: 100, params: { duration: 600 } },
+  { layer: "Quote", preset: "blur-in", at: 300, params: { duration: 1e3, amount: 28 } },
+  { layer: "Attribution", preset: "slide-in", at: 1200, params: { direction: "left", distance: 90 } },
+  { layer: "Quote", preset: "pulse", at: 3200, params: { amount: 0.02, duration: 1200 } },
+  { layer: "Rule", preset: "wipe-out", at: 5900 },
+  outro(["Quote", "Attribution"], 5900)
+];
+var post_quote_default = defineTemplate({
+  id: "motion-social-quote",
+  meta: {
+    name: "Quote post (animated)",
+    description: "The quote post in motion: a rule wipes open, the words come into focus and the attribution slides in under them \u2014 seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "quote", "instagram", "post", "wisdom", "books", "threads"],
+    platforms: ["instagram", "threads", "linkedin", "pinterest"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["quote"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Quote post (animated)", preset("ig-post"));
+    k.brand(
+      { paper: "#F4EFE6", text: "#2B2A26", onPaper: "#5E5A52", primary: "#8A3B12", onPrimary: "#FFFFFF" },
+      { quote: "Our life is frittered away by detail. Simplify, simplify." }
+    );
+    k.textStyle("Quote 76", { size: 76, fontWeight: 700, letterSpacing: -1.5, lineHeight: 88 });
+    k.textStyle("Author 30", { size: 30, fontWeight: 700, lineHeight: 36 });
+    k.textStyle("Source 26", { size: 26, fontWeight: 500, lineHeight: 32 });
+    k.component("Attribution", { direction: "HORIZONTAL", width: 904, gap: 20, align: "CENTER", props: { Author: "Henry David Thoreau", Source: "Walden, 1854" } }, (id) => {
+      k.rect(id, 6, 64, "primary", { radius: 3, name: "Bar" });
+      const col = k.stack(id, { gap: 2, name: "Lines" });
+      k.propText(col, "Author", { style: "Author 30", color: "text" });
+      k.propText(col, "Source", { style: "Source 26", color: "onPaper" });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 40, 88, "paper", "CENTER", "MIN");
+    k.timeline(sheet, { duration: 7e3, fps: 30 });
+    k.stack(sheet, { width: 140, height: 10, fill: "primary", radius: 5, clip: true, name: "Rule" });
+    k.text(sheet, "{{brand.quote}}", { style: "Quote 76", color: "text", name: "Quote" });
+    k.instance(sheet, "Attribution", { Author: "Henry David Thoreau", Source: "Walden, 1854 \xB7 shared by @slowreadsclub" }, { width: "FILL", name: "Attribution" });
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 96 }));
+    return k.finish();
+  }
+});
+
+export {
+  post_quote_default
+};

package/dist/chunks/chunk-YUVKXDSB.js

@@ -0,0 +1,93 @@
+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,
+  arc,
+  lottieTemplate
+} from "./chunk-SFLOYGZM.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/lottie/fintech.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FIN = { paper: "#F5F7FB", ink: "#0B1B3F", accent: "#1F6FFF", success: "#18B26B", soft: "#DCE7FF", white: "#FFFFFF", gold: "#F5B83D", screen: "#13285A" };
+var finPaymentSuccess = lottieTemplate({
+  slug: "payment-success",
+  sector: "fintech",
+  role: "success",
+  size: "icon",
+  duration: 1800,
+  loop: false,
+  name: "Payment successful",
+  description: "The confirmation after a payment: a green disc pops, the check draws itself on, and a ring and sparks burst out \u2014 1.8 seconds that rest on the finished tick, 512\xD7512",
+  colors: FIN,
+  useCases: ["receipt"],
+  tags: ["payment", "checkmark", "confirmation", "success"],
+  build(l) {
+    const c = 256;
+    const ring = l.ring(l.sheet, c, c, 150, "success", 10, { name: "Burst ring", opacity: 0 });
+    l.scale(ring, [[0, 0.8, E.hold], [350, 0.8, E.out], [1100, 1.4]]);
+    l.opacity(ring, [[0, 0, E.hold], [350, 0, E.out], [450, 0.6, E.in], [1100, 0]]);
+    for (let i = 0; i < 6; i++) {
+      const a = (i * 60 + 30) * Math.PI / 180;
+      const d = l.circle(l.sheet, c + 150 * Math.sin(a), c - 150 * Math.cos(a), 12, i % 2 ? "accent" : "gold", { name: "Spark", opacity: 0 });
+      l.keys(d, "translateX", [[0, 0, E.hold], [450, 0, E.out], [1200, 70 * Math.sin(a)]]);
+      l.keys(d, "translateY", [[0, 0, E.hold], [450, 0, E.out], [1200, -70 * Math.cos(a)]]);
+      l.opacity(d, [[0, 0, E.hold], [450, 0, E.out], [520, 1, E.in], [1200, 0]]);
+    }
+    const disc = l.circle(l.sheet, c, c, 150, "success", { name: "Disc" });
+    l.scale(disc, [[0, 0, E.pop], [450, 1]]);
+    const check = l.box(l.sheet, 160, 170, 200, 170, "Check");
+    const reveal = l.rect(check, 0, 0, 200, 170, "white", { name: "Check reveal", mask: true });
+    l.pivot(reveal, 0, 0.5);
+    l.keys(reveal, "scaleX", [[0, 0, E.hold], [380, 0, E.out], [820, 1]]);
+    l.line(check, [[28, 90], [78, 140], [172, 40]], "white", 34, { name: "Tick" });
+  }
+});
+var finCardTap = lottieTemplate({
+  slug: "card-tap",
+  sector: "fintech",
+  role: "explainer",
+  size: "spot",
+  duration: 3e3,
+  loop: true,
+  name: "Tap to pay",
+  description: "A contactless payment explained: the card swings onto the terminal, the waves pulse, the screen ticks green, and the card lifts away \u2014 a three-second seamless loop, 800\xD7600",
+  colors: FIN,
+  useCases: ["onboarding"],
+  tags: ["contactless", "card", "terminal", "nfc"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 250, "soft", { name: "Backdrop" });
+    const term = l.box(l.sheet, 440, 150, 220, 340, "Terminal", { fill: "ink", radius: 36 });
+    const screen = l.box(term, 24, 26, 172, 128, "Screen", { fill: "screen", radius: 18 });
+    const ok = l.circle(screen, 86, 64, 34, "success", { name: "Approved" });
+    l.scale(ok, [[0, 0, E.hold], [1100, 0, E.pop], [1400, 1, E.hold], [2300, 1, E.in], [2500, 0]]);
+    const tick = l.line(screen, [[70, 64], [82, 76], [104, 52]], "white", 9, { name: "Approved tick" });
+    l.opacity(tick, [[0, 0, E.hold], [1250, 0, E.out], [1400, 1, E.hold], [2300, 1, E.in], [2450, 0]]);
+    for (let r = 0; r < 3; r++) for (let q = 0; q < 3; q++) l.rect(term, 34 + q * 54, 184 + r * 44, 44, 30, "screen", { radius: 8, name: "Key" });
+    for (let i = 0; i < 3; i++) {
+      const w = l.line(l.sheet, arc(550, 140, 40 + i * 28, -45, 45), "accent", 9, { name: "Wave", opacity: 0.25 });
+      const t = 900 + i * 120;
+      l.opacity(w, [[0, 0.25, E.hold], [t, 0.25, E.out], [t + 200, 1, E.inOut], [t + 700, 0.25, E.hold], [3e3, 0.25]]);
+    }
+    const card = l.box(l.sheet, 150, 220, 300, 190, "Card", { fill: "accent", radius: 22 });
+    l.rect(card, 28, 60, 52, 40, "gold", { radius: 8, name: "Chip" });
+    l.rect(card, 28, 138, 150, 16, "soft", { radius: 8, name: "Number" });
+    l.rect(card, 196, 138, 70, 16, "soft", { radius: 8, name: "Expiry" });
+    l.keys(card, "translateX", [[0, 0, E.inOut], [800, 190, E.hold], [1900, 190, E.inOut], [2700, 0, E.hold], [3e3, 0]]);
+    l.keys(card, "translateY", [[0, 0, E.inOut], [800, -40, E.hold], [1900, -40, E.inOut], [2700, 0, E.hold], [3e3, 0]]);
+    l.keys(card, "rotation", [[0, -14, E.inOut], [800, -4, E.hold], [1900, -4, E.inOut], [2700, -14, E.hold], [3e3, -14]]);
+  }
+});
+var FINTECH_PACK = [finPaymentSuccess, finCardTap];
+
+export {
+  finPaymentSuccess,
+  finCardTap,
+  FINTECH_PACK
+};