canva-pptx 1.0.0

package/src/components/card.js

@@ -0,0 +1,64 @@
+/**
+ * Card component
+ * Supports any pptx.ShapeType
+ */
+
+function addCard(slide, options = {}) {
+  const {
+    x,
+    y,
+    w,
+    h,
+    background = "FFFFFF",
+    border = "DDDDDD",
+    padding = 0.3,
+    title,
+    body,
+    theme,
+    shapeType, // REQUIRED
+  } = options;
+
+  if (!shapeType) {
+    throw new Error(
+      "addCard: shapeType is required (e.g. pptx.ShapeType.rect)"
+    );
+  }
+
+  // Card shape
+  slide.addShape(shapeType, {
+    x,
+    y,
+    w,
+    h,
+    fill: background,
+    line: { color: border },
+    rounding: shapeType === "roundRect" ? 0.15 : undefined,
+  });
+
+  // Title
+  if (title) {
+    slide.addText(title, {
+      x: x + padding,
+      y: y + padding,
+      w: w - padding * 2,
+      fontSize: theme?.heading?.fontSize || 16,
+      bold: true,
+      color: theme?.heading?.color || "111111",
+      align: "center",
+    });
+  }
+
+  // Body
+  if (body) {
+    slide.addText(body, {
+      x: x + padding,
+      y: y + padding + 0.6,
+      w: w - padding * 2,
+      fontSize: theme?.body?.fontSize || 12,
+      color: theme?.body?.color || "444444",
+      align: "center",
+    });
+  }
+}
+
+module.exports = { addCard };

package/src/components/chart.js

@@ -0,0 +1,19 @@
+function addChart(slide, chartType, data, options = {}) {
+  slide.addChart(chartType, data, {
+    x: options.x ?? 1,
+    y: options.y ?? 1,
+    w: options.w ?? 6,
+    h: options.h ?? 4,
+
+    title: options.title,
+    showLegend: options.showLegend ?? true,
+
+    // INTERACTIVITY (PowerPoint-native)
+    chartColors: options.colors,
+    animation: options.animation ?? "fade",
+    showValue: options.showValue ?? true,
+    showPercent: options.showPercent ?? false,
+  });
+}
+
+module.exports = { addChart };

package/src/components/codeBlock.js

@@ -0,0 +1,40 @@
+/**
+ * Renders a code snippet box
+ */
+function addCodeBlock(slide, code, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 6,
+    h = 3,
+    fontSize = 11,
+    background = "1E1E1E", // Dark VS Code style
+    color = "D4D4D4",
+  } = options;
+
+  // Container
+  slide.addShape("rect", {
+    x,
+    y,
+    w,
+    h,
+    fill: background,
+    line: { color: "333333" },
+  });
+
+  // Code Text (Monospaced font usually requires a specific font name installed,
+  // but standard fonts work for general purpose)
+  slide.addText(code, {
+    x: x + 0.2,
+    y: y + 0.2,
+    w: w - 0.4,
+    h: h - 0.4,
+    fontSize: fontSize,
+    color: color,
+    fontFace: "Courier New", // Standard monospaced font
+    align: "left",
+    valign: "top",
+  });
+}
+
+module.exports = { addCodeBlock };

package/src/components/codeDiff.js

