@nice2dev/game-engine 1.3.15 → 1.3.16

package/dist/cjs/editor/NiceGameEditor.js

@@ -1,1289 +1,1991 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var EventBus = require('../core/EventBus.js');
-var World = require('../ecs/World.js');
-var useTranslation = require('../i18n/useTranslation.js');
-var SceneManager = require('../scene/SceneManager.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const EventBus = require("../core/EventBus.js");
+const World = require("../ecs/World.js");
+const useTranslation = require("../i18n/useTranslation.js");
+const SceneManager = require("../scene/SceneManager.js");
 class UndoStack {
-    constructor(maxSize = 100) {
-        this.stack = [];
-        this.pointer = -1;
-        this.events = new EventBus.EventBus();
-        this.maxSize = maxSize;
+  constructor(maxSize = 100) {
+    this.stack = [];
+    this.pointer = -1;
+    this.events = new EventBus.EventBus();
+    this.maxSize = maxSize;
+  }
+  push(entry) {
+    this.stack.splice(this.pointer + 1);
+    this.stack.push(entry);
+    if (this.stack.length > this.maxSize) {
+      this.stack.shift();
     }
-    push(entry) {
-        // Remove everything after current pointer
-        this.stack.splice(this.pointer + 1);
-        this.stack.push(entry);
-        if (this.stack.length > this.maxSize) {
-            this.stack.shift();
-        }
-        this.pointer = this.stack.length - 1;
-        this.events.emit('change', null);
-    }
-    undo() {
-        if (this.pointer < 0) {
-            return null;
-        }
-        const entry = this.stack[this.pointer];
-        entry.undo();
-        this.pointer--;
-        this.events.emit('change', null);
-        return entry.description;
-    }
-    redo() {
-        if (this.pointer >= this.stack.length - 1) {
-            return null;
-        }
-        this.pointer++;
-        const entry = this.stack[this.pointer];
-        entry.redo();
-        this.events.emit('change', null);
-        return entry.description;
-    }
-    get canUndo() {
-        return this.pointer >= 0;
-    }
-    get canRedo() {
-        return this.pointer < this.stack.length - 1;
+    this.pointer = this.stack.length - 1;
+    this.events.emit("change", null);
+  }
+  undo() {
+    if (this.pointer < 0) {
+      return null;
     }
-    clear() {
-        this.stack.length = 0;
-        this.pointer = -1;
-        this.events.emit('change', null);
+    const entry = this.stack[this.pointer];
+    entry.undo();
+    this.pointer--;
+    this.events.emit("change", null);
+    return entry.description;
+  }
+  redo() {
+    if (this.pointer >= this.stack.length - 1) {
+      return null;
     }
+    this.pointer++;
+    const entry = this.stack[this.pointer];
+    entry.redo();
+    this.events.emit("change", null);
+    return entry.description;
+  }
+  get canUndo() {
+    return this.pointer >= 0;
+  }
+  get canRedo() {
+    return this.pointer < this.stack.length - 1;
+  }
+  clear() {
+    this.stack.length = 0;
+    this.pointer = -1;
+    this.events.emit("change", null);
+  }
 }
 const DEFAULT_PANELS = [
-    { id: 'hierarchy', title: 'Hierarchy', visible: true, position: 'left', width: 250 },
-    { id: 'inspector', title: 'Inspector', visible: true, position: 'right', width: 300 },
-    { id: 'assets', title: 'Assets', visible: true, position: 'bottom', height: 200 },
-    { id: 'console', title: 'Console', visible: true, position: 'bottom', height: 150 },
+  { id: "hierarchy", title: "Hierarchy", visible: true, position: "left", width: 250 },
+  { id: "inspector", title: "Inspector", visible: true, position: "right", width: 300 },
+  { id: "assets", title: "Assets", visible: true, position: "bottom", height: 200 },
+  { id: "console", title: "Console", visible: true, position: "bottom", height: 150 }
 ];
 const DEFAULT_STATE = {
-    mode: 'edit',
-    tool: 'select',
-    selectedEntities: [],
-    clipboard: [],
-    gridSize: 16,
-    snapToGrid: true,
-    showGrid: true,
-    showRulers: true,
-    zoom: 1,
-    panOffset: { x: 0, y: 0 },
-    panels: DEFAULT_PANELS,
-    currentSceneId: null,
-    projectPath: null,
-    dirty: false,
+  mode: "edit",
+  tool: "select",
+  selectedEntities: [],
+  clipboard: [],
+  gridSize: 16,
+  snapToGrid: true,
+  showGrid: true,
+  showRulers: true,
+  zoom: 1,
+  panOffset: { x: 0, y: 0 },
+  panels: DEFAULT_PANELS,
+  currentSceneId: null,
+  projectPath: null,
+  dirty: false
 };
 function editorReducer(state, action) {
-    switch (action.type) {
-        case 'SET_MODE':
-            return { ...state, mode: action.mode };
-        case 'SET_TOOL':
-            return { ...state, tool: action.tool };
-        case 'SELECT':
-            return { ...state, selectedEntities: action.entities };
-        case 'ADD_SELECTION':
-            return {
-                ...state,
-                selectedEntities: [...new Set([...state.selectedEntities, ...action.entities])],
-            };
-        case 'DESELECT_ALL':
-            return { ...state, selectedEntities: [] };
-        case 'SET_CLIPBOARD':
-            return { ...state, clipboard: action.entities };
-        case 'SET_GRID_SIZE':
-            return { ...state, gridSize: action.size };
-        case 'TOGGLE_SNAP':
-            return { ...state, snapToGrid: !state.snapToGrid };
-        case 'TOGGLE_GRID':
-            return { ...state, showGrid: !state.showGrid };
-        case 'SET_ZOOM':
-            return { ...state, zoom: Math.max(0.1, Math.min(10, action.zoom)) };
-        case 'SET_PAN':
-            return { ...state, panOffset: action.offset };
-        case 'TOGGLE_PANEL':
-            return {
-                ...state,
-                panels: state.panels.map((p) => p.id === action.panelId ? { ...p, visible: !p.visible } : p),
-            };
-        case 'SET_SCENE':
-            return { ...state, currentSceneId: action.sceneId };
-        case 'MARK_DIRTY':
-            return { ...state, dirty: true };
-        case 'MARK_CLEAN':
-            return { ...state, dirty: false };
-        default:
-            return state;
-    }
+  switch (action.type) {
+    case "SET_MODE":
+      return { ...state, mode: action.mode };
+    case "SET_TOOL":
+      return { ...state, tool: action.tool };
+    case "SELECT":
+      return { ...state, selectedEntities: action.entities };
+    case "ADD_SELECTION":
+      return {
+        ...state,
+        selectedEntities: [.../* @__PURE__ */ new Set([...state.selectedEntities, ...action.entities])]
+      };
+    case "DESELECT_ALL":
+      return { ...state, selectedEntities: [] };
+    case "SET_CLIPBOARD":
+      return { ...state, clipboard: action.entities };
+    case "SET_GRID_SIZE":
+      return { ...state, gridSize: action.size };
+    case "TOGGLE_SNAP":
+      return { ...state, snapToGrid: !state.snapToGrid };
+    case "TOGGLE_GRID":
+      return { ...state, showGrid: !state.showGrid };
+    case "SET_ZOOM":
+      return { ...state, zoom: Math.max(0.1, Math.min(10, action.zoom)) };
+    case "SET_PAN":
+      return { ...state, panOffset: action.offset };
+    case "TOGGLE_PANEL":
+      return {
+        ...state,
+        panels: state.panels.map(
+          (p) => p.id === action.panelId ? { ...p, visible: !p.visible } : p
+        )
+      };
+    case "SET_SCENE":
+      return { ...state, currentSceneId: action.sceneId };
+    case "MARK_DIRTY":
+      return { ...state, dirty: true };
+    case "MARK_CLEAN":
+      return { ...state, dirty: false };
+    default:
+      return state;
+  }
 }
 const EditorContext = /* @__PURE__ */ React.createContext(null);
 function useEditor() {
-    const ctx = React.useContext(EditorContext);
-    if (!ctx) {
-        throw new Error('useEditor must be used within NiceGameEditor');
-    }
-    return ctx;
+  const ctx = React.useContext(EditorContext);
+  if (!ctx) {
+    throw new Error("useEditor must be used within NiceGameEditor");
+  }
+  return ctx;
 }
 function useKeyboardShortcuts(shortcuts) {
-    React.useEffect(() => {
-        const handler = (e) => {
-            for (const s of shortcuts) {
-                if (e.key.toLowerCase() === s.key.toLowerCase() &&
-                    !!e.ctrlKey === !!s.ctrl &&
-                    !!e.shiftKey === !!s.shift &&
-                    !!e.altKey === !!s.alt) {
-                    e.preventDefault();
-                    s.action();
-                    return;
-                }
-            }
-        };
-        window.addEventListener('keydown', handler);
-        return () => window.removeEventListener('keydown', handler);
-    }, [shortcuts]);
+  React.useEffect(() => {
+    const handler = (e) => {
+      for (const s of shortcuts) {
+        if (e.key.toLowerCase() === s.key.toLowerCase() && !!e.ctrlKey === !!s.ctrl && !!e.shiftKey === !!s.shift && !!e.altKey === !!s.alt) {
+          e.preventDefault();
+          s.action();
+          return;
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [shortcuts]);
 }
-/* ── .ndg Project Format ──────────────────────────────────────── */
 function serializeProject(project) {
-    return JSON.stringify(project, null, 2);
+  return JSON.stringify(project, null, 2);
 }
 function deserializeProject(json) {
-    return JSON.parse(json);
+  return JSON.parse(json);
 }
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const GAME_EDITOR_TOUR = [
-    {
-        target: '.nice-game-editor',
-        titleKey: 'tutorial.gameEditor.intro.title',
-        title: 'Game editor',
-        contentKey: 'tutorial.gameEditor.intro.content',
-        content: 'Build your scene in the viewport using the hierarchy and asset panels, tweak entities in the inspector, and save the project.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-game-editor",
+    titleKey: "tutorial.gameEditor.intro.title",
+    title: "Game editor",
+    contentKey: "tutorial.gameEditor.intro.content",
+    content: "Build your scene in the viewport using the hierarchy and asset panels, tweak entities in the inspector, and save the project.",
+    placement: "auto"
+  }
 ];
-const NiceGameEditor = ({ project, onSave, className, style, tutorial, }) => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const [state, dispatch] = React.useReducer(editorReducer, DEFAULT_STATE);
-    const worldRef = React.useRef(new World.World());
-    const undoRef = React.useRef(new UndoStack());
-    const sceneManagerRef = React.useRef(new SceneManager.SceneManager());
-    const eventsRef = React.useRef(new EventBus.EventBus());
-    const world = worldRef.current;
-    const undoStack = undoRef.current;
-    const sceneManager = sceneManagerRef.current;
-    const events = eventsRef.current;
-    const [worldVersion, setWorldVersion] = React.useState(0);
-    const [consoleLogs, setConsoleLogs] = React.useState([]);
-    const logIdRef = React.useRef(0);
-    const refreshWorld = React.useCallback(() => setWorldVersion((v) => v + 1), []);
-    const addLog = React.useCallback((level, message) => {
-        setConsoleLogs((prev) => [
-            ...prev.slice(-199),
-            { id: logIdRef.current++, level, message, timestamp: Date.now() },
-        ]);
-    }, []);
-    const createNewEntity = React.useCallback((name, components = ['Transform']) => {
-        const entity = world.createEntity(name);
-        for (const comp of components) {
-            world.addComponent(entity.id, comp);
-        }
-        dispatch({ type: 'SELECT', entities: [entity.id] });
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-        addLog('info', `Created entity "${name}" (#${entity.id})`);
-        return entity.id;
-    }, [world, refreshWorld, addLog]);
-    // Keyboard shortcuts. The list is built once; Save and Delete reach the handlers of the latest
-    // render through a ref (they are declared below and change with the selection and the props) —
-    // until 1.2.2 they called the first render's, so Delete never saw a selection.
-    const shortcutActionsRef = React.useRef({ save: () => { }, deleteSelected: () => { } });
-    const shortcuts = React.useMemo(() => [
-        { key: 'z', ctrl: true, action: () => undoStack.undo(), description: 'Undo' },
-        { key: 'z', ctrl: true, shift: true, action: () => undoStack.redo(), description: 'Redo' },
-        { key: 'y', ctrl: true, action: () => undoStack.redo(), description: 'Redo' },
-        {
-            key: 's',
-            ctrl: true,
-            action: () => shortcutActionsRef.current.save(),
-            description: 'Save',
-        },
-        {
-            key: 'v',
-            action: () => dispatch({ type: 'SET_TOOL', tool: 'select' }),
-            description: 'Select tool',
-        },
-        {
-            key: 'w',
-            action: () => dispatch({ type: 'SET_TOOL', tool: 'move' }),
-            description: 'Move tool',
-        },
-        {
-            key: 'e',
-            action: () => dispatch({ type: 'SET_TOOL', tool: 'rotate' }),
-            description: 'Rotate tool',
-        },
-        {
-            key: 'r',
-            action: () => dispatch({ type: 'SET_TOOL', tool: 'scale' }),
-            description: 'Scale tool',
-        },
-        {
-            key: 'g',
-            ctrl: true,
-            action: () => dispatch({ type: 'TOGGLE_GRID' }),
-            description: 'Toggle grid',
-        },
-        {
-            key: 'Delete',
-            action: () => shortcutActionsRef.current.deleteSelected(),
-            description: 'Delete selected',
-        },
-        {
-            key: 'Escape',
-            action: () => dispatch({ type: 'DESELECT_ALL' }),
-            description: 'Deselect all',
+const NiceGameEditor = ({
+  project,
+  onSave,
+  className,
+  style,
+  tutorial
+}) => {
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const [state, dispatch] = React.useReducer(editorReducer, DEFAULT_STATE);
+  const worldRef = React.useRef(new World.World());
+  const undoRef = React.useRef(new UndoStack());
+  const sceneManagerRef = React.useRef(new SceneManager.SceneManager());
+  const eventsRef = React.useRef(new EventBus.EventBus());
+  const world = worldRef.current;
+  const undoStack = undoRef.current;
+  const sceneManager = sceneManagerRef.current;
+  const events = eventsRef.current;
+  const [worldVersion, setWorldVersion] = React.useState(0);
+  const [consoleLogs, setConsoleLogs] = React.useState([]);
+  const logIdRef = React.useRef(0);
+  const refreshWorld = React.useCallback(() => setWorldVersion((v) => v + 1), []);
+  const addLog = React.useCallback((level, message) => {
+    setConsoleLogs((prev) => [
+      ...prev.slice(-199),
+      { id: logIdRef.current++, level, message, timestamp: Date.now() }
+    ]);
+  }, []);
+  const createNewEntity = React.useCallback(
+    (name, components = ["Transform"]) => {
+      const entity = world.createEntity(name);
+      for (const comp of components) {
+        world.addComponent(entity.id, comp);
+      }
+      dispatch({ type: "SELECT", entities: [entity.id] });
+      dispatch({ type: "MARK_DIRTY" });
+      refreshWorld();
+      addLog("info", `Created entity "${name}" (#${entity.id})`);
+      return entity.id;
+    },
+    [world, refreshWorld, addLog]
+  );
+  const shortcutActionsRef = React.useRef({ save: () => {
+  }, deleteSelected: () => {
+  } });
+  const shortcuts = React.useMemo(
+    () => [
+      { key: "z", ctrl: true, action: () => undoStack.undo(), description: "Undo" },
+      { key: "z", ctrl: true, shift: true, action: () => undoStack.redo(), description: "Redo" },
+      { key: "y", ctrl: true, action: () => undoStack.redo(), description: "Redo" },
+      {
+        key: "s",
+        ctrl: true,
+        action: () => shortcutActionsRef.current.save(),
+        description: "Save"
+      },
+      {
+        key: "v",
+        action: () => dispatch({ type: "SET_TOOL", tool: "select" }),
+        description: "Select tool"
+      },
+      {
+        key: "w",
+        action: () => dispatch({ type: "SET_TOOL", tool: "move" }),
+        description: "Move tool"
+      },
+      {
+        key: "e",
+        action: () => dispatch({ type: "SET_TOOL", tool: "rotate" }),
+        description: "Rotate tool"
+      },
+      {
+        key: "r",
+        action: () => dispatch({ type: "SET_TOOL", tool: "scale" }),
+        description: "Scale tool"
+      },
+      {
+        key: "g",
+        ctrl: true,
+        action: () => dispatch({ type: "TOGGLE_GRID" }),
+        description: "Toggle grid"
+      },
+      {
+        key: "Delete",
+        action: () => shortcutActionsRef.current.deleteSelected(),
+        description: "Delete selected"
+      },
+      {
+        key: "Escape",
+        action: () => dispatch({ type: "DESELECT_ALL" }),
+        description: "Deselect all"
+      }
+    ],
+    [undoStack]
+  );
+  useKeyboardShortcuts(shortcuts);
+  const handleSave = React.useCallback(() => {
+    if (!onSave) {
+      return;
+    }
+    const sceneData = sceneManager.serializeScene(
+      world,
+      state.currentSceneId ?? "main",
+      "Main Scene"
+    );
+    const proj = project ?? {
+      formatVersion: 1,
+      name: "Untitled",
+      version: "0.1.0",
+      author: "",
+      description: "",
+      settings: {
+        width: 1280,
+        height: 720,
+        targetFps: 60,
+        maxPlayers: 4,
+        physics: {
+          gravity: { x: 0, y: 980 },
+          fixedTimestep: 1 / 60,
+          velocityIterations: 8,
+          positionIterations: 3
         },
-    ], [undoStack]);
-    useKeyboardShortcuts(shortcuts);
-    const handleSave = React.useCallback(() => {
-        if (!onSave) {
-            return;
+        audio: { masterVolume: 1, musicVolume: 0.7, sfxVolume: 1, voiceVolume: 1 },
+        rendering: {
+          pixelPerfect: false,
+          antiAlias: true,
+          backgroundColor: { r: 0.1, g: 0.1, b: 0.15, a: 1 }
         }
-        const sceneData = sceneManager.serializeScene(world, state.currentSceneId ?? 'main', 'Main Scene');
-        const proj = project ?? {
-            formatVersion: 1,
-            name: 'Untitled',
-            version: '0.1.0',
-            author: '',
-            description: '',
-            settings: {
-                width: 1280,
-                height: 720,
-                targetFps: 60,
-                maxPlayers: 4,
-                physics: {
-                    gravity: { x: 0, y: 980 },
-                    fixedTimestep: 1 / 60,
-                    velocityIterations: 8,
-                    positionIterations: 3,
-                },
-                audio: { masterVolume: 1, musicVolume: 0.7, sfxVolume: 1, voiceVolume: 1 },
-                rendering: {
-                    pixelPerfect: false,
-                    antiAlias: true,
-                    backgroundColor: { r: 0.1, g: 0.1, b: 0.15, a: 1 },
-                },
-            },
-            scenes: [sceneData],
-            startSceneId: sceneData.id,
-            assets: { assets: [] },
-        };
-        onSave(proj);
-        dispatch({ type: 'MARK_CLEAN' });
-    }, [world, sceneManager, state.currentSceneId, project, onSave]);
-    const deleteSelected = React.useCallback(() => {
-        const toDelete = [...state.selectedEntities];
-        if (toDelete.length === 0) {
-            return;
-        }
-        // Store for undo
-        const snapshots = toDelete.map((id) => ({
-            entity: world.getEntity(id),
-            id,
-        }));
+      },
+      scenes: [sceneData],
+      startSceneId: sceneData.id,
+      assets: { assets: [] }
+    };
+    onSave(proj);
+    dispatch({ type: "MARK_CLEAN" });
+  }, [world, sceneManager, state.currentSceneId, project, onSave]);
+  const deleteSelected = React.useCallback(() => {
+    const toDelete = [...state.selectedEntities];
+    if (toDelete.length === 0) {
+      return;
+    }
+    const snapshots = toDelete.map((id) => ({
+      entity: world.getEntity(id),
+      id
+    }));
+    for (const id of toDelete) {
+      world.destroyEntity(id);
+    }
+    dispatch({ type: "DESELECT_ALL" });
+    dispatch({ type: "MARK_DIRTY" });
+    refreshWorld();
+    addLog("info", `Deleted ${toDelete.length} entity(ies)`);
+    undoStack.push({
+      description: `Delete ${toDelete.length} entity(ies)`,
+      undo: () => {
+        events.emit("editor:undo:delete", snapshots);
+      },
+      redo: () => {
         for (const id of toDelete) {
-            world.destroyEntity(id);
+          world.destroyEntity(id);
         }
-        dispatch({ type: 'DESELECT_ALL' });
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-        addLog('info', `Deleted ${toDelete.length} entity(ies)`);
-        undoStack.push({
-            description: `Delete ${toDelete.length} entity(ies)`,
-            undo: () => {
-                // Recreating entities from snapshots would be more complex in real impl
-                events.emit('editor:undo:delete', snapshots);
-            },
-            redo: () => {
-                for (const id of toDelete) {
-                    world.destroyEntity(id);
-                }
-            },
-        });
-    }, [state.selectedEntities, world, undoStack, refreshWorld, addLog, events]);
-    shortcutActionsRef.current = { save: handleSave, deleteSelected };
-    const ctxValue = React.useMemo(() => ({
-        state,
-        dispatch,
-        world,
-        undoStack,
-        sceneManager,
-        events,
-        worldVersion,
-        refreshWorld,
-        createNewEntity,
-        consoleLogs,
-        addLog,
-    }), [
-        state,
-        world,
-        undoStack,
-        sceneManager,
-        events,
-        worldVersion,
-        refreshWorld,
-        createNewEntity,
-        consoleLogs,
-        addLog,
-    ]);
-    return (jsxRuntime.jsx(EditorContext.Provider, { value: ctxValue, children: jsxRuntime.jsxs("div", { className: `nice-game-editor ${className ?? ''}`, style: {
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden',
-                backgroundColor: '#1e1e2e',
-                color: '#cdd6f4',
-                fontFamily: 'monospace',
-                fontSize: 13,
-                position: 'relative',
-                ...style,
-            }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, GAME_EDITOR_TOUR) }) }), jsxRuntime.jsx(EditorToolbar, {}), jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [state.panels.find((p) => p.id === 'hierarchy')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.hierarchy'), width: 250, position: "left", children: jsxRuntime.jsx(HierarchyPanel, {}) })), jsxRuntime.jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: jsxRuntime.jsx(EditorViewport, {}) }), state.panels.find((p) => p.id === 'inspector')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.inspector'), width: 300, position: "right", children: jsxRuntime.jsx(InspectorPanel, {}) }))] }), jsxRuntime.jsxs("div", { style: { display: 'flex', borderTop: '1px solid #45475a' }, children: [state.panels.find((p) => p.id === 'assets')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.assets'), height: 180, position: "bottom", children: jsxRuntime.jsx(AssetPanel, {}) })), state.panels.find((p) => p.id === 'console')?.visible && (jsxRuntime.jsx(EditorPanelContainer, { title: tr('editor.panels.console'), height: 180, position: "bottom", children: jsxRuntime.jsx(ConsolePanel, {}) }))] })] }) }));
+      }
+    });
+  }, [state.selectedEntities, world, undoStack, refreshWorld, addLog, events]);
+  shortcutActionsRef.current = { save: handleSave, deleteSelected };
+  const ctxValue = React.useMemo(
+    () => ({
+      state,
+      dispatch,
+      world,
+      undoStack,
+      sceneManager,
+      events,
+      worldVersion,
+      refreshWorld,
+      createNewEntity,
+      consoleLogs,
+      addLog
+    }),
+    [
+      state,
+      world,
+      undoStack,
+      sceneManager,
+      events,
+      worldVersion,
+      refreshWorld,
+      createNewEntity,
+      consoleLogs,
+      addLog
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `nice-game-editor ${className ?? ""}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        backgroundColor: "#1e1e2e",
+        color: "#cdd6f4",
+        fontFamily: "monospace",
+        fontSize: 13,
+        position: "relative",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, GAME_EDITOR_TOUR) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(EditorToolbar, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+          state.panels.find((p) => p.id === "hierarchy")?.visible && /* @__PURE__ */ jsxRuntime.jsx(EditorPanelContainer, { title: tr("editor.panels.hierarchy"), width: 250, position: "left", children: /* @__PURE__ */ jsxRuntime.jsx(HierarchyPanel, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(EditorViewport, {}) }),
+          state.panels.find((p) => p.id === "inspector")?.visible && /* @__PURE__ */ jsxRuntime.jsx(
+            EditorPanelContainer,
+            {
+              title: tr("editor.panels.inspector"),
+              width: 300,
+              position: "right",
+              children: /* @__PURE__ */ jsxRuntime.jsx(InspectorPanel, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", borderTop: "1px solid #45475a" }, children: [
+          state.panels.find((p) => p.id === "assets")?.visible && /* @__PURE__ */ jsxRuntime.jsx(EditorPanelContainer, { title: tr("editor.panels.assets"), height: 180, position: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(AssetPanel, {}) }),
+          state.panels.find((p) => p.id === "console")?.visible && /* @__PURE__ */ jsxRuntime.jsx(
+            EditorPanelContainer,
+            {
+              title: tr("editor.panels.console"),
+              height: 180,
+              position: "bottom",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ConsolePanel, {})
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
 };
-/* ── Helpers ───────────────────────────────────────────────────── */
 function getEntityBounds(entityId, world) {
-    const shape = world.getComponent(entityId, 'Shape');
-    if (shape) {
-        if (shape.shape === 'circle') {
-            return { x: -shape.radius, y: -shape.radius, w: shape.radius * 2, h: shape.radius * 2 };
-        }
-        return { x: -shape.width / 2, y: -shape.height / 2, w: shape.width, h: shape.height };
+  const shape = world.getComponent(entityId, "Shape");
+  if (shape) {
+    if (shape.shape === "circle") {
+      return { x: -shape.radius, y: -shape.radius, w: shape.radius * 2, h: shape.radius * 2 };
     }
-    const sprite = world.getComponent(entityId, 'Sprite');
-    if (sprite) {
-        return {
-            x: -sprite.width * sprite.anchor.x,
-            y: -sprite.height * sprite.anchor.y,
-            w: sprite.width,
-            h: sprite.height,
-        };
-    }
-    const text = world.getComponent(entityId, 'Text');
-    if (text) {
-        return { x: -30, y: -text.fontSize / 2, w: 60, h: text.fontSize };
-    }
-    return { x: -8, y: -8, w: 16, h: 16 };
+    return { x: -shape.width / 2, y: -shape.height / 2, w: shape.width, h: shape.height };
+  }
+  const sprite = world.getComponent(entityId, "Sprite");
+  if (sprite) {
+    return {
+      x: -sprite.width * sprite.anchor.x,
+      y: -sprite.height * sprite.anchor.y,
+      w: sprite.width,
+      h: sprite.height
+    };
+  }
+  const text = world.getComponent(entityId, "Text");
+  if (text) {
+    return { x: -30, y: -text.fontSize / 2, w: 60, h: text.fontSize };
+  }
+  return { x: -8, y: -8, w: 16, h: 16 };
 }
 function getEntityWorldBounds(entityId, world) {
-    const transform = world.getComponent(entityId, 'Transform');
-    if (!transform) {
-        return null;
-    }
-    const b = getEntityBounds(entityId, world);
-    return { x: transform.position.x + b.x, y: transform.position.y + b.y, w: b.w, h: b.h };
+  const transform = world.getComponent(entityId, "Transform");
+  if (!transform) {
+    return null;
+  }
+  const b = getEntityBounds(entityId, world);
+  return { x: transform.position.x + b.x, y: transform.position.y + b.y, w: b.w, h: b.h };
 }
 function getCursorForTool(tool) {
-    switch (tool) {
-        case 'move':
-            return 'move';
-        case 'rotate':
-            return 'crosshair';
-        case 'scale':
-            return 'nwse-resize';
-        case 'pan':
-            return 'grab';
-        default:
-            return 'default';
-    }
+  switch (tool) {
+    case "move":
+      return "move";
+    case "rotate":
+      return "crosshair";
+    case "scale":
+      return "nwse-resize";
+    case "pan":
+      return "grab";
+    default:
+      return "default";
+  }
 }
 function colorToCSS(c) {
-    return `rgba(${Math.round(c.r * 255)},${Math.round(c.g * 255)},${Math.round(c.b * 255)},${c.a})`;
+  return `rgba(${Math.round(c.r * 255)},${Math.round(c.g * 255)},${Math.round(c.b * 255)},${c.a})`;
 }
 function cssToColor(hex) {
-    const m = hex.match(/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-    if (!m) {
-        return { r: 1, g: 1, b: 1, a: 1 };
-    }
-    return {
-        r: parseInt(m[1], 16) / 255,
-        g: parseInt(m[2], 16) / 255,
-        b: parseInt(m[3], 16) / 255,
-        a: 1,
-    };
+  const m = hex.match(/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+  if (!m) {
+    return { r: 1, g: 1, b: 1, a: 1 };
+  }
+  return {
+    r: parseInt(m[1], 16) / 255,
+    g: parseInt(m[2], 16) / 255,
+    b: parseInt(m[3], 16) / 255,
+    a: 1
+  };
 }
 function colorToHex(c) {
-    const r = Math.round(c.r * 255)
-        .toString(16)
-        .padStart(2, '0');
-    const g = Math.round(c.g * 255)
-        .toString(16)
-        .padStart(2, '0');
-    const b = Math.round(c.b * 255)
-        .toString(16)
-        .padStart(2, '0');
-    return `#${r}${g}${b}`;
+  const r = Math.round(c.r * 255).toString(16).padStart(2, "0");
+  const g = Math.round(c.g * 255).toString(16).padStart(2, "0");
+  const b = Math.round(c.b * 255).toString(16).padStart(2, "0");
+  return `#${r}${g}${b}`;
 }
-/** `label` is also the name given to a created entity, so it stays English (A3);
- *  `key` is what the button shows. */
 const ENTITY_PRESETS = [
-    { key: 'empty', label: 'Empty', icon: 'circle', components: ['Transform'] },
-    { key: 'sprite', label: 'Sprite', icon: 'image', components: ['Transform', 'Sprite'] },
-    { key: 'shape', label: 'Shape', icon: 'square', components: ['Transform', 'Shape'] },
-    { key: 'text', label: 'Text', icon: 'type', components: ['Transform', 'Text'] },
-    {
-        key: 'physicsBody',
-        label: 'Physics Body',
-        icon: 'zap',
-        components: ['Transform', 'Shape', 'Collider2D', 'RigidBody2D'],
-    },
-    { key: 'camera', label: 'Camera', icon: 'camera', components: ['Transform', 'CameraTarget'] },
+  { key: "empty", label: "Empty", icon: "circle", components: ["Transform"] },
+  { key: "sprite", label: "Sprite", icon: "image", components: ["Transform", "Sprite"] },
+  { key: "shape", label: "Shape", icon: "square", components: ["Transform", "Shape"] },
+  { key: "text", label: "Text", icon: "type", components: ["Transform", "Text"] },
+  {
+    key: "physicsBody",
+    label: "Physics Body",
+    icon: "zap",
+    components: ["Transform", "Shape", "Collider2D", "RigidBody2D"]
+  },
+  { key: "camera", label: "Camera", icon: "camera", components: ["Transform", "CameraTarget"] }
 ];
-/* ── Sub-components ───────────────────────────────────────────── */
 const EditorToolbar = () => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { state, dispatch, createNewEntity, undoStack } = useEditor();
-    const [showAddMenu, setShowAddMenu] = React.useState(false);
-    const tools = ['select', 'move', 'rotate', 'scale', 'pan'];
-    const toolIcons = {
-        select: 'cursor',
-        move: 'move',
-        rotate: 'refresh',
-        scale: 'expand',
-        pan: 'grip',
-    };
-    const btnStyle = (active) => ({
-        background: active ? '#585b70' : 'transparent',
-        border: 'none',
-        color: '#cdd6f4',
-        padding: '4px 8px',
-        borderRadius: 4,
-        cursor: 'pointer',
-        fontSize: 14,
-    });
-    return (jsxRuntime.jsxs("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 4,
-            padding: '4px 8px',
-            borderBottom: '1px solid #45475a',
-            backgroundColor: '#181825',
-        }, children: [tools.map((t) => (jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_TOOL', tool: t }), style: btnStyle(state.tool === t), title: `${tr(`editor.tools.${t}`)} (${t[0].toUpperCase()})`, children: jsxRuntime.jsx(ui.NiceIcon, { name: toolIcons[t], size: 14 }) }, t))), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [jsxRuntime.jsx("button", { onClick: () => setShowAddMenu(!showAddMenu), style: {
-                            ...btnStyle(false),
-                            fontSize: 12,
-                            padding: '4px 10px',
-                            background: '#2f9e44',
-                            color: '#fff',
-                        }, children: "+ Entity" }), showAddMenu && (jsxRuntime.jsx("div", { style: {
-                            position: 'absolute',
-                            top: '100%',
-                            left: 0,
-                            zIndex: 100,
-                            background: '#1e1e2e',
-                            border: '1px solid #45475a',
-                            borderRadius: 4,
-                            padding: 4,
-                            minWidth: 150,
-                            marginTop: 2,
-                        }, children: ENTITY_PRESETS.map((p) => (jsxRuntime.jsxs("button", { onClick: () => {
-                                createNewEntity(p.label, p.components);
-                                setShowAddMenu(false);
-                            }, style: {
-                                display: 'block',
-                                width: '100%',
-                                textAlign: 'left',
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#cdd6f4',
-                                padding: '4px 8px',
-                                cursor: 'pointer',
-                                borderRadius: 2,
-                                fontSize: 12,
-                            }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: p.icon, size: 12 }), " ", tr(`editor.entity.${p.key}`)] }, p.label))) }))] }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'play' ? 'edit' : 'play' }), style: btnStyle(state.mode === 'play'), title: tr('editor.view.playStop'), children: jsxRuntime.jsx(ui.NiceIcon, { name: state.mode === 'play' ? 'stop' : 'play', size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_MODE', mode: state.mode === 'pause' ? 'play' : 'pause' }), style: btnStyle(state.mode === 'pause'), title: tr('editor.actions.pause'), disabled: state.mode === 'edit', children: jsxRuntime.jsx(ui.NiceIcon, { name: "pause", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => undoStack.undo(), style: btnStyle(false), title: `${tr('editor.actions.undo')} (Ctrl+Z)`, disabled: !undoStack.canUndo, children: jsxRuntime.jsx(ui.NiceIcon, { name: "undo", size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => undoStack.redo(), style: btnStyle(false), title: `${tr('editor.actions.redo')} (Ctrl+Y)`, disabled: !undoStack.canRedo, children: jsxRuntime.jsx(ui.NiceIcon, { name: "redo", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 0.8 }), style: btnStyle(false), title: tr('editor.view.zoomOut'), children: "\u2212" }), jsxRuntime.jsxs("span", { style: { fontSize: 11, minWidth: 40, textAlign: 'center' }, children: [(state.zoom * 100) | 0, "%"] }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom * 1.25 }), style: btnStyle(false), title: tr('editor.view.zoomIn'), children: "+" }), jsxRuntime.jsx("button", { onClick: () => {
-                    dispatch({ type: 'SET_ZOOM', zoom: 1 });
-                    dispatch({ type: 'SET_PAN', offset: { x: 0, y: 0 } });
-                }, style: btnStyle(false), title: tr('editor.view.resetView'), children: jsxRuntime.jsx(ui.NiceIcon, { name: "home", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: '#45475a', margin: '0 4px' } }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_GRID' }), style: btnStyle(state.showGrid), title: `${tr('editor.view.toggleGrid')} (Ctrl+G)`, children: jsxRuntime.jsx(ui.NiceIcon, { name: "grid", size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => dispatch({ type: 'TOGGLE_SNAP' }), style: btnStyle(state.snapToGrid), title: tr('editor.view.toggleSnap'), children: jsxRuntime.jsx(ui.NiceIcon, { name: "target", size: 14 }) }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: { fontSize: 11, opacity: 0.6 }, children: [state.mode.toUpperCase(), " | ", state.tool, " | ", state.dirty ? 'Unsaved' : 'Saved'] })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { state, dispatch, createNewEntity, undoStack } = useEditor();
+  const [showAddMenu, setShowAddMenu] = React.useState(false);
+  const tools = ["select", "move", "rotate", "scale", "pan"];
+  const toolIcons = {
+    select: "cursor",
+    move: "move",
+    rotate: "refresh",
+    scale: "expand",
+    pan: "grip"
+  };
+  const btnStyle = (active) => ({
+    background: active ? "#585b70" : "transparent",
+    border: "none",
+    color: "#cdd6f4",
+    padding: "4px 8px",
+    borderRadius: 4,
+    cursor: "pointer",
+    fontSize: 14
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "4px 8px",
+        borderBottom: "1px solid #45475a",
+        backgroundColor: "#181825"
+      },
+      children: [
+        tools.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "SET_TOOL", tool: t }),
+            style: btnStyle(state.tool === t),
+            title: `${tr(`editor.tools.${t}`)} (${t[0].toUpperCase()})`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: toolIcons[t], size: 14 })
+          },
+          t
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#45475a", margin: "0 4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setShowAddMenu(!showAddMenu),
+              style: {
+                ...btnStyle(false),
+                fontSize: 12,
+                padding: "4px 10px",
+                background: "#2f9e44",
+                color: "#fff"
+              },
+              children: "+ Entity"
+            }
+          ),
+          showAddMenu && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "100%",
+                left: 0,
+                zIndex: 100,
+                background: "#1e1e2e",
+                border: "1px solid #45475a",
+                borderRadius: 4,
+                padding: 4,
+                minWidth: 150,
+                marginTop: 2
+              },
+              children: ENTITY_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    createNewEntity(p.label, p.components);
+                    setShowAddMenu(false);
+                  },
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    textAlign: "left",
+                    background: "transparent",
+                    border: "none",
+                    color: "#cdd6f4",
+                    padding: "4px 8px",
+                    cursor: "pointer",
+                    borderRadius: 2,
+                    fontSize: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: p.icon, size: 12 }),
+                    " ",
+                    tr(`editor.entity.${p.key}`)
+                  ]
+                },
+                p.label
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#45475a", margin: "0 4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "SET_MODE", mode: state.mode === "play" ? "edit" : "play" }),
+            style: btnStyle(state.mode === "play"),
+            title: tr("editor.view.playStop"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: state.mode === "play" ? "stop" : "play", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "SET_MODE", mode: state.mode === "pause" ? "play" : "pause" }),
+            style: btnStyle(state.mode === "pause"),
+            title: tr("editor.actions.pause"),
+            disabled: state.mode === "edit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "pause", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#45475a", margin: "0 4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => undoStack.undo(),
+            style: btnStyle(false),
+            title: `${tr("editor.actions.undo")} (Ctrl+Z)`,
+            disabled: !undoStack.canUndo,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "undo", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => undoStack.redo(),
+            style: btnStyle(false),
+            title: `${tr("editor.actions.redo")} (Ctrl+Y)`,
+            disabled: !undoStack.canRedo,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "redo", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#45475a", margin: "0 4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "SET_ZOOM", zoom: state.zoom * 0.8 }),
+            style: btnStyle(false),
+            title: tr("editor.view.zoomOut"),
+            children: "−"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 11, minWidth: 40, textAlign: "center" }, children: [
+          state.zoom * 100 | 0,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "SET_ZOOM", zoom: state.zoom * 1.25 }),
+            style: btnStyle(false),
+            title: tr("editor.view.zoomIn"),
+            children: "+"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              dispatch({ type: "SET_ZOOM", zoom: 1 });
+              dispatch({ type: "SET_PAN", offset: { x: 0, y: 0 } });
+            },
+            style: btnStyle(false),
+            title: tr("editor.view.resetView"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "home", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#45475a", margin: "0 4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "TOGGLE_GRID" }),
+            style: btnStyle(state.showGrid),
+            title: `${tr("editor.view.toggleGrid")} (Ctrl+G)`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "grid", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => dispatch({ type: "TOGGLE_SNAP" }),
+            style: btnStyle(state.snapToGrid),
+            title: tr("editor.view.toggleSnap"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "target", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 11, opacity: 0.6 }, children: [
+          state.mode.toUpperCase(),
+          " | ",
+          state.tool,
+          " | ",
+          state.dirty ? "Unsaved" : "Saved"
+        ] })
+      ]
+    }
+  );
 };
 const EditorPanelContainer = ({ title, width, height, position, children }) => {
-    const isHorizontal = position === 'bottom';
-    return (jsxRuntime.jsxs("div", { style: {
-            width: isHorizontal ? '100%' : width,
-            height: isHorizontal ? height : undefined,
-            flex: isHorizontal ? undefined : undefined,
-            borderLeft: position === 'right' ? '1px solid #45475a' : undefined,
-            borderRight: position === 'left' ? '1px solid #45475a' : undefined,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-            backgroundColor: '#1e1e2e',
-        }, children: [jsxRuntime.jsx("div", { style: {
-                    padding: '4px 8px',
-                    fontSize: 11,
-                    fontWeight: 'bold',
-                    backgroundColor: '#181825',
-                    borderBottom: '1px solid #313244',
-                    textTransform: 'uppercase',
-                    letterSpacing: 1,
-                }, children: title }), jsxRuntime.jsx("div", { style: { flex: 1, overflow: 'auto', padding: 4 }, children: children })] }));
+  const isHorizontal = position === "bottom";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: isHorizontal ? "100%" : width,
+        height: isHorizontal ? height : void 0,
+        flex: isHorizontal ? void 0 : void 0,
+        borderLeft: position === "right" ? "1px solid #45475a" : void 0,
+        borderRight: position === "left" ? "1px solid #45475a" : void 0,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        backgroundColor: "#1e1e2e"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              padding: "4px 8px",
+              fontSize: 11,
+              fontWeight: "bold",
+              backgroundColor: "#181825",
+              borderBottom: "1px solid #313244",
+              textTransform: "uppercase",
+              letterSpacing: 1
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflow: "auto", padding: 4 }, children })
+      ]
+    }
+  );
 };
 const HierarchyPanel = () => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { world, state, dispatch, createNewEntity, refreshWorld, addLog } = useEditor();
