viteboard 0.1.1 → 0.1.3

package/src/templates/handoffTemplate.ts

@@ -1,34 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { arrow, beginTemplate, label, palette, rect } from "./helpers";
-
-/** A neutral collaboration map for decisions, ownership, and feedback. */
-export function handoffTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-  els.push(label(ox, oy, 800, "Handoff map", 26, p.heading, "700"));
-  const cards = [
-    ["Explore", "#dbeafe"],
-    ["Decide", "#fef3c7"],
-    ["Act", "#dcfce7"],
-  ] as const;
-  cards.forEach(([text, fill], index) => {
-    els.push(rect(ox + index * 270, oy + 150, 170, 92, {
-      fill, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 12,
-      shadow: true, fontSize: 16, fontWeight: "650", textColor: "#1f2933",
-    }, text));
-  });
-  els.push(arrow(ox + 170, oy + 196, ox + 270, oy + 196, p.accent, { label: "proposal" }));
-  els.push(arrow(ox + 440, oy + 196, ox + 540, oy + 196, p.accent, { label: "owner | outcome", sides: true, arrowStart: true }));
-  els.push(arrow(ox + 625, oy + 245, ox + 355, oy + 330, "#9ca3af", { label: "feedback", dashed: true }));
-  els.push(rect(ox + 265, oy + 320, 180, 70, {
-    fill: p.zone, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 10,
-    fontSize: 14, textColor: p.text,
-  }, "Review signal"));
-  return els;
-}

package/src/templates/helpers.ts

@@ -1,132 +0,0 @@
-import { createElement, type BoardElement, type ElementStyle } from "../elements/types";
-
-export type TemplateBuild = {
-  name: string;
-  elements: BoardElement[];
-};
-
-export type Palette = {
-  card: string;
-  cardStroke: string;
-  heading: string;
-  text: string;
-  accent: string;
-  sticky: string;
-  zone: string;
-};
-
-export function palette(theme: "light" | "dark"): Palette {
-  if (theme === "dark") {
-    return {
-      card: "#1e2126",
-      cardStroke: "#3a3f46",
-      heading: "#f2f2f2",
-      text: "#c8cdd4",
-      accent: "#4dabf7",
-      sticky: "#fef08a",
-      zone: "#22262c",
-    };
-  }
-  return {
-    card: "#ffffff",
-    cardStroke: "#d8dade",
-    heading: "#1f2933",
-    text: "#4b5563",
-    accent: "#6e6e6e",
-    sticky: "#fef08a",
-    zone: "#f0f0ed",
-  };
-}
-
-let z = 0;
-
-export function beginTemplate(baseZ: number): void {
-  z = baseZ;
-}
-
-export function rect(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  style: ElementStyle,
-  text = ""
-): BoardElement {
-  return createElement("rectangle", {
-    x, y, width: w, height: h,
-    zIndex: ++z,
-    style: { borderRadius: 10, ...style },
-    data: { text },
-  });
-}
-
-export function label(
-  x: number,
-  y: number,
-  w: number,
-  text: string,
-  fontSize: number,
-  color: string,
-  fontWeight = "600"
-): BoardElement {
-  return createElement("text", {
-    x, y, width: w, height: fontSize * 1.6,
-    zIndex: ++z,
-    style: { fontSize, textColor: color, fontWeight },
-    data: { text },
-  });
-}
-
-export function sticky(
-  x: number,
-  y: number,
-  text: string,
-  fill: string,
-  w = 180,
-  h = 120
-): BoardElement {
-  return createElement("sticky", {
-    x, y, width: w, height: h,
-    zIndex: ++z,
-    style: { fill, borderRadius: 12, shadow: true, fontSize: 13, textColor: "#1f2933" },
-    data: { text },
-  });
-}
-
-export function arrow(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  stroke: string,
-  options: { label?: string; dashed?: boolean; arrowStart?: boolean; sides?: boolean } = {}
-): BoardElement {
-  return createElement("arrow", {
-    x: x1, y: y1, width: x2 - x1, height: y2 - y1,
-    zIndex: ++z,
-    style: {
-      stroke,
-      strokeWidth: 2,
-      arrowEnd: true,
-      arrowStart: options.arrowStart,
-      strokeDash: options.dashed ? [8, 6] : undefined,
-    },
-    data: { text: options.label ?? "", labelPosition: options.sides ? "sides" : "center" },
-  });
-}
-
-export function ellipseEl(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  style: ElementStyle,
-  text = ""
-): BoardElement {
-  return createElement("ellipse", {
-    x, y, width: w, height: h,
-    zIndex: ++z,
-    style,
-    data: { text },
-  });
-}

