From 44f267b514d371f9a07d0d19346118085d1e2198 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sat, 18 Apr 2026 20:29:58 +0200
Subject: [PATCH] Add Terrain Tools section with brush controls in App.tsx

---
 src/app/App.tsx | 95 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 94 insertions(+), 1 deletion(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 7433b91a..7a926658 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -15165,10 +15165,103 @@ export function App({ store, initialStatusMessage }: AppProps) {
                         "Visible and enabled"}
                     </div>
                     <div className="material-summary">
-                      Terrain editing tools land in a later inspector slice. This foundation keeps the authored grid and derived mesh selectable and inspectable.
+                      Terrain editing stays inspector-driven. Arm a brush here,
+                      then drag on the selected terrain in the viewport.
                     </div>
                   </div>
 
+                  <div className="form-section">
+                    <div className="label">Terrain Tools</div>
+                    <div
+                      className="viewport-panel__control-group"
+                      role="group"
+                      aria-label="Terrain brush tools"
+                    >
+                      {(
+                        [
+                          "raise",
+                          "lower",
+                          "smooth",
+                          "flatten"
+                        ] as const satisfies readonly TerrainBrushTool[]
+                      ).map((tool) => (
+                        <button
+                          key={tool}
+                          className={`viewport-panel__button ${armedTerrainBrushTool === tool ? "viewport-panel__button--active" : ""}`}
+                          type="button"
+                          data-testid={`terrain-brush-tool-${tool}`}
+                          aria-pressed={armedTerrainBrushTool === tool}
+                          onClick={() => handleArmTerrainBrushTool(tool)}
+                        >
+                          {getTerrainBrushToolLabel(tool)}
+                        </button>
+                      ))}
+                    </div>
+                    <div className="material-summary">
+                      {armedTerrainBrushTool === null
+                        ? "No terrain brush is armed. Existing selection and transforms stay unchanged."
+                        : `${getTerrainBrushToolLabel(armedTerrainBrushTool)} is armed for ${getTerrainLabelById(selectedTerrain.id, terrainList)}. Click the active tool again to disarm it.`}
+                    </div>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Brush</div>
+                    <label className="form-field">
+                      <span className="label">
+                        Radius {terrainBrushSettings.radius.toFixed(2)}m
+                      </span>
+                      <input
+                        data-testid="terrain-brush-radius"
+                        type="range"
+                        min="0.25"
+                        max="12"
+                        step="0.25"
+                        value={terrainBrushSettings.radius}
+                        onChange={(event) =>
+                          handleTerrainBrushRadiusChange(
+                            event.currentTarget.value
+                          )
+                        }
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">
+                        Strength {terrainBrushSettings.strength.toFixed(2)}
+                      </span>
+                      <input
+                        data-testid="terrain-brush-strength"
+                        type="range"
+                        min="0.05"
+                        max="1"
+                        step="0.05"
+                        value={terrainBrushSettings.strength}
+                        onChange={(event) =>
+                          handleTerrainBrushStrengthChange(
+                            event.currentTarget.value
+                          )
+                        }
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">
+                        Falloff {terrainBrushSettings.falloff.toFixed(2)}
+                      </span>
+                      <input
+                        data-testid="terrain-brush-falloff"
+                        type="range"
+                        min="0"
+                        max="1"
+                        step="0.05"
+                        value={terrainBrushSettings.falloff}
+                        onChange={(event) =>
+                          handleTerrainBrushFalloffChange(
+                            event.currentTarget.value
+                          )
+                        }
+                      />
+                    </label>
+                  </div>
+
                   <div className="form-section">
                     <div className="label">Grid</div>
                     <div className="material-summary">