-    const entities = world.allEntities().filter((e) => e.parent == null);
-    const getIcon = (id) => {
-        if (world.hasComponent(id, 'CameraTarget')) {
-            return 'camera';
-        }
-        if (world.hasComponent(id, 'Sprite')) {
-            return 'image';
-        }
-        if (world.hasComponent(id, 'Text')) {
-            return 'type';
-        }
-        if (world.hasComponent(id, 'Shape')) {
-            return 'square';
-        }
-        if (world.hasComponent(id, 'ParticleEmitter')) {
-            return 'star';
-        }
-        if (world.hasComponent(id, 'AudioSource')) {
-            return 'volume';
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { world, state, dispatch, createNewEntity, refreshWorld, addLog } = useEditor();
+  const entities = world.allEntities().filter((e) => e.parent == null);
+  const getIcon = (id) => {
+    if (world.hasComponent(id, "CameraTarget")) {
+      return "camera";
+    }
+    if (world.hasComponent(id, "Sprite")) {
+      return "image";
+    }
+    if (world.hasComponent(id, "Text")) {
+      return "type";
+    }
+    if (world.hasComponent(id, "Shape")) {
+      return "square";
+    }
+    if (world.hasComponent(id, "ParticleEmitter")) {
+      return "star";
+    }
+    if (world.hasComponent(id, "AudioSource")) {
+      return "volume";
+    }
+    return "circle";
+  };
+  const renderEntity = (e, depth) => {
+    const isSelected = state.selectedEntities.includes(e.id);
+    const children = e.children.map((cid) => world.getEntity(cid)).filter(Boolean);
+    return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: ui.clickOnActivationKey,
+          onClick: () => dispatch({ type: "SELECT", entities: [e.id] }),
+          style: {
+            padding: "2px 6px",
+            paddingLeft: 6 + depth * 16,
+            cursor: "pointer",
+            backgroundColor: isSelected ? "#45475a" : "transparent",
+            borderRadius: 2,
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            fontSize: 12
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 14, display: "inline-flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: getIcon(e.id), size: 12 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: e.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { opacity: 0.3, fontSize: 10 }, children: [
+              "#",
+              e.id
+            ] })
+          ]
         }