package/src/templates/index.ts

@@ -1,79 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { personaTemplate } from "./personaTemplate";
-import { journeyMapTemplate } from "./journeyMapTemplate";
-import { prioritizationMatrixTemplate } from "./prioritizationMatrixTemplate";
-import { requirementsFlowTemplate } from "./requirementsFlowTemplate";
-import { systemDiagramTemplate } from "./systemDiagramTemplate";
-import { opportunityTreeTemplate } from "./opportunityTreeTemplate";
-import { screenshotReviewTemplate } from "./screenshotReviewTemplate";
-import { workflowTemplate } from "./workflowTemplate";
-import { handoffTemplate } from "./handoffTemplate";
-
-export type TemplateDef = {
-  id: string;
-  name: string;
-  description: string;
-  build: (
-    ox: number,
-    oy: number,
-    theme: "light" | "dark",
-    baseZ: number
-  ) => BoardElement[];
-};
-
-export const TEMPLATES: TemplateDef[] = [
-  {
-    id: "persona",
-    name: "User Persona Card",
-    description: "Name, role, goals, pain points, JTBD, success criteria.",
-    build: personaTemplate,
-  },
-  {
-    id: "journey",
-    name: "User Journey Map",
-    description: "Awareness → Retention stages with sticky note areas.",
-    build: journeyMapTemplate,
-  },
-  {
-    id: "matrix",
-    name: "Prioritization Matrix",
-    description: "Impact vs effort: quick wins, strategic bets, fill-ins, avoid.",
-    build: prioritizationMatrixTemplate,
-  },
-  {
-    id: "requirements",
-    name: "Requirements Flow",
-    description: "Problem, user, context, solution, edge cases, risks.",
-    build: requirementsFlowTemplate,
-  },
-  {
-    id: "system",
-    name: "System Diagram Starter",
-    description: "User, frontend, API, database, external services + arrows.",
-    build: systemDiagramTemplate,
-  },
-  {
-    id: "ost",
-    name: "Opportunity Solution Tree",
-    description: "Outcome, opportunities, solutions, experiments, signals.",
-    build: opportunityTreeTemplate,
-  },
-  {
-    id: "screenshot-review",
-    name: "Screenshot Review Board",
-    description: "Screenshot zone with observations, problems, UX notes.",
-    build: screenshotReviewTemplate,
-  },
-  {
-    id: "workflow",
-    name: "Workflow Map",
-    description: "Labeled handoffs, a dashed feedback loop, and editable steps.",
-    build: workflowTemplate,
-  },
-  {
-    id: "handoff",
-    name: "Handoff Map",
-    description: "A shared decision flow with ownership, outcomes, and feedback.",
-    build: handoffTemplate,
-  },
-];

package/src/templates/journeyMapTemplate.ts

@@ -1,52 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, sticky, arrow } from "./helpers";
-
-const STAGES = [
-  "Awareness",
-  "Discovery",
-  "Evaluation",
-  "Onboarding",
-  "Activation",
-  "Retention",
-];
-
-const STAGE_COLORS = ["#93c5fd", "#a5b4fc", "#d8b4fe", "#f9a8d4", "#fdba74", "#86efac"];
-
-export function journeyMapTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-  const colW = 230;
-  const totalW = STAGES.length * colW + 56;
-
-  els.push(rect(ox, oy, totalW, 640, { fill: p.card, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 16, shadow: true }));
-  els.push(label(ox + 28, oy + 22, 500, "User Journey Map", 22, p.heading, "700"));
-
-  STAGES.forEach((stage, i) => {
-    const x = ox + 28 + i * colW;
-    const y = oy + 70;
-    els.push(rect(x, y, colW - 16, 48, { fill: STAGE_COLORS[i], borderRadius: 10 }, stage));
-    if (i < STAGES.length - 1) {
-      els.push(arrow(x + colW - 14, y + 24, x + colW - 2, y + 24, p.heading));
-    }
-    // sticky zones per stage
-    els.push(rect(x, y + 64, colW - 16, 150, { fill: p.zone, borderRadius: 10 }, ""));
-    els.push(label(x + 10, y + 70, colW - 36, "Actions", 12, p.accent));
-    els.push(sticky(x + 14, y + 96, "", "#fef08a", colW - 44, 100));
-
-    els.push(rect(x, y + 226, colW - 16, 150, { fill: p.zone, borderRadius: 10 }, ""));
-    els.push(label(x + 10, y + 232, colW - 36, "Pain points", 12, p.accent));
-    els.push(sticky(x + 14, y + 258, "", "#fca5a5", colW - 44, 100));
-
-    els.push(rect(x, y + 388, colW - 16, 150, { fill: p.zone, borderRadius: 10 }, ""));
-    els.push(label(x + 10, y + 394, colW - 36, "Opportunities", 12, p.accent));
-    els.push(sticky(x + 14, y + 420, "", "#86efac", colW - 44, 100));
-  });
-
-  return els;
-}

