@adia-ai/web-components 0.0.1

package/core/provider.js

@@ -0,0 +1,262 @@
+/**
+ * AdiaUI Router — Self-contained vanilla JS bundle.
+ * Includes: RouteController + router-ui component.
+ *
+ * Depends on: core.js (AdiaElement), controllers.js (BaseController)
+ *
+ * Usage:
+ *   import { AdiaElement } from './core.js';
+ *   import { AdiaRouter, RouteController } from './router.js';
+ *
+ *   // Option 1: Declarative routes
+ *   const router = document.querySelector('router-ui');
+ *   router.routes = [
+ *     { path: '/', content: '/pages/home.html', title: 'Home' },
+ *     { path: '/about', content: '/pages/about.html', title: 'About' },
+ *     { path: '/users/:id', content: '/pages/user.html', title: 'User' },
+ *   ];
+ *
+ *   // Option 2: Controller directly
+ *   const ctrl = new RouteController({ routes: [...] });
+ *   router.controller = ctrl;
+ *   ctrl.commands.navigate('/about');
+ */
+
+import { AdiaElement } from '@core/element.js';
+import { BaseController } from '@core/controller.js';
+
+// ═══════════════════════════════════════════════════════════════
+// NANO PROVIDER (inline — tiny base class)
+// ═══════════════════════════════════════════════════════════════
+
+class AdiaProvider extends AdiaElement {
+  static template = () => null;
+  #abort = null;
+  get abort() { if (!this.#abort) this.#abort = new AbortController(); return this.#abort; }
+  get signal() { return this.abort.signal; }
+  emit(name, detail) {
+    this.dispatchEvent(detail !== undefined
+      ? new CustomEvent(name, { bubbles: true, detail })
+      : new Event(name, { bubbles: true })
+    );
+  }
+  disconnected() { this.#abort?.abort(); this.#abort = null; }
+}
+
+// ═══════════════════════════════════════════════════════════════
+// ROUTE CONTROLLER
+// ═══════════════════════════════════════════════════════════════
+
+export class RouteController extends BaseController {
+  static schema = {
+    name: 'route',
+    state: { path: 'string', params: 'object', route: 'object', previous: 'string' },
+    commands: ['navigate', 'replace', 'back', 'forward', 'setRoutes'],
+    attributes: ['data-route-path'],
+  };
+
+  #routes = [];
+  #path = '';
+  #previous = '';
+  #params = {};
+  #route = null;
+  #historySync = true;
+  #boundPopState = null;
+
+  constructor({ routes = [], initial, historySync = true } = {}) {
+    super();
+    this.#routes = routes;
+    this.#historySync = historySync;
+    this.#path = initial ?? location.pathname;
+    this.#match();
+  }
+
+  getState() {
+    return {
+      path: this.#path,
+      params: { ...this.#params },
+      route: this.#route,
+      previous: this.#previous,
+    };
+  }
+
+  reflect() {
+    const host = this.host;
+    if (!host) return;
+    host.setAttribute('data-route-path', this.#path);
+  }
+
+  onConnect(host) {
+    if (this.#historySync) {
+      this.#boundPopState = () => {
+        this.#previous = this.#path;
+        this.#path = location.pathname;
+        this.#match();
+        this.notify();
+      };
+      window.addEventListener('popstate', this.#boundPopState);
+    }
+  }
+
+  onDisconnect() {
+    if (this.#boundPopState) {
+      window.removeEventListener('popstate', this.#boundPopState);
+      this.#boundPopState = null;
+    }
+  }
+
+  #match() {
+    this.#params = {};
+    this.#route = null;
+    for (const route of this.#routes) {
+      const match = this.#matchPath(route.path, this.#path);
+      if (match) {
+        this.#params = match.params;
+        this.#route = route;
+        return;
+      }
+    }
+  }
+
+  #matchPath(pattern, path) {
+    const patternParts = pattern.split('/').filter(Boolean);
+    const pathParts = path.split('/').filter(Boolean);
+    if (!pattern.includes(':')) return pattern === path ? { params: {} } : null;
+    if (patternParts.length !== pathParts.length) return null;
+    const params = {};
+    for (let i = 0; i < patternParts.length; i++) {
+      if (patternParts[i].startsWith(':')) params[patternParts[i].slice(1)] = pathParts[i];
+      else if (patternParts[i] !== pathParts[i]) return null;
+    }
+    return { params };
+  }
+
+  commands = {
+    navigate: (path) => {
+      if (path === this.#path) return;
+      this.#previous = this.#path;
+      this.#path = path;
+      this.#match();
+      if (this.#historySync) history.pushState(null, '', path);
+      this.notify();
+    },
+    replace: (path) => {
+      this.#previous = this.#path;
+      this.#path = path;
+      this.#match();
+      if (this.#historySync) history.replaceState(null, '', path);
+      this.notify();
+    },
+    back: () => { if (this.#historySync) history.back(); },
+    forward: () => { if (this.#historySync) history.forward(); },
+    setRoutes: (routes) => {
+      this.#routes = routes;
+      this.#match();
+      this.notify();
+    },
+  };
+}
+
+// ═══════════════════════════════════════════════════════════════
+// ROUTER-UI — content fragment renderer
+// ═══════════════════════════════════════════════════════════════
+
+export class AdiaRouter extends AdiaProvider {
+  #cache = new Map();
+  #ownCtrl = null;
+  #lastPath = null;
+
+  get #ctrl() { return this.#ownCtrl || this.controller; }
+
+  set routes(list) {
+    if (!this.#ownCtrl) {
+      this.#ownCtrl = new RouteController({ routes: list });
+      this.controller = this.#ownCtrl;
+    } else {
+      this.#ownCtrl.commands.setRoutes(list);
+    }
+  }
+
+  navigate(path) { this.#ctrl?.commands.navigate(path); }
+  replace(path) { this.#ctrl?.commands.replace(path); }
+
+  connected() {
+    super.connected();
+    document.addEventListener('click', this.#onClick);
+  }
+
+  disconnected() {
+    super.disconnected();
+    document.removeEventListener('click', this.#onClick);
+  }
+
+  #onClick = (e) => {
+    const ctrl = this.#ctrl;
+    if (!ctrl) return;
+    const a = e.target.closest('a[href]');
+    if (!a) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (a.target && a.target !== '_self') return;
+    const href = a.getAttribute('href');
+    if (href.startsWith('http') || href.startsWith('//') || href.startsWith('#')) return;
+    e.preventDefault();
+    ctrl.commands.navigate(href);
+  };
+
+  render() {
+    const ctrl = this.#ctrl;
+    if (!ctrl) return;
+    const { path, route } = ctrl.getState();
+    if (path === this.#lastPath) return;
+    this.#lastPath = path;
+    if (route?.content) this.#loadContent(route, ctrl);
+  }
+
+  async #loadContent(route, ctrl) {
+    let html;
+    if (this.#cache.has(route.content)) {
+      html = this.#cache.get(route.content);
+    } else {
+      try {
+        const res = await fetch(route.content, { signal: this.signal });
+        if (!res.ok) return;
+        html = await res.text();
+        this.#cache.set(route.content, html);
+      } catch (e) {
+        if (e.name !== 'AbortError') console.error('Router fetch error:', e);
+        return;
+      }
+    }
+
+    html = html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
+
+    // Template resolver hook — lets the site wrap content in a template before injection
+    if (this.templateResolver) {
+      html = await this.templateResolver(html, route);
+    }
+
+    this.innerHTML = html;
+    (this.closest('section') || this.parentElement)?.scrollTo(0, 0);
+
+    if (route.title) document.title = route.title;
+
+    // Auto-import setup module
+    if (route.content?.endsWith('.content.html')) {
+      const setupPath = route.content.replace('.content.html', '.setup.js');
+      try {
+        const mod = await import(/* @vite-ignore */ setupPath);
+        if (mod.default) mod.default(this);
+      } catch { /* setup module is optional */ }
+    }
+
+    const state = ctrl.getState();
+    this.emit('route-loaded', {
+      path: state.path,
+      params: state.params,
+      title: route.title || '',
+      section: route.section || '',
+    });
+  }
+}
+
+customElements.define('router-ui', AdiaRouter);

package/core/signals.js

@@ -0,0 +1,113 @@
+/**
+ * AdiaUI Signals — Reactive primitives.
+ *
+ * Zero dependencies. No DOM required.
+ * Use standalone for state management in any JS context.
+ *
+ *   import { signal, computed, effect, batch } from './signals.js';
+ *
+ *   const count = signal(0);
+ *   const double = computed(() => count.value * 2);
+ *   effect(() => console.log(double.value));
+ *   count.value = 5; // logs: 10
+ */
+
+const SIGNAL = Symbol('signal');
+
+let tracking = null;
+let pending = null;
+let batching = false;
+
+function notify(subs) {
+  for (const s of subs) {
+    if (s.disposed) { subs.delete(s); continue; }
+    s.dirty = true;
+    if (!pending) { pending = new Set(); if (!batching) queueMicrotask(flushSigs); }
+    pending.add(s);
+  }
+}
+
+function flushSigs() {
+  let q, loops = 0;
+  while ((q = pending)) {
+    if (++loops > 100) {
+      pending = null;
+      console.error(`signals: drain loop exceeded 100 iterations`);
+      break;
+    }
+    pending = null;
+    for (const s of q) {
+      if (!s.disposed && s.dirty) {
+        s.dirty = false;
+        try { s.run(); }
+        catch (e) {
+          if (s.onError) { s.onError(e); }
+          else { s.disposed = true; queueMicrotask(() => { throw e; }); }
+        }
+      }
+    }
+  }
+}
+
+export function batch(fn) {
+  if (batching) { fn(); return; }
+  batching = true;
+  try { fn(); }
+  finally { batching = false; if (pending) flushSigs(); }
+}
+
+export function untracked(fn) {
+  const prev = tracking;
+  tracking = null;
+  try { return fn(); }
+  finally { tracking = prev; }
+}
+
+export function signal(v) {
+  const subs = new Set();
+  return {
+    [SIGNAL]: true,
+    get value() { if (tracking) subs.add(tracking); return v; },
+    set value(n) { if (Object.is(v, n)) return; v = n; notify(subs); },
+    peek() { return v; },
+  };
+}
+
+export function computed(fn) {
+  const subs = new Set();
+  let cached, dirty = true;
+  const sub = {
+    dirty: false, disposed: false,
+    run() { dirty = true; notify(subs); },
+  };
+  return {
+    [SIGNAL]: true,
+    get value() {
+      if (tracking) subs.add(tracking);
+      if (dirty) {
+        const prev = tracking;
+        tracking = sub;
+        try { cached = fn(); dirty = false; } finally { tracking = prev; }
+      }
+      return cached;
+    },
+    peek() { return cached; },
+  };
+}
+
+export function effect(fn, opts) {
+  const sub = {
+    dirty: false, disposed: false,
+    host: opts?.host ?? null,
+    onError: opts?.onError ?? null,
+    run() { const p = tracking; tracking = sub; try { fn(); } finally { tracking = p; } },
+  };
+  sub.run();
+  return () => { sub.disposed = true; };
+}
+
+export function isSignal(v) {
+  return v != null && typeof v === 'object' && v[SIGNAL] === true;
+}
+
+export { SIGNAL };

package/core/template.js

@@ -0,0 +1,226 @@
+/**
+ * AdiaUI Template — Tagged template literal rendering.
+ *
+ * Lightweight lit-html-style rendering with reactive bindings.
+ * Depends on DOM but not on AdiaElement — usable standalone.
+ *
+ *   import { html, repeat } from './template.js';
+ *
+ *   const result = html`<div class=${cls}>${text}</div>`;
+ *   stamp(result, container);
+ */
+
+import { effect, isSignal } from './signals.js';
+
+const [PART, KEY_MAP] = [Symbol(), Symbol()];
+
+export function html(strings, ...values) {
+  return { strings, values };
+}
+
+export function css(strings, ...values) {
+  let text = '';
+  for (let i = 0; i < strings.length; i++) {
+    text += strings[i];
+    if (i < values.length) text += values[i];
+  }
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(text);
+  return sheet;
+}
+
+const templateCache = new WeakMap();
+
+function inTag(m) {
+  let q = 0, last = 0;
+  for (let i = 0; i < m.length; i++) {
+    const c = m.charCodeAt(i);
+    if (q) { if (c === (q === 1 ? 39 : 34)) q = 0; }
+    else if (c === 39) q = 1;
+    else if (c === 34) q = 2;
+    else if (c === 60) last = 1;
+    else if (c === 62) last = 0;
+  }
+  return last === 1;
+}
+
+function getTemplate(strings) {
+  let tpl = templateCache.get(strings);
+  if (tpl) return tpl;
+  let m = '';
+  for (let i = 0; i < strings.length; i++) {
+    m += strings[i];
+    if (i < strings.length - 1) m += inTag(m) ? `{{p:${i}}}` : `<!--p:${i}-->`;
+  }
+  tpl = document.createElement('template');
+  tpl.innerHTML = m;
+  templateCache.set(strings, tpl);
+  return tpl;
+}
+
+export function stamp(result, container) {
+  let inst = container._i;
+  if (!inst || inst.s !== result.strings) {
+    if (inst) disposeParts(inst.p);
+    inst = mount(result, container);
+    container._i = inst;
+  }
+  update(inst.p, result.values);
+}
+
+function mount(result, container) {
+  const { strings } = result;
+  const tpl = getTemplate(strings);
+  const f = tpl.content.cloneNode(true);
+  const parts = scan(f, result.values.length);
+  container.replaceChildren(f);
+  return { s: strings, p: parts };
+}
+
+function scan(fragment, count) {
+  const parts = new Array(count);
+  const w = document.createTreeWalker(fragment, 129);
+  let n;
+  while ((n = w.nextNode())) {
+    if (n.nodeType === 8) {
+      const m = n.data.match(/^p:(\d+)$/);
+      if (m) {
+        const a = document.createTextNode('');
+        n.replaceWith(a);
+        w.currentNode = a;
+        parts[+m[1]] = { t: 'n', n: a, c: undefined, _fx: null };
+      }
+    } else if (n.nodeType === 1) {
+      for (const attr of [...n.attributes]) {
+        const m = attr.value.match(/^\{\{p:(\d+)\}\}$/);
+        if (!m) continue;
+        const i = +m[1], name = attr.name;
+        if (name[0] === '@') {
+          n.removeAttribute(name);
+          parts[i] = { t: 'e', n, name: name.slice(1), c: undefined, _fx: null };
+        } else if (name[0] === '.') {
+          n.removeAttribute(name);
+          parts[i] = { t: 'p', n, name: name.slice(1), c: undefined, _fx: null };
+        } else {
+          parts[i] = { t: 'a', n, name, c: undefined, _fx: null };
+        }
+      }
+    }
+  }
+  return parts;
+}
+
+export function disposeParts(parts) {
+  for (const p of parts) {
+    if (p && p._fx) { p._fx(); p._fx = null; }
+  }
+}
+
+function wrap(part) {
+  if (part.n.nodeType === 1 && part.n[PART]) return part.n;
+  const c = document.createElement('span');
+  c.style.display = 'contents';
+  c[PART] = true;
+  part.n.replaceWith(c);
+  part.n = c;
+  return c;
+}
+
+const isResult = (v) => v != null && typeof v === 'object' && v.strings;
+const isHandler = (v) => typeof v === 'function' || (v != null && typeof v.handleEvent === 'function');
+
+function applyValue(p, v) {
+  if (v === p.c) return;
+  if (p.t === 'n') {
+    if (v != null && v._directive) {
+      v._commit(wrap(p));
+    } else if (isResult(v)) {
+      stamp(v, wrap(p));
+    } else if (Array.isArray(v)) {
+      const c = wrap(p);
+      c.replaceChildren();
+      for (const item of v) {
+        if (isResult(item)) {
+          const el = document.createElement('span');
+          el.style.display = 'contents';
+          c.appendChild(el);
+          stamp(item, el);
+        } else {
+          c.appendChild(document.createTextNode(item ?? ''));
+        }
+      }
+    } else if (v instanceof Node) {
+      p.n.replaceWith(v);
+      p.n = v;
+    } else if (p.n[PART]) {
+      const t = document.createTextNode(v ?? '');
+      p.n.replaceWith(t);
+      p.n = t;
+    } else {
+      p.n.textContent = v ?? '';
+    }
+  } else if (p.t === 'a') {
+    if (v == null || v === false) p.n.removeAttribute(p.name);
+    else p.n.setAttribute(p.name, v === true ? '' : v);
+  } else if (p.t === 'p') {
+    p.n[p.name] = v;
+  } else if (p.t === 'e') {
+    if (isHandler(p.c)) p.n.removeEventListener(p.name, p.c);
+    if (isHandler(v)) p.n.addEventListener(p.name, v);
+  }
+  p.c = v;
+}
+
+function update(parts, values) {
+  for (let i = 0; i < parts.length; i++) {
+    const p = parts[i];
+    if (!p) continue;
+    const v = values[i];
+    const isFn = p.t !== 'e' && typeof v === 'function';
+    const isSig = !isFn && p.t !== 'e' && isSignal(v);
+    if (p._fx && !isFn && !isSig) { p._fx(); p._fx = null; }
+    if (isFn) { if (!p._fx) { p._fx = effect(() => applyValue(p, v())); } continue; }
+    if (isSig) { if (!p._fx) { p._fx = effect(() => applyValue(p, v.value)); } continue; }
+    applyValue(p, v);
+  }
+}
+
+export function repeat(items, keyFn, tplFn) {
+  return {
+    _directive: true,
+    _commit(container) {
+      const oldMap = container[KEY_MAP] || new Map();
+      const newMap = new Map();
+      const keys = [];
+      for (let i = 0; i < items.length; i++) {
+        const key = keyFn(items[i], i);
+        if (newMap.has(key)) continue;
+        keys.push(key);
+        const result = tplFn(items[i], i);
+        if (oldMap.has(key)) {
+          const entry = oldMap.get(key);
+          stamp(result, entry);
+          newMap.set(key, entry);
+        } else {
+          const el = document.createElement('span');
+          el.style.display = 'contents';
+          stamp(result, el);
+          newMap.set(key, el);
+        }
+      }
+      for (const [key, el] of oldMap) {
+        if (!newMap.has(key)) { if (el._i) disposeParts(el._i.p); el.remove(); }
+      }
+      let ref = null;
+      for (let i = keys.length - 1; i >= 0; i--) {
+        const el = newMap.get(keys[i]);
+        if (el.nextSibling !== ref || el.parentNode !== container)
+          container.insertBefore(el, ref);
+        ref = el;
+      }
+      container[KEY_MAP] = newMap;
+    },
+  };
+}
+
+export { KEY_MAP };

package/core/transport.js

@@ -0,0 +1,77 @@
+/**
+ * AdiaUI Transport — Self-contained vanilla JS bundle.
+ * Fetch wrapper with timeout, retries, error normalization.
+ *
+ * Zero dependencies. Drop into CodePen, StackBlitz, or any vanilla project.
+ */
+
+export async function request(url, options = {}) {
+  const { init = {}, timeout = 30_000, retries = 0, retryDelay = 1000, signal } = options;
+
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+    if (signal) {
+      if (signal.aborted) { clearTimeout(timeoutId); throw new TransportError('Request aborted', { kind: 'abort' }); }
+      signal.addEventListener('abort', () => controller.abort(), { once: true });
+    }
+
+    try {
+      const response = await fetch(url, { ...init, signal: controller.signal });
+      clearTimeout(timeoutId);
+
+      if (!response.ok && attempt < retries && response.status >= 500) {
+        await sleep(retryDelay * Math.pow(2, attempt));
+        continue;
+      }
+
+      return response;
+    } catch (err) {
+      clearTimeout(timeoutId);
+
+      if (err.name === 'AbortError') {
+        throw new TransportError(signal?.aborted ? 'Request aborted' : 'Request timed out', {
+          kind: signal?.aborted ? 'abort' : 'timeout',
+          cause: err,
+        });
+      }
+
+      if (attempt < retries) {
+        await sleep(retryDelay * Math.pow(2, attempt));
+        continue;
+      }
+
+      throw new TransportError(`Network error: ${err.message}`, {
+        kind: 'network',
+        cause: err,
+      });
+    }
+  }
+}
+
+export async function json(url, options = {}) {
+  const response = await request(url, options);
+  if (!response.ok) {
+    let body;
+    try { body = await response.json(); } catch { body = await response.text().catch(() => ''); }
+    throw new TransportError(`HTTP ${response.status}: ${response.statusText}`, {
+      kind: 'http',
+      status: response.status,
+      body,
+    });
+  }
+  return response.json();
+}
+
+export class TransportError extends Error {
+  constructor(message, { kind, status, body, cause } = {}) {
+    super(message, { cause });
+    this.name = 'TransportError';
+    this.kind = kind;
+    this.status = status;
+    this.body = body;
+  }
+}
+
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }