@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/esm/photo/photoOverlays.js

@@ -1,996 +1,965 @@
-import { resolveCssColor } from '@nice2dev/ui-core';
-
-/**
- * photoOverlays.ts — Overlay / layer engine for PhotoEditor.
- *
- * Handles emojis, text, shapes, freehand drawing strokes, and decorative frames
- * as positioned layers on top of the base (filtered) image.
- *
- * All positions use **fractional coordinates** (0 … 1) relative to the rendered
- * canvas so overlays survive crop / resize changes.
- */
+import { resolveCssColor } from "@nice2dev/ui-core";
 const EMOJI_CATALOG = [
-    {
-        id: 'faces',
-        label: 'Faces',
-        icon: '😊',
-        emojis: [
-            '😀',
-            '😃',
-            '😄',
-            '😁',
-            '😆',
-            '😅',
-            '🤣',
-            '😂',
-            '🙂',
-            '😉',
-            '😊',
-            '😇',
-            '🥰',
-            '😍',
-            '🤩',
-            '😘',
-            '😗',
-            '😚',
-            '😋',
-            '😛',
-            '😜',
-            '🤪',
-            '😝',
-            '🤑',
-            '🤗',
-            '🤭',
-            '🤫',
-            '🤔',
-            '😐',
-            '😑',
-            '😶',
-            '🙄',
-            '😏',
-            '😣',
-            '😥',
-            '😮',
-            '🤐',
-            '😯',
-            '😪',
-            '😫',
-            '🥱',
-            '😴',
-            '🤤',
-            '😌',
-            '😷',
-            '🤒',
-            '🤕',
-            '🤢',
-            '🤮',
-            '🥵',
-            '🥶',
-            '🥴',
-            '😵',
-            '🤯',
-            '🤠',
-            '🥳',
-            '🥸',
-            '😎',
-            '🤓',
-            '🧐',
-            '😤',
-            '😡',
-            '🤬',
-            '😈',
-            '👿',
-            '💀',
-            '☠️',
-            '💩',
-            '🤡',
-            '👹',
-            '👻',
-            '👽',
-            '🤖',
-        ],
-    },
-    {
-        id: 'gestures',
-        label: 'Gestures',
-        icon: '👍',
-        emojis: [
-            '👍',
-            '👎',
-            '👊',
-            '✊',
-            '🤛',
-            '🤜',
-            '🤝',
-            '👏',
-            '🙌',
-            '🫶',
-            '👐',
-            '🤲',
-            '🙏',
-            '✌️',
-            '🤞',
-            '🤟',
-            '🤘',
-            '🤙',
-            '👈',
-            '👉',
-            '👆',
-            '👇',
-            '☝️',
-            '✋',
-            '🤚',
-            '🖐️',
-            '🖖',
-            '👋',
-            '🤏',
-            '✍️',
-            '💪',
-            '🦾',
-            '🦵',
-            '🦶',
-            '👂',
-            '👃',
-            '👀',
-            '👁️',
-            '👅',
-            '👄',
-        ],
-    },
-    {
-        id: 'hearts',
-        label: 'Hearts',
-        icon: '❤️',
-        emojis: [
-            '❤️',
-            '🧡',
-            '💛',
-            '💚',
-            '💙',
-            '💜',
-            '🖤',
-            '🤍',
-            '🤎',
-            '❤️‍🔥',
-            '💔',
-            '❣️',
-            '💕',
-            '💞',
-            '💓',
-            '💗',
-            '💖',
-            '💘',
-            '💝',
-            '💟',
-            '♥️',
-            '💌',
-            '💋',
-            '💍',
-            '💎',
-        ],
-    },
-    {
-        id: 'animals',
-        label: 'Animals',
-        icon: '🐶',
-        emojis: [
-            '🐶',
-            '🐱',
-            '🐭',
-            '🐹',
-            '🐰',
-            '🦊',
-            '🐻',
-            '🐼',
-            '🐨',
-            '🐯',
-            '🦁',
-            '🐮',
-            '🐷',
-            '🐸',
-            '🐵',
-            '🙈',
-            '🙉',
-            '🙊',
-            '🐔',
-            '🐧',
-            '🐦',
-            '🦆',
-            '🦅',
-            '🦉',
-            '🦋',
-            '🐌',
-            '🐞',
-            '🐙',
-            '🐬',
-            '🐳',
-            '🦈',
-            '🐊',
-            '🐘',
-            '🦒',
-            '🦘',
-            '🐴',
-            '🦄',
-        ],
-    },
-    {
-        id: 'party',
-        label: 'Party',
-        icon: '🎉',
-        emojis: [
-            '🎉',
-            '🎊',
-            '🎈',
-            '🎁',
-            '🎀',
-            '🎃',
-            '🎄',
-            '🎆',
-            '🎇',
-            '✨',
-            '🏆',
-            '🏅',
-            '🥇',
-            '🥈',
-            '🥉',
-            '🎪',
-            '🎭',
-            '🎨',
-            '🎬',
-            '🎤',
-            '🎧',
-            '🎼',
-            '🎵',
-            '🎶',
-            '🎹',
-            '🥁',
-            '🎷',
-            '🎺',
-            '🎸',
-            '🎻',
-            '🎲',
-            '🎯',
-            '🎳',
-            '🕹️',
-            '🎮',
-            '🎰',
-        ],
-    },
-    {
-        id: 'food',
-        label: 'Food',
-        icon: '🍕',
-        emojis: [
-            '🍏',
-            '🍎',
-            '🍐',
-            '🍊',
-            '🍋',
-            '🍌',
-            '🍉',
-            '🍇',
-            '🍓',
-            '🍒',
-            '🍑',
-            '🥭',
-            '🍍',
-            '🥝',
-            '🍅',
-            '🥑',
-            '🍆',
-            '🌽',
-            '🌶️',
-            '🍞',
-            '🧀',
-            '🥚',
-            '🍳',
-            '🥓',
-            '🍗',
-            '🌭',
-            '🍔',
-            '🍟',
-            '🍕',
-            '🌮',
-            '🌯',
-            '🥪',
-            '🍝',
-            '🍜',
-            '🍣',
-            '🍤',
-            '🍦',
-            '🍰',
-            '🎂',
-            '🍩',
-            '🍪',
-            '🍫',
-            '🍬',
-            '🍭',
-            '🍿',
-            '☕',
-            '🍵',
-            '🍺',
-            '🍻',
-            '🥂',
-            '🍷',
-            '🍸',
-            '🍹',
-            '🧃',
-            '🍾',
-        ],
-    },
-    {
-        id: 'nature',
-        label: 'Nature',
-        icon: '🌸',
-        emojis: [
-            '🌸',
-            '🌺',
-            '🌹',
-            '🌻',
-            '🌼',
-            '💐',
-            '🌷',
-            '🌱',
-            '🪴',
-            '🌲',
-            '🌳',
-            '🌴',
-            '🌵',
-            '🍀',
-            '☘️',
-            '🌿',
-            '🍃',
-            '🍂',
-            '🍁',
-            '🌊',
-            '🌈',
-            '☀️',
-            '🌤️',
-            '⛅',
-            '☁️',
-            '🌧️',
-            '⛈️',
-            '🌩️',
-            '❄️',
-            '☃️',
-            '⛄',
-            '🔥',
-            '💧',
-            '💦',
-            '🌏',
-            '🌙',
-            '🌟',
-            '💫',
-            '✨',
-            '☄️',
-        ],
-    },
-    {
-        id: 'symbols',
-        label: 'Symbols',
-        icon: '⚡',
-        emojis: [
-            '⚡',
-            '💥',
-            '🔥',
-            '✨',
-            '💫',
-            '🌟',
-            '⭐',
-            '💡',
-            '💣',
-            '🧨',
-            '🎯',
-            '♠️',
-            '♥️',
-            '♦️',
-            '♣️',
-            '🔮',
-            '🧿',
-            '♻️',
-            '⚜️',
-            '⭕',
-            '✅',
-            '❌',
-            '➕',
-            '➖',
-            '❗',
-            '❓',
-            '‼️',
-            '⁉️',
-            '💯',
-            '🔴',
-            '🟠',
-            '🟡',
-            '🟢',
-            '🔵',
-            '🟣',
-            '⚫',
-            '⚪',
-            '🔺',
-            '🔻',
-            '🔶',
-            '🔷',
-            '🏳️',
-            '🏴',
-            '🚩',
-            '🏳️‍🌈',
-        ],
-    },
+  {
+    id: "faces",
+    label: "Faces",
+    icon: "😊",
+    emojis: [
+      "😀",
+      "😃",
+      "😄",
+      "😁",
+      "😆",
+      "😅",
+      "🤣",
+      "😂",
+      "🙂",
+      "😉",
+      "😊",
+      "😇",
+      "🥰",
+      "😍",
+      "🤩",
+      "😘",
+      "😗",
+      "😚",
+      "😋",
+      "😛",
+      "😜",
+      "🤪",
+      "😝",
+      "🤑",
+      "🤗",
+      "🤭",
+      "🤫",
+      "🤔",
+      "😐",
+      "😑",
+      "😶",
+      "🙄",
+      "😏",
+      "😣",
+      "😥",
+      "😮",
+      "🤐",
+      "😯",
+      "😪",
+      "😫",
+      "🥱",
+      "😴",
+      "🤤",
+      "😌",
+      "😷",
+      "🤒",
+      "🤕",
+      "🤢",
+      "🤮",
+      "🥵",
+      "🥶",
+      "🥴",
+      "😵",
+      "🤯",
+      "🤠",
+      "🥳",
+      "🥸",
+      "😎",
+      "🤓",
+      "🧐",
+      "😤",
+      "😡",
+      "🤬",
+      "😈",
+      "👿",
+      "💀",
+      "☠️",
+      "💩",
+      "🤡",
+      "👹",
+      "👻",
+      "👽",
+      "🤖"
+    ]
+  },
+  {
+    id: "gestures",
+    label: "Gestures",
+    icon: "👍",
+    emojis: [
+      "👍",
+      "👎",
+      "👊",
+      "✊",
+      "🤛",
+      "🤜",
+      "🤝",
+      "👏",
+      "🙌",
+      "🫶",
+      "👐",
+      "🤲",
+      "🙏",
+      "✌️",
+      "🤞",
+      "🤟",
+      "🤘",
+      "🤙",
+      "👈",
+      "👉",
+      "👆",
+      "👇",
+      "☝️",
+      "✋",
+      "🤚",
+      "🖐️",
+      "🖖",
+      "👋",
+      "🤏",
+      "✍️",
+      "💪",
+      "🦾",
+      "🦵",
+      "🦶",
+      "👂",
+      "👃",
+      "👀",
+      "👁️",
+      "👅",
+      "👄"
+    ]
+  },
+  {
+    id: "hearts",
+    label: "Hearts",
+    icon: "❤️",
+    emojis: [
+      "❤️",
+      "🧡",
+      "💛",
+      "💚",
+      "💙",
+      "💜",
+      "🖤",
+      "🤍",
+      "🤎",
+      "❤️‍🔥",
+      "💔",
+      "❣️",
+      "💕",
+      "💞",
+      "💓",
+      "💗",
+      "💖",
+      "💘",
+      "💝",
+      "💟",
+      "♥️",
+      "💌",
+      "💋",
+      "💍",
+      "💎"
+    ]
+  },
+  {
+    id: "animals",
+    label: "Animals",
+    icon: "🐶",
+    emojis: [
+      "🐶",
+      "🐱",
+      "🐭",
+      "🐹",
+      "🐰",
+      "🦊",
+      "🐻",
+      "🐼",
+      "🐨",
+      "🐯",
+      "🦁",
+      "🐮",
+      "🐷",
+      "🐸",
+      "🐵",
+      "🙈",
+      "🙉",
+      "🙊",
+      "🐔",
+      "🐧",
+      "🐦",
+      "🦆",
+      "🦅",
+      "🦉",
+      "🦋",
+      "🐌",
+      "🐞",
+      "🐙",
+      "🐬",
+      "🐳",
+      "🦈",
+      "🐊",
+      "🐘",
+      "🦒",
+      "🦘",
+      "🐴",
+      "🦄"
+    ]
+  },
+  {
+    id: "party",
+    label: "Party",
+    icon: "🎉",
+    emojis: [
+      "🎉",
+      "🎊",
+      "🎈",
+      "🎁",
+      "🎀",
+      "🎃",
+      "🎄",
+      "🎆",
+      "🎇",
+      "✨",
+      "🏆",
+      "🏅",
+      "🥇",
+      "🥈",
+      "🥉",
+      "🎪",
+      "🎭",
+      "🎨",
+      "🎬",
+      "🎤",
+      "🎧",
+      "🎼",
+      "🎵",
+      "🎶",
+      "🎹",
+      "🥁",
+      "🎷",
+      "🎺",
+      "🎸",
+      "🎻",
+      "🎲",
+      "🎯",
+      "🎳",
+      "🕹️",
+      "🎮",
+      "🎰"
+    ]
+  },
+  {
+    id: "food",
+    label: "Food",
+    icon: "🍕",
+    emojis: [
+      "🍏",
+      "🍎",
+      "🍐",
+      "🍊",
+      "🍋",
+      "🍌",
+      "🍉",
+      "🍇",
+      "🍓",
+      "🍒",
+      "🍑",
+      "🥭",
+      "🍍",
+      "🥝",
+      "🍅",
+      "🥑",
+      "🍆",
+      "🌽",
+      "🌶️",
+      "🍞",
+      "🧀",
+      "🥚",
+      "🍳",
+      "🥓",
+      "🍗",
+      "🌭",
+      "🍔",
+      "🍟",
+      "🍕",
+      "🌮",
+      "🌯",
+      "🥪",
+      "🍝",
+      "🍜",
+      "🍣",
+      "🍤",
+      "🍦",
+      "🍰",
+      "🎂",
+      "🍩",
+      "🍪",
+      "🍫",
+      "🍬",
+      "🍭",
+      "🍿",
+      "☕",
+      "🍵",
+      "🍺",
+      "🍻",
+      "🥂",
+      "🍷",
+      "🍸",
+      "🍹",
+      "🧃",
+      "🍾"
+    ]
+  },
+  {
+    id: "nature",
+    label: "Nature",
+    icon: "🌸",
+    emojis: [
+      "🌸",
+      "🌺",
+      "🌹",
+      "🌻",
+      "🌼",
+      "💐",
+      "🌷",
+      "🌱",
+      "🪴",
+      "🌲",
+      "🌳",
+      "🌴",
+      "🌵",
+      "🍀",
+      "☘️",
+      "🌿",
+      "🍃",
+      "🍂",
+      "🍁",
+      "🌊",
+      "🌈",
+      "☀️",
+      "🌤️",
+      "⛅",
+      "☁️",
+      "🌧️",
+      "⛈️",
+      "🌩️",
+      "❄️",
+      "☃️",
+      "⛄",
+      "🔥",
+      "💧",
+      "💦",
+      "🌏",
+      "🌙",
+      "🌟",
+      "💫",
+      "✨",
+      "☄️"
+    ]
+  },
+  {
+    id: "symbols",
+    label: "Symbols",
+    icon: "⚡",
+    emojis: [
+      "⚡",
+      "💥",
+      "🔥",
+      "✨",
+      "💫",
+      "🌟",
+      "⭐",
+      "💡",
+      "💣",
+      "🧨",
+      "🎯",
+      "♠️",
+      "♥️",
+      "♦️",
+      "♣️",
+      "🔮",
+      "🧿",
+      "♻️",
+      "⚜️",
+      "⭕",
+      "✅",
+      "❌",
+      "➕",
+      "➖",
+      "❗",
+      "❓",
+      "‼️",
+      "⁉️",
+      "💯",
+      "🔴",
+      "🟠",
+      "🟡",
+      "🟢",
+      "🔵",
+      "🟣",
+      "⚫",
+      "⚪",
+      "🔺",
+      "🔻",
+      "🔶",
+      "🔷",
+      "🏳️",
+      "🏴",
+      "🚩",
+      "🏳️‍🌈"
+    ]
+  }
 ];
 const SHAPE_CATALOG = [
-    { id: 'rect', label: 'Rectangle', icon: 'square' },
-    { id: 'circle', label: 'Circle', icon: 'circle' },
-    { id: 'triangle', label: 'Triangle', icon: 'triangle' },
-    { id: 'star', label: 'Star', icon: 'star' },
-    { id: 'heart', label: 'Heart', icon: 'heart' },
-    { id: 'arrow', label: 'Arrow', icon: 'arrow-right' },
-    { id: 'diamond', label: 'Diamond', icon: 'diamond' },
-    { id: 'hexagon', label: 'Hexagon', icon: 'hexagon' },
-    { id: 'cross', label: 'Cross', icon: 'plus' },
-    { id: 'lightning', label: 'Lightning', icon: 'zap' },
+  { id: "rect", label: "Rectangle", icon: "square" },
+  { id: "circle", label: "Circle", icon: "circle" },
+  { id: "triangle", label: "Triangle", icon: "triangle" },
+  { id: "star", label: "Star", icon: "star" },
+  { id: "heart", label: "Heart", icon: "heart" },
+  { id: "arrow", label: "Arrow", icon: "arrow-right" },
+  { id: "diamond", label: "Diamond", icon: "diamond" },
+  { id: "hexagon", label: "Hexagon", icon: "hexagon" },
+  { id: "cross", label: "Cross", icon: "plus" },
+  { id: "lightning", label: "Lightning", icon: "zap" }
 ];
 const FRAME_CATALOG = [
-    { id: 'simple', label: 'Simple', icon: 'square' },
-    { id: 'double', label: 'Double', icon: 'copy' },
-    { id: 'rounded', label: 'Rounded', icon: 'card' },
-    { id: 'polaroid', label: 'Polaroid', icon: 'camera' },
-    { id: 'film', label: 'Film', icon: 'video' },
-    { id: 'vintage', label: 'Vintage', icon: 'image' },
-    { id: 'ornate', label: 'Ornate', icon: 'hexagon' },
-    { id: 'shadow', label: 'Shadow', icon: 'moon' },
-    { id: 'neon', label: 'Neon', icon: 'lightbulb' },
-    { id: 'torn', label: 'Torn', icon: 'file' },
+  { id: "simple", label: "Simple", icon: "square" },
+  { id: "double", label: "Double", icon: "copy" },
+  { id: "rounded", label: "Rounded", icon: "card" },
+  { id: "polaroid", label: "Polaroid", icon: "camera" },
+  { id: "film", label: "Film", icon: "video" },
+  { id: "vintage", label: "Vintage", icon: "image" },
+  { id: "ornate", label: "Ornate", icon: "hexagon" },
+  { id: "shadow", label: "Shadow", icon: "moon" },
+  { id: "neon", label: "Neon", icon: "lightbulb" },
+  { id: "torn", label: "Torn", icon: "file" }
 ];
