@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-PDJG3YOD.js

@@ -0,0 +1,92 @@
+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 {
+  E,
+  heart,
+  lottieTemplate,
+  roundRect
+} from "./chunk-SFLOYGZM.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/lottie/realestate.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var HOME = { paper: "#F4F6F2", ink: "#1F2A24", accent: "#2E7D5B", roof: "#C2573B", soft: "#DDE8DF", window: "#FFD27A", wall: "#FFFFFF", dark: "#9FB3A6" };
+var homeSearch = lottieTemplate({
+  slug: "home-search",
+  sector: "realestate",
+  role: "icon",
+  size: "icon",
+  duration: 3e3,
+  loop: true,
+  name: "Home search",
+  description: "A property-search icon: a magnifier circles a house and each window lights up as the lens passes over it \u2014 a three-second seamless loop, 512\xD7512",
+  colors: HOME,
+  tags: ["house", "search", "property", "listing"],
+  build(l) {
+    l.circle(l.sheet, 256, 270, 200, "soft", { name: "Backdrop" });
+    l.shape(l.sheet, [[256, 110], [406, 236], [106, 236]], "roof", { name: "Roof" });
+    l.rect(l.sheet, 136, 226, 240, 170, "wall", { name: "Walls", stroke: { color: "ink", width: 12 } });
+    l.rect(l.sheet, 226, 306, 60, 90, "accent", { radius: 8, name: "Door" });
+    const windows = [[160, 256], [306, 256], [160, 320], [306, 320]];
+    windows.forEach(([x, y], i) => {
+      l.rect(l.sheet, x, y, 46, 40, "dark", { radius: 6, name: "Window" });
+      const w = l.rect(l.sheet, x, y, 46, 40, "window", { radius: 6, name: "Window light", opacity: 0 });
+      const t = 450 + i * 600;
+      l.opacity(w, [[0, 0, E.hold], [t, 0, E.out], [t + 200, 1, E.hold], [2600, 1, E.inOut], [2900, 0, E.hold], [3e3, 0]]);
+    });
+    const lens = l.box(l.sheet, 250, 250, 170, 170, "Magnifier");
+    l.circle(lens, 62, 62, 48, "wall", { name: "Glass", opacity: 0.35 });
+    l.ring(lens, 62, 62, 50, "ink", 16, { name: "Rim" });
+    l.line(lens, [[100, 100], [150, 150]], "ink", 22, { name: "Handle" });
+    const stops = [[0, 0], [-129, -36], [17, -36], [-129, 28], [17, 28], [0, 0]];
+    l.keys(lens, "translateX", stops.map(([x], i) => [i * 600, x, E.inOut]));
+    l.keys(lens, "translateY", stops.map(([, y], i) => [i * 600, y, E.inOut]));
+    l.keys(lens, "rotation", [[0, 0, E.inOut], [1500, -12, E.inOut], [3e3, 0]]);
+  }
+});
+var homeSaveListing = lottieTemplate({
+  slug: "save-listing",
+  sector: "realestate",
+  role: "micro-interaction",
+  size: "icon",
+  duration: 2400,
+  loop: true,
+  name: "Save listing",
+  description: "Saving a home to a shortlist: on the listing card the heart fills with a pop and a burst, holds, then clears \u2014 a 2.4-second seamless loop, 512\xD7512",
+  colors: HOME,
+  tags: ["favourite", "like", "shortlist", "listing"],
+  build(l) {
+    const card = l.box(l.sheet, 76, 66, 360, 380, "Listing", { fill: "wall", radius: 32, stroke: { color: "soft", width: 4 } });
+    l.vector(card, [{ pts: roundRect(20, 20, 320, 220, 20), closed: true }], "soft", { name: "Photo" });
+    l.shape(card, [[180, 70], [270, 146], [90, 146]], "roof", { name: "Roof" });
+    l.rect(card, 112, 140, 136, 84, "accent", { name: "House" });
+    l.rect(card, 162, 170, 36, 54, "window", { radius: 6, name: "Door" });
+    l.rect(card, 28, 266, 200, 22, "dark", { radius: 11, name: "Price" });
+    l.rect(card, 28, 306, 140, 16, "soft", { radius: 8, name: "Address" });
+    const btn = l.box(card, 262, 34, 64, 64, "Save", { fill: "wall", radius: 32 });
+    l.shape(btn, heart(32, 18, 34), [], { name: "Heart outline", stroke: { color: "roof", width: 5 } });
+    const full = l.shape(btn, heart(32, 18, 34), "roof", { name: "Heart" });
+    l.scale(full, [[0, 0, E.hold], [300, 0, E.pop], [600, 1, E.hold], [1900, 1, E.in], [2150, 0, E.hold], [2400, 0]]);
+    l.scale(btn, [[0, 1, E.hold], [300, 1, E.out], [420, 1.18, E.inOut], [650, 1, E.hold], [2400, 1]]);
+    for (let i = 0; i < 6; i++) {
+      const a = i * 60 * Math.PI / 180;
+      const d = l.circle(card, 294 + 36 * Math.sin(a), 66 - 36 * Math.cos(a), 5, i % 2 ? "window" : "roof", { name: "Burst", opacity: 0 });
+      l.keys(d, "translateX", [[0, 0, E.hold], [350, 0, E.out], [850, 22 * Math.sin(a), E.hold], [2400, 0]]);
+      l.keys(d, "translateY", [[0, 0, E.hold], [350, 0, E.out], [850, -22 * Math.cos(a), E.hold], [2400, 0]]);
+      l.opacity(d, [[0, 0, E.hold], [350, 0, E.out], [420, 1, E.in], [850, 0, E.hold], [2400, 0]]);
+    }
+  }
+});
+var REALESTATE_PACK = [homeSearch, homeSaveListing];
+
+export {
+  homeSearch,
+  homeSaveListing,
+  REALESTATE_PACK
+};

