@nice2dev/ui-3d 1.3.15 → 1.3.17

package/dist/esm/model/NiceProceduralGeometry.js

@@ -1,314 +1,697 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui';
-import { useState, useCallback } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/* ── Generators ── */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui";
+import { useState, useCallback } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
 function seededRng(seed) {
-    let s = seed;
-    return () => {
-        s = (s * 16807) % 2147483647;
-        return (s - 1) / 2147483646;
-    };
+  let s = seed;
+  return () => {
+    s = s * 16807 % 2147483647;
+    return (s - 1) / 2147483646;
+  };
 }
 function generateTree(params) {
-    const group = new THREE.Group();
-    group.name = 'ProceduralTree';
-    const rng = seededRng(params.seed);
-    const trunkMat = new THREE.MeshStandardMaterial({ color: 0x8b4513 });
-    const leafMat = new THREE.MeshStandardMaterial({ color: 0x228b22 });
-    function addBranch(parent, position, direction, length, radius, depth) {
-        const geo = new THREE.CylinderGeometry(radius * params.branchTaper, radius, length, 8);
-        geo.translate(0, length / 2, 0);
-        const mesh = new THREE.Mesh(geo, trunkMat);
-        mesh.position.copy(position);
-        // Orient along direction
-        const up = new THREE.Vector3(0, 1, 0);
-        const quat = new THREE.Quaternion().setFromUnitVectors(up, direction.clone().normalize());
-        mesh.quaternion.copy(quat);
-        parent.add(mesh);
-        if (depth <= 0) {
-            // Add leaf cluster
-            const leafGeo = new THREE.IcosahedronGeometry(length * 0.6, 1);
-            const leaf = new THREE.Mesh(leafGeo, leafMat);
-            const tip = position.clone().addScaledVector(direction.clone().normalize(), length);
-            leaf.position.copy(tip);
-            parent.add(leaf);
-            return;
-        }
-        const tip = position.clone().addScaledVector(direction.clone().normalize(), length);
-        const angleRad = (params.branchAngle * Math.PI) / 180;
-        for (let i = 0; i < params.branches; i++) {
-            const phi = (i / params.branches) * Math.PI * 2 + rng() * 0.5;
-            const theta = angleRad + (rng() - 0.5) * 0.3;
-            const newDir = new THREE.Vector3(Math.sin(theta) * Math.cos(phi), Math.cos(theta), Math.sin(theta) * Math.sin(phi));
-            // Blend with parent direction
-            newDir.add(direction.clone().normalize().multiplyScalar(0.5)).normalize();
-            addBranch(parent, tip, newDir, length * (0.6 + rng() * 0.2), radius * params.branchTaper, depth - 1);
-        }
+  const group = new THREE.Group();
+  group.name = "ProceduralTree";
+  const rng = seededRng(params.seed);
+  const trunkMat = new THREE.MeshStandardMaterial({ color: 9127187 });
+  const leafMat = new THREE.MeshStandardMaterial({ color: 2263842 });
+  function addBranch(parent, position, direction, length, radius, depth) {
+    const geo = new THREE.CylinderGeometry(radius * params.branchTaper, radius, length, 8);
+    geo.translate(0, length / 2, 0);
+    const mesh = new THREE.Mesh(geo, trunkMat);
+    mesh.position.copy(position);
+    const up = new THREE.Vector3(0, 1, 0);
+    const quat = new THREE.Quaternion().setFromUnitVectors(up, direction.clone().normalize());
+    mesh.quaternion.copy(quat);
+    parent.add(mesh);
+    if (depth <= 0) {
+      const leafGeo = new THREE.IcosahedronGeometry(length * 0.6, 1);
+      const leaf = new THREE.Mesh(leafGeo, leafMat);
+      const tip2 = position.clone().addScaledVector(direction.clone().normalize(), length);
+      leaf.position.copy(tip2);
+      parent.add(leaf);
+      return;
     }
-    addBranch(group, new THREE.Vector3(), new THREE.Vector3(0, 1, 0), params.trunkHeight, params.trunkRadius, params.depth);
-    return group;
+    const tip = position.clone().addScaledVector(direction.clone().normalize(), length);
+    const angleRad = params.branchAngle * Math.PI / 180;
+    for (let i = 0; i < params.branches; i++) {
+      const phi = i / params.branches * Math.PI * 2 + rng() * 0.5;
+      const theta = angleRad + (rng() - 0.5) * 0.3;
+      const newDir = new THREE.Vector3(
+        Math.sin(theta) * Math.cos(phi),
+        Math.cos(theta),
+        Math.sin(theta) * Math.sin(phi)
+      );
+      newDir.add(direction.clone().normalize().multiplyScalar(0.5)).normalize();
+      addBranch(
+        parent,
+        tip,
+        newDir,
+        length * (0.6 + rng() * 0.2),
+        radius * params.branchTaper,
+        depth - 1
+      );
+    }
+  }
+  addBranch(
+    group,
+    new THREE.Vector3(),
+    new THREE.Vector3(0, 1, 0),
+    params.trunkHeight,
+    params.trunkRadius,
+    params.depth
+  );
+  return group;
 }
 function generateRock(params) {
-    const geo = new THREE.IcosahedronGeometry(params.radius, params.detail);
-    const posAttr = geo.attributes.position;
-    const rng = seededRng(params.seed);
-    for (let i = 0; i < posAttr.count; i++) {
-        const vertex = new THREE.Vector3().fromBufferAttribute(posAttr, i);
-        const normal = vertex.clone().normalize();
-        // Noise displacement
-        const noise = (rng() - 0.5) * 2 * params.noiseAmount;
-        const freq = params.noiseScale;
-        const displacement = Math.sin(vertex.x * freq) * Math.cos(vertex.y * freq) * Math.sin(vertex.z * freq);
-        const totalDisp = (noise + displacement * params.noiseAmount) * params.radius;
-        vertex.addScaledVector(normal, totalDisp);
-        posAttr.setXYZ(i, vertex.x, vertex.y, vertex.z);
-    }
-    geo.computeVertexNormals();
-    const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.9 }));
-    mesh.name = 'ProceduralRock';
-    mesh.castShadow = true;
-    return mesh;
+  const geo = new THREE.IcosahedronGeometry(params.radius, params.detail);
+  const posAttr = geo.attributes.position;
+  const rng = seededRng(params.seed);
+  for (let i = 0; i < posAttr.count; i++) {
+    const vertex = new THREE.Vector3().fromBufferAttribute(posAttr, i);
+    const normal = vertex.clone().normalize();
+    const noise = (rng() - 0.5) * 2 * params.noiseAmount;
+    const freq = params.noiseScale;
+    const displacement = Math.sin(vertex.x * freq) * Math.cos(vertex.y * freq) * Math.sin(vertex.z * freq);
+    const totalDisp = (noise + displacement * params.noiseAmount) * params.radius;
+    vertex.addScaledVector(normal, totalDisp);
+    posAttr.setXYZ(i, vertex.x, vertex.y, vertex.z);
+  }
+  geo.computeVertexNormals();
+  const mesh = new THREE.Mesh(
+    geo,
+    new THREE.MeshStandardMaterial({ color: 8421504, roughness: 0.9 })
+  );
+  mesh.name = "ProceduralRock";
+  mesh.castShadow = true;
+  return mesh;
 }
 function generateBuilding(params) {
-    const group = new THREE.Group();
-    group.name = 'ProceduralBuilding';
-    const wallMat = new THREE.MeshStandardMaterial({ color: 0xd4c5a9 });
-    const windowMat = new THREE.MeshStandardMaterial({
-        color: 0x87ceeb,
-        metalness: 0.3,
-        roughness: 0.1,
-    });
-    const roofMat = new THREE.MeshStandardMaterial({ color: 0x8b0000 });
-    const totalHeight = params.floors * params.floorHeight;
-    // Main body
-    const bodyGeo = new THREE.BoxGeometry(params.width, totalHeight, params.depth);
-    bodyGeo.translate(0, totalHeight / 2, 0);
-    group.add(new THREE.Mesh(bodyGeo, wallMat));
-    // Windows
-    for (let floor = 0; floor < params.floors; floor++) {
-        const y = floor * params.floorHeight + params.floorHeight * 0.5;
-        for (let w = 0; w < params.windowsPerFloor; w++) {
-            const x = (w - (params.windowsPerFloor - 1) / 2) * (params.width / (params.windowsPerFloor + 1));
-            // Front face windows
-            const winGeo = new THREE.PlaneGeometry(params.windowWidth, params.windowHeight);
-            const winMesh = new THREE.Mesh(winGeo, windowMat);
-            winMesh.position.set(x, y, params.depth / 2 + 0.01);
-            group.add(winMesh);
-            // Back face windows
-            const winBack = winMesh.clone();
-            winBack.position.z = -params.depth / 2 - 0.01;
-            winBack.rotation.y = Math.PI;
-            group.add(winBack);
-        }
+  const group = new THREE.Group();
+  group.name = "ProceduralBuilding";
+  const wallMat = new THREE.MeshStandardMaterial({ color: 13944233 });
+  const windowMat = new THREE.MeshStandardMaterial({
+    color: 8900331,
+    metalness: 0.3,
+    roughness: 0.1
+  });
+  const roofMat = new THREE.MeshStandardMaterial({ color: 9109504 });
+  const totalHeight = params.floors * params.floorHeight;
+  const bodyGeo = new THREE.BoxGeometry(params.width, totalHeight, params.depth);
+  bodyGeo.translate(0, totalHeight / 2, 0);
+  group.add(new THREE.Mesh(bodyGeo, wallMat));
+  for (let floor = 0; floor < params.floors; floor++) {
+    const y = floor * params.floorHeight + params.floorHeight * 0.5;
+    for (let w = 0; w < params.windowsPerFloor; w++) {
+      const x = (w - (params.windowsPerFloor - 1) / 2) * (params.width / (params.windowsPerFloor + 1));
+      const winGeo = new THREE.PlaneGeometry(params.windowWidth, params.windowHeight);
+      const winMesh = new THREE.Mesh(winGeo, windowMat);
+      winMesh.position.set(x, y, params.depth / 2 + 0.01);
+      group.add(winMesh);
+      const winBack = winMesh.clone();
+      winBack.position.z = -params.depth / 2 - 0.01;
+      winBack.rotation.y = Math.PI;
+      group.add(winBack);
+    }
+  }
+  switch (params.roofStyle) {
+    case "gable": {
+      const shape = new THREE.Shape();
+      shape.moveTo(-params.width / 2, 0);
+      shape.lineTo(0, params.roofHeight);
+      shape.lineTo(params.width / 2, 0);
+      shape.lineTo(-params.width / 2, 0);
+      const extrudeGeo = new THREE.ExtrudeGeometry(shape, {
+        depth: params.depth,
+        bevelEnabled: false
+      });
+      const roof = new THREE.Mesh(extrudeGeo, roofMat);
+      roof.position.set(0, totalHeight, -params.depth / 2);
+      group.add(roof);
+      break;
+    }
+    case "hip": {
+      const roofGeo = new THREE.ConeGeometry(
+        Math.max(params.width, params.depth) * 0.7,
+        params.roofHeight,
+        4
+      );
+      roofGeo.rotateY(Math.PI / 4);
+      const roof = new THREE.Mesh(roofGeo, roofMat);
+      roof.position.y = totalHeight + params.roofHeight / 2;
+      group.add(roof);
+      break;
+    }
+    default: {
+      const flatGeo = new THREE.BoxGeometry(params.width + 0.4, 0.2, params.depth + 0.4);
+      const roof = new THREE.Mesh(flatGeo, roofMat);
+      roof.position.y = totalHeight + 0.1;
+      group.add(roof);
     }
-    // Roof
-    switch (params.roofStyle) {
-        case 'gable': {
-            const shape = new THREE.Shape();
-            shape.moveTo(-params.width / 2, 0);
-            shape.lineTo(0, params.roofHeight);
-            shape.lineTo(params.width / 2, 0);
-            shape.lineTo(-params.width / 2, 0);
-            const extrudeGeo = new THREE.ExtrudeGeometry(shape, {
-                depth: params.depth,
-                bevelEnabled: false,
-            });
-            const roof = new THREE.Mesh(extrudeGeo, roofMat);
-            roof.position.set(0, totalHeight, -params.depth / 2);
-            group.add(roof);
-            break;
-        }
-        case 'hip': {
-            const roofGeo = new THREE.ConeGeometry(Math.max(params.width, params.depth) * 0.7, params.roofHeight, 4);
-            roofGeo.rotateY(Math.PI / 4);
-            const roof = new THREE.Mesh(roofGeo, roofMat);
-            roof.position.y = totalHeight + params.roofHeight / 2;
-            group.add(roof);
-            break;
-        }
-        default: {
-            // flat roof
-            const flatGeo = new THREE.BoxGeometry(params.width + 0.4, 0.2, params.depth + 0.4);
-            const roof = new THREE.Mesh(flatGeo, roofMat);
-            roof.position.y = totalHeight + 0.1;
-            group.add(roof);
-        }
+  }
+  group.traverse((child) => {
+    if (child instanceof THREE.Mesh) {
+      child.castShadow = true;
+      child.receiveShadow = true;
     }
-    group.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-            child.castShadow = true;
-            child.receiveShadow = true;
-        }
-    });
-    return group;
+  });
+  return group;
 }
 function generatePipe(params) {
-    const curve = new THREE.CatmullRomCurve3(params.points, params.closed);
-    const geo = new THREE.TubeGeometry(curve, params.segments, params.radius, params.radialSegments, params.closed);
-    const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.2 }));
-    mesh.name = 'ProceduralPipe';
-    mesh.castShadow = true;
-    return mesh;
+  const curve = new THREE.CatmullRomCurve3(params.points, params.closed);
+  const geo = new THREE.TubeGeometry(
+    curve,
+    params.segments,
+    params.radius,
+    params.radialSegments,
+    params.closed
+  );
+  const mesh = new THREE.Mesh(
+    geo,
+    new THREE.MeshStandardMaterial({ color: 11184810, metalness: 0.8, roughness: 0.2 })
+  );
+  mesh.name = "ProceduralPipe";
+  mesh.castShadow = true;
+  return mesh;
 }
 function generateGear(params) {
-    const shape = new THREE.Shape();
-    const angleStep = (Math.PI * 2) / (params.teeth * 2);
-    for (let i = 0; i < params.teeth * 2; i++) {
-        const angle = i * angleStep;
-        const r = i % 2 === 0 ? params.outerRadius : params.outerRadius - params.toothDepth;
-        const x = Math.cos(angle) * r;
-        const y = Math.sin(angle) * r;
-        if (i === 0) {
-            shape.moveTo(x, y);
-        }
-        else {
-            shape.lineTo(x, y);
-        }
+  const shape = new THREE.Shape();
+  const angleStep = Math.PI * 2 / (params.teeth * 2);
+  for (let i = 0; i < params.teeth * 2; i++) {
+    const angle = i * angleStep;
+    const r = i % 2 === 0 ? params.outerRadius : params.outerRadius - params.toothDepth;
+    const x = Math.cos(angle) * r;
+    const y = Math.sin(angle) * r;
+    if (i === 0) {
+      shape.moveTo(x, y);
+    } else {
+      shape.lineTo(x, y);
     }
-    shape.closePath();
-    // Inner hole
-    const hole = new THREE.Path();
-    const holeSegments = 32;
-    for (let i = 0; i <= holeSegments; i++) {
-        const angle = (i / holeSegments) * Math.PI * 2;
-        const x = Math.cos(angle) * params.innerRadius;
-        const y = Math.sin(angle) * params.innerRadius;
-        if (i === 0) {
-            hole.moveTo(x, y);
-        }
-        else {
-            hole.lineTo(x, y);
-        }
+  }
+  shape.closePath();
+  const hole = new THREE.Path();
+  const holeSegments = 32;
+  for (let i = 0; i <= holeSegments; i++) {
+    const angle = i / holeSegments * Math.PI * 2;
+    const x = Math.cos(angle) * params.innerRadius;
+    const y = Math.sin(angle) * params.innerRadius;
+    if (i === 0) {
+      hole.moveTo(x, y);
+    } else {
+      hole.lineTo(x, y);
     }
-    shape.holes.push(hole);
-    const geo = new THREE.ExtrudeGeometry(shape, {
-        depth: params.thickness,
-        bevelEnabled: false,
-    });
-    geo.rotateX(-Math.PI / 2);
-    geo.translate(0, params.thickness / 2, 0);
-    const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0x888888, metalness: 0.7, roughness: 0.3 }));
-    mesh.name = 'ProceduralGear';
-    mesh.castShadow = true;
-    return mesh;
+  }
+  shape.holes.push(hole);
+  const geo = new THREE.ExtrudeGeometry(shape, {
+    depth: params.thickness,
+    bevelEnabled: false
+  });
+  geo.rotateX(-Math.PI / 2);
+  geo.translate(0, params.thickness / 2, 0);
+  const mesh = new THREE.Mesh(
+    geo,
+    new THREE.MeshStandardMaterial({ color: 8947848, metalness: 0.7, roughness: 0.3 })
+  );
+  mesh.name = "ProceduralGear";
+  mesh.castShadow = true;
+  return mesh;
 }