-        return 'circle';
-    };
-    const renderEntity = (e, depth) => {
-        const isSelected = state.selectedEntities.includes(e.id);
-        const children = e.children.map((cid) => world.getEntity(cid)).filter(Boolean);
-        return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, onClick: () => dispatch({ type: 'SELECT', entities: [e.id] }), style: {
-                        padding: '2px 6px',
-                        paddingLeft: 6 + depth * 16,
-                        cursor: 'pointer',
-                        backgroundColor: isSelected ? '#45475a' : 'transparent',
-                        borderRadius: 2,
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 4,
-                        fontSize: 12,
-                    }, children: [jsxRuntime.jsx("span", { style: { width: 14, display: 'inline-flex', justifyContent: 'center' }, children: jsxRuntime.jsx(ui.NiceIcon, { name: getIcon(e.id), size: 12 }) }), jsxRuntime.jsx("span", { style: { flex: 1 }, children: e.name }), jsxRuntime.jsxs("span", { style: { opacity: 0.3, fontSize: 10 }, children: ["#", e.id] })] }), children.map((c) => renderEntity(c, depth + 1))] }, e.id));
-    };
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: {
-                    padding: '2px 6px',
-                    fontSize: 10,
-                    display: 'flex',
-                    gap: 4,
-                    borderBottom: '1px solid #313244',
-                    marginBottom: 4,
-                }, children: [jsxRuntime.jsx("button", { onClick: () => createNewEntity('Entity'), style: {
-                            background: 'transparent',
-                            border: 'none',
-                            color: '#a6adc8',
-                            cursor: 'pointer',
-                            fontSize: 10,
-                        }, title: tr('editor.assets.addEntity'), children: "+" }), jsxRuntime.jsx("button", { onClick: () => {
-                            if (state.selectedEntities.length > 0) {
-                                const id = state.selectedEntities[0];
-                                const child = world.createEntity('Child');
-                                world.addComponent(child.id, 'Transform');
-                                world.setParent(child.id, id);
-                                dispatch({ type: 'SELECT', entities: [child.id] });
-                                dispatch({ type: 'MARK_DIRTY' });
-                                refreshWorld();
-                                addLog('info', `Created child entity (#${child.id})`);
-                            }
-                        }, style: {
-                            background: 'transparent',
-                            border: 'none',
-                            color: '#a6adc8',
-                            cursor: 'pointer',
-                            fontSize: 10,
-                        }, title: tr('editor.assets.addChild'), disabled: state.selectedEntities.length === 0, children: jsxRuntime.jsx(ui.NiceIcon, { name: "plus", size: 12 }) }), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: { color: '#6c7086' }, children: [world.entityCount, " entities"] })] }), entities.map((e) => renderEntity(e, 0))] }));
+      ),
+      children.map((c) => renderEntity(c, depth + 1))
+    ] }, e.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          padding: "2px 6px",
+          fontSize: 10,
+          display: "flex",
+          gap: 4,
+          borderBottom: "1px solid #313244",
+          marginBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => createNewEntity("Entity"),
+              style: {
+                background: "transparent",
+                border: "none",
+                color: "#a6adc8",
+                cursor: "pointer",
+                fontSize: 10
+              },
+              title: tr("editor.assets.addEntity"),
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                if (state.selectedEntities.length > 0) {
+                  const id = state.selectedEntities[0];
+                  const child = world.createEntity("Child");
+                  world.addComponent(child.id, "Transform");
+                  world.setParent(child.id, id);
+                  dispatch({ type: "SELECT", entities: [child.id] });
+                  dispatch({ type: "MARK_DIRTY" });
+                  refreshWorld();
+                  addLog("info", `Created child entity (#${child.id})`);
+                }
+              },
+              style: {
+                background: "transparent",
+                border: "none",
+                color: "#a6adc8",
+                cursor: "pointer",
+                fontSize: 10
+              },
+              title: tr("editor.assets.addChild"),
+              disabled: state.selectedEntities.length === 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "plus", size: 12 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#6c7086" }, children: [
+            world.entityCount,
+            " entities"
+          ] })
+        ]
+      }
+    ),
+    entities.map((e) => renderEntity(e, 0))
+  ] });
 };
