@adia-ai/web-components 0.0.1

package/traits/glow-focus.js

@@ -0,0 +1,33 @@
+import { defineTrait } from './define.js';
+
+export const glowFocus = defineTrait({
+  name: 'glow-focus',
+  attributes: ['data-glow-focus-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    let savedBoxShadow = '';
+
+    function onFocus() {
+      savedBoxShadow = host.style.boxShadow;
+      host.style.boxShadow = '0 0 8px 2px rgba(59, 130, 246, 0.6)';
+      host.style.transition = 'box-shadow 200ms ease';
+      host.setAttribute('data-glow-focus-active', '');
+    }
+
+    function onBlur() {
+      host.style.boxShadow = savedBoxShadow;
+      host.removeAttribute('data-glow-focus-active');
+    }
+
+    host.addEventListener('focus', onFocus);
+    host.addEventListener('blur', onBlur);
+
+    return () => {
+      host.removeEventListener('focus', onFocus);
+      host.removeEventListener('blur', onBlur);
+      if (host.hasAttribute('data-glow-focus-active')) onBlur();
+      host.removeAttribute('data-glow-focus-active');
+    };
+  },
+});

package/traits/gradient-shift.js

@@ -0,0 +1,32 @@
+import { defineTrait } from './define.js';
+
+export const gradientShift = defineTrait({
+  name: 'gradient-shift',
+  attributes: ['data-gradient-shift-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    const keyframeName = `adia-gradient-${Math.random().toString(36).slice(2, 8)}`;
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes ${keyframeName} {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+      }
+    `;
+    document.head.appendChild(style);
+
+    host.style.backgroundSize = '200% 200%';
+    host.style.animation = `${keyframeName} 3s ease infinite`;
+    host.setAttribute('data-gradient-shift-active', '');
+
+    return () => {
+      host.style.backgroundSize = '';
+      host.style.animation = '';
+      style.remove();
+      host.removeAttribute('data-gradient-shift-active');
+    };
+  },
+});

package/traits/haptic-feedback.js

@@ -0,0 +1,28 @@
+import { defineTrait } from './define.js';
+
+export const hapticFeedback = defineTrait({
+  name: 'haptic-feedback',
+  attributes: ['data-haptic-feedback-active'],
+  events: [],
+  config: ['data-haptic-pattern'],
+  setup({ host }) {
+    if (!navigator.vibrate) {
+      return () => {};
+    }
+
+    const patternStr = host.getAttribute('data-haptic-pattern') || '10';
+    const pattern = patternStr.split(',').map(Number);
+
+    function onPress() {
+      navigator.vibrate(pattern);
+    }
+
+    host.addEventListener('press', onPress);
+    host.setAttribute('data-haptic-feedback-active', '');
+
+    return () => {
+      host.removeEventListener('press', onPress);
+      host.removeAttribute('data-haptic-feedback-active');
+    };
+  },
+});

package/traits/hotkey.js

@@ -0,0 +1,62 @@
+import { defineTrait } from './define.js';
+
+function isMac() {
+  if (typeof navigator !== 'undefined') {
+    if (navigator.platform) return /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+    if (navigator.userAgent) return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+  }
+  return false;
+}
+
+function parseCombo(str) {
+  const parts = str.toLowerCase().split('+').map((s) => s.trim());
+  const mac = isMac();
+  return {
+    ctrl: parts.includes('ctrl'),
+    meta: parts.includes('meta') || (parts.includes('mod') && mac),
+    alt: parts.includes('alt'),
+    shift: parts.includes('shift'),
+    ctrlOrMod: parts.includes('mod') && !mac,
+    key: parts.find((p) => !['ctrl', 'meta', 'alt', 'shift', 'mod'].includes(p)) || '',
+  };
+}
+
+function matchesCombo(e, combo) {
+  const ctrlMatch = combo.ctrlOrMod ? e.ctrlKey : combo.ctrl ? e.ctrlKey : !e.ctrlKey;
+  const metaMatch = combo.meta ? e.metaKey : !e.metaKey;
+  const altMatch = combo.alt ? e.altKey : !e.altKey;
+  const shiftMatch = combo.shift ? e.shiftKey : !e.shiftKey;
+  const keyMatch = e.key.toLowerCase() === combo.key;
+  return ctrlMatch && metaMatch && altMatch && shiftMatch && keyMatch;
+}
+
+export const hotkey = defineTrait({
+  name: 'hotkey',
+  attributes: [],
+  events: ['hotkey'],
+  config: ['data-hotkey', 'data-hotkey-global'],
+  setup({ host }) {
+    const comboStr = host.getAttribute('data-hotkey');
+    if (!comboStr) return () => {};
+
+    const combo = parseCombo(comboStr);
+    const isGlobal = host.hasAttribute('data-hotkey-global');
+    const target = isGlobal ? document : host;
+
+    function onKeyDown(e) {
+      if (matchesCombo(e, combo)) {
+        e.preventDefault();
+        host.dispatchEvent(new CustomEvent('hotkey', {
+          bubbles: true,
+          detail: { combo: comboStr, originalEvent: e },
+        }));
+      }
+    }
+
+    target.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      target.removeEventListener('keydown', onKeyDown);
+    };
+  },
+});

package/traits/hoverable.js

@@ -0,0 +1,26 @@
+import { defineTrait } from './define.js';
+
+export const hoverable = defineTrait({
+  name: 'hoverable',
+  attributes: ['data-hoverable-hover'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    function onPointerEnter() {
+      host.setAttribute('data-hoverable-hover', '');
+    }
+
+    function onPointerLeave() {
+      host.removeAttribute('data-hoverable-hover');
+    }
+
+    host.addEventListener('pointerenter', onPointerEnter);
+    host.addEventListener('pointerleave', onPointerLeave);
+
+    return () => {
+      host.removeEventListener('pointerenter', onPointerEnter);
+      host.removeEventListener('pointerleave', onPointerLeave);
+      host.removeAttribute('data-hoverable-hover');
+    };
+  },
+});

package/traits/index.js

@@ -0,0 +1,55 @@
+// Interaction
+export { pressable } from './pressable.js';
+export { hoverable } from './hoverable.js';
+export { focusable } from './focusable.js';
+export { draggable } from './draggable.js';
+export { resizable } from './resizable.js';
+export { inertiaDrag } from './inertia-drag.js';
+export { tossable } from './tossable.js';
+export { scalePress } from './scale-press.js';
+
+// Focus & Keyboard
+export { focusTrap } from './focus-trap.js';
+export { keyboardNav } from './keyboard-nav.js';
+export { hotkey } from './hotkey.js';
+export { rovingTabindex } from './roving-tabindex.js';
+export { typeahead } from './typeahead.js';
+
+// Form
+export { dirtyState } from './dirty-state.js';
+export { validation } from './validation.js';
+
+// Animation
+export { fadePresence } from './fade-presence.js';
+export { countUp } from './count-up.js';
+export { attentionPulse } from './attention-pulse.js';
+export { glowFocus } from './glow-focus.js';
+export { gradientShift } from './gradient-shift.js';
+export { confetti } from './confetti.js';
+export { confettiBurst } from './confetti-burst.js';
+export { springAnimate } from './spring-animate.js';
+export { shimmerLoading } from './shimmer-loading.js';
+export { ripple } from './ripple.js';
+
+// Layout & Positioning
+export { anchorPositioning } from './anchor-positioning.js';
+export { portal } from './portal.js';
+export { parallax } from './parallax.js';
+export { magneticHover } from './magnetic-hover.js';
+export { snapToGrid } from './snap-to-grid.js';
+export { scrollLock } from './scroll-lock.js';
+
+// Observer
+export { intersectionObserver } from './intersection-observer.js';
+export { resizeObserver } from './resize-observer.js';
+
+// Visual Effect
+export { noiseTexture } from './noise-texture.js';
+export { dragGhost } from './drag-ghost.js';
+export { hapticFeedback } from './haptic-feedback.js';
+export { tiltHover } from './tilt-hover.js';
+export { soundFeedback } from './sound-feedback.js';
+export { typewriter } from './typewriter.js';
+
+// State
+export { activeState } from './active-state.js';

package/traits/inertia-drag.js

@@ -0,0 +1,133 @@
+import { defineTrait } from './define.js';
+
+const FRICTION = 0.95;
+const MIN_VELOCITY = 0.5;
+
+export const inertiaDrag = defineTrait({
+  name: 'inertia-drag',
+  attributes: ['data-inertia-drag-coasting'],
+  events: ['drag-end'],
+  config: [],
+  setup({ host }) {
+    let dragging = false;
+    let coasting = false;
+    let rafId = null;
+    let startX = 0;
+    let startY = 0;
+    let originX = 0;
+    let originY = 0;
+    let currentX = 0;
+    let currentY = 0;
+    let velocityX = 0;
+    let velocityY = 0;
+    let lastTime = 0;
+    let lastClientX = 0;
+    let lastClientY = 0;
+
+    function parseTranslate() {
+      const style = getComputedStyle(host);
+      const matrix = new DOMMatrixReadOnly(style.transform);
+      return { x: matrix.m41, y: matrix.m42 };
+    }
+
+    function applyPosition(x, y) {
+      host.style.translate = `${x}px ${y}px`;
+      currentX = x;
+      currentY = y;
+    }
+
+    function decelerate() {
+      velocityX *= FRICTION;
+      velocityY *= FRICTION;
+
+      if (Math.abs(velocityX) < MIN_VELOCITY && Math.abs(velocityY) < MIN_VELOCITY) {
+        coasting = false;
+        host.removeAttribute('data-inertia-drag-coasting');
+        host.dispatchEvent(new CustomEvent('drag-end', {
+          bubbles: true,
+          detail: { x: currentX, y: currentY },
+        }));
+        return;
+      }
+
+      applyPosition(currentX + velocityX, currentY + velocityY);
+      rafId = requestAnimationFrame(decelerate);
+    }
+
+    function onPointerDown(e) {
+      if (host.hasAttribute('disabled')) return;
+
+      // Stop any coasting
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      coasting = false;
+      host.removeAttribute('data-inertia-drag-coasting');
+
+      dragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      lastClientX = e.clientX;
+      lastClientY = e.clientY;
+      lastTime = performance.now();
+      velocityX = 0;
+      velocityY = 0;
+
+      const pos = parseTranslate();
+      originX = pos.x;
+      originY = pos.y;
+
+      host.setPointerCapture(e.pointerId);
+      host.style.touchAction = 'none';
+    }
+
+    function onPointerMove(e) {
+      if (!dragging) return;
+      const now = performance.now();
+      const dt = now - lastTime;
+
+      if (dt > 0) {
+        velocityX = (e.clientX - lastClientX) / dt * 16; // normalize to ~60fps frame
+        velocityY = (e.clientY - lastClientY) / dt * 16;
+      }
+
+      lastClientX = e.clientX;
+      lastClientY = e.clientY;
+      lastTime = now;
+
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      applyPosition(originX + dx, originY + dy);
+    }
+
+    function onPointerUp() {
+      if (!dragging) return;
+      dragging = false;
+
+      if (Math.abs(velocityX) > MIN_VELOCITY || Math.abs(velocityY) > MIN_VELOCITY) {
+        coasting = true;
+        host.setAttribute('data-inertia-drag-coasting', '');
+        rafId = requestAnimationFrame(decelerate);
+      } else {
+        host.dispatchEvent(new CustomEvent('drag-end', {
+          bubbles: true,
+          detail: { x: currentX, y: currentY },
+        }));
+      }
+    }
+
+    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);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      host.removeAttribute('data-inertia-drag-coasting');
+      host.style.touchAction = '';
+    };
+  },
+});

package/traits/intersection-observer.js

@@ -0,0 +1,33 @@
+import { defineTrait } from './define.js';
+
+export const intersectionObserver = defineTrait({
+  name: 'intersection-observer',
+  attributes: ['data-intersection-visible', 'data-intersection-ratio'],
+  events: ['element-visible', 'element-hidden'],
+  config: ['data-intersection-threshold'],
+  setup({ host }) {
+    const threshold = parseFloat(host.getAttribute('data-intersection-threshold')) || 0;
+
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        host.setAttribute('data-intersection-ratio', entry.intersectionRatio.toFixed(2));
+
+        if (entry.isIntersecting) {
+          host.setAttribute('data-intersection-visible', '');
+          host.dispatchEvent(new CustomEvent('element-visible', { bubbles: true }));
+        } else {
+          host.removeAttribute('data-intersection-visible');
+          host.dispatchEvent(new CustomEvent('element-hidden', { bubbles: true }));
+        }
+      }
+    }, { threshold });
+
+    observer.observe(host);
+
+    return () => {
+      observer.disconnect();
+      host.removeAttribute('data-intersection-visible');
+      host.removeAttribute('data-intersection-ratio');
+    };
+  },
+});

package/traits/keyboard-nav.js

@@ -0,0 +1,36 @@
+import { defineTrait } from './define.js';
+
+const KEY_MAP = {
+  ArrowUp: 'nav-up',
+  ArrowDown: 'nav-down',
+  ArrowLeft: 'nav-left',
+  ArrowRight: 'nav-right',
+  Enter: 'nav-enter',
+  Escape: 'nav-escape',
+  Home: 'nav-home',
+  End: 'nav-end',
+};
+
+export const keyboardNav = defineTrait({
+  name: 'keyboard-nav',
+  attributes: [],
+  events: ['nav-up', 'nav-down', 'nav-left', 'nav-right', 'nav-enter', 'nav-escape', 'nav-home', 'nav-end'],
+  config: [],
+  setup({ host }) {
+    function onKeyDown(e) {
+      const eventName = KEY_MAP[e.key];
+      if (!eventName) return;
+      e.preventDefault();
+      host.dispatchEvent(new CustomEvent(eventName, {
+        bubbles: true,
+        detail: { originalEvent: e },
+      }));
+    }
+
+    host.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      host.removeEventListener('keydown', onKeyDown);
+    };
+  },
+});

package/traits/magnetic-hover.js

@@ -0,0 +1,37 @@
+import { defineTrait } from './define.js';
+
+export const magneticHover = defineTrait({
+  name: 'magnetic-hover',
+  attributes: ['data-magnetic-hover-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    function onPointerMove(e) {
+      const rect = host.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = (e.clientX - cx) * 0.15;
+      const dy = (e.clientY - cy) * 0.15;
+      host.style.translate = `${dx}px ${dy}px`;
+      host.setAttribute('data-magnetic-hover-active', '');
+    }
+
+    function onPointerLeave() {
+      host.style.translate = '';
+      host.style.transition = 'translate 300ms ease';
+      host.removeAttribute('data-magnetic-hover-active');
+      setTimeout(() => { host.style.transition = ''; }, 300);
+    }
+
+    host.addEventListener('pointermove', onPointerMove);
+    host.addEventListener('pointerleave', onPointerLeave);
+
+    return () => {
+      host.removeEventListener('pointermove', onPointerMove);
+      host.removeEventListener('pointerleave', onPointerLeave);
+      host.style.translate = '';
+      host.style.transition = '';
+      host.removeAttribute('data-magnetic-hover-active');
+    };
+  },
+});

package/traits/noise-texture.js

@@ -0,0 +1,30 @@
+import { defineTrait } from './define.js';
+
+export const noiseTexture = defineTrait({
+  name: 'noise-texture',
+  attributes: ['data-noise-texture-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#n)" opacity="0.08"/></svg>`;
+    const encoded = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+
+    const overlay = document.createElement('div');
+    overlay.style.cssText = `
+      position: absolute; inset: 0; pointer-events: none; z-index: 1;
+      background-image: ${encoded};
+      background-repeat: repeat;
+      border-radius: inherit;
+      opacity: 0.5;
+    `;
+
+    host.style.position = host.style.position || 'relative';
+    host.appendChild(overlay);
+    host.setAttribute('data-noise-texture-active', '');
+
+    return () => {
+      overlay.remove();
+      host.removeAttribute('data-noise-texture-active');
+    };
+  },
+});

