@adia-ai/web-components 0.0.1

package/traits/active-state.js

@@ -0,0 +1,24 @@
+import { defineTrait } from './define.js';
+
+export const activeState = defineTrait({
+  name: 'active-state',
+  attributes: ['data-active-state-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    function onClick() {
+      if (host.hasAttribute('data-active-state-active')) {
+        host.removeAttribute('data-active-state-active');
+      } else {
+        host.setAttribute('data-active-state-active', '');
+      }
+    }
+
+    host.addEventListener('click', onClick);
+
+    return () => {
+      host.removeEventListener('click', onClick);
+      host.removeAttribute('data-active-state-active');
+    };
+  },
+});

package/traits/anchor-positioning.js

@@ -0,0 +1,66 @@
+import { defineTrait } from './define.js';
+
+export const anchorPositioning = defineTrait({
+  name: 'anchor-positioning',
+  attributes: ['data-anchor-positioning-placed', 'data-anchor-placement-actual'],
+  events: ['anchor-placed'],
+  config: ['data-anchor', 'data-anchor-placement', 'data-anchor-gap'],
+  setup({ host }) {
+    const anchorSel = host.getAttribute('data-anchor');
+    const placement = host.getAttribute('data-anchor-placement') || 'bottom';
+    const gap = parseInt(host.getAttribute('data-anchor-gap'), 10) || 0;
+
+    function position() {
+      const anchor = document.querySelector(anchorSel) ||
+        document.getElementById(anchorSel);
+      if (!anchor) return;
+
+      const ar = anchor.getBoundingClientRect();
+      const hr = host.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      let top, left;
+      let actual = placement;
+
+      if (placement.startsWith('bottom')) {
+        top = ar.bottom + gap;
+        left = ar.left + (ar.width - hr.width) / 2;
+        if (top + hr.height > vh) { top = ar.top - hr.height - gap; actual = 'top'; }
+      } else if (placement.startsWith('top')) {
+        top = ar.top - hr.height - gap;
+        left = ar.left + (ar.width - hr.width) / 2;
+        if (top < 0) { top = ar.bottom + gap; actual = 'bottom'; }
+      } else if (placement.startsWith('left')) {
+        top = ar.top + (ar.height - hr.height) / 2;
+        left = ar.left - hr.width - gap;
+        if (left < 0) { left = ar.right + gap; actual = 'right'; }
+      } else {
+        top = ar.top + (ar.height - hr.height) / 2;
+        left = ar.right + gap;
+        if (left + hr.width > vw) { left = ar.left - hr.width - gap; actual = 'left'; }
+      }
+
+      left = Math.max(0, Math.min(left, vw - hr.width));
+      top = Math.max(0, Math.min(top, vh - hr.height));
+
+      host.style.position = 'fixed';
+      host.style.top = `${top}px`;
+      host.style.left = `${left}px`;
+      host.setAttribute('data-anchor-positioning-placed', '');
+      host.setAttribute('data-anchor-placement-actual', actual);
+      host.dispatchEvent(new CustomEvent('anchor-placed', { bubbles: true, detail: { actual } }));
+    }
+
+    position();
+    window.addEventListener('scroll', position, true);
+    window.addEventListener('resize', position);
+
+    return () => {
+      window.removeEventListener('scroll', position, true);
+      window.removeEventListener('resize', position);
+      host.removeAttribute('data-anchor-positioning-placed');
+      host.removeAttribute('data-anchor-placement-actual');
+    };
+  },
+});

package/traits/attention-pulse.js

