@popcraft/kit 0.53.6 → 0.53.8

package/dist/chunks/chunk-OMZAYT2H.js

@@ -1,399 +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 {
-  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-WSNO4FJV.js";
-import {
-  portraitSlot
-} from "./chunk-YUJ6YBZ6.js";
-import {
-  clicks,
-  glide
-} from "./chunk-2PJUAVAE.js";
-import {
-  CONTENT,
-  columns,
-  compactNav,
-  footer,
-  respond,
-  typeScale
-} from "./chunk-YHF6LRMF.js";
-import {
-  buttons,
-  nav
-} from "./chunk-ZMD3C2YJ.js";
-import {
-  board,
-  reboard
-} from "./chunk-LWSZATOL.js";
-import {
-  defineTemplate
-} from "./chunk-YDW25Z3P.js";
-import {
-  Kit,
-  preset
-} from "./chunk-4G7VHQUV.js";
-import {
-  measureTextWidth
-} from "./chunk-FR4I6EP4.js";
-import {
-  ease
-} from "./chunk-PLZLKHOI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.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, { visible: false });
-          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-OOBRGSTY.js

@@ -1,79 +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 {
-  defineTemplate
-} from "./chunk-YDW25Z3P.js";
-import {
-  Kit,
-  preset
-} from "./chunk-4G7VHQUV.js";
-import {
-  ease
-} from "./chunk-PLZLKHOI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/motion/smooth-loop.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var SIZE = 1080;
-var LOOP = 4e3;
-var SWEEP = 260;
-var smooth_loop_default = defineTemplate({
-  id: "motion-smooth-loop",
-  meta: {
-    name: "Smooth loop",
-    description: "A seamless four-second loop made for 60 fps: three orbits turning at different speeds around a breathing mark, and a light sweeping the caption band \u2014 export it as MP4 or WebM at full size",
-    category: "animation",
-    tags: ["animation", "loop", "60fps", "orbit", "sweep", "seamless"],
-    platforms: ["instagram", "tiktok", "linkedin", "x"],
-    formats: ["post", "video"],
-    useCases: ["brand-intro", "announcement"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  build() {
-    const k = new Kit("Smooth loop", preset("ig-post"));
-    k.brand({ primary: "#0B1020", onPrimary: "#FFFFFF", accent: "#7C5CFF", onAccent: "#FFFFFF", mint: "#35E0B0", sun: "#FFC247", ring: "#2A3354" });
-    k.textStyle("Display 200", { size: 200, fontWeight: 900, letterSpacing: -6, lineHeight: 200, textAlign: "CENTER" });
-    k.textStyle("Label 30", { size: 30, fontWeight: 800, letterSpacing: 6, lineHeight: 36, textAlign: "CENTER" });
-    k.textStyle("Caption 36", { size: 36, fontWeight: 700, letterSpacing: 2, lineHeight: 44, textAlign: "CENTER" });
-    k.component("Caption", { direction: "HORIZONTAL", width: "HUG", align: "CENTER", props: { Caption: "SIXTY FRAMES A SECOND  \xB7  SMOOTH AS GLASS" } }, (id) => {
-      k.propText(id, "Caption", { style: "Caption 36", color: "onAccent", autoWidth: true });
-    });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 8, 96, "primary", "CENTER", "CENTER");
-    k.timeline(sheet, { duration: LOOP, fps: 60 });
-    const orbit = (name, d, dot, color) => {
-      const o = k.stack(sheet, { name, width: d, height: d, absolute: { x: (SIZE - d) / 2, y: (SIZE - d) / 2 } });
-      k.ellipse(o, d, [], { name: "Ring", stroke: { color: "ring", width: 3 }, absolute: { x: 0, y: 0 } });
-      k.ellipse(o, dot, color, { name: "Dot", absolute: { x: (d - dot) / 2, y: -dot / 2 } });
-      return o;
-    };
-    const outer = orbit("Outer orbit", 820, 44, "accent");
-    const middle = orbit("Middle orbit", 600, 34, "mint");
-    const inner = orbit("Inner orbit", 400, 26, "sun");
-    const mark = k.stack(sheet, { name: "Mark", width: "HUG", gap: 8, align: "CENTER" });
-    k.text(mark, "SMOOTH LOOP", { style: "Label 30", color: "onPrimary", autoWidth: true, name: "Label" });
-    k.text(mark, "60 fps", { style: "Display 200", color: "onPrimary", autoWidth: true, name: "Rate" });
-    const band = k.stack(sheet, { name: "Band", direction: "HORIZONTAL", width: SIZE, height: 72, fill: "accent", clip: true, justify: "CENTER", align: "CENTER", absolute: { x: 0, y: SIZE - 120 } });
-    const light = k.rect(band, SWEEP, 72, "onAccent", { name: "Sweep", opacity: 0.22, absolute: { x: -SWEEP, y: 0 } });
-    k.instance(band, "Caption");
-    const lin = ease.linear, sine = ease.inOut("sine");
-    k.animate(outer, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: 360 }]);
-    k.animate(middle, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: -360 }]);
-    k.animate(inner, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: 720 }]);
-    for (const axis of ["scaleX", "scaleY"]) k.animate(mark, axis, [{ t: 0, v: 1, ease: sine }, { t: LOOP / 2, v: 1.06, ease: sine }, { t: LOOP, v: 1 }]);
-    const across = SIZE + SWEEP;
-    k.animate(light, "translateX", [{ t: 0, v: 0, ease: lin }, { t: LOOP / 2 - 1, v: across, ease: ease.hold }, { t: LOOP / 2, v: 0, ease: lin }, { t: LOOP, v: across }]);
-    return k.finish();
-  }
-});
-
-export {
-  smooth_loop_default
-};

