@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-WSBIPRFF.js

@@ -0,0 +1,399 @@
+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 {
+  PLOTLINE,
+  WEB_STEPS,
+  WEB_TYPE,
+  arrow,
+  arrowAt,
+  board as board2,
+  boxPaths,
+  dots,
+  draw,
+  keyWordmark,
+  marker,
+  marquee,
+  miniNote,
+  outline,
+  pen,
+  redots,
+  refitBoard,
+  refitWindow,
+  scribbleCircle,
+  sketchBrand,
+  sketchWindow,
+  sparkle,
+  sticky,
+  tick,
+  tidyKeys,
+  underline,
+  wobblyBox
+} from "./chunk-RNE3HHJP.js";
+import {
+  portraitSlot
+} from "./chunk-D7LV62QH.js";
+import {
+  clicks,
+  glide
+} from "./chunk-L23WDECU.js";
+import {
+  CONTENT,
+  columns,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-TJBKMQY5.js";
+import {
+  buttons,
+  nav
+} from "./chunk-YKXCPYWJ.js";
+import {
+  board,
+  reboard
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  measureTextWidth
+} from "./chunk-TZYNLQ4E.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/style-sketch-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Sketch SaaS landing page";
+var DURATION = 6e3;
+var TAP = 1800;
+var TIDY = 2e3;
+var UNTIDY = 5e3;
+var TIMING = { tidyAt: TIDY, untidyAt: UNTIDY, spread: 40, fly: 560 };
+var TEAMS = ["Fernhill Bikes", "Okapi Studio", "Lanternfish", "Brightwater Clinic", "Paper Crane Games", "Northbeam"];
+var HEADLINE = "Your whiteboard,\nsorted into a plan.";
+var HERO = {
+  desktop: { w: 620, h: 500, geo: { noteH: 96, headH: 40, rowGap: 14 } },
+  laptop: { w: 600, h: 500, geo: { noteH: 96, headH: 40, rowGap: 14 } },
+  tablet: { w: CONTENT.tablet, h: 500, geo: { noteH: 96, headH: 40, rowGap: 14 } },
+  mobile: { w: CONTENT.mobile, h: 520, geo: { noteH: 106, headH: 40, rowGap: 12, cols: 2 } }
+};
+var BAR = 74;
+var WEEKS = [41, 44, 39, 43, 47, 58, 66, 71, 78, 82, 85, 87];
+var CHART = { h: 300 };
+var WALL = { w: 440, h: 300 };
+var PLAN_W = Math.floor((CONTENT.desktop - 32) / 3);
+var cues = [
+  { layer: "Headline", preset: "words-in", at: 100, params: { duration: 600 } },
+  { layer: "Kicker", preset: "pop-in", at: 0, params: { duration: 420, amount: 0.6 } },
+  { layer: "Feature note", preset: "pop-in", at: 900, stagger: { delay: 160, order: "selection" }, params: { duration: 460, amount: 0.7 } },
+  { layer: "Mini note", preset: "pop-in", at: 300, stagger: { delay: 60, order: "selection" }, params: { duration: 360, amount: 0.6 } }
+];
+var counts = [
+  { layer: "Result figure", at: 1200, duration: 2400, counter: { from: 41, to: 87, suffix: "%" } },
+  { layer: "Minutes figure", at: 1600, duration: 1750, tick: 50, counter: { from: PLOTLINE.before, to: PLOTLINE.after, suffix: " min" } }
+];
+var style_sketch_landing_default = defineTemplate({
+  id: "web-saas-style-sketch-landing",
+  meta: {
+    name: NAME,
+    description: "A full landing page drawn with a marker in a dotted notebook, for a planning whiteboard. The hero plays the product on a loop: sticky notes in a heap, a marker pen taps Tidy up and they fly into three columns with a person and a date each. Under it a running band of teams, a wall of stickies turning into a plan with a red arrow that draws itself, a hand-drawn chart with a counting figure and a circled last point, features as sticky notes slapped on at angles, a quote beside a taped photo slot, the plans, a big closing line and a footer. Desktop to phone",
+    category: "web",
+    tags: ["landing page", "saas", "sketch", "hand-drawn", "whiteboard", "sticky notes", "doodle", "planning", "productivity", "hero", "chart", "counter", "marquee", "testimonial", "pricing", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    sketchBrand(k, { tagline: HEADLINE });
+    const s = typeScale(k, { ...WEB_TYPE });
+    buttons(k, { style: s("Button 16"), pad: [14, 22], radius: 12 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 112, { top: 28, right: 120, bottom: 56, left: 120 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { layoutSizingVertical: "HUG", minHeight: 1024, clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    k.patch(sheet, { height: 7400 });
+    dots(k, sheet, { step: 32, size: 3, opacity: 0.14 });
+    const top = k.stack(sheet, { gap: 40, name: "Top" });
+    nav(k, top, { links: ["Product", "Templates", "Pricing", "Customers", "Sign in"], cta: "Start a free board", style: s("Nav 15"), brandStyle: s("Brand 20") });
+    const hero = k.stack(top, { direction: "HORIZONTAL", gap: 40, align: "CENTER", padding: { top: 24, right: 0, bottom: 0, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { width: 540, gap: 26, name: "Copy" });
+    const kicker = sticky(k, copy, { width: 210, color: "sticky", text: `New in ${PLOTLINE.version}: ${PLOTLINE.feature}`, style: s("Ui 15"), pad: 12, name: "Kicker" });
+    k.patch(kicker.note, { rotation: -2 });
+    const headBox = k.stack(copy, { name: "Headline box" });
+    const headline = k.text(headBox, "{{brand.tagline}}", { style: s("Display 64"), color: "text", name: "Headline" });
+    const headLine = marker(k, headBox, 200, 22, underline(200, 22, { seed: 12 }), { name: "Headline line", color: "red", width: 7, absolute: { x: 0, y: 0 } });
+    k.text(copy, "Plotline is the whiteboard your team already plans on, with one extra button. Tap Tidy up and every sticky lands in This week, Next week or Later, with a person and a date on it.", { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Ctas" });
+    k.instance(ctas, "Button", { Label: "Start a free board" }, { name: "CTA primary" });
+    k.instance(ctas, "Button quiet", { Label: "Watch the 40 s demo" }, { name: "CTA quiet" });
+    k.text(copy, PLOTLINE.trial, { style: s("Small 14"), color: "onPaper", name: "Terms" });
+    const H0 = HERO.desktop;
+    const w = sketchWindow(k, hero, { w: H0.w, h: H0.h, title: "Launch plan, week 41", style: s("Ui 15"), button: PLOTLINE.feature, buttonStyle: s("Button 16"), name: "Hero window", seed: 5, bar: BAR - 10 });
+    const b = board2(k, w.body, { w: H0.w, h: H0.h - w.bar, noteStyle: s("Note 15"), metaStyle: s("Meta 12"), headStyle: s("Head 17"), geo: H0.geo });
+    const p = pen(k, w.win, { x: H0.w - 70, y: H0.h - 60, size: 96 });
+    const heroArrow = arrowAt(k, hero, { x: 400, y: 476 }, { x: 568, y: 392 }, { name: "Hero arrow", bend: 0.35, seed: 21, width: 5 });
+    const band = k.stack(sheet, { gap: 14, name: "Band" });
+    k.text(band, "Teams planning on Plotline this week", { style: s("Label 14"), color: "onPaper", name: "Band label" });
+    marquee(k, band, { names: TEAMS, item: 250, height: 64, style: s("Brand 20"), duration: DURATION });
+    const wall = k.stack(sheet, { gap: 36, name: "Wall section" });
+    const wallHead = k.stack(wall, { direction: "HORIZONTAL", gap: 40, name: "Wall head" });
+    k.text(wallHead, "From a wall of stickies to a plan, in one tap.", { style: s("Section 44"), color: "text", width: 560, name: "Wall title" });
+    k.text(wallHead, "Tidy up reads every note, folds the duplicates together, puts each one in This week, Next week or Later and suggests a person and a date from your team's calendar. Drag anything to change it: it is still your whiteboard.", { style: s("Body 16"), color: "onPaper", name: "Wall body" });
+    const wallRow = k.stack(wall, { direction: "HORIZONTAL", gap: 20, align: "CENTER", justify: "SPACE_BETWEEN", name: "Wall row" });
+    const heap = board(k, wallRow, WALL.w, WALL.h, 1, "Heap");
+    heapNotes(k, heap);
+    const mid = k.stack(wallRow, { width: 240, gap: 6, align: "CENTER", name: "Wall arrow" });
+    k.text(mid, "one tap", { style: s("Sticky 22"), color: "text", autoWidth: true, name: "Wall arrow label" });
+    const big = arrow({ x: 10, y: 70 }, { x: 230, y: 70 }, { bend: 0.22, head: 38, seed: 31 });
+    const bigArrow = marker(k, mid, big.w, big.h, big.paths, { name: "Wall arrow line", color: "red", width: 8, sequential: true });
+    const plan = board(k, wallRow, WALL.w, WALL.h, 1, "Plan");
+    planNotes(k, plan);
+    const results = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, name: "Results row" });
+    const rCopy = k.stack(results, { width: 440, gap: 18, name: "Results copy" });
+    k.text(rCopy, "Follow-ups that actually happen", { style: s("Section 34"), color: "text", name: "Results title" });
+    k.text(rCopy, "87%", { style: s("Figure 96"), color: "text", width: 300, name: "Result figure" });
+    k.text(rCopy, "of the action items from Fernhill Bikes' Monday retros were done within a week once they planned on Plotline, up from 41%. Same team, same meetings; every note left the room with a name on it.", { style: s("Lead 17"), color: "onPaper", name: "Result body" });
+    const chart = k.stack(results, { gap: 10, name: "Chart" });
+    const chartW = CONTENT.desktop - 440 - 40;
+    const area = k.stack(chart, { height: CHART.h, name: "Chart area" });
+    const cp = chartPaths(chartW, CHART.h);
+    marker(k, area, chartW, CHART.h, cp.axes, { name: "Chart axes", color: "text", width: 3, absolute: { x: 0, y: 0 } });
+    marker(k, area, chartW, CHART.h, cp.levels, { name: "Chart levels", color: "text", width: 1.5, opacity: 0.25, absolute: { x: 0, y: 0 } });
+    const line = marker(k, area, chartW, CHART.h, [cp.line], { name: "Chart line", color: "primary", width: 6, absolute: { x: 0, y: 0 } });
+    const ring = marker(k, area, 64, 64, scribbleCircle(64, 64, { seed: 44, turns: 1.25 }), { name: "Chart ring", color: "red", width: 5, absolute: { x: cp.end.x - 32, y: cp.end.y - 32 } });
+    k.text(area, "moved to Plotline", { style: s("Ui 15"), color: "text", autoWidth: true, name: "Chart note", absolute: { x: cp.at5.x - 150, y: 6 } });
+    const noteArrow = arrowAt(k, area, { x: cp.at5.x - 60, y: 34 }, { x: cp.at5.x - 6, y: cp.at5.y - 14 }, { name: "Chart note arrow", bend: -0.3, seed: 45, width: 3.5, head: 14, color: "text" });
+    const axis = k.stack(chart, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Chart axis" });
+    for (const a of ["Week 1", "Week 6", "Week 12"]) k.text(axis, a, { style: s("Small 14"), color: "onPaper", autoWidth: true, name: "Axis label" });
+    const feats = k.stack(sheet, { gap: 32, name: "Features" });
+    const fHead = k.stack(feats, { gap: 4, name: "Features head" });
+    k.text(fHead, "Everything else on the board", { style: s("Section 44"), color: "text", name: "Features title" });
+    const fLine = marker(k, fHead, 300, 20, underline(300, 20, { seed: 51 }), { name: "Features line", color: "primary", width: 6 });
+    const grid = k.stack(feats, { direction: "HORIZONTAL", gap: 20, wrap: true, name: "Feature grid" });
+    const FEATS = [
+      ["Dot vote", "Everyone gets three dots. The board re-sorts itself by what the team actually wants.", "mint", doodleDots()],
+      ["Owners and dates", "Tidy up suggests who and when from your team's calendar. Confirm with one tap.", "sticky", tick(40)],
+      ["Timeline view", "Flip any board into weeks to see what lands when, and drag a note to move it.", "peach", doodleTimeline()],
+      ["Draw anywhere", "Pen, highlighter and arrows that snap to stickies, on a laptop or a tablet, even offline.", "sticky", sparkle(40)]
+    ];
+    FEATS.forEach(([title, body, color, doodle], i) => {
+      const n = k.stack(grid, { width: 285, fill: color, padding: 22, gap: 12, effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.16 }, offset: { x: 0, y: 6 }, blur: 10, spread: 0, visible: true }], name: "Feature note" });
+      k.patch(n, { rotation: [-1.6, 1.2, -0.9, 1.7][i] });
+      marker(k, n, 40, 40, doodle, { name: "Feature doodle", color: i % 2 ? "red" : "primary", width: 4 });
+      k.text(n, title, { style: s("Sticky 22"), color: "stickyInk", name: "Feature title" });
+      k.text(n, body, { style: s("Body 16"), color: "stickyInk", name: "Feature body" });
+    });
+    const quote = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Quote" });
+    const photo = k.stack(quote, { width: 280, height: 320, fill: "card", padding: 14, effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.14 }, offset: { x: 0, y: 8 }, blur: 16, spread: 0, visible: true }], name: "Photo card" });
+    portraitSlot(k, photo, 252, 252, { radius: 4, ground: "peach", skin: "sticky", top: "primary", halo: "mint", name: "Portrait", photo: "Customer photo" });
+    k.rect(photo, 110, 30, k.tint("hi", 0.8), { name: "Tape", absolute: { x: 85, y: -12 } });
+    const qMain = k.stack(quote, { gap: 22, name: "Quote main" });
+    k.text(qMain, '"Our Monday retro used to end with forty stickies and no plan. Now Tidy up hands out the follow-ups before anyone has left the room."', { style: s("Quote 30"), color: "text", name: "Quote words" });
+    const who = k.stack(qMain, { direction: "HORIZONTAL", gap: 40, align: "CENTER", wrap: true, name: "Quote foot" });
+    const name = k.stack(who, { gap: 2, width: "HUG", name: "Quote who" });
+    k.text(name, "Priya Raman", { style: s("Ui 15"), color: "text", autoWidth: true, name: "Quote name" });
+    k.text(name, "Engineering manager, Fernhill Bikes", { style: s("Small 14"), color: "onPaper", autoWidth: true, name: "Quote role" });
+    const mins = k.stack(who, { direction: "HORIZONTAL", gap: 12, width: "HUG", align: "CENTER", name: "Quote stat" });
+    k.text(mins, `${PLOTLINE.after} min`, { style: s("Section 34"), color: "text", width: 120, name: "Minutes figure" });
+    k.text(mins, `retro follow-up,
+down from ${PLOTLINE.before}`, { style: s("Small 14"), color: "onPaper", autoWidth: true, name: "Minutes label" });
+    const plans = k.stack(sheet, { gap: 24, name: "Plans" });
+    k.text(plans, "Free for small boards. Paid when the team grows.", { style: s("Section 34"), color: "text", name: "Plans title" });
+    const strip = k.stack(plans, { direction: "HORIZONTAL", gap: 16, name: "Plan strip" });
+    let planRing = "";
+    for (const [plan2, price, line2] of [["Free", "$0", "3 boards, every feature, up to 5 editors"], ["Team", `$${PLOTLINE.team}`, "an editor a month, unlimited boards"], ["Business", `$${PLOTLINE.business}`, "an editor a month, plus SSO and audit log"]]) {
+      const c = k.stack(strip, { gap: 8, height: 150, padding: { top: 22, right: 24, bottom: 22, left: 24 }, name: "Plan cell" });
+      k.text(c, plan2, { style: s("Head 17"), color: "text", name: "Plan name" });
+      k.text(c, price, { style: s("Price 52"), color: "text", name: "Plan price" });
+      k.text(c, line2, { style: s("Small 14"), color: "onPaper", name: "Plan line" });
+      outline(k, c, PLAN_W, 150, { seed: plan2.length * 7, width: 2.5, name: "Plan outline" });
+      if (plan2 === "Team") planRing = marker(k, c, 96, 64, scribbleCircle(96, 64, { seed: 47, turns: 1.2 }), { name: "Plan ring", color: "red", width: 4.5, absolute: { x: 12, y: 46 } });
+    }
+    k.instance(plans, "Button quiet", { Label: "Compare plans" }, { name: "Plans link" });
+    const closing = k.stack(sheet, { gap: 28, name: "Close" });
+    k.text(closing, "Plan it before you\nleave the room.", { style: s("Hand 120"), color: "text", name: "Close title" });
+    const closeRow = k.stack(closing, { direction: "HORIZONTAL", gap: 20, align: "CENTER", wrap: true, name: "Close row" });
+    k.instance(closeRow, "Button", { Label: "Start a free board" }, { name: "Close button" });
+    k.text(closeRow, "Bring your stickies from Miro, FigJam or a photo of the wall.", { style: s("Body 16"), color: "onPaper", autoWidth: true, name: "Close line" });
+    footer(k, sheet, {
+      about: PLOTLINE.pitch,
+      legal: "\xA9 2026 {{brand.name}} Labs. Made in Bristol and Lisbon.",
+      columns: [["Product", ["Tidy up", "Dot vote", "Timeline", "Templates"]], ["Company", ["Customers", "Pricing", "Careers", "Press kit"]], ["Help", ["Guides", "Status", "Security"]]],
+      brandStyle: s("Brand 20"),
+      headStyle: s("Label 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "text"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    heroLoop(k, sheet, w.win, b.notes, b.geo, p);
+    draw(k, k.named(w.win, "Window outline")[0], 0, 700);
+    draw(k, headLine, 700, 500);
+    draw(k, heroArrow, 1e3, 600);
+    draw(k, bigArrow, 800, 900);
+    draw(k, line, 900, 2600);
+    draw(k, ring, 3500, 600);
+    draw(k, noteArrow, 1500, 400);
+    if (planRing) draw(k, planRing, 2e3, 600);
+    draw(k, fLine, 600, 500);
+    placeHeadLine(k, headline, headLine);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Wall head", "Wall row", "Results row", "Quote", "Footer columns", "Plan strip"],
+      restyle: { ...WEB_STEPS },
+      hide: { tablet: ["Hero arrow"], mobile: ["Nav links", "Hero arrow", "Close line"] },
+      gap: { tablet: 96, mobile: 72 },
+      tweak: (kit, id, size) => {
+        redots(kit, id, 32, 3);
+        const cw = CONTENT[size], narrow = size === "tablet" || size === "mobile";
+        const side = narrow ? cw : size === "laptop" ? 470 : 540;
+        for (const n of kit.named(id, "Copy")) kit.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: side });
+        const hz = HERO[size];
+        refitWindow(kit, id, "Hero window", hz.w, hz.h, 5);
+        refitBoard(kit, id, "Board", hz.w, hz.h - BAR, hz.geo, TIMING);
+        for (const win of kit.named(id, "Hero window")) for (const pid of kit.named(win, "Pen")) penKeys(kit, id, win, pid, hz.w, hz.h);
+        for (const t of kit.named(id, "Headline")) for (const l of kit.named(id, "Headline line")) placeHeadLine(kit, t, l, narrow ? cw : side);
+        const wallScale = size === "mobile" ? 0.72 : size === "laptop" ? 0.92 : 1;
+        reboard(kit, id, "Heap", wallScale);
+        reboard(kit, id, "Plan", wallScale);
+        if (narrow) for (const n of kit.named(id, "Wall row")) kit.patch(n, { counterAxisAlignItems: "CENTER", itemSpacing: 8 });
+        if (narrow) for (const n of kit.named(id, "Wall arrow")) kit.patch(n, { height: 230, layoutSizingVertical: "FIXED", primaryAxisAlignItems: "CENTER" });
+        if (narrow) for (const n of kit.named(id, "Wall arrow line")) kit.patch(n, { rotation: 90 });
+        if (narrow) for (const n of kit.named(id, "Wall arrow label")) kit.patch(n, { visible: false });
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Window title")) kit.patch(n, { characters: "Week 41" });
+          for (const strip2 of kit.named(id, "Marquee")) kit.node(strip2).childIds.forEach((c, i, all) => {
+            keyWordmark(kit, c, i, all.length, 180, DURATION);
+            for (const t of kit.named(c, "Wordmark name")) kit.restyle(t, s("Ui 15"));
+          });
+          for (const bar of kit.named(id, "Nav")) for (const n of kit.named(bar, "Brand name")) kit.patch(n, { visible: true });
+        }
+        for (const n of kit.named(id, "Wall title")) kit.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: size === "laptop" ? 520 : 560 });
+        const rSide = narrow ? cw : size === "laptop" ? 420 : 440;
+        for (const n of kit.named(id, "Results copy")) kit.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: rSide });
+        const chW = narrow ? cw : cw - rSide - 40, chH = size === "mobile" ? 220 : CHART.h;
+        const q = chartPaths(chW, chH);
+        for (const n of kit.named(id, "Chart area")) kit.patch(n, { height: chH });
+        for (const n of kit.named(id, "Chart axes")) kit.patch(n, { width: chW, height: chH, paths: q.axes });
+        for (const n of kit.named(id, "Chart levels")) kit.patch(n, { width: chW, height: chH, paths: q.levels });
+        for (const n of kit.named(id, "Chart line")) kit.patch(n, { width: chW, height: chH, paths: [q.line] });
+        for (const n of kit.named(id, "Chart ring")) kit.patch(n, { x: q.end.x - 32, y: q.end.y - 32 });
+        for (const n of kit.named(id, "Chart note")) kit.patch(n, { x: Math.max(0, q.at5.x - 150) });
+        for (const n of kit.named(id, "Chart note arrow")) {
+          const a = arrow({ x: q.at5.x - 60, y: 34 }, { x: q.at5.x - 6, y: q.at5.y - 14 }, { bend: -0.3, seed: 45, head: 14 });
+          kit.patch(n, { x: a.x, y: a.y, width: a.w, height: a.h, paths: a.paths });
+        }
+        columns(kit, id, "Feature note", size === "mobile" ? 1 : size === "tablet" ? 2 : 4, 20, cw);
+        for (const n of kit.named(id, "Quote words")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        if (size === "laptop") for (const n of kit.named(id, "Hero arrow")) kit.patch(n, { x: kit.node(n).x - 70 });
+        if (size === "tablet") compactNav(kit, id, ["Customers", "Sign in"], 22);
+        const pw = narrow ? cw : Math.floor((cw - 32) / 3);
+        kit.named(id, "Plan outline").forEach((n, i) => kit.patch(n, { width: pw, paths: wobblyBox(pw, 150, { seed: [4, 4, 8][i] * 7 }) }));
+      }
+    });
+    return k.finish();
+  }
+});
+function heroLoop(k, sheet, win, notes, g, p) {
+  tidyKeys(k, notes, g, TIMING);
+  for (const id of k.named(win, "Column line")) draw(k, id, TIDY + 400, 400, { out: UNTIDY - 300, outDuration: 300 });
+  for (const id of k.named(win, "Column head")) k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: TIDY + 300, v: 0, ease: ease.linear }, { t: TIDY + 500, v: 1, ease: ease.hold }, { t: UNTIDY - 200, v: 1, ease: ease.linear }, { t: UNTIDY, v: 0 }]);
+  for (const id of k.named(win, "Note meta")) k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: TIDY + 700, v: 0, ease: ease.linear }, { t: TIDY + 900, v: 1, ease: ease.hold }, { t: UNTIDY - 200, v: 1, ease: ease.linear }, { t: UNTIDY, v: 0 }]);
+  penKeys(k, sheet, win, p.arrow, HERO.desktop.w, HERO.desktop.h, p.ring);
+  void sheet;
+}
+function penKeys(k, root, win, penId, w, h, ringId) {
+  const ring = ringId ?? k.named(win, "Tap ring")[0];
+  const rest = { x: w - 70, y: h - 60 }, button = { x: w - 70, y: 34 };
+  k.patch(penId, { x: rest.x, y: rest.y });
+  if (ring) {
+    const r = k.node(ring);
+    k.patch(ring, { x: rest.x - r.width / 2, y: rest.y - r.height / 2 });
+  }
+  const p = { arrow: penId, ring };
+  const d = { dx: button.x - rest.x, dy: button.y - rest.y };
+  glide(k, p, [{ t: 0, dx: 0, dy: 0 }, { t: 500, dx: 0, dy: 0 }, { t: TAP - 100, ...d }, { t: TIDY + 300, ...d }, { t: TIDY + 1100, dx: 0, dy: 0 }]);
+  clicks(k, p, [TAP]);
+  void root;
+}
+function placeHeadLine(k, headline, lineId, width) {
+  const n = k.node(headline);
+  const lines = HEADLINE.split("\n");
+  const m = (str) => measureTextWidth(str, n.fontFamily, n.fontWeight, n.fontSize, n.fontStyle, n.letterSpacing ?? 0);
+  const lh = typeof n.lineHeight === "number" ? n.lineHeight : n.fontSize * 1.1;
+  const room = width ?? n.width;
+  if (m(lines[0]) > room || m(lines[1]) > room) {
+    k.patch(lineId, { visible: false });
+    return;
+  }
+  const x = m("sorted into "), wd = Math.round(m("a plan.") + 8);
+  k.patch(lineId, { visible: true, x: Math.round(x - 4), y: Math.round(2 * lh - n.fontSize * 0.12), width: wd, paths: underline(wd, 22, { seed: 12 }) });
+}
+function heapNotes(k, f) {
+  const spots = [
+    [30, 40, -9, "sticky"],
+    [120, 20, 7, "mint"],
+    [230, 50, -4, "peach"],
+    [320, 26, 11, "sticky"],
+    [60, 140, 6, "peach"],
+    [170, 120, -12, "sticky"],
+    [270, 150, 5, "mint"],
+    [350, 130, -7, "peach"],
+    [20, 220, -3, "mint"],
+    [140, 210, 9, "sticky"],
+    [250, 225, -8, "sticky"]
+  ];
+  spots.forEach(([x, y, r, c], i) => miniNote(k, f, { s: 76, color: c, x, y, rot: r, seed: 200 + i }));
+}
+function planNotes(k, f) {
+  const cols = [4, 4, 3];
+  cols.forEach((n, c) => {
+    const x = 18 + c * 142;
+    marker(k, f, 110, 12, underline(110, 12, { seed: 300 + c, flick: false }), { name: "Plan head", color: "primary", width: 5, absolute: { x, y: 14 } });
+    for (let r = 0; r < n; r++) miniNote(k, f, { s: 60, color: ["sticky", "mint", "peach"][(c + r) % 3], x: x + r % 2 * 66, y: 44 + Math.floor(r / 2) * 70, seed: 400 + c * 10 + r, name: "Plan note" });
+  });
+}
+function chartPaths(w, h) {
+  const lo = 30, hi = 95;
+  const pt = (i, v) => ({ x: Math.round(24 + i / (WEEKS.length - 1) * (w - 64)), y: Math.round(h - 16 - (v - lo) / (hi - lo) * (h - 40)) });
+  const pts = WEEKS.map((v, i) => pt(i, v));
+  const axes = [
+    ...underline(w, 16, { seed: 61, flick: false }).map((p) => ({ ...p, points: p.points.map((q) => ({ ...q, y: q.y + h - 16, ...q.handleIn ? { handleIn: { x: q.handleIn.x, y: q.handleIn.y + h - 16 } } : {}, ...q.handleOut ? { handleOut: { x: q.handleOut.x, y: q.handleOut.y + h - 16 } } : {} })) })),
+    { closed: false, points: [{ x: 8, y: 6 }, { x: 10, y: h - 8 }] }
+  ];
+  const levels = [50, 70, 90].map((v) => ({ closed: false, points: [{ x: 18, y: pt(0, v).y }, { x: w - 20, y: pt(0, v).y + 2 }] }));
+  const line = { closed: false, points: pts.map((q, i) => {
+    const a = pts[Math.max(0, i - 1)], c = pts[Math.min(pts.length - 1, i + 1)], tx = (c.x - a.x) * 0.18, ty = (c.y - a.y) * 0.18;
+    return { ...q, handleIn: { x: q.x - tx, y: q.y - ty }, handleOut: { x: q.x + tx, y: q.y + ty } };
+  }) };
+  return { axes, levels, line, end: pts[pts.length - 1], at5: pts[5] };
+}
+function doodleDots() {
+  const ring = (cx, cy) => scribbleCircle(12, 12, { seed: cx, turns: 1.4, inset: 1 }).map((p) => ({ ...p, points: p.points.map((q) => ({ ...q, x: q.x + cx, y: q.y + cy, ...q.handleIn ? { handleIn: { x: q.handleIn.x + cx, y: q.handleIn.y + cy } } : {}, ...q.handleOut ? { handleOut: { x: q.handleOut.x + cx, y: q.handleOut.y + cy } } : {} })) }));
+  return [...ring(2, 22), ...ring(14, 6), ...ring(26, 22)];
+}
+function doodleTimeline() {
+  return boxPaths([{ closed: false, points: [{ x: 2, y: 22 }, { x: 38, y: 20 }] }, ...[8, 20, 32].map((x) => ({ closed: false, points: [{ x, y: 12 }, { x: x + 1, y: 30 }] }))]).paths;
+}
+
+export {
+  style_sketch_landing_default
+};

