v1.12.4

fix(config): migrate project config to .smartconfig.json and refresh build settings
fix(build): update bundled_ui.ts with latest build output
2026-03-24 19:02:45 +00:00 · 2026-03-24 19:02:45 +00:00 · 2026-03-24 15:09:16 +00:00 · 2026-03-24 15:08:40 +00:00 · 2026-03-24 15:08:40 +00:00 · 2026-03-24 15:08:13 +00:00
32 changed files with 3016 additions and 6544 deletions
--- a/.smartconfig.json
+++ b/.smartconfig.json
@@ -34,7 +34,7 @@
  "@git.zone/cli": {
    "services": ["mongodb", "minio"],
    "release": {
-      "registries": ["https://verdaccio.lossless.digital"],
+      "registries": ["https://verdaccio.lossless.digital", "https://registry.npmjs.org"],
      "accessLevel": "public"
    },
    "projectType": "npm",
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
  "json.schemas": [
    {
-      "fileMatch": ["/npmextra.json"],
+      "fileMatch": ["/.smartconfig.json"],
      "schema": {
        "type": "object",
        "properties": {
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,55 @@
 # Changelog

+## 2026-03-24 - 1.12.4 - fix(config)
+migrate project config to .smartconfig.json and refresh build settings
+
+- replaces npmextra.json with .smartconfig.json and updates packaged files accordingly
+- adds --skiplibcheck to the build script and simplifies tsconfig settings
+- bumps build and runtime dependencies and updates README references to the new config file
+
+## 2026-03-24 - 1.12.3 - fix(package)
+bump package version to 1.12.3
+
+- Updates the package version from 1.12.2 to 1.12.3.
+
+## 2026-03-24 - 1.12.2 - fix(config)
+migrate runtime configuration loading from npmextra to smartconfig
+
+- replace the @push.rocks/npmextra dependency with @push.rocks/smartconfig
+- update tsview startup configuration types and loading logic to read port, killIfBusy, and openBrowser from smartconfig
+- adjust busy-port error messaging to reference smartconfig.json
+- add npmjs.org to the release registries configuration
+
+## 2026-03-14 - 1.12.1 - fix(storage)
+rename S3 configuration and change stream interfaces to storage-oriented types
+
+- Renames public config APIs from setS3Config/getS3Config/hasS3 to setStorageConfig/getStorageConfig/hasStorage.
+- Replaces shared S3 interfaces with storage equivalents such as IStorageConfig, IStorageObject, IStorageChangeEvent, and storage subscription request types.
+- Updates frontend integration to use dees-storage-browser and the new storage data provider and change stream types.
+- Refreshes dependency versions and documentation to match the new storage-oriented naming.
+
+## 2026-03-12 - 1.12.0 - feat(web)
+replace custom S3 browser components with dees-s3-browser integration
+
+- adds an S3 data provider adapter that delegates object operations to the existing ApiService
+- wires live bucket change events into dees-s3-browser via changeStreamService
+- removes exported custom tsview S3 elements in favor of the shared catalog component
+
+## 2026-01-29 - 1.11.1 - fix(mongo-browser)
+increase default editor width and broaden resize range in Mongo browser pane
+
+- Set default editorWidth from 400 to 700
+- Update CSS grid-template default editor width variable to 700
+- Expand editor resize bounds: min 300 -> 250, max 700 -> 1000 (resizer calculation adjusted)
+
+## 2026-01-28 - 1.11.0 - feat(s3)
+add rename support for files and folders in S3 UI columns and keys
+
+- Adds 'Rename' option to context menus in tsview-s3-columns and tsview-s3-keys for files and folders
+- Implements a rename dialog with validation, auto-focus and smart selection (preserves extensions), and progress/error states
+- Performs renames via apiService.moveObject / apiService.movePrefix and refreshes the UI after success
+- Bumps @design.estate/dees-catalog dependency to ^3.41.2
+
 ## 2026-01-28 - 1.10.2 - fix(tsview-s3-columns)
 append trailing slash to destination key when moving folders to ensure folder destination path

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@git.zone/tsview",
-  "version": "1.10.2",
+  "version": "1.12.4",
  "private": false,
  "description": "A CLI tool for viewing S3 and MongoDB data with a web UI",
  "main": "dist_ts/index.js",
@@ -10,7 +10,7 @@
  "license": "MIT",
  "scripts": {
    "test": "pnpm run build && tstest test/ --verbose",
-    "build": "pnpm run bundle && tsbuild --allowimplicitany",
+    "build": "pnpm run bundle && tsbuild --allowimplicitany --skiplibcheck",
    "bundle": "tsbundle",
    "startTs": "node cli.ts.js",
    "watch": "tswatch",
@@ -20,35 +20,35 @@
    "tsview": "cli.js"
  },
  "devDependencies": {
-    "@api.global/typedsocket": "^4.1.0",
-    "@git.zone/tsbuild": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
+    "@api.global/typedsocket": "^4.1.2",
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
    "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.8",
-    "@git.zone/tswatch": "3.0.1",
+    "@git.zone/tstest": "^3.5.1",
+    "@git.zone/tswatch": "^3.3.1",
    "@push.rocks/smartrx": "^3.0.10",
-    "@types/node": "^25.0.10"
+    "@types/node": "^25.5.0"
  },
  "dependencies": {
-    "@api.global/typedrequest": "^3.2.5",
+    "@api.global/typedrequest": "^3.3.0",
    "@api.global/typedrequest-interfaces": "^3.0.19",
-    "@api.global/typedserver": "^8.3.0",
-    "@aws-sdk/client-s3": "^3.975.0",
-    "@design.estate/dees-catalog": "^3.41.1",
-    "@design.estate/dees-element": "^2.1.6",
+    "@api.global/typedserver": "^8.4.6",
+    "@aws-sdk/client-s3": "^3.1015.0",
+    "@design.estate/dees-catalog": "^3.49.0",
+    "@design.estate/dees-element": "^2.2.3",
    "@push.rocks/early": "^4.0.4",
-    "@push.rocks/npmextra": "^5.3.3",
-    "@push.rocks/smartbucket": "^4.4.1",
+    "@push.rocks/smartbucket": "^4.5.1",
    "@push.rocks/smartcli": "^4.0.20",
-    "@push.rocks/smartdata": "^7.0.15",
+    "@push.rocks/smartconfig": "^6.0.1",
+    "@push.rocks/smartdata": "^7.1.0",
    "@push.rocks/smartfile": "^13.1.2",
-    "@push.rocks/smartlog": "^3.1.10",
+    "@push.rocks/smartlog": "^3.2.1",
    "@push.rocks/smartlog-destination-local": "^9.0.2",
    "@push.rocks/smartnetwork": "^4.4.0",
    "@push.rocks/smartopen": "^2.0.0",
    "@push.rocks/smartpath": "^6.0.0",
    "@push.rocks/smartpromise": "^4.2.3",
-    "mongodb": "^7.0.0"
+    "mongodb": "^7.1.1"
  },
  "files": [
    "ts/**/*",
@@ -59,7 +59,7 @@
    "dist_ts_web/**/*",
    "assets/**/*",
    "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
    "readme.md"
  ],
  "browserslist": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 # @git.zone/tsview

-A powerful developer tool for browsing and managing S3-compatible storage and MongoDB databases through a sleek web UI — with real-time change streaming baked in. Built with TypeScript, designed for developers who need quick, visual access to their data stores. 🚀
+A powerful developer tool for browsing and managing S3-compatible storage and MongoDB databases through a sleek web UI — with real-time change streaming baked in. Built with TypeScript, designed for developers who need quick, visual access to their data stores during development.

 ## Issue Reporting and Security

@@ -16,51 +16,11 @@ pnpm add -g @git.zone/tsview
 pnpm add @git.zone/tsview
 ```

-## Features ✨
-
-### 🗄️ S3 Storage Browser
-
- **Column View Navigation** — Mac Finder-style interface with resizable columns
- **List View** — Traditional key-based view with hierarchical navigation
- **Real-time Preview** — View images, JSON, text files, code, and more directly in the browser
- **Bucket Management** — Create, delete, and switch between buckets
- **File Operations** — Upload, download, delete objects
- **In-place Text Editing** — Edit text files directly in the browser with change tracking
- **Smart Content Type Detection** — Automatic recognition for 20+ file types
- **Breadcrumb Navigation** — Clickable path traversal
-
-### 🍃 MongoDB Browser
-
- **Database Explorer** — Hierarchical navigation through databases and collections
- **Database Overview** — Collection counts, data sizes, index stats at a glance
- **Document Viewer** — Paginated table view with JSON filter support
- **Document Editor** — Full CRUD with syntax-highlighted code editor and change tracking
- **Index Management** — View, create, and drop indexes
- **Collection Stats** — Document counts, sizes, storage metrics
- **Server Status** — Connection info, version, uptime
- **Show/Hide System Databases** — Toggle visibility of `admin`, `local`, `config`
-
-### ⚡ Real-Time Change Streaming
-
- **MongoDB Change Streams** — Live updates via native MongoDB change streams
- **S3 Change Detection** — Polling-based bucket monitoring with ETag comparison (5s intervals)
- **Activity Stream** — Combined timeline of all changes from both sources, filterable by type
- **Live Indicators** — Green dot + change count badges on active views
- **WebSocket Subscriptions** — Per-collection, per-bucket, or global activity feed
- **Auto-Reconnect** — Subscriptions automatically restored after connection loss
-
-### 🎨 Modern Web UI
-
- 🌙 Dark theme designed for developer comfort
- 📱 Responsive layout with resizable panels
- ⌨️ Context menus for quick actions
- 🔌 Everything bundled — zero external runtime dependencies in the browser
-
-## Quick Start 🚀
+## 🚀 Quick Start

 ### 1. Configure Your Connection

-Create a `.nogit/env.json` file in your project root:
+Create a `.nogit/env.json` file in your project root (auto-generated by `gitzone service`):

 ```json
 {
@@ -80,7 +40,50 @@ Create a `.nogit/env.json` file in your project root:
 tsview
 ```

-That's it! 🎉 Your browser will automatically open to the viewer interface.
+That's it! Your browser opens automatically to the viewer interface.
+
+## ✨ Features
+
+### 🗄️ S3 Storage Browser
+
+Powered by `dees-storage-browser` from `@design.estate/dees-catalog`:
+
+- **Column View Navigation** — Mac Finder-style interface with resizable columns
+- **List View** — Traditional key-based view with hierarchical navigation
+- **Real-time Preview** — View images, JSON, text, code, and more directly in the browser
+- **Bucket Management** — Create, delete, and switch between buckets
+- **File Operations** — Upload, download, delete, move, and copy objects
+- **In-place Text Editing** — Edit text files directly with change tracking
+- **Smart Content Type Detection** — Automatic recognition for 20+ file types
+- **Breadcrumb Navigation** — Clickable path traversal
+
+### 🍃 MongoDB Browser
+
+- **Database Explorer** — Hierarchical navigation through databases and collections
+- **Database Overview** — Collection counts, data sizes, index stats at a glance
+- **Document Viewer** — Paginated table view with JSON filter support
+- **Document Editor** — Full CRUD with syntax-highlighted code editor and change tracking
+- **Index Management** — View, create, and drop indexes
+- **Aggregation Pipeline** — Run aggregation queries directly
+- **Collection Stats** — Document counts, sizes, storage metrics
+- **Server Status** — Connection info, version, uptime
+- **Show/Hide System Databases** — Toggle visibility of `admin`, `local`, `config`
+
+### ⚡ Real-Time Change Streaming
+
+- **MongoDB Change Streams** — Live updates via native MongoDB change streams
+- **S3 Change Detection** — Polling-based bucket monitoring with ETag comparison (5s intervals)
+- **Activity Stream** — Combined timeline of all changes from both sources, filterable by type
+- **Live Indicators** — Green dot + change count badges on active views
+- **WebSocket Subscriptions** — Per-collection, per-bucket, or global activity feed
+- **Auto-Reconnect** — Subscriptions automatically restored after connection loss
+
+### 🎨 Modern Web UI
+
+- Dark theme designed for developer comfort
+- Responsive layout with resizable panels
+- Context menus for quick actions
+- Everything bundled — zero external runtime dependencies in the browser

 ## CLI Usage

@@ -113,7 +116,7 @@ const viewer = new TsView();
 await viewer.loadConfigFromEnv();

 // Option 2: Configure programmatically
-viewer.setS3Config({
+viewer.setStorageConfig({
  endpoint: 'localhost',
  port: 9000,
  accessKey: 'minioadmin',
@@ -127,7 +130,7 @@ viewer.setMongoConfig({
 });

 // Option 3: Cloud services
-viewer.setS3Config({
+viewer.setStorageConfig({
  endpoint: 's3.amazonaws.com',
  accessKey: 'AKIAXXXXXXX',
  accessSecret: 'your-secret-key',
@@ -153,7 +156,7 @@ await viewer.stop();

 ## Configuration

-### Project-level via `npmextra.json`
+### Project-level via `.smartconfig.json`

 ```json
 {
@@ -171,7 +174,7 @@ await viewer.stop();
 | `killIfBusy`  | `boolean` | `false` | Kill existing process if port is busy        |
 | `openBrowser` | `boolean` | `true`  | Automatically open browser on start          |

-**Port priority:** CLI `--port` flag → `npmextra.json` → auto-detect
+**Port priority:** CLI `--port` flag → `.smartconfig.json` → auto-detect

 ### Environment Variables (`.nogit/env.json`)

@@ -206,15 +209,15 @@ Or use individual variables:

 tsview works with any S3-compatible storage:

-| Provider                | Status                      |
-| ----------------------- | --------------------------- |
-| **MinIO**               | ✅ Perfect for local dev    |
-| **AWS S3**              | ✅ Amazon's object storage  |
-| **DigitalOcean Spaces** | ✅ Simple object storage    |
-| **Backblaze B2**        | ✅ S3-compatible API        |
-| **Cloudflare R2**       | ✅ Zero egress fees         |
-| **Wasabi**              | ✅ Hot cloud storage        |
-| **Self-hosted**         | ✅ Any S3-compatible server |
+| Provider                | Status                     |
+| ----------------------- | -------------------------- |
+| **MinIO**               | Perfect for local dev      |
+| **AWS S3**              | Amazon's object storage    |
+| **DigitalOcean Spaces** | Simple object storage      |
+| **Backblaze B2**        | S3-compatible API          |
+| **Cloudflare R2**       | Zero egress fees           |
+| **Wasabi**              | Hot cloud storage          |
+| **Self-hosted**         | Any S3-compatible server   |

 ## Supported File Types for Preview

@@ -226,11 +229,11 @@ tsview works with any S3-compatible storage:
 | **Data**      | `.csv`, `.xml`, `.yaml`, `.yml`                        |
 | **Documents** | `.pdf`                                                 |

-## Architecture
+## 🏗️ Architecture

 ```
 tsview/
-├── ts/                           # Backend
+├── ts/                           # Backend (Node.js)
 │   ├── api/                      # TypedRequest API handlers
 │   │   ├── handlers.s3.ts        #   S3 bucket & object operations
 │   │   └── handlers.mongodb.ts   #   MongoDB CRUD & admin operations
@@ -241,23 +244,24 @@ tsview/
 │   │   └── interfaces.streaming.ts          # Subscription interfaces
 │   ├── interfaces/               # Shared TypeScript interfaces
 │   └── tsview.classes.tsview.ts  # Main class
-├── ts_web/                       # Frontend
+├── ts_web/                       # Frontend (bundled via esbuild → base64ts)
 │   ├── elements/                 # Web components (LitElement)
 │   │   ├── tsview-app.ts         #   App shell + navigation
-│   │   ├── tsview-s3-*.ts        #   S3 browser components
 │   │   ├── tsview-mongo-*.ts     #   MongoDB browser components
 │   │   └── tsview-activity-stream.ts  # Real-time activity feed
+│   ├── adapters/                 # Data provider adapters
+│   │   └── s3-data-provider.ts   #   IStorageDataProvider for dees-storage-browser
 │   ├── services/                 # API + WebSocket clients
 │   ├── styles/                   # Dark theme
 │   └── utilities/                # Formatting helpers
-└── cli.ts.js                     # CLI entry point
+└── .smartconfig.json             # Build & runtime config
 ```

 ### How It Works

 1. **Backend** — A `TypedServer` serves the bundled web UI and exposes a typed API via `TypedRequest` over HTTP. A `TypedSocket` WebSocket layer handles real-time streaming subscriptions.

-2. **Frontend** — LitElement-based web components communicate with the backend via `TypedRequest`. The `ChangeStreamService` connects over WebSocket and distributes real-time events to active views via RxJS Subjects.
+2. **Frontend** — LitElement-based web components communicate with the backend via `TypedRequest`. The S3 browser uses `dees-storage-browser` from `@design.estate/dees-catalog` with a custom `IStorageDataProvider` adapter. The `ChangeStreamService` connects over WebSocket and distributes real-time events to active views via RxJS Subjects.

 3. **Streaming** — The `ChangeStreamManager` creates MongoDB Change Streams and S3 BucketWatchers on demand (one per subscribed resource). Changes are pushed to subscribed clients and accumulated in a 1000-event ring buffer for the Activity Stream view.

@@ -283,7 +287,7 @@ pnpm test

 ## License and Legal Information

-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.

 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

--- a/readme.plan.md
+++ b/readme.plan.md
@@ -10,7 +10,7 @@ tsview/
 ├── cli.ts.js                       # Dev CLI (uses tsrun to run cli.child.ts)
 ├── cli.child.ts                    # Dev CLI entry (imports ts/index.js)
 ├── package.json                    # bin: { "tsview": "cli.js" }
-├── npmextra.json                   # tsbundle config for UI bundling
+├── .smartconfig.json               # tsbundle/tswatch config
 ├── tsconfig.json
 ├── readme.md
 ├── readme.hints.md
--- a/test/test.tsview.ts
+++ b/test/test.tsview.ts
@@ -14,8 +14,8 @@ tap.test('should create TsView instance', async () => {
 tap.test('should have config methods', async () => {
  const viewer = new tsview.TsView();

-  // Set S3 config
-  viewer.setS3Config({
+  // Set storage config
+  viewer.setStorageConfig({
    endpoint: 'localhost',
    port: 9000,
    accessKey: 'test',
@@ -23,7 +23,7 @@ tap.test('should have config methods', async () => {
    useSsl: false,
  });

-  expect(viewer.config.hasS3()).toBeTrue();
+  expect(viewer.config.hasStorage()).toBeTrue();
  expect(viewer.config.hasMongo()).toBeFalse();

  // Set MongoDB config
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@git.zone/tsview',
-  version: '1.10.2',
+  version: '1.12.4',
  description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }
--- a/ts/api/handlers.s3.ts
+++ b/ts/api/handlers.s3.ts
@@ -119,7 +119,7 @@ export async function registerS3Handlers(
            }
          }

-          const objects: interfaces.IS3Object[] = [];
+          const objects: interfaces.IStorageObject[] = [];
          const prefixSet = new Set<string>();

          // List files in current directory
--- a/ts/bundled_ui.ts
+++ b/ts/bundled_ui.ts
--- a/ts/config/classes.config.ts
+++ b/ts/config/classes.config.ts
@@ -7,7 +7,7 @@ import type * as interfaces from '../interfaces/index.js';
 * or accepts programmatic configuration.
 */
 export class TsViewConfig {
-  private s3Config: interfaces.IS3Config | null = null;
+  private storageConfig: interfaces.IStorageConfig | null = null;
  private mongoConfig: interfaces.IMongoConfig | null = null;

  /**
@@ -29,7 +29,7 @@ export class TsViewConfig {

    // Parse S3 config
    if (envConfig.S3_HOST || envConfig.S3_ENDPOINT) {
-      this.s3Config = {
+      this.storageConfig = {
        endpoint: envConfig.S3_ENDPOINT || envConfig.S3_HOST || '',
        port: envConfig.S3_PORT ? parseInt(envConfig.S3_PORT, 10) : undefined,
        accessKey: envConfig.S3_ACCESSKEY || '',
@@ -69,8 +69,8 @@ export class TsViewConfig {
  /**
   * Set S3 configuration programmatically
   */
-  public setS3Config(config: interfaces.IS3Config): void {
-    this.s3Config = config;
+  public setStorageConfig(config: interfaces.IStorageConfig): void {
+    this.storageConfig = config;
  }

  /**
@@ -83,8 +83,8 @@ export class TsViewConfig {
  /**
   * Get S3 configuration
   */
-  public getS3Config(): interfaces.IS3Config | null {
-    return this.s3Config;
+  public getStorageConfig(): interfaces.IStorageConfig | null {
+    return this.storageConfig;
  }

  /**
@@ -97,8 +97,8 @@ export class TsViewConfig {
  /**
   * Check if S3 is configured
   */
-  public hasS3(): boolean {
-    return this.s3Config !== null && !!this.s3Config.endpoint && !!this.s3Config.accessKey;
+  public hasStorage(): boolean {
+    return this.storageConfig !== null && !!this.storageConfig.endpoint && !!this.storageConfig.accessKey;
  }

  /**
--- a/ts/interfaces/index.ts
+++ b/ts/interfaces/index.ts
@@ -1,9 +1,9 @@
 import type * as plugins from '../plugins.js';

 /**
- * Configuration for S3 connection
+ * Configuration for storage (S3-compatible) connection
 */
-export interface IS3Config {
+export interface IStorageConfig {
  endpoint: string;
  port?: number;
  accessKey: string;
@@ -24,14 +24,14 @@ export interface IMongoConfig {
 * Combined configuration for tsview
 */
 export interface ITsViewConfig {
-  s3?: IS3Config;
+  s3?: IStorageConfig;
  mongo?: IMongoConfig;
 }

 /**
- * Configuration from npmextra.json for @git.zone/tsview
+ * Configuration from smartconfig.json for @git.zone/tsview
 */
-export interface INpmextraConfig {
+export interface ISmartconfigConfig {
  port?: number;           // Fixed port to use (optional)
  killIfBusy?: boolean;    // Kill process on port if busy (default: false)
  openBrowser?: boolean;   // Open browser on start (default: true)
@@ -97,7 +97,7 @@ export interface IReq_DeleteBucket extends plugins.typedrequestInterfaces.implem
  };
 }

-export interface IS3Object {
+export interface IStorageObject {
  key: string;
  size?: number;
  lastModified?: string;
@@ -115,7 +115,7 @@ export interface IReq_ListObjects extends plugins.typedrequestInterfaces.impleme
    delimiter?: string;
  };
  response: {
-    objects: IS3Object[];
+    objects: IStorageObject[];
    prefixes: string[];
  };
 }
--- a/ts/plugins.ts
+++ b/ts/plugins.ts
@@ -6,7 +6,7 @@ export { path };
 import * as early from '@push.rocks/early';
 early.start('tsview');

-import * as npmextra from '@push.rocks/npmextra';
+import * as smartconfig from '@push.rocks/smartconfig';
 import * as smartbucket from '@push.rocks/smartbucket';
 import * as smartcli from '@push.rocks/smartcli';
 import * as smartdata from '@push.rocks/smartdata';
@@ -21,7 +21,7 @@ import * as smartrx from '@push.rocks/smartrx';

 export {
  early,
-  npmextra,
+  smartconfig,
  smartbucket,
  smartcli,
  smartdata,
--- a/ts/server/classes.viewserver.ts
+++ b/ts/server/classes.viewserver.ts
@@ -39,7 +39,7 @@ export class ViewServer {
    this.changeStreamManager = new ChangeStreamManager(this.tsview);

    // Register API handlers directly to server's router
-    if (this.tsview.config.hasS3()) {
+    if (this.tsview.config.hasStorage()) {
      await registerS3Handlers(this.typedServer.typedrouter, this.tsview);
    }

@@ -107,9 +107,9 @@ export class ViewServer {
      )
    );

-    // Subscribe to S3 bucket changes
+    // Subscribe to storage bucket changes
    typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeS3>(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_SubscribeStorage>(
        'subscribeS3',
        async (reqData, context) => {
          const connectionId = this.getConnectionId(context);
@@ -127,9 +127,9 @@ export class ViewServer {
      )
    );

-    // Unsubscribe from S3 bucket changes
+    // Unsubscribe from storage bucket changes
    typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeS3>(
+      new plugins.typedrequest.TypedHandler<interfaces.IReq_UnsubscribeStorage>(
        'unsubscribeS3',
        async (reqData, context) => {
          const connectionId = this.getConnectionId(context);
--- a/ts/streaming/classes.changestream-manager.ts
+++ b/ts/streaming/classes.changestream-manager.ts
@@ -1,7 +1,7 @@
 import * as plugins from '../plugins.js';
 import type { TsView } from '../tsview.classes.tsview.js';
 import type * as interfaces from './interfaces.streaming.js';
-import type { IS3ChangeEvent } from '@push.rocks/smartbucket';
+import type { IStorageChangeEvent } from './interfaces.streaming.js';

 /**
 * Subscription entry tracking a client's subscription to a resource
@@ -21,19 +21,19 @@ interface IMongoWatcherEntry {
 }

 /**
- * S3 watcher entry
+ * Storage watcher entry
 */
-interface IS3WatcherEntry {
+interface IStorageWatcherEntry {
  watcher: plugins.smartbucket.BucketWatcher;
  subscriptions: Map<string, ISubscriptionEntry>; // connectionId -> subscription
 }

 /**
- * ChangeStreamManager manages real-time change streaming for both MongoDB and S3.
+ * ChangeStreamManager manages real-time change streaming for both MongoDB and storage.
 *
 * Features:
 * - MongoDB Change Streams for real-time database updates
- * - S3 BucketWatcher for polling-based S3 change detection
+ * - S3 BucketWatcher for polling-based storage change detection
 * - Subscription management per WebSocket client
 * - Activity stream with ring buffer for recent events
 * - Automatic cleanup on client disconnect
@@ -45,8 +45,8 @@ export class ChangeStreamManager {
  // MongoDB watchers: "db/collection" -> watcher entry
  private mongoWatchers: Map<string, IMongoWatcherEntry> = new Map();

-  // S3 watchers: "bucket/prefix" -> watcher entry
-  private s3Watchers: Map<string, IS3WatcherEntry> = new Map();
+  // Storage watchers: "bucket/prefix" -> watcher entry
+  private storageWatchers: Map<string, IStorageWatcherEntry> = new Map();

  // Activity subscribers: connectionId -> subscription entry
  private activitySubscribers: Map<string, ISubscriptionEntry> = new Map();
@@ -57,7 +57,7 @@ export class ChangeStreamManager {

  // Global watchers for the activity stream (started lazily on first subscriber)
  private globalMongoWatcher: plugins.mongodb.ChangeStream | null = null;
-  private globalS3Watchers: Map<string, plugins.smartbucket.BucketWatcher> = new Map();
+  private globalStorageWatchers: Map<string, plugins.smartbucket.BucketWatcher> = new Map();
  private globalWatchersActive: boolean = false;

  // Counter for generating unique subscription IDs
@@ -89,9 +89,9 @@ export class ChangeStreamManager {
  }

  /**
-   * Get the S3 key for a bucket/prefix pair
+   * Get the storage key for a bucket/prefix pair
   */
-  private getS3Key(bucket: string, prefix?: string): string {
+  private getStorageKey(bucket: string, prefix?: string): string {
    return prefix ? `${bucket}/${prefix}` : bucket;
  }

@@ -280,24 +280,24 @@ export class ChangeStreamManager {
  }

  // ===========================================
-  // S3 Change Watching
+  // Storage Change Watching
  // ===========================================

  /**
-   * Subscribe a client to S3 bucket/prefix changes
+   * Subscribe a client to storage bucket/prefix changes
   */
  public async subscribeToS3(
    connectionId: string,
    bucket: string,
    prefix?: string
  ): Promise<{ success: boolean; subscriptionId: string }> {
-    const key = this.getS3Key(bucket, prefix);
+    const key = this.getStorageKey(bucket, prefix);

-    let entry = this.s3Watchers.get(key);
+    let entry = this.storageWatchers.get(key);

    // Create watcher if it doesn't exist
    if (!entry) {
-      const watcher = await this.createS3Watcher(bucket, prefix);
+      const watcher = await this.createStorageWatcher(bucket, prefix);
      if (!watcher) {
        return { success: false, subscriptionId: '' };
      }
@@ -306,7 +306,7 @@ export class ChangeStreamManager {
        watcher,
        subscriptions: new Map(),
      };
-      this.s3Watchers.set(key, entry);
+      this.storageWatchers.set(key, entry);
    }

    // Add subscription
@@ -317,47 +317,47 @@ export class ChangeStreamManager {
      createdAt: new Date(),
    });

-    console.log(`[ChangeStream] S3 subscription added: ${key} for connection ${connectionId}`);
+    console.log(`[ChangeStream] Storage subscription added: ${key} for connection ${connectionId}`);
    return { success: true, subscriptionId };
  }

  /**
-   * Unsubscribe a client from S3 bucket/prefix changes
+   * Unsubscribe a client from storage bucket/prefix changes
   */
  public async unsubscribeFromS3(
    connectionId: string,
    bucket: string,
    prefix?: string
  ): Promise<boolean> {
-    const key = this.getS3Key(bucket, prefix);
-    const entry = this.s3Watchers.get(key);
+    const key = this.getStorageKey(bucket, prefix);
+    const entry = this.storageWatchers.get(key);

    if (!entry) {
      return false;
    }

    entry.subscriptions.delete(connectionId);
-    console.log(`[ChangeStream] S3 subscription removed: ${key} for connection ${connectionId}`);
+    console.log(`[ChangeStream] Storage subscription removed: ${key} for connection ${connectionId}`);

    // Close watcher if no more subscribers
    if (entry.subscriptions.size === 0) {
-      await this.closeS3Watcher(key);
+      await this.closeStorageWatcher(key);
    }

    return true;
  }

  /**
-   * Create an S3 bucket watcher
+   * Create a storage bucket watcher
   */
-  private async createS3Watcher(
+  private async createStorageWatcher(
    bucket: string,
    prefix?: string
  ): Promise<plugins.smartbucket.BucketWatcher | null> {
    try {
      const smartbucket = await this.tsview.getSmartBucket();
      if (!smartbucket) {
-        console.error('[ChangeStream] S3 not configured');
+        console.error('[ChangeStream] Storage not configured');
        return null;
      }

@@ -371,10 +371,10 @@ export class ChangeStreamManager {
      });

      // Subscribe to change events
-      watcher.changeSubject.subscribe((eventOrEvents: IS3ChangeEvent | IS3ChangeEvent[]) => {
+      watcher.changeSubject.subscribe((eventOrEvents: IStorageChangeEvent | IStorageChangeEvent[]) => {
        const events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
        for (const event of events) {
-          this.handleS3Change(bucket, prefix, event);
+          this.handleStorageChange(bucket, prefix, event);
        }
      });

@@ -382,41 +382,41 @@ export class ChangeStreamManager {
      await watcher.start();
      await watcher.readyDeferred.promise;

-      console.log(`[ChangeStream] S3 watcher created for ${bucket}${prefix ? '/' + prefix : ''}`);
+      console.log(`[ChangeStream] Storage watcher created for ${bucket}${prefix ? '/' + prefix : ''}`);
      return watcher;
    } catch (error) {
-      console.error(`[ChangeStream] Failed to create S3 watcher for ${bucket}:`, error);
+      console.error(`[ChangeStream] Failed to create storage watcher for ${bucket}:`, error);
      return null;
    }
  }

  /**
-   * Handle an S3 change event
+   * Handle a storage change event
   */
-  private handleS3Change(bucket: string, prefix: string | undefined, event: IS3ChangeEvent): void {
-    const key = this.getS3Key(bucket, prefix);
-    const entry = this.s3Watchers.get(key);
+  private handleStorageChange(bucket: string, prefix: string | undefined, event: IStorageChangeEvent): void {
+    const key = this.getStorageKey(bucket, prefix);
+    const entry = this.storageWatchers.get(key);

    if (!entry) return;

    // Only add to activity buffer if global watchers are NOT active.
-    // When active, the global S3 watchers already feed the activity stream.
+    // When active, the global storage watchers already feed the activity stream.
    if (!this.globalWatchersActive) {
-      this.addToActivityBuffer('s3', event);
+      this.addToActivityBuffer('storage', event);
    }

    // Push to all subscribed clients
-    this.pushS3ChangeToClients(key, event);
+    this.pushStorageChangeToClients(key, event);
  }

  /**
-   * Push S3 change to subscribed clients
+   * Push storage change to subscribed clients
   */
-  private async pushS3ChangeToClients(
+  private async pushStorageChangeToClients(
    key: string,
-    event: IS3ChangeEvent
+    event: IStorageChangeEvent
  ): Promise<void> {
-    const entry = this.s3Watchers.get(key);
+    const entry = this.storageWatchers.get(key);
    if (!entry || !this.typedSocket) return;

    for (const [connectionId, _sub] of entry.subscriptions) {
@@ -426,31 +426,31 @@ export class ChangeStreamManager {
        });

        if (connection) {
-          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushS3Change>(
+          const request = this.typedSocket.createTypedRequest<interfaces.IReq_PushStorageChange>(
            'pushS3Change',
            connection
          );
          await request.fire({ event });
        }
      } catch (error) {
-        console.error(`[ChangeStream] Failed to push S3 change to ${connectionId}:`, error);
+        console.error(`[ChangeStream] Failed to push storage change to ${connectionId}:`, error);
      }
    }
  }

  /**
-   * Close an S3 bucket watcher
+   * Close a storage bucket watcher
   */
-  private async closeS3Watcher(key: string): Promise<void> {
-    const entry = this.s3Watchers.get(key);
+  private async closeStorageWatcher(key: string): Promise<void> {
+    const entry = this.storageWatchers.get(key);
    if (!entry) return;

    try {
      await entry.watcher.stop();
-      this.s3Watchers.delete(key);
-      console.log(`[ChangeStream] S3 watcher closed for ${key}`);
+      this.storageWatchers.delete(key);
+      console.log(`[ChangeStream] Storage watcher closed for ${key}`);
    } catch (error) {
-      console.error(`[ChangeStream] Error closing S3 watcher for ${key}:`, error);
+      console.error(`[ChangeStream] Error closing storage watcher for ${key}:`, error);
    }
  }

@@ -515,11 +515,11 @@ export class ChangeStreamManager {
   * Add an event to the activity buffer
   */
  private addToActivityBuffer(
-    source: 'mongodb' | 's3',
-    event: interfaces.IMongoChangeEvent | IS3ChangeEvent
+    source: 'mongodb' | 'storage',
+    event: interfaces.IMongoChangeEvent | IStorageChangeEvent
  ): void {
    const activityEvent: interfaces.IActivityEvent = {
-      id: `evt_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      id: `evt_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`,
      source,
      event,
      timestamp: new Date().toISOString(),
@@ -567,7 +567,7 @@ export class ChangeStreamManager {

  /**
   * Start global watchers when the first activity subscriber connects.
-   * These watch all MongoDB and S3 activity and feed into the activity buffer.
+   * These watch all MongoDB and storage activity and feed into the activity buffer.
   */
  private async startGlobalWatchers(): Promise<void> {
    if (this.globalWatchersActive) return;
@@ -577,7 +577,7 @@ export class ChangeStreamManager {

    await Promise.all([
      this.startGlobalMongoWatcher(),
-      this.startGlobalS3Watchers(),
+      this.startGlobalStorageWatchers(),
    ]);
  }

@@ -628,13 +628,13 @@ export class ChangeStreamManager {
  }

  /**
-   * Start S3 bucket watchers — one BucketWatcher per bucket.
+   * Start storage bucket watchers — one BucketWatcher per bucket.
   */
-  private async startGlobalS3Watchers(): Promise<void> {
+  private async startGlobalStorageWatchers(): Promise<void> {
    try {
      const smartbucket = await this.tsview.getSmartBucket();
      if (!smartbucket) {
-        console.log('[ChangeStream] S3 not configured, skipping global S3 watchers');
+        console.log('[ChangeStream] Storage not configured, skipping global storage watchers');
        return;
      }

@@ -652,26 +652,26 @@ export class ChangeStreamManager {
            bufferTimeMs: 500,
          });

-          watcher.changeSubject.subscribe((eventOrEvents: IS3ChangeEvent | IS3ChangeEvent[]) => {
+          watcher.changeSubject.subscribe((eventOrEvents: IStorageChangeEvent | IStorageChangeEvent[]) => {
            const events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
            for (const event of events) {
-              this.addToActivityBuffer('s3', event);
+              this.addToActivityBuffer('storage', event);
            }
          });

          await watcher.start();
          await watcher.readyDeferred.promise;

-          this.globalS3Watchers.set(bucketName, watcher);
-          console.log(`[ChangeStream] Global S3 watcher started for bucket: ${bucketName}`);
+          this.globalStorageWatchers.set(bucketName, watcher);
+          console.log(`[ChangeStream] Global storage watcher started for bucket: ${bucketName}`);
        } catch (bucketError) {
-          console.error(`[ChangeStream] Failed to start global S3 watcher for bucket ${bucketName}:`, bucketError);
+          console.error(`[ChangeStream] Failed to start global storage watcher for bucket ${bucketName}:`, bucketError);
        }
      }

-      console.log(`[ChangeStream] Global S3 watchers started (${this.globalS3Watchers.size}/${bucketNames.length} buckets)`);
+      console.log(`[ChangeStream] Global storage watchers started (${this.globalStorageWatchers.size}/${bucketNames.length} buckets)`);
    } catch (error) {
-      console.error('[ChangeStream] Failed to start global S3 watchers:', error);
+      console.error('[ChangeStream] Failed to start global storage watchers:', error);
    }
  }

@@ -694,16 +694,16 @@ export class ChangeStreamManager {
      this.globalMongoWatcher = null;
    }

-    // Close all global S3 watchers
-    for (const [bucketName, watcher] of this.globalS3Watchers) {
+    // Close all global storage watchers
+    for (const [bucketName, watcher] of this.globalStorageWatchers) {
      try {
        await watcher.stop();
-        console.log(`[ChangeStream] Global S3 watcher stopped for bucket: ${bucketName}`);
+        console.log(`[ChangeStream] Global storage watcher stopped for bucket: ${bucketName}`);
      } catch (error) {
-        console.error(`[ChangeStream] Error closing global S3 watcher for ${bucketName}:`, error);
+        console.error(`[ChangeStream] Error closing global storage watcher for ${bucketName}:`, error);
      }
    }
-    this.globalS3Watchers.clear();
+    this.globalStorageWatchers.clear();

    this.globalWatchersActive = false;
    console.log('[ChangeStream] Global watchers stopped');
@@ -729,12 +729,12 @@ export class ChangeStreamManager {
      }
    }

-    // Clean up S3 subscriptions
-    for (const [key, entry] of this.s3Watchers) {
+    // Clean up storage subscriptions
+    for (const [key, entry] of this.storageWatchers) {
      if (entry.subscriptions.has(connectionId)) {
        entry.subscriptions.delete(connectionId);
        if (entry.subscriptions.size === 0) {
-          await this.closeS3Watcher(key);
+          await this.closeStorageWatcher(key);
        }
      }
    }
@@ -762,9 +762,9 @@ export class ChangeStreamManager {
      await this.closeMongoWatcher(key);
    }

-    // Close all S3 watchers
-    for (const key of this.s3Watchers.keys()) {
-      await this.closeS3Watcher(key);
+    // Close all storage watchers
+    for (const key of this.storageWatchers.keys()) {
+      await this.closeStorageWatcher(key);
    }

    // Clear activity buffer and subscribers
--- a/ts/streaming/interfaces.streaming.ts
+++ b/ts/streaming/interfaces.streaming.ts
@@ -1,7 +1,8 @@
 import type * as plugins from '../plugins.js';

-// Re-export S3 change event from smartbucket
-export type { IS3ChangeEvent } from '@push.rocks/smartbucket';
+// Re-export storage change event from smartbucket
+import type { IStorageChangeEvent } from '@push.rocks/smartbucket';
+export type { IStorageChangeEvent };

 /**
 * MongoDB change event - wraps smartdata watcher output
@@ -24,8 +25,8 @@ export interface IMongoChangeEvent {
 */
 export interface IActivityEvent {
  id: string;
-  source: 'mongodb' | 's3';
-  event: IMongoChangeEvent | import('@push.rocks/smartbucket').IS3ChangeEvent;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
  timestamp: string;
 }

@@ -69,11 +70,11 @@ export interface IReq_UnsubscribeMongo extends plugins.typedrequestInterfaces.im
 }

 /**
- * Subscribe to S3 bucket/prefix changes
+ * Subscribe to storage bucket/prefix changes
 */
-export interface IReq_SubscribeS3 extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_SubscribeStorage extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_SubscribeS3
+  IReq_SubscribeStorage
 > {
  method: 'subscribeS3';
  request: {
@@ -87,11 +88,11 @@ export interface IReq_SubscribeS3 extends plugins.typedrequestInterfaces.impleme
 }

 /**
- * Unsubscribe from S3 bucket/prefix changes
+ * Unsubscribe from storage bucket/prefix changes
 */
-export interface IReq_UnsubscribeS3 extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_UnsubscribeStorage extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_UnsubscribeS3
+  IReq_UnsubscribeStorage
 > {
  method: 'unsubscribeS3';
  request: {
@@ -104,7 +105,7 @@ export interface IReq_UnsubscribeS3 extends plugins.typedrequestInterfaces.imple
 }

 /**
- * Subscribe to activity stream (all changes from MongoDB and S3)
+ * Subscribe to activity stream (all changes from MongoDB and storage)
 */
 export interface IReq_SubscribeActivity extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
@@ -169,15 +170,15 @@ export interface IReq_PushMongoChange extends plugins.typedrequestInterfaces.imp
 }

 /**
- * Server pushes S3 change to client
+ * Server pushes storage change to client
 */
-export interface IReq_PushS3Change extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_PushStorageChange extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_PushS3Change
+  IReq_PushStorageChange
 > {
  method: 'pushS3Change';
  request: {
-    event: import('@push.rocks/smartbucket').IS3ChangeEvent;
+    event: IStorageChangeEvent;
  };
  response: {
    received: boolean;
@@ -206,7 +207,7 @@ export interface IReq_PushActivityEvent extends plugins.typedrequestInterfaces.i
 export interface ISubscriptionTag extends plugins.typedrequestInterfaces.ITag {
  name: 'subscription';
  payload: {
-    type: 'mongo' | 's3' | 'activity';
+    type: 'mongo' | 'storage' | 'activity';
    key: string; // e.g., "db/collection" or "bucket/prefix" or "activity"
  };
 }
--- a/ts/tsview.classes.tsview.ts
+++ b/ts/tsview.classes.tsview.ts
@@ -33,8 +33,8 @@ export class TsView {
  /**
   * Set S3 configuration programmatically
   */
-  public setS3Config(config: interfaces.IS3Config): void {
-    this.config.setS3Config(config);
+  public setStorageConfig(config: interfaces.IStorageConfig): void {
+    this.config.setStorageConfig(config);
  }

  /**
@@ -52,17 +52,17 @@ export class TsView {
      return this.smartbucketInstance;
    }

-    const s3Config = this.config.getS3Config();
-    if (!s3Config) {
+    const storageConfig = this.config.getStorageConfig();
+    if (!storageConfig) {
      return null;
    }

    this.smartbucketInstance = new plugins.smartbucket.SmartBucket({
-      endpoint: s3Config.endpoint,
-      port: s3Config.port,
-      accessKey: s3Config.accessKey,
-      accessSecret: s3Config.accessSecret,
-      useSsl: s3Config.useSsl ?? true,
+      endpoint: storageConfig.endpoint,
+      port: storageConfig.port,
+      accessKey: storageConfig.accessKey,
+      accessSecret: storageConfig.accessSecret,
+      useSsl: storageConfig.useSsl ?? true,
    });

    return this.smartbucketInstance;
@@ -103,11 +103,11 @@ export class TsView {
  }

  /**
-   * Load configuration from npmextra.json
+   * Load configuration from smartconfig.json
   */
-  private loadNpmextraConfig(cwd?: string): interfaces.INpmextraConfig {
-    const npmextra = new plugins.npmextra.Npmextra(cwd || process.cwd());
-    const config = npmextra.dataFor<interfaces.INpmextraConfig>('@git.zone/tsview', {});
+  private loadSmartconfigConfig(cwd?: string): interfaces.ISmartconfigConfig {
+    const smartconfigInstance = new plugins.smartconfig.Smartconfig(cwd || process.cwd());
+    const config = smartconfigInstance.dataFor<interfaces.ISmartconfigConfig>('@git.zone/tsview', {});
    return config || {};
  }

@@ -135,7 +135,7 @@ export class TsView {
   * @param cliPort - Optional port number from CLI (highest priority)
   */
  public async start(cliPort?: number): Promise<number> {
-    const npmextraConfig = await this.loadNpmextraConfig();
+    const smartconfigConfig = await this.loadSmartconfigConfig();

    let port: number;
    let portWasExplicitlySet = false;
@@ -144,9 +144,9 @@ export class TsView {
      // CLI has highest priority
      port = cliPort;
      portWasExplicitlySet = true;
-    } else if (npmextraConfig.port) {
+    } else if (smartconfigConfig.port) {
      // Config port specified
-      port = npmextraConfig.port;
+      port = smartconfigConfig.port;
      portWasExplicitlySet = true;
    } else {
      // Auto-find free port
@@ -158,11 +158,11 @@ export class TsView {
    const isFree = await network.isLocalPortUnused(port);

    if (!isFree) {
-      if (npmextraConfig.killIfBusy) {
+      if (smartconfigConfig.killIfBusy) {
        console.log(`Port ${port} is busy. Killing existing process...`);
        await this.killProcessOnPort(port);
      } else if (portWasExplicitlySet) {
-        throw new Error(`Port ${port} is busy. Set "killIfBusy": true in npmextra.json to auto-kill, or use a different port.`);
+        throw new Error(`Port ${port} is busy. Set "killIfBusy": true in smartconfig.json to auto-kill, or use a different port.`);
      } else {
        // Auto port was already free, shouldn't happen, but fallback
        port = await this.findFreePort(port + 1);
@@ -175,7 +175,7 @@ export class TsView {
    console.log(`TsView server started on http://localhost:${port}`);

    // Open browser (default: true, can be disabled via config)
-    const shouldOpenBrowser = npmextraConfig.openBrowser !== false;
+    const shouldOpenBrowser = smartconfigConfig.openBrowser !== false;
    if (shouldOpenBrowser) {
      try {
        await plugins.smartopen.openUrl(`http://localhost:${port}`);
--- a/ts/tsview.cli.ts
+++ b/ts/tsview.cli.ts
@@ -19,7 +19,7 @@ export class TsViewCli {
    this.smartcli.standardCommand().subscribe(async (argvArg) => {
      await this.startViewer({
        port: argvArg.port as number | undefined,
-        s3Only: false,
+        storageOnly: false,
        mongoOnly: false,
      });
    });
@@ -29,7 +29,7 @@ export class TsViewCli {
    s3Command.subscribe(async (argvArg) => {
      await this.startViewer({
        port: argvArg.port as number | undefined,
-        s3Only: true,
+        storageOnly: true,
        mongoOnly: false,
      });
    });
@@ -39,7 +39,7 @@ export class TsViewCli {
    mongoCommand.subscribe(async (argvArg) => {
      await this.startViewer({
        port: argvArg.port as number | undefined,
-        s3Only: false,
+        storageOnly: false,
        mongoOnly: true,
      });
    });
@@ -56,7 +56,7 @@ export class TsViewCli {
   */
  private async startViewer(options: {
    port?: number;
-    s3Only: boolean;
+    storageOnly: boolean;
    mongoOnly: boolean;
  }): Promise<void> {
    console.log('Starting TsView...');
@@ -67,10 +67,10 @@ export class TsViewCli {
    await viewer.loadConfigFromEnv();

    // Check what's configured
-    const hasS3 = viewer.config.hasS3();
+    const hasStorage = viewer.config.hasStorage();
    const hasMongo = viewer.config.hasMongo();

-    if (!hasS3 && !hasMongo) {
+    if (!hasStorage && !hasMongo) {
      console.error('Error: No S3 or MongoDB configuration found.');
      console.error('Please create .nogit/env.json with your configuration.');
      console.error('');
@@ -87,7 +87,7 @@ export class TsViewCli {
      process.exit(1);
    }

-    if (options.s3Only && !hasS3) {
+    if (options.storageOnly && !hasStorage) {
      console.error('Error: S3 configuration not found in .nogit/env.json');
      process.exit(1);
    }
@@ -98,7 +98,7 @@ export class TsViewCli {
    }

    // Log what's available
-    if (hasS3) {
+    if (hasStorage) {
      console.log('S3 storage configured');
    }
    if (hasMongo) {
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@git.zone/tsview',
-  version: '1.10.2',
+  version: '1.12.4',
  description: 'A CLI tool for viewing S3 and MongoDB data with a web UI'
 }
--- a/ts_web/adapters/s3-data-provider.ts
+++ b/ts_web/adapters/s3-data-provider.ts
@@ -0,0 +1,41 @@
+import type { IStorageDataProvider } from '@design.estate/dees-catalog';
+import { apiService } from '../services/index.js';
+
+/**
+ * Adapter that implements IStorageDataProvider by delegating to tsview's ApiService
+ */
+export class TsviewS3DataProvider implements IStorageDataProvider {
+  async listObjects(bucket: string, prefix?: string, delimiter?: string) {
+    return apiService.listObjects(bucket, prefix, delimiter);
+  }
+
+  async getObject(bucket: string, key: string) {
+    return apiService.getObject(bucket, key);
+  }
+
+  async putObject(bucket: string, key: string, base64Content: string, contentType: string) {
+    return apiService.putObject(bucket, key, base64Content, contentType);
+  }
+
+  async deleteObject(bucket: string, key: string) {
+    return apiService.deleteObject(bucket, key);
+  }
+
+  async deletePrefix(bucket: string, prefix: string) {
+    return apiService.deletePrefix(bucket, prefix);
+  }
+
+  async getObjectUrl(bucket: string, key: string) {
+    return apiService.getObjectUrl(bucket, key);
+  }
+
+  async moveObject(bucket: string, sourceKey: string, destKey: string) {
+    return apiService.moveObject(bucket, sourceKey, destKey);
+  }
+
+  async movePrefix(bucket: string, sourcePrefix: string, destPrefix: string) {
+    return apiService.movePrefix(bucket, sourcePrefix, destPrefix);
+  }
+}
+
+export const s3DataProvider = new TsviewS3DataProvider();
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -1,12 +1,6 @@
 // Main app shell
 export * from './tsview-app.js';

-// S3 components
-export * from './tsview-s3-browser.js';
-export * from './tsview-s3-columns.js';
-export * from './tsview-s3-keys.js';
-export * from './tsview-s3-preview.js';
-
 // MongoDB components
 export * from './tsview-mongo-browser.js';
 export * from './tsview-mongo-collections.js';
--- a/ts_web/elements/tsview-activity-stream.ts
+++ b/ts_web/elements/tsview-activity-stream.ts
@@ -1,10 +1,11 @@
 import * as plugins from '../plugins.js';
-import { changeStreamService, type IActivityEvent, type IMongoChangeEvent, type IS3ChangeEvent } from '../services/index.js';
+import { changeStreamService, type IActivityEvent, type IMongoChangeEvent } from '../services/index.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
 import { themeStyles } from '../styles/index.js';

 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;

-type TFilterMode = 'all' | 'mongodb' | 's3';
+type TFilterMode = 'all' | 'mongodb' | 'storage';

@customElement('tsview-activity-stream')
 export class TsviewActivityStream extends DeesElement {
@@ -426,8 +427,8 @@ export class TsviewActivityStream extends DeesElement {
      const mongoEvent = event.event as IMongoChangeEvent;
      return `${mongoEvent.database}.${mongoEvent.collection}`;
    } else {
-      const s3Event = event.event as IS3ChangeEvent;
-      return s3Event.bucket;
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.bucket;
    }
  }

@@ -439,8 +440,8 @@ export class TsviewActivityStream extends DeesElement {
      }
      return '';
    } else {
-      const s3Event = event.event as IS3ChangeEvent;
-      return s3Event.key;
+      const storageEvent = event.event as IStorageChangeEvent;
+      return storageEvent.key;
    }
  }

@@ -464,12 +465,12 @@ export class TsviewActivityStream extends DeesElement {
        })
      );
    } else {
-      const s3Event = event.event as IS3ChangeEvent;
+      const storageEvent = event.event as IStorageChangeEvent;
      this.dispatchEvent(
        new CustomEvent('navigate-to-s3', {
          detail: {
-            bucket: s3Event.bucket,
-            key: s3Event.key,
+            bucket: storageEvent.bucket,
+            key: storageEvent.key,
          },
          bubbles: true,
          composed: true,
@@ -529,8 +530,8 @@ export class TsviewActivityStream extends DeesElement {
                MongoDB
              </button>
              <button
-                class="filter-tab ${this.filterMode === 's3' ? 'active' : ''}"
-                @click=${() => this.setFilterMode('s3')}
+                class="filter-tab ${this.filterMode === 'storage' ? 'active' : ''}"
+                @click=${() => this.setFilterMode('storage')}
              >
                S3
              </button>
--- a/ts_web/elements/tsview-app.ts
+++ b/ts_web/elements/tsview-app.ts
@@ -1,6 +1,8 @@
 import * as plugins from '../plugins.js';
 import { apiService, changeStreamService } from '../services/index.js';
 import { themeStyles } from '../styles/index.js';
+import { s3DataProvider } from '../adapters/s3-data-provider.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';

 const { html, css, cssManager, customElement, state, DeesElement } = plugins;
 const { DeesContextmenu } = plugins.deesCatalog;
@@ -1039,7 +1041,16 @@ export class TsviewApp extends DeesElement {

      return html`
        <div class="content-area">
-          <tsview-s3-browser .bucketName=${this.selectedBucket}></tsview-s3-browser>
+          <dees-storage-browser
+            .dataProvider=${s3DataProvider}
+            .bucketName=${this.selectedBucket}
+            .onChangeEvent=${(callback: (event: IStorageChangeEvent) => void) => {
+              const sub = changeStreamService
+                .getBucketChanges(this.selectedBucket)
+                .subscribe(callback);
+              return () => sub.unsubscribe();
+            }}
+          ></dees-storage-browser>
        </div>
      `;
    }
--- a/ts_web/elements/tsview-mongo-browser.ts
+++ b/ts_web/elements/tsview-mongo-browser.ts
@@ -25,7 +25,7 @@ export class TsviewMongoBrowser extends DeesElement {
  private accessor stats: ICollectionStats | null = null;

  @state()
-  private accessor editorWidth: number = 400;
+  private accessor editorWidth: number = 700;

  @state()
  private accessor isResizingEditor: boolean = false;
@@ -117,7 +117,7 @@ export class TsviewMongoBrowser extends DeesElement {
      .content {
        flex: 1;
        display: grid;
-        grid-template-columns: 1fr 4px var(--editor-width, 400px);
+        grid-template-columns: 1fr 4px var(--editor-width, 700px);
        gap: 0;
        overflow: hidden;
      }
@@ -305,7 +305,7 @@ export class TsviewMongoBrowser extends DeesElement {
    const contentEl = this.shadowRoot?.querySelector('.content');
    if (!contentEl) return;
    const containerRect = contentEl.getBoundingClientRect();
-    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 300), 700);
+    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
    this.editorWidth = newWidth;
  };

--- a/ts_web/elements/tsview-s3-browser.ts
+++ b/ts_web/elements/tsview-s3-browser.ts
@@ -1,423 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService, changeStreamService, type IS3ChangeEvent } from '../services/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-type TViewType = 'columns' | 'keys';
-
-@customElement('tsview-s3-browser')
-export class TsviewS3Browser extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @state()
-  private accessor viewType: TViewType = 'columns';
-
-  @state()
-  private accessor currentPrefix: string = '';
-
-  @state()
-  private accessor selectedKey: string = '';
-
-  @state()
-  private accessor refreshKey: number = 0;
-
-  @state()
-  private accessor previewWidth: number = 700;
-
-  @state()
-  private accessor isResizingPreview: boolean = false;
-
-  @state()
-  private accessor recentChangeCount: number = 0;
-
-  @state()
-  private accessor isStreamConnected: boolean = false;
-
-  private changeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
-  private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      .browser-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .toolbar {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 12px;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-        margin-bottom: 16px;
-      }
-
-      .breadcrumb {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex: 1;
-        font-size: 14px;
-        color: #999;
-      }
-
-      .breadcrumb-item {
-        cursor: pointer;
-        padding: 4px 8px;
-        border-radius: 4px;
-        transition: background 0.15s;
-      }
-
-      .breadcrumb-item:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: #fff;
-      }
-
-      .breadcrumb-separator {
-        color: #555;
-      }
-
-      .view-toggle {
-        display: flex;
-        gap: 4px;
-      }
-
-      .view-btn {
-        padding: 6px 12px;
-        background: transparent;
-        border: 1px solid #444;
-        color: #888;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s;
-      }
-
-      .view-btn:hover {
-        border-color: #666;
-        color: #aaa;
-      }
-
-      .view-btn.active {
-        background: rgba(255, 255, 255, 0.1);
-        border-color: #404040;
-        color: #e0e0e0;
-      }
-
-      .content {
-        flex: 1;
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 0;
-        overflow: hidden;
-      }
-
-      .content.has-preview {
-        grid-template-columns: 1fr 4px var(--preview-width, 700px);
-      }
-
-      .resize-divider {
-        width: 4px;
-        background: transparent;
-        cursor: col-resize;
-        transition: background 0.2s;
-      }
-
-      .resize-divider:hover,
-      .resize-divider.active {
-        background: rgba(255, 255, 255, 0.2);
-      }
-
-      .main-view {
-        overflow: auto;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-      }
-
-      .preview-panel {
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-        overflow: hidden;
-        margin-left: 12px;
-      }
-
-      @media (max-width: 1024px) {
-        .content,
-        .content.has-preview {
-          grid-template-columns: 1fr;
-        }
-
-        .preview-panel,
-        .resize-divider {
-          display: none;
-        }
-      }
-
-      .stream-status {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 11px;
-        color: #888;
-        margin-left: auto;
-        margin-right: 12px;
-      }
-
-      .stream-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #888;
-      }
-
-      .stream-dot.connected {
-        background: #22c55e;
-      }
-
-      .change-indicator {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 8px;
-        background: rgba(245, 158, 11, 0.2);
-        border-radius: 4px;
-        font-size: 11px;
-        color: #f59e0b;
-        margin-right: 12px;
-      }
-
-      .change-indicator.pulse {
-        animation: pulse-orange 1s ease-in-out;
-      }
-
-      @keyframes pulse-orange {
-        0% { background: rgba(245, 158, 11, 0.4); }
-        100% { background: rgba(245, 158, 11, 0.2); }
-      }
-    `,
-  ];
-
-  async connectedCallback() {
-    super.connectedCallback();
-    // Subscription is handled by updated() when bucketName is set.
-    // Only track connection status for UI indicator here.
-    this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
-      this.isStreamConnected = status === 'connected';
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unsubscribeFromChanges();
-    if (this.connectionSubscription) {
-      this.connectionSubscription.unsubscribe();
-      this.connectionSubscription = null;
-    }
-  }
-
-  private setViewType(type: TViewType) {
-    this.viewType = type;
-  }
-
-  private navigateToPrefix(prefix: string) {
-    this.currentPrefix = prefix;
-    this.selectedKey = '';
-  }
-
-  private handleKeySelected(e: CustomEvent) {
-    this.selectedKey = e.detail.key;
-  }
-
-  private handleNavigate(e: CustomEvent) {
-    this.navigateToPrefix(e.detail.prefix);
-  }
-
-  private handleObjectDeleted(e: CustomEvent) {
-    this.selectedKey = '';
-    // Increment refresh key to trigger re-render of child components
-    this.refreshKey++;
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('bucketName')) {
-      // Clear selection when bucket changes
-      this.selectedKey = '';
-      this.currentPrefix = '';
-      this.recentChangeCount = 0;
-      // Re-subscribe to the new bucket
-      this.unsubscribeFromChanges();
-      this.subscribeToChanges();
-    }
-  }
-
-  private async subscribeToChanges() {
-    if (!this.bucketName) return;
-
-    try {
-      // Set up RxJS listener first so events aren't missed on reconnect
-      if (!this.changeSubscription) {
-        this.changeSubscription = changeStreamService
-          .getBucketChanges(this.bucketName, this.currentPrefix || undefined)
-          .subscribe((event) => this.handleChange(event));
-      }
-
-      // Subscribe on the server side (will auto-connect if needed)
-      const success = await changeStreamService.subscribeToBucket(this.bucketName, this.currentPrefix || undefined);
-      this.isStreamConnected = success;
-    } catch (error) {
-      console.warn('[S3Browser] Failed to subscribe to changes:', error);
-      this.isStreamConnected = false;
-    }
-  }
-
-  private unsubscribeFromChanges() {
-    if (this.changeSubscription) {
-      this.changeSubscription.unsubscribe();
-      this.changeSubscription = null;
-    }
-    if (this.bucketName) {
-      changeStreamService.unsubscribeFromBucket(this.bucketName, this.currentPrefix || undefined);
-    }
-    this.isStreamConnected = false;
-  }
-
-  private handleChange(event: IS3ChangeEvent) {
-    console.log('[S3Browser] Received change:', event);
-    this.recentChangeCount++;
-
-    // Trigger refresh of child components
-    this.refreshKey++;
-  }
-
-  private startPreviewResize = (e: MouseEvent) => {
-    e.preventDefault();
-    this.isResizingPreview = true;
-    document.addEventListener('mousemove', this.handlePreviewResize);
-    document.addEventListener('mouseup', this.endPreviewResize);
-  };
-
-  private handlePreviewResize = (e: MouseEvent) => {
-    if (!this.isResizingPreview) return;
-    const contentEl = this.shadowRoot?.querySelector('.content');
-    if (!contentEl) return;
-    const containerRect = contentEl.getBoundingClientRect();
-    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
-    this.previewWidth = newWidth;
-  };
-
-  private endPreviewResize = () => {
-    this.isResizingPreview = false;
-    document.removeEventListener('mousemove', this.handlePreviewResize);
-    document.removeEventListener('mouseup', this.endPreviewResize);
-  };
-
-  render() {
-    const breadcrumbParts = this.currentPrefix
-      ? this.currentPrefix.split('/').filter(Boolean)
-      : [];
-
-    return html`
-      <div class="browser-container">
-        <div class="toolbar">
-          <div class="breadcrumb">
-            <span
-              class="breadcrumb-item"
-              @click=${() => this.navigateToPrefix('')}
-            >
-              ${this.bucketName}
-            </span>
-            ${breadcrumbParts.map((part, index) => {
-              const prefix = breadcrumbParts.slice(0, index + 1).join('/') + '/';
-              return html`
-                <span class="breadcrumb-separator">/</span>
-                <span
-                  class="breadcrumb-item"
-                  @click=${() => this.navigateToPrefix(prefix)}
-                >
-                  ${part}
-                </span>
-              `;
-            })}
-          </div>
-
-          <div class="stream-status">
-            <span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
-            ${this.isStreamConnected ? 'Live' : 'Offline'}
-          </div>
-          ${this.recentChangeCount > 0
-            ? html`
-                <div class="change-indicator pulse">
-                  ${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
-                </div>
-              `
-            : ''}
-          <div class="view-toggle">
-            <button
-              class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
-              @click=${() => this.setViewType('columns')}
-            >
-              Columns
-            </button>
-            <button
-              class="view-btn ${this.viewType === 'keys' ? 'active' : ''}"
-              @click=${() => this.setViewType('keys')}
-            >
-              List
-            </button>
-          </div>
-        </div>
-
-        <div class="content ${this.selectedKey ? 'has-preview' : ''}" style="--preview-width: ${this.previewWidth}px">
-          <div class="main-view">
-            ${this.viewType === 'columns'
-              ? html`
-                  <tsview-s3-columns
-                    .bucketName=${this.bucketName}
-                    .currentPrefix=${this.currentPrefix}
-                    .refreshKey=${this.refreshKey}
-                    @key-selected=${this.handleKeySelected}
-                    @navigate=${this.handleNavigate}
-                  ></tsview-s3-columns>
-                `
-              : html`
-                  <tsview-s3-keys
-                    .bucketName=${this.bucketName}
-                    .currentPrefix=${this.currentPrefix}
-                    .refreshKey=${this.refreshKey}
-                    @key-selected=${this.handleKeySelected}
-                    @navigate=${this.handleNavigate}
-                  ></tsview-s3-keys>
-                `}
-          </div>
-
-          ${this.selectedKey
-            ? html`
-                <div
-                  class="resize-divider ${this.isResizingPreview ? 'active' : ''}"
-                  @mousedown=${this.startPreviewResize}
-                ></div>
-                <div class="preview-panel">
-                  <tsview-s3-preview
-                    .bucketName=${this.bucketName}
-                    .objectKey=${this.selectedKey}
-                    @object-deleted=${this.handleObjectDeleted}
-                  ></tsview-s3-preview>
-                </div>
-              `
-            : ''}
-        </div>
-      </div>
-    `;
-  }
-}
--- a/ts_web/elements/tsview-s3-columns.ts
+++ b/ts_web/elements/tsview-s3-columns.ts
--- a/ts_web/elements/tsview-s3-keys.ts
+++ b/ts_web/elements/tsview-s3-keys.ts
@@ -1,977 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService, type IS3Object } from '../services/index.js';
-import { formatSize, getFileName, validateMove, getParentPrefix } from '../utilities/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-const { DeesContextmenu } = plugins.deesCatalog;
-
-@customElement('tsview-s3-keys')
-export class TsviewS3Keys extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @property({ type: String })
-  public accessor currentPrefix: string = '';
-
-  @property({ type: Number })
-  public accessor refreshKey: number = 0;
-
-  @state()
-  private accessor allKeys: IS3Object[] = [];
-
-  @state()
-  private accessor prefixes: string[] = [];
-
-  @state()
-  private accessor loading: boolean = false;
-
-  @state()
-  private accessor selectedKey: string = '';
-
-  @state()
-  private accessor filterText: string = '';
-
-  @state()
-  private accessor showCreateDialog: boolean = false;
-
-  @state()
-  private accessor createDialogType: 'folder' | 'file' = 'folder';
-
-  @state()
-  private accessor createDialogPrefix: string = '';
-
-  @state()
-  private accessor createDialogName: string = '';
-
-  // Move dialog state
-  @state()
-  private accessor showMoveDialog: boolean = false;
-
-  @state()
-  private accessor moveSource: { key: string; isFolder: boolean } | null = null;
-
-  @state()
-  private accessor moveDestination: string = '';
-
-  @state()
-  private accessor moveInProgress: boolean = false;
-
-  @state()
-  private accessor moveError: string | null = null;
-
-  // Move picker dialog state
-  @state()
-  private accessor showMovePickerDialog: boolean = false;
-
-  @state()
-  private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;
-
-  @state()
-  private accessor movePickerCurrentPrefix: string = '';
-
-  @state()
-  private accessor movePickerPrefixes: string[] = [];
-
-  @state()
-  private accessor movePickerLoading: boolean = false;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      .keys-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .filter-bar {
-        padding: 12px;
-        border-bottom: 1px solid #333;
-      }
-
-      .filter-input {
-        width: 100%;
-        padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid #444;
-        border-radius: 6px;
-        color: #fff;
-        font-size: 14px;
-      }
-
-      .filter-input:focus {
-        outline: none;
-        border-color: #404040;
-      }
-
-      .filter-input::placeholder {
-        color: #666;
-      }
-
-      .keys-list {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-
-      thead {
-        position: sticky;
-        top: 0;
-        background: #1a1a1a;
-        z-index: 1;
-      }
-
-      th {
-        text-align: left;
-        padding: 10px 12px;
-        font-size: 12px;
-        font-weight: 500;
-        color: #666;
-        text-transform: uppercase;
-        border-bottom: 1px solid #333;
-      }
-
-      td {
-        padding: 8px 12px;
-        font-size: 13px;
-        border-bottom: 1px solid #2a2a3e;
-      }
-
-      tr:hover td {
-        background: rgba(255, 255, 255, 0.03);
-      }
-
-      tr.selected td {
-        background: rgba(255, 255, 255, 0.08);
-      }
-
-      .key-cell {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-      }
-
-      .key-icon {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-      }
-
-      .folder-icon {
-        color: #fbbf24;
-      }
-
-      .key-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .size-cell {
-        color: #888;
-        font-variant-numeric: tabular-nums;
-      }
-
-      .empty-state {
-        padding: 32px;
-        text-align: center;
-        color: #666;
-      }
-
-      .dialog-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-      }
-
-      .dialog {
-        background: #1e1e1e;
-        border-radius: 12px;
-        padding: 24px;
-        min-width: 400px;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-      }
-
-      .dialog-title {
-        font-size: 18px;
-        font-weight: 600;
-        margin-bottom: 16px;
-        color: #fff;
-      }
-
-      .dialog-location {
-        font-size: 12px;
-        color: #888;
-        margin-bottom: 12px;
-        font-family: monospace;
-      }
-
-      .dialog-input {
-        width: 100%;
-        padding: 10px 12px;
-        background: #141414;
-        border: 1px solid #333;
-        border-radius: 6px;
-        color: #fff;
-        font-size: 14px;
-        margin-bottom: 8px;
-        box-sizing: border-box;
-      }
-
-      .dialog-input:focus {
-        outline: none;
-        border-color: #e0e0e0;
-      }
-
-      .dialog-hint {
-        font-size: 11px;
-        color: #666;
-        margin-bottom: 16px;
-      }
-
-      .dialog-actions {
-        display: flex;
-        gap: 12px;
-        justify-content: flex-end;
-      }
-
-      .dialog-btn {
-        padding: 8px 16px;
-        border-radius: 6px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-
-      .dialog-btn-cancel {
-        background: transparent;
-        border: 1px solid #444;
-        color: #aaa;
-      }
-
-      .dialog-btn-cancel:hover {
-        background: rgba(255, 255, 255, 0.05);
-        color: #fff;
-      }
-
-      .dialog-btn-create {
-        background: #404040;
-        border: none;
-        color: #fff;
-      }
-
-      .dialog-btn-create:hover {
-        background: #505050;
-      }
-
-      .dialog-btn-create:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      /* Move dialog styles */
-      .move-summary {
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 8px;
-        padding: 16px;
-        margin-bottom: 16px;
-      }
-
-      .move-item {
-        display: flex;
-        gap: 8px;
-        margin-bottom: 8px;
-      }
-
-      .move-item:last-child {
-        margin-bottom: 0;
-      }
-
-      .move-label {
-        color: #888;
-        min-width: 40px;
-      }
-
-      .move-path {
-        color: #e0e0e0;
-        font-family: monospace;
-        font-size: 12px;
-        word-break: break-all;
-      }
-
-      .move-error {
-        background: rgba(239, 68, 68, 0.15);
-        border: 1px solid rgba(239, 68, 68, 0.3);
-        color: #f87171;
-        padding: 12px 16px;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        font-size: 13px;
-      }
-
-      /* Move picker dialog styles */
-      .move-picker-dialog {
-        min-width: 450px;
-        max-height: 500px;
-      }
-
-      .picker-breadcrumb {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 6px;
-        margin-bottom: 12px;
-        font-size: 12px;
-        overflow-x: auto;
-      }
-
-      .picker-crumb {
-        color: #888;
-        cursor: pointer;
-        white-space: nowrap;
-      }
-
-      .picker-crumb:hover {
-        color: #fff;
-      }
-
-      .picker-separator {
-        color: #555;
-      }
-
-      .picker-list {
-        max-height: 280px;
-        overflow-y: auto;
-        border: 1px solid #333;
-        border-radius: 6px;
-        margin-bottom: 16px;
-        min-height: 100px;
-      }
-
-      .picker-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
-        cursor: pointer;
-        color: #fbbf24;
-      }
-
-      .picker-item:hover {
-        background: rgba(255, 255, 255, 0.05);
-      }
-
-      .picker-item .icon {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-      }
-
-      .picker-item .name {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .picker-empty {
-        padding: 24px;
-        text-align: center;
-        color: #666;
-        font-size: 13px;
-      }
-    `,
-  ];
-
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.loadObjects();
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix') || changedProperties.has('refreshKey')) {
-      this.loadObjects();
-    }
-  }
-
-  private async loadObjects() {
-    this.loading = true;
-    try {
-      const result = await apiService.listObjects(this.bucketName, this.currentPrefix, '/');
-      this.allKeys = result.objects;
-      this.prefixes = result.prefixes;
-    } catch (err) {
-      console.error('Error loading objects:', err);
-      this.allKeys = [];
-      this.prefixes = [];
-    }
-    this.loading = false;
-  }
-
-  private handleFilterInput(e: Event) {
-    this.filterText = (e.target as HTMLInputElement).value;
-  }
-
-  private selectKey(key: string, isFolder: boolean) {
-    this.selectedKey = key;
-
-    if (isFolder) {
-      this.dispatchEvent(
-        new CustomEvent('navigate', {
-          detail: { prefix: key },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    } else {
-      this.dispatchEvent(
-        new CustomEvent('key-selected', {
-          detail: { key },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-  }
-
-  private get filteredItems() {
-    const filter = this.filterText.toLowerCase();
-    const folders = this.prefixes
-      .filter((p) => !filter || getFileName(p).toLowerCase().includes(filter))
-      .map((p) => ({ key: p, isFolder: true, size: undefined }));
-    const files = this.allKeys
-      .filter((o) => !filter || getFileName(o.key).toLowerCase().includes(filter))
-      .map((o) => ({ key: o.key, isFolder: false, size: o.size }));
-    return [...folders, ...files];
-  }
-
-  private handleItemContextMenu(event: MouseEvent, key: string, isFolder: boolean) {
-    event.preventDefault();
-
-    if (isFolder) {
-      DeesContextmenu.openContextMenuWithOptions(event, [
-        {
-          name: 'Open',
-          iconName: 'lucide:folderOpen',
-          action: async () => {
-            this.selectKey(key, true);
-          },
-        },
-        {
-          name: 'Copy Path',
-          iconName: 'lucide:copy',
-          action: async () => {
-            await navigator.clipboard.writeText(key);
-          },
-        },
-        { divider: true },
-        {
-          name: 'Move to...',
-          iconName: 'lucide:folderInput',
-          action: async () => this.openMovePickerDialog(key, true),
-        },
-        { divider: true },
-        {
-          name: 'New Folder Inside',
-          iconName: 'lucide:folderPlus',
-          action: async () => this.openCreateDialog('folder', key),
-        },
-        {
-          name: 'New File Inside',
-          iconName: 'lucide:filePlus',
-          action: async () => this.openCreateDialog('file', key),
-        },
-        { divider: true },
-        {
-          name: 'Delete Folder',
-          iconName: 'lucide:trash2',
-          action: async () => {
-            if (confirm(`Delete folder "${getFileName(key)}" and all its contents?`)) {
-              const success = await apiService.deletePrefix(this.bucketName, key);
-              if (success) {
-                await this.loadObjects();
-              }
-            }
-          },
-        },
-      ]);
-    } else {
-      DeesContextmenu.openContextMenuWithOptions(event, [
-        {
-          name: 'Preview',
-          iconName: 'lucide:eye',
-          action: async () => {
-            this.selectKey(key, false);
-          },
-        },
-        {
-          name: 'Download',
-          iconName: 'lucide:download',
-          action: async () => {
-            const url = await apiService.getObjectUrl(this.bucketName, key);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = getFileName(key);
-            link.click();
-          },
-        },
-        {
-          name: 'Copy Path',
-          iconName: 'lucide:copy',
-          action: async () => {
-            await navigator.clipboard.writeText(key);
-          },
-        },
-        { divider: true },
-        {
-          name: 'Move to...',
-          iconName: 'lucide:folderInput',
-          action: async () => this.openMovePickerDialog(key, false),
-        },
-        { divider: true },
-        {
-          name: 'Delete',
-          iconName: 'lucide:trash2',
-          action: async () => {
-            if (confirm(`Delete file "${getFileName(key)}"?`)) {
-              const success = await apiService.deleteObject(this.bucketName, key);
-              if (success) {
-                await this.loadObjects();
-              }
-            }
-          },
-        },
-      ]);
-    }
-  }
-
-  private handleEmptySpaceContextMenu(event: MouseEvent) {
-    // Only trigger if clicking on the container itself, not on items
-    if ((event.target as HTMLElement).closest('tr')) return;
-    event.preventDefault();
-
-    DeesContextmenu.openContextMenuWithOptions(event, [
-      {
-        name: 'New Folder',
-        iconName: 'lucide:folderPlus',
-        action: async () => this.openCreateDialog('folder', this.currentPrefix),
-      },
-      {
-        name: 'New File',
-        iconName: 'lucide:filePlus',
-        action: async () => this.openCreateDialog('file', this.currentPrefix),
-      },
-    ]);
-  }
-
-  private openCreateDialog(type: 'folder' | 'file', prefix: string) {
-    this.createDialogType = type;
-    this.createDialogPrefix = prefix;
-    this.createDialogName = '';
-    this.showCreateDialog = true;
-  }
-
-  private getContentType(ext: string): string {
-    const contentTypes: Record<string, string> = {
-      json: 'application/json',
-      txt: 'text/plain',
-      html: 'text/html',
-      css: 'text/css',
-      js: 'application/javascript',
-      ts: 'text/typescript',
-      md: 'text/markdown',
-      xml: 'application/xml',
-      yaml: 'text/yaml',
-      yml: 'text/yaml',
-      csv: 'text/csv',
-    };
-    return contentTypes[ext] || 'application/octet-stream';
-  }
-
-  private getDefaultContent(ext: string): string {
-    const defaults: Record<string, string> = {
-      json: '{\n  \n}',
-      html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
-      md: '# Title\n\n',
-      txt: '',
-    };
-    return defaults[ext] || '';
-  }
-
-  private async handleCreate() {
-    if (!this.createDialogName.trim()) return;
-
-    const name = this.createDialogName.trim();
-    let path: string;
-
-    if (this.createDialogType === 'folder') {
-      path = this.createDialogPrefix + name + '/.keep';
-    } else {
-      path = this.createDialogPrefix + name;
-    }
-
-    const ext = name.split('.').pop()?.toLowerCase() || '';
-    const contentType = this.createDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
-    const content = this.createDialogType === 'file' ? this.getDefaultContent(ext) : '';
-
-    const success = await apiService.putObject(
-      this.bucketName,
-      path,
-      btoa(content),
-      contentType
-    );
-
-    if (success) {
-      this.showCreateDialog = false;
-      await this.loadObjects();
-    }
-  }
-
-  private renderCreateDialog() {
-    if (!this.showCreateDialog) return '';
-
-    const isFolder = this.createDialogType === 'folder';
-    const title = isFolder ? 'Create New Folder' : 'Create New File';
-    const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';
-
-    return html`
-      <div class="dialog-overlay" @click=${() => this.showCreateDialog = false}>
-        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
-          <div class="dialog-title">${title}</div>
-          <div class="dialog-location">
-            Location: ${this.bucketName}/${this.createDialogPrefix}
-          </div>
-          <input
-            type="text"
-            class="dialog-input"
-            placeholder=${placeholder}
-            .value=${this.createDialogName}
-            @input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
-            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
-          />
-          <div class="dialog-hint">
-            Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
-          </div>
-          <div class="dialog-actions">
-            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.showCreateDialog = false}>
-              Cancel
-            </button>
-            <button
-              class="dialog-btn dialog-btn-create"
-              ?disabled=${!this.createDialogName.trim()}
-              @click=${() => this.handleCreate()}
-            >
-              Create
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  // --- Helper for path segments ---
-
-  private getPathSegments(prefix: string): string[] {
-    if (!prefix) return [];
-    const parts = prefix.split('/').filter(p => p);
-    const segments: string[] = [];
-    let cumulative = '';
-    for (const part of parts) {
-      cumulative += part + '/';
-      segments.push(cumulative);
-    }
-    return segments;
-  }
-
-  // --- Move picker dialog ---
-
-  private async openMovePickerDialog(key: string, isFolder: boolean) {
-    this.movePickerSource = { key, isFolder };
-    this.movePickerCurrentPrefix = '';
-    this.showMovePickerDialog = true;
-    await this.loadMovePickerPrefixes('');
-  }
-
-  private async navigateMovePicker(prefix: string) {
-    this.movePickerCurrentPrefix = prefix;
-    await this.loadMovePickerPrefixes(prefix);
-  }
-
-  private async loadMovePickerPrefixes(prefix: string) {
-    this.movePickerLoading = true;
-    try {
-      const result = await apiService.listObjects(this.bucketName, prefix, '/');
-      this.movePickerPrefixes = result.prefixes;
-    } catch {
-      this.movePickerPrefixes = [];
-    }
-    this.movePickerLoading = false;
-  }
-
-  private selectMoveDestination(destPrefix: string) {
-    if (!this.movePickerSource) return;
-    this.closeMovePickerDialog();
-    this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
-  }
-
-  private closeMovePickerDialog() {
-    this.showMovePickerDialog = false;
-    this.movePickerSource = null;
-    this.movePickerCurrentPrefix = '';
-    this.movePickerPrefixes = [];
-  }
-
-  // --- Move confirmation dialog ---
-
-  private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
-    const validation = validateMove(sourceKey, destPrefix);
-
-    if (!validation.valid) {
-      this.moveSource = { key: sourceKey, isFolder };
-      this.moveDestination = destPrefix;
-      this.moveError = validation.error!;
-      this.showMoveDialog = true;
-      return;
-    }
-
-    this.moveSource = { key: sourceKey, isFolder };
-    this.moveDestination = destPrefix;
-    this.moveError = null;
-    this.showMoveDialog = true;
-  }
-
-  private async executeMove() {
-    if (!this.moveSource) return;
-
-    this.moveInProgress = true;
-
-    try {
-      const sourceName = getFileName(this.moveSource.key);
-      const destKey = this.moveDestination + sourceName;
-
-      let result: { success: boolean; error?: string };
-      if (this.moveSource.isFolder) {
-        result = await apiService.movePrefix(
-          this.bucketName,
-          this.moveSource.key,
-          destKey
-        );
-      } else {
-        result = await apiService.moveObject(
-          this.bucketName,
-          this.moveSource.key,
-          destKey
-        );
-      }
-
-      if (result.success) {
-        this.closeMoveDialog();
-        await this.loadObjects();
-      } else {
-        this.moveError = result.error || 'Move operation failed';
-      }
-    } catch (err) {
-      this.moveError = `Error: ${err}`;
-    }
-
-    this.moveInProgress = false;
-  }
-
-  private closeMoveDialog() {
-    this.showMoveDialog = false;
-    this.moveSource = null;
-    this.moveDestination = '';
-    this.moveError = null;
-    this.moveInProgress = false;
-  }
-
-  private renderMoveDialog() {
-    if (!this.showMoveDialog || !this.moveSource) return '';
-
-    const sourceName = getFileName(this.moveSource.key);
-
-    return html`
-      <div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
-        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
-          <div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>
-
-          ${this.moveError ? html`
-            <div class="move-error">${this.moveError}</div>
-          ` : html`
-            <div class="move-summary">
-              <div class="move-item">
-                <span class="move-label">From:</span>
-                <span class="move-path">${this.moveSource.key}</span>
-              </div>
-              <div class="move-item">
-                <span class="move-label">To:</span>
-                <span class="move-path">${this.moveDestination}${sourceName}</span>
-              </div>
-            </div>
-          `}
-
-          <div class="dialog-actions">
-            <button class="dialog-btn dialog-btn-cancel"
-                    @click=${() => this.closeMoveDialog()}
-                    ?disabled=${this.moveInProgress}>
-              Cancel
-            </button>
-            ${!this.moveError ? html`
-              <button class="dialog-btn dialog-btn-create"
-                      @click=${() => this.executeMove()}
-                      ?disabled=${this.moveInProgress}>
-                ${this.moveInProgress ? 'Moving...' : 'Move'}
-              </button>
-            ` : ''}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  private renderMovePickerDialog() {
-    if (!this.showMovePickerDialog || !this.movePickerSource) return '';
-
-    const sourceName = getFileName(this.movePickerSource.key);
-    const sourceParent = getParentPrefix(this.movePickerSource.key);
-
-    return html`
-      <div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
-        <div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
-          <div class="dialog-title">Move "${sourceName}" to...</div>
-
-          <div class="picker-breadcrumb">
-            <span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
-              ${this.bucketName}
-            </span>
-            ${this.getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
-              <span class="picker-separator">/</span>
-              <span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
-                ${getFileName(seg)}
-              </span>
-            `)}
-          </div>
-
-          <div class="picker-list">
-            ${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
-            ${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
-              <div class="picker-empty">No subfolders</div>
-            ` : ''}
-            ${this.movePickerPrefixes
-              .filter(p => p !== this.movePickerSource!.key) // Hide source from list
-              .map(prefix => html`
-                <div class="picker-item"
-                     @click=${() => this.navigateMovePicker(prefix)}
-                     @dblclick=${() => this.selectMoveDestination(prefix)}>
-                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-                  </svg>
-                  <span class="name">${getFileName(prefix)}</span>
-                </div>
-              `)}
-          </div>
-
-          <div class="dialog-actions">
-            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
-              Cancel
-            </button>
-            <button class="dialog-btn dialog-btn-create"
-                    @click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
-                    ?disabled=${this.movePickerCurrentPrefix === sourceParent}>
-              Move Here
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="keys-container">
-        <div class="filter-bar">
-          <input
-            type="text"
-            class="filter-input"
-            placeholder="Filter files..."
-            .value=${this.filterText}
-            @input=${this.handleFilterInput}
-          />
-        </div>
-
-        <div class="keys-list" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
-          ${this.loading
-            ? html`<div class="empty-state">Loading...</div>`
-            : this.filteredItems.length === 0
-              ? html`<div class="empty-state">No objects found</div>`
-              : html`
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Name</th>
-                        <th style="width: 100px;">Size</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      ${this.filteredItems.map(
-                        (item) => html`
-                          <tr
-                            class="${this.selectedKey === item.key ? 'selected' : ''}"
-                            @click=${() => this.selectKey(item.key, item.isFolder)}
-                            @contextmenu=${(e: MouseEvent) => this.handleItemContextMenu(e, item.key, item.isFolder)}
-                          >
-                            <td>
-                              <div class="key-cell">
-                                ${item.isFolder
-                                  ? html`
-                                      <svg class="key-icon folder-icon" viewBox="0 0 24 24" fill="currentColor">
-                                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-                                      </svg>
-                                    `
-                                  : html`
-                                      <svg class="key-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                      </svg>
-                                    `}
-                                <span class="key-name">${getFileName(item.key)}</span>
-                              </div>
-                            </td>
-                            <td class="size-cell">
-                              ${item.isFolder ? '-' : formatSize(item.size)}
-                            </td>
-                          </tr>
-                        `
-                      )}
-                    </tbody>
-                  </table>
-                `}
-        </div>
-      </div>
-      ${this.renderCreateDialog()}
-      ${this.renderMoveDialog()}
-      ${this.renderMovePickerDialog()}
-    `;
-  }
-}
--- a/ts_web/elements/tsview-s3-preview.ts
+++ b/ts_web/elements/tsview-s3-preview.ts
@@ -1,538 +0,0 @@
-import * as plugins from '../plugins.js';
-import { apiService } from '../services/index.js';
-import { formatSize, getFileName } from '../utilities/index.js';
-import { themeStyles } from '../styles/index.js';
-
-const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
-
-@customElement('tsview-s3-preview')
-export class TsviewS3Preview extends DeesElement {
-  @property({ type: String })
-  public accessor bucketName: string = '';
-
-  @property({ type: String })
-  public accessor objectKey: string = '';
-
-  @state()
-  private accessor loading: boolean = false;
-
-  @state()
-  private accessor saving: boolean = false;
-
-  @state()
-  private accessor content: string = '';
-
-  @state()
-  private accessor originalTextContent: string = '';
-
-  @state()
-  private accessor hasChanges: boolean = false;
-
-  @state()
-  private accessor editing: boolean = false;
-
-  @state()
-  private accessor contentType: string = '';
-
-  @state()
-  private accessor size: number = 0;
-
-  @state()
-  private accessor lastModified: string = '';
-
-  @state()
-  private accessor error: string = '';
-
-  public static styles = [
-    cssManager.defaultStyles,
-    themeStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      .preview-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .preview-header {
-        padding: 12px;
-        border-bottom: 1px solid #333;
-      }
-
-      .preview-title {
-        font-size: 14px;
-        font-weight: 500;
-        margin-bottom: 8px;
-        word-break: break-all;
-      }
-
-      .preview-meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-        font-size: 12px;
-        color: #888;
-      }
-
-      .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-
-      .preview-content {
-        flex: 1;
-        overflow: hidden;
-      }
-
-      .preview-content dees-preview {
-        width: 100%;
-        height: 100%;
-      }
-
-      .preview-content.code-editor {
-        padding: 0;
-        overflow: hidden;
-      }
-
-      .preview-content.code-editor dees-input-code {
-        height: 100%;
-      }
-
-      .preview-actions {
-        padding: 12px;
-        border-top: 1px solid #333;
-        display: flex;
-        gap: 8px;
-      }
-
-      .action-btn {
-        flex: 1;
-        padding: 8px 16px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid #404040;
-        color: #e0e0e0;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s;
-      }
-
-      .action-btn:hover {
-        background: rgba(255, 255, 255, 0.15);
-      }
-
-      .action-btn.danger {
-        background: rgba(239, 68, 68, 0.2);
-        border-color: #ef4444;
-        color: #f87171;
-      }
-
-      .action-btn.danger:hover {
-        background: rgba(239, 68, 68, 0.3);
-      }
-
-      .action-btn.primary {
-        background: rgba(59, 130, 246, 0.3);
-        border-color: #3b82f6;
-        color: #60a5fa;
-      }
-
-      .action-btn.primary:hover {
-        background: rgba(59, 130, 246, 0.4);
-      }
-
-      .action-btn.primary:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .action-btn.secondary {
-        background: rgba(255, 255, 255, 0.05);
-        border-color: #555;
-        color: #aaa;
-      }
-
-      .action-btn.secondary:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: #fff;
-      }
-
-      .unsaved-indicator {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 10px;
-        background: rgba(251, 191, 36, 0.1);
-        border: 1px solid rgba(251, 191, 36, 0.3);
-        border-radius: 4px;
-        font-size: 12px;
-        color: #fbbf24;
-      }
-
-      .unsaved-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #fbbf24;
-      }
-
-      .empty-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #666;
-        text-align: center;
-        padding: 24px;
-      }
-
-      .empty-state svg {
-        width: 48px;
-        height: 48px;
-        margin-bottom: 12px;
-        opacity: 0.5;
-      }
-
-      .loading-state {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: #888;
-      }
-
-      .error-state {
-        padding: 16px;
-        color: #f87171;
-        text-align: center;
-      }
-
-    `,
-  ];
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
-      if (this.objectKey) {
-        this.loadObject();
-      } else {
-        this.content = '';
-        this.contentType = '';
-        this.error = '';
-        this.originalTextContent = '';
-        this.hasChanges = false;
-        this.editing = false;
-      }
-    }
-  }
-
-  private async loadObject() {
-    if (!this.objectKey || !this.bucketName) return;
-
-    this.loading = true;
-    this.error = '';
-    this.hasChanges = false;
-    this.editing = false;
-
-    try {
-      const result = await apiService.getObject(this.bucketName, this.objectKey);
-      if (!result) {
-        this.error = 'Object not found';
-        this.loading = false;
-        return;
-      }
-      this.content = result.content || '';
-      this.contentType = result.contentType || '';
-      this.size = result.size || 0;
-      this.lastModified = result.lastModified || '';
-
-      // For text files, decode and store original content
-      if (this.isText()) {
-        this.originalTextContent = this.getTextContent();
-      }
-    } catch (err) {
-      console.error('Error loading object:', err);
-      this.error = 'Failed to load object';
-    }
-
-    this.loading = false;
-  }
-
-  private formatDate(dateStr: string): string {
-    if (!dateStr) return '-';
-    const date = new Date(dateStr);
-    return date.toLocaleString();
-  }
-
-  private isImage(): boolean {
-    return this.contentType.startsWith('image/');
-  }
-
-  private isText(): boolean {
-    return (
-      this.contentType.startsWith('text/') ||
-      this.contentType === 'application/json' ||
-      this.contentType === 'application/xml' ||
-      this.contentType === 'application/javascript'
-    );
-  }
-
-  private getTextContent(): string {
-    try {
-      // Properly decode base64 to UTF-8 text
-      const binaryString = atob(this.content);
-      const bytes = new Uint8Array(binaryString.length);
-      for (let i = 0; i < binaryString.length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-      }
-      return new TextDecoder('utf-8').decode(bytes);
-    } catch {
-      return 'Unable to decode content';
-    }
-  }
-
-  private async handleDownload() {
-    try {
-      const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
-        type: this.contentType,
-      });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = getFileName(this.objectKey);
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch (err) {
-      console.error('Error downloading:', err);
-    }
-  }
-
-  private async handleDelete() {
-    if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
-
-    try {
-      await apiService.deleteObject(this.bucketName, this.objectKey);
-      this.dispatchEvent(
-        new CustomEvent('object-deleted', {
-          detail: { key: this.objectKey },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    } catch (err) {
-      console.error('Error deleting object:', err);
-    }
-  }
-
-  private getLanguage(): string {
-    const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
-    const languageMap: Record<string, string> = {
-      ts: 'typescript',
-      tsx: 'typescript',
-      js: 'javascript',
-      jsx: 'javascript',
-      mjs: 'javascript',
-      cjs: 'javascript',
-      json: 'json',
-      html: 'html',
-      htm: 'html',
-      css: 'css',
-      scss: 'scss',
-      sass: 'scss',
-      less: 'less',
-      md: 'markdown',
-      markdown: 'markdown',
-      xml: 'xml',
-      yaml: 'yaml',
-      yml: 'yaml',
-      py: 'python',
-      rb: 'ruby',
-      go: 'go',
-      rs: 'rust',
-      java: 'java',
-      c: 'c',
-      cpp: 'cpp',
-      h: 'c',
-      hpp: 'cpp',
-      cs: 'csharp',
-      php: 'php',
-      sh: 'shell',
-      bash: 'shell',
-      zsh: 'shell',
-      sql: 'sql',
-      graphql: 'graphql',
-      gql: 'graphql',
-      dockerfile: 'dockerfile',
-      txt: 'plaintext',
-    };
-    return languageMap[ext] || 'plaintext';
-  }
-
-  private handleContentChange(event: CustomEvent) {
-    const newValue = event.detail as string;
-    this.hasChanges = newValue !== this.originalTextContent;
-  }
-
-  private handleEdit() {
-    this.editing = true;
-  }
-
-  private handleDiscard() {
-    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
-    if (codeEditor) {
-      codeEditor.value = this.originalTextContent;
-    }
-    this.hasChanges = false;
-    this.editing = false;
-  }
-
-  private async handleSave() {
-    if (!this.hasChanges || this.saving) return;
-
-    this.saving = true;
-
-    try {
-      // Get current content from the editor
-      const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
-      const currentContent = codeEditor?.value ?? '';
-
-      // Encode the text content to base64
-      const encoder = new TextEncoder();
-      const bytes = encoder.encode(currentContent);
-      const base64Content = btoa(String.fromCharCode(...bytes));
-
-      const success = await apiService.putObject(
-        this.bucketName,
-        this.objectKey,
-        base64Content,
-        this.contentType
-      );
-
-      if (success) {
-        this.originalTextContent = currentContent;
-        this.hasChanges = false;
-        this.editing = false;
-        // Update the stored content as well
-        this.content = base64Content;
-      }
-    } catch (err) {
-      console.error('Error saving object:', err);
-    }
-
-    this.saving = false;
-  }
-
-  render() {
-    if (!this.objectKey) {
-      return html`
-        <div class="preview-container">
-          <div class="empty-state">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-              <polyline points="14 2 14 8 20 8" />
-            </svg>
-            <p>Select a file to preview</p>
-          </div>
-        </div>
-      `;
-    }
-
-    if (this.loading) {
-      return html`
-        <div class="preview-container">
-          <div class="loading-state">Loading...</div>
-        </div>
-      `;
-    }
-
-    if (this.error) {
-      return html`
-        <div class="preview-container">
-          <div class="error-state">${this.error}</div>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="preview-container">
-        <div class="preview-header">
-          <div class="preview-title">${getFileName(this.objectKey)}</div>
-          <div class="preview-meta">
-            <span class="meta-item">${this.contentType}</span>
-            <span class="meta-item">${formatSize(this.size)}</span>
-            <span class="meta-item">${this.formatDate(this.lastModified)}</span>
-            ${this.hasChanges ? html`
-              <span class="unsaved-indicator">
-                <span class="unsaved-dot"></span>
-                Unsaved changes
-              </span>
-            ` : ''}
-          </div>
-        </div>
-
-        <div class="preview-content ${this.editing ? 'code-editor' : ''}">
-          ${this.editing
-            ? html`
-                <dees-input-code
-                  .value=${this.originalTextContent}
-                  .language=${this.getLanguage()}
-                  height="100%"
-                  @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
-                ></dees-input-code>
-              `
-            : this.isText()
-              ? html`
-                  <dees-preview
-                    .textContent=${this.originalTextContent}
-                    .filename=${getFileName(this.objectKey)}
-                    .language=${this.getLanguage()}
-                    .showToolbar=${true}
-                    .showFilename=${false}
-                  ></dees-preview>
-                `
-              : html`
-                  <dees-preview
-                    .base64=${this.content}
-                    .mimeType=${this.contentType}
-                    .filename=${getFileName(this.objectKey)}
-                    .showToolbar=${true}
-                    .showFilename=${false}
-                  ></dees-preview>
-                `
-          }
-        </div>
-
-        <div class="preview-actions">
-          ${this.editing
-            ? html`
-                <button class="action-btn secondary" @click=${this.handleDiscard}>
-                  ${this.hasChanges ? 'Discard' : 'Cancel'}
-                </button>
-                <button
-                  class="action-btn primary"
-                  @click=${this.handleSave}
-                  ?disabled=${this.saving || !this.hasChanges}
-                >
-                  ${this.saving ? 'Saving...' : 'Save'}
-                </button>
-              `
-            : html`
-                ${this.isText()
-                  ? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
-                  : ''}
-                <button class="action-btn" @click=${this.handleDownload}>Download</button>
-                <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
-              `
-          }
-        </div>
-      </div>
-    `;
-  }
-}
--- a/ts_web/services/api.service.ts
+++ b/ts_web/services/api.service.ts
@@ -1,13 +1,6 @@
 import * as plugins from '../plugins.js';
-
-// Import interfaces from shared types
-// Note: In bundled form these are inlined
-export interface IS3Object {
-  key: string;
-  size?: number;
-  lastModified?: string;
-  isPrefix?: boolean;
-}
+import type { IStorageObject } from '@design.estate/dees-catalog';
+export type { IStorageObject };

 export interface IMongoDatabase {
  name: string;
@@ -100,7 +93,7 @@ export class ApiService {
    bucketName: string,
    prefix?: string,
    delimiter?: string
-  ): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
+  ): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
    return this.request('listObjects', { bucketName, prefix, delimiter });
  }

--- a/ts_web/services/changestream.service.ts
+++ b/ts_web/services/changestream.service.ts
@@ -1,4 +1,6 @@
 import * as plugins from '../plugins.js';
+import type { IStorageChangeEvent } from '@design.estate/dees-catalog';
+export type { IStorageChangeEvent };

 /**
 * MongoDB change event
@@ -16,25 +18,13 @@ export interface IMongoChangeEvent {
  timestamp: string;
 }

-/**
- * S3 change event
- */
-export interface IS3ChangeEvent {
-  type: 'add' | 'modify' | 'delete';
-  key: string;
-  size?: number;
-  etag?: string;
-  lastModified?: Date;
-  bucket: string;
-}
-
 /**
 * Combined activity event
 */
 export interface IActivityEvent {
  id: string;
-  source: 'mongodb' | 's3';
-  event: IMongoChangeEvent | IS3ChangeEvent;
+  source: 'mongodb' | 'storage';
+  event: IMongoChangeEvent | IStorageChangeEvent;
  timestamp: string;
 }

@@ -42,7 +32,7 @@ export interface IActivityEvent {
 * Subscription info tracked by the service
 */
 interface ISubscription {
-  type: 'mongo' | 's3' | 'activity';
+  type: 'mongo' | 'storage' | 'activity';
  key: string; // "db/collection" or "bucket/prefix" or "activity"
  subscriptionId: string;
 }
@@ -69,7 +59,7 @@ export class ChangeStreamService {

  // RxJS Subjects for UI components
  public readonly mongoChanges$ = new plugins.smartrx.rxjs.Subject<IMongoChangeEvent>();
-  public readonly s3Changes$ = new plugins.smartrx.rxjs.Subject<IS3ChangeEvent>();
+  public readonly storageChanges$ = new plugins.smartrx.rxjs.Subject<IStorageChangeEvent>();
  public readonly activityEvents$ = new plugins.smartrx.rxjs.Subject<IActivityEvent>();
  public readonly connectionStatus$ = new plugins.smartrx.rxjs.ReplaySubject<'connected' | 'disconnected' | 'connecting'>(1);

@@ -193,8 +183,8 @@ export class ChangeStreamService {
    router.addTypedHandler(
      new plugins.typedrequest.TypedHandler<any>(
        'pushS3Change',
-        async (data: { event: IS3ChangeEvent }) => {
-          this.s3Changes$.next(data.event);
+        async (data: { event: IStorageChangeEvent }) => {
+          this.storageChanges$.next(data.event);
          return { received: true };
        }
      )
@@ -540,8 +530,8 @@ export class ChangeStreamService {
  /**
   * Get S3 changes as an Observable
   */
-  public getS3Changes(): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
-    return this.s3Changes$.asObservable();
+  public getStorageChanges(): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.asObservable();
  }

  /**
@@ -565,8 +555,8 @@ export class ChangeStreamService {
  /**
   * Get filtered S3 changes for a specific bucket/prefix
   */
-  public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IS3ChangeEvent> {
-    return this.s3Changes$.pipe(
+  public getBucketChanges(bucket: string, prefix?: string): plugins.smartrx.rxjs.Observable<IStorageChangeEvent> {
+    return this.storageChanges$.pipe(
      plugins.smartrx.rxjs.ops.filter((event) => {
        if (event.bucket !== bucket) return false;
        if (prefix && !event.key.startsWith(prefix)) return false;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,9 +4,7 @@
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
-    "verbatimModuleSyntax": true,
-    "baseUrl": ".",
-    "paths": {}
+    "verbatimModuleSyntax": true
  },
  "exclude": ["dist_*/**/*.d.ts"]
 }
Author	SHA1	Message	Date
Juergen Kunz	219a34e6a5	v1.12.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-24 19:02:45 +00:00
Juergen Kunz	69ab8f3436	fix(config): migrate project config to .smartconfig.json and refresh build settings	2026-03-24 19:02:45 +00:00
Juergen Kunz	1b5b023556	fix(build): update bundled_ui.ts with latest build output	2026-03-24 15:09:16 +00:00
Juergen Kunz	61a83f0c03	v1.12.3 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-24 15:08:40 +00:00
Juergen Kunz	a9448ec0df	fix(package): bump package version to 1.12.3	2026-03-24 15:08:40 +00:00
Juergen Kunz	a29f13c75a	v1.12.2 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-24 15:08:13 +00:00
Juergen Kunz	02b3a79d99	fix(config): migrate runtime configuration loading from npmextra to smartconfig	2026-03-24 15:08:13 +00:00
Juergen Kunz	7f4528bdab	v1.12.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-14 23:27:25 +00:00
Juergen Kunz	a829f76d4b	fix(storage): rename S3 configuration and change stream interfaces to storage-oriented types	2026-03-14 23:27:25 +00:00
Juergen Kunz	2da2d57df1	v1.12.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-12 15:16:24 +00:00
Juergen Kunz	150d6d9d86	feat(web): replace custom S3 browser components with dees-s3-browser integration	2026-03-12 15:16:24 +00:00
Juergen Kunz	c4afbdfd7f	v1.11.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 13m25s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-29 15:56:05 +00:00
Juergen Kunz	b72b36c4ea	fix(mongo-browser): increase default editor width and broaden resize range in Mongo browser pane	2026-01-29 15:56:05 +00:00
Juergen Kunz	8c5cea7e0b	v1.11.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 14m55s Details Default (tags) / release (push) Has been cancelled Details Default (tags) / metadata (push) Has been cancelled Details	2026-01-28 16:49:34 +00:00
Juergen Kunz	d9fc7f8257	feat(s3): add rename support for files and folders in S3 UI columns and keys	2026-01-28 16:49:34 +00:00