@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-OOGCRXNV.js

@@ -0,0 +1,184 @@
+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 {
+  flatPhone,
+  uiRoles
+} from "./chunk-XFK7KVIF.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  ground
+} from "./chunk-QLV6445V.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-store-play-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function leafAt(x, y, len, wid, deg) {
+  const a = deg * Math.PI / 180, dx = Math.sin(a), dy = -Math.cos(a), nx = -dy, ny = dx;
+  const tip = { x: x + dx * len, y: y + dy * len };
+  const side = (t, s) => ({ x: x + dx * len * t + nx * wid * s, y: y + dy * len * t + ny * wid * s });
+  return { closed: true, points: [{ x, y, handleOut: side(0.25, 1) }, { ...tip, handleIn: side(0.7, 0.9), handleOut: side(0.7, -0.9) }, { x, y, handleIn: side(0.25, -1) }] };
+}
+var plantPhoto = (height, name, focus = false) => ({ kind: "custom", build: (k, parent, w) => {
+  const photo = k.photo(parent, w, height, { radius: 24, ground: "photo", name });
+  const at = { absolute: { x: 0, y: 0 } };
+  const cx = w * (focus ? 0.5 : 0.36), sill = height - 22, potH = height * 0.3, potW = height * 0.36, rim = sill - potH;
+  k.ellipse(photo, Math.round(height * 1.5), "surface", { name: "Window light", opacity: 0.5, absolute: { x: Math.round(cx - height * 0.2), y: Math.round(-height * 0.7) } });
+  k.vector(photo, w, height, [box(0, sill, w, 22)], "leafB", { name: "Sill", ...at });
+  k.vector(photo, w, height, [{ closed: true, points: [{ x: cx - potW / 2, y: rim }, { x: cx + potW / 2, y: rim }, { x: cx + potW * 0.36, y: sill }, { x: cx - potW * 0.36, y: sill }] }, box(cx - potW * 0.58, rim - 12, potW * 1.16, 16)], "pot", { name: "Pot", ...at });
+  const reach = rim - 14;
+  k.vector(photo, w, height, [leafAt(cx, rim - 8, reach * 0.86, reach * 0.24, -58), leafAt(cx, rim - 8, reach * 0.9, reach * 0.26, 52), leafAt(cx, rim - 8, reach, reach * 0.22, 4)], "leafB", { name: "Back leaves", ...at });
+  k.vector(photo, w, height, [leafAt(cx, rim - 8, reach * 0.8, reach * 0.24, -26), leafAt(cx, rim - 8, reach * 0.76, reach * 0.24, 28)], "leafA", { name: "Front leaves", ...at });
+  if (focus) {
+    const fw = height * 0.86, fh = height * 0.8, fx = cx - fw / 2, fy = (height - fh) / 2 - 4, c = 26;
+    const corner = (px, py, sx, sy) => ({ closed: false, points: [{ x: px, y: py + sy * c }, { x: px, y: py }, { x: px + sx * c, y: py }] });
+    k.vector(photo, w, height, [corner(fx, fy, 1, 1), corner(fx + fw, fy, -1, 1), corner(fx + fw, fy + fh, -1, -1), corner(fx, fy + fh, 1, -1)], "surface", { name: "Focus", strokeWidth: 4, ...at });
+  }
+} });
+var SCREENS = [
+  { name: "Today", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Today", note: "3 thirsty" },
+    { kind: "hero", label: "Water before noon", figure: "3 plants", note: "Monstera, basil, the big fern", share: 0.33 },
+    { kind: "checks", rows: [["Monstera \xB7 250 ml", true], ["Basil on the sill \xB7 80 ml", false], ["Boston fern \xB7 mist only", false]] },
+    { kind: "heading", text: "Happy for now", note: "9 plants" },
+    { kind: "rows", card: true, rows: [{ title: "Snake plant", sub: "Water in 11 days", glyph: "leaf" }, { title: "Pilea", sub: "Water on Sunday", glyph: "leaf" }, { title: "String of pearls", sub: "Leave it alone", glyph: "drop", ink: "onScreenMuted", tile: "track" }] }
+  ] },
+  { name: "Plant", tabs: [4, 1], blocks: [
+    { kind: "title", text: "Monstera", note: "Living room" },
+    plantPhoto(190, "Plant photo"),
+    { kind: "tiles", items: [["Soil", "Dry"], ["Last drink", "8 days ago"]] },
+    { kind: "curve", title: "Soil moisture", note: "14 days", values: [80, 72, 61, 50, 42, 88, 79, 70, 58, 49, 41, 33, 27, 22], height: 100 },
+    { kind: "button", label: "I watered it" },
+    { kind: "text", text: "New leaf unfurling. Turn the pot a quarter so it grows straight." }
+  ] },
+  { name: "Identify", tabs: [4, 2], blocks: [
+    { kind: "title", text: "What is it?", note: "Camera" },
+    plantPhoto(250, "Snapshot", true),
+    { kind: "hero", label: "96% match", figure: "Pilea", note: "Chinese money plant \xB7 easy", fill: "accent", ink: "onAccent" },
+    { kind: "rows", card: true, rows: [{ title: "Water", sub: "When the top inch is dry", glyph: "drop" }, { title: "Light", sub: "Bright, out of direct sun", glyph: "sun" }, { title: "Pets", sub: "Safe for cats and dogs", glyph: "check" }] }
+  ] },
+  { name: "Rescue", tabs: [4, 3], blocks: [
+    { kind: "title", text: "Plant doctor", note: "Basil" },
+    { kind: "hero", label: "Yellow lower leaves", figure: "Overwatered", note: "Fixable in about ten days" },
+    { kind: "checks", rows: [["Skip the next two waterings", true], ["Move it off the cold sill", true], ["Pinch the flower buds", false], ["Repot if it smells sour", false]] },
+    { kind: "bars", title: "Recovery", note: "Day 4 of 10", values: [2, 3, 4, 6, 7, 8, 9, 9, 10, 10], hi: 3, height: 90 },
+    { kind: "button", label: "Remind me on Thursday" }
+  ] }
+];
+var SHOTS = [
+  { key: "Water", fill: "accent", label: "It tells you who\u2019s thirsty.", tag: "No more guessing", tilt: -3 },
+  { key: "Track", fill: "primary", label: "Every plant gets its own page.", tag: "Soil, light, last drink", tilt: 3 },
+  { key: "Identify", fill: "paper", label: "Point. Shoot. It\u2019s a Pilea.", tag: "12,000 species", tilt: -3 },
+  { key: "Rescue", fill: "secondary", label: "A plan for the one that\u2019s dying.", tag: "Plant doctor", tilt: 3 }
+];
+var leaf = (w, h) => ({ closed: true, points: [
+  { x: w / 2, y: h, handleOut: { x: -w * 0.25, y: h * 0.7 } },
+  { x: w / 2, y: 0, handleIn: { x: -w * 0.1, y: h * 0.2 }, handleOut: { x: w * 1.1, y: h * 0.2 } },
+  { x: w / 2, y: h, handleIn: { x: w * 1.25, y: h * 0.7 } }
+] });
+var saas_store_play_kit_default = defineTemplate({
+  id: "social-saas-store-play-kit",
+  meta: {
+    name: "SaaS store Google Play kit",
+    description: "A Google Play listing in one neo-brutalist system: the 1024 \xD7 500 feature graphic (words on the left, clear of the centre where Play lays its play button) and four 1080 \xD7 1920 phone screenshots, each one benefit on an outlined label over a phone with a block shadow and outsized leaves. Drop your own capture on each phone\u2019s screenshot slot",
+    category: "social",
+    tags: ["saas", "saas store", "google play", "feature graphic", "screenshots", "android", "neo-brutalist", "aso", "mobile app", "subscription app", "listing", "play store"],
+    platforms: ["google-play", "android"],
+    formats: ["banner", "screenshot", "gallery"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store Google Play kit", preset("play-feature"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        paper: "#F4EFE2",
+        text: "#151515",
+        primary: "#22B573",
+        onPrimary: "#0A1A12",
+        secondary: "#FF6A48",
+        onSecondary: "#1E0802",
+        accent: "#FFD43B",
+        onAccent: "#151515",
+        ...uiRoles({ screen: "#F7F5EE", surface: "#FFFFFF", onScreen: "#151515", onScreenMuted: "#55584F", line: "#D9D5C7", track: "#E7E3D6", tile: "#DDF3E7", photo: "#CFE3C4", positive: "#127A4B", primary: "#22B573", onPrimary: "#0A1A12", accent: "#FFD43B", onAccent: "#151515", device: "#151515", deviceEdge: "#151515" })
+      },
+      { name: "Sill", tagline: "Plants that tell you when they\u2019re thirsty." }
+    );
+    k.palette({ outline: "#151515", label: "#FFFFFF", onLabel: "#151515", leafA: "#178A56", leafB: "#0F6B43", pot: "#FF6A48" });
+    k.textStyle("Name 132", { size: 132, fontWeight: 900, letterSpacing: -6, lineHeight: 120 });
+    k.textStyle("Tagline 34", { size: 34, fontWeight: 700, letterSpacing: -0.8, lineHeight: 40 });
+    k.textStyle("Chip 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 0.8, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Label 100", { size: 100, fontWeight: 900, letterSpacing: -4.6, lineHeight: 98 });
+    k.textStyle("Tag 30", { ...MONO, size: 30, fontWeight: 700, letterSpacing: 1.4, lineHeight: 38, textCase: "UPPER" });
+    pill(k, "Tag", { fill: "outline", ink: "label", style: "Tag 30", label: "01 \xB7 No more guessing", pad: [10, 20], radius: 0 });
+    const line = (w) => ({ color: "outline", width: w, align: "INSIDE" });
+    const drawLeaf = (sheet, w, h, x, y, rot, role, stroke) => {
+      const id = k.vector(sheet, w, h, [leaf(w, h)], role, { name: "Leaf", absolute: { x, y }, stroke: { color: "outline", width: stroke, align: "CENTER" } });
+      k.patch(id, { rotation: rot });
+    };
+    const feature = k.sheet;
+    ground(k, feature, "Feature graphic", "accent");
+    k.rect(feature, 420, 500, "primary", { name: "Green block", absolute: { x: 604, y: 0 }, stroke: line(6) });
+    drawLeaf(feature, 190, 330, 560, 40, -24, "leafA", 6);
+    drawLeaf(feature, 170, 300, 880, 150, 32, "leafB", 6);
+    drawLeaf(feature, 120, 210, 905, -30, 14, "leafA", 6);
+    flatPhone(k, feature, { spec: SCREENS[0], scale: 0.86, x: 640, y: 70, rotation: -7, name: "Phone", shadow: hardShadow(k, "outline", 14, 14) });
+    const words = k.stack(feature, { width: 520, gap: 18, name: "Feature words", absolute: { x: 48, y: 52 } });
+    const brandRow = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, brandRow, { fill: "outline", size: 34, pad: 9, radius: 12 });
+    const chip = k.stack(brandRow, { direction: "HORIZONTAL", width: "HUG", fill: "label", padding: { top: 6, right: 12, bottom: 6, left: 12 }, stroke: line(3), effects: [hardShadow(k, "outline", 4, 4)], name: "Chip" });
+    k.text(chip, "Plant care", { style: "Chip 20", color: "onLabel", autoWidth: true, name: "Chip text" });
+    k.text(words, "{{brand.name}}", { style: "Name 132", color: "onAccent", name: "Name" });
+    const tagBox = k.stack(words, { width: 470, fill: "label", padding: { top: 16, right: 20, bottom: 18, left: 20 }, stroke: line(5), effects: [hardShadow(k, "outline", 8, 8)], name: "Tagline box" });
+    k.text(tagBox, "{{brand.tagline}}", { style: "Tagline 34", color: "onLabel", name: "Tagline" });
+    const W = 1080, SCALE = 2, PW = Math.round(426 * SCALE);
+    SHOTS.forEach((s, i) => {
+      const sheet = k.addSheet(preset("play-phone"));
+      ground(k, sheet, `Screenshot ${i + 1} \xB7 ${s.key}`, s.fill);
+      k.patch(sheet, { x: 1024 + 120 + i * (W + 120), y: 0 });
+      const next = ["primary", "accent", "secondary", "accent"][i];
+      k.rect(sheet, 760, 1300, next, { name: "Block", absolute: { x: i % 2 ? 40 : 280, y: 700 }, stroke: line(8) });
+      drawLeaf(sheet, 340, 600, i % 2 ? 790 : -50, 520, i % 2 ? 28 : -28, "leafA", 9);
+      drawLeaf(sheet, 280, 480, i % 2 ? -60 : 860, 900, i % 2 ? -34 : 34, "leafB", 9);
+      drawLeaf(sheet, 260, 440, i % 2 ? 880 : -70, 1380, i % 2 ? 40 : -40, "leafA", 9);
+      flatPhone(k, sheet, { spec: SCREENS[i], scale: SCALE, x: (W - PW) / 2, y: 560, rotation: s.tilt, name: "Phone", shadow: hardShadow(k, "outline", 14, 14) });
+      const label = k.stack(sheet, { width: W - 128, gap: 0, fill: "label", padding: { top: 34, right: 40, bottom: 40, left: 40 }, stroke: line(8), effects: [hardShadow(k, "outline", 14, 14)], name: "Label", absolute: { x: 56, y: 150 } });
+      k.text(label, s.label, { style: "Label 100", color: "onLabel", name: "Label text" });
+      k.instance(sheet, "Tag", { Label: `0${i + 1} \xB7 ${s.tag}` }, { name: "Tag", absolute: { x: 56, y: 96 } });
+    });
+    k.setCover(feature);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_play_kit_default
+};

