@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/particle/NiceParticleEditor.js

@@ -1,603 +1,1221 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceAppShell, resolveCssColor, clickOnActivationKey, NiceIcon } from '@nice2dev/ui';
-import { useRef, useMemo, useEffect, useReducer, useState } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ParticleEditor.module.css.js';
-import { MODULE_NAMES, BLEND_MODE_NAMES, RENDER_MODE_NAMES, EMITTER_SHAPE_NAMES } from './particleEditorTypes.js';
-import { applyPreset, createDefaultSystem, PARTICLE_PRESETS, importSystemsFromJSON, exportSystemsToJSON, cloneSystem } from './particleEditorUtils.js';
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   State Reducer
-   ═══════════════════════════════════════════════════════════════════════════ */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceTutorialButton, resolveTutorial, NiceAppShell, resolveCssColor, clickOnActivationKey, NiceIcon } from "@nice2dev/ui";
+import { useRef, useMemo, useEffect, useReducer, useState } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ParticleEditor.module.css.js";
+import { MODULE_NAMES, BLEND_MODE_NAMES, RENDER_MODE_NAMES, EMITTER_SHAPE_NAMES } from "./particleEditorTypes.js";
+import { applyPreset, createDefaultSystem, PARTICLE_PRESETS, importSystemsFromJSON, exportSystemsToJSON, cloneSystem } from "./particleEditorUtils.js";
 function createInitialState(systems) {
-    var _a;
-    return {
-        systems: systems || [createDefaultSystem()],
-        selectedSystemId: ((_a = systems === null || systems === void 0 ? void 0 : systems[0]) === null || _a === void 0 ? void 0 : _a.id) || null,
-        selectedModule: 'main',
-        expandedModules: ['main', 'emission', 'shape', 'colorOverLifetime'],
-        tool: 'select',
-        viewMode: '3d',
-        showGrid: true,
-        showBounds: false,
-        showVelocities: false,
-        showEmitterShape: true,
-        showForces: false,
-        isPlaying: true,
-        isPaused: false,
-        playbackSpeed: 1,
-        currentTime: 0,
-        previewMode: 'looping',
-        undoStack: [],
-        redoStack: [],
-        clipboard: null,
-    };
+  return {
+    systems: systems || [createDefaultSystem()],
+    selectedSystemId: systems?.[0]?.id || null,
+    selectedModule: "main",
+    expandedModules: ["main", "emission", "shape", "colorOverLifetime"],
+    tool: "select",
+    viewMode: "3d",
+    showGrid: true,
+    showBounds: false,
+    showVelocities: false,
+    showEmitterShape: true,
+    showForces: false,
+    isPlaying: true,
+    isPaused: false,
+    playbackSpeed: 1,
+    currentTime: 0,
+    previewMode: "looping",
+    undoStack: [],
+    redoStack: [],
+    clipboard: null
+  };
 }
 function pushToUndoStack(state) {
-    return {
-        ...state,
-        undoStack: [...state.undoStack.slice(-49), state.systems],
-        redoStack: [],
-    };
+  return {
+    ...state,
+    undoStack: [...state.undoStack.slice(-49), state.systems],
+    redoStack: []
+  };
 }
 function particleEditorReducer(state, action) {
-    var _a;
-    switch (action.type) {
-        case 'ADD_SYSTEM': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: [...newState.systems, action.system],
-                selectedSystemId: action.system.id,
-            };
-        }
-        case 'REMOVE_SYSTEM': {
-            if (state.systems.length <= 1) {
-                return state;
-            }
-            const newState = pushToUndoStack(state);
-            const newSystems = newState.systems.filter((s) => s.id !== action.systemId);
-            return {
-                ...newState,
-                systems: newSystems,
-                selectedSystemId: newState.selectedSystemId === action.systemId
-                    ? ((_a = newSystems[0]) === null || _a === void 0 ? void 0 : _a.id) || null
-                    : newState.selectedSystemId,
-            };
-        }
-        case 'UPDATE_SYSTEM': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId ? { ...s, ...action.updates } : s),
-            };
-        }
-        case 'DUPLICATE_SYSTEM': {
-            const system = state.systems.find((s) => s.id === action.systemId);
-            if (!system) {
-                return state;
+  switch (action.type) {
+    case "ADD_SYSTEM": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: [...newState.systems, action.system],
+        selectedSystemId: action.system.id
+      };
+    }
+    case "REMOVE_SYSTEM": {
+      if (state.systems.length <= 1) {
+        return state;
+      }
+      const newState = pushToUndoStack(state);
+      const newSystems = newState.systems.filter((s) => s.id !== action.systemId);
+      return {
+        ...newState,
+        systems: newSystems,
+        selectedSystemId: newState.selectedSystemId === action.systemId ? newSystems[0]?.id || null : newState.selectedSystemId
+      };
+    }
+    case "UPDATE_SYSTEM": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, ...action.updates } : s
+        )
+      };
+    }
+    case "DUPLICATE_SYSTEM": {
+      const system = state.systems.find((s) => s.id === action.systemId);
+      if (!system) {
+        return state;
+      }
+      const cloned = cloneSystem(system);
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: [...newState.systems, cloned],
+        selectedSystemId: cloned.id
+      };
+    }
+    case "SELECT_SYSTEM":
+      return { ...state, selectedSystemId: action.systemId };
+    case "SELECT_MODULE":
+      return { ...state, selectedModule: action.module };
+    case "TOGGLE_MODULE":
+      return {
+        ...state,
+        expandedModules: state.expandedModules.includes(action.module) ? state.expandedModules.filter((m) => m !== action.module) : [...state.expandedModules, action.module]
+      };
+    case "SET_TOOL":
+      return { ...state, tool: action.tool };
+    case "SET_VIEW_MODE":
+      return { ...state, viewMode: action.mode };
+    case "TOGGLE_GRID":
+      return { ...state, showGrid: !state.showGrid };
+    case "TOGGLE_BOUNDS":
+      return { ...state, showBounds: !state.showBounds };
+    case "TOGGLE_VELOCITIES":
+      return { ...state, showVelocities: !state.showVelocities };
+    case "TOGGLE_EMITTER_SHAPE":
+      return { ...state, showEmitterShape: !state.showEmitterShape };
+    case "TOGGLE_FORCES":
+      return { ...state, showForces: !state.showForces };
+    case "PLAY":
+      return { ...state, isPlaying: true, isPaused: false };
+    case "PAUSE":
+      return { ...state, isPaused: !state.isPaused };
+    case "STOP":
+      return { ...state, isPlaying: false, isPaused: false, currentTime: 0 };
+    case "RESTART":
+      return { ...state, currentTime: 0, isPlaying: true, isPaused: false };
+    case "SET_PLAYBACK_SPEED":
+      return { ...state, playbackSpeed: action.speed };
+    case "SET_CURRENT_TIME":
+      return { ...state, currentTime: action.time };
+    case "SET_PREVIEW_MODE":
+      return { ...state, previewMode: action.mode };
+    case "UNDO": {
+      if (state.undoStack.length === 0) {
+        return state;
+      }
+      const previous = state.undoStack[state.undoStack.length - 1];
+      return {
+        ...state,
+        systems: previous,
+        undoStack: state.undoStack.slice(0, -1),
+        redoStack: [...state.redoStack, state.systems]
+      };
+    }
+    case "REDO": {
+      if (state.redoStack.length === 0) {
+        return state;
+      }
+      const next = state.redoStack[state.redoStack.length - 1];
+      return {
+        ...state,
+        systems: next,
+        undoStack: [...state.undoStack, state.systems],
+        redoStack: state.redoStack.slice(0, -1)
+      };
+    }
+    case "COPY_SYSTEM": {
+      const system = state.systems.find((s) => s.id === action.systemId);
+      if (!system) {
+        return state;
+      }
+      return { ...state, clipboard: { ...system } };
+    }
+    case "COPY_MODULE": {
+      const system = state.systems.find((s) => s.id === action.systemId);
+      if (!system) {
+        return state;
+      }
+      const moduleData = system[action.moduleKey];
+      if (!moduleData) {
+        return state;
+      }
+      return { ...state, clipboard: { [action.moduleKey]: moduleData } };
+    }
+    case "PASTE_SYSTEM": {
+      if (!state.clipboard || !state.clipboard.id) {
+        return state;
+      }
+      const pasted = cloneSystem(state.clipboard);
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: [...newState.systems, pasted],
+        selectedSystemId: pasted.id
+      };
+    }
+    case "PASTE_MODULE": {
+      if (!state.clipboard || state.clipboard.id) {
+        return state;
+      }
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, ...state.clipboard } : s
+        )
+      };
+    }
+    case "ADD_FORCE": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, externalForces: [...s.externalForces, action.force] } : s
+        )
+      };
+    }
+    case "REMOVE_FORCE": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, externalForces: s.externalForces.filter((f) => f.id !== action.forceId) } : s
+        )
+      };
+    }
+    case "UPDATE_FORCE": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? {
+            ...s,
+            externalForces: s.externalForces.map(
+              (f) => f.id === action.forceId ? { ...f, ...action.updates } : f
+            )
+          } : s
+        )
+      };
+    }
+    case "ADD_SUB_EMITTER": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, subEmitters: [...s.subEmitters, action.subEmitter] } : s
+        )
+      };
+    }
+    case "REMOVE_SUB_EMITTER": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, subEmitters: s.subEmitters.filter((se) => se.id !== action.subEmitterId) } : s
+        )
+      };
+    }
+    case "ADD_BURST": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? { ...s, emission: { ...s.emission, bursts: [...s.emission.bursts, action.burst] } } : s
+        )
+      };
+    }
+    case "REMOVE_BURST": {
+      const newState = pushToUndoStack(state);
+      return {
+        ...newState,
+        systems: newState.systems.map(
+          (s) => s.id === action.systemId ? {
+            ...s,
+            emission: {
+              ...s.emission,
+              bursts: s.emission.bursts.filter((_, i) => i !== action.burstIndex)
             }
-            const cloned = cloneSystem(system);
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: [...newState.systems, cloned],
-                selectedSystemId: cloned.id,
-            };
+          } : s
+        )
+      };
+    }
+    case "LOAD_SYSTEMS": {
+      return {
+        ...createInitialState(action.systems),
+        undoStack: state.undoStack,
+        redoStack: state.redoStack
+      };
+    }
+    case "NEW_PROJECT":
+      return createInitialState();
+    default:
+      return state;
+  }
+}
+function useParticleEditor(initialSystems) {
+  const [state, dispatch] = useReducer(particleEditorReducer, initialSystems, createInitialState);
+  return { state, dispatch };
+}
+function SystemListPanel({
+  systems,
+  selectedId,
+  onSelect,
+  onAdd,
+  onRemove,
+  onDuplicate,
+  onRename,
+  onAddPreset
+}) {
+  const { t } = useNiceTranslation();
+  const [editingId, setEditingId] = useState(null);
+  const [editName, setEditName] = useState("");
+  const [showPresets, setShowPresets] = useState(false);
+  const handleStartRename = (system) => {
+    setEditingId(system.id);
+    setEditName(system.name);
+  };
+  const handleFinishRename = () => {
+    if (editingId && editName.trim()) {
+      onRename(editingId, editName.trim());
+    }
+    setEditingId(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.systemList, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.systemListHeader, children: [
+      /* @__PURE__ */ jsx("span", { children: t("particleEditor.systems", "Systems ({systems})").replace(
+        "{systems}",
+        String(systems.length)
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.systemListActions, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onAdd,
+            title: t("particleEditor.newSystem", "New System"),
+            "aria-label": t("particleEditor.newSystem", "New System"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "plus", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowPresets(!showPresets),
+            title: t("particleEditor.addPreset", "Add Preset"),
+            "aria-label": t("particleEditor.addPreset", "Add Preset"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    showPresets && /* @__PURE__ */ jsx("div", { className: styles.presetMenu, children: Object.keys(PARTICLE_PRESETS).map((preset) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: styles.presetItem,
+        onClick: () => {
+          onAddPreset(preset);
+          setShowPresets(false);
+        },
+        children: preset.charAt(0).toUpperCase() + preset.slice(1)
+      },
+      preset
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: styles.systemItems, children: systems.map((system) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: clickOnActivationKey,
+        className: `${styles.systemItem} ${selectedId === system.id ? styles.selected : ""}`,
+        onClick: () => onSelect(system.id),
+        children: editingId === system.id ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: editName,
+            onChange: (e) => setEditName(e.target.value),
+            onBlur: handleFinishRename,
+            onKeyDown: (e) => e.key === "Enter" && handleFinishRename(),
+            autoFocus: true,
+            className: styles.renameInput
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.systemName, onDoubleClick: () => handleStartRename(system), children: system.name }),
+          /* @__PURE__ */ jsxs("div", { className: styles.systemItemActions, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDuplicate(system.id);
+                },
+                title: t("particleEditor.duplicate", "Duplicate"),
+                "aria-label": t("particleEditor.duplicate", "Duplicate"),
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemove(system.id);
+                },
+                title: t("particleEditor.remove", "Remove"),
+                "aria-label": t("particleEditor.remove", "Remove"),
+                disabled: systems.length <= 1,
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14 })
+              }
+            )
+          ] })
+        ] })
+      },
+      system.id
+    )) })
+  ] });
+}
+function InspectorPanel({
+  system,
+  expandedModules,
+  selectedModule,
+  onToggleModule,
+  onSelectModule: _onSelectModule,
+  onUpdateSystem
+}) {
+  const { t } = useNiceTranslation();
+  if (!system) {
+    return /* @__PURE__ */ jsx("div", { className: styles.inspector, children: /* @__PURE__ */ jsx("div", { className: styles.emptyInspector, children: t("particleEditor.noSystemSelected", "No system selected") }) });
+  }
+  const modules = [
+    { key: "main", hasEnabled: false },
+    { key: "emission", hasEnabled: true, enabled: system.emission.enabled },
+    { key: "shape", hasEnabled: false },
+    { key: "velocityOverLifetime", hasEnabled: true, enabled: system.velocityOverLifetime.enabled },
+    {
+      key: "limitVelocityOverLifetime",
+      hasEnabled: true,
+      enabled: system.limitVelocityOverLifetime.enabled
+    },
+    { key: "inheritVelocity", hasEnabled: true, enabled: system.inheritVelocity.enabled },
+    { key: "forceOverLifetime", hasEnabled: true, enabled: system.forceOverLifetime.enabled },
+    { key: "colorOverLifetime", hasEnabled: true, enabled: system.colorOverLifetime.enabled },
+    { key: "colorBySpeed", hasEnabled: true, enabled: system.colorBySpeed.enabled },
+    { key: "sizeOverLifetime", hasEnabled: true, enabled: system.sizeOverLifetime.enabled },
+    { key: "sizeBySpeed", hasEnabled: true, enabled: system.sizeBySpeed.enabled },
+    { key: "rotationOverLifetime", hasEnabled: true, enabled: system.rotationOverLifetime.enabled },
+    { key: "rotationBySpeed", hasEnabled: true, enabled: system.rotationBySpeed.enabled },
+    { key: "externalForces", hasEnabled: false },
+    { key: "noise", hasEnabled: true, enabled: system.noise.enabled },
+    { key: "collision", hasEnabled: true, enabled: system.collision.enabled },
+    { key: "triggers", hasEnabled: true, enabled: system.triggers.enabled },
+    { key: "subEmitters", hasEnabled: false },
+    {
+      key: "textureSheetAnimation",
+      hasEnabled: true,
+      enabled: system.textureSheetAnimation.enabled
+    },
+    { key: "lights", hasEnabled: true, enabled: system.lights.enabled },
+    { key: "trails", hasEnabled: false },
+    { key: "renderer", hasEnabled: false },
+    { key: "material", hasEnabled: false }
+  ];
+  const handleModuleToggle = (key, enabled) => {
+    const current = system[key];
+    onUpdateSystem({ [key]: { ...current, enabled } });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.inspector, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.inspectorHeader, children: /* @__PURE__ */ jsx("span", { children: system.name }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.inspectorModules, children: modules.map((mod) => /* @__PURE__ */ jsxs("div", { className: styles.moduleSection, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-expanded": expandedModules.includes(mod.key),
+          onKeyDown: clickOnActivationKey,
+          className: `${styles.moduleHeader} ${selectedModule === mod.key ? styles.selected : ""}`,
+          onClick: () => onToggleModule(mod.key),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.moduleIcon, children: /* @__PURE__ */ jsx(
+              NiceIcon,
+              {
+                name: expandedModules.includes(mod.key) ? "chevron-down" : "chevron-right",
+                size: 14
+              }
+            ) }),
+            mod.hasEnabled && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: mod.enabled,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  handleModuleToggle(mod.key, e.target.checked);
+                },
+                className: styles.moduleCheckbox
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles.moduleName, children: MODULE_NAMES[mod.key] || mod.key })
+          ]
         }
