@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-MOOQLYYT.js

@@ -0,0 +1,209 @@
+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,
+  lottieTemplate,
+  roundRect,
+  sparkle
+} from "./chunk-3OBWHBPC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/ai.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var AI = { paper: "#0E1022", surface: "#1A1D3A", line: "#2E3363", accent: "#8B7CFF", glow: "#B9A8FF", spark: "#5EE6D0", onAccent: "#0E1022", white: "#FFFFFF" };
+function thinkingMark(l, parent, cx, cy, r, ms, color = "glow") {
+  const s = l.shape(parent, sparkle(cx, cy, r), color, { name: "Sparkle" });
+  l.keys(s, "rotation", [[0, 0, E.inOut], [ms, 90]]);
+  l.scale(s, [[0, 1], [ms / 2, 0.82], [ms, 1]]);
+  return s;
+}
+var aiThinking = lottieTemplate({
+  slug: "thinking-shimmer",
+  sector: "ai",
+  role: "loader",
+  size: "spot",
+  duration: 2e3,
+  loop: true,
+  name: "AI thinking shimmer",
+  description: "The placeholder an assistant shows while it writes: a response card whose lines shimmer left to right under a turning sparkle \u2014 a two-second seamless loop, 800\xD7600",
+  colors: AI,
+  useCases: ["onboarding"],
+  tags: ["skeleton", "generating", "shimmer", "assistant"],
+  build(l) {
+    const card = l.box(l.sheet, 80, 110, 640, 380, "Response card", { fill: "surface", radius: 36 });
+    l.circle(card, 76, 76, 36, "line", { name: "Badge" });
+    thinkingMark(l, card, 76, 76, 22, 2e3);
+    const bars = [[140, 560], [194, 520], [248, 560], [302, 340]];
+    for (const [y, w] of bars) l.rect(card, 40, y, w, 24, "line", { radius: 12, name: "Line" });
+    const sheen = l.box(card, 0, 0, 640, 380, "Shimmer");
+    l.vector(sheen, bars.map(([y, w]) => ({ pts: roundRect(40, y, w, 24, 12), closed: true })), "white", { name: "Lines mask", mask: true });
+    const band = l.box(sheen, -300, 120, 260, 220, "Sheen");
+    l.rect(band, 0, 0, 130, 220, [l.k.gradient({ from: "glow", to: "glow", fromOpacity: 0, toOpacity: 0.9, angle: 0 })], { name: "Sheen in" });
+    l.rect(band, 130, 0, 130, 220, [l.k.gradient({ from: "glow", to: "glow", fromOpacity: 0.9, toOpacity: 0, angle: 0 })], { name: "Sheen out" });
+    l.keys(band, "translateX", [[0, 0, E.linear], [1900, 1e3, E.hold], [2e3, 0]]);
+  }
+});
+var aiNeuralPulse = lottieTemplate({
+  slug: "neural-pulse",
+  sector: "ai",
+  role: "hero",
+  size: "hero",
+  duration: 4e3,
+  loop: true,
+  ground: "paper",
+  name: "Neural net pulse",
+  description: "A hero loop for an AI product: signals race through a three-layer network, lighting each node they reach, over a soft glow \u2014 four seconds, seamless, 1600\xD7900",
+  colors: AI,
+  useCases: ["launch"],
+  tags: ["neural network", "hero", "background", "machine learning"],
+  build(l) {
+    l.circle(l.sheet, 800, 450, 520, [l.k.gradient({ from: "accent", to: "accent", kind: "RADIAL", fromOpacity: 0.28, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Glow" });
+    const cols = [[400, [240, 390, 510, 660]], [800, [180, 315, 450, 585, 720]], [1200, [300, 450, 600]]];
+    const at = (c, i) => [cols[c][0], cols[c][1][i]];
+    const wires = l.box(l.sheet, 0, 0, 1600, 900, "Wires");
+    for (let c = 0; c < 2; c++) for (let a = 0; a < cols[c][1].length; a++) for (let b = 0; b < cols[c + 1][1].length; b++) {
+      l.line(wires, [at(c, a), at(c + 1, b)], "line", 3, { name: "Wire" });
+    }
+    const routes = [[0, 1, 0], [2, 3, 1], [1, 2, 2], [3, 4, 0], [0, 0, 1], [2, 2, 2]];
+    const lit = /* @__PURE__ */ new Map();
+    routes.forEach(([a, b, c], i) => {
+      const t0 = i * 400;
+      const p = l.circle(l.sheet, ...at(0, a), 10, "spark", { name: "Signal" });
+      const [x0, y0] = at(0, a), [x1, y1] = at(1, b), [x2, y2] = at(2, c);
+      l.keys(p, "translateX", [[t0, 0, E.inOut], [t0 + 600, x1 - x0, E.inOut], [t0 + 1200, x2 - x0]]);
+      l.keys(p, "translateY", [[t0, 0, E.inOut], [t0 + 600, y1 - y0, E.inOut], [t0 + 1200, y2 - y0]]);
+      l.opacity(p, [[0, 0, E.hold], [t0, 0, E.out], [t0 + 120, 1, E.hold], [t0 + 1080, 1, E.in], [t0 + 1200, 0]]);
+      for (const [key, t] of [[`1:${b}`, t0 + 600], [`2:${c}`, t0 + 1200]]) lit.set(key, [...lit.get(key) ?? [], t]);
+    });
+    cols.forEach(([, ys], c) => ys.forEach((_, i) => {
+      const [x, y] = at(c, i);
+      const halo = l.circle(l.sheet, x, y, 30, "accent", { name: "Halo", opacity: 0 });
+      const flashes = (lit.get(`${c}:${i}`) ?? []).sort((p, q) => p - q);
+      if (flashes.length) {
+        const o = [[0, 0, E.hold]], s = [[0, 0.6, E.hold]];
+        for (const t of flashes) {
+          o.push([t - 1, 0, E.out], [t + 80, 0.55, E.out], [t + 600, 0, E.hold]);
+          s.push([t - 1, 0.6, E.out], [t + 600, 1.6, E.hold]);
+        }
+        l.opacity(halo, o);
+        l.scale(halo, s);
+      }
+      l.circle(l.sheet, x, y, 18, "surface", { name: "Node", stroke: { color: c === 1 ? "glow" : "accent", width: 5 } });
+    }));
+  }
+});
+var aiTyping = lottieTemplate({
+  slug: "chat-typing",
+  sector: "ai",
+  role: "loader",
+  size: "icon",
+  duration: 1200,
+  loop: true,
+  name: "Assistant typing",
+  description: 'The "assistant is typing" indicator: three dots rise and brighten in turn inside a chat bubble \u2014 a 1.2-second seamless loop, 512\xD7512',
+  colors: AI,
+  tags: ["chat", "typing", "indicator", "assistant"],
+  build(l) {
+    const box = roundRect(56, 116, 400, 240, 72);
+    l.shape(l.sheet, [...box.slice(0, 5), { x: 196, y: 356 }, { x: 104, y: 420 }, ...box.slice(5)], "surface", { name: "Bubble" });
+    for (let i = 0; i < 3; i++) {
+      const d = l.circle(l.sheet, 176 + i * 80, 236, 26, "accent", { name: "Dot", opacity: 0.45 });
+      const t = i * 160;
+      l.keys(d, "translateY", [[0, 0, E.hold], [t, 0, E.out], [t + 240, -34, E.inOut], [t + 520, 0, E.hold], [1200, 0]]);
+      l.opacity(d, [[0, 0.45, E.hold], [t, 0.45, E.out], [t + 240, 1, E.inOut], [t + 520, 0.45, E.hold], [1200, 0.45]]);
+    }
+  }
+});
+var aiGenerateButton = lottieTemplate({
+  slug: "generate-button",
+  sector: "ai",
+  role: "micro-interaction",
+  size: "button",
+  duration: 2400,
+  loop: true,
+  name: "Generate button",
+  description: "A Generate button that invites the click: a sheen sweeps the pill while its sparkle turns and two small stars twinkle \u2014 a 2.4-second seamless loop, 480\xD7160",
+  colors: AI,
+  tags: ["button", "generate", "sparkle", "cta"],
+  build(l) {
+    const k = l.k;
+    k.textStyle("Button 44", { size: 44, fontWeight: 700, lineHeight: 52, letterSpacing: -0.5 });
+    const pill = l.box(l.sheet, 40, 28, 400, 104, "Button", { fill: "accent", radius: 52, clip: true });
+    const band = l.box(pill, -200, 0, 160, 104, "Sheen");
+    l.rect(band, 0, 0, 80, 104, [k.gradient({ from: "white", to: "white", fromOpacity: 0, toOpacity: 0.45, angle: 0 })], { name: "Sheen in" });
+    l.rect(band, 80, 0, 80, 104, [k.gradient({ from: "white", to: "white", fromOpacity: 0.45, toOpacity: 0, angle: 0 })], { name: "Sheen out" });
+    l.keys(band, "translateX", [[0, 0, E.hold], [600, 0, E.inOut], [1800, 760, E.hold], [2400, 760]]);
+    thinkingMark(l, pill, 78, 52, 26, 2400, "onAccent");
+    for (const [cx, cy, r, t] of [[112, 26, 9, 300], [104, 80, 7, 1300]]) {
+      const s = l.shape(pill, sparkle(cx, cy, r), "onAccent", { name: "Twinkle" });
+      l.scale(s, [[0, 0, E.hold], [t, 0, E.pop], [t + 400, 1, E.in], [t + 900, 0, E.hold], [2400, 0]]);
+    }
+    k.text(pill, "Generate", { style: "Button 44", color: "onAccent", autoWidth: true, name: "Label", absolute: { x: 132, y: 26 } });
+  }
+});
+var aiModelRouting = lottieTemplate({
+  slug: "model-routing",
+  sector: "ai",
+  role: "explainer",
+  size: "hero",
+  duration: 6e3,
+  loop: true,
+  ground: "paper",
+  name: "Model routing",
+  description: "A feature explainer for a model router: each prompt travels to the hub, which picks the model that fits and lights it \u2014 three requests to three models in a six-second seamless loop, 1600\xD7900",
+  colors: AI,
+  useCases: ["pitch"],
+  tags: ["diagram", "router", "llm", "explainer"],
+  build(l) {
+    const prompt = l.box(l.sheet, 150, 330, 330, 240, "Prompt", { fill: "surface", radius: 28 });
+    for (const [y, w] of [[60, 240], [110, 200], [160, 250]]) l.rect(prompt, 40, y, w, 22, "line", { radius: 11, name: "Prompt line" });
+    const hub = [800, 450];
+    const models = [[1250, 210], [1250, 450], [1250, 690]];
+    l.line(l.sheet, [[480, 450], [hub[0] - 90, 450]], "line", 6, { name: "Wire in" });
+    for (const [x, y] of models) l.line(l.sheet, [[hub[0] + 90, 450], [x - 160, y]], "line", 6, { name: "Wire out" });
+    const ping = l.ring(l.sheet, hub[0], hub[1], 90, "glow", 6, { name: "Hub ping", opacity: 0 });
+    l.circle(l.sheet, hub[0], hub[1], 90, "surface", { name: "Hub", stroke: { color: "accent", width: 6 } });
+    const mark = l.shape(l.sheet, sparkle(hub[0], hub[1], 44), "glow", { name: "Hub mark" });
+    l.keys(mark, "rotation", [[0, 0, E.inOut], [2e3, 90, E.inOut], [4e3, 180, E.inOut], [6e3, 270]]);
+    const cards = models.map(([x, y], i) => {
+      const c = l.box(l.sheet, x - 160, y - 80, 320, 160, "Model", { fill: "surface", radius: 28 });
+      l.rect(c, 0, 0, 320, 160, "line", { radius: 28, name: "Model lit", opacity: 0 });
+      l.circle(c, 70, 80, 34, ["accent", "spark", "glow"][i], { name: "Model mark" });
+      l.rect(c, 130, 56, 150, 20, "line", { radius: 10, name: "Model line" });
+      l.rect(c, 130, 88, 100, 16, "line", { radius: 8, name: "Model line" });
+      return c;
+    });
+    const pingO = [[0, 0, E.hold]], pingS = [[0, 1, E.hold]];
+    models.forEach(([x, y], i) => {
+      const t0 = i * 2e3;
+      const p = l.circle(l.sheet, 480, 450, 14, "spark", { name: "Request" });
+      l.keys(p, "translateX", [[t0, 0, E.inOut], [t0 + 700, hub[0] - 480, E.hold], [t0 + 900, hub[0] - 480, E.inOut], [t0 + 1500, x - 160 - 480]]);
+      l.keys(p, "translateY", [[t0 + 900, 0, E.inOut], [t0 + 1500, y - 450]]);
+      l.opacity(p, [[0, 0, E.hold], [t0, 0, E.out], [t0 + 150, 1, E.hold], [t0 + 1400, 1, E.in], [t0 + 1550, 0]]);
+      pingO.push([t0 + 700, 0, E.out], [t0 + 760, 0.9, E.out], [t0 + 1300, 0, E.hold]);
+      pingS.push([t0 + 700, 1, E.out], [t0 + 1300, 1.7, E.hold]);
+      l.opacity(l.k.named(cards[i], "Model lit")[0], [[0, 0, E.hold], [t0 + 1450, 0, E.out], [t0 + 1650, 1, E.inOut], [t0 + 1950, 0, E.hold], [6e3, 0]]);
+      l.scale(cards[i], [[0, 1, E.hold], [t0 + 1450, 1, E.pop], [t0 + 1700, 1.05, E.inOut], [t0 + 1950, 1, E.hold], [6e3, 1]]);
+    });
+    pingO.push([6e3, 0]);
+    pingS.push([6e3, 1]);
+    l.opacity(ping, pingO);
+    l.scale(ping, pingS);
+  }
+});
+var AI_PACK = [aiThinking, aiNeuralPulse, aiTyping, aiGenerateButton, aiModelRouting];
+
+export {
+  aiThinking,
+  aiNeuralPulse,
+  aiTyping,
+  aiGenerateButton,
+  aiModelRouting,
+  AI_PACK
+};

package/dist/chunks/chunk-MOT2SSUB.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-37IU3FCE.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
+};