canva-pptx 1.0.0

package/src/components/socialBar.js

@@ -0,0 +1,59 @@
+/**
+ * Renders a row of social media icons.
+ * Supported types: linkedin, twitter, github, instagram, facebook, web
+ */
+function addSocialBar(slide, items = [], options = {}) {
+  const {
+    x = 1,
+    y = 5,
+    iconSize = 0.4,
+    gap = 0.2,
+    color = "555555" // Default icon color
+  } = options;
+
+  // Embedded SVG Paths for standard social icons
+  const ICONS = {
+    linkedin: "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z",
+    twitter: "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z",
+    github: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z",
+    web: "M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.183-.442 3.057h-2.552zm-2 0h-2.552c-.23-.874-.383-1.914-.442-3.057h2.994v3.057zm0-5.057v-3h2.994c.059 1.143.212 2.183.442 3h-3.436zm2-5.057v3.057h-2.994c.059-1.143.212-2.183.442-3.057h2.552zm-2 0h-2.552c-.23.874-.383 1.914-.442 3.057h2.994v-3.057zm-5.223 5.057h-2.613c.277-1.206.711-2.22 1.246-3h1.367v3zm2.684-5.057c.23-.874.524-1.66.863-2.348 1.12.564 2.062 1.353 2.766 2.348h-3.629zm5.352 5.057h2.613c-.277-1.206-.711-2.22-1.246-3h-1.367v3zm-5.029 8.057c-.23.874-.524 1.66-.863 2.348-1.12-.564-2.062-1.353-2.766-2.348h3.629zm2.345 2.348c-.339-.688-.633-1.474-.863-2.348h3.629c-.704.995-1.646 1.784-2.766 2.348zm5.297-2.348h2.613c-.277 1.206-.711 2.22-1.246 3h-1.367v-3zm-7.642 0h-2.613c.277 1.206.711 2.22 1.246 3h1.367v-3z",
+    instagram: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z",
+    facebook: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+  };
+
+  items.forEach((item, index) => {
+    const curX = x + index * (iconSize + gap);
+    const pathData = ICONS[item.type.toLowerCase()];
+
+    // 1. Icon Container (Clickable Area)
+    // We add a transparent rect behind it for easier clicking if link is attached
+    if (item.url) {
+      slide.addShape("rect", {
+        x: curX, y, w: iconSize, h: iconSize,
+        fill: { color: "FFFFFF", transparency: 99 },
+        hyperlink: { url: item.url }
+      });
+    }
+
+    // 2. SVG Icon
+    if (pathData) {
+      // Construct minimal SVG
+      const svgXml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#${color}"><path d="${pathData}"/></svg>`;
+      const base64Data = Buffer.from(svgXml).toString("base64");
+      
+      slide.addImage({
+        data: `data:image/svg+xml;base64,${base64Data}`,
+        x: curX, y, w: iconSize, h: iconSize,
+        hyperlink: item.url ? { url: item.url } : undefined
+      });
+    } else {
+      // Fallback: Colored Circle
+      slide.addShape("oval", {
+        x: curX, y, w: iconSize, h: iconSize,
+        fill: color
+      });
+    }
+  });
+}
+
+module.exports = { addSocialBar };

package/src/components/squiggleLine.js

@@ -0,0 +1,26 @@
+function addSquiggleLine(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 3,
+    color = "FF5722",
+    thickness = 3
+  } = options;
+
+  // We simulate a squiggle by using the 'wave' shape but making it very thin vertically
+  // OR by drawing a specific line shape if the library allows path.
+  // The safest cross-compatible way is a "Wave" shape.
+  
+  slide.addShape("wave", {
+    x: x,
+    y: y,
+    w: w,
+    h: 0.2, // Short height makes the wave look like a line
+    fill: { color: undefined }, // No fill
+    line: { color: color, width: thickness },
+    flipH: false,
+    flipV: false
+  });
+}
+
+module.exports = { addSquiggleLine };

package/src/components/stepProcess.js

