@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-DECP3A2X.js

@@ -0,0 +1,81 @@
+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_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+import {
+  __esm
+} from "./chunk-LJSVREWM.js";
+
+// lib/units/units.ts
+function roundInUnit(px, unit, precision = UNIT_PRECISION[unit]) {
+  const f = 10 ** precision;
+  return Math.round(fromPx(px, unit) * f) / f;
+}
+function formatLength(px, unit, precision = UNIT_PRECISION[unit]) {
+  const v = roundInUnit(px, unit, precision);
+  return unit === "px" ? String(v) : `${v}${unit}`;
+}
+function parseLength(text, fallbackUnit) {
+  const m = /^\s*([-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)\s*([a-z]*)\s*$/i.exec(text);
+  if (!m) return null;
+  const value = parseFloat(m[1]);
+  if (!Number.isFinite(value)) return null;
+  const suffix = m[2].toLowerCase();
+  if (suffix === "") return toPx(value, fallbackUnit);
+  if (!isUnit(suffix)) return null;
+  return toPx(value, suffix);
+}
+function rulerStepPx(zoom, unit, minCssPx = 60) {
+  const steps = RULER_STEPS[unit];
+  for (const s of steps) {
+    const px = toPx(s, unit);
+    if (px * zoom >= minCssPx) return px;
+  }
+  return toPx(steps[steps.length - 1], unit);
+}
+var UNITS, PX_PER, UNIT_PRECISION, isUnit, toPx, fromPx, RULER_STEPS;
+var init_units = __esm({
+  "lib/units/units.ts"() {
+    init_define_POPCRAFT_COMPONENT_IDS();
+    UNITS = ["px", "pt", "in", "mm", "cm", "pc"];
+    PX_PER = {
+      px: 1,
+      pt: 96 / 72,
+      pc: 16,
+      in: 96,
+      mm: 96 / 25.4,
+      cm: 96 / 2.54
+    };
+    UNIT_PRECISION = { px: 2, pt: 1, pc: 2, in: 3, mm: 1, cm: 2 };
+    isUnit = (u) => typeof u === "string" && UNITS.includes(u);
+    toPx = (value, unit) => value * PX_PER[unit];
+    fromPx = (px, unit) => px / PX_PER[unit];
+    RULER_STEPS = {
+      px: [1, 2, 5, 10, 25, 50, 100, 250, 500, 1e3, 2500, 5e3],
+      pt: [1, 6, 12, 36, 72, 144, 360, 720, 1440, 3600],
+      pc: [1, 3, 6, 12, 60, 120, 600],
+      in: [0.125, 0.25, 0.5, 1, 2, 5, 10, 25, 50],
+      mm: [1, 5, 10, 50, 100, 500, 1e3],
+      cm: [0.5, 1, 5, 10, 50, 100]
+    };
+  }
+});
+
+export {
+  UNITS,
+  PX_PER,
+  UNIT_PRECISION,
+  isUnit,
+  toPx,
+  fromPx,
+  roundInUnit,
+  formatLength,
+  parseLength,
+  rulerStepPx,
+  init_units
+};

package/dist/chunks/chunk-DEEIO54R.js

@@ -0,0 +1,177 @@
+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 {
+  MONTHLY_SPANS,
+  MONTHS,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  ts
+} from "./chunk-FSVWBDEL.js";
+import {
+  drawOn
+} from "./chunk-RXG7T7TH.js";
+import {
+  board,
+  hide,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  pt3
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-data-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS milestone post";
+var DURATION = 8e3;
+var CHART = { w: 888, h: 300 };
+var TOP = 1100;
+var BARS = 400;
+var STEP = 180;
+var cues = [
+  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Unit", preset: "words-in", at: 200, params: { duration: 700 } },
+  { layer: "Month row", preset: "slide-in", at: 2400, stagger: { delay: 160, order: "selection" }, params: { direction: "left", distance: 40, duration: 420 } },
+  { layer: "Trillion line", preset: "fade-in", at: BARS + 8 * STEP + 300, params: { duration: 400 } },
+  { layer: "Thanks", preset: "fade-in", at: 3400, params: { duration: 600 } },
+  { layer: "Big figure", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.03 } }
+];
+var counts = [
+  { layer: "Big figure", at: 200, duration: 2600, counter: { from: 0, to: SPANWISE.trillion, decimals: 2 } }
+];
+var style_data_milestone_default = defineTemplate({
+  id: "social-saas-style-data-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in a data-dense enterprise look for an observability platform: 1.02 trillion spans in a month counts up in big tabular figures while the year's months rise as bars on a ruled console chart, a line draws through their tops and a dashed trillion line lights as September crosses it, over a small table of the last three months. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "metric", "counter", "chart", "bar chart", "saas", "data", "dashboard", "enterprise", "observability", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Label 20", label(20));
+    ts(k, "Figure 190", figure(190));
+    ts(k, "Figure 220", figure(220));
+    ts(k, "Unit 42", display(42, { lead: 1.12 }));
+    ts(k, "Axis 18", figure(18, 500));
+    ts(k, "Tag 18", label(18));
+    ts(k, "Head 17", label(17));
+    ts(k, "Cell 24", figure(24, 500));
+    ts(k, "Mono 24", code(24));
+    ts(k, "Thanks 26", body(26, 500));
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Milestone");
+    k.flowSheet(sheet, 22, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    k.text(top, "SEPTEMBER 2026 \xB7 MILESTONE", { style: "Label 20", color: "onPaper", autoWidth: true, name: "Kicker" });
+    const fig = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Figure row" });
+    k.text(fig, SPANWISE.trillion.toFixed(2), { style: "Figure 190", color: "text", width: 380, name: "Big figure" });
+    k.text(fig, "trillion spans indexed in one month. Every one kept.", { style: "Unit 42", color: "text", name: "Unit" });
+    const con = panel(k, sheet, { gap: 8, padding: { top: 20, right: 24, bottom: 16, left: 24 }, name: "Chart panel" });
+    const cb = board(k, con, CHART.w, CHART.h + 30, 1, "Chart board");
+    const plotH = CHART.h, x0 = 70, plotW = CHART.w - x0;
+    const yOf = (v) => Math.round(plotH - v / TOP * plotH);
+    for (const [v, t] of [[0, "0"], [500, "500 B"], [1e3, "1 T"]]) {
+      k.rect(cb, plotW, 1, "line", { name: "Grid line", absolute: { x: x0, y: yOf(v) } });
+      k.text(cb, t, { style: "Axis 18", color: "cardMuted", autoWidth: true, name: "Grid label", absolute: { x: 0, y: yOf(v) - 12 } });
+    }
+    const tl = k.vector(cb, plotW, 4, [{ closed: false, points: [pt3(0, 2), pt3(plotW, 2)] }], [], { name: "Trillion line", absolute: { x: x0, y: yOf(1e3) - 2 }, stroke: { color: "warn", width: 2, dash: [6, 10], cap: "ROUND" } });
+    void tl;
+    const slot = plotW / MONTHLY_SPANS.length, bw = Math.round(slot * 0.56);
+    const tops = [];
+    MONTHLY_SPANS.forEach((v, i) => {
+      const x = Math.round(x0 + slot * i + (slot - bw) / 2), h = plotH - yOf(v);
+      const last = i === MONTHLY_SPANS.length - 1;
+      const bar = k.rect(cb, bw, h, last ? "primary" : "cool", { name: last ? "Last bar" : "Bar", radius: 3, absolute: { x, y: yOf(v) } });
+      k.patch(bar, { anchorY: 1 });
+      k.animate(bar, "scaleY", [{ t: BARS + i * STEP, v: 0, ease: ease.out("cubic") }, { t: BARS + i * STEP + 520, v: 1 }]);
+      k.text(cb, MONTHS[i], { style: "Axis 18", color: last ? "onCard" : "cardMuted", width: Math.round(slot), align: "CENTER", name: "Month label", absolute: { x: Math.round(x0 + slot * i), y: plotH + 8 } });
+      tops.push({ x: x - x0 + bw / 2, y: yOf(v) });
+    });
+    const line = k.vector(cb, plotW, plotH, [{ closed: false, points: tops.map((p) => pt3(p.x, p.y)) }], [], { name: "Top line", absolute: { x: x0, y: 0 }, stroke: { color: "onCard", width: 2.5, cap: "ROUND", join: "ROUND" } });
+    drawOn(k, line, BARS + 200, 8 * STEP + 400);
+    const tag = k.stack(cb, { direction: "HORIZONTAL", width: "HUG", fill: "warn", radius: 4, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Trillion tag", absolute: { x: x0 + 8, y: yOf(1e3) - 34 } });
+    k.text(tag, "1 TRILLION", { style: "Tag 18", color: "well", autoWidth: true, name: "Tag words" });
+    k.animate(tag, "opacity", [{ t: BARS + 8 * STEP + 300, v: 0, ease: ease.out("cubic") }, { t: BARS + 8 * STEP + 700, v: 1 }]);
+    const tb = panel(k, sheet, { name: "Month table" });
+    const th = k.stack(tb, { direction: "HORIZONTAL", height: 38, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "well", name: "Month head" });
+    for (const [t, w] of [["MONTH", "FILL"], ["SPANS", 260], ["VS PRIOR", 200]]) k.text(th, t, { style: "Head 17", color: "cardMuted", width: w, align: w === "FILL" ? "LEFT" : "RIGHT", name: "Month col" });
+    for (const i of [6, 7, 8]) {
+      const v = MONTHLY_SPANS[i], prev = MONTHLY_SPANS[i - 1];
+      const r = k.stack(tb, { direction: "HORIZONTAL", height: 48, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, name: "Month row" });
+      k.text(r, `${MONTHS[i]} 2026`, { style: "Mono 24", color: "onCard", width: "FILL", name: "Month name" });
+      k.text(r, `${v.toLocaleString("en-US")} B`, { style: "Cell 24", color: "onCard", width: 260, align: "RIGHT", name: "Month spans" });
+      k.text(r, `\u2191 ${((v - prev) / prev * 100).toFixed(1)}%`, { style: "Cell 24", color: "up", width: 200, align: "RIGHT", name: "Month growth" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Thanks" });
+    k.text(foot, "Thank you to the 1,900 platform teams who sent them.", { style: "Thanks 26", color: "onPaper", autoWidth: true, name: "Thanks line" });
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 8, right: 14, bottom: 8, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Mono 24", color: "onCard", autoWidth: true });
+    });
+    k.instance(foot, "Site pill", { Label: "{{brand.site}}" }, { name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 30 });
+      },
+      vertical: (kit, id) => {
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN", itemSpacing: 34 });
+        for (const f of kit.named(id, "Figure row")) kit.patch(f, { layoutMode: "VERTICAL", itemSpacing: 0 });
+        restyle(kit, id, "Big figure", "Figure 220");
+        for (const t of kit.named(id, "Big figure")) kit.patch(t, { width: 800 });
+        for (const t of kit.named(id, "Unit")) kit.patch(t, { layoutSizingHorizontal: "FILL" });
+        reboard(kit, id, "Chart board", (800 - 48) / CHART.w);
+        hide(kit, id, ["Thanks line"]);
+        heatMap(kit, id, { cols: 36, rows: 14, cell: 26, gap: 4, hotRow: 5, hotCol: 30, name: "Heat foot", absolute: { x: 2, y: 1474 }, dim: 0.85 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_milestone_default
+};

package/dist/chunks/chunk-DEFIDHH4.js

@@ -0,0 +1,342 @@
+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 {
+  burstPath
+} from "./chunk-YNOCYFZ4.js";
+import {
+  hardShadow,
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box,
+  line,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/black-friday-coupons-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var OFFER = {
+  product: "Stockroom",
+  pitch: "One stock count across Shopify, Etsy and the market stall.",
+  site: "stockroom.example",
+  link: "{{brand.site}}/clip",
+  code: "CLIP50",
+  off: 50,
+  /** Starter, a year: the list price and the Black Friday price. */
+  starterWas: 228,
+  starterNow: 114,
+  /** Multi-shop, a year. */
+  shopWas: 588,
+  shopNow: 294,
+  /** The third coupon: we import the catalogue for nothing. */
+  setupWorth: 150,
+  starts: "Fri 27 Nov",
+  ends: "Mon 30 Nov, 23:59 PT",
+  /** The countdown as the pieces show it: what is left when the piece goes out. */
+  days: 2,
+  hours: 9,
+  minutes: 41,
+  seconds: 59
+};
+var two = (n) => String(n).padStart(2, "0");
+var COLORS = {
+  paper: "#E8DFC8",
+  text: "#15120E",
+  onPaper: "#4B4436",
+  primary: "#D8241B",
+  onPrimary: "#FFF6DC",
+  accent: "#FFD21F",
+  onAccent: "#15120E",
+  card: "#FCF7E6",
+  onCard: "#15120E",
+  cardMuted: "#5E5646"
+};
+function couponBrand(k, fields, roles = Object.keys(COLORS)) {
+  k.brand(Object.fromEntries(roles.map((r) => [r, COLORS[r]])), fields);
+  k.palette({ print: "#CDBF9C", shade: "#2B2010", steel: "#9AA0A6", steelDark: "#40454B", stampInk: "#1B49A0", kraft: "#C49A5C", kraftInk: "#8A6632", cut: "#15120E" });
+}
+function rayPaths(w, h, cx, cy, n = 28) {
+  const reach = Math.hypot(w, h);
+  const out = [];
+  for (let i = 0; i < n; i += 2) {
+    const a = i / n * Math.PI * 2 + 0.11, b = (i + 1) / n * Math.PI * 2 + 0.11;
+    out.push({ closed: true, points: [{ x: cx, y: cy }, { x: cx + reach * Math.cos(a), y: cy + reach * Math.sin(a) }, { x: cx + reach * Math.cos(b), y: cy + reach * Math.sin(b) }] });
+  }
+  return out;
+}
+function rays(k, parent, w, h, o = {}) {
+  return k.vector(parent, w, h, rayPaths(w, h, w * (o.fx ?? 0.5), h * (o.fy ?? 0.3)), "print", { name: o.name ?? "Rays", opacity: o.opacity ?? 0.42, absolute: { x: 0, y: 0 } });
+}
+function fitRays(k, root, fx = 0.5, fy = 0.3, name = "Rays") {
+  for (const id of k.named(root, name)) {
+    const p = k.node(k.node(id).parentId);
+    k.patch(id, { x: 0, y: 0, width: p.width, height: p.height, paths: rayPaths(p.width, p.height, p.width * fx, p.height * fy) });
+  }
+}
+var SPAN = 2400;
+function dashRule(k, parent, role, o = {}) {
+  const weight = o.weight ?? 2;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: weight, clip: true, name: o.name ?? "Perforation" });
+  k.vector(strip, SPAN, weight, [line(0, weight / 2, SPAN, weight / 2)], [], { name: "Dashes", stroke: { color: role, width: weight, dash: o.dash ?? [8, 6], cap: "NONE" } });
+  return strip;
+}
+function dashColumn(k, parent, role, o = {}) {
+  const weight = o.weight ?? 2;
+  const strip = k.stack(parent, { width: weight, height: "FILL", clip: true, name: o.name ?? "Perforation" });
+  k.vector(strip, weight, SPAN, [line(weight / 2, 0, weight / 2, SPAN)], [], { name: "Dashes", stroke: { color: role, width: weight, dash: o.dash ?? [8, 6], cap: "NONE" } });
+  return strip;
+}
+function scissorPaths(len, open) {
+  const h = Math.round(len * 0.56), px = len * 0.4, py = h / 2;
+  const turn = (x, y, a) => ({ x: px + x * Math.cos(a) - y * Math.sin(a), y: py + x * Math.sin(a) + y * Math.cos(a) });
+  const handles = [], blades = [];
+  for (const side of [1, -1]) {
+    const a = side * open * Math.PI / 360;
+    blades.push({ closed: true, points: [turn(-len * 0.05, 0, a), turn(len * 0.6, 0, a), turn(len * 0.12, -side * len * 0.075, a), turn(-len * 0.05, -side * len * 0.055, a)] });
+    const rx = -len * 0.27, ry = side * len * 0.115, r = len * 0.105;
+    handles.push({ closed: false, points: [turn(0, 0, a), turn(rx + r * 0.9, ry - side * r * 0.3, a)] });
+    handles.push({ closed: true, points: Array.from({ length: 14 }, (_, i) => {
+      const t = i / 14 * Math.PI * 2;
+      return turn(rx + r * Math.cos(t), ry + r * 0.82 * Math.sin(t), a);
+    }) });
+  }
+  return { handles, blades, h };
+}
+function scissors(k, parent, len, o = {}) {
+  const h = Math.round(len * 0.56);
+  const frame = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: len, height: h }, { name: o.name ?? "Scissors" });
+  const pose = (name, open2, visible) => {
+    const f = k.frame(frame, { x: 0, y: 0, width: len, height: h }, { name, ...visible ? {} : { opacity: 0 } });
+    const p = scissorPaths(len, open2);
+    k.vector(f, len, h, p.blades, "steel", { name: "Blades", absolute: { x: 0, y: 0 }, stroke: { color: "steelDark", width: Math.max(1, len / 90), join: "ROUND" } });
+    k.vector(f, len, h, p.handles, [], { name: "Handles", absolute: { x: 0, y: 0 }, stroke: { color: "primary", width: Math.max(2, len * 0.045), join: "ROUND", cap: "ROUND" } });
+    k.ellipse(f, Math.max(3, len * 0.045), "steelDark", { name: "Rivet", absolute: { x: len * 0.4 - len * 0.0225, y: h / 2 - len * 0.0225 } });
+    return f;
+  };
+  const open = pose("Scissors open", 34, true);
+  const shut = pose("Scissors shut", 7, false);
+  if (o.rotation) k.patch(frame, { rotation: o.rotation });
+  return { frame, open, shut, length: len, height: h };
+}
+function snip(k, s, o) {
+  const axis = o.axis ?? "translateX";
+  const move = [{ t: 0, v: 0, ease: ease.hold }];
+  const openKeys = [{ t: 0, v: 1, ease: ease.hold }];
+  const shutKeys = [{ t: 0, v: 0, ease: ease.hold }];
+  const half = Math.round(o.every / 2);
+  for (let i = 0; i < o.steps; i++) {
+    const t = o.at + i * o.every;
+    openKeys.push({ t, v: 0, ease: ease.hold }, { t: t + half, v: 1, ease: ease.hold });
+    shutKeys.push({ t, v: 1, ease: ease.hold }, { t: t + half, v: 0, ease: ease.hold });
+    move.push({ t: t + half, v: Math.round(o.distance * (i + 1) / o.steps), ease: ease.hold });
+  }
+  if (o.back !== void 0 && o.backOver) move.push({ t: o.back - o.backOver, v: Math.round(o.distance) }, { t: o.back, v: 0, ease: ease.hold });
+  else if (o.back !== void 0) move.push({ t: o.back, v: 0, ease: ease.hold });
+  k.animate(s.frame, axis, move);
+  k.animate(s.open, "opacity", openKeys);
+  k.animate(s.shut, "opacity", shutKeys);
+}
+function barcodePaths(w, h, seed = 50) {
+  const r = rng(seed);
+  const unit = w / 95;
+  const out = [];
+  for (let x = 0, i = 0; x < w - unit; i++) {
+    const bar = unit * (1 + Math.floor(r() * 3)), gap = unit * (1 + Math.floor(r() * 2));
+    const guard = i % 9 === 0;
+    out.push(box(x, 0, Math.min(bar, w - x), guard ? h : h * 0.86));
+    x += bar + gap;
+  }
+  return out;
+}
+function barcode(k, parent, w, h, role, o = {}) {
+  return k.vector(parent, w, h, barcodePaths(w, h, o.seed), role, { name: o.name ?? "Barcode", ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function coupon(k, parent, o) {
+  const u = o.u ?? 1;
+  const cutPad = Math.round(12 * u);
+  const cut = k.stack(parent, { width: o.width ?? "FILL", padding: cutPad, name: o.name ?? "Coupon", stroke: { color: "cut", width: Math.max(1.5, 3 * u), align: "INSIDE", dash: [Math.round(16 * u), Math.round(11 * u)], cap: "NONE" }, ...o.absolute ? { absolute: o.absolute } : {} });
+  const card = k.stack(cut, { fill: "card", name: "Coupon paper", effects: [shadow(k, "shade", 0.3, Math.round(10 * u), Math.round(26 * u)), shadow(k, "shade", 0.22, Math.round(2 * u), Math.round(4 * u))] });
+  if (o.band) {
+    const band = k.stack(card, { direction: "HORIZONTAL", fill: "primary", justify: "SPACE_BETWEEN", align: "CENTER", gap: Math.round(12 * u), padding: { top: Math.round(8 * u), right: o.pad, bottom: Math.round(8 * u), left: o.pad }, name: o.band.name ?? "Coupon band" });
+    k.text(band, o.band.label, { style: o.band.style, color: "onPrimary", autoWidth: true, name: "Band label" });
+    if (o.band.note) k.text(band, o.band.note, { style: o.band.style, color: "onPrimary", autoWidth: true, name: "Band note" });
+  }
+  const main = k.stack(card, { direction: "HORIZONTAL", name: "Coupon main" });
+  const body = k.stack(main, { gap: o.gap, padding: o.pad, name: "Coupon body" });
+  let stub;
+  if (o.stub) {
+    dashColumn(k, main, "cardMuted", { weight: Math.max(2, Math.round(3 * u)), dash: [Math.round(7 * u) || 3, Math.round(7 * u) || 3] });
+    stub = k.stack(main, { width: o.stub.width, height: "FILL", align: "CENTER", justify: "CENTER", gap: Math.round(8 * u), padding: Math.round(12 * u), name: "Coupon stub" });
+    k.text(stub, o.stub.label ?? "CODE", { style: o.stub.labelStyle, color: "cardMuted", autoWidth: true, name: "Stub label" });
+    k.text(stub, o.stub.code, { style: o.stub.codeStyle, color: "onCard", autoWidth: true, name: "Stub code" });
+    barcode(k, stub, o.stub.width - Math.round(36 * u), o.stub.bars, "onCard", { seed: o.stub.seed });
+  }
+  if (o.rotation) k.patch(cut, { rotation: o.rotation });
+  return { cut, card, body, stub };
+}
+function price(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: o.gap ?? 14, align: "CENTER", name: `${o.name} price` });
+  const figure = k.text(row, o.now, { style: o.figureStyle, color: "onCard", name: `${o.name} figure`, ...o.figureWidth ? { width: o.figureWidth } : { autoWidth: true } });
+  const side = k.stack(row, { width: "HUG", gap: 2, name: `${o.name} side` });
+  k.text(side, o.per, { style: o.sideStyle, color: "onCard", autoWidth: true, name: `${o.name} per` });
+  const was = k.stack(side, { width: "HUG", name: `${o.name} was` });
+  const t = k.text(was, o.was, { style: o.sideStyle, color: "cardMuted", autoWidth: true, name: `${o.name} was price` });
+  const n = k.node(t), weight = o.strike ?? Math.max(2, Math.round(n.height / 9));
+  k.rect(was, Math.round(n.width + 6), weight, "primary", { name: "Strike", absolute: { x: -3, y: Math.round(n.height / 2 - weight / 2) } });
+  return { row, figure };
+}
+function sticker(k, parent, lines, o = {}) {
+  const [v, h] = o.pad ?? [10, 20], u = o.u ?? 1;
+  const s = k.stack(parent, { width: "HUG", fill: "accent", radius: Math.round(7 * u), align: "CENTER", gap: o.gap ?? 0, padding: { top: v, right: h, bottom: v, left: h }, name: o.name ?? "Sticker", stroke: { color: "onAccent", width: Math.max(1.5, 3 * u), align: "INSIDE" }, effects: [hardShadow(k, "shade", Math.round(5 * u), Math.round(6 * u), 0.5)], ...o.absolute ? { absolute: o.absolute } : {} });
+  for (const [words, style, name] of lines) k.text(s, words, { style, color: "onAccent", autoWidth: true, name: name ?? `${o.name ?? "Sticker"} line` });
+  if (o.rotation) k.patch(s, { rotation: o.rotation });
+  return s;
+}
+function burst(k, parent, size, lines, o = {}) {
+  const b = k.stack(parent, { width: size, height: size, align: "CENTER", justify: "CENTER", gap: o.gap ?? 0, name: o.name ?? "Burst", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.vector(b, size, size, [burstPath(size, o.points ?? 18, 0.13)], "primary", { name: "Burst shape", absolute: { x: 0, y: 0 }, effects: [hardShadow(k, "shade", Math.round(size * 0.02), Math.round(size * 0.025), 0.45)] });
+  for (const [words, style, name] of lines) k.text(b, words, { style, color: "onPrimary", autoWidth: true, name: name ?? "Burst words" });
+  if (o.rotation) k.patch(b, { rotation: o.rotation });
+  return b;
+}
+function stamp(k, parent, words, o) {
+  const [v, h] = o.pad ?? [8, 20], u = o.u ?? 1;
+  const s = k.stack(parent, { width: "HUG", fill: k.tint("card", 0.86), radius: Math.round(10 * u), padding: Math.round(6 * u), name: o.name ?? "Stamp", stroke: { color: "stampInk", width: Math.max(2, Math.round(5 * u)), align: "INSIDE" }, ...o.absolute ? { absolute: o.absolute } : {} });
+  const inner = k.stack(s, { width: "HUG", radius: Math.round(5 * u), padding: { top: v, right: h, bottom: v, left: h }, stroke: { color: "stampInk", width: Math.max(1, Math.round(2 * u)), align: "INSIDE" }, name: "Stamp edge" });
+  k.text(inner, words, { style: o.style, color: "stampInk", autoWidth: true, name: o.textName ?? "Stamp words" });
+  if (o.rotation) k.patch(s, { rotation: o.rotation });
+  return s;
+}
+function blankCoupon(k, parent, o) {
+  const { width: w, height: h } = o, u = o.u ?? 1;
+  const m = Math.round(12 * u);
+  const f = k.frame(parent, { x: o.x, y: o.y, width: w, height: h }, { name: o.name ?? "Blank coupon", stroke: { color: "cut", width: Math.max(1.5, 3 * u), align: "INSIDE", dash: [Math.round(16 * u), Math.round(11 * u)], cap: "NONE" } });
+  const paper = k.frame(f, { x: m, y: m, width: w - m * 2, height: h - m * 2 }, { name: "Blank paper", fill: o.kraft ? "kraft" : "card", effects: [shadow(k, "shade", 0.3, Math.round(10 * u), Math.round(26 * u))] });
+  const pw = w - m * 2, ph = h - m * 2, band = Math.round(ph * 0.17), stub = Math.round(pw * 0.26), pad = Math.round(ph * 0.1);
+  k.rect(paper, pw, band, "primary", { name: "Blank band", absolute: { x: 0, y: 0 } });
+  const r = rng(o.seed ?? 7);
+  const ink = o.kraft ? "kraftInk" : "print";
+  const bars = [box(pad, band + pad, (pw - stub - pad * 2) * 0.62, ph * 0.26)];
+  for (let y = band + pad + ph * 0.36; y < ph - pad * 0.6; y += ph * 0.105) bars.push(box(pad, y, (pw - stub - pad * 2) * (0.5 + r() * 0.45), ph * 0.045));
+  for (let y = band + 4 * u; y < ph - 4 * u; y += 14 * u) bars.push(box(pw - stub - u, y, 2 * u, 7 * u));
+  k.vector(paper, pw, ph, bars, ink, { name: "Blank print", absolute: { x: 0, y: 0 }, opacity: o.kraft ? 0.7 : 1 });
+  const bw = stub - pad * 1.2;
+  k.vector(paper, bw, ph * 0.42, barcodePaths(bw, ph * 0.42, (o.seed ?? 7) + 3), o.kraft ? "kraftInk" : "cardMuted", { name: "Blank barcode", absolute: { x: pw - stub + (stub - bw) / 2, y: band + (ph - band) * 0.28 } });
+  k.patch(f, { rotation: o.rotation });
+  return f;
+}
+var lift = (k, u = 1) => [shadow(k, "shade", 0.36, Math.round(18 * u), Math.round(40 * u))];
+function pinkedPaths(w, h, tooth, flip = false) {
+  const n = Math.max(2, Math.round(w / tooth)), step = w / n, depth = tooth * 0.55;
+  const teeth = [];
+  for (let i = 0; i <= n; i++) {
+    teeth.push({ x: i * step, y: flip ? depth : h - depth });
+    if (i < n) teeth.push({ x: (i + 0.5) * step, y: flip ? 0 : h });
+  }
+  return [{ closed: true, points: flip ? [...teeth, { x: w, y: h }, { x: 0, y: h }] : [{ x: 0, y: 0 }, { x: w, y: 0 }, ...teeth.reverse()] }];
+}
+function pinked(k, parent, w, h, o = {}) {
+  return k.vector(parent, w, h, pinkedPaths(w, h, o.tooth ?? 36, o.flip), "primary", { name: o.name ?? "Pinked band", absolute: { x: 0, y: o.y ?? 0 } });
+}
+function fitPinked(k, root, w, h, y, o = {}) {
+  for (const id of k.named(root, o.name ?? "Pinked band")) k.patch(id, { x: 0, y, width: w, height: h, paths: pinkedPaths(w, h, o.tooth ?? 36, o.flip), visible: true });
+}
+function heroCoupon(k, parent, o) {
+  const c = coupon(k, parent, {
+    name: "Hero coupon",
+    width: o.width,
+    u: o.u,
+    pad: o.pad,
+    gap: o.gap,
+    absolute: o.absolute,
+    rotation: o.rotation,
+    band: { label: o.band ?? "STARTER \xB7 ANNUAL PLAN", style: o.styles.band },
+    stub: { width: o.stub, code: "{{brand.code}}", label: "CODE", codeStyle: o.styles.code ?? o.styles.side, labelStyle: o.styles.fine, bars: o.bars, seed: 50 }
+  });
+  if (o.pitch !== null && o.styles.pitch) k.text(c.body, o.pitch ?? "One shop. 500 products. In sync.", { style: o.styles.pitch, color: "onCard", name: "Hero pitch" });
+  price(k, c.body, { now: `$${OFFER.starterNow}`, was: `WAS $${OFFER.starterWas}`, per: "A YEAR", figureStyle: o.styles.figure, sideStyle: o.styles.side, name: "Hero", gap: o.priceGap ?? 12, ...o.figureWidth ? { figureWidth: o.figureWidth } : {} });
+  k.text(c.body, o.small ?? "VALID 27\u201330 NOV. ONE PER SHOP.", { style: o.styles.fine, color: "cardMuted", name: "Hero small print" });
+  return c;
+}
+function smallCoupons(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: o.gap, name: "Small coupons" });
+  const shop = coupon(k, row, { name: "Shop coupon", u: o.u, pad: o.pad, gap: 6, rotation: -1.6, band: { label: "MULTI-SHOP \xB7 ANNUAL", style: o.styles.band } });
+  price(k, shop.body, { now: `$${OFFER.shopNow}`, was: `WAS $${OFFER.shopWas}`, per: "A YEAR", figureStyle: o.styles.figure, sideStyle: o.styles.side, name: "Shop", gap: o.priceGap ?? 10 });
+  k.text(shop.body, "5 CHANNELS, NO PRODUCT LIMIT", { style: o.styles.fine, color: "cardMuted", name: "Shop small print" });
+  const setup = coupon(k, row, { name: "Setup coupon", u: o.u, pad: o.pad, gap: 6, rotation: 2, band: { label: "FREE WITH ANY PLAN", style: o.styles.band } });
+  price(k, setup.body, { now: "FREE", was: `WAS $${OFFER.setupWorth}`, per: "SET-UP", figureStyle: o.styles.figure, sideStyle: o.styles.side, name: "Setup", gap: o.priceGap ?? 10 });
+  k.text(setup.body, "WE IMPORT YOUR CATALOGUE", { style: o.styles.fine, color: "cardMuted", name: "Setup small print" });
+  return row;
+}
+function masthead(k, parent, o) {
+  const mast = k.stack(parent, { gap: o.gap ?? 8, name: "Masthead" });
+  const row = k.stack(mast, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, name: "Masthead row" });
+  k.text(row, "{{brand.name}} WEEKLY SAVER", { style: o.style, color: "text", autoWidth: true, name: "Edition" });
+  k.text(row, o.right ?? "BLACK FRIDAY \xB7 27\u201330 NOV", { style: o.style, color: "onPaper", autoWidth: true, name: "Dates" });
+  k.rect(mast, "FILL", o.weight ?? 6, "text", { name: "Heavy rule" });
+  return mast;
+}
+function clock(k, parent, o) {
+  const u = o.u ?? 1;
+  const tiles = k.stack(parent, { direction: "HORIZONTAL", gap: o.gap, name: "Clock" });
+  const units = o.units ?? ["DAYS", "HOURS", "MINUTES", "SECONDS"];
+  const figures = [["Days", OFFER.days], ["Hours", OFFER.hours], ["Minutes", OFFER.minutes], ["Seconds", o.seconds]];
+  figures.forEach(([name, value], i) => {
+    const tile = k.stack(tiles, { gap: Math.round(8 * u), align: "CENTER", name: "Tile" });
+    const label = k.stack(tile, { fill: "accent", radius: Math.round(10 * u), align: "CENTER", padding: { top: o.pad, right: 0, bottom: o.pad, left: 0 }, stroke: { color: "onAccent", width: Math.max(2, Math.round(4 * u)), align: "INSIDE" }, effects: [hardShadow(k, "shade", Math.round(6 * u), Math.round(7 * u), 0.45)], name: "Tile sticker" });
+    k.text(label, two(value), { style: o.style, color: "onAccent", name: `${name} figure` });
+    k.text(tile, units[i], { style: o.unitStyle, color: "onPaper", name: `${name} unit` });
+  });
+  return tiles;
+}
+var ART = { w: 540, h: 490 };
+function heroArt(k, art, o) {
+  blankCoupon(k, art, { x: -14, y: 262, width: 400, height: 210, rotation: -7, u: 0.7, seed: 3, name: "Fan back" });
+  blankCoupon(k, art, { x: 128, y: 268, width: 420, height: 216, rotation: 6, u: 0.7, seed: 9, kraft: true, name: "Fan front" });
+  const hero = heroCoupon(k, art, { width: 520, u: 0.75, pad: 18, gap: 6, absolute: { x: 10, y: 122 }, stub: 138, bars: 62, figureWidth: 232, priceGap: 8, styles: o.styles });
+  const cutter = scissors(k, hero.cut, 118, { absolute: { x: -30, y: -34 } });
+  burst(k, art, 168, [[`${OFFER.off}%`, o.burst[0]], ["OFF", o.burst[1]]], { rotation: 9, absolute: { x: 384, y: -6 } });
+  sticker(k, art, [["YOU SAVE", o.sticker[0]], [`$${OFFER.starterWas - OFFER.starterNow}`, o.sticker[1]]], { rotation: -8, pad: [7, 16], u: 0.75, absolute: { x: 396, y: 316 } });
+  return { hero, cutter };
+}
+
+export {
+  OFFER,
+  two,
+  couponBrand,
+  rayPaths,
+  rays,
+  fitRays,
+  dashRule,
+  dashColumn,
+  scissors,
+  snip,
+  barcodePaths,
+  barcode,
+  coupon,
+  price,
+  sticker,
+  burst,
+  stamp,
+  blankCoupon,
+  lift,
+  pinkedPaths,
+  pinked,
+  fitPinked,
+  heroCoupon,
+  smallCoupons,
+  masthead,
+  clock,
+  ART,
+  heroArt
+};