canva-pptx 1.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "canva-pptx",
+  "version": "1.0.0",
+  "description": "A professional, component-based PowerPoint (PPTX) generator for Node.js. Create complex, Canva-style slide decks, business reports, and dashboards programmatically with smart layouts and themes.",
+  "main": "src/index.js",
+  "files": [
+    "src/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "pptx",
+    "powerpoint",
+    "presentation",
+    "slides",
+    "deck",
+    "generator",
+    "builder",
+    "creator",
+    "automation",
+    "report-generation",
+    "reporting",
+    "pptxgenjs",
+    "office",
+    "microsoft",
+    "ms-office",
+    "document-generation",
+    "export-to-pptx",
+    "node-pptx",
+    "layout-engine",
+    "composable",
+    "components",
+    "design-system",
+    "programmatic-design",
+    "canvas",
+    "dashboard",
+    "charts",
+    "business-intelligence",
+    "nodejs",
+    "javascript",
+    "slide-maker"
+  ],
+  "author": "Fairoz Ahmed",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "pptxgenjs": "^3.12.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fairoz-539/canva-pptx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fairoz-539/canva-pptx/issues"
+  },
+  "homepage": "https://github.com/fairoz-539/canva-pptx#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/AdvancedComponents/accordionList.js

@@ -0,0 +1,39 @@
+function addAccordionList(slide, items = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 6,
+    headerColor = "007AFF",
+    bodyColor = "F5F5F5"
+  } = options;
+
+  let currentY = y;
+
+  items.forEach((item) => {
+    // Header
+    slide.addShape("rect", {
+      x, y: currentY, w, h: 0.5,
+      fill: headerColor
+    });
+    slide.addText(`+ ${item.title}`, {
+      x: x + 0.2, y: currentY, w: w - 0.4, h: 0.5,
+      color: "FFFFFF", bold: true, valign: "middle", fontSize: 12
+    });
+    
+    currentY += 0.5;
+
+    // Body (Expanded)
+    const bodyH = 0.8; // Fixed height for simplicity
+    slide.addShape("rect", {
+      x, y: currentY, w, h: bodyH,
+      fill: bodyColor,
+      line: { color: "DDDDDD" }
+    });
+    slide.addText(item.content, {
+      x: x + 0.2, y: currentY, w: w - 0.4, h: bodyH,
+      color: "333333", valign: "top", fontSize: 11
+    });
+
+    currentY += bodyH + 0.1; // Gap
+  });
+}
+
+module.exports = { addAccordionList };

package/src/AdvancedComponents/calendarGrid.js

@@ -0,0 +1,50 @@
+function addCalendarGrid(slide, monthName, events = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 5, h = 4,
+    headerColor = "D32F2F"
+  } = options;
+
+  const cols = 7;
+  const rows = 6; // Header + 5 weeks
+  const cellW = w / cols;
+  const cellH = (h - 0.5) / 5; // 0.5 for header
+
+  // Header
+  slide.addShape("rect", { x, y, w, h: 0.5, fill: headerColor });
+  slide.addText(monthName, { x, y, w, h: 0.5, color: "FFFFFF", bold: true, align: "center" });
+
+  // Grid
+  let dayCount = 1;
+  for (let r = 0; r < 5; r++) {
+    for (let c = 0; c < 7; c++) {
+      if (dayCount > 31) break; // Simple logic
+
+      const curX = x + c * cellW;
+      const curY = y + 0.5 + r * cellH;
+
+      // Check for event
+      const event = events.find(e => e.day === dayCount);
+      const bg = event ? event.color || "FFF3E0" : "FFFFFF";
+
+      slide.addShape("rect", {
+        x: curX, y: curY, w: cellW, h: cellH,
+        fill: bg, line: { color: "CCCCCC" }
+      });
+
+      slide.addText(String(dayCount), {
+        x: curX + 0.05, y: curY + 0.05, w: 0.3, h: 0.3,
+        fontSize: 9, color: "666666"
+      });
+
+      if (event) {
+        slide.addText(event.title, {
+          x: curX, y: curY + 0.2, w: cellW, h: cellH - 0.2,
+          fontSize: 8, align: "center", valign: "middle", bold: true
+        });
+      }
+      dayCount++;
+    }
+  }
+}
+
+module.exports = { addCalendarGrid };