-// ═══════════════════════════════════════════════════════════════
-// ── ID generation
-// ═══════════════════════════════════════════════════════════════
 let _nextId = 1;
 function generateOverlayId() {
-    return `ov-${_nextId++}-${Date.now().toString(36)}`;
+  return `ov-${_nextId++}-${Date.now().toString(36)}`;
 }
-// ═══════════════════════════════════════════════════════════════
-// ── Rendering
-// ═══════════════════════════════════════════════════════════════
-/** Render all overlays to a canvas context. */
 function renderAllOverlays(ctx, overlays, w, h) {
-    for (const ov of overlays) {
-        renderSingleOverlay(ctx, ov, w, h);
-    }
+  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') {
-        renderDrawing(ctx, ov, w, h);
-        ctx.restore();
-        return;
-    }
-    if (ov.type === 'frame') {
-        renderFrame(ctx, ov, w, h);
-        ctx.restore();
-        return;
-    }
-    // Position-based overlays (emoji, text, shape)
-    const cx = ov.x * w;
-    const cy = ov.y * h;
-    ctx.translate(cx, cy);
-    ctx.rotate((ov.rotation * Math.PI) / 180);
-    ctx.scale(ov.scaleX, ov.scaleY);
-    switch (ov.type) {
-        case 'emoji':
-            renderEmoji(ctx, ov);
-            break;
-        case 'text':
-            renderText(ctx, ov);
-            break;
-        case 'shape':
-            renderShape(ctx, ov);
-            break;
-    }
+  ctx.save();
+  ctx.globalAlpha = ov.opacity;
+  if (ov.type === "drawing") {
+    renderDrawing(ctx, ov, w, h);
+    ctx.restore();
+    return;
+  }
+  if (ov.type === "frame") {
+    renderFrame(ctx, ov, w, h);
     ctx.restore();
+    return;
+  }
+  const cx = ov.x * w;
+  const cy = ov.y * h;
+  ctx.translate(cx, cy);
+  ctx.rotate(ov.rotation * Math.PI / 180);
+  ctx.scale(ov.scaleX, ov.scaleY);
+  switch (ov.type) {
+    case "emoji":
+      renderEmoji(ctx, ov);
+      break;
+    case "text":
+      renderText(ctx, ov);
+      break;
+    case "shape":
+      renderShape(ctx, ov);
+      break;
+  }
+  ctx.restore();
 }