package/traits/parallax.js

@@ -0,0 +1,42 @@
+import { defineTrait } from './define.js';
+
+export const parallax = defineTrait({
+  name: 'parallax',
+  attributes: ['data-parallax-active'],
+  events: [],
+  config: ['data-parallax-strength'],
+  setup({ host }) {
+    const strength = parseFloat(host.getAttribute('data-parallax-strength')) || 0.5;
+
+    function getScrollParent(el) {
+      let node = el.parentElement;
+      while (node) {
+        const style = getComputedStyle(node);
+        if (/(auto|scroll)/.test(style.overflow + style.overflowY)) return node;
+        node = node.parentElement;
+      }
+      return window;
+    }
+
+    const scrollParent = getScrollParent(host);
+
+    function onScroll() {
+      const scrollY = scrollParent === window
+        ? window.scrollY
+        : scrollParent.scrollTop;
+      const offset = scrollY * strength;
+      host.style.translate = `0 ${offset}px`;
+    }
+
+    const target = scrollParent === window ? window : scrollParent;
+    target.addEventListener('scroll', onScroll, { passive: true });
+    host.setAttribute('data-parallax-active', '');
+    onScroll();
+
+    return () => {
+      target.removeEventListener('scroll', onScroll);
+      host.style.translate = '';
+      host.removeAttribute('data-parallax-active');
+    };
+  },
+});

