From a1e12db72f6b343392de9e72d04b264c9ea16ae4 Mon Sep 17 00:00:00 2001
From: bot-backend <alexandro361@gmail.com>
Date: Sun, 26 Jul 2026 22:38:36 +0300
Subject: [PATCH] fix(tradein/v2): replace decorative pseudo-map with real
 Leaflet+OSM map in ParamsPanel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

01 ПАРАМЕТРЫ КВАРТИРЫ showed a fake SVG (grid + invented streets + radius
rings) above the address field, with no real coordinates driving it — the
+/- buttons scaled the picture, not a map. Replaced with a real Leaflet map
(same CDN-loader/tile pattern as SourcesMap.tsx/MapPicker.tsx):

- centred on coords from the picked geocode suggestion (lat/lon), with a
  marker on the address
- radius circle in real metres (L.circle), synced with РАДИУС АНАЛИЗА;
  "Авто" previews the backend's primary two-tier default (1000 m)
- +/- buttons drive real Leaflet zoom (zoomIn/zoomOut), not a CSS scale hack
- removed the "Схематично · не географическая карта" disclaimer (no longer
  true) — OSM attribution now comes from Leaflet's own attribution control
- tidy placeholder (icon + hint text) while no address is picked yet,
  instead of an empty box or a broken map

The old %-projected analog price pins (mapMarkers()) are not replotted on
the real map — their positions were fabricated against a fixed non-scale
grid and would be geographically wrong at the map's real zoom.
---
 .../components/trade-in/v2/ParamsPanel.tsx    | 588 +++++++++++-------
 1 file changed, 365 insertions(+), 223 deletions(-)

diff --git a/tradein-mvp/frontend/src/components/trade-in/v2/ParamsPanel.tsx b/tradein-mvp/frontend/src/components/trade-in/v2/ParamsPanel.tsx
index 1edcbc9d..46d8e009 100644
--- a/tradein-mvp/frontend/src/components/trade-in/v2/ParamsPanel.tsx
+++ b/tradein-mvp/frontend/src/components/trade-in/v2/ParamsPanel.tsx
@@ -7,9 +7,16 @@
 // styles are UNCHANGED — only the data plumbing differs (display <div>s became
 // <input>s styled identically, dropdowns now feed real enum values). RU dropdown
 // labels <-> API enum values go through HOUSE_TYPE_*/REPAIR_* maps in ./mappers.
-// РАДИУС is now wired (radius_m on submit + the outer map ring scales with it);
-// the CRM dropdown still has no backend → kept visually but disabled. Hover/active
-// + @keyframes live in a pp-prefixed local <style>.
+// РАДИУС is now wired (radius_m on submit + the real map circle below scales
+// with it); the CRM dropdown still has no backend → kept visually but disabled.
+// Hover/active + @keyframes live in a pp-prefixed local <style>.
+//
+// Fix (audit): the 01 map was a decorative SVG (grid + fake streets + radius
+// rings) with no real coordinates behind it. It is now a real Leaflet + OSM
+// basemap, ported from the same CDN-loader pattern as ./SourcesMap.tsx /
+// ../MapPicker.tsx (copied rather than shared — same self-contained-port
+// convention as SourcesMap.tsx, no npm Leaflet dep).
+/* eslint-disable @typescript-eslint/no-explicit-any -- интероп с CDN-библиотекой Leaflet (см. SourcesMap.tsx) */
 
 import {
   useEffect,
@@ -143,6 +150,97 @@ function comboKeyDown(
   }
 }
 
