@popcraft/kit 0.26.1 → 0.27.0

package/dist/chunks/chunk-BVNEMAK6.js

@@ -0,0 +1,447 @@
+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 {
+  redraw
+} from "./chunk-QLV6445V.js";
+import {
+  blackShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  r3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/saas/style-sketch-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PLOTLINE = {
+  name: "Plotline",
+  site: "plotline.example",
+  version: "2.0",
+  feature: "Tidy up",
+  pitch: "A planning whiteboard that turns a wall of sticky notes into a plan with owners and dates, in one click.",
+  /** The demo board: notes on it, the columns they sort into, the people they go to. */
+  notes: 8,
+  columns: 3,
+  owners: 3,
+  /** A retro's follow-up, before and after Plotline, in minutes (the testimonial's team). */
+  before: 50,
+  after: 15,
+  /** Boards tidied since 2.0 shipped, and teams using it. */
+  boards: "1,000,000",
+  boardsN: 1e6,
+  teams: "38,000",
+  /** An editor a month; a year is billed at the second figure a month. Viewers are free. */
+  team: 8,
+  teamYear: 6,
+  business: 16,
+  businessYear: 13,
+  trial: "Free for 3 boards. No card."
+};
+var BRAND = {
+  paper: "#FBFAF5",
+  text: "#1C2230",
+  onPaper: "#4A5263",
+  primary: "#1F5FD1",
+  onPrimary: "#FFFFFF",
+  card: "#FFFFFF",
+  onCard: "#1C2230",
+  cardMuted: "#59606E"
+};
+var SCENERY = { red: "#E5432A", sticky: "#FFD84A", mint: "#A6E5C4", peach: "#FFC4AA", stickyInk: "#2A2414", hi: "#FFE15C" };
+function sketchBrand(k, fields) {
+  k.brand({ ...BRAND }, { name: PLOTLINE.name, site: PLOTLINE.site, ...fields });
+  k.palette({ ...SCENERY });
+}
+function hand(k, name, size, o = {}) {
+  k.textStyle(name, { size, fontWeight: o.weight ?? 800, lineHeight: Math.round(size * (o.lead ?? 1.1)), letterSpacing: Math.round(size * (o.spacing ?? -0.025) * 100) / 100 });
+  return name;
+}
+function sans(k, name, size, o = {}) {
+  k.textStyle(name, { size, fontWeight: o.weight ?? 500, lineHeight: Math.round(size * (o.lead ?? 1.35)) });
+  return name;
+}
+function stroke(pts, tension = 0.18) {
+  const n = pts.length;
+  return { closed: false, points: pts.map((p, i) => {
+    const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)], tx = (b.x - a.x) * tension, ty = (b.y - a.y) * tension;
+    return { x: r3(p.x), y: r3(p.y), handleIn: { x: r3(p.x - tx), y: r3(p.y - ty) }, handleOut: { x: r3(p.x + tx), y: r3(p.y + ty) } };
+  }) };
+}
+function wobblyBox(w, h, o = {}) {
+  const rand = rng(o.seed ?? 7), j = o.jitter ?? 3, ins = o.inset ?? 4;
+  const out = [];
+  for (let p = 0; p < (o.passes ?? 2); p++) {
+    const d = () => (rand() - 0.5) * 2 * j;
+    const x0 = ins + d() * 0.5, y0 = ins + d() * 0.5, x1 = w - ins + d() * 0.5, y1 = h - ins + d() * 0.5;
+    const s = 0.12 + rand() * 0.2;
+    const pts = [
+      { x: x0 + (x1 - x0) * s, y: y0 + d() },
+      { x: x0 + (x1 - x0) * 0.6, y: y0 + d() },
+      { x: x1 + d(), y: y0 + d() },
+      { x: x1 + d(), y: y0 + (y1 - y0) * 0.5 },
+      { x: x1 + d(), y: y1 + d() },
+      { x: x0 + (x1 - x0) * 0.5, y: y1 + d() },
+      { x: x0 + d(), y: y1 + d() },
+      { x: x0 + d(), y: y0 + (y1 - y0) * 0.5 },
+      { x: x0 + d(), y: y0 + d() },
+      { x: x0 + (x1 - x0) * (s + 0.1 + rand() * 0.08), y: y0 + d() * 1.4 }
+    ];
+    out.push(stroke(pts, 0.1));
+  }
+  return out;
+}
+function scribbleCircle(w, h, o = {}) {
+  const rand = rng(o.seed ?? 3), turns = o.turns ?? 1.25, ins = o.inset ?? 6;
+  const cx = w / 2, cy = h / 2, rx = w / 2 - ins, ry = h / 2 - ins;
+  const n = Math.round(24 * turns), pts = [];
+  for (let i = 0; i <= n; i++) {
+    const a = -2.1 + i / 24 * Math.PI * 2;
+    const k = 1 - 0.07 * (i / n) + (rand() - 0.5) * 0.04;
+    pts.push({ x: cx + Math.cos(a) * rx * k + i / n * 4, y: cy + Math.sin(a) * ry * k - i / n * 3 });
+  }
+  return [stroke(pts, 0.17)];
+}
+function underline(w, h, o = {}) {
+  const rand = rng(o.seed ?? 5), m = 4;
+  const y = (f) => h * 0.62 - f * h * 0.3 + (rand() - 0.5) * 2;
+  const main = stroke([{ x: m, y: y(0) }, { x: w * 0.35, y: y(0.3) }, { x: w * 0.7, y: y(0.6) }, { x: w - m, y: y(1) }], 0.2);
+  if (o.flick === false) return [main];
+  return [main, stroke([{ x: w * 0.62, y: h - m }, { x: w * 0.82, y: h - m - 2 }, { x: w - m * 3, y: h * 0.62 }], 0.2)];
+}
+function swipe(w, h, seed = 9) {
+  const rand = rng(seed);
+  return [stroke([{ x: 0, y: h * 0.55 + rand() * 3 }, { x: w * 0.5, y: h * 0.5 }, { x: w, y: h * 0.45 + rand() * 3 }], 0.2)];
+}
+var tick = (s) => [stroke([{ x: s * 0.12, y: s * 0.55 }, { x: s * 0.4, y: s * 0.82 }, { x: s * 0.9, y: s * 0.16 }], 0.08)];
+function arrow(from, to, o = {}) {
+  const rand = rng(o.seed ?? 11), bend = o.bend ?? 0.18;
+  const dx = to.x - from.x, dy = to.y - from.y, len = Math.hypot(dx, dy), nx = -dy / len, ny = dx / len;
+  const at = (f, off) => ({ x: from.x + dx * f + nx * off, y: from.y + dy * f + ny * off });
+  const bow = (f) => 4 * f * (1 - f) * bend * len;
+  const shaftPts = [0, 0.25, 0.5, 0.75, 1].map((f) => at(f, bow(f) + (f > 0 && f < 1 ? (rand() - 0.5) * 3 : 0)));
+  const e = shaftPts[4], q = shaftPts[3], ang = Math.atan2(e.y - q.y, e.x - q.x), L = o.head ?? Math.min(34, len * 0.28);
+  const wing = (s) => ({ x: e.x - Math.cos(ang + s * 0.5) * L, y: e.y - Math.sin(ang + s * 0.5) * L });
+  const raw = [stroke(shaftPts, 0.2), stroke([wing(1), e, wing(-1)], 0.02)];
+  return boxPaths(raw, 6);
+}
+function boxPaths(paths, pad = 0) {
+  const all = paths.flatMap((p) => p.points.flatMap((q) => [q, q.handleIn ?? q, q.handleOut ?? q]));
+  const x0 = Math.min(...all.map((p) => p.x)) - pad, y0 = Math.min(...all.map((p) => p.y)) - pad;
+  const x1 = Math.max(...all.map((p) => p.x)) + pad, y1 = Math.max(...all.map((p) => p.y)) + pad;
+  const sh = (p) => ({ x: r3(p.x - x0), y: r3(p.y - y0) });
+  return { x: r3(x0), y: r3(y0), w: r3(x1 - x0), h: r3(y1 - y0), paths: paths.map((p) => ({ ...p, points: p.points.map((q) => ({ ...q, ...sh(q), ...q.handleIn ? { handleIn: sh(q.handleIn) } : {}, ...q.handleOut ? { handleOut: sh(q.handleOut) } : {} })) })) };
+}
+function marker(k, parent, w, h, paths, o) {
+  const id = k.vector(parent, w, h, paths, [], { name: o.name, ...o.absolute ? { absolute: o.absolute } : {}, ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, stroke: { color: o.color ?? "text", width: o.width ?? 4, cap: o.cap ?? "ROUND", join: "ROUND" } });
+  if (o.sequential) k.patch(id, { trim: { start: 0, end: 1, offset: 0, mode: "SEQUENTIAL" } });
+  return id;
+}
+function arrowAt(k, parent, from, to, o = {}) {
+  const a = arrow(from, to, o);
+  return marker(k, parent, a.w, a.h, a.paths, { name: o.name ?? "Arrow", color: o.color ?? "red", width: o.width ?? 5, absolute: { x: a.x, y: a.y }, sequential: true });
+}
+function outline(k, parent, w, h, o = {}) {
+  return marker(k, parent, w, h, wobblyBox(w, h, { seed: o.seed, jitter: o.jitter, inset: o.inset, passes: o.passes }), { name: o.name ?? "Outline", color: o.color ?? "text", width: o.width ?? 3, absolute: { x: 0, y: 0 } });
+}
+function dots(k, sheet, o = {}) {
+  const { width: w, height: h } = k.node(sheet);
+  return k.vector(sheet, w, h, dotPaths(w, h, o.step ?? 40, o.size ?? 4), k.tint("text", o.opacity ?? 0.16), { name: "Notebook dots", absolute: { x: 0, y: 0 } });
+}
+var dotPaths = (w, h, step, size) => {
+  const out = [];
+  for (let y = step / 2; y < h; y += step) for (let x = step / 2; x < w; x += step) out.push({ closed: true, points: [{ x: x - size / 2, y: y - size / 2 }, { x: x + size / 2, y: y - size / 2 }, { x: x + size / 2, y: y + size / 2 }, { x: x - size / 2, y: y + size / 2 }] });
+  return out;
+};
+var redots = (k, sheet, step = 40, size = 4) => redraw(k, sheet, "Notebook dots", (w, h) => dotPaths(w, h, step, size));
+function draw(k, id, at, duration, o = {}) {
+  const keys = [{ t: at, v: 0, ease: ease.inOut("cubic") }, { t: at + duration, v: 1 }];
+  k.animate(id, "trim.end", keys);
+  if (o.out !== void 0) k.animate(id, "trim.start", [{ t: o.out, v: 0, ease: ease.inOut("cubic") }, { t: o.out + (o.outDuration ?? 400), v: 1 }]);
+}
+var NOTE_SHADOW = blackShadow(0.16, 6, 10);
+function sticky(k, parent, o) {
+  const note = k.stack(parent, { width: o.width, ...o.height ? { height: o.height } : {}, fill: o.color ?? "sticky", padding: o.pad ?? 16, gap: o.gap ?? 8, effects: [NOTE_SHADOW], name: o.name ?? "Note", ...o.absolute ? { absolute: o.absolute } : {} });
+  const words = k.text(note, o.text, { style: o.style, color: "stickyInk", align: o.align ?? "LEFT", name: "Note words" });
+  return { note, words };
+}
+function slap(k, id, at, rest, o = {}) {
+  const t = o.turn ?? 9;
+  k.patch(id, { rotation: rest });
+  k.animate(id, "rotation", [{ t: at, v: rest + t, ease: ease.out("back") }, { t: at + 360, v: rest, ...o.extra?.length ? { ease: ease.hold } : {} }, ...o.extra ?? []]);
+}
+var NOTES = [
+  { text: "Fix the sign-up email", who: "AL", when: "Mon 13", col: 0, color: "peach" },
+  { text: "Write the launch post", who: "PR", when: "Tue 14", col: 0, color: "sticky" },
+  { text: "Record a 40 s demo", who: "JM", when: "Thu 16", col: 0, color: "mint" },
+  { text: "Pricing page copy", who: "PR", when: "Mon 20", col: 1, color: "sticky" },
+  { text: "Invite the beta list", who: "JM", when: "Tue 21", col: 1, color: "mint" },
+  { text: "App Store screenshots", who: "AL", when: "Thu 23", col: 1, color: "peach" },
+  { text: "Onboarding checklist", who: "PR", when: "Nov", col: 2, color: "sticky" },
+  { text: "PDF export bug", who: "AL", when: "Nov", col: 2, color: "mint" }
+];
+var COLUMNS = ["This week", "Next week", "Later"];
+function boardGeo(w, h, o = {}) {
+  const pad = o.pad ?? 20, gap = o.gap ?? 18, cols = o.cols ?? 3;
+  const colW = (w - 2 * pad - gap * (cols - 1)) / cols;
+  return { w, h, pad, gap, colW, noteW: Math.round(colW - 12), noteH: o.noteH ?? 104, headH: o.headH ?? 52, rowGap: o.rowGap ?? 14, cols };
+}
+function notePlace(g, i) {
+  const n = NOTES[i], row = NOTES.slice(0, i).filter((m) => m.col === n.col).length;
+  const x = Math.round(g.pad + n.col * (g.colW + g.gap) + 6), y = Math.round(g.pad + g.headH + row * (g.noteH + g.rowGap));
+  const rand = rng(40 + i * 13);
+  const hx = g.pad + rand() * (g.w - 2 * g.pad - g.noteW), hy = g.pad + 10 + rand() * Math.max(10, g.h - 2 * g.pad - g.noteH - 20);
+  const rot = Math.round(((rand() - 0.5) * 2 * 9 + (i % 2 ? 3 : -3)) * 10) / 10;
+  return { x, y, dx: Math.round(hx - x), dy: Math.round(hy - y), rot, shown: n.col < g.cols };
+}
+function board(k, parent, o) {
+  const g = boardGeo(o.w, o.h, o.geo);
+  const f = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: o.w, height: o.h }, { name: o.name ?? "Board" });
+  COLUMNS.forEach((c, i) => {
+    const x = Math.round(g.pad + i * (g.colW + g.gap) + 6);
+    const head = k.stack(f, { width: g.noteW, gap: 2, name: "Column head", absolute: { x, y: g.pad } });
+    k.text(head, c, { style: o.headStyle, color: "onCard", name: "Column name" });
+    marker(k, head, Math.round(g.noteW * 0.7), 12, underline(Math.round(g.noteW * 0.7), 12, { seed: 20 + i, flick: false }), { name: "Column line", color: "primary", width: 4 });
+    if (i >= g.cols) k.patch(head, { visible: false });
+  });
+  const notes = NOTES.map((n, i) => {
+    const p = notePlace(g, i);
+    const { note } = sticky(k, f, { width: g.noteW, height: g.noteH, color: n.color, text: n.text, style: o.noteStyle, pad: 12, gap: 6, absolute: { x: p.x, y: p.y } });
+    const meta = k.stack(note, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Note meta" });
+    const chip = k.stack(meta, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, padding: { top: 2, right: 8, bottom: 2, left: 8 }, name: "Owner" });
+    k.text(chip, n.who, { style: o.metaStyle, color: "onPrimary", autoWidth: true, name: "Owner initials" });
+    k.text(meta, n.when, { style: o.metaStyle, color: "stickyInk", autoWidth: true, name: "Note date" });
+    if (!p.shown) k.patch(note, { visible: false });
+    return note;
+  });
+  return { frame: f, notes, geo: g };
+}
+function tidyKeys(k, notes, g, o) {
+  const fly = o.fly ?? 620, spread = o.spread ?? 45;
+  notes.forEach((id, i) => {
+    const p = notePlace(g, i);
+    const go = o.tidyAt + i * spread;
+    const back = o.untidyAt !== void 0 ? o.untidyAt + (notes.length - 1 - i) * spread : void 0;
+    const path = (v) => {
+      const keys = [{ t: 0, v, ease: ease.hold }, { t: go, v, ease: ease.inOut("cubic") }, { t: go + fly, v: 0, ...back !== void 0 ? { ease: ease.hold } : {} }];
+      if (back !== void 0) keys.push({ t: back, v: 0, ease: ease.inOut("cubic") }, { t: back + fly, v });
+      return keys;
+    };
+    k.animate(id, "translateX", path(p.dx));
+    k.animate(id, "translateY", path(p.dy));
+    const rot = path(p.rot);
+    if (o.slapAt === void 0) {
+      k.animate(id, "rotation", rot);
+      return;
+    }
+    const slapT = o.slapAt + i * (o.gap ?? 110);
+    k.animate(id, "rotation", [{ t: slapT, v: p.rot + (i % 2 ? -10 : 10), ease: ease.out("back") }, { t: slapT + 360, v: p.rot, ease: ease.hold }, ...rot.slice(1)]);
+    k.animate(id, "scaleX", [{ t: slapT, v: 1.25, ease: ease.out("back") }, { t: slapT + 360, v: 1 }]);
+    k.animate(id, "scaleY", [{ t: slapT, v: 1.25, ease: ease.out("back") }, { t: slapT + 360, v: 1 }]);
+    k.animate(id, "opacity", [{ t: slapT, v: 0, ease: ease.linear }, { t: slapT + 90, v: 1 }]);
+  });
+}
+function refitBoard(k, root, name, w, h, geo, timing) {
+  const g = boardGeo(w, h, geo);
+  for (const f of k.named(root, name)) {
+    k.patch(f, { width: w, height: h });
+    k.named(f, "Column head").forEach((id, i) => {
+      k.patch(id, { x: Math.round(g.pad + i * (g.colW + g.gap) + 6), y: g.pad, width: g.noteW, visible: i < g.cols });
+      for (const line of k.named(id, "Column line")) k.patch(line, { width: Math.round(g.noteW * 0.7), paths: underline(Math.round(g.noteW * 0.7), 12, { seed: 20 + i, flick: false }) });
+    });
+    const notes = k.named(f, "Note");
+    notes.forEach((id, i) => {
+      const p = notePlace(g, i);
+      k.patch(id, { x: p.x, y: p.y, width: g.noteW, height: g.noteH, visible: p.shown });
+    });
+    if (timing) tidyKeys(k, notes, g, timing);
+  }
+}
+function sketchWindow(k, parent, o) {
+  const bar = o.bar ?? 64;
+  const win = k.stack(parent, { width: o.w, height: o.h, fill: "card", radius: 10, name: o.name ?? "Window", ...o.absolute ? { absolute: o.absolute } : {} });
+  const top = k.stack(win, { direction: "HORIZONTAL", height: bar, align: "CENTER", gap: 16, padding: { top: 0, right: 16, bottom: 0, left: 22 }, name: "Title row" });
+  const lights = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 8, name: "Lights" });
+  for (let i = 0; i < 3; i++) marker(k, lights, 16, 16, scribbleCircle(16, 16, { seed: 60 + i, turns: 1.05, inset: 2 }), { name: "Light", color: "text", width: 2.5 });
+  k.text(top, o.title, { style: o.style, color: "onCard", name: "Window title" });
+  const btn = k.stack(top, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, align: "CENTER", gap: 8, padding: { top: 9, right: 16, bottom: 9, left: 14 }, name: "Tidy button" });
+  marker(k, btn, 18, 18, sparkle(18), { name: "Sparkle", color: "onPrimary", width: 2.5 });
+  k.text(btn, o.button, { style: o.buttonStyle, color: "onPrimary", autoWidth: true, name: "Tidy label" });
+  marker(k, win, o.w, 10, underline(o.w, 10, { seed: (o.seed ?? 1) + 30, flick: false }), { name: "Title line", color: "text", width: 2.5 });
+  const body = k.frame(win, { x: 0, y: bar + 10, width: o.w, height: o.h - bar - 10 }, { name: "Window body" });
+  outline(k, win, o.w, o.h, { seed: o.seed ?? 1, width: 3.5, jitter: 3, inset: 3, name: "Window outline" });
+  return { win, body, button: btn, bar: bar + 10 };
+}
+var sparkle = (s) => {
+  const c = s / 2, line = (a, b) => ({ closed: false, points: [{ x: r3(a.x), y: r3(a.y) }, { x: r3(b.x), y: r3(b.y) }] });
+  return [line({ x: c, y: 1 }, { x: c, y: s - 1 }), line({ x: 1, y: c }, { x: s - 1, y: c }), line({ x: c - s * 0.26, y: c - s * 0.26 }, { x: c + s * 0.26, y: c + s * 0.26 }), line({ x: c + s * 0.26, y: c - s * 0.26 }, { x: c - s * 0.26, y: c + s * 0.26 })];
+};
+function penParts(size) {
+  const a = 40 * Math.PI / 180, ca = Math.cos(a), sa = Math.sin(a), s = size / 100;
+  const at = (u, v) => ({ x: r3((u * ca - v * sa) * s), y: r3((u * sa + v * ca) * s) });
+  const quad = (u0, u1, v0, v1) => ({ closed: true, points: [at(u0, -v0), at(u1, -v1), at(u1, v1), at(u0, v0)] });
+  return { nib: [quad(0, 16, 2.5, 8)], barrel: [quad(16, 74, 11, 11)], cap: [quad(74, 96, 12, 12)] };
+}
+function pen(k, parent, o) {
+  const size = o.size ?? 110, R = size * 0.9;
+  const ring = k.ellipse(parent, R, k.tint(o.ring ?? "red", 1e-3), { name: "Tap ring", absolute: { x: o.x - R / 2, y: o.y - R / 2 }, stroke: { color: o.ring ?? "red", width: 5 }, opacity: 0 });
+  const box = Math.round(size * 0.85);
+  const f = k.frame(parent, { x: o.x, y: o.y, width: box, height: box }, { name: "Pen" });
+  const p = penParts(size);
+  const part = (paths, fill, name) => k.vector(f, box, box, paths, fill, { name, absolute: { x: 0, y: 0 }, stroke: { color: "text", width: 3, join: "ROUND" } });
+  part(p.barrel, "primary", "Pen barrel");
+  part(p.cap, "text", "Pen cap");
+  part(p.nib, "text", "Pen nib");
+  k.patch(f, { anchorX: 0, anchorY: 0 });
+  return { arrow: f, ring };
+}
+function desk(k, parent, o) {
+  const f = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: o.w, height: o.h }, { name: o.name ?? "Desk" });
+  const s = Math.min(o.h * 0.78, 300);
+  const padX = Math.round(o.w * 0.08), padY = Math.round((o.h - s) / 2);
+  ["peach", "mint", "sticky"].forEach((c, i) => {
+    const id = k.rect(f, s, s, c, { name: "Pad sheet", absolute: { x: padX + i * 6, y: padY - i * 5 }, effects: [NOTE_SHADOW] });
+    k.patch(id, { rotation: [-7, 4, -2][i] });
+  });
+  const top = k.frame(f, { x: padX + 12, y: padY - 10, width: s, height: s }, { name: "Pad top" });
+  k.patch(top, { rotation: -2 });
+  outline(k, top, s, s, { seed: (o.seed ?? 1) + 2, width: 3, name: "Pad outline" });
+  marker(k, top, s - 60, 26, underline(s - 60, 26, { seed: 71 }), { name: "Pad scribble", color: "text", width: 4, absolute: { x: 30, y: Math.round(s * 0.34) } });
+  marker(k, top, Math.round((s - 60) * 0.6), 26, underline(Math.round((s - 60) * 0.6), 26, { seed: 72, flick: false }), { name: "Pad scribble", color: "text", width: 4, absolute: { x: 30, y: Math.round(s * 0.52) } });
+  const mx = padX + s + 70;
+  ["primary", "red"].forEach((c, i) => {
+    const L = Math.min(o.w - mx - 40, 420), H2 = 46;
+    const g = k.frame(f, { x: mx + i * 26, y: Math.round(o.h * 0.32) + i * 92, width: L, height: H2 }, { name: "Marker" });
+    k.patch(g, { rotation: [-14, -8][i] });
+    if (o.sway) k.behave(g, "rotation", [{ kind: "sine", amp: 1.6, freq: o.sway, phase: i * 0.35 }]);
+    k.rect(g, Math.round(L * 0.72), H2, c, { name: "Marker barrel", radius: 12, absolute: { x: Math.round(L * 0.12), y: 0 }, stroke: { color: "text", width: 3 } });
+    k.rect(g, Math.round(L * 0.18), H2 + 6, "text", { name: "Marker cap", radius: 10, absolute: { x: Math.round(L * 0.82), y: -3 } });
+    k.vector(g, Math.round(L * 0.12), H2, [{ closed: true, points: [{ x: Math.round(L * 0.12), y: 6 }, { x: 0, y: H2 / 2 - 5 }, { x: 0, y: H2 / 2 + 5 }, { x: Math.round(L * 0.12), y: H2 - 6 }] }], "text", { name: "Marker nib", absolute: { x: 0, y: 0 } });
+  });
+  return f;
+}
+function refitWindow(k, root, name, w, h, seed = 1) {
+  for (const win of k.named(root, name)) {
+    k.patch(win, { width: w, height: h, layoutSizingHorizontal: "FIXED" });
+    for (const id of k.named(win, "Window body")) k.patch(id, { width: w, height: h - k.node(id).y });
+    for (const id of k.named(win, "Title line")) k.patch(id, { width: w, paths: underline(w, 10, { seed: seed + 30, flick: false }) });
+    for (const id of k.named(win, "Window outline")) k.patch(id, { width: w, height: h, paths: wobblyBox(w, h, { seed, jitter: 3, inset: 3 }) });
+  }
+}
+var H = (size, lead = 1.08, spacing = -0.03) => ({ size, fontWeight: 800, lineHeight: Math.round(size * lead), letterSpacing: Math.round(size * spacing * 100) / 100 });
+var T = (size, weight = 400, lead = 1.5) => ({ size, fontWeight: weight, lineHeight: Math.round(size * lead) });
+var WEB_TYPE = {
+  "Nav 15": T(15, 500, 1.4),
+  "Brand 20": H(20, 1.2, -0.02),
+  "Button 16": H(16, 1.3, 0),
+  "Label 14": T(14, 600, 1.4),
+  "Ui 15": T(15, 600, 1.3),
+  "Ui 13": T(13, 600, 1.3),
+  "Note 15": T(15, 700, 1.2),
+  "Note 14": T(14, 700, 1.2),
+  "Meta 12": T(12, 700, 1.2),
+  "Head 17": H(17, 1.15, -0.01),
+  "Display 64": H(64, 1.04, -0.035),
+  "Display 54": H(54, 1.05, -0.035),
+  "Display 40": H(40, 1.08, -0.03),
+  "Section 44": H(44, 1.1),
+  "Section 34": H(34, 1.12),
+  "Section 28": H(28, 1.15),
+  "Sticky 22": H(22, 1.15, -0.015),
+  "Lead 20": T(20, 400, 1.5),
+  "Lead 17": T(17, 400, 1.5),
+  "Body 16": T(16, 400, 1.55),
+  "Small 14": T(14, 400, 1.45),
+  "Figure 96": H(96, 1, -0.04),
+  "Figure 64": H(64, 1, -0.04),
+  "Quote 30": H(30, 1.25, -0.02),
+  "Quote 23": H(23, 1.3, -0.015),
+  "Price 52": H(52, 1, -0.035),
+  "Price 40": H(40, 1, -0.035),
+  "Hand 120": H(120, 0.98, -0.045),
+  "Hand 72": H(72, 1, -0.04),
+  "Hand 40": H(40, 1.06, -0.03)
+};
+var WEB_STEPS = {
+  "Display 64": { laptop: "Display 54", tablet: "Display 54", mobile: "Display 40" },
+  "Section 44": { tablet: "Section 34", mobile: "Section 28" },
+  "Lead 20": { mobile: "Lead 17" },
+  "Figure 96": { mobile: "Figure 64" },
+  "Quote 30": { mobile: "Quote 23" },
+  "Price 52": { mobile: "Price 40" },
+  "Hand 120": { laptop: "Hand 72", tablet: "Hand 72", mobile: "Hand 40" }
+};
+function marquee(k, parent, o) {
+  const period = o.names.length * o.item;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: o.height, clip: true, name: o.name ?? "Marquee" });
+  o.names.forEach((label, i) => {
+    const c = k.stack(strip, { direction: "HORIZONTAL", width: o.item, height: o.height, align: "CENTER", gap: 12, absolute: { x: 0, y: 0 }, name: "Wordmark" });
+    marker(k, c, 22, 22, scribbleCircle(22, 22, { seed: 100 + i, turns: 1.1, inset: 2 }), { name: "Wordmark mark", color: i % 2 ? "red" : "primary", width: 3 });
+    k.text(c, label, { style: o.style, color: "text", autoWidth: true, name: "Wordmark name" });
+    keyWordmark(k, c, i, o.names.length, o.item, o.duration);
+  });
+  return strip;
+}
+function keyWordmark(k, c, i, n, item, duration) {
+  const period = n * item, x0 = i * item;
+  k.patch(c, { width: item, translateX: x0, motion: void 0 });
+  k.animate(c, "translateX", [{ t: 0, v: x0, ease: ease.linear }, { t: duration, v: x0 - period }]);
+  k.behave(c, "translateX", [{ kind: "mod", period, offset: -item }]);
+}
+function miniNote(k, parent, o) {
+  const f = k.frame(parent, { x: o.x, y: o.y, width: o.s, height: o.s }, { name: o.name ?? "Mini note", fill: o.color, effects: [NOTE_SHADOW] });
+  const lw = Math.round(o.s * 0.7);
+  marker(k, f, lw, 14, underline(lw, 14, { seed: o.seed ?? 1, flick: false }), { name: "Mini line", color: "stickyInk", width: 3, absolute: { x: Math.round(o.s * 0.14), y: Math.round(o.s * 0.22) } });
+  marker(k, f, Math.round(lw * 0.6), 14, underline(Math.round(lw * 0.6), 14, { seed: (o.seed ?? 1) + 1, flick: false }), { name: "Mini line", color: "stickyInk", width: 3, absolute: { x: Math.round(o.s * 0.14), y: Math.round(o.s * 0.46) } });
+  if (o.rot) k.patch(f, { rotation: o.rot });
+  return f;
+}
+
+export {
+  PLOTLINE,
+  sketchBrand,
+  hand,
+  sans,
+  wobblyBox,
+  scribbleCircle,
+  underline,
+  swipe,
+  tick,
+  arrow,
+  boxPaths,
+  marker,
+  arrowAt,
+  outline,
+  dots,
+  redots,
+  draw,
+  NOTE_SHADOW,
+  sticky,
+  slap,
+  NOTES,
+  COLUMNS,
+  boardGeo,
+  notePlace,
+  board,
+  tidyKeys,
+  refitBoard,
+  sketchWindow,
+  sparkle,
+  pen,
+  desk,
+  refitWindow,
+  WEB_TYPE,
+  WEB_STEPS,
+  marquee,
+  keyWordmark,
+  miniNote
+};

