@nice2dev/ui-3d 1.3.15 → 1.3.17

package/dist/esm/rendering/NiceCascadedShadows.js

@@ -1,259 +1,386 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui';
-import { useEffect, useState, useRef, useCallback } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/* ── Cascade split calculation ── */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui";
+import { useEffect, useState, useRef, useCallback } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
 function computeCascadeSplits(cascadeCount, near, far, splitMode, lambda) {
-    const splits = [];
-    for (let i = 1; i <= cascadeCount; i++) {
-        const p = i / cascadeCount;
-        let logSplit, linearSplit;
-        switch (splitMode) {
-            case 'logarithmic':
-                splits.push(near * Math.pow(far / near, p));
-                break;
-            case 'linear':
-                splits.push(near + (far - near) * p);
-                break;
-            case 'practical':
-                logSplit = near * Math.pow(far / near, p);
-                linearSplit = near + (far - near) * p;
-                splits.push(lambda * logSplit + (1 - lambda) * linearSplit);
-                break;
-        }
+  const splits = [];
+  for (let i = 1; i <= cascadeCount; i++) {
+    const p = i / cascadeCount;
+    let logSplit, linearSplit;
+    switch (splitMode) {
+      case "logarithmic":
+        splits.push(near * Math.pow(far / near, p));
+        break;
+      case "linear":
+        splits.push(near + (far - near) * p);
+        break;
+      case "practical":
+        logSplit = near * Math.pow(far / near, p);
+        linearSplit = near + (far - near) * p;
+        splits.push(lambda * logSplit + (1 - lambda) * linearSplit);
+        break;
     }
-    return splits;
+  }
+  return splits;
 }
 function computeFrustumCorners(camera, nearDist, farDist) {
-    const fov = (camera.fov * Math.PI) / 180;
-    const aspect = camera.aspect;
-    const nearHalfH = Math.tan(fov / 2) * nearDist;
-    const nearHalfW = nearHalfH * aspect;
-    const farHalfH = Math.tan(fov / 2) * farDist;
-    const farHalfW = farHalfH * aspect;
-    camera.matrixWorldInverse;
-    const invView = camera.matrixWorld;
-    const corners = [
-        // Near plane
-        new THREE.Vector3(-nearHalfW, -nearHalfH, -nearDist),
-        new THREE.Vector3(nearHalfW, -nearHalfH, -nearDist),
-        new THREE.Vector3(nearHalfW, nearHalfH, -nearDist),
-        new THREE.Vector3(-nearHalfW, nearHalfH, -nearDist),
-        // Far plane
-        new THREE.Vector3(-farHalfW, -farHalfH, -farDist),
-        new THREE.Vector3(farHalfW, -farHalfH, -farDist),
-        new THREE.Vector3(farHalfW, farHalfH, -farDist),
-        new THREE.Vector3(-farHalfW, farHalfH, -farDist),
-    ];
-    // Transform to world space
-    for (const corner of corners) {
-        corner.applyMatrix4(invView);
-    }
-    return corners;
+  const fov = camera.fov * Math.PI / 180;
+  const aspect = camera.aspect;
+  const nearHalfH = Math.tan(fov / 2) * nearDist;
+  const nearHalfW = nearHalfH * aspect;
+  const farHalfH = Math.tan(fov / 2) * farDist;
+  const farHalfW = farHalfH * aspect;
+  camera.matrixWorldInverse;
+  const invView = camera.matrixWorld;
+  const corners = [
+    // Near plane
+    new THREE.Vector3(-nearHalfW, -nearHalfH, -nearDist),
+    new THREE.Vector3(nearHalfW, -nearHalfH, -nearDist),
+    new THREE.Vector3(nearHalfW, nearHalfH, -nearDist),
+    new THREE.Vector3(-nearHalfW, nearHalfH, -nearDist),
+    // Far plane
+    new THREE.Vector3(-farHalfW, -farHalfH, -farDist),
+    new THREE.Vector3(farHalfW, -farHalfH, -farDist),
+    new THREE.Vector3(farHalfW, farHalfH, -farDist),
+    new THREE.Vector3(-farHalfW, farHalfH, -farDist)
+  ];
+  for (const corner of corners) {
+    corner.applyMatrix4(invView);
+  }
+  return corners;
 }
-/* ── Hook ── */
 const DEFAULT_CSM = {
-    cascadeCount: 3,
-    splitMode: 'practical',
-    practicalSplitLambda: 0.5,
-    maxFar: 200,
-    shadowMapSize: 2048,
-    lightDirection: new THREE.Vector3(-1, -2, -1).normalize(),
-    lightIntensity: 1.5,
-    fadeDistance: 5,
-    cascadeOverrides: [],
+  cascadeCount: 3,
+  splitMode: "practical",
+  practicalSplitLambda: 0.5,
+  maxFar: 200,
+  shadowMapSize: 2048,
+  lightDirection: new THREE.Vector3(-1, -2, -1).normalize(),
+  lightIntensity: 1.5,
+  fadeDistance: 5,
+  cascadeOverrides: []
 };
 function useCSM(scene, camera, configOverride) {
-    const [config, setConfigState] = useState({ ...DEFAULT_CSM, ...configOverride });
-    const [showDebug, setShowDebug] = useState(false);
-    const [cascadeSplits, setCascadeSplits] = useState([]);
-    const lightsRef = useRef([]);
-    const debugGroup = useRef(new THREE.Group());
-    const setConfig = useCallback((partial) => {
-        setConfigState((prev) => ({ ...prev, ...partial }));
-    }, []);
-    // Create/update cascade lights
-    useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (!scene || !camera) {
-            return;
-        }
-        // Remove old lights
-        for (const light of lightsRef.current) {
-            scene.remove(light);
-            scene.remove(light.target);
-            (_a = light.shadow.map) === null || _a === void 0 ? void 0 : _a.dispose();
+  const [config, setConfigState] = useState({ ...DEFAULT_CSM, ...configOverride });
+  const [showDebug, setShowDebug] = useState(false);
+  const [cascadeSplits, setCascadeSplits] = useState([]);
+  const lightsRef = useRef([]);
+  const debugGroup = useRef(new THREE.Group());
+  const setConfig = useCallback((partial) => {
+    setConfigState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  useEffect(() => {
+    if (!scene || !camera) {
+      return;
+    }
+    for (const light of lightsRef.current) {
+      scene.remove(light);
+      scene.remove(light.target);
+      light.shadow.map?.dispose();
+    }
+    lightsRef.current = [];
+    const near = camera.near;
+    const far = Math.min(camera.far, config.maxFar);
+    const splits = computeCascadeSplits(
+      config.cascadeCount,
+      near,
+      far,
+      config.splitMode,
+      config.practicalSplitLambda
+    );
+    setCascadeSplits(splits);
+    let prevSplit = near;
+    for (let i = 0; i < config.cascadeCount; i++) {
+      const cascadeFar = splits[i];
+      const override = config.cascadeOverrides[i] ?? {};
+      const light = new THREE.DirectionalLight(
+        16777215,
+        config.lightIntensity / config.cascadeCount
+      );
+      light.castShadow = true;
+      light.name = `__csm_light_${i}__`;
+      const mapSize = override.resolution ?? config.shadowMapSize;
+      light.shadow.mapSize.set(mapSize, mapSize);
+      light.shadow.bias = override.bias ?? -1e-3;
+      light.shadow.normalBias = override.normalBias ?? 0.02;
+      const corners = computeFrustumCorners(camera, prevSplit, cascadeFar);
+      const center = new THREE.Vector3();
+      for (const c of corners) {
+        center.add(c);
+      }
+      center.divideScalar(8);
+      let radius = 0;
+      for (const c of corners) {
+        radius = Math.max(radius, center.distanceTo(c));
+      }
+      radius = Math.ceil(radius);
+      const lightPos = center.clone().addScaledVector(config.lightDirection, -radius * 2);
+      light.position.copy(lightPos);
+      light.target.position.copy(center);
+      light.shadow.camera.left = -radius;
+      light.shadow.camera.right = radius;
+      light.shadow.camera.top = radius;
+      light.shadow.camera.bottom = -radius;
+      light.shadow.camera.near = 0.1;
+      light.shadow.camera.far = radius * 4;
+      light.shadow.camera.updateProjectionMatrix();
+      scene.add(light);
+      scene.add(light.target);
+      lightsRef.current.push(light);
+      prevSplit = cascadeFar;
+    }
+    return () => {
+      for (const light of lightsRef.current) {
+        scene.remove(light);
+        scene.remove(light.target);
+        light.shadow.map?.dispose();
+      }
+      lightsRef.current = [];
+    };
+  }, [scene, camera, config]);
+  useEffect(() => {
+    if (!scene) {
+      return;
+    }
+    const dbg = debugGroup.current;
+    dbg.name = "__csm_debug__";
+    if (showDebug && camera) {
+      while (dbg.children.length) {
+        dbg.remove(dbg.children[0]);
+      }
+      const near = camera.near;
+      let prevSplit = near;
+      const colors = [16711680, 65280, 255, 16776960, 16711935];
+      for (let i = 0; i < cascadeSplits.length; i++) {
+        const cascadeFar = cascadeSplits[i];
+        const corners = computeFrustumCorners(camera, prevSplit, cascadeFar);
+        const lineGeo = new THREE.BufferGeometry().setFromPoints([
+          ...corners.slice(0, 4),
+          corners[0],
+          // near quad
+          ...corners.slice(4),
+          corners[4]
+          // far quad
+        ]);
+        dbg.add(new THREE.Line(lineGeo, new THREE.LineBasicMaterial({ color: colors[i % 5] })));
+        for (let j = 0; j < 4; j++) {
+          const connectGeo = new THREE.BufferGeometry().setFromPoints([corners[j], corners[j + 4]]);
+          dbg.add(
+            new THREE.Line(connectGeo, new THREE.LineBasicMaterial({ color: colors[i % 5] }))
+          );
         }
-        lightsRef.current = [];
-        const near = camera.near;
-        const far = Math.min(camera.far, config.maxFar);
-        const splits = computeCascadeSplits(config.cascadeCount, near, far, config.splitMode, config.practicalSplitLambda);
-        setCascadeSplits(splits);
-        // Create a directional light per cascade
-        let prevSplit = near;
-        for (let i = 0; i < config.cascadeCount; i++) {
-            const cascadeFar = splits[i];
-            const override = (_b = config.cascadeOverrides[i]) !== null && _b !== void 0 ? _b : {};
-            const light = new THREE.DirectionalLight(0xffffff, config.lightIntensity / config.cascadeCount);
-            light.castShadow = true;
-            light.name = `__csm_light_${i}__`;
-            const mapSize = (_c = override.resolution) !== null && _c !== void 0 ? _c : config.shadowMapSize;
-            light.shadow.mapSize.set(mapSize, mapSize);
-            light.shadow.bias = (_d = override.bias) !== null && _d !== void 0 ? _d : -1e-3;
-            light.shadow.normalBias = (_e = override.normalBias) !== null && _e !== void 0 ? _e : 0.02;
-            // Compute cascade frustum bounds
-            const corners = computeFrustumCorners(camera, prevSplit, cascadeFar);
-            const center = new THREE.Vector3();
-            for (const c of corners) {
-                center.add(c);
-            }
-            center.divideScalar(8);
-            // Compute sphere radius to encompass frustum
-            let radius = 0;
-            for (const c of corners) {
-                radius = Math.max(radius, center.distanceTo(c));
+        prevSplit = cascadeFar;
+      }
+      scene.add(dbg);
+    } else {
+      scene.remove(dbg);
+    }
+    return () => {
+      scene.remove(dbg);
+    };
+  }, [scene, camera, showDebug, cascadeSplits]);
+  const update = useCallback(() => {
+    if (!camera || !scene) {
+      return;
+    }
+    const near = camera.near;
+    const far = Math.min(camera.far, config.maxFar);
+    const splits = computeCascadeSplits(
+      config.cascadeCount,
+      near,
+      far,
+      config.splitMode,
+      config.practicalSplitLambda
+    );
+    let prevSplit = near;
+    for (let i = 0; i < lightsRef.current.length; i++) {
+      const light = lightsRef.current[i];
+      const cascadeFar = splits[i] ?? far;
+      const corners = computeFrustumCorners(camera, prevSplit, cascadeFar);
+      const center = new THREE.Vector3();
+      for (const c of corners) {
+        center.add(c);
+      }
+      center.divideScalar(8);
+      let radius = 0;
+      for (const c of corners) {
+        radius = Math.max(radius, center.distanceTo(c));
+      }
+      radius = Math.ceil(radius);
+      const lightPos = center.clone().addScaledVector(config.lightDirection, -radius * 2);
+      light.position.copy(lightPos);
+      light.target.position.copy(center);
+      light.shadow.camera.left = -radius;
+      light.shadow.camera.right = radius;
+      light.shadow.camera.top = radius;
+      light.shadow.camera.bottom = -radius;
+      light.shadow.camera.far = radius * 4;
+      light.shadow.camera.updateProjectionMatrix();
+      prevSplit = cascadeFar;
+    }
+  }, [camera, scene, config]);
+  const dispose = useCallback(() => {
+    if (!scene) {
+      return;
+    }
+    for (const light of lightsRef.current) {
+      scene.remove(light);
+      scene.remove(light.target);
+      light.shadow.map?.dispose();
+    }
+    lightsRef.current = [];
+    scene.remove(debugGroup.current);
+  }, [scene]);
+  return {
+    config,
+    setConfig,
+    cascadeSplits,
+    lights: lightsRef.current,
+    showDebug,
+    setShowDebug,
+    update,
+    dispose
+  };
+}
+const NiceCascadedShadows = ({
+  scene,
+  camera,
+  config: configProp,
+  showDebug: initialDebug,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const { config, setConfig, cascadeSplits, showDebug, setShowDebug } = useCSM(
+    scene,
+    camera,
+    configProp
+  );
+  useEffect(() => {
+    if (initialDebug !== void 0) {
+      setShowDebug(initialDebug);
+    }
+  }, [initialDebug, setShowDebug]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-cascaded-shadows ${className}`,
+      style: { display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "lightbulb", size: 14 }),
+          " ",
+          t("cascadedShadows.cascadedShadowMaps", "Cascaded Shadow Maps")
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("cascadedShadows.cascades", "Cascades: {cascadeCount}").replace(
+            "{cascadeCount}",
+            String(config.cascadeCount)
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 1,
+              max: 5,
+              value: config.cascadeCount,
+              onChange: (e) => setConfig({ cascadeCount: parseInt(e.target.value, 10) }),
+              style: { width: "100%" }
             }
-            radius = Math.ceil(radius);
-            // Position light
-            const lightPos = center.clone().addScaledVector(config.lightDirection, -radius * 2);
-            light.position.copy(lightPos);
-            light.target.position.copy(center);
-            // Orthographic shadow camera
-            light.shadow.camera.left = -radius;
-            light.shadow.camera.right = radius;
-            light.shadow.camera.top = radius;
-            light.shadow.camera.bottom = -radius;
-            light.shadow.camera.near = 0.1;
-            light.shadow.camera.far = radius * 4;
-            light.shadow.camera.updateProjectionMatrix();
-            scene.add(light);
-            scene.add(light.target);
-            lightsRef.current.push(light);
-            prevSplit = cascadeFar;
-        }
-        return () => {
-            var _a;
-            for (const light of lightsRef.current) {
-                scene.remove(light);
-                scene.remove(light.target);
-                (_a = light.shadow.map) === null || _a === void 0 ? void 0 : _a.dispose();
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("cascadedShadows.maxDistance", "Max Distance: {maxFar}").replace(
+            "{maxFar}",
+            String(config.maxFar)
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 50,
+              max: 1e3,
+              step: 10,
+              value: config.maxFar,
+              onChange: (e) => setConfig({ maxFar: parseInt(e.target.value, 10) }),
+              style: { width: "100%" }
             }
-            lightsRef.current = [];
-        };
-    }, [scene, camera, config]);
-    // Debug visualization
-    useEffect(() => {
-        if (!scene) {
-            return;
-        }
-        const dbg = debugGroup.current;
-        dbg.name = '__csm_debug__';
-        if (showDebug && camera) {
-            // Clear old
-            while (dbg.children.length) {
-                dbg.remove(dbg.children[0]);
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("cascadedShadows.splitMode", "Split Mode:"),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: config.splitMode,
+              onChange: (e) => setConfig({ splitMode: e.target.value }),
+              style: { width: "100%", marginTop: 2 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "practical", children: t("cascadedShadows.practical", "Practical") }),
+                /* @__PURE__ */ jsx("option", { value: "logarithmic", children: t("cascadedShadows.logarithmic", "Logarithmic") }),
+                /* @__PURE__ */ jsx("option", { value: "linear", children: t("cascadedShadows.linear", "Linear") })
+              ]
             }
-            const near = camera.near;
-            let prevSplit = near;
-            const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff];
-            for (let i = 0; i < cascadeSplits.length; i++) {
-                const cascadeFar = cascadeSplits[i];
-                const corners = computeFrustumCorners(camera, prevSplit, cascadeFar);
-                // Draw frustum wireframe
-                const lineGeo = new THREE.BufferGeometry().setFromPoints([
-                    ...corners.slice(0, 4),
-                    corners[0], // near quad
-                    ...corners.slice(4),
-                    corners[4], // far quad
-                ]);
-                dbg.add(new THREE.Line(lineGeo, new THREE.LineBasicMaterial({ color: colors[i % 5] })));
-                // Connecting lines
-                for (let j = 0; j < 4; j++) {
-                    const connectGeo = new THREE.BufferGeometry().setFromPoints([corners[j], corners[j + 4]]);
-                    dbg.add(new THREE.Line(connectGeo, new THREE.LineBasicMaterial({ color: colors[i % 5] })));
-                }
-                prevSplit = cascadeFar;
+          )
+        ] }),
+        config.splitMode === "practical" && /* @__PURE__ */ jsxs("label", { children: [
+          t("cascadedShadows.lambda", "Lambda: {practicalSplitLambda}").replace(
+            "{practicalSplitLambda}",
+            String(config.practicalSplitLambda.toFixed(2))
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 1,
+              step: 0.05,
+              value: config.practicalSplitLambda,
+              onChange: (e) => setConfig({ practicalSplitLambda: parseFloat(e.target.value) }),
+              style: { width: "100%" }
             }
-            scene.add(dbg);
-        }
-        else {
-            scene.remove(dbg);
-        }
-        return () => {
-            scene.remove(dbg);
-        };
-    }, [scene, camera, showDebug, cascadeSplits]);
-    const update = useCallback(() => {
-        var _a;
-        if (!camera || !scene) {
-            return;
-        }
-        const near = camera.near;
-        const far = Math.min(camera.far, config.maxFar);
-        const splits = computeCascadeSplits(config.cascadeCount, near, far, config.splitMode, config.practicalSplitLambda);
-        let prevSplit = near;
-        for (let i = 0; i < lightsRef.current.length; i++) {
-            const light = lightsRef.current[i];
-            const cascadeFar = (_a = splits[i]) !== null && _a !== void 0 ? _a : far;
-            const corners = computeFrustumCorners(camera, prevSplit, cascadeFar);
-            const center = new THREE.Vector3();
-            for (const c of corners) {
-                center.add(c);
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("cascadedShadows.shadowMapSize", "Shadow Map Size: {shadowMapSize}").replace(
+            "{shadowMapSize}",
+            String(config.shadowMapSize)
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: config.shadowMapSize,
+              onChange: (e) => setConfig({ shadowMapSize: parseInt(e.target.value, 10) }),
+              style: { width: "100%", marginTop: 2 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: 512, children: "512" }),
+                /* @__PURE__ */ jsx("option", { value: 1024, children: "1024" }),
+                /* @__PURE__ */ jsx("option", { value: 2048, children: "2048" }),
+                /* @__PURE__ */ jsx("option", { value: 4096, children: "4096" })
+              ]
             }
-            center.divideScalar(8);
-            let radius = 0;
-            for (const c of corners) {
-                radius = Math.max(radius, center.distanceTo(c));
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 10, opacity: 0.7 }, children: t("cascadedShadows.cascadeSplits", "Cascade splits: {cascadeSplits}").replace(
+          "{cascadeSplits}",
+          String(cascadeSplits.map((s) => s.toFixed(1)).join(" | "))
+        ) }),
+        /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: showDebug,
+              onChange: (e) => setShowDebug(e.target.checked)
             }
-            radius = Math.ceil(radius);
-            const lightPos = center.clone().addScaledVector(config.lightDirection, -radius * 2);
-            light.position.copy(lightPos);
-            light.target.position.copy(center);
-            light.shadow.camera.left = -radius;
-            light.shadow.camera.right = radius;
-            light.shadow.camera.top = radius;
-            light.shadow.camera.bottom = -radius;
-            light.shadow.camera.far = radius * 4;
-            light.shadow.camera.updateProjectionMatrix();
-            prevSplit = cascadeFar;
-        }
-    }, [camera, scene, config]);
-    const dispose = useCallback(() => {
-        var _a;
-        if (!scene) {
-            return;
-        }
-        for (const light of lightsRef.current) {
-            scene.remove(light);
-            scene.remove(light.target);
-            (_a = light.shadow.map) === null || _a === void 0 ? void 0 : _a.dispose();
-        }
-        lightsRef.current = [];
-        scene.remove(debugGroup.current);
-    }, [scene]);
-    return {
-        config,
-        setConfig,
-        cascadeSplits,
-        lights: lightsRef.current,
-        showDebug,
-        setShowDebug,
-        update,
-        dispose,
-    };
-}
-/* ── Component ── */
-const NiceCascadedShadows = ({ scene, camera, config: configProp, showDebug: initialDebug, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { config, setConfig, cascadeSplits, showDebug, setShowDebug } = useCSM(scene, camera, configProp);
-    useEffect(() => {
-        if (initialDebug !== undefined) {
-            setShowDebug(initialDebug);
-        }
-    }, [initialDebug, setShowDebug]);
-    return (jsxs("div", { className: `nice-cascaded-shadows ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "lightbulb", size: 14 }), ' ', t('cascadedShadows.cascadedShadowMaps', 'Cascaded Shadow Maps')] }), jsxs("label", { children: [t('cascadedShadows.cascades', 'Cascades: {cascadeCount}').replace('{cascadeCount}', String(config.cascadeCount)), jsx("input", { type: "range", min: 1, max: 5, value: config.cascadeCount, onChange: (e) => setConfig({ cascadeCount: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('cascadedShadows.maxDistance', 'Max Distance: {maxFar}').replace('{maxFar}', String(config.maxFar)), jsx("input", { type: "range", min: 50, max: 1000, step: 10, value: config.maxFar, onChange: (e) => setConfig({ maxFar: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('cascadedShadows.splitMode', 'Split Mode:'), jsxs("select", { value: config.splitMode, onChange: (e) => setConfig({ splitMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "practical", children: t('cascadedShadows.practical', 'Practical') }), jsx("option", { value: "logarithmic", children: t('cascadedShadows.logarithmic', 'Logarithmic') }), jsx("option", { value: "linear", children: t('cascadedShadows.linear', 'Linear') })] })] }), config.splitMode === 'practical' && (jsxs("label", { children: [t('cascadedShadows.lambda', 'Lambda: {practicalSplitLambda}').replace('{practicalSplitLambda}', String(config.practicalSplitLambda.toFixed(2))), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.practicalSplitLambda, onChange: (e) => setConfig({ practicalSplitLambda: parseFloat(e.target.value) }), style: { width: '100%' } })] })), jsxs("label", { children: [t('cascadedShadows.shadowMapSize', 'Shadow Map Size: {shadowMapSize}').replace('{shadowMapSize}', String(config.shadowMapSize)), jsxs("select", { value: config.shadowMapSize, onChange: (e) => setConfig({ shadowMapSize: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: 512, children: "512" }), jsx("option", { value: 1024, children: "1024" }), jsx("option", { value: 2048, children: "2048" }), jsx("option", { value: 4096, children: "4096" })] })] }), jsx("div", { style: { fontSize: 10, opacity: 0.7 }, children: t('cascadedShadows.cascadeSplits', 'Cascade splits: {cascadeSplits}').replace('{cascadeSplits}', String(cascadeSplits.map((s) => s.toFixed(1)).join(' | '))) }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: showDebug, onChange: (e) => setShowDebug(e.target.checked) }), t('cascadedShadows.showCascadeFrustums', 'Show cascade frustums')] })] }));
+          ),
+          t("cascadedShadows.showCascadeFrustums", "Show cascade frustums")
+        ] })
+      ]
+    }
+  );
+};
+export {
+  NiceCascadedShadows,
+  useCSM
 };
-
-export { NiceCascadedShadows, useCSM };