-        case 'SELECT_SYSTEM':
-            return { ...state, selectedSystemId: action.systemId };
-        case 'SELECT_MODULE':
-            return { ...state, selectedModule: action.module };
-        case 'TOGGLE_MODULE':
-            return {
-                ...state,
-                expandedModules: state.expandedModules.includes(action.module)
-                    ? state.expandedModules.filter((m) => m !== action.module)
-                    : [...state.expandedModules, action.module],
-            };
-        case 'SET_TOOL':
-            return { ...state, tool: action.tool };
-        case 'SET_VIEW_MODE':
-            return { ...state, viewMode: action.mode };
-        case 'TOGGLE_GRID':
-            return { ...state, showGrid: !state.showGrid };
-        case 'TOGGLE_BOUNDS':
-            return { ...state, showBounds: !state.showBounds };
-        case 'TOGGLE_VELOCITIES':
-            return { ...state, showVelocities: !state.showVelocities };
-        case 'TOGGLE_EMITTER_SHAPE':
-            return { ...state, showEmitterShape: !state.showEmitterShape };
-        case 'TOGGLE_FORCES':
-            return { ...state, showForces: !state.showForces };
-        case 'PLAY':
-            return { ...state, isPlaying: true, isPaused: false };
-        case 'PAUSE':
-            return { ...state, isPaused: !state.isPaused };
-        case 'STOP':
-            return { ...state, isPlaying: false, isPaused: false, currentTime: 0 };
-        case 'RESTART':
-            return { ...state, currentTime: 0, isPlaying: true, isPaused: false };
-        case 'SET_PLAYBACK_SPEED':
-            return { ...state, playbackSpeed: action.speed };
-        case 'SET_CURRENT_TIME':
-            return { ...state, currentTime: action.time };
-        case 'SET_PREVIEW_MODE':
-            return { ...state, previewMode: action.mode };
-        case 'UNDO': {
-            if (state.undoStack.length === 0) {
-                return state;
+      ),
+      expandedModules.includes(mod.key) && /* @__PURE__ */ jsx("div", { className: styles.moduleContent, children: /* @__PURE__ */ jsx(ModuleEditor, { system, moduleKey: mod.key, onUpdate: onUpdateSystem }) })
+    ] }, mod.key)) })
+  ] });
+}
+function ModuleEditor({ system, moduleKey, onUpdate }) {
+  const { t } = useNiceTranslation();
+  const renderDistributionInput = (label, value, onChange) => /* @__PURE__ */ jsxs("div", { className: styles.propertyRow, children: [
+    /* @__PURE__ */ jsx("label", { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.distributionInput, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: value.type,
+          onChange: (e) => {
+            const newType = e.target.value;
+            if (newType === "constant") {
+              onChange({ type: "constant", value: value.type === "constant" ? value.value : 1 });
+            } else if (newType === "random") {
+              onChange({ type: "random", min: 0, max: 1 });
+            } else if (newType === "curve") {
+              onChange({
+                type: "curve",
+                curve: [
+                  { time: 0, value: 1 },
+                  { time: 1, value: 1 }
+                ]
+              });
             }
-            const previous = state.undoStack[state.undoStack.length - 1];
-            return {
-                ...state,
-                systems: previous,
-                undoStack: state.undoStack.slice(0, -1),
-                redoStack: [...state.redoStack, state.systems],
-            };
+          },
+          className: styles.distributionType,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "constant", children: t("particleEditor.constant", "Constant") }),
+            /* @__PURE__ */ jsx("option", { value: "random", children: t("particleEditor.random", "Random") }),
+            /* @__PURE__ */ jsx("option", { value: "curve", children: t("particleEditor.curve", "Curve") })
+          ]
         }
-        case 'REDO': {
-            if (state.redoStack.length === 0) {
-                return state;
-            }
-            const next = state.redoStack[state.redoStack.length - 1];
-            return {
-                ...state,
-                systems: next,
-                undoStack: [...state.undoStack, state.systems],
-                redoStack: state.redoStack.slice(0, -1),
-            };
+      ),
+      value.type === "constant" && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: value.value,
+          onChange: (e) => onChange({ ...value, value: parseFloat(e.target.value) || 0 }),
+          className: styles.numberInput
         }
-        case 'COPY_SYSTEM': {
-            const system = state.systems.find((s) => s.id === action.systemId);
-            if (!system) {
-                return state;
+      ),
+      value.type === "random" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            value: value.min,
+            onChange: (e) => onChange({ ...value, min: parseFloat(e.target.value) || 0 }),
+            className: styles.numberInput,
+            placeholder: t("particleEditor.min", "Min")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            value: value.max,
+            onChange: (e) => onChange({ ...value, max: parseFloat(e.target.value) || 0 }),
+            className: styles.numberInput,
+            placeholder: t("particleEditor.max", "Max")
+          }
+        )
+      ] })
+    ] })
+  ] });
+  const renderNumberInput = (label, value, onChange, props) => /* @__PURE__ */ jsxs("div", { className: styles.propertyRow, children: [
+    /* @__PURE__ */ jsx("label", { children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "number",
+        value,
+        onChange: (e) => onChange(parseFloat(e.target.value) || 0),
+        className: styles.numberInput,
+        ...props
+      }
+    )
+  ] });
+  const renderToggle = (label, value, onChange) => /* @__PURE__ */ jsxs("div", { className: styles.propertyRow, children: [
+    /* @__PURE__ */ jsx("label", { children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: value,
+        onChange: (e) => onChange(e.target.checked),
+        className: styles.toggleInput
+      }
+    )
+  ] });
+  const renderSelect = (label, value, options, onChange) => /* @__PURE__ */ jsxs("div", { className: styles.propertyRow, children: [
+    /* @__PURE__ */ jsx("label", { children: label }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: styles.selectInput,
+        children: Object.entries(options).map(([key, name]) => /* @__PURE__ */ jsx("option", { value: key, children: name }, key))
+      }
+    )
+  ] });
+  switch (moduleKey) {
+    case "main":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderNumberInput("Duration", system.duration, (v) => onUpdate({ duration: v }), {
+          min: 0,
+          step: 0.1
+        }),
+        renderToggle("Looping", system.looping, (v) => onUpdate({ looping: v })),
+        renderToggle("Prewarm", system.prewarm, (v) => onUpdate({ prewarm: v })),
+        renderDistributionInput(
+          "Start Delay",
+          system.startDelay,
+          (v) => onUpdate({ startDelay: v })
+        ),
+        renderDistributionInput(
+          "Start Lifetime",
+          system.startLifetime,
+          (v) => onUpdate({ startLifetime: v })
+        ),
+        renderDistributionInput(
+          "Start Speed",
+          system.startSpeed,
+          (v) => onUpdate({ startSpeed: v })
+        ),
+        renderDistributionInput(
+          "Start Size",
+          system.startSize,
+          (v) => onUpdate({ startSize: v })
+        ),
+        renderDistributionInput(
+          "Start Rotation",
+          system.startRotation,
+          (v) => onUpdate({ startRotation: v })
+        ),
+        renderDistributionInput(
+          "Gravity Modifier",
+          system.gravityModifier,
+          (v) => onUpdate({ gravityModifier: v })
+        ),
+        renderSelect(
+          "Simulation Space",
+          system.simulationSpace,
+          { local: "Local", world: "World", custom: "Custom" },
+          (v) => onUpdate({ simulationSpace: v })
+        ),
+        renderNumberInput(
+          "Simulation Speed",
+          system.simulationSpeed,
+          (v) => onUpdate({ simulationSpeed: v }),
+          { min: 0, step: 0.1 }
+        ),
+        renderNumberInput(
+          "Max Particles",
+          system.maxParticles,
+          (v) => onUpdate({ maxParticles: v }),
+          { min: 1, step: 1 }
+        )
+      ] });
+    case "emission":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderDistributionInput(
+          "Rate over Time",
+          system.emission.rateOverTime,
+          (v) => onUpdate({ emission: { ...system.emission, rateOverTime: v } })
+        ),
+        renderDistributionInput(
+          "Rate over Distance",
+          system.emission.rateOverDistance,
+          (v) => onUpdate({ emission: { ...system.emission, rateOverDistance: v } })
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.propertyRow, children: [
+          /* @__PURE__ */ jsx("label", { children: t("particleEditor.bursts", "Bursts ({bursts})").replace(
+            "{bursts}",
+            String(system.emission.bursts.length)
+          ) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: styles.addButton,
+              onClick: () => onUpdate({
+                emission: {
+                  ...system.emission,
+                  bursts: [
+                    ...system.emission.bursts,
+                    {
+                      time: 0,
+                      count: { type: "constant", value: 30 },
+                      cycles: 1,
+                      interval: 0.01,
+                      probability: 1
+                    }
+                  ]
+                }
+              }),
+              children: t("particleEditor.addBurst", "Add Burst")
             }
-            return { ...state, clipboard: { ...system } };
+          )
+        ] })
+      ] });
+    case "shape":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderSelect(
+          "Shape",
+          system.shape.type,
+          EMITTER_SHAPE_NAMES,
+          (v) => (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
+            onUpdate({ shape: { ...system.shape, type: v } })
+          )
+        ),
+        renderToggle(
+          "Emit from Shell",
+          system.shape.emitFromShell,
+          (v) => onUpdate({ shape: { ...system.shape, emitFromShell: v } })
+        ),
+        renderToggle(
+          "Random Direction",
+          system.shape.randomDirection,
+          (v) => onUpdate({ shape: { ...system.shape, randomDirection: v } })
+        ),
+        (system.shape.type === "sphere" || system.shape.type === "hemisphere" || system.shape.type === "cone" || system.shape.type === "circle") && /* @__PURE__ */ jsx(Fragment, { children: renderDistributionInput(
+          "Radius",
+          system.shape.radius,
+          (v) => (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
+            onUpdate({ shape: { ...system.shape, radius: v } })
+          )
+        ) }),
+        system.shape.type === "cone" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderNumberInput(
+            "Angle",
+            system.shape.angle,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
+            (v) => onUpdate({ shape: { ...system.shape, angle: v } }),
+            { min: 0, max: 90 }
+          ),
+          renderNumberInput(
+            "Length",
+            system.shape.length,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
+            (v) => onUpdate({ shape: { ...system.shape, length: v } }),
+            { min: 0 }
+          )
+        ] })
+      ] });
+    case "renderer":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderSelect(
+          "Render Mode",
+          system.renderer.type,
+          RENDER_MODE_NAMES,
+          (v) => (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
+            onUpdate({ renderer: { ...system.renderer, type: v } })
+          )
+        ),
+        renderSelect(
+          "Sort Mode",
+          system.renderer.sortMode,
+          {
+            none: "None",
+            by_distance: "By Distance",
+            oldest_in_front: "Oldest in Front",
+            youngest_in_front: "Youngest in Front"
+          },
+          (v) => onUpdate({ renderer: { ...system.renderer, sortMode: v } })
+        )
+      ] });
+    case "material":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderSelect(
+          "Shading",
+          system.material.shading,
+          { unlit: "Unlit", lit: "Lit" },
+          (v) => onUpdate({ material: { ...system.material, shading: v } })
+        ),
+        renderSelect(
+          "Blend Mode",
+          system.material.blendMode,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- BLEND_MODE_NAMES is keyed by ParticleBlendMode but renderSelect is generic
+          BLEND_MODE_NAMES,
+          (v) => onUpdate({ material: { ...system.material, blendMode: v } })
+        )
+      ] });
+    default:
+      return /* @__PURE__ */ jsx("div", { className: styles.moduleNotImplemented, children: t("particleEditor.moduleEditorNotYetImplemented", "Module editor not yet implemented") });
+  }
+}
+function Toolbar({
+  isPlaying,
+  isPaused,
+  playbackSpeed,
+  currentTime,
+  canUndo,
+  canRedo,
+  showGrid,
+  showBounds,
+  showEmitterShape,
+  viewMode,
+  onPlay,
+  onPause,
+  onStop,
+  onRestart,
+  onSpeedChange,
+  onUndo,
+  onRedo,
+  onToggleGrid,
+  onToggleBounds,
+  onToggleEmitterShape,
+  onViewModeChange,
+  onNew,
+  onExport,
+  onImport
+}) {
+  const { t } = useNiceTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onNew,
+          title: t("particleEditor.newProject", "New Project"),
+          "aria-label": t("particleEditor.newProject", "New Project"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 16 })
         }
