v3.48.4

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2026-03-14 - 3.48.4 - fix(storage-browser)
+rename S3-specific storage browser interfaces to generic storage types
+
+- Replaces IS3DataProvider, IS3Object, and IS3ChangeEvent with generic storage interface names across storage browser components
+- Updates demo provider naming and user-facing demo text from S3 browser to Storage browser
+- Aligns interface and utility comments with storage-agnostic terminology
+
+## 2026-03-14 - 3.48.3 - fix(dataview)
+rename dees-s3-browser exports and custom elements to dees-storage-browser
+
+- Replaces the dees-s3-browser module path with dees-storage-browser in dataview exports
+- Renames the main custom element from dees-s3-browser to dees-storage-browser
+- Renames related columns, keys, preview, demo, interfaces, and utility entry points under the new storage-browser module
+
 ## 2026-03-12 - 3.48.2 - fix(repo)
 no changes to commit
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.48.2",
+  "version": "3.48.4",
   "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",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.demo.ts

@@ -1,16 +1,16 @@
 import { html } from '@design.estate/dees-element';
-import type { IS3DataProvider, IS3Object } from './interfaces.js';
-import './dees-s3-browser.js';
+import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
+import './dees-storage-browser.js';
 
-// Mock in-memory S3 data provider for demo purposes
-class MockS3DataProvider implements IS3DataProvider {
+// Mock in-memory storage data provider for demo purposes
+class MockStorageDataProvider implements IStorageDataProvider {
   private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
 
   constructor() {
     const now = new Date().toISOString();
     // Seed with sample data
     this.objects.set('documents/readme.md', {
-      content: btoa('# Welcome\n\nThis is a demo S3 browser.\n'),
+      content: btoa('# Welcome\n\nThis is a demo Storage browser.\n'),
       contentType: 'text/markdown',
       size: 42,
       lastModified: now,
@@ -59,9 +59,9 @@ class MockS3DataProvider implements IS3DataProvider {
     });
   }
 
-  async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
+  async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
     const pfx = prefix || '';
-    const objects: IS3Object[] = [];
+    const objects: IStorageObject[] = [];
     const prefixes = new Set<string>();
 
     for (const [key, data] of this.objects) {
@@ -148,9 +148,9 @@ export const demoFunc = () => html`
     }
   </style>
   <div class="demo-container">
-    <dees-s3-browser
-      .dataProvider=${new MockS3DataProvider()}
+    <dees-storage-browser
+      .dataProvider=${new MockStorageDataProvider()}
       .bucketName=${'demo-bucket'}
-    ></dees-s3-browser>
+    ></dees-storage-browser>
   </div>
 `;

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.ts

@@ -1,26 +1,26 @@
 import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import { demoFunc } from './dees-s3-browser.demo.js';
-import type { IS3DataProvider, IS3ChangeEvent } from './interfaces.js';
-import './dees-s3-columns.js';
-import './dees-s3-keys.js';
-import './dees-s3-preview.js';
+import { demoFunc } from './dees-storage-browser.demo.js';
+import type { IStorageDataProvider, IStorageChangeEvent } from './interfaces.js';
+import './dees-storage-columns.js';
+import './dees-storage-keys.js';
+import './dees-storage-preview.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-s3-browser': DeesS3Browser;
+    'dees-storage-browser': DeesStorageBrowser;
   }
 }
 
 type TViewType = 'columns' | 'keys';
 
-@customElement('dees-s3-browser')
-export class DeesS3Browser extends DeesElement {
+@customElement('dees-storage-browser')
+export class DeesStorageBrowser extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Data View'];
 
   @property({ type: Object })
-  public accessor dataProvider: IS3DataProvider | null = null;
+  public accessor dataProvider: IStorageDataProvider | null = null;
 
   @property({ type: String })
   public accessor bucketName: string = '';
@@ -30,7 +30,7 @@ export class DeesS3Browser extends DeesElement {
    * Pass a function that takes a callback and returns an unsubscribe function.
    */
   @property({ type: Object })
-  public accessor onChangeEvent: ((callback: (event: IS3ChangeEvent) => void) => (() => void)) | null = null;
+  public accessor onChangeEvent: ((callback: (event: IStorageChangeEvent) => void) => (() => void)) | null = null;
 
   @state()
   private accessor viewType: TViewType = 'columns';
@@ -288,12 +288,12 @@ export class DeesS3Browser extends DeesElement {
     }
 
     try {
-      this.changeUnsubscribe = this.onChangeEvent((event: IS3ChangeEvent) => {
+      this.changeUnsubscribe = this.onChangeEvent((event: IStorageChangeEvent) => {
         this.handleChange(event);
       });
       this.isStreamConnected = true;
     } catch (error) {
-      console.warn('[S3Browser] Failed to subscribe to changes:', error);
+      console.warn('[StorageBrowser] Failed to subscribe to changes:', error);
       this.isStreamConnected = false;
     }
   }
@@ -306,7 +306,7 @@ export class DeesS3Browser extends DeesElement {
     this.isStreamConnected = false;
   }
 
-  private handleChange(event: IS3ChangeEvent) {
+  private handleChange(event: IStorageChangeEvent) {
     this.recentChangeCount++;
     this.refreshKey++;
   }
@@ -395,24 +395,24 @@ export class DeesS3Browser extends DeesElement {
           <div class="main-view">
             ${this.viewType === 'columns'
               ? html`
-                  <dees-s3-columns
+                  <dees-storage-columns
                     .dataProvider=${this.dataProvider}
                     .bucketName=${this.bucketName}
                     .currentPrefix=${this.currentPrefix}
                     .refreshKey=${this.refreshKey}
                     @key-selected=${this.handleKeySelected}
                     @navigate=${this.handleNavigate}
-                  ></dees-s3-columns>
+                  ></dees-storage-columns>
                 `
               : html`
-                  <dees-s3-keys
+                  <dees-storage-keys
                     .dataProvider=${this.dataProvider}
                     .bucketName=${this.bucketName}
                     .currentPrefix=${this.currentPrefix}
                     .refreshKey=${this.refreshKey}
                     @key-selected=${this.handleKeySelected}
                     @navigate=${this.handleNavigate}
-                  ></dees-s3-keys>
+                  ></dees-storage-keys>
                 `}
           </div>
 
@@ -423,12 +423,12 @@ export class DeesS3Browser extends DeesElement {
                   @mousedown=${this.startPreviewResize}
                 ></div>
                 <div class="preview-panel">
-                  <dees-s3-preview
+                  <dees-storage-preview
                     .dataProvider=${this.dataProvider}
                     .bucketName=${this.bucketName}
                     .objectKey=${this.selectedKey}
                     @object-deleted=${this.handleObjectDeleted}
-                  ></dees-s3-preview>
+                  ></dees-storage-preview>
                 </div>
               `
             : ''}

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-columns.ts

@@ -1,7 +1,7 @@
 import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IS3DataProvider, IS3Object, IColumn } from './interfaces.js';
+import type { IStorageDataProvider, IStorageObject, IColumn } from './interfaces.js';
 import { getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
 
 // FileSystem API types for drag-and-drop folder support
@@ -25,14 +25,14 @@ interface FileSystemDirectoryReader {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-s3-columns': DeesS3Columns;
+    'dees-storage-columns': DeesStorageColumns;
   }
 }
 
-@customElement('dees-s3-columns')
-export class DeesS3Columns extends DeesElement {
+@customElement('dees-storage-columns')
+export class DeesStorageColumns extends DeesElement {
   @property({ type: Object })
-  public accessor dataProvider: IS3DataProvider | null = null;
+  public accessor dataProvider: IStorageDataProvider | null = null;
 
   @property({ type: String })
   public accessor bucketName: string = '';

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts

@@ -1,19 +1,19 @@
 import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IS3DataProvider, IS3Object } from './interfaces.js';
+import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
 import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-s3-keys': DeesS3Keys;
+    'dees-storage-keys': DeesStorageKeys;
   }
 }
 
-@customElement('dees-s3-keys')
-export class DeesS3Keys extends DeesElement {
+@customElement('dees-storage-keys')
+export class DeesStorageKeys extends DeesElement {
   @property({ type: Object })
-  public accessor dataProvider: IS3DataProvider | null = null;
+  public accessor dataProvider: IStorageDataProvider | null = null;
 
   @property({ type: String })
   public accessor bucketName: string = '';
@@ -25,7 +25,7 @@ export class DeesS3Keys extends DeesElement {
   public accessor refreshKey: number = 0;
 
   @state()
-  private accessor allKeys: IS3Object[] = [];
+  private accessor allKeys: IStorageObject[] = [];
 
   @state()
   private accessor prefixes: string[] = [];

ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-preview.ts

@@ -1,18 +1,18 @@
 import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IS3DataProvider } from './interfaces.js';
+import type { IStorageDataProvider } from './interfaces.js';
 import { formatSize, getFileName } from './utilities.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-s3-preview': DeesS3Preview;
+    'dees-storage-preview': DeesStoragePreview;
   }
 }
 
-@customElement('dees-s3-preview')
-export class DeesS3Preview extends DeesElement {
+@customElement('dees-storage-preview')
+export class DeesStoragePreview extends DeesElement {
   @property({ type: Object })
-  public accessor dataProvider: IS3DataProvider | null = null;
+  public accessor dataProvider: IStorageDataProvider | null = null;
 
   @property({ type: String })
   public accessor bucketName: string = '';

ts_web/elements/00group-dataview/dees-storage-browser/index.ts

@@ -1,6 +1,6 @@
-export * from './dees-s3-browser.js';
-export * from './dees-s3-columns.js';
-export * from './dees-s3-keys.js';
-export * from './dees-s3-preview.js';
+export * from './dees-storage-browser.js';
+export * from './dees-storage-columns.js';
+export * from './dees-storage-keys.js';
+export * from './dees-storage-preview.js';
 export * from './interfaces.js';
 export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';

ts_web/elements/00group-dataview/dees-storage-browser/interfaces.ts

@@ -1,15 +1,15 @@
 /**
- * S3 Data Provider interface - implement this to connect the S3 browser to your backend
+ * Storage Data Provider interface - implement this to connect the storage browser to your backend
  */
 
-export interface IS3Object {
+export interface IStorageObject {
   key: string;
   size?: number;
   lastModified?: string;
   isPrefix?: boolean;
 }
 
-export interface IS3ChangeEvent {
+export interface IStorageChangeEvent {
   type: 'add' | 'modify' | 'delete';
   key: string;
   bucket: string;
@@ -17,8 +17,8 @@ export interface IS3ChangeEvent {
   lastModified?: Date;
 }
 
-export interface IS3DataProvider {
-  listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }>;
+export interface IStorageDataProvider {
+  listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }>;
   getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }>;
   putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean>;
   deleteObject(bucket: string, key: string): Promise<boolean>;
@@ -30,7 +30,7 @@ export interface IS3DataProvider {
 
 export interface IColumn {
   prefix: string;
-  objects: IS3Object[];
+  objects: IStorageObject[];
   prefixes: string[];
   selectedItem: string | null;
   width: number;

ts_web/elements/00group-dataview/dees-storage-browser/utilities.ts

@@ -1,5 +1,5 @@
 /**
- * Shared utilities for S3 browser components
+ * Shared utilities for Storage browser components
  */
 
 export interface IMoveValidation {

ts_web/elements/00group-dataview/index.ts

@@ -3,4 +3,4 @@ export * from './dees-dataview-codebox/index.js';
 export * from './dees-dataview-statusobject/index.js';
 export * from './dees-table/index.js';
 export * from './dees-statsgrid/index.js';
-export * from './dees-s3-browser/index.js';
+export * from './dees-storage-browser/index.js';