@design.estate/dees-catalog 3.51.1 → 3.51.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.51.1",
+  "version": "3.51.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.51.1',
+  version: '3.51.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -13,6 +13,7 @@ import { renderChartArea } from './template.js';
 
 import type { IChartApi, ISeriesApi, UTCTimestamp, MouseEventParams } from 'lightweight-charts';
 import { DeesServiceLibLoader, type ILightweightChartsBundle } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 export type ChartSeriesConfig = {
   name?: string;

package/ts_web/elements/00group-chart/dees-chart-area/styles.ts

@@ -4,52 +4,27 @@ export const chartAreaStyles = [
     cssManager.defaultStyles,
     css`
       :host {
+        display: block;
+        height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         font-size: 14px;
       }
-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
-      }
-      .chartTitle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        text-align: left;
-        padding: 16px 24px;
-        z-index: 10;
-        font-size: 14px;
-        font-weight: 500;
-        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      dees-tile {
+        height: 100%;
       }
       .chartContainer {
         position: absolute;
-        top: 44px;
-        left: 0;
-        bottom: 32px;
-        right: 0;
+        inset: 0;
       }
       .statsBar {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
         height: 32px;
+        padding: 0 16px;
         display: flex;
         align-items: center;
         gap: 24px;
-        padding: 0 16px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        width: 100%;
+        box-sizing: border-box;
       }
       .statsSeries {
         display: flex;
@@ -68,9 +43,14 @@ export const chartAreaStyles = [
       }
       .statsName {
         font-weight: 500;
+        font-size: 11px;
         color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
         margin-right: 4px;
       }
+      .statsItem {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+      }
       .statsItem strong {
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }

package/ts_web/elements/00group-chart/dees-chart-area/template.ts

@@ -3,11 +3,10 @@ import type { DeesChartArea } from './component.js';
 
 export const renderChartArea = (component: DeesChartArea): TemplateResult => {
       return html`
-        <div class="mainbox">
-          <div class="chartTitle">${component.label}</div>
+        <dees-tile .heading=${component.label}>
           <div class="chartContainer"></div>
           ${component.seriesStats.length > 0 ? html`
-            <div class="statsBar">
+            <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html`
                 <div class="statsSeries">
                   <span class="statsColor" style="background:${s.color}"></span>
@@ -20,6 +19,6 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
               `)}
             </div>
           ` : ''}
-        </div>
+        </dees-tile>
       `;
 };

package/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts

@@ -13,6 +13,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-chart-log.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader, type IXtermSearchAddon, CDN_BASE, CDN_VERSIONS } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 // Type imports (no runtime overhead)
 import type { Terminal } from 'xterm';
@@ -103,30 +104,20 @@ export class DeesChartLog extends DeesElement {
     css`
       :host {
         display: block;
+        height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
       }
 
-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+      dees-tile {
+        height: 100%;
       }
 
       .header {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
         padding: 8px 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         display: flex;
         align-items: center;
         gap: 12px;
-        flex-shrink: 0;
         flex-wrap: wrap;
       }
 
@@ -241,10 +232,10 @@ export class DeesChartLog extends DeesElement {
       }
 
       .terminal-container {
-        flex: 1;
+        position: absolute;
+        inset: 0;
         overflow: hidden;
         padding: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
       }
 
       .terminal-container .xterm {
@@ -262,14 +253,15 @@ export class DeesChartLog extends DeesElement {
       }
 
       .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;
+        height: 32px;
+        padding: 0 12px;
         display: flex;
+        align-items: center;
         gap: 16px;
         font-size: 11px;
         font-weight: 500;
-        flex-shrink: 0;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .metric {
@@ -323,8 +315,8 @@ export class DeesChartLog extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="mainbox">
-        <div class="header">
+      <dees-tile .heading=${this.label}>
+        <div slot="header" class="header">
           <div class="title">${this.label}</div>
           <div class="search-box">
             <input
@@ -367,7 +359,7 @@ export class DeesChartLog extends DeesElement {
 
         ${this.showMetrics
           ? html`
-              <div class="metrics-bar">
+              <div slot="footer" 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>
@@ -377,7 +369,7 @@ export class DeesChartLog extends DeesElement {
               </div>
             `
           : ''}
-      </div>
+      </dees-tile>
     `;
   }
 

package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -17,6 +17,7 @@ import * as smartstring from '@push.rocks/smartstring';
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -55,32 +56,20 @@ export class DeesDataviewCodebox extends DeesElement {
           height: 100%;
           box-sizing: border-box;
         }
-        .mainbox {
-          position: relative;
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-          border-radius: 6px;
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
+        dees-tile {
           height: 100%;
-          box-sizing: border-box;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
 
         .appbar {
-          position: relative;
           color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           height: 32px;
           display: flex;
           font-size: 13px;
           line-height: 32px;
           justify-content: center;
           align-items: center;
-          flex-shrink: 0;
+          padding: 0 16px;
         }
 
         .appbar .fileName {
@@ -91,18 +80,16 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          position: relative;
           color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           height: 28px;
-          font-size: 12px;
+          font-size: 11px;
           line-height: 28px;
           display: flex;
           justify-content: flex-end;
-          align-items: stretch;
-          overflow: hidden;
-          flex-shrink: 0;
+          align-items: center;
+          padding: 0 16px;
+          width: 100%;
+          box-sizing: border-box;
         }
 
         .spacesLabel {
@@ -201,8 +188,7 @@ export class DeesDataviewCodebox extends DeesElement {
           color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
-      <div
-        class="mainbox"
+      <dees-tile
         @contextmenu="${(eventArg: MouseEvent) => {
           DeesContextmenu.openContextMenuWithOptions(eventArg, [
             {
@@ -215,7 +201,7 @@ export class DeesDataviewCodebox extends DeesElement {
           ]);
         }}"
       >
-        <div class="appbar">
+        <div slot="header" class="appbar">
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">
@@ -230,11 +216,11 @@ export class DeesDataviewCodebox extends DeesElement {
           </div>
           <pre><code></code></pre>
         </div>
-        <div class="bottomBar">
+        <div slot="footer" class="bottomBar">
           <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 

package/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -17,6 +17,7 @@ import {
 import * as tsclass from '@tsclass/tsclass';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -40,35 +41,28 @@ export class DeesDataviewStatusobject extends DeesElement {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
       }
 
-      .mainbox {
-        border-radius: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-        min-height: 48px;
+      dees-tile {
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
         cursor: default;
-        overflow: hidden;
       }
 
       .heading {
-        display: grid;
+        display: flex;
         align-items: center;
-        grid-template-columns: 48px auto 100px;
-        height: 56px;
+        gap: 8px;
+        height: 32px;
         padding: 0 16px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       h1 {
         display: block;
-        margin: 0px;
-        padding: 0px 12px;
+        margin: 0;
+        padding: 0;
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        flex: 1;
       }
 
       .statusdot {
@@ -82,13 +76,13 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .copyMain {
-        font-size: 12px;
+        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%)')};
         text-align: center;
-        padding: 6px 12px;
-        border-radius: 6px;
+        padding: 4px 10px;
+        border-radius: 4px;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         user-select: none;
         cursor: pointer;
@@ -122,63 +116,70 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        min-height: 60px;
+        display: flex;
         align-items: center;
-        display: grid;
-        grid-template-columns: 48px auto;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
-        transition: background-color 0.15s ease;
+        gap: 10px;
+        height: 36px;
         padding: 0 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        transition: background-color 0.15s ease;
         cursor: context-menu;
       }
 
+      .detail:last-child {
+        border-bottom: none;
+      }
+
       .detail:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.06)')};
       }
 
-      .detail:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+      .detail .statusdot {
+        margin: 0;
+        flex-shrink: 0;
       }
 
       .detail .detailsText {
-        padding: 12px;
-        word-break: break-all;
+        display: flex;
+        align-items: baseline;
+        flex: 1;
+        min-width: 0;
       }
 
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        margin-bottom: 2px;
         letter-spacing: -0.01em;
+        white-space: nowrap;
+        flex-shrink: 0;
       }
 
       .detail .detailsText .value {
-        font-size: 14px;
+        font-size: 13px;
         font-family: 'Intel One Mono', 'Geist Mono', monospace;
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-        line-height: 1.5;
+        margin-left: auto;
+        text-align: right;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .bottomBar {
-        position: relative;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        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%)')};
         height: 28px;
-        font-size: 12px;
+        font-size: 11px;
         line-height: 28px;
         display: flex;
         justify-content: flex-end;
-        align-items: stretch;
-        overflow: hidden;
-        flex-shrink: 0;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .bottomBar .statusLabel {
-        padding: 0 16px;
-        display: flex;
-        align-items: center;
         font-weight: 500;
       }
     `,
@@ -186,15 +187,15 @@ export class DeesDataviewStatusobject extends DeesElement {
 
   render(): TemplateResult {
     return html`
-      <div class="mainbox">
-        <div class="heading">
+      <dees-tile>
+        <div slot="header" class="heading">
           <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
           <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
           <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
         </div>
         ${this.statusObject?.details?.map((detailArg) => {
           return html`
-            <div 
+            <div
               class="detail"
               @contextmenu=${(event: MouseEvent) => {
                 event.preventDefault();
@@ -224,19 +225,19 @@ export class DeesDataviewStatusobject extends DeesElement {
               }}
             >
               <div class="statusdot ${detailArg.status}"></div>
-              <div class="detailsText">
-                <div class="label">${detailArg.name}</div>
-                <div class="value">${detailArg.value}</div>
-              </div>
+              <span class="detailsText">
+                <span class="label">${detailArg.name}</span>
+                <span class="value">${detailArg.value}</span>
+              </span>
             </div>
           `;
         })}
-        <div class="bottomBar">
+        <div slot="footer" class="bottomBar">
           <div class="statusLabel">${this.statusObject?.lastUpdated
             ? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
             : ''}</div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 

package/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -18,6 +18,7 @@ import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import '../../00group-button/dees-button/dees-button.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -179,22 +180,12 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
       }
 
-      /* Tile Base Styles */
-      .stats-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: var(--border-radius);
-        padding: var(--tile-padding);
+      /* Tile Base Styles — frame provided by dees-tile, hover via ::part */
+      .stats-tile::part(outer) {
         transition: all var(--transition-duration) ease;
-        cursor: default;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
       }
 
-      .stats-tile:hover {
-        background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
+      .stats-tile:hover::part(outer) {
         border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
       }
 
@@ -202,17 +193,18 @@ export class DeesStatsGrid extends DeesElement {
         cursor: pointer;
       }
 
-      .stats-tile.clickable:hover {
+      .stats-tile.clickable:hover::part(outer) {
         transform: translateY(-1px);
         box-shadow: 0 2px 6px ${cssManager.bdTheme('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.15)')};
       }
 
-      /* Tile Header */
+      /* Tile Header — slotted into dees-tile header */
       .tile-header {
         display: flex;
         justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: var(--header-spacing);
+        align-items: center;
+        padding: 0 12px;
+        height: 28px;
         flex-shrink: 0;
       }
 
@@ -232,12 +224,12 @@ export class DeesStatsGrid extends DeesElement {
         flex-shrink: 0;
       }
 
-      /* Tile Content */
+      /* Tile Content — slotted into dees-tile content area */
       .tile-content {
-        min-height: var(--content-min-height);
         display: flex;
         flex-direction: column;
-        flex: 1;
+        padding: 12px;
+        min-height: var(--content-min-height);
       }
 
       .tile-value {
@@ -261,9 +253,10 @@ export class DeesStatsGrid extends DeesElement {
       .tile-description {
         font-size: var(--label-font-size);
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: var(--description-spacing);
         letter-spacing: -0.01em;
-        flex-shrink: 0;
+        padding: 0 12px;
+        height: 24px;
+        line-height: 24px;
       }
 
       /* Gauge Styles */
@@ -882,27 +875,27 @@ export class DeesStatsGrid extends DeesElement {
     const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
 
     return html`
-      <div
+      <dees-tile
         class="stats-tile ${clickable ? 'clickable' : ''}"
         style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
         @click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
         @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
       >
-        <div class="tile-header">
+        <div slot="header" class="tile-header">
           <h3 class="tile-title">${tile.title}</h3>
           ${tile.icon ? html`
             <dees-icon class="tile-icon" .icon=${tile.icon} size="small"></dees-icon>
           ` : ''}
         </div>
-        
+
         <div class="tile-content">
           ${this.renderTileContent(tile)}
         </div>
-        
+
         ${tile.description && tile.type !== 'trend' ? html`
-          <div class="tile-description">${tile.description}</div>
+          <div slot="footer" class="tile-description">${tile.description}</div>
         ` : ''}
-      </div>
+      </dees-tile>
     `;
   }