npm - enigmatic - Versions diffs - 0.33.0 → 0.34.0 - Mend

enigmatic 0.33.0 → 0.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/{CLIENT_JS_DOCS.md → README.md} +178 -17
package/__tests__/e2.test.js +42 -12
package/beemap.js +47 -0
package/bun-server.js +26 -34
package/package.json +1 -1
package/public/client.js +58 -20
package/public/custom.js +23 -18
package/public/index.html +3 -0
package/public/index2.html +3 -2
package/public/client.css +0 -286
package/public/theme.css +0 -9

package/{CLIENT_JS_DOCS.md → README.md} RENAMED Viewed

@@ -1,4 +1,118 @@
-# client.js Documentation
+# Enigmatic
+![Tests](https://img.shields.io/badge/tests-26%20passing-brightgreen) ![Size](https://img.shields.io/badge/size-3.4%20KB-blue) ![Version](https://img.shields.io/npm/v/enigmatic)
+A lightweight client-side JavaScript library for DOM manipulation, reactive state management, and API interactions, with an optional Bun server for backend functionality.
+## Quick Start
+### Using client.js via CDN
+Include `client.js` in any HTML file using the unpkg CDN:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/enigmatic@0.34.0/public/client.js"></script>
+  <script>
+    // Configure your API URL
+    window.api_url = 'https://your-server.com';
+    // Define custom elements
+    window.custom = {
+      "hello-world": (data) => `Hello ${data || 'World'}`
+    };
+  </script>
+</head>
+<body>
+  <hello-world data="message"></hello-world>
+  <script>
+    window.state.message = "Hello World";
+  </script>
+</body>
+</html>
+```
+**Note:** Replace `0.34.0` with the latest version number from [npm](https://www.npmjs.com/package/enigmatic).
+### Using the Bun Server
+The Bun server provides a complete backend implementation with:
+- Key-value storage (using BeeMap)
+- File storage (using Cloudflare R2/S3)
+- Authentication (using Auth0)
+- Static file serving
+#### Installation
+1. Install Bun (if not already installed):
+   ```bash
+   curl -fsSL https://bun.sh/install | bash
+   ```
+2. Install dependencies:
+   ```bash
+   bun install
+   ```
+3. Generate HTTPS certificates (for local development):
+   ```bash
+   cd server
+   ./generate-certs.sh
+   cd ..
+   ```
+#### Environment Variables
+Create a `.env` file in the project root with the following variables:
+```bash
+# Auth0 Configuration
+AUTH0_DOMAIN=your-tenant.auth0.com
+AUTH0_CLIENT_ID=your-client-id
+AUTH0_CLIENT_SECRET=your-client-secret
+# Cloudflare R2 Configuration (optional, for file storage)
+CLOUDFLARE_ACCESS_KEY_ID=your-access-key-id
+CLOUDFLARE_SECRET_ACCESS_KEY=your-secret-access-key
+CLOUDFLARE_BUCKET_NAME=your-bucket-name
+CLOUDFLARE_PUBLIC_URL=https://your-account-id.r2.cloudflarestorage.com
+```
+#### Running the Server
+Start the server with hot reload:
+```bash
+npm start
+# or
+bun --hot ./bun-server.js
+```
+The server will start on `https://localhost:3000` (HTTPS is required for Auth0 cookies).
+#### Server Features
+- **Static File Serving**: Automatically serves any files from the `public/` folder
+- **Key-Value Storage**: Per-user KV storage using BeeMap (persisted to JSONL files)
+- **File Storage**: Per-user file storage using Cloudflare R2 (or compatible S3)
+- **Authentication**: OAuth2 flow with Auth0
+- **CORS**: Enabled for all origins (configurable)
+#### Server Endpoints
+- `GET /` or `GET /index.html` - Serves `public/index.html`
+- `GET /{path}` - Serves static files from `public/` folder
+- `GET /login` - Initiates Auth0 login flow
+- `GET /callback` - Auth0 callback handler
+- `GET /logout` - Logs out user
+- `GET /{key}` - Retrieves KV value (requires auth)
+- `POST /{key}` - Stores KV value (requires auth)
+- `DELETE /{key}` - Deletes KV value (requires auth)
+- `PUT /{key}` - Uploads file to R2 (requires auth)
+- `PURGE /{key}` - Deletes file from R2 (requires auth)
+- `PROPFIND /` - Lists files in R2 (requires auth)
+- `PATCH /{key}` - Downloads file from R2 (requires auth)
 ## Overview
@@ -36,13 +150,15 @@ Configures the base URL for all API requests. Modify this to point to your serve
 - Set a property: `window.state.myKey = 'value'`
 - Elements with `data="myKey"` attribute are automatically updated
 - The system looks for custom element handlers in `window.custom[tagName]`
+- Only elements with matching custom element handlers are updated
 - Supports both function and object-based custom elements
 **Example:**
 ```html
-<div data="message">Initial</div>
+<my-element data="message">Initial</my-element>
 <script>
-  window.state.message = "Updated!"; // Automatically updates the div
+  window.custom['my-element'] = (data) => `<div>${data}</div>`;
+  window.state.message = "Updated!"; // Automatically updates the element
 </script>
 ```
@@ -169,7 +285,7 @@ window.logout();
 ## Custom Elements System
-Custom elements are defined in `window.custom` object and automatically initialized when the DOM loads.
+Custom elements are defined in `window.custom` object and automatically initialized when the DOM loads or when elements are added dynamically.
 ### Initialization
@@ -178,6 +294,17 @@ The library automatically:
 2. Iterates through all keys in `window.custom`
 3. Finds all matching HTML elements by tag name
 4. Calls the custom element handler and sets `innerHTML`
+5. Watches for new elements added to the DOM via MutationObserver and initializes them automatically
+### Proxy Behavior
+`window.custom` is a Proxy that automatically initializes matching elements when you add a new custom element definition:
+```javascript
+// Adding a new custom element automatically initializes all matching elements in the DOM
+window.custom['my-element'] = (data) => `<div>${data}</div>`;
+// All <my-element> tags are immediately initialized
+```
 ### Defining Custom Elements
@@ -196,12 +323,15 @@ window.custom = {
 <my-element></my-element>
 ```
-When `window.state.myKey = 'value'` is set and an element has `data="myKey"`:
+When used with reactive state, the function receives the state value:
 ```html
 <my-element data="myKey"></my-element>
+<script>
+  window.state.myKey = 'value'; // Function is called with 'value'
+</script>
 ```
-The function receives the state value as the first parameter.
+The function receives the state value as the first parameter. If no state value is set, it receives `undefined`.
 #### Object-based Custom Element
@@ -267,18 +397,23 @@ window.get('key').catch(err => console.error(err));
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="custom.js"></script>
-  <script src="client.js"></script>
+  <script src="https://unpkg.com/enigmatic@0.34.0/public/client.js"></script>
+  <script>
+    // Configure API URL
+    window.api_url = 'https://localhost:3000';
+    // Define custom elements
+    window.custom = {
+      "hello-world": (data) => `Hello ${data || 'World'}`
+    };
+  </script>
 </head>
 <body>
-  <!-- Custom element -->
-  <file-widget></file-widget>
-  <!-- Reactive state element -->
-  <div data="message">Initial</div>
+  <!-- Custom element with reactive state -->
+  <hello-world data="message"></hello-world>
   <script>
-    // Set reactive state
+    // Set reactive state (triggers updates to elements with data="message")
     window.state.message = "Hello World";
     // Use API functions
@@ -305,18 +440,44 @@ window.get('key').catch(err => console.error(err));
 ## Dependencies
-- Requires `custom.js` to be loaded before `client.js` if using custom elements
-- Requires a backend server that implements the API endpoints
+- Requires a backend server that implements the API endpoints (or use the included Bun server)
 - Requires browser support for:
   - `fetch` API
   - `Proxy` API
   - `Blob` API
   - `URL.createObjectURL`
+  - `MutationObserver` API
+**Note:** Custom element definitions can be loaded before or after `client.js` - the Proxy system will handle initialization either way.
 ## Notes
 - All API functions automatically encode keys using `encodeURIComponent`
 - The `window.download()` function uses PATCH method internally (browsers don't support custom HTTP methods)
-- Custom elements are initialized once on page load; use `location.reload()` to refresh
+- Custom elements are automatically initialized:
+  - On page load (when DOM is ready)
+  - When new custom element definitions are added to `window.custom`
+  - When new matching elements are added to the DOM (via MutationObserver)
 - The reactive state system only updates elements with matching `data` attributes
 - Custom element handlers can be async functions
+- When a custom element has a `data` attribute, it automatically reads from `window.state[dataValue]` if no explicit value is provided
+## Development
+### Running Tests
+```bash
+npm test
+```
+### Building
+The library is ready to use as-is. For production, you can use the minified version:
+```html
+<script src="https://unpkg.com/enigmatic@0.34.0/public/client.min.js"></script>
+```
+## License
+MIT

package/__tests__/e2.test.js CHANGED Viewed

@@ -11,13 +11,37 @@ describe('client.js', () => {
     global.document.body.innerHTML = ''
     global.document.head.innerHTML = ''
-    // Clear window.custom
-    global.window.custom = {}
+    // Set api_url
+    global.window.api_url = 'https://localhost:3000'
-    // Execute custom.js first (defines window.custom)
-    eval(customCode)
-    // Execute client.js code
+    // Clear window properties that might have descriptors
+    try {
+      delete global.window.custom
+      delete global.window.state
+      delete global.window.$
+      delete global.window.$$
+      delete global.window.$c
+      delete global.window.get
+      delete global.window.set
+      delete global.window.put
+      delete global.window.delete
+      delete global.window.purge
+      delete global.window.list
+      delete global.window.login
+      delete global.window.logout
+      delete global.window.download
+      delete global.window.initCustomElements
+    } catch (e) {
+      // Ignore errors
+    }
+    // Execute client.js code first (sets up Proxy)
     eval(clientCode)
+    // Execute custom.js (defines window.custom components)
+    eval(customCode)
+    // Wait for initialization
+    return new Promise(resolve => setTimeout(resolve, 100))
   })
   describe('$ and $$ selectors', () => {
@@ -71,7 +95,8 @@ describe('client.js', () => {
       const result = await window.get('test key')
       expect(global.fetch).toHaveBeenCalledWith(
-        `${window.api_url}/test%20key`
+        `${window.api_url}/test%20key`,
+        expect.objectContaining({ method: 'GET' })
       )
       expect(result).toEqual({ value: 'test' })
     })
@@ -207,7 +232,7 @@ describe('client.js', () => {
       const result = await window.list()
       expect(global.fetch).toHaveBeenCalledWith(
-        window.api_url,
+        `${window.api_url}/`,
         expect.objectContaining({
           method: 'PROPFIND'
         })
@@ -255,29 +280,32 @@ describe('client.js', () => {
   describe('window.state proxy', () => {
-    test('state.set updates DOM elements with data attribute', () => {
+    test('state.set updates DOM elements with data attribute', async () => {
       global.document.body.innerHTML = '<hello-world data="name"></hello-world>'
       window.state.name = 'John'
+      await new Promise(resolve => setTimeout(resolve, 50))
       const el = global.document.querySelector('hello-world')
       expect(el.innerHTML).toBe('Hello John')
     })
-    test('state.set updates multiple elements with same data attribute', () => {
+    test('state.set updates multiple elements with same data attribute', async () => {
       global.document.body.innerHTML = '<hello-world data="name"></hello-world><hello-world data="name"></hello-world>'
       window.state.name = 'Jane'
+      await new Promise(resolve => setTimeout(resolve, 50))
       const els = global.document.querySelectorAll('hello-world')
       expect(els[0].innerHTML).toBe('Hello Jane')
       expect(els[1].innerHTML).toBe('Hello Jane')
     })
-    test('state.set works with object components', () => {
+    test('state.set works with object components', async () => {
       global.document.body.innerHTML = '<hello-world-2 data="test"></hello-world-2>'
       window.state.test = 'Hello'
+      await new Promise(resolve => setTimeout(resolve, 50))
       const el = global.document.querySelector('hello-world-2')
       expect(el.innerHTML).toBe('Hello World')
@@ -288,20 +316,22 @@ describe('client.js', () => {
       expect(window.state.test).toBe('value')
     })
-    test('state.set handles multiple properties', () => {
+    test('state.set handles multiple properties', async () => {
       global.document.body.innerHTML = '<hello-world data="a"></hello-world><hello-world data="b"></hello-world>'
       window.state.a = 'A'
       window.state.b = 'B'
+      await new Promise(resolve => setTimeout(resolve, 50))
       expect(global.document.querySelector('[data="a"]').innerHTML).toBe('Hello A')
       expect(global.document.querySelector('[data="b"]').innerHTML).toBe('Hello B')
     })
-    test('state.set does not update elements without matching data attribute', () => {
+    test('state.set does not update elements without matching data attribute', async () => {
       global.document.body.innerHTML = '<hello-world data="name"></hello-world><div data="other">Original</div>'
       window.state.name = 'John'
+      await new Promise(resolve => setTimeout(resolve, 50))
       expect(global.document.querySelector('[data="name"]').innerHTML).toBe('Hello John')
       expect(global.document.querySelector('[data="other"]').innerHTML).toBe('Original')

package/beemap.js ADDED Viewed

@@ -0,0 +1,47 @@
+class BeeMap extends Map {
+  constructor(jsonlFile, timems) {
+    super();
+    this.jsonlFile = jsonlFile;
+    this.timems = timems;
+    this.intervalId = null;
+    // Load existing data
+    this.load();
+    // Set up interval to save
+    if (!timems) return;
+    this.intervalId = setInterval(() => {
+      this.save();
+    }, timems);
+  }
+  async load() {
+    const file = Bun.file(this.jsonlFile);
+    if (!(await file.exists())) return;
+    const text = await file.text();
+    const lines = text.trim().split('\n').filter(line => line.length > 0);
+    for (const line of lines) {
+      const [key, value] = JSON.parse(line);
+      super.set(key, value);
+    }
+  }
+  async save() {
+    const lines = [];
+    for (const [key, value] of this) {
+      lines.push(JSON.stringify([key, value]));
+    }
+    await Bun.write(this.jsonlFile, lines.join('\n') + '\n');
+  }
+  destroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+}
+export { BeeMap };

package/bun-server.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import { S3Client } from "bun";
+import { BeeMap } from "./beemap.js";
-const dbPath = "db.json";
-const db = await Bun.file(dbPath).json().catch(() => ({}));
+const sessions = new BeeMap("sessions.jsonl", 20000), beeMaps = {};
 const s3 = new S3Client({
   accessKeyId: Bun.env.CLOUDFLARE_ACCESS_KEY_ID,
   secretAccessKey: Bun.env.CLOUDFLARE_SECRET_ACCESS_KEY,
   bucket: Bun.env.CLOUDFLARE_BUCKET_NAME,
   endpoint: Bun.env.CLOUDFLARE_PUBLIC_URL
 });
 const json = (data, status = 200, extraHeaders = {}) => new Response(JSON.stringify(data), {
-  status,
-  headers: {
+  status, headers: {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PURGE, PROPFIND, DOWNLOAD, OPTIONS",
     "Access-Control-Allow-Headers": "Content-Type, Authorization, Cookie, X-HTTP-Method-Override",
@@ -19,7 +19,7 @@ const json = (data, status = 200, extraHeaders = {}) => new Response(JSON.string
     ...extraHeaders
   }
 });
-const writeDb = () => Bun.write(dbPath, JSON.stringify(db, null, 2));
 const redirect = (url, cookie = null) => new Response(null, {
   status: 302,
   headers: { Location: url, ...(cookie && { "Set-Cookie": cookie }) }
@@ -27,21 +27,21 @@ const redirect = (url, cookie = null) => new Response(null, {
 export default {
   async fetch(req) {
-    console.log('req.method', req.method);
-    const url = new URL(req.url);
-    const key = url.pathname.slice(1);
-    const cb = `${url.origin}/callback`;
+    const url = new URL(req.url), key = url.pathname.slice(1);
     const token = req.headers.get("Cookie")?.match(/token=([^;]+)/)?.[1];
-    const user = token ? db[`session:${token}`] : null;
+    const user = token ? sessions.get(token) : null;
     if (req.method === "OPTIONS") return json(null, 204);
+    // Serve static files from public folder
+    if (req.method === 'GET') {
+      const file = Bun.file(`./public${url.pathname === '/' ? '/index.html' : url.pathname}`);
+      if (await file.exists()) return new Response(file);
+    }
     if (url.pathname === '/login') {
       return Response.redirect(`https://${Bun.env.AUTH0_DOMAIN}/authorize?${new URLSearchParams({
-        response_type: "code",
-        client_id: Bun.env.AUTH0_CLIENT_ID,
-        redirect_uri: cb,
-        scope: "openid email profile"
+        response_type: "code", client_id: Bun.env.AUTH0_CLIENT_ID, redirect_uri: cb, scope: "openid email profile"
       })}`);
     }
@@ -49,14 +49,10 @@ export default {
       const code = url.searchParams.get("code");
       if (!code) return json({ error: 'No code' }, 400);
       const tRes = await fetch(`https://${Bun.env.AUTH0_DOMAIN}/oauth/token`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
