@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/esm/photo/photoOverlays.js

@@ -9,116 +9,436 @@
  */
 const EMOJI_CATALOG = [
     {
-        id: "faces",
-        label: "Buźki",
-        icon: "😊",
+        id: 'faces',
+        label: 'Buźki',
+        icon: '😊',
         emojis: [
-            "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "😉", "😊", "😇",
-            "🥰", "😍", "🤩", "😘", "😗", "😚", "😋", "😛", "😜", "🤪", "😝", "🤑",
-            "🤗", "🤭", "🤫", "🤔", "😐", "😑", "😶", "🙄", "😏", "😣", "😥", "😮",
-            "🤐", "😯", "😪", "😫", "🥱", "😴", "🤤", "😌", "😷", "🤒", "🤕", "🤢",
-            "🤮", "🥵", "🥶", "🥴", "😵", "🤯", "🤠", "🥳", "🥸", "😎", "🤓", "🧐",
-            "😤", "😡", "🤬", "😈", "👿", "💀", "☠️", "💩", "🤡", "👹", "👻", "👽", "🤖",
+            '😀',
+            '😃',
+            '😄',
+            '😁',
+            '😆',
+            '😅',
+            '🤣',
+            '😂',
+            '🙂',
+            '😉',
+            '😊',
+            '😇',
+            '🥰',
+            '😍',
+            '🤩',
+            '😘',
+            '😗',
+            '😚',
+            '😋',
+            '😛',
+            '😜',
+            '🤪',
+            '😝',
+            '🤑',
+            '🤗',
+            '🤭',
+            '🤫',
+            '🤔',
+            '😐',
+            '😑',
+            '😶',
+            '🙄',
+            '😏',
+            '😣',
+            '😥',
+            '😮',
+            '🤐',
+            '😯',
+            '😪',
+            '😫',
+            '🥱',
+            '😴',
+            '🤤',
+            '😌',
+            '😷',
+            '🤒',
+            '🤕',
+            '🤢',
+            '🤮',
+            '🥵',
+            '🥶',
+            '🥴',
+            '😵',
+            '🤯',
+            '🤠',
+            '🥳',
+            '🥸',
+            '😎',
+            '🤓',
+            '🧐',
+            '😤',
+            '😡',
+            '🤬',
+            '😈',
+            '👿',
+            '💀',
+            '☠️',
+            '💩',
+            '🤡',
+            '👹',
+            '👻',
+            '👽',
+            '🤖',
         ],
     },
     {
-        id: "gestures",
-        label: "Gesty",
-        icon: "👍",
+        id: 'gestures',
+        label: 'Gesty',
+        icon: '👍',
         emojis: [
-            "👍", "👎", "👊", "✊", "🤛", "🤜", "🤝", "👏", "🙌", "🫶", "👐", "🤲",
-            "🙏", "✌️", "🤞", "🤟", "🤘", "🤙", "👈", "👉", "👆", "👇", "☝️", "✋",
-            "🤚", "🖐️", "🖖", "👋", "🤏", "✍️", "💪", "🦾", "🦵", "🦶", "👂", "👃",
-            "👀", "👁️", "👅", "👄",
+            '👍',
+            '👎',
+            '👊',
+            '✊',
+            '🤛',
+            '🤜',
+            '🤝',
+            '👏',
+            '🙌',
+            '🫶',
+            '👐',
+            '🤲',
+            '🙏',
+            '✌️',
+            '🤞',
+            '🤟',
+            '🤘',
+            '🤙',
+            '👈',
+            '👉',
+            '👆',
+            '👇',
+            '☝️',
+            '✋',
+            '🤚',
+            '🖐️',
+            '🖖',
+            '👋',
+            '🤏',
+            '✍️',
+            '💪',
+            '🦾',
+            '🦵',
+            '🦶',
+            '👂',
+            '👃',
+            '👀',
+            '👁️',
+            '👅',
+            '👄',
         ],
     },
     {
-        id: "hearts",
-        label: "Serca",
-        icon: "❤️",
+        id: 'hearts',
+        label: 'Serca',
+        icon: '❤️',
         emojis: [
-            "❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍", "🤎", "❤️‍🔥", "💔", "❣️",
-            "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "♥️", "💌", "💋", "💍", "💎",
+            '❤️',
+            '🧡',
+            '💛',
+            '💚',
+            '💙',
+            '💜',
+            '🖤',
+            '🤍',
+            '🤎',
+            '❤️‍🔥',
+            '💔',
+            '❣️',
+            '💕',
+            '💞',
+            '💓',
+            '💗',
+            '💖',
+            '💘',
+            '💝',
+            '💟',
+            '♥️',
+            '💌',
+            '💋',
+            '💍',
+            '💎',
         ],
     },
     {
-        id: "animals",
-        label: "Zwierzki",
-        icon: "🐶",
+        id: 'animals',
+        label: 'Zwierzki',
+        icon: '🐶',
         emojis: [
-            "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮",
-            "🐷", "🐸", "🐵", "🙈", "🙉", "🙊", "🐔", "🐧", "🐦", "🦆", "🦅", "🦉",
-            "🦋", "🐌", "🐞", "🐙", "🐬", "🐳", "🦈", "🐊", "🐘", "🦒", "🦘", "🐴", "🦄",
+            '🐶',
+            '🐱',
+            '🐭',
+            '🐹',
+            '🐰',
+            '🦊',
+            '🐻',
+            '🐼',
+            '🐨',
+            '🐯',
+            '🦁',
+            '🐮',
+            '🐷',
+            '🐸',
+            '🐵',
+            '🙈',
+            '🙉',
+            '🙊',
+            '🐔',
+            '🐧',
+            '🐦',
+            '🦆',
+            '🦅',
+            '🦉',
+            '🦋',
+            '🐌',
+            '🐞',
+            '🐙',
+            '🐬',
+            '🐳',
+            '🦈',
+            '🐊',
+            '🐘',
+            '🦒',
+            '🦘',
+            '🐴',
+            '🦄',
         ],
     },
     {
-        id: "party",
-        label: "Impreza",
-        icon: "🎉",
+        id: 'party',
+        label: 'Impreza',
+        icon: '🎉',
         emojis: [
-            "🎉", "🎊", "🎈", "🎁", "🎀", "🎃", "🎄", "🎆", "🎇", "✨", "🏆", "🏅",
-            "🥇", "🥈", "🥉", "🎪", "🎭", "🎨", "🎬", "🎤", "🎧", "🎼", "🎵", "🎶",
-            "🎹", "🥁", "🎷", "🎺", "🎸", "🎻", "🎲", "🎯", "🎳", "🕹️", "🎮", "🎰",
+            '🎉',
+            '🎊',
+            '🎈',
+            '🎁',
+            '🎀',
+            '🎃',
+            '🎄',
+            '🎆',
+            '🎇',
+            '✨',
+            '🏆',
+            '🏅',
+            '🥇',
+            '🥈',
+            '🥉',
+            '🎪',
+            '🎭',
+            '🎨',
+            '🎬',
+            '🎤',
+            '🎧',
+            '🎼',
+            '🎵',
+            '🎶',
+            '🎹',
+            '🥁',
+            '🎷',
+            '🎺',
+            '🎸',
+            '🎻',
+            '🎲',
+            '🎯',
+            '🎳',
+            '🕹️',
+            '🎮',
+            '🎰',
         ],
     },
     {
-        id: "food",
-        label: "Jedzenie",
-        icon: "🍕",
+        id: 'food',
+        label: 'Jedzenie',
+        icon: '🍕',
         emojis: [
-            "🍏", "🍎", "🍐", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🍒", "🍑", "🥭",
-            "🍍", "🥝", "🍅", "🥑", "🍆", "🌽", "🌶️", "🍞", "🧀", "🥚", "🍳", "🥓",
-            "🍗", "🌭", "🍔", "🍟", "🍕", "🌮", "🌯", "🥪", "🍝", "🍜", "🍣", "🍤",
-            "🍦", "🍰", "🎂", "🍩", "🍪", "🍫", "🍬", "🍭", "🍿", "☕", "🍵", "🍺",
-            "🍻", "🥂", "🍷", "🍸", "🍹", "🧃", "🍾",
+            '🍏',
+            '🍎',
+            '🍐',
+            '🍊',
+            '🍋',
+            '🍌',
+            '🍉',
+            '🍇',
+            '🍓',
+            '🍒',
+            '🍑',
+            '🥭',
+            '🍍',
+            '🥝',
+            '🍅',
+            '🥑',
+            '🍆',
+            '🌽',
+            '🌶️',
+            '🍞',
+            '🧀',
+            '🥚',
+            '🍳',
+            '🥓',
+            '🍗',
+            '🌭',
+            '🍔',
+            '🍟',
+            '🍕',
+            '🌮',
+            '🌯',
+            '🥪',
+            '🍝',
+            '🍜',
+            '🍣',
+            '🍤',
+            '🍦',
+            '🍰',
+            '🎂',
+            '🍩',
+            '🍪',
+            '🍫',
+            '🍬',
+            '🍭',
+            '🍿',
+            '☕',
+            '🍵',
+            '🍺',
+            '🍻',
+            '🥂',
+            '🍷',
+            '🍸',
+            '🍹',
+            '🧃',
+            '🍾',
         ],
     },
     {
-        id: "nature",
-        label: "Natura",
-        icon: "🌸",
+        id: 'nature',
+        label: 'Natura',
+        icon: '🌸',
         emojis: [
-            "🌸", "🌺", "🌹", "🌻", "🌼", "💐", "🌷", "🌱", "🪴", "🌲", "🌳", "🌴",
-            "🌵", "🍀", "☘️", "🌿", "🍃", "🍂", "🍁", "🌊", "🌈", "☀️", "🌤️", "⛅",
-            "☁️", "🌧️", "⛈️", "🌩️", "❄️", "☃️", "⛄", "🔥", "💧", "💦", "🌏", "🌙",
-            "🌟", "💫", "✨", "☄️",
+            '🌸',
+            '🌺',
+            '🌹',
+            '🌻',
+            '🌼',
+            '💐',
+            '🌷',
+            '🌱',
+            '🪴',
+            '🌲',
+            '🌳',
+            '🌴',
+            '🌵',
+            '🍀',
+            '☘️',
+            '🌿',
+            '🍃',
+            '🍂',
+            '🍁',
+            '🌊',
+            '🌈',
+            '☀️',
+            '🌤️',
+            '⛅',
+            '☁️',
+            '🌧️',
+            '⛈️',
+            '🌩️',
+            '❄️',
+            '☃️',
+            '⛄',
+            '🔥',
+            '💧',
+            '💦',
+            '🌏',
+            '🌙',
+            '🌟',
+            '💫',
+            '✨',
+            '☄️',
         ],
     },
     {
-        id: "symbols",
-        label: "Symbole",
-        icon: "⚡",
+        id: 'symbols',
+        label: 'Symbole',
+        icon: '⚡',
         emojis: [
-            "⚡", "💥", "🔥", "✨", "💫", "🌟", "⭐", "💡", "💣", "🧨", "🎯", "♠️",
-            "♥️", "♦️", "♣️", "🔮", "🧿", "♻️", "⚜️", "⭕", "✅", "❌", "➕", "➖",
-            "❗", "❓", "‼️", "⁉️", "💯", "🔴", "🟠", "🟡", "🟢", "🔵", "🟣", "⚫",
-            "⚪", "🔺", "🔻", "🔶", "🔷", "🏳️", "🏴", "🚩", "🏳️‍🌈",
+            '⚡',
+            '💥',
+            '🔥',
+            '✨',
+            '💫',
+            '🌟',
+            '⭐',
+            '💡',
+            '💣',
+            '🧨',
+            '🎯',
+            '♠️',
+            '♥️',
+            '♦️',
+            '♣️',
+            '🔮',
+            '🧿',
+            '♻️',
+            '⚜️',
+            '⭕',
+            '✅',
+            '❌',
+            '➕',
+            '➖',
+            '❗',
+            '❓',
+            '‼️',
+            '⁉️',
+            '💯',
+            '🔴',
+            '🟠',
+            '🟡',
+            '🟢',
+            '🔵',
+            '🟣',
+            '⚫',
+            '⚪',
+            '🔺',
+            '🔻',
+            '🔶',
+            '🔷',
+            '🏳️',
+            '🏴',
+            '🚩',
+            '🏳️‍🌈',
         ],
     },
 ];
 const SHAPE_CATALOG = [
-    { id: "rect", label: "Prostokąt", icon: "⬜" },
-    { id: "circle", label: "Koło", icon: "⭕" },
-    { id: "triangle", label: "Trójkąt", icon: "🔺" },
-    { id: "star", label: "Gwiazda", icon: "⭐" },
-    { id: "heart", label: "Serce", icon: "❤️" },
-    { id: "arrow", label: "Strzałka", icon: "➡️" },
-    { id: "diamond", label: "Romb", icon: "💎" },
-    { id: "hexagon", label: "Sześciokąt", icon: "⬡" },
-    { id: "cross", label: "Krzyżyk", icon: "✚" },
-    { id: "lightning", label: "Błyskawica", icon: "⚡" },
+    { id: 'rect', label: 'Prostokąt', icon: '⬜' },
+    { id: 'circle', label: 'Koło', icon: '⭕' },
+    { id: 'triangle', label: 'Trójkąt', icon: '🔺' },
+    { id: 'star', label: 'Gwiazda', icon: '⭐' },
+    { id: 'heart', label: 'Serce', icon: '❤️' },
+    { id: 'arrow', label: 'Strzałka', icon: '➡️' },
+    { id: 'diamond', label: 'Romb', icon: '💎' },
+    { id: 'hexagon', label: 'Sześciokąt', icon: '⬡' },
+    { id: 'cross', label: 'Krzyżyk', icon: '✚' },
+    { id: 'lightning', label: 'Błyskawica', icon: '⚡' },
 ];
 const FRAME_CATALOG = [
-    { id: "simple", label: "Prosta", icon: "▪️" },
-    { id: "double", label: "Podwójna", icon: "◻️" },
-    { id: "rounded", label: "Zaokrąglona", icon: "⬜" },
-    { id: "polaroid", label: "Polaroid", icon: "📸" },
-    { id: "film", label: "Klisza", icon: "🎞️" },
-    { id: "vintage", label: "Vintage", icon: "🖼️" },
-    { id: "ornate", label: "Ozdobna", icon: "🏛️" },
-    { id: "shadow", label: "Cień", icon: "🌑" },
-    { id: "neon", label: "Neon", icon: "💡" },
-    { id: "torn", label: "Podarta", icon: "📃" },
+    { id: 'simple', label: 'Prosta', icon: '▪️' },
+    { id: 'double', label: 'Podwójna', icon: '◻️' },
+    { id: 'rounded', label: 'Zaokrąglona', icon: '⬜' },
+    { id: 'polaroid', label: 'Polaroid', icon: '📸' },
+    { id: 'film', label: 'Klisza', icon: '🎞️' },
+    { id: 'vintage', label: 'Vintage', icon: '🖼️' },
+    { id: 'ornate', label: 'Ozdobna', icon: '🏛️' },
+    { id: 'shadow', label: 'Cień', icon: '🌑' },
+    { id: 'neon', label: 'Neon', icon: '💡' },
+    { id: 'torn', label: 'Podarta', icon: '📃' },
 ];
 // ═══════════════════════════════════════════════════════════════
 // ── ID generation
