@popcraft/kit 0.31.0 → 0.32.1

package/dist/chunks/chunk-2QSR37YI.js

@@ -1,173 +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 {
-  reelCuts,
-  reelSheet,
-  section
-} from "./chunk-UA7OECXL.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-ERLSOXU6.js";
-import {
-  hide,
-  patchAll
-} from "./chunk-YHBAWSDX.js";
-import {
-  shadow
-} from "./chunk-M6VTXO6F.js";
-import {
-  logoBadge,
-  pill
-} from "./chunk-LEKU2ZW3.js";
-import {
-  box
-} from "./chunk-6RCDZU4R.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/motion/saas-changelog-drop.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("launch", 0, 5);
-var { beat } = S;
-var ITEM = [2, 6, 10];
-var swaps = [captionSwap(["Dark mode is here.", "Replies that fill themselves.", "Your tickets, as CSV.", "Live for everyone today."], beat(1.5), S.duration - 30)];
-var counts = [{ layer: "Fixes figure", at: beat(13), duration: beat(2), counter: { from: 0, to: 14, prefix: "+" } }];
-var cues = [
-  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 250 } },
-  { layer: "Version tile", preset: "pop-in", at: 0, params: { duration: 350 } },
-  { layer: "Version", preset: "pulse", at: beat(1), params: { duration: 500, amount: 0.05 } },
-  { layer: "Caption strip", preset: "fade-in", at: beat(1.5), params: { duration: 250 } },
-  { layer: "Dark tile", preset: "pop-in", at: beat(ITEM[0]), params: { duration: 380 } },
-  { layer: "Knob", preset: "slide-in", at: beat(ITEM[0] + 1), params: { duration: 300, direction: "left", distance: 64 } },
-  { layer: "Replies tile", preset: "pop-in", at: beat(ITEM[1]), params: { duration: 380 } },
-  { layer: "Filled reply", preset: "rise-in", at: beat(ITEM[1] + 1), params: { duration: 350 } },
-  { layer: "Export tile", preset: "pop-in", at: beat(ITEM[2]), params: { duration: 380 } },
-  { layer: "Export arrow", preset: "drop-in", at: beat(ITEM[2] + 1), params: { duration: 400 } },
-  { layer: "Fixes tile", preset: "pop-in", at: beat(13), params: { duration: 380 } },
-  { layer: "Call", preset: "pop-in", at: beat(16), params: { duration: 400 } },
-  { layer: "Call", preset: "pulse", at: beat(18), params: { duration: 600, amount: 0.05 } }
-];
-var saas_changelog_drop_default = defineTemplate({
-  id: "motion-saas-changelog-drop",
-  meta: {
-    name: "SaaS short: changelog drop",
-    description: "A 10-second \u201Cshipped this week\u201D reel in a bento look: the version lands first on a cobalt tile, then three items stamp into tiles of their own on the beat, each with a small drawing of the feature, and a fixes tile counts up. Music, burned-in captions, 9:16 with square and 4:5 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "changelog", "release notes", "shipped", "bento", "tiles", "product update", "captions", "music", "audio", "reel", "tiktok", "shorts", "build in public"],
-    platforms: ["x", "linkedin", "tiktok", "instagram", "youtube"],
-    formats: ["reel", "short", "story", "post", "portrait-post"],
-    useCases: ["changelog", "announcement", "launch"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit("SaaS short: changelog drop", preset("ig-story"));
-    k.quantizeGeometry = true;
-    k.brand(
-      { paper: "#E6E9ED", text: "#11141A", onText: "#FFFFFF", onPaper: "#48505E", primary: "#1447E6", onPrimary: "#FFFFFF", accent: "#FFD23F", onAccent: "#2A1F00", card: "#FFFFFF", onCard: "#11141A" },
-      { name: "Orbitdesk", version: "v2.4", site: "orbitdesk.example/new" }
-    );
-    k.palette({ night: "#14161C", onNight: "#F4F6F8", nightMuted: "#AEB6C2", track: "#2B303A", moon: "#FFE38A", mint: "#BDEBD2", onMint: "#0C2B1D", sheetLine: "#7CCBA4", bubble: "#EDF0F3", cardMuted: "#566070", shade: "#5B6472" });
-    const mono = { fontFamily: "JetBrains Mono" };
-    k.textStyle("Version 168", { size: 168, fontWeight: 900, letterSpacing: -9, lineHeight: 150 });
-    k.textStyle("Shipped 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 38 });
-    k.textStyle("Tile 40", { size: 40, fontWeight: 800, letterSpacing: -1.3, lineHeight: 42 });
-    k.textStyle("Tile note 24", { size: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 30 });
-    k.textStyle("Mono 22", { ...mono, size: 22, fontWeight: 600, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Fixes 96", { size: 96, fontWeight: 900, letterSpacing: -5, lineHeight: 92, fontFeatures: { tnum: 1 } });
-    k.textStyle("Brand 28", { size: 28, fontWeight: 700, letterSpacing: -0.4, lineHeight: 34 });
-    k.textStyle("Caption 40", { size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 48 });
-    k.textStyle("Button 32", { size: 32, fontWeight: 800, letterSpacing: -0.6, lineHeight: 40 });
-    pill(k, "Button", { fill: "text", ink: "onText", style: "Button 32", label: "Read the changelog: orbitdesk.example/new", pad: [20, 34] });
-    const lift = [shadow(k, "shade", 0.16, 14, 34)];
-    const R = 38;
-    const sheet = reelSheet(k, S, { name: "Changelog drop", gap: 16 });
-    const ghost = (x, y, w, h) => k.rect(sheet, w, h, k.tint("text", 0.06), { name: "Empty tile", radius: R, absolute: { x, y } });
-    ghost(140, -60, 380, 270);
-    ghost(536, -60, 404, 270);
-    ghost(956, -60, 300, 270);
-    ghost(140, 1500, 250, 230);
-    ghost(406, 1500, 534, 230);
-    ghost(956, 1500, 300, 230);
-    ghost(140, 1746, 520, 230);
-    ghost(676, 1746, 264, 230);
-    ghost(-140, 660, 264, 320);
-    ghost(956, 590, 300, 250);
-    ghost(956, 856, 300, 250);
-    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
-    logoBadge(k, brand, { fill: "primary", size: 28, radius: 12 });
-    k.text(brand, "{{brand.name}} changelog \xB7 2 Oct 2026", { style: "Brand 28", color: "text", name: "Brand name" });
-    const rowA = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, height: 330, name: "Row A" });
-    const version = k.stack(rowA, { width: 410, height: "FILL", fill: "primary", radius: R, padding: 32, justify: "SPACE_BETWEEN", effects: lift, name: "Version tile" });
-    k.text(version, "Shipped this week", { style: "Shipped 34", color: "onPrimary", name: "Shipped" });
-    k.text(version, "{{brand.version}}", { style: "Version 168", color: "onPrimary", name: "Version" });
-    const dark = k.stack(rowA, { height: "FILL", fill: "night", radius: R, padding: 30, gap: 8, clip: true, effects: lift, name: "Dark tile" });
-    k.text(dark, "Dark mode", { style: "Tile 40", color: "onNight", name: "Dark title" });
-    k.text(dark, "Follows your system, or not.", { style: "Tile note 24", color: "nightMuted", name: "Dark note" });
-    k.ellipse(dark, 150, "moon", { name: "Moon", absolute: { x: 236, y: 190 } });
-    k.ellipse(dark, 150, "night", { name: "Moon shade", absolute: { x: 190, y: 160 } });
-    k.rect(dark, 136, 72, "track", { name: "Switch", radius: 36, absolute: { x: 30, y: 226 } });
-    k.ellipse(dark, 56, "onNight", { name: "Knob", absolute: { x: 102, y: 234 } });
-    const replies = k.stack(sheet, { height: 270, fill: "card", radius: R, padding: 30, gap: 8, effects: lift, name: "Replies tile" });
-    k.text(replies, "Saved replies with variables", { style: "Tile 40", color: "onCard", name: "Replies title" });
-    k.text(replies, "Write it once. It fills in the name, the order, the date.", { style: "Tile note 24", color: "cardMuted", name: "Replies note" });
-    const draft = k.stack(replies, { direction: "HORIZONTAL", width: "HUG", fill: "bubble", radius: 18, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Draft reply", absolute: { x: 30, y: 136 } });
-    k.text(draft, "Hi {first_name}, refund sent for #{order}.", { style: "Mono 22", color: "onCard", autoWidth: true, name: "Draft words" });
-    const filled = k.stack(replies, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 18, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Filled reply", absolute: { x: 166, y: 196 } });
-    k.text(filled, "Hi Priya, refund sent for #48213.", { style: "Mono 22", color: "onPrimary", autoWidth: true, name: "Filled words" });
-    const rowC = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, height: 250, name: "Row C" });
-    const csv = k.stack(rowC, { height: "FILL", fill: "mint", radius: R, padding: 30, gap: 8, clip: true, effects: lift, name: "Export tile" });
-    k.text(csv, "CSV export, one click", { style: "Tile 40", color: "onMint", width: 300, name: "Export title" });
-    k.text(csv, "Every ticket, every field.", { style: "Tile note 24", color: "onMint", width: 300, name: "Export note" });
-    const cells = [];
-    for (let r = 0; r < 6; r++) for (let c = 0; c < 3; c++) cells.push(box(c * 62, r * 34, 56, 28));
-    k.vector(csv, 186, 204, cells, "sheetLine", { name: "Sheet", absolute: { x: 340, y: 64 } });
-    k.vector(csv, 60, 70, [{ closed: true, points: [{ x: 20, y: 0 }, { x: 40, y: 0 }, { x: 40, y: 36 }, { x: 60, y: 36 }, { x: 30, y: 70 }, { x: 0, y: 36 }, { x: 20, y: 36 }] }], "onMint", { name: "Export arrow", absolute: { x: 252, y: 166 } });
-    const fixes = k.stack(rowC, { width: 250, height: "FILL", fill: "accent", radius: R, padding: 30, justify: "SPACE_BETWEEN", effects: lift, name: "Fixes tile" });
-    k.text(fixes, "+14", { style: "Fixes 96", color: "onAccent", name: "Fixes figure" });
-    k.text(fixes, "fixes, most of them yours", { style: "Tile note 24", color: "onAccent", name: "Fixes note" });
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "card", ink: "onCard", radius: 26, pad: [16, 28], effects: lift });
-    k.instance(sheet, "Button", { Label: "Read the changelog: {{brand.site}}" }, { name: "Call" });
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    k.variants(sheet, reelCuts({ post: 40, portrait: 80 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 12, counterAxisSpacing: 12, padding: { top: 44, right: 100, bottom: 44, left: 100 } });
-        hide(kit, id, ["Brand row"]);
-        patchAll(kit, id, "Row A", { height: 276 });
-        patchAll(kit, id, "Moon", { x: 272, y: 146 });
-        patchAll(kit, id, "Moon shade", { x: 226, y: 116 });
-        patchAll(kit, id, "Switch", { y: 176 });
-        patchAll(kit, id, "Knob", { y: 184 });
-        patchAll(kit, id, "Row C", { height: 232 });
-        patchAll(kit, id, "Sheet", { x: 376 });
-        patchAll(kit, id, "Export arrow", { x: 288, y: 148 });
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
-      }
-    }));
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  saas_changelog_drop_default
-};

