@adia-ai/web-components 0.0.1

package/traits/tossable.js

@@ -0,0 +1,178 @@
+import { defineTrait } from './define.js';
+
+const FRICTION = 0.92;
+const BOUNCE_FACTOR = -0.6;
+const MIN_VELOCITY = 0.3;
+
+export const tossable = defineTrait({
+  name: 'tossable',
+  attributes: ['data-tossable-flying'],
+  events: ['toss-end'],
+  config: ['data-tossable-bounds'],
+  setup({ host }) {
+    let dragging = false;
+    let flying = 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 getBounds() {
+      // Optional bounding: reads data-tossable-bounds="parent" or defaults to viewport
+      const boundsAttr = host.getAttribute('data-tossable-bounds');
+      if (boundsAttr === 'parent' && host.parentElement) {
+        return host.parentElement.getBoundingClientRect();
+      }
+      return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight };
+    }
+
+    function applyPosition(x, y) {
+      host.style.translate = `${x}px ${y}px`;
+      currentX = x;
+      currentY = y;
+    }
+
+    function animateFling() {
+      velocityX *= FRICTION;
+      velocityY *= FRICTION;
+
+      let nextX = currentX + velocityX;
+      let nextY = currentY + velocityY;
+
+      // Bounce off bounds
+      const bounds = getBounds();
+      const rect = host.getBoundingClientRect();
+      const elW = rect.width;
+      const elH = rect.height;
+
+      // Check horizontal bounds (relative to translate origin)
+      const baseRect = host.offsetParent
+        ? host.offsetParent.getBoundingClientRect()
+        : { left: 0, top: 0 };
+
+      const absLeft = baseRect.left + nextX;
+      const absRight = absLeft + elW;
+      const absTop = baseRect.top + nextY;
+      const absBottom = absTop + elH;
+
+      if (absLeft < bounds.left) {
+        nextX += bounds.left - absLeft;
+        velocityX *= BOUNCE_FACTOR;
+      } else if (absRight > bounds.right) {
+        nextX -= absRight - bounds.right;
+        velocityX *= BOUNCE_FACTOR;
+      }
+
+      if (absTop < bounds.top) {
+        nextY += bounds.top - absTop;
+        velocityY *= BOUNCE_FACTOR;
+      } else if (absBottom > bounds.bottom) {
+        nextY -= absBottom - bounds.bottom;
+        velocityY *= BOUNCE_FACTOR;
+      }
+
+      applyPosition(nextX, nextY);
+
+      if (Math.abs(velocityX) < MIN_VELOCITY && Math.abs(velocityY) < MIN_VELOCITY) {
+        flying = false;
+        host.removeAttribute('data-tossable-flying');
+        host.dispatchEvent(new CustomEvent('toss-end', {
+          bubbles: true,
+          detail: { x: currentX, y: currentY },
+        }));
+        return;
+      }
+
+      rafId = requestAnimationFrame(animateFling);
+    }
+
+    function onPointerDown(e) {
+      if (host.hasAttribute('disabled')) return;
+
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      flying = false;
+      host.removeAttribute('data-tossable-flying');
+
+      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;
+        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) {
+        flying = true;
+        host.setAttribute('data-tossable-flying', '');
+        rafId = requestAnimationFrame(animateFling);
+      } else {
+        host.dispatchEvent(new CustomEvent('toss-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-tossable-flying');
+      host.style.touchAction = '';
+    };
+  },
+});

package/traits/typeahead.js

@@ -0,0 +1,63 @@
+import { defineTrait } from './define.js';
+
+const BUFFER_TIMEOUT = 500;
+
+export const typeahead = defineTrait({
+  name: 'typeahead',
+  attributes: ['data-typeahead-match'],
+  events: ['typeahead-match'],
+  config: [],
+  setup({ host }) {
+    let buffer = '';
+    let timerId = null;
+    let lastMatch = null;
+
+    function clearBuffer() {
+      buffer = '';
+      timerId = null;
+    }
+
+    function clearMatchAttribute() {
+      if (lastMatch) {
+        lastMatch.removeAttribute('data-typeahead-match');
+        lastMatch = null;
+      }
+    }
+
+    function onKeyDown(e) {
+      // Ignore modifier keys, special keys
+      if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+
+      buffer += e.key.toLowerCase();
+
+      if (timerId !== null) clearTimeout(timerId);
+      timerId = setTimeout(clearBuffer, BUFFER_TIMEOUT);
+
+      // Search children by textContent prefix match
+      const children = [...host.children];
+      const match = children.find((child) => {
+        const text = (child.textContent || '').trim().toLowerCase();
+        return text.startsWith(buffer);
+      });
+
+      clearMatchAttribute();
+
+      if (match) {
+        lastMatch = match;
+        match.setAttribute('data-typeahead-match', '');
+        host.dispatchEvent(new CustomEvent('typeahead-match', {
+          bubbles: true,
+          detail: { element: match, query: buffer },
+        }));
+      }
+    }
+
+    host.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      host.removeEventListener('keydown', onKeyDown);
+      if (timerId !== null) clearTimeout(timerId);
+      clearMatchAttribute();
+    };
+  },
+});

