@nice2dev/game-engine 1.1.7 → 1.1.9

package/dist/esm/unity-integration/components/UnityAssetStoreBrowser.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { NiceIcon } from '@nice2dev/ui';
 import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useState, useContext } from 'react';
 
 const DEFAULT_THEME = {
@@ -104,21 +105,21 @@ function formatFileSize(bytes) {
 function getCategoryIcon(category) {
     switch (category) {
         case '3d':
-            return '🎲';
+            return 'box';
         case '2d':
-            return '🖼️';
+            return 'image';
         case 'tools':
-            return '🔧';
+            return 'settings';
         case 'vfx':
-            return '✨';
+            return 'star';
         case 'audio':
-            return '🔊';
+            return 'volume';
         case 'templates':
-            return '📋';
+            return 'clipboard';
         case 'add-ons':
-            return '🧩';
+            return 'puzzle';
         default:
-            return '📦';
+            return 'box';
     }
 }
 /* ── Search Header ────────────────────────────────────────────── */
@@ -143,7 +144,7 @@ const SearchHeader = () => {
             padding: '16px 24px',
             backgroundColor: theme.headerBackground,
             borderBottom: `1px solid ${theme.border}`,
-        }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }, children: [jsx("div", { style: { fontSize: 24 }, children: "\uD83C\uDFEA" }), jsx("h1", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: theme.textPrimary }, children: "Unity Asset Store" }), jsx("div", { style: { flex: 1 } }), jsxs("button", { style: {
+        }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }, children: [jsx(NiceIcon, { name: "building", size: 24 }), jsx("h1", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: theme.textPrimary }, children: "Unity Asset Store" }), jsx("div", { style: { flex: 1 } }), jsxs("button", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 6,
@@ -153,14 +154,14 @@ const SearchHeader = () => {
                             borderRadius: 6,
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: ["\uD83D\uDED2 Cart (", state.cart.size, ")"] }), jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_MY_ASSETS' }), style: {
+                        }, children: [jsx(NiceIcon, { name: "box", size: 14 }), " Cart (", state.cart.size, ")"] }), jsxs("button", { onClick: () => dispatch({ type: 'TOGGLE_MY_ASSETS' }), style: {
                             padding: '8px 12px',
                             backgroundColor: state.myAssets ? theme.accent : 'rgba(0,0,0,0.2)',
                             border: 'none',
                             borderRadius: 6,
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDCDA My Assets" })] }), jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxs("div", { style: { flex: 1, position: 'relative' }, children: [jsx("input", { type: "text", placeholder: "Search assets...", value: localQuery, onChange: (e) => setLocalQuery(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleSearch(), style: {
+                        }, children: [jsx(NiceIcon, { name: "book", size: 14 }), " My Assets"] })] }), jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxs("div", { style: { flex: 1, position: 'relative' }, children: [jsx("input", { type: "text", placeholder: "Search assets...", value: localQuery, onChange: (e) => setLocalQuery(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleSearch(), style: {
                                     width: '100%',
                                     padding: '10px 16px',
                                     paddingRight: 50,
@@ -181,7 +182,7 @@ const SearchHeader = () => {
                                     borderRadius: 6,
                                     color: '#fff',
                                     cursor: 'pointer',
-                                }, children: "\uD83D\uDD0D" })] }), jsx("select", { value: state.query.category, onChange: (e) => {
+                                }, children: jsx(NiceIcon, { name: "search", size: 14 }) })] }), jsx("select", { value: state.query.category, onChange: (e) => {
                             dispatch({
                                 type: 'SET_QUERY',
                                 query: { category: e.target.value, page: 1 },
@@ -228,7 +229,7 @@ const RatingStars = ({ rating, count }) => {
     return (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [[1, 2, 3, 4, 5].map((star) => (jsx("span", { style: {
                     fontSize: 12,
                     color: star <= Math.round(rating) ? theme.star : theme.textSecondary,
-                }, children: "\u2605" }, star))), count !== undefined && (jsxs("span", { style: { fontSize: 11, color: theme.textSecondary, marginLeft: 4 }, children: ["(", count, ")"] }))] }));
+                }, children: jsx(NiceIcon, { name: "star", size: 12 }) }, star))), count !== undefined && (jsxs("span", { style: { fontSize: 11, color: theme.textSecondary, marginLeft: 4 }, children: ["(", count, ")"] }))] }));
 };
 /* ── Asset Card ───────────────────────────────────────────────── */
 const AssetCard = ({ asset }) => {
@@ -290,7 +291,7 @@ const AssetCard = ({ asset }) => {
                             alignItems: 'center',
                             justifyContent: 'center',
                             fontSize: 14,
-                        }, children: getCategoryIcon(asset.category) })] }), jsxs("div", { style: { padding: 12 }, children: [jsx("h3", { style: {
+                        }, children: jsx(NiceIcon, { name: getCategoryIcon(asset.category), size: 32 }) })] }), jsxs("div", { style: { padding: 12 }, children: [jsx("h3", { style: {
                             margin: 0,
                             fontSize: 13,
                             fontWeight: 600,
@@ -331,7 +332,7 @@ const AssetCard = ({ asset }) => {
                                     borderRadius: 6,
                                     color: '#fff',
                                     cursor: isDownloading ? 'not-allowed' : 'pointer',
-                                }, children: isDownloading ? `${downloadProgress}%` : '📥 Download' })) : (jsx("button", { onClick: (e) => {
+                                }, children: isDownloading ? `${downloadProgress}%` : 'Download' })) : (jsx("button", { onClick: (e) => {
                                     e.stopPropagation();
                                     if (isInCart) {
                                         dispatch({ type: 'REMOVE_FROM_CART', id: asset.id });
@@ -349,7 +350,7 @@ const AssetCard = ({ asset }) => {
                                     borderRadius: 6,
                                     color: '#fff',
                                     cursor: 'pointer',
-                                }, children: isInCart ? '✓ In Cart' : '🛒 Add to Cart' })), jsx("button", { onClick: (e) => {
+                                }, children: isInCart ? 'In Cart' : 'Add to Cart' })), jsx("button", { onClick: (e) => {
                                     e.stopPropagation();
                                     openInBrowser(asset);
                                 }, style: {
@@ -360,7 +361,7 @@ const AssetCard = ({ asset }) => {
                                     borderRadius: 6,
                                     color: theme.textSecondary,
                                     cursor: 'pointer',
-                                }, children: "\uD83D\uDD17" })] })] })] }));
+                                }, children: jsx(NiceIcon, { name: "link", size: 14 }) })] })] })] }));
 };
 /* ── Asset Grid ───────────────────────────────────────────────── */
 const AssetGrid = () => {
@@ -372,7 +373,7 @@ const AssetGrid = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
                 color: theme.textSecondary,
-            }, children: "\u23F3 Loading assets..." }));
+            }, children: "Loading assets..." }));
     }
     if (state.error) {
         return (jsxs("div", { style: {
@@ -381,7 +382,7 @@ const AssetGrid = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
                 color: theme.danger,
-            }, children: ["\u274C ", state.error] }));
+            }, children: [jsx(NiceIcon, { name: "error", size: 14 }), " ", state.error] }));
     }
     if (state.results.length === 0) {
         return (jsxs("div", { style: {
@@ -391,7 +392,7 @@ const AssetGrid = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
                 color: theme.textSecondary,
-            }, children: [jsx("div", { style: { fontSize: 48, marginBottom: 16 }, children: "\uD83D\uDCED" }), jsx("div", { children: "No assets found" })] }));
+            }, children: [jsx("div", { style: { marginBottom: 16 }, children: jsx(NiceIcon, { name: "archive", size: 48 }) }), jsx("div", { children: "No assets found" })] }));
     }
     return (jsx("div", { style: {
             display: 'grid',
@@ -474,7 +475,7 @@ const AssetDetailModal = () => {
                                                 borderRadius: 8,
                                                 color: '#fff',
                                                 cursor: isDownloading ? 'not-allowed' : 'pointer',
-                                            }, children: isDownloading ? `Downloading ${downloadProgress}%` : '📥 Download & Import' })) : (jsx("button", { onClick: () => isInCart
+                                            }, children: isDownloading ? `Downloading ${downloadProgress}%` : 'Download & Import' })) : (jsx("button", { onClick: () => isInCart
                                                 ? dispatch({ type: 'REMOVE_FROM_CART', id: asset.id })
                                                 : dispatch({ type: 'ADD_TO_CART', id: asset.id }), style: {
                                                 width: '100%',
@@ -486,7 +487,7 @@ const AssetDetailModal = () => {
                                                 borderRadius: 8,
                                                 color: '#fff',
                                                 cursor: 'pointer',
-                                            }, children: isInCart ? '✓ Remove from Cart' : '🛒 Add to Cart' })), jsx("button", { onClick: () => openInBrowser(asset), style: {
+                                            }, children: isInCart ? 'Remove from Cart' : 'Add to Cart' })), jsxs("button", { onClick: () => openInBrowser(asset), style: {
                                                 width: '100%',
                                                 marginTop: 8,
                                                 padding: '10px 24px',
@@ -496,7 +497,7 @@ const AssetDetailModal = () => {
                                                 borderRadius: 8,
                                                 color: theme.textSecondary,
                                                 cursor: 'pointer',
-                                            }, children: "\uD83D\uDD17 View on Asset Store" })] })] }), jsx("button", { onClick: () => dispatch({ type: 'SELECT_ASSET', asset: null }), style: {
+                                            }, children: [jsx(NiceIcon, { name: "external-link", size: 14 }), " View on Asset Store"] })] })] }), jsx("button", { onClick: () => dispatch({ type: 'SELECT_ASSET', asset: null }), style: {
                                 position: 'absolute',
                                 top: 16,
                                 right: 16,
@@ -506,7 +507,7 @@ const AssetDetailModal = () => {
                                 border: 'none',
                                 color: theme.textSecondary,
                                 cursor: 'pointer',
-                            }, children: "\u2715" })] }), jsx("div", { style: { display: 'flex', borderBottom: `1px solid ${theme.border}` }, children: ['overview', 'images', 'reviews'].map((tab) => (jsx("button", { onClick: () => setActiveTab(tab), style: {
+                            }, children: jsx(NiceIcon, { name: "close", size: 14 }) })] }), jsx("div", { style: { display: 'flex', borderBottom: `1px solid ${theme.border}` }, children: ['overview', 'images', 'reviews'].map((tab) => (jsx("button", { onClick: () => setActiveTab(tab), style: {
                             flex: 1,
                             padding: '12px 16px',
                             fontSize: 13,

package/dist/esm/unity-integration/components/UnityProjectBrowser.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { NiceIcon } from '@nice2dev/ui';
 import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useContext } from 'react';
 
 const DEFAULT_THEME = {
@@ -102,23 +103,23 @@ function useBrowser() {
 function getAssetIcon(type) {
     switch (type) {
         case 'scene':
-            return '🎬';
+            return 'video';
         case 'prefab':
-            return '📦';
+            return 'box';
         case 'material':
-            return '🎨';
+            return 'palette';
         case 'texture':
-            return '🖼️';
+            return 'image';
         case 'mesh':
-            return '🔷';
+            return 'hexagon';
         case 'animation':
-            return '🏃';
+            return 'play';
         case 'script':
-            return '📜';
+            return 'code';
         case 'audio':
-            return '🔊';
+            return 'volume';
         default:
-            return '📄';
+            return 'file';
     }
 }
 function formatFileSize(bytes) {
@@ -149,7 +150,7 @@ const BrowserHeader = ({ projectPath }) => {
                     alignItems: 'center',
                     justifyContent: 'center',
                     fontSize: 20,
-                }, children: "\uD83C\uDFAE" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["Unity ", state.projectInfo.unityVersion, " \u2022", ' ', state.projectInfo.renderPipeline.toUpperCase()] })) : ((projectPath ?? 'Select a Unity project folder')) })] }), jsxs("div", { style: {
+                }, children: jsx(NiceIcon, { name: "gamepad", size: 18 }) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["Unity ", state.projectInfo.unityVersion, " \u2022", ' ', state.projectInfo.renderPipeline.toUpperCase()] })) : ((projectPath ?? 'Select a Unity project folder')) })] }), jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 8,
@@ -216,21 +217,21 @@ const BrowserToolbar = () => {
                     backgroundColor: 'rgba(0,0,0,0.2)',
                     borderRadius: 6,
                     overflow: 'hidden',
-                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tree' }), style: {
+                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tree' }), "aria-label": "Tree view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'tree' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDCD1" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'grid' }), style: {
+                        }, children: jsx(NiceIcon, { name: "list", size: 14 }) }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'grid' }), "aria-label": "Grid view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'grid' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDD32" })] }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedAssets.size, " selected"] }), jsx("button", { onClick: importSelectedAssets, disabled: state.selectedAssets.size === 0 || state.importProgress !== null, style: {
+                        }, children: jsx(NiceIcon, { name: "grid", size: 14 }) })] }), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedAssets.size, " selected"] }), jsxs("button", { onClick: importSelectedAssets, disabled: state.selectedAssets.size === 0 || state.importProgress !== null, style: {
                     padding: '8px 16px',
                     fontSize: 12,
                     fontWeight: 500,
@@ -242,16 +243,16 @@ const BrowserToolbar = () => {
                     color: '#fff',
                     cursor: state.selectedAssets.size > 0 && !state.importProgress ? 'pointer' : 'not-allowed',
                     opacity: state.selectedAssets.size > 0 && !state.importProgress ? 1 : 0.5,
-                }, children: state.importProgress ? '⏳ Importing...' : '📥 Import Selected' })] }));
+                }, children: [jsx(NiceIcon, { name: state.importProgress ? 'clock' : 'download', size: 14 }), ' ', state.importProgress ? 'Importing...' : 'Import Selected'] })] }));
 };
 /* ── Tab Bar Component ────────────────────────────────────────── */
 const TabBar = () => {
     const { state, dispatch, theme } = useBrowser();
     const tabs = [
-        { id: 'assets', label: 'Assets', icon: '📁' },
-        { id: 'scenes', label: 'Scenes', icon: '🎬' },
-        { id: 'packages', label: 'Packages', icon: '📦' },
-        { id: 'settings', label: 'Settings', icon: '⚙️' },
+        { id: 'assets', label: 'Assets', icon: 'folder' },
+        { id: 'scenes', label: 'Scenes', icon: 'video' },
+        { id: 'packages', label: 'Packages', icon: 'box' },
+        { id: 'settings', label: 'Settings', icon: 'settings' },
     ];
     return (jsx("div", { style: {
             display: 'flex',
@@ -267,7 +268,7 @@ const TabBar = () => {
                 borderBottom: state.tab === tab.id ? `2px solid ${theme.accent}` : '2px solid transparent',
                 color: state.tab === tab.id ? theme.textPrimary : theme.textSecondary,
                 cursor: 'pointer',
-            }, children: [tab.icon, " ", tab.label] }, tab.id))) }));
+            }, children: [jsx(NiceIcon, { name: tab.icon, size: 14 }), " ", tab.label] }, tab.id))) }));
 };
 /* ── Asset Tree View ──────────────────────────────────────────── */
 const AssetTreeItem = ({ asset, indent }) => {
@@ -281,7 +282,7 @@ const AssetTreeItem = ({ asset, indent }) => {
             paddingLeft: indent * 16 + 8,
             backgroundColor: isSelected ? theme.itemSelected : 'transparent',
             cursor: 'pointer',
-        }, children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx("span", { style: { fontSize: 14 }, children: getAssetIcon(asset.type) }), jsx("span", { style: {
+        }, children: [jsx("input", { type: "checkbox", checked: isSelected, onChange: () => dispatch({ type: 'SELECT_ASSET', id: asset.id, additive: true }), onClick: (e) => e.stopPropagation() }), jsx(NiceIcon, { name: getAssetIcon(asset.type), size: 14 }), jsx("span", { style: {
                     flex: 1,
                     fontSize: 12,
                     color: isSelected ? theme.textPrimary : theme.textSecondary,
@@ -318,7 +319,7 @@ const FolderTreeItem = ({ folder, indent }) => {
                     padding: '4px 8px',
                     paddingLeft: indent * 16 + 8,
                     cursor: 'pointer',
-                }, children: [jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: isExpanded ? '▼' : '▶' }), jsx("span", { style: { fontSize: 14, color: theme.folderColor }, children: "\uD83D\uDCC1" }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, fontWeight: 500 }, children: folder.name }), jsxs("span", { style: { fontSize: 10, color: theme.textSecondary }, children: ["(", filteredChildren.length, ")"] })] }), isExpanded &&
+                }, children: [jsx(NiceIcon, { name: isExpanded ? 'chevron-down' : 'chevron-right', size: 10, color: theme.textSecondary }), jsx(NiceIcon, { name: "folder", size: 14, color: theme.folderColor }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, fontWeight: 500 }, children: folder.name }), jsxs("span", { style: { fontSize: 10, color: theme.textSecondary }, children: ["(", filteredChildren.length, ")"] })] }), isExpanded &&
                 filteredChildren.map((child, _i) => 'children' in child ? (jsx(FolderTreeItem, { folder: child, indent: indent + 1 }, child.path)) : (jsx(AssetTreeItem, { asset: child, indent: indent + 1 }, child.id)))] }));
 };
 /* ── Asset Grid View ──────────────────────────────────────────── */
