npm - enigmatic - Versions diffs - 0.35.0 → 0.36.0 - Mend

enigmatic 0.35.0 → 0.36.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 (6) hide show

package/README.md +1 -1
package/client/public/api.html +202 -0
package/client/public/client.js +47 -66
package/client/public/index.html +359 -142
package/package.json +1 -1
package/server/bun-server.js +32 -19

package/README.md CHANGED Viewed

@@ -127,7 +127,7 @@ const elements = window.$$('.my-class');
 ### API Base URL
 ```javascript
-window.api_url = "https://localhost:3000"
+window.api_url = "https://localhost:3001"
 ```
 Configures the base URL for all API requests. Modify this to point to your server.

package/client/public/api.html ADDED Viewed

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Enigmatic Webapp</title>
+  <script>
+    window.api_url = "https://digplan.app"
+  </script>
+  <style>
+    :root {
+      --bg: #f1f5f9;
+      --surface: #ffffff;
+      --text: #0f172a;
+      --text-muted: #64748b;
+      --accent: #6366f1;
+      --accent-hover: #4f46e5;
+      --border: #e2e8f0;
+      --input-bg: #f8fafc;
+      --radius: 12px;
+      --radius-sm: 8px;
+      --shadow: 0 1px 3px rgba(0,0,0,.06);
+      --shadow-md: 0 4px 12px rgba(0,0,0,.06);
+    }
+    * { box-sizing: border-box; }
+    body {
+      font-family: "Inter", system-ui, -apple-system, sans-serif;
+      font-size: 15px;
+      line-height: 1.6;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 32px 24px;
+      background: var(--bg);
+      color: var(--text);
+      -webkit-font-smoothing: antialiased;
+    }
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      margin: 0 0 28px;
+      color: var(--text);
+    }
+    section {
+      background: var(--surface);
+      border-radius: var(--radius);
+      padding: 20px;
+      margin-bottom: 20px;
+      box-shadow: var(--shadow);
+      border: 1px solid var(--border);
+    }
+    section h2 {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      margin: 0 0 14px;
+    }
+    section p { margin: 0 0 12px; color: var(--text-muted); font-size: 0.9375rem; }
+    input {
+      font-size: 14px;
+      padding: 10px 14px;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: var(--input-bg);
+      color: var(--text);
+      width: 100%;
+      max-width: 200px;
+      transition: border-color .15s, box-shadow .15s;
+    }
+    input:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
+    }
+    input::placeholder { color: var(--text-muted); opacity: .8; }
+    button {
+      font-size: 14px;
+      font-weight: 500;
+      padding: 10px 16px;
+      border-radius: var(--radius-sm);
+      border: none;
+      cursor: pointer;
+      transition: background .15s, transform .05s;
+    }
+    button:active { transform: scale(0.98); }
+    button:not(.secondary) {
+      background: var(--accent);
+      color: #fff;
+      margin-right: 8px;
+    }
+    button:not(.secondary):hover { background: var(--accent-hover); }
+    button.secondary {
+      background: var(--input-bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+    }
+    button.secondary:hover { background: var(--border); }
+    #auth-status { margin-right: 12px; color: var(--text-muted); font-size: 14px; }
+    .row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
+    .row:last-of-type { margin-bottom: 0; }
+    #kv-result {
+      margin-top: 12px;
+      padding: 12px 14px;
+      background: var(--input-bg);
+      border-radius: var(--radius-sm);
+      font-size: 13px;
+      font-family: ui-monospace, monospace;
+      white-space: pre-wrap;
+      word-break: break-all;
+      min-height: 24px;
+      border: 1px solid var(--border);
+    }
+    .error { color: #dc2626; }
+    .reactive-split { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
+    .reactive-demo { flex: 1; min-width: 180px; }
+    .reactive-snippet {
+      flex: 1;
+      min-width: 220px;
+      font-size: 12px;
+      background: #1e293b;
+      color: #e2e8f0;
+      border-radius: var(--radius-sm);
+      padding: 14px;
+      overflow-x: auto;
+      border: none;
+    }
+    .reactive-snippet pre { margin: 0; font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
+  </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <h1>Enigmatic Webapp</h1>
+  <section>
+    <h2>Auth</h2>
+    <div class="row">
+      <span id="auth-status">Checking…</span>
+      <button onclick="window.login()">Login</button>
+      <button class="secondary" onclick="window.logout()">Logout</button>
+    </div>
+  </section>
+  <section>
+    <h2>Reactive state</h2>
+    <p>Edit the message; the custom element updates automatically.</p>
+    <div class="reactive-split">
+      <div class="reactive-demo">
+        <div class="row">
+          <input type="text" id="msg-input" placeholder="Message" value="World">
+          <button onclick="window.state.message = window.$('#msg-input').value">Update</button>
+        </div>
+        <p style="margin: 12px 0 0; font-size: 14px;"><hello-world data="message"></hello-world></p>
+      </div>
+      <div class="reactive-snippet">
+        <pre>&lt;!-- HTML: data="message" binds to state.message --&gt;
+&lt;hello-world data="message"&gt;&lt;/hello-world&gt;
+// JS: updating state re-renders the element
+window.state.message = "World";</pre>
+      </div>
+    </div>
+  </section>
+  <section>
+    <h2>KV storage</h2>
+    <div class="row">
+      <input type="text" id="kv-key" placeholder="Key" value="greeting">
+      <input type="text" id="kv-value" placeholder="Value" value="Hello from KV">
+    </div>
+    <div class="row">
+      <button onclick="window.get(window.$('#kv-key').value).then(r => { window.$('#kv-result').textContent = JSON.stringify(r); window.$('#kv-result').classList.remove('error'); }).catch(e => { window.$('#kv-result').textContent = e.message; window.$('#kv-result').classList.add('error'); })">Get</button>
+      <button onclick="window.set(window.$('#kv-key').value, window.$('#kv-value').value).then(r => { window.$('#kv-result').textContent = JSON.stringify(r); window.$('#kv-result').classList.remove('error'); }).catch(e => { window.$('#kv-result').textContent = e.message; window.$('#kv-result').classList.add('error'); })">Set</button>
+      <button onclick="window.delete(window.$('#kv-key').value).then(r => { window.$('#kv-result').textContent = JSON.stringify(r); window.$('#kv-result').classList.remove('error'); }).catch(e => { window.$('#kv-result').textContent = e.message; window.$('#kv-result').classList.add('error'); })">Delete</button>
+    </div>
+    <div id="kv-result"></div>
+  </section>
+  <section>
+    <h2>Files</h2>
+    <file-widget></file-widget>
+  </section>
+  <script src="client.js"></script>
+  <script src="custom.js"></script>
+  <script>
+    window.state.message = window.$('#msg-input').value;
+    window.me().then(function(u) {
+      window.$('#auth-status').textContent = u ? ('Logged in as ' + (u.email || u.sub)) : 'Not logged in';
+    }).catch(function() {
+      window.$('#auth-status').textContent = 'Not logged in';
+    });
+  </script>
+</body>
+</html>

package/client/public/client.js CHANGED Viewed

@@ -1,91 +1,74 @@
-const D = document, W = window, Enc = encodeURIComponent;
-// 1. Unified Render Logic (Handles both State & Custom Elements)
 const ren = async (el, v) => {
-  const f = W.custom?.[el.tagName.toLowerCase()];
+  const f = window.custom?.[el.tagName.toLowerCase()];
   if (f) {
     const dataAttr = el.getAttribute('data');
-    const val = v !== undefined ? v : (dataAttr ? W.state[dataAttr] : undefined);
+    const val = v !== undefined ? v : (dataAttr ? window.state[dataAttr] : undefined);
     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) }
+    } catch (e) {
+      console.error(e);
+    }
   }
 };