package/dist/chunks/chunk-BYSBG2NJ.js

@@ -0,0 +1,77 @@
+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 {
+  standardStore
+} from "./chunk-7IJDMP7O.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/shop-marginalia.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PRODUCTS = [
+  { title: "The Weight of Rivers", handle: "the-weight-of-rivers", price: "\xA318.99", image: "ma-book1", tags: "fiction", description: "A novel of three sisters and the dam that drowned their village, told across fifty years. Our book of the month." },
+  { title: "Small Hours", handle: "small-hours", price: "\xA310.99", image: "ma-book2", tags: "essays", description: "Essays on insomnia, night shifts and the city after midnight." },
+  { title: "A Map of the Tides", handle: "a-map-of-the-tides", price: "\xA322.00", image: "ma-book3", tags: "nature", description: "A natural history of the coastline, with forty hand-drawn charts." },
+  { title: "Field Notes", handle: "field-notes", price: "\xA39.99", image: "ma-book4", tags: "poetry", description: "Poems written on walks across one year in the Fens." },
+  { title: "The Long Table", handle: "the-long-table", price: "\xA328.00", image: "ma-book5", tags: "food", description: "Recipes and stories from a family restaurant that fed a town for sixty years." },
+  { title: "Learning to Swim", handle: "learning-to-swim", price: "\xA312.99", image: "ma-book6", tags: "memoir", description: "A memoir about taking up wild swimming at sixty." }
+];
+var shop_marginalia_default = defineTemplate({
+  id: "web-shop-marginalia",
+  meta: {
+    name: "Marginalia bookshop",
+    description: "An independent bookshop\u2019s store in cream and ink with a literary serif: the headline typed in, tall book covers, staff picks in a carousel, categories, a page per book with add to cart and a cart with checkout. Publishes as a Next.js Commerce store selling your Shopify products. Desktop, tablet and phone",
+    category: "storefront",
+    tags: ["ecommerce", "shop", "store", "storefront", "shopify", "next.js commerce", "product page", "cart", "books", "bookshop", "editorial", "literary", "serif", "independent", "website", "responsive", "animation"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "launch"],
+    created: "2026-10-09",
+    updated: "2026-10-09"
+  },
+  breakpoints: true,
+  build: () => standardStore({
+    name: "Marginalia bookshop",
+    brand: { paper: "#F6F1E7", text: "#1E1B16", onPaper: "#625A4E", primary: "#8B2E1F", onPrimary: "#FBF6EC", card: "#FFFDF8", onCard: "#1E1B16", cardMuted: "#625A4E", tint: "#ECE4D4", onTint: "#1E1B16", tintMuted: "#625A4E", line: "#DCD2BF" },
+    fields: { name: "Marginalia Books", email: "shop@marginalia.books" },
+    styles: {
+      "Wordmark 26": { size: 26, fontFamily: "Libre Caslon Text", fontWeight: 700, letterSpacing: -0.3, lineHeight: 30 },
+      "Nav 15": { size: 15, fontFamily: "EB Garamond", fontWeight: 500, lineHeight: 22 },
+      "Display 80": { size: 80, fontFamily: "Libre Caslon Text", fontWeight: 400, letterSpacing: -1.6, lineHeight: 84 },
+      "Display 46": { size: 46, fontFamily: "Libre Caslon Text", fontWeight: 400, letterSpacing: -0.6, lineHeight: 52 },
+      "Section 32": { size: 32, fontFamily: "Libre Caslon Text", fontWeight: 400, lineHeight: 38 },
+      "Title 17": { size: 17, fontFamily: "EB Garamond", fontWeight: 600, lineHeight: 23 },
+      "Price 16": { size: 16, fontFamily: "EB Garamond", fontWeight: 400, lineHeight: 22 },
+      "Body 18": { size: 18, fontFamily: "EB Garamond", fontWeight: 400, lineHeight: 29 },
+      "Small 14": { size: 14, fontWeight: 500, letterSpacing: 0.6, lineHeight: 20 },
+      "Button 15": { size: 15, fontWeight: 600, letterSpacing: 0.4, lineHeight: 22 }
+    },
+    type: { wordmark: "Wordmark 26", nav: "Nav 15", display: "Display 80", displaySmall: "Display 46", section: "Section 32", title: "Title 17", price: "Price 16", body: "Body 18", small: "Small 14", button: "Button 15" },
+    products: PRODUCTS,
+    categories: [{ title: "Fiction", handle: "fiction", description: "Novels the staff have pressed into customers\\u2019 hands." }, { title: "Essays", handle: "essays", description: "Short, sharp and true." }, { title: "Poetry", handle: "poetry", description: "Small books for long evenings." }, { title: "Nature", handle: "nature", description: "The world outside, written well." }],
+    carousel: "Staff picks this month",
+    menu: [["New in", "/search"], ["Fiction", "/search/fiction"], ["Poetry", "/search/poetry"]],
+    hero: { kicker: "INDEPENDENT SINCE 1987 \xB7 NORWICH", headline: "Books chosen by people who have read them", lead: "Every book on our shelves has been read by one of the five of us. Ask us anything; we will find you something.", cta: "Browse new arrivals", image: "ma-hero", layout: "stacked" },
+    story: { title: "Staff picks, written in the margins", body: "Each book we recommend comes with a card from the bookseller who loved it. We will post one with your order.", image: "ma-book1" },
+    promise: ["Free UK delivery over \xA325 \xB7 wrapped in brown paper", "Signed copies where we can get them"],
+    newsletter: { title: "The margin", body: "A monthly letter of what we are reading, and invitations to our events." },
+    legal: "Prices include VAT.",
+    card: "plain",
+    motion: "editorial",
+    float: false,
+    ratio: 1.5,
+    radius: 2
+  })
+});
+
+export {
+  shop_marginalia_default
+};

