@pictogrammers/components 0.4.7 → 0.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.4.7",
+    "version": "0.4.9",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/app/app.css

@@ -57,7 +57,7 @@
   flex-direction: column;
   grid-column: 1;
   grid-row: 2;
-  min-width: 10rem;
+  min-width: 12rem;
   max-width: 20rem;
 }
 

package/pg/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part, Prop, Local } from '@pictogrammers/element';
 
 import template from './app.html';
 import style from './app.css';
@@ -14,9 +14,14 @@ export default class PgApp extends HTMLElement {
   @Part() $side: HTMLDivElement;
   @Part() $resize: HTMLButtonElement;
 
+  @Local('app') store = new Map([
+    ['width', 12 * 16]
+  ]);
+
   connectedCallback() {
     this.$logo.addEventListener('click', this.#handleClick.bind(this));
     this.$resize.addEventListener('pointerdown', this.#handlePointerDown.bind(this));
+    this.$side.style.width = `${this.store.get('width')}px`;
   }
 
   #handleClick() {
@@ -33,6 +38,7 @@ export default class PgApp extends HTMLElement {
       const x = currentX - ee.clientX;
       const width = currentWidth - x;
       this.$side.style.width = `${width}px`;
+      this.store.set('width', Math.floor(width));
     }
     const handlePointerUp = () => {
       this.$resize.classList.remove('dragging');
@@ -42,4 +48,4 @@ export default class PgApp extends HTMLElement {
     document.addEventListener('pointermove', handlePointerMove);
     document.addEventListener('pointerup', handlePointerUp);
   }
-}
+}

package/pg/inputPixelEditor/inputPixelEditor.ts

@@ -4,6 +4,7 @@ import template from './inputPixelEditor.html';
 import style from './inputPixelEditor.css';
 import { InputMode } from './utils/inputMode';
 import cloneGrid from './utils/cloneGrid';
+import getEllipsePixels from './utils/getEllipsePixels';
 import getEllipseOutlinePixels from './utils/getEllipseOutlinePixels';
 import { WHITE } from './utils/constants';
 import getLinePixels from './utils/getLinePixels';
@@ -489,7 +490,7 @@ export default class PgInputPixelEditor extends HTMLElement {
           });
           break;
         case InputMode.Ellipse:
-          getEllipseOutlinePixels(this.#startX, this.#startY, newX, newY).forEach(({ x, y }) => {
+          getEllipsePixels(this.#startX, this.#startY, newX, newY).forEach(({ x, y }) => {
             this.#setPixel(x, y, 1);
           });
           break;
@@ -571,7 +572,7 @@ export default class PgInputPixelEditor extends HTMLElement {
           this.#setPreview(getRectangleOutlinePixels(startX, startY, lastX, lastY), x, y);
           break;
         case InputMode.Ellipse:
-          this.#setPreview(getEllipseOutlinePixels(startX, startY, lastX, lastY), x, y);
+          this.#setPreview(getEllipsePixels(startX, startY, lastX, lastY), x, y);
           break;
         case InputMode.EllipseOutline:
           this.#setPreview(getEllipseOutlinePixels(startX, startY, lastX, lastY), x, y);

package/pg/inputPixelEditor/utils/getEllipsePixels.ts

@@ -1,28 +1,140 @@
-export default function getEllipsePixels(x0: number, y0: number, x1: number, y1: number) {
-  let a = Math.abs(x1 - x0), b = Math.abs(y1 - y0), b1 = b & 1; /* values of diameter */
-  let dx = 4 * (1 - a) * b * b, dy = 4 * (b1 + 1) * a * a; /* error increment */
-  let err = dx + dy + b1 * a * a, e2; /* error of 1.step */
-
-  if (x0 > x1) { x0 = x1; x1 += a; } /* if called with swapped points */
-  if (y0 > y1) y0 = y1; /* .. exchange them */
-  y0 += (b + 1) / 2; y1 = y0 - b1;   /* starting pixel */
-  a *= 8 * a; b1 = 8 * b * b;
+export function distance(x: number, y: number, ratio: number): number {
+	return Math.sqrt((Math.pow(y * ratio, 2)) + Math.pow(x, 2));
+}
+
+function filled(x: number, y: number, radius: number, ratio: number): boolean {
+  return distance(x, y, ratio) <= radius;
+}
+
+function thinfilled(x: number, y: number, radius: number, ratio: number): boolean {
+  return filled(x, y, radius, ratio) && !(
+    filled(x + 1, y, radius, ratio) &&
+    filled(x - 1, y, radius, ratio) &&
+    filled(x, y + 1, radius, ratio) &&
+    filled(x, y - 1, radius, ratio)
+  );
+}
+
+function isFilled(x: number, y: number, width: number, height: number): boolean {
+  const bounds = {
+    minX: 0,
+    maxX: width,
+    minY: 0,
+    maxY: height,
+  };
+
+  x = -.5 * (bounds.maxX - 2 * (x + .5));
+  y = -.5 * (bounds.maxY - 2 * (y + .5));
+
+  return thinfilled(x, y, (bounds.maxX / 2), bounds.maxX / bounds.maxY);
+}
+
+
+function betterCircle(x0: number, y0: number, x1: number, y1: number) {
+  const width = Math.abs(x0 - x1);
+  const height = Math.abs(y0 - y1);
+  const minX = Math.min(x0, x1);
+  const minY = Math.min(y0, y1);
+
   const pixels: { x: number, y: number }[] = [];
+
+  // Loop through bounding box
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      // Center coordinates relative to ellipse
+      const cx = -.5 * (width - 2 * (x + 0.5));
+      const cy = -.5 * (height - 2 * (y + 0.5));
+
+      // Use filled() instead of thinfilled() to fill the ellipse
+      if (filled(cx, cy, width / 2, width / height)) {
+        pixels.push({ x: x + minX, y: y + minY });
+      }
+    }
+  }
+
+  return pixels;
+}
+
+
+function ellipse(x0: number, y0: number, x1: number, y1: number) {
+  const pixels: { x: number, y: number }[] = [];
+
+  let a = Math.abs(x1 - x0),
+    b = Math.abs(y1 - y0),
+    b1 = b & 1;
+
+  let dx = 4 * (1.0 - a) * b * b,
+    dy = 4 * (b1 + 1) * a * a;
+
+  let err = dx + dy + b1 * a * a,
+    e2;
+
+  if (x0 > x1) {
+    x0 = x1;
+    x1 += a;
+  }
+  if (y0 > y1) y0 = y1;
+  y0 += (b + 1) >> 1;
+  y1 = y0 - b1;
+
+  a = 8 * a * a;
+  b1 = 8 * b * b;
+
+  // Outline drawing
   do {
-    pixels.push({ x: x1, y: y0 }); /*   I. Quadrant */
-    pixels.push({ x: x0, y: y0 }); /*  II. Quadrant */
-    pixels.push({ x: x0, y: y1 }); /* III. Quadrant */
-    pixels.push({ x: x1, y: y1 }); /*  IV. Quadrant */
+    pixels.push({ x: x1, y: y0 }); // I Quadrant
+    pixels.push({ x: x0, y: y0 }); // II Quadrant
+    pixels.push({ x: x0, y: y1 }); // III Quadrant
+    pixels.push({ x: x1, y: y1 }); // IV Quadrant
+
     e2 = 2 * err;
-    if (e2 <= dy) { y0++; y1--; err += dy += a; }  /* y step */
-    if (e2 >= dx || 2 * err > dy) { x0++; x1--; err += dx += b1; } /* x step */
+    if (e2 <= dy) {
+      y0++;
+      y1--;
+      err += dy += a;
+    }
+    if (e2 >= dx || 2 * err > dy) {
+      x0++;
+      x1--;
+      err += dx += b1;
+    }
   } while (x0 <= x1);
 
-  while (y0 - y1 < b) {  /* too early stop of flat ellipses a=1 */
-    pixels.push({ x: x0 - 1, y: y0 }); /* -> finish tip of ellipse */
+  while (y0 - y1 <= b) {
+    pixels.push({ x: x0 - 1, y: y0 });
     pixels.push({ x: x1 + 1, y: y0++ });
     pixels.push({ x: x0 - 1, y: y1 });
     pixels.push({ x: x1 + 1, y: y1-- });
   }
-  return pixels;
-}
+
+  // --- Fill interior ---
+  // Group pixels by row (y), then fill between minX and maxX
+  const rows: Record<number, { minX: number; maxX: number }> = {};
+  for (const p of pixels) {
+    if (!(p.y in rows)) {
+      rows[p.y] = { minX: p.x, maxX: p.x };
+    } else {
+      rows[p.y].minX = Math.min(rows[p.y].minX, p.x);
+      rows[p.y].maxX = Math.max(rows[p.y].maxX, p.x);
+    }
+  }
+
+  const filledPixels: { x: number; y: number }[] = [...pixels];
+  for (const y in rows) {
+    const { minX, maxX } = rows[y];
+    for (let x = minX; x <= maxX; x++) {
+      filledPixels.push({ x, y: parseInt(y) });
+    }
+  }
+
+  return filledPixels;
+}
+
+
+export default function getEllipsePixels(x0: number, y0: number, x1: number, y1: number) {
+  if (Math.abs(x0 - x1) === Math.abs(y0 - y1) && Math.abs(x0 - x1)) {
+    console.log('circle', Math.abs(x0 - x1), Math.abs(y0 - y1))
+    return betterCircle(x0, y0, x1 + 1, y1 + 1);
+  }
+  return ellipse(x0, y0, x1, y1);
+}

package/pg/modal/README.md

@@ -0,0 +1,29 @@
+# `PgModalAlert`
+
+The `PgModal` is a base class for creating modals.
+
+```typescript
+import '@pictogrammers/components/pgModal';
+import PgModal from '@pictogrammers/components/pgModal';
+```
+
+```typescript
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './modal.html';
+import style from './modal.css';
+
+@Component({
+  selector: 'my-modal',
+  template,
+  style
+})
+export default class MyModal extends PgModal {
+  @Part() $close: HTMLButtonElement;
+  connectedCallback() {
+    this.$close.addEventListener('click', () => {
+      this.close();
+    });
+  }
+}
+```

package/pg/modal/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <button part="button">Launch MyModal</button>
+  <div><code>Result: </code><code part="result"></code></div>
+</div>

package/pg/modal/__examples__/basic/basic.ts

@@ -0,0 +1,42 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgModal from '../../modal';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-my-modal',
+  template: `<main>Hello! <button part="close">Close</button></main>`
+})
+export class XMyModal extends PgModal {
+
+  @Part() $close: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$close.addEventListener('click', () => {
+      this.close();
+    });
+  }
+}
+
+@Component({
+  selector: 'x-pg-modal-basic',
+  template
+})
+export default class XPgModalBasic extends HTMLElement {
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  async handleClick() {
+    const result = await XMyModal.open({
+      header: 'Delete Item',
+      message: 'Are you sure you want to delete the item?'
+    });
+    this.$result.textContent = `${result}`;
+  }
+
+}

