@design.estate/dees-catalog 3.45.1 → 3.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.45.1",
+  "version": "3.46.0",
   "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",
@@ -47,9 +47,9 @@
     "@git.zone/tsbuild": "^4.3.0",
     "@git.zone/tsbundle": "^2.9.1",
     "@git.zone/tstest": "^3.3.2",
-    "@git.zone/tswatch": "^3.2.5",
+    "@git.zone/tswatch": "^3.3.0",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.3.5"
+    "@types/node": "^25.4.0"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.45.1',
+  version: '3.46.0',
   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-media/dees-tile-audio/component.ts

@@ -162,10 +162,6 @@ export class DeesTileAudio extends DeesTileBase {
         ` : ''}
       </div>
 
-      ${this.duration > 0 ? html`
-        <div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
-      ` : ''}
-
       <div class="play-overlay">
         <div class="play-circle">
           <dees-icon icon="lucide:Play"></dees-icon>
@@ -181,6 +177,17 @@ export class DeesTileAudio extends DeesTileBase {
     `;
   }
 
+  protected renderBottomBar(): TemplateResult | string {
+    if (!this.label && !this.duration) return '';
+    return html`
+      <div class="tile-info-bar">
+        ${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
+        <span class="info-spacer"></span>
+        ${this.duration > 0 ? html`<span class="info-detail">${this.formatTime(this.duration)}</span>` : ''}
+      </div>
+    `;
+  }
+
   protected getTileClickDetail(): Record<string, unknown> {
     return {
       src: this.src,

package/ts_web/elements/00group-media/dees-tile-folder/component.ts

@@ -145,10 +145,6 @@ export class DeesTileFolder extends DeesTileBase {
         </div>
       </div>
 
-      <div class="tile-badge-corner">
-        ${this.items.length} item${this.items.length !== 1 ? 's' : ''}
-      </div>
-
       ${this.clickable ? html`
         <div class="tile-overlay">
           <dees-icon icon="lucide:FolderOpen"></dees-icon>
@@ -158,6 +154,17 @@ export class DeesTileFolder extends DeesTileBase {
     `;
   }
 
+  protected renderBottomBar(): TemplateResult | string {
+    if (!this.label && !this.items.length) return '';
+    return html`
+      <div class="tile-info-bar">
+        ${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
+        <span class="info-spacer"></span>
+        <span class="info-detail">${this.items.length} item${this.items.length !== 1 ? 's' : ''}</span>
+      </div>
+    `;
+  }
+
   protected getTileClickDetail(): Record<string, unknown> {
     return {
       name: this.name,

package/ts_web/elements/00group-media/dees-tile-image/component.ts

@@ -55,14 +55,6 @@ export class DeesTileImage extends DeesTileBase {
         opacity: 0;
       }
 
-      .tile-badge-topright.dimension-badge {
-        opacity: 0;
-        transition: opacity 0.2s ease;
-      }
-
-      .tile-container.clickable:hover .tile-badge-topright.dimension-badge {
-        opacity: 1;
-      }
     `,
   ] as any;
 
@@ -97,19 +89,6 @@ export class DeesTileImage extends DeesTileBase {
         ` : ''}
       </div>
 
-      ${this.imageWidth > 0 && this.imageHeight > 0 ? html`
-        <div class="tile-badge-topright dimension-badge">
-          ${this.imageWidth} × ${this.imageHeight}
-        </div>
-      ` : ''}
-
-      ${this.imageLoaded ? html`
-        <div class="tile-info">
-          <dees-icon icon="lucide:Image"></dees-icon>
-          <span class="tile-info-text">${this.imageWidth} × ${this.imageHeight}</span>
-        </div>
-      ` : ''}
-
       ${this.clickable ? html`
         <div class="tile-overlay">
           <dees-icon icon="lucide:Eye"></dees-icon>
@@ -119,6 +98,19 @@ export class DeesTileImage extends DeesTileBase {
     `;
   }
 
+  protected renderBottomBar(): TemplateResult | string {
+    if (!this.label && !(this.imageWidth > 0)) return '';
+    return html`
+      <div class="tile-info-bar">
+        ${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
+        <span class="info-spacer"></span>
+        ${this.imageWidth > 0 && this.imageHeight > 0
+          ? html`<span class="info-detail">${this.imageWidth} × ${this.imageHeight}</span>`
+          : ''}
+      </div>
+    `;
+  }
+
   protected getTileClickDetail(): Record<string, unknown> {
     return {
       src: this.src,

package/ts_web/elements/00group-media/dees-tile-note/component.ts

@@ -81,14 +81,6 @@ export class DeesTileNote extends DeesTileBase {
         pointer-events: none;
       }
 
-      .tile-badge-topright.note-language {
-        background: ${cssManager.bdTheme('hsl(215 20% 92%)', 'hsl(215 20% 88%)')};
-        color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 40%)')};
-        font-size: 9px;
-        text-transform: uppercase;
-        z-index: 5;
-      }
-
       .note-lines {
         position: absolute;
         top: 0;
@@ -132,10 +124,6 @@ export class DeesTileNote extends DeesTileBase {
 
     return html`
       <div class="note-content">
-        ${this.language ? html`
-          <div class="tile-badge-topright note-language">${this.language}</div>
-        ` : ''}
-
         ${this.title ? html`
           <div class="note-header">
             <div class="note-title">${this.title}</div>
@@ -147,11 +135,6 @@ export class DeesTileNote extends DeesTileBase {
           ${!this.isHovering ? html`<div class="note-fade"></div>` : ''}
         </div>
 
-        ${this.isHovering && lines.length > 12 ? html`
-          <div class="tile-badge-corner">
-            Line ${this.getVisibleLineRange(lines.length)}
-          </div>
-        ` : ''}
       </div>
 
       ${this.clickable ? html`
@@ -163,6 +146,21 @@ export class DeesTileNote extends DeesTileBase {
     `;
   }
 
+  protected renderBottomBar(): TemplateResult | string {
+    const lines = this.content.split('\n');
+    if (!this.label && !this.language && !lines.length) return '';
+    return html`
+      <div class="tile-info-bar">
+        ${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
+        <span class="info-spacer"></span>
+        ${this.language ? html`<span class="info-detail">${this.language.toUpperCase()}</span>` : ''}
+        ${this.isHovering && lines.length > 12
+          ? html`<span class="info-detail">Line ${this.getVisibleLineRange(lines.length)}</span>`
+          : html`<span class="info-detail">${lines.length} lines</span>`}
+      </div>
+    `;
+  }
+
   protected getTileClickDetail(): Record<string, unknown> {
     return {
       title: this.title,

package/ts_web/elements/00group-media/dees-tile-pdf/component.ts

@@ -1,9 +1,9 @@
-import { property, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
+import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
 import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
 import { tileBaseStyles } from '../dees-tile-shared/styles.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
-import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
+import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
 import { tilePdfStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
 
@@ -37,6 +37,9 @@ export class DeesTilePdf extends DeesTileBase {
   @property({ type: Boolean })
   accessor isA4Format: boolean = true;
 
+  @state()
+  accessor fileSize: number = 0;
+
   private renderPagesTask: Promise<void> | null = null;
   private renderPagesQueued: boolean = false;
   private pdfDocument: any;
@@ -54,18 +57,6 @@ export class DeesTilePdf extends DeesTileBase {
         ></canvas>
       </div>
 
-      ${this.pageCount > 1 && this.isHovering ? html`
-        <div class="tile-badge">
-          Page ${this.currentPreviewPage} of ${this.pageCount}
-        </div>
-      ` : ''}
-
-      ${this.pageCount > 0 && !this.isHovering ? html`
-        <div class="tile-badge-corner">
-          ${this.pageCount} page${this.pageCount > 1 ? 's' : ''}
-        </div>
-      ` : ''}
-
       ${this.clickable ? html`
         <div class="tile-overlay">
           <dees-icon icon="lucide:Eye"></dees-icon>
@@ -75,6 +66,22 @@ export class DeesTilePdf extends DeesTileBase {
     `;
   }
 
+  protected renderBottomBar(): TemplateResult | string {
+    if (!this.pageCount && !this.label) return '';
+    return html`
+      <div class="tile-info-bar">
+        ${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
+        <span class="info-spacer"></span>
+        ${this.pageCount > 1 && this.isHovering
+          ? html`<span class="info-detail">${this.currentPreviewPage}/${this.pageCount}</span>`
+          : this.pageCount > 0
+            ? html`<span class="info-detail">${this.pageCount} pg</span>`
+            : ''}
+        ${this.fileSize > 0 ? html`<span class="info-detail">${formatFileSize(this.fileSize)}</span>` : ''}
+      </div>
+    `;
+  }
+
   protected getTileClickDetail(): Record<string, unknown> {
     return {
       pdfUrl: this.pdfUrl,
@@ -141,6 +148,13 @@ export class DeesTilePdf extends DeesTileBase {
       this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
       this.pageCount = this.pdfDocument.numPages;
       this.currentPreviewPage = 1;
+
+      try {
+        const downloadInfo = await this.pdfDocument.getDownloadInfo();
+        this.fileSize = downloadInfo.length;
+      } catch {
+        // File size unavailable — not critical
+      }
       this.loadedPdfUrl = this.pdfUrl;
 
       this.loading = false;

package/ts_web/elements/00group-media/dees-tile-pdf/demo.ts

@@ -1,4 +1,4 @@
-import { html } from '@design.estate/dees-element';
+import { html, cssManager } from '@design.estate/dees-element';
 
 export const demo = () => {
   const samplePdfs = [
@@ -29,7 +29,7 @@ export const demo = () => {
     <style>
       .demo-container {
         padding: 40px;
-        background: #f5f5f5;
+        background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
       }
 
       .demo-section {
@@ -40,6 +40,7 @@ export const demo = () => {
         margin-bottom: 20px;
         font-size: 18px;
         font-weight: 600;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .preview-grid {
@@ -59,6 +60,7 @@ export const demo = () => {
         font-size: 14px;
         font-weight: 500;
         min-width: 100px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
     </style>
 

package/ts_web/elements/00group-media/dees-tile-pdf/styles.ts

@@ -10,10 +10,11 @@ export const tilePdfStyles = css`
     justify-content: center;
     box-sizing: border-box;
     overflow: hidden;
+    padding: 8px 8px 28px 8px;
   }
 
   .preview-stack.non-a4 {
-    padding: 12px;
+    padding: 12px 12px 28px 12px;
   }
 
   .preview-canvas {

package/ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts

@@ -59,9 +59,7 @@ export abstract class DeesTileBase extends DeesElement {
 
         ${!this.loading && !this.error ? this.renderTileContent() : ''}
 
-        ${this.label ? html`
-          <div class="tile-label">${this.label}</div>
-        ` : ''}
+        ${this.renderBottomBar()}
       </div>
     `;
   }
@@ -69,6 +67,11 @@ export abstract class DeesTileBase extends DeesElement {
   /** Subclasses implement this to render their specific content */
   protected abstract renderTileContent(): TemplateResult;
 
+  /** Subclasses override this to render a bottom info bar with metadata */
+  protected renderBottomBar(): TemplateResult | string {
+    return '';
+  }
+
   public async connectedCallback(): Promise<void> {
     await super.connectedCallback();
     this.setupIntersectionObserver();

package/ts_web/elements/00group-media/dees-tile-shared/styles.ts

@@ -15,8 +15,9 @@ export const tileBaseStyles = [
       background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
       border-radius: 4px;
       overflow: hidden;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      transition: box-shadow 0.2s ease;
       box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
+
     }
 
     .tile-container.clickable {
@@ -24,7 +25,6 @@ export const tileBaseStyles = [
     }
 
     .tile-container.clickable:hover {
-      transform: translateY(-2px);
       box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
     }
 
@@ -71,90 +71,39 @@ export const tileBaseStyles = [
       color: white;
     }
 
-    .tile-info {
+    .tile-info-bar {
       position: absolute;
-      bottom: 8px;
-      left: 8px;
-      right: 8px;
-      padding: 6px 10px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.92)', 'hsl(215 20% 12% / 0.92)')};
-      border-radius: 6px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 4px 8px;
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.95)', 'hsl(215 20% 12% / 0.95)')};
       display: flex;
       align-items: center;
       gap: 6px;
-      font-size: 12px;
-      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
-      backdrop-filter: blur(12px);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      z-index: 10;
-    }
-
-    .tile-info dees-icon {
-      font-size: 13px;
-      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
-    }
-
-    .tile-info-text {
+      font-size: 10px;
       font-weight: 500;
-      font-size: 11px;
-    }
-
-    .tile-badge {
-      position: absolute;
-      top: 8px;
-      left: 8px;
-      right: 8px;
-      padding: 5px 8px;
-      background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
-      color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 600;
-      text-align: center;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
       backdrop-filter: blur(12px);
-      z-index: 15;
-      pointer-events: none;
-      animation: fadeIn 0.2s ease;
-    }
-
-    .tile-badge-corner {
-      position: absolute;
-      bottom: 8px;
-      right: 8px;
-      padding: 3px 8px;
-      background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
-      color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
-      border-radius: 4px;
-      font-size: 10px;
-      font-weight: 600;
+      z-index: 25;
       font-variant-numeric: tabular-nums;
-      backdrop-filter: blur(8px);
-      z-index: 10;
-      pointer-events: none;
     }
 
-    .tile-badge-topright {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      padding: 3px 8px;
-      background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
-      color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
-      border-radius: 4px;
-      font-size: 10px;
-      font-weight: 600;
-      backdrop-filter: blur(8px);
-      z-index: 15;
-      pointer-events: none;
+    .info-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
     }
 
-    /* Shift bottom badges up when label is present */
-    .tile-container:has(.tile-label) .tile-badge-corner {
-      bottom: 33px;
+    .info-spacer {
+      flex: 1;
     }
 
-    .tile-container:has(.tile-label) .tile-info {
-      bottom: 33px;
+    .info-detail {
+      white-space: nowrap;
+      opacity: 0.7;
+      flex-shrink: 0;
     }
 
     .tile-loading,
@@ -200,40 +149,12 @@ export const tileBaseStyles = [
       font-weight: 500;
     }
 
-    .tile-label {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 6px 10px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.95)', 'hsl(215 20% 12% / 0.95)')};
-      font-size: 11px;
-      font-weight: 500;
-      color: ${cssManager.bdTheme('hsl(215 16% 35%)', 'hsl(215 16% 75%)')};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      z-index: 10;
-      backdrop-filter: blur(12px);
-    }
-
     @keyframes spin {
       to {
         transform: rotate(360deg);
       }
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
     /* Size variants */
     :host([size="small"]) .tile-container {
       width: 150px;

package/ts_web/elements/00group-media/dees-tile-video/component.ts

@@ -140,10 +140,6 @@ export class DeesTileVideo extends DeesTileBase {
         ` : ''}
       </div>
 
-      ${this.duration > 0 ? html`
-        <div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
-      ` : ''}
-
       ${!this.isHovering ? html`
         <div class="play-overlay">
           <dees-icon icon="lucide:Play"></dees-icon>
@@ -159,6 +155,17 @@ export class DeesTileVideo extends DeesTileBase {
     `;
   }
 
+  protected renderBottomBar(): TemplateResult | string {
+    if (!this.label && !this.duration) return '';
+    return html`
+      <div class="tile-info-bar">
+        ${this.label ? html`<span class="info-label" title="${this.label}">${this.label}</span>` : ''}
+        <span class="info-spacer"></span>
+        ${this.duration > 0 ? html`<span class="info-detail">${this.formatTime(this.duration)}</span>` : ''}
+      </div>
+    `;
+  }
+
   protected getTileClickDetail(): Record<string, unknown> {
     return {
       src: this.src,