@@ -0,0 +1,30 @@
+import { defineTrait } from './define.js';
+
+export const attentionPulse = defineTrait({
+  name: 'attention-pulse',
+  attributes: ['data-attention-pulse-active'],
+  events: [],
+  config: ['data-pulse-interval'],
+  setup({ host }) {
+    const interval = parseInt(host.getAttribute('data-pulse-interval'), 10) || 2000;
+    const keyframeName = `adia-pulse-${Math.random().toString(36).slice(2, 8)}`;
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes ${keyframeName} {
+        0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
+        50% { box-shadow: 0 0 12px 4px rgba(59, 130, 246, 0.3); }
+      }
+    `;
+    document.head.appendChild(style);
+
+    host.style.animation = `${keyframeName} ${interval}ms ease-in-out infinite`;
+    host.setAttribute('data-attention-pulse-active', '');
+
+    return () => {
+      host.style.animation = '';
+      style.remove();
+      host.removeAttribute('data-attention-pulse-active');
+    };
+  },
+});

package/traits/confetti-burst.js

@@ -0,0 +1,65 @@
+import { defineTrait } from './define.js';
+
+export const confettiBurst = defineTrait({
+  name: 'confetti-burst',
+  attributes: ['data-confetti-burst-active'],
+  events: ['confetti-burst-done'],
+  config: [],
+  setup({ host }) {
+    const canvas = document.createElement('canvas');
+    canvas.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9999;';
+    host.style.position = host.style.position || 'relative';
+    host.appendChild(canvas);
+
+    const ctx = canvas.getContext('2d');
+    let rafId = null;
+
+    const colors = ['#f44', '#4a4', '#44f', '#ff4', '#f4f', '#4ff'];
+    const particles = Array.from({ length: 80 }, () => ({
+      x: 0.5,
+      y: 0.5,
+      vx: (Math.random() - 0.5) * 8,
+      vy: (Math.random() - 0.5) * 8 - 2,
+      size: Math.random() * 4 + 2,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      life: 1,
+    }));
+
+    host.setAttribute('data-confetti-burst-active', '');
+    const startTime = performance.now();
+
+    function tick(now) {
+      const elapsed = now - startTime;
+      if (elapsed > 2000) {
+        canvas.remove();
+        host.removeAttribute('data-confetti-burst-active');
+        host.dispatchEvent(new CustomEvent('confetti-burst-done', { bubbles: true }));
+        return;
+      }
+
+      canvas.width = host.offsetWidth;
+      canvas.height = host.offsetHeight;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      for (const p of particles) {
+        p.x += p.vx * 0.004;
+        p.y += p.vy * 0.004;
+        p.vy += 0.15;
+        p.life = Math.max(0, 1 - elapsed / 2000);
+        ctx.globalAlpha = p.life;
+        ctx.fillStyle = p.color;
+        ctx.fillRect(p.x * canvas.width, p.y * canvas.height, p.size, p.size);
+      }
+      ctx.globalAlpha = 1;
+      rafId = requestAnimationFrame(tick);
+    }
+
+    rafId = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      canvas.remove();
+      host.removeAttribute('data-confetti-burst-active');
+    };
+  },
+});

package/traits/confetti.js

@@ -0,0 +1,57 @@
+import { defineTrait } from './define.js';
+
+export const confetti = defineTrait({
+  name: 'confetti',
+  attributes: ['data-confetti-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    const canvas = document.createElement('canvas');
+    canvas.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9999;';
+    host.style.position = host.style.position || 'relative';
+    host.appendChild(canvas);
+
+    const ctx = canvas.getContext('2d');
+    let rafId = null;
+    let running = true;
+
+    const colors = ['#f44', '#4a4', '#44f', '#ff4', '#f4f', '#4ff'];
+    const particles = Array.from({ length: 60 }, () => ({
+      x: Math.random(),
+      y: Math.random() * -1,
+      vx: (Math.random() - 0.5) * 2,
+      vy: Math.random() * 2 + 1,
+      size: Math.random() * 4 + 2,
+      color: colors[Math.floor(Math.random() * colors.length)],
+    }));
+
+    function resize() {
+      canvas.width = host.offsetWidth;
+      canvas.height = host.offsetHeight;
+    }
+
+    function tick() {
+      if (!running) return;
+      resize();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (const p of particles) {
+        p.x += p.vx * 0.002;
+        p.y += p.vy * 0.003;
+        if (p.y > 1.1) { p.y = -0.1; p.x = Math.random(); }
+        ctx.fillStyle = p.color;
+        ctx.fillRect(p.x * canvas.width, p.y * canvas.height, p.size, p.size);
+      }
+      rafId = requestAnimationFrame(tick);
+    }
+
+    host.setAttribute('data-confetti-active', '');
+    tick();
+
+    return () => {
+      running = false;
+      if (rafId) cancelAnimationFrame(rafId);
+      canvas.remove();
+      host.removeAttribute('data-confetti-active');
+    };
+  },
+});

package/traits/count-up.js

@@ -0,0 +1,42 @@
+import { defineTrait } from './define.js';
+
+export const countUp = defineTrait({
+  name: 'count-up',
+  attributes: ['data-count-up-active'],
+  events: ['count-up-done'],
+  config: ['data-count-up-target', 'data-count-duration'],
+  setup({ host }) {
+    const target = parseFloat(host.getAttribute('data-count-up-target')) || 0;
+    const duration = parseInt(host.getAttribute('data-count-duration'), 10) || 1000;
+    let rafId = null;
+
+    function easeOutQuart(t) {
+      return 1 - Math.pow(1 - t, 4);
+    }
+
+    const start = performance.now();
+    host.setAttribute('data-count-up-active', '');
+
+    function tick(now) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const value = target * easeOutQuart(progress);
+      host.textContent = Math.round(value);
+
+      if (progress < 1) {
+        rafId = requestAnimationFrame(tick);
+      } else {
+        host.textContent = target;
+        host.removeAttribute('data-count-up-active');
+        host.dispatchEvent(new CustomEvent('count-up-done', { bubbles: true }));
+      }
+    }
+
+    rafId = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      host.removeAttribute('data-count-up-active');
+    };
+  },
+});

package/traits/define.js

@@ -0,0 +1,76 @@
+/**
+ * defineTrait() — Factory for creating composable behavior traits.
+ *
+ * A trait is a reusable behavior package: event listeners, attribute management,
+ * and cleanup — defined once, attached to any element.
+ *
+ *   import { defineTrait } from '@traits/define.js';
+ *
+ *   export const pressable = defineTrait({
+ *     name: 'pressable',
+ *     attributes: ['data-pressable-pressed'],
+ *     events: ['press'],
+ *     config: [],
+ *     setup({ host }) {
+ *       // attach behavior, return cleanup function
+ *     },
+ *   });
+ *
+ * Usage:
+ *   // On any DOM element:
+ *   const inst = pressable();
+ *   inst.connect(myElement);
+ *   inst.disconnect(myElement);
+ *
+ *   // On a AdiaElement:
+ *   class MyButton extends AdiaElement {
+ *     static traits = [pressable];
+ *   }
+ */
+
+const registry = new Map();
+
+export function defineTrait(spec) {
+  if (!spec.name) throw new Error('Trait requires a name');
+  if (!spec.setup) throw new Error(`Trait "${spec.name}" requires a setup function`);
+
+  const schema = Object.freeze({
+    name: spec.name,
+    attributes: Object.freeze(spec.attributes || []),
+    events: Object.freeze(spec.events || []),
+    config: Object.freeze(spec.config || []),
+  });
+
+  function factory() {
+    let cleanup = null;
+
+    return {
+      schema,
+      connect(host, ctx) {
+        cleanup = spec.setup({ host, ...(ctx || {}) });
+      },
+      disconnect(host) {
+        if (cleanup) { cleanup(); cleanup = null; }
+        // Validate: warn if managed attributes are still present
+        for (const attr of schema.attributes) {
+          if (host.hasAttribute(attr)) {
+            console.warn(`Trait "${schema.name}": attribute "${attr}" still present after disconnect`);
+            host.removeAttribute(attr);
+          }
+        }
+      },
+    };
+  }
+
+  factory.schema = schema;
+  registry.set(spec.name, schema);
+  return factory;
+}
+
+export function getTraitSchema(name) {
+  return registry.get(name) || null;
+}
+
+export function listTraits() {
+  return [...registry.keys()];
+}

package/traits/dirty-state.js

@@ -0,0 +1,38 @@
+import { defineTrait } from './define.js';
+
+export const dirtyState = defineTrait({
+  name: 'dirty-state',
+  attributes: ['data-dirty-state-dirty', 'data-dirty-state-pristine'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    const initialValue = host.value ?? host.getAttribute('value') ?? '';
+
+    function check() {
+      const currentValue = host.value ?? host.getAttribute('value') ?? '';
+      if (currentValue !== initialValue) {
+        host.setAttribute('data-dirty-state-dirty', '');
+        host.removeAttribute('data-dirty-state-pristine');
+      } else {
+        host.setAttribute('data-dirty-state-pristine', '');
+        host.removeAttribute('data-dirty-state-dirty');
+      }
+    }
+
+    // Set initial state
+    host.setAttribute('data-dirty-state-pristine', '');
+
+    function onInput() { check(); }
+    function onChange() { check(); }
+
+    host.addEventListener('input', onInput);
+    host.addEventListener('change', onChange);
+
+    return () => {
+      host.removeEventListener('input', onInput);
+      host.removeEventListener('change', onChange);
+      host.removeAttribute('data-dirty-state-dirty');
+      host.removeAttribute('data-dirty-state-pristine');
+    };
+  },
+});

package/traits/drag-ghost.js

@@ -0,0 +1,38 @@
+import { defineTrait } from './define.js';
+
+export const dragGhost = defineTrait({
+  name: 'drag-ghost',
+  attributes: ['data-drag-ghost-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    let ghost = null;
+
+    function onDragStart(e) {
+      ghost = host.cloneNode(true);
+      ghost.style.cssText = `
+        position: fixed; top: -9999px; left: -9999px;
+        pointer-events: none; opacity: 0.8; z-index: 99999;
+      `;
+      document.body.appendChild(ghost);
+      e.dataTransfer?.setDragImage(ghost, 0, 0);
+      host.setAttribute('data-drag-ghost-active', '');
+    }
+
+    function onDragEnd() {
+      if (ghost) { ghost.remove(); ghost = null; }
+      host.removeAttribute('data-drag-ghost-active');
+    }
+
+    host.setAttribute('draggable', 'true');
+    host.addEventListener('dragstart', onDragStart);
+    host.addEventListener('dragend', onDragEnd);
+
+    return () => {
+      host.removeEventListener('dragstart', onDragStart);
+      host.removeEventListener('dragend', onDragEnd);
+      if (ghost) { ghost.remove(); ghost = null; }
+      host.removeAttribute('data-drag-ghost-active');
+    };
+  },
+});

package/traits/draggable.js

@@ -0,0 +1,73 @@
+import { defineTrait } from './define.js';
+
+export const draggable = defineTrait({
+  name: 'draggable',
+  attributes: ['data-draggable-dragging'],
+  events: ['drag-end'],
+  config: [],
+  setup({ host }) {
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+    let originX = 0;
+    let originY = 0;
+
+    function isDisabled() {
+      return host.hasAttribute('disabled');
+    }
+
+    function onPointerDown(e) {
+      if (isDisabled()) return;
+      dragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+
+      // Parse current translate values
+      const style = getComputedStyle(host);
+      const matrix = new DOMMatrixReadOnly(style.transform);
+      originX = matrix.m41;
+      originY = matrix.m42;
+
+      host.setPointerCapture(e.pointerId);
+      host.setAttribute('data-draggable-dragging', '');
+      host.style.touchAction = 'none';
+    }
+
+    function onPointerMove(e) {
+      if (!dragging) return;
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      const x = originX + dx;
+      const y = originY + dy;
+      host.style.translate = `${x}px ${y}px`;
+    }
+
+    function onPointerUp(e) {
+      if (!dragging) return;
+      dragging = false;
+      host.removeAttribute('data-draggable-dragging');
+
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      const x = originX + dx;
+      const y = originY + dy;
+
+      host.dispatchEvent(new CustomEvent('drag-end', {
+        bubbles: true,
+        detail: { x, y },
+      }));
+    }
+
+    host.addEventListener('pointerdown', onPointerDown);
+    host.addEventListener('pointermove', onPointerMove);
+    host.addEventListener('pointerup', onPointerUp);
+
+    return () => {
+      host.removeEventListener('pointerdown', onPointerDown);
+      host.removeEventListener('pointermove', onPointerMove);
+      host.removeEventListener('pointerup', onPointerUp);
+      host.removeAttribute('data-draggable-dragging');
+      host.style.touchAction = '';
+    };
+  },
+});

package/traits/fade-presence.js

@@ -0,0 +1,52 @@
+import { defineTrait } from './define.js';
+
+export const fadePresence = defineTrait({
+  name: 'fade-presence',
+  attributes: ['data-fade-presence-entering', 'data-fade-presence-exiting'],
+  events: ['fade-in-done', 'fade-out-done'],
+  config: [],
+  setup({ host }) {
+    host.style.opacity = '0';
+    host.style.transition = 'opacity 200ms';
+
+    function onTransitionEnd() {
+      if (host.hasAttribute('data-fade-presence-entering')) {
+        host.removeAttribute('data-fade-presence-entering');
+        host.dispatchEvent(new CustomEvent('fade-in-done', { bubbles: true }));
+      } else if (host.hasAttribute('data-fade-presence-exiting')) {
+        host.removeAttribute('data-fade-presence-exiting');
+        host.dispatchEvent(new CustomEvent('fade-out-done', { bubbles: true }));
+      }
+    }
+
+    const observer = new MutationObserver(() => {
+      const visible = host.hasAttribute('data-fade-presence-visible');
+      if (visible) {
+        host.setAttribute('data-fade-presence-entering', '');
+        host.removeAttribute('data-fade-presence-exiting');
+        host.style.opacity = '1';
+      } else {
+        host.setAttribute('data-fade-presence-exiting', '');
+        host.removeAttribute('data-fade-presence-entering');
+        host.style.opacity = '0';
+      }
+    });
+
+    observer.observe(host, { attributes: true, attributeFilter: ['data-fade-presence-visible'] });
+    host.addEventListener('transitionend', onTransitionEnd);
+
+    // Apply initial state
+    if (host.hasAttribute('data-fade-presence-visible')) {
+      host.style.opacity = '1';
+    }
+
+    return () => {
+      observer.disconnect();
+      host.removeEventListener('transitionend', onTransitionEnd);
+      host.style.opacity = '';
+      host.style.transition = '';
+      host.removeAttribute('data-fade-presence-entering');
+      host.removeAttribute('data-fade-presence-exiting');
+    };
+  },
+});

package/traits/focus-trap.js

@@ -0,0 +1,63 @@
+import { defineTrait } from './define.js';
+
+const FOCUSABLE_SELECTOR = 'a[href], [role="button"][tabindex], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]';
+
+export const focusTrap = defineTrait({
+  name: 'focus-trap',
+  attributes: ['data-focus-trap-active'],
+  events: ['focus-trap-escape'],
+  config: [],
+  setup({ host }) {
+    function getFocusableElements() {
+      return [...host.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+        (el) => !el.hasAttribute('disabled') && el.offsetParent !== null,
+      );
+    }
+
+    function onKeyDown(e) {
+      if (e.key === 'Escape') {
+        host.dispatchEvent(new CustomEvent('focus-trap-escape', { bubbles: true }));
+        return;
+      }
+
+      if (e.key !== 'Tab') return;
+
+      const focusable = getFocusableElements();
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+
+    host.setAttribute('data-focus-trap-active', '');
+    host.addEventListener('keydown', onKeyDown);
+
+    // Auto-focus first focusable element
+    requestAnimationFrame(() => {
+      const focusable = getFocusableElements();
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      }
+    });
+
+    return () => {
+      host.removeEventListener('keydown', onKeyDown);
+      host.removeAttribute('data-focus-trap-active');
+    };
+  },
+});

package/traits/focusable.js

@@ -0,0 +1,38 @@
+import { defineTrait } from './define.js';
+
+export const focusable = defineTrait({
+  name: 'focusable',
+  attributes: ['data-focusable-keyboard'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    let hadMouseDown = false;
+
+    function onMouseDown() {
+      hadMouseDown = true;
+    }
+
+    function onFocus() {
+      if (!hadMouseDown) {
+        host.setAttribute('data-focusable-keyboard', '');
+      }
+      hadMouseDown = false;
+    }
+
+    function onBlur() {
+      host.removeAttribute('data-focusable-keyboard');
+      hadMouseDown = false;
+    }
+
+    host.addEventListener('mousedown', onMouseDown);
+    host.addEventListener('focus', onFocus);
+    host.addEventListener('blur', onBlur);
+
+    return () => {
+      host.removeEventListener('mousedown', onMouseDown);
+      host.removeEventListener('focus', onFocus);
+      host.removeEventListener('blur', onBlur);
+      host.removeAttribute('data-focusable-keyboard');
+    };
+  },
+});