@@ -364,7 +365,7 @@ const AssetGridView = () => {
                             justifyContent: 'center',
                             fontSize: 24,
                             marginBottom: 8,
-                        }, children: asset.thumbnail ? (jsx("img", { src: asset.thumbnail, alt: asset.name, style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 } })) : (getAssetIcon(asset.type)) }), jsx("span", { style: {
+                        }, children: asset.thumbnail ? (jsx("img", { src: asset.thumbnail, alt: asset.name, style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 } })) : (jsx(NiceIcon, { name: getAssetIcon(asset.type), size: 32 })) }), jsx("span", { style: {
                             fontSize: 11,
                             color: theme.textPrimary,
                             textAlign: 'center',
@@ -414,7 +415,7 @@ const PackagesPanel = () => {
                     marginBottom: 4,
                     backgroundColor: theme.itemBackground,
                     borderRadius: 6,
-                }, children: [jsx("span", { style: { fontSize: 14 }, children: "\uD83D\uDCE6" }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, flex: 1 }, children: pkg.name }), jsx("span", { style: {
+                }, children: [jsx(NiceIcon, { name: "box", size: 14 }), jsx("span", { style: { fontSize: 12, color: theme.textPrimary, flex: 1 }, children: pkg.name }), jsx("span", { style: {
                             padding: '2px 8px',
                             fontSize: 10,
                             backgroundColor: getSourceBadge(pkg.source),
@@ -467,14 +468,14 @@ const PreviewPanel = () => {
                         gap: 12,
                         padding: 16,
                         borderBottom: `1px solid ${theme.border}`,
-                    }, children: [jsx("span", { style: { fontSize: 24 }, children: getAssetIcon(asset.type) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 16, fontWeight: 600, color: theme.textPrimary }, children: asset.name }), jsx("div", { style: { fontSize: 12, color: theme.textSecondary }, children: asset.path })] }), jsx("button", { onClick: () => dispatch({ type: 'SET_PREVIEW', asset: null }), style: {
+                    }, children: [jsx(NiceIcon, { name: getAssetIcon(asset.type), size: 24 }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 16, fontWeight: 600, color: theme.textPrimary }, children: asset.name }), jsx("div", { style: { fontSize: 12, color: theme.textSecondary }, children: asset.path })] }), jsx("button", { onClick: () => dispatch({ type: 'SET_PREVIEW', asset: null }), style: {
                                 padding: '4px 8px',
                                 fontSize: 14,
                                 backgroundColor: 'transparent',
                                 border: 'none',
                                 color: theme.textSecondary,
                                 cursor: 'pointer',
-                            }, children: "\u2715" })] }), jsxs("div", { style: { padding: 16 }, children: [jsx("div", { style: {
+                            }, children: jsx(NiceIcon, { name: "close", size: 14 }) })] }), jsxs("div", { style: { padding: 16 }, children: [jsx("div", { style: {
                                 width: '100%',
                                 height: 300,
                                 backgroundColor: 'rgba(0,0,0,0.3)',
@@ -484,7 +485,7 @@ const PreviewPanel = () => {
                                 justifyContent: 'center',
                                 fontSize: 48,
                                 marginBottom: 16,
-                            }, children: asset.thumbnail ? (jsx("img", { src: asset.thumbnail, alt: asset.name, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' } })) : (getAssetIcon(asset.type)) }), jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }, children: [jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Type" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: asset.type })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Size" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: formatFileSize(asset.size) })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "GUID" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontFamily: 'monospace' }, children: asset.guid })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Last Modified" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: asset.lastModified })] })] }), asset.dependencies && asset.dependencies.length > 0 && (jsxs("div", { style: { marginTop: 16 }, children: [jsxs("div", { style: { fontSize: 12, fontWeight: 500, color: theme.textPrimary, marginBottom: 8 }, children: ["Dependencies (", asset.dependencies.length, ")"] }), jsx("div", { style: { maxHeight: 100, overflow: 'auto' }, children: asset.dependencies.map((dep, i) => (jsx("div", { style: {
+                            }, children: asset.thumbnail ? (jsx("img", { src: asset.thumbnail, alt: asset.name, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' } })) : (jsx(NiceIcon, { name: getAssetIcon(asset.type), size: 32 })) }), jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }, children: [jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Type" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: asset.type })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Size" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: formatFileSize(asset.size) })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "GUID" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontFamily: 'monospace' }, children: asset.guid })] }), jsxs("div", { children: [jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: "Last Modified" }), jsx("div", { style: { fontSize: 13, color: theme.textPrimary }, children: asset.lastModified })] })] }), asset.dependencies && asset.dependencies.length > 0 && (jsxs("div", { style: { marginTop: 16 }, children: [jsxs("div", { style: { fontSize: 12, fontWeight: 500, color: theme.textPrimary, marginBottom: 8 }, children: ["Dependencies (", asset.dependencies.length, ")"] }), jsx("div", { style: { maxHeight: 100, overflow: 'auto' }, children: asset.dependencies.map((dep, i) => (jsx("div", { style: {
                                             padding: '4px 8px',
                                             fontSize: 11,
                                             color: theme.textSecondary,
@@ -534,7 +535,7 @@ const ImportProgressOverlay = () => {
                 backgroundColor: theme.panelBackground,
                 borderRadius: 12,
                 padding: 24,
-            }, children: [jsx("h3", { style: { margin: '0 0 16px', fontSize: 16, fontWeight: 600, color: theme.textPrimary }, children: progress.phase === 'complete' ? '✅ Import Complete' : '📥 Importing Assets' }), jsx("div", { style: { fontSize: 12, color: theme.textSecondary, marginBottom: 8 }, children: progress.message }), progress.currentAsset && (jsx("div", { style: {
+            }, children: [jsxs("h3", { style: { margin: '0 0 16px', fontSize: 16, fontWeight: 600, color: theme.textPrimary }, children: [jsx(NiceIcon, { name: progress.phase === 'complete' ? 'success' : 'download', size: 16 }), ' ', progress.phase === 'complete' ? 'Import Complete' : 'Importing Assets'] }), jsx("div", { style: { fontSize: 12, color: theme.textSecondary, marginBottom: 8 }, children: progress.message }), progress.currentAsset && (jsx("div", { style: {
                         fontSize: 11,
                         color: theme.textPrimary,
                         backgroundColor: 'rgba(0,0,0,0.2)',

package/dist/esm/unreal-integration/components/UnrealProjectBrowser.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { NiceIcon } from '@nice2dev/ui';
 import { createContext, forwardRef, useReducer, useMemo, useCallback, useImperativeHandle, useContext } from 'react';
 
 const DEFAULT_THEME = {
@@ -110,29 +111,29 @@ function useBrowser() {
 function getAssetIcon(type) {
     switch (type) {
         case 'blueprint':
-            return '🔵';
+            return 'code';
         case 'level':
-            return '🗺️';
+            return 'map-pin';
         case 'material':
-            return '🎨';
+            return 'palette';
         case 'texture':
-            return '🖼️';
+            return 'image';
         case 'mesh':
-            return '🔷';
+            return 'hexagon';
         case 'skeletal_mesh':
-            return '🦴';
+            return 'user';
         case 'animation':
-            return '🏃';
+            return 'play';
         case 'sound':
-            return '🔊';
+            return 'volume';
         case 'particle':
-            return '✨';
+            return 'star';
         case 'widget':
-            return '📱';
+            return 'monitor';
         case 'data_asset':
-            return '📊';
+            return 'table';
         default:
-            return '📄';
+            return 'file';
     }
 }
 function formatFileSize(bytes) {
@@ -183,7 +184,7 @@ const BrowserHeader = () => {
                     justifyContent: 'center',
                     fontSize: 18,
                     border: '1px solid rgba(255,255,255,0.1)',
-                }, children: "\uD83C\uDFAE" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["UE ", state.projectInfo.engineVersion, " \u2022 ", state.projectInfo.targetPlatforms.join(', ')] })) : ('Select a .uproject file') })] }), state.liveLinkStatus.connected && state.liveLinkStatus.hotReloadAvailable && (jsx("button", { onClick: triggerHotReload, disabled: state.liveLinkStatus.compiling, style: {
+                }, children: jsx(NiceIcon, { name: "gamepad", size: 18 }) }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 14, fontWeight: 600, color: theme.textPrimary }, children: state.projectInfo?.name ?? 'No Project Loaded' }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: state.projectInfo ? (jsxs(Fragment, { children: ["UE ", state.projectInfo.engineVersion, " \u2022 ", state.projectInfo.targetPlatforms.join(', ')] })) : ('Select a .uproject file') })] }), state.liveLinkStatus.connected && state.liveLinkStatus.hotReloadAvailable && (jsxs("button", { onClick: triggerHotReload, disabled: state.liveLinkStatus.compiling, style: {
                     padding: '6px 12px',
                     fontSize: 11,
                     backgroundColor: state.liveLinkStatus.compiling ? theme.warning : theme.cppOrange,
@@ -191,7 +192,7 @@ const BrowserHeader = () => {
                     borderRadius: 4,
                     color: '#fff',
                     cursor: state.liveLinkStatus.compiling ? 'not-allowed' : 'pointer',
-                }, children: state.liveLinkStatus.compiling ? '⏳ Compiling...' : '🔥 Hot Reload' })), jsxs("div", { style: {
+                }, children: [jsx(NiceIcon, { name: state.liveLinkStatus.compiling ? 'clock' : 'zap', size: 14 }), ' ', state.liveLinkStatus.compiling ? 'Compiling...' : 'Hot Reload'] })), jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 8,
@@ -270,35 +271,35 @@ const BrowserToolbar = () => {
                     backgroundColor: 'rgba(0,0,0,0.2)',
                     borderRadius: 4,
                     overflow: 'hidden',
-                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tiles' }), style: {
+                }, children: [jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'tiles' }), "aria-label": "Tile view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'tiles' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDD32" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'list' }), style: {
+                        }, children: jsx(NiceIcon, { name: "grid", size: 14 }) }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'list' }), "aria-label": "List view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'list' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDCCB" }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'columns' }), style: {
+                        }, children: jsx(NiceIcon, { name: "list", size: 14 }) }), jsx("button", { onClick: () => dispatch({ type: 'SET_VIEW_MODE', mode: 'columns' }), "aria-label": "Column view", style: {
                             padding: '6px 10px',
                             fontSize: 12,
                             backgroundColor: state.viewMode === 'columns' ? theme.accent : 'transparent',
                             border: 'none',
                             color: '#fff',
                             cursor: 'pointer',
-                        }, children: "\uD83D\uDCD1" })] }), state.viewMode === 'tiles' && (jsxs("select", { value: state.tileSize, onChange: (e) => dispatch({ type: 'SET_TILE_SIZE', size: e.target.value }), style: {
+                        }, children: jsx(NiceIcon, { name: "columns", size: 14 }) })] }), state.viewMode === 'tiles' && (jsxs("select", { value: state.tileSize, onChange: (e) => dispatch({ type: 'SET_TILE_SIZE', size: e.target.value }), style: {
                     padding: '6px 10px',
                     fontSize: 12,
                     backgroundColor: 'rgba(0,0,0,0.3)',
                     border: `1px solid ${theme.border}`,
                     borderRadius: 4,
                     color: theme.textPrimary,
-                }, children: [jsx("option", { value: "small", children: "Small" }), jsx("option", { value: "medium", children: "Medium" }), jsx("option", { value: "large", children: "Large" })] })), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedAssets.size, " selected"] }), jsx("button", { onClick: importSelectedAssets, disabled: state.selectedAssets.size === 0 || state.importing, style: {
+                }, children: [jsx("option", { value: "small", children: "Small" }), jsx("option", { value: "medium", children: "Medium" }), jsx("option", { value: "large", children: "Large" })] })), jsx("div", { style: { flex: 1 } }), jsxs("span", { style: { fontSize: 11, color: theme.textSecondary }, children: [state.selectedAssets.size, " selected"] }), jsxs("button", { onClick: importSelectedAssets, disabled: state.selectedAssets.size === 0 || state.importing, style: {
                     padding: '8px 16px',
                     fontSize: 12,
                     fontWeight: 500,
@@ -308,17 +309,17 @@ const BrowserToolbar = () => {
                     color: '#fff',
                     cursor: state.selectedAssets.size > 0 && !state.importing ? 'pointer' : 'not-allowed',
                     opacity: state.selectedAssets.size > 0 && !state.importing ? 1 : 0.5,
-                }, children: state.importing ? `⏳ ${state.importProgress}%` : '📥 Import Selected' })] }));
+                }, children: [jsx(NiceIcon, { name: state.importing ? 'clock' : 'download', size: 14 }), ' ', state.importing ? `${state.importProgress}%` : 'Import Selected'] })] }));
 };
 /* ── Tab Bar ─────────────────────────────────────────────────── */
 const TabBar = () => {
     const { state, dispatch, theme } = useBrowser();
     const tabs = [
-        { id: 'content', label: 'Content', icon: '📁' },
-        { id: 'levels', label: 'Levels', icon: '🗺️' },
-        { id: 'plugins', label: 'Plugins', icon: '🔌' },
-        { id: 'modules', label: 'Modules', icon: '📦' },
-        { id: 'settings', label: 'Settings', icon: '⚙️' },
+        { id: 'content', label: 'Content', icon: 'folder' },
+        { id: 'levels', label: 'Levels', icon: 'map-pin' },
+        { id: 'plugins', label: 'Plugins', icon: 'plug' },
+        { id: 'modules', label: 'Modules', icon: 'box' },
+        { id: 'settings', label: 'Settings', icon: 'settings' },
     ];
     return (jsx("div", { style: {
             display: 'flex',
@@ -333,7 +334,7 @@ const TabBar = () => {
                 borderBottom: state.tab === tab.id ? `2px solid ${theme.accent}` : '2px solid transparent',
                 color: state.tab === tab.id ? theme.textPrimary : theme.textSecondary,
                 cursor: 'pointer',
-            }, children: [tab.icon, " ", tab.label] }, tab.id))) }));
+            }, children: [jsx(NiceIcon, { name: tab.icon, size: 14 }), " ", tab.label] }, tab.id))) }));
 };
 /* ── Asset Tile ───────────────────────────────────────────────── */
 const AssetTile = ({ asset, size, }) => {
@@ -369,7 +370,7 @@ const AssetTile = ({ asset, size, }) => {
                             backgroundSize: 'cover',
                             backgroundPosition: 'center',
                             borderRadius: 4,
-                        } })) : (getAssetIcon(asset.type)), jsx("div", { style: {
+                        } })) : (jsx(NiceIcon, { name: getAssetIcon(asset.type), size: 32 })), jsx("div", { style: {
                             position: 'absolute',
                             bottom: 4,
                             right: 4,
@@ -432,7 +433,7 @@ const AssetListItem = ({ asset, isSelected, }) => {
                     height: 6,
                     borderRadius: 2,
                     backgroundColor: getAssetColor(asset.type, theme),
-                } }), jsx("span", { style: { fontSize: 14 }, children: getAssetIcon(asset.type) }), jsx("span", { style: { flex: 1, fontSize: 12, color: theme.textPrimary }, children: asset.name }), jsx("span", { style: { fontSize: 11, color: theme.textSecondary }, children: asset.className }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: formatFileSize(asset.size) })] }));
+                } }), jsx(NiceIcon, { name: getAssetIcon(asset.type), size: 14 }), jsx("span", { style: { flex: 1, fontSize: 12, color: theme.textPrimary }, children: asset.name }), jsx("span", { style: { fontSize: 11, color: theme.textSecondary }, children: asset.className }), jsx("span", { style: { fontSize: 10, color: theme.textSecondary }, children: formatFileSize(asset.size) })] }));
 };
 /* ── Levels Panel ─────────────────────────────────────────────── */
 const LevelsPanel = () => {
@@ -448,7 +449,7 @@ const LevelsPanel = () => {
                     marginBottom: 4,
                     backgroundColor: theme.itemBackground,
                     borderRadius: 4,
-                }, children: [jsx("span", { style: { fontSize: 20 }, children: "\uD83D\uDDFA\uFE0F" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: map.name }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: map.path })] }), map.persistent && (jsx("span", { style: {
+                }, children: [jsx(NiceIcon, { name: "map-pin", size: 20 }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: { fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: map.name }), jsx("div", { style: { fontSize: 11, color: theme.textSecondary }, children: map.path })] }), map.persistent && (jsx("span", { style: {
                             padding: '2px 8px',
                             fontSize: 10,
                             backgroundColor: theme.accent,
@@ -527,7 +528,7 @@ const ModulesPanel = () => {
                     marginBottom: 4,
                     backgroundColor: theme.itemBackground,
                     borderRadius: 4,
-                }, children: [jsx("span", { style: { fontSize: 14 }, children: "\uD83D\uDCE6" }), jsx("span", { style: { flex: 1, fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: module.name }), jsx("span", { style: {
+                }, children: [jsx(NiceIcon, { name: "box", size: 14 }), jsx("span", { style: { flex: 1, fontSize: 13, color: theme.textPrimary, fontWeight: 500 }, children: module.name }), jsx("span", { style: {
                             padding: '2px 8px',
                             fontSize: 10,
                             backgroundColor: getModuleTypeColor(module.type),

package/dist/types/editor/AssetBrowser.d.ts

@@ -208,6 +208,7 @@ export declare class AssetBrowser {
     setOnAssetOpen(callback: (asset: BrowserAsset) => void): void;
     openAsset(assetId: string): void;
     formatFileSize(bytes: number): string;
+    /** NiceIcon name for an asset type. */
     getAssetTypeIcon(type: BrowserAssetType): string;
 }
 export declare function createAssetBrowser(config?: Partial<AssetBrowserConfig>): AssetBrowser;

package/dist/types/editor/behavior-tree/BTEditorNode.d.ts

@@ -33,7 +33,8 @@ export declare class DefaultBTNodeRenderer implements BTEditorNodeRenderer {
     private drawBadge;
     private roundRect;
     private truncateText;
-    private getCategoryIcon;
+    /** Small category marker drawn as a shape (no glyph fonts on the canvas). */
+    private drawCategoryMarker;
 }
 export interface BTConnectionRenderer {
     /** Render connection */

package/dist/types/editor/behavior-tree/BTEditorToolbar.d.ts

@@ -71,4 +71,5 @@ export declare class BTEditorToolbar {
     private notifyListeners;
 }
 export declare function createBTEditorToolbar(editor: BehaviorTreeEditor): BTEditorToolbar;
+/** Toolbar icon id -> NiceIcon builtin name (render with `<NiceIcon name={…} />`). */
 export declare const TOOLBAR_ICONS: Record<string, string>;

package/dist/types/kids/KidMode.d.ts

@@ -9,7 +9,7 @@ export type BlockCategory = 'motion' | 'looks' | 'events' | 'control' | 'sensing
 export interface VisualBlock {
     id: string;
     category: BlockCategory;
-    /** Emoji icon for the block */
+    /** NiceIcon name for the block (field keeps its historical name). */
     emoji: string;
     /** Block label per locale */
     label: Partial<Record<Locale, string>>;
@@ -44,7 +44,7 @@ export interface KidSprite {
     name: Partial<Record<Locale, string>>;
     /** Category for browsing */
     category: 'animals' | 'people' | 'vehicles' | 'nature' | 'food' | 'fantasy' | 'space' | 'sports' | 'buildings' | 'effects';
-    /** Emoji preview */
+    /** Emoji preview of the sprite art (content, not a UI icon). */
     emoji: string;
     /** Asset URL pattern */
     assetPath: string;
@@ -58,6 +58,7 @@ export interface KidSprite {
 /** Gamification badge */
 export interface KidBadge {
     id: string;
+    /** NiceIcon name for the badge (field keeps its historical name). */
     emoji: string;
     name: Partial<Record<Locale, string>>;
     description: Partial<Record<Locale, string>>;
@@ -187,6 +188,7 @@ export declare class KidModeManager {
 }
 export interface KidDifficultySettings {
     label: Partial<Record<Locale, string>>;
+    /** NiceIcon name for the level (field keeps its historical name). */
     emoji: string;
     /** Which block categories are available */
     enabledCategories: BlockCategory[];

package/dist/types/kids/KidTools.d.ts

@@ -2,7 +2,7 @@ import { EventBus } from '../core/EventBus';
 import type { Locale } from '../i18n/I18n';
 export interface WizardChoice {
     id: string;
-    /** Emoji icon shown to the child. */
+    /** NiceIcon name shown to the child. */
     icon: string;
     /** Localized label. */
     label: Record<string, string>;