@@ -132,18 +452,19 @@ function generateOverlayId() {
 // ═══════════════════════════════════════════════════════════════
 /** Render all overlays to a canvas context. */
 function renderAllOverlays(ctx, overlays, w, h) {
-    for (const ov of overlays)
+    for (const ov of overlays) {
         renderSingleOverlay(ctx, ov, w, h);
+    }
 }
 function renderSingleOverlay(ctx, ov, w, h) {
     ctx.save();
     ctx.globalAlpha = ov.opacity;
-    if (ov.type === "drawing") {
+    if (ov.type === 'drawing') {
         renderDrawing(ctx, ov, w, h);
         ctx.restore();
         return;
     }
-    if (ov.type === "frame") {
+    if (ov.type === 'frame') {
         renderFrame(ctx, ov, w, h);
         ctx.restore();
         return;
@@ -155,13 +476,13 @@ function renderSingleOverlay(ctx, ov, w, h) {
     ctx.rotate((ov.rotation * Math.PI) / 180);
     ctx.scale(ov.scaleX, ov.scaleY);
     switch (ov.type) {
-        case "emoji":
+        case 'emoji':
             renderEmoji(ctx, ov);
             break;
-        case "text":
+        case 'text':
             renderText(ctx, ov);
             break;
-        case "shape":
+        case 'shape':
             renderShape(ctx, ov);
             break;
     }
@@ -170,23 +491,23 @@ function renderSingleOverlay(ctx, ov, w, h) {
 // -- Emoji -------------------------------------------------------
 function renderEmoji(ctx, ov) {
     ctx.font = `${ov.fontSize}px "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
     ctx.fillText(ov.emoji, 0, 0);
 }
 // -- Text --------------------------------------------------------
 function renderText(ctx, ov) {
-    const style = `${ov.italic ? "italic " : ""}${ov.bold ? "bold " : ""}`;
-    ctx.font = `${style}${ov.fontSize}px ${ov.fontFamily || "Arial"},sans-serif`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    const lines = ov.text.split("\n");
+    const style = `${ov.italic ? 'italic ' : ''}${ov.bold ? 'bold ' : ''}`;
+    ctx.font = `${style}${ov.fontSize}px ${ov.fontFamily || 'Arial'},sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    const lines = ov.text.split('\n');
     const lineH = ov.fontSize * 1.25;
     const totalH = lineH * lines.length;
     const startY = -(totalH / 2) + lineH / 2;
     // Background
     if (ov.background) {
-        const maxW = Math.max(...lines.map(l => ctx.measureText(l).width));
+        const maxW = Math.max(...lines.map((l) => ctx.measureText(l).width));
         const pad = ov.backgroundPadding;
         ctx.fillStyle = ov.background;
         const rx = -(maxW / 2 + pad);
@@ -206,13 +527,13 @@ function renderText(ctx, ov) {
         if (ov.outlineColor && ov.outlineWidth > 0) {
             ctx.strokeStyle = ov.outlineColor;
             ctx.lineWidth = ov.outlineWidth;
-            ctx.lineJoin = "round";
+            ctx.lineJoin = 'round';
             ctx.strokeText(lines[i], 0, ly);
         }
         ctx.fillStyle = ov.color;
         ctx.fillText(lines[i], 0, ly);
     }
-    ctx.shadowColor = "transparent";
+    ctx.shadowColor = 'transparent';
 }
 // -- Shape -------------------------------------------------------
 function renderShape(ctx, ov) {
@@ -231,39 +552,41 @@ function drawShapePath(ctx, kind, w, h) {
     const hw = w / 2, hh = h / 2;
     ctx.beginPath();
     switch (kind) {
-        case "rect":
+        case 'rect':
             ctx.rect(-hw, -hh, w, h);
             break;
-        case "circle":
+        case 'circle':
             ctx.ellipse(0, 0, hw, hh, 0, 0, Math.PI * 2);
             break;
-        case "triangle":
+        case 'triangle':
             ctx.moveTo(0, -hh);
             ctx.lineTo(hw, hh);
             ctx.lineTo(-hw, hh);
             ctx.closePath();
             break;
-        case "star": {
+        case 'star': {
             const spikes = 5, outer = Math.min(hw, hh), inner = outer * 0.4;
             for (let i = 0; i < spikes * 2; i++) {
                 const r = i % 2 === 0 ? outer : inner;
                 const a = (Math.PI * i) / spikes - Math.PI / 2;
-                if (i === 0)
+                if (i === 0) {
                     ctx.moveTo(Math.cos(a) * r, Math.sin(a) * r);
-                else
+                }
+                else {
                     ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r);
+                }
             }
             ctx.closePath();
             break;
         }
-        case "heart": {
+        case 'heart': {
             const s = Math.min(hw, hh);
             ctx.moveTo(0, s * 0.4);
             ctx.bezierCurveTo(-s, -s * 0.2, -s * 0.6, -s, 0, -s * 0.4);
             ctx.bezierCurveTo(s * 0.6, -s, s, -s * 0.2, 0, s * 0.4);
             break;
         }
-        case "arrow":
+        case 'arrow':
             ctx.moveTo(-hw, -hh * 0.3);
             ctx.lineTo(hw * 0.3, -hh * 0.3);
             ctx.lineTo(hw * 0.3, -hh);
@@ -273,26 +596,28 @@ function drawShapePath(ctx, kind, w, h) {
             ctx.lineTo(-hw, hh * 0.3);
             ctx.closePath();
             break;
-        case "diamond":
+        case 'diamond':
             ctx.moveTo(0, -hh);
             ctx.lineTo(hw, 0);
             ctx.lineTo(0, hh);
             ctx.lineTo(-hw, 0);
             ctx.closePath();
             break;
-        case "hexagon":
+        case 'hexagon':
             for (let i = 0; i < 6; i++) {
                 const a = (Math.PI * 2 * i) / 6 - Math.PI / 2;
                 const r = Math.min(hw, hh);
                 const px = Math.cos(a) * r, py = Math.sin(a) * r;
-                if (i === 0)
+                if (i === 0) {
                     ctx.moveTo(px, py);
-                else
+                }
+                else {
                     ctx.lineTo(px, py);
+                }
             }
             ctx.closePath();
             break;
-        case "cross": {
+        case 'cross': {
             const t = Math.min(hw, hh) * 0.3;
             ctx.moveTo(-t, -hh);
             ctx.lineTo(t, -hh);
@@ -309,7 +634,7 @@ function drawShapePath(ctx, kind, w, h) {
             ctx.closePath();
             break;
         }
-        case "lightning": {
+        case 'lightning': {
             const s = Math.min(hw, hh);
             ctx.moveTo(-s * 0.1, -s);
             ctx.lineTo(s * 0.5, -s * 0.1);
@@ -326,13 +651,14 @@ function drawShapePath(ctx, kind, w, h) {
 // -- Drawing (freehand strokes) ----------------------------------
 function renderDrawing(ctx, ov, w, h) {
     for (const stroke of ov.strokes) {
-        if (stroke.points.length < 2)
+        if (stroke.points.length < 2) {
             continue;
+        }
         ctx.beginPath();
         ctx.strokeStyle = stroke.color;
         ctx.lineWidth = stroke.width;
-        ctx.lineCap = "round";
-        ctx.lineJoin = "round";
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
         ctx.globalAlpha = stroke.opacity;
         const [sx, sy] = stroke.points[0];
         ctx.moveTo(sx * w, sy * h);
@@ -345,14 +671,15 @@ function renderDrawing(ctx, ov, w, h) {
 }
 // -- Canvas stroke (draw a live, in-progress stroke) -------------
 function renderLiveStroke(ctx, points, color, width, canvasW, canvasH) {
-    if (points.length < 2)
+    if (points.length < 2) {
         return;
+    }
     ctx.save();
     ctx.beginPath();
     ctx.strokeStyle = color;
     ctx.lineWidth = width;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
     ctx.moveTo(points[0][0] * canvasW, points[0][1] * canvasH);
     for (let i = 1; i < points.length; i++) {
         ctx.lineTo(points[i][0] * canvasW, points[i][1] * canvasH);
@@ -366,33 +693,33 @@ function renderFrame(ctx, ov, w, h) {
     ctx.strokeStyle = ov.color;
     ctx.fillStyle = ov.color;
     switch (ov.frameStyle) {
-        case "simple":
+        case 'simple':
             ctx.lineWidth = t;
             ctx.strokeRect(t / 2, t / 2, w - t, h - t);
             break;
-        case "double":
+        case 'double':
             ctx.lineWidth = t * 0.3;
             ctx.strokeRect(t * 0.15, t * 0.15, w - t * 0.3, h - t * 0.3);
             ctx.strokeRect(t * 0.7, t * 0.7, w - t * 1.4, h - t * 1.4);
             break;
-        case "rounded":
+        case 'rounded':
             ctx.lineWidth = t;
             roundRect(ctx, t / 2, t / 2, w - t, h - t, t * 2);
             ctx.stroke();
             break;
-        case "polaroid":
+        case 'polaroid':
             ctx.fillRect(0, 0, w, t);
             ctx.fillRect(0, 0, t, h);
             ctx.fillRect(w - t, 0, t, h);
             ctx.fillRect(0, h - t * 3, w, t * 3);
             break;
-        case "film": {
+        case 'film': {
             ctx.fillRect(0, 0, w, t);
             ctx.fillRect(0, h - t, w, t);
             const holeW = t * 0.5, holeH = t * 0.7;
             const count = Math.floor(w / (t * 1.5)) || 1;
             const spacing = w / (count + 1);
-            ctx.fillStyle = "#111";
+            ctx.fillStyle = '#111';
             for (let i = 1; i <= count; i++) {
                 const cx = spacing * i;
                 roundRect(ctx, cx - holeW / 2, (t - holeH) / 2, holeW, holeH, 2);
@@ -402,14 +729,19 @@ function renderFrame(ctx, ov, w, h) {
             }
             break;
         }
-        case "vintage": {
+        case 'vintage': {
             ctx.lineWidth = t * 0.5;
             ctx.strokeRect(t * 0.25, t * 0.25, w - t * 0.5, h - t * 0.5);
             ctx.lineWidth = 1;
-            ctx.strokeStyle = ov.color + "88";
+            ctx.strokeStyle = ov.color + '88';
             ctx.strokeRect(t, t, w - t * 2, h - t * 2);
             const os = t * 0.8;
-            for (const [dx, dy] of [[0, 0], [w - os, 0], [0, h - os], [w - os, h - os]]) {
+            for (const [dx, dy] of [
+                [0, 0],
+                [w - os, 0],
+                [0, h - os],
+                [w - os, h - os],
+            ]) {
                 ctx.beginPath();
                 ctx.moveTo(dx + os * 0.2, dy + os * 0.2);
                 ctx.lineTo(dx + os * 0.8, dy + os * 0.2);
@@ -422,13 +754,16 @@ function renderFrame(ctx, ov, w, h) {
             }
             break;
         }
-        case "ornate": {
+        case 'ornate': {
             ctx.lineWidth = t * 0.4;
             ctx.strokeRect(t * 0.2, t * 0.2, w - t * 0.4, h - t * 0.4);
             const cs = t * 1.5;
             ctx.lineWidth = 2;
             for (const [ox, oy, sx, sy] of [
-                [0, 0, 1, 1], [w, 0, -1, 1], [0, h, 1, -1], [w, h, -1, -1],
+                [0, 0, 1, 1],
+                [w, 0, -1, 1],
+                [0, h, 1, -1],
+                [w, h, -1, -1],
             ]) {
                 ctx.save();
                 ctx.translate(ox, oy);
@@ -444,61 +779,65 @@ function renderFrame(ctx, ov, w, h) {
             }
             break;
         }
-        case "shadow":
-            ctx.shadowColor = "rgba(0,0,0,0.5)";
+        case 'shadow':
+            ctx.shadowColor = 'rgba(0,0,0,0.5)';
             ctx.shadowBlur = t * 2;
             ctx.shadowOffsetX = t * 0.5;
             ctx.shadowOffsetY = t * 0.5;
             ctx.lineWidth = t * 0.3;
             ctx.strokeRect(t, t, w - t * 2, h - t * 2);
-            ctx.shadowColor = "transparent";
+            ctx.shadowColor = 'transparent';
             break;
-        case "neon":
+        case 'neon':
             for (let i = 3; i >= 0; i--) {
                 ctx.shadowColor = ov.color;
                 ctx.shadowBlur = t * (i + 1) * 2;
                 ctx.lineWidth = t * 0.2;
-                ctx.strokeStyle = i === 0 ? "#fff" : ov.color;
+                ctx.strokeStyle = i === 0 ? '#fff' : ov.color;
                 ctx.globalAlpha = i === 0 ? ov.opacity : 0.3 * ov.opacity;
                 ctx.strokeRect(t, t, w - t * 2, h - t * 2);
             }
-            ctx.shadowColor = "transparent";
+            ctx.shadowColor = 'transparent';
             break;
-        case "torn": {
+        case 'torn': {
             const step = 8;
             const seed = (i) => {
                 const x = Math.sin(i * 127.1 + 311.7) * 43758.5453;
-                return (x - Math.floor(x)) - 0.5;
+                return x - Math.floor(x) - 0.5;
             };
             // Top
             ctx.beginPath();
             ctx.moveTo(0, 0);
-            for (let i = 0, x = 0; x <= w; x += step, i++)
+            for (let i = 0, x = 0; x <= w; x += step, i++) {
                 ctx.lineTo(x, t + seed(i) * t * 0.8);
+            }
             ctx.lineTo(w, 0);
             ctx.closePath();
             ctx.fill();
             // Bottom
             ctx.beginPath();
             ctx.moveTo(0, h);
-            for (let i = 0, x = 0; x <= w; x += step, i++)
+            for (let i = 0, x = 0; x <= w; x += step, i++) {
                 ctx.lineTo(x, h - t - seed(i + 1000) * t * 0.8);
+            }
             ctx.lineTo(w, h);
             ctx.closePath();
             ctx.fill();
             // Left
             ctx.beginPath();
             ctx.moveTo(0, 0);
-            for (let i = 0, y = 0; y <= h; y += step, i++)
+            for (let i = 0, y = 0; y <= h; y += step, i++) {
                 ctx.lineTo(t + seed(i + 2000) * t * 0.8, y);
+            }
             ctx.lineTo(0, h);
             ctx.closePath();
             ctx.fill();
             // Right
             ctx.beginPath();
             ctx.moveTo(w, 0);
-            for (let i = 0, y = 0; y <= h; y += step, i++)
+            for (let i = 0, y = 0; y <= h; y += step, i++) {
                 ctx.lineTo(w - t - seed(i + 3000) * t * 0.8, y);
+            }
             ctx.lineTo(w, h);
             ctx.closePath();
             ctx.fill();
@@ -527,19 +866,20 @@ function roundRect(ctx, x, y, w, h, r) {
  * hits the bounding box of the overlay (ignoring rotation).
  */
 function hitTestOverlay(ov, px, py, _w, _h) {
-    if (ov.type === "drawing" || ov.type === "frame")
+    if (ov.type === 'drawing' || ov.type === 'frame') {
         return false;
+    }
     let hitW, hitH;
     switch (ov.type) {
-        case "emoji":
+        case 'emoji':
             hitW = hitH = (ov.fontSize * ov.scaleX) / _w;
             break;
-        case "text": {
+        case 'text': {
             hitW = (ov.text.length * ov.fontSize * 0.55 * ov.scaleX) / _w;
             hitH = (ov.fontSize * 1.3 * ov.scaleY) / _h;
             break;
         }
-        case "shape":
+        case 'shape':
             hitW = (ov.width * ov.scaleX) / _w;
             hitH = (ov.height * ov.scaleY) / _h;
             break;
@@ -555,28 +895,34 @@ function hitTestOverlay(ov, px, py, _w, _h) {
 function createEmojiOverlay(emoji, canvasW, canvasH) {
     return {
         id: generateOverlayId(),
-        type: "emoji",
-        x: 0.5, y: 0.5,
-        scaleX: 1, scaleY: 1,
-        rotation: 0, opacity: 1,
+        type: 'emoji',
+        x: 0.5,
+        y: 0.5,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0,
+        opacity: 1,
         emoji,
         fontSize: Math.round(Math.min(canvasW, canvasH) * 0.08),
     };
 }
-function createTextOverlay(text = "Tekst") {
+function createTextOverlay(text = 'Tekst') {
     return {
         id: generateOverlayId(),
-        type: "text",
-        x: 0.5, y: 0.5,
-        scaleX: 1, scaleY: 1,
-        rotation: 0, opacity: 1,
+        type: 'text',
+        x: 0.5,
+        y: 0.5,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0,
+        opacity: 1,
         text,
-        fontFamily: "Arial",
+        fontFamily: 'Arial',
         fontSize: 36,
-        color: "#ffffff",
+        color: '#ffffff',
         bold: true,
         italic: false,
-        outlineColor: "#000000",
+        outlineColor: '#000000',
         outlineWidth: 2,
         shadow: null,
         background: null,
@@ -586,34 +932,44 @@ function createTextOverlay(text = "Tekst") {
 function createShapeOverlay(kind) {
     return {
         id: generateOverlayId(),
-        type: "shape",
-        x: 0.5, y: 0.5,
-        scaleX: 1, scaleY: 1,
-        rotation: 0, opacity: 1,
+        type: 'shape',
+        x: 0.5,
+        y: 0.5,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0,
+        opacity: 1,
         shapeKind: kind,
-        width: 100, height: 100,
+        width: 100,
+        height: 100,
         fillColor: null,
-        strokeColor: "#ffffff",
+        strokeColor: '#ffffff',
         strokeWidth: 3,
     };
 }
 function createDrawingOverlay() {
     return {
         id: generateOverlayId(),
-        type: "drawing",
-        x: 0, y: 0,
-        scaleX: 1, scaleY: 1,
-        rotation: 0, opacity: 1,
+        type: 'drawing',
+        x: 0,
+        y: 0,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0,
+        opacity: 1,
         strokes: [],
     };
 }
-function createFrameOverlay(style, color = "#ffffff") {
+function createFrameOverlay(style, color = '#ffffff') {
     return {
         id: generateOverlayId(),
-        type: "frame",
-        x: 0, y: 0,
-        scaleX: 1, scaleY: 1,
-        rotation: 0, opacity: 1,
+        type: 'frame',
+        x: 0,
+        y: 0,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0,
+        opacity: 1,
         frameStyle: style,
         color,
         thickness: 0.03,