package/src/AdvancedComponents/certificateFrame.js

@@ -0,0 +1,35 @@
+function addCertificateFrame(slide, recipient, title = "Certificate of Appreciation", options = {}) {
+  const { x = 0.5, y = 0.5, w = 9, h = 4.63 } = options;
+
+  // Outer Border (Gold)
+  slide.addShape("rect", {
+    x, y, w, h,
+    line: { color: "C5A059", width: 4 },
+    fill: { color: undefined }
+  });
+
+  // Inner Border (Thin)
+  slide.addShape("rect", {
+    x: x + 0.2, y: y + 0.2, w: w - 0.4, h: h - 0.4,
+    line: { color: "C5A059", width: 1 },
+    fill: { color: undefined }
+  });
+
+  // Content
+  slide.addText(title, {
+    x, y: y + 1, w, h: 1,
+    align: "center", fontFace: "Georgia", fontSize: 32, bold: true, color: "333333"
+  });
+
+  slide.addText("Presented to", {
+    x, y: y + 2, w, h: 0.5,
+    align: "center", fontSize: 14, color: "666666"
+  });
+
+  slide.addText(recipient, {
+    x, y: y + 2.5, w, h: 1,
+    align: "center", fontFace: "Arial", fontSize: 40, bold: true, color: "C5A059"
+  });
+}
+
+module.exports = { addCertificateFrame };

package/src/AdvancedComponents/deviceMockup.js

@@ -0,0 +1,59 @@
+function addDeviceMockup(slide, imageUrl, options = {}) {
+  const {
+    x = 1, y = 1, w = 6, h = 4,
+    type = "laptop" // or 'tablet'
+  } = options;
+
+  const frameColor = "333333";
+  
+  if (type === "laptop") {
+    // Screen Frame
+    slide.addShape("roundRect", {
+      x, y, w, h: h * 0.85,
+      fill: frameColor,
+      rounding: 0.05
+    });
+    
+    // Screen Image Area
+    slide.addShape("rect", {
+      x: x + 0.2, y: y + 0.2, w: w - 0.4, h: h * 0.85 - 0.4,
+      fill: "000000" // Black bg behind image
+    });
+    
+    if (imageUrl) {
+        slide.addImage({
+            path: imageUrl,
+            x: x + 0.2, y: y + 0.2, w: w - 0.4, h: h * 0.85 - 0.4,
+            sizing: { type: "contain", w: w - 0.4, h: h * 0.85 - 0.4 }
+        });
+    }
+
+    // Base/Keyboard area
+    slide.addShape("trapezoid", {
+      x: x - 0.4, y: y + h * 0.85, w: w + 0.8, h: h * 0.15,
+      fill: "555555",
+      flipV: true // Invert trapezoid for base look
+    });
+  } else {
+    // Tablet Mode (Simple Round Rect)
+    slide.addShape("roundRect", {
+        x, y, w, h,
+        fill: frameColor,
+        rounding: 0.1
+    });
+    // Screen
+    slide.addShape("rect", {
+        x: x + 0.3, y: y + 0.3, w: w - 0.6, h: h - 0.6,
+        fill: "000000"
+    });
+     if (imageUrl) {
+        slide.addImage({
+            path: imageUrl,
+            x: x + 0.3, y: y + 0.3, w: w - 0.6, h: h - 0.6,
+            sizing: { type: "cover", w: w - 0.6, h: h - 0.6 }
+        });
+    }
+  }
+}
+
+module.exports = { addDeviceMockup };

package/src/AdvancedComponents/featureGrid.js

