@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/material/materialEditorUtils.js

@@ -1,847 +1,814 @@
-import { MATERIAL_NODE_MAP } from './materialNodeDefinitions.js';
-
-/* ════════════════════════════════════════════════════════════════════════════
-   Material Editor Utilities
-   
-   Graph operations, shader compilation, and helper functions:
-   - Graph manipulation (add/remove/connect nodes)
-   - Topological sorting for compilation order
-   - GLSL shader generation
-   - Import/export functionality
-   - Validation
-   ════════════════════════════════════════════════════════════════════════════ */
-/* ═══════════════════════════════════════════════════════════════════════════
-   ID Generation
-   ═══════════════════════════════════════════════════════════════════════════ */
+import { MATERIAL_NODE_MAP } from "./materialNodeDefinitions.js";
 let nodeIdCounter = 0;
 let connectionIdCounter = 0;
 function generateNodeId() {
-    return `node_${Date.now()}_${++nodeIdCounter}`;
+  return `node_${Date.now()}_${++nodeIdCounter}`;
 }
 function generateConnectionId() {
-    return `conn_${Date.now()}_${++connectionIdCounter}`;
+  return `conn_${Date.now()}_${++connectionIdCounter}`;
 }
 function resetIdCounters() {
-    nodeIdCounter = 0;
-    connectionIdCounter = 0;
-}
-/* ═══════════════════════════════════════════════════════════════════════════
-   Graph Creation
-   ═══════════════════════════════════════════════════════════════════════════ */
-function createEmptyGraph(name = 'New Material') {
-    const outputNode = {
-        id: generateNodeId(),
-        type: 'output_pbr',
-        position: { x: 400, y: 200 },
-        properties: {},
-        inputValues: {},
-    };
-    return {
-        id: `graph_${Date.now()}`,
-        name,
-        nodes: [outputNode],
-        connections: [],
-        outputNodeId: outputNode.id,
-        metadata: {
-            createdAt: new Date(),
-            modifiedAt: new Date(),
-            blendMode: 'opaque',
-            cullMode: 'back',
-            depthTest: true,
-            depthWrite: true,
-        },
-    };
+  nodeIdCounter = 0;
+  connectionIdCounter = 0;
+}
+function createEmptyGraph(name = "New Material") {
+  const outputNode = {
+    id: generateNodeId(),
+    type: "output_pbr",
+    position: { x: 400, y: 200 },
+    properties: {},
+    inputValues: {}
+  };
+  return {
+    id: `graph_${Date.now()}`,
+    name,
+    nodes: [outputNode],
+    connections: [],
+    outputNodeId: outputNode.id,
+    metadata: {
+      createdAt: /* @__PURE__ */ new Date(),
+      modifiedAt: /* @__PURE__ */ new Date(),
+      blendMode: "opaque",
+      cullMode: "back",
+      depthTest: true,
+      depthWrite: true
+    }
+  };
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Node Operations
-   ═══════════════════════════════════════════════════════════════════════════ */
 function createNode(type, position, definitions = MATERIAL_NODE_MAP) {
-    var _a;
-    const definition = definitions.get(type);
-    if (!definition) {
-        return null;
-    }
-    const properties = {};
-    const inputValues = {};
-    // Initialize properties with defaults
-    (_a = definition.properties) === null || _a === void 0 ? void 0 : _a.forEach((prop) => {
-        properties[prop.id] = prop.default;
-    });
-    // Initialize input values with defaults
-    definition.inputs.forEach((input) => {
-        if (input.defaultValue !== undefined) {
-            inputValues[input.id] = input.defaultValue;
-        }
-    });
-    return {
-        id: generateNodeId(),
-        type,
-        position: { ...position },
-        properties,
-        inputValues,
-    };
+  const definition = definitions.get(type);
+  if (!definition) {
+    return null;
+  }
+  const properties = {};
+  const inputValues = {};
+  definition.properties?.forEach((prop) => {
+    properties[prop.id] = prop.default;
+  });
+  definition.inputs.forEach((input) => {
+    if (input.defaultValue !== void 0) {
+      inputValues[input.id] = input.defaultValue;
+    }
+  });
+  return {
+    id: generateNodeId(),
+    type,
+    position: { ...position },
+    properties,
+    inputValues
+  };
 }
 function cloneNode(node) {
-    return {
-        ...node,
-        id: generateNodeId(),
-        position: { x: node.position.x + 20, y: node.position.y + 20 },
-        properties: { ...node.properties },
-        inputValues: { ...node.inputValues },
-        selected: false,
-    };
+  return {
+    ...node,
+    id: generateNodeId(),
+    position: { x: node.position.x + 20, y: node.position.y + 20 },
+    properties: { ...node.properties },
+    inputValues: { ...node.inputValues },
+    selected: false
+  };
 }
 function getNodeDefinition(node, definitions = MATERIAL_NODE_MAP) {
-    return definitions.get(node.type);
+  return definitions.get(node.type);
 }
 function getNodeBounds(node, definition) {
-    const nodeWidth = 180;
-    const headerHeight = 32;
-    const portHeight = 24;
-    const maxPorts = Math.max(definition.inputs.length, definition.outputs.length);
-    const nodeHeight = headerHeight + maxPorts * portHeight + 8;
-    return {
-        x: node.position.x,
-        y: node.position.y,
-        width: nodeWidth,
-        height: nodeHeight,
-    };
+  const nodeWidth = 180;
+  const headerHeight = 32;
+  const portHeight = 24;
+  const maxPorts = Math.max(definition.inputs.length, definition.outputs.length);
+  const nodeHeight = headerHeight + maxPorts * portHeight + 8;
+  return {
+    x: node.position.x,
+    y: node.position.y,
+    width: nodeWidth,
+    height: nodeHeight
+  };
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Connection Operations
-   ═══════════════════════════════════════════════════════════════════════════ */
 function createConnection(sourceNodeId, sourcePortId, targetNodeId, targetPortId) {
-    return {
-        id: generateConnectionId(),
-        sourceNodeId,
-        sourcePortId,
-        targetNodeId,
-        targetPortId,
-    };
+  return {
+    id: generateConnectionId(),
+    sourceNodeId,
+    sourcePortId,
+    targetNodeId,
+    targetPortId
+  };
 }
 function canConnect(sourceNode, sourcePort, targetNode, targetPort, existingConnections) {
-    // Can't connect to self
-    if (sourceNode.id === targetNode.id) {
-        return { valid: false, reason: 'Cannot connect node to itself' };
-    }
-    // Check port directions
-    if (sourcePort.direction !== 'output' || targetPort.direction !== 'input') {
-        return { valid: false, reason: 'Invalid port direction' };
-    }
-    // Check if target port already has a connection
-    const existingConnection = existingConnections.find((conn) => conn.targetNodeId === targetNode.id && conn.targetPortId === targetPort.id);
-    if (existingConnection) {
-        return { valid: false, reason: 'Port already connected' };
-    }
-    // Check type compatibility
-    if (!areTypesCompatible(sourcePort.dataType, targetPort.dataType)) {
-        return {
-            valid: false,
-            reason: `Incompatible types: ${sourcePort.dataType} → ${targetPort.dataType}`,
-        };
-    }
-    return { valid: true };
+  if (sourceNode.id === targetNode.id) {
+    return { valid: false, reason: "Cannot connect node to itself" };
+  }
+  if (sourcePort.direction !== "output" || targetPort.direction !== "input") {
+    return { valid: false, reason: "Invalid port direction" };
+  }
+  const existingConnection = existingConnections.find(
+    (conn) => conn.targetNodeId === targetNode.id && conn.targetPortId === targetPort.id
+  );
+  if (existingConnection) {
+    return { valid: false, reason: "Port already connected" };
+  }
+  if (!areTypesCompatible(sourcePort.dataType, targetPort.dataType)) {
+    return {
+      valid: false,
+      reason: `Incompatible types: ${sourcePort.dataType} → ${targetPort.dataType}`
+    };
+  }
+  return { valid: true };
 }
 function areTypesCompatible(sourceType, targetType) {
-    // 'any' type is compatible with everything
-    if (sourceType === 'any' || targetType === 'any') {
-        return true;
-    }
-    // Same types are compatible
-    if (sourceType === targetType) {
-        return true;
-    }
-    // Float can be used where vec2/vec3/vec4 is expected (broadcast)
-    if (sourceType === 'float' && ['vec2', 'vec3', 'vec4'].includes(targetType)) {
-        return true;
-    }
-    // Color is compatible with vec3/vec4
-    if (sourceType === 'color' && ['vec3', 'vec4'].includes(targetType)) {
-        return true;
-    }
-    if (sourceType === 'vec3' && targetType === 'color') {
-        return true;
-    }
-    return false;
+  if (sourceType === "any" || targetType === "any") {
+    return true;
+  }
+  if (sourceType === targetType) {
+    return true;
+  }
+  if (sourceType === "float" && ["vec2", "vec3", "vec4"].includes(targetType)) {
+    return true;
+  }
+  if (sourceType === "color" && ["vec3", "vec4"].includes(targetType)) {
+    return true;
+  }
+  if (sourceType === "vec3" && targetType === "color") {
+    return true;
+  }
+  return false;
 }
 function getPortConnections(nodeId, portId, direction, connections) {
-    if (direction === 'input') {
-        return connections.filter((conn) => conn.targetNodeId === nodeId && conn.targetPortId === portId);
-    }
-    return connections.filter((conn) => conn.sourceNodeId === nodeId && conn.sourcePortId === portId);
+  if (direction === "input") {
+    return connections.filter(
+      (conn) => conn.targetNodeId === nodeId && conn.targetPortId === portId
+    );
+  }
+  return connections.filter((conn) => conn.sourceNodeId === nodeId && conn.sourcePortId === portId);
 }
 function getNodeConnections(nodeId, connections) {
-    return connections.filter((conn) => conn.sourceNodeId === nodeId || conn.targetNodeId === nodeId);
+  return connections.filter((conn) => conn.sourceNodeId === nodeId || conn.targetNodeId === nodeId);
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Graph Operations
-   ═══════════════════════════════════════════════════════════════════════════ */
 function addNodeToGraph(graph, node) {
-    return {
-        ...graph,
-        nodes: [...graph.nodes, node],
-        metadata: { ...graph.metadata, modifiedAt: new Date() },
-    };
+  return {
+    ...graph,
+    nodes: [...graph.nodes, node],
+    metadata: { ...graph.metadata, modifiedAt: /* @__PURE__ */ new Date() }
+  };
 }
 function removeNodesFromGraph(graph, nodeIds) {
-    const nodeIdSet = new Set(nodeIds);
-    // Don't remove the output node
-    if (nodeIdSet.has(graph.outputNodeId)) {
-        nodeIdSet.delete(graph.outputNodeId);
-    }
-    return {
-        ...graph,
-        nodes: graph.nodes.filter((node) => !nodeIdSet.has(node.id)),
-        connections: graph.connections.filter((conn) => !nodeIdSet.has(conn.sourceNodeId) && !nodeIdSet.has(conn.targetNodeId)),
-        metadata: { ...graph.metadata, modifiedAt: new Date() },
-    };
+  const nodeIdSet = new Set(nodeIds);
+  if (nodeIdSet.has(graph.outputNodeId)) {
+    nodeIdSet.delete(graph.outputNodeId);
+  }
+  return {
+    ...graph,
+    nodes: graph.nodes.filter((node) => !nodeIdSet.has(node.id)),
+    connections: graph.connections.filter(
+      (conn) => !nodeIdSet.has(conn.sourceNodeId) && !nodeIdSet.has(conn.targetNodeId)
+    ),
+    metadata: { ...graph.metadata, modifiedAt: /* @__PURE__ */ new Date() }
+  };
 }
 function addConnectionToGraph(graph, connection) {
-    // Remove existing connection to target port
-    const filteredConnections = graph.connections.filter((conn) => !(conn.targetNodeId === connection.targetNodeId &&
-        conn.targetPortId === connection.targetPortId));
-    return {
-        ...graph,
-        connections: [...filteredConnections, connection],
-        metadata: { ...graph.metadata, modifiedAt: new Date() },
-    };
+  const filteredConnections = graph.connections.filter(
+    (conn) => !(conn.targetNodeId === connection.targetNodeId && conn.targetPortId === connection.targetPortId)
+  );
+  return {
+    ...graph,
+    connections: [...filteredConnections, connection],
+    metadata: { ...graph.metadata, modifiedAt: /* @__PURE__ */ new Date() }
+  };
 }
 function removeConnectionFromGraph(graph, connectionId) {
-    return {
-        ...graph,
-        connections: graph.connections.filter((conn) => conn.id !== connectionId),
-        metadata: { ...graph.metadata, modifiedAt: new Date() },
-    };
+  return {
+    ...graph,
+    connections: graph.connections.filter((conn) => conn.id !== connectionId),
+    metadata: { ...graph.metadata, modifiedAt: /* @__PURE__ */ new Date() }
+  };
 }
 function updateNodeInGraph(graph, nodeId, updates) {
-    return {
-        ...graph,
-        nodes: graph.nodes.map((node) => (node.id === nodeId ? { ...node, ...updates } : node)),
-        metadata: { ...graph.metadata, modifiedAt: new Date() },
-    };
+  return {
+    ...graph,
+    nodes: graph.nodes.map((node) => node.id === nodeId ? { ...node, ...updates } : node),
+    metadata: { ...graph.metadata, modifiedAt: /* @__PURE__ */ new Date() }
+  };
 }
 function moveNodesInGraph(graph, nodeIds, delta) {
-    const nodeIdSet = new Set(nodeIds);
-    return {
-        ...graph,
-        nodes: graph.nodes.map((node) => nodeIdSet.has(node.id)
-            ? { ...node, position: { x: node.position.x + delta.x, y: node.position.y + delta.y } }
-            : node),
-    };
+  const nodeIdSet = new Set(nodeIds);
+  return {
+    ...graph,
+    nodes: graph.nodes.map(
+      (node) => nodeIdSet.has(node.id) ? { ...node, position: { x: node.position.x + delta.x, y: node.position.y + delta.y } } : node
+    )
+  };
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Topological Sort
-   ═══════════════════════════════════════════════════════════════════════════ */
 function topologicalSort(graph) {
-    const sorted = [];
-    const visited = new Set();
-    const visiting = new Set();
-    const nodeMap = new Map(graph.nodes.map((n) => [n.id, n]));
-    function visit(nodeId) {
-        if (visited.has(nodeId)) {
-            return true;
-        }
-        if (visiting.has(nodeId)) {
-            return false;
-        } // Cycle detected
-        visiting.add(nodeId);
-        // Find all nodes that this node depends on (inputs)
-        const inputConnections = graph.connections.filter((conn) => conn.targetNodeId === nodeId);
-        for (const conn of inputConnections) {
-            if (!visit(conn.sourceNodeId)) {
-                return false; // Cycle
-            }
-        }
-        visiting.delete(nodeId);
-        visited.add(nodeId);
-        const node = nodeMap.get(nodeId);
-        if (node) {
-            sorted.push(node);
-        }
-        return true;
+  const sorted = [];
+  const visited = /* @__PURE__ */ new Set();
+  const visiting = /* @__PURE__ */ new Set();
+  const nodeMap = new Map(graph.nodes.map((n) => [n.id, n]));
+  function visit(nodeId) {
+    if (visited.has(nodeId)) {
+      return true;
+    }
+    if (visiting.has(nodeId)) {
+      return false;
+    }
+    visiting.add(nodeId);
+    const inputConnections = graph.connections.filter((conn) => conn.targetNodeId === nodeId);
+    for (const conn of inputConnections) {
+      if (!visit(conn.sourceNodeId)) {
+        return false;
+      }
+    }
+    visiting.delete(nodeId);
+    visited.add(nodeId);
+    const node = nodeMap.get(nodeId);
+    if (node) {
+      sorted.push(node);
     }
-    // Start from output node and work backwards
-    visit(graph.outputNodeId);
-    // Visit any unvisited nodes (disconnected)
-    for (const node of graph.nodes) {
-        if (!visited.has(node.id)) {
-            visit(node.id);
-        }
+    return true;
+  }
+  visit(graph.outputNodeId);
+  for (const node of graph.nodes) {
+    if (!visited.has(node.id)) {
+      visit(node.id);
     }
-    return sorted;
+  }
+  return sorted;
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Shader Compilation
-   ═══════════════════════════════════════════════════════════════════════════ */
 function compileShader(graph, definitions = MATERIAL_NODE_MAP) {
-    const errors = [];
-    const warnings = [];
-    const uniforms = [];
-    const fragmentLines = [];
-    // Validate graph
-    const validationResult = validateGraph(graph, definitions);
-    errors.push(...validationResult.errors);
-    warnings.push(...validationResult.warnings);
-    if (errors.length > 0) {
-        return {
-            vertexShader: generateDefaultVertexShader(),
-            fragmentShader: generateErrorFragmentShader(errors),
-            uniforms,
-            attributes: [],
-            defines: {},
-            errors,
-            warnings,
-        };
-    }
-    // Sort nodes topologically
-    const sortedNodes = topologicalSort(graph);
-    // Generate code for each node
-    const nodeOutputs = new Map();
-    for (const node of sortedNodes) {
-        const definition = definitions.get(node.type);
-        if (!definition) {
-            continue;
-        }
-        const nodeCode = generateNodeCode(node, definition, graph, nodeOutputs);
-        if (nodeCode) {
-            fragmentLines.push(`  // ${definition.name}`);
-            fragmentLines.push(nodeCode);
-            fragmentLines.push('');
-        }
-    }
-    // Generate final fragment shader
-    const fragmentShader = generateFragmentShader(graph, fragmentLines, definitions);
+  const errors = [];
+  const warnings = [];
+  const uniforms = [];
+  const fragmentLines = [];
+  const validationResult = validateGraph(graph, definitions);
+  errors.push(...validationResult.errors);
+  warnings.push(...validationResult.warnings);
+  if (errors.length > 0) {
     return {
-        vertexShader: generateDefaultVertexShader(),
-        fragmentShader,
-        uniforms,
-        attributes: [
-            { name: 'position', type: 'vec3', location: 0 },
-            { name: 'normal', type: 'vec3', location: 1 },
-            { name: 'uv', type: 'vec2', location: 2 },
-        ],
-        defines: {},
-        errors,
-        warnings,
+      vertexShader: generateDefaultVertexShader(),
+      fragmentShader: generateErrorFragmentShader(errors),
+      uniforms,
+      attributes: [],
+      defines: {},
+      errors,
+      warnings
     };
+  }
+  const sortedNodes = topologicalSort(graph);
+  const nodeOutputs = /* @__PURE__ */ new Map();
+  for (const node of sortedNodes) {
+    const definition = definitions.get(node.type);
+    if (!definition) {
+      continue;
+    }
+    const nodeCode = generateNodeCode(node, definition, graph, nodeOutputs);
+    if (nodeCode) {
+      fragmentLines.push(`  // ${definition.name}`);
+      fragmentLines.push(nodeCode);
+      fragmentLines.push("");
+    }
+  }
+  const fragmentShader = generateFragmentShader(graph, fragmentLines, definitions);
+  return {
+    vertexShader: generateDefaultVertexShader(),
+    fragmentShader,
+    uniforms,
+    attributes: [
+      { name: "position", type: "vec3", location: 0 },
+      { name: "normal", type: "vec3", location: 1 },
+      { name: "uv", type: "vec2", location: 2 }
+    ],
+    defines: {},
+    errors,
+    warnings
+  };
 }
 function generateNodeCode(node, definition, graph, nodeOutputs, uniforms) {
-    var _a;
-    const outputs = new Map();
-    const lines = [];
-    // Get input values (either from connections or defaults)
-    const inputValues = {};
-    for (const input of definition.inputs) {
-        const connection = graph.connections.find((conn) => conn.targetNodeId === node.id && conn.targetPortId === input.id);
-        if (connection) {
-            const sourceOutputs = nodeOutputs.get(connection.sourceNodeId);
-            inputValues[input.id] = (sourceOutputs === null || sourceOutputs === void 0 ? void 0 : sourceOutputs.get(connection.sourcePortId)) || '0.0';
-        }
-        else {
-            inputValues[input.id] = formatDefaultValue((_a = node.inputValues[input.id]) !== null && _a !== void 0 ? _a : input.defaultValue, input.dataType);
-        }
-    }
-    // Generate output variable names
-    for (const output of definition.outputs) {
-        const varName = `${node.id}_${output.id}`;
-        outputs.set(output.id, varName);
-    }
-    // Store outputs for downstream nodes
-    nodeOutputs.set(node.id, outputs);
-    // Generate GLSL code based on node type
-    const code = generateGLSLForNode(node, definition, inputValues);
-    if (code) {
-        lines.push(code);
-    }
-    return lines.join('\n');
+  const outputs = /* @__PURE__ */ new Map();
+  const lines = [];
+  const inputValues = {};
+  for (const input of definition.inputs) {
+    const connection = graph.connections.find(
+      (conn) => conn.targetNodeId === node.id && conn.targetPortId === input.id
+    );
+    if (connection) {
+      const sourceOutputs = nodeOutputs.get(connection.sourceNodeId);
+      inputValues[input.id] = sourceOutputs?.get(connection.sourcePortId) || "0.0";
+    } else {
+      inputValues[input.id] = formatDefaultValue(
+        node.inputValues[input.id] ?? input.defaultValue,
+        input.dataType
+      );
+    }
+  }
+  for (const output of definition.outputs) {
+    const varName = `${node.id}_${output.id}`;
+    outputs.set(output.id, varName);
+  }
+  nodeOutputs.set(node.id, outputs);
+  const code = generateGLSLForNode(node, definition, inputValues);
+  if (code) {
+    lines.push(code);
+  }
+  return lines.join("\n");
 }
 function generateGLSLForNode(node, definition, inputs, _outputs, _uniforms) {
-    const nodeId = node.id.replace(/-/g, '_');
-    switch (definition.type) {
-        // Input nodes
-        case 'constant_float': {
-            // `properties` is Record<string, unknown> — narrow before use rather than
-            // assuming the shape a given node type happens to carry.
-            const value = node.properties.value;
-            return `  float ${nodeId}_value = ${typeof value === 'number' ? value.toFixed(4) : '0.0'};`;
-        }
-        case 'constant_color': {
-            const rawColor = node.properties.color;
-            const color = parseColor(typeof rawColor === 'string' ? rawColor : 'var(--nice-bg, #fff)');
-            return `  vec3 ${nodeId}_rgb = vec3(${color.r.toFixed(4)}, ${color.g.toFixed(4)}, ${color.b.toFixed(4)});
-  vec4 ${nodeId}_rgba = vec4(${nodeId}_rgb, 1.0);
-  float ${nodeId}_r = ${nodeId}_rgb.r;
-  float ${nodeId}_g = ${nodeId}_rgb.g;
-  float ${nodeId}_b = ${nodeId}_rgb.b;
+  const nodeId = node.id.replace(/-/g, "_");
+  switch (definition.type) {
+    // Input nodes
+    case "constant_float": {
+      const value = node.properties.value;
+      return `  float ${nodeId}_value = ${typeof value === "number" ? value.toFixed(4) : "0.0"};`;
+    }
+    case "constant_color": {
+      const rawColor = node.properties.color;
+      const color = parseColor(typeof rawColor === "string" ? rawColor : "var(--nice-bg, #fff)");
+      return `  vec3 ${nodeId}_rgb = vec3(${color.r.toFixed(4)}, ${color.g.toFixed(4)}, ${color.b.toFixed(4)});
+  vec4 ${nodeId}_rgba = vec4(${nodeId}_rgb, 1.0);
+  float ${nodeId}_r = ${nodeId}_rgb.r;
+  float ${nodeId}_g = ${nodeId}_rgb.g;
+  float ${nodeId}_b = ${nodeId}_rgb.b;
   float ${nodeId}_a = 1.0;`;
-        }
-        case 'uv':
-            return `  vec2 ${nodeId}_uv = vUv;
-  float ${nodeId}_u = vUv.x;
+    }
+    case "uv":
+      return `  vec2 ${nodeId}_uv = vUv;
+  float ${nodeId}_u = vUv.x;
   float ${nodeId}_v = vUv.y;`;
-        case 'time':
-            return `  float ${nodeId}_time = uTime;
-  float ${nodeId}_sin = sin(uTime);
-  float ${nodeId}_cos = cos(uTime);
+    case "time":
+      return `  float ${nodeId}_time = uTime;
+  float ${nodeId}_sin = sin(uTime);
+  float ${nodeId}_cos = cos(uTime);
   float ${nodeId}_delta = uDeltaTime;`;
-        case 'position':
-            return `  vec3 ${nodeId}_world = vWorldPosition;
-  vec3 ${nodeId}_object = vPosition;
+    case "position":
+      return `  vec3 ${nodeId}_world = vWorldPosition;
+  vec3 ${nodeId}_object = vPosition;
   vec3 ${nodeId}_view = vViewPosition;`;
-        case 'normal':
-            return `  vec3 ${nodeId}_world = normalize(vWorldNormal);
-  vec3 ${nodeId}_object = normalize(vNormal);
-  vec3 ${nodeId}_view = normalize(vViewNormal);
-  vec3 ${nodeId}_tangent = normalize(vTangent);
+    case "normal":
+      return `  vec3 ${nodeId}_world = normalize(vWorldNormal);
+  vec3 ${nodeId}_object = normalize(vNormal);
+  vec3 ${nodeId}_view = normalize(vViewNormal);
+  vec3 ${nodeId}_tangent = normalize(vTangent);
   vec3 ${nodeId}_bitangent = normalize(vBitangent);`;
-        // Math nodes
-        case 'add':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} + ${inputs.b};`;
-        case 'subtract':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} - ${inputs.b};`;
-        case 'multiply':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} * ${inputs.b};`;
-        case 'divide':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} / max(${inputs.b}, 0.0001);`;
-        case 'sin':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = sin(${inputs.value});`;
-        case 'cos':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = cos(${inputs.value});`;
-        case 'abs':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = abs(${inputs.value});`;
-        case 'floor':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = floor(${inputs.value});`;
-        case 'fract':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = fract(${inputs.value});`;
-        case 'min':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = min(${inputs.a}, ${inputs.b});`;
-        case 'max':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = max(${inputs.a}, ${inputs.b});`;
-        // Vector nodes
-        case 'combine_vec2':
-            return `  vec2 ${nodeId}_vector = vec2(${inputs.x}, ${inputs.y});`;
-        case 'combine_vec3':
-            return `  vec3 ${nodeId}_vector = vec3(${inputs.x}, ${inputs.y}, ${inputs.z});`;
-        case 'combine_vec4':
-            return `  vec4 ${nodeId}_vector = vec4(${inputs.x}, ${inputs.y}, ${inputs.z}, ${inputs.w});`;
-        case 'split_vec3':
-            return `  float ${nodeId}_x = ${inputs.vector}.x;
-  float ${nodeId}_y = ${inputs.vector}.y;
+    // Math nodes
+    case "add":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} + ${inputs.b};`;
+    case "subtract":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} - ${inputs.b};`;
+    case "multiply":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} * ${inputs.b};`;
+    case "divide":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = ${inputs.a} / max(${inputs.b}, 0.0001);`;
+    case "sin":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = sin(${inputs.value});`;
+    case "cos":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = cos(${inputs.value});`;
+    case "abs":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = abs(${inputs.value});`;
+    case "floor":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = floor(${inputs.value});`;
+    case "fract":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = fract(${inputs.value});`;
+    case "min":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = min(${inputs.a}, ${inputs.b});`;
+    case "max":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = max(${inputs.a}, ${inputs.b});`;
+    // Vector nodes
+    case "combine_vec2":
+      return `  vec2 ${nodeId}_vector = vec2(${inputs.x}, ${inputs.y});`;
+    case "combine_vec3":
+      return `  vec3 ${nodeId}_vector = vec3(${inputs.x}, ${inputs.y}, ${inputs.z});`;
+    case "combine_vec4":
+      return `  vec4 ${nodeId}_vector = vec4(${inputs.x}, ${inputs.y}, ${inputs.z}, ${inputs.w});`;
+    case "split_vec3":
+      return `  float ${nodeId}_x = ${inputs.vector}.x;
+  float ${nodeId}_y = ${inputs.vector}.y;
   float ${nodeId}_z = ${inputs.vector}.z;`;
-        case 'normalize':
-            return `  vec3 ${nodeId}_result = normalize(${inputs.vector});`;
-        case 'dot':
-            return `  float ${nodeId}_result = dot(${inputs.a}, ${inputs.b});`;
-        case 'cross':
-            return `  vec3 ${nodeId}_result = cross(${inputs.a}, ${inputs.b});`;
-        // Utility nodes
-        case 'lerp':
-            return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = mix(${inputs.a}, ${inputs.b}, ${inputs.t});`;
-        case 'clamp':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = clamp(${inputs.value}, ${inputs.min}, ${inputs.max});`;
-        case 'saturate':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = clamp(${inputs.value}, 0.0, 1.0);`;
-        case 'smoothstep':
-            return `  float ${nodeId}_result = smoothstep(${inputs.edge0}, ${inputs.edge1}, ${inputs.x});`;
-        case 'one_minus':
-            return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = 1.0 - ${inputs.value};`;
-        case 'fresnel':
-            return `  float ${nodeId}_result = pow(1.0 - max(dot(${inputs.normal}, ${inputs.viewDir}), 0.0), ${inputs.power});`;
-        // Procedural nodes
-        case 'noise_perlin':
-            return `  float ${nodeId}_value = perlinNoise(${inputs.uv} * ${inputs.scale});`;
-        case 'checker':
-            return `  float ${nodeId}_value = mod(floor(${inputs.uv}.x * ${inputs.scale}) + floor(${inputs.uv}.y * ${inputs.scale}), 2.0);
+    case "normalize":
+      return `  vec3 ${nodeId}_result = normalize(${inputs.vector});`;
+    case "dot":
+      return `  float ${nodeId}_result = dot(${inputs.a}, ${inputs.b});`;
+    case "cross":
+      return `  vec3 ${nodeId}_result = cross(${inputs.a}, ${inputs.b});`;
+    // Utility nodes
+    case "lerp":
+      return `  ${getTypeForAny(inputs.a)} ${nodeId}_result = mix(${inputs.a}, ${inputs.b}, ${inputs.t});`;
+    case "clamp":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = clamp(${inputs.value}, ${inputs.min}, ${inputs.max});`;
+    case "saturate":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = clamp(${inputs.value}, 0.0, 1.0);`;
+    case "smoothstep":
+      return `  float ${nodeId}_result = smoothstep(${inputs.edge0}, ${inputs.edge1}, ${inputs.x});`;
+    case "one_minus":
+      return `  ${getTypeForAny(inputs.value)} ${nodeId}_result = 1.0 - ${inputs.value};`;
+    case "fresnel":
+      return `  float ${nodeId}_result = pow(1.0 - max(dot(${inputs.normal}, ${inputs.viewDir}), 0.0), ${inputs.power});`;
+    // Procedural nodes
+    case "noise_perlin":
+      return `  float ${nodeId}_value = perlinNoise(${inputs.uv} * ${inputs.scale});`;
+    case "checker":
+      return `  float ${nodeId}_value = mod(floor(${inputs.uv}.x * ${inputs.scale}) + floor(${inputs.uv}.y * ${inputs.scale}), 2.0);
   vec3 ${nodeId}_color = mix(${inputs.colorA}, ${inputs.colorB}, ${nodeId}_value);`;
-        case 'gradient_linear': {
-            const dir = node.properties.direction || 'horizontal';
-            const gradientCoord = dir === 'horizontal' ? 'x' : dir === 'vertical' ? 'y' : '(x + y) * 0.5';
-            return `  float ${nodeId}_value = ${inputs.uv}.${gradientCoord === '(x + y) * 0.5' ? gradientCoord : gradientCoord};`;
-        }
-        case 'gradient_radial':
-            return `  float ${nodeId}_value = 1.0 - clamp(distance(${inputs.uv}, ${inputs.center}) / ${inputs.radius}, 0.0, 1.0);`;
-        // Color nodes
-        case 'invert':
-            return `  vec3 ${nodeId}_result = vec3(1.0) - ${inputs.color};`;
-        case 'grayscale':
-            return `  float ${nodeId}_gray = dot(${inputs.color}, vec3(0.299, 0.587, 0.114));
+    case "gradient_linear": {
+      const dir = node.properties.direction || "horizontal";
+      const gradientCoord = dir === "horizontal" ? "x" : dir === "vertical" ? "y" : "(x + y) * 0.5";
+      return `  float ${nodeId}_value = ${inputs.uv}.${gradientCoord === "(x + y) * 0.5" ? gradientCoord : gradientCoord};`;
+    }
+    case "gradient_radial":
+      return `  float ${nodeId}_value = 1.0 - clamp(distance(${inputs.uv}, ${inputs.center}) / ${inputs.radius}, 0.0, 1.0);`;
+    // Color nodes
+    case "invert":
+      return `  vec3 ${nodeId}_result = vec3(1.0) - ${inputs.color};`;
+    case "grayscale":
+      return `  float ${nodeId}_gray = dot(${inputs.color}, vec3(0.299, 0.587, 0.114));
   vec3 ${nodeId}_rgb = vec3(${nodeId}_gray);`;
-        case 'blend': {
-            const rawMode = node.properties.mode;
-            const mode = typeof rawMode === 'string' ? rawMode : 'normal';
-            const blendCode = generateBlendMode(mode, inputs.base, inputs.blend);
-            return `  vec3 ${nodeId}_result = mix(${inputs.base}, ${blendCode}, ${inputs.factor});`;
-        }
-        default:
-            return `  // Unsupported node type: ${definition.type}`;
+    case "blend": {
+      const rawMode = node.properties.mode;
+      const mode = typeof rawMode === "string" ? rawMode : "normal";
+      const blendCode = generateBlendMode(mode, inputs.base, inputs.blend);
+      return `  vec3 ${nodeId}_result = mix(${inputs.base}, ${blendCode}, ${inputs.factor});`;
     }
+    default:
+      return `  // Unsupported node type: ${definition.type}`;
+  }
 }
 function generateBlendMode(mode, base, blend) {
-    switch (mode) {
-        case 'multiply':
-            return `${base} * ${blend}`;
-        case 'screen':
-            return `1.0 - (1.0 - ${base}) * (1.0 - ${blend})`;
-        case 'overlay':
-            return `mix(2.0 * ${base} * ${blend}, 1.0 - 2.0 * (1.0 - ${base}) * (1.0 - ${blend}), step(0.5, ${base}))`;
-        case 'add':
-            return `min(${base} + ${blend}, vec3(1.0))`;
-        case 'subtract':
-            return `max(${base} - ${blend}, vec3(0.0))`;
-        case 'difference':
-            return `abs(${base} - ${blend})`;
-        default:
-            return blend;
-    }
+  switch (mode) {
+    case "multiply":
+      return `${base} * ${blend}`;
+    case "screen":
+      return `1.0 - (1.0 - ${base}) * (1.0 - ${blend})`;
+    case "overlay":
+      return `mix(2.0 * ${base} * ${blend}, 1.0 - 2.0 * (1.0 - ${base}) * (1.0 - ${blend}), step(0.5, ${base}))`;
+    case "add":
+      return `min(${base} + ${blend}, vec3(1.0))`;
+    case "subtract":
+      return `max(${base} - ${blend}, vec3(0.0))`;
+    case "difference":
+      return `abs(${base} - ${blend})`;
+    default:
+      return blend;
+  }
 }
 function getTypeForAny(value) {
-    if (value.startsWith('vec4')) {
-        return 'vec4';
-    }
-    if (value.startsWith('vec3')) {
-        return 'vec3';
-    }
-    if (value.startsWith('vec2')) {
-        return 'vec2';
-    }
-    return 'float';
+  if (value.startsWith("vec4")) {
+    return "vec4";
+  }
+  if (value.startsWith("vec3")) {
+    return "vec3";
+  }
+  if (value.startsWith("vec2")) {
+    return "vec2";
+  }
+  return "float";
 }
 function formatDefaultValue(value, dataType) {
-    if (value === undefined || value === null) {
-        switch (dataType) {
-            case 'float':
-                return '0.0';
-            case 'vec2':
-                return 'vec2(0.0)';
-            case 'vec3':
-                return 'vec3(0.0)';
-            case 'vec4':
-                return 'vec4(0.0)';
-            case 'bool':
-                return 'false';
-            case 'int':
-                return '0';
-            default:
-                return '0.0';
-        }
-    }
-    if (Array.isArray(value)) {
-        if (value.length === 2) {
-            return `vec2(${value[0].toFixed(4)}, ${value[1].toFixed(4)})`;
-        }
-        if (value.length === 3) {
-            return `vec3(${value[0].toFixed(4)}, ${value[1].toFixed(4)}, ${value[2].toFixed(4)})`;
-        }
-        if (value.length === 4) {
-            return `vec4(${value[0].toFixed(4)}, ${value[1].toFixed(4)}, ${value[2].toFixed(4)}, ${value[3].toFixed(4)})`;
-        }
-    }
-    if (typeof value === 'number') {
-        return value.toFixed(4);
-    }
-    if (typeof value === 'boolean') {
-        return value ? 'true' : 'false';
-    }
-    return String(value);
+  if (value === void 0 || value === null) {
+    switch (dataType) {
+      case "float":
+        return "0.0";
+      case "vec2":
+        return "vec2(0.0)";
+      case "vec3":
+        return "vec3(0.0)";
+      case "vec4":
+        return "vec4(0.0)";
+      case "bool":
+        return "false";
+      case "int":
+        return "0";
+      default:
+        return "0.0";
+    }
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 2) {
+      return `vec2(${value[0].toFixed(4)}, ${value[1].toFixed(4)})`;
+    }
+    if (value.length === 3) {
+      return `vec3(${value[0].toFixed(4)}, ${value[1].toFixed(4)}, ${value[2].toFixed(4)})`;
+    }
+    if (value.length === 4) {
+      return `vec4(${value[0].toFixed(4)}, ${value[1].toFixed(4)}, ${value[2].toFixed(4)}, ${value[3].toFixed(4)})`;
+    }
+  }
+  if (typeof value === "number") {
+    return value.toFixed(4);
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  return String(value);
 }
 function parseColor(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16) / 255,
-            g: parseInt(result[2], 16) / 255,
-            b: parseInt(result[3], 16) / 255,
-        }
-        : { r: 1, g: 1, b: 1 };
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16) / 255,
+    g: parseInt(result[2], 16) / 255,
+    b: parseInt(result[3], 16) / 255
+  } : { r: 1, g: 1, b: 1 };
 }
 function generateDefaultVertexShader() {
-    return `#version 300 es
-precision highp float;
-
-in vec3 position;
-in vec3 normal;
-in vec2 uv;
-in vec3 tangent;
-
-uniform mat4 modelMatrix;
-uniform mat4 viewMatrix;
-uniform mat4 projectionMatrix;
-uniform mat3 normalMatrix;
-
-out vec3 vPosition;
-out vec3 vNormal;
-out vec2 vUv;
-out vec3 vWorldPosition;
-out vec3 vWorldNormal;
-out vec3 vViewPosition;
-out vec3 vViewNormal;
-out vec3 vTangent;
-out vec3 vBitangent;
-
-void main() {
-  vPosition = position;
-  vNormal = normal;
-  vUv = uv;
-  
-  vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-  vWorldPosition = worldPosition.xyz;
-  vWorldNormal = normalMatrix * normal;
-  
-  vec4 viewPosition = viewMatrix * worldPosition;
-  vViewPosition = viewPosition.xyz;
-  vViewNormal = mat3(viewMatrix) * vWorldNormal;
-  
-  vTangent = normalMatrix * tangent;
-  vBitangent = cross(vWorldNormal, vTangent);
-  
-  gl_Position = projectionMatrix * viewPosition;
+  return `#version 300 es
+precision highp float;
+
+in vec3 position;
+in vec3 normal;
+in vec2 uv;
+in vec3 tangent;
+
+uniform mat4 modelMatrix;
+uniform mat4 viewMatrix;
+uniform mat4 projectionMatrix;
+uniform mat3 normalMatrix;
+
+out vec3 vPosition;
+out vec3 vNormal;
+out vec2 vUv;
+out vec3 vWorldPosition;
+out vec3 vWorldNormal;
+out vec3 vViewPosition;
+out vec3 vViewNormal;
+out vec3 vTangent;
+out vec3 vBitangent;
+
+void main() {
+  vPosition = position;
+  vNormal = normal;
+  vUv = uv;
+  
+  vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+  vWorldPosition = worldPosition.xyz;
+  vWorldNormal = normalMatrix * normal;
+  
+  vec4 viewPosition = viewMatrix * worldPosition;
+  vViewPosition = viewPosition.xyz;
+  vViewNormal = mat3(viewMatrix) * vWorldNormal;
+  
+  vTangent = normalMatrix * tangent;
+  vBitangent = cross(vWorldNormal, vTangent);
+  
+  gl_Position = projectionMatrix * viewPosition;
 }`;
 }
 function generateFragmentShader(graph, nodeCode, definitions) {
-    const outputNode = graph.nodes.find((n) => n.id === graph.outputNodeId);
-    outputNode ? definitions.get(outputNode.type) : null;
-    return `#version 300 es
-precision highp float;
-
-in vec3 vPosition;
-in vec3 vNormal;
-in vec2 vUv;
-in vec3 vWorldPosition;
-in vec3 vWorldNormal;
-in vec3 vViewPosition;
-in vec3 vViewNormal;
-in vec3 vTangent;
-in vec3 vBitangent;
-
-uniform float uTime;
-uniform float uDeltaTime;
-uniform vec3 uCameraPosition;
-uniform vec2 uResolution;
-
-out vec4 fragColor;
-
-// Noise functions
-float hash(vec2 p) {
-  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
-}
-
-float perlinNoise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  f = f * f * (3.0 - 2.0 * f);
-  
-  float a = hash(i);
-  float b = hash(i + vec2(1.0, 0.0));
-  float c = hash(i + vec2(0.0, 1.0));
-  float d = hash(i + vec2(1.0, 1.0));
-  
-  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-}
-
-void main() {
-${nodeCode.join('\n')}
-
-  // Output
-  ${generateOutputAssignment(graph)}
+  const outputNode = graph.nodes.find((n) => n.id === graph.outputNodeId);
+  outputNode ? definitions.get(outputNode.type) : null;
+  return `#version 300 es
+precision highp float;
+
+in vec3 vPosition;
+in vec3 vNormal;
+in vec2 vUv;
+in vec3 vWorldPosition;
+in vec3 vWorldNormal;
+in vec3 vViewPosition;
+in vec3 vViewNormal;
+in vec3 vTangent;
+in vec3 vBitangent;
+
+uniform float uTime;
+uniform float uDeltaTime;
+uniform vec3 uCameraPosition;
+uniform vec2 uResolution;
+
+out vec4 fragColor;
+
+// Noise functions
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float perlinNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+void main() {
+${nodeCode.join("\n")}
+
+  // Output
+  ${generateOutputAssignment(graph)}
 }`;
 }
 function generateOutputAssignment(graph, _definitions) {
-    const outputNode = graph.nodes.find((n) => n.id === graph.outputNodeId);
-    if (!outputNode) {
-        return 'fragColor = vec4(1.0, 0.0, 1.0, 1.0); // Error: no output node';
-    }
-    outputNode.id.replace(/-/g, '_');
-    // Find what's connected to the output
-    const albedoConn = graph.connections.find((c) => c.targetNodeId === outputNode.id && c.targetPortId === 'albedo');
-    const colorConn = graph.connections.find((c) => c.targetNodeId === outputNode.id && c.targetPortId === 'color');
-    if (outputNode.type === 'output_pbr') {
-        const albedo = albedoConn
-            ? `${albedoConn.sourceNodeId.replace(/-/g, '_')}_${albedoConn.sourcePortId}`
-            : 'vec3(1.0)';
-        return `fragColor = vec4(${albedo}, 1.0);`;
-    }
-    if (outputNode.type === 'output_unlit') {
-        const color = colorConn
-            ? `${colorConn.sourceNodeId.replace(/-/g, '_')}_${colorConn.sourcePortId}`
-            : 'vec3(1.0)';
-        return `fragColor = vec4(${color}, 1.0);`;
-    }
-    return 'fragColor = vec4(1.0);';
+  const outputNode = graph.nodes.find((n) => n.id === graph.outputNodeId);
+  if (!outputNode) {
+    return "fragColor = vec4(1.0, 0.0, 1.0, 1.0); // Error: no output node";
+  }
+  outputNode.id.replace(/-/g, "_");
+  const albedoConn = graph.connections.find(
+    (c) => c.targetNodeId === outputNode.id && c.targetPortId === "albedo"
+  );
+  const colorConn = graph.connections.find(
+    (c) => c.targetNodeId === outputNode.id && c.targetPortId === "color"
+  );
+  if (outputNode.type === "output_pbr") {
+    const albedo = albedoConn ? `${albedoConn.sourceNodeId.replace(/-/g, "_")}_${albedoConn.sourcePortId}` : "vec3(1.0)";
+    return `fragColor = vec4(${albedo}, 1.0);`;
+  }
+  if (outputNode.type === "output_unlit") {
+    const color = colorConn ? `${colorConn.sourceNodeId.replace(/-/g, "_")}_${colorConn.sourcePortId}` : "vec3(1.0)";
+    return `fragColor = vec4(${color}, 1.0);`;
+  }
+  return "fragColor = vec4(1.0);";
 }
 function generateErrorFragmentShader(errors) {
-    return `#version 300 es
-precision highp float;
-
-out vec4 fragColor;
-
-void main() {
-  // Compilation errors: ${errors.length}
-  // ${errors.map((e) => e.message).join('\n  // ')}
-  fragColor = vec4(1.0, 0.0, 1.0, 1.0);
+  return `#version 300 es
+precision highp float;
+
+out vec4 fragColor;
+
+void main() {
+  // Compilation errors: ${errors.length}
+  // ${errors.map((e) => e.message).join("\n  // ")}
+  fragColor = vec4(1.0, 0.0, 1.0, 1.0);
 }`;
 }
 function validateGraph(graph, definitions = MATERIAL_NODE_MAP) {
-    const errors = [];
-    const warnings = [];
-    // Check for output node
-    if (!graph.outputNodeId) {
-        errors.push({ nodeId: '', message: 'No output node defined' });
-    }
-    const outputNode = graph.nodes.find((n) => n.id === graph.outputNodeId);
-    if (!outputNode) {
-        errors.push({ nodeId: graph.outputNodeId, message: 'Output node not found in graph' });
-    }
-    // Validate each node
-    for (const node of graph.nodes) {
-        const definition = definitions.get(node.type);
-        if (!definition) {
-            errors.push({ nodeId: node.id, message: `Unknown node type: ${node.type}` });
-            continue;
-        }
-        // Check required inputs
-        for (const input of definition.inputs) {
-            const hasConnection = graph.connections.some((conn) => conn.targetNodeId === node.id && conn.targetPortId === input.id);
-            const hasDefault = input.defaultValue !== undefined || node.inputValues[input.id] !== undefined;
-            if (!hasConnection && !hasDefault) {
-                warnings.push({ nodeId: node.id, message: `Input '${input.name}' is not connected` });
-            }
-        }
-    }
-    // Check for cycles
-    const hasCycle = detectCycle(graph);
-    if (hasCycle) {
-        errors.push({ nodeId: '', message: 'Graph contains a cycle' });
-    }
-    // Check connections
-    for (const conn of graph.connections) {
-        const sourceNode = graph.nodes.find((n) => n.id === conn.sourceNodeId);
-        const targetNode = graph.nodes.find((n) => n.id === conn.targetNodeId);
-        if (!sourceNode) {
-            errors.push({ nodeId: conn.sourceNodeId, message: 'Source node not found' });
-        }
-        if (!targetNode) {
-            errors.push({ nodeId: conn.targetNodeId, message: 'Target node not found' });
-        }
+  const errors = [];
+  const warnings = [];
+  if (!graph.outputNodeId) {
+    errors.push({ nodeId: "", message: "No output node defined" });
+  }
+  const outputNode = graph.nodes.find((n) => n.id === graph.outputNodeId);
+  if (!outputNode) {
+    errors.push({ nodeId: graph.outputNodeId, message: "Output node not found in graph" });
+  }
+  for (const node of graph.nodes) {
+    const definition = definitions.get(node.type);
+    if (!definition) {
+      errors.push({ nodeId: node.id, message: `Unknown node type: ${node.type}` });
+      continue;
     }
-    return {
-        valid: errors.length === 0,
-        errors,
-        warnings,
-    };
+    for (const input of definition.inputs) {
+      const hasConnection = graph.connections.some(
+        (conn) => conn.targetNodeId === node.id && conn.targetPortId === input.id
+      );
+      const hasDefault = input.defaultValue !== void 0 || node.inputValues[input.id] !== void 0;
+      if (!hasConnection && !hasDefault) {
+        warnings.push({ nodeId: node.id, message: `Input '${input.name}' is not connected` });
+      }
+    }
+  }
+  const hasCycle = detectCycle(graph);
+  if (hasCycle) {
+    errors.push({ nodeId: "", message: "Graph contains a cycle" });
+  }
+  for (const conn of graph.connections) {
+    const sourceNode = graph.nodes.find((n) => n.id === conn.sourceNodeId);
+    const targetNode = graph.nodes.find((n) => n.id === conn.targetNodeId);
+    if (!sourceNode) {
+      errors.push({ nodeId: conn.sourceNodeId, message: "Source node not found" });
+    }
+    if (!targetNode) {
+      errors.push({ nodeId: conn.targetNodeId, message: "Target node not found" });
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings
+  };
 }
 function detectCycle(graph) {
-    const visited = new Set();
-    const visiting = new Set();
-    function dfs(nodeId) {
-        if (visiting.has(nodeId)) {
-            return true;
-        }
-        if (visited.has(nodeId)) {
-            return false;
-        }
-        visiting.add(nodeId);
-        const outgoingConnections = graph.connections.filter((conn) => conn.sourceNodeId === nodeId);
-        for (const conn of outgoingConnections) {
-            if (dfs(conn.targetNodeId)) {
-                return true;
-            }
-        }
-        visiting.delete(nodeId);
-        visited.add(nodeId);
-        return false;
-    }
-    for (const node of graph.nodes) {
-        if (dfs(node.id)) {
-            return true;
-        }
+  const visited = /* @__PURE__ */ new Set();
+  const visiting = /* @__PURE__ */ new Set();
+  function dfs(nodeId) {
+    if (visiting.has(nodeId)) {
+      return true;
+    }
+    if (visited.has(nodeId)) {
+      return false;
+    }
+    visiting.add(nodeId);
+    const outgoingConnections = graph.connections.filter((conn) => conn.sourceNodeId === nodeId);
+    for (const conn of outgoingConnections) {
+      if (dfs(conn.targetNodeId)) {
+        return true;
+      }
     }
+    visiting.delete(nodeId);
+    visited.add(nodeId);
     return false;
+  }
+  for (const node of graph.nodes) {
+    if (dfs(node.id)) {
+      return true;
+    }
+  }
+  return false;
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   View Utilities
-   ═══════════════════════════════════════════════════════════════════════════ */
 function screenToGraph(screenPoint, viewTransform) {
-    return {
-        x: (screenPoint.x - viewTransform.x) / viewTransform.zoom,
-        y: (screenPoint.y - viewTransform.y) / viewTransform.zoom,
-    };
+  return {
+    x: (screenPoint.x - viewTransform.x) / viewTransform.zoom,
+    y: (screenPoint.y - viewTransform.y) / viewTransform.zoom
+  };
 }
 function graphToScreen(graphPoint, viewTransform) {
-    return {
-        x: graphPoint.x * viewTransform.zoom + viewTransform.x,
-        y: graphPoint.y * viewTransform.zoom + viewTransform.y,
-    };
+  return {
+    x: graphPoint.x * viewTransform.zoom + viewTransform.x,
+    y: graphPoint.y * viewTransform.zoom + viewTransform.y
+  };
 }
 function calculateBoundingBox(nodes) {
-    if (nodes.length === 0) {
-        return null;
-    }
-    let minX = Infinity, minY = Infinity;
-    let maxX = -Infinity, maxY = -Infinity;
-    for (const node of nodes) {
-        minX = Math.min(minX, node.position.x);
-        minY = Math.min(minY, node.position.y);
-        maxX = Math.max(maxX, node.position.x + 180);
-        maxY = Math.max(maxY, node.position.y + 120);
-    }
-    return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY,
-    };
+  if (nodes.length === 0) {
+    return null;
+  }
+  let minX = Infinity, minY = Infinity;
+  let maxX = -Infinity, maxY = -Infinity;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + 180);
+    maxY = Math.max(maxY, node.position.y + 120);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
 }
 function calculateZoomToFit(nodes, viewportWidth, viewportHeight, padding = 50) {
-    const bbox = calculateBoundingBox(nodes);
-    if (!bbox) {
-        return { x: 0, y: 0, zoom: 1 };
-    }
-    const scaleX = (viewportWidth - padding * 2) / bbox.width;
-    const scaleY = (viewportHeight - padding * 2) / bbox.height;
-    const zoom = Math.min(scaleX, scaleY, 1);
-    const centerX = bbox.x + bbox.width / 2;
-    const centerY = bbox.y + bbox.height / 2;
-    return {
-        x: viewportWidth / 2 - centerX * zoom,
-        y: viewportHeight / 2 - centerY * zoom,
-        zoom,
-    };
+  const bbox = calculateBoundingBox(nodes);
+  if (!bbox) {
+    return { x: 0, y: 0, zoom: 1 };
+  }
+  const scaleX = (viewportWidth - padding * 2) / bbox.width;
+  const scaleY = (viewportHeight - padding * 2) / bbox.height;
+  const zoom = Math.min(scaleX, scaleY, 1);
+  const centerX = bbox.x + bbox.width / 2;
+  const centerY = bbox.y + bbox.height / 2;
+  return {
+    x: viewportWidth / 2 - centerX * zoom,
+    y: viewportHeight / 2 - centerY * zoom,
+    zoom
+  };
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Import/Export
-   ═══════════════════════════════════════════════════════════════════════════ */
 function exportGraphToJSON(graph) {
-    return JSON.stringify(graph, null, 2);
+  return JSON.stringify(graph, null, 2);
 }
 function importGraphFromJSON(json) {
-    try {
-        const parsed = JSON.parse(json);
-        // Basic validation
-        if (!parsed.id || !parsed.nodes || !parsed.connections) {
-            return null;
-        }
-        return parsed;
-    }
-    catch (_a) {
-        return null;
+  try {
+    const parsed = JSON.parse(json);
+    if (!parsed.id || !parsed.nodes || !parsed.connections) {
+      return null;
     }
+    return parsed;
+  } catch {
+    return null;
+  }
 }
 function exportToThreeJS(shader) {
-    return `import * as THREE from 'three';
-
-const material = new THREE.ShaderMaterial({
-  uniforms: {
-    uTime: { value: 0 },
-    uDeltaTime: { value: 0 },
-    uCameraPosition: { value: new THREE.Vector3() },
-    uResolution: { value: new THREE.Vector2() },
-${shader.uniforms.map((u) => `    ${u.name}: { value: ${JSON.stringify(u.value)} },`).join('\n')}
-  },
-  vertexShader: \`${shader.vertexShader}\`,
-  fragmentShader: \`${shader.fragmentShader}\`,
-});
-
+  return `import * as THREE from 'three';
+
+const material = new THREE.ShaderMaterial({
+  uniforms: {
+    uTime: { value: 0 },
+    uDeltaTime: { value: 0 },
+    uCameraPosition: { value: new THREE.Vector3() },
+    uResolution: { value: new THREE.Vector2() },
+${shader.uniforms.map((u) => `    ${u.name}: { value: ${JSON.stringify(u.value)} },`).join("\n")}
+  },
+  vertexShader: \`${shader.vertexShader}\`,
+  fragmentShader: \`${shader.fragmentShader}\`,
+});
+
 export default material;`;
 }
-
-export { addConnectionToGraph, addNodeToGraph, areTypesCompatible, calculateBoundingBox, calculateZoomToFit, canConnect, cloneNode, compileShader, createConnection, createEmptyGraph, createNode, exportGraphToJSON, exportToThreeJS, generateConnectionId, generateNodeId, getNodeBounds, getNodeConnections, getNodeDefinition, getPortConnections, graphToScreen, importGraphFromJSON, moveNodesInGraph, removeConnectionFromGraph, removeNodesFromGraph, resetIdCounters, screenToGraph, topologicalSort, updateNodeInGraph, validateGraph };
+export {
+  addConnectionToGraph,
+  addNodeToGraph,
+  areTypesCompatible,
+  calculateBoundingBox,
+  calculateZoomToFit,
+  canConnect,
+  cloneNode,
+  compileShader,
+  createConnection,
+  createEmptyGraph,
+  createNode,
+  exportGraphToJSON,
+  exportToThreeJS,
+  generateConnectionId,
+  generateNodeId,
+  getNodeBounds,
+  getNodeConnections,
+  getNodeDefinition,
+  getPortConnections,
+  graphToScreen,
+  importGraphFromJSON,
+  moveNodesInGraph,
+  removeConnectionFromGraph,
+  removeNodesFromGraph,
+  resetIdCounters,
+  screenToGraph,
+  topologicalSort,
+  updateNodeInGraph,
+  validateGraph
+};