@umituz/web-canvas 1.0.7 → 1.1.0

package/dist/index.js

@@ -0,0 +1,1927 @@
+"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,
+  useFreehandCanvas: () => useFreehandCanvas,
+  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
+  };
+}
+
+// src/presentation/hooks/useFreehandCanvas.ts
+var import_react4 = require("react");
+var DEFAULT_BRUSH_SIZE = 3;
+var DEFAULT_COLOR = "#1a1a1a";
+function widthFor(stroke, point) {
+  if (!stroke.dynamic) return stroke.size;
+  return stroke.size * (0.5 + Math.min(1, Math.max(0, point.pressure)));
+}
+function useFreehandCanvas(options = {}) {
+  const { brushSize = DEFAULT_BRUSH_SIZE, color = DEFAULT_COLOR, pressureEnabled = true } = options;
+  const optionsRef = (0, import_react4.useRef)({ brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd });
+  optionsRef.current = { brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd };
+  const canvasRef = (0, import_react4.useRef)(null);
+  const strokesRef = (0, import_react4.useRef)([]);
+  const activeStrokeRef = (0, import_react4.useRef)(null);
+  const dprRef = (0, import_react4.useRef)(1);
+  const [strokeCount, setStrokeCount] = (0, import_react4.useState)(0);
+  const redraw = (0, import_react4.useCallback)(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    const dpr = dprRef.current;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(dpr, dpr);
+    const all = activeStrokeRef.current ? [...strokesRef.current, activeStrokeRef.current] : strokesRef.current;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    for (const stroke of all) {
+      ctx.strokeStyle = stroke.color;
+      ctx.fillStyle = stroke.color;
+      if (stroke.points.length === 1) {
+        const point = stroke.points[0];
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, widthFor(stroke, point) / 2, 0, Math.PI * 2);
+        ctx.fill();
+        continue;
+      }
+      for (let i = 1; i < stroke.points.length; i += 1) {
+        const from = stroke.points[i - 1];
+        const to = stroke.points[i];
+        ctx.beginPath();
+        ctx.lineWidth = (widthFor(stroke, from) + widthFor(stroke, to)) / 2;
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
+    }
+  }, []);
+  const syncDimensions = (0, import_react4.useCallback)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return false;
+    const dpr = window.devicePixelRatio || 1;
+    const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
+    const height = Math.max(1, Math.round(canvas.clientHeight * dpr));
+    if (canvas.width === width && canvas.height === height && dprRef.current === dpr) return false;
+    canvas.width = width;
+    canvas.height = height;
+    dprRef.current = dpr;
+    return true;
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const el = canvas;
+    el.style.touchAction = "none";
+    syncDimensions();
+    redraw();
+    const observer = new ResizeObserver(() => {
+      if (syncDimensions()) redraw();
+    });
+    observer.observe(canvas);
+    function pointFrom(event) {
+      const rect = el.getBoundingClientRect();
+      return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+        pressure: event.pressure > 0 ? event.pressure : 0.5
+      };
+    }
+    function drawSegment(stroke, from, to) {
+      const ctx = el.getContext("2d");
+      if (!ctx) return;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.strokeStyle = stroke.color;
+      ctx.lineWidth = (widthFor(stroke, from) + widthFor(stroke, to)) / 2;
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(to.x, to.y);
+      ctx.stroke();
+    }
+    function drawDot(stroke, point) {
+      const ctx = el.getContext("2d");
+      if (!ctx) return;
+      ctx.fillStyle = stroke.color;
+      ctx.beginPath();
+      ctx.arc(point.x, point.y, widthFor(stroke, point) / 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    function onPointerDown(event) {
+      if (event.button !== 0 && event.pointerType === "mouse") return;
+      event.preventDefault();
+      el.setPointerCapture(event.pointerId);
+      const { brushSize: size, color: ink, pressureEnabled: dynamic } = optionsRef.current;
+      const stroke = {
+        size,
+        color: ink,
+        dynamic: dynamic && event.pointerType === "pen",
+        points: [pointFrom(event)]
+      };
+      activeStrokeRef.current = stroke;
+      drawDot(stroke, stroke.points[0]);
+    }
+    function onPointerMove(event) {
+      const stroke = activeStrokeRef.current;
+      if (!stroke) return;
+      event.preventDefault();
+      const point = pointFrom(event);
+      const previous = stroke.points[stroke.points.length - 1];
+      stroke.points.push(point);
+      drawSegment(stroke, previous, point);
+    }
+    function commit(event) {
+      const stroke = activeStrokeRef.current;
+      if (!stroke) return;
+      activeStrokeRef.current = null;
+      if (el.hasPointerCapture(event.pointerId)) {
+        el.releasePointerCapture(event.pointerId);
+      }
+      strokesRef.current = [...strokesRef.current, stroke];
+      setStrokeCount(strokesRef.current.length);
+      optionsRef.current.onStrokeEnd?.(stroke);
+    }
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", commit);
+    el.addEventListener("pointercancel", commit);
+    return () => {
+      observer.disconnect();
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", commit);
+      el.removeEventListener("pointercancel", commit);
+    };
+  }, [redraw, syncDimensions]);
+  const undo = (0, import_react4.useCallback)(() => {
+    if (strokesRef.current.length === 0) return;
+    strokesRef.current = strokesRef.current.slice(0, -1);
+    setStrokeCount(strokesRef.current.length);
+    redraw();
+  }, [redraw]);
+  const clear = (0, import_react4.useCallback)(() => {
+    if (strokesRef.current.length === 0) return;
+    strokesRef.current = [];
+    setStrokeCount(0);
+    redraw();
+  }, [redraw]);
+  const getStrokes = (0, import_react4.useCallback)(() => strokesRef.current.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })), []);
+  return {
+    canvasRef,
+    undo,
+    clear,
+    strokeCount,
+    isEmpty: strokeCount === 0,
+    getStrokes
+  };
+}
+// 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,
+  useFreehandCanvas,
+  useReportExport,
+  useScreenshotStudio
+});