@@ -0,0 +1,51 @@
+/**
+ * Renders a code block that highlights diffs.
+ * Lines starting with "+" are green.
+ * Lines starting with "-" are red.
+ */
+function addCodeDiff(slide, diffText, options = {}) {
+  const {
+    x = 1, y = 1, w = 8, h = 4,
+    fontSize = 12,
+    background = "1E1E1E"
+  } = options;
+
+  // Background
+  slide.addShape("rect", { x, y, w, h, fill: background });
+
+  const lines = diffText.split("\n");
+  let currentY = y + 0.2;
+  const lineHeight = fontSize * 0.0035;
+
+  lines.forEach(line => {
+    let color = "D4D4D4"; // Default Grey
+    let bgLine = null;
+
+    if (line.startsWith("+")) {
+      color = "4CAF50"; // Green text
+      // Optional: Add faint green background strip for the line
+      // bgLine = "0f291e"; 
+    } else if (line.startsWith("-")) {
+      color = "F44336"; // Red text
+      // bgLine = "3e1616";
+    } else if (line.startsWith("@@")) {
+      color = "569CD6"; // Blue for chunk headers
+    }
+
+    // Render Text
+    slide.addText(line, {
+      x: x + 0.2,
+      y: currentY,
+      w: w - 0.4,
+      h: lineHeight,
+      fontFace: "Courier New",
+      fontSize: fontSize,
+      color: color,
+      align: "left"
+    });
+
+    currentY += 0.25;
+  });
+}
+
+module.exports = { addCodeDiff };

package/src/components/comparisonTable.js

@@ -0,0 +1,43 @@
+function addComparisonTable(slide, leftData, rightData, options = {}) {
+  const {
+    x = 1, y = 1, w = 8, h = 4,
+    leftColor = "E8F5E9", rightColor = "FFEBEE"
+  } = options;
+
+  const colW = w / 2;
+
+  // Backgrounds
+  slide.addShape("rect", { x, y, w: colW, h, fill: leftColor });
+  slide.addShape("rect", { x: x + colW, y, w: colW, h, fill: rightColor });
+
+  // Headers
+  slide.addText(leftData.title, {
+    x, y, w: colW, h: 0.5,
+    bold: true, align: "center", fontSize: 16
+  });
+  slide.addText(rightData.title, {
+    x: x + colW, y, w: colW, h: 0.5,
+    bold: true, align: "center", fontSize: 16
+  });
+
+  // Lists
+  const listOpts = { fontSize: 12, bullet: true, color: "333333" };
+  
+  // Left Items
+  leftData.items.forEach((item, i) => {
+     slide.addText(item, {
+       x: x + 0.2, y: y + 0.6 + (i*0.4), w: colW - 0.4, h: 0.4,
+       ...listOpts
+     });
+  });
+
+  // Right Items
+  rightData.items.forEach((item, i) => {
+     slide.addText(item, {
+       x: x + colW + 0.2, y: y + 0.6 + (i*0.4), w: colW - 0.4, h: 0.4,
+       ...listOpts
+     });
+  });
+}
+
+module.exports = { addComparisonTable };

package/src/components/cornerAccent.js

@@ -0,0 +1,32 @@
+function addCornerAccent(slide, corner = "top-right", options = {}) {
+  const {
+    size = 2,
+    color = "FFC107" // Amber
+  } = options;
+
+  let x, y, rotate;
+  const slideW = 10; // Default width
+  const slideH = 5.63; // Default height
+
+  switch (corner) {
+    case "top-left": x = -size/2; y = -size/2; rotate = 180; break;
+    case "bottom-left": x = -size/2; y = slideH - size/2; rotate = 270; break;
+    case "bottom-right": x = slideW - size/2; y = slideH - size/2; rotate = 0; break;
+    case "top-right": default: x = slideW - size/2; y = -size/2; rotate = 90; break;
+  }
+
+  // A quarter circle (arc) or a triangle in the corner.
+  // Using a rotated Triangle is very modern.
+  
+  slide.addShape("rtTriangle", { // Right Triangle
+    x: x,
+    y: y,
+    w: size,
+    h: size,
+    fill: color,
+    rotate: rotate,
+    line: { color: undefined }
+  });
+}
+
+module.exports = { addCornerAccent };

package/src/components/dotPattern.js