+        method: "POST", headers: { "content-type": "application/json" },
         body: JSON.stringify({
-          grant_type: "authorization_code",
-          client_id: Bun.env.AUTH0_CLIENT_ID,
-          client_secret: Bun.env.AUTH0_CLIENT_SECRET,
-          code,
-          redirect_uri: cb
+          grant_type: "authorization_code", client_id: Bun.env.AUTH0_CLIENT_ID,
+          client_secret: Bun.env.AUTH0_CLIENT_SECRET, code, redirect_uri: `${url.origin}/callback`
         })
       });
       if (!tRes.ok) return json({ error: 'Auth error' }, 401);
@@ -65,37 +61,32 @@ export default {
         headers: { Authorization: `Bearer ${tokens.access_token}` }
       })).json();
       const session = crypto.randomUUID();
-      db[`session:${session}`] = {
+      sessions.set(session, {
         ...userInfo,
         login_time: new Date().toISOString(),
         access_token_expires_at: tokens.expires_in ? new Date(Date.now() + tokens.expires_in * 1000).toISOString() : null
-      };
-      await writeDb();
+      });
       return redirect(url.origin, `token=${session}; HttpOnly; Path=/; Secure; SameSite=Lax; Max-Age=86400`);
     }
     if (!token || !user) return json({ error: 'Unauthorized' }, 401);
     if (url.pathname === '/logout') {
-      delete db[`session:${token}`];
-      await writeDb();
+      sessions.delete(token);
       return redirect(url.origin, "token=; Max-Age=0; Path=/");
     }
