@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-6QXJBXDE.js

@@ -0,0 +1,200 @@
+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 {
+  soft
+} from "./chunk-T6QWDC3F.js";
+import {
+  gridPaths
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  ground
+} from "./chunk-YHBAWSDX.js";
+import {
+  logoBadge
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/saas-store-chrome-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ARTICLE = [
+  "For most of its history the web was read, not scrolled. A page had an author, a date and an end.",
+  { mark: "What we call reading online is now mostly triage: deciding, in seconds, what not to read." },
+  "The cost is not attention, which recovers. It is memory. We finish forty tabs a day and can quote none of them a week later.",
+  { mark: "A highlight is a promise to your future self that this sentence mattered." },
+  "Readers who mark a text recall it roughly twice as well as readers who do not, and the effect holds whether the pen is real or not."
+];
+var SHOTS = [
+  { key: "Highlight", claim: "Mark it once. Keep it for good.", note: "Select any sentence on any page. Margin saves it with the source and the date.", popup: "highlights" },
+  { key: "Summarise", claim: "Five lines, from your own highlights.", note: "A summary built only from what you marked, so it says what you thought mattered.", popup: "summary" },
+  { key: "Export", claim: "Send it where you write.", note: "Notion, Obsidian, Readwise or plain Markdown. One click, no account needed.", popup: "export" }
+];
+var saas_store_chrome_kit_default = defineTemplate({
+  id: "social-saas-store-chrome-kit",
+  meta: {
+    name: "SaaS store Chrome Web Store kit",
+    description: "A whole Chrome Web Store listing in the Swiss typographic look: the 440 \xD7 280 small tile, the 1400 \xD7 560 marquee and three 1280 \xD7 800 screenshots, each showing the extension\u2019s popup hanging from its toolbar button over an article in a browser window, with the claim set large beside it. Drop your own page capture on the browser\u2019s picture slot; the popup is auto layout you can retype",
+    category: "social",
+    tags: ["saas", "saas store", "chrome web store", "extension", "browser extension", "tile", "marquee", "screenshots", "popup", "swiss", "listing", "plugin"],
+    platforms: ["chrome-web-store", "web", "desktop"],
+    formats: ["screenshot", "banner", "thumbnail", "gallery"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store Chrome Web Store kit", preset("cws-marquee"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1F0EB", text: "#111111", primary: "#D4201A", onPrimary: "#FFFFFF" },
+      { name: "Margin", tagline: "Read once. Keep the good parts." }
+    );
+    k.palette({ card: "#FFFFFF", onCard: "#141414", cardMuted: "#5B5B57", chrome: "#E4E3DD", onChrome: "#3A3A37", rule: "#CFCDC4", mark: "#FFD6D2", ink: "#111111", onInk: "#F1F0EB" });
+    k.textStyle("Claim 66", { size: 66, fontWeight: 800, letterSpacing: -3, lineHeight: 67 });
+    k.textStyle("Note 24", { size: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 34 });
+    k.textStyle("Label 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1.2, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Url 16", { ...MONO, size: 16, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Article title 40", { ...SERIF, size: 40, fontWeight: 700, letterSpacing: -1, lineHeight: 46 });
+    k.textStyle("Article 20", { ...SERIF, size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Popup title 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 26 });
+    k.textStyle("Popup 16", { size: 16, fontWeight: 500, lineHeight: 23 });
+    k.textStyle("Popup strong 16", { size: 16, fontWeight: 700, lineHeight: 23 });
+    k.textStyle("Name 150", { size: 150, fontWeight: 900, letterSpacing: -8, lineHeight: 140 });
+    k.textStyle("Tagline 40", { size: 40, fontWeight: 700, letterSpacing: -1.2, lineHeight: 46 });
+    k.textStyle("Tile name 64", { size: 64, fontWeight: 900, letterSpacing: -3, lineHeight: 64 });
+    k.textStyle("Tile note 20", { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 });
+    k.component("Popup button", { width: 340, fill: "primary", radius: 10, align: "CENTER", padding: { top: 12, right: 16, bottom: 12, left: 16 }, description: "The popup\u2019s one action.", props: { Label: "Summarise this page" } }, (id) => {
+      k.propText(id, "Label", { style: "Popup strong 16", color: "onPrimary", align: "CENTER" });
+    });
+    const browser = (sheet, x, y, w, h) => {
+      const win = k.stack(sheet, { width: w, height: h, fill: "card", radius: 14, clip: true, stroke: { color: "rule", width: 2, align: "INSIDE" }, effects: [soft(k, "ink", 0.18, 24, 60)], name: "Browser", absolute: { x, y } });
+      const tabs = k.stack(win, { direction: "HORIZONTAL", height: 44, fill: "chrome", gap: 12, align: "MAX", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Tab strip" });
+      const dots = k.stack(tabs, { direction: "HORIZONTAL", width: "HUG", height: 44, gap: 8, align: "CENTER", name: "Window dots" });
+      for (let i = 0; i < 3; i++) k.ellipse(dots, 12, "rule", { name: "Window dot" });
+      const tab = k.stack(tabs, { direction: "HORIZONTAL", width: 260, height: 34, fill: "card", gap: 10, align: "CENTER", padding: { top: 0, right: 14, bottom: 0, left: 14 }, name: "Tab" });
+      k.patch(tab, { cornerRadius: [10, 10, 0, 0] });
+      k.rect(tab, 14, 14, "ink", { radius: 3, name: "Favicon" });
+      k.text(tab, "The quiet web", { style: "Url 16", color: "onCard", name: "Tab title" });
+      const bar = k.stack(win, { direction: "HORIZONTAL", height: 52, gap: 14, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Toolbar" });
+      for (let i = 0; i < 2; i++) k.rect(bar, 18, 18, "rule", { radius: 9, name: "Nav button" });
+      const url = k.stack(bar, { direction: "HORIZONTAL", height: 34, fill: "chrome", radius: 17, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Address" });
+      k.text(url, "longreads.example/the-quiet-web", { style: "Url 16", color: "onChrome", name: "Url" });
+      k.rect(bar, 22, 22, "rule", { radius: 6, name: "Other extension" });
+      const button = k.stack(bar, { width: 34, height: 34, fill: "primary", radius: 9, align: "CENTER", justify: "CENTER", name: "Extension button" });
+      k.rect(button, 6, 18, "onPrimary", { radius: 2, name: "Extension mark" });
+      k.rect(bar, 22, 22, "rule", { radius: 11, name: "Profile" });
+      k.rect(win, "FILL", 2, "rule", { name: "Toolbar rule" });
+      const bodyH = h - 44 - 52 - 2;
+      const body = k.stack(win, { height: bodyH, clip: true, name: "Page" });
+      k.photo(body, w, bodyH, { ground: "chrome", name: "Your page", absolute: { x: 0, y: 0 } });
+      const page = k.frame(body, { x: 0, y: 0, width: w, height: bodyH }, { name: "Placeholder page", fill: "card" });
+      const col = k.stack(page, { width: w - 56 - 300, gap: 18, name: "Article", absolute: { x: 56, y: 44 } });
+      k.text(col, "Essay \xB7 9 min read", { style: "Label 18", color: "cardMuted", name: "Article meta" });
+      k.text(col, "The quiet web, and how we stopped reading it", { style: "Article title 40", color: "onCard", name: "Article title" });
+      k.rect(col, 80, 4, "ink", { name: "Article rule" });
+      for (const p of ARTICLE) {
+        if (typeof p === "string") k.text(col, p, { style: "Article 20", color: "onCard", name: "Paragraph" });
+        else {
+          const m = k.stack(col, { fill: "mark", padding: { top: 4, right: 8, bottom: 6, left: 8 }, name: "Highlight" });
+          k.text(m, p.mark, { style: "Article 20", color: "onCard", name: "Highlighted" });
+        }
+      }
+      return win;
+    };
+    const popup = (sheet, x, y, kind) => {
+      k.rect(sheet, 22, 22, "card", { name: "Popup tail", absolute: { x: x + 306, y: y - 9 }, stroke: { color: "rule", width: 2, align: "INSIDE" } });
+      for (const id of k.named(sheet, "Popup tail")) k.patch(id, { rotation: 45 });
+      const pop = k.stack(sheet, { width: 380, gap: 14, fill: "card", radius: 16, padding: 20, stroke: { color: "rule", width: 2, align: "INSIDE" }, effects: [soft(k, "ink", 0.3, 26, 60)], name: "Popup", absolute: { x, y } });
+      const head = k.stack(pop, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Popup head" });
+      logoBadge(k, head, { fill: "primary", size: 20, pad: 7, radius: 9 });
+      k.text(head, kind === "highlights" ? "On this page" : kind === "summary" ? "Summary" : "Send 2 highlights", { style: "Popup title 20", color: "onCard", name: "Popup title" });
+      k.rect(pop, "FILL", 2, "rule", { name: "Popup rule" });
+      if (kind === "highlights") {
+        for (const [quote, when] of [["\u201CWhat we call reading online is now mostly triage\u2026\u201D", "Saved just now"], ["\u201CA highlight is a promise to your future self\u2026\u201D", "Saved 1 min ago"]]) {
+          const item = k.stack(pop, { direction: "HORIZONTAL", gap: 12, name: "Saved highlight" });
+          k.rect(item, 5, 74, "primary", { radius: 2, name: "Highlight bar" });
+          const w = k.stack(item, { gap: 4, name: "Saved words" });
+          k.text(w, quote, { style: "Popup 16", color: "onCard", name: "Saved quote" });
+          k.text(w, when, { style: "Url 16", color: "cardMuted", name: "Saved when" });
+        }
+        const count = k.stack(pop, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "chrome", radius: 10, padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Library row" });
+        k.text(count, "In your library", { style: "Popup 16", color: "onChrome", autoWidth: true, name: "Library label" });
+        k.text(count, "1,284 highlights", { style: "Popup strong 16", color: "onChrome", autoWidth: true, name: "Library count" });
+      } else if (kind === "summary") {
+        for (const [i, line] of ["Online reading has become triage, not reading.", "The loss is memory rather than attention.", "Marking a sentence roughly doubles recall.", "A highlight is a note to your future self.", "The fix is small: mark, then revisit."].entries()) {
+          const row = k.stack(pop, { direction: "HORIZONTAL", gap: 12, name: "Summary line" });
+          k.text(row, `0${i + 1}`, { style: "Url 16", color: "cardMuted", autoWidth: true, name: "Line number" });
+          k.text(row, line, { style: "Popup 16", color: "onCard", name: "Line" });
+        }
+      } else {
+        for (const [i, dest] of ["Notion \xB7 Reading notes", "Obsidian \xB7 Vault/Inbox", "Readwise", "Copy as Markdown"].entries()) {
+          const row = k.stack(pop, { direction: "HORIZONTAL", gap: 12, align: "CENTER", radius: 10, padding: { top: 10, right: 12, bottom: 10, left: 12 }, name: "Destination", ...i === 0 ? { fill: "mark" } : {} });
+          k.rect(row, 20, 20, i === 0 ? "primary" : "rule", { radius: 5, name: "Destination icon" });
+          k.text(row, dest, { style: i === 0 ? "Popup strong 16" : "Popup 16", color: "onCard", name: "Destination name" });
+        }
+      }
+      k.instance(pop, "Popup button", { Label: kind === "highlights" ? "Summarise this page" : kind === "summary" ? "Copy summary" : "Send to Notion" }, { name: "Popup button" });
+    };
+    const grid = (sheet, w, h, step) => k.vector(sheet, w, h, gridPaths(w, h, step, 2), k.tint("text", 0.09), { name: "Grid", absolute: { x: 0, y: 0 } });
+    const marquee = k.sheet;
+    ground(k, marquee, "Marquee 1400 \xD7 560", "paper");
+    grid(marquee, 1400, 560, 70);
+    k.rect(marquee, 24, 560, "primary", { name: "Margin rule", absolute: { x: 0, y: 0 } });
+    const mw = k.stack(marquee, { width: 600, gap: 20, name: "Marquee words", absolute: { x: 84, y: 76 } });
+    const mb = k.stack(mw, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, mb, { fill: "primary", size: 30, pad: 9, radius: 11 });
+    k.text(mb, "Extension for Chrome", { style: "Label 18", color: "text", name: "Kind" });
+    k.text(mw, "{{brand.name}}", { style: "Name 150", color: "text", name: "Name" });
+    k.text(mw, "{{brand.tagline}}", { style: "Tagline 40", color: "text", width: 520, name: "Tagline" });
+    browser(marquee, 650, 70, 720, 640);
+    popup(marquee, 984, 180, "highlights");
+    const tile = k.addSheet(preset("cws-tile"));
+    ground(k, tile, "Small tile 440 \xD7 280", "primary");
+    k.patch(tile, { x: 1400 + 120, y: 0 });
+    k.rect(tile, 300, 34, k.tint("onPrimary", 0.22), { name: "Tile mark", absolute: { x: 170, y: 196 } });
+    k.rect(tile, 200, 34, k.tint("onPrimary", 0.22), { name: "Tile mark", absolute: { x: 270, y: 30 } });
+    const tw = k.stack(tile, { width: 380, gap: 10, name: "Tile words", absolute: { x: 30, y: 30 } });
+    logoBadge(k, tw, { fill: "ink", size: 34, pad: 10, radius: 13 });
+    k.rect(tw, 10, 26, k.tint("onPrimary", 1e-3), { name: "Tile space" });
+    k.text(tw, "{{brand.name}}", { style: "Tile name 64", color: "onPrimary", name: "Tile name" });
+    k.text(tw, "Highlight and summarise any page", { style: "Tile note 20", color: "onPrimary", name: "Tile note" });
+    SHOTS.forEach((s, i) => {
+      const sheet = k.addSheet(preset("cws-screenshot"));
+      ground(k, sheet, `Screenshot ${i + 1} \xB7 ${s.key}`, "paper");
+      k.patch(sheet, { x: 1400 + 120 + 440 + 120 + i * (1280 + 120), y: 0 });
+      grid(sheet, 1280, 800, 80);
+      k.rect(sheet, 16, 800, "primary", { name: "Margin rule", absolute: { x: 0, y: 0 } });
+      const words = k.stack(sheet, { width: 350, gap: 22, name: "Claim block", absolute: { x: 64, y: 84 } });
+      k.text(words, `0${i + 1} / 03 \xB7 ${s.key}`, { style: "Label 18", color: "text", name: "Step" });
+      k.text(words, s.claim, { style: "Claim 66", color: "text", name: "Claim" });
+      k.rect(words, 96, 8, "primary", { name: "Claim rule" });
+      k.text(words, s.note, { style: "Note 24", color: "text", name: "Claim note" });
+      browser(sheet, 470, 84, 770, 800);
+      popup(sheet, 854, 194, s.popup);
+    });
+    k.setCover(marquee);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_chrome_kit_default
+};

package/dist/chunks/chunk-6REEUYWW.js

@@ -0,0 +1,154 @@
+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 {
+  buildMusicApp
+} from "./chunk-PYXHPAZX.js";
+import {
+  scatter
+} from "./chunk-D6TL4O6B.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  hex
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/app/music-grove.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var GROVE = {
+  id: "app-music-grove",
+  title: "Music app \xB7 Grove",
+  description: "A clickable music app that plays like a walk through a paper-craft forest: layers of cut-paper hills, trees and leaves move in parallax as the map follows a winding path of genre clearings, and the cover opens from the mini player like a pop-up book",
+  tags: ["prototype flow", "interactive", "music", "player", "app", "mobile", "ios", "smart animate", "shared element", "scrub", "paper", "forest"],
+  created: "2026-09-30",
+  updated: "2026-09-30",
+  app: "Grove",
+  track: "Lanterns in the Pines",
+  artist: "Wren & Alder",
+  album: "Paper Seasons",
+  length: "4:12",
+  sections: ["Intro", "Verse", "Chorus", "Bridge", "Outro"],
+  colors: { paper: "#F6EFE3", text: "#2B2118", onPaper: "#6A5A4A", primary: "#B8442C", surface: "#FFFFFF", onSurface: "#2B2118", dim: "#6F6255", line: "#E2D5C1", raised: "#EFE4D2" },
+  backdrop: { shader: "Mesh gradient", params: { speed: 0.12, spread: 0.55, colorA: hex("#F2E0C0"), colorB: hex("#E6EDD8"), colorC: hex("#F4DCCF"), base: hex("#F6EFE3") }, opacity: 0.92 },
+  type: { family: "Source Serif 4", heavy: 700, tracking: -0.3, caps: false },
+  radius: 20,
+  art: "paper",
+  palettes: {
+    album: ["#F3D9B1", "#4F7A4A", "#7FB069", "#E8A53A"],
+    portrait: ["#E9D7BD", "#B8442C", "#3B2B1F", "#F6EFE3"],
+    extra: [["#F2DDC3", "#A8572F", "#D98E48", "#F7E7C9"], ["#DCEAE4", "#2F6B5E", "#4F9D8E", "#F2F7F4"], ["#DDE4F2", "#3D5A8C", "#6C8FC7", "#F3F6FB"], ["#EFE3CF", "#5E4A33", "#9C7A4F", "#F9F1E3"]]
+  },
+  world: {
+    zones: [{ x: 760, y: 520 }, { x: 1090, y: 420 }, { x: 1420, y: 540 }, { x: 1750, y: 440 }],
+    depth: { Far: 0.25, Mid: 0.6, Zones: 1, Near: 1.35 },
+    zoom: { introA: 0.4, introB: 0.9, zone: 2.1, album: 1.6, now: 2.2, queue: 3.2, search: 0.6, library: 1.05, artist: 1.8 },
+    paint(k, layers, theme) {
+      const card = (a = 0.18) => [{ type: "DROP_SHADOW", color: k.color("text", a), offset: { x: 0, y: 8 }, blur: 14, spread: 0, visible: true }];
+      k.ellipse(layers.Far, 160, "glow2", { name: "Sun", absolute: { x: 1240, y: 150 }, effects: card(0.12) });
+      for (let i = 0; i < 4; i++) {
+        const h = k.ellipse(layers.Far, 900, `glow${i + 1}`, { name: "Hill", absolute: { x: 380 + i * 420, y: 620 - i % 2 * 80 }, effects: card(0.12) });
+        k.patch(h, { height: 520 });
+      }
+      for (let i = 0; i < 10; i++) {
+        const x = 520 + i * 170 + Math.round(scatter(i, 1) * 60), s = 70 + Math.round(scatter(i, 2) * 50), base = 760 + Math.round(scatter(i, 3) * 60);
+        k.rect(layers.Mid, 12, 40, "dim", { radius: 3, name: "Trunk", absolute: { x: x + s / 2 - 6, y: base - 10 } });
+        k.vector(layers.Mid, s, s * 1.6, [{ closed: true, points: [{ x: s / 2, y: 0 }, { x: s, y: s * 1.6 }, { x: 0, y: s * 1.6 }] }], i % 2 ? "zone3" : "zone1", { name: "Pine", absolute: { x, y: base - s * 1.6 }, effects: card() });
+      }
+      theme.zones.forEach((_, i) => {
+        const z = theme.world.zones[i];
+        const f = k.frame(layers.Zones, { x: z.x - 130, y: z.y - 130, width: 260, height: 260 }, { name: `Zone ${i + 1}` });
+        const ground = k.ellipse(f, 230, `zone${i + 1}`, { name: "Clearing", absolute: { x: 15, y: 150 }, effects: card(0.22) });
+        k.patch(ground, { height: 90 });
+        k.rect(f, 8, 110, "dim", { radius: 3, name: "Post", absolute: { x: 126, y: 70 } });
+        k.ellipse(f, 64, `glow${i + 1}`, { name: "Lantern glow", absolute: { x: 98, y: 32 }, opacity: 0.8, effects: [{ type: "LAYER_BLUR", radius: 12, visible: true }] });
+        k.rect(f, 34, 42, "surface", { radius: 8, name: "Lantern", stroke: { color: `zone${i + 1}`, width: 3 }, absolute: { x: 113, y: 44 }, effects: card() });
+        for (let m = 0; m < 2; m++) {
+          k.rect(f, 8, 22, "surface", { radius: 3, name: "Stem", absolute: { x: 58 + m * 120, y: 158 } });
+          const cap = k.ellipse(f, 36, "primary", { name: "Cap", absolute: { x: 44 + m * 120, y: 146 }, effects: card() });
+          k.patch(cap, { height: 20 });
+        }
+      });
+      for (let i = 0; i < 8; i++) {
+        const leaf = k.ellipse(layers.Near, 26, i % 2 ? "zone2" : "zone1", { name: "Leaf", absolute: { x: Math.round(500 + scatter(i, 5) * 1500), y: Math.round(220 + scatter(i, 6) * 640) }, effects: card(0.2) });
+        k.patch(leaf, { height: 12, rotation: Math.round(scatter(i, 7) * 180) });
+      }
+    }
+  },
+  zones: [
+    {
+      name: "Acoustic Glade",
+      tagline: "Fingerpicked guitars in a sunny clearing.",
+      color: "#7FB069",
+      glow: "#CFE6BF",
+      tracks: [["Lanterns in the Pines", "Wren & Alder", "4:12"], ["Moss Letters", "June Harlow", "3:26"], ["Kindling", "Wren & Alder", "3:51"], ["Barefoot Mile", "Tobin Grey", "3:08"]]
+    },
+    {
+      name: "Folk Hollow",
+      tagline: "Harmonies and fiddles, warm as a hearth.",
+      color: "#D98E48",
+      glow: "#F3CFA6",
+      tracks: [["Hollow Hymn", "The Birchwood Choir", "4:40"], ["Cider Road", "Maisie Fenn", "3:33"], ["Lantern Dance", "The Birchwood Choir", "3:02"], ["Old Oak Promise", "Ansel Reeve", "4:15"]]
+    },
+    {
+      name: "Chillhop Canopy",
+      tagline: "Dusty beats drifting down through the leaves.",
+      color: "#4F9D8E",
+      glow: "#B5DDD5",
+      tracks: [["Canopy Tape", "Fern Loops", "2:44"], ["Rain on Bark", "Soft Owl", "2:59"], ["Treehouse Notes", "Fern Loops", "3:11"], ["Firefly Radio", "Pollen", "2:37"]]
+    },
+    {
+      name: "Piano Brook",
+      tagline: "Quiet keys that run like water over stones.",
+      color: "#6C8FC7",
+      glow: "#C6D6EE",
+      tracks: [["Brookside \xC9tude", "Clara Voss", "4:05"], ["Pebble Nocturne", "Emil Sand", "3:48"], ["Morning Ferns", "Clara Voss", "3:22"], ["Stillwater", "Hanne Lind", "5:01"]]
+    }
+  ],
+  albumZone: 0,
+  albumYear: "2026",
+  albumTracks: [["Lanterns in the Pines", "Wren & Alder", "4:12"], ["Kindling", "Wren & Alder", "3:51"], ["Paper Seasons", "Wren & Alder", "4:30"], ["The Long Path", "Wren & Alder", "3:44"], ["First Frost", "Wren & Alder", "4:08"]],
+  queue: [["Moss Letters", "June Harlow", "3:26"], ["Hollow Hymn", "The Birchwood Choir", "4:40"], ["Canopy Tape", "Fern Loops", "2:44"], ["Brookside \xC9tude", "Clara Voss", "4:05"], ["Cider Road", "Maisie Fenn", "3:33"]],
+  artistListeners: "940K",
+  artistBio: "Wren & Alder are two voices, a borrowed guitar and a cabin they record in each autumn, with the windows open.",
+  library: {
+    albums: [["Paper Seasons", "Wren & Alder \xB7 2026"], ["Moss Letters", "June Harlow \xB7 2025"], ["Hollow Hymn", "The Birchwood Choir \xB7 2024"], ["Canopy Tape", "Fern Loops \xB7 2026"], ["Brookside \xC9tudes", "Clara Voss \xB7 2023"]],
+    artists: [["Wren & Alder", "Artist \xB7 940K listeners"], ["June Harlow", "Artist \xB7 410K listeners"], ["The Birchwood Choir", "Artist \xB7 280K listeners"], ["Fern Loops", "Artist \xB7 1.6M listeners"], ["Clara Voss", "Artist \xB7 630K listeners"]]
+  },
+  copy: {
+    introTitle: "Every song has a clearing.",
+    introBody: "Follow the path through the forest. Drag to wander, tap a clearing to sit a while, and let it play.",
+    begin: "Into the woods",
+    moodsTitle: "What is the weather?",
+    moodsBody: "Pick a few moods and we will lay out a path.",
+    moods: ["Sunny", "Cosy", "Rainy day", "Wandering", "Quiet", "Campfire"],
+    greeting: "Good afternoon",
+    searchHint: "Songs, artists or clearings"
+  }
+};
+var music_grove_default = defineTemplate({
+  id: GROVE.id,
+  meta: {
+    name: GROVE.title,
+    description: GROVE.description,
+    category: "app",
+    tags: GROVE.tags,
+    platforms: ["ios"],
+    formats: ["screen"],
+    useCases: ["onboarding", "launch"],
+    created: GROVE.created,
+    updated: GROVE.updated
+  },
+  build: () => buildMusicApp(GROVE).doc
+});
+
+export {
+  GROVE,
+  music_grove_default
+};

package/dist/chunks/chunk-6TWK3D4X.js

@@ -0,0 +1,130 @@
+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 {
+  KONTOR,
+  extend,
+  fitGrid,
+  grot,
+  lockup,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-LTD3JYZQ.js";
+import {
+  portraitSlot
+} from "./chunk-UA7OECXL.js";
+import {
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/style-swiss-testimonial.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS testimonial post";
+var DURATION = 7e3;
+var OUT = 5900;
+var GRID = { cols: 6, margin: 72, gutter: 24, row: 108, top: 72 };
+var LEAVE = ["Brand row", "Quote", "Portrait", "Who", "Result"];
+var cues = [
+  { layer: "Brand row", preset: "slide-in", at: 150, params: { direction: "down", duration: 400 } },
+  { layer: "Quote", preset: "words-in", at: 400, params: { duration: 2300 } },
+  { layer: "Portrait", preset: "slide-in", at: 2600, params: { direction: "up", duration: 450 } },
+  { layer: "Who", preset: "slide-in", at: 2800, params: { direction: "left", duration: 400 } },
+  { layer: "Result", preset: "slide-in", at: 3100, params: { direction: "up", duration: 450 } },
+  { layer: LEAVE, preset: "slide-out", at: OUT, stagger: { delay: 70, order: "selection" }, params: { direction: "left", duration: 380 } }
+];
+var counts = [
+  { layer: "Result figure", at: 3200, duration: 1260, tick: 140, counter: { from: 87, to: 96, suffix: "%" } }
+];
+var style_swiss_testimonial_default = defineTemplate({
+  id: "motion-saas-style-swiss-testimonial",
+  meta: {
+    name: NAME,
+    description: "An animated testimonial in the Swiss typographic style, on a red field: a white rule extends, the customer's words arrive word by word in big flush-left type, her photo slot and name slide into the first column and her result counts from 87 to 96 percent on time. It wipes off back to the bare field, so it loops. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "red", "b2b", "logistics", "testimonial", "quote", "review", "customer", "photo", "counter", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["testimonial", "quote", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    swissBrand(k, { quote: "Kontor saw the Rotterdam backlog two days before our customers would have. We moved 212 pallets to rail and missed no dates." }, { field: true });
+    grot(k, "Brand 32", 32, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Quote 58", 68, { weight: 700, lead: 1.06, spacing: -0.035 });
+    grot(k, "Quote 80", 80, { weight: 700, lead: 1.05, spacing: -0.035 });
+    grot(k, "Result 170", 170, { weight: 700, lead: 0.9, spacing: -0.06 });
+    grot(k, "Name 30", 30, { weight: 700, lead: 1.2 });
+    grot(k, "Result 120", 120, { weight: 700, lead: 0.9, spacing: -0.06 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    swissGrid(k, sheet, GRID, { opacity: 0.16 });
+    const top = k.stack(sheet, { gap: 14, name: "Top" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 32, style: "Brand 32" });
+    k.text(bar, "Customer 041, Halde Outdoor", { style: "Label 24", color: "text", autoWidth: true, name: "Case" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    k.text(sheet, "{{brand.quote}}", { style: "Quote 58", color: "text", name: "Quote" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Foot" });
+    portraitSlot(k, foot, 200, 240, { radius: 0, ground: "card", skin: "track", top: "primary", halo: "paper", name: "Portrait", photo: "Customer photo" });
+    k.component("Swiss byline", { gap: 6, width: 260, description: "Who said it: the name over the role.", props: { Name: "Lena Brandt", Role: "Head of logistics, Halde Outdoor" } }, (id) => {
+      k.propText(id, "Name", { style: "Name 30", color: "text", name: "Name" });
+      k.propText(id, "Role", { style: "Label 24", color: "text", name: "Role" });
+    });
+    k.instance(foot, "Swiss byline", {}, { name: "Who" });
+    const result = k.stack(foot, { gap: 6, name: "Result" });
+    k.text(result, "96%", { style: "Result 120", color: "text", width: "FILL", align: "RIGHT", name: "Result figure" });
+    k.text(result, `on time, up from 87%, with ${KONTOR.name}`, { style: "Label 24", color: "text", align: "RIGHT", name: "Result label" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    extend(k, topRule, 0, 600);
+    k.animate(topRule, "scaleX", [{ t: OUT + 450, v: 1, ease: ease.named("expo", "in") }, { t: OUT + 950, v: 0 }]);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      // The quote set larger in the taller cut, so it reaches down to the byline instead of leaving a band.
+      portrait: (kit, id) => {
+        fitGrid(kit, id, GRID);
+        kit.restyle(kit.named(id, "Quote")[0], "Quote 80");
+      },
+      vertical: (kit, id) => {
+        fitGrid(kit, id, { ...GRID, margin: 140, top: 250 });
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 40 });
+        kit.restyle(kit.named(id, "Quote")[0], "Quote 80");
+        kit.restyle(kit.named(id, "Result figure")[0], "Result 170");
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutWrap: "WRAP", counterAxisSpacing: 20 });
+        for (const n of kit.named(id, "Result")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 800 });
+        for (const n of kit.named(id, "Result figure")) kit.patch(n, { textAlign: "LEFT" });
+        for (const n of kit.named(id, "Result label")) kit.patch(n, { textAlign: "LEFT" });
+        kit.rect(id, 1080, 400, "primary", { name: "Field", absolute: { x: 0, y: 1520 } });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  style_swiss_testimonial_default
+};

package/dist/chunks/chunk-6UEQFBWY.js

@@ -0,0 +1,111 @@
+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,
+  dots,
+  hand,
+  marker,
+  miniNote,
+  outline,
+  pen,
+  sans,
+  sketchBrand,
+  underline
+} from "./chunk-PDILBJ4W.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-K3QP3IUF.js";
+import {
+  clicks,
+  glide
+} from "./chunk-F3TA2VS2.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/style-sketch-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Sketch SaaS email header";
+var DURATION = 6e3;
+var BOARD = { w: 232, h: 230 };
+var cues = [
+  { layer: "Mini note", preset: "wobble", at: 2600, stagger: { delay: 120, order: "selection" }, params: { duration: 600, amount: 6 } },
+  { layer: "Open button", preset: "pulse", at: 4400, params: { duration: 400, amount: 0.05 } }
+];
+var style_sketch_header_default = defineTemplate({
+  id: "email-saas-style-sketch-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a launch email drawn with a marker in a dotted notebook: the sender, the news with a red underline, the button and a small board already tidied into three columns of sticky notes are all on the first frame (for Outlook), then a marker pen taps a note and goes home, the notes wobble and the button nudges, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "sketch", "hand-drawn", "whiteboard", "sticky notes", "planning", "launch", "announcement", "newsletter", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "launch", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    sketchBrand(k, { offer: "Tidy up is here.", when: "Plotline 2.0 sorts a wall of sticky notes into a plan, with a person and a date on each." });
+    hand(k, "Brand 16", 16);
+    sans(k, "Label 12", 12, { weight: 600, lead: 1.3 });
+    hand(k, "Offer 34", 34, { lead: 1.05, spacing: -0.035 });
+    sans(k, "When 13", 13, { weight: 400, lead: 1.4 });
+    hand(k, "Button 14", 14, { lead: 1.2, spacing: 0 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "See it sort a board", pad: [9, 16], radius: 10 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 28, bottom: 0, left: 28 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    dots(k, sheet, { step: 20, size: 2, opacity: 0.16 });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Band" });
+    const words = k.stack(band, { width: 284, gap: 10, name: "Words" });
+    const top = k.stack(words, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    const brand = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Lockup" });
+    logoBadge(k, brand, { fill: "primary", size: 16, pad: 4, radius: 6 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 16", color: "text", autoWidth: true, name: "Brand name" });
+    k.text(top, `New in ${PLOTLINE.version}`, { style: "Label 12", color: "onPaper", autoWidth: true, name: "Release" });
+    const offerBox = k.stack(words, { name: "Offer box" });
+    k.text(offerBox, "{{brand.offer}}", { style: "Offer 34", color: "text", name: "Offer" });
+    marker(k, offerBox, 112, 12, underline(112, 12, { seed: 3 }), { name: "Offer line", color: "red", width: 4, absolute: { x: 0, y: 33 } });
+    k.text(words, "{{brand.when}}", { style: "When 13", color: "onPaper", name: "When" });
+    k.instance(words, "Button", { Label: "See it sort a board" }, { name: "Open button" });
+    const card = k.stack(band, { width: BOARD.w, height: BOARD.h, fill: "card", radius: 8, name: "Board card" });
+    const f = k.frame(card, { x: 0, y: 0, width: BOARD.w, height: BOARD.h }, { name: "Board" });
+    const colors = ["peach", "sticky", "mint"];
+    [3, 3, 2].forEach((n, c) => {
+      const x = 16 + c * 70;
+      marker(k, f, 52, 8, underline(52, 8, { seed: 30 + c, flick: false }), { name: "Column line", color: "primary", width: 3, absolute: { x, y: 18 } });
+      for (let r = 0; r < n; r++) miniNote(k, f, { s: 58, color: colors[(c + r) % 3], x, y: 36 + r * 64, seed: 50 + c * 5 + r });
+    });
+    outline(k, card, BOARD.w, BOARD.h, { seed: 4, width: 2.5, inset: 2, name: "Board outline" });
+    const p = pen(k, card, { x: 190, y: 190, size: 56 });
+    glide(k, p, [{ t: 0, dx: 0, dy: 0 }, { t: 600, dx: 0, dy: 0 }, { t: 1700, dx: -150, dy: -110 }, { t: 2300, dx: -150, dy: -110 }, { t: 3400, dx: 0, dy: 0 }, { t: DURATION, dx: 0, dy: 0 }]);
+    clicks(k, p, [1900]);
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  style_sketch_header_default
+};