@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/material/NiceMaterialEditor.js

@@ -1,793 +1,1252 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceAppShell, NiceIcon, resolveCssColor } from '@nice2dev/ui';
-import { useRef, useState, useMemo, useEffect, useCallback, useReducer } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './MaterialEditor.module.css.js';
-import { MAX_ZOOM, MIN_ZOOM, NODE_WIDTH, NODE_HEADER_HEIGHT, PORT_HEIGHT, PORT_TYPE_COLORS, NODE_CATEGORY_COLORS, NODE_CATEGORY_NAMES, DEFAULT_GRID_SIZE } from './materialEditorTypes.js';
-import { compileShader, screenToGraph, importGraphFromJSON, exportGraphToJSON, updateNodeInGraph, calculateZoomToFit, cloneNode, generateNodeId, removeNodesFromGraph, removeConnectionFromGraph, getNodeDefinition, canConnect, createConnection, addConnectionToGraph, moveNodesInGraph, createNode, addNodeToGraph, createEmptyGraph } from './materialEditorUtils.js';
-import { MATERIAL_NODE_MAP, searchNodes, MATERIAL_NODE_DEFINITIONS } from './materialNodeDefinitions.js';
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   State Reducer
-   ═══════════════════════════════════════════════════════════════════════════ */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceTutorialButton, resolveTutorial, NiceAppShell, NiceIcon, resolveCssColor } from "@nice2dev/ui";
+import { useRef, useState, useMemo, useEffect, useCallback, useReducer } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./MaterialEditor.module.css.js";
+import { MAX_ZOOM, MIN_ZOOM, NODE_WIDTH, NODE_HEADER_HEIGHT, PORT_HEIGHT, PORT_TYPE_COLORS, NODE_CATEGORY_COLORS, NODE_CATEGORY_NAMES, DEFAULT_GRID_SIZE } from "./materialEditorTypes.js";
+import { compileShader, screenToGraph, importGraphFromJSON, exportGraphToJSON, updateNodeInGraph, calculateZoomToFit, cloneNode, generateNodeId, removeNodesFromGraph, removeConnectionFromGraph, getNodeDefinition, canConnect, createConnection, addConnectionToGraph, moveNodesInGraph, createNode, addNodeToGraph, createEmptyGraph } from "./materialEditorUtils.js";
+import { MATERIAL_NODE_MAP, searchNodes, MATERIAL_NODE_DEFINITIONS } from "./materialNodeDefinitions.js";
 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'],