-// -- 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.fillText(ov.emoji, 0, 0);
+  ctx.font = `${ov.fontSize}px "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif`;
+  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 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 pad = ov.backgroundPadding;
-        ctx.fillStyle = ov.background;
-        const rx = -(maxW / 2 + pad);
-        const ry = startY - lineH / 2 - pad;
-        roundRect(ctx, rx, ry, maxW + pad * 2, totalH + pad * 2, 6);
-        ctx.fill();
-    }
-    // Shadow
-    if (ov.shadow) {
-        ctx.shadowColor = ov.shadow;
-        ctx.shadowBlur = 4;
-        ctx.shadowOffsetX = 2;
-        ctx.shadowOffsetY = 2;
-    }
-    for (let i = 0; i < lines.length; i++) {
-        const ly = startY + i * lineH;
-        if (ov.outlineColor && ov.outlineWidth > 0) {
-            ctx.strokeStyle = ov.outlineColor;
-            ctx.lineWidth = ov.outlineWidth;
-            ctx.lineJoin = 'round';
-            ctx.strokeText(lines[i], 0, ly);
-        }
-        ctx.fillStyle = ov.color;
-        ctx.fillText(lines[i], 0, ly);
+  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;
+  if (ov.background) {
+    const maxW = Math.max(...lines.map((l) => ctx.measureText(l).width));
+    const pad = ov.backgroundPadding;
+    ctx.fillStyle = ov.background;
+    const rx = -(maxW / 2 + pad);
+    const ry = startY - lineH / 2 - pad;
+    roundRect(ctx, rx, ry, maxW + pad * 2, totalH + pad * 2, 6);
+    ctx.fill();
+  }
+  if (ov.shadow) {
+    ctx.shadowColor = ov.shadow;
+    ctx.shadowBlur = 4;
+    ctx.shadowOffsetX = 2;
+    ctx.shadowOffsetY = 2;
+  }
+  for (let i = 0; i < lines.length; i++) {
+    const ly = startY + i * lineH;
+    if (ov.outlineColor && ov.outlineWidth > 0) {
+      ctx.strokeStyle = ov.outlineColor;
+      ctx.lineWidth = ov.outlineWidth;
+      ctx.lineJoin = "round";
+      ctx.strokeText(lines[i], 0, ly);
     }
-    ctx.shadowColor = 'transparent';
+    ctx.fillStyle = ov.color;
+    ctx.fillText(lines[i], 0, ly);
+  }
+  ctx.shadowColor = "transparent";
 }
