fix(core): Fixed various package metadata issues and improved component interactions

ts_web/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
-  name: '@uptime.link_private/webwidget',
-  version: '1.0.78',
-  description: 'the webwidget for public use of uptimelink'
+  name: '@uptime.link/webwidget',
+  version: '1.0.79',
+  description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
 }

ts_web/elements/uptimelink-webwidget.ts

@@ -1,6 +1,6 @@
 import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
 
-import { UptimelinkWindowLayer } from './uptimelink-windowlayer.js';
+import { DeesWindowLayer } from '@design.estate/dees-catalog';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -171,7 +171,7 @@ export class UptimelinkWebwidget extends DeesElement {
     `;
   }
 
-  public windowLayer: UptimelinkWindowLayer;
+  public windowLayer: DeesWindowLayer;
   private async setupEventing() {
     const domtools = await this.domtoolsPromise;
     await this.updateComplete;
@@ -190,7 +190,7 @@ export class UptimelinkWebwidget extends DeesElement {
       }
       this.isElevated = true;
       this.isFocused = true;
-      this.windowLayer = await UptimelinkWindowLayer.createAndShow({
+      this.windowLayer = await DeesWindowLayer.createAndShow({
         blur: true,
       });
       await domtools.convenience.smartdelay.delayFor(200);

ts_web/elements/uptimelink-windowlayer.ts

@@ -1,113 +0,0 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'uptimelink-windowlayer': UptimelinkWindowLayer;
-  }
-}
-
-export interface IOptions_UptimeLinkWindowLayer {
-  blur: boolean;
-}
-
-@customElement('uptimelink-windowlayer')
-export class UptimelinkWindowLayer extends DeesElement {
-  // STATIC
-  public static demo = () => html`<uptimelink-windowlayer></uptimelink-windowlayer>`;
-
-  public static async createAndShow(optionsArg?: IOptions_UptimeLinkWindowLayer) {
-    const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
-    const windowLayer = new UptimelinkWindowLayer();
-    windowLayer.options = {
-      ...windowLayer.options,
-      ...optionsArg,
-    }
-    document.body.append(windowLayer);
-    await domtoolsInstance.convenience.smartdelay.delayFor(0);
-    windowLayer.show();
-    return windowLayer;
-  }
-
-  @state()
-  public options: IOptions_UptimeLinkWindowLayer = {
-    blur: false
-  };
-
-  // INSTANCE
-  @property({
-    type: Boolean
-  })
-  public visible = false;
-
-  constructor() {
-    super();
-    domtools.elementBasic.setup();
-  }
-
-  public render(): TemplateResult {
-    return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        .windowOverlay {
-          transition: all 0.2s;
-          will-change: transform;
-          position: fixed;
-          top: 0px;
-          left: 0px;
-          height: 100vh;
-          width: 100vw;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background: rgba(0, 0, 0, 0.0);
-          backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
-          pointer-events: none;
-          z-index: 200;
-        }
-        
-        .visible {
-          background: rgba(0, 0, 0, 0.2);
-          backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
-        }
-      </style>
-      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  firstUpdated() {
-    setTimeout(() => {
-      this.visible = true;
-    }, 100);
-  }
-
-  dispatchClicked() {
-    this.dispatchEvent(new CustomEvent('clicked'));
-  }
-
-  public toggleVisibility () {
-    this.visible = !this.visible;
-  }
-
-  public async show() {
-    const domtools = await this.domtoolsPromise;
-    await domtools.convenience.smartdelay.delayFor(0);
-    this.visible = true;
-  }
-
-  public async hide() {
-    const domtools = await this.domtoolsPromise;
-    await domtools.convenience.smartdelay.delayFor(0);
-    this.visible = false;
-  }
-
-  public async destroy() {
-    const domtools = await this.domtoolsPromise;
-    await this.hide();
-    await domtools.convenience.smartdelay.delayFor(300);
-    this.remove();
-  }
-}