-    };
+  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: [],
-    };
+  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),
-            };
+  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 ? [.../* @__PURE__ */ new Set([...state.selectedNodes, ...action.nodeIds])] : action.nodeIds,
+        selectedConnections: action.additive ? state.selectedConnections : []
+      };
+    }
+    case "SELECT_CONNECTIONS": {
+      return {
+        ...state,
+        selectedConnections: action.additive ? [.../* @__PURE__ */ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 }
         }
-        case 'SELECT_NODES': {
-            return {
-                ...state,
-                selectedNodes: action.additive
-                    ? [...new Set([...state.selectedNodes, ...action.nodeIds])]
-                    : action.nodeIds,
-                selectedConnections: action.additive ? state.selectedConnections : [],
-            };
+      };
+    default:
+      return state;
+  }
+}
+function useMaterialEditor(initialGraph) {
+  const [state, dispatch] = useReducer(materialEditorReducer, initialGraph, createInitialState);
+  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 { t } = useNiceTranslation();
+  const filteredNodes = searchQuery ? searchNodes(searchQuery) : MATERIAL_NODE_DEFINITIONS;
+  const categories = useMemo(() => {
+    const cats = /* @__PURE__ */ 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 /* @__PURE__ */ jsxs("div", { className: styles.palette, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.paletteSearch, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: t("materialEditor.searchNodes", "Search nodes..."),
+        value: searchQuery,
+        onChange: (e) => onSearch(e.target.value),
+        className: styles.searchInput
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.paletteCategories, children: Array.from(categories.entries()).map(([category, nodes]) => /* @__PURE__ */ jsxs("div", { className: styles.paletteCategory, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: styles.categoryHeader,
+          onClick: () => onToggleCategory(category),
+          style: { borderLeftColor: NODE_CATEGORY_COLORS[category] },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.categoryIcon, children: /* @__PURE__ */ jsx(
+              NiceIcon,
+              {
+                name: expandedCategories.includes(category) ? "chevron-down" : "chevron-right",
+                size: 14
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { children: NODE_CATEGORY_NAMES[category] }),
+            /* @__PURE__ */ jsx("span", { className: styles.categoryCount, children: nodes.length })
+          ]
         }
-        case 'SELECT_CONNECTIONS': {
-            return {
-                ...state,
-                selectedConnections: action.additive
-                    ? [...new Set([...state.selectedConnections, ...action.connectionIds])]
-                    : action.connectionIds,
-                selectedNodes: action.additive ? state.selectedNodes : [],
-            };
+      ),
+      expandedCategories.includes(category) && /* @__PURE__ */ jsx("div", { className: styles.categoryNodes, children: nodes.map((nodeDef) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles.paletteNode,
+          draggable: true,
+          onDragStart: (e) => onDragStart(nodeDef.type, e),
+          onDoubleClick: () => onAddNode(nodeDef.type),
+          title: nodeDef.description,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: styles.nodeColor,
+                style: {
+                  backgroundColor: nodeDef.color || NODE_CATEGORY_COLORS[nodeDef.category]
+                }
+              }
+            ),
+            /* @__PURE__ */ 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 /* @__PURE__ */ 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: [
+        /* @__PURE__ */ jsxs("div", { className: styles.nodeHeader, style: { backgroundColor: nodeColor }, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.nodeTitle, children: definition.name }),
+          node.locked && /* @__PURE__ */ jsx("span", { className: styles.lockIcon, children: /* @__PURE__ */ jsx(NiceIcon, { name: "lock", size: 14 }) })
+        ] }),
+        !node.collapsed && /* @__PURE__ */ jsxs("div", { className: styles.nodePorts, children: [
+          /* @__PURE__ */ 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 /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.port,
+                style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `${styles.portHandle} ${styles.inputHandle} ${isConnected ? styles.connected : ""}`,
+                      style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] },
+                      onMouseDown: (e) => handlePortMouseDown(e, port.id, "input")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: styles.portLabel, children: port.name })
+                ]
+              },
+              port.id
+            );
+          }) }),
+          /* @__PURE__ */ 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 /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.port,
+                style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.portLabel, children: port.name }),
+                  /* @__PURE__ */ 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 && /* @__PURE__ */ 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
+}) {
+  const { t } = useNiceTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onNew,
+          title: t("materialEditor.newMaterialCtrlN", "New Material (Ctrl+N)"),
+          "aria-label": t("materialEditor.newMaterial", "New Material"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 16 })
         }
-        case 'SELECT_ALL': {
-            return {
-                ...state,
-                selectedNodes: state.graph.nodes.map((n) => n.id),
-                selectedConnections: state.graph.connections.map((c) => c.id),
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onImport,
+          title: t("materialEditor.importCtrlO", "Import (Ctrl+O)"),
+          "aria-label": t("materialEditor.import", "Import"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "folder", size: 16 })
         }
-        case 'DESELECT_ALL': {
-            return {
-                ...state,
-                selectedNodes: [],
-                selectedConnections: [],
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onExport,
+          title: t("materialEditor.exportCtrlS", "Export (Ctrl+S)"),
+          "aria-label": t("materialEditor.export", "Export"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "save", size: 16 })
         }
-        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 },
-            };
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onUndo,
+          disabled: !canUndo,
+          title: t("materialEditor.undoCtrlZ", "Undo (Ctrl+Z)"),
+          "aria-label": t("materialEditor.undo", "Undo"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-left", size: 16 })
         }
-        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),
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRedo,
+          disabled: !canRedo,
+          title: t("materialEditor.redoCtrlY", "Redo (Ctrl+Y)"),
+          "aria-label": t("materialEditor.redo", "Redo"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-right", size: 16 })
         }
-        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: [],
-            };
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCut,
+          disabled: !hasSelection,
+          title: t("materialEditor.cutCtrlX", "Cut (Ctrl+X)"),
+          "aria-label": t("materialEditor.cut", "Cut"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "scissors", size: 16 })
         }
-        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),
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCopy,
+          disabled: !hasSelection,
+          title: t("materialEditor.copyCtrlC", "Copy (Ctrl+C)"),
+          "aria-label": t("materialEditor.copy", "Copy"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 16 })
         }
-        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: [],
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onPaste,
+          disabled: !canPaste,
+          title: t("materialEditor.pasteCtrlV", "Paste (Ctrl+V)"),
+          "aria-label": t("materialEditor.paste", "Paste"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "download", size: 16 })
         }
