@umituz/web-canvas 1.0.5 → 1.0.7

package/dist/index.js

@@ -1,1756 +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/index.ts
-var index_exports = {};
-__export(index_exports, {
-  CanvasRenderer: () => CanvasRenderer,
-  DEFAULT_CANVAS_CONFIG: () => DEFAULT_CANVAS_CONFIG,
-  DEFAULT_DEVICE_CONFIG: () => DEFAULT_DEVICE_CONFIG,
-  DEFAULT_SCREENSHOT_STUDIO_CONFIG: () => DEFAULT_SCREENSHOT_STUDIO_CONFIG,
-  DEVICE_DIMENSIONS: () => DEVICE_DIMENSIONS,
-  DeviceConfigService: () => DeviceConfigService,
-  PatternRenderer: () => PatternRenderer,
-  ReportService: () => ReportService,
-  ScreenshotRenderer: () => ScreenshotRenderer,
-  ScreenshotStudioService: () => ScreenshotStudioService,
-  useCanvasExport: () => useCanvasExport,
-  useReportExport: () => useReportExport,
-  useScreenshotStudio: () => useScreenshotStudio
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/domain/config/CanvasConfig.ts
-var DEFAULT_CANVAS_CONFIG = {
-  defaultFormat: "png",
-  defaultQuality: 0.9,
-  maxDimension: 4096,
-  scale: 2,
-  backgroundColor: "#ffffff",
-  useCORS: true
-};
-
-// 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/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/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/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");
-  }
-};
-
-// src/presentation/hooks/useScreenshotStudio.ts
-var import_react = require("react");
-var DEFAULT_SCREENS = [
-  {
-    id: "1",
-    title: "APPGROWTHFACTORY *MODERN*",
-    subtitle: "Create content with AI power",
-    screenshot: null,
-    translations: {
-      "en-US": {
-        title: "APPGROWTHFACTORY *MODERN*",
-        subtitle: "Create content with AI power"
-      },
-      "tr-TR": {
-        title: "APPGROWTHFACTORY *MODERN*",
-        subtitle: "Yapay zeka g\xFCc\xFCyle i\xE7erik \xFCret"
-      }
-    },
-    imageFit: "cover",
-    imageZoom: 1,
-    imageAnchorX: 50,
-    imageAnchorY: 50
-  },
-  {
-    id: "2",
-    title: "CONNECT *GLOBAL*",
-    subtitle: "Post to all platforms instantly",
-    screenshot: null,
-    translations: {
-      "en-US": {
-        title: "CONNECT *GLOBAL*",
-        subtitle: "Post to all platforms instantly"
-      },
-      "tr-TR": {
-        title: "BA\u011ELAN *K\xDCRESEL*",
-        subtitle: "T\xFCm platformlara an\u0131nda g\xF6nder"
-      }
-    },
-    imageFit: "cover",
-    imageZoom: 1,
-    imageAnchorX: 50,
-    imageAnchorY: 50
-  }
-];
-var DEFAULT_DESIGN = {
-  backgroundColor: "#6366f1",
-  backgroundGradientEnd: "#a855f7",
-  backgroundImage: null,
-  backgroundBlur: 0,
-  backgroundOverlayOpacity: 0,
-  backgroundPattern: "none",
-  textColor: "#ffffff",
-  highlightColor: "#fbbf24",
-  textAlign: "center",
-  deviceColor: "#1f2937",
-  deviceType: "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
-};
-var DEFAULT_APP_METADATA = {
-  appName: "Growdo",
-  subtitle: "AI Content Generator",
-  promotionalText: "Unlock your creative potential",
-  keywords: "ai, content, marketing, automation, generator",
-  description: "The ultimate tool for AI-powered marketing content.",
-  whatsNew: "New Design Studio integration!"
-};
-function useScreenshotStudio(options = {}) {
-  const {
-    config = {},
-    onShowToast = () => {
-    }
-  } = options;
-  const fullConfig = {
-    ...DEFAULT_SCREENSHOT_STUDIO_CONFIG,
-    ...config
-  };
-  const serviceRef = (0, import_react.useRef)(null);
-  if (!serviceRef.current) {
-    serviceRef.current = new ScreenshotStudioService(fullConfig);
-  }
-  (0, import_react.useEffect)(() => {
-    return () => {
-      if (serviceRef.current) {
-      }
-    };
-  }, []);
-  const [screens, setScreens] = (0, import_react.useState)(DEFAULT_SCREENS);
-  const [design, setDesign] = (0, import_react.useState)(DEFAULT_DESIGN);
-  const [currentLanguage, setCurrentLanguage] = (0, import_react.useState)(
-    fullConfig.defaultLanguage || "en-US"
-  );
-  const [selectedScreenId, setSelectedScreenId] = (0, import_react.useState)("1");
-  const [isProcessing, setIsProcessing] = (0, import_react.useState)(false);
-  const [isAnalyzing, setIsAnalyzing] = (0, import_react.useState)(false);
-  const [appMetadata, setAppMetadata] = (0, import_react.useState)(
-    DEFAULT_APP_METADATA
-  );
-  const [appIcon, setAppIcon] = (0, import_react.useState)(null);
-  const [projectId, setProjectId] = (0, import_react.useState)(null);
-  const activeScreen = screens.find((s) => s.id === selectedScreenId) || screens[0];
-  const updateDesign = (0, import_react.useCallback)((updates) => {
-    setDesign((prev) => ({ ...prev, ...updates }));
-  }, []);
-  const updateActiveScreen = (0, import_react.useCallback)(
-    (updates) => {
-      setScreens(
-        (prev) => prev.map((screen) => {
-          if (screen.id !== selectedScreenId) return screen;
-          const updatedScreen = { ...screen, ...updates };
-          if (updates.title || updates.subtitle) {
-            updatedScreen.translations = {
-              ...updatedScreen.translations,
-              [currentLanguage]: {
-                title: updatedScreen.title,
-                subtitle: updatedScreen.subtitle
-              }
-            };
-          }
-          return updatedScreen;
-        })
-      );
-    },
-    [selectedScreenId, currentLanguage]
-  );
-  const changeLanguage = (0, import_react.useCallback)(
-    (newLanguage) => {
-      setCurrentLanguage(newLanguage);
-      setScreens(
-        (prev) => prev.map((screen) => {
-          const translation = screen.translations[newLanguage] || screen.translations["en-US"] || { title: screen.title, subtitle: screen.subtitle };
-          return {
-            ...screen,
-            title: translation.title,
-            subtitle: translation.subtitle
-          };
-        })
-      );
-      onShowToast("Language Changed", `Switched to ${newLanguage}`);
-    },
-    [onShowToast]
-  );
-  const addScreen = (0, import_react.useCallback)(() => {
-    const newScreen = {
-      id: Date.now().toString(),
-      title: "NEW *POST*",
-      subtitle: "Engage your audience",
-      screenshot: null,
-      translations: {
-        [currentLanguage]: {
-          title: "NEW *POST*",
-          subtitle: "Engage your audience"
-        }
-      },
-      imageFit: "cover",
-      imageZoom: 1,
-      imageAnchorX: 50,
-      imageAnchorY: 50
-    };
-    setScreens((prev) => [...prev, newScreen]);
-    setSelectedScreenId(newScreen.id);
-    onShowToast("Success", "New screen added");
-  }, [currentLanguage, onShowToast]);
-  const removeScreen = (0, import_react.useCallback)(
-    (screenId) => {
-      if (screens.length <= 1) return;
-      setScreens((prev) => {
-        const newScreens = prev.filter((s) => s.id !== screenId);
-        if (selectedScreenId === screenId) {
-          setSelectedScreenId(newScreens[0].id);
-        }
-        return newScreens;
-      });
-      onShowToast("Info", "Screen removed");
-    },
-    [screens.length, selectedScreenId, onShowToast]
-  );
-  const duplicateScreen = (0, import_react.useCallback)(
-    (screenId) => {
-      const screenToDuplicate = screens.find((s) => s.id === screenId);
-      if (!screenToDuplicate) return;
-      const newScreen = {
-        ...screenToDuplicate,
-        id: Date.now().toString(),
-        title: `${screenToDuplicate.title} (Copy)`,
-        translations: { ...screenToDuplicate.translations }
-      };
-      setScreens((prev) => {
-        const index = prev.findIndex((s) => s.id === screenId);
-        const newScreens = [...prev];
-        newScreens.splice(index + 1, 0, newScreen);
-        return newScreens;
-      });
-      setSelectedScreenId(newScreen.id);
-      onShowToast("Success", "Screen duplicated");
-    },
-    [screens, onShowToast]
-  );
-  const applyTemplate = (0, import_react.useCallback)(
-    (template) => {
-      setDesign((prev) => ({ ...prev, ...template.design }));
-      onShowToast("Template Applied", template.name);
-    },
-    [onShowToast]
-  );
-  const generateDesignedScreenshot = (0, import_react.useCallback)(
-    async (screenId) => {
-      if (!serviceRef.current) return;
-      const screen = screens.find((s) => s.id === screenId);
-      if (!screen) return;
-      setIsProcessing(true);
-      try {
-        const result = await serviceRef.current.generateDesignedScreenshot(
-          screen,
-          design
-        );
-        onShowToast("Success", "Screenshot generated");
-        return { url: result.url, id: result.id };
-      } catch {
-        onShowToast("Error", "Screenshot generation failed");
-      } finally {
-        setIsProcessing(false);
-      }
-    },
-    [screens, design, onShowToast]
-  );
-  const exportAllScreensAsZip = (0, import_react.useCallback)(
-    async (format = "png") => {
-      if (!serviceRef.current) return;
-      setIsProcessing(true);
-      let url = null;
-      try {
-        const project = {
-          id: projectId || "default-project",
-          name: "Export Project",
-          design,
-          screens,
-          currentLanguage,
-          selectedScreenId,
-          appMetadata,
-          appIcon,
-          createdAt: /* @__PURE__ */ new Date(),
-          updatedAt: /* @__PURE__ */ new Date()
-        };
-        const blob = await serviceRef.current.exportProjectAsZip(project);
-        url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = `Studio_${currentLanguage}_${Date.now()}.zip`;
-        link.click();
-        onShowToast(
-          "Success",
-          `Exported ${screens.length} screens in ZIP archive.`
-        );
-      } catch {
-        onShowToast("Error", "ZIP export failed");
-      } finally {
-        setIsProcessing(false);
-        if (url) {
-          setTimeout(() => {
-            try {
-              URL.revokeObjectURL(url);
-            } catch (e) {
-            }
-          }, 100);
-        }
-      }
-    },
-    [
-      screens,
-      design,
-      currentLanguage,
-      appMetadata,
-      appIcon,
-      projectId,
-      selectedScreenId,
-      onShowToast
-    ]
-  );
-  const _getProjectState = (0, import_react.useCallback)(() => {
-    return {
-      id: projectId || "appgrowthfactory_main_project",
-      name: "Default Project",
-      design,
-      screens,
-      currentLanguage,
-      selectedScreenId,
-      appMetadata,
-      appIcon,
-      createdAt: /* @__PURE__ */ new Date(),
-      updatedAt: /* @__PURE__ */ new Date()
-    };
-  }, [
-    design,
-    screens,
-    currentLanguage,
-    selectedScreenId,
-    appMetadata,
-    appIcon,
-    projectId
-  ]);
-  const _loadProjectState = (0, import_react.useCallback)(
-    (state) => {
-      if (!state) return;
-      if (state.screens) setScreens(state.screens);
-      if (state.design) setDesign(state.design);
-      if (state.currentLanguage) setCurrentLanguage(state.currentLanguage);
-      if (state.selectedScreenId && state.screens?.find((s) => s.id === state.selectedScreenId)) {
-        setSelectedScreenId(state.selectedScreenId);
-      }
-      if (state.appMetadata) setAppMetadata(state.appMetadata);
-      if (state.appIcon !== void 0) setAppIcon(state.appIcon);
-    },
-    []
-  );
-  return {
-    screens,
-    design,
-    currentLanguage,
-    selectedScreenId,
-    activeScreen,
-    isProcessing,
-    isAnalyzing,
-    appMetadata,
-    appIcon,
-    projectId,
-    updateDesign,
-    updateActiveScreen,
-    setSelectedScreenId,
-    changeLanguage,
-    applyTemplate,
-    addScreen,
-    removeScreen,
-    duplicateScreen,
-    generateDesignedScreenshot,
-    exportAllScreensAsZip,
-    setAppMetadata,
-    setAppIcon,
-    setProjectId,
-    _getProjectState,
-    _loadProjectState
-  };
-}
-
-// src/presentation/hooks/useCanvasExport.ts
-var import_react2 = require("react");
-function useCanvasExport(options = {}) {
-  const { config = DEFAULT_CANVAS_CONFIG } = options;
-  const [isExporting, setIsExporting] = (0, import_react2.useState)(false);
-  const [progress, setProgress] = (0, import_react2.useState)(0);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const rendererRef = (0, import_react2.useRef)(null);
-  const urlCleanupRef = (0, import_react2.useRef)([]);
-  if (!rendererRef.current) {
-    rendererRef.current = new CanvasRenderer(config);
-  }
-  (0, import_react2.useEffect)(() => {
-    return () => {
-      urlCleanupRef.current.forEach((url) => {
-        try {
-          URL.revokeObjectURL(url);
-        } catch (e) {
-        }
-      });
-      urlCleanupRef.current = [];
-    };
-  }, []);
-  const exportToBlob = (0, import_react2.useCallback)(
-    async (canvas, options2) => {
-      if (!rendererRef.current) return null;
-      setIsExporting(true);
-      setProgress(0);
-      setError(null);
-      try {
-        const result = await rendererRef.current.exportToBlob(canvas, options2);
-        setProgress(100);
-        if (result?.url) {
-          urlCleanupRef.current.push(result.url);
-        }
-        return result;
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Export failed";
-        setError(errorMessage);
-        return null;
-      } finally {
-        setIsExporting(false);
-      }
-    },
-    []
-  );
-  const exportToDataURL = (0, import_react2.useCallback)(
-    (canvas, format, quality) => {
-      if (!rendererRef.current) return null;
-      try {
-        return rendererRef.current.exportToDataURL(canvas, format, quality);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Export failed";
-        setError(errorMessage);
-        return null;
-      }
-    },
-    []
-  );
-  const downloadCanvas = (0, import_react2.useCallback)(
-    async (canvas, filename, options2) => {
-      setIsExporting(true);
-      setProgress(0);
-      setError(null);
-      try {
-        const result = await exportToBlob(canvas, options2);
-        if (!result) {
-          throw new Error("Export failed");
-        }
-        setProgress(50);
-        const link = document.createElement("a");
-        link.href = result.url;
-        link.download = filename;
-        link.click();
-        setProgress(100);
-        setTimeout(() => {
-          URL.revokeObjectURL(result.url);
-          const index = urlCleanupRef.current.indexOf(result.url);
-          if (index > -1) {
-            urlCleanupRef.current.splice(index, 1);
-          }
-        }, 100);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Download failed";
-        setError(errorMessage);
-      } finally {
-        setIsExporting(false);
-      }
-    },
-    [exportToBlob]
-  );
-  const cloneCanvas = (0, import_react2.useCallback)(
-    (canvas) => {
-      if (!rendererRef.current) return null;
-      try {
-        return rendererRef.current.cloneCanvas(canvas);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Clone failed";
-        setError(errorMessage);
-        return null;
-      }
-    },
-    []
-  );
-  return {
-    isExporting,
-    progress,
-    error,
-    exportToBlob,
-    exportToDataURL,
-    downloadCanvas,
-    cloneCanvas
-  };
-}
-
-// src/presentation/hooks/useReportExport.ts
-var import_react3 = require("react");
-function useReportExport() {
-  const [isExporting, setIsExporting] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const reportServiceRef = (0, import_react3.useRef)(null);
-  if (!reportServiceRef.current) {
-    reportServiceRef.current = ReportService.getInstance();
-  }
-  const exportToPDF = (0, import_react3.useCallback)(
-    async (elementId, options) => {
-      if (!reportServiceRef.current) {
-        throw new Error("ReportService not initialized");
-      }
-      setIsExporting(true);
-      setError(null);
-      try {
-        await reportServiceRef.current.exportToPDF(elementId, options);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "PDF export failed";
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setIsExporting(false);
-      }
-    },
-    []
-  );
-  const exportCanvasToPDF = (0, import_react3.useCallback)(
-    async (canvas, options) => {
-      if (!reportServiceRef.current) {
-        throw new Error("ReportService not initialized");
-      }
-      setIsExporting(true);
-      setError(null);
-      try {
-        await reportServiceRef.current.exportCanvasToPDF(canvas, options);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Canvas PDF export failed";
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setIsExporting(false);
-      }
-    },
-    []
-  );
-  const exportMultipleToPDF = (0, import_react3.useCallback)(
-    async (elementIds, options) => {
-      if (!reportServiceRef.current) {
-        throw new Error("ReportService not initialized");
-      }
-      setIsExporting(true);
-      setError(null);
-      try {
-        await reportServiceRef.current.exportMultipleToPDF(elementIds, options);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Multi-page PDF export failed";
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setIsExporting(false);
-      }
-    },
-    []
-  );
-  const exportToExcel = (0, import_react3.useCallback)(
-    async (data, options) => {
-      if (!reportServiceRef.current) {
-        throw new Error("ReportService not initialized");
-      }
-      setIsExporting(true);
-      setError(null);
-      try {
-        await reportServiceRef.current.exportToExcel(data, options);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Excel export failed";
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setIsExporting(false);
-      }
-    },
-    []
-  );
-  const exportToCSV = (0, import_react3.useCallback)(
-    (data, filename, delimiter) => {
-      if (!reportServiceRef.current) {
-        throw new Error("ReportService not initialized");
-      }
-      try {
-        reportServiceRef.current.exportToCSV(data, filename, delimiter);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "CSV export failed";
-        setError(errorMessage);
-        throw err;
-      }
-    },
-    []
-  );
-  return {
-    isExporting,
-    error,
-    exportToPDF,
-    exportCanvasToPDF,
-    exportMultipleToPDF,
-    exportToExcel,
-    exportToCSV
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  CanvasRenderer,
-  DEFAULT_CANVAS_CONFIG,
-  DEFAULT_DEVICE_CONFIG,
-  DEFAULT_SCREENSHOT_STUDIO_CONFIG,
-  DEVICE_DIMENSIONS,
-  DeviceConfigService,
-  PatternRenderer,
-  ReportService,
-  ScreenshotRenderer,
-  ScreenshotStudioService,
-  useCanvasExport,
-  useReportExport,
-  useScreenshotStudio
-});