@nice2dev/ui-3d 1.0.0 → 1.0.3

package/dist/esm/material/NiceMaterialEditor.js

@@ -0,0 +1,734 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect, useCallback, useReducer } from 'react';
+import { MAX_ZOOM, MIN_ZOOM, NODE_CATEGORY_COLORS, NODE_CATEGORY_NAMES, NODE_WIDTH, NODE_HEADER_HEIGHT, PORT_HEIGHT, PORT_TYPE_COLORS, DEFAULT_GRID_SIZE } from './materialEditorTypes.js';
+import { MATERIAL_NODE_MAP, searchNodes, MATERIAL_NODE_DEFINITIONS } from './materialNodeDefinitions.js';
+import { compileShader, importGraphFromJSON, exportGraphToJSON, screenToGraph, updateNodeInGraph, calculateZoomToFit, cloneNode, generateNodeId, removeNodesFromGraph, removeConnectionFromGraph, getNodeDefinition, canConnect, createConnection, addConnectionToGraph, moveNodesInGraph, createNode, addNodeToGraph, createEmptyGraph } from './materialEditorUtils.js';
+import styles from './MaterialEditor.module.css.js';
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   State Reducer
+   ═══════════════════════════════════════════════════════════════════════════ */
+function createInitialState(graph) {
+    const initialGraph = graph || createEmptyGraph();
+    return {
+        graph: initialGraph,
+        selectedNodes: [],
+        selectedConnections: [],
+        clipboard: null,
+        viewTransform: { x: 100, y: 100, zoom: 1 },
+        previewMode: 'sphere',
+        showGrid: true,
+        showMinimap: true,
+        snapToGrid: true,
+        gridSize: DEFAULT_GRID_SIZE,
+        undoStack: [],
+        redoStack: [],
+        compiledShader: null,
+        compiling: false,
+        autoCompile: true,
+        searchQuery: '',
+        expandedCategories: ['input', 'output', 'math', 'color', 'texture'],
+    };
+}
+function pushToUndoStack(state) {
+    return {
+        ...state,
+        undoStack: [...state.undoStack.slice(-49), state.graph],
+        redoStack: [],
+    };
+}
+function materialEditorReducer(state, action) {
+    switch (action.type) {
+        case 'ADD_NODE': {
+            const node = createNode(action.nodeType, action.position);
+            if (!node)
+                return state;
+            const newState = pushToUndoStack(state);
+            return {
+                ...newState,
+                graph: addNodeToGraph(newState.graph, node),
+                selectedNodes: [node.id],
+            };
+        }
+        case 'DELETE_NODES': {
+            const newState = pushToUndoStack(state);
+            return {
+                ...newState,
+                graph: removeNodesFromGraph(newState.graph, action.nodeIds),
+                selectedNodes: [],
+                selectedConnections: [],
+            };
+        }
+        case 'MOVE_NODES': {
+            return {
+                ...state,
+                graph: moveNodesInGraph(state.graph, action.nodeIds, action.delta),
+            };
+        }
+        case 'UPDATE_NODE_PROPERTY': {
+            const newState = pushToUndoStack(state);
+            const node = newState.graph.nodes.find(n => n.id === action.nodeId);
+            if (!node)
+                return state;
+            return {
+                ...newState,
+                graph: updateNodeInGraph(newState.graph, action.nodeId, {
+                    properties: { ...node.properties, [action.propertyId]: action.value },
+                }),
+            };
+        }
+        case 'UPDATE_INPUT_VALUE': {
+            const newState = pushToUndoStack(state);
+            const node = newState.graph.nodes.find(n => n.id === action.nodeId);
+            if (!node)
+                return state;
+            return {
+                ...newState,
+                graph: updateNodeInGraph(newState.graph, action.nodeId, {
+                    inputValues: { ...node.inputValues, [action.portId]: action.value },
+                }),
+            };
+        }
+        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)
+                return state;
+            const sourceDef = getNodeDefinition(sourceNode);
+            const targetDef = getNodeDefinition(targetNode);
+            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)
+                return state;
+            const { valid } = canConnect(sourceNode, sourcePort, targetNode, targetPort, state.graph.connections);
+            if (!valid)
+                return state;
+            const newState = pushToUndoStack(state);
+            const connection = createConnection(action.connection.sourceNodeId, action.connection.sourcePortId, action.connection.targetNodeId, action.connection.targetPortId);
+            return {
+                ...newState,
+                graph: addConnectionToGraph(newState.graph, connection),
+            };
+        }
+        case 'DISCONNECT': {
+            const newState = pushToUndoStack(state);
+            return {
+                ...newState,
+                graph: removeConnectionFromGraph(newState.graph, action.connectionId),
+                selectedConnections: state.selectedConnections.filter(id => id !== action.connectionId),
+            };
+        }
+        case 'SELECT_NODES': {
+            return {
+                ...state,
+                selectedNodes: action.additive
+                    ? [...new Set([...state.selectedNodes, ...action.nodeIds])]
+                    : action.nodeIds,
+                selectedConnections: action.additive ? state.selectedConnections : [],
+            };
+        }
+        case 'SELECT_CONNECTIONS': {
+            return {
+                ...state,
+                selectedConnections: action.additive
+                    ? [...new Set([...state.selectedConnections, ...action.connectionIds])]
+                    : action.connectionIds,
+                selectedNodes: action.additive ? state.selectedNodes : [],
+            };
+        }
+        case 'SELECT_ALL': {
+            return {
+                ...state,
+                selectedNodes: state.graph.nodes.map(n => n.id),
+                selectedConnections: state.graph.connections.map(c => c.id),
+            };
+        }
+        case 'DESELECT_ALL': {
+            return {
+                ...state,
+                selectedNodes: [],
+                selectedConnections: [],
+            };
+        }
+        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));
+            return {
+                ...state,
+                clipboard: { nodes: nodesToCopy, connections: connectionsToCopy },
+            };
+        }
+        case 'PASTE': {
+            if (!state.clipboard)
+                return state;
+            const newState = pushToUndoStack(state);
+            const idMap = new Map();
+            const newNodes = state.clipboard.nodes.map(node => {
+                const newId = generateNodeId();
+                idMap.set(node.id, newId);
+                return {
+                    ...node,
+                    id: newId,
+                    position: {
+                        x: node.position.x + action.position.x - state.clipboard.nodes[0].position.x + 20,
+                        y: node.position.y + action.position.y - state.clipboard.nodes[0].position.y + 20,
+                    },
+                    selected: false,
+                };
+            });
+            const newConnections = state.clipboard.connections.map(conn => ({
+                ...conn,
+                id: generateNodeId(),
+                sourceNodeId: idMap.get(conn.sourceNodeId),
+                targetNodeId: idMap.get(conn.targetNodeId),
+            }));
+            return {
+                ...newState,
+                graph: {
+                    ...newState.graph,
+                    nodes: [...newState.graph.nodes, ...newNodes],
+                    connections: [...newState.graph.connections, ...newConnections],
+                },
+                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 newState = pushToUndoStack(state);
+            return {
+                ...newState,
+                clipboard: { nodes: nodesToCut, connections: connectionsToCut },
+                graph: 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 newState = pushToUndoStack(state);
+            const idMap = new Map();
+            const newNodes = nodesToDupe.map(node => {
+                const cloned = 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 => ({
+                ...conn,
+                id: generateNodeId(),
+                sourceNodeId: idMap.get(conn.sourceNodeId),
+                targetNodeId: idMap.get(conn.targetNodeId),
+            }));
+            return {
+                ...newState,
+                graph: {
+                    ...newState.graph,
+                    nodes: [...newState.graph.nodes, ...newNodes],
+                    connections: [...newState.graph.connections, ...newConnections],
+                },
+                selectedNodes: newNodes.map(n => n.id),
+            };
+        }
+        case 'UNDO': {
+            if (state.undoStack.length === 0)
+                return state;
+            const previous = state.undoStack[state.undoStack.length - 1];
+            return {
+                ...state,
+                graph: previous,
+                undoStack: state.undoStack.slice(0, -1),
+                redoStack: [...state.redoStack, state.graph],
+                selectedNodes: [],
+                selectedConnections: [],
+            };
+        }
+        case 'REDO': {
+            if (state.redoStack.length === 0)
+                return state;
+            const next = state.redoStack[state.redoStack.length - 1];
+            return {
+                ...state,
+                graph: next,
+                undoStack: [...state.undoStack, state.graph],
+                redoStack: state.redoStack.slice(0, -1),
+                selectedNodes: [],
+                selectedConnections: [],
+            };
+        }
+        case 'SET_VIEW_TRANSFORM':
+            return { ...state, viewTransform: action.transform };
+        case 'ZOOM_TO_FIT': {
+            const transform = calculateZoomToFit(state.graph.nodes, 800, 600);
+            return { ...state, viewTransform: transform };
+        }
+        case 'SET_PREVIEW_MODE':
+            return { ...state, previewMode: action.mode };
+        case 'TOGGLE_GRID':
+            return { ...state, showGrid: !state.showGrid };
+        case 'TOGGLE_MINIMAP':
+            return { ...state, showMinimap: !state.showMinimap };
+        case 'TOGGLE_SNAP':
+            return { ...state, snapToGrid: !state.snapToGrid };
+        case 'SET_GRID_SIZE':
+            return { ...state, gridSize: action.size };
+        case 'SET_SEARCH_QUERY':
+            return { ...state, searchQuery: action.query };
+        case 'TOGGLE_CATEGORY':
+            return {
+                ...state,
+                expandedCategories: state.expandedCategories.includes(action.category)
+                    ? state.expandedCategories.filter(c => c !== action.category)
+                    : [...state.expandedCategories, action.category],
+            };
+        case 'COLLAPSE_NODE':
+            return {
+                ...state,
+                graph: updateNodeInGraph(state.graph, action.nodeId, { collapsed: true }),
+            };
+        case 'EXPAND_NODE':
+            return {
+                ...state,
+                graph: updateNodeInGraph(state.graph, action.nodeId, { collapsed: false }),
+            };
+        case 'ADD_COMMENT':
+            return {
+                ...state,
+                graph: updateNodeInGraph(state.graph, action.nodeId, { comment: action.comment }),
+            };
+        case 'LOCK_NODE':
+            return {
+                ...state,
+                graph: updateNodeInGraph(state.graph, action.nodeId, { locked: true }),
+            };
+        case 'UNLOCK_NODE':
+            return {
+                ...state,
+                graph: updateNodeInGraph(state.graph, action.nodeId, { locked: false }),
+            };
+        case 'COMPILE':
+            return { ...state, compiling: true };
+        case 'SET_COMPILED_SHADER':
+            return { ...state, compiledShader: action.shader, compiling: false };
+        case 'TOGGLE_AUTO_COMPILE':
+            return { ...state, autoCompile: !state.autoCompile };
+        case 'LOAD_GRAPH':
+            return {
+                ...createInitialState(action.graph),
+                autoCompile: state.autoCompile,
+            };
+        case 'NEW_GRAPH':
+            return createInitialState();
+        case 'SET_METADATA':
+            return {
+                ...state,
+                graph: {
+                    ...state.graph,
+                    metadata: { ...state.graph.metadata, ...action.metadata },
+                },
+            };
+        default:
+            return state;
+    }
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   Hook: useMaterialEditor
+   ═══════════════════════════════════════════════════════════════════════════ */
+function useMaterialEditor(initialGraph) {
+    const [state, dispatch] = useReducer(materialEditorReducer, initialGraph, createInitialState);
+    // Auto-compile when graph changes
+    useEffect(() => {
+        if (state.autoCompile && !state.compiling) {
+            const timeout = setTimeout(() => {
+                dispatch({ type: 'COMPILE' });
+                const shader = compileShader(state.graph);
+                dispatch({ type: 'SET_COMPILED_SHADER', shader });
+            }, 300);
+            return () => clearTimeout(timeout);
+        }
+    }, [state.graph, state.autoCompile]);
+    return { state, dispatch };
+}
+function NodePalette({ searchQuery, expandedCategories, onSearch, onToggleCategory, onAddNode, onDragStart, }) {
+    const filteredNodes = searchQuery
+        ? searchNodes(searchQuery)
+        : MATERIAL_NODE_DEFINITIONS;
+    const categories = useMemo(() => {
+        const cats = new Map();
+        for (const node of filteredNodes) {
+            if (!cats.has(node.category)) {
+                cats.set(node.category, []);
+            }
+            cats.get(node.category).push(node);
+        }
+        return cats;
+    }, [filteredNodes]);
+    return (jsxs("div", { className: styles.palette, children: [jsx("div", { className: styles.paletteSearch, children: jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: e => onSearch(e.target.value), className: styles.searchInput }) }), jsx("div", { className: styles.paletteCategories, children: Array.from(categories.entries()).map(([category, nodes]) => (jsxs("div", { className: styles.paletteCategory, children: [jsxs("button", { className: styles.categoryHeader, onClick: () => onToggleCategory(category), style: { borderLeftColor: NODE_CATEGORY_COLORS[category] }, children: [jsx("span", { className: styles.categoryIcon, children: expandedCategories.includes(category) ? '▼' : '►' }), jsx("span", { children: NODE_CATEGORY_NAMES[category] }), jsx("span", { className: styles.categoryCount, children: nodes.length })] }), expandedCategories.includes(category) && (jsx("div", { className: styles.categoryNodes, children: nodes.map(nodeDef => (jsxs("div", { className: styles.paletteNode, draggable: true, onDragStart: e => onDragStart(nodeDef.type, e), onDoubleClick: () => onAddNode(nodeDef.type), title: nodeDef.description, children: [jsx("span", { className: styles.nodeColor, style: { backgroundColor: nodeDef.color || NODE_CATEGORY_COLORS[nodeDef.category] } }), jsx("span", { className: styles.nodeName, children: nodeDef.name })] }, nodeDef.type))) }))] }, category))) })] }));
+}
+function GraphNode({ node, definition, selected, viewTransform, connections, onSelect, onMove, onStartConnection, }) {
+    const nodeRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStart = useRef(null);
+    const handleMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        e.stopPropagation();
+        if (!selected) {
+            onSelect(node.id, e.shiftKey || e.ctrlKey);
+        }
+        if (!node.locked) {
+            setIsDragging(true);
+            dragStart.current = { x: e.clientX, y: e.clientY };
+        }
+    };
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMouseMove = (e) => {
+            if (dragStart.current) {
+                const delta = {
+                    x: (e.clientX - dragStart.current.x) / viewTransform.zoom,
+                    y: (e.clientY - dragStart.current.y) / viewTransform.zoom,
+                };
+                dragStart.current = { x: e.clientX, y: e.clientY };
+                onMove(node.id, delta);
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            dragStart.current = null;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, viewTransform.zoom, node.id, onMove]);
+    const handlePortMouseDown = (e, portId, portType) => {
+        e.stopPropagation();
+        const rect = e.target.getBoundingClientRect();
+        const position = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+        };
+        onStartConnection(node.id, portId, portType, position);
+    };
+    const nodeColor = definition.color || NODE_CATEGORY_COLORS[definition.category];
+    const maxPorts = Math.max(definition.inputs.length, definition.outputs.length);
+    const nodeHeight = node.collapsed
+        ? NODE_HEADER_HEIGHT
+        : NODE_HEADER_HEIGHT + maxPorts * PORT_HEIGHT + 8;
+    return (jsxs("div", { ref: nodeRef, className: `${styles.graphNode} ${selected ? styles.selected : ''} ${node.locked ? styles.locked : ''}`, style: {
+            left: node.position.x * viewTransform.zoom + viewTransform.x,
+            top: node.position.y * viewTransform.zoom + viewTransform.y,
+            width: NODE_WIDTH * viewTransform.zoom,
+            height: nodeHeight * viewTransform.zoom,
+            transform: `scale(${viewTransform.zoom})`,
+            transformOrigin: 'top left',
+        }, onMouseDown: handleMouseDown, children: [jsxs("div", { className: styles.nodeHeader, style: { backgroundColor: nodeColor }, children: [jsx("span", { className: styles.nodeTitle, children: definition.name }), node.locked && jsx("span", { className: styles.lockIcon, children: "\uD83D\uDD12" })] }), !node.collapsed && (jsxs("div", { className: styles.nodePorts, children: [jsx("div", { className: styles.inputPorts, children: definition.inputs.map((port, index) => {
+                            const isConnected = connections.some(c => c.targetNodeId === node.id && c.targetPortId === port.id);
+                            return (jsxs("div", { className: styles.port, style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT }, children: [jsx("div", { className: `${styles.portHandle} ${styles.inputHandle} ${isConnected ? styles.connected : ''}`, style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] }, onMouseDown: e => handlePortMouseDown(e, port.id, 'input') }), jsx("span", { className: styles.portLabel, children: port.name })] }, port.id));
+                        }) }), jsx("div", { className: styles.outputPorts, children: definition.outputs.map((port, index) => {
+                            const isConnected = connections.some(c => c.sourceNodeId === node.id && c.sourcePortId === port.id);
+                            return (jsxs("div", { className: styles.port, style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT }, children: [jsx("span", { className: styles.portLabel, children: port.name }), jsx("div", { className: `${styles.portHandle} ${styles.outputHandle} ${isConnected ? styles.connected : ''}`, style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] }, onMouseDown: e => handlePortMouseDown(e, port.id, 'output') })] }, port.id));
+                        }) })] })), node.comment && (jsx("div", { className: styles.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 (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onNew, title: "New Material (Ctrl+N)", children: "\uD83D\uDCC4" }), jsx("button", { onClick: onImport, title: "Import (Ctrl+O)", children: "\uD83D\uDCC2" }), jsx("button", { onClick: onExport, title: "Export (Ctrl+S)", children: "\uD83D\uDCBE" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", children: "\u21A9\uFE0F" }), jsx("button", { onClick: onRedo, disabled: !canRedo, title: "Redo (Ctrl+Y)", children: "\u21AA\uFE0F" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onCut, disabled: !hasSelection, title: "Cut (Ctrl+X)", children: "\u2702\uFE0F" }), jsx("button", { onClick: onCopy, disabled: !hasSelection, title: "Copy (Ctrl+C)", children: "\uD83D\uDCCB" }), jsx("button", { onClick: onPaste, disabled: !canPaste, title: "Paste (Ctrl+V)", children: "\uD83D\uDCE5" }), jsx("button", { onClick: onDuplicate, disabled: !hasSelection, title: "Duplicate (Ctrl+D)", children: "\uD83D\uDD04" }), jsx("button", { onClick: onDelete, disabled: !hasSelection, title: "Delete (Del)", children: "\uD83D\uDDD1\uFE0F" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onSelectAll, title: "Select All (Ctrl+A)", children: "\u2B1C" }), jsx("button", { onClick: onZoomToFit, title: "Zoom to Fit (F)", children: "\uD83D\uDD0D" }), jsx("button", { onClick: onToggleGrid, className: showGrid ? styles.active : '', title: "Toggle Grid (G)", children: "#" }), jsx("button", { onClick: onToggleSnap, className: snapToGrid ? styles.active : '', title: "Toggle Snap (S)", children: "\uD83E\uDDF2" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onToggleAutoCompile, className: autoCompile ? styles.active : '', title: "Auto Compile", children: "\u26A1" }), jsx("button", { onClick: onCompile, disabled: compiling, title: "Compile (F5)", children: compiling ? '⏳' : '▶️' })] })] }));
+}
+function PreviewPanel({ shader, mode, compiling, onModeChange }) {
+    const canvasRef = useRef(null);
+    const previewModes = ['sphere', 'cube', 'plane', 'cylinder', 'torus'];
+    // Simple preview rendering (in real implementation would use Three.js)
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        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) {
+            gradient.addColorStop(0, '#4CAF50');
+            gradient.addColorStop(1, '#2E7D32');
+        }
+        else {
+            gradient.addColorStop(0, '#f44336');
+            gradient.addColorStop(1, '#c62828');
+        }
+        ctx.fillStyle = '#1e1e1e';
+        ctx.fillRect(0, 0, 200, 200);
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(100, 100, 80, 0, Math.PI * 2);
+        ctx.fill();
+    }, [shader, mode]);
+    return (jsxs("div", { className: styles.previewPanel, children: [jsxs("div", { className: styles.previewHeader, children: [jsx("span", { children: "Preview" }), jsx("select", { value: mode, onChange: e => onModeChange(e.target.value), className: styles.previewModeSelect, children: previewModes.map(m => (jsx("option", { value: m, children: m.charAt(0).toUpperCase() + m.slice(1) }, m))) })] }), jsxs("div", { className: styles.previewCanvas, children: [compiling && jsx("div", { className: styles.previewCompiling, children: "Compiling..." }), jsx("canvas", { ref: canvasRef, width: 200, height: 200 })] }), (shader === null || shader === void 0 ? void 0 : shader.errors.length) ? (jsx("div", { className: styles.previewErrors, children: shader.errors.slice(0, 3).map((err, i) => (jsx("div", { className: styles.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 = useRef(null);
+    const [pendingConnection, setPendingConnection] = useState(null);
+    // Merge custom node definitions
+    const definitions = useMemo(() => {
+        const map = new Map(MATERIAL_NODE_MAP);
+        customNodes === null || customNodes === void 0 ? void 0 : customNodes.forEach(def => map.set(def.type, def));
+        return map;
+    }, [customNodes]);
+    // Notify parent of changes
+    useEffect(() => {
+        onGraphChange === null || onGraphChange === void 0 ? void 0 : onGraphChange(state.graph);
+    }, [state.graph, onGraphChange]);
+    useEffect(() => {
+        if (state.compiledShader) {
+            onCompile === null || onCompile === void 0 ? void 0 : onCompile(state.compiledShader);
+        }
+    }, [state.compiledShader, onCompile]);
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (readOnly)
+                return;
+            const isCtrl = e.ctrlKey || e.metaKey;
+            if (isCtrl && e.key === 'z') {
+                e.preventDefault();
+                dispatch({ type: 'UNDO' });
+            }
+            else if (isCtrl && e.key === 'y') {
+                e.preventDefault();
+                dispatch({ type: 'REDO' });
+            }
+            else if (isCtrl && e.key === 'c') {
+                e.preventDefault();
+                dispatch({ type: 'COPY' });
+            }
+            else if (isCtrl && e.key === 'x') {
+                e.preventDefault();
+                dispatch({ type: 'CUT' });
+            }
+            else if (isCtrl && e.key === 'v') {
+                e.preventDefault();
+                dispatch({ type: 'PASTE', position: { x: 100, y: 100 } });
+            }
+            else if (isCtrl && e.key === 'd') {
+                e.preventDefault();
+                dispatch({ type: 'DUPLICATE' });
+            }
+            else if (isCtrl && e.key === 'a') {
+                e.preventDefault();
+                dispatch({ type: 'SELECT_ALL' });
+            }
+            else if (e.key === 'Delete' || e.key === 'Backspace') {
+                if (state.selectedNodes.length > 0) {
+                    e.preventDefault();
+                    dispatch({ type: 'DELETE_NODES', nodeIds: state.selectedNodes });
+                }
+            }
+            else if (e.key === 'f' || e.key === 'F') {
+                e.preventDefault();
+                dispatch({ type: 'ZOOM_TO_FIT' });
+            }
+            else if (e.key === 'g' || e.key === 'G') {
+                e.preventDefault();
+                dispatch({ type: 'TOGGLE_GRID' });
+            }
+            else if (e.key === 's' && !isCtrl) {
+                e.preventDefault();
+                dispatch({ type: 'TOGGLE_SNAP' });
+            }
+            else if (e.key === 'Escape') {
+                dispatch({ type: 'DESELECT_ALL' });
+                setPendingConnection(null);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [readOnly, state.selectedNodes, dispatch]);
+    // Handle wheel zoom
+    const handleWheel = useCallback((e) => {
+        var _a;
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, state.viewTransform.zoom * delta));
+        const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        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);
+        const newY = mouseY - (mouseY - state.viewTransform.y) * (newZoom / state.viewTransform.zoom);
+        dispatch({
+            type: 'SET_VIEW_TRANSFORM',
+            transform: { x: newX, y: newY, zoom: newZoom },
+        });
+    }, [state.viewTransform, dispatch]);
+    // Handle canvas pan
+    const [isPanning, setIsPanning] = useState(false);
+    const panStart = useRef(null);
+    const handleCanvasMouseDown = (e) => {
+        if (e.button === 1 || (e.button === 0 && e.altKey)) {
+            setIsPanning(true);
+            panStart.current = { x: e.clientX, y: e.clientY };
+        }
+        else if (e.button === 0 && e.target === canvasRef.current) {
+            dispatch({ type: 'DESELECT_ALL' });
+        }
+    };
+    const handleCanvasMouseMove = (e) => {
+        if (isPanning && panStart.current) {
+            const delta = {
+                x: e.clientX - panStart.current.x,
+                y: e.clientY - panStart.current.y,
+            };
+            panStart.current = { x: e.clientX, y: e.clientY };
+            dispatch({
+                type: 'SET_VIEW_TRANSFORM',
+                transform: {
+                    ...state.viewTransform,
+                    x: state.viewTransform.x + delta.x,
+                    y: state.viewTransform.y + delta.y,
+                },
+            });
+        }
+        if (pendingConnection) {
+            setPendingConnection({
+                ...pendingConnection,
+                currentPosition: { x: e.clientX, y: e.clientY },
+            });
+        }
+    };
+    const handleCanvasMouseUp = () => {
+        setIsPanning(false);
+        panStart.current = null;
+    };
+    // Handle drag and drop from palette
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const handleDrop = (e) => {
+        var _a;
+        e.preventDefault();
+        const nodeType = e.dataTransfer.getData('text/plain');
+        if (!nodeType)
+            return;
+        const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return;
+        const position = screenToGraph({ x: e.clientX - rect.left, y: e.clientY - rect.top }, state.viewTransform);
+        dispatch({ type: 'ADD_NODE', nodeType, position });
+    };
+    // Palette handlers
+    const handlePaletteAddNode = (nodeType) => {
+        const position = { x: 200, y: 200 };
+        dispatch({ type: 'ADD_NODE', nodeType, position });
+    };
+    const handlePaletteDragStart = (nodeType, e) => {
+        e.dataTransfer.setData('text/plain', nodeType);
+    };
+    // Connection handlers
+    const handleStartConnection = (nodeId, portId, portType, position) => {
+        setPendingConnection({
+            nodeId,
+            portId,
+            portType,
+            startPosition: position,
+            currentPosition: position,
+        });
+    };
+    // Export/Import
+    const handleExport = () => {
+        const json = exportGraphToJSON(state.graph);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${state.graph.name}.material.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const handleImport = () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.onchange = async (e) => {
+            var _a;
+            const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (!file)
+                return;
+            const text = await file.text();
+            const graph = importGraphFromJSON(text);
+            if (graph) {
+                dispatch({ type: 'LOAD_GRAPH', graph });
+            }
+        };
+        input.click();
+    };
+    // 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 null;
+            const sourceDef = definitions.get(sourceNode.type);
+            const targetDef = definitions.get(targetNode.type);
+            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)
+                return null;
+            const sourcePort = sourceDef.outputs[sourcePortIndex];
+            const x1 = (sourceNode.position.x + NODE_WIDTH) * state.viewTransform.zoom + state.viewTransform.x;
+            const y1 = (sourceNode.position.y + NODE_HEADER_HEIGHT + sourcePortIndex * PORT_HEIGHT + 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 + NODE_HEADER_HEIGHT + targetPortIndex * PORT_HEIGHT + PORT_HEIGHT / 2) * state.viewTransform.zoom + state.viewTransform.y;
+            const isSelected = state.selectedConnections.includes(conn.id);
+            const controlX = (x1 + x2) / 2;
+            return (jsx("path", { d: `M ${x1} ${y1} C ${controlX} ${y1}, ${controlX} ${y2}, ${x2} ${y2}`, fill: "none", stroke: isSelected ? '#fff' : PORT_TYPE_COLORS[sourcePort.dataType], strokeWidth: isSelected ? 3 : 2, className: styles.connection, onClick: () => dispatch({ type: 'SELECT_CONNECTIONS', connectionIds: [conn.id] }) }, conn.id));
+        });
+    };
+    // Render pending connection
+    const renderPendingConnection = () => {
+        var _a;
+        if (!pendingConnection)
+            return null;
+        const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        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;
+        const y2 = pendingConnection.currentPosition.y - rect.top;
+        const controlX = (x1 + x2) / 2;
+        return (jsx("path", { d: `M ${x1} ${y1} C ${controlX} ${y1}, ${controlX} ${y2}, ${x2} ${y2}`, fill: "none", stroke: "#fff", strokeWidth: 2, strokeDasharray: "5,5", className: styles.pendingConnection }));
+    };
+    // Render grid
+    const renderGrid = () => {
+        if (!state.showGrid)
+            return null;
+        const gridSize = state.gridSize * state.viewTransform.zoom;
+        const offsetX = state.viewTransform.x % gridSize;
+        const offsetY = state.viewTransform.y % gridSize;
+        return (jsx("pattern", { id: "grid", width: gridSize, height: gridSize, patternUnits: "userSpaceOnUse", x: offsetX, y: offsetY, children: jsx("path", { d: `M ${gridSize} 0 L 0 0 0 ${gridSize}`, fill: "none", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }) }));
+    };
+    return (jsxs("div", { className: `${styles.materialEditor} ${styles[theme]} ${className || ''}`, style: { width, height }, children: [showToolbar && (jsx(Toolbar, { canUndo: state.undoStack.length > 0, canRedo: state.redoStack.length > 0, canPaste: state.clipboard !== null, hasSelection: state.selectedNodes.length > 0, autoCompile: state.autoCompile, compiling: state.compiling, showGrid: state.showGrid, snapToGrid: state.snapToGrid, onUndo: () => dispatch({ type: 'UNDO' }), onRedo: () => dispatch({ type: 'REDO' }), onCopy: () => dispatch({ type: 'COPY' }), onCut: () => dispatch({ type: 'CUT' }), onPaste: () => dispatch({ type: 'PASTE', position: { x: 100, y: 100 } }), onDuplicate: () => dispatch({ type: 'DUPLICATE' }), onDelete: () => dispatch({ type: 'DELETE_NODES', nodeIds: state.selectedNodes }), onSelectAll: () => dispatch({ type: 'SELECT_ALL' }), onZoomToFit: () => dispatch({ type: 'ZOOM_TO_FIT' }), onToggleGrid: () => dispatch({ type: 'TOGGLE_GRID' }), onToggleSnap: () => dispatch({ type: 'TOGGLE_SNAP' }), onToggleAutoCompile: () => dispatch({ type: 'TOGGLE_AUTO_COMPILE' }), onCompile: () => {
+                    dispatch({ type: 'COMPILE' });
+                    const shader = compileShader(state.graph, definitions);
+                    dispatch({ type: 'SET_COMPILED_SHADER', shader });
+                }, onNew: () => dispatch({ type: 'NEW_GRAPH' }), onExport: handleExport, onImport: handleImport })), jsxs("div", { className: styles.editorBody, children: [showPalette && (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 })), jsxs("div", { ref: canvasRef, className: styles.graphCanvas, onWheel: handleWheel, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, onDragOver: handleDragOver, onDrop: handleDrop, children: [jsxs("svg", { className: styles.connectionsSvg, children: [jsx("defs", { children: renderGrid() }), state.showGrid && jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" }), renderConnections(), renderPendingConnection()] }), state.graph.nodes.map(node => {
+                                const def = definitions.get(node.type);
+                                if (!def)
+                                    return null;
+                                return (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 && (jsx(PreviewPanel, { shader: state.compiledShader, mode: state.previewMode, compiling: state.compiling, onModeChange: mode => dispatch({ type: 'SET_PREVIEW_MODE', mode }) }))] })] }));
+}
+
+export { NiceMaterialEditor, useMaterialEditor };
+//# sourceMappingURL=NiceMaterialEditor.js.map