@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-AE6OPGVT.js

@@ -0,0 +1,497 @@
+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 {
+  soft,
+  sz
+} from "./chunk-T6QWDC3F.js";
+import {
+  glyph,
+  placeDevice,
+  uiRoles
+} from "./chunk-SCE4YRSR.js";
+import {
+  TABLET,
+  devices
+} from "./chunk-IGV5QPFA.js";
+import {
+  TABLET_SCREEN
+} from "./chunk-MZVIWZ2V.js";
+import {
+  chart,
+  gridPaths
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  ground,
+  pattern
+} from "./chunk-YHBAWSDX.js";
+import {
+  statusBar
+} from "./chunk-DFO4652V.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/social/saas-store-ipad-set.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SW = TABLET_SCREEN.width;
+var SH = TABLET_SCREEN.height;
+var RAIL = 76;
+var PAD = 26;
+var MW = SW - RAIL - 2 * PAD;
+var NAV = ["square", "bars", "sun", "check", "drop", "star"];
+var FACES = ["faceA", "faceB", "faceC", "faceD", "faceE"];
+var STYLES = {
+  "Pad title 28": { size: 28, fontWeight: 800, letterSpacing: -0.8, lineHeight: 34 },
+  "Pad head 20": { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 },
+  "Pad row 17": { size: 17, fontWeight: 600, letterSpacing: -0.1, lineHeight: 22 },
+  "Pad note 16": { size: 16, fontWeight: 500, lineHeight: 20 },
+  "Pad body 17": { size: 17, fontWeight: 500, lineHeight: 25 },
+  "Pad figure 32": { size: 32, fontWeight: 800, letterSpacing: -1.1, lineHeight: 36, fontFeatures: { tnum: 1 } },
+  "Pad code 16": { ...MONO, size: 16, fontWeight: 700, letterSpacing: -0.2, lineHeight: 20 }
+};
+var ps = (k, name) => {
+  k.textStyle(name, STYLES[name]);
+  return name;
+};
+var face = (k, parent, i, size = 28) => k.ellipse(parent, size, FACES[i % FACES.length], { name: "Face", stroke: { color: "surface", width: 2, align: "OUTSIDE" } });
+function chip(k, parent, label, fill, ink) {
+  const c = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: 999, padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Chip" });
+  k.text(c, label, { style: ps(k, "Pad note 16"), color: ink, autoWidth: true, name: "Chip label" });
+  return c;
+}
+function card(k, parent, title, note, o = {}) {
+  const c = k.stack(parent, { width: o.width ?? "FILL", fill: "surface", radius: 20, gap: o.gap ?? 12, padding: { top: 16, right: 18, bottom: 18, left: 18 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Card" });
+  const head = k.stack(c, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+  k.text(head, title, { style: ps(k, "Pad head 20"), color: "onScreen", autoWidth: true, name: "Card title" });
+  if (note) k.text(head, note, { style: ps(k, "Pad note 16"), color: "onScreenMuted", autoWidth: true, name: "Card note" });
+  return c;
+}
+function kpis(k, parent, items) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: 12, name: "Figures" });
+  for (const [label, figure, note, tone2] of items) {
+    const t = k.stack(row, { width: "FILL", fill: "surface", radius: 18, gap: 2, padding: { top: 14, right: 16, bottom: 14, left: 16 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Figure tile" });
+    k.text(t, label, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Figure label" });
+    k.text(t, figure, { style: ps(k, "Pad figure 32"), color: "onScreen", name: "Figure" });
+    k.text(t, note, { style: ps(k, "Pad note 16"), color: tone2 === "good" ? "positive" : tone2 === "bad" ? "hot" : "onScreenMuted", name: "Figure note" });
+  }
+}
+function meter(k, parent, width, share, height = 10) {
+  const bar = k.stack(parent, { direction: "HORIZONTAL", width, height, radius: height / 2, fill: "track", clip: true, name: "Meter" });
+  k.rect(bar, Math.round(width * Math.min(1, share)), height, share > 1 ? "hot" : "primary", { radius: height / 2, name: "Meter fill" });
+  return bar;
+}
+function screen(k, name, nav, title, note, right, build) {
+  const full = `Tablet / ${name}`;
+  k.component(full, {
+    direction: "HORIZONTAL",
+    width: SW,
+    height: SH,
+    fill: "screen",
+    radius: TABLET_SCREEN.radius,
+    clip: true,
+    gap: 0,
+    description: `${name}: a drawn placeholder. Swap the tablet's Screen for Tablet / Screenshot and drop your own capture on it.`
+  }, (id) => {
+    const rail = k.stack(id, { width: RAIL, height: "FILL", fill: "rail", align: "CENTER", gap: 12, padding: { top: 40, right: 0, bottom: 24, left: 0 }, name: "Rail" });
+    const mark = k.stack(rail, { width: 44, height: 44, radius: 14, fill: "accent", align: "CENTER", justify: "CENTER", name: "App mark" });
+    glyph(k, mark, "bolt", 22, "onAccent");
+    k.rect(rail, 28, 2, "railInk", { name: "Rail rule", opacity: 0.4 });
+    NAV.forEach((g, i) => {
+      const tab = k.stack(rail, { width: 48, height: 48, radius: 15, align: "CENTER", justify: "CENTER", name: i === nav ? "Tab lit" : "Tab", ...i === nav ? { fill: "primary" } : {} });
+      glyph(k, tab, g, g === "dot" ? 14 : 20, i === nav ? "onPrimary" : "railInk");
+    });
+    const main = k.stack(id, { width: "FILL", height: "FILL", gap: 14, justify: "SPACE_BETWEEN", padding: { top: 10, right: PAD, bottom: 26, left: PAD }, name: "Main" });
+    statusBar(k, main, { ink: "onScreen", style: ps(k, "Pad row 17") });
+    const head = k.stack(main, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Screen head" });
+    const words = k.stack(head, { width: "HUG", gap: 0, name: "Screen words" });
+    k.text(words, title, { style: ps(k, "Pad title 28"), color: "onScreen", autoWidth: true, name: "Screen title" });
+    k.text(words, note, { style: ps(k, "Pad note 16"), color: "onScreenMuted", autoWidth: true, name: "Screen note" });
+    const side = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Screen side" });
+    chip(k, side, right, "tile", "onScreen");
+    const team = k.stack(side, { direction: "HORIZONTAL", width: "HUG", gap: -8, name: "Team" });
+    for (let i = 0; i < 4; i++) face(k, team, i + nav);
+    build(main);
+  });
+  return full;
+}
+var PROJECTS = [
+  ["Checkout redesign", "3 Nov", 0.72, "Web", "On track"],
+  ["Billing API v2", "21 Oct", 0.58, "Platform", "At risk"],
+  ["Onboarding emails", "16 Oct", 0.9, "Growth", "On track"],
+  ["iPad app 2.0", "14 Nov", 0.41, "Mobile", "On track"],
+  ["SOC 2 evidence", "30 Oct", 0.35, "Security", "Late"],
+  ["Usage export", "27 Oct", 0.64, "Platform", "On track"]
+];
+var tone = (s) => s === "On track" ? ["good", "positive"] : s === "At risk" ? ["warn", "onWarn"] : ["bad", "hot"];
+function portfolio(k, main) {
+  kpis(k, main, [["Active projects", "17", "2 new this week", "plain"], ["On track", "14", "Up from 11", "good"], ["At risk", "3", "Two on Platform", "bad"]]);
+  const c = card(k, main, "Delivery this quarter", "Planned against done, in story points");
+  const cw = MW - 36, ch = 196;
+  const plan = chart([40, 92, 150, 205, 262, 318, 380, 436, 500, 560, 624, 690], cw, ch, 720);
+  const done = chart([38, 88, 139, 201, 255, 300, 371, 440], Math.round(cw * 7 / 11), ch, 720);
+  const plot = k.stack(c, { width: cw, height: ch, name: "Plot" });
+  k.vector(plot, cw, ch, gridPaths(cw, ch, Math.round(ch / 4), 1, "y"), "line", { name: "Plot lines", absolute: { x: 0, y: 0 } });
+  k.vector(plot, cw, ch, [plan.line], "onScreenMuted", { name: "Planned", strokeWidth: 2, stroke: { color: "onScreenMuted", width: 2, dash: [6, 6] }, absolute: { x: 0, y: 0 } });
+  k.vector(plot, done.pts[done.pts.length - 1].x, ch, [{ closed: true, points: [...done.pts, { x: done.pts[done.pts.length - 1].x, y: ch }, { x: 0, y: ch }] }], k.tint("primary", 0.14), { name: "Done area", absolute: { x: 0, y: 0 } });
+  k.vector(plot, done.pts[done.pts.length - 1].x, ch, [done.line], "primary", { name: "Done", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+  const last = done.pts[done.pts.length - 1];
+  k.ellipse(plot, 16, "accent", { name: "Today", stroke: { color: "surface", width: 3, align: "OUTSIDE" }, absolute: { x: last.x - 8, y: last.y - 8 } });
+  const weeks = k.stack(c, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Weeks" });
+  for (const w of ["W40", "W42", "W44", "W46", "W48", "W50"]) k.text(weeks, w, { style: ps(k, "Pad code 16"), color: "onScreenMuted", autoWidth: true, name: "Week" });
+  const list = card(k, main, "Projects", "17 active \xB7 sorted by due date", { gap: 0 });
+  for (const [i, [name, due, share, team, status]] of PROJECTS.entries()) {
+    if (i) k.rect(list, "FILL", 1, "line", { name: "Row rule" });
+    const row = k.stack(list, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 9, right: 0, bottom: 9, left: 0 }, name: "Project" });
+    face(k, row, i + 1, 30);
+    const words = k.stack(row, { width: 190, gap: 0, name: "Project words" });
+    k.text(words, name, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Project name" });
+    k.text(words, `${team} \xB7 due ${due}`, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Project due" });
+    meter(k, row, 200, share);
+    k.text(row, `${Math.round(share * 100)}%`, { style: ps(k, "Pad row 17"), color: "onScreen", width: 44, name: "Project share" });
+    const filler = k.stack(row, { direction: "HORIZONTAL", justify: "MAX", name: "Project status" });
+    const [fill, ink] = tone(status);
+    chip(k, filler, status, fill === "good" ? "tile" : fill, fill === "good" ? "onScreen" : ink === "hot" ? "onBad" : ink);
+  }
+  const foot = k.stack(main, { direction: "HORIZONTAL", gap: 12, name: "Foot cards" });
+  const next = card(k, foot, "Next milestone", "In 6 days");
+  k.text(next, "Billing API v2: dry run", { style: ps(k, "Pad row 17"), color: "onScreen", name: "Milestone" });
+  meter(k, next, 280, 0.58);
+  const risk = card(k, foot, "Needs a decision", "2 open");
+  k.text(risk, "SOC 2 evidence: 9 days behind", { style: ps(k, "Pad row 17"), color: "onScreen", name: "Decision" });
+  k.text(risk, "Move the audit, or add a person", { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Decision note" });
+}
+var PEOPLE = [
+  ["Imani Okafor", "Platform \xB7 Billing API v2", 1.12],
+  ["Lucas Meyer", "Web \xB7 Checkout redesign", 0.94],
+  ["Sofia Marchetti", "Mobile \xB7 iPad app 2.0", 0.88],
+  ["Kenji Watanabe", "Platform \xB7 Usage export", 1.06],
+  ["Amara Diallo", "Growth \xB7 Onboarding emails", 0.7],
+  ["Tom Brennan", "Security \xB7 SOC 2 evidence", 0.97],
+  ["Nina Kowalski", "Design \xB7 Checkout redesign", 0.62]
+];
+function capacity(k, main) {
+  kpis(k, main, [["Team capacity", "86%", "Of 612 hours this week", "plain"], ["Overbooked", "2 people", "Both on Platform", "bad"], ["Free next week", "31 h", "Design and Growth", "good"]]);
+  const c = card(k, main, "Week of 12 October", "Booked hours against each person\u2019s week", { gap: 0 });
+  for (const [i, [name, role, share]] of PEOPLE.entries()) {
+    if (i) k.rect(c, "FILL", 1, "line", { name: "Row rule" });
+    const row = k.stack(c, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 11, right: 0, bottom: 11, left: 0 }, name: "Person" });
+    face(k, row, i, 34);
+    const words = k.stack(row, { width: 236, gap: 0, name: "Person words" });
+    k.text(words, name, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Person name" });
+    k.text(words, role, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Person role" });
+    meter(k, row, 264, share, 14);
+    k.text(row, `${Math.round(share * 100)}%`, { style: ps(k, "Pad row 17"), color: share > 1 ? "hot" : "onScreen", align: "RIGHT", name: "Person share" });
+  }
+  const foot = k.stack(main, { direction: "HORIZONTAL", gap: 12, name: "Foot cards" });
+  const teams = card(k, foot, "By team", "Booked");
+  const bars = k.stack(teams, { direction: "HORIZONTAL", height: 142, justify: "SPACE_BETWEEN", align: "MAX", name: "Team bars" });
+  for (const [label, v] of [["API", 1.09], ["Web", 0.88], ["iPad", 0.88], ["Mktg", 0.7], ["UX", 0.62]]) {
+    const col = k.stack(bars, { width: 52, gap: 6, align: "CENTER", name: "Team bar" });
+    k.rect(col, 34, Math.round(v * 100), v > 1 ? "hot" : "primary", { radius: 9, name: "Bar" });
+    k.text(col, label, { style: ps(k, "Pad code 16"), color: "onScreenMuted", align: "CENTER", name: "Bar label" });
+  }
+  const fix = card(k, foot, "Suggested", "Clears both");
+  k.text(fix, "Move \u201CInvoice PDF\u201D from Imani to Nina: 14 hours, same skills, no date moves.", { style: ps(k, "Pad body 17"), color: "onScreen", name: "Suggestion" });
+  const apply = k.stack(fix, { fill: "primary", radius: 12, align: "CENTER", padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Apply" });
+  k.text(apply, "Apply the change", { style: ps(k, "Pad row 17"), color: "onPrimary", align: "CENTER", name: "Apply label" });
+  const away = card(k, main, "Away this week", "3 people, 44 hours");
+  const off = k.stack(away, { direction: "HORIZONTAL", gap: 10, name: "Away" });
+  for (const [i, [who, when]] of [["Sofia Marchetti", "Thursday and Friday"], ["Diego Ramos", "Monday morning"], ["Amara Diallo", "Wednesday"]].entries()) {
+    const t = k.stack(off, { direction: "HORIZONTAL", width: "FILL", gap: 10, align: "CENTER", fill: "screen", radius: 12, padding: { top: 10, right: 12, bottom: 10, left: 10 }, name: "Away person" });
+    face(k, t, i + 2, 30);
+    const words = k.stack(t, { gap: 0, name: "Away words" });
+    k.text(words, who, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Away name" });
+    k.text(words, when, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Away when" });
+  }
+}
+var LANES = [
+  ["Checkout redesign", 0.4, 4.6, "primary"],
+  ["Billing API v2", 0, 3.2, "hot"],
+  ["Usage export", 2.2, 2.6, "primary"],
+  ["Onboarding emails", 0.2, 1.8, "accent"],
+  ["iPad app 2.0", 1.4, 5.8, "primary"],
+  ["SOC 2 evidence", 0.8, 3.6, "hot"],
+  ["Search", 3.4, 3.4, "rail"],
+  ["Pricing page", 4.2, 2.4, "accent"],
+  ["Data residency", 5, 3, "rail"]
+];
+function timeline(k, main) {
+  const c = card(k, main, "October to November", "Bars move when a dependency does", { gap: 0 });
+  const LW = 180, TW = MW - 36 - LW, wk = TW / 8;
+  const head = k.stack(c, { direction: "HORIZONTAL", padding: { top: 0, right: 0, bottom: 8, left: LW }, name: "Week head" });
+  for (const w of ["W41", "W42", "W43", "W44", "W45", "W46", "W47", "W48"]) k.text(head, w, { style: ps(k, "Pad code 16"), color: "onScreenMuted", width: Math.floor(wk), name: "Week" });
+  for (const [name, at, len, role] of LANES) {
+    k.rect(c, "FILL", 1, "line", { name: "Row rule" });
+    const row = k.stack(c, { direction: "HORIZONTAL", align: "CENTER", height: 62, name: "Lane" });
+    k.text(row, name, { style: ps(k, "Pad row 17"), color: "onScreen", width: LW, name: "Lane name" });
+    const track = k.stack(row, { width: TW, height: 30, name: "Lane track" });
+    k.rect(track, Math.round(Math.min(len, 8 - at) * wk) - 6, 26, role, { radius: 9, name: "Lane bar", absolute: { x: Math.round(at * wk), y: 2 } });
+  }
+  k.rect(c, 2, LANES.length * 63 + 14, "onScreen", { name: "Today line", absolute: { x: 18 + LW + Math.round(1.3 * wk), y: 78 } });
+  const today = k.stack(c, { direction: "HORIZONTAL", width: "HUG", fill: "onScreen", radius: 8, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Today tag", absolute: { x: 18 + LW + Math.round(1.3 * wk) + 8, y: 84 } });
+  k.text(today, "TODAY", { style: ps(k, "Pad code 16"), color: "surface", autoWidth: true, name: "Today label" });
+  const moved = card(k, main, "Moved this week", "3 changes, all automatic", { gap: 10 });
+  for (const [what, why] of [["Checkout redesign now ends 3 November", "Billing API v2 slipped four days; it waits on the new invoices endpoint"], ["Search starts a week later", "Diego is on Checkout until the 30th"], ["Pricing page pulled forward to W45", "Design has 31 free hours next week"]]) {
+    const row = k.stack(moved, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Change" });
+    const dot = k.stack(row, { width: 32, height: 32, radius: 11, fill: "tile", align: "CENTER", justify: "CENTER", name: "Change icon" });
+    glyph(k, dot, "play", 14, "primary");
+    const words = k.stack(row, { gap: 0, name: "Change words" });
+    k.text(words, what, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Change title" });
+    k.text(words, why, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Change why" });
+  }
+  kpis(k, main, [["Ships this quarter", "11 of 17", "Two more than planned", "good"], ["Critical path", "38 days", "Billing API v2 to Checkout", "plain"], ["Slack on the path", "3 days", "Was 7 on Monday", "bad"]]);
+}
+function report(k, main) {
+  const c = card(k, main, "Status report \xB7 Friday 9 October", "Drafted at 4:00 pm from this week\u2019s work", { gap: 12 });
+  k.text(c, "Fourteen of seventeen projects are on track. Onboarding emails ships Thursday, two days early. Billing API v2 is four days behind: the invoices endpoint needed a second review, and Checkout redesign moves to 3 November with it. SOC 2 evidence needs a decision by Tuesday.", { style: ps(k, "Pad body 17"), color: "onScreen", name: "Summary" });
+  for (const [mark, role, line] of [["check", "positive", "Shipped: usage export (beta), new pricing page copy, 41 tickets closed"], ["check", "positive", "Ahead: onboarding emails, by two days"], ["drop", "hot", "Behind: Billing API v2 (4 days), SOC 2 evidence (9 days)"]]) {
+    const row2 = k.stack(c, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Report line" });
+    const dot = k.stack(row2, { width: 28, height: 28, radius: 10, fill: "tile", align: "CENTER", justify: "CENTER", name: "Line icon" });
+    glyph(k, dot, mark, 13, role);
+    k.text(row2, line, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Line words" });
+  }
+  const mid = k.stack(main, { direction: "HORIZONTAL", gap: 12, name: "Middle cards" });
+  const shipped = card(k, mid, "Shipped per week", "Story points");
+  const bars = k.stack(shipped, { direction: "HORIZONTAL", height: 150, justify: "SPACE_BETWEEN", align: "MAX", name: "Shipped bars" });
+  [38, 50, 51, 62, 54, 45, 71, 69].forEach((v, i) => {
+    const col = k.stack(bars, { width: 28, gap: 6, align: "CENTER", name: "Shipped bar" });
+    k.rect(col, 24, Math.round(v * 1.6), i === 6 ? "accent" : "primary", { radius: 8, name: "Bar" });
+    k.text(col, `${33 + i}`, { style: ps(k, "Pad code 16"), color: "onScreenMuted", align: "CENTER", name: "Bar label" });
+  });
+  const asks = card(k, mid, "Decisions needed", "2");
+  for (const [q, by] of [["Move the SOC 2 audit to 13 Nov, or add an engineer?", "By Tuesday \xB7 Tom Brennan"], ["Ship Checkout without Apple Pay on day one?", "By Friday \xB7 Lucas Meyer"]]) {
+    const item = k.stack(asks, { gap: 2, fill: "screen", radius: 12, padding: { top: 10, right: 12, bottom: 10, left: 12 }, name: "Ask" });
+    k.text(item, q, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Ask words" });
+    k.text(item, by, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Ask by" });
+  }
+  const send = card(k, main, "Goes to", "9 people, every Friday at 4:30 pm");
+  const row = k.stack(send, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Send row" });
+  const who = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: -8, name: "Readers" });
+  for (let i = 0; i < 7; i++) face(k, who, i, 36);
+  const button = k.stack(row, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 12, padding: { top: 11, right: 18, bottom: 11, left: 18 }, name: "Send button" });
+  k.text(button, "Review and send", { style: ps(k, "Pad row 17"), color: "onPrimary", autoWidth: true, name: "Send label" });
+  const ahead = card(k, main, "Next week", "From the plan, not from memory", { gap: 10 });
+  for (const [day, what] of [["MON", "Billing API v2: invoices endpoint in review"], ["TUE", "SOC 2: decide on the audit date"], ["THU", "Onboarding emails ship to everyone"]]) {
+    const row2 = k.stack(ahead, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Ahead" });
+    const tag = k.stack(row2, { width: 48, fill: "tile", radius: 8, align: "CENTER", padding: { top: 5, right: 0, bottom: 5, left: 0 }, name: "Ahead day" });
+    k.text(tag, day, { style: ps(k, "Pad code 16"), color: "onScreen", align: "CENTER", name: "Day" });
+    k.text(row2, what, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Ahead words" });
+  }
+  const last = card(k, main, "Last four reports", "Opened by");
+  const sent = k.stack(last, { direction: "HORIZONTAL", gap: 10, name: "Sent" });
+  for (const [date, opened] of [["2 Oct", "9 of 9"], ["25 Sep", "8 of 9"], ["18 Sep", "9 of 9"], ["11 Sep", "7 of 9"]]) {
+    const t = k.stack(sent, { width: "FILL", fill: "screen", radius: 12, gap: 0, padding: { top: 10, right: 12, bottom: 10, left: 12 }, name: "Sent report" });
+    k.text(t, date, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Sent date" });
+    k.text(t, opened, { style: ps(k, "Pad head 20"), color: "onScreen", name: "Sent opened" });
+  }
+}
+var QUEUE = [
+  ["REQ-412", "Invoices in EUR for Germany", "Sales", 3, "New"],
+  ["REQ-411", "Export usage as CSV by workspace", "Support", 2, "Accepted"],
+  ["REQ-409", "Okta SSO for the admin console", "Sales", 3, "In triage"],
+  ["REQ-408", "Dark mode loses the chart legend", "Support", 1, "Accepted"],
+  ["REQ-405", "Digest: pick the day it sends", "Success", 1, "New"],
+  ["REQ-403", "Audit log for role changes", "Security", 3, "Accepted"],
+  ["REQ-401", "Search inside archived projects", "Support", 2, "In triage"],
+  ["REQ-398", "Slack alerts when a date moves", "Success", 2, "New"],
+  ["REQ-396", "Bulk-assign tasks from a CSV", "Sales", 1, "In triage"]
+];
+function requests(k, main) {
+  kpis(k, main, [["New this week", "12", "4 from Sales", "plain"], ["Waiting on triage", "5", "Oldest: 2 days", "bad"], ["Accepted this quarter", "28", "19 already planned", "good"]]);
+  const c = card(k, main, "Requests", "Every team asks here, not in chat", { gap: 0 });
+  const cols = k.stack(c, { direction: "HORIZONTAL", gap: 12, padding: { top: 0, right: 0, bottom: 8, left: 0 }, name: "Columns" });
+  for (const [label, w] of [["ID", 70], ["REQUEST", 300], ["FROM", 74], ["IMPACT", 60]]) k.text(cols, label, { style: ps(k, "Pad code 16"), color: "onScreenMuted", width: w, name: "Column" });
+  k.text(cols, "STATUS", { style: ps(k, "Pad code 16"), color: "onScreenMuted", align: "RIGHT", name: "Column" });
+  for (const [id, title, from, impact, status] of QUEUE) {
+    k.rect(c, "FILL", 1, "line", { name: "Row rule" });
+    const row = k.stack(c, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 14, right: 0, bottom: 14, left: 0 }, name: "Request" });
+    k.text(row, id, { style: ps(k, "Pad code 16"), color: "onScreenMuted", width: 70, name: "Request id" });
+    k.text(row, title, { style: ps(k, "Pad row 17"), color: "onScreen", width: 300, name: "Request title" });
+    k.text(row, from, { style: ps(k, "Pad note 16"), color: "onScreenMuted", width: 74, name: "Request from" });
+    const dots = k.stack(row, { direction: "HORIZONTAL", width: 60, gap: 4, align: "CENTER", name: "Impact" });
+    for (let i = 0; i < 3; i++) k.rect(dots, 12, 12, i < impact ? "primary" : "track", { radius: 4, name: "Impact pip" });
+    const end = k.stack(row, { direction: "HORIZONTAL", justify: "MAX", name: "Request status" });
+    chip(k, end, status, status === "Accepted" ? "tile" : status === "New" ? "accent" : "warn", status === "Accepted" ? "onScreen" : status === "New" ? "onAccent" : "onWarn");
+  }
+  const decided = card(k, main, "Decided this week", "Each asker was told why", { gap: 10 });
+  for (const [mark, role, what] of [["check", "positive", "Accepted: audit log for role changes. Planned for W46, with SOC 2"], ["drop", "hot", "Declined: custom report builder. The Friday report covers it for now"]]) {
+    const row = k.stack(decided, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Decision" });
+    const dot = k.stack(row, { width: 28, height: 28, radius: 10, fill: "tile", align: "CENTER", justify: "CENTER", name: "Decision icon" });
+    glyph(k, dot, mark, 13, role);
+    k.text(row, what, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Decision words" });
+  }
+  const foot = card(k, main, "Where requests come from", "Last 90 days");
+  const split = k.stack(foot, { direction: "HORIZONTAL", gap: 4, height: 18, name: "Sources" });
+  for (const [w, role] of [[0.38, "primary"], [0.3, "rail"], [0.2, "accent"], [0.12, "track"]]) k.rect(split, Math.round((MW - 36 - 12) * w), 18, role, { radius: 6, name: "Source" });
+  const legend = k.stack(foot, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Legend" });
+  for (const l of ["Support 38%", "Sales 30%", "Success 20%", "Security 12%"]) k.text(legend, l, { style: ps(k, "Pad note 16"), color: "onScreenMuted", autoWidth: true, name: "Legend item" });
+}
+function detail(k, main) {
+  const top = card(k, main, "Checkout redesign", "Web \xB7 due 3 November", { gap: 12 });
+  const prog = k.stack(top, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Progress" });
+  meter(k, prog, MW - 36 - 70, 0.72, 14);
+  k.text(prog, "72%", { style: ps(k, "Pad head 20"), color: "onScreen", align: "RIGHT", name: "Progress figure" });
+  const cols = k.stack(main, { direction: "HORIZONTAL", gap: 12, name: "Panes" });
+  const tasks = card(k, cols, "Tasks", "18 of 25 done", { gap: 0, width: 330 });
+  for (const [i, [task, done]] of [["Address form with autocomplete", true], ["Apple Pay and Google Pay", true], ["Saved cards", true], ["Tax by region", true], ["Order summary on one screen", false], ["Promo codes", false], ["Receipt email", false]].entries()) {
+    if (i) k.rect(tasks, "FILL", 1, "line", { name: "Row rule" });
+    const row = k.stack(tasks, { direction: "HORIZONTAL", gap: 10, align: "CENTER", padding: { top: 11, right: 0, bottom: 11, left: 0 }, name: "Task" });
+    const box = k.stack(row, { width: 24, height: 24, radius: 8, align: "CENTER", justify: "CENTER", name: "Task box", ...done ? { fill: "primary" } : { stroke: { color: "line", width: 2, align: "INSIDE" } } });
+    if (done) glyph(k, box, "check", 11, "onPrimary");
+    k.text(row, task, { style: ps(k, "Pad row 17"), color: done ? "onScreenMuted" : "onScreen", name: "Task words" });
+  }
+  const talk = card(k, cols, "Discussion", "6 comments", { gap: 12 });
+  for (const [i, [who, said]] of [["Lucas Meyer", "Order summary fits on one screen if tax moves under the total."], ["Nina Kowalski", "Agreed. I marked it on the mock, see the circle."], ["Imani Okafor", "Invoices endpoint lands Tuesday. Promo codes can start then."]].entries()) {
+    const row = k.stack(talk, { direction: "HORIZONTAL", gap: 10, name: "Comment" });
+    face(k, row, i + 1, 30);
+    const words = k.stack(row, { gap: 2, fill: "screen", radius: 12, padding: { top: 8, right: 12, bottom: 10, left: 12 }, name: "Comment words" });
+    k.text(words, who, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "Comment by" });
+    k.text(words, said, { style: ps(k, "Pad row 17"), color: "onScreen", name: "Comment said" });
+  }
+  const reply = k.stack(talk, { direction: "HORIZONTAL", radius: 12, padding: { top: 10, right: 12, bottom: 10, left: 12 }, stroke: { color: "line", width: 2, align: "INSIDE" }, name: "Reply" });
+  k.text(reply, "Reply, or draw with Pencil", { style: ps(k, "Pad row 17"), color: "onScreenMuted", name: "Reply hint" });
+  const mock = card(k, main, "Order summary \xB7 mock 4", "Marked up by Nina", { gap: 10 });
+  const sheet = k.stack(mock, { direction: "HORIZONTAL", gap: 14, fill: "screen", radius: 14, padding: 16, name: "Mock" });
+  const lines = k.stack(sheet, { gap: 10, name: "Mock lines" });
+  for (const [label, sum] of [["2 \xD7 Standing desk frame", "$598.00"], ["Shipping", "$24.00"], ["Total", "$622.00"], ["Tax, included", "$51.83"]]) {
+    const row = k.stack(lines, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Mock line" });
+    k.text(row, label, { style: ps(k, label === "Total" ? "Pad head 20" : "Pad row 17"), color: "onScreen", autoWidth: true, name: "Mock label" });
+    k.text(row, sum, { style: ps(k, label === "Total" ? "Pad head 20" : "Pad row 17"), color: "onScreen", autoWidth: true, name: "Mock sum" });
+  }
+  const pay = k.stack(sheet, { width: 200, gap: 8, name: "Mock pay" });
+  for (const [label, fill, ink] of [["Pay $622.00", "primary", "onPrimary"], ["Apple Pay", "onScreen", "surface"]]) {
+    const b = k.stack(pay, { fill, radius: 12, align: "CENTER", padding: { top: 12, right: 10, bottom: 12, left: 10 }, name: "Mock button" });
+    k.text(b, label, { style: ps(k, "Pad row 17"), color: ink, align: "CENTER", name: "Mock button label" });
+  }
+  const loop = { closed: false, points: [
+    { x: 14, y: 30, handleOut: { x: 4, y: 6 } },
+    { x: 150, y: 4, handleIn: { x: 60, y: -4 }, handleOut: { x: 260, y: 14 } },
+    { x: 438, y: 26, handleIn: { x: 400, y: 4 }, handleOut: { x: 462, y: 40 } },
+    { x: 300, y: 58, handleIn: { x: 420, y: 62 }, handleOut: { x: 150, y: 54 } },
+    { x: 8, y: 36, handleIn: { x: 30, y: 62 }, handleOut: { x: 0, y: 26 } },
+    { x: 40, y: 12, handleIn: { x: 16, y: 14 } }
+  ] };
+  k.vector(mock, 450, 62, [loop], "hot", { name: "Pencil mark", strokeWidth: 3, absolute: { x: 22, y: 152 } });
+  const files = card(k, main, "Attached", "4 files");
+  const tray = k.stack(files, { direction: "HORIZONTAL", gap: 10, name: "Files" });
+  for (const [file, size] of [["Order summary, mock 4", "Figma \xB7 2 frames"], ["Tax rules by region", "Sheet \xB7 41 rows"], ["Load test plan", "Doc \xB7 3 pages"], ["Apple Pay checklist", "PDF \xB7 1.2 MB"]]) {
+    const t = k.stack(tray, { width: "FILL", fill: "screen", radius: 12, gap: 6, padding: { top: 10, right: 12, bottom: 12, left: 12 }, name: "File" });
+    k.rect(t, 34, 6, "primary", { radius: 3, name: "File tab" });
+    k.text(t, file, { style: ps(k, "Pad row 17"), color: "onScreen", name: "File name" });
+    k.text(t, size, { style: ps(k, "Pad note 16"), color: "onScreenMuted", name: "File size" });
+  }
+  const keys = k.stack(main, { direction: "HORIZONTAL", gap: 8, name: "Shortcuts" });
+  for (const s of ["Cmd K  Search", "Cmd N  New task", "Cmd /  Comment", "Split View ready"]) chip(k, keys, s, "tile", "onScreen");
+}
+var SHOTS = [
+  { key: "Portfolio", kicker: "01 Portfolio", caption: "Every project,\none screen.", fill: "paper", ink: "text", under: false, callout: ["bars", "14 of 17 on track", "Updated a minute ago"], side: "right", at: 0.2 },
+  { key: "Capacity", kicker: "02 Capacity", caption: "See who\u2019s overbooked\nbefore Monday.", fill: "primary", ink: "onPrimary", under: true, callout: ["drop", "2 people over 100%", "One swap clears both"], side: "left", at: 0.5 },
+  { key: "Timeline", kicker: "03 Timeline", caption: "Plans that move\nwhen dates do.", fill: "secondary", ink: "onSecondary", under: false, callout: ["play", "3 dates rescheduled", "Nobody re-planned by hand"], side: "left", at: 0.42 },
+  { key: "Reports", kicker: "04 Reports", caption: "The Friday report\nwrites itself.", fill: "accent", ink: "onAccent", under: true, callout: ["check", "Drafted at 4:00 pm", "You read it, then send"], side: "right", at: 0.3 },
+  { key: "Requests", kicker: "05 Requests", caption: "One queue for\nevery request.", fill: "paper", ink: "text", under: false, callout: ["star", "28 requests accepted", "19 already on the plan"], side: "right", at: 0.62 },
+  { key: "iPad", kicker: "06 Made for iPad", caption: "Split View, keyboard\nand Pencil.", fill: "primary", ink: "onPrimary", under: true, callout: ["sun", "Mark it up with Pencil", "It lands in the thread"], side: "left", at: 0.66 }
+];
+var SCALE = 1.6;
+var grid = (w, h) => gridPaths(w, h, 86, 2);
+var orbit = (r) => {
+  const c = r + 4, q = 0.5523 * r;
+  return { closed: true, points: [
+    { x: c, y: c - r, handleIn: { x: c - q, y: c - r }, handleOut: { x: c + q, y: c - r } },
+    { x: c + r, y: c, handleIn: { x: c + r, y: c - q }, handleOut: { x: c + r, y: c + q } },
+    { x: c, y: c + r, handleIn: { x: c + q, y: c + r }, handleOut: { x: c - q, y: c + r } },
+    { x: c - r, y: c, handleIn: { x: c - r, y: c + q }, handleOut: { x: c - r, y: c - q } }
+  ] };
+};
+var saas_store_ipad_set_default = defineTemplate({
+  id: "social-saas-store-ipad-set",
+  meta: {
+    name: "SaaS store screenshots: iPad dashboard set",
+    description: 'An App Store screenshot set for a B2B or productivity iPad app: six 2064 \xD7 2752 sheets (iPad 13"), each a benefit in tight type over or under a whole tablet showing a full dashboard screen (portfolio, capacity, a timeline, a status report, the request queue, a project with a Pencil mark), on a drafting-table ground of your brand with one tilted callout card. Swap a tablet\u2019s Screen for the screenshot slot and drop your own capture',
+    category: "social",
+    tags: ["saas", "saas store", "app store", "screenshots", "ipad", "tablet", "dashboard", "b2b", "productivity", "caption", "device", "aso", "listing", "project management"],
+    platforms: ["app-store", "ios"],
+    formats: ["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 screenshots: iPad dashboard set", preset("appstore-ipad"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        paper: "#EDF0F7",
+        text: "#0B1230",
+        primary: "#2B4BEE",
+        onPrimary: "#FFFFFF",
+        secondary: "#0B1230",
+        onSecondary: "#EDF0F7",
+        accent: "#C8F250",
+        onAccent: "#131F00",
+        ...uiRoles({ screen: "#F3F5FA", surface: "#FFFFFF", onScreen: "#0B1230", onScreenMuted: "#535B78", line: "#E0E4EE", track: "#E3E7F1", tile: "#E4E9FB", photo: "#CBD3EA", positive: "#0E6B45", primary: "#2B4BEE", onPrimary: "#FFFFFF", accent: "#C8F250", onAccent: "#131F00" })
+      },
+      { name: "Cadence" }
+    );
+    k.palette({ rail: "#0B1230", railInk: "#9AA6D6", hot: "#C7341E", onBad: "#FFFFFF", bad: "#C7341E", warn: "#FFE2A8", onWarn: "#3D2A00", faceA: "#F2A65A", faceB: "#6C8CFF", faceC: "#3FB58B", faceD: "#E46A8B", faceE: "#8B7BE8" });
+    const S = sz("appstore-ipad", 2064);
+    k.textStyle("Caption 150", { size: 150, fontWeight: 800, letterSpacing: -7, lineHeight: 150 });
+    k.textStyle("Kicker 34", { ...MONO, size: 34, fontWeight: 700, letterSpacing: 2.4, lineHeight: 42, textCase: "UPPER" });
+    k.textStyle("Callout 44", { size: 44, fontWeight: 800, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Callout note 30", { size: 30, fontWeight: 500, lineHeight: 38 });
+    const builders = [portfolio, capacity, timeline, report, requests, detail];
+    const titles = [["Portfolio", "Thursday 8 October \xB7 Q4 2026", "This quarter"], ["People", "26 people in 6 teams", "This week"], ["Timeline", "9 projects in flight", "Quarter"], ["Reports", "Sent every Friday", "Weekly"], ["Requests", "45 open, from four teams", "All teams"], ["Checkout redesign", "Project \xB7 25 tasks", "Split View"]];
+    const screens = SHOTS.map((s, i) => screen(k, s.key, i, titles[i][0], titles[i][1], titles[i][2], (main) => builders[i](k, main)));
+    k.component("Tablet / Screenshot", { width: SW, height: SH, fill: "photo", radius: TABLET_SCREEN.radius, clip: true, description: "Your own capture: drop a 2064 \xD7 2752 screenshot on the photo frame." }, (id) => {
+      k.photo(id, SW, SH, { radius: TABLET_SCREEN.radius, ground: "photo", name: "Your screenshot" });
+    });
+    devices(k, ["Tablet"], { tablet: screens[0] });
+    const DW = Math.round(TABLET.width * SCALE), DH = Math.round(TABLET.height * SCALE), dx = Math.round((S.W - DW) / 2);
+    SHOTS.forEach((shot, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset("appstore-ipad"));
+      ground(k, sheet, `iPad ${i + 1} \xB7 ${shot.key}`, shot.fill);
+      k.patch(sheet, { x: i * (S.W + 120), y: 0 });
+      const top = shot.under ? 124 : S.H - DH - 124;
+      pattern(k, sheet, "Grid", shot.ink, grid, 0.07);
+      const cx = shot.side === "right" ? dx + DW * 0.86 : dx + DW * 0.14, cy = top + DH * (shot.under ? 0.7 : 0.3);
+      k.ellipse(sheet, 1500, k.tint(shot.ink, 0.07), { name: "Disc", absolute: { x: Math.round(cx - 750), y: Math.round(cy - 750) } });
+      k.vector(sheet, 2008, 2008, [orbit(1e3)], shot.ink, { name: "Orbit", strokeWidth: 3, stroke: { color: shot.ink, width: 3, dash: [4, 18] }, opacity: 0.35, absolute: { x: Math.round(cx - 1004), y: Math.round(cy - 1004) } });
+      const words = k.stack(sheet, { width: S.W - 260, gap: 26, name: "Caption block", absolute: { x: 130, y: shot.under ? top + DH + 96 : 150 } });
+      const tag = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Kicker row" });
+      k.rect(tag, 56, 8, shot.ink, { radius: 4, name: "Kicker rule" });
+      k.text(tag, shot.kicker, { style: "Kicker 34", color: shot.ink, autoWidth: true, name: "Kicker" });
+      k.text(words, shot.caption, { style: "Caption 150", color: shot.ink, name: "Caption" });
+      placeDevice(k, sheet, { device: "Tablet", screen: screens[i], scale: SCALE, x: dx, y: top, name: "Device" });
+      const [mark, said, note] = shot.callout;
+      const cw = 660;
+      const call = k.stack(sheet, { direction: "HORIZONTAL", width: cw, gap: 26, align: "CENTER", fill: "surface", radius: 40, padding: { top: 30, right: 36, bottom: 32, left: 30 }, effects: [soft(k, "secondary", 0.3, 30, 70)], name: "Callout", absolute: { x: shot.side === "right" ? S.W - cw - 44 : 44, y: Math.round(top + DH * shot.at) } });
+      k.patch(call, { rotation: shot.side === "right" ? 4 : -4 });
+      const badge = k.stack(call, { width: 104, height: 104, radius: 34, fill: shot.fill === "paper" || shot.fill === "secondary" ? "primary" : shot.fill, align: "CENTER", justify: "CENTER", name: "Callout badge" });
+      glyph(k, badge, mark, 50, shot.fill === "paper" || shot.fill === "secondary" ? "onPrimary" : shot.ink);
+      const cwords = k.stack(call, { gap: 2, name: "Callout words" });
+      k.text(cwords, said, { style: "Callout 44", color: "onScreen", name: "Callout line" });
+      k.text(cwords, note, { style: "Callout note 30", color: "onScreenMuted", name: "Callout note" });
+      if (i === 0) k.setCover(sheet);
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_ipad_set_default
+};