@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-MHUQJ577.js

@@ -1,262 +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 {
-  APP_ROLES,
-  FLAP_HOWTO,
-  SCREENS,
-  boardBrand,
-  flapH,
-  flaps,
-  flapsW,
-  flipIn,
-  housing,
-  pass,
-  passStyles,
-  passTrim,
-  picto,
-  plate,
-  shadow
-} from "./chunk-6GZOXHLQ.js";
-import {
-  flatPhone,
-  uiRoles
-} from "./chunk-SCE4YRSR.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-PFCHOCEN.js";
-import {
-  nav,
-  page,
-  webResponsive
-} from "./chunk-TF2MO3UA.js";
-import {
-  glow
-} from "./chunk-M6VTXO6F.js";
-import {
-  defineTemplate
-} from "./chunk-PMGFSLPU.js";
-import {
-  Kit,
-  preset
-} from "./chunk-OFAIOFJQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/web/departure-board-download.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var LOOP = 6e3;
-var CELL = 62;
-var HERO_PAD = 24;
-var HERO_W = flapsW(8, CELL) + 2 * HERO_PAD;
-var HOOK = ["SPEAK IT", "BEFORE", "YOU LAND"];
-var STAGE = { w: 560, h: 700 };
-var PHONE_S = 0.76;
-var PASS_S = 0.44;
-var STEPS = [
-  ["T-19", "Add your flight", "Paste a booking, or type a city and a date. {{brand.name}} works out what the trip involves: two dinners out, a hotel desk, the 15:10 to Sintra.", "BOOKED", false],
-  ["T-18", "Ten minutes a day", "Hear it, say it, keep it. Lessons download once and work in airplane mode, so the gate, the train and seat 14A all count.", "DAILY", false],
-  ["T-0", "Land", "Three hundred phrases you have already said out loud, in the order the trip will ask for them. No colours, no zoo animals.", "READY", true]
-];
-var CODES = ["LIS", "NRT", "BLQ", "MAD", "CDG", "BER", "ATH", "IST", "ICN", "BKK", "AMS", "WAW", "PRG", "ZAG"];
-var HERO_PASS = {
-  width: 900,
-  u: 1,
-  styles: "Mini",
-  from: "ENG",
-  to: "POR",
-  fromNote: "You speak",
-  toNote: "You land in",
-  phrase: "Uma mesa para dois, por favor.",
-  meaning: "A table for two, please.",
-  fields: [["Flight", "TP 1351"], ["Gate closes", "19 days"]],
-  stub: [["To", "Lisbon"], ["Phrase", "214"]]
-};
-var OFFER = {
-  width: 1200,
-  u: 1.25,
-  name: "Offer pass",
-  from: "YOU",
-  to: "LIS",
-  fromNote: "Today",
-  toNote: "In 19 days",
-  phrase: "Your first trip is free.",
-  meaning: "All 300 phrases, offline, no card. After that, $6.99 a trip, or $39.99 a year for every trip you take.",
-  fields: [["iPhone", "App Store"], ["Android", "Google Play"], ["Rated", "4.9 of 5"]],
-  stub: [["Trips so far", "212,000"], ["Languages", "14"]]
-};
-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: 200, params: { duration: 700 } },
-  { layer: "Hero board", preset: "fade-in", at: 150, params: { duration: 500 } },
-  { layer: "Phone", preset: "rise-in", at: 500, params: { duration: 1100 } },
-  { layer: "Lead", preset: "rise-in", at: 1100, params: { duration: 800 } },
-  { layer: "Store badge", preset: "rise-in", at: 1500, params: { duration: 700 }, stagger: { delay: 140 } },
-  { layer: "Gate board", preset: "pop-in", at: 1700, params: { duration: 450 } },
-  { layer: "Proof", preset: "fade-in", at: 2100, params: { duration: 800 } },
-  { layer: "Pass", preset: "slide-in", at: 2300, params: { duration: 900, direction: "left", distance: 300 } },
-  { layer: "Stamp", preset: "pop-in", at: 3400, params: { duration: 400 } }
-];
-var departure_board_download_default = defineTemplate({
-  id: "web-departure-board-download",
-  meta: {
-    name: "Departure board app download page",
-    description: "A download page for a mobile subscription app, drawn as an airport departure hall: an offer bar, a hero whose headline is a split-flap board that flips itself into place beside a phone lit like a boarding pass (a small board counts the days to the gate, a boarding pass slides in and is stamped), the two store buttons, how it works as three rows of one long departure board, the languages, and the offer printed as a wide boarding pass \u2014 at desktop, laptop, tablet and phone widths. " + FLAP_HOWTO,
-    category: "web",
-    tags: ["departure board", "split-flap", "airport", "wayfinding", "boarding pass", "download page", "landing page", "hero", "website", "mobile app", "subscription app", "language app", "travel", "app store", "animation", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["launch", "brand-intro"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  breakpoints: true,
-  motion: { cues },
-  build() {
-    const k = new Kit("Departure board app download page", preset("web-desktop"));
-    k.quantizeGeometry = true;
-    boardBrand(k, {}, uiRoles(APP_ROLES));
-    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Brand 22", { size: 22, fontWeight: 800, letterSpacing: -0.5, 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", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 2.6, lineHeight: 20, textCase: "UPPER" });
-    k.textStyle("Lead 21", { size: 21, fontWeight: 400, lineHeight: 33 });
-    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
-    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Badge small 12", { size: 12, fontWeight: 600, lineHeight: 15 });
-    k.textStyle("Badge 21", { size: 21, fontWeight: 700, letterSpacing: -0.4, lineHeight: 24 });
-    k.textStyle("Section 48", { size: 48, fontWeight: 800, letterSpacing: -1.8, lineHeight: 54 });
-    k.textStyle("Section 32", { size: 32, fontWeight: 800, letterSpacing: -1, lineHeight: 38 });
-    k.textStyle("Board label 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 2, lineHeight: 20, textCase: "UPPER" });
-    k.textStyle("Step 28", { size: 28, fontWeight: 800, letterSpacing: -0.7, lineHeight: 34 });
-    k.textStyle("Step body 18", { size: 18, fontWeight: 400, lineHeight: 29 });
-    k.textStyle("Languages 34", { ...SERIF, size: 34, fontWeight: 600, letterSpacing: -0.6, lineHeight: 48 });
-    k.textStyle("Languages 24", { ...SERIF, size: 24, fontWeight: 600, letterSpacing: -0.3, lineHeight: 36 });
-    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
-    k.textStyle("Stamp 28", { ...MONO, size: 28, fontWeight: 800, letterSpacing: 3, lineHeight: 32, textCase: "UPPER" });
-    k.textStyle("Gate label 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16, textCase: "UPPER" });
-    passStyles(k, OFFER.u);
-    passStyles(k, HERO_PASS.u, "Mini");
-    passStyles(k, 0.6, "Pass S");
-    const box = { direction: "HORIZONTAL", width: "HUG", radius: 10, align: "CENTER", padding: { top: 13, right: 22, bottom: 13, left: 22 } };
-    k.component("Button", { ...box, fill: "primary", props: { Label: "Get the app" } }, (id) => {
-      k.propText(id, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
-    });
-    k.component("Store badge", { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "text", radius: 12, padding: { top: 10, right: 22, bottom: 10, left: 16 }, description: "A store button: set its two lines.", props: { Line: "Download on the", Store: "App Store" } }, (id) => {
-      picto(k, id, "arrow", 26, "paper", { deg: 180, name: "Badge mark" });
-      const words = k.stack(id, { width: "HUG", gap: 0, name: "Badge words" });
-      k.propText(words, "Line", { style: "Badge small 12", color: "paper", autoWidth: true });
-      k.propText(words, "Store", { style: "Badge 21", color: "paper", autoWidth: true });
-    });
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 88, top: 24 });
-    k.timeline(sheet, { duration: LOOP, fps: 30 });
-    const bar = k.stack(sheet, { fill: "primary", radius: 8, padding: { top: 10, right: 24, bottom: 10, left: 24 }, align: "CENTER", name: "Offer bar" });
-    k.text(bar, "Flying in the next 30 days? Your first trip\u2019s course is free, all 300 phrases of it.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
-    nav(k, sheet, { links: ["How it works", "Languages", "Pricing", "For teams that travel"], cta: "Get the app", 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, "A language app for one trip at a time", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
-    const holder = k.stack(copy, { width: HERO_W, height: 3 * flapH(CELL) + 2 * 12 + 2 * HERO_PAD, name: "Board holder" });
-    const board = housing(k, holder, { width: HERO_W, pad: HERO_PAD, gap: 12, name: "Hero board", absolute: { x: 0, y: 0 } });
-    HOOK.forEach((line, i) => flaps(k, board, line, { cell: CELL, cols: 8, hot: i === 2, name: `Hook row ${i + 1}` }));
-    k.text(copy, "You booked Lisbon and you have nineteen days. {{brand.name}} builds a course from that trip alone (the dinners, the metro, the hotel desk) and gets you through it in ten minutes a day.", { style: "Lead 21", color: "onPaper", name: "Lead" });
-    const stores = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Stores" });
-    k.instance(stores, "Store badge", { Line: "Download on the", Store: "App Store" }, { name: "Store badge" });
-    k.instance(stores, "Store badge", { Line: "Get it on", Store: "Google Play" }, { name: "Store badge" });
-    k.text(copy, "4.9 from 212,000 ratings \xB7 14 languages \xB7 first trip free", { style: "Proof 15", color: "onPaper", name: "Proof" });
-    const visual = k.stack(hero, { width: STAGE.w, height: STAGE.h, name: "Visual" });
-    const stage = k.frame(visual, { x: 0, y: 0, width: STAGE.w, height: STAGE.h }, { name: "Stage" });
-    glow(k, stage, { role: "primary", w: 900, x: 360, y: 380, alpha: 0.22, name: "Screen light" });
-    flatPhone(k, stage, { spec: SCREENS.trip, scale: PHONE_S, x: 200, y: 10, name: "Phone", shadow: shadow(0.6, 26, 70) });
-    const gate = housing(k, stage, { width: "HUG", pad: 14, gap: 8, name: "Gate board", absolute: { x: 0, y: 110 } });
-    k.text(gate, "Gate closes in", { style: "Gate label 12", color: "flapDim", autoWidth: true, name: "Gate label" });
-    flaps(k, gate, "19 DAYS", { cell: 26, hot: true, name: "Gate row" });
-    const hp = pass(k, stage, { ...HERO_PASS, absolute: { x: 0, y: 500 } });
-    k.patch(hp, { scaleX: PASS_S, scaleY: PASS_S, anchorX: 0, anchorY: 0 });
-    k.patch(plate(k, stage, "Learned", { style: "Stamp 28", u: 1, absolute: { x: 196, y: 604 } }), { scaleX: 0.6, scaleY: 0.6, anchorX: 0, anchorY: 0, rotation: -6 });
-    const how = k.stack(sheet, { gap: 32, name: "How" });
-    k.text(how, "From booked to fluent enough, on one board", { style: "Section 48", color: "text", name: "How title" });
-    const long = housing(k, how, { width: "FILL", pad: 28, gap: 0, name: "Steps board" });
-    const lhead = k.stack(long, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 0, right: 0, bottom: 14, left: 0 }, name: "Steps head" });
-    k.text(lhead, "Days to go \xB7 what happens", { style: "Board label 14", color: "flapDim", autoWidth: true, name: "Steps label" });
-    k.text(lhead, "Status", { style: "Board label 14", color: "flapDim", autoWidth: true, name: "Steps status" });
-    for (const [when, title, body, status, hot] of STEPS) {
-      k.rect(long, "FILL", 1.5, "rivet", { name: "Step rule" });
-      const row = k.stack(long, { direction: "HORIZONTAL", gap: 32, align: "CENTER", padding: { top: 22, right: 0, bottom: 22, left: 0 }, name: "Step" });
-      flaps(k, row, when, { cell: 34, cols: 4, name: "Step when" });
-      const words = k.stack(row, { gap: 6, name: "Step words" });
-      k.text(words, title, { style: "Step 28", color: "flapInk", name: "Step title" });
-      k.text(words, body, { style: "Step body 18", color: "flapDim", name: "Step body" });
-      flaps(k, row, status, { cell: 34, cols: 6, hot, name: "Step status" });
-    }
-    const langs = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Languages" });
-    k.text(langs, "Fourteen languages, each one a trip", { style: "Section 48", color: "text", width: 400, name: "Languages title" });
-    const list = k.stack(langs, { gap: 28, name: "Languages column" });
-    k.text(list, "Portuguese for Lisbon. Japanese for Tokyo. Italian for Bologna. Spanish, French, German, Greek, Turkish, Korean, Thai, Dutch, Polish, Czech and Croatian for wherever the next booking says.", { style: "Languages 34", color: "text", name: "Languages list" });
-    const codes = k.stack(list, { direction: "HORIZONTAL", gap: 14, wrap: true, name: "Codes" });
-    CODES.forEach((code, i) => flaps(k, codes, code, { cell: 26, hot: i === 0, name: "Code" }));
-    const offer = pass(k, sheet, OFFER);
-    const footer = k.stack(sheet, { fill: "paper", name: "Footer" });
-    k.text(footer, "\xA9 2026 {{brand.name}} \xB7 Privacy \xB7 Terms \xB7 Press \xB7 Help at the gate", { style: "Small 14", color: "onPaper", name: "Footer text" });
-    k.cues(sheet, cues);
-    passTrim(k, offer, OFFER);
-    HOOK.forEach((_, i) => {
-      for (const r of k.named(sheet, `Hook row ${i + 1}`)) flipIn(k, r, 300 + i * 240, { seed: 3 + i, flips: 5, stagger: 30 });
-    });
-    for (const r of k.named(sheet, "Gate row")) flipIn(k, r, 1900, { seed: 9, flips: 4 });
-    passTrim(k, hp, HERO_PASS, null);
-    webResponsive(k, sheet, {
-      stack: ["Hero", "Languages", "Step"],
-      restyle: {
-        "Lead 21": { mobile: "Lead 17" },
-        "Section 48": { mobile: "Section 32" },
-        "Languages 34": { mobile: "Languages 24" },
-        ...Object.fromEntries(["head", "code", "label", "value", "phrase", "meaning"].map((n) => [`Pass ${n}`, { mobile: `Pass S ${n}` }]))
-      },
-      gap: { tablet: 64, mobile: 48 },
-      tweak: (kit, id, size) => {
-        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40 });
-        if (size !== "tablet" && size !== "mobile") return;
-        if (size === "tablet") kit.named(id, "Nav link").slice(3).forEach((n) => kit.patch(n, { visible: false }));
-        for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: size === "tablet" ? "CENTER" : "MIN" });
-        for (const n of kit.named(id, "Step")) kit.patch(n, { itemSpacing: 14 });
-        if (size === "mobile") for (const n of kit.named(id, "Steps status")) kit.patch(n, { visible: false });
-        for (const n of kit.named(id, "Languages")) kit.patch(n, { itemSpacing: 20 });
-        for (const n of kit.named(id, "Languages title")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        const col = size === "mobile" ? 335 : 672;
-        const bs = Math.min(1, col / HERO_W), ss = size === "mobile" ? 0.8 : Math.min(1, col / STAGE.w);
-        if (size === "mobile") {
-          for (const n of kit.named(id, "Phone")) kit.patch(n, { x: 95 });
-          for (const n of kit.named(id, "Gate board")) kit.patch(n, { y: 40 });
-        }
-        for (const n of kit.named(id, "Board holder")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: Math.round(HERO_W * bs), height: Math.round(kit.node(n).height * bs) });
-        for (const n of kit.named(id, "Hero board")) kit.patch(n, { x: 0, y: 0, scaleX: bs, scaleY: bs, anchorX: 0, anchorY: 0 });
-        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: size === "mobile" ? col : Math.round(STAGE.w * ss), height: Math.round(STAGE.h * ss) });
-        for (const n of kit.named(id, "Stage")) kit.patch(n, { x: 0, y: 0, scaleX: ss, scaleY: ss, anchorX: 0, anchorY: 0 });
-        for (const n of kit.named(id, "Offer pass")) {
-          kit.patch(n, { layoutSizingHorizontal: "FILL" });
-          for (const name of ["Pass stub", "Perforation", "Notch", "Barcode"]) for (const c of kit.named(n, name)) kit.patch(c, { visible: false });
-          for (const c of kit.named(n, "Pass main")) kit.patch(c, { layoutSizingHorizontal: "FILL" });
-          if (size === "mobile") {
-            for (const c of kit.named(n, "Pass fields")) kit.patch(c, { layoutWrap: "WRAP", itemSpacing: 18, counterAxisSpacing: 10 });
-            for (const c of kit.named(n, "Route line")) kit.patch(c, { visible: false });
-          }
-        }
-      }
-    });
-    return k.finish();
-  }
-});
-
-export {
-  departure_board_download_default
-};