feat(map): refine sector inspector styling

apps/catalog/src/MapFixturePreview.tsx

@@ -75,6 +75,11 @@ type SectorGridLodProfile = GridLodProfile & {
   majorLinesEnabled: boolean;
   majorLabelsEnabled: boolean;
   majorLineWidthMultiplier: number;
+  selectionFillColor: string;
+  selectionFillOpacityPercent: number;
+  selectionOutlineColor: string;
+  selectionOutlineWidthPx: number;
+  selectionOutlineOpacityPercent: number;
   volumeEnabled: boolean;
   volumeMinimumHeightMeters: number;
   volumeMaximumHeightMeters: number;
@@ -981,12 +986,22 @@ export const MapFixturePreview = forwardRef<MapFixturePreviewHandle, {
   const updateGridVolumeRange = (patch: Partial<Pick<SectorGridLodProfile,
     "volumeMinimumHeightMeters" | "volumeMaximumHeightMeters" | "volumeBandHeightMeters">>) => {
     const minimum = patch.volumeMinimumHeightMeters ?? activeGridLod.volumeMinimumHeightMeters;
-    const maximum = Math.max(minimum + 1, patch.volumeMaximumHeightMeters ?? activeGridLod.volumeMaximumHeightMeters);
+    const requestedBandHeight = Math.min(
+      1_000,
+      Math.max(1, patch.volumeBandHeightMeters ?? activeGridLod.volumeBandHeightMeters),
+    );
+    let maximum = Math.min(
+      10_000,
+      Math.max(minimum + 1, patch.volumeMaximumHeightMeters ?? activeGridLod.volumeMaximumHeightMeters),
+    );
+    if (patch.volumeBandHeightMeters !== undefined) {
+      maximum = Math.min(10_000, Math.max(maximum, minimum + requestedBandHeight));
+    }
     const span = maximum - minimum;
     updateGridLod({
       volumeMinimumHeightMeters: minimum,
       volumeMaximumHeightMeters: maximum,
-      volumeBandHeightMeters: Math.min(span, Math.max(1, patch.volumeBandHeightMeters ?? activeGridLod.volumeBandHeightMeters)),
+      volumeBandHeightMeters: Math.min(span, requestedBandHeight),
     });
   };
   const setCacheEnabled = (cacheEnabled: boolean) => {
@@ -1632,7 +1647,7 @@ export const MapFixturePreview = forwardRef<MapFixturePreviewHandle, {
       label: "Сетка и LOD",
       description: "first adapter control",
       group: "Слои",
-      content: <>
+      content: <div className="catalog-map-grid-inspector">
         <small className="catalog-map-inspector__note">Фиксированная московская ENU-адресация задаёт неизменные сектора на LOD 1–3. LOD 4–5 используют глобальную WGS84-гратику́лу; камера выбирает только LOD и видимую область.</small>
         <Checker checked={mapSettings.gridVisible} label="Сетка" onChange={(gridVisible) => updateMapSettings({ gridVisible })} />
         <Checker checked={mapSettings.grid3dEnabled} label="3D-сетка" onChange={(grid3dEnabled) => updateMapSettings({ grid3dEnabled })} />
@@ -1743,13 +1758,55 @@ export const MapFixturePreview = forwardRef<MapFixturePreviewHandle, {
             label="Высота адресного диапазона"
             value={activeGridLod.volumeBandHeightMeters}
             min={1}
-            max={Math.max(1, activeGridLod.volumeMaximumHeightMeters - activeGridLod.volumeMinimumHeightMeters)}
+            max={1_000}
             step={10}
             formatValue={(value) => `${value} м`}
             onChange={(volumeBandHeightMeters) => updateGridVolumeRange({ volumeBandHeightMeters })}
           />
           <small className="catalog-map-inspector__note">Горизонтальный ID сектора остаётся стабильным. Высотный band добавляется как отдельный адрес внутри выбранной ENU-ячейки.</small>
         </> : null}
+        <ControlRow label="Цвет заливки сектора">
+          <ColorField
+            label="Цвет заливки выбранного сектора"
+            value={activeGridLod.selectionFillColor}
+            onChange={(selectionFillColor) => updateGridLod({ selectionFillColor })}
+          />
+        </ControlRow>
+        <RangeControl
+          label="Прозрачность заливки"
+          value={activeGridLod.selectionFillOpacityPercent}
+          min={0}
+          max={100}
+          step={1}
+          formatValue={(value) => `${value}%`}
+          onChange={(selectionFillOpacityPercent) => updateGridLod({ selectionFillOpacityPercent })}
+        />
+        <ControlRow label="Цвет линии сектора">
+          <ColorField
+            label="Цвет линии выбранного сектора"
+            value={activeGridLod.selectionOutlineColor}
+            onChange={(selectionOutlineColor) => updateGridLod({ selectionOutlineColor })}
+          />
+        </ControlRow>
+        <RangeControl
+          label="Толщина линии"
+          value={activeGridLod.selectionOutlineWidthPx}
+          min={1}
+          max={12}
+          step={0.25}
+          formatValue={(value) => `${value} px`}
+          onChange={(selectionOutlineWidthPx) => updateGridLod({ selectionOutlineWidthPx })}
+        />
+        <RangeControl
+          label="Прозрачность линии"
+          value={activeGridLod.selectionOutlineOpacityPercent}
+          min={0}
+          max={100}
+          step={1}
+          formatValue={(value) => `${value}%`}
+          onChange={(selectionOutlineOpacityPercent) => updateGridLod({ selectionOutlineOpacityPercent })}
+        />
+        <small className="catalog-map-inspector__note">Оформление применяется к выбранному сектору текущего LOD.</small>
         <section className="catalog-map-grid-sector" aria-label="Выбранный сектор">
           <ControlRow label="Выбранный сектор"><strong className="catalog-map-grid-sector-id">{selectedGridSector?.id ?? "Нажмите сектор на карте"}</strong></ControlRow>
           {selectedGridSector ? <>
@@ -1841,7 +1898,7 @@ export const MapFixturePreview = forwardRef<MapFixturePreviewHandle, {
             </div> : null}
           </> : <small className="catalog-map-inspector__note">Кликните ячейку, чтобы получить устойчивый адрес, геометрию и навигацию по соседям.</small>}
         </section>
-      </>,
+      </div>,
     },
     {
       id: "map-camera-animation",