Enhance App component with box brush authoring features

src/app/App.tsx

@@ -1,9 +1,16 @@
-import { useEffect, useRef, useState, type ChangeEvent } from "react";
+import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
 
-import { createSetSceneNameCommand } from "../commands/set-scene-name-command";
-import type { EditorSelection } from "../core/selection";
+import { createCreateBoxBrushCommand } from "../commands/create-box-brush-command";
+import { createMoveBoxBrushCommand } from "../commands/move-box-brush-command";
+import { createResizeBoxBrushCommand } from "../commands/resize-box-brush-command";
+import { getSingleSelectedBrushId, isBrushSelected, type EditorSelection } from "../core/selection";
+import type { Vec3 } from "../core/vector";
+import { DEFAULT_BOX_BRUSH_CENTER, DEFAULT_BOX_BRUSH_SIZE, type BoxBrush } from "../document/brushes";
+import { DEFAULT_GRID_SIZE, snapPositiveSizeToGrid, snapVec3ToGrid } from "../geometry/grid-snapping";
 import { Panel } from "../shared-ui/Panel";
 import { ViewportCanvas } from "../viewport-three/ViewportCanvas";
+
+import { createSetSceneNameCommand } from "../commands/set-scene-name-command";
 import type { EditorStore } from "./editor-store";
 import { useEditorStoreState } from "./use-editor-store";
 
@@ -12,16 +19,78 @@ interface AppProps {
   initialStatusMessage?: string;
 }
 
