@design.estate/dees-catalog 3.35.0 → 3.36.0

package/ts_web/elements/dees-statsgrid/dees-statsgrid.ts

@@ -426,6 +426,10 @@ export class DeesStatsGrid extends DeesElement {
         padding: 4px 0;
       }
 
+      .cpu-cores-bars.centered {
+        justify-content: center;
+      }
+
       .cpu-core-bar-container {
         flex: 1;
         min-width: 6px;
@@ -442,14 +446,16 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
         background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
         border-radius: 2px;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
+        position: relative;
         overflow: hidden;
         min-height: 40px;
       }
 
       .cpu-core-bar-fill {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
         width: 100%;
         background: ${cssManager.bdTheme('#666666', '#888888')};
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
@@ -832,6 +838,14 @@ export class DeesStatsGrid extends DeesElement {
       return 'high';
     };
 
+    // Calculate if bars should be centered (when they take up less than 66.6% of available width)
+    // Max bar width = cores * 24px + (cores - 1) * 3px gap
+    const maxBarsWidth = cores.length * 24 + (cores.length - 1) * 3;
+    // Estimate tile content width based on columnSpan and minTileWidth (subtract padding)
+    const columnSpan = tile.columnSpan || 1;
+    const estimatedTileWidth = (this.minTileWidth * columnSpan) + ((columnSpan - 1) * this.gap) - 32; // 32px for padding
+    const shouldCenter = maxBarsWidth < estimatedTileWidth * 0.666;
+
     return html`
       <div class="cpu-cores-wrapper">
         <div class="cpu-cores-header">
@@ -839,7 +853,7 @@ export class DeesStatsGrid extends DeesElement {
           <span class="cpu-cores-unit">%</span>
           <span class="cpu-cores-label">${cores.length} cores</span>
         </div>
-        <div class="cpu-cores-bars">
+        <div class="cpu-cores-bars ${shouldCenter ? 'centered' : ''}">
           ${cores.map(core => {
             const usage = Math.min(100, Math.max(0, core.usage));
             const colorClass = getColorClass(usage);

package/ts_web/services/DeesServiceLibLoader.ts

@@ -25,6 +25,24 @@ export interface IXtermFitAddonBundle {
   FitAddon: typeof FitAddon;
 }
 
+/**
+ * Bundle type for xterm-addon-search
+ * SearchAddon is loaded from CDN, so we use a minimal interface
+ */
+export interface IXtermSearchAddonBundle {
+  SearchAddon: new () => IXtermSearchAddon;
+}
+
+/**
+ * Minimal interface for xterm SearchAddon
+ */
+export interface IXtermSearchAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+  findNext(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+  findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -56,6 +74,7 @@ export class DeesServiceLibLoader {
   // Cached library references
   private xtermLib: IXtermBundle | null = null;
   private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
+  private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
   private apexChartsLib: typeof ApexChartsType | null = null;
   private tiptapLib: ITiptapBundle | null = null;
@@ -63,6 +82,7 @@ export class DeesServiceLibLoader {
   // Loading promises to prevent duplicate concurrent loads
   private xtermLoadingPromise: Promise<IXtermBundle> | null = null;
   private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
+  private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
   private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
@@ -134,6 +154,32 @@ export class DeesServiceLibLoader {
     return this.xtermFitAddonLoadingPromise;
   }
 
+  /**
+   * Load xterm-addon-search from CDN
+   * @returns Promise resolving to SearchAddon class
+   */
+  public async loadXtermSearchAddon(): Promise<IXtermSearchAddonBundle> {
+    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
    */
@@ -257,6 +303,7 @@ export class DeesServiceLibLoader {
     await Promise.all([
       this.loadXterm(),
       this.loadXtermFitAddon(),
+      this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
       this.loadApexCharts(),
       this.loadTiptap(),
@@ -266,12 +313,14 @@ export class DeesServiceLibLoader {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
       case 'xtermFitAddon':
         return this.xtermFitAddonLib !== null;
+      case 'xtermSearchAddon':
+        return this.xtermSearchAddonLib !== null;
       case 'highlightJs':
         return this.highlightJsLib !== null;
       case 'apexCharts':

package/ts_web/services/index.ts

@@ -1,3 +1,3 @@
 export { DeesServiceLibLoader } from './DeesServiceLibLoader.js';
-export type { IXtermBundle, IXtermFitAddonBundle, ITiptapBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';

package/ts_web/services/versions.ts

@@ -5,6 +5,7 @@
 export const 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',