@phun-ky/speccer 9.0.4 → 9.0.6

package/README.md

@@ -143,23 +143,49 @@ If no attribute is applied, it will default to `data-dom`, as in, it will initia
 
 ### Lazy
 
-If you're importing speccer instead of with a script tag, you can use the following approach to apply lazy loading:
+If you're importing speccer instead of with a script tag, [you can use the following approach](https://codepen.io/phun-ky/pen/VwRRLyY) to apply lazy loading:
 
 ```javascript
-import { dissect } from '@phun-ky/speccer';
+import { dissect, ElementDissectionResult } from "https://esm.sh/@phun-ky/speccer";
+
+/**
+ * Function to dissect an HTML element
+ * @param {Element} target - The element to be dissected
+ * @returns {Promise<ElementDissectionResult>} Promise that resolves with the dissection result
+ */
+const dissectElement = (target: Element): Promise<ElementDissectionResult> => {
+  return dissect.element(target);
+};
 
-let dissectElementObserver = new IntersectionObserver((entries, observer) => {
-  entries.forEach((entry) => {
-    const targets = entry.target.querySelectorAll('[data-anatomy]');
+/**
+ * Callback function for IntersectionObserver
+ * @param {IntersectionObserverEntry[]} entries - Array of entries being observed
+ * @param {IntersectionObserver} observer - The IntersectionObserver instance
+ * @returns {Promise<void>} Promise that resolves when element dissection is complete
+ */
+const intersectionCallback: IntersectionObserverCallback = async (entries, observer) => {
+  entries.forEach(async (entry) => {
     if (entry.intersectionRatio > 0) {
-      targets.forEach(dissect.element);
+      await dissectElement(entry.target);
       observer.unobserve(entry.target);
     }
   });
-});
+};
 
-document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
+// Creating IntersectionObserver instance with the callback
+const dissectElementObserver = new IntersectionObserver(intersectionCallback);
+
+/**
+ * Function to observe elements using IntersectionObserver
+ * @param {Element} el - The element to be observed
+ */
+const observeElement = (el: Element): void => {
   dissectElementObserver.observe(el);
+};
+
+// Observing elements with the specified data attribute
+document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
+  observeElement(el);
 });
 ```
 

package/dist/speccer.d.ts

@@ -1,52 +1,52 @@
 type SpeccerFunctionType = () => void;
 
-/**
- * Extends the global Window interface to add custom properties.
- */
-declare global {
-    interface Window {
-        /**
-         * Represents the DrawSVGCurlyBracket class for drawing curly brackets.
-         */
-        DrawSVGCurlyBracket: any;
-        /**
-         * Represents the DrawSVGLine class for drawing lines.
-         */
-        DrawSVGLine: any;
-        /**
-         * Represents the speccer object for additional functionality.
-         */
-        speccer: any;
-    }
-}
+/**
+ * Extends the global Window interface to add custom properties.
+ */
+declare global {
+    interface Window {
+        /**
+         * Represents the DrawSVGCurlyBracket class for drawing curly brackets.
+         */
+        DrawSVGCurlyBracket: any;
+        /**
+         * Represents the DrawSVGLine class for drawing lines.
+         */
+        DrawSVGLine: any;
+        /**
+         * Represents the speccer object for additional functionality.
+         */
+        speccer: any;
+    }
+}
 //# sourceMappingURL=global.d.ts.map
 
-declare const spacing: {
-    create: (text?: string | number, tag?: string) => HTMLElement;
-    element: (targetEl: HTMLElement) => Promise<void>;
-};
-declare const dissect: {
-    create: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
-    element: (sectionEl: HTMLElement) => Promise<void>;
-};
-declare const measure: {
-    create: (text?: string | number, area?: string | null, tag?: string) => HTMLElement;
-    element: (targetEl: HTMLElement) => Promise<void>;
-};
-declare const mark: {
-    create: (n?: string) => HTMLElement;
-    element: (elementToMark: HTMLElement) => Promise<void>;
-};
-declare const typography: {
-    create: (html: string, area: string | null) => HTMLElement;
-    element: (targetEl: HTMLElement) => Promise<void>;
-};
-declare const modes: {
-    dom: (speccer: SpeccerFunctionType) => void;
-    lazy: () => void;
-    manual: (speccer: SpeccerFunctionType) => void;
-    activate: (speccer: SpeccerFunctionType) => void;
-};
+declare const spacing: {
+    create: (text?: string | number, tag?: string) => HTMLElement;
+    element: (targetEl: HTMLElement) => Promise<void>;
+};
+declare const dissect: {
+    create: (textContent: string | undefined, area: string, n?: string) => HTMLElement;
+    element: (sectionEl: HTMLElement) => Promise<void>;
+};
+declare const measure: {
+    create: (text?: string | number, area?: string | null, tag?: string) => HTMLElement;
+    element: (targetEl: HTMLElement) => Promise<void>;
+};
+declare const mark: {
+    create: (n?: string) => HTMLElement;
+    element: (elementToMark: HTMLElement) => Promise<void>;
+};
+declare const typography: {
+    create: (html: string, area: string | null) => HTMLElement;
+    element: (targetEl: HTMLElement) => Promise<void>;
+};
+declare const modes: {
+    dom: (speccer: SpeccerFunctionType) => void;
+    lazy: () => void;
+    manual: (speccer: SpeccerFunctionType) => void;
+    activate: (speccer: SpeccerFunctionType) => void;
+};
 declare const speccer: () => void;
 
 export { speccer as default, dissect, mark, measure, modes, spacing, typography };