@@ -0,0 +1,39 @@
+function addStepProcess(slide, steps = [], options = {}) {
+  const { x = 1, y = 1, w = 4, gap = 0.8, color = "007AFF" } = options;
+
+  // Draw Vertical Line
+  const totalH = (steps.length - 1) * gap;
+  if (steps.length > 1) {
+    slide.addShape("line", {
+      x: x + 0.15, y: y + 0.15, w: 0, h: totalH,
+      line: { color: "CCCCCC", width: 2 }
+    });
+  }
+
+  steps.forEach((step, i) => {
+    const curY = y + i * gap;
+
+    // Circle Number
+    slide.addShape("oval", {
+      x, y: curY, w: 0.3, h: 0.3, fill: color
+    });
+    slide.addText(String(i + 1), {
+      x, y: curY, w: 0.3, h: 0.3,
+      color: "FFFFFF", fontSize: 10, bold: true, align: "center", valign: "middle"
+    });
+
+    // Content
+    slide.addText(step.title, {
+      x: x + 0.5, y: curY - 0.1, w: w - 0.5, h: 0.3,
+      bold: true, fontSize: 12
+    });
+    if (step.desc) {
+      slide.addText(step.desc, {
+        x: x + 0.5, y: curY + 0.15, w: w - 0.5, h: 0.4,
+        fontSize: 10, color: "666666"
+      });
+    }
+  });
+}
+
+module.exports = { addStepProcess };

package/src/components/table.js

@@ -0,0 +1,23 @@
+function addTable(slide, data, options = {}) {
+  const rows = data.map((row, rowIndex) =>
+    row.map((cell) => ({
+      text: String(cell),
+      options: {
+        fontSize: options.fontSize || 14,
+        bold: rowIndex === 0 && options.header !== false,
+        fill: rowIndex === 0 ? options.headerFill : undefined,
+        color: options.color || "000000",
+      },
+    }))
+  );
+
+  slide.addTable(rows, {
+    x: options.x ?? 1,
+    y: options.y ?? 1,
+    w: options.w ?? 8,
+    border: options.border ?? { type: "solid", color: "CCCCCC" },
+    colW: options.colW,
+  });
+}
+
+module.exports = { addTable };

package/src/components/tagCloud.js

@@ -0,0 +1,39 @@
+function addTagCloud(slide, tags = [], options = {}) {
+  const {
+    x = 1, y = 1, w = 5,
+    bgColors = ["E3F2FD", "E8F5E9", "FFF3E0", "F3E5F5"],
+    fontSize = 10
+  } = options;
+
+  let curX = x;
+  let curY = y;
+  const rowHeight = 0.4;
+  const padding = 0.2;
+
+  tags.forEach((tag, i) => {
+    // Crude width estimation
+    const tagW = (tag.length * 0.1) + 0.4;
+    
+    // Wrap to next line if exceeds width
+    if (curX + tagW > x + w) {
+      curX = x;
+      curY += rowHeight + 0.1;
+    }
+
+    const color = bgColors[i % bgColors.length];
+
+    slide.addShape("roundRect", {
+      x: curX, y: curY, w: tagW, h: rowHeight,
+      fill: color, line: { color: color }, rounding: 0.5
+    });
+
+    slide.addText(tag, {
+      x: curX, y: curY, w: tagW, h: rowHeight,
+      fontSize, color: "333333", align: "center", valign: "middle"
+    });
+
+    curX += tagW + 0.1;
+  });
+}
+
+module.exports = { addTagCloud };

package/src/components/testimonialCard.js

