@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-UM6QUOOH.js

@@ -0,0 +1,201 @@
+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 {
+  defineCommand
+} from "./chunk-A3PNGDIC.js";
+import {
+  dispatch
+} from "./chunk-7EEUGQZW.js";
+import {
+  getCommandByAgentName,
+  listCommandsForSurface,
+  registerCommand
+} from "./chunk-IU4XG2RJ.js";
+import {
+  ToolError
+} from "./chunk-V32DXOZK.js";
+import {
+  getActiveRenderer
+} from "./chunk-L655IQHW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/commands/agent.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var AGENT_CAPABILITIES = ["render", "canvas", "generate", "storage", "panel", "delegate"];
+var legacyCommandId = (toolName) => `legacy.${toolName}`;
+var legacyTools = /* @__PURE__ */ new Map();
+function renderCapability(ctx) {
+  return (nodeIds, options) => renderDocument(ctx.doc(), nodeIds, options);
+}
+async function underReviewKit(doc, kit) {
+  const [{ applyBrandKit }, { REVIEW_KITS }, { settleMeasuredLayout }, { resolveTextNodeStyles }] = await Promise.all([import("./apply-BF7LZ3FY.js"), import("./review-kits-4ZG42RXB.js"), import("../lib/templates/layout.js"), import("../lib/document/text-styles.js")]);
+  const kitted = applyBrandKit(doc, REVIEW_KITS[kit]);
+  const styles = kitted.styles ?? {};
+  const nodes = { ...kitted.nodes };
+  for (const id in nodes) if (nodes[id].type === "TEXT" && nodes[id].textStyleId) nodes[id] = resolveTextNodeStyles(nodes[id], styles);
+  return settleMeasuredLayout({ ...kitted, nodes });
+}
+async function renderDocument(doc, nodeIds, options) {
+  const { selectionReferenceImages } = await import("./reference-images-GBFOIOAM.js");
+  if (options?.kit) {
+    doc = await underReviewKit(doc, options.kit);
+  }
+  if (options?.at !== void 0) {
+    const { bakeMotion } = await import("../lib/motion/pose.js");
+    for (const id of nodeIds) {
+      let frame = doc.nodes[id];
+      while (frame && !frame.timeline && frame.parentId && doc.nodes[frame.parentId]?.type !== "PAGE") frame = doc.nodes[frame.parentId];
+      if (frame) doc = { ...doc, nodes: bakeMotion(doc.nodes, frame.id, options.at) };
+    }
+  }
+  return selectionReferenceImages(doc, [...nodeIds], { maxEdge: options?.maxEdge, max: 8, format: "WEBP", ...options?.bands ? { bands: options.bands } : {} });
+}
+function generateCapability(ctx) {
+  return async (prompt, options = {}) => {
+    if (options.format === "audio") {
+      const { requestAudio } = await import("./client-5YPZUV5L.js");
+      const { signal: signal2, format: _f, ...rest2 } = options;
+      void _f;
+      return requestAudio({ prompt, ...rest2 }, signal2 ?? ctx.signal);
+    }
+    if (options.format === "video") {
+      const { generateVideoFile } = await import("./generate-media-ASNNFDML.js");
+      const { format: _f, signal: signal2, ...rest2 } = options;
+      void _f;
+      return generateVideoFile({ ...rest2, prompt, doc: ctx.doc() }, { signal: signal2 ?? ctx.signal });
+    }
+    const [{ requestImage }, { effectiveImageModel, useAiStore }] = await Promise.all([
+      import("./client-5YPZUV5L.js"),
+      import("./client-store-IP5BHSV5.js")
+    ]);
+    const modelId = effectiveImageModel(useAiStore.getState());
+    if (!modelId) throw new ToolError("No image model is available. Ask the user to pick one in the AI menu.");
+    const { signal, ...rest } = options;
+    const result = await requestImage(
+      { id: modelId },
+      { prompt, ...rest },
+      signal ?? ctx.signal
+    );
+    return { dataUrl: await blobToDataUrl(result.blob), modelId: result.modelId };
+  };
+}
+var blobToDataUrl = (blob) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(String(reader.result));
+  reader.onerror = () => reject(reader.error ?? new Error("Could not read the generated image."));
+  reader.readAsDataURL(blob);
+});
+var provided = /* @__PURE__ */ new Map();
+function provideAgentCapability(name, impl) {
+  if (impl === null) provided.delete(name);
+  else provided.set(name, impl);
+}
+function agentCapability(name, ctx) {
+  const installed = provided.get(name);
+  if (installed) return installed;
+  switch (name) {
+    case "render":
+      return renderCapability(ctx);
+    case "generate":
+      return generateCapability(ctx);
+    // The canvas renderer the editor put in the registry. Export drives it directly for SVG and PDF,
+    // which are not data URLs and so are not what `render` promises.
+    case "canvas":
+      return (() => getActiveRenderer());
+    default:
+      throw new ToolError(`The agent host does not expose "${name}" through use().`, "unsupported");
+  }
+}
+function agentContext(ctx, capabilities = {}) {
+  const have = new Set(AGENT_CAPABILITIES);
+  const legacyCallId = ctx.toolCallId;
+  const built = {
+    ...ctx,
+    callId: ctx.callId ?? legacyCallId,
+    actor: ctx.actor ?? { kind: "agent" },
+    can: (name) => have.has(name),
+    use: (name) => capabilities[name] ?? agentCapability(name, built)
+  };
+  return built;
+}
+function toolContext(ctx) {
+  return { ...ctx, commit: (next, label) => ctx.commit(next, label), toolCallId: ctx.callId };
+}
+function isReadOnly(command) {
+  if (command.confirm) return false;
+  if (command.interactive) return false;
+  return command.expose.agent?.readOnly ?? command.effect !== "document";
+}
+function toolView(command) {
+  const agent = command.expose.agent;
+  if (!agent) throw new ToolError(`${command.id} is not exposed to the agent surface.`, "unsupported");
+  return {
+    name: agent.name,
+    description: agent.description,
+    // A merged command's params are the richer (batch) shape; `expose.agent.schema` is the FROZEN one the
+    // model has always seen, so a merge cannot move the prompt.
+    parameters: agent.schema ?? command.params,
+    // `undefined`, not `false`, for the editing tools — callers assert on the absence.
+    ...isReadOnly(command) ? { readOnly: true } : {},
+    ...command.confirm ? { confirm: command.confirm.level } : {},
+    ...command.interactive ? { interactive: true } : {},
+    run: (args, ctx) => dispatch(agent.name, {
+      surface: "agent",
+      params: args,
+      ctx: agentContext(ctx),
+      capabilities: AGENT_CAPABILITIES,
+      errorClass: ToolError
+    })
+  };
+}
+function liftAgentTool(tool) {
+  return defineCommand({
+    id: legacyCommandId(tool.name),
+    title: tool.name,
+    domain: "legacy",
+    params: tool.parameters,
+    effect: tool.readOnly ? "none" : "document",
+    // Agent tools predate the plugin permission model; the agent is trusted by the surface it runs on.
+    permission: null,
+    expose: { agent: { name: tool.name, description: tool.description, readOnly: tool.readOnly === true } },
+    run: (params, ctx) => tool.run(params, toolContext(ctx))
+  });
+}
+function registerCommands(tools) {
+  for (const tool of tools) {
+    legacyTools.set(tool.name, tool);
+    registerCommand(liftAgentTool(tool));
+  }
+}
+function agentTool(name) {
+  const command = getCommandByAgentName(name);
+  if (!command) return void 0;
+  return legacyTools.get(name) ?? toolView(command);
+}
+function agentToolList() {
+  return listCommandsForSurface("agent").map((c) => legacyTools.get(c.expose.agent.name) ?? toolView(c));
+}
+var legacyTool = agentTool;
+var legacyToolList = agentToolList;
+
+export {
+  AGENT_CAPABILITIES,
+  legacyCommandId,
+  underReviewKit,
+  renderDocument,
+  provideAgentCapability,
+  agentContext,
+  toolView,
+  liftAgentTool,
+  registerCommands,
+  agentTool,
+  agentToolList,
+  legacyTool,
+  legacyToolList
+};

