@nice2dev/icons 1.3.15 → 1.3.16

package/dist/esm/NiceDesktopIconExporter.js

@@ -1,651 +1,724 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useNiceTranslation } from '@nice2dev/ui-core';
-import { useState, useMemo, useCallback } from 'react';
-
-/* ══════════════════════════════════════════════════════════════════════════════
-   Constants
-   ══════════════════════════════════════════════════════════════════════════════ */
-/** Standard desktop icon sizes used across platforms */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useNiceTranslation } from "@nice2dev/ui-core";
+import { useState, useMemo, useCallback } from "react";
+/* empty css                            */
 const DESKTOP_ICON_SIZES = [
-    { size: 16, label: '16×16', platforms: ['windows', 'linux'] },
-    { size: 24, label: '24×24', platforms: ['linux'] },
-    { size: 32, label: '32×32', platforms: ['windows', 'linux'] },
-    { size: 48, label: '48×48', platforms: ['windows', 'linux'] },
-    { size: 64, label: '64×64', platforms: ['windows', 'linux'] },
-    { size: 128, label: '128×128', platforms: ['windows', 'macos', 'linux'] },
-    { size: 256, label: '256×256', platforms: ['windows', 'macos', 'linux'] },
-    { size: 512, label: '512×512', platforms: ['macos', 'linux'] },
-    { size: 1024, label: '1024×1024', platforms: ['macos'] },
+  { size: 16, label: "16×16", platforms: ["windows", "linux"] },
+  { size: 24, label: "24×24", platforms: ["linux"] },
+  { size: 32, label: "32×32", platforms: ["windows", "linux"] },
+  { size: 48, label: "48×48", platforms: ["windows", "linux"] },
+  { size: 64, label: "64×64", platforms: ["windows", "linux"] },
+  { size: 128, label: "128×128", platforms: ["windows", "macos", "linux"] },
+  { size: 256, label: "256×256", platforms: ["windows", "macos", "linux"] },
+  { size: 512, label: "512×512", platforms: ["macos", "linux"] },
+  { size: 1024, label: "1024×1024", platforms: ["macos"] }
 ];
-/** Retina/HiDPI scale factors */
 const RETINA_VARIANTS = [
-    { scale: 1, suffix: '' },
-    { scale: 2, suffix: '@2x' },
-    { scale: 3, suffix: '@3x' },
+  { scale: 1, suffix: "" },
+  { scale: 2, suffix: "@2x" },
+  { scale: 3, suffix: "@3x" }
 ];
-/** Default export configuration */
 const DEFAULT_CONFIG = {
-    name: 'icon',
-    includeWindows: true,
-    includeMacOS: true,
-    includeLinux: true,
-    includeRetina: true,
-    backgroundColor: undefined, // transparent
-    padding: 0.1,
-    fillColor: '#1e1e1e',
-    sizes: [16, 32, 48, 64, 128, 256, 512],
+  name: "icon",
+  includeWindows: true,
+  includeMacOS: true,
+  includeLinux: true,
+  includeRetina: true,
+  backgroundColor: void 0,
+  // transparent
+  padding: 0.1,
+  fillColor: "#1e1e1e",
+  sizes: [16, 32, 48, 64, 128, 256, 512]
 };
-/** Linux hicolor theme icon directories */
 const LINUX_HICOLOR_DIRS = [
-    { size: 16, dir: 'hicolor/16x16/apps' },
-    { size: 24, dir: 'hicolor/24x24/apps' },
-    { size: 32, dir: 'hicolor/32x32/apps' },
-    { size: 48, dir: 'hicolor/48x48/apps' },
-    { size: 64, dir: 'hicolor/64x64/apps' },
-    { size: 128, dir: 'hicolor/128x128/apps' },
-    { size: 256, dir: 'hicolor/256x256/apps' },
-    { size: 512, dir: 'hicolor/512x512/apps' },
+  { size: 16, dir: "hicolor/16x16/apps" },
+  { size: 24, dir: "hicolor/24x24/apps" },
+  { size: 32, dir: "hicolor/32x32/apps" },
+  { size: 48, dir: "hicolor/48x48/apps" },
+  { size: 64, dir: "hicolor/64x64/apps" },
+  { size: 128, dir: "hicolor/128x128/apps" },
+  { size: 256, dir: "hicolor/256x256/apps" },
+  { size: 512, dir: "hicolor/512x512/apps" }
 ];
-/* ══════════════════════════════════════════════════════════════════════════════
-   Utility Functions
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Render an icon component to a canvas at the specified size
- */
 async function renderIconToCanvas(IconComponent, size, fillColor, backgroundColor, padding = 0.1) {
-    const canvas = document.createElement('canvas');
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext('2d');
-    // Fill background (or make transparent)
-    if (backgroundColor) {
-        ctx.fillStyle = backgroundColor;
-        ctx.fillRect(0, 0, size, size);
-    }
-    else {
-        ctx.clearRect(0, 0, size, size);
-    }
-    // Render icon to temporary container
-    const container = document.createElement('div');
-    const iconSize = Math.round(size * (1 - padding * 2));
-    const offset = Math.round(size * padding);
-    const { createRoot } = await import('react-dom/client');
-    const root = createRoot(container);
-    return new Promise((resolve) => {
-        root.render(jsx(IconComponent, { size: iconSize, fill: fillColor }));
-        // Wait for render
-        setTimeout(() => {
-            const svg = container.querySelector('svg');
-            if (svg) {
-                const svgData = new XMLSerializer().serializeToString(svg);
-                const img = new Image();
-                img.onload = () => {
-                    ctx.drawImage(img, offset, offset, iconSize, iconSize);
-                    root.unmount();
-                    resolve(canvas);
-                };
-                img.onerror = () => {
-                    root.unmount();
-                    resolve(canvas);
-                };
-                img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
-            }
-            else {
-                root.unmount();
-                resolve(canvas);
-            }
-        }, 50);
-    });
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  if (backgroundColor) {
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, size, size);
+  } else {
+    ctx.clearRect(0, 0, size, size);
+  }
+  const container = document.createElement("div");
+  const iconSize = Math.round(size * (1 - padding * 2));
+  const offset = Math.round(size * padding);
+  const { createRoot } = await import("react-dom/client");
+  const root = createRoot(container);
+  return new Promise((resolve) => {
+    root.render(/* @__PURE__ */ jsx(IconComponent, { size: iconSize, fill: fillColor }));
+    setTimeout(() => {
+      const svg = container.querySelector("svg");
+      if (svg) {
+        const svgData = new XMLSerializer().serializeToString(svg);
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, offset, offset, iconSize, iconSize);
+          root.unmount();
+          resolve(canvas);
+        };
+        img.onerror = () => {
+          root.unmount();
+          resolve(canvas);
+        };
+        img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)));
+      } else {
+        root.unmount();
+        resolve(canvas);
+      }
+    }, 50);
+  });
 }