@@ -0,0 +1,70 @@
+function addFeatureGrid(slide, features = [], options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 8,
+    h = 4,
+    cols = 3,
+    gap = 0.3,
+    iconColor = "007AFF"
+  } = options;
+
+  if (features.length === 0) return;
+
+  // Calculate cell dimensions
+  const rows = Math.ceil(features.length / cols);
+  const cellW = (w - (cols - 1) * gap) / cols;
+  const cellH = (h - (rows - 1) * gap) / rows;
+
+  features.forEach((item, index) => {
+    const colIndex = index % cols;
+    const rowIndex = Math.floor(index / cols);
+
+    const curX = x + colIndex * (cellW + gap);
+    const curY = y + rowIndex * (cellH + gap);
+
+    // FIX: Use object for transparency instead of 8-digit hex
+    // transparency: 80 means 80% transparent (only 20% visible, similar to hex '33')
+    slide.addShape("oval", {
+      x: curX,
+      y: curY,
+      w: 0.5,
+      h: 0.5,
+      fill: { color: iconColor, transparency: 80 }, 
+      line: { color: undefined }
+    });
+
+    // If user provides an icon char (like '★'), use it, otherwise use first letter
+    const iconChar = item.icon || item.title[0] || "★";
+    slide.addText(iconChar, {
+      x: curX, y: curY, w: 0.5, h: 0.5,
+      color: iconColor, fontSize: 14, align: "center", valign: "middle", bold: true
+    });
+
+    // Title
+    slide.addText(item.title, {
+      x: curX + 0.6,
+      y: curY,
+      w: cellW - 0.6,
+      h: 0.3,
+      bold: true,
+      fontSize: 12,
+      color: "333333"
+    });
+
+    // Description
+    if (item.desc) {
+      slide.addText(item.desc, {
+        x: curX + 0.6,
+        y: curY + 0.3,
+        w: cellW - 0.6,
+        h: cellH - 0.3,
+        fontSize: 10,
+        color: "666666",
+        valign: "top"
+      });
+    }
+  });
+}
+
+module.exports = { addFeatureGrid };

package/src/AdvancedComponents/funnelDiagram.js

@@ -0,0 +1,49 @@
+function addFunnelDiagram(slide, stages = [], options = {}) {
+  const {
+    x = 2, y = 1, w = 6, h = 4,
+    colors = ["003f5c", "58508d", "bc5090", "ff6361", "ffa600"]
+  } = options;
+
+  const count = stages.length;
+  const layerH = h / count;
+
+  stages.forEach((stage, i) => {
+    const curY = y + i * layerH;
+    const color = colors[i % colors.length];
+
+    // Calculate width reduction for funnel shape
+    // Top is widest (w), Bottom is narrowest (e.g. w/2)
+    // Interpolate width based on index
+    const topW = w - (i * (w * 0.5)) / count;
+    const bottomW = w - ((i + 1) * (w * 0.5)) / count;
+    
+    // We approximate the visual by centering a rectangle or trapezoid.
+    // pptxgenjs trapezoid shape usually handles scaling well.
+    // For simplicity here, we use a centered trapezoid.
+    
+    slide.addShape("trapezoid", {
+      x: x + (w - topW)/2, // Centering approximation
+      y: curY,
+      w: topW,
+      h: layerH * 0.9, // slight gap
+      fill: color,
+      // Note: "adj" property in pptxgenjs controls trapezoid slant, 
+      // but hard to calculate perfectly dynamically without trial.
+    });
+
+    slide.addText(stage.label, {
+      x: x, y: curY, w: w, h: layerH * 0.9,
+      align: "center", valign: "middle", color: "FFFFFF", bold: true
+    });
+    
+    // Value (e.g. conversion rate)
+    if (stage.value) {
+      slide.addText(stage.value, {
+         x: x + w + 0.2, y: curY, w: 1.5, h: layerH * 0.9,
+         valign: "middle", fontSize: 11, color: "666666"
+      });
+    }
+  });
+}
+
+module.exports = { addFunnelDiagram };

package/src/AdvancedComponents/ganttChart.js

