@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/NiceFaviconGenerator.js

@@ -1,430 +1,597 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useNiceTranslation } from '@nice2dev/ui-core';
-import { useState, useCallback } from 'react';
-import { NtdDownload } from './icons/actions.js';
-
-/* ══════════════════════════════════════════════════════════════════════════════
-   Constants
-   ══════════════════════════════════════════════════════════════════════════════ */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useNiceTranslation } from "@nice2dev/ui-core";
+import { useState, useCallback } from "react";
+import { NtdDownload } from "./icons/actions.js";
 const FAVICON_SIZES = [
-    { name: 'favicon-16x16', size: 16, purpose: 'Browser tab', format: 'png' },
-    { name: 'favicon-32x32', size: 32, purpose: 'Browser tab (Retina)', format: 'png' },
-    { name: 'favicon-48x48', size: 48, purpose: 'Windows site icon', format: 'png' },
-    { name: 'favicon', size: 32, purpose: 'Legacy ICO format', format: 'ico' },
-    { name: 'apple-touch-icon', size: 180, purpose: 'iOS home screen', format: 'png' },
-    { name: 'android-chrome-192x192', size: 192, purpose: 'Android Chrome', format: 'png' },
-    { name: 'android-chrome-512x512', size: 512, purpose: 'Android splash', format: 'png' },
-    { name: 'mstile-150x150', size: 150, purpose: 'Windows tile', format: 'png' },
-    { name: 'safari-pinned-tab', size: 512, purpose: 'Safari pinned tab', format: 'svg' },
+  { name: "favicon-16x16", size: 16, purpose: "Browser tab", format: "png" },
+  { name: "favicon-32x32", size: 32, purpose: "Browser tab (Retina)", format: "png" },
+  { name: "favicon-48x48", size: 48, purpose: "Windows site icon", format: "png" },
+  { name: "favicon", size: 32, purpose: "Legacy ICO format", format: "ico" },
+  { name: "apple-touch-icon", size: 180, purpose: "iOS home screen", format: "png" },
+  { name: "android-chrome-192x192", size: 192, purpose: "Android Chrome", format: "png" },
+  { name: "android-chrome-512x512", size: 512, purpose: "Android splash", format: "png" },
+  { name: "mstile-150x150", size: 150, purpose: "Windows tile", format: "png" },
+  { name: "safari-pinned-tab", size: 512, purpose: "Safari pinned tab", format: "svg" }
 ];
 const DEFAULT_MANIFEST = {
-    name: 'My Application',
-    shortName: 'MyApp',
-    description: '',
-    themeColor: '#ffffff',
-    backgroundColor: '#ffffff',
-    display: 'standalone',
-    startUrl: '/',
+  name: "My Application",
+  shortName: "MyApp",
+  description: "",
+  themeColor: "#ffffff",
+  backgroundColor: "#ffffff",
+  display: "standalone",
+  startUrl: "/"
 };