-/* ── Inspector sub-editors ─────────────────────────────────────── */
 const fieldStyle = {
-    width: '100%',
-    background: '#313244',
-    color: '#cdd6f4',
-    border: '1px solid #45475a',
-    borderRadius: 3,
-    padding: '2px 4px',
-    fontSize: 11,
+  width: "100%",
+  background: "#313244",
+  color: "#cdd6f4",
+  border: "1px solid #45475a",
+  borderRadius: 3,
+  padding: "2px 4px",
+  fontSize: 11
 };
-const NumField = ({ label, value, onChange, step = 1 }) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: label }), jsxRuntime.jsx("input", { type: "number", value: Math.round(value * 1000) / 1000, step: step, onChange: (e) => onChange(Number(e.target.value)), style: { ...fieldStyle, flex: 1 } })] }));
-const ColField = ({ label, color, onChange }) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: label }), jsxRuntime.jsx("input", { type: "color", value: colorToHex(color), onChange: (e) => onChange(cssToColor(e.target.value)), style: { width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' } }), jsxRuntime.jsx("span", { style: { fontSize: 9, color: '#6c7086' }, children: colorToHex(color) })] }));
-const TransformEditor = ({ entityId }) => {
-    const { world, refreshWorld, dispatch } = useEditor();
-    const t = world.getComponent(entityId, 'Transform');
-    if (!t) {
-        return null;
+const NumField = ({ label, value, onChange, step = 1 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: 2 }, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: "#a6adc8" }, children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "number",
+      value: Math.round(value * 1e3) / 1e3,
+      step,
+      onChange: (e) => onChange(Number(e.target.value)),
+      style: { ...fieldStyle, flex: 1 }
     }
-    const update = (fn) => {
-        fn();
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(NumField, { label: "Pos X", value: t.position.x, onChange: (v) => update(() => {
-                    t.position.x = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Pos Y", value: t.position.y, onChange: (v) => update(() => {
-                    t.position.y = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Rotation", value: t.rotation * (180 / Math.PI), step: 5, onChange: (v) => update(() => {
-                    t.rotation = v * (Math.PI / 180);
-                }) }), jsxRuntime.jsx(NumField, { label: "Scale X", value: t.scale.x, step: 0.1, onChange: (v) => update(() => {
-                    t.scale.x = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Scale Y", value: t.scale.y, step: 0.1, onChange: (v) => update(() => {
-                    t.scale.y = v;
-                }) })] }));
+  )
+] });
+const ColField = ({ label, color, onChange }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: 2 }, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: "#a6adc8" }, children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "color",
+      value: colorToHex(color),
+      onChange: (e) => onChange(cssToColor(e.target.value)),
+      style: { width: 28, height: 20, border: "none", padding: 0, cursor: "pointer" }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 9, color: "#6c7086" }, children: colorToHex(color) })
+] });
+const TransformEditor = ({ entityId }) => {
+  const { world, refreshWorld, dispatch } = useEditor();
+  const t = world.getComponent(entityId, "Transform");
+  if (!t) {
+    return null;
+  }
+  const update = (fn) => {
+    fn();
+    dispatch({ type: "MARK_DIRTY" });
+    refreshWorld();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Pos X",
+        value: t.position.x,
+        onChange: (v) => update(() => {
+          t.position.x = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Pos Y",
+        value: t.position.y,
+        onChange: (v) => update(() => {
+          t.position.y = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Rotation",
+        value: t.rotation * (180 / Math.PI),
+        step: 5,
+        onChange: (v) => update(() => {
+          t.rotation = v * (Math.PI / 180);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Scale X",
+        value: t.scale.x,
+        step: 0.1,
+        onChange: (v) => update(() => {
+          t.scale.x = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Scale Y",
+        value: t.scale.y,
+        step: 0.1,
+        onChange: (v) => update(() => {
+          t.scale.y = v;
+        })
+      }
+    )
+  ] });
 };
 const ShapeEditor = ({ entityId }) => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { world, refreshWorld, dispatch } = useEditor();
-    const s = world.getComponent(entityId, 'Shape');
-    if (!s) {
-        return null;
-    }
-    const update = (fn) => {
-        fn();
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.shape') }), jsxRuntime.jsxs("select", { value: s.shape, onChange: (e) => update(() => {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- mutates discriminated-union variant; consumer narrows by `s.shape`
-                            s.shape = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "rect", children: tr('editor.shape.rect') }), jsxRuntime.jsx("option", { value: "circle", children: tr('editor.shape.circle') }), jsxRuntime.jsx("option", { value: "polygon", children: tr('editor.shape.polygon') }), jsxRuntime.jsx("option", { value: "line", children: tr('editor.shape.line') })] })] }), s.shape !== 'circle' && (jsxRuntime.jsx(NumField, { label: "Width", value: s.width, onChange: (v) => update(() => {
-                    s.width = v;
-                }) })), s.shape !== 'circle' && (jsxRuntime.jsx(NumField, { label: "Height", value: s.height, onChange: (v) => update(() => {
-                    s.height = v;
-                }) })), s.shape === 'circle' && (jsxRuntime.jsx(NumField, { label: "Radius", value: s.radius, onChange: (v) => update(() => {
-                    s.radius = v;
-                }) })), jsxRuntime.jsx(ColField, { label: "Fill", color: s.fillColor, onChange: (c) => update(() => {
-                    Object.assign(s.fillColor, c);
-                }) }), jsxRuntime.jsx(ColField, { label: "Stroke", color: s.strokeColor, onChange: (c) => update(() => {
-                    Object.assign(s.strokeColor, c);
-                }) }), jsxRuntime.jsx(NumField, { label: "Stroke W", value: s.strokeWidth, onChange: (v) => update(() => {
-                    s.strokeWidth = v;
-                }) })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { world, refreshWorld, dispatch } = useEditor();
+  const s = world.getComponent(entityId, "Shape");
+  if (!s) {
+    return null;
+  }
+  const update = (fn) => {
+    fn();
+    dispatch({ type: "MARK_DIRTY" });
+    refreshWorld();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: "#a6adc8" }, children: tr("editor.fields.shape") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: s.shape,
+          onChange: (e) => update(() => {
+            s.shape = e.target.value;
+          }),
+          style: { ...fieldStyle, flex: 1 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "rect", children: tr("editor.shape.rect") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "circle", children: tr("editor.shape.circle") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "polygon", children: tr("editor.shape.polygon") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "line", children: tr("editor.shape.line") })
+          ]
+        }
+      )
+    ] }),
+    s.shape !== "circle" && /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Width",
+        value: s.width,
+        onChange: (v) => update(() => {
+          s.width = v;
+        })
+      }
+    ),
+    s.shape !== "circle" && /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Height",
+        value: s.height,
+        onChange: (v) => update(() => {
+          s.height = v;
+        })
+      }
+    ),
+    s.shape === "circle" && /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Radius",
+        value: s.radius,
+        onChange: (v) => update(() => {
+          s.radius = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColField,
+      {
+        label: "Fill",
+        color: s.fillColor,
+        onChange: (c) => update(() => {
+          Object.assign(s.fillColor, c);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColField,
+      {
+        label: "Stroke",
+        color: s.strokeColor,
+        onChange: (c) => update(() => {
+          Object.assign(s.strokeColor, c);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Stroke W",
+        value: s.strokeWidth,
+        onChange: (v) => update(() => {
+          s.strokeWidth = v;
+        })
+      }
+    )
+  ] });
 };
 const SpriteEditor = ({ entityId }) => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { world, refreshWorld, dispatch } = useEditor();
-    const s = world.getComponent(entityId, 'Sprite');
-    if (!s) {
-        return null;
-    }
-    const update = (fn) => {
-        fn();
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(NumField, { label: "Width", value: s.width, onChange: (v) => update(() => {
-                    s.width = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Height", value: s.height, onChange: (v) => update(() => {
-                    s.height = v;
-                }) }), jsxRuntime.jsx(ColField, { label: "Tint", color: s.tint, onChange: (c) => update(() => {
-                    Object.assign(s.tint, c);
-                }) }), jsxRuntime.jsx(NumField, { label: "Opacity", value: s.opacity, step: 0.1, onChange: (v) => update(() => {
-                    s.opacity = Math.max(0, Math.min(1, v));
-                }) }), jsxRuntime.jsx(NumField, { label: "Layer", value: s.layer, step: 1, onChange: (v) => update(() => {
-                    s.layer = v;
-                }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.visible') }), jsxRuntime.jsx("input", { type: "checkbox", checked: s.visible, onChange: (e) => update(() => {
-                            s.visible = e.target.checked;
-                        }) })] })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { world, refreshWorld, dispatch } = useEditor();
+  const s = world.getComponent(entityId, "Sprite");
+  if (!s) {
+    return null;
+  }
+  const update = (fn) => {
+    fn();
+    dispatch({ type: "MARK_DIRTY" });
+    refreshWorld();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Width",
+        value: s.width,
+        onChange: (v) => update(() => {
+          s.width = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Height",
+        value: s.height,
+        onChange: (v) => update(() => {
+          s.height = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColField,
+      {
+        label: "Tint",
+        color: s.tint,
+        onChange: (c) => update(() => {
+          Object.assign(s.tint, c);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Opacity",
+        value: s.opacity,
+        step: 0.1,
+        onChange: (v) => update(() => {
+          s.opacity = Math.max(0, Math.min(1, v));
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Layer",
+        value: s.layer,
+        step: 1,
+        onChange: (v) => update(() => {
+          s.layer = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: "#a6adc8" }, children: tr("editor.fields.visible") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: s.visible,
+          onChange: (e) => update(() => {
+            s.visible = e.target.checked;
+          })
+        }
+      )
+    ] })
+  ] });
 };
 const TextEditor = ({ entityId }) => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { world, refreshWorld, dispatch } = useEditor();
-    const t = world.getComponent(entityId, 'Text');
-    if (!t) {
-        return null;
-    }
-    const update = (fn) => {
-        fn();
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, color: '#a6adc8' }, children: tr('editor.fields.text') }), jsxRuntime.jsx("input", { type: "text", value: t.text, onChange: (e) => update(() => {
-                            t.text = e.target.value;
-                        }), style: { ...fieldStyle, width: '100%' } })] }), jsxRuntime.jsx(NumField, { label: "Font Size", value: t.fontSize, onChange: (v) => update(() => {
-                    t.fontSize = v;
-                }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.align') }), jsxRuntime.jsxs("select", { value: t.align, onChange: (e) => update(() => {
-                            t.align = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "left", children: tr('editor.align.left') }), jsxRuntime.jsx("option", { value: "center", children: tr('editor.align.center') }), jsxRuntime.jsx("option", { value: "right", children: tr('editor.align.right') })] })] }), jsxRuntime.jsx(ColField, { label: "Color", color: t.color, onChange: (c) => update(() => {
-                    Object.assign(t.color, c);
-                }) })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { world, refreshWorld, dispatch } = useEditor();
+  const t = world.getComponent(entityId, "Text");
+  if (!t) {
+    return null;
+  }
+  const update = (fn) => {
+    fn();
+    dispatch({ type: "MARK_DIRTY" });
+    refreshWorld();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "#a6adc8" }, children: tr("editor.fields.text") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: t.text,
+          onChange: (e) => update(() => {
+            t.text = e.target.value;
+          }),
+          style: { ...fieldStyle, width: "100%" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Font Size",
+        value: t.fontSize,
+        onChange: (v) => update(() => {
+          t.fontSize = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: "#a6adc8" }, children: tr("editor.fields.align") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: t.align,
+          onChange: (e) => update(() => {
+            t.align = e.target.value;
+          }),
+          style: { ...fieldStyle, flex: 1 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "left", children: tr("editor.align.left") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "center", children: tr("editor.align.center") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "right", children: tr("editor.align.right") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColField,
+      {
+        label: "Color",
+        color: t.color,
+        onChange: (c) => update(() => {
+          Object.assign(t.color, c);
+        })
+      }
+    )
+  ] });
 };
 const RigidBodyEditor = ({ entityId }) => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { world, refreshWorld, dispatch } = useEditor();
