diff --git a/src/ui.tsx b/src/ui.tsx index bd53acb..f68276b 100644 --- a/src/ui.tsx +++ b/src/ui.tsx @@ -17,6 +17,30 @@ import { useState, useEffect } from 'preact/hooks' const MIN_WINDOW_SIZE = { width: 320, height: 200 } const MAX_WINDOW_SIZE = { width: 800, height: 800 } +// Одна строка отладочного вывода: имя переменной из кода (как в main.ts), +// опционально — формула расчёта, и само значение (моноширинное, по правому краю). +function Field (props: { name: string; formula?: string; value: string | number }) { + return ( +
+ {props.name} + {props.value} + {props.formula != null && ( + {props.formula} + )} +
+ ) +} + +// Секция-карточка: заголовок + список Field. +function Section (props: { title: string; children: preact.ComponentChildren }) { + return ( +
+ {props.title} +
{props.children}
+
+ ) +} + function Plugin () { const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE) const [windowInfo, setWindowInfo] = useState<{ @@ -135,26 +159,26 @@ function Plugin () { AI assistant (MVP) — bootstrap {windowInfo != null && ( -
- - Окно плагина - -
- x{windowInfo.x} - y{windowInfo.y} - w{windowInfo.width} - h{windowInfo.height} -
- - Canvas / viewport - -
- zoom{windowInfo.zoom} - viewport{windowInfo.viewport.x},{windowInfo.viewport.y} · {windowInfo.viewport.width}×{windowInfo.viewport.height} - gaps L/R/T/B{windowInfo.gapL} / {windowInfo.gapR} / {windowInfo.gapT} / {windowInfo.gapB} - center{windowInfo.center.x},{windowInfo.center.y} -
-
+ + {/* RAW — значения, которые реально возвращает Figma API (без преобразований) */} +
+ + + + + + +
+ {/* Расчётные — посчитаны в main.ts из вышеперечисленных raw-значений */} +
+ + + + + + +
+ )}