-function useFaviconGenerator(icon, fill = '#1e1e1e', initialConfig) {
-    const [config, setConfig] = useState({
-        ...DEFAULT_MANIFEST,
-        ...initialConfig,
-    });
-    const [assets, setAssets] = useState([]);
-    const [isGenerating, setIsGenerating] = useState(false);
-    // Render icon to canvas
-    const renderToCanvas = useCallback(async (size) => {
-        const canvas = document.createElement('canvas');
-        canvas.width = size;
-        canvas.height = size;
-        const ctx = canvas.getContext('2d');
-        // Create SVG from icon
-        const svgContainer = document.createElement('div');
-        const IconComponent = icon;
-        // Render to get SVG string
-        const { createRoot } = await import('react-dom/client');
-        const root = createRoot(svgContainer);
-        return new Promise((resolve) => {
-            root.render(jsx(IconComponent, { size: size * 0.8, fill: fill }));
+function useFaviconGenerator(icon, fill = "#1e1e1e", initialConfig) {
+  const [config, setConfig] = useState({
+    ...DEFAULT_MANIFEST,
+    ...initialConfig
+  });
+  const [assets, setAssets] = useState([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const renderToCanvas = useCallback(
+    async (size) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = size;
+      canvas.height = size;
+      const ctx = canvas.getContext("2d");
+      const svgContainer = document.createElement("div");
+      const IconComponent = icon;
+      const { createRoot } = await import("react-dom/client");
+      const root = createRoot(svgContainer);
+      return new Promise((resolve) => {
+        root.render(/* @__PURE__ */ jsx(IconComponent, { size: size * 0.8, fill }));
+        setTimeout(() => {
+          const svg = svgContainer.querySelector("svg");
+          if (svg) {
+            const padding = size * 0.1;
+            ctx.fillStyle = config.backgroundColor;
+            ctx.fillRect(0, 0, size, size);
+            const svgData = new XMLSerializer().serializeToString(svg);
+            const img = new Image();
+            img.onload = () => {
+              ctx.drawImage(img, padding, padding, size * 0.8, size * 0.8);
+              root.unmount();
+              resolve(canvas);
+            };
+            img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)));
+          } else {
+            root.unmount();
+            resolve(canvas);
+          }
+        }, 50);
+      });
+    },
+    [icon, fill, config.backgroundColor]
+  );
+  const generate = useCallback(async () => {
+    setIsGenerating(true);
+    const generated = [];
+    try {
+      for (const faviconSize of FAVICON_SIZES) {
+        if (faviconSize.format === "svg") {
+          const svgContainer = document.createElement("div");
+          const { createRoot } = await import("react-dom/client");
+          const root = createRoot(svgContainer);
+          const IconComponent = icon;
+          await new Promise((resolve) => {
+            root.render(/* @__PURE__ */ jsx(IconComponent, { size: faviconSize.size, fill }));
             setTimeout(() => {
-                const svg = svgContainer.querySelector('svg');
-                if (svg) {
-                    // Center icon
-                    const padding = size * 0.1;
-                    ctx.fillStyle = config.backgroundColor;
-                    ctx.fillRect(0, 0, size, size);
-                    const svgData = new XMLSerializer().serializeToString(svg);
-                    const img = new Image();
-                    img.onload = () => {
-                        ctx.drawImage(img, padding, padding, size * 0.8, size * 0.8);
-                        root.unmount();
-                        resolve(canvas);
-                    };
-                    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
-                }
-                else {
-                    root.unmount();
-                    resolve(canvas);
-                }
+              const svg = svgContainer.querySelector("svg");
+              if (svg) {
+                const svgData = new XMLSerializer().serializeToString(svg);
+                generated.push({
+                  filename: `${faviconSize.name}.svg`,
+                  size: faviconSize.size,
+                  purpose: faviconSize.purpose,
+                  dataUrl: "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)))
+                });
+              }
+              root.unmount();
+              resolve();
             }, 50);
-        });
-    }, [icon, fill, config.backgroundColor]);
-    // Generate all assets
-    const generate = useCallback(async () => {
-        setIsGenerating(true);
-        const generated = [];
-        try {
-            for (const faviconSize of FAVICON_SIZES) {
-                if (faviconSize.format === 'svg') {
-                    // SVG format
-                    const svgContainer = document.createElement('div');
-                    const { createRoot } = await import('react-dom/client');
-                    const root = createRoot(svgContainer);
-                    const IconComponent = icon;
-                    await new Promise((resolve) => {
-                        root.render(jsx(IconComponent, { size: faviconSize.size, fill: fill }));
-                        setTimeout(() => {
-                            const svg = svgContainer.querySelector('svg');
-                            if (svg) {
-                                const svgData = new XMLSerializer().serializeToString(svg);
-                                generated.push({
-                                    filename: `${faviconSize.name}.svg`,
-                                    size: faviconSize.size,
-                                    purpose: faviconSize.purpose,
-                                    dataUrl: 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))),
-                                });
-                            }
-                            root.unmount();
-                            resolve();
-                        }, 50);
-                    });
-                }
-                else {
-                    // PNG/ICO format
-                    const canvas = await renderToCanvas(faviconSize.size);
-                    const dataUrl = canvas.toDataURL('image/png');
-                    generated.push({
-                        filename: `${faviconSize.name}.${faviconSize.format === 'ico' ? 'ico' : 'png'}`,
-                        size: faviconSize.size,
-                        purpose: faviconSize.purpose,
-                        dataUrl,
-                    });
-                }
-            }
-            setAssets(generated);
+          });
+        } else {
+          const canvas = await renderToCanvas(faviconSize.size);
+          const dataUrl = canvas.toDataURL("image/png");
+          generated.push({
+            filename: `${faviconSize.name}.${faviconSize.format === "ico" ? "ico" : "png"}`,
+            size: faviconSize.size,
+            purpose: faviconSize.purpose,
+            dataUrl
+          });
         }
-        catch (error) {
-            console.error('Failed to generate favicons:', error);
+      }
+      setAssets(generated);
+    } catch (error) {
+      console.error("Failed to generate favicons:", error);
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [icon, fill, renderToCanvas]);
+  const getManifestJson = useCallback(() => {
+    const manifest = {
+      name: config.name,
+      short_name: config.shortName,
+      description: config.description || void 0,
+      theme_color: config.themeColor,
+      background_color: config.backgroundColor,
+      display: config.display,
+      start_url: config.startUrl,
+      icons: [
+        {
+          src: "/android-chrome-192x192.png",
+          sizes: "192x192",
+          type: "image/png"
+        },
+        {
+          src: "/android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png"
+        },
+        {
+          src: "/android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "maskable"
         }
-        finally {
-            setIsGenerating(false);
-        }
-    }, [icon, fill, renderToCanvas]);
-    // Get manifest.json content
-    const getManifestJson = useCallback(() => {
-        const manifest = {
-            name: config.name,
-            short_name: config.shortName,
-            description: config.description || undefined,
-            theme_color: config.themeColor,
-            background_color: config.backgroundColor,
-            display: config.display,
-            start_url: config.startUrl,
-            icons: [
-                {
-                    src: '/android-chrome-192x192.png',
-                    sizes: '192x192',
-                    type: 'image/png',
-                },
-                {
-                    src: '/android-chrome-512x512.png',
-                    sizes: '512x512',
-                    type: 'image/png',
-                },
-                {
-                    src: '/android-chrome-512x512.png',
-                    sizes: '512x512',
-                    type: 'image/png',
-                    purpose: 'maskable',
-                },
-            ],
-        };
-        return JSON.stringify(manifest, null, 2);
-    }, [config]);
-    // Get HTML tags for linking favicons
-    const getHtmlTags = useCallback(() => {
-        return `<!-- Favicons -->
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="shortcut icon" href="/favicon.ico">
-
-<!-- Apple Touch Icon -->
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-
-<!-- Safari Pinned Tab -->
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="${config.themeColor}">
-
-<!-- Windows -->
-<meta name="msapplication-TileColor" content="${config.backgroundColor}">
-<meta name="msapplication-TileImage" content="/mstile-150x150.png">
-
-<!-- Theme -->
-<meta name="theme-color" content="${config.themeColor}">
-
-<!-- Web App Manifest -->
-<link rel="manifest" href="/manifest.json">`;
-    }, [config]);
-    // Download single asset
-    const downloadSingle = useCallback((asset) => {
-        const link = document.createElement('a');
-        link.href = asset.dataUrl;
-        link.download = asset.filename;
-        link.click();
-    }, []);
-    // Download all as ZIP (simplified - downloads individually)
-    const downloadAll = useCallback(() => {
-        // Download manifest
-        const manifestBlob = new Blob([getManifestJson()], { type: 'application/json' });
-        const manifestUrl = URL.createObjectURL(manifestBlob);
-        const manifestLink = document.createElement('a');
-        manifestLink.href = manifestUrl;
-        manifestLink.download = 'manifest.json';
-        manifestLink.click();
-        URL.revokeObjectURL(manifestUrl);
-        // Download HTML tags
-        const htmlBlob = new Blob([getHtmlTags()], { type: 'text/html' });
-        const htmlUrl = URL.createObjectURL(htmlBlob);
-        const htmlLink = document.createElement('a');
-        htmlLink.href = htmlUrl;
-        htmlLink.download = 'favicon-tags.html';
-        htmlLink.click();
-        URL.revokeObjectURL(htmlUrl);
-        // Download assets
-        assets.forEach((asset, i) => {
-            setTimeout(() => downloadSingle(asset), i * 200);
-        });
-    }, [assets, downloadSingle, getManifestJson, getHtmlTags]);
-    return {
-        config,
-        setConfig,
-        assets,
-        isGenerating,
-        generate,
-        downloadAll,
-        downloadSingle,
-        getManifestJson,
-        getHtmlTags,
+      ]
     };
+    return JSON.stringify(manifest, null, 2);
+  }, [config]);
+  const getHtmlTags = useCallback(() => {
+    return `<!-- Favicons -->
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="shortcut icon" href="/favicon.ico">
+
+<!-- Apple Touch Icon -->
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+
+<!-- Safari Pinned Tab -->
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="${config.themeColor}">
+
+<!-- Windows -->
+<meta name="msapplication-TileColor" content="${config.backgroundColor}">
+<meta name="msapplication-TileImage" content="/mstile-150x150.png">
+
+<!-- Theme -->
+<meta name="theme-color" content="${config.themeColor}">
+
+<!-- Web App Manifest -->
+<link rel="manifest" href="/manifest.json">`;
+  }, [config]);
+  const downloadSingle = useCallback((asset) => {
+    const link = document.createElement("a");
+    link.href = asset.dataUrl;
+    link.download = asset.filename;
+    link.click();
+  }, []);
+  const downloadAll = useCallback(() => {
+    const manifestBlob = new Blob([getManifestJson()], { type: "application/json" });
+    const manifestUrl = URL.createObjectURL(manifestBlob);
+    const manifestLink = document.createElement("a");
+    manifestLink.href = manifestUrl;
+    manifestLink.download = "manifest.json";
+    manifestLink.click();
+    URL.revokeObjectURL(manifestUrl);
+    const htmlBlob = new Blob([getHtmlTags()], { type: "text/html" });
+    const htmlUrl = URL.createObjectURL(htmlBlob);
+    const htmlLink = document.createElement("a");
+    htmlLink.href = htmlUrl;
+    htmlLink.download = "favicon-tags.html";
+    htmlLink.click();
+    URL.revokeObjectURL(htmlUrl);
+    assets.forEach((asset, i) => {
+      setTimeout(() => downloadSingle(asset), i * 200);
+    });
+  }, [assets, downloadSingle, getManifestJson, getHtmlTags]);
+  return {
+    config,
+    setConfig,
+    assets,
+    isGenerating,
+    generate,
+    downloadAll,
+    downloadSingle,
+    getManifestJson,
+    getHtmlTags
+  };
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Component
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Favicon generator component for creating all favicon variants.
- */
-function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenerate, className = '', }) {
-    const { t } = useNiceTranslation();
-    const { config, setConfig, assets, isGenerating, generate, downloadAll, downloadSingle, getManifestJson, getHtmlTags, } = useFaviconGenerator(icon, fill, manifestConfig);
-    const [activeTab, setActiveTab] = useState('preview');
-    const handleGenerate = async () => {
-        await generate();
-        if (onGenerate && assets.length > 0) {
-            onGenerate(assets, getManifestJson());
+function NiceFaviconGenerator({
+  icon,
+  fill = "#1e1e1e",
+  manifestConfig,
+  onGenerate,
+  className = ""
+}) {
+  const { t } = useNiceTranslation();
+  const {
+    config,
+    setConfig,
+    assets,
+    isGenerating,
+    generate,
+    downloadAll,
+    downloadSingle,
+    getManifestJson,
+    getHtmlTags
+  } = useFaviconGenerator(icon, fill, manifestConfig);
+  const [activeTab, setActiveTab] = useState("preview");
+  const handleGenerate = async () => {
+    await generate();
+    if (onGenerate && assets.length > 0) {
+      onGenerate(assets, getManifestJson());
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsx("h3", { style: styles.sectionTitle, children: t("faviconGenerator.manifestConfiguration", "Manifest Configuration") }),
+      /* @__PURE__ */ jsxs("div", { style: styles.formGrid, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.formGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: t("faviconGenerator.appName", "App Name") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: config.name,
+              onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })),
+              style: styles.input
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.formGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: t("faviconGenerator.shortName", "Short Name") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: config.shortName,
+              onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })),
+              style: styles.input
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.formGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: t("faviconGenerator.themeColor", "Theme Color") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: config.themeColor,
+              onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })),
+              style: styles.colorInput
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.formGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: t("faviconGenerator.backgroundColor", "Background Color") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: config.backgroundColor,
+              onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })),
+              style: styles.colorInput
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.formGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: t("faviconGenerator.displayMode", "Display Mode") }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: config.display,
+              onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })),
+              style: styles.input,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "standalone", children: t("faviconGenerator.standalone", "Standalone") }),
+                /* @__PURE__ */ jsx("option", { value: "fullscreen", children: t("faviconGenerator.fullscreen", "Fullscreen") }),
+                /* @__PURE__ */ jsx("option", { value: "minimal-ui", children: t("faviconGenerator.minimalUi", "Minimal UI") }),
+                /* @__PURE__ */ jsx("option", { value: "browser", children: t("faviconGenerator.browser", "Browser") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.formGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: t("faviconGenerator.startUrl", "Start URL") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: config.startUrl,
+              onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })),
+              style: styles.input
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleGenerate,
+          disabled: isGenerating,
+          style: {
+            ...styles.button,
+            ...isGenerating ? styles.buttonDisabled : styles.buttonPrimary
+          },
+          children: isGenerating ? t("faviconGenerator.generating", "Generating...") : t("faviconGenerator.generateFavicons", "Generate Favicons")
         }