-    const rb = world.getComponent(entityId, 'RigidBody2D');
-    if (!rb) {
-        return null;
-    }
-    const update = (fn) => {
-        fn();
-        dispatch({ type: 'MARK_DIRTY' });
-        refreshWorld();
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: '#a6adc8' }, children: tr('editor.fields.body') }), jsxRuntime.jsxs("select", { value: rb.bodyType, onChange: (e) => update(() => {
-                            rb.bodyType = e.target.value;
-                        }), style: { ...fieldStyle, flex: 1 }, children: [jsxRuntime.jsx("option", { value: "dynamic", children: tr('editor.body.dynamic') }), jsxRuntime.jsx("option", { value: "static", children: tr('editor.body.static') }), jsxRuntime.jsx("option", { value: "kinematic", children: tr('editor.body.kinematic') })] })] }), jsxRuntime.jsx(NumField, { label: "Mass", value: rb.mass, step: 0.1, onChange: (v) => update(() => {
-                    rb.mass = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Drag", value: rb.drag, step: 0.01, onChange: (v) => update(() => {
-                    rb.drag = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Bounce", value: rb.restitution, step: 0.05, onChange: (v) => update(() => {
-                    rb.restitution = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Friction", value: rb.friction, step: 0.05, onChange: (v) => update(() => {
-                    rb.friction = v;
-                }) }), jsxRuntime.jsx(NumField, { label: "Gravity", value: rb.gravityScale, step: 0.1, onChange: (v) => update(() => {
-                    rb.gravityScale = v;
-                }) })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { world, refreshWorld, dispatch } = useEditor();
+  const rb = world.getComponent(entityId, "RigidBody2D");
+  if (!rb) {
+    return null;
+  }
+  const update = (fn) => {
+    fn();
+    dispatch({ type: "MARK_DIRTY" });
+    refreshWorld();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, minWidth: 50, color: "#a6adc8" }, children: tr("editor.fields.body") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: rb.bodyType,
+          onChange: (e) => update(() => {
+            rb.bodyType = e.target.value;
+          }),
+          style: { ...fieldStyle, flex: 1 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "dynamic", children: tr("editor.body.dynamic") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "static", children: tr("editor.body.static") }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "kinematic", children: tr("editor.body.kinematic") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Mass",
+        value: rb.mass,
+        step: 0.1,
+        onChange: (v) => update(() => {
+          rb.mass = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Drag",
+        value: rb.drag,
+        step: 0.01,
+        onChange: (v) => update(() => {
+          rb.drag = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Bounce",
+        value: rb.restitution,
+        step: 0.05,
+        onChange: (v) => update(() => {
+          rb.restitution = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Friction",
+        value: rb.friction,
+        step: 0.05,
+        onChange: (v) => update(() => {
+          rb.friction = v;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NumField,
+      {
+        label: "Gravity",
+        value: rb.gravityScale,
+        step: 0.1,
+        onChange: (v) => update(() => {
+          rb.gravityScale = v;
+        })
+      }
+    )
+  ] });
 };
 const ADDABLE_COMPONENTS = [
-    'Transform',
-    'Sprite',
-    'Shape',
-    'Collider2D',
-    'RigidBody2D',
-    'Text',
-    'Animator',
-    'Script',
-    'AudioSource',
-    'ParticleEmitter',
-    'CameraTarget',
+  "Transform",
+  "Sprite",
+  "Shape",
+  "Collider2D",
+  "RigidBody2D",
+  "Text",
+  "Animator",
+  "Script",
+  "AudioSource",
+  "ParticleEmitter",
+  "CameraTarget"
 ];
 const InspectorPanel = () => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { state, world, dispatch, refreshWorld, addLog } = useEditor();
-    const [showAddComp, setShowAddComp] = React.useState(false);
-    if (state.selectedEntities.length === 0) {
-        return jsxRuntime.jsx("div", { style: { opacity: 0.5, padding: 8 }, children: tr('editor.messages.noSelection') });
-    }
-    const entityId = state.selectedEntities[0];
-    const entity = world.getEntity(entityId);
-    if (!entity) {
-        return null;
-    }
-    const compTypes = ADDABLE_COMPONENTS;
-    const presentComponents = compTypes.filter((type) => world.hasComponent(entityId, type));
-    const componentEditors = {
-        Transform: TransformEditor,
-        Shape: ShapeEditor,
-        Sprite: SpriteEditor,
-        Text: TextEditor,
-        RigidBody2D: RigidBodyEditor,
-    };
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: { padding: '4px 0', marginBottom: 4, borderBottom: '1px solid #313244' }, children: [jsxRuntime.jsx("input", { type: "text", value: entity.name, onChange: (e) => {
-                            entity.name = e.target.value;
-                            dispatch({ type: 'MARK_DIRTY' });
-                            refreshWorld();
-                        }, style: { ...fieldStyle, fontWeight: 'bold', fontSize: 13 } }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: '#6c7086' }, children: ["ID: ", entityId] })] }), presentComponents.map((type) => {
-                const Editor = componentEditors[type];
-                return (jsxRuntime.jsxs("div", { style: { marginBottom: 8, borderTop: '1px solid #313244', paddingTop: 4 }, children: [jsxRuntime.jsxs("div", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                marginBottom: 4,
-                            }, children: [jsxRuntime.jsx("span", { style: {
-                                        fontSize: 11,
-                                        fontWeight: 'bold',
-                                        textTransform: 'uppercase',
-                                        color: '#89b4fa',
-                                    }, children: type }), type !== 'Transform' && (jsxRuntime.jsx("button", { onClick: () => {
-                                        world.removeComponent(entityId, type);
-                                        dispatch({ type: 'MARK_DIRTY' });
-                                        refreshWorld();
-                                        addLog('info', `Removed ${type} from #${entityId}`);
-                                    }, style: {
-                                        background: 'transparent',
-                                        border: 'none',
-                                        color: '#f38ba8',
-                                        cursor: 'pointer',
-                                        fontSize: 10,
-                                    }, title: tr('editor.assets.removeComponent', { type }), children: jsxRuntime.jsx(ui.NiceIcon, { name: "close", size: 10 }) }))] }), Editor ? (jsxRuntime.jsx(Editor, { entityId: entityId })) : (jsxRuntime.jsx("pre", { style: { fontSize: 10, opacity: 0.6, whiteSpace: 'pre-wrap', margin: 0 }, children: JSON.stringify(world.getComponent(entityId, type), null, 2) }))] }, type));
-            }), jsxRuntime.jsxs("div", { style: { marginTop: 8, position: 'relative' }, children: [jsxRuntime.jsx("button", { onClick: () => setShowAddComp(!showAddComp), style: {
-                            width: '100%',
-                            padding: '4px 8px',
-                            background: '#313244',
-                            border: '1px solid #45475a',
-                            color: '#cdd6f4',
-                            borderRadius: 4,
-                            cursor: 'pointer',
-                            fontSize: 11,
-                        }, children: "+ Add Component" }), showAddComp && (jsxRuntime.jsx("div", { style: {
-                            position: 'absolute',
-                            bottom: '100%',
-                            left: 0,
-                            right: 0,
-                            background: '#1e1e2e',
-                            border: '1px solid #45475a',
-                            borderRadius: 4,
-                            padding: 4,
-                            marginBottom: 2,
-                            maxHeight: 200,
-                            overflow: 'auto',
-                            zIndex: 10,
-                        }, children: compTypes
-                            .filter((t) => !world.hasComponent(entityId, t))
-                            .map((type) => (jsxRuntime.jsx("button", { onClick: () => {
-                                world.addComponent(entityId, type);
-                                dispatch({ type: 'MARK_DIRTY' });
-                                refreshWorld();
-                                addLog('info', `Added ${type} to #${entityId}`);
-                                setShowAddComp(false);
-                            }, style: {
-                                display: 'block',
-                                width: '100%',
-                                textAlign: 'left',
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#cdd6f4',
-                                padding: '3px 6px',
-                                cursor: 'pointer',
-                                borderRadius: 2,
-                                fontSize: 11,
-                            }, children: type }, type))) }))] })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { state, world, dispatch, refreshWorld, addLog } = useEditor();
+  const [showAddComp, setShowAddComp] = React.useState(false);
+  if (state.selectedEntities.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: 0.5, padding: 8 }, children: tr("editor.messages.noSelection") });
+  }
+  const entityId = state.selectedEntities[0];
+  const entity = world.getEntity(entityId);
+  if (!entity) {
+    return null;
+  }
+  const compTypes = ADDABLE_COMPONENTS;
+  const presentComponents = compTypes.filter((type) => world.hasComponent(entityId, type));
+  const componentEditors = {
+    Transform: TransformEditor,
+    Shape: ShapeEditor,
+    Sprite: SpriteEditor,
+    Text: TextEditor,
+    RigidBody2D: RigidBodyEditor
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "4px 0", marginBottom: 4, borderBottom: "1px solid #313244" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: entity.name,
+          onChange: (e) => {
+            entity.name = e.target.value;
+            dispatch({ type: "MARK_DIRTY" });
+            refreshWorld();
+          },
+          style: { ...fieldStyle, fontWeight: "bold", fontSize: 13 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 9, color: "#6c7086" }, children: [
+        "ID: ",
+        entityId
+      ] })
+    ] }),
+    presentComponents.map((type) => {
+      const Editor = componentEditors[type];
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: { marginBottom: 8, borderTop: "1px solid #313244", paddingTop: 4 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: 4
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 11,
+                        fontWeight: "bold",
+                        textTransform: "uppercase",
+                        color: "#89b4fa"
+                      },
+                      children: type
+                    }
+                  ),
+                  type !== "Transform" && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        world.removeComponent(entityId, type);
+                        dispatch({ type: "MARK_DIRTY" });
+                        refreshWorld();
+                        addLog("info", `Removed ${type} from #${entityId}`);
+                      },
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        color: "#f38ba8",
+                        cursor: "pointer",
+                        fontSize: 10
+                      },
+                      title: tr("editor.assets.removeComponent", { type }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "close", size: 10 })
+                    }
+                  )
+                ]
+              }
+            ),
+            Editor ? /* @__PURE__ */ jsxRuntime.jsx(Editor, { entityId }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { fontSize: 10, opacity: 0.6, whiteSpace: "pre-wrap", margin: 0 }, children: JSON.stringify(world.getComponent(entityId, type), null, 2) })
+          ]
+        },
+        type
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8, position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setShowAddComp(!showAddComp),
+          style: {
+            width: "100%",
+            padding: "4px 8px",
+            background: "#313244",
+            border: "1px solid #45475a",
+            color: "#cdd6f4",
+            borderRadius: 4,
+            cursor: "pointer",
+            fontSize: 11
+          },
+          children: "+ Add Component"
+        }
+      ),
+      showAddComp && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            left: 0,
+            right: 0,
+            background: "#1e1e2e",
+            border: "1px solid #45475a",
+            borderRadius: 4,
+            padding: 4,
+            marginBottom: 2,
+            maxHeight: 200,
+            overflow: "auto",
+            zIndex: 10
+          },
+          children: compTypes.filter((t) => !world.hasComponent(entityId, t)).map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                world.addComponent(entityId, type);
+                dispatch({ type: "MARK_DIRTY" });
+                refreshWorld();
+                addLog("info", `Added ${type} to #${entityId}`);
+                setShowAddComp(false);
+              },
+              style: {
+                display: "block",
+                width: "100%",
+                textAlign: "left",
+                background: "transparent",
+                border: "none",
+                color: "#cdd6f4",
+                padding: "3px 6px",
+                cursor: "pointer",
+                borderRadius: 2,
+                fontSize: 11
+              },
+              children: type
+            },
+            type
+          ))
+        }
+      )
+    ] })
+  ] });
 };
 const AssetPanel = () => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const [tab, setTab] = React.useState('all');