-        case 'COPY_MODULE': {
-            const system = state.systems.find((s) => s.id === action.systemId);
-            if (!system) {
-                return state;
-            }
-            const moduleData = system[action.moduleKey];
-            if (!moduleData) {
-                return state;
-            }
-            return { ...state, clipboard: { [action.moduleKey]: moduleData } };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onImport,
+          title: t("particleEditor.import", "Import"),
+          "aria-label": t("particleEditor.import", "Import"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "folder", size: 16 })
         }
-        case 'PASTE_SYSTEM': {
-            if (!state.clipboard || !state.clipboard.id) {
-                return state;
-            }
-            const pasted = cloneSystem(state.clipboard);
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: [...newState.systems, pasted],
-                selectedSystemId: pasted.id,
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onExport,
+          title: t("particleEditor.export", "Export"),
+          "aria-label": t("particleEditor.export", "Export"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "save", size: 16 })
         }
-        case 'PASTE_MODULE': {
-            if (!state.clipboard || state.clipboard.id) {
-                return state;
-            }
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId ? { ...s, ...state.clipboard } : s),
-            };
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onUndo,
+          disabled: !canUndo,
+          title: t("particleEditor.undo", "Undo"),
+          "aria-label": t("particleEditor.undo", "Undo"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-left", size: 16 })
         }
