@nice2dev/ui-3d 1.1.0 → 1.1.1

package/dist/cjs/particle/NiceParticleEditor.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ke = require('react');
+var _e = require('react');
+var ParticleEditor_module = require('./ParticleEditor.module.css.js');
 var particleEditorTypes = require('./particleEditorTypes.js');
 var particleEditorUtils = require('./particleEditorUtils.js');
-var ParticleEditor_module = require('./ParticleEditor.module.css.js');
 
 /* ═══════════════════════════════════════════════════════════════════════════
    State Reducer
@@ -52,10 +52,11 @@ function particleEditorReducer(state, action) {
             };
         }
         case 'REMOVE_SYSTEM': {
-            if (state.systems.length <= 1)
+            if (state.systems.length <= 1) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
-            const newSystems = newState.systems.filter(s => s.id !== action.systemId);
+            const newSystems = newState.systems.filter((s) => s.id !== action.systemId);
             return {
                 ...newState,
                 systems: newSystems,
@@ -68,13 +69,14 @@ function particleEditorReducer(state, action) {
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
-                systems: newState.systems.map(s => s.id === action.systemId ? { ...s, ...action.updates } : s),
+                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)
+            const system = state.systems.find((s) => s.id === action.systemId);
+            if (!system) {
                 return state;
+            }
             const cloned = particleEditorUtils.cloneSystem(system);
             const newState = pushToUndoStack(state);
             return {
@@ -91,7 +93,7 @@ function particleEditorReducer(state, action) {
             return {
                 ...state,
                 expandedModules: state.expandedModules.includes(action.module)
-                    ? state.expandedModules.filter(m => m !== action.module)
+                    ? state.expandedModules.filter((m) => m !== action.module)
                     : [...state.expandedModules, action.module],
             };
         case 'SET_TOOL':
@@ -123,8 +125,9 @@ function particleEditorReducer(state, action) {
         case 'SET_PREVIEW_MODE':
             return { ...state, previewMode: action.mode };
         case 'UNDO': {
-            if (state.undoStack.length === 0)
+            if (state.undoStack.length === 0) {
                 return state;
+            }
             const previous = state.undoStack[state.undoStack.length - 1];
             return {
                 ...state,
@@ -134,8 +137,9 @@ function particleEditorReducer(state, action) {
             };
         }
         case 'REDO': {
-            if (state.redoStack.length === 0)
+            if (state.redoStack.length === 0) {
                 return state;
+            }
             const next = state.redoStack[state.redoStack.length - 1];
             return {
                 ...state,
@@ -145,23 +149,27 @@ function particleEditorReducer(state, action) {
             };
         }
         case 'COPY_SYSTEM': {
-            const system = state.systems.find(s => s.id === action.systemId);
-            if (!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)
+            const system = state.systems.find((s) => s.id === action.systemId);
+            if (!system) {
                 return state;
+            }
             const moduleData = system[action.moduleKey];
-            if (!moduleData)
+            if (!moduleData) {
                 return state;
+            }
             return { ...state, clipboard: { [action.moduleKey]: moduleData } };
         }
         case 'PASTE_SYSTEM': {
-            if (!state.clipboard || !state.clipboard.id)
+            if (!state.clipboard || !state.clipboard.id) {
                 return state;
+            }
             const pasted = particleEditorUtils.cloneSystem(state.clipboard);
             const newState = pushToUndoStack(state);
             return {
@@ -171,19 +179,20 @@ function particleEditorReducer(state, action) {
             };
         }
         case 'PASTE_MODULE': {
-            if (!state.clipboard || state.clipboard.id)
+            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),
+                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
+                systems: newState.systems.map((s) => s.id === action.systemId
                     ? { ...s, externalForces: [...s.externalForces, action.force] }
                     : s),
             };
@@ -192,8 +201,8 @@ function particleEditorReducer(state, action) {
             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) }
+                systems: newState.systems.map((s) => s.id === action.systemId
+                    ? { ...s, externalForces: s.externalForces.filter((f) => f.id !== action.forceId) }
                     : s),
             };
         }
@@ -201,10 +210,10 @@ function particleEditorReducer(state, action) {
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
-                systems: newState.systems.map(s => s.id === action.systemId
+                systems: newState.systems.map((s) => s.id === action.systemId
                     ? {
                         ...s,
-                        externalForces: s.externalForces.map(f => f.id === action.forceId ? { ...f, ...action.updates } : f),
+                        externalForces: s.externalForces.map((f) => f.id === action.forceId ? { ...f, ...action.updates } : f),
                     }
                     : s),
             };
@@ -213,7 +222,7 @@ function particleEditorReducer(state, action) {
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
-                systems: newState.systems.map(s => s.id === action.systemId
+                systems: newState.systems.map((s) => s.id === action.systemId
                     ? { ...s, subEmitters: [...s.subEmitters, action.subEmitter] }
                     : s),
             };
@@ -222,8 +231,8 @@ function particleEditorReducer(state, action) {
             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) }
+                systems: newState.systems.map((s) => s.id === action.systemId
+                    ? { ...s, subEmitters: s.subEmitters.filter((se) => se.id !== action.subEmitterId) }
                     : s),
             };
         }
@@ -231,7 +240,7 @@ function particleEditorReducer(state, action) {
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
-                systems: newState.systems.map(s => s.id === action.systemId
+                systems: newState.systems.map((s) => s.id === action.systemId
                     ? { ...s, emission: { ...s.emission, bursts: [...s.emission.bursts, action.burst] } }
                     : s),
             };
@@ -240,7 +249,7 @@ function particleEditorReducer(state, action) {
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
-                systems: newState.systems.map(s => s.id === action.systemId
+                systems: newState.systems.map((s) => s.id === action.systemId
                     ? {
                         ...s,
                         emission: {
@@ -268,13 +277,13 @@ function particleEditorReducer(state, action) {
    Hook: useParticleEditor
    ═══════════════════════════════════════════════════════════════════════════ */
 function useParticleEditor(initialSystems) {
-    const [state, dispatch] = ke.useReducer(particleEditorReducer, initialSystems, createInitialState);
+    const [state, dispatch] = _e.useReducer(particleEditorReducer, initialSystems, createInitialState);
     return { state, dispatch };
 }
 function SystemListPanel({ systems, selectedId, onSelect, onAdd, onRemove, onDuplicate, onRename, onAddPreset, }) {
-    const [editingId, setEditingId] = ke.useState(null);
-    const [editName, setEditName] = ke.useState('');
-    const [showPresets, setShowPresets] = ke.useState(false);
+    const [editingId, setEditingId] = _e.useState(null);
+    const [editName, setEditName] = _e.useState('');
+    const [showPresets, setShowPresets] = _e.useState(false);
     const handleStartRename = (system) => {
         setEditingId(system.id);
         setEditName(system.name);
@@ -285,10 +294,16 @@ function SystemListPanel({ systems, selectedId, onSelect, onAdd, onRemove, onDup
         }
         setEditingId(null);
     };
-    return (jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemList, children: [jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemListHeader, children: [jsxRuntime.jsxs("span", { children: ["Systems (", systems.length, ")"] }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemListActions, children: [jsxRuntime.jsx("button", { onClick: onAdd, title: "New System", children: "+" }), jsxRuntime.jsx("button", { onClick: () => setShowPresets(!showPresets), title: "Add Preset", children: "\uD83D\uDCCB" })] })] }), showPresets && (jsxRuntime.jsx("div", { className: ParticleEditor_module.presetMenu, children: Object.keys(particleEditorUtils.PARTICLE_PRESETS).map(preset => (jsxRuntime.jsx("button", { className: ParticleEditor_module.presetItem, onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemList, children: [jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemListHeader, children: [jsxRuntime.jsxs("span", { children: ["Systems (", systems.length, ")"] }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemListActions, children: [jsxRuntime.jsx("button", { onClick: onAdd, title: "New System", children: "+" }), jsxRuntime.jsx("button", { onClick: () => setShowPresets(!showPresets), title: "Add Preset", children: "\uD83D\uDCCB" })] })] }), showPresets && (jsxRuntime.jsx("div", { className: ParticleEditor_module.presetMenu, children: Object.keys(particleEditorUtils.PARTICLE_PRESETS).map((preset) => (jsxRuntime.jsx("button", { className: ParticleEditor_module.presetItem, onClick: () => {
                         onAddPreset(preset);
                         setShowPresets(false);
-                    }, children: preset.charAt(0).toUpperCase() + preset.slice(1) }, preset))) })), jsxRuntime.jsx("div", { className: ParticleEditor_module.systemItems, children: systems.map(system => (jsxRuntime.jsx("div", { className: `${ParticleEditor_module.systemItem} ${selectedId === system.id ? ParticleEditor_module.selected : ''}`, onClick: () => onSelect(system.id), children: editingId === system.id ? (jsxRuntime.jsx("input", { type: "text", value: editName, onChange: e => setEditName(e.target.value), onBlur: handleFinishRename, onKeyDown: e => e.key === 'Enter' && handleFinishRename(), autoFocus: true, className: ParticleEditor_module.renameInput })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: ParticleEditor_module.systemName, onDoubleClick: () => handleStartRename(system), children: system.name }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemItemActions, children: [jsxRuntime.jsx("button", { onClick: e => { e.stopPropagation(); onDuplicate(system.id); }, title: "Duplicate", children: "\uD83D\uDCCB" }), jsxRuntime.jsx("button", { onClick: e => { e.stopPropagation(); onRemove(system.id); }, title: "Remove", disabled: systems.length <= 1, children: "\uD83D\uDDD1\uFE0F" })] })] })) }, system.id))) })] }));
+                    }, children: preset.charAt(0).toUpperCase() + preset.slice(1) }, preset))) })), jsxRuntime.jsx("div", { className: ParticleEditor_module.systemItems, children: systems.map((system) => (jsxRuntime.jsx("div", { className: `${ParticleEditor_module.systemItem} ${selectedId === system.id ? ParticleEditor_module.selected : ''}`, onClick: () => onSelect(system.id), children: editingId === system.id ? (jsxRuntime.jsx("input", { type: "text", value: editName, onChange: (e) => setEditName(e.target.value), onBlur: handleFinishRename, onKeyDown: (e) => e.key === 'Enter' && handleFinishRename(), autoFocus: true, className: ParticleEditor_module.renameInput })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: ParticleEditor_module.systemName, onDoubleClick: () => handleStartRename(system), children: system.name }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.systemItemActions, children: [jsxRuntime.jsx("button", { onClick: (e) => {
+                                            e.stopPropagation();
+                                            onDuplicate(system.id);
+                                        }, title: "Duplicate", children: "\uD83D\uDCCB" }), jsxRuntime.jsx("button", { onClick: (e) => {
+                                            e.stopPropagation();
+                                            onRemove(system.id);
+                                        }, title: "Remove", disabled: systems.length <= 1, children: "\uD83D\uDDD1\uFE0F" })] })] })) }, system.id))) })] }));
 }
 function InspectorPanel({ system, expandedModules, selectedModule, onToggleModule, onSelectModule, onUpdateSystem, }) {
     if (!system) {
@@ -299,7 +314,11 @@ function InspectorPanel({ system, expandedModules, selectedModule, onToggleModul
         { 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: '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 },
@@ -313,22 +332,27 @@ function InspectorPanel({ system, expandedModules, selectedModule, onToggleModul
         { 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: '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) => {
-        onUpdateSystem({ [key]: { ...system[key], enabled } });
+        const current = system[key];
+        onUpdateSystem({ [key]: { ...current, enabled } });
     };
-    return (jsxRuntime.jsxs("div", { className: ParticleEditor_module.inspector, children: [jsxRuntime.jsx("div", { className: ParticleEditor_module.inspectorHeader, children: jsxRuntime.jsx("span", { children: system.name }) }), jsxRuntime.jsx("div", { className: ParticleEditor_module.inspectorModules, children: modules.map(mod => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.moduleSection, children: [jsxRuntime.jsxs("div", { className: `${ParticleEditor_module.moduleHeader} ${selectedModule === mod.key ? ParticleEditor_module.selected : ''}`, onClick: () => onToggleModule(mod.key), children: [jsxRuntime.jsx("span", { className: ParticleEditor_module.moduleIcon, children: expandedModules.includes(mod.key) ? '▼' : '►' }), mod.hasEnabled && (jsxRuntime.jsx("input", { type: "checkbox", checked: mod.enabled, onChange: e => {
+    return (jsxRuntime.jsxs("div", { className: ParticleEditor_module.inspector, children: [jsxRuntime.jsx("div", { className: ParticleEditor_module.inspectorHeader, children: jsxRuntime.jsx("span", { children: system.name }) }), jsxRuntime.jsx("div", { className: ParticleEditor_module.inspectorModules, children: modules.map((mod) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.moduleSection, children: [jsxRuntime.jsxs("div", { className: `${ParticleEditor_module.moduleHeader} ${selectedModule === mod.key ? ParticleEditor_module.selected : ''}`, onClick: () => onToggleModule(mod.key), children: [jsxRuntime.jsx("span", { className: ParticleEditor_module.moduleIcon, children: expandedModules.includes(mod.key) ? '▼' : '►' }), mod.hasEnabled && (jsxRuntime.jsx("input", { type: "checkbox", checked: mod.enabled, onChange: (e) => {
                                         e.stopPropagation();
                                         handleModuleToggle(mod.key, e.target.checked);
                                     }, className: ParticleEditor_module.moduleCheckbox })), jsxRuntime.jsx("span", { className: ParticleEditor_module.moduleName, children: particleEditorTypes.MODULE_NAMES[mod.key] || mod.key })] }), expandedModules.includes(mod.key) && (jsxRuntime.jsx("div", { className: ParticleEditor_module.moduleContent, children: jsxRuntime.jsx(ModuleEditor, { system: system, moduleKey: mod.key, onUpdate: onUpdateSystem }) }))] }, mod.key))) })] }));
 }
 function ModuleEditor({ system, moduleKey, onUpdate }) {
-    const renderDistributionInput = (label, value, onChange) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.distributionInput, children: [jsxRuntime.jsxs("select", { value: value.type, onChange: e => {
+    const renderDistributionInput = (label, value, onChange) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.distributionInput, children: [jsxRuntime.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 });
@@ -337,57 +361,85 @@ function ModuleEditor({ system, moduleKey, onUpdate }) {
                                 onChange({ type: 'random', min: 0, max: 1 });
                             }
                             else if (newType === 'curve') {
-                                onChange({ type: 'curve', curve: [{ time: 0, value: 1 }, { time: 1, value: 1 }] });
+                                onChange({
+                                    type: 'curve',
+                                    curve: [
+                                        { time: 0, value: 1 },
+                                        { time: 1, value: 1 },
+                                    ],
+                                });
                             }
-                        }, className: ParticleEditor_module.distributionType, children: [jsxRuntime.jsx("option", { value: "constant", children: "Constant" }), jsxRuntime.jsx("option", { value: "random", children: "Random" }), jsxRuntime.jsx("option", { value: "curve", children: "Curve" })] }), value.type === 'constant' && (jsxRuntime.jsx("input", { type: "number", value: value.value, onChange: e => onChange({ ...value, value: parseFloat(e.target.value) || 0 }), className: ParticleEditor_module.numberInput })), value.type === 'random' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { type: "number", value: value.min, onChange: e => onChange({ ...value, min: parseFloat(e.target.value) || 0 }), className: ParticleEditor_module.numberInput, placeholder: "Min" }), jsxRuntime.jsx("input", { type: "number", value: value.max, onChange: e => onChange({ ...value, max: parseFloat(e.target.value) || 0 }), className: ParticleEditor_module.numberInput, placeholder: "Max" })] }))] })] }));
-    const renderNumberInput = (label, value, onChange, props) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsx("input", { type: "number", value: value, onChange: e => onChange(parseFloat(e.target.value) || 0), className: ParticleEditor_module.numberInput, ...props })] }));
-    const renderToggle = (label, value, onChange) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsx("input", { type: "checkbox", checked: value, onChange: e => onChange(e.target.checked), className: ParticleEditor_module.toggleInput })] }));
-    const renderSelect = (label, value, options, onChange) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsx("select", { value: value, onChange: e => onChange(e.target.value), className: ParticleEditor_module.selectInput, children: Object.entries(options).map(([key, name]) => (jsxRuntime.jsx("option", { value: key, children: name }, key))) })] }));
+                        }, className: ParticleEditor_module.distributionType, children: [jsxRuntime.jsx("option", { value: "constant", children: "Constant" }), jsxRuntime.jsx("option", { value: "random", children: "Random" }), jsxRuntime.jsx("option", { value: "curve", children: "Curve" })] }), value.type === 'constant' && (jsxRuntime.jsx("input", { type: "number", value: value.value, onChange: (e) => onChange({ ...value, value: parseFloat(e.target.value) || 0 }), className: ParticleEditor_module.numberInput })), value.type === 'random' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { type: "number", value: value.min, onChange: (e) => onChange({ ...value, min: parseFloat(e.target.value) || 0 }), className: ParticleEditor_module.numberInput, placeholder: "Min" }), jsxRuntime.jsx("input", { type: "number", value: value.max, onChange: (e) => onChange({ ...value, max: parseFloat(e.target.value) || 0 }), className: ParticleEditor_module.numberInput, placeholder: "Max" })] }))] })] }));
+    const renderNumberInput = (label, value, onChange, props) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsx("input", { type: "number", value: value, onChange: (e) => onChange(parseFloat(e.target.value) || 0), className: ParticleEditor_module.numberInput, ...props })] }));
+    const renderToggle = (label, value, onChange) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked), className: ParticleEditor_module.toggleInput })] }));
+    const renderSelect = (label, value, options, onChange) => (jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsx("select", { value: value, onChange: (e) => onChange(e.target.value), className: ParticleEditor_module.selectInput, children: Object.entries(options).map(([key, name]) => (jsxRuntime.jsx("option", { value: key, children: name }, key))) })] }));
     switch (moduleKey) {
         case 'main':
-            return (jsxRuntime.jsxs(jsxRuntime.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 })] }));
+            return (jsxRuntime.jsxs(jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.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 } })), jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsxs("label", { children: ["Bursts (", system.emission.bursts.length, ")"] }), jsxRuntime.jsx("button", { className: ParticleEditor_module.addButton, onClick: () => onUpdate({
+            return (jsxRuntime.jsxs(jsxRuntime.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 } })), jsxRuntime.jsxs("div", { className: ParticleEditor_module.propertyRow, children: [jsxRuntime.jsxs("label", { children: ["Bursts (", system.emission.bursts.length, ")"] }), jsxRuntime.jsx("button", { className: ParticleEditor_module.addButton, onClick: () => onUpdate({
                                     emission: {
                                         ...system.emission,
-                                        bursts: [...system.emission.bursts, {
+                                        bursts: [
+                                            ...system.emission.bursts,
+                                            {
                                                 time: 0,
                                                 count: { type: 'constant', value: 30 },
                                                 cycles: 1,
                                                 interval: 0.01,
                                                 probability: 1,
-                                            }],
+                                            },
+                                        ],
                                     },
                                 }), children: "Add Burst" })] })] }));
         case 'shape':
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderSelect('Shape', system.shape.type, particleEditorTypes.EMITTER_SHAPE_NAMES, v => 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') && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderDistributionInput('Radius', system.shape.radius, v => onUpdate({ shape: { ...system.shape, radius: v } })) })), system.shape.type === 'cone' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderNumberInput('Angle', system.shape.angle, v => onUpdate({ shape: { ...system.shape, angle: v } }), { min: 0, max: 90 }), renderNumberInput('Length', system.shape.length, v => onUpdate({ shape: { ...system.shape, length: v } }), { min: 0 })] }))] }));
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderSelect('Shape', system.shape.type, particleEditorTypes.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') && (jsxRuntime.jsx(jsxRuntime.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' && (jsxRuntime.jsxs(jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderSelect('Render Mode', system.renderer.type, particleEditorTypes.RENDER_MODE_NAMES, v => onUpdate({ renderer: { ...system.renderer, type: v } })), renderSelect('Sort Mode', system.renderer.sortMode, {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderSelect('Render Mode', system.renderer.type, particleEditorTypes.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 } }))] }));
+                    }, (v) => onUpdate({ renderer: { ...system.renderer, sortMode: v } }))] }));
         case 'material':
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderSelect('Shading', system.material.shading, { unlit: 'Unlit', lit: 'Lit' }, v => onUpdate({ material: { ...system.material, shading: v } })), renderSelect('Blend Mode', system.material.blendMode, particleEditorTypes.BLEND_MODE_NAMES, v => onUpdate({ material: { ...system.material, blendMode: v } }))] }));
+            return (jsxRuntime.jsxs(jsxRuntime.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
+                    particleEditorTypes.BLEND_MODE_NAMES, (v) => onUpdate({ material: { ...system.material, blendMode: v } }))] }));
         default:
