From d29ec73322d6caf3d7ebff3305b2cf20cb0f0fbb Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Sat, 29 Aug 2026 07:23:31 +0500 Subject: [PATCH] feat: fix demo page to correspond refs --- web/audit/dom-report.json | 1170 +++++++++++++---- web/audit/dom-report.md | 221 +++- web/src/app.html | 2 +- web/src/lib/components/kit/AppShell.svelte | 27 - web/src/lib/components/kit/Badge.svelte | 5 +- .../lib/components/kit/BlueprintGrid.svelte | 22 - web/src/lib/components/kit/ColorField.svelte | 50 +- .../lib/components/kit/DownloadButton.svelte | 33 +- web/src/lib/components/kit/FieldGrid.svelte | 17 +- web/src/lib/components/kit/MetaRow.svelte | 2 +- web/src/lib/components/kit/PreviewTile.svelte | 31 +- .../lib/components/kit/SectionLabel.svelte | 11 +- web/src/lib/components/kit/Segmented.svelte | 2 +- web/src/lib/components/kit/SliderField.svelte | 45 +- web/src/lib/components/kit/StatusDot.svelte | 2 +- web/src/lib/components/kit/StepCard.svelte | 40 +- web/src/lib/components/kit/Toggle.svelte | 2 +- web/src/lib/components/kit/ToggleRow.svelte | 4 +- web/src/lib/components/kit/TopBar.svelte | 11 +- .../lib/components/kit/WorkspaceLayout.svelte | 12 +- web/src/routes/preview/+layout.svelte | 18 +- web/src/routes/preview/demo/+page.svelte | 153 +-- .../preview/demo/WorkspaceHeader.svelte | 22 +- 23 files changed, 1296 insertions(+), 606 deletions(-) delete mode 100644 web/src/lib/components/kit/AppShell.svelte delete mode 100644 web/src/lib/components/kit/BlueprintGrid.svelte diff --git a/web/audit/dom-report.json b/web/audit/dom-report.json index 36c87e8..05c35ef 100644 --- a/web/audit/dom-report.json +++ b/web/audit/dom-report.json @@ -1,120 +1,17 @@ { - "generatedAt": "2026-08-29T01:35:12.843Z", + "generatedAt": "2026-08-29T02:19:33.865Z", "reports": [ { "route": "/preview/demo", "ref": "demo.html", - "deltas": [ - { - "path": "body > div:1", - "type": "tagMismatch", - "ours": "div", - "ref": "main" - }, - { - "path": "body > div:1 > div:1 > header:1", - "type": "added", - "tag": "header", - "text": "", - "nodes": 20 - }, - { - "path": "body > div:1 > div:1 > div:2", - "type": "tagMismatch", - "ours": "div", - "ref": "section" - }, - { - "path": "body > div:1 > div:1 > div:2 > div:1", - "type": "added", - "tag": "div", - "text": "", - "nodes": 1 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:2", - "type": "textMismatch", - "ours": "", - "ref": "PNG PROCESSING WORKSPACE" - }, - { - "path": "body > div:1 > div:1 > div:2 > div:2 > div:1", - "type": "added", - "tag": "div", - "text": "", - "nodes": 203 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:2 > span:1", - "type": "removed", - "tag": "span", - "text": "/", - "nodes": 1 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:2", - "type": "removed", - "tag": "div", - "text": "", - "nodes": 8 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:3", - "type": "removed", - "tag": "div", - "text": "", - "nodes": 7 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:4", - "type": "removed", - "tag": "div", - "text": "", - "nodes": 97 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:5", - "type": "removed", - "tag": "div", - "text": "", - "nodes": 5 - }, - { - "path": "body > div:1 > div:1 > footer:3", - "type": "added", - "tag": "footer", - "text": "", - "nodes": 3 - }, - { - "path": "body > div:1 > div:1 > section:2", - "type": "removed", - "tag": "section", - "text": "", - "nodes": 65 - }, - { - "path": "body > div:1 > header:1", - "type": "removed", - "tag": "header", - "text": "", - "nodes": 21 - }, - { - "path": "body > div:1 > footer:3", - "type": "removed", - "tag": "footer", - "text": "", - "nodes": 6 - } - ], + "deltas": [], "counts": { - "added": 4, - "removed": 8, - "tagMismatch": 2, - "textMismatch": 1, - "nodesAdded": 227, - "nodesRemoved": 210 + "added": 0, + "removed": 0, + "tagMismatch": 0, + "textMismatch": 0, + "nodesAdded": 0, + "nodesRemoved": 0 } }, { @@ -122,116 +19,749 @@ "ref": "list-tools.html", "deltas": [ { - "path": "body > div:1", - "type": "tagMismatch", - "ours": "div", - "ref": "main" - }, - { - "path": "body > div:1 > div:1 > header:1", + "path": "body > main:1 > header:1 > a:1 > span:3", "type": "added", - "tag": "header", - "text": "", - "nodes": 20 - }, - { - "path": "body > div:1 > div:1 > div:2 > div:1", - "type": "added", - "tag": "div", - "text": "", + "tag": "span", + "text": "/ LIST-TOOLS", "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2 > div:2 > section:1", - "type": "added", - "tag": "section", - "text": "", - "nodes": 963 + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "removed", + "tag": "span", + "text": "/ CATALOG", + "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2 > div:2 > div:1", + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "textMismatch", + "ours": "AUTO PIPELINE", + "ref": "LOCAL MODE / READY" + }, + { + "path": "body > main:1 > section:2", + "type": "tagMismatch", + "ours": "section", + "ref": "div" + }, + { + "path": "body > main:1 > section:2 > header:1", + "type": "added", + "tag": "header", + "text": "", + "nodes": 4 + }, + { + "path": "body > main:1 > section:2 > section:2", + "type": "tagMismatch", + "ours": "section", + "ref": "div" + }, + { + "path": "body > main:1 > section:2 > section:2 > header:1", + "type": "added", + "tag": "header", + "text": "", + "nodes": 4 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:1", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:2", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:3", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:4", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:5", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:6", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:7", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:8", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:9", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:10", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:11", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:12", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:13", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:14", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:15", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:16", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:17", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:18", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:19", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:20", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > a:21", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:2 > div:2 > div:1", "type": "removed", "tag": "div", "text": "EASY-PNG-TOOLS / CATALOG", "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2 > div:2 > h1:2", + "path": "body > main:1 > section:2 > section:2 > div:2 > h1:2", "type": "removed", "tag": "h1", "text": "Tool catalog", "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2 > div:2 > p:3", + "path": "body > main:1 > section:2 > section:2 > div:2 > p:3", "type": "removed", "tag": "p", "text": "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser.", "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2 > div:2", + "path": "body > main:1 > section:2 > section:2 > div:2", "type": "removed", "tag": "div", "text": "", "nodes": 4 }, { - "path": "body > div:1 > div:1 > footer:3", - "type": "textMismatch", - "ours": "", - "ref": "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE" + "path": "body > main:1 > section:2 > section:3", + "type": "tagMismatch", + "ours": "section", + "ref": "div" }, { - "path": "body > div:1 > div:1 > footer:3 > span:1", + "path": "body > main:1 > section:2 > section:3 > header:1", "type": "added", - "tag": "span", - "text": "v0.1.0", - "nodes": 1 - }, - { - "path": "body > div:1 > div:1 > footer:3 > span:2", - "type": "added", - "tag": "span", - "text": "© 2026", - "nodes": 1 - }, - { - "path": "body > div:1 > div:1 > footer:3 > span:1", - "type": "removed", - "tag": "span", - "text": "•", - "nodes": 1 - }, - { - "path": "body > div:1 > div:1 > div:2", - "type": "removed", - "tag": "div", - "text": "", - "nodes": 13 - }, - { - "path": "body > div:1 > div:1 > div:3", - "type": "removed", - "tag": "div", - "text": "", - "nodes": 255 - }, - { - "path": "body > div:1 > header:1", - "type": "removed", "tag": "header", "text": "", - "nodes": 21 + "nodes": 4 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:1", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:2", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:3", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:4", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:5", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:6", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:7", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:8", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:9", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:10", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:11", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:12", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:13", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:14", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:15", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:16", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:17", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:18", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:19", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:20", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > a:21", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > svg:1", + "type": "removed", + "tag": "svg", + "text": "", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:2", + "type": "removed", + "tag": "button", + "text": "ALL", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:3", + "type": "removed", + "tag": "button", + "text": "CONVERT", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:4", + "type": "removed", + "tag": "button", + "text": "TRANSPARENCY", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:5", + "type": "removed", + "tag": "button", + "text": "COLOR", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:6", + "type": "removed", + "tag": "button", + "text": "GEOMETRY", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:7", + "type": "removed", + "tag": "button", + "text": "FILTERS", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > div:2 > button:8", + "type": "removed", + "tag": "button", + "text": "ANALYZE", + "nodes": 1 + }, + { + "path": "body > main:1 > section:2 > section:3 > label:1", + "type": "removed", + "tag": "label", + "text": "", + "nodes": 3 + }, + { + "path": "body > main:1 > section:2 > section:4", + "type": "tagMismatch", + "ours": "section", + "ref": "div" + }, + { + "path": "body > main:1 > section:2 > section:4 > header:1", + "type": "added", + "tag": "header", + "text": "", + "nodes": 4 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2", + "type": "tagMismatch", + "ours": "div", + "ref": "section" + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:1", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:2", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:3", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:4", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:5", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:6", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:7", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:8", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:9", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:10", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:11", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:12", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:13", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:14", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:15", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:16", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:17", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:18", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:19", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:20", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:21", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:22", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:23", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:24", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > a:25", + "type": "added", + "tag": "a", + "text": "", + "nodes": 7 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > div:1", + "type": "removed", + "tag": "div", + "text": "", + "nodes": 3 + }, + { + "path": "body > main:1 > section:2 > section:4 > div:2 > div:2", + "type": "removed", + "tag": "div", + "text": "", + "nodes": 41 + }, + { + "path": "body > main:1 > section:2 > section:4 > section:2", + "type": "removed", + "tag": "section", + "text": "", + "nodes": 45 + }, + { + "path": "body > main:1 > section:2 > section:4 > section:3", + "type": "removed", + "tag": "section", + "text": "", + "nodes": 45 + }, + { + "path": "body > main:1 > section:2 > section:4 > section:4", + "type": "removed", + "tag": "section", + "text": "", + "nodes": 45 + }, + { + "path": "body > main:1 > section:2 > section:4 > section:5", + "type": "removed", + "tag": "section", + "text": "", + "nodes": 37 + }, + { + "path": "body > main:1 > section:2 > section:4 > section:6", + "type": "removed", + "tag": "section", + "text": "", + "nodes": 37 + }, + { + "path": "body > main:1 > section:2 > section:5", + "type": "added", + "tag": "section", + "text": "", + "nodes": 132 + }, + { + "path": "body > main:1 > section:2 > section:6", + "type": "added", + "tag": "section", + "text": "", + "nodes": 62 + }, + { + "path": "body > main:1 > section:2 > section:7", + "type": "added", + "tag": "section", + "text": "", + "nodes": 27 + }, + { + "path": "body > main:1 > section:2 > section:8", + "type": "added", + "tag": "section", + "text": "", + "nodes": 97 + }, + { + "path": "body > main:1 > section:2 > section:9", + "type": "added", + "tag": "section", + "text": "", + "nodes": 153 + }, + { + "path": "body > main:1 > section:2 > footer:4", + "type": "removed", + "tag": "footer", + "text": "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE", + "nodes": 2 + }, + { + "path": "body > main:1 > footer:3", + "type": "added", + "tag": "footer", + "text": "", + "nodes": 6 } ], "counts": { - "added": 5, - "removed": 8, - "tagMismatch": 1, + "added": 78, + "removed": 22, + "tagMismatch": 5, "textMismatch": 1, - "nodesAdded": 986, - "nodesRemoved": 297 + "nodesAdded": 963, + "nodesRemoved": 274 } }, { @@ -239,88 +769,128 @@ "ref": "gradient.html", "deltas": [ { - "path": "body > div:1", - "type": "tagMismatch", - "ours": "div", - "ref": "main" - }, - { - "path": "body > div:1 > div:1 > header:1", + "path": "body > main:1 > header:1 > a:1 > span:3", "type": "added", - "tag": "header", - "text": "", - "nodes": 20 + "tag": "span", + "text": "/ TOOLS / LINEAR-GRADIENT-PNG", + "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2", + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "removed", + "tag": "span", + "text": "/ GRADIENT", + "nodes": 1 + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "textMismatch", + "ours": "AUTO PIPELINE", + "ref": "LIVE PREVIEW" + }, + { + "path": "body > main:1 > div:2 > section:1", + "type": "tagMismatch", + "ours": "section", + "ref": "div" + }, + { + "path": "body > main:1 > div:2 > section:1", "type": "textMismatch", "ours": "", "ref": "PNG PROCESSING SINGLE TOOL" }, { - "path": "body > div:1 > div:1 > div:2 > div:1", + "path": "body > main:1 > div:2 > section:1 > section:1", "type": "added", - "tag": "div", + "tag": "section", "text": "", - "nodes": 1 + "nodes": 145 }, { - "path": "body > div:1 > div:1 > div:2 > div:2", - "type": "added", - "tag": "div", - "text": "", - "nodes": 162 - }, - { - "path": "body > div:1 > div:1 > div:2 > span:1", + "path": "body > main:1 > div:2 > section:1 > span:1", "type": "removed", "tag": "span", "text": "/", "nodes": 1 }, { - "path": "body > div:1 > div:1 > footer:3", - "type": "added", - "tag": "footer", - "text": "", - "nodes": 3 + "path": "body > main:1 > div:2 > section:2", + "type": "tagMismatch", + "ours": "section", + "ref": "div" }, { - "path": "body > div:1 > div:1 > div:2", - "type": "removed", + "path": "body > main:1 > div:2 > section:2 > header:1", + "type": "added", + "tag": "header", + "text": "", + "nodes": 5 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1", + "type": "added", "tag": "div", "text": "", - "nodes": 6 + "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:3", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2", + "type": "added", + "tag": "div", + "text": "", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > h1:1", + "type": "removed", + "tag": "h1", + "text": "Gradient background.", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > p:2", + "type": "removed", + "tag": "p", + "text": "Create a clean, export-ready gradient with precise control over color, direction and transparency.", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > span:2", + "type": "removed", + "tag": "span", + "text": "LIVE PREVIEW", + "nodes": 2 + }, + { + "path": "body > main:1 > div:2 > div:3", "type": "removed", "tag": "div", "text": "", "nodes": 66 }, { - "path": "body > div:1 > header:1", - "type": "removed", - "tag": "header", - "text": "", - "nodes": 21 + "path": "body > main:1 > footer:3 > span:2", + "type": "added", + "tag": "span", + "text": "pipeline is local-only", + "nodes": 2 }, { - "path": "body > div:1 > footer:3", + "path": "body > main:1 > footer:3 > span:2", "type": "removed", - "tag": "footer", - "text": "", - "nodes": 5 + "tag": "span", + "text": "gradient tool · local-only", + "nodes": 1 } ], "counts": { - "added": 4, - "removed": 5, - "tagMismatch": 1, - "textMismatch": 1, - "nodesAdded": 186, - "nodesRemoved": 99 + "added": 6, + "removed": 7, + "tagMismatch": 2, + "textMismatch": 2, + "nodesAdded": 155, + "nodesRemoved": 73 } }, { @@ -328,88 +898,142 @@ "ref": "background-remover.html", "deltas": [ { - "path": "body > div:1", - "type": "tagMismatch", - "ours": "div", - "ref": "main" - }, - { - "path": "body > div:1 > div:1 > header:1", + "path": "body > main:1 > header:1 > a:1 > span:3", "type": "added", - "tag": "header", - "text": "", - "nodes": 20 + "tag": "span", + "text": "/ TOOLS / REMOVE-BACKGROUND-PNG", + "nodes": 1 }, { - "path": "body > div:1 > div:1 > div:2", + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "removed", + "tag": "span", + "text": "/ BACKGROUND REMOVER", + "nodes": 1 + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "textMismatch", + "ours": "AUTO PIPELINE", + "ref": "AUTO PROCESSING" + }, + { + "path": "body > main:1 > div:2 > section:1", + "type": "tagMismatch", + "ours": "section", + "ref": "div" + }, + { + "path": "body > main:1 > div:2 > section:1", "type": "textMismatch", "ours": "", "ref": "PNG PROCESSING SINGLE TOOL" }, { - "path": "body > div:1 > div:1 > div:2 > div:1", + "path": "body > main:1 > div:2 > section:1 > section:1", "type": "added", - "tag": "div", + "tag": "section", "text": "", - "nodes": 1 + "nodes": 138 }, { - "path": "body > div:1 > div:1 > div:2 > div:2", - "type": "added", - "tag": "div", - "text": "", - "nodes": 162 - }, - { - "path": "body > div:1 > div:1 > div:2 > span:1", + "path": "body > main:1 > div:2 > section:1 > span:1", "type": "removed", "tag": "span", "text": "/", "nodes": 1 }, { - "path": "body > div:1 > div:1 > footer:3", - "type": "added", - "tag": "footer", - "text": "", - "nodes": 3 + "path": "body > main:1 > div:2 > section:2", + "type": "tagMismatch", + "ours": "section", + "ref": "div" }, { - "path": "body > div:1 > div:1 > div:2", - "type": "removed", + "path": "body > main:1 > div:2 > section:2 > header:1", + "type": "added", + "tag": "header", + "text": "", + "nodes": 5 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1", + "type": "added", "tag": "div", "text": "", - "nodes": 6 + "nodes": 4 }, { - "path": "body > div:1 > div:1 > div:3", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2", + "type": "added", + "tag": "div", + "text": "", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3", + "type": "added", + "tag": "div", + "text": "", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > h1:1", + "type": "removed", + "tag": "h1", + "text": "Remove background.", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > p:2", + "type": "removed", + "tag": "p", + "text": "Select a background color and tune the edge detection. Changes are processed automatically in your browser.", + "nodes": 1 + }, + { + "path": "body > main:1 > div:2 > section:2 > span:2", + "type": "removed", + "tag": "span", + "text": "LIVE PREVIEW", + "nodes": 2 + }, + { + "path": "body > main:1 > div:2 > div:3", "type": "removed", "tag": "div", "text": "", "nodes": 71 }, { - "path": "body > div:1 > header:1", - "type": "removed", - "tag": "header", - "text": "", - "nodes": 21 + "path": "body > main:1 > footer:3 > span:2", + "type": "added", + "tag": "span", + "text": "pipeline is local-only", + "nodes": 2 }, { - "path": "body > div:1 > footer:3", + "path": "body > main:1 > footer:3 > span:2", "type": "removed", - "tag": "footer", + "tag": "span", + "text": "background remover · local-only", + "nodes": 1 + }, + { + "path": "body > div:2", + "type": "added", + "tag": "div", "text": "", - "nodes": 5 + "nodes": 1 } ], "counts": { - "added": 4, - "removed": 5, - "tagMismatch": 1, - "textMismatch": 1, - "nodesAdded": 186, - "nodesRemoved": 104 + "added": 8, + "removed": 7, + "tagMismatch": 2, + "textMismatch": 2, + "nodesAdded": 153, + "nodesRemoved": 78 } } ] diff --git a/web/audit/dom-report.md b/web/audit/dom-report.md index 90e70c6..9a09720 100644 --- a/web/audit/dom-report.md +++ b/web/audit/dom-report.md @@ -1,95 +1,186 @@ # DOM audit (phase A) -_2026-08-29T01:35:12.853Z_ +_2026-08-29T02:19:33.867Z_ ## Сводка | route | ref | added | removed | tag | text | |---|---|---|---|---|---| -| `/preview/demo` | demo.html | 4 | 8 | 2 | 1 | -| `/preview/list-tools` | list-tools.html | 5 | 8 | 1 | 1 | -| `/preview/tools/linear-gradient-png` | gradient.html | 4 | 5 | 1 | 1 | -| `/preview/tools/remove-background-png` | background-remover.html | 4 | 5 | 1 | 1 | +| `/preview/demo` | demo.html | 0 | 0 | 0 | 0 | +| `/preview/list-tools` | list-tools.html | 78 | 22 | 5 | 1 | +| `/preview/tools/linear-gradient-png` | gradient.html | 6 | 7 | 2 | 2 | +| `/preview/tools/remove-background-png` | background-remover.html | 8 | 7 | 2 | 2 | ## /preview/demo (vs demo.html) -- added: **4** (≈227 узл.), removed: **8** (≈210 узл.), tag: **2**, text: **1** +- added: **0** (≈0 узл.), removed: **0** (≈0 узл.), tag: **0**, text: **0** -### Расхождения (топ 15) +### Расхождения (топ 0) -- `body > div:1` **tag**: ours `div` → ref `main` -- `body > div:1 > div:1 > header:1` **added** (`header` · 20 узл.) -- `body > div:1 > div:1 > div:2` **tag**: ours `div` → ref `section` -- `body > div:1 > div:1 > div:2 > div:1` **added** (`div` · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2` **text**: ours `` → ref `PNG PROCESSING WORKSPACE` -- `body > div:1 > div:1 > div:2 > div:2 > div:1` **added** (`div` · 203 узл.) -- `body > div:1 > div:1 > div:2 > div:2 > span:1` **removed** (`span` "/" · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2` **removed** (`div` · 8 узл.) -- `body > div:1 > div:1 > div:2 > div:3` **removed** (`div` · 7 узл.) -- `body > div:1 > div:1 > div:2 > div:4` **removed** (`div` · 97 узл.) -- `body > div:1 > div:1 > div:2 > div:5` **removed** (`div` · 5 узл.) -- `body > div:1 > div:1 > footer:3` **added** (`footer` · 3 узл.) -- `body > div:1 > div:1 > section:2` **removed** (`section` · 65 узл.) -- `body > div:1 > header:1` **removed** (`header` · 21 узл.) -- `body > div:1 > footer:3` **removed** (`footer` · 6 узл.) +_расхождений нет_ ## /preview/list-tools (vs list-tools.html) -- added: **5** (≈986 узл.), removed: **8** (≈297 узл.), tag: **1**, text: **1** +- added: **78** (≈963 узл.), removed: **22** (≈274 узл.), tag: **5**, text: **1** -### Расхождения (топ 15) +### Расхождения (топ 106) -- `body > div:1` **tag**: ours `div` → ref `main` -- `body > div:1 > div:1 > header:1` **added** (`header` · 20 узл.) -- `body > div:1 > div:1 > div:2 > div:1` **added** (`div` · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2 > section:1` **added** (`section` · 963 узл.) -- `body > div:1 > div:1 > div:2 > div:2 > div:1` **removed** (`div` "EASY-PNG-TOOLS / CATALOG" · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2 > h1:2` **removed** (`h1` "Tool catalog" · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2 > p:3` **removed** (`p` "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser." · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2` **removed** (`div` · 4 узл.) -- `body > div:1 > div:1 > footer:3` **text**: ours `` → ref `ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE` -- `body > div:1 > div:1 > footer:3 > span:1` **added** (`span` "v0.1.0" · 1 узл.) -- `body > div:1 > div:1 > footer:3 > span:2` **added** (`span` "© 2026" · 1 узл.) -- `body > div:1 > div:1 > footer:3 > span:1` **removed** (`span` "•" · 1 узл.) -- `body > div:1 > div:1 > div:2` **removed** (`div` · 13 узл.) -- `body > div:1 > div:1 > div:3` **removed** (`div` · 255 узл.) -- `body > div:1 > header:1` **removed** (`header` · 21 узл.) +- `body > main:1 > header:1 > a:1 > span:3` **added** (`span` "/ LIST-TOOLS" · 1 узл.) +- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ CATALOG" · 1 узл.) +- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `LOCAL MODE / READY` +- `body > main:1 > section:2` **tag**: ours `section` → ref `div` +- `body > main:1 > section:2 > header:1` **added** (`header` · 4 узл.) +- `body > main:1 > section:2 > section:2` **tag**: ours `section` → ref `div` +- `body > main:1 > section:2 > section:2 > header:1` **added** (`header` · 4 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:1` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:2` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:3` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:4` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:5` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:6` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:7` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:8` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:9` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:10` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:11` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:12` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:13` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:14` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:15` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:16` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:17` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:18` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:19` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:20` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > a:21` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > div:1` **removed** (`div` "EASY-PNG-TOOLS / CATALOG" · 1 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > h1:2` **removed** (`h1` "Tool catalog" · 1 узл.) +- `body > main:1 > section:2 > section:2 > div:2 > p:3` **removed** (`p` "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser." · 1 узл.) +- `body > main:1 > section:2 > section:2 > div:2` **removed** (`div` · 4 узл.) +- `body > main:1 > section:2 > section:3` **tag**: ours `section` → ref `div` +- `body > main:1 > section:2 > section:3 > header:1` **added** (`header` · 4 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:1` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:2` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:3` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:4` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:5` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:6` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:7` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:8` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:9` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:10` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:11` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:12` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:13` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:14` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:15` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:16` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:17` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:18` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:19` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:20` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > a:21` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > svg:1` **removed** (`svg` · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:2` **removed** (`button` "ALL" · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:3` **removed** (`button` "CONVERT" · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:4` **removed** (`button` "TRANSPARENCY" · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:5` **removed** (`button` "COLOR" · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:6` **removed** (`button` "GEOMETRY" · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:7` **removed** (`button` "FILTERS" · 1 узл.) +- `body > main:1 > section:2 > section:3 > div:2 > button:8` **removed** (`button` "ANALYZE" · 1 узл.) +- `body > main:1 > section:2 > section:3 > label:1` **removed** (`label` · 3 узл.) +- `body > main:1 > section:2 > section:4` **tag**: ours `section` → ref `div` +- `body > main:1 > section:2 > section:4 > header:1` **added** (`header` · 4 узл.) +- `body > main:1 > section:2 > section:4 > div:2` **tag**: ours `div` → ref `section` +- `body > main:1 > section:2 > section:4 > div:2 > a:1` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:2` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:3` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:4` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:5` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:6` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:7` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:8` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:9` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:10` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:11` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:12` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:13` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:14` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:15` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:16` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:17` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:18` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:19` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:20` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:21` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:22` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:23` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:24` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > a:25` **added** (`a` · 7 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > div:1` **removed** (`div` · 3 узл.) +- `body > main:1 > section:2 > section:4 > div:2 > div:2` **removed** (`div` · 41 узл.) +- `body > main:1 > section:2 > section:4 > section:2` **removed** (`section` · 45 узл.) +- `body > main:1 > section:2 > section:4 > section:3` **removed** (`section` · 45 узл.) +- `body > main:1 > section:2 > section:4 > section:4` **removed** (`section` · 45 узл.) +- `body > main:1 > section:2 > section:4 > section:5` **removed** (`section` · 37 узл.) +- `body > main:1 > section:2 > section:4 > section:6` **removed** (`section` · 37 узл.) +- `body > main:1 > section:2 > section:5` **added** (`section` · 132 узл.) +- `body > main:1 > section:2 > section:6` **added** (`section` · 62 узл.) +- `body > main:1 > section:2 > section:7` **added** (`section` · 27 узл.) +- `body > main:1 > section:2 > section:8` **added** (`section` · 97 узл.) +- `body > main:1 > section:2 > section:9` **added** (`section` · 153 узл.) +- `body > main:1 > section:2 > footer:4` **removed** (`footer` "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE" · 2 узл.) +- `body > main:1 > footer:3` **added** (`footer` · 6 узл.) ## /preview/tools/linear-gradient-png (vs gradient.html) -- added: **4** (≈186 узл.), removed: **5** (≈99 узл.), tag: **1**, text: **1** +- added: **6** (≈155 узл.), removed: **7** (≈73 узл.), tag: **2**, text: **2** -### Расхождения (топ 11) +### Расхождения (топ 17) -- `body > div:1` **tag**: ours `div` → ref `main` -- `body > div:1 > div:1 > header:1` **added** (`header` · 20 узл.) -- `body > div:1 > div:1 > div:2` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL` -- `body > div:1 > div:1 > div:2 > div:1` **added** (`div` · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2` **added** (`div` · 162 узл.) -- `body > div:1 > div:1 > div:2 > span:1` **removed** (`span` "/" · 1 узл.) -- `body > div:1 > div:1 > footer:3` **added** (`footer` · 3 узл.) -- `body > div:1 > div:1 > div:2` **removed** (`div` · 6 узл.) -- `body > div:1 > div:1 > div:3` **removed** (`div` · 66 узл.) -- `body > div:1 > header:1` **removed** (`header` · 21 узл.) -- `body > div:1 > footer:3` **removed** (`footer` · 5 узл.) +- `body > main:1 > header:1 > a:1 > span:3` **added** (`span` "/ TOOLS / LINEAR-GRADIENT-PNG" · 1 узл.) +- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ GRADIENT" · 1 узл.) +- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `LIVE PREVIEW` +- `body > main:1 > div:2 > section:1` **tag**: ours `section` → ref `div` +- `body > main:1 > div:2 > section:1` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL` +- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 145 узл.) +- `body > main:1 > div:2 > section:1 > span:1` **removed** (`span` "/" · 1 узл.) +- `body > main:1 > div:2 > section:2` **tag**: ours `section` → ref `div` +- `body > main:1 > div:2 > section:2 > header:1` **added** (`header` · 5 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > div:1` **added** (`div` · 1 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > div:2` **added** (`div` · 1 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > h1:1` **removed** (`h1` "Gradient background." · 1 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > p:2` **removed** (`p` "Create a clean, export-ready gradient with precise control over color, direction and transparency." · 1 узл.) +- `body > main:1 > div:2 > section:2 > span:2` **removed** (`span` "LIVE PREVIEW" · 2 узл.) +- `body > main:1 > div:2 > div:3` **removed** (`div` · 66 узл.) +- `body > main:1 > footer:3 > span:2` **added** (`span` "pipeline is local-only" · 2 узл.) +- `body > main:1 > footer:3 > span:2` **removed** (`span` "gradient tool · local-only" · 1 узл.) ## /preview/tools/remove-background-png (vs background-remover.html) -- added: **4** (≈186 узл.), removed: **5** (≈104 узл.), tag: **1**, text: **1** +- added: **8** (≈153 узл.), removed: **7** (≈78 узл.), tag: **2**, text: **2** -### Расхождения (топ 11) +### Расхождения (топ 19) -- `body > div:1` **tag**: ours `div` → ref `main` -- `body > div:1 > div:1 > header:1` **added** (`header` · 20 узл.) -- `body > div:1 > div:1 > div:2` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL` -- `body > div:1 > div:1 > div:2 > div:1` **added** (`div` · 1 узл.) -- `body > div:1 > div:1 > div:2 > div:2` **added** (`div` · 162 узл.) -- `body > div:1 > div:1 > div:2 > span:1` **removed** (`span` "/" · 1 узл.) -- `body > div:1 > div:1 > footer:3` **added** (`footer` · 3 узл.) -- `body > div:1 > div:1 > div:2` **removed** (`div` · 6 узл.) -- `body > div:1 > div:1 > div:3` **removed** (`div` · 71 узл.) -- `body > div:1 > header:1` **removed** (`header` · 21 узл.) -- `body > div:1 > footer:3` **removed** (`footer` · 5 узл.) +- `body > main:1 > header:1 > a:1 > span:3` **added** (`span` "/ TOOLS / REMOVE-BACKGROUND-PNG" · 1 узл.) +- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ BACKGROUND REMOVER" · 1 узл.) +- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `AUTO PROCESSING` +- `body > main:1 > div:2 > section:1` **tag**: ours `section` → ref `div` +- `body > main:1 > div:2 > section:1` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL` +- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 138 узл.) +- `body > main:1 > div:2 > section:1 > span:1` **removed** (`span` "/" · 1 узл.) +- `body > main:1 > div:2 > section:2` **tag**: ours `section` → ref `div` +- `body > main:1 > div:2 > section:2 > header:1` **added** (`header` · 5 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > div:1` **added** (`div` · 4 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > div:2` **added** (`div` · 1 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > div:3` **added** (`div` · 1 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > h1:1` **removed** (`h1` "Remove background." · 1 узл.) +- `body > main:1 > div:2 > section:2 > div:2 > p:2` **removed** (`p` "Select a background color and tune the edge detection. Changes are processed automatically in your browser." · 1 узл.) +- `body > main:1 > div:2 > section:2 > span:2` **removed** (`span` "LIVE PREVIEW" · 2 узл.) +- `body > main:1 > div:2 > div:3` **removed** (`div` · 71 узл.) +- `body > main:1 > footer:3 > span:2` **added** (`span` "pipeline is local-only" · 2 узл.) +- `body > main:1 > footer:3 > span:2` **removed** (`span` "background remover · local-only" · 1 узл.) +- `body > div:2` **added** (`div` · 1 узл.) diff --git a/web/src/app.html b/web/src/app.html index 2ed93b2..afb7b9e 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -23,6 +23,6 @@ %sveltekit.head% -
%sveltekit.body%
+ %sveltekit.body% diff --git a/web/src/lib/components/kit/AppShell.svelte b/web/src/lib/components/kit/AppShell.svelte deleted file mode 100644 index ff6c788..0000000 --- a/web/src/lib/components/kit/AppShell.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - -
- -
- {@render children()} -
-
- - diff --git a/web/src/lib/components/kit/Badge.svelte b/web/src/lib/components/kit/Badge.svelte index dbcb752..17ac660 100644 --- a/web/src/lib/components/kit/Badge.svelte +++ b/web/src/lib/components/kit/Badge.svelte @@ -1,16 +1,19 @@ + {#if check}{/if} {#if children}{@render children()}{/if} diff --git a/web/src/lib/components/kit/BlueprintGrid.svelte b/web/src/lib/components/kit/BlueprintGrid.svelte deleted file mode 100644 index 32e35df..0000000 --- a/web/src/lib/components/kit/BlueprintGrid.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/web/src/lib/components/kit/ColorField.svelte b/web/src/lib/components/kit/ColorField.svelte index 59de9ac..3767d08 100644 --- a/web/src/lib/components/kit/ColorField.svelte +++ b/web/src/lib/components/kit/ColorField.svelte @@ -1,12 +1,14 @@ - +
+
- - + + + {#if chevron}{/if}
- +
diff --git a/web/src/lib/components/kit/DownloadButton.svelte b/web/src/lib/components/kit/DownloadButton.svelte index d933243..5cde6c1 100644 --- a/web/src/lib/components/kit/DownloadButton.svelte +++ b/web/src/lib/components/kit/DownloadButton.svelte @@ -1,23 +1,34 @@ - + diff --git a/web/src/lib/components/kit/FieldGrid.svelte b/web/src/lib/components/kit/FieldGrid.svelte index ad44e02..055b5c5 100644 --- a/web/src/lib/components/kit/FieldGrid.svelte +++ b/web/src/lib/components/kit/FieldGrid.svelte @@ -9,22 +9,23 @@ let { compact = false, children }: Props = $props(); -
+
{@render children()}
diff --git a/web/src/lib/components/kit/SectionLabel.svelte b/web/src/lib/components/kit/SectionLabel.svelte index 6d8eb3a..039f153 100644 --- a/web/src/lib/components/kit/SectionLabel.svelte +++ b/web/src/lib/components/kit/SectionLabel.svelte @@ -7,9 +7,10 @@ title: string; meta?: string; actions?: Snippet; + unwrapActions?: boolean; } - let { label, title, meta, actions }: Props = $props(); + let { label, title, meta, actions, unwrapActions = false }: Props = $props();
@@ -18,9 +19,13 @@ {title}{#if meta}{meta}{/if}
{#if actions} -
+ {#if unwrapActions} {@render actions()} -
+ {:else} +
+ {@render actions()} +
+ {/if} {/if}
diff --git a/web/src/lib/components/kit/Segmented.svelte b/web/src/lib/components/kit/Segmented.svelte index 6622186..68f7c82 100644 --- a/web/src/lib/components/kit/Segmented.svelte +++ b/web/src/lib/components/kit/Segmented.svelte @@ -22,7 +22,7 @@ diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte index 05e9d33..5e690ae 100644 --- a/web/src/routes/preview/+layout.svelte +++ b/web/src/routes/preview/+layout.svelte @@ -1,7 +1,7 @@ -
+
- {@render children()} + {@render children()}
- v0.1.0 - © 2026 + easy-png-tools v2.4.0 + pipeline is local-only + © 2024
-
+ + diff --git a/web/src/routes/preview/demo/WorkspaceHeader.svelte b/web/src/routes/preview/demo/WorkspaceHeader.svelte index 8697969..17c3529 100644 --- a/web/src/routes/preview/demo/WorkspaceHeader.svelte +++ b/web/src/routes/preview/demo/WorkspaceHeader.svelte @@ -17,19 +17,17 @@ let { eyebrowA, eyebrowB, title, lede, file }: Props = $props(); -
-
-
-
- {eyebrowA}{#if eyebrowB}/{eyebrowB}{/if} -
-

{title}

- {#if lede}

{lede}

{/if} -
- {#if file} - - {/if} +
+ {eyebrowA} / {eyebrowB} +
+
+
+

{title}

+ {#if lede}

{lede}

{/if}
+ {#if file} + + {/if}