@@ -0,0 +1,30 @@
+function addDotPattern(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 3,
+    h = 3,
+    color = "CCCCCC",
+    rows = 6,
+    cols = 6,
+    size = 0.05
+  } = options;
+
+  const gapX = (w - size) / (cols - 1);
+  const gapY = (h - size) / (rows - 1);
+
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      slide.addShape("oval", {
+        x: x + c * gapX,
+        y: y + r * gapY,
+        w: size,
+        h: size,
+        fill: color,
+        line: { color: undefined }
+      });
+    }
+  }
+}
+
+module.exports = { addDotPattern };

package/src/components/geometricConfetti.js

@@ -0,0 +1,34 @@
+function addGeometricConfetti(slide, options = {}) {
+  const {
+    x = 0,
+    y = 0,
+    w = 10,
+    h = 5.63,
+    count = 10,
+    colors = ["FF5722", "00BCD4", "FFC107"]
+  } = options;
+
+  const shapes = ["triangle", "oval", "rect", "cross"];
+
+  for (let i = 0; i < count; i++) {
+    // Random positions within the bounding box
+    const randX = x + Math.random() * w;
+    const randY = y + Math.random() * h;
+    const randSize = 0.1 + Math.random() * 0.2; // Small size
+    const randShape = shapes[Math.floor(Math.random() * shapes.length)];
+    const randColor = colors[Math.floor(Math.random() * colors.length)];
+    const randRot = Math.random() * 360;
+
+    slide.addShape(randShape, {
+      x: randX,
+      y: randY,
+      w: randSize,
+      h: randSize,
+      fill: randColor,
+      rotate: randRot,
+      line: { color: undefined }
+    });
+  }
+}
+
+module.exports = { addGeometricConfetti };

package/src/components/gradientMesh.js

@@ -0,0 +1,32 @@
+function addGradientMesh(slide, options = {}) {
+  const {
+    x = 0,
+    y = 0,
+    w = 5,
+    h = 5,
+    color = "007AFF",
+    opacity = 50
+  } = options;
+
+  // PowerPoint JS libraries often handle gradients via specific fill objects.
+  // We simulate a mesh glow using a radial gradient if supported,
+  // or a highly transparent soft circle.
+
+  slide.addShape("oval", {
+    x: x,
+    y: y,
+    w: w,
+    h: h,
+    fill: {
+      type: "gradient",
+      gradientType: "radial",
+      stops: [
+        { position: 0, color: color, alpha: (100-opacity)/100 }, // Center
+        { position: 1, color: "FFFFFF", alpha: 0 }  // Edge (fade out)
+      ]
+    },
+    line: { color: undefined }
+  });
+}
+
+module.exports = { addGradientMesh };

package/src/components/iconList.js

@@ -0,0 +1,43 @@
+function addIconList(slide, items = [], options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 5,
+    itemHeight = 0.5,
+    gap = 0.1,
+    iconColor = "007AFF",
+    textColor = "333333"
+  } = options;
+
+  items.forEach((text, i) => {
+    const curY = y + i * (itemHeight + gap);
+
+    // Icon (Checkmark style shape)
+    slide.addShape("oval", {
+      x: x,
+      y: curY + 0.1,
+      w: 0.25,
+      h: 0.25,
+      fill: iconColor
+    });
+    
+    // Checkmark inside
+    slide.addText("✓", {
+        x: x, y: curY + 0.1, w: 0.25, h: 0.25,
+        color: "FFFFFF", fontSize: 10, align: "center", valign: "middle"
+    });
+
+    // Text
+    slide.addText(text, {
+      x: x + 0.4,
+      y: curY,
+      w: w - 0.4,
+      h: itemHeight,
+      fontSize: 14,
+      color: textColor,
+      valign: "middle"
+    });
+  });
+}
+
+module.exports = { addIconList };

package/src/components/image.js

@@ -0,0 +1,11 @@
+function addImage(slide, imagePath, options = {}) {
+  slide.addImage({
+    path: imagePath,
+    x: options.x ?? 1,
+    y: options.y ?? 1,
+    w: options.w ?? 3,
+    h: options.h ?? 3,
+  });
+}
+
+module.exports = { addImage };

