@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-AOWWHODN.js

@@ -0,0 +1,238 @@
+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 {
+  accountPage,
+  accountPages,
+  appPages,
+  choice,
+  closing,
+  editInPlace,
+  errorLine,
+  eyebrow,
+  pane,
+  panes,
+  recordButton,
+  stat
+} from "./chunk-BTUNDBNF.js";
+import {
+  form,
+  repeats,
+  says,
+  userVariables,
+  visitorCollection
+} from "./chunk-3QTC5C65.js";
+import {
+  field,
+  formStyles,
+  select,
+  submit
+} from "./chunk-67AKXLTZ.js";
+import {
+  buttons
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/daybreak-app.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 450 } },
+  { layer: "Lead", preset: "rise-in", at: 100, params: { duration: 560 } },
+  { layer: "Art", preset: "rise-in", at: 200, params: { duration: 900 } },
+  { layer: "Body", preset: "rise-in", at: 280, params: { duration: 600 } }
+];
+var FEELINGS = ["Bright", "Steady", "Tired", "Heavy", "Not sure yet"];
+var ENERGY = ["Plenty", "Enough", "Running low"];
+var SAMPLES = [
+  { feeling: "Bright", energy: "Plenty", good_thing: "Coffee on the step before anyone was up.", day: "Fri 2 Oct" },
+  { feeling: "Steady", energy: "Enough", good_thing: "The walk home, in the last of the light.", day: "Thu 1 Oct" },
+  { feeling: "Tired", energy: "Running low", good_thing: "Soup, and an early night.", day: "Wed 30 Sep" }
+];
+var daybreak_app_default = defineTemplate({
+  id: "web-daybreak-app",
+  meta: {
+    name: "Daybreak \u2014 a check-in app with accounts",
+    description: "A working web app, not a mock: visitors create an account and sign in, the app knows them when they come back, and each keeps their own daily check-ins \u2014 added, changed where they are, listed newest first and deleted \u2014 with their streak, their week and their bright mornings worked out from them. A forgotten password is reset by email, and the account page changes the name and password or deletes the account. Publish it with a database and sign-in attached and it runs",
+    category: "web",
+    tags: ["app", "accounts", "sign in", "database", "form", "journal", "check-in", "mood", "dashboard", "website"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["planning", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Daybreak", preset("web-desktop"));
+    k.brand(
+      { paper: "#FFF8EE", text: "#2A1F14", onPaper: "#6E5F50", primary: "#B83A0B", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#2A1F14", cardMuted: "#7D6E5E", field: "#FFFFFF", onField: "#7D6E5E", line: "#EBDCC8", danger: "#B3261E", onDanger: "#FFFFFF" },
+      { name: "Daybreak" }
+    );
+    k.palette({ sun: "#FFC247", dawn: "#FFE3B8", glow: "#FF9F5A", hill: "#E8B48A", far: "#F3CDA8" });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Link 15", { size: 15, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Eyebrow 13", { size: 13, fontWeight: 700, letterSpacing: 1.4, lineHeight: 18 });
+    k.textStyle("Display 52", { size: 52, fontWeight: 800, letterSpacing: -1.6, lineHeight: 56 });
+    k.textStyle("Title 30", { size: 30, fontWeight: 800, letterSpacing: -0.7, lineHeight: 36 });
+    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Card title 17", { size: 17, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Meta 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Chip 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Error 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Stat 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 38 });
+    formStyles(k, { thanks: false });
+    buttons(k, { style: "Button 16" });
+    const user = userVariables(k, { name: "Maya", email: "maya@example.com" });
+    const checkins = visitorCollection(k, "Checkins", [
+      { name: "Feeling", type: "OPTION", options: [...FEELINGS] },
+      { name: "Energy", type: "OPTION", options: [...ENERGY] },
+      { name: "Good thing", type: "TEXT" },
+      { name: "Day", type: "DATE" }
+    ], SAMPLES);
+    const app = appPages(k, { brand: "Daybreak", width: 980, cues, gap: 28 });
+    const topBar = (column, right) => {
+      const row2 = k.stack(column, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top bar" });
+      const brand = k.stack(row2, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Brand" });
+      k.ellipse(brand, 26, "sun", { name: "Sun" });
+      k.text(brand, "{{brand.name}}", { style: "Brand 20", color: "text", autoWidth: true, name: "Brand name" });
+      right?.(row2);
+      return brand;
+    };
+    const sunrise = (parent, height = 380) => {
+      const art = k.stack(parent, { width: 420, height, radius: 32, fill: "dawn", clip: true, name: "Sunrise" });
+      k.ellipse(art, 300, "glow", { name: "Glow", absolute: { x: 60, y: height - 250 }, opacity: 0.5 });
+      k.ellipse(art, 170, "sun", { name: "Rising sun", absolute: { x: 125, y: height - 175 } });
+      k.ellipse(art, 260, "far", { name: "Far hill", absolute: { x: 0, y: height - 100 } });
+      k.ellipse(art, 280, "hill", { name: "Near hill", absolute: { x: 140, y: height - 80 } });
+      return art;
+    };
+    const welcome = app.page("Welcome", "/", "signedOut");
+    topBar(welcome.column, (row2) => app.link(k.text(row2, "Sign in", { style: "Link 15", color: "text", autoWidth: true, name: "Sign in link" }), "Sign in"));
+    const hero = panes(k, welcome.column, { gap: 36, align: "CENTER", name: "Hero" });
+    const lead = k.stack(hero, { gap: 18, name: "Lead" });
+    pane(k, lead, 300);
+    eyebrow(k, lead, "A MINUTE EACH MORNING", "Eyebrow 13");
+    k.text(lead, "Notice how the days are going.", { style: "Display 52", color: "text", name: "Headline" });
+    k.text(lead, "Daybreak asks three small questions a day and keeps your answers for you: how the day feels, how much you have in the tank, and one good thing.", { style: "Body 17", color: "onPaper", name: "Lead text" });
+    const ctas = k.stack(lead, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Calls to action" });
+    app.link(k.instance(ctas, "Button", { Label: "Create your account" }, { name: "Create account" }), "Sign up");
+    app.link(k.instance(ctas, "Button quiet", { Label: "I have one" }, { name: "Have account" }), "Sign in");
+    const heroArt = k.stack(hero, { align: "CENTER", name: "Art" });
+    pane(k, heroArt, 300);
+    sunrise(heroArt);
+    const closer = k.stack(welcome.column, { gap: 18, name: "Body" });
+    const points = panes(k, closer, { gap: 14, name: "Points" });
+    for (const [what, why] of [["Yours alone", "Your check-ins are kept for you and shown to nobody else."], ["Under a minute", "Two taps and a sentence. No badges, nothing to keep up with."], ["Looks back with you", "Your mornings in a row, your week, and the bright ones, whenever you want them."]]) {
+      const p = k.stack(points, { gap: 6, fill: "card", radius: 20, stroke: { color: "line", width: 1 }, padding: 22, name: "Point" });
+      pane(k, p, 240);
+      k.text(p, what, { style: "Card title 17", color: "onCard", name: "Point title" });
+      k.text(p, why, { style: "Meta 14", color: "cardMuted", name: "Point body" });
+    }
+    closing(k, app, closer, { title: "How is today going?", style: "Title 30", button: "Start tomorrow morning" });
+    const accounts = accountPages(k, app, {
+      styles: { title: "Title 30", body: "Body 17", meta: "Meta 14", link: "Link 15", error: "Error 14" },
+      top: (column, back) => back(topBar(column)),
+      art: (p) => {
+        k.patch(p, { counterAxisAlignItems: "CENTER" });
+        sunrise(p);
+      },
+      copy: {
+        "Sign up": { title: "Create your account", body: "It takes a name, an email and a password. Nothing else.", button: "Create account", namePlaceholder: "Maya" },
+        "Sign in": { title: "Welcome back", body: "Sign in to see your mornings.", button: "Sign in" }
+      }
+    });
+    const home = app.page("Home", "/home", "signedIn", { width: 760 });
+    topBar(home.column, (row2) => {
+      const who = k.stack(row2, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, fill: "card", stroke: { color: "line", width: 1 }, padding: { top: 6, right: 14, bottom: 6, left: 6 }, name: "Account link" });
+      k.ellipse(who, 24, "sun", { name: "Face" });
+      says(k, k.text(who, "Maya", { style: "Link 15", color: "onCard", autoWidth: true, name: "Account name" }), "name");
+      app.link(who, "Account", "up");
+    });
+    const greeting = k.stack(home.column, { gap: 2, name: "Lead" });
+    k.bindExpression(k.text(greeting, "Friday 2 October", { style: "Meta 14", color: "onPaper", name: "Today" }), "characters", "today()");
+    const line = k.stack(greeting, { direction: "HORIZONTAL", gap: 8, wrap: true, name: "Greeting line" });
+    k.text(line, "Good morning,", { style: "Title 30", color: "text", autoWidth: true, name: "Greeting words" });
+    says(k, k.text(line, "Maya", { style: "Title 30", color: "text", autoWidth: true, name: "Greeting name" }), "name");
+    const stats = panes(k, home.column, { gap: 10, name: "Art" });
+    for (const [label, expression, sample] of [["Mornings in a row", 'streak("Checkins")', "3"], ["This week", 'countSince("Checkins", 6)', "3"], ["Bright ones", 'count("Checkins", "feeling", "Bright")', "1"]]) stat(k, stats, { label, expression, sample, figure: "Stat 34", caption: "Meta 14", min: 160 });
+    const body = k.stack(home.column, { gap: 28, name: "Body" });
+    const today = k.stack(body, { gap: 16, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Check-in card" });
+    k.text(today, "How is today?", { style: "Card title 17", color: "onCard", name: "Check-in title" });
+    const checkIn = k.stack(today, { gap: 16, name: "Check-in form" });
+    choice(k, checkIn, { card: true, label: "It feels", name: "feeling", word: "todayFeeling", options: FEELINGS, style: "Chip 14" });
+    choice(k, checkIn, { card: true, label: "Energy", name: "energy", word: "todayEnergy", options: ENERGY, style: "Chip 14" });
+    field(k, checkIn, { card: true, label: "One good thing", name: "good_thing", placeholder: "Something small is fine", multiline: true, required: true });
+    errorLine(k, checkIn, "Error 14");
+    submit(k, checkIn, "Save today");
+    form(k, checkIn, { collectionId: checkins.id });
+    const answered = k.text(today, "Today is saved. Another thought? Add it too.", { style: "Meta 14", color: "cardMuted", name: "Answered" });
+    k.bindExpression(answered, "visible", 'countSince("Checkins", 0) > 0');
+    k.patch(answered, { visible: false });
+    const history = k.stack(body, { gap: 12, name: "Your mornings" });
+    const head = k.stack(history, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "History head" });
+    k.text(head, "Your mornings", { style: "Card title 17", color: "text", autoWidth: true, name: "History title" });
+    const tally = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 5, align: "MAX", name: "Tally" });
+    k.bindExpression(k.text(tally, "3", { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Tally number" }), "characters", checkins.word);
+    k.text(tally, "kept", { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Tally word" });
+    const empty = k.text(history, "Nothing yet. Your first check-in will show up here.", { style: "Meta 14", color: "onPaper", name: "Empty" });
+    k.bindExpression(empty, "visible", `${checkins.word} == 0`);
+    k.patch(empty, { visible: false });
+    const list = k.stack(history, { gap: 10, name: "Mornings list" });
+    repeats(k, list, checkins.id, { limit: 60 });
+    const row = k.stack(list, { gap: 8, fill: "card", radius: 16, stroke: { color: "line", width: 1 }, padding: 18, name: "Morning" });
+    const view = k.stack(row, { gap: 8, name: "Morning view" });
+    const meta = k.stack(view, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", wrap: true, name: "Morning head" });
+    const when = k.stack(meta, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Morning when" });
+    k.text(when, "{{item.day}}", { style: "Meta 14", color: "cardMuted", autoWidth: true, name: "Morning day" });
+    k.text(when, "{{item.feeling}} \xB7 {{item.energy}}", { style: "Meta 14", color: "onCard", autoWidth: true, name: "Morning feeling" });
+    const actions = k.stack(meta, { direction: "HORIZONTAL", width: "HUG", gap: 2, align: "CENTER", name: "Morning actions" });
+    const edit = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 8, bottom: 4, left: 8 }, name: "Edit" });
+    k.text(edit, "Edit", { style: "Meta 14", color: "cardMuted", autoWidth: true, name: "Edit label" });
+    k.patch(edit, { control: { kind: "BUTTON", buttonType: "button" } });
+    recordButton(k, actions, "Delete", { style: "Meta 14", color: "cardMuted", pad: [4, 8], radius: 8 });
+    k.text(view, "{{item.good_thing}}", { style: "Body 17", color: "onCard", name: "Morning good thing" });
+    editInPlace(k, { word: "editingMorning", view, parent: row, trigger: edit, style: "Meta 14", build: (f) => {
+      const pre = (id, name) => k.patch(id, { control: { ...k.node(id).control, value: `{{item.${name}}}` } });
+      const pair = k.stack(f, { direction: "HORIZONTAL", gap: 12, name: "Edit pair" });
+      pre(select(k, pair, { card: true, label: "It felt", name: "feeling", options: FEELINGS }), "feeling");
+      pre(select(k, pair, { card: true, label: "Energy", name: "energy", options: ENERGY }), "energy");
+      pre(field(k, f, { card: true, label: "One good thing", name: "good_thing", placeholder: "Something small is fine", multiline: true, required: true }), "good_thing");
+    } });
+    const out = accountPage(k, app, {
+      user,
+      home: "Home",
+      back: "Back to today",
+      sample: { name: "Maya", email: "maya@example.com" },
+      styles: { eyebrow: "Eyebrow 13", title: "Title 30", label: "Meta 14", value: "Card title 17", stat: "Stat 34", link: "Link 15", meta: "Meta 14", error: "Error 14", button: "Button 16" },
+      count: { label: "Check-ins kept", word: checkins.word, sample: "3" },
+      top: (column, right) => {
+        topBar(column, right);
+      },
+      art: (p) => {
+        sunrise(p, 300);
+      }
+    });
+    app.finish("Welcome");
+    accounts.leads("Home");
+    out.leads();
+    return k.finish();
+  }
+});
+
+export {
+  daybreak_app_default
+};

package/dist/chunks/chunk-AP72CZNM.js

@@ -0,0 +1,101 @@
+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-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/scenes/before-after.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var io = ease.inOut("cubic");
+var CUES = [
+  { layer: "After", preset: "wipe-in", at: 500, params: { duration: 1800, ease: io, direction: "right" } },
+  { layer: "After", preset: "wipe-out", at: 3300, params: { duration: 1400, ease: io, direction: "right" } },
+  { layer: "After chip", preset: "fade-in", at: 1900, params: { duration: 300 } },
+  { layer: "After chip", preset: "fade-out", at: 3300, params: { duration: 300 } },
+  { layer: "Before chip", preset: "fade-out", at: 500, params: { duration: 300 } },
+  { layer: "Before chip", preset: "fade-in", at: 4400, params: { duration: 300 } }
+];
+var WIPE_MIN = 0.01;
+var SIZE = 1080;
+var before_after_default = defineTemplate({
+  id: "motion-before-after",
+  meta: {
+    name: "Before / after",
+    description: "A before/after reveal for a redesign, a makeover or a product upgrade: the after wipes across the before through an animated mask, a divider riding its edge, then wipes back \u2014 a seamless 5-second loop at 1080\xD71080, 30 fps.",
+    category: "animation",
+    tags: ["animation", "before after", "reveal", "wipe", "mask", "redesign", "loop"],
+    platforms: ["instagram", "facebook"],
+    formats: ["post"],
+    useCases: ["announcement"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  // Seamless, though not a `loop` in the cue checks' sense: the before chip is up at both ends, not gone.
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Before / after", preset("ig-post"));
+    k.brand({ primary: "#101828", accent: "#6D3BFF", highlight: "#FFD84D", old: "#D0D5DD", oldInk: "#667085", onDark: "#FFFFFF", onAccent: "#FFFFFF" });
+    k.patch(k.pageId, { name: "Before / after" });
+    k.textStyle("Display 96", { size: 96, fontWeight: 800, lineHeight: 104, letterSpacing: -2 });
+    k.textStyle("Body 36", { size: 36, fontWeight: 500, lineHeight: 48 });
+    k.textStyle("Label 28", { size: 28, fontWeight: 800, lineHeight: 32, letterSpacing: 3 });
+    const shadow = (blur, y, a) => ({ type: "DROP_SHADOW", color: k.color("primary", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+    k.component("Chip", {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      align: "CENTER",
+      padding: { top: 14, right: 26, bottom: 14, left: 26 },
+      fill: "onDark",
+      radius: 999,
+      effects: [shadow(24, 8, 0.18)],
+      description: "A label chip.",
+      props: { Label: "BEFORE" }
+    }, (id) => {
+      k.propText(id, "Label", { style: "Label 28", color: "primary", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Before / after");
+    k.flowSheet(sheet, 32, 0, "old", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    const side = (name, fill, ink, headline, body, pill, pillInk, label) => {
+      const s = k.stack(sheet, { width: SIZE, height: SIZE, absolute: { x: 0, y: 0 }, justify: "CENTER", align: "CENTER", gap: 40, padding: { top: 140, right: 120, bottom: 140, left: 120 }, fill, name });
+      k.text(s, headline, { style: "Display 96", color: ink, align: "CENTER", name: "Headline" });
+      k.text(s, body, { style: "Body 36", color: ink, align: "CENTER", name: "Body" });
+      const button = k.stack(s, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", padding: { top: 26, right: 56, bottom: 26, left: 56 }, fill: pill, radius: 999, name: "Button" });
+      k.text(button, label, { style: "Label 28", color: pillInk, autoWidth: true, name: "Button label" });
+    };
+    side("Before", "old", "oldInk", "Plain and forgettable", "Same layout, no colour, nothing to look at.", "oldInk", "onDark", "LEARN MORE");
+    side("After", "accent", "onAccent", "Bold and unmissable", "The same content, redesigned to stop the scroll.", "highlight", "primary", "SHOP NOW");
+    const divider = k.stack(sheet, { width: 72, height: SIZE, absolute: { x: -36, y: 0 }, justify: "CENTER", align: "CENTER", gap: 12, name: "Divider" });
+    k.rect(divider, 6, 480, "onDark", { name: "Line" });
+    k.ellipse(divider, 72, "onDark", { effects: [shadow(24, 6, 0.25)], name: "Handle" });
+    k.rect(divider, 6, 480, "onDark", { name: "Line" });
+    k.patch(divider, { translateX: SIZE });
+    k.instance(sheet, "Chip", { Label: "BEFORE" }, { name: "Before chip", absolute: { x: 48, y: 48 } });
+    const afterChip = k.instance(sheet, "Chip", { Label: "AFTER" }, { name: "After chip", absolute: { x: SIZE - 48 - 180, y: 48 } });
+    k.finish();
+    k.patch(afterChip, { x: SIZE - 48 - k.node(afterChip).width });
+    k.cues(sheet, CUES);
+    k.animate(divider, "translateX", [{ t: 500, v: WIPE_MIN, ease: io }, { t: 2300, v: SIZE, ease: ease.hold }, { t: 3300, v: SIZE, ease: io }, { t: 4700, v: WIPE_MIN }]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  before_after_default
+};

package/dist/chunks/chunk-APY4HFW2.js

@@ -0,0 +1,192 @@
+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 {
+  growStems,
+  solarpunkBrand,
+  town
+} from "./chunk-PN6TDHID.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  score
+} from "./chunk-52GCV7N5.js";
+import {
+  place
+} from "./chunk-QLV6445V.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/solarpunk-rooftop-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = score("acoustic");
+var DURATION = MUSIC.duration;
+var beat = MUSIC.beat;
+var TOWN_W = 1760;
+var BLEED = (TOWN_W - 1080) / 2;
+var TOWN = {
+  // The reel does not loop, so the town's idle motion runs at twice the pace one turn of the film would give it.
+  w: TOWN_W,
+  h: 1920,
+  base: 1040,
+  bed: 1130,
+  u: 1,
+  loopMs: DURATION / 2,
+  seed: 9,
+  sun: { x: BLEED + 760, y: 720, size: 360 },
+  clouds: [{ x: BLEED + 170, y: 650, w: 300 }, { x: BLEED + 990, y: 590, w: 240 }, { x: 150, y: 600, w: 260 }, { x: 1640, y: 660, w: 240 }, { x: BLEED + 250, y: 120, w: 340 }, { x: BLEED + 860, y: 190, w: 260 }, { x: 120, y: 240, w: 300 }, { x: 1620, y: 150, w: 280 }],
+  birds: [{ x: BLEED + 620, y: 110, size: 16 }, { x: BLEED + 670, y: 86, size: 12 }, { x: BLEED + 720, y: 124, size: 10 }, { x: BLEED + 60, y: 560, size: 14 }, { x: BLEED + 110, y: 590, size: 10 }, { x: 200, y: 400, size: 14 }, { x: 1560, y: 380, size: 14 }],
+  turbines: [{ x: BLEED + 760, h: 300 }, { x: BLEED + 400, h: 350 }, { x: BLEED + 1040, h: 330 }, { x: 150, h: 400 }, { x: 1620, h: 420 }],
+  birdInk: "onPaper",
+  dawn: 540,
+  // Under the offer (where a vertical app lays its own buttons over the video), the product's namesake.
+  trellis: {
+    top: 1500,
+    vines: [
+      { x: BLEED + 230, y: 1960, height: 330, sway: 30, lean: 70, curl: 1, leaves: 6, leaf: 64, weight: 7, bloom: true },
+      { x: BLEED + 540, y: 1960, height: 400, sway: 34, lean: -16, curl: -1, leaves: 7, leaf: 70, weight: 8, bloom: true },
+      { x: BLEED + 850, y: 1960, height: 340, sway: -30, lean: -70, curl: -1, leaves: 6, leaf: 64, weight: 7, bloom: true }
+    ]
+  },
+  blocks: [
+    { x: 250, w: 180, h: 330, kind: "garden", vine: true },
+    { x: BLEED + 150, w: 190, h: 360, kind: "garden", vine: true },
+    { x: BLEED + 560, w: 180, h: 330, kind: "terrace" },
+    { x: BLEED + 880, w: 190, h: 370, kind: "garden", vine: true },
+    { x: 1560, w: 180, h: 300, kind: "terrace" },
+    { x: 40, w: 230, h: 220, kind: "dome" },
+    { x: BLEED - 20, w: 210, h: 250, kind: "solar" },
+    { x: BLEED + 310, w: 260, h: 210, kind: "dome" },
+    { x: BLEED + 700, w: 220, h: 240, kind: "solar", vine: true },
+    { x: 1400, w: 200, h: 230, kind: "dome" }
+  ],
+  fronds: [{ x: BLEED + 40, y: 1700, size: 320, lean: 0.25 }, { x: BLEED + 1040, y: 1740, size: 360, lean: -0.25 }, { x: BLEED + 300, y: 1990, size: 280 }, { x: BLEED + 790, y: 2e3, size: 300 }, { x: 150, y: 1960, size: 300 }, { x: 1640, y: 1960, size: 300 }]
+};
+var swaps = [
+  { layer: "Caption", words: ["Your meters already know where the watts go.", "Trellis reads them. No new hardware.", "It finds the power you can stop buying.", "Then it plans what your roof could grow."], at: beat(2), hold: 1825, stagger: 50, in: 350, out: 250, unit: "word", rise: 30 }
+];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Hook", preset: "lines-in", at: 0, params: { duration: 600 } },
+  { layer: "Block", preset: "rise-in", at: beat(1), params: { duration: 700 }, stagger: { delay: 90 } },
+  { layer: "Turbine", preset: "rise-in", at: beat(2), params: { duration: 700 }, stagger: { delay: 150 } },
+  { layer: "Leaf", preset: "scale-in", at: beat(5), params: { duration: 500 }, stagger: { delay: 45 } },
+  { layer: "Bloom", preset: "pop-in", at: beat(8), params: { duration: 450 }, stagger: { delay: 200 } },
+  // Each reading pops out as the caption that speaks of it comes in.
+  { layer: "Reading A", preset: "pop-in", at: beat(12), params: { duration: 450 } },
+  { layer: "Reading B", preset: "pop-in", at: beat(17), params: { duration: 450 } },
+  { layer: "Front leaf", preset: "scale-in", at: beat(22), params: { duration: 500 }, stagger: { delay: 110 } },
+  { layer: "Call", preset: "rise-in", at: beat(22), params: { duration: 600 } },
+  { layer: "Site", preset: "fade-in", at: beat(23), params: { duration: 600 } },
+  { layer: "Call", preset: "pulse", at: beat(26), params: { duration: 900, amount: 0.05 } },
+  // The last bar is one ringing chord: the trellis flowers on it.
+  { layer: "Front bloom", preset: "pop-in", at: beat(28), params: { duration: 450 }, stagger: { delay: 200 } }
+];
+var solarpunk_rooftop_reel_default = defineTemplate({
+  id: "motion-solarpunk-rooftop-reel",
+  meta: {
+    name: "Solarpunk rooftop reel",
+    description: "A 20-second launch reel for a climate or energy product: \u201CYour roof is doing nothing.\u201D lands at once, then a rooftop town builds itself under it \u2014 houses rise, turbines turn, vines draw themselves up the walls and unfurl leaf by leaf while the sun climbs \u2014 with the story in burned-in captions over a fingerpicked guitar (made by PopCraft, CC0), every entrance on a beat, and a trellis that flowers under the offer on the last chord. 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "solarpunk", "botanical", "art nouveau", "climate", "energy", "sustainability", "solar", "wind", "vines", "saas", "reel", "captions", "music", "audio", "launch"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Solarpunk rooftop reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    solarpunkBrand(k, { hook: "Your roof is\ndoing nothing." });
+    k.textStyle("Eyebrow 26", { size: 26, fontWeight: 700, letterSpacing: 5, lineHeight: 34, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Display 112", { ...SERIF, size: 112, fontWeight: 700, fontStyle: "italic", letterSpacing: -3.4, lineHeight: 108, textAlign: "CENTER" });
+    k.textStyle("Display 84", { ...SERIF, size: 84, fontWeight: 700, fontStyle: "italic", letterSpacing: -2.4, lineHeight: 84, textAlign: "CENTER" });
+    k.textStyle("Display 68", { ...SERIF, size: 68, fontWeight: 700, fontStyle: "italic", letterSpacing: -1.8, lineHeight: 70, textAlign: "CENTER" });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.4, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 700, letterSpacing: -0.3, lineHeight: 40, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Site 26", { size: 26, fontWeight: 600, letterSpacing: 1, lineHeight: 34, textAlign: "CENTER" });
+    k.textStyle("Reading 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 28 });
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: "Button 32", label: "Plant your first building", pad: [22, 44] });
+    pill(k, "Reading", { fill: "card", ink: "onCard", style: "Reading 22", label: "Meter 14 \xB7 idle load 31%", pad: [12, 20], radius: 10 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Rooftop reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    town(k, sheet, TOWN, { x: -BLEED, y: 0 });
+    const top = k.stack(sheet, { gap: 18, align: "CENTER", name: "Top" });
+    k.text(top, "{{brand.name}} \xB7 for buildings that give back", { style: "Eyebrow 26", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "{{brand.hook}}", { style: "Display 112", color: "text", name: "Hook" });
+    const foot = k.stack(sheet, { gap: 26, align: "CENTER", name: "Foot" });
+    k.text(foot, swaps[0].words[0], { style: "Caption 40", color: "cream", name: "Caption" });
+    k.instance(foot, "Button", { Label: "Plant your first building" }, { name: "Call" });
+    k.text(foot, "Free for one building \xB7 {{brand.site}}", { style: "Site 26", color: "cream", name: "Site" });
+    k.instance(sheet, "Reading", { Label: "Meter 14 \xB7 idle load 31%" }, { name: "Reading A", absolute: { x: 150, y: 800 } });
+    k.instance(sheet, "Reading", { Label: "Roof B \xB7 room for 48 panels" }, { name: "Reading B", absolute: { x: 520, y: 930 } });
+    if (swapTimes(swaps[0]).at(-1).gone > DURATION) throw new Error("solarpunk reel: the captions run past the music");
+    for (const s of k.named(sheet, "Sun")) k.animate(s, "translateY", [{ t: 0, v: 260, ease: ease.out("cubic") }, { t: beat(16), v: 0 }]);
+    growStems(k, sheet, beat(4), 1800, 120);
+    growStems(k, sheet, beat(20), 2500, 300, void 0, "Front stem");
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const reframe = (kit, id, spread) => {
+      kit.named(id, "Cloud").forEach((c, i) => {
+        if (i >= 4) kit.patch(c, { visible: false });
+      });
+      for (const b of [...kit.named(id, "Birds"), ...kit.named(id, "Trellis")]) kit.patch(b, { visible: false });
+      kit.named(id, "Fronds").slice(0, 2).forEach((f, i) => kit.patch(f, { x: kit.node(f).x + (i ? spread : -spread) }));
+    };
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        const s = 1080 / TOWN_W;
+        place(kit, id, "Town", 0, 30, s);
+        reframe(kit, id, 200);
+        for (const n of kit.named(id, "Hook")) kit.restyle(n, "Display 68");
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 32");
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 16 });
+        for (const n of kit.named(id, "Reading A")) kit.patch(n, { x: 60, y: 440 });
+        for (const n of kit.named(id, "Reading B")) kit.patch(n, { x: 610, y: 560 });
+      },
+      portrait: (kit, id) => {
+        const s = 0.8;
+        place(kit, id, "Town", (1080 - TOWN_W * s) / 2, 20, s);
+        reframe(kit, id, 90);
+        for (const n of kit.named(id, "Hook")) kit.restyle(n, "Display 84");
+        for (const n of kit.named(id, "Reading A")) kit.patch(n, { x: 70, y: 600 });
+        for (const n of kit.named(id, "Reading B")) kit.patch(n, { x: 610, y: 720 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  solarpunk_rooftop_reel_default
+};

package/dist/chunks/chunk-ARFNMVWS.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 {
+  bar,
+  captionGrid,
+  commonReflow,
+  finishSite,
+  foot,
+  portfolioKit,
+  portfolioSite,
+  projectPage,
+  studioPage
+} from "./chunk-FSALE4HC.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/portfolio-cube-gallery.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "Tor speaker", client: "Halde Audio", year: "2026", kind: "Consumer electronics", cover: "cube-00", summary: "A speaker you carry by its strap and set down on any shelf as if it were a stone.", story: "Halde wanted one speaker for the kitchen, the garden and the bag. We gave it a single knitted band that is the handle, the stand and the grille, and a body milled from one block so it sits level on gravel.", credits: "Industrial design, CMF, prototyping \u2014 Oda Vale Studio \xB7 Engineering \u2014 Halde" },
+  { title: "Ember desk lamp", client: "Lumen & Ash", year: "2025", kind: "Lighting", cover: "cube-01", summary: "An amber shade on a brass hinge that dims as you tip it down.", story: "The hinge is the switch and the dimmer: tip it down to read, up to light the wall. Six months of prototypes went into a friction joint that holds any angle and never droops.", credits: "Design, prototyping \u2014 Oda Vale Studio \xB7 Production \u2014 Lumen & Ash" },
+  { title: "Mira stand mixer", client: "Kettle & Co.", year: "2025", kind: "Kitchen appliance", cover: "cube-02", summary: "A modular mixer whose bowl, motor and arm come apart for the dishwasher.", story: "Three parts, two clicks. We cut the part count by a third and moved the motor low so the mixer stays put on a full dough.", credits: "Industrial design, DFM \u2014 Oda Vale Studio" },
+  { title: "Ridge kettle", client: "Kettle & Co.", year: "2024", kind: "Kitchen appliance", cover: "cube-03", summary: "An aluminium kettle with a walnut handle that never gets hot.", story: "A double wall, a handle set off the body by a centimetre of air, and a spout drawn so it pours without a drip from full to the last cup.", credits: "Design \u2014 Oda Vale Studio \xB7 Engineering \u2014 Kettle & Co." },
+  { title: "Felt headphones", client: "Norr Sound", year: "2024", kind: "Wearables", cover: "cube-04", summary: "Over-ear headphones in wool felt, made to be repaired at home.", story: "Every part is held by a screw, not glue: the cushions, the band and the battery come out with one tool, and Norr sells each one on its own.", credits: "Industrial design, CMF \u2014 Oda Vale Studio" },
+  { title: "Fold chair", client: "Sette", year: "2023", kind: "Furniture", cover: "cube-05", summary: "A chair bent from a single sheet of steel, with no joints at all.", story: "One laser cut and four bends: the chair ships flat in a sleeve and is folded once at the factory. It stacks twelve high.", credits: "Design \u2014 Oda Vale Studio \xB7 Production \u2014 Sette" }
+];
+var portfolio_cube_gallery_default = defineTemplate({
+  id: "web-portfolio-cube-gallery",
+  meta: {
+    name: "Cube turn portfolio",
+    description: "An industrial designer\u2019s site where each page is a face of a 3D cube: open a product and the cube turns to it, go home and it turns back. Products on soft cards three across, a page per product with the render and the brief, and a studio page. The turn is drawn on the GPU with WebGPU, in CSS 3D elsewhere. The products are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "cube", "transition", "webgpu", "industrial design", "product design", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build() {
+    const k = portfolioKit("Cube turn");
+    k.brand(
+      { paper: "#ECEAE6", text: "#1D1C1A", onPaper: "#625E59", primary: "#1D1C1A", onPrimary: "#ECEAE6", card: "#F7F6F3", onCard: "#1D1C1A", cardMuted: "#625E59", line: "#D7D3CC" },
+      { name: "Oda Vale Studio", email: "hello@odavale.studio" }
+    );
+    k.textStyle("Wordmark 18", { size: 18, fontWeight: 700, letterSpacing: -0.3, lineHeight: 24 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Meta 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Title 20", { size: 20, fontWeight: 600, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 28 });
+    k.textStyle("Display 64", { size: 64, fontWeight: 600, letterSpacing: -2.2, lineHeight: 68 });
+    k.textStyle("Display 40", { size: 40, fontWeight: 600, letterSpacing: -1.2, lineHeight: 46 });
+    const type = { title: "Title 20", meta: "Meta 14", body: "Body 17", small: "Small 14", display: "Display 64" };
+    const s = portfolioSite(k, { name: "Oda Vale Studio", projects: WORK, go: "CUBE_FROM_RIGHT", back: "CUBE_FROM_LEFT" });
+    const W = 1440, SIDE = 96;
+    for (const page of Object.values(s.screens)) bar(s, page, { type, wordmark: "Wordmark 18", links: [["work", "Products"], ["studio", "Studio"]], pad: [28, SIDE] });
+    const work = s.screens.work;
+    const lead = k.stack(work, { gap: 20, padding: { top: 72, right: SIDE, bottom: 64, left: SIDE }, name: "Lead" });
+    k.text(lead, "Objects for everyday rooms, designed to be kept.", { style: "Display 64", color: "text", width: 960, name: "Headline" });
+    k.text(lead, "Oda Vale is an industrial design studio in Copenhagen: speakers, lamps, kitchen things and furniture, from the first foam model to the line at the factory.", { style: "Body 17", color: "onPaper", width: 640, name: "Intro" });
+    const art = k.stack(work, { padding: { top: 0, right: SIDE, bottom: 0, left: SIDE }, name: "Art" });
+    captionGrid(s, art, { cols: 3, width: W - SIDE * 2, gap: 24, ratio: 0.72, radius: 18, type, card: { fill: "card", pad: 14, radius: 26 }, meta: "{{item.client}} \xB7 {{item.year}}", captionGap: 16 });
+    foot(s, work, { type, side: SIDE, elsewhere: "Instagram \xB7 Dezeen \xB7 Read.cv" });
+    k.patch(k.named(work, "Footer")[0], { name: "Body" });
+    projectPage(s, { type, width: W, side: SIDE, ratio: 0.66, radius: 24, split: true, kicker: "Product", more: { cols: 3, gap: 24, ratio: 0.66, label: "More products" } });
+    foot(s, s.screens.project, { type, side: SIDE, elsewhere: "Instagram \xB7 Dezeen \xB7 Read.cv" });
+    studioPage(s, {
+      type: { ...type, display: "Display 40" },
+      width: W,
+      side: SIDE,
+      picture: "cube-05",
+      ratio: 0.42,
+      radius: 24,
+      statement: "Four designers, a workshop and a CNC mill, two streets from the harbour.",
+      about: "We design a few products a year, each for a company that means to make it for a long time. We prototype everything we draw in our own workshop before a factory sees it.",
+      services: ["Industrial design", "Colour, materials and finish", "Prototyping and testing", "Design for manufacture"],
+      clients: "Halde Audio, Lumen & Ash, Kettle & Co., Norr Sound and Sette.",
+      contact: "Booking projects for spring 2027."
+    });
+    foot(s, s.screens.studio, { type, side: SIDE, elsewhere: "Instagram \xB7 Dezeen \xB7 Read.cv" });
+    finishSite(s, { all: commonReflow({ desktopSide: SIDE, ratio: 0.72, gap: 24, cols: { laptop: 3, tablet: 2, mobile: 1 }, moreCols: 3, moreRatio: 0.66, cardPad: 14, split: true, pictureRatio: 0.66, studioRatio: 0.42, restyle: { "Display 64": { laptop: "Display 40", tablet: "Display 40", mobile: "Display 40" } } }) });
+    return k.finish();
+  }
+});
+
+export {
+  portfolio_cube_gallery_default
+};