-/* ── Hook ── */
 const DEFAULT_TREE = {
-    trunkRadius: 0.3,
-    trunkHeight: 4,
-    branches: 3,
-    depth: 3,
-    branchAngle: 30,
-    branchLength: 3,
-    branchTaper: 0.7,
-    seed: 42,
+  trunkRadius: 0.3,
+  trunkHeight: 4,
+  branches: 3,
+  depth: 3,
+  branchAngle: 30,
+  branchLength: 3,
+  branchTaper: 0.7,
+  seed: 42
 };
 const DEFAULT_ROCK = {
-    radius: 1,
-    detail: 3,
-    noiseScale: 3,
-    noiseAmount: 0.2,
-    seed: 42,
+  radius: 1,
+  detail: 3,
+  noiseScale: 3,
+  noiseAmount: 0.2,
+  seed: 42
 };
 const DEFAULT_BUILDING = {
-    width: 8,
-    depth: 6,
-    floors: 4,
-    floorHeight: 3,
-    windowsPerFloor: 3,
-    windowWidth: 1.2,
-    windowHeight: 1.5,
-    roofStyle: 'gable',
-    roofHeight: 3,
+  width: 8,
+  depth: 6,
+  floors: 4,
+  floorHeight: 3,
+  windowsPerFloor: 3,
+  windowWidth: 1.2,
+  windowHeight: 1.5,
+  roofStyle: "gable",
+  roofHeight: 3
 };
 const DEFAULT_PIPE = {
-    radius: 0.2,
-    segments: 64,
-    radialSegments: 8,
-    closed: false,
-    points: [
-        new THREE.Vector3(0, 0, 0),
-        new THREE.Vector3(2, 2, 0),
-        new THREE.Vector3(4, 0, 2),
-        new THREE.Vector3(6, 2, 2),
-    ],
+  radius: 0.2,
+  segments: 64,
+  radialSegments: 8,
+  closed: false,
+  points: [
+    new THREE.Vector3(0, 0, 0),
+    new THREE.Vector3(2, 2, 0),
+    new THREE.Vector3(4, 0, 2),
+    new THREE.Vector3(6, 2, 2)
+  ]
 };
 const DEFAULT_GEAR = {
-    innerRadius: 0.5,
-    outerRadius: 2,
-    teeth: 12,
-    toothDepth: 0.3,
-    thickness: 0.4,
+  innerRadius: 0.5,
+  outerRadius: 2,
+  teeth: 12,
+  toothDepth: 0.3,
+  thickness: 0.4
 };
 function useProceduralGeometry(scene, onGenerated) {
-    const [type, setType] = useState('tree');
-    const [treeParams, setTreeParams] = useState(DEFAULT_TREE);
-    const [rockParams, setRockParams] = useState(DEFAULT_ROCK);
-    const [buildingParams, setBuildingParams] = useState(DEFAULT_BUILDING);
-    const [pipeParams, setPipeParams] = useState(DEFAULT_PIPE);
-    const [gearParams, setGearParams] = useState(DEFAULT_GEAR);
-    const generate = useCallback(() => {
-        if (!scene) {
-            return;
-        }
-        let result;
-        switch (type) {
-            case 'tree':
-                result = generateTree(treeParams);
-                break;
-            case 'rock':
-                result = generateRock(rockParams);
-                break;
-            case 'building':
-                result = generateBuilding(buildingParams);
-                break;
-            case 'pipe':
-                result = generatePipe(pipeParams);
-                break;
-            case 'gear':
-                result = generateGear(gearParams);
-                break;
-        }
-        scene.add(result);
-        onGenerated === null || onGenerated === void 0 ? void 0 : onGenerated(result);
-    }, [scene, type, treeParams, rockParams, buildingParams, pipeParams, gearParams, onGenerated]);
-    return {
-        type,
-        setType,
-        treeParams,
-        setTreeParams,
-        rockParams,
-        setRockParams,
-        buildingParams,
-        setBuildingParams,
-        pipeParams,
-        setPipeParams,
-        gearParams,
-        setGearParams,
-        generate,
-    };
+  const [type, setType] = useState("tree");
+  const [treeParams, setTreeParams] = useState(DEFAULT_TREE);
+  const [rockParams, setRockParams] = useState(DEFAULT_ROCK);
+  const [buildingParams, setBuildingParams] = useState(DEFAULT_BUILDING);
+  const [pipeParams, setPipeParams] = useState(DEFAULT_PIPE);
+  const [gearParams, setGearParams] = useState(DEFAULT_GEAR);
+  const generate = useCallback(() => {
+    if (!scene) {
+      return;
+    }
+    let result;
+    switch (type) {
+      case "tree":
+        result = generateTree(treeParams);
+        break;
+      case "rock":
+        result = generateRock(rockParams);
+        break;
+      case "building":
+        result = generateBuilding(buildingParams);
+        break;
+      case "pipe":
+        result = generatePipe(pipeParams);
+        break;
+      case "gear":
+        result = generateGear(gearParams);
+        break;
+    }
+    scene.add(result);
+    onGenerated?.(result);
+  }, [scene, type, treeParams, rockParams, buildingParams, pipeParams, gearParams, onGenerated]);
+  return {
+    type,
+    setType,
+    treeParams,
+    setTreeParams,
+    rockParams,
+    setRockParams,
+    buildingParams,
+    setBuildingParams,
+    pipeParams,
+    setPipeParams,
+    gearParams,
+    setGearParams,
+    generate
+  };
 }
