feat: add @layoutit/voxcss-vue

.compare-output/headless.html

@@ -0,0 +1 @@
+<div class="voxcss-floor-z" style="pointer-events: none; --voxcss-floor-base: rgb(182, 182, 197); --voxcss-grid-x: 50px; --voxcss-grid-y: 50px; --voxcss-floor-grid: url(&quot;blob:http://localhost:5199/ce3522ea-c561-4351-a967-1f22c739a03e&quot;);"><div class="voxcss-layer" style="transform: translateZ(0px);"><div class="voxcss-south voxcss-spike" style="grid-area: 7 / 7 / 8 / 8;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(0, 137, 205)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-east voxcss-ramp" style="grid-area: 6 / 7 / 7 / 8;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(208, 44, 125);"></div></div><div class="voxcss-east voxcss-ramp" style="grid-area: 5 / 7 / 6 / 8;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(221, 87, 0);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 4 / 7 / 5 / 8;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 6 / 8 / 7;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(4, 173, 117);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 6 / 7 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(148, 163, 184);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 6 / 6 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(14, 165, 233);"></div></div><div class="voxcss-north voxcss-ramp" style="grid-area: 4 / 6 / 5 / 7;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(224, 60, 141);"></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 5 / 8 / 6;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(237, 103, 10);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 5 / 7 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(250, 204, 21);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 5 / 6 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(16, 185, 129);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 2 / 5 / 3 / 6;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(120, 135, 156)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 4 / 8 / 5;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(2, 153, 221);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 4 / 7 / 5; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><div style="display: none;"></div><div style="display: none;"></div><div style="display: none;"></div><div class="voxcss-east voxcss-ramp" style="grid-area: 3 / 5 / 4 / 6;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(120, 135, 156);"></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 3 / 8 / 4;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(2, 153, 221);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 3 / 7 / 4; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><div style="display: none;"></div><div style="display: none;"></div><div style="display: none;"></div><div class="voxcss-north voxcss-ramp" style="grid-area: 2 / 3 / 3 / 4;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(136, 151, 172);"></div></div><div class="voxcss-west voxcss-spike" style="grid-area: 7 / 2 / 8 / 3;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 6 / 2 / 7 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(244, 80, 161);"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 5 / 2 / 6 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(255, 123, 30);"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 4 / 2 / 5 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(255, 212, 29);"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 3 / 2 / 4 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(24, 193, 137);"></div></div><div class="voxcss-north voxcss-spike" style="grid-area: 2 / 2 / 3 / 3;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-north voxcss-ramp" style="grid-area: 2 / 4 / 3 / 5;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(2, 153, 221);"></div></div><div class="voxcss-east voxcss-wedge" style="grid-area: 4 / 5 / 5 / 6;"><div class="voxcss-wedge-slope voxcss-wedge-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L480 0 L0 480 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-wedge-slope voxcss-wedge-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 480 L0 480 L480 0 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-layer" style="transform: translateZ(50px);"><div class="voxcss-east voxcss-ramp" style="grid-area: 4 / 4 / 5 / 5;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(221, 87, 0);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 3 / 4 / 4 / 5;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 4 / 3 / 5 / 4;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(24, 193, 137);"></div></div><div class="voxcss-north voxcss-spike" style="grid-area: 3 / 3 / 4 / 4;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-spike" style="grid-area: 5 / 3 / 6 / 4;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-spike" style="grid-area: 5 / 4 / 6 / 5;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div></div><div class="voxcss-wall voxcss-wall--backRight" style="width: 400px; height: 300px; transform: rotateX(90deg) translateZ(150px) translateY(150px); background-color: rgb(92, 92, 107); --voxcss-wall-grid: url(&quot;blob:http://localhost:5199/b02f55b5-babb-4258-b8ff-aa353d98e8ea&quot;);"></div><div class="voxcss-wall voxcss-wall--backLeft" style="width: 300px; height: 400px; transform: rotateY(-90deg) translateZ(150px) translateX(150px); background-color: rgb(102, 102, 117); --voxcss-wall-grid: url(&quot;blob:http://localhost:5199/b02f55b5-babb-4258-b8ff-aa353d98e8ea&quot;);"></div>