Polish change detection density

frontend/src/components/analysis/ChangeDetectionPanel.tsx

@@ -37,8 +37,8 @@ export function ChangeDetectionPanel({
   onRun,
 }: ChangeDetectionPanelProps): JSX.Element {
   return (
-    <section className="panel">
-      <div className="panel-header">
+    <section className="panel change-detection-shell">
+      <div className="panel-header change-detection-heading">
         <div>
           <p className="eyebrow">Analysis</p>
           <h2>Change Detection</h2>
@@ -48,80 +48,99 @@ export function ChangeDetectionPanel({
         </button>
       </div>
 
-      <div className="form-grid">
-        <label>
-          Source vector
-          <select value={sourceDatasetId} onChange={(event) => onSourceDatasetChange(event.target.value)}>
-            <option value="">Select source</option>
-            {vectorDatasets.map((dataset) => (
-              <option key={dataset.id} value={dataset.id}>
-                {datasetLabel(dataset)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <label>
-          Target vector
-          <select value={targetDatasetId} onChange={(event) => onTargetDatasetChange(event.target.value)}>
-            <option value="">Select target</option>
-            {vectorDatasets.map((dataset) => (
-              <option key={dataset.id} value={dataset.id}>
-                {datasetLabel(dataset)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <label>
-          IoU threshold
-          <input
-            max="1"
-            min="0"
-            step="0.05"
-            type="number"
-            value={iouThreshold}
-            onChange={(event) => onIouThresholdChange(Number(event.target.value))}
-          />
-        </label>
-        <label className="checkbox-row">
-          <input
-            checked={includeUnchanged}
-            type="checkbox"
-            onChange={(event) => onIncludeUnchangedChange(event.target.checked)}
-          />
-          Include unchanged geometry
-        </label>
+      <div className="change-detection-input-surface" aria-label="Change detection input controls">
+        <div className="form-grid">
+          <label>
+            Source vector
+            <select value={sourceDatasetId} onChange={(event) => onSourceDatasetChange(event.target.value)}>
+              <option value="">Select source</option>
+              {vectorDatasets.map((dataset) => (
+                <option key={dataset.id} value={dataset.id}>
+                  {datasetLabel(dataset)}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Target vector
+            <select value={targetDatasetId} onChange={(event) => onTargetDatasetChange(event.target.value)}>
+              <option value="">Select target</option>
+              {vectorDatasets.map((dataset) => (
+                <option key={dataset.id} value={dataset.id}>
+                  {datasetLabel(dataset)}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            IoU threshold
+            <input
+              max="1"
+              min="0"
+              step="0.05"
+              type="number"
+              value={iouThreshold}
+              onChange={(event) => onIouThresholdChange(Number(event.target.value))}
+            />
+          </label>
+          <label className="checkbox-row">
+            <input
+              checked={includeUnchanged}
+              type="checkbox"
+              onChange={(event) => onIncludeUnchangedChange(event.target.checked)}
+            />
+            Include unchanged geometry
+          </label>
+        </div>
       </div>
 
-      {error ? <p className="error">{error}</p> : null}
-      {!error && vectorDatasets.length < 2 ? <p className="muted">Upload at least two vector datasets to compare.</p> : null}
+      <div className="change-detection-state-stack">
+        {error ? (
+          <div className="result-state result-state-error">
+            <strong>Change detection failed.</strong>
+            <p>{error}</p>
+          </div>
+        ) : null}
+        {!error && vectorDatasets.length < 2 ? (
+          <div className="result-state result-state-empty">
+            <strong>Not enough vector datasets</strong>
+            <p>Upload at least two vector datasets to compare.</p>
+          </div>
+        ) : null}
+      </div>
 
       {result ? (
-        <div className="summary-grid">
-          <div>
-            <span className="metric">{result.added_count}</span>
-            <span>Added</span>
-          </div>
-          <div>
-            <span className="metric">{result.removed_count}</span>
-            <span>Removed</span>
-          </div>
-          <div>
-            <span className="metric">{result.unchanged_count}</span>
-            <span>Unchanged</span>
-          </div>
-          <div>
-            <span className="metric">{result.geojson.features.length}</span>
-            <span>Map features</span>
+        <div className="change-detection-result-surface" aria-label="Change detection result summary">
+          <div className="summary-grid">
+            <div>
+              <span className="metric">{result.added_count}</span>
+              <span>Added</span>
+            </div>
+            <div>
+              <span className="metric">{result.removed_count}</span>
+              <span>Removed</span>
+            </div>
+            <div>
+              <span className="metric">{result.unchanged_count}</span>
+              <span>Unchanged</span>
+            </div>
+            <div>
+              <span className="metric">{result.geojson.features.length}</span>
+              <span>Map features</span>
+            </div>
           </div>
         </div>
       ) : null}
 
       {result?.warnings.length ? (
-        <ul className="compact-list">
-          {result.warnings.map((warning) => (
-            <li key={warning}>{warning}</li>
-          ))}
-        </ul>
+        <div className="change-detection-warning-surface">
+          <strong>Warnings</strong>
+          <ul className="compact-list">
+            {result.warnings.map((warning) => (
+              <li key={warning}>{warning}</li>
+            ))}
+          </ul>
+        </div>
       ) : null}
     </section>
   )