-            return (jsxRuntime.jsx("div", { className: ParticleEditor_module.moduleNotImplemented, children: "Module editor not yet implemented" }));
+            return jsxRuntime.jsx("div", { className: ParticleEditor_module.moduleNotImplemented, children: "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, }) {
-    return (jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onNew, title: "New Project", children: "\uD83D\uDCC4" }), jsxRuntime.jsx("button", { onClick: onImport, title: "Import", children: "\uD83D\uDCC2" }), jsxRuntime.jsx("button", { onClick: onExport, title: "Export", children: "\uD83D\uDCBE" })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onUndo, disabled: !canUndo, title: "Undo", children: "\u21A9\uFE0F" }), jsxRuntime.jsx("button", { onClick: onRedo, disabled: !canRedo, title: "Redo", children: "\u21AA\uFE0F" })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [isPlaying && !isPaused ? (jsxRuntime.jsx("button", { onClick: onPause, title: "Pause", children: "\u23F8\uFE0F" })) : (jsxRuntime.jsx("button", { onClick: onPlay, title: "Play", children: "\u25B6\uFE0F" })), jsxRuntime.jsx("button", { onClick: onStop, title: "Stop", children: "\u23F9\uFE0F" }), jsxRuntime.jsx("button", { onClick: onRestart, title: "Restart", children: "\uD83D\uDD04" }), jsxRuntime.jsxs("select", { value: playbackSpeed, onChange: e => onSpeedChange(parseFloat(e.target.value)), className: ParticleEditor_module.speedSelect, title: "Playback Speed", children: [jsxRuntime.jsx("option", { value: 0.25, children: "0.25x" }), jsxRuntime.jsx("option", { value: 0.5, children: "0.5x" }), jsxRuntime.jsx("option", { value: 1, children: "1x" }), jsxRuntime.jsx("option", { value: 2, children: "2x" }), jsxRuntime.jsx("option", { value: 4, children: "4x" })] }), jsxRuntime.jsxs("span", { className: ParticleEditor_module.timeDisplay, children: [currentTime.toFixed(2), "s"] })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onToggleGrid, className: showGrid ? ParticleEditor_module.active : '', title: "Toggle Grid", children: "#" }), jsxRuntime.jsx("button", { onClick: onToggleBounds, className: showBounds ? ParticleEditor_module.active : '', title: "Toggle Bounds", children: "\u2B1C" }), jsxRuntime.jsx("button", { onClick: onToggleEmitterShape, className: showEmitterShape ? ParticleEditor_module.active : '', title: "Toggle Emitter Shape", children: "\uD83D\uDD36" })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarGroup, children: ['3d', 'top', 'side', 'front'].map(mode => (jsxRuntime.jsx("button", { onClick: () => onViewModeChange(mode), className: viewMode === mode ? ParticleEditor_module.active : '', title: mode.toUpperCase(), children: mode === '3d' ? '🎥' : mode.charAt(0).toUpperCase() }, mode))) })] }));
+    return (jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onNew, title: "New Project", children: "\uD83D\uDCC4" }), jsxRuntime.jsx("button", { onClick: onImport, title: "Import", children: "\uD83D\uDCC2" }), jsxRuntime.jsx("button", { onClick: onExport, title: "Export", children: "\uD83D\uDCBE" })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onUndo, disabled: !canUndo, title: "Undo", children: "\u21A9\uFE0F" }), jsxRuntime.jsx("button", { onClick: onRedo, disabled: !canRedo, title: "Redo", children: "\u21AA\uFE0F" })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [isPlaying && !isPaused ? (jsxRuntime.jsx("button", { onClick: onPause, title: "Pause", children: "\u23F8\uFE0F" })) : (jsxRuntime.jsx("button", { onClick: onPlay, title: "Play", children: "\u25B6\uFE0F" })), jsxRuntime.jsx("button", { onClick: onStop, title: "Stop", children: "\u23F9\uFE0F" }), jsxRuntime.jsx("button", { onClick: onRestart, title: "Restart", children: "\uD83D\uDD04" }), jsxRuntime.jsxs("select", { value: playbackSpeed, onChange: (e) => onSpeedChange(parseFloat(e.target.value)), className: ParticleEditor_module.speedSelect, title: "Playback Speed", children: [jsxRuntime.jsx("option", { value: 0.25, children: "0.25x" }), jsxRuntime.jsx("option", { value: 0.5, children: "0.5x" }), jsxRuntime.jsx("option", { value: 1, children: "1x" }), jsxRuntime.jsx("option", { value: 2, children: "2x" }), jsxRuntime.jsx("option", { value: 4, children: "4x" })] }), jsxRuntime.jsxs("span", { className: ParticleEditor_module.timeDisplay, children: [currentTime.toFixed(2), "s"] })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsxs("div", { className: ParticleEditor_module.toolbarGroup, children: [jsxRuntime.jsx("button", { onClick: onToggleGrid, className: showGrid ? ParticleEditor_module.active : '', title: "Toggle Grid", children: "#" }), jsxRuntime.jsx("button", { onClick: onToggleBounds, className: showBounds ? ParticleEditor_module.active : '', title: "Toggle Bounds", children: "\u2B1C" }), jsxRuntime.jsx("button", { onClick: onToggleEmitterShape, className: showEmitterShape ? ParticleEditor_module.active : '', title: "Toggle Emitter Shape", children: "\uD83D\uDD36" })] }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarSeparator }), jsxRuntime.jsx("div", { className: ParticleEditor_module.toolbarGroup, children: ['3d', 'top', 'side', 'front'].map((mode) => (jsxRuntime.jsx("button", { onClick: () => onViewModeChange(mode), className: viewMode === mode ? ParticleEditor_module.active : '', title: mode.toUpperCase(), children: mode === '3d' ? '🎥' : mode.charAt(0).toUpperCase() }, mode))) })] }));
 }
 function PreviewPanel({ systems, isPlaying, isPaused, currentTime, showGrid, showEmitterShape, }) {
-    const canvasRef = ke.useRef(null);
+    const canvasRef = _e.useRef(null);
     // Simple preview rendering (placeholder - real implementation would use Three.js)
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         const canvas = canvasRef.current;
-        if (!canvas)
+        if (!canvas) {
             return;
+        }
         const ctx = canvas.getContext('2d');
-        if (!ctx)
+        if (!ctx) {
             return;
+        }
         const width = canvas.width;
         const height = canvas.height;
         const centerX = width / 2;
@@ -431,8 +483,8 @@ function PreviewPanel({ systems, isPlaying, isPaused, currentTime, showGrid, sho
                 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 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);
@@ -448,19 +500,20 @@ function PreviewPanel({ systems, isPlaying, isPaused, currentTime, showGrid, sho
    ═══════════════════════════════════════════════════════════════════════════ */
 function NiceParticleEditor({ systems: initialSystems, onSystemsChange, onPlay, onPause, onStop, customTextures, customMeshes, width = '100%', height = '600px', readOnly = false, showToolbar = true, showSystemList = true, showInspector = true, showPreview = true, showTimeline = true, theme = 'dark', className, }) {
     const { state, dispatch } = useParticleEditor(initialSystems);
-    const animationFrameRef = ke.useRef();
-    const selectedSystem = ke.useMemo(() => state.systems.find(s => s.id === state.selectedSystemId) || null, [state.systems, state.selectedSystemId]);
+    const animationFrameRef = _e.useRef();
+    const selectedSystem = _e.useMemo(() => state.systems.find((s) => s.id === state.selectedSystemId) || null, [state.systems, state.selectedSystemId]);
     // Notify parent of changes
-    ke.useEffect(() => {
+    _e.useEffect(() => {
         onSystemsChange === null || onSystemsChange === void 0 ? void 0 : onSystemsChange(state.systems);
     }, [state.systems, onSystemsChange]);
     // Animation loop
-    ke.useEffect(() => {
-        if (!state.isPlaying || state.isPaused)
+    _e.useEffect(() => {
+        if (!state.isPlaying || state.isPaused) {
             return;
+        }
         let lastTime = performance.now();
         const animate = (time) => {
-            const dt = (time - lastTime) / 1000 * state.playbackSpeed;
+            const dt = ((time - lastTime) / 1000) * state.playbackSpeed;
             lastTime = time;
             dispatch({ type: 'SET_CURRENT_TIME', time: state.currentTime + dt });
             // Check if we need to loop
@@ -495,8 +548,9 @@ function NiceParticleEditor({ systems: initialSystems, onSystemsChange, onPlay,
         input.onchange = async (e) => {
             var _a;
             const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-            if (!file)
+            if (!file) {
                 return;
+            }
             const text = await file.text();
             const systems = particleEditorUtils.importSystemsFromJSON(text);
             if (systems) {
@@ -514,7 +568,10 @@ function NiceParticleEditor({ systems: initialSystems, onSystemsChange, onPlay,
                 }, 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 })), jsxRuntime.jsxs("div", { className: ParticleEditor_module.editorBody, children: [showSystemList && (jsxRuntime.jsx(SystemListPanel, { systems: state.systems, selectedId: state.selectedSystemId, onSelect: id => dispatch({ type: 'SELECT_SYSTEM', systemId: id }), onAdd: () => dispatch({ type: 'ADD_SYSTEM', system: particleEditorUtils.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: particleEditorUtils.applyPreset(preset) }) })), showPreview && (jsxRuntime.jsx(PreviewPanel, { systems: state.systems, isPlaying: state.isPlaying, isPaused: state.isPaused, currentTime: state.currentTime, showGrid: state.showGrid, showEmitterShape: state.showEmitterShape })), showInspector && (jsxRuntime.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 => {
+                }, 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 })), jsxRuntime.jsxs("div", { className: ParticleEditor_module.editorBody, children: [showSystemList && (jsxRuntime.jsx(SystemListPanel, { systems: state.systems, selectedId: state.selectedSystemId, onSelect: (id) => dispatch({ type: 'SELECT_SYSTEM', systemId: id }), onAdd: () => dispatch({ type: 'ADD_SYSTEM', system: particleEditorUtils.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: particleEditorUtils.applyPreset(preset),
+                        }) })), showPreview && (jsxRuntime.jsx(PreviewPanel, { systems: state.systems, isPlaying: state.isPlaying, isPaused: state.isPaused, currentTime: state.currentTime, showGrid: state.showGrid, showEmitterShape: state.showEmitterShape })), showInspector && (jsxRuntime.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 });
                             }