-/**
- * Convert canvas to PNG blob
- */
 function canvasToBlob(canvas) {
-    return new Promise((resolve, reject) => {
-        canvas.toBlob((blob) => {
-            if (blob) {
-                resolve(blob);
-            }
-            else {
-                reject(new Error('Failed to convert canvas to blob'));
-            }
-        }, 'image/png');
-    });
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob);
+      } else {
+        reject(new Error("Failed to convert canvas to blob"));
+      }
+    }, "image/png");
+  });
 }
-/**
- * Create a Windows ICO file from multiple PNG images.
- * ICO format: https://en.wikipedia.org/wiki/ICO_(file_format)
- */
 async function createIcoFile(pngBuffers) {
-    // Sort by size descending
-    const sorted = [...pngBuffers].sort((a, b) => b.size - a.size);
-    // ICO header: 6 bytes
-    // Image entry: 16 bytes each
-    const headerSize = 6;
-    const entrySize = 16;
-    const directorySize = headerSize + entrySize * sorted.length;
-    // Calculate total size and offsets
-    let currentOffset = directorySize;
-    const entries = [];
-    for (const png of sorted) {
-        entries.push({ size: png.size, offset: currentOffset, data: png.data });
-        currentOffset += png.data.byteLength;
-    }
-    // Create the ICO buffer
-    const totalSize = currentOffset;
-    const buffer = new ArrayBuffer(totalSize);
-    const view = new DataView(buffer);
-    const uint8 = new Uint8Array(buffer);
-    // Write ICO header
-    view.setUint16(0, 0, true); // Reserved (must be 0)
-    view.setUint16(2, 1, true); // Type (1 = ICO)
-    view.setUint16(4, sorted.length, true); // Number of images
-    // Write image directory entries
-    let entryOffset = headerSize;
-    for (const entry of entries) {
-        const size = entry.size > 255 ? 0 : entry.size; // 0 means 256
-        view.setUint8(entryOffset + 0, size); // Width
-        view.setUint8(entryOffset + 1, size); // Height
-        view.setUint8(entryOffset + 2, 0); // Color palette (0 = no palette)
-        view.setUint8(entryOffset + 3, 0); // Reserved
-        view.setUint16(entryOffset + 4, 1, true); // Color planes
-        view.setUint16(entryOffset + 6, 32, true); // Bits per pixel
-        view.setUint32(entryOffset + 8, entry.data.byteLength, true); // Image data size
-        view.setUint32(entryOffset + 12, entry.offset, true); // Image data offset
-        entryOffset += entrySize;
-    }
-    // Write image data
-    for (const entry of entries) {
-        uint8.set(new Uint8Array(entry.data), entry.offset);
-    }
-    return new Blob([buffer], { type: 'image/x-icon' });
+  const sorted = [...pngBuffers].sort((a, b) => b.size - a.size);
+  const headerSize = 6;
+  const entrySize = 16;
+  const directorySize = headerSize + entrySize * sorted.length;
+  let currentOffset = directorySize;
+  const entries = [];
+  for (const png of sorted) {
+    entries.push({ size: png.size, offset: currentOffset, data: png.data });
+    currentOffset += png.data.byteLength;
+  }
+  const totalSize = currentOffset;
+  const buffer = new ArrayBuffer(totalSize);
+  const view = new DataView(buffer);
+  const uint8 = new Uint8Array(buffer);
+  view.setUint16(0, 0, true);
+  view.setUint16(2, 1, true);
+  view.setUint16(4, sorted.length, true);
+  let entryOffset = headerSize;
+  for (const entry of entries) {
+    const size = entry.size > 255 ? 0 : entry.size;
+    view.setUint8(entryOffset + 0, size);
+    view.setUint8(entryOffset + 1, size);
+    view.setUint8(entryOffset + 2, 0);
+    view.setUint8(entryOffset + 3, 0);
+    view.setUint16(entryOffset + 4, 1, true);
+    view.setUint16(entryOffset + 6, 32, true);
+    view.setUint32(entryOffset + 8, entry.data.byteLength, true);
+    view.setUint32(entryOffset + 12, entry.offset, true);
+    entryOffset += entrySize;
+  }
+  for (const entry of entries) {
+    uint8.set(new Uint8Array(entry.data), entry.offset);
+  }
+  return new Blob([buffer], { type: "image/x-icon" });
 }
