update

2026-01-04 22:42:19 +00:00
parent abed903b06
commit febf480b60
22 changed files with 2665 additions and 321 deletions
--- a/.playwright-mcp/mainpage5.png
+++ b/.playwright-mcp/mainpage5.png
--- a/.playwright-mcp/mainpage6.png
+++ b/.playwright-mcp/mainpage6.png
--- a/.playwright-mcp/mainpage7.png
+++ b/.playwright-mcp/mainpage7.png
--- a/.playwright-mcp/newui.png
+++ b/.playwright-mcp/newui.png
--- a/cli.child.ts
+++ b/cli.child.ts
@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+process.env.CLI_CALL = 'true';
+import * as cliTool from './ts/index.js';
+cliTool.runCli();
--- a/cli.js
+++ b/cli.js
@@ -1,4 +1,4 @@
 #!/usr/bin/env node
 process.env.CLI_CALL = 'true';
-const cliTool = require('./dist_ts/index');
+const cliTool = await import('./dist_ts/index.js');
 cliTool.runCli();
--- a/cli.ts.js
+++ b/cli.ts.js
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
 process.env.CLI_CALL = 'true';
-import '@git.zone/tsrun';
-const cliTool = await import('./ts/index.js');
-cliTool.runCli();
+
+import * as tsrun from '@git.zone/tsrun';
+tsrun.runPath('./cli.child.js', import.meta.url);
--- a/html/index.html
+++ b/html/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>opencdn</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      height: 100%;
+      background: #09090b;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./bundle.js"></script>
+  <script>
+    window.addEventListener('DOMContentLoaded', () => {
+      const appContainer = document.getElementById('app');
+      const config = window.__OPENCDN_CONFIG__ || {};
+      const path = window.location.pathname;
+
+      let element;
+      if (path.startsWith('/peek')) {
+        element = document.createElement('opencdn-peekpage');
+        element.allowedPackages = config.allowedPackages || [];
+      } else {
+        element = document.createElement('opencdn-mainpage');
+        element.version = config.version || '1.0.0';
+        element.mode = config.mode || 'prod';
+        element.allowedPackages = config.allowedPackages || [];
+      }
+
+      appContainer.appendChild(element);
+    });
+  </script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "npmcdn",
+  "name": "@serve.zone/opencdn",
  "version": "1.0.3",
-  "description": "a cdn using npm as source",
+  "description": "A CDN that serves files directly from npm packages",
  "type": "module",
  "main": "dist_ts/index.js",
  "typings": "dist_ts/index.d.ts",
@@ -11,16 +11,26 @@
    "test": "(tstest test/)",
    "start": "(node --max_old_space_size=100 ./cli.js)",
    "startTs": "(node cli.ts.js)",
-    "build": "(tsbuild --web)"
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element --production)",
+    "buildBackend": "(tsbuild --web)",
+    "bundleUI": "pnpm run build && tsx scripts/bundle-ui.ts",
+    "watch": "tswatch website"
  },
  "devDependencies": {
    "@git.zone/tsbuild": "^4.1.0",
+    "@git.zone/tsbundle": "^2.6.3",
    "@git.zone/tsrun": "^2.0.1",
    "@git.zone/tstest": "^3.1.4",
+    "@git.zone/tswatch": "^2.3.13",
    "@push.rocks/smartnetwork": "^4.4.0",
-    "@push.rocks/smartrequest": "^5.0.1"
+    "@push.rocks/smartrequest": "^5.0.1",
+    "@types/node": "^22.10.0"
  },
  "dependencies": {
+    "@design.estate/dees-catalog": "^3.3.1",
+    "@design.estate/dees-domtools": "^2.3.6",
+    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-wcctools": "^2.0.1",
    "@losslessone_private/lole-serviceserver": "^1.0.54",
    "@push.rocks/projectinfo": "^5.0.2",
    "@push.rocks/qenv": "^6.1.0",
@@ -35,7 +45,6 @@
    "@types/express": "^5.0.6",
    "compression": "^1.8.1",
    "express": "^4.22.1",
-    "lit-ntml": "^4.0.2",
    "prom-client": "^15.1.3"
  },
  "private": true,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@@ -1,8 +1,8 @@
-# npmcdn
+# @serve.zone/opencdn

 > 🚀 A blazing-fast CDN that serves files directly from npm packages

-`npmcdn` is a lightweight, TypeScript-powered CDN server that allows you to serve specific files from npm packages. Think of it as your own private unpkg/jsdelivr, but with fine-grained control over which packages are accessible.
+`@serve.zone/opencdn` is a lightweight, TypeScript-powered CDN server that allows you to serve specific files from npm packages. Think of it as your own private unpkg/jsdelivr, but with fine-grained control over which packages are accessible.

 ## Issue Reporting and Security

