tyle: refresh editor controls with monochrome UI

package-lock.json

@@ -14,6 +14,7 @@
         "@react-three/rapier": "^2.2.0",
         "gsap": "^3.15.0",
         "lil-gui": "^0.21.0",
+        "lucide-react": "^1.11.0",
         "r3f-perf": "^7.2.3",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
@@ -36,6 +37,9 @@
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.58.0",
         "vite": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=20.19.0 || >=22.12.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -2362,12 +2366,6 @@
       "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
       "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
-    "node_modules/gsap": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
-      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
-      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
-    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2922,6 +2920,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.11.0.tgz",
+      "integrity": "sha512-UOhjdztXCgdBReRcIhsvz2siIBogfv/lhJEIViCpLt924dO+GDms9T7DNoucI23s6kEPpe988m5N0D2ajnzb2g==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/maath": {
       "version": "0.10.8",
       "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
@@ -3159,15 +3166,6 @@
         "three": ">= 0.168.0 < 0.185.0"
       }
     },
-    "node_modules/postprocessing": {
-      "version": "6.39.1",
-      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.39.1.tgz",
-      "integrity": "sha512-R2dG2zy+BAx3USl5EHw+PvnrlbT5PKnZVp3se0HCR0pWH8WQdh742yNG4YWOsq6c0bFpffk0Gd2RqPeoP/wKng==",
-      "license": "Zlib",
-      "peerDependencies": {
-        "three": ">= 0.168.0 < 0.185.0"
-      }
-    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",

package.json

@@ -20,6 +20,7 @@
     "@react-three/rapier": "^2.2.0",
     "gsap": "^3.15.0",
     "lil-gui": "^0.21.0",
+    "lucide-react": "^1.11.0",
     "r3f-perf": "^7.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

src/features/editor/components/EditorControls.tsx

@@ -1,3 +1,16 @@
+import {
+  Box,
+  Download,
+  Expand,
+  Keyboard,
+  Lock,
+  MousePointer2,
+  Move3D,
+  Redo2,
+  RotateCw,
+  Save,
+  Undo2,
+} from "lucide-react";
 import type { TransformMode } from "@/types/editor";
 
 interface EditorControlsProps {
@@ -32,37 +45,61 @@ export function EditorControls({
   isPlayerMode,
 }: EditorControlsProps): React.JSX.Element {
   const cameraPosition = [0, 50, 100];
+  const viewModeLabel = isPlayerMode ? "View locked" : "Lock view";
 
   return (
     <>
       <div className="editor-camera-info">
-        <div>Camera Position:</div>
+        <span>Camera</span>
-        <div>X: {cameraPosition[0]!.toFixed(2)}</div>
+        <strong>
-        <div>Y: {cameraPosition[1]!.toFixed(2)}</div>
+          X {cameraPosition[0]!.toFixed(0)} · Y {cameraPosition[1]!.toFixed(0)}{" "}
-        <div>Z: {cameraPosition[2]!.toFixed(2)}</div>
+          · Z {cameraPosition[2]!.toFixed(0)}
+        </strong>
       </div>
 
-      <div className="editor-controls-panel">
+      <aside className="editor-controls-panel" aria-label="Editor controls">
-        <h3>Transform</h3>
+        <header className="editor-panel-header">
+          <span className="editor-panel-kicker">Map Editor</span>
+          <h2>Scene controls</h2>
+          <p>Select an object, choose a transform mode, then drag the gizmo.</p>
+        </header>
+
+        <section
+          className="editor-control-section"
+          aria-labelledby="transform-heading"
+        >
+          <div className="editor-section-heading">
+            <h3 id="transform-heading">Transform</h3>
+            <span>T / R / S</span>
+          </div>
 
           <div className="editor-transform-buttons">
             <button
               className={`editor-transform-button ${transformMode === "translate" ? "active" : ""}`}
               onClick={() => onTransformModeChange("translate")}
+              aria-pressed={transformMode === "translate"}
             >
-            ✋ Translate (T)
+              <Move3D size={16} aria-hidden="true" />
+              <span>Translate</span>
+              <kbd>T</kbd>
             </button>
             <button
               className={`editor-transform-button ${transformMode === "rotate" ? "active" : ""}`}
               onClick={() => onTransformModeChange("rotate")}
+              aria-pressed={transformMode === "rotate"}
             >
-            🔄 Rotate (R)
+              <RotateCw size={16} aria-hidden="true" />
+              <span>Rotate</span>
+              <kbd>R</kbd>
             </button>
             <button
               className={`editor-transform-button ${transformMode === "scale" ? "active" : ""}`}
               onClick={() => onTransformModeChange("scale")}
+              aria-pressed={transformMode === "scale"}
             >
-            📐 Scale (S)
+              <Expand size={16} aria-hidden="true" />
+              <span>Scale</span>
+              <kbd>S</kbd>
             </button>
           </div>
 
@@ -71,69 +108,129 @@ export function EditorControls({
               className="editor-history-button"
               onClick={onUndo}
               disabled={undoCount === 0}
-            style={{ color: undoCount > 0 ? "#00ff00" : "#555" }}
             >
-            ↩ Undo ({undoCount})
+              <Undo2 size={15} aria-hidden="true" />
+              Undo
+              <span>{undoCount}</span>
             </button>
             <button
               className="editor-history-button"
               onClick={onRedo}
               disabled={redoCount === 0}
-            style={{ color: redoCount > 0 ? "#00ff00" : "#555" }}
             >
-            ↪ Redo ({redoCount})
+              <Redo2 size={15} aria-hidden="true" />
+              Redo
+              <span>{redoCount}</span>
             </button>
           </div>
+        </section>
 
-        <button className="editor-export-button" onClick={onExportJson}>
+        <section
-          💾 Export JSON
+          className="editor-control-section"
+          aria-labelledby="file-heading"
+        >
+          <div className="editor-section-heading">
+            <h3 id="file-heading">File</h3>
+          </div>
+
+          <button
+            className="editor-action-button editor-action-button-primary"
+            onClick={onExportJson}
+          >
+            <Download size={16} aria-hidden="true" />
+            Export JSON
           </button>
 
           {onSaveToServer && (
-          <button className="editor-save-button" onClick={onSaveToServer}>
+            <button className="editor-action-button" onClick={onSaveToServer}>
-            💾 Save to Server
+              <Save size={16} aria-hidden="true" />
+              Save to server
             </button>
           )}
+        </section>
 
-        <h3>View</h3>
+        <section
+          className="editor-control-section"
+          aria-labelledby="view-heading"
+        >
+          <div className="editor-section-heading">
+            <h3 id="view-heading">View</h3>
+          </div>
 
           {onPlayerMode && (
             <button
               className={`editor-player-button ${isPlayerMode ? "active" : ""}`}
               onClick={onPlayerMode}
+              aria-pressed={isPlayerMode}
             >
-            🎮 Player Controller
+              <Lock size={16} aria-hidden="true" />
+              {viewModeLabel}
             </button>
           )}
+        </section>
+
+        <section
+          className="editor-control-section"
+          aria-labelledby="selection-heading"
+        >
+          <div className="editor-section-heading">
+            <h3 id="selection-heading">Selection</h3>
+            <span>{nodesCount} nodes</span>
+          </div>
 
-        <h3>Selection</h3>
           {selectedNodeIndex !== null ? (
             <div className="editor-selected-info">
-            <div className="editor-selected-name">
+              <Box size={17} aria-hidden="true" />
-              Selected:{" "}
+              <div>
                 <strong>
                   {selectedNodeName || `Node ${selectedNodeIndex + 1}`}
                 </strong>
-            </div>
+                <span>
-            <div className="editor-selected-index">
+                  Index {selectedNodeIndex + 1} of {nodesCount}
-              Index: {selectedNodeIndex + 1} / {nodesCount}
+                </span>
               </div>
             </div>
           ) : (
-          <div className="editor-no-selection">No object selected</div>
+            <div className="editor-no-selection">
+              <MousePointer2 size={17} aria-hidden="true" />
+              No object selected
+            </div>
           )}
+        </section>
 
-        <h3>Controls</h3>
+        <section
-        <div className="editor-controls-help">
+          className="editor-control-section"
-          <p>Click - Select object</p>
+          aria-labelledby="shortcuts-heading"
-          <p>T/R/S - Transform mode</p>
+        >
-          <p>Ctrl+Z - Undo</p>
+          <div className="editor-section-heading">
-          <p>Ctrl+Y - Redo</p>
+            <h3 id="shortcuts-heading">Shortcuts</h3>
-          <p>ESC - Deselect</p>
+            <Keyboard size={15} aria-hidden="true" />
-          <p>WASD/ZQSD - Move (Player mode)</p>
-          <p>Space - Jump (Player mode)</p>
           </div>
+
+          <dl className="editor-shortcuts-list">
+            <div>
+              <dt>Click</dt>
+              <dd>Select object</dd>
             </div>
+            <div>
+              <dt>T / R / S</dt>
+              <dd>Transform mode</dd>
+            </div>
+            <div>
+              <dt>Ctrl Z / Y</dt>
+              <dd>Undo / redo</dd>
+            </div>
+            <div>
+              <dt>Esc</dt>
+              <dd>Deselect</dd>
+            </div>
+            <div>
+              <dt>WASD</dt>
+              <dd>Move when locked</dd>
+            </div>
+          </dl>
+        </section>
+      </aside>
     </>
   );
 }

src/features/editor/scene/EditorMap.tsx

@@ -70,10 +70,10 @@ export function EditorMap({
         args={[100, 100]}
         cellSize={1}
         cellThickness={0.5}
-        cellColor="#444444"
+        cellColor="#242424"
         sectionSize={5}
         sectionThickness={1}
-        sectionColor="#666666"
+        sectionColor="#3a3a3a"
         fadeDistance={50}
         fadeStrength={1}
         followCamera={false}
@@ -199,10 +199,10 @@ function EditorModelNode({
         ) {
           if (isSelected) {
             mesh.material = mesh.material.clone();
-            (mesh.material as THREE.MeshStandardMaterial).color.set("#ff6600");
+            (mesh.material as THREE.MeshStandardMaterial).color.set("#ffffff");
           } else if (isHovered) {
             mesh.material = mesh.material.clone();
-            (mesh.material as THREE.MeshStandardMaterial).color.set("#ff9900");
+            (mesh.material as THREE.MeshStandardMaterial).color.set("#b8b8b8");
           }
         }
       }
@@ -281,7 +281,7 @@ function EditorFallbackNode({
     }
   }, [node.position, node.rotation, node.scale]);
 
-  const color = isSelected ? "#ff6600" : isHovered ? "#ff9900" : "#cccccc";
+  const color = isSelected ? "#ffffff" : isHovered ? "#b8b8b8" : "#6f6f6f";
 
   return (
     <mesh

src/index.css

@@ -87,8 +87,16 @@ canvas {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: #050505;
-  font-family: system-ui, sans-serif;
+  color: #f8f8f8;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   overflow: hidden;
 }
 
@@ -99,77 +107,88 @@ canvas {
   justify-content: center;
   align-items: center;
   height: 100%;
-  color: white;
+  color: #f8f8f8;
   text-align: center;
   padding: 2rem;
 }
 
 .editor-loading h2 {
-  font-size: 2rem;
+  font-size: clamp(1.8rem, 4vw, 3rem);
-  color: #ff6600;
+  color: #ffffff;
-  margin-bottom: 1rem;
+  margin: 0 0 0.75rem;
+  letter-spacing: -0.05em;
 }
 
 .editor-loading p {
   font-size: 1rem;
-  color: #aaa;
+  color: #9b9b9b;
 }
 
 .editor-error h2 {
-  font-size: 1.8rem;
+  font-size: clamp(1.8rem, 4vw, 3rem);
-  color: #ff4444;
+  color: #ffffff;
-  margin-bottom: 1rem;
+  margin: 0 0 0.75rem;
+  letter-spacing: -0.05em;
 }
 
 .editor-error p {
   font-size: 1.1rem;
-  color: #ccc;
+  color: #b7b7b7;
-  margin-bottom: 2rem;
+  margin: 0 0 2rem;
   max-width: 600px;
 }
 
 .editor-container code {
-  background: rgba(255, 102, 0, 0.2);
+  background: #171717;
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
-  color: #ff8533;
+  color: #ffffff;
-  font-family: "Courier New", monospace;
+  font-family: "SFMono-Regular", "Courier New", monospace;
 }
 
 .editor-upload-section {
-  background: rgba(255, 255, 255, 0.05);
+  width: min(520px, calc(100vw - 2rem));
-  border-radius: 12px;
+  background: #0d0d0d;
-  padding: 2rem;
+  border-radius: 24px;
-  border: 2px dashed rgba(255, 102, 0, 0.3);
+  padding: 1.25rem;
-  max-width: 500px;
+  border: 1px solid #2a2a2a;
-  margin-top: 2rem;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
 }
 
 .editor-upload-section h3 {
-  color: #ff6600;
+  color: #ffffff;
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
-  font-size: 1.4rem;
+  font-size: 0.9rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
 }
 
 .editor-drop-zone {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  padding: 2rem 1rem;
+  min-height: 116px;
-  border: 2px dashed #ff6600;
+  padding: 1.25rem;
-  border-radius: 8px;
+  border: 1px dashed #5b5b5b;
-  background: rgba(255, 102, 0, 0.1);
+  border-radius: 18px;
-  color: #ff6600;
+  background: #111111;
-  font-weight: bold;
+  color: #f8f8f8;
+  font-weight: 650;
   text-align: center;
   cursor: pointer;
-  transition: all 0.2s;
+  transition:
-  font-size: 1.1rem;
+    background 160ms ease,
-  margin-bottom: 1.5rem;
+    border-color 160ms ease,
+    transform 160ms ease;
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
 }
 
 .editor-drop-zone:hover {
-  background: rgba(255, 102, 0, 0.2);
+  background: #181818;
-  border-color: #ff8533;
+  border-color: #ffffff;
+  transform: translateY(-1px);
 }
 
 .editor-folder-input {
@@ -177,213 +196,349 @@ canvas {
 }
 
 .editor-folder-structure {
-  background: rgba(0, 0, 0, 0.3);
+  background: #080808;
-  border-radius: 8px;
+  border: 1px solid #202020;
+  border-radius: 16px;
   padding: 1rem;
-  margin-top: 1rem;
 }
 
 .editor-folder-structure h4 {
-  color: #aaa;
+  color: #ffffff;
-  margin-bottom: 0.5rem;
+  margin: 0 0 0.5rem;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
 .editor-folder-structure pre {
-  background: rgba(0, 0, 0, 0.5);
+  margin: 0;
-  padding: 1rem;
+  background: transparent;
-  border-radius: 6px;
+  color: #a7a7a7;
-  color: #ddd;
+  font-family: "SFMono-Regular", "Courier New", monospace;
-  font-family: "Courier New", monospace;
+  font-size: 0.78rem;
-  font-size: 0.9rem;
+  line-height: 1.55;
   overflow-x: auto;
   white-space: pre-wrap;
 }
 
 .editor-camera-info {
   position: absolute;
-  top: 10px;
+  top: 16px;
-  left: 10px;
+  left: 16px;
-  background: rgba(0, 0, 0, 0.8);
+  display: flex;
-  color: #00ff00;
+  align-items: center;
-  padding: 10px 15px;
+  gap: 10px;
-  border-radius: 4px;
+  z-index: 2;
-  border: 1px solid #00ff00;
+  background: rgba(5, 5, 5, 0.78);
-  font-family: monospace;
+  color: #f8f8f8;
-  font-size: 12px;
+  padding: 8px 10px;
-  line-height: 1.5;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(18px);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.editor-camera-info span {
+  color: #9b9b9b;
+}
+
+.editor-camera-info strong {
+  color: #ffffff;
+  font-weight: 600;
 }
 
 .editor-controls-panel {
   position: absolute;
-  right: 0;
+  right: 16px;
-  top: 0;
+  top: 16px;
-  width: 250px;
+  bottom: 16px;
-  height: 100%;
+  width: min(340px, calc(100vw - 32px));
-  background: rgba(30, 30, 30, 0.95);
+  background: rgba(8, 8, 8, 0.88);
-  padding: 20px;
+  padding: 14px;
-  color: white;
+  color: #f8f8f8;
-  border-left: 2px solid #ff6600;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 28px;
+  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
   overflow-y: auto;
-  font-family: system-ui, sans-serif;
+  backdrop-filter: blur(22px);
+  scrollbar-width: thin;
+  scrollbar-color: #3a3a3a transparent;
 }
 
-.editor-controls-panel h3 {
+.editor-controls-panel::-webkit-scrollbar {
-  margin-top: 20px;
+  width: 6px;
-  margin-bottom: 15px;
+}
-  font-size: 18px;
+
-  color: #ff6600;
+.editor-controls-panel::-webkit-scrollbar-thumb {
+  background: #3a3a3a;
+  border-radius: 999px;
+}
+
+.editor-panel-header {
+  padding: 12px 12px 16px;
+}
+
+.editor-panel-kicker {
+  color: #8f8f8f;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.editor-panel-header h2 {
+  margin: 0.35rem 0 0.45rem;
+  color: #ffffff;
+  font-size: 1.55rem;
+  font-weight: 720;
+  letter-spacing: -0.06em;
+}
+
+.editor-panel-header p {
+  margin: 0;
+  color: #a3a3a3;
+  font-size: 0.84rem;
+  line-height: 1.45;
+}
+
+.editor-control-section {
+  padding: 14px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.editor-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.editor-section-heading h3 {
+  margin: 0;
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.editor-section-heading span,
+.editor-section-heading svg {
+  color: #777777;
+  font-size: 0.74rem;
 }
 
 .editor-transform-buttons {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: 1fr;
-  gap: 8px;
+  gap: 6px;
 }
 
 .editor-transform-button {
-  padding: 12px;
+  display: grid;
-  background: #333;
+  grid-template-columns: 18px 1fr auto;
-  color: white;
+  align-items: center;
-  border: 1px solid #555;
+  gap: 10px;
-  border-radius: 6px;
+  width: 100%;
+  padding: 10px 11px;
+  background: #101010;
+  color: #d9d9d9;
+  border: 1px solid #242424;
+  border-radius: 14px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 0.88rem;
-  transition: all 0.2s;
+  font-weight: 620;
+  text-align: left;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
 }
 
 .editor-transform-button.active {
-  background: #ff6600;
+  background: #ffffff;
-  color: black;
+  color: #050505;
-  border-color: #ff6600;
+  border-color: #ffffff;
 }
 
 .editor-transform-button:hover {
-  background: #444;
+  background: #191919;
+  border-color: #5c5c5c;
+  color: #ffffff;
+  transform: translateY(-1px);
 }
 
 .editor-transform-button.active:hover {
-  background: #ff8533;
+  background: #ffffff;
+  color: #050505;
+}
+
+.editor-transform-button kbd {
+  min-width: 22px;
+  padding: 3px 6px;
+  border-radius: 7px;
+  background: rgba(0, 0, 0, 0.08);
+  color: currentColor;
+  font-family: inherit;
+  font-size: 0.7rem;
+  font-weight: 720;
+  text-align: center;
 }
 
 .editor-history-buttons {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 8px;
-  margin-top: 10px;
+  margin-top: 8px;
 }
 
 .editor-history-button {
-  flex: 1;
+  display: flex;
-  padding: 8px;
+  align-items: center;
-  background: #333;
+  justify-content: center;
-  color: #aaa;
+  gap: 7px;
-  border: 1px solid #555;
+  padding: 9px;
-  border-radius: 4px;
+  background: #101010;
+  color: #f2f2f2;
+  border: 1px solid #242424;
+  border-radius: 13px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 0.78rem;
+  font-weight: 650;
+}
+
+.editor-history-button span {
+  color: #8e8e8e;
 }
 
 .editor-history-button:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 0.38;
-}
-
-.editor-export-button {
-  width: 100%;
-  margin-top: 10px;
-  padding: 12px;
-  background: #ff6600;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.editor-export-button:hover {
-  background: #ff8533;
-}
-
-.editor-save-button {
-  width: 100%;
-  margin-top: 10px;
-  padding: 12px;
-  background: #22c55e;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.editor-save-button:hover {
-  background: #16a34a;
 }
 
+.editor-action-button,
 .editor-player-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
   width: 100%;
-  padding: 12px;
+  padding: 11px 12px;
-  background: #444;
+  background: #101010;
-  color: white;
+  color: #f2f2f2;
-  border: none;
+  border: 1px solid #242424;
-  border-radius: 6px;
+  border-radius: 14px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 0.88rem;
+  font-weight: 680;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
 }
 
-.editor-player-button.active {
+.editor-action-button + .editor-action-button {
-  background: #ff6600;
+  margin-top: 8px;
-  color: black;
 }
 
+.editor-action-button:hover,
 .editor-player-button:hover {
-  background: #555;
+  background: #191919;
+  border-color: #5c5c5c;
+  color: #ffffff;
+  transform: translateY(-1px);
 }
 
+.editor-action-button-primary,
+.editor-player-button.active {
+  background: #ffffff;
+  color: #050505;
+  border-color: #ffffff;
+}
+
+.editor-action-button-primary:hover,
 .editor-player-button.active:hover {
-  background: #ff8533;
+  background: #ffffff;
+  color: #050505;
 }
 
 .editor-selected-info {
-  background: rgba(255, 102, 0, 0.1);
+  display: flex;
-  border: 1px solid #ff6600;
+  align-items: center;
-  border-radius: 6px;
+  gap: 11px;
-  padding: 15px;
+  background: #ffffff;
-  margin-bottom: 15px;
+  border: 1px solid #ffffff;
+  border-radius: 16px;
+  padding: 12px;
+  color: #050505;
 }
 
-.editor-selected-name {
+.editor-selected-info strong,
-  font-size: 16px;
+.editor-selected-info span {
-  margin-bottom: 5px;
+  display: block;
 }
 
-.editor-selected-index {
+.editor-selected-info strong {
-  font-size: 14px;
+  font-size: 0.92rem;
-  color: #aaa;
+  line-height: 1.2;
+}
+
+.editor-selected-info span {
+  color: #555555;
+  font-size: 0.75rem;
+  margin-top: 2px;
 }
 
 .editor-no-selection {
-  background: rgba(255, 255, 255, 0.05);
+  display: flex;
-  border: 1px dashed #555;
+  align-items: center;
-  border-radius: 6px;
+  gap: 10px;
-  padding: 15px;
+  background: #101010;
-  text-align: center;
+  border: 1px dashed #363636;
-  color: #888;
+  border-radius: 16px;
-  font-style: italic;
+  padding: 12px;
+  color: #8f8f8f;
+  font-size: 0.86rem;
 }
 
-.editor-controls-help {
+.editor-shortcuts-list {
-  background: #222;
+  display: grid;
-  border-radius: 6px;
+  gap: 7px;
-  padding: 15px;
+  margin: 0;
-  border: 1px solid #444;
 }
 
-.editor-controls-help p {
+.editor-shortcuts-list div {
-  margin: 4px 0;
+  display: flex;
-  font-size: 12px;
+  align-items: center;
-  color: #aaa;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 7px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.editor-shortcuts-list div:last-child {
+  border-bottom: 0;
+}
+
+.editor-shortcuts-list dt,
+.editor-shortcuts-list dd {
+  margin: 0;
+  font-size: 0.76rem;
+}
+
+.editor-shortcuts-list dt {
+  color: #ffffff;
+  font-weight: 700;
+}
+
+.editor-shortcuts-list dd {
+  color: #8d8d8d;
+  text-align: right;
 }
 
 @media (max-width: 768px) {
@@ -398,4 +553,18 @@ canvas {
   .editor-drop-zone {
     padding: 1.5rem 1rem;
   }
+
+  .editor-camera-info {
+    display: none;
+  }
+
+  .editor-controls-panel {
+    top: auto;
+    right: 10px;
+    bottom: 10px;
+    left: 10px;
+    width: auto;
+    max-height: 46vh;
+    border-radius: 22px;
+  }
 }

src/pages/editor/EditorPage.tsx

@@ -148,7 +148,7 @@ export function EditorPage(): React.JSX.Element {
         camera={{ position: [0, 50, 100], fov: 50 }}
         style={{ width: "100%", height: "100%" }}
         onCreated={({ gl }) => {
-          gl.setClearColor("#1e293b");
+          gl.setClearColor("#050505");
         }}
       >
         <EditorScene