@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-LM6B56PY.js

@@ -0,0 +1,338 @@
+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-J6JR4UVA.js";
+import {
+  portraitSlot
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  compactNav,
+  followTyping,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  cutOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  board,
+  hide,
+  reboard
+} from "./chunk-LWSZATOL.js";
+import {
+  box
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.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"]);
+          kit.textStyle("UI 15", { size: 15, fontWeight: 500, letterSpacing: -0.2, lineHeight: 20 });
+          for (const l of kit.named(pid, "Command label")) kit.restyle(l, "UI 15");
+          hide(kit, pid, ["Run key", "Key"]);
+          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-LNJLKT7A.js

@@ -0,0 +1,78 @@
+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 {
+  restyleAll,
+  storyCut,
+  titleSafe
+} from "./chunk-3YBY6VW3.js";
+import {
+  logoBadge,
+  outro,
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/kinetic/lines.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Logo", preset: "fade-in", at: 0 },
+  { layer: "Lines", preset: "lines-in", at: 300, params: { duration: 700, amount: 320 } },
+  { layer: "Dish", preset: "fade-in", at: 1700, params: { duration: 500 } },
+  { layer: "Recipe chip", preset: "pop-in", at: 2e3 },
+  { layer: "Lines", preset: "lines-out", at: 5400, params: { duration: 450, amount: 120 } },
+  outro(["Logo", "Dish", "Recipe chip"], 5600)
+];
+var lines_default = defineTemplate({
+  id: "motion-kinetic-lines",
+  meta: {
+    name: "Line-by-line reveal",
+    description: "A recipe sold in three short lines, each rising in on its own beat, then the dish and a \u201Crecipe in bio\u201D chip \u2014 7 seconds, 16:9 with a 9:16 story cut",
+    category: "animation",
+    tags: ["animation", "kinetic type", "lines", "food", "recipe", "reel"],
+    platforms: ["instagram", "tiktok", "youtube", "pinterest"],
+    formats: ["video", "story", "reel", "short"],
+    useCases: ["tips", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Line-by-line reveal", preset("video-1080p"));
+    k.brand(
+      { paper: "#1E3A2F", text: "#F5F0E6", onPaper: "#BCD2C4", accent: "#F2C14E", onAccent: "#1E3A2F", card: "#2C5242" },
+      { dish: "Lemon, garlic and chilli spaghetti \xB7 Pantry Club" }
+    );
+    k.textStyle("Lines 136", { size: 136, fontWeight: 900, letterSpacing: -4, lineHeight: 144, textAlign: "CENTER" });
+    k.textStyle("Lines 120", { size: 120, fontWeight: 900, letterSpacing: -3, lineHeight: 128, textAlign: "CENTER" });
+    k.textStyle("Dish 42", { size: 42, fontWeight: 600, lineHeight: 52, textAlign: "CENTER" });
+    k.textStyle("Chip 32", { size: 32, fontWeight: 800, letterSpacing: 2, lineHeight: 40 });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 32", label: "RECIPE IN BIO", pad: [14, 34] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, titleSafe(), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 7e3, fps: 30 });
+    logoBadge(k, sheet, { fill: "card", size: 64, name: "Logo" });
+    k.text(sheet, "Three ingredients.\nTen minutes.\nOne pan.", { style: "Lines 136", color: "text", name: "Lines" });
+    k.text(sheet, "{{brand.dish}}", { style: "Dish 42", color: "onPaper", name: "Dish" });
+    k.instance(sheet, "Chip", { Label: "RECIPE IN BIO" }, { name: "Recipe chip" });
+    k.cues(sheet, cues);
+    k.variants(sheet, storyCut((kit, id) => restyleAll(kit, id, ["Lines"], "Lines 120")));
+    return k.finish();
+  }
+});
+
+export {
+  lines_default
+};

package/dist/chunks/chunk-LNZI24IA.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 {
+  COLUMN,
+  float,
+  lineGrid,
+  redrawLines,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  productWindow
+} from "./chunk-MJ3CSPFJ.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  hide,
+  patchAll,
+  redraw,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  box
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/saas-ai-prompt.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 5, 6);
+var { beat } = S;
+var DROP = 12;
+var SCAN = { only: "y", stepY: 8, weight: 3, opacity: 0.45, name: "Scanlines" };
+function oldLog(w, h) {
+  const log = [];
+  const LEN = [0.42, 0.18, 0.63, 0.3, 0.51, 0.24, 0.7, 0.36, 0.12, 0.57, 0.45, 0.27];
+  for (let r = 0, y = 34; y < h - 20; r++, y += 44) {
+    const indent = r * 5 % 4 === 0 ? 0 : r % 3 * 46;
+    log.push(box(60 + indent, y, 24, 14), box(102 + indent, y, (w - 120) * LEN[r % LEN.length], 14));
+    if (r % 4 === 1) log.push(box(102 + indent + (w - 120) * LEN[r % LEN.length] + 20, y, 120, 14));
+  }
+  return log;
+}
+var STAGE = { width: COLUMN, height: 720 };
+var QUESTION = "> weekly signups by plan, last 8 weeks";
+var SQL = ["SELECT plan,", "  date_trunc('week', created_at) AS wk,", "  count(*) AS signups", "FROM users", "WHERE created_at > now() - interval '8 weeks'", "GROUP BY 1, 2 ORDER BY 2;"].join("\n");
+var ROWS = [["starter", 1204], ["pro", 742], ["team", 318]];
+var swaps = [captionSwap(["Type a plain question.", "It writes real SQL.", "Answered in 41 milliseconds.", "One command to start."], beat(1), S.duration - 30)];
+var counts = [{ layer: "Thinking", at: beat(5.5), duration: beat(2), counter: { from: 0, to: 14, prefix: "~ reading schema \xB7 ", suffix: " tables \xB7 3 joins" }, ease: ease.linear }];
+var cues = [
+  { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Hook", preset: "typewriter", at: 0, params: { duration: 800 } },
+  { layer: "Stage", preset: "fade-in", at: 350, params: { duration: 400 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(1), params: { duration: 300 } },
+  { layer: "Question", preset: "typewriter", at: beat(2), params: { duration: beat(3) } },
+  { layer: "Thinking", preset: "fade-in", at: beat(5.5), params: { duration: 200 } },
+  { layer: "Thinking", preset: "flash", at: beat(6), params: { duration: beat(1.5) } },
+  { layer: "Query", preset: "typewriter", at: beat(7.5), params: { duration: beat(4) } },
+  { layer: "Result head", preset: "fade-in", at: beat(DROP), params: { duration: 200 } },
+  { layer: "Result row", preset: "fade-in", at: beat(DROP), params: { duration: 250 }, stagger: { delay: Math.round(beat(1) / 2) } },
+  { layer: "Result bar", preset: "wipe-in", at: beat(DROP), params: { duration: beat(2), direction: "right" }, stagger: { delay: Math.round(beat(1) / 2) } },
+  { layer: "Status", preset: "fade-in", at: beat(DROP + 3), params: { duration: 250 } },
+  { layer: "Call", preset: "pop-in", at: beat(18), params: { duration: 400 } },
+  { layer: "Call", preset: "pulse", at: beat(20), params: { duration: 600, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: beat(22), params: { duration: 500, amount: 0.05 } }
+];
+var saas_ai_prompt_default = defineTemplate({
+  id: "motion-saas-ai-prompt",
+  meta: {
+    name: "SaaS short: AI prompt to result",
+    description: "A 12-second reel for an AI tool, as an amber terminal: a plain-English prompt is typed, a thinking line counts what it has read, the result streams in a character at a time and the answer prints with bars drawing across as the music drops. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "ai", "prompt", "terminal", "monospace", "typewriter", "developer", "sql", "captions", "music", "audio", "reel", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "demo", "video"],
+    useCases: ["launch", "announcement", "education"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: AI prompt to result", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#0D0A05", text: "#FFC14D", onPaper: "#C99A45", primary: "#FFB000", onPrimary: "#140D00", card: "#161108", onCard: "#FFD98A" },
+      { name: "Querent", hook: "Ask your database\nin plain English." }
+    );
+    k.palette({ line: "#3B2D13", bar: "#1F180B", dim: "#B98B36", ok: "#A6E36B" });
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Hook 72", { ...mono, size: 72, fontWeight: 800, letterSpacing: -2.4, lineHeight: 80 });
+    k.textStyle("Hook 50", { ...mono, size: 50, fontWeight: 800, letterSpacing: -1.6, lineHeight: 56 });
+    k.textStyle("Hook 64", { ...mono, size: 64, fontWeight: 800, letterSpacing: -2.2, lineHeight: 72 });
+    k.textStyle("Kicker 22", { ...mono, size: 22, fontWeight: 600, letterSpacing: 1, lineHeight: 28 });
+    k.textStyle("Caption 36", { ...mono, size: 36, fontWeight: 700, letterSpacing: -1, lineHeight: 44 });
+    k.textStyle("Button 30", { ...mono, size: 30, fontWeight: 800, letterSpacing: -0.6, lineHeight: 38 });
+    k.textStyle("Term 32", { ...mono, size: 32, fontWeight: 700, letterSpacing: -0.8, lineHeight: 40 });
+    k.textStyle("Term 25", { ...mono, size: 25, fontWeight: 500, letterSpacing: -0.4, lineHeight: 34 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "$ npx querent init", pad: [20, 30], radius: 4 });
+    const sheet = reelSheet(k, S, { name: "Prompt to result", gap: 24 });
+    k.vector(sheet, 1080, 1920, oldLog(1080, 1920), k.tint("text", 0.13), { name: "Old log", absolute: { x: 0, y: 0 } });
+    lineGrid(k, sheet, "paper", SCAN);
+    k.text(sheet, "{{brand.name}} 2.1 \xB7 tty1 \xB7 connected to prod-replica", { style: "Kicker 22", color: "onPaper", name: "Kicker" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 72", color: "text", name: "Hook" });
+    const look = { fill: "card", bar: "bar", titleStyle: "Kicker 22", titleInk: "dim", dots: "line", radius: 12, barHeight: 54, rule: "line", stroke: { color: "line", width: 2, align: "OUTSIDE" }, effects: [shadow(k, "primary", 0.1, 0, 60)] };
+    const { win, body, bodyHeight } = productWindow(k, sheet, { ...STAGE, title: "querent \u2014 prod-replica \u2014 96\xD728", look, name: "Stage" });
+    void win;
+    const term = k.stack(body, { height: bodyHeight, padding: { top: 26, right: 28, bottom: 24, left: 28 }, gap: 16, name: "Terminal" });
+    k.text(term, QUESTION, { style: "Term 32", color: "onCard", name: "Question" });
+    k.text(term, "~ reading schema \xB7 14 tables \xB7 3 joins", { style: "Term 25", color: "dim", name: "Thinking" });
+    k.text(term, SQL, { style: "Term 25", color: "onCard", name: "Query" });
+    k.rect(term, "FILL", 2, "line", { name: "Result rule" });
+    k.text(term, "plan      signups, 8 weeks", { style: "Term 25", color: "dim", name: "Result head" });
+    for (const [plan, n] of ROWS) {
+      const row = k.stack(term, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Result row" });
+      k.text(row, plan, { style: "Term 32", color: "onCard", width: 160, name: "Plan" });
+      const track = k.stack(row, { width: 400, height: 34, name: "Bar track" });
+      k.rect(track, Math.round(400 * n / 1204), 34, "primary", { name: "Result bar" });
+      k.text(row, n.toLocaleString("en-US"), { style: "Term 32", color: "onCard", autoWidth: true, name: "Signups" });
+    }
+    k.text(term, "3 rows \xB7 41 ms \xB7 read-only", { style: "Term 25", color: "ok", name: "Status" });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 36", fill: "card", ink: "onCard", radius: 4, pad: [16, 24], stroke: { color: "line", width: 2, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "$ npx querent init" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 54, right: 118, bottom: 54, left: 118 } });
+        hide(kit, id, ["Kicker"]);
+        restyle(kit, id, "Hook", "Hook 50");
+        patchAll(kit, id, "Stage", { height: 650 });
+        patchAll(kit, id, "Screen", { height: 650 - 56 });
+        patchAll(kit, id, "Terminal", { height: 650 - 56, itemSpacing: 10, counterAxisSpacing: 10, padding: { top: 16, right: 28, bottom: 14, left: 28 } });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+      }
+    }), wideCut(700, (kit, id, right) => {
+      const scale = right.width / STAGE.width;
+      redraw(kit, id, "Old log", oldLog);
+      redrawLines(kit, id, SCAN);
+      restyle(kit, id, "Hook", "Hook 64");
+      float(kit, id, "Stage", right.x, right.y + Math.round((right.height - STAGE.height * scale) / 2), { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_ai_prompt_default
+};