@umituz/web-canvas 1.0.6 → 1.1.0

package/dist/chunk-HJ24NSQA.mjs

@@ -0,0 +1,777 @@
+import {
+  ReportService,
+  ScreenshotStudioService
+} from "./chunk-DNKRSL6D.mjs";
+import {
+  CanvasRenderer
+} from "./chunk-UOGTEMIJ.mjs";
+import {
+  DEFAULT_SCREENSHOT_STUDIO_CONFIG
+} from "./chunk-Z6IB4BQV.mjs";
+import {
+  DEFAULT_CANVAS_CONFIG
+} from "./chunk-MC6PNV2F.mjs";
+
+// src/presentation/hooks/useScreenshotStudio.ts
+import { useState, useCallback, useRef, useEffect } from "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 = useRef(null);
+  if (!serviceRef.current) {
+    serviceRef.current = new ScreenshotStudioService(fullConfig);
+  }
+  useEffect(() => {
+    return () => {
+      if (serviceRef.current) {
+      }
+    };
+  }, []);
+  const [screens, setScreens] = useState(DEFAULT_SCREENS);
+  const [design, setDesign] = useState(DEFAULT_DESIGN);
+  const [currentLanguage, setCurrentLanguage] = useState(
+    fullConfig.defaultLanguage || "en-US"
+  );
+  const [selectedScreenId, setSelectedScreenId] = useState("1");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [appMetadata, setAppMetadata] = useState(
+    DEFAULT_APP_METADATA
+  );
+  const [appIcon, setAppIcon] = useState(null);
+  const [projectId, setProjectId] = useState(null);
+  const activeScreen = screens.find((s) => s.id === selectedScreenId) || screens[0];
+  const updateDesign = useCallback((updates) => {
+    setDesign((prev) => ({ ...prev, ...updates }));
+  }, []);
+  const updateActiveScreen = 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 = 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 = 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 = 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 = 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 = useCallback(
+    (template) => {
+      setDesign((prev) => ({ ...prev, ...template.design }));
+      onShowToast("Template Applied", template.name);
+    },
+    [onShowToast]
+  );
+  const generateDesignedScreenshot = 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 = 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 = 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 = 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
+import { useState as useState2, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect2 } from "react";
+function useCanvasExport(options = {}) {
+  const { config = DEFAULT_CANVAS_CONFIG } = options;
+  const [isExporting, setIsExporting] = useState2(false);
+  const [progress, setProgress] = useState2(0);
+  const [error, setError] = useState2(null);
+  const rendererRef = useRef2(null);
+  const urlCleanupRef = useRef2([]);
+  if (!rendererRef.current) {
+    rendererRef.current = new CanvasRenderer(config);
+  }
+  useEffect2(() => {
+    return () => {
+      urlCleanupRef.current.forEach((url) => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch (e) {
+        }
+      });
+      urlCleanupRef.current = [];
+    };
+  }, []);
+  const exportToBlob = useCallback2(
+    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 = useCallback2(
+    (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 = useCallback2(
+    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 = useCallback2(
+    (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
+import { useState as useState3, useCallback as useCallback3, useRef as useRef3 } from "react";
+function useReportExport() {
+  const [isExporting, setIsExporting] = useState3(false);
+  const [error, setError] = useState3(null);
+  const reportServiceRef = useRef3(null);
+  if (!reportServiceRef.current) {
+    reportServiceRef.current = ReportService.getInstance();
+  }
+  const exportToPDF = useCallback3(
+    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 = useCallback3(
+    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 = useCallback3(
+    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 = useCallback3(
+    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 = useCallback3(
+    (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
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "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 = useRef4({ brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd });
+  optionsRef.current = { brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd };
+  const canvasRef = useRef4(null);
+  const strokesRef = useRef4([]);
+  const activeStrokeRef = useRef4(null);
+  const dprRef = useRef4(1);
+  const [strokeCount, setStrokeCount] = useState4(0);
+  const redraw = useCallback4(() => {
+    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 = useCallback4(() => {
+    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;
+  }, []);
+  useEffect4(() => {
+    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 = useCallback4(() => {
+    if (strokesRef.current.length === 0) return;
+    strokesRef.current = strokesRef.current.slice(0, -1);
+    setStrokeCount(strokesRef.current.length);
+    redraw();
+  }, [redraw]);
+  const clear = useCallback4(() => {
+    if (strokesRef.current.length === 0) return;
+    strokesRef.current = [];
+    setStrokeCount(0);
+    redraw();
+  }, [redraw]);
+  const getStrokes = useCallback4(() => strokesRef.current.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })), []);
+  return {
+    canvasRef,
+    undo,
+    clear,
+    strokeCount,
+    isEmpty: strokeCount === 0,
+    getStrokes
+  };
+}
+
+export {
+  useScreenshotStudio,
+  useCanvasExport,
+  useReportExport,
+  useFreehandCanvas
+};