-        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: [],
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onDuplicate,
+          disabled: !hasSelection,
+          title: t("materialEditor.duplicateCtrlD", "Duplicate (Ctrl+D)"),
+          "aria-label": t("materialEditor.duplicate", "Duplicate"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 16 })
         }
-        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 };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onDelete,
+          disabled: !hasSelection,
+          title: t("materialEditor.deleteDel", "Delete (Del)"),
+          "aria-label": t("materialEditor.delete", "Delete"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 16 })
         }
-        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);
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onSelectAll,
+          title: t("materialEditor.selectAllCtrlA", "Select All (Ctrl+A)"),
+          "aria-label": t("materialEditor.selectAll", "Select All"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 16 })
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- compiling only stops a second compile; as a dependency its true -> false flip would compile the same graph again, forever
-    }, [state.graph, state.autoCompile]);
-    return { state, dispatch };
-}
-function NodePalette({ searchQuery, expandedCategories, onSearch, onToggleCategory, onAddNode, onDragStart, }) {
-    const { t } = useNiceTranslation();
-    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);
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onZoomToFit,
+          title: t("materialEditor.zoomToFitF", "Zoom to Fit (F)"),
+          "aria-label": t("materialEditor.zoomToFit", "Zoom to Fit"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "search", size: 16 })
         }
