@nice2dev/icons 1.3.15 → 1.3.17

package/dist/cjs/NiceIconSetCreator.js

@@ -1,578 +1,709 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var actions = require('./icons/actions.js');
-
-/* ══════════════════════════════════════════════════════════════════════════════
-   Constants
-   ══════════════════════════════════════════════════════════════════════════════ */
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const actions = require("./icons/actions.js");
 const DEFAULT_CONFIG = {
-    name: 'MyIcons',
-    packageName: '@myproject/icons',
-    // audit-allow: i18n — the generated package.json's default description, not UI copy
-    description: 'Custom icon set',
-    version: '1.0.0',
-    author: '',
-    license: 'MIT',
-    format: 'esm',
-    generateTypes: true,
-    includeMetadata: false,
-    treeShaking: true,
+  name: "MyIcons",
+  packageName: "@myproject/icons",
+  // audit-allow: i18n — the generated package.json's default description, not UI copy
+  description: "Custom icon set",
+  version: "1.0.0",
+  author: "",
+  license: "MIT",
+  format: "esm",
+  generateTypes: true,
+  includeMetadata: false,
+  treeShaking: true
 };
-/**
- * Converts to PascalCase.
- */
 function toPascalCase(str) {
-    return str
-        .split(/[-_\s]+/)
-        .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
-        .join('');
+  return str.split(/[-_\s]+/).map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join("");
 }
-/**
- * Generates ESM index file.
- */
 function generateESMIndex(items, config) {
-    const lines = [
-        `/**`,
-        ` * ${config.name}`,
-        ` * ${config.description}`,
-        ` * @version ${config.version}`,
-        ` * @license ${config.license}`,
-        ` */`,
-        '',
-    ];
-    if (config.treeShaking) {
-        // Individual exports
-        items
-            .filter((i) => i.included)
-            .forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`export { ${item.originalName} as ${exportName} } from '@nice2dev/icons';`);
-        });
-    }
-    else {
-        // Single object export
-        lines.push(`import {`);
-        items
-            .filter((i) => i.included)
-            .forEach((item) => {
-            lines.push(`  ${item.originalName},`);
-        });
-        lines.push(`} from '@nice2dev/icons';`);
-        lines.push('');
-        lines.push(`export const ${config.name} = {`);
-        items
-            .filter((i) => i.included)
-            .forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`  ${exportName}: ${item.originalName},`);
-        });
-        lines.push(`};`);
-    }
-    if (config.includeMetadata) {
-        lines.push('');
-        lines.push(`export const iconMetadata = {`);
-        items
-            .filter((i) => i.included && i.metadata)
-            .forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`  ${exportName}: ${JSON.stringify(item.metadata, null, 2)},`);
-        });
-        lines.push(`};`);
-    }
-    return lines.join('\n');
+  const lines = [
+    `/**`,
+    ` * ${config.name}`,
+    ` * ${config.description}`,
+    ` * @version ${config.version}`,
+    ` * @license ${config.license}`,
+    ` */`,
+    ""
+  ];
+  if (config.treeShaking) {
+    items.filter((i) => i.included).forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`export { ${item.originalName} as ${exportName} } from '@nice2dev/icons';`);
+    });
+  } else {
+    lines.push(`import {`);
+    items.filter((i) => i.included).forEach((item) => {
+      lines.push(`  ${item.originalName},`);
+    });
+    lines.push(`} from '@nice2dev/icons';`);
+    lines.push("");
+    lines.push(`export const ${config.name} = {`);
+    items.filter((i) => i.included).forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`  ${exportName}: ${item.originalName},`);
+    });
+    lines.push(`};`);
+  }
+  if (config.includeMetadata) {
+    lines.push("");
+    lines.push(`export const iconMetadata = {`);
+    items.filter((i) => i.included && i.metadata).forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`  ${exportName}: ${JSON.stringify(item.metadata, null, 2)},`);
+    });
+    lines.push(`};`);
+  }
+  return lines.join("\n");
 }