@@ -21,13 +21,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 ## 📦 Installation

 ```bash
-pnpm add npmcdn
+pnpm add @serve.zone/opencdn
 ```

 ## 🚀 Quick Start

 ```typescript
-import { UiPublicServer } from 'npmcdn';
+import { UiPublicServer } from '@serve.zone/opencdn';

 const server = new UiPublicServer({
  port: 3000,
--- a/scripts/bundle-ui.ts
+++ b/scripts/bundle-ui.ts
@@ -0,0 +1,204 @@
+/**
+ * UI Bundler Script for opencdn
+ * Encodes all files from dist_serve/ as base64
+ * and generates ts/embedded-ui.generated.ts
+ *
+ * Usage:
+ *   pnpm bundleUI           # One-time bundle
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PROJECT_ROOT = path.join(__dirname, '..');
+
+const UI_DIST_PATH = path.join(PROJECT_ROOT, 'dist_bundle');
+const HTML_PATH = path.join(PROJECT_ROOT, 'html');
+const OUTPUT_PATH = path.join(PROJECT_ROOT, 'ts', 'embedded-ui.generated.ts');
+
+const CONTENT_TYPES: Record<string, string> = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.otf': 'font/otf',
+  '.map': 'application/json',
+  '.txt': 'text/plain',
+  '.xml': 'application/xml',
+  '.webp': 'image/webp',
+  '.webmanifest': 'application/manifest+json',
+};
+
+interface IEmbeddedFile {
+  path: string;
+  base64: string;
+  contentType: string;
+  size: number;
+}
+
+function walkDir(dir: string, baseDir: string, files: IEmbeddedFile[] = []): IEmbeddedFile[] {
+  if (!fs.existsSync(dir)) {
+    return files;
+  }
+
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      walkDir(fullPath, baseDir, files);
+    } else if (entry.isFile()) {
+      const relativePath = '/' + path.relative(baseDir, fullPath).replace(/\\/g, '/');
+      const ext = path.extname(entry.name).toLowerCase();
+      const contentType = CONTENT_TYPES[ext] || 'application/octet-stream';
+
+      const content = fs.readFileSync(fullPath);
+      const base64 = content.toString('base64');
+
+      files.push({
+        path: relativePath,
+        base64,
+        contentType,
+        size: content.length,
+      });
+
+      console.log(`[bundle-ui] Encoded: ${relativePath} (${formatSize(content.length)})`);
+    }
+  }
+
+  return files;
+}
+
+function bundleUI(): void {
+  console.log('[bundle-ui] Starting UI bundling...');
+  console.log(`[bundle-ui] Source (dist): ${UI_DIST_PATH}`);
+  console.log(`[bundle-ui] Source (html): ${HTML_PATH}`);
+  console.log(`[bundle-ui] Output: ${OUTPUT_PATH}`);
+
+  const files: IEmbeddedFile[] = [];
+  let totalSize = 0;
+
+  // Walk through dist_serve directory (bundled JS)
+  if (fs.existsSync(UI_DIST_PATH)) {
+    walkDir(UI_DIST_PATH, UI_DIST_PATH, files);
+  } else {
+    console.log('[bundle-ui] WARNING: dist_serve not found, skipping...');
+  }
+
+  // Walk through html directory (static HTML)
+  if (fs.existsSync(HTML_PATH)) {
+    walkDir(HTML_PATH, HTML_PATH, files);
+  } else {
+    console.log('[bundle-ui] WARNING: html directory not found, skipping...');
+  }
+
+  if (files.length === 0) {
+    console.error('[bundle-ui] ERROR: No files found to bundle!');
+    console.error('[bundle-ui] Run "pnpm build" first to build the UI');
+    process.exit(1);
+  }
+
+  // Calculate total size
+  for (const file of files) {
+    totalSize += file.size;
+  }
+
+  // Sort files for consistent output
+  files.sort((a, b) => a.path.localeCompare(b.path));
+
+  // Generate TypeScript module
+  const tsContent = generateTypeScript(files, totalSize);
+
+  // Write output file
+  fs.writeFileSync(OUTPUT_PATH, tsContent);
+
+  console.log(`[bundle-ui] Generated ${OUTPUT_PATH}`);
+  console.log(`[bundle-ui] Total files: ${files.length}`);
+  console.log(`[bundle-ui] Total size: ${formatSize(totalSize)}`);
+  console.log(`[bundle-ui] Bundling complete!`);
+}
+
+function generateTypeScript(files: IEmbeddedFile[], totalSize: number): string {
+  const fileEntries = files
+    .map(
+      (f) =>
+        `  ['${f.path}', { base64: '${f.base64}', contentType: '${f.contentType}' }]`
+    )
+    .join(',\n');
+
+  return `// AUTO-GENERATED FILE - DO NOT EDIT
+// Generated by scripts/bundle-ui.ts
+// Total files: ${files.length}
+// Total size: ${formatSize(totalSize)}
+// Generated at: ${new Date().toISOString()}
+
+interface IEmbeddedFile {
+  base64: string;
+  contentType: string;
+}
+
+const EMBEDDED_FILES: Map<string, IEmbeddedFile> = new Map([
+${fileEntries}
+]);
+
+/**
+ * Get an embedded file by path
+ * @param path - The file path (e.g., '/index.html')
+ * @returns The file data and content type, or null if not found
+ */
+export function getEmbeddedFile(path: string): { data: Buffer; contentType: string } | null {
+  const file = EMBEDDED_FILES.get(path);
+  if (!file) return null;
+
+  // Decode base64 to Buffer
+  const data = Buffer.from(file.base64, 'base64');
+  return { data, contentType: file.contentType };
+}
+
+/**
+ * Check if an embedded file exists
+ * @param path - The file path to check
+ */
+export function hasEmbeddedFile(path: string): boolean {
+  return EMBEDDED_FILES.has(path);
+}
+
+/**
+ * List all embedded file paths
+ */
+export function listEmbeddedFiles(): string[] {
+  return Array.from(EMBEDDED_FILES.keys());
+}
+
+/**
+ * Get the total number of embedded files
+ */
+export function getEmbeddedFileCount(): number {
+  return EMBEDDED_FILES.size;
+}
+`;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+// Run bundler
+bundleUI();
--- a/ts/embedded-ui.generated.ts
+++ b/ts/embedded-ui.generated.ts
--- a/ts/index.ts
+++ b/ts/index.ts
@@ -6,10 +6,9 @@ process.env.UIP_ENV = process.env.BACKEND_URL?.includes('develop-backend') ? 'de

 export const defaultPublicServer = new UiPublicServer({
  port: 3000,
-  packageBaseDirectory: './public/',
  npmRegistryUrl: 'https://registry.npmjs.org/',
  allowedPackages: [
-    '@pushrocks/smartfile'
+    '@push.rocks/smartfile'
  ],
  mode: process.env.UIP_ENV === 'dev' ? 'dev' : 'prod',
  log: false,
--- a/ts/npm-publicserver.classes.uipublicserver.ts
+++ b/ts/npm-publicserver.classes.uipublicserver.ts
@@ -1,12 +1,18 @@
 import * as interfaces from './interfaces.js';
 import * as plugins from './plugins.js';
 import * as paths from './paths.js';
-import * as ntml from './ntml/index.js';
+import { getEmbeddedFile, hasEmbeddedFile, listEmbeddedFiles } from './embedded-ui.generated.js';
+
+export interface IPackageConfig {
+  baseDirectory?: string;  // Override base directory for this package
+  registry?: string;       // Override registry URL for this package
+}

 export interface IPublicServerOptions {
-  packageBaseDirectory?: string;
-  npmRegistryUrl?: string;
-  allowedPackages?: string[];
+  packageBaseDirectory?: string;  // Default base directory (default: './')
+  npmRegistryUrl?: string;        // Default registry URL
+  allowedPackages?: string[];     // List of allowed package names
+  packageConfigs?: Record<string, IPackageConfig>;  // Per-package configuration
  port?: number;
  mode: 'dev' | 'prod';
  log?: boolean;
@@ -17,7 +23,6 @@ export interface IPublicServerOptions {
 */
 export class UiPublicServer {
  public projectinfo = new plugins.projectinfo.ProjectinfoNpm(paths.packageDir);
-  public readme: string;
  public startedAt: string;
  private server: plugins.http.Server;
  private npmRegistry: plugins.smartnpm.NpmRegistry;
@@ -29,12 +34,38 @@ export class UiPublicServer {
    packageBaseDirectory: './',
    npmRegistryUrl: 'https://registry.npmjs.org',
    allowedPackages: [],
+    packageConfigs: {},
    port: 8080,
    mode: 'dev',
    log: true,
  };
  public options: IPublicServerOptions;

+  /**
+   * Get the base directory for a specific package
+   */
+  private getPackageBaseDirectory(packageName: string): string {
+    const packageConfig = this.options.packageConfigs?.[packageName];
+    let baseDir = packageConfig?.baseDirectory || this.options.packageBaseDirectory;
+    if (!baseDir.endsWith('/')) {
+      baseDir += '/';
+    }
+    return baseDir;
+  }
+
+  /**
+   * Get the registry for a specific package
+   */
+  private getPackageRegistry(packageName: string): plugins.smartnpm.NpmRegistry {
+    const packageConfig = this.options.packageConfigs?.[packageName];
+    if (packageConfig?.registry && packageConfig.registry !== this.options.npmRegistryUrl) {
+      return new plugins.smartnpm.NpmRegistry({
+        npmRegistryUrl: packageConfig.registry,
+      });
+    }
+    return this.npmRegistry;
+  }
+
  constructor(optionsArg?: IPublicServerOptions) {
    // lets create an npm instance for the registry that we are talking to
    this.options = {
@@ -51,24 +82,12 @@ export class UiPublicServer {
    });
  }

-  /**
-   * initializes the readme content
-   */
-  private async initReadme(): Promise<void> {
-    const readmePath = plugins.path.join(paths.packageDir, 'readme.md');
-    const readmeContent = await plugins.smartfile.fs.toStringSync(readmePath);
-    this.readme = await plugins.smartmarkdown.SmartMarkdown.easyMarkdownToHtml(readmeContent);
-  }
-
  /**
   * starts the server
   */
  public async startServer() {
    console.log('starting the uipublicserver');

-    // Initialize readme
-    await this.initReadme();
-
    const done = plugins.smartpromise.defer();
    const expressApplication = plugins.express();

@@ -84,38 +103,83 @@ export class UiPublicServer {

    expressApplication.use(plugins.compression({ filter: shouldCompress }));

+    // Serve embedded UI files (index.html, bundle.js, etc.)
+    expressApplication.get('/', async (req, res) => {
+      await this.serveIndexHtml(req, res);
+    });
+
+    expressApplication.get('/index.html', async (req, res) => {
+      await this.serveIndexHtml(req, res);
+    });
+
+    // Serve other embedded static files (bundle.js, css, etc.)
+    expressApplication.get('/bundle.js', async (req, res) => {
+      res.setHeader('cache-control', 'no-cache, no-store, must-revalidate');
+      await this.serveEmbeddedFile('/bundle.js', res);
+    });
+
+    expressApplication.get('/bundle.js.map', async (req, res) => {
+      res.setHeader('cache-control', 'no-cache, no-store, must-revalidate');
+      await this.serveEmbeddedFile('/bundle.js.map', res);
+    });
+
+    // Serve any other embedded files
+    expressApplication.use('/assets', async (req, res, next) => {
+      const filePath = '/assets' + req.path;
+      if (hasEmbeddedFile(filePath)) {
+        await this.serveEmbeddedFile(filePath, res);
+      } else {
+        next();
+      }
+    });
+
+    // API endpoint for file listing (dev mode)
    if (this.options.mode === 'dev') {
-      expressApplication.use('/peek/', async (req, res) => {
-        const host = req.headers.host || 'localhost';
-        const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`);
-        const simpleResponse: interfaces.ISimpleResponse = await this.renderPeek({
-          headers: req.headers,
-          parsedUrl,
-        });
-        for (const header of Object.keys(simpleResponse.headers)) {
-          res.setHeader(header, simpleResponse.headers[header]);
+      expressApplication.get('/api/files/:org/:package', async (req, res) => {
+        const packageName = `${req.params.org}/${req.params.package}`;
+        const version = (req.query.version as string) || '';
+        const distTag = (req.query.disttag as string) || '';
+
+        if (!this.options.allowedPackages.includes(packageName)) {
+          res.status(403).json({ error: 'Package not allowed' });
+          return;
+        }
+
+        const baseDirectory = this.getPackageBaseDirectory(packageName);
+        const registry = this.getPackageRegistry(packageName);
+
+        try {
+          const result = await registry.getFilesFromPackage(
+            packageName,
+            plugins.path.join(baseDirectory),
+            { version, distTag }
+          );
+
+          const files = result.map(smartfile => {
+            return smartfile.path.replace(plugins.path.join('package', baseDirectory), '');
+          });
+
+          // Get package info for versions
+          const packageInfo = await registry.getPackageInfo(packageName).catch(() => null);
+          const versions = packageInfo?.allVersions?.slice(-20).reverse().map(v => v.version) || [];
+
+          res.json({ files, versions });
+        } catch (err) {
+          res.status(404).json({ error: 'Package not found' });
        }
-        res.status(simpleResponse.status);
-        res.write(simpleResponse.body);
-        res.end();
      });

-      expressApplication.use('/readme/', async (req, res) => {
-        const host = req.headers.host || 'localhost';
-        const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`);
-        const simpleResponse: interfaces.ISimpleResponse = await this.renderReadme({
-          headers: req.headers,
-          parsedUrl,
-        });
-        for (const header of Object.keys(simpleResponse.headers)) {
-          res.setHeader(header, simpleResponse.headers[header]);
-        }
-        res.status(simpleResponse.status);
-        res.write(simpleResponse.body);
-        res.end();
+      // Peek route serves the SPA
+      expressApplication.get('/peek/*', async (req, res) => {
+        await this.serveIndexHtml(req, res);
+      });
+
+      expressApplication.get('/peek', async (req, res) => {
+        await this.serveIndexHtml(req, res);
      });
    }

+    // Main package serving route
    expressApplication.use('/', async (req, res) => {
      const host = req.headers.host || 'localhost';
      const parsedUrl = new plugins.url.URL(`http://${host}${req.url}`);
@@ -143,6 +207,52 @@ export class UiPublicServer {
    await done.promise;
  }

+  /**
+   * Serve the index.html with configuration injected
+   */
+  private async serveIndexHtml(req: plugins.express.Request, res: plugins.express.Response) {
+    const embeddedFile = getEmbeddedFile('/index.html');
+    if (!embeddedFile) {
+      res.status(500).send('UI not bundled. Run pnpm bundleUI first.');
+      return;
+    }
+
+    // Inject configuration into the HTML
+    let html = embeddedFile.data.toString('utf-8');
+    const config = {
+      version: this.projectinfo.version,
+      mode: this.options.mode,
+      allowedPackages: this.options.allowedPackages,
+    };
+
+    // Inject config script before the closing </head> tag
+    const configScript = `<script>window.__OPENCDN_CONFIG__ = ${JSON.stringify(config)};</script>`;
+    html = html.replace('</head>', `${configScript}\n</head>`);
+
+    res.setHeader('content-type', embeddedFile.contentType);
+    res.setHeader('cache-control', 'no-cache');
+    res.status(200).send(html);
+  }
+
+  /**
+   * Serve an embedded file
+   */
+  private async serveEmbeddedFile(filePath: string, res: plugins.express.Response) {
+    const embeddedFile = getEmbeddedFile(filePath);
+    if (!embeddedFile) {
+      res.status(404).send('File not found');
+      return;
+    }
+
+    res.setHeader('content-type', embeddedFile.contentType);
+    res.setHeader('content-length', embeddedFile.data.length.toString());
+    // Only set cache-control if not already set
+    if (!res.getHeader('cache-control')) {
+      res.setHeader('cache-control', 'public, max-age=31536000, immutable');
+    }
+    res.status(200).send(embeddedFile.data);
+  }
+
  public disableLogging() {
    this.options.log = false;
  }
@@ -171,25 +281,14 @@ export class UiPublicServer {
  private render: interfaces.IRenderFunction = async (req) => {
    const pathArray = req.parsedUrl.pathname.split('/');

-    if (pathArray.length < 3) {
-      const textArray = [
-        `serving javascript to the web for Lossless GmbH.<br/>`,
-        `Running in mode: <b>${this.options.mode}</b><br/><br/>`,
-      ];
-      if (this.options.mode === 'dev') {
-        textArray.push(
-          `<b>Wondering what we serve?</b> <a href="/peek/">Lets take a peek!</a><br/>`
-        );
-        textArray.push(`<b>Documentation:</b> <a href="/readme/">Read the docs</a>`);
-      }
+    // Handle root path - already served by express routes above
+    if (pathArray.length < 3 || !pathArray[1].startsWith('@')) {
      return {
        headers: {
          'content-type': 'text/html',
        },
-        status: 201,
-        body: await plugins.litNtml.html`
-        ${ntml.getBody(this, textArray)}
-      `,
+        status: 404,
+        body: this.getErrorPage('Not Found', 'The requested path was not found.'),
      };
    }

@@ -198,11 +297,11 @@ export class UiPublicServer {
    if (!npmOrg.startsWith('@')) {
      console.log('malformed npmorg');
      return {
-        status: 500,
+        status: 400,
        headers: {
          'content-type': 'text/html',
        },
-        body: `npmorg "${npmOrg}" must start with @`,
+        body: this.getErrorPage('Bad Request', `npm org "${npmOrg}" must start with @`),
      };
    }

@@ -219,15 +318,17 @@ export class UiPublicServer {
        headers: {
          'content-type': 'text/html',
        },
-        status: 503,
-        body: await plugins.litNtml.html`
-        the requested package is not allowlisted for public access
-      `,
+        status: 403,
+        body: this.getErrorPage('Forbidden', 'The requested package is not allowlisted for public access.'),
      };
    }

+    // Get per-package configuration
+    const baseDirectory = this.getPackageBaseDirectory(packageName);
+    const registry = this.getPackageRegistry(packageName);
+
    // lets care about the inner package path
-    let filePath = this.options.packageBaseDirectory;
+    let filePath = baseDirectory;
    let first = true;
    for (let i = 3; i < pathArray.length; i++) {
      if (first) {
@@ -253,7 +354,7 @@ export class UiPublicServer {
      smartfile = await this.requestMap[requestDescriptor].promise;
    } else {
      this.requestMap[requestDescriptor] = plugins.smartpromise.defer();
-      smartfile = await this.npmRegistry
+      smartfile = await registry
        .getFileFromPackage(packageName, filePath, {
          version,
          distTag,
@@ -272,9 +373,9 @@ export class UiPublicServer {
        headers: {
          'content-type': 'text/html',
        },
-        body: await ntml.getBody(
-          this,
-          `${packageName}@${version} does not have a file at "${filePath}"`
+        body: this.getErrorPage(
+          'Not Found',
+          `${packageName}@${version || 'latest'} does not have a file at "${filePath}"`
        ),
      };
    }
@@ -298,121 +399,78 @@ export class UiPublicServer {
    };
  };

-  private renderPeek: interfaces.IRenderFunction = async (req) => {
-    const pathArray = req.parsedUrl.pathname.split('/');
-    const npmOrg = pathArray[1];
-    const npmPackage = pathArray[2];
-    const npmPackageName = `${npmOrg}/${npmPackage}`;
-    const distTag = req.parsedUrl.searchParams.get('disttag');
-    const version = req.parsedUrl.searchParams.get('version');
-
-    // lets care about cors
-
-    if (!npmOrg || !npmPackage || !this.options.allowedPackages.includes(npmPackageName)) {
-      return {
-        status: 200,
-        headers: {
-          'content-type': 'text/html',
-        },
-        body: `
-          ${await ntml.getBody(this, [
-            `<a href="../">../ -> Go back</a><br/>`,
-            `<b>allowlisted packages:</b><br/>`,
-            ...this.options.allowedPackages.map((packageArg) => {
-              return `
-              <div>"${packageArg}" -> mapping to "${this.options.packageBaseDirectory}" inside the package <a href="/peek/${packageArg}">Peek...</a></div>
-            `;
-            }),
-          ])}
-        `,
-      };
+  /**
+   * Generate a simple error page
+   */
+  private getErrorPage(title: string, message: string): string {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title} - opencdn</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      min-height: 100vh;
+      background: #09090b;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+      color: #fafafa;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      -webkit-font-smoothing: antialiased;
    }
-    const result = await this.npmRegistry
-      .getFilesFromPackage(npmPackageName, plugins.path.join(this.options.packageBaseDirectory), {
-        version: version,
-        distTag: distTag,
-      })
-      .catch((err) => {
-        return;
-      });
-
-    if (!result) {
-      return {
-        status: 404,
-        headers: {
-          'content-type': 'text/html',
-        },
-        body: `
-          ${await ntml.getBody(this, [
-            `<a href="/peek/">/peek/ -> Go to peek overview</a><br/>`,
-            `<b>Not found: package ${npmPackageName}@${
-              version || 'latest'
-            } is not available on the supplied registry</b><br/>`,
-          ])}
-        `,
-      };
+    .card {
+      background: #09090b;
+      border: 1px solid #27272a;
+      border-radius: 8px;
+      padding: 48px;
+      max-width: 500px;
+      text-align: center;
    }
-
-    const packageInfo = await this.npmRegistry.getPackageInfo(npmPackageName);
-
-    return {
-      status: 200,
-      headers: {
-        'content-type': 'text/html',
-      },
-      body: `
-        ${await ntml.getBody(this, [
-          `<a href="/peek/">/peek/ -> Go to peek overview</a><br/><br/>`,
-          `<h1>${npmPackageName}@${version || distTag || '<i>inferred</i> latest'}</h1>`,
-          `<b>Versions:</b> ${packageInfo.allVersions
-            .map(
-              (versionArg) =>
-                `<a href="./${npmPackage}?version=${versionArg.version}">${versionArg.version}</a> | `
-            )
-            .join('')}<br/><br/>`,
-          `<b>DistTags:</b> ${
-            packageInfo.allDistTags
-              .map(
-                (distTagArg) =>
-                  `<a href="./${npmPackage}?disttag=${distTagArg.name}">${distTagArg.name} (${distTagArg.targetVersion})</a> | `
-              )
-              .join('') || 'no dist tags found!'
-          }<br/><br/>`,
-          `<b>File Overview at version and path:</b><br/>`,
-          `"<b>${npmPackageName}@${
-            version || distTag || '<i>inferred</i> latest'
-          }</b>" under internal path "<b>${this.options.packageBaseDirectory}</b>"<br/></br>`,
-          ...result.map((smartfile) => {
-            const displayPath = smartfile.path.replace(
-              plugins.path.join('package', this.options.packageBaseDirectory),
-              ''
-            );
-            return `<a href="/${npmPackageName}/${displayPath}?version=${version || ''}&disttag=${
-              distTag || ''
-            }">${displayPath}</a><br/>`;
-          }),
-        ])}
-      `,
-    };
-  };
-
-  private renderReadme: interfaces.IRenderFunction = async (req) => {
-    return {
-      status: 200,
-      headers: {
-        'content-type': 'text/html',
-      },
-      body: await ntml.getBody(this, [
-        `<style>
-          pre {
-            display: block;
-            background: #fafafa;
-            border: 1px dotted #CCC;
-            padding: 20px;
-          }
-        </style>`,
-        this.readme,
-      ]),
-    };
-  };
+    .icon {
+      font-size: 64px;
+      margin-bottom: 24px;
+      opacity: 0.8;
+    }
+    h2 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #fafafa;
+      margin-bottom: 12px;
+    }
+    p {
+      color: #a1a1aa;
+      margin-bottom: 32px;
+      line-height: 1.5;
+    }
+    a {
+      display: inline-block;
+      padding: 10px 20px;
+      background: #27272a;
+      border: 1px solid #27272a;
+      border-radius: 6px;
+      color: #fafafa;
+      text-decoration: none;
+      font-weight: 500;
+      font-size: 14px;
+      transition: all 0.15s;
+    }
+    a:hover {
+      border-color: #d4d4d8;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="icon">📦</div>
+    <h2>${title}</h2>
+    <p>${message}</p>
+    <a href="/">← Back to Home</a>
+  </div>
+</body>
+</html>`;
+  }
 }
--- a/ts/ntml/body.ts
+++ b/ts/ntml/body.ts
@@ -1,60 +0,0 @@
-import type { UiPublicServer } from '../npm-publicserver.classes.uipublicserver.js';
-import * as plugins from '../plugins.js';
-
-export const getBody = async (uipublicServerArg: UiPublicServer, contentArg: string | string[]) => {
-  return await plugins.litNtml.html`
-    <head></head>
-    <body>
-      <style>
-        body {
-          margin: 0px;
-          padding: 20px;
-          background: #eeeeeb;
-          font-family: 'Courier New', Courier, monospace;
-        }
-
-        .main {
-          background: #ffffff;
-          max-width: 1000px;
-          margin: auto;
-          border: 1px dashed #CCCCCC;
-          border-radius: 10px;
-          padding: 20px;
-          padding-bottom: 60px;
-          position:relative;
-          overflow: hidden;
-        }
-        .logo {
-          text-align: center;
-          background: #fafafa;
-          border-bottom: 1px dotted #CCCCCC;
-          margin-left: -20px;
-          margin-top: -20px;
-          margin-right: -20px;
-          margin-bottom: 20px;
-          padding: 20px;
-        }
-
-        .footer {
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          left: 0px;
-          text-align: center;
-          line-height: 40px;
-          background: #fafafa;
-        }
-      </style>
-      <div class="main">
-        <div class="logo">
-          <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" onclick="window.location.href = 'https://lossless.com'" />
-        </div>
-        ${contentArg}
-        <div class="footer">
-          UiPublicServer v${uipublicServerArg.projectinfo.version} |
-          running since ${uipublicServerArg.startedAt} |
-          <a href="https://lossless.gmbh" target="_blank">Legal Info</a></div>
-      </div>
-    </body>
-  `;
-};
--- a/ts/ntml/index.ts
+++ b/ts/ntml/index.ts
@@ -1 +0,0 @@
-export * from './body.js';
--- a/ts/plugins.ts
+++ b/ts/plugins.ts
@@ -29,7 +29,6 @@ export {
 // unscoped packages
 import compression from 'compression';
 import express from 'express';
-import * as litNtml from 'lit-ntml';
 import * as promClient from 'prom-client';

-export { compression, express, litNtml, promClient };
+export { compression, express, promClient };
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -0,0 +1,2 @@
+export * from './opencdn-mainpage.js';
+export * from './opencdn-peekpage.js';
--- a/ts_web/elements/opencdn-mainpage.ts
+++ b/ts_web/elements/opencdn-mainpage.ts
@@ -0,0 +1,358 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+} from '@design.estate/dees-element';
+import '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'opencdn-mainpage': OpencdnMainpage;
+  }
+}
+
+@customElement('opencdn-mainpage')
+export class OpencdnMainpage extends DeesElement {
+  @property({ type: String })
+  public accessor version: string = '1.0.0';
+
+  @property({ type: String })
+  public accessor mode: string = 'prod';
+
+  @property({ type: Array })
+  public accessor allowedPackages: string[] = [];
+
+  @state()
+  private accessor currentView: 'home' | 'peek' | 'docs' = 'home';
+
+  // Shadcn-like color palette
+  public static styles = [
+    css`
+      :host {
+        --background: #09090b;
+        --foreground: #fafafa;
+        --card: #09090b;
+        --card-foreground: #fafafa;
+        --muted: #27272a;
+        --muted-foreground: #a1a1aa;
+        --border: #27272a;
+        --input: #27272a;
+        --primary: #fafafa;
+        --primary-foreground: #18181b;
+        --secondary: #27272a;
+        --secondary-foreground: #fafafa;
+        --accent: #27272a;
+        --accent-foreground: #fafafa;
+        --ring: #d4d4d8;
+        --radius: 0.5rem;
+
+        display: block;
+        min-height: 100vh;
+        background: var(--background);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+        color: var(--foreground);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .container {
+        max-width: 700px;
+        margin: 0 auto;
+        padding: 60px 24px;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .header {
+        text-align: center;
+        margin-bottom: 48px;
+      }
+
+      .logo {
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 16px;
+      }
+
+      .logo-icon {
+        width: 48px;
+        height: 48px;
+        background: var(--foreground);
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .logo-icon dees-icon {
+        --dees-icon-color: var(--background);
+      }
+
+      .logo-text {
+        font-size: 36px;
+        font-weight: 600;
+        color: var(--foreground);
+        letter-spacing: -0.02em;
+      }
+
+      .tagline {
+        color: var(--muted-foreground);
+        font-size: 16px;
+        font-weight: 400;
+      }
+
+      .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 24px;
+      }
+
+      .usage-box {
+        background: var(--muted);
+        border-radius: var(--radius);
+        padding: 20px 24px;
+        border: 1px solid var(--border);
+      }
+
+      .usage-title {
+        color: var(--muted-foreground);
+        font-size: 14px;
+        margin-bottom: 12px;
+        text-align: center;
+      }
+
+      .usage-code {
+        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace;
+        font-size: 14px;
+        color: var(--foreground);
+        background: var(--background);
+        padding: 14px 18px;
+        border-radius: calc(var(--radius) - 2px);
+        text-align: center;
+        border: 1px solid var(--border);
+      }
+
+      .nav-buttons {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      .nav-buttons dees-button {
+        --dees-button-width: auto;
+      }
+
+      .packages-section {
+        margin-top: 8px;
+      }
+
+      .packages-title {
+        color: var(--foreground);
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .packages-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .package-tag {
+        background: var(--secondary);
+        color: var(--muted-foreground);
+        padding: 8px 14px;
+        border-radius: calc(var(--radius) - 2px);
+        font-family: 'SF Mono', 'Fira Code', monospace;
+        font-size: 13px;
+        border: 1px solid var(--border);
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .package-tag:hover {
+        background: var(--accent);
+        color: var(--foreground);
+        border-color: var(--ring);
+      }
+
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: 32px;
+        margin-top: auto;
+        border-top: 1px solid var(--border);
+        font-size: 13px;
+        color: var(--muted-foreground);
+      }
+
+      .status {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        color: #22c55e;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        background: #22c55e;
+        border-radius: 50%;
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      .version {
+        font-family: 'SF Mono', monospace;
+        color: var(--muted-foreground);
+        font-size: 12px;
+      }
+
+      .mode-badge {
+        padding: 4px 10px;
+        border-radius: calc(var(--radius) - 2px);
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .mode-badge.dev {
+        background: rgba(34, 197, 94, 0.1);
+        color: #22c55e;
+      }
+
+      .mode-badge.prod {
+        background: rgba(239, 68, 68, 0.1);
+        color: #ef4444;
+      }
+
+      .footer-right {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .footer-link {
+        color: var(--muted-foreground);
+        text-decoration: none;
+        transition: color 0.15s ease;
+        font-size: 13px;
+      }
+
+      .footer-link:hover {
+        color: var(--foreground);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: var(--muted-foreground);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="container">
+        <div class="header">
+          <div class="logo">
+            <div class="logo-icon">
+              <dees-icon .icon=${'lucide:package'} .iconSize=${24}></dees-icon>
+            </div>
+            <span class="logo-text">opencdn</span>
+          </div>
+          <p class="tagline">Serve files directly from npm packages</p>
+        </div>
+
+        <div class="content">
+          <div class="usage-box">
+            <div class="usage-title">Request files using:</div>
+            <div class="usage-code">/@scope/package/path/to/file.js?version=1.0.0</div>
+          </div>
+
+          ${this.mode === 'dev' ? html`
+            <div class="nav-buttons">
+              <dees-button type="highlighted" @click=${() => window.location.href = '/peek/'}>
+                <dees-icon .icon=${'lucide:folder-open'} .iconSize=${16} slot="iconLeft"></dees-icon>
+                Browse Packages
+              </dees-button>
+              <dees-button @click=${() => window.location.href = '/readme/'}>
+                <dees-icon .icon=${'lucide:book-open'} .iconSize=${16} slot="iconLeft"></dees-icon>
+                Documentation
+              </dees-button>
+            </div>
+          ` : ''}
+
+          ${this.allowedPackages.length > 0 ? html`
+            <div class="packages-section">
+              <div class="packages-title">
+                <dees-icon .icon=${'lucide:boxes'} .iconSize=${16}></dees-icon>
+                Available Packages
+              </div>
+              <div class="packages-list">
+                ${this.allowedPackages.map(pkg => html`
+                  <span class="package-tag" @click=${() => window.location.href = `/peek/${pkg}`}>
+                    ${pkg}
+                  </span>
+                `)}
+              </div>
+            </div>
+          ` : html`
+            <div class="empty-state">
+              <dees-icon .icon=${'lucide:package-x'} .iconSize=${48} style="opacity: 0.5;"></dees-icon>
+              <p>No packages configured</p>
+            </div>
+          `}
+        </div>
+
+        <div class="footer">
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <span class="status">
+              <span class="status-dot"></span>
+              Online
+            </span>
+            <span class="version">v${this.version}</span>
+            <span class="mode-badge ${this.mode}">${this.mode}</span>
+          </div>
+          <div class="footer-right">
+            <a href="https://task.vc" target="_blank" class="footer-link">Task Venture Capital</a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
--- a/ts_web/elements/opencdn-peekpage.ts
+++ b/ts_web/elements/opencdn-peekpage.ts
@@ -0,0 +1,682 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  cssManager,
+  css,
+  state,
+} from '@design.estate/dees-element';
+import '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'opencdn-peekpage': OpencdnPeekpage;
+  }
+}
+
+interface IFileNode {
+  name: string;
+  path: string;
+  isFile: boolean;
+  children?: IFileNode[];
+}
+
+@customElement('opencdn-peekpage')
+export class OpencdnPeekpage extends DeesElement {
+  @property({ type: String })
+  public accessor packageName: string = '';
+
+  @property({ type: String })
+  public accessor version: string = '';
+
+  @property({ type: Array })
+  public accessor allowedPackages: string[] = [];
+
+  @state()
+  private accessor files: string[] = [];
+
+  @state()
+  private accessor fileTree: IFileNode[] = [];
+
+  @state()
+  private accessor selectedFile: string | null = null;
+
+  @state()
+  private accessor fileContent: string = '';
+
+  @state()
+  private accessor loading: boolean = false;
+
+  @state()
+  private accessor searchQuery: string = '';
+
+  @state()
+  private accessor availableVersions: string[] = [];
+
+  @state()
+  private accessor expandedFolders: Set<string> = new Set();
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        --background: #09090b;
+        --foreground: #fafafa;
+        --muted: #27272a;
+        --muted-foreground: #a1a1aa;
+        --border: #27272a;
+        --primary: #fafafa;
+        --primary-foreground: #18181b;
+        --secondary: #27272a;
+        --ring: #d4d4d8;
+
+        display: block;
+        height: 100vh;
+        background: var(--background);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+        color: var(--foreground);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .app {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      /* Header */
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 12px 20px;
+        background: var(--background);
+        border-bottom: 1px solid var(--border);
+      }
+
+      .header-logo {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: 600;
+        color: var(--foreground);
+        text-decoration: none;
+        cursor: pointer;
+        transition: color 0.15s;
+      }
+
+      .header-logo:hover {
+        color: var(--muted-foreground);
+      }
+
+      .header-sep {
+        color: var(--border);
+      }
+
+      .header-package {
+        font-weight: 600;
+        color: var(--foreground);
+      }
+
+      .header-version {
+        padding: 4px 10px;
+        background: var(--muted);
+        border-radius: 6px;
+        font-size: 12px;
+        color: var(--muted-foreground);
+      }
+
+      .header-spacer {
+        flex: 1;
+      }
+
+      .version-select {
+        padding: 8px 12px;
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--foreground);
+        font-size: 13px;
+        cursor: pointer;
+        transition: border-color 0.15s;
+      }
+
+      .version-select:hover,
+      .version-select:focus {
+        border-color: var(--ring);
+        outline: none;
+      }
+
+      /* Main Content */
+      .main {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      /* Sidebar */
+      .sidebar {
+        width: 300px;
+        background: var(--background);
+        border-right: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sidebar-header {
+        padding: 12px 16px;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--muted-foreground);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .file-tree {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px 0;
+      }
+
+      /* Tree Items */
+      .tree-folder {
+        user-select: none;
+      }
+
+      .folder-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        cursor: pointer;
+        font-size: 13px;
+        color: var(--foreground);
+        transition: background 0.15s;
+      }
+
+      .folder-header:hover {
+        background: var(--muted);
+      }
+
+      .folder-chevron {
+        margin-left: auto;
+        font-size: 10px;
+        color: var(--muted-foreground);
+        transition: transform 0.15s;
+      }
+
+      .folder-chevron.open {
+        transform: rotate(90deg);
+      }
+
+      .folder-children {
+        padding-left: 16px;
+      }
+
+      .tree-file {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        cursor: pointer;
+        font-size: 13px;
+        color: var(--muted-foreground);
+        transition: all 0.15s;
+      }
+
+      .tree-file:hover {
+        background: var(--muted);
+        color: var(--foreground);
+      }
+
+      .tree-file.active {
+        background: var(--primary);
+        color: var(--primary-foreground);
+      }
+
+      /* Content Area */
+      .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .content-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 20px;
+        background: var(--background);
+        border-bottom: 1px solid var(--border);
+      }
+
+      .content-path {
+        font-family: 'SF Mono', 'Fira Code', monospace;
+        font-size: 13px;
+        color: var(--muted-foreground);
+      }
+
+      .content-path span {
+        color: var(--foreground);
+      }
+
+      .content-actions {
+        margin-left: auto;
+        display: flex;
+        gap: 8px;
+      }
+
+      /* Code Viewer */
+      .code-viewer {
+        flex: 1;
+        overflow: auto;
+        background: var(--background);
+      }
+
+      .code-viewer pre {
+        margin: 0;
+        padding: 16px 20px;
+        font-family: 'SF Mono', 'Fira Code', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-all;
+        color: var(--foreground);
+      }
+
+      /* Empty State */
+      .empty-state {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: var(--muted-foreground);
+        gap: 12px;
+      }
+
+      /* Package List View */
+      .package-list-container {
+        max-width: 700px;
+        margin: 0 auto;
+        padding: 60px 24px;
+        width: 100%;
+      }
+
+      .page-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 24px;
+      }
+
+      .search-box {
+        position: relative;
+        margin-bottom: 20px;
+      }
+
+      .search-input {
+        width: 100%;
+        padding: 14px 16px 14px 44px;
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--foreground);
+        font-size: 14px;
+        font-family: inherit;
+        outline: none;
+        transition: border-color 0.15s;
+      }
+
+      .search-input:focus {
+        border-color: var(--ring);
+      }
+
+      .search-input::placeholder {
+        color: var(--muted-foreground);
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--muted-foreground);
+      }
+
+      .package-count {
+        color: var(--muted-foreground);
+        font-size: 13px;
+        margin-bottom: 16px;
+      }
+
+      .package-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .package-link {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 16px 20px;
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--foreground);
+        font-family: 'SF Mono', 'Fira Code', monospace;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.15s;
+      }
+
+      .package-link:hover {
+        background: var(--primary);
+        border-color: var(--primary);
+        color: var(--primary-foreground);
+      }
+
+      .no-results {
+        text-align: center;
+        padding: 40px 20px;
+        color: var(--muted-foreground);
+      }
+
+      /* Scrollbar */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: var(--muted);
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #3f3f46;
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    // Parse URL to get package name
+    const path = window.location.pathname;
+    if (path.startsWith('/peek/') && path.length > 6) {
+      const parts = path.slice(6).split('/');
+      if (parts[0]?.startsWith('@') && parts[1]) {
+        this.packageName = `${parts[0]}/${parts[1]}`;
+        await this.loadPackageFiles();
+      }
+    }
+  }
+
+  private async loadPackageFiles() {
+    if (!this.packageName) return;
+
+    this.loading = true;
+    try {
+      // Fetch file list from API
+      const response = await fetch(`/api/files/${this.packageName}?version=${this.version}`);
+      if (response.ok) {
+        const data = await response.json();
+        this.files = data.files || [];
+        this.availableVersions = data.versions || [];
+        this.fileTree = this.buildFileTree(this.files);
+      }
+    } catch (err) {
+      console.error('Failed to load package files:', err);
+    }
+    this.loading = false;
+  }
+
+  private buildFileTree(files: string[]): IFileNode[] {
+    const root: IFileNode[] = [];
+
+    for (const filePath of files) {
+      const parts = filePath.split('/').filter(Boolean);
+      let currentLevel = root;
+      let currentPath = '';
+
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        currentPath += '/' + part;
+        const isFile = i === parts.length - 1;
+
+        let existing = currentLevel.find(n => n.name === part);
+        if (!existing) {
+          existing = {
+            name: part,
+            path: currentPath,
+            isFile,
+            children: isFile ? undefined : [],
+          };
+          currentLevel.push(existing);
+        }
+
+        if (!isFile && existing.children) {
+          currentLevel = existing.children;
+        }
+      }
+    }
+
+    // Sort: folders first, then files, alphabetically
+    const sortNodes = (nodes: IFileNode[]) => {
+      nodes.sort((a, b) => {
+        if (a.isFile && !b.isFile) return 1;
+        if (!a.isFile && b.isFile) return -1;
+        return a.name.localeCompare(b.name);
+      });
+      for (const node of nodes) {
+        if (node.children) sortNodes(node.children);
+      }
+    };
+    sortNodes(root);
+
+    return root;
+  }
+
+  private toggleFolder(path: string) {
+    const newSet = new Set(this.expandedFolders);
+    if (newSet.has(path)) {
+      newSet.delete(path);
+    } else {
+      newSet.add(path);
+    }
+    this.expandedFolders = newSet;
+  }
+
+  private async selectFile(filePath: string) {
+    this.selectedFile = filePath;
+    this.loading = true;
+
+    try {
+      const url = `/${this.packageName}${filePath}?version=${this.version}`;
+      const response = await fetch(url);
+      this.fileContent = await response.text();
+    } catch (err) {
+      this.fileContent = 'Failed to load file';
+    }
+
+    this.loading = false;
+  }
+
+  private navigateToPackage(pkg: string) {
+    window.location.href = `/peek/${pkg}`;
+  }
+
+  private get filteredPackages(): string[] {
+    if (!this.searchQuery) return this.allowedPackages;
+    const query = this.searchQuery.toLowerCase();
+    return this.allowedPackages.filter(pkg => pkg.toLowerCase().includes(query));
+  }
+
+  private renderTreeNode(node: IFileNode): TemplateResult {
+    if (node.isFile) {
+      return html`
+        <div
+          class="tree-file ${this.selectedFile === node.path ? 'active' : ''}"
+          @click=${() => this.selectFile(node.path)}
+        >
+          <dees-icon .icon=${'lucide:file'} .iconSize=${14}></dees-icon>
+          ${node.name}
+        </div>
+      `;
+    }
+
+    const isExpanded = this.expandedFolders.has(node.path);
+    return html`
+      <div class="tree-folder">
+        <div class="folder-header" @click=${() => this.toggleFolder(node.path)}>
+          <dees-icon .icon=${isExpanded ? 'lucide:folder-open' : 'lucide:folder'} .iconSize=${14}></dees-icon>
+          ${node.name}
+          <span class="folder-chevron ${isExpanded ? 'open' : ''}">▶</span>
+        </div>
+        ${isExpanded && node.children ? html`
+          <div class="folder-children">
+            ${node.children.map(child => this.renderTreeNode(child))}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private renderPackageList(): TemplateResult {
+    const filtered = this.filteredPackages;
+
+    return html`
+      <div class="package-list-container">
+        <div class="header-logo" @click=${() => window.location.href = '/'}>
+          <dees-icon .icon=${'lucide:package'} .iconSize=${24}></dees-icon>
+          opencdn
+        </div>
+
+        <h1 class="page-title" style="margin-top: 32px;">Browse Packages</h1>
+
+        <div class="search-box">
+          <dees-icon class="search-icon" .icon=${'lucide:search'} .iconSize=${16}></dees-icon>
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search packages..."
+            .value=${this.searchQuery}
+            @input=${(e: Event) => this.searchQuery = (e.target as HTMLInputElement).value}
+          />
+        </div>
+
+        <div class="package-count">
+          ${filtered.length === this.allowedPackages.length
+            ? `${this.allowedPackages.length} package${this.allowedPackages.length !== 1 ? 's' : ''} available`
+            : `${filtered.length} of ${this.allowedPackages.length} packages`}
+        </div>
+
+        ${filtered.length > 0 ? html`
+          <div class="package-list">
+            ${filtered.map(pkg => html`
+              <div class="package-link" @click=${() => this.navigateToPackage(pkg)}>
+                <dees-icon .icon=${'lucide:package'} .iconSize=${16}></dees-icon>
+                ${pkg}
+              </div>
+            `)}
+          </div>
+        ` : html`
+          <div class="no-results">No packages found matching your search.</div>
+        `}
+      </div>
+    `;
+  }
+
+  private renderFileBrowser(): TemplateResult {
+    return html`
+      <div class="app">
+        <header class="header">
+          <div class="header-logo" @click=${() => window.location.href = '/'}>
+            <dees-icon .icon=${'lucide:package'} .iconSize=${20}></dees-icon>
+            opencdn
+          </div>
+          <span class="header-sep">/</span>
+          <span class="header-package">${this.packageName}</span>
+          <span class="header-version">${this.version || 'latest'}</span>
+          <div class="header-spacer"></div>
+          ${this.availableVersions.length > 0 ? html`
+            <select
+              class="version-select"
+              @change=${(e: Event) => {
+                this.version = (e.target as HTMLSelectElement).value;
+                this.loadPackageFiles();
+              }}
+            >
+              <option value="">latest</option>
+              ${this.availableVersions.map(v => html`
+                <option value=${v} ?selected=${v === this.version}>${v}</option>
+              `)}
+            </select>
+          ` : ''}
+          <dees-button @click=${() => window.location.href = '/peek/'}>
+            <dees-icon .icon=${'lucide:arrow-left'} .iconSize=${14} slot="iconLeft"></dees-icon>
+            All Packages
+          </dees-button>
+        </header>
+
+        <div class="main">
+          <aside class="sidebar">
+            <div class="sidebar-header">Files (${this.files.length})</div>
+            <div class="file-tree">
+              ${this.fileTree.map(node => this.renderTreeNode(node))}
+            </div>
+          </aside>
+
+          <main class="content">
+            ${this.selectedFile ? html`
+              <div class="content-header">
+                <div class="content-path">
+                  <span>${this.selectedFile}</span>
+                </div>
+                <div class="content-actions">
+                  <dees-button @click=${() => {
+                    const url = `/${this.packageName}${this.selectedFile}?version=${this.version}`;
+                    window.open(url, '_blank');
+                  }}>
+                    <dees-icon .icon=${'lucide:external-link'} .iconSize=${14} slot="iconLeft"></dees-icon>
+                    Raw
+                  </dees-button>
+                </div>
+              </div>
+              <div class="code-viewer">
+                ${this.loading ? html`
+                  <div class="empty-state">
+                    <dees-spinner></dees-spinner>
+                  </div>
+                ` : html`
+                  <pre>${this.fileContent}</pre>
+                `}
+              </div>
+            ` : html`
+              <div class="empty-state">
+                <dees-icon .icon=${'lucide:file-text'} .iconSize=${48} style="opacity: 0.5;"></dees-icon>
+                <div>Select a file to view its contents</div>
+              </div>
+            `}
+          </main>
+        </div>
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    if (this.packageName) {
+      return this.renderFileBrowser();
+    }
+    return this.renderPackageList();
+  }
+}
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@@ -0,0 +1 @@
+export * from './elements/index.js';