@@ -0,0 +1,35 @@
+function addGanttChart(slide, tasks = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 8, h = 4,
+    barColor = "007AFF"
+  } = options;
+
+  // Header (Timeline ticks - simplified to Month 1, Month 2...)
+  slide.addShape("line", { x: x + 2, y: y + 0.4, w: w - 2, h: 0, line: { color: "CCCCCC" } });
+  
+  // Task Rows
+  const rowH = (h - 0.5) / (tasks.length || 1);
+  
+  tasks.forEach((task, i) => {
+    const curY = y + 0.5 + i * rowH;
+
+    // Label
+    slide.addText(task.name, {
+      x: x, y: curY, w: 1.8, h: rowH * 0.6,
+      fontSize: 10, bold: true, valign: "middle"
+    });
+
+    // Bar
+    // Assuming start/end are normalized 0.0 to 1.0 relative to timeline width
+    const startX = x + 2 + (task.start * (w - 2));
+    const barW = (task.end - task.start) * (w - 2);
+
+    slide.addShape("rect", {
+      x: startX, y: curY + 0.1, w: barW, h: rowH * 0.4,
+      fill: task.color || barColor,
+      rounding: 0.1
+    });
+  });
+}
+
+module.exports = { addGanttChart };

package/src/AdvancedComponents/invoiceTable.js

@@ -0,0 +1,32 @@
+function addInvoiceTable(slide, items = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 8,
+    currency = "$"
+  } = options;
+
+  // Header
+  slide.addShape("rect", { x, y, w, h: 0.5, fill: "333333" });
+  slide.addText("Description", { x: x + 0.2, y, w: w/2, h: 0.5, color: "FFFFFF", valign: "middle" });
+  slide.addText("Amount", { x: x + w - 2, y, w: 2, h: 0.5, color: "FFFFFF", valign: "middle", align: "right" });
+
+  let curY = y + 0.5;
+  let total = 0;
+
+  items.forEach((item, i) => {
+    const bg = i % 2 === 0 ? "F9F9F9" : "FFFFFF";
+    slide.addShape("rect", { x, y: curY, w, h: 0.4, fill: bg });
+    
+    slide.addText(item.desc, { x: x + 0.2, y: curY, w: w/2, h: 0.4, valign: "middle", fontSize: 11 });
+    slide.addText(`${currency}${item.amount}`, { x: x + w - 2, y: curY, w: 2, h: 0.4, valign: "middle", align: "right", fontSize: 11 });
+    
+    total += item.amount;
+    curY += 0.4;
+  });
+
+  // Total Row
+  slide.addShape("line", { x, y: curY, w, h: 0, line: { color: "000000" } });
+  slide.addText("TOTAL", { x: x + w - 4, y: curY + 0.1, w: 2, h: 0.5, bold: true, align: "right" });
+  slide.addText(`${currency}${total}`, { x: x + w - 2, y: curY + 0.1, w: 2, h: 0.5, bold: true, align: "right", fontSize: 14 });
+}
+
+module.exports = { addInvoiceTable };

package/src/AdvancedComponents/matrixGrid.js

@@ -0,0 +1,43 @@
+function addMatrixGrid(slide, quadrants = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 5, h = 5,
+    xAxis = "Effort", yAxis = "Impact"
+  } = options;
+
+  const halfW = w / 2;
+  const halfH = h / 2;
+
+  // Backgrounds
+  const colors = ["E3F2FD", "E8F5E9", "FFF3E0", "FFEBEE"]; // TL, TR, BL, BR
+  const pos = [
+    { ox: 0, oy: 0 }, { ox: halfW, oy: 0 },
+    { ox: 0, oy: halfH }, { ox: halfW, oy: halfH }
+  ];
+
+  pos.forEach((p, i) => {
+    slide.addShape("rect", {
+      x: x + p.ox, y: y + p.oy, w: halfW, h: halfH,
+      fill: colors[i]
+    });
+    if (quadrants[i]) {
+      slide.addText(quadrants[i], {
+        x: x + p.ox, y: y + p.oy, w: halfW, h: halfH,
+        align: "center", valign: "middle", bold: true, color: "555555"
+      });
+    }
+  });
+
+  // Axis Labels
+  // Y-Axis
+  slide.addText(yAxis, {
+    x: x - 0.6, y: y, w: 0.5, h: h,
+    rotate: 270, align: "center", bold: true
+  });
+  // X-Axis
+  slide.addText(xAxis, {
+    x: x, y: y + h + 0.1, w: w, h: 0.5,
+    align: "center", bold: true
+  });
+}
+
+module.exports = { addMatrixGrid };

package/src/AdvancedComponents/mindMap.js