package/dist/chunks/chunk-OQOEFC2U.js

@@ -0,0 +1,86 @@
+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 {
+  caption,
+  comicMeta,
+  comicSetup,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  tier,
+  tierBox
+} from "./chunk-WN54DD42.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/print/comic-book-nine-grid.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = "noir";
+var room = (cast, lit = 0.2) => ({ env: "shop", horizon: 0.5, vp: 0.6, lit, seed: 3, light: { kind: "bulb", x: 0.5, y: 0.2, r: 9 }, cast });
+var ada = (pose, x = 0.66, face = -1) => ({ who: "ada", pose, x, size: 0.62, ground: 0.98, face });
+var teo = (pose, x = 0.24, face = 1) => ({ who: "teo", pose, x, size: pose === "sit" ? 0.4 : 0.48, ground: 0.98, face });
+function shopPage(k, sheet) {
+  const g = 10, { W, H } = pageGrid(k, sheet, 36, g);
+  const hs = rows(H, g, [1, 1, 1]);
+  const beats = [
+    room([teo("sit"), ada("stand")]),
+    room([teo("sit"), ada("reach")]),
+    room([teo("stand"), ada("reach")]),
+    room([teo("stand"), ada("stand", 0.66, -1)]),
+    room([teo("look-up", 0.3), ada("stand", 0.6, -1)]),
+    room([teo("stand", 0.3), ada("point", 0.6, -1)]),
+    room([teo("walk", 0.18, -1), ada("walk", 0.44, -1)]),
+    room([ada("walk", 0.14, -1)]),
+    room([], 0.05)
+  ];
+  const grounds = ["g1", "g2", "g3"];
+  for (let r = 0; r < 3; r++) {
+    const t = tierBox(k, sheet, W, hs[r], `Tier ${r + 1}`);
+    tier(W, hs[r], [1, 1, 1], g).forEach((f, i) => panel(k, t, f, S, beats[r * 3 + i], { ground: grounds[(i + r) % 3], name: `Panel ${r * 3 + i + 1}` }));
+    const cw = Math.round((W - g * 2) / 3);
+    if (r === 0) {
+      caption(k, t, "10:04. The radio shop on Pier Street.", { x: 8, y: 8, width: 150 });
+      sfx(k, t, "Kssshh", { x: cw + g + 30, y: 14, w: 120, h: 70, deg: -6, seed: 2 });
+      say(k, t, "It\u2019s all static.", { x: cw * 2 + g * 2 + 12, y: 10, width: 108, to: { x: cw * 2 + g * 2 + cw * 0.24, y: hs[0] * 0.56 }, style: S });
+    }
+    if (r === 1) {
+      say(k, t, "Not all of it. Listen.", { x: 30, y: 8, width: 120, to: { x: cw * 0.64, y: hs[1] * 0.45 }, style: S });
+      caption(k, t, "\u201C\u2026Ada. Come up to the tower, Ada\u2026\u201D", { x: cw + g + 8, y: 8, width: 160, name: "Radio voice" });
+      say(k, t, "That\u2019s your name.", { x: cw * 2 + g * 2 + 10, y: 10, width: 112, to: { x: cw * 2 + g * 2 + cw * 0.3, y: hs[1] * 0.5 }, style: S });
+    }
+    if (r === 2) {
+      say(k, t, "Get your coat.", { x: 40, y: 8, width: 100, to: { x: cw * 0.44, y: hs[2] * 0.48 }, style: S });
+      caption(k, t, "10:11.", { x: cw * 2 + g * 2 + 8, y: 8, width: 60 });
+    }
+  }
+}
+var comic_book_nine_grid_default = defineTemplate({
+  id: "comic-nine-grid",
+  meta: comicMeta("Nine-panel grid", `Page three of "The Long Night", in noir black and white: nine frames of the same radio shop from the same spot under one bare bulb, the radio says Ada's name, and the last frame is the empty room`, ["grid", "nine-panel", "noir", "black and white"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Nine-panel grid", preset("comic-page"));
+    comicSetup(k, S);
+    shopPage(k, k.sheet);
+    return k.finish();
+  }
+});
+
+export {
+  shopPage,
+  comic_book_nine_grid_default
+};

package/dist/chunks/chunk-OQOSHZCI.js

@@ -0,0 +1,135 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  SERVICES,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  kpiRow,
+  label,
+  lockup,
+  panel,
+  servicesTable,
+  ts,
+  widenConsole
+} from "./chunk-2L6C5PWP.js";
+import {
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-data-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS link preview";
+var CON_W = 580;
+var ROWS = SERVICES.slice(1, 6);
+var style_data_link_preview_default = defineTemplate({
+  id: "social-saas-style-data-link-preview",
+  meta: {
+    name: NAME,
+    description: "A link preview card in a data-dense enterprise look for an observability platform: the name, the promise and the address beside a console panel of KPI tiles over a services table, one service washed red and flagged with its sparkline off the scale. Open Graph 1200 \xD7 630 with GitHub social preview and X post sizes",
+    category: "social",
+    tags: ["social", "link preview", "open graph", "og image", "github", "x", "saas", "data", "dashboard", "enterprise", "observability", "devops", "launch"],
+    platforms: ["web", "x", "linkedin", "github"],
+    formats: ["banner", "post"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("og-image"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 26", display(26));
+    ts(k, "Head 52", display(50, { lead: 1.06 }));
+    ts(k, "Head 64", display(64, { lead: 1.06 }));
+    ts(k, "Sub 22", body(22));
+    ts(k, "Sub 26", body(26));
+    ts(k, "Site 22", code(22));
+    ts(k, "Label 16", label(16));
+    ts(k, "Kpi 32", figure(32));
+    ts(k, "Delta 16", figure(16, 600));
+    ts(k, "Name 18", code(18, 600));
+    ts(k, "Sub 16", code(16));
+    ts(k, "Cell 18", figure(18, 500));
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 9, right: 14, bottom: 9, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Site 22", color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Link preview");
+    k.flowSheet(sheet, 0, { top: 56, right: 56, bottom: 56, left: 56 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    const card = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Card row" });
+    const words = k.stack(card, { width: 460, gap: 22, name: "Words" });
+    lockup(k, words, { size: 42, style: "Brand 26" });
+    k.text(words, SPANWISE.tagline, { style: "Head 52", color: "text", name: "Headline" });
+    k.text(words, "Observability for platform teams at scale. Every span kept.", { style: "Sub 22", color: "onPaper", name: "Sub" });
+    k.instance(words, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
+    const con = panel(k, card, { width: CON_W, name: "Console" });
+    kpiRow(k, con, [
+      { label: "P99, CHECKOUT", value: "2,340 ms", delta: "\u2191 12.9\xD7 at 14:02", tone: "down", name: "P99 figure" },
+      { label: "DETECTED IN", value: "38 s", delta: "cause: payments-gw", tone: "warn", name: "Detect figure" }
+    ], { labelStyle: "Label 16", figStyle: "Kpi 32", deltaStyle: "Delta 16", figW: 230, pad: [14, 20], ruleH: 120 });
+    k.rect(con, "FILL", 1, "line", { name: "Kpi rule bottom" });
+    const t = servicesTable(k, con, { w: CON_W, rowH: 60, rows: ROWS, cols: ["service", "p99", "trend", "state"], widths: { p99: 110, trend: 120, state: 10 }, styles: { head: "Label 16", name: "Name 18", sub: "Sub 16", fig: "Cell 18" }, pad: 20, headH: 36 });
+    const an = t.rows.find((r) => r.service.anomaly);
+    if (an.glow) k.patch(an.glow, { opacity: 1 });
+    k.patch(an.p99, { characters: "2,340 ms" });
+    k.patch(an.dot, { fills: k.paint("down") });
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 56, right: 64, bottom: 56, left: 64 } });
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 80, right: 80, bottom: 80, left: 80 } });
+        for (const n of kit.named(id, "Card row")) kit.patch(n, { itemSpacing: 56 });
+        for (const n of kit.named(id, "Words")) kit.patch(n, { width: 600 });
+        widenConsole(kit, id, 1600 - 160 - 600 - 56 - CON_W);
+        for (const n of kit.named(id, "Console")) kit.patch(n, { width: 1600 - 160 - 600 - 56 });
+        ts(kit, "Label 18", label(18));
+        ts(kit, "Kpi 40", figure(40));
+        ts(kit, "Delta 19", figure(19, 600));
+        ts(kit, "Name 22", code(22, 600));
+        ts(kit, "Sub 18", code(18));
+        ts(kit, "Cell 22", figure(22, 500));
+        for (const [n, st] of [["Kpi label", "Label 18"], ["Head label", "Label 18"], ["P99 figure", "Kpi 40"], ["Detect figure", "Kpi 40"], ["P99 figure delta", "Delta 19"], ["Detect figure delta", "Delta 19"], ["Service name", "Name 22"], ["Service region", "Sub 18"], ["Row p99", "Cell 22"], ["Anomaly p99", "Cell 22"]]) restyle(kit, id, n, st);
+        const RH = 104;
+        for (const n of kit.named(id, "Table head")) kit.patch(n, { height: 52 });
+        for (const b of kit.named(id, "Table body")) {
+          kit.patch(b, { height: ROWS.length * RH });
+          const rows = kit.node(b).children ?? [];
+          rows.forEach((r, i) => {
+            kit.patch(r, { y: i * RH, height: RH });
+            for (const g of kit.named(r, "Anomaly glow")) kit.patch(g, { height: RH });
+            for (const g of kit.named(r, "Row rule")) kit.patch(g, { y: RH - 1 });
+          });
+        }
+        restyle(kit, id, "Headline", "Head 64");
+        restyle(kit, id, "Sub", "Sub 26");
+      } }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_link_preview_default
+};

