@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-LOTIIDDC.js

@@ -0,0 +1,150 @@
+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 {
+  ARIAL,
+  callToAction,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell,
+  tag
+} from "./chunk-BH5MTM45.js";
+import {
+  ticker
+} from "./chunk-K3QP3IUF.js";
+import {
+  tick
+} from "./chunk-UDE42EDS.js";
+import {
+  box
+} from "./chunk-6RCDZU4R.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/email/saas-mail-changelog.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var HEADER_H = 380;
+var TICKER = { item: 220, height: 34 };
+var VIG = { w: 196, h: 124 };
+var cues = [
+  { layer: "Count disc", preset: "pulse", at: 400, params: { duration: 800, amount: 0.06 } },
+  { layer: "Count disc", preset: "pulse", at: 2400, params: { duration: 800, amount: 0.06 } }
+];
+var saas_mail_changelog_default = defineTemplate({
+  id: "email-saas-mail-changelog",
+  meta: {
+    name: "SaaS lifecycle email: monthly changelog",
+    description: 'A whole 600 px changelog email in a Swiss typographic look: "Shipped in October" set huge on a red field with a running ticker, then three items, each with a NEW, IMPROVED or FIXED tag and a small drawn vignette of the screen it changed, and one button. The header loops for four seconds (export it as a GIF); the body is table-safe type',
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "changelog", "release notes", "product update", "swiss", "typographic", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["changelog", "newsletter", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: monthly changelog", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFFFF", text: "#0B0B0B", onPaper: "#474747", primary: "#E0200F", onPrimary: "#FFFFFF", tint: "#F2F2EF", onTint: "#0B0B0B" },
+      { company: "Plainform", address: "L\xF6wenstrasse 29, 8001 Z\xFCrich" }
+    );
+    k.palette({ edge: "#0B0B0B", onEdge: "#FFFFFF", vig: "#F2F2EF", onVig: "#0B0B0B", vigSoft: "#4F4F4C", card: "#FFFFFF", line: "#CFCFC9", red: "#E0200F", onRed: "#FFFFFF", slow: "#B9B9B3" });
+    k.textStyle("Issue 12", { size: 12, fontWeight: 700, letterSpacing: 1.4, lineHeight: 14 });
+    k.textStyle("Shipped 82", { size: 82, fontWeight: 900, letterSpacing: -5, lineHeight: 74 });
+    k.textStyle("Disc 58", { size: 58, fontWeight: 900, letterSpacing: -3, lineHeight: 54, textAlign: "CENTER" });
+    k.textStyle("Disc label 12", { size: 12, fontWeight: 800, letterSpacing: 1.6, lineHeight: 14, textAlign: "CENTER" });
+    k.textStyle("Ticker 12", { size: 12, fontWeight: 800, letterSpacing: 1.6, lineHeight: 16 });
+    k.textStyle("Vig 12", { size: 12, fontWeight: 700, lineHeight: 15 });
+    k.textStyle("Vig small 12", { size: 12, fontWeight: 600, lineHeight: 15 });
+    k.textStyle("Tag 12", { ...ARIAL, size: 12, fontWeight: 700, letterSpacing: 1.2, lineHeight: 14 });
+    k.textStyle("Item 20", { ...ARIAL, size: 20, fontWeight: 700, lineHeight: 25 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Read the full changelog", width: 280, height: 50 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "primary");
+    k.rect(head, 528, 2, "onPrimary", { name: "Top rule", absolute: { x: 36, y: 34 } });
+    k.text(head, "{{brand.company}} CHANGELOG", { style: "Issue 12", color: "onPrimary", width: 300, name: "Issue", absolute: { x: 36, y: 46 } });
+    k.text(head, "N\xBA 22 \u2014 2 OCT 2026", { style: "Issue 12", color: "onPrimary", width: 228, align: "RIGHT", name: "Issue date", absolute: { x: 336, y: 46 } });
+    k.text(head, "Shipped in October", { style: "Shipped 82", color: "onPrimary", width: 420, name: "Shipped", absolute: { x: 30, y: 92 } });
+    k.rect(head, 2, 250, "onPrimary", { name: "Column rule", opacity: 0.35, absolute: { x: 418, y: 80 } });
+    const disc = k.stack(head, { width: 138, height: 138, align: "CENTER", justify: "CENTER", name: "Count disc", absolute: { x: 432, y: 176 } });
+    const round = k.ellipse(disc, 138, "edge", { name: "Disc", absolute: { x: 0, y: 0 } });
+    swell(k, round, "scaleX", { amp: 0.03, loopMs: DURATION, cycles: 2 });
+    swell(k, round, "scaleY", { amp: 0.03, loopMs: DURATION, cycles: 2 });
+    k.text(disc, "03", { style: "Disc 58", color: "onEdge", name: "Count" });
+    k.text(disc, "THINGS", { style: "Disc label 12", color: "onEdge", name: "Count label" });
+    ticker(k, head, { label: "NEW \xB7 IMPROVED \xB7 FIXED \xB7", item: TICKER.item, height: TICKER.height, fill: "card", ink: "onVig", style: "Ticker 12", rate: TICKER.item * 1e3 / DURATION, y: HEADER_H - TICKER.height });
+    const intro = section(k, sheet, { name: "Intro", pad: [36, 40, 8, 40] });
+    k.text(intro, "Three changes this month, all asked for by people who build long forms. The first one took us since June.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const items = section(k, sheet, { name: "Items", pad: [12, 40, 4, 40] });
+    const item = (label, filled, title, note, draw) => {
+      k.rect(items, "FILL", 2, "text", { name: "Item rule" });
+      const row = mailRow(k, items, { name: "Item", gap: 20, padding: { top: 20, right: 0, bottom: 24, left: 0 } });
+      const words = k.stack(row, { width: "FILL", gap: 8, name: "Item words" });
+      tag(k, words, label, filled ? { fill: "primary", ink: "onPrimary", style: "Tag 12" } : { fill: "tint", ink: "onTint", style: "Tag 12" });
+      k.text(words, title, { style: "Item 20", color: "text", name: "Item title" });
+      k.text(words, note, { style: "Small 15", color: "onPaper", name: "Item note" });
+      const v = k.stack(row, { width: VIG.w, height: VIG.h, fill: "vig", radius: 8, clip: true, name: "Vignette" });
+      draw(v);
+    };
+    item("NEW", true, "Logic you can see", "Branching is now a map: drag from an answer to the question it leads to. Old rules were converted for you.", (v) => {
+      const node = (label, x, y, hot = false) => {
+        const n = k.stack(v, { direction: "HORIZONTAL", width: "HUG", fill: hot ? "red" : "card", radius: 5, stroke: { color: hot ? "red" : "line", width: 1, align: "INSIDE" }, padding: { top: 5, right: 8, bottom: 5, left: 8 }, name: "Node", absolute: { x, y } });
+        k.text(n, label, { style: "Vig small 12", color: hot ? "onRed" : "onVig", autoWidth: true, name: "Node label" });
+      };
+      k.vector(v, VIG.w, VIG.h, [{ closed: false, points: [{ x: 62, y: 62 }, { x: 96, y: 62 }, { x: 96, y: 28 }, { x: 118, y: 28 }] }, { closed: false, points: [{ x: 96, y: 62 }, { x: 96, y: 96 }, { x: 118, y: 96 }] }], "edge", { name: "Wires", strokeWidth: 1.5, absolute: { x: 0, y: 0 } });
+      node("Team size?", 10, 50);
+      node("1 to 10", 118, 16, true);
+      node("11 or more", 118, 84);
+    });
+    item("IMPROVED", false, "Exports are six times faster", "A 40,000-row CSV used to take 48 seconds. It now takes 8, and you can leave the page while it runs.", (v) => {
+      k.text(v, "BEFORE", { style: "Vig small 12", color: "vigSoft", width: 60, name: "Before", absolute: { x: 14, y: 22 } });
+      k.rect(v, 150, 16, "slow", { name: "Before bar", absolute: { x: 14, y: 38 } });
+      k.text(v, "48 s", { style: "Vig 12", color: "onVig", width: 40, name: "Before time", absolute: { x: 140, y: 22 } });
+      k.text(v, "NOW", { style: "Vig small 12", color: "vigSoft", width: 60, name: "Now", absolute: { x: 14, y: 70 } });
+      k.rect(v, 25, 16, "red", { name: "Now bar", absolute: { x: 14, y: 86 } });
+      k.text(v, "8 s", { style: "Vig 12", color: "onVig", width: 40, name: "Now time", absolute: { x: 46, y: 87 } });
+    });
+    item("FIXED", false, "Dates in the respondent\u2019s own time", "A date field showed your timezone to everyone. It now shows theirs, and stores both.", (v) => {
+      k.text(v, "Preferred call time", { style: "Vig small 12", color: "vigSoft", width: 160, name: "Field label", absolute: { x: 14, y: 24 } });
+      const field = k.stack(v, { direction: "HORIZONTAL", width: 168, align: "CENTER", justify: "SPACE_BETWEEN", fill: "card", radius: 5, stroke: { color: "line", width: 1, align: "INSIDE" }, padding: { top: 8, right: 10, bottom: 8, left: 10 }, name: "Date field", absolute: { x: 14, y: 42 } });
+      k.text(field, "Fri 2 Oct, 09:00", { style: "Vig 12", color: "onVig", autoWidth: true, name: "Date" });
+      tick(k, field, 12, "red");
+      k.text(v, "CEST \xB7 Z\xFCrich", { style: "Vig small 12", color: "vigSoft", width: 160, name: "Zone", absolute: { x: 14, y: 84 } });
+      k.vector(v, 8, 8, [box(0, 0, 8, 8)], "red", { name: "Zone mark", absolute: { x: 174, y: 12 } });
+    });
+    k.rect(items, "FILL", 2, "text", { name: "Item rule" });
+    callToAction(k, sheet, { button: "Mail button", label: "Read the full changelog", pad: [28, 40, 32, 40], note: "Eleven smaller fixes are listed there too. Next issue: 2 November.", noteStyle: "Small 15", noteInk: "onPaper" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", pad: [8, 40, 32, 40], why: "You are getting this because you have a {{brand.company}} account and product updates are switched on." });
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_changelog_default
+};

package/dist/chunks/chunk-LOUPBPQV.js

@@ -0,0 +1,38 @@
+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 {
+  defineDeck
+} from "./chunk-ACCEORUW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/slides/agenda.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var agenda_default = defineDeck({
+  id: "motion-slide-agenda",
+  meta: {
+    name: "Animated agenda",
+    description: "A 16:9 agenda slide whose numbered items slide in one after another \u2014 a staggered running order for a meeting or talk",
+    category: "animation",
+    tags: ["animation", "agenda", "stagger", "slides", "meeting", "presentation"],
+    platforms: ["slides"],
+    formats: ["slide-deck"],
+    useCases: ["planning", "report"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  colors: { accent: "#9C2C77", onAccent: "#FFFFFF", paper: "#FFFFFF", text: "#1E1B2E", onPaper: "#57536B" },
+  fields: { company: "Tidewater Credit Union" },
+  slides: [
+    { kind: "agenda", name: "Agenda", heading: "Today\u2019s all-hands", items: ["Where the quarter landed", "Member stories from the branches", "The new mobile app, live", "Branch hours from January", "Your questions"] }
+  ]
+});
+
+export {
+  agenda_default
+};

package/dist/chunks/chunk-LOZFDMQ2.js

@@ -0,0 +1,82 @@
+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,
+  gothicBrand,
+  nave
+} from "./chunk-673AHRM7.js";
+import {
+  background
+} from "./chunk-HAK2G6YB.js";
+import {
+  MONO,
+  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,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/gothic-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var gothic_link_preview_default = defineTemplate({
+  id: "social-gothic-link-preview",
+  meta: {
+    name: "Gothic link preview",
+    description: "A 1200 \xD7 630 link preview with a cathedral\u2019s gravity: the promise in a heavy serif and the product\u2019s numbers in one mono line, beside a lit stained-glass window in its stone portal, with candles burning along the floor",
+    category: "social",
+    tags: ["gothic", "cathedral", "rose window", "stained glass", "candles", "link preview", "open graph", "og image", "saas", "serif"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Gothic link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    gothicBrand(k, { tagline: "Uptime, kept\xA0with ceremony." });
+    k.textStyle("Eyebrow 20", { size: 20, fontWeight: 700, letterSpacing: 5, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Display 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -2.8, lineHeight: 92 });
+    k.textStyle("Seal 20", { size: 20, fontWeight: 800, letterSpacing: 1, lineHeight: 26 });
+    pill(k, "Seal", { fill: "accent", ink: "onAccent", style: "Seal 20", label: "Ten monitors kept free", pad: [10, 20], radius: 4 });
+    k.textStyle("Facts 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 32 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 56, right: 548, bottom: 56, left: 64 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    background(k, sheet, "paper", { effects: GRAIN });
+    nave(k, sheet, 500, 630, { window: 270, top: 44, floor: 540, candles: { base: 612, count: 7, size: 11 }, loopMs: 0, at: { x: 700, y: 0 } });
+    glow(k, sheet, { x: 700, y: 330, w: 620, role: "cobalt", alpha: 0.2 });
+    glow(k, sheet, { x: 640, y: 560, w: 520, role: "ruby", alpha: 0.18 });
+    arcade(k, sheet, { width: 636, height: 30, count: 12, absolute: { x: 64, y: 0 }, role: "stone", weight: 2 });
+    const copy = k.stack(sheet, { gap: 22, name: "Copy" });
+    k.text(copy, "{{brand.name}} \xB7 est. MMXXVI", { style: "Eyebrow 20", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "{{brand.tagline}}", { style: "Display 92", color: "text", name: "Headline" });
+    k.rect(copy, 120, 4, "accent", { name: "Rule" });
+    k.text(copy, "Every 30 s \xB7 12 regions \xB7 paged in 40 s", { style: "Facts 22", color: "onPaper", name: "Facts" });
+    k.instance(copy, "Seal", { Label: "Ten monitors kept free" }, { name: "Seal" });
+    return k.finish();
+  }
+});
+
+export {
+  gothic_link_preview_default
+};

package/dist/chunks/chunk-LPLI7CZR.js

@@ -0,0 +1,110 @@
+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 {
+  shaderBackdrop
+} from "./chunk-HAK2G6YB.js";
+import {
+  safePadding
+} from "./chunk-QVURWCH2.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  animateShaderParam,
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/effects/shader-title.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TITLE = "Light & Motion";
+var BLUE = "#2a6cf5";
+var MAGENTA = "#ff4fa3";
+var SCRIM = 0.5;
+var CUES = [
+  { layer: "Words scrim", preset: "fade-in", at: 0, params: { duration: 800 } },
+  { layer: "Episode tag", preset: "pop-in", at: 200 },
+  { layer: "Title lockup", preset: "rise-in", at: 500, params: { distance: 40 } },
+  { layer: "Subtitle", preset: "words-in", at: 1500, params: { duration: 600, amount: 90, distance: 16 } },
+  { layer: "Handle", preset: "fade-in", at: 2600 }
+];
+var shader_title_default = defineTemplate({
+  id: "motion-shader-title",
+  meta: {
+    name: "Shader title card",
+    description: "A 16:9 title card over a live mesh-gradient shader whose speed, spread and colour are keyed, with a glowing title",
+    category: "animation",
+    tags: ["animation", "title card", "shader", "gradient", "glow", "youtube"],
+    platforms: ["youtube", "slides"],
+    formats: ["title-card", "intro"],
+    useCases: ["title", "brand-intro"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Shader title card", preset("video-1080p"));
+    k.brand({ onNight: "#fbf7ff", night: "#120d24", accent: "#ff7ac6", muted: "#c9bfe6" }, { handle: "@popcraft" });
+    k.textStyle("Tag 28", { size: 28, fontWeight: 700, lineHeight: 34, letterSpacing: 6, textCase: "UPPER" });
+    k.textStyle("Title 180", { size: 180, fontWeight: 900, lineHeight: 190, letterSpacing: -6 });
+    k.textStyle("Subtitle 44", { size: 44, fontWeight: 500, lineHeight: 54 });
+    k.textStyle("Handle 26", { size: 26, fontWeight: 600, lineHeight: 32, letterSpacing: 1 });
+    k.component("Episode tag", { direction: "HORIZONTAL", width: 320, height: 34, gap: 16, align: "CENTER", props: { Label: "Episode 04" } }, (id) => {
+      k.ellipse(id, 14, "accent", { name: "Dot" });
+      k.propText(id, "Label", { style: "Tag 28", color: "onNight", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Title card");
+    k.flowSheet(sheet, 36, safePadding("video-1080p", 1920, 1080, { top: 120, right: 160, bottom: 120, left: 160 }), "night", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    const backdrop = shaderBackdrop(k, sheet, "Mesh gradient", { speed: 0.15, spread: 0.2, colorA: hex("#6a3cf0"), colorB: hex(BLUE), colorC: hex(MAGENTA), base: k.color("night") });
+    const W = 1400, PAD = 64;
+    const words = k.stack(sheet, { width: W, fill: k.tint("night", SCRIM), radius: 64, align: "CENTER", gap: 36, padding: { top: 56, right: PAD, bottom: 56, left: PAD }, name: "Words scrim" });
+    k.instance(words, "Episode tag", { Label: "Episode 04" });
+    const lockup = k.stack(words, { name: "Title lockup" });
+    const blur = { id: "e1", type: "LAYER_BLUR", radius: 0, visible: true };
+    const glow = k.rect(lockup, 1240, 140, "accent", { radius: 70, opacity: 0, effects: [blur], absolute: { x: (W - 2 * PAD - 1240) / 2, y: 30 }, name: "Title glow" });
+    k.text(lockup, TITLE, { style: "Title 180", color: "onNight", align: "CENTER", name: "Title" });
+    k.text(words, "How shaders turn a little maths into colour", { style: "Subtitle 44", color: "muted", align: "CENTER", name: "Subtitle" });
+    k.text(words, "{{brand.handle}}", { style: "Handle 26", color: "muted", align: "CENTER", name: "Handle" });
+    k.apply(backdrop, (n) => animateShaderParam(
+      animateShaderParam(
+        animateShaderParam(
+          n,
+          "fills[@f1]",
+          "speed",
+          [{ t: 0, v: 0.15, ease: ease.inOut("sine") }, { t: 2500, v: 0.9, ease: ease.inOut("sine") }, { t: 5e3, v: 0.3 }]
+        ),
+        "fills[@f1]",
+        "spread",
+        [{ t: 0, v: 0.2, ease: ease.out("cubic") }, { t: 1500, v: 0.45 }]
+      ),
+      "fills[@f1]",
+      "colorC",
+      [{ t: 2500, v: hex(MAGENTA), ease: ease.inOut("sine") }, { t: 4e3, v: k.color("accent") }]
+    ));
+    k.cues(sheet, CUES);
+    k.animate(glow, "effects[@e1].radius", [{ t: 600, v: 0, ease: ease.out("expo") }, { t: 1600, v: 96, ease: ease.inOut("sine") }, { t: 5e3, v: 60 }]);
+    k.animate(glow, "opacity", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1600, v: 0.8 }]);
+    return k.finish();
+  }
+});
+
+export {
+  TITLE,
+  BLUE,
+  MAGENTA,
+  SCRIM,
+  shader_title_default
+};

package/dist/chunks/chunk-LPTGYYJP.js

@@ -0,0 +1,169 @@
+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 {
+  art,
+  discIn,
+  foldMarks,
+  folded,
+  panelX,
+  panels,
+  raise
+} from "./chunk-7UZPG5OF.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.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/print/printshop-brochure-dental.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var box = (x, y, w, h) => ({ closed: true, points: [{ x, y }, { x: x + w, y }, { x: x + w, y: y + h }, { x, y: y + h }] });
+var printshop_brochure_dental_default = defineTemplate({
+  id: "print-printshop-brochure-dental",
+  meta: {
+    name: "Dental clinic tri-fold brochure",
+    description: "A friendly tri-fold for a family dental practice on US Letter, roll-folded with a narrower tuck-in panel: the cover\u2019s big mint smile on teal, a new-patient offer, hours and a map on the back; inside a welcome with the dentists, the treatments and what happens at a first visit. Hours, treatments, dentists and steps are components to retype. Fold guides where the panels really meet, fold marks in the bleed",
+    category: "brochure",
+    tags: ["brochure", "tri-fold", "trifold", "dentist", "dental", "clinic", "healthcare", "family", "medical", "letter", "print"],
+    platforms: ["print"],
+    formats: ["document"],
+    useCases: ["brand-intro"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Dental clinic tri-fold brochure", preset("trifold-letter"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { primary: "#0E6E6A", onPrimary: "#FFFFFF", paper: "#FFFFFF", text: "#12302E", onPaper: "#4C6461", accent: "#9BE3CF", onAccent: "#0B3F3C", card: "#EAF7F3", onCard: "#12302E" },
+      { name: "Brightside Family Dental", tagline: "Gentle care for every age", email: "smile@brightsidedental.com", phone: "(919) 555-0172", website: "brightsidedental.com", address: "820 Wade Ave, Suite 200, Raleigh, NC 27605" }
+    );
+    k.palette({ mint: "#9BE3CF", deep: "#0A5552", foam: "#C9F0E4", street: "#DCEDE8", road: "#FFFFFF", park: "#BFE6D3" });
+    k.textStyle("Cover 40", { size: 40, fontWeight: 800, letterSpacing: -1.4, lineHeight: 42 });
+    k.textStyle("Title 24", { size: 28, fontWeight: 800, letterSpacing: -0.8, lineHeight: 32 });
+    k.textStyle("Lead 15", { ...SERIF, size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Body 11", { size: 12, fontWeight: 400, lineHeight: 18 });
+    k.textStyle("Item 13", { size: 14, fontWeight: 700, lineHeight: 19 });
+    k.textStyle("Kicker 9", { size: 9, fontWeight: 800, letterSpacing: 1.6, lineHeight: 12 });
+    k.textStyle("Brand 13", { size: 13, fontWeight: 800, letterSpacing: -0.2, lineHeight: 16 });
+    k.textStyle("Offer 30", { size: 30, fontWeight: 800, letterSpacing: -1, lineHeight: 32 });
+    k.textStyle("Step 18", { size: 18, fontWeight: 800, lineHeight: 20 });
+    k.component("Treatment", { width: 294, direction: "HORIZONTAL", gap: 12, align: "MIN", props: { Name: "Check-ups and cleans", About: "Twice a year, with a gentle hygienist." } }, (id) => {
+      k.ellipse(id, 12, "accent", { name: "Dot" });
+      const t = k.stack(id, { gap: 2, name: "Words" });
+      k.patch(t, { layoutSizingHorizontal: "FILL" });
+      k.propText(t, "Name", { style: "Item 13", color: "onCard", width: "FILL" });
+      k.propText(t, "About", { style: "Body 11", color: "onCard", width: "FILL" });
+    });
+    k.component("Hours", { width: 262, direction: "HORIZONTAL", gap: 8, props: { Day: "Mon \u2013 Thu", Time: "7:30 am \u2013 6 pm" } }, (id) => {
+      k.propText(id, "Day", { style: "Item 13", color: "onCard", width: 84 });
+      k.propText(id, "Time", { style: "Body 11", color: "onCard", width: "FILL" });
+    });
+    k.component("Dentist", { width: 294, direction: "HORIZONTAL", gap: 12, align: "CENTER", props: { Name: "Dr. Maya Okafor, DDS", Role: "General and family dentistry" } }, (id) => {
+      k.photo(id, 56, 56, { radius: 28, ground: "card", name: "Portrait" });
+      const t = k.stack(id, { gap: 1, name: "Words" });
+      k.patch(t, { layoutSizingHorizontal: "FILL" });
+      k.propText(t, "Name", { style: "Item 13", color: "text", width: "FILL" });
+      k.propText(t, "Role", { style: "Body 11", color: "onPaper", width: "FILL" });
+    });
+    k.component("Step", { width: 288, direction: "HORIZONTAL", gap: 12, align: "MIN", props: { Number: "1", Title: "Say hello", About: "Fill in a short form online before you come." } }, (id) => {
+      const n = k.stack(id, { width: 32, height: 32, radius: 16, fill: "primary", justify: "CENTER", align: "CENTER", name: "Badge" });
+      k.propText(n, "Number", { style: "Step 18", color: "onPrimary", autoWidth: true, align: "CENTER" });
+      const t = k.stack(id, { gap: 2, name: "Words" });
+      k.patch(t, { layoutSizingHorizontal: "FILL" });
+      k.propText(t, "Title", { style: "Item 13", color: "text", width: "FILL" });
+      k.propText(t, "About", { style: "Body 11", color: "onPaper", width: "FILL" });
+    });
+    const f = folded(k, "trifold-letter");
+    const { W, H, B } = f;
+    const PAD = { top: 40, right: 30, bottom: 36, left: 30 };
+    const [flap, backP, cover] = panels(k, f.sheets.outside, f.outside, H, B, { pad: PAD, gap: 18, grounds: [void 0, void 0, "primary"], justify: ["MIN", "MIN", "SPACE_BETWEEN"], names: ["Tuck-in", "Back", "Cover"] });
+    const ox = panelX(f.outside);
+    const cx = ox[2] + f.outside[2] * 0.52, cy = H * 0.3;
+    const smile = { closed: false, points: [{ x: cx - 120, y: cy, handleOut: { x: cx - 90, y: cy + 110 } }, { x: cx + 150, y: cy - 10, handleIn: { x: cx + 110, y: cy + 120 } }] };
+    art(k, f.sheets.outside, W, H, B, [smile], "mint", { name: "Smile", strokeWidth: 22 });
+    art(k, f.sheets.outside, W, H, B, discIn(ox[2] + f.outside[2] - 10, 70, 120, ox[2], -B, ox[2] + f.outside[2] + B, H + B), "deep", { name: "Sun" });
+    const spark = (x, y, r) => ({ closed: true, points: [{ x, y: y - r }, { x: x + r * 0.25, y: y - r * 0.25 }, { x: x + r, y }, { x: x + r * 0.25, y: y + r * 0.25 }, { x, y: y + r }, { x: x - r * 0.25, y: y + r * 0.25 }, { x: x - r, y }, { x: x - r * 0.25, y: y - r * 0.25 }] });
+    art(k, f.sheets.outside, W, H, B, [spark(cx + 130, cy - 70, 16), spark(cx + 96, cy - 104, 9), spark(cx - 110, cy - 50, 11)], "foam", { name: "Sparkles" });
+    const brand = k.stack(cover, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Brand" });
+    k.logo(brand, 32, 32);
+    k.text(brand, "{{brand.name}}", { style: "Brand 13", color: "onPrimary", width: "FILL", name: "Practice" });
+    const cw = k.stack(cover, { gap: 16, name: "Cover words" });
+    k.text(cw, "NOW WELCOMING NEW PATIENTS", { style: "Kicker 9", color: "onPrimary", width: "FILL", name: "Kicker" });
+    k.text(cw, "Healthy smiles for the whole family", { style: "Cover 40", color: "onPrimary", width: "FILL", name: "Title" });
+    k.text(cw, "Gentle check-ups, children\u2019s dentistry and same-day emergencies, five minutes from downtown.", { style: "Lead 15", color: "onPrimary", width: "FILL", name: "Lead" });
+    k.text(backP, "VISIT US", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(backP, "Easy to find, easy to park", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    const map = k.stack(backP, { height: 190, radius: 14, fill: "card", clip: true, name: "Map" });
+    const mw = f.outside[1] - PAD.left - PAD.right;
+    k.vector(map, mw, 190, [box(0, 70, mw, 16), box(120, 0, 14, 190), box(0, 150, mw, 10), box(220, 0, 10, 190)], "road", { name: "Streets", absolute: { x: 0, y: 0 } });
+    k.vector(map, 80, 50, [box(0, 0, 80, 50)], "park", { name: "Park", absolute: { x: 20, y: 96 } });
+    k.vector(map, 22, 30, [{ closed: true, points: [{ x: 11, y: 30 }, { x: 0, y: 11, handleIn: { x: 2, y: 20 }, handleOut: { x: 0, y: 4 } }, { x: 22, y: 11, handleIn: { x: 22, y: 4 }, handleOut: { x: 20, y: 20 } }] }], "primary", { name: "Pin", absolute: { x: 152, y: 40 } });
+    k.text(backP, "{{brand.address}}", { style: "Item 13", color: "text", width: "FILL", name: "Address" });
+    const hours = k.stack(backP, { gap: 6, padding: 16, radius: 12, fill: "card", name: "Hours card" });
+    k.text(hours, "OPENING HOURS", { style: "Kicker 9", color: "onCard", width: "FILL", name: "Hours title" });
+    for (const [d, t] of [["Mon \u2013 Thu", "7:30 am \u2013 6 pm"], ["Friday", "7:30 am \u2013 2 pm"], ["Saturday", "8 am \u2013 12 pm, twice a month"], ["Emergencies", "Call any time"]]) k.instance(hours, "Hours", { Day: d, Time: t }, { width: "FILL", name: "Hours" });
+    k.text(backP, "{{brand.phone}}\n{{brand.website}}", { style: "Item 13", color: "text", width: "FILL", name: "Contact" });
+    const flapTop = k.stack(flap, { gap: 12, name: "Flap words" });
+    k.text(flapTop, "NEW PATIENTS", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(flapTop, "Your first exam is on us", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    k.text(flapTop, "A full check-up, X-rays and a clean for $49 when you join this season, with or without insurance.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Body" });
+    const coupon = k.stack(flap, { gap: 8, padding: 20, radius: 16, fill: "accent", stroke: { color: "primary", width: 2, dash: [6, 5] }, name: "Coupon" });
+    k.text(coupon, "$49", { style: "Offer 30", color: "onAccent", width: "FILL", name: "Price" });
+    k.text(coupon, "New-patient exam, X-rays and clean. Mention this brochure when you book. Until December 20.", { style: "Body 11", color: "onAccent", width: "FILL", name: "Terms" });
+    const fsp = k.stack(flap, { name: "Space" });
+    k.patch(fsp, { layoutSizingVertical: "FILL" });
+    k.text(flap, "We take Delta Dental, Cigna, MetLife, Aetna and most PPO plans, and offer 0% payment plans.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Insurance" });
+    raise(k, k.node(cover).parentId);
+    foldMarks(k, f.sheets.outside, f.outside, H, B, "text");
+    const [p1, p2, p3] = panels(k, f.sheets.inside, f.inside, H, B, { pad: PAD, gap: 16, grounds: [void 0, "card", void 0], names: ["Welcome", "Treatments", "First visit"] });
+    const ix = panelX(f.inside);
+    art(k, f.sheets.inside, W, H, B, discIn(ix[0] + 20, H + 10, 130, -B, -B, ix[1], H + B), "foam", { name: "Foam" });
+    k.text(p1, "WELCOME", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(p1, "A practice that feels like a neighbour", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    k.text(p1, "We have looked after Raleigh families since 2008. We explain everything before we start, never rush, and keep a calm room with a ceiling TV for nervous patients of every age.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Body" });
+    const team = k.stack(p1, { gap: 16, name: "Team" });
+    for (const [n, r] of [["Dr. Maya Okafor, DDS", "General and family dentistry"], ["Dr. Sam Whitley, DMD", "Children\u2019s dentistry"], ["Lena Ortiz, RDH", "Hygienist, 14 years"]]) k.instance(team, "Dentist", { Name: n, Role: r }, { width: "FILL", name: "Dentist" });
+    const room = k.stack(p1, { gap: 6, name: "Room" });
+    k.photo(room, f.inside[0] - PAD.left - PAD.right, 170, { radius: 14, ground: "card", name: "Room photo" });
+    k.text(room, "Our sunny treatment rooms on Wade Avenue", { style: "Body 11", color: "onPaper", width: "FILL", name: "Room caption" });
+    k.text(p2, "WHAT WE DO", { style: "Kicker 9", color: "onCard", width: "FILL", name: "Kicker" });
+    k.text(p2, "Treatments", { style: "Title 24", color: "onCard", width: "FILL", name: "Title" });
+    const list = k.stack(p2, { gap: 22, name: "Treatments" });
+    for (const [n, a] of [["Check-ups and cleans", "Twice a year, with a gentle hygienist."], ["Children\u2019s dentistry", "First visits from age one, with stickers."], ["Fillings and crowns", "Tooth-coloured, most done in one visit."], ["Whitening", "In the chair or take-home trays."], ["Clear aligners", "Invisalign, with a free consultation."], ["Emergencies", "Same-day appointments for pain."]]) k.instance(list, "Treatment", { Name: n, About: a }, { width: "FILL", name: "Treatment" });
+    const calm = k.stack(p2, { gap: 4, padding: 18, radius: 14, fill: "paper", name: "Nervous" });
+    k.text(calm, "Nervous about the dentist?", { style: "Item 13", color: "text", width: "FILL", name: "Nervous title" });
+    k.text(calm, "Tell us when you book. We go slowly, agree a stop signal, and offer laughing gas for anyone who wants it.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Nervous text" });
+    k.text(p3, "YOUR FIRST VISIT", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.text(p3, "Three easy steps", { style: "Title 24", color: "text", width: "FILL", name: "Title" });
+    const steps = k.stack(p3, { gap: 24, name: "Steps" });
+    for (const [n, t, a] of [["1", "Book online or call", "Pick a time that suits you; evenings fill fast."], ["2", "Fill in one short form", "Your history and insurance, from your phone."], ["3", "Meet your dentist", "An exam, X-rays and a plan, with prices first."]]) k.instance(steps, "Step", { Number: n, Title: t, About: a }, { width: "FILL", name: "Step" });
+    k.text(p3, "BRING WITH YOU", { style: "Kicker 9", color: "onPaper", width: "FILL", name: "Bring title" });
+    k.text(p3, "Your insurance card, a photo ID, a list of any medicines you take, and your questions.", { style: "Body 11", color: "onPaper", width: "FILL", name: "Bring" });
+    const book = k.stack(p3, { gap: 4, padding: 18, radius: 14, fill: "primary", name: "Book" });
+    k.text(book, "BOOK TODAY", { style: "Kicker 9", color: "onPrimary", width: "FILL", name: "Book title" });
+    k.text(book, "{{brand.phone}}", { style: "Title 24", color: "onPrimary", width: "FILL", name: "Phone" });
+    k.text(book, "{{brand.website}}", { style: "Body 11", color: "onPrimary", width: "FILL", name: "Website" });
+    raise(k, k.node(p1).parentId);
+    foldMarks(k, f.sheets.inside, f.inside, H, B, "text");
+    k.setCover(f.sheets.outside);
+    return k.finish();
+  }
+});
+
+export {
+  printshop_brochure_dental_default
+};