@popcraft/kit 0.26.1 → 0.27.0

package/dist/chunks/chunk-L5O6FICC.js

@@ -1,386 +0,0 @@
-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 {
-  chart
-} from "./chunk-YNOCYFZ4.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-X23ZWFW2.js";
-import {
-  blackShadow,
-  noise
-} from "./chunk-HVK5T4I5.js";
-import {
-  box,
-  line
-} from "./chunk-BNVLVZUT.js";
-import {
-  ease
-} from "./chunk-NKAPBBXH.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/saas/style-editorial-shared.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var QUIRE = {
-  name: "Quire",
-  site: "quire.example",
-  paper: "The Tidewater Review",
-  pitch: "Reader revenue for independent publications.",
-  /** Press and Imprint, a month; a year is ten months (two free). Pamphlet is free. */
-  press: 24,
-  imprint: 79,
-  /** The Tidewater Review: paid readers at $8 a month, and what the meter did. */
-  readers: 4218,
-  revenue: 33744,
-  free: 3,
-  before: 2.1,
-  convert: 4.6,
-  paidOut: 4e6,
-  publications: 2600,
-  version: "3.0",
-  issue: "No. 3",
-  season: "Autumn 2026"
-};
-var COLORS = {
-  paper: "#F1ECE1",
-  text: "#1A1915",
-  onPaper: "#575249",
-  primary: "#0F5C47",
-  onPrimary: "#F6F2E8",
-  card: "#FBF8F1",
-  onCard: "#1A1915",
-  cardMuted: "#6A655B"
-};
-function editorialBrand(k, fields) {
-  k.brand({ ...COLORS }, { name: QUIRE.name, site: QUIRE.site, ...fields });
-  k.palette({ mark: "#0F5C47", markInk: "#F6F2E8", cardRule: "#DAD3C3", well: "#F4EFE5", plate: "#DCD4C3", plateDeep: "#BDB29C", plateInk: "#8B8270" });
-}
-var r1 = (v) => Math.round(v * 10) / 10;
-function editorialType(k) {
-  const make = (name, def) => {
-    k.textStyle(name, def);
-    return name;
-  };
-  const t = {
-    display: (size) => make(`Display ${size}`, { ...SERIF, size, fontWeight: 400, letterSpacing: r1(-size * 0.03), lineHeight: Math.round(size * 1.04) }),
-    figure: (size) => make(`Figure ${size}`, { ...SERIF, size, fontWeight: 400, letterSpacing: r1(-size * 0.035), lineHeight: Math.round(size * 1.02), fontFeatures: { tnum: 1, lnum: 1 } }),
-    serif: (size) => make(`Serif ${size}`, { ...SERIF, size, fontWeight: 400, letterSpacing: size > 24 ? r1(-size * 0.012) : 0, lineHeight: Math.round(size * (size > 24 ? 1.3 : 1.5)) }),
-    italic: (size) => make(`Italic ${size}`, { ...SERIF, size, fontWeight: 400, fontStyle: "italic", lineHeight: Math.round(size * 1.35) }),
-    sans: (size) => make(`Sans ${size}`, { size, fontWeight: 400, lineHeight: Math.round(size * 1.5) }),
-    strong: (size) => make(`Strong ${size}`, { size, fontWeight: 600, letterSpacing: size > 20 ? r1(-size * 0.012) : 0, lineHeight: Math.round(size * 1.35) }),
-    label: (size) => make(`Label ${size}`, { ...MONO, size, fontWeight: 500, letterSpacing: r1(size * 0.09), lineHeight: Math.round(size * 1.45) }),
-    s: (name) => {
-      const m = /^(Display|Figure|Serif|Italic|Sans|Strong|Label) (\d+)$/.exec(name);
-      if (!m) throw new Error(`No "${name}" in the editorial type`);
-      return t[m[1].toLowerCase()](Number(m[2]));
-    }
-  };
-  return t;
-}
-var tooth = (amount = 0.05) => [noise({ id: "tooth", amount, size: 2, seed: 23, density: 0.4 })];
-var columnPaths = (xs, h) => xs.map((x) => box(Math.round(x), 0, 1, h));
-function paperGround(k, sheet, h, xs, o = {}) {
-  k.patch(sheet, { effects: tooth(o.tooth) });
-  const w = k.node(sheet).width;
-  k.vector(sheet, w, h, columnPaths(xs, h), k.tint("text", o.alpha ?? 0.1), { name: "Columns", absolute: { x: 0, y: 0 } });
-}
-function fitGround(k, sheet, xs, h = k.node(sheet).height) {
-  const w = k.node(sheet).width;
-  for (const id of k.named(sheet, "Columns")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: columnPaths(xs, h) });
-}
-var hairline = (k, parent, o = {}) => k.rect(parent, "FILL", o.weight ?? 1, o.color ?? k.tint("text", o.alpha ?? 1), { name: o.name ?? "Rule" });
-function runningHead(k, parent, o) {
-  const name = o.name ?? "Running head";
-  const id = k.stack(parent, { gap: o.gap ?? 12, name });
-  const rule = () => k.rect(id, "FILL", o.weight ?? 2, "text", { name: `${name} rule` });
-  if (!o.foot) rule();
-  const row = k.stack(id, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: `${name} words` });
-  o.words.forEach((w) => k.text(row, w, { style: o.style, color: o.ink ?? "text", autoWidth: true, name: `${name} word` }));
-  if (o.foot) rule();
-  return id;
-}
-function lockup(k, parent, o) {
-  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(o.size * 0.42), align: "CENTER", name: o.name ?? "Lockup" });
-  const tile = k.stack(row, { width: "HUG", fill: "primary", padding: Math.round(o.size * 0.2), name: "Logo tile" });
-  k.logo(tile, o.size, o.size);
-  k.text(row, "{{brand.name}}", { style: o.style, color: o.ink ?? "text", autoWidth: true, name: "Brand name" });
-  return row;
-}
-function inkButton(k, name, o) {
-  const [v, h] = o.pad ?? [16, 26], a = o.arrow ?? 0;
-  k.component(name, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 2, align: "CENTER", gap: Math.round(h * 0.5), padding: { top: v, right: h, bottom: v, left: h }, props: { Label: o.label } }, (id) => {
-    k.propText(id, "Label", { style: o.style, color: "onPrimary", autoWidth: true });
-    if (a) k.vector(id, a, a * 0.6, [line(0, a * 0.3, a, a * 0.3), { closed: false, points: [{ x: a * 0.68, y: 0 }, { x: a, y: a * 0.3 }, { x: a * 0.68, y: a * 0.6 }] }], [], { name: "Arrow", stroke: { color: "onPrimary", width: Math.max(1.5, a / 11), cap: "NONE", join: "MITER" } });
-  });
-}
-function dropCap(k, parent, letter, o) {
-  const cap = k.stack(parent, { width: o.size, height: o.size, fill: "primary", align: "CENTER", justify: "CENTER", name: o.name ?? "Drop cap" });
-  k.text(cap, letter, { style: o.style, color: "onPrimary", autoWidth: true, name: "Cap letter" });
-  return cap;
-}
-function maskedLines(k, parent, lines, o) {
-  const block = k.stack(parent, { name: o.name, ...o.width !== void 0 ? { width: o.width } : {} });
-  for (const l of lines) {
-    const mask = k.stack(block, { clip: true, name: "Line mask" });
-    k.text(mask, l, { style: o.style, color: o.color ?? "text", name: `${o.name} line` });
-  }
-  return block;
-}
-function riseLines(k, root, name, at, o = {}) {
-  const ids = k.named(root, `${name} line`), gap = o.gap ?? 140, d = o.duration ?? 900;
-  ids.forEach((id, i) => {
-    const h = Math.round(k.node(id).height * 1.1), t = at + i * gap;
-    const keys = [{ t, v: h, ease: ease.out("quart") }, { t: t + d, v: 0, ...o.out !== void 0 ? { ease: ease.hold } : {} }];
-    if (o.out !== void 0) {
-      const u = o.out + (ids.length - 1 - i) * (o.outGap ?? 80);
-      keys.push({ t: u, v: 0, ease: ease.named("cubic", "in") }, { t: u + 500, v: h });
-    }
-    k.animate(id, "translateY", keys);
-  });
-}
-function plate(k, parent, w, h, o) {
-  const slot = k.stack(parent, { width: w, height: h, clip: true, name: o.name, ...o.absolute ? { absolute: o.absolute } : {} });
-  k.photo(slot, w, h, { ground: "plate", name: o.photo, absolute: { x: 0, y: 0 } });
-  const art = k.frame(slot, { x: 0, y: 0, width: w, height: h }, { name: "Placeholder picture", fill: "plate" });
-  const u = Math.min(w, h), ty = h * 0.66;
-  k.rect(art, w, h - ty, "plateDeep", { name: "Table", absolute: { x: 0, y: ty } });
-  const pw = u * 0.42, ph = u * 0.26, px = w * 0.5 - pw * 0.72, py = ty - ph * 0.42;
-  const page = (x, lean) => ({ closed: true, points: [{ x, y: py + lean }, { x: x + pw, y: py - lean }, { x: x + pw + u * 0.06, y: py + ph - lean }, { x: x + u * 0.06, y: py + ph + lean }] });
-  k.vector(art, w, h, [page(px, u * 0.02), page(px + pw, -u * 0.02)], "card", { name: "Pages", absolute: { x: 0, y: 0 }, effects: [blackShadow(0.18, u * 0.02, u * 0.06)] });
-  const rows = [];
-  for (let i = 0; i < 5; i++) for (const s of [0, 1]) rows.push(box(px + s * pw + u * 0.05 + i * u * 8e-3, py + ph * (0.2 + i * 0.13), pw * (i === 4 ? 0.5 : 0.76), Math.max(1.5, u * 8e-3)));
-  k.vector(art, w, h, rows, "plateInk", { name: "Type", absolute: { x: 0, y: 0 }, opacity: 0.7 });
-  const cr = u * 0.1, cx = w * 0.8, cy = ty + (h - ty) * 0.36;
-  k.ellipse(art, cr * 2, "card", { name: "Cup", absolute: { x: cx - cr, y: cy - cr }, effects: [blackShadow(0.2, u * 0.015, u * 0.05)] });
-  k.ellipse(art, cr * 1.5, "plateInk", { name: "Coffee", absolute: { x: cx - cr * 0.75, y: cy - cr * 0.75 } });
-  k.vector(art, w, h, [{ closed: true, points: [{ x: w * 0.08, y: 0 }, { x: w * 0.34, y: 0 }, { x: w * 0.16, y: ty }, { x: -w * 0.1, y: ty }] }], "card", { name: "Window light", absolute: { x: 0, y: 0 }, opacity: 0.35 });
-  return slot;
-}
-var WEEKS = [2610, 2660, 2700, 2760, 2800, 2850, 2890, 2940, 2980, 3030, 3190, 3380, 3560, 3770, 3980, QUIRE.readers];
-var METER_WEEK = 9;
-var CHART_MIN = 2300;
-var CHART_MAX = 4500;
-function readersChart(k, parent, o) {
-  const { w, h } = o, id = o.id ?? "Readers";
-  const frame = k.stack(parent, { width: w, height: h, fill: "well", clip: true, stroke: { color: "cardRule", width: 1, align: "INSIDE" }, name: o.name ?? "Chart", ...o.absolute ? { absolute: o.absolute } : {} });
-  k.vector(frame, w, h, [0.25, 0.5, 0.75].map((f) => line(0, Math.round(h * f), w, Math.round(h * f))), [], { name: "Levels", stroke: { color: "cardRule", width: 1, cap: "NONE" }, absolute: { x: 0, y: 0 } });
-  const cw = w - 16;
-  const c = chart(WEEKS.map((v) => v - CHART_MIN), cw, h, CHART_MAX - CHART_MIN);
-  const mx = Math.round(c.pts[METER_WEEK].x);
-  const marker = k.stack(frame, { width: 220, height: h, absolute: { x: mx, y: 0 }, name: o.id ? `${id} marker` : "Marker" });
-  k.vector(marker, 2, h, [line(1, 0, 1, h)], [], { name: "Marker line", stroke: { color: "onCard", width: 1.5, dash: [5, 5], cap: "NONE" }, absolute: { x: 0, y: 0 } });
-  k.text(marker, o.label, { style: o.labelStyle, color: "onCard", autoWidth: true, name: "Marker label", absolute: { x: 10, y: h - 32 } });
-  const area = k.vector(frame, cw, h, [c.area], k.tint("mark", 0.12), { name: `${id} area`, absolute: { x: 0, y: 0 } });
-  const ln = k.vector(frame, cw, h, [c.line], [], { name: `${id} line`, stroke: { color: "mark", width: o.weight ?? 3, join: "ROUND" }, absolute: { x: 0, y: 0 } });
-  const end = c.pts[c.pts.length - 1];
-  const dot = k.ellipse(frame, 12, "mark", { name: `${id} dot`, absolute: { x: end.x - 6, y: end.y - 6 }, stroke: { color: "well", width: 3, align: "OUTSIDE" } });
-  let total = 0, upTo = 0;
-  c.pts.forEach((p, i) => {
-    if (!i) return;
-    total += Math.hypot(p.x - c.pts[i - 1].x, p.y - c.pts[i - 1].y);
-    if (i === METER_WEEK) upTo = total;
-  });
-  return { frame, line: ln, area, dot, marker, turn: Math.round(upTo / total * 1e3) / 1e3 };
-}
-var SCREEN = { width: 800, height: 560, bar: 44, side: 172 };
-function meterSwitch(k, parent, o = {}) {
-  const track = k.stack(parent, { direction: "HORIZONTAL", width: 44, height: 24, radius: 12, fill: "cardRule", name: o.name ?? "Meter switch" });
-  k.rect(track, 44, 24, "mark", { radius: 12, name: "Switch on", absolute: { x: 0, y: 0 } });
-  const knob = k.ellipse(track, 18, "card", { name: "Switch knob", absolute: { x: 23, y: 3 } });
-  return { track, knob };
-}
-function readersScreen(k, parent, o = {}) {
-  const W = SCREEN, t = editorialType(k);
-  const win = k.stack(parent, { width: W.width, height: W.height, fill: "card", radius: 6, clip: true, stroke: { color: "cardRule", width: 1, align: "INSIDE" }, name: o.name ?? "Window", ...o.shadow === false ? {} : { effects: [blackShadow(0.16, 26, 60), blackShadow(0.08, 3, 8)] }, ...o.absolute ? { absolute: o.absolute } : {} });
-  const bar = k.stack(win, { direction: "HORIZONTAL", height: W.bar, align: "CENTER", gap: 16, padding: { top: 0, right: 18, bottom: 0, left: 18 }, name: "Title bar" });
-  const dots = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 7, name: "Window dots" });
-  for (let i = 0; i < 3; i++) k.ellipse(dots, 10, "cardRule", { name: "Window dot" });
-  k.text(bar, "{{brand.site}} / tidewater / readers", { style: t.label(16), color: "cardMuted", name: "Window title" });
-  k.rect(win, "FILL", 1, "cardRule", { name: "Title rule" });
-  const body = k.stack(win, { direction: "HORIZONTAL", height: W.height - W.bar - 1, name: "Screen" });
-  const side = k.stack(body, { width: W.side, height: "FILL", fill: "well", padding: { top: 20, right: 10, bottom: 18, left: 16 }, justify: "SPACE_BETWEEN", name: "Sidebar" });
-  const upper = k.stack(side, { gap: 18, name: "Side upper" });
-  k.text(upper, "The Tidewater\nReview", { style: t.serif(19), color: "onCard", name: "Publication" });
-  const navs = k.stack(upper, { gap: 2, name: "Side nav" });
-  ["Readers", "Issues", "Paywall", "Payouts"].forEach((label, i) => {
-    const item = k.stack(navs, { direction: "HORIZONTAL", gap: 10, align: "CENTER", padding: { top: 6, right: 0, bottom: 6, left: 0 }, name: "Nav item" });
-    k.rect(item, 3, 18, i === 0 ? "mark" : "well", { name: "Nav mark" });
-    k.text(item, label, { style: i === 0 ? t.strong(16) : t.sans(16), color: i === 0 ? "onCard" : "cardMuted", name: "Nav label" });
-  });
-  k.text(side, QUIRE.season.toUpperCase(), { style: t.label(16), color: "cardMuted", name: "Side issue" });
-  k.rect(body, 1, W.height - W.bar - 1, "cardRule", { name: "Sidebar rule" });
-  const pad = 28, mw = W.width - W.side - 1 - pad * 2;
-  const main = k.stack(body, { height: "FILL", padding: { top: 22, right: pad, bottom: 22, left: pad }, justify: "SPACE_BETWEEN", name: "Readers page" });
-  const head = k.stack(main, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Page head" });
-  k.text(head, "PAID READERS", { style: t.label(16), color: "cardMuted", autoWidth: true, name: "Page title" });
-  const status = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Status" });
-  k.ellipse(status, 8, "mark", { name: "Status dot" });
-  k.text(status, "UP 39% SINCE THE METER", { style: t.label(16), color: "onCard", autoWidth: true, name: "Status label" });
-  const figures = k.stack(main, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Figures" });
-  const readers = k.text(figures, QUIRE.readers.toLocaleString("en-US"), { style: t.figure(104), color: "onCard", width: 290, name: "Readers figure" });
-  const stats = k.stack(figures, { direction: "HORIZONTAL", width: "HUG", gap: 18, padding: { top: 0, right: 0, bottom: 14, left: 0 }, name: "Stats" });
-  for (const [label, value, name, w] of [["THIS MONTH", `$${QUIRE.revenue.toLocaleString("en-US")}`, "Revenue figure", 112], ["FREE TO PAID", o.convert ?? `${QUIRE.convert}%`, "Convert figure", 70]]) {
-    const st = k.stack(stats, { width: "HUG", gap: 2, name: "Stat" });
-    k.text(st, label, { style: t.label(16), color: "cardMuted", autoWidth: true, name: "Stat label" });
-    k.text(st, value, { style: t.figure(30), color: "onCard", width: w, name });
-  }
-  const chart2 = readersChart(k, main, { w: mw, h: 150, label: "METER ON", labelStyle: t.label(16) });
-  k.rect(main, "FILL", 1, "cardRule", { name: "Meter rule" });
-  const meter = k.stack(main, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Meter" });
-  const left = k.stack(meter, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Meter left" });
-  const { knob } = meterSwitch(k, left);
-  k.text(left, "Free articles a month", { style: t.sans(16), color: "onCard", autoWidth: true, name: "Meter label" });
-  const right = k.stack(meter, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Meter right" });
-  const pips = k.stack(right, { direction: "HORIZONTAL", width: "HUG", gap: 5, name: "Meter pips" });
-  const spare = [];
-  for (let i = 0; i < 5; i++) {
-    const pip = k.stack(pips, { width: 22, height: 8, fill: "cardRule", name: "Meter pip" });
-    const fill = k.rect(pip, 22, 8, "mark", { name: i < QUIRE.free ? "Pip fill" : "Pip spare", absolute: { x: 0, y: 0 }, ...i < QUIRE.free ? {} : { opacity: 0 } });
-    if (i >= QUIRE.free) spare.push(fill);
-  }
-  const stepper = k.stack(right, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", stroke: { color: "cardRule", width: 1, align: "INSIDE" }, radius: 3, name: "Stepper" });
-  const key = (name, plus) => {
-    const b = k.stack(stepper, { width: 34, height: 34, align: "CENTER", justify: "CENTER", name });
-    k.vector(b, 12, 12, plus ? [line(0, 6, 12, 6), line(6, 0, 6, 12)] : [line(0, 6, 12, 6)], [], { name: "Key sign", stroke: { color: "onCard", width: 1.5, cap: "NONE" } });
-  };
-  key("Fewer", false);
-  const well = k.stack(stepper, { width: 40, height: 34, align: "CENTER", justify: "CENTER", fill: "well", name: "Meter well" });
-  k.text(well, String(QUIRE.free), { style: t.figure(22), color: "onCard", width: 40, align: "CENTER", name: "Meter figure" });
-  key("More", true);
-  return { win, readers, chart: chart2, knob, spare };
-}
-function middleOf(k, root, name) {
-  const id = k.named(root, name)[0];
-  if (!id) throw new Error(`middleOf: no layer "${name}"`);
-  const n = k.node(id);
-  let x = n.x + n.width / 2, y = n.y + n.height / 2;
-  for (let p = n.parentId; p && p !== root; p = k.node(p).parentId) {
-    x += k.node(p).x;
-    y += k.node(p).y;
-  }
-  return { x: Math.round(x), y: Math.round(y) };
-}
-function drift(k, id, amp, freq, phase = 0) {
-  k.behave(id, "translateY", [{ kind: "sine", amp, freq, phase }]);
-}
-function pageBelow(k, parent, o) {
-  const cols = o.cols ?? 3, gap = 28, cw = (o.width - gap * (cols - 1)) / cols, step = 22;
-  const f = k.frame(parent, { x: o.x, y: o.y, width: o.width, height: o.height }, { name: o.name ?? "Page below" });
-  const bars = [], heads = [];
-  for (let c = 0; c < cols; c++) {
-    const x = c * (cw + gap);
-    let row = 0;
-    for (let y = 34; y < o.height; y += step, row++) {
-      const at = (row + c * 5) % 13;
-      if (at === 9) {
-        heads.push(box(x, y + 4, cw * 0.46, 6));
-        continue;
-      }
-      if (at === 8 || at === 10) continue;
-      bars.push(box(x + (at === 0 ? 22 : 0), y, cw * (at === 7 ? 0.58 : 1) - (at === 0 ? 22 : 0), 3));
-    }
-  }
-  k.rect(f, o.width, 2, "text", { name: "Page rule", absolute: { x: 0, y: 0 } });
-  k.vector(f, o.width, o.height, bars, k.tint("text", 0.16), { name: "Body type", absolute: { x: 0, y: 0 } });
-  k.vector(f, o.width, o.height, heads, k.tint("text", 0.5), { name: "Cross-heads", absolute: { x: 0, y: 0 } });
-  return f;
-}
-var MASTHEADS = ["The Tidewater Review", "Field Notes Weekly", "Hinterland", "The Lantern Dispatch", "Low Country Kitchen", "Margins & Meridians"];
-var WEB_STEPS = {
-  "Display 96": { laptop: "Display 84", tablet: "Display 88", mobile: "Display 50" },
-  "Display 64": { laptop: "Display 56", tablet: "Display 52", mobile: "Display 38" },
-  "Display 56": { tablet: "Display 52", mobile: "Display 38" },
-  "Display 72": { laptop: "Display 64", tablet: "Display 56", mobile: "Display 40" },
-  "Figure 96": { tablet: "Figure 84", mobile: "Figure 56" },
-  "Serif 30": { mobile: "Serif 24" },
-  "Serif 34": { laptop: "Serif 30", tablet: "Serif 30", mobile: "Serif 24" },
-  "Serif 21": { mobile: "Serif 19" }
-};
-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 cell = k.stack(strip, { direction: "HORIZONTAL", width: o.item, height: o.height, align: "CENTER", gap: 18, absolute: { x: 0, y: 0 }, name: "Masthead" });
-    k.rect(cell, 6, 6, o.mark ?? "primary", { name: "Masthead mark" });
-    k.text(cell, label, { style: o.style, color: o.color ?? "text", autoWidth: true, name: "Masthead name" });
-    k.patch(cell, { translateX: i * o.item });
-    k.behave(cell, "translateX", [{ kind: "spin", rate: -o.rate }, { kind: "mod", period, offset: -o.item }]);
-  });
-  return strip;
-}
-function sectionHead(k, parent, o) {
-  const head = k.stack(parent, { gap: 18, name: o.name, ...o.width !== void 0 ? { width: o.width } : {} });
-  const tag = k.stack(head, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: `${o.name} label` });
-  k.rect(tag, 28, 3, "primary", { name: "Label rule" });
-  k.text(tag, o.label, { style: o.label13, color: "onPaper", autoWidth: true, name: `${o.name} label words` });
-  k.text(head, o.title, { style: o.titleStyle, color: "text", name: `${o.name} title` });
-  return head;
-}
-var PAGE_RULES = 16e3;
-var PAGE_EDGES = {
-  desktop: { w: 1440, side: 120, cols: 3 },
-  laptop: { w: 1280, side: 80, cols: 3 },
-  tablet: { w: 768, side: 48, cols: 2 },
-  mobile: { w: 375, side: 20, cols: 1 }
-};
-var pageCols = (size) => {
-  const e = PAGE_EDGES[size], inner = e.w - e.side * 2;
-  return Array.from({ length: e.cols + 1 }, (_, i) => e.side + Math.round(inner * i / e.cols) - (i === e.cols ? 1 : 0));
-};
-function pageColumns(k, sheet) {
-  const xs = pageCols("desktop");
-  k.vector(sheet, PAGE_EDGES.desktop.w, PAGE_RULES, columnPaths(xs, PAGE_RULES), k.tint("text", 0.08), { name: "Columns", absolute: { x: 0, y: 0 } });
-}
-function fitPageColumns(k, sheet, size) {
-  for (const id of k.named(sheet, "Columns")) k.patch(id, { x: 0, y: 0, width: PAGE_EDGES[size].w, height: PAGE_RULES, paths: columnPaths(pageCols(size), PAGE_RULES) });
-}
-function respaceMarquee(k, root, o) {
-  for (const strip of k.named(root, o.name ?? "Marquee")) {
-    const cells = k.node(strip).childIds.filter((c) => k.node(c).name === "Masthead"), period = cells.length * o.item;
-    cells.forEach((c, i) => {
-      k.patch(c, { width: o.item, translateX: i * o.item, motion: void 0 });
-      k.behave(c, "translateX", [{ kind: "spin", rate: -(period * 1e3) / o.loop }, { kind: "mod", period, offset: -o.item }]);
-      if (o.style) for (const n of k.named(c, "Masthead name")) k.restyle(n, o.style);
-    });
-  }
-}
-
-export {
-  QUIRE,
-  editorialBrand,
-  editorialType,
-  tooth,
-  paperGround,
-  fitGround,
-  hairline,
-  runningHead,
-  lockup,
-  inkButton,
-  dropCap,
-  maskedLines,
-  riseLines,
-  plate,
-  WEEKS,
-  METER_WEEK,
-  readersChart,
-  SCREEN,
-  meterSwitch,
-  readersScreen,
-  middleOf,
-  drift,
-  pageBelow,
-  MASTHEADS,
-  WEB_STEPS,
-  marquee,
-  sectionHead,
-  pageColumns,
-  fitPageColumns,
-  respaceMarquee
-};

package/dist/chunks/chunk-L6ABOXVP.js

@@ -1,150 +0,0 @@
-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 {
-  LATCH,
-  SPIKE,
-  backdrop,
-  chip,
-  darkBrand,
-  errorChart,
-  fitBackdrop,
-  lamp,
-  lockup,
-  notice,
-  storyFlags
-} from "./chunk-M6QTK2HG.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  hz
-} from "./chunk-Z2UPJTSZ.js";
-import {
-  board,
-  reboard
-} from "./chunk-QLV6445V.js";
-import {
-  outro,
-  pill,
-  postVariants
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-QBBW3JXO.js";
-import {
-  Kit,
-  preset
-} from "./chunk-SOHOKD4X.js";
-import {
-  ease
-} from "./chunk-NKAPBBXH.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/social/style-dark-announcement.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Dark SaaS announcement post";
-var DURATION = 7e3;
-var CARD = { w: 936, h: 330 };
-var CROSS = 2700;
-var BACK = 1e3;
-var CONTENT = ["Top row", "Kicker", "Headline", "Line", "Feature card", "Foot"];
-var cues = [
-  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 250 } },
-  { layer: "Kicker", preset: "fade-in", at: 80, params: { duration: 250 } },
-  { layer: "Headline", preset: "letters-in", at: 120, params: { duration: 380, amount: 24 } },
-  { layer: "Line", preset: "words-in", at: 700, params: { duration: 380, amount: 45 } },
-  { layer: "Feature card", preset: "rise-in", at: 500, params: { duration: 500 } },
-  { layer: "Foot", preset: "fade-in", at: 1e3, params: { duration: 300 } },
-  { layer: "Threshold", preset: "wipe-in", at: 1100, params: { duration: 600 } },
-  { layer: "Feature card", preset: "shake", at: CROSS, params: { duration: 400, distance: 12 } },
-  { layer: "Notice", preset: "drop-in", at: CROSS, params: { duration: 300 } },
-  { layer: "Error area", preset: "fade-in", at: CROSS + BACK, params: { duration: 500 } },
-  { layer: "Error dot", preset: "pop-in", at: CROSS + BACK + 200, params: { duration: 300 } },
-  { layer: "Notice", preset: "pulse", at: 4200, params: { duration: 500, amount: 0.05 } },
-  { layer: "Button", preset: "pulse", at: 4800, params: { duration: 500, amount: 0.05 } },
-  { layer: "Guardrail", preset: "flash", at: 5400, params: { duration: 600 } },
-  outro(CONTENT, 6200, { gap: 60, duration: 350 })
-];
-var counts = [
-  { layer: "Notice figure", at: CROSS, duration: BACK, tick: 250, counter: { from: 0, to: 4, prefix: "Rolled back in ", suffix: " s" } }
-];
-var style_dark_announcement_default = defineTemplate({
-  id: "motion-saas-style-dark-announcement",
-  meta: {
-    name: NAME,
-    description: "An animated feature announcement in the dark precision look: the headline lands a letter at a time on a ruled near-black ground, then a product card shows the feature working, an error rate drawing through its limit, the card jolting and a notice that counts the seconds to roll back. Seven seconds, looping, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "dark", "dark mode", "announcement", "feature", "changelog", "release", "chart", "counter", "developer tools", "post", "loop"],
-    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
-    formats: ["post", "portrait-post", "story"],
-    useCases: ["announcement", "changelog", "launch"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, loop: true },
-  build() {
-    const k = new Kit(NAME, preset("ig-post"));
-    k.quantizeGeometry = true;
-    darkBrand(k, { headline: "Auto-rollback is live." });
-    k.textStyle("Brand 34", { size: 34, fontWeight: 600, letterSpacing: -0.8, lineHeight: 40 });
-    k.textStyle("Kicker 22", { ...MONO, size: 22, fontWeight: 500, letterSpacing: 2, lineHeight: 28 });
-    k.textStyle("Headline 136", { size: 136, fontWeight: 700, letterSpacing: -7, lineHeight: 122 });
-    k.textStyle("Headline 112", { size: 112, fontWeight: 700, letterSpacing: -5.6, lineHeight: 104 });
-    k.textStyle("Line 36", { size: 36, fontWeight: 400, letterSpacing: -0.6, lineHeight: 48 });
-    k.textStyle("Notice 24", { size: 24, fontWeight: 600, letterSpacing: -0.3, lineHeight: 30, fontFeatures: { tnum: 1 } });
-    k.textStyle("Card 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 28 });
-    k.textStyle("Button 26", { size: 26, fontWeight: 600, letterSpacing: -0.4, lineHeight: 32 });
-    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 26", label: "Read the changelog", pad: [14, 24], radius: 10 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 28, 72, "paper", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    backdrop(k, sheet, 1080, 1080);
-    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
-    lockup(k, top, { size: 34, style: "Brand 34", name: "Lockup" });
-    chip(k, top, `CHANGELOG \xB7 V${LATCH.version}`, { name: "Version", ink: "onPaper" });
-    const words = k.stack(sheet, { gap: 22, name: "Words" });
-    const kicker = k.stack(words, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Kicker" });
-    lamp(k, kicker, 14, "primary", { name: "Kicker lamp", breathe: hz(7, DURATION) });
-    k.text(kicker, "NEW ON TEAM AND SCALE", { style: "Kicker 22", color: "onPaper", name: "Kicker words" });
-    k.text(words, "{{brand.headline}}", { style: "Headline 136", color: "text", name: "Headline" });
-    k.text(words, "Set a line for your error rate. Cross it, and the old code is back in four seconds.", { style: "Line 36", color: "onPaper", name: "Line" });
-    const stage = board(k, sheet, CARD.w, CARD.h, 1, "Feature board");
-    const card = k.stack(stage, { width: CARD.w, height: CARD.h, fill: "card", radius: 16, padding: 24, gap: 16, stroke: { color: "edge", width: 1, align: "INSIDE" }, absolute: { x: 0, y: 0 }, name: "Feature card" });
-    const head = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
-    k.text(head, `${LATCH.flag} \xB7 production \xB7 error rate`, { style: "Card 22", color: "cardMuted", autoWidth: true, name: "Card flag" });
-    const guard = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Guardrail" });
-    k.rect(guard, 12, 12, "signal", { radius: 3, name: "Guardrail mark" });
-    k.text(guard, "GUARDRAIL ON", { style: "Card 22", color: "signal", autoWidth: true, name: "Guardrail label" });
-    const ch = errorChart(k, card, { w: CARD.w - 48, h: CARD.h - 48 - 28 - 16, values: SPIKE, weight: 4 });
-    notice(k, card, { style: "Notice 24", width: 226, lamp: 14, pad: [12, 20], absolute: { x: 40, y: 84 } });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
-    k.instance(foot, "Call", { Label: "Read the changelog" }, { name: "Button" });
-    k.text(foot, "{{brand.site}}/changelog", { style: "Card 22", color: "onPaper", autoWidth: true, name: "Link" });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    k.animate(ch.line, "trim.end", [{ t: 1300, v: 0, ease: ease.linear }, { t: CROSS, v: ch.crossing, ease: ease.linear }, { t: CROSS + BACK, v: 1 }]);
-    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
-      portrait: (kit, id) => fitBackdrop(kit, id),
-      vertical: (kit, id) => {
-        fitBackdrop(kit, id);
-        storyFlags(kit, id);
-        kit.patch(id, { primaryAxisAlignItems: "CENTER", itemSpacing: 56, counterAxisSpacing: 56 });
-        reboard(kit, id, "Feature board", 800 / CARD.w);
-        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Headline 112");
-      }
-    }));
-    return k.finish();
-  }
-});
-
-export {
-  style_dark_announcement_default
-};

