@adia-ai/web-components 0.0.1

package/traits/resizable.js

@@ -0,0 +1,100 @@
+import { defineTrait } from './define.js';
+
+const EDGE_SIZE = 8;
+const EDGES = ['top', 'right', 'bottom', 'left'];
+
+export const resizable = defineTrait({
+  name: 'resizable',
+  attributes: ['data-resizable-resizing', 'data-resizable-edge'],
+  events: ['resize-end'],
+  config: [],
+  setup({ host }) {
+    let resizing = false;
+    let activeEdge = null;
+    let startX = 0;
+    let startY = 0;
+    let startWidth = 0;
+    let startHeight = 0;
+    let startLeft = 0;
+    let startTop = 0;
+    const handles = [];
+
+    // Ensure host is positioned
+    const pos = getComputedStyle(host).position;
+    if (pos === 'static') {
+      host.style.position = 'relative';
+    }
+
+    for (const edge of EDGES) {
+      const handle = document.createElement('div');
+      handle.dataset.resizableHandle = edge;
+      Object.assign(handle.style, {
+        position: 'absolute',
+        zIndex: '9999',
+        ...(edge === 'top' && { top: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
+        ...(edge === 'bottom' && { bottom: '0', left: '0', right: '0', height: `${EDGE_SIZE}px`, cursor: 'ns-resize' }),
+        ...(edge === 'left' && { top: '0', bottom: '0', left: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
+        ...(edge === 'right' && { top: '0', bottom: '0', right: '0', width: `${EDGE_SIZE}px`, cursor: 'ew-resize' }),
+      });
+
+      handle.addEventListener('pointerdown', (e) => {
+        e.stopPropagation();
+        resizing = true;
+        activeEdge = edge;
+        startX = e.clientX;
+        startY = e.clientY;
+        const rect = host.getBoundingClientRect();
+        startWidth = rect.width;
+        startHeight = rect.height;
+        startLeft = rect.left;
+        startTop = rect.top;
+
+        handle.setPointerCapture(e.pointerId);
+        host.setAttribute('data-resizable-resizing', '');
+        host.setAttribute('data-resizable-edge', edge);
+      });
+
+      handle.addEventListener('pointermove', (e) => {
+        if (!resizing || activeEdge !== edge) return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        if (edge === 'right') {
+          host.style.width = `${Math.max(0, startWidth + dx)}px`;
+        } else if (edge === 'left') {
+          host.style.width = `${Math.max(0, startWidth - dx)}px`;
+        } else if (edge === 'bottom') {
+          host.style.height = `${Math.max(0, startHeight + dy)}px`;
+        } else if (edge === 'top') {
+          host.style.height = `${Math.max(0, startHeight - dy)}px`;
+        }
+      });
+
+      handle.addEventListener('pointerup', () => {
+        if (!resizing || activeEdge !== edge) return;
+        resizing = false;
+        activeEdge = null;
+        host.removeAttribute('data-resizable-resizing');
+        host.removeAttribute('data-resizable-edge');
+
+        const rect = host.getBoundingClientRect();
+        host.dispatchEvent(new CustomEvent('resize-end', {
+          bubbles: true,
+          detail: { width: rect.width, height: rect.height },
+        }));
+      });
+
+      handles.push(handle);
+      host.appendChild(handle);
+    }
+
+    return () => {
+      for (const handle of handles) {
+        handle.remove();
+      }
+      handles.length = 0;
+      host.removeAttribute('data-resizable-resizing');
+      host.removeAttribute('data-resizable-edge');
+    };
+  },
+});

package/traits/resize-observer.js

@@ -0,0 +1,31 @@
+import { defineTrait } from './define.js';
+
+export const resizeObserver = defineTrait({
+  name: 'resize-observer',
+  attributes: ['data-resize-observer-observed', 'data-resize-width', 'data-resize-height'],
+  events: ['element-resize'],
+  config: [],
+  setup({ host }) {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        host.setAttribute('data-resize-width', Math.round(width));
+        host.setAttribute('data-resize-height', Math.round(height));
+        host.dispatchEvent(new CustomEvent('element-resize', {
+          bubbles: true,
+          detail: { width, height },
+        }));
+      }
+    });
+
+    observer.observe(host);
+    host.setAttribute('data-resize-observer-observed', '');
+
+    return () => {
+      observer.disconnect();
+      host.removeAttribute('data-resize-observer-observed');
+      host.removeAttribute('data-resize-width');
+      host.removeAttribute('data-resize-height');
+    };
+  },
+});

package/traits/ripple.js

@@ -0,0 +1,53 @@
+import { defineTrait } from './define.js';
+
+export const ripple = defineTrait({
+  name: 'ripple',
+  attributes: ['data-ripple-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    host.style.overflow = 'hidden';
+    host.style.position = host.style.position || 'relative';
+    host.setAttribute('data-ripple-active', '');
+
+    function onClick(e) {
+      const rect = host.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const size = Math.max(rect.width, rect.height) * 2;
+
+      const span = document.createElement('span');
+      span.style.cssText = `
+        position: absolute; border-radius: 50%; pointer-events: none;
+        background: rgba(255,255,255,0.4);
+        width: ${size}px; height: ${size}px;
+        left: ${x - size / 2}px; top: ${y - size / 2}px;
+        transform: scale(0); opacity: 1;
+        animation: adia-ripple-expand 600ms ease-out forwards;
+      `;
+
+      host.appendChild(span);
+      span.addEventListener('animationend', () => span.remove());
+    }
+
+    // Inject keyframes once
+    if (!document.querySelector('#adia-ripple-keyframes')) {
+      const style = document.createElement('style');
+      style.id = 'adia-ripple-keyframes';
+      style.textContent = `
+        @keyframes adia-ripple-expand {
+          to { transform: scale(1); opacity: 0; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    host.addEventListener('click', onClick);
+
+    return () => {
+      host.removeEventListener('click', onClick);
+      host.style.overflow = '';
+      host.removeAttribute('data-ripple-active');
+    };
+  },
+});

package/traits/roving-tabindex.js

@@ -0,0 +1,67 @@
+import { defineTrait } from './define.js';
+
+export const rovingTabindex = defineTrait({
+  name: 'roving-tabindex',
+  attributes: [],
+  events: [],
+  config: [],
+  setup({ host }) {
+    let activeIndex = 0;
+
+    function getFocusableChildren() {
+      return [...host.children].filter(
+        (el) => !el.hasAttribute('disabled') && el.offsetParent !== null,
+      );
+    }
+
+    function updateTabindices(items) {
+      for (let i = 0; i < items.length; i++) {
+        items[i].setAttribute('tabindex', i === activeIndex ? '0' : '-1');
+      }
+    }
+
+    function onKeyDown(e) {
+      const items = getFocusableChildren();
+      if (items.length === 0) return;
+
+      let nextIndex = activeIndex;
+
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        nextIndex = (activeIndex + 1) % items.length;
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        e.preventDefault();
+        nextIndex = (activeIndex - 1 + items.length) % items.length;
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        nextIndex = 0;
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        nextIndex = items.length - 1;
+      } else {
+        return;
+      }
+
+      activeIndex = nextIndex;
+      updateTabindices(items);
+      items[activeIndex].focus();
+    }
+
+    // Initialize
+    const items = getFocusableChildren();
+    if (items.length > 0) {
+      updateTabindices(items);
+    }
+
+    host.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      host.removeEventListener('keydown', onKeyDown);
+      // Restore tabindex on children
+      const items = getFocusableChildren();
+      for (const item of items) {
+        item.removeAttribute('tabindex');
+      }
+    };
+  },
+});

package/traits/scale-press.js

@@ -0,0 +1,43 @@
+import { defineTrait } from './define.js';
+
+export const scalePress = defineTrait({
+  name: 'scale-press',
+  attributes: ['data-scale-press-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    let savedTransform = '';
+
+    function onPointerDown(e) {
+      if (host.hasAttribute('disabled')) return;
+      savedTransform = host.style.transform;
+      host.style.transform = 'scale(0.95)';
+      host.setAttribute('data-scale-press-active', '');
+    }
+
+    function release() {
+      host.style.transform = savedTransform;
+      host.removeAttribute('data-scale-press-active');
+    }
+
+    function onPointerUp() {
+      if (host.hasAttribute('data-scale-press-active')) release();
+    }
+
+    function onPointerLeave() {
+      if (host.hasAttribute('data-scale-press-active')) release();
+    }
+
+    host.addEventListener('pointerdown', onPointerDown);
+    host.addEventListener('pointerup', onPointerUp);
+    host.addEventListener('pointerleave', onPointerLeave);
+
+    return () => {
+      host.removeEventListener('pointerdown', onPointerDown);
+      host.removeEventListener('pointerup', onPointerUp);
+      host.removeEventListener('pointerleave', onPointerLeave);
+      if (host.hasAttribute('data-scale-press-active')) release();
+      host.removeAttribute('data-scale-press-active');
+    };
+  },
+});

package/traits/scroll-lock.js

@@ -0,0 +1,27 @@
+import { defineTrait } from './define.js';
+
+let lockCount = 0;
+let savedOverflow = '';
+
+export const scrollLock = defineTrait({
+  name: 'scroll-lock',
+  attributes: ['data-scroll-lock-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    if (lockCount === 0) {
+      savedOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+    lockCount++;
+    host.setAttribute('data-scroll-lock-active', '');
+
+    return () => {
+      lockCount--;
+      if (lockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+      }
+      host.removeAttribute('data-scroll-lock-active');
+    };
+  },
+});

package/traits/shimmer-loading.js

@@ -0,0 +1,44 @@
+import { defineTrait } from './define.js';
+
+export const shimmerLoading = defineTrait({
+  name: 'shimmer-loading',
+  attributes: ['data-shimmer-loading-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    const keyframeName = `adia-shimmer-${Math.random().toString(36).slice(2, 8)}`;
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes ${keyframeName} {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(100%); }
+      }
+    `;
+    document.head.appendChild(style);
+
+    const overlay = document.createElement('div');
+    overlay.style.cssText = `
+      position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
+      border-radius: inherit;
+    `;
+
+    const shimmer = document.createElement('div');
+    shimmer.style.cssText = `
+      position: absolute; inset: 0;
+      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
+      animation: ${keyframeName} 1.5s ease-in-out infinite;
+    `;
+
+    overlay.appendChild(shimmer);
+    host.style.position = host.style.position || 'relative';
+    host.appendChild(overlay);
+    host.setAttribute('data-shimmer-loading-active', '');
+
+    return () => {
+      overlay.remove();
+      style.remove();
+      host.removeAttribute('data-shimmer-loading-active');
+    };
+  },
+});

package/traits/snap-to-grid.js

@@ -0,0 +1,28 @@
+import { defineTrait } from './define.js';
+
+export const snapToGrid = defineTrait({
+  name: 'snap-to-grid',
+  attributes: ['data-snap-to-grid-snapped'],
+  events: [],
+  config: ['data-snap-grid'],
+  setup({ host }) {
+    const gridSize = parseInt(host.getAttribute('data-snap-grid'), 10) || 16;
+
+    function onDragEnd(e) {
+      const { x, y } = e.detail || {};
+      if (x == null || y == null) return;
+
+      const snappedX = Math.round(x / gridSize) * gridSize;
+      const snappedY = Math.round(y / gridSize) * gridSize;
+      host.style.translate = `${snappedX}px ${snappedY}px`;
+      host.setAttribute('data-snap-to-grid-snapped', '');
+    }
+
+    host.addEventListener('drag-end', onDragEnd);
+
+    return () => {
+      host.removeEventListener('drag-end', onDragEnd);
+      host.removeAttribute('data-snap-to-grid-snapped');
+    };
+  },
+});

package/traits/sound-feedback.js

@@ -0,0 +1,30 @@
+import { defineTrait } from './define.js';
+
+export const soundFeedback = defineTrait({
+  name: 'sound-feedback',
+  attributes: ['data-sound-feedback-active'],
+  events: [],
+  config: ['data-sound-type'],
+  setup({ host }) {
+    const soundType = host.getAttribute('data-sound-type');
+    let audio = null;
+
+    function onPress() {
+      if (!soundType) return;
+      if (!audio) {
+        audio = new Audio(soundType);
+      }
+      audio.currentTime = 0;
+      audio.play().catch(() => {});
+    }
+
+    host.addEventListener('press', onPress);
+    host.setAttribute('data-sound-feedback-active', '');
+
+    return () => {
+      host.removeEventListener('press', onPress);
+      if (audio) { audio.pause(); audio = null; }
+      host.removeAttribute('data-sound-feedback-active');
+    };
+  },
+});

package/traits/spring-animate.js

@@ -0,0 +1,56 @@
+import { defineTrait } from './define.js';
+
+export const springAnimate = defineTrait({
+  name: 'spring-animate',
+  attributes: ['data-spring-animate-active'],
+  events: [],
+  config: ['data-spring-stiffness', 'data-spring-damping'],
+  setup({ host }) {
+    const stiffness = parseFloat(host.getAttribute('data-spring-stiffness')) || 180;
+    const damping = parseFloat(host.getAttribute('data-spring-damping')) || 12;
+
+    let rafId = null;
+    const target = 0;
+
+    // Read current translate as starting position
+    const cs = getComputedStyle(host);
+    const matrix = new DOMMatrixReadOnly(cs.transform);
+    let position = matrix.m41 || 0;
+    let velocity = 0;
+
+    host.setAttribute('data-spring-animate-active', '');
+
+    let lastTime = performance.now();
+
+    function tick(now) {
+      const dt = Math.min((now - lastTime) / 1000, 0.064);
+      lastTime = now;
+
+      const displacement = position - target;
+      const springForce = -stiffness * displacement;
+      const dampingForce = -damping * velocity;
+      const acceleration = springForce + dampingForce;
+
+      velocity += acceleration * dt;
+      position += velocity * dt;
+
+      host.style.translate = `${position}px 0`;
+
+      if (Math.abs(velocity) < 0.1 && Math.abs(displacement) < 0.1) {
+        host.style.translate = '0 0';
+        host.removeAttribute('data-spring-animate-active');
+        return;
+      }
+
+      rafId = requestAnimationFrame(tick);
+    }
+
+    rafId = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      host.style.translate = '';
+      host.removeAttribute('data-spring-animate-active');
+    };
+  },
+});

package/traits/tilt-hover.js

@@ -0,0 +1,37 @@
+import { defineTrait } from './define.js';
+
+export const tiltHover = defineTrait({
+  name: 'tilt-hover',
+  attributes: ['data-tilt-hover-active'],
+  events: [],
+  config: [],
+  setup({ host }) {
+    function onPointerMove(e) {
+      const rect = host.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width - 0.5;
+      const y = (e.clientY - rect.top) / rect.height - 0.5;
+      const rotateX = -y * 20;
+      const rotateY = x * 20;
+      host.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+      host.setAttribute('data-tilt-hover-active', '');
+    }
+
+    function onPointerLeave() {
+      host.style.transition = 'transform 300ms ease';
+      host.style.transform = '';
+      host.removeAttribute('data-tilt-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.transform = '';
+      host.style.transition = '';
+      host.removeAttribute('data-tilt-hover-active');
+    };
+  },
+});