-// -- Shape -------------------------------------------------------
 function renderShape(ctx, ov) {
-    drawShapePath(ctx, ov.shapeKind, ov.width, ov.height);
-    if (ov.fillColor) {
-        ctx.fillStyle = ov.fillColor;
-        ctx.fill();
-    }
-    if (ov.strokeColor && ov.strokeWidth > 0) {
-        ctx.strokeStyle = ov.strokeColor;
-        ctx.lineWidth = ov.strokeWidth;
-        ctx.stroke();
-    }
+  drawShapePath(ctx, ov.shapeKind, ov.width, ov.height);
+  if (ov.fillColor) {
+    ctx.fillStyle = ov.fillColor;
+    ctx.fill();
+  }
+  if (ov.strokeColor && ov.strokeWidth > 0) {
+    ctx.strokeStyle = ov.strokeColor;
+    ctx.lineWidth = ov.strokeWidth;
+    ctx.stroke();
+  }
 }
 function drawShapePath(ctx, kind, w, h) {
-    const hw = w / 2, hh = h / 2;
-    ctx.beginPath();
-    switch (kind) {
-        case 'rect':
-            ctx.rect(-hw, -hh, w, h);
-            break;
-        case 'circle':
-            ctx.ellipse(0, 0, hw, hh, 0, 0, Math.PI * 2);
-            break;
-        case 'triangle':
-            ctx.moveTo(0, -hh);
-            ctx.lineTo(hw, hh);
-            ctx.lineTo(-hw, hh);
-            ctx.closePath();
-            break;
-        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) {
-                    ctx.moveTo(Math.cos(a) * r, Math.sin(a) * r);
-                }
-                else {
-                    ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r);
-                }
-            }
-            ctx.closePath();
-            break;
-        }
-        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':
-            ctx.moveTo(-hw, -hh * 0.3);
-            ctx.lineTo(hw * 0.3, -hh * 0.3);
-            ctx.lineTo(hw * 0.3, -hh);
-            ctx.lineTo(hw, 0);
-            ctx.lineTo(hw * 0.3, hh);
-            ctx.lineTo(hw * 0.3, hh * 0.3);
-            ctx.lineTo(-hw, hh * 0.3);
-            ctx.closePath();
-            break;
-        case 'diamond':
-            ctx.moveTo(0, -hh);
-            ctx.lineTo(hw, 0);
-            ctx.lineTo(0, hh);
-            ctx.lineTo(-hw, 0);
-            ctx.closePath();
-            break;
-        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) {
-                    ctx.moveTo(px, py);
-                }
-                else {
-                    ctx.lineTo(px, py);
-                }
-            }
-            ctx.closePath();
-            break;
-        case 'cross': {
-            const t = Math.min(hw, hh) * 0.3;
-            ctx.moveTo(-t, -hh);
-            ctx.lineTo(t, -hh);
-            ctx.lineTo(t, -t);
-            ctx.lineTo(hw, -t);
-            ctx.lineTo(hw, t);
-            ctx.lineTo(t, t);
-            ctx.lineTo(t, hh);
-            ctx.lineTo(-t, hh);
-            ctx.lineTo(-t, t);
-            ctx.lineTo(-hw, t);
-            ctx.lineTo(-hw, -t);
-            ctx.lineTo(-t, -t);
-            ctx.closePath();
-            break;
-        }
-        case 'lightning': {
-            const s = Math.min(hw, hh);
-            ctx.moveTo(-s * 0.1, -s);
-            ctx.lineTo(s * 0.5, -s * 0.1);
-            ctx.lineTo(s * 0.05, -s * 0.1);
-            ctx.lineTo(s * 0.4, s);
-            ctx.lineTo(-s * 0.15, s * 0.15);
-            ctx.lineTo(s * 0.05, s * 0.15);
-            ctx.lineTo(-s * 0.4, -s * 0.5);
-            ctx.closePath();
-            break;
+  const hw = w / 2, hh = h / 2;
+  ctx.beginPath();
+  switch (kind) {
+    case "rect":
+      ctx.rect(-hw, -hh, w, h);
+      break;
+    case "circle":
+      ctx.ellipse(0, 0, hw, hh, 0, 0, Math.PI * 2);
+      break;
+    case "triangle":
+      ctx.moveTo(0, -hh);
+      ctx.lineTo(hw, hh);
+      ctx.lineTo(-hw, hh);
+      ctx.closePath();
+      break;
+    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) {
+          ctx.moveTo(Math.cos(a) * r, Math.sin(a) * r);
+        } else {
+          ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r);
         }