package/traits/portal.js

@@ -0,0 +1,27 @@
+import { defineTrait } from './define.js';
+
+export const portal = defineTrait({
+  name: 'portal',
+  attributes: ['data-portal-active'],
+  events: [],
+  config: ['data-portal-target'],
+  setup({ host }) {
+    const targetSel = host.getAttribute('data-portal-target') || 'body';
+    const originalParent = host.parentNode;
+    const originalNext = host.nextSibling;
+    const target = document.querySelector(targetSel);
+
+    if (target && target !== originalParent) {
+      target.appendChild(host);
+    }
+
+    host.setAttribute('data-portal-active', '');
+
+    return () => {
+      host.removeAttribute('data-portal-active');
+      if (originalParent && host.parentNode !== originalParent) {
+        originalParent.insertBefore(host, originalNext);
+      }
+    };
+  },
+});

package/traits/pressable.js

@@ -0,0 +1,75 @@
+import { defineTrait } from './define.js';
+
+export const pressable = defineTrait({
+  name: 'pressable',
+  attributes: ['data-pressable-pressed'],
+  events: ['press'],
+  config: [],
+  setup({ host }) {
+    let pressed = false;
+
+    function isDisabled() {
+      return host.hasAttribute('disabled');
+    }
+
+    function setPressed(value) {
+      pressed = value;
+      if (value) {
+        host.setAttribute('data-pressable-pressed', '');
+      } else {
+        host.removeAttribute('data-pressable-pressed');
+      }
+    }
+
+    function onPointerDown(e) {
+      if (isDisabled()) return;
+      setPressed(true);
+    }
+
+    function onPointerUp(e) {
+      if (!pressed) return;
+      setPressed(false);
+      if (!isDisabled()) {
+        host.dispatchEvent(new CustomEvent('press', { bubbles: true }));
+      }
+    }
+
+    function onPointerLeave(e) {
+      if (pressed) setPressed(false);
+    }
+
+    function onKeyDown(e) {
+      if (isDisabled()) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setPressed(true);
+      }
+    }
+
+    function onKeyUp(e) {
+      if (!pressed) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setPressed(false);
+        if (!isDisabled()) {
+          host.dispatchEvent(new CustomEvent('press', { bubbles: true }));
+        }
+      }
+    }
+
+    host.addEventListener('pointerdown', onPointerDown);
+    host.addEventListener('pointerup', onPointerUp);
+    host.addEventListener('pointerleave', onPointerLeave);
+    host.addEventListener('keydown', onKeyDown);
+    host.addEventListener('keyup', onKeyUp);
+
+    return () => {
+      host.removeEventListener('pointerdown', onPointerDown);
+      host.removeEventListener('pointerup', onPointerUp);
+      host.removeEventListener('pointerleave', onPointerLeave);
+      host.removeEventListener('keydown', onKeyDown);
+      host.removeEventListener('keyup', onKeyUp);
+      host.removeAttribute('data-pressable-pressed');
+    };
+  },
+});