feat: show derived window data (zoom, viewport, gaps, center)

- main.ts GET_WINDOW_INFO: add zoom, viewport bounds, gaps L/R/T/B, center
  computed from figma.viewport + plugin window geometry
- ui.tsx: render additional readout lines under 🔍 Инфо

src/main.ts

@@ -34,7 +34,8 @@ export default function () {
     figma.ui.reposition(x, y)
   })
 
-  // UI запрашивает текущие x/y (canvas-space) и размеры окна для отладочного вывода.
+  // UI запрашивает текущие x/y (canvas-space) и размеры окна для отладочного вывода,
+  // а также производные данные, вычислимые из figma.viewport.
   on('GET_WINDOW_INFO', function () {
     let x = 0
     let y = 0
@@ -46,11 +47,38 @@ export default function () {
     } catch (e) {
       // getPosition может быть недоступен в некоторых версиях — оставляем 0
     }
+
+    const zoom = figma.viewport.zoom
+    const b = figma.viewport.bounds
+    const w = lastSize.width
+    const h = lastSize.height
+
+    // Геометрия окна плагина относительно видимой области canvas (bounds).
+    // gapL/gapR/gapT/gapB — отступы окна от левого/правого/верхнего/нижнего края canvas.
+    const gapL = Math.round(x - b.x)
+    const gapT = Math.round(y - b.y)
+    const gapR = Math.round(b.x + b.width - (x + w))
+    const gapB = Math.round(b.y + b.height - (y + h))
+    const cx = Math.round(x + w / 2)
+    const cy = Math.round(y + h / 2)
+
     emit('WINDOW_INFO', {
       x,
       y,
-      width: lastSize.width,
-      height: lastSize.height
+      width: w,
+      height: h,
+      zoom: Math.round(zoom * 100) / 100,
+      viewport: {
+        x: Math.round(b.x),
+        y: Math.round(b.y),
+        width: Math.round(b.width),
+        height: Math.round(b.height)
+      },
+      gapL,
+      gapR,
+      gapT,
+      gapB,
+      center: { x: cx, y: cy }
     })
   })
 

src/ui.tsx

@@ -19,7 +19,13 @@ const MAX_WINDOW_SIZE = { width: 800, height: 800 }
 
 function Plugin () {
   const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE)
-  const [windowInfo, setWindowInfo] = useState<{ x: number; y: number; width: number; height: number } | null>(null)
+  const [windowInfo, setWindowInfo] = useState<{
+    x: number; y: number; width: number; height: number
+    zoom: number
+    viewport: { x: number; y: number; width: number; height: number }
+    gapL: number; gapR: number; gapT: number; gapB: number
+    center: { x: number; y: number }
+  } | null>(null)
 
   // Нативный drag-ресайз окна Figma (тянуть за правый нижний угол).
   // Опции min/max обязательны: без них хук берёт базу из window.innerWidth на момент
@@ -119,6 +125,10 @@ function Plugin () {
               <VerticalSpace space="small" />
               <Muted>x: {windowInfo.x}  y: {windowInfo.y}</Muted>
               <Muted>w: {windowInfo.width}  h: {windowInfo.height}</Muted>
+              <Muted>zoom: {windowInfo.zoom}</Muted>
+              <Muted>viewport: {windowInfo.viewport.x},{windowInfo.viewport.y} {windowInfo.viewport.width}×{windowInfo.viewport.height}</Muted>
+              <Muted>gaps L/R/T/B: {windowInfo.gapL}/{windowInfo.gapR}/{windowInfo.gapT}/{windowInfo.gapB}</Muted>
+              <Muted>center: {windowInfo.center.x},{windowInfo.center.y}</Muted>
             </div>
           )}
         </div>