package/dist/chunks/chunk-UMGBNVBJ.js

@@ -0,0 +1,97 @@
+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 {
+  clayBrand,
+  clayCloud,
+  clayFx,
+  claySet,
+  claySun,
+  habitTower,
+  hop,
+  land,
+  looseClay,
+  pip,
+  pipBox,
+  towerBox
+} from "./chunk-NV4PFFGY.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-K3QP3IUF.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/claymation-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 5e3;
+var SET = { w: 600, h: 300, horizon: 238, u: 0.36 };
+var NIGHTS = [{ label: "Mon \xB7 teeth", color: "clayYellow" }, { label: "Tue \xB7 teeth", color: "clayPink" }, { label: "Wed \xB7 teeth", color: "clayBlue" }];
+var cues = [
+  { layer: "Button", preset: "pulse", at: 3300, params: { duration: 800, amount: 0.06 } }
+];
+var claymation_header_default = defineTemplate({
+  id: "email-claymation-header",
+  meta: {
+    name: "Clay onboarding email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a day-three onboarding email, modelled in clay: the encouragement, what comes on day seven and the button are all on the first frame (for Outlook), beside the mascot and the three habit bricks built so far; then he hops, presses the newest brick, blinks and waves in stop-motion poses \u2014 a seamless 5-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "claymation", "clay", "plasticine", "mascot", "onboarding", "streak", "habit tracker", "saas", "playful"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["onboarding", "milestone", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Clay onboarding email header", HEADER);
+    k.quantizeGeometry = true;
+    clayBrand(k, { offer: "Three bricks down." });
+    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 800, letterSpacing: 2, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Offer 38", { size: 38, fontWeight: 900, letterSpacing: -1.8, lineHeight: 38 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Brick 13", { size: 13, fontWeight: 800, letterSpacing: -0.2, lineHeight: 16 });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "See Mila\u2019s tower", pad: [9, 20] });
+    k.patch(k.componentIdOf("Button pill"), { effects: clayFx(38) });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 8, { top: 22, right: 300, bottom: 20, left: 30 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    claySet(k, sheet, SET);
+    claySun(k, sheet, 44, { x: 516, y: 6 }, { boil: 1e3 });
+    clayCloud(k, sheet, 96, { x: 318, y: 22 }, { seed: 1 });
+    looseClay(k, sheet, [[318, 286, 16, "clayGreen"], [586, 292, 14, "clayPink"], [250, 280, 12, "clayYellow"], [40, 284, 14, "clayBlue"]]);
+    const ground = 276, s = 132;
+    const mascot = pip(k, sheet, { s, absolute: { x: 296, y: ground - pipBox(s).footY }, look: 0.9, loopMs: DURATION, blinkAt: [2600] });
+    const tb = towerBox(NIGHTS.length, 134, 38);
+    const tower = habitTower(k, sheet, { habits: NIGHTS, w: 134, h: 38, style: "Brick 13", absolute: { x: 450, y: ground + 4 - tb.h } });
+    k.text(sheet, "Day 3 of 7 \xB7 {{brand.name}}", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 38", color: "text", name: "Offer" });
+    k.text(sheet, "Four more nights of teeth and Pip presses Mila a medal.", { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "See Mila\u2019s tower" }, { name: "Button" });
+    hop(k, k.named(mascot, "Pip body")[0], 1200, 22);
+    land(k, tower.bricks[2], 1700);
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  claymation_header_default
+};

package/dist/chunks/chunk-UMQJM2ZI.js

@@ -0,0 +1,61 @@
+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 {
+  SIZE,
+  bleedFrame,
+  caption,
+  comicMeta,
+  comicSetup,
+  display,
+  panel,
+  say,
+  sfx,
+  tierBox
+} from "./chunk-NMOHNZTQ.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/print/comic-modern-splash.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function splashPage(k, sheet) {
+  const { w: W, h: H } = SIZE.page;
+  k.flowSheet(sheet, 0, 0);
+  const t = tierBox(k, sheet, W, H, "Splash");
+  panel(k, t, bleedFrame(k, W, H), { art: "splash", focus: [0.5, 0.5] }, { ground: "g1", name: "Splash art", edge: false });
+  const title = k.stack(t, { padding: { top: 8, right: 16, bottom: 10, left: 16 }, fill: "primary", width: "HUG", name: "Title plate", absolute: { x: 40, y: 48 } });
+  k.text(title, "{{brand.title}}", { style: display(k, "Title"), color: "onPrimary", autoWidth: true, name: "Title" });
+  k.text(title, "PART ONE: THE TOWER", { style: display(k, "Credit"), color: "onPrimary", autoWidth: true, name: "Chapter" });
+  caption(k, t, "10:20 p.m. Pier Nine. The last light in Harbour City.", { x: 40, y: 150, width: 200 });
+  sfx(k, t, "Clank", { x: W * 0.6, y: H * 0.62, w: 150, h: 80, deg: 8, seed: 3 });
+  say(k, t, "It\u2019s chained, Ada.", { x: W * 0.08, y: H * 0.58, width: 100, to: { x: W * 0.36, y: H * 0.74 } });
+  say(k, t, "Since when has that ever stopped us?", { x: W * 0.12, y: H * 0.47, width: 150, to: { x: W * 0.3, y: H * 0.68 } });
+  caption(k, t, "{{brand.series}} \xB7 {{brand.issue}}", { x: 40, y: H - 76, width: 210, name: "Credits" });
+}
+var comic_modern_splash_default = defineTemplate({
+  id: "comic-splash",
+  meta: comicMeta("Splash page", 'Page two of "The Long Night", one full-bleed picture in modern painted comic art: Ada and Teo at the chained gate of the harbour radio tower, looking up at the one lantern burning at the top', ["splash", "full bleed"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Splash page", preset("comic-page"));
+    comicSetup(k);
+    splashPage(k, k.sheet);
+    return k.finish();
+  }
+});
+
+export {
+  splashPage,
+  comic_modern_splash_default
+};

package/dist/chunks/chunk-UNP33F6D.js

@@ -0,0 +1,23 @@
+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 {
+  STREET
+} from "./chunk-XDK3FCKJ.js";
+import {
+  lineupPost
+} from "./chunk-3N6BLOQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/festival-presale-street-lineup.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_street_lineup_default = lineupPost(STREET);
+
+export {
+  festival_presale_street_lineup_default
+};

package/dist/chunks/chunk-UNTH3AOH.js

@@ -0,0 +1,176 @@
+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 {
+  BREAKPOINTS,
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  resizePhoto
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/blog-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var COLUMN = 720;
+var SECTIONS = [
+  ["Measure before you cut", [
+    "Our first instinct was to buy bigger machines. Instead we logged every step of every run for two weeks. Almost half of the forty minutes was spent before a single test ran: installing dependencies, rebuilding the same packages, and waiting for a runner."
+  ]],
+  ["Cache the build graph, not the folder", [
+    "We had been caching node_modules as one archive keyed on the lockfile, so any dependency bump threw the whole thing away. Moving to a content-addressed cache of each package\u2019s build output meant a typical change rebuilt three packages instead of forty-one."
+  ]],
+  ["Split tests by how long they take", [
+    "Sharding by file count gave one runner all the slow integration suites. We now record each test file\u2019s duration on main and pack the shards so they finish within a few seconds of each other."
+  ]]
+];
+var CODE = "shards:\n  strategy: timing\n  history: main@30d\n  target: 90s";
+var RELATED = [
+  ["Engineering", "The flaky test budget: how we stopped retrying our way to green"],
+  ["Infrastructure", "Moving 400 services to ephemeral runners without a freeze"],
+  ["Culture", "Why every engineer here owns one build step"]
+];
+var blog_post_default = defineTemplate({
+  id: "web-blog-post",
+  meta: {
+    name: "Blog post",
+    description: "A long-form blog post: headline and byline, a lead picture, sections, a pull quote, result figures and a code sample, the author, related posts and a newsletter sign-up \u2014 desktop to phone",
+    category: "web",
+    tags: ["blog", "article", "post", "engineering blog", "long read", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["newsletter", "education"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  breakpoints: true,
+  build() {
+    const k = new Kit("Blog post", preset("web-desktop"));
+    k.brand(
+      { paper: "#FFFFFF", text: "#1B1E28", onPaper: "#555B69", primary: "#5B3FD9", onPrimary: "#FFFFFF", accent: "#5B3FD9", photo: "#E4E6EE", code: "#161A26", onCode: "#E7E9F2", tint: "#F2F0FC", onTint: "#1B1E28", tintMuted: "#545268", line: "#E5E7EC" },
+      { name: "Relay Engineering" }
+    );
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("Kicker 14", { size: 14, fontWeight: 700, letterSpacing: 1, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Title 52", { size: 52, fontWeight: 800, letterSpacing: -1.6, lineHeight: 60 });
+    k.textStyle("Title 34", { size: 34, fontWeight: 800, letterSpacing: -0.9, lineHeight: 41 });
+    k.textStyle("Deck 21", { size: 21, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Deck 18", { size: 18, fontWeight: 400, lineHeight: 28 });
+    k.textStyle("Byline 15", { size: 15, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Meta 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Caption 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("H2 28", { size: 28, fontWeight: 800, letterSpacing: -0.5, lineHeight: 36 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Pull 26", { size: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 36 });
+    k.textStyle("Figure 36", { size: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 42 });
+    k.textStyle("Figure label 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Code 15", { size: 15, fontFamily: "JetBrains Mono", fontWeight: 400, lineHeight: 24 });
+    k.textStyle("Card title 18", { size: 18, fontWeight: 700, letterSpacing: -0.2, lineHeight: 25 });
+    k.textStyle("Field 16", { size: 16, fontWeight: 400, lineHeight: 24 });
+    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    buttons(k, { style: "Button 16" });
+    k.component("Figure", { width: 180, gap: 4, props: { Value: "9 min", Label: "median pipeline, down from 40" } }, (id) => {
+      k.propText(id, "Value", { style: "Figure 36", color: "onTint" });
+      k.propText(id, "Label", { style: "Figure label 14", color: "tintMuted" });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 64, top: 32, center: true });
+    nav(k, sheet, { links: ["Engineering", "Infrastructure", "Culture", "Careers"], cta: "Subscribe", style: "Nav 16", brandStyle: "Brand 20" });
+    const article = k.stack(sheet, { width: COLUMN, gap: 28, name: "Article" });
+    k.text(article, "Infrastructure", { style: "Kicker 14", color: "text", name: "Kicker" });
+    k.text(article, "How we cut our CI pipeline from forty minutes to nine", { style: "Title 52", color: "text", name: "Title" });
+    k.text(article, "No new hardware and no heroics: two weeks of measuring, a smarter cache and tests packed by how long they take.", { style: "Deck 21", color: "onPaper", name: "Deck" });
+    const by = k.stack(article, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Byline" });
+    k.photo(by, 48, 48, { radius: 24, ground: "photo", name: "Author photo" });
+    const who = k.stack(by, { gap: 2, name: "Who" });
+    k.text(who, "Priya Raman, Staff Engineer, Developer Productivity", { style: "Byline 15", color: "text", name: "Author" });
+    k.text(who, "22 September 2026 \xB7 9 minute read", { style: "Meta 14", color: "onPaper", name: "Date" });
+    const lead = k.stack(article, { gap: 10, name: "Lead picture" });
+    k.photo(lead, COLUMN, 405, { radius: 16, ground: "photo", name: "Lead photo" });
+    k.text(lead, "The build dashboard the week we started: every bar is one pipeline run.", { style: "Caption 14", color: "onPaper", name: "Caption" });
+    k.text(article, "Last spring a pull request at Relay waited forty minutes, on average, for a green check. People stopped waiting: they opened a second branch, lost the thread, and came back to conflicts. This is what we changed, in the order we changed it.", { style: "Body 18", color: "text", name: "Paragraph" });
+    SECTIONS.forEach(([h, paras], i) => {
+      k.text(article, h, { style: "H2 28", color: "text", name: "Heading" });
+      for (const p of paras) k.text(article, p, { style: "Body 18", color: "text", name: "Paragraph" });
+      if (i === 0) {
+        const pull = k.stack(article, { direction: "HORIZONTAL", gap: 20, name: "Pull quote" });
+        k.stack(pull, { width: 4, height: "FILL", fill: "accent", radius: 2, name: "Rule" });
+        k.text(pull, "Half of our forty minutes happened before the first test ran.", { style: "Pull 26", color: "text", name: "Pull text" });
+      }
+      if (i === 2) {
+        const code = k.stack(article, { fill: "code", radius: 12, padding: 24, name: "Code" });
+        k.text(code, CODE, { style: "Code 15", color: "onCode", name: "Code text" });
+      }
+    });
+    const figs = k.stack(article, { direction: "HORIZONTAL", gap: 40, fill: "tint", radius: 16, padding: 28, wrap: true, name: "Results" });
+    k.instance(figs, "Figure", { Value: "9 min", Label: "median pipeline, down from 40" }, { name: "Result" });
+    k.instance(figs, "Figure", { Value: "\u221271%", Label: "runner minutes a month" }, { name: "Result" });
+    k.instance(figs, "Figure", { Value: "3.4\xD7", Label: "deploys a day" }, { name: "Result" });
+    k.text(article, "None of this was clever. It was two weeks of logs, one afternoon of arguing about cache keys, and a shard planner small enough to read in one sitting. If your pipeline is slow, start by writing down where the minutes go.", { style: "Body 18", color: "text", name: "Paragraph" });
+    const author = k.stack(sheet, { direction: "HORIZONTAL", width: COLUMN, gap: 20, fill: "tint", radius: 16, padding: 24, align: "CENTER", name: "Author card" });
+    k.photo(author, 72, 72, { radius: 36, ground: "photo", name: "Author portrait" });
+    const bio = k.stack(author, { gap: 4, name: "Author bio" });
+    k.text(bio, "Priya Raman", { style: "Card title 18", color: "onTint", name: "Author name" });
+    k.text(bio, "Priya leads developer productivity at Relay. She has spent ten years making builds boring, which she means as a compliment.", { style: "Meta 14", color: "tintMuted", name: "Author about" });
+    const more = k.stack(sheet, { gap: 24, name: "Related" });
+    k.text(more, "Keep reading", { style: "H2 28", color: "text", name: "Related title" });
+    const cards = k.stack(more, { direction: "HORIZONTAL", gap: 24, name: "Related row" });
+    for (const [tag, title] of RELATED) {
+      const c = k.stack(cards, { gap: 12, name: "Related post" });
+      k.photo(c, 384, 216, { radius: 12, ground: "photo", name: "Related photo" });
+      k.text(c, tag, { style: "Kicker 14", color: "onPaper", name: "Related tag" });
+      k.text(c, title, { style: "Card title 18", color: "text", name: "Related headline" });
+    }
+    const news = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, align: "CENTER", justify: "SPACE_BETWEEN", fill: "tint", radius: 20, padding: 36, name: "Newsletter" });
+    const pitch = k.stack(news, { gap: 6, name: "Pitch" });
+    k.text(pitch, "One engineering story a month", { style: "Card title 18", color: "onTint", name: "Newsletter title" });
+    k.text(pitch, "What we built, what broke and what we learned. No marketing.", { style: "Meta 14", color: "tintMuted", name: "Newsletter body" });
+    const form = k.stack(news, { direction: "HORIZONTAL", width: 460, gap: 10, align: "CENTER", name: "Form" });
+    const field = k.stack(form, { direction: "HORIZONTAL", fill: "paper", radius: 10, stroke: { color: "line", width: 1 }, padding: { top: 13, right: 14, bottom: 13, left: 14 }, name: "Field" });
+    k.text(field, "you@company.com", { style: "Field 16", color: "onPaper", name: "Placeholder" });
+    k.instance(form, "Button", { Label: "Subscribe" }, { name: "Subscribe" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, name: "Footer" });
+    k.text(foot, "\xA9 2026 Relay Labs, Inc. \xB7 Written by the people who build Relay.", { style: "Footer 14", color: "onPaper", name: "Copyright" });
+    k.text(foot, "RSS \xB7 GitHub \xB7 Careers", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Links" });
+    webResponsive(k, sheet, {
+      stack: ["Related row", "Footer", "Newsletter"],
+      stackMobile: ["Form", "Author card", "Results"],
+      restyle: { "Title 52": { mobile: "Title 34", tablet: "Title 34" }, "Deck 21": { mobile: "Deck 18" } },
+      hide: { mobile: ["Nav links"] },
+      gap: { mobile: 48 },
+      tweak: (kit, id, size) => {
+        const inner = kit.node(id).width - BREAKPOINTS[size].side * 2;
+        if (size === "tablet" || size === "mobile") {
+          for (const n of [...kit.named(id, "Article"), ...kit.named(id, "Author card")]) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Form")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const p of kit.named(id, "Lead photo")) resizePhoto(kit, p, inner, Math.round(inner * 0.5625));
+          for (const p of kit.named(id, "Related photo")) resizePhoto(kit, p, inner, Math.round(inner * 0.5625));
+        }
+        if (size === "laptop") for (const p of kit.named(id, "Related photo")) resizePhoto(kit, p, Math.floor((inner - 48) / 3), Math.round((inner - 48) / 3 * 0.5625));
+        if (size === "mobile") for (const n of [...kit.named(id, "Newsletter"), ...kit.named(id, "Results")]) kit.patch(n, { padding: { top: 24, right: 20, bottom: 24, left: 20 } });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  blog_post_default
+};

package/dist/chunks/chunk-UP6M77DM.js

@@ -0,0 +1,77 @@
+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 {
+  standardStore
+} from "./chunk-MO7SQVMT.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/shop-bloom.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PRODUCTS = [
+  { title: "Dew serum", handle: "dew-serum", price: "$58.00", image: "bl-serum", tags: "serums", description: "A lightweight hyaluronic serum that sinks in in seconds and leaves skin plump and quiet." },
+  { title: "Cloud cream", handle: "cloud-cream", price: "$64.00", image: "bl-cream", tags: "moisturisers", description: "A whipped ceramide moisturiser for dry, tired skin. Fragrance-free." },
+  { title: "Rosehip face oil", handle: "rosehip-face-oil", price: "$46.00", image: "bl-oil", tags: "oils", description: "Cold-pressed rosehip and squalane, three drops at night." },
+  { title: "Petal mist", handle: "petal-mist", price: "$32.00", image: "bl-mist", tags: "toners", description: "Rose water and glycerin to set make-up or wake up at your desk." },
+  { title: "Tinted lip balm", handle: "tinted-lip-balm", price: "$18.00", image: "bl-balm", tags: "lips", description: "A sheer berry tint in a refillable tin." },
+  { title: "The ritual set", handle: "the-ritual-set", price: "$148.00", image: "bl-set", tags: "sets", description: "Serum, cream, oil and mist in a linen bag: the whole routine." }
+];
+var shop_bloom_default = defineTemplate({
+  id: "web-shop-bloom",
+  meta: {
+    name: "Bloom skincare store",
+    description: "A skincare brand\u2019s store, blush and plum with a soft serif: a centred hero with the first products floating, soft blur-in entrances, framed product cards, a carousel, categories, product pages with add to cart and a cart with checkout. Publishes as a Next.js Commerce store selling your Shopify products. Desktop, tablet and phone",
+    category: "storefront",
+    tags: ["ecommerce", "shop", "store", "storefront", "shopify", "next.js commerce", "product page", "cart", "skincare", "beauty", "cosmetics", "soft", "pastel", "serif", "website", "responsive", "animation"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "sale"],
+    created: "2026-10-09",
+    updated: "2026-10-09"
+  },
+  breakpoints: true,
+  build: () => standardStore({
+    name: "Bloom skincare store",
+    brand: { paper: "#FBEFEC", text: "#3D1F2E", onPaper: "#7C5A66", primary: "#7A2E4E", onPrimary: "#FFF6F3", card: "#FFFFFF", onCard: "#3D1F2E", cardMuted: "#8C6A75", tint: "#F5DFDA", onTint: "#3D1F2E", tintMuted: "#7C5A66", line: "#EBD1CB" },
+    fields: { name: "Bloom", email: "hello@bloomskin.co" },
+    styles: {
+      "Wordmark 28": { size: 28, fontFamily: "Cormorant Garamond", fontWeight: 600, letterSpacing: 1, lineHeight: 32 },
+      "Nav 15": { size: 15, fontWeight: 500, lineHeight: 22 },
+      "Display 84": { size: 84, fontFamily: "Cormorant Garamond", fontWeight: 500, letterSpacing: -1.5, lineHeight: 86 },
+      "Display 48": { size: 48, fontFamily: "Cormorant Garamond", fontWeight: 500, letterSpacing: -0.5, lineHeight: 52 },
+      "Section 36": { size: 36, fontFamily: "Cormorant Garamond", fontWeight: 500, lineHeight: 40 },
+      "Title 16": { size: 16, fontWeight: 500, lineHeight: 22 },
+      "Price 15": { size: 15, fontWeight: 400, lineHeight: 22 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Button 15": { size: 15, fontWeight: 600, letterSpacing: 0.4, lineHeight: 22 }
+    },
+    type: { wordmark: "Wordmark 28", nav: "Nav 15", display: "Display 84", displaySmall: "Display 48", section: "Section 36", title: "Title 16", price: "Price 15", body: "Body 17", small: "Small 14", button: "Button 15" },
+    products: PRODUCTS,
+    categories: [{ title: "Serums", handle: "serums", description: "Treatments that do one thing well." }, { title: "Moisturisers", handle: "moisturisers", description: "Creams for every kind of dry." }, { title: "Oils", handle: "oils", description: "For night, and for the face that needs it." }, { title: "Sets", handle: "sets", description: "The routine, together." }],
+    carousel: "Everything we make",
+    menu: [["Shop all", "/search"], ["Serums", "/search/serums"], ["Sets", "/search/sets"]],
+    hero: { kicker: "CLEAN SKINCARE \xB7 MADE IN SMALL BATCHES", headline: "Skin that feels like itself again", lead: "Four steps, no fragrance, nothing you cannot pronounce. Mixed by hand in Portland in batches of two hundred.", cta: "Find your ritual", image: "bl-hero", layout: "centered" },
+    story: { title: "Formulated by a dermatologist, tested by our mums", body: "Dr. Ana Reyes spent twelve years in clinic before she made Bloom. Every formula is tested for a month by real skin before it is sold.", image: "bl-hero" },
+    promise: ["Free shipping over $50 \xB7 carbon-neutral delivery", "Not right for your skin? Send it back, even opened"],
+    newsletter: { title: "Notes from the lab", body: "A monthly letter on what goes into each formula, and first access to new ones." },
+    legal: "Prices in USD, sales tax at checkout.",
+    card: "framed",
+    motion: "soft",
+    float: true,
+    ratio: 1.1,
+    radius: 20
+  })
+});
+
+export {
+  shop_bloom_default
+};