package/dist/chunks/chunk-WSI6NQ34.js

@@ -0,0 +1,220 @@
+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 {
+  COMIC,
+  balloon,
+  bandDots,
+  benday,
+  captionBox,
+  comicBrand,
+  hero,
+  impact,
+  inkShadow,
+  issueBox,
+  panel,
+  rays,
+  restage,
+  stage,
+  streaks,
+  villain,
+  windowCard
+} from "./chunk-GCIMDU7R.js";
+import {
+  background,
+  refill
+} from "./chunk-CHL5BU5W.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  sizeOf
+} from "./chunk-QLV6445V.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} 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/motion/comic-book-issue-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("launch", 32);
+var beat = MUSIC.beat;
+var DURATION = MUSIC.duration;
+var VIEW = { w: 800, h: 620 };
+var PAGE = { w: VIEW.w * 2, h: VIEW.h * 2 };
+var P1 = { x: 0, y: 0, w: 780, h: 600 };
+var P2 = { x: 820, y: 0, w: 780, h: 600 };
+var P3 = { x: 0, y: 640, w: 1600, h: 600 };
+var look = (x, y, zoom) => ({ zoom, tx: -zoom * (x - PAGE.w / 2), ty: -zoom * (y - PAGE.h / 2) });
+var whip = ease.inOut("expo");
+var SHOTS = [
+  { t: 0, at: look(390, 300, 1), ease: ease.linear },
+  { t: beat(8), at: look(390, 300, 1.08), ease: whip },
+  { t: beat(9), at: look(1210, 300, 1), ease: ease.linear },
+  { t: beat(16), at: look(1210, 300, 1.08), ease: whip },
+  { t: beat(17), at: look(800, 940, 0.74), ease: ease.linear },
+  { t: beat(23), at: look(800, 940, 0.8), ease: ease.inOut("cubic") },
+  { t: beat(25), at: look(800, 620, 0.5) }
+];
+var swaps = [
+  { layer: "Caption", words: ["3:07 a.m. A deploy just broke checkout.", "Backstop sees the error rate jump.", "It rolls the deploy back in 9 seconds.", "You sleep. Customers pay."], at: beat(1), hold: 1900, stagger: 60, in: 350, out: 250, unit: "word", rise: 24 }
+];
+var cues = [
+  { layer: "Hook", preset: "pop-in", at: 0, params: { duration: 260, amount: 1.25 } },
+  { layer: "Head", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Panel one", preset: "pop-in", at: 120, params: { duration: 300, amount: 1.3 } },
+  { layer: "Narration", preset: "pop-in", at: beat(1) - 150, params: { duration: 280 } },
+  { layer: "Bug", preset: "pop-in", at: beat(2), params: { duration: 320 } },
+  { layer: "Bug says", preset: "pop-in", at: beat(3), params: { duration: 260 } },
+  { layer: "Crash", preset: "pop-in", at: beat(5), params: { duration: 240, amount: 1.6 } },
+  { layer: "Stage", preset: "camera-shake", at: beat(5), params: { duration: 400, distance: 14 } },
+  { layer: "Panel two", preset: "pop-in", at: beat(9), params: { duration: 300, amount: 1.3 } },
+  { layer: "Hero", preset: "slide-in", at: beat(10), params: { duration: 420, direction: "left" } },
+  { layer: "Hero says", preset: "pop-in", at: beat(11), params: { duration: 260 } },
+  { layer: "Spotted", preset: "pop-in", at: beat(13), params: { duration: 260 } },
+  { layer: "Panel three", preset: "pop-in", at: beat(17), params: { duration: 300, amount: 1.3 } },
+  { layer: "Rolled back", preset: "pop-in", at: beat(18), params: { duration: 260, amount: 1.7 } },
+  { layer: "Stage", preset: "camera-shake", at: beat(18), params: { duration: 500, distance: 22 } },
+  { layer: "Restored", preset: "pop-in", at: beat(20), params: { duration: 260 } },
+  { layer: "Rolled back", preset: "pulse", at: beat(22), params: { duration: 600, amount: 0.06 } },
+  { layer: "Call", preset: "pop-in", at: beat(26), params: { duration: 320 } },
+  { layer: "Site box", preset: "pop-in", at: beat(27), params: { duration: 300 } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 600, amount: 0.05 } }
+];
+function furnish(k, sheet) {
+  const { w, h } = sizeOf(k, sheet);
+  const pad = k.node(sheet).padding;
+  refill(k, sheet);
+  bandDots(k, sheet, "Top dots", { x: 0, y: 0, w, h: pad.top - 16 });
+  bandDots(k, sheet, "Foot dots", { x: 0, y: h - pad.bottom + 16, w, h: pad.bottom - 16 });
+}
+var comic_book_issue_reel_default = defineTemplate({
+  id: "motion-comic-book-issue-reel",
+  meta: {
+    name: "Comic launch reel",
+    description: 'A 16-second feature launch told as issue no. 12 of a comic: the complaint lands on the first frame, a panel slams in with the bug that broke checkout, the camera whips across the page to the hero on focus lines and down to a full-width hit with "ROLLED BACK!" in an impact burst, then pulls out to the whole page. Speech balloons pop, a narrator\u2019s box carries burned-in captions, and every slam lands on a beat of a 128 BPM loop (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts',
+    category: "animation",
+    tags: ["animation", "comic book", "panels", "speech balloon", "halftone", "ben-day dots", "speed lines", "impact", "launch", "feature", "saas", "devtools", "reel", "captions", "music", "audio"],
+    platforms: ["instagram", "tiktok", "youtube", "x"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement", "comic"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Comic launch reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    comicBrand(k);
+    k.textStyle("Masthead 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 1.5, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Issue 26", { size: 26, fontWeight: 900, letterSpacing: -0.5, lineHeight: 28 });
+    k.textStyle("Issue small 13", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 0.5, lineHeight: 18 });
+    k.textStyle("Hook 92", { size: 92, fontWeight: 900, letterSpacing: -4, lineHeight: 86 });
+    k.textStyle("Hook 66", { size: 66, fontWeight: 900, letterSpacing: -2.8, lineHeight: 62 });
+    k.textStyle("Balloon 38", { size: 38, fontWeight: 800, letterSpacing: -0.5, lineHeight: 42, textAlign: "CENTER" });
+    k.textStyle("Box 26", { size: 26, fontWeight: 800, letterSpacing: 0.4, lineHeight: 32 });
+    k.textStyle("Window 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Error 110", { size: 110, fontWeight: 900, letterSpacing: -5, lineHeight: 100 });
+    k.textStyle("Sound 72", { size: 72, fontWeight: 900, letterSpacing: -2.5, lineHeight: 70, textAlign: "CENTER" });
+    k.textStyle("Sound 150", { size: 150, fontWeight: 900, letterSpacing: -6, lineHeight: 132, textAlign: "CENTER" });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Caption 26", { size: 26, fontWeight: 800, lineHeight: 34 });
+    k.textStyle("Button 30", { size: 30, fontWeight: 900, lineHeight: 38 });
+    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 30 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "READ ISSUE NO. 12", pad: [18, 30], radius: 0 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Launch reel");
+    k.flowSheet(sheet, 20, verticalPadding(), "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    background(k, sheet, "paper");
+    benday(k, sheet, 1080, 620, { role: "accent", dot: 30, angle: 270, from: 0.05, to: 0.8, name: "Top dots" });
+    benday(k, sheet, 1080, 520, { role: "primary", dot: 30, angle: 90, from: 0.02, to: 0.62, name: "Foot dots" });
+    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Head" });
+    issueBox(k, head, { number: "Issue 26", small: "Issue small 13", price: "OCT \xB7 FREE" });
+    k.text(head, "{{brand.name}} \xB7 the auto-rollback issue", { style: "Masthead 20", color: "text", name: "Masthead" });
+    k.text(sheet, "A DEPLOY JUST BROKE CHECKOUT.", { style: "Hook 92", color: "text", name: "Hook", effects: inkShadow(k, 6, "primary") });
+    const row = k.stack(sheet, { align: "CENTER", name: "Stage row" });
+    const { art } = stage(k, row, VIEW.w, VIEW.h, { clip: true, fill: "card", stroke: { color: "text", width: 8, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 12, "text") });
+    const cam = k.frame(art, { x: -VIEW.w / 2, y: -VIEW.h / 2, width: PAGE.w, height: PAGE.h }, { name: "Camera" });
+    panel(k, cam, P1, "night", (p) => {
+      benday(k, p, P1.w, P1.h, { role: "nightDeep", dot: 18, angle: 90, from: 0.1, to: 0.8 });
+      rays(k, p, P1.w, P1.h, { cx: 560, cy: 360, role: "nightDeep", n: 22, inner: 200, seed: 4 });
+      windowCard(k, p, 330, "checkout", (body) => {
+        k.text(body, "500", { style: "Error 110", color: "primary", name: "Error code" });
+        k.text(body, "Payment failed. Try again later.", { style: "Window 20", color: "onCard", name: "Error line" });
+      }, { style: "Window 20", name: "Checkout window", absolute: { x: 36, y: 270 }, deg: -4 });
+      villain(k, p, 440, { name: "Bug", absolute: { x: 340, y: 170 }, deg: 8 });
+      captionBox(k, p, "3:07 a.m. \xB7 production", { style: "Box 26", name: "Clock", absolute: { x: 26, y: 26 } });
+      balloon(k, p, "I ate your checkout!", { style: "Balloon 38", width: 330, tail: "left", name: "Bug says", absolute: { x: 420, y: 28 } });
+      impact(k, p, 250, 190, "Crash!", { style: "Sound 72", fill: "primary", ink: "onPrimary", deg: -10, name: "Crash", seed: 5, absolute: { x: 30, y: 96 } });
+    }, { name: "Panel one" });
+    panel(k, cam, P2, "sky", (p) => {
+      rays(k, p, P2.w, P2.h, { cx: 300, cy: 330, role: "skyDeep", n: 34, inner: 230, seed: 8 });
+      benday(k, p, P2.w, 260, { role: "dot", dot: 16, angle: 270, from: 0, to: 0.5, opacity: 0.35 });
+      streaks(k, p, 360, 300, { role: "card", n: 9, seed: 2, x: 0, y: 250 });
+      hero(k, p, 520, { name: "Hero", absolute: { x: 60, y: 96 }, deg: 6 });
+      balloon(k, p, "Not on my watch.", { style: "Balloon 38", width: 300, tail: "left", name: "Hero says", absolute: { x: 452, y: 34 } });
+      captionBox(k, p, "Error rate up 40\xD7.\nSpotted in 4 seconds.", { style: "Box 26", width: 330, name: "Spotted", absolute: { x: 424, y: 470 } });
+    }, { name: "Panel two" });
+    panel(k, cam, P3, "accent", (p) => {
+      rays(k, p, P3.w, P3.h, { cx: 800, cy: 300, role: "primary", n: 44, inner: 300, seed: 12, thick: 0.9 });
+      benday(k, p, 520, P3.h, { role: "primary", dot: 20, angle: 180, from: 0, to: 0.7 });
+      hero(k, p, 560, { name: "Hero hits", absolute: { x: 40, y: 40 }, deg: 14 });
+      villain(k, p, 300, { name: "Bug out", absolute: { x: 1270, y: 30 }, deg: 152 });
+      streaks(k, p, 330, 200, { role: "ink", n: 7, seed: 9, dir: -1, x: 1010, y: 190 });
+      impact(k, p, 820, 500, "Rolled back!", { style: "Sound 150", fill: "primary", ink: "onPrimary", deg: -5, name: "Rolled back", seed: 21, points: 18, depth: 0.26, shadow: 16, line: 8, absolute: { x: 420, y: 50 } });
+      captionBox(k, p, "v4.11 restored in 9 seconds. Nobody was paged.", { style: "Box 26", width: 470, name: "Restored", absolute: { x: 1090, y: 470 } });
+    }, { name: "Panel three" });
+    k.patch(cam, { scaleX: 0.5, scaleY: 0.5 });
+    k.animate(cam, "scaleX", SHOTS.map((s) => ({ t: s.t, v: s.at.zoom, ...s.ease ? { ease: s.ease } : {} })));
+    k.animate(cam, "scaleY", SHOTS.map((s) => ({ t: s.t, v: s.at.zoom, ...s.ease ? { ease: s.ease } : {} })));
+    k.animate(cam, "translateX", SHOTS.map((s) => ({ t: s.t, v: s.at.tx, ...s.ease ? { ease: s.ease } : {} })));
+    k.animate(cam, "translateY", SHOTS.map((s) => ({ t: s.t, v: s.at.ty, ...s.ease ? { ease: s.ease } : {} })));
+    const box = k.stack(sheet, { height: 116, justify: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "accent", stroke: { color: "text", width: 5, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 8, "text"), name: "Narration" });
+    k.text(box, swaps[0].words[0], { style: "Caption 32", color: "onAccent", name: "Caption" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Button", { Label: `READ ISSUE NO. ${COMIC.issue}` }, { name: "Call" });
+    k.text(k.stack(foot, { direction: "HORIZONTAL", width: "HUG", fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, padding: { top: 16, right: 18, bottom: 16, left: 18 }, name: "Site box" }), "{{brand.site}}", { style: "Site 24", color: "onCard", autoWidth: true, name: "Site" });
+    furnish(k, sheet);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const cut = (scale, hook, caption) => (kit, id) => {
+      restage(kit, id, VIEW.w, VIEW.h, scale);
+      if (hook) for (const n of kit.named(id, "Hook")) kit.restyle(n, hook);
+      if (caption) {
+        for (const c of kit.named(id, "Caption")) kit.restyle(c, caption);
+        for (const b of kit.named(id, "Narration")) kit.patch(b, { height: 92 });
+      }
+      furnish(kit, id);
+    };
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, { post: cut(0.92, "Hook 66", "Caption 26"), portrait: cut(1.17) }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  comic_book_issue_reel_default
+};