-        case 'ADD_FORCE': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? { ...s, externalForces: [...s.externalForces, action.force] }
-                    : s),
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRedo,
+          disabled: !canRedo,
+          title: t("particleEditor.redo", "Redo"),
+          "aria-label": t("particleEditor.redo", "Redo"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-right", size: 16 })
         }
-        case 'REMOVE_FORCE': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? { ...s, externalForces: s.externalForces.filter((f) => f.id !== action.forceId) }
-                    : s),
-            };
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      isPlaying && !isPaused ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onPause,
+          title: t("particleEditor.pause", "Pause"),
+          "aria-label": t("particleEditor.pause", "Pause"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "pause", size: 16 })
         }
-        case 'UPDATE_FORCE': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? {
-                        ...s,
-                        externalForces: s.externalForces.map((f) => f.id === action.forceId ? { ...f, ...action.updates } : f),
-                    }
-                    : s),
-            };
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onPlay,
+          title: t("particleEditor.play", "Play"),
+          "aria-label": t("particleEditor.play", "Play"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "play", size: 16 })
         }
-        case 'ADD_SUB_EMITTER': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? { ...s, subEmitters: [...s.subEmitters, action.subEmitter] }
-                    : s),
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onStop,
+          title: t("particleEditor.stop", "Stop"),
+          "aria-label": t("particleEditor.stop", "Stop"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "stop", size: 16 })
         }
-        case 'REMOVE_SUB_EMITTER': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? { ...s, subEmitters: s.subEmitters.filter((se) => se.id !== action.subEmitterId) }
-                    : s),
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRestart,
+          title: t("particleEditor.restart", "Restart"),
+          "aria-label": t("particleEditor.restart", "Restart"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 16 })
         }
-        case 'ADD_BURST': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? { ...s, emission: { ...s.emission, bursts: [...s.emission.bursts, action.burst] } }
-                    : s),
-            };
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: playbackSpeed,
+          onChange: (e) => onSpeedChange(parseFloat(e.target.value)),
+          className: styles.speedSelect,
+          title: t("particleEditor.playbackSpeed", "Playback Speed"),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: 0.25, children: "0.25x" }),
+            /* @__PURE__ */ jsx("option", { value: 0.5, children: "0.5x" }),
+            /* @__PURE__ */ jsx("option", { value: 1, children: "1x" }),
+            /* @__PURE__ */ jsx("option", { value: 2, children: "2x" }),
+            /* @__PURE__ */ jsx("option", { value: 4, children: "4x" })
+          ]
         }
-        case 'REMOVE_BURST': {
-            const newState = pushToUndoStack(state);
-            return {
-                ...newState,
-                systems: newState.systems.map((s) => s.id === action.systemId
-                    ? {
-                        ...s,
-                        emission: {
-                            ...s.emission,
-                            bursts: s.emission.bursts.filter((_, i) => i !== action.burstIndex),
-                        },
-                    }
-                    : s),
-            };
+      ),
+      /* @__PURE__ */ jsxs("span", { className: styles.timeDisplay, children: [
+        currentTime.toFixed(2),
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleGrid,
+          className: showGrid ? styles.active : "",
+          title: t("particleEditor.toggleGrid", "Toggle Grid"),
+          "aria-label": t("particleEditor.toggleGrid", "Toggle Grid"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "hash", size: 16 })
         }
-        case 'LOAD_SYSTEMS': {
-            return {
-                ...createInitialState(action.systems),
-                undoStack: state.undoStack,
-                redoStack: state.redoStack,
-            };
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleBounds,
+          className: showBounds ? styles.active : "",
+          title: t("particleEditor.toggleBounds", "Toggle Bounds"),
+          "aria-label": t("particleEditor.toggleBounds", "Toggle Bounds"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 16 })
         }