@@ -0,0 +1,43 @@
+function addMindMap(slide, centerText, branches = [], options = {}) {
+  const { x = 4, y = 2.5, w = 6, h = 4 } = options;
+
+  // Center Node
+  slide.addShape("oval", {
+    x: x, y: y, w: 1.5, h: 1.0,
+    fill: "FFFFFF", line: { color: "000000", width: 2 }
+  });
+  slide.addText(centerText, {
+    x: x, y: y, w: 1.5, h: 1.0,
+    align: "center", valign: "middle", bold: true
+  });
+
+  // Branches
+  // Very simple radial distribution
+  const angleStep = (2 * Math.PI) / branches.length;
+  const radius = 2.5;
+
+  branches.forEach((branch, i) => {
+    const angle = i * angleStep;
+    const nodeX = x + 0.75 + Math.cos(angle) * radius; // 0.75 is half width correction
+    const nodeY = y + 0.5 + Math.sin(angle) * radius;
+
+    // Line
+    slide.addShape("line", {
+      x: x + 0.75, y: y + 0.5,
+      w: (nodeX - (x + 0.75)), h: (nodeY - (y + 0.5)),
+      line: { color: "666666" }
+    });
+
+    // Branch Node
+    slide.addShape("roundRect", {
+      x: nodeX - 0.75, y: nodeY - 0.3, w: 1.5, h: 0.6,
+      fill: "F0F0F0", line: { color: "999999" }
+    });
+    slide.addText(branch, {
+      x: nodeX - 0.75, y: nodeY - 0.3, w: 1.5, h: 0.6,
+      align: "center", valign: "middle", fontSize: 10
+    });
+  });
+}
+
+module.exports = { addMindMap };

package/src/AdvancedComponents/orgChart.js

@@ -0,0 +1,76 @@
+function addOrgChart(slide, rootData, options = {}) {
+  const {
+    x = 1, y = 1, w = 8, h = 4,
+    nodeW = 1.5, nodeH = 0.6,
+    gapX = 0.2, gapY = 0.8,
+    color = "007AFF"
+  } = options;
+
+  // Simple recursive renderer for 2 levels (Root -> Children)
+  // A full tree algorithm is complex; this covers the most common use case (CEO -> Reports)
+
+  // 1. Draw Root
+  const rootX = x + (w - nodeW) / 2;
+  const rootY = y;
+  
+  slide.addShape("rect", {
+    x: rootX, y: rootY, w: nodeW, h: nodeH,
+    fill: color, line: { color: "FFFFFF" }
+  });
+  slide.addText(rootData.name, {
+    x: rootX, y: rootY, w: nodeW, h: nodeH,
+    color: "FFFFFF", bold: true, align: "center", fontSize: 11
+  });
+  if (rootData.role) {
+     slide.addText(rootData.role, {
+       x: rootX, y: rootY + 0.35, w: nodeW, h: 0.25,
+       color: "E0E0E0", align: "center", fontSize: 9
+     });
+  }
+
+  // 2. Draw Children
+  if (rootData.children && rootData.children.length > 0) {
+    const count = rootData.children.length;
+    // Calculate total width of children row
+    const totalChildrenW = count * nodeW + (count - 1) * gapX;
+    let startX = x + (w - totalChildrenW) / 2;
+    const childY = rootY + nodeH + gapY;
+
+    // Draw Connector Lines
+    // Vertical from Root
+    slide.addShape("line", {
+      x: rootX + nodeW/2, y: rootY + nodeH, 
+      w: 0, h: gapY / 2,
+      line: { color: "333333", width: 1 }
+    });
+    // Horizontal Bar
+    slide.addShape("line", {
+      x: startX + nodeW/2, y: rootY + nodeH + gapY/2,
+      w: totalChildrenW - nodeW, h: 0,
+      line: { color: "333333", width: 1 }
+    });
+
+    rootData.children.forEach((child, i) => {
+      const curX = startX + i * (nodeW + gapX);
+
+      // Vertical to Child
+      slide.addShape("line", {
+        x: curX + nodeW/2, y: rootY + nodeH + gapY/2,
+        w: 0, h: gapY / 2,
+        line: { color: "333333", width: 1 }
+      });
+
+      // Child Box
+      slide.addShape("rect", {
+        x: curX, y: childY, w: nodeW, h: nodeH,
+        fill: "FFFFFF", line: { color: color }
+      });
+      slide.addText(child.name, {
+        x: curX, y: childY, w: nodeW, h: nodeH,
+        color: "333333", bold: true, align: "center", fontSize: 10
+      });
+    });
+  }
+}
+
+module.exports = { addOrgChart };