-    };
-    return (jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.section, children: [jsx("h3", { style: styles.sectionTitle, children: t('faviconGenerator.manifestConfiguration', 'Manifest Configuration') }), jsxs("div", { style: styles.formGrid, children: [jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.appName', 'App Name') }), jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.shortName', 'Short Name') }), jsx("input", { type: "text", value: config.shortName, onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.themeColor', 'Theme Color') }), jsx("input", { type: "color", value: config.themeColor, onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.backgroundColor', 'Background Color') }), jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.displayMode', 'Display Mode') }), jsxs("select", { value: config.display, onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })), style: styles.input, children: [jsx("option", { value: "standalone", children: t('faviconGenerator.standalone', 'Standalone') }), jsx("option", { value: "fullscreen", children: t('faviconGenerator.fullscreen', 'Fullscreen') }), jsx("option", { value: "minimal-ui", children: t('faviconGenerator.minimalUi', 'Minimal UI') }), jsx("option", { value: "browser", children: t('faviconGenerator.browser', 'Browser') })] })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.startUrl', 'Start URL') }), jsx("input", { type: "text", value: config.startUrl, onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })), style: styles.input })] })] })] }), jsxs("div", { style: styles.actions, children: [jsx("button", { onClick: handleGenerate, disabled: isGenerating, style: {
-                            ...styles.button,
-                            ...(isGenerating ? styles.buttonDisabled : styles.buttonPrimary),
-                        }, children: isGenerating
-                            ? t('faviconGenerator.generating', 'Generating...')
-                            : t('faviconGenerator.generateFavicons', 'Generate Favicons') }), assets.length > 0 && (jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: t('faviconGenerator.downloadAll', 'Download All') }))] }), assets.length > 0 && (jsxs("div", { style: styles.section, children: [jsxs("div", { style: styles.tabs, children: [jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: t('faviconGenerator.preview', 'Preview') }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: t('faviconGenerator.htmlTags', 'HTML Tags') })] }), activeTab === 'preview' && (jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxs("div", { style: styles.assetCard, children: [jsx("div", { style: styles.assetPreview, children: jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxs("div", { style: styles.assetInfo, children: [jsx("span", { style: styles.assetName, children: asset.filename }), jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, "aria-label": t('faviconGenerator.download', 'Download {filename}').replace('{filename}', String(asset.filename)), children: jsx(NtdDownload, { size: 14, variant: "outline" }) })] }, asset.filename))) })), activeTab === 'manifest' && jsx("pre", { style: styles.codeBlock, children: getManifestJson() }), activeTab === 'html' && jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })] })), jsxs("div", { style: styles.reference, children: [jsx("h4", { style: styles.referenceTitle, children: t('faviconGenerator.faviconSizesReference', 'Favicon Sizes Reference') }), jsxs("table", { style: styles.table, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { style: styles.th, children: t('faviconGenerator.file', 'File') }), jsx("th", { style: styles.th, children: t('faviconGenerator.size', 'Size') }), jsx("th", { style: styles.th, children: t('faviconGenerator.purpose', 'Purpose') })] }) }), jsx("tbody", { children: FAVICON_SIZES.map((f) => (jsxs("tr", { children: [jsxs("td", { style: styles.td, children: [f.name, ".", f.format] }), jsxs("td", { style: styles.td, children: [f.size, "x", f.size] }), jsx("td", { style: styles.td, children: f.purpose })] }, f.name))) })] })] })] }));
+      ),
+      assets.length > 0 && /* @__PURE__ */ jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: t("faviconGenerator.downloadAll", "Download All") })
+    ] }),
+    assets.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.tabs, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: { ...styles.tab, ...activeTab === "preview" ? styles.tabActive : {} },
+            onClick: () => setActiveTab("preview"),
+            children: t("faviconGenerator.preview", "Preview")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: { ...styles.tab, ...activeTab === "manifest" ? styles.tabActive : {} },
+            onClick: () => setActiveTab("manifest"),
+            children: "manifest.json"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: { ...styles.tab, ...activeTab === "html" ? styles.tabActive : {} },
+            onClick: () => setActiveTab("html"),
+            children: t("faviconGenerator.htmlTags", "HTML Tags")
+          }
+        )
+      ] }),
+      activeTab === "preview" && /* @__PURE__ */ jsx("div", { style: styles.assetGrid, children: assets.map((asset) => /* @__PURE__ */ jsxs("div", { style: styles.assetCard, children: [
+        /* @__PURE__ */ jsx("div", { style: styles.assetPreview, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: asset.dataUrl,
+            alt: asset.filename,
+            style: { maxWidth: "64px", maxHeight: "64px" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: styles.assetInfo, children: [
+          /* @__PURE__ */ jsx("span", { style: styles.assetName, children: asset.filename }),
+          /* @__PURE__ */ jsxs("span", { style: styles.assetSize, children: [
+            asset.size,
+            "x",
+            asset.size
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: styles.assetPurpose, children: asset.purpose })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => downloadSingle(asset),
+            style: styles.downloadBtn,
+            "aria-label": t("faviconGenerator.download", "Download {filename}").replace(
+              "{filename}",
+              String(asset.filename)
+            ),
+            children: /* @__PURE__ */ jsx(NtdDownload, { size: 14, variant: "outline" })
+          }
+        )
+      ] }, asset.filename)) }),
+      activeTab === "manifest" && /* @__PURE__ */ jsx("pre", { style: styles.codeBlock, children: getManifestJson() }),
+      activeTab === "html" && /* @__PURE__ */ jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles.reference, children: [
+      /* @__PURE__ */ jsx("h4", { style: styles.referenceTitle, children: t("faviconGenerator.faviconSizesReference", "Favicon Sizes Reference") }),
+      /* @__PURE__ */ jsxs("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { style: styles.th, children: t("faviconGenerator.file", "File") }),
+          /* @__PURE__ */ jsx("th", { style: styles.th, children: t("faviconGenerator.size", "Size") }),
+          /* @__PURE__ */ jsx("th", { style: styles.th, children: t("faviconGenerator.purpose", "Purpose") })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: FAVICON_SIZES.map((f) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsxs("td", { style: styles.td, children: [
+            f.name,
+            ".",
+            f.format
+          ] }),
+          /* @__PURE__ */ jsxs("td", { style: styles.td, children: [
+            f.size,
+            "x",
+            f.size
+          ] }),
+          /* @__PURE__ */ jsx("td", { style: styles.td, children: f.purpose })
+        ] }, f.name)) })
+      ] })
+    ] })
+  ] });
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Styles
-   ══════════════════════════════════════════════════════════════════════════════ */
 const styles = {
-    container: {
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: '14px',
-        border: '1px solid #e5e7eb',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        padding: '16px',
-    },
-    section: {
-        marginBottom: '20px',
-    },
-    sectionTitle: {
-        margin: '0 0 12px 0',
-        fontSize: '15px',
-        fontWeight: 600,
-    },
-    formGrid: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-        gap: '12px',
-    },
-    formGroup: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '4px',
-    },
-    label: {
-        fontSize: '12px',
-        fontWeight: 500,
-        color: '#6b7280',
-    },
-    input: {
-        padding: '8px 12px',
-        border: '1px solid #d1d5db',
-        borderRadius: '6px',
-        fontSize: '14px',
-    },
-    colorInput: {
-        width: '100%',
-        height: '36px',
-        padding: '2px',
-        border: '1px solid #d1d5db',
-        borderRadius: '6px',
-        cursor: 'pointer',
-    },
-    actions: {
-        display: 'flex',
-        gap: '12px',
-        marginBottom: '20px',
-    },
-    button: {
-        padding: '10px 20px',
-        border: 'none',
-        borderRadius: '6px',
-        fontSize: '14px',
-        fontWeight: 500,
-        cursor: 'pointer',
-        transition: 'all 0.2s',
-    },
-    buttonPrimary: {
-        backgroundColor: '#3b82f6',
-        color: 'white',
-    },
-    buttonSecondary: {
-        backgroundColor: '#f3f4f6',
-        color: '#374151',
-        border: '1px solid #d1d5db',
-    },
-    buttonDisabled: {
-        backgroundColor: '#e5e7eb',
-        color: '#9ca3af',
-        cursor: 'not-allowed',
-    },
-    tabs: {
-        display: 'flex',
-        borderBottom: '1px solid #e5e7eb',
-        marginBottom: '16px',
-    },
-    tab: {
-        padding: '8px 16px',
-        border: 'none',
-        background: 'none',
-        cursor: 'pointer',
-        fontSize: '13px',
-        color: '#6b7280',
-    },
-    tabActive: {
-        color: '#3b82f6',
-        borderBottom: '2px solid #3b82f6',
-        marginBottom: '-1px',
-    },
-    assetGrid: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
-        gap: '12px',
-    },
-    assetCard: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '12px',
-        padding: '12px',
-        border: '1px solid #e5e7eb',
-        borderRadius: '8px',
-        backgroundColor: '#fafafa',
-    },
-    assetPreview: {
-        width: '64px',
-        height: '64px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'white',
-        borderRadius: '4px',
-        border: '1px solid #e5e7eb',
-    },
-    assetInfo: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '2px',
-    },
-    assetName: {
-        fontSize: '13px',
-        fontWeight: 500,
-    },
-    assetSize: {
-        fontSize: '11px',
-        color: '#6b7280',
-    },
-    assetPurpose: {
-        fontSize: '11px',
-        color: '#9ca3af',
-    },
-    downloadBtn: {
-        width: '32px',
-        height: '32px',
-        border: '1px solid #d1d5db',
-        borderRadius: '6px',
-        backgroundColor: 'white',
-        cursor: 'pointer',
-        fontSize: '16px',
-    },
-    codeBlock: {
-        padding: '16px',
-        backgroundColor: '#1e1e1e',
-        color: '#d4d4d4',
-        borderRadius: '8px',
-        fontSize: '12px',
-        fontFamily: 'monospace',
-        overflow: 'auto',
-        whiteSpace: 'pre-wrap',
-    },
-    reference: {
-        marginTop: '20px',
-        padding: '16px',
-        backgroundColor: '#f9fafb',
-        borderRadius: '8px',
-    },
-    referenceTitle: {
-        margin: '0 0 12px 0',
-        fontSize: '13px',
-        fontWeight: 600,
-        color: '#6b7280',
-    },
-    table: {
-        width: '100%',
-        borderCollapse: 'collapse',
-        fontSize: '12px',
-    },
-    th: {
-        textAlign: 'left',
-        padding: '8px',
-        borderBottom: '1px solid #e5e7eb',
-        fontWeight: 600,
-        color: '#374151',
-    },
-    td: {
-        padding: '8px',
-        borderBottom: '1px solid #f3f4f6',
-        color: '#6b7280',
-    },
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    overflow: "hidden",
+    padding: "16px"
+  },
+  section: {
+    marginBottom: "20px"
+  },
+  sectionTitle: {
+    margin: "0 0 12px 0",
+    fontSize: "15px",
+    fontWeight: 600
+  },
+  formGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+    gap: "12px"
+  },
+  formGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  label: {
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "#6b7280"
+  },
+  input: {
+    padding: "8px 12px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    fontSize: "14px"
+  },
+  colorInput: {
+    width: "100%",
+    height: "36px",
+    padding: "2px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  actions: {
+    display: "flex",
+    gap: "12px",
+    marginBottom: "20px"
+  },
+  button: {
+    padding: "10px 20px",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 0.2s"
+  },
+  buttonPrimary: {
+    backgroundColor: "#3b82f6",
+    color: "white"
+  },
+  buttonSecondary: {
+    backgroundColor: "#f3f4f6",
+    color: "#374151",
+    border: "1px solid #d1d5db"
+  },
+  buttonDisabled: {
+    backgroundColor: "#e5e7eb",
+    color: "#9ca3af",
+    cursor: "not-allowed"
+  },
+  tabs: {
+    display: "flex",
+    borderBottom: "1px solid #e5e7eb",
+    marginBottom: "16px"
+  },
+  tab: {
+    padding: "8px 16px",
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    fontSize: "13px",
+    color: "#6b7280"
+  },
+  tabActive: {
+    color: "#3b82f6",
+    borderBottom: "2px solid #3b82f6",
+    marginBottom: "-1px"
+  },
+  assetGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
+    gap: "12px"
+  },
+  assetCard: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    padding: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    backgroundColor: "#fafafa"
+  },
+  assetPreview: {
+    width: "64px",
+    height: "64px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "white",
+    borderRadius: "4px",
+    border: "1px solid #e5e7eb"
+  },
+  assetInfo: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px"
+  },
+  assetName: {
+    fontSize: "13px",
+    fontWeight: 500
+  },
+  assetSize: {
+    fontSize: "11px",
+    color: "#6b7280"
+  },
+  assetPurpose: {
+    fontSize: "11px",
+    color: "#9ca3af"
+  },
+  downloadBtn: {
+    width: "32px",
+    height: "32px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    backgroundColor: "white",
+    cursor: "pointer",
+    fontSize: "16px"
+  },
+  codeBlock: {
+    padding: "16px",
+    backgroundColor: "#1e1e1e",
+    color: "#d4d4d4",
+    borderRadius: "8px",
+    fontSize: "12px",
+    fontFamily: "monospace",
+    overflow: "auto",
+    whiteSpace: "pre-wrap"
+  },
+  reference: {
+    marginTop: "20px",
+    padding: "16px",
+    backgroundColor: "#f9fafb",
+    borderRadius: "8px"
+  },
+  referenceTitle: {
+    margin: "0 0 12px 0",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#6b7280"
+  },
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "12px"
+  },
+  th: {
+    textAlign: "left",
+    padding: "8px",
+    borderBottom: "1px solid #e5e7eb",
+    fontWeight: 600,
+    color: "#374151"
+  },
+  td: {
+    padding: "8px",
+    borderBottom: "1px solid #f3f4f6",
+    color: "#6b7280"
+  }
+};
+export {
+  NiceFaviconGenerator,
+  useFaviconGenerator
 };
-
-export { NiceFaviconGenerator, useFaviconGenerator };