@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-W43KI3R7.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-OYL5V7XB.js";
+import {
+  gridPaths,
+  tickPath
+} from "./chunk-Y6DFTJFC.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  each,
+  pattern,
+  put,
+  redraw,
+  restyle,
+  sizeOf
+} from "./chunk-T3XFQJUI.js";
+import {
+  glow,
+  shadow
+} from "./chunk-PCZTQVV6.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.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-W4YKVLKC.js

@@ -0,0 +1,90 @@
+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 {
+  external_exports
+} from "./chunk-KEXC6WFQ.js";
+import {
+  AGENT_CAPABILITIES,
+  agentContext,
+  agentTool,
+  agentToolList,
+  registerCommands
+} from "./chunk-SAXQWIVH.js";
+import {
+  dispatch
+} from "./chunk-MFQDAQ4W.js";
+import {
+  ToolError
+} from "./chunk-XTE5XPON.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// lib/agent/tools/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/ai/tool-schema.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function toolParameters(schema) {
+  const json = external_exports.toJSONSchema(schema);
+  delete json.$schema;
+  return json;
+}
+
+// lib/agent/tools/types.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function defineTool(tool) {
+  return tool;
+}
+
+// lib/agent/tools/index.ts
+function registerTools(tools) {
+  registerCommands(tools);
+}
+function getTool(name) {
+  return agentTool(name);
+}
+function allTools() {
+  return agentToolList();
+}
+function toolSpecs(names) {
+  const tools = names?.length ? names.map((n) => agentTool(n)).filter((t) => !!t) : allTools();
+  return tools.map((t) => ({
+    type: "function",
+    function: { name: t.name, description: t.description, parameters: toolParameters(t.parameters) }
+  }));
+}
+async function runTool(name, argsText, ctx) {
+  let raw = {};
+  if (argsText.trim()) {
+    try {
+      raw = JSON.parse(argsText);
+    } catch {
+      throw new ToolError(`The arguments for ${name} were not valid JSON.`, "invalid_params");
+    }
+  }
+  return dispatch(name, {
+    surface: "agent",
+    params: raw,
+    ctx: agentContext(ctx),
+    capabilities: AGENT_CAPABILITIES,
+    errorClass: ToolError,
+    messages: {
+      notFound: (key) => `No tool named "${key}". Use one of: ${allTools().map((t) => t.name).join(", ")}.`,
+      invalidParams: (key, issues) => `Invalid arguments for ${key} \u2014 ${issues}`
+    }
+  });
+}
+
+export {
+  defineTool,
+  registerTools,
+  getTool,
+  allTools,
+  toolSpecs,
+  runTool
+};

package/dist/chunks/chunk-W5VJJRBX.js

