feat(dees-tile): unify tile metadata into a consistent bottom info bar and add PDF file-size display

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;

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>
 

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 {