+      }
+      ctx.closePath();
+      break;
     }
-}
-// -- Drawing (freehand strokes) ----------------------------------
-function renderDrawing(ctx, ov, w, h) {
-    for (const stroke of ov.strokes) {
-        if (stroke.points.length < 2) {
-            continue;
-        }
-        ctx.beginPath();
-        ctx.strokeStyle = stroke.color;
-        ctx.lineWidth = stroke.width;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        ctx.globalAlpha = stroke.opacity;
-        const [sx, sy] = stroke.points[0];
-        ctx.moveTo(sx * w, sy * h);
-        for (let i = 1; i < stroke.points.length; i++) {
-            const [px, py] = stroke.points[i];
-            ctx.lineTo(px * w, py * h);
+    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":
+      ctx.moveTo(-hw, -hh * 0.3);
+      ctx.lineTo(hw * 0.3, -hh * 0.3);
+      ctx.lineTo(hw * 0.3, -hh);
+      ctx.lineTo(hw, 0);
+      ctx.lineTo(hw * 0.3, hh);
+      ctx.lineTo(hw * 0.3, hh * 0.3);
+      ctx.lineTo(-hw, hh * 0.3);
+      ctx.closePath();
+      break;
+    case "diamond":
+      ctx.moveTo(0, -hh);
+      ctx.lineTo(hw, 0);
+      ctx.lineTo(0, hh);
+      ctx.lineTo(-hw, 0);
+      ctx.closePath();
+      break;
+    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) {
+          ctx.moveTo(px, py);
+        } else {
+          ctx.lineTo(px, py);
         }
-        ctx.stroke();
+      }
+      ctx.closePath();
+      break;
+    case "cross": {
+      const t = Math.min(hw, hh) * 0.3;
+      ctx.moveTo(-t, -hh);
+      ctx.lineTo(t, -hh);
+      ctx.lineTo(t, -t);
+      ctx.lineTo(hw, -t);
+      ctx.lineTo(hw, t);
+      ctx.lineTo(t, t);
+      ctx.lineTo(t, hh);
+      ctx.lineTo(-t, hh);
+      ctx.lineTo(-t, t);
+      ctx.lineTo(-hw, t);
+      ctx.lineTo(-hw, -t);
+      ctx.lineTo(-t, -t);
+      ctx.closePath();
+      break;
+    }
+    case "lightning": {
+      const s = Math.min(hw, hh);
+      ctx.moveTo(-s * 0.1, -s);
+      ctx.lineTo(s * 0.5, -s * 0.1);
+      ctx.lineTo(s * 0.05, -s * 0.1);
+      ctx.lineTo(s * 0.4, s);
+      ctx.lineTo(-s * 0.15, s * 0.15);
+      ctx.lineTo(s * 0.05, s * 0.15);
+      ctx.lineTo(-s * 0.4, -s * 0.5);
+      ctx.closePath();
+      break;
     }
+  }
 }
