@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-FB3SYMQT.js

@@ -0,0 +1,137 @@
+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 {
+  androidVariant,
+  screen,
+  statusBar
+} from "./chunk-R3ZCDUHV.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/app/success-confetti.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Badge", preset: "pop-in", at: 0, params: { duration: 600 } },
+  { layer: "Ring", preset: "scale-in", at: 100, params: { duration: 700 } },
+  { layer: "Ring", preset: "fade-out", at: 800, params: { duration: 500 } },
+  { layer: "Title", preset: "rise-in", at: 450 },
+  { layer: "Body", preset: "rise-in", at: 600 },
+  { layer: "Details", preset: "rise-in", at: 750 },
+  { layer: ["Primary action", "Quiet action"], preset: "rise-in", at: 900, stagger: { delay: 100 } }
+];
+var CONFETTI = 28;
+var BURST = { at: 120, out: 700, fall: 2600 };
+var rand = (i, salt) => {
+  const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453;
+  return x - Math.floor(x);
+};
+var success_confetti_default = defineTemplate({
+  id: "app-success-confetti",
+  meta: {
+    name: "Success with confetti",
+    description: "A booking-confirmed screen that celebrates: the tick pops with a ripple, confetti bursts out and drifts down, and the details and next steps rise in \u2014 iPhone with an Android copy",
+    category: "app",
+    tags: ["animation", "success", "confetti", "confirmation", "celebration", "booking", "app", "mobile", "ios", "android"],
+    platforms: ["ios", "android"],
+    formats: ["screen"],
+    useCases: ["announcement", "event"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Success with confetti", preset("iphone-17"));
+    k.brand({ paper: "#FBF8F4", text: "#1F1A2E", onPaper: "#5B5568", primary: "#6A4FC7", onPrimary: "#FFFFFF", accent: "#F2A93B", card: "#FFFFFF", onCard: "#1F1A2E", cardMuted: "#696377", pink: "#E86A92", mint: "#4FB59A", sky: "#5B9BE6" }, { name: "Stillpoint Yoga" });
+    k.textStyle("Status 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Tick 52", { size: 52, fontWeight: 800, lineHeight: 56, textAlign: "CENTER" });
+    k.textStyle("Title 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 40, textAlign: "CENTER" });
+    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 25, textAlign: "CENTER" });
+    k.textStyle("Label 13", { size: 13, fontWeight: 600, letterSpacing: 0.3, lineHeight: 18 });
+    k.textStyle("Value 16", { size: 16, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Button 17", { size: 17, fontWeight: 700, lineHeight: 24 });
+    k.component("Detail", { gap: 2, width: 300, props: { Label: "When", Value: "Saturday 4 October, 9:00\u201310:15" } }, (id) => {
+      k.propText(id, "Label", { style: "Label 13", color: "cardMuted" });
+      k.propText(id, "Value", { style: "Value 16", color: "onCard" });
+    });
+    const btn = { direction: "HORIZONTAL", width: "HUG", radius: 14, align: "CENTER", padding: { top: 16, right: 28, bottom: 16, left: 28 } };
+    k.component("Button", { ...btn, fill: "primary", props: { Label: "Add to calendar" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 17", color: "onPrimary", autoWidth: true });
+    });
+    k.component("Button quiet", { ...btn, props: { Label: "View my bookings" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 17", color: "text", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Booked");
+    screen(k, sheet, { gap: 20, align: "CENTER", justify: "SPACE_BETWEEN" });
+    k.timeline(sheet, { duration: 4e3, fps: 30 });
+    statusBar(k, sheet, { style: "Status 15" });
+    const hero = k.stack(sheet, { gap: 18, align: "CENTER", name: "Hero" });
+    const mark = k.stack(hero, { width: "HUG", align: "CENTER", padding: { top: 24, right: 0, bottom: 8, left: 0 }, name: "Mark" });
+    k.ellipse(mark, 150, [], { name: "Ring", stroke: { color: "accent", width: 3 }, absolute: { x: -19, y: 5 } });
+    const badge = k.stack(mark, { direction: "HORIZONTAL", width: 112, height: 112, radius: 56, fill: "primary", align: "CENTER", justify: "CENTER", name: "Badge" });
+    k.text(badge, "\u2714", { style: "Tick 52", color: "onPrimary", autoWidth: true, name: "Tick" });
+    k.text(hero, "You\u2019re booked!", { style: "Title 34", color: "text", name: "Title" });
+    k.text(hero, "Saturday Flow with Maya is waiting for you. We\u2019ve sent the details to your email.", { style: "Body 17", color: "onPaper", name: "Body" });
+    const details = k.stack(hero, { gap: 14, fill: "card", radius: 18, padding: 20, name: "Details" });
+    for (const [l, v] of [["When", "Saturday 4 October, 9:00\u201310:15"], ["Where", "Studio 2, 18 Alder Lane"], ["Teacher", "Maya Lindqvist"], ["Bring", "A mat and water \u2014 towels are on us"]]) k.instance(details, "Detail", { Label: l, Value: v }, { name: "Detail", width: "FILL" });
+    const actions = k.stack(sheet, { gap: 8, align: "CENTER", name: "Actions" });
+    k.instance(actions, "Button", { Label: "Add to calendar" }, { name: "Primary action" });
+    k.instance(actions, "Button quiet", { Label: "View my bookings" }, { name: "Quiet action" });
+    k.cues(sheet, cues);
+    const android = k.variants(sheet, [androidVariant("Booked")])[0];
+    k.finish();
+    for (const id of [sheet, android]) confetti(k, id);
+    return k.finish();
+  }
+});
+function confetti(k, sheet) {
+  const badge = k.named(sheet, "Badge")[0];
+  const W = k.node(sheet).width;
+  let bx = 0, by = 0;
+  for (let n = k.node(badge); n.id !== sheet; n = k.node(n.parentId)) {
+    bx += n.x;
+    by += n.y;
+  }
+  const origin = { x: bx + k.node(badge).width / 2, y: by + k.node(badge).height / 2 };
+  const layer = k.stack(sheet, { width: W, height: 560, name: "Confetti", absolute: { x: 0, y: 0 } });
+  const colours = ["accent", "pink", "mint", "sky", "primary"];
+  for (let i = 0; i < CONFETTI; i++) {
+    const round = i % 3 === 0;
+    const w = round ? 10 : 8 + Math.round(rand(i, 1) * 5), h = round ? 10 : 14 + Math.round(rand(i, 2) * 6);
+    const angle = i / CONFETTI * Math.PI * 2 + rand(i, 3) * 0.4;
+    const reach = 110 + rand(i, 4) * 150;
+    const x = Math.round(origin.x + Math.cos(angle) * reach - w / 2), y = Math.round(origin.y + Math.sin(angle) * reach * 0.8 - h / 2);
+    const colour = colours[i % colours.length];
+    const piece = round ? k.ellipse(layer, 10, colour, { name: "Confetti piece", absolute: { x, y } }) : k.rect(layer, w, h, colour, { radius: 2, name: "Confetti piece", absolute: { x, y } });
+    const turn = Math.round(rand(i, 5) * 180 - 90);
+    k.patch(piece, { rotation: turn });
+    const t0 = BURST.at + Math.round(rand(i, 6) * 120);
+    const dx = origin.x - (x + w / 2), dy = origin.y - (y + h / 2);
+    k.animate(piece, "translateX", [{ t: t0, v: dx, ease: ease.out("expo") }, { t: t0 + BURST.out, v: 0, ease: ease.inOut("sine") }, { t: t0 + BURST.fall, v: Math.round((rand(i, 7) - 0.5) * 40) }]);
+    k.animate(piece, "translateY", [{ t: t0, v: dy, ease: ease.out("expo") }, { t: t0 + BURST.out, v: 0, ease: ease.named("quad", "in") }, { t: t0 + BURST.fall, v: 160 + Math.round(rand(i, 8) * 80) }]);
+    k.animate(piece, "opacity", [{ t: t0, v: 0, ease: ease.linear }, { t: t0 + 60, v: 1 }, { t: t0 + 1800, v: 1, ease: ease.out("quad") }, { t: t0 + BURST.fall, v: 0 }]);
+    k.animate(piece, "rotation", [{ t: t0, v: turn, ease: ease.out("cubic") }, { t: t0 + BURST.fall, v: turn + (rand(i, 9) > 0.5 ? 1 : -1) * (180 + Math.round(rand(i, 10) * 360)) }]);
+  }
+}
+
+export {
+  CONFETTI,
+  BURST,
+  success_confetti_default
+};

package/dist/chunks/chunk-FCK5SPO3.js

@@ -0,0 +1,23 @@
+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 {
+  STREET
+} from "./chunk-PDWXGRT4.js";
+import {
+  ticket
+} from "./chunk-ZJZ6HKBP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/app/festival-presale-street-ticket.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_street_ticket_default = ticket(STREET);
+
+export {
+  festival_presale_street_ticket_default
+};

package/dist/chunks/chunk-FE5PINIC.js

@@ -0,0 +1,97 @@
+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 {
+  logoBadge,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/data/countdown-story.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TILES = [
+  { name: "Days", from: 30, to: 12, label: "DAYS" },
+  { name: "Hours", from: 23, to: 6, label: "HOURS" },
+  { name: "Minutes", from: 59, to: 45, label: "MINUTES" }
+];
+var counts = [
+  ...TILES.map((t, i) => ({ layer: `${t.name} figure`, at: 700 + i * 120, duration: 1400, counter: { from: t.from, to: t.to }, ease: ease.out("quart") })),
+  // The seconds tick from 59 to 50, one a second.
+  { layer: "Seconds figure", at: 2e3, duration: 9e3, tick: 1e3, counter: { from: 59, to: 50 } }
+];
+var cues = [
+  { layer: "Logo", preset: "pop-in", at: 0 },
+  { layer: "Eyebrow", preset: "fade-in", at: 100 },
+  { layer: "Title", preset: "words-in", at: 200, params: { duration: 600, amount: 90 } },
+  { layer: "Tile", preset: "pop-in", at: 600, params: { duration: 550 }, stagger: { delay: 120 } },
+  { layer: "Dates", preset: "rise-in", at: 1500 },
+  { layer: "Tickets", preset: "pop-in", at: 1900 },
+  { layer: "Tickets", preset: "pulse", at: 5e3, params: { amount: 0.05 } },
+  { layer: "Tickets", preset: "pulse", at: 9e3, params: { amount: 0.05 } }
+];
+var countdown_story_default = defineTemplate({
+  id: "motion-countdown-story",
+  meta: {
+    name: "Day and hour countdown story",
+    description: "A festival\u2019s \u201Cstarts in\u201D story: days, hours and minutes count down to where the countdown stands and the seconds tick like a clock, over the dates and a ticket button \u2014 12 seconds at 9:16",
+    category: "animation",
+    tags: ["animation", "countdown", "timer", "festival", "music", "event", "story", "counter"],
+    platforms: ["instagram", "tiktok", "facebook", "snapchat"],
+    formats: ["story", "reel"],
+    useCases: ["countdown", "event", "launch"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Day and hour countdown story", preset("ig-story"));
+    k.brand(
+      { paper: "#140B2E", text: "#FFFFFF", onPaper: "#C9BDF2", card: "#2A1B5C", onCard: "#FFFFFF", accent: "#FF4F8B", onAccent: "#140B2E", badge: "#FF4F8B" },
+      { eyebrow: "Meadowlark Festival 2027", title: "The gates open in", dates: "June 18\u201320 \xB7 Hollins Park, Leeds" }
+    );
+    k.textStyle("Eyebrow 34", { size: 34, fontWeight: 800, letterSpacing: 5, lineHeight: 42, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Title 84", { size: 84, fontWeight: 900, letterSpacing: -3, lineHeight: 88, textAlign: "CENTER" });
+    k.textStyle("Figure 132", { size: 132, fontWeight: 900, letterSpacing: -4, lineHeight: 136, textAlign: "CENTER" });
+    k.textStyle("Unit 26", { size: 26, fontWeight: 800, letterSpacing: 4, lineHeight: 32, textAlign: "CENTER" });
+    k.textStyle("Dates 40", { size: 40, fontWeight: 600, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Button 40", { size: 40, fontWeight: 800, lineHeight: 48 });
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: "Button 40", label: "Get your ticket", pad: [24, 56] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 44, verticalPadding(), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 12e3, fps: 30 });
+    logoBadge(k, sheet, { fill: "badge", size: 72, name: "Logo" });
+    k.text(sheet, "{{brand.eyebrow}}", { style: "Eyebrow 34", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.title}}", { style: "Title 84", color: "text", name: "Title" });
+    const grid = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, wrap: true, justify: "CENTER", name: "Countdown" });
+    for (const t of [...TILES, { name: "Seconds", from: 59, to: 50, label: "SECONDS" }]) {
+      const tile = k.stack(grid, { width: 390, fill: "card", radius: 32, padding: { top: 28, right: 16, bottom: 28, left: 16 }, gap: 4, align: "CENTER", name: "Tile" });
+      k.text(tile, String(t.to), { style: "Figure 132", color: "onCard", name: `${t.name} figure` });
+      k.text(tile, t.label, { style: "Unit 26", color: "onCard", name: `${t.name} unit` });
+    }
+    k.text(sheet, "{{brand.dates}}", { style: "Dates 40", color: "onPaper", name: "Dates" });
+    k.instance(sheet, "Button", { Label: "Get your ticket" }, { name: "Tickets" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  countdown_story_default
+};

package/dist/chunks/chunk-FHM2ZUO2.js

@@ -0,0 +1,72 @@
+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 {
+  CHANNEL_COLORS,
+  CHANNEL_FIELDS
+} from "./chunk-FSWD4VT2.js";
+import {
+  outro
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/video/youtube-intro.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Logo badge", preset: "pop-in", at: 100, params: { duration: 600 } },
+  { layer: "Channel name", preset: "rise-in", at: 400, params: { duration: 700 } },
+  { layer: "Rule", preset: "wipe-in", at: 800, params: { duration: 700 } },
+  { layer: "Tagline", preset: "blur-in", at: 1e3, params: { duration: 700 } },
+  { layer: "Logo badge", preset: "pulse", at: 2100, params: { amount: 0.06 } },
+  { layer: "Rule", preset: "wipe-out", at: 4100, params: { duration: 400 } },
+  outro(["Logo badge", "Channel name", "Tagline"], 4100, { preset: "rise-out", gap: 80, duration: 450 })
+];
+var youtube_intro_default = defineTemplate({
+  id: "motion-youtube-intro",
+  meta: {
+    name: "YouTube intro",
+    description: "A five-second channel intro at 1920\xD71080: the logo pops, the channel name rises over a wiping accent rule, the tagline comes into focus, and it all clears for the cut to your video",
+    category: "animation",
+    tags: ["animation", "youtube", "intro", "channel", "video", "opener"],
+    platforms: ["youtube"],
+    formats: ["intro", "video"],
+    useCases: ["brand-intro"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("YouTube intro", preset("video-1080p"));
+    k.brand(CHANNEL_COLORS, CHANNEL_FIELDS);
+    k.textStyle("Channel 132", { size: 132, fontWeight: 900, letterSpacing: -4, lineHeight: 136, textAlign: "CENTER" });
+    k.textStyle("Tagline 44", { size: 44, fontWeight: 500, letterSpacing: 1, lineHeight: 52, textAlign: "CENTER" });
+    k.component("Channel mark", { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 40, padding: 28, props: {} }, (id) => {
+      k.logo(id, 112, 112);
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 28, { top: 96, right: 160, bottom: 96, left: 160 }, "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    k.instance(sheet, "Channel mark", {}, { name: "Logo badge" });
+    k.text(sheet, "{{brand.name}}", { style: "Channel 132", color: "text", name: "Channel name" });
+    k.stack(sheet, { width: 240, height: 12, fill: "primary", radius: 6, clip: true, name: "Rule" });
+    k.text(sheet, "{{brand.tagline}}", { style: "Tagline 44", color: "onPaper", name: "Tagline" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  youtube_intro_default
+};

package/dist/chunks/chunk-FILU522C.js

@@ -0,0 +1,165 @@
+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 {
+  NOTE_SHADOW,
+  PLOTLINE,
+  desk,
+  dots,
+  draw,
+  hand,
+  marker,
+  redots,
+  sans,
+  scribbleCircle,
+  sketchBrand,
+  underline
+} from "./chunk-IBBRZLEN.js";
+import {
+  place
+} from "./chunk-QLV6445V.js";
+import {
+  logoBadge,
+  pill,
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-sketch-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Sketch SaaS milestone post";
+var DURATION = 7e3;
+var OUT = 5900;
+var WEEKS = Array.from({ length: 26 }, (_, i) => Math.round(14 + 58 * (i / 25) ** 1.4 + i * 7 % 5 * 0.5));
+var CHART = { w: 936, h: 280 };
+var cues = [
+  { layer: "Fact", preset: "wobble", at: 3600, stagger: { delay: 200, order: "selection" }, params: { duration: 800, amount: 5 } }
+];
+var counts = [
+  { layer: "Figure", at: 300, duration: 2700, ease: ease.out("cubic"), counter: { from: 0, to: PLOTLINE.boardsN } }
+];
+var style_sketch_milestone_default = defineTemplate({
+  id: "motion-saas-style-sketch-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post drawn with a marker in a dotted notebook: a big round figure counts to 1,000,000 boards tidied while a red loop is scribbled round it, a blue marker line of weekly boards draws itself on hand-drawn axes with its last point circled, and two sticky notes carry the other facts; then the marks rub out and the figure fades, so it loops. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "sketch", "hand-drawn", "whiteboard", "sticky notes", "doodle", "planning", "productivity", "milestone", "metric", "counter", "chart", "stats", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "announcement", "stats"],
+    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;
+    sketchBrand(k, {});
+    hand(k, "Brand 32", 32);
+    sans(k, "Label 24", 24, { weight: 600 });
+    hand(k, "Kicker 34", 34, { lead: 1.15, spacing: -0.015 });
+    hand(k, "Figure 150", 150, { lead: 1, spacing: -0.045 });
+    hand(k, "Fact 40", 40, { lead: 1.05 });
+    sans(k, "Small 22", 22, { weight: 600, lead: 1.3 });
+    pill(k, "Fact note", { fill: "sticky", ink: "stickyInk", style: "Small 22", label: "teams plan on it", pad: [14, 20], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 22, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    dots(k, sheet);
+    desk(k, sheet, { w: 1080, h: 400, absolute: { x: 0, y: 1500 }, sway: 2 / 7, seed: 8 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    const brand = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Lockup" });
+    logoBadge(k, brand, { fill: "primary", size: 30, pad: 7, radius: 10 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 32", color: "text", autoWidth: true, name: "Brand name" });
+    k.text(top, "Milestone, October 2026", { style: "Label 24", color: "onPaper", autoWidth: true, name: "Date" });
+    const head = k.stack(sheet, { gap: 4, name: "Head" });
+    k.text(head, `Boards tidied since ${PLOTLINE.name} ${PLOTLINE.version}`, { style: "Kicker 34", color: "text", name: "Kicker" });
+    const figBox = k.stack(head, { width: "HUG", padding: { top: 10, right: 40, bottom: 10, left: 0 }, name: "Figure box" });
+    k.text(figBox, PLOTLINE.boards, { style: "Figure 150", color: "text", width: 760, name: "Figure" });
+    const ring = marker(k, figBox, 800, 190, scribbleCircle(800, 190, { seed: 91, turns: 1.2, inset: 6 }), { name: "Figure ring", color: "red", width: 7, absolute: { x: -24, y: -6 } });
+    const chart = k.stack(sheet, { gap: 8, name: "Chart" });
+    const area = k.stack(chart, { height: CHART.h, name: "Chart area" });
+    const cp = chartPaths(CHART.w, CHART.h);
+    const axes = marker(k, area, CHART.w, CHART.h, cp.axes, { name: "Chart axes", color: "text", width: 3, absolute: { x: 0, y: 0 } });
+    const hatch = marker(k, area, CHART.w, CHART.h, cp.hatch, { name: "Chart hatch", color: "primary", width: 4, opacity: 0.35, sequential: true, absolute: { x: 0, y: 0 } });
+    const line = marker(k, area, CHART.w, CHART.h, [cp.line], { name: "Chart line", color: "primary", width: 7, absolute: { x: 0, y: 0 } });
+    const end = marker(k, area, 60, 60, scribbleCircle(60, 60, { seed: 93, turns: 1.25 }), { name: "Chart ring", color: "red", width: 5, absolute: { x: cp.end.x - 30, y: cp.end.y - 30 } });
+    const axis = k.stack(chart, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Axis" });
+    for (const a of ["Week 1, April", "Boards a week", "Week 26"]) k.text(axis, a, { style: "Small 22", color: "onPaper", autoWidth: true, name: "Axis label" });
+    const facts = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", name: "Facts" });
+    for (const [fig, label, rot] of [[PLOTLINE.teams, "teams, every week", -2], [`${PLOTLINE.after} min`, "for retro follow-ups", 2]]) {
+      const f = k.stack(facts, { direction: "HORIZONTAL", gap: 14, align: "CENTER", width: "FILL", name: "Fact" });
+      k.text(f, fig, { style: "Fact 40", color: "text", autoWidth: true, name: "Fact figure" });
+      const n = k.instance(f, "Fact note", { Label: label }, { name: "Fact label" });
+      k.patch(n, { rotation: rot, effects: [NOTE_SHADOW] });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.text(foot, "Thank you for planning with us.", { style: "Label 24", color: "text", autoWidth: true, name: "Thanks" });
+    k.text(foot, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    for (const id of k.named(sheet, "Figure")) k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.linear }, { t: 200, v: 1, ease: ease.hold }, { t: OUT + 300, v: 1, ease: ease.linear }, { t: OUT + 800, v: 0 }]);
+    draw(k, axes, 200, 500, { out: OUT + 500, outDuration: 400 });
+    draw(k, line, 500, 2600, { out: OUT, outDuration: 700 });
+    draw(k, hatch, 500, 2600, { out: OUT, outDuration: 700 });
+    draw(k, ring, 2900, 700, { out: OUT, outDuration: 500 });
+    draw(k, end, 3200, 500, { out: OUT, outDuration: 300 });
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        redots(kit, id);
+        redrawChart(kit, id, CHART.w, 420);
+        place(kit, id, "Desk", 243, 1112, 0.55);
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 30 });
+      },
+      vertical: (kit, id) => {
+        redots(kit, id);
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 34 });
+        redrawChart(kit, id, 800, 400);
+        for (const n of kit.named(id, "Facts")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 18, counterAxisAlignItems: "MIN" });
+      }
+    }));
+    return k.finish();
+  }
+});
+function chartPaths(w, h) {
+  const max = 80;
+  const pts = WEEKS.map((v, i) => ({ x: Math.round(22 + i / (WEEKS.length - 1) * (w - 60)), y: Math.round(h - 14 - v / max * (h - 40)) }));
+  const base = underline(w, 16, { seed: 95, 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 } } : {} })) }));
+  const axes = [...base, { closed: false, points: [{ x: 8, y: 4 }, { x: 10, y: h - 6 }] }];
+  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 } };
+  }) };
+  const hatch = pts.map((q) => ({ closed: false, points: [{ x: q.x, y: q.y + 12 }, { x: q.x - 12, y: h - 20 }] }));
+  return { axes, line, hatch, end: pts[pts.length - 1] };
+}
+function redrawChart(k, root, w, h) {
+  const cp = chartPaths(w, h);
+  for (const n of k.named(root, "Chart area")) k.patch(n, { height: h });
+  for (const n of k.named(root, "Chart axes")) k.patch(n, { width: w, height: h, paths: cp.axes });
+  for (const n of k.named(root, "Chart line")) k.patch(n, { width: w, height: h, paths: [cp.line] });
+  for (const n of k.named(root, "Chart hatch")) k.patch(n, { width: w, height: h, paths: cp.hatch });
+  for (const n of k.named(root, "Chart ring")) k.patch(n, { x: cp.end.x - 30, y: cp.end.y - 30 });
+}
+
+export {
+  style_sketch_milestone_default
+};