package/src/templates/opportunityTreeTemplate.ts

@@ -1,45 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, sticky, arrow } from "./helpers";
-
-export function opportunityTreeTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-
-  els.push(label(ox + 280, oy - 40, 500, "Opportunity Solution Tree", 22, p.heading, "700"));
-
-  // outcome
-  els.push(rect(ox + 300, oy, 280, 80, { fill: "#a5b4fc", borderRadius: 12, shadow: true, fontSize: 15, fontWeight: "600", textColor: "#1f2933" }, "Desired outcome"));
-
-  // opportunities
-  const oppY = oy + 160;
-  const oppXs = [ox, ox + 300, ox + 600];
-  for (const x of oppXs) {
-    els.push(sticky(x, oppY, "Opportunity", "#93c5fd", 220, 100));
-    els.push(arrow(ox + 440, oy + 85, x + 110, oppY - 5, p.heading));
-  }
-
-  // solutions
-  const solY = oppY + 180;
-  for (const x of oppXs) {
-    els.push(sticky(x, solY, "Solution", "#86efac", 220, 100));
-    els.push(arrow(x + 110, oppY + 105, x + 110, solY - 5, p.heading));
-  }
-
-  // experiments + signals
-  const expY = solY + 180;
-  for (const x of oppXs) {
-    els.push(sticky(x, expY, "Experiment", "#fdba74", 220, 90));
-    els.push(arrow(x + 110, solY + 105, x + 110, expY - 5, p.heading));
-  }
-
-  els.push(label(ox, expY + 120, 400, "Signals / metrics", 14, p.accent));
-  els.push(sticky(ox, expY + 150, "What signal tells us this is working?", "#fef08a", 380, 100));
-
-  return els;
-}

package/src/templates/personaTemplate.ts

@@ -1,41 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, sticky } from "./helpers";
-
-export function personaTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-
-  els.push(rect(ox, oy, 760, 560, { fill: p.card, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 16, shadow: true }));
-  els.push(label(ox + 28, oy + 22, 400, "User Persona", 22, p.heading, "700"));
-  els.push(label(ox + 28, oy + 60, 300, "Name", 13, p.accent));
-  els.push(sticky(ox + 28, oy + 86, "Jordan Lee", p.sticky, 200, 64));
-  els.push(label(ox + 260, oy + 60, 300, "Role", 13, p.accent));
-  els.push(sticky(ox + 260, oy + 86, "Senior Product Manager", "#a5b4fc", 220, 64));
-  els.push(label(ox + 510, oy + 60, 300, "Buying trigger", 13, p.accent));
-  els.push(sticky(ox + 510, oy + 86, "Team scaling pains", "#fdba74", 220, 64));
-
-  const fields: [string, string, string][] = [
-    ["Goals", "Ship the right features faster", "#86efac"],
-    ["Pain points", "Scattered docs, unclear priorities", "#fca5a5"],
-    ["Jobs to be done", "Align team on what to build next", "#93c5fd"],
-    ["Current workaround", "Spreadsheets + slide decks", "#d8b4fe"],
-    ["Success criteria", "Stakeholders aligned in 1 meeting", "#f9a8d4"],
-    ["Key quote", '"I need clarity, not more tools."', "#fef08a"],
-  ];
-  fields.forEach(([title, text, color], i) => {
-    const col = i % 3;
-    const row = Math.floor(i / 3);
-    const x = ox + 28 + col * 242;
-    const y = oy + 188 + row * 178;
-    els.push(label(x, y, 230, title, 13, p.accent));
-    els.push(sticky(x, y + 26, text, color, 220, 124));
-  });
-
-  return els;
-}

package/src/templates/prioritizationMatrixTemplate.ts