package/src/components/kanbanColumn.js

@@ -0,0 +1,38 @@
+function addKanbanColumn(slide, title, cards = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 3, h = 5,
+    bgColor = "F4F5F7"
+  } = options;
+
+  // Background
+  slide.addShape("rect", {
+    x, y, w, h,
+    fill: bgColor,
+    rounding: 0.1 // slight rounded corners for column
+  });
+
+  // Title
+  slide.addText(title, {
+    x: x + 0.1, y: y + 0.1, w: w - 0.2, h: 0.4,
+    bold: true, fontSize: 12, color: "172B4D"
+  });
+
+  // Cards
+  let cardY = y + 0.6;
+  cards.forEach(cardText => {
+    slide.addShape("rect", {
+      x: x + 0.1, y: cardY, w: w - 0.2, h: 0.8,
+      fill: "FFFFFF",
+      line: { color: "DFE1E6" } // Border
+    });
+
+    slide.addText(cardText, {
+      x: x + 0.2, y: cardY, w: w - 0.4, h: 0.8,
+      fontSize: 10, color: "333333", valign: "middle"
+    });
+
+    cardY += 0.9;
+  });
+}
+
+module.exports = { addKanbanColumn };

package/src/components/link.js

@@ -0,0 +1,23 @@
+function addLink(slide, text, url, options = {}) {
+  slide.addText(
+    [
+      {
+        text,
+        options: {
+          hyperlink: { url },
+          color: "0000FF",
+          underline: true,
+        },
+      },
+    ],
+    {
+      x: options.x ?? 1,
+      y: options.y ?? 1,
+      w: options.w ?? 4,
+      h: options.h ?? 1,
+      fontSize: options.fontSize ?? 14,
+    }
+  );
+}
+
+module.exports = { addLink };

package/src/components/organicBlob.js

@@ -0,0 +1,45 @@
+function addOrganicBlob(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 4,
+    h = 4,
+    color = "F0F4FF", // Very light blue
+    opacity = 100 // 0-100 (pptxgenjs usually handles transparency via alpha or hex)
+  } = options;
+
+  // To simulate a "blob", we create a cluster of 3 rotated ovals
+  // anchored around the center point.
+
+  // Blob Part 1 (Main body)
+  slide.addShape("oval", {
+    x: x,
+    y: y,
+    w: w,
+    h: h * 0.8,
+    fill: { color: color, transparency: 100 - opacity },
+    line: { color: undefined } // No border
+  });
+
+  // Blob Part 2 (rotated stretch)
+  slide.addShape("oval", {
+    x: x - w * 0.1,
+    y: y + h * 0.1,
+    w: w * 0.9,
+    h: h * 0.9,
+    rotate: 45,
+    fill: { color: color, transparency: 100 - opacity }
+  });
+
+  // Blob Part 3 (smoothing clump)
+  slide.addShape("oval", {
+    x: x + w * 0.2,
+    y: y - h * 0.1,
+    w: w * 0.7,
+    h: h * 0.7,
+    rotate: -30,
+    fill: { color: color, transparency: 100 - opacity }
+  });
+}
+
+module.exports = { addOrganicBlob };

package/src/components/pricingColumn.js

