@veolab/discoverylab 1.3.4 → 1.4.1

package/dist/{gridCompositor-M3K3LCLZ.js → gridCompositor-VUWBZXYL.js}

@@ -1,4 +1,4 @@
-import "./chunk-MLKGABMK.js";
+import "./chunk-4VNS5WPM.js";
 
 // src/core/canvas/gridCompositor.ts
 import { createCanvas, loadImage } from "canvas";
@@ -157,6 +157,62 @@ function calculateCells(layout, canvasWidth, canvasHeight, padding, cellPadding,
       }
       break;
     }
+    case "flow-horizontal": {
+      const arrowGap = 30;
+      const count = Math.min(imageCount, 5);
+      const totalArrowGap = arrowGap * (count - 1);
+      const annotationSpace = 32;
+      const cellWidth = (contentWidth - totalArrowGap) / count;
+      const cellHeight = contentHeight - annotationSpace;
+      for (let i = 0; i < count; i++) {
+        cells.push({
+          x: padding + i * (cellWidth + arrowGap),
+          y: padding,
+          width: cellWidth,
+          height: cellHeight
+        });
+      }
+      break;
+    }
+    case "flow-vertical": {
+      const arrowGap = 30;
+      const count = Math.min(imageCount, 5);
+      const totalArrowGap = arrowGap * (count - 1);
+      const annotationSpace = 28;
+      const cellHeight = (contentHeight - totalArrowGap - annotationSpace * count) / count;
+      for (let i = 0; i < count; i++) {
+        const yOffset = i * (cellHeight + arrowGap + annotationSpace);
+        cells.push({
+          x: padding + contentWidth * 0.15,
+          y: padding + yOffset,
+          width: contentWidth * 0.7,
+          height: cellHeight
+        });
+      }
+      break;
+    }
+    case "infographic": {
+      const headerH = contentHeight * 0.08;
+      const footerH = contentHeight * 0.06;
+      const annotationH = 28;
+      const bodyH = contentHeight - headerH - footerH;
+      const count = Math.min(imageCount, 6);
+      const cols = count <= 2 ? count : count <= 4 ? 2 : 3;
+      const rows = Math.ceil(count / cols);
+      const cellW = (contentWidth - cellPadding * (cols - 1)) / cols;
+      const cellH = (bodyH - cellPadding * (rows - 1) - annotationH * rows) / rows;
+      for (let i = 0; i < count; i++) {
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        cells.push({
+          x: padding + col * (cellW + cellPadding),
+          y: padding + headerH + row * (cellH + cellPadding + annotationH),
+          width: cellW,
+          height: cellH
+        });
+      }
+      break;
+    }
     default:
       cells.push({
         x: padding,
@@ -290,6 +346,205 @@ function drawImageInCell(ctx, image, cell, cornerRadius, imageFit = "cover", sha
   );
   ctx.restore();
 }
+function drawStepBadge(ctx, cell, stepNumber, scale = 1) {
+  const h = 20 * scale;
+  const w = 20 * scale;
+  const x = cell.x - 2 * scale;
+  const y = cell.y - 2 * scale;
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(x + w / 2, y + h / 2, w / 2 + 1 * scale, 0, Math.PI * 2);
+  ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(x + w / 2, y + h / 2, w / 2, 0, Math.PI * 2);
+  ctx.fillStyle = "#6366f1";
+  ctx.fill();
+  ctx.fillStyle = "#fff";
+  ctx.font = `bold ${11 * scale}px -apple-system, BlinkMacSystemFont, sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(String(stepNumber), x + w / 2, y + h / 2 + 0.5 * scale);
+  ctx.restore();
+}
+function drawFlowArrow(ctx, fromCell, toCell, direction, scale = 1) {
+  ctx.save();
+  const arrowSize = 6 * scale;
+  const lineColor = "rgba(255, 255, 255, 0.3)";
+  if (direction === "right") {
+    const startX = fromCell.x + fromCell.width + 2 * scale;
+    const endX = toCell.x - 2 * scale;
+    const y = fromCell.y + fromCell.height / 2;
+    const midX = (startX + endX) / 2;
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = 1.5 * scale;
+    ctx.setLineDash([4 * scale, 3 * scale]);
+    ctx.beginPath();
+    ctx.moveTo(startX, y);
+    ctx.lineTo(endX - arrowSize, y);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
+    ctx.lineWidth = 2 * scale;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(endX - arrowSize, y - arrowSize);
+    ctx.lineTo(endX, y);
+    ctx.lineTo(endX - arrowSize, y + arrowSize);
+    ctx.stroke();
+  } else {
+    const x = fromCell.x + fromCell.width / 2;
+    const startY = fromCell.y + fromCell.height + 2 * scale;
+    const endY = toCell.y - 2 * scale;
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = 1.5 * scale;
+    ctx.setLineDash([4 * scale, 3 * scale]);
+    ctx.beginPath();
+    ctx.moveTo(x, startY);
+    ctx.lineTo(x, endY - arrowSize);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
+    ctx.lineWidth = 2 * scale;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - arrowSize, endY - arrowSize);
+    ctx.lineTo(x, endY);
+    ctx.lineTo(x + arrowSize, endY - arrowSize);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function drawAnnotation(ctx, cell, text, position, scale = 1) {
+  ctx.save();
+  const fontSize = 11 * scale;
+  ctx.font = `500 ${fontSize}px -apple-system, BlinkMacSystemFont, sans-serif`;
+  ctx.textAlign = "center";
+  const maxWidth = cell.width + 20 * scale;
+  let displayText = text;
+  if (ctx.measureText(text).width > maxWidth) {
+    while (ctx.measureText(displayText + "...").width > maxWidth && displayText.length > 0) {
+      displayText = displayText.slice(0, -1);
+    }
+    displayText += "...";
+  }
+  const textWidth = ctx.measureText(displayText).width;
+  const cx = cell.x + cell.width / 2;
+  const cy = position === "below" ? cell.y + cell.height + 14 * scale : cell.y - 10 * scale;
+  const pillPadX = 8 * scale;
+  const pillPadY = 3 * scale;
+  const pillW = textWidth + pillPadX * 2;
+  const pillH = fontSize + pillPadY * 2;
+  ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+  drawRoundedRect(ctx, cx - pillW / 2, cy - pillH / 2, pillW, pillH, pillH / 2);
+  ctx.fill();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
+  ctx.textBaseline = "middle";
+  ctx.fillText(displayText, cx, cy);
+  ctx.restore();
+}
+function drawInfoHeader(ctx, title, subtitle, canvasWidth, padding, headerHeight, scale = 1) {
+  ctx.save();
+  ctx.fillStyle = "#ffffff";
+  ctx.font = `bold ${20 * scale}px -apple-system, BlinkMacSystemFont, sans-serif`;
+  ctx.textBaseline = "top";
+  ctx.fillText(title, padding, padding + 6 * scale);
+  const titleWidth = Math.min(ctx.measureText(title).width, canvasWidth * 0.3);
+  ctx.strokeStyle = "rgba(99, 102, 241, 0.5)";
+  ctx.lineWidth = 2 * scale;
+  ctx.beginPath();
+  ctx.moveTo(padding, padding + 30 * scale);
+  ctx.lineTo(padding + titleWidth, padding + 30 * scale);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawInfoFooter(ctx, text, canvasWidth, canvasHeight, padding, scale = 1) {
+  ctx.save();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
+  ctx.font = `${10 * scale}px -apple-system, BlinkMacSystemFont, sans-serif`;
+  ctx.textAlign = "right";
+  ctx.textBaseline = "bottom";
+  ctx.fillText(text, canvasWidth - padding, canvasHeight - padding / 2);
+  ctx.restore();
+}
+async function composeInfographic(images, config, outputPath) {
+  const gridConfig = {
+    layout: config.layout,
+    aspectRatio: config.aspectRatio || (config.layout === "flow-horizontal" ? "16:9" : "9:16"),
+    background: config.background || {
+      type: "gradient",
+      gradientStart: "#0f0f23",
+      gradientEnd: "#1a1a3e",
+      gradientAngle: 160
+    },
+    outputWidth: config.outputWidth || 1920,
+    padding: 60,
+    cellPadding: 20,
+    cornerRadius: 12,
+    shadowEnabled: true,
+    shadowBlur: 16,
+    imageFit: "contain"
+  };
+  const cfg = { ...DEFAULT_CONFIG, ...gridConfig };
+  const aspectDef = ASPECT_RATIOS[cfg.aspectRatio];
+  const scale = cfg.outputWidth / aspectDef.width;
+  const canvasWidth = Math.round(aspectDef.width * scale);
+  const canvasHeight = Math.round(aspectDef.height * scale);
+  const canvas = createCanvas(canvasWidth, canvasHeight);
+  const ctx = canvas.getContext("2d");
+  let bgImage;
+  if (cfg.background.type === "image" && cfg.background.imagePath && existsSync(cfg.background.imagePath)) {
+    bgImage = await loadImage(cfg.background.imagePath);
+  }
+  drawBackground(ctx, canvasWidth, canvasHeight, cfg.background, bgImage);
+  if (cfg.background.type === "image" && bgImage) {
+    ctx.save();
+    ctx.fillStyle = "rgba(0, 0, 0, 0.55)";
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    ctx.restore();
+  }
+  const headerHeight = canvasHeight * 0.12;
+  if (config.layout === "infographic") {
+    drawInfoHeader(ctx, config.title, config.subtitle || "", canvasWidth, cfg.padding, headerHeight, scale);
+  }
+  const cells = calculateCells(cfg.layout, canvasWidth, canvasHeight, cfg.padding, cfg.cellPadding, images.length);
+  for (let i = 0; i < Math.min(images.length, cells.length); i++) {
+    const cell = cells[i];
+    const imageCell = images[i];
+    if (!existsSync(imageCell.imagePath)) continue;
+    const image = await loadImage(imageCell.imagePath);
+    if (cfg.shadowEnabled && cfg.imageFit === "cover") {
+      drawShadow(ctx, cell.x, cell.y, cell.width, cell.height, cfg.cornerRadius, cfg.shadowBlur);
+    }
+    drawImageInCell(ctx, image, cell, cfg.cornerRadius, cfg.imageFit, cfg.shadowEnabled, cfg.shadowBlur);
+    if (imageCell.stepNumber !== void 0) {
+      drawStepBadge(ctx, cell, imageCell.stepNumber, scale);
+    }
+    if (imageCell.annotation) {
+      drawAnnotation(ctx, cell, imageCell.annotation, "below", scale);
+    }
+    if (imageCell.flowArrow && imageCell.flowArrow !== "none" && i < cells.length - 1) {
+      drawFlowArrow(ctx, cell, cells[i + 1], imageCell.flowArrow, scale);
+    }
+  }
+  if (config.footerText || config.layout === "infographic") {
+    const footerText = config.footerText || `Generated by DiscoveryLab \u2022 ${images.length} screens`;
+    drawInfoFooter(ctx, footerText, canvasWidth, canvasHeight, cfg.padding, scale);
+  }
+  try {
+    const buffer = canvas.toBuffer("image/png");
+    const outputDir = outputPath.substring(0, outputPath.lastIndexOf("/"));
+    if (outputDir && !existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+    writeFileSync(outputPath, buffer);
+    return { success: true, outputPath, width: canvasWidth, height: canvasHeight };
+  } catch (error) {
+    return { success: false, error: error instanceof Error ? error.message : "Infographic export failed" };
+  }
+}
 async function composeGrid(images, config = {}, outputPath) {
   try {
     const cfg = { ...DEFAULT_CONFIG, ...config };
@@ -363,12 +618,15 @@ function getLayoutInfo(layout) {
     "featured": { name: "Featured", maxImages: 3, description: "One large + two small" },
     "masonry": { name: "Masonry", maxImages: 6, description: "Pinterest-style columns" },
     "carousel": { name: "Carousel", maxImages: 3, description: "Overlapping cards" },
-    "stacked": { name: "3D Stack", maxImages: 4, description: "Perspective stack effect" }
+    "stacked": { name: "3D Stack", maxImages: 4, description: "Perspective stack effect" },
+    "flow-horizontal": { name: "Flow \u2192", maxImages: 5, description: "Steps left to right with arrows" },
+    "flow-vertical": { name: "Flow \u2193", maxImages: 5, description: "Steps top to bottom with arrows" },
+    "infographic": { name: "Infographic", maxImages: 6, description: "Magazine-style with header" }
   };
   return layouts[layout];
 }
 function getAllLayouts() {
-  return ["single", "duo-h", "duo-v", "trio-h", "trio-v", "quad", "featured", "masonry", "carousel", "stacked"];
+  return ["single", "duo-h", "duo-v", "trio-h", "trio-v", "quad", "featured", "masonry", "carousel", "stacked", "flow-horizontal", "flow-vertical", "infographic"];
 }
 function getAvailableBackgrounds(backgroundsDir) {
   if (!existsSync(backgroundsDir)) {
@@ -402,6 +660,7 @@ export {
   PRESET_GRADIENTS,
   PRESET_SOLID_COLORS,
   composeGrid,
+  composeInfographic,
   getAllLayouts,
   getAvailableBackgrounds,
   getLayoutInfo,

package/dist/index.d.ts

@@ -382,6 +382,38 @@ declare const projects: drizzle_orm_sqlite_core.SQLiteTableWithColumns<{
             baseColumn: never;
             generated: undefined;
         }, object>;
+        marketingTitle: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "marketing_title";
+            tableName: "projects";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            generated: undefined;
+        }, object>;
+        marketingDescription: drizzle_orm_sqlite_core.SQLiteColumn<{
+            name: "marketing_description";
+            tableName: "projects";
+            dataType: "string";
+            columnType: "SQLiteText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            generated: undefined;
+        }, object>;
         status: drizzle_orm_sqlite_core.SQLiteColumn<{
             name: "status";
             tableName: "projects";