-// -- Canvas stroke (draw a live, in-progress stroke) -------------
-function renderLiveStroke(ctx, points, color, width, canvasW, canvasH) {
-    if (points.length < 2) {
-        return;
+function renderDrawing(ctx, ov, w, h) {
+  for (const stroke of ov.strokes) {
+    if (stroke.points.length < 2) {
+      continue;
     }
-    ctx.save();
     ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = width;
-    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);
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.globalAlpha = stroke.opacity;
+    const [sx, sy] = stroke.points[0];
+    ctx.moveTo(sx * w, sy * h);
+    for (let i = 1; i < stroke.points.length; i++) {
+      const [px, py] = stroke.points[i];
+      ctx.lineTo(px * w, py * h);
     }
     ctx.stroke();
-    ctx.restore();
+  }
+}
+function renderLiveStroke(ctx, points, color, width, canvasW, canvasH) {
+  if (points.length < 2) {
+    return;
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  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);
+  }
+  ctx.stroke();
+  ctx.restore();
 }
-// -- Frame -------------------------------------------------------
 function renderFrame(ctx, ov, w, h) {
-    const t = Math.min(w, h) * ov.thickness;
-    ctx.strokeStyle = ov.color;
-    ctx.fillStyle = ov.color;
-    switch (ov.frameStyle) {
-        case 'simple':
-            ctx.lineWidth = t;
-            ctx.strokeRect(t / 2, t / 2, w - t, h - t);
-            break;
-        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':
-            ctx.lineWidth = t;
-            roundRect(ctx, t / 2, t / 2, w - t, h - t, t * 2);
-            ctx.stroke();
-            break;
-        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': {
-            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 = resolveCssColor('var(--nice-text, #111)', ctx.canvas);
-            for (let i = 1; i <= count; i++) {
-                const cx = spacing * i;
-                roundRect(ctx, cx - holeW / 2, (t - holeH) / 2, holeW, holeH, 2);
-                ctx.fill();
-                roundRect(ctx, cx - holeW / 2, h - t + (t - holeH) / 2, holeW, holeH, 2);
-                ctx.fill();
-            }
-            break;
-        }
-        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.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],
-            ]) {
-                ctx.beginPath();
-                ctx.moveTo(dx + os * 0.2, dy + os * 0.2);
-                ctx.lineTo(dx + os * 0.8, dy + os * 0.2);
-                ctx.lineTo(dx + os * 0.5, dy + os * 0.5);
-                ctx.lineTo(dx + os * 0.2, dy + os * 0.8);
-                ctx.closePath();
-                ctx.strokeStyle = ov.color;
-                ctx.lineWidth = 1.5;
-                ctx.stroke();
-            }
-            break;
-        }
-        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],
-            ]) {
-                ctx.save();
-                ctx.translate(ox, oy);
-                ctx.scale(sx, sy);
-                ctx.beginPath();
-                ctx.arc(cs * 0.3, cs * 0.3, cs * 0.2, 0, Math.PI * 1.5, true);
-                ctx.stroke();
-                ctx.beginPath();
-                ctx.moveTo(0, cs * 0.5);
-                ctx.quadraticCurveTo(cs * 0.5, cs * 0.5, cs * 0.5, 0);
-                ctx.stroke();
-                ctx.restore();
-            }
-            break;
-        }
-        case 'shadow':
-            ctx.shadowColor = resolveCssColor('var(--nice-overlay-50, rgba(0, 0, 0, 0.5))', ctx.canvas);
-            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';
-            break;
-        case 'neon':
-            for (let i = 3; i >= 0; i--) {
-                ctx.shadowColor = ov.color;
-                ctx.shadowBlur = t * (i + 1) * 2;
-                ctx.lineWidth = t * 0.2;
-                // The white core of the neon tube is drawn INTO the photo (canvas ignores var()).
-                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';
-            break;
-        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;
-            };
-            // Top
-            ctx.beginPath();
-            ctx.moveTo(0, 0);
-            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++) {
-                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++) {
-                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++) {
-                ctx.lineTo(w - t - seed(i + 3000) * t * 0.8, y);
-            }
-            ctx.lineTo(w, h);
-            ctx.closePath();
-            ctx.fill();
-            break;
-        }
+  const t = Math.min(w, h) * ov.thickness;
+  ctx.strokeStyle = ov.color;
+  ctx.fillStyle = ov.color;
+  switch (ov.frameStyle) {
+    case "simple":
+      ctx.lineWidth = t;
+      ctx.strokeRect(t / 2, t / 2, w - t, h - t);
+      break;
+    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":
+      ctx.lineWidth = t;
+      roundRect(ctx, t / 2, t / 2, w - t, h - t, t * 2);
+      ctx.stroke();
+      break;
+    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": {
+      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 = resolveCssColor("var(--nice-text, #111)", ctx.canvas);
+      for (let i = 1; i <= count; i++) {
+        const cx = spacing * i;
+        roundRect(ctx, cx - holeW / 2, (t - holeH) / 2, holeW, holeH, 2);
+        ctx.fill();
+        roundRect(ctx, cx - holeW / 2, h - t + (t - holeH) / 2, holeW, holeH, 2);
+        ctx.fill();
+      }
+      break;
     }
