@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-SBT2MVWO.js

@@ -0,0 +1,178 @@
+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 {
+  FLAP_HOWTO,
+  apron,
+  boardBrand,
+  bolts,
+  chevrons,
+  flaps,
+  flipIn,
+  housing,
+  lamps,
+  picto,
+  rods,
+  sign
+} from "./chunk-SBHJ5S5K.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  score
+} from "./chunk-52GCV7N5.js";
+import {
+  put
+} from "./chunk-QLV6445V.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/departure-board-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = score("tension");
+var DURATION = MUSIC.duration;
+var beat = MUSIC.beat;
+var HOOK = ["SPEAK IT", "BEFORE", "YOU LAND"];
+var PHRASES = [["BOM DIA", "READY", true], ["OBRIGADO", "READY", true], ["A CONTA", "NEXT", false]];
+var CELL = 92;
+var SMALL = 46;
+var SIGN_W = 800;
+var swaps = [
+  { layer: "Caption", words: ["You booked Lisbon. You have 19 days.", "Layover picks the 300 phrases that trip needs.", "Ten minutes a day, at the gate or on the train.", "Land already knowing how to order dinner."], at: beat(4), hold: 2100, stagger: 50, in: 350, out: 250, unit: "word", rise: 30 }
+];
+var counts = [{ layer: "Ready count", at: beat(6), duration: beat(8), counter: { from: 198, to: 214 }, tick: 250 }];
+var cues = [
+  { layer: "Sign", preset: "drop-in", at: 0, params: { duration: 500 } },
+  { layer: "Board head", preset: "fade-in", at: 200, params: { duration: 500 } },
+  { layer: "Today", preset: "fade-in", at: beat(4), params: { duration: 500 } },
+  { layer: "Status 1", preset: "pop-in", at: beat(8), params: { duration: 400 } },
+  { layer: "Status 2", preset: "pop-in", at: beat(12), params: { duration: 400 } },
+  { layer: "Status 3", preset: "pop-in", at: beat(16), params: { duration: 400 } },
+  { layer: "Parked plane", preset: "slide-in", at: beat(4), params: { duration: 3e3, direction: "right", distance: 700 } },
+  { layer: "Call", preset: "rise-in", at: beat(24), params: { duration: 600 } },
+  { layer: "Site", preset: "fade-in", at: beat(25), params: { duration: 600 } },
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 900, amount: 0.05 } }
+];
+var departure_board_reel_default = defineTemplate({
+  id: "motion-departure-board-reel",
+  meta: {
+    name: "Departure board app launch reel",
+    description: "A 16-second launch reel for a mobile subscription app, drawn as an airport departure hall: the hook is spelled on a split-flap board in the first second, tile by flipping tile, under a yellow wayfinding sign; the lower rows flip to today\u2019s phrases and turn to a lit READY, an airliner taxis in along the floor, and the offer rises \u2014 with the story in burned-in captions over a ticking countdown track (made by PopCraft, CC0), every flip on a beat. 9:16 with 1:1 and 4:5 cuts. " + FLAP_HOWTO,
+    category: "animation",
+    tags: ["animation", "departure board", "split-flap", "airport", "wayfinding", "boarding pass", "travel", "language app", "mobile app", "subscription app", "reel", "captions", "music", "audio", "launch"],
+    platforms: ["tiktok", "instagram", "youtube"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("Departure board app launch reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    boardBrand(k);
+    k.textStyle("Sign 44", { size: 44, fontWeight: 800, letterSpacing: -1.2, lineHeight: 46 });
+    k.textStyle("Sign note 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 1.2, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Board label 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2.4, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.6, lineHeight: 48, textAlign: "CENTER" });
+    k.textStyle("Caption 34", { size: 34, fontWeight: 700, letterSpacing: -0.4, lineHeight: 42, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, letterSpacing: -0.4, lineHeight: 40 });
+    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 600, lineHeight: 32, textAlign: "CENTER" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Get {{brand.name}} free", pad: [22, 44], radius: 14 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Launch reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    lamps(k, sheet, 1080, 0, 3, 1, 520);
+    const plane = picto(k, sheet, "plane", 72, "primary", { deg: 90, name: "Overflight", absolute: { x: -120, y: 96 } });
+    rods(k, sheet, (1080 - SIGN_W) / 2, 250, SIGN_W, 1);
+    apron(k, sheet, 1080, 1490);
+    chevrons(k, sheet, 1080, 40, { x: 0, y: 1880 });
+    sign(k, sheet, "Departures", { style: "Sign 44", u: 1, width: SIGN_W, note: "Lisbon LIS \xB7 gate closes in 19 days", noteStyle: "Sign note 22" });
+    const board = housing(k, sheet, { width: 880, pad: 40, gap: 14, name: "Board" });
+    const head = k.stack(board, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Board head" });
+    const live = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Live" });
+    k.ellipse(live, 14, "go", { name: "Live lamp" });
+    k.text(live, "Now boarding", { style: "Board label 20", color: "flapInk", autoWidth: true, name: "Live label" });
+    k.text(head, "TP 1351 \xB7 LIS", { style: "Board label 20", color: "flapDim", autoWidth: true, name: "Flight" });
+    const hook = k.stack(board, { gap: 14, name: "Hook" });
+    HOOK.forEach((line, i) => flaps(k, hook, line, { cell: CELL, cols: 8, name: `Hook row ${i + 1}` }));
+    const today = k.stack(board, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 10, right: 0, bottom: 0, left: 0 }, name: "Today" });
+    k.text(today, "Today\u2019s phrases", { style: "Board label 20", color: "flapDim", autoWidth: true, name: "Today label" });
+    const ready = k.stack(today, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Ready" });
+    const cell = k.stack(ready, { width: 44, align: "MAX", name: "Ready cell" });
+    k.text(cell, "214", { style: "Board label 20", color: "flapInk", align: "RIGHT", name: "Ready count" });
+    k.text(ready, "of 300 ready", { style: "Board label 20", color: "flapDim", autoWidth: true, name: "Ready label" });
+    const phrases = k.stack(board, { gap: 10, name: "Phrases" });
+    PHRASES.forEach(([phrase, status, hot], i) => {
+      const row = k.stack(phrases, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: `Phrase ${i + 1}` });
+      flaps(k, row, phrase, { cell: SMALL, cols: 10, name: `Phrase row ${i + 1}` });
+      flaps(k, row, status, { cell: SMALL, cols: 5, hot, name: `Status ${i + 1}` });
+    });
+    const foot = k.stack(sheet, { gap: 16, align: "CENTER", name: "Foot" });
+    const says = k.stack(foot, { height: 96, justify: "CENTER", name: "Caption box" });
+    k.text(says, swaps[0].words[0], { style: "Caption 40", color: "text", name: "Caption" });
+    const side = verticalPadding();
+    k.instance(foot, "Button", { Label: "Get {{brand.name}} free" }, { name: "Call" });
+    k.text(foot, "First trip free \xB7 {{brand.site}}", { style: "Site 24", color: "onPaper", name: "Site" });
+    if (swapTimes(swaps[0]).at(-1).gone > DURATION) throw new Error("departure reel: the captions run past the music");
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    bolts(k, board, 40);
+    k.animate(plane, "translateX", [{ t: 0, v: 0, ease: ease.linear }, { t: DURATION, v: 1320 }]);
+    HOOK.forEach((_, i) => {
+      for (const r of k.named(sheet, `Hook row ${i + 1}`)) flipIn(k, r, i * 240, { seed: 3 + i, flips: 5, stagger: 30 });
+    });
+    PHRASES.forEach((_, i) => {
+      const at = beat(6 + i * 4);
+      for (const r of k.named(sheet, `Phrase row ${i + 1}`)) flipIn(k, r, at, { seed: 11 + i });
+      for (const r of k.named(sheet, `Status ${i + 1}`)) flipIn(k, r, at + beat(2), { seed: 17 + i, flips: 3 });
+    });
+    const feed = (kit, id, h, signY) => {
+      for (const name of ["Apron", "Overflight"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
+      put(kit, id, "Chevrons", 0, h - 28, { width: 1080, height: 28, scaleX: 1, scaleY: 1 });
+      for (const n of kit.named(id, "Rod")) kit.patch(n, { y: 0, height: signY + 4 });
+      for (const n of kit.named(id, "Board")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 880 });
+      for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 14 });
+      for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 34");
+      for (const n of kit.named(id, "Caption box")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 880 });
+    };
+    k.variants(sheet, feedVariants({ post: 40, portrait: 56 }, {
+      post: (kit, id) => {
+        feed(kit, id, 1080, 40);
+        for (const name of ["Today", "Phrases"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
+        kit.named(id, "Bolt").slice(2).forEach((n) => kit.patch(n, { y: kit.node(n).y - 276 }));
+      },
+      portrait: (kit, id) => feed(kit, id, 1350, 56)
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  departure_board_reel_default
+};

package/dist/chunks/chunk-SIMWAITX.js

@@ -0,0 +1,53 @@
+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 {
+  slideshow
+} from "./chunk-R63EHB4Z.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/slideshow/memorial.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-memorial",
+  song: "keepsake",
+  meta: {
+    name: "In loving memory tribute",
+    description: "A gentle one-minute tribute for a memorial or celebration of life: an opening card with the name and the years, chapter cards, slow dissolves and dips to the shade cut on the beats of a hymn-like piano piece (made by PopCraft, CC0), long unhurried holds, and a closing card. Photos are CC0 flowers and candlelight from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "memorial", "tribute", "funeral", "celebration of life", "photo", "music", "scenes", "ken burns", "video"],
+    platforms: ["youtube", "facebook"],
+    formats: ["video", "post"],
+    useCases: ["event"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  brand: { paper: "#F4F1EC", onPaper: "#33363B", accent: "#8C9A8A", shade: "#15181B", onPhoto: "#FFFFFF", leak: "#F6D7A7" },
+  fields: { names: "Margaret Ellen Hayes", date: "1941 \u2013 2026" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "memorial-00", kicker: "In loving memory of", beats: 8, move: "up" },
+    { kind: "chapter", name: "Chapter 1", kicker: "She loved", title: "Her garden", beats: 4 },
+    { kind: "photo", name: "First to bloom", photo: "memorial-01", caption: "Every spring, the first to bloom", beats: 4, move: "right" },
+    { kind: "photo", name: "By name", photo: "memorial-05", layout: "matted", caption: "She knew every one by name", beats: 4, move: "in" },
+    { kind: "photo", name: "Gentle hands", photo: "memorial-03", caption: "Gentle hands", beats: 6, move: "in", anchor: [0.4, 0.5] },
+    { kind: "dip", name: "Dip 1", to: "shade", beats: 1 },
+    { kind: "chapter", name: "Chapter 2", kicker: "She taught us", title: "To look closer", beats: 4 },
+    { kind: "photo", name: "Wonder", photo: "memorial-07", caption: "Stillness, and then wonder", beats: 4, move: "left", focus: 0.62 },
+    { kind: "photo", name: "The coast", photo: "memorial-02", caption: "The coast path she walked each morning", beats: 6, move: "right" },
+    { kind: "photo", name: "Lantern", photo: "memorial-04", layout: "matted", caption: "A light for the way home", beats: 4, move: "up" },
+    { kind: "dip", name: "Dip 2", to: "shade", beats: 1 },
+    { kind: "photo", name: "With us", photo: "memorial-06", caption: "We carry you with us", beats: 6, move: "in" },
+    { kind: "photo", name: "Always", photo: "memorial-08", layout: "matted", caption: "Always", beats: 4, move: "in" },
+    { kind: "end", name: "Ending", kicker: "Forever in our hearts" }
+  ]
+};
+var memorial_default = slideshow(story);
+
+export {
+  story,
+  memorial_default
+};

package/dist/chunks/chunk-SIT527DG.js

@@ -0,0 +1,283 @@
+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 {
+  TESSERA,
+  WEB_STEPS,
+  WEB_TYPE,
+  assemble,
+  bentoBrand,
+  bentoRow,
+  calendarSlice,
+  fillWeek,
+  fitCalendar,
+  tileLabel,
+  webTile
+} from "./chunk-4CB6I63T.js";
+import {
+  tick
+} from "./chunk-YNOCYFZ4.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-TJBKMQY5.js";
+import {
+  nav
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/style-bento-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Bento SaaS pricing page";
+var DURATION = 6e3;
+var PLANS = [
+  { name: "Free", pitch: "For one person and one calendar.", month: 0, year: 0, surface: "card", cta: "Start free", features: ["Plans your own week", "3 connected calendars", "Notes for 10 meetings a month"] },
+  { name: "Pro", pitch: "For people whose week is mostly other people.", month: TESSERA.pro, year: TESSERA.proYear, surface: "primary", cta: "Try Pro free for 14 days", width: 520, features: ["Autoplan, every week", "Unlimited meeting notes", "Follow-ups drafted for you", "Focus mode for Slack and mail"] },
+  { name: "Business", pitch: "For teams that plan together.", month: TESSERA.business, year: TESSERA.businessYear, surface: "night", cta: "Talk to us", features: ["Everything in Pro", "Team planning and shared focus", "SSO, SCIM and audit log", "EU or US data residency"] }
+];
+var TABLE = [
+  ["Connected calendars", "3", "Unlimited", "Unlimited"],
+  ["Meeting notes", "10 a month", "Unlimited", "Unlimited"],
+  ["Autoplan", "yes", "yes", "yes"],
+  ["Follow-up drafts", "no", "yes", "yes"],
+  ["Focus mode", "no", "yes", "yes"],
+  ["Team planning", "no", "no", "yes"],
+  ["SSO and SCIM", "no", "no", "yes"],
+  ["Data residency", "no", "no", "yes"]
+];
+var FAQ = [
+  ["Does Tessera read all my mail?", "Only the threads it needs to plan: it skips anything you label private, and it never trains on your data.", "sky"],
+  ["What if I don't like a plan it made?", "Drag a block, or tell it why. It learns your rules, like no meetings before ten.", "mint"],
+  ["Is the trial really free?", "Pro is free for 14 days with no card. On day 15 you move to Free unless you choose a plan.", "sand"],
+  ["Can I switch to yearly later?", "Any time. Yearly is 20% less, and the rest of your month is credited.", "rose"],
+  ["Which calendars work?", "Google, Outlook and iCloud calendars; Gmail and Outlook mail; Zoom, Meet and Teams for notes.", "card"],
+  ["Do you offer discounts?", "Half price for nonprofits and schools. Write to us from your work address.", "card"]
+];
+var COL = { desktop: 220, laptop: 190, tablet: 120, mobile: 64 };
+var cues = [
+  { layer: "Headline", preset: "words-in", at: 80, params: { duration: 500 } },
+  { layer: "Switch row", preset: "rise-in", at: 400, params: { duration: 450 } },
+  assemble(["Plan tile"], 500, 110, 600),
+  { layer: "Table row", preset: "slide-in", at: 1400, stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 380 } },
+  { layer: "Close button", preset: "pulse", at: 3600, params: { duration: 800, amount: 0.05 } }
+];
+var counts = [
+  { layer: "Pro amount", at: 700, duration: 900, counter: { from: 0, to: TESSERA.pro, prefix: "$" } },
+  { layer: "Business amount", at: 810, duration: 900, counter: { from: 0, to: TESSERA.business, prefix: "$" } }
+];
+var ink = (s) => s === "primary" ? "onPrimary" : s === "night" ? "onNight" : s === "card" ? "onCard" : `on${s[0].toUpperCase()}${s.slice(1)}`;
+var quiet = (s) => s === "primary" ? "onPrimary" : s === "night" ? "nightMuted" : "muted";
+var style_bento_pricing_default = defineTemplate({
+  id: "web-saas-style-bento-pricing",
+  meta: {
+    name: NAME,
+    description: "A pricing page in the bento grid look whose monthly / yearly switch works in present mode: a variable toggle flips every price at once while the knob slides across. Three plans as an uneven bento row (Pro wide and lime, with its week filling), a comparison table on a white tile with drawn ticks, six questions as a bento of tinted tiles, a closing tile and a footer; the tiles assemble, prices count up and the table rows slide in on load. Desktop to phone",
+    category: "web",
+    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison table", "faq", "saas", "bento", "bento grid", "tiles", "ai", "productivity", "counter", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch", "comparison"],
+    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;
+    bentoBrand(k, { tagline: "Pay for the weeks it plans." });
+    const s = typeScale(k, { ...WEB_TYPE });
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
+    const box = { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", padding: { top: 14, right: 24, bottom: 14, left: 24 } };
+    k.component("Button", { ...box, fill: "primary", props: { Label: "Start free" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onPrimary", autoWidth: true });
+    });
+    k.component("Button quiet", { ...box, stroke: { color: "onCard", width: 1.5 }, props: { Label: "Start free" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onCard", autoWidth: true });
+    });
+    k.component("Button dark", { ...box, fill: "night", props: { Label: "Start free" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onNight", autoWidth: true });
+    });
+    const on = s("Title 20"), off = s("Lead 17");
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 14,
+      align: "CENTER",
+      padding: { top: 8, right: 18, bottom: 8, left: 18 },
+      fill: "card",
+      radius: 999,
+      description: "Monthly or yearly billing: click to switch, and the knob slides across. On the pricing page the click also flips the billing variables every price is bound to.",
+      props: { Left: "Monthly", Right: "Yearly" }
+    }, (state, id) => {
+      k.propText(id, "Left", { style: state === "Monthly" ? on : off, color: state === "Monthly" ? "onCard" : "muted", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 64, height: 36, radius: 999, padding: 4, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: "night", name: "Track" });
+      k.ellipse(track, 28, "primary", { name: "Knob" });
+      k.propText(id, "Right", { style: state === "Yearly" ? on : off, color: state === "Yearly" ? "onCard" : "muted", autoWidth: true });
+    });
+    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Yearly", 260, "EASE_OUT");
+    k.changeTo("Billing switch/Yearly", "ON_CLICK", "Billing switch/Monthly", 260, "EASE_OUT");
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 104, { top: 28, right: 120, bottom: 56, left: 120 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { layoutSizingVertical: "HUG", minHeight: 1024, clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const top = k.stack(sheet, { gap: 64, name: "Top" });
+    nav(k, top, { links: ["Product", "Pricing", "Customers", "Changelog", "Sign in"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 20") });
+    const head = k.stack(top, { direction: "HORIZONTAL", gap: 64, align: "MAX", name: "Header" });
+    const title = k.stack(head, { gap: 18, name: "Header title" });
+    k.text(title, "Pricing", { style: s("Label 14"), color: "onPaper", name: "Eyebrow" });
+    k.text(title, "{{brand.tagline}}", { style: s("Display 64"), color: "text", name: "Headline" });
+    const billing = k.stack(head, { width: 420, gap: 20, name: "Header billing" });
+    k.text(billing, `Every plan is per seat. ${TESSERA.trial} Pay by the year and it costs 20% less.`, { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const sw = k.stack(billing, { direction: "HORIZONTAL", gap: 14, align: "CENTER", wrap: true, name: "Switch row" });
+    const toggle = k.instance(sw, "Billing switch", { Left: "Monthly", Right: "Yearly" }, { name: "Billing toggle" });
+    k.setVariable(toggle, monthly, { toggle: true });
+    k.setVariable(toggle, yearly, { toggle: true });
+    const save = k.stack(sw, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Saving" });
+    k.text(save, "Yearly: 20% off", { style: s("Ui 13"), color: "onPrimary", autoWidth: true, name: "Saving words" });
+    const plans = bentoRow(k, sheet, { height: 620, name: "Plans" });
+    for (const p of PLANS) {
+      const t = webTile(k, plans, { surface: p.surface, width: p.width ?? "FILL", pad: 32, gap: 18, justify: "MIN", name: "Plan tile" });
+      tileLabel(k, t, p.name, { style: s("Title 24"), surface: p.surface, size: 24, right: p.name === "Pro" ? "Most teams start here" : void 0, name: "Plan head" });
+      for (const r of k.named(t, "Label right")) k.restyle(r, s("Ui 13"));
+      k.text(t, p.pitch, { style: s("Body 16"), color: quiet(p.surface), name: "Pitch" });
+      const price = k.stack(t, { name: "Price" });
+      const block = (which) => {
+        const b = k.stack(price, { gap: 4, name: `${which} price` });
+        const v = which === "Monthly" ? p.month : p.year;
+        k.text(b, `$${v}`, { style: s("Price 56"), color: ink(p.surface), width: 160, name: which === "Monthly" ? `${p.name} amount` : `${p.name} yearly amount` });
+        k.text(b, !p.month ? "free, for as long as you like" : which === "Monthly" ? "a seat a month, billed monthly" : `a seat a month, billed $${p.year * 12} a year`, { style: s("Small 13"), color: quiet(p.surface), name: "Billed" });
+        return b;
+      };
+      k.bindVariable(block("Monthly"), "visible", monthly);
+      k.bindVariable(block("Yearly"), "visible", yearly);
+      k.instance(t, p.surface === "primary" ? "Button dark" : p.surface === "night" ? "Button" : "Button quiet", { Label: p.cta }, { name: "Plan button" });
+      const list = k.stack(t, { gap: 12, name: "Features" });
+      for (const f of p.features) {
+        const row = k.stack(list, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Feature" });
+        tick(k, row, 16, p.surface === "night" ? "primary" : ink(p.surface), { name: "Feature tick", weight: 3 });
+        k.text(row, f, { style: s("Ui 15"), color: ink(p.surface), width: "FILL", name: "Feature label" });
+      }
+      if (p.name === "Pro") {
+        const wk = k.stack(t, { fill: "card", radius: 20, padding: 18, gap: 10, name: "Pro week" });
+        tileLabel(k, wk, "Your week on Pro", { style: s("Ui 13"), surface: "card", size: 13, right: `${TESSERA.focus} focus blocks`, name: "Pro week label" });
+        calendarSlice(k, wk, { w: 520 - 64 - 36, h: 90, day: s("Ui 13"), ink: "onCard", radius: 5 });
+      }
+    }
+    const compare = k.stack(sheet, { gap: 28, name: "Compare" });
+    k.text(compare, "Plan by plan", { style: s("Section 44"), color: "text", name: "Compare title" });
+    const table = k.stack(compare, { fill: "card", radius: 28, padding: 32, gap: 0, name: "Table" });
+    const headRow = k.stack(table, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 0, right: 0, bottom: 14, left: 14 }, name: "Table head" });
+    k.text(headRow, "What you get", { style: s("Ui 13"), color: "muted", width: "FILL", name: "Table corner" });
+    PLANS.forEach((p) => {
+      const c = k.stack(headRow, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell" });
+      k.text(c, p.name, { style: s("Ui 13"), color: "onCard", autoWidth: true, name: "Column name" });
+    });
+    TABLE.forEach(([feature, ...values], r) => {
+      const row = k.stack(table, { direction: "HORIZONTAL", gap: 8, align: "CENTER", radius: 14, padding: { top: 14, right: 0, bottom: 14, left: 14 }, name: "Table row", ...r % 2 === 0 ? { fill: "paper" } : {} });
+      k.text(row, feature, { style: s("Ui 15"), color: r % 2 === 0 ? "text" : "onCard", width: "FILL", name: "Row feature" });
+      values.forEach((v, i) => {
+        const drawn = v === "yes" || v === "no";
+        const c = k.stack(row, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell", ...drawn ? { height: 26, align: "CENTER" } : {} });
+        if (v === "yes") {
+          const d = k.stack(c, { width: 26, height: 26, radius: 13, fill: "night", align: "CENTER", justify: "CENTER", name: "Cell yes" });
+          tick(k, d, 14, "primary", { name: "Cell tick", weight: 3 });
+        } else if (v === "no") k.rect(c, 14, 3, "muted", { radius: 2, name: "Cell dash" });
+        else k.text(c, v, { style: s("Ui 15"), color: r % 2 === 0 ? i === 1 ? "text" : "onPaper" : i === 1 ? "onCard" : "muted", name: "Cell value" });
+      });
+    });
+    const faq = k.stack(sheet, { gap: 28, name: "FAQ" });
+    k.text(faq, "Questions teams ask", { style: s("Section 44"), color: "text", name: "FAQ title" });
+    for (let r = 0; r < 2; r++) {
+      const row = bentoRow(k, faq, { height: 220, name: "FAQ row" });
+      FAQ.slice(r * 3, r * 3 + 3).forEach(([q, a, surface], i) => {
+        const wide = r === 0 && i === 0 || r === 1 && i === 2;
+        const t = webTile(k, row, { surface, width: wide ? "FILL" : 340, pad: 28, gap: 10, justify: "MIN", name: "Question" });
+        k.text(t, q, { style: s("Title 20"), color: ink(surface), name: "Q" });
+        k.text(t, a, { style: s("Body 15"), color: surface === "card" ? "muted" : ink(surface), name: "A" });
+      });
+    }
+    const close = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, padding: 56, align: "CENTER", justify: "SPACE_BETWEEN", fill: "night", radius: 32, name: "Close" });
+    const cw = k.stack(close, { gap: 12, name: "Close words" });
+    k.text(cw, "Start on Pro this week.", { style: s("Section 44"), color: "onNight", name: "Close title" });
+    k.text(cw, "Free for 14 days, no card. On day 15 it moves to Free unless you say otherwise.", { style: s("Lead 17"), color: "nightMuted", name: "Close line" });
+    const cs = k.stack(close, { width: 200, align: "MAX", name: "Close side" });
+    k.instance(cs, "Button", { Label: "Start free" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: TESSERA.pitch,
+      legal: "Prices in US dollars, per seat, before sales tax. Yearly plans are billed once, up front. \xA9 2026 {{brand.name}} Labs.",
+      columns: [["Product", ["Autoplan", "Notes", "Follow-ups", "Focus mode"]], ["Company", ["Customers", "Pricing", "Careers", "Contact"]], ["Help", ["Docs", "Status", "Security"]]],
+      brandStyle: s("Brand 20"),
+      headStyle: s("Ui 13"),
+      linkStyle: s("Small 13"),
+      ruleColor: "text"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    fillWeek(k, sheet, 1e3, 80);
+    respond(k, sheet, s, {
+      stack: ["Header", "Plans", "FAQ row", "Footer columns", "Close"],
+      restyle: { ...WEB_STEPS },
+      hide: { mobile: ["Nav links"] },
+      gap: { tablet: 80, mobile: 64 },
+      tweak: (kit, id, size) => {
+        const narrow = size === "tablet" || size === "mobile";
+        for (const n of kit.named(id, "Cell")) kit.patch(n, { width: COL[size] });
+        if (size === "tablet") compactNav(kit, id, ["Changelog", "Sign in"], 20);
+        if (narrow) {
+          for (const n of kit.named(id, "Header billing")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Header")) kit.patch(n, { itemSpacing: 24 });
+          for (const name of ["Plans", "FAQ row"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingVertical: "HUG" });
+          for (const name of ["Plan tile", "Question"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingVertical: "HUG" });
+          for (const n of kit.named(id, "Close words")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Close side")) kit.patch(n, { counterAxisAlignItems: "MIN" });
+          for (const n of kit.named(id, "Close")) kit.patch(n, { padding: { top: 36, right: 28, bottom: 36, left: 28 }, itemSpacing: 20 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Table")) kit.patch(n, { padding: { top: 20, right: 10, bottom: 14, left: 10 } });
+          for (const name of ["Table head", "Table row"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 4, padding: { top: 12, right: 0, bottom: 12, left: 8 } });
+          for (const n of kit.named(id, "Plan tile")) kit.patch(n, { padding: { top: 24, right: 24, bottom: 24, left: 24 } });
+          for (const n of kit.named(id, "Cell value")) if (kit.node(n).characters === "Unlimited") kit.patch(n, { characters: "All" });
+          for (const n of kit.named(id, "Cell value")) if (kit.node(n).characters === "10 a month") kit.patch(n, { characters: "10/mo" });
+          for (const ph of kit.named(id, "Plan head")) for (const n of kit.named(ph, "Label right")) kit.patch(n, { visible: false });
+        }
+        fitWeek(kit, id, size);
+      }
+    });
+    k.finish();
+    const prices = [...new Set(k.doc.pages.flatMap((p) => k.named(p, "Price")))];
+    for (const price of prices) k.patch(k.node(price).childIds[1], { visible: false });
+    k.finish();
+    for (const price of prices) {
+      const [mo, yr] = k.node(price).childIds;
+      k.patch(yr, { x: k.node(mo).x, y: k.node(mo).y });
+    }
+    return k.doc;
+  }
+});
+function fitWeek(k, root, size) {
+  const pad = size === "mobile" ? 24 : 32;
+  const w = (size === "tablet" || size === "mobile" ? CONTENT[size] : 520) - 2 * pad - 36;
+  for (const t of k.named(root, "Pro week")) fitCalendar(k, t, w, 90);
+}
+
+export {
+  style_bento_pricing_default
+};