package/dist/chunks/chunk-OR6HMJRM.js

@@ -0,0 +1,173 @@
+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 {
+  RECORD_LIMITS
+} from "./chunk-7BXAKNBN.js";
+import {
+  hashOf
+} from "./chunk-U3SNMHEE.js";
+import {
+  loadKitModules
+} from "./chunk-64RMGOTG.js";
+import {
+  HELPER_NAMES
+} from "./chunk-XAGVE2C6.js";
+import {
+  replay
+} from "./chunk-VZOW336W.js";
+import {
+  insertRootGroups
+} from "./chunk-2Y24BYTM.js";
+import {
+  templateFromDocument
+} from "./chunk-V5AYSOB6.js";
+import {
+  rewriteIds
+} from "./chunk-YFCXPJQS.js";
+import {
+  init_print_pages,
+  init_scene_graph,
+  isFixedPageKind,
+  removeNode
+} from "./chunk-PLZOQXMQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/agent/design-script/build.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+init_print_pages();
+var DESIGN_NAMESPACES = ["k", "ease", "hex", "preset", ...HELPER_NAMES];
+async function namespaces(name, size) {
+  const m = await loadKitModules();
+  const kit = new m.Kit(name, size);
+  kit.quantizeGeometry = true;
+  return { kit, ns: { k: kit, ease: m.ease, hex: m.hex, preset: m.preset, ...m.helpers }, tracks: m.TRACKS };
+}
+async function sizePreset(size) {
+  const { presetById } = await import("../lib/presets/page-presets.js");
+  if (typeof size === "string") {
+    const p = presetById(size);
+    if (!p) throw new Error(`There is no size "${size}". Use a preset id (ig-story, ig-post, web-desktop, og-image\u2026) or { width, height }.`);
+    return p;
+  }
+  const width = Math.round(size.width), height = Math.round(size.height);
+  if (!(width >= 16 && width <= 8192 && height >= 16 && height <= 16384)) throw new Error("A custom size is 16 to 8192 px wide and 16 to 16384 px tall.");
+  return { id: `custom-${width}x${height}`, name: `${width} \xD7 ${height}`, category: "SOCIAL", width, height, unit: "px" };
+}
+async function buildDesign(source, size, name, record) {
+  if (source.length > RECORD_LIMITS.maxSourceChars) return { calls: 0, error: { message: `A design script is at most ${RECORD_LIMITS.maxSourceChars} characters.` } };
+  const preset = await sizePreset(size);
+  const { kit, ns, tracks } = await namespaces(name, preset);
+  const rec = await record(source, DESIGN_NAMESPACES, { W: preset.width, H: preset.height, NAME: name, TRACKS: tracks });
+  const replayed = await replay(rec, ns);
+  let doc;
+  let finishError;
+  const last = [...rec.ops].reverse().find((o) => o.line)?.line;
+  try {
+    doc = kit.finish();
+  } catch (err) {
+    finishError = { message: `Laying out the design failed after the script ran: ${err.message}. Look for a wrong value in a layer's options (a fill, an effect, a size).`, ...last ? { line: last } : {} };
+  }
+  return { doc, error: rec.error ?? replayed.error ?? finishError, calls: rec.ops.length };
+}
+function builtRoots(t) {
+  const frames = [], components = [];
+  for (const page of t.payload.pages ?? []) for (const id of page.rootIds) {
+    const n = t.payload.nodes[id];
+    if (!n) continue;
+    (n.type === "COMPONENT" || n.type === "COMPONENT_SET" ? components : frames).push(id);
+  }
+  return { frames, components };
+}
+var DERIVED = /* @__PURE__ */ new Set(["x", "y", "width", "height", "designScript", "id", "parentId", "childIds"]);
+function hashRoots(doc, roots) {
+  const parts = [];
+  const walk = (id) => {
+    const n = doc.nodes[id];
+    if (!n) return;
+    const kept = { kids: n.childIds.length };
+    for (const key of Object.keys(n).sort()) if (!DERIVED.has(key)) kept[key] = n[key];
+    parts.push(JSON.stringify(kept));
+    n.childIds.forEach(walk);
+  };
+  roots.forEach(walk);
+  return hashOf(parts.join("\n"));
+}
+function freeSpot(doc, pageId) {
+  const kids = (doc.nodes[pageId]?.childIds ?? []).map((id) => doc.nodes[id]).filter(Boolean);
+  if (!kids.length) return { x: 0, y: 0 };
+  const right = Math.max(...kids.map((n) => n.x + n.width));
+  const top = Math.min(...kids.map((n) => n.y));
+  return { x: Math.round(right + 200), y: Math.round(top) };
+}
+function placeDesign(doc, built, source, size, name, at) {
+  const t = templateFromDocument(built, { name, source: "builtin" });
+  const { frames, components } = builtRoots(t);
+  if (!frames.length) throw new Error("The script made no frame. Build into k.sheet (the frame it starts with).");
+  let document = doc;
+  let origin = freeSpot(doc, at.pageId);
+  let oldRoots = [];
+  if (at.replace) {
+    const old = doc.nodes[at.replace];
+    if (!old) throw new Error(`There is no frame "${at.replace}" to rebuild.`);
+    origin = { x: old.x, y: old.y };
+    oldRoots = old.designScript?.roots ?? [at.replace];
+    for (const id of oldRoots) document = removeNode(document, id);
+  }
+  const box = (ids) => {
+    const ns = ids.map((id) => t.payload.nodes[id]);
+    return { x: Math.min(...ns.map((n) => n.x)), y: Math.min(...ns.map((n) => n.y)), bottom: Math.max(...ns.map((n) => n.y + n.height)) };
+  };
+  const fb = box(frames);
+  const groups = [{ rootIds: frames, ox: origin.x - fb.x, oy: origin.y - fb.y }];
+  if (components.length) {
+    const cb = box(components);
+    groups.push({ rootIds: components, ox: origin.x - cb.x, oy: origin.y + (fb.bottom - fb.y) + 240 - cb.y });
+  }
+  const inserted = insertRootGroups(document, t, groups, at.pageId);
+  document = inserted.document;
+  let roots = inserted.rootIds;
+  const oldFrames = oldRoots.filter((id) => doc.nodes[id]?.type === "FRAME");
+  if (oldFrames.length) {
+    const keep = /* @__PURE__ */ new Map();
+    roots.slice(0, frames.length).forEach((id, i) => {
+      if (oldFrames[i]) keep.set(id, oldFrames[i]);
+    });
+    document = rewriteIds(document, keep);
+    roots = roots.map((id) => keep.get(id) ?? id);
+  }
+  const placed = { rootIds: roots.slice(0, frames.length) };
+  if (!isFixedPageKind(document.settings?.kind)) {
+    const nodes = { ...document.nodes };
+    for (const id of placed.rootIds) {
+      const n = nodes[id];
+      if (n?.print) {
+        const { print: _p, ...rest } = n;
+        void _p;
+        nodes[id] = rest;
+      }
+    }
+    document = { ...document, nodes };
+  }
+  const master = placed.rootIds[0];
+  document = { ...document, nodes: { ...document.nodes, [master]: { ...document.nodes[master], name } } };
+  const designScript = { source, size, roots, builtHash: hashRoots(document, roots) };
+  document = { ...document, nodes: { ...document.nodes, [master]: { ...document.nodes[master], designScript } } };
+  return { document, roots, master };
+}
+var templateOfBuild = (built, name) => templateFromDocument(built, { name, source: "builtin" });
+
+export {
+  DESIGN_NAMESPACES,
+  sizePreset,
+  buildDesign,
+  hashRoots,
+  placeDesign,
+  templateOfBuild
+};