-        case 'NEW_PROJECT':
-            return createInitialState();
-        default:
-            return state;
-    }
-}
-/* ═══════════════════════════════════════════════════════════════════════════
-   Hook: useParticleEditor
-   ═══════════════════════════════════════════════════════════════════════════ */
-function useParticleEditor(initialSystems) {
-    const [state, dispatch] = useReducer(particleEditorReducer, initialSystems, createInitialState);
-    return { state, dispatch };
-}
-function SystemListPanel({ systems, selectedId, onSelect, onAdd, onRemove, onDuplicate, onRename, onAddPreset, }) {
-    const { t } = useNiceTranslation();
-    const [editingId, setEditingId] = useState(null);
-    const [editName, setEditName] = useState('');
-    const [showPresets, setShowPresets] = useState(false);
-    const handleStartRename = (system) => {
-        setEditingId(system.id);
-        setEditName(system.name);
-    };
-    const handleFinishRename = () => {
-        if (editingId && editName.trim()) {
-            onRename(editingId, editName.trim());
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onToggleEmitterShape,
+          className: showEmitterShape ? styles.active : "",
+          title: t("particleEditor.toggleEmitterShape", "Toggle Emitter Shape"),
+          "aria-label": t("particleEditor.toggleEmitterShape", "Toggle Emitter Shape"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "target", size: 16 })
         }
-        setEditingId(null);
-    };
-    return (jsxs("div", { className: styles.systemList, children: [jsxs("div", { className: styles.systemListHeader, children: [jsx("span", { children: t('particleEditor.systems', 'Systems ({systems})').replace('{systems}', String(systems.length)) }), jsxs("div", { className: styles.systemListActions, children: [jsx("button", { onClick: onAdd, title: t('particleEditor.newSystem', 'New System'), "aria-label": t('particleEditor.newSystem', 'New System'), children: jsx(NiceIcon, { name: "plus", size: 14 }) }), jsx("button", { onClick: () => setShowPresets(!showPresets), title: t('particleEditor.addPreset', 'Add Preset'), "aria-label": t('particleEditor.addPreset', 'Add Preset'), children: jsx(NiceIcon, { name: "clipboard", size: 14 }) })] })] }), showPresets && (jsx("div", { className: styles.presetMenu, children: Object.keys(PARTICLE_PRESETS).map((preset) => (jsx("button", { className: styles.presetItem, onClick: () => {
-                        onAddPreset(preset);
-                        setShowPresets(false);
-                    }, children: preset.charAt(0).toUpperCase() + preset.slice(1) }, preset))) })), jsx("div", { className: styles.systemItems, children: systems.map((system) => (jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.systemItem} ${selectedId === system.id ? styles.selected : ''}`, onClick: () => onSelect(system.id), children: editingId === system.id ? (jsx("input", { type: "text", value: editName, onChange: (e) => setEditName(e.target.value), onBlur: handleFinishRename, onKeyDown: (e) => e.key === 'Enter' && handleFinishRename(), autoFocus: true, className: styles.renameInput })) : (jsxs(Fragment, { children: [jsx("span", { className: styles.systemName, onDoubleClick: () => handleStartRename(system), children: system.name }), jsxs("div", { className: styles.systemItemActions, children: [jsx("button", { onClick: (e) => {
-                                            e.stopPropagation();
-                                            onDuplicate(system.id);
-                                        }, title: t('particleEditor.duplicate', 'Duplicate'), "aria-label": t('particleEditor.duplicate', 'Duplicate'), children: jsx(NiceIcon, { name: "clipboard", size: 14 }) }), jsx("button", { onClick: (e) => {
-                                            e.stopPropagation();
-                                            onRemove(system.id);
-                                        }, title: t('particleEditor.remove', 'Remove'), "aria-label": t('particleEditor.remove', 'Remove'), disabled: systems.length <= 1, children: jsx(NiceIcon, { name: "trash", size: 14 }) })] })] })) }, system.id))) })] }));
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarSeparator }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolbarGroup, children: ["3d", "top", "side", "front"].map((mode) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onViewModeChange(mode),
+        className: viewMode === mode ? styles.active : "",
+        title: mode.toUpperCase(),
+        children: mode === "3d" ? /* @__PURE__ */ jsx(NiceIcon, { name: "video", size: 16 }) : mode.charAt(0).toUpperCase()
+      },
+      mode
+    )) })
+  ] });
 }
-function InspectorPanel({ system, expandedModules, selectedModule, onToggleModule, onSelectModule: _onSelectModule, onUpdateSystem, }) {
-    const { t } = useNiceTranslation();
-    if (!system) {
-        return (jsx("div", { className: styles.inspector, children: jsx("div", { className: styles.emptyInspector, children: t('particleEditor.noSystemSelected', 'No system selected') }) }));
+function PreviewPanel({
+  systems,
+  isPlaying,
+  isPaused,
+  currentTime,
+  showGrid,
+  showEmitterShape
+}) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
     }
-    const modules = [
-        { key: 'main', hasEnabled: false },
-        { key: 'emission', hasEnabled: true, enabled: system.emission.enabled },
-        { key: 'shape', hasEnabled: false },
-        { key: 'velocityOverLifetime', hasEnabled: true, enabled: system.velocityOverLifetime.enabled },
-        {
-            key: 'limitVelocityOverLifetime',
-            hasEnabled: true,
-            enabled: system.limitVelocityOverLifetime.enabled,
-        },
-        { key: 'inheritVelocity', hasEnabled: true, enabled: system.inheritVelocity.enabled },
-        { key: 'forceOverLifetime', hasEnabled: true, enabled: system.forceOverLifetime.enabled },
-        { key: 'colorOverLifetime', hasEnabled: true, enabled: system.colorOverLifetime.enabled },
-        { key: 'colorBySpeed', hasEnabled: true, enabled: system.colorBySpeed.enabled },
-        { key: 'sizeOverLifetime', hasEnabled: true, enabled: system.sizeOverLifetime.enabled },
-        { key: 'sizeBySpeed', hasEnabled: true, enabled: system.sizeBySpeed.enabled },
-        { key: 'rotationOverLifetime', hasEnabled: true, enabled: system.rotationOverLifetime.enabled },
-        { key: 'rotationBySpeed', hasEnabled: true, enabled: system.rotationBySpeed.enabled },
-        { key: 'externalForces', hasEnabled: false },
-        { key: 'noise', hasEnabled: true, enabled: system.noise.enabled },
-        { key: 'collision', hasEnabled: true, enabled: system.collision.enabled },
-        { key: 'triggers', hasEnabled: true, enabled: system.triggers.enabled },
-        { key: 'subEmitters', hasEnabled: false },
-        {
-            key: 'textureSheetAnimation',
-            hasEnabled: true,
-            enabled: system.textureSheetAnimation.enabled,
-        },
-        { key: 'lights', hasEnabled: true, enabled: system.lights.enabled },
-        { key: 'trails', hasEnabled: false },
-        { key: 'renderer', hasEnabled: false },
-        { key: 'material', hasEnabled: false },
-    ];
-    const handleModuleToggle = (key, enabled) => {
-        const current = system[key];
-        onUpdateSystem({ [key]: { ...current, enabled } });
-    };
-    return (jsxs("div", { className: styles.inspector, children: [jsx("div", { className: styles.inspectorHeader, children: jsx("span", { children: system.name }) }), jsx("div", { className: styles.inspectorModules, children: modules.map((mod) => (jsxs("div", { className: styles.moduleSection, children: [jsxs("div", { role: "button", tabIndex: 0, "aria-expanded": expandedModules.includes(mod.key), onKeyDown: clickOnActivationKey, className: `${styles.moduleHeader} ${selectedModule === mod.key ? styles.selected : ''}`, onClick: () => onToggleModule(mod.key), children: [jsx("span", { className: styles.moduleIcon, children: jsx(NiceIcon, { name: expandedModules.includes(mod.key) ? 'chevron-down' : 'chevron-right', size: 14 }) }), mod.hasEnabled && (jsx("input", { type: "checkbox", checked: mod.enabled, onChange: (e) => {
-                                        e.stopPropagation();
-                                        handleModuleToggle(mod.key, e.target.checked);
-                                    }, className: styles.moduleCheckbox })), jsx("span", { className: styles.moduleName, children: MODULE_NAMES[mod.key] || mod.key })] }), expandedModules.includes(mod.key) && (jsx("div", { className: styles.moduleContent, children: jsx(ModuleEditor, { system: system, moduleKey: mod.key, onUpdate: onUpdateSystem }) }))] }, mod.key))) })] }));
-}
-function ModuleEditor({ system, moduleKey, onUpdate }) {
-    const { t } = useNiceTranslation();
-    const renderDistributionInput = (label, value, onChange) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsxs("div", { className: styles.distributionInput, children: [jsxs("select", { value: value.type, onChange: (e) => {
-                            const newType = e.target.value;
-                            if (newType === 'constant') {
-                                onChange({ type: 'constant', value: value.type === 'constant' ? value.value : 1 });
-                            }
-                            else if (newType === 'random') {
-                                onChange({ type: 'random', min: 0, max: 1 });
-                            }
-                            else if (newType === 'curve') {
-                                onChange({
-                                    type: 'curve',
-                                    curve: [
-                                        { time: 0, value: 1 },
-                                        { time: 1, value: 1 },
-                                    ],
-                                });
-                            }
-                        }, className: styles.distributionType, children: [jsx("option", { value: "constant", children: t('particleEditor.constant', 'Constant') }), jsx("option", { value: "random", children: t('particleEditor.random', 'Random') }), jsx("option", { value: "curve", children: t('particleEditor.curve', 'Curve') })] }), value.type === 'constant' && (jsx("input", { type: "number", value: value.value, onChange: (e) => onChange({ ...value, value: parseFloat(e.target.value) || 0 }), className: styles.numberInput })), value.type === 'random' && (jsxs(Fragment, { children: [jsx("input", { type: "number", value: value.min, onChange: (e) => onChange({ ...value, min: parseFloat(e.target.value) || 0 }), className: styles.numberInput, placeholder: t('particleEditor.min', 'Min') }), jsx("input", { type: "number", value: value.max, onChange: (e) => onChange({ ...value, max: parseFloat(e.target.value) || 0 }), className: styles.numberInput, placeholder: t('particleEditor.max', 'Max') })] }))] })] }));
-    const renderNumberInput = (label, value, onChange, props) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsx("input", { type: "number", value: value, onChange: (e) => onChange(parseFloat(e.target.value) || 0), className: styles.numberInput, ...props })] }));
-    const renderToggle = (label, value, onChange) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked), className: styles.toggleInput })] }));
-    const renderSelect = (label, value, options, onChange) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsx("select", { value: value, onChange: (e) => onChange(e.target.value), className: styles.selectInput, children: Object.entries(options).map(([key, name]) => (jsx("option", { value: key, children: name }, key))) })] }));
-    switch (moduleKey) {
-        case 'main':
-            return (jsxs(Fragment, { children: [renderNumberInput('Duration', system.duration, (v) => onUpdate({ duration: v }), {
-                        min: 0,
-                        step: 0.1,
-                    }), renderToggle('Looping', system.looping, (v) => onUpdate({ looping: v })), renderToggle('Prewarm', system.prewarm, (v) => onUpdate({ prewarm: v })), renderDistributionInput('Start Delay', system.startDelay, (v) => onUpdate({ startDelay: v })), renderDistributionInput('Start Lifetime', system.startLifetime, (v) => onUpdate({ startLifetime: v })), renderDistributionInput('Start Speed', system.startSpeed, (v) => onUpdate({ startSpeed: v })), renderDistributionInput('Start Size', system.startSize, (v) => onUpdate({ startSize: v })), renderDistributionInput('Start Rotation', system.startRotation, (v) => onUpdate({ startRotation: v })), renderDistributionInput('Gravity Modifier', system.gravityModifier, (v) => onUpdate({ gravityModifier: v })), renderSelect('Simulation Space', system.simulationSpace, { local: 'Local', world: 'World', custom: 'Custom' }, (v) => onUpdate({ simulationSpace: v })), renderNumberInput('Simulation Speed', system.simulationSpeed, (v) => onUpdate({ simulationSpeed: v }), { min: 0, step: 0.1 }), renderNumberInput('Max Particles', system.maxParticles, (v) => onUpdate({ maxParticles: v }), { min: 1, step: 1 })] }));
-        case 'emission':
-            return (jsxs(Fragment, { children: [renderDistributionInput('Rate over Time', system.emission.rateOverTime, (v) => onUpdate({ emission: { ...system.emission, rateOverTime: v } })), renderDistributionInput('Rate over Distance', system.emission.rateOverDistance, (v) => onUpdate({ emission: { ...system.emission, rateOverDistance: v } })), jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: t('particleEditor.bursts', 'Bursts ({bursts})').replace('{bursts}', String(system.emission.bursts.length)) }), jsx("button", { className: styles.addButton, onClick: () => onUpdate({
-                                    emission: {
-                                        ...system.emission,
-                                        bursts: [
-                                            ...system.emission.bursts,
-                                            {
-                                                time: 0,
-                                                count: { type: 'constant', value: 30 },
-                                                cycles: 1,
-                                                interval: 0.01,
-                                                probability: 1,
-                                            },
-                                        ],
-                                    },
-                                }), children: t('particleEditor.addBurst', 'Add Burst') })] })] }));
-        case 'shape':
-            return (jsxs(Fragment, { children: [renderSelect('Shape', system.shape.type, EMITTER_SHAPE_NAMES, (v) => 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
-                    onUpdate({ shape: { ...system.shape, type: v } })), renderToggle('Emit from Shell', system.shape.emitFromShell, (v) => onUpdate({ shape: { ...system.shape, emitFromShell: v } })), renderToggle('Random Direction', system.shape.randomDirection, (v) => onUpdate({ shape: { ...system.shape, randomDirection: v } })), (system.shape.type === 'sphere' ||
-                        system.shape.type === 'hemisphere' ||
-                        system.shape.type === 'cone' ||
-                        system.shape.type === 'circle') && (jsx(Fragment, { children: renderDistributionInput('Radius', system.shape.radius, (v) => 
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
-                        onUpdate({ shape: { ...system.shape, radius: v } })) })), system.shape.type === 'cone' && (jsxs(Fragment, { children: [renderNumberInput('Angle', system.shape.angle, 
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
-                            (v) => onUpdate({ shape: { ...system.shape, angle: v } }), { min: 0, max: 90 }), renderNumberInput('Length', system.shape.length, 
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
-                            (v) => onUpdate({ shape: { ...system.shape, length: v } }), { min: 0 })] }))] }));
-        case 'renderer':
-            return (jsxs(Fragment, { children: [renderSelect('Render Mode', system.renderer.type, RENDER_MODE_NAMES, (v) => 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
-                    onUpdate({ renderer: { ...system.renderer, type: v } })), renderSelect('Sort Mode', system.renderer.sortMode, {
-                        none: 'None',
-                        by_distance: 'By Distance',
-                        oldest_in_front: 'Oldest in Front',
-                        youngest_in_front: 'Youngest in Front',
-                    }, (v) => onUpdate({ renderer: { ...system.renderer, sortMode: v } }))] }));
-        case 'material':
-            return (jsxs(Fragment, { children: [renderSelect('Shading', system.material.shading, { unlit: 'Unlit', lit: 'Lit' }, (v) => onUpdate({ material: { ...system.material, shading: v } })), renderSelect('Blend Mode', system.material.blendMode, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- BLEND_MODE_NAMES is keyed by ParticleBlendMode but renderSelect is generic
-                    BLEND_MODE_NAMES, (v) => onUpdate({ material: { ...system.material, blendMode: v } }))] }));
-        default:
-            return (jsx("div", { className: styles.moduleNotImplemented, children: t('particleEditor.moduleEditorNotYetImplemented', 'Module editor not yet implemented') }));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
     }
+    const width = canvas.width;
+    const height = canvas.height;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    ctx.fillStyle = resolveCssColor("var(--nice-bg, #1a1a1a)", ctx.canvas);
+    ctx.fillRect(0, 0, width, height);
+    if (showGrid) {
+      ctx.strokeStyle = resolveCssColor(
+        "var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))",
+        ctx.canvas
+      );
+      ctx.lineWidth = 1;
+      const gridSize = 40;
+      for (let x = 0; x < width; x += gridSize) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = 0; y < height; y += gridSize) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+    }
+    if (showEmitterShape && systems.length > 0) {
+      ctx.strokeStyle = resolveCssColor(
+        "var(--nice-primary-tint-60, rgba(0,200,255,0.5))",
+        ctx.canvas
+      );
+      ctx.lineWidth = 2;
+      ctx.setLineDash([5, 5]);
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, 30, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    if (isPlaying && !isPaused) {
+      const particleCount = 50;
+      for (let i = 0; i < particleCount; i++) {
+        const seed = i / particleCount;
+        const angle = seed * Math.PI * 2 + currentTime;
+        const distance = 30 + (currentTime * 50 + i * 10) % 150;
+        const x = centerX + Math.cos(angle) * distance;
+        const y = centerY - Math.sin(angle) * distance * 0.5 - (currentTime * 30 + i * 3) % 150;
+        const alpha = 1 - distance / 180;
+        const size = 3 + Math.sin(seed * 10 + currentTime) * 2;
+        ctx.beginPath();
+        ctx.arc(x, y, size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, ${150 + Math.floor(seed * 100)}, 50, ${alpha})`;
+        ctx.fill();
+      }
+    }
+  }, [systems, isPlaying, isPaused, currentTime, showGrid, showEmitterShape]);
+  return /* @__PURE__ */ jsx("div", { className: styles.previewPanel, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: 400, height: 400, className: styles.previewCanvas }) });
 }
