@design.estate/dees-catalog 3.49.2 → 3.50.2

package/dist_watch/bundle.js

@@ -111535,11 +111535,11 @@ var init_dees_workspace_terminal = __esm({
       i`
       :host {
         background: ${cssManager.bdTheme("#ffffff", "#000000")};
-        position: absolute;
-        height: 100%;
-        width: 100%;
         display: flex;
         flex-direction: row;
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
       }
 
       * {
@@ -155825,15 +155825,37 @@ var demoFunc36 = /* @__PURE__ */ __name(() => {
       lastDataPointTime = 0;
       connectionsLastUpdate = 0;
     }, "randomizeData");
+    const updateButtonStates = /* @__PURE__ */ __name(() => {
+      const allButtons = elementArg.querySelectorAll("dees-button");
+      allButtons.forEach((button) => {
+        const text9 = button.text?.trim();
+        if (text9 === "System Usage") {
+          button.type = currentDataset === "system" ? "highlighted" : "normal";
+        } else if (text9 === "Network Traffic") {
+          button.type = currentDataset === "network" ? "highlighted" : "normal";
+        } else if (text9 === "Sales Data") {
+          button.type = currentDataset === "sales" ? "highlighted" : "normal";
+        }
+      });
+    }, "updateButtonStates");
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
+      const text9 = button.text?.trim();
       if (text9 === "System Usage") {
-        button.addEventListener("click", () => switchDataset("system"));
+        button.addEventListener("click", () => {
+          switchDataset("system");
+          updateButtonStates();
+        });
       } else if (text9 === "Network Traffic") {
-        button.addEventListener("click", () => switchDataset("network"));
+        button.addEventListener("click", () => {
+          switchDataset("network");
+          updateButtonStates();
+        });
       } else if (text9 === "Sales Data") {
-        button.addEventListener("click", () => switchDataset("sales"));
+        button.addEventListener("click", () => {
+          switchDataset("sales");
+          updateButtonStates();
+        });
       } else if (text9 === "Start Live") {
         button.addEventListener("click", () => startRealtime());
       } else if (text9 === "Stop Live") {
@@ -155842,19 +155864,6 @@ var demoFunc36 = /* @__PURE__ */ __name(() => {
         button.addEventListener("click", () => randomizeData());
       }
     });
-    const updateButtonStates = /* @__PURE__ */ __name(() => {
-      const buttons2 = elementArg.querySelectorAll("dees-button");
-      buttons2.forEach((button) => {
-        const text9 = button.textContent?.trim();
-        if (text9 === "System Usage") {
-          button.type = currentDataset === "system" ? "highlighted" : "normal";
-        } else if (text9 === "Network Traffic") {
-          button.type = currentDataset === "network" ? "highlighted" : "normal";
-        } else if (text9 === "Sales Data") {
-          button.type = currentDataset === "sales" ? "highlighted" : "normal";
-        }
-      });
-    }, "updateButtonStates");
     chartElement.rollingWindow = TIME_WINDOW;
     chartElement.realtimeMode = false;
     chartElement.yAxisScaling = "percentage";
@@ -155863,24 +155872,6 @@ var demoFunc36 = /* @__PURE__ */ __name(() => {
     setTimeout(() => {
       chartElement.updateTimeWindow();
     }, 100);
-    const originalSwitchDataset = switchDataset;
-    const switchDatasetWithButtonUpdate = /* @__PURE__ */ __name((name) => {
-      originalSwitchDataset(name);
-      updateButtonStates();
-    }, "switchDatasetWithButtonUpdate");
-    buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
-      if (text9 === "System Usage") {
-        button.removeEventListener("click", () => switchDataset("system"));
-        button.addEventListener("click", () => switchDatasetWithButtonUpdate("system"));
-      } else if (text9 === "Network Traffic") {
-        button.removeEventListener("click", () => switchDataset("network"));
-        button.addEventListener("click", () => switchDatasetWithButtonUpdate("network"));
-      } else if (text9 === "Sales Data") {
-        button.removeEventListener("click", () => switchDataset("sales"));
-        button.addEventListener("click", () => switchDatasetWithButtonUpdate("sales"));
-      }
-    });
     if (connectionsChartElement) {
       const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);
       connectionsChartElement.series = [{
@@ -156446,20 +156437,34 @@ var _DeesChartArea = class _DeesChartArea extends (_a53 = DeesElement, _chart_de
           })
         }));
         if (filteredSeries.some((s10) => s10.data.length > 0)) {
+          const isDark = !this.goBright;
+          const options = {
+            series: filteredSeries,
+            xaxis: {
+              min: cutoffTime,
+              max: now2,
+              labels: {
+                format: "HH:mm:ss",
+                datetimeUTC: false,
+                style: {
+                  colors: [isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)"],
+                  fontSize: "12px",
+                  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                  fontWeight: "400"
+                }
+              },
+              tickAmount: 6
+            }
+          };
           if (this.yAxisScaling === "dynamic") {
             const allValues = filteredSeries.flatMap((s10) => s10.data.map((d5) => d5.y));
             if (allValues.length > 0) {
               const maxValue = Math.max(...allValues);
               const dynamicMax = Math.ceil(maxValue * 1.1);
-              await this.chart.updateOptions({
-                yaxis: {
-                  min: 0,
-                  max: dynamicMax
-                }
-              }, false, false);
+              options.yaxis = { min: 0, max: dynamicMax };
             }
           }
-          await this.chart.updateSeries(filteredSeries, false);
+          await this.chart.updateOptions(options, false, false);
         }
       } else {
         await this.chart.updateSeries(newSeries, animate);
@@ -156758,7 +156763,7 @@ var demoFunc37 = /* @__PURE__ */ __name(() => {
     }, "stopRawSimulation");
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
+      const text9 = button.text?.trim();
       switch (text9) {
         case "Add Structured Log":
           button.addEventListener("click", () => generateRandomLog());
@@ -164860,7 +164865,7 @@ var demoFunc47 = /* @__PURE__ */ __name(() => {
     let widgetCounter = 4;
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
+      const text9 = button.text?.trim();
       switch (text9) {
         case "Toggle Animation":
           button.addEventListener("click", () => {
@@ -164903,7 +164908,7 @@ var demoFunc47 = /* @__PURE__ */ __name(() => {
         case "Toggle Edit Mode":
           button.addEventListener("click", () => {
             grid.editable = !grid.editable;
-            button.textContent = grid.editable ? "Lock Grid" : "Unlock Grid";
+            button.text = grid.editable ? "Lock Grid" : "Unlock Grid";
           });
           break;
         case "Reset Layout":
@@ -173672,6 +173677,44 @@ var demoFunc52 = /* @__PURE__ */ __name(() => b2`
     <dees-simple-appdash
       name="My Application"
       terminalSetupCommand="echo 'Welcome to the terminal!'"
+      .globalMessages=${[
+  {
+    id: "update",
+    type: "info",
+    message: "A new version (v3.50.0) is available with performance improvements and bug fixes.",
+    dismissible: true,
+    actions: [
+      {
+        name: "Update Now",
+        iconName: "lucide:download",
+        action: /* @__PURE__ */ __name(() => alert("Updating..."), "action")
+      },
+      {
+        name: "Release Notes",
+        action: /* @__PURE__ */ __name(() => alert("Opening release notes..."), "action")
+      }
+    ]
+  },
+  {
+    id: "maintenance",
+    type: "warning",
+    message: "Scheduled maintenance window: April 5, 2026 02:00\u201306:00 UTC. Some services may be temporarily unavailable.",
+    dismissible: true
+  },
+  {
+    id: "critical",
+    type: "error",
+    message: "Your SSL certificate expires in 3 days. Renew now to avoid service disruption.",
+    dismissible: false,
+    actions: [
+      {
+        name: "Renew Certificate",
+        iconName: "lucide:shieldCheck",
+        action: /* @__PURE__ */ __name(() => alert("Renewing certificate..."), "action")
+      }
+    ]
+  }
+]}
       .viewTabs=${[
   {
     name: "Dashboard",
@@ -173704,15 +173747,17 @@ var demoFunc52 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts30();
 init_dees_icon();
 init_theme();
-var _selectedView_dec, _terminalSetupCommand_dec, _viewTabs_dec, _name_dec2, _a89, _DeesSimpleAppDash_decorators, _init92, _name2, _viewTabs, _terminalSetupCommand, _selectedView;
+var __activeMessages_dec, _selectedView_dec, _globalMessages_dec, _terminalSetupCommand_dec, _viewTabs_dec, _name_dec2, _a89, _DeesSimpleAppDash_decorators, _init92, _name2, _viewTabs, _terminalSetupCommand, _globalMessages, _selectedView, __activeMessages;
 _DeesSimpleAppDash_decorators = [customElement("dees-simple-appdash")];
-var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _name_dec2 = [n5()], _viewTabs_dec = [n5({ type: Array })], _terminalSetupCommand_dec = [n5({ type: String })], _selectedView_dec = [r5()], _a89) {
+var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _name_dec2 = [n5()], _viewTabs_dec = [n5({ type: Array })], _terminalSetupCommand_dec = [n5({ type: String })], _globalMessages_dec = [n5({ type: Array })], _selectedView_dec = [r5()], __activeMessages_dec = [r5()], _a89) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _name2, __runInitializers(_init92, 8, this, "Application Dashboard")), __runInitializers(_init92, 11, this);
     __privateAdd(this, _viewTabs, __runInitializers(_init92, 12, this, [])), __runInitializers(_init92, 15, this);
     __privateAdd(this, _terminalSetupCommand, __runInitializers(_init92, 16, this, `echo "Terminal ready"`)), __runInitializers(_init92, 19, this);
-    __privateAdd(this, _selectedView, __runInitializers(_init92, 20, this)), __runInitializers(_init92, 23, this);
+    __privateAdd(this, _globalMessages, __runInitializers(_init92, 20, this, [])), __runInitializers(_init92, 23, this);
+    __privateAdd(this, _selectedView, __runInitializers(_init92, 24, this)), __runInitializers(_init92, 27, this);
+    __privateAdd(this, __activeMessages, __runInitializers(_init92, 28, this, [])), __runInitializers(_init92, 31, this);
     __publicField(this, "currentTerminal", null);
     __publicField(this, "currentView");
   }
@@ -173755,6 +173800,34 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _
             </div>
           </div>
         </div>
+        ${this._activeMessages.length > 0 ? b2`
+        <div class="messageBannerArea">
+          ${this._activeMessages.map((msg) => b2`
+            <div
+              class="messageBanner messageBanner-${msg.type}"
+              data-message-id="${msg.id}"
+            >
+              <dees-icon .icon="${this.getMessageIcon(msg)}"></dees-icon>
+              <span class="messageBanner-text">${msg.message}</span>
+              ${msg.actions?.length ? b2`
+                <div class="messageBanner-actions">
+                  ${msg.actions.map((a5) => b2`
+                    <div class="messageBanner-action" @click=${() => a5.action()}>
+                      ${a5.iconName ? b2`<dees-icon .icon="${a5.iconName.includes(":") ? a5.iconName : `lucide:${a5.iconName}`}"></dees-icon>` : ""}
+                      <span>${a5.name}</span>
+                    </div>
+                  `)}
+                </div>
+              ` : ""}
+              ${msg.dismissible !== false ? b2`
+                <div class="messageBanner-dismiss" @click=${() => this.removeMessage(msg.id)}>
+                  <dees-icon .icon="${"lucide:x"}"></dees-icon>
+                </div>
+              ` : ""}
+            </div>
+          `)}
+        </div>
+      ` : ""}
         <div class="appcontent">
           <!-- Content goes here -->
         </div>
@@ -173779,6 +173852,71 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _
       await this.loadView(viewToLoad);
     }
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("globalMessages")) {
+      const propertyIds = new Set(this.globalMessages.map((m6) => m6.id));
+      const existingIds = new Set(this._activeMessages.map((m6) => m6.id));
+      const newMessages = this.globalMessages.filter((m6) => !existingIds.has(m6.id));
+      const previousGlobalMessages = changedProperties.get("globalMessages") || [];
+      const previousIds = new Set(previousGlobalMessages.map((m6) => m6.id));
+      const removedIds = new Set([...previousIds].filter((id) => !propertyIds.has(id)));
+      this._activeMessages = [
+        ...this._activeMessages.filter((m6) => !removedIds.has(m6.id)),
+        ...newMessages
+      ];
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateBannerOffset();
+  }
+  updateBannerOffset() {
+    requestAnimationFrame(() => {
+      const bannerArea = this.shadowRoot?.querySelector(".messageBannerArea");
+      const maincontainer = this.shadowRoot?.querySelector(".maincontainer");
+      const height = bannerArea ? bannerArea.offsetHeight : 0;
+      maincontainer?.style.setProperty("--banner-area-height", `${height}px`);
+    });
+  }
+  getMessageIcon(msg) {
+    if (msg.icon) return msg.icon;
+    const defaults = {
+      info: "lucide:info",
+      success: "lucide:circleCheck",
+      warning: "lucide:triangleAlert",
+      error: "lucide:circleX"
+    };
+    return defaults[msg.type];
+  }
+  addMessage(message2) {
+    const id = message2.id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const fullMessage = {
+      dismissible: true,
+      ...message2,
+      id
+    };
+    this._activeMessages = [...this._activeMessages, fullMessage];
+    return id;
+  }
+  removeMessage(id) {
+    const bannerEl = this.shadowRoot?.querySelector(`[data-message-id="${id}"]`);
+    if (bannerEl) {
+      bannerEl.classList.add("dismissing");
+      bannerEl.addEventListener("animationend", () => {
+        this._activeMessages = this._activeMessages.filter((m6) => m6.id !== id);
+        this.dispatchEvent(new CustomEvent("message-dismiss", {
+          detail: { id },
+          bubbles: true,
+          composed: true
+        }));
+      }, { once: true });
+    } else {
+      this._activeMessages = this._activeMessages.filter((m6) => m6.id !== id);
+    }
+  }
+  clearMessages() {
+    this._activeMessages = [];
+  }
   async launchTerminal() {
     const domtools20 = await this.domtoolsPromise;
     if (this.currentTerminal) {
@@ -173793,7 +173931,7 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _
     maincontainer.appendChild(terminal);
     terminal.style.position = "absolute";
     terminal.style.zIndex = "10";
-    terminal.style.top = "0px";
+    terminal.style.top = "var(--banner-area-height, 0px)";
     terminal.style.left = "240px";
     terminal.style.right = "0px";
     terminal.style.bottom = "24px";
@@ -173801,8 +173939,6 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _
     terminal.style.transform = "translateY(8px) scale(0.99)";
     terminal.style.transition = "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)";
     terminal.style.boxShadow = "0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)";
-    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
-    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
     terminal.addEventListener("close", () => this.closeTerminal());
     await domtools20.convenience.smartdelay.delayFor(0);
     terminal.style.opacity = "1";
@@ -173839,11 +173975,15 @@ _init92 = __decoratorStart(_a89);
 _name2 = new WeakMap();
 _viewTabs = new WeakMap();
 _terminalSetupCommand = new WeakMap();
+_globalMessages = new WeakMap();
 _selectedView = new WeakMap();
+__activeMessages = new WeakMap();
 __decorateElement(_init92, 4, "name", _name_dec2, _DeesSimpleAppDash, _name2);
 __decorateElement(_init92, 4, "viewTabs", _viewTabs_dec, _DeesSimpleAppDash, _viewTabs);
 __decorateElement(_init92, 4, "terminalSetupCommand", _terminalSetupCommand_dec, _DeesSimpleAppDash, _terminalSetupCommand);
+__decorateElement(_init92, 4, "globalMessages", _globalMessages_dec, _DeesSimpleAppDash, _globalMessages);
 __decorateElement(_init92, 4, "selectedView", _selectedView_dec, _DeesSimpleAppDash, _selectedView);
+__decorateElement(_init92, 4, "_activeMessages", __activeMessages_dec, _DeesSimpleAppDash, __activeMessages);
 _DeesSimpleAppDash = __decorateElement(_init92, 0, "DeesSimpleAppDash", _DeesSimpleAppDash_decorators, _DeesSimpleAppDash);
 __name(_DeesSimpleAppDash, "DeesSimpleAppDash");
 // STATIC
@@ -174127,6 +174267,170 @@ __publicField(_DeesSimpleAppDash, "styles", [
       .control.status-terminal dees-icon {
         color: hsl(45 90% 55%);
       }
+
+      /* Global Message Banners */
+      .messageBannerArea {
+        position: absolute;
+        top: 0;
+        left: 240px;
+        right: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .messageBanner {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 16px;
+        font-size: 13px;
+        font-family: 'Geist Sans', sans-serif;
+        font-weight: 500;
+        border-bottom: 1px solid ${cssManager.bdTheme("hsl(0 0% 91%)", "hsl(0 0% 13%)")};
+        animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      .messageBanner.dismissing {
+        animation: bannerSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      @keyframes bannerSlideDown {
+        from {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes bannerSlideUp {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+
+      .messageBanner dees-icon {
+        font-size: 16px;
+        flex-shrink: 0;
+      }
+
+      .messageBanner-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .messageBanner-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+
+      .messageBanner-action {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 12px;
+        border-radius: 4px;
+        cursor: default;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+        background: ${cssManager.bdTheme("hsl(0 0% 0% / 0.08)", "hsl(0 0% 100% / 0.1)")};
+        color: inherit;
+      }
+
+      .messageBanner-action:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 0% / 0.15)", "hsl(0 0% 100% / 0.18)")};
+      }
+
+      .messageBanner-action:active {
+        transform: scale(0.97);
+      }
+
+      .messageBanner-action dees-icon {
+        font-size: 13px;
+      }
+
+      .messageBanner-dismiss {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        cursor: default;
+        opacity: 0.5;
+        transition: all 0.15s ease;
+      }
+
+      .messageBanner-dismiss:hover {
+        opacity: 1;
+        background: hsl(0 0% 0% / 0.1);
+      }
+
+      /* Message type: info */
+      .messageBanner-info {
+        background: ${cssManager.bdTheme("hsl(210 100% 97%)", "hsl(210 50% 10%)")};
+        color: ${cssManager.bdTheme("hsl(210 70% 30%)", "hsl(210 70% 80%)")};
+        border-left: 3px solid #0084ff;
+      }
+      .messageBanner-info dees-icon {
+        color: #0084ff;
+      }
+
+      /* Message type: success */
+      .messageBanner-success {
+        background: ${cssManager.bdTheme("hsl(142 70% 97%)", "hsl(142 30% 10%)")};
+        color: ${cssManager.bdTheme("hsl(142 50% 25%)", "hsl(142 50% 80%)")};
+        border-left: 3px solid #22c55e;
+      }
+      .messageBanner-success dees-icon {
+        color: #22c55e;
+      }
+
+      /* Message type: warning */
+      .messageBanner-warning {
+        background: ${cssManager.bdTheme("hsl(38 90% 97%)", "hsl(38 40% 10%)")};
+        color: ${cssManager.bdTheme("hsl(38 60% 25%)", "hsl(38 60% 80%)")};
+        border-left: 3px solid #f59e0b;
+      }
+      .messageBanner-warning dees-icon {
+        color: #f59e0b;
+      }
+
+      /* Message type: error */
+      .messageBanner-error {
+        background: ${cssManager.bdTheme("hsl(0 70% 97%)", "hsl(0 40% 10%)")};
+        color: ${cssManager.bdTheme("hsl(0 60% 30%)", "hsl(0 60% 80%)")};
+        border-left: 3px solid #ef4444;
+      }
+      .messageBanner-error dees-icon {
+        color: #ef4444;
+      }
+
+      .messageBanner-dismiss:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 0% / 0.08)", "hsl(0 0% 100% / 0.1)")};
+      }
+
+      .appcontent {
+        top: var(--banner-area-height, 0px);
+        height: calc(100% - 24px - var(--banner-area-height, 0px));
+      }
     `
 ]);
 __runInitializers(_init92, 1, _DeesSimpleAppDash);