@popcraft/kit 0.31.0 → 0.32.1

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

@@ -1,278 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  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

@@ -1,79 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  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

@@ -1,190 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  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
-};