-    const tabBtnStyle = (active) => ({
-        padding: '2px 8px',
-        border: 'none',
-        borderRadius: '3px 3px 0 0',
-        cursor: 'pointer',
-        fontSize: 10,
-        background: active ? '#313244' : 'transparent',
-        color: active ? '#cdd6f4' : '#6c7086',
-    });
-    const assets = [
-        { name: 'player.png', type: 'sprites', icon: 'image' },
-        { name: 'enemy.png', type: 'sprites', icon: 'image' },
-        { name: 'tileset.png', type: 'sprites', icon: 'image' },
-        { name: 'background.jpg', type: 'sprites', icon: 'image' },
-        { name: 'jump.wav', type: 'audio', icon: 'volume' },
-        { name: 'music.mp3', type: 'audio', icon: 'music' },
-        { name: 'coin.wav', type: 'audio', icon: 'volume' },
-        { name: 'playerController.ts', type: 'scripts', icon: 'code' },
-        { name: 'enemyAI.ts', type: 'scripts', icon: 'code' },
-    ];
-    const filtered = tab === 'all' ? assets : assets.filter((a) => a.type === tab);
-    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2, padding: '2px 4px', borderBottom: '1px solid #313244' }, children: [['all', 'sprites', 'audio', 'scripts'].map((t) => (jsxRuntime.jsx("button", { onClick: () => setTab(t), style: tabBtnStyle(tab === t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsx("button", { style: {
-                            background: 'transparent',
-                            border: 'none',
-                            color: '#a6adc8',
-                            cursor: 'pointer',
-                            fontSize: 10,
-                        }, title: tr('editor.assets.import'), children: "+ Import" })] }), jsxRuntime.jsx("div", { style: {
-                    flex: 1,
-                    overflow: 'auto',
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fill, 80px)',
-                    gap: 4,
-                    padding: 4,
-                }, children: filtered.map((a) => (jsxRuntime.jsxs("div", { draggable: true, style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: 2,
-                        padding: 4,
-                        background: '#313244',
-                        borderRadius: 4,
-                        cursor: 'grab',
-                        fontSize: 9,
-                        textAlign: 'center',
-                    }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: a.icon, size: 20 }), jsxRuntime.jsx("span", { style: { wordBreak: 'break-all' }, children: a.name })] }, a.name))) })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const [tab, setTab] = React.useState("all");
+  const tabBtnStyle = (active) => ({
+    padding: "2px 8px",
+    border: "none",
+    borderRadius: "3px 3px 0 0",
+    cursor: "pointer",
+    fontSize: 10,
+    background: active ? "#313244" : "transparent",
+    color: active ? "#cdd6f4" : "#6c7086"
+  });
+  const assets = [
+    { name: "player.png", type: "sprites", icon: "image" },
+    { name: "enemy.png", type: "sprites", icon: "image" },
+    { name: "tileset.png", type: "sprites", icon: "image" },
+    { name: "background.jpg", type: "sprites", icon: "image" },
+    { name: "jump.wav", type: "audio", icon: "volume" },
+    { name: "music.mp3", type: "audio", icon: "music" },
+    { name: "coin.wav", type: "audio", icon: "volume" },
+    { name: "playerController.ts", type: "scripts", icon: "code" },
+    { name: "enemyAI.ts", type: "scripts", icon: "code" }
+  ];
+  const filtered = tab === "all" ? assets : assets.filter((a) => a.type === tab);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { display: "flex", gap: 2, padding: "2px 4px", borderBottom: "1px solid #313244" },
+        children: [
+          ["all", "sprites", "audio", "scripts"].map((t) => /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setTab(t), style: tabBtnStyle(tab === t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t)),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              style: {
+                background: "transparent",
+                border: "none",
+                color: "#a6adc8",
+                cursor: "pointer",
+                fontSize: 10
+              },
+              title: tr("editor.assets.import"),
+              children: "+ Import"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          overflow: "auto",
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, 80px)",
+          gap: 4,
+          padding: 4
+        },
+        children: filtered.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            draggable: true,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 2,
+              padding: 4,
+              background: "#313244",
+              borderRadius: 4,
+              cursor: "grab",
+              fontSize: 9,
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: a.icon, size: 20 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { wordBreak: "break-all" }, children: a.name })
+            ]
+          },
+          a.name
+        ))
+      }
+    )
+  ] });
 };
 const ConsolePanel = () => {
-    const { t: tr } = useTranslation.useTranslation('engine');
-    const { consoleLogs } = useEditor();
-    const [filter, setFilter] = React.useState('all');
-    const scrollRef = React.useRef(null);
-    React.useEffect(() => {
-        if (scrollRef.current) {
-            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        }
-    }, [consoleLogs.length]);
-    const filtered = filter === 'all' ? consoleLogs : consoleLogs.filter((l) => l.level === filter);
-    const levelColors = { info: '#89b4fa', warn: '#f9e2af', error: '#f38ba8' };
-    const filterBtn = (f, label) => (jsxRuntime.jsx("button", { onClick: () => setFilter(f), style: {
-            padding: '1px 6px',
-            border: 'none',
-            borderRadius: 2,
-            cursor: 'pointer',
-            fontSize: 9,
-            background: filter === f ? '#313244' : 'transparent',
-            color: filter === f ? '#cdd6f4' : '#6c7086',
-        }, children: label }));
-    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', fontFamily: 'monospace' }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2, padding: '2px 4px', borderBottom: '1px solid #313244' }, children: [filterBtn('all', 'All'), " ", filterBtn('info', 'Info'), " ", filterBtn('warn', 'Warn'), ' ', filterBtn('error', 'Error'), jsxRuntime.jsx("span", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: '#6c7086' }, children: [filtered.length, " entries"] })] }), jsxRuntime.jsx("div", { ref: scrollRef, style: { flex: 1, overflow: 'auto', fontSize: 10 }, children: filtered.length === 0 ? (jsxRuntime.jsx("div", { style: { opacity: 0.4, padding: 8 }, children: tr('editor.messages.consoleReady') })) : (filtered.map((log) => (jsxRuntime.jsxs("div", { style: {
-                        padding: '1px 4px',
-                        borderBottom: '1px solid #181825',
-                        display: 'flex',
-                        gap: 6,
-                    }, children: [jsxRuntime.jsx("span", { style: { color: '#6c7086', minWidth: 55 }, children: new Date(log.timestamp).toLocaleTimeString([], { hour12: false }) }), jsxRuntime.jsxs("span", { style: { color: levelColors[log.level], fontWeight: 'bold', minWidth: 35 }, children: ["[", log.level.toUpperCase(), "]"] }), jsxRuntime.jsx("span", { children: log.message })] }, log.id)))) })] }));
+  const { t: tr } = useTranslation.useTranslation("engine");
+  const { consoleLogs } = useEditor();
+  const [filter, setFilter] = React.useState("all");
+  const scrollRef = React.useRef(null);
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [consoleLogs.length]);
+  const filtered = filter === "all" ? consoleLogs : consoleLogs.filter((l) => l.level === filter);
+  const levelColors = { info: "#89b4fa", warn: "#f9e2af", error: "#f38ba8" };
+  const filterBtn = (f, label) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => setFilter(f),
+      style: {
+        padding: "1px 6px",
+        border: "none",
+        borderRadius: 2,
+        cursor: "pointer",
+        fontSize: 9,
+        background: filter === f ? "#313244" : "transparent",
+        color: filter === f ? "#cdd6f4" : "#6c7086"
+      },
+      children: label
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { display: "flex", flexDirection: "column", height: "100%", fontFamily: "monospace" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: { display: "flex", gap: 2, padding: "2px 4px", borderBottom: "1px solid #313244" },
+            children: [
+              filterBtn("all", "All"),
+              " ",
+              filterBtn("info", "Info"),
+              " ",
+              filterBtn("warn", "Warn"),
+              " ",
+              filterBtn("error", "Error"),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 9, color: "#6c7086" }, children: [
+                filtered.length,
+                " entries"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, style: { flex: 1, overflow: "auto", fontSize: 10 }, children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: 0.4, padding: 8 }, children: tr("editor.messages.consoleReady") }) : filtered.map((log) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: "1px 4px",
+              borderBottom: "1px solid #181825",
+              display: "flex",
+              gap: 6
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6c7086", minWidth: 55 }, children: new Date(log.timestamp).toLocaleTimeString([], { hour12: false }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: levelColors[log.level], fontWeight: "bold", minWidth: 35 }, children: [
+                "[",
+                log.level.toUpperCase(),
+                "]"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: log.message })
+            ]
+          },
+          log.id
+        )) })
+      ]
+    }
+  );
 };
 const EditorViewport = () => {
-    const canvasRef = React.useRef(null);
-    const { state, dispatch, world, worldVersion, refreshWorld, undoStack } = useEditor();
-    const dragging = React.useRef(false);
-    const dragStart = React.useRef({ x: 0, y: 0 });
-    const dragEntityStart = React.useRef({ x: 0, y: 0 });
-    const panning = React.useRef(false);
-    const panStart = React.useRef({ x: 0, y: 0, px: 0, py: 0 });
-    // Draw loop
-    React.useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const { width, height } = canvas.getBoundingClientRect();
-        canvas.width = width;
-        canvas.height = height;
-        ctx.fillStyle = '#11111b';
-        ctx.fillRect(0, 0, width, height);
-        ctx.save();
-        ctx.translate(width / 2 + state.panOffset.x, height / 2 + state.panOffset.y);
-        ctx.scale(state.zoom, state.zoom);
-        // Grid
-        if (state.showGrid) {
-            const gs = state.gridSize;
-            const halfW = width / 2 / state.zoom;
-            const halfH = height / 2 / state.zoom;
-            const offX = -state.panOffset.x / state.zoom;
-            const offY = -state.panOffset.y / state.zoom;
-            const startX = Math.floor((offX - halfW) / gs) * gs;
-            const endX = Math.ceil((offX + halfW) / gs) * gs;
-            const startY = Math.floor((offY - halfH) / gs) * gs;
-            const endY = Math.ceil((offY + halfH) / gs) * gs;
-            ctx.strokeStyle = 'rgba(69, 71, 90, 0.3)';
-            ctx.lineWidth = 0.5 / state.zoom;
-            for (let x = startX; x <= endX; x += gs) {
-                ctx.beginPath();
-                ctx.moveTo(x, startY);
-                ctx.lineTo(x, endY);
-                ctx.stroke();
-            }
-            for (let y = startY; y <= endY; y += gs) {
-                ctx.beginPath();
-                ctx.moveTo(startX, y);
-                ctx.lineTo(endX, y);
-                ctx.stroke();
+  const canvasRef = React.useRef(null);
+  const { state, dispatch, world, worldVersion, refreshWorld, undoStack } = useEditor();
+  const dragging = React.useRef(false);
+  const dragStart = React.useRef({ x: 0, y: 0 });
+  const dragEntityStart = React.useRef({ x: 0, y: 0 });
+  const panning = React.useRef(false);
+  const panStart = React.useRef({ x: 0, y: 0, px: 0, py: 0 });
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const { width, height } = canvas.getBoundingClientRect();
+    canvas.width = width;
+    canvas.height = height;
+    ctx.fillStyle = "#11111b";
+    ctx.fillRect(0, 0, width, height);
+    ctx.save();
+    ctx.translate(width / 2 + state.panOffset.x, height / 2 + state.panOffset.y);
+    ctx.scale(state.zoom, state.zoom);
+    if (state.showGrid) {
+      const gs = state.gridSize;
+      const halfW = width / 2 / state.zoom;
+      const halfH = height / 2 / state.zoom;
+      const offX = -state.panOffset.x / state.zoom;
+      const offY = -state.panOffset.y / state.zoom;
+      const startX = Math.floor((offX - halfW) / gs) * gs;
+      const endX = Math.ceil((offX + halfW) / gs) * gs;
+      const startY = Math.floor((offY - halfH) / gs) * gs;
+      const endY = Math.ceil((offY + halfH) / gs) * gs;
+      ctx.strokeStyle = "rgba(69, 71, 90, 0.3)";
+      ctx.lineWidth = 0.5 / state.zoom;
+      for (let x = startX; x <= endX; x += gs) {
+        ctx.beginPath();
+        ctx.moveTo(x, startY);
+        ctx.lineTo(x, endY);
+        ctx.stroke();
+      }
+      for (let y = startY; y <= endY; y += gs) {
+        ctx.beginPath();
+        ctx.moveTo(startX, y);
+        ctx.lineTo(endX, y);
+        ctx.stroke();
+      }
+      ctx.strokeStyle = "rgba(205, 214, 244, 0.15)";
+      ctx.lineWidth = 1 / state.zoom;
+      ctx.beginPath();
+      ctx.moveTo(0, startY);
+      ctx.lineTo(0, endY);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(startX, 0);
+      ctx.lineTo(endX, 0);
+      ctx.stroke();
+    }
+    const entities = world.allEntities();
+    for (const entity of entities) {
+      if (!entity.enabled) {
+        continue;
+      }
+      const transform = world.getComponent(entity.id, "Transform");
+      if (!transform) {
+        continue;
+      }
+      ctx.save();
+      ctx.translate(transform.position.x, transform.position.y);
+      ctx.rotate(transform.rotation);
+      ctx.scale(transform.scale.x, transform.scale.y);
+      const isSelected = state.selectedEntities.includes(entity.id);
+      const shape = world.getComponent(entity.id, "Shape");
+      if (shape && shape.visible) {
+        ctx.fillStyle = colorToCSS(shape.fillColor);
+        ctx.strokeStyle = colorToCSS(shape.strokeColor);
+        ctx.lineWidth = shape.strokeWidth;
+        switch (shape.shape) {
+          case "rect":
+            ctx.fillRect(-shape.width / 2, -shape.height / 2, shape.width, shape.height);
+            if (shape.strokeWidth > 0) {
+              ctx.strokeRect(-shape.width / 2, -shape.height / 2, shape.width, shape.height);
             }
-            // Origin axes
-            ctx.strokeStyle = 'rgba(205, 214, 244, 0.15)';
-            ctx.lineWidth = 1 / state.zoom;
+            break;
+          case "circle":
             ctx.beginPath();
-            ctx.moveTo(0, startY);
-            ctx.lineTo(0, endY);
-            ctx.stroke();
+            ctx.arc(0, 0, shape.radius, 0, Math.PI * 2);
+            ctx.fill();
+            if (shape.strokeWidth > 0) {
+              ctx.stroke();
+            }
+            break;
+          case "line":
             ctx.beginPath();
-            ctx.moveTo(startX, 0);
-            ctx.lineTo(endX, 0);
+            ctx.moveTo(shape.lineStart.x, shape.lineStart.y);
+            ctx.lineTo(shape.lineEnd.x, shape.lineEnd.y);
             ctx.stroke();
-        }
-        // Render entities
-        const entities = world.allEntities();
-        for (const entity of entities) {
-            if (!entity.enabled) {
-                continue;
-            }
-            const transform = world.getComponent(entity.id, 'Transform');
-            if (!transform) {
-                continue;
-            }
-            ctx.save();
-            ctx.translate(transform.position.x, transform.position.y);
-            ctx.rotate(transform.rotation);
-            ctx.scale(transform.scale.x, transform.scale.y);
-            const isSelected = state.selectedEntities.includes(entity.id);
-            // Shape
-            const shape = world.getComponent(entity.id, 'Shape');
-            if (shape && shape.visible) {
-                ctx.fillStyle = colorToCSS(shape.fillColor);
-                ctx.strokeStyle = colorToCSS(shape.strokeColor);
-                ctx.lineWidth = shape.strokeWidth;
-                switch (shape.shape) {
-                    case 'rect':
-                        ctx.fillRect(-shape.width / 2, -shape.height / 2, shape.width, shape.height);
-                        if (shape.strokeWidth > 0) {
-                            ctx.strokeRect(-shape.width / 2, -shape.height / 2, shape.width, shape.height);
-                        }
-                        break;
-                    case 'circle':
-                        ctx.beginPath();
-                        ctx.arc(0, 0, shape.radius, 0, Math.PI * 2);
-                        ctx.fill();
-                        if (shape.strokeWidth > 0) {
-                            ctx.stroke();
-                        }
-                        break;
-                    case 'line':
-                        ctx.beginPath();
-                        ctx.moveTo(shape.lineStart.x, shape.lineStart.y);
-                        ctx.lineTo(shape.lineEnd.x, shape.lineEnd.y);
-                        ctx.stroke();
-                        break;
-                    case 'polygon':
-                        if (shape.points.length > 2) {
-                            ctx.beginPath();
-                            ctx.moveTo(shape.points[0].x, shape.points[0].y);
-                            for (let i = 1; i < shape.points.length; i++) {
-                                ctx.lineTo(shape.points[i].x, shape.points[i].y);
-                            }
-                            ctx.closePath();
-                            ctx.fill();
-                            if (shape.strokeWidth > 0) {
-                                ctx.stroke();
-                            }
-                        }
-                        break;
-                }
-            }
-            // Sprite
-            const sprite = world.getComponent(entity.id, 'Sprite');
-            if (sprite && sprite.visible) {
-                ctx.globalAlpha = sprite.opacity;
-                ctx.fillStyle = colorToCSS(sprite.tint);
-                const ax = -sprite.width * sprite.anchor.x;
-                const ay = -sprite.height * sprite.anchor.y;
-                ctx.fillRect(ax, ay, sprite.width, sprite.height);
-                // Sprite border
-                ctx.strokeStyle = 'rgba(255,255,255,0.2)';
-                ctx.lineWidth = 1 / state.zoom;
-                ctx.strokeRect(ax, ay, sprite.width, sprite.height);
-                // Sprite label
-                ctx.fillStyle = 'rgba(255,255,255,0.5)';
-                ctx.font = `${9 / state.zoom}px monospace`;
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                ctx.fillText(sprite.assetId || 'sprite', 0, 0);
-                ctx.globalAlpha = 1;
-            }
-            // Text
-            const text = world.getComponent(entity.id, 'Text');
-            if (text && text.visible && text.text) {
-                ctx.font = `${text.fontSize}px ${text.fontFamily}`;
-                ctx.fillStyle = colorToCSS(text.color);
-                ctx.textAlign = text.align;
-                ctx.textBaseline = text.baseline;
-                ctx.fillText(text.text, 0, 0);
-            }
-            // Particle emitter indicator
-            const particles = world.getComponent(entity.id, 'ParticleEmitter');
-            if (particles) {
-                ctx.strokeStyle = '#f9e2af';
-                ctx.lineWidth = 1 / state.zoom;
-                ctx.setLineDash([3 / state.zoom, 3 / state.zoom]);
-                ctx.beginPath();
-                ctx.arc(0, 0, 12, 0, Math.PI * 2);
+            break;
+          case "polygon":
+            if (shape.points.length > 2) {
+              ctx.beginPath();
+              ctx.moveTo(shape.points[0].x, shape.points[0].y);
+              for (let i = 1; i < shape.points.length; i++) {
+                ctx.lineTo(shape.points[i].x, shape.points[i].y);
+              }
+              ctx.closePath();
+              ctx.fill();
+              if (shape.strokeWidth > 0) {
                 ctx.stroke();
-                ctx.setLineDash([]);
-                ctx.fillStyle = '#f9e2af';
-                ctx.font = `${8 / state.zoom}px monospace`;
-                ctx.textAlign = 'center';
-                // Sparkle marker drawn as a cross (no glyph fonts on the canvas)
-                const spark = 4 / state.zoom;
-                ctx.fillRect(-spark / 4, -spark, spark / 2, spark * 2);
-                ctx.fillRect(-spark, -spark / 4, spark * 2, spark / 2);
-            }
-            // Camera indicator
-            const cam = world.getComponent(entity.id, 'CameraTarget');
-            if (cam) {
-                ctx.strokeStyle = '#a6e3a1';
-                ctx.lineWidth = 1.5 / state.zoom;
-                const hw = 60, hh = 34;
-                ctx.strokeRect(-hw, -hh, hw * 2, hh * 2);
-                ctx.font = `${8 / state.zoom}px monospace`;
-                ctx.fillStyle = '#a6e3a1';
-                ctx.textAlign = 'center';
-                ctx.fillText('Camera', 0, -hh - 4 / state.zoom);
-            }
-            // Selection highlight
-            if (isSelected) {
-                const b = getEntityBounds(entity.id, world);
-                ctx.strokeStyle = '#89b4fa';
-                ctx.lineWidth = 2 / state.zoom;
-                ctx.setLineDash([4 / state.zoom, 4 / state.zoom]);
-                ctx.strokeRect(b.x - 2, b.y - 2, b.w + 4, b.h + 4);
-                ctx.setLineDash([]);
-                // Corner handles
-                const hs = 4 / state.zoom;
-                ctx.fillStyle = '#89b4fa';
-                ctx.fillRect(b.x - hs, b.y - hs, hs * 2, hs * 2);
-                ctx.fillRect(b.x + b.w - hs, b.y - hs, hs * 2, hs * 2);
-                ctx.fillRect(b.x - hs, b.y + b.h - hs, hs * 2, hs * 2);
-                ctx.fillRect(b.x + b.w - hs, b.y + b.h - hs, hs * 2, hs * 2);
+              }
             }
-            // Entity name label (only if no visible shape/sprite/text OR selected)
-            if (isSelected || (!shape?.visible && !sprite?.visible && !text?.visible)) {
-                ctx.font = `${10 / state.zoom}px monospace`;
-                ctx.fillStyle = isSelected ? '#89b4fa' : 'rgba(205, 214, 244, 0.4)';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'bottom';
-                const b = getEntityBounds(entity.id, world);
-                ctx.fillText(entity.name, 0, b.y - 4 / state.zoom);
-                // Draw small dot for invisible/empty entities
-                if (!shape?.visible && !sprite?.visible && !text?.visible) {
-                    ctx.fillStyle = isSelected ? '#89b4fa' : 'rgba(205, 214, 244, 0.3)';
-                    ctx.beginPath();
-                    ctx.arc(0, 0, 3 / state.zoom, 0, Math.PI * 2);
-                    ctx.fill();
-                }
-            }
-            ctx.restore();
-        }
-        ctx.restore();
-        // HUD
-        ctx.fillStyle = '#6c7086';
-        ctx.font = '10px monospace';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        ctx.fillText(`Entities: ${world.entityCount} | Grid: ${state.gridSize}px`, 8, 8);
-    }, [state, worldVersion, world]);
-    // Mouse handlers
-    const screenToWorld = React.useCallback((e) => {
-        const canvas = canvasRef.current;
-        const rect = canvas.getBoundingClientRect();
-        const sx = e.clientX - rect.left;
-        const sy = e.clientY - rect.top;
-        return {
-            x: (sx - canvas.width / 2 - state.panOffset.x) / state.zoom,
-            y: (sy - canvas.height / 2 - state.panOffset.y) / state.zoom,
-        };
-    }, [state.zoom, state.panOffset]);
-    const handlePointerDown = React.useCallback((e) => {
-        // Middle click or pan tool = pan
-        if (e.button === 1 || (e.button === 0 && state.tool === 'pan')) {
-            panning.current = true;
-            panStart.current = {
-                x: e.clientX,
-                y: e.clientY,
-                px: state.panOffset.x,
-                py: state.panOffset.y,
-            };
-            e.target.setPointerCapture(e.pointerId);
-            return;
-        }
-        if (e.button !== 0) {
-            return;
+            break;
         }
-        const { x: wx, y: wy } = screenToWorld(e);
-        // Hit test (reverse order for top-most)
-        const entities = world.allEntities();
-        let hitId = null;
-        for (let i = entities.length - 1; i >= 0; i--) {
-            const ent = entities[i];
-            if (!ent.enabled) {
-                continue;
-            }
-            const bounds = getEntityWorldBounds(ent.id, world);
-            if (bounds &&
-                wx >= bounds.x &&
-                wx <= bounds.x + bounds.w &&
-                wy >= bounds.y &&
-                wy <= bounds.y + bounds.h) {
-                hitId = ent.id;
-                break;
-            }
+      }
+      const sprite = world.getComponent(entity.id, "Sprite");
+      if (sprite && sprite.visible) {
+        ctx.globalAlpha = sprite.opacity;
+        ctx.fillStyle = colorToCSS(sprite.tint);
+        const ax = -sprite.width * sprite.anchor.x;
+        const ay = -sprite.height * sprite.anchor.y;
+        ctx.fillRect(ax, ay, sprite.width, sprite.height);
+        ctx.strokeStyle = "rgba(255,255,255,0.2)";
+        ctx.lineWidth = 1 / state.zoom;
+        ctx.strokeRect(ax, ay, sprite.width, sprite.height);
+        ctx.fillStyle = "rgba(255,255,255,0.5)";
+        ctx.font = `${9 / state.zoom}px monospace`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(sprite.assetId || "sprite", 0, 0);
+        ctx.globalAlpha = 1;
+      }
+      const text = world.getComponent(entity.id, "Text");
+      if (text && text.visible && text.text) {
+        ctx.font = `${text.fontSize}px ${text.fontFamily}`;
+        ctx.fillStyle = colorToCSS(text.color);
+        ctx.textAlign = text.align;
+        ctx.textBaseline = text.baseline;
+        ctx.fillText(text.text, 0, 0);
+      }
+      const particles = world.getComponent(entity.id, "ParticleEmitter");
+      if (particles) {
+        ctx.strokeStyle = "#f9e2af";
+        ctx.lineWidth = 1 / state.zoom;
+        ctx.setLineDash([3 / state.zoom, 3 / state.zoom]);
+        ctx.beginPath();
+        ctx.arc(0, 0, 12, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = "#f9e2af";
+        ctx.font = `${8 / state.zoom}px monospace`;
+        ctx.textAlign = "center";
+        const spark = 4 / state.zoom;
+        ctx.fillRect(-spark / 4, -spark, spark / 2, spark * 2);
+        ctx.fillRect(-spark, -spark / 4, spark * 2, spark / 2);
+      }
+      const cam = world.getComponent(entity.id, "CameraTarget");
+      if (cam) {
+        ctx.strokeStyle = "#a6e3a1";
+        ctx.lineWidth = 1.5 / state.zoom;
+        const hw = 60, hh = 34;
+        ctx.strokeRect(-hw, -hh, hw * 2, hh * 2);
+        ctx.font = `${8 / state.zoom}px monospace`;
+        ctx.fillStyle = "#a6e3a1";
+        ctx.textAlign = "center";
+        ctx.fillText("Camera", 0, -hh - 4 / state.zoom);
+      }
+      if (isSelected) {
+        const b = getEntityBounds(entity.id, world);
+        ctx.strokeStyle = "#89b4fa";
+        ctx.lineWidth = 2 / state.zoom;
+        ctx.setLineDash([4 / state.zoom, 4 / state.zoom]);
+        ctx.strokeRect(b.x - 2, b.y - 2, b.w + 4, b.h + 4);
+        ctx.setLineDash([]);
+        const hs = 4 / state.zoom;
+        ctx.fillStyle = "#89b4fa";
+        ctx.fillRect(b.x - hs, b.y - hs, hs * 2, hs * 2);
+        ctx.fillRect(b.x + b.w - hs, b.y - hs, hs * 2, hs * 2);
+        ctx.fillRect(b.x - hs, b.y + b.h - hs, hs * 2, hs * 2);
+        ctx.fillRect(b.x + b.w - hs, b.y + b.h - hs, hs * 2, hs * 2);
+      }
+      if (isSelected || !shape?.visible && !sprite?.visible && !text?.visible) {
+        ctx.font = `${10 / state.zoom}px monospace`;
+        ctx.fillStyle = isSelected ? "#89b4fa" : "rgba(205, 214, 244, 0.4)";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "bottom";
+        const b = getEntityBounds(entity.id, world);
+        ctx.fillText(entity.name, 0, b.y - 4 / state.zoom);
+        if (!shape?.visible && !sprite?.visible && !text?.visible) {
+          ctx.fillStyle = isSelected ? "#89b4fa" : "rgba(205, 214, 244, 0.3)";
+          ctx.beginPath();
+          ctx.arc(0, 0, 3 / state.zoom, 0, Math.PI * 2);
+          ctx.fill();
         }
-        if (hitId !== null) {
-            dispatch({ type: 'SELECT', entities: [hitId] });
-            if (state.tool === 'select' || state.tool === 'move') {
-                dragging.current = true;
-                dragStart.current = { x: wx, y: wy };
-                const t = world.getComponent(hitId, 'Transform');
-                if (t) {
-                    dragEntityStart.current = { x: t.position.x, y: t.position.y };
-                }
-            }
+      }
+      ctx.restore();
+    }
+    ctx.restore();
+    ctx.fillStyle = "#6c7086";
+    ctx.font = "10px monospace";
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.fillText(`Entities: ${world.entityCount} | Grid: ${state.gridSize}px`, 8, 8);
+  }, [state, worldVersion, world]);
+  const screenToWorld = React.useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      const rect = canvas.getBoundingClientRect();
+      const sx = e.clientX - rect.left;
+      const sy = e.clientY - rect.top;
+      return {
+        x: (sx - canvas.width / 2 - state.panOffset.x) / state.zoom,
+        y: (sy - canvas.height / 2 - state.panOffset.y) / state.zoom
+      };
+    },
+    [state.zoom, state.panOffset]
+  );
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (e.button === 1 || e.button === 0 && state.tool === "pan") {
+        panning.current = true;
+        panStart.current = {
+          x: e.clientX,
+          y: e.clientY,
+          px: state.panOffset.x,
+          py: state.panOffset.y
+        };
+        e.target.setPointerCapture(e.pointerId);
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      const { x: wx, y: wy } = screenToWorld(e);
+      const entities = world.allEntities();
+      let hitId = null;
+      for (let i = entities.length - 1; i >= 0; i--) {
+        const ent = entities[i];
+        if (!ent.enabled) {
+          continue;
         }
-        else {
-            dispatch({ type: 'DESELECT_ALL' });
+        const bounds = getEntityWorldBounds(ent.id, world);
+        if (bounds && wx >= bounds.x && wx <= bounds.x + bounds.w && wy >= bounds.y && wy <= bounds.y + bounds.h) {
+          hitId = ent.id;
+          break;
         }
-        e.target.setPointerCapture(e.pointerId);
-    }, [state.tool, state.panOffset, screenToWorld, world, dispatch]);
-    const handlePointerMove = React.useCallback((e) => {
-        if (panning.current) {
-            const dx = e.clientX - panStart.current.x;
-            const dy = e.clientY - panStart.current.y;
-            dispatch({
-                type: 'SET_PAN',
-                offset: { x: panStart.current.px + dx, y: panStart.current.py + dy },
-            });
-            return;
+      }
+      if (hitId !== null) {
+        dispatch({ type: "SELECT", entities: [hitId] });
+        if (state.tool === "select" || state.tool === "move") {
+          dragging.current = true;
+          dragStart.current = { x: wx, y: wy };
+          const t = world.getComponent(hitId, "Transform");
+          if (t) {
+            dragEntityStart.current = { x: t.position.x, y: t.position.y };
+          }
         }
-        if (dragging.current && state.selectedEntities.length > 0) {
-            const { x: wx, y: wy } = screenToWorld(e);
-            const dx = wx - dragStart.current.x;
-            const dy = wy - dragStart.current.y;
-            const entityId = state.selectedEntities[0];
-            const t = world.getComponent(entityId, 'Transform');
-            if (t) {
-                let nx = dragEntityStart.current.x + dx;
-                let ny = dragEntityStart.current.y + dy;
-                if (state.snapToGrid) {
-                    nx = Math.round(nx / state.gridSize) * state.gridSize;
-                    ny = Math.round(ny / state.gridSize) * state.gridSize;
-                }
-                t.position.x = nx;
-                t.position.y = ny;
-                dispatch({ type: 'MARK_DIRTY' });
-                refreshWorld();
-            }
+      } else {
+        dispatch({ type: "DESELECT_ALL" });
+      }
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [state.tool, state.panOffset, screenToWorld, world, dispatch]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (panning.current) {
+        const dx = e.clientX - panStart.current.x;
+        const dy = e.clientY - panStart.current.y;
+        dispatch({
+          type: "SET_PAN",
+          offset: { x: panStart.current.px + dx, y: panStart.current.py + dy }
+        });
+        return;
+      }
+      if (dragging.current && state.selectedEntities.length > 0) {
+        const { x: wx, y: wy } = screenToWorld(e);
+        const dx = wx - dragStart.current.x;
+        const dy = wy - dragStart.current.y;
+        const entityId = state.selectedEntities[0];
+        const t = world.getComponent(entityId, "Transform");
+        if (t) {
+          let nx = dragEntityStart.current.x + dx;
+          let ny = dragEntityStart.current.y + dy;
+          if (state.snapToGrid) {
+            nx = Math.round(nx / state.gridSize) * state.gridSize;
+            ny = Math.round(ny / state.gridSize) * state.gridSize;
+          }
+          t.position.x = nx;
+          t.position.y = ny;
+          dispatch({ type: "MARK_DIRTY" });
+          refreshWorld();
         }
-    }, [
-        state.selectedEntities,
-        state.snapToGrid,
-        state.gridSize,
-        screenToWorld,
-        world,
-        dispatch,
-        refreshWorld,
-    ]);
-    const handlePointerUp = React.useCallback(() => {
-        if (dragging.current && state.selectedEntities.length > 0) {
-            const entityId = state.selectedEntities[0];
-            const t = world.getComponent(entityId, 'Transform');
-            if (t) {
-                const finalPos = { x: t.position.x, y: t.position.y };
-                const startPos = { ...dragEntityStart.current };
-                if (finalPos.x !== startPos.x || finalPos.y !== startPos.y) {
-                    undoStack.push({
-                        description: 'Move entity',
-                        undo: () => {
-                            t.position.x = startPos.x;
-                            t.position.y = startPos.y;
-                            refreshWorld();
-                        },
-                        redo: () => {
-                            t.position.x = finalPos.x;
-                            t.position.y = finalPos.y;
-                            refreshWorld();
-                        },
-                    });
-                }
+      }
+    },
+    [
+      state.selectedEntities,
+      state.snapToGrid,
+      state.gridSize,
+      screenToWorld,
+      world,
+      dispatch,
+      refreshWorld
+    ]
+  );
+  const handlePointerUp = React.useCallback(() => {
+    if (dragging.current && state.selectedEntities.length > 0) {
+      const entityId = state.selectedEntities[0];
+      const t = world.getComponent(entityId, "Transform");
+      if (t) {
+        const finalPos = { x: t.position.x, y: t.position.y };
+        const startPos = { ...dragEntityStart.current };
+        if (finalPos.x !== startPos.x || finalPos.y !== startPos.y) {
+          undoStack.push({
+            description: "Move entity",
+            undo: () => {
+              t.position.x = startPos.x;
+              t.position.y = startPos.y;
+              refreshWorld();
+            },
+            redo: () => {
+              t.position.x = finalPos.x;
+              t.position.y = finalPos.y;
+              refreshWorld();
             }
+          });
         }
-        dragging.current = false;
-        panning.current = false;
-    }, [state.selectedEntities, world, undoStack, refreshWorld]);
-    const handleWheel = React.useCallback((e) => {
-        e.preventDefault();
-        const factor = e.deltaY > 0 ? 0.9 : 1.1;
-        dispatch({ type: 'SET_ZOOM', zoom: state.zoom * factor });
-    }, [state.zoom, dispatch]);
-    return (jsxRuntime.jsx("canvas", { ref: canvasRef, style: {
-            width: '100%',
-            height: '100%',
-            display: 'block',
-            cursor: getCursorForTool(state.tool),
-        }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onWheel: handleWheel, onContextMenu: (e) => e.preventDefault() }));
+      }
+    }
+    dragging.current = false;
+    panning.current = false;
+  }, [state.selectedEntities, world, undoStack, refreshWorld]);
+  const handleWheel = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      const factor = e.deltaY > 0 ? 0.9 : 1.1;
+      dispatch({ type: "SET_ZOOM", zoom: state.zoom * factor });
+    },
+    [state.zoom, dispatch]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "block",
+        cursor: getCursorForTool(state.tool)
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onWheel: handleWheel,
+      onContextMenu: (e) => e.preventDefault()
+    }
+  );
 };
-
 exports.NiceGameEditor = NiceGameEditor;
 exports.UndoStack = UndoStack;
 exports.deserializeProject = deserializeProject;