@@ -0,0 +1,237 @@
+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 {
+  drawn,
+  soft
+} from "./chunk-VNL6UXIR.js";
+import {
+  flatPhone,
+  uiRoles
+} from "./chunk-IASGZ3MK.js";
+import {
+  stars
+} from "./chunk-Y6DFTJFC.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  ground
+} from "./chunk-T3XFQJUI.js";
+import {
+  glow
+} from "./chunk-PCZTQVV6.js";
+import {
+  rng
+} from "./chunk-YKX2GS6X.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/saas-store-story.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 1290;
+var H = 2796;
+var SCALE = 2.02;
+var PW = Math.round(426 * SCALE);
+var SCREENS = [
+  { name: "Score", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Last night", note: "Thu 1 Oct" },
+    { kind: "ring", share: 0.61, figure: "61", label: "Sleep score" },
+    { kind: "tiles", items: [["In bed", "6h 12m"], ["Felt like", "4h 05m"]] },
+    { kind: "rows", card: true, rows: [{ title: "Woke 7 times", sub: "Longest stretch 1h 48m", glyph: "bolt" }, { title: "Deep sleep", sub: "38 min \xB7 low for you", glyph: "moon" }, { title: "Bedtime drifted", sub: "52 min later than usual", glyph: "bars" }] },
+    { kind: "button", label: "See what woke you" }
+  ] },
+  { name: "Night", tabs: [4, 1], blocks: [
+    { kind: "title", text: "Your night", note: "23:48\u20136:00" },
+    { kind: "bars", title: "Sleep depth", note: "Every 20 min", values: [2, 5, 8, 9, 6, 3, 7, 9, 4, 1, 5, 8, 6, 3, 6, 4, 2, 1], hi: 9, height: 150 },
+    { kind: "heading", text: "What woke you", note: "3 causes" },
+    { kind: "rows", card: true, rows: [
+      { title: "Noise, 58 dB", sub: "2:14 \xB7 a door, then traffic", value: "9 min", glyph: "bolt" },
+      { title: "Room at 24\xB0", sub: "3:40 \xB7 two degrees too warm", value: "14 min", glyph: "sun" },
+      { title: "Late coffee", sub: "16:30 \xB7 still active at 1:00", value: "31 min", glyph: "drop" }
+    ] },
+    { kind: "tiles", items: [["Lost to wake-ups", "54 min"], ["Fixable", "2 of 3"]] }
+  ] },
+  { name: "Wind down", tabs: [4, 2], blocks: [
+    { kind: "title", text: "Wind down", note: "Starts 22:40" },
+    { kind: "hero", label: "Tonight\u2019s bedtime", figure: "23:10", note: "For 7h 30m before your 6:40 alarm", share: 0.35 },
+    { kind: "checks", rows: [["Last coffee before 14:00", true], ["Dim the lights at 22:00", true], ["Phone down, 22:40", false], ["Ten-minute breathing", false]] },
+    { kind: "curve", title: "Heart rate, last hour", note: "bpm", values: [78, 76, 74, 70, 69, 66, 63, 61, 60, 58], height: 110 },
+    { kind: "button", label: "Start wind down" }
+  ] },
+  { name: "Wake", tabs: [4, 3], blocks: [
+    { kind: "title", text: "Smart alarm", note: "On" },
+    { kind: "hero", label: "Wake window", figure: "6:20\u20136:40", note: "Nocta picks your lightest minute", fill: "accent", ink: "onAccent" },
+    { kind: "curve", title: "Predicted sleep depth", note: "Tomorrow", values: [9, 8, 5, 7, 9, 6, 3, 5, 8, 4, 2, 1], mark: 10, height: 120 },
+    { kind: "rows", card: true, rows: [{ title: "Sunrise sound", sub: "Rises over 4 minutes", glyph: "sun" }, { title: "No snooze needed", sub: "11 mornings in a row", glyph: "check" }] },
+    { kind: "tiles", items: [["This week", "+47 min"], ["Score", "61 to 78"]] }
+  ] },
+  { name: "Week", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Seven nights in", note: "Week 1" },
+    { kind: "ring", share: 0.84, figure: "84", label: "Sleep score" },
+    { kind: "bars", title: "Score by night", values: [61, 64, 70, 69, 76, 80, 84], hi: 6, labels: ["F", "S", "S", "M", "T", "W", "T"], height: 96 },
+    { kind: "tiles", items: [["Asleep", "7h 31m"], ["Wake-ups", "2"]] },
+    { kind: "button", label: "Keep going with Nocta Plus" }
+  ] }
+];
+var FRAMES = [
+  { name: "Hook", kicker: "Sound familiar?", title: "Six hours in bed. It felt like four.", screen: 0, phone: "centre" },
+  { name: "Journey: see", kicker: "Night one", title: "See exactly what woke you.", screen: 1, phone: "left", callouts: [
+    { text: "Every stir, to the minute", y: 1480, side: "right", at: 1560 },
+    { text: "The cause, not just the count", y: 1960, side: "right", at: 2040 },
+    { text: "What you can fix tonight", y: 2440, side: "right", at: 2500 }
+  ] },
+  { name: "Journey: change", kicker: "Night three", title: "A wind-down built from your own nights.", screen: 2, phone: "right", callouts: [
+    { text: "A bedtime that fits your alarm", y: 1500, side: "left", at: 1560 },
+    { text: "Four small habits, not forty", y: 1990, side: "left", at: 2050 },
+    { text: "Your pulse says when you\u2019re ready", y: 2420, side: "left", at: 2480 }
+  ] },
+  { name: "Journey: wake", kicker: "Night five", title: "Wake in light sleep, not out of deep.", screen: 3, phone: "left", callouts: [
+    { text: "A 20-minute window, never a jolt", y: 1500, side: "right", at: 1560 },
+    { text: "It learns your mornings", y: 2080, side: "right", at: 2140 }
+  ] },
+  { name: "Proof", kicker: "After a week", title: "From 61 to 84 in seven nights." },
+  { name: "Call", kicker: "Start tonight", title: "Your first seven nights are free.", note: "No band, no ring. Your phone on the bedside table is enough.", screen: 4, phone: "centre" }
+];
+var REVIEWS = [
+  ["\u201CIt told me my room was two degrees too warm. One fan later I sleep through.\u201D", "Renata V."],
+  ["\u201CFirst app that explained why I\u2019m tired instead of just telling me I am.\u201D", "Tom\xE1s K."],
+  ["\u201CThe alarm window is the feature. I have not hit snooze in a month.\u201D", "Bea L."]
+];
+function laurel(s, mirror) {
+  const out = [];
+  const c = s / 2, r = s * 0.42;
+  for (let i = 0; i < 10; i++) {
+    const a = (240 - i * 13) * Math.PI / 180;
+    const bx = c + r * Math.cos(a), by = c - r * Math.sin(a);
+    const dir = a - Math.PI / 2 + 0.62, len = s * (0.13 - i * 4e-3), wid = len * 0.3;
+    const tip = { x: bx + Math.cos(dir) * len, y: by - Math.sin(dir) * len };
+    const n = { x: Math.sin(dir) * wid, y: Math.cos(dir) * wid };
+    const mid = { x: (bx + tip.x) / 2, y: (by + tip.y) / 2 };
+    const pts = [{ x: bx, y: by }, { x: mid.x + n.x, y: mid.y + n.y }, tip, { x: mid.x - n.x, y: mid.y - n.y }];
+    out.push({ closed: true, points: pts.map((p) => ({ x: mirror ? s - p.x : p.x, y: p.y })) });
+  }
+  return out;
+}
+var saas_store_story_default = defineTemplate({
+  id: "social-saas-store-story",
+  meta: {
+    name: "SaaS store screenshots: story sequence",
+    description: "Six dark App Store screenshots (1290 \xD7 2796) that read as one argument: a hook, three journey frames with callouts pinned to the part of the screen they explain, a proof frame (laurel, rating, three reviews) and a call to install. A night ground, a star field and one amber light. Drop your own capture on each phone\u2019s screenshot slot",
+    category: "social",
+    tags: ["saas", "saas store", "app store", "screenshots", "story", "dark", "callouts", "reviews", "award", "iphone", "aso", "mobile app", "subscription app", "listing"],
+    platforms: ["app-store", "ios"],
+    formats: ["screenshot", "gallery"],
+    useCases: ["launch", "brand-intro", "testimonial"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store screenshots: story sequence", preset("appstore-iphone"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        paper: "#07080C",
+        text: "#F6F0E4",
+        primary: "#FFB23E",
+        onPrimary: "#1D1100",
+        accent: "#FF7A45",
+        onAccent: "#1F0A00",
+        ...uiRoles({ screen: "#0E1017", surface: "#191C27", onScreen: "#F6F0E4", onScreenMuted: "#B4B8C6", line: "#313646", track: "#2B2F3D", tile: "#2B2F3D", photo: "#2B2F3D", positive: "#7FD6A4", primary: "#FFB23E", onPrimary: "#1D1100", accent: "#FF7A45", onAccent: "#1F0A00", device: "#1A1C24", deviceEdge: "#4A4F60" })
+      },
+      { name: "Nocta" }
+    );
+    k.palette({ card: "#151823", onCard: "#F6F0E4", cardLine: "#3A3F52", star: "#F6F0E4" });
+    k.textStyle("Title 150", { ...SERIF, size: 150, fontWeight: 700, letterSpacing: -5, lineHeight: 148 });
+    k.textStyle("Kicker 36", { ...MONO, size: 36, fontWeight: 700, letterSpacing: 2.6, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Callout 40", { size: 40, fontWeight: 700, letterSpacing: -0.8, lineHeight: 46 });
+    k.textStyle("Note 46", { size: 46, fontWeight: 500, letterSpacing: -0.6, lineHeight: 60 });
+    k.textStyle("Review 44", { ...SERIF, size: 44, fontWeight: 600, letterSpacing: -0.6, lineHeight: 56 });
+    k.textStyle("Who 32", { ...MONO, size: 32, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Award 60", { ...SERIF, size: 60, fontWeight: 700, letterSpacing: -1.4, lineHeight: 64, textAlign: "CENTER" });
+    k.textStyle("Rating 220", { ...SERIF, size: 220, fontWeight: 700, letterSpacing: -8, lineHeight: 200 });
+    k.component("Callout", { width: 400, fill: "card", radius: 28, padding: { top: 26, right: 30, bottom: 28, left: 30 }, stroke: { color: "primary", width: 3, align: "INSIDE" }, effects: [soft(k, "paper", 0.7, 20, 50)], description: "A callout pinned to a part of the screen.", props: { Text: "Every stir, to the minute" } }, (id) => {
+      k.propText(id, "Text", { style: "Callout 40", color: "onCard" });
+    });
+    let cover = "";
+    FRAMES.forEach((f, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset("appstore-iphone"));
+      ground(k, sheet, `${i + 1} \xB7 ${f.name}`, "paper");
+      k.patch(sheet, { x: i * (W + 120), y: 0 });
+      if (!cover) cover = sheet;
+      const r = rng(40 + i);
+      const bands = f.screen === void 0 ? [[20, 170], [760, 880]] : [[20, 170], [780, 1700]];
+      bands.forEach(([top, bottom], bi) => {
+        const dots = [];
+        for (let s = 0; s < (bottom - top) / 7; s++) {
+          const x = r() * W, y = top + r() * (bottom - top), d = 2 + r() * 5;
+          dots.push({ closed: true, points: [{ x, y: y - d }, { x: x + d, y }, { x, y: y + d }, { x: x - d, y }] });
+        }
+        drawn(k, sheet, dots, "star", { name: `Stars ${bi + 1}`, opacity: 0.55 });
+      });
+      glow(k, sheet, { role: i >= 4 ? "primary" : "accent", w: 2600, x: W / 2 + (i % 2 ? 260 : -260), y: H - 100, alpha: 0.26 + i * 0.03, name: "Light" });
+      glow(k, sheet, { role: "primary", w: 1300, x: W / 2, y: H - 200, alpha: 0.3, name: "Ember" });
+      const words = k.stack(sheet, { width: W - 192, gap: 34, name: "Words", absolute: { x: 96, y: 200 } });
+      const tag = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: "Kicker row" });
+      k.rect(tag, 12, 44, "primary", { radius: 6, name: "Kicker bar" });
+      k.text(tag, f.kicker, { style: "Kicker 36", color: "text", autoWidth: true, name: "Kicker" });
+      k.text(words, f.title, { style: "Title 150", color: "text", name: "Title" });
+      if (f.note) k.text(words, f.note, { style: "Note 46", color: "text", width: 980, name: "Note" });
+      if (f.screen !== void 0) {
+        const x = f.phone === "left" ? 16 : f.phone === "right" ? W - PW - 16 : (W - PW) / 2;
+        flatPhone(k, sheet, { spec: SCREENS[f.screen], scale: SCALE, x, y: 1080, name: "Phone", shadow: { type: "DROP_SHADOW", color: k.color("primary", 0.22), offset: { x: 0, y: 0 }, blur: 60, spread: 0, visible: true } });
+        for (const c of f.callouts ?? []) {
+          const cw = 400, cx = c.side === "right" ? W - cw - 24 : 24;
+          const dotX = c.side === "right" ? cx - 150 : cx + cw + 150;
+          k.rect(sheet, 150, 5, "primary", { name: "Leader", absolute: { x: c.side === "right" ? cx - 150 : cx + cw, y: c.at } });
+          k.ellipse(sheet, 34, "primary", { name: "Leader dot", stroke: { color: "paper", width: 8, align: "OUTSIDE" }, absolute: { x: dotX - 17, y: c.at - 15 } });
+          k.instance(sheet, "Callout", { Text: c.text }, { name: "Callout", absolute: { x: cx, y: c.y } });
+        }
+      } else {
+        const award = k.stack(sheet, { direction: "HORIZONTAL", width: W - 192, gap: 40, align: "CENTER", name: "Award", absolute: { x: 96, y: 900 } });
+        const wreath = k.stack(award, { width: 520, height: 420, align: "CENTER", justify: "CENTER", name: "Wreath" });
+        for (const side of [false, true]) drawn(k, wreath, laurel(520, side).map((p) => ({ ...p, points: p.points.map((q) => ({ x: q.x, y: q.y - 60 })) })), "primary", { name: "Laurel" });
+        k.text(wreath, "App of\nthe Day", { style: "Award 60", color: "text", width: 300, name: "Award name" });
+        const rating = k.stack(award, { gap: 14, name: "Rating" });
+        k.text(rating, "4.9", { style: "Rating 220", color: "text", name: "Rating figure" });
+        stars(k, rating, 56, "primary");
+        k.text(rating, "212,000 ratings", { style: "Who 32", color: "text", name: "Rating count" });
+        const list = k.stack(sheet, { width: W - 192, gap: 36, name: "Reviews", absolute: { x: 96, y: 1440 } });
+        REVIEWS.forEach(([quote, who], j) => {
+          const card = k.stack(list, { width: W - 192 - 80, gap: 22, fill: "card", radius: 36, padding: { top: 40, right: 46, bottom: 40, left: 46 }, stroke: { color: "cardLine", width: 3, align: "INSIDE" }, name: "Review" });
+          k.patch(card, { translateX: j % 2 ? 80 : 0 });
+          k.text(card, quote, { style: "Review 44", color: "onCard", name: "Review quote" });
+          const by = k.stack(card, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Review by" });
+          stars(k, by, 30, "primary");
+          k.text(by, who, { style: "Who 32", color: "onCard", autoWidth: true, name: "Reviewer" });
+        });
+        const nights = k.stack(sheet, { direction: "HORIZONTAL", width: W - 192, gap: 22, align: "MAX", name: "Nights", absolute: { x: 96, y: 2330 } });
+        [61, 64, 70, 69, 76, 80, 84].forEach((v, j) => {
+          const col = k.stack(nights, { width: 138, gap: 14, name: "Night" });
+          k.text(col, String(v), { style: "Who 32", color: "text", name: "Night score" });
+          k.rect(col, 138, Math.round((v - 50) * 11), j === 6 ? "primary" : "card", { radius: 20, name: "Night bar", ...j === 6 ? {} : { stroke: { color: "cardLine", width: 3, align: "INSIDE" } } });
+        });
+      }
+    });
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_story_default
+};

package/dist/chunks/chunk-W6AABTOC.js

@@ -0,0 +1,121 @@
+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 {
+  archPath,
+  crescent,
+  disc,
+  draw,
+  eightStar,
+  fanous,
+  polyP,
+  printVariant,
+  starPath,
+  tilePattern
+} from "./chunk-27HTCTA4.js";
+import {
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/print/holidays-eid-gift-tags.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Eid gift tags sheet";
+var TW = 158;
+var TH = 256;
+var PAD = { top: 60, right: 48, bottom: 44, left: 48 };
+var DESIGNS = ["Lantern", "Crescent", "Star", "Arch"];
+var LOOK = {
+  Lantern: { tag: "mint", ink: "tealInk", art: "gold", art2: "tealInk" },
+  Crescent: { tag: "teal", ink: "sand", art: "gold", art2: "sand" },
+  Star: { tag: "lilac", ink: "plumInk", art: "gold", art2: "plumInk" },
+  Arch: { tag: "sand", ink: "tealInk", art: "teal", art2: "gold" }
+};
+var tagShape = () => polyP([{ x: 28, y: 0 }, { x: TW - 28, y: 0 }, { x: TW, y: 28 }, { x: TW, y: TH }, { x: 0, y: TH }, { x: 0, y: 28 }]);
+function picture(d, cx, cy) {
+  const L = LOOK[d];
+  if (d === "Lantern") {
+    const f = fanous(cx, cy - 46, 92);
+    return [{ name: "Lantern glass", paths: f.glass, color: "amber" }, { name: "Lantern frame", paths: f.frame, color: L.art2, o: { strokeWidth: 1.2 } }, { name: "Lantern", paths: f.metal, color: L.art }];
+  }
+  if (d === "Crescent") return [{ name: "Crescent", paths: [crescent(cx - 4, cy, 34, 0.5, 1, -0.5)], color: L.art }, { name: "Star", paths: [starPath(cx + 22, cy - 16, 9, 3.6)], color: L.art }, { name: "Little stars", paths: [starPath(cx - 30, cy + 30, 4, 1.6), starPath(cx + 30, cy + 26, 3, 1.2)], color: L.art2 }];
+  if (d === "Star") return [{ name: "Big star", paths: [eightStar(cx, cy, 36)], color: L.art }, { name: "Star heart", paths: [eightStar(cx, cy, 20)], color: L.tag }, { name: "Star dot", paths: [disc(cx, cy, 8)], color: L.art2 }];
+  return [{ name: "Window", paths: [archPath(cx, 64, cy + 40, cy - 6, cy - 50)], color: L.art }, { name: "Window light", paths: [archPath(cx, 44, cy + 32, cy, cy - 34)], color: "amber" }, { name: "Sill", paths: [polyP([{ x: cx - 40, y: cy + 40 }, { x: cx + 40, y: cy + 40 }, { x: cx + 34, y: cy + 48 }, { x: cx - 34, y: cy + 48 }])], color: L.art2 }];
+}
+function border(w, h) {
+  const B = 12, band = 30;
+  const place = (x0, y0, x1, y1) => {
+    const t = tilePattern(x1 - x0, y1 - y0, 30);
+    return t.stars.map((p) => ({ ...p, points: p.points.map((q) => ({ ...q, x: q.x + x0, y: q.y + y0 })) }));
+  };
+  return [
+    { name: "Border", paths: place(-B, -B, w + B, band), color: "border" },
+    { name: "Border", paths: place(-B, h - band, w + B, h + B), color: "border" }
+  ];
+}
+var holidays_eid_gift_tags_default = defineTemplate({
+  id: "print-holidays-eid-gift-tags",
+  meta: {
+    name: NAME,
+    description: "Twelve Eid gift tags for Eidi envelopes and presents on one sheet: tall tags with clipped corners and a ribbon hole in mint, lilac, sand and deep teal, each with a lantern, a crescent and star, an eight-pointed star or an arched window, a greeting and \u201CTo\u201D and \u201CFrom\u201D lines. One component set, so a colour change reaches every tag. US Letter with bleed, and an A4 copy",
+    category: "sticker",
+    tags: ["eid", "eid al-fitr", "eid al-adha", "eid mubarak", "eidi", "gift tags", "labels", "presents", "lantern", "crescent", "islamic geometric", "printable", "diy", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["greeting"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("us-letter"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FBF7EF", text: "#123F45", onPaper: "#5A6E6F", primary: "#1C5A63", onPrimary: "#FFFFFF" },
+      { name: "The Siddiqui family" }
+    );
+    k.palette({ mint: "#CFEAD9", teal: "#1C5A63", lilac: "#DCCDEE", sand: "#F1E2C4", gold: "#D9A93E", amber: "#F2B54A", tealInk: "#123F45", plumInk: "#40285E", border: "#E3D4AE" });
+    k.textStyle("Head 30", { ...SERIF, size: 30, fontWeight: 600, letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Note 11", { size: 11, fontWeight: 500, lineHeight: 16 });
+    k.textStyle("Greeting 17", { ...SERIF, size: 17, fontWeight: 700, lineHeight: 21 });
+    k.textStyle("Tag word 8.5", { size: 8.5, fontWeight: 700, letterSpacing: 1.8, lineHeight: 15 });
+    k.variantSet("Eid tag", "Design", DESIGNS, { width: TW, height: TH, padding: { top: 150, right: 14, bottom: 16, left: 14 }, gap: 4, align: "CENTER", props: { Greeting: "Eid Mubarak", To: "TO: ____________", From: "FROM: __________" } }, (d, id) => {
+      const L = LOOK[d];
+      k.vector(id, TW, TH, [tagShape()], L.tag, { name: "Tag", absolute: { x: 0, y: 0 } });
+      k.vector(id, 14, 14, [disc(7, 7, 7)], "paper", { name: "Ribbon hole", absolute: { x: TW / 2 - 7, y: 14 } });
+      k.vector(id, 20, 20, [disc(10, 10, 10)], [], { name: "Hole ring", absolute: { x: TW / 2 - 10, y: 11 }, stroke: { color: L.art, width: 1.4 } });
+      draw(k, id, picture(d, TW / 2, 92));
+      k.propText(id, "Greeting", { style: "Greeting 17", color: L.ink, align: "CENTER", width: "FILL", name: "Greeting" });
+      k.propText(id, "To", { style: "Tag word 8.5", color: L.ink, align: "CENTER", width: "FILL", name: "To" });
+      k.propText(id, "From", { style: "Tag word 8.5", color: L.ink, align: "CENTER", width: "FILL", name: "From" });
+    });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 18, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, border(W, H));
+    k.text(sheet, "Eid gift tags", { style: "Head 30", color: "text", align: "CENTER", width: "FILL", name: "Title" });
+    const grid = k.stack(sheet, { direction: "HORIZONTAL", wrap: true, gap: 18, width: "FILL", justify: "CENTER", name: "Tags" });
+    k.patch(grid, { counterAxisSpacing: 18 });
+    const greet = ["Eid Mubarak", "Eid Saeed", "Your Eidi!", "With love", "Eid Mubarak", "For you", "Happy Eid", "Eid Mubarak", "Eid Saeed", "With love", "Your Eidi!", "Happy Eid"];
+    greet.forEach((g, i) => k.instance(grid, `Eid tag/${DESIGNS[(i + Math.floor(i / 4)) % 4]}`, { Greeting: g }, { name: "Eid tag" }));
+    k.text(sheet, "Print on card, cut round each tag, punch the hole and thread a ribbon. From {{brand.name}}", { style: "Note 11", color: "text", align: "CENTER", width: "FILL", name: "Note" });
+    k.variants(sheet, [printVariant("a4", { art: border, pad: PAD, masterWidth: W })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_eid_gift_tags_default
+};