-function Toolbar({ isPlaying, isPaused, playbackSpeed, currentTime, canUndo, canRedo, showGrid, showBounds, showEmitterShape, viewMode, onPlay, onPause, onStop, onRestart, onSpeedChange, onUndo, onRedo, onToggleGrid, onToggleBounds, onToggleEmitterShape, onViewModeChange, onNew, onExport, onImport, }) {
-    const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onNew, title: t('particleEditor.newProject', 'New Project'), "aria-label": t('particleEditor.newProject', 'New Project'), children: jsx(NiceIcon, { name: "file", size: 16 }) }), jsx("button", { onClick: onImport, title: t('particleEditor.import', 'Import'), "aria-label": t('particleEditor.import', 'Import'), children: jsx(NiceIcon, { name: "folder", size: 16 }) }), jsx("button", { onClick: onExport, title: t('particleEditor.export', 'Export'), "aria-label": t('particleEditor.export', 'Export'), children: jsx(NiceIcon, { name: "save", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onUndo, disabled: !canUndo, title: t('particleEditor.undo', 'Undo'), "aria-label": t('particleEditor.undo', 'Undo'), children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { onClick: onRedo, disabled: !canRedo, title: t('particleEditor.redo', 'Redo'), "aria-label": t('particleEditor.redo', 'Redo'), children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [isPlaying && !isPaused ? (jsx("button", { onClick: onPause, title: t('particleEditor.pause', 'Pause'), "aria-label": t('particleEditor.pause', 'Pause'), children: jsx(NiceIcon, { name: "pause", size: 16 }) })) : (jsx("button", { onClick: onPlay, title: t('particleEditor.play', 'Play'), "aria-label": t('particleEditor.play', 'Play'), children: jsx(NiceIcon, { name: "play", size: 16 }) })), jsx("button", { onClick: onStop, title: t('particleEditor.stop', 'Stop'), "aria-label": t('particleEditor.stop', 'Stop'), children: jsx(NiceIcon, { name: "stop", size: 16 }) }), jsx("button", { onClick: onRestart, title: t('particleEditor.restart', 'Restart'), "aria-label": t('particleEditor.restart', 'Restart'), children: jsx(NiceIcon, { name: "refresh", size: 16 }) }), jsxs("select", { value: playbackSpeed, onChange: (e) => onSpeedChange(parseFloat(e.target.value)), className: styles.speedSelect, title: t('particleEditor.playbackSpeed', 'Playback Speed'), children: [jsx("option", { value: 0.25, children: "0.25x" }), jsx("option", { value: 0.5, children: "0.5x" }), jsx("option", { value: 1, children: "1x" }), jsx("option", { value: 2, children: "2x" }), jsx("option", { value: 4, children: "4x" })] }), jsxs("span", { className: styles.timeDisplay, children: [currentTime.toFixed(2), "s"] })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onToggleGrid, className: showGrid ? styles.active : '', title: t('particleEditor.toggleGrid', 'Toggle Grid'), "aria-label": t('particleEditor.toggleGrid', 'Toggle Grid'), children: jsx(NiceIcon, { name: "hash", size: 16 }) }), jsx("button", { onClick: onToggleBounds, className: showBounds ? styles.active : '', title: t('particleEditor.toggleBounds', 'Toggle Bounds'), "aria-label": t('particleEditor.toggleBounds', 'Toggle Bounds'), children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx("button", { onClick: onToggleEmitterShape, className: showEmitterShape ? styles.active : '', title: t('particleEditor.toggleEmitterShape', 'Toggle Emitter Shape'), "aria-label": t('particleEditor.toggleEmitterShape', 'Toggle Emitter Shape'), children: jsx(NiceIcon, { name: "target", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsx("div", { className: styles.toolbarGroup, children: ['3d', 'top', 'side', 'front'].map((mode) => (jsx("button", { onClick: () => onViewModeChange(mode), className: viewMode === mode ? styles.active : '', title: mode.toUpperCase(), children: mode === '3d' ? jsx(NiceIcon, { name: "video", size: 16 }) : mode.charAt(0).toUpperCase() }, mode))) })] }));
-}
-function PreviewPanel({ systems, isPlaying, isPaused, currentTime, showGrid, showEmitterShape, }) {
-    const canvasRef = useRef(null);
-    // Simple preview rendering (placeholder - real implementation would use Three.js)
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const width = canvas.width;
-        const height = canvas.height;
-        const centerX = width / 2;
-        const centerY = height / 2;
-        // Clear
-        ctx.fillStyle = resolveCssColor('var(--nice-bg, #1a1a1a)', ctx.canvas);
-        ctx.fillRect(0, 0, width, height);
-        // Draw grid
-        if (showGrid) {
-            ctx.strokeStyle = resolveCssColor('var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))', ctx.canvas);
-            ctx.lineWidth = 1;
-            const gridSize = 40;
-            for (let x = 0; x < width; x += gridSize) {
-                ctx.beginPath();
-                ctx.moveTo(x, 0);
-                ctx.lineTo(x, height);
-                ctx.stroke();
-            }
-            for (let y = 0; y < height; y += gridSize) {
-                ctx.beginPath();
-                ctx.moveTo(0, y);
-                ctx.lineTo(width, y);
-                ctx.stroke();
-            }
-        }
-        // Draw emitter shape indicator
-        if (showEmitterShape && systems.length > 0) {
-            ctx.strokeStyle = resolveCssColor('var(--nice-primary-tint-60, rgba(0,200,255,0.5))', ctx.canvas);
-            ctx.lineWidth = 2;
-            ctx.setLineDash([5, 5]);
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, 30, 0, Math.PI * 2);
-            ctx.stroke();
-            ctx.setLineDash([]);
-        }
-        // Draw simple particle simulation
-        if (isPlaying && !isPaused) {
-            const particleCount = 50;
-            for (let i = 0; i < particleCount; i++) {
-                const seed = i / particleCount;
-                const angle = seed * Math.PI * 2 + currentTime;
-                const distance = 30 + ((currentTime * 50 + i * 10) % 150);
-                const x = centerX + Math.cos(angle) * distance;
-                const y = centerY - Math.sin(angle) * distance * 0.5 - ((currentTime * 30 + i * 3) % 150);
-                const alpha = 1 - distance / 180;
-                const size = 3 + Math.sin(seed * 10 + currentTime) * 2;
-                ctx.beginPath();
-                ctx.arc(x, y, size, 0, Math.PI * 2);
-                ctx.fillStyle = `rgba(255, ${150 + Math.floor(seed * 100)}, 50, ${alpha})`;
-                ctx.fill();
-            }
-        }
-    }, [systems, isPlaying, isPaused, currentTime, showGrid, showEmitterShape]);
-    return (jsx("div", { className: styles.previewPanel, children: jsx("canvas", { ref: canvasRef, width: 400, height: 400, className: styles.previewCanvas }) }));
-}
-/* ═══════════════════════════════════════════════════════════════════════════
-   Main Component
-   ═══════════════════════════════════════════════════════════════════════════ */
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const PARTICLE_EDITOR_TOUR = [
-    {
-        target: '.nice-particle-editor',
-        titleKey: 'tutorial.particleEditor.intro.title',
-        title: 'Particle editor',
-        contentKey: 'tutorial.particleEditor.intro.content',
-        content: 'Pick a particle system, tune its emitter and modules in the inspector, and play, pause or stop the live preview.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-particle-editor",
+    titleKey: "tutorial.particleEditor.intro.title",
+    title: "Particle editor",
+    contentKey: "tutorial.particleEditor.intro.content",
+    content: "Pick a particle system, tune its emitter and modules in the inspector, and play, pause or stop the live preview.",
+    placement: "auto"
+  }
 ];
-function NiceParticleEditor({ systems: initialSystems, onSystemsChange, onPlay, onPause, onStop, customTextures: _customTextures, customMeshes: _customMeshes, width = '100%', height = '600px', readOnly: _readOnly = false, showToolbar = true, showSystemList = true, showInspector = true, showPreview = true, showTimeline: _showTimeline = true, theme = 'dark', className, tutorial, }) {
-    const { state, dispatch } = useParticleEditor(initialSystems);
-    const animationFrameRef = useRef(undefined);
-    const selectedSystem = useMemo(() => state.systems.find((s) => s.id === state.selectedSystemId) || null, [state.systems, state.selectedSystemId]);
-    // Notify parent of changes
-    useEffect(() => {
-        onSystemsChange === null || onSystemsChange === void 0 ? void 0 : onSystemsChange(state.systems);
-    }, [state.systems, onSystemsChange]);
-    // Animation loop
-    useEffect(() => {
-        if (!state.isPlaying || state.isPaused) {
-            return;
-        }
-        let lastTime = performance.now();
-        const animate = (time) => {
-            const dt = ((time - lastTime) / 1000) * state.playbackSpeed;
-            lastTime = time;
-            dispatch({ type: 'SET_CURRENT_TIME', time: state.currentTime + dt });
-            // Check if we need to loop
-            const duration = (selectedSystem === null || selectedSystem === void 0 ? void 0 : selectedSystem.duration) || 5;
-            if (state.currentTime >= duration && (selectedSystem === null || selectedSystem === void 0 ? void 0 : selectedSystem.looping)) {
-                dispatch({ type: 'SET_CURRENT_TIME', time: 0 });
-            }
-            animationFrameRef.current = requestAnimationFrame(animate);
-        };
-        animationFrameRef.current = requestAnimationFrame(animate);
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, [
-        state.isPlaying,
-        state.isPaused,
-        state.playbackSpeed,
-        state.currentTime,
-        selectedSystem,
-        dispatch,
-    ]);
-    // Export/Import handlers
-    const handleExport = () => {
-        const json = exportSystemsToJSON(state.systems);
-        const blob = new Blob([json], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'particle-systems.json';
-        a.click();
-        URL.revokeObjectURL(url);
+function NiceParticleEditor({
+  systems: initialSystems,
+  onSystemsChange,
+  onPlay,
+  onPause,
+  onStop,
+  customTextures: _customTextures,
+  customMeshes: _customMeshes,
+  width = "100%",
+  height = "600px",
+  readOnly: _readOnly = false,
+  showToolbar = true,
+  showSystemList = true,
+  showInspector = true,
+  showPreview = true,
+  showTimeline: _showTimeline = true,
+  theme = "dark",
+  className,
+  tutorial
+}) {
+  const { state, dispatch } = useParticleEditor(initialSystems);
+  const animationFrameRef = useRef(void 0);
+  const selectedSystem = useMemo(
+    () => state.systems.find((s) => s.id === state.selectedSystemId) || null,
+    [state.systems, state.selectedSystemId]
+  );
+  useEffect(() => {
+    onSystemsChange?.(state.systems);
+  }, [state.systems, onSystemsChange]);
+  useEffect(() => {
+    if (!state.isPlaying || state.isPaused) {
+      return;
+    }
+    let lastTime = performance.now();
+    const animate = (time) => {
+      const dt = (time - lastTime) / 1e3 * state.playbackSpeed;
+      lastTime = time;
+      dispatch({ type: "SET_CURRENT_TIME", time: state.currentTime + dt });
+      const duration = selectedSystem?.duration || 5;
+      if (state.currentTime >= duration && selectedSystem?.looping) {
+        dispatch({ type: "SET_CURRENT_TIME", time: 0 });
+      }
+      animationFrameRef.current = requestAnimationFrame(animate);
     };
-    const handleImport = () => {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '.json';
-        input.onchange = async (e) => {
-            var _a;
-            const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-            if (!file) {
-                return;
-            }
-            const text = await file.text();
-            const systems = importSystemsFromJSON(text);
-            if (systems) {
-                dispatch({ type: 'LOAD_SYSTEMS', systems });
-            }
-        };
-        input.click();
+    animationFrameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [
+    state.isPlaying,
+    state.isPaused,
+    state.playbackSpeed,
+    state.currentTime,
+    selectedSystem,
+    dispatch
+  ]);
+  const handleExport = () => {
+    const json = exportSystemsToJSON(state.systems);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "particle-systems.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const handleImport = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) {
+        return;
+      }
+      const text = await file.text();
+      const systems = importSystemsFromJSON(text);
+      if (systems) {
+        dispatch({ type: "LOAD_SYSTEMS", systems });
+      }
     };
-    return (jsxs("div", { style: { position: 'relative', width, height }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, PARTICLE_EDITOR_TOUR) }) }), jsx(NiceAppShell, { className: `nice-particle-editor ${styles.particleEditor} ${styles[theme]} ${className || ''}`, flush: true, toolbar: showToolbar ? (jsx(Toolbar, { isPlaying: state.isPlaying, isPaused: state.isPaused, playbackSpeed: state.playbackSpeed, currentTime: state.currentTime, canUndo: state.undoStack.length > 0, canRedo: state.redoStack.length > 0, showGrid: state.showGrid, showBounds: state.showBounds, showEmitterShape: state.showEmitterShape, viewMode: state.viewMode, onPlay: () => {
-                        dispatch({ type: 'PLAY' });
-                        onPlay === null || onPlay === void 0 ? void 0 : onPlay();
-                    }, onPause: () => {
-                        dispatch({ type: 'PAUSE' });
-                        onPause === null || onPause === void 0 ? void 0 : onPause();
-                    }, onStop: () => {
-                        dispatch({ type: 'STOP' });
-                        onStop === null || onStop === void 0 ? void 0 : onStop();
-                    }, onRestart: () => dispatch({ type: 'RESTART' }), onSpeedChange: (speed) => dispatch({ type: 'SET_PLAYBACK_SPEED', speed }), onUndo: () => dispatch({ type: 'UNDO' }), onRedo: () => dispatch({ type: 'REDO' }), onToggleGrid: () => dispatch({ type: 'TOGGLE_GRID' }), onToggleBounds: () => dispatch({ type: 'TOGGLE_BOUNDS' }), onToggleEmitterShape: () => dispatch({ type: 'TOGGLE_EMITTER_SHAPE' }), onViewModeChange: (mode) => dispatch({ type: 'SET_VIEW_MODE', mode }), onNew: () => dispatch({ type: 'NEW_PROJECT' }), onExport: handleExport, onImport: handleImport })) : undefined, sidebar: showSystemList ? (jsx(SystemListPanel, { systems: state.systems, selectedId: state.selectedSystemId, onSelect: (id) => dispatch({ type: 'SELECT_SYSTEM', systemId: id }), onAdd: () => dispatch({ type: 'ADD_SYSTEM', system: createDefaultSystem() }), onRemove: (id) => dispatch({ type: 'REMOVE_SYSTEM', systemId: id }), onDuplicate: (id) => dispatch({ type: 'DUPLICATE_SYSTEM', systemId: id }), onRename: (id, name) => dispatch({ type: 'UPDATE_SYSTEM', systemId: id, updates: { name } }), onAddPreset: (preset) => dispatch({
-                        type: 'ADD_SYSTEM',
-                        system: applyPreset(preset),
-                    }) })) : undefined, rightSidebar: showInspector ? (jsx(InspectorPanel, { system: selectedSystem, expandedModules: state.expandedModules, selectedModule: state.selectedModule, onToggleModule: (module) => dispatch({ type: 'TOGGLE_MODULE', module }), onSelectModule: (module) => dispatch({ type: 'SELECT_MODULE', module }), onUpdateSystem: (updates) => {
-                        if (state.selectedSystemId) {
-                            dispatch({ type: 'UPDATE_SYSTEM', systemId: state.selectedSystemId, updates });
-                        }
-                    } })) : undefined, children: showPreview && (jsx(PreviewPanel, { systems: state.systems, isPlaying: state.isPlaying, isPaused: state.isPaused, currentTime: state.currentTime, showGrid: state.showGrid, showEmitterShape: state.showEmitterShape })) })] }));
+    input.click();
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width, height }, children: [
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, PARTICLE_EDITOR_TOUR) }) }),
+    /* @__PURE__ */ jsx(
+      NiceAppShell,
+      {
+        className: `nice-particle-editor ${styles.particleEditor} ${styles[theme]} ${className || ""}`,
+        flush: true,
+        toolbar: showToolbar ? /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            isPlaying: state.isPlaying,
+            isPaused: state.isPaused,
+            playbackSpeed: state.playbackSpeed,
+            currentTime: state.currentTime,
+            canUndo: state.undoStack.length > 0,
+            canRedo: state.redoStack.length > 0,
+            showGrid: state.showGrid,
+            showBounds: state.showBounds,
+            showEmitterShape: state.showEmitterShape,
+            viewMode: state.viewMode,
+            onPlay: () => {
+              dispatch({ type: "PLAY" });
+              onPlay?.();
+            },
+            onPause: () => {
+              dispatch({ type: "PAUSE" });
+              onPause?.();
+            },
+            onStop: () => {
+              dispatch({ type: "STOP" });
+              onStop?.();
+            },
+            onRestart: () => dispatch({ type: "RESTART" }),
+            onSpeedChange: (speed) => dispatch({ type: "SET_PLAYBACK_SPEED", speed }),
+            onUndo: () => dispatch({ type: "UNDO" }),
+            onRedo: () => dispatch({ type: "REDO" }),
+            onToggleGrid: () => dispatch({ type: "TOGGLE_GRID" }),
+            onToggleBounds: () => dispatch({ type: "TOGGLE_BOUNDS" }),
+            onToggleEmitterShape: () => dispatch({ type: "TOGGLE_EMITTER_SHAPE" }),
+            onViewModeChange: (mode) => dispatch({ type: "SET_VIEW_MODE", mode }),
+            onNew: () => dispatch({ type: "NEW_PROJECT" }),
+            onExport: handleExport,
+            onImport: handleImport
+          }
+        ) : void 0,
+        sidebar: showSystemList ? /* @__PURE__ */ jsx(
+          SystemListPanel,
+          {
+            systems: state.systems,
+            selectedId: state.selectedSystemId,
+            onSelect: (id) => dispatch({ type: "SELECT_SYSTEM", systemId: id }),
+            onAdd: () => dispatch({ type: "ADD_SYSTEM", system: createDefaultSystem() }),
+            onRemove: (id) => dispatch({ type: "REMOVE_SYSTEM", systemId: id }),
+            onDuplicate: (id) => dispatch({ type: "DUPLICATE_SYSTEM", systemId: id }),
+            onRename: (id, name) => dispatch({ type: "UPDATE_SYSTEM", systemId: id, updates: { name } }),
+            onAddPreset: (preset) => dispatch({
+              type: "ADD_SYSTEM",
+              system: applyPreset(preset)
+            })
+          }
+        ) : void 0,
+        rightSidebar: showInspector ? /* @__PURE__ */ jsx(
+          InspectorPanel,
+          {
+            system: selectedSystem,
+            expandedModules: state.expandedModules,
+            selectedModule: state.selectedModule,
+            onToggleModule: (module) => dispatch({ type: "TOGGLE_MODULE", module }),
+            onSelectModule: (module) => dispatch({ type: "SELECT_MODULE", module }),
+            onUpdateSystem: (updates) => {
+              if (state.selectedSystemId) {
+                dispatch({ type: "UPDATE_SYSTEM", systemId: state.selectedSystemId, updates });
+              }
+            }
+          }
+        ) : void 0,
+        children: showPreview && /* @__PURE__ */ jsx(
+          PreviewPanel,
+          {
+            systems: state.systems,
+            isPlaying: state.isPlaying,
+            isPaused: state.isPaused,
+            currentTime: state.currentTime,
+            showGrid: state.showGrid,
+            showEmitterShape: state.showEmitterShape
+          }
+        )
+      }
+    )
+  ] });
 }
-
-export { NiceParticleEditor, useParticleEditor };
+export {
+  NiceParticleEditor,
+  useParticleEditor
+};