package/pg/modal/index.ts

@@ -0,0 +1,3 @@
+import PgModal from './modal';
+
+export default PgModal;

package/pg/modal/modal.css

@@ -0,0 +1,40 @@
+.backdrop {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  justify-content: center;
+  align-items: center;
+}
+.dialog {
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  min-width: 15rem;
+}
+header {
+  border-bottom: 1px solid #ccc;
+  background: #f1f1f1;
+  padding: 0.75rem 1rem;
+}
+header h2 {
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: normal;
+}
+main {
+  padding: 0.5rem 1rem;
+}
+footer {
+  display: flex;
+  flex-direction: row;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #ccc;
+  background: #f1f1f1;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}

package/pg/modal/modal.html

@@ -0,0 +1,9 @@
+<div class="backdrop">
+  <div class="dialog"
+    role="dialog"
+    id="dialog1"
+    aria-labelledby="dialog1_label"
+    aria-modal="true">
+    <child/>
+  </div>
+</div>

package/pg/modal/modal.ts

@@ -0,0 +1,14 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modal.html';
+import style from './modal.css';
+
+import PgOverlay from '../overlay/overlay';
+
+@Component({
+  template,
+  style
+})
+export default class PgModal extends PgOverlay {
+
+}

package/pg/tree/README.md

@@ -72,4 +72,13 @@ this.$tree.addEventListener('drop', (e: any) => {
     item.move(dropIndexes);
   })
 });