-        return cats;
-    }, [filteredNodes]);
-    return (jsxs("div", { className: styles.palette, children: [jsx("div", { className: styles.paletteSearch, children: jsx("input", { type: "text", placeholder: t('materialEditor.searchNodes', '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: jsx(NiceIcon, { name: expandedCategories.includes(category) ? 'chevron-down' : 'chevron-right', size: 14 }) }), 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;
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleGrid,
+          className: showGrid ? styles.active : "",
+          title: t("materialEditor.toggleGridG", "Toggle Grid (G)"),
+          "aria-label": t("materialEditor.toggleGrid", "Toggle Grid"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "hash", size: 16 })
         }
-        e.stopPropagation();
-        if (!selected) {
-            onSelect(node.id, e.shiftKey || e.ctrlKey);
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleSnap,
+          className: snapToGrid ? styles.active : "",
+          title: t("materialEditor.toggleSnapS", "Toggle Snap (S)"),
+          "aria-label": t("materialEditor.toggleSnap", "Toggle Snap"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "target", size: 16 })
         }
-        if (!node.locked) {
-            setIsDragging(true);
-            dragStart.current = { x: e.clientX, y: e.clientY };
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleAutoCompile,
+          className: autoCompile ? styles.active : "",
+          title: t("materialEditor.autoCompile", "Auto Compile"),
+          "aria-label": t("materialEditor.autoCompile", "Auto Compile"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "zap", size: 16 })
         }
-    };
-    useEffect(() => {
-        if (!isDragging) {
-            return;
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCompile,
+          disabled: compiling,
+          title: t("materialEditor.compileF5", "Compile (F5)"),
+          "aria-label": t("materialEditor.compile", "Compile"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: compiling ? "clock" : "play", size: 16 })
         }
-        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: jsx(NiceIcon, { name: "lock", size: 14 }) }))] }), !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, }) {
-    const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onNew, title: t('materialEditor.newMaterialCtrlN', 'New Material (Ctrl+N)'), "aria-label": t('materialEditor.newMaterial', 'New Material'), children: jsx(NiceIcon, { name: "file", size: 16 }) }), jsx("button", { onClick: onImport, title: t('materialEditor.importCtrlO', 'Import (Ctrl+O)'), "aria-label": t('materialEditor.import', 'Import'), children: jsx(NiceIcon, { name: "folder", size: 16 }) }), jsx("button", { onClick: onExport, title: t('materialEditor.exportCtrlS', 'Export (Ctrl+S)'), "aria-label": t('materialEditor.export', 'Export'), children: jsx(NiceIcon, { name: "save", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onUndo, disabled: !canUndo, title: t('materialEditor.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('materialEditor.undo', 'Undo'), children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { onClick: onRedo, disabled: !canRedo, title: t('materialEditor.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('materialEditor.redo', 'Redo'), children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onCut, disabled: !hasSelection, title: t('materialEditor.cutCtrlX', 'Cut (Ctrl+X)'), "aria-label": t('materialEditor.cut', 'Cut'), children: jsx(NiceIcon, { name: "scissors", size: 16 }) }), jsx("button", { onClick: onCopy, disabled: !hasSelection, title: t('materialEditor.copyCtrlC', 'Copy (Ctrl+C)'), "aria-label": t('materialEditor.copy', 'Copy'), children: jsx(NiceIcon, { name: "clipboard", size: 16 }) }), jsx("button", { onClick: onPaste, disabled: !canPaste, title: t('materialEditor.pasteCtrlV', 'Paste (Ctrl+V)'), "aria-label": t('materialEditor.paste', 'Paste'), children: jsx(NiceIcon, { name: "download", size: 16 }) }), jsx("button", { onClick: onDuplicate, disabled: !hasSelection, title: t('materialEditor.duplicateCtrlD', 'Duplicate (Ctrl+D)'), "aria-label": t('materialEditor.duplicate', 'Duplicate'), children: jsx(NiceIcon, { name: "refresh", size: 16 }) }), jsx("button", { onClick: onDelete, disabled: !hasSelection, title: t('materialEditor.deleteDel', 'Delete (Del)'), "aria-label": t('materialEditor.delete', 'Delete'), children: jsx(NiceIcon, { name: "trash", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onSelectAll, title: t('materialEditor.selectAllCtrlA', 'Select All (Ctrl+A)'), "aria-label": t('materialEditor.selectAll', 'Select All'), children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx("button", { onClick: onZoomToFit, title: t('materialEditor.zoomToFitF', 'Zoom to Fit (F)'), "aria-label": t('materialEditor.zoomToFit', 'Zoom to Fit'), children: jsx(NiceIcon, { name: "search", size: 16 }) }), jsx("button", { onClick: onToggleGrid, className: showGrid ? styles.active : '', title: t('materialEditor.toggleGridG', 'Toggle Grid (G)'), "aria-label": t('materialEditor.toggleGrid', 'Toggle Grid'), children: jsx(NiceIcon, { name: "hash", size: 16 }) }), jsx("button", { onClick: onToggleSnap, className: snapToGrid ? styles.active : '', title: t('materialEditor.toggleSnapS', 'Toggle Snap (S)'), "aria-label": t('materialEditor.toggleSnap', 'Toggle Snap'), children: jsx(NiceIcon, { name: "target", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onToggleAutoCompile, className: autoCompile ? styles.active : '', title: t('materialEditor.autoCompile', 'Auto Compile'), "aria-label": t('materialEditor.autoCompile', 'Auto Compile'), children: jsx(NiceIcon, { name: "zap", size: 16 }) }), jsx("button", { onClick: onCompile, disabled: compiling, title: t('materialEditor.compileF5', 'Compile (F5)'), "aria-label": t('materialEditor.compile', 'Compile'), children: jsx(NiceIcon, { name: compiling ? 'clock' : 'play', size: 16 }) })] })] }));
+      )
+    ] })
+  ] });
 }
 function PreviewPanel({ shader, mode, compiling, onModeChange }) {
-    const { t } = useNiceTranslation();
-    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, resolveCssColor('var(--nice-success, #4caf50)', ctx.canvas));
-            gradient.addColorStop(1, resolveCssColor('var(--nice-success-dark, #2e7d32)', ctx.canvas));
-        }
-        else {
-            gradient.addColorStop(0, resolveCssColor('var(--nice-danger, #f44336)', ctx.canvas));
-            gradient.addColorStop(1, resolveCssColor('var(--nice-danger-dark, #c62828)', ctx.canvas));
+  const { t } = useNiceTranslation();
+  const canvasRef = useRef(null);
+  const previewModes = ["sphere", "cube", "plane", "cylinder", "torus"];
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
+    if (shader?.errors.length === 0) {
+      gradient.addColorStop(0, resolveCssColor("var(--nice-success, #4caf50)", ctx.canvas));
+      gradient.addColorStop(1, resolveCssColor("var(--nice-success-dark, #2e7d32)", ctx.canvas));
+    } else {
+      gradient.addColorStop(0, resolveCssColor("var(--nice-danger, #f44336)", ctx.canvas));
+      gradient.addColorStop(1, resolveCssColor("var(--nice-danger-dark, #c62828)", ctx.canvas));
+    }
+    ctx.fillStyle = resolveCssColor("var(--nice-bg, #1e1e1e)", ctx.canvas);
+    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 /* @__PURE__ */ jsxs("div", { className: styles.previewPanel, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.previewHeader, children: [
+      /* @__PURE__ */ jsx("span", { children: t("materialEditor.preview", "Preview") }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: mode,
+          onChange: (e) => onModeChange(e.target.value),
+          className: styles.previewModeSelect,
+          children: previewModes.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m.charAt(0).toUpperCase() + m.slice(1) }, m))
         }
-        ctx.fillStyle = resolveCssColor('var(--nice-bg, #1e1e1e)', ctx.canvas);
-        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: t('materialEditor.preview', '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: t('materialEditor.compiling', '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] }));
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.previewCanvas, children: [
+      compiling && /* @__PURE__ */ jsx("div", { className: styles.previewCompiling, children: t("materialEditor.compiling", "Compiling...") }),
+      /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: 200, height: 200 })
+    ] }),
+    shader?.errors.length ? /* @__PURE__ */ jsx("div", { className: styles.previewErrors, children: shader.errors.slice(0, 3).map((err, i) => /* @__PURE__ */ jsx("div", { className: styles.previewError, children: err.message }, i)) }) : null
+  ] });
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Main Component
-   ═══════════════════════════════════════════════════════════════════════════ */
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const MATERIAL_EDITOR_TOUR = [
-    {
-        target: '.nice-material-editor',
-        titleKey: 'tutorial.materialEditor.intro.title',
-        title: 'Material editor',
-        contentKey: 'tutorial.materialEditor.intro.content',
-        content: 'Build a shader as a node graph: drag nodes from the palette, wire their ports together, edit properties, and preview the compiled material.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-material-editor",
+    titleKey: "tutorial.materialEditor.intro.title",
+    title: "Material editor",
+    contentKey: "tutorial.materialEditor.intro.content",
+    content: "Build a shader as a node graph: drag nodes from the palette, wire their ports together, edit properties, and preview the compiled material.",
+    placement: "auto"
+  }
 ];
