enigmatic 0.33.0 → 0.35.0

package/client/public/client.js

@@ -0,0 +1,125 @@
+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()];
+  if (f) {
+    const dataAttr = el.getAttribute('data');
+    const val = v !== undefined ? v : (dataAttr ? W.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) }
+  }
+};
+
+// 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
+});
+
+const sProx = new Proxy({}, {
+  set(o, p, v) {
+    o[p] = v;
+    W.$$(`[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)
+});
+
+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)); });
+  return r.json();
+};
+
+Object.assign(W, {
+  $: s => D.querySelector(s),
+  $$: s => D.querySelectorAll(s),
+  $c: s => $0.closest(s),
+  state: sProx,
+  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),
+  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`,
+  download: async (k) => {
+    const r = await req('PATCH', k);
+    if (!r.ok) throw new Error('Download failed');
+    const a = D.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 (elements.length > 0) {
+        elements.forEach(el => ren(el));
+      }
+    });
+  }
+});
+
+// 4. Initialization & Observers
+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 (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 });
+  }
+};
+if (D.readyState === 'loading') {
+  D.addEventListener('DOMContentLoaded', boot);
+} else {
+  setTimeout(boot, 0);
+}

package/client/public/custom.js

@@ -0,0 +1,34 @@
+window.custom = {
+  "hello-world": (data) => `Hello ${data}`,
+  "hello-world-2": {
+    prop: (data) => `${data} World`,
+    render: function(data) { 
+      return this.prop(data); 
+    }
+  },
+  "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>`;
+
+      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/client/public/index.html

@@ -0,0 +1,197 @@
+<!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>
+  <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.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>
+</body>
+</html>

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "enigmatic",
-  "version": "0.33.0",
-  "unpkg": "./public/client.js",
-  "scripts": {
-    "start": "bun --hot ./bun-server.js",
-    "test": "jest --config __tests__/jest.config.js"
+  "version": "0.35.0",
+  "bin": {
+    "enigmatic": "./bin/enigmatic.js"
   },
-  "devDependencies": {
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "whatwg-fetch": "^3.6.20"
+  "unpkg": "./client/public/client.js",
+  "scripts": {
+    "start": "bun run bin/enigmatic.js",
+    "hot": "bun --hot bin/enigmatic.js"
   }
 }

package/server/bun-server.js

@@ -0,0 +1,119 @@
+import { S3Client } from "bun";
+import { join } from "path";
+import { appendFile, mkdir, readFile } from "fs/promises";
+
+const dir = import.meta.dir;
+const certsDir = join(dir, "certs");
+const publicDir = join(dir, "..", "client", "public");
+const kvDir = join(dir, "kv");
+const sessions = new Map();
+const userKv = {};
+
+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 redir = (url, cookie) => new Response(null, { status: 302, headers: { Location: url, ...(cookie && { "Set-Cookie": cookie }) } });
+
+async function getUserMap(sub) {
+  if (userKv[sub]) return userKv[sub];
+  const m = new Map();
+  try {
+    let buf = await readFile(kvPath(sub), "utf8");
+    if (buf.charCodeAt(0) === 0xfeff) buf = buf.slice(1);
+    const lines = buf.trim().split("\n").filter(Boolean);
+    for (const line of lines) {
+      try {
+        const row = JSON.parse(line);
+        if (Array.isArray(row) && row.length >= 2) {
+          m.set(row[0], row[1]);
+        } else if (row?.action === "update" && row.key !== undefined) {
+          m.set(row.key, row.value);
+        } else if (row?.action === "delete" && row.key !== undefined) {
+          m.delete(row.key);
+        }
+      } catch (_) { /* skip malformed line */ }
+    }
+  } catch (_) { /* file missing or unreadable */ }
+  userKv[sub] = m;
+  return m;
+}
+
+async function appendKvLog(sub, action, key, value) {
+  await mkdir(kvDir, { recursive: true });
+  const ts = new Date().toISOString();
+  const row = action === "update" ? { action, key, value, timestamp: ts } : { action, key, timestamp: ts };
+  await appendFile(kvPath(sub), JSON.stringify(row) + "\n");
+}
+
+async function saveUserKv(sub, action, key, value) {
+  await appendKvLog(sub, action, key, value);
+}
+
+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
+});
+
+export default {
+  async fetch(req) {
+    const url = new URL(req.url), key = url.pathname.slice(1), cb = `${url.origin}/callback`;
+    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 === "GET") {
+      const p = url.pathname === "/" ? "index.html" : url.pathname.slice(1);
+      if (p === "index.html" || /\.[a-z0-9]+$/i.test(p)) {
+        const f = Bun.file(join(publicDir, p));
+        if (await f.exists()) return new Response(f);
+      }
+    }
+
+    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 === "/callback") {
+      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" }, 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);
+      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`);
+    }
+
+    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=/"); }
+
+    const m = await getUserMap(user.sub);
+    switch (req.method) {
+      case "GET": return json(m.get(key) ?? null);
+      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" });
+      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 })));
+      case "PATCH":
+        try {
+          if (!(await s3.exists(`${user.sub}/${key}`))) return json({ error: "File not found" }, 404);
+          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);
+    }
+  },
+  port: 3000,
+  tls: { cert: Bun.file(join(certsDir, "cert.pem")), key: Bun.file(join(certsDir, "key.pem")) }
+};