@popcraft/kit 0.27.0 → 0.28.0

package/dist/chunks/chunk-FPTSX43B.js

@@ -1,260 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  TESSERA,
-  assemble,
-  avatarSlice,
-  bentoBrand,
-  calendarSlice,
-  cellBox,
-  chartSlice,
-  chatSlice,
-  drawChart,
-  fillWeek,
-  fitAvatars,
-  fitCalendar,
-  fitChart,
-  fitSwitch,
-  flip,
-  grot,
-  lockup,
-  nowDrift,
-  placeTiles,
-  radiusFor,
-  switchSlice,
-  tile,
-  tileLabel,
-  typeOut
-} from "./chunk-54AACP3R.js";
-import {
-  section
-} from "./chunk-3TBNWHDN.js";
-import {
-  captionSwap
-} from "./chunk-C7BYFVZT.js";
-import {
-  pill
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  Kit,
-  preset
-} from "./chunk-6QHAQLJ4.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/style-bento-launch-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("edm", 0, 8);
-var { beat } = S;
-var NAME = "Bento SaaS launch reel";
-var DROP = beat(16);
-var END = beat(25);
-var TILES = ["Chat tile", "Stat tile", "Switch tile", "Week tile", "Team tile", "Chart tile"];
-var LAYOUT = {
-  // Words stay inside x 64–940 and above y 1440: the right column holds short labels, the bottom two rows only drawings.
-  story: {
-    grid: { x: 64, y: 520, w: 952, h: 1336, cols: 4, rows: 8, gap: 16 },
-    top: { x: 64, y: 250, w: 876 },
-    pad: 28,
-    caption: "Caption 64",
-    stat: "Stat 124",
-    reply: "Reply 42",
-    story: true,
-    cells: { "Chat tile": { c: 0, r: 0, cw: 3, rh: 4 }, "Switch tile": { c: 3, r: 0, cw: 1, rh: 2 }, "Team tile": { c: 3, r: 2, cw: 1, rh: 2 }, "Week tile": { c: 0, r: 4, cw: 2, rh: 4 }, "Stat tile": { c: 2, r: 4, cw: 2, rh: 2 }, "Chart tile": { c: 2, r: 6, cw: 2, rh: 2 } }
-  },
-  post: {
-    grid: { x: 48, y: 196, w: 984, h: 836, cols: 4, rows: 5, gap: 14 },
-    top: { x: 48, y: 44, w: 984 },
-    pad: 22,
-    caption: "Caption 52",
-    stat: "Stat 72",
-    reply: "Reply 28",
-    cells: { "Chat tile": { c: 0, r: 0, cw: 3, rh: 3 }, "Switch tile": { c: 3, r: 0, cw: 1, rh: 2 }, "Team tile": { c: 3, r: 2, cw: 1, rh: 1 }, "Week tile": { c: 0, r: 3, cw: 2, rh: 2 }, "Stat tile": { c: 2, r: 3, cw: 1, rh: 2 }, "Chart tile": { c: 3, r: 3, cw: 1, rh: 2 } }
-  },
-  portrait: {
-    grid: { x: 48, y: 204, w: 984, h: 1098, cols: 4, rows: 6, gap: 14 },
-    top: { x: 48, y: 52, w: 984 },
-    pad: 24,
-    caption: "Caption 56",
-    stat: "Stat 100",
-    reply: "Reply 34",
-    cells: { "Chat tile": { c: 0, r: 0, cw: 3, rh: 3 }, "Switch tile": { c: 3, r: 0, cw: 1, rh: 2 }, "Team tile": { c: 3, r: 2, cw: 1, rh: 1 }, "Week tile": { c: 0, r: 3, cw: 2, rh: 3 }, "Stat tile": { c: 2, r: 3, cw: 2, rh: 2 }, "Chart tile": { c: 2, r: 5, cw: 2, rh: 1 } }
-  },
-  // Landscape: the head in the top-left cell, the hero tall in the middle, every cell filled.
-  wide: {
-    grid: { x: 96, y: 64, w: 1728, h: 952, cols: 6, rows: 4, gap: 18 },
-    top: { x: 96, y: 72, w: 564 },
-    pad: 28,
-    caption: "Caption 56",
-    stat: "Stat 84",
-    reply: "Reply 38",
-    cells: { "Chat tile": { c: 2, r: 0, cw: 2, rh: 3 }, "Switch tile": { c: 4, r: 0, cw: 1, rh: 1 }, "Team tile": { c: 5, r: 0, cw: 1, rh: 1 }, "Week tile": { c: 0, r: 1, cw: 2, rh: 3 }, "Stat tile": { c: 2, r: 3, cw: 2, rh: 1 }, "Chart tile": { c: 4, r: 1, cw: 2, rh: 3 } }
-  }
-};
-var LABEL = 30;
-var DAYS = 26;
-var GAP = 14;
-var cues = [
-  assemble(TILES, 120, 90),
-  typeOut("Reply", beat(3), beat(9)),
-  { layer: "Chip", preset: "pop-in", at: beat(12), stagger: { delay: 140, order: "selection" }, params: { duration: 500, amount: 0.7 } },
-  { layer: "Face", preset: "slide-in", at: beat(6), stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 450 } },
-  { layer: [...TILES], preset: "pulse", at: DROP, stagger: { delay: 40, order: "selection" }, params: { duration: 600, amount: 0.025 } },
-  { layer: "Chip", preset: "pulse", at: beat(20), stagger: { delay: 90, order: "selection" }, params: { duration: 400, amount: 0.06 } },
-  { layer: "Face", preset: "pulse", at: beat(18), stagger: { delay: 70, order: "selection" }, params: { duration: 400, amount: 0.08 } },
-  { layer: "Call row", preset: "rise-in", at: END, params: { duration: 700, distance: 40 } },
-  // The last bars keep moving: the figure, the chips and the call each answer a beat in turn.
-  { layer: "Stat tile", preset: "pulse", at: beat(26), params: { duration: 600, amount: 0.03 } },
-  { layer: "Chip", preset: "pulse", at: beat(28), stagger: { delay: 90, order: "selection" }, params: { duration: 400, amount: 0.06 } },
-  { layer: "Call", preset: "pulse", at: beat(30), params: { duration: 800, amount: 0.06 } }
-];
-var counts = [
-  { layer: "Stat figure", at: DROP, duration: beat(3), counter: { from: 0, to: TESSERA.saved, decimals: 1, suffix: " h" } },
-  { layer: "Team figure", at: beat(6), duration: beat(4), tick: 75, counter: { from: 0, to: 12 } }
-];
-var swaps = [captionSwap([
-  "Your week, planned before Monday.",
-  "Ask once. Tessera books it.",
-  "Follow-ups drafted while you talk.",
-  "6.5 hours back every week.",
-  "Your whole team, in sync.",
-  "Tessera 2.0 is out today."
-], 0, S.duration - 30, { stagger: 50, in: 240, out: 160, rise: 20 })];
-var style_bento_launch_reel_default = defineTemplate({
-  id: "motion-saas-style-bento-launch-reel",
-  meta: {
-    name: NAME,
-    description: "A 15-second launch video in the bento grid look for an AI workspace: rounded tiles assemble into an uneven grid, then each runs live \u2014 a reply streams into the night hero tile, a week fills with blocks under a drifting now line, a switch flips on, a team stacks up and a focus line draws itself. On the drop every tile swells and the figure counts to 6.5 hours back, and the call to start free rises at the foot of the hero tile. One lime accent, captions as the headline, music cut on the beat. 9:16 with square, 4:5 and 16:9 layouts",
-    category: "animation",
-    tags: ["animation", "saas", "bento", "bento grid", "dashboard", "tiles", "ai", "productivity", "workspace", "launch", "reel", "counter", "chart", "captions", "music", "audio", "tiktok", "shorts"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
-    useCases: ["launch", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit(NAME, preset("ig-story"));
-    k.quantizeGeometry = true;
-    bentoBrand(k);
-    grot(k, "Brand 34", 34, { weight: 700, lead: 1.1, spacing: -0.02 });
-    grot(k, "Site 24", 24, { weight: 500, lead: 1.3 });
-    for (const [n, sz] of [["Caption 64", 64], ["Caption 56", 56], ["Caption 52", 52]]) grot(k, n, sz, { weight: 700, lead: 1.06, spacing: -0.035 });
-    grot(k, "Label 22", 22, { weight: 500, lead: 1.3 });
-    grot(k, "Ask 24", 24, { weight: 600, lead: 1.3 });
-    for (const [n, sz] of [["Reply 42", 42], ["Reply 38", 38], ["Reply 34", 34], ["Reply 28", 28]]) grot(k, n, sz, { weight: 500, lead: 1.3, spacing: -0.01 });
-    grot(k, "Chip 20", 20, { weight: 600, lead: 1.2 });
-    grot(k, "Day 20", 20, { weight: 600, lead: 1.3 });
-    for (const [n, sz] of [["Stat 124", 124], ["Stat 100", 100], ["Stat 84", 84], ["Stat 72", 72]]) grot(k, n, sz, { weight: 700, lead: 1, spacing: -0.05 });
-    grot(k, "Figure 60", 60, { weight: 700, lead: 1, spacing: -0.04 });
-    grot(k, "Button 26", 26, { weight: 700, lead: 1.2 });
-    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 26", label: "Start free", pad: [18, 30] });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Launch reel");
-    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
-    const L = LAYOUT.story, g = L.grid;
-    const strip = k.frame(sheet, { x: g.x, y: 64, width: g.w, height: 150 }, { name: "Top strip" });
-    ["sky", "mint", "sand", "rose"].forEach((role, i) => {
-      const w = (g.w - g.gap * 3) / 4;
-      k.rect(strip, Math.round(w), 150, role, { radius: radiusFor(g.gap), name: "Strip tile", absolute: { x: Math.round(i * (w + g.gap)), y: 0 } });
-    });
-    const top = k.stack(sheet, { width: L.top.w, gap: 22, name: "Top", absolute: { x: L.top.x, y: L.top.y } });
-    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
-    lockup(k, bar, { size: 40, style: "Brand 34" });
-    k.text(bar, "{{brand.site}}", { style: "Site 24", color: "onPaper", autoWidth: true, name: "Site" });
-    k.text(top, swaps[0].words[0], { style: L.caption, color: "text", width: "FILL", name: "Caption" });
-    const chatT = tile(k, sheet, g, L.cells["Chat tile"], { name: "Chat tile", surface: "night", pad: L.pad, justify: "SPACE_BETWEEN", gap: 22 });
-    const chatTop = k.stack(chatT, { gap: 22, name: "Chat body" });
-    tileLabel(k, chatTop, `${TESSERA.name} ${TESSERA.version}`, { style: "Label 22", surface: "night", size: 22, right: TESSERA.feature, name: "Chat label" });
-    chatSlice(k, chatTop, { prompt: TESSERA.prompt, reply: TESSERA.reply, chips: [`${TESSERA.focus} focus blocks`, `${TESSERA.followUps} follow-ups`, "1:1 moved to Fri"], ask: "Ask 24", body: L.reply, chip: "Chip 20" });
-    const callRow = k.stack(chatT, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Call row" });
-    k.instance(callRow, "Call", { Label: "Start free" }, { name: "Call" });
-    k.text(callRow, TESSERA.trial, { style: "Label 22", color: "nightMuted", width: "FILL", name: "Call line" });
-    const swT = tile(k, sheet, g, L.cells["Switch tile"], { name: "Switch tile", surface: "mint", pad: L.pad });
-    tileLabel(k, swT, TESSERA.feature, { style: "Label 22", surface: "mint", size: 22 });
-    switchSlice(k, swT, { w: 150, ink: "onMint" });
-    k.text(swT, "Team-wide", { style: "Label 22", color: "onMint", autoWidth: true, name: "Switch state" });
-    const teamT = tile(k, sheet, g, L.cells["Team tile"], { name: "Team tile", surface: "sand", pad: L.pad });
-    tileLabel(k, teamT, "In sync", { style: "Label 22", surface: "sand", size: 22 });
-    k.text(teamT, "12", { style: "Figure 60", color: "onSand", width: 120, name: "Team figure" });
-    avatarSlice(k, teamT, { d: 64, n: 4, ring: "sand", overlap: 0.38 });
-    const weekT = tile(k, sheet, g, L.cells["Week tile"], { name: "Week tile", surface: "card", pad: L.pad, justify: "MIN", gap: GAP });
-    tileLabel(k, weekT, "This week", { style: "Label 22", surface: "card", size: 22, right: `${TESSERA.focus} focus` });
-    calendarSlice(k, weekT, { w: 100, h: 100, day: "Day 20", ink: "onCard" });
-    const statT = tile(k, sheet, g, L.cells["Stat tile"], { name: "Stat tile", surface: "primary", pad: L.pad, justify: "MIN", gap: 10 });
-    tileLabel(k, statT, "Back each week", { style: "Label 22", surface: "primary", size: 22 });
-    const statBody = k.stack(statT, { gap: 6, name: "Stat body" });
-    k.text(statBody, `${TESSERA.saved} h`, { style: L.stat, color: "onPrimary", width: "FILL", name: "Stat figure" });
-    k.text(statBody, `per person, across ${TESSERA.teams} teams`, { style: "Label 22", color: "onPrimary", width: "FILL", name: "Stat line" });
-    const chartT = tile(k, sheet, g, L.cells["Chart tile"], { name: "Chart tile", surface: "sky", pad: L.pad, justify: "SPACE_BETWEEN" });
-    tileLabel(k, chartT, "Focus hours", { style: "Label 22", surface: "sky", size: 22, right: "12 wk", name: "Chart label" });
-    chartSlice(k, chartT, { w: 100, h: 100, ink: "onSky", weight: 6 });
-    const fit = (kit, root, l) => {
-      placeTiles(kit, root, l.grid, l.cells, { pad: l.pad });
-      for (const id of kit.named(root, "Top")) kit.patch(id, { x: l.top.x, y: l.top.y, width: l.top.w });
-      for (const id of kit.named(root, "Caption")) kit.restyle(id, l.caption);
-      for (const id of kit.named(root, "Stat figure")) kit.restyle(id, l.stat);
-      for (const id of kit.named(root, "Reply")) kit.restyle(id, l.reply);
-      for (const id of kit.named(root, "Chart label")) kit.patch(id, { visible: !l.story });
-      for (const id of kit.named(root, "Stat tile")) kit.patch(id, { primaryAxisAlignItems: l.story ? "MIN" : "SPACE_BETWEEN" });
-      const box = (n) => cellBox(l.grid, l.cells[n]);
-      const w = box("Week tile");
-      fitCalendar(kit, root, w.w - 2 * l.pad, w.h - 2 * l.pad - LABEL - DAYS - 12 - 2 * GAP);
-      const ch = box("Chart tile"), cw = ch.w - 2 * l.pad;
-      fitChart(kit, root, cw, Math.min(ch.h - 2 * l.pad - (l.story ? 0 : LABEL + GAP), Math.round(cw * 0.9)));
-      const st = box("Stat tile"), sIn = st.w - 2 * l.pad;
-      for (const id of kit.named(root, "Stat figure")) kit.patch(id, { width: Math.min(sIn, 340), layoutSizingHorizontal: "FIXED" });
-      for (const id of kit.named(root, "Stat line")) kit.patch(id, { width: Math.min(sIn, 360), layoutSizingHorizontal: "FIXED" });
-      const sw = box("Switch tile"), tm = box("Team tile");
-      fitSwitch(kit, root, Math.min(150, sw.w - 2 * l.pad, Math.round((sw.h - 2 * l.pad - LABEL - GAP) / 0.56)));
-      fitAvatars(kit, root, Math.min(64, tm.h - 2 * l.pad - LABEL - GAP));
-    };
-    fit(k, sheet, L);
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    fillWeek(k, sheet, beat(5), 100);
-    drawChart(k, sheet, beat(8), beat(7));
-    flip(k, sheet, [beat(4), beat(20), beat(22)]);
-    nowDrift(k, sheet, beat(5), S.duration);
-    const hide = (kit, id, names) => {
-      for (const n of names) for (const x of kit.named(id, n)) kit.patch(x, { visible: false });
-    };
-    k.variants(sheet, [
-      { preset: "ig-post", adjust: (kit, id) => {
-        fit(kit, id, LAYOUT.post);
-        hide(kit, id, ["Top strip"]);
-        for (const c of kit.named(id, "Chart label")) hide(kit, c, ["Label right"]);
-        hide(kit, id, ["Team figure"]);
-      } },
-      { preset: "ig-portrait", adjust: (kit, id) => {
-        fit(kit, id, LAYOUT.portrait);
-        hide(kit, id, ["Top strip"]);
-        hide(kit, id, ["Team figure"]);
-      } },
-      { preset: "video-1080p", adjust: (kit, id) => {
-        fit(kit, id, LAYOUT.wide);
-        hide(kit, id, ["Top strip"]);
-        hide(kit, id, ["Team figure", "Switch state"]);
-      } }
-    ]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_bento_launch_reel_default
-};

package/dist/chunks/chunk-FQMYMSEF.js

@@ -1,336 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  LATCH,
-  WEB_STEPS,
-  WEB_TYPE,
-  WINDOW,
-  blinkCaret,
-  card,
-  chip,
-  commandPalette,
-  darkBrand,
-  errorChart,
-  fitHeroGround,
-  flagWindow,
-  heroGround,
-  lamp,
-  marquee,
-  sectionHead
-} from "./chunk-M6QTK2HG.js";
-import {
-  portraitSlot
-} from "./chunk-3TBNWHDN.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  compactNav,
-  followTyping,
-  footer,
-  respond,
-  rule,
-  typeScale
-} from "./chunk-O7APDMKU.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-YKXCPYWJ.js";
-import {
-  cutOn
-} from "./chunk-RXG7T7TH.js";
-import {
-  board,
-  hide,
-  reboard
-} from "./chunk-QLV6445V.js";
-import {
-  box
-} from "./chunk-BNVLVZUT.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  Kit,
-  preset
-} from "./chunk-6QHAQLJ4.js";
-import {
-  ease
-} from "./chunk-QFFXZQH5.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.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
-};