-/**
- * Create a ZIP file containing multiple files
- */
 async function createZipFile(files) {
-    // Simple ZIP implementation without external libraries
-    // Uses store (no compression) method for simplicity
-    const encoder = new TextEncoder();
-    const fileEntries = [];
-    let offset = 0;
-    // Prepare file entries
-    for (const file of files) {
-        const nameBytes = encoder.encode(file.name);
-        let dataBytes;
-        if (typeof file.data === 'string') {
-            dataBytes = encoder.encode(file.data);
-        }
-        else if (file.data instanceof Blob) {
-            dataBytes = new Uint8Array(await file.data.arrayBuffer());
-        }
-        else {
-            dataBytes = new Uint8Array(file.data);
-        }
-        const crc32 = calculateCRC32(dataBytes);
-        fileEntries.push({ name: nameBytes, data: dataBytes, crc32, offset });
-        // Local file header size: 30 + name length + data length
-        offset += 30 + nameBytes.length + dataBytes.length;
-    }
-    const centralDirectoryOffset = offset;
-    // Calculate central directory size
-    let centralDirSize = 0;
-    for (const entry of fileEntries) {
-        centralDirSize += 46 + entry.name.length;
+  const encoder = new TextEncoder();
+  const fileEntries = [];
+  let offset = 0;
+  for (const file of files) {
+    const nameBytes = encoder.encode(file.name);
+    let dataBytes;
+    if (typeof file.data === "string") {
+      dataBytes = encoder.encode(file.data);
+    } else if (file.data instanceof Blob) {
+      dataBytes = new Uint8Array(await file.data.arrayBuffer());
+    } else {
+      dataBytes = new Uint8Array(file.data);
     }
-    // Total size: local headers + data + central directory + end of central directory
-    const totalSize = offset + centralDirSize + 22;
-    const buffer = new ArrayBuffer(totalSize);
-    const view = new DataView(buffer);
-    const bytes = new Uint8Array(buffer);
-    let pos = 0;
-    // Write local file headers and data
-    for (const entry of fileEntries) {
-        // Local file header signature
-        view.setUint32(pos, 0x04034b50, true);
-        pos += 4;
-        // Version needed
-        view.setUint16(pos, 20, true);
-        pos += 2;
-        // General purpose bit flag
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // Compression method (0 = store)
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // File time & date (use current)
-        const now = new Date();
-        const dosTime = ((now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1)) & 0xffff;
-        const dosDate = (((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate()) & 0xffff;
-        view.setUint16(pos, dosTime, true);
-        pos += 2;
-        view.setUint16(pos, dosDate, true);
-        pos += 2;
-        // CRC-32
-        view.setUint32(pos, entry.crc32, true);
-        pos += 4;
-        // Compressed size
-        view.setUint32(pos, entry.data.length, true);
-        pos += 4;
-        // Uncompressed size
-        view.setUint32(pos, entry.data.length, true);
-        pos += 4;
-        // File name length
-        view.setUint16(pos, entry.name.length, true);
-        pos += 2;
-        // Extra field length
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // File name
-        bytes.set(entry.name, pos);
-        pos += entry.name.length;
-        // File data
-        bytes.set(entry.data, pos);
-        pos += entry.data.length;
-    }
-    // Write central directory
-    for (const entry of fileEntries) {
-        // Central directory file header signature
-        view.setUint32(pos, 0x02014b50, true);
-        pos += 4;
-        // Version made by
-        view.setUint16(pos, 20, true);
-        pos += 2;
-        // Version needed
-        view.setUint16(pos, 20, true);
-        pos += 2;
-        // General purpose bit flag
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // Compression method
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // File time & date
-        const now = new Date();
-        const dosTime = ((now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1)) & 0xffff;
-        const dosDate = (((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate()) & 0xffff;
-        view.setUint16(pos, dosTime, true);
-        pos += 2;
-        view.setUint16(pos, dosDate, true);
-        pos += 2;
-        // CRC-32
-        view.setUint32(pos, entry.crc32, true);
-        pos += 4;
-        // Compressed size
-        view.setUint32(pos, entry.data.length, true);
-        pos += 4;
-        // Uncompressed size
-        view.setUint32(pos, entry.data.length, true);
-        pos += 4;
-        // File name length
-        view.setUint16(pos, entry.name.length, true);
-        pos += 2;
-        // Extra field length
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // File comment length
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // Disk number start
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // Internal file attributes
-        view.setUint16(pos, 0, true);
-        pos += 2;
-        // External file attributes
-        view.setUint32(pos, 0, true);
-        pos += 4;
-        // Relative offset of local header
-        view.setUint32(pos, entry.offset, true);
-        pos += 4;
-        // File name
-        bytes.set(entry.name, pos);
-        pos += entry.name.length;
-    }
-    // End of central directory record
-    view.setUint32(pos, 0x06054b50, true);
+    const crc32 = calculateCRC32(dataBytes);
+    fileEntries.push({ name: nameBytes, data: dataBytes, crc32, offset });
+    offset += 30 + nameBytes.length + dataBytes.length;
+  }
+  const centralDirectoryOffset = offset;
+  let centralDirSize = 0;
+  for (const entry of fileEntries) {
+    centralDirSize += 46 + entry.name.length;
+  }
+  const totalSize = offset + centralDirSize + 22;
+  const buffer = new ArrayBuffer(totalSize);
+  const view = new DataView(buffer);
+  const bytes = new Uint8Array(buffer);
+  let pos = 0;
+  for (const entry of fileEntries) {
+    view.setUint32(pos, 67324752, true);
+    pos += 4;
+    view.setUint16(pos, 20, true);
+    pos += 2;
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    const now = /* @__PURE__ */ new Date();
+    const dosTime = (now.getHours() << 11 | now.getMinutes() << 5 | now.getSeconds() >> 1) & 65535;
+    const dosDate = (now.getFullYear() - 1980 << 9 | now.getMonth() + 1 << 5 | now.getDate()) & 65535;
+    view.setUint16(pos, dosTime, true);
+    pos += 2;
+    view.setUint16(pos, dosDate, true);
+    pos += 2;
+    view.setUint32(pos, entry.crc32, true);
+    pos += 4;
+    view.setUint32(pos, entry.data.length, true);
     pos += 4;
-    // Disk number
+    view.setUint32(pos, entry.data.length, true);
+    pos += 4;
+    view.setUint16(pos, entry.name.length, true);
+    pos += 2;
     view.setUint16(pos, 0, true);
     pos += 2;
-    // Disk number with CD
+    bytes.set(entry.name, pos);
+    pos += entry.name.length;
+    bytes.set(entry.data, pos);
+    pos += entry.data.length;
+  }
+  for (const entry of fileEntries) {
+    view.setUint32(pos, 33639248, true);
+    pos += 4;
+    view.setUint16(pos, 20, true);
+    pos += 2;
+    view.setUint16(pos, 20, true);
+    pos += 2;
     view.setUint16(pos, 0, true);
     pos += 2;
-    // Number of entries on this disk
-    view.setUint16(pos, fileEntries.length, true);
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    const now = /* @__PURE__ */ new Date();
+    const dosTime = (now.getHours() << 11 | now.getMinutes() << 5 | now.getSeconds() >> 1) & 65535;
+    const dosDate = (now.getFullYear() - 1980 << 9 | now.getMonth() + 1 << 5 | now.getDate()) & 65535;
+    view.setUint16(pos, dosTime, true);
     pos += 2;
-    // Total number of entries
-    view.setUint16(pos, fileEntries.length, true);
+    view.setUint16(pos, dosDate, true);
     pos += 2;
-    // Size of central directory
-    view.setUint32(pos, centralDirSize, true);
+    view.setUint32(pos, entry.crc32, true);
+    pos += 4;
+    view.setUint32(pos, entry.data.length, true);
     pos += 4;
-    // Offset of central directory
-    view.setUint32(pos, centralDirectoryOffset, true);
+    view.setUint32(pos, entry.data.length, true);
     pos += 4;
-    // Comment length
+    view.setUint16(pos, entry.name.length, true);
+    pos += 2;
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    view.setUint16(pos, 0, true);
+    pos += 2;
     view.setUint16(pos, 0, true);
-    return new Blob([buffer], { type: 'application/zip' });
+    pos += 2;
+    view.setUint32(pos, 0, true);
+    pos += 4;
+    view.setUint32(pos, entry.offset, true);
+    pos += 4;
+    bytes.set(entry.name, pos);
+    pos += entry.name.length;
+  }
+  view.setUint32(pos, 101010256, true);
+  pos += 4;
+  view.setUint16(pos, 0, true);
+  pos += 2;
+  view.setUint16(pos, 0, true);
+  pos += 2;
+  view.setUint16(pos, fileEntries.length, true);
+  pos += 2;
+  view.setUint16(pos, fileEntries.length, true);
+  pos += 2;
+  view.setUint32(pos, centralDirSize, true);
+  pos += 4;
+  view.setUint32(pos, centralDirectoryOffset, true);
+  pos += 4;
+  view.setUint16(pos, 0, true);
+  return new Blob([buffer], { type: "application/zip" });
 }
-/**
- * Calculate CRC-32 for ZIP files
- */
 function calculateCRC32(data) {
-    let crc = 0xffffffff;
-    const table = getCRC32Table();
-    for (let i = 0; i < data.length; i++) {
-        crc = (crc >>> 8) ^ table[(crc ^ data[i]) & 0xff];
-    }
-    return (crc ^ 0xffffffff) >>> 0;
+  let crc = 4294967295;
+  const table = getCRC32Table();
+  for (let i = 0; i < data.length; i++) {
+    crc = crc >>> 8 ^ table[(crc ^ data[i]) & 255];
+  }
+  return (crc ^ 4294967295) >>> 0;
 }
 let crc32Table = null;
 function getCRC32Table() {
-    if (crc32Table) {
-        return crc32Table;
-    }
-    crc32Table = new Uint32Array(256);
-    for (let i = 0; i < 256; i++) {
-        let c = i;
-        for (let j = 0; j < 8; j++) {
-            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
-        }
-        crc32Table[i] = c;
-    }
+  if (crc32Table) {
     return crc32Table;
+  }
+  crc32Table = new Uint32Array(256);
+  for (let i = 0; i < 256; i++) {
+    let c = i;
+    for (let j = 0; j < 8; j++) {
+      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    }
+    crc32Table[i] = c;
+  }
+  return crc32Table;
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Hook
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Hook for exporting desktop icons in multiple formats and sizes.
- *
- * @example
- * ```tsx
- * const { exportAll, downloadAll, icons, isExporting } = useDesktopIconExporter(MyIcon);
- *
- * // Export all icons
- * await exportAll();
- *
- * // Download as ZIP
- * await downloadAll();
- * ```
- */
 function useDesktopIconExporter(icon, initialConfig) {
-    const [config, setConfig] = useState({
-        ...DEFAULT_CONFIG,
-        ...initialConfig,
-    });
-    const [icons, setIcons] = useState([]);
-    const [isExporting, setIsExporting] = useState(false);
-    const [progress, setProgress] = useState(0);
-    // Calculate total number of icons to export
-    const totalIcons = useMemo(() => {
-        let count = 0;
-        const scales = config.includeRetina ? RETINA_VARIANTS.length : 1;
-        for (const size of config.sizes) {
-            if (config.includeWindows || config.includeLinux) {
-                count += scales;
-            }
-            if (config.includeMacOS && size >= 128) {
-                count += scales;
-            }
-        }
-        return count;
-    }, [config]);
-    // Export all icons as PNGs
-    const exportAll = useCallback(async () => {
-        setIsExporting(true);
-        setProgress(0);
-        const exported = [];
-        let completed = 0;
-        try {
-            const scales = config.includeRetina ? RETINA_VARIANTS : [RETINA_VARIANTS[0]];
-            for (const size of config.sizes) {
-                for (const variant of scales) {
-                    const actualSize = size * variant.scale;
-                    const canvas = await renderIconToCanvas(icon, actualSize, config.fillColor, config.backgroundColor, config.padding);
-                    const dataUrl = canvas.toDataURL('image/png');
-                    const blob = await canvasToBlob(canvas);
-                    // Determine platforms
-                    const platforms = [];
-                    if (config.includeWindows && size <= 256) {
-                        platforms.push('windows');
-                    }
-                    if (config.includeMacOS && size >= 128) {
-                        platforms.push('macos');
-                    }
-                    if (config.includeLinux) {
-                        platforms.push('linux');
-                    }
-                    exported.push({
-                        filename: `${config.name}-${size}x${size}${variant.suffix}.png`,
-                        size,
-                        scale: variant.scale,
-                        platform: platforms.join(','),
-                        dataUrl,
-                        blob,
-                    });
-                    completed++;
-                    setProgress((completed / totalIcons) * 100);
-                }
-            }
-            setIcons(exported);
-        }
-        catch (error) {
-            console.error('Failed to export icons:', error);
+  const [config, setConfig] = useState({
+    ...DEFAULT_CONFIG,
+    ...initialConfig
+  });
+  const [icons, setIcons] = useState([]);
+  const [isExporting, setIsExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const totalIcons = useMemo(() => {
+    let count = 0;
+    const scales = config.includeRetina ? RETINA_VARIANTS.length : 1;
+    for (const size of config.sizes) {
+      if (config.includeWindows || config.includeLinux) {
+        count += scales;
+      }
+      if (config.includeMacOS && size >= 128) {
+        count += scales;
+      }
+    }
+    return count;
+  }, [config]);
+  const exportAll = useCallback(async () => {
+    setIsExporting(true);
+    setProgress(0);
+    const exported = [];
+    let completed = 0;
+    try {
+      const scales = config.includeRetina ? RETINA_VARIANTS : [RETINA_VARIANTS[0]];
+      for (const size of config.sizes) {
+        for (const variant of scales) {
+          const actualSize = size * variant.scale;
+          const canvas = await renderIconToCanvas(
+            icon,
+            actualSize,
+            config.fillColor,
+            config.backgroundColor,
+            config.padding
+          );
+          const dataUrl = canvas.toDataURL("image/png");
+          const blob = await canvasToBlob(canvas);
+          const platforms = [];
+          if (config.includeWindows && size <= 256) {
+            platforms.push("windows");
+          }
+          if (config.includeMacOS && size >= 128) {
+            platforms.push("macos");
+          }
+          if (config.includeLinux) {
+            platforms.push("linux");
+          }
+          exported.push({
+            filename: `${config.name}-${size}x${size}${variant.suffix}.png`,
+            size,
+            scale: variant.scale,
+            platform: platforms.join(","),
+            dataUrl,
+            blob
+          });
+          completed++;
+          setProgress(completed / totalIcons * 100);
         }
-        finally {
-            setIsExporting(false);
+      }
+      setIcons(exported);
+    } catch (error) {
+      console.error("Failed to export icons:", error);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [icon, config, totalIcons]);
+  const exportWindows = useCallback(async () => {
+    const windowsSizes = config.sizes.filter((s) => s <= 256);
+    const pngBuffers = [];
+    for (const size of windowsSizes) {
+      const canvas = await renderIconToCanvas(
+        icon,
+        size,
+        config.fillColor,
+        config.backgroundColor,
+        config.padding
+      );
+      const blob = await canvasToBlob(canvas);
+      const buffer = await blob.arrayBuffer();
+      pngBuffers.push({ size, data: buffer });
+    }
+    const icoBlob = await createIcoFile(pngBuffers);
+    return URL.createObjectURL(icoBlob);
+  }, [icon, config]);
+  const exportMacOS = useCallback(async () => {
+    const macSizes = config.sizes.filter((s) => s >= 128);
+    const files = [];
+    for (const size of macSizes) {
+      const scales = config.includeRetina ? RETINA_VARIANTS : [RETINA_VARIANTS[0]];
+      for (const variant of scales) {
+        const actualSize = size * variant.scale;
+        const canvas = await renderIconToCanvas(
+          icon,
+          actualSize,
+          config.fillColor,
+          config.backgroundColor,
+          config.padding
+        );
+        const blob = await canvasToBlob(canvas);
+        files.push({
+          name: `${config.name}.iconset/icon_${size}x${size}${variant.suffix}.png`,
+          data: blob
+        });
+      }
+    }
+    files.push({
+      name: "README.txt",
+      data: new Blob(
+        [
+          `macOS Icon Set
+=============
+
+To convert to .icns format, use the following command in Terminal:
+
+  iconutil -c icns ${config.name}.iconset
+
+This will create ${config.name}.icns
+
+Note: iconutil is only available on macOS.
+`
+        ],
+        { type: "text/plain" }
+      )
+    });
+    const zipBlob = await createZipFile(files);
+    return URL.createObjectURL(zipBlob);
+  }, [icon, config]);
+  const exportLinux = useCallback(async () => {
+    const linuxIcons = [];
+    for (const { size, dir } of LINUX_HICOLOR_DIRS) {
+      if (!config.sizes.includes(size)) {
+        continue;
+      }
+      const canvas = await renderIconToCanvas(
+        icon,
+        size,
+        config.fillColor,
+        config.backgroundColor,
+        config.padding
+      );
+      const dataUrl = canvas.toDataURL("image/png");
+      const blob = await canvasToBlob(canvas);
+      linuxIcons.push({
+        filename: `${dir}/${config.name}.png`,
+        size,
+        scale: 1,
+        platform: "linux",
+        dataUrl,
+        blob
+      });
+    }
+    return linuxIcons;
+  }, [icon, config]);
+  const downloadSingle = useCallback((exportedIcon) => {
+    const link = document.createElement("a");
+    link.href = exportedIcon.dataUrl;
+    link.download = exportedIcon.filename;
+    link.click();
+  }, []);
+  const downloadAll = useCallback(async () => {
+    setIsExporting(true);
+    setProgress(0);
+    try {
+      const files = [];
+      await exportAll();
+      for (const exportedIcon of icons) {
+        if (exportedIcon.blob) {
+          files.push({ name: `png/${exportedIcon.filename}`, data: exportedIcon.blob });
         }
-    }, [icon, config, totalIcons]);
-    // Export Windows ICO file
-    const exportWindows = useCallback(async () => {
+      }
+      if (config.includeWindows) {
         const windowsSizes = config.sizes.filter((s) => s <= 256);
         const pngBuffers = [];
         for (const size of windowsSizes) {
-            const canvas = await renderIconToCanvas(icon, size, config.fillColor, config.backgroundColor, config.padding);
-            const blob = await canvasToBlob(canvas);
-            const buffer = await blob.arrayBuffer();
-            pngBuffers.push({ size, data: buffer });
+          const canvas = await renderIconToCanvas(
+            icon,
+            size,
+            config.fillColor,
+            config.backgroundColor,
+            config.padding
+          );
+          const blob = await canvasToBlob(canvas);
+          pngBuffers.push({ size, data: await blob.arrayBuffer() });
         }
         const icoBlob = await createIcoFile(pngBuffers);
-        return URL.createObjectURL(icoBlob);
-    }, [icon, config]);
-    // Export macOS icons (as ZIP with PNG set - ICNS requires native tools)
-    const exportMacOS = useCallback(async () => {
+        files.push({ name: `windows/${config.name}.ico`, data: icoBlob });
+      }
+      if (config.includeMacOS) {
         const macSizes = config.sizes.filter((s) => s >= 128);
-        const files = [];
+        const scales = config.includeRetina ? RETINA_VARIANTS : [RETINA_VARIANTS[0]];
         for (const size of macSizes) {
-            const scales = config.includeRetina ? RETINA_VARIANTS : [RETINA_VARIANTS[0]];
-            for (const variant of scales) {
-                const actualSize = size * variant.scale;
-                const canvas = await renderIconToCanvas(icon, actualSize, config.fillColor, config.backgroundColor, config.padding);
-                const blob = await canvasToBlob(canvas);
-                // macOS naming convention: icon_128x128@2x.png
-                files.push({
-                    name: `${config.name}.iconset/icon_${size}x${size}${variant.suffix}.png`,
-                    data: blob,
-                });
-            }
+          for (const variant of scales) {
+            const actualSize = size * variant.scale;
+            const canvas = await renderIconToCanvas(
+              icon,
+              actualSize,
+              config.fillColor,
+              config.backgroundColor,
+              config.padding
+            );
+            const blob = await canvasToBlob(canvas);
+            files.push({
+              name: `macos/${config.name}.iconset/icon_${size}x${size}${variant.suffix}.png`,
+              data: blob
+            });
+          }
         }
-        // Add README with iconutil instructions
         files.push({
-            name: 'README.txt',
-            data: new Blob([
-                `macOS Icon Set
-=============
-
-To convert to .icns format, use the following command in Terminal:
-
-  iconutil -c icns ${config.name}.iconset
-
-This will create ${config.name}.icns
-
-Note: iconutil is only available on macOS.
-`,
-            ], { type: 'text/plain' }),
+          name: "macos/README.txt",
+          data: `To convert to .icns: iconutil -c icns ${config.name}.iconset`
         });
-        const zipBlob = await createZipFile(files);
-        return URL.createObjectURL(zipBlob);
-    }, [icon, config]);
-    // Export Linux PNG set
-    const exportLinux = useCallback(async () => {
-        const linuxIcons = [];
+      }
+      if (config.includeLinux) {
         for (const { size, dir } of LINUX_HICOLOR_DIRS) {
-            if (!config.sizes.includes(size)) {
-                continue;
-            }
-            const canvas = await renderIconToCanvas(icon, size, config.fillColor, config.backgroundColor, config.padding);
-            const dataUrl = canvas.toDataURL('image/png');
-            const blob = await canvasToBlob(canvas);
-            linuxIcons.push({
-                filename: `${dir}/${config.name}.png`,
-                size,
-                scale: 1,
-                platform: 'linux',
-                dataUrl,
-                blob,
-            });
+          if (!config.sizes.includes(size)) {
+            continue;
+          }
+          const canvas = await renderIconToCanvas(
+            icon,
+            size,
+            config.fillColor,
+            config.backgroundColor,
+            config.padding
+          );
+          const blob = await canvasToBlob(canvas);
+          files.push({ name: `linux/${dir}/${config.name}.png`, data: blob });
         }
-        return linuxIcons;
-    }, [icon, config]);
-    // Download single icon
-    const downloadSingle = useCallback((exportedIcon) => {
-        const link = document.createElement('a');
-        link.href = exportedIcon.dataUrl;
-        link.download = exportedIcon.filename;
-        link.click();
-    }, []);
-    // Download all as ZIP
-    const downloadAll = useCallback(async () => {
-        setIsExporting(true);
-        setProgress(0);
-        try {
-            const files = [];
-            // Export all PNG icons first
-            await exportAll();
-            // Add PNG icons
-            for (const exportedIcon of icons) {
-                if (exportedIcon.blob) {
-                    files.push({ name: `png/${exportedIcon.filename}`, data: exportedIcon.blob });
-                }
+      }
+      const zipBlob = await createZipFile(files);
+      const url = URL.createObjectURL(zipBlob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${config.name}-icons.zip`;
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to download icons:", error);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [icon, icons, config, exportAll]);
+  return {
+    config,
+    setConfig,
+    icons,
+    isExporting,
+    progress,
+    exportAll,
+    exportWindows,
+    exportMacOS,
+    exportLinux,
+    downloadAll,
+    downloadSingle
+  };
+}
+const NiceDesktopIconExporter = ({
+  icon,
+  initialConfig,
+  onExport,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const {
+    config,
+    setConfig,
+    icons,
+    isExporting,
+    progress,
+    exportAll,
+    downloadAll,
+    downloadSingle
+  } = useDesktopIconExporter(icon, initialConfig);
+  const handleExport = async () => {
+    await exportAll();
+    onExport?.(icons);
+  };
+  const IconComponent = icon;
+  return /* @__PURE__ */ jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [
+      /* @__PURE__ */ jsx("h3", { children: t("desktopIconExporter.preview", "Preview") }),
+      /* @__PURE__ */ jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "nice-desktop-icon-exporter__preview-box",
+            style: {
+              width: Math.min(size, 128),
+              height: Math.min(size, 128),
+              backgroundColor: config.backgroundColor || "#f0f0f0"
+            },
+            children: /* @__PURE__ */ jsx(
+              IconComponent,
+              {
+                size: Math.min(size, 128) * (1 - config.padding * 2),
+                fill: config.fillColor
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { children: [
+          size,
+          "×",
+          size
+        ] })
+      ] }, size)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [
+      /* @__PURE__ */ jsx("h3", { children: t("desktopIconExporter.configuration", "Configuration") }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        t("desktopIconExporter.iconName", "Icon Name:"),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: config.name,
+            onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        t("desktopIconExporter.fillColor", "Fill Color:"),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: config.fillColor,
+            onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        t("desktopIconExporter.background", "Background:"),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value: config.backgroundColor || "#ffffff",
+            onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value }))
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: void 0 })), children: t("desktopIconExporter.transparent", "Transparent") })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        t("desktopIconExporter.padding", "Padding: {padding}%").replace(
+          "{padding}",
+          String(Math.round(config.padding * 100))
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "0.3",
+            step: "0.01",
+            value: config.padding,
+            onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: config.includeWindows,
+              onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked }))
             }
-            // Add Windows ICO
-            if (config.includeWindows) {
-                const windowsSizes = config.sizes.filter((s) => s <= 256);
-                const pngBuffers = [];
-                for (const size of windowsSizes) {
-                    const canvas = await renderIconToCanvas(icon, size, config.fillColor, config.backgroundColor, config.padding);
-                    const blob = await canvasToBlob(canvas);
-                    pngBuffers.push({ size, data: await blob.arrayBuffer() });
-                }
-                const icoBlob = await createIcoFile(pngBuffers);
-                files.push({ name: `windows/${config.name}.ico`, data: icoBlob });
+          ),
+          t("desktopIconExporter.windowsIco", "Windows (.ico)")
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: config.includeMacOS,
+              onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked }))
             }
-            // Add macOS iconset
-            if (config.includeMacOS) {
-                const macSizes = config.sizes.filter((s) => s >= 128);
-                const scales = config.includeRetina ? RETINA_VARIANTS : [RETINA_VARIANTS[0]];
-                for (const size of macSizes) {
-                    for (const variant of scales) {
-                        const actualSize = size * variant.scale;
-                        const canvas = await renderIconToCanvas(icon, actualSize, config.fillColor, config.backgroundColor, config.padding);
-                        const blob = await canvasToBlob(canvas);
-                        files.push({
-                            name: `macos/${config.name}.iconset/icon_${size}x${size}${variant.suffix}.png`,
-                            data: blob,
-                        });
-                    }
-                }
-                files.push({
-                    name: 'macos/README.txt',
-                    data: `To convert to .icns: iconutil -c icns ${config.name}.iconset`,
-                });
+          ),
+          t("desktopIconExporter.macosIconset", "macOS (.iconset)")
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: config.includeLinux,
+              onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked }))
             }
-            // Add Linux icons
-            if (config.includeLinux) {
-                for (const { size, dir } of LINUX_HICOLOR_DIRS) {
-                    if (!config.sizes.includes(size)) {
-                        continue;
-                    }
-                    const canvas = await renderIconToCanvas(icon, size, config.fillColor, config.backgroundColor, config.padding);
-                    const blob = await canvasToBlob(canvas);
-                    files.push({ name: `linux/${dir}/${config.name}.png`, data: blob });
-                }
+          ),
+          t("desktopIconExporter.linuxHicolor", "Linux (hicolor)")
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: config.includeRetina,
+              onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked }))
             }
-            // Create and download ZIP
-            const zipBlob = await createZipFile(files);
-            const url = URL.createObjectURL(zipBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = `${config.name}-icons.zip`;
-            link.click();
-            URL.revokeObjectURL(url);
-        }
-        catch (error) {
-            console.error('Failed to download icons:', error);
-        }
-        finally {
-            setIsExporting(false);
-        }
-    }, [icon, icons, config, exportAll]);
-    return {
-        config,
-        setConfig,
-        icons,
-        isExporting,
-        progress,
-        exportAll,
-        exportWindows,
-        exportMacOS,
-        exportLinux,
-        downloadAll,
-        downloadSingle,
-    };
-}
-/* ══════════════════════════════════════════════════════════════════════════════
-   Component
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Desktop icon exporter component with UI for configuring and downloading icons.
- *
- * @example
- * ```tsx
- * import { NiceDesktopIconExporter } from '@nice2dev/icons';
- * import { NtdRocket } from '@nice2dev/icons/paths';
- *
- * function App() {
- *   return (
- *     <NiceDesktopIconExporter
- *       icon={NtdRocket}
- *       initialConfig={{ name: 'my-app', fillColor: '#ff6b35' }}
- *     />
- *   );
- * }
- * ```
- */
-const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { config, setConfig, icons, isExporting, progress, exportAll, downloadAll, downloadSingle, } = useDesktopIconExporter(icon, initialConfig);
-    const handleExport = async () => {
-        await exportAll();
-        onExport === null || onExport === void 0 ? void 0 : onExport(icons);
-    };
-    const IconComponent = icon;
-    return (jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsx("h3", { children: t('desktopIconExporter.preview', 'Preview') }), jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsx("div", { className: "nice-desktop-icon-exporter__preview-box", style: {
-                                        width: Math.min(size, 128),
-                                        height: Math.min(size, 128),
-                                        backgroundColor: config.backgroundColor || '#f0f0f0',
-                                    }, children: jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsx("h3", { children: t('desktopIconExporter.configuration', 'Configuration') }), jsxs("label", { children: [t('desktopIconExporter.iconName', 'Icon Name:'), jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxs("label", { children: [t('desktopIconExporter.fillColor', 'Fill Color:'), jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxs("label", { children: [t('desktopIconExporter.background', 'Background:'), jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: t('desktopIconExporter.transparent', 'Transparent') })] }), jsxs("label", { children: [t('desktopIconExporter.padding', 'Padding: {padding}%').replace('{padding}', String(Math.round(config.padding * 100))), jsx("input", { type: "range", min: "0", max: "0.3", step: "0.01", value: config.padding, onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) })) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), t('desktopIconExporter.windowsIco', 'Windows (.ico)')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), t('desktopIconExporter.macosIconset', 'macOS (.iconset)')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), t('desktopIconExporter.linuxHicolor', 'Linux (hicolor)')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), t('desktopIconExporter.hidpiRetina2x3x', 'HiDPI/Retina (@2x, @3x)')] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsx("h4", { children: t('desktopIconExporter.sizes', 'Sizes:') }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
-                                            setConfig((c) => ({
-                                                ...c,
-                                                sizes: e.target.checked
-                                                    ? [...c.sizes, size].sort((a, b) => a - b)
-                                                    : c.sizes.filter((s) => s !== size),
-                                            }));
-                                        } }), label] }, size)))] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting
-                            ? t('desktopIconExporter.exporting', 'Exporting... {progress}%').replace('{progress}', String(Math.round(progress)))
-                            : t('desktopIconExporter.generateIcons', 'Generate Icons') }), jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: t('desktopIconExporter.downloadAllZip', 'Download All (ZIP)') })] }), icons.length > 0 && (jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsx("h3", { children: t('desktopIconExporter.generatedIcons', 'Generated Icons ({icons})').replace('{icons}', String(icons.length)) }), jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }), jsx("span", { children: exportedIcon.filename }), jsx("button", { onClick: () => downloadSingle(exportedIcon), children: t('desktopIconExporter.download', 'Download') })] }, exportedIcon.filename))) })] }))] }));
+          ),
+          t("desktopIconExporter.hidpiRetina2x3x", "HiDPI/Retina (@2x, @3x)")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [
+        /* @__PURE__ */ jsx("h4", { children: t("desktopIconExporter.sizes", "Sizes:") }),
+        DESKTOP_ICON_SIZES.map(({ size, label }) => /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: config.sizes.includes(size),
+              onChange: (e) => {
+                setConfig((c) => ({
+                  ...c,
+                  sizes: e.target.checked ? [...c.sizes, size].sort((a, b) => a - b) : c.sizes.filter((s) => s !== size)
+                }));
+              }
+            }
+          ),
+          label
+        ] }, size))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [
+      /* @__PURE__ */ jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? t("desktopIconExporter.exporting", "Exporting... {progress}%").replace(
+        "{progress}",
+        String(Math.round(progress))
+      ) : t("desktopIconExporter.generateIcons", "Generate Icons") }),
+      /* @__PURE__ */ jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: t("desktopIconExporter.downloadAllZip", "Download All (ZIP)") })
+    ] }),
+    icons.length > 0 && /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [
+      /* @__PURE__ */ jsx("h3", { children: t("desktopIconExporter.generatedIcons", "Generated Icons ({icons})").replace(
+        "{icons}",
+        String(icons.length)
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => /* @__PURE__ */ jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [
+        /* @__PURE__ */ jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }),
+        /* @__PURE__ */ jsx("span", { children: exportedIcon.filename }),
+        /* @__PURE__ */ jsx("button", { onClick: () => downloadSingle(exportedIcon), children: t("desktopIconExporter.download", "Download") })
+      ] }, exportedIcon.filename)) })
+    ] })
+  ] });
+};
+export {
+  DESKTOP_ICON_SIZES,
+  LINUX_HICOLOR_DIRS,
+  NiceDesktopIconExporter,
+  RETINA_VARIANTS,
+  useDesktopIconExporter
 };
-
-export { DESKTOP_ICON_SIZES, LINUX_HICOLOR_DIRS, NiceDesktopIconExporter, RETINA_VARIANTS, useDesktopIconExporter };