+// ── 01 map — Leaflet + OSM (real coordinates) ───────────────────────────────
+// Same CDN loader pattern/version/SRI as ./SourcesMap.tsx and ../MapPicker.tsx
+// (duplicated on purpose — each v2 file is a self-contained port, no shared
+// runtime module, no npm Leaflet dep).
+const LEAFLET_VER = "1.9.4";
+const LEAFLET_CSS = `https://unpkg.com/leaflet@${LEAFLET_VER}/dist/leaflet.css`;
+const LEAFLET_JS = `https://unpkg.com/leaflet@${LEAFLET_VER}/dist/leaflet.js`;
+const LEAFLET_CSS_SRI = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=";
+const LEAFLET_JS_SRI = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=";
+const MAP_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+const MAP_ATTRIBUTION = "© OpenStreetMap";
+const DEFAULT_MAP_ZOOM = 16;
+const MIN_MAP_ZOOM = 11;
+const MAX_MAP_ZOOM = 19;
+
+/** Подгружает Leaflet с CDN один раз, резолвит window.L. (mirror SourcesMap.tsx) */
+function loadLeaflet(): Promise<any> {
+  return new Promise((resolve, reject) => {
+    const w = window as any;
+    if (w.L) {
+      resolve(w.L);
+      return;
+    }
+    if (!document.querySelector(`link[data-leaflet]`)) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = LEAFLET_CSS;
+      link.integrity = LEAFLET_CSS_SRI;
+      link.crossOrigin = "anonymous";
+      link.setAttribute("data-leaflet", "1");
+      document.head.appendChild(link);
+    }
+    const existing = document.querySelector<HTMLScriptElement>(`script[data-leaflet]`);
+    if (existing) {
+      existing.addEventListener("load", () => resolve(w.L));
+      existing.addEventListener("error", () => reject(new Error("leaflet load failed")));
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = LEAFLET_JS;
+    script.integrity = LEAFLET_JS_SRI;
+    script.crossOrigin = "anonymous";
+    script.setAttribute("data-leaflet", "1");
+    script.onload = () => resolve(w.L);
+    script.onerror = () => reject(new Error("leaflet load failed"));
+    document.body.appendChild(script);
+  });
+}
+
+/** Экранирование перед вставкой в raw-HTML Leaflet divIcon (адрес — ввод
+ * пользователя). Тот же паттерн, что и esc() в SourcesMap.tsx. */
+function escapeMapHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) =>
+    c === "&"
+      ? "&amp;"
+      : c === "<"
+        ? "&lt;"
+        : c === ">"
+          ? "&gt;"
+          : c === '"'
+            ? "&quot;"
+            : "&#39;",
+  );
+}
+
+/** Пин квартиры-предмета оценки — divIcon 1:1 повторяет прежний SVG-бабл
+ * (акцентная рамка, точка, адрес + площадь, треугольник-указатель), только
+ * теперь висит на реальных координатах реальной карты. */
+function buildSubjectIcon(
+  L: any,
+  addressLabel: string,
+  areaLabel: string | null,
+): any {
+  const html = `
+    <div style="position:relative;width:220px;height:56px;pointer-events:none">
+      <div style="position:absolute;left:50%;bottom:9px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:${tokens.surface.w85};border:1px solid ${tokens.accent};border-radius:4px;padding:4px 8px;white-space:nowrap;box-shadow:0 3px 10px rgba(46,139,255,.25);font-family:${tokens.font.sans}">
+        <span style="width:7px;height:7px;border-radius:50%;background:${tokens.accent};flex:0 0 auto"></span>
+        <span style="display:flex;flex-direction:column;gap:1px">
+          <span style="font-size:11px;font-weight:600;color:${tokens.ink}">${escapeMapHtml(addressLabel)}</span>
+          ${
+            areaLabel
+              ? `<span style="font-size:9px;color:${tokens.muted}">${escapeMapHtml(areaLabel)}</span>`
+              : ""
+          }
+        </span>
+      </div>
+      <div style="position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid ${tokens.accent}"></div>
+    </div>`;
+  return L.divIcon({ html, className: "", iconSize: [220, 56], iconAnchor: [110, 56] });
+}
+
 function Dd({
   open,
   onToggle,
@@ -425,21 +523,6 @@ const errorText: CSSProperties = {
   color: tokens.danger,
 };
 
-// Analog price pin on the 01 map. left/top come from mapMarkers() per-analog
-// (projected from the real estimate); the chrome matches the former fixture
-// pins 1:1 — only the data source changed (Finding #2).
-const analogPin: CSSProperties = {
-  position: "absolute",
-  background: tokens.surface.w70,
-  border: `1px solid ${tokens.line}`,
-  borderRadius: 4,
-  padding: "3px 7px",
-  fontFamily: tokens.font.mono,
-  fontSize: 9,
-  lineHeight: 1.4,
-  color: tokens.ink,
-};
-
 // РАДИУС dropdown panel — mirrors the <Dd> HUD panel (surface.w98 + soft blue
 // shadow), sized to the narrow radius trigger and dropped just beneath it.
 const radiusPanel: CSSProperties = {
@@ -468,8 +551,13 @@ interface ParamsPanelProps {
   error?: string | null;
   /** Prefill for restore-by-id (?id=) — maps API enums back to RU dropdown labels. */
   initialValues?: Partial<TradeInEstimateInput>;
-  /** Analog price pins for the 01 map, projected from the real estimate via
-   *  mapMarkers(). Default [] → no price pins (never the fabricated fixtures). */
+  /** Analog price pins, projected from the real estimate via mapMarkers() onto
+   *  the OLD decorative SVG's fixed 0-100% grid (never a real geo scale — see
+   *  mapMarkers() comment in ./mappers.ts). Kept in the prop contract for
+   *  backward-compat with the caller (app/v2/page.tsx); intentionally NOT
+   *  plotted on the real Leaflet map below, because their %-positions do not
+   *  correspond to real lat/lon at the map's actual zoom — projecting them
+   *  would be a new, subtler version of the honesty bug this map replaces. */
   markers?: MapMarker[];
 }
 
@@ -495,6 +583,12 @@ function initRepairLabel(rs: RepairState | undefined): string {
 // both ("ищем строго в пределах X м"). Design dropdown was values-only.
 const RADIUS_OPTIONS = ["Авто", "300 м", "500 м", "1000 м", "2000 м"];
 
+// "Авто" sends no radius_m → the backend applies its two-tier default (1000 m
+// primary / 2000 m fallback, see RADIUS_OPTIONS comment above). The map circle
+// previews the PRIMARY tier so it is never wildly off from what the backend
+// will actually use.
+const AUTO_RADIUS_PREVIEW_M = 1000;
+
 // radius_m (metres) -> dropdown label. null/absent → "Авто" (legacy two-tier
 // default), so a re-submit never silently narrows the search.
 function initRadiusLabel(radiusM: number | null | undefined): string {
@@ -509,7 +603,9 @@ export default function ParamsPanel({
   hasEstimate = false,
   error = null,
   initialValues,
-  markers = [],
+  // markers intentionally not destructured — see the ParamsPanelProps.markers
+  // doc comment: its %-positions belong to the retired decorative SVG grid and
+  // do not correspond to real lat/lon on the Leaflet map below.
 }: ParamsPanelProps) {
   // M4 — once a result is on screen the primary CTA is «СКАЧАТЬ PDF-ОТЧЁТ»
   // (HeroBar); this button (a re-run) demotes to a secondary outline.
@@ -518,11 +614,6 @@ export default function ParamsPanel({
   // РАДИУС combobox a11y state (aria-activedescendant highlight + listbox id).
   const radiusListId = useId();
   const [radiusActive, setRadiusActive] = useState(-1);
-  // Map zoom — applied as transform: scale() on the map content layer (not the
-  // whole panel). Default 1 (identity → pixel-identical), step .25, clamp 1–2.5
-  // (no zoom-out below 1: there is no real basemap behind the blueprint SVG, so
-  // shrinking would only expose empty corners — zoom-in only).
-  const [zoom, setZoom] = useState(1);
   const [address, setAddress] = useState(initialValues?.address ?? "");
   const [area, setArea] = useState(
     initialValues?.area_m2 != null ? String(initialValues.area_m2) : "",
@@ -776,21 +867,131 @@ export default function ParamsPanel({
     transition: "all .15s",
   };
 
-  // Outer radius ring tracks the selected РАДИУС (subtle, best-effort): 500 м
-  // keeps the design's r=112 exactly; other values scale gently (and clamp) so the
-  // ring never blows past the map box. The inner two rings stay fixed.
-  const radiusM = parseInt(radius, 10);
-  const outerRingR = Number.isFinite(radiusM)
-    ? Math.round(
-        Math.max(70, Math.min(155, 112 * Math.pow(radiusM / 500, 0.35))),
-      )
-    : 112;
+  // Real analysis-radius circle (metres), synced with the selected РАДИУС —
+  // L.circle takes a radius in metres, so this is a true geographic scale
+  // (unlike the old SVG ring, which was a clamped pixel best-effort).
+  const parsedRadiusM = parseInt(radius, 10);
+  const circleRadiusM = Number.isFinite(parsedRadiusM)
+    ? parsedRadiusM
+    : AUTO_RADIUS_PREVIEW_M;
 
   // Subject area caption for the map pin (M10) — the SUBJECT's own m², from the
   // form, so the pin never borrows an analog's area. Empty area → no caption.
   const areaTrimmed = area.trim();
   const subjectAreaLabel = areaTrimmed ? `${areaTrimmed} м²` : null;
 
+  // ── 01 map — real Leaflet + OSM (see loadLeaflet()/buildSubjectIcon() above) ──
+  const hasCoords = coords != null;
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const leafletMapRef = useRef<any>(null);
+  const markerRef = useRef<any>(null);
+  const circleRef = useRef<any>(null);
+  const [mapZoom, setMapZoom] = useState(DEFAULT_MAP_ZOOM);
+  const [mapLoadError, setMapLoadError] = useState(false);
+
+  // "Latest value" refs, read inside the async loadLeaflet().then() callback
+  // below, which may resolve several renders after the effect fired (slow CDN
+  // load). Plain closure vars would go stale; refs assigned every render don't.
+  const addressRef = useRef(address);
+  addressRef.current = address;
+  const subjectAreaLabelRef = useRef(subjectAreaLabel);
+  subjectAreaLabelRef.current = subjectAreaLabel;
+  const circleRadiusMRef = useRef(circleRadiusM);
+  circleRadiusMRef.current = circleRadiusM;
+  const coordsRef = useRef(coords);
+  coordsRef.current = coords;
+
+  // Create/destroy the map when coordinates appear/disappear (not on every
+  // lat/lon value change — see the position-sync effect below for that). This
+  // is the only effect that mounts/tears down the Leaflet instance, so it is
+  // also the only place map.remove() needs to run, fixing the "Map container
+  // is already initialized" crash class.
+  useEffect(() => {
+    if (!hasCoords) return; // no coords yet -> the placeholder renders instead
+    let map: any = null;
+    let cancelled = false;
+
+    loadLeaflet()
+      .then((L) => {
+        if (cancelled || !mapContainerRef.current || !coordsRef.current) return;
+        const center: [number, number] = [
+          coordsRef.current.lat,
+          coordsRef.current.lon,
+        ];
+        map = L.map(mapContainerRef.current, {
+          scrollWheelZoom: false,
+          zoomControl: false,
+          minZoom: MIN_MAP_ZOOM,
+          maxZoom: MAX_MAP_ZOOM,
+        }).setView(center, DEFAULT_MAP_ZOOM);
+        L.tileLayer(MAP_TILE_URL, {
+          attribution: MAP_ATTRIBUTION,
+          maxZoom: MAX_MAP_ZOOM,
+        }).addTo(map);
+        setTimeout(() => map && map.invalidateSize(), 120);
+
+        circleRef.current = L.circle(center, {
+          radius: circleRadiusMRef.current,
+          color: tokens.accent,
+          weight: 1,
+          fillColor: tokens.accent,
+          fillOpacity: 0.05,
+          interactive: false,
+        }).addTo(map);
+
+        markerRef.current = L.marker(center, {
+          icon: buildSubjectIcon(
+            L,
+            addressRef.current.trim() || "Адрес квартиры",
+            subjectAreaLabelRef.current,
+          ),
+          interactive: false,
+        }).addTo(map);
+
+        leafletMapRef.current = map;
+        setMapZoom(DEFAULT_MAP_ZOOM);
+        map.on("zoomend", () => setMapZoom(map.getZoom()));
+      })
+      .catch(() => setMapLoadError(true));
+
+    return () => {
+      cancelled = true;
+      if (map) map.remove();
+      leafletMapRef.current = null;
+      markerRef.current = null;
+      circleRef.current = null;
+    };
+    // hasCoords is the only plain dependency this effect reads directly — the
+    // live lat/lon/radius/address values come from refs (assigned every
+    // render above), which exhaustive-deps correctly treats as stable.
+  }, [hasCoords]);
+
+  // Move the existing map/marker/circle to a newly picked address without
+  // tearing the map down (avoids a tile-reload flash on every pick).
+  useEffect(() => {
+    const map = leafletMapRef.current;
+    if (!map || !coords) return;
+    const center: [number, number] = [coords.lat, coords.lon];
+    map.setView(center, map.getZoom());
+    markerRef.current?.setLatLng(center);
+    circleRef.current?.setLatLng(center);
+  }, [coords]);
+
+  // Sync the radius circle in place when the РАДИУС АНАЛИЗА selection changes.
+  useEffect(() => {
+    circleRef.current?.setRadius(circleRadiusM);
+  }, [circleRadiusM]);
+
+  // Refresh the pin's address/area caption in place as the user edits the form.
+  useEffect(() => {
+    if (!markerRef.current) return;
+    const w = window as any;
+    if (!w.L) return;
+    markerRef.current.setIcon(
+      buildSubjectIcon(w.L, address.trim() || "Адрес квартиры", subjectAreaLabel),
+    );
+  }, [address, subjectAreaLabel]);
+
   // Address combobox render state (M6). `popupOpen` = the dropdown is shown at
   // all (incl. loading / empty notes); `listboxOpen` = it holds real selectable
   // options, which is when the input advertises aria-expanded + activedescendant.
@@ -870,7 +1071,12 @@ export default function ParamsPanel({
         </div>
       </div>
 
-      {/* MAP */}
+      {/* MAP — real Leaflet + OSM basemap, centred on the geocoded address
+          (Fix, audit #2264 C7 follow-up): was a decorative SVG (grid + fake
+          streets + a clamped best-effort radius ring), no real coordinates
+          behind it at all. © OpenStreetMap attribution comes from Leaflet's
+          own attribution control on the tile layer below (OSM tile licence
+          requirement) — no separate caption needed. */}
       <div
         style={{
           position: "relative",
@@ -882,189 +1088,142 @@ export default function ParamsPanel({
           flex: "0 0 auto",
         }}
       >
-        {/* zoomable map content — scaled by the +/− controls. The map controls
-            and corner bracket below are SIBLINGS (outside this layer) so they
-            never scale. zoom=1 → scale() identity → pixel-identical to design. */}
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            transform: `scale(${zoom})`,
-            transformOrigin: "center",
-            transition: "transform .15s ease-out",
-          }}
-        >
-          <svg
-            viewBox="0 0 440 210"
-            preserveAspectRatio="xMidYMid slice"
-            aria-hidden="true"
-            style={{
-              position: "absolute",
-              inset: 0,
-              width: "100%",
-              height: "100%",
-            }}
-          >
-            <rect width="440" height="210" fill="#e6edf4" />
-            <g stroke="#dbe5ef" strokeWidth={1}>
-              <path d="M0 38H440M0 78H440M0 118H440M0 158H440M0 198H440" />
-              <path d="M40 0V210M110 0V210M180 0V210M250 0V210M320 0V210M390 0V210" />
-            </g>
-            <g stroke="#f5f8fc" strokeWidth={8} strokeLinecap="round">
-              <path d="M-10 92 H450" />
-              <path d="M150 -10 V220" />
-              <path d="M-10 30 L260 0" />
-            </g>
-            <g stroke="#eef3f9" strokeWidth={5}>
-              <path d="M300 -10 L470 150" />
-              <path d="M-10 170 H450" />
-            </g>
-            <path d="M150 92 L470 200" stroke="#cfe0f3" strokeWidth={6} />
-            <g fill="none" stroke="#2e8bff" strokeDasharray="3 4">
-              <circle cx="208" cy="100" r="44" opacity={0.55} />
-              <circle cx="208" cy="100" r="80" opacity={0.4} />
-              <circle cx="208" cy="100" r={outerRingR} opacity={0.28} />
-            </g>
-            <circle cx="208" cy="100" r="80" fill="#2e8bff" opacity={0.04} />
-          </svg>
-
-          {/* center pin */}
+        {hasCoords ? (
+          mapLoadError ? (
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "0 16px",
+                textAlign: "center",
+                fontSize: 10.5,
+                lineHeight: 1.4,
+                color: tokens.hint,
+                fontFamily: tokens.font.sans,
+              }}
+            >
+              Не удалось загрузить карту. Проверьте интернет-соединение.
+            </div>
+          ) : (
+            <>
+              <div
+                ref={mapContainerRef}
+                style={{ position: "absolute", inset: 0 }}
+                aria-label="Карта расположения квартиры"
+              />
+              {/* map controls — real Leaflet zoom (Leaflet's own zoomControl
+                  is disabled above; these are the HUD-styled buttons). */}
+              <div
+                style={{
+                  position: "absolute",
+                  right: 9,
+                  bottom: 9,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 5,
+                }}
+              >
+                <button
+                  type="button"
+                  aria-label="Приблизить карту"
+                  disabled={mapZoom >= MAX_MAP_ZOOM}
+                  style={{
+                    width: 24,
+                    height: 24,
+                    background: tokens.surface.w80,
+                    border: `1px solid ${tokens.line}`,
+                    borderRadius: 4,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: mapZoom >= MAX_MAP_ZOOM ? "default" : "pointer",
+                    transition: "all .15s",
+                    fontSize: 15,
+                    color: tokens.muted,
+                    opacity: mapZoom >= MAX_MAP_ZOOM ? 0.4 : 1,
+                    padding: 0,
+                    fontFamily: "inherit",
+                  }}
+                  onClick={() => leafletMapRef.current?.zoomIn()}
+                >
+                  +
+                </button>
+                <button
+                  type="button"
+                  aria-label="Отдалить карту"
+                  disabled={mapZoom <= MIN_MAP_ZOOM}
+                  style={{
+                    width: 24,
+                    height: 24,
+                    background: tokens.surface.w80,
+                    border: `1px solid ${tokens.line}`,
+                    borderRadius: 4,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: mapZoom <= MIN_MAP_ZOOM ? "default" : "pointer",
+                    transition: "all .15s",
+                    fontSize: 15,
+                    color: tokens.muted,
+                    opacity: mapZoom <= MIN_MAP_ZOOM ? 0.4 : 1,
+                    padding: 0,
+                    fontFamily: "inherit",
+                  }}
+                  onClick={() => leafletMapRef.current?.zoomOut()}
+                >
+                  −
+                </button>
+              </div>
+            </>
+          )
+        ) : (
+          /* No coordinates yet (address not typed/picked from suggest) — a
+             tidy placeholder, never an empty grey box or a broken map. */
           <div
             style={{
               position: "absolute",
-              left: "47%",
-              top: "48%",
-              transform: "translate(-50%,-100%)",
+              inset: 0,
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+              padding: "0 16px",
+              textAlign: "center",
             }}
           >
-            <div
+            <svg
+              aria-hidden="true"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M12 21s-7-7.2-7-12a7 7 0 1 1 14 0c0 4.8-7 12-7 12Z"
+                stroke={tokens.muted2}
+                strokeWidth={1.5}
+              />
+              <circle cx="12" cy="9" r="2.5" stroke={tokens.muted2} strokeWidth={1.5} />
+            </svg>
+            <span
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                background: tokens.surface.w85,
-                border: `1px solid ${tokens.accent}`,
-                borderRadius: 4,
-                padding: "4px 8px",
-                whiteSpace: "nowrap",
-                boxShadow: "0 3px 10px rgba(46,139,255,.25)",
+                fontSize: 10.5,
+                lineHeight: 1.4,
+                color: tokens.hint,
+                fontFamily: tokens.font.sans,
               }}
             >
-              <span
-                style={{
-                  width: 7,
-                  height: 7,
-                  borderRadius: "50%",
-                  background: tokens.accent,
-                }}
-              />
-              {/* M10: the SUBJECT pin must show the subject's OWN address + area,
-                  never an analog's. The form area (subjectAreaLabel) is rendered
-                  here so an analog pin that lands near the centre can no longer be
-                  mistaken for the subject's caption. */}
-              <span
-                style={{ display: "flex", flexDirection: "column", gap: 1 }}
-              >
-                <span style={{ fontSize: 11, fontWeight: 600 }}>
-                  {address.trim() || "Адрес квартиры"}
-                </span>
-                {subjectAreaLabel && (
-                  <span style={{ fontSize: 9, color: tokens.muted }}>
-                    {subjectAreaLabel} · оцениваемая квартира
-                  </span>
-                )}
-              </span>
-            </div>
-            <div
-              style={{
-                width: 0,
-                height: 0,
-                borderLeft: "5px solid transparent",
-                borderRight: "5px solid transparent",
-                borderTop: `7px solid ${tokens.accent}`,
-              }}
-            />
+              Выберите адрес из подсказок, чтобы увидеть карту
+            </span>
           </div>
+        )}
 
-          {/* analog price pins — projected from the real estimate via mapMarkers().
-            Empty markers (no estimate yet) → no price pins, just the subject pin +
-            radius rings (Finding #2: never the fabricated fixture prices/dots). */}
-          {markers.map((m, i) => (
-            <div key={i} style={{ ...analogPin, left: m.left, top: m.top }}>
-              {m.label}
-              <br />
-              <span style={{ color: tokens.muted }}>{m.sub}</span>
-            </div>
-          ))}
-        </div>
-
-        {/* map controls */}
-        <div
-          style={{
-            position: "absolute",
-            right: 9,
-            bottom: 9,
-            display: "flex",
-            flexDirection: "column",
-            gap: 5,
-          }}
-        >
-          <button
-            type="button"
-            aria-label="Приблизить карту"
-            style={{
-              width: 24,
-              height: 24,
-              background: tokens.surface.w80,
-              border: `1px solid ${tokens.line}`,
-              borderRadius: 4,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              transition: "all .15s",
-              fontSize: 15,
-              color: tokens.muted,
-              padding: 0,
-              fontFamily: "inherit",
-            }}
-            onClick={() => setZoom((z) => Math.min(2.5, z + 0.25))}
-          >
-            +
-          </button>
-          <button
-            type="button"
-            aria-label="Отдалить карту"
-            disabled={zoom <= 1}
-            style={{
-              width: 24,
-              height: 24,
-              background: tokens.surface.w80,
-              border: `1px solid ${tokens.line}`,
-              borderRadius: 4,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: zoom <= 1 ? "default" : "pointer",
-              transition: "all .15s",
-              fontSize: 15,
-              color: tokens.muted,
-              opacity: zoom <= 1 ? 0.4 : 1,
-              padding: 0,
-              fontFamily: "inherit",
-            }}
-            onClick={() => {
-              if (zoom > 1) setZoom((z) => Math.max(1, z - 0.25));
-            }}
-          >
-            −
-          </button>
-        </div>
-
-        {/* map corner bracket */}
+        {/* map corner bracket — decorative HUD chrome, shown regardless of
+            map/placeholder state (unchanged from the prior design). */}
         <div
           style={{
             position: "absolute",
@@ -1078,23 +1237,6 @@ export default function ParamsPanel({
         />
       </div>
 
-      {/* Fix #7 (audit) — the SVG above is decorative (grid + fake streets +
-          radius rings), not a real map, and the rings themselves aren't drawn
-          to scale (outerRingR is a clamped best-effort, not a true geometric
-          projection of РАДИУС). Same honesty-caption tone as SourcesMap's
-          footer disclosure. */}
-      <div
-        style={{
-          fontSize: 9,
-          color: tokens.hint,
-          lineHeight: 1.4,
-          marginTop: 6,
-          flex: "0 0 auto",
-        }}
-      >
-        Схематично · не географическая карта · радиус не в масштабе
-      </div>
-
       {/* radius row */}
       <div
         style={{