-function describeSelection(selectionKind: EditorSelection["kind"]): string {
-  switch (selectionKind) {
+interface Vec3Draft {
+  x: string;
+  y: string;
+  z: string;
+}
+
+function createVec3Draft(vector: Vec3): Vec3Draft {
+  return {
+    x: String(vector.x),
+    y: String(vector.y),
+    z: String(vector.z)
+  };
+}
+
+function readVec3Draft(draft: Vec3Draft, label: string): Vec3 {
+  const vector = {
+    x: Number(draft.x),
+    y: Number(draft.y),
+    z: Number(draft.z)
+  };
+
+  if (!Number.isFinite(vector.x) || !Number.isFinite(vector.y) || !Number.isFinite(vector.z)) {
+    throw new Error(`${label} values must be finite numbers.`);
+  }
+
+  return vector;
+}
+
+function areVec3Equal(left: Vec3, right: Vec3): boolean {
+  return left.x === right.x && left.y === right.y && left.z === right.z;
+}
+
+function getSelectedBoxBrush(selection: EditorSelection, brushes: BoxBrush[]): BoxBrush | null {
+  const selectedBrushId = getSingleSelectedBrushId(selection);
+
+  if (selectedBrushId === null) {
+    return null;
+  }
+
+  return brushes.find((brush) => brush.id === selectedBrushId) ?? null;
+}
+
+function getBrushLabel(index: number): string {
+  return `Box Brush ${index + 1}`;
+}
+
+function getSelectedBrushLabel(selection: EditorSelection, brushes: BoxBrush[]): string {
+  const selectedBrushId = getSingleSelectedBrushId(selection);
+
+  if (selectedBrushId === null) {
+    return "No brush selected";
+  }
+
+  const brushIndex = brushes.findIndex((brush) => brush.id === selectedBrushId);
+
+  if (brushIndex === -1) {
+    return "Selected brush is missing";
+  }
+
+  return getBrushLabel(brushIndex);
+}
+
+function describeSelection(selection: EditorSelection, brushes: BoxBrush[]): string {
+  switch (selection.kind) {
     case "none":
-      return "No authored selection yet";
+      return "No authored selection";
     case "brushes":
-      return "Brush selection placeholder";
+      return `${selection.ids.length} brush selected (${getSelectedBrushLabel(selection, brushes)})`;
     case "entities":
-      return "Entity selection placeholder";
+      return `${selection.ids.length} entities selected`;
     case "modelInstances":
-      return "Model instance selection placeholder";
+      return `${selection.ids.length} model instances selected`;
     default:
       return "Unknown selection";
   }
@@ -37,14 +106,38 @@ function getErrorMessage(error: unknown): string {
 
 export function App({ store, initialStatusMessage }: AppProps) {
   const editorState = useEditorStoreState(store);
+  const brushList = Object.values(editorState.document.brushes);
+  const selectedBrush = getSelectedBoxBrush(editorState.selection, brushList);
+
   const [sceneNameDraft, setSceneNameDraft] = useState(editorState.document.name);
-  const [statusMessage, setStatusMessage] = useState(initialStatusMessage ?? "Viewport shell ready.");
+  const [positionDraft, setPositionDraft] = useState(createVec3Draft(DEFAULT_BOX_BRUSH_CENTER));
+  const [sizeDraft, setSizeDraft] = useState(createVec3Draft(DEFAULT_BOX_BRUSH_SIZE));
+  const [statusMessage, setStatusMessage] = useState(initialStatusMessage ?? "Box brush authoring ready.");
   const importInputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     setSceneNameDraft(editorState.document.name);
   }, [editorState.document.name]);
 
+  useEffect(() => {
+    if (selectedBrush === null) {
+      setPositionDraft(createVec3Draft(DEFAULT_BOX_BRUSH_CENTER));
+      setSizeDraft(createVec3Draft(DEFAULT_BOX_BRUSH_SIZE));
+      return;
+    }
+
+    setPositionDraft(createVec3Draft(selectedBrush.center));
+    setSizeDraft(createVec3Draft(selectedBrush.size));
+  }, [
+    selectedBrush?.id,
+    selectedBrush?.center.x,
+    selectedBrush?.center.y,
+    selectedBrush?.center.z,
+    selectedBrush?.size.x,
+    selectedBrush?.size.y,
+    selectedBrush?.size.z
+  ]);
+
   const applySceneName = () => {
     const normalizedName = sceneNameDraft.trim() || "Untitled Scene";
 
@@ -57,6 +150,93 @@ export function App({ store, initialStatusMessage }: AppProps) {
     setStatusMessage(`Scene renamed to ${normalizedName}.`);
   };
 
+  const handleCreateBoxBrush = () => {
+    try {
+      store.executeCommand(createCreateBoxBrushCommand());
+      setStatusMessage(`Created a box brush snapped to the ${DEFAULT_GRID_SIZE}m grid.`);
+    } catch (error) {
+      setStatusMessage(getErrorMessage(error));
+    }
+  };
+
+  const handleBrushSelection = (brushId: string | null, source: "outliner" | "viewport") => {
+    if (brushId === null) {
+      store.setSelection({
+        kind: "none"
+      });
+      setStatusMessage(`${source === "viewport" ? "Viewport" : "Outliner"} selection cleared.`);
+      return;
+    }
+
+    const brushIndex = brushList.findIndex((brush) => brush.id === brushId);
+
+    store.setSelection({
+      kind: "brushes",
+      ids: [brushId]
+    });
+
+    const brushLabel = brushIndex === -1 ? "Box Brush" : getBrushLabel(brushIndex);
+    setStatusMessage(`Selected ${brushLabel} from the ${source}.`);
+  };
+
+  const applyPositionChange = () => {
+    if (selectedBrush === null) {
+      setStatusMessage("Select a box brush before moving it.");
+      return;
+    }
+
+    try {
+      const snappedCenter = snapVec3ToGrid(readVec3Draft(positionDraft, "Box brush position"), DEFAULT_GRID_SIZE);
+
+      if (areVec3Equal(snappedCenter, selectedBrush.center)) {
+        setStatusMessage("Box brush position is already snapped to that grid location.");
+        return;
+      }
+
+      store.executeCommand(
+        createMoveBoxBrushCommand({
+          brushId: selectedBrush.id,
+          center: snappedCenter
+        })
+      );
+      setStatusMessage("Moved selected box brush.");
+    } catch (error) {
+      setStatusMessage(getErrorMessage(error));
+    }
+  };
+
+  const applySizeChange = () => {
+    if (selectedBrush === null) {
+      setStatusMessage("Select a box brush before resizing it.");
+      return;
+    }
+
+    try {
+      const snappedSize = snapPositiveSizeToGrid(readVec3Draft(sizeDraft, "Box brush size"), DEFAULT_GRID_SIZE);
+
+      if (areVec3Equal(snappedSize, selectedBrush.size)) {
+        setStatusMessage("Box brush size is already snapped to those dimensions.");
+        return;
+      }
+
+      store.executeCommand(
+        createResizeBoxBrushCommand({
+          brushId: selectedBrush.id,
+          size: snappedSize
+        })
+      );
+      setStatusMessage("Resized selected box brush.");
+    } catch (error) {
+      setStatusMessage(getErrorMessage(error));
+    }
+  };
+
+  const handleDraftVectorKeyDown = (event: KeyboardEvent<HTMLInputElement>, applyChange: () => void) => {
+    if (event.key === "Enter") {
+      applyChange();
+    }
+  };
+
   const handleSaveDraft = () => {
     const result = store.saveDraft();
     setStatusMessage(result.message);
@@ -108,7 +288,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
       <header className="toolbar">
         <div className="toolbar__brand">
           <div className="toolbar__title">WebEditor3D</div>
-          <div className="toolbar__subtitle">Milestone 0 foundation slice</div>
+          <div className="toolbar__subtitle">Slice 1.1 box brush authoring</div>
         </div>
 
         <div className="toolbar__actions">
@@ -134,6 +314,9 @@ export function App({ store, initialStatusMessage }: AppProps) {
             >
               Play
             </button>
+            <button className="toolbar__button toolbar__button--accent" type="button" data-testid="create-box-brush" onClick={handleCreateBoxBrush}>
+              Create Box Brush
+            </button>
           </div>
 
           <div className="toolbar__group">
@@ -170,10 +353,18 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 <div className="label">Version</div>
                 <div className="value">v{editorState.document.version}</div>
               </div>
+              <div className="stat-card">
+                <div className="label">Grid</div>
+                <div className="value">{DEFAULT_GRID_SIZE}m snap</div>
+              </div>
               <div className="stat-card">
                 <div className="label">Tool Mode</div>
                 <div className="value">{editorState.toolMode}</div>
               </div>
+              <div className="stat-card">
+                <div className="label">Brushes</div>
+                <div className="value">{brushList.length}</div>
+              </div>
             </div>
 
             <label className="form-field">
@@ -193,45 +384,177 @@ export function App({ store, initialStatusMessage }: AppProps) {
 
             <div className="inline-actions">
               <button className="toolbar__button toolbar__button--accent" type="button" onClick={applySceneName}>
-                Apply Command
+                Apply Scene Name Command
               </button>
             </div>
+
+            <ul className="placeholder-list">
+              <li>Box brushes are stored canonically as structured brush data.</li>
+              <li>Move and resize use command history and 1 meter grid snapping.</li>
+            </ul>
           </Panel>
 
           <Panel title="Outliner">
-            <ul className="placeholder-list">
-              <li>Brushes: {Object.keys(editorState.document.brushes).length}</li>
-              <li>Entities: {Object.keys(editorState.document.entities).length}</li>
-              <li>Model Instances: {Object.keys(editorState.document.modelInstances).length}</li>
-            </ul>
+            {brushList.length === 0 ? (
+              <ul className="placeholder-list">
+                <li>No authored brushes yet. Use Create Box Brush to place the first brush.</li>
+              </ul>
+            ) : (
+              <div className="outliner-list" data-testid="outliner-brush-list">
+                {brushList.map((brush, brushIndex) => (
+                  <button
+                    key={brush.id}
+                    className={`outliner-item ${isBrushSelected(editorState.selection, brush.id) ? "outliner-item--selected" : ""}`}
+                    type="button"
+                    onClick={() => handleBrushSelection(brush.id, "outliner")}
+                  >
+                    <span className="outliner-item__title">{getBrushLabel(brushIndex)}</span>
+                    <span className="outliner-item__meta">
+                      center {brush.center.x}, {brush.center.y}, {brush.center.z}
+                    </span>
+                    <span className="outliner-item__meta">
+                      size {brush.size.x}, {brush.size.y}, {brush.size.z}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
           </Panel>
         </aside>
 
         <main className="viewport-region">
           <div className="viewport-region__header">
             <div className="viewport-region__title">Viewport</div>
-            <div className="viewport-region__caption">Imperative three.js editor surface</div>
+            <div className="viewport-region__caption">
+              {brushList.length} box brushes loaded. Click a brush in the viewport or outliner to select it.
+            </div>
           </div>
-          <ViewportCanvas world={editorState.document.world} />
+          <ViewportCanvas
+            world={editorState.document.world}
+            document={editorState.document}
+            selection={editorState.selection}
+            onBrushSelectionChange={(brushId) => handleBrushSelection(brushId, "viewport")}
+          />
         </main>
 
         <aside className="side-column">
           <Panel title="Inspector">
             <div className="stat-card">
               <div className="label">Selection</div>
-              <div className="value">{describeSelection(editorState.selection.kind)}</div>
+              <div className="value">{describeSelection(editorState.selection, brushList)}</div>
             </div>
-            <ul className="placeholder-list">
-              <li>Document is the canonical source of truth.</li>
-              <li>Viewport state is derived and disposable.</li>
-              <li>Real geometry tools intentionally start in Milestone 1.</li>
-            </ul>
+
+            {selectedBrush === null ? (
+              <ul className="placeholder-list">
+                <li>Select a box brush to edit its center and size.</li>
+                <li>All transforms in this slice stay axis-aligned and snapped to the grid.</li>
+              </ul>
+            ) : (
+              <>
+                <div className="stat-card">
+                  <div className="label">Brush Kind</div>
+                  <div className="value">box</div>
+                </div>
+
+                <div className="form-section">
+                  <div className="label">Center</div>
+                  <div className="vector-inputs">
+                    <label className="form-field">
+                      <span className="label">X</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        step={DEFAULT_GRID_SIZE}
+                        value={positionDraft.x}
+                        onChange={(event) => setPositionDraft((draft) => ({ ...draft, x: event.currentTarget.value }))}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyPositionChange)}
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">Y</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        step={DEFAULT_GRID_SIZE}
+                        value={positionDraft.y}
+                        onChange={(event) => setPositionDraft((draft) => ({ ...draft, y: event.currentTarget.value }))}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyPositionChange)}
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">Z</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        step={DEFAULT_GRID_SIZE}
+                        value={positionDraft.z}
+                        onChange={(event) => setPositionDraft((draft) => ({ ...draft, z: event.currentTarget.value }))}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyPositionChange)}
+                      />
+                    </label>
+                  </div>
+                  <button className="toolbar__button" type="button" data-testid="apply-brush-position" onClick={applyPositionChange}>
+                    Apply Move Command
+                  </button>
+                </div>
+
+                <div className="form-section">
+                  <div className="label">Size</div>
+                  <div className="vector-inputs">
+                    <label className="form-field">
+                      <span className="label">X</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        min={DEFAULT_GRID_SIZE}
+                        step={DEFAULT_GRID_SIZE}
+                        value={sizeDraft.x}
+                        onChange={(event) => setSizeDraft((draft) => ({ ...draft, x: event.currentTarget.value }))}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applySizeChange)}
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">Y</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        min={DEFAULT_GRID_SIZE}
+                        step={DEFAULT_GRID_SIZE}
+                        value={sizeDraft.y}
+                        onChange={(event) => setSizeDraft((draft) => ({ ...draft, y: event.currentTarget.value }))}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applySizeChange)}
+                      />
+                    </label>
+                    <label className="form-field">
+                      <span className="label">Z</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        min={DEFAULT_GRID_SIZE}
+                        step={DEFAULT_GRID_SIZE}
+                        value={sizeDraft.z}
+                        onChange={(event) => setSizeDraft((draft) => ({ ...draft, z: event.currentTarget.value }))}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applySizeChange)}
+                      />
+                    </label>
+                  </div>
+                  <button className="toolbar__button" type="button" data-testid="apply-brush-size" onClick={applySizeChange}>
+                    Apply Resize Command
+                  </button>
+                </div>
+
+                <ul className="placeholder-list">
+                  <li>Stable face ids: posX, negX, posY, negY, posZ, negZ.</li>
+                  <li>Face materials and UV editing remain out of scope for Slice 1.2.</li>
+                </ul>
+              </>
+            )}
           </Panel>
 
           <Panel title="Runner">
             <ul className="placeholder-list">
-              <li>Built-in runner shell reserved for later slices.</li>
-              <li>Current focus is versioned documents, persistence, and editor boot flow.</li>
+              <li>Built-in runner authoring is still pending.</li>
+              <li>This slice establishes canonical brush data and edit persistence first.</li>
             </ul>
           </Panel>
         </aside>