feat(ribbon): add layer isolation tools

Closes #589
This commit is contained in:
Hakan Seven 2026-07-30 18:07:06 +03:00
commit 02d15f5d23
7 changed files with 81 additions and 7 deletions

View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64" height="64">
<!-- Muted surrounding layers -->
<line x1="2" y1="5" x2="22" y2="5"
stroke="#777777" stroke-width="2.25" stroke-linecap="round"
stroke-dasharray="3 3"/>
<line x1="2" y1="19" x2="22" y2="19"
stroke="#777777" stroke-width="2.25" stroke-linecap="round"
stroke-dasharray="3 3"/>
<!-- The selected layer remains visible -->
<line x1="2" y1="12" x2="22" y2="12"
stroke="#4cc9f0" stroke-width="2.25" stroke-linecap="round"/>
<circle cx="12" cy="12" r="2.5"
fill="#4cc9f0" stroke="#e0e0e0" stroke-width="1.25"/>
<!-- Focus brackets -->
<path d="M6 9V7H9 M15 7H18V9 M18 15V17H15 M9 17H6V15"
fill="none" stroke="#f0c040" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 854 B

View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64" height="64">
<!-- Restored layer stack -->
<line x1="2" y1="5" x2="22" y2="5"
stroke="#e0e0e0" stroke-width="2.25" stroke-linecap="round"/>
<line x1="2" y1="12" x2="22" y2="12"
stroke="#4cc9f0" stroke-width="2.25" stroke-linecap="round"/>
<line x1="2" y1="19" x2="22" y2="19"
stroke="#e0e0e0" stroke-width="2.25" stroke-linecap="round"/>
<!-- Outward arrows indicate restoring the isolated layers -->
<path d="M8 9L5 6L2 9 M16 15L19 18L22 15"
fill="none" stroke="#f0c040" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 671 B