@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/NiceTerrainEditor.js

@@ -1,386 +1,601 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceIcon } from '@nice2dev/ui';
-import { useState, useRef, useEffect, useCallback } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceTutorialButton, resolveTutorial, NiceIcon } from "@nice2dev/ui";
+import { useState, useRef, useEffect, useCallback } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
 const TERRAIN_EDITOR_TOUR = [
-    {
-        target: '.nice-terrain-editor',
-        titleKey: 'tutorial.terrainEditor.intro.title',
-        title: 'Terrain editor',
-        contentKey: 'tutorial.terrainEditor.intro.content',
-        content: 'Sculpt the heightmap with brushes (raise, lower, flatten, smooth, noise), splat texture layers, generate procedural terrain, and import/export heightmaps.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-terrain-editor",
+    titleKey: "tutorial.terrainEditor.intro.title",
+    title: "Terrain editor",
+    contentKey: "tutorial.terrainEditor.intro.content",
+    content: "Sculpt the heightmap with brushes (raise, lower, flatten, smooth, noise), splat texture layers, generate procedural terrain, and import/export heightmaps.",
+    placement: "auto"
+  }
 ];
 function fractalNoise(x, z, octaves, persistence, lacunarity, _rng) {
-    let value = 0;
-    let amplitude = 1;
-    let frequency = 1;
-    let maxValue = 0;
-    for (let i = 0; i < octaves; i++) {
-        // Simple value noise using sin-based hash
-        const nx = x * frequency;
-        const nz = z * frequency;
-        const noise = Math.sin(nx * 12.9898 + nz * 78.233) * 43758.5453;
-        value += (noise - Math.floor(noise)) * amplitude;
-        maxValue += amplitude;
-        amplitude *= persistence;
-        frequency *= lacunarity;
-    }
-    return value / maxValue;
+  let value = 0;
+  let amplitude = 1;
+  let frequency = 1;
+  let maxValue = 0;
+  for (let i = 0; i < octaves; i++) {
+    const nx = x * frequency;
+    const nz = z * frequency;
+    const noise = Math.sin(nx * 12.9898 + nz * 78.233) * 43758.5453;
+    value += (noise - Math.floor(noise)) * amplitude;
+    maxValue += amplitude;
+    amplitude *= persistence;
+    frequency *= lacunarity;
+  }
+  return value / maxValue;
 }
