@nice2dev/ui-3d 1.1.0 → 1.1.1

package/dist/cjs/material/NiceMaterialEditor.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ke = require('react');
+var _e = require('react');
+var MaterialEditor_module = require('./MaterialEditor.module.css.js');
 var materialEditorTypes = require('./materialEditorTypes.js');
-var materialNodeDefinitions = require('./materialNodeDefinitions.js');
 var materialEditorUtils = require('./materialEditorUtils.js');
-var MaterialEditor_module = require('./MaterialEditor.module.css.js');
+var materialNodeDefinitions = require('./materialNodeDefinitions.js');
 
 /* ═══════════════════════════════════════════════════════════════════════════
    State Reducer
@@ -43,8 +43,9 @@ function materialEditorReducer(state, action) {
     switch (action.type) {
         case 'ADD_NODE': {
             const node = materialEditorUtils.createNode(action.nodeType, action.position);
-            if (!node)
+            if (!node) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
@@ -69,9 +70,10 @@ function materialEditorReducer(state, action) {
         }
         case 'UPDATE_NODE_PROPERTY': {
             const newState = pushToUndoStack(state);
-            const node = newState.graph.nodes.find(n => n.id === action.nodeId);
-            if (!node)
+            const node = newState.graph.nodes.find((n) => n.id === action.nodeId);
+            if (!node) {
                 return state;
+            }
             return {
                 ...newState,
                 graph: materialEditorUtils.updateNodeInGraph(newState.graph, action.nodeId, {
@@ -81,9 +83,10 @@ function materialEditorReducer(state, action) {
         }
         case 'UPDATE_INPUT_VALUE': {
             const newState = pushToUndoStack(state);
-            const node = newState.graph.nodes.find(n => n.id === action.nodeId);
-            if (!node)
+            const node = newState.graph.nodes.find((n) => n.id === action.nodeId);
+            if (!node) {
                 return state;
+            }
             return {
                 ...newState,
                 graph: materialEditorUtils.updateNodeInGraph(newState.graph, action.nodeId, {
@@ -92,21 +95,25 @@ function materialEditorReducer(state, action) {
             };
         }
         case 'CONNECT': {
-            const sourceNode = state.graph.nodes.find(n => n.id === action.connection.sourceNodeId);
-            const targetNode = state.graph.nodes.find(n => n.id === action.connection.targetNodeId);
-            if (!sourceNode || !targetNode)
+            const sourceNode = state.graph.nodes.find((n) => n.id === action.connection.sourceNodeId);
+            const targetNode = state.graph.nodes.find((n) => n.id === action.connection.targetNodeId);
+            if (!sourceNode || !targetNode) {
                 return state;
+            }
             const sourceDef = materialEditorUtils.getNodeDefinition(sourceNode);
             const targetDef = materialEditorUtils.getNodeDefinition(targetNode);
-            if (!sourceDef || !targetDef)
+            if (!sourceDef || !targetDef) {
                 return state;
-            const sourcePort = sourceDef.outputs.find(p => p.id === action.connection.sourcePortId);
-            const targetPort = targetDef.inputs.find(p => p.id === action.connection.targetPortId);
-            if (!sourcePort || !targetPort)
+            }
+            const sourcePort = sourceDef.outputs.find((p) => p.id === action.connection.sourcePortId);
+            const targetPort = targetDef.inputs.find((p) => p.id === action.connection.targetPortId);
+            if (!sourcePort || !targetPort) {
                 return state;
+            }
             const { valid } = materialEditorUtils.canConnect(sourceNode, sourcePort, targetNode, targetPort, state.graph.connections);
-            if (!valid)
+            if (!valid) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
             const connection = materialEditorUtils.createConnection(action.connection.sourceNodeId, action.connection.sourcePortId, action.connection.targetNodeId, action.connection.targetPortId);
             return {
@@ -119,7 +126,7 @@ function materialEditorReducer(state, action) {
             return {
                 ...newState,
                 graph: materialEditorUtils.removeConnectionFromGraph(newState.graph, action.connectionId),
-                selectedConnections: state.selectedConnections.filter(id => id !== action.connectionId),
+                selectedConnections: state.selectedConnections.filter((id) => id !== action.connectionId),
             };
         }
         case 'SELECT_NODES': {
@@ -143,8 +150,8 @@ function materialEditorReducer(state, action) {
         case 'SELECT_ALL': {
             return {
                 ...state,
-                selectedNodes: state.graph.nodes.map(n => n.id),
-                selectedConnections: state.graph.connections.map(c => c.id),
+                selectedNodes: state.graph.nodes.map((n) => n.id),
+                selectedConnections: state.graph.connections.map((c) => c.id),
             };
         }
         case 'DESELECT_ALL': {
@@ -155,19 +162,21 @@ function materialEditorReducer(state, action) {
             };
         }
         case 'COPY': {
-            const nodesToCopy = state.graph.nodes.filter(n => state.selectedNodes.includes(n.id));
-            const connectionsToCopy = state.graph.connections.filter(c => state.selectedNodes.includes(c.sourceNodeId) && state.selectedNodes.includes(c.targetNodeId));
+            const nodesToCopy = state.graph.nodes.filter((n) => state.selectedNodes.includes(n.id));
+            const connectionsToCopy = state.graph.connections.filter((c) => state.selectedNodes.includes(c.sourceNodeId) &&
+                state.selectedNodes.includes(c.targetNodeId));
             return {
                 ...state,
                 clipboard: { nodes: nodesToCopy, connections: connectionsToCopy },
             };
         }
         case 'PASTE': {
-            if (!state.clipboard)
+            if (!state.clipboard) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
             const idMap = new Map();
-            const newNodes = state.clipboard.nodes.map(node => {
+            const newNodes = state.clipboard.nodes.map((node) => {
                 const newId = materialEditorUtils.generateNodeId();
                 idMap.set(node.id, newId);
                 return {
@@ -180,7 +189,7 @@ function materialEditorReducer(state, action) {
                     selected: false,
                 };
             });
-            const newConnections = state.clipboard.connections.map(conn => ({
+            const newConnections = state.clipboard.connections.map((conn) => ({
                 ...conn,
                 id: materialEditorUtils.generateNodeId(),
                 sourceNodeId: idMap.get(conn.sourceNodeId),
@@ -193,31 +202,33 @@ function materialEditorReducer(state, action) {
                     nodes: [...newState.graph.nodes, ...newNodes],
                     connections: [...newState.graph.connections, ...newConnections],
                 },
-                selectedNodes: newNodes.map(n => n.id),
+                selectedNodes: newNodes.map((n) => n.id),
             };
         }
         case 'CUT': {
-            const nodesToCut = state.graph.nodes.filter(n => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
-            const connectionsToCut = state.graph.connections.filter(c => state.selectedNodes.includes(c.sourceNodeId) && state.selectedNodes.includes(c.targetNodeId));
+            const nodesToCut = state.graph.nodes.filter((n) => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
+            const connectionsToCut = state.graph.connections.filter((c) => state.selectedNodes.includes(c.sourceNodeId) &&
+                state.selectedNodes.includes(c.targetNodeId));
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
                 clipboard: { nodes: nodesToCut, connections: connectionsToCut },
-                graph: materialEditorUtils.removeNodesFromGraph(newState.graph, nodesToCut.map(n => n.id)),
+                graph: materialEditorUtils.removeNodesFromGraph(newState.graph, nodesToCut.map((n) => n.id)),
                 selectedNodes: [],
             };
         }
         case 'DUPLICATE': {
-            const nodesToDupe = state.graph.nodes.filter(n => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
+            const nodesToDupe = state.graph.nodes.filter((n) => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
             const newState = pushToUndoStack(state);
             const idMap = new Map();
-            const newNodes = nodesToDupe.map(node => {
+            const newNodes = nodesToDupe.map((node) => {
                 const cloned = materialEditorUtils.cloneNode(node);
                 idMap.set(node.id, cloned.id);
                 return cloned;
             });
-            const connectionsToDupe = state.graph.connections.filter(c => state.selectedNodes.includes(c.sourceNodeId) && state.selectedNodes.includes(c.targetNodeId));
-            const newConnections = connectionsToDupe.map(conn => ({
+            const connectionsToDupe = state.graph.connections.filter((c) => state.selectedNodes.includes(c.sourceNodeId) &&
+                state.selectedNodes.includes(c.targetNodeId));
+            const newConnections = connectionsToDupe.map((conn) => ({
                 ...conn,
                 id: materialEditorUtils.generateNodeId(),
                 sourceNodeId: idMap.get(conn.sourceNodeId),
@@ -230,12 +241,13 @@ function materialEditorReducer(state, action) {
                     nodes: [...newState.graph.nodes, ...newNodes],
                     connections: [...newState.graph.connections, ...newConnections],
                 },
-                selectedNodes: newNodes.map(n => n.id),
+                selectedNodes: newNodes.map((n) => n.id),
             };
         }
         case 'UNDO': {
-            if (state.undoStack.length === 0)
+            if (state.undoStack.length === 0) {
                 return state;
+            }
             const previous = state.undoStack[state.undoStack.length - 1];
             return {
                 ...state,
@@ -247,8 +259,9 @@ function materialEditorReducer(state, action) {
             };
         }
         case 'REDO': {
-            if (state.redoStack.length === 0)
+            if (state.redoStack.length === 0) {
                 return state;
+            }
             const next = state.redoStack[state.redoStack.length - 1];
             return {
                 ...state,
@@ -281,7 +294,7 @@ function materialEditorReducer(state, action) {
             return {
                 ...state,
                 expandedCategories: state.expandedCategories.includes(action.category)
-                    ? state.expandedCategories.filter(c => c !== action.category)
+                    ? state.expandedCategories.filter((c) => c !== action.category)
                     : [...state.expandedCategories, action.category],
             };
         case 'COLLAPSE_NODE':
@@ -338,9 +351,9 @@ function materialEditorReducer(state, action) {
    Hook: useMaterialEditor
    ═══════════════════════════════════════════════════════════════════════════ */
 function useMaterialEditor(initialGraph) {
-    const [state, dispatch] = ke.useReducer(materialEditorReducer, initialGraph, createInitialState);
+    const [state, dispatch] = _e.useReducer(materialEditorReducer, initialGraph, createInitialState);
     // Auto-compile when graph changes
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         if (state.autoCompile && !state.compiling) {
             const timeout = setTimeout(() => {
                 dispatch({ type: 'COMPILE' });
@@ -353,10 +366,8 @@ function useMaterialEditor(initialGraph) {
     return { state, dispatch };
 }
 function NodePalette({ searchQuery, expandedCategories, onSearch, onToggleCategory, onAddNode, onDragStart, }) {
-    const filteredNodes = searchQuery
-        ? materialNodeDefinitions.searchNodes(searchQuery)
-        : materialNodeDefinitions.MATERIAL_NODE_DEFINITIONS;
-    const categories = ke.useMemo(() => {
+    const filteredNodes = searchQuery ? materialNodeDefinitions.searchNodes(searchQuery) : materialNodeDefinitions.MATERIAL_NODE_DEFINITIONS;
+    const categories = _e.useMemo(() => {
         const cats = new Map();
         for (const node of filteredNodes) {
             if (!cats.has(node.category)) {
@@ -366,15 +377,18 @@ function NodePalette({ searchQuery, expandedCategories, onSearch, onToggleCatego
         }
         return cats;
     }, [filteredNodes]);
-    return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.palette, children: [jsxRuntime.jsx("div", { className: MaterialEditor_module.paletteSearch, children: jsxRuntime.jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: e => onSearch(e.target.value), className: MaterialEditor_module.searchInput }) }), jsxRuntime.jsx("div", { className: MaterialEditor_module.paletteCategories, children: Array.from(categories.entries()).map(([category, nodes]) => (jsxRuntime.jsxs("div", { className: MaterialEditor_module.paletteCategory, children: [jsxRuntime.jsxs("button", { className: MaterialEditor_module.categoryHeader, onClick: () => onToggleCategory(category), style: { borderLeftColor: materialEditorTypes.NODE_CATEGORY_COLORS[category] }, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.categoryIcon, children: expandedCategories.includes(category) ? '▼' : '►' }), jsxRuntime.jsx("span", { children: materialEditorTypes.NODE_CATEGORY_NAMES[category] }), jsxRuntime.jsx("span", { className: MaterialEditor_module.categoryCount, children: nodes.length })] }), expandedCategories.includes(category) && (jsxRuntime.jsx("div", { className: MaterialEditor_module.categoryNodes, children: nodes.map(nodeDef => (jsxRuntime.jsxs("div", { className: MaterialEditor_module.paletteNode, draggable: true, onDragStart: e => onDragStart(nodeDef.type, e), onDoubleClick: () => onAddNode(nodeDef.type), title: nodeDef.description, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.nodeColor, style: { backgroundColor: nodeDef.color || materialEditorTypes.NODE_CATEGORY_COLORS[nodeDef.category] } }), jsxRuntime.jsx("span", { className: MaterialEditor_module.nodeName, children: nodeDef.name })] }, nodeDef.type))) }))] }, category))) })] }));
+    return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.palette, children: [jsxRuntime.jsx("div", { className: MaterialEditor_module.paletteSearch, children: jsxRuntime.jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => onSearch(e.target.value), className: MaterialEditor_module.searchInput }) }), jsxRuntime.jsx("div", { className: MaterialEditor_module.paletteCategories, children: Array.from(categories.entries()).map(([category, nodes]) => (jsxRuntime.jsxs("div", { className: MaterialEditor_module.paletteCategory, children: [jsxRuntime.jsxs("button", { className: MaterialEditor_module.categoryHeader, onClick: () => onToggleCategory(category), style: { borderLeftColor: materialEditorTypes.NODE_CATEGORY_COLORS[category] }, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.categoryIcon, children: expandedCategories.includes(category) ? '▼' : '►' }), jsxRuntime.jsx("span", { children: materialEditorTypes.NODE_CATEGORY_NAMES[category] }), jsxRuntime.jsx("span", { className: MaterialEditor_module.categoryCount, children: nodes.length })] }), expandedCategories.includes(category) && (jsxRuntime.jsx("div", { className: MaterialEditor_module.categoryNodes, children: nodes.map((nodeDef) => (jsxRuntime.jsxs("div", { className: MaterialEditor_module.paletteNode, draggable: true, onDragStart: (e) => onDragStart(nodeDef.type, e), onDoubleClick: () => onAddNode(nodeDef.type), title: nodeDef.description, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.nodeColor, style: {
+                                            backgroundColor: nodeDef.color || materialEditorTypes.NODE_CATEGORY_COLORS[nodeDef.category],
+                                        } }), jsxRuntime.jsx("span", { className: MaterialEditor_module.nodeName, children: nodeDef.name })] }, nodeDef.type))) }))] }, category))) })] }));
 }
 function GraphNode({ node, definition, selected, viewTransform, connections, onSelect, onMove, onStartConnection, }) {
-    const nodeRef = ke.useRef(null);
-    const [isDragging, setIsDragging] = ke.useState(false);
-    const dragStart = ke.useRef(null);
+    const nodeRef = _e.useRef(null);
+    const [isDragging, setIsDragging] = _e.useState(false);
+    const dragStart = _e.useRef(null);
     const handleMouseDown = (e) => {
-        if (e.button !== 0)
+        if (e.button !== 0) {
             return;
+        }
         e.stopPropagation();
         if (!selected) {
             onSelect(node.id, e.shiftKey || e.ctrlKey);
@@ -384,9 +398,10 @@ function GraphNode({ node, definition, selected, viewTransform, connections, onS
             dragStart.current = { x: e.clientX, y: e.clientY };
         }
     };
-    ke.useEffect(() => {
-        if (!isDragging)
+    _e.useEffect(() => {
+        if (!isDragging) {
             return;
+        }
         const handleMouseMove = (e) => {
             if (dragStart.current) {
                 const delta = {
@@ -430,27 +445,29 @@ function GraphNode({ node, definition, selected, viewTransform, connections, onS
             transform: `scale(${viewTransform.zoom})`,
             transformOrigin: 'top left',
         }, onMouseDown: handleMouseDown, children: [jsxRuntime.jsxs("div", { className: MaterialEditor_module.nodeHeader, style: { backgroundColor: nodeColor }, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.nodeTitle, children: definition.name }), node.locked && jsxRuntime.jsx("span", { className: MaterialEditor_module.lockIcon, children: "\uD83D\uDD12" })] }), !node.collapsed && (jsxRuntime.jsxs("div", { className: MaterialEditor_module.nodePorts, children: [jsxRuntime.jsx("div", { className: MaterialEditor_module.inputPorts, children: definition.inputs.map((port, index) => {
-                            const isConnected = connections.some(c => c.targetNodeId === node.id && c.targetPortId === port.id);
-                            return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.port, style: { top: index * materialEditorTypes.PORT_HEIGHT + materialEditorTypes.NODE_HEADER_HEIGHT }, children: [jsxRuntime.jsx("div", { className: `${MaterialEditor_module.portHandle} ${MaterialEditor_module.inputHandle} ${isConnected ? MaterialEditor_module.connected : ''}`, style: { backgroundColor: materialEditorTypes.PORT_TYPE_COLORS[port.dataType] }, onMouseDown: e => handlePortMouseDown(e, port.id, 'input') }), jsxRuntime.jsx("span", { className: MaterialEditor_module.portLabel, children: port.name })] }, port.id));
+                            const isConnected = connections.some((c) => c.targetNodeId === node.id && c.targetPortId === port.id);
+                            return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.port, style: { top: index * materialEditorTypes.PORT_HEIGHT + materialEditorTypes.NODE_HEADER_HEIGHT }, children: [jsxRuntime.jsx("div", { className: `${MaterialEditor_module.portHandle} ${MaterialEditor_module.inputHandle} ${isConnected ? MaterialEditor_module.connected : ''}`, style: { backgroundColor: materialEditorTypes.PORT_TYPE_COLORS[port.dataType] }, onMouseDown: (e) => handlePortMouseDown(e, port.id, 'input') }), jsxRuntime.jsx("span", { className: MaterialEditor_module.portLabel, children: port.name })] }, port.id));
                         }) }), jsxRuntime.jsx("div", { className: MaterialEditor_module.outputPorts, children: definition.outputs.map((port, index) => {
-                            const isConnected = connections.some(c => c.sourceNodeId === node.id && c.sourcePortId === port.id);
-                            return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.port, style: { top: index * materialEditorTypes.PORT_HEIGHT + materialEditorTypes.NODE_HEADER_HEIGHT }, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.portLabel, children: port.name }), jsxRuntime.jsx("div", { className: `${MaterialEditor_module.portHandle} ${MaterialEditor_module.outputHandle} ${isConnected ? MaterialEditor_module.connected : ''}`, style: { backgroundColor: materialEditorTypes.PORT_TYPE_COLORS[port.dataType] }, onMouseDown: e => handlePortMouseDown(e, port.id, 'output') })] }, port.id));
-                        }) })] })), node.comment && (jsxRuntime.jsx("div", { className: MaterialEditor_module.nodeComment, children: node.comment }))] }));
+                            const isConnected = connections.some((c) => c.sourceNodeId === node.id && c.sourcePortId === port.id);
+                            return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.port, style: { top: index * materialEditorTypes.PORT_HEIGHT + materialEditorTypes.NODE_HEADER_HEIGHT }, children: [jsxRuntime.jsx("span", { className: MaterialEditor_module.portLabel, children: port.name }), jsxRuntime.jsx("div", { className: `${MaterialEditor_module.portHandle} ${MaterialEditor_module.outputHandle} ${isConnected ? MaterialEditor_module.connected : ''}`, style: { backgroundColor: materialEditorTypes.PORT_TYPE_COLORS[port.dataType] }, onMouseDown: (e) => handlePortMouseDown(e, port.id, 'output') })] }, port.id));
+                        }) })] })), node.comment && jsxRuntime.jsx("div", { className: MaterialEditor_module.nodeComment, children: node.comment })] }));
 }
 function Toolbar({ canUndo, canRedo, canPaste, hasSelection, autoCompile, compiling, showGrid, snapToGrid, onUndo, onRedo, onCopy, onCut, onPaste, onDuplicate, onDelete, onSelectAll, onZoomToFit, onToggleGrid, onToggleSnap, onToggleAutoCompile, onCompile, onNew, onExport, onImport, }) {
     return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: MaterialEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onNew, title: "New Material (Ctrl+N)", children: "\uD83D\uDCC4" }), jsxRuntime.jsx("button", { onClick: onImport, title: "Import (Ctrl+O)", children: "\uD83D\uDCC2" }), jsxRuntime.jsx("button", { onClick: onExport, title: "Export (Ctrl+S)", children: "\uD83D\uDCBE" })] }), jsxRuntime.jsx("div", { className: MaterialEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: MaterialEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", children: "\u21A9\uFE0F" }), jsxRuntime.jsx("button", { onClick: onRedo, disabled: !canRedo, title: "Redo (Ctrl+Y)", children: "\u21AA\uFE0F" })] }), jsxRuntime.jsx("div", { className: MaterialEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: MaterialEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onCut, disabled: !hasSelection, title: "Cut (Ctrl+X)", children: "\u2702\uFE0F" }), jsxRuntime.jsx("button", { onClick: onCopy, disabled: !hasSelection, title: "Copy (Ctrl+C)", children: "\uD83D\uDCCB" }), jsxRuntime.jsx("button", { onClick: onPaste, disabled: !canPaste, title: "Paste (Ctrl+V)", children: "\uD83D\uDCE5" }), jsxRuntime.jsx("button", { onClick: onDuplicate, disabled: !hasSelection, title: "Duplicate (Ctrl+D)", children: "\uD83D\uDD04" }), jsxRuntime.jsx("button", { onClick: onDelete, disabled: !hasSelection, title: "Delete (Del)", children: "\uD83D\uDDD1\uFE0F" })] }), jsxRuntime.jsx("div", { className: MaterialEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: MaterialEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onSelectAll, title: "Select All (Ctrl+A)", children: "\u2B1C" }), jsxRuntime.jsx("button", { onClick: onZoomToFit, title: "Zoom to Fit (F)", children: "\uD83D\uDD0D" }), jsxRuntime.jsx("button", { onClick: onToggleGrid, className: showGrid ? MaterialEditor_module.active : '', title: "Toggle Grid (G)", children: "#" }), jsxRuntime.jsx("button", { onClick: onToggleSnap, className: snapToGrid ? MaterialEditor_module.active : '', title: "Toggle Snap (S)", children: "\uD83E\uDDF2" })] }), jsxRuntime.jsx("div", { className: MaterialEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: MaterialEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onToggleAutoCompile, className: autoCompile ? MaterialEditor_module.active : '', title: "Auto Compile", children: "\u26A1" }), jsxRuntime.jsx("button", { onClick: onCompile, disabled: compiling, title: "Compile (F5)", children: compiling ? '⏳' : '▶️' })] })] }));
 }
 function PreviewPanel({ shader, mode, compiling, onModeChange }) {
-    const canvasRef = ke.useRef(null);
+    const canvasRef = _e.useRef(null);
     const previewModes = ['sphere', 'cube', 'plane', 'cylinder', 'torus'];
     // Simple preview rendering (in real implementation would use Three.js)
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         const canvas = canvasRef.current;
-        if (!canvas)
+        if (!canvas) {
             return;
+        }
         const ctx = canvas.getContext('2d');
-        if (!ctx)
+        if (!ctx) {
             return;
+        }
         // Simple gradient preview
         const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
         if ((shader === null || shader === void 0 ? void 0 : shader.errors.length) === 0) {
@@ -468,35 +485,36 @@ function PreviewPanel({ shader, mode, compiling, onModeChange }) {
         ctx.arc(100, 100, 80, 0, Math.PI * 2);
         ctx.fill();
     }, [shader, mode]);
-    return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.previewPanel, children: [jsxRuntime.jsxs("div", { className: MaterialEditor_module.previewHeader, children: [jsxRuntime.jsx("span", { children: "Preview" }), jsxRuntime.jsx("select", { value: mode, onChange: e => onModeChange(e.target.value), className: MaterialEditor_module.previewModeSelect, children: previewModes.map(m => (jsxRuntime.jsx("option", { value: m, children: m.charAt(0).toUpperCase() + m.slice(1) }, m))) })] }), jsxRuntime.jsxs("div", { className: MaterialEditor_module.previewCanvas, children: [compiling && jsxRuntime.jsx("div", { className: MaterialEditor_module.previewCompiling, children: "Compiling..." }), jsxRuntime.jsx("canvas", { ref: canvasRef, width: 200, height: 200 })] }), (shader === null || shader === void 0 ? void 0 : shader.errors.length) ? (jsxRuntime.jsx("div", { className: MaterialEditor_module.previewErrors, children: shader.errors.slice(0, 3).map((err, i) => (jsxRuntime.jsx("div", { className: MaterialEditor_module.previewError, children: err.message }, i))) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: MaterialEditor_module.previewPanel, children: [jsxRuntime.jsxs("div", { className: MaterialEditor_module.previewHeader, children: [jsxRuntime.jsx("span", { children: "Preview" }), jsxRuntime.jsx("select", { value: mode, onChange: (e) => onModeChange(e.target.value), className: MaterialEditor_module.previewModeSelect, children: previewModes.map((m) => (jsxRuntime.jsx("option", { value: m, children: m.charAt(0).toUpperCase() + m.slice(1) }, m))) })] }), jsxRuntime.jsxs("div", { className: MaterialEditor_module.previewCanvas, children: [compiling && jsxRuntime.jsx("div", { className: MaterialEditor_module.previewCompiling, children: "Compiling..." }), jsxRuntime.jsx("canvas", { ref: canvasRef, width: 200, height: 200 })] }), (shader === null || shader === void 0 ? void 0 : shader.errors.length) ? (jsxRuntime.jsx("div", { className: MaterialEditor_module.previewErrors, children: shader.errors.slice(0, 3).map((err, i) => (jsxRuntime.jsx("div", { className: MaterialEditor_module.previewError, children: err.message }, i))) })) : null] }));
 }
 /* ═══════════════════════════════════════════════════════════════════════════
    Main Component
    ═══════════════════════════════════════════════════════════════════════════ */
 function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, customNodes, textures, width = '100%', height = '600px', readOnly = false, showToolbar = true, showPalette = true, showProperties = true, showPreview = true, previewMode: initialPreviewMode = 'sphere', theme = 'dark', className, }) {
     const { state, dispatch } = useMaterialEditor(initialGraph);
-    const canvasRef = ke.useRef(null);
-    const [pendingConnection, setPendingConnection] = ke.useState(null);
+    const canvasRef = _e.useRef(null);
+    const [pendingConnection, setPendingConnection] = _e.useState(null);
     // Merge custom node definitions
-    const definitions = ke.useMemo(() => {
+    const definitions = _e.useMemo(() => {
         const map = new Map(materialNodeDefinitions.MATERIAL_NODE_MAP);
-        customNodes === null || customNodes === void 0 ? void 0 : customNodes.forEach(def => map.set(def.type, def));
+        customNodes === null || customNodes === void 0 ? void 0 : customNodes.forEach((def) => map.set(def.type, def));
         return map;
     }, [customNodes]);
     // Notify parent of changes
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         onGraphChange === null || onGraphChange === void 0 ? void 0 : onGraphChange(state.graph);
     }, [state.graph, onGraphChange]);
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         if (state.compiledShader) {
             onCompile === null || onCompile === void 0 ? void 0 : onCompile(state.compiledShader);
         }
     }, [state.compiledShader, onCompile]);
     // Keyboard shortcuts
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         const handleKeyDown = (e) => {
-            if (readOnly)
+            if (readOnly) {
                 return;
+            }
             const isCtrl = e.ctrlKey || e.metaKey;
             if (isCtrl && e.key === 'z') {
                 e.preventDefault();
@@ -553,14 +571,15 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [readOnly, state.selectedNodes, dispatch]);
     // Handle wheel zoom
-    const handleWheel = ke.useCallback((e) => {
+    const handleWheel = _e.useCallback((e) => {
         var _a;
         e.preventDefault();
         const delta = e.deltaY > 0 ? 0.9 : 1.1;
         const newZoom = Math.min(materialEditorTypes.MAX_ZOOM, Math.max(materialEditorTypes.MIN_ZOOM, state.viewTransform.zoom * delta));
         const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
+        if (!rect) {
             return;
+        }
         const mouseX = e.clientX - rect.left;
         const mouseY = e.clientY - rect.top;
         const newX = mouseX - (mouseX - state.viewTransform.x) * (newZoom / state.viewTransform.zoom);
@@ -571,8 +590,8 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         });
     }, [state.viewTransform, dispatch]);
     // Handle canvas pan
-    const [isPanning, setIsPanning] = ke.useState(false);
-    const panStart = ke.useRef(null);
+    const [isPanning, setIsPanning] = _e.useState(false);
+    const panStart = _e.useRef(null);
     const handleCanvasMouseDown = (e) => {
         if (e.button === 1 || (e.button === 0 && e.altKey)) {
             setIsPanning(true);
@@ -617,11 +636,13 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         var _a;
         e.preventDefault();
         const nodeType = e.dataTransfer.getData('text/plain');
-        if (!nodeType)
+        if (!nodeType) {
             return;
+        }
         const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
+        if (!rect) {
             return;
+        }
         const position = materialEditorUtils.screenToGraph({ x: e.clientX - rect.left, y: e.clientY - rect.top }, state.viewTransform);
         dispatch({ type: 'ADD_NODE', nodeType, position });
     };
@@ -661,8 +682,9 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         input.onchange = async (e) => {
             var _a;
             const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-            if (!file)
+            if (!file) {
                 return;
+            }
             const text = await file.text();
             const graph = materialEditorUtils.importGraphFromJSON(text);
             if (graph) {
@@ -673,24 +695,37 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     };
     // Render connections
     const renderConnections = () => {
-        return state.graph.connections.map(conn => {
-            const sourceNode = state.graph.nodes.find(n => n.id === conn.sourceNodeId);
-            const targetNode = state.graph.nodes.find(n => n.id === conn.targetNodeId);
-            if (!sourceNode || !targetNode)
+        return state.graph.connections.map((conn) => {
+            const sourceNode = state.graph.nodes.find((n) => n.id === conn.sourceNodeId);
+            const targetNode = state.graph.nodes.find((n) => n.id === conn.targetNodeId);
+            if (!sourceNode || !targetNode) {
                 return null;
+            }
             const sourceDef = definitions.get(sourceNode.type);
             const targetDef = definitions.get(targetNode.type);
-            if (!sourceDef || !targetDef)
+            if (!sourceDef || !targetDef) {
                 return null;
-            const sourcePortIndex = sourceDef.outputs.findIndex(p => p.id === conn.sourcePortId);
-            const targetPortIndex = targetDef.inputs.findIndex(p => p.id === conn.targetPortId);
-            if (sourcePortIndex === -1 || targetPortIndex === -1)
+            }
+            const sourcePortIndex = sourceDef.outputs.findIndex((p) => p.id === conn.sourcePortId);
+            const targetPortIndex = targetDef.inputs.findIndex((p) => p.id === conn.targetPortId);
+            if (sourcePortIndex === -1 || targetPortIndex === -1) {
                 return null;
+            }
             const sourcePort = sourceDef.outputs[sourcePortIndex];
             const x1 = (sourceNode.position.x + materialEditorTypes.NODE_WIDTH) * state.viewTransform.zoom + state.viewTransform.x;
-            const y1 = (sourceNode.position.y + materialEditorTypes.NODE_HEADER_HEIGHT + sourcePortIndex * materialEditorTypes.PORT_HEIGHT + materialEditorTypes.PORT_HEIGHT / 2) * state.viewTransform.zoom + state.viewTransform.y;
+            const y1 = (sourceNode.position.y +
+                materialEditorTypes.NODE_HEADER_HEIGHT +
+                sourcePortIndex * materialEditorTypes.PORT_HEIGHT +
+                materialEditorTypes.PORT_HEIGHT / 2) *
+                state.viewTransform.zoom +
+                state.viewTransform.y;
             const x2 = targetNode.position.x * state.viewTransform.zoom + state.viewTransform.x;
-            const y2 = (targetNode.position.y + materialEditorTypes.NODE_HEADER_HEIGHT + targetPortIndex * materialEditorTypes.PORT_HEIGHT + materialEditorTypes.PORT_HEIGHT / 2) * state.viewTransform.zoom + state.viewTransform.y;
+            const y2 = (targetNode.position.y +
+                materialEditorTypes.NODE_HEADER_HEIGHT +
+                targetPortIndex * materialEditorTypes.PORT_HEIGHT +
+                materialEditorTypes.PORT_HEIGHT / 2) *
+                state.viewTransform.zoom +
+                state.viewTransform.y;
             const isSelected = state.selectedConnections.includes(conn.id);
             const controlX = (x1 + x2) / 2;
             return (jsxRuntime.jsx("path", { d: `M ${x1} ${y1} C ${controlX} ${y1}, ${controlX} ${y2}, ${x2} ${y2}`, fill: "none", stroke: isSelected ? '#fff' : materialEditorTypes.PORT_TYPE_COLORS[sourcePort.dataType], strokeWidth: isSelected ? 3 : 2, className: MaterialEditor_module.connection, onClick: () => dispatch({ type: 'SELECT_CONNECTIONS', connectionIds: [conn.id] }) }, conn.id));
@@ -699,11 +734,13 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     // Render pending connection
     const renderPendingConnection = () => {
         var _a;
-        if (!pendingConnection)
+        if (!pendingConnection) {
             return null;
+        }
         const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
+        if (!rect) {
             return null;
+        }
         const x1 = pendingConnection.startPosition.x - rect.left;
         const y1 = pendingConnection.startPosition.y - rect.top;
         const x2 = pendingConnection.currentPosition.x - rect.left;
@@ -713,8 +750,9 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     };
     // Render grid
     const renderGrid = () => {
-        if (!state.showGrid)
+        if (!state.showGrid) {
             return null;
+        }
         const gridSize = state.gridSize * state.viewTransform.zoom;
         const offsetX = state.viewTransform.x % gridSize;
         const offsetY = state.viewTransform.y % gridSize;
@@ -724,12 +762,17 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
                     dispatch({ type: 'COMPILE' });
                     const shader = materialEditorUtils.compileShader(state.graph, definitions);
                     dispatch({ type: 'SET_COMPILED_SHADER', shader });
-                }, onNew: () => dispatch({ type: 'NEW_GRAPH' }), onExport: handleExport, onImport: handleImport })), jsxRuntime.jsxs("div", { className: MaterialEditor_module.editorBody, children: [showPalette && (jsxRuntime.jsx(NodePalette, { searchQuery: state.searchQuery, expandedCategories: state.expandedCategories, onSearch: query => dispatch({ type: 'SET_SEARCH_QUERY', query }), onToggleCategory: cat => dispatch({ type: 'TOGGLE_CATEGORY', category: cat }), onAddNode: handlePaletteAddNode, onDragStart: handlePaletteDragStart })), jsxRuntime.jsxs("div", { ref: canvasRef, className: MaterialEditor_module.graphCanvas, onWheel: handleWheel, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, onDragOver: handleDragOver, onDrop: handleDrop, children: [jsxRuntime.jsxs("svg", { className: MaterialEditor_module.connectionsSvg, children: [jsxRuntime.jsx("defs", { children: renderGrid() }), state.showGrid && jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" }), renderConnections(), renderPendingConnection()] }), state.graph.nodes.map(node => {
+                }, onNew: () => dispatch({ type: 'NEW_GRAPH' }), onExport: handleExport, onImport: handleImport })), jsxRuntime.jsxs("div", { className: MaterialEditor_module.editorBody, children: [showPalette && (jsxRuntime.jsx(NodePalette, { searchQuery: state.searchQuery, expandedCategories: state.expandedCategories, onSearch: (query) => dispatch({ type: 'SET_SEARCH_QUERY', query }), onToggleCategory: (cat) => dispatch({ type: 'TOGGLE_CATEGORY', category: cat }), onAddNode: handlePaletteAddNode, onDragStart: handlePaletteDragStart })), jsxRuntime.jsxs("div", { ref: canvasRef, className: MaterialEditor_module.graphCanvas, onWheel: handleWheel, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, onDragOver: handleDragOver, onDrop: handleDrop, children: [jsxRuntime.jsxs("svg", { className: MaterialEditor_module.connectionsSvg, children: [jsxRuntime.jsx("defs", { children: renderGrid() }), state.showGrid && jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" }), renderConnections(), renderPendingConnection()] }), state.graph.nodes.map((node) => {
                                 const def = definitions.get(node.type);
-                                if (!def)
+                                if (!def) {
                                     return null;
-                                return (jsxRuntime.jsx(GraphNode, { node: node, definition: def, selected: state.selectedNodes.includes(node.id), viewTransform: state.viewTransform, connections: state.graph.connections, onSelect: (nodeId, additive) => dispatch({ type: 'SELECT_NODES', nodeIds: [nodeId], additive }), onMove: (nodeId, delta) => dispatch({ type: 'MOVE_NODES', nodeIds: state.selectedNodes.includes(nodeId) ? state.selectedNodes : [nodeId], delta }), onStartConnection: handleStartConnection }, node.id));
-                            })] }), showPreview && (jsxRuntime.jsx(PreviewPanel, { shader: state.compiledShader, mode: state.previewMode, compiling: state.compiling, onModeChange: mode => dispatch({ type: 'SET_PREVIEW_MODE', mode }) }))] })] }));
+                                }
+                                return (jsxRuntime.jsx(GraphNode, { node: node, definition: def, selected: state.selectedNodes.includes(node.id), viewTransform: state.viewTransform, connections: state.graph.connections, onSelect: (nodeId, additive) => dispatch({ type: 'SELECT_NODES', nodeIds: [nodeId], additive }), onMove: (nodeId, delta) => dispatch({
+                                        type: 'MOVE_NODES',
+                                        nodeIds: state.selectedNodes.includes(nodeId) ? state.selectedNodes : [nodeId],
+                                        delta,
+                                    }), onStartConnection: handleStartConnection }, node.id));
+                            })] }), showPreview && (jsxRuntime.jsx(PreviewPanel, { shader: state.compiledShader, mode: state.previewMode, compiling: state.compiling, onModeChange: (mode) => dispatch({ type: 'SET_PREVIEW_MODE', mode }) }))] })] }));
 }
 
 exports.NiceMaterialEditor = NiceMaterialEditor;