npm - @phun-ky/speccer - Versions diffs - 6.2.1 → 6.3.2 - Mend

@phun-ky/speccer 6.2.1 → 6.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,18 +1,37 @@
-# speccer
+# @phun-ky/speccer
+![Image of speccer](./assets/speccer.png)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/speccer) ![issues](https://img.shields.io/github/issues/phun-ky/speccer) ![license](https://img.shields.io/npm/l/@phun-ky/speccer) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/speccer)
 > A zero dependency package to show specifications on components in your design system documentation
-Speccer was created to make it easier to document components in a design system.
-    $ npm i @phun-ky/speccer
+- [@phun-ky/speccer](#phun-kyspeccer)
+  - [About](#about)
+  - [Usage](#usage)
+    - [ESM](#esm)
+    - [Script](#script)
+    - [React](#react)
+    - [Element spacing](#element-spacing)
+    - [Element dimensions](#element-dimensions)
+      - [Subtle measure](#subtle-measure)
+    - [Highlight the anatomy of an element](#highlight-the-anatomy-of-an-element)
+      - [Subtle anatomy](#subtle-anatomy)
+    - [Curly brackets](#curly-brackets)
+    - [Element typogpraphy](#element-typogpraphy)
+  - [Advanced usage](#advanced-usage)
+    - [Lazy](#lazy)
+  - [Customization](#customization)
+## About
-See demo here: https://codepen.io/phun-ky/pen/xaOrYX
+Speccer was created to make it easier to document components in a design system.
-![Image of speccer](./assets/speccer.png)
+```zsh
+npm i @phun-ky/speccer
+```
----
+See demo here: <https://codepen.io/phun-ky/pen/xaOrYX>
 ## Usage
@@ -84,7 +103,7 @@ In your component examples, use the following attribute:
 <div data-speccer class="..."></div>
 ```
-This will display the element <em>and all of it's children</em> padding and margin.
+This will display the element _and all of it's children_ padding and margin.
 ### Element dimensions
@@ -93,12 +112,15 @@ This will display the element <em>and all of it's children</em> padding and marg
 In your component examples, use the following attribute:
 ```html
-<div data-speccer-measure="[height right|left] | [width top|bottom]" class="..."></div>
+<div
+  data-speccer-measure="[height right|left] | [width top|bottom]"
+  class="..."
+></div>
 ```
 Where `height` and `width` comes with placement flags. Default for `height` is `left`, default for `width` is `top`.
-#### Subtle
+#### Subtle measure
 ![Image of subtle option for measure](./assets/subtle-measure.png)
@@ -118,13 +140,16 @@ In your component examples, use the following attribute. Remember to use the `da
 ```html
 <div data-anatomy-section>
-  <div data-anatomy="outline [full|enclose] [left|right|top|bottom]" class="..."></div>
+  <div
+    data-anatomy="outline [full|enclose][curly] [left|right|top|bottom]"
+    class="..."
+  ></div>
 </div>
 ```
 This will place a pin to the outline of the element. Default is `top`.
-#### Subtle
+#### Subtle anatomy
 ![Image of subtle option for anatomy](./assets/subtle.png)
@@ -136,16 +161,43 @@ You can also give a more subtle touch to the anatomy elements.
 </div>
 ```
+### Curly brackets
+You can use curly brackets with the `curly` tag in `data-anatomy` along side `outline full` to provide a more sleek look to the style.
+**_NOTE!_** Only works with `outline full`
+The curly brackets are made with SVG paths, and it is required to have the following snippet on your page for it to render:
+```html
+<svg
+  class="ph"
+  viewBox="0 0"
+  id="ph-speccer-svg"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    class="ph path original"
+    id="ph-speccer-path"
+    fill="none"
+    stroke-width="1"
+    stroke="currentColor"
+  />
+</svg>
+```
 This will give a dashed border, and a more subtle pin style.
 ### Element typogpraphy
-![Image of speccer](./assets/typography.png)
+![Image of typography speccer](./assets/typography.png)
 In your component examples, use the following attribute.
 ```html
-<div data-speccer-typography="[left|right|top|bottom]" class="...">Some text</div>
+<div data-speccer-typography="[left|right|top|bottom]" class="...">
+  Some text
+</div>
 ```
 This will place a box to display typography information. Default is `left`.
@@ -191,7 +243,9 @@ document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
 ## Customization
-You can use the provided CSS variables to customize the look and feel. If more control is needed, you can use CSS overrides :)
+![Image of speccer dark mode](./assets/darkmode.png)
+Allthough the styling works nicely with dark mode, you can use the provided CSS variables to customize the look and feel. If more control is needed, you can use CSS overrides :)
 ```css
 .ph.speccer {
@@ -210,7 +264,8 @@ You can use the provided CSS variables to customize the look and feel. If more c
   --ph-speccer-typography-color-text: #57575b;
   --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
   --ph-speccer-depth-opacity-400: 0.4;
-  --ph-speccer-font-family: 'Menlo for Powerline', 'Menlo Regular for Powerline', 'DejaVu Sans Mono', Consolas, Monaco,
+  --ph-speccer-font-family: 'Menlo for Powerline',
+    'Menlo Regular for Powerline', 'DejaVu Sans Mono', Consolas, Monaco,
     'Andale Mono', 'Ubuntu Mono', monospace;
   --ph-speccer-font-size: 12px;
   --ph-speccer-line-height: 12px;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "6.2.1",
+  "version": "6.3.2",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -9,13 +9,14 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "rollup": "rollup -c",
-    "rollup:dev": "npm run clean && rollup -c -w",
+    "prerollup:dev": "npm run clean && npm run styles",
+    "rollup:dev": "rollup -c -w",
     "clean": "rm -rf dist/ dts/ ./speccer.css ./speccer.min.css ./speccer.js",
-    "build": "npm run clean && npm run rollup && npm run stylus && npm run postcss",
+    "build": "npm run clean && npm run rollup && npm run styles",
     "styles": "npm run stylus && npm run postcss",
     "stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
     "postcss": "rm -rf ./speccer.min.css && postcss ./speccer.css -o  speccer.min.css",
-    "dev": "node ./scripts/server.js",
+    "dev": "npx browser-sync start --server --files \"dev/*.html\" \"*.css\" --index \"dev/index.html\" --serveStatic \"/dev/*.html\"",
     "commit": "npx git-cz",
     "release": "npx standard-version"
   },
@@ -27,8 +28,8 @@
   ],
   "standard-version": {
     "scripts": {
-      "prerelease": "npm run build",
-      "posttag": "git push --follow-tags origin master && npm publish"
+      "prerelease": "npm run build && git add .",
+      "posttag": "git push --follow-tags origin main"
     },
     "types": [
       {
@@ -111,7 +112,8 @@
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^12.7.1",
-    "browser-sync": "^2.27.7",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "cssnano": "^5.0.4",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -123,19 +125,17 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
+    "network-information-types": "^0.1.1",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.4.1",
     "prettier-eslint": "^13.0.0",
     "rollup": "^2.39.0",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "stylus": "^0.56.0",
     "rollup-plugin-dts": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
+    "stylus": "^0.56.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4",
-    "network-information-types": "^0.1.0"
+    "typescript": "^4.5.4"
   }
 }

package/speccer.css CHANGED Viewed

@@ -23,21 +23,38 @@
   --ph-speccer-line-width-negative: -1px;
   --ph-speccer-measure-size: 8px;
 }
+svg.ph,
 .ph.speccer,
 .ph.speccer::after,
+.ph.speccer::before {
+  pointer-events: none;
+  user-select: none;
+  box-sizing: border-box;
+}
+.ph.speccer:not(path),
+.ph.speccer::after,
 .ph.speccer::before {
   font-family: var(--ph-speccer-font-family) !important;
   justify-content: center;
   align-items: center;
   z-index: 99999;
   position: absolute;
-  pointer-events: none;
-  user-select: none;
   display: flex;
   font-size: 12px;
-  box-sizing: border-box;
   line-height: 12px;
 }
+#ph-speccer-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 3;
+}
+svg.ph .ph.path {
+  color: var(--ph-speccer-color-contrast, #ff3aa8);
+}
 .ph.speccer.dissection {
   font-family: sans-serif;
   height: var(--ph-speccer-pin-size);
@@ -53,7 +70,6 @@
   line-height: 150%;
   font-size: 16px;
   z-index: 100000;
-  box-sizing: content-box;
 }
 .ph.speccer.dissection::after {
   content: "";
@@ -64,6 +80,10 @@
   background-color: var(--ph-speccer-pin-color);
   z-index: 99999;
 }
+.ph.speccer.dissection.svg::after,
+.ph.speccer.dissection.curly::after {
+  content: none !important;
+}
 .ph.speccer.dissection.outline::after,
 .ph.speccer.dissection.outline.top::after {
   height: var(--ph-speccer-pin-space);
@@ -76,11 +96,13 @@
   width: var(--ph-speccer-pin-space);
   top: 50%;
   left: 100%;
+  right: auto;
 }
 .ph.speccer.dissection.outline.right::after {
   height: var(--ph-speccer-line-width);
   width: var(--ph-speccer-pin-space);
   top: 50%;
+  left: auto;
   right: 100%;
 }
 .ph.speccer.dissection.outline.bottom::after {
@@ -116,6 +138,14 @@
   color: var(--ph-speccer-measure-color);
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
 }
+.ph.speccer.dissection.outline.enclose::after {
+  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
+  bottom: auto;
+}
+.ph.speccer.dissection.outline.enclose::before {
+  bottom: 100%;
+  top: auto;
+}
 .ph.speccer.dissection.outline.enclose.right::after {
   left: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
   right: auto;
@@ -148,46 +178,59 @@
   top: 100%;
   bottom: auto;
 }
-.ph.speccer.dissection.outline.full {
+.ph.speccer.dissection.outline.full:not(.curly) {
   border-radius: 0;
   background-color: transparent;
   color: var(--ph-speccer-measure-color);
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
+  border-bottom: none;
 }
-.ph.speccer.dissection.outline.full.right {
+.ph.speccer.dissection.outline.full:not(.curly)::after {
+  top: calc(-8px - var(--ph-speccer-pin-space));
+}
+.ph.speccer.dissection.outline.full:not(.curly)::before {
+  bottom: 100%;
+}
+.ph.speccer.dissection.outline.full:not(.curly).right {
+  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
   border-left: none;
 }
-.ph.speccer.dissection.outline.full.right::after {
+.ph.speccer.dissection.outline.full:not(.curly).right::after {
   left: calc(8px + var(--ph-speccer-pin-space));
 }
-.ph.speccer.dissection.outline.full.right::before {
+.ph.speccer.dissection.outline.full:not(.curly).right::before {
   left: 100%;
+  right: auto;
 }
-.ph.speccer.dissection.outline.full.left {
+.ph.speccer.dissection.outline.full:not(.curly).left {
+  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
   border-right: none;
 }
-.ph.speccer.dissection.outline.full.left::after {
+.ph.speccer.dissection.outline.full:not(.curly).left::after {
   left: calc(-8px - var(--ph-speccer-pin-space));
 }
-.ph.speccer.dissection.outline.full.left::before {
+.ph.speccer.dissection.outline.full:not(.curly).left::before {
   right: 100%;
+  left: auto;
 }
-.ph.speccer.dissection.outline.full.top {
+.ph.speccer.dissection.outline.full:not(.curly).top {
+  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
   border-bottom: none;
 }
-.ph.speccer.dissection.outline.full.top::after {
+.ph.speccer.dissection.outline.full:not(.curly).top::after {
   top: calc(-8px - var(--ph-speccer-pin-space));
 }
-.ph.speccer.dissection.outline.full.top::before {
+.ph.speccer.dissection.outline.full:not(.curly).top::before {
   bottom: 100%;
 }
-.ph.speccer.dissection.outline.full.bottom {
+.ph.speccer.dissection.outline.full:not(.curly).bottom {
+  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
   border-top: none;
 }
-.ph.speccer.dissection.outline.full.bottom::after {
+.ph.speccer.dissection.outline.full:not(.curly).bottom::after {
   top: calc(8px + var(--ph-speccer-pin-space));
 }
-.ph.speccer.dissection.outline.full.bottom::before {
+.ph.speccer.dissection.outline.full:not(.curly).bottom::before {
   top: 100%;
 }
 .ph.speccer.dissection.outline.bottom::after {
@@ -206,18 +249,20 @@
 [data-anatomy-section] {
   counter-reset: type;
 }
-.ph.speccer.dissection.outline.full.right,
-.ph.speccer.dissection.outline.full.left {
+.ph.speccer.dissection.outline.full.right:not(.curly),
+.ph.speccer.dissection.outline.full.left:not(.curly) {
   width: 8px;
 }
-.ph.speccer.dissection.outline.full.top,
-.ph.speccer.dissection.outline.full.bottom {
+.ph.speccer.dissection.outline.full:not(.curly),
+.ph.speccer.dissection.outline.full.top:not(.curly),
+.ph.speccer.dissection.outline.full.bottom:not(.curly) {
   height: 8px;
 }
-.ph.speccer.dissection.outline.full.right::after,
-.ph.speccer.dissection.outline.full.left::after,
-.ph.speccer.dissection.outline.full.top::after,
-.ph.speccer.dissection.outline.full.bottom::after {
+.ph.speccer.dissection.outline.full:not(.curly)::after,
+.ph.speccer.dissection.outline.full.right:not(.curly)::after,
+.ph.speccer.dissection.outline.full.left:not(.curly)::after,
+.ph.speccer.dissection.outline.full.top:not(.curly)::after,
+.ph.speccer.dissection.outline.full.bottom:not(.curly)::after {
   content: attr(data-dissection-counter);
   height: var(--ph-speccer-pin-size);
   width: var(--ph-speccer-pin-size);
@@ -232,35 +277,38 @@
   font-size: 16px;
   z-index: 100000;
 }
-.ph.speccer.dissection.outline.full.right::after,
-.ph.speccer.dissection.outline.full.left::after {
+.ph.speccer.dissection.outline.full.right:not(.curly)::after,
+.ph.speccer.dissection.outline.full.left:not(.curly)::after {
   top: 50%;
   transform: translateY(-50%);
 }
-.ph.speccer.dissection.outline.full.top::after,
-.ph.speccer.dissection.outline.full.bottom::after {
+.ph.speccer.dissection.outline.full:not(.curly)::after,
+.ph.speccer.dissection.outline.full.top:not(.curly)::after,
+.ph.speccer.dissection.outline.full.bottom:not(.curly)::after {
   left: 50%;
   transform: translateX(-50%);
 }
-.ph.speccer.dissection.outline.full.right::before,
-.ph.speccer.dissection.outline.full.left::before,
-.ph.speccer.dissection.outline.full.top::before,
-.ph.speccer.dissection.outline.full.bottom::before {
+.ph.speccer.dissection.outline.full:not(.curly)::before,
+.ph.speccer.dissection.outline.full.right:not(.curly)::before,
+.ph.speccer.dissection.outline.full.left:not(.curly)::before,
+.ph.speccer.dissection.outline.full.top:not(.curly)::before,
+.ph.speccer.dissection.outline.full.bottom:not(.curly)::before {
   content: "";
   position: absolute;
   background-color: var(--ph-speccer-pin-color);
   z-index: 100000;
   display: block;
 }
-.ph.speccer.dissection.outline.full.right::before,
-.ph.speccer.dissection.outline.full.left::before {
+.ph.speccer.dissection.outline.full.right:not(.curly)::before,
+.ph.speccer.dissection.outline.full.left:not(.curly)::before {
   top: 50%;
   transform: translateY(-50%);
   height: var(--ph-speccer-line-width);
   width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
 }
-.ph.speccer.dissection.outline.full.top::before,
-.ph.speccer.dissection.outline.full.bottom::before {
+.ph.speccer.dissection.outline.full:not(.curly)::before,
+.ph.speccer.dissection.outline.full.top:not(.curly)::before,
+.ph.speccer.dissection.outline.full.bottom:not(.curly)::before {
   left: 50%;
   transform: translateX(-50%);
   width: var(--ph-speccer-line-width);
@@ -270,10 +318,12 @@
 .ph.speccer.dissection.outline.enclose.left {
   width: 8px;
 }
+.ph.speccer.dissection.outline.enclose,
 .ph.speccer.dissection.outline.enclose.top,
 .ph.speccer.dissection.outline.enclose.bottom {
   height: 8px;
 }
+.ph.speccer.dissection.outline.enclose::after,
 .ph.speccer.dissection.outline.enclose.right::after,
 .ph.speccer.dissection.outline.enclose.left::after,
 .ph.speccer.dissection.outline.enclose.top::after,
@@ -297,11 +347,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
+.ph.speccer.dissection.outline.enclose::after,
 .ph.speccer.dissection.outline.enclose.top::after,
 .ph.speccer.dissection.outline.enclose.bottom::after {
   left: 50%;
   transform: translateX(-50%);
 }
+.ph.speccer.dissection.outline.enclose::before,
 .ph.speccer.dissection.outline.enclose.right::before,
 .ph.speccer.dissection.outline.enclose.left::before,
 .ph.speccer.dissection.outline.enclose.top::before,
@@ -319,6 +371,7 @@
   height: var(--ph-speccer-line-width);
   width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
 }
+.ph.speccer.dissection.outline.enclose::before,
 .ph.speccer.dissection.outline.enclose.top::before,
 .ph.speccer.dissection.outline.enclose.bottom::before {
   left: 50%;
@@ -343,39 +396,42 @@
   background-color: transparent;
   border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
 }
-.ph.speccer.dissection.outline.full.subtle {
-  border-width: var(--ph-speccer-line-width);
-  border-style: dashed;
-  border-color: var(--ph-speccer-pin-color);
+.ph.speccer.dissection.outline.full.subtle:not(.curly) {
+  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
   background-color: transparent;
+  border-bottom: none;
 }
-.ph.speccer.dissection.outline.full.subtle.top {
+.ph.speccer.dissection.outline.full.subtle:not(.curly).top {
+  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
   border-bottom: none;
 }
-.ph.speccer.dissection.outline.full.subtle.bottom {
+.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom {
+  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
   border-top: none;
 }
-.ph.speccer.dissection.outline.full.subtle.right {
+.ph.speccer.dissection.outline.full.subtle:not(.curly).right {
+  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
   border-left: none;
 }
-.ph.speccer.dissection.outline.full.subtle.left {
+.ph.speccer.dissection.outline.full.subtle:not(.curly).left {
+  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
   border-right: none;
 }
-.ph.speccer.dissection.outline.full.subtle::after {
+.ph.speccer.dissection.outline.full.subtle:not(.curly)::after {
   height: var(--ph-speccer-pin-size);
   width: var(--ph-speccer-pin-size);
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
   background-color: var(--ph-speccer-color-text-light);
   color: var(--ph-speccer-pin-color);
 }
-.ph.speccer.dissection.outline.full.subtle.top::before,
-.ph.speccer.dissection.outline.full.subtle.bottom::before {
+.ph.speccer.dissection.outline.full.subtle:not(.curly).top::before,
+.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom::before {
   width: 0;
   background-color: transparent;
   border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
 }
-.ph.speccer.dissection.outline.full.subtle.right::before,
-.ph.speccer.dissection.outline.full.subtle.left::before {
+.ph.speccer.dissection.outline.full.subtle:not(.curly).right::before,
+.ph.speccer.dissection.outline.full.subtle:not(.curly).left::before {
   height: 0;
   background-color: transparent;
   border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
@@ -591,6 +647,9 @@
   list-style: none;
   border: none;
 }
+.ph.speccer.measure {
+  display: flex;
+}
 .ph.speccer.measure.width {
   color: var(--ph-speccer-measure-color);
   border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);

package/speccer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,n="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==n)).forEach((e=>t.classList.add(e))))},n=(t,e)=>`${t} ${Object.keys(e).filter((t=>e[t])).join(" ")}`.trim(),i=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],o=t=>parseInt(t,10),p=t=>o(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,a=()=>new Promise(requestAnimationFrame),l=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await a(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((n=>t.style[n]=e[n])))},r=async t=>(await a(),getComputedStyle(t,null)),d=(t,e,n)=>t-e.width/2+n.width/2,c=(t,e,n)=>t-e.height/2+n.height/2,s=async t=>{await a();const e=t.getBoundingClientRect();return{top:e.top+window.pageYOffset,left:e.left+window.pageXOffset}},h=(t="",n="span")=>{const i=document.createElement(n),o=document.createTextNode(t+"");return i.appendChild(o),i.setAttribute("title",t+"px"),e(i,"ph speccer spacing"),i},f=async t=>{if(!t)return;const n=await r(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;const i=(t=>{const{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}=t;return{marginTop:e,marginBottom:n,marginLeft:i,marginRight:o,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}})(n),p=Object.keys(i).filter((t=>"0px"!==i[t]));0!==p.length&&p.forEach((async n=>{const p=o(i[n]),r=h(p),d=(t=>-1!==t.indexOf("Top")?t.replace("Top"," top"):-1!==t.indexOf("Right")?t.replace("Right"," right"):-1!==t.indexOf("Bottom")?t.replace("Bottom"," bottom"):-1!==t.indexOf("Left")?t.replace("Left"," left"):"")(n);e(r,d),document.body.appendChild(r),t.classList.add("is-specced"),await(async(t,e,n,i)=>{await a();const o=i.getBoundingClientRect(),p=await s(i);"marginTop"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top-e+"px"}),"marginRight"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left+parseInt(o.width+"",10)+"px",top:p.top+"px"}),"marginBottom"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top+parseInt(o.height+"",10)+"px"}),"marginLeft"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left-e+"px",top:p.top+"px"}),"paddingTop"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top+"px"}),"paddingBottom"===t&&l(n,{height:`${e}px`,width:o.width+"px",left:p.left+"px",top:p.top+(parseInt(o.height+"",10)-e)+"px"}),"paddingRight"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left+(parseInt(o.width+"",10)-e)+"px",top:p.top+"px"}),"paddingLeft"===t&&l(n,{height:o.height+"px",width:`${e}px`,left:p.left+"px",top:p.top+"px"})})(n,p,r,t)}))};var g,x,u=Object.freeze({__proto__:null,create:h,element:f});!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(g||(g={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(x||(x={}));const m=(t,e=3)=>parseFloat(t+"").toFixed(e),y=(t="",i,o="span")=>{const p=document.createElement(o),a=document.createTextNode(t),l={};null!==i&&""!==i&&(l[i]=!0),-1===i.indexOf(x.Full)&&-1===i.indexOf(x.Enclose)?p.appendChild(a):-1===i.indexOf(x.Full)&&-1===i.indexOf(x.Enclose)||p.setAttribute("data-dissection-counter",t);const r=n("ph speccer dissection",l);return e(p,r),p},w=t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&e.forEach((async(t,e)=>{if(!t)return;const n=t.getAttribute("data-anatomy")||"";if(!n||""===n)return;const o=y(i[e],n);document.body.appendChild(o);const a=await(async(t,e,n)=>{const i=e.getBoundingClientRect(),o=n.getBoundingClientRect(),a=p(n),l=await s(e),r=l.left-o.width-a+"px",h=m(c(l.top,o,i))+"px",f=l.left+i.width+a+"px",g=m(c(l.top,o,i))+"px",u=m(d(l.left,o,i))+"px",y=l.top-o.height-a+"px",w=m(d(l.left,o,i))+"px",O=l.top+i.height+a+"px";let b={};return b=-1!==t.indexOf(x.Outline)?-1!==t.indexOf(x.Left)?-1!==t.indexOf(x.Full)?{left:l.left-8+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:r,top:h}:-1!==t.indexOf(x.Right)?-1!==t.indexOf(x.Full)?{left:l.left+i.width+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left+-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:f,top:g}:-1!==t.indexOf(x.Top)?-1!==t.indexOf(x.Full)?{top:l.top+-8+"px",left:l.left+-1+"px",width:i.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:l.top+-1+"px",left:l.left+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:u,top:y}:-1!==t.indexOf(x.Bottom)?-1!==t.indexOf(x.Full)?{top:l.top+i.height+"px",left:l.left+-1+"px",width:i.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:l.top+-1+"px",left:l.left+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:w,top:O}:-1!==t.indexOf(x.Full)?{left:l.left+i.width+"px",top:l.top+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left+i.width+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:r,top:h}:-1!==t.indexOf(x.Full)?{left:l.left-8+"px",top:l.top+-1+"px",height:i.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:l.left-1+"px",top:l.top+-1+"px",height:i.height+"px",width:i.width+"px"}:{left:r,top:h},b})(n,t,o);l(o,a)}))};const O=(t="",n="",i="span")=>{const o=document.createElement(i);return o.setAttribute("title",t+"px"),o.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(o,`ph speccer measure ${n}`),o},b=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const n=await r(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;await a();const i=t.getBoundingClientRect(),o=i.top+window.pageYOffset,p=i.left+window.pageXOffset;if(-1!==e.indexOf("width"))if(-1!==e.indexOf("bottom")){const t=O(i.width,e);document.body.appendChild(t),l(t,{left:p+"px",top:o+i.height+1+"px",width:i.width+"px"})}else{const t=O(i.width,e);document.body.appendChild(t);const n=t.getBoundingClientRect();l(t,{left:p+"px",top:o-n.height+1+"px",width:i.width+"px"})}else if(-1!==e.indexOf("height"))if(-1!==e.indexOf("right")){const t=O(i.height,e);document.body.appendChild(t),l(t,{left:p+i.width+"px",top:o+"px",height:i.height+"px"})}else{const t=O(i.height,e);document.body.appendChild(t);const n=t.getBoundingClientRect();l(t,{left:p-n.width+"px",top:o+"px",height:i.height+"px"})}};const E=(t,i)=>{const o=document.createElement("div"),p={};null!==i&&""!==i&&(p[i]=!0);const a=n("ph speccer typography",p);return o.innerHTML=t,e(o,a),o};const A=t=>{const e=()=>function(t,e,n){let i;return function(){const o=this,p=arguments,a=function(){i=null,n||t.apply(o,p)},l=n&&!i;i&&clearTimeout(i),i=setTimeout(a,e),l&&t.apply(o,p)}}((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},S=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},R=()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(f(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(b(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const n=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(w(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{n.observe(t)}))},v=t=>{window.speccer=t},B=t=>{const e=document.currentScript;if(e){const n=e.getAttribute("src");!n||-1===n.indexOf("speccer.js")&&-1===n.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?v(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?S(t):e.hasAttribute("data-lazy")?R():S(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}};const C=u,_=Object.freeze({__proto__:null,create:y,element:w}),L=Object.freeze({__proto__:null,element:b}),T=Object.freeze({__proto__:null,create:E,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),n=await r(t);if("none"===n.display||"0"===n.opacity||"hidden"===n.visibility)return;t.classList.add("is-specced");const i=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:a,fontWeight:l}=t;return{lineHeight:e,letterSpacing:n,fontFamily:i,fontSize:o,fontStyle:p,fontVariationSettings:a,fontWeight:l}})(await r(t)),n="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} / ${n};</li>  <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li>  <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),o=E(i,e);document.body.appendChild(o);const a=await(async(t,e,n)=>{const i=e.getBoundingClientRect(),o=p(n),a=n.getBoundingClientRect(),l=await s(e),r=l.left-a.width-o+"px",h=m(c(l.top,a,i))+"px",f=l.left+i.width+o+"px",x=m(c(l.top,a,i))+"px",u=m(d(l.left,a,i))+"px",y=l.top-a.height-o+"px",w=m(d(l.left,a,i))+"px",O=l.top+i.height+o+"px";let b={left:r,top:h};return t&&-1!==t.indexOf(g.Right)?b={left:f,top:x}:t&&-1!==t.indexOf(g.Top)?b={left:u,top:y}:t&&-1!==t.indexOf(g.Bottom)&&(b={left:w,top:O}),b})(e,t,o);l(o,a)}}),$=Object.freeze({__proto__:null,dom:S,lazy:R,manual:v,activate:B}),F=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".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]"),n=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section]");t.forEach(C.element),e.forEach(L.element),n.forEach(T.element),i.forEach(_.element)};B(F),t.default=F,t.dissect=_,t.measure=L,t.modes=$,t.spacing=C,t.typography=T,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,o="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==o)).forEach((e=>t.classList.add(e))))},o=(t,e)=>t?e||"string"==typeof t?`${t} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():`${Object.keys(t).filter((e=>t[e])).join(" ")}`.trim():"",i=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],n=t=>parseInt(t,10),r=t=>n(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,s=()=>new Promise(requestAnimationFrame),a=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await s(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((o=>t.style[o]=e[o])))},p=async t=>(await s(),getComputedStyle(t,null)),c=(t,e,o)=>t-e.width/2+o.width/2,l=(t,e,o)=>t-e.height/2+o.height/2,h=async t=>{await s();const e=t.getBoundingClientRect(),o=e.top+window.pageYOffset,i=e.left+window.pageXOffset;return{height:e.height,width:e.width,top:o,left:i}},d=async(t,e)=>{await s();const o=t.getBoundingClientRect(),i=await h(e),n=await(async(t,e)=>{await s();const o=t.getBoundingClientRect(),i=e.getBoundingClientRect(),n=i.top+window.pageYOffset,r=i.left+window.pageXOffset;return{height:i.height,width:i.width,top:l(n,o,i),left:c(r,o,i)}})(t,e),r=i.height,a=i.width,p=o.height,d=o.width;return{absolute:()=>({top:i.top,left:i.left,height:r,width:a}),toTop:({center:t=!1,sourceHeight:e=p,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:a}),fromTop:({center:t=!1,sourceHeight:e=p,modifier:o=0}={})=>({top:i.top-e-o,left:t?n.left:i.left,height:r,width:a}),toBottom:({center:t=!1,sourceHeight:e=p,targetHeight:o=r,modifier:s=0}={})=>({top:i.top+o-(e+s),left:t?n.left:i.left,height:r,width:a}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:a}),toLeft:({center:t=!1,sourceWidth:e=d,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:a}),fromLeft:({center:t=!1,sourceWidth:e=d,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left-e-o,height:r,width:a}),toRight:({center:t=!1,sourceWidth:e=d,targetWidth:o=a,modifier:s=0}={})=>({top:t?n.top:i.top,left:i.left+o-(e+s),height:r,width:a}),fromRight:({center:t=!1,targetWidth:e=a,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:a})}},f=(t="",o="span")=>{const i=document.createElement(o),n=document.createTextNode(t+"");return i.appendChild(n),i.setAttribute("title",t+"px"),e(i,"ph speccer spacing"),i},u=async t=>{if(!t)return;const o=await p(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;const i=(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}})(o),r=Object.keys(i).filter((t=>"0px"!==i[t]));0!==r.length&&r.forEach((async o=>{const r=n(i[o]),p=f(r),c=(t=>-1!==t.indexOf("Top")?t.replace("Top"," top"):-1!==t.indexOf("Right")?t.replace("Right"," right"):-1!==t.indexOf("Bottom")?t.replace("Bottom"," bottom"):-1!==t.indexOf("Left")?t.replace("Left"," left"):"")(o);e(p,c),document.body.appendChild(p),t.classList.add("is-specced"),await(async(t,e,o,i)=>{await s();const n=i.getBoundingClientRect(),r=await h(i);"marginTop"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top-e+"px"}),"marginRight"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left+parseInt(n.width+"",10)+"px",top:r.top+"px"}),"marginBottom"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+parseInt(n.height+"",10)+"px"}),"marginLeft"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}),"paddingTop"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+"px"}),"paddingBottom"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+(parseInt(n.height+"",10)-e)+"px"}),"paddingRight"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left+(parseInt(n.width+"",10)-e)+"px",top:r.top+"px"}),"paddingLeft"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"})})(o,r,p,t)}))};var m=Object.freeze({__proto__:null,create:f,element:u});function g(t,e,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(t):i?i.value:e.get(t)}function y(t,e,o,i,n){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?n.call(t,o):n?n.value=o:e.set(t,o),o}const w=()=>"_"+Math.random().toString(36).substring(2,11),x=t=>t.top,b=t=>t.left+t.width,E=t=>t.top+t.height,$=t=>t.left,v=t=>t.left+t.width/2,A=t=>t.top+t.height/2,S={center:t=>({x:v(t),y:A(t)}),top:t=>({x:v(t),y:x(t)}),right:t=>({x:b(t),y:A(t)}),bottom:t=>({x:v(t),y:E(t)}),left:t=>({x:$(t),y:A(t)}),"right-top":t=>({x:b(t),y:x(t)}),"right-bottom":t=>({x:b(t),y:E(t)}),"left-top":t=>({x:$(t),y:x(t)}),"left-bottom":t=>({x:$(t),y:E(t)}),"top-left":t=>({x:$(t),y:x(t)}),"top-right":t=>({x:b(t),y:x(t)}),"bottom-left":t=>({x:$(t),y:E(t)}),"bottom-right":t=>({x:b(t),y:E(t)}),"top-center":t=>({x:v(t),y:x(t)}),"right-center":t=>({x:b(t),y:A(t)}),"bottom-center":t=>({x:v(t),y:E(t)}),"left-center":t=>({x:$(t),y:A(t)})},O=async(t,e,o="center",i="center")=>{if(!t||!e)throw"No element given";const{x:n,y:r}=await C(t,o),{x:s,y:a}=await C(e,i);return{x1:n,y1:r,x2:s,y2:a}},C=async(t,e="center")=>{if(!e)throw"No position given";if("string"!=typeof e)throw"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`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`;await s();const i=t.getBoundingClientRect();return S[e](i)},B=async({start:t,stop:e,crude:o=!1})=>{const{x1:i,y1:n,x2:r,y2:s}=await O(t,e),a=((t,e,o,i,n=!0)=>{if(!(t&&e&&o&&i))throw new SyntaxError("Missing input for `angle`");if("number"!=typeof t||"number"!=typeof e||"number"!=typeof o||"number"!=typeof i)throw new TypeError(`Parameters for \`angle\` does not have 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),a})(i,n,r,s);return o?T(a):R(a)},R=t=>{if(t>360)throw RangeError("parameter cannot exceed 360");if(t<0)throw 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"},T=t=>{if(t>360)throw RangeError("parameter cannot exceed 360");if(t<0)throw RangeError("parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"},L=(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}},P=async(t,e,o)=>{const{pos1:i,pos2:n,firstSet:r=!1,direction:s}=o,{x1:a,y1:p,x2:c,y2:l}=await O(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 f=L({x1:a+0,x2:c+h,y1:p+0,y2:l+d},{direct:!0,firstSet:r,direction:s}),{firstPoint:u,firstControl:m,lastControl:g,lastPoint:y}=f;return"M "+u.x+" "+u.y+"C "+m.x+" "+m.y+", "+g.x+" "+g.y+", "+y.x+" "+y.y};var _,M,j,k,N,W,I,z,q,H,V,F;class D{constructor(t,e){_.add(this),M.set(this,void 0),j.set(this,void 0),g(this,_,"m",k).call(this,t,e)}connect(){this.draw(g(this,j,"f"))}async draw(t){if(!t)throw"No path given to draw!";const e=`ph_draw_path-path-${w()}`,o=t.cloneNode(!1);if(o.setAttribute("id",e),o.setAttribute("data-start-el",this.startElement.getAttribute("id")||"no-id-found"),o.classList.remove("original"),o.classList.add("speccer"),!t.parentNode)throw"No parentNode found for path";this.line=t.parentNode.insertBefore(o,t.nextSibling);const i=await B({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:n,pos2:r}=(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}})(i),s=await(async(t,e,o)=>{const{pos1:i,pos2:n}=o,{x1:r,y1:s,x2:a,y2:p}=await O(t,e,i,n),c=L({x1:r,x2:a,y1:s,y2:p},{direction:""}),{firstPoint:l,firstControl:h,lastControl:d,lastPoint:f}=c;return"M "+l.x+" "+l.y+"C "+h.x+" "+h.y+", "+d.x+" "+d.y+", "+f.x+" "+f.y})(this.startElement,this.stopElement,{pos1:n,pos2:r});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",n),this.line.setAttribute("data-pos2",r),this.line.setAttribute("d",s)}}M=new WeakMap,j=new WeakMap,_=new WeakSet,k=function(t,e){if(!t||!e)throw"Missing inputs startElement and stopElement";if(!document.body.contains(e))throw"stopElement is not in the DOM";if(!document.body.contains(t))throw"startElement is not in the DOM";if(this.startElement=t,this.stopElement=e,y(this,M,document.getElementById("ph-speccer-svg"),"f"),y(this,j,document.getElementById("ph-speccer-path"),"f"),!g(this,j,"f")||!g(this,M,"f"))throw"Missing required SVG element to draw lines. Please see the documentation";this.connect()},window.DrawSVGLine=D;class G{constructor(t,e){N.add(this),W.set(this,void 0),I.set(this,void 0),g(this,N,"m",z).call(this,t,e)}connect(){this.draw(g(this,I,"f"))}async draw(t){if(!t)throw"No path given to draw!";const e=g(this,N,"m",q).call(this,t),o=g(this,N,"m",q).call(this,t);if(!t.parentNode)throw"No parentNode found for path";this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(o,t.nextSibling);const i=await B({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 P(this.startElement,this.stopElement,{pos1:n,pos2:r,firstSet:!0,direction:i}),c=await P(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)}}W=new WeakMap,I=new WeakMap,N=new WeakSet,z=function(t,e){if(!t||!e)throw"Missing inputs startElement and stopElement";if(!document.body.contains(e))throw"stopElement is not in the DOM";if(!document.body.contains(t))throw"startElement is not in the DOM";if(this.startElement=t,this.stopElement=e,y(this,W,document.getElementById("ph-speccer-svg"),"f"),y(this,I,document.getElementById("ph-speccer-path"),"f"),!g(this,I,"f")||!g(this,W,"f"))throw"Missing required SVG element to draw lines. Please see the documentation";this.connect()},q=function(t){if(!t)throw"No path given to #getPathElement!";const e=`ph_draw_path-path-${w()}`,o=t.cloneNode(!1);return o.setAttribute("data-start-el",this.startElement.getAttribute("id")||"no-id-found"),o.setAttribute("id",e),o.classList.remove("original"),o.classList.add("speccer"),o},window.DrawSVGCurlyBracket=G,function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(H||(H={})),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"}(V||(V={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(F||(F={}));const X=t=>t.split(" "),Y=t=>X(t).includes(V.Right),J=t=>X(t).includes(V.Bottom),K=t=>X(t).includes(V.Full),Q=t=>X(t).includes(V.Enclose),U=t=>-1!==t.indexOf(V.Full)&&-1!==t.indexOf(V.Curly),Z=async(t,e,o,i)=>{const{isCurly:s}=i,a=r(o),p=n(getComputedStyle(o).getPropertyValue("--ph-speccer-measure-size"))||8;const c=await d(o,e);if(Q(t)){const{left:t,top:e,height:o,width:i}=c.absolute();return{left:`${t}px`,top:`${e}px`,height:`${o}px`,width:`${i}px`}}if(X(t).includes(V.Left)){if(K(t)&&!s){const{left:t,top:e,height:o}=c.fromLeft({sourceWidth:p});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}{const{left:t,top:e}=c.fromLeft({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}}if(Y(t)){if(K(t)&&!s){const{left:t,top:e,height:o}=c.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}{const{left:t,top:e}=c.fromRight({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}}if(J(t)){if(K(t)&&!s){const{left:t,top:e,width:o}=c.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}{const{left:t,top:e}=c.fromBottom({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}}if(K(t)&&!s){const{left:t,top:e,width:o}=c.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}{const{left:t,top:e}=c.fromTop({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}},tt=(t="",i,n="span")=>{const r=document.createElement(n),s=document.createTextNode(t),a={};null!==i&&""!==i&&(a[i]=!0),!K(i)&&!Q(i)||K(i)&&U(i)?r.appendChild(s):(K(i)||Q(i))&&r.setAttribute("data-dissection-counter",t);const p=o("ph speccer dissection",a);return e(r,p),r},et=t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");if(e){let t=0;e.forEach((async(e,o)=>{if(!e)return Promise.resolve();const n=e.getAttribute("data-anatomy")||"";if(!n||""===n||-1===n.indexOf(V.Outline))return;let r=i[o];r||(r=`${i[t]}${i[t].toLowerCase()}`,t++);const s=tt(r,n);document.body.appendChild(s);const p=await Z(n,e,s,{isCurly:U(n)});var c;await a(s,p),-1===(c=n).indexOf(V.Curly)&&-1===c.indexOf(V.Full)&&-1===c.indexOf(V.Enclose)&&-1!==c.indexOf(V.SVG)?new D(e,s):U(n)&&new G(e,s)}))}};const ot=(t="",o="",i="span")=>{const n=document.createElement(i);return n.setAttribute("title",t+"px"),n.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(n,`ph speccer measure ${o}`),n},it=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const o=await p(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;await s();const i=t.getBoundingClientRect();if(X(e).includes(F.Width))if(J(e)){const o=ot(i.width,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,width:p}=n.fromBottom({center:!1});await a(o,{left:`${r}px`,top:`${s}px`,width:`${p}px`})}else{const o=ot(i.width,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,width:p}=n.fromTop({center:!1,modifier:-8});await a(o,{left:`${r}px`,top:`${s}px`,width:`${p}px`})}else if((t=>X(t).includes(F.Height))(e))if(Y(e)){const o=ot(i.height,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,height:p}=n.fromRight({center:!1});await a(o,{left:`${r}px`,top:`${s}px`,height:`${p}px`})}else{const o=ot(i.height,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,height:p}=n.fromLeft({center:!1,modifier:-8});await a(o,{left:`${r}px`,top:`${s}px`,height:`${p}px`})}};const nt=(t,e=3)=>parseFloat(t+"").toFixed(e),rt=(t,i)=>{const n=document.createElement("div"),r={};null!==i&&""!==i&&(r[i]=!0);const s=o("ph speccer typography",r);return n.innerHTML=t,e(n,s),n};const st=t=>{const e=()=>function(t,e,o){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)},at=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},pt=()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(u(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(it(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const o=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(et(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{o.observe(t)}))},ct=t=>{window.speccer=t},lt=t=>{const e=document.currentScript;if(e){const o=e.getAttribute("src");!o||-1===o.indexOf("speccer.js")&&-1===o.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?ct(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?at(t):e.hasAttribute("data-lazy")?pt():at(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||st(t))}};const ht=m,dt=Object.freeze({__proto__:null,create:tt,element:et}),ft=Object.freeze({__proto__:null,element:it}),ut=Object.freeze({__proto__:null,create:rt,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),o=await p(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;t.classList.add("is-specced");const i=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 p(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>}`})(t),n=rt(i,e);document.body.appendChild(n);const s=await(async(t,e,o)=>{const i=e.getBoundingClientRect(),n=r(o),s=o.getBoundingClientRect(),a=await h(e),p=a.left-s.width-n+"px",d=nt(l(a.top,s,i))+"px",f=a.left+i.width+n+"px",u=nt(l(a.top,s,i))+"px",m=nt(c(a.left,s,i))+"px",g=a.top-s.height-n+"px",y=nt(c(a.left,s,i))+"px",w=a.top+i.height+n+"px";let x={left:p,top:d};return t&&-1!==t.indexOf(H.Right)?x={left:f,top:u}:t&&-1!==t.indexOf(H.Top)?x={left:m,top:g}:t&&-1!==t.indexOf(H.Bottom)&&(x={left:y,top:w}),x})(e,t,n);a(n,s)}}),mt=Object.freeze({__proto__:null,dom:at,lazy:pt,manual:ct,activate:lt}),gt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".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]");t.forEach(ht.element),e.forEach(ft.element),o.forEach(ut.element),i.forEach(dt.element)};lt(gt),t.default=gt,t.dissect=dt,t.measure=ft,t.modes=mt,t.spacing=ht,t.typography=ut,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=speccer.js.map

package/speccer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/debounce.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/helpers/spacing/position.ts","src/enums/area.ts","src/lib/number.ts","src/tasks/dissect.ts","src/helpers/dissect/styles.ts","src/tasks/measure.ts","src/helpers/typography/position.ts","src/tasks/typography.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts"],"sourcesContent":["export const after = (el: HTMLElement \| null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 /\n'use strict';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (cls: string, cls_obj: {}): string =>\n `${cls} ${Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')}`.trim();\n","/ eslint no-console:0 /\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = ['TR', 'TH', 'TD', 'TBODY', 'THEAD', 'TFOOT'];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n","/ eslint no-console:0 /\n'use strict';\nimport { SPECCER_DEFAULT_PIN_SPACE } from './constants';\nimport { SpacingCSSPropertiesType, TypographyCSSPropertiesType } from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string \| number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) \|\| (_value <= 0 && _value > -1) ? 0 : _value;\n};\n\nexport const getClassNameFromCSSProperty = (property: string) => {\n if (property.indexOf('Top') !== -1) {\n return property.replace('Top', ' top');\n } else if (property.indexOf('Right') !== -1) {\n return property.replace('Right', ' right');\n } else if (property.indexOf('Bottom') !== -1) {\n return property.replace('Bottom', ' bottom');\n } else if (property.indexOf('Left') !== -1) {\n return property.replace('Left', ' left');\n }\n\n return '';\n};\n\nexport const getSpacing = (style: SpacingCSSPropertiesType): SpacingCSSPropertiesType => {\n const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight } =\n style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (style: TypographyCSSPropertiesType): TypographyCSSPropertiesType => {\n const { lineHeight, letterSpacing, fontFamily, fontSize, fontStyle, fontVariationSettings, fontWeight } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')) \|\| SPECCER_DEFAULT_PIN_SPACE;\n","/ eslint no-console:0 /\n'use strict';\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n\nconst debounce = function (func: Function, wait: number, immediate?: boolean): Function {\n let timeout: null \| ReturnType<typeof setTimeout>;\n\n return function (this: any) {\n const context = this;\n const args = arguments;\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","/ eslint no-console:0 /\n'use strict';\nimport { waitForFrame } from './debounce';\n\nexport const add = async (el: HTMLElement, styles: [] \| object) => {\n if (\n !el \|\|\n !styles \|\|\n typeof styles === 'string' \|\|\n typeof styles === 'number' \|\|\n typeof styles === 'boolean' \|\|\n (Array.isArray(styles) && styles.length === 0) \|\|\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach((style: { key: string; value: string }) => (el.style[style.key] = style.value));\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","import { waitForFrame } from './debounce';\n\nexport const get_horizontal_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>\n modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (modifier: number, startRect: DOMRect, targetRect: DOMRect): number =>\n modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const offset = async (targetEl: HTMLElement): Promise<{ left: number; top: number }> => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n top: _el_offset_top,\n left: _el_offset_left\n };\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/spacing';\n\nexport const create = (text: string \| number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _target_styles = await styles.get(targetEl);\n\n if (_target_styles.display === 'none' \|\| _target_styles.opacity === '0' \|\| _target_styles.visibility === 'hidden') {\n return;\n }\n\n const _target_spacing_styles = css.getSpacing(_target_styles);\n const _target_pruned_spacing_styles = Object.keys(_target_spacing_styles).filter((property) => {\n const _value = _target_spacing_styles[property];\n\n return _value !== '0px';\n });\n\n if (_target_pruned_spacing_styles.length === 0) return;\n\n _target_pruned_spacing_styles.forEach(async (property) => {\n const _value = css.getNumberValue(_target_spacing_styles[property]);\n const _speccer_el = create(_value);\n const _class_name = css.getClassNameFromCSSProperty(property);\n\n classnames.set(_speccer_el, _class_name);\n document.body.appendChild(_speccer_el);\n\n targetEl.classList.add('is-specced');\n await helpers.position(property, _value, _speccer_el, targetEl);\n });\n};\n","import * as styles from '../../lib/styles';\nimport { offset } from '../../lib/position';\nimport { waitForFrame } from '../../lib/debounce';\n\nexport const position = async (property: string, value: number, spacingEl: HTMLElement, targetEl: HTMLElement) => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n\n if (property === 'marginTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top - value + 'px'\n });\n }\n\n if (property === 'marginRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'marginBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n }\n\n if (property === 'marginLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left - value + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + (parseInt(_target_rect.height + '', 10) - value) + 'px'\n });\n }\n\n if (property === 'paddingRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + (parseInt(_target_rect.width + '', 10) - value) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n};\n","export enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","/* eslint no-console:0 /\n'use strict';\n\nexport const decimal = (number: string \| number, decimals = 3): string => parseFloat(number + '').toFixed(decimals);\n","/ eslint no-console:0 /\n'use strict';\n\nimport as styles from '../lib/styles';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (area.indexOf(DissectAreaEnum.Full) === -1 && area.indexOf(DissectAreaEnum.Enclose) === -1) {\n _el.appendChild(_text_node);\n } else if (area.indexOf(DissectAreaEnum.Full) !== -1 \|\| area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx('ph speccer dissection', _extra_class_names);\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = (sectionEl: HTMLElement) => {\n if (!sectionEl) return;\n\n const _dissection_els = sectionEl.querySelectorAll('[data-anatomy]');\n\n if (_dissection_els) {\n _dissection_els.forEach(async (targetEl: HTMLElement, targetIndex) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-anatomy') \|\| '';\n\n if (!_area \|\| _area === '') return;\n\n const _dissection_el = create(SPECCER_LITERALS[targetIndex], _area);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = await helpers.styles(_area, targetEl, _dissection_el);\n\n styles.add(_dissection_el, _dissection_styles);\n });\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport { get_horizontal_center_of_els, get_vertical_center_of_els, offset } from '../../lib/position';\nimport { DissectAreaEnum } from '../../enums/area';\n\nexport const styles = async (area: string, targetEl: HTMLElement, dissectionEl: HTMLElement) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const _dissection_el_rect = dissectionEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left = _el_offset.left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _dissection_el_rect, _target_rect)) + 'px';\n const _right_layout_position_left = _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _dissection_el_rect, _target_rect)) + 'px';\n const _top_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _dissection_el_rect, _target_rect)) + 'px';\n const _top_layout_position_top = _el_offset.top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _dissection_el_rect, _target_rect)) + 'px';\n const _bottom_layout_position_top = _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _dissection_styles = {};\n\n if (area.indexOf(DissectAreaEnum.Outline) !== -1) {\n if (area.indexOf(DissectAreaEnum.Left) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 8 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 1 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + -1 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + -8 + 'px',\n left: _el_offset.left + -1 + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + -1 + 'px',\n left: _el_offset.left + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + _target_rect.height + 'px',\n left: _el_offset.left + -1 + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + -1 + 'px',\n left: _el_offset.left + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 8 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left - 1 + 'px',\n top: _el_offset.top + -1 + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n\n return _dissection_styles;\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { waitForFrame } from '../lib/debounce';\n\nconst create = (text: string \| number = '', area: string \| null = '', tag = 'span') => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-measure');\n\n if (_area === '' \|\| !_area) {\n return;\n }\n\n const _target_styles = await styles.get(targetEl);\n\n if (_target_styles.display === 'none' \|\| _target_styles.opacity === '0' \|\| _target_styles.visibility === 'hidden') {\n return;\n }\n\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n if (_area.indexOf('width') !== -1) {\n if (_area.indexOf('bottom') !== -1) {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top + _target_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top - _measure_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n }\n } else if (_area.indexOf('height') !== -1) {\n if (_area.indexOf('right') !== -1) {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + _target_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left - _measure_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n }\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport { get_horizontal_center_of_els, get_vertical_center_of_els, offset } from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = async (area: string \| null, targetEl: HTMLElement, speccerEl: HTMLElement) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left = _el_offset.left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)) + 'px';\n const _right_layout_position_left = _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)) + 'px';\n const _top_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _speccer_el_rect, _target_rect)) + 'px';\n const _top_layout_position_top = _el_offset.top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(get_horizontal_center_of_els(_el_offset.left, _speccer_el_rect, _target_rect)) + 'px';\n const _bottom_layout_position_top = _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string \| null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx('ph speccer typography', _extra_class_names);\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-typography');\n const _target_styles = await styles.get(targetEl);\n\n if (_target_styles.display === 'none' \|\| _target_styles.opacity === '0' \|\| _target_styles.visibility === 'hidden') {\n return;\n }\n\n targetEl.classList.add('is-specced');\n\n const _html = await helpers.template(targetEl);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = await helpers.position(_area, targetEl, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: Function) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport as resize from './lib/resize';\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: Function) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document\n .querySelectorAll('[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)')\n .forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n dissect.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: Function) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: Function) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 \|\|\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (!_script.hasAttribute('data-manual') && !_script.hasAttribute('data-lazy')) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport './interfaces/global';\nimport as node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nexport const modes = browser;\n\nconst speccer = () => {\n node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll(\n '[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n );\n const _els_to_be_measured = document.querySelectorAll('[data-speccer-measure]');\n const _els_to_be_typography_specced = document.querySelectorAll('[data-speccer-typography]');\n const _els_to_be_dissected = document.querySelectorAll('[data-anatomy-section]');\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\nbrowser.activate(speccer);\n","import as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (targetEl: HTMLElement): Promise<string> => {\n const _target_styles = await styles.get(targetEl);\n const _styles = css.getTypography(_target_styles);\n const _line_height = _styles['lineHeight'] !== 'normal' ? parseInt(_styles['lineHeight'], 10) / 16 + 'rem' : 'normal';\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${_line_height};</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","offset","targetEl","_target_rect","getBoundingClientRect","top","window","pageYOffset","left","pageXOffset","create","text","tag","_el","document","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_target_styles","styles.get","display","opacity","visibility","_target_spacing_styles","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_target_pruned_spacing_styles","property","_value","css.getNumberValue","_speccer_el","_class_name","indexOf","replace","css.getClassNameFromCSSProperty","body","spacingEl","_target_offset","styles.add","helpers.position","SpeccerAreaEnum","DissectAreaEnum","decimal","number","decimals","parseFloat","toFixed","textContent","area","n","_text_node","_extra_class_names","Full","Enclose","_class_names","classnames.cx","sectionEl","_dissection_els","querySelectorAll","targetIndex","_area","getAttribute","_dissection_el","_dissection_styles","dissectionEl","_dissection_el_rect","SPECCER_PIN_SPACE","css.pinSpace","_el_offset","_left_layout_position_left","_left_layout_position_top","number.decimal","_right_layout_position_left","_right_layout_position_top","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","Outline","Left","Right","Top","Bottom","helpers.styles","_el_offset_top","_el_offset_left","_measure_el","_measure_rect","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","this","args","arguments","later","apply","callNow","clearTimeout","setTimeout","debounce","removeEventListener","addEventListener","dom","readyState","lazy","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","dissect.element","manual","_script","currentScript","_speccer_script_src","hasAttribute","resize.activate","spacing","__spacing","dissect","measure","typography","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","_line_height","helpers.template","_position","speccerEl","_speccer_el_rect","modes","selector","call","e","remove","node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected"],"mappings":"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"}
1	+ {"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/wait.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/helpers/spacing/position.ts","node_modules/tslib/tslib.es6.js","src/lib/id.ts","src/lib/cardinal.ts","src/lib/bezier.ts","src/enums/area.ts","src/lib/classes/DrawSVGLine.ts","src/lib/classes/DrawSVGCurlyBracket.ts","src/lib/area.ts","src/helpers/dissect/styles.ts","src/tasks/dissect.ts","src/tasks/measure.ts","src/lib/number.ts","src/tasks/typography.ts","src/lib/debounce.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts","src/helpers/typography/position.ts"],"sourcesContent":["export const after = (el: HTMLElement \| null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport { ClassNamesObjectMapInterface } from 'interfaces/classnames';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls \|\| (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (\n cls: string,\n cls_obj?: ClassNamesObjectMapInterface\n): string => {\n if (!cls) return '';\n\n if (!cls_obj && typeof cls !== 'string') {\n return `${Object.keys(cls)\n .filter((classname) => cls[classname])\n .join(' ')}`.trim();\n }\n\n return `${cls} ${\n cls_obj\n ? Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')\n : ''\n }`.trim();\n};\n","/ eslint no-console:0 /\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = [\n 'TR',\n 'TH',\n 'TD',\n 'TBODY',\n 'THEAD',\n 'TFOOT'\n];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n\nexport const SPECCER_DEFAULT_PIN_SPACE_NEG = SPECCER_DEFAULT_PIN_SPACE -1;\n\nexport const SPECCER_DEFAULT_MEASURE_SIZE = 8;\n\nexport const SPECCER_DEFAULT_MEASURE_SIZE_NEG =\n SPECCER_DEFAULT_MEASURE_SIZE * -1;\n\nexport const SPECCER_DEFAULT_LINE_WIDTH = 1;\n","/* eslint no-console:0 /\n'use strict';\nimport {\n SPECCER_DEFAULT_PIN_SPACE,\n SPECCER_DEFAULT_MEASURE_SIZE,\n SPECCER_DEFAULT_LINE_WIDTH\n} from './constants';\nimport {\n SpacingCSSPropertiesType,\n TypographyCSSPropertiesType\n} from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string \| number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) \|\| (_value <= 0 && _value > -1)\n ? 0\n : _value;\n};\n\nexport const getClassNameFromCSSProperty = (property: string) => {\n if (property.indexOf('Top') !== -1) {\n return property.replace('Top', ' top');\n } else if (property.indexOf('Right') !== -1) {\n return property.replace('Right', ' right');\n } else if (property.indexOf('Bottom') !== -1) {\n return property.replace('Bottom', ' bottom');\n } else if (property.indexOf('Left') !== -1) {\n return property.replace('Left', ' left');\n }\n\n return '';\n};\n\nexport const getSpacing = (\n style: SpacingCSSPropertiesType\n): SpacingCSSPropertiesType => {\n const {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n } = style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (\n style: TypographyCSSPropertiesType\n): TypographyCSSPropertiesType => {\n const {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')\n ) \|\| SPECCER_DEFAULT_PIN_SPACE;\n\nexport const measureSize = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-measure-size')\n ) \|\| SPECCER_DEFAULT_MEASURE_SIZE;\n\nexport const lineWidth = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-line-width')\n ) \|\| SPECCER_DEFAULT_LINE_WIDTH;\n","export const waitFor = (ms: number) =>\n new Promise((resolve) => setTimeout(resolve, ms));\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n","/ eslint no-console:0 /\n'use strict';\nimport { waitForFrame } from './wait';\n\nexport const add = async (el: HTMLElement, styles: [] \| object) => {\n if (\n !el \|\|\n !styles \|\|\n typeof styles === 'string' \|\|\n typeof styles === 'number' \|\|\n typeof styles === 'boolean' \|\|\n (Array.isArray(styles) && styles.length === 0) \|\|\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach(\n (style: { key: string; value: string }) =>\n (el.style[style.key] = style.value)\n );\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","import { waitForFrame } from './wait';\n\nimport { PositionPropertiesType, PositionInputType } from '../types/position';\nimport { GetRecPropertiesInterface } from 'interfaces/position';\n\nexport const get_horizontal_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const offset = async (\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: _el_offset_top,\n left: _el_offset_left\n };\n};\n\nexport const offsetWithCenter = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: get_vertical_center_of_els(_el_offset_top, _source_rect, _target_rect),\n left: get_horizontal_center_of_els(\n _el_offset_left,\n _source_rect,\n _target_rect\n )\n };\n};\n\nexport const getRec = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<GetRecPropertiesInterface> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n const _target_offset_center = await offsetWithCenter(sourceEl, targetEl);\n const _target_height = _target_offset.height;\n const _target_width = _target_offset.width;\n const _source_height = _source_rect.height;\n const _source_width = _source_rect.width;\n\n return {\n absolute: (): PositionPropertiesType => {\n return {\n top: _target_offset.top,\n left: _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n toTop: ({\n center = false,\n sourceHeight = _source_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + sourceHeight + modifier,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromTop: ({\n center = false,\n sourceHeight = _source_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top - sourceHeight - modifier,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toBottom: ({\n center = false,\n sourceHeight = _source_height,\n targetHeight = _target_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight - (sourceHeight + modifier),\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n fromBottom: ({\n center = false,\n targetHeight = _target_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight + modifier,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toLeft: ({\n center = false,\n sourceWidth = _source_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + sourceWidth + modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromLeft: ({\n center = false,\n sourceWidth = _source_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left - sourceWidth - modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n toRight: ({\n center = false,\n sourceWidth = _source_width,\n targetWidth = _target_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth - (sourceWidth + modifier),\n height: _target_height,\n width: _target_width\n };\n },\n\n fromRight: ({\n center = false,\n targetWidth = _target_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth + modifier,\n height: _target_height,\n width: _target_width\n };\n }\n };\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/spacing';\n\nexport const create = (text: string \| number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' \|\|\n _target_styles.opacity === '0' \|\|\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n const _target_spacing_styles = css.getSpacing(_target_styles);\n const _target_pruned_spacing_styles = Object.keys(\n _target_spacing_styles\n ).filter((property) => {\n const _value = _target_spacing_styles[property];\n\n return _value !== '0px';\n });\n\n if (_target_pruned_spacing_styles.length === 0) return;\n\n _target_pruned_spacing_styles.forEach(async (property) => {\n const _value = css.getNumberValue(_target_spacing_styles[property]);\n const _speccer_el = create(_value);\n const _class_name = css.getClassNameFromCSSProperty(property);\n\n classnames.set(_speccer_el, _class_name);\n document.body.appendChild(_speccer_el);\n\n targetEl.classList.add('is-specced');\n await helpers.position(property, _value, _speccer_el, targetEl);\n });\n};\n","import * as styles from '../../lib/styles';\nimport { offset } from '../../lib/position';\nimport { waitForFrame } from '../../lib/wait';\n\nexport const position = async (\n property: string,\n value: number,\n spacingEl: HTMLElement,\n targetEl: HTMLElement\n) => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n\n if (property === 'marginTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top - value + 'px'\n });\n }\n\n if (property === 'marginRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'marginBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n }\n\n if (property === 'marginLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left - value + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top:\n _target_offset.top +\n (parseInt(_target_rect.height + '', 10) - value) +\n 'px'\n });\n }\n\n if (property === 'paddingRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left:\n _target_offset.left +\n (parseInt(_target_rect.width + '', 10) - value) +\n 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n};\n","/****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n*************************************************************************** /\r\n/ global Reflect, Promise /\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf \|\|\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign \|\| function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) \|\| r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P \|\| (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] \|\| ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 \|\| op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t \|\| (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n var desc = Object.getOwnPropertyDescriptor(m, k);\r\n if (!desc \|\| (\"get\" in desc ? !m.__esModule : desc.writable \|\| desc.configurable)) {\r\n desc = { enumerable: true, get: function() { return m[k]; } };\r\n }\r\n Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 \|\| n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/* @deprecated /\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/* @deprecated /\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack \|\| arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar \|\| !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar \|\| Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments \|\| []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 \|\| resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state \|\| !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state \|\| !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n if (receiver === null \|\| (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n","/ eslint no-console:0 /\n'use strict';\n\nexport const uniqueID = () => '_' + Math.random().toString(36).substring(2, 11);\n","/ eslint no-console:0 /\n'use strict';\n\nimport { waitForFrame } from './wait';\n\n/\n Returns the angle between two sets of coordinates\n \n See {@link https://stackoverflow.com/a/9614122/460422}\n * @param cx {number}\n * @param cy {number}\n * @param ex {number}\n * @param ey {number}\n * @param [normalize=true] {bool} If the angle output should be normalized to return value between 0° and 360°\n * @returns {number} The angle of the given coordinates\n /\nexport const angle = (\n cx: number,\n cy: number,\n ex: number,\n ey: number,\n normalize = true\n) => {\n if (!cx \|\| !cy \|\| !ex \|\| !ey) {\n throw new SyntaxError('Missing input for `angle`');\n }\n\n if (\n typeof cx !== 'number' \|\|\n typeof cy !== 'number' \|\|\n typeof ex !== 'number' \|\|\n typeof ey !== 'number'\n ) {\n throw new TypeError(\n `Parameters for \\`angle\\` does not have required type. Requires number! Got: ${typeof cx} ${typeof cy} ${typeof ex} ${typeof ey}`\n );\n }\n\n const dy = ey - cy;\n const dx = ex - cx;\n\n let theta = Math.atan2(dy, dx); // range (-PI, PI]\n\n theta = 180 / Math.PI; // rads to degs, range (-180, 180]\n\n if (normalize && theta < 0) theta = 360 + theta; // range [0, 360)\n\n return theta;\n};\n\nexport const coords = {\n top: (rect: DOMRect) => rect.top,\n right: (rect: DOMRect) => rect.left + rect.width,\n bottom: (rect: DOMRect) => rect.top + rect.height,\n left: (rect: DOMRect) => rect.left,\n center_x: (rect: DOMRect) => rect.left + rect.width / 2,\n center_y: (rect: DOMRect) => rect.top + rect.height / 2\n};\n\nexport const xy = {\n center: (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.center_y(rect)\n }),\n top: (rect: DOMRect) => ({ x: coords.center_x(rect), y: coords.top(rect) }),\n right: (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.center_y(rect)\n }),\n bottom: (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.bottom(rect)\n }),\n left: (rect: DOMRect) => ({ x: coords.left(rect), y: coords.center_y(rect) }),\n 'right-top': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.top(rect)\n }),\n 'right-bottom': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.bottom(rect)\n }),\n 'left-top': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.top(rect)\n }),\n 'left-bottom': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.bottom(rect)\n }),\n 'top-left': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.top(rect)\n }),\n 'top-right': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.top(rect)\n }),\n 'bottom-left': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.bottom(rect)\n }),\n 'bottom-right': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.bottom(rect)\n }),\n 'top-center': (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.top(rect)\n }),\n 'right-center': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.center_y(rect)\n }),\n 'bottom-center': (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.bottom(rect)\n }),\n 'left-center': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.center_y(rect)\n })\n};\n\nexport const get_coords_pair_from_objects = async (\n el1: HTMLElement,\n el2: HTMLElement,\n pos1 = 'center',\n pos2 = 'center'\n) => {\n if (!el1 \|\| !el2) {\n throw 'No element given';\n }\n\n const { x: x1, y: y1 } = await intrinsic_coords(el1, pos1);\n const { x: x2, y: y2 } = await intrinsic_coords(el2, pos2);\n\n return {\n x1,\n y1,\n x2,\n y2\n };\n};\n\nexport const intrinsic_coords = async (el: HTMLElement, pos = 'center') => {\n if (!pos) {\n throw 'No position given';\n }\n\n if (typeof pos !== 'string') {\n throw `The position given is not the required type: pos: ${typeof pos}`;\n }\n\n const _allowed_positions = [\n 'center',\n 'left',\n 'right',\n 'top',\n 'bottom',\n 'right-top',\n 'right-bottom',\n 'left-top',\n 'left-bottom',\n 'top-left',\n 'top-right',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'right-center',\n 'bottom-center',\n 'left-center'\n ];\n\n if (!_allowed_positions.includes(pos)) {\n throw `The position given does not match allowed positions to use! Valid positions are: ${_allowed_positions.join(\n ', '\n )}`;\n }\n\n await waitForFrame();\n\n const _el_rect = el.getBoundingClientRect();\n\n return xy[pos](_el_rect);\n};\n\nexport const direction_of_element = async ({ start, stop, crude = false }) => {\n const { x1, y1, x2, y2 } = await get_coords_pair_from_objects(start, stop);\n const _angle = angle(x1, y1, x2, y2);\n const _direction = crude\n ? cardinal_direction_crude(_angle)\n : cardinal_direction(_angle);\n\n return _direction;\n};\n\n/*\n Gives you the cardinal direction based on degrees\n * Note! The degrees start at 0, which is EAST (orignally, north should be 0, but here, north is 270),\n * and we travel clockwise\n /\nexport const cardinal_direction = (degrees: number): string => {\n if (degrees > 360) throw RangeError('parameter cannot exceed 360');\n\n if (degrees < 0) throw RangeError('parameter cannot be lower than 0');\n\n if (degrees >= 0 && degrees <= 22.5) {\n return 'east';\n } else if (degrees >= 22.5 && degrees <= 67.5) {\n return 'south-east';\n } else if (degrees >= 67.5 && degrees <= 112.5) {\n return 'south';\n } else if (degrees >= 112.5 && degrees <= 157.5) {\n return 'south-west';\n } else if (degrees >= 157.5 && degrees <= 202.5) {\n return 'west';\n } else if (degrees >= 202.5 && degrees <= 247.5) {\n return 'north-west';\n } else if (degrees >= 247.5 && degrees <= 292.5) {\n return 'north';\n } else if (degrees >= 292.5 && degrees <= 337.5) {\n return 'north-east';\n } else {\n return 'east';\n }\n};\n\n/\n Note! The degrees start at 0, which is EAST (orignally, north should be 0, but here, north is 270),\n * and we travel clockwise\n /\nexport const cardinal_direction_crude = (degrees: number): string => {\n if (degrees > 360) throw RangeError('parameter cannot exceed 360');\n\n if (degrees < 0) throw RangeError('parameter cannot be lower than 0');\n\n if (degrees >= 45 && degrees <= 135) {\n return 'south';\n } else if (degrees > 135 && degrees <= 225) {\n return 'west';\n } else if (degrees > 225 && degrees <= 315) {\n return 'north';\n } else if (degrees > 315) {\n return 'east';\n } else {\n return 'east';\n }\n};\n","import {\n BezierPathOptions,\n CreateCoordinatesForCurveCoordParamType,\n CreateCoordinatesForCurveOptionsParamType,\n CurlyBezierPathOptions\n} from 'types/bezier';\nimport as cardinal from './cardinal';\n\nexport const createCoordinatesForCurve = (\n coords: CreateCoordinatesForCurveCoordParamType,\n options: CreateCoordinatesForCurveOptionsParamType\n) => {\n const { x1, x2, y1, y2 } = coords;\n const { direct = false, firstSet = false, direction } = options;\n const firstPoint = { x: x1, y: y1 }; // The first point of line\n const lastPoint = { x: x2, y: y2 }; // The last point of line\n\n let firstControl = { x: x1 + (x2 - x1) / 2, y: y1 }; // Controller for p0\n let lastControl = { x: x1 + (x2 - x1) / 2, y: y2 }; // Controller for p1\n\n if (direct) {\n // first part of the curly bracket\n\n if (firstSet) {\n if (direction === 'west') {\n firstControl = { x: x1 - 32, y: y1 - 16 / 2 }; // Controller for p0\n lastControl = { x: x2 + 32, y: y2 }; // Controller for p1\n } else if (direction === 'south') {\n firstControl = { x: x1 - 16 / 2, y: y1 + 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 - 32 }; // Controller for p1\n } else if (direction === 'east') {\n firstControl = { x: x1 + 32, y: y1 - 16 / 2 }; // Controller for p0\n lastControl = { x: x2 - 32, y: y2 }; // Controller for p1\n } else {\n firstControl = { x: x1 - 16 / 2, y: y1 - 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 + 32 }; // Controller for p1\n }\n } else {\n if (direction === 'west') {\n firstControl = { x: x1 - 32, y: y1 + 16 / 2 }; // Controller for p0\n lastControl = { x: x2 + 32, y: y2 }; // Controller for p1\n } else if (direction === 'south') {\n firstControl = { x: x1 + 16 / 2, y: y1 + 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 - 32 }; // Controller for p1\n } else if (direction === 'east') {\n firstControl = { x: x1 + 32, y: y1 + 16 / 2 }; // Controller for p0\n lastControl = { x: x2 - 32, y: y2 }; // Controller for p1\n } else {\n firstControl = { x: x1 + 16 / 2, y: y1 - 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 + 32 }; // Controller for p1\n }\n }\n }\n\n return {\n firstPoint,\n firstControl,\n lastPoint,\n lastControl\n };\n};\n\nexport const getCurlySVGPath = async (\n startEl: HTMLElement,\n stopEl: HTMLElement,\n options: CurlyBezierPathOptions\n) => {\n const { pos1, pos2, firstSet = false, direction } = options;\n const { x1, y1, x2, y2 } = await cardinal.get_coords_pair_from_objects(\n startEl,\n stopEl,\n pos1,\n pos2\n );\n const x1modifier = 0;\n const y1modifier = 0;\n\n let x2modifier = 0;\n let y2modifier = 0;\n\n // make a gap between the pin and the bracket center\n if (direction == 'north') {\n y2modifier = 8;\n } else if (direction == 'west') {\n x2modifier = 8;\n } else if (direction == 'east') {\n x2modifier = -8;\n } else if (direction == 'south') {\n y2modifier = -8;\n }\n\n const _coordinates = createCoordinatesForCurve(\n {\n x1: x1 + x1modifier,\n x2: x2 + x2modifier,\n y1: y1 + y1modifier,\n y2: y2 + y2modifier\n },\n {\n direct: true,\n firstSet,\n direction\n }\n );\n const { firstPoint, firstControl, lastControl, lastPoint } = _coordinates;\n\n return (\n 'M ' +\n firstPoint.x +\n ' ' +\n firstPoint.y +\n 'C ' +\n firstControl.x +\n ' ' +\n firstControl.y +\n ', ' +\n lastControl.x +\n ' ' +\n lastControl.y +\n ', ' +\n lastPoint.x +\n ' ' +\n lastPoint.y\n );\n};\n\nexport const getSVGPath = async (\n startEl: HTMLElement,\n stopEl: HTMLElement,\n options: BezierPathOptions\n) => {\n const { pos1, pos2 } = options;\n const { x1, y1, x2, y2 } = await cardinal.get_coords_pair_from_objects(\n startEl,\n stopEl,\n pos1,\n pos2\n );\n const _coordinates = createCoordinatesForCurve(\n { x1, x2, y1, y2 },\n {\n direction: ''\n }\n );\n const { firstPoint, firstControl, lastControl, lastPoint } = _coordinates;\n\n return (\n 'M ' +\n firstPoint.x +\n ' ' +\n firstPoint.y +\n 'C ' +\n firstControl.x +\n ' ' +\n firstControl.y +\n ', ' +\n lastControl.x +\n ' ' +\n lastControl.y +\n ', ' +\n lastPoint.x +\n ' ' +\n lastPoint.y\n );\n};\n\nexport const getPositionsForSVGPath = (direction: string) => {\n let _pos1: string;\n let _pos2: string;\n\n switch (direction) {\n case 'east': {\n _pos1 = 'right';\n _pos2 = 'left';\n break;\n }\n case 'south': {\n _pos1 = 'bottom';\n _pos2 = 'top';\n break;\n }\n\n case 'west': {\n _pos1 = 'left';\n _pos2 = 'right';\n break;\n }\n case 'north':\n default: {\n _pos1 = 'top';\n _pos2 = 'bottom';\n break;\n }\n }\n\n return {\n pos1: _pos1,\n pos2: _pos2\n };\n};\n\nexport const getPositionsForCurlySVGPath = (direction: string) => {\n let _path1_pos1: string;\n let _path1_pos2: string;\n let _path2_pos1: string;\n let _path2_pos2: string;\n\n switch (direction) {\n case 'east': {\n _path1_pos1 = 'right-top';\n _path1_pos2 = 'left-center';\n _path2_pos1 = 'right-bottom';\n _path2_pos2 = 'left-center';\n break;\n }\n case 'south': {\n _path1_pos1 = 'bottom-left';\n _path1_pos2 = 'top-center';\n _path2_pos1 = 'bottom-right';\n _path2_pos2 = 'top-center';\n break;\n }\n case 'west': {\n _path1_pos1 = 'left-top';\n _path1_pos2 = 'right-center';\n _path2_pos1 = 'left-bottom';\n _path2_pos2 = 'right-center';\n break;\n }\n case 'north':\n default: {\n _path1_pos1 = 'top-left';\n _path1_pos2 = 'bottom-center';\n _path2_pos1 = 'top-right';\n _path2_pos2 = 'bottom-center';\n break;\n }\n }\n\n return {\n path1pos1: _path1_pos1,\n path1pos2: _path1_pos2,\n path2pos1: _path2_pos1,\n path2pos2: _path2_pos2\n };\n};\n","/* eslint-disable no-unused-vars /\n\nexport enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n SVG = 'svg',\n Curly = 'curly',\n}\n\nexport enum MeasureAreaEnum {\n Width = 'width',\n Height = 'height',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","'use strict';\n\nimport { uniqueID } from '../id';\nimport as cardinal from '../cardinal';\nimport { getPositionsForSVGPath, getSVGPath } from 'lib/bezier';\n\nexport class DrawSVGLine {\n #canvas: HTMLElement \| SVGElement \| null;\n #originalPathElement: HTMLElement \| SVGPathElement \| null;\n startElement: HTMLElement;\n stopElement: HTMLElement;\n line: SVGPathElement;\n\n constructor(startElement: HTMLElement, stopElement: HTMLElement) {\n this.#init(startElement, stopElement);\n }\n\n #init(startElement: HTMLElement, stopElement: HTMLElement) {\n if (!startElement \|\| !stopElement) {\n throw 'Missing inputs startElement and stopElement';\n }\n\n if (!document.body.contains(stopElement)) {\n throw 'stopElement is not in the DOM';\n }\n\n if (!document.body.contains(startElement)) {\n throw 'startElement is not in the DOM';\n }\n\n this.startElement = startElement;\n this.stopElement = stopElement;\n\n this.#canvas = document.getElementById('ph-speccer-svg');\n this.#originalPathElement = document.getElementById('ph-speccer-path');\n\n if (!this.#originalPathElement \|\| !this.#canvas) {\n throw 'Missing required SVG element to draw lines. Please see the documentation';\n }\n\n this.connect();\n }\n\n connect() {\n this.draw(this.#originalPathElement as SVGPathElement);\n }\n\n async draw(path: SVGPathElement) {\n if (!path) {\n throw 'No path given to draw!';\n }\n\n const _id = uniqueID();\n const _path_el_id = `ph_draw_path-path-${_id}`;\n const _new_path = path.cloneNode(false) as SVGPathElement;\n\n _new_path.setAttribute('id', _path_el_id);\n _new_path.setAttribute(\n 'data-start-el',\n this.startElement.getAttribute('id') \|\| 'no-id-found'\n );\n _new_path.classList.remove('original');\n _new_path.classList.add('speccer');\n\n if (path.parentNode) {\n this.line = path.parentNode.insertBefore(_new_path, path.nextSibling);\n } else {\n throw 'No parentNode found for path';\n }\n\n const _direction = await cardinal.direction_of_element({\n start: this.startElement,\n stop: this.stopElement,\n crude: true\n });\n const { pos1, pos2 } = getPositionsForSVGPath(_direction);\n const _d = await getSVGPath(this.startElement, this.stopElement, {\n pos1,\n pos2\n });\n\n this.line.setAttribute('data-direction', _direction);\n this.line.setAttribute('data-pos1', pos1);\n this.line.setAttribute('data-pos2', pos2);\n\n this.line.setAttribute('d', _d); //svg attributes\n }\n}\n\nwindow.DrawSVGLine = DrawSVGLine;\n","'use strict';\n\nimport { uniqueID } from '../id';\nimport * as cardinal from '../cardinal';\nimport { getCurlySVGPath, getPositionsForCurlySVGPath } from 'lib/bezier';\n\nexport class DrawSVGCurlyBracket {\n #canvas: HTMLElement \| SVGElement \| null;\n #originalPathElement: HTMLElement \| SVGPathElement \| null;\n startElement: HTMLElement;\n stopElement: HTMLElement;\n firstPathElement: SVGPathElement;\n secondPathElement: SVGPathElement;\n\n constructor(startElement: HTMLElement, stopElement: HTMLElement) {\n this.#init(startElement, stopElement);\n }\n\n #init(startElement: HTMLElement, stopElement: HTMLElement) {\n if (!startElement \|\| !stopElement) {\n throw 'Missing inputs startElement and stopElement';\n }\n\n if (!document.body.contains(stopElement)) {\n throw 'stopElement is not in the DOM';\n }\n\n if (!document.body.contains(startElement)) {\n throw 'startElement is not in the DOM';\n }\n\n this.startElement = startElement;\n this.stopElement = stopElement;\n\n this.#canvas = document.getElementById('ph-speccer-svg');\n this.#originalPathElement = document.getElementById('ph-speccer-path');\n\n if (!this.#originalPathElement \|\| !this.#canvas) {\n throw 'Missing required SVG element to draw lines. Please see the documentation';\n }\n\n this.connect();\n }\n\n connect() {\n this.draw(this.#originalPathElement as SVGPathElement);\n }\n\n #getPathElement(path: SVGPathElement) {\n if (!path) {\n throw 'No path given to #getPathElement!';\n }\n\n const _id = uniqueID();\n const _path_el_id = `ph_draw_path-path-${_id}`;\n const _new_path = path.cloneNode(false) as SVGPathElement;\n\n _new_path.setAttribute(\n 'data-start-el',\n this.startElement.getAttribute('id') \|\| 'no-id-found'\n );\n _new_path.setAttribute('id', _path_el_id);\n _new_path.classList.remove('original');\n _new_path.classList.add('speccer');\n\n return _new_path;\n }\n\n async draw(path: SVGPathElement) {\n if (!path) {\n throw 'No path given to draw!';\n }\n\n const _first_path_element = this.#getPathElement(path);\n const _second_path_element = this.#getPathElement(path);\n\n if (path.parentNode) {\n this.firstPathElement = path.parentNode.insertBefore(\n _first_path_element,\n path.nextSibling\n );\n this.secondPathElement = path.parentNode.insertBefore(\n _second_path_element,\n path.nextSibling\n );\n } else {\n throw 'No parentNode found for path';\n }\n\n const _direction = await cardinal.direction_of_element({\n stop: this.stopElement,\n start: this.startElement,\n crude: true\n });\n const { path1pos1, path1pos2, path2pos1, path2pos2 } =\n getPositionsForCurlySVGPath(_direction);\n const _first_path_d = await getCurlySVGPath(\n this.startElement,\n this.stopElement,\n {\n pos1: path1pos1,\n pos2: path1pos2,\n firstSet: true,\n direction: _direction\n }\n );\n const _second_path_d = await getCurlySVGPath(\n this.startElement,\n this.stopElement,\n {\n pos1: path2pos1,\n pos2: path2pos2,\n direction: _direction\n }\n );\n\n this.firstPathElement.setAttribute('data-direction', _direction);\n this.firstPathElement.setAttribute('data-pos1', path1pos1);\n this.firstPathElement.setAttribute('data-pos2', path1pos2);\n this.firstPathElement.setAttribute('d', _first_path_d); //svg attributes\n this.secondPathElement.setAttribute('data-direction', _direction);\n this.secondPathElement.setAttribute('data-pos1', path2pos1);\n this.secondPathElement.setAttribute('data-pos2', path2pos2);\n this.secondPathElement.setAttribute('d', _second_path_d); //svg attributes\n }\n}\n\nwindow.DrawSVGCurlyBracket = DrawSVGCurlyBracket;\n","import { DissectAreaEnum, MeasureAreaEnum } from 'enums/area';\n\nexport const getAreasFromString = (areaString: string): string[] =>\n areaString.split(' ');\n\nexport const isLeftArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Left);\n};\n\nexport const isRightArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Right);\n};\n\nexport const isTopArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Top);\n};\n\nexport const isBottomArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Bottom);\n};\n\nexport const isFullArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Full);\n};\n\nexport const isEncloseArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Enclose);\n};\n\nexport const isHeightArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(MeasureAreaEnum.Height);\n};\n\nexport const isWidthArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(MeasureAreaEnum.Width);\n};\n\nexport const useSVG = (areaString: string): boolean =>\n areaString.indexOf(DissectAreaEnum.Curly) === -1 &&\n areaString.indexOf(DissectAreaEnum.Full) === -1 &&\n areaString.indexOf(DissectAreaEnum.Enclose) === -1 &&\n areaString.indexOf(DissectAreaEnum.SVG) !== -1;\n\nexport const isCurly = (areaString: string): boolean =>\n areaString.indexOf(DissectAreaEnum.Full) !== -1 &&\n areaString.indexOf(DissectAreaEnum.Curly) !== -1;\n","import * as css from '../../lib/css';\nimport * as position from '../../lib/position';\nimport {\n isBottomArea,\n isEncloseArea,\n isFullArea,\n isLeftArea,\n isRightArea\n} from 'lib/area';\nimport { DissectStylesOptionsType } from 'types/bezier';\n\nexport const styles = async (\n area: string,\n targetEl: HTMLElement,\n dissectionEl: HTMLElement,\n options: DissectStylesOptionsType\n) => {\n const { isCurly } = options;\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const SPECCER_MEASURE_SIZE = css.measureSize(dissectionEl);\n const _positional_styles = await position.getRec(dissectionEl, targetEl);\n\n if (isEncloseArea(area)) {\n const { left, top, height, width } = _positional_styles.absolute();\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`,\n width: `${width}px`\n };\n }\n\n if (isLeftArea(area)) {\n if (isFullArea(area) && !isCurly) {\n const { left, top, height } = _positional_styles.fromLeft({\n sourceWidth: SPECCER_MEASURE_SIZE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n };\n } else {\n const { left, top } = _positional_styles.fromLeft({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (isRightArea(area)) {\n if (isFullArea(area) && !isCurly) {\n const { left, top, height } = _positional_styles.fromRight({\n center: false\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n };\n } else {\n const { left, top } = _positional_styles.fromRight({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (isBottomArea(area)) {\n if (isFullArea(area) && !isCurly) {\n const { left, top, width } = _positional_styles.fromBottom({\n center: false\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n };\n } else {\n const { left, top } = _positional_styles.fromBottom({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else {\n if (isFullArea(area) && !isCurly) {\n const { left, top, width } = _positional_styles.fromTop({\n center: false\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n };\n } else {\n const { left, top } = _positional_styles.fromTop({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n }\n};\n","/* eslint no-console:0 /\n'use strict';\n\nimport as styles from '../lib/styles';\nimport { DrawSVGLine, DrawSVGCurlyBracket } from '../lib/classes';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\nimport { isCurly, isEncloseArea, isFullArea, useSVG } from 'lib/area';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (\n (!isFullArea(area) && !isEncloseArea(area)) \|\|\n (isFullArea(area) && isCurly(area))\n ) {\n _el.appendChild(_text_node);\n } else if (isFullArea(area) \|\| isEncloseArea(area)) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx(\n 'ph speccer dissection',\n _extra_class_names\n );\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = (sectionEl: HTMLElement) => {\n if (!sectionEl) return;\n\n const _dissection_els = sectionEl.querySelectorAll('[data-anatomy]');\n\n if (_dissection_els) {\n let _index_to_use = 0;\n\n _dissection_els.forEach(async (targetEl: HTMLElement, targetIndex) => {\n if (!targetEl) return Promise.resolve();\n\n const _areas_string: string = targetEl.getAttribute('data-anatomy') \|\| '';\n\n if (\n !_areas_string \|\|\n _areas_string === '' \|\|\n _areas_string.indexOf(DissectAreaEnum.Outline) === -1\n )\n return;\n\n /*\n If we're running out of literals to use,\n * make a new one with uppercase and lower case pairs\n /\n let _literal_to_use = SPECCER_LITERALS[targetIndex];\n\n if (!_literal_to_use) {\n _literal_to_use = `${SPECCER_LITERALS[_index_to_use]}${SPECCER_LITERALS[\n _index_to_use\n ].toLowerCase()}`;\n _index_to_use++;\n }\n\n const _dissection_el = create(_literal_to_use, _areas_string);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = await helpers.styles(\n _areas_string,\n targetEl,\n _dissection_el,\n {\n isCurly: isCurly(_areas_string)\n }\n );\n\n await styles.add(_dissection_el, _dissection_styles);\n\n if (useSVG(_areas_string)) {\n new DrawSVGLine(targetEl, _dissection_el);\n } else if (isCurly(_areas_string)) {\n new DrawSVGCurlyBracket(targetEl, _dissection_el);\n }\n });\n }\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport { isBottomArea, isHeightArea, isRightArea, isWidthArea } from 'lib/area';\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { waitForFrame } from '../lib/wait';\nimport * as position from '../lib/position';\nimport { SPECCER_DEFAULT_MEASURE_SIZE_NEG } from 'lib/constants';\n\nconst create = (\n text: string \| number = '',\n area: string \| null = '',\n tag = 'span'\n) => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _areas_string: string \| null = targetEl.getAttribute(\n 'data-speccer-measure'\n );\n\n if (_areas_string === '' \|\| !_areas_string) {\n return;\n }\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' \|\|\n _target_styles.opacity === '0' \|\|\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n\n if (isWidthArea(_areas_string)) {\n if (isBottomArea(_areas_string)) {\n const _measure_el = create(_target_rect.width, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, width } = _positional_styles.fromBottom({\n center: false\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n });\n } else {\n const _measure_el = create(_target_rect.width, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, width } = _positional_styles.fromTop({\n center: false,\n modifier: SPECCER_DEFAULT_MEASURE_SIZE_NEG\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n });\n }\n } else if (isHeightArea(_areas_string)) {\n if (isRightArea(_areas_string)) {\n const _measure_el = create(_target_rect.height, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, height } = _positional_styles.fromRight({\n center: false\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n });\n } else {\n const _measure_el = create(_target_rect.height, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, height } = _positional_styles.fromLeft({\n center: false,\n modifier: SPECCER_DEFAULT_MEASURE_SIZE_NEG\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n });\n }\n }\n};\n","/* eslint no-console:0 /\n'use strict';\n\nexport const decimal = (number: string \| number, decimals = 3): string =>\n parseFloat(number + '').toFixed(decimals);\n","/ eslint no-console:0 /\n'use strict';\n\nimport as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string \| null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx(\n 'ph speccer typography',\n _extra_class_names\n );\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string \| null = targetEl.getAttribute('data-speccer-typography');\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' \|\|\n _target_styles.opacity === '0' \|\|\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n targetEl.classList.add('is-specced');\n\n const _html = await helpers.template(targetEl);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = await helpers.position(_area, targetEl, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","/* eslint @typescript-eslint/no-explicit-any: [\"error\", { \"fixToUnknown\": true }] /\n'use strict';\n\nimport { DebounceAnyFunctionType } from 'types/debounce';\n\nconst debounce = function (\n func: DebounceAnyFunctionType,\n wait: number,\n immediate?: boolean\n): DebounceAnyFunctionType {\n let timeout: null \| ReturnType<typeof setTimeout>;\n\n return function (context: unknown, ...args: unknown[]) {\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport as resize from './lib/resize';\n\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: SpeccerFunctionType) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document\n .querySelectorAll(\n '[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n )\n .forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n dissect.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: SpeccerFunctionType) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 \|\|\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (\n !_script.hasAttribute('data-manual') &&\n !_script.hasAttribute('data-lazy')\n ) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/ eslint no-console:0 /\n'use strict';\n\nimport './interfaces/global';\nimport as node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nexport const modes = browser;\n\nconst speccer = () => {\n node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll(\n '[data-speccer],[data-speccer] :not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n );\n const _els_to_be_measured = document.querySelectorAll(\n '[data-speccer-measure]'\n );\n const _els_to_be_typography_specced = document.querySelectorAll(\n '[data-speccer-typography]'\n );\n const _els_to_be_dissected = document.querySelectorAll(\n '[data-anatomy-section]'\n );\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\nbrowser.activate(speccer);\n","import as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (targetEl: HTMLElement): Promise<string> => {\n const _target_styles = await styles.get(targetEl);\n const _styles = css.getTypography(_target_styles);\n const _line_height =\n _styles['lineHeight'] !== 'normal'\n ? parseInt(_styles['lineHeight'], 10) / 16 + 'rem'\n : 'normal';\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${_line_height};</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport {\n get_horizontal_center_of_els,\n get_vertical_center_of_els,\n offset\n} from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = async (\n area: string \| null,\n targetEl: HTMLElement,\n speccerEl: HTMLElement\n) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left =\n _el_offset.left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _right_layout_position_left =\n _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _top_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_top =\n _el_offset.top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _bottom_layout_position_top =\n _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","offset","targetEl","_target_rect","getBoundingClientRect","_el_offset_top","top","window","pageYOffset","_el_offset_left","left","pageXOffset","getRec","sourceEl","_source_rect","_target_offset","_target_offset_center","offsetWithCenter","_target_height","_target_width","_source_height","_source_width","absolute","toTop","center","sourceHeight","fromTop","toBottom","targetHeight","fromBottom","toLeft","sourceWidth","fromLeft","toRight","targetWidth","fromRight","create","text","tag","_el","document","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_target_styles","styles.get","display","opacity","visibility","_target_spacing_styles","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_target_pruned_spacing_styles","property","_value","css.getNumberValue","_speccer_el","_class_name","indexOf","replace","css.getClassNameFromCSSProperty","body","spacingEl","styles.add","helpers.position","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","__classPrivateFieldSet","uniqueID","Math","random","toString","substring","coords","rect","xy","x","y","right","bottom","get_coords_pair_from_objects","el1","el2","pos1","pos2","x1","y1","intrinsic_coords","x2","y2","pos","_allowed_positions","includes","_el_rect","direction_of_element","start","stop","crude","_angle","cy","ex","ey","normalize","SyntaxError","dy","dx","theta","atan2","PI","angle","cardinal_direction_crude","cardinal_direction","degrees","RangeError","createCoordinatesForCurve","options","direct","firstSet","direction","firstControl","lastControl","firstPoint","lastPoint","getCurlySVGPath","startEl","stopEl","cardinal.get_coords_pair_from_objects","x2modifier","y2modifier","_coordinates","SpeccerAreaEnum","DissectAreaEnum","MeasureAreaEnum","DrawSVGLine","startElement","stopElement","_DrawSVGLine_canvas","this","_DrawSVGLine_originalPathElement","connect","draw","path","_path_el_id","_new_path","cloneNode","getAttribute","remove","parentNode","line","insertBefore","nextSibling","_direction","cardinal.direction_of_element","_pos1","_pos2","getPositionsForSVGPath","_d","getSVGPath","WeakMap","_DrawSVGLine_instances","WeakSet","_DrawSVGLine_init","contains","getElementById","DrawSVGCurlyBracket","_DrawSVGCurlyBracket_canvas","_DrawSVGCurlyBracket_originalPathElement","_first_path_element","_DrawSVGCurlyBracket_instances","_DrawSVGCurlyBracket_getPathElement","_second_path_element","firstPathElement","secondPathElement","path1pos1","path1pos2","path2pos1","path2pos2","_path1_pos1","_path1_pos2","_path2_pos1","_path2_pos2","getPositionsForCurlySVGPath","_first_path_d","_second_path_d","_DrawSVGCurlyBracket_init","getAreasFromString","areaString","isRightArea","Right","isBottomArea","Bottom","isFullArea","Full","isEncloseArea","Enclose","isCurly","Curly","area","dissectionEl","SPECCER_PIN_SPACE","css.pinSpace","SPECCER_MEASURE_SIZE","_positional_styles","position.getRec","Left","textContent","n","_text_node","_extra_class_names","_class_names","classnames.cx","sectionEl","_dissection_els","querySelectorAll","_index_to_use","targetIndex","resolve","_areas_string","Outline","_literal_to_use","toLowerCase","_dissection_el","_dissection_styles","helpers.styles","SVG","Width","_measure_el","SPECCER_DEFAULT_MEASURE_SIZE","Height","isHeightArea","decimal","number","decimals","parseFloat","toFixed","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","args","callNow","clearTimeout","setTimeout","apply","debounce","removeEventListener","addEventListener","dom","readyState","lazy","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","dissect.element","manual","_script","currentScript","_speccer_script_src","hasAttribute","resize.activate","spacing","__spacing","dissect","measure","typography","_area","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","_line_height","helpers.template","_position","speccerEl","_speccer_el_rect","_el_offset","_left_layout_position_left","_left_layout_position_top","number.decimal","_right_layout_position_left","_right_layout_position_top","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","Top","modes","selector","e","node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected"],"mappings":"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"}

package/speccer.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;box-sizing:initial;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.subtle.bottom:after,.ph.speccer.dissection.outline.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.subtle.left:after,.ph.speccer.dissection.outline.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.full.subtle{background-color:initial;border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.full.subtle.top{border-bottom:none}.ph.speccer.dissection.outline.full.subtle.bottom{border-top:none}.ph.speccer.dissection.outline.full.subtle.right{border-left:none}.ph.speccer.dissection.outline.full.subtle.left{border-right:none}.ph.speccer.dissection.outline.full.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.full.subtle.bottom:before,.ph.speccer.dissection.outline.full.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.full.subtle.left:before,.ph.speccer.dissection.outline.full.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.enclose.subtle{border-style:dashed}.ph.speccer.dissection.outline.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.enclose.subtle.bottom:before,.ph.speccer.dissection.outline.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.enclose.subtle.left:before,.ph.speccer.dissection.outline.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph.speccer.measure.subtle.height.left,.ph.speccer.measure.subtle.height.right,.ph.speccer.measure.subtle.width.bottom,.ph.speccer.measure.subtle.width.top{border-style:dashed}.ph.speccer.measure.subtle.width.top{border-bottom:none}.ph.speccer.measure.subtle.width.bottom{border-top:none}.ph.speccer.measure.subtle.height.right{border-left:none}.ph.speccer.measure.subtle.height.left{border-right:none}
1	+ .ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before,svg.ph{box-sizing:border-box;pointer-events:none;user-select:none}.ph.speccer:after,.ph.speccer:before,.ph.speccer:not(path){align-items:center;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:12px;justify-content:center;line-height:12px;position:absolute;z-index:99999}#ph-speccer-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}svg.ph .ph.path{color:var(--ph-speccer-color-contrast,#ff3aa8)}.ph.speccer.dissection{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);display:flex;font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.curly:after,.ph.speccer.dissection.svg:after{content:none!important}.ph.speccer.dissection.outline.left:after{right:auto}.ph.speccer.dissection.outline.right:after{left:auto}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full:not(.curly){background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none;border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly):before{bottom:100%}.ph.speccer.dissection.outline.full:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph.speccer.dissection.outline.full:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).right:before{left:100%;right:auto}.ph.speccer.dissection.outline.full:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph.speccer.dissection.outline.full:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).left:before{left:auto;right:100%}.ph.speccer.dissection.outline.full:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph.speccer.dissection.outline.full:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).top:before{bottom:100%}.ph.speccer.dissection.outline.full:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph.speccer.dissection.outline.full:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left:not(.curly),.ph.speccer.dissection.outline.full.right:not(.curly){width:8px}.ph.speccer.dissection.outline.full.bottom:not(.curly),.ph.speccer.dissection.outline.full.top:not(.curly),.ph.speccer.dissection.outline.full:not(.curly){height:8px}.ph.speccer.dissection.outline.full.bottom:not(.curly):after,.ph.speccer.dissection.outline.full.left:not(.curly):after,.ph.speccer.dissection.outline.full.right:not(.curly):after,.ph.speccer.dissection.outline.full.top:not(.curly):after,.ph.speccer.dissection.outline.full:not(.curly):after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:not(.curly):after,.ph.speccer.dissection.outline.full.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:not(.curly):after,.ph.speccer.dissection.outline.full.top:not(.curly):after,.ph.speccer.dissection.outline.full:not(.curly):after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:not(.curly):before,.ph.speccer.dissection.outline.full.left:not(.curly):before,.ph.speccer.dissection.outline.full.right:not(.curly):before,.ph.speccer.dissection.outline.full.top:not(.curly):before,.ph.speccer.dissection.outline.full:not(.curly):before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:not(.curly):before,.ph.speccer.dissection.outline.full.right:not(.curly):before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:not(.curly):before,.ph.speccer.dissection.outline.full.top:not(.curly):before,.ph.speccer.dissection.outline.full:not(.curly):before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose,.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after,.ph.speccer.dissection.outline.enclose:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after,.ph.speccer.dissection.outline.enclose:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before,.ph.speccer.dissection.outline.enclose:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before,.ph.speccer.dissection.outline.enclose:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.subtle.bottom:after,.ph.speccer.dissection.outline.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.subtle.left:after,.ph.speccer.dissection.outline.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.full.subtle:not(.curly){background-color:initial}.ph.speccer.dissection.outline.full.subtle:not(.curly),.ph.speccer.dissection.outline.full.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph.speccer.dissection.outline.full.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph.speccer.dissection.outline.full.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph.speccer.dissection.outline.full.subtle:not(.curly):after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom:before,.ph.speccer.dissection.outline.full.subtle:not(.curly).top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.full.subtle:not(.curly).left:before,.ph.speccer.dissection.outline.full.subtle:not(.curly).right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.enclose.subtle{border-style:dashed}.ph.speccer.dissection.outline.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.enclose.subtle.bottom:before,.ph.speccer.dissection.outline.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.enclose.subtle.left:before,.ph.speccer.dissection.outline.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure{display:flex}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph.speccer.measure.subtle.height.left,.ph.speccer.measure.subtle.height.right,.ph.speccer.measure.subtle.width.bottom,.ph.speccer.measure.subtle.width.top{border-style:dashed}.ph.speccer.measure.subtle.width.top{border-bottom:none}.ph.speccer.measure.subtle.width.bottom{border-top:none}.ph.speccer.measure.subtle.height.right{border-left:none}.ph.speccer.measure.subtle.height.left{border-right:none}