-```
+```
+
+## Custom Size
+
+Resize from the default 32px height all the way down to 24px tall via a CSS Variable.
+
+```css
+--pg-icon-width: 1rem;
+--pg-icon-height: 1rem;
+```

package/pg/tree/__examples__/basic/basic.html

@@ -8,3 +8,4 @@
 <button part="addFolder">Add Folder</button>
 <button part="removeItem">Remove Item</button>
 <button part="updateItem">Update Selected Label Item</button>
+<input part="height" type="range" value="2" min="1" max="2" step="0.1" />

package/pg/tree/__examples__/basic/basic.ts

@@ -65,6 +65,7 @@ export default class XPgTreeBasic extends HTMLElement {
   @Part() $addFolder: HTMLButtonElement;
   @Part() $removeItem: HTMLButtonElement;
   @Part() $updateItem: HTMLButtonElement;
+  @Part() $height: HTMLInputElement;
 
   #selectedItems = [];
 
@@ -152,5 +153,10 @@ export default class XPgTreeBasic extends HTMLElement {
         selected.getData().label = `Updated ${updatedTimes++}`;
       });
     });
+
+    this.$height.addEventListener('input', (e) => {
+      const { value } = e.target as HTMLInputElement;
+      this.$tree.style.setProperty('--pg-tree-size', `${value}`);
+    });
   }
 }

