diff --git a/GDD.md b/GDD.md
index 321e140..3f18bc4 100644
--- a/GDD.md
+++ b/GDD.md
@@ -963,7 +963,17 @@ export function registerUserScripts() {
 Визуально это oldschool кнопки с F-клавишами в стиле Norton Commander:
 F1 Game F2 Save F3 Load F4 New F5 Sprite Edit F9 Settings
 
-При нажатии Shift: F2 Save As...
+Нижнее меню является **динамическим smart-меню**:
+
+- в обычном состоянии оно показывает базовые F-клавиши редактора;
+- при удержании модификаторов (`Shift`, `Alt`, `Ctrl`) оно временно перестраивается и показывает набор горячих клавиш, доступных с этим модификатором;
+- подписи в таком режиме могут зависеть от текущего состояния редактора. Например, при удержании `Alt` для выделенного объекта может показываться `D Disable` или `D Enable` в зависимости от того, отключён объект или нет.
+
+Пример:
+
+- при нажатии `Shift`: `F2 Save As...`, а также `1 Save Sel. 1` и `2 Save Sel. 2` для сохранения текущего выделения в два быстрых selection slots
+- при нажатии `Alt`: `F2 Save As...`, а также контекстные действия вроде `L Lock/Unlock` и `D Disable/Enable`
+- при нажатии `Ctrl`: операции редактирования вроде `Undo`, `Redo`, `Duplicate`, `Copy`, `Paste`, `Save Prefab`, `Load Prefab`
 
 Пользователь может нажимать на них мышкой или использовать клавиатурные сочетания.
 
@@ -1078,10 +1088,16 @@ Prefab можно загрузить в текущую сцену из файл
 | **Ctrl + V**              | Paste          | Вставить объект/группу из буфера в позицию курсора (или в центр вида)            |
 | **Ctrl + S**              | Save Prefab    | Сохранить текущее выделение (single/group) в файл Prefab                         |
 | **Ctrl + O**              | Load Prefab    | Загрузить prefab и вставить в позицию курсора (или в центр вида)                 |
+| **Shift + 1**             | Save Sel. 1    | Сохранить текущее single/group выделение в быстрый слот 1, если курсор над канвасом или Hierarchy |
+| **Shift + 2**             | Save Sel. 2    | Сохранить текущее single/group выделение в быстрый слот 2, если курсор над канвасом или Hierarchy |
+| **1**                     | Restore Sel. 1 | Восстановить сохранённое выделение из быстрого слота 1, если курсор над канвасом или Hierarchy |
+| **2**                     | Restore Sel. 2 | Восстановить сохранённое выделение из быстрого слота 2, если курсор над канвасом или Hierarchy |
 | **Insert**                | Assign Sprite  | Назначить спрайт выбранному объекту                                              |
 | **Space**                 | Select Scene   | Выбрать настройки сцены (и снять выделение с объектов), если курсор над канвасом |
 | **LMB Drag (empty area)** | Marquee Select | Выделить несколько объектов прямоугольной областью                               |
 
+Быстрые selection slots запоминают именно текущий набор выделенных объектов по их ID в текущей сцене. Если слот пуст, или сохранённые объекты больше не существуют, редактор показывает пользователю Toast Notification.
+
 ### 3. Создание объектов (Creation)
 
 | Клавиша   | Действие       | Описание                                       |
diff --git a/progress.md b/progress.md
index 1cf1d40..5865e6a 100644
--- a/progress.md
+++ b/progress.md
@@ -24,3 +24,8 @@ Original prompt: Давай временно переключимся с пар
 - Budgets scene cache подняты в 3 раза; image cache получил отдельный budget по device class.
 - В `GDD.md` в конец раздела `Техническая реализация` добавлено описание profiler и примеры вызова через `window.__QUEST_DEBUG__`.
 - Проверка browser loop: skill client не запустился, потому что в окружении нет пакета 'playwright'; для smoke test использован встроенный browser MCP.
+
+- New task: make editor bottom menu modifier-aware (Ctrl/Alt/Shift), with dynamic labels such as D ENABLE/DISABLE based on selected object state.
+- Implemented state-driven EditorBottomMenu with modifier modes; added Alt/Shift Save As path and Ctrl action set; pending browser smoke verification.
+
+- Verified in browser: bottom menu now switches between base / Alt / Ctrl / Shift layouts, and Alt mode updates D from Disable to Enable after toggling selected object disabled state.\n
diff --git a/public/scenes/logo.json b/public/scenes/logo.json
new file mode 100644
index 0000000..f6efb28
--- /dev/null
+++ b/public/scenes/logo.json
@@ -0,0 +1,513 @@
+{
+  "id": "logo",
+  "name": "New Scene",
+  "description": "You are in New Scene.",
+  "textRedirects": {},
+  "filename": "logo",
+  "walkbox": [],
+  "triggerboxes": [],
+  "scaling": {
+    "enabled": true,
+    "min": 0.4,
+    "max": 1,
+    "horizon": 78,
+    "front": 421
+  },
+  "entities": [
+    {
+      "name": "Quad_201",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": "#g,#a",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "3d-parallax"
+        }
+      ],
+      "layer": -1,
+      "visible": true,
+      "x": 334.7566652973353,
+      "y": 147.45349435034427,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": -1449,
+          "y": 432,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_204",
+            "type": "vertex",
+            "index": 3
+          }
+        },
+        {
+          "x": 1528,
+          "y": 428,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_204",
+            "type": "vertex",
+            "index": 2
+          }
+        },
+        {
+          "x": 3915.4050968588786,
+          "y": 457.44748933663504,
+          "p": 1
+        },
+        {
+          "x": -3349.5949031411214,
+          "y": 457.44748933663504,
+          "p": 1
+        }
+      ],
+      "color": "#000219",
+      "sortMode": "ignore",
+      "opacity": 1,
+      "blendMode": "source-over",
+      "isGrid": true,
+      "gridLinesX": 29,
+      "gridLinesY": 7,
+      "lineWidth": 7.4,
+      "gridColor": "#136382",
+      "filled": true,
+      "blur": 0
+    },
+    {
+      "name": "Quad_1",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": "#a",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -1,
+      "visible": true,
+      "x": 363.1753332849686,
+      "y": -1342.0347499102,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": -1387,
+          "y": -476,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad",
+            "type": "vertex",
+            "index": 3
+          }
+        },
+        {
+          "x": 1652,
+          "y": -488,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad",
+            "type": "vertex",
+            "index": 2
+          }
+        },
+        {
+          "x": 3933.8237648465147,
+          "y": -1042.0407549239112,
+          "p": 1
+        },
+        {
+          "x": -3331.1762351534853,
+          "y": -1042.0407549239112,
+          "p": 1
+        }
+      ],
+      "color": "#000219",
+      "sortMode": "ignore",
+      "opacity": 1,
+      "blendMode": "source-over",
+      "isGrid": true,
+      "gridLinesX": 29,
+      "gridLinesY": 7,
+      "lineWidth": 7.4,
+      "gridColor": "#136382",
+      "filled": true,
+      "blur": 0
+    },
+    {
+      "name": "miles_ds",
+      "type": "Actor",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Shadow",
+          "shadowQuadId": "shadow",
+          "offsetX": -80,
+          "offsetY": -0.79232867459731,
+          "triggerId": "#g"
+        }
+      ],
+      "layer": 0,
+      "visible": true,
+      "x": -11.507373210367716,
+      "y": 437.34328111928414,
+      "width": 66.7529345238604,
+      "height": 272.57448263909663,
+      "baseWidth": 96,
+      "baseHeight": 392,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "miles_ds-idle-right.json",
+      "color": "#e27fa5",
+      "scale": 0.6953430679568792,
+      "modelScale": 1.03,
+      "parallax": 0.4538289363137056,
+      "ignoreScaling": false,
+      "animationSpeed": 30,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0,
+      "isPlayer": true,
+      "speed": 0.35,
+      "direction": "left",
+      "animSets": {
+        "idle": {
+          "id": "idle",
+          "up": "miles_ds-idle-up.json",
+          "down": "miles_ds-idle-down.json",
+          "left": null,
+          "right": "miles_ds-idle-right.json"
+        },
+        "walk": {
+          "id": "walk",
+          "up": "miles_ds-walk-up.json",
+          "down": "miles_ds-walk-down.json",
+          "left": null,
+          "right": "miles_ds-walk-right.json"
+        }
+      }
+    },
+    {
+      "name": "shadow",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": -67.17651736805739,
+      "y": 437.33802751880216,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": -67.17651736805739,
+          "y": 437.33802751880216,
+          "p": 0.4523541075273739
+        },
+        {
+          "x": 5.443172833624047,
+          "y": 437.2945106625292,
+          "p": 0.452503989220326
+        },
+        {
+          "x": -5.703139435760795,
+          "y": 438.52482078346884,
+          "p": 0.48592782666534984
+        },
+        {
+          "x": -73.48973431343629,
+          "y": 438.4581791995139,
+          "p": 0.48411737462461735
+        }
+      ],
+      "color": "#000000",
+      "sortMode": "ignore",
+      "opacity": 1,
+      "blendMode": "multiply",
+      "isGrid": false,
+      "gridLinesX": 5,
+      "gridLinesY": 5,
+      "lineWidth": 1,
+      "gridColor": "#ffffff",
+      "filled": true,
+      "blur": 4
+    },
+    {
+      "name": "logo_1",
+      "type": "Entity",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": -71,
+      "y": 237,
+      "width": 439.65753424657544,
+      "height": 438.3150684931505,
+      "baseWidth": 392.5513698630138,
+      "baseHeight": 391.35273972602727,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "scanline_logo",
+      "color": "#AAAAAA",
+      "scale": 1.1199999999999999,
+      "modelScale": 2.8,
+      "parallax": 0.2,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 0.6,
+      "blendMode": "lighter",
+      "blur": 0
+    },
+    {
+      "name": "logo_2",
+      "type": "Entity",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": -64,
+      "y": 346,
+      "width": 655.1999999999999,
+      "height": 668.64,
+      "baseWidth": 585,
+      "baseHeight": 597,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "scanline_logo",
+      "color": "#00ca4c",
+      "scale": 1.1199999999999999,
+      "modelScale": 2.8,
+      "parallax": 0.2,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 0.35,
+      "blendMode": "screen",
+      "blur": 32
+    },
+    {
+      "name": "Quad_204",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -2,
+      "visible": true,
+      "x": -306.3073195313695,
+      "y": 194.6463347631958,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": -1132,
+          "y": 408,
+          "p": 0.2
+        },
+        {
+          "x": 1152,
+          "y": 388,
+          "p": 0.2
+        },
+        {
+          "x": 1528,
+          "y": 428,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_201",
+            "type": "vertex",
+            "index": 1
+          }
+        },
+        {
+          "x": -1449,
+          "y": 432,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_201",
+            "type": "vertex",
+            "index": 0
+          }
+        }
+      ],
+      "color": "#ee00ff",
+      "sortMode": "ignore",
+      "opacity": 1,
+      "blendMode": "difference",
+      "isGrid": false,
+      "gridLinesX": 5,
+      "gridLinesY": 5,
+      "lineWidth": 1,
+      "gridColor": "#ffffff",
+      "filled": true,
+      "blur": 8
+    },
+    {
+      "name": "Quad",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -2,
+      "visible": true,
+      "x": 31.056518423854072,
+      "y": -469.3074715804131,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": -914,
+          "y": -424,
+          "p": 0.2
+        },
+        {
+          "x": 1249,
+          "y": -424,
+          "p": 0.2
+        },
+        {
+          "x": 1652,
+          "y": -488,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_1",
+            "type": "vertex",
+            "index": 1
+          }
+        },
+        {
+          "x": -1387,
+          "y": -476,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_1",
+            "type": "vertex",
+            "index": 0
+          }
+        }
+      ],
+      "color": "#ee00ff",
+      "sortMode": "ignore",
+      "opacity": 1,
+      "blendMode": "difference",
+      "isGrid": false,
+      "gridLinesX": 5,
+      "gridLinesY": 5,
+      "lineWidth": 1,
+      "gridColor": "#ffffff",
+      "filled": true,
+      "blur": 8
+    },
+    {
+      "name": "Quad_646",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": -1359.1857676091972,
+      "y": -530.9597165247759,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": -1387,
+          "y": -476,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_1",
+            "type": "vertex",
+            "index": 0
+          }
+        },
+        {
+          "x": 1550.7,
+          "y": -487.6,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_1",
+            "type": "grid",
+            "gridU": 0.9666666666666667,
+            "gridV": 0
+          }
+        },
+        {
+          "x": 1528,
+          "y": 428,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_201",
+            "type": "vertex",
+            "index": 1
+          }
+        },
+        {
+          "x": -1449,
+          "y": 432,
+          "p": 0.2,
+          "binding": {
+            "targetName": "Quad_201",
+            "type": "vertex",
+            "index": 0
+          }
+        }
+      ],
+      "color": "#020440",
+      "sortMode": "ignore",
+      "opacity": 0.55,
+      "blendMode": "source-over",
+      "isGrid": false,
+      "gridLinesX": 5,
+      "gridLinesY": 5,
+      "lineWidth": 1,
+      "gridColor": "#ffffff",
+      "filled": true,
+      "blur": 20
+    }
+  ],
+  "camera": {
+    "x": 165.57094204403754,
+    "y": -263.4392820164094,
+    "zoom": 0.1500946352969992
+  },
+  "autoCenter": true,
+  "cameraSpeed": 5,
+  "camDeadzoneX": 50,
+  "camDeadzoneY": 30,
+  "camMaxY": -370
+}
diff --git a/public/scenes/test_room (10).json b/public/scenes/test_room (10).json
index 8256b5f..6151972 100644
--- a/public/scenes/test_room (10).json	
+++ b/public/scenes/test_room (10).json	
@@ -17,7 +17,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "poly": [
         {
           "x": -79,
@@ -50,7 +49,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "poly": [
         {
           "x": 82,
@@ -117,13 +115,11 @@
       "components": [
         {
           "type": "Subscene",
-          "targetGroupId": "#D",
-          "name": ""
+          "targetGroupId": "#D"
         }
       ],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "poly": [
         {
           "x": 27,
@@ -165,7 +161,7 @@
       "type": "Triggerbox",
       "locked": false,
       "disabled": true,
-      "groupID": "",
+      "groupID": null,
       "customName": "",
       "textRedirects": {},
       "interactions": {},
@@ -180,7 +176,7 @@
           "sound2": "drawer_close.wav"
         }
       ],
-      "layer": 1,
+      "layer": 0,
       "visible": true,
       "spatial": {
         "parentNodeId": "Trig_sub_D",
@@ -218,7 +214,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "poly": [],
       "script": ""
     },
@@ -242,9 +237,12 @@
           "sound2": "drawer_close.wav"
         }
       ],
-      "layer": 1,
+      "layer": 0,
       "visible": true,
-      "spatial": {},
+      "spatial": {
+        "parentNodeId": "Trig_sub_D",
+        "relation": "in"
+      },
       "poly": [
         {
           "x": -156.29411764705878,
@@ -266,44 +264,93 @@
       "script": ""
     },
     {
-      "name": "Drawer3",
+      "name": "Desk",
       "type": "Triggerbox",
       "locked": false,
-      "disabled": true,
+      "disabled": false,
       "groupID": null,
       "customName": "",
       "textRedirects": {},
       "interactions": {},
-      "components": [
-        {
-          "type": "Subscene",
-          "targetGroupId": "",
-          "title": "",
-          "description": ""
-        }
-      ],
+      "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {
-        "parentNodeId": "Trig_sub_D",
-        "relation": "in"
-      },
       "poly": [
         {
-          "x": -106,
-          "y": 4
+          "x": -210,
+          "y": 211
+        },
+        {
+          "x": -192,
+          "y": 213
+        },
+        {
+          "x": -192,
+          "y": 197
+        },
+        {
+          "x": -171,
+          "y": 189
+        },
+        {
+          "x": -159,
+          "y": 211
+        },
+        {
+          "x": -136,
+          "y": 217
         },
         {
-          "x": 389,
-          "y": 3
+          "x": -131,
+          "y": 242
         },
         {
-          "x": 375,
+          "x": -109,
+          "y": 243
+        },
+        {
+          "x": -110,
+          "y": 146
+        },
+        {
+          "x": -18,
+          "y": 129
+        },
+        {
+          "x": -16,
+          "y": 201
+        },
+        {
+          "x": 26,
+          "y": 207
+        },
+        {
+          "x": 82,
+          "y": 193
+        },
+        {
+          "x": 87,
           "y": 95
         },
         {
-          "x": -107,
-          "y": 91
+          "x": -70,
+          "y": 78
+        },
+        {
+          "x": -236,
+          "y": 115
+        },
+        {
+          "x": -235,
+          "y": 173
+        },
+        {
+          "x": -218,
+          "y": 182
+        },
+        {
+          "x": -212,
+          "y": 211
         }
       ],
       "script": ""
@@ -329,7 +376,10 @@
       "components": [],
       "layer": -2,
       "visible": true,
-      "spatial": {},
+      "spatial": {
+        "parentNodeId": "window1",
+        "relation": "in"
+      },
       "x": 119.67896209456934,
       "y": 234,
       "width": 821.6,
@@ -361,7 +411,6 @@
       "components": [],
       "layer": -1,
       "visible": true,
-      "spatial": {},
       "x": 199,
       "y": 297,
       "width": 884.8,
@@ -393,7 +442,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "x": 100,
       "y": 249,
       "width": 116.89999999999999,
@@ -422,24 +470,31 @@
       "customName": "",
       "textRedirects": {},
       "interactions": {},
-      "components": [],
+      "components": [
+        {
+          "type": "Shadow",
+          "shadowQuadId": "shadow",
+          "offsetX": -70,
+          "offsetY": -25,
+          "triggerId": "room"
+        }
+      ],
       "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 251.49445909180304,
-      "y": 256.5381551800198,
-      "width": 69.81706443264875,
-      "height": 285.0863464333157,
+      "x": 232.86186143649797,
+      "y": 223.85074125381902,
+      "width": 71.03999999999999,
+      "height": 290.08,
       "baseWidth": 96,
       "baseHeight": 392,
       "colliderWidth": 88,
       "colliderHeight": 4,
       "spriteName": "miles_ds-idle-right.json",
       "color": "#00ffff",
-      "scale": 0.7272610878400911,
+      "scale": 0.74,
       "modelScale": 0.74,
-      "parallax": 1.046112265312777,
-      "ignoreScaling": false,
+      "parallax": 1.024795357575403,
+      "ignoreScaling": true,
       "animationSpeed": 30,
       "opacity": 1,
       "blendMode": "source-over",
@@ -476,7 +531,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "x": -328,
       "y": 307,
       "width": 171.2340644206598,
@@ -508,7 +562,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "x": 135,
       "y": 310,
       "width": 614.4,
@@ -545,7 +598,6 @@
       ],
       "layer": 3,
       "visible": true,
-      "spatial": {},
       "x": 134,
       "y": 311,
       "width": 614.4,
@@ -577,7 +629,6 @@
       "components": [],
       "layer": 4,
       "visible": true,
-      "spatial": {},
       "x": 136,
       "y": -4,
       "width": 614.4,
@@ -684,7 +735,6 @@
       "components": [],
       "layer": 6,
       "visible": true,
-      "spatial": {},
       "x": 135,
       "y": -176,
       "width": 614.4,
@@ -721,7 +771,6 @@
       ],
       "layer": 6,
       "visible": true,
-      "spatial": {},
       "x": 135,
       "y": 66,
       "width": 614.4,
@@ -757,7 +806,6 @@
       ],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "x": -146.13725490196006,
       "y": 289.60784313725503,
       "parallax": 1,
@@ -808,9 +856,8 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 222.90433731748038,
-      "y": 306.9284515529542,
+      "x": 222.9043373174802,
+      "y": 306.9284515529539,
       "width": 1008.8000000000001,
       "height": 90.39999999999999,
       "baseWidth": 1261,
@@ -821,7 +868,7 @@
       "color": "#36d87fff",
       "scale": 0.8,
       "modelScale": 0.8,
-      "parallax": 1.079038203629382,
+      "parallax": 1.0790382036293817,
       "ignoreScaling": false,
       "animationSpeed": 150,
       "opacity": 1,
@@ -844,7 +891,6 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
       "x": -152,
       "y": -11,
       "width": 112,
@@ -942,7 +988,7 @@
       "name": "Drawer1",
       "type": "Entity",
       "locked": false,
-      "disabled": true,
+      "disabled": false,
       "groupID": null,
       "customName": "",
       "textRedirects": {},
@@ -951,7 +997,7 @@
       "layer": 0,
       "visible": true,
       "spatial": {
-        "parentNodeId": "Trig_sub_D",
+        "parentNodeId": "Desk",
         "relation": "in"
       },
       "x": 90.66834500947778,
@@ -972,6 +1018,87 @@
       "opacity": 0,
       "blendMode": "source-over",
       "blur": 0
+    },
+    {
+      "name": "window1",
+      "type": "Entity",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -2,
+      "visible": true,
+      "x": 56,
+      "y": -192,
+      "width": 27.3,
+      "height": 27.3,
+      "baseWidth": 30,
+      "baseHeight": 30,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": null,
+      "color": "#AAAAAA",
+      "scale": 0.91,
+      "modelScale": 1,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "shadow",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": 177.40625891347847,
+      "y": 204.99379689971948,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": 177.40625891347847,
+          "y": 204.99379689971948,
+          "p": 1.0124869315719702
+        },
+        {
+          "x": 273.3546785024226,
+          "y": 203.45494893614816,
+          "p": 1.0114617012261051
+        },
+        {
+          "x": 262.5537137492114,
+          "y": 249.54350071101484,
+          "p": 1.0415316998111208
+        },
+        {
+          "x": 212.71215117336098,
+          "y": 247.59187519264492,
+          "p": 1.0402645533908195
+        }
+      ],
+      "color": "#000975",
+      "sortMode": "ignore",
+      "opacity": 0.6,
+      "blendMode": "multiply",
+      "isGrid": false,
+      "gridLinesX": 5,
+      "gridLinesY": 5,
+      "lineWidth": 1,
+      "gridColor": "#ffffff",
+      "filled": true,
+      "blur": 7
     }
   ],
   "camera": {
@@ -979,7 +1106,7 @@
     "y": 29,
     "zoom": 0.51
   },
-  "autoCenter": true,
+  "autoCenter": false,
   "cameraSpeed": 1.5,
   "camDeadzoneX": 200,
   "camDeadzoneY": -21,
diff --git a/public/scenes/test_room.json b/public/scenes/test_room.json
index bc3afb8..cf76365 100644
--- a/public/scenes/test_room.json
+++ b/public/scenes/test_room.json
@@ -1,127 +1,468 @@
 {
   "id": "test_room",
-  "name": "New Scene",
-  "description": "You are in New Scene.",
+  "name": "Test Room",
+  "description": "You are in Test Room.",
   "textRedirects": {},
   "filename": "test_room",
-  "walkbox": [],
-  "triggerboxes": [],
-  "scaling": {
-    "enabled": true,
-    "min": 0.4,
-    "max": 1,
-    "horizon": 78,
-    "front": 421
-  },
-  "entities": [
+  "walkbox": [
     {
-      "name": "Quad_201",
-      "type": "Quad",
+      "name": "Walk_997",
+      "type": "Walkbox",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "poly": [
+        {
+          "x": -79,
+          "y": 346
+        },
+        {
+          "x": -81,
+          "y": 272
+        },
+        {
+          "x": 153,
+          "y": 272
+        },
+        {
+          "x": 153,
+          "y": 346
+        }
+      ],
+      "mode": "Add"
+    },
+    {
+      "name": "Walk_176",
+      "type": "Walkbox",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "poly": [
+        {
+          "x": 82,
+          "y": 192
+        },
+        {
+          "x": 407,
+          "y": 195
+        },
+        {
+          "x": 408,
+          "y": 203
+        },
+        {
+          "x": 470,
+          "y": 207
+        },
+        {
+          "x": 596,
+          "y": 220
+        },
+        {
+          "x": 624,
+          "y": 211
+        },
+        {
+          "x": 680,
+          "y": 211
+        },
+        {
+          "x": 680,
+          "y": 297
+        },
+        {
+          "x": -234,
+          "y": 291
+        },
+        {
+          "x": -210,
+          "y": 247
+        },
+        {
+          "x": -111,
+          "y": 249
+        },
+        {
+          "x": 77,
+          "y": 194
+        }
+      ],
+      "mode": "Add"
+    }
+  ],
+  "triggerboxes": [
+    {
+      "name": "Trig_sub_D",
+      "type": "Triggerbox",
       "locked": false,
       "disabled": false,
-      "groupID": "#g,#a",
+      "groupID": null,
       "customName": "",
       "textRedirects": {},
       "interactions": {},
       "components": [
         {
-          "type": "3d-parallax"
+          "type": "Subscene",
+          "targetGroupId": "#D"
         }
       ],
-      "layer": -1,
+      "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 334.7566652973353,
-      "y": 147.45349435034427,
-      "parallax": 1,
-      "ignoreScaling": false,
-      "vertices": [
+      "poly": [
         {
-          "x": -1431.0063050419365,
-          "y": 419.98108487419046,
-          "p": 0.2
+          "x": 27,
+          "y": 210
         },
         {
-          "x": 1588.9936949580635,
-          "y": 415.98108487419046,
-          "p": 0.2
+          "x": 28,
+          "y": 104
         },
         {
-          "x": 3915.4050968588786,
-          "y": 457.44748933663504,
-          "p": 1
+          "x": 84,
+          "y": 94
         },
         {
-          "x": -3349.5949031411214,
-          "y": 457.44748933663504,
-          "p": 1
+          "x": 83,
+          "y": 136
+        },
+        {
+          "x": 54,
+          "y": 145
+        },
+        {
+          "x": 50,
+          "y": 160
+        },
+        {
+          "x": 76,
+          "y": 170
+        },
+        {
+          "x": 79,
+          "y": 194
         }
       ],
-      "color": "#888888",
-      "sortMode": "ignore",
-      "opacity": 1,
-      "blendMode": "source-over",
-      "isGrid": true,
-      "gridLinesX": 29,
-      "gridLinesY": 7,
-      "lineWidth": 4,
-      "gridColor": "#0f6719",
-      "filled": false,
-      "blur": 0
+      "script": ""
     },
     {
-      "name": "Quad_1",
-      "type": "Quad",
+      "name": "sub_sw_d1",
+      "type": "Triggerbox",
+      "locked": false,
+      "disabled": true,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Switch",
+          "groupId1": "nil",
+          "groupId2": "#D1",
+          "state": 1,
+          "idKey": "",
+          "sound1": "drawer_open.wav",
+          "sound2": "drawer_close.wav"
+        }
+      ],
+      "layer": 0,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "Trig_sub_D",
+        "relation": "in"
+      },
+      "poly": [
+        {
+          "x": -156.29411764705887,
+          "y": -171.3529411764706
+        },
+        {
+          "x": 425,
+          "y": -171
+        },
+        {
+          "x": 414,
+          "y": -95
+        },
+        {
+          "x": -143,
+          "y": -95
+        }
+      ],
+      "script": ""
+    },
+    {
+      "name": "Trig_834",
+      "type": "Triggerbox",
       "locked": false,
       "disabled": false,
-      "groupID": "#a",
+      "groupID": null,
       "customName": "",
       "textRedirects": {},
       "interactions": {},
       "components": [],
-      "layer": -1,
+      "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 363.1753332849686,
-      "y": -1342.0347499102,
-      "parallax": 1,
-      "ignoreScaling": false,
-      "vertices": [
+      "poly": [],
+      "script": ""
+    },
+    {
+      "name": "sub_sw_d2",
+      "type": "Triggerbox",
+      "locked": false,
+      "disabled": true,
+      "groupID": "#D ",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Switch",
+          "groupId1": "nil",
+          "groupId2": "#D2",
+          "state": 1,
+          "idKey": "",
+          "sound1": "drawer_open.wav",
+          "sound2": "drawer_close.wav"
+        }
+      ],
+      "layer": 0,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "Trig_sub_D",
+        "relation": "in"
+      },
+      "poly": [
         {
-          "x": -1382.5263247292278,
-          "y": -605.2106827614945,
-          "p": 0.2
+          "x": -156.29411764705878,
+          "y": -87.03921568627447
         },
         {
-          "x": 1692.4736752707722,
-          "y": -565.2106827614945,
-          "p": 0.2
+          "x": 424.9999999999999,
+          "y": -86.68627450980387
         },
         {
-          "x": 3933.8237648465147,
-          "y": -1042.0407549239112,
-          "p": 1
+          "x": 413.9999999999999,
+          "y": -10.68627450980393
         },
         {
-          "x": -3331.1762351534853,
-          "y": -1042.0407549239112,
-          "p": 1
+          "x": -142.99999999999994,
+          "y": -10.68627450980393
         }
       ],
+      "script": ""
+    },
+    {
+      "name": "Desk",
+      "type": "Triggerbox",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "poly": [
+        {
+          "x": -210,
+          "y": 211
+        },
+        {
+          "x": -192,
+          "y": 213
+        },
+        {
+          "x": -192,
+          "y": 197
+        },
+        {
+          "x": -171,
+          "y": 189
+        },
+        {
+          "x": -159,
+          "y": 211
+        },
+        {
+          "x": -136,
+          "y": 217
+        },
+        {
+          "x": -131,
+          "y": 242
+        },
+        {
+          "x": -109,
+          "y": 243
+        },
+        {
+          "x": -110,
+          "y": 146
+        },
+        {
+          "x": -18,
+          "y": 129
+        },
+        {
+          "x": -16,
+          "y": 201
+        },
+        {
+          "x": 26,
+          "y": 207
+        },
+        {
+          "x": 82,
+          "y": 193
+        },
+        {
+          "x": 87,
+          "y": 95
+        },
+        {
+          "x": -70,
+          "y": 78
+        },
+        {
+          "x": -236,
+          "y": 115
+        },
+        {
+          "x": -235,
+          "y": 173
+        },
+        {
+          "x": -218,
+          "y": 182
+        },
+        {
+          "x": -212,
+          "y": 211
+        }
+      ],
+      "script": ""
+    }
+  ],
+  "scaling": {
+    "enabled": true,
+    "min": 0.91,
+    "max": 1,
+    "horizon": 193,
+    "front": 269
+  },
+  "entities": [
+    {
+      "name": "CityView",
+      "type": "Entity",
+      "locked": true,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -2,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "window1",
+        "relation": "in"
+      },
+      "x": 119.67896209456934,
+      "y": 234,
+      "width": 821.6,
+      "height": 551.2,
+      "baseWidth": 1264,
+      "baseHeight": 848,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "window-view.json",
+      "color": "#00ff00",
+      "scale": 0.65,
+      "modelScale": 0.65,
+      "parallax": 0.4,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "room",
+      "type": "Entity",
+      "locked": true,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -1,
+      "visible": true,
+      "x": 199,
+      "y": 297,
+      "width": 884.8,
+      "height": 593.5999999999999,
+      "baseWidth": 1264,
+      "baseHeight": 848,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "room2",
       "color": "#888888",
-      "sortMode": "ignore",
+      "scale": 0.7,
+      "modelScale": 0.7,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "Chair",
+      "type": "Entity",
+      "locked": true,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": 100,
+      "y": 249,
+      "width": 116.89999999999999,
+      "height": 198.79999999999998,
+      "baseWidth": 167,
+      "baseHeight": 284,
+      "colliderWidth": 78,
+      "colliderHeight": 18,
+      "spriteName": "chair.json",
+      "color": "#00ff00",
+      "scale": 0.7,
+      "modelScale": 0.7,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
       "opacity": 1,
       "blendMode": "source-over",
-      "isGrid": true,
-      "gridLinesX": 29,
-      "gridLinesY": 7,
-      "lineWidth": 4,
-      "gridColor": "#0f6719",
-      "filled": false,
       "blur": 0
     },
     {
-      "name": "miles_ds",
+      "name": "Hero_1",
       "type": "Actor",
       "locked": false,
       "disabled": false,
@@ -133,34 +474,33 @@
         {
           "type": "Shadow",
           "shadowQuadId": "shadow",
-          "offsetX": -80,
-          "offsetY": -0.79232867459731,
-          "triggerId": "#g"
+          "offsetX": -70,
+          "offsetY": -25,
+          "triggerId": "room"
         }
       ],
       "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 265.79289206085633,
-      "y": 449.8636667262623,
-      "width": 159.48352288795112,
-      "height": 384.9262805505487,
+      "x": 306.351468358703,
+      "y": 227.84447142883158,
+      "width": 119.88,
+      "height": 289.34,
       "baseWidth": 162,
       "baseHeight": 391,
-      "colliderWidth": 0,
-      "colliderHeight": 0,
+      "colliderWidth": 88,
+      "colliderHeight": 4,
       "spriteName": "miles_ds-idle-down.json",
-      "color": "#e27fa5",
-      "scale": 0.984466190666365,
-      "modelScale": 1.03,
-      "parallax": 0.8536873845960513,
-      "ignoreScaling": false,
+      "color": "#00ffff",
+      "scale": 0.74,
+      "modelScale": 0.74,
+      "parallax": 1.0273839007520702,
+      "ignoreScaling": true,
       "animationSpeed": 30,
       "opacity": 1,
       "blendMode": "source-over",
       "blur": 0,
       "isPlayer": true,
-      "speed": 0.35,
+      "speed": 0.24,
       "direction": "down",
       "animSets": {
         "idle": {
@@ -180,7 +520,278 @@
       }
     },
     {
-      "name": "shadow",
+      "name": "Black_1",
+      "type": "Entity",
+      "locked": true,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": -328,
+      "y": 307,
+      "width": 171.2340644206598,
+      "height": 637.1050459736764,
+      "baseWidth": 155.6673312915089,
+      "baseHeight": 579.1864054306149,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": null,
+      "color": "#000000",
+      "scale": 1.1,
+      "modelScale": 1.1,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "sub_D_main",
+      "type": "Entity",
+      "locked": true,
+      "disabled": true,
+      "groupID": "#D",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": 135,
+      "y": 310,
+      "width": 614.4,
+      "height": 484.79999999999995,
+      "baseWidth": 1024,
+      "baseHeight": 808,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_main",
+      "color": "#00ff00",
+      "scale": 0.6,
+      "modelScale": 0.6,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "sub_D2_body",
+      "type": "Entity",
+      "locked": false,
+      "disabled": true,
+      "groupID": "#D2",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Subtrigger",
+          "target": "sub_sw_d2"
+        }
+      ],
+      "layer": 3,
+      "visible": true,
+      "x": 134,
+      "y": 311,
+      "width": 614.4,
+      "height": 407.4,
+      "baseWidth": 1024,
+      "baseHeight": 679,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_d2.json",
+      "color": "#00ff00",
+      "scale": 0.6,
+      "modelScale": 0.6,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "sub_D1_body",
+      "type": "Entity",
+      "locked": false,
+      "disabled": true,
+      "groupID": "#D1",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 4,
+      "visible": true,
+      "x": 136,
+      "y": -4,
+      "width": 614.4,
+      "height": 177.6,
+      "baseWidth": 1024,
+      "baseHeight": 296,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_d1_body.json",
+      "color": "#00ff00",
+      "scale": 0.6,
+      "modelScale": 0.6,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "miles_id",
+      "type": "Entity",
+      "locked": false,
+      "disabled": true,
+      "groupID": "#D1",
+      "customName": "your ID card",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Item",
+          "ignoreDistance": true
+        }
+      ],
+      "layer": 5,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "Drawer1",
+        "relation": "in"
+      },
+      "x": 93,
+      "y": 0,
+      "width": 150.4436263347707,
+      "height": 93.2343137254902,
+      "baseWidth": 165.32266630194582,
+      "baseHeight": 102.45528980823099,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_d1_id.json",
+      "color": "#AAAAAA",
+      "scale": 0.91,
+      "modelScale": 1,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "sub_D1_stuff",
+      "type": "Entity",
+      "locked": false,
+      "disabled": true,
+      "groupID": "#D1",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 5,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "Drawer1",
+        "relation": "in"
+      },
+      "x": 320,
+      "y": 184,
+      "width": 979,
+      "height": 412,
+      "baseWidth": 979,
+      "baseHeight": 412,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_d1_items.json",
+      "color": "#00ff00",
+      "scale": 1,
+      "modelScale": 1,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "sub_D_main_top",
+      "type": "Entity",
+      "locked": true,
+      "disabled": true,
+      "groupID": "#D",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 6,
+      "visible": true,
+      "x": 135,
+      "y": -176,
+      "width": 614.4,
+      "height": 129.6,
+      "baseWidth": 1024,
+      "baseHeight": 216,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_top.json",
+      "color": "#00ff00",
+      "scale": 0.6,
+      "modelScale": 0.6,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "sub_D1_fasade",
+      "type": "Entity",
+      "locked": false,
+      "disabled": true,
+      "groupID": "#D1",
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Subtrigger",
+          "target": "sub_sw_d1"
+        }
+      ],
+      "layer": 6,
+      "visible": true,
+      "x": 135,
+      "y": 66,
+      "width": 614.4,
+      "height": 105.6,
+      "baseWidth": 1024,
+      "baseHeight": 176,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sub_drawers_d1_facade.json",
+      "color": "#00ff00",
+      "scale": 0.6,
+      "modelScale": 0.6,
+      "parallax": 1,
+      "ignoreScaling": true,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "floor-parallax",
       "type": "Quad",
       "locked": false,
       "disabled": false,
@@ -188,50 +799,88 @@
       "customName": "",
       "textRedirects": {},
       "interactions": {},
-      "components": [],
+      "components": [
+        {
+          "type": "3d-parallax"
+        }
+      ],
       "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 186.54416364247743,
-      "y": 449.7722685807698,
+      "x": -146.13725490196006,
+      "y": 289.60784313725503,
       "parallax": 1,
       "ignoreScaling": false,
       "vertices": [
         {
-          "x": 186.54416364247743,
-          "y": 449.7722685807698,
-          "p": 0.8518262423080945
+          "x": -205.9411764705876,
+          "y": 185.68627450980406,
+          "p": 1
         },
         {
-          "x": 297.6163127073407,
-          "y": 449.77439467798024,
-          "p": 0.8518934071256167
+          "x": 708,
+          "y": 186,
+          "p": 1
         },
         {
-          "x": 300.5132416470328,
-          "y": 453.4957983159374,
-          "p": 0.9237611059473142
+          "x": 766,
+          "y": 339,
+          "p": 1.1
         },
         {
-          "x": 195.7653597390785,
-          "y": 453.2940530119322,
-          "p": 0.919868888975613
+          "x": -196,
+          "y": 339,
+          "p": 1.1
         }
       ],
-      "color": "#000000",
+      "color": "#52779aff",
       "sortMode": "ignore",
-      "opacity": 1,
-      "blendMode": "multiply",
+      "opacity": 0,
+      "blendMode": "source-over",
       "isGrid": false,
       "gridLinesX": 5,
       "gridLinesY": 5,
       "lineWidth": 1,
       "gridColor": "#ffffff",
       "filled": true,
-      "blur": 4
+      "blur": 0
+    },
+    {
+      "name": "Actor_562",
+      "type": "Actor",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": 222.9043373174802,
+      "y": 306.9284515529539,
+      "width": 1008.8000000000001,
+      "height": 90.39999999999999,
+      "baseWidth": 1261,
+      "baseHeight": 112.99999999999999,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": "sofa",
+      "color": "#36d87fff",
+      "scale": 0.8,
+      "modelScale": 0.8,
+      "parallax": 1.0790382036293817,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0,
+      "isPlayer": false,
+      "speed": 0.1,
+      "direction": "down",
+      "animSets": {}
     },
     {
-      "name": "logo_1",
+      "name": "boombox",
       "type": "Entity",
       "locked": false,
       "disabled": false,
@@ -242,28 +891,101 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 91,
-      "y": 392,
-      "width": 706.7755102040817,
-      "height": 721.2734693877551,
-      "baseWidth": 585,
-      "baseHeight": 597,
+      "x": -152,
+      "y": -11,
+      "width": 112,
+      "height": 47,
+      "baseWidth": 123.07692307692307,
+      "baseHeight": 51.64835164835165,
       "colliderWidth": 0,
       "colliderHeight": 0,
-      "spriteName": "scanline_logo",
+      "spriteName": null,
       "color": "#AAAAAA",
-      "scale": 1.2081632653061225,
-      "modelScale": 2.8,
-      "parallax": 0.2,
+      "scale": 0.91,
+      "modelScale": 1,
+      "parallax": 1,
       "ignoreScaling": false,
       "animationSpeed": 150,
-      "opacity": 0.6,
-      "blendMode": "lighter",
+      "opacity": 0,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "test",
+      "type": "Entity",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [
+        {
+          "type": "Item"
+        }
+      ],
+      "layer": 0,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "Chair",
+        "relation": "under"
+      },
+      "x": 98,
+      "y": 243,
+      "width": 31.114048235454423,
+      "height": 35.128764136803376,
+      "baseWidth": 32.10246627605941,
+      "baseHeight": 36.24471998909933,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": null,
+      "color": "#AAAAAA",
+      "scale": 0.9692105263157895,
+      "modelScale": 1,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "Static_649",
+      "type": "Entity",
+      "locked": false,
+      "disabled": true,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 15,
+      "visible": true,
+      "spatial": {
+        "parentNodeId": "Drawer3",
+        "relation": "in"
+      },
+      "x": 138,
+      "y": 101,
+      "width": 492,
+      "height": 58,
+      "baseWidth": 540.6593406593406,
+      "baseHeight": 63.73626373626374,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": null,
+      "color": "#b83ed0",
+      "scale": 0.91,
+      "modelScale": 1,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 1,
+      "blendMode": "source-over",
       "blur": 0
     },
     {
-      "name": "logo_2",
+      "name": "Drawer1",
       "type": "Entity",
       "locked": false,
       "disabled": false,
@@ -274,35 +996,120 @@
       "components": [],
       "layer": 0,
       "visible": true,
-      "spatial": {},
-      "x": 79,
-      "y": 417,
-      "width": 778.4081632653061,
-      "height": 794.3755102040816,
-      "baseWidth": 585,
-      "baseHeight": 597,
+      "spatial": {
+        "parentNodeId": "Desk",
+        "relation": "in"
+      },
+      "x": 90.66834500947778,
+      "y": 120,
+      "width": 27.3,
+      "height": 27.3,
+      "baseWidth": 30,
+      "baseHeight": 30,
+      "colliderWidth": 0,
+      "colliderHeight": 0,
+      "spriteName": null,
+      "color": "#AAAAAA",
+      "scale": 0.91,
+      "modelScale": 1,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "animationSpeed": 150,
+      "opacity": 0,
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "window1",
+      "type": "Entity",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": -2,
+      "visible": true,
+      "x": 56,
+      "y": -192,
+      "width": 27.3,
+      "height": 27.3,
+      "baseWidth": 30,
+      "baseHeight": 30,
       "colliderWidth": 0,
       "colliderHeight": 0,
-      "spriteName": "scanline_logo",
-      "color": "#00ca4c",
-      "scale": 1.3306122448979592,
-      "modelScale": 2.8,
-      "parallax": 0.2,
+      "spriteName": null,
+      "color": "#AAAAAA",
+      "scale": 0.91,
+      "modelScale": 1,
+      "parallax": 1,
       "ignoreScaling": false,
       "animationSpeed": 150,
       "opacity": 1,
-      "blendMode": "lighter",
-      "blur": 32
+      "blendMode": "source-over",
+      "blur": 0
+    },
+    {
+      "name": "shadow",
+      "type": "Quad",
+      "locked": false,
+      "disabled": false,
+      "groupID": null,
+      "customName": "",
+      "textRedirects": {},
+      "interactions": {},
+      "components": [],
+      "layer": 0,
+      "visible": true,
+      "x": 251.56334401080537,
+      "y": 208.4319364013629,
+      "parallax": 1,
+      "ignoreScaling": false,
+      "vertices": [
+        {
+          "x": 251.56334401080537,
+          "y": 208.4319364013629,
+          "p": 1.014733918039131
+        },
+        {
+          "x": 347.5117635997495,
+          "y": 206.89308843779156,
+          "p": 1.013708687693266
+        },
+        {
+          "x": 336.71084835449676,
+          "y": 252.9816450467687,
+          "p": 1.0437788529717444
+        },
+        {
+          "x": 286.86923627068785,
+          "y": 251.03001469428833,
+          "p": 1.0425115398579803
+        }
+      ],
+      "color": "#000975",
+      "sortMode": "ignore",
+      "opacity": 0.6,
+      "blendMode": "multiply",
+      "isGrid": false,
+      "gridLinesX": 5,
+      "gridLinesY": 5,
+      "lineWidth": 1,
+      "gridColor": "#ffffff",
+      "filled": true,
+      "blur": 7
     }
   ],
   "camera": {
-    "x": 165.57094204403754,
-    "y": -263.4392820164094,
-    "zoom": 0.1500946352969992
+    "x": 297,
+    "y": 29,
+    "zoom": 0.51
   },
-  "autoCenter": true,
-  "cameraSpeed": 5,
-  "camDeadzoneX": 50,
-  "camDeadzoneY": 30,
-  "camMaxY": -370
+  "autoCenter": false,
+  "cameraSpeed": 1.5,
+  "camDeadzoneX": 200,
+  "camDeadzoneY": -21,
+  "camMinX": 143,
+  "camMaxY": 45
 }
diff --git a/public/text/objects/CityView.json b/public/text/objects/CityView.json
new file mode 100644
index 0000000..aa81c71
--- /dev/null
+++ b/public/text/objects/CityView.json
@@ -0,0 +1,6 @@
+{
+  "title": "City view",
+  "description": "You look out over San Vesper as it comes awake by slow degrees. In the distance, the towers of Civic Crown catch the first pale gold of dawn, their edges softened by bay fog and the city's lingering smog. \rFrom here, the skyline feels strangely remote: clean lines, cold light, a promise that belongs to someone else. Morning spills through the bare window glass without obstruction, and for a moment the city looks almost gentle, though never quite harmless.",
+  "details": "",
+  "synonyms": ["view", "landscape", "city"]
+}
diff --git a/public/text/objects/Desk.json b/public/text/objects/Desk.json
new file mode 100644
index 0000000..807d07c
--- /dev/null
+++ b/public/text/objects/Desk.json
@@ -0,0 +1,6 @@
+{
+  "title": "Desk",
+  "description": "A large desk where the computer and everything connected to it reigns supreme. It is crowded in the way only a real working desk can be. The desk has three drawers.",
+  "details": "",
+  "synonyms": ["table", "workplace"]
+}
diff --git a/public/text/objects/DeskDrawer-1.json b/public/text/objects/DeskDrawer-1.json
new file mode 100644
index 0000000..b559281
--- /dev/null
+++ b/public/text/objects/DeskDrawer-1.json
@@ -0,0 +1,6 @@
+{
+  "title": "upper drawer",
+  "description": "Yoy see upper drawer of the desk",
+  "details": "",
+  "synonyms": ["drawer 1", "first drawer"]
+}
diff --git a/public/text/objects/Drawer1.json b/public/text/objects/Drawer1.json
new file mode 100644
index 0000000..31bfa38
--- /dev/null
+++ b/public/text/objects/Drawer1.json
@@ -0,0 +1,6 @@
+{
+  "title": "upper drawer",
+  "description": "",
+  "details": "",
+  "synonyms": []
+}
diff --git a/public/text/objects/Trig_sub_D.json b/public/text/objects/Trig_sub_D.json
new file mode 100644
index 0000000..59c2c02
--- /dev/null
+++ b/public/text/objects/Trig_sub_D.json
@@ -0,0 +1,6 @@
+{
+  "title": "Desk drawers",
+  "description": "The desk have 3 drawers.",
+  "details": "",
+  "synonyms": []
+}
diff --git a/public/text/objects/room.json b/public/text/objects/room.json
new file mode 100644
index 0000000..da6fbc4
--- /dev/null
+++ b/public/text/objects/room.json
@@ -0,0 +1,6 @@
+{
+  "title": "room",
+  "description": "You see nothing special.",
+  "details": "",
+  "synonyms": []
+}
diff --git a/public/text/objects/test.json b/public/text/objects/test.json
new file mode 100644
index 0000000..5d77306
--- /dev/null
+++ b/public/text/objects/test.json
@@ -0,0 +1,5 @@
+{
+  "title": "Someone ID card",
+  "description": "You see someone's ID",
+  "synonyms": []
+}
diff --git a/public/text/objects/window1.json b/public/text/objects/window1.json
new file mode 100644
index 0000000..4f2f056
--- /dev/null
+++ b/public/text/objects/window1.json
@@ -0,0 +1,6 @@
+{
+  "title": "Window",
+  "description": "The windows in this building are large, as was fashionable in the mid-century. They are rarely opened due to smog, noise, and the heavy steel frames that often jam.",
+  "details": "",
+  "synonyms": []
+}
diff --git a/public/text/scenes/logo.json b/public/text/scenes/logo.json
new file mode 100644
index 0000000..faa8b8b
--- /dev/null
+++ b/public/text/scenes/logo.json
@@ -0,0 +1,4 @@
+{
+  "title": "New Scene",
+  "description": "You are in New Scene."
+}
diff --git a/public/text/scenes/quad4.json b/public/text/scenes/quad4.json
new file mode 100644
index 0000000..fa67f05
--- /dev/null
+++ b/public/text/scenes/quad4.json
@@ -0,0 +1,4 @@
+{
+  "title": "Test Room",
+  "description": "You are in Test Room."
+}
\ No newline at end of file
diff --git a/public/text/scenes/test_room (10).json b/public/text/scenes/test_room (10).json
new file mode 100644
index 0000000..fa67f05
--- /dev/null
+++ b/public/text/scenes/test_room (10).json	
@@ -0,0 +1,4 @@
+{
+  "title": "Test Room",
+  "description": "You are in Test Room."
+}
\ No newline at end of file
diff --git a/public/text/scenes/test_room.json b/public/text/scenes/test_room.json
index faa8b8b..8d9cc7f 100644
--- a/public/text/scenes/test_room.json
+++ b/public/text/scenes/test_room.json
@@ -1,4 +1,4 @@
 {
-  "title": "New Scene",
-  "description": "You are in New Scene."
+  "title": "Mile's Home",
+  "description": "You look toward the working corner of the apartment. The desk stands against the wall perpendicular to the window, with a shelf of books above it that makes the space feel close, personal, and lived in. It is cozy, but not tidy. There is the usual kind of programmer's clutter everywhere: cables coiled and tangled across the floor, Post-it notes and scraps of paper  with old reminders, crumpled printouts of BASIC and assembler code, five-inch floppy disks, and the small debris of long hours spent thinking at a machine. Across  the room, against the wall opposite the window, sits the sofa, set so you could watch the television or turn and look out at the city. The whole room feels warm, familiar, and comfortably disordered, like a place you genuinely likes to work in."
 }
diff --git a/public/text/system/parser-lexicon.json b/public/text/system/parser-lexicon.json
index 7b759df..609985a 100644
--- a/public/text/system/parser-lexicon.json
+++ b/public/text/system/parser-lexicon.json
@@ -50,7 +50,7 @@
   "relationMarkers": {
     "on": ["on"],
     "under": ["under", "beneath"],
-    "in": ["in", "inside"],
+    "in": ["in", "inside", "into"],
     "behind": ["behind"],
     "near": ["near", "next to", "by"]
   }
diff --git a/public/text/system/parser.json b/public/text/system/parser.json
index c61a802..0613008 100644
--- a/public/text/system/parser.json
+++ b/public/text/system/parser.json
@@ -10,6 +10,7 @@
   "examine_relation_prompt": "Examine what area?",
   "relation_empty": "You see nothing {relation} the {target}.",
   "relation_contents": "{Relation} the {target} you see: {items}.",
+  "relation_location": "It is {relation} the {target}.",
   "relation_not_supported": "You can't determine what is {relation} the {target} from here.",
   "take_prompt": "Take what?",
   "take_which_one": "Which item do you mean: {options}?",
diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index d54627b..dd3157e 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -281,52 +281,12 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
   }, [onCancel]);
 
   return (
-    <div
-      className="modal-overlay"
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.8)',
-        zIndex: 10000,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontFamily: 'monospace',
-        color: 'var(--ui-main-color)',
-      }}
-    >
-      <div
-        ref={modalRef}
-        className="file-browser"
-        style={{
-          width: '500px',
-          maxWidth: '95vw',
-          height: '600px',
-          maxHeight: '90vh',
-          backgroundColor: '#000',
-          border: '2px solid var(--ui-main-color)',
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '10px',
-        }}
-      >
-        <div
-          className="browser-header"
-          style={{
-            borderBottom: '1px solid var(--ui-main-color)',
-            marginBottom: '10px',
-            paddingBottom: '5px',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: '10px' }}>
+    <div className="file-browser-modal">
+      <div ref={modalRef} className="file-browser-window">
+        <div className="file-browser-header">
+          <div className="file-browser-title-row">
             <h3 style={{ margin: 0 }}>{title || (mode === 'save' ? 'Save File' : 'Load File')}</h3>
-            <span style={{ fontSize: '12px', color: '#888' }}>{currentPath}</span>
+            <span className="file-browser-path">{currentPath}</span>
           </div>
           <button
             onClick={() => {
@@ -344,22 +304,9 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
           </button>
         </div>
 
-        <div
-          className="file-list"
-          ref={listRef}
-          tabIndex={0}
-          onKeyDown={handleListKeyDown}
-          style={{
-            flex: 1,
-            overflowY: 'auto',
-            border: '1px solid #333',
-            marginBottom: '10px',
-            outline: 'none',
-            position: 'relative',
-          }}
-        >
+        <div className="file-browser-list" ref={listRef} tabIndex={0} onKeyDown={handleListKeyDown}>
           {isLoading && <div>Loading...</div>}
-          {error && <div style={{ color: 'red' }}>Error: {error}</div>}
+          {error && <div className="file-browser-error">Error: {error}</div>}
 
           {!isLoading &&
             !error &&
@@ -380,32 +327,20 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
                     if (item.isUp) handleUp();
                     else handleDoubleClick(item);
                   }}
-                  style={{
-                    padding: '5px',
-                    cursor: 'pointer',
-                    backgroundColor: isSelected ? 'var(--ui-selection-bg)' : 'transparent',
-                    color: item.isDir
-                      ? '#ffff00'
-                      : isSelected
-                        ? 'var(--ui-selection-text)'
-                        : 'var(--ui-main-color)',
-                    border: isSelected
-                      ? '1px solid var(--ui-selection-bg)'
-                      : '1px solid transparent',
-                  }}
+                  className={`file-browser-item ${item.isDir ? 'is-dir' : ''} ${isSelected ? 'is-selected' : ''}`}
                 >
                   {item.isDir ? '📁' : '📄'} {item.name}
                 </div>
               );
             })}
           {!isLoading && displayItems.length === 0 && (
-            <div style={{ color: '#666', padding: '5px' }}>Directory is empty</div>
+            <div className="file-browser-empty">Directory is empty</div>
           )}
         </div>
 
         <div className="browser-footer">
-          <div style={{ display: 'flex', marginBottom: '10px' }}>
-            <label style={{ width: '60px' }}>Name:</label>
+          <div className="file-browser-form-row">
+            <label className="file-browser-label">Name:</label>
             <input
               type="text"
               value={filename}
@@ -418,29 +353,11 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
               autoFocus
             />
           </div>
-          <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
-            <button
-              onClick={onCancel}
-              style={{
-                padding: '5px 15px',
-                cursor: 'pointer',
-                background: '#333',
-                color: '#fff',
-                border: '1px solid #666',
-              }}
-            >
+          <div className="file-browser-actions">
+            <button onClick={onCancel} className="e-btn" style={{ padding: '5px 15px' }}>
               Cancel
             </button>
-            <button
-              onClick={handleConfirm}
-              style={{
-                padding: '5px 15px',
-                cursor: 'pointer',
-                background: 'var(--ui-selection-bg)',
-                color: 'var(--ui-selection-text)',
-                border: '1px solid var(--ui-main-color)',
-              }}
-            >
+            <button onClick={handleConfirm} className="e-btn e-btn-enter" style={{ padding: '5px 15px' }}>
               {mode === 'save' ? 'Save' : 'Load'}
             </button>
           </div>
diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx
index 0263c7c..5ade7a6 100644
--- a/src/components/GameCanvas.tsx
+++ b/src/components/GameCanvas.tsx
@@ -8,15 +8,16 @@ interface GameCanvasProps {
 export const GameCanvas: React.FC<GameCanvasProps> = ({ onGameInit }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const uiCanvasRef = useRef<HTMLCanvasElement>(null);
+  const editorOverlayCanvasRef = useRef<HTMLCanvasElement>(null);
   const gameRef = useRef<Game | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (canvasRef.current && uiCanvasRef.current && !gameRef.current) {
+    if (canvasRef.current && uiCanvasRef.current && editorOverlayCanvasRef.current && !gameRef.current) {
       // Initialize Game with BOTH canvases
       // canvasRef -> WebGL (CRT)
       // uiCanvasRef -> 2D (UI/Input)
-      const game = new Game(canvasRef.current, uiCanvasRef.current);
+      const game = new Game(canvasRef.current, uiCanvasRef.current, editorOverlayCanvasRef.current);
       gameRef.current = game;
 
       // Start Game Loop
@@ -44,6 +45,11 @@ export const GameCanvas: React.FC<GameCanvasProps> = ({ onGameInit }) => {
         canvasRef.current.width = clientWidth * dpr;
         canvasRef.current.height = clientHeight * dpr;
 
+        if (editorOverlayCanvasRef.current) {
+          editorOverlayCanvasRef.current.width = clientWidth * dpr;
+          editorOverlayCanvasRef.current.height = clientHeight * dpr;
+        }
+
         // Notify game of resize
         gameRef.current.resize(canvasRef.current.width, canvasRef.current.height);
       }
@@ -127,6 +133,22 @@ export const GameCanvas: React.FC<GameCanvasProps> = ({ onGameInit }) => {
           pointerEvents: 'auto',
         }}
       />
+
+      <canvas
+        ref={editorOverlayCanvasRef}
+        id="editor-overlay-canvas"
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          zIndex: 3,
+          backgroundColor: 'transparent',
+          pointerEvents: 'none',
+        }}
+      />
     </div>
   );
 };
diff --git a/src/components/UIOverlay.tsx b/src/components/UIOverlay.tsx
index f2d2aaf..8627245 100644
--- a/src/components/UIOverlay.tsx
+++ b/src/components/UIOverlay.tsx
@@ -17,6 +17,13 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
     onConfirm: (f: string) => void;
     extension?: string;
     title?: string;
+    onCancel?: () => void;
+  } | null>(null);
+  const [choiceDialog, setChoiceDialog] = useState<{
+    title: string;
+    message: string;
+    options: Array<{ id: string; label: string; variant?: 'primary' | 'danger' | 'neutral' }>;
+    onResolve: (choiceId: string | null) => void;
   } | null>(null);
 
   // Console History State
@@ -35,8 +42,11 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
       game.onMessage = (text) => setMessage({ id: Date.now(), text });
 
       // Bind File Browser Request
-      game.onRequestFileBrowser = (mode, dir, onConfirm, extension, title) => {
-        setFileBrowser({ open: true, mode, dir, onConfirm, extension, title });
+      game.onRequestFileBrowser = (mode, dir, onConfirm, extension, title, onCancel) => {
+        setFileBrowser({ open: true, mode, dir, onConfirm, extension, title, onCancel });
+      };
+      game.onRequestChoiceDialog = (title, dialogMessage, options, onResolve) => {
+        setChoiceDialog({ title, message: dialogMessage, options, onResolve });
       };
 
       // Initialize UI bindings
@@ -62,6 +72,21 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
     }
   }, [game]);
 
+  useEffect(() => {
+    if (!game) return;
+    if (editorEnabled || isConsoleOpen) return;
+
+    const timer = window.setTimeout(() => {
+      const input = parserInputRef.current;
+      if (!input || input.disabled) return;
+      input.focus();
+      const len = input.value.length;
+      input.setSelectionRange(len, len);
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, [game, editorEnabled, isConsoleOpen]);
+
   useEffect(() => {
     if (message) {
       const timer = setTimeout(() => {
@@ -78,6 +103,36 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
     }
   };
 
+  const handleBrowserCancel = () => {
+    if (fileBrowser?.onCancel) {
+      fileBrowser.onCancel();
+    }
+    setFileBrowser(null);
+  };
+
+  const handleChoiceResolve = React.useCallback((choiceId: string | null) => {
+    setChoiceDialog((currentDialog) => {
+      if (currentDialog) {
+        currentDialog.onResolve(choiceId);
+      }
+      return null;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!choiceDialog) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        handleChoiceResolve(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [choiceDialog, handleChoiceResolve]);
+
   return (
     <>
       <div id="ui-layer" style={{ pointerEvents: 'none' }}>
@@ -120,10 +175,10 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
                     const preprocessed = game.console.preprocessGameplayInput(val);
 
                     // 1. Log Command to Buffer
-                    game.console.log(val, 'command');
+                    game.console.log(preprocessed, 'command');
 
                     // 2. Add to History
-                    game.console.addHistory(val);
+                    game.console.addHistory(preprocessed);
 
                     // 3. Send to gameplay parser
                     void game.parser.parse(preprocessed);
@@ -205,6 +260,26 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
         </div>
       )}
 
+      {choiceDialog && (
+        <div className="editor-choice-dialog-backdrop" style={{ pointerEvents: 'auto' }}>
+          <div className="editor-choice-dialog">
+            <div className="editor-choice-dialog-title">{choiceDialog.title}</div>
+            <div className="editor-choice-dialog-message">{choiceDialog.message}</div>
+            <div className="editor-choice-dialog-actions">
+              {choiceDialog.options.map((option) => (
+                <button
+                  key={option.id}
+                  className={`e-btn editor-choice-btn editor-choice-btn-${option.variant || 'neutral'}`}
+                  onClick={() => handleChoiceResolve(option.id)}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Virtual Console Overlay (High Res, Open State) */}
       {game && <ConsoleOverlay game={game} />}
 
@@ -225,7 +300,7 @@ export const UIOverlay: React.FC<UIOverlayProps> = ({ game }) => {
             mode={fileBrowser.mode}
             directory={fileBrowser.dir}
             onConfirm={handleBrowserConfirm}
-            onCancel={() => setFileBrowser(null)}
+            onCancel={handleBrowserCancel}
             extension={fileBrowser.extension}
             title={fileBrowser.title}
           />
diff --git a/src/components/editor/EditorBottomMenu.tsx b/src/components/editor/EditorBottomMenu.tsx
index 06b17f2..26f78bf 100644
--- a/src/components/editor/EditorBottomMenu.tsx
+++ b/src/components/editor/EditorBottomMenu.tsx
@@ -2,13 +2,31 @@ import React from 'react';
 import { useGame } from '../../hooks/useGame';
 import { useEditorStore } from '../../store/editorStore';
 
+type ModifierMode = 'base' | 'shift' | 'alt' | 'ctrl';
+
+type MenuEntry = {
+  hotkey: string;
+  text: string;
+  action: string;
+  enabled?: boolean;
+};
+
 export const EditorBottomMenu: React.FC = () => {
   const game = useGame();
-  const { toggle, toggleSpriteEditor } = useEditorStore();
+  const {
+    enabled: editorEnabled,
+    toggle,
+    toggleSpriteEditor,
+    selectedObjectId,
+    selectedObjectType,
+    selectedObjectKeys,
+    objectVersion,
+  } = useEditorStore();
 
   const [fps, setFps] = React.useState(0);
   const [sceneMem, setSceneMem] = React.useState(0);
   const [sceneCount, setSceneCount] = React.useState(0);
+  const [modifierMode, setModifierMode] = React.useState<ModifierMode>('base');
 
   React.useEffect(() => {
     const interval = setInterval(() => {
@@ -20,6 +38,74 @@ export const EditorBottomMenu: React.FC = () => {
     return () => clearInterval(interval);
   }, [game]);
 
+  React.useEffect(() => {
+    const getModifierMode = (e?: KeyboardEvent): ModifierMode => {
+      const altGraph = !!e?.getModifierState?.('AltGraph') || e?.key === 'AltGraph';
+      const ctrl = !!e?.ctrlKey;
+      const alt = !!e?.altKey;
+      const shift = !!e?.shiftKey;
+      if (altGraph) return 'alt';
+      if (ctrl && !alt) return 'ctrl';
+      if (alt) return 'alt';
+      if (shift) return 'shift';
+      return 'base';
+    };
+
+    const syncModifierMode = (e?: KeyboardEvent) => {
+      setModifierMode(getModifierMode(e));
+    };
+
+    const isMenuModifierKey = (e: KeyboardEvent) =>
+      e.key === 'Alt' || e.key === 'AltGraph' || e.code === 'AltLeft' || e.code === 'AltRight';
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (editorEnabled && isMenuModifierKey(e)) {
+        e.preventDefault();
+      }
+      syncModifierMode(e);
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (editorEnabled && isMenuModifierKey(e)) {
+        e.preventDefault();
+      }
+      syncModifierMode(e);
+    };
+
+    const handleBlur = () => setModifierMode('base');
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('blur', handleBlur);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, [editorEnabled]);
+
+  const selectedObject = game.editor?.selectedObject || null;
+  const hasObjectSelection =
+    (selectedObjectType === 'MULTI' &&
+      Array.isArray(selectedObjectKeys) &&
+      selectedObjectKeys.length > 0) ||
+    (!!selectedObject && selectedObjectType !== 'SCENE' && selectedObjectType !== 'SETTINGS');
+  const hasSingleSelectedObject =
+    !!selectedObject && selectedObjectType !== 'SCENE' && selectedObjectType !== 'SETTINGS';
+  void selectedObjectId;
+  void objectVersion;
+
+  const lockActionText = hasSingleSelectedObject
+    ? selectedObject.locked
+      ? 'Unlock'
+      : 'Lock'
+    : 'Lock';
+  const disableActionText = hasSingleSelectedObject
+    ? selectedObject.disabled
+      ? 'Enable'
+      : 'Disable'
+    : 'Disable';
+
   const handleAction = (action: string) => {
     const editor = game.editor;
 
@@ -30,9 +116,15 @@ export const EditorBottomMenu: React.FC = () => {
       case 'F2':
         editor.saveScene(false);
         break;
-      case 'ShiftF2':
+      case 'SaveAs':
         editor.saveScene(true);
         break;
+      case 'SaveSelectionSlot1':
+        editor.saveSelectionSlot(0);
+        break;
+      case 'SaveSelectionSlot2':
+        editor.saveSelectionSlot(1);
+        break;
       case 'F3':
         editor.promptLoadScene();
         break;
@@ -45,25 +137,101 @@ export const EditorBottomMenu: React.FC = () => {
       case 'F9':
         editor.selectObject('SETTINGS');
         break;
+      case 'Undo':
+        editor.undo();
+        break;
+      case 'Redo':
+        editor.redo();
+        break;
+      case 'Duplicate':
+        editor.duplicateSelectedObject();
+        break;
+      case 'Copy':
+        editor.copySelectedObjectToClipboard();
+        break;
+      case 'Paste':
+        void editor.pasteObjectFromClipboard();
+        break;
+      case 'SaveSelection':
+        editor.persistenceManager.saveObject();
+        break;
+      case 'LoadSelection':
+        editor.persistenceManager.loadObject('cursor');
+        break;
+      case 'ToggleLock':
+        if (editor.selectedObject) {
+          editor.selectedObject.locked = !editor.selectedObject.locked;
+          useEditorStore.getState().incrementObjectVersion();
+          useEditorStore.getState().incrementHierarchyVersion();
+        }
+        break;
+      case 'ToggleDisabled':
+        if (editor.selectedObject) {
+          editor.selectedObject.disabled = !editor.selectedObject.disabled;
+          useEditorStore.getState().incrementObjectVersion();
+          useEditorStore.getState().incrementHierarchyVersion();
+        }
+        break;
     }
   };
 
-  const keys = [
-    { label: 'F1 Game', action: 'F1' },
-    { label: 'F2 Save', action: 'F2' },
-    { label: 'F3 Load', action: 'F3' },
-    { label: 'F4 New', action: 'F4' },
-    { label: 'F5 Sprite', action: 'F5' },
-    { label: 'F9 Settings', action: 'F9' },
+  const baseKeys: MenuEntry[] = [
+    { hotkey: 'F1', text: 'Game', action: 'F1' },
+    { hotkey: 'F2', text: 'Save', action: 'F2' },
+    { hotkey: 'F3', text: 'Load', action: 'F3' },
+    { hotkey: 'F4', text: 'New', action: 'F4' },
+    { hotkey: 'F5', text: 'Sprite', action: 'F5' },
+    { hotkey: 'F9', text: 'Settings', action: 'F9' },
   ];
 
+  const shiftKeys: MenuEntry[] = [
+    { hotkey: 'F2', text: 'Save As', action: 'SaveAs' },
+    { hotkey: '1', text: 'Save Sel. 1', action: 'SaveSelectionSlot1', enabled: hasObjectSelection },
+    { hotkey: '2', text: 'Save Sel. 2', action: 'SaveSelectionSlot2', enabled: hasObjectSelection },
+  ];
+
+  const altKeys: MenuEntry[] = [
+    { hotkey: 'F2', text: 'Save As', action: 'SaveAs' },
+    { hotkey: 'L', text: lockActionText, action: 'ToggleLock', enabled: hasSingleSelectedObject },
+    {
+      hotkey: 'D',
+      text: disableActionText,
+      action: 'ToggleDisabled',
+      enabled: hasSingleSelectedObject,
+    },
+  ];
+
+  const ctrlKeys: MenuEntry[] = [
+    { hotkey: 'Z', text: 'Undo', action: 'Undo' },
+    { hotkey: 'Y', text: 'Redo', action: 'Redo' },
+    { hotkey: 'D', text: 'Duplicate', action: 'Duplicate', enabled: hasObjectSelection },
+    { hotkey: 'C', text: 'Copy', action: 'Copy', enabled: hasObjectSelection },
+    { hotkey: 'V', text: 'Paste', action: 'Paste', enabled: true },
+    { hotkey: 'S', text: 'Save Prefab', action: 'SaveSelection', enabled: hasObjectSelection },
+    { hotkey: 'O', text: 'Load Prefab', action: 'LoadSelection', enabled: true },
+  ];
+
+  const keys =
+    modifierMode === 'ctrl'
+      ? ctrlKeys
+      : modifierMode === 'alt'
+        ? altKeys
+        : modifierMode === 'shift'
+          ? shiftKeys
+          : baseKeys;
+
   return (
     <div className="editor-bottom-menu" style={{ zIndex: 2000 }}>
       <div className="mem-counter">{`MEM ${sceneMem} | ${sceneCount}`}</div>
       {keys.map((k) => (
-        <button key={k.label} className="e-menu-btn" onClick={() => handleAction(k.action)}>
-          <span className="hotkey-accent">{k.label.split(' ')[0]}</span>
-          {k.label.split(' ').slice(1).join(' ')}
+        <button
+          key={`${modifierMode}-${k.hotkey}-${k.text}`}
+          className="e-menu-btn"
+          onClick={() => handleAction(k.action)}
+          disabled={k.enabled === false}
+        >
+          <span className="hotkey-accent">{k.hotkey}</span>
+          {k.text}
         </button>
       ))}
       <div className="fps-counter">FPS: {fps}</div>
diff --git a/src/components/editor/HierarchyPanel.tsx b/src/components/editor/HierarchyPanel.tsx
index 29f1a29..7e9a2ff 100644
--- a/src/components/editor/HierarchyPanel.tsx
+++ b/src/components/editor/HierarchyPanel.tsx
@@ -416,7 +416,7 @@ export const HierarchyPanel: React.FC = () => {
                 >
                   {icon}
                 </span>
-                {label}
+                <span className="hierarchy-id-text">{label}</span>
               </div>
               {item.locked && <span style={{ fontSize: '10px' }}>🔒</span>}
             </div>
diff --git a/src/components/editor/PropertiesPanel.tsx b/src/components/editor/PropertiesPanel.tsx
index b177bdf..62c24bd 100644
--- a/src/components/editor/PropertiesPanel.tsx
+++ b/src/components/editor/PropertiesPanel.tsx
@@ -4,6 +4,140 @@ import { useGame } from '../../hooks/useGame';
 import { Select } from '../../components/common/Select';
 import { QuadObject } from '../../entities/QuadObject';
 import { Entity } from '../../entities/Entity';
+import { Triggerbox } from '../../entities/Triggerbox';
+
+const PROPERTIES_LABEL_TOOLTIPS: Record<string, string> = {
+  'Group #ID':
+    'Comma-separated tags used to address this object or selection from triggers, switches, scripts, and subscenes.',
+  Parent:
+    'Chooses the direct spatial parent of this object. The object will be treated as attached to that parent instead of the root scene.',
+  Relation:
+    'Defines how this object is attached to its parent in the spatial hierarchy: in, on, under, or behind.',
+  'Group X':
+    'Moves the whole selected group horizontally while preserving the relative layout between the selected objects.',
+  'Group Y':
+    'Moves the whole selected group vertically while preserving the relative layout between the selected objects.',
+  'Group Scale':
+    'Scales the whole selected group around its shared center while keeping the objects aligned with each other.',
+  X: 'Horizontal position in scene space.',
+  Y: 'Vertical position in scene space.',
+  H: 'Visible height of the object rectangle.',
+  W: 'Visible width of the object rectangle.',
+  Scale:
+    'Overall size multiplier. For polygon objects it scales the current shape around its center; for sprite objects it changes their model scale.',
+  Layer:
+    'Render and interaction layer. Higher layers are treated as being in front of lower ones.',
+  Parallax:
+    'Camera parallax factor. Values around 1 move with the scene, while lower or higher values create foreground or background depth drift.',
+  'Collider H':
+    'Collision height used for walkbox and obstacle interaction. Set to 0 to make the object non-blocking.',
+  'Collider W':
+    'Collision width used for walkbox and obstacle interaction. Set to 0 to make the object non-blocking.',
+  'Disable Depth-scaling':
+    'Keeps the object at a fixed visual size instead of letting the scene depth-scaling system resize it by Y position.',
+  'Fill Color':
+    'Base fill color for the object when no sprite is used, or the tint/fill color used by this visual mode.',
+  'Blend Mode':
+    'Canvas blend mode used to combine this object with the scene behind it.',
+  Opacity:
+    'Visual transparency. 0% keeps the object fully opaque; 100% makes it invisible and excluded from rendering.',
+  Blur: 'Blur radius in pixels. 0 px is sharp; higher values make the object softer.',
+  Sprite:
+    'Sprite asset used to render this object. Leave empty to keep the plain filled rectangle look.',
+  Mode:
+    'Selects the behavior mode for this object or component.',
+  'Depth Sort mode':
+    'Chooses which quad rule is used for Y sorting, or disables Y sorting so layer order stays fully manual.',
+  'Grid X':
+    'Number of vertical subdivisions in the retro grid effect.',
+  'Grid Y':
+    'Number of horizontal subdivisions in the retro grid effect.',
+  Width: 'Line width or stroke width used by the current visual effect.',
+  'Grid Color': 'Color used to draw the retro grid lines.',
+  ID: 'Unique identifier used by the engine, scripts, references, and file operations.',
+  'ID/File':
+    'Unique scene identifier and file path key. Slashes create subfolders when the scene is saved.',
+  Title:
+    'Text-asset title shown to the player and used by the text layer as the friendly name for this object or scene.',
+  'Key Item ID':
+    'Inventory item ID required to unlock or activate this interaction.',
+  Description: 'Player-facing short description used by text interactions and subscene presentation.',
+  'Target ID(s)':
+    'One or more target group IDs or object IDs affected by this component or interaction.',
+  'Target ID(s) (Optional)':
+    'Optional target IDs affected by this component. Leave empty when the component should only provide auxiliary behavior.',
+  'Target Trigger (Name/ID)':
+    'Name or ID of the triggerbox that this helper area should activate as if it were clicked directly.',
+  'Target(s) 1':
+    'Targets used when the switch is in state 1, usually the closed or default state.',
+  'Target(s) 2':
+    'Targets used when the switch is in state 2, usually the open or alternate state.',
+  'Sound 1': 'Sound played when the switch moves into state 1.',
+  'Sound 2': 'Sound played when the switch moves into state 2.',
+  State: 'Current switch state used as the starting state in the editor and at runtime.',
+  'Shadow Quad ID':
+    'Quad that receives or shapes this shadow effect.',
+  'Offset X': 'Horizontal offset applied by the component or effect.',
+  'Offset Y': 'Vertical offset applied by the component or effect.',
+  'Trigger ID(s) (Zone)':
+    'Trigger IDs that enable, disable, or otherwise gate this component in specific zones.',
+  Axis: 'Axis constrained by the component or comparison rule.',
+  Op: 'Comparison operator used by the current component or condition.',
+  'Culling Type':
+    'Chooses how the object is culled or hidden when it falls outside the active visibility rule.',
+  'Vert A (0-3)': 'First quad vertex index used by this link or rule.',
+  'Vert B (0-3)': 'Second quad vertex index used by this link or rule.',
+  Direction: 'Default facing direction for the actor.',
+  'Move Speed': 'Actor movement speed in scene units per step.',
+  'Anim Speed (ms)': 'Frame duration for sprite animation playback, in milliseconds.',
+  'Cam X': 'Current camera X position in scene space.',
+  'Cam Y': 'Current camera Y position in scene space.',
+  Zoom: 'Current scene camera zoom.',
+  'Auto-Center on Player':
+    'Automatically keeps the camera centered on the player instead of relying on manual camera values.',
+  'Cam Spd': 'Camera follow speed when auto-centering or camera tracking is active.',
+  'Dead X': 'Horizontal deadzone before camera follow begins.',
+  'Dead Y': 'Vertical deadzone before camera follow begins.',
+  'Min X': 'Minimum allowed X value for this camera range.',
+  'Max X': 'Maximum allowed X value for this camera range.',
+  'Min Y': 'Minimum allowed Y value for this camera range.',
+  'Max Y': 'Maximum allowed Y value for this camera range.',
+  'Def X': 'Default camera X used when the scene loads or resets.',
+  'Def Y': 'Default camera Y used when the scene loads or resets.',
+  'Def Zoom': 'Default camera zoom used when the scene loads or resets.',
+  'Enable Depth Scaling':
+    'Turns scene depth scaling on or off so objects can grow or shrink according to their Y position.',
+  Min: 'Minimum depth-scaling factor used at the horizon end of the scene.',
+  Max: 'Maximum depth-scaling factor used at the front end of the scene.',
+  'Horizon Y': 'Y coordinate treated as the horizon for depth scaling.',
+  'Front Y': 'Y coordinate treated as the foreground limit for depth scaling.',
+  'UI Scale': 'Editor interface scale multiplier.',
+  Curvature: 'Strength of the CRT screen curvature effect.',
+  Vignette: 'Darkening applied toward the screen edges.',
+  'Scanline Count': 'Number of scanlines used by the CRT filter.',
+  'Scanline Intensity': 'Visibility strength of the CRT scanlines.',
+  'RGB Split': 'Amount of RGB channel separation in the CRT effect.',
+  Bloom: 'Glow intensity added by the CRT effect.',
+  'Phosphor / Grain': 'Amount of phosphor persistence and grain noise.',
+  'Enable CRT Filter': 'Turns the CRT post-processing effect on or off.',
+  'Bezel Glow': 'Adds a glow around the virtual CRT bezel.',
+  'Lock Object': 'Prevents accidental editing of this object in the editor. Hotkey: Alt-L.',
+  Disabled: 'Disables the object so it does not participate in the scene. Hotkey: Alt-D.',
+  'Retro Grid':
+    'Enables the retro grid line overlay for this quad. It is also useful for alignment, because objects can snap to grid nodes while Alt is held.',
+};
+
+const normalizeTooltipLabelText = (rawText: string): string => {
+  const text = rawText.replace(/\s+/g, ' ').trim();
+  if (!text) return '';
+  if (text.startsWith('Opacity')) return 'Opacity';
+  if (text.startsWith('Blur')) return 'Blur';
+  if (text.startsWith('UI Scale')) return 'UI Scale';
+  if (text.startsWith('State')) return 'State';
+  if (text.startsWith('Mode:')) return 'Mode';
+  if (text === 'Disable Depth Scaling') return 'Disable Depth-scaling';
+  return text;
+};
 
 export const PropertiesPanel: React.FC = () => {
   const game = useGame();
@@ -12,18 +146,31 @@ export const PropertiesPanel: React.FC = () => {
     selectedObjectType,
     incrementHierarchyVersion,
     incrementObjectVersion,
+    objectVersion,
     mode,
     selectedVertexIndex,
   } = useEditorStore();
   const [groupIdDraft, setGroupIdDraft] = React.useState('');
+  const [multiSpatialParentDraft, setMultiSpatialParentDraft] = React.useState('');
+  const [multiSpatialRelationDraft, setMultiSpatialRelationDraft] = React.useState('');
   const [resolvedTitle, setResolvedTitle] = React.useState('');
   const [textAssetPath, setTextAssetPath] = React.useState('');
   const [isReadingTA, setIsReadingTA] = React.useState(false);
   const [hasTextAsset, setHasTextAsset] = React.useState(false);
+  const [polygonScaleDraft, setPolygonScaleDraft] = React.useState('1');
+  const lastUndoObjectKeyRef = React.useRef<string | null>(null);
+  const lastUndoMultiKeyRef = React.useRef<string | null>(null);
+  const lastPolygonScaleObjectKeyRef = React.useRef<string | null>(null);
+  const polygonScaleSnapshotRef = React.useRef<any>(null);
+  const panelRef = React.useRef<HTMLDivElement | null>(null);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+  const sectionRefs = React.useRef<Record<number, HTMLDivElement | null>>({});
+  const isPanelHoveredRef = React.useRef(false);
 
   // Derived Object Binding (Source of Truth)
-  // We re-render whenever objectVersion changes (subscribed via store hook)
+  // We re-render whenever objectVersion changes.
   let obj: any = null;
+  void objectVersion;
   if (game) {
     if (selectedObjectId === 'SETTINGS') {
       obj = game.settings;
@@ -56,22 +203,76 @@ export const PropertiesPanel: React.FC = () => {
     [spatialRelationOptions]
   );
 
+  const getSpatialDescendantNames = React.useCallback((rootNames: string[]) => {
+    const scene = game?.sceneManager?.currentScene;
+    if (!scene || !rootNames.length) return new Set<string>();
+
+    const allObjects = [...scene.entities, ...scene.walkbox, ...scene.triggerboxes];
+    const childrenByParent = new Map<string, string[]>();
+
+    allObjects.forEach((item: any) => {
+      const parentId = typeof item?.spatial?.parentNodeId === 'string' ? item.spatial.parentNodeId.trim() : '';
+      const name = typeof item?.name === 'string' ? item.name.trim() : '';
+      if (!parentId || !name) return;
+      const children = childrenByParent.get(parentId) || [];
+      children.push(name);
+      childrenByParent.set(parentId, children);
+    });
+
+    const visited = new Set<string>();
+    const stack = [...rootNames.filter(Boolean)];
+    while (stack.length) {
+      const current = stack.pop()!;
+      const children = childrenByParent.get(current) || [];
+      children.forEach((child) => {
+        if (visited.has(child)) return;
+        visited.add(child);
+        stack.push(child);
+      });
+    }
+
+    return visited;
+  }, [game]);
+
   const getSceneSpatialParentOptions = React.useCallback(() => {
     const scene = game?.sceneManager?.currentScene;
     if (!scene || !obj) {
       return [{ value: '', label: '(None)' }];
     }
 
+    const excludedNames = new Set<string>([obj?.name].filter(Boolean));
+    getSpatialDescendantNames([obj?.name]).forEach((name) => excludedNames.add(name));
+
+    const allObjects = [...scene.entities, ...scene.walkbox, ...scene.triggerboxes];
+    const options = allObjects
+      .filter((item: any) => item && !excludedNames.has(item.name))
+      .map((item: any) => ({
+        value: item.name,
+        label: item.customName?.trim() || item.name,
+      }));
+
+    return [{ value: '', label: '(None)' }, ...options];
+  }, [game, obj, getSpatialDescendantNames]);
+
+  const getMultiSpatialParentOptions = React.useCallback(() => {
+    const scene = game?.sceneManager?.currentScene;
+    if (!scene || !multiObjects.length) {
+      return [{ value: '', label: '(None)' }];
+    }
+
+    const selectedNames = new Set(multiObjects.map((item: any) => item?.name).filter(Boolean));
+    getSpatialDescendantNames(Array.from(selectedNames)).forEach((name) => selectedNames.add(name));
+
     const allObjects = [...scene.entities, ...scene.walkbox, ...scene.triggerboxes];
     const options = allObjects
-      .filter((item) => item !== obj)
+      .filter((item: any) => item && !selectedNames.has(item.name))
       .map((item: any) => ({
         value: item.name,
         label: item.customName?.trim() || item.name,
       }));
 
     return [{ value: '', label: '(None)' }, ...options];
-  }, [game, obj]);
+  }, [game, multiObjects, getSpatialDescendantNames]);
 
   const getSharedValue = (arr: any[], getter: (o: any) => any) => {
     if (!arr.length) return '';
@@ -91,12 +292,271 @@ export const PropertiesPanel: React.FC = () => {
     return first ? 'on' : 'off';
   };
 
+  const formatPanelNumber = React.useCallback((value: any): number | string => {
+    if (value === '' || value === null || value === undefined) return '';
+    const n = Number(value);
+    if (!Number.isFinite(n)) return value;
+    return Number(n.toFixed(3));
+  }, []);
+
+  const setSectionRef = React.useCallback(
+    (section: number) => (node: HTMLDivElement | null) => {
+      sectionRefs.current[section] = node;
+    },
+    []
+  );
+
+  const scrollToSection = React.useCallback((section: number) => {
+    const container = contentRef.current;
+    const node = sectionRefs.current[section];
+    if (!container || !node) return;
+    const containerRect = container.getBoundingClientRect();
+    const nodeRect = node.getBoundingClientRect();
+    const targetTop = container.scrollTop + (nodeRect.top - containerRect.top) - 8;
+    container.scrollTo({
+      top: Math.max(0, targetTop),
+      behavior: 'smooth',
+    });
+  }, []);
+
+  const isPanelTextEntryFocused = React.useCallback(() => {
+    const active = document.activeElement as HTMLElement | null;
+    if (!active || !panelRef.current || !panelRef.current.contains(active)) return false;
+    if (active.matches('input, textarea, select, [contenteditable="true"]')) return true;
+    if (active.closest('.custom-select-container')) return true;
+    return false;
+  }, []);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isPanelHoveredRef.current) return;
+      if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+      if (isPanelTextEntryFocused()) return;
+
+      const key = e.key;
+      if (!/^[0-6]$/.test(key)) return;
+
+      e.preventDefault();
+      scrollToSection(parseInt(key, 10));
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isPanelTextEntryFocused, scrollToSection]);
+
+  React.useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+
+    const labels = panel.querySelectorAll('label.e-label');
+    labels.forEach((node) => {
+      const label = node as HTMLLabelElement;
+      if (label.dataset.tooltipFixed === 'true') {
+        label.classList.add('e-tooltip-label');
+        return;
+      }
+
+      const normalized = normalizeTooltipLabelText(label.textContent || '');
+      const tooltip = PROPERTIES_LABEL_TOOLTIPS[normalized];
+      if (!tooltip) {
+        label.removeAttribute('title');
+        label.classList.remove('e-tooltip-label');
+        return;
+      }
+
+      label.title = tooltip;
+      label.classList.add('e-tooltip-label');
+    });
+  });
+
+  const getPolyCentroid = React.useCallback((poly: { x: number; y: number }[] = []) => {
+    if (!poly.length) return { x: 0, y: 0 };
+    const sum = poly.reduce((acc, pt) => ({ x: acc.x + pt.x, y: acc.y + pt.y }), { x: 0, y: 0 });
+    return { x: sum.x / poly.length, y: sum.y / poly.length };
+  }, []);
+
+  const translatePolyTo = React.useCallback(
+    (targetX: number, targetY: number) => {
+      if (!obj?.poly?.length) return;
+      const centroid = getPolyCentroid(obj.poly);
+      const dx = targetX - centroid.x;
+      const dy = targetY - centroid.y;
+      obj.poly = obj.poly.map((pt: any) => ({
+        x: Math.round(pt.x + dx),
+        y: Math.round(pt.y + dy),
+      }));
+      incrementObjectVersion();
+    },
+    [getPolyCentroid, incrementObjectVersion, obj]
+  );
+
+  const getQuadCentroid = React.useCallback((quad: any) => {
+    const verts = quad?.vertices || [];
+    if (!verts.length) return { x: quad?.x || 0, y: quad?.y || 0 };
+    const sum = verts.reduce((acc: any, v: any) => ({ x: acc.x + v.x, y: acc.y + v.y }), { x: 0, y: 0 });
+    return { x: sum.x / verts.length, y: sum.y / verts.length };
+  }, []);
+
+  const translateQuadTo = React.useCallback(
+    (targetX: number, targetY: number) => {
+      if (!obj?.vertices?.length) return;
+      const centroid = getQuadCentroid(obj);
+      const dx = targetX - centroid.x;
+      const dy = targetY - centroid.y;
+      obj.vertices = obj.vertices.map((v: any) => ({
+        ...v,
+        x: v.x + dx,
+        y: v.y + dy,
+      }));
+      obj.x = targetX;
+      obj.y = targetY;
+      incrementObjectVersion();
+    },
+    [getQuadCentroid, incrementObjectVersion, obj]
+  );
+
+  const scalePolyByFactor = React.useCallback(
+    (poly: { x: number; y: number }[], factor: number, originX: number, originY: number) =>
+      poly.map((pt) => ({
+        x: Math.round(originX + (pt.x - originX) * factor),
+        y: Math.round(originY + (pt.y - originY) * factor),
+      })),
+    []
+  );
+
+  const scaleQuadVerticesByFactor = React.useCallback(
+    (vertices: any[], factor: number, originX: number, originY: number) =>
+      vertices.map((v) => ({
+        ...v,
+        x: originX + (v.x - originX) * factor,
+        y: originY + (v.y - originY) * factor,
+      })),
+    []
+  );
+
+  const applyPolygonScaleDraft = React.useCallback(
+    (nextScaleRaw: string) => {
+      if (!obj || !(selectedObjectType === 'Triggerbox' || selectedObjectType === 'Quad')) return;
+      const nextScale = parseFloat(nextScaleRaw);
+      if (!Number.isFinite(nextScale) || nextScale <= 0) return;
+
+      const objectKey = `${selectedObjectType || 'Object'}:${obj.name || ''}`;
+      if (lastPolygonScaleObjectKeyRef.current !== objectKey) {
+        game?.editor?.saveUndoState();
+        if (selectedObjectType === 'Quad' && obj.vertices?.length) {
+          polygonScaleSnapshotRef.current = {
+            key: objectKey,
+            kind: 'quad',
+            vertices: obj.vertices.map((v: any) => ({ ...v })),
+          };
+        } else if (obj.poly?.length) {
+          polygonScaleSnapshotRef.current = {
+            key: objectKey,
+            kind: 'poly',
+            poly: obj.poly.map((pt: any) => ({ x: pt.x, y: pt.y })),
+          };
+        } else {
+          polygonScaleSnapshotRef.current = null;
+        }
+      }
+
+      const snapshot = polygonScaleSnapshotRef.current;
+      if (!snapshot || snapshot.key !== objectKey) {
+        setPolygonScaleDraft(nextScaleRaw);
+        lastPolygonScaleObjectKeyRef.current = objectKey;
+        return;
+      }
+
+      if (snapshot.kind === 'quad' && selectedObjectType === 'Quad' && snapshot.vertices?.length) {
+        const sourceVertices = snapshot.vertices.map((v: any) => ({ ...v }));
+        const sourceCentroid = {
+          x: sourceVertices.reduce((acc: number, v: any) => acc + v.x, 0) / sourceVertices.length,
+          y: sourceVertices.reduce((acc: number, v: any) => acc + v.y, 0) / sourceVertices.length,
+        };
+        obj.vertices = scaleQuadVerticesByFactor(
+          sourceVertices,
+          nextScale,
+          sourceCentroid.x,
+          sourceCentroid.y
+        );
+        obj.x = Math.round(
+          obj.vertices.reduce((acc: number, v: any) => acc + v.x, 0) / obj.vertices.length
+        );
+        obj.y = Math.round(
+          obj.vertices.reduce((acc: number, v: any) => acc + v.y, 0) / obj.vertices.length
+        );
+      } else if (snapshot.kind === 'poly' && snapshot.poly?.length) {
+        const sourcePoly = snapshot.poly.map((pt: any) => ({ x: pt.x, y: pt.y }));
+        const sourceCentroid = getPolyCentroid(sourcePoly);
+        obj.poly = scalePolyByFactor(sourcePoly, nextScale, sourceCentroid.x, sourceCentroid.y);
+      }
+
+      setPolygonScaleDraft(nextScaleRaw);
+      lastPolygonScaleObjectKeyRef.current = objectKey;
+      incrementObjectVersion();
+    },
+    [
+      game,
+      getPolyCentroid,
+      getQuadCentroid,
+      incrementObjectVersion,
+      obj,
+      scalePolyByFactor,
+      scaleQuadVerticesByFactor,
+      selectedObjectType,
+    ]
+  );
+
   const applyToMulti = (fn: (o: any) => void) => {
+    const multiKey = `MULTI:${multiObjects.map((item: any) => item?.name || '').filter(Boolean).join('|')}`;
+    if (game?.editor && lastUndoMultiKeyRef.current !== multiKey) {
+      game.editor.saveUndoState();
+      lastUndoMultiKeyRef.current = multiKey;
+    }
     multiObjects.forEach(fn);
     incrementObjectVersion();
     incrementHierarchyVersion();
   };
 
+  const applyToMultiRoots = (fn: (o: any) => void) => {
+    const multiKey = `MULTI:${multiObjects.map((item: any) => item?.name || '').filter(Boolean).join('|')}`;
+    if (game?.editor && lastUndoMultiKeyRef.current !== multiKey) {
+      game.editor.saveUndoState();
+      lastUndoMultiKeyRef.current = multiKey;
+    }
+    const selectedNames = new Set(multiObjects.map((item: any) => item?.name).filter(Boolean));
+    multiObjects.forEach((o: any) => {
+      const parentId = typeof o?.spatial?.parentNodeId === 'string' ? o.spatial.parentNodeId.trim() : '';
+      if (parentId && selectedNames.has(parentId)) return;
+      fn(o);
+    });
+    incrementObjectVersion();
+    incrementHierarchyVersion();
+  };
+
+  React.useEffect(() => {
+    if (selectedObjectType !== 'MULTI' || multiObjects.length <= 1) {
+      setMultiSpatialParentDraft('');
+      setMultiSpatialRelationDraft('');
+      return;
+    }
+
+    const sharedParent = getSharedValue(multiObjects, (o: any) => o.spatial?.parentNodeId || '');
+    const sharedRelation = getSharedValue(
+      multiObjects,
+      (o: any) => (o.spatial?.parentNodeId ? o.spatial?.relation || 'in' : o.spatial?.relation || '')
+    );
+
+    setMultiSpatialParentDraft(sharedParent === '' ? '' : sharedParent);
+    setMultiSpatialRelationDraft(sharedRelation === '' ? '' : sharedRelation);
+  }, [selectedObjectType, selectedObjectId, objectVersion, multiObjects.length]);
+
+  React.useEffect(() => {
+    setPolygonScaleDraft('1');
+    lastPolygonScaleObjectKeyRef.current = null;
+    polygonScaleSnapshotRef.current = null;
+  }, [selectedObjectType, selectedObjectId]);
+
   const loadResolvedTitle = React.useCallback(
     async (forceReload: boolean = false) => {
       if (!game || !obj || selectedObjectType === 'MULTI' || selectedObjectType === 'SETTINGS') {
@@ -224,7 +684,74 @@ export const PropertiesPanel: React.FC = () => {
     }
   };
 
+  const renderSection = (
+    section: number,
+    title: string | null,
+    color: 'blue' | 'red' | 'yellow' | 'purple' | 'neutral',
+    children: React.ReactNode
+  ) => (
+    <div ref={setSectionRef(section)} className="properties-section-block" data-section={section}>
+      {title !== null && (
+        <div className={`properties-section-header properties-section-${color}`}>
+          <div className="properties-section-title">
+            <span className={`properties-section-number properties-section-${color}`}>{section}</span>
+            <span className="properties-section-label">{title}</span>
+          </div>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+
+  const renderOpacityBlurControls = (
+    opacityValue: number | '',
+    blurValue: number | '',
+    onOpacityChange: (nextOpacity: number) => void,
+    onBlurChange: (nextBlur: number) => void
+  ) => {
+    const normalizedOpacity = opacityValue === '' ? 1 : Number(opacityValue);
+    const normalizedBlur = blurValue === '' ? 0 : Number(blurValue);
+    const opacityUi = Math.round((1 - normalizedOpacity) * 100);
+    const blurUi = Math.max(0, Math.min(50, Math.round(normalizedBlur)));
+
+    return (
+      <div
+        className="e-row"
+        style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}
+      >
+        <div>
+          <label className="e-label">Opacity ({opacityUi}%)</label>
+          <input
+            type="range"
+            className="e-input"
+            style={{ width: '100%' }}
+            min="0"
+            max="100"
+            step="5"
+            value={opacityUi}
+            onChange={(e) => onOpacityChange(1 - parseInt(e.target.value, 10) / 100)}
+          />
+        </div>
+        <div>
+          <label className="e-label">Blur ({blurUi}px)</label>
+          <input
+            type="range"
+            className="e-input"
+            style={{ width: '100%' }}
+            min="0"
+            max="50"
+            step="1"
+            value={blurUi}
+            onChange={(e) => onBlurChange(parseInt(e.target.value, 10))}
+          />
+        </div>
+      </div>
+    );
+  };
+
   React.useEffect(() => {
+    lastUndoObjectKeyRef.current = null;
+    lastUndoMultiKeyRef.current = null;
     if (selectedObjectType !== 'MULTI') {
       setGroupIdDraft('');
     }
@@ -233,20 +760,27 @@ export const PropertiesPanel: React.FC = () => {
   if (!obj || !game) {
     return (
       <div
+        ref={panelRef}
         id="editor-panel"
         className="editor-sidebar right"
         onMouseEnter={() => {
+          isPanelHoveredRef.current = true;
           if (game) game.isMouseOverUI = true;
         }}
         onMouseLeave={() => {
+          isPanelHoveredRef.current = false;
           if (game) game.isMouseOverUI = false;
         }}
+        onBlurCapture={() => {
+          lastUndoObjectKeyRef.current = null;
+          lastUndoMultiKeyRef.current = null;
+        }}
         style={{ fontSize: `${12 * uiScale}px` }}
       >
         <div className="editor-header">
           <span>{selectedObjectId === 'SETTINGS' ? 'SETTINGS (Loading...)' : 'PROPERTIES'}</span>
         </div>
-        <div className="editor-content" style={{ color: '#888', fontStyle: 'italic' }}>
+        <div ref={contentRef} className="editor-content ui-text-muted ui-text-italic">
           {selectedObjectId === 'SETTINGS' ? 'Loading Settings...' : 'No Selection'}
         </div>
       </div>
@@ -256,9 +790,12 @@ export const PropertiesPanel: React.FC = () => {
   if (selectedObjectType === 'MULTI' && multiObjects.length > 1) {
     const group = game.editor.selectionManager.getGroupTransform();
     const entitiesAndQuads = multiObjects.filter((o: any) => o instanceof Entity);
+    const parallaxObjects = multiObjects.filter(
+      (o: any) => o instanceof Entity || o instanceof Triggerbox || (o as any).type === 'Quad'
+    );
     const quads = multiObjects.filter((o: any) => (o as any).type === 'Quad');
     const sharedLayer = getSharedValue(multiObjects, (o) => o.layer ?? 0);
-    const sharedParallax = getSharedValue(entitiesAndQuads, (o: any) => o.parallax ?? 1);
+    const sharedParallax = getSharedValue(parallaxObjects, (o: any) => o.parallax ?? 1);
     const sharedBlendMode = getSharedValue(
       entitiesAndQuads,
       (o: any) => o.blendMode || 'source-over'
@@ -278,19 +815,27 @@ export const PropertiesPanel: React.FC = () => {
       entitiesAndQuads,
       (o: any) => !!o.ignoreScaling
     );
+    const sharedParentNodeId = getSharedValue(multiObjects, (o: any) => o.spatial?.parentNodeId || '');
     const sharedLocked = getSharedBooleanState(multiObjects, (o: any) => !!o.locked);
     const sharedDisabled = getSharedBooleanState(multiObjects, (o: any) => !!o.disabled);
 
     return (
       <div
+        ref={panelRef}
         id="editor-panel"
         className="editor-sidebar right"
         onMouseEnter={() => {
+          isPanelHoveredRef.current = true;
           if (game) game.isMouseOverUI = true;
         }}
         onMouseLeave={() => {
+          isPanelHoveredRef.current = false;
           if (game) game.isMouseOverUI = false;
         }}
+        onBlurCapture={() => {
+          lastUndoObjectKeyRef.current = null;
+          lastUndoMultiKeyRef.current = null;
+        }}
         style={{ fontSize: `${12 * uiScale}px` }}
       >
         <div className="editor-header">
@@ -299,462 +844,545 @@ export const PropertiesPanel: React.FC = () => {
             X
           </button>
         </div>
-        <div className="editor-content">
-          <div className="e-row">
-            <label className="e-label">Group #ID</label>
-            <div className="e-label" style={{ color: '#888', fontSize: '0.8em' }}>
-              (&lt;Enter&gt; = append, &lt;Ctrl+Enter&gt; = remove)
-            </div>
-            <input
-              type="text"
-              className="e-input"
-              value={groupIdDraft}
-              placeholder="#group"
-              onChange={(e) => setGroupIdDraft(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key !== 'Enter') return;
-                e.preventDefault();
-                const raw = groupIdDraft.trim();
-                if (!raw) return;
-                const prepared = raw
-                  .split(',')
-                  .map((x) => x.trim())
-                  .filter(Boolean)
-                  .map((x) => (x.startsWith('#') ? x : `#${x}`));
-
-                let changedCount = 0;
-                multiObjects.forEach((o: any) => {
-                  const existing = (o.groupID || '')
-                    .split(',')
-                    .map((x: string) => x.trim())
-                    .filter(Boolean);
-
-                  if (e.ctrlKey) {
-                    const filtered = existing.filter((x: string) => !prepared.includes(x));
-                    if (filtered.length !== existing.length) {
-                      changedCount++;
-                    }
-                    o.groupID = filtered.join(',');
-                    return;
-                  }
-
-                  const merged = [...new Set([...existing, ...prepared])];
-                  if (merged.length !== existing.length) {
-                    changedCount++;
-                  }
-                  o.groupID = merged.join(',');
-                });
-
-                if (changedCount > 0) {
-                  incrementObjectVersion();
-                  incrementHierarchyVersion();
-                  const tagsText = prepared.join(', ');
-                  if (e.ctrlKey) {
-                    game.showNotification(
-                      `Removed ${tagsText} from ${changedCount} object${changedCount === 1 ? '' : 's'}`
-                    );
-                  } else {
-                    game.showNotification(
-                      `Appended ${tagsText} to ${changedCount} object${changedCount === 1 ? '' : 's'}`
-                    );
-                  }
-                }
-                setGroupIdDraft('');
-              }}
-            />
-          </div>
-
-          <div
-            className="e-row"
-            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
-          >
-            <div>
-              <label className="e-label">Group X</label>
-              <input
-                type="number"
-                className="e-input"
-                value={group.offsetX.toFixed(2)}
-                onChange={(e) => {
-                  const x = parseFloat(e.target.value);
-                  game.editor.selectionManager.applyGroupTransform(
-                    isNaN(x) ? 0 : x,
-                    group.offsetY,
-                    group.scale
-                  );
-                  incrementObjectVersion();
-                }}
-              />
-            </div>
-            <div>
-              <label className="e-label">Group Y</label>
-              <input
-                type="number"
-                className="e-input"
-                value={group.offsetY.toFixed(2)}
-                onChange={(e) => {
-                  const y = parseFloat(e.target.value);
-                  game.editor.selectionManager.applyGroupTransform(
-                    group.offsetX,
-                    isNaN(y) ? 0 : y,
-                    group.scale
-                  );
-                  incrementObjectVersion();
-                }}
-              />
-            </div>
-          </div>
-
-          <div className="e-row">
-            <label className="e-label">Group Scale</label>
-            <input
-              type="number"
-              step="0.01"
-              min="0.01"
-              className="e-input"
-              value={group.scale.toFixed(3)}
-              onChange={(e) => {
-                const s = parseFloat(e.target.value);
-                game.editor.selectionManager.applyGroupTransform(
-                  group.offsetX,
-                  group.offsetY,
-                  isNaN(s) ? 1 : s
-                );
-                incrementObjectVersion();
-              }}
-            />
-          </div>
-
-          <div
-            className="e-row"
-            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
-          >
-            <div>
-              <label className="e-label">Layer</label>
-              <input
-                type="number"
-                className="e-input"
-                placeholder="mixed"
-                value={sharedLayer === '' ? '' : sharedLayer}
-                onChange={(e) => {
-                  const v = parseInt(e.target.value);
-                  if (isNaN(v)) return;
-                  applyToMulti((o) => {
-                    o.layer = v;
-                  });
-                }}
-              />
-            </div>
-            {entitiesAndQuads.length > 0 ? (
-              <div>
-                <label className="e-label">Parallax</label>
+        <div ref={contentRef} className="editor-content">
+          {renderSection(
+            0,
+            null,
+            'neutral',
+            <>
+              <div className="e-row">
+                <label
+                  className="e-label"
+                  data-tooltip-fixed="true"
+                  title="Use this field to add or remove group #ID tags for all selected objects at once."
+                >
+                  Group #ID
+                </label>
+                <div className="e-label ui-text-muted ui-text-small">
+                  (&lt;Enter&gt; = append, &lt;Ctrl+Enter&gt; = remove)
+                </div>
                 <input
-                  type="number"
-                  step="0.1"
+                  type="text"
                   className="e-input"
-                  placeholder="mixed"
-                  value={sharedParallax === '' ? '' : sharedParallax}
-                  onChange={(e) => {
-                    const v = parseFloat(e.target.value);
-                    if (isNaN(v)) return;
-                    applyToMulti((o: any) => {
-                      if (o instanceof Entity) o.parallax = v;
-                    });
-                  }}
-                />
-              </div>
-            ) : (
-              <div />
-            )}
-          </div>
+                  value={groupIdDraft}
+                  placeholder="#group"
+                  onChange={(e) => setGroupIdDraft(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key !== 'Enter') return;
+                    e.preventDefault();
+                    const raw = groupIdDraft.trim();
+                    if (!raw) return;
+                    const prepared = raw
+                      .split(',')
+                      .map((x) => x.trim())
+                      .filter(Boolean)
+                      .map((x) => (x.startsWith('#') ? x : `#${x}`));
+
+                    let changedCount = 0;
+                    multiObjects.forEach((o: any) => {
+                      const existing = (o.groupID || '')
+                        .split(',')
+                        .map((x: string) => x.trim())
+                        .filter(Boolean);
+
+                      if (e.ctrlKey) {
+                        const filtered = existing.filter((x: string) => !prepared.includes(x));
+                        if (filtered.length !== existing.length) changedCount++;
+                        o.groupID = filtered.join(',');
+                        return;
+                      }
 
-          {entitiesAndQuads.length > 0 && (
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
-            >
-              <div>
-                <label className="e-label">Opacity</label>
-                <input
-                  type="number"
-                  step="0.01"
-                  min="0"
-                  max="1"
-                  className="e-input"
-                  placeholder="mixed"
-                  value={sharedOpacity === '' ? '' : sharedOpacity}
-                  onChange={(e) => {
-                    const v = parseFloat(e.target.value);
-                    if (isNaN(v)) return;
-                    applyToMulti((o: any) => {
-                      if (o instanceof Entity) o.opacity = v;
+                      const merged = [...new Set([...existing, ...prepared])];
+                      if (merged.length !== existing.length) changedCount++;
+                      o.groupID = merged.join(',');
                     });
+
+                    if (changedCount > 0) {
+                      const multiKey = `MULTI:${multiObjects
+                        .map((item: any) => item?.name || '')
+                        .filter(Boolean)
+                        .join('|')}`;
+                      if (game?.editor && lastUndoMultiKeyRef.current !== multiKey) {
+                        game.editor.saveUndoState();
+                        lastUndoMultiKeyRef.current = multiKey;
+                      }
+                      incrementObjectVersion();
+                      incrementHierarchyVersion();
+                      const tagsText = prepared.join(', ');
+                      if (e.ctrlKey) {
+                        game.showNotification(
+                          `Removed ${tagsText} from ${changedCount} object${changedCount === 1 ? '' : 's'}`
+                        );
+                      } else {
+                        game.showNotification(
+                          `Appended ${tagsText} to ${changedCount} object${changedCount === 1 ? '' : 's'}`
+                        );
+                      }
+                    }
+                    setGroupIdDraft('');
                   }}
                 />
               </div>
-              <div>
-                <label className="e-label">Blur</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  placeholder="mixed"
-                  value={sharedBlur === '' ? '' : sharedBlur}
-                  onChange={(e) => {
-                    const v = parseInt(e.target.value);
-                    if (isNaN(v)) return;
-                    applyToMulti((o: any) => {
-                      if (o instanceof Entity) o.blur = v;
+
+              <div className="e-row">
+                <label className="e-label">Parent</label>
+                <Select
+                  className="parent-id-select"
+                  value={multiSpatialParentDraft}
+                  onChange={(value) => {
+                    const nextRelation = !value ? '' : multiSpatialRelationDraft || 'in';
+                    setMultiSpatialParentDraft(value || '');
+                    setMultiSpatialRelationDraft(nextRelation);
+                    applyToMultiRoots((o: any) => {
+                      o.spatial = {
+                        ...(o.spatial || {}),
+                        parentNodeId: value || null,
+                        relation: value ? nextRelation || 'in' : null,
+                      };
                     });
                   }}
+                  options={getMultiSpatialParentOptions()}
+                  style={{ width: '100%' }}
                 />
               </div>
-            </div>
-          )}
 
-          {entitiesAndQuads.length > 0 && (
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
-            >
-              <div>
-                <label className="e-label">Fill Color</label>
-                <div style={{ display: 'flex', gap: '5px' }}>
-                  <input
-                    type="color"
-                    className="e-input"
-                    style={{ width: '32px', padding: 0 }}
-                    value={sharedColor === '' ? '#ffffff' : sharedColor}
-                    onChange={(e) => {
-                      const v = e.target.value;
-                      applyToMulti((o: any) => {
-                        if (o.color !== undefined) o.color = v;
-                      });
-                    }}
-                  />
-                  <input
-                    type="text"
-                    className="e-input"
-                    placeholder="mixed"
-                    value={sharedColor === '' ? '' : sharedColor}
-                    onChange={(e) => {
-                      const v = e.target.value;
-                      applyToMulti((o: any) => {
-                        if (o.color !== undefined) o.color = v;
-                      });
-                    }}
-                  />
-                </div>
-              </div>
-              <div style={{ display: 'flex', alignItems: 'end' }}>
-                <div style={{ width: '100%' }}>
-                  <label className="e-label">Blend</label>
+              {sharedParentNodeId && (
+                <div className="e-row">
+                  <label className="e-label">Relation</label>
                   <Select
-                    value={sharedBlendMode === '' ? 'source-over' : sharedBlendMode}
+                    value={multiSpatialRelationDraft}
                     onChange={(value) => {
-                      applyToMulti((o: any) => {
-                        if (o instanceof Entity) o.blendMode = value as GlobalCompositeOperation;
+                      setMultiSpatialRelationDraft(value || '');
+                      applyToMultiRoots((o: any) => {
+                        o.spatial = {
+                          ...(o.spatial || {}),
+                          parentNodeId: o.spatial?.parentNodeId || null,
+                          relation: value || (o.spatial?.parentNodeId ? 'in' : null),
+                        };
                       });
                     }}
-                    options={[
-                      { value: 'source-over', label: 'Normal' },
-                      { value: 'multiply', label: 'Multiply' },
-                      { value: 'screen', label: 'Screen' },
-                      { value: 'overlay', label: 'Overlay' },
-                      { value: 'lighter', label: 'Add' },
-                      { value: 'difference', label: 'Diff' },
-                    ]}
+                    options={getSpatialRelationOptions(true)}
                     style={{ width: '100%' }}
                   />
                 </div>
-              </div>
-            </div>
-          )}
-
-          {quads.length > 0 && (
-            <div className="e-row">
-              <label
-                className="e-label"
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  color: sharedIsGrid === 'on' ? '#ffffff' : 'inherit',
-                }}
-              >
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={sharedIsGrid === 'on'}
-                  ref={(el) => {
-                    if (el) el.indeterminate = sharedIsGrid === 'mixed';
-                  }}
-                  onChange={(e) => {
-                    applyToMulti((o: any) => {
-                      if ((o as any).type === 'Quad') (o as any).isGrid = e.target.checked;
-                    });
-                  }}
-                />
-                Retro Grid
-              </label>
-            </div>
+              )}
+            </>
           )}
 
-          {quads.length > 0 && sharedIsGrid !== 'off' && (
+          {renderSection(
+            1,
+            'Transform',
+            'blue',
             <>
               <div
                 className="e-row"
-                style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
+                style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
               >
                 <div>
-                  <label className="e-label">Grid X</label>
+                  <label className="e-label">Group X</label>
                   <input
                     type="number"
                     className="e-input"
-                    placeholder="mixed"
-                    value={sharedGridX === '' ? '' : sharedGridX}
+                    value={formatPanelNumber(group.offsetX)}
                     onChange={(e) => {
-                      const v = parseInt(e.target.value);
-                      if (isNaN(v)) return;
-                      applyToMulti((o: any) => {
-                        if ((o as any).type === 'Quad') (o as any).gridLinesX = v;
-                      });
+                      const multiKey = `MULTI:${multiObjects
+                        .map((item: any) => item?.name || '')
+                        .filter(Boolean)
+                        .join('|')}`;
+                      if (game?.editor && lastUndoMultiKeyRef.current !== multiKey) {
+                        game.editor.saveUndoState();
+                        lastUndoMultiKeyRef.current = multiKey;
+                      }
+                      const x = parseFloat(e.target.value);
+                      game.editor.selectionManager.applyGroupTransform(
+                        isNaN(x) ? 0 : x,
+                        group.offsetY,
+                        group.scale
+                      );
+                      incrementObjectVersion();
                     }}
-                    min={1}
-                    max={50}
                   />
                 </div>
                 <div>
-                  <label className="e-label">Grid Y</label>
+                  <label className="e-label">Group Y</label>
                   <input
                     type="number"
                     className="e-input"
-                    placeholder="mixed"
-                    value={sharedGridY === '' ? '' : sharedGridY}
+                    value={formatPanelNumber(group.offsetY)}
                     onChange={(e) => {
-                      const v = parseInt(e.target.value);
-                      if (isNaN(v)) return;
-                      applyToMulti((o: any) => {
-                        if ((o as any).type === 'Quad') (o as any).gridLinesY = v;
-                      });
+                      const multiKey = `MULTI:${multiObjects
+                        .map((item: any) => item?.name || '')
+                        .filter(Boolean)
+                        .join('|')}`;
+                      if (game?.editor && lastUndoMultiKeyRef.current !== multiKey) {
+                        game.editor.saveUndoState();
+                        lastUndoMultiKeyRef.current = multiKey;
+                      }
+                      const y = parseFloat(e.target.value);
+                      game.editor.selectionManager.applyGroupTransform(
+                        group.offsetX,
+                        isNaN(y) ? 0 : y,
+                        group.scale
+                      );
+                      incrementObjectVersion();
+                    }}
+                  />
+                </div>
+              </div>
+
+              <div
+                className="e-row"
+                style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '6px' }}
+              >
+                <div>
+                  <label className="e-label">Group Scale</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    className="e-input"
+                    value={formatPanelNumber(group.scale)}
+                    onChange={(e) => {
+                      const multiKey = `MULTI:${multiObjects
+                        .map((item: any) => item?.name || '')
+                        .filter(Boolean)
+                        .join('|')}`;
+                      if (game?.editor && lastUndoMultiKeyRef.current !== multiKey) {
+                        game.editor.saveUndoState();
+                        lastUndoMultiKeyRef.current = multiKey;
+                      }
+                      const s = parseFloat(e.target.value);
+                      if (isNaN(s) || s <= 0) return;
+                      game.editor.selectionManager.applyGroupTransform(group.offsetX, group.offsetY, s);
+                      incrementObjectVersion();
                     }}
-                    min={1}
-                    max={50}
                   />
                 </div>
                 <div>
-                  <label className="e-label">Width</label>
+                  <label className="e-label">Layer</label>
                   <input
                     type="number"
                     className="e-input"
                     placeholder="mixed"
-                    value={sharedGridWidth === '' ? '' : sharedGridWidth}
+                    value={sharedLayer === '' ? '' : formatPanelNumber(sharedLayer)}
                     onChange={(e) => {
-                      const v = parseFloat(e.target.value);
+                      const v = parseInt(e.target.value);
                       if (isNaN(v)) return;
-                      applyToMulti((o: any) => {
-                        if ((o as any).type === 'Quad') (o as any).lineWidth = v;
+                      applyToMulti((o) => {
+                        o.layer = v;
                       });
                     }}
-                    step={0.1}
-                    min={0.1}
-                    max={10}
                   />
                 </div>
+                <div>
+                  {parallaxObjects.length > 0 ? (
+                    <>
+                      <label className="e-label">Parallax</label>
+                      <input
+                        type="number"
+                        step="0.1"
+                        className="e-input ui-text-muted"
+                        placeholder="mixed"
+                        value={sharedParallax === '' ? '' : formatPanelNumber(sharedParallax)}
+                        onChange={(e) => {
+                          const v = parseFloat(e.target.value);
+                          if (isNaN(v)) return;
+                          applyToMulti((o: any) => {
+                            if (o instanceof Entity || o instanceof Triggerbox || (o as any).type === 'Quad') {
+                              o.parallax = v;
+                            }
+                          });
+                        }}
+                      />
+                    </>
+                  ) : (
+                    <div />
+                  )}
+                </div>
               </div>
-              <div className="e-row">
-                <label className="e-label">Grid Color</label>
-                <div style={{ display: 'flex', gap: '5px' }}>
+
+              {entitiesAndQuads.length > 0 && (
+                <div className="e-row">
+                  <label
+                    className="e-label"
+                    style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={sharedIgnoreScaling === 'on'}
+                      ref={(el) => {
+                        if (el) el.indeterminate = sharedIgnoreScaling === 'mixed';
+                      }}
+                      onChange={(e) => {
+                        applyToMulti((o: any) => {
+                          if (o instanceof Entity) o.ignoreScaling = e.target.checked;
+                        });
+                      }}
+                    />
+                    Disable Depth Scaling
+                  </label>
+                </div>
+              )}
+            </>
+          )}
+
+          {renderSection(
+            2,
+            'Visual',
+            'yellow',
+            <>
+              {entitiesAndQuads.length > 0 && (
+                renderOpacityBlurControls(
+                  sharedOpacity,
+                  sharedBlur,
+                  (nextOpacity) => {
+                    applyToMulti((o: any) => {
+                      if (o instanceof Entity) o.opacity = nextOpacity;
+                    });
+                  },
+                  (nextBlur) => {
+                    applyToMulti((o: any) => {
+                      if (o instanceof Entity) o.blur = nextBlur;
+                    });
+                  }
+                )
+              )}
+
+              {entitiesAndQuads.length > 0 && (
+                <div
+                  className="e-row"
+                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
+                >
+                  <div>
+                    <label className="e-label">Fill Color</label>
+                    <div style={{ display: 'flex', gap: '5px' }}>
+                      <input
+                        type="color"
+                        className="e-input"
+                        style={{ width: '32px', padding: 0 }}
+                        value={sharedColor === '' ? '#ffffff' : sharedColor}
+                        onChange={(e) => {
+                          const v = e.target.value;
+                          applyToMulti((o: any) => {
+                            if (o.color !== undefined) o.color = v;
+                          });
+                        }}
+                      />
+                      <input
+                        type="text"
+                        className="e-input"
+                        placeholder="mixed"
+                        value={sharedColor === '' ? '' : sharedColor}
+                        onChange={(e) => {
+                          const v = e.target.value;
+                          applyToMulti((o: any) => {
+                            if (o.color !== undefined) o.color = v;
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'end' }}>
+                    <div style={{ width: '100%' }}>
+                      <label className="e-label">Blend Mode</label>
+                      <Select
+                        value={sharedBlendMode === '' ? 'source-over' : sharedBlendMode}
+                        onChange={(value) => {
+                          applyToMulti((o: any) => {
+                            if (o instanceof Entity) o.blendMode = value as GlobalCompositeOperation;
+                          });
+                        }}
+                        options={[
+                          { value: 'source-over', label: 'Normal' },
+                          { value: 'multiply', label: 'Multiply' },
+                          { value: 'screen', label: 'Screen' },
+                          { value: 'overlay', label: 'Overlay' },
+                          { value: 'lighter', label: 'Add' },
+                          { value: 'difference', label: 'Diff' },
+                        ]}
+                        style={{ width: '100%' }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {quads.length > 0 && (
+                <div className="e-row">
+                  <label
+                    className="e-label"
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      color: sharedIsGrid === 'on' ? '#ffffff' : 'inherit',
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      style={{ marginRight: '5px' }}
+                      checked={sharedIsGrid === 'on'}
+                      ref={(el) => {
+                        if (el) el.indeterminate = sharedIsGrid === 'mixed';
+                      }}
+                      onChange={(e) => {
+                        applyToMulti((o: any) => {
+                          if ((o as any).type === 'Quad') (o as any).isGrid = e.target.checked;
+                        });
+                      }}
+                    />
+                    Retro Grid
+                  </label>
+                </div>
+              )}
+
+              {quads.length > 0 && sharedIsGrid !== 'off' && (
+                <>
+                  <div
+                    className="e-row"
+                    style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
+                  >
+                    <div>
+                      <label className="e-label">Grid X</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        placeholder="mixed"
+                        value={sharedGridX === '' ? '' : formatPanelNumber(sharedGridX)}
+                        onChange={(e) => {
+                          const v = parseInt(e.target.value);
+                          if (isNaN(v)) return;
+                          applyToMulti((o: any) => {
+                            if ((o as any).type === 'Quad') (o as any).gridLinesX = v;
+                          });
+                        }}
+                        min={1}
+                        max={50}
+                      />
+                    </div>
+                    <div>
+                      <label className="e-label">Grid Y</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        placeholder="mixed"
+                        value={sharedGridY === '' ? '' : formatPanelNumber(sharedGridY)}
+                        onChange={(e) => {
+                          const v = parseInt(e.target.value);
+                          if (isNaN(v)) return;
+                          applyToMulti((o: any) => {
+                            if ((o as any).type === 'Quad') (o as any).gridLinesY = v;
+                          });
+                        }}
+                        min={1}
+                        max={50}
+                      />
+                    </div>
+                    <div>
+                      <label className="e-label">Width</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        placeholder="mixed"
+                        value={sharedGridWidth === '' ? '' : formatPanelNumber(sharedGridWidth)}
+                        onChange={(e) => {
+                          const v = parseFloat(e.target.value);
+                          if (isNaN(v)) return;
+                          applyToMulti((o: any) => {
+                            if ((o as any).type === 'Quad') (o as any).lineWidth = v;
+                          });
+                        }}
+                        step={0.1}
+                        min={0.1}
+                        max={10}
+                      />
+                    </div>
+                  </div>
+                  <div className="e-row">
+                    <label className="e-label">Grid Color</label>
+                    <div style={{ display: 'flex', gap: '5px' }}>
+                      <input
+                        type="color"
+                        className="e-input"
+                        style={{ width: '32px', padding: 0 }}
+                        value={sharedGridColor === '' ? '#ffffff' : sharedGridColor}
+                        onChange={(e) => {
+                          const v = e.target.value;
+                          applyToMulti((o: any) => {
+                            if ((o as any).type === 'Quad') (o as any).gridColor = v;
+                          });
+                        }}
+                      />
+                      <input
+                        type="text"
+                        className="e-input"
+                        placeholder="mixed"
+                        value={sharedGridColor === '' ? '' : sharedGridColor}
+                        onChange={(e) => {
+                          const v = e.target.value;
+                          applyToMulti((o: any) => {
+                            if ((o as any).type === 'Quad') (o as any).gridColor = v;
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+
+          {renderSection(
+            6,
+            null,
+            'neutral',
+            <>
+              <div
+                className="e-row"
+                style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
+              >
+                <label
+                  className="e-label"
+                  title="Toggle lock hotkey: Alt-L"
+                  style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
+                >
                   <input
-                    type="color"
-                    className="e-input"
-                    style={{ width: '32px', padding: 0 }}
-                    value={sharedGridColor === '' ? '#ffffff' : sharedGridColor}
+                    type="checkbox"
+                    title="Alt-L"
+                    checked={sharedLocked === 'on'}
+                    ref={(el) => {
+                      if (el) el.indeterminate = sharedLocked === 'mixed';
+                    }}
                     onChange={(e) => {
-                      const v = e.target.value;
                       applyToMulti((o: any) => {
-                        if ((o as any).type === 'Quad') (o as any).gridColor = v;
+                        o.locked = e.target.checked;
                       });
                     }}
                   />
+                  Lock Object
+                </label>
+
+                <label
+                  className="e-label"
+                  title="Toggle disabled hotkey: Alt-D"
+                  style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
+                >
                   <input
-                    type="text"
-                    className="e-input"
-                    placeholder="mixed"
-                    value={sharedGridColor === '' ? '' : sharedGridColor}
+                    type="checkbox"
+                    title="Alt-D"
+                    checked={sharedDisabled === 'on'}
+                    ref={(el) => {
+                      if (el) el.indeterminate = sharedDisabled === 'mixed';
+                    }}
                     onChange={(e) => {
-                      const v = e.target.value;
                       applyToMulti((o: any) => {
-                        if ((o as any).type === 'Quad') (o as any).gridColor = v;
+                        o.disabled = e.target.checked;
                       });
                     }}
                   />
-                </div>
+                  Disabled
+                </label>
               </div>
             </>
           )}
-
-          <div
-            className="e-row"
-            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}
-          >
-            <div style={{ display: 'flex', alignItems: 'end' }}>
-              <label
-                className="e-label"
-                style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
-              >
-                <input
-                  type="checkbox"
-                  checked={sharedIgnoreScaling === 'on'}
-                  ref={(el) => {
-                    if (el) el.indeterminate = sharedIgnoreScaling === 'mixed';
-                  }}
-                  onChange={(e) => {
-                    applyToMulti((o: any) => {
-                      if (o instanceof Entity) o.ignoreScaling = e.target.checked;
-                    });
-                  }}
-                />
-                Disable Depth Scaling
-              </label>
-            </div>
-            <label
-              className="e-label"
-              style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
-            >
-              <input
-                type="checkbox"
-                checked={sharedLocked === 'on'}
-                ref={(el) => {
-                  if (el) el.indeterminate = sharedLocked === 'mixed';
-                }}
-                onChange={(e) => {
-                  applyToMulti((o: any) => {
-                    o.locked = e.target.checked;
-                  });
-                }}
-              />
-              Lock
-            </label>
-          </div>
-
-          <div className="e-row">
-            <label
-              className="e-label"
-              style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
-            >
-              <input
-                type="checkbox"
-                checked={sharedDisabled === 'on'}
-                ref={(el) => {
-                  if (el) el.indeterminate = sharedDisabled === 'mixed';
-                }}
-                onChange={(e) => {
-                  applyToMulti((o: any) => {
-                    o.disabled = e.target.checked;
-                  });
-                }}
-              />
-              Disabled
-            </label>
-          </div>
         </div>
       </div>
     );
@@ -763,6 +1391,16 @@ export const PropertiesPanel: React.FC = () => {
   const handleChange = (field: string, value: any, enforceNumber = false) => {
     if (!obj) return;
 
+    if (selectedObjectType !== 'SETTINGS' && game?.editor) {
+      const objectKey = selectedObjectType === 'SCENE'
+        ? `SCENE:${obj.id || ''}`
+        : `${selectedObjectType || 'Object'}:${obj.name || ''}`;
+      if (lastUndoObjectKeyRef.current !== objectKey) {
+        game.editor.saveUndoState();
+        lastUndoObjectKeyRef.current = objectKey;
+      }
+    }
+
     let finalVal = value;
     if (enforceNumber) {
       finalVal = parseFloat(value);
@@ -831,14 +1469,25 @@ export const PropertiesPanel: React.FC = () => {
     }
   };
 
+  const isEntityLike =
+    selectedObjectType === 'Entity' || selectedObjectType === 'Actor' || selectedObjectType === 'Static';
+  const isTriggerbox = selectedObjectType === 'Triggerbox';
+  const isWalkbox = selectedObjectType === 'Walkbox';
+  const isScene = selectedObjectType === 'SCENE';
+  const isSettings = selectedObjectType === 'SETTINGS';
+  const isObjectWithScriptEvents = !isSettings && !isScene && !isWalkbox && selectedObjectType !== 'MULTI';
+
   return (
     <div
+      ref={panelRef}
       id="editor-panel"
       className="editor-sidebar right"
       onMouseEnter={() => {
+        isPanelHoveredRef.current = true;
         if (game) game.isMouseOverUI = true;
       }}
       onMouseLeave={() => {
+        isPanelHoveredRef.current = false;
         if (game) game.isMouseOverUI = false;
       }}
       style={{ fontSize: `${12 * uiScale}px` }}
@@ -852,865 +1501,584 @@ export const PropertiesPanel: React.FC = () => {
         </button>
       </div>
 
-      <div className="editor-content">
-        {selectedObjectType !== 'SETTINGS' && (
-          <>
-            {/* Common: Name -> ID */}
-            <div className="e-row">
-              <label className="e-label">{selectedObjectType === 'SCENE' ? 'ID/File' : 'ID'}</label>
-              <input
-                type="text"
-                className="e-input"
-                value={selectedObjectType === 'SCENE' ? obj.id || '' : obj.name || ''}
-                onChange={(e) => {
-                  // Local update only
-                  const val = e.target.value;
-                  if (selectedObjectType === 'SCENE') obj.id = val;
-                  else obj.name = val;
-                  incrementObjectVersion();
-                }}
-                onBlur={(e) => {
-                  // Commit with Validation
-                  const rawVal = e.target.value;
-                  const finalVal = rawVal.trim();
-                  const field = selectedObjectType === 'SCENE' ? 'id' : 'name';
-
-                  // Validation (Only for Name/ID)
-                  let isValid = true;
-                  const scene = game?.sceneManager?.currentScene;
-
-                  if (selectedObjectType !== 'SCENE' && scene) {
-                    // Check duplicates
-                    // Check Entities
-                    const dupEntity = scene.entities.find(
-                      (ent) => ent.name === finalVal && ent !== game?.editor?.selectedObject
-                    );
-                    // Check Triggerboxes
-                    const dupTrigger = scene.triggerboxes
-                      ? scene.triggerboxes.find(
-                          (tb) => tb.name === finalVal && tb !== game?.editor?.selectedObject
-                        )
-                      : null;
-
-                    if (dupEntity || dupTrigger) {
-                      console.warn(`[PropertiesPanel] Duplicate Name '${finalVal}' rejected.`);
-                      // @ts-ignore
-                      if (game.showMessage) game.showMessage(`Name '${finalVal}' already exists!`);
-                      isValid = false;
-                    }
-                  }
-
-                  if (isValid) {
-                    handleChange(field, finalVal);
-                  } else {
-                    // Revert to original from real object
-                    let realObj: any = null;
-                    if (game?.editor) realObj = game.editor.selectedObject;
-
-                    if (realObj) {
-                      if (selectedObjectType === 'SCENE') obj.id = realObj.id;
-                      else obj.name = realObj.name;
-                      incrementObjectVersion();
-                    }
-                  }
-                }}
-              />
-            </div>
-            {supportsTextAsset && (
+      <div ref={contentRef} className="editor-content">
+        {!isSettings &&
+          renderSection(
+            0,
+            null,
+            'neutral',
+            <>
               <div className="e-row">
-                <label className="e-label">Title</label>
+                <label className="e-label">{isScene ? 'ID/File' : 'ID'}</label>
                 <input
                   type="text"
                   className="e-input"
-                  value={resolvedTitle}
-                  readOnly
-                  tabIndex={-1}
-                  onFocus={(e) => e.currentTarget.blur()}
-                  style={{ pointerEvents: 'none', color: '#888' }}
-                />
-                {textAssetPath && (
-                  <>
-                    <div style={{ display: 'flex', gap: '6px', marginTop: '4px' }}>
-                      <button className="e-btn" onClick={handleOpenTA}>
-                        {hasTextAsset ? 'Open TA' : 'Create TA'}
-                      </button>
-                      <button className="e-btn" onClick={handleReadTA} disabled={isReadingTA}>
-                        {isReadingTA ? 'Syncing...' : 'Sync TA'}
-                      </button>
-                      {hasTextAsset && (
-                        <button className="e-btn" onClick={handleDeleteTA}>
-                          Delete TA
-                        </button>
-                      )}
-                    </div>
-                    <div className="e-label" style={{ color: '#888', fontSize: '0.8em' }}>
-                      {textAssetPath}
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-          </>
-        )}
+                  value={isScene ? obj.id || '' : obj.name || ''}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (isScene) obj.id = val;
+                    else obj.name = val;
+                    incrementObjectVersion();
+                  }}
+                  onBlur={(e) => {
+                    const rawVal = e.target.value;
+                    const finalVal = rawVal.trim();
+                    const field = isScene ? 'id' : 'name';
+
+                    let isValid = true;
+                    const scene = game?.sceneManager?.currentScene;
+
+                    if (!isScene && scene) {
+                      const dupEntity = scene.entities.find(
+                        (ent) => ent.name === finalVal && ent !== game?.editor?.selectedObject
+                      );
+                      const dupTrigger = scene.triggerboxes
+                        ? scene.triggerboxes.find(
+                            (tb) => tb.name === finalVal && tb !== game?.editor?.selectedObject
+                          )
+                        : null;
+
+                      if (dupEntity || dupTrigger) {
+                        console.warn(`[PropertiesPanel] Duplicate Name '${finalVal}' rejected.`);
+                        // @ts-ignore
+                        if (game.showMessage) game.showMessage(`Name '${finalVal}' already exists!`);
+                        isValid = false;
+                      }
+                    }
 
-        {selectedObjectType !== 'SETTINGS' && selectedObjectType !== 'SCENE' && (
-          <div className="e-row">
-            <label className="e-label">Group #ID</label>
-            <input
-              type="text"
-              className="e-input"
-              value={obj.groupID || ''}
-              onChange={(e) => {
-                const val = e.target.value;
-                // Auto-format: Ensure every token starts with #
-                // 1. Split by comma
-                const tokens = val.split(',');
-                const newTokens = tokens.map((t) => {
-                  // Don't auto-add to the very last token if it's empty (user just typed comma)
-                  if (t.length === 0) return '';
-
-                  let clean = t;
-                  // If this is a new char entry (not just backspace), check prefix
-                  const trimmed = t.trimStart();
-                  if (trimmed.length > 0 && !trimmed.startsWith('#')) {
-                    // Find where the white space ends to insert #
-                    const firstCharIdx = t.length - trimmed.length;
-                    clean = t.substring(0, firstCharIdx) + '#' + trimmed;
-                  }
-                  return clean;
-                });
+                    if (isValid) {
+                      handleChange(field, finalVal);
+                    } else {
+                      let realObj: any = null;
+                      if (game?.editor) realObj = game.editor.selectedObject;
 
-                handleChange('groupID', newTokens.join(','));
-              }}
-            />
-          </div>
-        )}
+                      if (realObj) {
+                        if (isScene) obj.id = realObj.id;
+                        else obj.name = realObj.name;
+                        incrementObjectVersion();
+                      }
+                    }
+                  }}
+                />
+              </div>
 
-        {/* Entity Properties (Static, Actor, Entity) - Moved & Compacted */}
-        {(selectedObjectType === 'Entity' ||
-          selectedObjectType === 'Actor' ||
-          selectedObjectType === 'Static') && (
-          <>
-            {/* Transform: X, Y, W, H */}
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '5px' }}
-            >
-              <div>
-                <label className="e-label">X</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.x ?? 0}
-                  onChange={(e) => handleChange('x', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">Y</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.y ?? 0}
-                  onChange={(e) => handleChange('y', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">W</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.width ?? 0}
-                  onChange={(e) => handleChange('width', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">H</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.height ?? 0}
-                  onChange={(e) => handleChange('height', e.target.value, true)}
-                />
-              </div>
-            </div>
-
-            {/* Scale, Layer, Parallax */}
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
-            >
-              <div>
-                <label className="e-label">Scale</label>
-                <input
-                  type="number"
-                  step="0.1"
-                  className="e-input"
-                  value={obj.modelScale || 1}
-                  onChange={(e) => handleChange('modelScale', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">Layer</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.layer || 0}
-                  onChange={(e) => handleChange('layer', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">Parallax</label>
-                <input
-                  type="number"
-                  step="0.1"
-                  className="e-input"
-                  value={obj.parallax ?? 1}
-                  onChange={(e) => {
-                    const val = parseFloat(e.target.value);
-                    const newP = isNaN(val) ? 1.0 : val;
-                    const oldP = obj.parallax !== undefined ? obj.parallax : 1.0;
-
-                    // Auto-Correct Position to prevent visual jump
-                    // NewPos = OldPos + Cam * (NewP - OldP)
-                    const scene = game.sceneManager.currentScene;
-                    if (scene && game.editor.selectedObject) {
-                      const camX = scene.camera.x;
-                      const camY = scene.camera.y;
-
-                      const dx = camX * (newP - oldP);
-                      const dy = camY * (newP - oldP);
-
-                      // Apply to Local
-                      obj.x += dx;
-                      obj.y += dy;
-
-                      // Apply to Real (Must do this manually as handleChange only does the targeting field)
-                      if (
-                        game.editor &&
-                        game.editor.selectedObject &&
-                        'x' in game.editor.selectedObject
-                      ) {
-                        (game.editor.selectedObject as any).x = obj.x;
-                        (game.editor.selectedObject as any).y = obj.y;
-                      }
-                    }
-
-                    handleChange('parallax', newP, true);
-                  }}
-                />
-              </div>
-            </div>
-
-            {(selectedObjectType === 'Entity' ||
-              selectedObjectType === 'Actor' ||
-              selectedObjectType === 'Static') && (
-              <div
-                className="e-row"
-                style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
-              >
-                <div>
-                  <label className="e-label">Parent</label>
-                  <Select
-                    value={obj.spatial?.parentNodeId || ''}
-                    onChange={(value) => {
-                      obj.spatial = {
-                        ...(obj.spatial || {}),
-                        parentNodeId: value || null,
-                        relation: value ? obj.spatial?.relation || 'in' : null,
-                      };
-                      incrementObjectVersion();
-                    }}
-                    options={getSceneSpatialParentOptions()}
-                    style={{ width: '100%' }}
-                  />
-                </div>
-                <div>
-                  <label className="e-label">Relation</label>
-                  <Select
-                    value={obj.spatial?.relation || ''}
-                    onChange={(value) => {
-                      obj.spatial = {
-                        ...(obj.spatial || {}),
-                        parentNodeId: obj.spatial?.parentNodeId || null,
-                        relation: value || (obj.spatial?.parentNodeId ? 'in' : null),
-                      };
-                      incrementObjectVersion();
-                    }}
-                    options={getSpatialRelationOptions(!!obj.spatial?.parentNodeId)}
-                    style={{ width: '100%' }}
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Color & Blend Mode */}
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '5px' }}
-            >
-              <div>
-                <label className="e-label">Color</label>
-                <div style={{ display: 'flex', gap: '5px' }}>
-                  <input
-                    type="color"
-                    className="e-input"
-                    style={{
-                      width: '30px',
-                      padding: 0,
-                      height: '20px',
-                      cursor: 'pointer',
-                      border: 'none',
-                    }}
-                    value={obj.color || '#AAAAAA'}
-                    onChange={(e) => handleChange('color', e.target.value)}
-                  />
-                  <input
-                    type="text"
-                    className="e-input"
-                    style={{ flex: 1, minWidth: 0 }}
-                    value={obj.color || ''}
-                    onChange={(e) => handleChange('color', e.target.value)}
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="e-label">Blend Mode</label>
-                <Select
-                  value={obj.blendMode || 'source-over'}
-                  onChange={(value) => handleChange('blendMode', value)}
-                  options={[
-                    { value: 'source-over', label: 'Normal' },
-                    { value: 'multiply', label: 'Multiply' },
-                    { value: 'screen', label: 'Screen' },
-                    { value: 'overlay', label: 'Overlay' },
-                    { value: 'lighter', label: 'Add' },
-                    { value: 'difference', label: 'Diff' },
-                  ]}
-                  style={{ width: '100%' }}
-                />
-              </div>
-            </div>
-
-            {/* Opacity & Blur */}
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
-            >
-              <div>
-                <label className="e-label">
-                  Opacity ({Math.round((obj.opacity !== undefined ? obj.opacity : 1.0) * 100)}%)
-                </label>
-                <input
-                  type="range"
-                  className="e-input"
-                  style={{ width: '100%' }}
-                  min="0"
-                  max="1"
-                  step="0.05"
-                  value={obj.opacity !== undefined ? obj.opacity : 1.0}
-                  onChange={(e) => handleChange('opacity', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">Blur ({obj.blur || 0}px)</label>
-                <input
-                  type="range"
-                  className="e-input"
-                  style={{ width: '100%', direction: 'ltr' }}
-                  min="0"
-                  max="50"
-                  step="1"
-                  value={50 - (obj.blur || 0)}
-                  onChange={(e) => handleChange('blur', 50 - parseInt(e.target.value))}
-                />
-              </div>
-            </div>
-
-            {/* Sprite */}
-            <div className="e-row">
-              <label className="e-label">Sprite</label>
-              <div style={{ display: 'flex', gap: '5px' }}>
-                <input
-                  type="text"
-                  className="e-input"
-                  style={{ flex: 1 }}
-                  value={obj.spriteName || ''}
-                  onChange={(e) => handleChange('spriteName', e.target.value)}
-                />
-                <button
-                  className="e-btn"
-                  onClick={() =>
-                    game.openFileBrowser('load', 'public/sprites', (f) =>
-                      handleChange('spriteName', f)
-                    )
-                  }
-                >
-                  ...
-                </button>
-              </div>
-            </div>
-
-            {/* Colliders + Flags */}
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
-            >
-              <div>
-                <label className="e-label">Collider W</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.colliderWidth ?? 0}
-                  onChange={(e) => handleChange('colliderWidth', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">Collider H</label>
-                <input
-                  type="number"
-                  className="e-input"
-                  value={obj.colliderHeight ?? 0}
-                  onChange={(e) => handleChange('colliderHeight', e.target.value, true)}
-                />
-              </div>
-            </div>
-
-            <div className="e-row">
-              <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.ignoreScaling}
-                  onChange={(e) => handleChange('ignoreScaling', e.target.checked)}
-                />
-                Disable Depth Scaling
-              </label>
-            </div>
-
-            <div className="e-row">
-              <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.locked}
-                  onChange={(e) => handleChange('locked', e.target.checked)}
-                />
-                Lock Object
-              </label>
-            </div>
-            <div className="e-row">
-              <label
-                className="e-label"
-                style={{ display: 'flex', alignItems: 'center', color: '#faa' }}
-              >
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.disabled}
-                  onChange={(e) => handleChange('disabled', e.target.checked)}
-                />
-                Disabled (Hidden)
-              </label>
-            </div>
-
-            {/* Interactions */}
-            <div
-              className="e-row"
-              style={{ marginTop: '10px', borderTop: '1px solid #444', paddingTop: '5px' }}
-            >
-              <div
-                className="e-label"
-                style={{
-                  color: '#aaf',
-                  fontWeight: 'bold',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <span>SCRIPT EVENTS</span>
-                <Select
-                  value=""
-                  placeholder="+ ADD"
-                  onChange={(value) => {
-                    const verb = value;
-                    if (!verb) return;
-                    if (!obj.interactions) obj.interactions = {};
-                    if (!obj.interactions[verb]) {
-                      obj.interactions[verb] = '';
-                      // Sync to real object
-                      if (game.editor.selectedObject) {
-                        if (!(game.editor.selectedObject as any).interactions)
-                          (game.editor.selectedObject as any).interactions = {};
-                        (game.editor.selectedObject as any).interactions[verb] = '';
-                      }
-                      incrementObjectVersion();
-                    }
-                  }}
-                  options={[
-                    { value: 'look', label: 'Look' },
-                    { value: 'use', label: 'Use' },
-                    { value: 'talk', label: 'Talk' },
-                    { value: 'pickup', label: 'Pickup' },
-                  ]}
-                  style={{ width: '80px', fontSize: '0.85em' }}
-                />
-              </div>
-
-              {obj.interactions &&
-                Object.keys(obj.interactions).map((verb) => (
-                  <div
-                    key={verb}
-                    style={{ display: 'flex', alignItems: 'center', marginTop: '2px' }}
-                  >
-                    <div style={{ width: '40px', fontSize: '0.85em', color: '#ccc' }}>
-                      {verb.toUpperCase()}
-                    </div>
-                    <input
-                      type="text"
-                      className="e-input"
-                      style={{ flex: 1, fontSize: '0.85em' }}
-                      placeholder="Script ID"
-                      value={obj.interactions[verb]}
-                      onChange={(e) => {
-                        obj.interactions[verb] = e.target.value;
-                        // Sync to real object
-                        if (game.editor.selectedObject) {
-                          (game.editor.selectedObject as any).interactions[verb] = e.target.value;
-                        }
-                        incrementObjectVersion();
-                      }}
-                    />
-                    <button
-                      className="e-btn e-btn-red"
-                      style={{ marginLeft: '2px', padding: '0 4px', fontSize: '0.85em' }}
-                      onClick={() => {
-                        delete obj.interactions[verb];
-                        // Sync to real object
-                        if (game.editor.selectedObject) {
-                          delete (game.editor.selectedObject as any).interactions[verb];
-                        }
-                        incrementObjectVersion();
-                      }}
-                    >
-                      x
-                    </button>
-                  </div>
-                ))}
-            </div>
-          </>
-        )}
-
-        {/* Walkbox/Triggerbox Properties */}
-        {(selectedObjectType === 'Walkbox' || selectedObjectType === 'Triggerbox') && (
-          <div className="e-row">
-            {selectedObjectType === 'Walkbox' && (
-              <div className="e-row">
-                <label className="e-label">Mode</label>
-                <Select
-                  value={obj.mode || 'Invert'}
-                  onChange={(value) => handleChange('mode', value)}
-                  options={[
-                    { value: 'Invert', label: 'Invert (Standard)' },
-                    { value: 'Add', label: 'Add (Bridge)' },
-                    { value: 'Subtract', label: 'Subtract (Hole)' },
-                  ]}
-                  style={{ width: '100%', marginBottom: '5px' }}
-                />
-              </div>
-            )}
-            <button
-              className="e-btn e-btn-yellow"
-              style={{ width: '100%', marginBottom: '5px' }}
-              onClick={(e) => {
-                if (confirm('Redraw polygon? Current points will be cleared.')) {
-                  // Clean Redraw Logic: Editor handles clearing and mode setting
-                  game.editor.redrawSelected();
-                  // Blur the button so hitting Enter doesn't re-trigger it
-                  (e.target as HTMLElement).blur();
-                }
-              }}
-            >
-              Redraw Polygon
-            </button>
-            <div className="e-label">
-              {mode && mode.includes('DRAW')
-                ? 'Click to add points. Press ENTER to finish. Hold Shift for 22.5° snap.'
-                : 'To edit, drag vertices on screen. Hold Shift for 22.5° snap.'}
-            </div>
+              {supportsTextAsset && (
+                <div className="e-row">
+                  <label className="e-label">Title</label>
+                  <input
+                    type="text"
+                    className="e-input"
+                    value={resolvedTitle}
+                    readOnly
+                    tabIndex={-1}
+                    onFocus={(e) => e.currentTarget.blur()}
+                    style={{ pointerEvents: 'none' }}
+                  />
+                  {textAssetPath && (
+                    <>
+                      <div style={{ display: 'flex', gap: '6px', marginTop: '4px', flexWrap: 'wrap' }}>
+                        <button className="e-btn" onClick={handleOpenTA}>
+                          {hasTextAsset ? 'Open TA' : 'Create TA'}
+                        </button>
+                        <button className="e-btn" onClick={handleReadTA} disabled={isReadingTA}>
+                          {isReadingTA ? 'Syncing...' : 'Sync TA'}
+                        </button>
+                        {hasTextAsset && (
+                          <button className="e-btn" onClick={handleDeleteTA}>
+                            Delete TA
+                          </button>
+                        )}
+                      </div>
+                      <div className="e-label ui-text-muted ui-text-small">{textAssetPath}</div>
+                    </>
+                  )}
+                </div>
+              )}
 
-            {selectedObjectType === 'Triggerbox' && (
-              <>
+              {!isScene && !isSettings && (
                 <div className="e-row">
-                  <label className="e-label">Layer</label>
+                  <label className="e-label">Group #ID</label>
                   <input
-                    type="number"
+                    type="text"
                     className="e-input"
-                    value={obj.layer || 0}
-                    onChange={(e) => handleChange('layer', e.target.value, true)}
+                    value={obj.groupID || ''}
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      const tokens = val.split(',');
+                      const newTokens = tokens.map((t) => {
+                        if (t.length === 0) return '';
+
+                        let clean = t;
+                        const trimmed = t.trimStart();
+                        if (trimmed.length > 0 && !trimmed.startsWith('#')) {
+                          const firstCharIdx = t.length - trimmed.length;
+                          clean = t.substring(0, firstCharIdx) + '#' + trimmed;
+                        }
+                        return clean;
+                      });
+
+                      handleChange('groupID', newTokens.join(','));
+                    }}
                   />
                 </div>
+              )}
+
+              {!isScene && !isSettings && !isWalkbox && (
                 <div
                   className="e-row"
-                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
+                  style={{
+                    display: obj.spatial?.parentNodeId ? 'grid' : 'block',
+                    gridTemplateColumns: obj.spatial?.parentNodeId ? '1fr 1fr' : undefined,
+                    gap: obj.spatial?.parentNodeId ? '5px' : undefined,
+                  }}
                 >
                   <div>
                     <label className="e-label">Parent</label>
                     <Select
+                      className="parent-id-select"
                       value={obj.spatial?.parentNodeId || ''}
                       onChange={(value) => {
+                        game.editor.saveUndoState();
                         obj.spatial = {
                           ...(obj.spatial || {}),
                           parentNodeId: value || null,
                           relation: value ? obj.spatial?.relation || 'in' : null,
                         };
                         incrementObjectVersion();
+                        incrementHierarchyVersion();
                       }}
                       options={getSceneSpatialParentOptions()}
                       style={{ width: '100%' }}
                     />
                   </div>
+                  {obj.spatial?.parentNodeId && (
+                    <div>
+                      <label className="e-label">Relation</label>
+                      <Select
+                        value={obj.spatial?.relation || 'in'}
+                        onChange={(value) => {
+                          game.editor.saveUndoState();
+                          obj.spatial = {
+                            ...(obj.spatial || {}),
+                            parentNodeId: obj.spatial?.parentNodeId || null,
+                            relation: value || (obj.spatial?.parentNodeId ? 'in' : null),
+                          };
+                          incrementObjectVersion();
+                          incrementHierarchyVersion();
+                        }}
+                        options={getSpatialRelationOptions(true)}
+                        style={{ width: '100%' }}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+
+        {isEntityLike && (
+          <>
+            {renderSection(
+              1,
+              'Transform',
+              'blue',
+              <>
+                <div
+                  className="e-row"
+                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '5px' }}
+                >
+                  <div>
+                    <label className="e-label">X</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.x ?? 0)}
+                      onChange={(e) => handleChange('x', e.target.value, true)}
+                    />
+                  </div>
                   <div>
-                    <label className="e-label">Relation</label>
-                    <Select
-                      value={obj.spatial?.parentNodeId ? obj.spatial?.relation || 'in' : obj.spatial?.relation || ''}
-                      onChange={(value) => {
-                        obj.spatial = {
-                          ...(obj.spatial || {}),
-                          parentNodeId: obj.spatial?.parentNodeId || null,
-                          relation: value || (obj.spatial?.parentNodeId ? 'in' : null),
-                        };
-                        incrementObjectVersion();
+                    <label className="e-label">Y</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.y ?? 0)}
+                      onChange={(e) => handleChange('y', e.target.value, true)}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">H</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.height ?? 0)}
+                      onChange={(e) => handleChange('height', e.target.value, true)}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">W</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.width ?? 0)}
+                      onChange={(e) => handleChange('width', e.target.value, true)}
+                    />
+                  </div>
+                </div>
+
+                <div
+                  className="e-row"
+                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
+                >
+                  <div>
+                    <label className="e-label">Scale</label>
+                    <input
+                      type="number"
+                      step="0.1"
+                      className="e-input"
+                      value={formatPanelNumber(obj.modelScale || 1)}
+                      onChange={(e) => handleChange('modelScale', e.target.value, true)}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">Layer</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.layer || 0)}
+                      onChange={(e) => handleChange('layer', e.target.value, true)}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">Parallax</label>
+                    <input
+                      type="number"
+                      step="0.1"
+                      className="e-input"
+                      value={formatPanelNumber(obj.parallax ?? 1)}
+                      onChange={(e) => {
+                        const val = parseFloat(e.target.value);
+                        const newP = isNaN(val) ? 1.0 : val;
+                        const oldP = obj.parallax !== undefined ? obj.parallax : 1.0;
+                        const scene = game.sceneManager.currentScene;
+                        if (scene && game.editor.selectedObject) {
+                          const camX = scene.camera.x;
+                          const camY = scene.camera.y;
+                          obj.x += camX * (newP - oldP);
+                          obj.y += camY * (newP - oldP);
+                          if (game.editor && game.editor.selectedObject && 'x' in game.editor.selectedObject) {
+                            (game.editor.selectedObject as any).x = obj.x;
+                            (game.editor.selectedObject as any).y = obj.y;
+                          }
+                        }
+                        handleChange('parallax', newP, true);
                       }}
-                      options={getSpatialRelationOptions(!!obj.spatial?.parentNodeId)}
+                    />
+                  </div>
+                </div>
+
+                <div
+                  className="e-row"
+                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
+                >
+                  <div>
+                    <label className="e-label">Collider H</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.colliderHeight ?? 0)}
+                      onChange={(e) => handleChange('colliderHeight', e.target.value, true)}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">Collider W</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.colliderWidth ?? 0)}
+                      onChange={(e) => handleChange('colliderWidth', e.target.value, true)}
+                    />
+                  </div>
+                </div>
+
+                <div className="e-row">
+                  <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
+                    <input
+                      type="checkbox"
+                      style={{ marginRight: '5px' }}
+                      checked={!!obj.ignoreScaling}
+                      onChange={(e) => handleChange('ignoreScaling', e.target.checked)}
+                    />
+                    Disable Depth-scaling
+                  </label>
+                </div>
+              </>
+            )}
+
+            {renderSection(
+              2,
+              'Visual',
+              'yellow',
+              <>
+                <div
+                  className="e-row"
+                  style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '5px' }}
+                >
+                  <div>
+                    <label className="e-label">Fill Color</label>
+                    <div style={{ display: 'flex', gap: '5px' }}>
+                      <input
+                        type="color"
+                        className="e-input"
+                        style={{ width: '30px', padding: 0, height: '20px', cursor: 'pointer', border: 'none' }}
+                        value={obj.color || '#AAAAAA'}
+                        onChange={(e) => handleChange('color', e.target.value)}
+                      />
+                      <input
+                        type="text"
+                        className="e-input"
+                        style={{ flex: 1, minWidth: 0 }}
+                        value={obj.color || ''}
+                        onChange={(e) => handleChange('color', e.target.value)}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="e-label">Blend Mode</label>
+                    <Select
+                      value={obj.blendMode || 'source-over'}
+                      onChange={(value) => handleChange('blendMode', value)}
+                      options={[
+                        { value: 'source-over', label: 'Normal' },
+                        { value: 'multiply', label: 'Multiply' },
+                        { value: 'screen', label: 'Screen' },
+                        { value: 'overlay', label: 'Overlay' },
+                        { value: 'lighter', label: 'Add' },
+                        { value: 'difference', label: 'Diff' },
+                      ]}
                       style={{ width: '100%' }}
                     />
                   </div>
                 </div>
+
+                {renderOpacityBlurControls(
+                  obj.opacity !== undefined ? obj.opacity : 1.0,
+                  obj.blur || 0,
+                  (nextOpacity) => handleChange('opacity', nextOpacity, true),
+                  (nextBlur) => handleChange('blur', nextBlur)
+                )}
+
+                <div className="e-row">
+                  <label className="e-label">Sprite</label>
+                  <div style={{ display: 'flex', gap: '5px' }}>
+                    <input
+                      type="text"
+                      className="e-input"
+                      style={{ flex: 1 }}
+                      value={obj.spriteName || ''}
+                      onChange={(e) => handleChange('spriteName', e.target.value)}
+                    />
+                    <button
+                      className="e-btn"
+                      onClick={() =>
+                        game.openFileBrowser('load', 'public/sprites', (f) => handleChange('spriteName', f))
+                      }
+                    >
+                      ...
+                    </button>
+                  </div>
+                </div>
               </>
             )}
 
-            <div className="e-row">
-              <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.locked}
-                  onChange={(e) => handleChange('locked', e.target.checked)}
-                />
-                Lock Object (Prevent Mouse Edit)
-              </label>
-            </div>
-            <div className="e-row">
-              <label
-                className="e-label"
-                style={{ display: 'flex', alignItems: 'center', color: '#faa' }}
-              >
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.disabled}
-                  onChange={(e) => handleChange('disabled', e.target.checked)}
-                />
-                Disabled (Hidden in Game)
-              </label>
-            </div>
-          </div>
+          </>
         )}
 
-        {/* Quad Properties */}
-        {selectedObjectType === 'Quad' && (
+        {selectedObjectType === 'Walkbox' && (
           <div className="e-row">
-            {/* Layer */}
             <div className="e-row">
-              <label className="e-label">Layer</label>
-              <input
-                type="number"
-                className="e-input"
-                value={obj.layer || 0}
-                onChange={(e) => handleChange('layer', e.target.value, true)}
-              />
-            </div>
-
-            {/* Opacity / Blur */}
-            <div
-              className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
-            >
-              <div>
-                <label className="e-label">
-                  Opacity ({Math.round((obj.opacity !== undefined ? obj.opacity : 1.0) * 100)}%)
-                </label>
-                <input
-                  type="range"
-                  className="e-input"
-                  style={{ width: '100%' }}
-                  min="0"
-                  max="1"
-                  step="0.05"
-                  value={obj.opacity !== undefined ? obj.opacity : 1.0}
-                  onChange={(e) => handleChange('opacity', e.target.value, true)}
-                />
-              </div>
-              <div>
-                <label className="e-label">Blur ({obj.blur || 0}px)</label>
-                <input
-                  type="range"
-                  className="e-input"
-                  style={{ width: '100%', direction: 'ltr' }}
-                  min="0"
-                  max="50"
-                  step="1"
-                  value={50 - (obj.blur || 0)}
-                  onChange={(e) => handleChange('blur', 50 - parseInt(e.target.value))}
-                />
-              </div>
-            </div>
-
-            {/* Fill Color */}
-            <div className="e-row">
-              <label
-                className="e-label"
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  marginBottom: '4px',
-                  color: obj.filled !== false ? '#ffffff' : 'inherit',
-                }}
-              >
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={obj.filled !== false}
-                  onChange={(e) => handleChange('filled', e.target.checked)}
-                />
-                Fill Color
-              </label>
-              {obj.filled !== false && (
-                <div style={{ display: 'flex', gap: '5px' }}>
-                  <input
-                    type="color"
-                    className="e-input"
-                    style={{ width: '30px', padding: 0, height: '20px' }}
-                    value={obj.color || '#888888'}
-                    onChange={(e) => handleChange('color', e.target.value)}
-                  />
-                  <input
-                    type="text"
-                    className="e-input"
-                    style={{ flex: 1 }}
-                    value={obj.color || ''}
-                    onChange={(e) => handleChange('color', e.target.value)}
-                  />
-                </div>
-              )}
+              <label className="e-label">Mode</label>
+              <Select
+                value={obj.mode || 'Invert'}
+                onChange={(value) => handleChange('mode', value)}
+                options={[
+                  { value: 'Invert', label: 'Invert (Standard)' },
+                  { value: 'Add', label: 'Add (Bridge)' },
+                  { value: 'Subtract', label: 'Subtract (Hole)' },
+                ]}
+                style={{ width: '100%', marginBottom: '5px' }}
+              />
             </div>
-
-            {/* Retro Grid */}
-            <div className="e-row">
-              <label
-                className="e-label"
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  color: obj.isGrid ? '#ffffff' : 'inherit',
-                }}
-              >
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={obj.isGrid || false}
-                  onChange={(e) => handleChange('isGrid', e.target.checked)}
-                />
-                Retro Grid
-              </label>
+            <button
+              className="e-btn e-btn-yellow"
+              style={{ width: '100%', marginBottom: '5px' }}
+              onClick={(e) => {
+                if (confirm('Redraw polygon? Current points will be cleared.')) {
+                  game.editor.redrawSelected();
+                  (e.target as HTMLElement).blur();
+                }
+              }}
+            >
+              Redraw Polygon
+            </button>
+            <div className="e-label">
+              {mode && mode.includes('DRAW')
+                ? 'Click to add points. Press ENTER to finish. Hold Shift for 22.5° snap.'
+                : 'To edit, drag vertices on screen. Hold Shift for 22.5° snap.'}
             </div>
+          </div>
+        )}
 
-            {obj.isGrid && (
+        {isTriggerbox && (
+          <>
+            {renderSection(
+              1,
+              'Transform',
+              'blue',
               <>
-                <div
-                  className="e-row"
-                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
-                >
+                <div className="e-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
                   <div>
-                    <label className="e-label">Grid X</label>
+                    <label className="e-label">X</label>
                     <input
                       type="number"
                       className="e-input"
-                      value={obj.gridLinesX ?? 5}
-                      onChange={(e) => handleChange('gridLinesX', parseInt(e.target.value))}
-                      min={1}
-                      max={50}
+                      value={formatPanelNumber(getPolyCentroid(obj.poly).x)}
+                      onChange={(e) => translatePolyTo(parseFloat(e.target.value) || 0, getPolyCentroid(obj.poly).y)}
                     />
                   </div>
                   <div>
-                    <label className="e-label">Grid Y</label>
+                    <label className="e-label">Y</label>
                     <input
                       type="number"
                       className="e-input"
-                      value={obj.gridLinesY ?? 5}
-                      onChange={(e) => handleChange('gridLinesY', parseInt(e.target.value))}
-                      min={1}
-                      max={50}
+                      value={formatPanelNumber(getPolyCentroid(obj.poly).y)}
+                      onChange={(e) => translatePolyTo(getPolyCentroid(obj.poly).x, parseFloat(e.target.value) || 0)}
                     />
                   </div>
+                </div>
+                <div className="e-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}>
                   <div>
-                    <label className="e-label">Width</label>
+                    <label className="e-label">Scale</label>
                     <input
                       type="number"
+                      step="0.01"
+                      min="0.01"
                       className="e-input"
-                      value={obj.lineWidth ?? 1.0}
-                      onChange={(e) => handleChange('lineWidth', parseFloat(e.target.value))}
-                      step={0.1}
-                      min={0.1}
-                      max={10}
+                      value={polygonScaleDraft}
+                      onChange={(e) => applyPolygonScaleDraft(e.target.value)}
                     />
                   </div>
-                </div>
-                <div className="e-row">
-                  <label className="e-label">Grid Color</label>
-                  <div style={{ display: 'flex', gap: '5px' }}>
+                  <div>
+                    <label className="e-label">Layer</label>
                     <input
-                      type="color"
+                      type="number"
                       className="e-input"
-                      style={{ width: '30px', padding: 0, height: '20px' }}
-                      value={obj.gridColor || '#ffffff'}
-                      onChange={(e) => handleChange('gridColor', e.target.value)}
+                      value={formatPanelNumber(obj.layer || 0)}
+                      onChange={(e) => handleChange('layer', e.target.value, true)}
                     />
+                  </div>
+                  <div>
+                    <label className="e-label">Parallax</label>
                     <input
-                      type="text"
+                      type="number"
+                      step="0.1"
                       className="e-input"
-                      style={{ flex: 1 }}
-                      value={obj.gridColor || ''}
-                      onChange={(e) => handleChange('gridColor', e.target.value)}
+                      value={formatPanelNumber(obj.parallax ?? 1)}
+                      onChange={(e) => {
+                        const val = parseFloat(e.target.value);
+                        const newP = isNaN(val) ? 1.0 : val;
+                        const oldP = obj.parallax !== undefined ? obj.parallax : 1.0;
+                        const scene = game.sceneManager.currentScene;
+                        if (scene && obj.poly?.length) {
+                          const dx = scene.camera.x * (newP - oldP);
+                          const dy = scene.camera.y * (newP - oldP);
+                          obj.poly = obj.poly.map((pt: any) => ({
+                            x: Math.round(pt.x + dx),
+                            y: Math.round(pt.y + dy),
+                          }));
+                        }
+                        handleChange('parallax', newP, true);
+                      }}
                     />
                   </div>
                 </div>
               </>
             )}
 
-            {/* Blend & Sort (Extras) */}
+          </>
+        )}
+
+        {/* Quad Properties */}
+        {selectedObjectType === 'Quad' && (
+          <div className="e-row">
+            <div ref={setSectionRef(1)} className="properties-section-block">
+              <div className="properties-section-header properties-section-blue">
+                <div className="properties-section-title">
+                  <span className="properties-section-number properties-section-blue">1</span>
+                  <span className="properties-section-label">Transform</span>
+                </div>
+              </div>
+            </div>
+
             <div
               className="e-row"
-              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
+              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
             >
               <div>
-                <label className="e-label">Blend Mode</label>
-                <Select
-                  value={obj.blendMode || 'source-over'}
-                  onChange={(value) => handleChange('blendMode', value)}
-                  options={[
-                    { value: 'source-over', label: 'Normal' },
-                    { value: 'multiply', label: 'Multiply' },
-                    { value: 'screen', label: 'Screen' },
-                    { value: 'overlay', label: 'Overlay' },
-                    { value: 'lighter', label: 'Add (Lighter)' },
-                    { value: 'difference', label: 'Difference' },
-                  ]}
-                  style={{ width: '100%' }}
+                <label className="e-label">X</label>
+                <input
+                  type="number"
+                  className="e-input"
+                  value={formatPanelNumber(getQuadCentroid(obj).x)}
+                  onChange={(e) => translateQuadTo(parseFloat(e.target.value) || 0, getQuadCentroid(obj).y)}
+                />
+              </div>
+              <div>
+                <label className="e-label">Y</label>
+                <input
+                  type="number"
+                  className="e-input"
+                  value={formatPanelNumber(getQuadCentroid(obj).y)}
+                  onChange={(e) => translateQuadTo(getQuadCentroid(obj).x, parseFloat(e.target.value) || 0)}
+                />
+              </div>
+              <div>
+                <label className="e-label">Layer</label>
+                <input
+                  type="number"
+                  className="e-input"
+                  value={formatPanelNumber(obj.layer || 0)}
+                  onChange={(e) => handleChange('layer', e.target.value, true)}
+                />
+              </div>
+            </div>
+
+            <div
+              className="e-row"
+              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
+            >
+              <div>
+                <label className="e-label">Parallax</label>
+                <input
+                  type="number"
+                  step="0.1"
+                  className="e-input"
+                  value={formatPanelNumber(obj.parallax ?? 1)}
+                  onChange={(e) => handleChange('parallax', e.target.value, true)}
+                />
+              </div>
+              <div>
+                <label className="e-label">Scale</label>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0.01"
+                  className="e-input"
+                  value={polygonScaleDraft}
+                  onChange={(e) => applyPolygonScaleDraft(e.target.value)}
                 />
               </div>
               <div>
-                <label className="e-label">Sort Mode</label>
+                <label className="e-label">Depth Sort mode</label>
                 <Select
                   value={obj.sortMode || 'ignore'}
                   onChange={(value) => handleChange('sortMode', value)}
@@ -1726,11 +2094,8 @@ export const PropertiesPanel: React.FC = () => {
               </div>
             </div>
 
-            <div
-              className="e-label"
-              style={{ marginTop: '5px', borderBottom: '1px solid #444', marginBottom: '5px' }}
-            >
-              VERTICES (X / Y / P)
+            <div className="e-label ui-text-accent-blue ui-font-bold" style={{ marginTop: '6px', marginBottom: '6px' }}>
+              Vertices
             </div>
             {obj.vertices &&
               obj.vertices.map((v: any, i: number) => {
@@ -1746,7 +2111,7 @@ export const PropertiesPanel: React.FC = () => {
                       border: isSelected ? '1px solid yellow' : '1px solid transparent',
                     }}
                   >
-                    <div style={{ fontSize: '0.75em', color: '#888', marginBottom: '2px' }}>
+                    <div className="ui-text-muted ui-text-tiny" style={{ marginBottom: '2px' }}>
                       Vertex {i}{' '}
                       {i === 0
                         ? '(TL)'
@@ -1786,18 +2151,13 @@ export const PropertiesPanel: React.FC = () => {
                             }}
                             onClick={() => {
                               const binding = v.binding;
-                              // Unbind Self (UI Copy)
                               delete v.binding;
                               incrementObjectVersion();
 
-                              // Sync to real object & Unbind Reverse
                               if (game.editor.selectedObject) {
                                 const sel = game.editor.selectedObject as any;
-
-                                // Unbind Self (Real)
                                 if (sel.vertices[i].binding) delete sel.vertices[i].binding;
 
-                                // Unbind Reverse (Real)
                                 if (binding && binding.type === 'vertex') {
                                   const scene = game.sceneManager.currentScene;
                                   if (scene) {
@@ -1809,7 +2169,6 @@ export const PropertiesPanel: React.FC = () => {
                                       const tIdx = binding.index;
                                       if (tIdx !== undefined && tQuad.vertices[tIdx]) {
                                         const tV = tQuad.vertices[tIdx];
-                                        // Check if target is bound back to US (Mutual)
                                         if (
                                           tV.binding &&
                                           tV.binding.type === 'vertex' &&
@@ -1837,13 +2196,11 @@ export const PropertiesPanel: React.FC = () => {
                         type="number"
                         className="e-input"
                         style={{ width: '33%' }}
-                        value={Math.round(v.x)}
+                        value={formatPanelNumber(v.x)}
                         onChange={(e) => {
                           const val = parseFloat(e.target.value);
                           if (v.x !== val) {
                             const diff = val - v.x;
-
-                            // Propagate to Group
                             const scene = game.sceneManager.currentScene;
                             if (scene && (game.editor.selectedObject as any).type === 'Quad') {
                               const group = QuadObject.getConnectedVertices(
@@ -1867,13 +2224,11 @@ export const PropertiesPanel: React.FC = () => {
                         type="number"
                         className="e-input"
                         style={{ width: '33%' }}
-                        value={Math.round(v.y)}
+                        value={formatPanelNumber(v.y)}
                         onChange={(e) => {
                           const val = parseFloat(e.target.value);
                           if (v.y !== val) {
                             const diff = val - v.y;
-
-                            // Propagate to Group
                             const scene = game.sceneManager.currentScene;
                             if (scene && (game.editor.selectedObject as any).type === 'Quad') {
                               const group = QuadObject.getConnectedVertices(
@@ -1898,7 +2253,7 @@ export const PropertiesPanel: React.FC = () => {
                         className="e-input"
                         style={{ width: '33%' }}
                         step="0.1"
-                        value={v.p}
+                        value={formatPanelNumber(v.p)}
                         onChange={(e) => {
                           const newP = parseFloat(e.target.value);
                           const oldP = v.p;
@@ -1913,17 +2268,13 @@ export const PropertiesPanel: React.FC = () => {
                             );
 
                             group.forEach((ref) => {
-                              // Auto-Correct Position to prevent visual jump
-                              // NewPos = OldPos + Cam * (NewP - OldP)
                               const camX = scene.camera.x;
                               const camY = scene.camera.y;
                               ref.v.x += camX * diffP;
                               ref.v.y += camY * diffP;
-
-                              ref.v.p = newP; // All adopt the new P? Yes, per "changes parallax together".
+                              ref.v.p = newP;
                             });
                           } else {
-                            // Single logic
                             if (scene) {
                               const camX = scene.camera.x;
                               const camY = scene.camera.y;
@@ -1939,35 +2290,167 @@ export const PropertiesPanel: React.FC = () => {
                       />
                     </div>
                   </div>
-                );
-              })}
+                );
+              })}
+
+            {/* Opacity / Blur */}
+            <div ref={setSectionRef(2)} className="properties-section-block">
+              <div className="properties-section-header properties-section-yellow">
+                <div className="properties-section-title">
+                  <span className="properties-section-number properties-section-yellow">2</span>
+                  <span className="properties-section-label">Visual</span>
+                </div>
+              </div>
+            </div>
+            {renderOpacityBlurControls(
+              obj.opacity !== undefined ? obj.opacity : 1.0,
+              obj.blur || 0,
+              (nextOpacity) => handleChange('opacity', nextOpacity, true),
+              (nextBlur) => handleChange('blur', nextBlur)
+            )}
+
+            {/* Fill Color */}
+            <div className="e-row">
+              <label
+                className="e-label"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  marginBottom: '4px',
+                  color: obj.filled !== false ? '#ffffff' : 'inherit',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  style={{ marginRight: '5px' }}
+                  checked={obj.filled !== false}
+                  onChange={(e) => handleChange('filled', e.target.checked)}
+                />
+                Fill Color
+              </label>
+              {obj.filled !== false && (
+                <div style={{ display: 'flex', gap: '5px' }}>
+                  <input
+                    type="color"
+                    className="e-input"
+                    style={{ width: '30px', padding: 0, height: '20px' }}
+                    value={obj.color || '#888888'}
+                    onChange={(e) => handleChange('color', e.target.value)}
+                  />
+                  <input
+                    type="text"
+                    className="e-input"
+                    style={{ flex: 1 }}
+                    value={obj.color || ''}
+                    onChange={(e) => handleChange('color', e.target.value)}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Retro Grid */}
+            <div className="e-row">
+              <label
+                className="e-label"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  color: obj.isGrid ? '#ffffff' : 'inherit',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  style={{ marginRight: '5px' }}
+                  checked={obj.isGrid || false}
+                  onChange={(e) => handleChange('isGrid', e.target.checked)}
+                />
+                Retro Grid
+              </label>
+            </div>
+
+            {obj.isGrid && (
+              <>
+                <div
+                  className="e-row"
+                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
+                >
+                  <div>
+                    <label className="e-label">Grid X</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.gridLinesX ?? 5)}
+                      onChange={(e) => handleChange('gridLinesX', parseInt(e.target.value))}
+                      min={1}
+                      max={50}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">Grid Y</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.gridLinesY ?? 5)}
+                      onChange={(e) => handleChange('gridLinesY', parseInt(e.target.value))}
+                      min={1}
+                      max={50}
+                    />
+                  </div>
+                  <div>
+                    <label className="e-label">Width</label>
+                    <input
+                      type="number"
+                      className="e-input"
+                      value={formatPanelNumber(obj.lineWidth ?? 1.0)}
+                      onChange={(e) => handleChange('lineWidth', parseFloat(e.target.value))}
+                      step={0.1}
+                      min={0.1}
+                      max={10}
+                    />
+                  </div>
+                </div>
+                <div className="e-row">
+                  <label className="e-label">Grid Color</label>
+                  <div style={{ display: 'flex', gap: '5px' }}>
+                    <input
+                      type="color"
+                      className="e-input"
+                      style={{ width: '30px', padding: 0, height: '20px' }}
+                      value={obj.gridColor || '#ffffff'}
+                      onChange={(e) => handleChange('gridColor', e.target.value)}
+                    />
+                    <input
+                      type="text"
+                      className="e-input"
+                      style={{ flex: 1 }}
+                      value={obj.gridColor || ''}
+                      onChange={(e) => handleChange('gridColor', e.target.value)}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
 
-            <div className="e-row">
-              <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.locked}
-                  onChange={(e) => handleChange('locked', e.target.checked)}
-                />
-                Lock Object
-              </label>
-            </div>
-            <div className="e-row">
-              <label
-                className="e-label"
-                style={{ display: 'flex', alignItems: 'center', color: '#faa' }}
-              >
-                <input
-                  type="checkbox"
-                  style={{ marginRight: '5px' }}
-                  checked={!!obj.disabled}
-                  onChange={(e) => handleChange('disabled', e.target.checked)}
+            {/* Blend */}
+            <div className="e-row" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '5px' }}>
+              <div>
+                <label className="e-label">Blend Mode</label>
+                <Select
+                  value={obj.blendMode || 'source-over'}
+                  onChange={(value) => handleChange('blendMode', value)}
+                  options={[
+                    { value: 'source-over', label: 'Normal' },
+                    { value: 'multiply', label: 'Multiply' },
+                    { value: 'screen', label: 'Screen' },
+                    { value: 'overlay', label: 'Overlay' },
+                    { value: 'lighter', label: 'Add (Lighter)' },
+                    { value: 'difference', label: 'Difference' },
+                  ]}
+                  style={{ width: '100%' }}
                 />
-                Disabled
-              </label>
+              </div>
             </div>
-            {/* Tips moved to bottom */}
+
           </div>
         )}
 
@@ -1977,22 +2460,15 @@ export const PropertiesPanel: React.FC = () => {
           selectedObjectType === 'Actor' ||
           selectedObjectType === 'Static' ||
           selectedObjectType === 'Quad') && (
-          <div
-            className="e-row"
-            style={{ borderTop: '1px solid #444', paddingTop: '5px', marginTop: '5px' }}
-          >
+          <div ref={setSectionRef(3)} className="properties-section-block">
             <div
-              className="e-label"
-              style={{
-                color: '#faa',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}
+              className="properties-section-header properties-section-red"
             >
-              <span>COMPONENTS</span>
-              <div>
+              <div className="properties-section-title">
+                <span className="properties-section-number properties-section-red">3</span>
+                <span className="properties-section-label">COMPONENTS</span>
+              </div>
+              <div className="properties-section-actions">
                 <Select
                   options={[
                     { value: 'Item', label: 'Item (Pickup)' },
@@ -2067,7 +2543,7 @@ export const PropertiesPanel: React.FC = () => {
                     incrementObjectVersion();
                     // No need to reset value as Select component handles it or we pass empty value
                   }}
-                  style={{ width: '100px', fontSize: '0.8em' }}
+                  style={{ width: '100%' }}
                   value=""
                 />
               </div>
@@ -2092,7 +2568,7 @@ export const PropertiesPanel: React.FC = () => {
                       marginBottom: '5px',
                     }}
                   >
-                    <span style={{ fontWeight: 'bold', color: '#fb8' }}>{comp.type}</span>
+                    <span className="ui-font-bold" style={{ color: '#fb8' }}>{comp.type}</span>
                     <button
                       className="e-btn e-btn-red"
                       style={{ padding: '0 5px' }}
@@ -2239,13 +2715,8 @@ export const PropertiesPanel: React.FC = () => {
                       </div>
                       <div className="e-row">
                         <label
-                          className="e-label"
-                          style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            color: '#aaf',
-                            fontSize: '10px',
-                          }}
+                          className="e-label ui-text-accent-blue ui-inline-flex-center"
+                          style={{ fontSize: '10px' }}
                         >
                           <input
                             type="checkbox"
@@ -2376,7 +2847,7 @@ export const PropertiesPanel: React.FC = () => {
                               { value: 'Add', label: 'Add (Walk Inside)' },
                               { value: 'Subtract', label: 'Subtract (Hole)' },
                             ]}
-                            style={{ width: '120px' }}
+                            style={{ width: '100%' }}
                           />
                         </div>
                       </div>
@@ -2594,7 +3065,7 @@ export const PropertiesPanel: React.FC = () => {
                           <input
                             type="number"
                             className="e-input"
-                            value={comp.offsetX || 0}
+                            value={formatPanelNumber(comp.offsetX || 0)}
                             onChange={(e) => {
                               comp.offsetX = parseFloat(e.target.value);
                               incrementObjectVersion();
@@ -2608,7 +3079,7 @@ export const PropertiesPanel: React.FC = () => {
                           <input
                             type="number"
                             className="e-input"
-                            value={comp.offsetY || 0}
+                            value={formatPanelNumber(comp.offsetY || 0)}
                             onChange={(e) => {
                               comp.offsetY = parseFloat(e.target.value);
                               incrementObjectVersion();
@@ -2637,38 +3108,20 @@ export const PropertiesPanel: React.FC = () => {
           </div>
         )}
 
-        {selectedObjectType === 'Quad' && (
-          <div
-            className="e-label"
-            style={{
-              marginTop: '10px',
-              fontSize: '10px',
-              color: '#666',
-              fontStyle: 'italic',
-              borderTop: '1px solid #444',
-              paddingTop: '5px',
-            }}
-          >
-            Drag VERTEX: Hold ALT to snap to vertices/grid.
-            <br />
-            Hold SHIFT for angle snap.
-          </div>
-        )}
-
         {selectedObjectType === 'Actor' && (
           <>
-            <div className="e-row" style={{ borderTop: '1px solid #444', paddingTop: '5px' }}>
-              <div className="e-label" style={{ color: '#aaf', fontWeight: 'bold' }}>
-                ACTOR PROPERTIES
+            <div ref={setSectionRef(4)} className="properties-section-block">
+              <div className="properties-section-header properties-section-blue">
+                <div className="properties-section-title">
+                  <span className="properties-section-number properties-section-blue">4</span>
+                  <span className="properties-section-label">ACTOR PROP.</span>
+                </div>
               </div>
             </div>
 
             {/* Is Player */}
             <div className="e-row">
-              <label
-                className="e-label"
-                style={{ display: 'flex', alignItems: 'center', color: '#aaf' }}
-              >
+              <label className="e-label ui-inline-flex-center ui-text-accent-blue">
                 <input
                   type="checkbox"
                   style={{ marginRight: '5px' }}
@@ -2710,7 +3163,7 @@ export const PropertiesPanel: React.FC = () => {
                 type="number"
                 step="0.01"
                 className="e-input"
-                value={obj.speed !== undefined ? obj.speed : 0.1}
+                value={formatPanelNumber(obj.speed !== undefined ? obj.speed : 0.1)}
                 onChange={(e) => handleChange('speed', e.target.value, true)}
               />
             </div>
@@ -2722,7 +3175,7 @@ export const PropertiesPanel: React.FC = () => {
                 type="number"
                 step="10"
                 className="e-input"
-                value={obj.animationSpeed !== undefined ? obj.animationSpeed : 150}
+                value={formatPanelNumber(obj.animationSpeed !== undefined ? obj.animationSpeed : 150)}
                 onChange={(e) => handleChange('animationSpeed', e.target.value, true)}
               />
             </div>
@@ -2730,13 +3183,8 @@ export const PropertiesPanel: React.FC = () => {
             {/* Animation Sets */}
             <div className="e-row" style={{ marginTop: '10px' }}>
               <div
-                className="e-label"
-                style={{
-                  color: '#aaf',
-                  fontWeight: 'bold',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                }}
+                className="e-label ui-text-accent-blue ui-font-bold"
+                style={{ display: 'flex', justifyContent: 'space-between' }}
               >
                 <span>ANIMATION SETS</span>
                 <button
@@ -2839,172 +3287,323 @@ export const PropertiesPanel: React.FC = () => {
                             incrementObjectVersion();
                           }
                         }}
-                      >
-                        x
-                      </button>
+                      >
+                        x
+                      </button>
+                    </div>
+
+                    {/* Directions */}
+                    {['down', 'up', 'left', 'right'].map((dir) => (
+                      <div
+                        key={dir}
+                        style={{
+                          display: 'flex',
+                          gap: '5px',
+                          marginBottom: '2px',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <div className="ui-text-muted ui-text-micro" style={{ width: '30px' }}>
+                          {dir.toUpperCase()}
+                        </div>
+                        <input
+                          type="text"
+                          className="e-input"
+                          style={{ flex: 1, fontSize: '10px', padding: '1px' }}
+                          value={set[dir] || ''}
+                          readOnly
+                        />
+                        <button
+                          className="e-btn"
+                          style={{ padding: '0 5px' }}
+                          onClick={() => {
+                            game.openFileBrowser('load', 'public/sprites', (f) => {
+                              set[dir] = f;
+                              // Sync to real object
+                              if (
+                                game.editor.selectedObject &&
+                                (game.editor.selectedObject as any).animSets
+                              ) {
+                                const realSet = (game.editor.selectedObject as any).animSets[setId];
+                                if (realSet) realSet[dir] = f;
+                                // If this is the current state, update sprite immediately
+                                (game.editor.selectedObject as any).updateSpriteForState();
+                              }
+                              incrementObjectVersion();
+                            });
+                          }}
+                        >
+                          ...
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                );
+              })}
+          </>
+        )}
+
+        {isObjectWithScriptEvents && (
+          <div ref={setSectionRef(5)} className="properties-section-block">
+            <div
+              className="properties-section-header properties-section-purple"
+            >
+              <div className="properties-section-title">
+                <span className="properties-section-number properties-section-purple">5</span>
+                <span className="properties-section-label">SCRIPT EVENTS</span>
+              </div>
+              <div className="properties-section-actions">
+                <Select
+                  value=""
+                  className="compact-action-select"
+                  placeholder="+ ADD"
+                  onChange={(value) => {
+                    const verb = value;
+                    if (!verb) return;
+                    if (!obj.interactions) obj.interactions = {};
+                    if (!obj.interactions[verb]) {
+                      obj.interactions[verb] = '';
+                      if (game.editor.selectedObject) {
+                        if (!(game.editor.selectedObject as any).interactions) {
+                          (game.editor.selectedObject as any).interactions = {};
+                        }
+                        (game.editor.selectedObject as any).interactions[verb] = '';
+                      }
+                      incrementObjectVersion();
+                    }
+                  }}
+                  options={[
+                    { value: 'look', label: 'Look' },
+                    { value: 'use', label: 'Use' },
+                    { value: 'talk', label: 'Talk' },
+                    { value: 'pickup', label: 'Pickup' },
+                  ]}
+                  style={{ width: '8em' }}
+                />
+              </div>
+            </div>
+
+            {obj.interactions &&
+              Object.keys(obj.interactions).map((verb) => (
+                <div key={verb} style={{ display: 'flex', alignItems: 'center', marginTop: '2px' }}>
+                  <div className="ui-text-light" style={{ width: '40px', fontSize: '0.85em' }}>
+                    {verb.toUpperCase()}
+                  </div>
+                  <input
+                    type="text"
+                    className="e-input"
+                    style={{ flex: 1, fontSize: '0.85em' }}
+                    placeholder="Script ID"
+                    value={obj.interactions[verb]}
+                    onChange={(e) => {
+                      obj.interactions[verb] = e.target.value;
+                      if (game.editor.selectedObject) {
+                        (game.editor.selectedObject as any).interactions[verb] = e.target.value;
+                      }
+                      incrementObjectVersion();
+                    }}
+                  />
+                  <button
+                    className="e-btn e-btn-red"
+                    style={{ marginLeft: '2px', padding: '0 4px', fontSize: '0.85em' }}
+                    onClick={() => {
+                      delete obj.interactions[verb];
+                      if (game.editor.selectedObject) {
+                        delete (game.editor.selectedObject as any).interactions[verb];
+                      }
+                      incrementObjectVersion();
+                    }}
+                  >
+                    x
+                  </button>
+                </div>
+              ))}
+          </div>
+        )}
+
+        {!isSettings && !isScene && !isWalkbox && (
+          <div ref={setSectionRef(6)} className="properties-section-block">
+            {isTriggerbox && (
+              <>
+                <button
+                  className="e-btn e-btn-yellow"
+                  style={{ width: '100%', marginBottom: '5px' }}
+                  onClick={(e) => {
+                    if (confirm('Redraw polygon? Current points will be cleared.')) {
+                      game.editor.redrawSelected();
+                      (e.target as HTMLElement).blur();
+                    }
+                  }}
+                >
+                  Redraw Polygon
+                </button>
+                <div className="e-label">
+                  {mode && mode.includes('DRAW')
+                    ? 'Click to add points. Press ENTER to finish. Hold Shift for 22.5° snap.'
+                    : 'To edit, drag vertices on screen. Hold Shift for 22.5° snap.'}
+                </div>
+              </>
+            )}
+
+            {selectedObjectType === 'Quad' && (
+              <div
+                className="e-label ui-text-dim"
+                style={{
+                  marginTop: '10px',
+                  fontSize: '10px',
+                  fontStyle: 'italic',
+                  paddingTop: '5px',
+                }}
+              >
+                Drag VERTEX: Hold ALT to snap to vertices/grid.
+                <br />
+                Hold SHIFT for angle snap.
+              </div>
+            )}
+
+            <div
+              className="e-row"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gap: '6px',
+                marginTop: isTriggerbox || selectedObjectType === 'Quad' ? '10px' : 0,
+              }}
+            >
+              <label
+                className="e-label"
+                title="Toggle lock hotkey: Alt-L"
+                style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
+              >
+                <input
+                  type="checkbox"
+                  title="Alt-L"
+                  checked={!!obj.locked}
+                  onChange={(e) => handleChange('locked', e.target.checked)}
+                />
+                Lock Object
+              </label>
+
+              <label
+                className="e-label"
+                title="Toggle disabled hotkey: Alt-D"
+                style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: 0 }}
+              >
+                <input
+                  type="checkbox"
+                  title="Alt-D"
+                  checked={!!obj.disabled}
+                  onChange={(e) => handleChange('disabled', e.target.checked)}
+                />
+                Disabled
+              </label>
+            </div>
+          </div>
+        )}
+
+        {/* SCENE Properties */}
+        {selectedObjectType === 'SCENE' && (
+          <>
+            {(obj.camera || obj.defaultCamera) &&
+              renderSection(
+                1,
+                'Camera',
+                'blue',
+                <>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}>
+                    <div>
+                      <label className="e-label">Cam X</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        value={obj.camera ? formatPanelNumber(obj.camera.x) : 0}
+                        onChange={(e) => {
+                          if (obj.camera) {
+                            obj.camera.x = parseFloat(e.target.value);
+                            incrementObjectVersion();
+                          }
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="e-label">Cam Y</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        value={obj.camera ? formatPanelNumber(obj.camera.y) : 0}
+                        onChange={(e) => {
+                          if (obj.camera) {
+                            obj.camera.y = parseFloat(e.target.value);
+                            incrementObjectVersion();
+                          }
+                        }}
+                      />
                     </div>
-
-                    {/* Directions */}
-                    {['down', 'up', 'left', 'right'].map((dir) => (
-                      <div
-                        key={dir}
-                        style={{
-                          display: 'flex',
-                          gap: '5px',
-                          marginBottom: '2px',
-                          alignItems: 'center',
+                    <div>
+                      <label className="e-label">Zoom</label>
+                      <input
+                        type="number"
+                        step="0.1"
+                        className="e-input"
+                        value={obj.camera ? formatPanelNumber(obj.camera.zoom) : 1}
+                        onChange={(e) => {
+                          if (obj.camera) {
+                            obj.camera.zoom = parseFloat(e.target.value);
+                            incrementObjectVersion();
+                          }
                         }}
-                      >
-                        <div style={{ width: '30px', fontSize: '10px', color: '#888' }}>
-                          {dir.toUpperCase()}
-                        </div>
-                        <input
-                          type="text"
-                          className="e-input"
-                          style={{ flex: 1, fontSize: '10px', padding: '1px' }}
-                          value={set[dir] || ''}
-                          readOnly
-                        />
-                        <button
-                          className="e-btn"
-                          style={{ padding: '0 5px' }}
-                          onClick={() => {
-                            game.openFileBrowser('load', 'public/sprites', (f) => {
-                              set[dir] = f;
-                              // Sync to real object
-                              if (
-                                game.editor.selectedObject &&
-                                (game.editor.selectedObject as any).animSets
-                              ) {
-                                const realSet = (game.editor.selectedObject as any).animSets[setId];
-                                if (realSet) realSet[dir] = f;
-                                // If this is the current state, update sprite immediately
-                                (game.editor.selectedObject as any).updateSpriteForState();
-                              }
-                              incrementObjectVersion();
-                            });
-                          }}
-                        >
-                          ...
-                        </button>
-                      </div>
-                    ))}
+                      />
+                    </div>
                   </div>
-                );
-              })}
-          </>
-        )}
 
-        {/* SCENE Properties */}
-        {selectedObjectType === 'SCENE' && (
-          <>
-            {/* Camera properties */}
-            {(obj.camera || obj.defaultCamera) && (
-              <div className="e-row" style={{ borderTop: '1px solid #444', paddingTop: '5px' }}>
-                <div className="e-label" style={{ color: '#aaf', fontWeight: 'bold' }}>
-                  CAMERA
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}>
-                  <div>
-                    <label className="e-label">Cam X</label>
-                    <input
-                      type="number"
-                      className="e-input"
-                      value={obj.camera ? Math.round(obj.camera.x) : 0}
-                      onChange={(e) => {
-                        if (obj.camera) {
-                          obj.camera.x = parseFloat(e.target.value);
-                          incrementObjectVersion();
-                        }
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <label className="e-label">Cam Y</label>
-                    <input
-                      type="number"
-                      className="e-input"
-                      value={obj.camera ? Math.round(obj.camera.y) : 0}
-                      onChange={(e) => {
-                        if (obj.camera) {
-                          obj.camera.y = parseFloat(e.target.value);
-                          incrementObjectVersion();
-                        }
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <label className="e-label">Zoom</label>
-                    <input
-                      type="number"
-                      step="0.1"
-                      className="e-input"
-                      value={obj.camera ? obj.camera.zoom : 1}
-                      onChange={(e) => {
-                        if (obj.camera) {
-                          obj.camera.zoom = parseFloat(e.target.value);
-                          incrementObjectVersion();
-                        }
-                      }}
-                    />
+                  <div className="e-row" style={{ marginTop: '5px' }}>
+                    <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
+                      <input
+                        type="checkbox"
+                        style={{ marginRight: '5px' }}
+                        checked={!!obj.autoCenter}
+                        onChange={(e) => handleChange('autoCenter', e.target.checked)}
+                      />
+                      Auto-Center on Player
+                    </label>
                   </div>
-                </div>
 
-                <div className="e-row" style={{ marginTop: '5px' }}>
-                  <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
-                    <input
-                      type="checkbox"
-                      style={{ marginRight: '5px' }}
-                      checked={!!obj.autoCenter}
-                      onChange={(e) => handleChange('autoCenter', e.target.checked)}
-                    />
-                    Auto-Center on Player
-                  </label>
-                </div>
-                <div
-                  className="e-row"
-                  style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
-                >
-                  <div>
-                    <label className="e-label">Cam Spd</label>
-                    <input
-                      type="number"
-                      step="0.1"
-                      className="e-input"
-                      value={obj.cameraSpeed || 5}
-                      onChange={(e) =>
-                        handleChange('cameraSpeed', parseFloat(e.target.value), true)
-                      }
-                    />
-                  </div>
-                  <div>
-                    <label className="e-label">Dead X</label>
-                    <input
-                      type="number"
-                      className="e-input"
-                      value={obj.camDeadzoneX !== undefined ? obj.camDeadzoneX : 50}
-                      onChange={(e) =>
-                        handleChange('camDeadzoneX', parseFloat(e.target.value), true)
-                      }
-                    />
-                  </div>
-                  <div>
-                    <label className="e-label">Dead Y</label>
-                    <input
-                      type="number"
-                      className="e-input"
-                      value={obj.camDeadzoneY !== undefined ? obj.camDeadzoneY : 30}
-                      onChange={(e) =>
-                        handleChange('camDeadzoneY', parseFloat(e.target.value), true)
-                      }
-                    />
+                  <div
+                    className="e-row"
+                    style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}
+                  >
+                    <div>
+                      <label className="e-label">Cam Spd</label>
+                      <input
+                        type="number"
+                        step="0.1"
+                        className="e-input"
+                        value={formatPanelNumber(obj.cameraSpeed || 5)}
+                        onChange={(e) => handleChange('cameraSpeed', parseFloat(e.target.value), true)}
+                      />
+                    </div>
+                    <div>
+                      <label className="e-label">Dead X</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        value={formatPanelNumber(obj.camDeadzoneX !== undefined ? obj.camDeadzoneX : 50)}
+                        onChange={(e) => handleChange('camDeadzoneX', parseFloat(e.target.value), true)}
+                      />
+                    </div>
+                    <div>
+                      <label className="e-label">Dead Y</label>
+                      <input
+                        type="number"
+                        className="e-input"
+                        value={formatPanelNumber(obj.camDeadzoneY !== undefined ? obj.camDeadzoneY : 30)}
+                        onChange={(e) => handleChange('camDeadzoneY', parseFloat(e.target.value), true)}
+                      />
+                    </div>
                   </div>
-                </div>
-                <>
+
                   <div className="e-row" style={{ marginTop: '5px' }}>
-                    <div className="e-label" style={{ color: '#aaf' }}>
-                      Camera Bounds (Min/Max)
-                    </div>
+                    <div className="e-label ui-text-accent-blue">Camera Bounds (Min/Max)</div>
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
                       <div>
                         <label className="e-label">Min X</label>
@@ -3012,7 +3611,7 @@ export const PropertiesPanel: React.FC = () => {
                           type="number"
                           className="e-input"
                           placeholder="None"
-                          value={obj.camMinX !== undefined ? obj.camMinX : ''}
+                          value={obj.camMinX !== undefined ? formatPanelNumber(obj.camMinX) : ''}
                           onChange={(e) =>
                             handleChange(
                               'camMinX',
@@ -3028,7 +3627,7 @@ export const PropertiesPanel: React.FC = () => {
                           type="number"
                           className="e-input"
                           placeholder="None"
-                          value={obj.camMaxX !== undefined ? obj.camMaxX : ''}
+                          value={obj.camMaxX !== undefined ? formatPanelNumber(obj.camMaxX) : ''}
                           onChange={(e) =>
                             handleChange(
                               'camMaxX',
@@ -3044,7 +3643,7 @@ export const PropertiesPanel: React.FC = () => {
                           type="number"
                           className="e-input"
                           placeholder="None"
-                          value={obj.camMinY !== undefined ? obj.camMinY : ''}
+                          value={obj.camMinY !== undefined ? formatPanelNumber(obj.camMinY) : ''}
                           onChange={(e) =>
                             handleChange(
                               'camMinY',
@@ -3060,7 +3659,7 @@ export const PropertiesPanel: React.FC = () => {
                           type="number"
                           className="e-input"
                           placeholder="None"
-                          value={obj.camMaxY !== undefined ? obj.camMaxY : ''}
+                          value={obj.camMaxY !== undefined ? formatPanelNumber(obj.camMaxY) : ''}
                           onChange={(e) =>
                             handleChange(
                               'camMaxY',
@@ -3072,89 +3671,81 @@ export const PropertiesPanel: React.FC = () => {
                       </div>
                     </div>
                   </div>
-                </>
-              </div>
-            )}
 
-            {/* Default Camera (Start Position) */}
-            {obj.defaultCamera && (
-              <div className="e-row" style={{ borderTop: '1px solid #444', paddingTop: '5px' }}>
-                <div className="e-label" style={{ color: '#aaf', fontWeight: 'bold' }}>
-                  DEFAULT CAMERA
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}>
-                  <div>
-                    <label className="e-label">Def X</label>
-                    <input
-                      type="number"
-                      className="e-input"
-                      value={Math.round(obj.defaultCamera.x)}
-                      onChange={(e) => {
-                        obj.defaultCamera.x = parseFloat(e.target.value);
-                        incrementObjectVersion();
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <label className="e-label">Def Y</label>
-                    <input
-                      type="number"
-                      className="e-input"
-                      value={Math.round(obj.defaultCamera.y)}
-                      onChange={(e) => {
-                        obj.defaultCamera.y = parseFloat(e.target.value);
-                        incrementObjectVersion();
-                      }}
-                    />
-                  </div>
-                  <div>
-                    <label className="e-label">Def Zoom</label>
-                    <input
-                      type="number"
-                      step="0.1"
-                      className="e-input"
-                      value={obj.defaultCamera.zoom}
-                      onChange={(e) => {
-                        obj.defaultCamera.zoom = parseFloat(e.target.value);
-                        incrementObjectVersion();
-                      }}
-                    />
-                  </div>
-                </div>
-                <div className="e-row" style={{ marginTop: '5px' }}>
-                  <button
-                    className="e-btn"
-                    style={{ width: '100%' }}
-                    onClick={() => {
-                      if (obj.camera && obj.defaultCamera) {
-                        obj.defaultCamera.x = obj.camera.x;
-                        obj.defaultCamera.y = obj.camera.y;
-                        obj.defaultCamera.zoom = obj.camera.zoom;
-                        incrementObjectVersion();
-                      }
-                    }}
-                  >
-                    Set Current as Default
-                  </button>
-                </div>
-              </div>
-            )}
+                  {obj.defaultCamera && (
+                    <div className="e-row" style={{ marginTop: '5px' }}>
+                      <div className="e-label ui-text-accent-blue">Default Camera</div>
+                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px' }}>
+                        <div>
+                          <label className="e-label">Def X</label>
+                          <input
+                            type="number"
+                            className="e-input"
+                            value={formatPanelNumber(obj.defaultCamera.x)}
+                            onChange={(e) => {
+                              obj.defaultCamera.x = parseFloat(e.target.value);
+                              incrementObjectVersion();
+                            }}
+                          />
+                        </div>
+                        <div>
+                          <label className="e-label">Def Y</label>
+                          <input
+                            type="number"
+                            className="e-input"
+                            value={formatPanelNumber(obj.defaultCamera.y)}
+                            onChange={(e) => {
+                              obj.defaultCamera.y = parseFloat(e.target.value);
+                              incrementObjectVersion();
+                            }}
+                          />
+                        </div>
+                        <div>
+                          <label className="e-label">Def Zoom</label>
+                          <input
+                            type="number"
+                            step="0.1"
+                            className="e-input"
+                            value={formatPanelNumber(obj.defaultCamera.zoom)}
+                            onChange={(e) => {
+                              obj.defaultCamera.zoom = parseFloat(e.target.value);
+                              incrementObjectVersion();
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <div className="e-row" style={{ marginTop: '5px' }}>
+                        <button
+                          className="e-btn"
+                          style={{ width: '100%' }}
+                          onClick={() => {
+                            if (obj.camera && obj.defaultCamera) {
+                              obj.defaultCamera.x = obj.camera.x;
+                              obj.defaultCamera.y = obj.camera.y;
+                              obj.defaultCamera.zoom = obj.camera.zoom;
+                              incrementObjectVersion();
+                            }
+                          }}
+                        >
+                          Set Current as Default
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
 
-            {/* Scaling Settings */}
-            {game.sceneManager.currentScene && (
-              <div className="e-row" style={{ borderTop: '1px solid #444', paddingTop: '5px' }}>
-                <div className="e-label" style={{ color: '#ffaa00', fontWeight: 'bold' }}>
-                  SCALING
-                </div>
-                {(() => {
+            {game.sceneManager.currentScene &&
+              renderSection(
+                2,
+                'Scaling',
+                'yellow',
+                (() => {
                   const s = game.sceneManager.currentScene.scaling;
                   return (
                     <>
                       <div className="e-row">
-                        <label
-                          className="e-label"
-                          style={{ display: 'flex', alignItems: 'center' }}
-                        >
+                        <label className="e-label" style={{ display: 'flex', alignItems: 'center' }}>
                           <input
                             type="checkbox"
                             style={{ marginRight: '5px' }}
@@ -3168,16 +3759,14 @@ export const PropertiesPanel: React.FC = () => {
                         </label>
                       </div>
                       {s.enabled && (
-                        <div
-                          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}
-                        >
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
                           <div>
                             <label className="e-label">Min</label>
                             <input
                               type="number"
                               step="0.1"
                               className="e-input"
-                              value={s.min}
+                              value={formatPanelNumber(s.min)}
                               onChange={(e) => {
                                 s.min = parseFloat(e.target.value);
                                 incrementObjectVersion();
@@ -3190,7 +3779,7 @@ export const PropertiesPanel: React.FC = () => {
                               type="number"
                               step="0.1"
                               className="e-input"
-                              value={s.max}
+                              value={formatPanelNumber(s.max)}
                               onChange={(e) => {
                                 s.max = parseFloat(e.target.value);
                                 incrementObjectVersion();
@@ -3202,7 +3791,7 @@ export const PropertiesPanel: React.FC = () => {
                             <input
                               type="number"
                               className="e-input"
-                              value={s.horizon}
+                              value={formatPanelNumber(s.horizon)}
                               onChange={(e) => {
                                 s.horizon = parseFloat(e.target.value);
                                 incrementObjectVersion();
@@ -3214,7 +3803,7 @@ export const PropertiesPanel: React.FC = () => {
                             <input
                               type="number"
                               className="e-input"
-                              value={s.front}
+                              value={formatPanelNumber(s.front)}
                               onChange={(e) => {
                                 s.front = parseFloat(e.target.value);
                                 incrementObjectVersion();
@@ -3225,9 +3814,8 @@ export const PropertiesPanel: React.FC = () => {
                       )}
                     </>
                   );
-                })()}
-              </div>
-            )}
+                })()
+              )}
           </>
         )}
 
@@ -3236,8 +3824,8 @@ export const PropertiesPanel: React.FC = () => {
           <>
             <div className="e-row">
               <label
-                className="e-label"
-                style={{ color: '#79EFA4', fontWeight: 'bold', marginBottom: '10px' }}
+                className="e-label ui-text-accent-green ui-font-bold"
+                style={{ marginBottom: '10px' }}
               >
                 EDITOR SETTINGS
               </label>
@@ -3249,7 +3837,7 @@ export const PropertiesPanel: React.FC = () => {
                 className="e-label"
                 style={{ display: 'flex', justifyContent: 'space-between' }}
               >
-                UI Scale <span>{(obj.editor?.uiScale || 1.0).toFixed(1)}x</span>
+                UI Scale <span>{formatPanelNumber(obj.editor?.uiScale || 1.0)}x</span>
               </label>
               <input
                 type="number"
@@ -3257,7 +3845,7 @@ export const PropertiesPanel: React.FC = () => {
                 min="0.5"
                 max="2.0"
                 step="0.1"
-                value={obj.editor?.uiScale || 1.0}
+                value={formatPanelNumber(obj.editor?.uiScale || 1.0)}
                 onChange={(e) => {
                   if (!obj.editor) obj.editor = { uiScale: 1.0 };
                   obj.editor.uiScale = parseFloat(e.target.value);
@@ -3272,8 +3860,8 @@ export const PropertiesPanel: React.FC = () => {
 
             <div className="e-row" style={{ marginTop: '10px' }}>
               <label
-                className="e-label"
-                style={{ color: '#79EFA4', fontWeight: 'bold', marginBottom: '10px' }}
+                className="e-label ui-text-accent-green ui-font-bold"
+                style={{ marginBottom: '10px' }}
               >
                 CRT EFFECT SETTINGS
               </label>
@@ -3305,7 +3893,7 @@ export const PropertiesPanel: React.FC = () => {
                     className="e-label"
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
-                    Curvature <span>{obj.crt.curvature.toFixed(2)}</span>
+                    Curvature <span>{formatPanelNumber(obj.crt.curvature)}</span>
                   </label>
                   <input
                     type="range"
@@ -3313,7 +3901,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="0"
                     max="0.5"
                     step="0.01"
-                    value={obj.crt.curvature}
+                    value={formatPanelNumber(obj.crt.curvature)}
                     onChange={(e) => {
                       obj.crt.curvature = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3325,7 +3913,7 @@ export const PropertiesPanel: React.FC = () => {
                     className="e-label"
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
-                    Vignette <span>{obj.crt.vignette.toFixed(2)}</span>
+                    Vignette <span>{formatPanelNumber(obj.crt.vignette)}</span>
                   </label>
                   <input
                     type="range"
@@ -3333,7 +3921,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="0"
                     max="1"
                     step="0.05"
-                    value={obj.crt.vignette}
+                    value={formatPanelNumber(obj.crt.vignette)}
                     onChange={(e) => {
                       obj.crt.vignette = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3345,7 +3933,7 @@ export const PropertiesPanel: React.FC = () => {
                     className="e-label"
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
-                    Scanline Count <span>{Math.round(obj.crt.scanlineCount)}</span>
+                    Scanline Count <span>{formatPanelNumber(obj.crt.scanlineCount)}</span>
                   </label>
                   <input
                     type="range"
@@ -3353,7 +3941,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="100"
                     max="2000"
                     step="50"
-                    value={obj.crt.scanlineCount}
+                    value={formatPanelNumber(obj.crt.scanlineCount)}
                     onChange={(e) => {
                       obj.crt.scanlineCount = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3365,7 +3953,7 @@ export const PropertiesPanel: React.FC = () => {
                     className="e-label"
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
-                    Scanline Intensity <span>{obj.crt.scanlineIntensity.toFixed(2)}</span>
+                    Scanline Intensity <span>{formatPanelNumber(obj.crt.scanlineIntensity)}</span>
                   </label>
                   <input
                     type="range"
@@ -3373,7 +3961,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="0"
                     max="1"
                     step="0.05"
-                    value={obj.crt.scanlineIntensity}
+                    value={formatPanelNumber(obj.crt.scanlineIntensity)}
                     onChange={(e) => {
                       obj.crt.scanlineIntensity = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3385,7 +3973,7 @@ export const PropertiesPanel: React.FC = () => {
                     className="e-label"
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
-                    RGB Split <span>{obj.crt.aberration.toFixed(1)}</span>
+                    RGB Split <span>{formatPanelNumber(obj.crt.aberration)}</span>
                   </label>
                   <input
                     type="range"
@@ -3393,7 +3981,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="0"
                     max="5"
                     step="0.1"
-                    value={obj.crt.aberration}
+                    value={formatPanelNumber(obj.crt.aberration)}
                     onChange={(e) => {
                       obj.crt.aberration = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3405,7 +3993,7 @@ export const PropertiesPanel: React.FC = () => {
                     className="e-label"
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
-                    Bloom <span>{obj.crt.bloom.toFixed(2)}</span>
+                    Bloom <span>{formatPanelNumber(obj.crt.bloom)}</span>
                   </label>
                   <input
                     type="range"
@@ -3413,7 +4001,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="0"
                     max="1"
                     step="0.05"
-                    value={obj.crt.bloom}
+                    value={formatPanelNumber(obj.crt.bloom)}
                     onChange={(e) => {
                       obj.crt.bloom = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3426,7 +4014,7 @@ export const PropertiesPanel: React.FC = () => {
                     style={{ display: 'flex', justifyContent: 'space-between' }}
                   >
                     Phosphor / Grain{' '}
-                    <span>{obj.crt.phosphor ? obj.crt.phosphor.toFixed(2) : '0.00'}</span>
+                    <span>{formatPanelNumber(obj.crt.phosphor || 0)}</span>
                   </label>
                   <input
                     type="range"
@@ -3434,7 +4022,7 @@ export const PropertiesPanel: React.FC = () => {
                     min="0"
                     max="1"
                     step="0.05"
-                    value={obj.crt.phosphor || 0}
+                    value={formatPanelNumber(obj.crt.phosphor || 0)}
                     onChange={(e) => {
                       obj.crt.phosphor = parseFloat(e.target.value);
                       incrementObjectVersion();
@@ -3458,10 +4046,7 @@ export const PropertiesPanel: React.FC = () => {
               </>
             )}
 
-            <div
-              className="e-row"
-              style={{ marginTop: '20px', borderTop: '1px solid #333', paddingTop: '10px' }}
-            >
+            <div className="e-row ui-divider-neutral" style={{ marginTop: '20px', paddingTop: '10px' }}>
               <button
                 className="e-btn"
                 style={{ width: '100%', padding: '8px' }}
diff --git a/src/core/Game.ts b/src/core/Game.ts
index 103bf25..2f24c1d 100644
--- a/src/core/Game.ts
+++ b/src/core/Game.ts
@@ -25,12 +25,14 @@ export class Game implements IGame {
   public static instance: Game;
 
   canvas: HTMLCanvasElement; // UI Canvas
+  editorOverlayCanvas: HTMLCanvasElement | null;
   rendererCanvas: HTMLCanvasElement; // High-Res Display (WebGL)
   bufferCanvas: HTMLCanvasElement; // 420x300 Buffer (Internal)
 
   ctx: CanvasRenderingContext2D | null;
   rendererCtx: CanvasRenderingContext2D | null; // For simple 2D upscale if CRT disabled
   uiCtx: CanvasRenderingContext2D | null;
+  editorOverlayCtx: CanvasRenderingContext2D | null;
 
   crtFilter: CRTFilter | null;
   lastTime: number;
@@ -73,7 +75,16 @@ export class Game implements IGame {
         dir: string,
         onConfirm: (f: string) => void,
         extension?: string,
-        title?: string
+        title?: string,
+        onCancel?: () => void
+      ) => void)
+    | null = null;
+  onRequestChoiceDialog:
+    | ((
+        title: string,
+        message: string,
+        options: Array<{ id: string; label: string; variant?: 'primary' | 'danger' | 'neutral' }>,
+        onResolve: (choiceId: string | null) => void
       ) => void)
     | null = null;
 
@@ -89,25 +100,44 @@ export class Game implements IGame {
     dir: string,
     onConfirm: (f: string) => void,
     extension?: string,
-    title?: string
+    title?: string,
+    onCancel?: () => void
   ): void {
     if (this.onRequestFileBrowser) {
-      this.onRequestFileBrowser(mode, dir, onConfirm, extension, title);
+      this.onRequestFileBrowser(mode, dir, onConfirm, extension, title, onCancel);
     } else {
       console.error('File Browser UI not hooked up!');
       alert('File Browser Unavailable');
     }
   }
 
+  requestChoiceDialog(
+    title: string,
+    message: string,
+    options: Array<{ id: string; label: string; variant?: 'primary' | 'danger' | 'neutral' }>
+  ): Promise<string | null> {
+    if (!this.onRequestChoiceDialog) {
+      console.error('Choice Dialog UI not hooked up!');
+      return Promise.resolve(null);
+    }
+
+    return new Promise((resolve) => {
+      this.onRequestChoiceDialog!(title, message, options, resolve);
+    });
+  }
+
   constructor(
     rendererCanvas: HTMLCanvasElement, // The main visual canvas (WebGL)
-    uiCanvas: HTMLCanvasElement // The UI overlay canvas (2D)
+    uiCanvas: HTMLCanvasElement, // The UI overlay canvas (2D)
+    editorOverlayCanvas?: HTMLCanvasElement // High-res editor overlay canvas
   ) {
     Game.instance = this;
     this.rendererCanvas = rendererCanvas;
     this.canvas = uiCanvas;
+    this.editorOverlayCanvas = editorOverlayCanvas || null;
 
     this.uiCtx = this.canvas.getContext('2d');
+    this.editorOverlayCtx = this.editorOverlayCanvas?.getContext('2d') || null;
 
     // Create an offscreen buffer for the game to draw onto
     this.bufferCanvas = document.createElement('canvas');
@@ -123,14 +153,14 @@ export class Game implements IGame {
     this.settings = {
       crt: {
         enabled: true,
-        curvature: 0.1,
-        scanlineCount: 800,
-        scanlineIntensity: 0.5,
-        aberration: 1.0,
-        vignette: 0.3,
-        phosphor: 0.0,
-        bezelGlow: false,
-        bloom: 0.0,
+        curvature: 0.16,
+        scanlineCount: 200,
+        scanlineIntensity: 0.4,
+        aberration: 0.2,
+        vignette: 0.9,
+        phosphor: 1.0,
+        bezelGlow: true,
+        bloom: 0.05,
       },
       editor: {
         uiScale: 1.0,
@@ -150,6 +180,7 @@ export class Game implements IGame {
     // Disable smoothing for pixel art look
     if (this.ctx) this.ctx.imageSmoothingEnabled = false;
     if (this.uiCtx) this.uiCtx.imageSmoothingEnabled = false;
+    if (this.editorOverlayCtx) this.editorOverlayCtx.imageSmoothingEnabled = true;
 
     // (Previously corrupted lines removed)
     this.input = new Input(this);
@@ -246,19 +277,22 @@ export class Game implements IGame {
       this.editor.update(deltaTime);
     }
 
-    // Cursor Logic: Change to 'eye' if hovering over Subscene object in Game Mode
+    // Cursor Logic: Change to contextual cursor if hovering over interactive object in Game Mode
     if (!this.editor.enabled && this.sceneManager.currentScene) {
-      const hovered = this.sceneManager.currentScene.checkHover(
+      const hoverCursor = this.sceneManager.currentScene.checkHover(
         this.input.mouse.x,
         this.input.mouse.y
       );
-      if (hovered) {
+      this.canvas.classList.remove('cursor-eye', 'cursor-hand', 'cursor-back');
+      if (hoverCursor === 'eye') {
         this.canvas.classList.add('cursor-eye');
-      } else {
-        this.canvas.classList.remove('cursor-eye');
+      } else if (hoverCursor === 'hand') {
+        this.canvas.classList.add('cursor-hand');
+      } else if (hoverCursor === 'back') {
+        this.canvas.classList.add('cursor-back');
       }
     } else {
-      this.canvas.classList.remove('cursor-eye');
+      this.canvas.classList.remove('cursor-eye', 'cursor-hand', 'cursor-back');
     }
   }
 
@@ -321,17 +355,41 @@ export class Game implements IGame {
       }
     }
 
-    // 3. Render UI/Editor to UI Canvas (Overlay)
+    // 3. Render UI/Editor overlays
     if (this.uiCtx) {
       this.uiCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    if (this.editorOverlayCtx && this.editorOverlayCanvas) {
+      this.editorOverlayCtx.setTransform(1, 0, 0, 1, 0, 0);
+      this.editorOverlayCtx.clearRect(
+        0,
+        0,
+        this.editorOverlayCanvas.width,
+        this.editorOverlayCanvas.height
+      );
+    }
 
+    if (this.uiCtx) {
       // Sprite Editor Overlay (Takes over screen if active)
       if (this.spriteEditor.active) {
         this.spriteEditor.render(this.uiCtx);
-      } else {
+      } else if (!this.editorOverlayCtx) {
         this.editor.render(this.uiCtx);
       }
     }
+
+    if (
+      this.editorOverlayCtx &&
+      this.editorOverlayCanvas &&
+      !this.spriteEditor.active &&
+      this.editor.enabled
+    ) {
+      const scaleX = this.editorOverlayCanvas.width / this.canvas.width;
+      const scaleY = this.editorOverlayCanvas.height / this.canvas.height;
+      this.editorOverlayCtx.setTransform(scaleX, 0, 0, scaleY, 0, 0);
+      this.editor.render(this.editorOverlayCtx);
+      this.editorOverlayCtx.setTransform(1, 0, 0, 1, 0, 0);
+    }
   }
 
   consoleInput: HTMLInputElement | null = null; // Command input provided by UI layer
@@ -438,11 +496,6 @@ export class Game implements IGame {
     return this.textAssets.getServiceText(key, params);
   }
 
-  private getPlayerFacingEntityTitle(entity: Entity): string | null {
-    const title = this.textAssets.getResolvedObjectField(entity, 'title');
-    return title && title.trim() ? title.trim() : null;
-  }
-
   private getPlayerFacingObjectTitle(target: SceneObject): string | null {
     const title = this.textAssets.getResolvedObjectField(target as any, 'title');
     return title && title.trim() ? title.trim() : null;
@@ -501,8 +554,8 @@ export class Game implements IGame {
     return this.inventory.includes(entity);
   }
 
-  private canExamineEntity(entity: Entity): GameActionOutcome | null {
-    if (this.isEntityInInventory(entity)) return null;
+  private canExamineObject(entity: SceneObject): GameActionOutcome | null {
+    if (entity instanceof Entity && this.isEntityInInventory(entity)) return null;
 
     const scene = this.sceneManager.currentScene;
     if (!scene) {
@@ -562,7 +615,7 @@ export class Game implements IGame {
     };
   }
 
-  lookEntity(entity: Entity): GameActionOutcome {
+  lookEntity(entity: SceneObject): GameActionOutcome {
     const interactionId =
       entity.interactions && (entity.interactions.look || entity.interactions.LOOK);
     if (interactionId) {
@@ -575,14 +628,26 @@ export class Game implements IGame {
       };
     }
 
-    const description =
-      this.textAssets.getResolvedObjectField(entity, 'description') || entity.description;
+    const objectDescription = this.textAssets.getResolvedObjectField(entity, 'description');
+    const runtimeDescription =
+      typeof (entity as any).description === 'string' ? (entity as any).description : null;
+    const description = objectDescription || runtimeDescription;
     if (description && description.trim()) {
-      const spatialMessage = this.getSpatialParentMessage(entity);
       return {
         status: 'ok',
         code: 'entity_description',
-        message: spatialMessage ? `${description.trim()} ${spatialMessage}` : description,
+        message: description,
+        data: { targetType: 'entity', entityId: entity.name },
+      };
+    }
+
+    const targetTitle = this.getPlayerFacingObjectTitle(entity);
+    if (targetTitle) {
+      const genericMessage = this.text('parser.look_default_object', { target: targetTitle });
+      return {
+        status: 'ok',
+        code: 'entity_generic_description',
+        message: genericMessage,
         data: { targetType: 'entity', entityId: entity.name },
       };
     }
@@ -595,10 +660,30 @@ export class Game implements IGame {
     };
   }
 
-  examineEntity(entity: Entity): GameActionOutcome {
-    const accessError = this.canExamineEntity(entity);
+  examineEntity(entity: SceneObject): GameActionOutcome {
+    const accessError = this.canExamineObject(entity);
     if (accessError) return accessError;
 
+    const subsceneComponent = entity.components?.find(
+      (component: any) => component?.type === 'Subscene'
+    );
+    if (subsceneComponent && this.sceneManager.currentScene) {
+      this.sceneManager.currentScene.activateObject(entity);
+      const seeMessage = this.getSeeMessage(entity);
+      const targetTitle = this.getPlayerFacingObjectTitle(entity);
+      return {
+        status: 'ok',
+        code: 'subscene_activated',
+        ...(seeMessage
+          ? { message: seeMessage }
+          : targetTitle
+            ? { message: this.text('engine.click_you_see', { title: targetTitle }) }
+            : {}),
+        data: { targetType: 'entity', entityId: entity.name },
+        effects: ['subscene_opened'],
+      };
+    }
+
     const interactionId =
       entity.interactions &&
       (entity.interactions.examine ||
@@ -627,8 +712,10 @@ export class Game implements IGame {
       };
     }
 
-    const description =
-      this.textAssets.getResolvedObjectField(entity, 'description') || entity.description;
+    const objectDescription = this.textAssets.getResolvedObjectField(entity, 'description');
+    const runtimeDescription =
+      typeof (entity as any).description === 'string' ? (entity as any).description : null;
+    const description = objectDescription || runtimeDescription;
     if (description && description.trim()) {
       return {
         status: 'ok',
@@ -658,8 +745,16 @@ export class Game implements IGame {
     }
 
     const anchorNode = scene.getSpatialNode(anchorNodeId);
-    const anchorTitle = anchorNode?.title?.trim() || null;
-    if (!anchorNode || !anchorTitle) {
+    const anchorObject =
+      scene.entities.find((entity) => entity.name === anchorNodeId) ||
+      scene.triggerboxes.find((triggerbox) => triggerbox.name === anchorNodeId) ||
+      scene.walkbox.find((walkbox) => walkbox.name === anchorNodeId) ||
+      null;
+    const anchorTitle =
+      anchorNode?.title?.trim() ||
+      (anchorObject ? this.getPlayerFacingObjectTitle(anchorObject)?.trim() : null) ||
+      null;
+    if (!anchorTitle) {
       return {
         status: 'escalate',
         code: 'spatial_node_missing_title',
@@ -739,9 +834,10 @@ export class Game implements IGame {
 
     const isItem = entity.components && entity.components.find((c: any) => c.type === 'Item');
     if (isItem || entity.isTakeable) {
+      scene.playPickupAnimation(entity);
       scene.removeEntity(entity);
       this.inventory.push(entity);
-      const itemTitle = this.getPlayerFacingEntityTitle(entity);
+      const itemTitle = this.getPlayerFacingObjectTitle(entity);
       if (!itemTitle) {
         return {
           status: 'escalate',
@@ -792,7 +888,7 @@ export class Game implements IGame {
 
   showInventory(): GameActionOutcome {
     const inventoryTitles = this.inventory
-      .map((entity: any) => this.getPlayerFacingEntityTitle(entity))
+      .map((entity: any) => this.getPlayerFacingObjectTitle(entity))
       .filter((title): title is string => !!title);
 
     if (inventoryTitles.length !== this.inventory.length) {
@@ -822,7 +918,9 @@ export class Game implements IGame {
   }
 
   goToSceneTarget(target: string): GameActionOutcome {
-    const normalized = String(target || '').trim().toUpperCase();
+    const normalized = String(target || '')
+      .trim()
+      .toUpperCase();
     if (!normalized) {
       return {
         status: 'failed',
@@ -876,7 +974,7 @@ export class Game implements IGame {
   goToEntity(entity: Entity): GameActionOutcome {
     const currentScene = this.sceneManager.currentScene;
     if (currentScene?.player && 'x' in entity && 'y' in entity) {
-      const entityTitle = this.getPlayerFacingEntityTitle(entity);
+      const entityTitle = this.getPlayerFacingObjectTitle(entity);
       if (!entityTitle) {
         return {
           status: 'escalate',
diff --git a/src/core/IGame.ts b/src/core/IGame.ts
index e4dd839..ca2067e 100644
--- a/src/core/IGame.ts
+++ b/src/core/IGame.ts
@@ -22,9 +22,9 @@ export interface IGame {
   text(key: string, params?: Record<string, string | number>): string;
   getSeeMessage(target: SceneObject): string | null;
   lookScene(scene?: Scene | null): GameActionOutcome;
-  lookEntity(entity: Entity): GameActionOutcome;
+  lookEntity(entity: SceneObject): GameActionOutcome;
   describeSpatialRelation(anchorNodeId: string, relation: SpatialRelationType): GameActionOutcome;
-  examineEntity(entity: Entity): GameActionOutcome;
+  examineEntity(entity: SceneObject): GameActionOutcome;
   takeEntity(entity: Entity): GameActionOutcome;
   removeInventoryEntity(entity: Entity): GameActionOutcome;
   showInventory(): GameActionOutcome;
@@ -38,7 +38,9 @@ export interface IGame {
     mode: 'load' | 'save',
     dir: string,
     callback: (file: string) => void,
-    extension?: string
+    extension?: string,
+    title?: string,
+    onCancel?: () => void
   ): void;
   setCommandInput(input: HTMLInputElement | null): void;
   getCommandInput(): HTMLInputElement | null;
diff --git a/src/core/Input.ts b/src/core/Input.ts
index 4b45fc2..df28ab8 100644
--- a/src/core/Input.ts
+++ b/src/core/Input.ts
@@ -38,8 +38,8 @@ export class Input {
     this.onKeyDown = (e: KeyboardEvent) => {
       this.keys[e.key] = true;
 
-      // Global Tilde (~) to toggle Console
-      if (e.key === '`' || e.key === '~') {
+      // Toggle console by physical backquote key, independent of keyboard layout.
+      if (e.code === 'Backquote') {
         e.preventDefault();
         if (this.game.console) {
           this.game.console.toggle();
diff --git a/src/core/TextAssetManager.ts b/src/core/TextAssetManager.ts
index d65bc8c..56d2bd8 100644
--- a/src/core/TextAssetManager.ts
+++ b/src/core/TextAssetManager.ts
@@ -29,6 +29,7 @@ const DEFAULT_SERVICE_ASSETS: Record<string, TextAssetData> = {
     examine_relation_prompt: 'Examine what area?',
     relation_empty: 'You see nothing {relation} the {target}.',
     relation_contents: '{Relation} the {target} you see: {items}.',
+    relation_location: 'It is {relation} the {target}.',
     relation_not_supported: "You can't determine what is {relation} the {target} from here.",
     take_prompt: 'Take what?',
     take_which_one: 'Which item do you mean: {options}?',
@@ -115,7 +116,7 @@ const DEFAULT_PARSER_LEXICON: ParserLexiconAsset = {
   relationMarkers: {
     on: ['on'],
     under: ['under', 'beneath'],
-    in: ['in', 'inside'],
+    in: ['in', 'inside', 'into'],
     behind: ['behind'],
     near: ['near', 'next to', 'by'],
   },
@@ -355,8 +356,23 @@ export class TextAssetManager {
   }
 
   buildDefaultObjectAsset(obj: SceneObject): ObjectTextAssetData {
-    const fallbackTitle = (obj as any).customName || obj.name || obj.type || 'Object';
-    const fallbackDescription = (obj as any).description || 'You see nothing special.';
+    const subsceneComponent = Array.isArray((obj as any).components)
+      ? (obj as any).components.find((component: any) => component?.type === 'Subscene')
+      : null;
+    const fallbackTitle =
+      (obj as any).customName ||
+      (typeof subsceneComponent?.title === 'string' && subsceneComponent.title.trim()
+        ? subsceneComponent.title.trim()
+        : '') ||
+      obj.name ||
+      obj.type ||
+      'Object';
+    const fallbackDescription =
+      (typeof subsceneComponent?.description === 'string' && subsceneComponent.description.trim()
+        ? subsceneComponent.description
+        : '') ||
+      (obj as any).description ||
+      'You see nothing special.';
     return {
       title: fallbackTitle,
       description: fallbackDescription,
@@ -437,7 +453,9 @@ export class TextAssetManager {
   async preloadScene(scene: Scene): Promise<void> {
     await this.readSceneAsset(scene, true);
     await Promise.all(
-      (scene.entities || []).map((entity: SceneObject) => this.readObjectAsset(entity, true))
+      [...(scene.entities || []), ...(scene.triggerboxes || [])].map((object: SceneObject) =>
+        this.readObjectAsset(object, true)
+      )
     );
   }
 
diff --git a/src/editor.css b/src/editor.css
index 130d0af..375ed73 100644
--- a/src/editor.css
+++ b/src/editor.css
@@ -51,7 +51,7 @@
 .editor-sidebar {
   width: 260px;
   background: rgba(10, 10, 10, 0.95);
-  border: 1px solid #333;
+  border: 1px solid rgba(10, 10, 10, 0.95);
   color: #ddd;
   display: flex;
   flex-direction: column;
@@ -61,13 +61,17 @@
   flex-shrink: 0;
 }
 
+#editor-panel.editor-sidebar,
+#se-panel.editor-sidebar {
+  padding: 0;
+}
+
 .editor-sidebar.left {
-  border-right: 1px solid var(--ui-main-color);
-  /* Retro Green accent */
+  border-right: 1px solid rgba(10, 10, 10, 0.95);
 }
 
 .editor-sidebar.right {
-  border-left: 1px solid var(--ui-main-color);
+  border-left: 1px solid rgba(10, 10, 10, 0.95);
 }
 
 .editor-center-spacer {
@@ -85,6 +89,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-family: var(--ui-display-font);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
 .editor-content {
@@ -96,20 +104,23 @@
 /* Controls */
 .e-btn {
   background: #111;
-  border: 1px solid #555;
-  color: #eee;
+  border: 1px solid var(--ui-input-border);
+  color: var(--ui-fkey-text);
   padding: 4px 8px;
-  font-family: inherit;
+  font-family: var(--ui-display-font);
+  font-weight: 500;
   font-size: inherit;
   /* WAS: 12px */
   cursor: pointer;
   margin-right: 5px;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
 .e-btn:hover {
-  background: #333;
+  background: var(--ui-main-color);
   border-color: var(--ui-main-color);
-  color: #fff;
+  color: #000;
 }
 
 .e-btn-red {
@@ -126,6 +137,34 @@
   color: #ffa;
 }
 
+.editor-choice-btn-primary {
+  background: #214e3f;
+  border-color: #2d6a55;
+  color: #d9f8ea;
+}
+
+.editor-choice-btn-primary:hover {
+  background: var(--ui-main-color);
+  border-color: var(--ui-main-color);
+  color: #000;
+}
+
+.editor-choice-btn-danger {
+  color: #ffb1b1;
+  border-color: #7a3434;
+}
+
+.editor-choice-btn-danger:hover {
+  background: #7a3434;
+  border-color: #7a3434;
+  color: #fff;
+}
+
+.e-btn-enter {
+  border-color: var(--ui-input-focus-border);
+  box-shadow: 0 0 5px rgba(121, 239, 164, 0.2);
+}
+
 .e-btn-small {
   padding: 2px 4px;
   font-size: 0.85em;
@@ -163,6 +202,120 @@
   margin-bottom: 2px;
 }
 
+.e-tooltip-label {
+  cursor: help;
+}
+
+.e-tooltip-label:hover {
+  color: var(--ui-main-color);
+}
+
+.properties-section-block {
+  margin-bottom: 12px;
+  scroll-margin-top: 8px;
+}
+
+.properties-section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin: 0 0 8px 0;
+  padding-top: 0;
+  position: relative;
+  font-family: var(--ui-display-font);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
+}
+
+.properties-section-header::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  border-top: 1px solid currentColor;
+}
+
+.properties-section-title {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.properties-section-label {
+  display: inline-block;
+  padding-top: 4px;
+}
+
+.properties-section-actions {
+  position: relative;
+  z-index: 1;
+  padding-top: 2px;
+  flex-shrink: 0;
+}
+
+.properties-section-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 22px;
+  padding: 0 4px;
+  font-size: 0.75em;
+  line-height: 1;
+  color: #000;
+  margin-top: 0;
+}
+
+.properties-section-header.properties-section-blue {
+  color: #aaf;
+  border-color: #aaf;
+}
+
+.properties-section-header.properties-section-red {
+  color: #faa;
+  border-color: #faa;
+}
+
+.properties-section-header.properties-section-yellow {
+  color: #ffaa00;
+  border-color: #ffaa00;
+}
+
+.properties-section-header.properties-section-purple {
+  color: #f0aaff;
+  border-color: #f0aaff;
+}
+
+.properties-section-header.properties-section-neutral {
+  color: #aaa;
+  border-color: #333;
+}
+
+.properties-section-number.properties-section-blue {
+  background: #aaf;
+}
+
+.properties-section-number.properties-section-red {
+  background: #faa;
+}
+
+.properties-section-number.properties-section-yellow {
+  background: #ffaa00;
+}
+
+.properties-section-number.properties-section-purple {
+  background: #f0aaff;
+}
+
+.properties-section-number.properties-section-neutral {
+  background: #aaa;
+}
+
 /* Bottom Menu */
 .editor-bottom-menu {
   height: 32px;
@@ -175,7 +328,8 @@
   padding: 0 10px;
   gap: 15px;
   pointer-events: auto;
-  font-family: monospace;
+  font-family: var(--ui-display-font);
+  font-size: 0.92em;
   width: 100%;
   box-sizing: border-box;
   z-index: 200;
@@ -191,6 +345,9 @@
   /* WAS: 12px */
   text-transform: uppercase;
   padding: 2px 6px;
+  font-family: var(--ui-display-font);
+  font-weight: 500;
+  letter-spacing: -0.03em;
 }
 
 /* Hotkey Accent Color */
@@ -212,6 +369,20 @@
   /* reset on hover */
 }
 
+.e-menu-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.e-menu-btn:disabled:hover {
+  background: transparent;
+  color: var(--ui-fkey-text);
+}
+
+.e-menu-btn:disabled:hover .hotkey-accent {
+  color: var(--ui-fkey-hotkey);
+}
+
 .fps-counter {
   position: absolute;
   right: 10px;
@@ -228,6 +399,22 @@
   color: var(--ui-text-dim, #666);
 }
 
+.editor-sidebar.right .custom-select-container {
+  min-width: 8.5em;
+  font-size: 1.05em;
+  min-height: 22px;
+}
+
+.editor-sidebar.right .custom-select-container.compact-action-select {
+  min-width: 0;
+}
+
+.editor-sidebar.right .custom-select-trigger {
+  min-height: 22px;
+  box-sizing: border-box;
+  padding: 1px 4px !important;
+}
+
 /* ... existing code ... */
 
 /* Entity List Items */
diff --git a/src/entities/SceneObject.ts b/src/entities/SceneObject.ts
index 882fcf1..23d1062 100644
--- a/src/entities/SceneObject.ts
+++ b/src/entities/SceneObject.ts
@@ -63,6 +63,16 @@ export class SceneObject {
     props.forEach((prop) => {
       const value = (this as any)[prop];
       if (value !== undefined) {
+        if (
+          prop === 'spatial' &&
+          value &&
+          typeof value === 'object' &&
+          !Array.isArray(value) &&
+          !value.parentNodeId &&
+          !value.relation
+        ) {
+          return;
+        }
         // Deep clone objects and arrays to prevent reference sharing
         if (typeof value === 'object' && value !== null) {
           json[prop] = JSON.parse(JSON.stringify(value));
diff --git a/src/entities/TriggerComponents.ts b/src/entities/TriggerComponents.ts
index e4d0421..5ab0303 100644
--- a/src/entities/TriggerComponents.ts
+++ b/src/entities/TriggerComponents.ts
@@ -5,11 +5,8 @@ export interface TriggerComponent {
 export interface SubsceneTrigger extends TriggerComponent {
   type: 'Subscene';
   targetGroupId: string;
-  name?: string;
-  nodeId?: string;
   title?: string;
   description?: string | null;
-  spatial?: { parentNodeId?: string | null; relation?: 'in' | 'on' | 'under' | 'behind' | null };
 }
 
 export interface Subtrigger extends TriggerComponent {
@@ -31,3 +28,58 @@ export interface SwitchTrigger extends TriggerComponent {
 }
 
 export type AnyTriggerComponent = SubsceneTrigger | SwitchTrigger | Subtrigger;
+
+export function normalizeTriggerComponent(component: any): AnyTriggerComponent | null {
+  if (!component || typeof component !== 'object' || typeof component.type !== 'string') {
+    return null;
+  }
+
+  if (component.type === 'Subscene') {
+    const title =
+      typeof component.title === 'string' && component.title.trim()
+        ? component.title.trim()
+        : typeof component.name === 'string' && component.name.trim()
+          ? component.name.trim()
+          : undefined;
+    const description =
+      typeof component.description === 'string' && component.description.trim()
+        ? component.description
+        : undefined;
+
+    return {
+      type: 'Subscene',
+      targetGroupId: typeof component.targetGroupId === 'string' ? component.targetGroupId : '',
+      ...(title ? { title } : {}),
+      ...(description ? { description } : {}),
+    };
+  }
+
+  if (component.type === 'Subtrigger') {
+    return {
+      type: 'Subtrigger',
+      target: typeof component.target === 'string' ? component.target : '',
+    };
+  }
+
+  if (component.type === 'Switch') {
+    return {
+      type: 'Switch',
+      groupId1: typeof component.groupId1 === 'string' ? component.groupId1 : '',
+      groupId2: typeof component.groupId2 === 'string' ? component.groupId2 : '',
+      state: component.state === 2 ? 2 : 1,
+      ...(typeof component.idKey === 'string' ? { idKey: component.idKey } : {}),
+      ...(typeof component.sound1 === 'string' ? { sound1: component.sound1 } : {}),
+      ...(typeof component.sound2 === 'string' ? { sound2: component.sound2 } : {}),
+      ...(typeof component.name === 'string' ? { name: component.name } : {}),
+    };
+  }
+
+  return component as AnyTriggerComponent;
+}
+
+export function normalizeTriggerComponents(components: any[] | null | undefined): AnyTriggerComponent[] {
+  if (!Array.isArray(components) || components.length === 0) return [];
+  return components
+    .map((component) => normalizeTriggerComponent(component))
+    .filter((component): component is AnyTriggerComponent => !!component);
+}
diff --git a/src/entities/Triggerbox.ts b/src/entities/Triggerbox.ts
index 1166025..efc5a99 100644
--- a/src/entities/Triggerbox.ts
+++ b/src/entities/Triggerbox.ts
@@ -1,22 +1,35 @@
 import { PolygonObject } from './PolygonObject';
-import type { AnyTriggerComponent } from './TriggerComponents';
+import { normalizeTriggerComponents, type AnyTriggerComponent } from './TriggerComponents';
 
 export class Triggerbox extends PolygonObject {
   script: string;
   components: AnyTriggerComponent[];
+  parallax: number;
 
   /**
    * List of properties to be serialized to/from JSON.
    */
-  static override SERIALIZABLE_PROPS: string[] = [...PolygonObject.SERIALIZABLE_PROPS, 'script'];
+  static override SERIALIZABLE_PROPS: string[] = [
+    ...PolygonObject.SERIALIZABLE_PROPS,
+    'script',
+    'parallax',
+  ];
 
   constructor(poly: { x: number; y: number }[], name: string = 'Triggerbox', script: string = '') {
     super(poly, name, 'Triggerbox');
     this.script = script;
     this.components = [];
+    this.parallax = 1.0;
   }
 
   toJSON(): any {
-    return super.toJSON();
+    const json = super.toJSON();
+    json.components = normalizeTriggerComponents(json.components);
+    return json;
+  }
+
+  override load(data: any): void {
+    super.load(data);
+    this.components = normalizeTriggerComponents(this.components);
   }
 }
diff --git a/src/graphics/SceneRenderer.ts b/src/graphics/SceneRenderer.ts
index 16c7de2..28483f1 100644
--- a/src/graphics/SceneRenderer.ts
+++ b/src/graphics/SceneRenderer.ts
@@ -12,7 +12,7 @@ export class SceneRenderer {
   }
 
   render(ctx: CanvasRenderingContext2D, scene: Scene): void {
-    const { camera, entities, activeSubscene, subsceneEntities } = scene;
+    const { camera, entities, activeSubscene, subsceneEntities, pickupAnimations } = scene;
 
     // Sorting Logic moved from Scene.render
     // Sort by Y (Depth) and Parallax
@@ -119,6 +119,17 @@ export class SceneRenderer {
     // 3. Render Subscene Layer
     this.renderLayer(ctx, subsceneLayer, scene, halfW, halfH);
 
+    // 3.5. Render transient pickup effects above scene objects.
+    if (pickupAnimations.length > 0) {
+      this.renderLayer(
+        ctx,
+        pickupAnimations.map((anim) => anim.entity),
+        scene,
+        halfW,
+        halfH
+      );
+    }
+
     // 4. Debug Rendering (Walkboxes/Triggers)
     if (this.game && this.game.editor && this.game.editor.enabled) {
       const selected = this.game.editor.selectedObject;
@@ -331,7 +342,7 @@ export class SceneRenderer {
 
     const halfW = ctx.canvas.width / 2;
     const halfH = ctx.canvas.height / 2;
-    const p = 1.0; // Debug shapes usually 1.0 parallax? Walkboxes are on floor, maybe 1.0.
+    const p = (obj as any).parallax !== undefined ? (obj as any).parallax : 1.0;
 
     ctx.save();
     ctx.translate(halfW, halfH);
diff --git a/src/index.css b/src/index.css
index 6236516..65fe111 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&display=swap');
+
 body {
   background-color: #000;
   color: #fff;
@@ -41,6 +43,7 @@ body {
   --ui-bg-color: #000000;
   --ui-panel-header-bg: #222222;
   --ui-label-color: #888888;
+  --ui-display-font: 'Space Grotesk', 'Segoe UI', sans-serif;
 
   /* Selection & Active States */
   --ui-selection-bg: #4ca149;
@@ -188,7 +191,7 @@ canvas {
   width: 17em;
   /* approx 200px at 12px font */
   background: rgba(0, 0, 0, 0.8);
-  border: 2px solid var(--ui-main-color);
+  border: 2px solid rgba(0, 0, 0, 0.8);
   color: var(--ui-main-color);
   display: flex;
   flex-direction: column;
@@ -201,7 +204,7 @@ canvas {
   width: 25em;
   /* approx 300px at 12px font */
   background: rgba(0, 0, 0, 0.8);
-  border: 2px solid var(--ui-main-color);
+  border: 2px solid rgba(0, 0, 0, 0.8);
   color: var(--ui-main-color);
   padding: 10px;
   overflow-y: auto;
@@ -287,6 +290,17 @@ canvas {
   align-items: center;
   border-bottom: 1px solid var(--ui-main-color);
   margin-bottom: 10px;
+  font-family: var(--ui-display-font);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
+}
+
+.hierarchy-id-text {
+  font-family: var(--ui-display-font);
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: -0.01em;
 }
 
 .editor-section {
@@ -298,6 +312,10 @@ canvas {
 .editor-section h4 {
   margin: 0 0 5px 0;
   color: #fff;
+  font-family: var(--ui-display-font);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
 button {
@@ -306,7 +324,10 @@ button {
   color: var(--ui-btn-text);
   cursor: pointer;
   padding: 2px 5px;
-  font-family: monospace;
+  font-family: var(--ui-display-font);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
 button:hover {
@@ -364,10 +385,13 @@ textarea,
   color: var(--ui-dropdown-text);
   box-sizing: border-box;
   box-sizing: border-box;
-  font-family: sans-serif;
+  font-family: var(--ui-display-font);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
 }
 
-.custom-select-container:focus,
+.custom-select-container:focus-visible,
 .custom-select-container:hover {
   border-color: var(--ui-input-focus-border);
   box-shadow: 0 0 5px rgba(121, 239, 164, 0.3);
@@ -378,24 +402,36 @@ textarea,
   border: 1px solid var(--ui-main-color);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   font-size: 0.9em;
+  font-family: var(--ui-display-font);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
+}
+
+.custom-select-container.parent-id-select,
+.custom-select-container.parent-id-select .custom-select-trigger,
+.custom-select-container.parent-id-select .custom-select-options,
+.custom-select-container.parent-id-select .custom-option {
+  text-transform: none;
+  letter-spacing: normal;
 }
 
 .custom-option:hover,
 .custom-option.focused {
-  background: var(--ui-dropdown-selection-bg);
-  color: #fff;
+  background: var(--ui-main-color);
+  color: #000;
 }
 
 .custom-option.selected {
   /* background: var(--ui-dropdown-selection-bg); REMOVED to avoid confusion */
-  color: #fff;
+  color: #000;
   font-weight: bold;
 }
 
 .custom-option.selected::before {
   content: '✓';
   margin-right: 5px;
-  color: var(--ui-main-color);
+  color: #000;
 }
 
 .file-upload {
@@ -508,3 +544,255 @@ input[type='file'] {
       16 16,
     pointer;
 }
+
+.cursor-hand {
+  cursor:
+    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M18 11V6a2 2 0 0 0-4 0v5%22/><path d=%22M14 10V4a2 2 0 0 0-4 0v8%22/><path d=%22M10 10.5V6a2 2 0 0 0-4 0v8%22/><path d=%22M18 8a2 2 0 1 1 4 0v7a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-5a2 2 0 1 1 4 0%22/></svg>')
+      16 16,
+    pointer;
+}
+
+.cursor-back {
+  cursor:
+    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M19 12H5%22/><path d=%22M12 19l-7-7 7-7%22/></svg>')
+      16 16,
+    pointer;
+}
+
+.ui-text-muted {
+  color: #888;
+}
+
+.ui-text-dim {
+  color: #666;
+}
+
+.ui-text-accent-blue {
+  color: #aaf !important;
+}
+
+.ui-text-accent-red {
+  color: #faa !important;
+}
+
+.ui-text-accent-yellow {
+  color: #ffaa00 !important;
+}
+
+.ui-text-accent-green {
+  color: #79efa4 !important;
+}
+
+.ui-text-accent-cyan {
+  color: #00ffff !important;
+}
+
+.ui-text-accent-purple {
+  color: #f0aaff !important;
+}
+
+.ui-text-light {
+  color: #ccc;
+}
+
+.ui-text-bright {
+  color: #ddd;
+}
+
+.ui-text-small {
+  font-size: 0.8em;
+}
+
+.ui-text-tiny {
+  font-size: 0.75em;
+}
+
+.ui-text-micro {
+  font-size: 10px;
+}
+
+.ui-text-italic {
+  font-style: italic;
+}
+
+.ui-font-bold {
+  font-weight: bold;
+}
+
+.ui-inline-flex-center {
+  display: flex;
+  align-items: center;
+}
+
+.ui-divider-blue {
+  border-top: 1px solid #aaf;
+}
+
+.ui-divider-red {
+  border-top: 1px solid #faa;
+}
+
+.ui-divider-yellow {
+  border-top: 1px solid #ffaa00;
+}
+
+.ui-divider-neutral {
+  border-top: 1px solid #333;
+}
+
+.ui-divider-purple {
+  border-top: 1px solid #f0aaff;
+}
+
+.ui-panel-card {
+  background: #222;
+}
+
+.ui-panel-card-warm {
+  background: #332;
+  border: 1px solid #553;
+}
+
+.ui-button-neutral {
+  background: #444;
+  border: 1px solid #666;
+  color: #fff;
+}
+
+.file-browser-modal {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  color: var(--ui-main-color);
+}
+
+.editor-choice-dialog-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5200;
+}
+
+.editor-choice-dialog {
+  width: min(28rem, calc(100vw - 40px));
+  background: rgba(10, 10, 10, 0.96);
+  border: 1px solid var(--ui-input-focus-border);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
+  padding: 14px;
+  color: var(--ui-input-text);
+  font-size: 12px;
+}
+
+.editor-choice-dialog-title {
+  font-family: var(--ui-display-font);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
+  color: var(--ui-main-color);
+  margin-bottom: 10px;
+}
+
+.editor-choice-dialog-message {
+  color: #c7d9d1;
+  line-height: 1.45;
+  margin-bottom: 14px;
+}
+
+.editor-choice-dialog-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.file-browser-window {
+  width: 500px;
+  max-width: 95vw;
+  height: 600px;
+  max-height: 90vh;
+  background-color: #000;
+  border: 2px solid var(--ui-main-color);
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  font-size: 12px;
+}
+
+.file-browser-header {
+  border-bottom: 1px solid var(--ui-main-color);
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-browser-title-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.file-browser-path {
+  font-size: 12px;
+  color: #888;
+}
+
+.file-browser-list {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #333;
+  margin-bottom: 10px;
+  outline: none;
+  position: relative;
+}
+
+.file-browser-error {
+  color: #f66;
+}
+
+.file-browser-empty {
+  color: #666;
+  padding: 5px;
+}
+
+.file-browser-item {
+  padding: 5px;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--ui-main-color);
+  border: 1px solid transparent;
+}
+
+.file-browser-item.is-dir {
+  color: #ffff00;
+}
+
+.file-browser-item.is-selected {
+  background-color: var(--ui-selection-bg);
+  color: var(--ui-selection-text);
+  border-color: var(--ui-selection-bg);
+}
+
+.file-browser-form-row {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.file-browser-label {
+  width: 60px;
+}
+
+.file-browser-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
diff --git a/src/mechanics/NlpCascade.ts b/src/mechanics/NlpCascade.ts
index 7fbe2e2..9c1af87 100644
--- a/src/mechanics/NlpCascade.ts
+++ b/src/mechanics/NlpCascade.ts
@@ -3,6 +3,7 @@ import type { ParserCascadeEnvelope, ParserContext, ParserToolAction } from './p
 import type { TextAssetManager } from '../core/TextAssetManager';
 
 const NLP_CONFIDENCE_THRESHOLD = 0.58;
+const NLP_MODEL_CACHE_PREFIX = 'quest:nlp:model:v1:';
 
 type SupportedIntent = 'look' | 'examine' | 'take' | 'goTo' | 'showInventory';
 
@@ -81,12 +82,25 @@ export class NlpCascade {
         container
       );
 
+      const cacheKey = this.getModelCacheKey(trainingData);
+      const cachedModel = this.readCachedModel(cacheKey);
+      if (cachedModel) {
+        try {
+          this.manager.import(cachedModel);
+          this.ready = true;
+          return;
+        } catch {
+          this.removeCachedModel(cacheKey);
+        }
+      }
+
       for (const [intent, utterances] of Object.entries(trainingData)) {
         for (const utterance of utterances) {
           this.manager.addDocument('en', utterance, intent);
         }
       }
       await this.manager.train();
+      this.writeCachedModel(cacheKey, this.manager.export(true));
       this.ready = true;
     })();
 
@@ -235,4 +249,45 @@ export class NlpCascade {
       /\bhave\b/.test(lowered)
     );
   }
+
+  private getStorage(): Storage | null {
+    if (typeof window === 'undefined' || !window.localStorage) return null;
+    return window.localStorage;
+  }
+
+  private getModelCacheKey(trainingData: Record<string, string[]>): string {
+    return `${NLP_MODEL_CACHE_PREFIX}${this.hashString(JSON.stringify(trainingData))}`;
+  }
+
+  private readCachedModel(cacheKey: string): string | null {
+    try {
+      return this.getStorage()?.getItem(cacheKey) || null;
+    } catch {
+      return null;
+    }
+  }
+
+  private writeCachedModel(cacheKey: string, data: string): void {
+    try {
+      this.getStorage()?.setItem(cacheKey, data);
+    } catch {
+      // Ignore storage quota/privacy mode failures and keep runtime behavior unchanged.
+    }
+  }
+
+  private removeCachedModel(cacheKey: string): void {
+    try {
+      this.getStorage()?.removeItem(cacheKey);
+    } catch {
+      // Ignore storage failures.
+    }
+  }
+
+  private hashString(value: string): string {
+    let hash = 5381;
+    for (let i = 0; i < value.length; i += 1) {
+      hash = (hash * 33) ^ value.charCodeAt(i);
+    }
+    return (hash >>> 0).toString(36);
+  }
 }
diff --git a/src/mechanics/Parser.ts b/src/mechanics/Parser.ts
index 8f840a0..c61c1b8 100644
--- a/src/mechanics/Parser.ts
+++ b/src/mechanics/Parser.ts
@@ -10,6 +10,7 @@ import {
 } from './parserLanguage';
 import { ParserWorldModelBuilder } from './ParserWorldModelBuilder';
 import { Entity } from '../entities/Entity';
+import { SceneObject } from '../entities/SceneObject';
 import { ComponentSystem } from '../systems/ComponentSystem';
 import type {
   ParserCascadeEnvelope,
@@ -542,39 +543,39 @@ export class Parser {
     }
   }
 
-  private getPlayerFacingEntityTitle(entity: Entity): string | null {
-    const title = this.game.textAssets.getResolvedObjectField(entity, 'title');
+  private getPlayerFacingObjectTitle(sceneObject: SceneObject): string | null {
+    const title = this.game.textAssets.getResolvedObjectField(sceneObject as any, 'title');
     return title && title.trim() ? title.trim() : null;
   }
 
-  private getEntityLookupTokens(entity: Entity): string[] {
-    const title = this.getPlayerFacingEntityTitle(entity);
-    const synonyms = this.game.textAssets.getResolvedObjectListField(entity as any, 'synonyms');
+  private getObjectLookupTokens(sceneObject: SceneObject): string[] {
+    const title = this.getPlayerFacingObjectTitle(sceneObject);
+    const synonyms = this.game.textAssets.getResolvedObjectListField(sceneObject as any, 'synonyms');
     return Array.from(
       new Set([title, ...synonyms].filter((item): item is string => !!item && !!item.trim()))
     ).map((item) => item.toUpperCase());
   }
 
-  private getResolutionOptionTitles(entities: Entity[]): string[] | null {
-    const titles = entities
-      .map((entity) => this.getPlayerFacingEntityTitle(entity))
+  private getResolutionOptionTitles(sceneObjects: SceneObject[]): string[] | null {
+    const titles = sceneObjects
+      .map((sceneObject) => this.getPlayerFacingObjectTitle(sceneObject))
       .filter((title): title is string => !!title);
-    if (titles.length !== entities.length) return null;
+    if (titles.length !== sceneObjects.length) return null;
     return Array.from(new Set(titles));
   }
 
-  private areResolutionOptionsDistinct(entities: Entity[]): boolean {
-    const titles = this.getResolutionOptionTitles(entities);
+  private areResolutionOptionsDistinct(sceneObjects: SceneObject[]): boolean {
+    const titles = this.getResolutionOptionTitles(sceneObjects);
     if (!titles) return false;
-    return titles.length === entities.length;
+    return titles.length === sceneObjects.length;
   }
 
-  private getEntitySelectionPriority(entity: Entity): {
+  private getSceneObjectSelectionPriority(sceneObject: SceneObject): {
     bucket: number;
     order: number;
     distance: number;
   } {
-    const inventoryIndex = this.game.inventory.indexOf(entity);
+    const inventoryIndex = this.game.inventory.indexOf(sceneObject as any);
     if (inventoryIndex >= 0) {
       return {
         bucket: 0,
@@ -586,8 +587,9 @@ export class Parser {
     const scene = this.game.sceneManager.currentScene;
     const player = scene?.player;
     if (player) {
-      const dx = (entity.x || 0) - (player.x || 0);
-      const dy = (entity.y || 0) - (player.y || 0);
+      const location = this.getSceneObjectReferencePoint(sceneObject);
+      const dx = location.x - (player.x || 0);
+      const dy = location.y - (player.y || 0);
       return {
         bucket: 1,
         order: Number.MAX_SAFE_INTEGER,
@@ -602,11 +604,32 @@ export class Parser {
     };
   }
 
-  private choosePreferredEntity(entities: Entity[]): Entity | null {
-    if (!entities.length) return null;
-    return [...entities].sort((left, right) => {
-      const a = this.getEntitySelectionPriority(left);
-      const b = this.getEntitySelectionPriority(right);
+  private getSceneObjectReferencePoint(sceneObject: SceneObject): { x: number; y: number } {
+    const polygon = (sceneObject as any).poly;
+    if (Array.isArray(polygon) && polygon.length) {
+      const sum = polygon.reduce(
+        (acc: { x: number; y: number }, point: { x: number; y: number }) => ({
+          x: acc.x + (point?.x || 0),
+          y: acc.y + (point?.y || 0),
+        }),
+        { x: 0, y: 0 }
+      );
+      return {
+        x: sum.x / polygon.length,
+        y: sum.y / polygon.length,
+      };
+    }
+    return {
+      x: Number((sceneObject as any).x) || 0,
+      y: Number((sceneObject as any).y) || 0,
+    };
+  }
+
+  private choosePreferredObject<T extends SceneObject>(sceneObjects: T[]): T | null {
+    if (!sceneObjects.length) return null;
+    return [...sceneObjects].sort((left, right) => {
+      const a = this.getSceneObjectSelectionPriority(left);
+      const b = this.getSceneObjectSelectionPriority(right);
 
       if (a.bucket !== b.bucket) return a.bucket - b.bucket;
       if (a.order !== b.order) return a.order - b.order;
@@ -615,11 +638,11 @@ export class Parser {
     })[0];
   }
 
-  private getScopeCandidates(sliceNames: Array<keyof ParserScope>): Entity[] {
+  private getScopeCandidates(sliceNames: Array<keyof ParserScope>): SceneObject[] {
     const scope = this.activeScope || this.worldModelBuilder.build('', this.pendingState).scope;
-    const candidates: Entity[] = [];
+    const candidates: SceneObject[] = [];
     for (const sliceName of sliceNames) {
-      candidates.push(...scope[sliceName]);
+      candidates.push(...(scope[sliceName] as SceneObject[]));
     }
     return Array.from(new Set(candidates));
   }
@@ -695,15 +718,43 @@ export class Parser {
       };
     }
 
+    const broadResolved = this.resolveEntityTargetInCandidates(
+      rawTarget,
+      this.getScopeCandidates(['visible', 'held']),
+      clarificationKey
+    );
+    if (broadResolved.status === 'found') {
+      return {
+        status: 'found',
+        node: {
+          id: broadResolved.entity.name,
+          title: this.getPlayerFacingObjectTitle(broadResolved.entity) || undefined,
+        },
+      };
+    }
+    if (broadResolved.status === 'ambiguous') {
+      return {
+        status: 'ambiguous',
+        message: broadResolved.message,
+        options: broadResolved.options,
+      };
+    }
+    if (broadResolved.status === 'escalate') {
+      return {
+        status: 'escalate',
+        code: broadResolved.code,
+      };
+    }
+
     return { status: 'not_found' };
   }
 
   private resolveEntityTargetInCandidates(
     rawTarget: string,
-    candidates: Entity[],
+    candidates: SceneObject[],
     clarificationKey: string
   ):
-    | { status: 'found'; entity: Entity }
+    | { status: 'found'; entity: SceneObject }
     | { status: 'not_found' }
     | { status: 'ambiguous'; message: string; options: string[] }
     | { status: 'escalate'; code: string } {
@@ -712,13 +763,13 @@ export class Parser {
       .toUpperCase();
     if (!normalizedTarget) return { status: 'not_found' };
 
-    const exactMatches = candidates.filter((entity: Entity) =>
-      this.getEntityLookupTokens(entity).includes(normalizedTarget)
+    const exactMatches = candidates.filter((sceneObject: SceneObject) =>
+      this.getObjectLookupTokens(sceneObject).includes(normalizedTarget)
     );
     if (exactMatches.length === 1) return { status: 'found', entity: exactMatches[0] };
     if (exactMatches.length > 1) {
       if (!this.areResolutionOptionsDistinct(exactMatches)) {
-        const preferred = this.choosePreferredEntity(exactMatches);
+        const preferred = this.choosePreferredObject(exactMatches);
         if (preferred) return { status: 'found', entity: preferred };
       }
       const optionTitles = this.getResolutionOptionTitles(exactMatches);
@@ -730,14 +781,14 @@ export class Parser {
       };
     }
 
-    const partialMatches = candidates.filter((entity: Entity) => {
-      const lookupTokens = this.getEntityLookupTokens(entity);
+    const partialMatches = candidates.filter((sceneObject: SceneObject) => {
+      const lookupTokens = this.getObjectLookupTokens(sceneObject);
       return lookupTokens.some((token) => token.includes(normalizedTarget));
     });
     if (partialMatches.length === 1) return { status: 'found', entity: partialMatches[0] };
     if (partialMatches.length > 1) {
       if (!this.areResolutionOptionsDistinct(partialMatches)) {
-        const preferred = this.choosePreferredEntity(partialMatches);
+        const preferred = this.choosePreferredObject(partialMatches);
         if (preferred) return { status: 'found', entity: preferred };
       }
       const optionTitles = this.getResolutionOptionTitles(partialMatches);
@@ -754,14 +805,14 @@ export class Parser {
 
   private resolveEntityTargetWithMessages(
     rawTarget: string | null,
-    candidates: Entity[],
+    candidates: SceneObject[],
     messages?: {
       missing?: string;
       ambiguous?: string;
       notFound?: string;
     }
   ):
-    | { status: 'found'; entity: Entity }
+    | { status: 'found'; entity: SceneObject }
     | { status: 'not_found'; message: string }
     | { status: 'needs_clarification'; message: string; options: string[] }
     | { status: 'escalate'; code: string } {
@@ -822,7 +873,7 @@ export class Parser {
         recoverable: true,
       };
     }
-    return this.game.lookEntity(resolved.entity);
+    return this.game.lookEntity(resolved.entity as any);
   }
 
   private resolveExamineTarget(rawTarget: string | null): GameActionOutcome {
@@ -865,7 +916,7 @@ export class Parser {
         };
       }
       if (broadResolved?.status === 'found') {
-        return this.game.examineEntity(broadResolved.entity);
+        return this.game.examineEntity(broadResolved.entity as any);
       }
       return {
         status: 'failed',
@@ -884,7 +935,7 @@ export class Parser {
         recoverable: true,
       };
     }
-    return this.game.examineEntity(resolved.entity);
+    return this.game.examineEntity(resolved.entity as any);
   }
 
   private resolveRelationTarget(
@@ -1030,7 +1081,7 @@ export class Parser {
         recoverable: true,
       };
     }
-    return this.game.takeEntity(resolved.entity);
+    return this.game.takeEntity(resolved.entity as Entity);
   }
 
   private resolveGoToTarget(rawTarget: string | null): GameActionOutcome {
@@ -1050,7 +1101,7 @@ export class Parser {
 
     const resolved = this.resolveEntityTargetInCandidates(
       rawTarget,
-      this.getScopeCandidates(['visible']),
+      this.getScopeCandidates(['visible']).filter((candidate): candidate is Entity => candidate instanceof Entity),
       'parser.go_to_which_one'
     );
     if (resolved.status === 'escalate') {
@@ -1066,7 +1117,7 @@ export class Parser {
       };
     }
     if (resolved.status === 'found') {
-      return this.game.goToEntity(resolved.entity);
+      return this.game.goToEntity(resolved.entity as any);
     }
     return {
       status: 'failed',
@@ -1083,7 +1134,7 @@ export class Parser {
   ): GameActionOutcome {
     const resolution = this.resolveEntityTargetWithMessages(
       action.query,
-      this.getScopeCandidates(action.scopes),
+      this.getScopeCandidates(action.scopes).filter((candidate): candidate is Entity => candidate instanceof Entity),
       action.messages
     );
 
@@ -1124,7 +1175,7 @@ export class Parser {
       };
     }
 
-    if (!this.isEntityValidForCommandArgument(resolution.entity, action.validation)) {
+    if (!this.isEntityValidForCommandArgument(resolution.entity as Entity, action.validation)) {
       return {
         status: 'failed',
         code: 'custom_command_invalid_argument',
@@ -1515,7 +1566,7 @@ export class Parser {
 
   private getPlanStateDisplayValue(value: unknown): string | null {
     if (value instanceof Entity) {
-      return this.getPlayerFacingEntityTitle(value) || null;
+      return this.getPlayerFacingObjectTitle(value) || null;
     }
     if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
       return String(value);
@@ -1563,7 +1614,7 @@ export class Parser {
     if (!validation) return true;
 
     const normalizedEntityId = entity.name.trim().toUpperCase();
-    const normalizedTitle = (this.getPlayerFacingEntityTitle(entity) || '').trim().toUpperCase();
+    const normalizedTitle = (this.getPlayerFacingObjectTitle(entity) || '').trim().toUpperCase();
     const normalizedSynonyms = this.game.textAssets
       .getResolvedObjectListField(entity as any, 'synonyms')
       .map((item: string) => item.trim().toUpperCase())
diff --git a/src/mechanics/ParserWorldModelBuilder.ts b/src/mechanics/ParserWorldModelBuilder.ts
index e76e104..ef9e7e0 100644
--- a/src/mechanics/ParserWorldModelBuilder.ts
+++ b/src/mechanics/ParserWorldModelBuilder.ts
@@ -1,5 +1,6 @@
 import type { Game } from '../core/Game';
-import type { Entity } from '../entities/Entity';
+import { Entity } from '../entities/Entity';
+import type { SceneObject } from '../entities/SceneObject';
 import type { Scene } from '../scene/Scene';
 import { ComponentSystem } from '../systems/ComponentSystem';
 import type {
@@ -31,6 +32,12 @@ export class ParserWorldModelBuilder {
   private buildContext(rawInput: string, pendingState: ParserPendingState | null): ParserContext {
     const scene = this.game.sceneManager.currentScene;
     const normalizedInput = rawInput.trim().toUpperCase();
+    const playerContext = scene?.player
+      ? this.compactRecord({
+          x: Math.round(scene.player.x),
+          y: Math.round(scene.player.y),
+        })
+      : undefined;
     const sceneContext = scene ? this.buildSceneContext(scene) : undefined;
     const entities = scene ? this.buildEntityContexts(scene) : [];
     const inventory = this.buildInventoryContexts();
@@ -47,6 +54,7 @@ export class ParserWorldModelBuilder {
     return this.compactRecord({
       rawInput,
       normalizedInput,
+      player: playerContext,
       scene: sceneContext,
       entities,
       inventory,
@@ -66,19 +74,32 @@ export class ParserWorldModelBuilder {
   }
 
   private buildEntityContexts(scene: Scene): ParserEntityContext[] {
-    return (scene.entities || [])
-      .map((entity: any) => {
-        const title = this.game.textAssets.getResolvedObjectField(entity, 'title')?.trim();
+    const sceneObjects: SceneObject[] = [...(scene.entities || []), ...(scene.triggerboxes || [])];
+    return sceneObjects
+      .map((sceneObject) => {
+        const title = this.getPlayerFacingObjectTitle(sceneObject);
         if (!title) return null;
-        const synonyms = this.game.textAssets.getResolvedObjectListField(entity, 'synonyms');
-        const interactions = Object.keys(entity.interactions || {});
+        const synonyms = this.game.textAssets.getResolvedObjectListField(sceneObject as any, 'synonyms');
+        const interactions = Object.keys(sceneObject.interactions || {});
+        const isItem = !!sceneObject.components?.find((component: any) => component?.type === 'Item');
+        const isDirectSceneObject = this.isDirectSceneObject(scene, sceneObject);
+        const coordinates = isDirectSceneObject ? this.getSceneObjectCoordinates(sceneObject) : undefined;
+        const reachable =
+          isDirectSceneObject &&
+          !ComponentSystem.getInteractionDistanceError(sceneObject as any, scene.player)
+            ? true
+            : undefined;
         return this.compactRecord<ParserEntityContext>({
-          id: entity.name,
-          type: entity.type,
+          id: sceneObject.name,
           title,
+          item: isItem || undefined,
+          reachable,
+          ...coordinates,
           synonyms,
-          description: this.game.textAssets.getResolvedObjectField(entity, 'description') || undefined,
-          details: this.game.textAssets.getResolvedObjectField(entity, 'details') || undefined,
+          description:
+            this.game.textAssets.getResolvedObjectField(sceneObject as any, 'description') || undefined,
+          details:
+            this.game.textAssets.getResolvedObjectField(sceneObject as any, 'details') || undefined,
           interactions,
         });
       })
@@ -156,29 +177,25 @@ export class ParserWorldModelBuilder {
 
   private buildScope(): ParserScope {
     const scene = this.game.sceneManager.currentScene;
-    const visible = scene
-      ? (scene.entities || []).filter(
-          (entity: Entity) => !entity.disabled && !!this.getPlayerFacingEntityTitle(entity)
-        )
-      : [];
+    const visible = scene ? this.getTextVisibleSceneObjects(scene) : [];
     const held = (this.game.inventory || []).filter(
-      (entity: Entity) => !!this.getPlayerFacingEntityTitle(entity)
+      (entity: Entity) => !!this.getPlayerFacingObjectTitle(entity)
     );
-    const takable = visible.filter((entity: Entity) => {
+    const takable = visible.filter((sceneObject): sceneObject is Entity => sceneObject instanceof Entity).filter((entity: Entity) => {
       const isItem =
         entity.components && entity.components.find((component: any) => component.type === 'Item');
       return !!isItem || !!entity.isTakeable;
     });
     const subscene = scene?.activeSubscene
-      ? visible.filter((entity: Entity) => scene.subsceneEntities.has(entity as any))
+      ? visible.filter((sceneObject: SceneObject) => scene.subsceneEntities.has(sceneObject as any))
       : [];
     const reachable = scene
       ? visible.filter(
-          (entity: Entity) =>
-            !ComponentSystem.getInteractionDistanceError(entity as any, scene.player)
+          (sceneObject: SceneObject) =>
+            !ComponentSystem.getInteractionDistanceError(sceneObject as any, scene.player)
         )
       : [];
-    const examinable = this.uniqueEntities([...held, ...subscene, ...reachable]);
+    const examinable = this.uniqueObjects([...held, ...subscene, ...reachable]);
     return {
       visible,
       held,
@@ -189,11 +206,41 @@ export class ParserWorldModelBuilder {
     };
   }
 
-  private getPlayerFacingEntityTitle(entity: Entity): string | null {
-    const title = this.game.textAssets.getResolvedObjectField(entity, 'title');
+  private getTextVisibleSceneObjects(scene: Scene): SceneObject[] {
+    return [...(scene.entities || []), ...(scene.triggerboxes || [])].filter(
+      (sceneObject: SceneObject) => !sceneObject.disabled && !!this.getPlayerFacingObjectTitle(sceneObject)
+    );
+  }
+
+  private getPlayerFacingObjectTitle(sceneObject: SceneObject): string | null {
+    const title = this.game.textAssets.getResolvedObjectField(sceneObject as any, 'title');
     return title && title.trim() ? title.trim() : null;
   }
 
+  private isDirectSceneObject(scene: Scene, sceneObject: SceneObject): boolean {
+    const placement = scene.getSpatialPlacementForObject(sceneObject);
+    return !placement?.parentNodeId;
+  }
+
+  private getSceneObjectCoordinates(sceneObject: SceneObject): { x: number; y: number } | undefined {
+    if (typeof (sceneObject as any).x === 'number' && typeof (sceneObject as any).y === 'number') {
+      return {
+        x: Math.round((sceneObject as any).x),
+        y: Math.round((sceneObject as any).y),
+      };
+    }
+
+    const poly = Array.isArray((sceneObject as any).poly) ? (sceneObject as any).poly : null;
+    if (!poly?.length) return undefined;
+
+    const xs = poly.map((point: { x: number; y: number }) => point.x);
+    const ys = poly.map((point: { x: number; y: number }) => point.y);
+    return {
+      x: Math.round((Math.min(...xs) + Math.max(...xs)) / 2),
+      y: Math.round((Math.min(...ys) + Math.max(...ys)) / 2),
+    };
+  }
+
   private compactRecord<T extends Record<string, unknown>>(value: T): T {
     const result: Record<string, unknown> = {};
     for (const [key, entry] of Object.entries(value)) {
@@ -214,7 +261,7 @@ export class ParserWorldModelBuilder {
     return result as T;
   }
 
-  private uniqueEntities(entities: Entity[]): Entity[] {
-    return Array.from(new Set(entities));
+  private uniqueObjects<T extends SceneObject>(sceneObjects: T[]): T[] {
+    return Array.from(new Set(sceneObjects));
   }
 }
diff --git a/src/mechanics/parserTypes.ts b/src/mechanics/parserTypes.ts
index 80341fd..89cbd7f 100644
--- a/src/mechanics/parserTypes.ts
+++ b/src/mechanics/parserTypes.ts
@@ -1,10 +1,14 @@
 import type { GameActionOutcome } from '../core/GameActionTypes';
 import type { Entity } from '../entities/Entity';
+import type { SceneObject } from '../entities/SceneObject';
 
 export type ParserEntityContext = {
   id: string;
-  type: string;
   title: string;
+  item?: true;
+  reachable?: true;
+  x?: number;
+  y?: number;
   synonyms?: string[];
   description?: string;
   details?: string;
@@ -107,6 +111,10 @@ export type ParserCommandSpec = {
 export type ParserContext = {
   rawInput: string;
   normalizedInput: string;
+  player?: {
+    x: number;
+    y: number;
+  };
   scene?: {
     id: string;
     title?: string;
@@ -121,12 +129,12 @@ export type ParserContext = {
 };
 
 export type ParserScope = {
-  visible: Entity[];
+  visible: SceneObject[];
   held: Entity[];
   takable: Entity[];
-  reachable: Entity[];
-  examinable: Entity[];
-  subscene: Entity[];
+  reachable: SceneObject[];
+  examinable: SceneObject[];
+  subscene: SceneObject[];
 };
 
 export type ParserWorldModel = {
diff --git a/src/scene/Scene.ts b/src/scene/Scene.ts
index f3df7ae..10b9882 100644
--- a/src/scene/Scene.ts
+++ b/src/scene/Scene.ts
@@ -11,7 +11,12 @@ import type { IGame } from '../core/IGame';
 import { toVisualPosition } from '../utils/Parallax';
 import { updateSceneCamera } from './SceneCamera';
 import { resolveSceneTargets, cleanupClosingSubscene } from './SceneSubscene';
-import { handleSceneClick, activateSceneObject } from './SceneInteraction';
+import {
+  handleSceneClick,
+  activateSceneObject,
+  getHoverCursorAtScreenPoint,
+  type HoverCursor,
+} from './SceneInteraction';
 import { useEditorStore } from '../store/editorStore';
 import type {
   SpatialIndex,
@@ -21,6 +26,15 @@ import type {
 } from './spatialTypes';
 import type { SubsceneComponent } from '../systems/ComponentSystem';
 
+interface PickupAnimation {
+  entity: Entity;
+  startY: number;
+  lift: number;
+  duration: number;
+  elapsed: number;
+  baseModelScale: number;
+}
+
 export interface SceneScaling {
   enabled: boolean;
   min: number;
@@ -69,6 +83,7 @@ export class Scene {
   filename: string;
   background: HTMLImageElement | null;
   entities: Entity[];
+  pickupAnimations: PickupAnimation[] = [];
   walkbox: Walkbox[];
   triggerboxes: Triggerbox[];
   scaling: SceneScaling;
@@ -117,7 +132,9 @@ export class Scene {
     this._activeSubscene = value;
   }
 
-  private normalizeSpatialPlacement(value: SpatialPlacement | undefined | null): SpatialPlacement | null {
+  private normalizeSpatialPlacement(
+    value: SpatialPlacement | undefined | null
+  ): SpatialPlacement | null {
     if (!value) return null;
     const parentNodeId = typeof value.parentNodeId === 'string' ? value.parentNodeId.trim() : '';
     const relation =
@@ -278,12 +295,60 @@ export class Scene {
     const index = this.entities.indexOf(entity);
     if (index > -1) {
       this.entities.splice(index, 1);
+      if (this.subsceneEntities.has(entity)) {
+        this.subsceneEntities.delete(entity);
+      }
       if (this.player === entity) {
         this.player = null;
       }
     }
   }
 
+  removeTriggerbox(triggerbox: Triggerbox): void {
+    const index = this.triggerboxes.indexOf(triggerbox);
+    if (index > -1) {
+      this.triggerboxes.splice(index, 1);
+      if (this.subsceneEntities.has(triggerbox)) {
+        this.subsceneEntities.delete(triggerbox);
+      }
+      if (this.activeSubscene && triggerbox.name === this.activeSubscene) {
+        this.activeSubscene = null;
+      }
+    }
+  }
+
+  removeWalkbox(walkbox: Walkbox): void {
+    const index = this.walkbox.indexOf(walkbox);
+    if (index > -1) {
+      this.walkbox.splice(index, 1);
+      if (this.subsceneEntities.has(walkbox)) {
+        this.subsceneEntities.delete(walkbox);
+      }
+    }
+  }
+
+  playPickupAnimation(entity: Entity): void {
+    const clone = Entity.fromJSON(this.game, entity.toJSON() as EntityData);
+    clone.disabled = false;
+    clone.visible = true;
+    clone.locked = true;
+    clone.groupID = null;
+    clone.components = [];
+    clone.interactions = {};
+    clone.opacity = entity.opacity ?? 1.0;
+    // @ts-ignore
+    clone.scene = this;
+
+    this.pickupAnimations.push({
+      entity: clone,
+      startY: clone.y,
+      lift: 26,
+      duration: 260,
+      elapsed: 0,
+      baseModelScale: clone.modelScale || 1,
+    });
+  }
+
   findEntity(name: string): Entity | undefined {
     const normalized = name.toUpperCase();
     return this.entities.find((e) => {
@@ -574,30 +639,8 @@ export class Scene {
     return null;
   }
 
-  checkHover(x: number, y: number): boolean {
-    // Transform Screen Coordinates to World Coordinates
-    const screenW = 420;
-    const screenH = 300;
-    const halfW = screenW / 2;
-    const halfH = screenH / 2;
-    const worldX = (x - halfW) / this.camera.zoom + this.camera.x;
-    const worldY = (y - halfH) / this.camera.zoom + this.camera.y;
-
-    const obj = this.getHitObject(worldX, worldY);
-
-    if (obj && obj.components) {
-      const sub = obj.components.find((c) => c.type === 'Subscene') as any;
-      if (sub) {
-        // If this trigger opens the CURRENTLY active subscene, ignore it (cursor shouldn't change)
-        const currentSubsceneId = (obj.name || sub.targetGroupId || '').trim();
-        if (this.activeSubscene && currentSubsceneId && currentSubsceneId === this.activeSubscene) {
-          return false;
-        }
-        return true;
-      }
-    }
-
-    return false;
+  checkHover(x: number, y: number): HoverCursor | null {
+    return getHoverCursorAtScreenPoint(this, x, y);
   }
 
   onClick(x: number, y: number): void {
@@ -627,6 +670,23 @@ export class Scene {
         entity.update(deltaTime);
       }
     });
+
+    if (this.pickupAnimations.length > 0) {
+      const nextAnimations: PickupAnimation[] = [];
+      for (const anim of this.pickupAnimations) {
+        anim.elapsed += deltaTime;
+        const progress = Math.min(anim.elapsed / anim.duration, 1);
+        const eased = 1 - Math.pow(1 - progress, 2);
+        anim.entity.y = anim.startY - anim.lift * eased;
+        anim.entity.opacity = Math.max(0, 1 - progress);
+        anim.entity.modelScale = anim.baseModelScale * (1 + 0.1 * eased);
+        anim.entity.update(deltaTime);
+        if (progress < 1) {
+          nextAnimations.push(anim);
+        }
+      }
+      this.pickupAnimations = nextAnimations;
+    }
   }
 
   // -----------------------------------------------------
diff --git a/src/scene/SceneInteraction.ts b/src/scene/SceneInteraction.ts
index 05bebc2..2fa9122 100644
--- a/src/scene/SceneInteraction.ts
+++ b/src/scene/SceneInteraction.ts
@@ -2,11 +2,19 @@ import type { Scene } from './Scene';
 import { SceneObject } from '../entities/SceneObject';
 import { Triggerbox } from '../entities/Triggerbox';
 import { ComponentSystem } from '../systems/ComponentSystem';
-import { Geometry } from '../utils/Geometry';
+
+export type HoverCursor = 'eye' | 'hand' | 'back';
+
+function getScreenSize(scene: Scene): { width: number; height: number } {
+  const canvas = scene.game?.canvas;
+  return {
+    width: canvas?.width || 420,
+    height: canvas?.height || 300,
+  };
+}
 
 function toWorld(scene: Scene, x: number, y: number): { x: number; y: number } {
-  const screenW = 420;
-  const screenH = 300;
+  const { width: screenW, height: screenH } = getScreenSize(scene);
   const halfW = screenW / 2;
   const halfH = screenH / 2;
   return {
@@ -21,8 +29,7 @@ function toWorldForParallax(
   y: number,
   parallax: number = 1.0
 ): { x: number; y: number } {
-  const screenW = 420;
-  const screenH = 300;
+  const { width: screenW, height: screenH } = getScreenSize(scene);
   const halfW = screenW / 2;
   const halfH = screenH / 2;
   return {
@@ -32,48 +39,7 @@ function toWorldForParallax(
 }
 
 function findVisibleHitObject(scene: Scene, screenX: number, screenY: number): SceneObject | null {
-  const screenW = 420;
-  const screenH = 300;
-  const halfW = screenW / 2;
-  const halfH = screenH / 2;
-  const camX = scene.camera.x;
-  const camY = scene.camera.y;
-  const zoom = scene.camera.zoom;
-
-  const entities = scene.entities || [];
-  for (let i = entities.length - 1; i >= 0; i--) {
-    const entity = entities[i];
-    if (entity.disabled || !entity.visible) continue;
-
-    const p = entity.parallax !== undefined ? entity.parallax : 1.0;
-    const vOx = (entity as any).visualOffset ? (entity as any).visualOffset.x : 0;
-    const vOy = (entity as any).visualOffset ? (entity as any).visualOffset.y : 0;
-    const worldX = (screenX - halfW) / zoom + camX * p - vOx;
-    const worldY = (screenY - halfH) / zoom + camY * p - vOy;
-
-    if (entity.hitTest(worldX, worldY)) return entity;
-  }
-
-  const worldPos = {
-    x: (screenX - halfW) / zoom + camX,
-    y: (screenY - halfH) / zoom + camY,
-  };
-
-  if (scene.triggerboxes) {
-    for (const tb of scene.triggerboxes) {
-      if (tb.disabled || !tb.visible) continue;
-      if (Geometry.isPointInPolygon(worldPos, tb.poly)) return tb;
-    }
-  }
-
-  if (scene.walkbox) {
-    for (const wb of scene.walkbox) {
-      if (wb.disabled || !wb.visible) continue;
-      if (Geometry.isPointInPolygon(worldPos, wb.poly)) return wb;
-    }
-  }
-
-  return null;
+  return findTopHitInCandidates(scene, getSortedClickableCandidates(scene), screenX, screenY);
 }
 
 function isHitAtScreenPoint(
@@ -82,8 +48,7 @@ function isHitAtScreenPoint(
   screenX: number,
   screenY: number
 ): boolean {
-  const screenW = 420;
-  const screenH = 300;
+  const { width: screenW, height: screenH } = getScreenSize(scene);
   const halfW = screenW / 2;
   const halfH = screenH / 2;
   const camX = scene.camera.x;
@@ -101,12 +66,18 @@ function isHitAtScreenPoint(
   }
 
   const worldPos = {
-    x: (screenX - halfW) / zoom + camX,
-    y: (screenY - halfH) / zoom + camY,
+    x: (screenX - halfW) / zoom + camX * (((obj as any).parallax !== undefined ? (obj as any).parallax : 1.0)),
+    y: (screenY - halfH) / zoom + camY * (((obj as any).parallax !== undefined ? (obj as any).parallax : 1.0)),
   };
   return obj.hitTest(worldPos.x, worldPos.y);
 }
 
+function getClickableTypePriority(obj: SceneObject): number {
+  if (obj.type === 'Walkbox') return 30;
+  if (obj.type === 'Triggerbox') return 10;
+  return 0;
+}
+
 function sortClickableCandidates(candidates: SceneObject[]): SceneObject[] {
   const sorted = [...candidates];
   sorted.sort((a, b) => {
@@ -114,6 +85,10 @@ function sortClickableCandidates(candidates: SceneObject[]): SceneObject[] {
     const layerB = b.layer || 0;
     if (layerA !== layerB) return layerB - layerA;
 
+    const typePriorityA = getClickableTypePriority(a);
+    const typePriorityB = getClickableTypePriority(b);
+    if (typePriorityA !== typePriorityB) return typePriorityA - typePriorityB;
+
     const hasXYA = 'x' in (a as any) && 'y' in (a as any);
     const hasXYB = 'x' in (b as any) && 'y' in (b as any);
     if (hasXYA && !hasXYB) return -1;
@@ -126,7 +101,7 @@ function sortClickableCandidates(candidates: SceneObject[]): SceneObject[] {
 
 function getSortedClickableCandidates(scene: Scene): SceneObject[] {
   return sortClickableCandidates([
-    ...scene.entities.filter((e) => !e.disabled && e.visible),
+    ...scene.entities.filter((e) => !e.disabled && e.visible && !(e as any).isPlayer),
     ...(scene.triggerboxes?.filter((t) => !t.disabled && t.visible) || []),
     ...(scene.walkbox?.filter((w) => !w.disabled && w.visible) || []),
   ]);
@@ -146,33 +121,164 @@ function findTopHitInCandidates(
   return null;
 }
 
-function findTopHitInWorldCandidates(
+function resolveSubtriggerTarget(scene: Scene, obj: SceneObject): SceneObject {
+  const subtrigger = obj.components?.find((c: any) => c?.type === 'Subtrigger') as
+    | { target?: string }
+    | undefined;
+  if (!subtrigger?.target) return obj;
+
+  const target =
+    scene.triggerboxes.find((t) => t.name === subtrigger.target) ||
+    scene.entities.find((e) => e.name === subtrigger.target);
+  return target || obj;
+}
+
+function canActivateOnClick(obj: SceneObject): boolean {
+  if (obj instanceof Triggerbox && obj.script) return true;
+  if (obj.interactions && Object.keys(obj.interactions).length > 0) return true;
+  if (!obj.components || obj.components.length === 0) return false;
+
+  return obj.components.some((component: any) =>
+    ['Subtrigger', 'Subscene', 'Switch'].includes(component?.type)
+  );
+}
+
+function hasClickOutput(scene: Scene, obj: SceneObject): boolean {
+  const titleOwner = resolveSubtriggerTarget(scene, obj);
+  const seeMessage = scene.game.getSeeMessage(titleOwner);
+  if (seeMessage) return true;
+
+  const title = scene.game.textAssets.getResolvedObjectField(titleOwner, 'title');
+  return !!(title && title.trim());
+}
+
+function hasMeaningfulClickResult(scene: Scene, obj: SceneObject): boolean {
+  return hasClickOutput(scene, obj) || canActivateOnClick(obj);
+}
+
+function getHoverCursorForObject(scene: Scene, obj: SceneObject): HoverCursor | null {
+  if (obj.components) {
+    const sub = obj.components.find((c) => c.type === 'Subscene') as any;
+    if (sub) {
+      const currentSubsceneId = (obj.name || sub.targetGroupId || '').trim();
+      if (scene.activeSubscene && currentSubsceneId && currentSubsceneId === scene.activeSubscene) {
+        return null;
+      }
+      return 'eye';
+    }
+
+    const hasHandTriggerComponent = obj.components.some((c) =>
+      ['Subtrigger', 'Switch'].includes(c?.type)
+    );
+    if (hasHandTriggerComponent) {
+      return 'hand';
+    }
+  }
+
+  const isScriptTrigger = obj instanceof Triggerbox && obj.script && obj.script.length > 0;
+  const hasInteractions = !!(obj.interactions && Object.keys(obj.interactions).length > 0);
+  if (isScriptTrigger || hasInteractions) {
+    return 'hand';
+  }
+
+  return null;
+}
+
+function findTopLayerHitCandidatesAtScreenPoint(
+  scene: Scene,
+  candidates: SceneObject[],
+  screenX: number,
+  screenY: number
+): SceneObject[] {
+  const hits: SceneObject[] = [];
+  let topLayer: number | null = null;
+
+  for (const candidate of sortClickableCandidates(candidates)) {
+    if (!isHitAtScreenPoint(scene, candidate, screenX, screenY)) continue;
+    const candidateLayer = candidate.layer || 0;
+    if (topLayer === null) {
+      topLayer = candidateLayer;
+    }
+    if (candidateLayer !== topLayer) break;
+    hits.push(candidate);
+  }
+
+  return hits;
+}
+
+function findTopLayerHitCandidatesAtWorldPoint(
   candidates: SceneObject[],
   worldX: number,
   worldY: number
-): SceneObject | null {
+): SceneObject[] {
+  const hits: SceneObject[] = [];
+  let topLayer: number | null = null;
+
   for (const candidate of sortClickableCandidates(candidates)) {
-    if (candidate.hitTest(worldX, worldY)) {
-      return candidate;
+    if (!candidate.hitTest(worldX, worldY)) continue;
+    const candidateLayer = candidate.layer || 0;
+    if (topLayer === null) {
+      topLayer = candidateLayer;
     }
+    if (candidateLayer !== topLayer) break;
+    hits.push(candidate);
   }
-  return null;
+
+  return hits;
 }
 
-function findTopHitObject(scene: Scene, screenX: number, screenY: number): SceneObject | null {
-  return findTopHitInCandidates(scene, getSortedClickableCandidates(scene), screenX, screenY);
+function findBestMeaningfulHit(
+  scene: Scene,
+  candidates: SceneObject[],
+  screenX: number,
+  screenY: number
+): SceneObject | null {
+  const topLayerHits = findTopLayerHitCandidatesAtScreenPoint(scene, candidates, screenX, screenY);
+  for (const candidate of topLayerHits) {
+    if (hasMeaningfulClickResult(scene, candidate)) {
+      return candidate;
+    }
+  }
+  return null;
 }
 
-function resolveSubtriggerTarget(scene: Scene, obj: SceneObject): SceneObject {
-  const subtrigger = obj.components?.find((c: any) => c?.type === 'Subtrigger') as
-    | { target?: string }
-    | undefined;
-  if (!subtrigger?.target) return obj;
+export function getHoverCursorAtScreenPoint(
+  scene: Scene,
+  screenX: number,
+  screenY: number
+): HoverCursor | null {
+  if (scene.activeSubscene) {
+    const world = toWorld(scene, screenX, screenY);
+    const subsceneCandidates = Array.from(scene.subsceneEntities).filter(
+      (obj) => !obj.disabled && obj.visible
+    );
+    const topLayerHits = findTopLayerHitCandidatesAtWorldPoint(
+      subsceneCandidates,
+      world.x,
+      world.y
+    );
+    for (const obj of topLayerHits) {
+      const hoverCursor = getHoverCursorForObject(scene, obj);
+      if (hoverCursor) {
+        return hoverCursor;
+      }
+    }
+    return topLayerHits.length > 0 ? null : 'back';
+  }
 
-  const target =
-    scene.triggerboxes.find((t) => t.name === subtrigger.target) ||
-    scene.entities.find((e) => e.name === subtrigger.target);
-  return target || obj;
+  const topLayerHits = findTopLayerHitCandidatesAtScreenPoint(
+    scene,
+    getSortedClickableCandidates(scene),
+    screenX,
+    screenY
+  );
+  for (const obj of topLayerHits) {
+    const hoverCursor = getHoverCursorForObject(scene, obj);
+    if (hoverCursor) {
+      return hoverCursor;
+    }
+  }
+  return null;
 }
 
 export function activateSceneObject(scene: Scene, obj: SceneObject, depth: number = 0): boolean {
@@ -197,11 +303,16 @@ export function handleSceneClick(scene: Scene, x: number, y: number): void {
   const world = toWorld(scene, x, y);
 
   if (scene.activeSubscene) {
-    const subsceneHit = findTopHitInWorldCandidates(
-      Array.from(scene.subsceneEntities).filter((obj) => !obj.disabled && obj.visible),
+    const subsceneCandidates = Array.from(scene.subsceneEntities).filter(
+      (obj) => !obj.disabled && obj.visible
+    );
+    const subsceneHitCandidates = findTopLayerHitCandidatesAtWorldPoint(
+      subsceneCandidates,
       world.x,
       world.y
     );
+    const subsceneHit =
+      subsceneHitCandidates.find((obj) => hasMeaningfulClickResult(scene, obj)) || null;
 
     if (subsceneHit) {
       const titleOwner = resolveSubtriggerTarget(scene, subsceneHit);
@@ -216,11 +327,15 @@ export function handleSceneClick(scene: Scene, x: number, y: number): void {
       return;
     }
 
+    if (subsceneHitCandidates.length > 0) {
+      return;
+    }
+
     scene.activeSubscene = null;
     return;
   }
 
-  const hitObj = findTopHitObject(scene, x, y);
+  const hitObj = findBestMeaningfulHit(scene, getSortedClickableCandidates(scene), x, y);
 
   if (hitObj) {
     const titleOwner = resolveSubtriggerTarget(scene, hitObj);
@@ -243,7 +358,7 @@ export function handleSceneClick(scene: Scene, x: number, y: number): void {
     }
   }
 
-  const visibleHitObj = findTopHitObject(scene, x, y) || findVisibleHitObject(scene, x, y);
+  const visibleHitObj = findVisibleHitObject(scene, x, y);
   if (visibleHitObj) {
     const titleOwner = resolveSubtriggerTarget(scene, visibleHitObj);
     const seeMessage = scene.game.getSeeMessage(titleOwner);
diff --git a/src/systems/ComponentSystem.ts b/src/systems/ComponentSystem.ts
index 630e51a..f42efb9 100644
--- a/src/systems/ComponentSystem.ts
+++ b/src/systems/ComponentSystem.ts
@@ -141,8 +141,23 @@ export class ComponentSystem {
     const game = (entity as any).game as IGame | undefined;
     if (!player || options?.ignoreDistance) return null;
 
-    const e = entity as unknown as { x: number; y: number };
-    const dist = Math.hypot(player.x - e.x, player.y - e.y);
+    let targetX = 0;
+    let targetY = 0;
+
+    if (
+      Array.isArray((entity as any).poly) &&
+      (entity as any).poly.length > 0
+    ) {
+      const poly = (entity as any).poly as Array<{ x: number; y: number }>;
+      targetX = poly.reduce((sum, point) => sum + point.x, 0) / poly.length;
+      targetY = poly.reduce((sum, point) => sum + point.y, 0) / poly.length;
+    } else {
+      const e = entity as unknown as { x?: number; y?: number };
+      targetX = e.x || 0;
+      targetY = e.y || 0;
+    }
+
+    const dist = Math.hypot(player.x - targetX, player.y - targetY);
     const allowedDist = (player.width || 30) * 4;
 
     if (dist > allowedDist) {
diff --git a/src/tools/SceneEditor.ts b/src/tools/SceneEditor.ts
index d772e82..bec4b4f 100644
--- a/src/tools/SceneEditor.ts
+++ b/src/tools/SceneEditor.ts
@@ -4,6 +4,7 @@ import { SceneObject } from '../entities/SceneObject';
 import { Walkbox } from '../entities/Walkbox';
 import { Triggerbox } from '../entities/Triggerbox';
 import { QuadObject } from '../entities/QuadObject';
+import { normalizeTriggerComponents } from '../entities/TriggerComponents';
 import { Scene } from '../scene/Scene';
 import { useEditorStore } from '../store/editorStore';
 
@@ -22,6 +23,7 @@ export class SceneEditor {
 
   game: any;
   enabled: boolean;
+  selectionSlots: Array<string[] | null>;
   // State Properties
   get selectedObject(): SceneObject | null {
     return this.selectionManager.selectedObject;
@@ -30,6 +32,7 @@ export class SceneEditor {
     this.selectionManager.selectedObject = val;
   }
   lastMousePos: { x: number; y: number };
+  lastClientMousePos: { x: number; y: number };
 
   // Callbacks
   // Refactored: Use this.game.openFileBrowser instead of local property
@@ -50,9 +53,11 @@ export class SceneEditor {
     this.persistenceManager = new EditorPersistenceManager(this);
     this.ui = new EditorUI(this);
     this.enabled = false;
+    this.selectionSlots = [null, null];
 
     this.selectionManager.selectedObject = null;
     this.lastMousePos = { x: 0, y: 0 };
+    this.lastClientMousePos = { x: 0, y: 0 };
 
     // Bind handlers once for cleanup
 
@@ -77,6 +82,8 @@ export class SceneEditor {
   lastCameraPos: { x: number; y: number } = { x: 0, y: 0 };
 
   update(_deltaTime?: number): void {
+    this.persistenceManager.ensureCurrentSceneBaseline();
+
     // Check for Camera changes to update UI
     if (this.game.sceneManager.currentScene) {
       const cam = this.game.sceneManager.currentScene.camera;
@@ -127,14 +134,17 @@ export class SceneEditor {
   }
 
   handleGlobalKey(e: KeyboardEvent): void {
+    const isTypingInField =
+      document.activeElement instanceof HTMLInputElement ||
+      document.activeElement instanceof HTMLTextAreaElement;
+
     if (
       this.enabled &&
       e.key === '/' &&
       !e.ctrlKey &&
       !e.metaKey &&
       !e.altKey &&
-      !(document.activeElement instanceof HTMLInputElement) &&
-      !(document.activeElement instanceof HTMLTextAreaElement)
+      !isTypingInField
     ) {
       const filterInput = document.getElementById(
         'hierarchy-filter-input'
@@ -257,6 +267,24 @@ export class SceneEditor {
     // Allows opening editor with F1 or F5 even if disabled
     if (!this.enabled && e.key !== 'F1' && e.key !== 'F5') return;
 
+    if (
+      this.enabled &&
+      !isTypingInField &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      (e.code === 'Digit1' || e.code === 'Digit2') &&
+      this.isSelectionSlotHotkeyContext()
+    ) {
+      const slotIndex = e.code === 'Digit1' ? 0 : 1;
+      e.preventDefault();
+      if (e.shiftKey) {
+        this.saveSelectionSlot(slotIndex);
+      } else if (!e.altKey) {
+        this.restoreSelectionSlot(slotIndex);
+      }
+      return;
+    }
+
     // F1: Toggle Scene Editor
     if (e.key === 'F1') {
       e.preventDefault();
@@ -316,7 +344,7 @@ export class SceneEditor {
     switch (e.key.toLowerCase()) {
       case 'f2':
         e.preventDefault();
-        if (e.shiftKey)
+        if (e.shiftKey || e.altKey)
           this.persistenceManager.saveScene(true); // Save As
         else this.persistenceManager.saveScene(false); // Quick Save
         break;
@@ -537,7 +565,7 @@ export class SceneEditor {
     return this.persistenceManager.loadObject(mode);
   }
 
-  saveScene(saveAs: boolean = false): Promise<void> {
+  saveScene(saveAs: boolean = false): Promise<boolean> {
     return this.persistenceManager.saveScene(saveAs);
   }
 
@@ -551,6 +579,7 @@ export class SceneEditor {
 
   onMouseMove(e: MouseEvent): void {
     this.lastMousePos = this.getMousePos(e);
+    this.lastClientMousePos = { x: e.clientX, y: e.clientY };
     this.transformManager.onMouseMove(e);
   }
 
@@ -578,18 +607,123 @@ export class SceneEditor {
     return this.selectionManager.getSelectedObjects();
   }
 
+  private getObjectKey(obj: any): string | null {
+    if (!obj) return null;
+    if (obj.type === 'Quad') return `Quad:${obj.name}`;
+    if (obj instanceof Actor) return `Actor:${obj.name}`;
+    if (obj instanceof Entity) return `Entity:${obj.name}`;
+    if (obj instanceof Walkbox) return `Walkbox:${obj.name || 'Walkbox'}`;
+    if (obj instanceof Triggerbox) return `Triggerbox:${obj.name || 'Triggerbox'}`;
+    return null;
+  }
+
+  private findObjectBySelectionKey(key: string): SceneObject | null {
+    const scene = this.game.sceneManager.currentScene;
+    if (!scene || !key) return null;
+
+    const sep = key.indexOf(':');
+    const type = sep >= 0 ? key.slice(0, sep) : '';
+    const name = sep >= 0 ? key.slice(sep + 1) : key;
+    if (!type || !name) return null;
+
+    if (type === 'Entity' || type === 'Actor') {
+      return (scene.entities || []).find((obj: any) => obj?.name === name) || null;
+    }
+    if (type === 'Walkbox') {
+      return (scene.walkbox || []).find((obj: any) => obj?.name === name) || null;
+    }
+    if (type === 'Triggerbox') {
+      return (scene.triggerboxes || []).find((obj: any) => obj?.name === name) || null;
+    }
+    if (type === 'Quad') {
+      return (
+        (scene.entities || []).find((obj: any) => obj?.type === 'Quad' && obj?.name === name) ||
+        null
+      );
+    }
+
+    return null;
+  }
+
+  private getCurrentObjectSelectionKeys(): string[] {
+    if (this.selectionManager.hasMultiSelection()) {
+      return this.selectionManager
+        .getSelectedObjects()
+        .map((obj) => this.getObjectKey(obj))
+        .filter((key): key is string => !!key);
+    }
+
+    const key = this.getObjectKey(this.selectedObject);
+    return key ? [key] : [];
+  }
+
+  private isSelectionSlotHotkeyContext(): boolean {
+    const { x, y } = this.lastClientMousePos;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return false;
+    const hovered = document.elementFromPoint(x, y) as HTMLElement | null;
+    if (!hovered) return false;
+    if (hovered.closest('#hierarchy-panel')) return true;
+    if (this.game.canvas?.contains(hovered) || hovered === this.game.canvas) return true;
+    return false;
+  }
+
+  saveSelectionSlot(slotIndex: number): void {
+    const keys = this.getCurrentObjectSelectionKeys();
+    const slotNumber = slotIndex + 1;
+    if (!keys.length) {
+      this.game.showNotification(`Nothing selected to save in slot ${slotNumber}`);
+      return;
+    }
+
+    this.selectionSlots[slotIndex] = [...keys];
+    const label = keys.length === 1 ? 'object' : 'objects';
+    this.game.showNotification(`Saved ${keys.length} ${label} to selection slot ${slotNumber}`);
+  }
+
+  restoreSelectionSlot(slotIndex: number): void {
+    const slotNumber = slotIndex + 1;
+    const stored = this.selectionSlots[slotIndex];
+    if (!stored || stored.length === 0) {
+      this.game.showNotification(`Selection slot ${slotNumber} is empty`);
+      return;
+    }
+
+    const objects = stored
+      .map((key) => this.findObjectBySelectionKey(key))
+      .filter((obj): obj is SceneObject => !!obj);
+
+    if (!objects.length) {
+      this.game.showNotification(`Saved selection in slot ${slotNumber} is no longer available`);
+      return;
+    }
+
+    if (objects.length === 1) {
+      this.selectObject(objects[0]);
+    } else {
+      this.setMultiSelection(objects);
+    }
+
+    const label = objects.length === 1 ? 'object' : 'objects';
+    this.game.showNotification(
+      `Restored ${objects.length} ${label} from selection slot ${slotNumber}`
+    );
+  }
+
   newScene(): void {
-    const newScene = new Scene(this.game, 'new_scene', 'New Scene');
-    // Add default scale
-    newScene.scaling.enabled = true;
-    this.game.sceneManager.addScene(newScene);
-    this.game.sceneManager.switchTo(newScene.id);
-    this.game.textAssets.ensureSceneAssetFile(newScene).catch((err: unknown) => {
-      console.error('Failed to create default scene text asset:', err);
+    void this.persistenceManager.runWithUnsavedChangesGuard(async () => {
+      const newScene = new Scene(this.game, 'new_scene', 'New Scene');
+      // Add default scale
+      newScene.scaling.enabled = true;
+      this.game.sceneManager.addScene(newScene);
+      this.game.sceneManager.switchTo(newScene.id);
+      this.persistenceManager.ensureCurrentSceneBaseline();
+      this.game.textAssets.ensureSceneAssetFile(newScene).catch((err: unknown) => {
+        console.error('Failed to create default scene text asset:', err);
+      });
+      this.syncUI();
+      this.refreshHierarchy();
+      this.selectObject('SCENE');
     });
-    this.syncUI();
-    this.refreshHierarchy();
-    this.selectObject('SCENE');
   }
 
   refreshHierarchy(): void {
@@ -670,7 +804,7 @@ export class SceneEditor {
         }
         newObj = new Triggerbox(poly, data.name, data.script || '');
         if (data.groupID) newObj.groupID = data.groupID;
-        if (data.components) newObj.components = JSON.parse(JSON.stringify(data.components));
+        if (data.components) newObj.components = normalizeTriggerComponents(data.components);
         if (data.locked) newObj.locked = data.locked;
         if (data.disabled) newObj.disabled = data.disabled;
         if (data.customName) newObj.customName = data.customName;
@@ -778,17 +912,13 @@ export class SceneEditor {
     const scene = this.game.sceneManager.currentScene;
     if (scene) {
       if (this.selectedObject instanceof Walkbox) {
-        const index = scene.walkbox.indexOf(this.selectedObject);
-        if (index > -1) scene.walkbox.splice(index, 1);
+        scene.removeWalkbox(this.selectedObject);
       } else if (this.selectedObject instanceof Triggerbox) {
-        const index = scene.triggerboxes.indexOf(this.selectedObject);
-        if (index > -1) scene.triggerboxes.splice(index, 1);
+        scene.removeTriggerbox(this.selectedObject);
       } else if (this.selectedObject instanceof Entity) {
-        const index = scene.entities.indexOf(this.selectedObject);
-        if (index > -1) scene.entities.splice(index, 1);
+        scene.removeEntity(this.selectedObject);
       } else if (this.selectedObject instanceof Actor) {
-        const index = scene.entities.indexOf(this.selectedObject);
-        if (index > -1) scene.entities.splice(index, 1);
+        scene.removeEntity(this.selectedObject);
       }
     }
 
@@ -855,7 +985,7 @@ export class SceneEditor {
       ctx.translate(-camX, -camY); // Apply Camera
 
       ctx.strokeStyle = '#ffff00';
-      ctx.lineWidth = 2 / (scene && scene.camera ? scene.camera.zoom : 1);
+      ctx.lineWidth = 1.25 / (scene && scene.camera ? scene.camera.zoom : 1);
       ctx.beginPath();
       ctx.moveTo(
         this.transformManager.currentPolygon[0].x,
@@ -926,12 +1056,12 @@ export class SceneEditor {
             ctx.closePath();
 
             ctx.strokeStyle = '#00ff00';
-            ctx.lineWidth = 2 / zoom;
+            ctx.lineWidth = 1.25 / zoom;
             ctx.stroke();
 
             // Draw Vertices
             ctx.fillStyle = '#00ff00';
-            const handleSize = 6 / zoom;
+            const handleSize = 5 / zoom;
             verts.forEach((v: any, i: number) => {
               const p = getDrawPos(v);
               // Highlight dragging vertex
@@ -1007,7 +1137,7 @@ export class SceneEditor {
             ctx.setLineDash([4 / zoom, 4 / zoom]); // Dashed, thin line
           } else {
             ctx.strokeStyle = '#fff';
-            ctx.lineWidth = 2 / zoom;
+            ctx.lineWidth = 1.25 / zoom;
             ctx.setLineDash([4 / zoom, 4 / zoom]);
           }
 
@@ -1026,7 +1156,7 @@ export class SceneEditor {
           // Draw Resize Handles (Only if NOT locked)
           if (!entity.locked) {
             ctx.fillStyle = '#ffffff';
-            const hSize = 6 / zoom; // Handle size
+            const hSize = 5 / zoom; // Handle size
 
             const l = drawX - entity.width / 2;
             const r = drawX + entity.width / 2;
@@ -1051,9 +1181,10 @@ export class SceneEditor {
         ctx.restore();
       } else if (selected instanceof Walkbox || selected instanceof Triggerbox) {
         // Triggerbox/Walkbox
+        const p = (selected as any).parallax !== undefined ? (selected as any).parallax : 1.0;
         ctx.translate(halfW, halfH);
         ctx.scale(zoom, zoom);
-        ctx.translate(-camX, -camY);
+        ctx.translate(-camX * p, -camY * p);
 
         const poly = selected.poly;
 
@@ -1063,10 +1194,10 @@ export class SceneEditor {
 
         if (selected.locked) {
           // Locked Style
-          ctx.lineWidth = 1.5 / zoom;
+          ctx.lineWidth = 1 / zoom;
           ctx.setLineDash([]);
         } else {
-          ctx.lineWidth = 3 / zoom;
+          ctx.lineWidth = 1.75 / zoom;
           ctx.setLineDash([]);
         }
 
@@ -1085,7 +1216,7 @@ export class SceneEditor {
             if (selected instanceof Walkbox) ctx.fillStyle = '#ff0000';
             else ctx.fillStyle = '#ff00ff';
 
-            const handleSize = 6 / zoom;
+            const handleSize = 5 / zoom;
             for (const pt of poly) {
               ctx.fillRect(pt.x - handleSize / 2, pt.y - handleSize / 2, handleSize, handleSize);
             }
@@ -1106,7 +1237,7 @@ export class SceneEditor {
         ctx.save();
         ctx.strokeStyle = '#79EFA4';
         ctx.fillStyle = 'rgba(121, 239, 164, 0.12)';
-        ctx.lineWidth = 1;
+        ctx.lineWidth = 0.75;
         ctx.setLineDash([4, 3]);
         ctx.fillRect(x, y, w, h);
         ctx.strokeRect(x, y, w, h);
@@ -1123,7 +1254,7 @@ export class SceneEditor {
       (this.selectedObject as any) === 'SCENE'
     ) {
       ctx.save();
-      ctx.font = '10px monospace';
+      ctx.font = '5px monospace';
 
       const zoom = scene.camera ? scene.camera.zoom : 1;
       const camY = scene.camera ? scene.camera.y : 0;
diff --git a/src/tools/editor/EditorPersistenceManager.ts b/src/tools/editor/EditorPersistenceManager.ts
index 32afe10..d5f0290 100644
--- a/src/tools/editor/EditorPersistenceManager.ts
+++ b/src/tools/editor/EditorPersistenceManager.ts
@@ -5,16 +5,90 @@ import { useEditorStore } from '../../store/editorStore';
 
 export class EditorPersistenceManager {
   private editor: SceneEditor;
+  private trackedSceneRef: object | null = null;
+  private pendingSceneSave: Promise<boolean> | null = null;
 
   constructor(editor: SceneEditor) {
     this.editor = editor;
   }
 
+  ensureCurrentSceneBaseline(): void {
+    const scene = this.editor.game.sceneManager.currentScene;
+    if (!scene) return;
+    if (this.trackedSceneRef === scene) return;
+    this.trackedSceneRef = scene;
+    this.editor.undoManager.resetForCleanScene();
+  }
+
+  markSceneSaved(): void {
+    this.editor.undoManager.markSaved();
+  }
+
+  isCurrentSceneDirty(): boolean {
+    return this.editor.undoManager.isDirty();
+  }
+
+  private async confirmProceedWithUnsavedChanges(): Promise<'save' | 'discard' | 'cancel'> {
+    const game = this.editor.game;
+    const choice = await game.requestChoiceDialog(
+      'Unsaved Changes',
+      'The current scene has unsaved changes. What would you like to do?',
+      [
+        { id: 'save', label: 'Save and Continue', variant: 'primary' },
+        { id: 'discard', label: 'Continue Without Saving', variant: 'danger' },
+        { id: 'cancel', label: 'Cancel', variant: 'neutral' },
+      ]
+    );
+
+    if (choice === 'save' || choice === 'discard') return choice;
+    return 'cancel';
+  }
+
+  async runWithUnsavedChangesGuard(action: () => Promise<void> | void): Promise<void> {
+    if (this.pendingSceneSave) {
+      const saveResult = await this.pendingSceneSave;
+      if (!saveResult && this.isCurrentSceneDirty()) {
+        return;
+      }
+    }
+
+    if (!this.isCurrentSceneDirty()) {
+      await action();
+      return;
+    }
+
+    const choice = await this.confirmProceedWithUnsavedChanges();
+    if (choice === 'cancel') return;
+
+    if (choice === 'save') {
+      const saved = await this.saveScene(false);
+      if (!saved) return;
+    }
+
+    await action();
+  }
+
   // --- Scene Saving ---
 
-  async saveScene(saveAs: boolean = false): Promise<void> {
+  async saveScene(saveAs: boolean = false): Promise<boolean> {
+    if (this.pendingSceneSave) {
+      return this.pendingSceneSave;
+    }
+
+    const savePromise = this.saveSceneInternal(saveAs);
+    this.pendingSceneSave = savePromise;
+    try {
+      return await savePromise;
+    } finally {
+      if (this.pendingSceneSave === savePromise) {
+        this.pendingSceneSave = null;
+      }
+    }
+  }
+
+  private async saveSceneInternal(saveAs: boolean = false): Promise<boolean> {
     const scene = this.editor.game.sceneManager.currentScene;
-    if (!scene) return;
+    if (!scene) return false;
     const previousSceneId = scene.id || '';
 
     const id = scene.id || '';
@@ -25,30 +99,39 @@ export class EditorPersistenceManager {
       // Smart Save
       // Ensure filename property matches ID (normalized for file system)
       scene.filename = id.replace(/\\/g, '/');
-      this.performSaveScene(scene.filename, previousSceneId);
-      return;
+      return this.performSaveScene(scene.filename, previousSceneId);
     }
 
     // Fallback / Save As
-    this.editor.game.openFileBrowser('save', 'public/scenes', (filename: string) => {
-      // Update Filename from browser selection
-      const name = filename.replace('.json', '');
-
-      // Normalize slashes for ID: use backslash for subfolders
-      const idFromName = name.replace(/\//g, '\\');
-
-      scene.filename = name;
-      scene.id = idFromName;
-      this.editor.game.sceneManager.syncSceneRegistration(scene, previousSceneId);
-
-      this.editor.syncUI(); // Refresh UI to show new Filename
-      this.performSaveScene(scene.filename, previousSceneId);
+    return new Promise((resolve) => {
+      this.editor.game.openFileBrowser(
+        'save',
+        'public/scenes',
+        async (filename: string) => {
+          // Update Filename from browser selection
+          const name = filename.replace('.json', '');
+
+          // Normalize slashes for ID: use backslash for subfolders
+          const idFromName = name.replace(/\//g, '\\');
+
+          scene.filename = name;
+          scene.id = idFromName;
+          this.editor.game.sceneManager.syncSceneRegistration(scene, previousSceneId);
+
+          this.editor.syncUI(); // Refresh UI to show new Filename
+          const result = await this.performSaveScene(scene.filename, previousSceneId);
+          resolve(result);
+        },
+        undefined,
+        undefined,
+        () => resolve(false)
+      );
     });
   }
 
-  async performSaveScene(filenameId: string, previousSceneId?: string): Promise<void> {
+  async performSaveScene(filenameId: string, previousSceneId?: string): Promise<boolean> {
     const scene = this.editor.game.sceneManager.currentScene;
-    if (!scene) return;
+    if (!scene) return false;
 
     // Ensure filenameId uses forward slashes for URL/Path
     const normalizedPath = filenameId.replace(/\\/g, '/');
@@ -67,25 +150,35 @@ export class EditorPersistenceManager {
       if (response.ok) {
         this.editor.game.sceneManager.syncSceneRegistration(scene, previousSceneId, data);
         await this.editor.game.textAssets.carrySceneAssetIfNeeded(previousSceneId, scene);
+        this.markSceneSaved();
         // Use Toast Message
         this.editor.game.showNotification(`Scene saved as ${normalizedPath}.json`);
+        return true;
       } else {
         throw new Error(await response.text());
       }
     } catch (e) {
       console.error('Failed to save scene:', e);
       this.editor.game.showNotification(`Error saving scene: ${e}`);
+      return false;
     }
   }
 
   // --- Scene Loading ---
 
   promptLoadScene(): void {
-    this.editor.game.openFileBrowser('load', 'public/scenes', async (filename: string) => {
-      await this.editor.game.sceneManager.loadScene(filename);
-      this.editor.syncUI();
-      this.editor.refreshHierarchy();
-      this.editor.selectObject(null);
+    void this.runWithUnsavedChangesGuard(async () => {
+      this.editor.game.openFileBrowser('load', 'public/scenes', async (filename: string) => {
+        await this.editor.game.sceneManager.loadScene(filename);
+        this.editor.syncUI();
+        this.editor.refreshHierarchy();
+        this.editor.selectObject(null);
+        const scene = this.editor.game.sceneManager.currentScene;
+        if (scene) {
+          this.trackedSceneRef = scene;
+          this.editor.undoManager.resetForCleanScene();
+        }
+      });
     });
   }
 
diff --git a/src/tools/editor/EditorTransformManager.ts b/src/tools/editor/EditorTransformManager.ts
index 319d85a..9c69979 100644
--- a/src/tools/editor/EditorTransformManager.ts
+++ b/src/tools/editor/EditorTransformManager.ts
@@ -107,14 +107,14 @@ export class EditorTransformManager {
       if (entity.hitTest(worldX, worldY)) return entity;
     }
 
-    const worldPos = {
-      x: (pos.x - halfW) / zoom + camX,
-      y: (pos.y - halfH) / zoom + camY,
-    };
-
     if (scene.walkbox) {
       for (const wb of scene.walkbox) {
         if (wb.disabled || wb.locked) continue;
+        const p = (wb as any).parallax !== undefined ? (wb as any).parallax : 1.0;
+        const worldPos = {
+          x: (pos.x - halfW) / zoom + camX * p,
+          y: (pos.y - halfH) / zoom + camY * p,
+        };
         if (Geometry.isPointInPolygon(worldPos, wb.poly)) return wb;
       }
     }
@@ -122,6 +122,11 @@ export class EditorTransformManager {
     if (scene.triggerboxes) {
       for (const tb of scene.triggerboxes) {
         if (tb.disabled || tb.locked) continue;
+        const p = (tb as any).parallax !== undefined ? (tb as any).parallax : 1.0;
+        const worldPos = {
+          x: (pos.x - halfW) / zoom + camX * p,
+          y: (pos.y - halfH) / zoom + camY * p,
+        };
         if (Geometry.isPointInPolygon(worldPos, tb.poly)) return tb;
       }
     }
@@ -139,9 +144,9 @@ export class EditorTransformManager {
     halfH: number
   ): SceneObject[] {
     const selected: SceneObject[] = [];
-    const toScreen = (wx: number, wy: number) => ({
-      x: (wx - camX) * zoom + halfW,
-      y: (wy - camY) * zoom + halfH,
+    const toScreen = (wx: number, wy: number, parallax: number = 1.0) => ({
+      x: (wx - camX * parallax) * zoom + halfW,
+      y: (wy - camY * parallax) * zoom + halfH,
     });
 
     (scene.entities || []).forEach((entity: any) => {
@@ -174,7 +179,8 @@ export class EditorTransformManager {
 
     (scene.walkbox || []).forEach((wb: any) => {
       if (wb.disabled || wb.locked || !wb.poly?.length) return;
-      const screenPoly = wb.poly.map((p: any) => toScreen(p.x, p.y));
+      const p = wb.parallax !== undefined ? wb.parallax : 1.0;
+      const screenPoly = wb.poly.map((pt: any) => toScreen(pt.x, pt.y, p));
       const minX = Math.min(...screenPoly.map((p: any) => p.x));
       const maxX = Math.max(...screenPoly.map((p: any) => p.x));
       const minY = Math.min(...screenPoly.map((p: any) => p.y));
@@ -184,7 +190,8 @@ export class EditorTransformManager {
 
     (scene.triggerboxes || []).forEach((tb: any) => {
       if (tb.disabled || tb.locked || !tb.poly?.length) return;
-      const screenPoly = tb.poly.map((p: any) => toScreen(p.x, p.y));
+      const p = tb.parallax !== undefined ? tb.parallax : 1.0;
+      const screenPoly = tb.poly.map((pt: any) => toScreen(pt.x, pt.y, p));
       const minX = Math.min(...screenPoly.map((p: any) => p.x));
       const maxX = Math.max(...screenPoly.map((p: any) => p.x));
       const minY = Math.min(...screenPoly.map((p: any) => p.y));
@@ -290,6 +297,11 @@ export class EditorTransformManager {
           poly = (editor.selectedObject as any).poly;
         }
 
+        const selectedParallax =
+          (editor.selectedObject as any).parallax !== undefined
+            ? (editor.selectedObject as any).parallax
+            : 1.0;
+
         const vertexRadius = 6 / zoom; // Hit radius
 
         // Calculate Centroid...
@@ -306,8 +318,8 @@ export class EditorTransformManager {
 
         // Check vertices
         const worldPos = {
-          x: (pos.x - halfW) / zoom + camX,
-          y: (pos.y - halfH) / zoom + camY,
+          x: (pos.x - halfW) / zoom + camX * selectedParallax,
+          y: (pos.y - halfH) / zoom + camY * selectedParallax,
         };
 
         for (let i = 0; i < poly.length; i++) {
@@ -469,15 +481,15 @@ export class EditorTransformManager {
       }
 
       // 2. Check Walkboxes
-      const worldPos = {
-        x: (pos.x - halfW) / zoom + camX,
-        y: (pos.y - halfH) / zoom + camY,
-      };
-
       if (scene.walkbox) {
         for (const wb of scene.walkbox) {
           if (wb.disabled) continue;
           if (wb.locked) continue;
+          const p = (wb as any).parallax !== undefined ? (wb as any).parallax : 1.0;
+          const worldPos = {
+            x: (pos.x - halfW) / zoom + camX * p,
+            y: (pos.y - halfH) / zoom + camY * p,
+          };
           if (Geometry.isPointInPolygon(worldPos, wb.poly)) {
             this.editor.selectObject(wb);
             e.stopPropagation();
@@ -491,6 +503,11 @@ export class EditorTransformManager {
         for (const tb of scene.triggerboxes) {
           if (tb.disabled) continue;
           if (tb.locked) continue;
+          const p = (tb as any).parallax !== undefined ? (tb as any).parallax : 1.0;
+          const worldPos = {
+            x: (pos.x - halfW) / zoom + camX * p,
+            y: (pos.y - halfH) / zoom + camY * p,
+          };
           if (Geometry.isPointInPolygon(worldPos, tb.poly)) {
             this.editor.selectObject(tb);
             e.stopPropagation();
@@ -579,9 +596,13 @@ export class EditorTransformManager {
         editor.selectedObject instanceof Triggerbox ||
         (editor.selectedObject as any).type === 'Quad'
       ) {
+        const selectedParallax =
+          (editor.selectedObject as any).parallax !== undefined
+            ? (editor.selectedObject as any).parallax
+            : 1.0;
         const worldPos = {
-          x: (pos.x - halfW) / zoom + camX,
-          y: (pos.y - halfH) / zoom + camY,
+          x: (pos.x - halfW) / zoom + camX * selectedParallax,
+          y: (pos.y - halfH) / zoom + camY * selectedParallax,
         };
 
         let poly: any;
diff --git a/src/tools/editor/EditorUI.ts b/src/tools/editor/EditorUI.ts
index 12427b9..ae70f28 100644
--- a/src/tools/editor/EditorUI.ts
+++ b/src/tools/editor/EditorUI.ts
@@ -85,7 +85,6 @@ export class EditorUI {
       // Restore Parser
       if (parserInput) {
         parserInput.disabled = false;
-        parserInput.focus();
       }
     }
 
diff --git a/src/tools/editor/EditorUndoManager.ts b/src/tools/editor/EditorUndoManager.ts
index 40be2bc..53a53e6 100644
--- a/src/tools/editor/EditorUndoManager.ts
+++ b/src/tools/editor/EditorUndoManager.ts
@@ -2,30 +2,58 @@ import { SceneEditor } from '../SceneEditor';
 
 export class EditorUndoManager {
   private editor: SceneEditor;
-  private undoStack: any[] = [];
-  private redoStack: any[] = [];
+  private undoStack: Array<{ sceneData: any; version: number }> = [];
+  private redoStack: Array<{ sceneData: any; version: number }> = [];
   private readonly MAX_HISTORY = 50;
+  private currentMutationVersion = 0;
+  private savedMutationVersion = 0;
 
   constructor(editor: SceneEditor) {
     this.editor = editor;
   }
 
+  private captureCurrentState(): any {
+    const scene = this.editor.game.sceneManager.currentScene;
+    if (!scene) return null;
+    return JSON.parse(JSON.stringify(scene.toJSON()));
+  }
+
   saveUndoState(): void {
     const scene = this.editor.game.sceneManager.currentScene;
     if (!scene) return;
 
     // Push current state to Undo Stack (Deep Clone)
-    this.undoStack.push(JSON.parse(JSON.stringify(scene.toJSON())));
+    this.undoStack.push({
+      sceneData: this.captureCurrentState(),
+      version: this.currentMutationVersion,
+    });
 
     // Enforce Max History
     if (this.undoStack.length > this.MAX_HISTORY) {
       this.undoStack.shift(); // Remove oldest
     }
 
+    this.currentMutationVersion += 1;
+
     // Clear Redo Stack on new action
     this.redoStack = [];
   }
 
+  markSaved(): void {
+    this.savedMutationVersion = this.currentMutationVersion;
+  }
+
+  isDirty(): boolean {
+    return this.currentMutationVersion !== this.savedMutationVersion;
+  }
+
+  resetForCleanScene(): void {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.currentMutationVersion = 0;
+    this.savedMutationVersion = 0;
+  }
+
   restoreSceneState(data: any): void {
     const scene = this.editor.game.sceneManager.currentScene;
     if (!scene) return;
@@ -74,47 +102,45 @@ export class EditorUndoManager {
   }
 
   undo(): void {
-    const scene = this.editor.game.sceneManager.currentScene;
-    if (!scene) return;
-
     if (this.undoStack.length === 0) {
       this.editor.game.showNotification('Cannot Undo: Start of Buffer');
       return;
     }
 
-    // 1. Capture CURRENT state and push to Redo Stack
-    // 1. Capture CURRENT state and push to Redo Stack
-    const currentState = JSON.parse(JSON.stringify(scene.toJSON()));
-    this.redoStack.push(currentState);
+    const currentState = this.captureCurrentState();
+    if (!currentState) return;
+    this.redoStack.push({
+      sceneData: currentState,
+      version: this.currentMutationVersion,
+    });
 
-    // 2. Pop from Undo Stack
     const previousState = this.undoStack.pop();
+    if (!previousState) return;
 
-    // 3. Restore Previous State
-    this.restoreSceneState(previousState);
+    this.restoreSceneState(previousState.sceneData);
+    this.currentMutationVersion = previousState.version;
 
     this.editor.game.showNotification(`Undo (-${this.redoStack.length})`);
   }
 
   redo(): void {
-    const scene = this.editor.game.sceneManager.currentScene;
-    if (!scene) return;
-
     if (this.redoStack.length === 0) {
       this.editor.game.showNotification('Cannot Redo: End of Buffer');
       return;
     }
 
-    // 1. Capture CURRENT state and push to Undo Stack
-    // 1. Capture CURRENT state and push to Undo Stack
-    const currentState = JSON.parse(JSON.stringify(scene.toJSON()));
-    this.undoStack.push(currentState);
+    const currentState = this.captureCurrentState();
+    if (!currentState) return;
+    this.undoStack.push({
+      sceneData: currentState,
+      version: this.currentMutationVersion,
+    });
 
-    // 2. Pop from Redo Stack
     const nextState = this.redoStack.pop();
+    if (!nextState) return;
 
-    // 3. Restore Next State
-    this.restoreSceneState(nextState);
+    this.restoreSceneState(nextState.sceneData);
+    this.currentMutationVersion = nextState.version;
 
     if (this.redoStack.length === 0) {
       this.editor.game.showNotification(`Redo (Latest)`);
diff --git a/tasks.md b/tasks.md
index 3b6e299..fd4fbba 100644
--- a/tasks.md
+++ b/tasks.md
@@ -1,175 +1,110 @@
-# Autotests Plan
+# Properties Panel Redesign Plan
 
 ## Goal
 
-Introduce the first iteration of automated tests for `Scanline` / `Blue Signal` with focus on deterministic parser, core, and scene-runtime behavior.
-
-This iteration should:
-- cover the most fragile gameplay contracts;
-- avoid heavy browser/UI end-to-end coverage;
-- use small dedicated fixtures instead of live content scenes;
-- be cheap to maintain while the architecture is still evolving.
-
-Out of scope for this iteration:
-- full Playwright coverage;
-- LLM-stage testing;
-- testing against large real content scenes as the main source of truth.
-
-## Target Stack
-
-- [x] Add `vitest` as the test runner.
-- [x] Add `npm run test` script.
-- [x] Keep the first iteration in a lightweight test environment:
-  - prefer `node` environment;
-  - use `jsdom` only if a specific test truly needs it.
-
-## Test Architecture
-
-The first iteration should use three layers:
-
-1. Unit tests for parser and helpers.
-2. Runtime tests for scene/spatial/subscene behavior.
-3. Thin integration tests for parser + game on tiny fixtures.
-
-Avoid starting with canvas/UI/browser assertions.
-
-## Fixtures and Helpers
-
-- [x] Create `tests/fixtures/sceneFactory.ts`
-  - helpers for minimal `Scene` setup;
-  - helpers for entities, triggerboxes, subscenes, switches, and spatial links.
-
-- [x] Create `tests/fixtures/gameFactory.ts`
-  - minimal `Game`/`IGame` test harness;
-  - controllable logging, messages, sounds, and inventory.
-
-- [x] Create `tests/fixtures/parserFactory.ts`
-  - build parser with small fixture world;
-  - helpers for running parser input and reading outcomes.
-
-- [x] Create `tests/fixtures/textAssetFactory.ts`
-  - minimal parser/engine text assets for tests;
-  - keep messages stable and deterministic.
-
-- [x] Decide fixture style for first iteration:
-  - start with programmatic fixtures;
-  - add tiny JSON fixture scenes later only if load/serialization tests need them.
-
-## First Test Files
-
-### Parser
-
-- [x] `tests/parser/resolution.test.ts`
-  Cover:
-  - exact title match;
-  - synonym match;
-  - partial match;
-  - ambiguity clarification;
-  - deterministic tie-break:
-    - inventory first;
-    - nearest scene object when needed.
-
-- [x] `tests/parser/commands.test.ts`
-  Cover:
-  - `teleport with id`;
-  - wrong item -> no effect;
-  - `use id on boombox`;
-  - multi-argument parsing for `USE X ON Y`;
-  - missing-argument prompt cases.
-
-- [x] `tests/parser/core.test.ts`
-  Cover:
-  - unified envelope intake;
-  - pre-API escalation;
-  - post-API escalation;
-  - linear plan execution;
-  - custom command validation path.
-
-### Scene / Runtime
-
-- [x] `tests/scene/spatial-index.test.ts`
-  Cover:
-  - direct parent/child lookup;
-  - relation grouping (`in`, `on`, `under`, `behind`);
-  - direct-child helper stays non-recursive.
-
-- [x] `tests/scene/subscene-activation.test.ts`
-  Cover:
-  - direct entity child activates;
-  - direct triggerbox child activates;
-  - nested subscene becomes available;
-  - grandchildren do not activate automatically.
-
-- [x] `tests/scene/subscene-cleanup.test.ts`
-  Cover:
-  - switch reset on subscene close;
-  - `sound1` path fires correctly;
-  - spatially included switch resets too, not only group-based targets.
-
-### Thin Integration
-
-- [x] `tests/integration/parser-game.test.ts`
-  Cover only a few end-to-end flows on tiny fixtures:
-  - `look under chair`;
-  - `teleport with your id card`;
-  - one far-but-visible `examine` case.
-
-## Recommended Implementation Order
-
-1. [x] Add `vitest` infrastructure.
-2. [x] Add factories/helpers.
-3. [x] Implement spatial runtime tests first:
-   - `spatial-index.test.ts`
-   - `subscene-activation.test.ts`
-   - `subscene-cleanup.test.ts`
-4. [x] Implement parser command/resolution tests.
-5. [x] Add one thin integration test file.
-
-## Next Iteration Candidate: Game Semantic API Tests
-
-- [x] Add `tests/game/semantic-api.test.ts`
-  Cover:
-  - `lookScene`;
-  - `lookEntity`;
-  - `examineEntity`;
-  - `showInventory`;
-  - `removeInventoryEntity`.
-
-- [x] Add `tests/game/navigation-and-spatial.test.ts`
-  Cover:
-  - `goToSceneTarget`;
-  - `goToScene`;
-  - `goToEntity`;
-  - `describeSpatialRelation`.
-
-- [x] Decide whether the current fixture `gameFactory.ts` is sufficient for direct `Game`-layer tests
-  or if a dedicated semantic `Game` harness should be introduced.
-  Result:
-  - keep `gameFactory.ts` as the minimal base harness;
-  - add `tests/fixtures/gameSemanticFactory.ts` for direct `Game` API tests through `Game.prototype`.
-
-## Success Criteria For Iteration 1
-
-- [x] `npm run test` works locally.
-- [x] Tests do not depend on large mutable content scenes.
-- [x] The most fragile parser/runtime contracts are covered.
-- [x] Failing tests point to a specific layer:
-  - parser;
-  - core;
-  - scene runtime;
-  - subscene behavior.
+Restructure the right-side Properties panel into consistent numbered sections with:
+- shared section layout;
+- colored headings and dividers;
+- section hotkeys `0..6` that scroll the panel to the chosen section;
+- unified field placement across object types where possible.
+
+## Scope
+
+In scope:
+- `Entity`
+- `Actor`
+- `Static`
+- `Quad`
+- `Triggerbox`
+- multi-selection panel
+- section hotkey navigation for the Properties panel
+- new purple section style
+
+Out of scope for this task:
+- `Walkbox` property layout changes
+- `SETTINGS` redesign
+- deep component-specific redesign beyond regrouping under `COMPONENTS`
+
+## Section Model
+
+### Section 0
+No title.
+Contains:
+- ID
+- Title
+- TA buttons
+- Group ID
+- Parent / Relation
+
+### Section 1 TRANSFORM
+Contains, depending on object type:
+- X, Y, H, W
+- Scale, Layer, Parallax
+- Collider H, W
+- Depth Sort mode
+- Disable Depth-scaling
+- Vertices block for `Quad`
+
+### Section 2 VISUAL
+Contains:
+- Fill Color
+- Blend mode
+- Opacity / Blur
+- Retro Grid block for `Quad`
+- Sprite
+
+### Section 3 COMPONENTS
+Contains all component-related editing.
+
+### Section 4 ACTOR PROP.
+Actor-only section. Keep current actor-specific controls.
+
+### Section 5 SCRIPT EVENTS
+Shared script event section for all non-Walkbox object types.
+
+### Section 6
+No title.
+Contains all remaining object-specific controls not covered above.
+
+## Implementation Steps
+
+- [x] Add reusable section wrapper API in `PropertiesPanel.tsx`
+- [x] Add purple section accent style in CSS
+- [x] Add section number badge style (inverse accent)
+- [x] Add Properties-panel hotkey scroll navigation for digits `0..6`
+- [x] Reorganize multi-selection layout into the new section model
+- [x] Reorganize `Entity` / `Actor` / `Static`
+- [x] Reorganize `Quad`
+- [x] Reorganize `Triggerbox`
+- [ ] Keep `Walkbox` layout unchanged
+- [ ] Keep `SETTINGS` layout unchanged
+- [x] Verify build after section restructuring
+- [ ] Manual audit of section contents and navigation behavior
+- [ ] Final visual audit of multi-selection panel
+- [ ] Update any remaining field placement mismatches found during QA
+
+## Current Status
+
+Already implemented:
+- shared numbered section headers with common layout;
+- inverse section badges with blue / red / yellow / purple / neutral accents;
+- Properties-panel digit hotkeys `0..6` with guarded focus behavior;
+- single-object common section `0` for ID / Title / TA / Group ID / Parent / Relation;
+- `Entity` / `Actor` / `Static` regrouped into `TRANSFORM`, `VISUAL`, `COMPONENTS`, `ACTOR PROP.`, `SCRIPT EVENTS`, and bottom misc section;
+- `Quad` regrouped into `TRANSFORM` and `VISUAL`, with `Vertices` inside `TRANSFORM`;
+- `Triggerbox` regrouped into the same section model where applicable;
+- multi-selection regrouped into sections `0`, `1`, `2`, and `6`;
+- `Lock Object` and `Disabled` moved to the bottom misc section for single-object editing with `Alt-L` / `Alt-D` tooltips.
+
+Still to verify manually:
+- `Walkbox` still behaves and looks unchanged;
+- `SETTINGS` remains unaffected by the redesign;
+- section hotkeys consistently scroll with section headers visible;
+- no field remains in the wrong section after live QA across object types.
 
 ## Notes
 
-- Keep UI click behavior out of the first iteration unless a contract cannot be tested elsewhere.
-- Prefer deterministic fixtures over browser automation.
-- Keep tests readable enough that they double as executable architecture documentation.
-- `Autotests.md` is the current developer-facing description of the test system, fixtures, coverage, and usage workflow.
-- Current progress:
-  - `vitest` bootstrap is in place;
-  - runtime spatial/subscene tests are green;
-  - parser resolution, commands, and core tests are green;
-  - one thin integration smoke file is green;
-  - current status: first autotest iteration is functionally complete.
-  - next logical slice: direct tests for `Game` as the shared semantic gameplay API.
-  - `Game` semantic API tests are now green as well.
+- Parent / Relation should hide `Relation` when Parent is `(None)`.
+- Parent dropdown styling should keep natural-case IDs.
+- Script Events becomes a common section for all non-Walkbox scene objects.
+- Reuse existing component editors and vertex editors where possible instead of rewriting them.
diff --git a/tests/fixtures/sceneFactory.ts b/tests/fixtures/sceneFactory.ts
index 4ef698e..a28bd9b 100644
--- a/tests/fixtures/sceneFactory.ts
+++ b/tests/fixtures/sceneFactory.ts
@@ -16,6 +16,9 @@ type EntityOptions = {
 };
 
 type TriggerboxOptions = {
+  title?: string;
+  description?: string;
+  details?: string;
   disabled?: boolean;
   groupID?: string | null;
   components?: any[];
@@ -90,8 +93,9 @@ export function createSceneFixture(sceneId: string = 'test_scene'): SceneFixture
       triggerbox.spatial = options.spatial || {};
       scene.triggerboxes.push(triggerbox);
       harness.textAssets.setObject(name, {
-        title: name,
-        description: `${name} triggerbox`,
+        title: options.title || name,
+        description: options.description || `${name} triggerbox`,
+        details: options.details,
       });
       return triggerbox;
     },
diff --git a/tests/fixtures/textAssetFactory.ts b/tests/fixtures/textAssetFactory.ts
index 43c4860..589e5be 100644
--- a/tests/fixtures/textAssetFactory.ts
+++ b/tests/fixtures/textAssetFactory.ts
@@ -25,6 +25,7 @@ export type TestTextAssets = TextAssetLike & {
 };
 
 const DEFAULT_SERVICE_TEXT: Record<string, string> = {
+  'engine.click_you_see': 'You see {title}',
   'engine.too_far_generic': 'You are too far away.',
   'engine.too_far_from_entity': 'You are too far away from the {target}.',
   'engine.locked_needs': 'Locked. Needs {item}',
diff --git a/tests/game/semantic-api.test.ts b/tests/game/semantic-api.test.ts
index 4a7ffe0..b522d23 100644
--- a/tests/game/semantic-api.test.ts
+++ b/tests/game/semantic-api.test.ts
@@ -11,7 +11,7 @@ describe('Game semantic API', () => {
     expect(outcome.message).toBe('You are in Test Scene.');
   });
 
-  it('lookEntity appends spatial parent context when present', () => {
+  it('lookEntity stays descriptive even when spatial parent context exists', () => {
     const fixture = createGameSemanticFixture();
     fixture.addEntity('Table', {
       title: 'Table',
@@ -26,7 +26,7 @@ describe('Game semantic API', () => {
     const outcome = fixture.game.lookEntity(note);
 
     expect(outcome.status).toBe('ok');
-    expect(outcome.message).toBe('A folded note. Under the Table you see: Piece of paper.');
+    expect(outcome.message).toBe('A folded note.');
   });
 
   it('examineEntity prefers details and falls back to description', () => {
diff --git a/tests/parser/nlp-cache.test.ts b/tests/parser/nlp-cache.test.ts
new file mode 100644
index 0000000..43e8cad
--- /dev/null
+++ b/tests/parser/nlp-cache.test.ts
@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NlpCascade } from '../../src/mechanics/NlpCascade';
+import { Nlp } from '@nlpjs/nlp';
+
+function createStorage() {
+  const store = new Map<string, string>();
+  return {
+    getItem: vi.fn((key: string) => store.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      store.delete(key);
+    }),
+    clear: vi.fn(() => {
+      store.clear();
+    }),
+  };
+}
+
+describe('NlpCascade model cache', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    // @ts-expect-error test cleanup
+    delete globalThis.window;
+  });
+
+  it('stores a trained model and reuses the cache on the next initialize', async () => {
+    const localStorage = createStorage();
+    // @ts-expect-error minimal window mock for node test env
+    globalThis.window = { localStorage };
+
+    const trainingData = {
+      look: ['look chair'],
+      take: ['take key'],
+    };
+    const getTextAssets = () =>
+      ({
+        readParserTrainingAsset: async () => trainingData,
+      }) as any;
+
+    const trainSpy = vi.spyOn(Nlp.prototype as any, 'train');
+
+    const firstCascade = new NlpCascade(getTextAssets);
+    await firstCascade.initialize();
+
+    expect(trainSpy).toHaveBeenCalledTimes(1);
+    expect(localStorage.setItem).toHaveBeenCalledTimes(1);
+
+    const secondCascade = new NlpCascade(getTextAssets);
+    await secondCascade.initialize();
+
+    expect(localStorage.getItem).toHaveBeenCalled();
+    expect(trainSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/tests/parser/resolution.test.ts b/tests/parser/resolution.test.ts
index 3e08fcb..cb67bc7 100644
--- a/tests/parser/resolution.test.ts
+++ b/tests/parser/resolution.test.ts
@@ -94,4 +94,20 @@ describe('Parser resolution', () => {
 
     expect(result.messages.at(-1)).toBe('Near coin.');
   });
+
+  it('matches a triggerbox by title in the text layer', async () => {
+    const fixture = createParserFixture();
+    fixture.addPlayer();
+    fixture.addTriggerbox('tb_desk_drawer', {
+      title: 'Desk Drawer',
+      description: 'A shallow desk drawer.',
+      details: 'The upper desk drawer is open and mostly empty.',
+    });
+
+    const lookResult = await fixture.run('look desk drawer');
+    expect(lookResult.messages.at(-1)).toBe('A shallow desk drawer.');
+
+    const examineResult = await fixture.run('examine desk drawer');
+    expect(examineResult.messages.at(-1)).toBe('The upper desk drawer is open and mostly empty.');
+  });
 });
diff --git a/tests/parser/world-model-context.test.ts b/tests/parser/world-model-context.test.ts
new file mode 100644
index 0000000..1da3fd8
--- /dev/null
+++ b/tests/parser/world-model-context.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { ParserWorldModelBuilder } from '../../src/mechanics/ParserWorldModelBuilder';
+import { createSceneFixture } from '../fixtures/sceneFactory';
+
+describe('Parser world model context', () => {
+  it('omits technical scene object type and includes item flag only when Item component exists', () => {
+    const fixture = createSceneFixture();
+    fixture.addPlayer('Hero', 12, 34);
+    fixture.addEntity('note', {
+      title: 'Piece of paper',
+      description: 'A folded note.',
+      components: [{ type: 'Item' }],
+    });
+    fixture.addEntity('drawer_note', {
+      title: 'Nested note',
+      description: 'Inside the drawer.',
+      spatial: { parentNodeId: 'Desk', relation: 'in' },
+    });
+    fixture.addTriggerbox('Desk', {
+      title: 'Desk',
+      description: 'A large desk.',
+    });
+
+    const builder = new ParserWorldModelBuilder(fixture.game as any);
+    const model = builder.build('look note', null);
+    const entities = model.context.entities || [];
+    const player = model.context.player;
+
+    expect(player).toEqual({ x: 12, y: 34 });
+    expect(entities).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: 'note',
+          title: 'Piece of paper',
+          item: true,
+          reachable: true,
+          x: 0,
+          y: 0,
+        }),
+        expect.objectContaining({
+          id: 'Desk',
+          title: 'Desk',
+          reachable: true,
+          x: 5,
+          y: 5,
+        }),
+      ])
+    );
+
+    expect(entities.every((entity) => !('type' in entity))).toBe(true);
+    const deskContext = entities.find((entity) => entity.id === 'Desk');
+    expect(deskContext && 'item' in deskContext).toBe(false);
+    const nestedContext = entities.find((entity) => entity.id === 'drawer_note');
+    expect(nestedContext && 'x' in nestedContext).toBe(false);
+    expect(nestedContext && 'y' in nestedContext).toBe(false);
+    expect(nestedContext && 'reachable' in nestedContext).toBe(false);
+  });
+});
diff --git a/tests/scene/scene-interaction.test.ts b/tests/scene/scene-interaction.test.ts
new file mode 100644
index 0000000..d48e719
--- /dev/null
+++ b/tests/scene/scene-interaction.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { handleSceneClick } from '../../src/scene/SceneInteraction';
+import { createSceneFixture } from '../fixtures/sceneFactory';
+
+describe('Scene interaction text layer', () => {
+  it('shows the triggerbox title on click when it has TA', () => {
+    const fixture = createSceneFixture();
+    fixture.addTriggerbox('tb_drawer', {
+      title: 'Desk Drawer',
+      description: 'A shallow desk drawer.',
+    });
+
+    handleSceneClick(fixture.scene, 215, 155);
+
+    expect(fixture.messages.at(-1)).toBe('You see Desk Drawer');
+  });
+
+  it('uses the actual canvas size for screen-to-world click mapping', () => {
+    const fixture = createSceneFixture();
+    fixture.game.canvas.width = 640;
+    fixture.game.canvas.height = 360;
+    fixture.addTriggerbox('tb_center', {
+      title: 'Center Trigger',
+      description: 'Centered hotspot.',
+    });
+
+    handleSceneClick(fixture.scene, 320, 180);
+
+    expect(fixture.messages.at(-1)).toBe('You see Center Trigger');
+  });
+});
diff --git a/tests/scene/subscene-cleanup.test.ts b/tests/scene/subscene-cleanup.test.ts
index 44d2f23..ac71d80 100644
--- a/tests/scene/subscene-cleanup.test.ts
+++ b/tests/scene/subscene-cleanup.test.ts
@@ -41,4 +41,42 @@ describe('Subscene cleanup', () => {
     expect(fixture.sounds).toEqual(['group-close']);
     expect(groupSwitch.disabled).toBe(true);
   });
+
+  it('removes deleted entity children from active subscene membership immediately', () => {
+    const fixture = createSceneFixture();
+    const rootSubscene = fixture.addTriggerbox('Trig_A', {
+      components: [{ type: 'Subscene', targetGroupId: '' }],
+    });
+    const child = fixture.addEntity('Coin', {
+      disabled: true,
+      spatial: { parentNodeId: 'Trig_A', relation: 'in' },
+      components: [{ type: 'Item' }],
+    });
+
+    ComponentSystem.handleActivation(rootSubscene, fixture.scene);
+    expect(fixture.scene.subsceneEntities.has(child)).toBe(true);
+
+    fixture.scene.removeEntity(child);
+
+    expect(fixture.scene.subsceneEntities.has(child)).toBe(false);
+  });
+
+  it('removes deleted triggerbox children from active subscene membership immediately', () => {
+    const fixture = createSceneFixture();
+    const rootSubscene = fixture.addTriggerbox('Trig_A', {
+      components: [{ type: 'Subscene', targetGroupId: '' }],
+    });
+    const childTrigger = fixture.addTriggerbox('NestedSwitch', {
+      disabled: true,
+      spatial: { parentNodeId: 'Trig_A', relation: 'in' },
+      components: [{ type: 'Switch', state: 1 }],
+    });
+
+    ComponentSystem.handleActivation(rootSubscene, fixture.scene);
+    expect(fixture.scene.subsceneEntities.has(childTrigger)).toBe(true);
+
+    fixture.scene.removeTriggerbox(childTrigger);
+
+    expect(fixture.scene.subsceneEntities.has(childTrigger)).toBe(false);
+  });
 });