@@ -1,44 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, sticky, arrow } from "./helpers";
-
-export function prioritizationMatrixTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-  const size = 680;
-
-  els.push(rect(ox, oy, size + 120, size + 130, { fill: p.card, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 16, shadow: true }));
-  els.push(label(ox + 28, oy + 22, 500, "Feature Prioritization Matrix", 22, p.heading, "700"));
-
-  const gx = ox + 80;
-  const gy = oy + 80;
-  const half = size / 2;
-
-  // quadrants
-  els.push(rect(gx, gy, half, half, { fill: "#86efac55", borderRadius: 8 }));
-  els.push(rect(gx + half, gy, half, half, { fill: "#93c5fd55", borderRadius: 8 }));
-  els.push(rect(gx, gy + half, half, half, { fill: "#fef08a55", borderRadius: 8 }));
-  els.push(rect(gx + half, gy + half, half, half, { fill: "#fca5a555", borderRadius: 8 }));
-
-  els.push(label(gx + 16, gy + 12, 300, "Quick wins", 16, p.heading, "700"));
-  els.push(label(gx + half + 16, gy + 12, 300, "Strategic bets", 16, p.heading, "700"));
-  els.push(label(gx + 16, gy + half + 12, 300, "Fill-ins", 16, p.heading, "700"));
-  els.push(label(gx + half + 16, gy + half + 12, 300, "Avoid", 16, p.heading, "700"));
-
-  // axes
-  els.push(arrow(gx - 24, gy + size, gx - 24, gy, p.heading));
-  els.push(label(gx - 64, gy + half - 12, 60, "Impact", 14, p.text, "600"));
-  els.push(arrow(gx, gy + size + 24, gx + size, gy + size + 24, p.heading));
-  els.push(label(gx + half - 30, gy + size + 34, 80, "Effort", 14, p.text, "600"));
-
-  // sample stickies
-  els.push(sticky(gx + 40, gy + 60, "Feature idea", "#fef08a", 150, 90));
-  els.push(sticky(gx + half + 40, gy + 60, "Big bet", "#a5b4fc", 150, 90));
-
-  return els;
-}

package/src/templates/requirementsFlowTemplate.ts

@@ -1,45 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, sticky } from "./helpers";
-
-const SECTIONS: [string, string][] = [
-  ["Problem", "#fca5a5"],
-  ["User", "#93c5fd"],
-  ["Context", "#d8b4fe"],
-  ["Current workflow", "#fdba74"],
-  ["Proposed solution", "#86efac"],
-  ["Edge cases", "#f9a8d4"],
-  ["Acceptance criteria", "#a5b4fc"],
-  ["Dependencies", "#fef08a"],
-  ["Risks", "#fca5a5"],
-];
-
-export function requirementsFlowTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-  const cols = 3;
-  const cellW = 280;
-  const cellH = 210;
-  const w = cols * cellW + 56;
-  const rows = Math.ceil(SECTIONS.length / cols);
-  const h = rows * cellH + 100;
-
-  els.push(rect(ox, oy, w, h, { fill: p.card, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 16, shadow: true }));
-  els.push(label(ox + 28, oy + 22, 500, "Product Requirements Flow", 22, p.heading, "700"));
-
-  SECTIONS.forEach(([title, color], i) => {
-    const col = i % cols;
-    const row = Math.floor(i / cols);
-    const x = ox + 28 + col * cellW;
-    const y = oy + 72 + row * cellH;
-    els.push(label(x, y, cellW - 30, `${i + 1}. ${title}`, 14, p.accent));
-    els.push(sticky(x, y + 30, "", color, cellW - 28, cellH - 60));
-  });
-
-  return els;
-}

package/src/templates/screenshotReviewTemplate.ts

@@ -1,52 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { createElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, sticky } from "./helpers";
-
-export function screenshotReviewTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-
-  els.push(rect(ox, oy, 1060, 620, { fill: p.card, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 16, shadow: true }));
-  els.push(label(ox + 28, oy + 22, 500, "Screenshot Review", 22, p.heading, "700"));
-
-  // screenshot drop zone (placeholder image element with no asset = drop target visual)
-  els.push(label(ox + 28, oy + 64, 300, "Screenshot", 13, p.accent));
-  const placeholder = createElement("frame", {
-    x: ox + 28,
-    y: oy + 92,
-    width: 480,
-    height: 360,
-    zIndex: baseZ + 100,
-    style: { fill: p.zone, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 12, fontSize: 13, textColor: p.text },
-    data: { text: "Paste a screenshot here (Cmd/Ctrl+V)" },
-  });
-  els.push(placeholder);
-
-  const sections: [string, string][] = [
-    ["Observations", "#93c5fd"],
-    ["Problems", "#fca5a5"],
-    ["UX notes", "#d8b4fe"],
-    ["Requirements", "#86efac"],
-  ];
-  sections.forEach(([title, color], i) => {
-    const col = i % 2;
-    const row = Math.floor(i / 2);
-    const x = ox + 540 + col * 250;
-    const y = oy + 64 + row * 200;
-    els.push(label(x, y, 230, title, 13, p.accent));
-    els.push(sticky(x, y + 28, "", color, 230, 140));
-  });
-
-  els.push(label(ox + 28, oy + 470, 300, "Follow-up tasks", 13, p.accent));
-  els.push(sticky(ox + 28, oy + 498, "", "#fef08a", 480, 96));
-  els.push(label(ox + 540, oy + 470, 300, "Decision", 13, p.accent));
-  els.push(sticky(ox + 540, oy + 498, "", "#fdba74", 480, 96));
-
-  return els;
-}