+    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.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]
+      ]) {
+        ctx.beginPath();
+        ctx.moveTo(dx + os * 0.2, dy + os * 0.2);
+        ctx.lineTo(dx + os * 0.8, dy + os * 0.2);
+        ctx.lineTo(dx + os * 0.5, dy + os * 0.5);
+        ctx.lineTo(dx + os * 0.2, dy + os * 0.8);
+        ctx.closePath();
+        ctx.strokeStyle = ov.color;
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      }
+      break;
+    }
+    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]
+      ]) {
+        ctx.save();
+        ctx.translate(ox, oy);
+        ctx.scale(sx, sy);
+        ctx.beginPath();
+        ctx.arc(cs * 0.3, cs * 0.3, cs * 0.2, 0, Math.PI * 1.5, true);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(0, cs * 0.5);
+        ctx.quadraticCurveTo(cs * 0.5, cs * 0.5, cs * 0.5, 0);
+        ctx.stroke();
+        ctx.restore();
+      }
+      break;
+    }
+    case "shadow":
+      ctx.shadowColor = resolveCssColor("var(--nice-overlay-50, rgba(0, 0, 0, 0.5))", ctx.canvas);
+      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";
+      break;
+    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.globalAlpha = i === 0 ? ov.opacity : 0.3 * ov.opacity;
+        ctx.strokeRect(t, t, w - t * 2, h - t * 2);
+      }
+      ctx.shadowColor = "transparent";
+      break;
+    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;
+      };
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      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();
+      ctx.beginPath();
+      ctx.moveTo(0, h);
+      for (let i = 0, x = 0; x <= w; x += step, i++) {
+        ctx.lineTo(x, h - t - seed(i + 1e3) * t * 0.8);
+      }
+      ctx.lineTo(w, h);
+      ctx.closePath();
+      ctx.fill();
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      for (let i = 0, y = 0; y <= h; y += step, i++) {
+        ctx.lineTo(t + seed(i + 2e3) * t * 0.8, y);
+      }
+      ctx.lineTo(0, h);
+      ctx.closePath();
+      ctx.fill();
+      ctx.beginPath();
+      ctx.moveTo(w, 0);
+      for (let i = 0, y = 0; y <= h; y += step, i++) {
+        ctx.lineTo(w - t - seed(i + 3e3) * t * 0.8, y);
+      }
+      ctx.lineTo(w, h);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+  }
 }
 function roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    ctx.lineTo(x + w, y + h - r);
-    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-    ctx.lineTo(x + r, y + h);
-    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
-    ctx.closePath();
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx.lineTo(x + r, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
 }