-/**
- * Generates CommonJS index file.
- */
 function generateCJSIndex(items, config) {
-    const lines = [
-        `/**`,
-        ` * ${config.name}`,
-        ` * ${config.description}`,
-        ` * @version ${config.version}`,
-        ` * @license ${config.license}`,
-        ` */`,
-        '',
-        `const icons = require('@nice2dev/icons');`,
-        '',
-    ];
-    if (config.treeShaking) {
-        items
-            .filter((i) => i.included)
-            .forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`exports.${exportName} = icons.${item.originalName};`);
-        });
-    }
-    else {
-        lines.push(`exports.${config.name} = {`);
-        items
-            .filter((i) => i.included)
-            .forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`  ${exportName}: icons.${item.originalName},`);
-        });
-        lines.push(`};`);
-    }
-    return lines.join('\n');
+  const lines = [
+    `/**`,
+    ` * ${config.name}`,
+    ` * ${config.description}`,
+    ` * @version ${config.version}`,
+    ` * @license ${config.license}`,
+    ` */`,
+    "",
+    `const icons = require('@nice2dev/icons');`,
+    ""
+  ];
+  if (config.treeShaking) {
+    items.filter((i) => i.included).forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`exports.${exportName} = icons.${item.originalName};`);
+    });
+  } else {
+    lines.push(`exports.${config.name} = {`);
+    items.filter((i) => i.included).forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`  ${exportName}: icons.${item.originalName},`);
+    });
+    lines.push(`};`);
+  }
+  return lines.join("\n");
 }
-/**
- * Generates TypeScript types file.
- */
 function generateTypes(items, config) {
-    const lines = [
-        `/**`,
-        ` * TypeScript declarations for ${config.name}`,
-        ` * @version ${config.version}`,
-        ` */`,
-        '',
-        `import type { ComponentType } from 'react';`,
-        `import type { NtdIconProps } from '@nice2dev/icons';`,
-        '',
-    ];
-    const includedItems = items.filter((i) => i.included);
-    if (config.treeShaking) {
-        includedItems.forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`export declare const ${exportName}: ComponentType<NtdIconProps>;`);
-        });
-    }
-    else {
-        lines.push(`export declare const ${config.name}: {`);
-        includedItems.forEach((item) => {
-            const exportName = toPascalCase(item.customName);
-            lines.push(`  ${exportName}: ComponentType<NtdIconProps>;`);
-        });
-        lines.push(`};`);
-    }
-    // Icon names union type
-    lines.push('');
-    lines.push(`export type ${config.name}Name =`);
-    includedItems.forEach((item, i) => {
-        const exportName = toPascalCase(item.customName);
-        const suffix = i < includedItems.length - 1 ? ' |' : ';';
-        lines.push(`  | '${exportName}'${suffix}`);
+  const lines = [
+    `/**`,
+    ` * TypeScript declarations for ${config.name}`,
+    ` * @version ${config.version}`,
+    ` */`,
+    "",
+    `import type { ComponentType } from 'react';`,
+    `import type { NtdIconProps } from '@nice2dev/icons';`,
+    ""
+  ];
+  const includedItems = items.filter((i) => i.included);
+  if (config.treeShaking) {
+    includedItems.forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`export declare const ${exportName}: ComponentType<NtdIconProps>;`);
+    });
+  } else {
+    lines.push(`export declare const ${config.name}: {`);
+    includedItems.forEach((item) => {
+      const exportName = toPascalCase(item.customName);
+      lines.push(`  ${exportName}: ComponentType<NtdIconProps>;`);
     });
-    return lines.join('\n');
+    lines.push(`};`);
+  }
+  lines.push("");
+  lines.push(`export type ${config.name}Name =`);
+  includedItems.forEach((item, i) => {
+    const exportName = toPascalCase(item.customName);
+    const suffix = i < includedItems.length - 1 ? " |" : ";";
+    lines.push(`  | '${exportName}'${suffix}`);
+  });
+  return lines.join("\n");
 }
