v3.46.0

feat(dees-tile): unify tile metadata into a consistent bottom info bar and add PDF file-size display
v3.45.1
2026-03-10 16:04:28 +00:00 · 2026-03-10 16:04:28 +00:00 · 2026-03-10 14:42:02 +00:00 · 2026-03-10 14:42:02 +00:00 · 2026-03-10 13:56:22 +00:00 · 2026-03-10 13:56:22 +00:00
45 changed files with 3402 additions and 3610 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,115 @@
 # Changelog

+## 2026-03-10 - 3.46.0 - feat(dees-tile)
+unify tile metadata into a consistent bottom info bar and add PDF file-size display
+
+- Introduce renderBottomBar() hook in DeesTileBase and remove per-component bottom badges/labels in favor of a unified info bar.
+- Implement renderBottomBar in audio, video, image, folder, note and pdf tiles to show label, counts, dimensions, duration, language/line info and page counts.
+- PDF tile: add fileSize state, attempt to read download info and display formatted file size in the info bar; show currentPreviewPage/pageCount when hovering.
+- Styling changes: replace legacy badges/labels with .tile-info-bar (.info-label, .info-detail, .info-spacer); adjust padding, font sizing, z-index, and remove hover translate for clickable tiles.
+- PDF demo and styles: use cssManager theming for demo colors and adjust preview padding.
+- Bump devDependencies: @git.zone/tswatch -> ^3.3.0 and @types/node -> ^25.4.0
+
+## 2026-03-10 - 3.45.1 - fix(dees-appui)
+substitute route params into URL hash when navigating
+
+- Replaces :param placeholders in view.route with provided params before updating the URL hash.
+- Ensures window.history.pushState is called with the resolved route so URLs do not contain literal parameter tokens.
+
+## 2026-03-10 - 3.45.0 - feat(dees-form)
+register new input components (tags, list, wysiwyg, richtext) and emit change notification for richtext updates
+
+- Added imports and registration of DeesInputTags, DeesInputList, DeesInputWysiwyg, and DeesInputRichtext in dees-form
+- Extended TFormInputElement union type to include the new input components
+- DeesInputRichtext now calls changeSubject.next(this.value) in the editor onUpdate handler to propagate changes
+
+## 2026-03-10 - 3.44.0 - feat(appui-tabs)
+add support for left/right tab action buttons and content tab action APIs
+
+- Introduce ITabAction interface and add actionsLeft/actionsRight properties to dees-appui-tabs, dees-appui-maincontent, and dees-appui.
+- Render action buttons with new styles and renderActions() helper, including disabled state and click handlers; wire actions into tab components.
+- Add public clear() on dees-appui-tabs and improve tab selection logic to reset selection when tabs become empty or when the selected tab is removed.
+- Expose setContentTabActionsLeft and setContentTabActionsRight on the DeesAppui programmatic API and update interfaces/appconfig accordingly.
+- Update demos to showcase action buttons, add clear-all behavior, and adjust layout/styling for action areas.
+
+## 2026-03-09 - 3.43.4 - fix(media)
+remove deprecated dees-pdf and dees-pdf-preview components and bump several dependencies
+
+- Removed deprecated PDF components and related demos/styles: ts_web/elements/00group-media/dees-pdf/* and ts_web/elements/00group-media/dees-pdf-preview/*
+- Removed exports for dees-pdf and dees-pdf-preview from ts_web/elements/00group-media/index.ts (public API removal)
+- Dependency upgrades: @design.estate/dees-domtools → ^2.3.9, apexcharts → ^5.10.3, lucide → ^0.577.0, @fortawesome/* → ^7.2.0
+- DevDependency upgrades: @git.zone/tsbuild → ^4.3.0, @git.zone/tsbundle → ^2.9.1, @git.zone/tstest → ^3.3.2, @git.zone/tswatch → ^3.2.5, @types/node → ^25.3.5
+- Updated ts_web/services/versions.ts to align CDN/version constants (apexcharts, tiptap → 2.27.2, fontawesome)
+
+## 2026-02-24 - 3.43.3 - fix(dees-table)
+use lucide icon identifier for Search action in dees-table
+
+- Replaced iconName 'magnifyingGlass' with 'lucide:Search' in ts_web/elements/00group-dataview/dees-table/dees-table.ts
+- Updates the icon identifier for the header 'Search' action; no functional behavior changed
+
+## 2026-02-21 - 3.43.2 - fix(dees-chart-log)
+avoid duplicate log entries, optimize incremental updates, enforce maxEntries, and respect filters when writing logs
+
+- Prevent property-bound logEntries from duplicating entries already present in logBuffer by deduplicating on timestamp|message
+- Call updateMetrics() when replaying or appending log entries so metrics stay accurate
+- Skip processing entirely when the incoming logEntries array is unchanged
+- Optimize append-only updates by writing only the new tail entries instead of full re-render
+- Enforce maxEntries when appending to the logBuffer to maintain buffer size
+- Respect filterMode and searchQuery when deciding whether to write appended entries to the terminal
+
+## 2026-02-21 - 3.43.1 - fix(dees-chart-log)
+replay buffered log entries when terminal becomes ready and sync logEntries updates to re-render filtered logs
+
+- Replay entries stored in logBuffer after terminal initialization to avoid losing entries that arrived early
+- Add updated() lifecycle hook to copy logEntries into logBuffer and call reRenderFilteredLogs when terminalReady
+- Call super.updated(changedProperties) to preserve base class behavior
+
+## 2026-02-17 - 3.43.0 - feat(dees-form)
+add layout styles to dees-form and standardize demo input grouping
+
+- Add static CSS to dees-form: default column layout with gap and support for [horizontal-layout] (row wrapping, alignment and gap).
+- Remove inline <style> from dees-form render to centralize styling.
+- Simplify dees-input-base styles by removing host margins and making spacing container-driven.
+- Update multiple demo files to wrap related inputs in a new .input-group container and include .input-group CSS for consistent vertical spacing.
+
+## 2026-02-16 - 3.42.2 - fix(dees-chart-area)
+add ApexAxisChartSeries type to dees-chart-area component to improve typing for ApexCharts series data
+
+- Introduces ApexAxisChartSeries type alias with support for number arrays, [x,y] tuples, and object {x,y,...} series entries
+- Type-only change — no runtime or API behavior modified
+- File changed: ts_web/elements/00group-chart/dees-chart-area/component.ts
+
+## 2026-02-16 - 3.42.1 - fix(dees-table)
+Guard against undefined action.type in dees-table by using optional chaining and update several dependencies
+
+- Use optional chaining (action.type?.includes(...)) in ts_web/elements/.../dees-table.ts to prevent runtime errors when action.type is undefined
+- Bump dependency apexcharts from ^5.3.6 to ^5.5.0
+- Bump dependency lucide from ^0.563.0 to ^0.564.0
+- Bump devDependency @git.zone/tswatch from ^3.0.1 to ^3.1.0
+- Bump devDependency @types/node from ^25.0.10 to ^25.2.3
+
+## 2026-02-02 - 3.42.0 - feat(dees-form-submit)
+forward button properties to internal dees-button, use property bindings, add demo and styles
+
+- Added forwarded properties: type, size, icon, iconPosition (with defaults) and preserved text/status/disabled
+- Changed template to use property bindings (.prop) for dees-button instead of string attributes
+- Switched internal event handler to listen for dees-button's @clicked event (was @click)
+- Added component styles (:host display and dees-button width:100%) and improved layout
+- Expanded demo with multiple usage examples (basic, icons, types, sizes, states, and a form context)
+
+## 2026-02-02 - 3.41.6 - fix(dees-simple-appdash)
+respect selectedView when loading initial view, falling back to the first tab
+
+- firstUpdated now loads this.selectedView if set, otherwise loads the first view tab
+- Prevents always loading the first tab and preserves a previously selected view on initial render
+
+## 2026-02-01 - 3.41.5 - fix(dees-service-lib-loader)
+prevent horizontal scrollbar by offsetting xterm WidthCache measurement container
+
+- Injects additional CSS into DeesServiceLibLoader to move xterm.js WidthCache measurement div off-screen horizontally (selector: body > div[style*="top: -50000px"][style*="width: 50000px"])
+- Fixes root cause where xterm creates a large-width measurement container (width: 50000px) on document.body that expands scrollWidth and causes a horizontal scrollbar
+- Change applied in ts_web/services/DeesServiceLibLoader.ts by concatenating the fix CSS into the injected stylesheet
+
 ## 2026-01-29 - 3.41.4 - fix()
 no changes

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "3.41.4",
+  "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",
@@ -16,13 +16,13 @@
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.8",
+    "@design.estate/dees-domtools": "^2.3.9",
    "@design.estate/dees-element": "^2.1.6",
    "@design.estate/dees-wcctools": "^3.8.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
    "@push.rocks/smarti18n": "^1.0.4",
    "@push.rocks/smartpromise": "^4.2.0",
    "@push.rocks/smartstring": "^4.1.0",
@@ -34,22 +34,22 @@
    "@tiptap/extension-underline": "^2.23.0",
    "@tiptap/starter-kit": "^2.23.0",
    "@tsclass/tsclass": "^9.3.0",
-    "apexcharts": "^5.3.6",
+    "apexcharts": "^5.10.3",
    "highlight.js": "11.11.1",
    "ibantools": "^4.5.1",
-    "lucide": "^0.563.0",
+    "lucide": "^0.577.0",
    "monaco-editor": "0.55.1",
    "pdfjs-dist": "^4.10.38",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
-    "@git.zone/tstest": "^3.1.8",
-    "@git.zone/tswatch": "^3.0.1",
+    "@git.zone/tsbuild": "^4.3.0",
+    "@git.zone/tsbundle": "^2.9.1",
+    "@git.zone/tstest": "^3.3.2",
+    "@git.zone/tswatch": "^3.3.0",
    "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.10"
+    "@types/node": "^25.4.0"
  },
  "files": [
    "ts/**/*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.41.4',
