@popcraft/kit 0.53.15 → 0.53.17

package/dist/chunks/chunk-NBGOXIL5.js

@@ -0,0 +1,351 @@
+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 {
+  caret,
+  tick
+} from "./chunk-AGV72YOJ.js";
+import {
+  MONO
+} from "./chunk-MPRWXHPJ.js";
+import {
+  CONTENT,
+  columns,
+  compactNav,
+  footer,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-TRJWKRQH.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-KLAIZ7BD.js";
+import {
+  board,
+  reboard
+} from "./chunk-T43CHLBH.js";
+import {
+  line
+} from "./chunk-U2KTX33N.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/web/saas-integrations.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CATS = [["Warehouses", 14, "catA"], ["CRM", 22, "catB"], ["Support", 18, "catC"], ["Billing", 16, "catD"], ["Messaging", 31, "catE"]];
+var catFill = (c) => CATS.find((x) => x[0] === c)[2];
+var TOOLS = [
+  ["Snowflake", "Warehouses", "Customers and events, as your tables", "2,140 teams", true],
+  ["BigQuery", "Warehouses", "Hourly loads, partitioned by day", "1,620 teams", false],
+  ["Postgres", "Warehouses", "Read a replica, write a schema back", "1,180 teams", true],
+  ["HubSpot", "CRM", "Contacts, companies and deal stages", "3,310 teams", true],
+  ["Salesforce", "CRM", "Leads, accounts and custom objects", "2,870 teams", true],
+  ["Pipedrive", "CRM", "People and deals, matched on email", "640 teams", false],
+  ["Zendesk", "Support", "Tickets and satisfaction scores", "1,950 teams", false],
+  ["Intercom", "Support", "Conversations, tags and plan data", "2,260 teams", true],
+  ["Stripe", "Billing", "Subscriptions, invoices and refunds", "4,480 teams", false],
+  ["Chargebee", "Billing", "Plans, add-ons and renewals", "510 teams", false],
+  ["Slack", "Messaging", "Alerts when a customer trait changes", "5,020 teams", false],
+  ["Customer.io", "Messaging", "Audiences, synced every 15 minutes", "1,340 teams", true]
+];
+var SYNCS = [["customers", "DIM_CUSTOMERS", "12,480 rows"], ["events", "FCT_EVENTS", "1.9M rows"], ["subscriptions", "FCT_MRR", "3,204 rows"], ["audiences", "DIM_AUDIENCES", "46 rows"]];
+var WANTED = [["Airtable", 412], ["Linear", 356], ["Klaviyo", 298], ["NetSuite", 201], ["Front", 164]];
+var BOARD = { w: 520, h: 440, hub: { x: 200, y: 160, s: 120 }, tile: 72 };
+var WIRES = [["S", "Warehouses", 0, 20], ["H", "CRM", 448, 0], ["Z", "Support", 448, 184], ["$", "Billing", 420, 368], ["#", "Messaging", 60, 368], ["P", "Warehouses", 0, 200]];
+var LOOP = 6e3;
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Count row", preset: "fade-in", at: 100, params: { duration: 500 } },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: "Search", preset: "rise-in", at: 500 },
+  { layer: "Query", preset: "typewriter", at: 1300, params: { duration: 900 } },
+  { layer: "Filter", preset: "pop-in", at: 800, params: { duration: 300 }, stagger: { delay: 70 } },
+  { layer: "Hub", preset: "pop-in", at: 300, params: { duration: 500 } },
+  { layer: "Wire", preset: "fade-in", at: 600, params: { duration: 500 } },
+  { layer: "Plug", preset: "pop-in", at: 700, params: { duration: 350 }, stagger: { delay: 110 } },
+  { layer: "Sync row", preset: "rise-in", at: 1800, params: { duration: 450 }, stagger: { delay: 160 } },
+  { layer: "Tool", preset: "rise-in", at: 1500, params: { duration: 500 }, stagger: { delay: 60 } },
+  { layer: "Vote bar", preset: "wipe-in", at: 2200, params: { duration: 700 }, stagger: { delay: 120 } }
+];
+var counts = [
+  { layer: "Count figure", at: 300, duration: 1800, counter: { from: 96, to: 142 } },
+  { layer: "Synced figure", at: 2e3, duration: 2400, counter: { from: 11200, to: 12480, suffix: " rows" } }
+];
+var saas_integrations_default = defineTemplate({
+  id: "web-saas-integrations",
+  meta: {
+    name: "SaaS integrations directory page",
+    description: "An integrations page laid out as a parts catalogue: a switchboard hero whose wires carry records to the hub while a search is typed and the count of integrations ticks up, a featured integration with its sync table filling in, the directory as categories beside a grid of index cards, the API for what is not listed, and \u201Crequest an integration\u201D beside the most asked for with their votes. Desktop to phone",
+    category: "web",
+    tags: ["saas", "integrations", "directory", "marketplace", "apps", "connectors", "api", "search", "catalogue", "landing page", "website", "animation", "responsive"],
+    platforms: ["web"],
+    formats: ["page", "demo"],
+    useCases: ["brand-intro", "launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS integrations directory page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F3F0E8", text: "#15130E", onPaper: "#57534A", primary: "#5A34D6", onPrimary: "#FFFFFF", card: "#FFFDF8", onCard: "#15130E", cardMuted: "#5E5A50", panel: "#17150F", onPanel: "#F3F0E8", panelMuted: "#B4AE9F" },
+      { name: "Portway" }
+    );
+    k.palette({ hairline: "#DDD8CA", wire: "#C9C3B3", catA: "#F2B33D", catB: "#3CB98A", catC: "#F07A93", catD: "#6C9BFF", catE: "#B79CFF", tileInk: "#15130E", ok: "#3CB98A", panelLine: "#35322A", panelCard: "#211F18" });
+    const s = typeScale(k, {
+      "Nav 15": { size: 15, fontWeight: 600, lineHeight: 24 },
+      "Brand 21": { size: 21, fontWeight: 800, letterSpacing: -0.6, lineHeight: 28 },
+      "Button 15": { size: 15, fontWeight: 700, lineHeight: 22 },
+      "Tag 12": { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.2, lineHeight: 16, textCase: "UPPER" },
+      "Count 15": { ...MONO, size: 15, fontWeight: 600, lineHeight: 22 },
+      "Display 68": { size: 68, fontWeight: 800, letterSpacing: -3.2, lineHeight: 68 },
+      "Display 58": { size: 58, fontWeight: 800, letterSpacing: -2.6, lineHeight: 59 },
+      "Display 46": { size: 46, fontWeight: 800, letterSpacing: -2, lineHeight: 48 },
+      "Display 36": { size: 36, fontWeight: 800, letterSpacing: -1.4, lineHeight: 38 },
+      "Lead 19": { size: 19, fontWeight: 400, lineHeight: 30 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Field 17": { size: 17, fontWeight: 500, lineHeight: 24 },
+      "Chip 14": { size: 14, fontWeight: 600, lineHeight: 20 },
+      "Letter 30": { size: 30, fontWeight: 800, letterSpacing: -1, lineHeight: 34, textAlign: "CENTER" },
+      "Letter 22": { size: 22, fontWeight: 800, letterSpacing: -0.6, lineHeight: 26, textAlign: "CENTER" },
+      "Section 44": { size: 44, fontWeight: 800, letterSpacing: -1.9, lineHeight: 46 },
+      "Section 32": { size: 32, fontWeight: 800, letterSpacing: -1.1, lineHeight: 35 },
+      "Card 19": { size: 19, fontWeight: 700, letterSpacing: -0.3, lineHeight: 24 },
+      "Body 16": { size: 16, fontWeight: 400, lineHeight: 25 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 21 },
+      "Strong 14": { size: 14, fontWeight: 700, lineHeight: 21 },
+      "Code 14": { ...MONO, size: 14, fontWeight: 500, lineHeight: 23 },
+      "Code 12": { ...MONO, size: 12, fontWeight: 500, lineHeight: 20 },
+      "Mono 13": { ...MONO, size: 13, fontWeight: 600, lineHeight: 18 },
+      "Foot head 14": { size: 14, fontWeight: 800, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 15"), pad: [13, 22], radius: 10 });
+    k.component("Button light", { direction: "HORIZONTAL", width: "HUG", radius: 10, align: "CENTER", fill: "card", padding: { top: 13, right: 22, bottom: 13, left: 22 }, props: { Label: "Read the setup guide" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 15"), color: "onCard", autoWidth: true });
+    });
+    const tile = (parent, letter, cat, size, o = {}) => {
+      const t = k.stack(parent, { width: size, height: size, radius: Math.round(size * 0.28), fill: catFill(cat), align: "CENTER", justify: "CENTER", stroke: { color: "tileInk", width: 2, align: "INSIDE" }, name: o.name ?? "Tool tile", ...o.absolute ? { absolute: o.absolute } : {} });
+      k.text(t, letter, { style: s(size >= 64 ? "Letter 30" : "Letter 22"), color: "tileInk", name: "Tool letter" });
+      return t;
+    };
+    const tag = (parent, label, ink) => k.text(parent, label, { style: s("Tag 12"), color: ink, name: "Tag" });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Directory", "Featured", "API", "Request one"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 21") });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 22, name: "Hero copy" });
+    const count = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "card", radius: 999, padding: { top: 6, right: 14, bottom: 6, left: 8 }, stroke: { color: "hairline", width: 1, align: "INSIDE" }, name: "Count row" });
+    const badge = k.stack(count, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, padding: { top: 2, right: 10, bottom: 2, left: 10 }, name: "Count badge" });
+    k.text(badge, "142", { style: s("Count 15"), color: "onPrimary", autoWidth: true, name: "Count figure" });
+    k.text(count, "integrations, nine added in September", { style: s("Chip 14"), color: "onCard", autoWidth: true, name: "Count words" });
+    k.text(copy, "It plugs into the tools you already pay for.", { style: s("Display 68"), color: "text", name: "Headline" });
+    k.text(copy, "Portway keeps one record of each customer and keeps your warehouse, CRM, help desk and billing in step with it. Pick a tool, sign in, choose the fields. Most are live in under ten minutes.", { style: s("Lead 19"), color: "onPaper", name: "Lead" });
+    const search = k.stack(copy, { direction: "HORIZONTAL", gap: 12, align: "CENTER", fill: "card", radius: 14, padding: { top: 15, right: 18, bottom: 15, left: 18 }, stroke: { color: "text", width: 2, align: "INSIDE" }, effects: [soft(0.08, 10, 24)], name: "Search" });
+    const lens = k.stack(search, { width: 22, height: 22, name: "Lens" });
+    k.ellipse(lens, 16, k.tint("card", 1e-3), { name: "Lens ring", stroke: { color: "onCard", width: 2.5, align: "INSIDE" }, absolute: { x: 0, y: 0 } });
+    k.vector(lens, 8, 8, [line(0, 0, 7, 7)], "onCard", { name: "Lens handle", strokeWidth: 2.5, absolute: { x: 13, y: 13 } });
+    const field = k.stack(search, { direction: "HORIZONTAL", gap: 3, align: "CENTER", name: "Search field" });
+    k.text(field, "warehouse", { style: s("Field 17"), color: "onCard", autoWidth: true, name: "Query" });
+    caret(k, field, 2, 22, "primary", { absolute: { x: 0, y: 0 } });
+    k.text(search, "14 results", { style: s("Mono 13"), color: "cardMuted", autoWidth: true, name: "Results" });
+    const filters = k.stack(copy, { direction: "HORIZONTAL", gap: 8, wrap: true, name: "Filters" });
+    for (const [i, [name]] of [["All"], ...CATS].entries()) {
+      const chip = k.stack(filters, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, fill: i === 1 ? "text" : "card", padding: { top: 7, right: 14, bottom: 7, left: 12 }, stroke: { color: i === 1 ? "text" : "hairline", width: 1, align: "INSIDE" }, name: "Filter" });
+      if (i) k.ellipse(chip, 10, CATS[i - 1][2], { name: "Filter dot" });
+      k.text(chip, name, { style: s("Chip 14"), color: i === 1 ? "paper" : "onCard", autoWidth: true, name: "Filter name" });
+    }
+    const sw = board(k, hero, BOARD.w, BOARD.h, 1, "Switchboard");
+    const hc = { x: BOARD.hub.x + BOARD.hub.s / 2, y: BOARD.hub.y + BOARD.hub.s / 2 };
+    for (const d of [400, 250]) k.ellipse(sw, d, k.tint("card", d === 400 ? 0.55 : 0.9), { name: "Hub ring", stroke: { color: "hairline", width: 2, align: "INSIDE" }, absolute: { x: hc.x - d / 2, y: hc.y - d / 2 } });
+    k.vector(sw, BOARD.w, BOARD.h, WIRES.map(([, , x, y]) => line(x + BOARD.tile / 2, y + BOARD.tile / 2, hc.x, hc.y)), "wire", { name: "Wire", strokeWidth: 2, stroke: { color: "wire", width: 2, dash: [2, 8] }, absolute: { x: 0, y: 0 } });
+    WIRES.forEach(([letter, cat, x, y], i) => {
+      const dot = k.ellipse(sw, 20, catFill(cat), { name: "Record", stroke: { color: "tileInk", width: 2, align: "INSIDE" }, absolute: { x: x + BOARD.tile / 2 - 10, y: y + BOARD.tile / 2 - 10 } });
+      const t0 = 1200 + i * 700, t1 = t0 + 900;
+      k.animate(dot, "translateX", [{ t: 0, v: 0, ease: ease.hold }, { t: t0, v: 0, ease: ease.inOut("cubic") }, { t: t1, v: hc.x - (x + BOARD.tile / 2) }]);
+      k.animate(dot, "translateY", [{ t: 0, v: 0, ease: ease.hold }, { t: t0, v: 0, ease: ease.inOut("cubic") }, { t: t1, v: hc.y - (y + BOARD.tile / 2) }]);
+      k.animate(dot, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: t0, v: 1, ease: ease.hold }, { t: t1 - 120, v: 1, ease: ease.linear }, { t: t1, v: 0 }]);
+      tile(sw, letter, cat, BOARD.tile, { name: "Plug", absolute: { x, y } });
+    });
+    const hub = k.stack(sw, { width: BOARD.hub.s, height: BOARD.hub.s, radius: 34, fill: "primary", align: "CENTER", justify: "CENTER", effects: [soft(0.22, 18, 40)], name: "Hub", absolute: { x: BOARD.hub.x, y: BOARD.hub.y } });
+    k.logo(hub, 60, 60);
+    const feat = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", fill: "panel", radius: 28, padding: 48, name: "Featured" });
+    const featCopy = k.stack(feat, { gap: 18, name: "Featured copy" });
+    tag(featCopy, "Featured \xB7 Warehouses", "panelMuted");
+    k.text(featCopy, "Snowflake, in both directions.", { style: s("Section 44"), color: "onPanel", name: "Featured title" });
+    k.text(featCopy, "Land every customer, event and subscription as tables you own. Then send the models your analysts build back to the tools your team works in.", { style: s("Lead 19"), color: "panelMuted", name: "Featured text" });
+    for (const point of ["Loads every 15 minutes, or on a schedule you set", "Schema changes are applied for you, never dropped", "Key-pair sign-in: Portway never holds a password"]) {
+      const row = k.stack(featCopy, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Featured point" });
+      tick(k, row, 18, "ok", { weight: 3 });
+      k.text(row, point, { style: s("Body 16"), color: "onPanel", name: "Point words" });
+    }
+    k.instance(featCopy, "Button light", { Label: "Read the setup guide" }, { name: "Featured button" });
+    const sync = k.stack(feat, { width: 500, gap: 0, fill: "panelCard", radius: 18, padding: { top: 20, right: 22, bottom: 14, left: 22 }, stroke: { color: "panelLine", width: 1, align: "INSIDE" }, name: "Sync card" });
+    const syncHead = k.stack(sync, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 0, right: 0, bottom: 14, left: 0 }, name: "Sync head" });
+    tile(syncHead, "S", "Warehouses", 44);
+    const syncWords = k.stack(syncHead, { gap: 0, name: "Sync words" });
+    k.text(syncWords, "Snowflake \xB7 PROD.PORTWAY", { style: s("Strong 14"), color: "onPanel", name: "Sync name" });
+    k.text(syncWords, "12,480 rows", { style: s("Mono 13"), color: "panelMuted", name: "Synced figure" });
+    const live = k.stack(syncHead, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Live" });
+    k.ellipse(live, 10, "ok", { name: "Live dot" });
+    k.text(live, "Live", { style: s("Strong 14"), color: "onPanel", autoWidth: true, name: "Live words" });
+    for (const [from, to, rows] of SYNCS) {
+      rule(k, sync, "panelLine");
+      const row = k.stack(sync, { direction: "HORIZONTAL", gap: 10, align: "CENTER", padding: { top: 13, right: 0, bottom: 13, left: 0 }, name: "Sync row" });
+      k.text(row, from, { style: s("Code 14"), color: "onPanel", width: 120, name: "Sync from" });
+      k.rect(row, 18, 2, "panelMuted", { name: "Sync arrow" });
+      k.text(row, to, { style: s("Code 14"), color: "onPanel", width: "FILL", name: "Sync to" });
+      k.text(row, rows, { style: s("Mono 13"), color: "panelMuted", width: 96, align: "RIGHT", name: "Sync rows" });
+    }
+    const dir = k.stack(sheet, { gap: 32, name: "Directory" });
+    const dirHead = k.stack(dir, { direction: "HORIZONTAL", gap: 56, align: "MAX", name: "Directory head" });
+    k.text(dirHead, "The directory", { style: s("Section 44"), color: "text", name: "Directory title" });
+    k.text(dirHead, "Every integration is built and kept working by Portway, not by a contractor or a community plug-in. When a tool changes its API, we change ours the same week.", { style: s("Body 16"), color: "onPaper", width: 520, name: "Directory lead" });
+    const dirRow = k.stack(dir, { direction: "HORIZONTAL", gap: 32, name: "Directory row" });
+    const side = k.stack(dirRow, { width: 220, gap: 4, name: "Categories" });
+    for (const [i, [name, n, fill]] of [["All integrations", 142, "text"], ...CATS, ["Analytics", 19, "wire"], ["Ads", 22, "wire"]].entries()) {
+      const row = k.stack(side, { direction: "HORIZONTAL", gap: 10, align: "CENTER", radius: 10, padding: { top: 9, right: 12, bottom: 9, left: 12 }, ...i === 0 ? { fill: "card" } : {}, name: "Category" });
+      k.ellipse(row, 10, fill, { name: "Category dot" });
+      k.text(row, name, { style: s(i === 0 ? "Strong 14" : "Chip 14"), color: i === 0 ? "onCard" : "text", name: "Category name" });
+      k.text(row, String(n), { style: s("Mono 13"), color: i === 0 ? "cardMuted" : "onPaper", autoWidth: true, name: "Category count" });
+    }
+    const grid = k.stack(dirRow, { direction: "HORIZONTAL", gap: 16, wrap: true, name: "Tools" });
+    for (const [name, cat, what, teams, both] of TOOLS) {
+      const card = k.stack(grid, { width: 305, gap: 12, fill: "card", radius: 18, padding: 20, stroke: { color: "hairline", width: 1, align: "INSIDE" }, name: "Tool" });
+      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MIN", name: "Tool top" });
+      tile(top, name[0], cat, 48);
+      const way = k.stack(top, { direction: "HORIZONTAL", width: "HUG", radius: 999, padding: { top: 3, right: 9, bottom: 3, left: 9 }, stroke: { color: "hairline", width: 1, align: "INSIDE" }, name: "Tool way" });
+      k.text(way, both ? "Two-way" : "One-way", { style: s("Mono 13"), color: "cardMuted", autoWidth: true, name: "Way words" });
+      const words = k.stack(card, { gap: 2, name: "Tool words" });
+      k.text(words, name, { style: s("Card 19"), color: "onCard", name: "Tool name" });
+      k.text(words, what, { style: s("Small 14"), color: "cardMuted", name: "Tool what" });
+      rule(k, card, "hairline");
+      const foot = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Tool foot" });
+      k.text(foot, cat, { style: s("Tag 12"), color: "cardMuted", autoWidth: true, name: "Tool category" });
+      k.text(foot, teams, { style: s("Mono 13"), color: "onCard", autoWidth: true, name: "Tool teams" });
+    }
+    const api = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "API" });
+    const apiCopy = k.stack(api, { gap: 16, name: "API copy" });
+    tag(apiCopy, "Not in the directory", "onPaper");
+    k.text(apiCopy, "Anything with a webhook is four lines away.", { style: s("Section 44"), color: "text", name: "API title" });
+    k.text(apiCopy, "Send Portway any JSON and it is matched to a customer by email or your own ID. The same key reads the record back, so your own tools can be the 143rd integration.", { style: s("Lead 19"), color: "onPaper", name: "API text" });
+    k.instance(apiCopy, "Button quiet", { Label: "Open the API reference" }, { name: "API button" });
+    const code = k.stack(api, { width: 540, gap: 0, fill: "card", radius: 18, clip: true, stroke: { color: "text", width: 2, align: "INSIDE" }, effects: [soft(0.1, 14, 30)], name: "Code card" });
+    const codeBar = k.stack(code, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Code bar" });
+    for (const c of ["catC", "catA", "catB"]) k.ellipse(codeBar, 11, c, { name: "Code light" });
+    k.text(codeBar, "POST /v1/records", { style: s("Mono 13"), color: "cardMuted", name: "Code title" });
+    rule(k, code, "text", { weight: 2 });
+    const codeBody = k.stack(code, { gap: 0, padding: { top: 16, right: 20, bottom: 18, left: 20 }, name: "Code body" });
+    for (const l of ["curl https://api.portway.example/v1/records \\", '  -H "Authorization: Bearer pw_live_\u2026" \\', `  -d '{"email": "ana@northgate.example",`, `       "plan": "team", "seats": 12}'`]) k.text(codeBody, l, { style: s("Code 14"), color: "onCard", name: "Code line" });
+    const reply = k.stack(code, { direction: "HORIZONTAL", gap: 10, align: "CENTER", fill: "panel", padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Code reply" });
+    k.ellipse(reply, 10, "ok", { name: "Reply dot" });
+    k.text(reply, "200 \xB7 matched to customer cus_48213 in 41 ms", { style: s("Mono 13"), color: "onPanel", name: "Reply words" });
+    const req = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, name: "Request" });
+    const asked = k.stack(req, { gap: 20, name: "Asked" });
+    k.text(asked, "Request an integration", { style: s("Section 44"), color: "text", name: "Request title" });
+    k.text(asked, "Tell us the tool and what you would sync. The five most asked for are below; we build from the top, and write to everyone who voted when one ships.", { style: s("Body 16"), color: "onPaper", name: "Request lead" });
+    const votes = k.stack(asked, { gap: 0, name: "Votes" });
+    for (const [name, n] of WANTED) {
+      rule(k, votes, "hairline");
+      const row = k.stack(votes, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Vote" });
+      k.text(row, name, { style: s("Card 19"), color: "text", width: 120, name: "Vote name" });
+      const lane = k.stack(row, { direction: "HORIZONTAL", height: 12, radius: 6, name: "Vote lane" });
+      k.rect(lane, Math.round(n / WANTED[0][1] * 280), 12, "primary", { radius: 6, name: "Vote bar" });
+      k.text(row, `${n} votes`, { style: s("Mono 13"), color: "onPaper", autoWidth: true, name: "Vote count" });
+    }
+    const form = k.stack(req, { width: 480, gap: 14, fill: "card", radius: 24, padding: 32, stroke: { color: "hairline", width: 1, align: "INSIDE" }, effects: [soft(0.08, 16, 36)], name: "Request form" });
+    for (const [label, value, tall] of [["Which tool?", "Airtable", false], ["What would you sync?", "Bases to customer traits, every hour. We keep onboarding checklists there.", true], ["Where do we write when it ships?", "dana@fieldhouse.example", false]]) {
+      const f = k.stack(form, { gap: 6, name: "Form field" });
+      k.text(f, label, { style: s("Strong 14"), color: "onCard", name: "Field label" });
+      const box = k.stack(f, { radius: 10, padding: { top: 12, right: 14, bottom: tall ? 26 : 12, left: 14 }, stroke: { color: "hairline", width: 2, align: "INSIDE" }, name: "Field box" });
+      k.text(box, value, { style: s("Body 16"), color: "onCard", name: "Field value" });
+    }
+    k.instance(form, "Button", { Label: "Send the request" }, { name: "Request button" });
+    k.text(form, "One email when it ships. No newsletter.", { style: s("Small 14"), color: "cardMuted", name: "Request note" });
+    footer(k, sheet, {
+      about: "One record of every customer, kept in step with the tools you already use.",
+      columns: [["Integrations", ["Directory", "Featured", "API reference", "Request one"]], ["Product", ["How it works", "Pricing", "Changelog"]], ["Company", ["Security", "Status", "Contact"]]],
+      legal: "\xA9 2026 Portway Data, Inc. The tools named here are trademarks of their owners.",
+      brandStyle: s("Brand 21"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "hairline"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Featured", "Directory head", "Directory row", "API", "Request", "Footer columns"],
+      restyle: {
+        "Display 68": { laptop: "Display 58", tablet: "Display 46", mobile: "Display 36" },
+        "Section 44": { tablet: "Section 32", mobile: "Section 32" },
+        "Lead 19": { mobile: "Lead 17" },
+        "Code 14": { mobile: "Code 12" }
+      },
+      gap: { tablet: 72, mobile: 56 },
+      typing: [{ text: "Query", caret: "Caret", at: 1300, duration: 900 }],
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        const pad = (v, h = v) => ({ top: v, right: h, bottom: v, left: h });
+        const inside = CONTENT[size];
+        if (size === "laptop") {
+          each("Hero", { itemSpacing: 40 });
+          columns(kit, id, "Tool", 3, 16, inside - 220 - 32);
+          each("Sync card", { width: 460 });
+          each("Code card", { width: 500 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Featured"], 22);
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 36, counterAxisAlignItems: "MIN" });
+          each("Featured", { itemSpacing: 28, padding: pad(36), counterAxisAlignItems: "MIN" });
+          each("Directory head", { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+          each("API", { itemSpacing: 28, counterAxisAlignItems: "MIN" });
+          each("Request", { itemSpacing: 32 });
+          each("Directory row", { itemSpacing: 20 });
+          each("Categories", { layoutMode: "HORIZONTAL", layoutWrap: "WRAP", itemSpacing: 6, counterAxisSpacing: 6 });
+          each("Category", { layoutSizingHorizontal: "HUG" });
+          each("Category name", { layoutSizingHorizontal: "HUG", textAutoResize: "WIDTH_AND_HEIGHT" });
+          columns(kit, id, "Tool", size === "tablet" ? 2 : 1, 16, inside);
+        }
+        if (size === "mobile") {
+          reboard(kit, id, "Switchboard", 0.64);
+          each("Featured", { padding: pad(26, 22) });
+          each("Request form", { padding: pad(22, 20) });
+          each("Search", { padding: { top: 13, right: 14, bottom: 13, left: 14 } });
+          each("Sync from", { width: 104 });
+          each("Vote name", { width: 96 });
+          kit.named(id, "Vote bar").forEach((n, i) => kit.patch(n, { width: Math.round(WANTED[i][1] / WANTED[0][1] * 110) }));
+          each("Code body", { padding: { top: 14, right: 14, bottom: 16, left: 14 } });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_integrations_default
+};

package/dist/chunks/chunk-NBRETRWH.js

@@ -0,0 +1,128 @@
+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 {
+  SERVICES,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  dataButton,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  servicesTable,
+  ts
+} from "./chunk-KBKU6RT7.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-DDLUPUIR.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/email/style-data-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS email header";
+var DURATION = 6e3;
+var ROW_H = 36;
+var ROWS = SERVICES.slice(1, 5);
+var FLAG = ROWS.findIndex((s) => s.anomaly);
+var cues = [
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 800, amount: 0.05 } },
+  { layer: "Anomaly p99", preset: "pulse", at: 1300, params: { duration: 800, amount: 0.08 } },
+  { layer: "Strip cell", preset: "pulse", at: 3e3, stagger: { delay: 50, order: "selection" }, params: { duration: 500, amount: 0.3 } }
+];
+var style_data_header_default = defineTemplate({
+  id: "email-saas-style-data-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a launch email in a data-dense enterprise look for an observability platform: the sender, the news, the button and a small console of services with a sparkline each, one flagged red, all on the first frame; then a cobalt scan bar runs down the rows and settles on the anomaly, its figure pulses and latency cells light in a wave, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "data", "dashboard", "enterprise", "observability", "devops", "launch", "announcement", "newsletter", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "launch", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 16", display(16));
+    ts(k, "Label 12", label(12));
+    ts(k, "Offer 28", display(28, { lead: 1.08 }));
+    ts(k, "When 13", body(13));
+    ts(k, "Button 13", display(13));
+    ts(k, "Mono 12", code(12));
+    ts(k, "Name 13", code(13, 600));
+    ts(k, "Fig 13", figure(13, 500));
+    dataButton(k, "Button", { style: "Button 13", label: "See what changed", pad: [9, 14] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 24, bottom: 0, left: 24 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Band" });
+    const words = k.stack(band, { width: 236, gap: 10, name: "Words" });
+    const top = k.stack(words, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 22, style: "Brand 16" });
+    k.text(top, `Release ${SPANWISE.version}`, { style: "Mono 12", color: "onPaper", autoWidth: true, name: "Release" });
+    k.text(words, "Every anomaly\nnames its deploy.", { style: "Offer 28", color: "text", name: "Offer" });
+    k.text(words, "Change correlation lines each regression up with the deploy behind it, in seconds.", { style: "When 13", color: "onPaper", name: "When" });
+    k.instance(words, "Button", { Label: "See what changed" }, { name: "Open button" });
+    const con = panel(k, band, { width: 296, name: "Console", lift: 0.5 });
+    const bar = k.stack(con, { direction: "HORIZONTAL", height: 30, align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 12, bottom: 0, left: 12 }, name: "Title bar" });
+    k.text(bar, "SERVICES \xB7 PROD", { style: "Label 12", color: "onCard", autoWidth: true, name: "Panel title" });
+    const lv = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Live" });
+    const live = k.ellipse(lv, 7, "up", { name: "Live dot" });
+    k.text(lv, "LIVE", { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Live word" });
+    k.rect(con, "FILL", 1, "line", { name: "Bar rule" });
+    const t = servicesTable(k, con, { w: 296, rowH: ROW_H, rows: ROWS, cols: ["service", "p99", "trend"], widths: { p99: 66, trend: 70 }, styles: { head: "Label 12", name: "Name 13", sub: "Mono 12", fig: "Fig 13" }, pad: 12, headH: 24 });
+    const an = t.rows[FLAG];
+    if (an.glow) k.patch(an.glow, { opacity: 1 });
+    if (an.flag) k.patch(an.flag, { visible: false });
+    k.patch(an.p99, { characters: "2,340 ms" });
+    for (const r of t.rows) for (const reg of k.named(r.row, "Service region")) k.patch(reg, { visible: false });
+    const scan = k.rect(t.body, 4, ROW_H, "primary", { name: "Scan edge", absolute: { x: 0, y: FLAG * ROW_H } });
+    const sb = k.stack(con, { padding: { top: 8, right: 12, bottom: 10, left: 12 }, fill: "well", name: "Strip box" });
+    const st = heatMap(k, sb, { cols: 17, rows: 1, cell: 14, gap: 2.5, seed: 9, name: "Strip" });
+    for (const c of st.cells) k.patch(c, { name: "Strip cell" });
+    k.cues(sheet, cues);
+    const dy = (row) => (row - FLAG) * ROW_H;
+    k.animate(scan, "translateY", [
+      { t: 0, v: dy(0), ease: ease.hold },
+      { t: 300, v: dy(0), ease: ease.inOut("cubic") },
+      { t: 1100, v: dy(FLAG), ease: ease.hold },
+      { t: 5e3, v: dy(FLAG), ease: ease.inOut("cubic") },
+      { t: 5800, v: dy(0), ease: ease.hold },
+      { t: DURATION, v: dy(0) }
+    ]);
+    const keys = Array.from({ length: 13 }, (_, i) => ({ t: i * 500, v: i % 2 ? 0.3 : 1, ease: ease.hold }));
+    delete keys[keys.length - 1].ease;
+    k.animate(live, "opacity", keys);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_header_default
+};

package/dist/chunks/chunk-NEAOVORI.js

@@ -0,0 +1,80 @@
+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-EZUKNE3J.js";
+import {
+  logoBadge,
+  outro,
+  pill
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/kinetic/word-swap.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var swaps = [
+  { layer: "Swap", words: ["early starts.", "late shifts.", "long talks."], at: 600, hold: 900, stagger: 30, in: 500, out: 350, rise: 64 }
+];
+var cues = [
+  { layer: "Logo", preset: "pop-in", at: 0 },
+  { layer: "Lead", preset: "rise-in", at: 150 },
+  { layer: "Hours", preset: "fade-in", at: 900 },
+  outro(["Logo", "Lead", "Hours"], 7100)
+];
+var word_swap_default = defineTemplate({
+  id: "motion-kinetic-word-swap",
+  meta: {
+    name: "Word swap line",
+    description: "A caf\xE9\u2019s line whose last words keep changing, letter by letter, in one text layer with a word-swap animator \u2014 8 seconds, 16:9 with a 9:16 story cut",
+    category: "animation",
+    tags: ["animation", "kinetic type", "word swap", "letters", "cafe", "coffee", "local business"],
+    platforms: ["instagram", "tiktok", "youtube", "facebook"],
+    formats: ["video", "story", "reel", "title-card"],
+    useCases: ["brand-intro", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, swaps, loop: true },
+  build() {
+    const k = new Kit("Word swap line", preset("video-1080p"));
+    k.brand(
+      { paper: "#2A1E17", text: "#FBF3E8", accent: "#F4A259", card: "#3D2C22", onCard: "#FBF3E8" }
+    );
+    k.textStyle("Line 170", { size: 170, fontWeight: 900, letterSpacing: -5, lineHeight: 176, textAlign: "CENTER" });
+    k.textStyle("Line 128", { size: 128, fontWeight: 900, letterSpacing: -4, lineHeight: 136, textAlign: "CENTER" });
+    k.textStyle("Hours 40", { size: 40, fontWeight: 600, lineHeight: 48 });
+    pill(k, "Chip", { fill: "card", ink: "onCard", style: "Hours 40", label: "Open 6 am to 11 pm \xB7 14 Mill Lane", pad: [16, 36] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 8, titleSafe(), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 8e3, fps: 30 });
+    logoBadge(k, sheet, { fill: "card", size: 72, name: "Logo" });
+    k.stack(sheet, { height: 24, name: "Gap" });
+    k.text(sheet, "Coffee for", { style: "Line 170", color: "text", name: "Lead" });
+    k.text(sheet, "early starts.", { style: "Line 170", color: "accent", name: "Swap" });
+    k.stack(sheet, { height: 32, name: "Gap" });
+    k.instance(sheet, "Chip", { Label: "Open 6 am to 11 pm \xB7 14 Mill Lane" }, { name: "Hours" });
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, storyCut((kit, id) => restyleAll(kit, id, ["Lead", "Swap"], "Line 128")));
+    return k.finish();
+  }
+});
+
+export {
+  word_swap_default
+};