package/src/templates/systemDiagramTemplate.ts

@@ -1,41 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { palette, beginTemplate, rect, label, arrow, ellipseEl } from "./helpers";
-
-export function systemDiagramTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-
-  els.push(label(ox, oy - 40, 400, "System Diagram", 22, p.heading, "700"));
-
-  const box = (x: number, y: number, w: number, h: number, fill: string, text: string) =>
-    rect(x, y, w, h, { fill, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 12, shadow: true, fontSize: 15, fontWeight: "600", textColor: "#1f2933" }, text);
-
-  // user
-  els.push(ellipseEl(ox, oy + 130, 110, 110, { fill: "#f9a8d4", stroke: p.cardStroke, strokeWidth: 1.5, fontSize: 14, fontWeight: "600", textColor: "#1f2933" }, "User"));
-
-  // frontend
-  els.push(box(ox + 200, oy + 140, 180, 90, "#93c5fd", "Frontend"));
-  // api
-  els.push(box(ox + 470, oy + 140, 180, 90, "#a5b4fc", "API / Server"));
-  // database
-  els.push(box(ox + 740, oy + 60, 180, 90, "#86efac", "Database"));
-  // external service
-  els.push(box(ox + 740, oy + 200, 180, 90, "#fdba74", "External Service"));
-  // notifications
-  els.push(box(ox + 470, oy + 330, 180, 90, "#fef08a", "Notification Service"));
-
-  els.push(arrow(ox + 115, oy + 185, ox + 195, oy + 185, p.heading, { label: "uses" }));
-  els.push(arrow(ox + 385, oy + 185, ox + 465, oy + 185, p.heading, { label: "request | response", sides: true, arrowStart: true }));
-  els.push(arrow(ox + 655, oy + 165, ox + 735, oy + 110, p.heading, { label: "read" }));
-  els.push(arrow(ox + 655, oy + 205, ox + 735, oy + 240, p.heading, { label: "webhook", dashed: true }));
-  els.push(arrow(ox + 560, oy + 235, ox + 560, oy + 325, p.heading, { label: "event", dashed: true }));
-  els.push(arrow(ox + 470, oy + 375, ox + 80, oy + 245, p.heading, { label: "notify", dashed: true }));
-
-  return els;
-}

package/src/templates/workflowTemplate.ts

@@ -1,35 +0,0 @@
-import type { BoardElement } from "../elements/types";
-import { arrow, beginTemplate, label, palette, rect } from "./helpers";
-
-/** A general-purpose process diagram that demonstrates labeled/dashed arrows. */
-export function workflowTemplate(
-  ox: number,
-  oy: number,
-  theme: "light" | "dark",
-  baseZ: number
-): BoardElement[] {
-  const p = palette(theme);
-  beginTemplate(baseZ);
-  const els: BoardElement[] = [];
-  els.push(label(ox, oy, 880, "Workflow map", 26, p.heading, "700"));
-  const steps = [
-    ["Request", "#dbeafe"],
-    ["Review", "#fef3c7"],
-    ["Deliver", "#dcfce7"],
-  ] as const;
-  for (let i = 0; i < steps.length; i++) {
-    const x = ox + i * 280;
-    els.push(rect(x, oy + 130, 180, 96, {
-      fill: steps[i][1], stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 12,
-      fontSize: 16, fontWeight: "650", textColor: "#1f2933", shadow: true,
-    }, steps[i][0]));
-  }
-  els.push(arrow(ox + 180, oy + 178, ox + 280, oy + 178, p.accent, { label: "approve" }));
-  els.push(arrow(ox + 460, oy + 178, ox + 560, oy + 178, p.accent, { label: "ship" }));
-  els.push(arrow(ox + 650, oy + 226, ox + 370, oy + 310, "#9ca3af", { label: "feedback", dashed: true }));
-  els.push(rect(ox + 280, oy + 300, 180, 72, {
-    fill: p.zone, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 10,
-    fontSize: 14, textColor: p.text,
-  }, "Learn and iterate"));
-  return els;
-}