+  version: '3.46.0',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
+++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
@@ -53,6 +53,12 @@ export class DeesAppuiMaincontent extends DeesElement {
  @property({ type: Number })
  accessor tabsAutoHideThreshold: number = 0;

+  @property({ type: Array })
+  accessor tabActionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor tabActionsRight: interfaces.ITabAction[] = [];
+
  public static styles = [
    themeDefaultStyles,
    cssManager.defaultStyles,
@@ -106,6 +112,8 @@ export class DeesAppuiMaincontent extends DeesElement {
            .tabStyle=${'horizontal'}
            .autoHide=${this.tabsAutoHide}
            .autoHideThreshold=${this.tabsAutoHideThreshold}
+            .actionsLeft=${this.tabActionsLeft}
+            .actionsRight=${this.tabActionsRight}
            @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
            @tab-close=${(e: CustomEvent) => this.handleTabClose(e)}
          ></dees-appui-tabs>
--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts
@@ -2,7 +2,7 @@ import { html, cssManager, css, DeesElement, customElement, state } from '@desig
 import * as interfaces from '../../interfaces/index.js';
 import type { DeesAppuiTabs } from './dees-appui-tabs.js';

-// Interactive demo component for closeable tabs
+// Interactive demo component for closeable tabs with action buttons
@customElement('demo-closeable-tabs')
 class DemoCloseableTabs extends DeesElement {
  @state()
@@ -18,24 +18,6 @@ class DemoCloseableTabs extends DeesElement {
      :host {
        display: block;
      }
-      .controls {
-        display: flex;
-        gap: 8px;
-        margin-top: 16px;
-      }
-      button {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-        border: 1px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.3)')};
-        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
-        padding: 8px 16px;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s ease;
-      }
-      button:hover {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
-      }
      .info {
        margin-top: 16px;
        padding: 12px 16px;
@@ -66,17 +48,27 @@ class DemoCloseableTabs extends DeesElement {
    this.tabs = this.tabs.filter(t => t.key !== tabKey);
  }

+  private clearAll() {
+    const tabsEl = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    tabsEl?.clear();
+    this.tabs = [];
+    this.tabCounter = 0;
+  }
+
  render() {
+    const rightActions: interfaces.ITabAction[] = [
+      { id: 'add', iconName: 'lucide:plus', action: () => this.addTab(), tooltip: 'New Tab' },
+      { id: 'clear', iconName: 'lucide:trash2', action: () => this.clearAll(), tooltip: 'Clear All Tabs' },
+    ];
+
    return html`
      <dees-appui-tabs
        .tabs=${this.tabs}
+        .actionsRight=${rightActions}
        @tab-close=${(e: CustomEvent) => this.removeTab(e.detail.tab.key)}
      ></dees-appui-tabs>
-      <div class="controls">
-        <button @click=${() => this.addTab()}>+ Add New Tab</button>
-      </div>
      <div class="info">
-        Click the X button on tabs to close them. The "Main" tab is not closeable.
+        Click the X button on tabs to close them. Use the + button to add tabs and the trash button to clear all.
        <br>Current tabs: ${this.tabs.length}
      </div>
    `;
@@ -232,6 +224,16 @@ export const demoFunc = () => {
    { key: 'Archived', action: () => console.log('Archived clicked') },
  ];

+  const actionsLeft: interfaces.ITabAction[] = [
+    { id: 'back', iconName: 'lucide:arrowLeft', action: () => console.log('Back'), tooltip: 'Go Back' },
+  ];
+
+  const actionsRight: interfaces.ITabAction[] = [
+    { id: 'add', iconName: 'lucide:plus', action: () => console.log('Add tab'), tooltip: 'New Tab' },
+    { id: 'search', iconName: 'lucide:search', action: () => console.log('Search'), tooltip: 'Search Tabs' },
+    { id: 'disabled', iconName: 'lucide:lock', action: () => {}, tooltip: 'Disabled Action', disabled: true },
+  ];
+
  const demoContent = (text: string) => html`
    <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
      ${text}
@@ -279,7 +281,17 @@ export const demoFunc = () => {
      </div>

      <div class="section">
-        <div class="section-title">Closeable Tabs (Browser-style)</div>
+        <div class="section-title">Tabs with Action Buttons</div>
+        <dees-appui-tabs
+          .tabs=${horizontalTabs}
+          .actionsLeft=${actionsLeft}
+          .actionsRight=${actionsRight}
+        ></dees-appui-tabs>
+        ${demoContent('Action buttons can be placed on either side of the tab bar. They remain fixed while tabs scroll. The lock icon shows a disabled action.')}
+      </div>
+
+      <div class="section">
+        <div class="section-title">Closeable Tabs with Actions</div>
        <demo-closeable-tabs></demo-closeable-tabs>
      </div>

--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
@@ -41,6 +41,12 @@ export class DeesAppuiTabs extends DeesElement {
  @property({ type: Number })
  accessor autoHideThreshold: number = 0;

+  @property({ type: Array })
+  accessor actionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor actionsRight: interfaces.ITabAction[] = [];
+
  // Scroll state for fade indicators
  @state()
  private accessor canScrollLeft: boolean = false;
@@ -73,6 +79,8 @@ export class DeesAppuiTabs extends DeesElement {
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        box-sizing: border-box;
        overflow: hidden;
+        display: flex;
+        align-items: stretch;
      }

      /* Scroll fade indicators */
@@ -105,6 +113,72 @@ export class DeesAppuiTabs extends DeesElement {
        opacity: 1;
      }

+      .scroll-area {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        display: flex;
+      }
+
+      /* Tab action buttons */
+      .tab-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        flex-shrink: 0;
+        padding: 0 4px;
+      }
+
+      .tab-actions.left {
+        padding-left: 12px;
+        padding-right: 8px;
+        border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      }
+
+      .tab-actions.right {
+        padding-right: 12px;
+        padding-left: 8px;
+        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      }
+
+      .tab-action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        flex-shrink: 0;
+      }
+
+      .tab-action-button:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .tab-action-button:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+      }
+
+      .tab-action-button.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .tab-action-button.disabled:hover {
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .tab-action-button dees-icon {
+        font-size: 16px;
+      }
+
      .tabsContainer {
        position: relative;
        user-select: none;
@@ -121,12 +195,14 @@ export class DeesAppuiTabs extends DeesElement {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        height: 100%;
+        width: 100%;
        padding: 0 16px;
        gap: 4px;
      }

      /* Show scrollbar on hover */
-      .tabs-wrapper:hover .tabsContainer.horizontal {
+      .tabs-wrapper:hover .tabsContainer.horizontal,
+      .scroll-area:hover .tabsContainer.horizontal {
        scrollbar-color: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')} transparent;
      }

@@ -144,11 +220,13 @@ export class DeesAppuiTabs extends DeesElement {
        transition: background 0.2s ease;
      }

-      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb,
+      .scroll-area:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
        background: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')};
      }

-      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover,
+      .scroll-area:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
        background: ${cssManager.bdTheme('rgba(0,0,0,0.35)', 'rgba(255,255,255,0.35)')};
      }

@@ -331,13 +409,20 @@ export class DeesAppuiTabs extends DeesElement {
    const containerClass = `tabsContainer ${this.tabStyle}`;

    if (isHorizontal) {
+      const hasLeftActions = this.actionsLeft && this.actionsLeft.length > 0;
+      const hasRightActions = this.actionsRight && this.actionsRight.length > 0;
+
      return html`
        <div class="${wrapperClass}">
-          <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
-          <div class="${containerClass}" @scroll=${this.handleScroll}>
-            ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+          ${hasLeftActions ? this.renderActions(this.actionsLeft, 'left') : ''}
+          <div class="scroll-area">
+            <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
+            <div class="${containerClass}" @scroll=${this.handleScroll}>
+              ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+            </div>
+            <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
          </div>
-          <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
+          ${hasRightActions ? this.renderActions(this.actionsRight, 'right') : ''}
          ${this.showTabIndicator ? html`<div class="tabIndicator"></div>` : ''}
        </div>
      `;
@@ -353,6 +438,22 @@ export class DeesAppuiTabs extends DeesElement {
    `;
  }

+  private renderActions(actions: interfaces.ITabAction[], position: 'left' | 'right'): TemplateResult {
+    return html`
+      <div class="tab-actions ${position}">
+        ${actions.map(action => html`
+          <div
+            class="tab-action-button ${action.disabled ? 'disabled' : ''}"
+            title="${action.tooltip || action.id}"
+            @click=${() => !action.disabled && action.action()}
+          >
+            <dees-icon .icon=${action.iconName}></dees-icon>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
  private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
    const isSelected = tab === this.selectedTab;
    const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
@@ -406,6 +507,14 @@ export class DeesAppuiTabs extends DeesElement {
    }));
  }

+  /**
+   * Clear all tabs and reset selection.
+   */
+  public clear(): void {
+    this.tabs = [];
+    this.selectedTab = null;
+  }
+
  private closeTab(e: Event, tab: interfaces.IMenuItem) {
    e.stopPropagation();  // Don't select tab when closing

@@ -423,14 +532,9 @@ export class DeesAppuiTabs extends DeesElement {
  }

  firstUpdated() {
-    if (this.tabs && this.tabs.length > 0) {
-      this.selectTab(this.tabs[0]);
-    }
-
-    // Set up ResizeObserver for scroll state updates
+    // Tab selection is handled by updated() lifecycle
    this.setupResizeObserver();

-    // Initial scroll state check
    requestAnimationFrame(() => {
      this.updateScrollState();
    });
@@ -503,8 +607,24 @@ export class DeesAppuiTabs extends DeesElement {
  async updated(changedProperties: Map<string, any>) {
    super.updated(changedProperties);

-    if (changedProperties.has('tabs') && this.tabs && this.tabs.length > 0 && !this.selectedTab) {
-      this.selectTab(this.tabs[0]);
+    if (changedProperties.has('tabs')) {
+      if (!this.tabs || this.tabs.length === 0) {
+        // Tabs are empty => reset selection
+        if (this.selectedTab !== null) {
+          this.selectedTab = null;
+          this.dispatchEvent(new CustomEvent('tab-select', {
+            detail: { tab: null },
+            bubbles: true,
+            composed: true,
+          }));
+        }
+      } else if (this.selectedTab && !this.tabs.includes(this.selectedTab)) {
+        // Selected tab was removed => select first available
+        this.selectTab(this.tabs[0]);
+      } else if (!this.selectedTab) {
+        // Tabs exist but nothing selected => select first
+        this.selectTab(this.tabs[0]);
+      }
    }

    if (changedProperties.has('selectedTab') || changedProperties.has('tabs')) {
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -143,6 +143,12 @@ export class DeesAppui extends DeesElement {
  @property({ type: Object })
  accessor maincontentSelectedTab: interfaces.IMenuItem | undefined = undefined;

+  @property({ type: Array })
+  accessor contentTabActionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor contentTabActionsRight: interfaces.ITabAction[] = [];
+
  // References to child components
  @state()
  accessor appbar: DeesAppuiBar | undefined = undefined;
@@ -306,6 +312,8 @@ export class DeesAppui extends DeesElement {
          .showTabs=${this.maincontentTabsVisible}
          .tabsAutoHide=${this.contentTabsAutoHide}
          .tabsAutoHideThreshold=${this.contentTabsAutoHideThreshold}
+          .tabActionsLeft=${this.contentTabActionsLeft}
+          .tabActionsRight=${this.contentTabActionsRight}
          @tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
          @tab-close=${(e: CustomEvent) => this.handleContentTabClose(e)}
        >
@@ -699,6 +707,20 @@ export class DeesAppui extends DeesElement {
    return this.maincontentSelectedTab;
  }

+  /**
+   * Set content tab action buttons on the left side
+   */
+  public setContentTabActionsLeft(actions: interfaces.ITabAction[]): void {
+    this.contentTabActionsLeft = [...actions];
+  }
+
+  /**
+   * Set content tab action buttons on the right side
+   */
+  public setContentTabActionsRight(actions: interfaces.ITabAction[]): void {
+    this.contentTabActionsRight = [...actions];
+  }
+
  // ==========================================
  // PROGRAMMATIC API: ACTIVITY LOG
  // ==========================================
@@ -853,8 +875,13 @@ export class DeesAppui extends DeesElement {
    try {
      await this.loadView(view, params);

-      // Update URL hash
-      const route = view.route || viewId;
+      // Update URL hash (substitute params into route pattern)
+      let route = view.route || viewId;
+      if (params) {
+        for (const [key, val] of Object.entries(params)) {
+          route = route.replace(`:${key}`, val);
+        }
+      }
      const newHash = `#${route}`;
      if (window.location.hash !== newHash) {
        window.history.pushState({ viewId }, '', newHash);
--- a/ts_web/elements/00group-chart/dees-chart-area/component.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/component.ts
@@ -12,6 +12,16 @@ import { chartAreaStyles } from './styles.js';
 import { renderChartArea } from './template.js';

 import type ApexCharts from 'apexcharts';
+
+type ApexAxisChartSeries = {
+  name?: string;
+  type?: string;
+  color?: string;
+  group?: string;
+  hidden?: boolean;
+  zIndex?: number;
+  data: (number | null)[] | { x: any; y: any; [key: string]: any }[] | [number, number | null][] | number[][];
+}[];
 import { DeesServiceLibLoader } from '../../../services/index.js';

 declare global {
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
@@ -385,11 +385,23 @@ export class DeesChartLog extends DeesElement {
    this.domtoolsInstance = await this.domtoolsPromise;
    await this.initializeTerminal();

-    // Process any initial log entries
-    if (this.logEntries.length > 0) {
+    // initializeTerminal() already replayed logBuffer (from addLog/updateLog).
+    // Now handle logEntries set via property binding before terminal was ready.
+    if (this.logEntries.length > 0 && this.logBuffer.length === 0) {
+      this.logBuffer = [...this.logEntries];
      for (const entry of this.logEntries) {
+        this.updateMetrics(entry.level);
        this.writeLogEntry(entry);
      }
+    } else if (this.logEntries.length > 0 && this.logBuffer.length > 0) {
+      const bufferSet = new Set(this.logBuffer.map(e => `${e.timestamp}|${e.message}`));
+      for (const entry of this.logEntries) {
+        if (!bufferSet.has(`${entry.timestamp}|${entry.message}`)) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+          this.writeLogEntry(entry);
+        }
+      }
    }
  }

@@ -445,6 +457,58 @@ export class DeesChartLog extends DeesElement {
    this.rateInterval = setInterval(() => this.calculateRate(), 1000);

    this.terminalReady = true;
+
+    // Replay any entries that arrived via updateLog()/addLog() before terminal was ready
+    for (const entry of this.logBuffer) {
+      this.writeLogEntry(entry);
+    }
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
+      const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
+      const newEntries = this.logEntries;
+
+      // Same content? Skip entirely.
+      if (
+        oldEntries.length === newEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[newEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[newEntries.length - 1].message
+      ) {
+        return;
+      }
+
+      // Append-only? Write only the new tail entries incrementally.
+      if (
+        newEntries.length > oldEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[oldEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[oldEntries.length - 1].message
+      ) {
+        const tailEntries = newEntries.slice(oldEntries.length);
+        for (const entry of tailEntries) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+
+          // Enforce maxEntries
+          if (this.logBuffer.length > this.maxEntries) {
+            this.logBuffer.shift();
+          }
+
+          // Respect filter mode
+          if (!this.filterMode || !this.searchQuery || this.entryMatchesFilter(entry)) {
+            this.writeLogEntry(entry);
+          }
+        }
+        return;
+      }
+
+      // Different content — full re-render
+      this.logBuffer = [...newEntries];
+      this.reRenderFilteredLogs();
+    }
  }

  private getTerminalTheme() {
--- a/ts_web/elements/00group-dataview/dees-table/dees-table.ts
+++ b/ts_web/elements/00group-dataview/dees-table/dees-table.ts
@@ -232,7 +232,7 @@ export class DeesTable<T> extends DeesElement {
            ${directives.resolveExec(async () => {
              const resultArray: TemplateResult[] = [];
              for (const action of this.dataActions) {
-                if (!action.type.includes('header')) continue;
+                if (!action.type?.includes('header')) continue;
                resultArray.push(
                  html`<div
                    class="headerAction"
@@ -450,7 +450,7 @@ export class DeesTable<T> extends DeesElement {
                              <td
                                @dblclick=${(e: Event) => {
                                  const dblAction = this.dataActions.find((actionArg) =>
-                                    actionArg.type.includes('doubleClick')
+                                    actionArg.type?.includes('doubleClick')
                                  );
                                  if (this.editableFields.includes(editKey)) {
                                    this.handleCellEditing(e, itemArg, editKey);
@@ -506,7 +506,7 @@ export class DeesTable<T> extends DeesElement {
            ${directives.resolveExec(async () => {
              const resultArray: TemplateResult[] = [];
              for (const action of this.dataActions) {
-                if (!action.type.includes('footer')) continue;
+                if (!action.type?.includes('footer')) continue;
                resultArray.push(
                  html`<div
                    class="footerAction"
@@ -540,11 +540,11 @@ export class DeesTable<T> extends DeesElement {
    super.updated(changedProperties);
    this.determineColumnWidths();
    if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      const existing = this.dataActions.find((actionArg) => actionArg.type?.includes('header') && actionArg.name === 'Search');
      if (!existing) {
        this.dataActions.unshift({
          name: 'Search',
-          iconName: 'magnifyingGlass',
+          iconName: 'lucide:Search',
          type: ['header'],
          actionFunc: async () => {
            console.log('open search');
@@ -623,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
      const width = window.getComputedStyle(cell).width;
      if (cell.textContent.includes('Actions')) {
        const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
+          this.dataActions.filter((actionArg) => actionArg.type?.includes('inRow')).length * 36;
        cell.style.width = `${Math.max(neededWidth, 68)}px`;
      } else {
        cell.style.width = width;
@@ -795,7 +795,7 @@ export class DeesTable<T> extends DeesElement {
  getActionsForType(typeArg: ITableAction['type'][0]) {
    const actions: ITableAction[] = [];
    for (const action of this.dataActions) {
-      if (!action.type.includes(typeArg)) continue;
+      if (!action.type?.includes(typeArg)) continue;
      actions.push(action);
    }
    return actions;
--- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts
+++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.demo.ts
@@ -1,3 +1,85 @@
 import { html } from '@design.estate/dees-element';

-export const demoFunc = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 24px;
+    }
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .demo-section h3 {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: #888;
+    }
+    .demo-row {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  </style>
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Basic Usage</h3>
+      <div class="demo-row">
+        <dees-form-submit>Submit Form</dees-form-submit>
+        <dees-form-submit text="With Text Property"></dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>With Icons (inherited from DeesButton)</h3>
+      <div class="demo-row">
+        <dees-form-submit icon="lucide:send">Submit</dees-form-submit>
+        <dees-form-submit icon="lucide:save" iconPosition="left">Save Form</dees-form-submit>
+        <dees-form-submit icon="lucide:arrow-right" iconPosition="right">Continue</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Button Types</h3>
+      <div class="demo-row">
+        <dees-form-submit type="highlighted" icon="lucide:send">Highlighted</dees-form-submit>
+        <dees-form-submit type="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit type="discreet" icon="lucide:send">Discreet</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Sizes</h3>
+      <div class="demo-row">
+        <dees-form-submit size="small" icon="lucide:send">Small</dees-form-submit>
+        <dees-form-submit size="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit size="large" icon="lucide:send">Large</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>States</h3>
+      <div class="demo-row">
+        <dees-form-submit status="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit status="pending" icon="lucide:send">Pending</dees-form-submit>
+        <dees-form-submit status="success" icon="lucide:check">Success</dees-form-submit>
+        <dees-form-submit status="error" icon="lucide:x">Error</dees-form-submit>
+        <dees-form-submit disabled icon="lucide:send">Disabled</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>In a Form Context</h3>
+      <dees-form>
+        <dees-input-text label="Name" key="name"></dees-input-text>
+        <dees-input-text label="Email" key="email"></dees-input-text>
+        <dees-form-submit icon="lucide:send" type="highlighted">Submit Form</dees-form-submit>
+      </dees-form>
+    </div>
+  </div>
+`;
--- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
+++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
@@ -6,6 +6,7 @@ import {
  css,
  cssManager,
  property,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 import type { DeesForm } from '../dees-form/dees-form.js';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -21,38 +22,61 @@ export class DeesFormSubmit extends DeesElement {
  public static demo = demoFunc;
  public static demoGroups = ['Form', 'Button'];

-  @property({
-    type: Boolean,
-    reflect: true,
-  })
+  // =============================================
+  // Properties forwarded to internal dees-button
+  // =============================================
+
+  @property({ type: Boolean, reflect: true })
  accessor disabled = false;

-  @property({
-    type: String,
-  })
+  @property({ type: String })
  accessor text: string;

-  @property({
-    type: String,
-  })
+  @property({ type: String })
  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';

+  @property({ type: String, reflect: true })
+  accessor type: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+
+  @property({ type: String, reflect: true })
+  accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
+
+  @property({ type: String })
+  accessor icon: string;
+
+  @property({ type: String })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
  constructor() {
    super();
  }
-  
-  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-    `];

-  public render() {
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      dees-button {
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
    return html`
      <dees-button
-        status="${this.status}"
-        @click="${this.submit}"
-        ?disabled="${this.disabled}"
+        .status=${this.status}
+        .type=${this.type}
+        .size=${this.size}
+        .icon=${this.icon}
+        .iconPosition=${this.iconPosition}
+        .text=${this.text}
+        ?disabled=${this.disabled}
+        @clicked=${this.submit}
      >
-        ${this.text || html`<slot></slot>`}
+        <slot></slot>
      </dees-button>
    `;
  }
--- a/ts_web/elements/00group-form/dees-form/dees-form.ts
+++ b/ts_web/elements/00group-form/dees-form/dees-form.ts
@@ -1,6 +1,7 @@
 import {
  customElement,
  html,
+  css,
  type TemplateResult,
  DeesElement,
  type CSSResult,
@@ -21,6 +22,10 @@ import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle
 import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
 import { DeesInputToggle } from '../../00group-input/dees-input-toggle/dees-input-toggle.js';
 import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
+import { DeesInputTags } from '../../00group-input/dees-input-tags/dees-input-tags.js';
+import { DeesInputList } from '../../00group-input/dees-input-list/dees-input-list.js';
+import { DeesInputWysiwyg } from '../../00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputRichtext } from '../../00group-input/dees-input-richtext/component.js';
 import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
 import { DeesTable } from '../../00group-dataview/dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
@@ -40,6 +45,10 @@ const FORM_INPUT_TYPES = [
  DeesInputText,
  DeesInputToggle,
  DeesInputTypelist,
+  DeesInputTags,
+  DeesInputList,
+  DeesInputWysiwyg,
+  DeesInputRichtext,
  DeesTable,
 ];

@@ -57,6 +66,10 @@ export type TFormInputElement =
  | DeesInputText
  | DeesInputToggle
  | DeesInputTypelist
+  | DeesInputTags
+  | DeesInputList
+  | DeesInputWysiwyg
+  | DeesInputRichtext
  | DeesTable<any>;

 declare global {
@@ -81,13 +94,25 @@ export class DeesForm extends DeesElement {
  @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
  accessor horizontalLayout: boolean = false;

+  public static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      :host([horizontal-layout]) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    `,
+  ];
+
  public render(): TemplateResult {
    return html`
-      <style>
-        :host {
-          display: contents;
-        }
-      </style>
      <slot></slot>
    `;
  }
--- a/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
+++ b/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
@@ -54,37 +54,20 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
        /* CSS Variables for consistent spacing */
        :host {
          --dees-input-spacing-unit: 8px;
-          --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
-          --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
          --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
        }

-        /* Default vertical stacking mode (for forms) */
+        /* Default block display with no margins - spacing is container-driven */
        :host {
          display: block;
          margin: 0;
-          margin-bottom: var(--dees-input-vertical-gap);
-        }
-
-        /* Last child in container should have no bottom margin */
-        :host(:last-child) {
-          margin-bottom: 0;
        }

        /* Horizontal layout mode - activated by attribute */
        :host([layout-mode="horizontal"]) {
          display: inline-block;
-          margin: 0;
-          margin-right: var(--dees-input-horizontal-gap);
-          margin-bottom: 0;
        }

-        :host([layout-mode="horizontal"]:last-child) {
-          margin-right: 0;
-        }
-
-        /* Auto mode - inherit from parent dees-form if present */
-
        /* Label position variations */
        :host([label-position="left"]) .input-wrapper {
          display: grid;
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
@@ -31,6 +31,12 @@ export const demoFunc = () => html`
        flex-wrap: wrap;
      }
      
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
      .spacer {
        height: 200px;
        display: flex;
@@ -63,30 +69,32 @@ export const demoFunc = () => html`
      }
    }}>
      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <dees-input-dropdown
-          .label=${'Select Country'}
-          .options=${[
-            { option: 'United States', key: 'us' },
-            { option: 'Canada', key: 'ca' },
-            { option: 'Germany', key: 'de' },
-            { option: 'France', key: 'fr' },
-            { option: 'United Kingdom', key: 'uk' },
-            { option: 'Australia', key: 'au' },
-            { option: 'Japan', key: 'jp' },
-            { option: 'Brazil', key: 'br' }
-          ]}
-          .selectedOption=${{ option: 'United States', key: 'us' }}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${'Select Role'}
-          .options=${[
-            { option: 'Administrator', key: 'admin' },
-            { option: 'Editor', key: 'editor' },
-            { option: 'Viewer', key: 'viewer' },
-            { option: 'Guest', key: 'guest' }
-          ]}
-        ></dees-input-dropdown>
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${'Select Country'}
+            .options=${[
+              { option: 'United States', key: 'us' },
+              { option: 'Canada', key: 'ca' },
+              { option: 'Germany', key: 'de' },
+              { option: 'France', key: 'fr' },
+              { option: 'United Kingdom', key: 'uk' },
+              { option: 'Australia', key: 'au' },
+              { option: 'Japan', key: 'jp' },
+              { option: 'Brazil', key: 'br' }
+            ]}
+            .selectedOption=${{ option: 'United States', key: 'us' }}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Select Role'}
+            .options=${[
+              { option: 'Administrator', key: 'admin' },
+              { option: 'Editor', key: 'editor' },
+              { option: 'Viewer', key: 'viewer' },
+              { option: 'Guest', key: 'guest' }
+            ]}
+          ></dees-input-dropdown>
+        </div>
      </dees-panel>
    </dees-demowrapper>
    
@@ -176,24 +184,26 @@ export const demoFunc = () => html`
      }
    }}>
      <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <dees-input-dropdown
-          .label=${'Required Field'}
-          .required=${true}
-          .options=${[
-            { option: 'Option A', key: 'a' },
-            { option: 'Option B', key: 'b' },
-            { option: 'Option C', key: 'c' }
-          ]}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${'Disabled Dropdown'}
-          .disabled=${true}
-          .options=${[
-            { option: 'Cannot Select', key: 'disabled' }
-          ]}
-          .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
-        ></dees-input-dropdown>
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${'Required Field'}
+            .required=${true}
+            .options=${[
+              { option: 'Option A', key: 'a' },
+              { option: 'Option B', key: 'b' },
+              { option: 'Option C', key: 'c' }
+            ]}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Disabled Dropdown'}
+            .disabled=${true}
+            .options=${[
+              { option: 'Cannot Select', key: 'disabled' }
+            ]}
+            .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
+          ></dees-input-dropdown>
+        </div>
      </dees-panel>
    </dees-demowrapper>
    
--- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
@@ -13,6 +13,12 @@ export const demoFunc = () => html`
          margin: 0 auto;
        }
        
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
        .payment-group {
          display: flex;
          align-items: center;
@@ -24,16 +30,18 @@ export const demoFunc = () => html`
    
    <div class="demo-container">
      <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
-        <dees-input-iban 
-          .label=${'Bank Account IBAN'} 
-          .description=${'Enter your International Bank Account Number'}
-        ></dees-input-iban>
-        
-        <dees-input-iban 
-          .label=${'Verified IBAN'} 
-          .description=${'This IBAN has been verified'}
-          .value=${'DE89370400440532013000'}
-        ></dees-input-iban>
+        <div class="input-group">
+          <dees-input-iban
+            .label=${'Bank Account IBAN'}
+            .description=${'Enter your International Bank Account Number'}
+          ></dees-input-iban>
+
+          <dees-input-iban
+            .label=${'Verified IBAN'}
+            .description=${'This IBAN has been verified'}
+            .value=${'DE89370400440532013000'}
+          ></dees-input-iban>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
@@ -53,18 +61,20 @@ export const demoFunc = () => html`
      </dees-panel>
      
      <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
-        <dees-input-iban 
-          .label=${'Payment Account'} 
-          .description=${'Required for processing payments'}
-          .required=${true}
-        ></dees-input-iban>
-        
-        <dees-input-iban 
-          .label=${'Locked IBAN'} 
-          .description=${'This IBAN cannot be changed'}
-          .value=${'FR1420041010050500013M02606'}
-          .disabled=${true}
-        ></dees-input-iban>
+        <div class="input-group">
+          <dees-input-iban
+            .label=${'Payment Account'}
+            .description=${'Required for processing payments'}
+            .required=${true}
+          ></dees-input-iban>
+
+          <dees-input-iban
+            .label=${'Locked IBAN'}
+            .description=${'This IBAN cannot be changed'}
+            .value=${'FR1420041010050500013M02606'}
+            .disabled=${true}
+          ></dees-input-iban>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
--- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
@@ -13,6 +13,12 @@ export const demoFunc = () => html`
          margin: 0 auto;
        }
        
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
        .horizontal-group {
          display: flex;
          align-items: center;
@@ -24,18 +30,20 @@ export const demoFunc = () => html`
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
-        <dees-input-phone 
-          .label=${'Phone Number'} 
-          .description=${'Enter your phone number with country code'}
-          .value=${'5551234567'}
-        ></dees-input-phone>
-        
-        <dees-input-phone 
-          .label=${'Contact Phone'} 
-          .description=${'Required for account verification'}
-          .required=${true}
-          .placeholder=${'+1 (555) 000-0000'}
-        ></dees-input-phone>
+        <div class="input-group">
+          <dees-input-phone
+            .label=${'Phone Number'}
+            .description=${'Enter your phone number with country code'}
+            .value=${'5551234567'}
+          ></dees-input-phone>
+
+          <dees-input-phone
+            .label=${'Contact Phone'}
+            .description=${'Required for account verification'}
+            .required=${true}
+            .placeholder=${'+1 (555) 000-0000'}
+          ></dees-input-phone>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
@@ -55,17 +63,19 @@ export const demoFunc = () => html`
      </dees-panel>
      
      <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
-        <dees-input-phone 
-          .label=${'International Contact'} 
-          .description=${'Automatically formats international numbers'}
-          .value=${'441234567890'}
-        ></dees-input-phone>
-        
-        <dees-input-phone 
-          .label=${'Emergency Contact'} 
-          .value=${'911'}
-          .disabled=${true}
-        ></dees-input-phone>
+        <div class="input-group">
+          <dees-input-phone
+            .label=${'International Contact'}
+            .description=${'Automatically formats international numbers'}
+            .value=${'441234567890'}
+          ></dees-input-phone>
+
+          <dees-input-phone
+            .label=${'Emergency Contact'}
+            .value=${'911'}
+            .disabled=${true}
+          ></dees-input-phone>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
--- a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
@@ -14,6 +14,12 @@ export const demoFunc = () => html`
          margin: 0 auto;
        }
        
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
        .shopping-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -60,17 +66,19 @@ export const demoFunc = () => html`
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
-        <dees-input-quantityselector
-          .label=${'Quantity'}
-          .description=${'Select the desired quantity'}
-          .value=${1}
-        ></dees-input-quantityselector>
-        
-        <dees-input-quantityselector
-          .label=${'Items in Cart'}
-          .description=${'Adjust the quantity of items'}
-          .value=${3}
-        ></dees-input-quantityselector>
+        <div class="input-group">
+          <dees-input-quantityselector
+            .label=${'Quantity'}
+            .description=${'Select the desired quantity'}
+            .value=${1}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Items in Cart'}
+            .description=${'Adjust the quantity of items'}
+            .value=${3}
+          ></dees-input-quantityselector>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -169,19 +177,21 @@ export const demoFunc = () => html`
      </dees-panel>
      
      <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
-        <dees-input-quantityselector
-          .label=${'Number of Licenses'}
-          .description=${'Select how many licenses you need'}
-          .required=${true}
-          .value=${1}
-        ></dees-input-quantityselector>
-        
-        <dees-input-quantityselector
-          .label=${'Fixed Quantity'}
-          .description=${'This quantity cannot be changed'}
-          .disabled=${true}
-          .value=${5}
-        ></dees-input-quantityselector>
+        <div class="input-group">
+          <dees-input-quantityselector
+            .label=${'Number of Licenses'}
+            .description=${'Select how many licenses you need'}
+            .required=${true}
+            .value=${1}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Fixed Quantity'}
+            .description=${'This quantity cannot be changed'}
+            .disabled=${true}
+            .value=${5}
+          ></dees-input-quantityselector>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
--- a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
@@ -23,6 +23,12 @@ export const demoFunc = () => html`
          margin-bottom: 0;
        }
        
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
        .demo-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -60,20 +66,22 @@ export const demoFunc = () => html`
      </dees-panel>
      
      <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
-        <dees-input-radiogroup
-          .label=${'Do you agree with the terms?'}
-          .options=${['Yes', 'No', 'Maybe']}
-          .direction=${'horizontal'}
-          .selectedOption=${'Yes'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Experience Level'}
-          .options=${['Beginner', 'Intermediate', 'Expert']}
-          .direction=${'horizontal'}
-          .selectedOption=${'Intermediate'}
-          .description=${'Select your experience level with web development'}
-        ></dees-input-radiogroup>
+        <div class="input-group">
+          <dees-input-radiogroup
+            .label=${'Do you agree with the terms?'}
+            .options=${['Yes', 'No', 'Maybe']}
+            .direction=${'horizontal'}
+            .selectedOption=${'Yes'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Experience Level'}
+            .options=${['Beginner', 'Intermediate', 'Expert']}
+            .direction=${'horizontal'}
+            .selectedOption=${'Intermediate'}
+            .description=${'Select your experience level with web development'}
+          ></dees-input-radiogroup>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -132,30 +140,32 @@ export const demoFunc = () => html`
      </dees-panel>
      
      <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
-        <dees-input-radiogroup
-          .label=${'Theme Preference'}
-          .options=${[
-            { option: 'Light Theme', key: 'light', payload: 'light' },
-            { option: 'Dark Theme', key: 'dark', payload: 'dark' },
-            { option: 'System Default', key: 'system', payload: 'auto' }
-          ]}
-          .selectedOption=${'dark'}
-          .description=${'Choose how the application should appear'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Notification Frequency'}
-          .options=${['All Notifications', 'Important Only', 'None']}
-          .selectedOption=${'Important Only'}
-          .description=${'Control how often you receive notifications'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Language'}
-          .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
-          .selectedOption=${'English'}
-          .direction=${'horizontal'}
-        ></dees-input-radiogroup>
+        <div class="input-group">
+          <dees-input-radiogroup
+            .label=${'Theme Preference'}
+            .options=${[
+              { option: 'Light Theme', key: 'light', payload: 'light' },
+              { option: 'Dark Theme', key: 'dark', payload: 'dark' },
+              { option: 'System Default', key: 'system', payload: 'auto' }
+            ]}
+            .selectedOption=${'dark'}
+            .description=${'Choose how the application should appear'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Notification Frequency'}
+            .options=${['All Notifications', 'Important Only', 'None']}
+            .selectedOption=${'Important Only'}
+            .description=${'Control how often you receive notifications'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Language'}
+            .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
+            .selectedOption=${'English'}
+            .direction=${'horizontal'}
+          ></dees-input-radiogroup>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
--- a/ts_web/elements/00group-input/dees-input-richtext/component.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts
@@ -269,6 +269,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
      onUpdate: ({ editor }) => {
        this.value = editor.getHTML();
        this.updateWordCount();
+        this.changeSubject.next(this.value);
        this.dispatchEvent(
          new CustomEvent('input', {
            detail: { value: this.value },
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
@@ -30,6 +30,12 @@ export const demoFunc = () => html`
        flex-wrap: wrap;
      }
      
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
      .grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
@@ -83,25 +89,27 @@ export const demoFunc = () => html`
      }
    }}>
      <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
-        <dees-input-text 
-          .label=${'Username'} 
-          .value=${'johndoe'}
-          .key=${'username'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Email Address'} 
-          .value=${'john@example.com'} 
-          .description=${'We will never share your email with anyone'}
-          .key=${'email'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Password'} 
-          .isPasswordBool=${true} 
-          .value=${'secret123'}
-          .key=${'password'}
-        ></dees-input-text>
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Username'}
+            .value=${'johndoe'}
+            .key=${'username'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Email Address'}
+            .value=${'john@example.com'}
+            .description=${'We will never share your email with anyone'}
+            .key=${'email'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Password'}
+            .isPasswordBool=${true}
+            .value=${'secret123'}
+            .key=${'password'}
+          ></dees-input-text>
+        </div>
      </dees-panel>
    </dees-demowrapper>
    
@@ -172,31 +180,33 @@ export const demoFunc = () => html`
      }
    }}>
      <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
-        <dees-input-text 
-          .label=${'Label on Top (Default)'} 
-          .value=${'Standard layout'} 
-          .labelPosition=${'top'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Label on Left'} 
-          .value=${'Inline label'} 
-          .labelPosition=${'left'}
-        ></dees-input-text>
-        
-        <div class="grid-layout">
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Label on Top (Default)'}
+            .value=${'Standard layout'}
+            .labelPosition=${'top'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Label on Left'}
+            .value=${'Inline label'}
+            .labelPosition=${'left'}
+          ></dees-input-text>
+
+          <div class="grid-layout">
          <dees-input-text 
            .label=${'City'} 
            .value=${'New York'} 
            .labelPosition=${'left'}
          ></dees-input-text>
          
-          <dees-input-text 
-            .label=${'ZIP Code'} 
-            .value=${'10001'} 
+          <dees-input-text
+            .label=${'ZIP Code'}
+            .value=${'10001'}
            .labelPosition=${'left'}
          ></dees-input-text>
        </div>
+        </div>
      </dees-panel>
    </dees-demowrapper>
    
@@ -234,24 +244,26 @@ export const demoFunc = () => html`
      }
    }}>
      <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
-        <dees-input-text 
-          .label=${'Required Field'} 
-          .required=${true}
-          .key=${'requiredField'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Disabled Field'} 
-          .value=${'Cannot edit this'} 
-          .disabled=${true}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Field with Error'} 
-          .value=${'invalid@'} 
-          .validationText=${'Please enter a valid email address'}
-          .validationState=${'invalid'}
-        ></dees-input-text>
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Required Field'}
+            .required=${true}
+            .key=${'requiredField'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Disabled Field'}
+            .value=${'Cannot edit this'}
+            .disabled=${true}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Field with Error'}
+            .value=${'invalid@'}
+            .validationText=${'Please enter a valid email address'}
+            .validationState=${'invalid'}
+          ></dees-input-text>
+        </div>
      </dees-panel>
    </dees-demowrapper>
    
@@ -279,19 +291,21 @@ export const demoFunc = () => html`
      });
    }}>
      <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
-        <dees-input-text 
-          .label=${'Password with Toggle'} 
-          .isPasswordBool=${true}
-          .value=${'mySecurePassword123'}
-          .description=${'Click the eye icon to show/hide password'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'API Key'} 
-          .isPasswordBool=${true}
-          .value=${'sk-1234567890abcdef'}
-          .description=${'Keep this key secure and never share it'}
-        ></dees-input-text>
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Password with Toggle'}
+            .isPasswordBool=${true}
+            .value=${'mySecurePassword123'}
+            .description=${'Click the eye icon to show/hide password'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'API Key'}
+            .isPasswordBool=${true}
+            .value=${'sk-1234567890abcdef'}
+            .description=${'Keep this key secure and never share it'}
+          ></dees-input-text>
+        </div>
      </dees-panel>
    </dees-demowrapper>
    
--- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
@@ -13,6 +13,12 @@ export const demoFunc = () => html`
          margin: 0 auto;
        }
        
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
        .horizontal-group {
          display: flex;
          gap: 24px;
@@ -39,27 +45,30 @@ export const demoFunc = () => html`
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
-        <dees-input-typelist
-          .label=${'Tags'}
-          .description=${'Add tags by typing and pressing Enter'}
-          .value=${['javascript', 'typescript', 'web-components']}
-        ></dees-input-typelist>
-        
-        <dees-input-typelist
-          .label=${'Team Members'}
-          .description=${'Add email addresses of team members'}
-          .value=${['alice@example.com', 'bob@example.com']}
-        ></dees-input-typelist>
+        <div class="input-group">
+          <dees-input-typelist
+            .label=${'Tags'}
+            .description=${'Add tags by typing and pressing Enter'}
+            .value=${['javascript', 'typescript', 'web-components']}
+          ></dees-input-typelist>
+
+          <dees-input-typelist
+            .label=${'Team Members'}
+            .description=${'Add email addresses of team members'}
+            .value=${['alice@example.com', 'bob@example.com']}
+          ></dees-input-typelist>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
-        <dees-input-typelist
-          .label=${'Your Skills'}
-          .description=${'List your professional skills'}
-          .value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
-        ></dees-input-typelist>
-        
-        <div class="horizontal-group">
+        <div class="input-group">
+          <dees-input-typelist
+            .label=${'Your Skills'}
+            .description=${'List your professional skills'}
+            .value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
+          ></dees-input-typelist>
+
+          <div class="horizontal-group">
          <dees-input-typelist
            .label=${'Categories'}
            .layoutMode=${'horizontal'}
@@ -72,22 +81,25 @@ export const demoFunc = () => html`
            .value=${['innovation', 'startup', 'growth']}
          ></dees-input-typelist>
        </div>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
-        <dees-input-typelist
-          .label=${'Project Dependencies'}
-          .description=${'List all required npm packages'}
-          .required=${true}
-          .value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
-        ></dees-input-typelist>
-        
-        <dees-input-typelist
-          .label=${'System Tags'}
-          .description=${'These tags are managed by the system'}
-          .disabled=${true}
-          .value=${['system', 'protected', 'readonly']}
-        ></dees-input-typelist>
+        <div class="input-group">
+          <dees-input-typelist
+            .label=${'Project Dependencies'}
+            .description=${'List all required npm packages'}
+            .required=${true}
+            .value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
+          ></dees-input-typelist>
+
+          <dees-input-typelist
+            .label=${'System Tags'}
+            .description=${'These tags are managed by the system'}
+            .disabled=${true}
+            .value=${['system', 'protected', 'readonly']}
+          ></dees-input-typelist>
+        </div>
      </dees-panel>
      
      <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>
--- a/ts_web/elements/00group-media/dees-pdf-preview/component.ts
+++ b/ts_web/elements/00group-media/dees-pdf-preview/component.ts
@@ -1,24 +0,0 @@
-import { customElement } from '@design.estate/dees-element';
-import { DeesTilePdf } from '../dees-tile-pdf/component.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-pdf-preview': DeesPdfPreview;
-  }
-}
-
-/**
- * @deprecated Use <dees-tile-pdf> instead. This component will be removed in a future release.
- */
-@customElement('dees-pdf-preview')
-export class DeesPdfPreview extends DeesTilePdf {
-  public static demoGroups: never[] = []; // Hide from demo catalog
-
-  public connectedCallback(): Promise<void> {
-    console.warn(
-      '[dees-pdf-preview] is deprecated. Use <dees-tile-pdf> instead. ' +
-      'This component will be removed in a future release.'
-    );
-    return super.connectedCallback();
-  }
-}
--- a/ts_web/elements/00group-media/dees-pdf-preview/demo.ts
+++ b/ts_web/elements/00group-media/dees-pdf-preview/demo.ts
@@ -1,189 +0,0 @@
-import { html } from '@design.estate/dees-element';
-
-export const demo = () => {
-  const samplePdfs = [
-    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
-    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
-  ];
-
-  const generateGridItems = (count: number) => {
-    const items = [];
-    for (let i = 0; i < count; i++) {
-      const pdfUrl = samplePdfs[i % samplePdfs.length];
-      items.push(html`
-        <dees-pdf-preview
-          pdfUrl="${pdfUrl}"
-          maxPages="3"
-          stackOffset="6"
-          clickable="true"
-          grid-mode
-          @pdf-preview-click=${(e: CustomEvent) => {
-            console.log('PDF Preview clicked:', e.detail);
-            alert(`PDF clicked: ${e.detail.pageCount} pages`);
-          }}
-        ></dees-pdf-preview>
-      `);
-    }
-    return items;
-  };
-
-  return html`
-    <style>
-      .demo-container {
-        padding: 40px;
-        background: #f5f5f5;
-      }
-
-      .demo-section {
-        margin-bottom: 60px;
-      }
-
-      h3 {
-        margin-bottom: 20px;
-        font-size: 18px;
-        font-weight: 600;
-      }
-
-      .preview-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 24px;
-      }
-
-      .preview-row {
-        display: flex;
-        gap: 24px;
-        align-items: center;
-        margin-bottom: 20px;
-      }
-
-      .preview-label {
-        font-size: 14px;
-        font-weight: 500;
-        min-width: 100px;
-      }
-
-      .performance-stats {
-        margin-top: 20px;
-        padding: 16px;
-        background: white;
-        border-radius: 8px;
-        font-size: 14px;
-      }
-
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        gap: 12px;
-        margin-top: 12px;
-      }
-
-      .stat-item {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      .stat-label {
-        font-size: 12px;
-        color: #666;
-      }
-
-      .stat-value {
-        font-size: 16px;
-        font-weight: 600;
-      }
-    </style>
-
-    <div class="demo-container">
-      <div class="demo-section">
-        <h3>Single PDF Preview with Stacked Pages</h3>
-        <dees-pdf-preview
-          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-          maxPages="3"
-          stackOffset="8"
-          clickable="true"
-        ></dees-pdf-preview>
-      </div>
-
-      <div class="demo-section">
-        <h3>Different Sizes</h3>
-        <div class="preview-row">
-          <div class="preview-label">Small:</div>
-          <dees-pdf-preview
-            size="small"
-            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
-            maxPages="2"
-            stackOffset="6"
-            clickable="true"
-          ></dees-pdf-preview>
-        </div>
-
-        <div class="preview-row">
-          <div class="preview-label">Default:</div>
-          <dees-pdf-preview
-            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
-            maxPages="3"
-            stackOffset="8"
-            clickable="true"
-          ></dees-pdf-preview>
-        </div>
-
-        <div class="preview-row">
-          <div class="preview-label">Large:</div>
-          <dees-pdf-preview
-            size="large"
-            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
-            maxPages="4"
-            stackOffset="10"
-            clickable="true"
-          ></dees-pdf-preview>
-        </div>
-      </div>
-
-      <div class="demo-section">
-        <h3>Non-Clickable Preview</h3>
-        <dees-pdf-preview
-          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
-          maxPages="3"
-          stackOffset="8"
-          clickable="false"
-        ></dees-pdf-preview>
-      </div>
-
-      <div class="demo-section">
-        <h3>Performance Grid - 50 PDFs with Lazy Loading</h3>
-        <p style="margin-bottom: 20px; font-size: 14px; color: #666;">
-          This grid demonstrates the performance optimizations with 50 PDF previews.
-          Scroll to see lazy loading in action - previews render only when visible.
-        </p>
-
-        <div class="preview-grid">
-          ${generateGridItems(50)}
-        </div>
-
-        <div class="performance-stats">
-          <h4>Performance Features</h4>
-          <div class="stats-grid">
-            <div class="stat-item">
-              <span class="stat-label">Lazy Loading</span>
-              <span class="stat-value">✓ Enabled</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">Canvas Pooling</span>
-              <span class="stat-value">✓ Active</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">Memory Management</span>
-              <span class="stat-value">✓ Optimized</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">Intersection Observer</span>
-              <span class="stat-value">200px margin</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-};
--- a/ts_web/elements/00group-media/dees-pdf-preview/index.ts
+++ b/ts_web/elements/00group-media/dees-pdf-preview/index.ts
@@ -1 +0,0 @@
-export * from './component.js';
--- a/ts_web/elements/00group-media/dees-pdf-preview/styles.ts
+++ b/ts_web/elements/00group-media/dees-pdf-preview/styles.ts
@@ -1,223 +0,0 @@
-import { css, cssManager } from '@design.estate/dees-element';
-
-export const previewStyles = [
-  cssManager.defaultStyles,
-  css`
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    .preview-container {
-      position: relative;
-      width: 200px;
-      height: 260px;
-      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;
-      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
-    }
-
-    .preview-container.clickable {
-      cursor: pointer;
-    }
-
-    .preview-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)')};
-    }
-
-    .preview-container.clickable:hover .preview-overlay {
-      opacity: 1;
-    }
-
-    .preview-stack {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-
-    .preview-stack.non-a4 {
-      padding: 12px;
-    }
-
-    .preview-canvas {
-      position: relative;
-      background: white;
-      display: block;
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      height: auto;
-      object-fit: contain;
-      image-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
-    }
-
-    .non-a4 .preview-canvas {
-      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 24%)')};
-      border-radius: 4px;
-    }
-
-    .preview-info {
-      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;
-      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;
-    }
-
-    .preview-info dees-icon {
-      font-size: 13px;
-      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
-    }
-
-    .preview-pages {
-      font-weight: 500;
-      font-size: 11px;
-    }
-
-    .preview-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      opacity: 0;
-      transition: opacity 0.2s ease;
-      z-index: 20;
-    }
-
-    .preview-overlay dees-icon {
-      font-size: 24px;
-      color: white;
-    }
-
-    .preview-overlay span {
-      font-size: 14px;
-      font-weight: 500;
-      color: white;
-    }
-
-    .preview-loading,
-    .preview-error {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
-    }
-
-    .preview-loading {
-      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 14%)')};
-    }
-
-    .preview-error {
-      background: ${cssManager.bdTheme('hsl(0 72% 98%)', 'hsl(0 62% 20%)')};
-      color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
-    }
-
-    .preview-spinner {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      border: 2px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
-      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
-      animation: spin 0.8s linear infinite;
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    .preview-text {
-      font-size: 13px;
-      font-weight: 500;
-    }
-
-    .preview-error dees-icon {
-      font-size: 32px;
-    }
-
-    .preview-page-indicator {
-      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;
-      backdrop-filter: blur(12px);
-      z-index: 15;
-      pointer-events: none;
-      animation: fadeIn 0.2s ease;
-    }
-
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    /* Responsive sizes */
-    :host([size="small"]) .preview-container {
-      width: 150px;
-      height: 195px;
-    }
-
-    :host([size="large"]) .preview-container {
-      width: 250px;
-      height: 325px;
-    }
-
-    /* Grid optimizations */
-    :host([grid-mode]) .preview-container {
-      will-change: auto;
-    }
-
-    :host([grid-mode]) .preview-canvas {
-      image-rendering: -webkit-optimize-contrast;
-      image-rendering: crisp-edges;
-    }
-  `,
-];
--- a/ts_web/elements/00group-media/dees-pdf/component.ts
+++ b/ts_web/elements/00group-media/dees-pdf/component.ts
@@ -1,161 +0,0 @@
-import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, } from '@design.estate/dees-element';
-
-import { Deferred } from '@push.rocks/smartpromise';
-import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
-import '../../00group-utility/dees-icon/dees-icon.js';
-
-// import type pdfjsTypes from 'pdfjs-dist';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-pdf': DeesPdf;
-  }
-}
-
-/**
- * @deprecated Use DeesPdfViewer or DeesTilePdf instead
- * - DeesPdfViewer: Full-featured PDF viewing with controls, navigation, zoom
- * - DeesTilePdf: Lightweight, performance-optimized tile preview for grids
- */
-@customElement('dees-pdf')
-export class DeesPdf extends DeesElement {
-  // DEMO
-  public static demo = () => html` <dees-pdf></dees-pdf> `;
-  public static demoGroups = ['Media', 'PDF'];
-
-  // INSTANCE
-
-  @property()
-  accessor pdfUrl: string =
-    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
-
-
-
-  constructor() {
-    super();
-
-    // you have access to all kinds of things through this.
-    // this.setAttribute('gotIt','true');
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          font-family: 'Geist Sans', sans-serif;
-          display: block;
-          box-sizing: border-box;
-          max-width: 800px;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-
-        #pdfcanvas {
-          box-shadow: 0px 0px 5px #ccc;
-          width: 100%;
-          cursor: pointer;
-        }
-      </style>
-      <canvas
-        id="pdfcanvas"
-        .height=${0}
-        .width=${0}
-
-      ></canvas>
-    `;
-  }
-
-  public static pdfJsReady: Promise<any>;
-  public static pdfjsLib: any // typeof pdfjsTypes;
-  public async connectedCallback() {
-    super.connectedCallback();
-    if (!DeesPdf.pdfJsReady) {
-      const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
-      DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
-      // @ts-ignore
-      DeesPdf.pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
-      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs';
-      pdfJsReadyDeferred.resolve();
-    }
-    await DeesPdf.pdfJsReady;
-    this.displayContent();
-
-
-  }
-
-  public async displayContent() {
-    await DeesPdf.pdfJsReady;
-
-    // Asynchronous download of PDF
-    const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
-    loadingTask.promise.then(
-      (pdf) => {
-        console.log('PDF loaded');
-
-        // Fetch the first page
-        const pageNumber = 1;
-        pdf.getPage(pageNumber).then((page) => {
-          console.log('Page loaded');
-
-          const scale = 10;
-          const viewport = page.getViewport({ scale: scale });
-
-          // Prepare canvas using PDF page dimensions
-          const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
-          const context = canvas.getContext('2d');
-          canvas.height = viewport.height;
-          canvas.width = viewport.width;
-
-          // Render PDF page into canvas context
-          const renderContext = {
-            canvasContext: context,
-            viewport: viewport,
-          };
-
-          const renderTask = page.render(renderContext);
-          renderTask.promise.then(function () {
-            console.log('Page rendered');
-          });
-        });
-      },
-      (reason) => {
-        // PDF loading error
-        console.error(reason);
-      }
-    );
-  }
-
-  /**
-   * Provide context menu items for the global context menu handler
-   */
-  public getContextMenuItems() {
-    return [
-      {
-        name: 'Open PDF in New Tab',
-        iconName: 'lucide:ExternalLink',
-        action: async () => {
-          window.open(this.pdfUrl, '_blank');
-        }
-      },
-      { divider: true },
-      {
-        name: 'Copy PDF URL',
-        iconName: 'lucide:Copy',
-        action: async () => {
-          await navigator.clipboard.writeText(this.pdfUrl);
-        }
-      },
-      {
-        name: 'Download PDF',
-        iconName: 'lucide:Download',
-        action: async () => {
-          const link = document.createElement('a');
-          link.href = this.pdfUrl;
-          link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
-          link.click();
-        }
-      }
-    ];
-  }
-}
--- a/ts_web/elements/00group-media/dees-pdf/index.ts
+++ b/ts_web/elements/00group-media/dees-pdf/index.ts
@@ -1 +0,0 @@
-export * from './component.js';
--- a/ts_web/elements/00group-media/dees-tile-audio/component.ts
+++ b/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,
--- a/ts_web/elements/00group-media/dees-tile-folder/component.ts
+++ b/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,
--- a/ts_web/elements/00group-media/dees-tile-image/component.ts
+++ b/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,
--- a/ts_web/elements/00group-media/dees-tile-note/component.ts
+++ b/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,
--- a/ts_web/elements/00group-media/dees-tile-pdf/component.ts
+++ b/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;
--- a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts
+++ b/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>

--- a/ts_web/elements/00group-media/dees-tile-pdf/styles.ts
+++ b/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 {
--- a/ts_web/elements/00group-media/dees-tile-shared/DeesTileBase.ts
+++ b/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();
--- a/ts_web/elements/00group-media/dees-tile-shared/styles.ts
+++ b/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;
+      font-size: 10px;
+      font-weight: 500;
      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-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;
-      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;
--- a/ts_web/elements/00group-media/dees-tile-video/component.ts
+++ b/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,
--- a/ts_web/elements/00group-media/index.ts
+++ b/ts_web/elements/00group-media/index.ts
@@ -5,8 +5,6 @@ export * from './dees-video-viewer/index.js';
 export * from './dees-preview/index.js';

 // PDF Components
-export * from './dees-pdf/index.js'; // @deprecated - Use dees-pdf-viewer or dees-tile-pdf instead
-export * from './dees-pdf-preview/index.js'; // @deprecated - Use dees-tile-pdf instead
 export * from './dees-pdf-shared/index.js';
 export * from './dees-pdf-viewer/index.js';

--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
@@ -390,7 +390,8 @@ export class DeesSimpleAppDash extends DeesElement {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
    if (this.viewTabs && this.viewTabs.length > 0) {
-      await this.loadView(this.viewTabs[0]);
+      const viewToLoad = this.selectedView || this.viewTabs[0];
+      await this.loadView(viewToLoad);
    }
  }
  
--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -1,6 +1,6 @@
 import type { TemplateResult } from '@design.estate/dees-element';
 import type { IAppBarMenuItem } from './appbarmenuitem.js';
-import type { IMenuItem } from './tab.js';
+import type { IMenuItem, ITabAction } from './tab.js';
 import type { IMenuGroup } from './menugroup.js';
 import type { ISecondaryMenuGroup, ISecondaryMenuItem } from './secondarymenu.js';

@@ -134,6 +134,8 @@ export type TDeesAppui = HTMLElement & {
  removeContentTab: (tabKey: string) => void;
  selectContentTab: (tabKey: string) => void;
  getSelectedContentTab: () => IMenuItem | undefined;
+  setContentTabActionsLeft: (actions: ITabAction[]) => void;
+  setContentTabActionsRight: (actions: ITabAction[]) => void;
  activityLog: IActivityLogAPI;
  setActivityLogVisible: (visible: boolean) => void;
  toggleActivityLog: () => void;
--- a/ts_web/elements/interfaces/tab.ts
+++ b/ts_web/elements/interfaces/tab.ts
@@ -7,3 +7,11 @@ export interface IMenuItem {
  closeable?: boolean;
  onClose?: () => void;
 }
+
+export interface ITabAction {
+  id: string;
+  iconName: string;
+  action: () => void | Promise<void>;
+  tooltip?: string;
+  disabled?: boolean;
+}
--- a/ts_web/services/DeesServiceLibLoader.ts
+++ b/ts_web/services/DeesServiceLibLoader.ts
@@ -193,9 +193,20 @@ export class DeesServiceLibLoader {
    const response = await fetch(cssUrl);
    const cssText = await response.text();

+    // Fix for xterm.js WidthCache measurement container causing horizontal scrollbar
+    // xterm.js creates this on document.body with width: 50000px, top: -50000px
+    // Moving it off-screen horizontally prevents scrollWidth expansion
+    const xtermMeasurementFix = `
+/* Fix xterm.js WidthCache measurement container causing horizontal scrollbar */
+/* xterm creates this on document.body - move it off-screen horizontally too */
+body > div[style*="top: -50000px"][style*="width: 50000px"] {
+  left: -50000px !important;
+}
+`;
+
    const style = document.createElement('style');
    style.id = styleId;
-    style.textContent = cssText;
+    style.textContent = cssText + xtermMeasurementFix;
    document.head.appendChild(style);
  }

--- a/ts_web/services/versions.ts
+++ b/ts_web/services/versions.ts
@@ -7,9 +7,9 @@ export const CDN_VERSIONS = {
  xtermAddonFit: '0.8.0',
  xtermAddonSearch: '0.13.0',
  highlightJs: '11.11.1',
-  apexcharts: '5.3.6',
-  tiptap: '2.23.0',
-  fontawesome: '7.1.0',
+  apexcharts: '5.10.3',
+  tiptap: '2.27.2',
+  fontawesome: '7.2.0',
 } as const;

 /**
Author	SHA1	Message	Date
Juergen Kunz	ade5a25b3a	v3.46.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-10 16:04:28 +00:00
Juergen Kunz	a396dfea12	feat(dees-tile): unify tile metadata into a consistent bottom info bar and add PDF file-size display	2026-03-10 16:04:28 +00:00
Juergen Kunz	d0105e1b80	v3.45.1 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-10 14:42:02 +00:00
Juergen Kunz	1eeebb35e6	fix(dees-appui): substitute route params into URL hash when navigating	2026-03-10 14:42:02 +00:00
Juergen Kunz	14e8b8c533	v3.45.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-10 13:56:22 +00:00
Juergen Kunz	eaf327ea75	feat(dees-form): register new input components (tags, list, wysiwyg, richtext) and emit change notification for richtext updates	2026-03-10 13:56:22 +00:00
Juergen Kunz	09741e0b37	v3.44.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-10 12:39:21 +00:00
Juergen Kunz	5cadd1fc7f	feat(appui-tabs): add support for left/right tab action buttons and content tab action APIs	2026-03-10 12:39:21 +00:00
Juergen Kunz	1795235c6d	v3.43.4 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-09 17:37:50 +00:00
Juergen Kunz	ba7d387acb	fix(media): remove deprecated dees-pdf and dees-pdf-preview components and bump several dependencies	2026-03-09 17:37:50 +00:00
Juergen Kunz	26ca16a284	v3.43.3 Some checks failed Default (tags) / security (push) Failing after 2s Details Default (tags) / test (push) Failing after 2s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-24 18:25:54 +00:00
Juergen Kunz	3ab3eb5e5e	fix(dees-table): use lucide icon identifier for Search action in dees-table	2026-02-24 18:25:54 +00:00
Juergen Kunz	da5dbc70e2	v3.43.2 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-21 21:12:18 +00:00
Juergen Kunz	19b7981542	fix(dees-chart-log): avoid duplicate log entries, optimize incremental updates, enforce maxEntries, and respect filters when writing logs	2026-02-21 21:12:18 +00:00
Juergen Kunz	bad105074e	v3.43.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-21 18:06:42 +00:00
Juergen Kunz	f124091784	fix(dees-chart-log): replay buffered log entries when terminal becomes ready and sync logEntries updates to re-render filtered logs	2026-02-21 18:06:42 +00:00
Juergen Kunz	68790a26ed	v3.43.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-17 17:34:53 +00:00
Juergen Kunz	2abf7e356d	feat(dees-form): add layout styles to dees-form and standardize demo input grouping	2026-02-17 17:34:53 +00:00
Juergen Kunz	ecd35683e6	v3.42.2 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-16 17:16:49 +00:00
Juergen Kunz	93cb632448	fix(dees-chart-area): add ApexAxisChartSeries type to dees-chart-area component to improve typing for ApexCharts series data	2026-02-16 17:16:49 +00:00
Juergen Kunz	047e42c6a3	v3.42.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-16 16:03:23 +00:00
Juergen Kunz	59efa8cff0	fix(dees-table): Guard against undefined action.type in dees-table by using optional chaining and update several dependencies	2026-02-16 16:03:23 +00:00
Juergen Kunz	09f0aa97dd	v3.42.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-02 14:32:20 +00:00
Juergen Kunz	7c62f45d77	feat(dees-form-submit): forward button properties to internal dees-button, use property bindings, add demo and styles	2026-02-02 14:32:20 +00:00
Juergen Kunz	b123768474	v3.41.6 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-02 09:27:53 +00:00
Juergen Kunz	f292e7a7f4	fix(dees-simple-appdash): respect selectedView when loading initial view, falling back to the first tab	2026-02-02 09:27:53 +00:00
Juergen Kunz	d82e5603a7	v3.41.5 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-02-01 23:51:53 +00:00
Juergen Kunz	7e2386bcdf	fix(dees-service-lib-loader): prevent horizontal scrollbar by offsetting xterm WidthCache measurement container	2026-02-01 23:51:53 +00:00