-function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, customNodes, textures: _textures, width = '100%', height = '600px', readOnly = false, showToolbar = true, showPalette = true, showProperties: _showProperties = true, showPreview = true, previewMode: _initialPreviewMode = 'sphere', theme = 'dark', className, tutorial, }) {
-    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;
+function NiceMaterialEditor({
+  graph: initialGraph,
+  onGraphChange,
+  onCompile,
+  customNodes,
+  textures: _textures,
+  width = "100%",
+  height = "600px",
+  readOnly = false,
+  showToolbar = true,
+  showPalette = true,
+  showProperties: _showProperties = true,
+  showPreview = true,
+  previewMode: _initialPreviewMode = "sphere",
+  theme = "dark",
+  className,
+  tutorial
+}) {
+  const { state, dispatch } = useMaterialEditor(initialGraph);
+  const canvasRef = useRef(null);
+  const [pendingConnection, setPendingConnection] = useState(null);
+  const definitions = useMemo(() => {
+    const map = new Map(MATERIAL_NODE_MAP);
+    customNodes?.forEach((def) => map.set(def.type, def));
+    return map;
+  }, [customNodes]);
+  useEffect(() => {
+    onGraphChange?.(state.graph);
+  }, [state.graph, onGraphChange]);
+  useEffect(() => {
+    if (state.compiledShader) {
+      onCompile?.(state.compiledShader);
+    }
+  }, [state.compiledShader, onCompile]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (readOnly) {
+        return;
+      }
+      const isCtrl = e.ctrlKey || e.metaKey;
+      if (isCtrl && e.key === "z") {
         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) => {
+        dispatch({ type: "UNDO" });
+      } else if (isCtrl && e.key === "y") {
         e.preventDefault();
-    };
-    const handleDrop = (e) => {
-        var _a;
+        dispatch({ type: "REDO" });
+      } else if (isCtrl && e.key === "c") {
         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 ? 'var(--nice-bg, #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;
+        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 });
         }
-        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: "var(--nice-bg, #fff)", strokeWidth: 2, strokeDasharray: "5,5", className: styles.pendingConnection }));
+      } 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);
+      }
     };
-    // Render grid
-    const renderGrid = () => {
-        if (!state.showGrid) {
-            return null;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [readOnly, state.selectedNodes, dispatch]);
+  const handleWheel = useCallback(
+    (e) => {
+      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 = canvasRef.current?.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]
+  );
+  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
         }