package/src/AdvancedComponents/personaCard.js

@@ -0,0 +1,44 @@
+function addPersonaCard(slide, persona, options = {}) {
+  const {
+    x = 1, y = 1, w = 4, h = 5,
+    accent = "9C27B0"
+  } = options;
+
+  // Background
+  slide.addShape("rect", { x, y, w, h, fill: "F9F9F9", line: { color: "DDDDDD" } });
+
+  // Header Color
+  slide.addShape("rect", { x, y, w, h: 0.15, fill: accent });
+
+  // Photo Placeholder
+  slide.addShape("oval", { x: x + 0.3, y: y + 0.4, w: 1, h: 1, fill: "CCCCCC" });
+  
+  // Name & Role
+  slide.addText(persona.name, {
+    x: x + 1.5, y: y + 0.4, w: w - 1.6, h: 0.5,
+    fontSize: 16, bold: true, color: "333333"
+  });
+  slide.addText(persona.role, {
+    x: x + 1.5, y: y + 0.8, w: w - 1.6, h: 0.4,
+    fontSize: 12, color: accent
+  });
+
+  // Quote
+  slide.addText(`"${persona.quote}"`, {
+    x: x + 0.3, y: y + 1.6, w: w - 0.6, h: 0.6,
+    italic: true, fontSize: 11, color: "666666"
+  });
+
+  // Sections
+  const drawSection = (title, items, sY) => {
+    slide.addText(title, { x: x + 0.3, y: sY, w: w - 0.6, h: 0.3, bold: true, fontSize: 10 });
+    items.forEach((item, i) => {
+      slide.addText(`• ${item}`, { x: x + 0.3, y: sY + 0.3 + (i*0.25), w: w - 0.6, h: 0.25, fontSize: 9 });
+    });
+  };
+
+  if (persona.goals) drawSection("GOALS", persona.goals, y + 2.4);
+  if (persona.frustrations) drawSection("FRUSTRATIONS", persona.frustrations, y + 3.8);
+}
+
+module.exports = { addPersonaCard };

package/src/AdvancedComponents/processCycle.js

@@ -0,0 +1,47 @@
+function addProcessCycle(slide, steps = [], options = {}) {
+  const {
+    x = 3, y = 3, radius = 2,
+    color = "007AFF"
+  } = options;
+
+  if (steps.length === 0) return;
+
+  const angleStep = (2 * Math.PI) / steps.length;
+
+  steps.forEach((step, index) => {
+    // Start from top ( -PI/2 )
+    const angle = index * angleStep - Math.PI / 2;
+    
+    // Position for the circle center
+    const cx = x + radius * Math.cos(angle);
+    const cy = y + radius * Math.sin(angle);
+    
+    // Circle Node
+    const nodeSize = 1.2;
+    slide.addShape("oval", {
+      x: cx - nodeSize/2,
+      y: cy - nodeSize/2,
+      w: nodeSize,
+      h: nodeSize,
+      fill: "FFFFFF",
+      line: { color: color, width: 3 }
+    });
+
+    // Step Number
+    slide.addText(String(index + 1), {
+      x: cx - nodeSize/2, y: cy - nodeSize/2, w: nodeSize, h: 0.4,
+      align: "center", valign: "bottom", fontSize: 14, bold: true, color: color
+    });
+
+    // Step Title
+    slide.addText(step, {
+      x: cx - nodeSize/2 + 0.1, y: cy, w: nodeSize - 0.2, h: 0.5,
+      align: "center", valign: "top", fontSize: 10
+    });
+
+    // (Optional) Simple Arrow/Line pointing to next could be added here
+    // using trigonometry for start/end points, but pure shapes are cleaner.
+  });
+}
+
+module.exports = { addProcessCycle };