feat: Shape Lab, defaults calibrados, posicoes e migracao de icones

- Shape Lab (DevPanel): abas Shapes/Posicoes pra calibrar defaults de cada
  shape e copiar offsets de posicionamento; placeholder visivel do minimapa
  no modo dev pra facilitar alinhamento
- types.ts: defaults de estilo por shapekind calibrados no lab (ringSize=4
  real ja que o kit normaliza o stroke, iconScaling/translate/round/etc),
  badge remapeado pro novo modelo, shape "transparent" removida
- migracao versionada (ICON_DEFAULTS_VERSION): reconstroi o estilo dos
  icones salvos a partir do shape ao subir a versao, sem perder
  shape/visibilidade/icone/cores nem exigir reset manual
- sobe @mriqbox/ui-kit pra 4.14.0
- posicoes base de speedometer/fuelgauge/seatbelt/aircraftHorizon calibradas
- fix: updateAllIconsSettings tambem atualiza globalIconSettings (steppers
  globais de tamanho estavam presos no valor antigo)
- fix: SingleStatusIconPanel sincroniza editSingleIcon via useEffect (era
  setState no corpo do render)

Author: ggfto

web/package.json

@@ -14,7 +14,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@mriqbox/ui-kit": "^4.11.0",
+    "@mriqbox/ui-kit": "^4.14.0",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",

web/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { shapes, iconNames } from "../../types/types";
 import { usePlayerStatusHudStore } from "../../stores/playerStatusHudStore";
 import { useColorEffectStore } from "../../stores/colorEffectStore";
@@ -35,10 +35,14 @@ export default function SingleStatusIconPanel() {
   const iconIndex = iconNames.indexOf(iconName);
   const panelIconColor = iconColors[iconIndex] ?? "#FFFFFF";
 
-  // Sync editSingleIconName/Stage into globalColorSettings for design-mode preview
-  useColorEffectStore.setState((s) => ({
-    globalColorSettings: { ...s.globalColorSettings, editSingleIconName: iconName, editSingleIconStage: stageIndex },
-  }));
+  // Sync editSingleIconName/Stage into globalColorSettings for design-mode preview.
+  // Em useEffect (nao no corpo do render) pra nao disparar setState durante o
+  // render — isso causava re-renders extras e travava a interacao dos controles.
+  useEffect(() => {
+    useColorEffectStore.setState((s) => ({
+      globalColorSettings: { ...s.globalColorSettings, editSingleIconName: iconName, editSingleIconStage: stageIndex },
+    }));
+  }, [iconName, stageIndex]);
 
   function handleIconChange(name: string) {
     setIconName(name as iconNamesKind);

web/src/components/menu/SingleStatusIconPanel.tsx

@@ -26,7 +26,7 @@ export default function AircraftHud() {
     return (
         <>
             <DraggableHudElement id="aircraftHorizon" label="Horizonte" zIndex={15}>
-                <ScaledHudContent style={{ position: "fixed", bottom: "2vh", left: "43vw", pointerEvents: "none" }}>
+                <ScaledHudContent style={{ position: "fixed", bottom: "2.16vh", left: "43.43vw", pointerEvents: "none" }}>
                     <ArtificialHorizon size={160} pitch={pitch} roll={roll} />
                 </ScaledHudContent>
             </DraggableHudElement>

web/src/components/organisms/AircraftHud.tsx

@@ -7,9 +7,11 @@ import {
 import { usePositioningStore } from "../../stores/positioningStore";
 import { useMenuStore } from "../../stores/menuStore";
 import { usePlayerStatusHudStore } from "../../stores/playerStatusHudStore";
+import ShapeLab from "./ShapeLab";
 
 export default function DevPanel() {
     const [open, setOpen] = useState(false);
+    const [shapeLab, setShapeLab] = useState(false);
 
     const positioningActive = usePositioningStore((s) => s.active);
     const togglePositioning = usePositioningStore((s) => s.toggle);
@@ -76,6 +78,13 @@ export default function DevPanel() {
                         }
                     />
 
+                    <DevButton
+                        icon={faVectorSquare}
+                        label="Shape Lab"
+                        active={shapeLab}
+                        onClick={() => setShapeLab((v) => !v)}
+                    />
+
                     {positioningActive && (
                         <button
                             onClick={resetAll}
@@ -121,6 +130,8 @@ export default function DevPanel() {
                 <FontAwesomeIcon icon={faCode} />
                 <FontAwesomeIcon icon={open ? faChevronDown : faChevronUp} style={{ fontSize: 9 }} />
             </button>
+
+            {shapeLab && <ShapeLab onClose={() => setShapeLab(false)} />}
         </div>
     );
 }

web/src/components/organisms/DevPanel.tsx

@@ -26,10 +26,9 @@ export default function MapBorderHud() {
       label="Minimapa"
       zIndex={8}
     >
-      {/* Sem moldura custom — o minimap usa a borda nativa do GTA. Este
-          placeholder e invisivel (sem borda/fundo) e existe so pra dar bounds
-          ao DraggableHudElement no modo posicionamento, que mede o selection
-          box e a area de arraste a partir dos filhos. */}
+      {/* Em producao o minimap usa a borda nativa do GTA; este box e so pra
+          dar bounds ao DraggableHudElement. No modo dev (sem jogo atras) ele
+          vira um placeholder visivel pra facilitar alinhar os elementos. */}
       <div
         style={{
           position: "absolute",
@@ -46,10 +45,25 @@ export default function MapBorderHud() {
             width: "29vh",
             height: "18.5vh",
             position: "absolute",
-            display: "inline-block",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
             pointerEvents: "none",
+            ...(debugMode
+              ? {
+                  border: "2px dashed rgba(147,197,253,0.5)",
+                  background: "rgba(59,130,246,0.07)",
+                  borderRadius: 4,
+                  color: "rgba(147,197,253,0.7)",
+                  fontFamily: "monospace",
+                  fontSize: 12,
+                  letterSpacing: "0.1em",
+                }
+              : {}),
           }}
-        />
+        >
+          {debugMode && "MINIMAPA"}
+        </div>
       </div>
     </DraggableHudElement>
   );