-/**
- * Generates package.json.
- */
 function generatePackageJson(items, config) {
-    const pkg = {
-        name: config.packageName,
-        version: config.version,
-        description: config.description,
-        author: config.author,
-        license: config.license,
-        sideEffects: false,
-        peerDependencies: {
-            '@nice2dev/icons': '^1.0.0',
-            react: '>=17.0.0',
-        },
+  const pkg = {
+    name: config.packageName,
+    version: config.version,
+    description: config.description,
+    author: config.author,
+    license: config.license,
+    sideEffects: false,
+    peerDependencies: {
+      "@nice2dev/icons": "^1.0.0",
+      react: ">=17.0.0"
+    }
+  };
+  if (config.format === "esm" || config.format === "both") {
+    pkg.type = "module";
+    pkg.main = "./index.js";
+    pkg.module = "./index.js";
+  }
+  if (config.format === "cjs") {
+    pkg.main = "./index.cjs";
+  }
+  if (config.format === "both") {
+    pkg.exports = {
+      ".": {
+        import: "./index.js",
+        require: "./index.cjs",
+        types: "./index.d.ts"
+      }
     };
-    if (config.format === 'esm' || config.format === 'both') {
-        pkg.type = 'module';
-        pkg.main = './index.js';
-        pkg.module = './index.js';
+  }
+  if (config.generateTypes) {
+    pkg.types = "./index.d.ts";
+  }
+  return JSON.stringify(pkg, null, 2);
+}
+function useIconSetCreator(options) {
+  const [items, setItems] = React.useState(
+    () => options.icons.map((i) => ({
+      originalName: i.name,
+      customName: i.name,
+      icon: i.icon,
+      metadata: i.metadata,
+      included: options.initialSelection?.includes(i.name) ?? false
+    }))
+  );
+  const [config, setConfig] = React.useState({
+    ...DEFAULT_CONFIG,
+    ...options.defaultConfig
+  });
+  const selectedCount = React.useMemo(() => items.filter((i) => i.included).length, [items]);
+  const toggleIcon = React.useCallback((name) => {
+    setItems(
+      (prev) => prev.map(
+        (item) => item.originalName === name ? { ...item, included: !item.included } : item
+      )
+    );
+  }, []);
+  const selectAll = React.useCallback(() => {
+    setItems((prev) => prev.map((item) => ({ ...item, included: true })));
+  }, []);
+  const deselectAll = React.useCallback(() => {
+    setItems((prev) => prev.map((item) => ({ ...item, included: false })));
+  }, []);
+  const renameIcon = React.useCallback((originalName, newName) => {
+    setItems(
+      (prev) => prev.map(
+        (item) => item.originalName === originalName ? { ...item, customName: newName } : item
+      )
+    );
+  }, []);
+  const updateConfig = React.useCallback((updates) => {
+    setConfig((prev) => ({ ...prev, ...updates }));
+  }, []);
+  const getSelectedItems = React.useCallback(() => items.filter((i) => i.included), [items]);
+  const generateExport = React.useCallback(() => {
+    const output = [];
+    const selectedItems = items.filter((i) => i.included);
+    if (selectedItems.length === 0) {
+      return output;
     }
-    if (config.format === 'cjs') {
-        pkg.main = './index.cjs';
+    if (config.format === "esm" || config.format === "both") {
+      output.push({
+        filename: "index.js",
+        content: generateESMIndex(selectedItems, config),
+        type: "js"
+      });
     }
-    if (config.format === 'both') {
-        pkg.exports = {
-            '.': {
-                import: './index.js',
-                require: './index.cjs',
-                types: './index.d.ts',
-            },
-        };
+    if (config.format === "cjs" || config.format === "both") {
+      output.push({
+        filename: config.format === "both" ? "index.cjs" : "index.js",
+        content: generateCJSIndex(selectedItems, config),
+        type: "js"
+      });
     }
     if (config.generateTypes) {
-        pkg.types = './index.d.ts';
+      output.push({
+        filename: "index.d.ts",
+        content: generateTypes(selectedItems, config),
+        type: "d.ts"
+      });
     }
-    return JSON.stringify(pkg, null, 2);
-}
-/**
- * Hook for managing icon set creator state.
- */
-function useIconSetCreator(options) {
-    const [items, setItems] = React.useState(() => options.icons.map((i) => {
-        var _a, _b;
-        return ({
-            originalName: i.name,
-            customName: i.name,
-            icon: i.icon,
-            metadata: i.metadata,
-            included: (_b = (_a = options.initialSelection) === null || _a === void 0 ? void 0 : _a.includes(i.name)) !== null && _b !== void 0 ? _b : false,
-        });
-    }));
-    const [config, setConfig] = React.useState({
-        ...DEFAULT_CONFIG,
-        ...options.defaultConfig,
+    output.push({
+      filename: "package.json",
+      content: generatePackageJson(selectedItems, config),
+      type: "json"
     });
-    const selectedCount = React.useMemo(() => items.filter((i) => i.included).length, [items]);
-    const toggleIcon = React.useCallback((name) => {
-        setItems((prev) => prev.map((item) => item.originalName === name ? { ...item, included: !item.included } : item));
-    }, []);
-    const selectAll = React.useCallback(() => {
-        setItems((prev) => prev.map((item) => ({ ...item, included: true })));
-    }, []);
-    const deselectAll = React.useCallback(() => {
-        setItems((prev) => prev.map((item) => ({ ...item, included: false })));
-    }, []);
-    const renameIcon = React.useCallback((originalName, newName) => {
-        setItems((prev) => prev.map((item) => item.originalName === originalName ? { ...item, customName: newName } : item));
-    }, []);
-    const updateConfig = React.useCallback((updates) => {
-        setConfig((prev) => ({ ...prev, ...updates }));
-    }, []);
-    const getSelectedItems = React.useCallback(() => items.filter((i) => i.included), [items]);
-    const generateExport = React.useCallback(() => {
-        const output = [];
-        const selectedItems = items.filter((i) => i.included);
-        if (selectedItems.length === 0) {
-            return output;
-        }
-        // ESM index
-        if (config.format === 'esm' || config.format === 'both') {
-            output.push({
-                filename: 'index.js',
-                content: generateESMIndex(selectedItems, config),
-                type: 'js',
-            });
-        }
-        // CJS index
-        if (config.format === 'cjs' || config.format === 'both') {
-            output.push({
-                filename: config.format === 'both' ? 'index.cjs' : 'index.js',
-                content: generateCJSIndex(selectedItems, config),
-                type: 'js',
-            });
-        }
-        // TypeScript types
-        if (config.generateTypes) {
-            output.push({
-                filename: 'index.d.ts',
-                content: generateTypes(selectedItems, config),
-                type: 'd.ts',
-            });
-        }
-        // package.json
-        output.push({
-            filename: 'package.json',
-            content: generatePackageJson(selectedItems, config),
-            type: 'json',
-        });
-        return output;
-    }, [items, config]);
-    return {
-        items,
-        config,
-        selectedCount,
-        toggleIcon,
-        selectAll,
-        deselectAll,
-        renameIcon,
-        updateConfig,
-        generateExport,
-        getSelectedItems,
-    };
+    return output;
+  }, [items, config]);
+  return {
+    items,
+    config,
+    selectedCount,
+    toggleIcon,
+    selectAll,
+    deselectAll,
+    renameIcon,
+    updateConfig,
+    generateExport,
+    getSelectedItems
+  };
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Component
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Icon Set Creator component for building custom icon packages.
- */
-function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectionChange: _onSelectionChange, onExport, className = '', }) {
-    const { t } = uiCore.useNiceTranslation();
-    const creator = useIconSetCreator({ icons, initialSelection, defaultConfig });
-    const [searchQuery, setSearchQuery] = React.useState('');
-    const [categoryFilter, setCategoryFilter] = React.useState('all');
-    const [previewOutput, setPreviewOutput] = React.useState(null);
-    // Filter items
-    const filteredItems = React.useMemo(() => {
-        return creator.items.filter((item) => {
-            var _a, _b, _c;
-            const matchesSearch = searchQuery === '' ||
-                item.originalName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                item.customName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                ((_b = (_a = item.metadata) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.some((t) => t.toLowerCase().includes(searchQuery.toLowerCase())));
-            const matchesCategory = categoryFilter === 'all' || ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.category) === categoryFilter;
-            return matchesSearch && matchesCategory;
-        });
-    }, [creator.items, searchQuery, categoryFilter]);
-    // Get unique categories
-    const categories = React.useMemo(() => {
-        const cats = new Set();
-        icons.forEach((i) => {
-            var _a;
-            if ((_a = i.metadata) === null || _a === void 0 ? void 0 : _a.category) {
-                cats.add(i.metadata.category);
+function NiceIconSetCreator({
+  icons,
+  initialSelection,
+  defaultConfig,
+  onSelectionChange: _onSelectionChange,
+  onExport,
+  className = ""
+}) {
+  const { t } = uiCore.useNiceTranslation();
+  const creator = useIconSetCreator({ icons, initialSelection, defaultConfig });
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [categoryFilter, setCategoryFilter] = React.useState("all");
+  const [previewOutput, setPreviewOutput] = React.useState(null);
+  const filteredItems = React.useMemo(() => {
+    return creator.items.filter((item) => {
+      const matchesSearch = searchQuery === "" || item.originalName.toLowerCase().includes(searchQuery.toLowerCase()) || item.customName.toLowerCase().includes(searchQuery.toLowerCase()) || item.metadata?.tags?.some((t2) => t2.toLowerCase().includes(searchQuery.toLowerCase()));
+      const matchesCategory = categoryFilter === "all" || item.metadata?.category === categoryFilter;
+      return matchesSearch && matchesCategory;
+    });
+  }, [creator.items, searchQuery, categoryFilter]);
+  const categories = React.useMemo(() => {
+    const cats = /* @__PURE__ */ new Set();
+    icons.forEach((i) => {
+      if (i.metadata?.category) {
+        cats.add(i.metadata.category);
+      }
+    });
+    return Array.from(cats);
+  }, [icons]);
+  const handleExport = React.useCallback(() => {
+    const output = creator.generateExport();
+    setPreviewOutput(output);
+    onExport?.(output);
+  }, [creator, onExport]);
+  const handleDownloadZip = React.useCallback(async () => {
+    const output = creator.generateExport();
+    if (output.length === 0) {
+      return;
+    }
+    output.forEach((file) => {
+      const blob = new Blob([file.content], { type: "text/plain" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = file.filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    });
+  }, [creator]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.title, children: t("iconSetCreator.iconSetCreator", "Icon Set Creator") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.stats, children: t("iconSetCreator.iconsSelected", "{selectedCount} / {items} icons selected").replace("{selectedCount}", String(creator.selectedCount)).replace("{items}", String(creator.items.length)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.configPanel, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t("iconSetCreator.configuration", "Configuration") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t("iconSetCreator.setName", "Set Name") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: creator.config.name,
+              onChange: (e) => creator.updateConfig({ name: e.target.value }),
+              style: styles.input,
+              placeholder: "MyIcons"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t("iconSetCreator.packageName", "Package Name") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: creator.config.packageName,
+              onChange: (e) => creator.updateConfig({ packageName: e.target.value }),
+              style: styles.input,
+              placeholder: "@myproject/icons"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t("iconSetCreator.description", "Description") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: creator.config.description,
+              onChange: (e) => creator.updateConfig({ description: e.target.value }),
+              style: styles.input
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.field, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t("iconSetCreator.version", "Version") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: creator.config.version,
+                onChange: (e) => creator.updateConfig({ version: e.target.value }),
+                style: styles.input
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.field, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t("iconSetCreator.license", "License") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: creator.config.license,
+                onChange: (e) => creator.updateConfig({ license: e.target.value }),
+                style: styles.input
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t("iconSetCreator.exportFormat", "Export Format") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              value: creator.config.format,
+              onChange: (e) => creator.updateConfig({ format: e.target.value }),
+              style: styles.select,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "esm", children: t("iconSetCreator.esModules", "ES Modules") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "cjs", children: "CommonJS" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "both", children: t("iconSetCreator.both", "Both") })
+              ]
             }
-        });
-        return Array.from(cats);
-    }, [icons]);
-    // Handle export
-    const handleExport = React.useCallback(() => {
-        const output = creator.generateExport();
-        setPreviewOutput(output);
-        onExport === null || onExport === void 0 ? void 0 : onExport(output);
-    }, [creator, onExport]);
-    // Download as ZIP
-    const handleDownloadZip = React.useCallback(async () => {
-        const output = creator.generateExport();
-        if (output.length === 0) {
-            return;
-        }
-        // For simplicity, download files individually
-        // In production, use JSZip library
-        output.forEach((file) => {
-            const blob = new Blob([file.content], { type: 'text/plain' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = file.filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        });
-    }, [creator]);
-    return (jsxRuntime.jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h2", { style: styles.title, children: t('iconSetCreator.iconSetCreator', 'Icon Set Creator') }), jsxRuntime.jsx("div", { style: styles.stats, children: t('iconSetCreator.iconsSelected', '{selectedCount} / {items} icons selected')
-                            .replace('{selectedCount}', String(creator.selectedCount))
-                            .replace('{items}', String(creator.items.length)) })] }), jsxRuntime.jsxs("div", { style: styles.content, children: [jsxRuntime.jsxs("div", { style: styles.configPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.configuration', 'Configuration') }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.setName', 'Set Name') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.packageName', 'Package Name') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.description', 'Description') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.fieldRow, children: [jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.version', 'Version') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.license', 'License') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.exportFormat', 'Export Format') }), jsxRuntime.jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsxRuntime.jsx("option", { value: "esm", children: t('iconSetCreator.esModules', 'ES Modules') }), jsxRuntime.jsx("option", { value: "cjs", children: "CommonJS" }), jsxRuntime.jsx("option", { value: "both", children: t('iconSetCreator.both', 'Both') })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxGroup, children: [jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), t('iconSetCreator.generateTypescriptTypes', 'Generate TypeScript types')] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), t('iconSetCreator.treeShakingFriendly', 'Tree-shaking friendly')] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), t('iconSetCreator.includeMetadata', 'Include metadata')] })] }), jsxRuntime.jsxs("div", { style: styles.exportActions, children: [jsxRuntime.jsx("button", { onClick: handleExport, style: styles.primaryButton, children: t('iconSetCreator.previewExport', 'Preview Export') }), jsxRuntime.jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: t('iconSetCreator.downloadFiles', 'Download Files') })] })] }), jsxRuntime.jsxs("div", { style: styles.selectionPanel, children: [jsxRuntime.jsxs("div", { style: styles.selectionHeader, children: [jsxRuntime.jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t('iconSetCreator.searchIcons', 'Search icons...'), style: styles.searchInput }), jsxRuntime.jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsxRuntime.jsx("option", { value: "all", children: t('iconSetCreator.allCategories', 'All Categories') }), categories.map((cat) => (jsxRuntime.jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxRuntime.jsxs("div", { style: styles.selectionActions, children: [jsxRuntime.jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: t('iconSetCreator.selectAll', 'Select All') }), jsxRuntime.jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: t('iconSetCreator.deselectAll', 'Deselect All') })] }), jsxRuntime.jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxRuntime.jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault();
-                                            creator.toggleIcon(item.originalName);
-                                        }
-                                    }, style: {
-                                        ...styles.iconItem,
-                                        borderColor: item.included ? '#3b82f6' : '#e5e7eb',
-                                        backgroundColor: item.included ? '#eff6ff' : '#fff',
-                                    }, children: [jsxRuntime.jsx(item.icon, { size: 32 }), jsxRuntime.jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsxRuntime.jsx("span", { style: styles.checkmark, children: jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxRuntime.jsxs("div", { style: styles.previewPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.exportPreview', 'Export Preview') }), previewOutput.map((file) => (jsxRuntime.jsxs("div", { style: styles.filePreview, children: [jsxRuntime.jsx("div", { style: styles.fileName, children: file.filename }), jsxRuntime.jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.checkboxGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: styles.checkbox, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: creator.config.generateTypes,
+                onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked })
+              }
+            ),
+            t("iconSetCreator.generateTypescriptTypes", "Generate TypeScript types")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: styles.checkbox, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: creator.config.treeShaking,
+                onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked })
+              }
+            ),
+            t("iconSetCreator.treeShakingFriendly", "Tree-shaking friendly")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: styles.checkbox, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: creator.config.includeMetadata,
+                onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked })
+              }
+            ),
+            t("iconSetCreator.includeMetadata", "Include metadata")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.exportActions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleExport, style: styles.primaryButton, children: t("iconSetCreator.previewExport", "Preview Export") }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: t("iconSetCreator.downloadFiles", "Download Files") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.selectionPanel, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.selectionHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: t("iconSetCreator.searchIcons", "Search icons..."),
+              style: styles.searchInput
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              value: categoryFilter,
+              onChange: (e) => setCategoryFilter(e.target.value),
+              style: styles.categorySelect,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: t("iconSetCreator.allCategories", "All Categories") }),
+                categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: cat, children: cat }, cat))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.selectionActions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: t("iconSetCreator.selectAll", "Select All") }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: t("iconSetCreator.deselectAll", "Deselect All") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "checkbox",
+            "aria-checked": item.included,
+            "aria-label": item.customName,
+            tabIndex: 0,
+            onClick: () => creator.toggleIcon(item.originalName),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                creator.toggleIcon(item.originalName);
+              }
+            },
+            style: {
+              ...styles.iconItem,
+              borderColor: item.included ? "#3b82f6" : "#e5e7eb",
+              backgroundColor: item.included ? "#eff6ff" : "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 32 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.iconName, children: item.customName }),
+              item.included && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.checkmark, children: /* @__PURE__ */ jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) })
+            ]
+          },
+          item.originalName
+        )) })
+      ] }),
+      previewOutput && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.previewPanel, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t("iconSetCreator.exportPreview", "Export Preview") }),
+        previewOutput.map((file) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.filePreview, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.fileName, children: file.filename }),
+          /* @__PURE__ */ jsxRuntime.jsxs("pre", { style: styles.codePreview, children: [
+            file.content.slice(0, 1e3),
+            file.content.length > 1e3 && "..."
+          ] })
+        ] }, file.filename))
+      ] })
+    ] })
+  ] });
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Styles
-   ══════════════════════════════════════════════════════════════════════════════ */
 const styles = {
-    container: {
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: '14px',
-        border: '1px solid #e5e7eb',
-        borderRadius: '8px',
-        overflow: 'hidden',
-    },
-    header: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '16px 20px',
-        borderBottom: '1px solid #e5e7eb',
-        backgroundColor: '#f9fafb',
-    },
-    title: {
-        margin: 0,
-        fontSize: '18px',
-        fontWeight: 600,
-    },
-    stats: {
-        color: '#6b7280',
-        fontSize: '13px',
-    },
-    content: {
-        display: 'flex',
-        minHeight: '500px',
-    },
-    configPanel: {
-        width: '280px',
-        padding: '16px',
-        borderRight: '1px solid #e5e7eb',
-        backgroundColor: '#fafafa',
-    },
-    sectionTitle: {
-        margin: '0 0 16px 0',
-        fontSize: '14px',
-        fontWeight: 600,
-        color: '#374151',
-    },
-    field: {
-        marginBottom: '12px',
-    },
-    fieldRow: {
-        display: 'flex',
-        gap: '12px',
-    },
-    fieldLabel: {
-        display: 'block',
-        marginBottom: '4px',
-        fontSize: '12px',
-        fontWeight: 500,
-        color: '#6b7280',
-    },
-    input: {
-        width: '100%',
-        padding: '8px 10px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        fontSize: '13px',
-        boxSizing: 'border-box',
-    },
-    select: {
-        width: '100%',
-        padding: '8px 10px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        fontSize: '13px',
-        backgroundColor: '#fff',
-    },
-    checkboxGroup: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        marginTop: '16px',
-    },
-    checkbox: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        fontSize: '13px',
-        cursor: 'pointer',
-    },
-    exportActions: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        marginTop: '20px',
-    },
-    primaryButton: {
-        padding: '10px 16px',
-        borderRadius: '6px',
-        border: 'none',
-        backgroundColor: '#3b82f6',
-        color: '#fff',
-        fontWeight: 500,
-        cursor: 'pointer',
-    },
-    secondaryButton: {
-        padding: '10px 16px',
-        borderRadius: '6px',
-        border: '1px solid #d1d5db',
-        backgroundColor: '#fff',
-        fontWeight: 500,
-        cursor: 'pointer',
-    },
-    selectionPanel: {
-        flex: 1,
-        padding: '16px',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    selectionHeader: {
-        display: 'flex',
-        gap: '12px',
-        marginBottom: '12px',
-    },
-    searchInput: {
-        flex: 1,
-        padding: '8px 12px',
-        borderRadius: '6px',
-        border: '1px solid #d1d5db',
-        fontSize: '13px',
-    },
-    categorySelect: {
-        padding: '8px 12px',
-        borderRadius: '6px',
-        border: '1px solid #d1d5db',
-        fontSize: '13px',
-        backgroundColor: '#fff',
-    },
-    selectionActions: {
-        display: 'flex',
-        gap: '8px',
-        marginBottom: '12px',
-    },
-    smallButton: {
-        padding: '6px 12px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        backgroundColor: '#fff',
-        fontSize: '12px',
-        cursor: 'pointer',
-    },
-    iconGrid: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
-        gap: '8px',
-        overflowY: 'auto',
-        flex: 1,
-    },
-    iconItem: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '6px',
-        padding: '12px 8px',
-        borderRadius: '6px',
-        border: '2px solid',
-        cursor: 'pointer',
-        transition: 'all 0.15s ease',
-        position: 'relative',
-    },
-    iconName: {
-        fontSize: '11px',
-        color: '#6b7280',
-        textAlign: 'center',
-        wordBreak: 'break-word',
-    },
-    checkmark: {
-        position: 'absolute',
-        top: '4px',
-        right: '4px',
-        width: '18px',
-        height: '18px',
-        borderRadius: '50%',
-        backgroundColor: '#3b82f6',
-        color: '#fff',
-        fontSize: '11px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    previewPanel: {
-        width: '350px',
-        padding: '16px',
-        borderLeft: '1px solid #e5e7eb',
-        backgroundColor: '#f9fafb',
-        overflowY: 'auto',
-    },
-    filePreview: {
-        marginBottom: '16px',
-    },
-    fileName: {
-        fontSize: '12px',
-        fontWeight: 600,
-        color: '#374151',
-        marginBottom: '6px',
-        fontFamily: 'monospace',
-    },
-    codePreview: {
-        padding: '12px',
-        borderRadius: '6px',
-        backgroundColor: '#1e1e1e',
-        color: '#d4d4d4',
-        fontSize: '11px',
-        overflow: 'auto',
-        maxHeight: '200px',
-        fontFamily: 'monospace',
-        whiteSpace: 'pre-wrap',
-        margin: 0,
-    },
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "16px 20px",
+    borderBottom: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb"
+  },
+  title: {
+    margin: 0,
+    fontSize: "18px",
+    fontWeight: 600
+  },
+  stats: {
+    color: "#6b7280",
+    fontSize: "13px"
+  },
+  content: {
+    display: "flex",
+    minHeight: "500px"
+  },
+  configPanel: {
+    width: "280px",
+    padding: "16px",
+    borderRight: "1px solid #e5e7eb",
+    backgroundColor: "#fafafa"
+  },
+  sectionTitle: {
+    margin: "0 0 16px 0",
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#374151"
+  },
+  field: {
+    marginBottom: "12px"
+  },
+  fieldRow: {
+    display: "flex",
+    gap: "12px"
+  },
+  fieldLabel: {
+    display: "block",
+    marginBottom: "4px",
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "#6b7280"
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: "4px",
+    border: "1px solid #d1d5db",
+    fontSize: "13px",
+    boxSizing: "border-box"
+  },
+  select: {
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: "4px",
+    border: "1px solid #d1d5db",
+    fontSize: "13px",
+    backgroundColor: "#fff"
+  },
+  checkboxGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    marginTop: "16px"
+  },
+  checkbox: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "13px",
+    cursor: "pointer"
+  },
+  exportActions: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    marginTop: "20px"
+  },
+  primaryButton: {
+    padding: "10px 16px",
+    borderRadius: "6px",
+    border: "none",
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    fontWeight: 500,
+    cursor: "pointer"
+  },
+  secondaryButton: {
+    padding: "10px 16px",
+    borderRadius: "6px",
+    border: "1px solid #d1d5db",
+    backgroundColor: "#fff",
+    fontWeight: 500,
+    cursor: "pointer"
+  },
+  selectionPanel: {
+    flex: 1,
+    padding: "16px",
+    display: "flex",
+    flexDirection: "column"
+  },
+  selectionHeader: {
+    display: "flex",
+    gap: "12px",
+    marginBottom: "12px"
+  },
+  searchInput: {
+    flex: 1,
+    padding: "8px 12px",
+    borderRadius: "6px",
+    border: "1px solid #d1d5db",
+    fontSize: "13px"
+  },
+  categorySelect: {
+    padding: "8px 12px",
+    borderRadius: "6px",
+    border: "1px solid #d1d5db",
+    fontSize: "13px",
+    backgroundColor: "#fff"
+  },
+  selectionActions: {
+    display: "flex",
+    gap: "8px",
+    marginBottom: "12px"
+  },
+  smallButton: {
+    padding: "6px 12px",
+    borderRadius: "4px",
+    border: "1px solid #d1d5db",
+    backgroundColor: "#fff",
+    fontSize: "12px",
+    cursor: "pointer"
+  },
+  iconGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+    gap: "8px",
+    overflowY: "auto",
+    flex: 1
+  },
+  iconItem: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "6px",
+    padding: "12px 8px",
+    borderRadius: "6px",
+    border: "2px solid",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    position: "relative"
+  },
+  iconName: {
+    fontSize: "11px",
+    color: "#6b7280",
+    textAlign: "center",
+    wordBreak: "break-word"
+  },
+  checkmark: {
+    position: "absolute",
+    top: "4px",
+    right: "4px",
+    width: "18px",
+    height: "18px",
+    borderRadius: "50%",
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    fontSize: "11px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  previewPanel: {
+    width: "350px",
+    padding: "16px",
+    borderLeft: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb",
+    overflowY: "auto"
+  },
+  filePreview: {
+    marginBottom: "16px"
+  },
+  fileName: {
+    fontSize: "12px",
+    fontWeight: 600,
+    color: "#374151",
+    marginBottom: "6px",
+    fontFamily: "monospace"
+  },
+  codePreview: {
+    padding: "12px",
+    borderRadius: "6px",
+    backgroundColor: "#1e1e1e",
+    color: "#d4d4d4",
+    fontSize: "11px",
+    overflow: "auto",
+    maxHeight: "200px",
+    fontFamily: "monospace",
+    whiteSpace: "pre-wrap",
+    margin: 0
+  }
 };
-
 exports.NiceIconSetCreator = NiceIconSetCreator;
 exports.useIconSetCreator = useIconSetCreator;