-// 2. Proxies setup
-const cProx = new Proxy({}, {
-  set(t, p, v) {
-    t[p] = v;
-    setTimeout(() => {
-      if (W.$$ && D.body) {
-        W.$$(p).forEach(el => ren(el));
-      }
-    }, 0);
-    return true;
-  }
-});
-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
-});
+window.custom = {};
+// 2. State proxy
 const sProx = new Proxy({}, {
   set(o, p, v) {
     o[p] = v;
-    W.$$(`[data="${p}"]`).forEach(el => ren(el, v));
+    window.$$(`[data="${p}"]`).forEach(el => ren(el, v));
     return true;
   }
 });
-// 3. API & DOM Helpers
-const req = (m, k, b) => fetch(`${W.api_url}/${k ? Enc(k) : ''}`, {
-  method: m, body: b instanceof Blob || typeof b === 'string' ? b : JSON.stringify(b)
-});
+// 4. API helpers
+const req = (method, key, body) =>
+  fetch(`${window.api_url}/${key ? encodeURIComponent(key) : ''}`, {
+    method,
+    body: body instanceof Blob || typeof body === 'string' ? body : JSON.stringify(body),
+    credentials: 'include',
+  });
 const toJson = (r) => {
   const ct = (r.headers.get('content-type') || '').toLowerCase();
-  if (!ct.includes('application/json')) return r.text().then((t) => { throw new Error('Server returned non-JSON (HTML?): ' + (t.slice(0, 60) || r.status)); });
+  if (!ct.includes('application/json')) {
+    return r.text().then((t) => { throw new Error('Server returned non-JSON (HTML?): ' + (t.slice(0, 60) || r.status)); });
+  }
   return r.json();
 };
