@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-GHHBB3HM.js

@@ -0,0 +1,255 @@
+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 {
+  DEAL,
+  board as board2,
+  boardHead,
+  change,
+  chart,
+  dashRule,
+  floorBrand,
+  ledWell,
+  playChart,
+  row,
+  tape,
+  two
+} from "./chunk-565NQUD2.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  board,
+  reboard
+} from "./chunk-QLV6445V.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/black-friday-ticker-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PLANS = [
+  { id: "Solo", symbol: "SOLO", name: "Solo, annual", pitch: "One status page and on-call alerts for one person.", wasLabel: "PREV CLOSE, 12 MONTHS", was: DEAL.soloWas, now: DEAL.soloNow, fall: `${DEAL.off}%`, includes: ["1 STATUS PAGE", "20 MONITORS, 1 MIN", "EMAIL + SMS ALERTS"], cta: `BUY SOLO @ $${DEAL.soloNow}` },
+  { id: "Team", symbol: "TEAM", name: "Team, annual", pitch: "Five seats, an on-call rota and a page per product.", wasLabel: "PREV CLOSE, 12 MONTHS", was: DEAL.teamWas, now: DEAL.teamNow, fall: `${DEAL.off}%`, includes: ["5 SEATS, 5 PAGES", "100 MONITORS, 30 SEC", "ON-CALL ROTA + SLACK"], cta: `BUY TEAM @ $${DEAL.teamNow}` },
+  { id: "Life", symbol: "LIFE", name: "Solo, lifetime", pitch: "Solo for as long as {{brand.name}} runs. One fill, no renewal.", wasLabel: "FIVE YEARS AT LIST", was: DEAL.soloWas * 5, now: DEAL.lifetime, fall: "69%", includes: ["EVERY UPDATE", "NO RENEWAL, EVER"], cta: `BUY LIFETIME @ $${DEAL.lifetime}` }
+];
+var FAQ = [
+  ["Do I need a code?", "No. The board already shows the sale price on every annual plan until the closing bell: Monday 30 November, 23:59 Pacific."],
+  ["What happens at renewal?", "Year two renews at the list price. We email you 30 days before, and cancelling takes two clicks."],
+  ["Is lifetime really lifetime?", "One payment, Solo for as long as {{brand.name}} runs, every update included. 150 seats are listed and there is no second issue."]
+];
+var TICKS = 8;
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 100 },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: "Clock", preset: "rise-in", at: 500 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 650, stagger: { delay: 100 } },
+  { layer: "Deadline", preset: "fade-in", at: 900, params: { duration: 500 } },
+  { layer: "Hero board", preset: "drop-in", at: 150, params: { duration: 600 } },
+  { layer: "Candles before", preset: "wipe-in", at: 500, params: { duration: 900 } },
+  { layer: "Bell marker", preset: "fade-in", at: 1300, params: { duration: 200 } },
+  { layer: "Candle fall", preset: "wipe-in", at: 1500, params: { duration: 500, direction: "down" } },
+  { layer: "Hero change", preset: "pop-in", at: 1900, params: { duration: 400 } },
+  { layer: "Candles after", preset: "wipe-in", at: 2e3, params: { duration: 1200 } },
+  { layer: "Now level", preset: "fade-in", at: 2400, params: { duration: 300 } },
+  { layer: "Hero figure", preset: "pulse", at: 2700, params: { duration: 600, amount: 0.05 } }
+];
+var counts = [
+  { layer: "Hero figure", at: 1500, duration: 1e3, counter: { from: DEAL.teamWas, to: DEAL.teamNow, prefix: "$" } },
+  // The closing bell's clock: the seconds tick down once a second for as long as the hero plays.
+  { layer: "Seconds figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS } },
+  ...PLANS.map((p, i) => ({ layer: `${p.id} figure`, at: 1700 + i * 200, duration: 1400, counter: { from: p.was, to: p.now, prefix: "$", separator: "" } })),
+  { layer: "Seats row figure", at: 2e3, duration: 2400, counter: { from: DEAL.seats, to: DEAL.seatsLeft } }
+];
+var NAME = "Black Friday ticker sale landing page";
+var CHART = { w: 496, h: 230 };
+var DURATION = 1e4;
+var black_friday_ticker_landing_default = defineTemplate({
+  id: "web-black-friday-ticker-landing",
+  meta: {
+    name: NAME,
+    description: "A Black Friday landing page for a SaaS product, drawn as a trading floor on salmon newspaper paper: a scrolling ticker tape, a hero LED board whose candlestick chart falls off a cliff as the annual price counts down 60%, a live closing-bell clock, and a big board of three plans (two annual plans and a lifetime deal with its seats counting down), each with an order ticket. FAQ included. Desktop to phone",
+    category: "web",
+    tags: ["black friday", "cyber monday", "sale", "landing page", "pricing", "plans", "lifetime deal", "countdown", "stock ticker", "trading floor", "chart", "faq", "saas", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "pricing", "countdown"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    floorBrand(k, { name: DEAL.product, site: DEAL.site, symbol: DEAL.symbol });
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Tape 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 0.6, lineHeight: 20 });
+    k.textStyle("Eyebrow 14", { ...MONO, size: 14, fontWeight: 800, letterSpacing: 1, lineHeight: 20 });
+    k.textStyle("Display 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -2.8, lineHeight: 84 });
+    k.textStyle("Display 64", { ...SERIF, size: 64, fontWeight: 900, letterSpacing: -2, lineHeight: 66 });
+    k.textStyle("Display 52", { ...SERIF, size: 52, fontWeight: 900, letterSpacing: -1.5, lineHeight: 54 });
+    k.textStyle("Display 40", { ...SERIF, size: 40, fontWeight: 900, letterSpacing: -1, lineHeight: 44 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Clock 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 48, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 34, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Unit 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.4, lineHeight: 16, textAlign: "CENTER" });
+    k.textStyle("Note 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Label 13", { ...MONO, size: 13, fontWeight: 700, letterSpacing: 1.4, lineHeight: 18 });
+    k.textStyle("Figure 96", { ...MONO, size: 96, fontWeight: 800, letterSpacing: -3, lineHeight: 104, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 72", { ...MONO, size: 72, fontWeight: 800, letterSpacing: -2.4, lineHeight: 80, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 64", { ...MONO, size: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 72, fontFeatures: { tnum: 1 } });
+    k.textStyle("Change 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 30 });
+    k.textStyle("Change 18", { ...MONO, size: 18, fontWeight: 800, lineHeight: 22 });
+    k.textStyle("Axis 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 0.6, lineHeight: 16 });
+    k.textStyle("Row 15", { ...MONO, size: 15, fontWeight: 600, lineHeight: 22, fontFeatures: { tnum: 1 } });
+    k.textStyle("Plan 24", { size: 24, fontWeight: 800, letterSpacing: -0.4, lineHeight: 30 });
+    k.textStyle("Section 40", { ...SERIF, size: 40, fontWeight: 900, letterSpacing: -1.2, lineHeight: 46 });
+    k.textStyle("Section lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Question 20", { ...SERIF, size: 20, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Body 15", { size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Order 15", { ...MONO, size: 15, fontWeight: 800, letterSpacing: 0.4, lineHeight: 22 });
+    buttons(k, { style: "Button 16", pad: [14, 24], radius: 6 });
+    pill(k, "Marker", { fill: "accent", ink: "onAccent", style: "Eyebrow 14", label: "BLACK FRIDAY SELL-OFF \xB7 27\u201330 NOV", pad: [6, 12], radius: 3 });
+    pill(k, "Order", { fill: "ticket", ink: "ticketInk", style: "Order 15", label: "BUY TEAM @ $236", pad: [12, 18], radius: 4 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 48, top: 28 });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    tape(k, sheet, { item: 300, height: 44, style: "Tape 16", rate: 90, radius: 6, span: 1300 });
+    nav(k, sheet, { links: ["The crash", "The board", "Questions", "Sign in"], cta: "Buy the dip", style: "Nav 16", brandStyle: "Brand 20" });
+    const dateline = k.stack(sheet, { gap: 8, name: "Dateline" });
+    k.rect(dateline, "FILL", 4, "text", { name: "Heavy rule" });
+    const date = k.stack(dateline, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, name: "Dateline row" });
+    k.text(date, "THE {{brand.symbol}} EXCHANGE", { style: "Eyebrow 14", color: "text", autoWidth: true, name: "Edition" });
+    k.text(date, `OPENING BELL ${DEAL.opens.toUpperCase()} \xB7 CLOSING BELL ${DEAL.ends.toUpperCase()}`, { style: "Eyebrow 14", color: "onPaper", autoWidth: true, name: "Session" });
+    k.rect(dateline, "FILL", 1, "text", { name: "Light rule" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", padding: { top: 8, right: 0, bottom: 16, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { gap: 22, name: "Copy" });
+    k.instance(copy, "Marker", { Label: "BLACK FRIDAY SELL-OFF \xB7 27\u201330 NOV" }, { name: "Eyebrow" });
+    k.text(copy, "Our prices just crashed. Buy the dip.", { style: "Display 84", color: "text", name: "Headline" });
+    k.text(copy, `{{brand.name}} runs your status page and wakes the right person when something breaks. From the opening bell on Friday to the closing bell on Monday night, every annual plan trades ${DEAL.off}% under list, and ${DEAL.seats} lifetime seats are listed.`, { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const clock = board2(k, copy, { width: 472, pad: 12, gap: 8, radius: 14, u: 0.5, name: "Clock" });
+    k.text(clock, "CLOSING BELL IN", { style: "Label 13", color: "amber", name: "Clock label" });
+    const tiles = k.stack(clock, { direction: "HORIZONTAL", gap: 8, name: "Tiles" });
+    for (const [name, value] of [["Days", DEAL.days], ["Hours", DEAL.hours], ["Minutes", DEAL.minutes], ["Seconds", DEAL.seconds - TICKS]]) {
+      const tile = k.stack(tiles, { gap: 4, align: "CENTER", name: "Tile" });
+      ledWell(k, tile, { height: 64, span: 240, step: 4, weight: 1, align: "CENTER", name: "Tile well" }, (well) => {
+        k.text(well, two(value), { style: "Clock 44", color: "led", autoWidth: true, name: `${name} figure` });
+      });
+      k.text(tile, name.toUpperCase(), { style: "Unit 12", color: "cardMuted", name: `${name} unit` });
+    }
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: `Buy the dip, ${DEAL.off}% off` }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "See the board" }, { name: "CTA quiet" });
+    k.text(copy, `Closing bell: ${DEAL.ends}. No code to paste: the board already shows the sale price.`, { style: "Note 15", color: "onPaper", name: "Deadline" });
+    const hb = board2(k, hero, { width: 560, pad: 28, gap: 14, radius: 22, u: 0.8, name: "Hero board" });
+    boardHead(k, hb, { label: "{{brand.symbol}}.TEAM \xB7 ANNUAL", note: "BLACK FRIDAY SESSION", style: "Label 13", lamp: 10 });
+    ledWell(k, hb, { height: 124, span: 700, step: 5, weight: 1, pad: 18, align: "SPACE_BETWEEN", name: "Hero well" }, (well) => {
+      k.text(well, `$${DEAL.teamNow}`, { style: "Figure 96", color: "led", autoWidth: true, name: "Hero figure" });
+      const side = k.stack(well, { width: "HUG", gap: 4, align: "MAX", name: "Hero change" });
+      change(k, side, `${DEAL.off}%`, { style: "Change 26", size: 18, name: "Hero fall", glow: 8 });
+      k.text(side, `LIST $${DEAL.teamWas}`, { style: "Label 13", color: "cardMuted", autoWidth: true, name: "Hero list" });
+    });
+    const c = chart(k, board(k, hb, CHART.w, CHART.h, 1, "Chart board"), { ...CHART, u: 0.7, was: `$${DEAL.teamWas}`, now: `$${DEAL.teamNow}`, style: "Axis 12", absolute: { x: 0, y: 0 } });
+    row(k, hb, "YOU KEEP, THIS YEAR", `$${DEAL.teamWas - DEAL.teamNow}`, { style: "Row 15", color: "onCard", figureColor: "led", name: "Keep row" });
+    const band = board2(k, sheet, { pad: { top: 44, right: 44, bottom: 48, left: 44 }, gap: 28, radius: 24, name: "Big board" });
+    boardHead(k, band, { label: "{{brand.symbol}} \xB7 THE BIG BOARD", note: "USD \xB7 BEFORE SALES TAX", style: "Label 13", lamp: 10, name: "Big board head" });
+    const title = k.stack(band, { gap: 8, name: "Plans head" });
+    k.text(title, "Three listings, all of them down", { style: "Section 40", color: "onCard", name: "Plans title" });
+    k.text(title, "Pick one and hand in the ticket. The price on the board is the price at checkout, and list comes back at the closing bell.", { style: "Section lead 17", color: "cardMuted", name: "Plans lead" });
+    const plans = k.stack(band, { direction: "HORIZONTAL", gap: 20, name: "Plans" });
+    for (const p of PLANS) {
+      const panel = k.stack(plans, { fill: "well", radius: 14, padding: 24, gap: 12, stroke: { color: "bezel", width: 2, align: "INSIDE" }, name: "Plan" });
+      const top = k.stack(panel, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan top" });
+      k.text(top, `{{brand.symbol}}.${p.symbol}`, { style: "Label 13", color: "amber", autoWidth: true, name: "Plan symbol" });
+      change(k, top, p.fall, { style: "Change 18", size: 13, name: `${p.id} fall`, glow: 6 });
+      k.text(panel, p.name, { style: "Plan 24", color: "onCard", name: "Plan name" });
+      k.text(panel, p.pitch, { style: "Note 15", color: "cardMuted", name: "Pitch" });
+      ledWell(k, panel, { height: 96, span: 700, step: 4, weight: 1, pad: 14, name: "Plan well" }, (well) => {
+        k.text(well, `$${p.now}`, { style: "Figure 64", color: "led", autoWidth: true, name: `${p.id} figure` });
+      });
+      row(k, panel, p.wasLabel, `$${p.was}`, { style: "Row 15", color: "cardMuted", name: `${p.id} was row` });
+      dashRule(k, panel, "bezel");
+      for (const inc of p.includes) row(k, panel, inc, "INCL.", { style: "Row 15", color: "onCard", figureColor: "cardMuted", name: "Included row" });
+      if (p.id === "Life") row(k, panel, `SEATS LEFT OF ${DEAL.seats}`, String(DEAL.seatsLeft), { style: "Row 15", color: "onCard", figureColor: "amber", name: "Seats row" });
+      k.instance(panel, "Order", { Label: p.cta }, { name: "Plan order" });
+    }
+    const faq = k.stack(sheet, { gap: 24, name: "FAQ" });
+    k.text(faq, "Questions from the floor", { style: "Section 40", color: "text", name: "FAQ title" });
+    const qs = k.stack(faq, { direction: "HORIZONTAL", gap: 32, name: "FAQ list" });
+    for (const [q, a] of FAQ) {
+      const item = k.stack(qs, { gap: 10, name: "Question" });
+      k.rect(item, "FILL", 3, "text", { name: "Column rule" });
+      k.text(item, q, { style: "Question 20", color: "text", name: "Q" });
+      k.text(item, a, { style: "Body 15", color: "onPaper", name: "A" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, padding: { top: 8, right: 0, bottom: 0, left: 0 }, name: "Footer" });
+    k.text(foot, "Prices in US dollars, before sales tax. Annual plans renew at the list price unless you cancel; lifetime seats never renew. Not investment advice: it is a status page.", { style: "Footer 14", color: "onPaper", name: "Legal" });
+    k.text(foot, "hello@{{brand.site}}", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Email" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    playChart(k, c, { at: 500, drop: 1500, fall: 500, settle: 1200 });
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Plans", "FAQ list", "Footer"],
+      restyle: { "Display 84": { laptop: "Display 64", tablet: "Display 52", mobile: "Display 40" }, "Lead 20": { mobile: "Lead 17" }, "Clock 44": { mobile: "Clock 30" }, "Figure 96": { mobile: "Figure 72" } },
+      hide: { mobile: ["Nav links", "Session"] },
+      gap: { mobile: 36 },
+      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, "Hero board")) kit.patch(n, { width: 500 });
+          reboard(kit, id, "Chart board", 0.895);
+          for (const n of kit.named(id, "Big board")) kit.patch(n, { padding: { top: 36, right: 28, bottom: 36, left: 28 } });
+          for (const n of kit.named(id, "Plans")) kit.patch(n, { itemSpacing: 16 });
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 20, right: 20, bottom: 20, left: 20 } });
+        }
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 36, padding: { top: 0, right: 0, bottom: 8, left: 0 } });
+          for (const n of kit.named(id, "Clock")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        }
+        if (size === "tablet") reboard(kit, id, "Chart board", 1.24);
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Hero board")) kit.patch(n, { padding: { top: 16, right: 16, bottom: 16, left: 16 } });
+          for (const n of kit.named(id, "Hero well")) kit.patch(n, { height: 100, padding: { top: 0, right: 10, bottom: 0, left: 10 } });
+          reboard(kit, id, "Chart board", 0.61);
+          for (const n of kit.named(id, "Tile well")) kit.patch(n, { height: 48 });
+          for (const n of kit.named(id, "Big board")) kit.patch(n, { padding: { top: 24, right: 14, bottom: 24, left: 14 }, itemSpacing: 22 });
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 18, right: 16, bottom: 18, left: 16 } });
+          for (const n of kit.named(id, "Board note")) kit.patch(n, { visible: false });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_ticker_landing_default
+};

