@umituz/web-canvas 1.0.4 → 1.0.6

package/dist/application/index.js

@@ -1,1146 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/application/index.ts
-var application_exports = {};
-__export(application_exports, {
-  ReportService: () => ReportService,
-  ScreenshotStudioService: () => ScreenshotStudioService
-});
-module.exports = __toCommonJS(application_exports);
-
-// src/domain/config/ScreenshotStudioConfig.ts
-var DEFAULT_SCREENSHOT_STUDIO_CONFIG = {
-  canvas: {
-    defaultFormat: "png",
-    defaultQuality: 0.9,
-    scale: 2,
-    useCORS: true
-  },
-  device: {
-    devices: ["iphone-15-pro"],
-    defaultDevice: "iphone-15-pro",
-    showFrame: true,
-    frameColor: "#1f2937",
-    frameThickness: 8
-  },
-  export: {
-    includeMetadata: true,
-    folderStructure: "by-language",
-    defaultFormat: "png"
-  },
-  ai: {
-    enabled: true,
-    provider: "gemini"
-  },
-  languages: ["en-US", "tr-TR", "de-DE", "fr-FR", "es-ES", "ja-JP"],
-  defaultLanguage: "en-US"
-};
-
-// src/domain/config/CanvasConfig.ts
-var DEFAULT_CANVAS_CONFIG = {
-  defaultFormat: "png",
-  defaultQuality: 0.9,
-  maxDimension: 4096,
-  scale: 2,
-  backgroundColor: "#ffffff",
-  useCORS: true
-};
-
-// src/infrastructure/renderers/CanvasRenderer.ts
-var CanvasRenderer = class {
-  constructor(config = DEFAULT_CANVAS_CONFIG) {
-    this.config = { ...DEFAULT_CANVAS_CONFIG, ...config };
-    this.imageCache = /* @__PURE__ */ new Map();
-  }
-  /**
-   * Create a new canvas element
-   */
-  createCanvas(dimensions) {
-    const canvas = document.createElement("canvas");
-    canvas.width = dimensions.width;
-    canvas.height = dimensions.height;
-    return canvas;
-  }
-  /**
-   * Get canvas 2D context
-   */
-  getContext(canvas) {
-    return canvas.getContext("2d");
-  }
-  /**
-   * Apply context configuration
-   */
-  configureContext(ctx, config) {
-    if (config.fillStyle !== void 0) {
-      ctx.fillStyle = config.fillStyle;
-    }
-    if (config.strokeStyle !== void 0) {
-      ctx.strokeStyle = config.strokeStyle;
-    }
-    if (config.lineWidth !== void 0) {
-      ctx.lineWidth = config.lineWidth;
-    }
-    if (config.lineCap !== void 0) {
-      ctx.lineCap = config.lineCap;
-    }
-    if (config.lineJoin !== void 0) {
-      ctx.lineJoin = config.lineJoin;
-    }
-    if (config.globalAlpha !== void 0) {
-      ctx.globalAlpha = config.globalAlpha;
-    }
-    if (config.font !== void 0) {
-      ctx.font = config.font;
-    }
-    if (config.textAlign !== void 0) {
-      ctx.textAlign = config.textAlign;
-    }
-    if (config.textBaseline !== void 0) {
-      ctx.textBaseline = config.textBaseline;
-    }
-  }
-  /**
-   * Clear canvas
-   */
-  clearCanvas(ctx, dimensions) {
-    ctx.clearRect(0, 0, dimensions.width, dimensions.height);
-  }
-  /**
-   * Fill rectangle
-   */
-  fillRect(ctx, x, y, width, height, color) {
-    if (color) {
-      ctx.fillStyle = color;
-    }
-    ctx.fillRect(x, y, width, height);
-  }
-  /**
-   * Stroke rectangle
-   */
-  strokeRect(ctx, x, y, width, height, color, lineWidth) {
-    if (color) {
-      ctx.strokeStyle = color;
-    }
-    if (lineWidth !== void 0) {
-      ctx.lineWidth = lineWidth;
-    }
-    ctx.strokeRect(x, y, width, height);
-  }
-  /**
-   * Draw text
-   */
-  drawText(ctx, text, x, y, config) {
-    if (config) {
-      this.configureContext(ctx, config);
-    }
-    ctx.fillText(text, x, y);
-  }
-  /**
-   * Draw image
-   */
-  async drawImage(ctx, imageSource, x, y, width, height) {
-    let img;
-    if (typeof imageSource === "string") {
-      img = await this.loadImage(imageSource);
-    } else {
-      img = imageSource;
-    }
-    if (width && height) {
-      ctx.drawImage(img, x, y, width, height);
-    } else {
-      ctx.drawImage(img, x, y);
-    }
-  }
-  /**
-   * Load image from URL with caching
-   */
-  loadImage(url) {
-    if (this.imageCache.has(url)) {
-      return Promise.resolve(this.imageCache.get(url));
-    }
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      if (this.config.useCORS) {
-        img.crossOrigin = "anonymous";
-      }
-      img.onload = () => {
-        this.imageCache.set(url, img);
-        resolve(img);
-      };
-      img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
-      img.src = url;
-    });
-  }
-  /**
-   * Clear image cache to free memory
-   */
-  clearImageCache() {
-    this.imageCache.clear();
-  }
-  /**
-   * Get cache size for monitoring
-   */
-  getCacheSize() {
-    return this.imageCache.size;
-  }
-  /**
-   * Create gradient
-   */
-  createLinearGradient(ctx, x1, y1, x2, y2, colorStops) {
-    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
-    colorStops.forEach(({ offset, color }) => {
-      gradient.addColorStop(offset, color);
-    });
-    return gradient;
-  }
-  /**
-   * Export canvas to blob
-   */
-  async exportToBlob(canvas, options = {}) {
-    const format = options.format || this.config.defaultFormat;
-    const quality = options.quality || this.config.defaultQuality;
-    const scale = options.scale || this.config.scale;
-    const scaledCanvas = (scale || 1) !== 1 ? this.scaleCanvas(canvas, scale || 1) : canvas;
-    const mimeType = `image/${format || "png"}`;
-    const blob = await new Promise((resolve) => {
-      scaledCanvas.toBlob(
-        (result) => resolve(result),
-        mimeType,
-        quality
-      );
-    });
-    if (!blob) {
-      throw new Error("Failed to export canvas to blob");
-    }
-    const url = URL.createObjectURL(blob);
-    return {
-      blob,
-      url,
-      dimensions: {
-        width: scaledCanvas.width,
-        height: scaledCanvas.height
-      },
-      format: format || "png",
-      size: blob.size
-    };
-  }
-  /**
-   * Export canvas to data URL
-   */
-  exportToDataURL(canvas, format, quality) {
-    const mimeType = format || `image/${this.config.defaultFormat}`;
-    const q = quality || this.config.defaultQuality;
-    return canvas.toDataURL(mimeType, q);
-  }
-  /**
-   * Scale canvas
-   */
-  scaleCanvas(canvas, scale) {
-    const scaled = document.createElement("canvas");
-    scaled.width = canvas.width * scale;
-    scaled.height = canvas.height * scale;
-    const ctx = scaled.getContext("2d");
-    if (ctx) {
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(canvas, 0, 0, scaled.width, scaled.height);
-    }
-    return scaled;
-  }
-  /**
-   * Clone canvas
-   */
-  cloneCanvas(canvas) {
-    const clone = document.createElement("canvas");
-    clone.width = canvas.width;
-    clone.height = canvas.height;
-    const ctx = clone.getContext("2d");
-    if (ctx) {
-      ctx.drawImage(canvas, 0, 0);
-    }
-    return clone;
-  }
-};
-
-// src/infrastructure/renderers/PatternRenderer.ts
-var PatternRenderer = class {
-  constructor() {
-    this.patternCanvasCache = /* @__PURE__ */ new Map();
-    this.MAX_CACHE_SIZE = 10;
-  }
-  /**
-   * Render pattern on canvas
-   */
-  renderPattern(ctx, pattern, dimensions, color = "#000000") {
-    if (pattern === "none") return;
-    ctx.save();
-    ctx.globalAlpha = 0.1;
-    switch (pattern) {
-      case "dots":
-        this.renderDotPattern(ctx, dimensions, color);
-        break;
-      case "grid":
-        this.renderGridPattern(ctx, dimensions, color);
-        break;
-      case "lines":
-        this.renderLinePattern(ctx, dimensions, color);
-        break;
-      case "waves":
-        this.renderWavePattern(ctx, dimensions, color);
-        break;
-      case "checkers":
-        this.renderCheckerPattern(ctx, dimensions, color);
-        break;
-    }
-    ctx.restore();
-  }
-  /**
-   * Clear pattern cache to free memory
-   */
-  clearCache() {
-    this.patternCanvasCache.clear();
-  }
-  /**
-   * Render dot pattern - optimized with batch rendering
-   */
-  renderDotPattern(ctx, dimensions, color) {
-    ctx.fillStyle = color;
-    const spacing = 30;
-    const radius = 2;
-    ctx.beginPath();
-    for (let x = spacing; x < dimensions.width; x += spacing) {
-      for (let y = spacing; y < dimensions.height; y += spacing) {
-        ctx.moveTo(x + radius, y);
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-      }
-    }
-    ctx.fill();
-  }
-  /**
-   * Render grid pattern - optimized with single path
-   */
-  renderGridPattern(ctx, dimensions, color) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
-    const spacing = 30;
-    ctx.beginPath();
-    for (let x = 0; x <= dimensions.width; x += spacing) {
-      ctx.moveTo(x, 0);
-      ctx.lineTo(x, dimensions.height);
-    }
-    for (let y = 0; y <= dimensions.height; y += spacing) {
-      ctx.moveTo(0, y);
-      ctx.lineTo(dimensions.width, y);
-    }
-    ctx.stroke();
-  }
-  /**
-   * Render line pattern - optimized with single path
-   */
-  renderLinePattern(ctx, dimensions, color) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    const spacing = 20;
-    ctx.beginPath();
-    for (let y = spacing; y < dimensions.height; y += spacing) {
-      ctx.moveTo(0, y);
-      ctx.lineTo(dimensions.width, y);
-    }
-    ctx.stroke();
-  }
-  /**
-   * Render wave pattern - optimized with pre-calculated values
-   */
-  renderWavePattern(ctx, dimensions, color) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    const amplitude = 10;
-    const frequency = 0.1;
-    const spacing = 40;
-    const step = 5;
-    for (let y = spacing; y < dimensions.height; y += spacing) {
-      ctx.beginPath();
-      const startX = 0;
-      const startY = y + Math.sin(startX * frequency) * amplitude;
-      ctx.moveTo(startX, startY);
-      for (let x = step; x <= dimensions.width; x += step) {
-        const waveY = y + Math.sin(x * frequency) * amplitude;
-        ctx.lineTo(x, waveY);
-      }
-      ctx.stroke();
-    }
-  }
-  /**
-   * Render checker pattern
-   */
-  renderCheckerPattern(ctx, dimensions, color) {
-    ctx.fillStyle = color;
-    const size = 20;
-    for (let x = 0; x < dimensions.width; x += size * 2) {
-      for (let y = 0; y < dimensions.height; y += size * 2) {
-        ctx.fillRect(x, y, size, size);
-        ctx.fillRect(x + size, y + size, size, size);
-      }
-    }
-  }
-};
-
-// src/domain/config/DeviceConfig.ts
-var DEVICE_DIMENSIONS = {
-  "iphone-15-pro": { width: 1290, height: 2796 },
-  "iphone-15": { width: 1179, height: 2556 },
-  "iphone-se": { width: 1080, height: 2340 },
-  "ipad-pro": { width: 2048, height: 2732 },
-  "ipad": { width: 1620, height: 2160 },
-  "android-phone": { width: 1440, height: 3120 },
-  "android-tablet": { width: 2e3, height: 2200 },
-  "desktop": { width: 1920, height: 1080 }
-};
-var DEFAULT_DEVICE_CONFIG = {
-  devices: Object.keys(DEVICE_DIMENSIONS),
-  defaultDevice: "iphone-15-pro",
-  showFrame: true,
-  frameColor: "#1f2937",
-  frameThickness: 8
-};
-
-// src/infrastructure/services/DeviceConfigService.ts
-var DeviceConfigService = class _DeviceConfigService {
-  constructor() {
-    this.phonesCache = null;
-    this.tabletsCache = null;
-    this.allDevicesCache = null;
-    this.devices = /* @__PURE__ */ new Map();
-    this.initializeDevices();
-  }
-  static getInstance() {
-    if (!_DeviceConfigService.instance) {
-      _DeviceConfigService.instance = new _DeviceConfigService();
-    }
-    return _DeviceConfigService.instance;
-  }
-  initializeDevices() {
-    const deviceConfigs = [
-      {
-        name: "iPhone 15 Pro",
-        dimensions: { width: 1290, height: 2796, scale: 3 },
-        isPhone: true,
-        hasNotch: true,
-        cornerRadius: 20,
-        frameThickness: 8
-      },
-      {
-        name: "iPhone 15",
-        dimensions: { width: 1179, height: 2556, scale: 3 },
-        isPhone: true,
-        hasNotch: true,
-        cornerRadius: 20,
-        frameThickness: 8
-      },
-      {
-        name: "iPhone SE",
-        dimensions: { width: 1080, height: 2340, scale: 3 },
-        isPhone: true,
-        hasNotch: false,
-        cornerRadius: 16,
-        frameThickness: 6
-      },
-      {
-        name: "iPad Pro",
-        dimensions: { width: 2048, height: 2732, scale: 2 },
-        isTablet: true,
-        hasNotch: false,
-        cornerRadius: 24,
-        frameThickness: 10
-      },
-      {
-        name: "iPad",
-        dimensions: { width: 1620, height: 2160, scale: 2 },
-        isTablet: true,
-        hasNotch: false,
-        cornerRadius: 20,
-        frameThickness: 10
-      },
-      {
-        name: "Android Phone",
-        dimensions: { width: 1440, height: 3120, scale: 3 },
-        isPhone: true,
-        hasNotch: false,
-        cornerRadius: 24,
-        frameThickness: 8
-      },
-      {
-        name: "Android Tablet",
-        dimensions: { width: 2e3, height: 2200, scale: 2 },
-        isTablet: true,
-        hasNotch: false,
-        cornerRadius: 24,
-        frameThickness: 10
-      },
-      {
-        name: "Desktop",
-        dimensions: { width: 1920, height: 1080, scale: 1 },
-        isPhone: false,
-        isTablet: false,
-        hasNotch: false,
-        cornerRadius: 0,
-        frameThickness: 0
-      }
-    ];
-    Object.entries(DEVICE_DIMENSIONS).forEach(([type, dimensions]) => {
-      const deviceType = type;
-      const config = deviceConfigs.find((_, index) => {
-        const types = Object.keys(DEVICE_DIMENSIONS);
-        return types[index] === type;
-      });
-      if (config) {
-        this.devices.set(deviceType, {
-          type: deviceType,
-          ...config,
-          dimensions
-        });
-      }
-    });
-  }
-  getDeviceConfig(deviceType) {
-    return this.devices.get(deviceType);
-  }
-  getAllDevices() {
-    if (!this.allDevicesCache) {
-      this.allDevicesCache = Array.from(this.devices.values());
-    }
-    return this.allDevicesCache;
-  }
-  getPhones() {
-    if (!this.phonesCache) {
-      this.phonesCache = this.getAllDevices().filter((d) => d.isPhone);
-    }
-    return this.phonesCache;
-  }
-  getTablets() {
-    if (!this.tabletsCache) {
-      this.tabletsCache = this.getAllDevices().filter((d) => d.isTablet);
-    }
-    return this.tabletsCache;
-  }
-  isPhone(deviceType) {
-    const config = this.getDeviceConfig(deviceType);
-    return config?.isPhone || false;
-  }
-  isTablet(deviceType) {
-    const config = this.getDeviceConfig(deviceType);
-    return config?.isTablet || false;
-  }
-  hasNotch(deviceType) {
-    const config = this.getDeviceConfig(deviceType);
-    return config?.hasNotch || false;
-  }
-};
-
-// src/infrastructure/renderers/ScreenshotRenderer.ts
-var ScreenshotRenderer = class {
-  constructor() {
-    this.renderCache = /* @__PURE__ */ new Map();
-    this.MAX_CACHE_SIZE = 5;
-    this.canvasRenderer = new CanvasRenderer();
-    this.patternRenderer = new PatternRenderer();
-    this.deviceConfigService = DeviceConfigService.getInstance();
-  }
-  /**
-   * Clear render cache to free memory
-   */
-  clearCache() {
-    this.renderCache.clear();
-    this.canvasRenderer.clearImageCache?.();
-    this.patternRenderer.clearCache?.();
-  }
-  /**
-   * Render device frame
-   */
-  renderDeviceFrame(ctx, dimensions, deviceType, frameStyle, frameColor) {
-    const deviceConfig = this.deviceConfigService.getDeviceConfig(deviceType);
-    if (!deviceConfig) return;
-    if (frameStyle === "none") return;
-    const isPhone = this.deviceConfigService.isPhone(deviceType);
-    const isTablet = this.deviceConfigService.isTablet(deviceType);
-    if (!isPhone && !isTablet) return;
-    const frameThickness = deviceConfig.frameThickness || 8;
-    if (frameStyle === "realistic") {
-      this.renderRealisticFrame(ctx, dimensions, frameColor, frameThickness);
-      if (isPhone && this.deviceConfigService.hasNotch(deviceType)) {
-        this.renderNotch(ctx, dimensions);
-      }
-    } else if (frameStyle === "minimal") {
-      this.renderMinimalFrame(ctx, dimensions, frameColor, frameThickness);
-    }
-  }
-  /**
-   * Render realistic device frame
-   */
-  renderRealisticFrame(ctx, dimensions, color, thickness) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = thickness;
-    ctx.strokeRect(
-      thickness / 2,
-      thickness / 2,
-      dimensions.width - thickness,
-      dimensions.height - thickness
-    );
-  }
-  /**
-   * Render minimal device frame
-   */
-  renderMinimalFrame(ctx, dimensions, color, thickness) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = thickness;
-    ctx.strokeRect(0, 0, dimensions.width, dimensions.height);
-  }
-  /**
-   * Render device notch
-   */
-  renderNotch(ctx, dimensions) {
-    ctx.fillStyle = "#1f2937";
-    ctx.beginPath();
-    ctx.arc(dimensions.width / 2, 20, 10, 0, Math.PI * 2);
-    ctx.fill();
-  }
-  /**
-   * Render background - optimized
-   */
-  renderBackground(ctx, design, dimensions) {
-    if (design.backgroundGradientEnd) {
-      const gradient = this.canvasRenderer.createLinearGradient(
-        ctx,
-        0,
-        0,
-        dimensions.width,
-        dimensions.height,
-        [
-          { offset: 0, color: design.backgroundColor },
-          { offset: 1, color: design.backgroundGradientEnd }
-        ]
-      );
-      ctx.fillStyle = gradient;
-    } else {
-      ctx.fillStyle = design.backgroundColor;
-    }
-    ctx.fillRect(0, 0, dimensions.width, dimensions.height);
-    if (design.backgroundPattern && design.backgroundPattern !== "none") {
-      this.patternRenderer.renderPattern(
-        ctx,
-        design.backgroundPattern,
-        dimensions
-      );
-    }
-  }
-  /**
-   * Render text content
-   */
-  renderTextContent(ctx, content, design, dimensions) {
-    const titleConfig = {
-      fillStyle: design.textColor,
-      font: `bold ${design.titleFontSize}px ${design.fontFamily}`,
-      textAlign: design.textAlign
-    };
-    const subtitleConfig = {
-      fillStyle: design.textColor,
-      font: `${design.subtitleFontSize}px ${design.fontFamily}`,
-      textAlign: design.textAlign
-    };
-    const titleY = design.layout === "text-bottom" ? dimensions.height - 150 : 100 + (design.offsetY || 0);
-    this.canvasRenderer.drawText(
-      ctx,
-      this.formatText(content.title, design.textCase),
-      dimensions.width / 2,
-      titleY,
-      titleConfig
-    );
-    const subtitleY = titleY + design.titleFontSize + (design.gap || 20);
-    this.canvasRenderer.drawText(
-      ctx,
-      this.formatText(content.subtitle, design.textCase),
-      dimensions.width / 2,
-      subtitleY,
-      subtitleConfig
-    );
-  }
-  /**
-   * Format text case
-   */
-  formatText(text, textCase = "none") {
-    switch (textCase) {
-      case "uppercase":
-        return text.toUpperCase();
-      case "lowercase":
-        return text.toLowerCase();
-      default:
-        return text;
-    }
-  }
-  /**
-   * Render screenshot image
-   */
-  async renderScreenshotImage(ctx, imageUrl, design, dimensions) {
-    if (!imageUrl) return;
-    const deviceConfig = this.deviceConfigService.getDeviceConfig(
-      design.deviceType
-    );
-    if (!deviceConfig) return;
-    const frameThickness = deviceConfig.frameThickness || 8;
-    const padding = 60 + frameThickness;
-    const screenshotWidth = dimensions.width - padding * 2;
-    const screenshotHeight = dimensions.height - padding * 2;
-    try {
-      await this.canvasRenderer.drawImage(
-        ctx,
-        imageUrl,
-        padding,
-        padding,
-        screenshotWidth,
-        screenshotHeight
-      );
-    } catch (error) {
-      console.error("Failed to render screenshot image:", error);
-    }
-  }
-  /**
-   * Render complete screenshot
-   */
-  async renderDesignedScreenshot(content, design) {
-    const deviceConfig = this.deviceConfigService.getDeviceConfig(design.deviceType);
-    if (!deviceConfig) {
-      throw new Error(`Device config not found: ${design.deviceType}`);
-    }
-    const dimensions = deviceConfig.dimensions;
-    const canvas = this.canvasRenderer.createCanvas(dimensions);
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to get canvas context");
-    }
-    this.renderBackground(ctx, design, dimensions);
-    if (content.screenshot) {
-      await this.renderScreenshotImage(ctx, content.screenshot, design, dimensions);
-    }
-    this.renderTextContent(ctx, content, design, dimensions);
-    this.renderDeviceFrame(
-      ctx,
-      dimensions,
-      design.deviceType,
-      design.frameStyle,
-      design.deviceColor
-    );
-    return canvas;
-  }
-  /**
-   * Render placeholder content
-   */
-  renderPlaceholderContent(ctx, dimensions, deviceType) {
-    this.canvasRenderer.fillRect(ctx, 0, 0, dimensions.width, dimensions.height, "#ffffff");
-    this.canvasRenderer.fillRect(ctx, 0, 0, dimensions.width, 60, "#f3f4f6");
-    this.canvasRenderer.fillRect(
-      ctx,
-      0,
-      dimensions.height - 80,
-      dimensions.width,
-      80,
-      "#f3f4f6"
-    );
-    ctx.fillStyle = "#e5e7eb";
-    for (let i = 0; i < 5; i++) {
-      const y = 80 + i * 120;
-      const height = Math.min(100, dimensions.height - y - 100);
-      if (y < dimensions.height - 100) {
-        this.canvasRenderer.fillRect(ctx, 20, y, dimensions.width - 40, height);
-      }
-    }
-    const deviceConfig = this.deviceConfigService.getDeviceConfig(deviceType);
-    if (deviceConfig) {
-      this.renderDeviceFrame(
-        ctx,
-        dimensions,
-        deviceType,
-        "realistic",
-        "#1f2937"
-      );
-    }
-  }
-};
-
-// src/application/services/ScreenshotStudioService.ts
-var ScreenshotStudioService = class {
-  constructor(config) {
-    this.config = {
-      ...DEFAULT_SCREENSHOT_STUDIO_CONFIG,
-      ...config
-    };
-    this.renderer = new ScreenshotRenderer();
-  }
-  /**
-   * Generate screenshot
-   */
-  async generateScreenshot(options) {
-    const deviceConfig = this.config.device?.devices.find(
-      (d) => d === options.deviceType
-    );
-    if (!deviceConfig) {
-      throw new Error(`Device configuration not found for ${options.deviceType}`);
-    }
-    const canvas = this.renderer["canvasRenderer"].createCanvas(
-      options.customDimensions || { width: 1290, height: 2796 }
-    );
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to get canvas context");
-    }
-    this.renderer["renderPlaceholderContent"](
-      ctx,
-      { width: canvas.width, height: canvas.height },
-      options.deviceType
-    );
-    const blob = await this.renderer["canvasRenderer"].exportToBlob(canvas, {
-      format: options.format || this.config.export?.defaultFormat || "png",
-      quality: options.quality || this.config.canvas?.defaultQuality || 0.9
-    });
-    return {
-      id: this.generateId(),
-      deviceType: options.deviceType,
-      dimensions: { width: canvas.width, height: canvas.height },
-      format: options.format || this.config.export?.defaultFormat || "png",
-      timestamp: /* @__PURE__ */ new Date(),
-      fileSize: blob.blob.size,
-      url: blob.url
-    };
-  }
-  /**
-   * Generate batch screenshots
-   */
-  async generateBatchScreenshots(deviceTypes) {
-    const BATCH_SIZE = 3;
-    const results = [];
-    for (let i = 0; i < deviceTypes.length; i += BATCH_SIZE) {
-      const batch = deviceTypes.slice(i, i + BATCH_SIZE);
-      const batchPromises = batch.map(
-        (deviceType) => this.generateScreenshot({ deviceType })
-      );
-      const batchResults = await Promise.all(batchPromises);
-      results.push(...batchResults);
-    }
-    return results;
-  }
-  /**
-   * Generate designed screenshot
-   */
-  async generateDesignedScreenshot(content, design) {
-    const canvas = await this.renderer.renderDesignedScreenshot(content, design);
-    const blob = await this.renderer["canvasRenderer"].exportToBlob(canvas, {
-      format: "png"
-    });
-    return {
-      id: this.generateId(),
-      deviceType: design.deviceType,
-      dimensions: { width: canvas.width, height: canvas.height },
-      format: "png",
-      timestamp: /* @__PURE__ */ new Date(),
-      fileSize: blob.blob.size,
-      url: blob.url
-    };
-  }
-  /**
-   * Export project as ZIP
-   */
-  async exportProjectAsZip(project) {
-    const JSZip = (await import("jszip")).default;
-    const zip = new JSZip();
-    const folder = zip.folder(project.currentLanguage);
-    if (!folder) {
-      throw new Error("Failed to create folder in ZIP");
-    }
-    if (this.config.export?.includeMetadata) {
-      const metadataText = `APP NAME: ${project.appMetadata.appName}
-SUBTITLE: ${project.appMetadata.subtitle}
-DESCRIPTION:
-${project.appMetadata.description}
-
-KEYWORDS: ${project.appMetadata.keywords}
-WHATS NEW:
-${project.appMetadata.whatsNew}`;
-      folder.file("aso_metadata.txt", metadataText);
-    }
-    const screenshotPromises = project.screens.map(
-      (screen, index) => this.generateDesignedScreenshot(screen, project.design).then((screenshot) => ({ screenshot, index }))
-    );
-    const screenshots = await Promise.all(screenshotPromises);
-    screenshots.forEach(({ screenshot, index }) => {
-      const base64Data = screenshot.url.split(",")[1];
-      folder.file(
-        `screen_${index + 1}_${project.design.deviceType}.png`,
-        base64Data,
-        { base64: true }
-      );
-    });
-    return await zip.generateAsync({ type: "blob" });
-  }
-  /**
-   * Create project
-   */
-  createProject(name) {
-    return {
-      id: this.generateId(),
-      name,
-      design: this.getDefaultDesign(),
-      screens: [this.getDefaultScreen()],
-      currentLanguage: this.config.defaultLanguage || "en-US",
-      selectedScreenId: "1",
-      appMetadata: {
-        appName: "My App",
-        subtitle: "App Description",
-        promotionalText: "Promotional text",
-        keywords: "keyword1, keyword2",
-        description: "App description",
-        whatsNew: "What is new in this version"
-      },
-      appIcon: null,
-      createdAt: /* @__PURE__ */ new Date(),
-      updatedAt: /* @__PURE__ */ new Date()
-    };
-  }
-  /**
-   * Get default design
-   */
-  getDefaultDesign() {
-    return {
-      backgroundColor: "#6366f1",
-      backgroundGradientEnd: "#a855f7",
-      backgroundImage: null,
-      backgroundBlur: 0,
-      backgroundOverlayOpacity: 0,
-      backgroundPattern: "none",
-      textColor: "#ffffff",
-      highlightColor: "#fbbf24",
-      textAlign: "center",
-      deviceColor: "#1f2937",
-      deviceType: this.config.device?.defaultDevice || "iphone-15-pro",
-      frameStyle: "realistic",
-      layout: "text-top",
-      scale: 0.85,
-      fontFamily: "Inter",
-      titleFontSize: 60,
-      subtitleFontSize: 24,
-      titleFontWeight: "900",
-      subtitleFontWeight: "500",
-      textCase: "uppercase",
-      lineHeight: 0.9,
-      letterSpacing: -1,
-      rotation: 0,
-      rotationX: 0,
-      rotationY: 0,
-      rotationZ: 0,
-      offsetY: 0,
-      shadowIntensity: 0.5,
-      padding: 40,
-      gap: 20,
-      isPanoramic: false
-    };
-  }
-  /**
-   * Get default screen
-   */
-  getDefaultScreen() {
-    return {
-      id: "1",
-      title: "MY *APP*",
-      subtitle: "Your app description here",
-      screenshot: null,
-      translations: {
-        "en-US": { title: "MY *APP*", subtitle: "Your app description here" }
-      },
-      imageFit: "cover",
-      imageZoom: 1,
-      imageAnchorX: 50,
-      imageAnchorY: 50
-    };
-  }
-  /**
-   * Generate unique ID - optimized version
-   */
-  generateId() {
-    if (typeof crypto !== "undefined" && crypto.randomUUID) {
-      return crypto.randomUUID();
-    }
-    return `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`;
-  }
-};
-
-// src/application/services/ReportService.ts
-var ReportService = class _ReportService {
-  static getInstance() {
-    if (!_ReportService.instance) {
-      _ReportService.instance = new _ReportService();
-    }
-    return _ReportService.instance;
-  }
-  /**
-   * Export DOM element to PDF
-   */
-  async exportToPDF(elementId, options = {}) {
-    const html2canvas = (await import("html2canvas")).default;
-    const jsPDF = (await import("jspdf")).default;
-    const element = document.getElementById(elementId);
-    if (!element) {
-      throw new Error("Report element not found");
-    }
-    const canvas = await html2canvas(element, {
-      scale: options.scale || 2,
-      useCORS: options.useCORS !== false,
-      backgroundColor: options.backgroundColor || "#ffffff"
-    });
-    const imgData = canvas.toDataURL("image/png");
-    const pdf = new jsPDF("p", "mm", "a4");
-    const imgWidth = 210;
-    const imgHeight = canvas.height * imgWidth / canvas.width;
-    pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
-    pdf.save(options.filename || "report.pdf");
-  }
-  /**
-   * Export canvas to PDF
-   */
-  async exportCanvasToPDF(canvas, options = {}) {
-    const jsPDF = (await import("jspdf")).default;
-    const imgData = canvas.toDataURL("image/png");
-    const pdf = new jsPDF("p", "mm", "a4");
-    const imgWidth = 210;
-    const imgHeight = canvas.height * imgWidth / canvas.width;
-    pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
-    pdf.save(options.filename || "canvas-export.pdf");
-  }
-  /**
-   * Export data to Excel
-   */
-  async exportToExcel(data, options = {}) {
-    const XLSX = await import("xlsx");
-    const wb = XLSX.utils.book_new();
-    const apps = data.items.filter((i) => i.type === "app").map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
-    const campaigns = data.items.filter((i) => i.type === "campaign").map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
-    const posts = data.items.filter((i) => i.type === "post").map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
-    if (apps.length > 0) {
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(apps),
-        options.sheetName || "Apps"
-      );
-    }
-    if (campaigns.length > 0) {
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(campaigns),
-        "Campaigns"
-      );
-    }
-    if (posts.length > 0) {
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(posts),
-        "Posts"
-      );
-    }
-    if (options.includeSummary !== false) {
-      const summary = [
-        { Metric: "Total Reach", Value: data.summary.totalReach },
-        {
-          Metric: "Total Engagement",
-          Value: data.summary.totalEngagement
-        },
-        {
-          Metric: "Average Score",
-          Value: data.summary.averageScore
-        },
-        {
-          Metric: "Export Date",
-          Value: (/* @__PURE__ */ new Date()).toLocaleDateString()
-        }
-      ];
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(summary),
-        "Summary"
-      );
-    }
-    XLSX.writeFile(wb, options.filename || "report.xlsx");
-  }
-  /**
-   * Export data to CSV
-   */
-  exportToCSV(data, filename = "report.csv", delimiter = ",") {
-    const headers = ["Type", "Name", "Metrics"];
-    const rows = data.items.map((item) => [
-      item.type,
-      item.name,
-      JSON.stringify(item.metrics)
-    ]);
-    const csvContent = [headers, ...rows].map((row) => row.map((cell) => `"${cell}"`).join(delimiter)).join("\n");
-    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = filename;
-    link.click();
-    URL.revokeObjectURL(url);
-  }
-  /**
-   * Export multiple elements to PDF
-   */
-  async exportMultipleToPDF(elementIds, options = {}) {
-    const html2canvas = (await import("html2canvas")).default;
-    const jsPDF = (await import("jspdf")).default;
-    const pdf = new jsPDF("p", "mm", "a4");
-    for (let i = 0; i < elementIds.length; i++) {
-      const element = document.getElementById(elementIds[i]);
-      if (!element) continue;
-      const canvas = await html2canvas(element, {
-        scale: options.scale || 2,
-        useCORS: options.useCORS !== false,
-        backgroundColor: options.backgroundColor || "#ffffff"
-      });
-      const imgData = canvas.toDataURL("image/png");
-      const imgWidth = 210;
-      const imgHeight = canvas.height * imgWidth / canvas.width;
-      if (i > 0) {
-        pdf.addPage();
-      }
-      pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
-    }
-    pdf.save(options.filename || "multi-page-report.pdf");
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ReportService,
-  ScreenshotStudioService
-});