package/dist/chunks/chunk-BZAKET67.js

@@ -0,0 +1,130 @@
+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 {
+  init_scene_graph
+} from "./chunk-BDU2OUVJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/document/pixel-art.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+var cellOf = (n) => n.width / Math.max(1, n.pixelWidth);
+function walk(doc, id, visit, depth = 0) {
+  const n = doc.nodes[id];
+  if (!n || n.visible === false || depth > 64) return;
+  visit(n);
+  const main = n.type === "INSTANCE" ? n.mainComponentId : void 0;
+  const kids = n.childIds?.length ? n.childIds : main ? doc.nodes[main]?.childIds ?? [] : [];
+  for (const c of kids) walk(doc, c, visit, depth + 1);
+}
+function pixelCell(doc, id) {
+  let cell = null;
+  walk(doc, id, (n) => {
+    if (n.type === "PIXEL_GRID") {
+      const c = cellOf(n);
+      if (c > 0) cell = Math.max(cell ?? 0, c);
+    }
+  });
+  return cell;
+}
+var gcd = (a, b) => b ? gcd(b, a % b) : a;
+function screenPixelCell(doc, id) {
+  const cells = [];
+  walk(doc, id, (n) => {
+    if (n.type === "PIXEL_GRID") {
+      const c = cellOf(n);
+      if (c > 0) cells.push(c);
+    }
+  });
+  if (!cells.length) return null;
+  if (cells.every((c) => Math.abs(c - Math.round(c)) < 1e-6)) return cells.map(Math.round).reduce(gcd);
+  return Math.min(...cells);
+}
+function isPixelArt(doc, id) {
+  let leaves = 0, pixel = true;
+  walk(doc, id, (n) => {
+    if (n.type === "PIXEL_GRID") {
+      leaves++;
+      return;
+    }
+    if (!n.childIds?.length) {
+      leaves++;
+      pixel = false;
+    }
+  });
+  return leaves > 0 && pixel;
+}
+function pixelPerfectCamera(view, box, cell, maxZoom = 10) {
+  const fit = Math.min(view.width / box.width, view.height / box.height, maxZoom);
+  const perCell = Math.max(1, Math.floor(fit * cell + 1e-6));
+  const zoom = perCell / cell;
+  const left = Math.round((view.width - box.width * zoom) / 2);
+  const top = Math.round((view.height - box.height * zoom) / 2);
+  return { x: box.x - (left - view.width / 2) / zoom, y: box.y - (top - view.height / 2) / zoom, zoom };
+}
+
+// lib/document/semantics.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/utils/safe-url.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SAFE_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+var HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+function safeExternalUrl(raw) {
+  if (typeof raw !== "string") return null;
+  const trimmed = raw.trim().replace(/[\x00-\x1f\x7f]/g, "");
+  if (!trimmed) return null;
+  const candidate = trimmed.startsWith("//") ? `https:${trimmed}` : HAS_SCHEME.test(trimmed) ? trimmed : `https://${trimmed}`;
+  let url;
+  try {
+    url = new URL(candidate);
+  } catch {
+    return null;
+  }
+  if (!SAFE_PROTOCOLS.has(url.protocol)) return null;
+  if ((url.protocol === "http:" || url.protocol === "https:") && !url.hostname) return null;
+  return url.href;
+}
+
+// lib/document/semantics.ts
+var anchorOf = (node) => node.semantics?.anchor || `pc-${node.id.replace(/[^A-Za-z0-9_-]/g, "-")}`;
+var cleanAnchor = (raw) => raw.trim().toLowerCase().replace(/^#/, "").replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+function hrefOf(link, nodes, routes) {
+  if (!link) return null;
+  switch (link.kind) {
+    case "url":
+      return sitePath(link.url) ?? safeExternalUrl(link.url);
+    case "email":
+      return /^[^\s@]+@[^\s@]+$/.test(link.value.trim()) ? `mailto:${link.value.trim()}` : null;
+    case "tel": {
+      const n = link.value.replace(/[^\d+]/g, "");
+      return n ? `tel:${n}` : null;
+    }
+    case "screen":
+      return (routes instanceof Map ? routes.get(link.frameId) : routes?.[link.frameId]) ?? null;
+    case "anchor":
+      return nodes[link.nodeId] ? `#${anchorOf(nodes[link.nodeId])}` : null;
+  }
+}
+function sitePath(raw) {
+  const path = raw.trim().replace(/[\x00-\x1f\x7f]/g, "");
+  return /^\/(?![/\\])/.test(path) ? path : null;
+}
+var opensNewTab = (link) => link.kind === "url" && link.newTab !== false && !sitePath(link.url);
+
+export {
+  pixelCell,
+  screenPixelCell,
+  isPixelArt,
+  pixelPerfectCamera,
+  anchorOf,
+  cleanAnchor,
+  hrefOf,
+  opensNewTab
+};