-Object.assign(W, {
-  $: s => D.querySelector(s),
-  $$: s => D.querySelectorAll(s),
-  $c: s => $0.closest(s),
+Object.assign(window, {
+  $: (s) => document.querySelector(s),
+  $$: (s) => document.querySelectorAll(s),
+  $c: (s) => $0.closest(s),
   state: sProx,
-  get: k => req('GET', k).then(toJson),
+  get: (k) => req('GET', k).then(toJson),
   set: (k, v) => req('POST', k, v).then(toJson),
   put: (k, v) => req('PUT', k, v).then(toJson),
-  delete: k => req('DELETE', k).then(toJson),
-  purge: k => req('PURGE', k).then(toJson),
+  delete: (k) => req('DELETE', k).then(toJson),
+  purge: (k) => req('PURGE', k).then(toJson),
   list: () => req('PROPFIND').then(toJson),
-  me: () => fetch(`${W.api_url}/me`, { credentials: "include" }).then((r) => (r.ok ? r.json() : null)),
-  login: () => W.location.href = `${W.api_url}/login`,
-  logout: () => W.location.href = `${W.api_url}/logout`,
+  me: () => fetch(`${window.api_url}/me`, { credentials: 'include' }).then((r) => (r.ok ? r.json() : null)),
+  login: () => window.location.href = `${window.api_url}/login`,
+  logout: () => window.location.href = `${window.api_url}/logout`,
   download: async (k) => {
     const r = await req('PATCH', k);
     if (!r.ok) throw new Error('Download failed');
-    const a = D.createElement('a');
+    const a = document.createElement('a');
     a.href = URL.createObjectURL(await r.blob());
     a.download = k;
     a.click();
     URL.revokeObjectURL(a.href);
   },
   initCustomElements: () => {
-    if (!D.body) return;
-    Object.keys(W.custom || {}).forEach(t => {
-      const elements = W.$$(t);
+    if (!document.body) return;
+    Object.keys(window.custom || {}).forEach((t) => {
+      const elements = window.$$(t);
       if (elements.length > 0) {
         elements.forEach(el => ren(el));
       }
@@ -93,33 +76,31 @@ Object.assign(W, {
   }
 });
-// 4. Initialization & Observers
+// 5. Boot
 const boot = () => {
-  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 (window.initCustomElements) {
+    window.initCustomElements();
+    setTimeout(() => window.initCustomElements(), 10);
   }
-  if (D.body) {
+  if (document.body) {
     new MutationObserver((mutations) => {
-      mutations.forEach(m => {
-        m.addedNodes.forEach(node => {
-          if (node.nodeType === 1) { // Element node
+      mutations.forEach((m) => {
+        m.addedNodes.forEach((node) => {
+          if (node.nodeType === 1) {
             const tag = node.tagName?.toLowerCase();
-            if (tag && W.custom?.[tag]) ren(node);
-            // Also check children
-            node.querySelectorAll && Array.from(node.querySelectorAll('*')).forEach(child => {
+            if (tag && window.custom?.[tag]) ren(node);
+            node.querySelectorAll && Array.from(node.querySelectorAll('*')).forEach((child) => {
               const childTag = child.tagName?.toLowerCase();
-              if (childTag && W.custom?.[childTag]) ren(child);
+              if (childTag && window.custom?.[childTag]) ren(child);
             });
           }
         });
       });
-    }).observe(D.body, { childList: true, subtree: true });
+    }).observe(document.body, { childList: true, subtree: true });
   }
 };
-if (D.readyState === 'loading') {
-  D.addEventListener('DOMContentLoaded', boot);
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
 } else {
   setTimeout(boot, 0);
-}
+}

package/client/public/index.html CHANGED Viewed

@@ -3,195 +3,412 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Enigmatic Webapp</title>
+  <title>Enigmatic - Lightweight JavaScript Library</title>
   <style>
     :root {
-      --bg: #f1f5f9;
+      --bg: #f8fafc;
       --surface: #ffffff;
       --text: #0f172a;
       --text-muted: #64748b;
       --accent: #6366f1;
       --accent-hover: #4f46e5;
       --border: #e2e8f0;
-      --input-bg: #f8fafc;
-      --radius: 12px;
-      --radius-sm: 8px;
-      --shadow: 0 1px 3px rgba(0,0,0,.06);
-      --shadow-md: 0 4px 12px rgba(0,0,0,.06);
+      --code-bg: #1e293b;
+      --code-text: #e2e8f0;
     }
-    * { box-sizing: border-box; }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
       font-family: "Inter", system-ui, -apple-system, sans-serif;
-      font-size: 15px;
+      font-size: 16px;
       line-height: 1.6;
-      max-width: 600px;
-      margin: 0 auto;
-      padding: 32px 24px;
       background: var(--bg);
       color: var(--text);
       -webkit-font-smoothing: antialiased;
     }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    header {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 24px 0;
+      margin-bottom: 48px;
+    }
     h1 {
-      font-size: 1.75rem;
+      font-size: 2.5rem;
       font-weight: 700;
       letter-spacing: -0.02em;
-      margin: 0 0 28px;
-      color: var(--text);
+      margin-bottom: 12px;
+      background: linear-gradient(135deg, var(--accent), #8b5cf6);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .tagline {
+      font-size: 1.25rem;
+      color: var(--text-muted);
+      margin-bottom: 32px;
+    }
+    .badge {
+      display: inline-block;
+      padding: 4px 12px;
+      background: var(--accent);
+      color: white;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      margin-bottom: 24px;
     }
     section {
       background: var(--surface);
-      border-radius: var(--radius);
-      padding: 20px;
-      margin-bottom: 20px;
-      box-shadow: var(--shadow);
+      border-radius: 12px;
+      padding: 32px;
+      margin-bottom: 32px;
+      box-shadow: 0 1px 3px rgba(0,0,0,.06);
       border: 1px solid var(--border);
     }
-    section h2 {
-      font-size: 0.8125rem;
+    h2 {
+      font-size: 1.5rem;
       font-weight: 600;
-      letter-spacing: 0.02em;
-      text-transform: uppercase;
-      color: var(--text-muted);
-      margin: 0 0 14px;
+      margin-bottom: 16px;
+      color: var(--text);
     }
-    section p { margin: 0 0 12px; color: var(--text-muted); font-size: 0.9375rem; }
-    input {
-      font-size: 14px;
-      padding: 10px 14px;
-      border-radius: var(--radius-sm);
-      border: 1px solid var(--border);
-      background: var(--input-bg);
+    h3 {
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin-top: 24px;
+      margin-bottom: 12px;
       color: var(--text);
-      width: 100%;
-      max-width: 200px;
-      transition: border-color .15s, box-shadow .15s;
     }
-    input:focus {
-      outline: none;
-      border-color: var(--accent);
-      box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
+    p {
+      margin-bottom: 16px;
+      color: var(--text-muted);
     }
-    input::placeholder { color: var(--text-muted); opacity: .8; }
-    button {
-      font-size: 14px;
-      font-weight: 500;
-      padding: 10px 16px;
-      border-radius: var(--radius-sm);
-      border: none;
-      cursor: pointer;
-      transition: background .15s, transform .05s;
-    }
-    button:active { transform: scale(0.98); }
-    button:not(.secondary) {
+    ul, ol {
+      margin-left: 24px;
+      margin-bottom: 16px;
+      color: var(--text-muted);
+    }
+    li {
+      margin-bottom: 8px;
+    }
+    code {
+      background: var(--code-bg);
+      color: var(--code-text);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: ui-monospace, monospace;
+      font-size: 0.9em;
+    }
+    pre {
+      background: var(--code-bg);
+      color: var(--code-text);
+      padding: 20px;
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 16px 0;
+      font-family: ui-monospace, monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+    pre code {
+      background: none;
+      padding: 0;
+    }
+    .btn {
+      display: inline-block;
+      padding: 12px 24px;
       background: var(--accent);
-      color: #fff;
-      margin-right: 8px;
+      color: white;
+      text-decoration: none;
+      border-radius: 8px;
+      font-weight: 500;
+      transition: background 0.15s;
+      margin-right: 12px;
+      margin-bottom: 12px;
+    }
+    .btn:hover {
+      background: var(--accent-hover);
     }
-    button:not(.secondary):hover { background: var(--accent-hover); }
-    button.secondary {
-      background: var(--input-bg);
+    .btn-secondary {
+      background: var(--border);
       color: var(--text);
-      border: 1px solid var(--border);
     }
-    button.secondary:hover { background: var(--border); }
-    #auth-status { margin-right: 12px; color: var(--text-muted); font-size: 14px; }
-    .row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
-    .row:last-of-type { margin-bottom: 0; }
-    #kv-result {
-      margin-top: 12px;
-      padding: 12px 14px;
-      background: var(--input-bg);
-      border-radius: var(--radius-sm);
-      font-size: 13px;
-      font-family: ui-monospace, monospace;
-      white-space: pre-wrap;
-      word-break: break-all;
-      min-height: 24px;
+    .btn-secondary:hover {
+      background: #cbd5e1;
+    }
+    .features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 24px;
+      margin-top: 24px;
+    }
+    .feature {
+      padding: 20px;
+      background: var(--bg);
+      border-radius: 8px;
       border: 1px solid var(--border);
     }
-    .error { color: #dc2626; }
-    .reactive-split { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
-    .reactive-demo { flex: 1; min-width: 180px; }
-    .reactive-snippet {
-      flex: 1;
-      min-width: 220px;
-      font-size: 12px;
-      background: #1e293b;
-      color: #e2e8f0;
-      border-radius: var(--radius-sm);
-      padding: 14px;
-      overflow-x: auto;
-      border: none;
+    .feature h4 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: var(--text);
+    }
+    .feature p {
+      font-size: 0.9375rem;
+      margin: 0;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 16px 0;
+    }
+    th, td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    th {
+      font-weight: 600;
+      color: var(--text);
+      background: var(--bg);
+    }
+    td {
+      color: var(--text-muted);
+      font-size: 0.9375rem;
+    }
+    .links {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      margin-top: 24px;
+    }
+    footer {
+      text-align: center;
+      padding: 48px 0;
+      color: var(--text-muted);
+      font-size: 0.875rem;
     }
-    .reactive-snippet pre { margin: 0; font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
   </style>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-  <h1>Enigmatic Webapp</h1>
-  <section>
-    <h2>Auth</h2>
-    <div class="row">
-      <span id="auth-status">Checking…</span>
-      <button onclick="window.login()">Login</button>
-      <button class="secondary" onclick="window.logout()">Logout</button>
+  <header>
+    <div class="container">
+      <span class="badge">v0.35.0</span>
+      <h1>Enigmatic</h1>
+      <p class="tagline">A lightweight client-side JavaScript library for DOM manipulation, reactive state management, and API interactions, with an optional Bun server for backend functionality.</p>
+      <div class="links">
+        <a href="api.html" class="btn">Try Demo</a>
+        <a href="https://www.npmjs.com/package/enigmatic" class="btn btn-secondary" target="_blank">View on npm</a>
+      </div>
     </div>
-  </section>
-  <section>
-    <h2>Reactive state</h2>
-    <p>Edit the message; the custom element updates automatically.</p>
-    <div class="reactive-split">
-      <div class="reactive-demo">
-        <div class="row">
-          <input type="text" id="msg-input" placeholder="Message" value="World">
-          <button onclick="window.state.message = window.$('#msg-input').value">Update</button>
+  </header>
+  <div class="container">
+    <section>
+      <h2>Quick Start</h2>
+      <h3>Using client.js via CDN</h3>
+      <p>Include <code>client.js</code> in any HTML file using the unpkg CDN:</p>
+      <pre><code>&lt;script src="https://unpkg.com/enigmatic"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/enigmatic/client/public/custom.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  window.api_url = 'https://your-server.com';
+  window.state.message = 'Hello World';
+&lt;/script&gt;</code></pre>
+      <h3>Using the Bun Server</h3>
+      <p>The Bun server provides a complete backend with:</p>
+      <ul>
+        <li><strong>Key-value storage</strong> – Per-user KV persisted as append-only JSONL</li>
+        <li><strong>File storage</strong> – Per-user files via Cloudflare R2 (or S3-compatible API)</li>
+        <li><strong>Authentication</strong> – Auth0 OAuth2 login/logout</li>
+        <li><strong>Static files</strong> – Served from <code>client/public/</code></li>
+      </ul>
+      <h3>Installation</h3>
+      <ol>
+        <li>Install <a href="https://bun.sh" target="_blank">Bun</a>:
+          <pre><code>curl -fsSL https://bun.sh/install | bash</code></pre>
+        </li>
+        <li>Install dependencies:
+          <pre><code>bun install</code></pre>
+        </li>
+        <li>TLS certificates: place <code>cert.pem</code> and <code>key.pem</code> in <code>server/certs/</code> for HTTPS</li>
+      </ol>
+      <h3>Running the Server</h3>
+      <pre><code>npm start
+# or
+npx enigmatic
+# or with hot reload
+npm run hot</code></pre>
+      <p>Server runs at <strong>https://localhost:3000</strong> (HTTPS is required for Auth0 cookies).</p>
+    </section>
+    <section>
+      <h2>Features</h2>
+      <div class="features">
+        <div class="feature">
+          <h4>DOM Utilities</h4>
+          <p>Simple selectors: <code>window.$</code>, <code>window.$$</code>, <code>window.$c</code></p>
+        </div>
+        <div class="feature">
+          <h4>Reactive State</h4>
+          <p>Proxy-based state management that automatically updates DOM elements</p>
+        </div>
+        <div class="feature">
+          <h4>Custom Elements</h4>
+          <p>Automatic initialization and reactive updates for custom HTML elements</p>
+        </div>
+        <div class="feature">
+          <h4>KV Storage</h4>
+          <p>Simple key-value operations: <code>get</code>, <code>set</code>, <code>delete</code></p>
+        </div>
+        <div class="feature">
+          <h4>File Storage</h4>
+          <p>Upload, download, list, and delete files via R2/S3-compatible storage</p>
+        </div>
+        <div class="feature">
+          <h4>Authentication</h4>
+          <p>Built-in Auth0 OAuth2 integration with login/logout</p>
         </div>
-        <p style="margin: 12px 0 0; font-size: 14px;"><hello-world data="message"></hello-world></p>
       </div>
-      <div class="reactive-snippet">
-        <pre>&lt;!-- HTML: data="message" binds to state.message --&gt;
-&lt;hello-world data="message"&gt;&lt;/hello-world&gt;
+    </section>
-// JS: updating state re-renders the element
-window.state.message = "World";</pre>
-      </div>
-    </div>
-  </section>
+    <section>
+      <h2>API Endpoints</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Method</th>
+            <th>Path</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>GET</td>
+            <td><code>/</code></td>
+            <td>Serves index.html</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/login</code></td>
+            <td>Redirects to Auth0 login</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/callback</code></td>
+            <td>Auth0 OAuth callback</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/logout</code></td>
+            <td>Logs out and clears session</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/me</code></td>
+            <td>Current user or 401 (no auth)</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/{key}</code></td>
+            <td>KV get (auth required)</td>
+          </tr>
+          <tr>
+            <td>POST</td>
+            <td><code>/{key}</code></td>
+            <td>KV set (auth required)</td>
+          </tr>
+          <tr>
+            <td>DELETE</td>
+            <td><code>/{key}</code></td>
+            <td>KV delete (auth required)</td>
+          </tr>
+          <tr>
+            <td>PUT</td>
+            <td><code>/{key}</code></td>
+            <td>Upload file to R2 (auth required)</td>
+          </tr>
+          <tr>
+            <td>PURGE</td>
+            <td><code>/{key}</code></td>
+            <td>Delete file from R2 (auth required)</td>
+          </tr>
+          <tr>
+            <td>PROPFIND</td>
+            <td><code>/</code></td>
+            <td>List R2 files (auth required)</td>
+          </tr>
+          <tr>
+            <td>PATCH</td>
+            <td><code>/{key}</code></td>
+            <td>Download file from R2 (auth required)</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
-  <section>
-    <h2>KV storage</h2>
-    <div class="row">
-      <input type="text" id="kv-key" placeholder="Key" value="greeting">
-      <input type="text" id="kv-value" placeholder="Value" value="Hello from KV">
-    </div>
-    <div class="row">
-      <button onclick="window.get(window.$('#kv-key').value).then(r => { window.$('#kv-result').textContent = JSON.stringify(r); window.$('#kv-result').classList.remove('error'); }).catch(e => { window.$('#kv-result').textContent = e.message; window.$('#kv-result').classList.add('error'); })">Get</button>
-      <button onclick="window.set(window.$('#kv-key').value, window.$('#kv-value').value).then(r => { window.$('#kv-result').textContent = JSON.stringify(r); window.$('#kv-result').classList.remove('error'); }).catch(e => { window.$('#kv-result').textContent = e.message; window.$('#kv-result').classList.add('error'); })">Set</button>
-      <button onclick="window.delete(window.$('#kv-key').value).then(r => { window.$('#kv-result').textContent = JSON.stringify(r); window.$('#kv-result').classList.remove('error'); }).catch(e => { window.$('#kv-result').textContent = e.message; window.$('#kv-result').classList.add('error'); })">Delete</button>
+    <section>
+      <h2>Example Usage</h2>
+      <h3>Reactive State</h3>
+      <pre><code>&lt;hello-world data="message"&gt;&lt;/hello-world&gt;
+&lt;script&gt;
+  window.custom['hello-world'] = (data) => `Hello ${data}`;
+  window.state.message = "World"; // Automatically updates the element
+&lt;/script&gt;</code></pre>
+      <h3>KV Storage</h3>
+      <pre><code>// Get value
+const value = await window.get('my-key');
+// Set value
+await window.set('my-key', 'my-value');
+// Delete key
+await window.delete('my-key');</code></pre>
+      <h3>File Operations</h3>
+      <pre><code>// Upload file
+await window.put('filename.txt', fileBlob);
+// List files
+const files = await window.list();
+// Download file
+await window.download('filename.txt');
+// Delete file
+await window.purge('filename.txt');</code></pre>
+    </section>
+    <section>
+      <h2>Environment Variables</h2>
+      <p>Create a <code>.env</code> file in the project root:</p>
+      <pre><code># Auth0
+AUTH0_DOMAIN=your-tenant.auth0.com
+AUTH0_CLIENT_ID=your-client-id
+AUTH0_CLIENT_SECRET=your-client-secret
+# Cloudflare R2 (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</code></pre>
+    </section>
+  </div>
+  <footer>
+    <div class="container">
+      <p>MIT License • Built with Bun</p>
     </div>
-    <div id="kv-result"></div>
-  </section>
-  <section>
-    <h2>Files</h2>
-    <file-widget></file-widget>
-  </section>
-  <script src="client.js"></script>
-  <script src="custom.js"></script>
-  <script>
-    window.api_url = window.api_url || window.location.origin;
-    window.state.message = window.$('#msg-input').value;
-    window.me().then(function(u) {
-      window.$('#auth-status').textContent = u ? ('Logged in as ' + (u.email || u.sub)) : 'Not logged in';
-    }).catch(function() {
-      window.$('#auth-status').textContent = 'Not logged in';
-    });
-  </script>
+  </footer>
 </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "enigmatic",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "bin": {
     "enigmatic": "./bin/enigmatic.js"
   },

package/server/bun-server.js CHANGED Viewed

@@ -8,9 +8,10 @@ const publicDir = join(dir, "..", "client", "public");
 const kvDir = join(dir, "kv");
 const sessions = new Map();
 const userKv = {};
+let site_origin = "";
 const kvPath = (sub) => join(kvDir, `${String(sub).replace(/[^a-zA-Z0-9_-]/g, "_")}.jsonl`);
-const json = (d, s = 200, h = {}) => new Response(JSON.stringify(d), { status: s, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PURGE, PROPFIND, PATCH, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization, Cookie", "Access-Control-Allow-Credentials": "true", "Content-Type": "application/json", ...h } });
+const json = (d, s = 200, h = {}, origin = null) => new Response(JSON.stringify(d), { status: s, headers: { "Access-Control-Allow-Origin": origin || "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PURGE, PROPFIND, PATCH, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization, Cookie", "Access-Control-Allow-Credentials": "true", "Content-Type": "application/json", ...h } });
 const redir = (url, cookie) => new Response(null, { status: 302, headers: { Location: url, ...(cookie && { "Set-Cookie": cookie }) } });
 async function getUserMap(sub) {
@@ -58,10 +59,11 @@ const s3 = new S3Client({
 export default {
   async fetch(req) {
     const url = new URL(req.url), key = url.pathname.slice(1), cb = `${url.origin}/callback`;
+    const origin = req.headers.get("Origin") || url.origin;
     const token = req.headers.get("Cookie")?.match(/token=([^;]+)/)?.[1];
     const user = (Bun.env.TEST_MODE === "1" && token === Bun.env.TEST_SESSION_ID) ? { sub: "test-user" } : (token ? sessions.get(token) : null);
-    if (req.method === "OPTIONS") return json(null, 204);
+    if (req.method === "OPTIONS") return json(null, 204, {}, origin);
     if (req.method === "GET") {
       const p = url.pathname === "/" ? "index.html" : url.pathname.slice(1);
@@ -71,47 +73,58 @@ export default {
       }
     }
-    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" })}`);
+    if (url.pathname === "/login") {
+      site_origin = req.headers.get("referer");
+      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" })}`);
+    }
     if (url.pathname === "/callback") {
       const code = url.searchParams.get("code");
-      if (!code) return json({ error: "No code" }, 400);
+      if (!code) return json({ error: "No code" }, 400, {}, origin);
       const tRes = await fetch(`https://${Bun.env.AUTH0_DOMAIN}/oauth/token`, { 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 }) });
-      if (!tRes.ok) return json({ error: "Auth error" }, 401);
+      if (!tRes.ok) return json({ error: "Auth error" }, 401, {}, origin);
       const tokens = await tRes.json();
       const userInfo = await (await fetch(`https://${Bun.env.AUTH0_DOMAIN}/userinfo`, { headers: { Authorization: `Bearer ${tokens.access_token}` } })).json();
       const sid = crypto.randomUUID();
       sessions.set(sid, { ...userInfo, login_time: new Date().toISOString(), access_token_expires_at: tokens.expires_in ? new Date(Date.now() + tokens.expires_in * 1000).toISOString() : null });
-      return redir(url.origin, `token=${sid}; HttpOnly; Path=/; Secure; SameSite=Lax; Max-Age=86400`);
+      return redir(site_origin || url.origin, `token=${sid}; HttpOnly; Path=/; Secure; SameSite=None; Max-Age=86400`);
     }
-    if (url.pathname === "/me") return user ? json(user) : json({ error: "Unauthorized" }, 401);
-    if (!token || !user) return json({ error: "Unauthorized" }, 401);
-    if (url.pathname === "/logout") { sessions.delete(token); return redir(url.origin, "token=; Max-Age=0; Path=/"); }
+    if (url.pathname === "/me") return user ? json(user, 200, {}, origin) : json({ error: "Unauthorized" }, 401, {}, origin);
+    if (!token || !user) return json({ error: "Unauthorized" }, 401, {}, origin);
+    if (url.pathname === "/logout") { sessions.delete(token); return redir(url.origin, "token=; Max-Age=0; Path=/; Secure; SameSite=None"); }
     const m = await getUserMap(user.sub);
     switch (req.method) {
-      case "GET": return json(m.get(key) ?? null);
+      case "GET": return json(m.get(key) ?? null, 200, {}, origin);
       case "POST":
         const val = await req.text();
         const v = (() => { try { return JSON.parse(val); } catch { return val; } })();
         m.set(key, v);
         await saveUserKv(user.sub, "update", key, v);
-        return json({ key, value: v });
-      case "DELETE": m.delete(key); await saveUserKv(user.sub, "delete", key); return json({ status: "Deleted" });
-      case "PUT": await s3.write(`${user.sub}/${key}`, req.body); return json({ status: "Saved to R2" });
-      case "PURGE": await s3.delete(`${user.sub}/${key}`); return json({ status: "Deleted from R2" });
+        return json({ key, value: v }, 200, {}, origin);
+      case "DELETE": m.delete(key); await saveUserKv(user.sub, "delete", key); return json({ status: "Deleted" }, 200, {}, origin);
+      case "PUT": await s3.write(`${user.sub}/${key}`, req.body); return json({ status: "Saved to R2" }, 200, {}, origin);
+      case "PURGE": await s3.delete(`${user.sub}/${key}`); return json({ status: "Deleted from R2" }, 200, {}, origin);
       case "PROPFIND":
         const list = await s3.list({ prefix: `${user.sub}/` });
         const items = Array.isArray(list) ? list : (list?.contents || []);
-        return json(items.map((i) => ({ name: i.key?.split("/").pop() || i.name || i.Key, lastModified: i.lastModified || i.LastModified, size: i.size || i.Size || 0 })));
+        return json(items.map((i) => ({ name: i.key?.split("/").pop() || i.name || i.Key, lastModified: i.lastModified || i.LastModified, size: i.size || i.Size || 0 })), 200, {}, origin);
       case "PATCH":
         try {
-          if (!(await s3.exists(`${user.sub}/${key}`))) return json({ error: "File not found" }, 404);
+          if (!(await s3.exists(`${user.sub}/${key}`))) {
+            const headers = { "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Credentials": "true" };
+            return new Response(JSON.stringify({ error: "File not found" }), { status: 404, headers: { ...headers, "Content-Type": "application/json" } });
+          }
           const f = await s3.file(`${user.sub}/${key}`);
-          return f ? new Response(f.stream(), { headers: f.headers }) : json({ error: "File not found" }, 404);
-        } catch (e) { return json({ error: "File not found", details: e.message }, 404); }
-      default: return json({ error: "Method not allowed" }, 405);
+          if (f) {
+            const headers = { ...f.headers, "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Credentials": "true" };
+            return new Response(f.stream(), { headers });
+          }
+          const headers = { "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Credentials": "true" };
+          return new Response(JSON.stringify({ error: "File not found" }), { status: 404, headers: { ...headers, "Content-Type": "application/json" } });
+        } catch (e) { return json({ error: "File not found", details: e.message }, 404, {}, origin); }
+      default: return json({ error: "Method not allowed" }, 405, {}, origin);
     }
   },
   port: 3000,