@@ -0,0 +1,54 @@
+function addTestimonialCard(slide, quote, author, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 6,
+    h = 2.5,
+    bg = "F9F9F9",
+    accent = "007AFF",
+  } = options;
+
+  // Background
+  slide.addShape("roundRect", {
+    x, y, w, h,
+    fill: bg,
+    line: { color: "EFEFEF" },
+    rounding: 0.2
+  });
+
+  // Quote Mark Graphic (Large text representation)
+  slide.addText("“", {
+    x: x + 0.2,
+    y: y + 0.2,
+    w: 1, h: 1,
+    fontSize: 60,
+    color: accent,
+    fontFace: "Georgia"
+  });
+
+  // Quote Text
+  slide.addText(quote, {
+    x: x + 0.8,
+    y: y + 0.4,
+    w: w - 1,
+    h: h - 1,
+    fontSize: 14,
+    color: "333333",
+    italic: true,
+    valign: "top"
+  });
+
+  // Author
+  slide.addText(`— ${author}`, {
+    x: x + 0.8,
+    y: y + h - 0.6,
+    w: w - 1,
+    h: 0.4,
+    fontSize: 12,
+    bold: true,
+    color: "555555",
+    align: "right"
+  });
+}
+
+module.exports = { addTestimonialCard };

package/src/components/text.js

@@ -0,0 +1,14 @@
+function addText(slide, text, options = {}) {
+  slide.addText(text, {
+    x: options.x ?? 1,
+    y: options.y ?? 1,
+    w: options.w ?? 5,
+    h: options.h ?? 1,
+    fontSize: options.fontSize ?? 18,
+    color: options.color ?? "000000",
+    bold: options.bold ?? false,
+    align: options.align ?? "left",
+  });
+}
+
+module.exports = { addText };

package/src/components/theme.js

@@ -0,0 +1,7 @@
+function applyTheme(slide, theme) {
+  if (theme.background) {
+    slide.background = { fill: theme.background };
+  }
+}
+
+module.exports = { applyTheme };

package/src/components/timeline.js

@@ -0,0 +1,73 @@
+/**
+ * Renders a horizontal timeline with connected circles and labels.
+ */
+function addTimeline(slide, items = [], options = {}) {
+  const {
+    x = 1,
+    y = 3,
+    w = 8,
+    color = "007AFF", // Color of dots and line
+    textColor = "333333",
+  } = options;
+
+  if (items.length === 0) return;
+
+  // Calculate spacing
+  const stepWidth = w / (items.length - 1 || 1);
+  const lineY = y + 0.15; // Vertical center of the dots
+
+  // 1. Draw connecting line
+  if (items.length > 1) {
+    slide.addShape("line", {
+      x: x,
+      y: lineY,
+      w: w,
+      h: 0,
+      line: { color: color, width: 2 },
+    });
+  }
+
+  // 2. Draw dots and text for each item
+  items.forEach((item, index) => {
+    const curX = x + index * stepWidth;
+
+    // Dot
+    slide.addShape("oval", {
+      x: curX - 0.15, // center the 0.3 width circle
+      y: y,
+      w: 0.3,
+      h: 0.3,
+      fill: "FFFFFF",
+      line: { color: color, width: 3 },
+    });
+
+    // Title
+    slide.addText(item.title, {
+      x: curX - 0.75, // center text relative to dot
+      y: y + 0.4,
+      w: 1.5,
+      h: 0.5,
+      fontSize: 12,
+      bold: true,
+      color: textColor,
+      align: "center",
+      valign: "top",
+    });
+
+    // Description (optional)
+    if (item.desc) {
+      slide.addText(item.desc, {
+        x: curX - 0.75,
+        y: y + 0.8,
+        w: 1.5,
+        h: 1,
+        fontSize: 10,
+        color: "666666",
+        align: "center",
+        valign: "top",
+      });
+    }
+  });
+}
+
+module.exports = { addTimeline };

package/src/components/waveDecoration.js

@@ -0,0 +1,35 @@
+function addWaveDecoration(slide, position = "bottom", options = {}) {
+  const {
+    color = "007AFF",
+    opacity = 100,
+    slideWidth = 10,
+    slideHeight = 5.63,
+    amplitude = 1.5 // How "deep" the wave is
+  } = options;
+
+  const isTop = position === "top";
+
+  // We simulate a wave by placing a massive oval partially off-screen.
+  // This is a standard PPT trick for curves.
+  
+  const width = slideWidth * 1.5; // Wider than slide to hide oval edges
+  const height = amplitude * 4;   // Tall oval
+  
+  const x = (slideWidth - width) / 2; // Center horizontally
+  
+  // Calculate Y based on position
+  // If Top: move mostly up, leaving bottom exposed
+  // If Bottom: move mostly down, leaving top exposed
+  const y = isTop ? - (height - amplitude) : slideHeight - amplitude;
+
+  slide.addShape("oval", {
+    x: x,
+    y: y,
+    w: width,
+    h: height,
+    fill: { color: color, transparency: 100 - opacity },
+    line: { color: undefined }
+  });
+}
+
+module.exports = { addWaveDecoration };