-/* ── Component ── */
-const NiceProceduralGeometry = ({ scene, onGenerated, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { type, setType, treeParams, setTreeParams, rockParams, setRockParams, buildingParams, setBuildingParams, gearParams, setGearParams, generate, } = useProceduralGeometry(scene, onGenerated);
-    return (jsxs("div", { className: `nice-procedural-geometry ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("strong", { children: t('proceduralGeometry.proceduralGeometry', 'Procedural Geometry') }), jsxs("select", { value: type, onChange: (e) => setType(e.target.value), style: { width: '100%', padding: '4px 8px' }, children: [jsx("option", { value: "tree", children: t('proceduralGeometry.tree', 'Tree') }), jsx("option", { value: "rock", children: t('proceduralGeometry.rock', 'Rock') }), jsx("option", { value: "building", children: t('proceduralGeometry.building', 'Building') }), jsx("option", { value: "pipe", children: t('proceduralGeometry.pipe', 'Pipe') }), jsx("option", { value: "gear", children: t('proceduralGeometry.gear', 'Gear') })] }), type === 'tree' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: [t('proceduralGeometry.height', 'Height: {trunkHeight}').replace('{trunkHeight}', String(treeParams.trunkHeight.toFixed(1))), jsx("input", { type: "range", min: 1, max: 15, step: 0.5, value: treeParams.trunkHeight, onChange: (e) => setTreeParams({ ...treeParams, trunkHeight: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.branches', 'Branches: {branches}').replace('{branches}', String(treeParams.branches)), jsx("input", { type: "range", min: 1, max: 6, value: treeParams.branches, onChange: (e) => setTreeParams({ ...treeParams, branches: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.depth', 'Depth: {depth}').replace('{depth}', String(treeParams.depth)), jsx("input", { type: "range", min: 1, max: 5, value: treeParams.depth, onChange: (e) => setTreeParams({ ...treeParams, depth: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.angle', 'Angle: {branchAngle}°').replace('{branchAngle}', String(treeParams.branchAngle)), jsx("input", { type: "range", min: 10, max: 80, value: treeParams.branchAngle, onChange: (e) => setTreeParams({ ...treeParams, branchAngle: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.seed', 'Seed: {seed}').replace('{seed}', String(treeParams.seed)), jsx("input", { type: "range", min: 1, max: 999, value: treeParams.seed, onChange: (e) => setTreeParams({ ...treeParams, seed: parseInt(e.target.value, 10) }), style: { width: '100%' } })] })] })), type === 'rock' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: [t('proceduralGeometry.radius', 'Radius: {radius}').replace('{radius}', String(rockParams.radius.toFixed(1))), jsx("input", { type: "range", min: 0.2, max: 5, step: 0.1, value: rockParams.radius, onChange: (e) => setRockParams({ ...rockParams, radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.detail', 'Detail: {detail}').replace('{detail}', String(rockParams.detail)), jsx("input", { type: "range", min: 1, max: 5, value: rockParams.detail, onChange: (e) => setRockParams({ ...rockParams, detail: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.noise', 'Noise: {noiseAmount}').replace('{noiseAmount}', String(rockParams.noiseAmount.toFixed(2))), jsx("input", { type: "range", min: 0, max: 0.5, step: 0.01, value: rockParams.noiseAmount, onChange: (e) => setRockParams({ ...rockParams, noiseAmount: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.seed', 'Seed: {seed}').replace('{seed}', String(rockParams.seed)), jsx("input", { type: "range", min: 1, max: 999, value: rockParams.seed, onChange: (e) => setRockParams({ ...rockParams, seed: parseInt(e.target.value, 10) }), style: { width: '100%' } })] })] })), type === 'building' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: [t('proceduralGeometry.width', 'Width: {width}').replace('{width}', String(buildingParams.width)), jsx("input", { type: "range", min: 4, max: 20, step: 1, value: buildingParams.width, onChange: (e) => setBuildingParams({ ...buildingParams, width: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.floors', 'Floors: {floors}').replace('{floors}', String(buildingParams.floors)), jsx("input", { type: "range", min: 1, max: 20, value: buildingParams.floors, onChange: (e) => setBuildingParams({ ...buildingParams, floors: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.windowsFloor', 'Windows/Floor: {windowsPerFloor}').replace('{windowsPerFloor}', String(buildingParams.windowsPerFloor)), jsx("input", { type: "range", min: 1, max: 10, value: buildingParams.windowsPerFloor, onChange: (e) => setBuildingParams({
-                                    ...buildingParams,
-                                    windowsPerFloor: parseInt(e.target.value, 10),
-                                }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.roof', 'Roof:'), jsxs("select", { value: buildingParams.roofStyle, onChange: (e) => setBuildingParams({
-                                    ...buildingParams,
-                                    roofStyle: e.target.value,
-                                }), style: { marginLeft: 8 }, children: [jsx("option", { value: "flat", children: t('proceduralGeometry.flat', 'Flat') }), jsx("option", { value: "gable", children: t('proceduralGeometry.gable', 'Gable') }), jsx("option", { value: "hip", children: t('proceduralGeometry.hip', 'Hip') })] })] })] })), type === 'gear' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: [t('proceduralGeometry.outerRadius', 'Outer Radius: {outerRadius}').replace('{outerRadius}', String(gearParams.outerRadius.toFixed(1))), jsx("input", { type: "range", min: 0.5, max: 5, step: 0.1, value: gearParams.outerRadius, onChange: (e) => setGearParams({ ...gearParams, outerRadius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.teeth', 'Teeth: {teeth}').replace('{teeth}', String(gearParams.teeth)), jsx("input", { type: "range", min: 4, max: 30, value: gearParams.teeth, onChange: (e) => setGearParams({ ...gearParams, teeth: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.toothDepth', 'Tooth Depth: {toothDepth}').replace('{toothDepth}', String(gearParams.toothDepth.toFixed(2))), jsx("input", { type: "range", min: 0.05, max: 1, step: 0.05, value: gearParams.toothDepth, onChange: (e) => setGearParams({ ...gearParams, toothDepth: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('proceduralGeometry.thickness', 'Thickness: {thickness}').replace('{thickness}', String(gearParams.thickness.toFixed(2))), jsx("input", { type: "range", min: 0.1, max: 2, step: 0.1, value: gearParams.thickness, onChange: (e) => setGearParams({ ...gearParams, thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] })] })), jsxs("button", { type: "button", onClick: generate, style: {
-                    background: 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-text-on-primary, #fff)',
-                    border: 'none',
-                    borderRadius: 4,
-                    padding: '6px 12px',
-                    cursor: 'pointer',
-                }, children: [jsx(NiceIcon, { name: "wand", size: 14 }), " ", t('proceduralGeometry.generate', 'Generate')] })] }));
+const NiceProceduralGeometry = ({
+  scene,
+  onGenerated,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const {
+    type,
+    setType,
+    treeParams,
+    setTreeParams,
+    rockParams,
+    setRockParams,
+    buildingParams,
+    setBuildingParams,
+    gearParams,
+    setGearParams,
+    generate
+  } = useProceduralGeometry(scene, onGenerated);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-procedural-geometry ${className}`,
+      style: { display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsx("strong", { children: t("proceduralGeometry.proceduralGeometry", "Procedural Geometry") }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: type,
+            onChange: (e) => setType(e.target.value),
+            style: { width: "100%", padding: "4px 8px" },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "tree", children: t("proceduralGeometry.tree", "Tree") }),
+              /* @__PURE__ */ jsx("option", { value: "rock", children: t("proceduralGeometry.rock", "Rock") }),
+              /* @__PURE__ */ jsx("option", { value: "building", children: t("proceduralGeometry.building", "Building") }),
+              /* @__PURE__ */ jsx("option", { value: "pipe", children: t("proceduralGeometry.pipe", "Pipe") }),
+              /* @__PURE__ */ jsx("option", { value: "gear", children: t("proceduralGeometry.gear", "Gear") })
+            ]
+          }
+        ),
+        type === "tree" && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.height", "Height: {trunkHeight}").replace(
+              "{trunkHeight}",
+              String(treeParams.trunkHeight.toFixed(1))
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 15,
+                step: 0.5,
+                value: treeParams.trunkHeight,
+                onChange: (e) => setTreeParams({ ...treeParams, trunkHeight: parseFloat(e.target.value) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.branches", "Branches: {branches}").replace(
+              "{branches}",
+              String(treeParams.branches)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 6,
+                value: treeParams.branches,
+                onChange: (e) => setTreeParams({ ...treeParams, branches: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.depth", "Depth: {depth}").replace(
+              "{depth}",
+              String(treeParams.depth)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 5,
+                value: treeParams.depth,
+                onChange: (e) => setTreeParams({ ...treeParams, depth: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.angle", "Angle: {branchAngle}°").replace(
+              "{branchAngle}",
+              String(treeParams.branchAngle)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 10,
+                max: 80,
+                value: treeParams.branchAngle,
+                onChange: (e) => setTreeParams({ ...treeParams, branchAngle: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.seed", "Seed: {seed}").replace(
+              "{seed}",
+              String(treeParams.seed)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 999,
+                value: treeParams.seed,
+                onChange: (e) => setTreeParams({ ...treeParams, seed: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] })
+        ] }),
+        type === "rock" && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.radius", "Radius: {radius}").replace(
+              "{radius}",
+              String(rockParams.radius.toFixed(1))
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0.2,
+                max: 5,
+                step: 0.1,
+                value: rockParams.radius,
+                onChange: (e) => setRockParams({ ...rockParams, radius: parseFloat(e.target.value) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.detail", "Detail: {detail}").replace(
+              "{detail}",
+              String(rockParams.detail)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 5,
+                value: rockParams.detail,
+                onChange: (e) => setRockParams({ ...rockParams, detail: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.noise", "Noise: {noiseAmount}").replace(
+              "{noiseAmount}",
+              String(rockParams.noiseAmount.toFixed(2))
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 0.5,
+                step: 0.01,
+                value: rockParams.noiseAmount,
+                onChange: (e) => setRockParams({ ...rockParams, noiseAmount: parseFloat(e.target.value) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.seed", "Seed: {seed}").replace(
+              "{seed}",
+              String(rockParams.seed)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 999,
+                value: rockParams.seed,
+                onChange: (e) => setRockParams({ ...rockParams, seed: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] })
+        ] }),
+        type === "building" && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.width", "Width: {width}").replace(
+              "{width}",
+              String(buildingParams.width)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 4,
+                max: 20,
+                step: 1,
+                value: buildingParams.width,
+                onChange: (e) => setBuildingParams({ ...buildingParams, width: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.floors", "Floors: {floors}").replace(
+              "{floors}",
+              String(buildingParams.floors)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 20,
+                value: buildingParams.floors,
+                onChange: (e) => setBuildingParams({ ...buildingParams, floors: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.windowsFloor", "Windows/Floor: {windowsPerFloor}").replace(
+              "{windowsPerFloor}",
+              String(buildingParams.windowsPerFloor)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 10,
+                value: buildingParams.windowsPerFloor,
+                onChange: (e) => setBuildingParams({
+                  ...buildingParams,
+                  windowsPerFloor: parseInt(e.target.value, 10)
+                }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.roof", "Roof:"),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: buildingParams.roofStyle,
+                onChange: (e) => setBuildingParams({
+                  ...buildingParams,
+                  roofStyle: e.target.value
+                }),
+                style: { marginLeft: 8 },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "flat", children: t("proceduralGeometry.flat", "Flat") }),
+                  /* @__PURE__ */ jsx("option", { value: "gable", children: t("proceduralGeometry.gable", "Gable") }),
+                  /* @__PURE__ */ jsx("option", { value: "hip", children: t("proceduralGeometry.hip", "Hip") })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        type === "gear" && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.outerRadius", "Outer Radius: {outerRadius}").replace(
+              "{outerRadius}",
+              String(gearParams.outerRadius.toFixed(1))
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0.5,
+                max: 5,
+                step: 0.1,
+                value: gearParams.outerRadius,
+                onChange: (e) => setGearParams({ ...gearParams, outerRadius: parseFloat(e.target.value) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.teeth", "Teeth: {teeth}").replace(
+              "{teeth}",
+              String(gearParams.teeth)
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 4,
+                max: 30,
+                value: gearParams.teeth,
+                onChange: (e) => setGearParams({ ...gearParams, teeth: parseInt(e.target.value, 10) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.toothDepth", "Tooth Depth: {toothDepth}").replace(
+              "{toothDepth}",
+              String(gearParams.toothDepth.toFixed(2))
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0.05,
+                max: 1,
+                step: 0.05,
+                value: gearParams.toothDepth,
+                onChange: (e) => setGearParams({ ...gearParams, toothDepth: parseFloat(e.target.value) }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            t("proceduralGeometry.thickness", "Thickness: {thickness}").replace(
+              "{thickness}",
+              String(gearParams.thickness.toFixed(2))
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0.1,
+                max: 2,
+                step: 0.1,
+                value: gearParams.thickness,
+                onChange: (e) => setGearParams({ ...gearParams, thickness: parseFloat(e.target.value) }),
+                style: { width: "100%" }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: generate,
+            style: {
+              background: "var(--nice-color-accent, #6366f1)",
+              color: "var(--nice-text-on-primary, #fff)",
+              border: "none",
+              borderRadius: 4,
+              padding: "6px 12px",
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "wand", size: 14 }),
+              " ",
+              t("proceduralGeometry.generate", "Generate")
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  NiceProceduralGeometry,
+  generateBuilding,
+  generateGear,
+  generatePipe,
+  generateRock,
+  generateTree,
+  useProceduralGeometry
 };
-
-export { NiceProceduralGeometry, generateBuilding, generateGear, generatePipe, generateRock, generateTree, useProceduralGeometry };