@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-4MKU3YJW.js

@@ -0,0 +1,278 @@
+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 {
+  boardParts,
+  clock,
+  doodle,
+  draw,
+  drawOn,
+  dueCard,
+  fillLesson,
+  pressStar,
+  reportCard,
+  schoolBrand,
+  sweep,
+  tally,
+  timetable,
+  underline
+} from "./chunk-UUVFCXEF.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/back-to-school-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 8e3;
+var BOX = { w: 560, h: 620 };
+var U = 0.6;
+var CARD = 300;
+var LESSONS = [
+  { n: 1, time: "09:00", title: "Import your notes", note: "Notion, Google Docs or Markdown.", hi: "hiYellow" },
+  { n: 2, time: "09:02", title: "Invite the team", note: "One link. No seats to count yet.", hi: "hiPink" },
+  { n: 3, time: "09:03", title: "Pick your templates", note: "Meeting notes, specs, a wiki home.", hi: "hiBlue" },
+  { n: 4, time: "09:06", title: "Connect your tools", note: "Slack and GitHub, two clicks each.", hi: "hiGreen" },
+  { n: 5, time: "09:08", title: "Publish page one", note: "Then recess. You have earned it.", hi: "hiYellow" }
+];
+var fills = (i) => 1500 + i * 800;
+var WEEK = [
+  { day: "Mon", lessons: [["Notes", "Meeting notes whose action items chase their owners.", "hiYellow"], ["Search", "Finds the sentence, not just the title.", "hiBlue"]] },
+  { day: "Tue", lessons: [["Specs", "Every decision logged beside the doc it changed.", "hiPink"], ["Comments", "Threads resolve into the text, not into the void.", "hiGreen"]] },
+  { day: "Wed", lessons: [["Wiki", "Pages flag themselves when they go stale.", "hiBlue"], ["Templates", "Twelve starters. Yours save in one click.", "hiYellow"]] },
+  { day: "Thu", lessons: [["Integrations", "Slack, GitHub and Linear links unfurl in place.", "hiGreen"], ["Guests", "A client sees one page, never the workspace.", "hiPink"]] },
+  { day: "Fri", lessons: [["Publish", "Any page becomes a public link on your domain.", "hiYellow"], ["Digest", "What changed this week, in one email.", "hiBlue"]] }
+];
+var GRADES = [
+  { n: 1, subject: "Search", grade: "A+", comment: "\u201CFound a decision from March in four seconds.\u201D", who: "Head of product, 40-person fintech" },
+  { n: 2, subject: "Onboarding", grade: "A", comment: "\u201CThe whole team was writing in it by lunch.\u201D", who: "Founder, two-person studio" },
+  { n: 3, subject: "Speed", grade: "A", comment: "\u201CIt opens faster than the tab I was closing.\u201D", who: "Staff engineer, dev-tools startup" },
+  { n: 4, subject: "Mobile app", grade: "B", comment: "\u201CReads well, edits slowly. Could try harder.\u201D", who: "Fair. Offline editing ships this term." }
+];
+var EPISODES = [
+  ["Lesson 1 \xB7 4 min", "From a messy Notion export to a tidy workspace", "The import, what it keeps (folders, mentions, embeds) and the two things to fix by hand."],
+  ["Lesson 2 \xB7 6 min", "A meeting-notes template that chases its own actions", "Owners, due dates and the Monday reminder, built from an empty page."],
+  ["Lesson 3 \xB7 5 min", "A wiki that tells you when it is lying", "Review dates, stale flags and who gets nudged."]
+];
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 600 } },
+  { layer: "Nav", preset: "fade-in", at: 100, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 300, params: { duration: 700 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 22 } },
+  { layer: "Visual", preset: "fade-in", at: 300, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 900, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1300, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Proof", preset: "fade-in", at: 2e3, params: { duration: 800 } }
+];
+var back_to_school_landing_default = defineTemplate({
+  id: "web-back-to-school-landing",
+  meta: {
+    name: "School term landing page",
+    description: "A back-to-school landing page for a SaaS, set on a classroom chalkboard: a bar with the student and educator offer, a hero whose framed board holds a paper timetable that fills in lesson by lesson with highlighter and gold stars while a chalk clock moves to ten past; the features as a week\u2019s syllabus on ruled paper; a report card of customer grades, rubber-stamped, the one B included; a tutorial series as a ruled list; and the offer as a library due-date card \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["back to school", "school", "september", "landing page", "hero", "website", "saas", "chalkboard", "timetable", "syllabus", "report card", "student discount", "education", "onboarding", "tutorials", "animation", "responsive", "seasonal", "serif"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "onboarding", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("School term landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    schoolBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Bar 15", { size: 15, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 80", { ...SERIF, size: 80, fontWeight: 900, letterSpacing: -2.8, lineHeight: 82 });
+    k.textStyle("Display 68", { ...SERIF, size: 68, fontWeight: 900, letterSpacing: -2.2, lineHeight: 70 });
+    k.textStyle("Display 58", { ...SERIF, size: 58, fontWeight: 900, letterSpacing: -1.8, lineHeight: 60 });
+    k.textStyle("Display 42", { ...SERIF, size: 42, fontWeight: 900, letterSpacing: -1.2, lineHeight: 46 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Term 24", { ...SERIF, size: 24, fontWeight: 700, letterSpacing: -0.4, lineHeight: 30 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 29 });
+    k.textStyle("When 15", { ...MONO, size: 15, fontWeight: 700, lineHeight: 29 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Sheet title 20", { ...SERIF, size: 20, fontWeight: 900, letterSpacing: -0.4, lineHeight: 24 });
+    k.textStyle("Time 14", { ...MONO, size: 14, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Lesson 18", { size: 18, fontWeight: 800, letterSpacing: -0.3, lineHeight: 22 });
+    k.textStyle("Note 13", { size: 13, fontWeight: 500, lineHeight: 18 });
+    k.textStyle("Day 14", { ...MONO, size: 14, fontWeight: 800, letterSpacing: 2, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Cell 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 26 });
+    k.textStyle("Cell note 15", { size: 15, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Report title 30", { ...SERIF, size: 30, fontWeight: 900, letterSpacing: -0.7, lineHeight: 36 });
+    k.textStyle("Report meta 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Subject 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.4, lineHeight: 28 });
+    k.textStyle("Comment 17", { ...SERIF, size: 17, fontWeight: 400, lineHeight: 25, fontStyle: "italic" });
+    k.textStyle("Who 13", { ...MONO, size: 13, fontWeight: 500, lineHeight: 19 });
+    k.textStyle("Grade 34", { ...SERIF, size: 34, fontWeight: 900, letterSpacing: -1, lineHeight: 38 });
+    k.textStyle("Card title 13", { ...MONO, size: 13, fontWeight: 800, letterSpacing: 1.6, lineHeight: 18, textCase: "UPPER" });
+    k.textStyle("Card head 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.4, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Card date 18", { ...MONO, size: 18, fontWeight: 800, letterSpacing: 0.6, lineHeight: 22 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 8 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 80, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    draw(k, sheet, boardParts({ w: 1440, h: 1500, u: 1.5, seed: 11 }).filter((p) => p.name === "Board light" || p.name.startsWith("Smear")));
+    const bar = k.stack(sheet, { fill: "primary", radius: 8, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
+    k.text(bar, "New term: students and educators get {{brand.name}} Pro at half price, all year. Verify a school email by 30 September.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["Syllabus", "Report card", "Tutorials", "Pricing"], cta: "Start the term", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.text(copy, "{{brand.name}} \xB7 Autumn term 2026", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    const head = k.stack(copy, { gap: 10, name: "Headline block" });
+    k.text(head, "Homework: set up your workspace in ten minutes.", { style: "Display 80", color: "text", name: "Headline" });
+    underline(k, head, { w: 300, u: 0.9 });
+    k.text(copy, "Quire is the shared notebook for small teams: meeting notes, specs and a wiki that stay findable. Five short lessons take you from an empty page to a published one before first break.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Start lesson one" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the syllabus" }, { name: "CTA quiet" });
+    k.text(copy, "free for 30 days \xB7 half price with a school email", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const holder = k.stack(hero, { width: BOX.w, height: BOX.h, name: "Visual holder" });
+    const visual = k.stack(holder, { width: BOX.w, height: BOX.h, fill: "card", radius: 6, clip: true, name: "Visual", absolute: { x: 0, y: 0 } });
+    draw(k, visual, [
+      ...boardParts({ w: BOX.w, h: BOX.h, u: U, ground: "card", chalk: "onCard", frame: 18, tray: true, duster: 0.08, sticks: 0.52, swipe: { x: 330, y: 500, length: 330, turn: -6 } }),
+      ...doodle({ kind: "star", name: "Chalk star 1", x: 468, y: 34, s: 44, turn: -12, role: "accent", width: 3 }),
+      ...doodle({ kind: "star", name: "Chalk star 2", x: 512, y: 82, s: 24, turn: 14, role: "onCard", width: 2.5 }),
+      ...tally({ n: 10, x: 62, y: 462, size: 76, width: 5, role: "onCard" })
+    ]);
+    clock(k, visual, { x: 446, y: 500, r: 56, hour: 275, minute: 60, role: "onCard" });
+    const board = timetable(k, visual, { w: 456, u: U, title: "Monday, first period", lessons: LESSONS, star: 34, times: 58, styles: { title: "Sheet title 20", time: "Time 14", lesson: "Lesson 18", note: "Note 13" }, absolute: { x: 52, y: 56 } });
+    LESSONS.forEach((l, i) => {
+      fillLesson(k, board, l.n, fills(i));
+      pressStar(k, board, `Star ${l.n}`, fills(i) + 380);
+      drawOn(k, visual, `Tally ${i * 2 + 1}`, fills(i) + 100, 240);
+      drawOn(k, visual, `Tally ${i * 2 + 2}`, fills(i) + 420, 240);
+    });
+    sweep(k, visual, 0, 60, fills(0), fills(4) + 600 - fills(0));
+    drawOn(k, sheet, "Chalk underline", 1300, 600);
+    const syllabus = k.stack(sheet, { gap: 28, name: "Syllabus" });
+    const intro = k.stack(syllabus, { direction: "HORIZONTAL", gap: 48, align: "MAX", name: "Syllabus intro" });
+    k.text(intro, "The syllabus", { style: "Section 44", color: "text", width: 420, name: "Syllabus title" });
+    k.text(intro, "Ten things {{brand.name}} does, two a day. Nothing here needs a consultant, a migration weekend or a second monitor.", { style: "Body 18", color: "onPaper", name: "Syllabus text" });
+    const paper = k.stack(syllabus, { fill: "sheet", radius: 6, padding: { top: 28, right: 28, bottom: 28, left: 28 }, name: "Week sheet", effects: [{ type: "DROP_SHADOW", color: { r: 0.02, g: 0.06, b: 0.05, a: 0.45 }, offset: { x: 0, y: 10 }, blur: 28, spread: 0, visible: true }] });
+    const week = k.stack(paper, { direction: "HORIZONTAL", gap: 16, name: "Week" });
+    for (const d of WEEK) {
+      const col = k.stack(week, { gap: 10, name: "Day" });
+      k.text(col, d.day, { style: "Day 14", color: "inkSoft", name: "Day name" });
+      k.rect(col, "FILL", 3, "ink", { name: "Day rule" });
+      for (const [title, note, hi] of d.lessons) {
+        const cell = k.stack(col, { fill: hi, radius: 5, gap: 4, padding: { top: 14, right: 14, bottom: 16, left: 14 }, name: "Week cell" });
+        k.text(cell, title, { style: "Cell 20", color: "ink", name: "Cell title" });
+        k.text(cell, note, { style: "Cell note 15", color: "ink", name: "Cell note" });
+      }
+    }
+    const report = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Report" });
+    const about = k.stack(report, { width: 380, gap: 14, name: "Report about" });
+    k.text(about, "Our report card", { style: "Section 44", color: "text", name: "Report title" });
+    k.text(about, "Graded by 1,240 teams on G2 and Capterra over the summer term. We printed all of it, including the subject we are still resitting.", { style: "Body 18", color: "onPaper", name: "Report text" });
+    k.text(about, "average 4.8 of 5 \xB7 1,240 reviews", { style: "Proof 15", color: "onPaper", name: "Report proof" });
+    const cardHolder = k.stack(report, { padding: { top: 18, right: 0, bottom: 0, left: 0 }, name: "Report holder" });
+    reportCard(k, cardHolder, { w: 748, u: 0.8, title: "End-of-term report", meta: "Summer 2026", grades: GRADES, ring: 68, styles: { title: "Report title 30", meta: "Report meta 13", subject: "Subject 22", comment: "Comment 17", who: "Who 13", grade: "Grade 34" } });
+    const working = k.stack(sheet, { gap: 0, name: "Working" });
+    k.text(working, "Show your working", { style: "Section 44", color: "text", name: "Working title" });
+    k.stack(working, { height: 8, name: "Gap" });
+    k.text(working, "A short series for the first week. Each lesson builds one real thing, from an empty page, with nothing cut out.", { style: "Body 18", color: "onPaper", name: "Working text" });
+    k.stack(working, { height: 24, name: "Gap" });
+    for (const [when, title, what] of EPISODES) {
+      k.rect(working, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+      const row = k.stack(working, { direction: "HORIZONTAL", gap: 28, padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Episode" });
+      k.text(row, when, { style: "When 15", color: "onPaper", width: 180, name: "Episode when" });
+      k.text(row, title, { style: "Term 24", color: "text", width: 420, name: "Episode title" });
+      k.text(row, what, { style: "Body 18", color: "onPaper", name: "Episode what" });
+    }
+    k.rect(working, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", fill: "card", radius: 16, stroke: { color: "accent", width: 1 }, padding: 48, name: "Band" });
+    const cardBox = k.stack(band, { width: CARD, name: "Card holder" });
+    dueCard(k, cardBox, {
+      w: CARD,
+      u: 1,
+      title: "{{brand.name}} school offer",
+      head: "Date due",
+      rows: 4,
+      dates: [{ n: 1, label: "02 SEP", tilt: -3, faded: true }, { n: 2, label: "09 SEP", tilt: 2, faded: true }, { n: 3, label: "16 SEP", tilt: -2, faded: true }, { n: 4, label: "23 SEP", tilt: 3, faded: true }, { n: 5, label: "30 SEP", role: "stampRed", tilt: -4 }],
+      styles: { title: "Card title 13", head: "Card head 12", date: "Card date 18" }
+    });
+    const due = k.stack(band, { gap: 12, name: "Band copy" });
+    k.text(due, "Hand it in by 30 September.", { style: "Section 44", color: "onCard", name: "Band title" });
+    k.text(due, "Students, teachers and school staff get {{brand.name}} Pro for $4 a seat instead of $8, for the whole school year. Verify once with a school email; no card until the trial ends.", { style: "Body 18", color: "onCard", name: "Band text" });
+    k.instance(due, "Button", { Label: "Verify a school email" }, { name: "Band button" });
+    k.text(sheet, "\xA9 2026 Quire Notebooks \xB7 Syllabus \xB7 Security \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Syllabus intro", "Week", "Report", "Band"],
+      stackMobile: ["Episode"],
+      restyle: {
+        "Display 80": { laptop: "Display 68", tablet: "Display 58", mobile: "Display 42" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" }
+      },
+      gap: { tablet: 64, mobile: 52 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+          for (const n of kit.named(id, "Report")) kit.patch(n, { itemSpacing: 48 });
+          for (const n of kit.named(id, "Report about")) kit.patch(n, { width: 300 });
+          for (const n of kit.named(id, "Episode title")) kit.patch(n, { width: 340 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Syllabus intro")) kit.patch(n, { itemSpacing: 10 });
+          for (const n of kit.named(id, "Week")) kit.patch(n, { itemSpacing: 22 });
+          for (const n of kit.named(id, "Report")) kit.patch(n, { itemSpacing: 28 });
+          for (const n of kit.named(id, "Report about")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 32, padding: { top: 32, right: 24, bottom: 32, left: 24 }, counterAxisAlignItems: size === "mobile" ? "CENTER" : "MIN" });
+          for (const n of kit.named(id, "Episode title")) kit.patch(n, { width: 260 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Episode")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Week sheet")) kit.patch(n, { padding: { top: 20, right: 16, bottom: 20, left: 16 } });
+        }
+        const wide = size === "laptop" ? 1280 - 160 - 300 - 48 : size === "tablet" ? 768 - 96 : size === "mobile" ? 375 - 40 : 748;
+        for (const n of kit.named(id, "Report card")) {
+          kit.patch(n, { width: wide });
+          for (const c of kit.named(n, "Sheet")) kit.patch(c, { width: wide, ...size === "mobile" ? { padding: { top: 30, right: 16, bottom: 12, left: 16 } } : {} });
+          for (const c of kit.named(n, "Sheet fold")) kit.patch(c, { width: wide });
+          if (size === "mobile") for (const c of kit.named(n, "Tape")) kit.patch(c, { visible: false });
+        }
+        for (const name of ["Card holder", "Due card"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: CARD });
+        const s = size === "mobile" ? 335 / BOX.w : 1;
+        for (const n of kit.named(id, "Visual holder")) kit.patch(n, { layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED", width: Math.round(BOX.w * s), height: Math.round(BOX.h * s) });
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: BOX.w, height: BOX.h, ...s === 1 ? {} : { anchorX: 0, anchorY: 0, scaleX: s, scaleY: s } });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  back_to_school_landing_default
+};

package/dist/chunks/chunk-4N7IKZHK.js

@@ -0,0 +1,79 @@
+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 {
+  safePadding
+} from "./chunk-QVURWCH2.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/lower-third.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var lower_third_default = defineTemplate({
+  id: "motion-lower-third",
+  meta: {
+    name: "Lower third",
+    description: "A broadcast name bar: slides in, holds while the title cycles, slides out at the Out marker \u2014 six seconds at 30 fps, to lay over your video",
+    category: "animation",
+    tags: ["animation", "lower third", "video", "broadcast"],
+    platforms: ["youtube", "broadcast", "tiktok", "instagram"],
+    formats: ["lower-third", "video", "story"],
+    useCases: ["interview", "livestream"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  build() {
+    const k = new Kit("Lower third", preset("slide-16x9"));
+    k.brand({ primary: "#0B0D12", accent: "#FF4D2E", onPrimary: "#FFFFFF", onAccent: "#0B0D12", muted: "#B8BDC7", screen: "#1C2230" }, { name: "Maya Okafor" });
+    k.textStyle("Name 64", { size: 64, fontWeight: 800, letterSpacing: -1, lineHeight: 72 });
+    k.textStyle("Title 32", { size: 32, fontWeight: 500, lineHeight: 40 });
+    k.textStyle("Badge 22", { size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28 });
+    k.component("Live badge", { direction: "HORIZONTAL", width: "HUG", fill: "accent", radius: 999, align: "CENTER", padding: { top: 8, right: 16, bottom: 8, left: 16 }, props: { Tag: "LIVE" } }, (id) => {
+      k.propText(id, "Tag", { style: "Badge 22", color: "onAccent", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 96, right: 120, bottom: 110, left: 120 }, "screen", "MAX");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: 6e3, fps: 30, markers: [{ id: "m1", t: 700, label: "In" }, { id: "m2", t: 4800, label: "Out" }] });
+    const bar = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 28, align: "CENTER", fill: "primary", radius: 16, clip: true, padding: { top: 28, right: 40, bottom: 28, left: 28 }, name: "Lower third" });
+    const rule = k.rect(bar, 10, 112, "accent", { radius: 5, name: "Accent rule" });
+    const lines = k.stack(bar, { width: "HUG", gap: 4, clip: true, name: "Text" });
+    const name = k.text(lines, "{{brand.name}}", { style: "Name 64", color: "onPrimary", autoWidth: true, name: "Name" });
+    const title = k.text(lines, "Founder & CEO, Northwind", { style: "Title 32", color: "muted", width: 560, name: "Title" });
+    const live = k.instance(bar, "Live badge", { Tag: "LIVE" });
+    k.animate(bar, "translateX", [{ t: 0, v: -1100, ease: ease.out("expo") }, { t: 700, v: 0, ease: ease.hold }, { t: 4800, v: 0, ease: ease.back(1.9, "in") }, { t: 5400, v: -1100 }]);
+    k.animate(bar, "opacity", [{ t: 0, v: 0, ease: ease.linear }, { t: 200, v: 1, ease: ease.hold }, { t: 5200, v: 1, ease: ease.linear }, { t: 5400, v: 0 }]);
+    k.patch(rule, { anchorY: 1 });
+    k.animate(rule, "scaleY", [{ t: 0, v: 0, ease: ease.hold }, { t: 450, v: 1 }]);
+    k.delay(name, 300);
+    k.animate(name, "translateY", [{ t: 0, v: 40, ease: ease.out("expo") }, { t: 700, v: 0 }]);
+    k.animate(name, "opacity", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 400, v: 1 }]);
+    k.delay(title, 500);
+    k.animate(title, "opacity", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 400, v: 1 }]);
+    k.animate(title, "text.content", [{ t: 0, v: "Founder & CEO, Northwind" }, { t: 2200, v: "@maya on every platform" }]);
+    k.animate(live, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 900, v: 1, ease: ease.hold }, { t: 4600, v: 0 }]);
+    k.variants(sheet, [
+      // Vertical video: the bar rides above the caption and music strip every vertical app draws at the bottom.
+      { preset: "ig-story", adjust: (kit, id) => kit.patch(id, { padding: safePadding("ig-story", 1080, 1920, { top: 96, right: 64, bottom: 110, left: 64 }, false) }) }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  lower_third_default
+};

package/dist/chunks/chunk-4NPVL4BL.js

@@ -0,0 +1,190 @@
+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 {
+  classNameFor,
+  interactiveSpec
+} from "./chunk-ENA25RHE.js";
+import {
+  fontFaceRules,
+  fontsHref
+} from "./chunk-KBX6XBHO.js";
+import {
+  CHECK_STYLE,
+  MOTION_PLAY_RULE,
+  MOTION_SCRIPT,
+  PROTOTYPE_JS,
+  altFor,
+  elementOf,
+  escapeHTML,
+  imageRoleAttrs,
+  labelSVG,
+  machineLayers,
+  machineScript,
+  placementStyle,
+  styleMapToCSSText,
+  styleMapToInline,
+  tokensCSS
+} from "./chunk-N42YJFOC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/io/web/html.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pictureMarkup = (node, picture, indent) => {
+  if (!picture) return "";
+  if (picture.kind === "svg") return `
+${indent}  ${labelSVG(picture.svg, node)}`;
+  if (picture.kind === "img") return `
+${indent}  <img src="${picture.src}" width="${node.width}" height="${node.height}" alt="${escapeHTML(altFor(node))}" />`;
+  return `
+${indent}  <!-- ${escapeHTML(picture.reason)}: render this node to ${picture.format.toUpperCase()} -->`;
+};
+var runMarkup = (run) => {
+  const style = Object.keys(run.style).length ? ` style="${escapeHTML(styleMapToInline(run.style))}"` : "";
+  const words = escapeHTML(run.text);
+  if (run.link) return `<a href="${escapeHTML(run.link)}"${style}>${words}</a>`;
+  return style ? `<span${style}>${words}</span>` : words;
+};
+var interactiveScript = (spec) => `${PROTOTYPE_JS}
+popcraftMount(document.querySelector('[data-pc="0"]'), ${JSON.stringify(spec)});`;
+function serializeHTML(tree, opts = {}) {
+  const rules = [];
+  const keyframes = [];
+  let triggered = false;
+  const spec = opts.inline ? null : interactiveSpec(tree);
+  const machine = opts.inline ? null : tree.stateMachine ?? null;
+  const listened = machineLayers(machine);
+  const emit = (node, depth, isRoot) => {
+    const indent = "  ".repeat(depth);
+    const el = elementOf(node, { isRoot, spec, listened, still: opts.inline });
+    const { tag, style } = el;
+    let attrs;
+    if (opts.inline || el.pc) {
+      attrs = ` style="${escapeHTML(styleMapToInline(style))}"`;
+      if (el.pc) {
+        attrs = ` class="${classNameFor(node)}"${attrs} data-pc="${el.pc.uid}" data-layer="${escapeHTML(el.pc.layer)}"`;
+        if (el.keyframes && !keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
+        if (el.motionTrigger) {
+          attrs += ` data-motion="${el.motionTrigger}"`;
+          triggered = true;
+        }
+      }
+    } else {
+      const cls = classNameFor(node);
+      const own = Object.fromEntries(Object.entries(style).filter(([, v]) => v.includes("{{")));
+      const shared = Object.fromEntries(Object.entries(style).filter(([, v]) => !v.includes("{{")));
+      rules.push(`.${cls} {
+${styleMapToCSSText(shared, "  ")}
+}`);
+      attrs = ` class="${cls}"${Object.keys(own).length ? ` style="${styleMapToInline(own)}"` : ""}`;
+      if (el.keyframes) {
+        if (!keyframes.includes(el.keyframes)) keyframes.push(el.keyframes);
+        attrs += " data-motion-child";
+      }
+      if (el.motionTrigger) {
+        attrs += ` data-motion="${el.motionTrigger}"`;
+        triggered = true;
+      }
+    }
+    const sends = node.action ? opts.form?.(node) : null;
+    for (const [k, v] of Object.entries({ ...el.attrs, ...sends?.attrs })) attrs += ` ${k}="${escapeHTML(v)}"`;
+    attrs += imageRoleAttrs(node);
+    if (opts.ids) attrs += ` data-pc-id="${escapeHTML(node.id)}"`;
+    if (machine && isRoot) attrs += ' data-sm-root=""';
+    if (machine && el.sm) attrs += ` data-sm="${escapeHTML(el.sm)}"`;
+    if (el.input?.tag === "input") return `${indent}<input${attrs} />`;
+    if (el.input) {
+      const body2 = el.input.tag === "select" ? (el.input.options ?? []).map((o) => `
+${indent}  <option value="${escapeHTML(o.value)}"${o.value === el.input.value ? " selected" : ""}>${escapeHTML(o.label)}</option>`).join("") + `
+${indent}` : escapeHTML(el.input.value ?? "");
+      return `${indent}<${tag}${attrs}>${body2}</${tag}>`;
+    }
+    const check = el.check ? `
+${indent}  <input${Object.entries(el.check.attrs).map(([k, v]) => ` ${k}="${escapeHTML(v)}"`).join("")} style="${CHECK_STYLE}" />` : "";
+    if (el.html !== void 0) return `${indent}<${tag}${attrs}>${el.html}</${tag}>`;
+    const words = el.runs ? el.runs.map(runMarkup).join("") : el.text !== void 0 ? escapeHTML(el.text) : null;
+    if (words !== null && !el.picture && !node.children.length && !node.repeat && !check && !sends?.fields) return `${indent}<${tag}${attrs}>${words}</${tag}>`;
+    const inner = [
+      el.runs ? `
+${indent}  ${el.runs.map(runMarkup).join("")}` : el.text !== void 0 ? `
+${indent}  ${escapeHTML(el.text)}` : "",
+      pictureMarkup(node, el.picture, indent),
+      ...sends?.fields ? [`
+${indent}  ${sends.fields}`] : [],
+      ...listed(node, depth),
+      check
+    ].join("");
+    return inner ? `${indent}<${tag}${attrs}>${inner}
+${indent}</${tag}>` : `${indent}<${tag}${attrs}></${tag}>`;
+  };
+  const listed = (node, depth) => {
+    const loop = node.repeat && opts.lists?.(node);
+    if (!loop || !node.repeat) return node.children.map((c) => `
+${emit(c, depth + 1, false)}`);
+    const indent = "  ".repeat(depth + 1);
+    return [`
+${indent}${loop.open}`, ...node.repeat.template.map((c) => `
+${emit(c, depth + 2, false)}`), `
+${indent}${loop.close}`];
+  };
+  const body = emit(tree.root, opts.document ? 2 : 0, true);
+  const fonts = opts.document ? fontsHref(tree) : null;
+  const note = tree.truncated ? "\n<!-- subtree truncated at the node cap -->" : "";
+  if (!opts.inline && tree.rules) rules.unshift(...tree.rules);
+  if (!opts.inline && tree.tokens) rules.unshift(...tokensCSS(tree.tokens));
+  if (triggered) rules.push(MOTION_PLAY_RULE);
+  for (const k of tree.interactive && !opts.inline ? tree.interactive.keyframes : []) if (!keyframes.includes(k)) keyframes.push(k);
+  rules.push(...keyframes);
+  const scripts = [triggered ? MOTION_SCRIPT : "", spec ? interactiveScript(spec) : "", machine ? machineScript(machine) : ""].filter(Boolean);
+  const script = scripts.length ? `
+<script>
+${scripts.join("\n")}
+</script>` : "";
+  if (!opts.document) return opts.inline ? body + note : `<style>
+${rules.join("\n")}
+</style>
+${body}${note}${script}`;
+  return [
+    "<!DOCTYPE html>",
+    `<html lang="${escapeHTML(opts.lang ?? "en")}">`,
+    "<head>",
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    `<title>${escapeHTML(opts.title ?? tree.root.name)}</title>`,
+    ...fonts ? [`<link rel="stylesheet" href="${escapeHTML(fonts)}" />`] : [],
+    // The file's own fonts, shipped with the page (lib/fonts/web-fonts.ts).
+    ...opts.inline && tree.fontFaces?.length ? ["<style>", ...fontFaceRules(tree.fontFaces), "</style>"] : [],
+    ...opts.inline ? [] : ["<style>", "body { margin: 0; }", ...fontFaceRules(tree.fontFaces), ...rules, "</style>"],
+    "</head>",
+    "<body>",
+    body + note + script,
+    "</body>",
+    "</html>"
+  ].join("\n");
+}
+function serializeCSS(tree) {
+  const out = [];
+  const keyframes = [];
+  let triggered = false;
+  const walk = (node, isRoot) => {
+    out.push(`.${classNameFor(node)} {
+${styleMapToCSSText({ ...placementStyle(node, isRoot), ...node.style, ...node.motion?.style }, "  ")}
+}`);
+    if (node.motion && !keyframes.includes(node.motion.keyframes)) keyframes.push(node.motion.keyframes);
+    if (node.motionTrigger) triggered = true;
+    for (const c of node.children) walk(c, false);
+  };
+  walk(tree.root, true);
+  if (triggered) out.push(MOTION_PLAY_RULE);
+  return [...out, ...keyframes].join("\n\n");
+}
+
+export {
+  serializeHTML,
+  serializeCSS
+};