@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-CGGPGDMW.js

@@ -0,0 +1,219 @@
+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 {
+  aiAvailability,
+  effectiveChatModel,
+  effectiveEmbeddingModel,
+  markImageModelUnavailable,
+  useAiStore
+} from "./chunk-3ZOB33EA.js";
+import {
+  activeHyperyTeamId
+} from "./chunk-RTVXZZGS.js";
+import {
+  accessToken
+} from "./chunk-ZTNA7M3C.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/ai/client.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/hypery/client.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/hypery/shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var HYPERY_TEAM_HEADER = "x-hypery-active-organization-id";
+
+// lib/hypery/client.ts
+async function hyperyRequestHeaders() {
+  const token = await accessToken();
+  if (!token) return null;
+  const headers = new Headers({ authorization: `Bearer ${token}` });
+  const team = activeHyperyTeamId();
+  if (team) headers.set(HYPERY_TEAM_HEADER, team);
+  return headers;
+}
+
+// lib/ai/image-models.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var IMAGE_FAVORITES = [
+  { id: "google/gemini-3.1-flash-image", label: "Nano Banana 2", vector: "option", edits: true, description: "Fast, balanced image generation and editing that follows detailed instructions. Can also write and edit SVG." },
+  { id: "google/gemini-3-pro-image", label: "Nano Banana Pro", vector: "option", edits: true, description: "Studio-quality images, legible text and precise edits. Can also write and edit SVG." },
+  { id: "google/gemini-3.1-flash-lite-image", label: "Nano Banana 2 Lite", vector: "option", edits: true, description: "Google\u2019s fastest image model for quick iterations and edits. Can also write and edit SVG." },
+  { id: "google/gemini-2.5-flash-image", label: "Nano Banana", vector: "option", edits: true, description: "The original Nano Banana: conversational image generation and editing. Can also write and edit SVG." },
+  { id: "recraft/recraft-v4.1", label: "Recraft V4.1", vector: "option", description: "Natural photorealism, dreamy gradients and new illustration styles; reads short prompts well. Vector output available." },
+  { id: "recraft/recraft-v4.1-pro", label: "Recraft V4.1 Pro", vector: "option", description: "Recraft V4.1 at higher resolution, for detailed final artwork. Vector output available." },
+  { id: "recraft/recraft-v4.1-utility", label: "Recraft V4.1 Utility", vector: "option", description: "Restrained look: flat lighting, front-facing composition and simple scenes \u2014 good for assets and product shots. Vector output available." },
+  { id: "recraft/recraft-v4.1-utility-pro", label: "Recraft V4.1 Utility Pro", vector: "option", description: "Recraft V4.1 Utility at higher resolution. Vector output available." },
+  { id: "recraft/recraft-v4", label: "Recraft V4", vector: "option", description: "Strong photorealism and distinctive lighting and composition; original characters for illustration. Vector output available." },
+  { id: "recraft/recraft-v4-pro", label: "Recraft V4 Pro", vector: "option", description: "Recraft V4 at higher resolution. Vector output available." },
+  { id: "recraft/recraft-v3", label: "Recraft V3", vector: "option", description: "Photorealism and accurate text rendering, including text placed at specific positions. Vector output available." },
+  { id: "recraft/recraft-v2", label: "Recraft V2", vector: "option", description: "Anatomy-accurate images with minimalist icon and illustration styles. Vector output available." }
+];
+var IMAGE_ACTIONS = {
+  removeBackground: { id: "recraft-ai/recraft-remove-background", label: "Remove background", svg: false, description: "Cuts the subject out onto a transparent background." },
+  vectorize: { id: "recraft-ai/recraft-vectorize", label: "Vectorize", svg: true, description: "Traces the image into editable SVG layers." },
+  crispUpscale: { id: "recraft-ai/recraft-crisp-upscale", label: "Crisp upscale", svg: false, description: "Sharper, cleaner, higher-resolution copy." },
+  creativeUpscale: { id: "recraft-ai/recraft-creative-upscale", label: "Creative upscale", svg: false, description: "Upscales while adding fine detail." }
+};
+var normalizeModelId = (id) => id.trim().toLowerCase().replace(/^recraft-ai\//, "recraft/");
+var favoriteById = (id) => IMAGE_FAVORITES.find((f) => normalizeModelId(f.id) === normalizeModelId(id));
+function vectorSupport(id) {
+  const fav = favoriteById(id);
+  if (fav) return fav.vector;
+  if (/-svg$|vector/i.test(id)) return "always";
+  return /^recraft\//i.test(normalizeModelId(id)) || CHAT_IMAGE_MODEL.test(id) ? "option" : void 0;
+}
+var modelEditsImages = (id) => favoriteById(id)?.edits ?? CHAT_IMAGE_MODEL.test(id);
+var IMAGE_PROVIDER = "vercel";
+var CHAT_IMAGE_MODEL = /^google\/gemini-/i;
+var ASPECT_SIZES = {
+  "1:1": { width: 1024, height: 1024 },
+  "4:3": { width: 1152, height: 896 },
+  "3:4": { width: 896, height: 1152 },
+  "16:9": { width: 1344, height: 768 },
+  "9:16": { width: 768, height: 1344 },
+  "3:2": { width: 1216, height: 832 },
+  "2:3": { width: 832, height: 1216 }
+};
+function sizeForAspect(aspect) {
+  const s = ASPECT_SIZES[aspect] ?? ASPECT_SIZES["1:1"];
+  return { aspect: ASPECT_SIZES[aspect] ? aspect : "1:1", ...s };
+}
+
+// lib/ai/client.ts
+var AiClientError = class extends Error {
+  constructor(message, code, status) {
+    super(message);
+    this.code = code;
+    this.status = status;
+  }
+  code;
+  status;
+};
+var needsReauth = (e) => e instanceof AiClientError && (e.code === "ai_reauth" || e.code === "ai_scope" || e.code === "unauthenticated");
+function ensureAvailable() {
+  const a = aiAvailability();
+  if (!a.ok) throw new AiClientError(a.message, a.reason, 0);
+}
+async function aiFetch(path, init = {}) {
+  ensureAvailable();
+  const headers = await hyperyRequestHeaders();
+  if (!headers) throw new AiClientError("Sign in with Hypery to use AI features.", "signed-out", 401);
+  if (init.json !== void 0) headers.set("content-type", "application/json");
+  let res;
+  try {
+    res = await fetch(path, { method: init.method ?? (init.json !== void 0 ? "POST" : "GET"), headers, body: init.json === void 0 ? void 0 : JSON.stringify(init.json), signal: init.signal });
+  } catch (e) {
+    if (e?.name === "AbortError") throw e;
+    throw new AiClientError(navigator.onLine ? "Could not reach the server." : "You are offline \u2014 AI features need a connection.", "network", 0);
+  }
+  if (!res.ok) {
+    const data = await res.json().catch(() => null);
+    throw new AiClientError(data?.error?.message ?? `AI request failed (HTTP ${res.status}).`, data?.error?.code ?? "error", res.status);
+  }
+  return res;
+}
+function requireChatModel() {
+  const m = effectiveChatModel();
+  if (!m) throw new AiClientError("Pick a chat model in AI settings first.", "no_model", 0);
+  return m;
+}
+async function loadChatCatalog(force = false) {
+  const st = useAiStore.getState();
+  if (!aiAvailability().ok || st.catalogLoading || st.catalog && !force) return;
+  useAiStore.setState({ catalogLoading: true, catalogError: null });
+  try {
+    const data = await (await aiFetch("/api/ai/models")).json();
+    useAiStore.setState({ catalog: data });
+  } catch (e) {
+    useAiStore.setState({ catalogError: e.message });
+  } finally {
+    useAiStore.setState({ catalogLoading: false });
+  }
+}
+async function loadAudioCatalog() {
+  const st = useAiStore.getState();
+  if (!aiAvailability().ok || st.audioModelsLoading || st.audioModels) return;
+  useAiStore.setState({ audioModelsLoading: true });
+  try {
+    const data = await (await aiFetch("/api/ai/models?kind=audio")).json();
+    useAiStore.setState({ audioModels: data.models.map((m) => m.id) });
+  } catch {
+  } finally {
+    useAiStore.setState({ audioModelsLoading: false });
+  }
+}
+async function loadImageCatalog(search = "", force = false) {
+  const st = useAiStore.getState();
+  if (!aiAvailability().ok || st.imagesLoading || st.images && !force && !search) return;
+  useAiStore.setState({ imagesLoading: true, imagesError: null });
+  try {
+    const q = new URLSearchParams({ kind: "image" });
+    if (search.trim()) q.set("search", search.trim());
+    const data = await (await aiFetch(`/api/ai/models?${q}`)).json();
+    useAiStore.setState({ images: data });
+  } catch (e) {
+    useAiStore.setState({ imagesError: e.message });
+  } finally {
+    useAiStore.setState({ imagesLoading: false });
+  }
+}
+async function requestDesign(opts, signal) {
+  const res = await aiFetch("/api/ai/generate", { json: { ...opts, model: requireChatModel() }, signal });
+  return (await res.json()).design;
+}
+async function requestEmbeddings(values, signal) {
+  const model = effectiveEmbeddingModel();
+  if (!model) throw new AiClientError("Pick an embedding model in AI settings first.", "no_model", 0);
+  const res = await aiFetch("/api/ai/embed", { json: { values, model }, signal });
+  return { model, embeddings: (await res.json()).embeddings };
+}
+async function imageResponse(res) {
+  const blob = await res.blob();
+  return { blob, mime: res.headers.get("content-type") ?? blob.type, modelId: res.headers.get("x-ai-model") ?? "" };
+}
+async function requestImage(model, req, signal) {
+  try {
+    const res = await aiFetch("/api/ai/image", { json: { model: model.id, provider: IMAGE_PROVIDER, ...req }, signal });
+    return await imageResponse(res);
+  } catch (e) {
+    if (e instanceof AiClientError && e.code === "ai_model") markImageModelUnavailable(model.id);
+    throw e;
+  }
+}
+async function requestImageAction(action, imageDataUrl, signal) {
+  const res = await aiFetch("/api/ai/image", { json: { action, image: imageDataUrl }, signal });
+  return imageResponse(res);
+}
+async function requestAudio(req, signal) {
+  const res = await aiFetch("/api/ai/audio", { json: req, signal });
+  const blob = await res.blob();
+  return { blob, mime: res.headers.get("content-type") ?? blob.type, modelId: res.headers.get("x-ai-model") ?? "" };
+}
+
+export {
+  HYPERY_TEAM_HEADER,
+  IMAGE_ACTIONS,
+  vectorSupport,
+  modelEditsImages,
+  sizeForAspect,
+  AiClientError,
+  needsReauth,
+  aiFetch,
+  loadChatCatalog,
+  loadAudioCatalog,
+  loadImageCatalog,
+  requestDesign,
+  requestEmbeddings,
+  requestImage,
+  requestImageAction,
+  requestAudio
+};

package/dist/chunks/chunk-CGOCMPN2.js

@@ -0,0 +1,181 @@
+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 {
+  productWindow
+} from "./chunk-DDDHXHRL.js";
+import {
+  gridPaths,
+  tickPath
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  each,
+  pattern,
+  put,
+  redraw,
+  restyle,
+  sizeOf
+} from "./chunk-QLV6445V.js";
+import {
+  glow,
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-kit-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DEPLOYS = [
+  ["fix/webhook-retry", "pr-481.halyard.example", "41 s"],
+  ["chore/node-22", "pr-479.halyard.example", "36 s"],
+  ["feat/usage-export", "pr-476.halyard.example", "44 s"],
+  ["docs/api-keys", "pr-475.halyard.example", "29 s"],
+  ["fix/timezone-math", "pr-473.halyard.example", "40 s"],
+  ["feat/team-invites", "pr-470.halyard.example", "37 s"],
+  ["fix/empty-state", "pr-468.halyard.example", "33 s"],
+  ["feat/audit-log", "pr-466.halyard.example", "42 s"],
+  ["chore/eslint-9", "pr-463.halyard.example", "31 s"],
+  ["fix/retry-backoff", "pr-461.halyard.example", "39 s"],
+  ["feat/sso-okta", "pr-458.halyard.example", "45 s"]
+];
+var grid = (w, h) => gridPaths(w, h, 40, 1);
+function furnish(k, sheet, o = { win: 600 }) {
+  k.finish();
+  const { w, h } = sizeOf(k, sheet);
+  const toast = k.named(sheet, "Toast")[0];
+  redraw(k, sheet, "Grid", grid);
+  const x = Math.round(w - o.win + 44), y = Math.round(h * 0.14);
+  put(k, sheet, "Window", x, y, { width: o.win });
+  put(k, sheet, "Window glow", x - 260, y - 240);
+  put(k, sheet, "Toast", Math.round(x - k.node(toast).width + 16), Math.round(h * (o.toastY ?? 0.7)));
+  put(k, sheet, "Edge light", 0, 0, { width: w });
+}
+var saas_kit_link_preview_default = defineTemplate({
+  id: "social-saas-kit-link-preview",
+  meta: {
+    name: "SaaS launch link preview set",
+    description: "The picture your link unfurls as, in the dark precision look: the promise in tight white type, the proof as one line of shell, and a crop of the product (a deploy list with its newest row lit, a \u201Cpreview ready\u201D toast over its edge). 1200 \xD7 630 Open Graph, with GitHub social preview, X and LinkedIn sizes",
+    category: "social",
+    tags: ["saas", "saas launch", "link preview", "open graph", "og image", "github", "social preview", "dark", "dark precision", "developer tool", "product ui"],
+    platforms: ["web", "x", "linkedin", "github", "facebook"],
+    formats: ["og-image", "banner", "post"],
+    useCases: ["launch", "brand-intro", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("SaaS launch link preview set", preset("og-image"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#090B0F", text: "#F4F6FA", onPaper: "#A3ACBA", accent: "#B9F25A", onAccent: "#0B1202" },
+      { name: "Halyard", promise: "Every pull request gets its own URL.", site: "halyard.example" }
+    );
+    k.palette({ win: "#10141B", winBar: "#161B24", winLine: "#262D3A", winInk: "#E9EDF3", winMuted: "#95A0B2", lit: "#18220C", signal: "#B9F25A", toast: "#1B212C" });
+    k.textStyle("Brand 24", { size: 24, fontWeight: 700, letterSpacing: -0.4, lineHeight: 30 });
+    k.textStyle("Display 64", { size: 64, fontWeight: 700, letterSpacing: -2.8, lineHeight: 66 });
+    k.textStyle("Display 92", { size: 92, fontWeight: 700, letterSpacing: -4.2, lineHeight: 94 });
+    k.textStyle("Shell 19", { ...MONO, size: 19, fontWeight: 500, lineHeight: 28 });
+    k.textStyle("Shell 26", { ...MONO, size: 26, fontWeight: 500, lineHeight: 38 });
+    k.textStyle("Chip 17", { ...MONO, size: 17, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Win title 16", { ...MONO, size: 16, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Row 17", { ...MONO, size: 17, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Row meta 16", { ...MONO, size: 16, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Win title 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 28 });
+    k.textStyle("Row 24", { ...MONO, size: 24, fontWeight: 600, lineHeight: 30 });
+    k.textStyle("Row meta 22", { ...MONO, size: 22, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Toast 26", { size: 26, fontWeight: 700, letterSpacing: -0.3, lineHeight: 32 });
+    k.textStyle("Toast 19", { size: 19, fontWeight: 700, letterSpacing: -0.2, lineHeight: 24 });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 17", label: "halyard.example", pad: [8, 14], radius: 6 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 60, right: 560, bottom: 56, left: 68 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    pattern(k, sheet, "Grid", "text", grid, 0.045);
+    glow(k, sheet, { x: 0, y: 0, w: 900, role: "accent", alpha: 0.17, name: "Window glow" });
+    k.rect(sheet, 1200, 2, [k.gradient({ from: "accent", to: "accent", angle: 0, fromOpacity: 0.9, toOpacity: 0 })], { name: "Edge light", absolute: { x: 0, y: 0 } });
+    const { win, body } = productWindow(k, sheet, {
+      width: 600,
+      height: 640,
+      title: "halyard \xB7 acme/storefront \xB7 deploys",
+      absolute: { x: 0, y: 0 },
+      look: { fill: "win", bar: "winBar", titleStyle: "Win title 16", titleInk: "winMuted", dots: "winLine", radius: 14, barHeight: 48, rule: "winLine", stroke: { color: "winLine", width: 1, align: "INSIDE" }, effects: [shadow(k, "paper", 0.7, 30, 80)] }
+    });
+    const lit = k.stack(body, { direction: "HORIZONTAL", gap: 14, align: "CENTER", fill: "lit", padding: { top: 18, right: 22, bottom: 18, left: 22 }, name: "Newest deploy" });
+    k.rect(lit, 4, 44, "signal", { name: "Lit edge", absolute: { x: 0, y: 6 } });
+    k.ellipse(lit, 10, "signal", { name: "Status", effects: [shadow(k, "signal", 0.9, 0, 12)] });
+    const newest = k.stack(lit, { gap: 2, name: "Newest words" });
+    k.text(newest, "feat/checkout-v2", { style: "Row 17", color: "winInk", name: "Newest branch" });
+    k.text(newest, "pr-482.halyard.example \xB7 ready in 38 s", { style: "Row meta 16", color: "signal", name: "Newest url" });
+    for (const [branch, url, time] of DEPLOYS.slice(0, 9)) {
+      k.rect(body, "FILL", 1, "winLine", { name: "Row rule" });
+      const row = k.stack(body, { direction: "HORIZONTAL", gap: 14, align: "CENTER", padding: { top: 15, right: 22, bottom: 15, left: 22 }, name: "Deploy" });
+      k.ellipse(row, 10, "signal", { name: "Status" });
+      k.text(row, branch, { style: "Row 17", color: "winInk", width: 216, name: "Branch" });
+      k.text(row, url, { style: "Row meta 16", color: "winMuted", name: "Url" });
+      k.text(row, time, { style: "Row meta 16", color: "winMuted", autoWidth: true, name: "Time" });
+    }
+    void win;
+    const toast = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", fill: "toast", radius: 12, padding: { top: 14, right: 22, bottom: 14, left: 14 }, stroke: { color: "winLine", width: 1, align: "INSIDE" }, effects: [shadow(k, "paper", 0.8, 18, 40)], name: "Toast", absolute: { x: 0, y: 0 } });
+    const seal = k.stack(toast, { direction: "HORIZONTAL", width: 40, height: 40, radius: 20, fill: "accent", align: "CENTER", justify: "CENTER", name: "Seal" });
+    k.vector(seal, 18, 14, [tickPath(18, 14)], "onAccent", { name: "Tick", strokeWidth: 3.5 });
+    const said = k.stack(toast, { width: "HUG", gap: 0, name: "Toast words" });
+    k.text(said, "Preview ready", { style: "Toast 19", color: "winInk", autoWidth: true, name: "Toast title" });
+    k.text(said, "pr-482 \xB7 3 checks passed", { style: "Row meta 16", color: "winMuted", autoWidth: true, name: "Toast note" });
+    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand" });
+    logoBadge(k, brand, { fill: "accent", size: 26, pad: 9, radius: 10 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 24", color: "text", name: "Name" });
+    const copy = k.stack(sheet, { gap: 22, name: "Copy" });
+    k.text(copy, "{{brand.promise}}", { style: "Display 64", color: "text", name: "Promise" });
+    k.text(copy, "$ git push   # live in 38 s, no config", { style: "Shell 19", color: "onPaper", name: "Shell" });
+    k.instance(sheet, "Chip", { Label: "{{brand.site}}" }, { name: "Site" });
+    furnish(k, sheet);
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 60, right: 600, bottom: 56, left: 68 } });
+        furnish(kit, id, { win: 640 });
+      } },
+      { preset: "linkedin-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 60, right: 560, bottom: 56, left: 68 } });
+        furnish(kit, id);
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 84, right: 800, bottom: 80, left: 96 } });
+        restyle(kit, id, "Promise", "Display 92");
+        restyle(kit, id, "Shell", "Shell 26");
+        each(kit, id, "Copy", (n) => kit.patch(n, { itemSpacing: 30, counterAxisSpacing: 30 }));
+        for (const [name, style] of [["Window title", "Win title 22"], ["Newest branch", "Row 24"], ["Branch", "Row 24"], ["Newest url", "Row meta 22"], ["Url", "Row meta 22"], ["Time", "Row meta 22"], ["Toast title", "Toast 26"], ["Toast note", "Row meta 22"]]) restyle(kit, id, name, style);
+        each(kit, id, "Branch", (n) => kit.patch(n, { width: 300 }));
+        each(kit, id, "Deploy", (n) => kit.patch(n, { padding: { top: 21, right: 30, bottom: 21, left: 30 }, itemSpacing: 18 }));
+        each(kit, id, "Newest deploy", (n) => kit.patch(n, { padding: { top: 24, right: 30, bottom: 24, left: 30 }, itemSpacing: 18 }));
+        each(kit, id, "Lit edge", (n) => kit.patch(n, { height: 62, y: 10 }));
+        each(kit, id, "Title bar", (n) => kit.patch(n, { height: 62, padding: { top: 0, right: 30, bottom: 0, left: 30 } }));
+        each(kit, id, "Window", (n) => kit.patch(n, { height: 900 }));
+        each(kit, id, "Screen", (n) => kit.patch(n, { height: 840 }));
+        furnish(kit, id, { win: 800, toastY: 0.735 });
+      } }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  saas_kit_link_preview_default
+};

package/dist/chunks/chunk-CHMVWKSN.js

@@ -0,0 +1,149 @@
+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 {
+  FIZZ,
+  bowl,
+  burst,
+  burstSticker,
+  callComponent,
+  chromeText,
+  cutout,
+  display,
+  halftone,
+  marquee,
+  maxBrand,
+  mono,
+  plate,
+  spark,
+  spin,
+  sticker,
+  stickerEdge,
+  wobble
+} from "./chunk-R6PLM65D.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-6EL7PK63.js";
+import {
+  ground
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/style-maximal-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Maximal SaaS email header";
+var DURATION = 6e3;
+var CUT = 1e3;
+var cues = [
+  wobble("Seal", 0, { angle: 8 }),
+  wobble("Seal", 3e3, { angle: 8 }),
+  { layer: "Call", preset: "pulse", at: 1500, params: { duration: 800, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: 4500, params: { duration: 800, amount: 0.05 } }
+];
+var style_maximal_header_default = defineTemplate({
+  id: "email-saas-style-maximal-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: 'A 600 \xD7 300 animated header for a launch email in a maximalist Y2K look: "AUTO-BOP IS HERE." in chrome on a black plate, the line, a lime button and the site, all on the first frame (for Outlook); beside them a tilted vertical clip cuts every second with its caption chip, a seal rocks, a burst turns and a band runs, all returning to where they began. A seamless 6-second GIF',
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "maximalist", "y2k", "chrome", "stickers", "creator", "video", "ai", "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;
+    maxBrand(k);
+    display(k, "Hook 40", 40, 0.95);
+    display(k, "Line 15", 15, 1.25);
+    display(k, "Button 15", 15, 1.2);
+    display(k, "Chip 18", 18, 1);
+    display(k, "Seal 26", 26, 0.9);
+    mono(k, "Tag 12", 12);
+    callComponent(k, { style: "Button 15", label: "Try Pro free", pad: [9, 16], drop: 4, weight: 3 });
+    const sheet = k.sheet;
+    ground(k, sheet, "Email header", "paper");
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    halftone(k, sheet, 220, "pinkDeep", { name: "Dots", absolute: { x: 380, y: -40 }, step: 14 });
+    const big = burst(k, sheet, 230, "accent", { name: "Big burst", points: 20, depth: 0.13, outline: 3, absolute: { x: 380, y: 60 } });
+    spin(k, big, 1 / 20, DURATION);
+    marquee(k, sheet, {
+      name: "Foot band",
+      width: 640,
+      height: 34,
+      w: 64,
+      fill: "night",
+      loop: DURATION,
+      cells: 1,
+      rotate: -2,
+      absolute: { x: -20, y: 272 },
+      cell: (c) => {
+        spark(k, c, 18, "primary", { name: "Band spark" });
+        k.rect(c, 20, 9, "chromeHi", { radius: 9, name: "Band pill" });
+      }
+    });
+    const words = k.stack(sheet, { width: 330, gap: 12, name: "Words", absolute: { x: 22, y: 22 } });
+    const pl = plate(k, words, { name: "Plate", width: "HUG", rotate: -2, pad: [12, 16], shadow: 6, radius: 12 });
+    chromeText(k, pl, "AUTO-BOP\nIS HERE.", { style: "Hook 40", name: "Hook", size: 40, shadow: 3 });
+    k.text(words, `${FIZZ.name} ${FIZZ.version} cuts every clip on the beat, captioned and stickered.`, { style: "Line 15", color: "text", width: "FILL", name: "Line" });
+    const row = k.stack(words, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Call row" });
+    k.instance(row, "Call", { Label: "Try Pro free" }, { name: "Call" });
+    sticker(k, row, "{{brand.site}}", { fill: "card", ink: "onCard", style: "Tag 12", shape: "tag", pad: [6, 10], weight: 2, drop: 3, rotate: 3, name: "Site" });
+    const cw = 130, ch = 220;
+    const clip = k.stack(sheet, { width: cw, height: ch, radius: 16, clip: true, ...stickerEdge(k, 3, 6), name: "Clip", absolute: { x: 420, y: 34 } });
+    k.patch(clip, { rotation: 6 });
+    const shot = (name, fill, art, word) => {
+      const f = k.frame(clip, { x: 0, y: 0, width: cw, height: ch }, { name, fill });
+      k.patch(f, { layoutPositioning: "ABSOLUTE" });
+      art(f);
+      const chip = sticker(k, f, word, { fill: "card", ink: "onCard", style: "Chip 18", shape: "tag", rotate: -5, pad: [3, 8], weight: 2, drop: 2, name: "Clip chip", absolute: { x: 10, y: ch - 46 } });
+      return { f, chip };
+    };
+    const sC = shot("Shot C", "primary", (f) => cutout(k, f, 110, 140, { top: "secondary", skin: "skinDeep", absolute: { x: 10, y: ch - 140 } }), "SLAPS!");
+    const sB = shot("Shot B", "accent", (f) => bowl(k, f, 100, 100, { fill: "card", absolute: { x: 15, y: 50 } }), "SAUCE");
+    const sA = shot("Shot A", "secondary", (f) => cutout(k, f, 110, 140, { top: "accent", absolute: { x: 10, y: ch - 140 } }), "THIS");
+    burstSticker(k, sheet, [{ text: `${FIZZ.seconds}s`, style: "Seal 26" }, { text: "TO CLIPS", style: "Tag 12" }], { size: 96, fill: "primary", ink: "onPrimary", name: "Seal", points: 24, depth: 0.08, rotate: -8, absolute: { x: 508, y: 172 } });
+    spark(k, sheet, 34, "card", { outline: 2, name: "Spark", absolute: { x: 555, y: 30 } });
+    k.cues(sheet, cues);
+    [sA, sB, sC].forEach((sh, i) => {
+      const on = (t) => Math.floor(t / CUT) % 3 === i;
+      const keys = [{ t: 0, v: on(0) ? 1 : 0, ease: ease.hold }];
+      for (let t = CUT; t < DURATION; t += CUT) keys.push({ t: t - 1, v: on(t - 1) ? 1 : 0, ease: ease.hold }, { t, v: on(t) ? 1 : 0, ease: ease.hold });
+      keys.push({ t: DURATION - 1, v: on(DURATION - 1) ? 1 : 0, ease: ease.hold }, { t: DURATION, v: on(0) ? 1 : 0 });
+      k.animate(sh.f, "opacity", keys);
+      k.patch(sh.chip, { anchorX: 0.5, anchorY: 0.5 });
+      const starts = Array.from({ length: DURATION / CUT }, (_, j) => j * CUT).filter((t) => t > 0 && on(t));
+      const pop = starts.flatMap((t) => [{ t, v: 0.3, ease: ease.back(2.6) }, { t: t + 300, v: 1, ease: ease.hold }]);
+      if (pop.length) {
+        delete pop[pop.length - 1].ease;
+        for (const p of ["scaleX", "scaleY"]) k.animate(sh.chip, p, pop);
+      }
+    });
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_maximal_header_default
+};