@adia-ai/web-components 0.0.1

package/core/anchor.js

@@ -0,0 +1,187 @@
+/**
+ * Anchor positioning — positions a popover/panel relative to an anchor element.
+ *
+ * Uses native CSS Anchor Positioning when supported (Chrome 125+),
+ * falls back to JS (getBoundingClientRect + position: fixed) otherwise.
+ *
+ * Works with the Popover API: the popover renders in the top layer
+ * (via showPopover() on a popover="manual" or popover="auto" element),
+ * and we position it with either anchor() + position-area or manual coords.
+ *
+ * Usage:
+ *   const cleanup = anchorPopover(trigger, panel, { placement: 'bottom-start', gap: 4 });
+ *   cleanup(); // remove listeners / CSS
+ *
+ * Placements: bottom[-start|-end] | top[-start|-end] | left[-start|-end] | right[-start|-end]
+ */
+
+export const supportsAnchorCSS =
+  typeof CSS !== 'undefined'
+    ? (CSS.supports?.('anchor-name: --x') ?? false) &&
+      (CSS.supports?.('position-area: bottom') ?? false)
+    : false;
+
+let anchorIdCounter = 0;
+
+export function anchorPopover(anchor, popover, options = {}) {
+  const { placement = 'bottom-start', gap = 4, matchWidth = false } = options;
+
+  // Prefer native CSS Anchor Positioning when the browser supports it.
+  if (supportsAnchorCSS) {
+    return anchorNative(anchor, popover, { placement, gap, matchWidth });
+  }
+  return anchorJS(anchor, popover, { placement, gap, matchWidth });
+}
+
+// ── Native CSS Anchor Positioning ──
+
+function anchorNative(anchor, popover, { placement, gap, matchWidth }) {
+  const name = `--a-anchor-${++anchorIdCounter}`;
+  const prevAnchorName = anchor.style.anchorName;
+  const prevStyles = {
+    position: popover.style.position,
+    positionAnchor: popover.style.positionAnchor,
+    positionArea: popover.style.positionArea,
+    positionTryFallbacks: popover.style.positionTryFallbacks,
+    margin: popover.style.margin,
+    width: popover.style.width,
+    top: popover.style.top,
+    left: popover.style.left,
+  };
+
+  anchor.style.anchorName = name;
+
+  popover.style.position = 'fixed';
+  popover.style.positionAnchor = name;
+  popover.style.positionArea = placementToPositionArea(placement);
+  // Gap only on the main (anchor-adjacent) axis so start/end alignment stays tight.
+  popover.style.margin = placementToGapMargin(placement, gap);
+  // Let the browser flip across the opposite side + both perpendicular edges.
+  popover.style.positionTryFallbacks = 'flip-block, flip-inline, flip-block flip-inline';
+
+  if (matchWidth) {
+    popover.style.width = `anchor-size(${name} width)`;
+  }
+
+  // top/left are controlled by position-area; make sure no stale values fight it.
+  popover.style.top = '';
+  popover.style.left = '';
+
+  return () => {
+    anchor.style.anchorName = prevAnchorName;
+    for (const [k, v] of Object.entries(prevStyles)) popover.style[k] = v;
+  };
+}
+
+// Axis-specific margin so gap only separates on the main axis (TRBL).
+function placementToGapMargin(placement, gap) {
+  if (placement.startsWith('bottom')) return `${gap}px 0 0 0`;
+  if (placement.startsWith('top'))    return `0 0 ${gap}px 0`;
+  if (placement.startsWith('left'))   return `0 ${gap}px 0 0`;
+  if (placement.startsWith('right'))  return `0 0 0 ${gap}px`;
+  return `${gap}px`;
+}
+
+// Map our placement vocabulary to CSS position-area keywords.
+function placementToPositionArea(placement) {
+  switch (placement) {
+    case 'bottom':       return 'bottom span-all';
+    case 'bottom-start': return 'bottom span-right';
+    case 'bottom-end':   return 'bottom span-left';
+    case 'top':          return 'top span-all';
+    case 'top-start':    return 'top span-right';
+    case 'top-end':      return 'top span-left';
+    case 'left':         return 'left span-all';
+    case 'left-start':   return 'left span-bottom';
+    case 'left-end':     return 'left span-top';
+    case 'right':        return 'right span-all';
+    case 'right-start':  return 'right span-bottom';
+    case 'right-end':    return 'right span-top';
+    default:             return 'bottom span-right';
+  }
+}
+
+// ── JS fallback ──
+
+function anchorJS(anchor, popover, { placement, gap, matchWidth }) {
+  function update() {
+    if (!anchor || !popover) return;
+
+    const a = anchor.getBoundingClientRect();
+    const p = popover.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let resolved = placement;
+
+    // Vertical flip
+    if (resolved.startsWith('bottom') && a.bottom + gap + p.height > vh && a.top - gap - p.height > 0) {
+      resolved = resolved.replace('bottom', 'top');
+    } else if (resolved.startsWith('top') && a.top - gap - p.height < 0 && a.bottom + gap + p.height < vh) {
+      resolved = resolved.replace('top', 'bottom');
+    }
+
+    let top, left;
+
+    if (resolved.startsWith('top')) {
+      top = a.top - p.height - gap;
+    } else if (resolved.startsWith('bottom')) {
+      top = a.bottom + gap;
+    } else if (resolved.startsWith('left')) {
+      left = a.left - p.width - gap;
+      if (resolved === 'left-start') top = a.top;
+      else if (resolved === 'left-end') top = a.bottom - p.height;
+      else top = a.top + (a.height - p.height) / 2;
+    } else if (resolved.startsWith('right')) {
+      left = a.right + gap;
+      if (resolved === 'right-start') top = a.top;
+      else if (resolved === 'right-end') top = a.bottom - p.height;
+      else top = a.top + (a.height - p.height) / 2;
+    }
+
+    if (left === undefined) {
+      if (resolved.endsWith('-start')) left = a.left;
+      else if (resolved.endsWith('-end')) left = a.right - p.width;
+      else left = a.left + (a.width - p.width) / 2;
+    }
+
+    if (left + p.width > vw - gap) left = a.right - p.width;
+    if (left < gap) left = a.left;
+
+    top = Math.max(gap, Math.min(top, vh - p.height - gap));
+    left = Math.max(gap, Math.min(left, vw - p.width - gap));
+
+    popover.style.position = 'fixed';
+    popover.style.top = `${top}px`;
+    popover.style.left = `${left}px`;
+    if (matchWidth) popover.style.width = `${a.width}px`;
+  }
+
+  popover.style.opacity = '0';
+  requestAnimationFrame(() => {
+    update();
+    popover.style.opacity = '';
+  });
+
+  const scrollParents = getScrollParents(anchor);
+  for (const sp of scrollParents) sp.addEventListener('scroll', update, { passive: true });
+  window.addEventListener('resize', update, { passive: true });
+
+  return () => {
+    for (const sp of scrollParents) sp.removeEventListener('scroll', update);
+    window.removeEventListener('resize', update);
+  };
+}
+
+function getScrollParents(el) {
+  const parents = [document];
+  let node = el?.parentElement;
+  while (node) {
+    const style = getComputedStyle(node);
+    if (/auto|scroll/.test(style.overflow + style.overflowX + style.overflowY)) {
+      parents.push(node);
+    }
+    node = node.parentElement;
+  }
+  return parents;
+}