package/src/core/PPTManager.js

@@ -0,0 +1,17 @@
+const PptxGenJS = require("pptxgenjs");
+
+class PPTManager {
+  constructor() {
+    this.pptx = new PptxGenJS();
+  }
+
+  getPptx() {
+    return this.pptx;
+  }
+
+  async save(filename = "presentation.pptx") {
+    await this.pptx.writeFile({ fileName: filename });
+  }
+}
+
+module.exports = PPTManager;

package/src/index.js

@@ -0,0 +1,225 @@
+/**
+ * canva-pptx – Public API
+ * This file MUST ONLY aggregate exports and register built-ins.
+ * No business logic here.
+ */
+
+/* --------------------------------
+   Core
+--------------------------------- */
+const PPTManager = require("./core/PPTManager");
+
+/* --------------------------------
+   Components
+--------------------------------- */
+const { addSlide } = require("./components/slide");
+const { addText } = require("./components/text");
+const { addShape } = require("./components/shape");
+const { addImage } = require("./components/image");
+const { addLink } = require("./components/link");
+const { addCard } = require("./components/card");
+const { addTable } = require("./components/table");
+const { addChart } = require("./components/chart");
+const { applyTheme } = require("./components/theme");
+
+/* --------------------------------
+   Themes
+--------------------------------- */
+const { getTheme, registerTheme } = require("./themes");
+
+const { addProgressBar } = require("./components/progressBar");
+const { addStatMetric } = require("./components/StatMetric");
+const { addBadge } = require("./components/badge");
+const { addCodeBlock } = require("./components/codeBlock");
+const { addTimeline } = require("./components/timeline");
+const { addAvatarGroup } = require("./components/avatarGroup");
+const { addTestimonialCard } = require("./components/testimonialCard");
+const { addAlertBox } = require("./components/alertBox");
+const { addIconList } = require("./components/iconList");
+const { addPricingColumn } = require("./components/pricingColumn");
+const { addStepProcess } = require("./components/stepProcess");
+const { addComparisonTable } = require("./components/comparisonTable");
+const { addRatingStars } = require("./components/ratingStars");
+const { addBreadcrumbNav } = require("./components/breadcrumbNav");
+const { addTagCloud } = require("./components/tagCloud");
+const { addKanbanColumn } = require("./components/kanbanColumn");
+const { addCallToAction } = require("./components/callToAction");
+const { addOrganicBlob } = require("./components/organicBlob");
+const { addWaveDecoration } = require("./components/waveDecoration");
+const { addDotPattern } = require("./components/dotPattern");
+const { addBrushStroke } = require("./components/brushStroke");
+const { addGeometricConfetti } = require("./components/geometricConfetti");
+const { addGradientMesh } = require("./components/gradientMesh");
+const { addSquiggleLine } = require("./components/squiggleLine");
+const { addCornerAccent } = require("./components/cornerAccent");
+/* --------------------------------
+   New Utility Components
+--------------------------------- */
+const { addBrowserWindow } = require("./components/browserWindow");
+const { addSocialBar } = require("./components/socialBar");
+
+/* --------------------------------
+   Layout Engines
+--------------------------------- */
+const { createGrid } = require("./layout/grid");
+const { getSplitScreen } = require("./layout/splitScreen");
+const { getZPattern } = require("./layout/zPattern");
+const { getSidebarLayout } = require("./layout/sidebar");
+const { getHeroLayout } = require("./layout/hero");
+const { getGalleryLayout } = require("./layout/gallery");
+const { getBentoLayout } = require("./layout/bento");
+const { getRadialLayout } = require("./layout/radial");
+const { getCheckerboardLayout } = require("./layout/checkerboard");
+const { getMagazineLayout } = require("./layout/magazine");
+const { getFilmStripLayout } = require("./layout/filmStrip");
+
+
+/* --------------------------------
+   Advanced Components
+--------------------------------- */
+const { addFeatureGrid } = require("./AdvancedComponents/featureGrid");
+const { addTeamMemberProfile } = require("./AdvancedComponents/teamMemberProfile");
+const { addSWOTMatrix } = require("./AdvancedComponents/swotMatrix");
+const { addProcessCycle } = require("./AdvancedComponents/processCycle");
+const { addFunnelDiagram } = require("./AdvancedComponents/funnelDiagram");
+const { addPyramidHierarchy } = require("./AdvancedComponents/pyramidHierarchy");
+const { addDeviceMockup } = require("./AdvancedComponents/deviceMockup");
+const { addAccordionList } = require("./AdvancedComponents/accordionList");
+const { addTrafficLight } = require("./AdvancedComponents/trafficLight");
+const { addVennDiagram } = require("./AdvancedComponents/vennDiagram");
+const { addOrgChart } = require("./AdvancedComponents/orgChart");
+const { addCalendarGrid } = require("./AdvancedComponents/calendarGrid");
+const { addGanttChart } = require("./AdvancedComponents/ganttChart");
+const { addPersonaCard } = require("./AdvancedComponents/personaCard");
+const { addMatrixGrid } = require("./AdvancedComponents/matrixGrid");
+const { addMindMap } = require("./AdvancedComponents/mindMap");
+const { addInvoiceTable } = require("./AdvancedComponents/invoiceTable");
+const { addCertificateFrame } = require("./AdvancedComponents/certificateFrame");
+const { addSaaSFeatureBlock } = require("./AdvancedComponents/saasFeatureBlock");
+const { addWinLossChart } = require("./AdvancedComponents/winLossChart");
+
+/* --------------------------------
+   System Features
+--------------------------------- */
+const { renderMarkdown } = require("./system/markdownEngine");
+const { addSyntaxBlock } = require("./system/syntaxHighlighter");
+const { addToTOC, addTableOfContents } = require("./system/tocGenerator");
+const { applyMaster } = require("./system/masterOverlay");
+const { addSmartIcon } = require("./system/smartIcon");
+const { addSmartText } = require("./system/smartText");
+const { jsonToTableData, csvToTableData, jsonToChartData } = require("./system/dataAdapter");
+const { animate } = require("./system/animation");
+const { debugSlide } = require("./system/layoutDebugger");
+const { addSpeakerNotes } = require("./system/speakerNotes");
+const { generateTheme } = require("./system/themeGenerator");
+const { addWatermark } = require("./system/watermark");
+const { addCodeDiff } = require("./components/codeDiff"); // Note: Placed in components as it renders content
+const { addSectionDivider } = require("./system/sectionDivider");
+const { checkContrast } = require("./system/contrastChecker");
+
+/* --------------------------------
+   Public API
+--------------------------------- */
+module.exports = {
+  /* Core */
+  PPTManager,
+
+  /* Components */
+  addSlide,
+  addText,
+  addShape,
+  addImage,
+  addLink,
+  addCard,
+  addTable,
+  addChart,
+  applyTheme,
+  addBrowserWindow,
+  addSocialBar,
+  addProgressBar,
+  addStatMetric,
+  addBadge,
+  addCodeBlock,
+  addTimeline,
+  addAvatarGroup,
+  addTestimonialCard,
+  addAlertBox,
+  addIconList,
+  addPricingColumn,
+  addStepProcess,
+  addComparisonTable,
+  addRatingStars,
+  addBreadcrumbNav,
+  addTagCloud,
+  addKanbanColumn,
+  addCallToAction,
+  addOrganicBlob,
+  addWaveDecoration,
+  addDotPattern,
+  addBrushStroke,
+  addGeometricConfetti,
+  addGradientMesh,
+  addSquiggleLine,
+  addCornerAccent,
+
+  /* Themes */
+  getTheme,
+  registerTheme,
+
+  /* Layouts */
+  createGrid,
+  getSplitScreen,
+  getZPattern,
+  getSidebarLayout,
+  getHeroLayout,
+  getGalleryLayout,
+  
+
+   /* Advanced Components */
+   addFeatureGrid,
+   addTeamMemberProfile,
+   addSWOTMatrix,
+   addProcessCycle,
+   addFunnelDiagram,
+   addPyramidHierarchy,
+   addDeviceMockup,
+   addAccordionList,
+   addTrafficLight,
+   addVennDiagram,
+   getBentoLayout,
+   getRadialLayout,
+   getCheckerboardLayout,
+   getMagazineLayout,
+   getFilmStripLayout,
+   addOrgChart,
+   addCalendarGrid,
+   addGanttChart,
+   addPersonaCard,
+   addMatrixGrid,
+   addMindMap,
+   addInvoiceTable,
+   addCertificateFrame,
+   addSaaSFeatureBlock,
+   addWinLossChart,
+
+   /* System */
+   renderMarkdown,
+   addSyntaxBlock,
+   addToTOC,           // Exported function
+   addTableOfContents, // Exported function
+   applyMaster,
+   addSmartIcon,
+   addSmartText,
+   jsonToTableData,
+   csvToTableData,
+   jsonToChartData,
+   animate,
+   /* Standout Features */
+   debugSlide,
+   addSpeakerNotes,
+   generateTheme,
+   addWatermark,
+   addCodeDiff,
+   addSectionDivider,
+   checkContrast
+};

