Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update pages and refs audit

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-28 17:03:30 +05:00
parent c0f48ecd97
commit 86e7b7250d
4 changed files with 369 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/audit/audit-report.json
+129 -139
View File
@@ -1,5 +1,5 @@
{ {
"generatedAt": "2026-08-28T11:41:19.954Z", "generatedAt": "2026-08-28T11:58:18.224Z",
"ours": "http://127.0.0.1:5179/preview/demo", "ours": "http://127.0.0.1:5179/preview/demo",
"ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html", "ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
"tokenDiffs": { "tokenDiffs": {
@@ -197,7 +197,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "/", "text": "/",
"deltas": { "deltas": {
@@ -231,7 +231,7 @@
}, },
"rect": { "rect": {
"ours": { "ours": {
"x": 173, "x": 165,
"y": 124, "y": 124,
"w": 7, "w": 7,
"h": 13 "h": 13
@@ -246,7 +246,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)",
"tag": "h1", "tag": "h1",
"text": "Build your image pipeline.", "text": "Build your image pipeline.",
"deltas": { "deltas": {
@@ -271,7 +271,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)",
"tag": "p", "tag": "p",
"text": "Chain simple tools together. Every chang", "text": "Chain simple tools together. Every chang",
"deltas": { "deltas": {
@@ -292,7 +292,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "source.png", "text": "source.png",
"deltas": { "deltas": {
@@ -313,7 +313,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)",
"tag": "b", "tag": "b",
"text": "1.8 MB", "text": "1.8 MB",
"deltas": { "deltas": {
@@ -334,16 +334,32 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "PROCESSING PIPELINE", "text": "PROCESSING PIPELINE",
"deltas": { "deltas": {
"fontWeight": {
"ours": "500",
"ref": "400"
},
"letterSpacing": {
"ours": "1px",
"ref": "1.2px"
},
"lineHeight": {
"ours": "12px",
"ref": "normal"
},
"display": {
"ours": "block",
"ref": "inline"
},
"rect": { "rect": {
"ours": { "ours": {
"x": 58, "x": 58,
"y": 434, "y": 428,
"w": 137, "w": 154,
"h": 13 "h": 12
}, },
"ref": { "ref": {
"x": 58, "x": 58,
@@ -355,14 +371,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)",
"tag": "em", "tag": "em",
"text": "• LIVE", "text": "• LIVE",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 184, "x": 175,
"y": 457, "y": 451,
"w": 36, "w": 36,
"h": 13 "h": 13
}, },
@@ -376,7 +392,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "01", "text": "01",
"deltas": { "deltas": {
@@ -387,7 +403,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 95, "x": 95,
"y": 510, "y": 504,
"w": 13, "w": 13,
"h": 14 "h": 14
}, },
@@ -401,7 +417,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)",
"tag": "span", "tag": "span",
"text": "BACKGROUND", "text": "BACKGROUND",
"deltas": { "deltas": {
@@ -412,7 +428,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 116, "x": 116,
"y": 510, "y": 504,
"w": 72, "w": 72,
"h": 13 "h": 13
}, },
@@ -426,7 +442,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)",
"tag": "span", "tag": "span",
"text": "Gradient background", "text": "Gradient background",
"deltas": { "deltas": {
@@ -437,7 +453,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 196, "x": 196,
"y": 507, "y": 501,
"w": 171, "w": 171,
"h": 19 "h": 19
}, },
@@ -451,48 +467,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)",
"tag": "span",
"text": "COLOR",
"deltas": {
"fontWeight": {
"ours": "500",
"ref": "400"
},
"margin": {
"ours": "0px",
"ref": "0px 0px 8px"
},
"letterSpacing": {
"ours": "1px",
"ref": "0.8px"
},
"lineHeight": {
"ours": "12px",
"ref": "normal"
},
"display": {
"ours": "block",
"ref": "flex"
},
"rect": {
"ours": {
"x": 71,
"y": 575,
"w": 203,
"h": 12
},
"ref": {
"x": 143,
"y": 546,
"w": 189,
"h": 12
}
}
}
},
{
"path": "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)",
"tag": "button", "tag": "button",
"text": "100", "text": "100",
"deltas": { "deltas": {
@@ -511,7 +486,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 491, "x": 491,
"y": 596, "y": 590,
"w": 42, "w": 42,
"h": 30 "h": 30
}, },
@@ -525,7 +500,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)",
"tag": "button", "tag": "button",
"text": "75", "text": "75",
"deltas": { "deltas": {
@@ -544,7 +519,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 533, "x": 533,
"y": 596, "y": 590,
"w": 37, "w": 37,
"h": 30 "h": 30
}, },
@@ -558,7 +533,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)",
"tag": "button", "tag": "button",
"text": "50", "text": "50",
"deltas": { "deltas": {
@@ -577,7 +552,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 569, "x": 569,
"y": 596, "y": 590,
"w": 37, "w": 37,
"h": 30 "h": 30
}, },
@@ -591,7 +566,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)",
"tag": "button", "tag": "button",
"text": "25", "text": "25",
"deltas": { "deltas": {
@@ -610,7 +585,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 606, "x": 606,
"y": 596, "y": 590,
"w": 37, "w": 37,
"h": 30 "h": 30
}, },
@@ -624,7 +599,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "02", "text": "02",
"deltas": { "deltas": {
@@ -635,7 +610,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 95, "x": 95,
"y": 672, "y": 655,
"w": 13, "w": 13,
"h": 14 "h": 14
}, },
@@ -649,7 +624,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)",
"tag": "span", "tag": "span",
"text": "TRANSFORM", "text": "TRANSFORM",
"deltas": { "deltas": {
@@ -660,7 +635,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 116, "x": 116,
"y": 672, "y": 656,
"w": 65, "w": 65,
"h": 13 "h": 13
}, },
@@ -674,7 +649,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)",
"tag": "span", "tag": "span",
"text": "Remove background", "text": "Remove background",
"deltas": { "deltas": {
@@ -685,7 +660,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 189, "x": 189,
"y": 669, "y": 653,
"w": 153, "w": 153,
"h": 19 "h": 19
}, },
@@ -699,7 +674,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "03", "text": "03",
"deltas": { "deltas": {
@@ -710,7 +685,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 95, "x": 95,
"y": 786, "y": 769,
"w": 13, "w": 13,
"h": 14 "h": 14
}, },
@@ -724,7 +699,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)",
"tag": "span", "tag": "span",
"text": "STYLE", "text": "STYLE",
"deltas": { "deltas": {
@@ -735,7 +710,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 116, "x": 116,
"y": 786, "y": 770,
"w": 36, "w": 36,
"h": 13 "h": 13
}, },
@@ -749,7 +724,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)",
"tag": "span", "tag": "span",
"text": "Add outline", "text": "Add outline",
"deltas": { "deltas": {
@@ -760,7 +735,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 160, "x": 160,
"y": 783, "y": 767,
"w": 99, "w": 99,
"h": 19 "h": 19
}, },
@@ -774,7 +749,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "04", "text": "04",
"deltas": { "deltas": {
@@ -785,7 +760,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 95, "x": 95,
"y": 948, "y": 911,
"w": 13, "w": 13,
"h": 14 "h": 14
}, },
@@ -799,7 +774,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)",
"tag": "span", "tag": "span",
"text": "Round corners", "text": "Round corners",
"deltas": { "deltas": {
@@ -810,7 +785,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 160, "x": 160,
"y": 945, "y": 909,
"w": 117, "w": 117,
"h": 19 "h": 19
}, },
@@ -824,7 +799,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "Preserve aspect ratio", "text": "Preserve aspect ratio",
"deltas": { "deltas": {
@@ -843,7 +818,7 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 399, "x": 399,
"y": 1032, "y": 986,
"w": 129, "w": 129,
"h": 18 "h": 18
}, },
@@ -857,16 +832,32 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "PIPELINE OUTPUTS", "text": "PIPELINE OUTPUTS",
"deltas": { "deltas": {
"fontWeight": {
"ours": "500",
"ref": "400"
},
"letterSpacing": {
"ours": "1px",
"ref": "1.2px"
},
"lineHeight": {
"ours": "12px",
"ref": "normal"
},
"display": {
"ours": "block",
"ref": "inline"
},
"rect": { "rect": {
"ours": { "ours": {
"x": 799, "x": 799,
"y": 177, "y": 178,
"w": 58, "w": 93,
"h": 33 "h": 24
}, },
"ref": { "ref": {
"x": 799, "x": 799,
@@ -878,14 +869,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)",
"tag": "strong", "tag": "strong",
"text": "Visual history", "text": "Visual history",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 799, "x": 799,
"y": 216, "y": 209,
"w": 93, "w": 93,
"h": 36 "h": 36
}, },
@@ -899,7 +890,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "1.2 MB", "text": "1.2 MB",
"deltas": { "deltas": {
@@ -936,7 +927,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "DIMENSIONS", "text": "DIMENSIONS",
"deltas": { "deltas": {
@@ -965,7 +956,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "1200 × 800 px", "text": "1200 × 800 px",
"deltas": { "deltas": {
@@ -990,7 +981,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "FORMAT", "text": "FORMAT",
"deltas": { "deltas": {
@@ -1019,7 +1010,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "PNG-24", "text": "PNG-24",
"deltas": { "deltas": {
@@ -1044,7 +1035,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "SIZE", "text": "SIZE",
"deltas": { "deltas": {
@@ -1073,7 +1064,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "SOURCE", "text": "SOURCE",
"deltas": { "deltas": {
@@ -1088,8 +1079,8 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 806, "x": 806,
"y": 320, "y": 317,
"w": 262, "w": 550,
"h": 13 "h": 13
}, },
"ref": { "ref": {
@@ -1102,14 +1093,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "PNG", "text": "PNG",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 923, "x": 1067,
"y": 499, "y": 496,
"w": 28, "w": 28,
"h": 19 "h": 19
}, },
@@ -1123,14 +1114,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "original.png · 1200 × 800", "text": "original.png · 1200 × 800",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 925, "x": 1213,
"y": 707, "y": 704,
"w": 135, "w": 135,
"h": 11 "h": 11
}, },
@@ -1144,7 +1135,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "STEP 01", "text": "STEP 01",
"deltas": { "deltas": {
@@ -1158,9 +1149,9 @@
}, },
"rect": { "rect": {
"ours": { "ours": {
"x": 1094, "x": 806,
"y": 320, "y": 750,
"w": 262, "w": 550,
"h": 13 "h": 13
}, },
"ref": { "ref": {
@@ -1173,14 +1164,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "gradient applied", "text": "gradient applied",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 1262, "x": 1262,
"y": 707, "y": 1137,
"w": 86, "w": 86,
"h": 11 "h": 11
}, },
@@ -1194,7 +1185,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "STEP 02", "text": "STEP 02",
"deltas": { "deltas": {
@@ -1209,8 +1200,8 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 806, "x": 806,
"y": 753, "y": 1182,
"w": 262, "w": 550,
"h": 13 "h": 13
}, },
"ref": { "ref": {
@@ -1223,14 +1214,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "background removed", "text": "background removed",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 962, "x": 1251,
"y": 1140, "y": 1569,
"w": 97, "w": 97,
"h": 11 "h": 11
}, },
@@ -1244,7 +1235,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "STEP 03", "text": "STEP 03",
"deltas": { "deltas": {
@@ -1258,9 +1249,9 @@
}, },
"rect": { "rect": {
"ours": { "ours": {
"x": 1094, "x": 806,
"y": 753, "y": 1615,
"w": 262, "w": 550,
"h": 13 "h": 13
}, },
"ref": { "ref": {
@@ -1273,14 +1264,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "outline added", "text": "outline added",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 1278, "x": 1278,
"y": 1140, "y": 2002,
"w": 70, "w": 70,
"h": 11 "h": 11
}, },
@@ -1294,7 +1285,7 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)",
"tag": "span", "tag": "span",
"text": "FINAL OUTPUT", "text": "FINAL OUTPUT",
"deltas": { "deltas": {
@@ -1309,8 +1300,8 @@
"rect": { "rect": {
"ours": { "ours": {
"x": 806, "x": 806,
"y": 1185, "y": 2047,
"w": 262, "w": 550,
"h": 13 "h": 13
}, },
"ref": { "ref": {
@@ -1323,14 +1314,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
"tag": "span", "tag": "span",
"text": "ready · PNG-24", "text": "ready · PNG-24",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 984, "x": 1272,
"y": 1572, "y": 2434,
"w": 76, "w": 76,
"h": 11 "h": 11
}, },
@@ -1344,14 +1335,14 @@
} }
}, },
{ {
"path": "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)", "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)",
"tag": "p", "tag": "p",
"text": "Output is generated in-browser. Your fil", "text": "Output is generated in-browser. Your fil",
"deltas": { "deltas": {
"rect": { "rect": {
"ours": { "ours": {
"x": 799, "x": 799,
"y": 1627, "y": 2489,
"w": 565, "w": 565,
"h": 17 "h": 17
}, },
@@ -1374,11 +1365,9 @@
"135°", "135°",
"OPACITY", "OPACITY",
"Automatic subject detection enabled", "Automatic subject detection enabled",
"WIDTH",
"Outline width", "Outline width",
"2px", "2px",
"Outline color", "Outline color",
"RADIUS",
"Corner radius", "Corner radius",
"18px" "18px"
], ],
@@ -1388,6 +1377,7 @@
"Catalog", "Catalog",
"Gradient", "Gradient",
"Background remover", "Background remover",
"COLOR",
"135\n °", "135\n °",
"100%", "100%",
"2\n px", "2\n px",
@@ -1398,8 +1388,8 @@
"counts": { "counts": {
"tokenLight": 10, "tokenLight": 10,
"tokenDark": 16, "tokenDark": 16,
"elements": 47, "elements": 46,
"onlyOurs": 15, "onlyOurs": 13,
"onlyRef": 11 "onlyRef": 12
} }
} }
web/audit/audit-report.md
+88 -89
View File
@@ -2,14 +2,14 @@
vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
_2026-08-28T11:41:19.954Z_ _2026-08-28T11:58:18.224Z_
## Сводка ## Сводка
- Токены light: **10** расх. - Токены light: **10** расх.
- Токены dark: **16** расх. - Токены dark: **16** расх.
- Элементы (стиль/геометрия): **47** расх. - Элементы (стиль/геометрия): **46** расх.
- Только у нас: 15, только в рефе: 11 - Только у нас: 13, только в рефе: 12
## Токены — Light ## Токены — Light
@@ -47,9 +47,9 @@ _2026-08-28T11:41:19.954Z_
| `--radius-lg` | — | .5rem | | `--radius-lg` | — | .5rem |
| `--text-sm` | — | .875rem | | `--text-sm` | — | .875rem |
## Расхождения элементов (топ 47) ## Расхождения элементов (топ 46)
### `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)` — "/" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
- **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif` - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif`
- **fontSize**: `10px` → `16px` - **fontSize**: `10px` → `16px`
- **color**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)` - **color**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)`
@@ -57,150 +57,156 @@ _2026-08-28T11:41:19.954Z_
- **letterSpacing**: `1.2px` → `normal` - **letterSpacing**: `1.2px` → `normal`
- **lineHeight**: `normal` → `24px` - **lineHeight**: `normal` → `24px`
- **display**: `inline` → `block` - **display**: `inline` → `block`
- **rect**: `173,124 7x13` → `1348,20 4x24` - **rect**: `165,124 7x13` → `1348,20 4x24`
### `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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
- **fontWeight**: `500` → `400` - **fontWeight**: `500` → `400`
- **margin**: `0px` → `0px 0px 8px` - **letterSpacing**: `1px` → `1.2px`
- **letterSpacing**: `1px` → `0.8px`
- **lineHeight**: `12px` → `normal` - **lineHeight**: `12px` → `normal`
- **display**: `block` → `flex` - **display**: `block` → `inline`
- **rect**: `71,575 203x12` → `143,546 189x12` - **rect**: `58,428 154x12` → `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(2)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
- **fontWeight**: `500` → `400`
- **letterSpacing**: `1px` → `1.2px`
- **lineHeight**: `12px` → `normal`
- **display**: `block` → `inline`
- **rect**: `799,178 93x24` → `799,188 54x36`
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
- **fontSize**: `10px` → `11px` - **fontSize**: `10px` → `11px`
- **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)` - **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
- **margin**: `0px` → `5px 0px 0px` - **margin**: `0px` → `5px 0px 0px`
- **display**: `inline` → `block` - **display**: `inline` → `block`
- **rect**: `1090,240 36x13` → `1246,291 79x13` - **rect**: `1090,240 36x13` → `1246,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(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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>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"
- **padding**: `0px 11.2px` → `0px` - **padding**: `0px 11.2px` → `0px`
- **letterSpacing**: `0.6px` → `normal` - **letterSpacing**: `0.6px` → `normal`
- **display**: `flex` → `block` - **display**: `flex` → `block`
- **rect**: `491,596 42x30` → `520,567 46x30` - **rect**: `491,590 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>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"
- **padding**: `0px 11.2px` → `0px` - **padding**: `0px 11.2px` → `0px`
- **letterSpacing**: `0.6px` → `normal` - **letterSpacing**: `0.6px` → `normal`
- **display**: `flex` → `block` - **display**: `flex` → `block`
- **rect**: `533,596 37x30` → `566,567 46x30` - **rect**: `533,590 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>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"
- **padding**: `0px 11.2px` → `0px` - **padding**: `0px 11.2px` → `0px`
- **letterSpacing**: `0.6px` → `normal` - **letterSpacing**: `0.6px` → `normal`
- **display**: `flex` → `block` - **display**: `flex` → `block`
- **rect**: `569,596 37x30` → `612,567 46x30` - **rect**: `569,590 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>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"
- **padding**: `0px 11.2px` → `0px` - **padding**: `0px 11.2px` → `0px`
- **letterSpacing**: `0.6px` → `normal` - **letterSpacing**: `0.6px` → `normal`
- **display**: `flex` → `block` - **display**: `flex` → `block`
- **rect**: `606,596 37x30` → `658,567 46x30` - **rect**: `606,590 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
- **fontSize**: `13.6px` → `16px` - **fontSize**: `13.6px` → `16px`
- **lineHeight**: `normal` → `24px` - **lineHeight**: `normal` → `24px`
- **display**: `block` → `inline` - **display**: `block` → `inline`
- **rect**: `399,1032 129x18` → `432,1021 156x17` - **rect**: `399,986 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `1px` → `normal` - **letterSpacing**: `1px` → `normal`
- **rect**: `1150,215 70x13` → `1073,271 79x10` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `1px` → `normal` - **letterSpacing**: `1px` → `normal`
- **rect**: `1150,239 42x13` → `1159,271 79x10` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `1px` → `normal` - **letterSpacing**: `1px` → `normal`
- **rect**: `1150,264 28x13` → `1246,271 79x10` - **rect**: `1150,264 28x13` → `1246,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(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `0.8px` → `normal` - **letterSpacing**: `0.8px` → `normal`
- **rect**: `806,320 262x13` → `808,663 30x10` - **rect**: `806,317 550x13` → `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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `0.8px` → `normal` - **letterSpacing**: `0.8px` → `normal`
- **rect**: `1094,320 262x13` → `1096,663 35x10` - **rect**: `806,750 550x13` → `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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `0.8px` → `normal` - **letterSpacing**: `0.8px` → `normal`
- **rect**: `806,753 262x13` → `808,1021 35x10` - **rect**: `806,1182 550x13` → `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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `0.8px` → `normal` - **letterSpacing**: `0.8px` → `normal`
- **rect**: `1094,753 262x13` → `1096,1021 35x10` - **rect**: `806,1615 550x13` → `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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT"
- **fontSize**: `10px` → `9px` - **fontSize**: `10px` → `9px`
- **letterSpacing**: `0.8px` → `normal` - **letterSpacing**: `0.8px` → `normal`
- **rect**: `806,1185 262x13` → `808,1378 59x10` - **rect**: `806,2047 550x13` → `808,1378 59x10`
### `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" ### `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"
- **letterSpacing**: `0.6px` → `normal` - **letterSpacing**: `0.6px` → `normal`
- **rect**: `1349,19 32x25` → `1352,20 29x24` - **rect**: `1349,19 32x25` → `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(2)>div:nth-child(1)>h1:nth-child(1)` — "Build your image pipeline." ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)` — "Build your image pipeline."
- **lineHeight**: `normal` → `57.6px` - **lineHeight**: `normal` → `57.6px`
- **rect**: `58,155 474x150` → `58,154 482x115` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
- **padding**: `0px` → `17px 0px 0px 15px` - **padding**: `0px` → `17px 0px 0px 15px`
- **rect**: `95,510 13x14` → `59,466 46x150` - **rect**: `95,504 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
- **display**: `block` → `inline` - **display**: `block` → `inline`
- **rect**: `116,510 72x13` → `143,489 67x12` - **rect**: `116,504 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
- **margin**: `0px` → `5px 0px 18px` - **margin**: `0px` → `5px 0px 18px`
- **rect**: `196,507 171x19` → `143,510 157x18` - **rect**: `196,501 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
- **padding**: `0px` → `17px 0px 0px 15px` - **padding**: `0px` → `17px 0px 0px 15px`
- **rect**: `95,672 13x14` → `59,628 46x136` - **rect**: `95,655 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
- **display**: `block` → `inline` - **display**: `block` → `inline`
- **rect**: `116,672 65x13` → `143,651 60x12` - **rect**: `116,656 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
- **margin**: `0px` → `5px 0px 18px` - **margin**: `0px` → `5px 0px 18px`
- **rect**: `189,669 153x19` → `143,672 140x18` - **rect**: `189,653 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
- **padding**: `0px` → `17px 0px 0px 15px` - **padding**: `0px` → `17px 0px 0px 15px`
- **rect**: `95,786 13x14` → `59,776 46x150` - **rect**: `95,769 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
- **display**: `block` → `inline` - **display**: `block` → `inline`
- **rect**: `116,786 36x13` → `143,799 34x12` - **rect**: `116,770 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
- **margin**: `0px` → `5px 0px 18px` - **margin**: `0px` → `5px 0px 18px`
- **rect**: `160,783 99x19` → `143,820 91x18` - **rect**: `160,767 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
- **padding**: `0px` → `17px 0px 0px 15px` - **padding**: `0px` → `17px 0px 0px 15px`
- **rect**: `95,948 13x14` → `59,938 46x142` - **rect**: `95,911 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
- **margin**: `0px` → `5px 0px 18px` - **margin**: `0px` → `5px 0px 18px`
- **rect**: `160,945 117x19` → `143,982 107x18` - **rect**: `160,909 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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
- **margin**: `0px` → `5px 0px 0px` - **margin**: `0px` → `5px 0px 0px`
- **rect**: `1236,214 86x14` → `1073,291 79x13` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
- **margin**: `0px` → `5px 0px 0px` - **margin**: `0px` → `5px 0px 0px`
- **rect**: `1282,238 40x14` → `1159,291 79x13` - **rect**: `1282,238 40x14` → `1159,291 79x13`
@@ -210,47 +216,41 @@ _2026-08-28T11:41:19.954Z_
### `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" ### `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"
- **letterSpacing**: `0.6px` → `normal` - **letterSpacing**: `0.6px` → `normal`
### `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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)` — "Chain simple tools together. Every chang"
- **rect**: `58,321 474x51` → `58,285 482x51` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)` — "source.png"
- **rect**: `597,347 66x14` → `606,311 60x13` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB"
- **rect**: `671,347 40x14` → `674,311 36x13` - **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" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
- **rect**: `58,434 137x13` → `58,400 127x12` - **rect**: `175,451 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(1)>div:nth-child(3)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
- **rect**: `184,457 36x13` → `173,425 33x12` - **rect**: `799,209 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(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>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"
- **rect**: `799,177 58x33` → `799,188 54x36` - **rect**: `1067,496 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(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "original.png · 1200 × 800"
- **rect**: `799,216 93x36` → `799,233 87x34` - **rect**: `1213,704 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(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied"
- **rect**: `923,499 28x19` → `923,478 27x18` - **rect**: `1262,1137 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(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "original.png · 1200 × 800" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed"
- **rect**: `925,707 135x11` → `942,663 124x10` - **rect**: `1251,1569 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(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added"
- **rect**: `1262,707 86x11` → `1275,663 79x10` - **rect**: `1278,2002 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(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "ready · PNG-24"
- **rect**: `962,1140 97x11` → `977,1021 89x10` - **rect**: `1272,2434 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)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added" ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
- **rect**: `1278,1140 70x11` → `1290,1021 64x10` - **rect**: `799,2489 565x17` → `799,1425 565x17`
### `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"
- **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"
- **rect**: `799,1627 565x17` → `799,1425 565x17`
## Только у нас (структурно) ## Только у нас (структурно)
@@ -262,11 +262,9 @@ _2026-08-28T11:41:19.954Z_
- `135°` - `135°`
- `OPACITY` - `OPACITY`
- `Automatic subject detection enabled` - `Automatic subject detection enabled`
- `WIDTH`
- `Outline width` - `Outline width`
- `2px` - `2px`
- `Outline color` - `Outline color`
- `RADIUS`
- `Corner radius` - `Corner radius`
- `18px` - `18px`
@@ -278,6 +276,7 @@ _2026-08-28T11:41:19.954Z_
- `Catalog` - `Catalog`
- `Gradient` - `Gradient`
- `Background remover` - `Background remover`
- `COLOR`
- `135 - `135
°` °`
- `100%` - `100%`
web/src/routes/preview/demo/+page.svelte
+112 -306
View File
@@ -1,18 +1,23 @@
<script lang="ts"> <script lang="ts">
import { Upload, Settings2, RotateCcw, ChevronDown } from "@lucide/svelte"; import { Settings2, ChevronDown } from "@lucide/svelte";
import WorkspaceLayout from "$lib/components/kit/WorkspaceLayout.svelte";
import WorkspaceHeader from "./WorkspaceHeader.svelte";
import SectionLabel from "$lib/components/kit/SectionLabel.svelte";
import StepCard from "$lib/components/kit/StepCard.svelte"; import StepCard from "$lib/components/kit/StepCard.svelte";
import Segmented from "$lib/components/kit/Segmented.svelte";
import SliderField from "$lib/components/kit/SliderField.svelte";
import ColorField from "$lib/components/kit/ColorField.svelte";
import Toggle from "$lib/components/kit/Toggle.svelte";
import IconButton from "$lib/components/kit/IconButton.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import Badge from "$lib/components/kit/Badge.svelte"; import Badge from "$lib/components/kit/Badge.svelte";
import StatusDot from "$lib/components/kit/StatusDot.svelte"; import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
import MonoLabel from "$lib/components/kit/MonoLabel.svelte"; import MonoLabel from "$lib/components/kit/MonoLabel.svelte";
import MetaList from "$lib/components/kit/MetaList.svelte"; import ColorField from "$lib/components/kit/ColorField.svelte";
import SliderField from "$lib/components/kit/SliderField.svelte";
import Segmented from "$lib/components/kit/Segmented.svelte";
import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
import PreviewTile from "$lib/components/kit/PreviewTile.svelte"; import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte"; import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import MetaList from "$lib/components/kit/MetaList.svelte";
import IconButton from "$lib/components/kit/IconButton.svelte";
import PipelineFooter from "$lib/components/kit/PipelineFooter.svelte";
let gradColor = $state("#DCEBFF"); let gradColor = $state("#DCEBFF");
let direction = $state(135); let direction = $state(135);
@@ -56,31 +61,28 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
</svelte:head> </svelte:head>
<div class="page-grid"> <WorkspaceLayout
<section class="workspace"> columns="minmax(0, 1.05fr) minmax(520px, 0.95fr)"
<div class="eyebrow">PNG PROCESSING <span>/</span> WORKSPACE</div> gap="56px"
<div class="title-row"> padding="60px clamp(24px, 4vw, 72px) 72px"
<div> maxWidth="none"
<h1>Build your image pipeline.</h1> stickyTop="24px"
<p class="lede"> padMobile="36px 16px 48px"
Chain simple tools together. Every change is processed automatically >
and previewed at each stage. {#snippet settings()}
</p> <WorkspaceHeader
</div> eyebrowA="PNG PROCESSING"
<div class="file-chip"> eyebrowB="WORKSPACE"
<Upload size={15} /> title="Build your image pipeline."
<span>source.png</span> lede="Chain simple tools together. Every change is processed automatically and previewed at each stage."
<b>1.8 MB</b> file={{ name: "source.png", size: "1.8 MB" }}
</div> />
</div>
<div class="pipeline-head"> <SectionLabel label="PROCESSING PIPELINE" title="4 active steps" meta="• LIVE">
<div> {#snippet actions()}
<span class="label">PROCESSING PIPELINE</span> <button class="add-btn" onclick={() => {}}>+ Add tool</button>
<strong>4 active steps <em>• LIVE</em></strong> {/snippet}
</div> </SectionLabel>
<button class="add-btn" onclick={() => {}}>+ Add tool</button>
</div>
<div class="steps-list"> <div class="steps-list">
<StepCard <StepCard
@@ -90,11 +92,8 @@
onremove={() => {}} onremove={() => {}}
> >
<div class="step-tools"><Badge tone="success">AUTO</Badge></div> <div class="step-tools"><Badge tone="success">AUTO</Badge></div>
<div class="controls"> <FieldGrid>
<div class="control-block"> <ColorField label="Gradient color" bind:value={gradColor} />
<MonoLabel>COLOR</MonoLabel>
<ColorField label="Gradient color" bind:value={gradColor} />
</div>
<SliderField <SliderField
label="DIRECTION" label="DIRECTION"
bind:value={direction} bind:value={direction}
@@ -114,7 +113,7 @@
]} ]}
/> />
</div> </div>
</div> </FieldGrid>
</StepCard> </StepCard>
<StepCard <StepCard
@@ -129,22 +128,16 @@
<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}> <StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
<div class="step-tools"><Badge tone="success">AUTO</Badge></div> <div class="step-tools"><Badge tone="success">AUTO</Badge></div>
<div class="controls compact"> <FieldGrid compact>
<div class="control-block"> <SliderField
<MonoLabel>WIDTH</MonoLabel> label="Outline width"
<SliderField bind:value={outlineWidth}
label="Outline width" min={0}
bind:value={outlineWidth} max={8}
min={0} suffix="px"
max={8} />
suffix="px" <ColorField label="Outline color" bind:value={outlineColor} />
/> </FieldGrid>
</div>
<div class="control-block">
<MonoLabel>COLOR</MonoLabel>
<ColorField label="Outline color" bind:value={outlineColor} />
</div>
</div>
</StepCard> </StepCard>
<StepCard <StepCard
@@ -154,177 +147,79 @@
onremove={() => {}} onremove={() => {}}
> >
<div class="step-tools"><Badge tone="success">AUTO</Badge></div> <div class="step-tools"><Badge tone="success">AUTO</Badge></div>
<div class="controls compact"> <FieldGrid compact>
<div class="control-block"> <SliderField
<MonoLabel>RADIUS</MonoLabel> label="Corner radius"
<SliderField bind:value={radius}
label="Corner radius" min={0}
bind:value={radius} max={48}
min={0} suffix="px"
max={48} />
suffix="px" <ToggleRow label="Preserve aspect ratio" bind:checked={preserveAspect} />
/> </FieldGrid>
</div>
<label class="toggle-row">
<span>Preserve aspect ratio</span>
<Toggle
bind:checked={preserveAspect}
label="Preserve aspect ratio"
/>
</label>
</div>
</StepCard> </StepCard>
</div> </div>
<div class="pipeline-footer"> <PipelineFooter onreset={() => {}} />
<button class="reset-btn" onclick={() => {}}> {/snippet}
<RotateCcw size={14} /> Reset pipeline
</button>
<span class="auto-note"
><StatusDot /> changes are applied automatically</span
>
</div>
</section>
<section class="preview-panel"> {#snippet preview()}
<div class="preview-top"> <div class="preview-panel">
<div> <SectionLabel label="PIPELINE OUTPUTS" title="Visual history">
<span class="label">PIPELINE OUTPUTS</span> {#snippet actions()}
<strong>Visual history</strong> <button class="history-toggle" onclick={() => {}}>
</div> Hide intermediate <ChevronDown size={15} />
<div class="preview-actions"> </button>
<button class="history-toggle" onclick={() => {}}> <DownloadButton
Hide intermediate <ChevronDown size={15} /> label="Download result"
</button> size="1.2 MB"
<DownloadButton onclick={() => {}}
label="Download result" />
size="1.2 MB" <MetaList
onclick={() => {}} items={[
/> { caption: "DIMENSIONS", value: "1200 × 800 px" },
<MetaList { caption: "FORMAT", value: "PNG-24" },
items={[ { caption: "SIZE", value: "1.2 MB" },
{ caption: "DIMENSIONS", value: "1200 × 800 px" }, ]}
{ caption: "FORMAT", value: "PNG-24" }, />
{ caption: "SIZE", value: "1.2 MB" }, <IconButton
]} icon={Settings2}
/> label="Preview settings"
<IconButton onclick={() => {}}
icon={Settings2} />
label="Preview settings" {/snippet}
onclick={() => {}} </SectionLabel>
/>
</div>
</div>
<div class="preview-stack"> <PreviewStack pad="16px 0">
{#each previewTiles as tile (tile.label)} {#each previewTiles as tile (tile.label)}
<PreviewTile label={tile.label}> <PreviewTile label={tile.label}>
<CheckerCanvas size="large"> <CheckerCanvas size="large">
<div <div
class="ph" class="ph"
class:active={tile.active} class:active={tile.active}
style="background:{tile.bg}; border-radius:{tile.radius ?? style="background:{tile.bg}; border-radius:{tile.radius ??
'0'}; box-shadow:{tile.ring ?? 'none'};" '0'}; box-shadow:{tile.ring ?? 'none'};"
> >
<span class="sample-icon">PNG</span> <span class="sample-icon">PNG</span>
<span>easy-png-tools</span> <span>easy-png-tools</span>
</div>
</CheckerCanvas>
<div class="tile-label-wrap">
<span class="tile-label">{tile.label}</span>
<span class="tile-caption">{tile.caption}</span>
</div> </div>
</CheckerCanvas> </PreviewTile>
<div class="tile-label-wrap"> {/each}
<span class="tile-label">{tile.label}</span> </PreviewStack>
<span class="tile-caption">{tile.caption}</span>
</div>
</PreviewTile>
{/each}
</div>
<p class="preview-note"> <p class="preview-note">
Output is generated in-browser. Your files never leave this device. Output is generated in-browser. Your files never leave this device.
</p> </p>
</section> </div>
</div> {/snippet}
</WorkspaceLayout>
<style> <style>
.page-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
align-items: start;
gap: 56px;
max-width: none;
margin: auto;
padding: 60px clamp(24px, 4vw, 72px) 72px;
}
.workspace {
min-width: 0;
}
.eyebrow {
font: 10px var(--font-mono);
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 18px;
}
.eyebrow span {
margin: 0 7px;
color: var(--blue);
}
.title-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 30px;
margin-bottom: 56px;
}
h1 {
margin: 0 0 16px;
font-size: clamp(36px, 4vw, 64px);
font-weight: 650;
letter-spacing: -0.06em;
color: var(--foreground);
}
.lede {
margin: 0;
max-width: 550px;
color: var(--muted);
line-height: 1.6;
}
.file-chip {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
border: 1px solid var(--line);
background: var(--panel);
font: 11px var(--font-mono);
color: var(--muted);
padding: 10px 12px;
}
.file-chip b {
color: var(--blue);
font-weight: 500;
}
.pipeline-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line);
padding-bottom: 12px;
}
.label {
font: 10px var(--font-mono);
letter-spacing: 0.12em;
color: var(--muted);
}
.pipeline-head strong {
display: block;
margin-top: 5px;
font: 600 14px var(--font-mono);
color: var(--foreground);
}
.pipeline-head em {
color: #25a96a;
font-style: normal;
font-size: 10px;
}
.add-btn { .add-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -345,14 +240,6 @@
gap: 8px; gap: 8px;
align-items: center; align-items: center;
} }
.controls {
display: grid;
grid-template-columns: 1.1fr 1fr 1.2fr;
gap: 16px;
}
.controls.compact {
grid-template-columns: 1fr 1fr;
}
.control-block { .control-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -365,66 +252,12 @@
color: var(--muted); color: var(--muted);
font: 11px var(--font-mono); font: 11px var(--font-mono);
} }
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
color: var(--foreground);
font-size: 0.85rem;
cursor: pointer;
}
.pipeline-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 18px;
}
.reset-btn {
display: flex;
align-items: center;
gap: 7px;
color: var(--blue);
background: none;
border: 0;
cursor: pointer;
font-size: 12px;
}
.auto-note {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
font: 11px var(--font-mono);
}
.preview-panel { .preview-panel {
position: sticky;
top: 24px;
border: 1px solid var(--line); border: 1px solid var(--line);
background: var(--panel); background: var(--panel);
padding: 18px; padding: 18px;
min-width: 0; min-width: 0;
} }
.preview-top {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line);
padding-bottom: 15px;
gap: 16px;
}
.preview-top strong {
display: block;
margin-top: 5px;
font: 600 14px var(--font-mono);
}
.preview-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.history-toggle { .history-toggle {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -444,12 +277,6 @@
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
} }
.preview-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 16px 0;
}
.ph { .ph {
width: 80%; width: 80%;
aspect-ratio: 1.35; aspect-ratio: 1.35;
@@ -489,25 +316,4 @@
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
} }
@media (max-width: 800px) {
.page-grid {
grid-template-columns: 1fr;
gap: 24px;
padding: 36px 16px 48px;
}
.title-row {
flex-direction: column;
align-items: flex-start;
}
.preview-panel {
position: static;
}
.controls,
.controls.compact {
grid-template-columns: 1fr;
}
.preview-stack {
grid-template-columns: 1fr;
}
}
</style> </style>
web/src/routes/preview/tools/[id]/+page.svelte
+40 -231
View File
@@ -6,30 +6,14 @@
defaultParams, defaultParams,
isChainable, isChainable,
TOOLS, TOOLS,
type ParamDef,
} from "$lib/registry"; } from "$lib/registry";
import { encode, downloadBlob, toDataUrl, decodeBytes } from "$lib/core/io"; import { encode, downloadBlob, toDataUrl, decodeBytes } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types"; import type { PixelImage } from "$lib/core/types";
import Panel from "$lib/components/kit/Panel.svelte"; import WorkspaceLayout from "$lib/components/kit/WorkspaceLayout.svelte";
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
import ColorField from "$lib/components/kit/ColorField.svelte";
import SliderField from "$lib/components/kit/SliderField.svelte";
import SelectField from "$lib/components/kit/SelectField.svelte";
import Toggle from "$lib/components/kit/Toggle.svelte";
import TextField from "$lib/components/kit/TextField.svelte";
import NumberField from "$lib/components/kit/NumberField.svelte";
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
import MetaList from "$lib/components/kit/MetaList.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import Badge from "$lib/components/kit/Badge.svelte";
import StatusLine from "$lib/components/kit/StatusLine.svelte";
import EmptyState from "$lib/components/kit/EmptyState.svelte"; import EmptyState from "$lib/components/kit/EmptyState.svelte";
import Button from "$lib/components/kit/Button.svelte";
import Dropzone from "$lib/components/kit/Dropzone.svelte";
import StepCard from "$lib/components/kit/StepCard.svelte";
import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
import { SlidersHorizontal as ToolIcon } from "@lucide/svelte"; import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
import SettingsPanel from "./SettingsPanel.svelte";
import PreviewPanel from "./PreviewPanel.svelte";
type ParamValue = string | number | boolean; type ParamValue = string | number | boolean;
@@ -221,59 +205,8 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
</svelte:head> </svelte:head>
{#snippet control(
p: ParamDef,
value: ParamValue,
onInput: (v: ParamValue) => void,
)}
{#if p.type === "color"}
<ColorField
label={p.label}
value={value as string}
oninput={(v) => onInput(v)}
/>
{:else if p.type === "slider"}
<SliderField
label={p.label}
value={value as number}
min={p.min}
max={p.max}
step={p.step}
oninput={(v) => onInput(v)}
/>
{:else if p.type === "select"}
<SelectField
label={p.label}
value={value as string}
options={p.options}
onchange={(v) => onInput(v)}
/>
{:else if p.type === "checkbox"}
<label class="toggle-row"
><span>{p.label}</span>
<Toggle checked={value as boolean} onchange={(v) => onInput(v)} /></label
>
{:else if p.type === "text"}
<TextField
label={p.label}
value={value as string}
placeholder={p.placeholder}
oninput={(v) => onInput(v)}
/>
{:else if p.type === "number"}
<NumberField
label={p.label}
value={value as number}
min={p.min}
max={p.max}
step={p.step}
oninput={(v) => onInput(v)}
/>
{/if}
{/snippet}
{#if !firstTool} {#if !firstTool}
<div class="tool-grid"> <div class="notfound">
<EmptyState <EmptyState
title="Tool not found" title="Tool not found"
description="No tool is registered under “{data.id}”." description="No tool is registered under “{data.id}”."
@@ -281,171 +214,47 @@
/> />
</div> </div>
{:else} {:else}
<div class="tool-grid"> <WorkspaceLayout
<section class="pipeline-panel"> columns="minmax(0, 1fr) minmax(0, 1.1fr)"
<Panel> gap="40px"
<PanelHeading title="Pipeline" eyebrow="STEPS"> padding="48px clamp(24px, 4vw, 72px) 72px"
{#snippet actions()} maxWidth="1680px"
<Badge tone="accent">AUTO</Badge> stickyTop="84px"
{/snippet} padMobile="32px 16px 48px"
</PanelHeading> >
<div class="pipeline-body"> {#snippet settings()}
{#if steps.length === 0} <SettingsPanel
<EmptyState {steps}
title="Pipeline empty" {chainOptions}
description="Add a tool step below." {addId}
/> onAddStep={addStep}
{/if} onSetAddId={(v) => (addId = v)}
{#each steps as step, i (step.toolId + i)} onRemoveStep={removeStep}
{@const st = getTool(step.toolId)} onSetParam={setStepParam}
<StepCard />
index={i + 1} {/snippet}
title={st?.title ?? step.toolId} {#snippet preview()}
type={st?.category} <PreviewPanel
onremove={() => removeStep(i)} {needsSource}
> {sourceImg}
{#if st} {sourceUrl}
<div class="step-controls"> {stepOutputs}
{#each st.params as p (p.id)} {resultUrl}
{@render control(p, step.params[p.id] as ParamValue, (v) => {resultMeta}
setStepParam(i, p.id, v), {processing}
)} {chainError}
{/each} onFile={onFile}
</div> onClearSource={clearSource}
{/if} onDownload={downloadResult}
</StepCard> />
{/each} {/snippet}
</div> </WorkspaceLayout>
<SettingsFooter>
<div class="add-step">
<SelectField
label="Add step"
value={addId}
options={chainOptions}
onchange={(v) => (addId = v)}
/>
<Button variant="ghost" onclick={addStep}>Add step</Button>
</div>
</SettingsFooter>
</Panel>
</section>
<section class="preview-panel">
<Panel>
<PanelHeading title="Pipeline output" eyebrow="RESULT">
{#snippet actions()}
{#if resultUrl}
<DownloadButton
label="Download result"
onclick={downloadResult}
/>
{/if}
{/snippet}
</PanelHeading>
<div class="preview-body">
{#if chainError}
<EmptyState title="Pipeline failed" description={chainError} />
{/if}
{#if needsSource && !sourceImg}
<Dropzone onfile={onFile} />
{:else if needsSource && sourceImg}
<Button variant="ghost" onclick={clearSource}>Change image</Button>
{/if}
<div class="preview-stack">
{#if needsSource && sourceImg}
<PreviewTile label="SOURCE">
<CheckerCanvas size="sm">
<img class="tile-img" src={sourceUrl} alt="source" />
</CheckerCanvas>
</PreviewTile>
{/if}
{#each stepOutputs as out, i (out.toolId + i)}
<PreviewTile label={`STEP ${String(i + 1).padStart(2, "0")}`}>
<CheckerCanvas size="sm">
<img class="tile-img" src={out.url} alt={out.title} />
</CheckerCanvas>
</PreviewTile>
{/each}
</div>
{#if processing}
<StatusLine label="processing pipeline" />
{/if}
<MetaList items={resultMeta} />
</div>
</Panel>
</section>
</div>
{/if} {/if}
<style> <style>
.tool-grid { .notfound {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: start;
gap: 40px;
max-width: 1680px; max-width: 1680px;
margin: 0 auto; margin: 0 auto;
padding: 48px clamp(24px, 4vw, 72px) 72px; padding: 48px clamp(24px, 4vw, 72px) 72px;
} }
.pipeline-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0.75rem;
}
.step-controls {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: var(--foreground);
font-size: 0.85rem;
cursor: pointer;
}
.add-step {
display: flex;
align-items: flex-end;
gap: 0.75rem;
width: 100%;
}
.add-step :global(.select-field),
.add-step :global(select) {
min-width: 0;
}
.preview-panel {
position: sticky;
top: 84px;
}
.preview-body {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.preview-stack {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.tile-img {
max-width: 100%;
max-height: 220px;
display: block;
border-radius: var(--radius);
}
@media (max-width: 900px) {
.tool-grid {
grid-template-columns: 1fr;
gap: 24px;
padding: 32px 16px 48px;
}
.preview-panel {
position: static;
}
}
</style> </style>