package/dist/chunks/chunk-2UNKDIN3.js

@@ -1,93 +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 {
-  GRAIN,
-  arcade,
-  candle,
-  gothicBrand
-} from "./chunk-673AHRM7.js";
-import {
-  EMAIL_FPS,
-  HEADER
-} from "./chunk-572QBW5I.js";
-import {
-  background
-} from "./chunk-HAK2G6YB.js";
-import {
-  SERIF
-} from "./chunk-PFCHOCEN.js";
-import {
-  glow
-} from "./chunk-M6VTXO6F.js";
-import {
-  pill
-} from "./chunk-LEKU2ZW3.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/email/gothic-header.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 4800;
-var CANDLES = [{ x: 22, height: 58 }, { x: 44, height: 96 }, { x: 66, height: 132 }, { x: 88, height: 74 }, { x: 498, height: 74 }, { x: 520, height: 132 }, { x: 542, height: 96 }, { x: 564, height: 58 }];
-var cues = [
-  { layer: "Figure", preset: "pulse", at: 900, params: { duration: 900, amount: 0.04 } },
-  { layer: "Button", preset: "pulse", at: 3100, params: { duration: 800, amount: 0.06 } }
-];
-var gothic_header_default = defineTemplate({
-  id: "email-gothic-header",
-  meta: {
-    name: "Gothic email header (animated GIF)",
-    description: "A 600 \xD7 300 animated header for an uptime report or launch email, lit by candles: the figure, the account and the button are all on the first frame (for Outlook), then eight flames flicker in their own light and the figure swells \u2014 a seamless 4.8-second GIF loop",
-    category: "email",
-    tags: ["email", "gif", "animated", "header", "banner", "gothic", "candles", "uptime", "report", "saas", "serif"],
-    platforms: ["email"],
-    formats: ["email", "banner"],
-    useCases: ["report", "milestone", "newsletter"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit("Gothic email header", HEADER);
-    k.quantizeGeometry = true;
-    gothicBrand(k);
-    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 700, letterSpacing: 3, lineHeight: 16, textCase: "UPPER", textAlign: "CENTER" });
-    k.textStyle("Figure 50", { ...SERIF, size: 50, fontWeight: 900, letterSpacing: -1.5, lineHeight: 54, textAlign: "CENTER" });
-    k.textStyle("Account 15", { ...SERIF, size: 15, fontWeight: 400, lineHeight: 22, textAlign: "CENTER" });
-    k.textStyle("Button 15", { size: 15, fontWeight: 800, lineHeight: 20 });
-    pill(k, "Button pill", { fill: "accent", ink: "onAccent", style: "Button 15", label: "Read the full account", pad: [10, 24], radius: 4 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 10, { top: 30, right: 124, bottom: 44, left: 124 }, "paper", "CENTER", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
-    background(k, sheet, "paper", { effects: GRAIN });
-    glow(k, sheet, { x: 300, y: 40, w: 560, h: 300, role: "cobalt", alpha: 0.26 });
-    glow(k, sheet, { x: 300, y: 150, w: 420, h: 260, role: "accent", alpha: 0.14 });
-    arcade(k, sheet, { width: 600, height: 22, count: 15, absolute: { x: 0, y: 0 }, role: "stone", weight: 2, name: "Arcade" });
-    k.rect(sheet, 600, 28, [...k.paint("stone"), k.gradient({ from: "lead", to: "lead", angle: 90, fromOpacity: 0, toOpacity: 0.8 })], { name: "Sill", absolute: { x: 0, y: 272 } });
-    k.rect(sheet, 600, 1.5, "accent", { name: "Sill gilt", absolute: { x: 0, y: 272 }, opacity: 0.7 });
-    CANDLES.forEach((c, i) => candle(k, sheet, { width: 12, height: c.height, x: c.x, base: 272, loopMs: DURATION, cycles: 4 + i % 3, phase: i * 0.37 % 1, name: `Candle ${i + 1}` }));
-    k.text(sheet, "The quarterly vigil \xB7 III of MMXXVI", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
-    k.text(sheet, "99.998% kept", { style: "Figure 50", color: "text", name: "Figure" });
-    k.text(sheet, "Ninety days, 7.1 million checks, and one page at 3 a.m. Here is what we watched for you.", { style: "Account 15", color: "onPaper", name: "Account" });
-    k.instance(sheet, "Button pill", { Label: "Read the full account" }, { name: "Button" });
-    k.cues(sheet, cues);
-    return k.finish();
-  }
-});
-
-export {
-  gothic_header_default
-};

package/dist/chunks/chunk-2YQ5O73Q.js

@@ -1,224 +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 {
-  COLUMN,
-  camera,
-  float,
-  lineGrid,
-  redrawLines,
-  reelCuts,
-  reelSheet,
-  seenAt,
-  wideCut
-} from "./chunk-UA7OECXL.js";
-import {
-  productWindow,
-  screenshotSlot
-} from "./chunk-FF7Q4NVH.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-F3TA2VS2.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-ERLSOXU6.js";
-import {
-  score
-} from "./chunk-42LEBOKV.js";
-import {
-  hide,
-  patchAll,
-  restyle
-} from "./chunk-YHBAWSDX.js";
-import {
-  shadow
-} from "./chunk-M6VTXO6F.js";
-import {
-  logoBadge,
-  pill
-} from "./chunk-LEKU2ZW3.js";
-import {
-  box
-} from "./chunk-6RCDZU4R.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  ease
-} from "./chunk-YYQUCS6P.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/motion/saas-screen-demo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = score("tension");
-var { beat } = S;
-var STEP = [4, 12, 20, 28];
-var STAGE = { width: COLUMN, height: 620 };
-var GRID = { x: 196, y: 138, col: 112, row: 58, w: 104, h: 50 };
-var cell = (c, r) => ({ x: GRID.x + c * GRID.col, y: GRID.y + r * GRID.row });
-var OPEN = [[1, 0], [1, 1], [1, 2], [3, 2], [3, 3], [3, 4]];
-var BOOKED = cell(1, 1);
-var BAR = 56;
-var REST = { x: 640, y: 500 };
-var TARGETS = [{ x: cell(1, 0).x + 60, y: cell(1, 0).y + BAR + 30 }, { x: 706, y: BAR + 52 }, { x: BOOKED.x + 70, y: BOOKED.y + BAR + 32 }];
-var SHOTS = [
-  { t: beat(STEP[0]), zoom: 1.7, x: TARGETS[0].x + 100, y: TARGETS[0].y + 90 },
-  { t: beat(STEP[1]), zoom: 1.9, ...TARGETS[1] },
-  { t: beat(STEP[2]), zoom: 1.9, x: TARGETS[2].x - 40, y: TARGETS[2].y + 40 },
-  { t: beat(STEP[3]), zoom: 1 }
-];
-var GRID_LOOK = { step: 135, opacity: 0.55 };
-var swaps = [captionSwap(["Mark the hours you\u2019re free.", "Copy one link. Send it.", "They pick. Your week fills.", "Free for your first calendar."], beat(STEP[0]), S.duration - 30)];
-var counts = [{ layer: "Booked figure", at: beat(STEP[2] + 2.5), duration: beat(3), counter: { from: 0, to: 7 } }];
-var cues = [
-  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
-  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 450, amount: 60 } },
-  { layer: "Stage", preset: "rise-in", at: 200, params: { duration: 600 } },
-  { layer: "Caption strip", preset: "fade-in", at: beat(3.5), params: { duration: 250 } },
-  ...STEP.slice(0, 3).map((b, i) => ({ layer: `Step fill ${i + 1}`, preset: "wipe-in", at: beat(b), params: { duration: beat(8), direction: "right", ease: ease.linear } })),
-  { layer: "Step bars", preset: "fade-in", at: beat(2), params: { duration: 300 } },
-  { layer: "Open slot", preset: "pop-in", at: beat(STEP[0] + 2), params: { duration: 300 }, stagger: { delay: 150 } },
-  { layer: "Toast", preset: "pop-in", at: beat(STEP[1] + 2), params: { duration: 350 } },
-  { layer: "Toast", preset: "fade-out", at: beat(STEP[1] + 6), params: { duration: 300 } },
-  { layer: "Booking", preset: "pop-in", at: beat(STEP[2] + 2.5), params: { duration: 400 } },
-  { layer: "Call", preset: "pop-in", at: beat(STEP[3]), params: { duration: 450 } },
-  { layer: "Call", preset: "pulse", at: beat(29.5), params: { duration: 600, amount: 0.05 } },
-  { layer: "Call", preset: "pulse", at: beat(31), params: { duration: 500, amount: 0.05 } }
-];
-var saas_screen_demo_default = defineTemplate({
-  id: "motion-saas-screen-demo",
-  meta: {
-    name: "SaaS short: screen demo with zoom",
-    description: "A 16-second product demo in the screen-recording-with-zoom style: a product window on a dark ruled ground, an enlarged pointer that clicks three times, and a camera that zooms to each click while the caption track says the step. Drop your own screenshot on the window\u2019s picture slot. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "demo", "screen recording", "zoom", "cursor", "product", "dark", "captions", "music", "audio", "reel", "tiktok", "shorts", "build in public"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "demo", "video"],
-    useCases: ["launch", "onboarding", "education"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit("SaaS short: screen demo with zoom", preset("ig-story"));
-    k.quantizeGeometry = true;
-    k.brand(
-      { paper: "#0A0B0D", text: "#F4F5F7", onPaper: "#A2A8B3", primary: "#FF5A1F", onPrimary: "#180700", card: "#14161A", onCard: "#F1F2F4" },
-      { name: "Slotwise", hook: "Three clicks. Fully booked.", site: "slotwise.example" }
-    );
-    k.palette({ line: "#23262D", side: "#0F1114", slot: "#1C1F25", faint: "#9299A6", toast: "#F4F5F7", onToastInk: "#101216" });
-    k.textStyle("Hook 100", { size: 100, fontWeight: 800, letterSpacing: -4.5, lineHeight: 98 });
-    k.textStyle("Hook 64", { size: 64, fontWeight: 800, letterSpacing: -2.6, lineHeight: 66 });
-    k.textStyle("Brand 30", { size: 30, fontWeight: 700, letterSpacing: -0.4, lineHeight: 36 });
-    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.8, lineHeight: 48 });
-    k.textStyle("Button 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 40 });
-    k.textStyle("UI title 26", { size: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 32 });
-    k.textStyle("UI 18", { size: 18, fontWeight: 600, lineHeight: 24 });
-    k.textStyle("UI figure 52", { size: 52, fontWeight: 800, letterSpacing: -2, lineHeight: 56, fontFeatures: { tnum: 1 } });
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Start free at slotwise.example", pad: [20, 36], radius: 14 });
-    const sheet = reelSheet(k, S, { name: "Screen demo", gap: 24 });
-    lineGrid(k, sheet, k.tint("text", 0.15), GRID_LOOK);
-    const ghost = [], lit = [];
-    for (let r = 0; r < 4; r++) for (let c = 0; c < 6; c++) ((c * 3 + r * 5) % 7 === 0 ? lit : ghost).push(box(c * 150, r * 112, 138, 100));
-    k.vector(sheet, 900, 448, ghost, "slot", { name: "Next week", absolute: { x: 140, y: 1520 }, opacity: 0.55 });
-    k.vector(sheet, 900, 448, lit, "primary", { name: "Next week booked", absolute: { x: 140, y: 1520 }, opacity: 0.3 });
-    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brand row" });
-    logoBadge(k, brand, { fill: "primary", size: 30, radius: 10 });
-    k.text(brand, "{{brand.name}}", { style: "Brand 30", color: "text", name: "Brand name" });
-    k.text(sheet, "{{brand.hook}}", { style: "Hook 100", color: "text", name: "Hook" });
-    const stage = k.stack(sheet, { width: STAGE.width, height: STAGE.height, clip: true, radius: 18, fill: "card", stroke: { color: "line", width: 2, align: "OUTSIDE" }, effects: [shadow(k, "paper", 0.6, 30, 70)], name: "Stage" });
-    const cam = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Camera" });
-    const look = { fill: "card", bar: "side", titleStyle: "UI 18", titleInk: "faint", dots: "slot", radius: 0, barHeight: BAR, rule: "line" };
-    const { win, body, bodyHeight } = productWindow(k, cam, { ...STAGE, title: "{{brand.site}} / hours", look });
-    k.patch(win, { layoutPositioning: "ABSOLUTE", x: 0, y: 0 });
-    screenshotSlot(k, body, STAGE.width, bodyHeight, "slot");
-    const ui = k.frame(body, { x: 0, y: 0, width: STAGE.width, height: bodyHeight }, { name: "Placeholder screen", fill: "card" });
-    k.rect(ui, 172, bodyHeight, "side", { name: "Sidebar", absolute: { x: 0, y: 0 } });
-    k.rect(ui, 2, bodyHeight, "line", { name: "Sidebar rule", absolute: { x: 172, y: 0 } });
-    k.rect(ui, 148, 44, "slot", { name: "Nav selected", radius: 10, absolute: { x: 12, y: 20 } });
-    ["Hours", "Links", "Bookings", "Team"].forEach((label, i) => {
-      k.rect(ui, 16, 16, i === 0 ? "primary" : "slot", { name: "Nav mark", radius: 5, absolute: { x: 26, y: 34 + i * 54 } });
-      k.text(ui, label, { style: "UI 18", color: i === 0 ? "onCard" : "faint", autoWidth: true, name: "Nav item", absolute: { x: 54, y: 30 + i * 54 } });
-    });
-    k.text(ui, "Booked", { style: "UI 18", color: "faint", autoWidth: true, name: "Booked label", absolute: { x: 26, y: 440 } });
-    k.text(ui, "7", { style: "UI figure 52", color: "onCard", autoWidth: true, name: "Booked figure", absolute: { x: 24, y: 466 } });
-    k.text(ui, "Your hours", { style: "UI title 26", color: "onCard", autoWidth: true, name: "Screen title", absolute: { x: GRID.x, y: 26 } });
-    const copy = k.stack(ui, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, padding: { top: 10, right: 18, bottom: 10, left: 18 }, name: "Copy link", absolute: { x: 632, y: 24 } });
-    k.text(copy, "Copy link", { style: "UI 18", color: "onPrimary", autoWidth: true, name: "Copy link label" });
-    ["Mon", "Tue", "Wed", "Thu", "Fri"].forEach((d, c) => k.text(ui, d, { style: "UI 18", color: "faint", autoWidth: true, name: "Day", absolute: { x: GRID.x + c * GRID.col + 4, y: 100 } }));
-    const slots = [];
-    for (let r = 0; r < 7; r++) for (let c = 0; c < 5; c++) slots.push(box(c * GRID.col, r * GRID.row, GRID.w, GRID.h));
-    k.vector(ui, 5 * GRID.col, 7 * GRID.row, slots, "slot", { name: "Slots", absolute: { x: GRID.x, y: GRID.y } });
-    for (const [c, r] of OPEN) k.rect(ui, GRID.w, GRID.h, k.tint("primary", 0.34), { name: "Open slot", stroke: { color: "primary", width: 2, align: "INSIDE" }, absolute: cell(c, r) });
-    const booking = k.stack(ui, { width: GRID.w, height: GRID.h, fill: "primary", justify: "CENTER", align: "CENTER", name: "Booking", absolute: BOOKED });
-    k.text(booking, "Dana 10:00", { style: "UI 18", color: "onPrimary", autoWidth: true, name: "Booking label" });
-    const toast = k.stack(ui, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "toast", radius: 10, padding: { top: 10, right: 16, bottom: 10, left: 14 }, effects: [shadow(k, "paper", 0.5, 10, 24)], name: "Toast", absolute: { x: 540, y: 78 } });
-    k.ellipse(toast, 14, "primary", { name: "Toast dot" });
-    k.text(toast, "Link copied", { style: "UI 18", color: "onToastInk", autoWidth: true, name: "Toast label" });
-    const p = pointer(k, stage, { ...REST, size: 104, fill: "toast", edge: "onToastInk", ring: "primary" });
-    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 10, name: "Step bars" });
-    for (let i = 1; i <= 3; i++) {
-      const track = k.stack(bars, { width: "FILL", height: 8, fill: "slot", radius: 4, clip: true, name: "Step track" });
-      k.rect(track, "FILL", 8, "primary", { name: `Step fill ${i}` });
-    }
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "card", ink: "onCard", radius: 14, stroke: { color: "line", width: 2, align: "INSIDE" } });
-    k.instance(sheet, "Button", { Label: "Start free at {{brand.site}}" }, { name: "Call" });
-    camera(k, cam, STAGE.width, STAGE.height, SHOTS);
-    const to = (i) => {
-      const at = seenAt(STAGE.width, STAGE.height, SHOTS[i], TARGETS[i]);
-      return { dx: at.x - REST.x, dy: at.y - REST.y };
-    };
-    glide(k, p, [
-      { t: beat(STEP[0]), dx: 0, dy: 0 },
-      { t: beat(STEP[0] + 1.6), ...to(0) },
-      { t: beat(STEP[1]), ...to(0) },
-      { t: beat(STEP[1] + 1.6), ...to(1) },
-      { t: beat(STEP[2]), ...to(1) },
-      { t: beat(STEP[2] + 1.6), ...to(2) },
-      { t: beat(STEP[3]), ...to(2) },
-      { t: beat(STEP[3] + 2), dx: 60, dy: 40 }
-    ]);
-    clicks(k, p, [beat(STEP[0] + 2), beat(STEP[1] + 2), beat(STEP[2] + 2)]);
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    k.variants(sheet, [...reelCuts({ post: 40, portrait: 80 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22, padding: { top: 44, right: 140, bottom: 44, left: 140 } });
-        hide(kit, id, ["Brand row", "Next week", "Next week booked"]);
-        patchAll(kit, id, "Stage", { height: 600 });
-        restyle(kit, id, "Hook", "Hook 64");
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
-        patchAll(kit, id, "Next week", { y: 1290 });
-        patchAll(kit, id, "Next week booked", { y: 1290 });
-      }
-    }), wideCut(640, (kit, id, right) => {
-      const scale = right.width / STAGE.width, top = right.y + Math.round((right.height - STAGE.height * scale - 38) / 2);
-      redrawLines(kit, id, GRID_LOOK);
-      float(kit, id, "Stage", right.x, top, { scale });
-      float(kit, id, "Step bars", right.x, top + Math.round(STAGE.height * scale) + 30, { width: right.width });
-      hide(kit, id, ["Next week", "Next week booked"]);
-    })]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  saas_screen_demo_default
-};