package/pg/tree/tree.css

@@ -1,5 +1,6 @@
 :host {
   display: contents;
+  --pg-tree-size: 2;
   --pg-tree-selected-primary: #453C4F;
   --pg-tree-selected-secondary: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.1));
   --pg-tree-selected-secondary-hover: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.2));

package/pgAnnoy.js

@@ -1 +1 @@
-(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o})).join("")},t.i=function(e,o,n,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var l=0;l<this.length;l++){var s=this[l][0];null!=s&&(i[s]=!0)}for(var c=0;c<e.length;c++){var p=[].concat(e[c]);n&&i[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),r&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=r):p[4]="".concat(r)),t.push(p))}},t}},497:(e,t,o)=>{o.d(t,{A:()=>s});var n=o(601),r=o.n(n),a=o(314),i=o.n(a)()(r());i.push([e.id,":host {\n  display: block;\n  position: var(--pg-annoy-position, fixed);\n  font-family: var(--pg-font-family);\n  width: var(--pg-annoy-width, 12rem);\n  height: var(--pg-annoy-height, auto);\n  max-height: var(--pg-annoy-max-height, auto);\n  font-size: 1rem;\n  transition: 0.1s margin-bottom ease-in;\n}\n:host(.footer) {\n  margin-bottom: 4rem;\n}\n\ndiv {\n  position: relative;\n  display: grid;\n  margin-right: 0.75rem;\n  padding: 0.5rem;\n  border: 1px solid #FFFFFF;\n  border-radius: 0.25rem;\n  background: #FFFFFF;\n  box-shadow: 0 1px 2rem rgba(0, 0, 0, 0.3);\n}\n\n[part=close] {\n  position: absolute;\n  right: -0.75rem;\n  top: -0.75rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.4);\n  padding: 0;\n  color: rgba(69, 60, 79, 0.8);\n  outline: none;\n}\n\n[part=close]:hover {\n  color: #453C4F;\n  border-color: rgba(69, 60, 79, 0.6);\n}\n\n[part=close]:active {\n  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);\n  border-color: rgba(69, 60, 79, 0.9);\n}\n\n[part=close]:focus::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: -1px;\n  right: -1px;\n  bottom: -1px;\n  left: -1px;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));\n}\n\n[part=close] svg {\n  width: 1rem;\n  height: 1rem;\n}\n",""]);var l=new CSSStyleSheet;l.replaceSync(i.toString());const s=l},601:e=>{e.exports=function(e){return e[1]}}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var a=t[n]={id:n,exports:{}};return e[n](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("swapObserver"),Symbol("isProxy"),Symbol("getTarget");const n=new Map;window.observers=n;Error;Symbol("index");const r=Symbol("init"),a=Symbol("template"),i=Symbol("style"),l=Symbol("parent");function s(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,o){if("class"!==o.kind)throw new Error("@Component() can only decorate a class");var n,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[l]||t.prototype[l][t.prototype[l].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[l]=[t.prototype],t.prototype[i]=e.style?[e.style]:[],t.prototype[a]=e.template||""):(t.prototype[l].push(t.prototype),t.prototype[i].push(e.style),t.prototype[a]=(n=t.prototype[a],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,n):`${n}${c||""}`));const p=t.prototype.connectedCallback||(()=>{}),d=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[a]||"";const o=document.importNode(e.content,!0),n=this.attachShadow({mode:"open"});n.adoptedStyleSheets=t.prototype[i].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),n.appendChild(o)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const o=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&o.add(e.localName);const n=Array.from(o.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[l].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[s(t)]=!0,e)),{}):{})}))};0===n.length?(this[r]=!0,p.call(this),c()):Promise.all(n).then((()=>{this[r]=!0,p.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){d.call(this)},t.prototype.attributeChangedCallback=function(e,t,o){this[s(e)]=o},o.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${o.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");Symbol("hasProxy");Symbol("meta");var p=o(497),d=function(e,t,o,n,r,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var l,s=n.kind,c="getter"===s?"get":"setter"===s?"set":"value",p=!t&&e?n.static?e:e.prototype:null,d=t||(p?Object.getOwnPropertyDescriptor(p,n.name):{}),u=!1,m=o.length-1;m>=0;m--){var h={};for(var f in n)h[f]="access"===f?{}:n[f];for(var f in n.access)h.access[f]=n.access[f];h.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var y=(0,o[m])("accessor"===s?{get:d.get,set:d.set}:d[c],h);if("accessor"===s){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(l=i(y.get))&&(d.get=l),(l=i(y.set))&&(d.set=l),(l=i(y.init))&&r.unshift(l)}else(l=i(y))&&("field"===s?r.unshift(l):d[c]=l)}p&&Object.defineProperty(p,n.name,d),u=!0},u=function(e,t,o){for(var n=arguments.length>2,r=0;r<t.length;r++)o=n?t[r].call(e,o):t[r].call(e);return n?o:void 0};(()=>{let e,t,o,n=[c({selector:"pg-annoy",style:p.A,template:'<div> <button part="close"> <svg viewBox="0 0 24 24"> <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/> </svg> </button> <slot></slot> </div>'})],r=[],a=HTMLElement,i=[],l=[];(class extends a{static{t=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;o=[function(e,t){const o=t.name,n=o.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,o,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${n}]`))}})}))}],d(null,null,o,{kind:"field",name:"$close",static:!1,private:!1,access:{has:e=>"$close"in e,get:e=>e.$close,set:(e,t)=>{e.$close=t}},metadata:s},i,l),d(null,e={value:t},n,{kind:"class",name:t.name,metadata:s},null,r),t=e.value,s&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),u(t,r)}$close=u(this,i,void 0);list=(u(this,l),[]);connectedCallback(){}})})()})();
+(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o})).join("")},t.i=function(e,o,n,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var l=0;l<this.length;l++){var s=this[l][0];null!=s&&(i[s]=!0)}for(var c=0;c<e.length;c++){var p=[].concat(e[c]);n&&i[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),r&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=r):p[4]="".concat(r)),t.push(p))}},t}},497:(e,t,o)=>{o.d(t,{A:()=>s});var n=o(601),r=o.n(n),a=o(314),i=o.n(a)()(r());i.push([e.id,":host {\n  display: block;\n  position: var(--pg-annoy-position, fixed);\n  font-family: var(--pg-font-family);\n  width: var(--pg-annoy-width, 12rem);\n  height: var(--pg-annoy-height, auto);\n  max-height: var(--pg-annoy-max-height, auto);\n  font-size: 1rem;\n  transition: 0.1s margin-bottom ease-in;\n}\n:host(.footer) {\n  margin-bottom: 4rem;\n}\n\ndiv {\n  position: relative;\n  display: grid;\n  margin-right: 0.75rem;\n  padding: 0.5rem;\n  border: 1px solid #FFFFFF;\n  border-radius: 0.25rem;\n  background: #FFFFFF;\n  box-shadow: 0 1px 2rem rgba(0, 0, 0, 0.3);\n}\n\n[part=close] {\n  position: absolute;\n  right: -0.75rem;\n  top: -0.75rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 1px solid #fff;\n  border-radius: 50%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.4);\n  padding: 0;\n  color: rgba(69, 60, 79, 0.8);\n  outline: none;\n}\n\n[part=close]:hover {\n  color: #453C4F;\n  border-color: rgba(69, 60, 79, 0.6);\n}\n\n[part=close]:active {\n  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);\n  border-color: rgba(69, 60, 79, 0.9);\n}\n\n[part=close]:focus::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: -1px;\n  right: -1px;\n  bottom: -1px;\n  left: -1px;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));\n}\n\n[part=close] svg {\n  width: 1rem;\n  height: 1rem;\n}\n",""]);var l=new CSSStyleSheet;l.replaceSync(i.toString());const s=l},601:e=>{e.exports=function(e){return e[1]}}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var a=t[n]={id:n,exports:{}};return e[n](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("swapObserver"),Symbol("isProxy"),Symbol("getTarget");const n=new Map;window.observers=n;Error;Symbol("index");const r=Symbol("init"),a=Symbol("template"),i=Symbol("style"),l=Symbol("parent");function s(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,o){if("class"!==o.kind)throw new Error("@Component() can only decorate a class");var n,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[l]||t.prototype[l][t.prototype[l].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[l]=[t.prototype],t.prototype[i]=e.style?[e.style]:[],t.prototype[a]=e.template||""):(t.prototype[l].push(t.prototype),t.prototype[i].push(e.style),t.prototype[a]=(n=t.prototype[a],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,n):n.match(/<child\/>/)?n.replace(/<child\/>/,c||""):`${n}${c||""}`));const p=t.prototype.connectedCallback||(()=>{}),d=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[a]||"";const o=document.importNode(e.content,!0),n=this.attachShadow({mode:"open"});n.adoptedStyleSheets=t.prototype[i].reduce(((e,t)=>{if(!t)return e;if(t instanceof CSSStyleSheet)return e.push(t),e;var o=new CSSStyleSheet;return o.replaceSync(t.toString()),e.push(o),e}),[]),n.appendChild(o)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const o=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&o.add(e.localName);const n=Array.from(o.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[l].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[s(t)]=!0,e)),{}):{})}))};0===n.length?(this[r]=!0,p.call(this),c()):Promise.all(n).then((()=>{this[r]=!0,p.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){d.call(this)},t.prototype.attributeChangedCallback=function(e,t,o){this[s(e)]=o},o.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${o.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");Symbol("hasProxy");Symbol("meta");var p=o(497),d=function(e,t,o,n,r,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var l,s=n.kind,c="getter"===s?"get":"setter"===s?"set":"value",p=!t&&e?n.static?e:e.prototype:null,d=t||(p?Object.getOwnPropertyDescriptor(p,n.name):{}),u=!1,h=o.length-1;h>=0;h--){var m={};for(var f in n)m[f]="access"===f?{}:n[f];for(var f in n.access)m.access[f]=n.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var y=(0,o[h])("accessor"===s?{get:d.get,set:d.set}:d[c],m);if("accessor"===s){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(l=i(y.get))&&(d.get=l),(l=i(y.set))&&(d.set=l),(l=i(y.init))&&r.unshift(l)}else(l=i(y))&&("field"===s?r.unshift(l):d[c]=l)}p&&Object.defineProperty(p,n.name,d),u=!0},u=function(e,t,o){for(var n=arguments.length>2,r=0;r<t.length;r++)o=n?t[r].call(e,o):t[r].call(e);return n?o:void 0};(()=>{let e,t,o,n=[c({selector:"pg-annoy",style:p.A,template:'<div> <button part="close"> <svg viewBox="0 0 24 24"> <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/> </svg> </button> <slot></slot> </div>'})],r=[],a=HTMLElement,i=[],l=[];(class extends a{static{t=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;o=[function(e,t){const o=t.name,n=o.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,o,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${n}]`))}})}))}],d(null,null,o,{kind:"field",name:"$close",static:!1,private:!1,access:{has:e=>"$close"in e,get:e=>e.$close,set:(e,t)=>{e.$close=t}},metadata:s},i,l),d(null,e={value:t},n,{kind:"class",name:t.name,metadata:s},null,r),t=e.value,s&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),u(t,r)}$close=u(this,i,void 0);list=(u(this,l),[]);connectedCallback(){}})})()})();

package/pgApp.js

@@ -1 +1 @@
-(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n  display: contents;\n}\n\n[part=grid] {\n  display: grid;\n  grid-template-columns: auto 0.5rem minmax(0, 1fr);\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n}\n\n[part=header] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 1;\n  border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n  display: flex;\n  border: 0;\n  padding: 0.5rem;\n  background-color: transparent;\n  border-right: 1px solid rgba(69, 60, 79, 0.5);\n  outline: none;\n}\n\n[part=header] > button:hover {\n  background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n  position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n  --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n  background-color: #fff;\n}\n\n[part=side] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1;\n  grid-row: 2;\n  min-width: 10rem;\n  max-width: 20rem;\n}\n\n[part=main] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 3;\n  grid-row: 2;\n}\n\n[part=resize] {\n  display: flex;\n  grid-column: 2;\n  grid-row: 2;\n  border: 0;\n  padding: 0;\n  cursor: ew-resize;\n  border-left: 1px solid #453C4F;\n  border-right: 1px solid #453C4F;\n  background-color: transparent;\n}\n\n[part=resize].dragging {\n  background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1 / 4;\n  grid-row: 2;\n  background-color: #fff;\n  position: relative;\n}\n\n[part=home]::before {\n  content: ' ';\n  position: absolute;\n  top: -2px;\n  width: 2.5rem;\n  height: 2px;\n  background-color: #fff;\n}\n\n[part=home].selected {\n  background-color: #fff;\n}\n\n.hide {\n  display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("swapObserver"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <div part="main"> <slot name="main"></slot> </div> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],s=[],l=HTMLElement,m=[],f=[],g=[],b=[],v=[],y=[],w=[],S=[];(class extends l{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;n=[d()],o=[d()],r=[d()],i=[d()],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},m,f),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},g,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},v,y),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},w,S),u(null,e={value:t},a,{kind:"class",name:t.name,metadata:c},null,s),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,s)}$logo=h(this,m,void 0);$home=(h(this,f),h(this,g,void 0));$side=(h(this,b),h(this,v,void 0));$resize=(h(this,y),h(this,w,void 0));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this))}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,S)}})})()})();
+(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n  display: contents;\n}\n\n[part=grid] {\n  display: grid;\n  grid-template-columns: auto 0.5rem minmax(0, 1fr);\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n}\n\n[part=header] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 1;\n  border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n  display: flex;\n  border: 0;\n  padding: 0.5rem;\n  background-color: transparent;\n  border-right: 1px solid rgba(69, 60, 79, 0.5);\n  outline: none;\n}\n\n[part=header] > button:hover {\n  background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n  position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n  --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n  background-color: #fff;\n}\n\n[part=side] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1;\n  grid-row: 2;\n  min-width: 12rem;\n  max-width: 20rem;\n}\n\n[part=main] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 3;\n  grid-row: 2;\n}\n\n[part=resize] {\n  display: flex;\n  grid-column: 2;\n  grid-row: 2;\n  border: 0;\n  padding: 0;\n  cursor: ew-resize;\n  border-left: 1px solid #453C4F;\n  border-right: 1px solid #453C4F;\n  background-color: transparent;\n}\n\n[part=resize].dragging {\n  background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1 / 4;\n  grid-row: 2;\n  background-color: #fff;\n  position: relative;\n}\n\n[part=home]::before {\n  content: ' ';\n  position: absolute;\n  top: -2px;\n  width: 2.5rem;\n  height: 2px;\n  background-color: #fff;\n}\n\n[part=home].selected {\n  background-color: #fff;\n}\n\n.hide {\n  display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("swapObserver"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):o.match(/<child\/>/)?o.replace(/<child\/>/,c||""):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].reduce(((e,t)=>{if(!t)return e;if(t instanceof CSSStyleSheet)return e.push(t),e;var n=new CSSStyleSheet;return n.replaceSync(t.toString()),e.push(n),e}),[]),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a,s=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <div part="main"> <slot name="main"></slot> </div> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],l=[],m=HTMLElement,f=[],g=[],y=[],b=[],v=[],w=[],S=[],$=[],x=[],k=[];(class extends m{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;var p;n=[d()],o=[d()],r=[d()],i=[d()],a=[(p="app",function(e,t){return t.name,function(e){if(!(e instanceof Map))throw new Error("@Local(key) property must be type Map");return new Proxy(e,{get(t,n){switch(n){case"get":return t=>{if(!e.has(t))throw new Error(`@Local(key) missing key ${t}`);const n=`${p}:${t}`;return null===window.localStorage.getItem(n)?e.get(t):JSON.parse(window.localStorage.getItem(n)??"null")};case"set":return(t,n)=>{if(!e.has(t))throw new Error(`@Local(key) missing key ${t}`);const o=`${p}:${t}`;null===n||JSON.stringify(n)===JSON.stringify(e.get(t))?window.localStorage.removeItem(o):window.localStorage.setItem(o,JSON.stringify(n))};default:throw new Error(`@Local(key) supported method ${n}`)}}})}})],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},f,g),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},y,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},v,w),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},S,$),u(null,null,a,{kind:"field",name:"store",static:!1,private:!1,access:{has:e=>"store"in e,get:e=>e.store,set:(e,t)=>{e.store=t}},metadata:c},x,k),u(null,e={value:t},s,{kind:"class",name:t.name,metadata:c},null,l),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,l)}$logo=h(this,f,void 0);$home=(h(this,g),h(this,y,void 0));$side=(h(this,b),h(this,v,void 0));$resize=(h(this,w),h(this,S,void 0));store=(h(this,$),h(this,x,new Map([["width",192]])));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this)),this.$side.style.width=`${this.store.get("width")}px`}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`,this.store.set("width",Math.floor(r))},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,k)}})})()})();