package/dist/speccer.esm.js

@@ -1,2 +1,2 @@
-var t,e,o;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(e||(e={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(o||(o={}));const i=t=>t.split(" "),n=t=>i(t).includes(e.Right),r=t=>i(t).includes(e.Bottom),s=t=>i(t).includes(e.Full),a=t=>i(t).includes(e.Enclose),p=t=>t.includes(e.Curly)&&t.includes(e.Full),c=t=>"string"==typeof t,l=t=>!c(t),h=t=>"number"==typeof t,d=t=>!h(t),f=t=>void 0===t,u=()=>new Promise(requestAnimationFrame),m=t=>t.top,g=t=>t.left+t.width,y=t=>t.top+t.height,w=t=>t.left,x=t=>t.left+t.width/2,b=t=>t.top+t.height/2,E={center:t=>({x:x(t),y:b(t)}),top:t=>({x:x(t),y:m(t)}),right:t=>({x:g(t),y:b(t)}),bottom:t=>({x:x(t),y:y(t)}),left:t=>({x:w(t),y:b(t)}),"right-top":t=>({x:g(t),y:m(t)}),"right-bottom":t=>({x:g(t),y:y(t)}),"left-top":t=>({x:w(t),y:m(t)}),"left-bottom":t=>({x:w(t),y:y(t)}),"top-left":t=>({x:w(t),y:m(t)}),"top-right":t=>({x:g(t),y:m(t)}),"bottom-left":t=>({x:w(t),y:y(t)}),"bottom-right":t=>({x:g(t),y:y(t)}),"top-center":t=>({x:x(t),y:m(t)}),"right-center":t=>({x:g(t),y:b(t)}),"bottom-center":t=>({x:x(t),y:y(t)}),"left-center":t=>({x:w(t),y:b(t)})},$=async(t,e="center")=>{if(!e)throw Error("No position given");if(l(e))throw Error("The position given is not the required type: pos: "+typeof e);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await u();const i=t.getBoundingClientRect();return E[e](i)},A=async(t,e,o="center",i="center")=>{if(!t||!e)throw Error("No element given");const{x:n,y:r}=await $(t,o),{x:s,y:a}=await $(e,i);return{x1:n,y1:r,x2:s,y2:a}},v=(t,e)=>{const{x1:o,x2:i,y1:n,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:p}=e;let c={x:o+(i-o)/2,y:n},l={x:o+(i-o)/2,y:r};return s&&(a?"west"===p?(c={x:o-32,y:n-8},l={x:i+32,y:r}):"south"===p?(c={x:o-8,y:n+32},l={x:i,y:r-32}):"east"===p?(c={x:o+32,y:n-8},l={x:i-32,y:r}):(c={x:o-8,y:n-32},l={x:i,y:r+32}):"west"===p?(c={x:o-32,y:n+8},l={x:i+32,y:r}):"south"===p?(c={x:o+8,y:n+32},l={x:i,y:r-32}):"east"===p?(c={x:o+32,y:n+8},l={x:i-32,y:r}):(c={x:o+8,y:n-32},l={x:i,y:r+32})),{firstPoint:{x:o,y:n},firstControl:c,lastPoint:{x:i,y:r},lastControl:l}},S=async(t,e,o)=>{const{pos1:i,pos2:n,firstSet:r=!1,direction:s}=o,{x1:a,y1:p,x2:c,y2:l}=await A(t,e,i,n);let h=0,d=0;"north"===s?d=8:"west"===s?h=8:"east"===s?h=-8:"south"===s&&(d=-8);const{firstPoint:f,firstControl:u,lastControl:m,lastPoint:g}=v({x1:a+0,x2:c+h,y1:p+0+document.documentElement.scrollTop,y2:l+d+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${f.x} ${f.y}C ${u.x} ${u.y}, ${m.x} ${m.y}, ${g.x} ${g.y}`},P=async({start:t,stop:e,crude:o=!1})=>{const{x1:i,y1:n,x2:r,y2:s}=await A(t,e),a=((t,e,o,i,n=!0)=>{if(f(t)||f(e)||f(o)||f(i))throw new SyntaxError("Missing input for `angle`");if(d(t)||d(e)||d(o)||d(i))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof o} ${typeof i}`);const r=i-e,s=o-t;let a=Math.atan2(r,s);return a*=180/Math.PI,n&&a<0&&(a+=360),a})(i,n,r,s);return o?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)},C=()=>"_"+Math.random().toString(36).substring(2,11),B=async(t,e)=>{var o;if(!(!t||!e||c(e)||h(e)||(o=e,"boolean"==typeof o)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await u(),Array.isArray(e))for(const o of e)t.style[o.key]=o.value;else for(const o of Object.keys(e))t.style[o]=e[o]},R=async t=>(await u(),getComputedStyle(t,null));class L{#t;#e;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}#i(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${C()}`,o=t.cloneNode(!1),i=this.startElement.getAttribute("id")||C();return this.startElement.setAttribute("id",i),o.setAttribute("data-start-el",i),o.setAttribute("id",e),o.classList.remove("original"),o.classList.add("speccer"),o}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#i(t),o=this.#i(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(o,t.nextSibling);const i=await P({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:n,path1pos2:r,path2pos1:s,path2pos2:a}=(t=>{let e,o,i,n;switch(t){case"east":e="right-top",o="left-center",i="right-bottom",n="left-center";break;case"south":e="bottom-left",o="top-center",i="bottom-right",n="top-center";break;case"west":e="left-top",o="right-center",i="left-bottom",n="right-center";break;default:e="top-left",o="bottom-center",i="top-right",n="bottom-center"}return{path1pos1:e,path1pos2:o,path2pos1:i,path2pos2:n}})(i),p=await S(this.startElement,this.stopElement,{pos1:n,pos2:r,firstSet:!0,direction:i}),c=await S(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:i});this.firstPathElement.setAttribute("data-direction",i),this.firstPathElement.setAttribute("data-pos1",n),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",p),this.secondPathElement.setAttribute("data-direction",i),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",c)}}window.DrawSVGCurlyBracket=L;class T{#t;#e;startElement;stopElement;line;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${C()}`,o=t.cloneNode(!1),i=this.startElement.getAttribute("id")||C();if(this.startElement.setAttribute("id",i),o.setAttribute("id",e),o.setAttribute("data-start-el",i),o.classList.remove("original"),o.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(o,t.nextSibling);const n=await P({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:s}=(t=>{let e,o;switch(t){case"east":e="right",o="left";break;case"south":e="bottom",o="top";break;case"west":e="left",o="right";break;default:e="top",o="bottom"}return{pos1:e,pos2:o}})(n),a=await(async(t,e,o)=>{const{pos1:i,pos2:n}=o,{x1:r,y1:s,x2:a,y2:p}=await A(t,e,i,n),{firstPoint:c,firstControl:l,lastControl:h,lastPoint:d}=v({x1:r,x2:a,y1:s,y2:p},{direction:""});return`M ${c.x} ${c.y}C ${l.x} ${l.y}, ${h.x} ${h.y}, ${d.x} ${d.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:s});this.line.setAttribute("data-direction",n),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",s),this.line.setAttribute("d",a)}}window.DrawSVGLine=T;const N=(t,e,o="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==o)).forEach((e=>t.classList.add(e))))},O=(t,e)=>t?!e&&l(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",I=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],M=t=>parseInt(t,10),q=t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"",H=t=>M(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,k=(t,e,o)=>t-e.width/2+o.width/2,V=(t,e,o)=>t-e.height/2+o.height/2,W=async t=>{await u();const e=t.getBoundingClientRect(),o=e.top+window.scrollY,i=e.left+window.scrollX;return{height:e.height,width:e.width,top:o,left:i}},j=async(t,e)=>{await u();const o=t.getBoundingClientRect(),i=await W(e),n=await(async(t,e)=>{await u();const o=t.getBoundingClientRect(),i=e.getBoundingClientRect(),n=i.top+window.scrollY,r=i.left+window.scrollX;return{height:i.height,width:i.width,top:V(n,o,i),left:k(r,o,i)}})(t,e),r=i.height,s=i.width,a=o.height,p=o.width;return{absolute:()=>({top:i.top,left:i.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:i.top-e-o,left:t?n.left:i.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:o=r,modifier:p=0}={})=>({top:i.top+o-(e+p),left:t?n.left:i.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=p,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=p,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left-e-o,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=p,targetWidth:o=s,modifier:a=0}={})=>({top:t?n.top:i.top,left:i.left+o-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:s})}},z=async(t,o,p,c)=>{await u();const{isCurly:l=!1}=c||{},h=H(p),d=M(getComputedStyle(p).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await j(p,o);if(a(t)){const{left:t,top:e,height:o,width:i}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${o}px`,width:`${i}px`}}if(i(t).includes(e.Left)){if(s(t)&&!l){const{left:t,top:e,height:o}=f.fromLeft({sourceWidth:d});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromLeft({center:!0,modifier:l?h/1.5:h});return{left:`${e}px`,top:`${o}px`}}if(n(t)){if(s(t)&&!l){const{left:t,top:e,height:o}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromRight({center:!0,modifier:l?h/1.5:h});return{left:`${e}px`,top:`${o}px`}}if(r(t)){if(s(t)&&!l){const{left:t,top:e,width:o}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:e,top:o}=f.fromBottom({center:!0,modifier:l?h/1.5:h});return{left:`${e}px`,top:`${o}px`}}if(s(t)&&!l){const{left:t,top:e,width:o}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:m,top:g}=f.fromTop({center:!0,modifier:l?h/1.5:h});return{left:`${m}px`,top:`${g}px`}},F=(t="",e,o="span")=>{const i=document.createElement(o),n=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!s(e)&&!a(e)||s(e)&&p(e)?i.appendChild(n):(s(e)||a(e))&&i.setAttribute("data-dissection-counter",t);const c=O("ph-speccer speccer dissection",r);return N(i,c),i},D=async t=>{if(!t)return;const o=t.querySelectorAll("[data-anatomy]");if(o){let t=0;o.forEach((async(o,i)=>{if(!o)return;const n=o.getAttribute("data-anatomy")||"";if(!n||""===n||!n.includes(e.Outline))return;let r=I[i];r||(r=`${I[t]}${I[t].toLowerCase()}`,t++);const s=F(r,n);document.body.appendChild(s);const a=await z(n,o,s,{isCurly:p(n)});await B(s,a),n.includes(e.SVG)&&!p(n)?new T(o,s):p(n)&&new L(o,s)}))}},G=(t="",e="",o="span")=>{const i=document.createElement(o);return i.setAttribute("title",`${t}px`),i.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),N(i,`ph-speccer speccer measure ${e}`),i},_=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const s=await R(t);if("none"===s.display||"0"===s.opacity||"hidden"===s.visibility)return;await u();const a=t.getBoundingClientRect();if(i(e).includes(o.Width))if(r(e)){const o=G(a.width,e);document.body.appendChild(o);const i=await j(o,t),{left:n,top:r,width:s}=i.fromBottom({center:!1});await B(o,{left:`${n}px`,top:`${r}px`,width:`${s}px`})}else{const o=G(a.width,e);document.body.appendChild(o);const i=await j(o,t),{left:n,top:r,width:s}=i.fromTop({center:!1,modifier:-8});await B(o,{left:`${n}px`,top:`${r}px`,width:`${s}px`})}else if((t=>i(t).includes(o.Height))(e))if(n(e)){const o=G(a.height,e);document.body.appendChild(o);const i=await j(o,t),{left:n,top:r,height:s}=i.fromRight({center:!1});await B(o,{left:`${n}px`,top:`${r}px`,height:`${s}px`})}else{const o=G(a.height,e);document.body.appendChild(o);const i=await j(o,t),{left:n,top:r,height:s}=i.fromLeft({center:!1,modifier:-8});await B(o,{left:`${n}px`,top:`${r}px`,height:`${s}px`})}},X=async(t,e,o,i)=>{await u();const n=i.getBoundingClientRect(),r=await W(i);"marginTop"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top-e+"px"}),"marginRight"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left+parseInt(n.width+"",10)+"px",top:r.top+"px"}),"marginBottom"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+parseInt(n.height+"",10)+"px"}),"marginLeft"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}),"paddingTop"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+"px"}),"paddingBottom"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+(parseInt(n.height+"",10)-e)+"px"}),"paddingRight"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left+(parseInt(n.width+"",10)-e)+"px",top:r.top+"px"}),"paddingLeft"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"})},Y=(t="",e="span")=>{const o=document.createElement(e),i=document.createTextNode(`${t}`);return o.appendChild(i),o.setAttribute("title",`${t}px`),N(o,"ph-speccer speccer spacing"),o},J=async t=>{if(!t)return;const e=await R(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const o=(t=>{const{marginTop:e,marginBottom:o,marginLeft:i,marginRight:n,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:p}=t;return{marginTop:e,marginBottom:o,marginLeft:i,marginRight:n,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:p}})(e),i=Object.keys(o).filter((t=>"0px"!==o[t]));if(i.length)for(const e of i){const i=M(o[e]),n=Y(i),r=q(e);N(n,r),document.body.appendChild(n),t.classList.add("is-specced"),await X(e,i,n,t)}},K=t=>{const e=()=>((t,e,o=!1)=>{let i;return function(n,...r){const s=o&&!i;i&&clearTimeout(i),i=setTimeout((function(){i=null,o||t.apply(n,r)}),e),s&&t.apply(n,r)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Q=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},U=()=>{const t=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(J(o.target),e.unobserve(o.target))}));for(const e of document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(_(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const o=new IntersectionObserver((async(t,e)=>{for(const o of t)o.intersectionRatio>0&&(await D(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))o.observe(t)},Z=t=>{window.speccer=t},tt=t=>{const e=document.currentScript;if(e){const o=e.getAttribute("src");o&&(o.includes("speccer.js")||o.includes("JaXpOK.js"))&&(e.hasAttribute("data-manual")?Z(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Q(t):e.hasAttribute("data-lazy")?U():Q(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||K(t))}},et=(t="span")=>{const e=document.createElement(t),o=O("ph-speccer speccer mark");return N(e,o),e},ot=async t=>{if(!t)return;const e=et();document.body.appendChild(e);const o=await j(e,t),{left:i,top:n,height:r,width:s}=o.absolute(),a={left:`${i}px`,top:`${n}px`,height:`${r}px`,width:`${s}px`};await B(e,a)},it=(t,e=3)=>parseFloat(t+"").toFixed(e),nt=(t,e)=>{const o=document.createElement("div"),i={};null!==e&&""!==e&&(i[e]=!0);const n=O("ph-speccer speccer typography",i);return o.innerHTML=t,N(o,n),o},rt=async e=>{if(!e)return;const o=e.getAttribute("data-speccer-typography"),i=await R(e);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;e.classList.add("is-specced");const n=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:o,fontFamily:i,fontSize:n,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:o,fontFamily:i,fontSize:n,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await R(t)),o="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${e.fontFamily};</li>  <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${e.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${e.lineHeight} / ${o};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(e),r=nt(n,o);document.body.appendChild(r);const s=await(async(e,o,i)=>{const n=o.getBoundingClientRect(),r=H(i),s=i.getBoundingClientRect(),a=await W(o),p=a.left-s.width-r+"px",c=it(V(a.top,s,n))+"px",l=a.left+n.width+r+"px",h=it(V(a.top,s,n))+"px",d=it(k(a.left,s,n))+"px",f=a.top-s.height-r+"px",u=it(k(a.left,s,n))+"px",m=a.top+n.height+r+"px";let g={left:p,top:c};return e?.includes(t.Right)?g={left:l,top:h}:e?.includes(t.Top)?g={left:d,top:f}:e?.includes(t.Bottom)&&(g={left:u,top:m}),g})(o,e,r);B(r,s)},st={create:Y,element:J},at={create:F,element:D},pt={create:G,element:_},ct={create:et,element:ot},lt={create:nt,element:rt},ht={dom:Q,lazy:U,manual:Z,activate:tt},dt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),o=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section]"),n=document.querySelectorAll("[data-speccer-mark]");for(const t of n)ot(t);for(const e of t)J(e);for(const t of e)_(t);for(const t of o)rt(t);for(const t of i)D(t)};tt(dt);export{dt as default,at as dissect,ct as mark,pt as measure,ht as modes,st as spacing,lt as typography};
+var t,e,o;!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(t||(t={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(e||(e={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(o||(o={}));const i=t=>t.split(" "),n=t=>i(t).includes(e.Right),r=t=>i(t).includes(e.Bottom),s=t=>i(t).includes(e.Full),a=t=>i(t).includes(e.Enclose),p=t=>t.includes(e.Curly)&&t.includes(e.Full),c=t=>"string"==typeof t,l=t=>!c(t),h=t=>"number"==typeof t,d=t=>!h(t),f=t=>void 0===t,m=()=>new Promise(requestAnimationFrame),u=t=>t.top,g=t=>t.left+t.width,y=t=>t.top+t.height,w=t=>t.left,x=t=>t.left+t.width/2,b=t=>t.top+t.height/2,E={center:t=>({x:x(t),y:b(t)}),top:t=>({x:x(t),y:u(t)}),right:t=>({x:g(t),y:b(t)}),bottom:t=>({x:x(t),y:y(t)}),left:t=>({x:w(t),y:b(t)}),"right-top":t=>({x:g(t),y:u(t)}),"right-bottom":t=>({x:g(t),y:y(t)}),"left-top":t=>({x:w(t),y:u(t)}),"left-bottom":t=>({x:w(t),y:y(t)}),"top-left":t=>({x:w(t),y:u(t)}),"top-right":t=>({x:g(t),y:u(t)}),"bottom-left":t=>({x:w(t),y:y(t)}),"bottom-right":t=>({x:g(t),y:y(t)}),"top-center":t=>({x:x(t),y:u(t)}),"right-center":t=>({x:g(t),y:b(t)}),"bottom-center":t=>({x:x(t),y:y(t)}),"left-center":t=>({x:w(t),y:b(t)})},$=async(t,e="center")=>{if(!e)throw Error("No position given");if(l(e))throw Error("The position given is not the required type: pos: "+typeof e);const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(e))throw Error(`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`);await m();const i=t.getBoundingClientRect();return E[e](i)},A=async(t,e,o="center",i="center")=>{if(!t||!e)throw Error("No element given");const{x:n,y:r}=await $(t,o),{x:s,y:a}=await $(e,i);return{x1:n,y1:r,x2:s,y2:a}},v=(t,e)=>{const{x1:o,x2:i,y1:n,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:p}=e;let c={x:o+(i-o)/2,y:n},l={x:o+(i-o)/2,y:r};return s&&(a?"west"===p?(c={x:o-32,y:n-8},l={x:i+32,y:r}):"south"===p?(c={x:o-8,y:n+32},l={x:i,y:r-32}):"east"===p?(c={x:o+32,y:n-8},l={x:i-32,y:r}):(c={x:o-8,y:n-32},l={x:i,y:r+32}):"west"===p?(c={x:o-32,y:n+8},l={x:i+32,y:r}):"south"===p?(c={x:o+8,y:n+32},l={x:i,y:r-32}):"east"===p?(c={x:o+32,y:n+8},l={x:i-32,y:r}):(c={x:o+8,y:n-32},l={x:i,y:r+32})),{firstPoint:{x:o,y:n},firstControl:c,lastPoint:{x:i,y:r},lastControl:l}},S=async(t,e,o)=>{const{pos1:i,pos2:n,firstSet:r=!1,direction:s}=o,{x1:a,y1:p,x2:c,y2:l}=await A(t,e,i,n);let h=0,d=0;"north"===s?d=8:"west"===s?h=8:"east"===s?h=-8:"south"===s&&(d=-8);const{firstPoint:f,firstControl:m,lastControl:u,lastPoint:g}=v({x1:a+0,x2:c+h,y1:p+0+document.documentElement.scrollTop,y2:l+d+document.documentElement.scrollTop},{direct:!0,firstSet:r,direction:s});return`M ${f.x} ${f.y}C ${m.x} ${m.y}, ${u.x} ${u.y}, ${g.x} ${g.y}`},P=async({start:t,stop:e,crude:o=!1})=>{const{x1:i,y1:n,x2:r,y2:s}=await A(t,e),a=((t,e,o,i,n=!0)=>{if(f(t)||f(e)||f(o)||f(i))throw new SyntaxError("Missing input for `angle`");if(d(t)||d(e)||d(o)||d(i))throw TypeError(`Parameters for \`angle\` do not have the required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof o} ${typeof i}`);const r=i-e,s=o-t;let a=Math.atan2(r,s);return a*=180/Math.PI,n&&a<0&&(a+=360),a})(i,n,r,s);return o?(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"})(a):(t=>{if(t>360)throw new RangeError("Parameter cannot exceed 360");if(t<0)throw new RangeError("Parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"})(a)},C=()=>"_"+Math.random().toString(36).substring(2,11),B=async(t,e)=>{var o;if(!(!t||!e||c(e)||h(e)||(o=e,"boolean"==typeof o)||Array.isArray(e)&&!e.length||!Object.keys(e).length&&e.constructor===Object))if(await m(),Array.isArray(e))for(const o of e)t.style[o.key]=o.value;else for(const o of Object.keys(e))t.style[o]=e[o]},R=async t=>(await m(),getComputedStyle(t,null));class L{#t;#e;startElement;stopElement;firstPathElement;secondPathElement;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}#i(t){if(!t)throw new Error("No path given to #getPathElement!");const e=`ph_draw_path-path-${C()}`,o=t.cloneNode(!1),i=this.startElement.getAttribute("id")||C();return this.startElement.setAttribute("id",i),o.setAttribute("data-start-el",i),o.setAttribute("id",e),o.classList.remove("original"),o.classList.add("speccer"),o}async draw(t){if(!t)throw new Error("No path given to draw!");const e=this.#i(t),o=this.#i(t);if(!t.parentNode)throw new Error("No parentNode found for path");this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(o,t.nextSibling);const i=await P({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:n,path1pos2:r,path2pos1:s,path2pos2:a}=(t=>{let e,o,i,n;switch(t){case"east":e="right-top",o="left-center",i="right-bottom",n="left-center";break;case"south":e="bottom-left",o="top-center",i="bottom-right",n="top-center";break;case"west":e="left-top",o="right-center",i="left-bottom",n="right-center";break;default:e="top-left",o="bottom-center",i="top-right",n="bottom-center"}return{path1pos1:e,path1pos2:o,path2pos1:i,path2pos2:n}})(i),p=await S(this.startElement,this.stopElement,{pos1:n,pos2:r,firstSet:!0,direction:i}),c=await S(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:i});this.firstPathElement.setAttribute("data-direction",i),this.firstPathElement.setAttribute("data-pos1",n),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",p),this.secondPathElement.setAttribute("data-direction",i),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",c)}}window.DrawSVGCurlyBracket=L;class T{#t;#e;startElement;stopElement;line;constructor(t,e){this.#o(t,e)}#o(t,e){if(!t||!e)throw new Error("Missing inputs startElement and stopElement");if(!document.body.contains(e))throw new Error("stopElement is not in the DOM");if(!document.body.contains(t))throw new Error("startElement is not in the DOM");if(this.startElement=t,this.stopElement=e,this.#t=document.getElementById("ph-speccer-svg"),this.#e=document.getElementById("ph-speccer-path"),!this.#e||!this.#t)throw new Error("Missing required SVG element to draw lines. Please see the documentation");B(this.#t,{height:`${document.body.scrollHeight}px`}),this.connect()}connect(){this.draw(this.#e)}async draw(t){if(!t)throw new Error("No path given to draw!");const e=`ph_draw_path-path-${C()}`,o=t.cloneNode(!1),i=this.startElement.getAttribute("id")||C();if(this.startElement.setAttribute("id",i),o.setAttribute("id",e),o.setAttribute("data-start-el",i),o.classList.remove("original"),o.classList.add("speccer"),!t.parentNode)throw new Error("No parentNode found for path");this.line=t.parentNode.insertBefore(o,t.nextSibling);const n=await P({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:r,pos2:s}=(t=>{let e,o;switch(t){case"east":e="right",o="left";break;case"south":e="bottom",o="top";break;case"west":e="left",o="right";break;default:e="top",o="bottom"}return{pos1:e,pos2:o}})(n),a=await(async(t,e,o)=>{const{pos1:i,pos2:n}=o,{x1:r,y1:s,x2:a,y2:p}=await A(t,e,i,n),{firstPoint:c,firstControl:l,lastControl:h,lastPoint:d}=v({x1:r,x2:a,y1:s,y2:p},{direction:""});return`M ${c.x} ${c.y}C ${l.x} ${l.y}, ${h.x} ${h.y}, ${d.x} ${d.y}`})(this.startElement,this.stopElement,{pos1:r,pos2:s});this.line.setAttribute("data-direction",n),this.line.setAttribute("data-pos1",r),this.line.setAttribute("data-pos2",s),this.line.setAttribute("d",a)}}window.DrawSVGLine=T;const N=(t,e,o="noop")=>{t&&(!e||e&&!e.length||e.trim().split(" ").filter((t=>t!==o)).forEach((e=>t.classList.add(e))))},I=(t,e)=>t?!e&&l(t)?Object.keys(t).filter((e=>t[e])).join(" ").trim():`${t.trim()} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():"",M=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],O=t=>parseInt(t,10),q=t=>t.includes("Top")?t.replace("Top"," top"):t.includes("Right")?t.replace("Right"," right"):t.includes("Bottom")?t.replace("Bottom"," bottom"):t.includes("Left")?t.replace("Left"," left"):"",H=t=>O(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,k=(t,e,o)=>t-e.width/2+o.width/2,V=(t,e,o)=>t-e.height/2+o.height/2,W=async t=>{await m();const e=t.getBoundingClientRect(),o=e.top+window.scrollY,i=e.left+window.scrollX;return{height:e.height,width:e.width,top:o,left:i}},z=async(t,e)=>{await m();const o=t.getBoundingClientRect(),i=await W(e),n=await(async(t,e)=>{await m();const o=t.getBoundingClientRect(),i=e.getBoundingClientRect(),n=i.top+window.scrollY,r=i.left+window.scrollX;return{height:i.height,width:i.width,top:V(n,o,i),left:k(r,o,i)}})(t,e),r=i.height,s=i.width,a=o.height,p=o.width;return{absolute:()=>({top:i.top,left:i.left,height:r,width:s}),toTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:s}),fromTop:({center:t=!1,sourceHeight:e=a,modifier:o=0}={})=>({top:i.top-e-o,left:t?n.left:i.left,height:r,width:s}),toBottom:({center:t=!1,sourceHeight:e=a,targetHeight:o=r,modifier:p=0}={})=>({top:i.top+o-(e+p),left:t?n.left:i.left,height:r,width:s}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:s}),toLeft:({center:t=!1,sourceWidth:e=p,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:s}),fromLeft:({center:t=!1,sourceWidth:e=p,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left-e-o,height:r,width:s}),toRight:({center:t=!1,sourceWidth:e=p,targetWidth:o=s,modifier:a=0}={})=>({top:t?n.top:i.top,left:i.left+o-(e+a),height:r,width:s}),fromRight:({center:t=!1,targetWidth:e=s,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:s})}},j=async(t,o,p,c)=>{await m();const{isCurly:l=!1}=c||{},h=H(p),d=O(getComputedStyle(p).getPropertyValue("--ph-speccer-measure-size"))||8;const f=await z(p,o);if(a(t)){const{left:t,top:e,height:o,width:i}=f.absolute();return{left:`${t}px`,top:`${e}px`,height:`${o}px`,width:`${i}px`}}if(i(t).includes(e.Left)){if(s(t)&&!l){const{left:t,top:e,height:o}=f.fromLeft({sourceWidth:d});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromLeft({center:!0,modifier:l?h/1.5:h});return{left:`${e}px`,top:`${o}px`}}if(n(t)){if(s(t)&&!l){const{left:t,top:e,height:o}=f.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}const{left:e,top:o}=f.fromRight({center:!0,modifier:l?h/1.5:h});return{left:`${e}px`,top:`${o}px`}}if(r(t)){if(s(t)&&!l){const{left:t,top:e,width:o}=f.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:e,top:o}=f.fromBottom({center:!0,modifier:l?h/1.5:h});return{left:`${e}px`,top:`${o}px`}}if(s(t)&&!l){const{left:t,top:e,width:o}=f.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}const{left:u,top:g}=f.fromTop({center:!0,modifier:l?h/1.5:h});return{left:`${u}px`,top:`${g}px`}},F=(t="",e,o="span")=>{const i=document.createElement(o),n=document.createTextNode(t),r={};null!==e&&""!==e&&(r[e]=!0),!s(e)&&!a(e)||s(e)&&p(e)?i.appendChild(n):(s(e)||a(e))&&i.setAttribute("data-dissection-counter",t);const c=I("ph-speccer speccer dissection",r);return N(i,c),i},D=async t=>{if(!t)return;const o=t.querySelectorAll("[data-anatomy]");if(o){let t=0;o.forEach((async(o,i)=>{if(!o)return;const n=o.getAttribute("data-anatomy")||"";if(!n||""===n||!n.includes(e.Outline))return;let r=M[i];r||(r=`${M[t]}${M[t].toLowerCase()}`,t++);const s=F(r,n);document.body.appendChild(s);const a=await j(n,o,s,{isCurly:p(n)});await B(s,a),n.includes(e.SVG)&&!p(n)?new T(o,s):p(n)&&new L(o,s)}))}},G=(t="",e="",o="span")=>{const i=document.createElement(o);return i.setAttribute("title",`${t}px`),i.setAttribute("data-measure",`${parseInt(`${t}`,10)}px`),N(i,`ph-speccer speccer measure ${e}`),i},_=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const s=await R(t);if("none"===s.display||"0"===s.opacity||"hidden"===s.visibility)return;await m();const a=t.getBoundingClientRect();if(i(e).includes(o.Width))if(r(e)){const o=G(a.width,e);document.body.appendChild(o);const i=await z(o,t),{left:n,top:r,width:s}=i.fromBottom({center:!1});await B(o,{left:`${n}px`,top:`${r}px`,width:`${s}px`})}else{const o=G(a.width,e);document.body.appendChild(o);const i=await z(o,t),{left:n,top:r,width:s}=i.fromTop({center:!1,modifier:-8});await B(o,{left:`${n}px`,top:`${r}px`,width:`${s}px`})}else if((t=>i(t).includes(o.Height))(e))if(n(e)){const o=G(a.height,e);document.body.appendChild(o);const i=await z(o,t),{left:n,top:r,height:s}=i.fromRight({center:!1});await B(o,{left:`${n}px`,top:`${r}px`,height:`${s}px`})}else{const o=G(a.height,e);document.body.appendChild(o);const i=await z(o,t),{left:n,top:r,height:s}=i.fromLeft({center:!1,modifier:-8});await B(o,{left:`${n}px`,top:`${r}px`,height:`${s}px`})}},X=async(t,e,o,i)=>{await m();const n=i.getBoundingClientRect(),r=await W(i);"marginTop"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top-e+"px"}),"marginRight"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left+parseInt(n.width+"",10)+"px",top:r.top+"px"}),"marginBottom"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+parseInt(n.height+"",10)+"px"}),"marginLeft"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}),"paddingTop"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+"px"}),"paddingBottom"===t&&B(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+(parseInt(n.height+"",10)-e)+"px"}),"paddingRight"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left+(parseInt(n.width+"",10)-e)+"px",top:r.top+"px"}),"paddingLeft"===t&&B(o,{height:n.height+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"})},Y=(t="",e="span")=>{const o=document.createElement(e),i=document.createTextNode(`${t}`);return o.appendChild(i),o.setAttribute("title",`${t}px`),N(o,"ph-speccer speccer spacing"),o},J=async t=>{if(!t)return;const e=await R(t);if("none"===e.display||"0"===e.opacity||"hidden"===e.visibility)return;const o=(t=>{const{marginTop:e,marginBottom:o,marginLeft:i,marginRight:n,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:p}=t;return{marginTop:e,marginBottom:o,marginLeft:i,marginRight:n,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:p}})(e),i=Object.keys(o).filter((t=>"0px"!==o[t]));if(i.length)for(const e of i){const i=O(o[e]),n=Y(i),r=q(e);N(n,r),document.body.appendChild(n),t.classList.add("is-specced"),await X(e,i,n,t)}},K=t=>{const e=()=>((t,e,o=!1)=>{let i;return function(n,...r){const s=o&&!i;i&&clearTimeout(i),i=setTimeout((function(){i=null,o||t.apply(n,r)}),e),s&&t.apply(n,r)}})((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},Q=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},U=()=>{const t=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(J(o.target),e.unobserve(o.target))}));for(const e of document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"))t.observe(e);const e=new IntersectionObserver(((t,e)=>{for(const o of t)o.intersectionRatio>0&&(_(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-speccer-measure]"))e.observe(t);const o=new IntersectionObserver((async(t,e)=>{for(const o of t)o.intersectionRatio>0&&(await D(o.target),e.unobserve(o.target))}));for(const t of document.querySelectorAll("[data-anatomy-section]"))o.observe(t)},Z=t=>{window.speccer=t},tt=t=>{const e=document.currentScript;if(e){const o=e.getAttribute("src");o&&o.includes("speccer.js")&&(e.hasAttribute("data-manual")?Z(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?Q(t):e.hasAttribute("data-lazy")?U():Q(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||K(t))}},et=(t="span")=>{const e=document.createElement(t),o=I("ph-speccer speccer mark");return N(e,o),e},ot=async t=>{if(!t)return;const e=et();document.body.appendChild(e);const o=await z(e,t),{left:i,top:n,height:r,width:s}=o.absolute(),a={left:`${i}px`,top:`${n}px`,height:`${r}px`,width:`${s}px`};await B(e,a)},it=(t,e=3)=>parseFloat(t+"").toFixed(e),nt=(t,e)=>{const o=document.createElement("div"),i={};null!==e&&""!==e&&(i[e]=!0);const n=I("ph-speccer speccer typography",i);return o.innerHTML=t,N(o,n),o},rt=async e=>{if(!e)return;const o=e.getAttribute("data-speccer-typography"),i=await R(e);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;e.classList.add("is-specced");const n=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:o,fontFamily:i,fontSize:n,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:o,fontFamily:i,fontSize:n,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await R(t)),o="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles">  <li><span class="property">font-family:</span> ${e.fontFamily};</li>  <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li>  <li><span class="property">font-weight:</span> ${e.fontWeight};</li>  <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li>  <li><span class="property">line-height:</span> ${e.lineHeight} / ${o};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(e),r=nt(n,o);document.body.appendChild(r);const s=await(async(e,o,i)=>{const n=o.getBoundingClientRect(),r=H(i),s=i.getBoundingClientRect(),a=await W(o),p=a.left-s.width-r+"px",c=it(V(a.top,s,n))+"px",l=a.left+n.width+r+"px",h=it(V(a.top,s,n))+"px",d=it(k(a.left,s,n))+"px",f=a.top-s.height-r+"px",m=it(k(a.left,s,n))+"px",u=a.top+n.height+r+"px";let g={left:p,top:c};return e?.includes(t.Right)?g={left:l,top:h}:e?.includes(t.Top)?g={left:d,top:f}:e?.includes(t.Bottom)&&(g={left:m,top:u}),g})(o,e,r);B(r,s)},st={create:Y,element:J},at={create:F,element:D},pt={create:G,element:_},ct={create:et,element:ot},lt={create:nt,element:rt},ht={dom:Q,lazy:U,manual:Z,activate:tt},dt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".ph-speccer.speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),o=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section]"),n=document.querySelectorAll("[data-speccer-mark]");for(const t of n)ot(t);for(const e of t)J(e);for(const t of e)_(t);for(const t of o)rt(t);for(const t of i)D(t)};tt(dt);export{dt as default,at as dissect,ct as mark,pt as measure,ht as modes,st as spacing,lt as typography};
 //# sourceMappingURL=speccer.esm.js.map