package/dist/chunks/chunk-GIVDB53J.js

@@ -0,0 +1,33 @@
+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 {
+  space_opera_landing_default
+} from "./chunk-IPUXZ4MD.js";
+import {
+  space_opera_link_preview_default
+} from "./chunk-MQ5CLP6Y.js";
+import {
+  space_opera_mission_patch_post_default
+} from "./chunk-M6LUAHCH.js";
+import {
+  space_opera_countdown_reel_default
+} from "./chunk-V7XHUGX5.js";
+import {
+  space_opera_header_default
+} from "./chunk-AX24VLAZ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/space-opera.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [space_opera_countdown_reel_default, space_opera_landing_default, space_opera_mission_patch_post_default, space_opera_header_default, space_opera_link_preview_default];
+var space_opera_default = pack;
+
+export {
+  space_opera_default
+};

package/dist/chunks/chunk-GJ7UE2VM.js

@@ -0,0 +1,195 @@
+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,
+  folio,
+  folioPlan,
+  gild,
+  growVine,
+  manicule,
+  manuscriptBrand,
+  seal,
+  shadow,
+  vine
+} from "./chunk-TGSO26VR.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/manuscript-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ENTRIES = [
+  ["1 Oct", "Chapter VII: sources in the margin", "Every sentence Quire writes now cites the thread, pull request or call it came from, beside the line."],
+  ["17 Sep", "A faster scribe", "A page is written in under nine seconds, down from forty. Long calls no longer wait in a queue."],
+  ["2 Sep", "Stale pages confess", "When a source changes, the page marks itself out of date and offers a rewrite for you to sign."],
+  ["19 Aug", "The Slack hand", "Ask in any channel. Quire answers with the page, its folio and the line you were looking for."]
+];
+var GLOSSES = ["#deploys \xB7 14 Mar", "PR 2118 \xB7 merged", "Tue stand-up call"];
+var FOLIO = { w: 560, h: 700, initialSize: 132, title: 62, margin: 168 };
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 150, params: { duration: 800 } },
+  { layer: "Headline", preset: "blur-in", at: 250, params: { duration: 1e3, amount: 22 } },
+  { layer: "Folio", preset: "fade-in", at: 200, params: { duration: 900 } },
+  { layer: "Lead", preset: "rise-in", at: 800, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1150, params: { duration: 700 }, stagger: { delay: 140 } },
+  // The leaf is illuminated: gold laid, the letter set, the page written, its sources pointed out, the seal pressed.
+  { layer: "Gold leaf", preset: "wipe-in", at: 700, params: { duration: 700 } },
+  { layer: "Field", preset: "fade-in", at: 1e3, params: { duration: 400 } },
+  { layer: "Initial letter", preset: "pop-in", at: 1200, params: { duration: 450 } },
+  { layer: "Boss", preset: "pop-in", at: 1400, params: { duration: 300 }, stagger: { delay: 80 } },
+  { layer: "Folio title", preset: "fade-in", at: 1300, params: { duration: 600 } },
+  { layer: "Script line", preset: "wipe-in", at: 1600, params: { duration: 380, ease: ease.linear }, stagger: { delay: 190 } },
+  { layer: "Versal", preset: "pop-in", at: 2500, params: { duration: 300 } },
+  { layer: "Proof", preset: "fade-in", at: 1800, params: { duration: 800 } },
+  { layer: "Manicule", preset: "slide-in", at: 2600, params: { duration: 400, direction: "right", distance: 40 }, stagger: { delay: 300 } },
+  { layer: "Gloss", preset: "fade-in", at: 2700, params: { duration: 400 }, stagger: { delay: 300 } },
+  { layer: "Seal", preset: "pop-in", at: 4100, params: { duration: 420, amount: 0.3 } }
+];
+var manuscript_landing_default = defineTemplate({
+  id: "web-manuscript-landing",
+  meta: {
+    name: "Manuscript landing page",
+    description: "A landing page set as an illuminated manuscript for a docs, wiki or writing product: a hero where a vellum leaf is gilded, grows an ivy border and writes itself in ink beside a heavy serif headline, a changelog kept as a chronicle of ruled entries, and a free-plan leaf with a wax seal \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["manuscript", "illuminated", "medieval", "vellum", "drop cap", "gold leaf", "wax seal", "landing page", "hero", "website", "wiki", "docs", "changelog", "saas", "animation", "serif", "responsive", "light"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Manuscript landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    manuscriptBrand(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("Rubric 20", { ...SERIF, size: 20, fontWeight: 700, letterSpacing: 2.5, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Display 68", { ...SERIF, size: 68, fontWeight: 900, letterSpacing: -2.2, lineHeight: 72 });
+    k.textStyle("Display 60", { ...SERIF, size: 60, fontWeight: 900, letterSpacing: -1.9, lineHeight: 64 });
+    k.textStyle("Display 38", { ...SERIF, size: 38, fontWeight: 900, letterSpacing: -1.2, lineHeight: 42 });
+    k.textStyle("Lead 20", { ...SERIF, size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { ...SERIF, size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Initial 92", { ...SERIF, size: 92, fontWeight: 900, lineHeight: 92, textAlign: "CENTER" });
+    k.textStyle("Seal 44", { ...SERIF, size: 44, fontWeight: 900, lineHeight: 44, textAlign: "CENTER" });
+    k.textStyle("Folio title 23", { ...SERIF, size: 23, fontWeight: 900, letterSpacing: -0.4, lineHeight: 27 });
+    k.textStyle("Gloss 12", { ...MONO, size: 12, fontWeight: 500, lineHeight: 16 });
+    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("Date 20", { ...SERIF, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Entry 26", { ...SERIF, size: 26, fontWeight: 700, fontStyle: "italic", lineHeight: 32 });
+    k.textStyle("Body 18", { ...SERIF, size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 4 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 32 });
+    k.patch(sheet, { effects: GRAIN });
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    nav(k, sheet, { links: ["How it writes", "Sources", "Pricing", "Chronicle"], cta: "Open the book", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 26, name: "Copy" });
+    k.text(copy, "Incipit \xB7 the team wiki, est. MMXXVI", { style: "Rubric 20", color: "accent", name: "Eyebrow" });
+    k.text(copy, "The last wiki you\nwill ever copy out\nby hand.", { style: "Display 68", color: "text", name: "Headline" });
+    k.text(copy, "Quire reads the threads, pull requests and calls your team already has, and writes the page: dated, signed, with its sources in the margin. When a source changes, the page says so.", { 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: "Open the book" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read a sample page" }, { name: "CTA quiet" });
+    k.text(copy, "41,208 pages written \xB7 0 copied out by hand", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const visual = k.stack(hero, { width: FOLIO.w, height: FOLIO.h, name: "Visual" });
+    const leaf = folio(k, visual, FOLIO.w, FOLIO.h, { letter: "H", initialStyle: "Initial 92", sealStyle: "Seal 44", initialSize: FOLIO.initialSize, title: FOLIO.title, margin: FOLIO.margin, seed: 41 });
+    const g = folioPlan(FOLIO.w, FOLIO.h, FOLIO);
+    k.text(leaf.id, "ow we ship on Fridays", { style: "Folio title 23", color: "onCard", width: g.left + g.textW - g.besideX, absolute: { x: g.besideX, y: g.top + 2 }, name: "Folio title" });
+    GLOSSES.forEach((source, i) => {
+      const y = g.belowY + i * 2 * g.pitch;
+      manicule(k, leaf.id, 34, { absolute: { x: g.glossX, y: y - 12 } });
+      k.text(leaf.id, source, { style: "Gloss 12", color: "onCard", width: FOLIO.margin - 40, absolute: { x: g.glossX, y: y + 8 }, name: "Gloss" });
+    });
+    const divide = k.stack(sheet, { height: 96, clip: true, name: "Ivy strip" });
+    const strip = vine(k, divide, { x: 0, y: 48, length: 1200, dir: "right", amp: 12, waves: 9.5, u: 0.6 });
+    const chronicle = k.stack(sheet, { gap: 0, name: "Chronicle" });
+    k.text(chronicle, "The chronicle", { style: "Section 44", color: "text", name: "Chronicle title" });
+    k.stack(chronicle, { height: 12, name: "Gap" });
+    k.text(chronicle, "What was added to the book, and when. Kept by hand, the one thing here that is.", { style: "Lead 20", color: "onPaper", name: "Chronicle lead" });
+    k.stack(chronicle, { height: 32, name: "Gap" });
+    for (const [date, name, what] of ENTRIES) {
+      k.rect(chronicle, "FILL", 2, "rule", { name: "Rule" });
+      const row = k.stack(chronicle, { direction: "HORIZONTAL", gap: 32, padding: { top: 24, right: 0, bottom: 24, left: 0 }, name: "Entry" });
+      k.text(row, date, { style: "Date 20", color: "accent", width: 110, name: "Entry date" });
+      k.text(row, name, { style: "Entry 26", color: "text", width: 330, name: "Entry name" });
+      k.text(row, what, { style: "Body 18", color: "onPaper", name: "Entry account" });
+    }
+    k.rect(chronicle, "FILL", 2, "rule", { name: "Rule" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 36, align: "CENTER", fill: "card", radius: 4, stroke: { color: "rule", width: 1.5 }, padding: { top: 44, right: 48, bottom: 44, left: 48 }, effects: shadow(k, 40, 16, 0.4), name: "Band" });
+    seal(k, band, 104, "Q", "Seal 44", { name: "Band seal", ribbons: false });
+    const pitch = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(pitch, "Three scribes free, for as long as you write.", { style: "Section 32", color: "onCard", name: "Band title" });
+    k.text(pitch, "No card. Slack and GitHub connected in two minutes, and your first hundred pages on us.", { style: "Body 18", color: "onCard", name: "Band text" });
+    k.instance(band, "Button", { Label: "Open the book" }, { name: "Band button" });
+    k.text(sheet, "Explicit. \xA9 MMXXVI Quire Labs \xB7 Security \xB7 Status \xB7 The colophon", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    growVine(k, leaf.vine, 600, 2600);
+    growVine(k, strip, 400, 3200);
+    gild(k, sheet, 1700);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Band", "Entry"],
+      restyle: {
+        "Display 68": { laptop: "Display 60", tablet: "Display 60", mobile: "Display 38" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" }
+      },
+      hide: { tablet: ["Nav links"] },
+      gap: { tablet: 56, mobile: 48 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48, counterAxisAlignItems: size === "tablet" ? "CENTER" : "MIN" });
+          for (const n of kit.named(id, "Entry")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24, counterAxisAlignItems: "MIN", padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Band seal")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 104 });
+        }
+        const s = size === "mobile" ? 335 / FOLIO.w : 1;
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: Math.round(FOLIO.w * s), height: Math.round(FOLIO.h * s) });
+        for (const n of kit.named(id, "Folio")) kit.patch(n, { x: 0, y: 0, scaleX: s, scaleY: s, anchorX: 0, anchorY: 0 });
+        for (const n of kit.named(id, "Stem")) {
+          const p = kit.node(n).parentId;
+          if (p && kit.node(p).name === "Ivy strip") kit.patch(p, { layoutSizingHorizontal: "FILL" });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  manuscript_landing_default
+};

package/dist/chunks/chunk-GK5G53LH.js

@@ -0,0 +1,97 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  KITTY,
+  billCard,
+  evenBadge,
+  fitSoftGround,
+  lockup,
+  mochi,
+  pastelBrand,
+  pastelButton,
+  softGround,
+  ts
+} from "./chunk-UJS5YPK4.js";
+import {
+  put,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-pastel-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Pastel SaaS link preview";
+var GROUND = { seed: 37, sparkles: 5, scale: 0.4, still: true };
+var style_pastel_link_preview_default = defineTemplate({
+  id: "social-saas-style-pastel-link-preview",
+  meta: {
+    name: NAME,
+    description: "A link preview in the pastel soft UI look: the promise in chunky ink type on a milk ground with chalky pastel blobs, one line on what the app is, and two pillowy product cards beside it (a bill split down the middle over a savings jar) with a round cat mascot peeking over. 1200 \xD7 630, with a 1280 \xD7 640 GitHub social preview and a 1600 \xD7 900 X post",
+    category: "social",
+    tags: ["link preview", "open graph", "og image", "github", "saas", "pastel", "soft ui", "playful", "mascot", "fintech", "consumer app", "couples", "product", "launch"],
+    platforms: ["web", "x", "linkedin", "facebook", "github"],
+    formats: ["og-image", "post"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("og-image"));
+    k.quantizeGeometry = true;
+    pastelBrand(k, { tagline: KITTY.tagline });
+    pastelButton(k, "Tag", { style: ts(k, "title", 22), label: "Start your kitty", pad: [12, 22], d: 0.7 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 50, right: 50, bottom: 50, left: 68 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    softGround(k, sheet, 1200, 630, GROUND);
+    for (const n of k.named(sheet, "Blob 1")) k.patch(n, { x: -260, y: -300 });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", name: "Row" });
+    const copy = k.stack(row, { gap: 22, name: "Copy" });
+    lockup(k, copy, { size: 30, style: ts(k, "title", 30), name: "Lockup" });
+    k.text(copy, "{{brand.tagline}}", { style: ts(k, "display", 92), color: "text", name: "Headline" });
+    k.text(copy, "One shared kitty for rent, groceries and the trip you keep talking about.", { style: ts(k, "body", 26), color: "onPaper", name: "Sub" });
+    const foot = k.stack(copy, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Tag", { Label: "Start your kitty" }, { name: "Call" });
+    k.text(foot, "{{brand.site}}", { style: ts(k, "soft", 22), color: "onPaper", autoWidth: true, name: "Site" });
+    const art = k.stack(row, { width: 500, gap: 16, align: "MAX", padding: { top: 96, right: 0, bottom: 0, left: 0 }, name: "Art" });
+    billCard(k, art, 1.1, { width: "FILL" });
+    evenBadge(k, art, 1.1);
+    mochi(k, art, 110, { absolute: { x: 40, y: 0 } });
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        fitSoftGround(kit, id, GROUND);
+        for (const n of kit.named(id, "Blob 1")) kit.patch(n, { x: -260, y: -300 });
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 80, right: 80, bottom: 80, left: 96 } });
+        fitSoftGround(kit, id, GROUND);
+        for (const n of kit.named(id, "Blob 1")) kit.patch(n, { x: -300, y: -340 });
+        for (const n of kit.named(id, "Row")) kit.patch(n, { itemSpacing: 64 });
+        for (const n of kit.named(id, "Art")) kit.patch(n, { width: 700, itemSpacing: 22, padding: { top: 130, right: 0, bottom: 0, left: 0 } });
+        put(kit, id, "Mochi", 70, 0);
+        for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 1.3, scaleY: 1.3 });
+        restyle(kit, id, "Headline", ts(kit, "display", 120));
+        restyle(kit, id, "Sub", ts(kit, "body", 32));
+      } }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  style_pastel_link_preview_default
+};