@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/cjs/model/NiceOctree.js

@@ -1,370 +1,422 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var THREE = require('three');
-var i18n = require('../core/i18n.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const THREE = require("three");
+const i18n = require("../core/i18n.js");
 function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
         });
+      }
     }
-    n.default = e;
-    return Object.freeze(n);
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
-
-var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
-
-/* ── Octree implementation ── */
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
 const DEFAULT_CONFIG = {
-    maxDepth: 8,
-    maxObjectsPerLeaf: 8,
-    looseness: 1.0,
+  maxDepth: 8,
+  maxObjectsPerLeaf: 8,
+  looseness: 1
 };
 function createNode(bounds, depth) {
-    return { bounds, children: null, objects: [], depth };
+  return { bounds, children: null, objects: [], depth };
 }
 function splitNode(node, config) {
-    if (node.depth >= config.maxDepth) {
-        return;
+  if (node.depth >= config.maxDepth) {
+    return;
+  }
+  const center = new THREE__namespace.Vector3();
+  node.bounds.getCenter(center);
+  const min = node.bounds.min;
+  const max = node.bounds.max;
+  node.children = [];
+  for (let i = 0; i < 8; i++) {
+    const childMin = new THREE__namespace.Vector3(
+      i & 1 ? center.x : min.x,
+      i & 2 ? center.y : min.y,
+      i & 4 ? center.z : min.z
+    );
+    const childMax = new THREE__namespace.Vector3(
+      i & 1 ? max.x : center.x,
+      i & 2 ? max.y : center.y,
+      i & 4 ? max.z : center.z
+    );
+    if (config.looseness > 1) {
+      const size = new THREE__namespace.Vector3().subVectors(childMax, childMin);
+      const expansion = size.clone().multiplyScalar((config.looseness - 1) * 0.5);
+      childMin.sub(expansion);
+      childMax.add(expansion);
     }
-    const center = new THREE__namespace.Vector3();
-    node.bounds.getCenter(center);
-    const min = node.bounds.min;
-    const max = node.bounds.max;
-    node.children = [];
-    for (let i = 0; i < 8; i++) {
-        const childMin = new THREE__namespace.Vector3(i & 1 ? center.x : min.x, i & 2 ? center.y : min.y, i & 4 ? center.z : min.z);
-        const childMax = new THREE__namespace.Vector3(i & 1 ? max.x : center.x, i & 2 ? max.y : center.y, i & 4 ? max.z : center.z);
-        // Apply looseness
-        if (config.looseness > 1) {
-            const size = new THREE__namespace.Vector3().subVectors(childMax, childMin);
-            const expansion = size.clone().multiplyScalar((config.looseness - 1) * 0.5);
-            childMin.sub(expansion);
-            childMax.add(expansion);
-        }
-        node.children.push(createNode(new THREE__namespace.Box3(childMin, childMax), node.depth + 1));
+    node.children.push(createNode(new THREE__namespace.Box3(childMin, childMax), node.depth + 1));
+  }
+  const orphans = [];
+  for (const obj of node.objects) {
+    const objBounds = new THREE__namespace.Box3().setFromObject(obj);
+    let placed = false;
+    for (const child of node.children) {
+      if (child.bounds.containsBox(objBounds)) {
+        child.objects.push(obj);
+        placed = true;
+        break;
+      }
     }
-    // Redistribute objects to children
-    const orphans = [];
-    for (const obj of node.objects) {
-        const objBounds = new THREE__namespace.Box3().setFromObject(obj);
-        let placed = false;
-        for (const child of node.children) {
-            if (child.bounds.containsBox(objBounds)) {
-                child.objects.push(obj);
-                placed = true;
-                break;
-            }
-        }
-        if (!placed) {
-            orphans.push(obj);
-        }
+    if (!placed) {
+      orphans.push(obj);
     }
-    node.objects = orphans;
+  }
+  node.objects = orphans;
 }
 function insertObject(node, object, config) {
-    const objBounds = new THREE__namespace.Box3().setFromObject(object);
-    if (!node.bounds.intersectsBox(objBounds)) {
-        return;
-    }
-    if (node.children) {
-        for (const child of node.children) {
-            if (child.bounds.containsBox(objBounds)) {
-                insertObject(child, object, config);
-                return;
-            }
-        }
-        // Doesn't fit in any child — store in this node
-        node.objects.push(object);
+  const objBounds = new THREE__namespace.Box3().setFromObject(object);
+  if (!node.bounds.intersectsBox(objBounds)) {
+    return;
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      if (child.bounds.containsBox(objBounds)) {
+        insertObject(child, object, config);
         return;
+      }
     }
     node.objects.push(object);
-    if (node.objects.length > config.maxObjectsPerLeaf && node.depth < config.maxDepth) {
-        splitNode(node, config);
-    }
+    return;
+  }
+  node.objects.push(object);
+  if (node.objects.length > config.maxObjectsPerLeaf && node.depth < config.maxDepth) {
+    splitNode(node, config);
+  }
 }
 function removeObject(node, object) {
-    const idx = node.objects.indexOf(object);
-    if (idx !== -1) {
-        node.objects.splice(idx, 1);
+  const idx = node.objects.indexOf(object);
+  if (idx !== -1) {
+    node.objects.splice(idx, 1);
+    return true;
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      if (removeObject(child, object)) {
         return true;
+      }
     }
-    if (node.children) {
-        for (const child of node.children) {
-            if (removeObject(child, object)) {
-                return true;
-            }
-        }
-    }
-    return false;
+  }
+  return false;
 }
 function raycastNode(node, raycaster, results) {
-    var _a;
-    if (!raycaster.ray.intersectsBox(node.bounds)) {
-        return;
-    }
-    // Test objects in this node
-    for (const obj of node.objects) {
-        if (obj instanceof THREE__namespace.Mesh) {
-            const intersects = raycaster.intersectObject(obj, false);
-            for (const hit of intersects) {
-                results.push({
-                    object: obj,
-                    point: hit.point,
-                    distance: hit.distance,
-                    face: (_a = hit.face) !== null && _a !== void 0 ? _a : null,
-                });
-            }
-        }
+  if (!raycaster.ray.intersectsBox(node.bounds)) {
+    return;
+  }
+  for (const obj of node.objects) {
+    if (obj instanceof THREE__namespace.Mesh) {
+      const intersects = raycaster.intersectObject(obj, false);
+      for (const hit of intersects) {
+        results.push({
+          object: obj,
+          point: hit.point,
+          distance: hit.distance,
+          face: hit.face ?? null
+        });
+      }
     }
-    // Recurse into children
-    if (node.children) {
-        for (const child of node.children) {
-            raycastNode(child, raycaster, results);
-        }
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      raycastNode(child, raycaster, results);
     }
+  }
 }
 function frustumCullNode(node, frustum, results) {
-    if (!frustum.intersectsBox(node.bounds)) {
-        return;
+  if (!frustum.intersectsBox(node.bounds)) {
+    return;
+  }
+  for (const obj of node.objects) {
+    const objBounds = new THREE__namespace.Box3().setFromObject(obj);
+    if (frustum.intersectsBox(objBounds)) {
+      results.push(obj);
     }
-    for (const obj of node.objects) {
-        const objBounds = new THREE__namespace.Box3().setFromObject(obj);
-        if (frustum.intersectsBox(objBounds)) {
-            results.push(obj);
-        }
-    }
-    if (node.children) {
-        for (const child of node.children) {
-            frustumCullNode(child, frustum, results);
-        }
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      frustumCullNode(child, frustum, results);
     }
+  }
 }
 function nearestInNode(node, point, maxDist, best) {
-    if (!node.bounds.distanceToPoint(point)) {
-        return;
+  if (!node.bounds.distanceToPoint(point)) {
+    return;
+  }
+  if (node.bounds.distanceToPoint(point) > best.dist) {
+    return;
+  }
+  for (const obj of node.objects) {
+    const pos = new THREE__namespace.Vector3();
+    obj.getWorldPosition(pos);
+    const dist = pos.distanceTo(point);
+    if (dist < best.dist && dist <= maxDist) {
+      best.dist = dist;
+      best.object = obj;
     }
-    if (node.bounds.distanceToPoint(point) > best.dist) {
-        return;
-    }
-    for (const obj of node.objects) {
-        const pos = new THREE__namespace.Vector3();
-        obj.getWorldPosition(pos);
-        const dist = pos.distanceTo(point);
-        if (dist < best.dist && dist <= maxDist) {
-            best.dist = dist;
-            best.object = obj;
-        }
-    }
-    if (node.children) {
-        // Sort children by distance to point for early termination
-        const sorted = [...node.children].sort((a, b) => {
-            const da = a.bounds.distanceToPoint(point);
-            const db = b.bounds.distanceToPoint(point);
-            return da - db;
-        });
-        for (const child of sorted) {
-            nearestInNode(child, point, maxDist, best);
-        }
+  }
+  if (node.children) {
+    const sorted = [...node.children].sort((a, b) => {
+      const da = a.bounds.distanceToPoint(point);
+      const db = b.bounds.distanceToPoint(point);
+      return da - db;
+    });
+    for (const child of sorted) {
+      nearestInNode(child, point, maxDist, best);
     }
+  }
 }
 function countNodes(node) {
-    let count = 1;
-    if (node.children) {
-        for (const child of node.children) {
-            count += countNodes(child);
-        }
+  let count = 1;
+  if (node.children) {
+    for (const child of node.children) {
+      count += countNodes(child);
     }
-    return count;
+  }
+  return count;
 }
 function countObjects(node) {
-    let count = node.objects.length;
-    if (node.children) {
-        for (const child of node.children) {
-            count += countObjects(child);
-        }
+  let count = node.objects.length;
+  if (node.children) {
+    for (const child of node.children) {
+      count += countObjects(child);
     }
-    return count;
+  }
+  return count;
 }
 function buildDebugVisualization(node, group, maxDepth) {
-    const size = new THREE__namespace.Vector3();
-    node.bounds.getSize(size);
-    const center = new THREE__namespace.Vector3();
-    node.bounds.getCenter(center);
-    const hue = node.depth / maxDepth;
-    const color = new THREE__namespace.Color().setHSL(hue, 0.8, 0.5);
-    const geo = new THREE__namespace.BoxGeometry(size.x, size.y, size.z);
-    const wireframe = new THREE__namespace.LineSegments(new THREE__namespace.WireframeGeometry(geo), new THREE__namespace.LineBasicMaterial({ color, opacity: 0.3, transparent: true }));
-    wireframe.position.copy(center);
-    group.add(wireframe);
-    if (node.children) {
-        for (const child of node.children) {
-            if (child.objects.length > 0 || child.children) {
-                buildDebugVisualization(child, group, maxDepth);
-            }
-        }
+  const size = new THREE__namespace.Vector3();
+  node.bounds.getSize(size);
+  const center = new THREE__namespace.Vector3();
+  node.bounds.getCenter(center);
+  const hue = node.depth / maxDepth;
+  const color = new THREE__namespace.Color().setHSL(hue, 0.8, 0.5);
+  const geo = new THREE__namespace.BoxGeometry(size.x, size.y, size.z);
+  const wireframe = new THREE__namespace.LineSegments(
+    new THREE__namespace.WireframeGeometry(geo),
+    new THREE__namespace.LineBasicMaterial({ color, opacity: 0.3, transparent: true })
+  );
+  wireframe.position.copy(center);
+  group.add(wireframe);
+  if (node.children) {
+    for (const child of node.children) {
+      if (child.objects.length > 0 || child.children) {
+        buildDebugVisualization(child, group, maxDepth);
+      }
     }
+  }
 }
-/* ── Hook ── */
 function useOctree(scene, configOverride) {
-    const config = React.useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
-    const [root, setRoot] = React.useState(null);
-    const [showDebug, setShowDebug] = React.useState(false);
-    const [stats, setStats] = React.useState({ nodeCount: 0, objectCount: 0 });
-    const debugGroup = React.useRef(new THREE__namespace.Group());
-    React.useEffect(() => {
-        if (!scene) {
-            return;
-        }
-        const group = debugGroup.current;
-        group.name = '__octree_debug__';
-        if (showDebug) {
-            scene.add(group);
-        }
-        return () => {
-            scene.remove(group);
-        };
-    }, [scene, showDebug]);
-    const refreshDebug = React.useCallback((rootNode) => {
-        // Clear existing debug
-        while (debugGroup.current.children.length) {
-            const child = debugGroup.current.children[0];
-            debugGroup.current.remove(child);
-        }
-        if (showDebug) {
-            buildDebugVisualization(rootNode, debugGroup.current, config.maxDepth);
-        }
-    }, [showDebug, config.maxDepth]);
-    const build = React.useCallback(() => {
-        if (!scene) {
-            return;
-        }
-        // Compute scene bounds
-        const sceneBounds = new THREE__namespace.Box3();
-        scene.traverse((child) => {
-            if (child instanceof THREE__namespace.Mesh && !child.name.startsWith('__')) {
-                sceneBounds.expandByObject(child);
-            }
-        });
-        if (sceneBounds.isEmpty()) {
-            return;
-        }
-        // Make bounds cubic
-        const size = new THREE__namespace.Vector3();
-        sceneBounds.getSize(size);
-        const maxDim = Math.max(size.x, size.y, size.z) * 1.1;
-        const center = new THREE__namespace.Vector3();
-        sceneBounds.getCenter(center);
-        const halfSize = maxDim / 2;
-        const cubicBounds = new THREE__namespace.Box3(new THREE__namespace.Vector3(center.x - halfSize, center.y - halfSize, center.z - halfSize), new THREE__namespace.Vector3(center.x + halfSize, center.y + halfSize, center.z + halfSize));
-        const rootNode = createNode(cubicBounds, 0);
-        scene.traverse((child) => {
-            if (child instanceof THREE__namespace.Mesh && !child.name.startsWith('__')) {
-                insertObject(rootNode, child, config);
-            }
-        });
-        setRoot(rootNode);
-        setStats({ nodeCount: countNodes(rootNode), objectCount: countObjects(rootNode) });
-        refreshDebug(rootNode);
-    }, [scene, config, refreshDebug]);
-    const insert = React.useCallback((object) => {
-        if (!root) {
-            return;
-        }
-        insertObject(root, object, config);
-        setStats({ nodeCount: countNodes(root), objectCount: countObjects(root) });
-        refreshDebug(root);
-    }, [root, config, refreshDebug]);
-    const remove = React.useCallback((object) => {
-        if (!root) {
-            return;
-        }
-        removeObject(root, object);
-        setStats({ nodeCount: countNodes(root), objectCount: countObjects(root) });
-    }, [root]);
-    const update = React.useCallback((object) => {
-        if (!root) {
-            return;
-        }
-        removeObject(root, object);
-        insertObject(root, object, config);
-    }, [root, config]);
-    const raycast = React.useCallback((raycaster) => {
-        if (!root) {
-            return [];
-        }
-        const results = [];
-        raycastNode(root, raycaster, results);
-        results.sort((a, b) => a.distance - b.distance);
-        return results;
-    }, [root]);
-    const frustumCull = React.useCallback((camera) => {
-        if (!root) {
-            return [];
-        }
-        const frustum = new THREE__namespace.Frustum();
-        const projScreenMatrix = new THREE__namespace.Matrix4();
-        projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-        frustum.setFromProjectionMatrix(projScreenMatrix);
-        const results = [];
-        frustumCullNode(root, frustum, results);
-        return results;
-    }, [root]);
-    const nearestNeighbor = React.useCallback((point, maxDistance = Infinity) => {
-        if (!root) {
-            return null;
-        }
-        const best = { object: null, dist: maxDistance };
-        nearestInNode(root, point, maxDistance, best);
-        return best.object;
-    }, [root]);
-    return {
-        build,
-        insert,
-        remove,
-        update,
-        raycast,
-        frustumCull,
-        nearestNeighbor,
-        nodeCount: stats.nodeCount,
-        objectCount: stats.objectCount,
-        showDebug,
-        setShowDebug,
-        root,
+  const config = React.useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
+  const [root, setRoot] = React.useState(null);
+  const [showDebug, setShowDebug] = React.useState(false);
+  const [stats, setStats] = React.useState({ nodeCount: 0, objectCount: 0 });
+  const debugGroup = React.useRef(new THREE__namespace.Group());
+  React.useEffect(() => {
+    if (!scene) {
+      return;
+    }
+    const group = debugGroup.current;
+    group.name = "__octree_debug__";
+    if (showDebug) {
+      scene.add(group);
+    }
+    return () => {
+      scene.remove(group);
     };
+  }, [scene, showDebug]);
+  const refreshDebug = React.useCallback(
+    (rootNode) => {
+      while (debugGroup.current.children.length) {
+        const child = debugGroup.current.children[0];
+        debugGroup.current.remove(child);
+      }
+      if (showDebug) {
+        buildDebugVisualization(rootNode, debugGroup.current, config.maxDepth);
+      }
+    },
+    [showDebug, config.maxDepth]
+  );
+  const build = React.useCallback(() => {
+    if (!scene) {
+      return;
+    }
+    const sceneBounds = new THREE__namespace.Box3();
+    scene.traverse((child) => {
+      if (child instanceof THREE__namespace.Mesh && !child.name.startsWith("__")) {
+        sceneBounds.expandByObject(child);
+      }
+    });
+    if (sceneBounds.isEmpty()) {
+      return;
+    }
+    const size = new THREE__namespace.Vector3();
+    sceneBounds.getSize(size);
+    const maxDim = Math.max(size.x, size.y, size.z) * 1.1;
+    const center = new THREE__namespace.Vector3();
+    sceneBounds.getCenter(center);
+    const halfSize = maxDim / 2;
+    const cubicBounds = new THREE__namespace.Box3(
+      new THREE__namespace.Vector3(center.x - halfSize, center.y - halfSize, center.z - halfSize),
+      new THREE__namespace.Vector3(center.x + halfSize, center.y + halfSize, center.z + halfSize)
+    );
+    const rootNode = createNode(cubicBounds, 0);
+    scene.traverse((child) => {
+      if (child instanceof THREE__namespace.Mesh && !child.name.startsWith("__")) {
+        insertObject(rootNode, child, config);
+      }
+    });
+    setRoot(rootNode);
+    setStats({ nodeCount: countNodes(rootNode), objectCount: countObjects(rootNode) });
+    refreshDebug(rootNode);
+  }, [scene, config, refreshDebug]);
+  const insert = React.useCallback(
+    (object) => {
+      if (!root) {
+        return;
+      }
+      insertObject(root, object, config);
+      setStats({ nodeCount: countNodes(root), objectCount: countObjects(root) });
+      refreshDebug(root);
+    },
+    [root, config, refreshDebug]
+  );
+  const remove = React.useCallback(
+    (object) => {
+      if (!root) {
+        return;
+      }
+      removeObject(root, object);
+      setStats({ nodeCount: countNodes(root), objectCount: countObjects(root) });
+    },
+    [root]
+  );
+  const update = React.useCallback(
+    (object) => {
+      if (!root) {
+        return;
+      }
+      removeObject(root, object);
+      insertObject(root, object, config);
+    },
+    [root, config]
+  );
+  const raycast = React.useCallback(
+    (raycaster) => {
+      if (!root) {
+        return [];
+      }
+      const results = [];
+      raycastNode(root, raycaster, results);
+      results.sort((a, b) => a.distance - b.distance);
+      return results;
+    },
+    [root]
+  );
+  const frustumCull = React.useCallback(
+    (camera) => {
+      if (!root) {
+        return [];
+      }
+      const frustum = new THREE__namespace.Frustum();
+      const projScreenMatrix = new THREE__namespace.Matrix4();
+      projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+      frustum.setFromProjectionMatrix(projScreenMatrix);
+      const results = [];
+      frustumCullNode(root, frustum, results);
+      return results;
+    },
+    [root]
+  );
+  const nearestNeighbor = React.useCallback(
+    (point, maxDistance = Infinity) => {
+      if (!root) {
+        return null;
+      }
+      const best = { object: null, dist: maxDistance };
+      nearestInNode(root, point, maxDistance, best);
+      return best.object;
+    },
+    [root]
+  );
+  return {
+    build,
+    insert,
+    remove,
+    update,
+    raycast,
+    frustumCull,
+    nearestNeighbor,
+    nodeCount: stats.nodeCount,
+    objectCount: stats.objectCount,
+    showDebug,
+    setShowDebug,
+    root
+  };
 }
-/* ── Component ── */
-const NiceOctree = ({ scene, config, showDebug: initialShowDebug, className = '', }) => {
-    const { t } = i18n.useNiceTranslation();
-    const octree = useOctree(scene, config);
-    const { setShowDebug } = octree;
-    React.useEffect(() => {
-        if (initialShowDebug !== undefined) {
-            setShowDebug(initialShowDebug);
+const NiceOctree = ({
+  scene,
+  config,
+  showDebug: initialShowDebug,
+  className = ""
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  const octree = useOctree(scene, config);
+  const { setShowDebug } = octree;
+  React.useEffect(() => {
+    if (initialShowDebug !== void 0) {
+      setShowDebug(initialShowDebug);
+    }
+  }, [initialShowDebug, setShowDebug]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `nice-octree ${className}`, style: { display: "grid", gap: 8, fontSize: 13 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "tree", size: 14 }),
+      " ",
+      t("octree.spatialIndexOctree", "Spatial Index (Octree)")
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: octree.build,
+        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__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "zap", size: 14 }),
+          " ",
+          t("octree.buildOctree", "Build Octree")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, opacity: 0.7 }, children: t("octree.nodesObjects", "Nodes: {nodeCount} · Objects: {objectCount}").replace("{nodeCount}", String(octree.nodeCount)).replace("{objectCount}", String(octree.objectCount)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: octree.showDebug,
+          onChange: (e) => octree.setShowDebug(e.target.checked)
         }
-    }, [initialShowDebug, setShowDebug]);
-    return (jsxRuntime.jsxs("div", { className: `nice-octree ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "tree", size: 14 }), ' ', t('octree.spatialIndexOctree', 'Spatial Index (Octree)')] }), jsxRuntime.jsxs("button", { type: "button", onClick: octree.build, style: {
-                    background: 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-text-on-primary, #fff)',
-                    border: 'none',
-                    borderRadius: 4,
-                    padding: '6px 12px',
-                    cursor: 'pointer',
-                }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "zap", size: 14 }), " ", t('octree.buildOctree', 'Build Octree')] }), jsxRuntime.jsx("div", { style: { fontSize: 11, opacity: 0.7 }, children: t('octree.nodesObjects', 'Nodes: {nodeCount} · Objects: {objectCount}')
-                    .replace('{nodeCount}', String(octree.nodeCount))
-                    .replace('{objectCount}', String(octree.objectCount)) }), jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: octree.showDebug, onChange: (e) => octree.setShowDebug(e.target.checked) }), t('octree.showDebugWireframes', 'Show debug wireframes')] })] }));
+      ),
+      t("octree.showDebugWireframes", "Show debug wireframes")
+    ] })
+  ] });
 };
-
 exports.NiceOctree = NiceOctree;
 exports.useOctree = useOctree;