@nice2dev/icons 1.0.5 → 1.0.6

package/dist/cjs/NiceDesktopIconExporter.js

@@ -0,0 +1,648 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+/* ══════════════════════════════════════════════════════════════════════════════
+   Constants
+   ══════════════════════════════════════════════════════════════════════════════ */
+/** Standard desktop icon sizes used across platforms */
+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'] },
+];
+/** Retina/HiDPI scale factors */
+const RETINA_VARIANTS = [
+    { 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],
+};
+/** 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' },
+];
+/* ══════════════════════════════════════════════════════════════════════════════
+   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 Promise.resolve().then(function () { return require('./_virtual/client.js'); }).then(function (n) { return n.client; });
+    const root = createRoot(container);
+    return new Promise((resolve) => {
+        root.render(jsxRuntime.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);
+    });
+}
+/**
+ * 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');
+    });
+}
+/**
+ * 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' });
+}
+/**
+ * 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;
+    }
+    // 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);
+    pos += 4;
+    // Disk number
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    // Disk number with CD
+    view.setUint16(pos, 0, true);
+    pos += 2;
+    // Number of entries on this disk
+    view.setUint16(pos, fileEntries.length, true);
+    pos += 2;
+    // Total number of entries
+    view.setUint16(pos, fileEntries.length, true);
+    pos += 2;
+    // Size of central directory
+    view.setUint32(pos, centralDirSize, true);
+    pos += 4;
+    // Offset of central directory
+    view.setUint32(pos, centralDirectoryOffset, true);
+    pos += 4;
+    // Comment length
+    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 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;
+    }
+    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] = React.useState({
+        ...DEFAULT_CONFIG,
+        ...initialConfig,
+    });
+    const [icons, setIcons] = React.useState([]);
+    const [isExporting, setIsExporting] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    // Calculate total number of icons to export
+    const totalIcons = React.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 = React.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);
+        }
+        finally {
+            setIsExporting(false);
+        }
+    }, [icon, config, totalIcons]);
+    // Export Windows ICO file
+    const exportWindows = React.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]);
+    // Export macOS icons (as ZIP with PNG set - ICNS requires native tools)
+    const exportMacOS = React.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);
+                // macOS naming convention: icon_128x128@2x.png
+                files.push({
+                    name: `${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' }),
+        });
+        const zipBlob = await createZipFile(files);
+        return URL.createObjectURL(zipBlob);
+    }, [icon, config]);
+    // Export Linux PNG set
+    const exportLinux = React.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]);
+    // Download single icon
+    const downloadSingle = React.useCallback((exportedIcon) => {
+        const link = document.createElement('a');
+        link.href = exportedIcon.dataUrl;
+        link.download = exportedIcon.filename;
+        link.click();
+    }, []);
+    // Download all as ZIP
+    const downloadAll = React.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 });
+                }
+            }
+            // 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 });
+            }
+            // 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`,
+                });
+            }
+            // 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 });
+                }
+            }
+            // 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 { 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 (jsxRuntime.jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsxRuntime.jsx("h3", { children: "Preview" }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsxRuntime.jsx("div", { style: {
+                                        width: Math.min(size, 128),
+                                        height: Math.min(size, 128),
+                                        backgroundColor: config.backgroundColor || '#f0f0f0',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        borderRadius: 4,
+                                    }, children: jsxRuntime.jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxRuntime.jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsxRuntime.jsx("h3", { children: "Configuration" }), jsxRuntime.jsxs("label", { children: ["Icon Name:", jsxRuntime.jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: ["Fill Color:", jsxRuntime.jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: ["Background:", jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsxRuntime.jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: "Transparent" })] }), jsxRuntime.jsxs("label", { children: ["Padding: ", Math.round(config.padding * 100), "%", jsxRuntime.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) })) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), "Windows (.ico)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), "macOS (.iconset)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), "Linux (hicolor)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), "HiDPI/Retina (@2x, @3x)"] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsxRuntime.jsx("h4", { children: "Sizes:" }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.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)))] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsxRuntime.jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsxRuntime.jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxRuntime.jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsxRuntime.jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename, style: { maxWidth: 64, maxHeight: 64 } }), jsxRuntime.jsx("span", { children: exportedIcon.filename }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
+};
+
+exports.DESKTOP_ICON_SIZES = DESKTOP_ICON_SIZES;
+exports.LINUX_HICOLOR_DIRS = LINUX_HICOLOR_DIRS;
+exports.NiceDesktopIconExporter = NiceDesktopIconExporter;
+exports.RETINA_VARIANTS = RETINA_VARIANTS;
+exports.useDesktopIconExporter = useDesktopIconExporter;
+//# sourceMappingURL=NiceDesktopIconExporter.js.map