@popcraft/kit 0.53.14 → 0.53.16

package/dist/chunks/chunk-WRFEEK32.js

@@ -0,0 +1,251 @@
+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 {
+  SITE_CONTENT,
+  SITE_LOOP,
+  SITE_RESTYLE,
+  artBox,
+  disc,
+  fitArt,
+  gridAt,
+  linkOut,
+  linkTo,
+  ruledRows,
+  section,
+  sectionHead,
+  shape,
+  siteType,
+  sway
+} from "./chunk-B65TLYA3.js";
+import {
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  compactNav
+} from "./chunk-TRJWKRQH.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-KLAIZ7BD.js";
+import {
+  box,
+  curve3,
+  poly,
+  pt3,
+  rng
+} from "./chunk-U2KTX33N.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/web/everyday-hotel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Hotel and B&B website: coastal inn";
+var AW = 560;
+var AH = 600;
+var BOOK = "https://book.saltmarshhouse.example/rooms";
+var MAP = "https://maps.example.com/?q=Saltmarsh+House+Ocean+Avenue+Kennebunkport";
+var ROOMS = [
+  ["The Lookout", "King bed \xB7 sleeps 2 \xB7 sea view from the bed", "From $340 a night"],
+  ["The Boathouse", "Queen bed \xB7 sleeps 2 \xB7 its own porch on the dune", "From $295 a night"],
+  ["Two Lights", "King and a daybed \xB7 sleeps 3 \xB7 corner windows", "From $315 a night"],
+  ["The Loft", "Two queens \xB7 sleeps 4 \xB7 under the eaves, for families", "From $380 a night"]
+];
+var INCLUDED = [
+  ["Breakfast", "Cooked to order, 7:30 to 10", "Blueberry pancakes, eggs from the farm up the road, and coffee in the sunroom or on the porch."],
+  ["The beach", "Two minutes down the boardwalk", "Towels, chairs and an umbrella in the hall: take them, bring them back sandy."],
+  ["Bicycles", "Six, with baskets", "Free to borrow for the day. The village is a flat fifteen minutes along the shore road."],
+  ["Arrival", "Check in 3 pm, out 11 am", "We will keep your bags if you arrive early or leave late. Ask for a later check-out."],
+  ["Parking", "Free, behind the house", "One car a room. A charger for electric cars by the barn, for a small fee."],
+  ["Quiet", "No weddings, no events", "Eight rooms and a library. Children are welcome in the Loft and Two Lights."]
+];
+var ROUTES = [
+  ["By car", "From Portland, 35 minutes", "Route 1 south, then Ocean Avenue. Look for the blue gate after the lighthouse turn."],
+  ["By train", "The Downeaster to Wells", "Twenty minutes from the station; we can book you a taxi or collect you on request."],
+  ["By air", "Portland Jetport (PWM)", "Forty minutes by car. Boston Logan is an hour and forty."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Art", preset: "fade-in", at: 100, params: { duration: 900 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 250, params: { duration: 600 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 18 } },
+  { layer: "Lead", preset: "rise-in", at: 850, params: { duration: 700 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1150, params: { duration: 600 }, stagger: { delay: 140 } }
+];
+function sea(y, amp, n) {
+  const pts = Array.from({ length: n * 2 + 1 }, (_, i) => ({ x: -80 + (AW + 160) * i / (n * 2), y: y + (i % 2 ? -amp : amp) }));
+  return { closed: true, points: [...curve3(pts, 0.25).points, pt3(AW + 80, AH), pt3(-80, AH)] };
+}
+function gull(x, y, s) {
+  return [curve3([{ x: x - s, y }, { x: x - s / 2, y: y - s * 0.45 }, { x, y }], 0.3), curve3([{ x, y }, { x: x + s / 2, y: y - s * 0.45 }, { x: x + s, y }], 0.3)];
+}
+function coast(k, art) {
+  shape(k, art, [disc(110, 140, 46)], "sun", { name: "Sun" });
+  const far = shape(k, art, [sea(300, 3, 7)], "seaFar", { name: "Sea far" });
+  const near = shape(k, art, [sea(330, 5, 6)], "sea", { name: "Sea" });
+  sway(k, far, "translateX", 10, SITE_LOOP, 1);
+  sway(k, near, "translateX", 16, SITE_LOOP, 1, 0.5);
+  shape(k, art, [poly([[512, 300], [532, 300], [528, 236], [516, 236]])], "house", { name: "Lighthouse" });
+  shape(k, art, [box(514, 228, 16, 10)], "roof", { name: "Lighthouse lamp" });
+  shape(k, art, [{ closed: true, points: [pt3(-20, 420), { ...pt3(200, 360), handleIn: pt3(100, 380), handleOut: pt3(300, 344) }, { ...pt3(580, 400), handleIn: pt3(460, 360) }, pt3(580, 620), pt3(-20, 620)] }], "sand", { name: "Dune" });
+  shape(k, art, [box(150, 250, 210, 140), poly([[140, 252], [255, 170], [370, 252]])], "house", { name: "House" });
+  shape(k, art, [poly([[132, 256], [255, 162], [378, 256], [366, 262], [255, 178], [144, 262]])], "roof", { name: "Roof" });
+  shape(k, art, [box(360, 290, 110, 100), poly([[352, 292], [478, 292], [470, 270], [360, 270]])], "house", { name: "Wing" });
+  shape(k, art, [poly([[352, 292], [478, 292], [470, 268], [360, 268]])], "roof", { name: "Wing roof" });
+  shape(k, art, [box(305, 150, 20, 50)], "roof", { name: "Chimney" });
+  const boards = [];
+  for (let y = 262; y < 390; y += 10) boards.push(box(150, y, 210, 1.2), box(360, Math.max(y, 296), 110, 1.2));
+  shape(k, art, boards, "clap", { name: "Clapboard" });
+  const dark = [], lit = [];
+  [[176, 280], [236, 280], [296, 280], [176, 330], [296, 330], [384, 316], [430, 316], [244, 206]].forEach(([x, y], i) => (i === 1 || i === 5 ? lit : dark).push(box(x, y, 30, 36)));
+  shape(k, art, dark, "window", { name: "Windows" });
+  const glow = shape(k, art, lit, "lamp", { name: "Lit windows" });
+  sway(k, glow, "opacity", 0.08, SITE_LOOP, 1);
+  shape(k, art, [box(242, 330, 28, 60)], "door", { name: "Door" });
+  shape(k, art, [box(140, 386, 240, 10), box(140, 352, 6, 34), box(374, 352, 6, 34), box(140, 352, 240, 5)], "clap", { name: "Porch" });
+  const planks = [];
+  for (let i = 0; i < 9; i++) planks.push(poly([[250 + i * 4, 400 + i * 22], [290 + i * 10, 400 + i * 22], [292 + i * 10, 410 + i * 22], [250 + i * 4, 410 + i * 22]]));
+  shape(k, art, planks, "wood", { name: "Boardwalk" });
+  const r = rng(13);
+  for (const [x0, x1, y, h, ph] of [[0, 220, 470, 70, 0], [360, 560, 450, 60, 0.3], [20, 560, 580, 90, 0.6]]) {
+    const blades = [];
+    for (let x = x0; x < x1; x += 7 + r() * 6) {
+      const hh = h * (0.6 + r() * 0.5), lean = (r() - 0.3) * 18;
+      blades.push(curve3([{ x, y }, { x: x + lean * 0.4, y: y - hh * 0.5 }, { x: x + lean, y: y - hh }], 0.3));
+    }
+    const id = shape(k, art, blades, "grass", { name: "Beach grass", strokeWidth: 2.4 });
+    sway(k, id, "translateX", 2.5, SITE_LOOP, 2, ph);
+  }
+  ;
+  [[300, 90, 16, 0], [380, 120, 11, 0.4]].forEach(([x, y, s, ph]) => {
+    const id = shape(k, art, gull(x, y, s), "gull", { name: "Gull", strokeWidth: 2.5 });
+    sway(k, id, "translateX", 22, SITE_LOOP, 1, ph);
+    sway(k, id, "translateY", 6, SITE_LOOP, 2, ph);
+  });
+}
+var everyday_hotel_default = defineTemplate({
+  id: "web-everyday-hotel",
+  meta: {
+    name: NAME,
+    description: "A website for a small hotel or bed and breakfast. The hero is the house on its dune in the morning, with the sea rolling in behind, beach grass that sways and gulls drifting over. Then the rooms with a photo frame each, the bed, who it sleeps and the price from, a gallery of photo frames, what is included, where it is and how to get there with directions, and a footer. Every Book button links out to your own booking page. Desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["hotel", "b&b", "bed and breakfast", "inn", "guest house", "rooms", "gallery", "amenities", "location", "travel", "hospitality", "coast", "illustration", "book now", "animation", "responsive", "website", "small business"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["brand-intro"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F6F4EF", text: "#16263A", onPaper: "#4F5B69", primary: "#1D3B5C", onPrimary: "#F6F4EF", card: "#E4ECEF", onCard: "#16263A", cardMuted: "#4A5866", panel: "#16263A", onPanel: "#F6F4EF", panelMuted: "#BCC7D2", line: "#D7DADB" },
+      { name: "Saltmarsh House" }
+    );
+    k.palette({ sun: "#F4D58D", seaFar: "#8FB3C4", sea: "#4F7F99", sand: "#E8D9B8", house: "#FBFAF6", clap: "#D9DCD8", roof: "#56606A", window: "#3B4D5E", lamp: "#F6CF7A", door: "#1D3B5C", wood: "#A88A66", grass: "#8E9A5B", gull: "#3B4D5E" });
+    siteType(k, { ...SERIF, fontWeight: 600 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 4 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: SITE_LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Rooms", "Gallery", "Included", "Getting here"], cta: "Book a room", 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, "A BED AND BREAKFAST ON THE MAINE COAST", { style: "Kicker 13", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "Eight rooms on the dune, two minutes from the sea.", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(copy, "An 1890s sea captain\u2019s house at the end of Ocean Avenue in Kennebunkport, with breakfast cooked to order, bicycles to borrow and the beach at the bottom of the boardwalk.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    linkOut(k, k.instance(ctas, "Button", { Label: "Check dates and book" }, { name: "CTA primary" }), BOOK);
+    const seeRooms = k.instance(ctas, "Button quiet", { Label: "See the rooms" }, { name: "CTA quiet" });
+    k.text(copy, "Open April to December \xB7 Two-night minimum on weekends", { style: "Label 14", color: "onPaper", name: "Season" });
+    coast(k, artBox(k, hero, AW, AH, { radius: 4 }));
+    const rooms = section(k, sheet, "Rooms");
+    sectionHead(k, rooms, { kicker: "THE ROOMS", title: "Eight rooms, four of them on the sea", aside: "Every room has its own bathroom, a good bed, wool blankets, and no television. Prices include breakfast for two." });
+    const grid = k.stack(rooms, { direction: "HORIZONTAL", wrap: true, gap: 32, name: "Room grid" });
+    for (const [name, beds, price] of ROOMS) {
+      const card = k.stack(grid, { gap: 14, name: "Room" });
+      k.photo(card, 584, 380, { radius: 4, ground: "card", name: "Room photo" });
+      const line = k.stack(card, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", align: "CENTER", name: "Room line" });
+      const words = k.stack(line, { gap: 4, name: "Room words" });
+      k.text(words, name, { style: "Title 24", color: "text", name: "Room name" });
+      k.text(words, beds, { style: "Body 16", color: "onPaper", name: "Room beds" });
+      k.text(words, price, { style: "Label 14", color: "text", name: "Room price" });
+      linkOut(k, k.instance(line, "Button quiet", { Label: "Book" }, { name: "Room book" }), BOOK);
+    }
+    const gallery = section(k, sheet, "Gallery");
+    sectionHead(k, gallery, { kicker: "THE HOUSE", title: "Around the house and down the beach" });
+    const pics = k.stack(gallery, { direction: "HORIZONTAL", wrap: true, gap: 16, name: "Gallery grid" });
+    for (let i = 0; i < 6; i++) k.photo(pics, 389, 290, { radius: 4, ground: "card", name: "Gallery photo" });
+    const inc = section(k, sheet, "Included");
+    sectionHead(k, inc, { kicker: "WHAT IS INCLUDED", title: "Breakfast, bicycles and the beach" });
+    ruledRows(k, inc, INCLUDED, { name: "Included rows", labelWidth: 160 });
+    const here = section(k, sheet, "Getting here", { direction: "HORIZONTAL", gap: 64, fill: "panel", radius: 4, padding: 56 });
+    const where = k.stack(here, { gap: 20, name: "Where" });
+    sectionHead(k, where, { kicker: "GETTING HERE", title: "At the end of Ocean\xA0Avenue", ink: "onPanel", muted: "panelMuted" });
+    k.text(where, "Saltmarsh House, 212 Ocean Avenue, Kennebunkport, Maine 04046. Ten minutes on foot from Dock Square along the river.", { style: "Body 17", color: "panelMuted", name: "Address" });
+    const btns = k.stack(where, { direction: "HORIZONTAL", gap: 20, wrap: true, align: "CENTER", name: "Where buttons" });
+    linkOut(k, k.instance(btns, "Button", { Label: "Get directions" }, { name: "Directions" }), MAP);
+    const phone = k.text(btns, "(207) 555-0178", { style: "Button 16", color: "onPanel", autoWidth: true, name: "Phone" });
+    k.patch(phone, { semantics: { link: { kind: "tel", value: "+12075550178" } } });
+    ruledRows(k, here, ROUTES, { name: "Routes", labelWidth: 90, ink: "onPanel", muted: "panelMuted", rule: "panelMuted" });
+    const foot = k.stack(sheet, { gap: 8, padding: { top: 32, right: 0, bottom: 16, left: 0 }, name: "Footer" });
+    k.rect(foot, "FILL", 1, "line", { name: "Rule" });
+    k.text(foot, "{{brand.name}} \xB7 212 Ocean Avenue, Kennebunkport, Maine \xB7 Open April to December", { style: "Small 14", color: "onPaper", name: "Footer line" });
+    k.text(foot, "Bookings are made on our booking partner\u2019s site; its terms and cancellation policy apply.", { style: "Small 14", color: "onPaper", name: "Footer note" });
+    for (const b of k.named(sheet, "Nav button")) linkOut(k, b, BOOK);
+    const targets = { Rooms: rooms, Gallery: gallery, Included: inc, "Getting here": here };
+    for (const l of k.named(sheet, "Nav link")) linkTo(k, l, targets[k.node(l).characters]);
+    linkTo(k, seeRooms, rooms);
+    gridAt(k, sheet, { name: "Room grid", item: "Room", cols: 2, gap: 32, inside: SITE_CONTENT.desktop, photo: "Room photo", ratio: 0.62 });
+    gridAt(k, sheet, { name: "Gallery grid", item: "Gallery photo", cols: 3, gap: 16, inside: SITE_CONTENT.desktop, photo: "Gallery photo", ratio: 0.75 });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Getting here"],
+      stackMobile: ["Row", "Room line"],
+      restyle: { ...SITE_RESTYLE },
+      gap: { tablet: 80, mobile: 64 },
+      tweak: (kit, id, size) => {
+        const inside = SITE_CONTENT[size];
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") each("Hero", { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 40 });
+          each("Getting here", { itemSpacing: 32 });
+          each("Getting here", { padding: size === "mobile" ? { top: 32, right: 20, bottom: 32, left: 20 } : { top: 44, right: 40, bottom: 44, left: 40 } });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Included", "Getting here"]);
+        if (size === "mobile") {
+          each("Row", { itemSpacing: 6 });
+          each("Room line", { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+        }
+        fitArt(kit, id, AW, AH, inside);
+        gridAt(kit, id, { name: "Room grid", item: "Room", cols: size === "mobile" ? 1 : 2, gap: size === "mobile" ? 40 : 24, inside, photo: "Room photo", ratio: 0.62 });
+        gridAt(kit, id, { name: "Gallery grid", item: "Gallery photo", cols: size === "mobile" ? 2 : 3, gap: size === "mobile" ? 10 : 16, inside, photo: "Gallery photo", ratio: 0.75 });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  everyday_hotel_default
+};

package/dist/chunks/chunk-WT42YWX3.js

@@ -0,0 +1,218 @@
+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 {
+  BOARD_D,
+  BOARD_NAMES,
+  BOARD_W,
+  FAILED,
+  LIVE,
+  framing,
+  lights,
+  machinedBrand,
+  rack,
+  seen,
+  shopLight
+} from "./chunk-7OJY3L53.js";
+import {
+  phrases,
+  sizes,
+  stage
+} from "./chunk-YOY75SOE.js";
+import {
+  key
+} from "./chunk-EJH22D33.js";
+import {
+  MONO
+} from "./chunk-MPRWXHPJ.js";
+import {
+  bed
+} from "./chunk-FFTCIDXB.js";
+import {
+  pill
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/motion/machined-trailer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var B = bed("trailer", 32);
+var { beat } = B;
+var DURATION = B.duration;
+var FPS = 30;
+var SIZES = ["video-1080p", "ig-story", "video-square"];
+var FAIL = beat(1);
+var HOP = beat(4);
+var OUT = beat(8);
+var PRIME = beat(12);
+var SETTLED = beat(15);
+var OPEN = beat(16);
+var CLOSE = beat(22);
+var TURN = beat(24);
+var CALL = beat(27);
+var HITS = [16, 20, 24, 28].map(beat);
+var REACH = 400;
+var LINES = [
+  [0, "A model provider just went down."],
+  [HOP, "Your app didn\u2019t notice. Failover took 38 ms."],
+  [OUT, "One endpoint in front of every model provider."],
+  [PRIME, "Four things inside that you won\u2019t have to build."],
+  [TURN, "Rack it in front of your app this afternoon."]
+];
+var DETAILS = ["Fastest healthy model", "Never pays twice", "Redacts secrets", "A spend limit per key"];
+var CTA = "Start free at {{brand.site}}";
+var CUES = [
+  { layer: "Call", preset: "rise-in", at: CALL, params: { duration: 500 } },
+  { layer: "Terms", preset: "fade-in", at: CALL + beat(0.5), params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 600, amount: 0.05 } }
+];
+var LAYOUTS = {
+  "video-1080p": {
+    hook: { cx: 1290, cy: 600, scale: 1.3, rx: 0, ry: -16 },
+    open: { cx: 1300, cy: 575, scale: 0.76, rx: -22, ry: -30 },
+    end: { cx: 1240, cy: 520, scale: 0.95, rx: -7, ry: -12 },
+    above: 7,
+    below: 5,
+    words: { x: 120, y: 120, width: 540, px: 60 },
+    labels: { x: 1530, width: 294, detail: true },
+    offer: { x: 120, y: 470 }
+  },
+  "ig-story": {
+    hook: { cx: 520, cy: 980, scale: 1.02, rx: 0, ry: -14 },
+    open: { cx: 540, cy: 1040, scale: 0.78, rx: -30, ry: -24 },
+    end: { cx: 610, cy: 1e3, scale: 0.9, rx: -7, ry: -12 },
+    above: 9,
+    below: 8,
+    words: { x: 64, y: 262, width: 876, px: 58 },
+    labels: { x: 740, width: 200, detail: false },
+    offer: { x: 64, y: 1310 }
+  },
+  "video-square": {
+    hook: { cx: 560, cy: 640, scale: 1, rx: 0, ry: -14 },
+    open: { cx: 500, cy: 610, scale: 0.66, rx: -24, ry: -28 },
+    end: { cx: 640, cy: 560, scale: 0.9, rx: -7, ry: -12 },
+    above: 7,
+    below: 6,
+    words: { x: 64, y: 60, width: 952, px: 50 },
+    labels: { x: 790, width: 226, detail: false },
+    offer: { x: 64, y: 920 }
+  }
+};
+function build(k, sheet, s) {
+  const L = LAYOUTS[s.preset];
+  k.nameSheet(sheet, `Machined trailer \xB7 ${preset(s.preset).name}`);
+  const light = shopLight(k, sheet, s.W, s.H, { x: L.open.cx / s.W, y: 0.3, reach: 0.75, glow: 0.2, shadow: 0.6 });
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2300 * s.u * (s.wide ? 1 : 1.2), lights: lights(s) });
+  k.timeline(sheet, { duration: DURATION, fps: FPS, audio: B.audio });
+  const R = rack(k, scene, s, { cx: L.open.cx, cy: L.open.cy, scale: L.open.scale, rotateX: L.open.rx, rotateY: L.open.ry, above: L.above, below: L.below, out: REACH, open: true, glint: 0.3 });
+  const at = (p) => framing(k, scene, R.rack, p);
+  const px = L.words.px;
+  k.textStyle(`Kicker ${Math.round(px * 0.36)}`, { ...MONO, size: Math.round(px * 0.36), fontWeight: 700, letterSpacing: 2, lineHeight: Math.round(px * 0.5), textCase: "UPPER" });
+  k.textStyle(`Caption ${px}`, { size: px, fontWeight: 800, letterSpacing: -0.035 * px, lineHeight: Math.round(px * 1.06) });
+  k.textStyle(`Button ${Math.round(px * 0.46)}`, { size: Math.round(px * 0.46), fontWeight: 700, lineHeight: Math.round(px * 0.6) });
+  k.textStyle(`Terms ${Math.round(px * 0.34)}`, { ...MONO, size: Math.round(px * 0.34), fontWeight: 500, lineHeight: Math.round(px * 0.5) });
+  if (!k.hasComponent(`Button ${px}`)) pill(k, `Button ${px}`, { fill: "primary", ink: "onPrimary", style: `Button ${Math.round(px * 0.46)}`, label: CTA, pad: [Math.round(px * 0.3), Math.round(px * 0.5)], radius: 10 });
+  const words = k.stack(sheet, { width: L.words.width, gap: Math.round(px * 0.4), absolute: { x: L.words.x, y: L.words.y }, name: "Words" });
+  const kicker = k.stack(words, { direction: "HORIZONTAL", gap: Math.round(px * 0.24), align: "CENTER", name: "Kicker" });
+  k.rect(kicker, Math.round(px * 0.5), Math.round(px * 0.12), "primary", { radius: 2, name: "Kicker mark" });
+  k.text(kicker, "{{brand.name}} BH-1 \xB7 model gateway", { style: `Kicker ${Math.round(px * 0.36)}`, color: "onBackground", name: "Kicker line" });
+  const box = k.stack(words, { height: Math.round(px * 1.06) * (s.wide ? 4 : 2), name: "Caption box" });
+  const caption = k.text(box, LINES[0][1], { style: `Caption ${px}`, color: "text", name: "Caption" });
+  phrases(k, caption, LINES, { rise: Math.round(px * 0.4) });
+  const offer = k.stack(sheet, { width: L.words.width, gap: Math.round(px * 0.26), absolute: L.offer, name: "Offer" });
+  k.instance(offer, `Button ${px}`, { Label: CTA }, { name: "Call" });
+  k.text(offer, "Free to a million requests a month. No card.", { style: `Terms ${Math.round(px * 0.34)}`, color: "onBackground", name: "Terms" });
+  k.textStyle(`Label ${Math.round(px * 0.5)}`, { size: Math.round(px * 0.5), fontWeight: 800, letterSpacing: -0.4, lineHeight: Math.round(px * 0.58) });
+  if (L.labels.detail) k.textStyle(`Label detail ${Math.round(px * 0.36)}`, { size: Math.round(px * 0.36), fontWeight: 500, lineHeight: Math.round(px * 0.48) });
+  const labels = k.frame(sheet, { x: 0, y: 0, width: s.W, height: s.H }, { name: "Board labels" });
+  R.boards.forEach((b, i) => {
+    const corner = seen(k, scene, b, BOARD_W, BOARD_D * 0.78);
+    const label = k.stack(labels, { width: L.labels.width, gap: 2, name: "Board label", absolute: { x: L.labels.x, y: 0 } });
+    k.text(label, BOARD_NAMES[i], { style: `Label ${Math.round(px * 0.5)}`, color: "text", name: "Board name" });
+    if (L.labels.detail) k.text(label, DETAILS[i], { style: `Label detail ${Math.round(px * 0.36)}`, color: "onBackground", name: "Board detail" });
+    const y = Math.round(corner.y - Math.round(px * 0.29));
+    k.patch(label, { y });
+    const from = Math.round(corner.x + 10 * s.u);
+    const lead = k.rect(labels, Math.max(12, L.labels.x - 14 - from), 3, "route", { radius: 2, name: "Leader", absolute: { x: from, y: Math.round(corner.y - 1) } });
+    k.ellipse(labels, 11, "route", { name: "Leader end", absolute: { x: from - 6, y: Math.round(corner.y - 5) } });
+    const at2 = OPEN + 500 + i * 130;
+    for (const id of [label, lead]) key(k, id, "opacity", [[0, 0, ease.hold], [at2, 0, ease.out("cubic")], [at2 + 300, 1, ease.hold], [CLOSE - 300, 1, ease.out("cubic")], [CLOSE, 0]]);
+    key(k, label, "translateX", [[at2, Math.round(30 * s.u), ease.out("cubic")], [at2 + 400, 0]]);
+  });
+  for (const id of k.named(labels, "Leader end")) key(k, id, "opacity", [[0, 0, ease.hold], [OPEN + 500, 0, ease.out("cubic")], [OPEN + 900, 1, ease.hold], [CLOSE - 300, 1, ease.out("cubic")], [CLOSE, 0]]);
+  const IO = ease.inOut("cubic");
+  const poseKeys = (pick) => [
+    [0, pick(L.hook), ease.inOut("sine")],
+    [OUT, pick(L.hook) + (pick(L.open) - pick(L.hook)) * 0.12, IO],
+    [SETTLED, pick(L.open), ease.hold],
+    [TURN - 200, pick(L.open), IO],
+    [TURN + 1300, pick(L.end), ease.inOut("sine")],
+    [DURATION, pick(L.end) + (pick(L.end) - pick(L.open)) * 0.04]
+  ];
+  key(k, R.rack, "translateX", poseKeys((p) => at(p).translateX));
+  key(k, R.rack, "translateY", poseKeys((p) => at(p).translateY));
+  key(k, R.rack, "z", poseKeys((p) => at(p).z));
+  key(k, R.rack, "rotateX", [[0, L.hook.rx, ease.hold], [OUT + 450, L.hook.rx, IO], ...poseKeys((p) => p.rx).slice(2)]);
+  key(k, R.rack, "rotateY", poseKeys((p) => p.ry));
+  key(k, R.unit, "z", [[0, 0, ease.hold], [OUT, 0, ease.out("expo")], [OUT + 900, REACH]]);
+  key(k, R.lid, "translateY", [[0, 0, ease.hold], [OPEN, 0, ease.out("quint")], [OPEN + 900, R.lidRise, ease.hold], [CLOSE, R.lidRise, IO], [CLOSE + 800, 0]]);
+  R.boards.forEach((b, i) => {
+    const d = (R.boards.length - 1 - i) * 70;
+    key(k, b, "translateY", [[0, 0, ease.hold], [OPEN + 150 + d, 0, ease.back(1.2)], [OPEN + 1e3 + d, R.rise[i], ease.hold], [CLOSE + 60 - d * 0.5, R.rise[i], IO], [CLOSE + 760 - d * 0.5, 0]]);
+    key(k, b, "opacity", [[0, 0, ease.hold], [OPEN + 100, 1, ease.hold], [CLOSE + 820, 0]]);
+  });
+  const F = R.face;
+  key(k, F.faults[FAILED], "opacity", [[0, 0, ease.hold], [FAIL, 1, ease.hold], [FAIL + 110, 0, ease.hold], [FAIL + 220, 1, ease.hold], [FAIL + 330, 0, ease.hold], [FAIL + 440, 1]]);
+  key(k, F.markers[FAILED], "opacity", [[0, 1, ease.hold], [HOP, 0]]);
+  key(k, F.markers[LIVE], "opacity", [[0, 0, ease.hold], [HOP, 1]]);
+  phrases(k, F.route, [[0, "upstream-02"], [HOP, "upstream-03"]], { fade: 90, rise: 0 });
+  phrases(k, F.latency, [[0, "41 ms"], [FAIL, "timeout"], [HOP, "38 ms"]], { fade: 90, rise: 0 });
+  phrases(k, F.status, [[0, "All upstreams healthy"], [FAIL, "Upstream-02 is down"], [HOP, "Failover in 38 ms"]], { fade: 90, rise: 0 });
+  k.animateShader(F.finish, "glint", [{ t: 0, v: -0.5, ease: ease.inOut("sine") }, { t: HOP, v: 1.5, ease: ease.hold }, { t: TURN, v: -0.5, ease: ease.inOut("sine") }, { t: TURN + 2200, v: 0.62, ease: ease.inOut("sine") }, { t: DURATION, v: 0.8 }]);
+  k.animateShader(R.lidFinish, "glint", [{ t: 0, v: 0.1, ease: ease.inOut("sine") }, { t: OPEN, v: 0.5, ease: ease.inOut("sine") }, { t: CLOSE, v: 0.2, ease: ease.inOut("sine") }, { t: TURN + 1800, v: 1.3 }]);
+  key(k, scene, "scene3d.lights[@key].x", [[0, -s.W * 0.2, ease.inOut("sine")], [TURN, -s.W * 0.2, ease.inOut("cubic")], [TURN + 2e3, s.W * 1.1]]);
+  k.animateShader(light, "glow", [{ t: 0, v: 0.12, ease: ease.inOut("sine") }, { t: OPEN - 60, v: 0.16, ease: ease.hold }, ...HITS.flatMap((t, i) => [{ t, v: 0.36, ease: ease.out("cubic") }, { t: (HITS[i + 1] ?? DURATION) - 60, v: 0.2, ease: ease.hold }]), { t: DURATION, v: 0.2 }]);
+  k.cues(sheet, CUES);
+}
+var machined_trailer_default = defineTemplate({
+  id: "motion-machined-trailer",
+  meta: {
+    name: "Machined hardware launch trailer",
+    description: "A 19-second launch trailer in real 3D for developer infrastructure: the product as a brushed-aluminium rack unit. An upstream port goes red and the route hops to the next one in 38 ms, the unit slides out of its cabinet, and on the music\u2019s big hit the lid lifts and four boards rise out of the chassis, each named; then it turns to the camera as a band of light crosses the metal and the offer lands. Lit by a moving key light, finished by a brushed-metal shader, cut to a trailer score (made by PopCraft, CC0), with burned-in captions. 16:9 with 9:16 and square cuts",
+    category: "animation",
+    tags: ["animation", "machined", "hardware", "rack", "server", "3d", "shader", "brushed metal", "industrial", "exploded", "developer", "infrastructure", "ai", "trailer", "launch", "reel", "captions", "music", "saas"],
+    platforms: ["youtube", "x", "linkedin", "instagram", "tiktok", "product-hunt", "web"],
+    formats: ["video", "reel", "short", "post", "ad"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Machined hardware launch trailer", preset(SIZES[0]));
+    k.quantizeGeometry = true;
+    machinedBrand(k);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  machined_trailer_default
+};

package/dist/chunks/chunk-WT75E52P.js

@@ -0,0 +1,80 @@
+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 {
+  folio,
+  manuscriptBrand,
+  snail,
+  vellum,
+  vine
+} from "./chunk-4E2RUPKJ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  pill
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/social/manuscript-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var manuscript_link_preview_default = defineTemplate({
+  id: "social-manuscript-link-preview",
+  meta: {
+    name: "Manuscript link preview",
+    description: "A 1200 \xD7 630 link preview set as an illuminated manuscript: the promise in a heavy serif under a red rubric and the product in one mono line, beside a vellum leaf with a gilded initial, an ivy border, lines of script and a wax seal",
+    category: "social",
+    tags: ["manuscript", "illuminated", "medieval", "vellum", "drop cap", "gold leaf", "wax seal", "link preview", "open graph", "og image", "wiki", "docs", "saas", "serif"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Manuscript link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    manuscriptBrand(k, { tagline: "The last wiki you will ever copy out by hand." });
+    k.textStyle("Rubric 22", { ...SERIF, size: 22, fontWeight: 700, letterSpacing: 3, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Display 64", { ...SERIF, size: 64, fontWeight: 900, letterSpacing: -1.8, lineHeight: 66 });
+    k.textStyle("Facts 20", { ...MONO, size: 20, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Chip 20", { size: 20, fontWeight: 800, letterSpacing: 0.5, lineHeight: 26 });
+    k.textStyle("Initial 84", { ...SERIF, size: 84, fontWeight: 900, lineHeight: 84, textAlign: "CENTER" });
+    k.textStyle("Seal 38", { ...SERIF, size: 38, fontWeight: 900, lineHeight: 38, textAlign: "CENTER" });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 20", label: "Three scribes free", pad: [10, 20], radius: 4 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 48, right: 500, bottom: 48, left: 124 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    vellum(k, sheet);
+    const box = { x: 0, y: 0, width: 1200, height: 630 };
+    vine(k, k.frame(sheet, box, { name: "Left border" }), { x: 56, y: -20, length: 680, dir: "down", amp: 18, waves: 2.5, u: 0.95 });
+    vine(k, k.frame(sheet, box, { name: "Foot border" }), { x: 130, y: 590, length: 560, dir: "right", amp: 14, waves: 2.5, u: 0.8, side: -1 });
+    snail(k, sheet, { x: 560, y: 578, size: 30 });
+    folio(k, sheet, 420, 560, { letter: "Q", initialStyle: "Initial 84", sealStyle: "Seal 38", at: { x: 740, y: 36 }, seed: 23 });
+    const copy = k.stack(sheet, { gap: 22, name: "Copy" });
+    k.text(copy, "Incipit \xB7 {{brand.name}}, the team wiki", { style: "Rubric 22", color: "accent", name: "Eyebrow" });
+    k.text(copy, "{{brand.tagline}}", { style: "Display 64", color: "text", name: "Headline" });
+    k.rect(copy, 120, 4, "accent", { name: "Rule" });
+    k.text(copy, "Reads Slack, GitHub and calls \xB7 cites every line", { style: "Facts 20", color: "onPaper", name: "Facts" });
+    k.instance(copy, "Chip", { Label: "Three scribes free" }, { name: "Chip" });
+    return k.finish();
+  }
+});
+
+export {
+  manuscript_link_preview_default
+};

package/dist/chunks/chunk-WV44P6ST.js

@@ -0,0 +1,23 @@
+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 {
+  FAMILY
+} from "./chunk-4QDJJDHC.js";
+import {
+  tierStory
+} from "./chunk-H7MBJIYF.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/motion/festival-presale-family-tier.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_family_tier_default = tierStory(FAMILY);
+
+export {
+  festival_presale_family_tier_default
+};

package/dist/chunks/chunk-WVFLNPTS.js

@@ -0,0 +1,65 @@
+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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  tier,
+  tierBox
+} from "./chunk-P6FWZDKA.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/print/comic-hero-widescreen.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_widescreen_default = defineTemplate({
+  id: "comic-widescreen",
+  meta: comicMeta("Widescreen page", 'Page three of "Nightstar: Blackout": four letterbox frames, one under the other like a film, as Rosa rides home, Voltrix lands in the avenue, her bike goes flying and he stands over her', ["widescreen", "cinematic", "letterbox", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Widescreen page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const hs = rows(H - FOLIO, g, [1, 1, 1, 1]);
+  const pics = ["wide-1", "wide-2", "wide-3", "wide-4"];
+  const names = ["Rosa rides home", "Voltrix lands", "Thrown", "Cornered"];
+  const tiers = hs.map((h, i) => {
+    const t = tierBox(k, k.sheet, W, h, `Tier ${i + 1}`);
+    panel(k, t, tier(W, h, [1], g)[0], pics[i], { ground: ["heroG1", "heroG2", "heroG3", "heroG1"][i], name: names[i] });
+    return t;
+  });
+  caption(k, tiers[0], "Rosa Vega. Last delivery of the night.", { x: 10, y: 10, width: 220 });
+  sfx(k, tiers[1], "Kra-thoom!", { x: W - 330, y: 8, w: 300, h: 110, deg: -6, big: false, seed: 3 });
+  say(k, tiers[2], "No no no\u2014", { x: W - 120, y: 12, width: 96, to: { x: W * 0.62, y: hs[2] * 0.45 } });
+  say(k, tiers[3], "Wrong street, kid.", { x: 12, y: 12, width: 128, to: { x: W * 0.38, y: hs[3] * 0.3 } });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 3");
+}
+
+export {
+  comic_hero_widescreen_default,
+  drawPage
+};