package/dist/chunks/chunk-2YVC6XTZ.js

@@ -1,47 +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 {
-  slideshow
-} from "./chunk-JYZIRBUJ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/slideshow/graduation.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var story = {
-  id: "motion-slideshow-graduation",
-  song: "vows",
-  meta: {
-    name: "Graduation class slideshow",
-    description: "A proud graduation film for a class or a school: a title card with the class year, the ceremony and the graduates as chapters, each face with a name and what comes next, cut on the beats of a warm piano track (made by PopCraft, CC0), slow pushes and light leaks, and a closing card with the school\u2019s congratulations. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
-    tags: ["animation", "slideshow", "graduation", "class of", "school", "university", "commencement", "students", "celebration", "photo", "music", "video"],
-    platforms: ["instagram", "facebook", "youtube", "tiktok"],
-    formats: ["video", "reel", "post"],
-    useCases: ["event", "education"],
-    created: "2026-10-10",
-    updated: "2026-10-10"
-  },
-  brand: { paper: "#F4EEDF", onPaper: "#1B2440", accent: "#B8892F", shade: "#0E1428", onPhoto: "#FFFFFF", leak: "#FFD27F" },
-  fields: { names: "Class of 2026", date: "Hartfield Academy \xB7 27 June 2026" },
-  scenes: [
-    { kind: "title", name: "Opening", photo: "grad-01", kicker: "Congratulations", beats: 8, move: "in", focus: 0.5 },
-    { kind: "chapter", name: "Chapter 1", kicker: "The day", title: "Commencement", beats: 3 },
-    { kind: "photo", name: "The hall", photo: "grad-00", caption: "Two hundred and twelve caps", beats: 4, move: "up" },
-    { kind: "chapter", name: "Chapter 2", kicker: "The graduates", title: "What\u2019s next", beats: 3 },
-    { kind: "photo", name: "Omar", photo: "grad-02", layout: "matted", caption: "Omar Siddiqui", place: "Engineering, Leeds", beats: 4, move: "in" },
-    { kind: "photo", name: "Lucia", photo: "grad-03", layout: "matted", caption: "Luc\xEDa Ferrer", place: "A gap year, then nursing", beats: 4, move: "right", into: "push" },
-    { kind: "photo", name: "Caps", photo: "grad-01", layout: "matted", caption: "And off they go", beats: 6, move: "in", into: "leak" },
-    { kind: "end", name: "Ending", kicker: "So proud of you all" }
-  ]
-};
-var graduation_default = slideshow(story);
-
-export {
-  story,
-  graduation_default
-};