-        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: "var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))", strokeWidth: "1" }) }));
+      });
+    }
+    if (pendingConnection) {
+      setPendingConnection({
+        ...pendingConnection,
+        currentPosition: { x: e.clientX, y: e.clientY }
+      });
+    }
+  };
+  const handleCanvasMouseUp = () => {
+    setIsPanning(false);
+    panStart.current = null;
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const nodeType = e.dataTransfer.getData("text/plain");
+    if (!nodeType) {
+      return;
+    }
+    const rect = canvasRef.current?.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 });
+  };
+  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);
+  };
+  const handleStartConnection = (nodeId, portId, portType, position) => {
+    setPendingConnection({
+      nodeId,
+      portId,
+      portType,
+      startPosition: position,
+      currentPosition: position
+    });
+  };
+  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) => {
+      const file = e.target.files?.[0];
+      if (!file) {
+        return;
+      }
+      const text = await file.text();
+      const graph = importGraphFromJSON(text);
+      if (graph) {
+        dispatch({ type: "LOAD_GRAPH", graph });
+      }
     };
-    return (jsxs("div", { style: { position: 'relative', width, height }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, MATERIAL_EDITOR_TOUR) }) }), jsx(NiceAppShell, { className: `nice-material-editor ${styles.materialEditor} ${styles[theme]} ${className || ''}`, flush: true, toolbar: 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 })) : undefined, sidebar: 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 })) : undefined, rightSidebar: showPreview ? (jsx(PreviewPanel, { shader: state.compiledShader, mode: state.previewMode, compiling: state.compiling, onModeChange: (mode) => dispatch({ type: 'SET_PREVIEW_MODE', mode }) })) : undefined, children: 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));
-                        })] }) })] }));
+    input.click();
+  };
+  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 /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M ${x1} ${y1} C ${controlX} ${y1}, ${controlX} ${y2}, ${x2} ${y2}`,
+          fill: "none",
+          stroke: isSelected ? "var(--nice-bg, #fff)" : PORT_TYPE_COLORS[sourcePort.dataType],
+          strokeWidth: isSelected ? 3 : 2,
+          className: styles.connection,
+          onClick: () => dispatch({ type: "SELECT_CONNECTIONS", connectionIds: [conn.id] })
+        },
+        conn.id
+      );
+    });
+  };
+  const renderPendingConnection = () => {
+    if (!pendingConnection) {
+      return null;
+    }
+    const rect = canvasRef.current?.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 /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${x1} ${y1} C ${controlX} ${y1}, ${controlX} ${y2}, ${x2} ${y2}`,
+        fill: "none",
+        stroke: "var(--nice-bg, #fff)",
+        strokeWidth: 2,
+        strokeDasharray: "5,5",
+        className: styles.pendingConnection
+      }
+    );
+  };
+  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 /* @__PURE__ */ jsx(
+      "pattern",
+      {
+        id: "grid",
+        width: gridSize,
+        height: gridSize,
+        patternUnits: "userSpaceOnUse",
+        x: offsetX,
+        y: offsetY,
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${gridSize} 0 L 0 0 0 ${gridSize}`,
+            fill: "none",
+            stroke: "var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))",
+            strokeWidth: "1"
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width, height }, children: [
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, MATERIAL_EDITOR_TOUR) }) }),
+    /* @__PURE__ */ jsx(
+      NiceAppShell,
+      {
+        className: `nice-material-editor ${styles.materialEditor} ${styles[theme]} ${className || ""}`,
+        flush: true,
+        toolbar: showToolbar ? /* @__PURE__ */ 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
+          }
+        ) : void 0,
+        sidebar: showPalette ? /* @__PURE__ */ 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
+          }
+        ) : void 0,
+        rightSidebar: showPreview ? /* @__PURE__ */ jsx(
+          PreviewPanel,
+          {
+            shader: state.compiledShader,
+            mode: state.previewMode,
+            compiling: state.compiling,
+            onModeChange: (mode) => dispatch({ type: "SET_PREVIEW_MODE", mode })
+          }
+        ) : void 0,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: canvasRef,
+            className: styles.graphCanvas,
+            onWheel: handleWheel,
+            onMouseDown: handleCanvasMouseDown,
+            onMouseMove: handleCanvasMouseMove,
+            onMouseUp: handleCanvasMouseUp,
+            onMouseLeave: handleCanvasMouseUp,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            children: [
+              /* @__PURE__ */ jsxs("svg", { className: styles.connectionsSvg, children: [
+                /* @__PURE__ */ jsx("defs", { children: renderGrid() }),
+                state.showGrid && /* @__PURE__ */ 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 /* @__PURE__ */ jsx(
+                  GraphNode,
+                  {
+                    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
+                );
+              })
+            ]
+          }
+        )
+      }
+    )
+  ] });
 }
-
-export { NiceMaterialEditor, useMaterialEditor };
+export {
+  NiceMaterialEditor,
+  useMaterialEditor
+};