@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-6UD6V5RX.js

@@ -0,0 +1,202 @@
+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 {
+  REVIEW_KITS
+} from "./chunk-76AOCDZN.js";
+import {
+  MIN_TEXT_PX,
+  paintedTexts
+} from "./chunk-SXQAIHUO.js";
+import {
+  contains,
+  overlaps,
+  presetSafeRect
+} from "./chunk-GUR6XRHF.js";
+import {
+  applyBrandKit
+} from "./chunk-WH4YKN3O.js";
+import {
+  evaluatePose
+} from "./chunk-OO67GSCX.js";
+import {
+  letterOpacities
+} from "./chunk-HRDPBECW.js";
+import {
+  timelineDuration
+} from "./chunk-2WU6JQAQ.js";
+import {
+  PAGE_PRESETS,
+  init_page_presets
+} from "./chunk-I3NUEMNB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/agent/design-script/check.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_page_presets();
+var MAX_ISSUES = 24;
+var MAX_FRAME_PX = 8192;
+var label = (t) => `"${(t.characters || t.name).replace(/\s+/g, " ").slice(0, 40)}"`;
+var presetOf = (doc, w, h) => {
+  const all = PAGE_PRESETS.filter((p) => p.unit === "px" && p.width === w && p.height === h);
+  const web = all.find((p) => p.category === "WEB");
+  return (doc.settings?.kind === "WEB" || web && all.length > 1 && w >= 1024 ? web : void 0)?.id ?? all[0]?.id;
+};
+function checkDesign(doc, roots) {
+  const issues = [];
+  const kind = doc.settings?.kind ?? "CANVAS";
+  for (const id of roots) {
+    const frame = doc.nodes[id];
+    if (!frame || frame.type !== "FRAME") continue;
+    const size = `${Math.round(frame.width)}\xD7${Math.round(frame.height)}`;
+    const preset = frame.print?.presetId ?? presetOf(doc, Math.round(frame.width), Math.round(frame.height));
+    const min = preset && PAGE_PRESETS.find((p) => p.id === preset)?.category === "SOCIAL" ? MIN_TEXT_PX.SOCIAL : MIN_TEXT_PX[kind];
+    const texts = paintedTexts(doc, [id]);
+    const box = { x: 0, y: 0, width: frame.width, height: frame.height };
+    const safe = preset ? presetSafeRect(preset, frame.width, frame.height) : null;
+    const add = (i) => {
+      if (issues.length < MAX_ISSUES) issues.push({ size, ...i });
+    };
+    if (frame.height > MAX_FRAME_PX || frame.width > MAX_FRAME_PX) add({ kind: "too-tall", layer: frame.name, message: `The frame is ${Math.round(frame.width)}\xD7${Math.round(frame.height)}: past ${MAX_FRAME_PX} px it renders blank in thumbnails and exports. Tighten spacing, condense lists and drop repeated sections at this size.` });
+    const moving = (textId) => animatedUp(doc, textId.split("::")[0], id);
+    const tilted = (textId) => tiltedUp(doc, textId.split("::")[0], id);
+    const visibleTexts = texts.filter((t) => !clippedAway(doc, t, id));
+    for (const t of visibleTexts) {
+      const r = { x: t.x - frame.x, y: t.y - frame.y, width: t.width, height: t.height };
+      const at = t.x >= frame.x - 1 && t.y >= frame.y - 1 ? r : { x: t.x, y: t.y, width: t.width, height: t.height };
+      if (t.contrast < t.required) add({ kind: "contrast", layer: t.name, message: `${label(t)} reads at ${t.contrast.toFixed(1)}:1 against what is behind it; it needs ${t.required}:1. Darken or lighten it, or give it a plate.` });
+      if (t.fontSize < min) add({ kind: "small-text", layer: t.name, message: `${label(t)} is ${t.fontSize}px; at this size text should be at least ${min}px.` });
+      const partly = overlaps(box, at) && !contains(box, at);
+      if (partly && !moving(t.id) && t.fontSize < 160) add({ kind: "off-frame", layer: t.name, message: `${label(t)} runs off the frame (${Math.round(at.x)},${Math.round(at.y)} ${Math.round(at.width)}\xD7${Math.round(at.height)}).` });
+      else if (!partly && contains(box, at) && safe && !contains(safe, at)) add({ kind: "unsafe", layer: t.name, message: `${label(t)} sits where the apps draw their own buttons and captions; keep text inside x ${Math.round(safe.x)}\u2013${Math.round(safe.x + safe.width)}, y ${Math.round(safe.y)}\u2013${Math.round(safe.y + safe.height)}.` });
+    }
+    for (let i = 0; i < visibleTexts.length; i++) for (let j = i + 1; j < visibleTexts.length; j++) {
+      if (overlaps(visibleTexts[i], visibleTexts[j]) && !moving(visibleTexts[i].id) && !moving(visibleTexts[j].id) && !tilted(visibleTexts[i].id) && !tilted(visibleTexts[j].id)) add({ kind: "overlap", layer: visibleTexts[i].name, message: `${label(visibleTexts[i])} overlaps ${label(visibleTexts[j])}.` });
+    }
+    for (const [kitName, kit] of Object.entries(REVIEW_KITS)) {
+      const fails = paintedTexts(applyBrandKit(doc, kit), [id]).filter((t) => t.contrast < t.required);
+      for (const t of fails.slice(0, 3)) add({ kind: "kit-contrast", layer: t.name, message: `Under a ${kitName} brand kit, ${label(t)} reads at ${t.contrast.toFixed(1)}:1 (needs ${t.required}:1): put it on a plate, or use the text roles rather than the brand colour for words.` });
+    }
+    const walkInst = (nid) => {
+      const n = doc.nodes[nid];
+      if (!n) return;
+      if (n.type === "INSTANCE" && n.mainComponentId && !doc.nodes[n.mainComponentId]) add({ kind: "broken-instance", layer: n.name, message: `"${n.name}" is an instance of a component that is not in the file, so it draws nothing (a blank button, a missing switch).` });
+      n.childIds.forEach(walkInst);
+    };
+    walkInst(id);
+    const seam = seamJump(doc, frame);
+    if (seam) add({ kind: "seam", layer: seam.layer, message: seam.message });
+    const band = emptyBand(doc, frame);
+    if (band) add({ kind: "empty-band", layer: frame.name, message: band });
+  }
+  return issues;
+}
+function seamJump(doc, frame) {
+  const tl = frame.timeline;
+  if (!tl || tl.audio?.length || tl.duration <= 0 || frame.print?.transition || doc.settings?.kind === "PRESENTATION") return null;
+  if (Object.values(doc.compositions ?? {}).some((c) => c.clips.some((clip) => clip.frameId === frame.id))) return null;
+  const end = tl.workArea ? tl.workArea[1] : timelineDuration(doc.nodes, frame.id);
+  const start = tl.workArea ? tl.workArea[0] : 0;
+  const shown = (ms) => {
+    const posed = evaluatePose(doc.nodes, { kind: "frame", frameId: frame.id }, ms).nodes;
+    const out = /* @__PURE__ */ new Map();
+    const walk = (id, alpha, maskedIn = false) => {
+      let hidden = maskedIn;
+      for (const c of posed[id]?.childIds ?? []) {
+        const n = posed[c];
+        if (!n) continue;
+        if (n.isMask) {
+          if ((n.opacity ?? 1) <= 0.01 || n.width < 1 || n.height < 1 || n.visible === false) hidden = true;
+          continue;
+        }
+        if (hidden) {
+          walk(c, 0, true);
+          continue;
+        }
+        const a2 = alpha * (n.opacity ?? 1);
+        const words = n.textCounter ? "" : n.characters ?? "";
+        const letters = n.type === "TEXT" ? letterOpacities(n).some((o) => o > 0.01) : true;
+        if (a2 > 0.05 && letters && n.visible !== false && n.width >= 1 && n.height >= 1) out.set(c, words);
+        walk(c, a2, hidden);
+      }
+    };
+    walk(frame.id, 1);
+    return out;
+  };
+  const a = shown(start), b = shown(end);
+  for (const [id, words] of a) {
+    if (!b.has(id)) return { layer: doc.nodes[id].name, message: `The loop jumps where it restarts: "${doc.nodes[id].name}" is on screen at the start but gone at the end. Bring it back before the end, or loop its keys.` };
+    if (b.get(id) !== words) return { layer: doc.nodes[id].name, message: `The loop jumps where it restarts: "${doc.nodes[id].name}" says something else at the end than at the start. A ticking count wraps; it cannot count on for ever.` };
+  }
+  for (const id of b.keys()) if (!a.has(id)) return { layer: doc.nodes[id].name, message: `The loop jumps where it restarts: "${doc.nodes[id].name}" is on screen at the end but not at the start. Send it off before the end, or make it emphasis that returns to rest.` };
+  return null;
+}
+function boxOf(doc, id, frameId) {
+  let x = 0, y = 0;
+  for (let n2 = doc.nodes[id]; n2 && n2.id !== frameId; n2 = n2.parentId ? doc.nodes[n2.parentId] : void 0) {
+    x += n2.x;
+    y += n2.y;
+  }
+  const n = doc.nodes[id];
+  return { x, y, width: n?.width ?? 0, height: n?.height ?? 0 };
+}
+function clippedAway(doc, t, frameId) {
+  const own = t.id.split("::")[0];
+  const tb = boxOf(doc, own, frameId);
+  for (let n = doc.nodes[doc.nodes[own]?.parentId ?? ""]; n && n.id !== frameId; n = n.parentId ? doc.nodes[n.parentId] : void 0) {
+    if (n.clipsContent && !overlaps(boxOf(doc, n.id, frameId), tb)) return true;
+  }
+  return false;
+}
+function tiltedUp(doc, id, frameId) {
+  for (let n = doc.nodes[id]; n && n.id !== frameId; n = n.parentId ? doc.nodes[n.parentId] : void 0) {
+    if (Math.abs((n.rotation ?? 0) % 360) > 0.5) return true;
+  }
+  return false;
+}
+function animatedUp(doc, id, frameId) {
+  for (let n = doc.nodes[id]; n && n.id !== frameId; n = n.parentId ? doc.nodes[n.parentId] : void 0) {
+    const m = n.motion;
+    if (m?.tracks && Object.keys(m.tracks).length) return true;
+  }
+  return false;
+}
+function emptyBand(doc, frame) {
+  const H = Math.round(frame.height), W = frame.width;
+  if (H < 200) return null;
+  const filled = new Uint8Array(H);
+  const walk = (id, ox, oy, depth) => {
+    const n = doc.nodes[id];
+    if (!n || n.visible === false) return;
+    const x = depth === 0 ? 0 : ox + n.x, y = depth === 0 ? 0 : oy + n.y;
+    const plain = n.type === "RECTANGLE" || n.type === "ELLIPSE" || n.type === "FRAME" && !n.childIds.length;
+    if (depth > 0 && (n.opacity ?? 1) > 0.05 && !(plain && n.width * n.height >= W * H * 0.85)) {
+      for (let r = Math.max(0, Math.floor(y)); r < Math.min(H, Math.ceil(y + n.height)); r++) filled[r] = 1;
+    }
+    for (const c of n.childIds) walk(c, x, y, depth + 1);
+  };
+  walk(frame.id, 0, 0, 0);
+  let best = 0, at = 0, run = 0;
+  for (let r = 0; r <= H; r++) {
+    if (r < H && !filled[r]) {
+      run++;
+      continue;
+    }
+    if (run > best) {
+      best = run;
+      at = r - run;
+    }
+    run = 0;
+  }
+  return best > H * 0.18 ? `${Math.round(best / H * 100)}% of the frame's height (y ${at}\u2013${at + best}) holds nothing but the ground. Fill it with something true to the idea, or recompose so the content uses the frame.` : null;
+}
+
+export {
+  MAX_FRAME_PX,
+  checkDesign
+};

package/dist/chunks/chunk-6UY4KXX7.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-M6QTK2HG.js";
+import {
+  portraitSlot
+} from "./chunk-D7LV62QH.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  compactNav,
+  followTyping,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-TJBKMQY5.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  cutOn
+} from "./chunk-Z2UPJTSZ.js";
+import {
+  board,
+  hide,
+  reboard
+} from "./chunk-QLV6445V.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.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
+};