-// ═══════════════════════════════════════════════════════════════
-// ── Hit testing
-// ═══════════════════════════════════════════════════════════════
-/**
- * Returns `true` when the point (px, py) in canvas-fraction space
- * hits the bounding box of the overlay (ignoring rotation).
- */
 function hitTestOverlay(ov, px, py, _w, _h) {
-    if (ov.type === 'drawing' || ov.type === 'frame') {
-        return false;
-    }
-    let hitW, hitH;
-    switch (ov.type) {
-        case 'emoji':
-            hitW = hitH = (ov.fontSize * ov.scaleX) / _w;
-            break;
-        case 'text': {
-            hitW = (ov.text.length * ov.fontSize * 0.55 * ov.scaleX) / _w;
-            hitH = (ov.fontSize * 1.3 * ov.scaleY) / _h;
-            break;
-        }
-        case 'shape':
-            hitW = (ov.width * ov.scaleX) / _w;
-            hitH = (ov.height * ov.scaleY) / _h;
-            break;
-        default:
-            return false;
+  if (ov.type === "drawing" || ov.type === "frame") {
+    return false;
+  }
+  let hitW, hitH;
+  switch (ov.type) {
+    case "emoji":
+      hitW = hitH = ov.fontSize * ov.scaleX / _w;
+      break;
+    case "text": {
+      hitW = ov.text.length * ov.fontSize * 0.55 * ov.scaleX / _w;
+      hitH = ov.fontSize * 1.3 * ov.scaleY / _h;
+      break;
     }
-    const margin = 15 / _w;
-    return Math.abs(px - ov.x) < hitW / 2 + margin && Math.abs(py - ov.y) < hitH / 2 + margin;
+    case "shape":
+      hitW = ov.width * ov.scaleX / _w;
+      hitH = ov.height * ov.scaleY / _h;
+      break;
+    default:
+      return false;
+  }
+  const margin = 15 / _w;
+  return Math.abs(px - ov.x) < hitW / 2 + margin && Math.abs(py - ov.y) < hitH / 2 + margin;
 }
-// ═══════════════════════════════════════════════════════════════
-// ── Factory helpers
-// ═══════════════════════════════════════════════════════════════
 function createEmojiOverlay(emoji, canvasW, canvasH) {
-    return {
-        id: generateOverlayId(),
-        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),
-    };
+  return {
+    id: generateOverlayId(),
+    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 = 'Text') {
-    return {
-        id: generateOverlayId(),
-        type: 'text',
-        x: 0.5,
-        y: 0.5,
-        scaleX: 1,
-        scaleY: 1,
-        rotation: 0,
-        opacity: 1,
-        text,
-        fontFamily: 'Arial',
-        fontSize: 36,
-        // Overlay colours are paint drawn into the photo on canvas (which ignores var()),
-        // and some are extended with an alpha byte (`color + '88'`) — so hex.
-        color: '#ffffff',
-        bold: true,
-        italic: false,
-        outlineColor: '#000000',
-        outlineWidth: 2,
-        shadow: null,
-        background: null,
-        backgroundPadding: 6,
-    };
+function createTextOverlay(text = "Text") {
+  return {
+    id: generateOverlayId(),
+    type: "text",
+    x: 0.5,
+    y: 0.5,
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+    opacity: 1,
+    text,
+    fontFamily: "Arial",
+    fontSize: 36,
+    // Overlay colours are paint drawn into the photo on canvas (which ignores var()),
+    // and some are extended with an alpha byte (`color + '88'`) — so hex.
+    color: "#ffffff",
+    bold: true,
+    italic: false,
+    outlineColor: "#000000",
+    outlineWidth: 2,
+    shadow: null,
+    background: null,
+    backgroundPadding: 6
+  };
 }
 function createShapeOverlay(kind) {
-    return {
-        id: generateOverlayId(),
-        type: 'shape',
-        x: 0.5,
-        y: 0.5,
-        scaleX: 1,
-        scaleY: 1,
-        rotation: 0,
-        opacity: 1,
-        shapeKind: kind,
-        width: 100,
-        height: 100,
-        fillColor: null,
-        strokeColor: '#ffffff',
-        strokeWidth: 3,
-    };
+  return {
+    id: generateOverlayId(),
+    type: "shape",
+    x: 0.5,
+    y: 0.5,
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+    opacity: 1,
+    shapeKind: kind,
+    width: 100,
+    height: 100,
+    fillColor: null,
+    strokeColor: "#ffffff",
+    strokeWidth: 3
+  };
 }
 function createDrawingOverlay() {
-    return {
-        id: generateOverlayId(),
-        type: 'drawing',
-        x: 0,
-        y: 0,
-        scaleX: 1,
-        scaleY: 1,
-        rotation: 0,
-        opacity: 1,
-        strokes: [],
-    };
+  return {
+    id: generateOverlayId(),
+    type: "drawing",
+    x: 0,
+    y: 0,
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+    opacity: 1,
+    strokes: []
+  };
 }
-function createFrameOverlay(style, color = '#ffffff') {
-    return {
-        id: generateOverlayId(),
-        type: 'frame',
-        x: 0,
-        y: 0,
-        scaleX: 1,
-        scaleY: 1,
-        rotation: 0,
-        opacity: 1,
-        frameStyle: style,
-        color,
-        thickness: 0.03,
-    };
+function createFrameOverlay(style, color = "#ffffff") {
+  return {
+    id: generateOverlayId(),
+    type: "frame",
+    x: 0,
+    y: 0,
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+    opacity: 1,
+    frameStyle: style,
+    color,
+    thickness: 0.03
+  };
 }
 function serializeEditorState(state) {
-    return JSON.stringify(state);
+  return JSON.stringify(state);
 }
 function deserializeEditorState(json) {
-    try {
-        return JSON.parse(json);
-    }
-    catch (_a) {
-        /* Expected: JSON.parse may fail on malformed serialized state */
-        return null;
-    }
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
 }
-
-export { EMOJI_CATALOG, FRAME_CATALOG, SHAPE_CATALOG, createDrawingOverlay, createEmojiOverlay, createFrameOverlay, createShapeOverlay, createTextOverlay, deserializeEditorState, generateOverlayId, hitTestOverlay, renderAllOverlays, renderLiveStroke, serializeEditorState };
+export {
+  EMOJI_CATALOG,
+  FRAME_CATALOG,
+  SHAPE_CATALOG,
+  createDrawingOverlay,
+  createEmojiOverlay,
+  createFrameOverlay,
+  createShapeOverlay,
+  createTextOverlay,
+  deserializeEditorState,
+  generateOverlayId,
+  hitTestOverlay,
+  renderAllOverlays,
+  renderLiveStroke,
+  serializeEditorState
+};