package/dist/chunks/chunk-OPCBB7Y6.js

@@ -1,160 +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 {
-  TIDE,
-  fitScorePaper,
-  orchestra,
-  placeScore,
-  scoreBrand,
-  scoreList,
-  scorePaper,
-  scoreType,
-  screen,
-  sweep
-} from "./chunk-BPL5XTQW.js";
-import {
-  mover,
-  pruneStyles
-} from "./chunk-5XCBGNIO.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-3YQOE5KZ.js";
-import {
-  bed
-} from "./chunk-KHGNV7UQ.js";
-import {
-  defineTemplate
-} from "./chunk-YDW25Z3P.js";
-import {
-  Kit,
-  preset
-} from "./chunk-4G7VHQUV.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/motion/tour-tickets-tide-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var T = TIDE;
-var { beat, duration: DURATION, audio: music } = bed(T.track, 28);
-var cues = [
-  { layer: "Screen", preset: "blur-in", at: beat(0), params: { duration: 500, amount: 20 } },
-  { layer: "Orchestra", preset: "rise-in", at: beat(0.5), params: { duration: 900, distance: 120 } },
-  { layer: "Title", preset: "rise-in", at: beat(1), params: { duration: 700, distance: 30 } },
-  { layer: "Subtitle", preset: "fade-in", at: beat(2), params: { duration: 600 } },
-  { layer: "Bar", preset: "fade-in", at: beat(3), params: { duration: 420 }, stagger: { delay: beat(1) } },
-  { layer: "Sold stamp", preset: "drop-in", at: beat(11.5), params: { duration: 200, distance: 16 }, stagger: { delay: beat(1) } },
-  // The braam: the added nights are pencilled in.
-  { layer: "New bar", preset: "fade-in", at: beat(16), params: { duration: 300 }, stagger: { delay: beat(0.5) } },
-  { layer: "Added", preset: "drop-in", at: beat(16), params: { duration: 260, distance: 20 }, stagger: { delay: beat(0.5) } },
-  { layer: "Presale", preset: "rise-in", at: beat(18), params: { duration: 600, distance: 24 } },
-  { layer: "Code", preset: "pulse", at: beat(21), params: { duration: 600, amount: 0.06 } },
-  { layer: "Code", preset: "pulse", at: beat(25), params: { duration: 600, amount: 0.06 } }
-];
-var swaps = [captionSwap(["The film, the orchestra, live.", "Ten concert halls this March.", "Vienna and London add nights.", "Subscriber presale: Monday, 10:00 CET."], 0, DURATION, { stagger: 60, in: 320, out: 240, rise: 20 })];
-var NAME = `Tour tickets announcement reel: ${T.act}`;
-function lay(k, id, w, h) {
-  const { at, scaled } = mover(k, id);
-  let b;
-  if (h === 1920) {
-    scaled("Screen", 140, 254, 0.8);
-    at("Title", 140, 694, { width: 800 });
-    at("Subtitle", 140, 792, { width: 800 });
-    b = { x: 141, y: 846, scale: 0.76, cols: 4, rowGap: 8 };
-    at("Presale", 141 + 2 * 262 * 0.76 + 12, 846 + 2 * 248 * 0.76 + 8, { width: 380 });
-    at("Caption strip", 140, 1376, { width: 800 });
-    scaled("Orchestra", 0, 1450, 1, { visible: true });
-  } else if (w === h) {
-    scaled("Screen", 60, 60, 0.52);
-    at("Title", 610, 92, { width: 420 });
-    at("Subtitle", 610, 196, { width: 420 });
-    b = { x: 26, y: 400, scale: 0.88, cols: 4, rowGap: 6 };
-    at("Presale", 26 + 2 * 262 * 0.88 + 16, 400 + 2 * 248 * 0.88 + 10, { width: 460 });
-    at("Caption strip", 610, 300, { width: 420 });
-    scaled("Orchestra", 0, 0, 1, { visible: false });
-  } else if (h > w) {
-    scaled("Screen", 140, 50, 0.8);
-    at("Title", 90, 488, { width: 900 });
-    at("Subtitle", 90, 586, { width: 900 });
-    b = { x: 100, y: 640, scale: 0.84, cols: 4, rowGap: 6 };
-    at("Presale", 100 + 2 * 262 * 0.84 + 16, 640 + 2 * 248 * 0.84 + 8, { width: 420 });
-    at("Caption strip", 90, 1268, { width: 900 });
-    scaled("Orchestra", 0, 0, 1, { visible: false });
-  } else {
-    scaled("Screen", 106, 70, 0.78);
-    at("Title", 96, 500, { width: 800 });
-    at("Subtitle", 96, 598, { width: 800 });
-    b = { x: 1e3, y: 60, scale: 0.92, cols: 3, rowGap: 6 };
-    at("Presale", 1e3 + 262 * 0.92 + 16, 60 + 3 * 246 * 0.92 + 8, { width: 480 });
-    at("Caption strip", 96, 660, { width: 800 });
-    scaled("Orchestra", 96, 730, 0.74, { visible: true });
-  }
-  placeScore(k, id, T.dates, b);
-}
-var tour_tickets_tide_reel_default = defineTemplate({
-  id: "motion-tour-tickets-tide-reel",
-  meta: {
-    name: NAME,
-    description: "A 17-second vertical tour announcement for a film-in-concert tour, drawn as a concert hall: the film's dusk sea on a screen in a gold frame with a sweeping lighthouse beam, the orchestra in silhouette below, and ten concert-hall nights as bars of the score, three stamped SOLD OUT by the hall librarian and two added nights pencilled in on the braam, ending on the subscribers' presale and code. Film-score music, burned-in captions, 9:16 with 1:1, 4:5 and 16:9",
-    category: "animation",
-    tags: ["animation", "tour", "tickets", "concert", "orchestra", "film score", "live to picture", "classical", "tour dates", "sold out", "presale", "announcement", "sheet music", "audio", "music", "captions", "reel"],
-    platforms: ["instagram", "tiktok", "youtube", "facebook"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
-    useCases: ["announcement", "event", "presale"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, swaps },
-  build() {
-    const k = new Kit(NAME, preset("ig-story"));
-    k.quantizeGeometry = true;
-    scoreBrand(k, { name: "TIDEWATER" });
-    scoreType(k);
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
-    const hall = k.frame(sheet, { x: 0, y: 0, width: 1080, height: 1920 }, { name: "Hall" });
-    k.patch(hall, { layoutPositioning: "ABSOLUTE" });
-    scorePaper(k, hall, 1080, 1920);
-    orchestra(k, hall, 1080, 470, { x: 0, y: 1450 });
-    screen(k, hall);
-    k.text(hall, "{{brand.name}}", { style: "Title 92", color: "text", width: 800, name: "Title", absolute: { x: 0, y: 0 } });
-    k.text(hall, "in concert \xB7 the film with its score played live", { style: "Sub 28", color: "onPaper", width: 800, name: "Subtitle", absolute: { x: 0, y: 0 } });
-    scoreList(k, hall, T.dates, { x: 0, y: 0, scale: 1, cols: 4, rowGap: 8 });
-    const pre = k.stack(hall, { gap: 6, fill: "primary", padding: { top: 14, right: 18, bottom: 14, left: 18 }, name: "Presale", absolute: { x: 0, y: 0 } });
-    k.text(pre, `SUBSCRIBER PRESALE ${T.presale.opens}`, { style: "Label 18", color: "onPrimary", width: "FILL", name: "Presale when" });
-    k.text(pre, T.presale.code, { style: "Code 30", color: "onPrimary", autoWidth: true, name: "Code" });
-    captionStrip(k, hall, swaps[0].words[0], { style: "Caption 32", fill: "card", ink: "onCard", width: 800, radius: 0, pad: [8, 18], stroke: { color: "accent", width: 1.5, align: "INSIDE" } });
-    for (const n of k.named(hall, "Caption strip")) k.patch(n, { layoutPositioning: "ABSOLUTE" });
-    lay(k, hall, 1080, 1920);
-    sweep(k, hall, DURATION, 1);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    const size = (kit, id, w, h, title) => {
-      if (title) for (const t of kit.named(id, "Title")) kit.restyle(t, title);
-      for (const d of kit.named(id, "Hall")) {
-        kit.patch(d, { x: 0, y: 0, width: w, height: h });
-        fitScorePaper(kit, d, w, h);
-        lay(kit, d, w, h);
-      }
-    };
-    k.variants(sheet, [
-      { preset: "ig-post", adjust: (kit, id) => size(kit, id, 1080, 1080, "Title 64") },
-      { preset: "ig-portrait", adjust: (kit, id) => size(kit, id, 1080, 1350) },
-      { preset: "video-1080p", adjust: (kit, id) => size(kit, id, 1920, 1080) }
-    ]);
-    pruneStyles(k);
-    return k.finish();
-  }
-});
-
-export {
-  tour_tickets_tide_reel_default
-};