tyle: refresh editor controls with monochrome UI

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,108 +45,192 @@ 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>
-        <div>X: {cameraPosition[0]!.toFixed(2)}</div>
-        <div>Y: {cameraPosition[1]!.toFixed(2)}</div>
-        <div>Z: {cameraPosition[2]!.toFixed(2)}</div>
+        <span>Camera</span>
+        <strong>
+          X {cameraPosition[0]!.toFixed(0)} · Y {cameraPosition[1]!.toFixed(0)}{" "}
+          · Z {cameraPosition[2]!.toFixed(0)}
+        </strong>
       </div>
 
-      <div className="editor-controls-panel">
-        <h3>Transform</h3>
+      <aside className="editor-controls-panel" aria-label="Editor controls">
+        <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>
 
-        <div className="editor-transform-buttons">
-          <button
-            className={`editor-transform-button ${transformMode === "translate" ? "active" : ""}`}
-            onClick={() => onTransformModeChange("translate")}
-          >
-            ✋ Translate (T)
-          </button>
-          <button
-            className={`editor-transform-button ${transformMode === "rotate" ? "active" : ""}`}
-            onClick={() => onTransformModeChange("rotate")}
-          >
-            🔄 Rotate (R)
-          </button>
-          <button
-            className={`editor-transform-button ${transformMode === "scale" ? "active" : ""}`}
-            onClick={() => onTransformModeChange("scale")}
-          >
-            📐 Scale (S)
-          </button>
-        </div>
-
-        <div className="editor-history-buttons">
-          <button
-            className="editor-history-button"
-            onClick={onUndo}
-            disabled={undoCount === 0}
-            style={{ color: undoCount > 0 ? "#00ff00" : "#555" }}
-          >
-            ↩ Undo ({undoCount})
-          </button>
-          <button
-            className="editor-history-button"
-            onClick={onRedo}
-            disabled={redoCount === 0}
-            style={{ color: redoCount > 0 ? "#00ff00" : "#555" }}
-          >
-            ↪ Redo ({redoCount})
-          </button>
-        </div>
-
-        <button className="editor-export-button" onClick={onExportJson}>
-          💾 Export JSON
-        </button>
-
-        {onSaveToServer && (
-          <button className="editor-save-button" onClick={onSaveToServer}>
-            💾 Save to Server
-          </button>
-        )}
-
-        <h3>View</h3>
-
-        {onPlayerMode && (
-          <button
-            className={`editor-player-button ${isPlayerMode ? "active" : ""}`}
-            onClick={onPlayerMode}
-          >
-            🎮 Player Controller
-          </button>
-        )}
-
-        <h3>Selection</h3>
-        {selectedNodeIndex !== null ? (
-          <div className="editor-selected-info">
-            <div className="editor-selected-name">
-              Selected:{" "}
-              <strong>
-                {selectedNodeName || `Node ${selectedNodeIndex + 1}`}
-              </strong>
-            </div>
-            <div className="editor-selected-index">
-              Index: {selectedNodeIndex + 1} / {nodesCount}
-            </div>
+        <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-no-selection">No object selected</div>
-        )}
 
-        <h3>Controls</h3>
-        <div className="editor-controls-help">
-          <p>Click - Select object</p>
-          <p>T/R/S - Transform mode</p>
-          <p>Ctrl+Z - Undo</p>
-          <p>Ctrl+Y - Redo</p>
-          <p>ESC - Deselect</p>
-          <p>WASD/ZQSD - Move (Player mode)</p>
-          <p>Space - Jump (Player mode)</p>
-        </div>
-      </div>
+          <div className="editor-transform-buttons">
+            <button
+              className={`editor-transform-button ${transformMode === "translate" ? "active" : ""}`}
+              onClick={() => onTransformModeChange("translate")}
+              aria-pressed={transformMode === "translate"}
+            >
+              <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"}
+            >
+              <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"}
+            >
+              <Expand size={16} aria-hidden="true" />
+              <span>Scale</span>
+              <kbd>S</kbd>
+            </button>
+          </div>
+
+          <div className="editor-history-buttons">
+            <button
+              className="editor-history-button"
+              onClick={onUndo}
+              disabled={undoCount === 0}
+            >
+              <Undo2 size={15} aria-hidden="true" />
+              Undo
+              <span>{undoCount}</span>
+            </button>
+            <button
+              className="editor-history-button"
+              onClick={onRedo}
+              disabled={redoCount === 0}
+            >
+              <Redo2 size={15} aria-hidden="true" />
+              Redo
+              <span>{redoCount}</span>
+            </button>
+          </div>
+        </section>
+
+        <section
+          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-action-button" onClick={onSaveToServer}>
+              <Save size={16} aria-hidden="true" />
+              Save to server
+            </button>
+          )}
+        </section>
+
+        <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}
+            >
+              <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>
+
+          {selectedNodeIndex !== null ? (
+            <div className="editor-selected-info">
+              <Box size={17} aria-hidden="true" />
+              <div>
+                <strong>
+                  {selectedNodeName || `Node ${selectedNodeIndex + 1}`}
+                </strong>
+                <span>
+                  Index {selectedNodeIndex + 1} of {nodesCount}
+                </span>
+              </div>
+            </div>
+          ) : (
+            <div className="editor-no-selection">
+              <MousePointer2 size={17} aria-hidden="true" />
+              No object selected
+            </div>
+          )}
+        </section>
+
+        <section
+          className="editor-control-section"
+          aria-labelledby="shortcuts-heading"
+        >
+          <div className="editor-section-heading">
+            <h3 id="shortcuts-heading">Shortcuts</h3>
+            <Keyboard size={15} aria-hidden="true" />
+          </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