package/dist/chunks/chunk-PDREYVZ2.js

@@ -0,0 +1,336 @@
+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 {
+  LATCH,
+  WEB_STEPS,
+  WEB_TYPE,
+  WINDOW,
+  blinkCaret,
+  card,
+  chip,
+  commandPalette,
+  darkBrand,
+  errorChart,
+  fitHeroGround,
+  flagWindow,
+  heroGround,
+  lamp,
+  marquee,
+  sectionHead
+} from "./chunk-M2BHMDSB.js";
+import {
+  portraitSlot
+} from "./chunk-UA7OECXL.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  compactNav,
+  followTyping,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-DAF5SK5X.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-TF2MO3UA.js";
+import {
+  cutOn
+} from "./chunk-WV6ZTKE7.js";
+import {
+  board,
+  hide,
+  reboard
+} from "./chunk-YHBAWSDX.js";
+import {
+  box
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/style-dark-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Dark SaaS landing page";
+var DURATION = 6e3;
+var RUN = 2300;
+var TYPING = { text: "Query", caret: "Query caret", at: 800, duration: 900 };
+var TEAMS = ["Fernhill", "Cobalt Works", "Juniper", "Tallyho", "Northpass", "Meridian Labs", "Kestrel", "Oakline"];
+var TEAM_CELL = 190;
+var PLANS = [
+  ["Hobby", "One project, five flags, one environment.", "$0"],
+  ["Team", "Unlimited flags, guardrails, three environments, ten seats.", `$${LATCH.team} a month`],
+  ["Scale", "SSO, audit log export, a 99.99% uptime SLA, unlimited seats.", `$${LATCH.scale} a month`]
+];
+var LOG = ["16:58 priya started rollout", "17:02 latch 50%, errors 0.02%", "17:14 latch 100%, no trips"];
+var CODE = ["import { flag } from '@latch/node'", "", "if (await flag('checkout-v2', user)) {", "  return newCheckout(cart)", "}", "return oldCheckout(cart)"];
+var PHONE_WINDOW = 400;
+var PALETTE_H = 217;
+var CODE_BOARD = { w: 560, h: 196 };
+var CHART = { w: 736, h: 300 };
+var SCALES = {
+  desktop: { product: 0.78, palette: 532 / 580, code: 532 / 560, chart: 1 },
+  laptop: { product: 0.72, palette: 492 / 580, code: 492 / 560, chart: 656 / 736 },
+  tablet: { product: 0.84, palette: 1, code: 1.1, chart: 672 / 736 },
+  mobile: { product: 335 / 400, palette: 279 / 580, code: 279 / 560, chart: 335 / 736 }
+};
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 60, params: { duration: 300 } },
+  { layer: "Headline", preset: "words-in", at: 100, params: { duration: 420, amount: 55 } },
+  { layer: "Lead", preset: "rise-in", at: 380, params: { duration: 450 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 500, params: { duration: 400 }, stagger: { delay: 80 } },
+  { layer: "Terms", preset: "fade-in", at: 760, params: { duration: 400 } },
+  { layer: "Window", preset: "drop-in", at: 120, params: { duration: 480 } },
+  // The palette opens, a command is typed and chosen, and it is gone as the rollout starts.
+  { layer: "Palette", preset: "pop-in", at: 560, params: { duration: 240 } },
+  { layer: "Query", preset: "typewriter", at: TYPING.at, params: { duration: TYPING.duration } },
+  cutOn("Chosen command", 1850),
+  { layer: "Run key", preset: "pulse", at: 1950, params: { duration: 300, amount: 0.18 } },
+  { layer: "Palette", preset: "fade-out", at: RUN - 60, params: { duration: 160 } },
+  { layer: "Step fill", preset: "wipe-in", at: RUN, params: { duration: 600, ease: ease.linear }, stagger: { delay: 600 } },
+  { layer: "Threshold", preset: "fade-in", at: RUN + 200, params: { duration: 300 } },
+  { layer: "Error area", preset: "wipe-in", at: RUN, params: { duration: 2400, ease: ease.linear } },
+  { layer: "Error dot", preset: "pop-in", at: RUN + 2400, params: { duration: 300 } },
+  { layer: "Percent figure", preset: "pulse", at: RUN + 2440, params: { duration: 500, amount: 0.05 } },
+  // Down the page: the rollout as a chart, the guardrail switching on, the log filling in, a line of code typed.
+  { layer: "Traffic steps", preset: "wipe-in", at: 900, params: { duration: 2400, ease: ease.linear } },
+  { layer: "Rollout area", preset: "wipe-in", at: 900, params: { duration: 2400, ease: ease.linear } },
+  { layer: "Rollout dot", preset: "pop-in", at: 3300, params: { duration: 300 } },
+  { layer: "Switch on", preset: "fade-in", at: 1500, params: { duration: 200 } },
+  cutOn("Log line", 1900, 320),
+  { layer: "Code typed", preset: "typewriter", at: 2200, params: { duration: 1100 } }
+];
+var counts = [
+  { layer: "Percent figure", at: RUN, duration: 2400, tick: 300, counter: { from: 0, to: 100, suffix: "%" } },
+  { layer: "Evals figure", at: RUN, duration: 2400, ease: ease.linear, counter: { from: 118e4, to: LATCH.evaluations } },
+  { layer: "Checks figure", at: 900, duration: 2400, counter: { from: 11e5, to: LATCH.evaluations } }
+];
+var style_dark_landing_default = defineTemplate({
+  id: "web-saas-style-dark-landing",
+  meta: {
+    name: NAME,
+    description: "A full landing page in the dark precision look: near-black, hairline rules, one lime signal. The hero plays the product on the page timeline (a command palette opens, a command is typed, a staged rollout fills, ticks and draws); under it a logo marquee, a rollout chart that draws with a running counter, product cards with a switch that turns on and a log that fills in, typed SDK code, a customer quote with a photo slot, a plans table, a closing call and a footer. Desktop to phone",
+    category: "web",
+    tags: ["landing page", "saas", "dark", "dark mode", "developer tools", "feature flags", "hero", "command palette", "chart", "counter", "marquee", "code", "testimonial", "pricing", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    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;
+    darkBrand(k, { tagline: "Ship on Friday. Sleep on Saturday." });
+    const s = typeScale(k, { ...WEB_TYPE, "Code 16": { ...MONO, size: 16, fontWeight: 500, lineHeight: 28 } });
+    buttons(k, { style: s("Button 15"), pad: [11, 18], radius: 8 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 104, top: 24 });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    heroGround(k, sheet, 1440, 800);
+    const top = k.stack(sheet, { gap: 56, name: "Top" });
+    nav(k, top, { links: ["Product", "Guardrails", "Pricing", "Docs", "Sign in"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 19") });
+    const hero = k.stack(top, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    const eyebrow = k.stack(copy, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Eyebrow" });
+    lamp(k, eyebrow, 8, "primary", { name: "Eyebrow lamp", breathe: 0.5 });
+    k.text(eyebrow, `V${LATCH.version} \xB7 AUTO-ROLLBACK IS LIVE`, { style: s("Label 13"), color: "onPaper", name: "Eyebrow words" });
+    k.text(copy, "{{brand.tagline}}", { style: s("Display 76"), color: "text", name: "Headline" });
+    k.text(copy, "{{brand.name}} puts every change behind a flag and sends it to a quarter of your traffic, then half, then everyone, and only while your error rate holds. If it climbs, the old code is back in four seconds.", { style: s("Lead 19"), color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Start free" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the docs" }, { name: "CTA quiet" });
+    k.text(copy, `Free for one project. No card. ${LATCH.p99} to check a flag, at p99.`, { style: s("Mono 14"), color: "onPaper", name: "Terms" });
+    const product = board(k, hero, WINDOW.width, WINDOW.height, SCALES.desktop.product, "Product");
+    const win = flagWindow(k, product, { absolute: { x: 0, y: 0 } });
+    const pal = commandPalette(k, product, { query: `roll out ${LATCH.flag}`, absolute: { x: 196, y: 318 }, rows: [
+      { label: `Roll out ${LATCH.flag} to everyone`, key: "enter", on: true },
+      { label: "Pause the rollout", key: "P" },
+      { label: "Roll back to 0%", key: "R" }
+    ] });
+    blinkCaret(k, pal.caret);
+    const teams = k.stack(sheet, { gap: 18, name: "Teams" });
+    k.text(teams, `${LATCH.teams.toLocaleString("en-US")} SMALL TEAMS DEPLOY THIS WAY`, { style: s("Label 13"), color: "onPaper", name: "Teams label" });
+    rule(k, teams, "line", { name: "Teams rule" });
+    marquee(k, teams, { names: TEAMS, item: TEAM_CELL, height: 44, style: s("Wordmark 22"), rate: TEAMS.length * TEAM_CELL / (DURATION / 1e3) });
+    rule(k, teams, "line", { name: "Teams rule" });
+    const how = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "How" });
+    const howCopy = k.stack(how, { width: 400, gap: 24, name: "How copy" });
+    sectionHead(k, howCopy, { label: "ROLLOUTS", title: "Widen it only while it holds.", body: "A rollout moves in four steps. At each one {{brand.name}} waits, reads your error rate against the line you set, and only then lets more traffic through.", s, name: "How head" });
+    const facts = k.stack(howCopy, { name: "Facts" });
+    for (const [label, value] of [["Steps", "25 \xB7 50 \xB7 75 \xB7 100%"], ["Hold at each step", "4 minutes"], ["Rollback", "4 seconds"]]) {
+      rule(k, facts, "line", { name: "Fact rule" });
+      const row = k.stack(facts, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Fact" });
+      k.text(row, label, { style: s("Body 16"), color: "onPaper", autoWidth: true, name: "Fact label" });
+      k.text(row, value, { style: s("Mono 14"), color: "text", autoWidth: true, name: "Fact value" });
+    }
+    const chartBoard = board(k, how, CHART.w, CHART.h + 120, SCALES.desktop.chart, "Rollout");
+    const chartCard = k.stack(chartBoard, { width: CHART.w, fill: "card", radius: 14, padding: 24, gap: 16, stroke: { color: "line", width: 1, align: "INSIDE" }, absolute: { x: 0, y: 0 }, name: "Rollout card" });
+    const chartHead = k.stack(chartCard, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Rollout head" });
+    k.text(chartHead, `${LATCH.flag} \xB7 production`, { style: s("Mono 14"), color: "onCard", autoWidth: true, name: "Rollout flag" });
+    const checks = k.stack(chartHead, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Checks" });
+    k.text(checks, "CHECKS TODAY", { style: s("Label 13"), color: "cardMuted", autoWidth: true, name: "Checks label" });
+    k.text(checks, LATCH.evaluations.toLocaleString("en-US"), { style: s("Mono 14"), color: "signal", width: 84, name: "Checks figure" });
+    const ch = errorChart(k, chartCard, { w: CHART.w - 48, h: CHART.h, id: "Rollout", label: "ROLLBACK AT 1% ERRORS" });
+    const cw = CHART.w - 48, stepW = cw / 4;
+    k.vector(ch.frame, cw, CHART.h, [0.25, 0.5, 0.75, 1].map((f, i) => box(i * stepW, CHART.h * (1 - f * 0.55), stepW - 2, CHART.h * f * 0.55)), k.tint("onCard", 0.07), { name: "Traffic steps", absolute: { x: 0, y: 0 } });
+    const axis = k.stack(chartCard, { direction: "HORIZONTAL", name: "Axis" });
+    for (const t of ["16:58 \xB7 25%", "17:02 \xB7 50%", "17:06 \xB7 75%", "17:10 \xB7 100%"]) k.text(axis, t, { style: s("Label 13"), color: "cardMuted", name: "Axis label" });
+    const parts = k.stack(sheet, { gap: 40, name: "Parts" });
+    sectionHead(k, parts, { label: "THE PRODUCT", title: "Built for the person on call.", s, name: "Parts head" });
+    const bento = k.stack(parts, { direction: "HORIZONTAL", gap: 24, name: "Bento" });
+    const c1 = card(k, bento, { name: "Palette card", gap: 12 });
+    k.patch(c1, { layoutSizingVertical: "FILL", primaryAxisAlignItems: "SPACE_BETWEEN" });
+    const c1Words = k.stack(c1, { gap: 12, name: "Card words" });
+    k.text(c1Words, "Every action is one command.", { style: s("Card title 22"), color: "onCard", name: "Card title" });
+    k.text(c1Words, "Roll out, pause or roll back without leaving the keyboard. The palette knows your flags and your environments.", { style: s("Body 16"), color: "cardMuted", name: "Card body" });
+    const demo = board(k, c1, 580, PALETTE_H, SCALES.desktop.palette, "Palette demo");
+    const dp = commandPalette(k, demo, { query: "pause", absolute: { x: 0, y: 0 }, name: "Demo palette", rows: [
+      { label: `Pause the rollout of ${LATCH.flag}`, key: "enter", on: true },
+      { label: "Pause every rollout in staging", key: "S" },
+      { label: "Open the audit log", key: "L" }
+    ] });
+    k.patch(dp.query, { name: "Demo query" });
+    k.patch(dp.caret, { name: "Demo caret", visible: false });
+    for (const [from, to] of [["Chosen command", "Demo chosen"], ["Run key", "Demo key"]]) for (const id of k.named(dp.panel, from)) k.patch(id, { name: to });
+    k.patch(dp.panel, { effects: [] });
+    const right = k.stack(bento, { gap: 24, name: "Bento right" });
+    const c2 = card(k, right, { name: "Guardrail card", gap: 12 });
+    k.text(c2, "A line it will not cross.", { style: s("Card title 22"), color: "onCard", name: "Card title" });
+    k.text(c2, "Name the metric and the limit. Past it, the flag turns itself off and tells you afterwards.", { style: s("Body 16"), color: "cardMuted", name: "Card body" });
+    const sw = k.stack(c2, { direction: "HORIZONTAL", gap: 14, align: "CENTER", fill: "well", radius: 10, padding: { top: 12, right: 14, bottom: 12, left: 14 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Switch row" });
+    const track = k.stack(sw, { direction: "HORIZONTAL", width: 44, height: 24, radius: 12, fill: "edge", name: "Switch" });
+    k.rect(track, 44, 24, "signal", { radius: 12, name: "Switch on", absolute: { x: 0, y: 0 } });
+    const knob = k.ellipse(track, 18, "signalInk", { name: "Switch knob", absolute: { x: 23, y: 3 } });
+    k.text(sw, "Roll back at 1% errors", { style: s("Mono 14"), color: "onCard", name: "Switch label" });
+    const c3 = card(k, right, { name: "Audit card", gap: 12 });
+    k.text(c3, "Who flipped what, and when.", { style: s("Card title 22"), color: "onCard", name: "Card title" });
+    const log = k.stack(c3, { gap: 6, fill: "well", radius: 10, padding: { top: 12, right: 14, bottom: 12, left: 14 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Log" });
+    for (const l of LOG) k.text(log, l, { style: s("Mono 14"), color: "cardMuted", name: "Log line" });
+    const code = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Code" });
+    const codeCard = card(k, code, { name: "Code card", pad: 28 });
+    const cb = board(k, codeCard, CODE_BOARD.w, CODE_BOARD.h, SCALES.desktop.code, "Code board");
+    const lines = k.stack(cb, { width: CODE_BOARD.w, absolute: { x: 0, y: 0 }, name: "Code lines" });
+    k.text(lines, "// checkout.ts", { style: s("Code 16"), color: "cardMuted", name: "Code comment" });
+    CODE.forEach((l, i) => {
+      if (l) k.text(lines, l, { style: s("Code 16"), color: i === 2 ? "signal" : "onCard", name: i === 2 ? "Code typed" : "Code line" });
+      else k.rect(lines, 8, 28, "card", { name: "Code gap" });
+    });
+    const codeCopy = k.stack(code, { width: 440, gap: 24, name: "Code copy" });
+    sectionHead(k, codeCopy, { label: "THE SDK", title: "One if statement.", body: "Wrap the new path in a flag and deploy it dark. Nothing changes for anyone until you say so, and the check costs 4 ms.", s, name: "Code head" });
+    const sdks = k.stack(codeCopy, { direction: "HORIZONTAL", gap: 8, wrap: true, name: "SDKs" });
+    for (const n of ["Node", "Python", "Go", "Ruby", "React", "Swift"]) chip(k, sdks, n, { name: "SDK", ink: "onPaper" });
+    const quote = card(k, sheet, { name: "Quote card", direction: "HORIZONTAL", gap: 36, pad: 40, align: "CENTER" });
+    portraitSlot(k, quote, 132, 132, { radius: 14, ground: "raised", skin: "edge", top: "line", halo: "signal", name: "Portrait", photo: "Customer photo" });
+    const words = k.stack(quote, { gap: 16, name: "Quote words" });
+    k.text(words, "\u201CWe shipped the new checkout at five on a Friday. {{brand.name}} took it to half our traffic, saw the errors climb and pulled it back before I had closed my laptop.\u201D", { style: s("Quote 28"), color: "onCard", name: "Quote" });
+    k.text(words, "PRIYA RAMAN \xB7 CTO, FERNHILL", { style: s("Label 13"), color: "cardMuted", name: "Quote by" });
+    const proof = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "well", radius: 8, padding: { top: 6, right: 12, bottom: 6, left: 12 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Quote proof" });
+    lamp(k, proof, 8, "warn", { name: "Proof lamp" });
+    k.text(proof, "rolled back in 4 s \xB7 0 paged", { style: s("Mono 14"), color: "onCard", autoWidth: true, name: "Proof words" });
+    const pricing = k.stack(sheet, { gap: 32, name: "Pricing" });
+    sectionHead(k, pricing, { label: "PRICING", title: "Free until it matters.", s, name: "Pricing head" });
+    const table = k.stack(pricing, { name: "Plans" });
+    for (const [name, what, price] of PLANS) {
+      rule(k, table, "line", { name: "Plan rule" });
+      const row = k.stack(table, { direction: "HORIZONTAL", gap: 24, align: "CENTER", padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Plan row" });
+      k.text(row, name, { style: s("Plan 18"), color: "text", width: 160, name: "Plan name" });
+      k.text(row, what, { style: s("Body 16"), color: "onPaper", name: "Plan what" });
+      k.text(row, price, { style: s("Mono 14"), color: "text", width: 150, align: "RIGHT", name: "Plan price" });
+    }
+    rule(k, table, "line", { name: "Plan rule" });
+    k.instance(pricing, "Button quiet", { Label: "Compare the plans" }, { name: "Plans link" });
+    const close = card(k, sheet, { name: "Close", direction: "HORIZONTAL", gap: 32, pad: 48, align: "CENTER" });
+    const closeWords = k.stack(close, { gap: 10, name: "Close words" });
+    k.text(closeWords, "Ship on Friday.", { style: s("Display 64"), color: "onCard", name: "Close title" });
+    k.text(closeWords, "Your first project is free, and the first flag takes about ten minutes.", { style: s("Body 16"), color: "cardMuted", name: "Close line" });
+    const closeSide = k.stack(close, { width: 132, align: "MAX", name: "Close side" });
+    k.instance(closeSide, "Button", { Label: "Start free" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: LATCH.pitch,
+      legal: "\xA9 2026 {{brand.name}}. Made for small teams who deploy on any day they like.",
+      columns: [["Product", ["Rollouts", "Guardrails", "Audit log", "Changelog"]], ["Developers", ["Docs", "SDKs", "API", "Status"]], ["Company", ["Pricing", "Security", "Contact"]]],
+      brandStyle: s("Brand 19"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 14"),
+      ruleColor: "line"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.animate(win.chart.line, "trim.end", [{ t: RUN, v: 0, ease: ease.linear }, { t: RUN + 2400, v: 1 }]);
+    k.animate(ch.line, "trim.end", [{ t: 900, v: 0, ease: ease.linear }, { t: 3300, v: 1 }]);
+    k.animate(knob, "translateX", [{ t: 1500, v: -20, ease: ease.out("expo") }, { t: 1760, v: 0 }]);
+    followTyping(k, sheet, TYPING);
+    respond(k, sheet, s, {
+      stack: ["Hero", "How", "Bento", "Code", "Footer columns"],
+      stackMobile: ["Quote card", "Plan row", "Close"],
+      restyle: WEB_STEPS,
+      hide: { mobile: ["Nav links"], tablet: [] },
+      gap: { tablet: 80, mobile: 64 },
+      typing: [TYPING],
+      tweak: (kit, id, size) => {
+        const sc = SCALES[size];
+        fitHeroGround(kit, id, size === "mobile" ? 900 : size === "tablet" ? 1100 : 800);
+        if (size === "mobile") for (const pid of kit.named(id, "Product")) {
+          const mw = PHONE_WINDOW, cw2 = mw - 52, from = WINDOW.width - WINDOW.side - 1 - 52, f = cw2 / from;
+          hide(kit, pid, ["Sidebar", "Sidebar rule", "Stats", "Window dots"]);
+          for (const row of kit.named(pid, "Chosen command")) for (const l of kit.named(row, "Command label")) kit.patch(l, { characters: "Roll out to everyone" });
+          for (const w of kit.named(pid, "Window")) kit.patch(w, { width: mw });
+          kit.patch(pid, { width: mw });
+          for (const p of kit.named(pid, "Palette")) kit.patch(p, { width: mw - 16, x: 8 });
+          for (const c of kit.named(pid, "Chart")) {
+            kit.patch(c, { width: cw2 });
+            for (const nm of ["Threshold", "Threshold tag"]) for (const t of kit.named(c, nm)) kit.patch(t, { width: cw2 });
+            for (const nm of ["Error area", "Error line"]) for (const v of kit.named(c, nm)) kit.patch(v, { scaleX: f, x: Math.round(-(from - 14) / 2 * (1 - f)) });
+            for (const d of kit.named(c, "Error dot")) kit.patch(d, { x: Math.round((kit.node(d).x + 6) * f - 6) });
+          }
+        }
+        reboard(kit, id, "Product", sc.product);
+        reboard(kit, id, "Rollout", sc.chart);
+        reboard(kit, id, "Palette demo", sc.palette);
+        reboard(kit, id, "Code board", sc.code);
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          for (const name of ["How copy", "Code copy"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Palette card")) kit.patch(n, { layoutSizingVertical: "HUG" });
+          for (const n of kit.named(id, "Top")) kit.patch(n, { itemSpacing: 40 });
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Docs", "Sign in"], 20);
+        if (size === "mobile") {
+          for (const bar of kit.named(id, "Nav")) for (const n of kit.named(bar, "Brand name")) kit.patch(n, { visible: true });
+          for (const name of ["Quote card", "Close"]) for (const n of kit.named(id, name)) kit.patch(n, { padding: { top: 28, right: 24, bottom: 28, left: 24 }, itemSpacing: 20 });
+          for (const n of kit.named(id, "Plan row")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Plan price")) kit.patch(n, { textAlign: "LEFT" });
+          for (const n of kit.named(id, "Close side")) kit.patch(n, { counterAxisAlignItems: "MIN" });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  style_dark_landing_default
+};

package/dist/chunks/chunk-PE2FC6BK.js

@@ -0,0 +1,152 @@
+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 {
+  violetInk
+} from "./chunk-ZVFOMLX6.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-GX4O3SUN.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/scenes/story-ad.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var back = ease.back(1.9);
+var scenes = [
+  { sheet: "Hook", cues: [
+    { layer: "Sun", preset: "pop-in", at: 0, params: { duration: 700, ease: back } },
+    { layer: ["Summer", "Sale"], preset: "rise-in", at: 200, params: { duration: 700 }, stagger: { delay: 160, order: "selection" } },
+    { layer: "When", preset: "fade-in", at: 800, params: { duration: 500 } }
+  ] },
+  { sheet: "Offer", transition: into("CIRCLE_WIPE", 700, { interp: ease.inOut("expo"), center: { x: 0.5, y: 0.3 } }), cues: [
+    { layer: "Up to", preset: "fade-in", at: 100, params: { duration: 400 } },
+    { layer: "Percent", preset: "pop-in", at: 250, params: { duration: 700, ease: back, amount: 0.4 } },
+    { layer: "Off", preset: "rise-in", at: 600, params: { duration: 600, ease: ease.out("expo") } },
+    { layer: "Percent", preset: "pulse", at: 1300, params: { duration: 800, amount: 0.05 } }
+  ] },
+  { sheet: "Picks", transition: into("IRIS", 600, { center: { x: 0.5, y: 0.45 } }), cues: [
+    { layer: "Title", preset: "rise-in", at: 100, params: { duration: 600 } },
+    { layer: "Product card", preset: "slide-in", at: 350, params: { duration: 650, direction: "right" }, stagger: { delay: 150, order: "index" } }
+  ] },
+  { sheet: "Perk", transition: into("ZOOM_THROUGH", 500), cues: [
+    { layer: "Badge", preset: "pop-in", at: 150, params: { duration: 650, ease: back } },
+    { layer: "Badge", preset: "wobble", at: 900, params: { duration: 800, amount: 8 } },
+    { layer: ["Shipping", "Over"], preset: "rise-in", at: 450, params: { duration: 600 }, stagger: { delay: 140, order: "selection" } }
+  ] },
+  { sheet: "Call to action", transition: into("PUSH_FROM_RIGHT", 500), cues: [
+    { layer: "Headline", preset: "rise-in", at: 100, params: { duration: 600 } },
+    { layer: "Button", preset: "pop-in", at: 450, params: { duration: 600, ease: back } },
+    { layer: "Button", preset: "pulse", at: 1300, params: { duration: 900, amount: 0.06 } },
+    { layer: "Handle", preset: "fade-in", at: 800, params: { duration: 500 } }
+  ] }
+];
+var DURATIONS = [2e3, 2200, 2400, 2e3, 2400];
+var GROUNDS = ["paper", "accent", "paper", "sky", "primary"];
+var GAPS = [24, 8, 64, 28, 56];
+var story_ad_default = defineTemplate({
+  id: "motion-story-ad",
+  meta: {
+    name: "Story ad",
+    description: "A 9:16 story ad in five scenes \u2014 hook, offer, picks, free shipping, call to action \u2014 each animated on its own timeline and sequenced by a composition: circle wipe, iris, zoom-through and push between them. 1080\xD71920 at 30 fps, about 9 seconds.",
+    category: "animation",
+    tags: ["animation", "story", "instagram", "tiktok", "ad", "sale", "scenes", "transitions"],
+    platforms: ["instagram", "tiktok", "facebook"],
+    formats: ["story", "ad"],
+    useCases: ["sale"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  motion: { scenes },
+  build() {
+    const k = new Kit("Story ad", preset("ig-story"));
+    k.brand({ primary: "#14110F", text: "#14110F", onSun: "#14110F", onAccent: "#FFFFFF", accent: "#FF5A36", paper: "#FFF4E8", sun: "#FFC53D", sky: "#2E6BFF", onDark: "#FFFFFF", muted: "#7A6F66", onPrimary: "#7A6F66", onPaper: violetInk(hex("#FF5A36"), hex("#FFF4E8"), 3) }, { handle: "@yourshop" });
+    k.patch(k.pageId, { name: "Story ad" });
+    k.textStyle("Mega 300", { size: 300, fontWeight: 900, lineHeight: 300, letterSpacing: -8 });
+    k.textStyle("Display 176", { size: 176, fontWeight: 900, lineHeight: 176, letterSpacing: -4 });
+    k.textStyle("Headline 88", { size: 88, fontWeight: 800, lineHeight: 96, letterSpacing: -2 });
+    k.textStyle("Title 44", { size: 44, fontWeight: 700, lineHeight: 52 });
+    k.textStyle("Body 40", { size: 40, fontWeight: 500, lineHeight: 52 });
+    k.textStyle("Label 36", { size: 36, fontWeight: 800, lineHeight: 44, letterSpacing: 4 });
+    const shadow = (blur, y, a) => ({ type: "DROP_SHADOW", color: k.color("primary", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+    k.component("Product card", {
+      direction: "HORIZONTAL",
+      width: 760,
+      gap: 36,
+      align: "CENTER",
+      padding: { top: 28, right: 48, bottom: 28, left: 28 },
+      fill: "onDark",
+      radius: 36,
+      effects: [shadow(40, 16, 0.12)],
+      description: "A product with its price: swatch, name, price.",
+      props: { Name: "Linen shirt", Price: "$39" }
+    }, (id) => {
+      k.ellipse(id, 112, "sun", { name: "Swatch" });
+      const copy = k.stack(id, { width: "HUG", gap: 4, name: "Copy" });
+      k.propText(copy, "Name", { style: "Title 44", color: "primary", autoWidth: true });
+      k.propText(copy, "Price", { style: "Body 40", color: "muted", autoWidth: true });
+    });
+    k.component("Button", {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      justify: "CENTER",
+      align: "CENTER",
+      padding: { top: 36, right: 88, bottom: 36, left: 88 },
+      fill: "accent",
+      radius: 999,
+      effects: [shadow(48, 20, 0.3)],
+      description: "The call to action.",
+      props: { Label: "Shop now" }
+    }, (id) => {
+      k.propText(id, "Label", { style: "Label 36", color: "onAccent", autoWidth: true });
+    });
+    const sheets = sceneSheets(k, "ig-story", scenes.map((s) => s.sheet));
+    sheets.forEach((id, i) => {
+      k.flowSheet(id, GAPS[i], { top: 120, right: 96, bottom: 120, left: 96 }, GROUNDS[i], "CENTER", "CENTER");
+      k.timeline(id, { duration: DURATIONS[i], fps: 30 });
+    });
+    const [hook, offer, picks, perk, cta] = sheets;
+    const text = (sheet, chars, style, color, name) => k.text(sheet, chars, { style, color, autoWidth: true, name });
+    k.ellipse(hook, 360, "sun", { name: "Sun" });
+    text(hook, "SUMMER", "Display 176", "text", "Summer");
+    text(hook, "SALE", "Display 176", "onPaper", "Sale");
+    text(hook, "This weekend only", "Body 40", "muted", "When");
+    text(offer, "UP TO", "Label 36", "onAccent", "Up to");
+    text(offer, "50%", "Mega 300", "onAccent", "Percent");
+    text(offer, "off everything", "Headline 88", "onAccent", "Off");
+    text(picks, "Our summer picks", "Headline 88", "text", "Title");
+    const list = k.stack(picks, { width: "HUG", gap: 36, align: "CENTER", name: "Picks" });
+    for (const [name, price] of [["Linen shirt", "$39"], ["Straw hat", "$24"], ["Beach tote", "$45"]]) k.instance(list, "Product card", { Name: name, Price: price });
+    const badge = k.stack(perk, { width: 480, height: 480, justify: "CENTER", align: "CENTER", fill: "sun", radius: 240, name: "Badge" });
+    text(badge, "FREE", "Display 176", "onSun", "Free");
+    text(perk, "shipping", "Headline 88", "onDark", "Shipping");
+    text(perk, "on every order over $50", "Body 40", "onDark", "Over");
+    text(cta, "Shop the sale", "Headline 88", "onDark", "Headline");
+    k.instance(cta, "Button", { Label: "Shop now" });
+    text(cta, "{{brand.handle}}", "Body 40", "onPrimary", "Handle");
+    playScenes(k, "comp-story", "Story ad", sheets, scenes, "primary");
+    k.setCover(hook);
+    return k.finish();
+  }
+});
+
+export {
+  story_ad_default
+};