unit.gl 0.1.2 → 0.1.9

package/README.md

@@ -8,12 +8,12 @@
 
 <div align="center">
 
-[![Website](https://img.shields.io/website?url=https%3A%2F%2Fwww.unit.gl&up_message=Up&up_color=354351&down_message=Down&down_color=354351&style=flat-square&logo=Firefox&logoColor=FFFFFF&label=Website&labelColor=354351&color=354351)
+[![Website](https://img.shields.io/website?url=https%3A%2F%2Fwww.unit.gl&up_message=Up&up_color=%23000000&down_message=Down&down_color=%23000000&style=flat-square&logo=Firefox&logoColor=FFFFFF&label=Website&labelColor=%23000000&color=%23000000)
 ](https://www.unit.gl)
-[![NPM Version](https://img.shields.io/npm/v/unit.gl?style=flat-square&logo=npm&logoColor=FFFFFF&label=NPM&labelColor=354351&color=354351&link=https%3A%2F%2Fwww.npmjs.com%2Funitage%2Funit.gl)](https://www.npmjs.com/unit.gl)
-[![devContainer](https://img.shields.io/badge/devContainer-23354351?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23354351&color=%23354351)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/unit.gl)
-[![StackBlitz](https://img.shields.io/badge/StackBlitz-23354351?style=flat-square&logo=StackBlitz&logoColor=%23FFFFFF&labelColor=%23354351&color=%23354351)](https://stackblitz.com/github/stylescape/unit.gl/tree/main?file=src%2Findex.html)
-[![GitHub License](https://img.shields.io/github/license/stylescape/unit.gl?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23354351&color=%23354351&link=LICENSE)](https://github.com/stylescape/unit.gl/blob/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/unit.gl?style=flat-square&logo=npm&logoColor=FFFFFF&label=NPM&labelColor=%23000000&color=%23000000&link=https%3A%2F%2Fwww.npmjs.com%2Funitage%2Funit.gl)](https://www.npmjs.com/unit.gl)
+[![devContainer](https://img.shields.io/badge/devContainer-23354351?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23000000&color=%23000000)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/unit.gl)
+[![StackBlitz](https://img.shields.io/badge/StackBlitz-23354351?style=flat-square&logo=StackBlitz&logoColor=%23FFFFFF&labelColor=%23000000&color=%23000000)](https://stackblitz.com/github/stylescape/unit.gl/tree/main?file=src%2Findex.html)
+[![GitHub License](https://img.shields.io/github/license/stylescape/unit.gl?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23000000&color=%23000000&link=LICENSE)](https://github.com/stylescape/unit.gl/blob/main/LICENSE)
 
 </div>
 

package/css/unit.gl.css

@@ -149,211 +149,342 @@ main {
 }
 
 .ratio_1x1 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 1;
+}
+.ratio_1x1::before {
+  content: "";
+  display: block;
+  padding-top: calc(1 / 1 * 100%);
+}
+.ratio_1x1 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_1x2 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 0.5;
+}
+.ratio_1x2::before {
+  content: "";
+  display: block;
+  padding-top: calc(2 / 1 * 100%);
+}
+.ratio_1x2 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_2x1 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 2;
+}
+.ratio_2x1::before {
+  content: "";
+  display: block;
+  padding-top: calc(1 / 2 * 100%);
+}
+.ratio_2x1 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_1x3 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 0.3333333333;
+}
+.ratio_1x3::before {
+  content: "";
+  display: block;
+  padding-top: calc(3 / 1 * 100%);
+}
+.ratio_1x3 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_3x1 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 3;
+}
+.ratio_3x1::before {
+  content: "";
+  display: block;
+  padding-top: calc(1 / 3 * 100%);
+}
+.ratio_3x1 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_1x4 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 0.25;
+}
+.ratio_1x4::before {
+  content: "";
+  display: block;
+  padding-top: calc(4 / 1 * 100%);
+}
+.ratio_1x4 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_4x1 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 4;
+}
+.ratio_4x1::before {
+  content: "";
+  display: block;
+  padding-top: calc(1 / 4 * 100%);
+}
+.ratio_4x1 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_3x2 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 1.5;
+}
+.ratio_3x2::before {
+  content: "";
+  display: block;
+  padding-top: calc(2 / 3 * 100%);
+}
+.ratio_3x2 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_2x3 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 0.6666666667;
+}
+.ratio_2x3::before {
+  content: "";
+  display: block;
+  padding-top: calc(3 / 2 * 100%);
+}
+.ratio_2x3 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_4x3 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 1.3333333333;
+}
+.ratio_4x3::before {
+  content: "";
+  display: block;
+  padding-top: calc(3 / 4 * 100%);
+}
+.ratio_4x3 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_3x4 {
+  position: relative;
+  width: 100%;
   aspect-ratio: 0.75;
+}
+.ratio_3x4::before {
+  content: "";
+  display: block;
+  padding-top: calc(4 / 3 * 100%);
+}
+.ratio_3x4 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
 .ratio_16x9 {
-  aspect-ratio: 1.7777777778;
-  width: 100%;
   position: relative;
-  overflow: hidden;
-  display: inline-block;
-}
-
-.ratio_16x10 {
-  aspect-ratio: 1.6;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  aspect-ratio: 1.7777777778;
 }
-
-.ratio_p_1x1 {
-  padding-bottom: 100%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+.ratio_16x9::before {
+  content: "";
+  display: block;
+  padding-top: calc(9 / 16 * 100%);
 }
-
-.ratio_p_1x2 {
-  padding-bottom: 200%;
+.ratio_16x9 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
-.ratio_p_2x1 {
-  padding-bottom: 50%;
-  width: 100%;
+.ratio_16x10 {
   position: relative;
-  overflow: hidden;
-  display: inline-block;
-}
-
-.ratio_p_1x3 {
-  padding-bottom: 300%;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  aspect-ratio: 1.6;
 }
-
-.ratio_p_3x1 {
-  padding-bottom: 33.33%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+.ratio_16x10::before {
+  content: "";
+  display: block;
+  padding-top: calc(10 / 16 * 100%);
 }
-
-.ratio_p_1x4 {
-  padding-bottom: 400%;
+.ratio_16x10 > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
 }
 
-.ratio_p_4x1 {
-  padding-bottom: 25%;
+.guide {
+  z-index: 9999;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  opacity: 1;
+  background-attachment: local;
 }
-
-.ratio_p_3x2 {
-  padding-bottom: 66.67%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+.guide.is-hidden {
+  display: none !important;
 }
 
-.ratio_p_2x3 {
-  padding-bottom: 150%;
+.guide_graph {
+  z-index: 9999;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  opacity: 1;
+  background-attachment: local;
+  background-repeat: repeat;
+  background-size: 1.25rem 1.25rem;
+  background-image: repeating-linear-gradient(to right, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem), repeating-linear-gradient(to bottom, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem);
 }
-
-.ratio_p_4x3 {
-  padding-bottom: 75%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+.guide_graph.is-hidden {
+  display: none !important;
 }
 
-.ratio_p_3x4 {
-  padding-bottom: 133.33%;
+.guide_graph_centered {
+  z-index: 9999;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  opacity: 1;
+  background-attachment: local;
+  background-repeat: repeat;
+  background-size: 1.25rem 1.25rem;
+  background-position: calc(50% - 15rem / 2) 0;
+  background-image: repeating-linear-gradient(to right, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem), repeating-linear-gradient(to bottom, rgba(111, 124, 126, 0.483) 0, rgba(111, 124, 126, 0.483) 1px, transparent 1px, transparent 1.25rem);
+}
+.guide_graph_centered.is-hidden {
+  display: none !important;
 }
 
-.ratio_p_16x9 {
-  padding-bottom: 56.25%;
+.guide_baseline {
+  z-index: 9999;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  opacity: 1;
+  background-attachment: local;
+  background-repeat: repeat;
+  background-size: 100% 1.25rem;
+  background-image: repeating-linear-gradient(to bottom, rgb(0, 200, 255) 0 1px, transparent 1px 100%);
+}
+.guide_baseline.is-hidden {
+  display: none !important;
 }
 
-.ratio_p_16x10 {
-  padding-bottom: 62.5%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
+html,
+body {
+  height: 100%;
 }
 
 html {

package/css/unit.gl.min.css

@@ -1,2 +1,2 @@
-*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{border:0;font-size:100%;font:inherit;margin:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
+*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{border:0;font-size:100%;font:inherit;margin:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}.ratio_1x1{aspect-ratio:1;position:relative;width:100%}.ratio_1x1:before{content:"";display:block;padding-top:100%}.ratio_1x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_1x2{aspect-ratio:.5;position:relative;width:100%}.ratio_1x2:before{content:"";display:block;padding-top:200%}.ratio_1x2>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_2x1{aspect-ratio:2;position:relative;width:100%}.ratio_2x1:before{content:"";display:block;padding-top:50%}.ratio_2x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_1x3{aspect-ratio:.3333333333;position:relative;width:100%}.ratio_1x3:before{content:"";display:block;padding-top:300%}.ratio_1x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_3x1{aspect-ratio:3;position:relative;width:100%}.ratio_3x1:before{content:"";display:block;padding-top:33.33333%}.ratio_3x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_1x4{aspect-ratio:.25;position:relative;width:100%}.ratio_1x4:before{content:"";display:block;padding-top:400%}.ratio_1x4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_4x1{aspect-ratio:4;position:relative;width:100%}.ratio_4x1:before{content:"";display:block;padding-top:25%}.ratio_4x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_3x2{aspect-ratio:1.5;position:relative;width:100%}.ratio_3x2:before{content:"";display:block;padding-top:66.66667%}.ratio_3x2>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_2x3{aspect-ratio:.6666666667;position:relative;width:100%}.ratio_2x3:before{content:"";display:block;padding-top:150%}.ratio_2x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_4x3{aspect-ratio:1.3333333333;position:relative;width:100%}.ratio_4x3:before{content:"";display:block;padding-top:75%}.ratio_4x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_3x4{aspect-ratio:.75;position:relative;width:100%}.ratio_3x4:before{content:"";display:block;padding-top:133.33333%}.ratio_3x4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_16x9{aspect-ratio:1.7777777778;position:relative;width:100%}.ratio_16x9:before{content:"";display:block;padding-top:56.25%}.ratio_16x9>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_16x10{aspect-ratio:1.6;position:relative;width:100%}.ratio_16x10:before{content:"";display:block;padding-top:62.5%}.ratio_16x10>*{bottom:0;right:0}.guide,.ratio_16x10>*{height:100%;left:0;position:absolute;top:0;width:100%}.guide{background-attachment:local;margin:0;opacity:1;pointer-events:none;z-index:9999}.guide.is-hidden{display:none!important}.guide_graph{background-attachment:local;background-image:repeating-linear-gradient(90deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem),repeating-linear-gradient(180deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem);background-repeat:repeat;background-size:1.25rem 1.25rem;height:100%;left:0;margin:0;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph.is-hidden{display:none!important}.guide_graph_centered{background-attachment:local;background-image:repeating-linear-gradient(90deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem),repeating-linear-gradient(180deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem);background-position:calc(50% - 7.5rem) 0;background-repeat:repeat;background-size:1.25rem 1.25rem;height:100%;left:0;margin:0;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph_centered.is-hidden{display:none!important}.guide_baseline{background-attachment:local;background-image:repeating-linear-gradient(180deg,#00c8ff 0 1px,transparent 1px 100%);background-repeat:repeat;background-size:100% 1.25rem;height:100%;left:0;margin:0;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_baseline.is-hidden{display:none!important}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
 /*# sourceMappingURL=to.css.map */

package/js/grids.js

@@ -0,0 +1,59 @@
+"use strict";
+const STORAGE_KEY = 'unitgl:grid:visibility';
+function loadVisibility() {
+    try {
+        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+    }
+    catch (_a) {
+        return {};
+    }
+}
+function saveVisibility(visibilityMap) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(visibilityMap));
+}
+function updateAllGridHeights() {
+    const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+    document.querySelectorAll('.grid_layer').forEach(layer => {
+        if (layer.offsetHeight !== height) {
+            layer.style.height = `${height}px`;
+        }
+    });
+}
+function updateStatusIndicator(id, isHidden) {
+    const badge = document.querySelector(`[data-status="${id}"]`);
+    if (badge) {
+        badge.textContent = isHidden ? '✕ Off' : '✓ On';
+    }
+}
+function applyVisibilityState(state) {
+    document.querySelectorAll('.grid_layer').forEach(layer => {
+        const id = layer.dataset.grid;
+        const hidden = !!state[id];
+        layer.classList.toggle('is-hidden', hidden);
+        updateStatusIndicator(id, hidden);
+    });
+}
+function setupGridToggles() {
+    const visibility = loadVisibility();
+    const buttons = document.querySelectorAll('button[data-toggle]');
+    buttons.forEach(button => {
+        const id = button.dataset.toggle;
+        const layer = document.querySelector(`[data-grid="${id}"]`);
+        if (!layer)
+            return;
+        button.addEventListener('click', () => {
+            const isNowHidden = layer.classList.toggle('is-hidden');
+            visibility[id] = isNowHidden;
+            saveVisibility(visibility);
+            updateStatusIndicator(id, isNowHidden);
+        });
+    });
+    applyVisibilityState(visibility);
+}
+document.addEventListener('DOMContentLoaded', () => {
+    updateAllGridHeights();
+    setupGridToggles();
+    window.addEventListener('resize', updateAllGridHeights);
+    window.addEventListener('scroll', updateAllGridHeights);
+});
+//# sourceMappingURL=grids.js.map

package/js/grids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grids.js","sourceRoot":"","sources":["../../src/ts/grids.ts"],"names":[],"mappings":"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"}

package/js/unit.gl.js

@@ -0,0 +1,10 @@
+import './grids.js';
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('[unit.gl] Test site initialized');
+    const current = location.pathname.split('/').pop();
+    const activeLink = document.querySelector(`a[href$="${current}"]`);
+    if (activeLink) {
+        activeLink.classList.add('active');
+    }
+});
+//# sourceMappingURL=index.js.map

package/js/unit.gl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AAOpB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjD,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;IAG/C,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,OAAO,IAAI,CAAC,CAAC;IACnE,IAAI,UAAU,EAAE,CAAC;QACf,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;AAGH,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unit.gl",
-  "version": "0.1.2",
+  "version": "0.1.9",
   "description": "Dynamic Layout Engine.",
   "keywords": [
     "unit.gl",
@@ -60,7 +60,7 @@
   "exports": {
     ".": {
       "sass": "./scss/index.scss",
-      "typescript": "./ts/index.scss"
+      "typescript": "./ts/index.ts"
     }
   }
 }

package/scss/_reset.scss

@@ -1,5 +1,19 @@
+////
+///
+/// Reset Mixins Module
+/// ===========================================================================
+///
+/// @group Reset
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
 // ============================================================================
-// Base | Reset
+// Use
 // ============================================================================
 
 // Reset margin and padding for all elements