-    const files = { '/': 'index.html', '/client.js': 'client.js', '/custom.js': 'custom.js' };
-    if (req.method === 'GET' && files[url.pathname]) return new Response(Bun.file(`./public/${files[url.pathname]}`));
+    // Initialize user's beeMap if needed
+    if (!beeMaps[user.sub]) beeMaps[user.sub] = new BeeMap(`kv_${user.sub}.jsonl`, 20000);
-    console.log(req.method);
     switch (req.method) {
-      case 'GET': return json(db[key]);
+      case 'GET': return json(beeMaps[user.sub].get(key) || null);
       case 'POST':
         const value = await req.text();
-        db[key] = (() => { try { return JSON.parse(value); } catch { return value; } })();
-        await writeDb();
+        beeMaps[user.sub].set(key, (() => { try { return JSON.parse(value); } catch { return value; } })());
         return json({ key, value });
       case 'DELETE':
-        delete db[key];
-        await writeDb();
+        beeMaps[user.sub].delete(key);
         return json({ status: "Deleted" });
       case 'PUT':
         await s3.write(`${user.sub}/${key}`, req.body);
@@ -125,6 +116,7 @@ export default {
       default: return json({ error: 'Method not allowed' }, 405);
     }
   },
   port: 3000,
   tls: { cert: Bun.file("cert.pem"), key: Bun.file("key.pem") }
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "enigmatic",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "unpkg": "./public/client.js",
   "scripts": {
     "start": "bun --hot ./bun-server.js",

package/public/client.js CHANGED Viewed

@@ -6,7 +6,13 @@ const ren = async (el, v) => {
   if (f) {
     const dataAttr = el.getAttribute('data');
     const val = v !== undefined ? v : (dataAttr ? W.state[dataAttr] : undefined);
-    try { el.innerHTML = await (f.render || f)(val) } catch(e) { console.error(e) }
+    try {
+      if (f.render) {
+        el.innerHTML = await f.render.call(f, val);
+      } else if (typeof f === 'function') {
+        el.innerHTML = await f(val);
+      }
+    } catch(e) { console.error(e) }
   }
 };
@@ -14,11 +20,25 @@ const ren = async (el, v) => {
 const cProx = new Proxy({}, {
   set(t, p, v) {
     t[p] = v;
-    setTimeout(() => W.$$(p).forEach(el => ren(el)), 0);
+    setTimeout(() => {
+      if (W.$$ && D.body) {
+        W.$$(p).forEach(el => ren(el));
+      }
+    }, 0);
     return true;
   }
 });
-Object.defineProperty(W, 'custom', { get: () => cProx, set: v => Object.assign(cProx, v) });
+Object.defineProperty(W, 'custom', {
+  get: () => cProx,
+  set: v => {
+    Object.keys(v || {}).forEach(k => cProx[k] = v[k]);
+    // Defer initialization to ensure DOM and functions are ready
+    setTimeout(() => {
+      if (W.initCustomElements && D.body) W.initCustomElements();
+    }, 50);
+  },
+  configurable: true
+});
 const sProx = new Proxy({}, {
   set(o, p, v) {
@@ -55,26 +75,44 @@ Object.assign(W, {
     a.click();
     URL.revokeObjectURL(a.href);
   },
-  initCustomElements: () => Object.keys(W.custom || {}).forEach(t => W.$$(t).forEach(el => ren(el)))
+  initCustomElements: () => {
+    if (!D.body) return;
+    Object.keys(W.custom || {}).forEach(t => {
+      const elements = W.$$(t);
+      if (elements.length > 0) {
+        elements.forEach(el => ren(el));
+      }
+    });
+  }
 });
 // 4. Initialization & Observers
 const boot = () => {
-  W.initCustomElements();
-  new MutationObserver((mutations) => {
-    mutations.forEach(m => {
-      m.addedNodes.forEach(node => {
-        if (node.nodeType === 1) { // Element node
-          const tag = node.tagName?.toLowerCase();
-          if (tag && W.custom?.[tag]) ren(node);
-          // Also check children
-          node.querySelectorAll && Array.from(node.querySelectorAll('*')).forEach(child => {
-            const childTag = child.tagName?.toLowerCase();
-            if (childTag && W.custom?.[childTag]) ren(child);
-          });
-        }
+  if (W.initCustomElements) {
+    // Run immediately and also after a short delay to catch any elements added during script execution
+    W.initCustomElements();
+    setTimeout(() => W.initCustomElements(), 10);
+  }
+  if (D.body) {
+    new MutationObserver((mutations) => {
+      mutations.forEach(m => {
+        m.addedNodes.forEach(node => {
+          if (node.nodeType === 1) { // Element node
+            const tag = node.tagName?.toLowerCase();
+            if (tag && W.custom?.[tag]) ren(node);
+            // Also check children
+            node.querySelectorAll && Array.from(node.querySelectorAll('*')).forEach(child => {
+              const childTag = child.tagName?.toLowerCase();
+              if (childTag && W.custom?.[childTag]) ren(child);
+            });
+          }
+        });
       });
-    });
-  }).observe(D.body, { childList: true, subtree: true });
+    }).observe(D.body, { childList: true, subtree: true });
+  }
 };
-D.readyState === 'loading' ? D.addEventListener('DOMContentLoaded', boot) : boot();
+if (D.readyState === 'loading') {
+  D.addEventListener('DOMContentLoaded', boot);
+} else {
+  setTimeout(boot, 0);
+}

package/public/custom.js CHANGED Viewed

@@ -6,24 +6,29 @@ window.custom = {
       return this.prop(data);
     }
   },
-"file-widget": async () => {
-  const list = await window.list();
-  const style = `<style>.w-c{font:13px sans-serif;border:1px solid #ddd;border-radius:6px;overflow:hidden;max-width:320px}.w-i{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.w-i:hover{background:#f9f9f9}.w-d{border:none;background:none;cursor:pointer;opacity:.5;transition:.2s}.w-d:hover{opacity:1}.w-u{display:block;padding:10px;background:#f5f5f5;text-align:center;cursor:pointer;color:#555;font-weight:600;transition:.2s}.w-u:hover{background:#eee}</style>`;
-  const items = list.map(item => `
-    <div class="w-i">
-      <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px">${item.name}</span>
-      <button class="w-d" onclick="window.download('${item.name}')" title="Download">⬇️</button>
-      <button class="w-d" onclick="(async()=>{await window.purge('${item.name}');location.reload()})()" title="Delete">🗑️</button>
-    </div>`
-  ).join('');
+  "file-widget": async () => {
+    try {
+      const list = await window.list();
+      const style = `<style>.w-c{font:13px sans-serif;border:1px solid #ddd;border-radius:6px;overflow:hidden;max-width:320px}.w-i{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.w-i:hover{background:#f9f9f9}.w-d{border:none;background:none;cursor:pointer;opacity:.5;transition:.2s}.w-d:hover{opacity:1}.w-u{display:block;padding:10px;background:#f5f5f5;text-align:center;cursor:pointer;color:#555;font-weight:600;transition:.2s}.w-u:hover{background:#eee}.w-e{padding:20px;text-align:center;color:#999}</style>`;
+      const items = Array.isArray(list) ? list.map(item => `
+        <div class="w-i">
+          <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px">${item.name}</span>
+          <button class="w-d" onclick="window.download('${item.name}')" title="Download">⬇️</button>
+          <button class="w-d" onclick="(async()=>{await window.purge('${item.name}');location.reload()})()" title="Delete">🗑️</button>
+        </div>`
+      ).join('') : '';
-  const upload = `
-    <label class="w-u">
-      📂 Upload
-      <input type="file" style="display:none" onchange="(async()=>{const f=this.files[0];if(f){await window.put(f.name,f);location.reload()}})()">
-    </label>`;
+      const upload = `
+        <label class="w-u">
+          📂 Upload
+          <input type="file" style="display:none" onchange="(async()=>{const f=this.files[0];if(f){await window.put(f.name,f);location.reload()})()">
+        </label>`;
-  return style + `<div class="w-c">${items}${upload}</div>`;
+      return style + `<div class="w-c">${items || '<div class="w-e">No files</div>'}${upload}</div>`;
+    } catch (err) {
+      const style = `<style>.w-c{font:13px sans-serif;border:1px solid #ddd;border-radius:6px;overflow:hidden;max-width:320px}.w-e{padding:20px;text-align:center;color:#999}</style>`;
+      return style + `<div class="w-c"><div class="w-e">Please <button onclick="window.login()" style="background:#007bff;color:white;border:none;padding:5px 10px;border-radius:3px;cursor:pointer">Login</button> to view files</div></div>`;
+    }
+  }
 }
-}

package/public/index.html CHANGED Viewed

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>API Test</title>
+  <script>
+    window.api_url = 'https://localhost:3000';
+  </script>
   <script src="custom.js"></script>
   <script src="client.js"></script>
   <style>

package/public/index2.html CHANGED Viewed

@@ -1,4 +1,5 @@
-<script src='client.js'></script>
+<script src='https://unpkg.com/enigmatic'></script>
+<script src='custom.js'></script>
 <script>
   window.api_url = 'http://localhost:3000';
@@ -6,4 +7,4 @@
   state.message = "World";
 </script>
-<hw data="message"></hw>
+<file-widget></file-widget>

package/public/client.css DELETED Viewed

@@ -1,286 +0,0 @@
-html {
-  max-width: 70ch;
-  /* larger spacing on larger screens, very small spacing on tiny screens */
-  padding: calc(1vmin + .5rem);
-  /* shorthand for margin-left/margin-right */
-  margin-inline: auto;
-  /* fluid sizing: https://frontaid.io/blog/fluid-typography-2d-css-locks-clamp/ */
-  font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
-  /* use system font stack: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
-  font-family: system-ui
-}
-/* increase line-height for everything except headings */
-body :not(:is(h1, h2, h3, h4, h5, h6)) {
-  line-height: 1.75;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 3em 0 1em;
-}
-p,
-ul,
-ol {
-  margin-bottom: 2em;
-  color: #1d1d1d;
-}
-body,
-section {
-  display: grid;
-  margin: 0;
-  grid-template-columns: var(--cols, 1fr 4fr 1fr);
-  grid-template-rows: var(--rows, 1fr 9fr 1fr);
-}
-* {
-  grid-column: span var(--span, 1);
-  grid-row: span var(--span-rows, 1);
-}
-.flex {
-  display: flex;
-}
-/** positioning ***/
-.center {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  margin-top: -50px;
-  margin-left: -100px;
-}
-.right {
-  float: right;
-}
-.left {
-  float: left;
-}
-.fixed {
-  position: fixed;
-}
-.top {
-  top: 0;
-}
-.bottom {
-  bottom: 0
-}
-.fill {
-  height: 100vh;
-  width: 100wh
-}
-.hide {
-  opacity: 0;
-  transition: opacity 0.25s linear;
-}
-.show {
-  opacity: 1;
-  transition: opacity 0.25s linear;
-}
-.slide-in {
-  animation: slide-in 0.1s forwards;
-  -webkit-animation: slide-in 0.1s forwards;
-}
-.slide-out {
-  animation: slide-out 0.1s forwards;
-  -webkit-animation: slide-out 0.1s forwards;
-}
-@keyframes slide-in {
-  100% {
-    transform: translateX(0%);
-  }
-}
-@-webkit-keyframes slide-in {
-  100% {
-    -webkit-transform: translateX(0%);
-  }
-}
-@keyframes slide-out {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-@-webkit-keyframes slide-out {
-  0% {
-    -webkit-transform: translateX(0%);
-  }
-  100% {
-    -webkit-transform: translateX(-100%);
-  }
-}
-a {
-  text-decoration: none;
-}
-.shadow {
-  box-shadow: 6px 6px 6px #dbdbdb;
-}
-.cursor {
-  cursor: default;
-}
-.margins {
-  margin: var(--margins, 15px);
-}
-.padding {
-  padding: var(--padding, 15px);
-}
-.rem {
-  font-size: var(--rem, 2rem);
-}
-.faded {
-  opacity: 0.5;
-}
-.fade {
-  opacity: 1;
-  transition: opacity 0.25s ease-in-out;
-  -moz-transition: opacity 0.25s ease-in-out;
-  -webkit-transition: opacity 0.25s ease-in-out;
-}
-.fade:hover {
-  opacity: 0.5;
-}
-.unfade {
-  opacity: 0.5;
-  transition: opacity 0.25s ease-in-out;
-  -moz-transition: opacity 0.25s ease-in-out;
-  -webkit-transition: opacity 0.25s ease-in-out;
-}
-.unfade:hover {
-  opacity: 1;
-}
-.rounded {
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  -khtml-border-radius: 10px;
-}
-.round {
-  vertical-align: middle;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
-/** html elements **/
-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-ul {
-  list-style-type: none;
-  border: 20px;
-  padding: 20px;
-  width: 50%;
-}
-li {
-  list-style-type: none;
-  border: 10px;
-  padding: 10px;
-}
-li:hover {
-  background-color: rgb(243, 241, 241);
-  cursor: pointer;
-}
-.opacity1 {
-  opacity: .1
-}
-.opacity2 {
-  opacity: .2
-}
-.opacity3 {
-  opacity: .3
-}
-.opacity4 {
-  opacity: .4
-}
-.opacity5 {
-  opacity: .5
-}
-.opacity6 {
-  opacity: .6
-}
-.opacity7 {
-  opacity: .7
-}
-.opacity8 {
-  opacity: .8
-}
-.opacity9 {
-  opacity: .9
-}
-.bg-red {
-  background-color: red;
-}
-.bg-blue {
-  background-color: blue;
-}
-.bg-yellow {
-  background-color: yellow;
-}
-.bg-green {
-  background-color: green;
-}
-.bg-black {
-  background-color: black;
-}
-.white {
-  color: white;
-}

package/public/theme.css DELETED Viewed

@@ -1,9 +0,0 @@
-:root {
-    --bg-color: #1d1d1d;
-    --color-primary: #f0dda3;
-    --color-secondary: #ff9800;
-    --color-tertiary: #f44336;
-    --color-quaternary: #9c27b0;
-    --color-quinary: #2196f3;
-    --color-senary: #009688;
-}