agex 0.2.6 → 0.2.7

package/assets/assets/assets/effects.js

@@ -1,1586 +0,0 @@
-(() => {
-  if (window.__agexEffects) return;
-
-  const EFFECTS_ID = 'agex-effects';
-  
-  // Utility functions
-  const utils = {
-    getElement(selector) {
-      return document.querySelector(selector);
-    },
-    
-    getElements(selector) {
-      return Array.from(document.querySelectorAll(selector));
-    },
-    
-    getRect(selector) {
-      const el = this.getElement(selector);
-      return el ? el.getBoundingClientRect() : null;
-    },
-    
-    createElement(tag, styles, id) {
-      const el = document.createElement(tag);
-      if (id) el.id = id;
-      if (styles) Object.assign(el.style, styles);
-      el.classList.add(EFFECTS_ID);
-      return el;
-    },
-    
-    removeElements(selector) {
-      document.querySelectorAll(selector).forEach(el => el.remove());
-    },
-    
-    easing: {
-      linear: t => t,
-      easeIn: t => t * t,
-      easeOut: t => t * (2 - t),
-      easeInOut: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
-      bounce: t => {
-        if (t < 1/2.75) return 7.5625 * t * t;
-        if (t < 2/2.75) return 7.5625 * (t -= 1.5/2.75) * t + 0.75;
-        if (t < 2.5/2.75) return 7.5625 * (t -= 2.25/2.75) * t + 0.9375;
-        return 7.5625 * (t -= 2.625/2.75) * t + 0.984375;
-      }
-    },
-    
-    animate(duration, callback, easingName = 'easeInOut') {
-      return new Promise(resolve => {
-        const start = performance.now();
-        const easingFn = this.easing[easingName] || this.easing.easeInOut;
-        
-        const step = (now) => {
-          const elapsed = now - start;
-          const progress = Math.min(elapsed / duration, 1);
-          callback(easingFn(progress));
-          if (progress < 1) {
-            requestAnimationFrame(step);
-          } else {
-            resolve();
-          }
-        };
-        requestAnimationFrame(step);
-      });
-    },
-    
-    wait(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
-    }
-  };
-
-  // Inject base styles
-  const injectStyles = () => {
-    if (document.getElementById(`${EFFECTS_ID}-styles`)) return;
-    
-    const style = document.createElement('style');
-    style.id = `${EFFECTS_ID}-styles`;
-    style.textContent = `
-      .${EFFECTS_ID} {
-        pointer-events: none;
-        z-index: 2147483640;
-      }
-      .${EFFECTS_ID}-highlight {
-        position: absolute;
-        box-sizing: border-box;
-        transition: all 0.3s ease;
-      }
-      .${EFFECTS_ID}-highlight.border {
-        border: 4px solid var(--color, #ff4444);
-        box-shadow: 0 0 0 2px rgba(0,0,0,0.8), 0 0 12px var(--color, #ff4444);
-      }
-      .${EFFECTS_ID}-highlight.glow {
-        box-shadow: 0 0 20px var(--color, #ff4444), inset 0 0 20px var(--color, #ff4444);
-        animation: ${EFFECTS_ID}-glow 1s ease-in-out 3;
-      }
-      @keyframes ${EFFECTS_ID}-glow {
-        0%, 100% { box-shadow: 0 0 20px var(--color, #ff4444), inset 0 0 20px var(--color, #ff4444); }
-        50% { box-shadow: 0 0 35px var(--color, #ff4444), inset 0 0 35px var(--color, #ff4444); }
-      }
-      .${EFFECTS_ID}-highlight.pulse {
-        animation: ${EFFECTS_ID}-pulse 1s ease-in-out infinite;
-        border: 3px solid var(--color, #ff4444);
-      }
-      @keyframes ${EFFECTS_ID}-pulse {
-        0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.7; transform: scale(1.02); }
-      }
-      .${EFFECTS_ID}-annotation {
-        position: absolute;
-        background: rgba(0, 0, 0, 0.9);
-        color: white;
-        padding: 8px 14px;
-        border-radius: 4px;
-        border: 3px solid var(--color, #ff4444);
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 14px;
-        font-weight: 600;
-        letter-spacing: 0.5px;
-        white-space: nowrap;
-        box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
-        text-transform: uppercase;
-      }
-      .${EFFECTS_ID}-annotation::after {
-        content: '';
-        position: absolute;
-        border: 6px solid transparent;
-      }
-      .${EFFECTS_ID}-annotation.arrow-bottom::after {
-        bottom: -12px; left: 50%; transform: translateX(-50%);
-        border-top-color: var(--color, #ff4444);
-      }
-      .${EFFECTS_ID}-annotation.arrow-top::after {
-        top: -12px; left: 50%; transform: translateX(-50%);
-        border-bottom-color: var(--color, #ff4444);
-      }
-      .${EFFECTS_ID}-annotation.arrow-left::after {
-        left: -12px; top: 50%; transform: translateY(-50%);
-        border-right-color: var(--color, #ff4444);
-      }
-      .${EFFECTS_ID}-annotation.arrow-right::after {
-        right: -12px; top: 50%; transform: translateY(-50%);
-        border-left-color: var(--color, #ff4444);
-      }
-      .${EFFECTS_ID}-spotlight-overlay {
-        position: fixed;
-        top: 0; left: 0; right: 0; bottom: 0;
-        pointer-events: none;
-        transition: opacity 0.3s ease;
-      }
-      .${EFFECTS_ID}-overlay {
-        position: fixed;
-        font-family: system-ui, sans-serif;
-        transition: all 0.3s ease;
-      }
-      .${EFFECTS_ID}-subtitle {
-        position: fixed;
-        left: 50%;
-        transform: translateX(-50%);
-        background: rgba(0, 0, 0, 0.8);
-        color: white;
-        padding: 12px 24px;
-        border-radius: 8px;
-        font-size: 18px;
-        max-width: 80%;
-        text-align: center;
-      }
-      .${EFFECTS_ID}-drawing-canvas {
-        position: fixed;
-        top: 0; left: 0;
-        width: 100%; height: 100%;
-        pointer-events: none;
-      }
-      .${EFFECTS_ID}-transition {
-        position: fixed;
-        top: 0; left: 0; right: 0; bottom: 0;
-        z-index: 2147483645;
-      }
-    `;
-    document.head.appendChild(style);
-  };
-
-  // Effect handlers
-  const effects = {
-    // HIGHLIGHT
-    highlight: {
-      add(selector, { color = '#ff4444', style = 'border', duration } = {}) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        const rect = el.getBoundingClientRect();
-        const highlight = utils.createElement('div', {
-          position: 'absolute',
-          left: `${rect.left + window.scrollX - 4}px`,
-          top: `${rect.top + window.scrollY - 4}px`,
-          width: `${rect.width + 8}px`,
-          height: `${rect.height + 8}px`,
-          borderRadius: '4px',
-        });
-        highlight.classList.add(`${EFFECTS_ID}-highlight`, style);
-        highlight.style.setProperty('--color', color);
-        highlight.dataset.selector = selector;
-        document.body.appendChild(highlight);
-        
-        if (duration) {
-          setTimeout(() => highlight.remove(), duration);
-        }
-        return true;
-      },
-      
-      clear() {
-        utils.removeElements(`.${EFFECTS_ID}-highlight`);
-      }
-    },
-
-    // ANNOTATION
-    annotation: {
-      add(selector, { text, position = 'top', color = '#333', arrow = true } = {}) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        const rect = el.getBoundingClientRect();
-        const annotation = utils.createElement('div');
-        annotation.classList.add(`${EFFECTS_ID}-annotation`);
-        if (arrow) annotation.classList.add(`arrow-${position === 'top' ? 'bottom' : position === 'bottom' ? 'top' : position === 'left' ? 'right' : 'left'}`);
-        annotation.style.setProperty('--color', color);
-        annotation.textContent = text;
-        document.body.appendChild(annotation);
-        
-        const aRect = annotation.getBoundingClientRect();
-        const positions = {
-          top: { left: rect.left + rect.width/2 - aRect.width/2, top: rect.top - aRect.height - 16 },
-          bottom: { left: rect.left + rect.width/2 - aRect.width/2, top: rect.bottom + 16 },
-          left: { left: rect.left - aRect.width - 16, top: rect.top + rect.height/2 - aRect.height/2 },
-          right: { left: rect.right + 16, top: rect.top + rect.height/2 - aRect.height/2 }
-        };
-        const pos = positions[position];
-        annotation.style.left = `${pos.left + window.scrollX}px`;
-        annotation.style.top = `${pos.top + window.scrollY}px`;
-        annotation.style.position = 'absolute';
-        
-        return true;
-      },
-      
-      clear() {
-        utils.removeElements(`.${EFFECTS_ID}-annotation`);
-      }
-    },
-
-    // SPOTLIGHT
-    spotlight: {
-      show(selector, { opacity = 0.7, label = '' } = {}) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        this.clear();
-        const rect = el.getBoundingClientRect();
-        
-        const overlay = utils.createElement('div', {}, `${EFFECTS_ID}-spotlight`);
-        overlay.classList.add(`${EFFECTS_ID}-spotlight-overlay`);
-        overlay.style.background = `radial-gradient(ellipse at ${rect.left + rect.width/2}px ${rect.top + rect.height/2}px, transparent ${Math.max(rect.width, rect.height)/2 + 20}px, rgba(0,0,0,${opacity}) ${Math.max(rect.width, rect.height)/2 + 80}px)`;
-        document.body.appendChild(overlay);
-        
-        // Add label if provided
-        if (label) {
-          const labelEl = utils.createElement('div', {
-            position: 'absolute',
-            left: `${rect.left + window.scrollX + rect.width/2}px`,
-            top: `${rect.bottom + window.scrollY + 16}px`,
-            transform: 'translateX(-50%)',
-            background: 'rgba(255,255,255,0.95)',
-            color: '#333',
-            padding: '8px 16px',
-            borderRadius: '6px',
-            fontFamily: 'system-ui, sans-serif',
-            fontSize: '14px',
-            fontWeight: '600',
-            boxShadow: '0 2px 12px rgba(0,0,0,0.3)',
-            whiteSpace: 'nowrap',
-            zIndex: '2147483641'
-          }, `${EFFECTS_ID}-spotlight-label`);
-          labelEl.textContent = label;
-          document.body.appendChild(labelEl);
-        }
-        
-        return true;
-      },
-      
-      blur(amount = 8, excludeSelector) {
-        const exclude = excludeSelector ? utils.getElement(excludeSelector) : null;
-        document.body.style.filter = `blur(${amount}px)`;
-        if (exclude) {
-          exclude.style.filter = 'none';
-          exclude.style.position = 'relative';
-          exclude.style.zIndex = '2147483646';
-        }
-      },
-      
-      clearBlur() {
-        document.body.style.filter = '';
-      },
-      
-      clear() {
-        utils.removeElements(`#${EFFECTS_ID}-spotlight`);
-        utils.removeElements(`#${EFFECTS_ID}-spotlight-label`);
-      }
-    },
-
-    // ZOOM
-    zoom: {
-      currentScale: 1,
-      
-      async toElement(selector, scale = 1.5, duration = 500) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        const rect = el.getBoundingClientRect();
-        const centerX = rect.left + rect.width/2;
-        const centerY = rect.top + rect.height/2;
-        
-        await utils.animate(duration, (p) => {
-          const currentScale = 1 + (scale - 1) * p;
-          document.body.style.transform = `scale(${currentScale})`;
-          document.body.style.transformOrigin = `${centerX}px ${centerY}px`;
-        });
-        
-        this.currentScale = scale;
-        return true;
-      },
-      
-      async toArea(x, y, scale = 1.5, duration = 500) {
-        const centerX = (x / 100) * window.innerWidth;
-        const centerY = (y / 100) * window.innerHeight;
-        
-        await utils.animate(duration, (p) => {
-          const currentScale = 1 + (scale - 1) * p;
-          document.body.style.transform = `scale(${currentScale})`;
-          document.body.style.transformOrigin = `${centerX}px ${centerY}px`;
-        });
-        
-        this.currentScale = scale;
-      },
-      
-      async reset(duration = 500) {
-        const startScale = this.currentScale;
-        await utils.animate(duration, (p) => {
-          const scale = startScale - (startScale - 1) * p;
-          document.body.style.transform = `scale(${scale})`;
-        });
-        document.body.style.transform = '';
-        this.currentScale = 1;
-      }
-    },
-
-    // CURSOR
-    cursor: {
-      configure({ size = 'large', clickRipple = true, trail = false } = {}) {
-        const cursor = document.getElementById('agex-cursor');
-        if (!cursor) return;
-        
-        const sizes = { normal: 16, large: 24, 'extra-large': 32 };
-        const s = sizes[size] || 24;
-        cursor.style.width = `${s}px`;
-        cursor.style.height = `${s}px`;
-        
-        cursor.dataset.clickRipple = clickRipple;
-        cursor.dataset.trail = trail;
-      },
-      
-      async moveTo(x, y, duration = 500, easing = 'easeInOut') {
-        const cursor = document.getElementById('agex-cursor');
-        if (!cursor) return;
-        
-        const startX = parseFloat(cursor.style.left) || 0;
-        const startY = parseFloat(cursor.style.top) || 0;
-        
-        await utils.animate(duration, (p) => {
-          cursor.style.left = `${startX + (x - startX) * p}px`;
-          cursor.style.top = `${startY + (y - startY) * p}px`;
-          cursor.style.opacity = '1';
-        }, easing);
-      },
-      
-      async moveToElement(selector, duration = 500, easing = 'easeInOut', offsetX = 0, offsetY = 0) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        const rect = el.getBoundingClientRect();
-        const x = rect.left + rect.width/2 + offsetX;
-        const y = rect.top + rect.height/2 + offsetY;
-        
-        await this.moveTo(x, y, duration, easing);
-        return true;
-      },
-      
-      showClick(x, y, color = '#ff4444') {
-        const ripple = utils.createElement('div', {
-          position: 'fixed',
-          left: `${x}px`,
-          top: `${y}px`,
-          width: '0',
-          height: '0',
-          borderRadius: '50%',
-          background: color,
-          opacity: '0.5',
-          transform: 'translate(-50%, -50%)',
-          transition: 'all 0.4s ease-out'
-        });
-        document.body.appendChild(ripple);
-        
-        requestAnimationFrame(() => {
-          ripple.style.width = '60px';
-          ripple.style.height = '60px';
-          ripple.style.opacity = '0';
-        });
-        
-        setTimeout(() => ripple.remove(), 400);
-      },
-      
-      async wiggle(selector, intensity = 5, duration = 500) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        await this.moveToElement(selector, duration/2);
-        
-        const cursor = document.getElementById('agex-cursor');
-        if (!cursor) return false;
-        
-        const baseX = parseFloat(cursor.style.left);
-        const baseY = parseFloat(cursor.style.top);
-        
-        for (let i = 0; i < 3; i++) {
-          await utils.animate(100, (p) => {
-            cursor.style.left = `${baseX + Math.sin(p * Math.PI * 2) * intensity}px`;
-          });
-        }
-        cursor.style.left = `${baseX}px`;
-        return true;
-      },
-      
-      async drag(fromSelector, toSelector, duration = 800) {
-        const from = utils.getElement(fromSelector);
-        const to = utils.getElement(toSelector);
-        if (!from || !to) return false;
-        
-        await this.moveToElement(fromSelector, duration/3);
-        this.showClick(parseFloat(document.getElementById('agex-cursor')?.style.left || '0'), 
-                       parseFloat(document.getElementById('agex-cursor')?.style.top || '0'));
-        await utils.wait(100);
-        await this.moveToElement(toSelector, duration/2);
-        
-        return true;
-      },
-      
-      async followPath(points, duration = 1000) {
-        if (!points || points.length < 2) return false;
-        
-        const segmentDuration = duration / (points.length - 1);
-        for (let i = 0; i < points.length - 1; i++) {
-          await this.moveTo(points[i + 1].x, points[i + 1].y, segmentDuration);
-        }
-        return true;
-      }
-    },
-
-    // OVERLAY
-    overlay: {
-      showStep(step, total, text) {
-        this.clearStep();
-        const badge = utils.createElement('div', {
-          position: 'fixed',
-          top: '20px',
-          right: '20px',
-          background: '#333',
-          color: 'white',
-          padding: '8px 16px',
-          borderRadius: '20px',
-          fontFamily: 'system-ui, sans-serif',
-          fontSize: '14px'
-        }, `${EFFECTS_ID}-step`);
-        badge.classList.add(`${EFFECTS_ID}-overlay`);
-        badge.textContent = text || `Step ${step} of ${total}`;
-        document.body.appendChild(badge);
-      },
-      
-      clearStep() {
-        utils.removeElements(`#${EFFECTS_ID}-step`);
-      },
-      
-      showTitle(title, subtitle, duration = 3000, bgColor = '#1a1a2e', textColor = 'white') {
-        const card = utils.createElement('div', {
-          position: 'fixed',
-          top: '0', left: '0', right: '0', bottom: '0',
-          background: bgColor,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          opacity: '0',
-          transition: 'opacity 0.5s ease'
-        }, `${EFFECTS_ID}-title`);
-        card.classList.add(`${EFFECTS_ID}-transition`);
-        
-        const h1 = document.createElement('h1');
-        h1.style.cssText = `color: ${textColor}; font-size: 48px; margin: 0; font-family: system-ui, sans-serif;`;
-        h1.textContent = title;
-        card.appendChild(h1);
-        
-        if (subtitle) {
-          const h2 = document.createElement('h2');
-          h2.style.cssText = `color: ${textColor}; font-size: 24px; margin-top: 16px; opacity: 0.8; font-family: system-ui, sans-serif;`;
-          h2.textContent = subtitle;
-          card.appendChild(h2);
-        }
-        
-        document.body.appendChild(card);
-        requestAnimationFrame(() => card.style.opacity = '1');
-        
-        setTimeout(() => {
-          card.style.opacity = '0';
-          setTimeout(() => card.remove(), 500);
-        }, duration);
-      },
-      
-      showLowerThird(title, subtitle, duration = 5000, color = '#0066ff') {
-        this.clearLowerThird();
-        const lower = utils.createElement('div', {
-          position: 'fixed',
-          bottom: '60px',
-          left: '40px',
-          background: `linear-gradient(90deg, ${color}, transparent)`,
-          padding: '16px 40px 16px 20px',
-          borderLeft: `4px solid ${color}`,
-          transform: 'translateX(-100%)',
-          transition: 'transform 0.5s ease'
-        }, `${EFFECTS_ID}-lower-third`);
-        lower.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        const t = document.createElement('div');
-        t.style.cssText = 'color: white; font-size: 20px; font-weight: bold; font-family: system-ui, sans-serif;';
-        t.textContent = title;
-        lower.appendChild(t);
-        
-        if (subtitle) {
-          const s = document.createElement('div');
-          s.style.cssText = 'color: white; font-size: 14px; opacity: 0.9; margin-top: 4px; font-family: system-ui, sans-serif;';
-          s.textContent = subtitle;
-          lower.appendChild(s);
-        }
-        
-        document.body.appendChild(lower);
-        requestAnimationFrame(() => lower.style.transform = 'translateX(0)');
-        
-        if (duration) {
-          setTimeout(() => {
-            lower.style.transform = 'translateX(-100%)';
-            setTimeout(() => lower.remove(), 500);
-          }, duration);
-        }
-      },
-      
-      clearLowerThird() {
-        utils.removeElements(`#${EFFECTS_ID}-lower-third`);
-      },
-      
-      showWatermark(text, position = 'bottom-right', logoUrl) {
-        this.clearWatermark();
-        const positions = {
-          'top-left': { top: '20px', left: '20px' },
-          'top-right': { top: '20px', right: '20px' },
-          'bottom-left': { bottom: '20px', left: '20px' },
-          'bottom-right': { bottom: '20px', right: '20px' }
-        };
-        
-        const watermark = utils.createElement('div', {
-          position: 'fixed',
-          ...positions[position],
-          color: 'rgba(255,255,255,0.5)',
-          fontSize: '14px',
-          fontFamily: 'system-ui, sans-serif'
-        }, `${EFFECTS_ID}-watermark`);
-        watermark.classList.add(`${EFFECTS_ID}-overlay`);
-        watermark.textContent = text;
-        document.body.appendChild(watermark);
-      },
-      
-      clearWatermark() {
-        utils.removeElements(`#${EFFECTS_ID}-watermark`);
-      },
-      
-      showKeystroke(keys, duration = 1500) {
-        const kbd = utils.createElement('div', {
-          position: 'fixed',
-          bottom: '40px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          display: 'flex',
-          gap: '8px',
-          background: 'rgba(0,0,0,0.8)',
-          padding: '12px 20px',
-          borderRadius: '8px'
-        }, `${EFFECTS_ID}-keystroke`);
-        kbd.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        keys.forEach((key, i) => {
-          if (i > 0) {
-            const plus = document.createElement('span');
-            plus.textContent = '+';
-            plus.style.cssText = 'color: rgba(255,255,255,0.5); font-size: 18px;';
-            kbd.appendChild(plus);
-          }
-          const k = document.createElement('span');
-          k.style.cssText = 'background: #444; color: white; padding: 8px 12px; border-radius: 4px; font-family: system-ui, sans-serif; font-size: 16px; border: 1px solid #666;';
-          k.textContent = key;
-          kbd.appendChild(k);
-        });
-        
-        document.body.appendChild(kbd);
-        setTimeout(() => kbd.remove(), duration);
-      },
-      
-      showProgress(percent) {
-        let bar = document.getElementById(`${EFFECTS_ID}-progress`);
-        if (!bar) {
-          bar = utils.createElement('div', {
-            position: 'fixed',
-            top: '0',
-            left: '0',
-            height: '4px',
-            background: '#0066ff',
-            width: '0',
-            transition: 'width 0.3s ease'
-          }, `${EFFECTS_ID}-progress`);
-          bar.classList.add(`${EFFECTS_ID}-overlay`);
-          document.body.appendChild(bar);
-        }
-        bar.style.width = `${percent}%`;
-      },
-      
-      clearProgress() {
-        utils.removeElements(`#${EFFECTS_ID}-progress`);
-      },
-      
-      async countdown(seconds = 3) {
-        for (let i = seconds; i > 0; i--) {
-          const num = utils.createElement('div', {
-            position: 'fixed',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) scale(0)',
-            fontSize: '120px',
-            fontWeight: 'bold',
-            color: 'white',
-            textShadow: '0 0 40px rgba(0,0,0,0.5)',
-            transition: 'transform 0.3s ease, opacity 0.3s ease',
-            fontFamily: 'system-ui, sans-serif'
-          });
-          num.classList.add(`${EFFECTS_ID}-overlay`);
-          num.textContent = i;
-          document.body.appendChild(num);
-          
-          requestAnimationFrame(() => num.style.transform = 'translate(-50%, -50%) scale(1)');
-          await utils.wait(700);
-          num.style.opacity = '0';
-          num.style.transform = 'translate(-50%, -50%) scale(1.5)';
-          await utils.wait(300);
-          num.remove();
-        }
-      }
-    },
-
-    // DRAWING
-    drawing: {
-      getCanvas() {
-        let canvas = document.getElementById(`${EFFECTS_ID}-canvas`);
-        if (!canvas) {
-          canvas = document.createElement('canvas');
-          canvas.id = `${EFFECTS_ID}-canvas`;
-          canvas.classList.add(`${EFFECTS_ID}-drawing-canvas`, EFFECTS_ID);
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-          canvas.style.cssText = 'position: fixed; top: 0; left: 0; pointer-events: none; z-index: 2147483641;';
-          document.body.appendChild(canvas);
-        }
-        return canvas;
-      },
-      
-      async circle(selector, color = '#ff4444', label = '', strokeWidth = 3, duration = 800) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        const rect = el.getBoundingClientRect();
-        const canvas = this.getCanvas();
-        const ctx = canvas.getContext('2d');
-        
-        const cx = rect.left + rect.width/2;
-        const cy = rect.top + rect.height/2;
-        const radius = Math.max(rect.width, rect.height)/2 + 10;
-        
-        await utils.animate(duration, (p) => {
-          ctx.clearRect(cx - radius - 10, cy - radius - 10, radius * 2 + 20, radius * 2 + 20);
-          ctx.beginPath();
-          ctx.arc(cx, cy, radius, -Math.PI/2, -Math.PI/2 + Math.PI * 2 * p);
-          ctx.strokeStyle = color;
-          ctx.lineWidth = strokeWidth;
-          ctx.stroke();
-        });
-        
-        // Add label if provided
-        if (label) {
-          const labelEl = utils.createElement('div', {
-            position: 'absolute',
-            left: `${cx + window.scrollX}px`,
-            top: `${cy + window.scrollY + radius + 12}px`,
-            transform: 'translateX(-50%)',
-            background: color,
-            color: 'white',
-            padding: '6px 12px',
-            borderRadius: '4px',
-            fontFamily: 'system-ui, sans-serif',
-            fontSize: '14px',
-            fontWeight: '600',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-            whiteSpace: 'nowrap',
-            zIndex: '2147483642'
-          }, `${EFFECTS_ID}-circle-label-${Date.now()}`);
-          labelEl.classList.add(`${EFFECTS_ID}-circle-label`);
-          labelEl.textContent = label;
-          document.body.appendChild(labelEl);
-        }
-        
-        return true;
-      },
-      
-      async arrow(fromX, fromY, toX, toY, color = '#ff4444', strokeWidth = 3, duration = 600) {
-        const canvas = this.getCanvas();
-        const ctx = canvas.getContext('2d');
-        
-        await utils.animate(duration, (p) => {
-          const currentX = fromX + (toX - fromX) * p;
-          const currentY = fromY + (toY - fromY) * p;
-          
-          ctx.beginPath();
-          ctx.moveTo(fromX, fromY);
-          ctx.lineTo(currentX, currentY);
-          ctx.strokeStyle = color;
-          ctx.lineWidth = strokeWidth;
-          ctx.stroke();
-          
-          if (p === 1) {
-            const angle = Math.atan2(toY - fromY, toX - fromX);
-            const headLen = 15;
-            ctx.beginPath();
-            ctx.moveTo(toX, toY);
-            ctx.lineTo(toX - headLen * Math.cos(angle - Math.PI/6), toY - headLen * Math.sin(angle - Math.PI/6));
-            ctx.moveTo(toX, toY);
-            ctx.lineTo(toX - headLen * Math.cos(angle + Math.PI/6), toY - headLen * Math.sin(angle + Math.PI/6));
-            ctx.stroke();
-          }
-        });
-      },
-      
-      async arrowBetween(fromSelector, toSelector, color = '#ff4444', strokeWidth = 3, duration = 600) {
-        const from = utils.getElement(fromSelector);
-        const to = utils.getElement(toSelector);
-        if (!from || !to) return false;
-        
-        const fromRect = from.getBoundingClientRect();
-        const toRect = to.getBoundingClientRect();
-        
-        await this.arrow(
-          fromRect.left + fromRect.width/2,
-          fromRect.top + fromRect.height/2,
-          toRect.left + toRect.width/2,
-          toRect.top + toRect.height/2,
-          color, strokeWidth, duration
-        );
-        return true;
-      },
-      
-      freehand(points, color = '#ff4444', strokeWidth = 3) {
-        if (!points || points.length < 2) return;
-        
-        const canvas = this.getCanvas();
-        const ctx = canvas.getContext('2d');
-        
-        ctx.beginPath();
-        ctx.moveTo(points[0].x, points[0].y);
-        for (let i = 1; i < points.length; i++) {
-          ctx.lineTo(points[i].x, points[i].y);
-        }
-        ctx.strokeStyle = color;
-        ctx.lineWidth = strokeWidth;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        ctx.stroke();
-      },
-      
-      clear() {
-        const canvas = document.getElementById(`${EFFECTS_ID}-canvas`);
-        if (canvas) {
-          const ctx = canvas.getContext('2d');
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-        }
-        utils.removeElements(`.${EFFECTS_ID}-circle-label`);
-      }
-    },
-
-    // TRANSITIONS
-    transitions: {
-      async fade(color = '#000', duration = 500, hold = 1000) {
-        const overlay = utils.createElement('div', {
-          position: 'fixed',
-          top: '0', left: '0', right: '0', bottom: '0',
-          background: color,
-          opacity: '0',
-          transition: `opacity ${duration}ms ease`
-        }, `${EFFECTS_ID}-fade`);
-        overlay.classList.add(`${EFFECTS_ID}-transition`);
-        document.body.appendChild(overlay);
-        
-        requestAnimationFrame(() => overlay.style.opacity = '1');
-        await utils.wait(duration + hold);
-        overlay.style.opacity = '0';
-        await utils.wait(duration);
-        overlay.remove();
-      },
-      
-      async wipe(direction = 'left', color = '#000', duration = 800) {
-        const overlay = utils.createElement('div', {
-          position: 'fixed',
-          top: '0', left: '0', right: '0', bottom: '0',
-          background: color,
-          transition: `transform ${duration/2}ms ease`
-        }, `${EFFECTS_ID}-wipe`);
-        overlay.classList.add(`${EFFECTS_ID}-transition`);
-        
-        const transforms = {
-          left: ['translateX(-100%)', 'translateX(0)', 'translateX(100%)'],
-          right: ['translateX(100%)', 'translateX(0)', 'translateX(-100%)'],
-          up: ['translateY(100%)', 'translateY(0)', 'translateY(-100%)'],
-          down: ['translateY(-100%)', 'translateY(0)', 'translateY(100%)']
-        };
-        
-        overlay.style.transform = transforms[direction][0];
-        document.body.appendChild(overlay);
-        
-        await utils.wait(50);
-        overlay.style.transform = transforms[direction][1];
-        await utils.wait(duration/2);
-        overlay.style.transform = transforms[direction][2];
-        await utils.wait(duration/2);
-        overlay.remove();
-      },
-      
-      async chapter(num, title, duration = 3000, bgColor = '#1a1a2e', textColor = 'white') {
-        effects.overlay.showTitle(`Chapter ${num}`, title, duration, bgColor, textColor);
-        await utils.wait(duration + 500);
-      },
-      
-      slowMotion(show) {
-        if (show) {
-          const indicator = utils.createElement('div', {
-            position: 'fixed',
-            top: '20px',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: 'rgba(255,0,0,0.8)',
-            color: 'white',
-            padding: '8px 16px',
-            borderRadius: '4px',
-            fontSize: '14px',
-            fontFamily: 'system-ui, sans-serif'
-          }, `${EFFECTS_ID}-slow-motion`);
-          indicator.classList.add(`${EFFECTS_ID}-overlay`);
-          indicator.textContent = '◉ SLOW MOTION';
-          document.body.appendChild(indicator);
-        } else {
-          utils.removeElements(`#${EFFECTS_ID}-slow-motion`);
-        }
-      }
-    },
-
-    // ATTENTION
-    attention: {
-      magnify(selector, scale = 2, size = 150) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        this.clearMagnify();
-        const rect = el.getBoundingClientRect();
-        
-        const magnifier = utils.createElement('div', {
-          position: 'absolute',
-          left: `${rect.right + window.scrollX + 20}px`,
-          top: `${rect.top + window.scrollY}px`,
-          width: `${size}px`,
-          height: `${size}px`,
-          borderRadius: '50%',
-          border: '3px solid #333',
-          overflow: 'hidden',
-          boxShadow: '0 4px 20px rgba(0,0,0,0.3)'
-        }, `${EFFECTS_ID}-magnifier`);
-        magnifier.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        const inner = document.createElement('div');
-        inner.style.cssText = `transform: scale(${scale}); transform-origin: center;`;
-        inner.innerHTML = el.outerHTML;
-        magnifier.appendChild(inner);
-        
-        document.body.appendChild(magnifier);
-        return true;
-      },
-      
-      clearMagnify() {
-        utils.removeElements(`#${EFFECTS_ID}-magnifier`);
-      },
-      
-      numberSteps(selectors, startNum = 1) {
-        let found = false;
-        selectors.forEach((sel, i) => {
-          const el = utils.getElement(sel);
-          if (!el) return;
-          found = true;
-          
-          const rect = el.getBoundingClientRect();
-          const badge = utils.createElement('div', {
-            position: 'absolute',
-            left: `${rect.left + window.scrollX - 12}px`,
-            top: `${rect.top + window.scrollY - 12}px`,
-            width: '24px',
-            height: '24px',
-            borderRadius: '50%',
-            background: '#0066ff',
-            color: 'white',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '14px',
-            fontWeight: 'bold',
-            fontFamily: 'system-ui, sans-serif'
-          });
-          badge.classList.add(`${EFFECTS_ID}-number-step`);
-          badge.textContent = startNum + i;
-          document.body.appendChild(badge);
-        });
-        return found;
-      },
-      
-      clearNumberSteps() {
-        utils.removeElements(`.${EFFECTS_ID}-number-step`);
-      },
-      
-      comparison(beforeSel, afterSel, orientation = 'horizontal') {
-        // Simplified: just highlight both with labels
-        const before = utils.getElement(beforeSel);
-        const after = utils.getElement(afterSel);
-        if (!before || !after) return false;
-        
-        effects.annotation.add(beforeSel, { text: 'BEFORE', position: 'top', color: '#cc0000' });
-        effects.annotation.add(afterSel, { text: 'AFTER', position: 'top', color: '#00cc00' });
-        return true;
-      },
-      
-      clearComparison() {
-        effects.annotation.clear();
-      }
-    },
-
-    // INFO
-    info: {
-      showTooltip(selector, text, position = 'top') {
-        return effects.annotation.add(selector, { text, position, color: '#333' });
-      },
-      
-      clearTooltip() {
-        effects.annotation.clear();
-      },
-      
-      showCodeSnippet(code, language, title) {
-        this.clearCodeSnippet();
-        const snippet = utils.createElement('div', {
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          background: '#1e1e1e',
-          borderRadius: '8px',
-          padding: '16px',
-          maxWidth: '80%',
-          maxHeight: '60%',
-          overflow: 'auto',
-          boxShadow: '0 4px 30px rgba(0,0,0,0.4)'
-        }, `${EFFECTS_ID}-code-snippet`);
-        snippet.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        if (title) {
-          const t = document.createElement('div');
-          t.style.cssText = 'color: #888; font-size: 12px; margin-bottom: 8px; font-family: system-ui, sans-serif;';
-          t.textContent = title + (language ? ` (${language})` : '');
-          snippet.appendChild(t);
-        }
-        
-        const pre = document.createElement('pre');
-        pre.style.cssText = 'margin: 0; color: #d4d4d4; font-family: monospace; font-size: 14px; white-space: pre-wrap;';
-        pre.textContent = code;
-        snippet.appendChild(pre);
-        
-        document.body.appendChild(snippet);
-      },
-      
-      clearCodeSnippet() {
-        utils.removeElements(`#${EFFECTS_ID}-code-snippet`);
-      },
-      
-      async showStatsCounter(value, label, duration = 1500, prefix = '', suffix = '') {
-        this.clearStatsCounter();
-        const counter = utils.createElement('div', {
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          textAlign: 'center'
-        }, `${EFFECTS_ID}-stats-counter`);
-        counter.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        const num = document.createElement('div');
-        num.style.cssText = 'font-size: 72px; font-weight: bold; color: #333; font-family: system-ui, sans-serif;';
-        counter.appendChild(num);
-        
-        if (label) {
-          const l = document.createElement('div');
-          l.style.cssText = 'font-size: 18px; color: #666; margin-top: 8px; font-family: system-ui, sans-serif;';
-          l.textContent = label;
-          counter.appendChild(l);
-        }
-        
-        document.body.appendChild(counter);
-        
-        await utils.animate(duration, (p) => {
-          num.textContent = prefix + Math.round(value * p).toLocaleString() + suffix;
-        });
-      },
-      
-      clearStatsCounter() {
-        utils.removeElements(`#${EFFECTS_ID}-stats-counter`);
-      },
-      
-      showChecklist(items) {
-        this.clearChecklist();
-        const list = utils.createElement('div', {
-          position: 'fixed',
-          top: '20px',
-          right: '20px',
-          background: 'white',
-          borderRadius: '8px',
-          padding: '16px',
-          boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-          minWidth: '200px'
-        }, `${EFFECTS_ID}-checklist`);
-        list.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        items.forEach((item, i) => {
-          const row = document.createElement('div');
-          row.style.cssText = 'display: flex; align-items: center; gap: 8px; padding: 8px 0; font-family: system-ui, sans-serif;';
-          row.dataset.index = i;
-          
-          const check = document.createElement('span');
-          check.style.cssText = `width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; ${item.checked ? 'background: #00cc00; color: white;' : 'border: 2px solid #ccc;'}`;
-          check.textContent = item.checked ? '✓' : '';
-          row.appendChild(check);
-          
-          const text = document.createElement('span');
-          text.style.cssText = item.checked ? 'text-decoration: line-through; color: #888;' : '';
-          text.textContent = item.text;
-          row.appendChild(text);
-          
-          list.appendChild(row);
-        });
-        
-        document.body.appendChild(list);
-      },
-      
-      updateChecklistItem(index, checked) {
-        const list = document.getElementById(`${EFFECTS_ID}-checklist`);
-        if (!list) return false;
-        
-        const row = list.querySelector(`[data-index="${index}"]`);
-        if (!row) return false;
-        
-        const check = row.querySelector('span');
-        const text = row.querySelectorAll('span')[1];
-        
-        if (checked) {
-          check.style.background = '#00cc00';
-          check.style.color = 'white';
-          check.style.border = 'none';
-          check.textContent = '✓';
-          text.style.textDecoration = 'line-through';
-          text.style.color = '#888';
-        } else {
-          check.style.background = '';
-          check.style.border = '2px solid #ccc';
-          check.textContent = '';
-          text.style.textDecoration = '';
-          text.style.color = '';
-        }
-        return true;
-      },
-      
-      clearChecklist() {
-        utils.removeElements(`#${EFFECTS_ID}-checklist`);
-      }
-    },
-
-    // BROADCAST
-    broadcast: {
-      showFacecam(position = 'bottom-right', size = 200, borderColor = '#0066ff') {
-        this.clearFacecam();
-        const positions = {
-          'top-left': { top: '20px', left: '20px' },
-          'top-right': { top: '20px', right: '20px' },
-          'bottom-left': { bottom: '20px', left: '20px' },
-          'bottom-right': { bottom: '20px', right: '20px' }
-        };
-        
-        const frame = utils.createElement('div', {
-          position: 'fixed',
-          ...positions[position],
-          width: `${size}px`,
-          height: `${size}px`,
-          borderRadius: '8px',
-          border: `3px solid ${borderColor || '#0066ff'}`,
-          background: '#1a1a1a',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: '#666',
-          fontSize: '14px',
-          fontFamily: 'system-ui, sans-serif'
-        }, `${EFFECTS_ID}-facecam`);
-        frame.classList.add(`${EFFECTS_ID}-overlay`);
-        frame.textContent = '📷 Facecam';
-        document.body.appendChild(frame);
-      },
-      
-      clearFacecam() {
-        utils.removeElements(`#${EFFECTS_ID}-facecam`);
-      },
-      
-      showChapterMarker(chapter, title, position = 'top-left') {
-        this.clearChapterMarker();
-        const positions = {
-          'top-left': { top: '20px', left: '20px' },
-          'top-right': { top: '20px', right: '20px' },
-          'bottom-left': { bottom: '20px', left: '20px' },
-          'bottom-right': { bottom: '20px', right: '20px' }
-        };
-        
-        const marker = utils.createElement('div', {
-          position: 'fixed',
-          ...positions[position],
-          background: 'rgba(0,0,0,0.8)',
-          color: 'white',
-          padding: '8px 16px',
-          borderRadius: '4px',
-          fontFamily: 'system-ui, sans-serif'
-        }, `${EFFECTS_ID}-chapter-marker`);
-        marker.classList.add(`${EFFECTS_ID}-overlay`);
-        marker.innerHTML = `<span style="opacity:0.6">Chapter ${chapter}</span> ${title}`;
-        document.body.appendChild(marker);
-      },
-      
-      clearChapterMarker() {
-        utils.removeElements(`#${EFFECTS_ID}-chapter-marker`);
-      },
-      
-      showCallout(selector, text, position = 'right') {
-        return effects.annotation.add(selector, { text, position, color: '#0066ff' });
-      },
-      
-      clearCallout() {
-        effects.annotation.clear();
-      },
-      
-      showHotkeyHint(keys, description, position = 'bottom-right') {
-        this.clearHotkeyHint();
-        const positions = {
-          'top-left': { top: '20px', left: '20px' },
-          'top-right': { top: '20px', right: '20px' },
-          'bottom-left': { bottom: '20px', left: '20px' },
-          'bottom-right': { bottom: '20px', right: '20px' }
-        };
-        
-        const hint = utils.createElement('div', {
-          position: 'fixed',
-          ...positions[position],
-          background: 'rgba(0,0,0,0.8)',
-          padding: '8px 12px',
-          borderRadius: '6px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px'
-        }, `${EFFECTS_ID}-hotkey-hint`);
-        hint.classList.add(`${EFFECTS_ID}-overlay`);
-        
-        keys.forEach((key, i) => {
-          if (i > 0) {
-            const plus = document.createElement('span');
-            plus.textContent = '+';
-            plus.style.color = 'rgba(255,255,255,0.5)';
-            hint.appendChild(plus);
-          }
-          const k = document.createElement('span');
-          k.style.cssText = 'background: #444; color: white; padding: 4px 8px; border-radius: 3px; font-size: 12px; font-family: system-ui, sans-serif;';
-          k.textContent = key;
-          hint.appendChild(k);
-        });
-        
-        const desc = document.createElement('span');
-        desc.style.cssText = 'color: rgba(255,255,255,0.8); font-size: 12px; margin-left: 8px; font-family: system-ui, sans-serif;';
-        desc.textContent = description;
-        hint.appendChild(desc);
-        
-        document.body.appendChild(hint);
-      },
-      
-      clearHotkeyHint() {
-        utils.removeElements(`#${EFFECTS_ID}-hotkey-hint`);
-      },
-      
-      showAlert(text, type = 'info', duration = 3000) {
-        const colors = {
-          info: '#0066ff',
-          success: '#00cc00',
-          warning: '#ff9900',
-          error: '#cc0000'
-        };
-        
-        const alert = utils.createElement('div', {
-          position: 'fixed',
-          top: '20px',
-          left: '50%',
-          transform: 'translateX(-50%) translateY(-100px)',
-          background: colors[type] || colors.info,
-          color: 'white',
-          padding: '12px 24px',
-          borderRadius: '8px',
-          fontSize: '16px',
-          fontFamily: 'system-ui, sans-serif',
-          boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
-          transition: 'transform 0.3s ease'
-        });
-        alert.classList.add(`${EFFECTS_ID}-overlay`, `${EFFECTS_ID}-alert`);
-        alert.textContent = text;
-        document.body.appendChild(alert);
-        
-        requestAnimationFrame(() => alert.style.transform = 'translateX(-50%) translateY(0)');
-        
-        setTimeout(() => {
-          alert.style.transform = 'translateX(-50%) translateY(-100px)';
-          setTimeout(() => alert.remove(), 300);
-        }, duration);
-      }
-    },
-
-    // NARRATION
-    narration: {
-      async speak(text, rate = 1, pitch = 1, position = 'bottom') {
-        return new Promise(resolve => {
-          this.showSubtitle(text, 0, position); // 0 = no auto-clear
-          
-          if ('speechSynthesis' in window) {
-            const utterance = new SpeechSynthesisUtterance(text);
-            utterance.rate = rate;
-            utterance.pitch = pitch;
-            utterance.onend = () => {
-              this.clear();
-              resolve(true);
-            };
-            utterance.onerror = () => {
-              this.clear();
-              resolve(false);
-            };
-            speechSynthesis.speak(utterance);
-          } else {
-            setTimeout(() => {
-              this.clear();
-              resolve(false);
-            }, text.length * 60); // Fallback timing
-          }
-        });
-      },
-      
-      showSubtitle(text, duration = 3000, position = 'bottom') {
-        this.clear();
-        const subtitle = utils.createElement('div', {
-          [position]: '40px'
-        }, `${EFFECTS_ID}-subtitle`);
-        subtitle.classList.add(`${EFFECTS_ID}-subtitle`);
-        subtitle.textContent = text;
-        document.body.appendChild(subtitle);
-        
-        if (duration > 0) {
-          setTimeout(() => subtitle.remove(), duration);
-        }
-      },
-      
-      clear() {
-        utils.removeElements(`#${EFFECTS_ID}-subtitle`);
-        if ('speechSynthesis' in window) {
-          speechSynthesis.cancel();
-        }
-      }
-    },
-
-    // TIMING
-    timing: {
-      async pause(duration = 1000) {
-        await utils.wait(duration);
-      },
-      
-      async panToElement(selector, duration = 500) {
-        const el = utils.getElement(selector);
-        if (!el) return false;
-        
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        await utils.wait(duration);
-        return true;
-      },
-      
-      async typeText(selector, text, speed = 50) {
-        const el = utils.getElement(selector);
-        if (!el || !('value' in el)) return false;
-        
-        el.focus();
-        for (const char of text) {
-          el.value += char;
-          el.dispatchEvent(new Event('input', { bubbles: true }));
-          await utils.wait(speed + Math.random() * 30);
-        }
-        return true;
-      }
-    }
-  };
-
-  // Unified apply function
-  function apply(effect, action, params = {}) {
-    const handler = effects[effect];
-    if (!handler) {
-      return { success: false, error: `Unknown effect: ${effect}` };
-    }
-    
-    const method = handler[action];
-    if (!method) {
-      return { success: false, error: `Unknown action: ${action} for effect: ${effect}` };
-    }
-    
-    try {
-      const result = method.call(handler, ...Object.values(params));
-      if (result instanceof Promise) {
-        return result.then(r => ({ success: r !== false, result: r }));
-      }
-      return { success: result !== false, result };
-    } catch (err) {
-      return { success: false, error: err.message };
-    }
-  }
-
-  // Banner (persistent top-of-page notification)
-  const banner = {
-    show(text, subtitle) {
-      this.clear();
-      const el = utils.createElement('div', {
-        position: 'fixed',
-        top: '20px',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        background: 'rgba(0,0,0,0.85)',
-        color: 'white',
-        padding: '12px 24px',
-        borderRadius: '8px',
-        zIndex: '99999',
-        fontFamily: 'system-ui, sans-serif',
-        fontSize: '18px',
-        fontWeight: '600',
-        boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-        textAlign: 'center',
-        pointerEvents: 'none'
-      }, `${EFFECTS_ID}-banner`);
-      let html = text;
-      if (subtitle) {
-        html += '<br><span style="font-size:14px;opacity:0.8;font-weight:400">' + subtitle + '</span>';
-      }
-      el.innerHTML = html;
-      document.body.appendChild(el);
-    },
-    clear() {
-      utils.removeElements(`#${EFFECTS_ID}-banner`);
-      const old = document.getElementById('__agex_title_overlay');
-      if (old) old.remove();
-    }
-  };
-
-  // Smart label positioning (shared by proof and highlight)
-  function computeLabelPosition(box, labelHeight, gap) {
-    labelHeight = labelHeight || 40;
-    gap = gap || 16;
-    var viewportBottom = window.innerHeight;
-    var elBottom = box.y + box.height;
-    var elTop = box.y;
-    var belowY = elBottom + gap;
-    var aboveY = elTop - gap - labelHeight;
-    var placeAbove = false;
-    var existingLabels = document.querySelectorAll('.agex-fx-label, .agex-proof-highlight');
-    var hasCollisionBelow = false;
-    var labelCenterX = box.x + box.width / 2;
-    existingLabels.forEach(function(el) {
-      var r = el.getBoundingClientRect();
-      if (r.top >= elBottom && r.top <= elBottom + labelHeight + gap * 2) {
-        if (Math.abs(r.left + r.width / 2 - labelCenterX) < 150) hasCollisionBelow = true;
-      }
-    });
-    if ((belowY + labelHeight > viewportBottom || hasCollisionBelow) && aboveY >= 0) {
-      placeAbove = true;
-    }
-    return placeAbove
-      ? (elTop + window.scrollY - gap - labelHeight)
-      : (elBottom + window.scrollY + gap);
-  }
-
-  // Proof / highlight helpers exposed on the API
-  const proof = {
-    highlightBox(box, label, color) {
-      color = color || '#00ff00';
-      if (!box || box.x === undefined) return 'invalid box';
-
-      var hl = document.createElement('div');
-      hl.className = 'agex-effects agex-fx-highlight';
-      hl.style.cssText = 'position:absolute;left:' + (box.x + window.scrollX - 4) + 'px;top:' + (box.y + window.scrollY - 4) + 'px;width:' + (box.width + 8) + 'px;height:' + (box.height + 8) + 'px;border:4px solid ' + color + ';border-radius:4px;pointer-events:none;z-index:2147483640;box-sizing:border-box;box-shadow:0 0 0 2px rgba(0,0,0,0.8),0 0 12px ' + color + ';';
-      document.body.appendChild(hl);
-
-      if (label) {
-        var labelEl = document.createElement('div');
-        labelEl.className = 'agex-effects agex-fx-label';
-        labelEl.textContent = label;
-        var labelY = computeLabelPosition(box);
-        labelEl.style.cssText = 'position:absolute;left:' + (box.x + window.scrollX + box.width / 2) + 'px;top:' + labelY + 'px;transform:translateX(-50%);background:' + color + ';color:white;padding:8px 16px;border-radius:6px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.4);z-index:2147483647;pointer-events:none;';
-        document.body.appendChild(labelEl);
-      }
-      return 'highlighted';
-    },
-
-    highlightProof(box, label, color) {
-      color = color || '#00ff00';
-      this.clearProof();
-      if (!box || box.x === undefined) return 'invalid box';
-
-      var hl = document.createElement('div');
-      hl.className = 'agex-effects agex-proof-highlight';
-      hl.style.cssText = 'position:absolute;left:' + (box.x + window.scrollX - 4) + 'px;top:' + (box.y + window.scrollY - 4) + 'px;width:' + (box.width + 8) + 'px;height:' + (box.height + 8) + 'px;border:4px solid ' + color + ';border-radius:4px;pointer-events:none;z-index:2147483640;box-sizing:border-box;box-shadow:0 0 0 2px rgba(0,0,0,0.8),0 0 12px ' + color + ';';
-      document.body.appendChild(hl);
-
-      if (label) {
-        var labelEl = document.createElement('div');
-        labelEl.className = 'agex-effects agex-proof-highlight';
-        labelEl.textContent = label;
-        var labelY = computeLabelPosition(box);
-        labelEl.style.cssText = 'position:absolute;left:' + (box.x + window.scrollX + box.width / 2) + 'px;top:' + labelY + 'px;transform:translateX(-50%);background:' + color + ';color:white;padding:8px 16px;border-radius:6px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.4);z-index:2147483647;pointer-events:none;';
-        document.body.appendChild(labelEl);
-      }
-      return 'highlighted';
-    },
-
-    highlightSelector(selector, label, color) {
-      color = color || '#2e7d32';
-      var el = document.querySelector(selector);
-      if (!el) return 'element not found: ' + selector;
-      effects.highlight.add(selector, { color: color, style: 'border' });
-      var rect = el.getBoundingClientRect();
-      var box = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
-      if (label) {
-        var labelEl = document.createElement('div');
-        labelEl.className = 'agex-effects agex-fx-label';
-        labelEl.textContent = label;
-        var labelY = computeLabelPosition(box);
-        labelEl.style.cssText = 'position:absolute;left:' + (rect.left + window.scrollX + rect.width / 2) + 'px;top:' + labelY + 'px;transform:translateX(-50%);background:' + color + ';color:white;padding:8px 16px;border-radius:6px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.4);z-index:2147483647;pointer-events:none;';
-        document.body.appendChild(labelEl);
-      }
-      return 'highlighted';
-    },
-
-    getBoundingBox(selector) {
-      var el = document.querySelector(selector);
-      if (!el) return null;
-      var r = el.getBoundingClientRect();
-      return { x: r.left, y: r.top, width: r.width, height: r.height };
-    },
-
-    scrollToSelector(selector) {
-      var el = document.querySelector(selector);
-      if (el) el.scrollIntoView({ block: 'center', behavior: 'instant' });
-    },
-
-    scrollToCoords(y, viewportHeight, elHeight) {
-      window.scrollTo({
-        top: window.scrollY + y - (viewportHeight / 2) + (elHeight / 2),
-        behavior: 'instant'
-      });
-    },
-
-    notFound(term, color) {
-      color = color || '#ff4444';
-      this.clearNotFound();
-
-      var border = document.createElement('div');
-      border.className = 'agex-effects agex-not-found-overlay';
-      border.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;border:8px solid ' + color + ';pointer-events:none;z-index:2147483640;box-sizing:border-box;';
-      document.body.appendChild(border);
-
-      var bannerEl = document.createElement('div');
-      bannerEl.className = 'agex-effects agex-not-found-overlay';
-      bannerEl.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:' + color + ';color:white;padding:16px 32px;border-radius:8px;z-index:2147483647;font-family:system-ui,sans-serif;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.4);';
-      bannerEl.innerHTML = '<div style="font-size:24px;font-weight:700;margin-bottom:8px;">NOT FOUND</div><div style="font-size:16px;opacity:0.9;">' + term + '</div>';
-      document.body.appendChild(bannerEl);
-
-      var xmark = document.createElement('div');
-      xmark.className = 'agex-effects agex-not-found-overlay';
-      xmark.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border:6px solid ' + color + ';border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:72px;color:' + color + ';font-weight:bold;opacity:0.3;z-index:2147483641;pointer-events:none;';
-      xmark.textContent = '\u2715';
-      document.body.appendChild(xmark);
-
-      return 'not-found overlay added';
-    },
-
-    clearProof() {
-      document.querySelectorAll('.agex-proof-highlight').forEach(function(e) { e.remove(); });
-    },
-
-    clearNotFound() {
-      document.querySelectorAll('.agex-not-found-overlay').forEach(function(e) { e.remove(); });
-    },
-
-    getScrollPosition() {
-      return { x: window.scrollX, y: window.scrollY };
-    }
-  };
-
-  // Clear all effects
-  function clearAll() {
-    effects.highlight.clear();
-    effects.annotation.clear();
-    effects.spotlight.clear();
-    effects.spotlight.clearBlur();
-    effects.zoom.reset();
-    effects.overlay.clearStep();
-    effects.overlay.clearLowerThird();
-    effects.overlay.clearWatermark();
-    effects.overlay.clearProgress();
-    effects.drawing.clear();
-    effects.attention.clearMagnify();
-    effects.attention.clearNumberSteps();
-    effects.info.clearTooltip();
-    effects.info.clearCodeSnippet();
-    effects.info.clearStatsCounter();
-    effects.info.clearChecklist();
-    effects.broadcast.clearFacecam();
-    effects.broadcast.clearChapterMarker();
-    effects.broadcast.clearHotkeyHint();
-    effects.narration.clear();
-    banner.clear();
-    proof.clearProof();
-    proof.clearNotFound();
-    utils.removeElements(`.${EFFECTS_ID}`);
-  }
-
-  // Initialize
-  injectStyles();
-
-  // Expose API
-  window.__agexEffects = {
-    apply,
-    clearAll,
-    banner,
-    proof,
-    ...effects,
-    utils
-  };
-})();