-/* ── Hook ── */
 function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 100, segments: 128, maxHeight: 20 }, onTerrainChange) {
-    const [brush, setBrushState] = useState({
-        mode: 'raise',
-        radius: 5,
-        strength: 0.3,
-        falloff: 'smooth',
+  const [brush, setBrushState] = useState({
+    mode: "raise",
+    radius: 5,
+    strength: 0.3,
+    falloff: "smooth"
+  });
+  const [isPainting, setIsPainting] = useState(false);
+  const [textureLayers, setTextureLayers] = useState([
+    { name: "Grass", texture: null, scale: 10 },
+    { name: "Rock", texture: null, scale: 8 },
+    { name: "Sand", texture: null, scale: 12 },
+    { name: "Snow", texture: null, scale: 10 }
+  ]);
+  const [activeTextureLayer, setActiveTextureLayer] = useState(0);
+  const terrainRef = useRef(null);
+  const splatMapRef = useRef(null);
+  const raycaster = useRef(new THREE.Raycaster());
+  useEffect(() => {
+    if (!scene) {
+      return;
+    }
+    const geometry = new THREE.PlaneGeometry(
+      config.width,
+      config.depth,
+      config.segments,
+      config.segments
+    );
+    geometry.rotateX(-Math.PI / 2);
+    const material = new THREE.MeshStandardMaterial({
+      color: 4881487,
+      wireframe: false,
+      flatShading: false,
+      side: THREE.DoubleSide
     });
-    const [isPainting, setIsPainting] = useState(false);
-    const [textureLayers, setTextureLayers] = useState([
-        { name: 'Grass', texture: null, scale: 10 },
-        { name: 'Rock', texture: null, scale: 8 },
-        { name: 'Sand', texture: null, scale: 12 },
-        { name: 'Snow', texture: null, scale: 10 },
-    ]);
-    const [activeTextureLayer, setActiveTextureLayer] = useState(0);
-    const terrainRef = useRef(null);
-    const splatMapRef = useRef(null);
-    const raycaster = useRef(new THREE.Raycaster());
-    // Create terrain mesh
-    useEffect(() => {
-        if (!scene) {
-            return;
-        }
-        const geometry = new THREE.PlaneGeometry(config.width, config.depth, config.segments, config.segments);
-        geometry.rotateX(-Math.PI / 2);
-        const material = new THREE.MeshStandardMaterial({
-            color: 0x4a7c4f,
-            wireframe: false,
-            flatShading: false,
-            side: THREE.DoubleSide,
-        });
-        const mesh = new THREE.Mesh(geometry, material);
-        mesh.receiveShadow = true;
-        mesh.castShadow = true;
-        mesh.name = 'NiceTerrain';
-        scene.add(mesh);
-        terrainRef.current = mesh;
-        // Initialize splat map (RGBA per vertex)
-        const vertexCount = geometry.attributes.position.count;
-        const splatMap = new Float32Array(vertexCount * 4);
-        for (let i = 0; i < vertexCount; i++) {
-            splatMap[i * 4] = 1; // R = grass by default
-        }
-        splatMapRef.current = splatMap;
-        return () => {
-            scene.remove(mesh);
-            geometry.dispose();
-            material.dispose();
-        };
-    }, [scene, config.width, config.depth, config.segments]);
-    const setBrush = useCallback((partial) => {
-        setBrushState((prev) => ({ ...prev, ...partial }));
-    }, []);
-    const applyBrushAtPoint = useCallback((point) => {
-        const mesh = terrainRef.current;
-        if (!mesh) {
-            return;
-        }
-        const posAttr = mesh.geometry.attributes.position;
-        const vertex = new THREE.Vector3();
-        for (let i = 0; i < posAttr.count; i++) {
-            vertex.fromBufferAttribute(posAttr, i);
-            const dx = vertex.x - point.x;
-            const dz = vertex.z - point.z;
-            const dist = Math.sqrt(dx * dx + dz * dz);
-            if (dist > brush.radius) {
-                continue;
-            }
-            // Falloff
-            const t = dist / brush.radius;
-            let falloff;
-            switch (brush.falloff) {
-                case 'constant':
-                    falloff = 1;
-                    break;
-                case 'linear':
-                    falloff = 1 - t;
-                    break;
-                case 'smooth':
-                    falloff = 1 - t * t * (3 - 2 * t);
-                    break;
-                default:
-                    falloff = 1 - t;
-            }
-            const influence = falloff * brush.strength;
-            switch (brush.mode) {
-                case 'raise':
-                    posAttr.setY(i, posAttr.getY(i) + influence);
-                    break;
-                case 'lower':
-                    posAttr.setY(i, posAttr.getY(i) - influence);
-                    break;
-                case 'flatten':
-                    posAttr.setY(i, posAttr.getY(i) + (point.y - posAttr.getY(i)) * influence);
-                    break;
-                case 'smooth': {
-                    // Average with neighbors
-                    let avg = posAttr.getY(i);
-                    let count = 1;
-                    const seg = config.segments + 1;
-                    const row = Math.floor(i / seg);
-                    const col = i % seg;
-                    const neighbors = [
-                        row > 0 ? i - seg : -1,
-                        row < config.segments ? i + seg : -1,
-                        col > 0 ? i - 1 : -1,
-                        col < config.segments ? i + 1 : -1,
-                    ];
-                    for (const ni of neighbors) {
-                        if (ni >= 0 && ni < posAttr.count) {
-                            avg += posAttr.getY(ni);
-                            count++;
-                        }
-                    }
-                    avg /= count;
-                    posAttr.setY(i, posAttr.getY(i) + (avg - posAttr.getY(i)) * influence);
-                    break;
-                }
-                case 'noise':
-                    posAttr.setY(i, posAttr.getY(i) + (Math.random() - 0.5) * influence * 2);
-                    break;
-                case 'paint': {
-                    // Paint active texture layer onto vertices
-                    if (splatMapRef.current) {
-                        const offset = i * 4;
-                        // Reduce all channels slightly
-                        for (let c = 0; c < 4; c++) {
-                            splatMapRef.current[offset + c] *= 1 - influence * 0.5;
-                        }
-                        splatMapRef.current[offset + activeTextureLayer] += influence;
-                        // Normalize
-                        let total = 0;
-                        for (let c = 0; c < 4; c++) {
-                            total += splatMapRef.current[offset + c];
-                        }
-                        if (total > 0) {
-                            for (let c = 0; c < 4; c++) {
-                                splatMapRef.current[offset + c] /= total;
-                            }
-                        }
-                    }
-                    break;
-                }
-            }
-        }
-        posAttr.needsUpdate = true;
-        mesh.geometry.computeVertexNormals();
-        onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
-    }, [brush, config.segments, activeTextureLayer, onTerrainChange]);
-    // Mouse handling
-    useEffect(() => {
-        if (!canvas || !camera || !isPainting) {
-            return;
-        }
-        const onPointerMove = (e) => {
-            const rect = canvas.getBoundingClientRect();
-            const mouse = new THREE.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
-            raycaster.current.setFromCamera(mouse, camera);
-            const mesh = terrainRef.current;
-            if (!mesh) {
-                return;
-            }
-            const intersects = raycaster.current.intersectObject(mesh);
-            if (intersects.length > 0) {
-                applyBrushAtPoint(intersects[0].point);
-            }
-        };
-        canvas.addEventListener('pointermove', onPointerMove);
-        return () => canvas.removeEventListener('pointermove', onPointerMove);
-    }, [canvas, camera, isPainting, applyBrushAtPoint]);
-    const generateFlat = useCallback(() => {
-        const mesh = terrainRef.current;
-        if (!mesh) {
-            return;
-        }
-        const posAttr = mesh.geometry.attributes.position;
-        for (let i = 0; i < posAttr.count; i++) {
-            posAttr.setY(i, 0);
-        }
-        posAttr.needsUpdate = true;
-        mesh.geometry.computeVertexNormals();
-        onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
-    }, [onTerrainChange]);
-    const generateNoise = useCallback((octaves = 6, persistence = 0.5, lacunarity = 2.0) => {
-        const mesh = terrainRef.current;
-        if (!mesh) {
-            return;
-        }
-        const posAttr = mesh.geometry.attributes.position;
-        for (let i = 0; i < posAttr.count; i++) {
-            const x = posAttr.getX(i) / config.width;
-            const z = posAttr.getZ(i) / config.depth;
-            const height = fractalNoise(x, z, octaves, persistence, lacunarity) * config.maxHeight;
-            posAttr.setY(i, height);
-        }
-        posAttr.needsUpdate = true;
-        mesh.geometry.computeVertexNormals();
-        onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
-    }, [config, onTerrainChange]);
-    const importHeightmap = useCallback((image) => {
-        const mesh = terrainRef.current;
-        if (!mesh) {
-            return;
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.receiveShadow = true;
+    mesh.castShadow = true;
+    mesh.name = "NiceTerrain";
+    scene.add(mesh);
+    terrainRef.current = mesh;
+    const vertexCount = geometry.attributes.position.count;
+    const splatMap = new Float32Array(vertexCount * 4);
+    for (let i = 0; i < vertexCount; i++) {
+      splatMap[i * 4] = 1;
+    }
+    splatMapRef.current = splatMap;
+    return () => {
+      scene.remove(mesh);
+      geometry.dispose();
+      material.dispose();
+    };
+  }, [scene, config.width, config.depth, config.segments]);
+  const setBrush = useCallback((partial) => {
+    setBrushState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const applyBrushAtPoint = useCallback(
+    (point) => {
+      const mesh = terrainRef.current;
+      if (!mesh) {
+        return;
+      }
+      const posAttr = mesh.geometry.attributes.position;
+      const vertex = new THREE.Vector3();
+      for (let i = 0; i < posAttr.count; i++) {
+        vertex.fromBufferAttribute(posAttr, i);
+        const dx = vertex.x - point.x;
+        const dz = vertex.z - point.z;
+        const dist = Math.sqrt(dx * dx + dz * dz);
+        if (dist > brush.radius) {
+          continue;
         }
-        const tmpCanvas = document.createElement('canvas');
-        tmpCanvas.width = image.width;
-        tmpCanvas.height = image.height;
-        const ctx = tmpCanvas.getContext('2d');
-        if (!ctx) {
-            return;
+        const t = dist / brush.radius;
+        let falloff;
+        switch (brush.falloff) {
+          case "constant":
+            falloff = 1;
+            break;
+          case "linear":
+            falloff = 1 - t;
+            break;
+          case "smooth":
+            falloff = 1 - t * t * (3 - 2 * t);
+            break;
+          default:
+            falloff = 1 - t;
         }
-        ctx.drawImage(image, 0, 0);
-        const imageData = ctx.getImageData(0, 0, image.width, image.height);
-        const posAttr = mesh.geometry.attributes.position;
-        const seg = config.segments + 1;
-        for (let i = 0; i < posAttr.count; i++) {
+        const influence = falloff * brush.strength;
+        switch (brush.mode) {
+          case "raise":
+            posAttr.setY(i, posAttr.getY(i) + influence);
+            break;
+          case "lower":
+            posAttr.setY(i, posAttr.getY(i) - influence);
+            break;
+          case "flatten":
+            posAttr.setY(i, posAttr.getY(i) + (point.y - posAttr.getY(i)) * influence);
+            break;
+          case "smooth": {
+            let avg = posAttr.getY(i);
+            let count = 1;
+            const seg = config.segments + 1;
             const row = Math.floor(i / seg);
             const col = i % seg;
-            const px = Math.floor((col / config.segments) * (image.width - 1));
-            const py = Math.floor((row / config.segments) * (image.height - 1));
-            const idx = (py * image.width + px) * 4;
-            const gray = imageData.data[idx] / 255;
-            posAttr.setY(i, gray * config.maxHeight);
-        }
-        posAttr.needsUpdate = true;
-        mesh.geometry.computeVertexNormals();
-        onTerrainChange === null || onTerrainChange === void 0 ? void 0 : onTerrainChange(mesh);
-    }, [config, onTerrainChange]);
-    const exportHeightmap = useCallback(() => {
-        const mesh = terrainRef.current;
-        if (!mesh) {
-            return null;
-        }
-        const posAttr = mesh.geometry.attributes.position;
-        const seg = config.segments + 1;
-        const exportCanvas = document.createElement('canvas');
-        exportCanvas.width = seg;
-        exportCanvas.height = seg;
-        const ctx = exportCanvas.getContext('2d');
-        if (!ctx) {
-            return null;
-        }
-        const imageData = ctx.createImageData(seg, seg);
-        let minY = Infinity;
-        let maxY = -Infinity;
-        for (let i = 0; i < posAttr.count; i++) {
-            const y = posAttr.getY(i);
-            if (y < minY) {
-                minY = y;
+            const neighbors = [
+              row > 0 ? i - seg : -1,
+              row < config.segments ? i + seg : -1,
+              col > 0 ? i - 1 : -1,
+              col < config.segments ? i + 1 : -1
+            ];
+            for (const ni of neighbors) {
+              if (ni >= 0 && ni < posAttr.count) {
+                avg += posAttr.getY(ni);
+                count++;
+              }
             }
-            if (y > maxY) {
-                maxY = y;
+            avg /= count;
+            posAttr.setY(i, posAttr.getY(i) + (avg - posAttr.getY(i)) * influence);
+            break;
+          }
+          case "noise":
+            posAttr.setY(i, posAttr.getY(i) + (Math.random() - 0.5) * influence * 2);
+            break;
+          case "paint": {
+            if (splatMapRef.current) {
+              const offset = i * 4;
+              for (let c = 0; c < 4; c++) {
+                splatMapRef.current[offset + c] *= 1 - influence * 0.5;
+              }
+              splatMapRef.current[offset + activeTextureLayer] += influence;
+              let total = 0;
+              for (let c = 0; c < 4; c++) {
+                total += splatMapRef.current[offset + c];
+              }
+              if (total > 0) {
+                for (let c = 0; c < 4; c++) {
+                  splatMapRef.current[offset + c] /= total;
+                }
+              }
             }
+            break;
+          }
         }
-        const range = maxY - minY || 1;
-        for (let i = 0; i < posAttr.count; i++) {
-            const gray = Math.round(((posAttr.getY(i) - minY) / range) * 255);
-            imageData.data[i * 4] = gray;
-            imageData.data[i * 4 + 1] = gray;
-            imageData.data[i * 4 + 2] = gray;
-            imageData.data[i * 4 + 3] = 255;
-        }
-        ctx.putImageData(imageData, 0, 0);
-        return exportCanvas;
-    }, [config.segments]);
-    const setTextureLayer = useCallback((index, partial) => {
-        setTextureLayers((prev) => prev.map((l, i) => (i === index ? { ...l, ...partial } : l)));
-    }, []);
-    return {
-        terrainMesh: terrainRef.current,
-        brush,
-        setBrush,
-        isPainting,
-        startPainting: () => setIsPainting(true),
-        stopPainting: () => setIsPainting(false),
-        generateFlat,
-        generateNoise,
-        importHeightmap,
-        exportHeightmap,
-        textureLayers,
-        setTextureLayer,
-        activeTextureLayer,
-        setActiveTextureLayer,
+      }
+      posAttr.needsUpdate = true;
+      mesh.geometry.computeVertexNormals();
+      onTerrainChange?.(mesh);
+    },
+    [brush, config.segments, activeTextureLayer, onTerrainChange]
+  );
+  useEffect(() => {
+    if (!canvas || !camera || !isPainting) {
+      return;
+    }
+    const onPointerMove = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const mouse = new THREE.Vector2(
+        (e.clientX - rect.left) / rect.width * 2 - 1,
+        -((e.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      raycaster.current.setFromCamera(mouse, camera);
+      const mesh = terrainRef.current;
+      if (!mesh) {
+        return;
+      }
+      const intersects = raycaster.current.intersectObject(mesh);
+      if (intersects.length > 0) {
+        applyBrushAtPoint(intersects[0].point);
+      }
     };
+    canvas.addEventListener("pointermove", onPointerMove);
+    return () => canvas.removeEventListener("pointermove", onPointerMove);
+  }, [canvas, camera, isPainting, applyBrushAtPoint]);
+  const generateFlat = useCallback(() => {
+    const mesh = terrainRef.current;
+    if (!mesh) {
+      return;
+    }
+    const posAttr = mesh.geometry.attributes.position;
+    for (let i = 0; i < posAttr.count; i++) {
+      posAttr.setY(i, 0);
+    }
+    posAttr.needsUpdate = true;
+    mesh.geometry.computeVertexNormals();
+    onTerrainChange?.(mesh);
+  }, [onTerrainChange]);
+  const generateNoise = useCallback(
+    (octaves = 6, persistence = 0.5, lacunarity = 2) => {
+      const mesh = terrainRef.current;
+      if (!mesh) {
+        return;
+      }
+      const posAttr = mesh.geometry.attributes.position;
+      for (let i = 0; i < posAttr.count; i++) {
+        const x = posAttr.getX(i) / config.width;
+        const z = posAttr.getZ(i) / config.depth;
+        const height = fractalNoise(x, z, octaves, persistence, lacunarity) * config.maxHeight;
+        posAttr.setY(i, height);
+      }
+      posAttr.needsUpdate = true;
+      mesh.geometry.computeVertexNormals();
+      onTerrainChange?.(mesh);
+    },
+    [config, onTerrainChange]
+  );
+  const importHeightmap = useCallback(
+    (image) => {
+      const mesh = terrainRef.current;
+      if (!mesh) {
+        return;
+      }
+      const tmpCanvas = document.createElement("canvas");
+      tmpCanvas.width = image.width;
+      tmpCanvas.height = image.height;
+      const ctx = tmpCanvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      ctx.drawImage(image, 0, 0);
+      const imageData = ctx.getImageData(0, 0, image.width, image.height);
+      const posAttr = mesh.geometry.attributes.position;
+      const seg = config.segments + 1;
+      for (let i = 0; i < posAttr.count; i++) {
+        const row = Math.floor(i / seg);
+        const col = i % seg;
+        const px = Math.floor(col / config.segments * (image.width - 1));
+        const py = Math.floor(row / config.segments * (image.height - 1));
+        const idx = (py * image.width + px) * 4;
+        const gray = imageData.data[idx] / 255;
+        posAttr.setY(i, gray * config.maxHeight);
+      }
+      posAttr.needsUpdate = true;
+      mesh.geometry.computeVertexNormals();
+      onTerrainChange?.(mesh);
+    },
+    [config, onTerrainChange]
+  );
+  const exportHeightmap = useCallback(() => {
+    const mesh = terrainRef.current;
+    if (!mesh) {
+      return null;
+    }
+    const posAttr = mesh.geometry.attributes.position;
+    const seg = config.segments + 1;
+    const exportCanvas = document.createElement("canvas");
+    exportCanvas.width = seg;
+    exportCanvas.height = seg;
+    const ctx = exportCanvas.getContext("2d");
+    if (!ctx) {
+      return null;
+    }
+    const imageData = ctx.createImageData(seg, seg);
+    let minY = Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < posAttr.count; i++) {
+      const y = posAttr.getY(i);
+      if (y < minY) {
+        minY = y;
+      }
+      if (y > maxY) {
+        maxY = y;
+      }
+    }
+    const range = maxY - minY || 1;
+    for (let i = 0; i < posAttr.count; i++) {
+      const gray = Math.round((posAttr.getY(i) - minY) / range * 255);
+      imageData.data[i * 4] = gray;
+      imageData.data[i * 4 + 1] = gray;
+      imageData.data[i * 4 + 2] = gray;
+      imageData.data[i * 4 + 3] = 255;
+    }
+    ctx.putImageData(imageData, 0, 0);
+    return exportCanvas;
+  }, [config.segments]);
+  const setTextureLayer = useCallback((index, partial) => {
+    setTextureLayers((prev) => prev.map((l, i) => i === index ? { ...l, ...partial } : l));
+  }, []);
+  return {
+    terrainMesh: terrainRef.current,
+    brush,
+    setBrush,
+    isPainting,
+    startPainting: () => setIsPainting(true),
+    stopPainting: () => setIsPainting(false),
+    generateFlat,
+    generateNoise,
+    importHeightmap,
+    exportHeightmap,
+    textureLayers,
+    setTextureLayer,
+    activeTextureLayer,
+    setActiveTextureLayer
+  };
 }
-/* ── Component ── */
-const NiceTerrainEditor = ({ scene, camera, canvas, config: configProp, onTerrainChange, className = '', tutorial, }) => {
-    const { t } = useNiceTranslation();
-    const config = {
-        width: 100,
-        depth: 100,
-        segments: 128,
-        maxHeight: 20,
-        ...configProp,
-    };
-    const { brush, setBrush, isPainting, startPainting, stopPainting, generateFlat, generateNoise, exportHeightmap, textureLayers, setTextureLayer, activeTextureLayer, setActiveTextureLayer, } = useTerrainEditor(scene, camera, canvas, config, onTerrainChange);
-    const [noiseOctaves, setNoiseOctaves] = useState(6);
-    const [noisePersistence, setNoisePersistence] = useState(0.5);
-    return (jsxs("div", { className: `nice-terrain-editor ${className}`, style: { position: 'relative', display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, TERRAIN_EDITOR_TOUR) }) }), jsx("strong", { children: t('terrainEditor.terrainEditor', 'Terrain Editor') }), jsxs("fieldset", { style: {
-                    border: '1px solid var(--nice-border, #e2e8f0)',
-                    borderRadius: 6,
-                    padding: 4,
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: 2,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('terrainEditor.brush', 'Brush') }), ['raise', 'lower', 'flatten', 'smooth', 'noise', 'paint'].map((m) => (jsx("button", { type: "button", onClick: () => setBrush({ mode: m }), style: {
-                            padding: '3px 6px',
-                            fontSize: 11,
-                            cursor: 'pointer',
-                            borderRadius: 4,
-                            border: '1px solid var(--nice-border, #e2e8f0)',
-                            background: brush.mode === m ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                            color: brush.mode === m ? 'var(--nice-color-white, #fff)' : 'inherit',
-                        }, children: m }, m)))] }), jsxs("label", { children: [t('terrainEditor.radius', 'Radius: {radius}').replace('{radius}', String(brush.radius.toFixed(1))), jsx("input", { type: "range", min: 0.5, max: 20, step: 0.5, value: brush.radius, onChange: (e) => setBrush({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('terrainEditor.strength', 'Strength: {strength}').replace('{strength}', String(brush.strength.toFixed(2))), jsx("input", { type: "range", min: 0.01, max: 1, step: 0.01, value: brush.strength, onChange: (e) => setBrush({ strength: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsx("button", { type: "button", onClick: isPainting ? stopPainting : startPainting, style: {
-                    background: isPainting
-                        ? 'var(--nice-danger, #ef4444)'
-                        : 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-color-white, #fff)',
-                    border: 'none',
-                    borderRadius: 4,
-                    padding: '6px 12px',
-                    cursor: 'pointer',
-                }, children: isPainting ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "stop", size: 14 }), " ", t('terrainEditor.stopPainting', 'Stop Painting')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "brush", size: 14 }), " ", t('terrainEditor.startPainting', 'Start Painting')] })) }), jsxs("fieldset", { style: {
-                    border: '1px solid var(--nice-border, #e2e8f0)',
-                    borderRadius: 6,
-                    padding: 6,
-                    display: 'grid',
-                    gap: 4,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('terrainEditor.procedural', 'Procedural') }), jsxs("label", { children: [t('terrainEditor.octaves', 'Octaves: {noiseOctaves}').replace('{noiseOctaves}', String(noiseOctaves)), jsx("input", { type: "range", min: 1, max: 10, value: noiseOctaves, onChange: (e) => setNoiseOctaves(parseInt(e.target.value, 10)), style: { width: '100%' } })] }), jsxs("label", { children: [t('terrainEditor.persistence', 'Persistence: {noisePersistence}').replace('{noisePersistence}', String(noisePersistence.toFixed(2))), jsx("input", { type: "range", min: 0.1, max: 1, step: 0.05, value: noisePersistence, onChange: (e) => setNoisePersistence(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxs("button", { type: "button", onClick: () => generateNoise(noiseOctaves, noisePersistence), style: { flex: 1 }, children: [jsx(NiceIcon, { name: "mountain", size: 14 }), ' ', t('terrainEditor.generateNoise', 'Generate Noise')] }), jsxs("button", { type: "button", onClick: generateFlat, style: { flex: 1 }, children: [jsx(NiceIcon, { name: "square", size: 14 }), " ", t('terrainEditor.flatten', 'Flatten')] })] })] }), brush.mode === 'paint' && (jsxs("fieldset", { style: {
-                    border: '1px solid var(--nice-border, #e2e8f0)',
-                    borderRadius: 6,
-                    padding: 6,
-                    display: 'grid',
-                    gap: 4,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('terrainEditor.textureLayers', 'Texture Layers') }), textureLayers.map((layer, i) => (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "radio", name: "texLayer", checked: activeTextureLayer === i, onChange: () => setActiveTextureLayer(i) }), jsx("input", { type: "text", value: layer.name, onChange: (e) => setTextureLayer(i, { name: e.target.value }), style: {
-                                    flex: 1,
-                                    padding: '2px 6px',
-                                    border: '1px solid var(--nice-border, #e2e8f0)',
-                                    borderRadius: 4,
-                                } })] }, i)))] })), jsxs("button", { type: "button", onClick: () => {
-                    const c = exportHeightmap();
-                    if (c) {
-                        const link = document.createElement('a');
-                        link.download = 'heightmap.png';
-                        link.href = c.toDataURL('image/png');
-                        link.click();
+const NiceTerrainEditor = ({
+  scene,
+  camera,
+  canvas,
+  config: configProp,
+  onTerrainChange,
+  className = "",
+  tutorial
+}) => {
+  const { t } = useNiceTranslation();
+  const config = {
+    width: 100,
+    depth: 100,
+    segments: 128,
+    maxHeight: 20,
+    ...configProp
+  };
+  const {
+    brush,
+    setBrush,
+    isPainting,
+    startPainting,
+    stopPainting,
+    generateFlat,
+    generateNoise,
+    exportHeightmap,
+    textureLayers,
+    setTextureLayer,
+    activeTextureLayer,
+    setActiveTextureLayer
+  } = useTerrainEditor(scene, camera, canvas, config, onTerrainChange);
+  const [noiseOctaves, setNoiseOctaves] = useState(6);
+  const [noisePersistence, setNoisePersistence] = useState(0.5);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-terrain-editor ${className}`,
+      style: { position: "relative", display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 0, right: 0, zIndex: 20 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, TERRAIN_EDITOR_TOUR) }) }),
+        /* @__PURE__ */ jsx("strong", { children: t("terrainEditor.terrainEditor", "Terrain Editor") }),
+        /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            style: {
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              borderRadius: 6,
+              padding: 4,
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ jsx("legend", { style: { fontSize: 11 }, children: t("terrainEditor.brush", "Brush") }),
+              ["raise", "lower", "flatten", "smooth", "noise", "paint"].map(
+                (m) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setBrush({ mode: m }),
+                    style: {
+                      padding: "3px 6px",
+                      fontSize: 11,
+                      cursor: "pointer",
+                      borderRadius: 4,
+                      border: "1px solid var(--nice-border, #e2e8f0)",
+                      background: brush.mode === m ? "var(--nice-color-accent, #6366f1)" : "transparent",
+                      color: brush.mode === m ? "var(--nice-color-white, #fff)" : "inherit"
+                    },
+                    children: m
+                  },
+                  m
+                )
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("terrainEditor.radius", "Radius: {radius}").replace(
+            "{radius}",
+            String(brush.radius.toFixed(1))
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0.5,
+              max: 20,
+              step: 0.5,
+              value: brush.radius,
+              onChange: (e) => setBrush({ radius: parseFloat(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("terrainEditor.strength", "Strength: {strength}").replace(
+            "{strength}",
+            String(brush.strength.toFixed(2))
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0.01,
+              max: 1,
+              step: 0.01,
+              value: brush.strength,
+              onChange: (e) => setBrush({ strength: parseFloat(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: isPainting ? stopPainting : startPainting,
+            style: {
+              background: isPainting ? "var(--nice-danger, #ef4444)" : "var(--nice-color-accent, #6366f1)",
+              color: "var(--nice-color-white, #fff)",
+              border: "none",
+              borderRadius: 4,
+              padding: "6px 12px",
+              cursor: "pointer"
+            },
+            children: isPainting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "stop", size: 14 }),
+              " ",
+              t("terrainEditor.stopPainting", "Stop Painting")
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "brush", size: 14 }),
+              " ",
+              t("terrainEditor.startPainting", "Start Painting")
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            style: {
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              borderRadius: 6,
+              padding: 6,
+              display: "grid",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx("legend", { style: { fontSize: 11 }, children: t("terrainEditor.procedural", "Procedural") }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                t("terrainEditor.octaves", "Octaves: {noiseOctaves}").replace(
+                  "{noiseOctaves}",
+                  String(noiseOctaves)
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 1,
+                    max: 10,
+                    value: noiseOctaves,
+                    onChange: (e) => setNoiseOctaves(parseInt(e.target.value, 10)),
+                    style: { width: "100%" }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                t("terrainEditor.persistence", "Persistence: {noisePersistence}").replace(
+                  "{noisePersistence}",
+                  String(noisePersistence.toFixed(2))
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0.1,
+                    max: 1,
+                    step: 0.05,
+                    value: noisePersistence,
+                    onChange: (e) => setNoisePersistence(parseFloat(e.target.value)),
+                    style: { width: "100%" }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => generateNoise(noiseOctaves, noisePersistence),
+                    style: { flex: 1 },
+                    children: [
+                      /* @__PURE__ */ jsx(NiceIcon, { name: "mountain", size: 14 }),
+                      " ",
+                      t("terrainEditor.generateNoise", "Generate Noise")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("button", { type: "button", onClick: generateFlat, style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 14 }),
+                  " ",
+                  t("terrainEditor.flatten", "Flatten")
+                ] })
+              ] })
+            ]
+          }
+        ),
+        brush.mode === "paint" && /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            style: {
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              borderRadius: 6,
+              padding: 6,
+              display: "grid",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx("legend", { style: { fontSize: 11 }, children: t("terrainEditor.textureLayers", "Texture Layers") }),
+              textureLayers.map((layer, i) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "texLayer",
+                    checked: activeTextureLayer === i,
+                    onChange: () => setActiveTextureLayer(i)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: layer.name,
+                    onChange: (e) => setTextureLayer(i, { name: e.target.value }),
+                    style: {
+                      flex: 1,
+                      padding: "2px 6px",
+                      border: "1px solid var(--nice-border, #e2e8f0)",
+                      borderRadius: 4
                     }
-                }, style: { fontSize: 11 }, children: [jsx(NiceIcon, { name: "download", size: 14 }), ' ', t('terrainEditor.exportHeightmapPng', 'Export Heightmap PNG')] })] }));
+                  }
+                )
+              ] }, i))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              const c = exportHeightmap();
+              if (c) {
+                const link = document.createElement("a");
+                link.download = "heightmap.png";
+                link.href = c.toDataURL("image/png");
+                link.click();
+              }
+            },
+            style: { fontSize: 11 },
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "download", size: 14 }),
+              " ",
+              t("terrainEditor.exportHeightmapPng", "Export Heightmap PNG")
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  NiceTerrainEditor,
+  useTerrainEditor
 };
-
-export { NiceTerrainEditor, useTerrainEditor };