@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-QCTJAPZT.js

@@ -1,351 +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 {
-  caret,
-  tick
-} from "./chunk-YNOCYFZ4.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  CONTENT,
-  columns,
-  compactNav,
-  footer,
-  respond,
-  rule,
-  soft,
-  typeScale
-} from "./chunk-G5CURQ6H.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-YKXCPYWJ.js";
-import {
-  board,
-  reboard
-} from "./chunk-QLV6445V.js";
-import {
-  line
-} from "./chunk-BNVLVZUT.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.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", name: "Sync to" });
-      k.text(row, rows, { style: s("Mono 13"), color: "panelMuted", autoWidth: true, 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-QFB3NCY2.js

@@ -1,102 +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 {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/ambient-loop.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var GLOW_HANDLES = [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }];
-var wiggle = (seed) => ({
-  kind: "noise",
-  amp: 0,
-  freq: 1.2,
-  octaves: 2,
-  seed,
-  animated: { amp: [{ id: "k1", t: 0, v: 0, out: ease.inOut("sine") }, { id: "k2", t: 3e3, v: 36, out: ease.inOut("sine") }, { id: "k3", t: 6e3, v: 0, out: ease.linear }] }
-});
-var ambient_loop_default = defineTemplate({
-  id: "motion-ambient-loop",
-  meta: {
-    name: "Ambient loop",
-    description: "A six-second background that loops without a seam, made with behaviours: orbiting glows, a breathing title on a custom curve, a radar ping, a scrolling stripe band and a wiggle that swells and settles \u2014 1080\xD71080 at 30 fps",
-    category: "animation",
-    tags: ["animation", "loop", "background", "behaviours", "ambient"],
-    platforms: ["instagram"],
-    formats: ["post", "video"],
-    useCases: [],
-    created: "2026-09-28",
-    updated: "2026-09-29"
-  },
-  build() {
-    const k = new Kit("Ambient loop", preset("ig-post"));
-    k.brand({ primary: "#10131F", accent: "#FF7A59", paper: "#F4EFE6", muted: "#8A90A6", glow: "#6C63FF", onAccent: "#10131F", onPrimary: "#F4EFE6" });
-    k.textStyle("Kicker 30", { size: 30, fontWeight: 600, lineHeight: 38, letterSpacing: 6 });
-    k.textStyle("Title 120", { size: 120, fontWeight: 800, lineHeight: 124, letterSpacing: -4 });
-    k.textStyle("Pill 28", { size: 28, fontWeight: 700, lineHeight: 34 });
-    const glow = (role) => [k.gradient({ from: role, to: role, kind: "RADIAL", toOpacity: 0, handles: GLOW_HANDLES })];
-    k.component("Orb", { width: 520, height: 520, radius: 999 }, (id) => {
-      const g = k.ellipse(id, 520, glow("glow"), { name: "Glow" });
-      k.patch(g, { layoutSizingHorizontal: "FILL", layoutSizingVertical: "FILL" });
-    });
-    k.component("Pill", { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "accent", radius: 999, padding: { top: 14, right: 30, bottom: 14, left: 30 }, props: { Label: "Now playing" } }, (id) => {
-      k.propText(id, "Label", { style: "Pill 28", color: "onAccent", autoWidth: true });
-    });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 28, { top: 96, right: 72, bottom: 96, left: 72 }, "primary", "CENTER", "CENTER");
-    k.timeline(sheet, { duration: 6e3, fps: 30 });
-    const glowLayer = k.named(k.componentIdOf("Orb"), "Glow")[0];
-    const orb = (name, role, at, scale, opacity) => {
-      const id = k.instance(sheet, "Orb", {}, { name, absolute: at });
-      k.patch(id, { opacity, scaleX: scale, scaleY: scale, overrides: { [glowLayer]: { fills: glow(role) } } });
-      return id;
-    };
-    const warm = orb("Orb warm", "accent", { x: -120, y: -80 }, 1.0769230769230769, 0.75);
-    k.behave(warm, "x", [{ kind: "sine", amp: 70, freq: 1 / 6, phase: 0.25 }]);
-    k.behave(warm, "y", [{ kind: "sine", amp: 50, freq: 1 / 6 }]);
-    k.behave(warm, "rotation", [{ kind: "spin", rate: 60 }]);
-    const cool = orb("Orb cool", "glow", { x: 560, y: 520 }, 1.1923076923076923, 0.75);
-    k.behave(cool, "x", [{ kind: "sine", amp: 90, freq: 1 / 3, phase: 0.5 }]);
-    for (const axis of ["scaleX", "scaleY"]) k.behave(cool, axis, [{ kind: "sine", amp: 0.08, freq: 1 / 3 }]);
-    const soft = orb("Orb soft", "paper", { x: 700, y: -40 }, 0.6923076923076923, 0.35);
-    k.behave(soft, "x", [wiggle(7)]);
-    k.behave(soft, "y", [wiggle(11)]);
-    const stripes = k.stack(sheet, { direction: "HORIZONTAL", width: 1200, gap: 40, clip: true, absolute: { x: -80, y: 980 }, name: "Stripes" });
-    for (let i = 0; i < 16; i++) k.rect(stripes, 40, 8, "muted", { radius: 4, opacity: 0.5, name: "Stripe" });
-    k.behave(stripes, "translateX", [{ kind: "spin", rate: -80 }, { kind: "mod", period: 80, offset: -80 }]);
-    const ping = k.stack(sheet, { width: 300, height: 300, radius: 999, clip: true, stroke: { color: "accent", width: 3 }, absolute: { x: 390, y: 400 }, name: "Ping" });
-    for (const axis of ["scaleX", "scaleY"]) {
-      k.animate(ping, axis, [{ t: 0, v: 0.6, ease: ease.out("cubic") }, { t: 2e3, v: 1.5 }]);
-      k.behave(ping, axis, [{ kind: "loop", mode: "cycle" }]);
-    }
-    k.animate(ping, "opacity", [{ t: 0, v: 0.9, ease: ease.out("quad") }, { t: 2e3, v: 0 }]);
-    k.behave(ping, "opacity", [{ kind: "loop", mode: "cycle" }]);
-    k.text(sheet, "LATE NIGHT RADIO", { style: "Kicker 30", color: "muted", align: "CENTER", name: "Kicker" });
-    const title = k.text(sheet, "Stay a while", { style: "Title 120", color: "onPrimary", width: 860, align: "CENTER", name: "Title" });
-    for (const axis of ["scaleX", "scaleY"]) {
-      k.animate(title, axis, [{ t: 0, v: 1, ease: ease.bezier(0.45, 0, 0.2, 1) }, { t: 1500, v: 1.04 }]);
-      k.behave(title, axis, [{ kind: "loop", mode: "pingpong" }]);
-    }
-    const pill = k.instance(sheet, "Pill", { Label: "Now playing" }, { name: "Now playing" });
-    k.behave(pill, "translateY", [{ kind: "bounce", amp: -28, freq: 2.5, decay: 0.45, start: 200 }]);
-    return k.finish();
-  }
-});
-
-export {
-  ambient_loop_default
-};