@design.estate/dees-catalog 3.51.2 → 3.52.1

package/dist_bundle/bundle.js

@@ -117414,30 +117414,207 @@ var demoFunc9 = /* @__PURE__ */ __name(() => b2`
   </div>
 `, "demoFunc");
 
+// ts_web/elements/00group-layout/dees-tile/dees-tile.demo.ts
+init_dist_ts30();
+var demoFunc10 = /* @__PURE__ */ __name(() => {
+  return b2`
+    <dees-demowrapper>
+      <style>
+        ${i`
+          .demoBox {
+            background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 9%)")};
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .tile-demo-content {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: ${cssManager.bdTheme("hsl(0 0% 45%)", "hsl(0 0% 55%)")};
+            font-size: 13px;
+          }
+          .footer-stats {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            font-size: 11px;
+            width: 100%;
+          }
+          .footer-stats .stat {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+          .footer-stats .stat strong {
+            color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <dees-tile heading="Simple Tile" style="height: 200px;">
+          <div class="tile-demo-content">Content area with rounded corners</div>
+        </dees-tile>
+
+        <dees-tile heading="Tile with Footer" style="height: 200px;">
+          <div class="tile-demo-content">Content goes here</div>
+          <div slot="footer" class="footer-stats">
+            <span class="stat">latest <strong>42</strong></span>
+            <span class="stat">min <strong>12</strong></span>
+            <span class="stat">max <strong>87</strong></span>
+            <span class="stat">avg <strong>45.3</strong></span>
+          </div>
+        </dees-tile>
+
+        <dees-tile style="height: 200px;">
+          <div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
+            <span style="font-weight:500;">Custom Header</span>
+            <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
+          </div>
+          <div class="tile-demo-content">Custom header slot with search input</div>
+        </dees-tile>
+      </div>
+    </dees-demowrapper>
+  `;
+}, "demoFunc");
+
+// ts_web/elements/00group-layout/dees-tile/dees-tile.ts
+init_dist_ts30();
+init_theme();
+var _hasFooter_dec, _heading_dec, _a14, _DeesTile_decorators, _init12, _heading, _hasFooter;
+_DeesTile_decorators = [customElement("dees-tile")];
+var _DeesTile = class _DeesTile extends (_a14 = DeesElement, _heading_dec = [n5({ type: String })], _hasFooter_dec = [r5()], _a14) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _heading, __runInitializers(_init12, 8, this, "")), __runInitializers(_init12, 11, this);
+    __privateAdd(this, _hasFooter, __runInitializers(_init12, 12, this, false)), __runInitializers(_init12, 15, this);
+  }
+  render() {
+    return b2`
+      <div class="tile-outer" part="outer">
+        <div class="tile-header" part="header">
+          <slot name="header">
+            <div class="tile-heading">${this.heading}</div>
+          </slot>
+        </div>
+        <div class="tile-content ${!this.hasFooter ? "no-footer" : ""}" part="content">
+          <slot></slot>
+        </div>
+        <div class="tile-footer ${!this.hasFooter ? "hidden" : ""}" part="footer">
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+  onFooterSlotChange(e11) {
+    const slot = e11.target;
+    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+};
+_init12 = __decoratorStart(_a14);
+_heading = new WeakMap();
+_hasFooter = new WeakMap();
+__decorateElement(_init12, 4, "heading", _heading_dec, _DeesTile, _heading);
+__decorateElement(_init12, 4, "hasFooter", _hasFooter_dec, _DeesTile, _hasFooter);
+_DeesTile = __decorateElement(_init12, 0, "DeesTile", _DeesTile_decorators, _DeesTile);
+__name(_DeesTile, "DeesTile");
+__publicField(_DeesTile, "demo", demoFunc10);
+__publicField(_DeesTile, "demoGroups", ["Layout"]);
+__publicField(_DeesTile, "styles", [
+  themeDefaultStyles,
+  cssManager.defaultStyles,
+  i`
+      :host {
+        display: flex;
+        flex-direction: column;
+        font-family: ${cssGeistFontFamily};
+        color: ${cssManager.bdTheme("hsl(0 0% 3.9%)", "hsl(0 0% 98%)")};
+      }
+
+      /* --- The frame --- */
+      .tile-outer {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 3.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* --- Header: bare container, only the default heading gets styled --- */
+      .tile-header {
+        flex-shrink: 0;
+      }
+
+      .tile-heading {
+        height: 32px;
+        line-height: 32px;
+        padding: 0 16px;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme("hsl(0 0% 20%)", "hsl(0 0% 63.9%)")};
+      }
+
+      /* --- Content: the rounded inset --- */
+      .tile-content {
+        flex: 1;
+        position: relative;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 11%)")};
+        border-bottom: 1px solid ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 11%)")};
+        overflow: hidden;
+      }
+
+      .tile-content.no-footer {
+        border-bottom: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      /* --- Footer: bare container, consumer styles the slotted content --- */
+      .tile-footer {
+        flex-shrink: 0;
+      }
+
+      .tile-footer.hidden {
+        display: none;
+      }
+    `
+]);
+__runInitializers(_init12, 1, _DeesTile);
+var DeesTile = _DeesTile;
+
 // ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
 init_dist_ts30();
 init_dist_ts29();
 init_dees_icon();
 init_theme();
-var _modalZIndex_dec, _contentPadding_dec, _mobileFullscreen_dec, _onHelp_dec, _showHelpButton_dec, _showCloseButton_dec, _minWidth_dec, _maxWidth_dec, _width_dec, _menuOptions_dec, _content_dec, _heading_dec, _a14, _DeesModal_decorators, _init12, _heading, _content, _menuOptions, _width, _maxWidth, _minWidth, _showCloseButton, _showHelpButton, _onHelp, _mobileFullscreen, _contentPadding, _modalZIndex;
+var _modalZIndex_dec, _contentPadding_dec, _mobileFullscreen_dec, _onHelp_dec, _showHelpButton_dec, _showCloseButton_dec, _minWidth_dec, _maxWidth_dec, _width_dec, _menuOptions_dec, _content_dec, _heading_dec2, _a15, _DeesModal_decorators, _init13, _heading2, _content, _menuOptions, _width, _maxWidth, _minWidth, _showCloseButton, _showHelpButton, _onHelp, _mobileFullscreen, _contentPadding, _modalZIndex;
 _DeesModal_decorators = [customElement("dees-modal")];
-var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n5({
+var _DeesModal = class _DeesModal extends (_a15 = DeesElement, _heading_dec2 = [n5({
   type: String
-})], _content_dec = [r5({})], _menuOptions_dec = [r5({})], _width_dec = [n5({ type: String })], _maxWidth_dec = [n5({ type: Number })], _minWidth_dec = [n5({ type: Number })], _showCloseButton_dec = [n5({ type: Boolean })], _showHelpButton_dec = [n5({ type: Boolean })], _onHelp_dec = [n5({ attribute: false })], _mobileFullscreen_dec = [n5({ type: Boolean })], _contentPadding_dec = [n5({ type: Number })], _modalZIndex_dec = [r5()], _a14) {
+})], _content_dec = [r5({})], _menuOptions_dec = [r5({})], _width_dec = [n5({ type: String })], _maxWidth_dec = [n5({ type: Number })], _minWidth_dec = [n5({ type: Number })], _showCloseButton_dec = [n5({ type: Boolean })], _showHelpButton_dec = [n5({ type: Boolean })], _onHelp_dec = [n5({ attribute: false })], _mobileFullscreen_dec = [n5({ type: Boolean })], _contentPadding_dec = [n5({ type: Number })], _modalZIndex_dec = [r5()], _a15) {
   constructor() {
     super();
-    __privateAdd(this, _heading, __runInitializers(_init12, 8, this, "")), __runInitializers(_init12, 11, this);
-    __privateAdd(this, _content, __runInitializers(_init12, 12, this)), __runInitializers(_init12, 15, this);
-    __privateAdd(this, _menuOptions, __runInitializers(_init12, 16, this, [])), __runInitializers(_init12, 19, this);
-    __privateAdd(this, _width, __runInitializers(_init12, 20, this, "medium")), __runInitializers(_init12, 23, this);
-    __privateAdd(this, _maxWidth, __runInitializers(_init12, 24, this)), __runInitializers(_init12, 27, this);
-    __privateAdd(this, _minWidth, __runInitializers(_init12, 28, this)), __runInitializers(_init12, 31, this);
-    __privateAdd(this, _showCloseButton, __runInitializers(_init12, 32, this, true)), __runInitializers(_init12, 35, this);
-    __privateAdd(this, _showHelpButton, __runInitializers(_init12, 36, this, false)), __runInitializers(_init12, 39, this);
-    __privateAdd(this, _onHelp, __runInitializers(_init12, 40, this)), __runInitializers(_init12, 43, this);
-    __privateAdd(this, _mobileFullscreen, __runInitializers(_init12, 44, this, false)), __runInitializers(_init12, 47, this);
-    __privateAdd(this, _contentPadding, __runInitializers(_init12, 48, this, 16)), __runInitializers(_init12, 51, this);
-    __privateAdd(this, _modalZIndex, __runInitializers(_init12, 52, this, 1e3)), __runInitializers(_init12, 55, this);
+    __privateAdd(this, _heading2, __runInitializers(_init13, 8, this, "")), __runInitializers(_init13, 11, this);
+    __privateAdd(this, _content, __runInitializers(_init13, 12, this)), __runInitializers(_init13, 15, this);
+    __privateAdd(this, _menuOptions, __runInitializers(_init13, 16, this, [])), __runInitializers(_init13, 19, this);
+    __privateAdd(this, _width, __runInitializers(_init13, 20, this, "medium")), __runInitializers(_init13, 23, this);
+    __privateAdd(this, _maxWidth, __runInitializers(_init13, 24, this)), __runInitializers(_init13, 27, this);
+    __privateAdd(this, _minWidth, __runInitializers(_init13, 28, this)), __runInitializers(_init13, 31, this);
+    __privateAdd(this, _showCloseButton, __runInitializers(_init13, 32, this, true)), __runInitializers(_init13, 35, this);
+    __privateAdd(this, _showHelpButton, __runInitializers(_init13, 36, this, false)), __runInitializers(_init13, 39, this);
+    __privateAdd(this, _onHelp, __runInitializers(_init13, 40, this)), __runInitializers(_init13, 43, this);
+    __privateAdd(this, _mobileFullscreen, __runInitializers(_init13, 44, this, false)), __runInitializers(_init13, 47, this);
+    __privateAdd(this, _contentPadding, __runInitializers(_init13, 48, this, 16)), __runInitializers(_init13, 51, this);
+    __privateAdd(this, _modalZIndex, __runInitializers(_init13, 52, this, 1e3)), __runInitializers(_init13, 55, this);
     __publicField(this, "windowLayer");
   }
   static async createAndShow(optionsArg) {
@@ -117474,13 +117651,13 @@ var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n
     const mobileFullscreenClass = this.mobileFullscreen ? "mobile-fullscreen" : "";
     return b2`
       <style>
-        ${customWidth ? `.modal { width: ${customWidth}; }` : ""}
-        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ""}
-        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ""}
+        ${customWidth ? `dees-tile { width: ${customWidth}; }` : ""}
+        ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ""}
+        ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ""}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass} ${mobileFullscreenClass}">
-          <div class="heading">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+          <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">
               ${this.showHelpButton ? b2`
@@ -117497,7 +117674,7 @@ var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n
           </div>
           <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
           ${this.menuOptions.length > 0 ? b2`
-            <div class="bottomButtons">
+            <div slot="footer" class="bottomButtons">
               ${this.menuOptions.map(
       (actionArg, index2) => b2`
                   <div class="bottomButton ${index2 === this.menuOptions.length - 1 ? "primary" : ""} ${actionArg.name === "OK" ? "ok" : ""}" @click=${() => {
@@ -117507,7 +117684,7 @@ var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n
     )}
             </div>
           ` : ""}
-        </div>
+        </dees-tile>
       </div>
     `;
   }
@@ -117515,8 +117692,8 @@ var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n
     super.firstUpdated(_changedProperties);
     const domtools20 = await this.domtoolsPromise;
     await domtools20.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot.querySelector(".modal");
-    modal.classList.add("show");
+    const tile = this.shadowRoot.querySelector("dees-tile");
+    tile.classList.add("show");
   }
   async handleOutsideClick(eventArg) {
     eventArg.stopPropagation();
@@ -117527,8 +117704,8 @@ var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n
   }
   async destroy() {
     const domtools20 = await this.domtoolsPromise;
-    const modal = this.shadowRoot.querySelector(".modal");
-    modal.classList.add("predestroy");
+    const tile = this.shadowRoot.querySelector("dees-tile");
+    tile.classList.add("predestroy");
     await domtools20.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();
@@ -117540,8 +117717,8 @@ var _DeesModal = class _DeesModal extends (_a14 = DeesElement, _heading_dec = [n
     }
   }
 };
-_init12 = __decoratorStart(_a14);
-_heading = new WeakMap();
+_init13 = __decoratorStart(_a15);
+_heading2 = new WeakMap();
 _content = new WeakMap();
 _menuOptions = new WeakMap();
 _width = new WeakMap();
@@ -117553,19 +117730,19 @@ _onHelp = new WeakMap();
 _mobileFullscreen = new WeakMap();
 _contentPadding = new WeakMap();
 _modalZIndex = new WeakMap();
-__decorateElement(_init12, 4, "heading", _heading_dec, _DeesModal, _heading);
-__decorateElement(_init12, 4, "content", _content_dec, _DeesModal, _content);
-__decorateElement(_init12, 4, "menuOptions", _menuOptions_dec, _DeesModal, _menuOptions);
-__decorateElement(_init12, 4, "width", _width_dec, _DeesModal, _width);
-__decorateElement(_init12, 4, "maxWidth", _maxWidth_dec, _DeesModal, _maxWidth);
-__decorateElement(_init12, 4, "minWidth", _minWidth_dec, _DeesModal, _minWidth);
-__decorateElement(_init12, 4, "showCloseButton", _showCloseButton_dec, _DeesModal, _showCloseButton);
-__decorateElement(_init12, 4, "showHelpButton", _showHelpButton_dec, _DeesModal, _showHelpButton);
-__decorateElement(_init12, 4, "onHelp", _onHelp_dec, _DeesModal, _onHelp);
-__decorateElement(_init12, 4, "mobileFullscreen", _mobileFullscreen_dec, _DeesModal, _mobileFullscreen);
-__decorateElement(_init12, 4, "contentPadding", _contentPadding_dec, _DeesModal, _contentPadding);
-__decorateElement(_init12, 4, "modalZIndex", _modalZIndex_dec, _DeesModal, _modalZIndex);
-_DeesModal = __decorateElement(_init12, 0, "DeesModal", _DeesModal_decorators, _DeesModal);
+__decorateElement(_init13, 4, "heading", _heading_dec2, _DeesModal, _heading2);
+__decorateElement(_init13, 4, "content", _content_dec, _DeesModal, _content);
+__decorateElement(_init13, 4, "menuOptions", _menuOptions_dec, _DeesModal, _menuOptions);
+__decorateElement(_init13, 4, "width", _width_dec, _DeesModal, _width);
+__decorateElement(_init13, 4, "maxWidth", _maxWidth_dec, _DeesModal, _maxWidth);
+__decorateElement(_init13, 4, "minWidth", _minWidth_dec, _DeesModal, _minWidth);
+__decorateElement(_init13, 4, "showCloseButton", _showCloseButton_dec, _DeesModal, _showCloseButton);
+__decorateElement(_init13, 4, "showHelpButton", _showHelpButton_dec, _DeesModal, _showHelpButton);
+__decorateElement(_init13, 4, "onHelp", _onHelp_dec, _DeesModal, _onHelp);
+__decorateElement(_init13, 4, "mobileFullscreen", _mobileFullscreen_dec, _DeesModal, _mobileFullscreen);
+__decorateElement(_init13, 4, "contentPadding", _contentPadding_dec, _DeesModal, _contentPadding);
+__decorateElement(_init13, 4, "modalZIndex", _modalZIndex_dec, _DeesModal, _modalZIndex);
+_DeesModal = __decorateElement(_init13, 0, "DeesModal", _DeesModal_decorators, _DeesModal);
 __name(_DeesModal, "DeesModal");
 // STATIC
 __publicField(_DeesModal, "demo", demoFunc9);
@@ -117577,8 +117754,7 @@ __publicField(_DeesModal, "styles", [
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme("#333", "#fff")};
-        will-change: transform;
+        color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
       }
       .modalContainer {
         display: flex;
@@ -117591,106 +117767,112 @@ __publicField(_DeesModal, "styles", [
         align-items: center;
         justify-content: center;
       }
-      .modal {
-        will-change: transform;
-        transform: translateY(0px) scale(0.95);
+      dees-tile {
+        will-change: transform, opacity;
+        transform: translateY(8px) scale(0.98);
         opacity: 0;
         min-height: 120px;
-        max-height: calc(100vh - 40px);
-        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
-        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme("#e5e7eb", "#27272a")};
-        transition: all 0.2s ease;
-        overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-        margin: 20px;
-        display: flex;
-        flex-direction: column;
+        max-height: calc(100vh - 80px);
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+        margin: 40px;
         overscroll-behavior: contain;
       }
 
+      dees-tile::part(outer) {
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme("hsl(0 0% 0% / 0.03)", "hsl(0 0% 100% / 0.03)")},
+          0 8px 40px ${cssManager.bdTheme("hsl(0 0% 0% / 0.12)", "hsl(0 0% 0% / 0.5)")},
+          0 2px 8px ${cssManager.bdTheme("hsl(0 0% 0% / 0.06)", "hsl(0 0% 0% / 0.25)")};
+      }
+
       /* Width variations */
-      .modal.width-small {
+      dees-tile.width-small {
         width: 380px;
       }
 
-      .modal.width-medium {
+      dees-tile.width-medium {
         width: 560px;
       }
 
-      .modal.width-large {
+      dees-tile.width-large {
         width: 800px;
       }
 
-      .modal.width-fullscreen {
+      dees-tile.width-fullscreen {
         width: calc(100vw - 40px);
         height: calc(100vh - 40px);
         max-height: calc(100vh - 40px);
       }
 
       @media (max-width: 768px) {
-        .modal {
+        dees-tile {
           width: calc(100vw - 40px) !important;
           max-width: none !important;
         }
-        
-        /* Allow full height on mobile when content needs it */
+
         .modalContainer {
           padding: 10px;
         }
-        
-        .modal {
+
+        dees-tile {
           margin: 10px;
           max-height: calc(100vh - 20px);
         }
-        
-        /* Full screen mode on mobile */
-        .modal.mobile-fullscreen {
+
+        dees-tile.mobile-fullscreen {
           width: 100vw !important;
           height: 100vh !important;
           max-height: 100vh !important;
           margin: 0;
+        }
+
+        dees-tile.mobile-fullscreen::part(outer) {
           border-radius: 0;
           border: none;
         }
       }
 
-      .modal.show {
+      dees-tile.show {
         opacity: 1;
-        transform: translateY(0px) scale(1);
+        transform: translateY(0) scale(1);
       }
 
-      .modal.show.predestroy {
+      dees-tile.show.predestroy {
         opacity: 0;
-        transform: translateY(10px) scale(1);
+        transform: translateY(6px) scale(0.98);
+        transition: transform 0.15s ease-in, opacity 0.15s ease-in;
       }
 
-      .modal .heading {
-        height: 40px;
-        min-height: 40px;
-        font-family: ${cssGeistFontFamily};
+      .heading {
+        height: 36px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme("#e5e7eb", "#27272a")};
+        padding: 0 8px 0 16px;
         position: relative;
-        flex-shrink: 0;
       }
 
-      .modal .heading .header-buttons {
+      .heading .heading-text {
+        flex: 1;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme("hsl(0 0% 20%)", "hsl(0 0% 63.9%)")};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .heading .header-buttons {
         display: flex;
         align-items: center;
-        gap: 4px;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
+        gap: 2px;
+        flex-shrink: 0;
+        margin-left: 8px;
       }
 
-      .modal .heading .header-button {
-        width: 28px;
-        height: 28px;
+      .heading .header-button {
+        width: 24px;
+        height: 24px;
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -117698,98 +117880,94 @@ __publicField(_DeesModal, "styles", [
         cursor: pointer;
         transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+        color: ${cssManager.bdTheme("hsl(0 0% 55%)", "hsl(0 0% 45%)")};
       }
 
-      .modal .heading .header-button:hover {
-        background: ${cssManager.bdTheme("#f4f4f5", "#27272a")};
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+      .heading .header-button:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 12%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 20%)", "hsl(0 0% 90%)")};
       }
 
-      .modal .heading .header-button:active {
-        background: ${cssManager.bdTheme("#e5e7eb", "#3f3f46")};
+      .heading .header-button:active {
+        background: ${cssManager.bdTheme("hsl(0 0% 90%)", "hsl(0 0% 15%)")};
       }
 
-      .modal .heading .header-button dees-icon {
-        width: 16px;
-        height: 16px;
+      .heading .header-button dees-icon {
+        width: 14px;
+        height: 14px;
         display: block;
       }
 
-      .modal .heading .heading-text {
-        flex: 1;
-        text-align: center;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 40px;
-        padding: 0 40px;
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
-      }
-
-      .modal .content {
-        flex: 1;
+      .content {
         overflow-y: auto;
         overflow-x: hidden;
         overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme("hsl(0 0% 85%)", "hsl(0 0% 20%)")} transparent;
       }
-      .modal .bottomButtons {
+      .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme("#e5e7eb", "#27272a")};
         justify-content: flex-end;
-        gap: 8px;
-        padding: 8px;
-        flex-shrink: 0;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .modal .bottomButtons .bottomButton {
-        padding: 8px 16px;
-        border-radius: 4px;
-        line-height: 16px;
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
         text-align: center;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 500;
         cursor: pointer;
         user-select: none;
         transition: all 0.15s ease;
-        background: ${cssManager.bdTheme("#ffffff", "#27272a")};
-        border: 1px solid ${cssManager.bdTheme("#e5e7eb", "#3f3f46")};
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        background: transparent;
+        border: none;
+        border-left: 1px solid ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 11%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 45%)", "hsl(0 0% 55%)")};
         white-space: nowrap;
+        display: flex;
+        align-items: center;
       }
 
-      .modal .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme("#f4f4f5", "#3f3f46")};
-        border-color: ${cssManager.bdTheme("#d1d5db", "#52525b")};
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
       }
-      .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme("#e5e7eb", "#52525b")};
+
+      .bottomButtons .bottomButton:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 10%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
       }
-      .modal .bottomButtons .bottomButton:last-child {
-        border-right: none;
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme("hsl(0 0% 92%)", "hsl(0 0% 13%)")};
       }
 
-      .modal .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme("#3b82f6", "#3b82f6")};
-        border-color: ${cssManager.bdTheme("#3b82f6", "#3b82f6")};
-        color: #ffffff;
+      .bottomButtons .bottomButton.primary {
+        color: ${cssManager.bdTheme("hsl(217.2 91.2% 59.8%)", "hsl(213.1 93.9% 67.8%)")};
+        font-weight: 600;
       }
-      .modal .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme("#2563eb", "#2563eb")};
-        border-color: ${cssManager.bdTheme("#2563eb", "#2563eb")};
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme("hsl(217.2 91.2% 59.8% / 0.08)", "hsl(213.1 93.9% 67.8% / 0.08)")};
+        color: ${cssManager.bdTheme("hsl(217.2 91.2% 50%)", "hsl(213.1 93.9% 75%)")};
       }
-      .modal .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme("#1d4ed8", "#1d4ed8")};
-        border-color: ${cssManager.bdTheme("#1d4ed8", "#1d4ed8")};
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme("hsl(217.2 91.2% 59.8% / 0.12)", "hsl(213.1 93.9% 67.8% / 0.12)")};
       }
     `
 ]);
-__runInitializers(_init12, 1, _DeesModal);
+__runInitializers(_init13, 1, _DeesModal);
 var DeesModal = _DeesModal;
 
 // ts_web/elements/00group-layout/dees-label/dees-label.demo.ts
 init_dist_ts30();
-var demoFunc10 = /* @__PURE__ */ __name(() => {
+var demoFunc11 = /* @__PURE__ */ __name(() => {
   return b2`
     <dees-label .label=${"a label"}></dees-label>
   `;
@@ -117798,9 +117976,9 @@ var demoFunc10 = /* @__PURE__ */ __name(() => {
 // ts_web/elements/00group-layout/dees-label/dees-label.ts
 init_dist_ts30();
 init_theme();
-var _required_dec2, _description_dec2, _label_dec2, _a15, _DeesLabel_decorators, _init13, _label2, _description2, _required2;
+var _required_dec2, _description_dec2, _label_dec2, _a16, _DeesLabel_decorators, _init14, _label2, _description2, _required2;
 _DeesLabel_decorators = [customElement("dees-label")];
-var _DeesLabel = class _DeesLabel extends (_a15 = DeesElement, _label_dec2 = [n5({
+var _DeesLabel = class _DeesLabel extends (_a16 = DeesElement, _label_dec2 = [n5({
   type: String,
   reflect: true
 })], _description_dec2 = [n5({
@@ -117809,12 +117987,12 @@ var _DeesLabel = class _DeesLabel extends (_a15 = DeesElement, _label_dec2 = [n5
 })], _required_dec2 = [n5({
   type: Boolean,
   reflect: true
-})], _a15) {
+})], _a16) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _label2, __runInitializers(_init13, 8, this, "")), __runInitializers(_init13, 11, this);
-    __privateAdd(this, _description2, __runInitializers(_init13, 12, this)), __runInitializers(_init13, 15, this);
-    __privateAdd(this, _required2, __runInitializers(_init13, 16, this, false)), __runInitializers(_init13, 19, this);
+    __privateAdd(this, _label2, __runInitializers(_init14, 8, this, "")), __runInitializers(_init14, 11, this);
+    __privateAdd(this, _description2, __runInitializers(_init14, 12, this)), __runInitializers(_init14, 15, this);
+    __privateAdd(this, _required2, __runInitializers(_init14, 16, this, false)), __runInitializers(_init14, 19, this);
   }
   render() {
     return b2`
@@ -117831,16 +118009,16 @@ var _DeesLabel = class _DeesLabel extends (_a15 = DeesElement, _label_dec2 = [n5
     `;
   }
 };
-_init13 = __decoratorStart(_a15);
+_init14 = __decoratorStart(_a16);
 _label2 = new WeakMap();
 _description2 = new WeakMap();
 _required2 = new WeakMap();
-__decorateElement(_init13, 4, "label", _label_dec2, _DeesLabel, _label2);
-__decorateElement(_init13, 4, "description", _description_dec2, _DeesLabel, _description2);
-__decorateElement(_init13, 4, "required", _required_dec2, _DeesLabel, _required2);
-_DeesLabel = __decorateElement(_init13, 0, "DeesLabel", _DeesLabel_decorators, _DeesLabel);
+__decorateElement(_init14, 4, "label", _label_dec2, _DeesLabel, _label2);
+__decorateElement(_init14, 4, "description", _description_dec2, _DeesLabel, _description2);
+__decorateElement(_init14, 4, "required", _required_dec2, _DeesLabel, _required2);
+_DeesLabel = __decorateElement(_init14, 0, "DeesLabel", _DeesLabel_decorators, _DeesLabel);
 __name(_DeesLabel, "DeesLabel");
-__publicField(_DeesLabel, "demo", demoFunc10);
+__publicField(_DeesLabel, "demo", demoFunc11);
 __publicField(_DeesLabel, "demoGroups", ["Layout", "Input"]);
 __publicField(_DeesLabel, "styles", [
   themeDefaultStyles,
@@ -117878,186 +118056,9 @@ __publicField(_DeesLabel, "styles", [
       }
     `
 ]);
-__runInitializers(_init13, 1, _DeesLabel);
+__runInitializers(_init14, 1, _DeesLabel);
 var DeesLabel = _DeesLabel;
 
-// ts_web/elements/00group-layout/dees-tile/dees-tile.demo.ts
-init_dist_ts30();
-var demoFunc11 = /* @__PURE__ */ __name(() => {
-  return b2`
-    <dees-demowrapper>
-      <style>
-        ${i`
-          .demoBox {
-            background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 9%)")};
-            padding: 40px;
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-          }
-          .tile-demo-content {
-            position: absolute;
-            inset: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: ${cssManager.bdTheme("hsl(0 0% 45%)", "hsl(0 0% 55%)")};
-            font-size: 13px;
-          }
-          .footer-stats {
-            display: flex;
-            align-items: center;
-            gap: 24px;
-            font-size: 11px;
-            width: 100%;
-          }
-          .footer-stats .stat {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-          }
-          .footer-stats .stat strong {
-            color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
-          }
-        `}
-      </style>
-      <div class="demoBox">
-        <dees-tile heading="Simple Tile" style="height: 200px;">
-          <div class="tile-demo-content">Content area with rounded corners</div>
-        </dees-tile>
-
-        <dees-tile heading="Tile with Footer" style="height: 200px;">
-          <div class="tile-demo-content">Content goes here</div>
-          <div slot="footer" class="footer-stats">
-            <span class="stat">latest <strong>42</strong></span>
-            <span class="stat">min <strong>12</strong></span>
-            <span class="stat">max <strong>87</strong></span>
-            <span class="stat">avg <strong>45.3</strong></span>
-          </div>
-        </dees-tile>
-
-        <dees-tile style="height: 200px;">
-          <div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
-            <span style="font-weight:500;">Custom Header</span>
-            <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
-          </div>
-          <div class="tile-demo-content">Custom header slot with search input</div>
-        </dees-tile>
-      </div>
-    </dees-demowrapper>
-  `;
-}, "demoFunc");
-
-// ts_web/elements/00group-layout/dees-tile/dees-tile.ts
-init_dist_ts30();
-init_theme();
-var _hasFooter_dec, _heading_dec2, _a16, _DeesTile_decorators, _init14, _heading2, _hasFooter;
-_DeesTile_decorators = [customElement("dees-tile")];
-var _DeesTile = class _DeesTile extends (_a16 = DeesElement, _heading_dec2 = [n5({ type: String })], _hasFooter_dec = [r5()], _a16) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _heading2, __runInitializers(_init14, 8, this, "")), __runInitializers(_init14, 11, this);
-    __privateAdd(this, _hasFooter, __runInitializers(_init14, 12, this, false)), __runInitializers(_init14, 15, this);
-  }
-  render() {
-    return b2`
-      <div class="tile-outer" part="outer">
-        <div class="tile-header" part="header">
-          <slot name="header">
-            <div class="tile-heading">${this.heading}</div>
-          </slot>
-        </div>
-        <div class="tile-content ${!this.hasFooter ? "no-footer" : ""}" part="content">
-          <slot></slot>
-        </div>
-        <div class="tile-footer ${!this.hasFooter ? "hidden" : ""}" part="footer">
-          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
-        </div>
-      </div>
-    `;
-  }
-  onFooterSlotChange(e11) {
-    const slot = e11.target;
-    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
-  }
-};
-_init14 = __decoratorStart(_a16);
-_heading2 = new WeakMap();
-_hasFooter = new WeakMap();
-__decorateElement(_init14, 4, "heading", _heading_dec2, _DeesTile, _heading2);
-__decorateElement(_init14, 4, "hasFooter", _hasFooter_dec, _DeesTile, _hasFooter);
-_DeesTile = __decorateElement(_init14, 0, "DeesTile", _DeesTile_decorators, _DeesTile);
-__name(_DeesTile, "DeesTile");
-__publicField(_DeesTile, "demo", demoFunc11);
-__publicField(_DeesTile, "demoGroups", ["Layout"]);
-__publicField(_DeesTile, "styles", [
-  themeDefaultStyles,
-  cssManager.defaultStyles,
-  i`
-      :host {
-        display: flex;
-        flex-direction: column;
-        font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme("hsl(0 0% 3.9%)", "hsl(0 0% 98%)")};
-      }
-
-      /* --- The frame --- */
-      .tile-outer {
-        position: relative;
-        flex: 1;
-        min-height: 0;
-        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 3.9%)")};
-        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
-        border-radius: 8px;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      /* --- Header: bare container, only the default heading gets styled --- */
-      .tile-header {
-        flex-shrink: 0;
-      }
-
-      .tile-heading {
-        height: 32px;
-        line-height: 32px;
-        padding: 0 16px;
-        font-size: 14px;
-        font-weight: 500;
-        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme("hsl(0 0% 20%)", "hsl(0 0% 63.9%)")};
-      }
-
-      /* --- Content: the rounded inset --- */
-      .tile-content {
-        flex: 1;
-        position: relative;
-        border-radius: 8px;
-        border-top: 1px solid ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 11%)")};
-        border-bottom: 1px solid ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 11%)")};
-        overflow: hidden;
-      }
-
-      .tile-content.no-footer {
-        border-bottom: none;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      /* --- Footer: bare container, consumer styles the slotted content --- */
-      .tile-footer {
-        flex-shrink: 0;
-      }
-
-      .tile-footer.hidden {
-        display: none;
-      }
-    `
-]);
-__runInitializers(_init14, 1, _DeesTile);
-var DeesTile = _DeesTile;
-
 // ts_web/elements/00group-workspace/dees-workspace-monaco/version.ts
 var MONACO_VERSION = "0.55.1";
 
@@ -150821,9 +150822,40 @@ var chartAreaStyles = [
       dees-tile {
         height: 100%;
       }
+      .chartHeader {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 8px 0 16px;
+      }
+      .chartLabel {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme("hsl(0 0% 20%)", "hsl(0 0% 63.9%)")};
+      }
+      .expandBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        cursor: pointer;
+        color: ${cssManager.bdTheme("hsl(0 0% 55%)", "hsl(0 0% 45%)")};
+        transition: all 0.15s ease;
+        padding: 0;
+      }
+      .expandBtn:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 93%)", "hsl(0 0% 12%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 20%)", "hsl(0 0% 90%)")};
+      }
       .chartContainer {
         position: absolute;
-        inset: 0;
+        inset: 0 0 4px 0;
       }
       .statsBar {
         height: 32px;
@@ -150879,9 +150911,16 @@ var chartAreaStyles = [
 
 // ts_web/elements/00group-chart/dees-chart-area/template.ts
 init_dist_ts30();
+init_dees_icon();
 var renderChartArea = /* @__PURE__ */ __name((component) => {
   return b2`
-        <dees-tile .heading=${component.label}>
+        <dees-tile>
+          <div slot="header" class="chartHeader">
+            <span class="chartLabel">${component.label}</span>
+            <button class="expandBtn" @click=${() => component.toggleFullPage()} title="${component.isFullPage ? "Exit full page" : "Full page"}">
+              <dees-icon .icon=${component.isFullPage ? "lucide:Minimize2" : "lucide:Maximize2"} .iconSize=${14}></dees-icon>
+            </button>
+          </div>
           <div class="chartContainer"></div>
           ${component.seriesStats.length > 0 ? b2`
             <div slot="footer" class="statsBar">
@@ -150905,21 +150944,22 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
 init_dist_ts30();
 init_dist_ts29();
 init_services();
-var _autoScrollInterval_dec, _yAxisMax_dec, _yAxisScaling_dec, _realtimeMode_dec, _rollingWindow_dec, _yAxisFormatter_dec, _series_dec, _label_dec5, _seriesStats_dec, _chart_dec, _a54, _DeesChartArea_decorators, _init55, _chart, _seriesStats, _label5, _series, _yAxisFormatter, _rollingWindow, _realtimeMode, _yAxisScaling, _yAxisMax, _autoScrollInterval;
+var _autoScrollInterval_dec, _yAxisMax_dec, _yAxisScaling_dec, _realtimeMode_dec, _rollingWindow_dec, _yAxisFormatter_dec, _series_dec, _label_dec5, _isFullPage_dec, _seriesStats_dec, _chart_dec, _a54, _DeesChartArea_decorators, _init55, _chart, _seriesStats, _isFullPage, _label5, _series, _yAxisFormatter, _rollingWindow, _realtimeMode, _yAxisScaling, _yAxisMax, _autoScrollInterval;
 _DeesChartArea_decorators = [customElement("dees-chart-area")];
-var _DeesChartArea = class _DeesChartArea extends (_a54 = DeesElement, _chart_dec = [r5()], _seriesStats_dec = [r5()], _label_dec5 = [n5()], _series_dec = [n5({ type: Array })], _yAxisFormatter_dec = [n5({ attribute: false })], _rollingWindow_dec = [n5({ type: Number })], _realtimeMode_dec = [n5({ type: Boolean })], _yAxisScaling_dec = [n5({ type: String })], _yAxisMax_dec = [n5({ type: Number })], _autoScrollInterval_dec = [n5({ type: Number })], _a54) {
+var _DeesChartArea = class _DeesChartArea extends (_a54 = DeesElement, _chart_dec = [r5()], _seriesStats_dec = [r5()], _isFullPage_dec = [r5()], _label_dec5 = [n5()], _series_dec = [n5({ type: Array })], _yAxisFormatter_dec = [n5({ attribute: false })], _rollingWindow_dec = [n5({ type: Number })], _realtimeMode_dec = [n5({ type: Boolean })], _yAxisScaling_dec = [n5({ type: String })], _yAxisMax_dec = [n5({ type: Number })], _autoScrollInterval_dec = [n5({ type: Number })], _a54) {
   constructor() {
     super();
     __privateAdd(this, _chart, __runInitializers(_init55, 8, this, null)), __runInitializers(_init55, 11, this);
     __privateAdd(this, _seriesStats, __runInitializers(_init55, 12, this, [])), __runInitializers(_init55, 15, this);
-    __privateAdd(this, _label5, __runInitializers(_init55, 16, this, "Untitled Chart")), __runInitializers(_init55, 19, this);
-    __privateAdd(this, _series, __runInitializers(_init55, 20, this, [])), __runInitializers(_init55, 23, this);
-    __privateAdd(this, _yAxisFormatter, __runInitializers(_init55, 24, this, /* @__PURE__ */ __name((val) => `${val} Mbps`, "yAxisFormatter"))), __runInitializers(_init55, 27, this);
-    __privateAdd(this, _rollingWindow, __runInitializers(_init55, 28, this, 0)), __runInitializers(_init55, 31, this);
-    __privateAdd(this, _realtimeMode, __runInitializers(_init55, 32, this, false)), __runInitializers(_init55, 35, this);
-    __privateAdd(this, _yAxisScaling, __runInitializers(_init55, 36, this, "dynamic")), __runInitializers(_init55, 39, this);
-    __privateAdd(this, _yAxisMax, __runInitializers(_init55, 40, this, 100)), __runInitializers(_init55, 43, this);
-    __privateAdd(this, _autoScrollInterval, __runInitializers(_init55, 44, this, 1e3)), __runInitializers(_init55, 47, this);
+    __privateAdd(this, _isFullPage, __runInitializers(_init55, 16, this, false)), __runInitializers(_init55, 19, this);
+    __privateAdd(this, _label5, __runInitializers(_init55, 20, this, "Untitled Chart")), __runInitializers(_init55, 23, this);
+    __privateAdd(this, _series, __runInitializers(_init55, 24, this, [])), __runInitializers(_init55, 27, this);
+    __privateAdd(this, _yAxisFormatter, __runInitializers(_init55, 28, this, /* @__PURE__ */ __name((val) => `${val} Mbps`, "yAxisFormatter"))), __runInitializers(_init55, 31, this);
+    __privateAdd(this, _rollingWindow, __runInitializers(_init55, 32, this, 0)), __runInitializers(_init55, 35, this);
+    __privateAdd(this, _realtimeMode, __runInitializers(_init55, 36, this, false)), __runInitializers(_init55, 39, this);
+    __privateAdd(this, _yAxisScaling, __runInitializers(_init55, 40, this, "dynamic")), __runInitializers(_init55, 43, this);
+    __privateAdd(this, _yAxisMax, __runInitializers(_init55, 44, this, 100)), __runInitializers(_init55, 47, this);
+    __privateAdd(this, _autoScrollInterval, __runInitializers(_init55, 48, this, 1e3)), __runInitializers(_init55, 51, this);
     __publicField(this, "internalChartData", []);
     __publicField(this, "autoScrollTimer", null);
     __publicField(this, "lcBundle", null);
@@ -151368,6 +151408,27 @@ var _DeesChartArea = class _DeesChartArea extends (_a54 = DeesElement, _chart_de
   async forceResize() {
     await this.resizeChart();
   }
+  toggleFullPage() {
+    this.isFullPage = !this.isFullPage;
+    if (this.isFullPage) {
+      this.style.position = "fixed";
+      this.style.inset = "0";
+      this.style.zIndex = "10000";
+      this.style.height = "100vh";
+      this.style.padding = "0";
+      document.body.style.overflow = "hidden";
+    } else {
+      this.style.position = "";
+      this.style.inset = "";
+      this.style.zIndex = "";
+      this.style.height = "";
+      this.style.padding = "";
+      document.body.style.overflow = "";
+    }
+    requestAnimationFrame(() => {
+      this.chart?.timeScale().fitContent();
+    });
+  }
   startAutoScroll() {
     if (this.autoScrollTimer) return;
     this.autoScrollTimer = window.setInterval(() => {
@@ -151384,6 +151445,7 @@ var _DeesChartArea = class _DeesChartArea extends (_a54 = DeesElement, _chart_de
 _init55 = __decoratorStart(_a54);
 _chart = new WeakMap();
 _seriesStats = new WeakMap();
+_isFullPage = new WeakMap();
 _label5 = new WeakMap();
 _series = new WeakMap();
 _yAxisFormatter = new WeakMap();
@@ -151394,6 +151456,7 @@ _yAxisMax = new WeakMap();
 _autoScrollInterval = new WeakMap();
 __decorateElement(_init55, 4, "chart", _chart_dec, _DeesChartArea, _chart);
 __decorateElement(_init55, 4, "seriesStats", _seriesStats_dec, _DeesChartArea, _seriesStats);
+__decorateElement(_init55, 4, "isFullPage", _isFullPage_dec, _DeesChartArea, _isFullPage);
 __decorateElement(_init55, 4, "label", _label_dec5, _DeesChartArea, _label5);
 __decorateElement(_init55, 4, "series", _series_dec, _DeesChartArea, _series);
 __decorateElement(_init55, 4, "yAxisFormatter", _yAxisFormatter_dec, _DeesChartArea, _yAxisFormatter);
@@ -174810,7 +174873,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.51.2",
+  version: "3.52.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -176777,4 +176840,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775219892638.js.map
+//# sourceMappingURL=bundle-1775222219241.js.map