luxaura 1.0.0

package/ui-kit/luxaura.min.js

@@ -0,0 +1,271 @@
+/*!
+ * Luxaura Runtime Bundle v1.0.0
+ * Includes: Runtime Engine + Toast API + Router + Physics Engine
+ */
+
+/* ── Inline Runtime ─────────────────────────────────────────────────────── */
+(function (global) {
+  'use strict';
+
+  let _uidCounter = 0;
+  const uid = () => ++_uidCounter;
+
+  function deepClone(obj) {
+    try { return JSON.parse(JSON.stringify(obj)); } catch { return obj; }
+  }
+
+  function debounce(fn, ms) {
+    let t;
+    return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
+  }
+
+  function getCsrfToken() {
+    let token = sessionStorage.getItem('__lux_csrf__');
+    if (!token) {
+      const buf = new Uint8Array(16);
+      crypto.getRandomValues(buf);
+      token = Array.from(buf).map(b => b.toString(16).padStart(2, '0')).join('');
+      sessionStorage.setItem('__lux_csrf__', token);
+    }
+    return token;
+  }
+
+  /* Reactive State */
+  class ReactiveState {
+    constructor(initial, onChange) {
+      this._raw = deepClone(initial || {});
+      this._listeners = onChange ? [onChange] : [];
+      this._proxy = new Proxy(this._raw, {
+        set: (target, key, value) => {
+          target[key] = value;
+          this._notify();
+          return true;
+        },
+      });
+    }
+    get proxy() { return this._proxy; }
+    get(key)    { return this._raw[key]; }
+    set(key, v) { this._raw[key] = v; this._notify(); }
+    _notify()   { this._listeners.forEach(fn => fn(this._raw)); }
+  }
+
+  /* DOM Patcher */
+  function patch(container, newHTML) {
+    const tpl = document.createElement('template');
+    tpl.innerHTML = newHTML;
+    const newRoot = tpl.content;
+    diffNodes(container, newRoot);
+  }
+
+  function diffNodes(oldP, newP) {
+    const oldCh = Array.from(oldP.childNodes);
+    const newCh = Array.from(newP.childNodes);
+    const max   = Math.max(oldCh.length, newCh.length);
+    for (let i = 0; i < max; i++) {
+      const o = oldCh[i], n = newCh[i];
+      if (!o && n) { oldP.appendChild(n.cloneNode(true)); continue; }
+      if (o && !n) { oldP.removeChild(o); continue; }
+      if (o.nodeType !== n.nodeType || o.nodeName !== n.nodeName) {
+        oldP.replaceChild(n.cloneNode(true), o); continue;
+      }
+      if (o.nodeType === Node.TEXT_NODE) {
+        if (o.textContent !== n.textContent) o.textContent = n.textContent;
+        continue;
+      }
+      if (o.nodeType === Node.ELEMENT_NODE) {
+        diffAttrs(o, n);
+        diffNodes(o, n);
+      }
+    }
+  }
+
+  function diffAttrs(o, n) {
+    for (const a of Array.from(o.attributes))
+      if (!n.hasAttribute(a.name)) o.removeAttribute(a.name);
+    for (const a of Array.from(n.attributes))
+      if (o.getAttribute(a.name) !== a.value) o.setAttribute(a.name, a.value);
+  }
+
+  /* RPC */
+  const rpc = new Proxy({}, {
+    get(_, fn) {
+      return async (...args) => {
+        const r = await fetch('/__lux_rpc__', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-Lux-CSRF': getCsrfToken() },
+          body: JSON.stringify({ fn, args }),
+        });
+        if (!r.ok) throw new Error(`RPC ${fn} failed: ${r.status}`);
+        return r.json();
+      };
+    },
+  });
+
+  /* Router */
+  const router = {
+    params: {}, query: {},
+    navigate(url) { history.pushState({}, '', url); window.dispatchEvent(new PopStateEvent('popstate')); },
+    _parseQuery(s) { const q = {}; new URLSearchParams(s).forEach((v,k) => q[k]=v); return q; },
+    _init() {
+      this.query = this._parseQuery(location.search);
+      window.addEventListener('popstate', () => { this.query = this._parseQuery(location.search); });
+    },
+  };
+
+  /* Storage */
+  const storage = {
+    local:   { get: k => localStorage.getItem(k),   set: (k,v) => localStorage.setItem(k,v),   remove: k => localStorage.removeItem(k) },
+    session: { get: k => sessionStorage.getItem(k), set: (k,v) => sessionStorage.setItem(k,v), remove: k => sessionStorage.removeItem(k) },
+  };
+
+  /* HTTP */
+  const http = {
+    async get(url, o={}) { return (await fetch(url, {method:'GET',...o})).json(); },
+    async post(url, body, o={}) {
+      return (await fetch(url, { method:'POST', headers:{'Content-Type':'application/json',...(o.headers||{})}, body:JSON.stringify(body), ...o })).json();
+    },
+  };
+
+  const auth = {
+    async login(c)  { return rpc.login(c); },
+    async logout()  { return rpc.logout(); },
+    async user()    { return rpc.currentUser(); },
+  };
+
+  /* Physics Engine */
+  const physics = {
+    _init() {
+      this._apply();
+      window.addEventListener('resize', debounce(() => this._apply(), 100));
+    },
+    _apply() {
+      const mobile = window.innerWidth < 768;
+      document.querySelectorAll('.lux-action, .lux-input, .lux-switch').forEach(el => {
+        el.style.minHeight = mobile ? '44px' : '';
+        el.style.minWidth  = mobile ? '44px' : '';
+      });
+    },
+  };
+
+  /* Toast API */
+  let toastContainer;
+  function ensureToastContainer() {
+    if (!toastContainer) {
+      toastContainer = document.createElement('div');
+      toastContainer.className = 'lux-toast-container';
+      document.body.appendChild(toastContainer);
+    }
+    return toastContainer;
+  }
+
+  const toast = {
+    _show(msg, type, duration = 3500) {
+      const el = document.createElement('div');
+      el.className = `lux-toast ${type}`;
+      el.textContent = msg;
+      const container = ensureToastContainer();
+      container.appendChild(el);
+      setTimeout(() => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateX(20px)';
+        el.style.transition = 'opacity 0.3s, transform 0.3s';
+        setTimeout(() => el.remove(), 300);
+      }, duration);
+      return el;
+    },
+    success(msg, d) { return this._show(msg, 'success', d); },
+    error(msg, d)   { return this._show(msg, 'error',   d); },
+    warning(msg, d) { return this._show(msg, 'warning', d); },
+    info(msg, d)    { return this._show(msg, 'info',    d); },
+    show(msg, d)    { return this._show(msg, '',        d); },
+  };
+
+  /* Component Context */
+  class ComponentContext {
+    constructor(def, props = {}) {
+      this._uid  = uid();
+      this._def  = def;
+      this._props = props;
+      this._state = new ReactiveState(deepClone(def.state || {}), () => this._scheduleUpdate());
+      this._el   = null;
+      this._pending = false;
+      this.server  = rpc;
+      this.router  = router;
+      this.http    = http;
+      this.auth    = auth;
+      this.storage = storage;
+      this.toast   = toast;
+    }
+    get(k)    { return k in this._props ? this._props[k] : this._state.get(k); }
+    set(k, v) { this._state.set(k, v); }
+    _scheduleUpdate() {
+      if (this._pending) return;
+      this._pending = true;
+      requestAnimationFrame(() => { this._pending = false; this._update(); });
+    }
+    _update() {
+      if (!this._el) return;
+      patch(this._el, this._def.render(this));
+    }
+    mount(sel) {
+      const el = typeof sel === 'string' ? document.querySelector(sel) : sel;
+      if (!el) throw new Error(`Luxaura: mount target not found: ${sel}`);
+      this._el = el;
+      el.innerHTML = this._def.render(this);
+      el.__luxCtx__ = this;
+      if (this._def.mounted) this._def.mounted(el, this);
+      return this;
+    }
+  }
+
+  /* Registry */
+  const registry = {};
+
+  const Lux = {
+    version: '1.0.0',
+    define(name, def)          { registry[name] = def; return this; },
+    mount(name, sel, props={}) {
+      const def = registry[name];
+      if (!def) throw new Error(`Luxaura: component "${name}" not defined.`);
+      return new ComponentContext(def, props).mount(sel);
+    },
+    on(container, component, event, handler) {
+      const sel = `[data-lux-id^="${component.toLowerCase()}-"]`;
+      container.addEventListener(event, async (e) => {
+        const t = e.target.closest(sel);
+        if (!t) return;
+        await handler(t.__luxCtx__ || container.__luxCtx__ || {});
+      });
+    },
+    bind(container, ctx) {
+      container.addEventListener('input', e => {
+        const k = e.target.dataset.luxBind;
+        if (k) ctx.set(k, e.target.value);
+      });
+    },
+    toast, router, http, auth, storage, rpc,
+    _init() { router._init(); physics._init(); },
+  };
+
+  /* Theme helper */
+  Lux.setTheme = function(t) {
+    document.documentElement.setAttribute('data-theme', t);
+    storage.local.set('lux-theme', t);
+  };
+  Lux.getTheme = function() {
+    return storage.local.get('lux-theme') || 'light';
+  };
+
+  /* Auto-apply saved theme */
+  const savedTheme = (localStorage.getItem('lux-theme'));
+  if (savedTheme) document.documentElement.setAttribute('data-theme', savedTheme);
+
+  /* Boot */
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => Lux._init());
+  } else {
+    Lux._init();
+  }
+
+  global.__Lux__ = Lux;
+})(window);