package/dist/chunks/chunk-L6KE6K42.js

@@ -1,84 +0,0 @@
-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-NPLYQVNP.js";
-import {
-  defineTemplate
-} from "./chunk-QBBW3JXO.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/shop-ode.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var PRODUCTS = [
-  { title: "Ode kettle", handle: "ode-kettle", price: "$165.00", image: "ode-1", tags: "kettles", description: "A 0.9-litre gooseneck kettle that holds water to the degree you set, with a counterweighted walnut handle and a spout that pours a stream as fine as a pencil lead." },
-  { title: "Ode dripper and filters", handle: "ode-dripper", price: "$38.00", image: "ode-filters", tags: "brewing", description: "A matte black ceramic dripper with spiral ribs, and 100 unbleached paper filters cut to fit it." },
-  { title: "Ode scale", handle: "ode-scale", price: "$72.00", image: "ode-scale", tags: "brewing", description: "A scale that weighs to a tenth of a gram and times the pour, in the same matte black, charged by USB-C." }
-];
-var shop_ode_default = defineTemplate({
-  id: "web-shop-ode",
-  meta: {
-    name: "Ode product launch",
-    description: "A one-product launch for a Next.js Commerce store, dark and quiet: the kettle as the hero with its price and add to cart, what it does, a close look at the pour, the accessories that go with it and the specs, then a page per product and a cart with checkout. Products and cart are collections a Shopify store fills when exported as components. Desktop, tablet and phone",
-    category: "storefront",
-    tags: ["ecommerce", "shop", "store", "product launch", "single product", "shopify", "next.js commerce", "product page", "cart", "dark", "coffee", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["launch", "sale"],
-    created: "2026-10-08",
-    updated: "2026-10-08"
-  },
-  breakpoints: true,
-  build: () => standardStore({
-    name: "Ode product launch",
-    brand: { paper: "#141312", text: "#F3EEE7", onPaper: "#A69E93", primary: "#C8874A", onPrimary: "#141312", card: "#1F1D1B", onCard: "#F3EEE7", cardMuted: "#A69E93", tint: "#1B1918", onTint: "#F3EEE7", tintMuted: "#A69E93", line: "#34302C" },
-    fields: { name: "Ode", email: "hello@odebrew.com" },
-    styles: {
-      "Wordmark 24": { size: 24, fontFamily: "Fraunces", fontWeight: 500, letterSpacing: -0.2, lineHeight: 30 },
-      "Nav 15": { size: 15, fontWeight: 500, lineHeight: 22 },
-      "Display 76": { size: 76, fontFamily: "Fraunces", fontWeight: 400, letterSpacing: -2.4, lineHeight: 80 },
-      "Display 44": { size: 44, fontFamily: "Fraunces", fontWeight: 400, letterSpacing: -1, lineHeight: 50 },
-      "Section 30": { size: 30, fontFamily: "Fraunces", fontWeight: 400, letterSpacing: -0.5, lineHeight: 36 },
-      "Title 18": { size: 18, fontWeight: 600, lineHeight: 26 },
-      "Price 16": { size: 16, fontWeight: 400, lineHeight: 24 },
-      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
-      "Small 14": { size: 14, fontWeight: 400, lineHeight: 20 },
-      "Button 16": { size: 16, fontWeight: 600, lineHeight: 24 }
-    },
-    type: { wordmark: "Wordmark 24", nav: "Nav 15", display: "Display 76", displaySmall: "Display 44", section: "Section 30", title: "Title 18", price: "Price 16", body: "Body 17", small: "Small 14", button: "Button 16" },
-    products: PRODUCTS,
-    categories: [],
-    carousel: "",
-    menu: [["The kettle", "/product/ode-kettle"], ["Cart", "/cart"]],
-    hero: { kicker: "Ode \xB7 ships from 4 November", headline: "Pour slower. Taste more.", lead: "A gooseneck kettle that holds your water at the degree you choose and pours a line thin enough to bloom every grain. Made for the four minutes of a morning that are yours.", cta: "Pre-order", image: "ode-1", layout: "split" },
-    story: { title: "A pour you can steer", body: "The spout narrows to 4 mm and the walnut handle sits behind the centre of weight, so a full kettle tips with one finger. Hold a steady circle, stop on a drop, start again.", image: "ode-2" },
-    promise: ["Free shipping in the US \xB7 pre-orders ship from 4 November", "Two-year warranty, and 60 days to send it back"],
-    newsletter: { title: "", body: "" },
-    legal: "Sales tax and shipping calculated at checkout.",
-    ratio: 1,
-    radius: 14,
-    launch: {
-      buy: "Pre-order now",
-      guide: "See the kettle up close",
-      features: [
-        ["Holds the degree", "Set 40\u2013100 \xB0C and Ode keeps it there for an hour, so the second cup is brewed like the first."],
-        ["Pours a pencil line", "A 4 mm spout and a counterweighted handle: a stream you can slow to a drip without it wobbling."],
-        ["Boils in four minutes", "1200 W on a base that turns off when the kettle lifts, and a lid that stays cool to the touch."]
-      ],
-      detail: "ode-2",
-      detailWords: "Brew ratios and pour timings for six coffees are in the guide that comes in the box.",
-      withIt: "Complete the ritual",
-      specs: [["Capacity", "0.9 L"], ["Temperature", "40\u2013100 \xB0C, held for 60 minutes"], ["Power", "1200 W \xB7 120 V"], ["Materials", "Stainless steel, walnut, powder-coated base"], ["Warranty", "Two years"]]
-    }
-  })
-});
-
-export {
-  shop_ode_default
-};