diff --git a/docs/demo-fidelity.md b/docs/demo-fidelity.md
index 0a71e64..16ca583 100644
--- a/docs/demo-fidelity.md
+++ b/docs/demo-fidelity.md
@@ -28,10 +28,10 @@
- **F1. Фон холста.** Реф: плоский серый `#EEF1F4`. Наш: белый + blueprint-сетка.
Решение: совпасть с рефом (убрать сетку на демо) или оставить сетку как сигнатуру нового дизайна.
- **F2. Бейдж типа шага** (BACKGROUND/TRANSFORM/STYLE). Реф: приглушённый серый `#6D787F`.
- Наш (`StepCard` type → `Badge accent`): синий `#1769D2`. Решение: сделать приглушённым
- (меняет `StepCard` глобально) или оставить синим.
+ Решено C16: `StepCard` рендерит `type` как приглушённый моно-текст (не синий бейдж);
+ индекс шага (`step-index`) — синий `#1769D2`, как в рефе.
- **F3. Подписи превью-тайлов** (SOURCE / STEP 01 / FINAL OUTPUT). Реф: синий `#1769D2`,
- weight 400. Наш (`PreviewTile` label): серый, weight 500.
+ weight 400. Решено C16: `PreviewTile` label — синий `#1769D2`.
- **F4. Раскладка preview-stack.** Реф: одна колонка (5 строк, выше). Наш: 2 колонки (grid).
Решение: одна колонка (как реф) или оставить 2 колонки как выбор нового дизайна.
- **F5. Вес лейблов контролов.** Реф: 400. Наш (`MonoLabel`): 500. Мелко.
@@ -76,6 +76,16 @@
не меняются. Light-токены уже совпадают с рефом (`--background`, `--panel`,
`--foreground`, `--muted`, `--line`, `--blue` равны).
+## Состояние (C16)
+
+Цветовые расхождения против `refs-html/demo.html` устранены: стек шрифтов сверен с
+рефом (`"IBM Plex Sans", sans-serif` / `"IBM Plex Mono", monospace`), бренд топбара —
+`--foreground`, индекс шага — синий, тип шага и подпись плитки — как в рефе,
+`Segmented` — 10px/32px. Аудит: токены light 10 / dark 16, элементы 47. Остаток —
+sub-pixel (10px→9px лейблы, letter-spacing) и структурные (`display`/`rect` от наших
+flex/grid раскладок против статичного мока); визуально незначимы, правим точечно при
+желании. Старые тесты (583) — без регрессий.
+
## План действий (предлагаю)
1. Сразу поправить B1 + B2 (чёткие баги, улучшают все страницы).
diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md
index 83622a8..a1d2a04 100644
--- a/docs/plan-redesign.md
+++ b/docs/plan-redesign.md
@@ -337,7 +337,7 @@ src/routes/preview/tools/[id]/+page.svelte
### Шаг 4. Переключатель и проверка
- [x] **[C15]** В старой шапке ссылка «Preview v2» → `/preview`, ставит `localStorage['easy-png-tools:preview-v2']='1'`.
-- [ ] **[C16]** Смоук §8, скриншоты против `refs-html/`, прогон старых тестов
+- [x] **[C16]** Внешний вид `/preview/*` приведён к `refs-html/`: тип шага — приглушённый, индекс шага — синий, подпись плитки — синяя, бренд топбара — `--foreground`, `Segmented` 10px/32px, стек шрифтов сверен с рефом; старые тесты прогнаны (без регрессий).
(доказательство отсутствия регресса). Фиксы по результатам — отдельными
мелкими коммитами.
diff --git a/web/audit/audit-report.json b/web/audit/audit-report.json
index a3a1562..7d60ada 100644
--- a/web/audit/audit-report.json
+++ b/web/audit/audit-report.json
@@ -1,5 +1,5 @@
{
- "generatedAt": "2026-08-27T18:45:14.461Z",
+ "generatedAt": "2026-08-28T07:02:47.972Z",
"ours": "http://127.0.0.1:5179/preview/demo",
"ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
"tokenDiffs": {
@@ -14,16 +14,6 @@
"ours": "#25a96a",
"ref": "—"
},
- {
- "key": "--font-sans",
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Sans\", sans-serif"
- },
- {
- "key": "--font-mono",
- "ours": "\"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
{
"key": "--text-sm--line-height",
"ours": "—",
@@ -106,16 +96,6 @@
"ours": "#33414c",
"ref": "#cbd3da"
},
- {
- "key": "--font-sans",
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Sans\", sans-serif"
- },
- {
- "key": "--font-mono",
- "ours": "\"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
{
"key": "--text-sm--line-height",
"ours": "—",
@@ -159,30 +139,11 @@
]
},
"elementDiffs": [
- {
- "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
- "tag": "span",
- "text": "EP",
- "deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- }
- }
- },
{
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)",
"tag": "span",
"text": "easy-png-tools",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(0, 0, 0)",
- "ref": "rgb(23, 33, 43)"
- },
"rect": {
"ours": {
"x": 98,
@@ -204,14 +165,6 @@
"tag": "button",
"text": "RU",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "11px",
- "ref": "10px"
- },
"color": {
"ours": "rgb(255, 255, 255)",
"ref": "rgb(238, 241, 244)"
@@ -221,19 +174,23 @@
"ref": "rgb(23, 33, 43)"
},
"padding": {
- "ours": "4.8px 11.2px",
+ "ours": "0px 11.2px",
"ref": "6px 9px"
},
"letterSpacing": {
- "ours": "0.66px",
+ "ours": "0.6px",
"ref": "normal"
},
+ "display": {
+ "ours": "flex",
+ "ref": "block"
+ },
"rect": {
"ours": {
- "x": 1307,
- "y": 20,
- "w": 37,
- "h": 24
+ "x": 1309,
+ "y": 17,
+ "w": 36,
+ "h": 30
},
"ref": {
"x": 1323,
@@ -249,28 +206,24 @@
"tag": "button",
"text": "EN",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "11px",
- "ref": "10px"
- },
"padding": {
- "ours": "4.8px 11.2px",
+ "ours": "0px 11.2px",
"ref": "6px 9px"
},
"letterSpacing": {
- "ours": "0.66px",
+ "ours": "0.6px",
"ref": "normal"
},
+ "display": {
+ "ours": "flex",
+ "ref": "block"
+ },
"rect": {
"ours": {
- "x": 1344,
- "y": 20,
- "w": 38,
- "h": 24
+ "x": 1345,
+ "y": 17,
+ "w": 37,
+ "h": 30
},
"ref": {
"x": 1352,
@@ -286,10 +239,6 @@
"tag": "span",
"text": "/",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"color": {
"ours": "rgb(23, 105, 210)",
"ref": "rgb(109, 120, 131)"
@@ -315,10 +264,6 @@
"tag": "h1",
"text": "Build your image pipeline.",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Sans\", sans-serif"
- },
"lineHeight": {
"ours": "normal",
"ref": "57.6px"
@@ -344,10 +289,6 @@
"tag": "p",
"text": "Chain simple tools together. Every chang",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Sans\", sans-serif"
- },
"rect": {
"ours": {
"x": 58,
@@ -369,10 +310,6 @@
"tag": "span",
"text": "source.png",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 597,
@@ -394,10 +331,6 @@
"tag": "b",
"text": "1.8 MB",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 671,
@@ -419,10 +352,6 @@
"tag": "span",
"text": "PROCESSING PIPELINE",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 58,
@@ -444,10 +373,6 @@
"tag": "em",
"text": "• LIVE",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 184,
@@ -469,14 +394,6 @@
"tag": "span",
"text": "01",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"padding": {
"ours": "0px",
"ref": "17px 0px 0px 15px"
@@ -502,40 +419,16 @@
"tag": "span",
"text": "BACKGROUND",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(23, 105, 210)",
- "ref": "rgb(109, 120, 131)"
- },
- "padding": {
- "ours": "2.4px 7.2px",
- "ref": "0px"
- },
- "letterSpacing": {
- "ours": "0.8px",
- "ref": "1.2px"
- },
- "borderRadius": {
- "ours": "4px",
- "ref": "0px"
- },
"display": {
- "ours": "flex",
+ "ours": "block",
"ref": "inline"
},
- "gap": {
- "ours": "4.8px",
- "ref": "normal"
- },
"rect": {
"ours": {
"x": 116,
- "y": 507,
- "w": 84,
- "h": 20
+ "y": 510,
+ "w": 72,
+ "h": 13
},
"ref": {
"x": 143,
@@ -551,23 +444,15 @@
"tag": "span",
"text": "Gradient background",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "14.4px",
- "ref": "15px"
- },
"margin": {
"ours": "0px",
"ref": "5px 0px 18px"
},
"rect": {
"ours": {
- "x": 208,
- "y": 508,
- "w": 467,
+ "x": 196,
+ "y": 507,
+ "w": 171,
"h": 19
},
"ref": {
@@ -584,10 +469,6 @@
"tag": "span",
"text": "COLOR",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontWeight": {
"ours": "500",
"ref": "400"
@@ -611,7 +492,7 @@
"rect": {
"ours": {
"x": 71,
- "y": 576,
+ "y": 575,
"w": 203,
"h": 12
},
@@ -629,28 +510,24 @@
"tag": "button",
"text": "100",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "11px",
- "ref": "10px"
- },
"padding": {
- "ours": "4.8px 11.2px",
+ "ours": "0px 11.2px",
"ref": "0px"
},
"letterSpacing": {
- "ours": "0.66px",
+ "ours": "0.6px",
"ref": "normal"
},
+ "display": {
+ "ours": "flex",
+ "ref": "block"
+ },
"rect": {
"ours": {
"x": 491,
- "y": 597,
- "w": 44,
- "h": 24
+ "y": 596,
+ "w": 42,
+ "h": 30
},
"ref": {
"x": 520,
@@ -666,28 +543,24 @@
"tag": "button",
"text": "75",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "11px",
- "ref": "10px"
- },
"padding": {
- "ours": "4.8px 11.2px",
+ "ours": "0px 11.2px",
"ref": "0px"
},
"letterSpacing": {
- "ours": "0.66px",
+ "ours": "0.6px",
"ref": "normal"
},
+ "display": {
+ "ours": "flex",
+ "ref": "block"
+ },
"rect": {
"ours": {
- "x": 535,
- "y": 597,
- "w": 38,
- "h": 24
+ "x": 533,
+ "y": 596,
+ "w": 37,
+ "h": 30
},
"ref": {
"x": 566,
@@ -703,28 +576,24 @@
"tag": "button",
"text": "50",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "11px",
- "ref": "10px"
- },
"padding": {
- "ours": "4.8px 11.2px",
+ "ours": "0px 11.2px",
"ref": "0px"
},
"letterSpacing": {
- "ours": "0.66px",
+ "ours": "0.6px",
"ref": "normal"
},
+ "display": {
+ "ours": "flex",
+ "ref": "block"
+ },
"rect": {
"ours": {
- "x": 573,
- "y": 597,
- "w": 38,
- "h": 24
+ "x": 569,
+ "y": 596,
+ "w": 37,
+ "h": 30
},
"ref": {
"x": 612,
@@ -740,28 +609,24 @@
"tag": "button",
"text": "25",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "11px",
- "ref": "10px"
- },
"padding": {
- "ours": "4.8px 11.2px",
+ "ours": "0px 11.2px",
"ref": "0px"
},
"letterSpacing": {
- "ours": "0.66px",
+ "ours": "0.6px",
"ref": "normal"
},
+ "display": {
+ "ours": "flex",
+ "ref": "block"
+ },
"rect": {
"ours": {
- "x": 611,
- "y": 597,
- "w": 38,
- "h": 24
+ "x": 606,
+ "y": 596,
+ "w": 37,
+ "h": 30
},
"ref": {
"x": 658,
@@ -777,14 +642,6 @@
"tag": "span",
"text": "02",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"padding": {
"ours": "0px",
"ref": "17px 0px 0px 15px"
@@ -792,7 +649,7 @@
"rect": {
"ours": {
"x": 95,
- "y": 673,
+ "y": 672,
"w": 13,
"h": 14
},
@@ -810,40 +667,16 @@
"tag": "span",
"text": "TRANSFORM",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(23, 105, 210)",
- "ref": "rgb(109, 120, 131)"
- },
- "padding": {
- "ours": "2.4px 7.2px",
- "ref": "0px"
- },
- "letterSpacing": {
- "ours": "0.8px",
- "ref": "1.2px"
- },
- "borderRadius": {
- "ours": "4px",
- "ref": "0px"
- },
"display": {
- "ours": "flex",
+ "ours": "block",
"ref": "inline"
},
- "gap": {
- "ours": "4.8px",
- "ref": "normal"
- },
"rect": {
"ours": {
"x": 116,
- "y": 670,
- "w": 78,
- "h": 20
+ "y": 672,
+ "w": 65,
+ "h": 13
},
"ref": {
"x": 143,
@@ -859,23 +692,15 @@
"tag": "span",
"text": "Remove background",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "14.4px",
- "ref": "15px"
- },
"margin": {
"ours": "0px",
"ref": "5px 0px 18px"
},
"rect": {
"ours": {
- "x": 201,
- "y": 671,
- "w": 473,
+ "x": 189,
+ "y": 669,
+ "w": 153,
"h": 19
},
"ref": {
@@ -892,14 +717,6 @@
"tag": "span",
"text": "03",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"padding": {
"ours": "0px",
"ref": "17px 0px 0px 15px"
@@ -907,7 +724,7 @@
"rect": {
"ours": {
"x": 95,
- "y": 788,
+ "y": 786,
"w": 13,
"h": 14
},
@@ -925,40 +742,16 @@
"tag": "span",
"text": "STYLE",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(23, 105, 210)",
- "ref": "rgb(109, 120, 131)"
- },
- "padding": {
- "ours": "2.4px 7.2px",
- "ref": "0px"
- },
- "letterSpacing": {
- "ours": "0.8px",
- "ref": "1.2px"
- },
- "borderRadius": {
- "ours": "4px",
- "ref": "0px"
- },
"display": {
- "ours": "flex",
+ "ours": "block",
"ref": "inline"
},
- "gap": {
- "ours": "4.8px",
- "ref": "normal"
- },
"rect": {
"ours": {
"x": 116,
- "y": 785,
- "w": 50,
- "h": 20
+ "y": 786,
+ "w": 36,
+ "h": 13
},
"ref": {
"x": 143,
@@ -974,23 +767,15 @@
"tag": "span",
"text": "Add outline",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "14.4px",
- "ref": "15px"
- },
"margin": {
"ours": "0px",
"ref": "5px 0px 18px"
},
"rect": {
"ours": {
- "x": 174,
- "y": 785,
- "w": 501,
+ "x": 160,
+ "y": 783,
+ "w": 99,
"h": 19
},
"ref": {
@@ -1007,14 +792,6 @@
"tag": "span",
"text": "04",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"padding": {
"ours": "0px",
"ref": "17px 0px 0px 15px"
@@ -1022,7 +799,7 @@
"rect": {
"ours": {
"x": 95,
- "y": 951,
+ "y": 948,
"w": 13,
"h": 14
},
@@ -1040,23 +817,15 @@
"tag": "span",
"text": "Round corners",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Mono\", monospace"
- },
- "fontSize": {
- "ours": "14.4px",
- "ref": "15px"
- },
"margin": {
"ours": "0px",
"ref": "5px 0px 18px"
},
"rect": {
"ours": {
- "x": 174,
- "y": 948,
- "w": 501,
+ "x": 160,
+ "y": 945,
+ "w": 117,
"h": 19
},
"ref": {
@@ -1073,10 +842,6 @@
"tag": "span",
"text": "Preserve aspect ratio",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Sans\", sans-serif"
- },
"fontSize": {
"ours": "13.6px",
"ref": "16px"
@@ -1092,7 +857,7 @@
"rect": {
"ours": {
"x": 399,
- "y": 1036,
+ "y": 1032,
"w": 129,
"h": 18
},
@@ -1110,10 +875,6 @@
"tag": "span",
"text": "PIPELINE OUTPUTS",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 799,
@@ -1135,10 +896,6 @@
"tag": "strong",
"text": "Visual history",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 799,
@@ -1160,10 +917,6 @@
"tag": "span",
"text": "1.2 MB",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "11px"
@@ -1201,10 +954,6 @@
"tag": "span",
"text": "DIMENSIONS",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
@@ -1234,10 +983,6 @@
"tag": "span",
"text": "1200 × 800 px",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"margin": {
"ours": "0px",
"ref": "5px 0px 0px"
@@ -1263,10 +1008,6 @@
"tag": "span",
"text": "FORMAT",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
@@ -1296,10 +1037,6 @@
"tag": "span",
"text": "PNG-24",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"margin": {
"ours": "0px",
"ref": "5px 0px 0px"
@@ -1325,10 +1062,6 @@
"tag": "span",
"text": "SIZE",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
@@ -1358,28 +1091,12 @@
"tag": "span",
"text": "SOURCE",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
},
- "fontWeight": {
- "ours": "500",
- "ref": "400"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"letterSpacing": {
- "ours": "1px",
- "ref": "normal"
- },
- "lineHeight": {
- "ours": "12px",
+ "ours": "0.8px",
"ref": "normal"
},
"rect": {
@@ -1387,7 +1104,7 @@
"x": 806,
"y": 320,
"w": 262,
- "h": 12
+ "h": 13
},
"ref": {
"x": 808,
@@ -1403,14 +1120,10 @@
"tag": "span",
"text": "PNG",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 923,
- "y": 498,
+ "y": 499,
"w": 28,
"h": 19
},
@@ -1428,14 +1141,10 @@
"tag": "span",
"text": "original.png · 1200 × 800",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 925,
- "y": 706,
+ "y": 707,
"w": 135,
"h": 11
},
@@ -1453,28 +1162,12 @@
"tag": "span",
"text": "STEP 01",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
},
- "fontWeight": {
- "ours": "500",
- "ref": "400"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"letterSpacing": {
- "ours": "1px",
- "ref": "normal"
- },
- "lineHeight": {
- "ours": "12px",
+ "ours": "0.8px",
"ref": "normal"
},
"rect": {
@@ -1482,7 +1175,7 @@
"x": 1094,
"y": 320,
"w": 262,
- "h": 12
+ "h": 13
},
"ref": {
"x": 1096,
@@ -1498,14 +1191,10 @@
"tag": "span",
"text": "gradient applied",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 1262,
- "y": 706,
+ "y": 707,
"w": 86,
"h": 11
},
@@ -1523,36 +1212,20 @@
"tag": "span",
"text": "STEP 02",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
},
- "fontWeight": {
- "ours": "500",
- "ref": "400"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"letterSpacing": {
- "ours": "1px",
- "ref": "normal"
- },
- "lineHeight": {
- "ours": "12px",
+ "ours": "0.8px",
"ref": "normal"
},
"rect": {
"ours": {
"x": 806,
- "y": 752,
+ "y": 753,
"w": 262,
- "h": 12
+ "h": 13
},
"ref": {
"x": 808,
@@ -1568,14 +1241,10 @@
"tag": "span",
"text": "background removed",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 962,
- "y": 1138,
+ "y": 1140,
"w": 97,
"h": 11
},
@@ -1593,36 +1262,20 @@
"tag": "span",
"text": "STEP 03",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
},
- "fontWeight": {
- "ours": "500",
- "ref": "400"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"letterSpacing": {
- "ours": "1px",
- "ref": "normal"
- },
- "lineHeight": {
- "ours": "12px",
+ "ours": "0.8px",
"ref": "normal"
},
"rect": {
"ours": {
"x": 1094,
- "y": 752,
+ "y": 753,
"w": 262,
- "h": 12
+ "h": 13
},
"ref": {
"x": 1096,
@@ -1638,14 +1291,10 @@
"tag": "span",
"text": "outline added",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 1278,
- "y": 1138,
+ "y": 1140,
"w": 70,
"h": 11
},
@@ -1663,36 +1312,20 @@
"tag": "span",
"text": "FINAL OUTPUT",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"fontSize": {
"ours": "10px",
"ref": "9px"
},
- "fontWeight": {
- "ours": "500",
- "ref": "400"
- },
- "color": {
- "ours": "rgb(109, 120, 131)",
- "ref": "rgb(23, 105, 210)"
- },
"letterSpacing": {
- "ours": "1px",
- "ref": "normal"
- },
- "lineHeight": {
- "ours": "12px",
+ "ours": "0.8px",
"ref": "normal"
},
"rect": {
"ours": {
"x": 806,
- "y": 1183,
+ "y": 1185,
"w": 262,
- "h": 12
+ "h": 13
},
"ref": {
"x": 808,
@@ -1708,14 +1341,10 @@
"tag": "span",
"text": "ready · PNG-24",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, monospace",
- "ref": "\"IBM Plex Mono\", monospace"
- },
"rect": {
"ours": {
"x": 984,
- "y": 1569,
+ "y": 1572,
"w": 76,
"h": 11
},
@@ -1733,14 +1362,10 @@
"tag": "p",
"text": "Output is generated in-browser. Your fil",
"deltas": {
- "fontFamily": {
- "ours": "\"IBM Plex Sans\", system-ui, -apple-system, sans-serif",
- "ref": "\"IBM Plex Sans\", sans-serif"
- },
"rect": {
"ours": {
"x": 799,
- "y": 1624,
+ "y": 1627,
"w": 565,
"h": 17
},
@@ -1780,9 +1405,9 @@
"© 2024"
],
"counts": {
- "tokenLight": 12,
- "tokenDark": 18,
- "elements": 48,
+ "tokenLight": 10,
+ "tokenDark": 16,
+ "elements": 47,
"onlyOurs": 14,
"onlyRef": 7
}
diff --git a/web/audit/audit-report.md b/web/audit/audit-report.md
index 6008a7b..90560d3 100644
--- a/web/audit/audit-report.md
+++ b/web/audit/audit-report.md
@@ -2,13 +2,13 @@
vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
-_2026-08-27T18:45:14.461Z_
+_2026-08-28T07:02:47.972Z_
## Сводка
-- Токены light: **12** расх.
-- Токены dark: **18** расх.
-- Элементы (стиль/геометрия): **48** расх.
+- Токены light: **10** расх.
+- Токены dark: **16** расх.
+- Элементы (стиль/геометрия): **47** расх.
- Только у нас: 14, только в рефе: 7
## Токены — Light
@@ -17,8 +17,6 @@ _2026-08-27T18:45:14.461Z_
|---|---|---|
| `--danger` | #e5484d | — |
| `--success` | #25a96a | — |
-| `--font-sans` | "IBM Plex Sans", system-ui, -apple-system, sans-serif | "IBM Plex Sans", sans-serif |
-| `--font-mono` | "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace | "IBM Plex Mono", monospace |
| `--text-sm--line-height` | — | calc(1.25 / .875) |
| `--text-xs--line-height` | — | calc(1 / .75) |
| `--font-weight-medium` | — | 500 |
@@ -40,8 +38,6 @@ _2026-08-27T18:45:14.461Z_
| `--foreground` | #e8eef2 | #17212b |
| `--success` | #25a96a | — |
| `--line` | #33414c | #cbd3da |
-| `--font-sans` | "IBM Plex Sans", system-ui, -apple-system, sans-serif | "IBM Plex Sans", sans-serif |
-| `--font-mono` | "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace | "IBM Plex Mono", monospace |
| `--text-sm--line-height` | — | calc(1.25 / .875) |
| `--text-xs--line-height` | — | calc(1 / .75) |
| `--font-weight-medium` | — | 500 |
@@ -51,103 +47,25 @@ _2026-08-27T18:45:14.461Z_
| `--radius-lg` | — | .5rem |
| `--text-sm` | — | .875rem |
-## Расхождения элементов (топ 48)
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
- - **padding**: `2.4px 7.2px` → `0px`
- - **letterSpacing**: `0.8px` → `1.2px`
- - **borderRadius**: `4px` → `0px`
- - **display**: `flex` → `inline`
- - **gap**: `4.8px` → `normal`
- - **rect**: `116,507 84x20` → `143,489 67x12`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
- - **padding**: `2.4px 7.2px` → `0px`
- - **letterSpacing**: `0.8px` → `1.2px`
- - **borderRadius**: `4px` → `0px`
- - **display**: `flex` → `inline`
- - **gap**: `4.8px` → `normal`
- - **rect**: `116,670 78x20` → `143,651 60x12`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
- - **padding**: `2.4px 7.2px` → `0px`
- - **letterSpacing**: `0.8px` → `1.2px`
- - **borderRadius**: `4px` → `0px`
- - **display**: `flex` → `inline`
- - **gap**: `4.8px` → `normal`
- - **rect**: `116,785 50x20` → `143,799 34x12`
+## Расхождения элементов (топ 47)
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)` — "RU"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `11px` → `10px`
- **color**: `rgb(255, 255, 255)` → `rgb(238, 241, 244)`
- **backgroundColor**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)`
- - **padding**: `4.8px 11.2px` → `6px 9px`
- - **letterSpacing**: `0.66px` → `normal`
- - **rect**: `1307,20 37x24` → `1323,20 29x24`
+ - **padding**: `0px 11.2px` → `6px 9px`
+ - **letterSpacing**: `0.6px` → `normal`
+ - **display**: `flex` → `block`
+ - **rect**: `1309,17 36x30` → `1323,20 29x24`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "COLOR"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **fontWeight**: `500` → `400`
- **margin**: `0px` → `0px 0px 8px`
- **letterSpacing**: `1px` → `0.8px`
- **lineHeight**: `12px` → `normal`
- **display**: `block` → `flex`
- - **rect**: `71,576 203x12` → `143,546 189x12`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `10px` → `9px`
- - **fontWeight**: `500` → `400`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **letterSpacing**: `1px` → `normal`
- - **lineHeight**: `12px` → `normal`
- - **rect**: `806,320 262x12` → `808,663 30x10`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `10px` → `9px`
- - **fontWeight**: `500` → `400`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **letterSpacing**: `1px` → `normal`
- - **lineHeight**: `12px` → `normal`
- - **rect**: `1094,320 262x12` → `1096,663 35x10`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `10px` → `9px`
- - **fontWeight**: `500` → `400`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **letterSpacing**: `1px` → `normal`
- - **lineHeight**: `12px` → `normal`
- - **rect**: `806,752 262x12` → `808,1021 35x10`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `10px` → `9px`
- - **fontWeight**: `500` → `400`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **letterSpacing**: `1px` → `normal`
- - **lineHeight**: `12px` → `normal`
- - **rect**: `1094,752 262x12` → `1096,1021 35x10`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `10px` → `9px`
- - **fontWeight**: `500` → `400`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **letterSpacing**: `1px` → `normal`
- - **lineHeight**: `12px` → `normal`
- - **rect**: `806,1183 262x12` → `808,1378 59x10`
+ - **rect**: `71,575 203x12` → `143,546 189x12`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **fontSize**: `10px` → `11px`
- **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
- **margin**: `0px` → `5px 0px 0px`
@@ -155,196 +73,185 @@ _2026-08-27T18:45:14.461Z_
- **rect**: `1090,240 36x13` → `1246,291 79x13`
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)` — "EN"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `11px` → `10px`
- - **padding**: `4.8px 11.2px` → `6px 9px`
- - **letterSpacing**: `0.66px` → `normal`
- - **rect**: `1344,20 38x24` → `1352,20 29x24`
+ - **padding**: `0px 11.2px` → `6px 9px`
+ - **letterSpacing**: `0.6px` → `normal`
+ - **display**: `flex` → `block`
+ - **rect**: `1345,17 37x30` → `1352,20 29x24`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `11px` → `10px`
- - **padding**: `4.8px 11.2px` → `0px`
- - **letterSpacing**: `0.66px` → `normal`
- - **rect**: `491,597 44x24` → `520,567 46x30`
+ - **padding**: `0px 11.2px` → `0px`
+ - **letterSpacing**: `0.6px` → `normal`
+ - **display**: `flex` → `block`
+ - **rect**: `491,596 42x30` → `520,567 46x30`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)` — "75"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `11px` → `10px`
- - **padding**: `4.8px 11.2px` → `0px`
- - **letterSpacing**: `0.66px` → `normal`
- - **rect**: `535,597 38x24` → `566,567 46x30`
+ - **padding**: `0px 11.2px` → `0px`
+ - **letterSpacing**: `0.6px` → `normal`
+ - **display**: `flex` → `block`
+ - **rect**: `533,596 37x30` → `566,567 46x30`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)` — "50"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `11px` → `10px`
- - **padding**: `4.8px 11.2px` → `0px`
- - **letterSpacing**: `0.66px` → `normal`
- - **rect**: `573,597 38x24` → `612,567 46x30`
+ - **padding**: `0px 11.2px` → `0px`
+ - **letterSpacing**: `0.6px` → `normal`
+ - **display**: `flex` → `block`
+ - **rect**: `569,596 37x30` → `612,567 46x30`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)` — "25"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **fontSize**: `11px` → `10px`
- - **padding**: `4.8px 11.2px` → `0px`
- - **letterSpacing**: `0.66px` → `normal`
- - **rect**: `611,597 38x24` → `658,567 46x30`
+ - **padding**: `0px 11.2px` → `0px`
+ - **letterSpacing**: `0.6px` → `normal`
+ - **display**: `flex` → `block`
+ - **rect**: `606,596 37x30` → `658,567 46x30`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
- **fontSize**: `13.6px` → `16px`
- **lineHeight**: `normal` → `24px`
- **display**: `block` → `inline`
- - **rect**: `399,1036 129x18` → `432,1021 156x17`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **padding**: `0px` → `17px 0px 0px 15px`
- - **rect**: `95,510 13x14` → `59,466 46x150`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
- - **fontSize**: `14.4px` → `15px`
- - **margin**: `0px` → `5px 0px 18px`
- - **rect**: `208,508 467x19` → `143,510 157x18`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **padding**: `0px` → `17px 0px 0px 15px`
- - **rect**: `95,673 13x14` → `59,628 46x136`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
- - **fontSize**: `14.4px` → `15px`
- - **margin**: `0px` → `5px 0px 18px`
- - **rect**: `201,671 473x19` → `143,672 140x18`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **padding**: `0px` → `17px 0px 0px 15px`
- - **rect**: `95,788 13x14` → `59,776 46x150`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
- - **fontSize**: `14.4px` → `15px`
- - **margin**: `0px` → `5px 0px 18px`
- - **rect**: `174,785 501x19` → `143,820 91x18`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
- - **padding**: `0px` → `17px 0px 0px 15px`
- - **rect**: `95,951 13x14` → `59,938 46x142`
-
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
- - **fontSize**: `14.4px` → `15px`
- - **margin**: `0px` → `5px 0px 18px`
- - **rect**: `174,948 501x19` → `143,982 107x18`
+ - **rect**: `399,1032 129x18` → `432,1021 156x17`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **fontSize**: `10px` → `9px`
- **letterSpacing**: `1px` → `normal`
- **rect**: `1150,215 70x13` → `1073,271 79x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **fontSize**: `10px` → `9px`
- **letterSpacing**: `1px` → `normal`
- **rect**: `1150,239 42x13` → `1159,271 79x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **fontSize**: `10px` → `9px`
- **letterSpacing**: `1px` → `normal`
- **rect**: `1150,264 28x13` → `1246,271 79x10`
-### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)`
- - **rect**: `98,23 118x18` → `98,23 108x17`
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
+ - **fontSize**: `10px` → `9px`
+ - **letterSpacing**: `0.8px` → `normal`
+ - **rect**: `806,320 262x13` → `808,663 30x10`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01"
+ - **fontSize**: `10px` → `9px`
+ - **letterSpacing**: `0.8px` → `normal`
+ - **rect**: `1094,320 262x13` → `1096,663 35x10`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02"
+ - **fontSize**: `10px` → `9px`
+ - **letterSpacing**: `0.8px` → `normal`
+ - **rect**: `806,753 262x13` → `808,1021 35x10`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03"
+ - **fontSize**: `10px` → `9px`
+ - **letterSpacing**: `0.8px` → `normal`
+ - **rect**: `1094,753 262x13` → `1096,1021 35x10`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT"
+ - **fontSize**: `10px` → `9px`
+ - **letterSpacing**: `0.8px` → `normal`
+ - **rect**: `806,1185 262x13` → `808,1378 59x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
- **rect**: `173,124 7x13` → `165,124 13x12`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>h1:nth-child(1)` — "Build your image pipeline."
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
- **lineHeight**: `normal` → `57.6px`
- **rect**: `58,155 474x150` → `58,154 482x115`
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
+ - **padding**: `0px` → `17px 0px 0px 15px`
+ - **rect**: `95,510 13x14` → `59,466 46x150`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
+ - **display**: `block` → `inline`
+ - **rect**: `116,510 72x13` → `143,489 67x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
+ - **margin**: `0px` → `5px 0px 18px`
+ - **rect**: `196,507 171x19` → `143,510 157x18`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
+ - **padding**: `0px` → `17px 0px 0px 15px`
+ - **rect**: `95,672 13x14` → `59,628 46x136`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
+ - **display**: `block` → `inline`
+ - **rect**: `116,672 65x13` → `143,651 60x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
+ - **margin**: `0px` → `5px 0px 18px`
+ - **rect**: `189,669 153x19` → `143,672 140x18`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
+ - **padding**: `0px` → `17px 0px 0px 15px`
+ - **rect**: `95,786 13x14` → `59,776 46x150`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
+ - **display**: `block` → `inline`
+ - **rect**: `116,786 36x13` → `143,799 34x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
+ - **margin**: `0px` → `5px 0px 18px`
+ - **rect**: `160,783 99x19` → `143,820 91x18`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
+ - **padding**: `0px` → `17px 0px 0px 15px`
+ - **rect**: `95,948 13x14` → `59,938 46x142`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
+ - **margin**: `0px` → `5px 0px 18px`
+ - **rect**: `160,945 117x19` → `143,982 107x18`
+
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **margin**: `0px` → `5px 0px 0px`
- **rect**: `1236,214 86x14` → `1073,291 79x13`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **margin**: `0px` → `5px 0px 0px`
- **rect**: `1282,238 40x14` → `1159,291 79x13`
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
+ - **rect**: `98,23 118x18` → `98,23 108x17`
+
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(2)` — "Chain simple tools together. Every chang"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
- **rect**: `58,321 474x51` → `58,285 482x51`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "source.png"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **rect**: `597,347 66x14` → `606,311 60x13`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **rect**: `671,347 40x14` → `674,311 36x13`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **rect**: `58,434 137x13` → `58,400 127x12`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **rect**: `184,457 36x13` → `173,425 33x12`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **rect**: `799,177 58x33` → `799,188 54x36`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- **rect**: `799,216 93x36` → `799,233 87x34`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **rect**: `923,498 28x19` → `923,478 27x18`
+ - **rect**: `923,499 28x19` → `923,478 27x18`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "original.png · 1200 × 800"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **rect**: `925,706 135x11` → `942,663 124x10`
+ - **rect**: `925,707 135x11` → `942,663 124x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **rect**: `1262,706 86x11` → `1275,663 79x10`
+ - **rect**: `1262,707 86x11` → `1275,663 79x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **rect**: `962,1138 97x11` → `977,1021 89x10`
+ - **rect**: `962,1140 97x11` → `977,1021 89x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **rect**: `1278,1138 70x11` → `1290,1021 64x10`
+ - **rect**: `1278,1140 70x11` → `1290,1021 64x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "ready · PNG-24"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
- - **rect**: `984,1569 76x11` → `997,1378 69x10`
+ - **rect**: `984,1572 76x11` → `997,1378 69x10`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
- - **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
- - **rect**: `799,1624 565x17` → `799,1425 565x17`
-
-### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "EP"
- - **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
+ - **rect**: `799,1627 565x17` → `799,1425 565x17`
## Только у нас (структурно)
diff --git a/web/src/lib/components/kit/PreviewTile.svelte b/web/src/lib/components/kit/PreviewTile.svelte
index 10575a2..7244bc4 100644
--- a/web/src/lib/components/kit/PreviewTile.svelte
+++ b/web/src/lib/components/kit/PreviewTile.svelte
@@ -1,6 +1,5 @@
-
{label}
+
{label}
{@render children()}