package/traits/typewriter.js

@@ -0,0 +1,35 @@
+import { defineTrait } from './define.js';
+
+export const typewriter = defineTrait({
+  name: 'typewriter',
+  attributes: ['data-typewriter-active'],
+  events: ['typewriter-done'],
+  config: ['data-typewriter-speed'],
+  setup({ host }) {
+    const speed = parseInt(host.getAttribute('data-typewriter-speed'), 10) || 50;
+    const originalText = host.textContent;
+    let index = 0;
+    let timerId = null;
+
+    host.textContent = '';
+    host.setAttribute('data-typewriter-active', '');
+
+    function tick() {
+      if (index < originalText.length) {
+        host.textContent = originalText.slice(0, ++index);
+        timerId = setTimeout(tick, speed);
+      } else {
+        host.removeAttribute('data-typewriter-active');
+        host.dispatchEvent(new CustomEvent('typewriter-done', { bubbles: true }));
+      }
+    }
+
+    timerId = setTimeout(tick, speed);
+
+    return () => {
+      if (timerId) clearTimeout(timerId);
+      host.textContent = originalText;
+      host.removeAttribute('data-typewriter-active');
+    };
+  },
+});

package/traits/validation.js

@@ -0,0 +1,118 @@
+import { defineTrait } from './define.js';
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function parseRules(str) {
+  if (!str) return [];
+  return str.split(',').map((r) => r.trim()).filter(Boolean).map((rule) => {
+    const [name, ...rest] = rule.split(':');
+    return { name: name.trim(), param: rest.join(':').trim() };
+  });
+}
+
+function validateValue(value, rules) {
+  const errors = [];
+
+  for (const rule of rules) {
+    switch (rule.name) {
+      case 'required':
+        if (!value || value.trim().length === 0) {
+          errors.push('This field is required');
+        }
+        break;
+
+      case 'minlength': {
+        const min = parseInt(rule.param, 10);
+        if (value.length < min) {
+          errors.push(`Minimum length is ${min}`);
+        }
+        break;
+      }
+
+      case 'maxlength': {
+        const max = parseInt(rule.param, 10);
+        if (value.length > max) {
+          errors.push(`Maximum length is ${max}`);
+        }
+        break;
+      }
+
+      case 'pattern': {
+        const re = new RegExp(rule.param);
+        if (!re.test(value)) {
+          errors.push(`Does not match required pattern`);
+        }
+        break;
+      }
+
+      case 'min': {
+        const min = parseFloat(rule.param);
+        if (parseFloat(value) < min) {
+          errors.push(`Minimum value is ${min}`);
+        }
+        break;
+      }
+
+      case 'max': {
+        const max = parseFloat(rule.param);
+        if (parseFloat(value) > max) {
+          errors.push(`Maximum value is ${max}`);
+        }
+        break;
+      }
+
+      case 'email':
+        if (value && !EMAIL_RE.test(value)) {
+          errors.push('Invalid email address');
+        }
+        break;
+    }
+  }
+
+  return errors;
+}
+
+export const validation = defineTrait({
+  name: 'validation',
+  attributes: ['data-validation-invalid', 'data-validation-valid', 'data-validation-message'],
+  events: ['validated'],
+  config: ['data-validate'],
+  setup({ host }) {
+    function validate() {
+      const rulesStr = host.getAttribute('data-validate') || '';
+      const rules = parseRules(rulesStr);
+      const value = host.value ?? host.getAttribute('value') ?? '';
+      const errors = validateValue(value, rules);
+      const valid = errors.length === 0;
+
+      if (valid) {
+        host.setAttribute('data-validation-valid', '');
+        host.removeAttribute('data-validation-invalid');
+        host.removeAttribute('data-validation-message');
+      } else {
+        host.setAttribute('data-validation-invalid', '');
+        host.setAttribute('data-validation-message', errors[0]);
+        host.removeAttribute('data-validation-valid');
+      }
+
+      host.dispatchEvent(new CustomEvent('validated', {
+        bubbles: true,
+        detail: { valid, errors },
+      }));
+    }
+
+    function onInput() { validate(); }
+    function onChange() { validate(); }
+
+    host.addEventListener('input', onInput);
+    host.addEventListener('change', onChange);
+
+    return () => {
+      host.removeEventListener('input', onInput);
+      host.removeEventListener('change', onChange);
+      host.removeAttribute('data-validation-invalid');
+      host.removeAttribute('data-validation-valid');
+      host.removeAttribute('data-validation-message');
+    };
+  },
+});