@design.estate/dees-catalog 3.35.1 → 3.37.0

package/dist_watch/bundle.js

@@ -53587,26 +53587,26 @@ var init_fontawesome_svg_core = __esm({
       }
     };
     parse7 = {
-      icon: function icon(_icon2) {
-        if (_icon2 === null) {
+      icon: function icon(_icon3) {
+        if (_icon3 === null) {
           return null;
         }
-        if (_typeof(_icon2) === "object" && _icon2.prefix && _icon2.iconName) {
+        if (_typeof(_icon3) === "object" && _icon3.prefix && _icon3.iconName) {
           return {
-            prefix: _icon2.prefix,
-            iconName: byAlias(_icon2.prefix, _icon2.iconName) || _icon2.iconName
+            prefix: _icon3.prefix,
+            iconName: byAlias(_icon3.prefix, _icon3.iconName) || _icon3.iconName
           };
         }
-        if (Array.isArray(_icon2) && _icon2.length === 2) {
-          var iconName = _icon2[1].indexOf("fa-") === 0 ? _icon2[1].slice(3) : _icon2[1];
-          var prefix4 = getCanonicalPrefix(_icon2[0]);
+        if (Array.isArray(_icon3) && _icon3.length === 2) {
+          var iconName = _icon3[1].indexOf("fa-") === 0 ? _icon3[1].slice(3) : _icon3[1];
+          var prefix4 = getCanonicalPrefix(_icon3[0]);
           return {
             prefix: prefix4,
             iconName: byAlias(prefix4, iconName) || iconName
           };
         }
-        if (typeof _icon2 === "string" && (_icon2.indexOf("".concat(config2.cssPrefix, "-")) > -1 || _icon2.match(ICON_SELECTION_SYNTAX_PATTERN))) {
-          var canonicalIcon = getCanonicalIcon(_icon2.split(" "), {
+        if (typeof _icon3 === "string" && (_icon3.indexOf("".concat(config2.cssPrefix, "-")) > -1 || _icon3.match(ICON_SELECTION_SYNTAX_PATTERN))) {
+          var canonicalIcon = getCanonicalIcon(_icon3.split(" "), {
             skipLookups: true
           });
           return {
@@ -53614,11 +53614,11 @@ var init_fontawesome_svg_core = __esm({
             iconName: byAlias(canonicalIcon.prefix, canonicalIcon.iconName) || canonicalIcon.iconName
           };
         }
-        if (typeof _icon2 === "string") {
+        if (typeof _icon3 === "string") {
           var _prefix = getDefaultUsablePrefix();
           return {
             prefix: _prefix,
-            iconName: byAlias(_prefix, _icon2) || _icon2
+            iconName: byAlias(_prefix, _icon3) || _icon3
           };
         }
       }
@@ -101154,6 +101154,7 @@ var init_versions = __esm({
     CDN_VERSIONS = {
       xterm: "5.3.0",
       xtermAddonFit: "0.8.0",
+      xtermAddonSearch: "0.13.0",
       highlightJs: "11.11.1",
       apexcharts: "5.3.6",
       tiptap: "2.23.0",
@@ -101173,12 +101174,14 @@ var init_DeesServiceLibLoader = __esm({
       // Cached library references
       xtermLib = null;
       xtermFitAddonLib = null;
+      xtermSearchAddonLib = null;
       highlightJsLib = null;
       apexChartsLib = null;
       tiptapLib = null;
       // Loading promises to prevent duplicate concurrent loads
       xtermLoadingPromise = null;
       xtermFitAddonLoadingPromise = null;
+      xtermSearchAddonLoadingPromise = null;
       highlightJsLoadingPromise = null;
       apexChartsLoadingPromise = null;
       tiptapLoadingPromise = null;
@@ -101242,6 +101245,30 @@ var init_DeesServiceLibLoader = __esm({
         })();
         return this.xtermFitAddonLoadingPromise;
       }
+      /**
+       * Load xterm-addon-search from CDN
+       * @returns Promise resolving to SearchAddon class
+       */
+      async loadXtermSearchAddon() {
+        if (this.xtermSearchAddonLib) {
+          return this.xtermSearchAddonLib;
+        }
+        if (this.xtermSearchAddonLoadingPromise) {
+          return this.xtermSearchAddonLoadingPromise;
+        }
+        this.xtermSearchAddonLoadingPromise = (async () => {
+          const url = `${CDN_BASE}/xterm-addon-search@${CDN_VERSIONS.xtermAddonSearch}/+esm`;
+          const module = await import(
+            /* @vite-ignore */
+            url
+          );
+          this.xtermSearchAddonLib = {
+            SearchAddon: module.SearchAddon
+          };
+          return this.xtermSearchAddonLib;
+        })();
+        return this.xtermSearchAddonLoadingPromise;
+      }
       /**
        * Inject xterm CSS styles into the document head
        */
@@ -101368,6 +101395,7 @@ var init_DeesServiceLibLoader = __esm({
         await Promise.all([
           this.loadXterm(),
           this.loadXtermFitAddon(),
+          this.loadXtermSearchAddon(),
           this.loadHighlightJs(),
           this.loadApexCharts(),
           this.loadTiptap()
@@ -101382,6 +101410,8 @@ var init_DeesServiceLibLoader = __esm({
             return this.xtermLib !== null;
           case "xtermFitAddon":
             return this.xtermFitAddonLib !== null;
+          case "xtermSearchAddon":
+            return this.xtermSearchAddonLib !== null;
           case "highlightJs":
             return this.highlightJsLib !== null;
           case "apexCharts":
@@ -113546,7 +113576,49 @@ var generateCpuCores = (count2) => {
   }));
 };
 var demoFunc7 = () => {
-  return b2(_a11 || (_a11 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n    </div>\n    \n    <script>\n      // Cleanup live updates on page unload\n      window.addEventListener('beforeunload', () => {\n        if ((window as any).liveUpdateInterval) {\n          clearInterval((window as any).liveUpdateInterval);\n        }\n      });\n    <\/script>\n  </dees-demowrapper>\n  "])), i`
+  return b2(_a11 || (_a11 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", `
+        ></dees-statsgrid>
+
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Partition Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
+                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
+                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
+                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
+              </ul>
+              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
+            </div>
+          </div>
+          <div class="config-section">
+            <div class="config-title">Disk Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
+                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
+                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
+                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
+                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
+              </ul>
+              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
+            </div>
+          </div>
+        </div>
+      </dees-panel>
+    </div>
+
+    <script>
+      // Cleanup live updates on page unload
+      window.addEventListener('beforeunload', () => {
+        if ((window as any).liveUpdateInterval) {
+          clearInterval((window as any).liveUpdateInterval);
+        }
+      });
+    <\/script>
+  </dees-demowrapper>
+  `])), i`
         .demo-container {
           display: flex;
           flex-direction: column;
@@ -114042,7 +114114,108 @@ html\`
       }
     ]}
   ></dees-statsgrid>
-\`;`);
+\`;`, "7. Disk & Storage Tiles", "Partition and physical disk visualization tiles", [
+    {
+      id: "root-partition",
+      title: "Root Partition",
+      value: 0,
+      type: "partition",
+      icon: "lucide:folder-root",
+      partitionData: {
+        used: 698341425152,
+        // ~650 GB
+        total: 1073741824e3,
+        // ~1 TB
+        filesystem: "ext4",
+        mountPoint: "/"
+      }
+    },
+    {
+      id: "home-partition",
+      title: "Home Partition",
+      value: 0,
+      type: "partition",
+      icon: "lucide:home",
+      partitionData: {
+        used: 214748364800,
+        // ~200 GB
+        total: 536870912e3,
+        // ~500 GB
+        filesystem: "ext4",
+        mountPoint: "/home"
+      }
+    },
+    {
+      id: "data-partition",
+      title: "Data Partition",
+      value: 0,
+      type: "partition",
+      icon: "lucide:database",
+      partitionData: {
+        used: 1932735283200,
+        // ~1.8 TB (90% - critical)
+        total: 2147483648e3,
+        // ~2 TB
+        filesystem: "xfs",
+        mountPoint: "/data"
+      }
+    },
+    {
+      id: "nvme-ssd",
+      title: "Primary NVMe",
+      value: 0,
+      type: "disk",
+      icon: "lucide:hard-drive",
+      columnSpan: 2,
+      diskData: {
+        capacity: 2e12,
+        // 2 TB
+        model: "Samsung 990 Pro",
+        type: "nvme",
+        iops: {
+          read: 7450,
+          write: 6900
+        },
+        health: 98
+      }
+    },
+    {
+      id: "sata-ssd",
+      title: "Secondary SSD",
+      value: 0,
+      type: "disk",
+      icon: "lucide:hard-drive",
+      diskData: {
+        capacity: 1e12,
+        // 1 TB
+        model: "Crucial MX500",
+        type: "ssd",
+        iops: {
+          read: 560,
+          write: 510
+        },
+        health: 85
+      }
+    },
+    {
+      id: "hdd-storage",
+      title: "Backup HDD",
+      value: 0,
+      type: "disk",
+      icon: "lucide:archive",
+      diskData: {
+        capacity: 8e12,
+        // 8 TB
+        model: "Seagate IronWolf",
+        type: "hdd",
+        iops: {
+          read: 210,
+          write: 195
+        },
+        health: 42
+      }
+    }
+  ], 280, 16);
 };
 
 // ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
@@ -127613,54 +127786,94 @@ var demoFunc26 = () => b2`
       <dees-panel .title=${"3. Buttons with Icons"} .subtitle=${"Combining icons with text for enhanced visual communication"}>
         <div class="icon-row">
           <dees-button>
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
             Add Item
           </dees-button>
           <dees-button type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
             Delete
           </dees-button>
           <dees-button type="outline">
-            <dees-icon iconFA="faDownload"></dees-icon>
+            <dees-icon icon="lucide:Download"></dees-icon>
             Download
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button type="secondary" size="sm">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
             Settings
           </dees-button>
           <dees-button type="ghost">
-            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            <dees-icon icon="fa:caretLeft"></dees-icon>
             Back
           </dees-button>
           <dees-button type="ghost">
             Next
-            <dees-icon iconFA="faChevronRight"></dees-icon>
+            <dees-icon icon="fa:caretRight"></dees-icon>
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button size="icon" type="default">
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="secondary">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="outline">
-            <dees-icon iconFA="faSearch"></dees-icon>
+            <dees-icon icon="lucide:Search"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="ghost">
-            <dees-icon iconFA="faEllipsisV"></dees-icon>
+            <dees-icon icon="lucide:MoreVertical"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
           </dees-button>
         </div>
       </dees-panel>
     </dees-demowrapper>
-    
+
+    <dees-demowrapper .runAfterRender=${async (elementArg) => {
+  const buttons = elementArg.querySelectorAll("dees-button");
+  buttons.forEach((button) => {
+    button.addEventListener("clicked", () => {
+      const icon3 = button.getAttribute("icon") || "none";
+      const position3 = button.getAttribute("iconPosition") || "left";
+      console.log(`Icon property button: icon=${icon3}, position=${position3}`);
+    });
+  });
+}}>
+      <dees-panel .title=${"4. Icons via Property"} .subtitle=${"Simplified icon syntax using the icon property"}>
+        <div class="icon-row">
+          <dees-button icon="fa:plus">Add Item</dees-button>
+          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
+          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
+          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
+          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
+          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
+          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
+          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
+          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
+        </div>
+
+        <div style="margin-top: 16px;">
+          <div class="code-snippet">
+            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
+            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
     <dees-demowrapper .runAfterRender=${async (elementArg) => {
   const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
   const successButton = elementArg.querySelector('dees-button[status="success"]');
@@ -127681,7 +127894,7 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"4. Button States"} .subtitle=${"Different states to indicate button status and loading conditions"}>
+      <dees-panel .title=${"5. Button States"} .subtitle=${"Different states to indicate button status and loading conditions"}>
         <div class="button-group">
           <dees-button status="normal">Normal</dees-button>
           <dees-button status="pending">Processing...</dees-button>
@@ -127721,7 +127934,7 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"5. Event Handling"} .subtitle=${"Interactive examples with click event handling"}>
+      <dees-panel .title=${"6. Event Handling"} .subtitle=${"Interactive examples with click event handling"}>
         <div class="button-group">
           <dees-button>Click Me</dees-button>
           <dees-button type="secondary" .eventDetailData=${"custom-data-123"}>
@@ -127757,7 +127970,7 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"6. Form Integration"} .subtitle=${"Buttons working within forms with automatic spacing"}>
+      <dees-panel .title=${"7. Form Integration"} .subtitle=${"Buttons working within forms with automatic spacing"}>
         <dees-form>
           <dees-input-text label="Name" key="name" required></dees-input-text>
           <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
@@ -127783,7 +127996,7 @@ var demoFunc26 = () => b2`
     }
   });
 }}>
-      <dees-panel .title=${"7. Backward Compatibility"} .subtitle=${"Old button types are automatically mapped to new variants"}>
+      <dees-panel .title=${"8. Backward Compatibility"} .subtitle=${"Old button types are automatically mapped to new variants"}>
         <div class="button-group">
           <dees-button type="normal">Normal → Default</dees-button>
           <dees-button type="highlighted">Highlighted → Destructive</dees-button>
@@ -127821,36 +128034,36 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"8. Advanced Examples"} .subtitle=${"Complex button configurations and real-world use cases"}>
+      <dees-panel .title=${"9. Advanced Examples"} .subtitle=${"Complex button configurations and real-world use cases"}>
         <div class="horizontal-group">
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
             <dees-button type="default" size="sm">
-              <dees-icon iconFA="faSave"></dees-icon>
+              <dees-icon icon="lucide:Save"></dees-icon>
               Save Changes
             </dees-button>
             <dees-button type="secondary" size="sm">
-              <dees-icon iconFA="faUndo"></dees-icon>
+              <dees-icon icon="lucide:Undo2"></dees-icon>
               Discard
             </dees-button>
             <dees-button type="ghost" size="sm">
-              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              <dees-icon icon="lucide:HelpCircle"></dees-icon>
               Help
             </dees-button>
           </div>
-          
+
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
             <dees-button type="destructive" size="sm">
-              <dees-icon iconFA="faTrash"></dees-icon>
+              <dees-icon icon="fa:trash"></dees-icon>
               Delete Account
             </dees-button>
             <dees-button type="outline" size="sm">
-              <dees-icon iconFA="faArchive"></dees-icon>
+              <dees-icon icon="lucide:Archive"></dees-icon>
               Archive Data
             </dees-button>
             <dees-button type="ghost" size="sm" disabled>
-              <dees-icon iconFA="faBan"></dees-icon>
+              <dees-icon icon="lucide:Ban"></dees-icon>
               Not Available
             </dees-button>
           </div>
@@ -127859,8 +128072,7 @@ var demoFunc26 = () => b2`
         <div style="margin-top: 24px;">
           <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
           <div class="code-snippet">
-            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
-            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
             &nbsp;&nbsp;Save Changes<br>
             &lt;/dees-button&gt;
           </div>
@@ -127874,7 +128086,7 @@ var demoFunc26 = () => b2`
 init_dist_ts26();
 init_dist_ts25();
 init_theme();
-var _insideForm_dec, _status_dec2, _size_dec2, _type_dec3, _isHidden_dec, _disabled_dec4, _eventDetailData_dec, _text_dec2, _a33, _DeesButton_decorators, _init31, _text2, _eventDetailData, _disabled4, _isHidden, _type3, _size2, _status2, _insideForm;
+var _iconPosition_dec, _icon_dec2, _insideForm_dec, _status_dec2, _size_dec2, _type_dec3, _isHidden_dec, _disabled_dec4, _eventDetailData_dec, _text_dec2, _a33, _DeesButton_decorators, _init31, _text2, _eventDetailData, _disabled4, _isHidden, _type3, _size2, _status2, _insideForm, _icon2, _iconPosition;
 _DeesButton_decorators = [t4("dees-button")];
 var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
   reflect: true,
@@ -127895,7 +128107,7 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
 })], _insideForm_dec = [n5({
   type: Boolean,
   reflect: true
-})], _a33) {
+})], _icon_dec2 = [n5({ type: String, reflect: true })], _iconPosition_dec = [n5({ type: String, reflect: true })], _a33) {
   constructor() {
     super();
     __privateAdd(this, _text2, __runInitializers(_init31, 8, this)), __runInitializers(_init31, 11, this);
@@ -127906,6 +128118,8 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
     __privateAdd(this, _size2, __runInitializers(_init31, 28, this, "default")), __runInitializers(_init31, 31, this);
     __privateAdd(this, _status2, __runInitializers(_init31, 32, this, "normal")), __runInitializers(_init31, 35, this);
     __privateAdd(this, _insideForm, __runInitializers(_init31, 36, this, false)), __runInitializers(_init31, 39, this);
+    __privateAdd(this, _icon2, __runInitializers(_init31, 40, this)), __runInitializers(_init31, 43, this);
+    __privateAdd(this, _iconPosition, __runInitializers(_init31, 44, this, "left")), __runInitializers(_init31, 47, this);
   }
   async connectedCallback() {
     await super.connectedCallback();
@@ -127913,6 +128127,33 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
       this.insideForm = true;
     }
   }
+  /**
+   * Extracts icon and text from light DOM and sets properties
+   */
+  extractLightDom() {
+    const iconElement = this.querySelector("dees-icon");
+    const textContent = Array.from(this.childNodes).filter((node2) => node2.nodeType === Node.TEXT_NODE).map((node2) => node2.textContent?.trim()).filter(Boolean).join(" ");
+    if (textContent && !this.text) {
+      this.text = textContent;
+    }
+    if (iconElement) {
+      const iconValue = iconElement.icon || iconElement.getAttribute("icon") || (iconElement.iconFA ? `fa:${iconElement.iconFA}` : null);
+      if (iconValue) {
+        const children2 = Array.from(this.childNodes);
+        const iconIndex = children2.indexOf(iconElement);
+        const textNodes = children2.filter(
+          (node2) => node2.nodeType === Node.TEXT_NODE && node2.textContent?.trim()
+        );
+        if (textNodes.length > 0) {
+          const firstTextIndex = children2.indexOf(textNodes[0]);
+          this.iconPosition = iconIndex < firstTextIndex ? "left" : "right";
+        }
+        this.icon = iconValue;
+      }
+      iconElement.remove();
+    }
+    this.innerHTML = "";
+  }
   render() {
     const typeMap = {
       "normal": "default",
@@ -127923,19 +128164,24 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
     };
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === "big" ? "lg" : this.size;
+    const leftIcon = this.iconPosition === "left" && this.icon ? b2`<dees-icon .icon=${this.icon}></dees-icon>` : "";
+    const rightIcon = this.iconPosition === "right" && this.icon ? b2`<dees-icon .icon=${this.icon}></dees-icon>` : "";
+    const isIconOnly = actualSize === "icon" && this.icon;
     return b2`
       <div
         class="button ${this.isHidden ? "hidden" : ""} ${actualType} size-${actualSize} ${this.status} ${this.disabled ? "disabled" : ""}"
         @click="${this.dispatchClick}"
       >
         ${this.status === "normal" ? b2`` : b2`
-          <dees-spinner 
-            .bnw=${true} 
+          <dees-spinner
+            .bnw=${true}
             status="${this.status}"
             size="${actualSize === "sm" ? 14 : actualSize === "lg" ? 18 : 16}"
           ></dees-spinner>
         `}
-        <div class="textbox">${this.text || b2`<slot>Button</slot>`}</div>
+        ${leftIcon}
+        ${isIconOnly ? "" : b2`<div class="textbox">${this.text || "Button"}</div>`}
+        ${rightIcon}
       </div>
     `;
   }
@@ -127953,6 +128199,7 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
     );
   }
   async firstUpdated() {
+    this.extractLightDom();
   }
 };
 _init31 = __decoratorStart(_a33);
@@ -127964,6 +128211,8 @@ _type3 = new WeakMap();
 _size2 = new WeakMap();
 _status2 = new WeakMap();
 _insideForm = new WeakMap();
+_icon2 = new WeakMap();
+_iconPosition = new WeakMap();
 __decorateElement(_init31, 4, "text", _text_dec2, DeesButton, _text2);
 __decorateElement(_init31, 4, "eventDetailData", _eventDetailData_dec, DeesButton, _eventDetailData);
 __decorateElement(_init31, 4, "disabled", _disabled_dec4, DeesButton, _disabled4);
@@ -127972,6 +128221,8 @@ __decorateElement(_init31, 4, "type", _type_dec3, DeesButton, _type3);
 __decorateElement(_init31, 4, "size", _size_dec2, DeesButton, _size2);
 __decorateElement(_init31, 4, "status", _status_dec2, DeesButton, _status2);
 __decorateElement(_init31, 4, "insideForm", _insideForm_dec, DeesButton, _insideForm);
+__decorateElement(_init31, 4, "icon", _icon_dec2, DeesButton, _icon2);
+__decorateElement(_init31, 4, "iconPosition", _iconPosition_dec, DeesButton, _iconPosition);
 DeesButton = __decorateElement(_init31, 0, "DeesButton", _DeesButton_decorators, DeesButton);
 __publicField(DeesButton, "demo", demoFunc26);
 __publicField(DeesButton, "demoGroup", "Button");
@@ -128235,6 +128486,12 @@ __publicField(DeesButton, "styles", [
         height: 18px;
       }
 
+      /* Text alignment */
+      .textbox {
+        display: flex;
+        align-items: center;
+      }
+
     `
 ]);
 __runInitializers(_init31, 1, DeesButton);
@@ -128337,6 +128594,10 @@ var DeesStatsGrid = class extends (_a34 = DeesElement, _tiles_dec = [n5({ type:
         return this.renderMultiPercentage(tile);
       case "cpuCores":
         return this.renderCpuCores(tile);
+      case "partition":
+        return this.renderPartition(tile);
+      case "disk":
+        return this.renderDisk(tile);
       case "text":
         return b2`
           <div class="text-value" style="${tile.color ? `color: ${tile.color}` : ""}">
@@ -128522,6 +128783,103 @@ var DeesStatsGrid = class extends (_a34 = DeesElement, _tiles_dec = [n5({ type:
       </div>
     `;
   }
+  formatBytes(bytes) {
+    if (bytes === 0) return "0 B";
+    const k4 = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB"];
+    const i11 = Math.floor(Math.log(bytes) / Math.log(k4));
+    return parseFloat((bytes / Math.pow(k4, i11)).toFixed(1)) + " " + sizes[i11];
+  }
+  renderPartition(tile) {
+    if (!tile.partitionData) {
+      return b2`<div class="tile-value">${tile.value}</div>`;
+    }
+    const { used, total, filesystem, mountPoint } = tile.partitionData;
+    const percentage = Math.min(100, Math.max(0, used / total * 100));
+    const free = total - used;
+    const getColorClass = () => {
+      if (percentage >= 90) return "critical";
+      if (percentage >= 75) return "warning";
+      return "";
+    };
+    return b2`
+      <div class="partition-wrapper">
+        <div class="partition-header">
+          <span class="partition-percentage">${Math.round(percentage)}%</span>
+        </div>
+        <div class="partition-bar">
+          <div
+            class="partition-bar-fill ${getColorClass()}"
+            style="width: ${percentage}%"
+          ></div>
+        </div>
+        <div class="partition-stats">
+          <div class="partition-stat">
+            <span class="partition-stat-label">Used</span>
+            <span class="partition-stat-value">${this.formatBytes(used)}</span>
+          </div>
+          <div class="partition-stat">
+            <span class="partition-stat-label">Free</span>
+            <span class="partition-stat-value">${this.formatBytes(free)}</span>
+          </div>
+        </div>
+        <div class="partition-meta">
+          <span class="partition-filesystem">${filesystem}</span>
+          ${mountPoint ? b2`<span class="partition-mountpoint">${mountPoint}</span>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderDisk(tile) {
+    if (!tile.diskData) {
+      return b2`<div class="tile-value">${tile.value}</div>`;
+    }
+    const { capacity, model, type: type5, iops, health } = tile.diskData;
+    const getHealthClass = (value2) => {
+      if (value2 >= 70) return "good";
+      if (value2 >= 30) return "warning";
+      return "critical";
+    };
+    return b2`
+      <div class="disk-wrapper">
+        <div class="disk-capacity">${this.formatBytes(capacity)}</div>
+        ${model || type5 ? b2`
+          <div class="disk-model">
+            ${model ? b2`<span>${model}</span>` : ""}
+            ${type5 ? b2`<span class="disk-type-badge">${type5}</span>` : ""}
+          </div>
+        ` : ""}
+        <div class="disk-metrics">
+          ${iops ? b2`
+            <div class="disk-iops">
+              <div class="disk-iops-item">
+                <span class="disk-iops-label">Read</span>
+                <span class="disk-iops-value">${iops.read.toLocaleString()}</span>
+              </div>
+              <div class="disk-iops-item">
+                <span class="disk-iops-label">Write</span>
+                <span class="disk-iops-value">${iops.write.toLocaleString()}</span>
+              </div>
+            </div>
+          ` : ""}
+          ${health !== void 0 ? b2`
+            <div class="disk-health">
+              <div class="disk-health-header">
+                <span class="disk-health-label">Health</span>
+                <span class="disk-health-value">${health}%</span>
+              </div>
+              <div class="disk-health-bar">
+                <div
+                  class="disk-health-fill ${getHealthClass(health)}"
+                  style="width: ${health}%"
+                ></div>
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
   async handleGridAction(action) {
     if (action.action) {
       await action.action();
@@ -128955,6 +129313,219 @@ __publicField(DeesStatsGrid, "styles", [
         max-width: 100%;
       }
 
+      /* Partition Styles */
+      .partition-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 8px;
+      }
+
+      .partition-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+
+      .partition-percentage {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .partition-bar {
+        width: 100%;
+        height: 6px;
+        background: ${cssManager.bdTheme("#e8e8e8", "#1a1a1a")};
+        border-radius: 3px;
+        overflow: hidden;
+      }
+
+      .partition-bar-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme("#333333", "#e0e0e0")};
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 3px;
+      }
+
+      .partition-bar-fill.warning {
+        background: ${cssManager.bdTheme("hsl(45.4 93.4% 47.5%)", "hsl(45.4 93.4% 47.5%)")};
+      }
+
+      .partition-bar-fill.critical {
+        background: ${cssManager.bdTheme("hsl(0 84.2% 60.2%)", "hsl(0 84.2% 60.2%)")};
+      }
+
+      .partition-stats {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: auto;
+      }
+
+      .partition-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .partition-stat-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      .partition-stat-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+        letter-spacing: -0.01em;
+      }
+
+      .partition-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 4px;
+      }
+
+      .partition-filesystem {
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+        background: ${cssManager.bdTheme("hsl(210 40% 96.1%)", "hsl(215 20.2% 16.8%)")};
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .partition-mountpoint {
+        font-size: 11px;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+      }
+
+      /* Disk Styles */
+      .disk-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 8px;
+      }
+
+      .disk-capacity {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .disk-model {
+        font-size: 12px;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .disk-type-badge {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+        background: ${cssManager.bdTheme("hsl(210 40% 96.1%)", "hsl(215 20.2% 16.8%)")};
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .disk-metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: auto;
+      }
+
+      .disk-iops {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .disk-iops-item {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+      }
+
+      .disk-iops-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+        text-transform: uppercase;
+      }
+
+      .disk-iops-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+      }
+
+      .disk-health {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .disk-health-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+
+      .disk-health-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+        text-transform: uppercase;
+      }
+
+      .disk-health-value {
+        font-size: 12px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+      }
+
+      .disk-health-bar {
+        width: 100%;
+        height: 4px;
+        background: ${cssManager.bdTheme("#e8e8e8", "#1a1a1a")};
+        border-radius: 2px;
+        overflow: hidden;
+      }
+
+      .disk-health-fill {
+        height: 100%;
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 2px;
+      }
+
+      .disk-health-fill.good {
+        background: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3%)", "hsl(142.1 70.6% 45.3%)")};
+      }
+
+      .disk-health-fill.warning {
+        background: ${cssManager.bdTheme("hsl(45.4 93.4% 47.5%)", "hsl(45.4 93.4% 47.5%)")};
+      }
+
+      .disk-health-fill.critical {
+        background: ${cssManager.bdTheme("hsl(0 84.2% 60.2%)", "hsl(0 84.2% 60.2%)")};
+      }
+
       /* Trend Styles */
       .trend-container {
         width: 100%;
@@ -135051,8 +135622,10 @@ init_dist_ts26();
 var demoFunc33 = () => {
   return b2`
     <dees-demowrapper .runAfterRender=${async (elementArg) => {
-    const logElement = elementArg.querySelector("dees-chart-log");
-    let intervalId;
+    const structuredLog = elementArg.querySelector("#structured-log");
+    const rawLog = elementArg.querySelector("#raw-log");
+    let structuredIntervalId;
+    let rawIntervalId;
     const serverSources = ["Server", "Database", "API", "Auth", "Cache", "Queue", "WebSocket", "Scheduler"];
     const logTemplates = {
       debug: [
@@ -135091,6 +135664,20 @@ var demoFunc33 = () => {
         "Health check passed: all systems operational"
       ]
     };
+    const dockerLogTemplates = [
+      "\x1B[90m2024-01-15T10:23:45.123Z\x1B[0m \x1B[36mINFO\x1B[0m  [nginx] GET /api/health 200 - 2ms",
+      "\x1B[90m2024-01-15T10:23:45.456Z\x1B[0m \x1B[33mWARN\x1B[0m  [redis] Connection pool running low: 3/10",
+      "\x1B[90m2024-01-15T10:23:45.789Z\x1B[0m \x1B[31mERROR\x1B[0m [mongodb] Query timeout after 30000ms",
+      "\x1B[90m2024-01-15T10:23:46.012Z\x1B[0m \x1B[36mINFO\x1B[0m  [app] Processing batch job #{{jobId}}",
+      "\x1B[90m2024-01-15T10:23:46.345Z\x1B[0m \x1B[32mOK\x1B[0m    [health] All services healthy",
+      "\x1B[90m2024-01-15T10:23:46.678Z\x1B[0m \x1B[36mINFO\x1B[0m  [kafka] Message consumed from topic: events",
+      "\x1B[90m2024-01-15T10:23:47.001Z\x1B[0m \x1B[35mDEBUG\x1B[0m [grpc] Request received: GetUser(id={{userId}})",
+      "\x1B[90m2024-01-15T10:23:47.234Z\x1B[0m \x1B[31mERROR\x1B[0m [auth] Token validation failed: expired",
+      "\x1B[90m2024-01-15T10:23:47.567Z\x1B[0m \x1B[33mWARN\x1B[0m  [rate-limit] IP {{ip}} approaching rate limit",
+      "\x1B[90m2024-01-15T10:23:47.890Z\x1B[0m \x1B[36mINFO\x1B[0m  [websocket] Client connected: session={{session}}",
+      // Multi-line log entry like stack traces
+      "\x1B[31mError: Connection refused\x1B[0m\n    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)\n    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)\n    at async DatabaseService.query (/app/src/db/service.ts:89:12)"
+    ];
     const generateRandomLog = () => {
       const levels = ["debug", "info", "warn", "error", "success"];
       const weights = [0.2, 0.5, 0.15, 0.1, 0.05];
@@ -135108,15 +135695,21 @@ var demoFunc33 = () => {
       const templates = logTemplates[level];
       const template = templates[Math.floor(Math.random() * templates.length)];
       const message2 = template.replace("{{module}}", ["express", "mongoose", "redis", "socket.io"][Math.floor(Math.random() * 4)]).replace("{{key}}", "user:" + Math.floor(Math.random() * 1e3)).replace("{{time}}", String(Math.floor(Math.random() * 500) + 50)).replace("{{headers}}", "Content-Type: application/json, Authorization: Bearer ...").replace("{{var}}", ["NODE_ENV", "DATABASE_URL", "API_KEY", "PORT"][Math.floor(Math.random() * 4)]).replace("{{method}}", ["GET", "POST", "PUT", "DELETE"][Math.floor(Math.random() * 4)]).replace("{{path}}", ["/api/users", "/api/auth/login", "/api/products", "/health"][Math.floor(Math.random() * 4)]).replace("{{userId}}", String(Math.floor(Math.random() * 1e4))).replace("{{jobId}}", "job_" + Math.random().toString(36).substring(2, 11)).replace("{{task}}", ["cleanup", "backup", "report-generation", "cache-refresh"][Math.floor(Math.random() * 4)]).replace("{{ip}}", `192.168.1.${Math.floor(Math.random() * 255)}`).replace("{{query}}", "SELECT * FROM users WHERE ...").replace("{{percent}}", String(Math.floor(Math.random() * 30) + 70)).replace("{{endpoint}}", "/api/v1/legacy").replace("{{days}}", String(Math.floor(Math.random() * 30) + 1)).replace("{{error}}", ["ECONNREFUSED", "ETIMEDOUT", "ENOTFOUND"][Math.floor(Math.random() * 3)]).replace("{{user}}", "user_" + Math.floor(Math.random() * 1e3)).replace("{{service}}", ["Redis", "MongoDB", "ElasticSearch"][Math.floor(Math.random() * 3)]).replace("{{port}}", String(3e3 + Math.floor(Math.random() * 10))).replace("{{size}}", String(Math.floor(Math.random() * 500) + 100));
-      logElement.addLog(level, message2, source);
+      structuredLog.addLog(level, message2, source);
     };
-    const startSimulation = () => {
-      if (!intervalId) {
+    const generateDockerLog = () => {
+      const template = dockerLogTemplates[Math.floor(Math.random() * dockerLogTemplates.length)];
+      const now2 = (/* @__PURE__ */ new Date()).toISOString();
+      const logLine = template.replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g, now2).replace("{{jobId}}", String(Math.floor(Math.random() * 1e4))).replace("{{userId}}", String(Math.floor(Math.random() * 1e4))).replace("{{ip}}", `192.168.1.${Math.floor(Math.random() * 255)}`).replace("{{session}}", Math.random().toString(36).substring(2, 11));
+      rawLog.writelnRaw(logLine);
+    };
+    const startStructuredSimulation = () => {
+      if (!structuredIntervalId) {
         const scheduleNext = () => {
           generateRandomLog();
           const nextDelay = Math.random() * 2e3 + 500;
-          intervalId = window.setTimeout(() => {
-            if (intervalId) {
+          structuredIntervalId = window.setTimeout(() => {
+            if (structuredIntervalId) {
               scheduleNext();
             }
           }, nextDelay);
@@ -135124,57 +135717,131 @@ var demoFunc33 = () => {
         scheduleNext();
       }
     };
-    const stopSimulation = () => {
-      if (intervalId) {
-        window.clearTimeout(intervalId);
-        intervalId = null;
+    const stopStructuredSimulation = () => {
+      if (structuredIntervalId) {
+        window.clearTimeout(structuredIntervalId);
+        structuredIntervalId = null;
+      }
+    };
+    const startRawSimulation = () => {
+      if (!rawIntervalId) {
+        const scheduleNext = () => {
+          generateDockerLog();
+          const nextDelay = Math.random() * 1e3 + 200;
+          rawIntervalId = window.setTimeout(() => {
+            if (rawIntervalId) {
+              scheduleNext();
+            }
+          }, nextDelay);
+        };
+        scheduleNext();
+      }
+    };
+    const stopRawSimulation = () => {
+      if (rawIntervalId) {
+        window.clearTimeout(rawIntervalId);
+        rawIntervalId = null;
       }
     };
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
       const text9 = button.textContent?.trim();
-      if (text9 === "Add Single Log") {
-        button.addEventListener("click", () => generateRandomLog());
-      } else if (text9 === "Start Simulation") {
-        button.addEventListener("click", () => startSimulation());
-      } else if (text9 === "Stop Simulation") {
-        button.addEventListener("click", () => stopSimulation());
+      switch (text9) {
+        case "Add Structured Log":
+          button.addEventListener("click", () => generateRandomLog());
+          break;
+        case "Start Structured":
+          button.addEventListener("click", () => startStructuredSimulation());
+          break;
+        case "Stop Structured":
+          button.addEventListener("click", () => stopStructuredSimulation());
+          break;
+        case "Add Docker Log":
+          button.addEventListener("click", () => generateDockerLog());
+          break;
+        case "Start Docker":
+          button.addEventListener("click", () => startRawSimulation());
+          break;
+        case "Stop Docker":
+          button.addEventListener("click", () => stopRawSimulation());
+          break;
       }
     });
   }}>
       <style>
-      .demoBox {
-        position: relative;
-        background: #000000;
-        height: 100%;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      .controls {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-      }
-      .info {
-        color: #888;
-        font-size: 12px;
-        font-family: 'Geist Sans', sans-serif;
-      }
-    </style>
+        ${i`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 5%)")};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+          .section-title {
+            color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .section-description {
+            color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+          }
+        `}
+      </style>
     <div class="demoBox">
-      <div class="controls">
-        <dees-button>Add Single Log</dees-button>
-        <dees-button>Start Simulation</dees-button>
-        <dees-button>Stop Simulation</dees-button>
+      <!-- Structured Logs Section -->
+      <div class="section">
+        <div class="section-title">Structured Logs (ILogEntry)</div>
+        <div class="section-description">
+          Structured log entries with level, message, and source. Supports search and keyword highlighting.
+        </div>
+        <div class="controls">
+          <dees-button>Add Structured Log</dees-button>
+          <dees-button>Start Structured</dees-button>
+          <dees-button>Stop Structured</dees-button>
+        </div>
+        <dees-chart-log
+          id="structured-log"
+          .label=${"Production Server Logs"}
+          .highlightKeywords=${["error", "failed", "timeout"]}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      </div>
+
+      <!-- Raw Logs Section -->
+      <div class="section">
+        <div class="section-title">Raw Logs (Docker/Container Style)</div>
+        <div class="section-description">
+          Raw log output with ANSI escape sequences for real Docker/container logs.
+        </div>
+        <div class="controls">
+          <dees-button>Add Docker Log</dees-button>
+          <dees-button>Start Docker</dees-button>
+          <dees-button>Stop Docker</dees-button>
+        </div>
+        <dees-chart-log
+          id="raw-log"
+          .label=${"Docker Container Logs"}
+          .mode=${"raw"}
+          .showMetrics=${false}
+        ></dees-chart-log>
       </div>
-      <div class="info">Simulating realistic server logs with various levels and sources</div>
-      <dees-chart-log
-        .label=${"Production Server Logs"}
-      ></dees-chart-log>
     </div>
     </dees-demowrapper>
   `;
@@ -135184,16 +135851,37 @@ var demoFunc33 = () => {
 init_dist_ts26();
 init_dist_ts25();
 init_theme();
-var _maxEntries_dec, _autoScroll_dec, _logEntries_dec, _label_dec6, _a45, _DeesChartLog_decorators, _init47, _label6, _logEntries, _autoScroll, _maxEntries;
+init_services();
+var _terminalReady_dec, _metrics_dec, _filterMode_dec, _searchQuery_dec2, _showMetrics_dec, _highlightKeywords_dec, _maxEntries_dec, _autoScroll_dec, _logEntries_dec, _mode_dec, _label_dec6, _a45, _DeesChartLog_decorators, _init47, _label6, _mode, _logEntries, _autoScroll, _maxEntries, _highlightKeywords, _showMetrics, _searchQuery2, _filterMode, _metrics, _terminalReady;
 _DeesChartLog_decorators = [t4("dees-chart-log")];
-var DeesChartLog = class extends (_a45 = DeesElement, _label_dec6 = [n5()], _logEntries_dec = [n5({ type: Array })], _autoScroll_dec = [n5({ type: Boolean })], _maxEntries_dec = [n5({ type: Number })], _a45) {
+var DeesChartLog = class extends (_a45 = DeesElement, _label_dec6 = [n5()], _mode_dec = [n5({ type: String })], _logEntries_dec = [n5({ type: Array })], _autoScroll_dec = [n5({ type: Boolean })], _maxEntries_dec = [n5({ type: Number })], _highlightKeywords_dec = [n5({ type: Array })], _showMetrics_dec = [n5({ type: Boolean })], _searchQuery_dec2 = [r5()], _filterMode_dec = [r5()], _metrics_dec = [r5()], _terminalReady_dec = [r5()], _a45) {
   constructor() {
     super();
     __privateAdd(this, _label6, __runInitializers(_init47, 8, this, "Server Logs")), __runInitializers(_init47, 11, this);
-    __privateAdd(this, _logEntries, __runInitializers(_init47, 12, this, [])), __runInitializers(_init47, 15, this);
-    __privateAdd(this, _autoScroll, __runInitializers(_init47, 16, this, true)), __runInitializers(_init47, 19, this);
-    __privateAdd(this, _maxEntries, __runInitializers(_init47, 20, this, 1e3)), __runInitializers(_init47, 23, this);
-    __publicField(this, "logContainer");
+    __privateAdd(this, _mode, __runInitializers(_init47, 12, this, "structured")), __runInitializers(_init47, 15, this);
+    __privateAdd(this, _logEntries, __runInitializers(_init47, 16, this, [])), __runInitializers(_init47, 19, this);
+    __privateAdd(this, _autoScroll, __runInitializers(_init47, 20, this, true)), __runInitializers(_init47, 23, this);
+    __privateAdd(this, _maxEntries, __runInitializers(_init47, 24, this, 1e4)), __runInitializers(_init47, 27, this);
+    __privateAdd(this, _highlightKeywords, __runInitializers(_init47, 28, this, [])), __runInitializers(_init47, 31, this);
+    __privateAdd(this, _showMetrics, __runInitializers(_init47, 32, this, true)), __runInitializers(_init47, 35, this);
+    __privateAdd(this, _searchQuery2, __runInitializers(_init47, 36, this, "")), __runInitializers(_init47, 39, this);
+    __privateAdd(this, _filterMode, __runInitializers(_init47, 40, this, false)), __runInitializers(_init47, 43, this);
+    __privateAdd(this, _metrics, __runInitializers(_init47, 44, this, { debug: 0, info: 0, warn: 0, error: 0, success: 0, total: 0, rate: 0 })), __runInitializers(_init47, 47, this);
+    __privateAdd(this, _terminalReady, __runInitializers(_init47, 48, this, false)), __runInitializers(_init47, 51, this);
+    // Buffer of all log entries for filter mode
+    __publicField(this, "logBuffer", []);
+    // Track trailing hidden entries count for live updates in filter mode
+    __publicField(this, "trailingHiddenCount", 0);
+    // xterm instances
+    __publicField(this, "terminal", null);
+    __publicField(this, "fitAddon", null);
+    __publicField(this, "searchAddon", null);
+    __publicField(this, "resizeObserver", null);
+    __publicField(this, "terminalThemeSubscription", null);
+    __publicField(this, "domtoolsInstance", null);
+    // Rate calculation
+    __publicField(this, "rateBuffer", []);
+    __publicField(this, "rateInterval", null);
     domtools_elementbasic_exports.setup();
   }
   render() {
@@ -135201,105 +135889,508 @@ var DeesChartLog = class extends (_a45 = DeesElement, _label_dec6 = [n5()], _log
       <div class="mainbox">
         <div class="header">
           <div class="title">${this.label}</div>
+          <div class="search-box">
+            <input
+              type="text"
+              placeholder="Search logs..."
+              .value=${this.searchQuery}
+              @input=${(e11) => this.handleSearchInput(e11)}
+              @keydown=${(e11) => this.handleSearchKeydown(e11)}
+            />
+            <div class="search-nav">
+              <button @click=${() => this.searchPrevious()} title="Previous match">↑</button>
+              <button @click=${() => this.searchNext()} title="Next match">↓</button>
+            </div>
+            <button
+              class="filter-toggle ${this.filterMode ? "active" : ""}"
+              @click=${() => this.toggleFilterMode()}
+              title="${this.filterMode ? "Switch to highlight mode" : "Switch to filter mode"}"
+            >
+              ${this.filterMode ? "Filter" : "Highlight"}
+            </button>
+          </div>
           <div class="controls">
-            <button 
+            <button
               class="control-button ${this.autoScroll ? "active" : ""}"
-              @click=${() => {
-      this.autoScroll = !this.autoScroll;
-    }}
+              @click=${() => this.toggleAutoScroll()}
             >
               Auto Scroll
             </button>
-            <button 
-              class="control-button"
-              @click=${() => {
-      this.clearLogs();
-    }}
-            >
+            <button class="control-button" @click=${() => this.clearLogs()}>
               Clear
             </button>
           </div>
         </div>
-        <div class="logContainer">
-          ${this.logEntries.length === 0 ? b2`<div class="empty-state">No logs to display</div>` : this.logEntries.map((entry) => this.renderLogEntry(entry))}
+
+        <div class="terminal-container">
+          ${!this.terminalReady ? b2`<div class="loading-state">Loading terminal...</div>` : ""}
         </div>
+
+        ${this.showMetrics ? b2`
+              <div class="metrics-bar">
+                <span class="metric error">errors: ${this.metrics.error}</span>
+                <span class="metric warn">warns: ${this.metrics.warn}</span>
+                <span class="metric info">info: ${this.metrics.info}</span>
+                <span class="metric success">success: ${this.metrics.success}</span>
+                <span class="metric debug">debug: ${this.metrics.debug}</span>
+                <span class="metric rate">${this.metrics.rate.toFixed(1)} logs/sec</span>
+              </div>
+            ` : ""}
       </div>
     `;
   }
-  renderLogEntry(entry) {
-    const timestamp2 = new Date(entry.timestamp).toLocaleTimeString("en-US", {
+  async firstUpdated() {
+    this.domtoolsInstance = await this.domtoolsPromise;
+    await this.initializeTerminal();
+    if (this.logEntries.length > 0) {
+      for (const entry of this.logEntries) {
+        this.writeLogEntry(entry);
+      }
+    }
+  }
+  async initializeTerminal() {
+    const libLoader = DeesServiceLibLoader.getInstance();
+    const [xtermBundle, fitBundle, searchBundle] = await Promise.all([
+      libLoader.loadXterm(),
+      libLoader.loadXtermFitAddon(),
+      libLoader.loadXtermSearchAddon()
+    ]);
+    await this.injectXtermStylesIntoShadow();
+    this.terminal = new xtermBundle.Terminal({
+      cursorBlink: false,
+      disableStdin: true,
+      fontSize: 12,
+      fontFamily: "'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
+      theme: this.getTerminalTheme(),
+      scrollback: this.maxEntries,
+      convertEol: true
+    });
+    this.fitAddon = new fitBundle.FitAddon();
+    this.searchAddon = new searchBundle.SearchAddon();
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.loadAddon(this.searchAddon);
+    const container = this.shadowRoot.querySelector(".terminal-container");
+    this.terminal.open(container);
+    await new Promise((resolve2) => requestAnimationFrame(resolve2));
+    this.fitAddon.fit();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.fitAddon?.fit();
+    });
+    this.resizeObserver.observe(container);
+    this.terminalThemeSubscription = this.domtoolsInstance.themeManager.themeObservable.subscribe(() => {
+      if (this.terminal) {
+        this.terminal.options.theme = this.getTerminalTheme();
+      }
+    });
+    this.rateInterval = setInterval(() => this.calculateRate(), 1e3);
+    this.terminalReady = true;
+  }
+  getTerminalTheme() {
+    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    return isDark ? {
+      background: "#0a0a0a",
+      foreground: "#e0e0e0",
+      cursor: "#e0e0e0",
+      selectionBackground: "#404040",
+      black: "#000000",
+      red: "#ff5555",
+      green: "#50fa7b",
+      yellow: "#f1fa8c",
+      blue: "#6272a4",
+      magenta: "#ff79c6",
+      cyan: "#8be9fd",
+      white: "#f8f8f2",
+      brightBlack: "#6272a4",
+      brightRed: "#ff6e6e",
+      brightGreen: "#69ff94",
+      brightYellow: "#ffffa5",
+      brightBlue: "#d6acff",
+      brightMagenta: "#ff92df",
+      brightCyan: "#a4ffff",
+      brightWhite: "#ffffff"
+    } : {
+      background: "#ffffff",
+      foreground: "#333333",
+      cursor: "#333333",
+      selectionBackground: "#add6ff",
+      black: "#000000",
+      red: "#cd3131",
+      green: "#00bc00",
+      yellow: "#949800",
+      blue: "#0451a5",
+      magenta: "#bc05bc",
+      cyan: "#0598bc",
+      white: "#555555",
+      brightBlack: "#666666",
+      brightRed: "#cd3131",
+      brightGreen: "#14ce14",
+      brightYellow: "#b5ba00",
+      brightBlue: "#0451a5",
+      brightMagenta: "#bc05bc",
+      brightCyan: "#0598bc",
+      brightWhite: "#a5a5a5"
+    };
+  }
+  /**
+   * Inject xterm CSS styles into shadow root
+   * This is needed because shadow DOM doesn't inherit styles from document.head
+   */
+  async injectXtermStylesIntoShadow() {
+    const styleId = "xterm-shadow-styles";
+    if (this.shadowRoot.getElementById(styleId)) {
+      return;
+    }
+    const cssUrl = `${CDN_BASE}/xterm@${CDN_VERSIONS.xterm}/css/xterm.css`;
+    const response = await fetch(cssUrl);
+    const cssText = await response.text();
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = cssText;
+    this.shadowRoot.appendChild(style);
+  }
+  // =====================
+  // Structured Log Methods
+  // =====================
+  /**
+   * Add a single structured log entry
+   */
+  addLog(level, message2, source) {
+    const entry = {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      level,
+      message: message2,
+      source
+    };
+    this.logBuffer.push(entry);
+    if (this.logBuffer.length > this.maxEntries) {
+      this.logBuffer.shift();
+    }
+    if (!this.filterMode || !this.searchQuery) {
+      this.writeLogEntry(entry);
+    } else if (this.entryMatchesFilter(entry)) {
+      this.trailingHiddenCount = 0;
+      this.writeLogEntry(entry);
+    } else {
+      this.updateTrailingPlaceholder();
+    }
+    this.updateMetrics(entry.level);
+  }
+  /**
+   * Add multiple structured log entries
+   */
+  updateLog(entries) {
+    if (!entries) return;
+    for (const entry of entries) {
+      this.logBuffer.push(entry);
+      if (this.logBuffer.length > this.maxEntries) {
+        this.logBuffer.shift();
+      }
+      if (!this.filterMode || !this.searchQuery) {
+        this.writeLogEntry(entry);
+      } else if (this.entryMatchesFilter(entry)) {
+        this.trailingHiddenCount = 0;
+        this.writeLogEntry(entry);
+      } else {
+        this.updateTrailingPlaceholder();
+      }
+      this.updateMetrics(entry.level);
+    }
+  }
+  /**
+   * Update the trailing hidden placeholder in real-time
+   * Clears the last line if a placeholder already exists, then writes updated count
+   */
+  updateTrailingPlaceholder() {
+    if (!this.terminal) return;
+    if (this.trailingHiddenCount > 0) {
+      this.terminal.write("\x1B[1A\x1B[2K\r");
+    }
+    this.trailingHiddenCount++;
+    this.writeHiddenPlaceholder(this.trailingHiddenCount);
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  /**
+   * Check if a log entry matches the current filter
+   */
+  entryMatchesFilter(entry) {
+    if (!this.searchQuery) return true;
+    const query4 = this.searchQuery.toLowerCase();
+    return entry.message.toLowerCase().includes(query4) || entry.level.toLowerCase().includes(query4) || (entry.source?.toLowerCase().includes(query4) ?? false);
+  }
+  writeLogEntry(entry) {
+    if (!this.terminal) return;
+    const formatted = this.formatLogEntry(entry);
+    this.terminal.writeln(formatted);
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  formatLogEntry(entry) {
+    const timestamp2 = this.formatTimestamp(entry.timestamp);
+    const levelColors = {
+      debug: "\x1B[90m",
+      // Gray
+      info: "\x1B[36m",
+      // Cyan
+      warn: "\x1B[33m",
+      // Yellow
+      error: "\x1B[31m",
+      // Red
+      success: "\x1B[32m"
+      // Green
+    };
+    const reset = "\x1B[0m";
+    const dim = "\x1B[2m";
+    const levelStr = `${levelColors[entry.level]}[${entry.level.toUpperCase().padEnd(7)}]${reset}`;
+    const sourceStr = entry.source ? `${dim}[${entry.source}]${reset} ` : "";
+    const messageStr = this.applyHighlights(entry.message);
+    return `${dim}${timestamp2}${reset} ${levelStr} ${sourceStr}${messageStr}`;
+  }
+  formatTimestamp(isoString) {
+    const date = new Date(isoString);
+    return date.toLocaleTimeString("en-US", {
       hour12: false,
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit",
       fractionalSecondDigits: 3
     });
-    return b2`
-      <div class="logEntry">
-        <span class="timestamp">${timestamp2}</span>
-        <span class="level ${entry.level}">${entry.level}</span>
-        ${entry.source ? b2`<span class="source">[${entry.source}]</span>` : ""}
-        <span class="message">${entry.message}</span>
-      </div>
-    `;
   }
-  async firstUpdated() {
-    await this.domtoolsPromise;
-    this.logContainer = this.shadowRoot.querySelector(".logContainer");
-    const demoLogs = [
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "Server started on port 3000", source: "Server" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "debug", message: "Loading configuration from /etc/app/config.json", source: "Config" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "Connected to MongoDB at mongodb://localhost:27017", source: "Database" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "success", message: "Database connection established successfully", source: "Database" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "warn", message: "No SSL certificate found, using self-signed certificate", source: "Security" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "API routes initialized: GET /api/users, POST /api/users, DELETE /api/users/:id", source: "Router" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "debug", message: "Middleware stack: cors, bodyParser, authentication, errorHandler", source: "Middleware" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "WebSocket server listening on ws://localhost:3001", source: "WebSocket" }
-    ];
-    this.logEntries = demoLogs;
-    this.scrollToBottom();
-  }
-  async updateLog(entries) {
-    if (entries) {
-      this.logEntries = [...this.logEntries, ...entries];
-      if (this.logEntries.length > this.maxEntries) {
-        this.logEntries = this.logEntries.slice(-this.maxEntries);
+  applyHighlights(text9) {
+    const keywords = [...this.highlightKeywords];
+    if (this.filterMode && this.searchQuery) {
+      keywords.push(this.searchQuery);
+    }
+    if (keywords.length === 0) return text9;
+    let result = text9;
+    for (const keyword of keywords) {
+      const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const regex = new RegExp(`(${escaped})`, "gi");
+      result = result.replace(regex, "\x1B[43m\x1B[30m$1\x1B[0m");
+    }
+    return result;
+  }
+  // =====================
+  // Raw Log Methods
+  // =====================
+  /**
+   * Write raw data to the terminal (for Docker logs, etc.)
+   */
+  writeRaw(data) {
+    if (!this.terminal) return;
+    this.terminal.write(data);
+    this.recordLogEvent();
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  /**
+   * Write a raw line to the terminal
+   */
+  writelnRaw(line) {
+    if (!this.terminal) return;
+    this.terminal.writeln(line);
+    this.recordLogEvent();
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  // =====================
+  // Search Methods
+  // =====================
+  handleSearchInput(e11) {
+    const input = e11.target;
+    const newQuery = input.value;
+    const queryChanged = this.searchQuery !== newQuery;
+    this.searchQuery = newQuery;
+    if (this.filterMode && queryChanged) {
+      this.reRenderFilteredLogs();
+    } else if (this.searchQuery) {
+      this.searchAddon?.findNext(this.searchQuery);
+    }
+  }
+  handleSearchKeydown(e11) {
+    if (e11.key === "Enter") {
+      if (e11.shiftKey) {
+        this.searchPrevious();
+      } else {
+        this.searchNext();
       }
-      this.requestUpdate();
-      await this.updateComplete;
-      if (this.autoScroll) {
-        this.scrollToBottom();
+    } else if (e11.key === "Escape") {
+      this.searchQuery = "";
+      e11.target.value = "";
+    }
+  }
+  /**
+   * Search for a query in the terminal
+   */
+  search(query4) {
+    this.searchQuery = query4;
+    this.searchAddon?.findNext(query4);
+  }
+  /**
+   * Find next search match
+   */
+  searchNext() {
+    if (this.searchQuery) {
+      this.searchAddon?.findNext(this.searchQuery);
+    }
+  }
+  /**
+   * Find previous search match
+   */
+  searchPrevious() {
+    if (this.searchQuery) {
+      this.searchAddon?.findPrevious(this.searchQuery);
+    }
+  }
+  // =====================
+  // Control Methods
+  // =====================
+  toggleAutoScroll() {
+    this.autoScroll = !this.autoScroll;
+    if (this.autoScroll && this.terminal) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  /**
+   * Toggle between filter mode and highlight mode
+   */
+  toggleFilterMode() {
+    this.filterMode = !this.filterMode;
+    this.reRenderFilteredLogs();
+  }
+  /**
+   * Re-render logs based on current filter state
+   * In filter mode: show matching logs with placeholders for hidden entries
+   * In highlight mode: show all logs
+   */
+  reRenderFilteredLogs() {
+    if (!this.terminal) return;
+    this.terminal.clear();
+    this.trailingHiddenCount = 0;
+    if (!this.filterMode || !this.searchQuery) {
+      for (const entry of this.logBuffer) {
+        const formatted = this.formatLogEntry(entry);
+        this.terminal.writeln(formatted);
       }
+    } else {
+      let hiddenCount = 0;
+      for (const entry of this.logBuffer) {
+        if (this.entryMatchesFilter(entry)) {
+          if (hiddenCount > 0) {
+            this.writeHiddenPlaceholder(hiddenCount);
+            hiddenCount = 0;
+          }
+          const formatted = this.formatLogEntry(entry);
+          this.terminal.writeln(formatted);
+        } else {
+          hiddenCount++;
+        }
+      }
+      if (hiddenCount > 0) {
+        this.writeHiddenPlaceholder(hiddenCount);
+        this.trailingHiddenCount = hiddenCount;
+      }
+    }
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
     }
   }
+  /**
+   * Write a placeholder line showing how many log entries are hidden by filter
+   */
+  writeHiddenPlaceholder(count2) {
+    const dim = "\x1B[2m";
+    const reset = "\x1B[0m";
+    const text9 = count2 === 1 ? `[1 log line hidden by filter ...]` : `[${count2} log lines hidden by filter ...]`;
+    this.terminal?.writeln(`${dim}${text9}${reset}`);
+  }
+  /**
+   * Clear all logs and reset metrics
+   */
   clearLogs() {
-    this.logEntries = [];
-    this.requestUpdate();
+    this.terminal?.clear();
+    this.logBuffer = [];
+    this.trailingHiddenCount = 0;
+    this.resetMetrics();
   }
+  /**
+   * Scroll to the bottom of the log
+   */
   scrollToBottom() {
-    if (this.logContainer) {
-      this.logContainer.scrollTop = this.logContainer.scrollHeight;
-    }
+    this.terminal?.scrollToBottom();
   }
-  addLog(level, message2, source) {
-    const newEntry = {
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      level,
-      message: message2,
-      source
+  // =====================
+  // Metrics Methods
+  // =====================
+  updateMetrics(level) {
+    this.metrics = {
+      ...this.metrics,
+      [level]: this.metrics[level] + 1,
+      total: this.metrics.total + 1
     };
-    this.updateLog([newEntry]);
+    this.recordLogEvent();
+  }
+  recordLogEvent() {
+    this.rateBuffer.push(Date.now());
+  }
+  calculateRate() {
+    const now2 = Date.now();
+    this.rateBuffer = this.rateBuffer.filter((t9) => now2 - t9 < 1e4);
+    const rate = this.rateBuffer.length / 10;
+    if (rate !== this.metrics.rate) {
+      this.metrics = { ...this.metrics, rate };
+    }
+  }
+  resetMetrics() {
+    this.metrics = { debug: 0, info: 0, warn: 0, error: 0, success: 0, total: 0, rate: 0 };
+    this.rateBuffer = [];
+  }
+  // =====================
+  // Lifecycle
+  // =====================
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+    }
+    if (this.rateInterval) {
+      clearInterval(this.rateInterval);
+    }
+    if (this.terminal) {
+      this.terminal.dispose();
+    }
   }
 };
 _init47 = __decoratorStart(_a45);
 _label6 = new WeakMap();
+_mode = new WeakMap();
 _logEntries = new WeakMap();
 _autoScroll = new WeakMap();
 _maxEntries = new WeakMap();
+_highlightKeywords = new WeakMap();
+_showMetrics = new WeakMap();
+_searchQuery2 = new WeakMap();
+_filterMode = new WeakMap();
+_metrics = new WeakMap();
+_terminalReady = new WeakMap();
 __decorateElement(_init47, 4, "label", _label_dec6, DeesChartLog, _label6);
+__decorateElement(_init47, 4, "mode", _mode_dec, DeesChartLog, _mode);
 __decorateElement(_init47, 4, "logEntries", _logEntries_dec, DeesChartLog, _logEntries);
 __decorateElement(_init47, 4, "autoScroll", _autoScroll_dec, DeesChartLog, _autoScroll);
 __decorateElement(_init47, 4, "maxEntries", _maxEntries_dec, DeesChartLog, _maxEntries);
+__decorateElement(_init47, 4, "highlightKeywords", _highlightKeywords_dec, DeesChartLog, _highlightKeywords);
+__decorateElement(_init47, 4, "showMetrics", _showMetrics_dec, DeesChartLog, _showMetrics);
+__decorateElement(_init47, 4, "searchQuery", _searchQuery_dec2, DeesChartLog, _searchQuery2);
+__decorateElement(_init47, 4, "filterMode", _filterMode_dec, DeesChartLog, _filterMode);
+__decorateElement(_init47, 4, "metrics", _metrics_dec, DeesChartLog, _metrics);
+__decorateElement(_init47, 4, "terminalReady", _terminalReady_dec, DeesChartLog, _terminalReady);
 DeesChartLog = __decorateElement(_init47, 0, "DeesChartLog", _DeesChartLog_decorators, DeesChartLog);
 __publicField(DeesChartLog, "demo", demoFunc33);
 __publicField(DeesChartLog, "demoGroup", "Chart");
@@ -135307,13 +136398,12 @@ __publicField(DeesChartLog, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         color: ${cssManager.bdTheme("hsl(0 0% 3.9%)", "hsl(0 0% 98%)")};
-        font-size: 12px;
-        line-height: 1.5;
       }
+
       .mainbox {
         position: relative;
         width: 100%;
@@ -135328,143 +136418,197 @@ __publicField(DeesChartLog, "styles", [
 
       .header {
         background: ${cssManager.bdTheme("hsl(0 0% 97%)", "hsl(0 0% 7%)")};
-        padding: 12px 16px;
+        padding: 8px 12px;
         border-bottom: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        gap: 12px;
         flex-shrink: 0;
+        flex-wrap: wrap;
       }
 
       .title {
         font-weight: 500;
         font-size: 14px;
         color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        white-space: nowrap;
       }
 
-      .controls {
+      .search-box {
         display: flex;
-        gap: 8px;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        min-width: 150px;
+        max-width: 300px;
       }
 
-      .control-button {
-        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
-        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
-        border-radius: 6px;
-        padding: 6px 12px;
-        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        cursor: pointer;
+      .search-box input {
+        flex: 1;
+        padding: 4px 8px;
         font-size: 12px;
-        font-weight: 500;
-        transition: all 0.15s;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      }
-
-      .control-button:hover {
-        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 14.9%)")};
-        border-color: ${cssManager.bdTheme("hsl(0 0% 79.8%)", "hsl(0 0% 20.9%)")};
-        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 4px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 9%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
+        outline: none;
       }
 
-      .control-button.active {
-        background: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 93.9%)")};
-        color: ${cssManager.bdTheme("hsl(0 0% 98%)", "hsl(0 0% 3.9%)")};
+      .search-box input:focus {
+        border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
       }
 
-      .logContainer {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 16px;
-        font-size: 12px;
+      .search-box input::placeholder {
+        color: ${cssManager.bdTheme("hsl(0 0% 63.9%)", "hsl(0 0% 45.1%)")};
       }
 
-      .logEntry {
-        margin-bottom: 4px;
+      .search-nav {
         display: flex;
-        white-space: pre-wrap;
-        word-break: break-all;
-        font-variant-numeric: tabular-nums;
+        gap: 2px;
       }
 
-      .timestamp {
-        color: ${cssManager.bdTheme("hsl(0 0% 63.9%)", "hsl(0 0% 45.1%)")};
-        margin-right: 12px;
-        flex-shrink: 0;
+      .search-nav button {
+        padding: 4px 6px;
+        font-size: 11px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 3px;
+        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+        cursor: pointer;
+        line-height: 1;
       }
 
-      .level {
-        margin-right: 8px;
-        padding: 0 6px;
-        border-radius: 3px;
-        font-weight: 600;
-        text-transform: uppercase;
-        font-size: 10px;
-        flex-shrink: 0;
+      .search-nav button:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 20%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
 
-      .level.debug {
+      .filter-toggle {
+        padding: 4px 8px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 4px;
         color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        background: ${cssManager.bdTheme("hsl(0 0% 45.1% / 0.1)", "hsl(0 0% 63.9% / 0.1)")};
+        cursor: pointer;
+        transition: all 0.15s;
+        white-space: nowrap;
       }
 
-      .level.info {
-        color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
-        background: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)", "hsl(217.2 91.2% 59.8% / 0.1)")};
+      .filter-toggle:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 20%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
 
-      .level.warn {
-        color: ${cssManager.bdTheme("hsl(25 95% 53%)", "hsl(25 95% 63%)")};
-        background: ${cssManager.bdTheme("hsl(25 95% 53% / 0.1)", "hsl(25 95% 63% / 0.1)")};
+      .filter-toggle.active {
+        background: ${cssManager.bdTheme("hsl(45 93% 47%)", "hsl(45 93% 47%)")};
+        border-color: ${cssManager.bdTheme("hsl(45 93% 47%)", "hsl(45 93% 47%)")};
+        color: hsl(0 0% 9%);
       }
 
-      .level.error {
-        color: ${cssManager.bdTheme("hsl(0 84.2% 60.2%)", "hsl(0 72.2% 50.6%)")};
-        background: ${cssManager.bdTheme("hsl(0 84.2% 60.2% / 0.1)", "hsl(0 72.2% 50.6% / 0.1)")};
+      .controls {
+        display: flex;
+        gap: 6px;
+        margin-left: auto;
       }
 
-      .level.success {
-        color: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3%)", "hsl(142.1 70.6% 45.3%)")};
-        background: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3% / 0.1)", "hsl(142.1 70.6% 45.3% / 0.1)")};
+      .control-button {
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 4px;
+        padding: 4px 10px;
+        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        transition: all 0.15s;
       }
 
-      .source {
-        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        margin-right: 8px;
-        flex-shrink: 0;
+      .control-button:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 20%)")};
+        border-color: ${cssManager.bdTheme("hsl(0 0% 79.8%)", "hsl(0 0% 25%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
 
-      .message {
-        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
+      .control-button.active {
+        background: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
+        border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
+        color: white;
+      }
+
+      .terminal-container {
         flex: 1;
+        overflow: hidden;
+        padding: 8px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 3.9%)")};
       }
 
-      .empty-state {
+      .terminal-container .xterm {
+        height: 100%;
+      }
+
+      .loading-state {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
         font-style: italic;
+        font-size: 13px;
+      }
+
+      .metrics-bar {
+        background: ${cssManager.bdTheme("hsl(0 0% 97%)", "hsl(0 0% 7%)")};
+        border-top: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        padding: 6px 12px;
+        display: flex;
+        gap: 16px;
+        font-size: 11px;
+        font-weight: 500;
+        flex-shrink: 0;
       }
 
-      /* Custom scrollbar */
-      .logContainer::-webkit-scrollbar {
+      .metric {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .metric::before {
+        content: '';
         width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+
+      .metric.error::before {
+        background: hsl(0 84.2% 60.2%);
       }
 
-      .logContainer::-webkit-scrollbar-track {
-        background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 10%)")};
+      .metric.warn::before {
+        background: hsl(25 95% 53%);
       }
 
-      .logContainer::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme("hsl(0 0% 70%)", "hsl(0 0% 30%)")};
-        border-radius: 4px;
+      .metric.info::before {
+        background: hsl(222.2 47.4% 51.2%);
       }
 
-      .logContainer::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme("hsl(0 0% 60%)", "hsl(0 0% 40%)")};
+      .metric.success::before {
+        background: hsl(142.1 76.2% 36.3%);
+      }
+
+      .metric.debug::before {
+        background: hsl(0 0% 63.9%);
+      }
+
+      .metric.rate {
+        margin-left: auto;
+        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+      }
+
+      .metric.rate::before {
+        display: none;
       }
     `
 ]);
@@ -159358,9 +160502,9 @@ var openWidgetContextMenu = ({
 // ts_web/elements/dees-dashboardgrid/dees-dashboardgrid.ts
 init_dist_ts26();
 init_dees_icon();
-var _previewWidgets_dec, _resolvedMargins_dec, _metrics_dec, _placeholderPosition_dec, _activeBreakpoint_dec, _layouts_dec, _showGridLines_dec, _rtl_dec, _cellHeightUnit_dec, _enableAnimation_dec, _editable_dec, _columns_dec2, _margin_dec, _cellHeight_dec, _widgets_dec2, _a75, _DeesDashboardgrid_decorators, _init78, _widgets2, _cellHeight, _margin, _columns2, _editable, _enableAnimation, _cellHeightUnit, _rtl, _showGridLines, _layouts, _activeBreakpoint, _placeholderPosition, _metrics, _resolvedMargins, _previewWidgets;
+var _previewWidgets_dec, _resolvedMargins_dec, _metrics_dec2, _placeholderPosition_dec, _activeBreakpoint_dec, _layouts_dec, _showGridLines_dec, _rtl_dec, _cellHeightUnit_dec, _enableAnimation_dec, _editable_dec, _columns_dec2, _margin_dec, _cellHeight_dec, _widgets_dec2, _a75, _DeesDashboardgrid_decorators, _init78, _widgets2, _cellHeight, _margin, _columns2, _editable, _enableAnimation, _cellHeightUnit, _rtl, _showGridLines, _layouts, _activeBreakpoint, _placeholderPosition, _metrics2, _resolvedMargins, _previewWidgets;
 _DeesDashboardgrid_decorators = [t4("dees-dashboardgrid")];
-var DeesDashboardgrid = class extends (_a75 = DeesElement, _widgets_dec2 = [n5({ type: Array })], _cellHeight_dec = [n5({ type: Number })], _margin_dec = [n5({ type: Object })], _columns_dec2 = [n5({ type: Number })], _editable_dec = [n5({ type: Boolean })], _enableAnimation_dec = [n5({ type: Boolean, reflect: true })], _cellHeightUnit_dec = [n5({ type: String })], _rtl_dec = [n5({ type: Boolean })], _showGridLines_dec = [n5({ type: Boolean })], _layouts_dec = [n5({ attribute: false })], _activeBreakpoint_dec = [n5({ type: String })], _placeholderPosition_dec = [r5()], _metrics_dec = [r5()], _resolvedMargins_dec = [r5()], _previewWidgets_dec = [r5()], _a75) {
+var DeesDashboardgrid = class extends (_a75 = DeesElement, _widgets_dec2 = [n5({ type: Array })], _cellHeight_dec = [n5({ type: Number })], _margin_dec = [n5({ type: Object })], _columns_dec2 = [n5({ type: Number })], _editable_dec = [n5({ type: Boolean })], _enableAnimation_dec = [n5({ type: Boolean, reflect: true })], _cellHeightUnit_dec = [n5({ type: String })], _rtl_dec = [n5({ type: Boolean })], _showGridLines_dec = [n5({ type: Boolean })], _layouts_dec = [n5({ attribute: false })], _activeBreakpoint_dec = [n5({ type: String })], _placeholderPosition_dec = [r5()], _metrics_dec2 = [r5()], _resolvedMargins_dec = [r5()], _previewWidgets_dec = [r5()], _a75) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _widgets2, __runInitializers(_init78, 8, this, [])), __runInitializers(_init78, 11, this);
@@ -159375,7 +160519,7 @@ var DeesDashboardgrid = class extends (_a75 = DeesElement, _widgets_dec2 = [n5({
     __privateAdd(this, _layouts, __runInitializers(_init78, 44, this)), __runInitializers(_init78, 47, this);
     __privateAdd(this, _activeBreakpoint, __runInitializers(_init78, 48, this, "base")), __runInitializers(_init78, 51, this);
     __privateAdd(this, _placeholderPosition, __runInitializers(_init78, 52, this, null)), __runInitializers(_init78, 55, this);
-    __privateAdd(this, _metrics, __runInitializers(_init78, 56, this, null)), __runInitializers(_init78, 59, this);
+    __privateAdd(this, _metrics2, __runInitializers(_init78, 56, this, null)), __runInitializers(_init78, 59, this);
     __privateAdd(this, _resolvedMargins, __runInitializers(_init78, 60, this, null)), __runInitializers(_init78, 63, this);
     __privateAdd(this, _previewWidgets, __runInitializers(_init78, 64, this, null)), __runInitializers(_init78, 67, this);
     __publicField(this, "containerBounds", null);
@@ -159952,7 +161096,7 @@ _showGridLines = new WeakMap();
 _layouts = new WeakMap();
 _activeBreakpoint = new WeakMap();
 _placeholderPosition = new WeakMap();
-_metrics = new WeakMap();
+_metrics2 = new WeakMap();
 _resolvedMargins = new WeakMap();
 _previewWidgets = new WeakMap();
 __decorateElement(_init78, 4, "widgets", _widgets_dec2, DeesDashboardgrid, _widgets2);
@@ -159967,7 +161111,7 @@ __decorateElement(_init78, 4, "showGridLines", _showGridLines_dec, DeesDashboard
 __decorateElement(_init78, 4, "layouts", _layouts_dec, DeesDashboardgrid, _layouts);
 __decorateElement(_init78, 4, "activeBreakpoint", _activeBreakpoint_dec, DeesDashboardgrid, _activeBreakpoint);
 __decorateElement(_init78, 4, "placeholderPosition", _placeholderPosition_dec, DeesDashboardgrid, _placeholderPosition);
-__decorateElement(_init78, 4, "metrics", _metrics_dec, DeesDashboardgrid, _metrics);
+__decorateElement(_init78, 4, "metrics", _metrics_dec2, DeesDashboardgrid, _metrics2);
 __decorateElement(_init78, 4, "resolvedMargins", _resolvedMargins_dec, DeesDashboardgrid, _resolvedMargins);
 __decorateElement(_init78, 4, "previewWidgets", _previewWidgets_dec, DeesDashboardgrid, _previewWidgets);
 DeesDashboardgrid = __decorateElement(_init78, 0, "DeesDashboardgrid", _DeesDashboardgrid_decorators, DeesDashboardgrid);