package/src/layout/bento.js

@@ -0,0 +1,47 @@
+/**
+ * Returns a Bento Box layout with preset slot configurations.
+ * @param {string} variation - 'balanced' | 'feature-left' | 'feature-top'
+ */
+function getBentoLayout(variation = "balanced", options = {}) {
+  const { x = 0.5, y = 0.5, w = 9, h = 4.63, gap = 0.2 } = options;
+
+  // Helper to calculate cell rects
+  const thirdW = (w - 2 * gap) / 3;
+  const halfW = (w - gap) / 2;
+  const halfH = (h - gap) / 2;
+  const fullH = h;
+
+  const layouts = {
+    // 3 columns, equal height logic but varied spans
+    // [  Large  ] [ Small ]
+    // [  Large  ] [ Small ]
+    'feature-left': [
+      { x: x, y: y, w: halfW + thirdW/2, h: fullH }, // Big Left
+      { x: x + halfW + thirdW/2 + gap, y: y, w: thirdW * 0.8, h: halfH }, // Top Right
+      { x: x + halfW + thirdW/2 + gap, y: y + halfH + gap, w: thirdW * 0.8, h: halfH } // Bottom Right
+    ],
+    
+    // [   Wide Top   ]
+    // [ S ] [ S ] [ S ]
+    'feature-top': [
+      { x: x, y: y, w: w, h: halfH }, // Top Wide
+      { x: x, y: y + halfH + gap, w: thirdW, h: halfH }, // Bot Left
+      { x: x + thirdW + gap, y: y + halfH + gap, w: thirdW, h: halfH }, // Bot Mid
+      { x: x + 2*(thirdW + gap), y: y + halfH + gap, w: thirdW, h: halfH } // Bot Right
+    ],
+
+    // 2x2 grid but asymmetrical
+    // [ Square ] [ Rect ]
+    // [ Rect   ] [ Square ]
+    'balanced': [
+      { x: x, y: y, w: thirdW, h: halfH }, 
+      { x: x + thirdW + gap, y: y, w: 2*thirdW + gap, h: halfH },
+      { x: x, y: y + halfH + gap, w: 2*thirdW + gap, h: halfH },
+      { x: x + 2*thirdW + 2*gap, y: y + halfH + gap, w: thirdW, h: halfH } 
+    ]
+  };
+
+  return layouts[variation] || layouts['balanced'];
+}
+
+module.exports = { getBentoLayout };