package/core/controller.js

@@ -0,0 +1,182 @@
+/**
+ * AdiaUI Controllers — Self-contained vanilla JS bundle.
+ * Includes: BaseController, RouteController.
+ *
+ * Zero dependencies. Drop into CodePen, StackBlitz, or any vanilla project.
+ */
+
+// ═══════════════════════════════════════════════════════════════
+// BASE CONTROLLER
+// ═══════════════════════════════════════════════════════════════
+
+const validated = new WeakSet();
+
+export class BaseController {
+  #host = null;
+  #subs = new Set();
+
+  get host() { return this.#host; }
+
+  connect(host) {
+    const ctor = this.constructor;
+    if (!validated.has(ctor) && ctor !== BaseController) {
+      validated.add(ctor);
+      if (!ctor.schema) {
+        console.warn(`AdiaUI: ${ctor.name} extends BaseController without static schema`);
+      }
+      if (this.getState === BaseController.prototype.getState) {
+        console.error(`AdiaUI: ${ctor.schema?.name ?? ctor.name} must implement getState()`);
+      }
+    }
+    if (this.#host && this.#host !== host) {
+      console.warn(`AdiaUI: ${ctor.schema?.name ?? ctor.name} already connected to a different host`);
+    }
+    this.#host = host;
+    this.onConnect(host);
+    this.reflect();
+  }
+
+  disconnect(host) {
+    const h = host ?? this.#host;
+    if (!h) return;
+    this.onDisconnect(h);
+    this.#host = null;
+  }
+
+  subscribe(fn) {
+    this.#subs.add(fn);
+    return () => this.#subs.delete(fn);
+  }
+
+  notify() {
+    this.reflect();
+    for (const fn of this.#subs) fn();
+  }
+
+  onConnect(host) {}
+  onDisconnect(host) {}
+  reflect() {}
+
+  getState() {
+    throw new Error(`${this.constructor.schema?.name ?? this.constructor.name}: getState() not implemented`);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════
+// 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();
+    },
+  };
+}

package/core/element.js

@@ -0,0 +1,257 @@
+/**
+ * AdiaUI Core — Light DOM web component base class.
+ *
+ * Re-exports reactivity and rendering for backward compatibility:
+ *   import { AdiaElement, signal, computed, effect, html, repeat } from './element.js';
+ *
+ * Or import each layer directly:
+ *   import { signal, computed, effect } from './signals.js';
+ *   import { html, css, repeat } from './template.js';
+ *   import { AdiaElement } from './element.js';
+ */
+
+// Re-export reactivity primitives
+export { signal, computed, effect, batch, untracked, isSignal } from './signals.js';
+
+// Re-export rendering
+export { html, css, repeat } from './template.js';
+
+// Internal imports for AdiaElement
+import { signal, computed, effect } from './signals.js';
+import { stamp, disposeParts, KEY_MAP } from './template.js';
+
+// ═══════════════════════════════════════════════════════════════
+// ADIA ELEMENT — Light DOM web component base class
+// ═══════════════════════════════════════════════════════════════
+
+const SIG = Symbol();
+const CH = Symbol();
+
+function installProps(el, props) {
+  el[CH] = new Map();
+  el[SIG] = new Map();
+  for (const [key, cfg] of Object.entries(props)) {
+    const attr = cfg.attribute ?? key.toLowerCase();
+    const type = cfg.type ?? String;
+    const sig = signal(cfg.default ?? undefined);
+    el[SIG].set(key, sig);
+    Object.defineProperty(el, key, {
+      get() { return sig.value; },
+      set(v) {
+        const old = sig.peek();
+        if (Object.is(old, v)) return;
+        el[CH].set(key, old);
+        sig.value = v;
+        if (cfg.reflect) reflect(el, attr, v, type);
+      },
+      configurable: true,
+    });
+  }
+}
+
+function reflect(el, a, v, t) {
+  t === Boolean
+    ? v ? el.setAttribute(a, '') : el.removeAttribute(a)
+    : v == null ? el.removeAttribute(a) : el.setAttribute(a, String(v));
+}
+
+const parseAttr = (v, t) =>
+  t === Boolean ? v !== null : t === Number ? (v === null ? null : +v) : v;
+
+function adoptStyles(ctor) {
+  if (Object.hasOwn(ctor, '_sa')) return;
+  ctor._sa = true;
+  const sheets = ctor.styles;
+  if (!sheets) return;
+  const list = Array.isArray(sheets) ? sheets : [sheets];
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...list.filter(s => !document.adoptedStyleSheets.includes(s))];
+}
+
+function prepareParts(ctor) {
+  if (Object.hasOwn(ctor, '_pp')) return;
+  ctor._pp = {};
+  const parts = ctor.parts;
+  if (!parts) return;
+  for (const [slot, markup] of Object.entries(parts)) {
+    const tpl = document.createElement('template');
+    tpl.innerHTML = markup;
+    ctor._pp[slot] = tpl.content.firstElementChild;
+  }
+}
+
+export class AdiaElement extends HTMLElement {
+  static get properties() { return {}; }
+  static get traits() { return []; }
+  static get observedAttributes() {
+    return Object.entries(this.properties).map(([k, c]) => c.attribute ?? k.toLowerCase());
+  }
+
+  #fx = [];
+  #tc = [];
+  #as = [];
+  #ctrl = null;
+  #cu = null;
+  #tf = null;
+  #notify = signal(0);
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    installProps(this, this.constructor.properties);
+  }
+
+  connectedCallback() {
+    const ctor = this.constructor;
+    if (!ctor._tag) ctor._tag = this.localName;
+    adoptStyles(ctor);
+    prepareParts(ctor);
+    this.connected();
+    this.#fx.push(effect(() => {
+      for (const sig of this[SIG].values()) sig.value;
+      this.#notify.value;
+      const result = ctor.template(this);
+      if (result) stamp(result, this);
+      this.render();
+      if (this[CH].size) {
+        const changed = new Map(this[CH]);
+        this[CH].clear();
+        this.updated(changed);
+      }
+    }, {
+      host: this.localName,
+      onError: this.onError ? (e) => this.onError(e) : null,
+    }));
+    if (!this.#tf) this.#tf = new Set();
+    for (const t of ctor.traits) this.#applyTrait(t);
+    if (this.#ctrl) this.#connectCtrl();
+  }
+
+  disconnectedCallback() {
+    if (this._i) disposeParts(this._i.p);
+    for (const d of this.#fx) d();
+    this.#fx.length = 0;
+    for (const s of this.#as) s.value = undefined;
+    this.#as.length = 0;
+    for (const t of this.#tc) t.disconnect(this);
+    this.#tc.length = 0;
+    this.#tf?.clear();
+    this.#cu?.();
+    this.#cu = null;
+    this.#ctrl?.disconnect?.(this);
+    this.disconnected();
+  }
+
+  #connectCtrl() {
+    const c = this.#ctrl;
+    c.connect?.(this);
+    this.#cu = c.subscribe?.(() => { this.#notify.value++; });
+  }
+
+  get controller() { return this.#ctrl; }
+  set controller(c) {
+    this.#cu?.();
+    this.#cu = null;
+    this.#ctrl?.disconnect?.(this);
+    this.#ctrl = c;
+    if (c && this.isConnected) this.#connectCtrl();
+  }
+
+  #applyTrait(trait) {
+    this.#tf.add(trait);
+    const instance = trait();
+    instance.connect(this, { host: this, signal, computed, effect });
+    this.#tc.push(instance);
+  }
+
+  addTrait(trait) {
+    if (!this.#tf) this.#tf = new Set();
+    if (this.#tf.has(trait)) return this;
+    this.#applyTrait(trait);
+    return this;
+  }
+
+  attributeChangedCallback(name, _, val) {
+    for (const [key, cfg] of Object.entries(this.constructor.properties)) {
+      if ((cfg.attribute ?? key.toLowerCase()) === name) {
+        this[key] = parseAttr(val, cfg.type ?? String);
+        break;
+      }
+    }
+  }
+
+  static template = () => null;
+
+  static create(props = {}) {
+    const tag = this._tag ?? customElements.getName?.(this);
+    if (!tag) throw new Error('Component not registered');
+    const el = document.createElement(tag);
+    for (const [k, v] of Object.entries(props)) el[k] = v;
+    return el;
+  }
+
+  signal(v) { const s = signal(v); this.#as.push(s); return s; }
+
+  ensure(slot) {
+    for (const ch of this.children) {
+      if (ch.getAttribute('slot') === slot) return ch;
+    }
+    const deep = this.#findOwnSlot(slot);
+    if (deep) return deep;
+    prepareParts(this.constructor);
+    const blueprint = this.constructor._pp?.[slot];
+    if (!blueprint) return null;
+    const el = blueprint.cloneNode(true);
+    this.appendChild(el);
+    return el;
+  }
+
+  drop(slot) {
+    for (const ch of this.children) {
+      if (ch.getAttribute('slot') === slot) { ch.remove(); return; }
+    }
+    const deep = this.#findOwnSlot(slot);
+    if (deep) deep.remove();
+  }
+
+  #findOwnSlot(slot) {
+    for (const found of this.querySelectorAll(`[slot="${slot}"]`)) {
+      let el = found.parentElement, owned = true;
+      while (el && el !== this) {
+        if (el.localName.includes('-')) { owned = false; break; }
+        el = el.parentElement;
+      }
+      if (owned && el === this) return found;
+    }
+    return null;
+  }
+
+  reconcile(parent, items, keyFn, stampFn) {
+    const map = parent[KEY_MAP] || new Map();
+    const newMap = new Map();
+    const order = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const key = keyFn(item, i);
+      if (newMap.has(key)) continue;
+      let el = map.get(key);
+      if (el) { stampFn(item, i, el); }
+      else { el = stampFn(item, i, null); }
+      newMap.set(key, el);
+      order.push(key);
+    }
+    for (const [key, el] of map) { if (!newMap.has(key)) el.remove(); }
+    let ref = null;
+    for (let i = order.length - 1; i >= 0; i--) {
+      const el = newMap.get(order[i]);
+      if (el.nextSibling !== ref || el.parentNode !== parent)
+        parent.insertBefore(el, ref);
+      ref = el;
+    }
+    parent[KEY_MAP] = newMap;
+  }
+
+  connected() {}
+  render() {}
+  disconnected() {}
+  updated(_changed) {}
+}