@@ -0,0 +1,53 @@
+function addPricingColumn(slide, plan, options = {}) {
+  const {
+    x = 1, y = 1, w = 2.5, h = 4,
+    headerColor = "333333",
+    priceColor = "007AFF"
+  } = options;
+
+  // Container Border
+  slide.addShape("rect", {
+    x, y, w, h,
+    line: { color: "DDDDDD" },
+    fill: "FFFFFF"
+  });
+
+  // Header
+  slide.addShape("rect", {
+    x, y, w, h: 0.8,
+    fill: headerColor
+  });
+  slide.addText(plan.name, {
+    x, y, w, h: 0.8,
+    color: "FFFFFF", bold: true, align: "center", valign: "middle", fontSize: 14
+  });
+
+  // Price
+  slide.addText(plan.price, {
+    x, y: y + 0.9, w, h: 0.6,
+    color: priceColor, bold: true, align: "center", fontSize: 24
+  });
+
+  // Features
+  const startY = y + 1.6;
+  if (plan.features) {
+    plan.features.forEach((feat, i) => {
+      slide.addText(feat, {
+        x: x + 0.2, y: startY + (i * 0.4), w: w - 0.4, h: 0.4,
+        fontSize: 10, align: "center", color: "666666"
+      });
+    });
+  }
+
+  // Button Visual
+  slide.addShape("roundRect", {
+    x: x + 0.4, y: y + h - 0.7, w: w - 0.8, h: 0.4,
+    fill: priceColor, rounding: 0.5
+  });
+  slide.addText("Select", {
+     x: x + 0.4, y: y + h - 0.7, w: w - 0.8, h: 0.4,
+     color: "FFFFFF", fontSize: 10, bold: true, align: "center", valign: "middle"
+  });
+}
+
+module.exports = { addPricingColumn };

package/src/components/progressBar.js

@@ -0,0 +1,55 @@
+/**
+ * Renders a progress bar (track + fill)
+ */
+function addProgressBar(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 5,
+    h = 0.3,
+    percent = 0.5, // 0.0 to 1.0
+    color = "007AFF",
+    trackColor = "E5E5EA",
+    showLabel = true,
+  } = options;
+
+  // 1. Draw Track (Background)
+  slide.addShape("rect", {
+    x,
+    y,
+    w,
+    h,
+    fill: trackColor,
+    line: { color: trackColor },
+    rounding: h / 2, // Pill shape
+  });
+
+  // 2. Draw Fill (Foreground)
+  if (percent > 0) {
+    slide.addShape("rect", {
+      x,
+      y,
+      w: w * percent,
+      h,
+      fill: color,
+      line: { color: color }, // Hide border
+      rounding: h / 2,
+    });
+  }
+
+  // 3. Optional Label (e.g., "50%")
+  if (showLabel) {
+    slide.addText(`${Math.round(percent * 100)}%`, {
+      x: x + w + 0.1,
+      y: y,
+      w: 1,
+      h: h,
+      fontSize: 10,
+      color: "666666",
+      align: "left",
+      valign: "middle",
+    });
+  }
+}
+
+module.exports = { addProgressBar };

package/src/components/ratingStars.js

@@ -0,0 +1,25 @@
+function addRatingStars(slide, rating = 0, options = {}) {
+  const {
+    x = 1, y = 1, w = 2, h = 0.4,
+    max = 5,
+    fillColor = "FFD700", // Gold
+    emptyColor = "E0E0E0"
+  } = options;
+
+  const starSize = h;
+  const gap = 0.1;
+
+  for (let i = 1; i <= max; i++) {
+    const isFilled = i <= rating;
+    const curX = x + (i - 1) * (starSize + gap);
+    
+    // Using text "★" is safer than shapes for compatibility
+    slide.addText("★", {
+      x: curX, y, w: starSize, h: starSize,
+      color: isFilled ? fillColor : emptyColor,
+      fontSize: starSize * 40 // approximate scaling
+    });
+  }
+}
+
+module.exports = { addRatingStars };

package/src/components/shape.js

@@ -0,0 +1,12 @@
+function addShape(slide, shapeType, options = {}) {
+  slide.addShape(shapeType, {
+    x: options.x ?? 1,
+    y: options.y ?? 1,
+    w: options.w ?? 2,
+    h: options.h ?? 2,
+    fill: options.fill ?? "FFFFFF",
+    line: options.line ?? { color: "000000" },
+  });
+}
+
+module.exports = { addShape };

package/src/components/slide.js

@@ -0,0 +1,5 @@
+function addSlide(pptx, options = {}) {
+  return pptx.addSlide(options);
+}
+
+module.exports = { addSlide };